@import url(https://fonts.googleapis.com/css?family=Muli:400,300,400italic,300italic,700);
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,300);

body {
    font-family: "Muli", sans-serif;
    font-size: 18px;
    line-height: 25px;
    font-weight: 400;
}

#header+.container {
    margin-top: -30px;
    padding-right: 70px;
    max-width: 1000px;

}

#header+.container>.row>.col-md-12 {
    margin-left: 20px;
    margin-right: 30px;
    overflow: visible;
    border-right: 1px solid #eee;
    padding-bottom: 50px;
}

h1, h2, h3, h4, h5, h6 {
font-family: "Quicksand", sans-serif;
font-weight:700;
}

h1 {
background: none;
font-size: 75%;
line-height: 15px;
padding-left: 15px;
border-bottom: #aaa 1px dotted;
margin: 0 -15px;
color: #000000;
}

h2 {
border-left: none;
margin-left: 0px;
padding: 15px 0px 10px 0px;
color: #212121;
margin-top: 50px;
margin-bottom: 10px; 
font-variant: small-caps;
font-weight: 700; 
font-size: 200%;
}

h3 {
border-bottom: none;
font-size: 115%;
font-weight: 700;
margin-top: 30px;
margin-bottom: 15px;
color: #212121;
}

h4 {
margin-top:30px;
}

p, ul, ol {
    font-size: 18px;
}
p {
margin-top: 10px;
margin-bottom: 20px;
}

