/* Hides results page elements */

.solutions-container, .share-container, .results-text {
	display:none;
}
.padding-footer {
	padding-top:30px;
}
.question-passage {
	margin:0;
}
.test-container .image-container .response-image {
	max-width:600px;
}

body{margin:0;}
header{box-shadow: 0 4px 2px -2px rgba(51, 51, 51, .2);box-sizing:unset;}
.header-container{min-width:600px;max-width:1140px;margin: 0 auto;}
.blue {background-color: #062f4f;}
.purple {background-color: #3c0355;}
/*.green {background-color: #00b050;}*/
.header-component{padding: 0px 0px 10px 0px;}
.header-component li {list-style:none;height:50px;display:inline-block;*display:inline;vertical-align:top;}
.header-component .logo-container{width:25%;}
.header-component .logo-container-member{width:76%}
.header-component .logo-container img{ max-width: 370px; max-height: 45px;padding-top:8px;}
.header-component .logo-container-member img{max-width:171px;max-height:55px;padding-top:8px;}
.header-component .info-container{width:74%;padding-left:20px; text-align:right;}
.header-component .info-container-footer{width:100%;color:#ffffff;text-align: center;}
.header-component .button-container{width:24%;margin-left:-5px;text-align:right;}
.header-component .upgrade-button, .header-component  .my-account{color: inherit;font: inherit;line-height: normal;overflow: visible;padding: 0;border: 1px solid #ffffff;border-radius: 5px;padding:7px 15px 7px 15px;color:#ffffff;margin-top:10px;margin-right:5px; text-decoration:none;display: inline-block;}
.header-component .upgrade-button {background-color:#00b050;}
.header-component .my-account{background-color:#4285f4;margin-left:5px;font-size:14px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;padding:10px 20px 10px 20px;}
.header-component .upgrade-button:hover{background-color:#007d39;}
.header-component .upgrade-button:focus{background-color:#007d39;}
.header-component .upgrade-button:active{background-color:#007d39;}
.header-component .my-account:hover{background-color:#4285f4;}
.header-component .my-account:focus{background-color:#4285f4;}
.header-component .my-account:active{background-color:#4285f4;}
.info{margin-top: 15px; color: #444444; padding-right: 10px; font-size: 18px;}
.footer{margin-top:20px;}
.extratime{color:#333;text-decoration:none;font-weight:bold;}
.red-circle{position:relative;}
.red-circle::after{ width:10px; height:10px; background-color:#e22828;position:absolute; top:-5px; right:-5px;  content: ''; border-radius: 10px;}
/* start button styles  */
.button.normal, .button.next {background-image:none;background-color:#00b050;text-indent:0px;}
.button.normal:hover, .button.next:hover {background-image:none;background-color:#007d39;text-indent:0px;}
.button.previous, .button.previous.disabled {display:none;}
.button.previous.disabled{background-color:#b1b1b1;cursor:default;}
/* end button styles  */

/* start fix text width for drag-n-drop */
.question-answers-dragdrop-dragzone-text{width:96%;}
/* end fix text width for drag-n-drop */

/* start make Capp Style more pretty */
.question-answers-rank .question-answers-rank-item {
	background-color:#ffffff;
	border-radius:2px;
	border:1px solid #dcdcdc;
}
.question-text-dashed-wide {
	border:none;
	padding:0;
}
.question-text-dashed-wide .text {
	padding: 20px;
	margin: 1px 10px 5px 1px;
    border-radius: 2px;
    box-shadow: 0 0 8px #bbbbbb;
}
.question-answers-list {
    margin-left: 0;
	padding-left: 20px;
}
.test-container .button-container {
    margin: 60px auto;
}

/* end Capp Style more pretty */

/* Start email success notification on results page */
.email-message {
	color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    font-size: 16px;
    padding: 12px 0;
}
/* End email success notification on results page */

/* start keeping left and right columns nice and 50-50 */
.column-left, .column-right {
	width: 50%;
}
/* end keeping left and right columns nice and 50-50 */

/* Remove 'instructions' button as it's not wanted */
.column-100.align-right button.button.normal {display:none;}

/* start change colours on results page */
.scale-item.red {
  background-color: #e6eaed; }

.scale-item.grey {
  background-color: #e6eaed; }

.scale-item.grey.small {
  width: 20px;
  height: 20px;
  background-color: #e6eaed; }

.scale-item.green {
  background-color: #e6eaed; }
  
.scale-indicator.large {background-image: url(../images/green-indicator-large.png);}
.scale-indicator.small {background-image: url(../images/green-indicator-small.png);}  

.responses-list .responses-item .responses-question-answer-item.responses-question-answer-item-correct {
	border: 2px solid #333;
	background-color: #8dc63f; }
.responses-list .responses-item .responses-question-answer-item.responses-question-answer-item-incorrect {
	border: 2px dashed #333;
	background-color: #af1218; 
	color: white;}

/* end change colours on results page */

/* ------- Media Queries ------- */
@media (max-width: 1200px) {
.header-component .logo-container{width:25%;list-style:none;height:50px;display:inline-block;*display:inline;vertical-align:top;}
.header-component .info-container{width:74%;color:#ffffff;list-style:none;height:50px;display:inline-block;*display:inline;vertical-align:top;}
.header-component .button-container{width:24%;list-style:none;height:50px;display:inline-block;*display:inline;vertical-align:top;}
}

@media (max-width: 992px) {
.header-component .logo-container{width:22%; list-style: none;height:50px;display:inline-block;*display: inline;vertical-align:top;}
.header-component .info-container{width:75%;color:#ffffff; list-style: none;height:50px;display:inline-block;*display: inline;vertical-align: top;}
.header-component .button-container{width:24%;list-style:none;height:50px;display:inline-block;*display:inline;vertical-align:top;}
}

@media (max-width: 870px) {
	.header-container { width: 100%;  min-width: 100%;  max-width: 100%;}

   .header-component .logo-container{width:100%; text-align: center;}
   .header-component .info-container{width:100%; text-align: center;}
   .info{display: none;}
   /* resize dropdown in mobile view */ 
   .question-answers-dropdown{padding:5px; margin:0px; margin-top:20px;min-width:280px;}
   /* Centre question text in mobile view*/
   .question-text{margin-left:10px;}
 
}