.exercise {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    padding-bottom: 0;
}

.exercise .level1 div{
    font-size: 16px;
    font-weight: bold;
    color: #004AAC;
    text-align: left;
    line-height: 28px;
}

.exercise .level2 div{
    font-size: 16px;
    color: #004AAC;
    text-align: left;
    line-height: 28px;
    border-bottom: 1px solid #666666;
}

.exercise .level3 div{
    font-size: 28px;
    font-weight: bold;
    color: #0D3880;
    text-align: left;
    line-height: 33px;
    margin: 30px 0;
}

.exercise .level3 div.cefr{
    background: #666666;
    border-radius: 3px;
    color: #FFF;
    margin-right: 5px;
    padding: 3px 5px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    margin-left: 12px;
}

.exercise .exercise-choice input[type='radio'] {
    display: none;
}

.exercise .exercise-choice input[type='radio']:checked+label,
.exercise .exercise-group .exercise-item {
    background: #92b2dc;
}

.exercise .exercise-choice input[type='radio'].error+label,
.exercise .exercise-item.error,
.exercise .exercise-group .exercise-item.error,
.exercise .exercise-gap-item.error {
    background: #E61928;
}

.exercise .exercise-choice input[type='radio'].correct:checked+label,
.exercise .exercise-item.correct,
.exercise .exercise-group .exercise-item.correct,
.exercise .exercise-gap-item.correct {
    background: #4e7d19;
}

.exercise .exercise-qtext {
    font-size: 1.2em;
}

.exercise .exercise-audioAsset {
    color: #da0000;
    font-size: 1.5em;
}

.exercise .exercise-choice {
    display: inline-block;
}

.exercise .exercise-group {
    margin: 2px 0 2px 0;
    line-height: 3em;
    background: #f7f7f7;
}

.exercise-gap-drag, .exercise-sequence-drag {
    background: #f7f7f7;
    padding: 2px;
}

.exercise-gap-drag {
    padding: 0px;
    width: 10em;
    vertical-align: middle;
    border: 1px dashed;
    border-radius: 10px;
    margin-bottom: 1px;
    margin-top: 1px;
}

.undropped.exercise-gap-drag {
    height: 44px;
    display: inline-block;
}

.dropped.exercise-gap-drag {
    height: auto;
    min-height: 44px;
    width: auto;
    min-width: 160px;
}

.currentMove{
    position:fixed;
    z-index:50000;
}

.exercise-sequence-drag {
    min-height: 3em;
}

.exercise .exercise-group-title, .exercise-gap-item {
    margin-right: 1em;
    margin: 5px;
    display: inline-block;
    padding: 2px 4px;
}

.exercise .exercise-footer {
    margin: 40px auto;
    max-width: 342px;
}

.exercise-context .exercise-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: #f2f2f2;
    font-weight: normal;
    border-radius: 3px;
    margin: 32px 0;
}

.exercise-context .exercise-div span {
    margin: 10px;
}

.exercise-rubric div,
.exercise-mc,
.exercise-mc div,
.exercise-gapfill div,
.exercise-audioAsset,
.gapfill-drag div,
.result{
    display: inline-block;
}

.exercise-mc {
    text-align: center;
    width: 100%;
}

.exercise-rubric {
    font-weight: bold;
}

.view {
    overflow: hidden;
    position: relative;
    width:1px;
    background-color: white;
    margin-top: 20px;
}

.round-button {
    display:block;
    height: 1.5em;
    width: 1.5em;
    border-radius: 50%;
    border: 1px solid black;
}
img.contextImage {
    float: none;
    width: auto;
}

.select-question, .exercise-gap-input {
    margin: 2px;
    width: 180px;
    height: 32px;
    padding-left: 0.5em;
    background-color: #e6f0f8;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #0069B4;
}

.select-question, .exercise-gap-input:hover {
    border-color: #94aed0;
}

.select-question, .exercise-gap-input:focus {
    border-color: #94aed0;
    background-color: #ffffff
}

.select-question.correct, .exercise-gap-input.correct {
    border-color: #38A867;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-image: url(../images/grammar/icon-validation-tick.svg);
    background-size: 16px;
    background-position: 96% center;
}