a[target="_blank"]:after {
    background: url(https://learn.uwaterloo.ca/shared/uw_media/master/icons/new-tab.png);
    content: "";
    display: inline-block;
    height: 16px;
    left: 3px;
    position: relative;
    top: 4px;
    width: 16px;
}

.course_keyTerm{
    border: 1px dotted #CCCCCC;
  padding: 1px 2px 1px 2px;
  background-color: #F2F2F2;
}

figcaption {
    font-size: 13px;
    line-height: 1.5;
}
.copyright,
.cel_copyright,
.media-copyright {
    font-size: 12px;
    text-align: left;
    margin-top: 5px;
    padding-top: 0;
    line-height: 1.2;
    margin-bottom: 15px;

}

.media-copyright {
    margin-top: 10px;
    margin-bottom: 30px;
}

.media-copyright.mp4video span a{
    border: 1px solid #ccc;
    padding: 5px 10px;
    line-height: 2.5;
    border-radius: 3px;
}

caption.table-no-caption,
.table-no-caption caption {
 display: none;
}



.course_table-blue-bkgd {
    background: #d9edf7;
}

.table-striped>tbody>tr:nth-of-type(odd){
    background-color: transparent !important;
    }

.table-striped>tbody>tr:first-child>th {
        border-top: 0 !important;
}

.table-striped>tbody>tr:nth-of-type(even){
    background-color:#f9f9f9;
    }


.table-striped>thead>tr {
    background-color: #f9f9f9;
}
/* -------------------------------------------------------------------------
Images
--------------------------------------------------------------------------*/
.img-responsive img {
    display: block;
    margin: 0 auto;
}

/* image description accordions */

.img-responsive+.copyright+.accordionElement {
    margin-top: -20px;
    margin-bottom: 20px;
}
.accordionToggle {
    font-size: 12px;
    border: 1px solid #ccc;
    padding: 0 5px;
    border-radius: 3px;
    display: inline-block;
    margin-left: 0;
    margin-bottom: 5px;
}

.accordionToggle[aria-expanded="false"]:before,
.accordionToggle[aria-expanded="true"]:before {
    background: #333;
    color: #fff;
    border-radius: 50%;
    margin: 5px 5px 0 2px;
    text-align: center;
    line-height: 1.4;
}

.accordionContent {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

.accordionContent,
.accordionContent p,
.accordionContent li {
    font-size: 13px;
    line-height: 1.5;
}

.accordionContent p{
    margin-bottom: 5px;
}

.accordionContent p:last-child {
    padding-bottom: 0;
    margin-bottom: 5px;
}


/* -------------------------------------------------------------------------
Callouts
--------------------------------------------------------------------------*/

.panel-body {
    padding: 10px 20px 5px 20px;
}

/* Person box - rounded corners */
.custom-div-one {
    margin: 30px -35px;
    background: #FFF;           
    padding: 20px 40px 20px 40px;
    -webkit-box-shadow: 0 0 15px #adadad;
    -ms-box-shadow: 0 0 15px #adadad;
    -moz-box-shadow: 0 0 15px #adadad;
    -o-box-shadow: 0 0 15px #adadad;
    box-shadow: 0 0 15px #adadad; 
    border-radius: 5px 100px 5px 100px;
    -moz-border-radius: 5px 100px 5px 100px;
    -webkit-border-radius: 5px 100px 5px 100px;
}

.custom-div-one .col-md-3 .copyright {
    text-align: center;
    font-size: 13px;
}

/* Interaction box */
.custom-div-two {
    margin: 30px -30px;
    background: #fff;
    padding: 20px 30px;
    -webkit-box-shadow: 0 0 15px #adadad;
    -ms-box-shadow: 0 0 15px #adadad;
    -moz-box-shadow: 0 0 15px #adadad;
    -o-box-shadow: 0 0 15px #adadad;
    box-shadow: 0 0 15px #adadad; 
}

/*replicating style so all MCQ look the same */
.mc-instant-feedback_questionContainer .radio {
  margin-left: 25px;
}

.mc-instant-feedback_questionContainer .alert {
  padding: 15px 30px;
}

.mc-instant-feedback_questionContainer .radio label {
  padding: 4px 8px 6px 8px;
  display: inline-block;
  cursor: pointer;
  top: 0;
  position: relative;
  border-radius: 6px;
  font-weight: 400;
}

.mc-instant-feedback_questionContainer .radio label input {
  margin-left: -30px;
  height: 20px;
  width: 20px;
}
.mc-instant-feedback_questionContainer .radio label:hover,
.mc-instant-feedback_questionContainer .radio label:focus {
  background :#f5f5f5;
  
}

/*remove styling from MSQ and MCQ interactives */
.msq,
.mcq {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding-left: 0px !important;
}

.msq legend,
.mcq legend {
    border-bottom: none !important;
    margin-bottom: 5px !important;
}

.msq-heading,
.mcq-heading {
    font-family: "Muli", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700;
}

.msq-attempts-message,
.mcq-attempts-message {
    font-family: "Muli", sans-serif !important;  
}

.msq-options-container,
.mcq-options-container {
    font-family: "Muli", sans-serif !important;
    font-size: 18px !important;
}

.msq-buttonrow,
.mcq-buttonrow {
  margin-top: -10px !important;
    margin-left: 0 !important;
    border-top: none !important;
}
.msq-buttonrow .col-md-12,
.mcq-buttonrow .col-md-12 {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-right: none;
}

.msq-option input, 
.mcq-option input {
    height: 20px !important;
    width: 20px !important;
}

.msq-option label, .mcq-option label {
    padding-bottom: 0 !important;
}

.msq-resetbutton, 
.msq-submitbutton, 
.mcq-resetbutton, 
.mcq-submitbutton {
    border-radius: 10px !important;
    padding: 6px 12px !important;
}

.msq-question-attempts, .mcq-question-attempts {
    top: 0 !important;
    margin-top: 3px;
    margin-bottom: 3px;
}

.msq-optionspecificfeedback, 
.mcq-optionspecificfeedback{
  /* display: none !important; */
   padding: 4px !important;
   margin-top: 0;
   margin-bottom: 0 !important;
   margin-left: 30px;
   background: none !important;
   -webkit-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

.msq-optionspecificfeedback p:has(' '), 
.mcq-optionspecificfeedback p:has(' ') {
  display: none;
}


.msq-option input + label::before, .mcq-option input + label::before {
  height: 22px !important;
  width: 22px !important;
  top: 8px !important;
  border: 1px solid !important;
}

.mcq-option input + label::after {
    height: 16px !important;
    width: 16px !important;
    left: -42px !important;
    top: 11px !important;
    background: #0075ff !important;
    border-color: #0075ff !important;
}

.msq-option input + label::after {
    left: -39px !important;
    top: 9px !important;
    color: #0075ff !important;
    
}
.mcq-correctAnswer:before, .msq-correctAnswer:before,
.mcq-incorrectAnswer:before, .msq-incorrectAnswer:before {
    top: 5px !important;
}

.msq-generalcorrectfeedback,  
.msq-generalincorrectfeedback {
    padding: 55px 30px 10px 30px !important;
    margin: -44px -35px 0px -20px !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    background: none !important;
    min-height: 100px !important;
}
.mcq-generalcorrectfeedback, 
.mcq-generalincorrectfeedback {
   padding: 20px 30px 10px 30px !important;
    margin: -44px -35px 0px -20px !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    background: none !important;
    min-height: 100px !important;
}

.msq-generalcorrectfeedback .col-md-1,  
.msq-generalincorrectfeedback .col-md-1,
.mcq-generalcorrectfeedback .col-md-1, 
.mcq-generalincorrectfeedback .col-md-1 {
  display: none !important;
}

.msq-generalcorrectfeedback .col-md-11,  
.msq-generalincorrectfeedback .col-md-11,
.mcq-generalcorrectfeedback .col-md-11, 
.mcq-generalincorrectfeedback .col-md-11 {
  width: 100%;
}

.mcq-generalincorrectfeedback {
  padding-top: 55px !important;
}

.mcq-generalcorrectfeedback {
  margin-top: -20px !important;
}

.mcq-generalcorrectfeedback .row,
.msq-generalcorrectfeedback .row {
  border: 1px solid #d6e9c6 !important;
  padding: 15px;
  border-radius:4px;
  background-color: #dff0d8 !important;;
}

.mcq-generalincorrectfeedback .row,
.msq-generalincorrectfeedback .row {
  border: 1px solid #ebccd1;
  padding: 15px;
  border-radius:4px;
  background-color: #f2dede;
}

.saq-question-container {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.saq-question-container .saq-note {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 5px;
    line-height: 1.5;
    color: #333;
}

.saq-button {
    background: #337ab7;
    border-color: #2e6da4;
    color: #fff;
    border-radius: 10px;
}

.saq-feedback {
    padding-top: 5px;
    padding-bottom: 5px;
}

.saq-feedback h4 {
    margin-top: 20px;
}

/* TAB CONTENT */

.custom-div-three {
    background: rgba(240, 240, 240, 0.4);
    padding: 20px;
    border-top: 1px solid #d2d2d2;
    border-bottom: 1px solid #d2d2d2;
    margin: 20px -15px 10px -15px;
    overflow: hidden;
}

.custom-div-three .nav-tabs {
    float: left;
    max-width: 35%;
    margin-top: 20px;
    padding-right: 20px;
}

.custom-div-three ul.nav-justified>li {
    font-size: 14px;
    font-weight: 700;
    display: block;
    width: 100%;
    padding-top: 0;
}

.custom-div-three ul.nav-justified>li>a {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-right: -1px;
    color: #286090;
    background: #fff;
}

.custom-div-three ul.nav-justified>li>a:last-child {
    border: 1px solid #ddd !important;
    margin-bottom: 5px;
}
.custom-div-three .tab-content {
    float: left;
    margin: 20px auto 0 auto;
    width: 65%;
    display: block;
    border: none;
}

.custom-div-three .tab-content .tab-pane {
    background: #fff;
    width: 100%;
}

.custom-div-three .nav-tabs li.active a {
    color: #fff;
    background: #286090;
    border-color: #204d74;
    text-decoration: none;
}



/* Yellow box (prev alert-warning) */
.custom-div-four {
    background: #fcf8e3;
    border: 1px solid #faebcc;
    border-radius: 4px;
    padding: 15px;
    margin: 20px 0;
}

.custom-div-four .copyright {
    margin-bottom: 5px;
}


/*Making feedback (blue) answer boxes for instant feedback mcqs with no wrong answers (ensure all are 'correct') */
.custom-div-five .mc-instant-feedback_feedback .alert-correct {
    background: #d9edf7;
    border: 1px solid #bce8f1;
    color: #000;
}
/* Providing overall feedback for activity, using accordion, when content didn't fit in feedback of h5p or other*/
.custom-div-two .custom-div-five .accordionContent {
    font-size: 18px;
    background :#d9edf7;
    border: 1px solid #bce8f1;
    border-radius: 5px;
    padding: 5px;
    color: #000;
}

.custom-div-two .custom-div-five .accordionToggle {
    font-size: 18px;
   background: #337ab7;
    border-color: #2e6da4;
    color: #fff;
    border-radius: 10px;
    padding: 5px 10px 5px 0;
   
}

.custom-div-two .custom-div-five .accordionToggle[aria-expanded="false"]:before,
.custom-div-two .custom-div-five .accordionToggle[aria-expanded="true"]:before {
    background: none;
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
    margin: 5px 5px 0 2px;
    text-align: center;
    line-height: 1.4;
}

.custom-div-two .custom-div-five .accordionContent,
.custom-div-two .custom-div-five .accordionContent p,
.custom-div-two .custom-div-five .accordionContent li {
    font-size: 18px;
}

/* Arrow Box on 12d */
.custom-div-two .well{
    position: relative;
    background: none;
    border: none;
    box-shadow: none;
    border-left: 5px solid #000;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 17px;
    overflow: visible;
}

.custom-div-two .well:before{
    position: absolute;
    font-family: "Font Awesome 5 Free"; 
    content: "\f106";
    font-weight: 900; 
    top: -7px;
    left: -13px;
    height: 25px;
    width: 30px;
    font-size: 35px;
    display: inline-block;
    
} 

.custom-div-two .well:after {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    content: "\f107";
    bottom: -7px;
    left: -13px;
    height: 25px;
    width: 30px;
    font-weight: 900;
    font-size: 35px;
    display: inline-block;
}

/* -------------------------------------------------------------------------
References
--------------------------------------------------------------------------*/
.references {
    border-top: 1px dotted #aaa;
    margin-top: 40px;
    padding-bottom: 20px;
    padding-left: 20px;
}
.references h2 {
    border-left: none;
    margin-left: -20px;
    padding: 15px 0px 10px 0px;
    color: #212121; 
    margin-top: 20px;
    margin-bottom: 10px; 
    font-variant: small-caps;
    font-weight: 700; 
    font-size: 30px;
}

.references>p {
    padding-left: 28px;
    text-indent: -28px;
    font-size: 12px;
    font-weight: 400;
    color: #444;
    line-height: 1.5em;
    padding-bottom: 10px;
    margin-bottom: 0;
    overflow-wrap: break-word;
    max-width: 100%;
}
/* -------------------------------------------------------------------------
PAGE-SPECIFIC Colouring
--------------------------------------------------------------------------*/
.page-1a .container>.row>.col-md-12,
.page-2a .container>.row>.col-md-12,
.page-3a .container>.row>.col-md-12,
.page-4a .container>.row>.col-md-12,
.page-5a .container>.row>.col-md-12,
.page-6a .container>.row>.col-md-12,
.page-7a .container>.row>.col-md-12,
.page-8a .container>.row>.col-md-12,
.page-9a .container>.row>.col-md-12,
.page-10a .container>.row>.col-md-12,
.page-11a .container>.row>.col-md-12,
.page-12a .container>.row>.col-md-12 {
    border-top: 30px solid #C01475;
    border-left: 3px solid #C01475;
    border-bottom: none;
}

.page-1b .container>.row>.col-md-12,
.page-2b .container>.row>.col-md-12,
.page-3b .container>.row>.col-md-12,
.page-4b .container>.row>.col-md-12,
.page-5b .container>.row>.col-md-12,
.page-6b .container>.row>.col-md-12,
.page-7b .container>.row>.col-md-12,
.page-8b .container>.row>.col-md-12,
.page-9b .container>.row>.col-md-12,
.page-10b .container>.row>.col-md-12,
.page-11b .container>.row>.col-md-12,
.page-12b .container>.row>.col-md-12 {
    border-top: 30px solid #E47227;
    border-left: 3px solid #E47227;
    border-bottom: none;
}

.page-1c .container>.row>.col-md-12,
.page-2c .container>.row>.col-md-12,
.page-3c .container>.row>.col-md-12,
.page-4c .container>.row>.col-md-12,
.page-5c .container>.row>.col-md-12,
.page-6c .container>.row>.col-md-12,
.page-7c .container>.row>.col-md-12,
.page-8c .container>.row>.col-md-12,
.page-9c .container>.row>.col-md-12,
.page-10c .container>.row>.col-md-12,
.page-11c .container>.row>.col-md-12,
.page-12c .container>.row>.col-md-12 {
    border-top: 30px solid #72A305;
    border-left: 3px solid #72A305;
    border-bottom: none;
}

.page-1d .container>.row>.col-md-12,
.page-2d .container>.row>.col-md-12,
.page-3d .container>.row>.col-md-12,
.page-4d .container>.row>.col-md-12,
.page-5d .container>.row>.col-md-12,
.page-6d .container>.row>.col-md-12,
.page-7d .container>.row>.col-md-12,
.page-8d .container>.row>.col-md-12,
.page-9d .container>.row>.col-md-12,
.page-10d .container>.row>.col-md-12,
.page-11d .container>.row>.col-md-12,
.page-12d .container>.row>.col-md-12 {
    border-top: 30px solid #1F8976;
    border-left: 3px solid #1F8976;
    border-bottom: none;
}

.page-1e .container>.row>.col-md-12,
.page-2e .container>.row>.col-md-12,
.page-3e .container>.row>.col-md-12,
.page-4e .container>.row>.col-md-12,
.page-5e .container>.row>.col-md-12,
.page-6e .container>.row>.col-md-12,
.page-7e .container>.row>.col-md-12,
.page-8e .container>.row>.col-md-12,
.page-9e .container>.row>.col-md-12,
.page-10e .container>.row>.col-md-12,
.page-11e .container>.row>.col-md-12,
.page-12e .container>.row>.col-md-12 {
    border-top: 30px solid #F4E031;
    border-left: 3px solid #F4E031;
    border-bottom: none;
}

.page-1f .container>.row>.col-md-12,
.page-2f .container>.row>.col-md-12,
.page-3f .container>.row>.col-md-12,
.page-4f .container>.row>.col-md-12,
.page-5f .container>.row>.col-md-12,
.page-6f .container>.row>.col-md-12,
.page-7f .container>.row>.col-md-12,
.page-8f .container>.row>.col-md-12,
.page-9f .container>.row>.col-md-12,
.page-10f .container>.row>.col-md-12,
.page-11f .container>.row>.col-md-12,
.page-12f .container>.row>.col-md-12 {
    border-top: 30px solid #784B86;
    border-left: 3px solid #784B86;
    border-bottom: none;
}

/* -------------------------------------------------------------------------
Study Skills pages
--------------------------------------------------------------------------*/

.page-metacognition .container>.row>.col-md-12,
.page-online-readiness .container>.row>.col-md-12,
.page-peer-feedback .container>.row>.col-md-12 {
    border-left: 1px solid #eee;
    position: relative;
    padding-top: 34px;
}

.page-metacognition .container>.row>.col-md-12:before,
.page-online-readiness .container>.row>.col-md-12:before,
.page-peer-feedback .container>.row>.col-md-12:before {
    border-top: 15px solid #000;
    background: linear-gradient(90deg, #fffaaa 25%, #ffea30 25% 50%, #fdd54f 50% 75%, #e4b429 75%);
    height: 35px;
    content: "";
    width: 100%;
    position: absolute;
    top: -1px;
    left: 0;
}


.page-metacognition h1,
.page-online-readiness h1,
.page-peer-feedback h1 {
    border-bottom: none;
    font-size: 45px;
    font-family: "Muli", sans-serif;
    font-weight: 700;
    padding-top: 55px;
    padding-bottom: 20px;
    text-transform: uppercase;
}

.page-metacognition h2,
.page-online-readiness h2,
.page-peer-feedback h2 {
    background-color: #ffd54f;
    padding: 5px;
    font-family: "Muli", sans-serif;
    display: inline-block;
    font-weight: 400;

}

.page-metacognition h3,
.page-online-readiness h3,
.page-peer-feedback h3 {
    font-family: "Muli", sans-serif;
    border-bottom: 2px dotted #ffd54f;
}

.page-metacognition hr,
.page-online-readiness hr,
.page-peer-feedback hr {
    border-top: 5px dotted #ffd54f;

}


.page-metacognition .references h2,
.page-online-readiness .references h2,
.page-peer-feedback .references h2 {
    background: none;
}

.course_anchorLink {
    position: relative;
}

.course_anchorLink:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f02e';    
    position: absolute;
    left: -25px;
    top: 0;
    color: #000;
}

.page-metacognition .custom-div-five,
.page-online-readiness .custom-div-five,
.page-peer-feedback .custom-div-five {
    background: #212121;
    color: #fff;
    margin: 20px -15px;
    padding: 5px 15px;
}


.page-metacognition .table th,
.page-online-readiness .table th,
.page-peer-feedback .table th {
    background: #212121;
    color: #fff;
}

.page-metacognition .panel,
.page-online-readiness .panel,
.page-peer-feedback .panel {
    background: #ffd54f;
    padding-left: 70px;
    position: relative;
    border: none;
    border-radius: 0;
}

.page-metacognition .panel:before,
.page-online-readiness .panel:before,
.page-peer-feedback .panel:before {
    background: url(../../media/images/study-skills/lightbulb.png) no-repeat;
    background-size: 70px;
    width: 70px;
    height: 100%;
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 50px;
}

.page-metacognition .dl-horizontal dt,
.page-online-readiness .dl-horizontal dt,
.page-peer-feedback .dl-horizontal dt {
    width: 200px;
    white-space: wrap;
}

.page-metacognition .dl-horizontal dd,
.page-online-readiness .dl-horizontal dd,
.page-peer-feedback .dl-horizontal dd {
    margin-left: 220px;
    display: block;
}

.page-metacognition .accordionToggle,
.page-online-readiness .accordionToggle,
.page-peer-feedback .accordionToggle {
    border-color: #ddd;
    background-color: #f5f5f5;
    font-size: 18px;
    display: block;
    padding: 5px;
    margin-top: 5px;
}

.page-metacognition .accordionToggle:before,
.page-online-readiness .accordionToggle:before,
.page-peer-feedback .accordionToggle:before {
    content: "";
    width: 0;
    height: 0;
    background: none;
}

.page-metacognition .accordionContent,
.page-online-readiness .accordionContent,
.page-peer-feedback .accordionContent {
    border: 1px solid #ddd;
    background-color: #fff;
    padding-left: 10px;
    padding-top: 10px;
    margin-bottom: 5px;
    margin-top: -7px;
    font-size: 18px !important;
}

.page-metacognition .accordionContent p,
.page-online-readiness .accordionContent p,
.page-peer-feedback .accordionContent p,
.page-metacognition .accordionContent li,
.page-online-readiness .accordionContent li,
.page-peer-feedback .accordionContent li {
    font-size: 18px;
}


.page-online-readiness .well>.row>.col-md-10>.row {
    margin-left: -100px;
}

.page-metacognition .well .saq-feedback,
.page-online-readiness .well .saq-feedback,
.page-peer-feedback .well .saq-feedback {
    background-color: #d9edf7;
    border-color: #bce8f1;
}


/* -------------------------------------------------------------------------
Smaller width fixes
--------------------------------------------------------------------------*/


@media screen and (max-width: 1000px) {
    #header+.container {
        padding-right: 15px;
    }
}