.select-question.error, .exercise-gap-input.error {
	display: inline-block;
    background-color: #ffffff;
    border-color: #CA2567;
}

.select-question.correct,.select-question.error {
    -moz-appearance: none; /* for Firefox */
    -webkit-appearance: none; /* for Chrome */
}

.select-question.correct::-ms-expand, .select-question.error::-ms-expand {
    display: none; /* for IE10 */
}

#tocTitle {
    font-weight: 650;
    font-style: normal;
    font-size: 28px;
    color: #0D3880;
    text-align: left;
}

.mainToc {
    margin-top: 30px;
}

.mainToc span .toc-level1 {
    font-style: normal;
    font-size: 18px;
    color: #0D3880;
    text-align: left;
    line-height: 42px;
}

.tocLink {
    float: right;
}

 .tocContent h3 {
    margin: 0;
    padding: 0;
}

.tocContent hr {
    border-bottom: 1px solid #cccdc9;
    color: #ffffff;
    border-style: solid;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: 'Source Sans Pro', sans-serif;
}

.tocContent hr.hidden {
    display: none;
}

.prep {
    margin-left: 3em;
}

.bottom-fixed-bar {
    position: fixed;
    bottom: 0;
    background-color: rgba(180, 183, 189, 0.53);
    left: 0;
}

.exercise-reading p {
    text-align: left;
}

.inline-div {
    display: inline-block;
}

.auto-div .exercise-sequence-drag{
    height: auto;
}
.opt_content {
    width: 400px;
    margin: 0 auto;
    text-align: left;
}
.items_content {
    display: none;
    margin: auto;
    margin-left: 22px;
    padding: 0 10px;
}
.items_title {
    font-weight: bold;
    color: #000000;
}
#rightcolumn .mainToc .items_title {
    font-weight: normal;
    color: #000000;
}
.items_title:hover {
    font-weight: bold;
    cursor: pointer;
    color: #004aac;
    text-decoration: none;
}
.items_title:before {
    width: 14px;
    height: 14px;
    background-image: url(../images/grammar/icon-plus-minus-blue.png);
    background-size: 100% auto;
    background-position: center bottom;
    content: "";
    display: inline-block;
    margin-right: 12px;
    position: relative;
    top: 1px;
}

.items_title.is-active:before {
    background-position: center top;
}

.items_elem {
    margin: 10px 0;
}

#dot {
    font-size: 14px;
    margin-right: 5px;
    cursor: pointer;
}

.exercise .exercise-choice label, .exercise .exercise-footer a.button,
.exercise-item, .exercise-gap-item, .exercise .exercise-group .exercise-item {
    background: #416cd0;
    margin: 5px 1px 5px 1px;
    display: inline-block;
    padding: 5px 8px;
    cursor: pointer;
    color: white;
}

.exercise-gap-item {
    margin: 4px;
}

.exercise .exercise-choice label{
    border-radius: 5px;
}

.inline{
    display: inline-block;
}
.margin1{
    margin-top: 1em;
    white-space: initial;
}
.b1{
    vertical-align: middle;
    padding-right: 10px;
}

.exercise-question {
    display: inline-block;
    vertical-align: top;
    white-space: initial;
    padding-left: 12px;
    padding: 10px 0;
}

.exercise-exercise .view {
    white-space: nowrap;
}
.exercise-exercise .container {
    position: relative;
}

.exercise-gapfill-drag {
    margin-top: 1em;
}

.exercise-gapfill-drag-bag {
    white-space: initial;
}

.exercise-gapfill b {
    font-weight: bold;
}

.exercise-gap-item, .exercise-item {
    display: inline-block;
    vertical-align: middle;
    border-radius: 5px;
}

.exercise-footer div {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
}

.exercise-footer div button:disabled,
.exercise-footer button:disabled {
    color: #d9d9d9;
    border-color: #d9d9d9;
    background-color: #ffffff;
    cursor: default;
}

.exercise-footer .exercise-show,
.exercise-footer .exercise-try-again {
    cursor: pointer;
    height: 28px;
    border: 1px solid #d9d9d9;
    border-radius: 150px;
    color: #004aac;
    background-color: #ffffff;
}

.exercise-footer .exercise-show:hover:enabled,
.exercise-footer .exercise-try-again:hover:enabled {
    background-color: #d9d9d9;
}

.exercise-footer .exercise-check {
    cursor: pointer;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 150px;
    color: #ffffff;
    background-color: #004aac;
}

.exercise-hidden {
    display: none;
}

.exercise-footer .bottom-row {
    cursor: pointer;
    width: 100%;
    max-width: 342px;
    height: 43px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #ffffff;
    background-color: #004aac;
}
.exercise-footer .exercise-check:hover:enabled,
.exercise-footer .bottom-row:hover:enabled {
    background-color: #002147;
}

label .fa, .exercise-gap-item .fa, .exercise-item .fa {
    margin-left: 10px;
}

.tab {
  overflow: hidden;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: #ebf0f5;
    outline: none;
    border: none;
    border-radius: 5px 5px 0px 0px;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    width: 49%;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #fff;
    font-weight: bold;
    border: 1px solid #ccc;
    border-bottom: 0px;
    border-radius: 5px 5px 0px 0px;
}

.tab .ref {
    float: left;
}

.tab .practice {
    float: right;
}

.cefrToc,
.cefr {
	background: #666666;
    border-radius: 3px;
    color: #FFF;
    margin-right: 5px;
    padding: 3px 5px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    margin-left: 12px;
}
.cefr {
    vertical-align: bottom;
	background-color: grey;
    color: white;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
  margin-top: 32px;
}
.tabcontent.show {
	display: block;
}
a.current {
    background-color: #b6b5b5;
}

#rightcolumn .items_elem.current {
    background: inherit;
    background-color: inherit;
    background-color: rgba(221, 221, 221, 1);
    border: none;
    border-radius: 5px;
    box-shadow: none;
    font-family: 'SourceSansPro-Regular', 'Source Sans Pro';
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #282828;
    text-align: left;
    padding: 8px;
}

#rightcolumn .items_elem.current a,
#rightcolumn .items_elem.current a:hover {
    text-decoration: none;
    color: black;
    cursor: default;
}

#rightcolumn .items_content {
    margin-left: 0;
}

#rightcolumn .mainToc span .toc-level1 {
    line-height: 25px;
}

#rightcolumn #tocTitle {
font-size: 18px;
margin-right: 20px;
color: #282828;
}

@media screen and (min-width: 320px) and (max-width: 812px) {
    .exercise {
        border: 0;
        padding: 0;
    }
    
    .exercise-gapfill-drag {
        margin-top: 0;
    }
    .exercise-mc div {
    	display: block;
   	}
    .exercise .exercise-choice {
    	display: block;
	}
	.exercise .exercise-choice label {
		width: 100%;
		text-align: center;
	}
}

.hr_underline {
    margin-top: 0;
    border-color: #333333;
    border-bottom-width: 0px;
}
#bottom_practice_button {
    float: right;
    width: 97px;
    background-color: #004bac;
    border-color: #004bac;
    color: #ffffff;
    line-height: 28px;
}

#bottom_practice_button:after {
    content: "";
    background-repeat: no-repeat;
    background-image: url(../images/grammar/link-right-white.png);
    background-size: contain;
    background-position-y: center;
    padding: 0px 3px 0px 4px;
    margin-left: 5px;
}

#bottom_practice_button:hover {
    background-color: #002147;
    border-color: #002147;
    cursor: pointer;
}

#bottom_grammar_button {
    float: left;
    width: 157px;
    background-color: #ffffff;
    border-color: #d9d9d9;
    color: #004bac;
    line-height: 28px;
    text-align: center;
    padding-right: 5px;
}

#bottom_grammar_button:before {
    content: "";
    background-repeat: no-repeat;
    background-image: url(../images/grammar/link-left-blue.png);
    background-size: contain;
    background-position-y: center;
    padding: 0px 3px 0px 4px;
    margin-right: 5px;
}

#bottom_grammar_button:hover {
    background-color: #e4e4e4;
    cursor: pointer;
    text-decoration: none;
}

#reference .heading span,
#reference .heading {
    font-style: normal;
    font-size: 18px;
    font-weight: bold;
    color: #0D3880;
    text-align: left;
    margin-bottom: 10px;
}

.reference_bottom_button {
    height: 30px;
    background: inherit;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-radius: 150px;
    box-shadow: none;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}

.reference {
    margin-bottom: 30px;
}

.practice_list{
    list-style-type:none;
}

.practice_list .practice_number {
    font-weight: bold;
}

.exercise-progress-score .score {
    margin-top: 32px;
    margin-bottom: 40px;
}

.exercise-progress-score .score,
.exercise-progress-score .score span {
    font-size: 28px;
    color: #0D3880;
    text-align: center;
}

.exercise-progress-score .score span {
    font-weight: bold;
}

.exercise-progress-score .progression {
    margin-top: 40px;
    margin-bottom: 32px;
}




/* CSS moved from templates-main/layouts/reference.html */

		/* styling for embedded video */
		iframe[src*="vimeo"] {
			border-style: solid; border-width: 3px;
			display: block;
	
		}

		
		div[style*="max-width"] {
			margin-bottom: 1em;
		}
		
		/* end of styling for embedded video */

		div.exercise
		{
		font-family: "Source Sans Pro", sans-serif;
			color: #333333;
		}

		div.exercise [market=adult]
		{
		/*  background-color: #BEEEFC !important; */
		}

		div.exercise [market=secondary]
		{
			/*   background-color: #FCBDBD !important; */
		}

		div.exercise [market=general]
		{
			/*   background-color: #D2F5B0 !important; */
		}

		div.exercise .example
		{
		  font-style: italic;
		}

		div.exercise .gloss
		{
		  font-style: normal;
		}

		div.exercise .wrong_example
		{
		  font-style: italic;
		  padding-left: 2mm;
		  text-decoration: line-through;
		}

		div.exercise .heading
		{	
		 /*border: solid white 1mm;*/

			color: #1A3561;
		 display: block;
			font-size: 28px;
		 padding-top: 0.5em  ;
		/*	padding-bottom: 0.5em; */


		}

			div.exercise .heading * {
				 font-size: 28px;
			}

		div.exercise .use  .heading
		{

			margin-top: 1em;
		}

		div.exercise .item
		{
		  font-style: italic;
		  font-weight: 600;
		}

		div.exercise  .select-question .item
		{
		  font-style: normal;

		}

		#reference	span.heading > span.item {
				font-style: italic;
			}


		div.exercise .term
		{
		  font-weight: 600;
		}

		div.exercise a
		{
		  padding-left: 1mm;
		}

		div.exercise .xref-group a
		{
		  padding-left: 0;
		}


		div.exercise table
		{ display: table;
		  margin-left: 7mm;
		  margin-bottom: 3mm;
		  margin-top: 2mm;
		}

		div.exercise table, div.exercise td, div.exercise th
		{
		 border-collapse: collapse;

		 border: solid 1px black;
		}

		div.exercise td, div.exercise th

		{
		  display: table-cell;
		  padding: 1mm;
		}

				div.exercise th {
					text-align:left;
				}

		div.exercise tr
		{
		  display: table-row;
		}

		div.exercise div.level1
		{
			font-weight: bold;
			font-size: 120%;
		margin-left: 0em;
		}
		div.exercise div.level2
		{
			font-weight: 500;
			font-size: 110%;
		margin-left: 1em;
		}
		div.exercise div.level3
		{
		/*margin-left: 2em;*/
		}

		div.exercise div.rule
				{margin-top: 1em;
				}

		div.exercise  li
		{
			margin-left: 1em;
			list-style-type: none;

		}

		div.exercise  li::before {
			content: "•";
			padding-right: 0.5rem;
			margin-left: -0.75rem;
			color: rgb(111, 111, 111);
		}

		div.exercise table li
		{
			 margin-left: inherit;
			list-style-type: none;

		}  
		div.exercise table li::before
		{
			content:none;

		}

		.mainToc  h2, div.mainToc h2 {
			font-size: 18px;
		}

		div.reference th {font-weight: 600 !important} 

		input.exercise-gap-input {
			font-size: 16px; /* minimum font size to disable iPhone zooming in */
		}
		div.statement .xref-group:before {
			content: " ";
		}