/***************************************************************************************************************************************************************************************/

/*HTML5 BOILERPLATE MINIFIED*/

/***************************************************************************************************************************************************************************************/

*{box-sizing:border-box;}article{display:block}aside{display:block}details{display:block}figcaption{display:block}figure{display:block;margin:0}footer{display:block}header{display:block}hgroup{display:block}nav{display:block}section{display:block}audio{display:inline;zoom:1}canvas{display:inline;zoom:1}video{display:inline;zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:sans-serif;color:#222}button{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;cursor:pointer;-webkit-appearance:button;overflow:visible;margin:0}input{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;margin:0}select{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;margin:0}textarea{font-family:sans-serif;color:#222;font-size:100%;overflow:auto;vertical-align:top;resize:vertical;margin:0}body{font-size:1em;line-height:1.4;margin:0}::-moz-selection{background:#333;color:#fff;text-shadow:none}::selection{background:#333;color:#fff;text-shadow:none}a{color:#00e}a:hover{color:#06e;outline:0}a:active{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}code{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}kbd{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}q{quotes:none}q:before{content:none}q:after{content:none}small{font-size:85%}sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline;bottom:-.25em}sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;top:-.5em}ul{margin:1em 0;padding:0 0 0 40px}ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul{list-style:none;list-style-image:none;margin:0;padding:0}nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;white-space:normal;padding:0}input[type="button"]{cursor:pointer;-webkit-appearance:button;overflow:visible}input[type="reset"]{cursor:pointer;-webkit-appearance:button;overflow:visible}input[type="submit"]{cursor:pointer;-webkit-appearance:button;overflow:visible}button[disabled]{cursor:default}input[disabled]{cursor:default}input[type="checkbox"]{box-sizing:border-box;width:13px;height:13px;padding:0}input[type="radio"]{box-sizing:border-box;width:13px;height:13px;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner{border:0;padding:0}input::-moz-focus-inner{border:0;padding:0}input:invalid{background-color:#f0dddd}textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}.chromeframe{background:#ccc;color:#000;margin:.2em 0;padding:.2em 0}

/***************************************************************************************************************************************************************************************/

/*BODY STYLES*/

/***************************************************************************************************************************************************************************************/

html {
    font-size: 100%;
}

body {
    background: #F5F5F5;
    color: #3D3C3C;
    font: 1rem 'roboto', Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.noscroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

a {
    color: #263D83;
    text-decoration: none;
    transition: all .25s ease;
}

a:hover {
    color: #3D3C3C;
}

input[type=submit],
button {
    border-radius: 0;
    transition: all .25s ease;
}

img,
svg {
    height: 100%;
    max-height: 600px;
    max-width: 100%;
}

iframe {
    height: 100%;
    min-height: 600px;
    max-height: 600px;
    width: 100%;
    min-width: 1026px;
    max-width: 1026px;
}

h1,
h2,
h3,
h4 {
    color: #263D83;
    font: 600 2.75rem 'omnes-pro',Arial, Helvetica, sans-serif; /*44*/
    margin: 0 0 28px;
}

.hero-text {
    color: #263D83;
    font: 600 1.2rem 'omnes-pro',Arial, Helvetica, sans-serif;
    margin: 0 0 28px;
}

.spacer {
    min-width: 2px;
    min-height: 100%;
    background: rgb(244,244,244);
    margin: 0 20px;
}

.pointer {
    cursor: pointer;
}

h2,
.lesson.callout span {
    font-size: 1.75rem; /*28*/
    line-height: 1.25; /*35*/
    margin-bottom: 12px;
}
h1.alt,
h2.alt {
    color: #fff;
    font-size: 2.375rem; /*38*/
}

h3 {
    font-size: 1.5rem; /*24*/
    margin-bottom: 36px;
}

h4,
.lessons-list .lesson h2 {
    font-size: 1.75rem; /*28*/
    font-weight: 600;
    margin: 0 0 14px;
}

p,
ul,
ol {
    line-height: 1.1875; /*19*/
    margin: 0 0 24px;
}

header,
section,
footer,
article {
    width: 100%;
}

.container {
    clear: both;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    width: 100%;
}

.container.fixed {
    max-width: 1155px; /*1095*/
}

.container.large {
    max-width: 1238px; /*1178*/
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.accessibility {
    backface-visibility: hidden;
    left: -999999999px;
    position: absolute;
}

/*Buttons*/

.btn {
    background: #263D83;
    border: 1px solid #263D83;
    color: #fff;
    display: inline-block;
    font: 600 1.1rem 'omnes-pro',Arial, Helvetica, sans-serif; /*22*/
    padding: 14px 30px;
    text-align: center;
}

.btn:hover {
    background: #fff;
    color: #263D83;
}

.btn.disabled{
    background: rgba(38,61,131, 0.5);
    color: rgba(255, 255, 255, 0.79);
    border: 1px solid rgba(38,61,131, 0.5);
    cursor: not-allowed;
    pointer-events: none;
}

.btn.loading {
    background: #fff;
    border: 1px solid #263D83;
    color: #263D83;
    display: inline-block;
    font: 600 1.375rem 'omnes-pro',Arial, Helvetica, sans-serif; /*22*/
    padding: 14px 30px;
    text-align: center;
}

.btn.blue-outline {
    background: none;
    border-width: 2px;
    color: #263D83;
}

.btn.blue-outline:hover {
    background: #263D83;
    color: #fff;
}

.btn.green {
    background: #99CC33;
    border-color: #99CC33;
}

.btn.green:hover {
    background: #fff;
    color: #99CC33;
}

.btn.light-blue {
    background: #007AA6;
    border-color: #007AA6;
}

.btn.light-blue:hover {
    background: #fff;
    color: #007AA6;
}

.btn.pink {
    background: #C30275;
    border-color: #C30275;
}

.btn.pink:hover {
    background: #fff;
    color: #C30275;
}

.btn.white-pink {
    color: #C30275;
    background: white;
    border-color: #C30275;
}
.btn.white-pink:hover {
    background: #C30275;
    border-color: #C30275;
    color: white;
}

.btn.gray {
    background: rgba(61,60,60,.3);
    border-color: transparent;
    color: #3D3C3C;
}

.btn.gray:hover {
    background: #fff;
    border-color: rgba(61,60,60,.3);
}

.btn.locked {
    background: #fff;
    border-color: rgba(61,60,60,.3);
    color: #3D3C3C;
}

.btn.locked:hover {
    background: #fff;
    border-color: rgba(61,60,60,.3);
    color: #3D3C3C;
}

.btn.white {
    background: white;
    border-color: white;
    color: #007AA6;
}

.btn.white:hover {
    background: #007AA6;
    border-color: white;
    color: white;
}

.btn.pdf {
    background: none;
    color: #263D83;
    font-size: 1rem;
    padding: 6px 45px;
    position: relative;
    text-align: left;
}

.btn.pdf:before,
.btn.pdf:after {
    content: '';
    display: none;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.btn.pdf:before {
    content: '\f1c1';
    font-weight: 400;
}

.btn.pdf:after {
    content: '\f381';
}

.btn.pdf svg {
    font-size: 1.125rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.btn.pdf .fa-file-pdf {
    left: 10px;
}

.btn.pdf .fa-cloud-download-alt {
    right: 10px;
}

.btn.pdf:hover {
    background: #263D83;
    color: #fff;
}

.btn.small {
    font-size: 1rem;
    padding: 8px 40px;
}

.btn-navigation {
    border: none;
    background: transparent;
    border-bottom: 5px solid transparent;
    color: #3D3C3C;
    display: block;
    font: 500 .9375rem 'omnes-pro',Arial, Helvetica, sans-serif;
    font-weight: 500;
    padding: 15px 0 11px;
    cursor: pointer;
}
.yellow-btn {
    background-color: #F8C710;
    border: none;
    color: #3D3C3C;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-weight: 600;
    padding: 12px 30px 11px;
    border-radius: 15px;
    box-shadow: 0 5px 15px 0 rgb(35 31 32 / 20%);
}
.yellow-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.white-btn {
    height: 55px;
    padding: 14px 40px 13px 23px;
    border-radius: 17px;
    box-shadow: 0 15px 30px 0 rgb(35 31 32 / 10%);
    border: solid 1px #bebebe;
    cursor: pointer;
    text-align: center;
    position: relative;
}
.white-btn-google {
    height: 55px;
    padding: 14px 40px 13px 23px;
    border-radius: 17px;
    box-shadow: 0 15px 30px 0 rgb(35 31 32 / 10%);
    border: solid 1px #bebebe;
    cursor: pointer;
    text-align: center;
    position: relative;
}
.white-btn-clever {
    height: 55px;
    padding: 14px 40px 13px 23px;
    border-radius: 17px;
    box-shadow: 0 15px 30px 0 rgb(35 31 32 / 10%);
    border: solid 1px #bebebe;
    cursor: pointer;
    text-align: center;
    position: relative;
}
.white-btn .icon {
    display: inline-block;
    position: absolute;
    left: 25px;
}
.white-btn .button-text {
    display: inline-block;
    padding-left: 25px;
}
.white-btn .button-text span {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #757575;
}
.white-btn-google .icon {
    display: inline-block;
    position: absolute;
    left: 25px;
}
.white-btn-google .button-text {
    display: inline-block;
    padding-left: 25px;
}
.white-btn-google .button-text span {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #757575;
}
.white-btn-clever .icon {
    display: inline-block;
    position: absolute;
    left: 25px;
}
.white-btn-clever .button-text {
    display: inline-block;
    padding-left: 25px;
}
.white-btn-clever .button-text span {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #757575;
}

.btn.onboarding {
    position: fixed;
    bottom: 20px;
    right: 98px;
    background-color: #0271b2;
    width: 176px;
    height: 59px;
    padding: 15px 27px 16px 23.5px;
    border-radius: 29.5px;
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 50%);
    color: #fff;
    border: none;
    font-size: 16px;
    z-index: 1000;
}

.btn.onboarding svg {
    margin-right: 10px;
}

/*Checkboxes*/

input[type=checkbox].yellow-checkbox {
    appearance: none;
    width: 1.25em;
    height: 1.25em;
    border: 0.15em solid #3d3c3c;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    background-color: #fff;
    margin-right: 10px;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
}
input[type=checkbox].yellow-checkbox::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #f8c710;
}
input[type=checkbox].yellow-checkbox:checked::before {
    transform: scale(1);
}

/*Tooltips*/

.tooltip {
    display: inline-block;
    font-size: 1rem;
    margin-left: 10px;
    position: relative;
    vertical-align: middle;
}

.tooltip span {
    background: #FFFFFF;
    border-radius: 20px;
    bottom: calc(100% + 20px);
    box-shadow: 0 10px 20px rgba(0,0,0,.2);
    color: #3D3C3C;
    display: none;
    font-size: .875rem; /*14*/
    font-weight: bold;
    left: -90px;
    line-height: 1.35; /*19*/
    padding: 20px 20px 25px;
    position: absolute;
    text-align: center;
    text-transform: none;
    width: 285px;
    z-index: 10;
}

.tooltip:hover span {
    display: block;
}

.tooltip span:after {
    border: solid transparent;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 12px;
    content: '';
    left: 86px;
    height: 0;
    position: absolute;
    pointer-events: none;
    top: 100%;
    width: 0;
}

.tooltip.dark svg {
    color: #A2BFB9;
}

.tooltip.dark.performance-data {
    opacity: 1 !important;
    margin-left: 0;
}

.tooltip.dark.performance-data span {
    font-size: .8125rem;
    opacity: 1 !important;
    padding: 18px;
    width: 336px;
    bottom: calc(100% + 30px);
}

.tooltip.dark.performance-data span .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(151,151,151,.5);
}

.tooltip.dark.performance-data span .row:last-of-type {
    border-bottom: none;
}

.tooltip.dark.performance-data span .row .column {
    padding: 10px;
}
.tooltip.dark.performance-data span .row .column .date {
    display: inline;
    text-transform: uppercase;
}

.tooltip.dark.performance-data span .row .column .time {
    display: inline;
    /* margin-left: 7px; */
    opacity: .5;
}

.tooltip.dark.performance-data span .row .column.in-progress {
    padding-left: 23px;
}

.tooltip.dark.performance-data span .row .column.in-progress > div{
    font-style: italic;
}

.tooltip.dark.performance-data span .row .column.in-progress > div svg{
   color: #99cc33;
   font-size: 1.3rem;
}

.tooltip.dark.performance-data span .row .column .score {
    display: inline;
}

.tooltip.dark.performance-data span .row .column .score .grade {
    margin-right: 5px;
}

.tooltip.dark.performance-data span .row .column .score .answered-count {
    display: inline;
    font-weight: bold;
}

.tooltip.dark.performance-data span .row .column .score .total-count {
    display: inline;
    opacity: .5;
}

.tooltip.dark.performance-data .row .column .percentage {
    display: inline;
    opacity: .5;
    font-style: italic;
    margin-left: 18px;
}

.tooltip.dark.performance-data span .row .column:first-of-type {
    padding-left: 12px;
    padding-right: 0;
    display: grid;
    grid-template-columns: 92px 57px;
    text-align: left;
}

.tooltip.dark.performance-data span .row .column:last-of-type:not(.in-progress) {
    /* padding-right: 12px;
    padding-left: 30px; */
    display: grid;
    grid-template-columns: 59px 45px;
    text-align: left;
    padding-left: 23px;
}

.tooltip.dark.performance-data.show span {
    display: block;
    margin-left: 14px;
}

.tooltip.bottom span {
    box-shadow: 1px -2px 20px 1px rgb(0 0 0 / 14%);
    width: 365px;
    text-align: left;
    font-weight: 500;
}
.tooltip.bottom span::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    top: unset;
}

/*Global Forms*/

.standard-fields label,
fieldset legend {
    display: block;
    font-weight: bold;
    margin: 0 0 12px;
    text-align: left;
    width: 100%;
}

.standard-fields label span,
fieldset legend span {
    display: block;
    font-style: italic;
    font-weight: 400;
}

.standard-fields input[type=email],
.standard-fields input[type=username],
.standard-fields input[type=text],
.standard-fields input[type=password],
.standard-fields input[type=number],
.standard-fields select {
    border: 1px solid #979797;
    font-family: inherit;
    height: 45px;
    margin-bottom: 32px;
    padding: 0 20px;
    text-align: left;
    width: 100%;
}

.standard-fields input[type=email]:focus,
.standard-fields input[type=text]:focus,
.standard-fields input[type=password]:focus,
.standard-fields input[type=number]:focus,
.standard-fields textarea:focus,
.standard-fields select:focus {
    border-color: #263D83;
    outline: none;
}

.standard-fields input[type=number]::-webkit-outer-spin-button,
.standard-fields input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.standard-fields select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('svgs/arrow-select.svg') no-repeat calc(100% - 18px) center #fff;
}

.standard-fields textarea {
    border: 1px solid rgb(151, 151, 151);
    font-family: inherit;
    height: 135px;
    margin-bottom: 32px;
    padding: 20px;
    text-align: left;
    width: 100%;
    margin-top: 0px;
}

.standard-fields button.quest-image-upload {
    width: auto;
    margin-right: 15px;
}

.options {
    justify-content: flex-start;
    margin: 18px 0 14px;
    padding: 0;
}

.options li {
    list-style: none;
}

.options li label {
    font-size: .875rem; /*14*/
    font-weight: normal;
}

.options label span {
    border: 2px solid #3D3C3C;
    border-radius: 4px;
    display: inline-block;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    width: 20px;
}

.options label input:checked + span {
    background: url('svgs/icon-check-dark.svg') no-repeat center;
}

.options.site-design label {
    background: url('svgs/toggle-off.svg') no-repeat center;
}

.options.site-design.active label {
    background: url('svgs/toggle-on.svg') no-repeat center;
}

.error-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #c62828;
    font-size: 14px;
    color: #fff;
    padding: 10px;
    width: 100%;
}

.error-banner-with-spacing {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #c62828;
    font-size: 14px;
    color: #fff;
    padding: 10px;
    width: 100%;
    margin-bottom: 2vh;
}

.activity-dot {
    color: gray;
}

.activity-dot {
    width: 0.5rem !important;
}

.activity-dot.active {
    color: green;
}

/***************************************************************************************************************************************************************************************/

/*HEADER STYLES*/

/***************************************************************************************************************************************************************************************/

header {
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(47,57,77,0.12);
    position: relative;
}

header .flex-container {
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

header .logo {
    margin-right: 59px;
}

header nav {
    width: 100%;
}

header li {
    margin-right: 30px;
}

header li.disabled,
header li a.disabled {
    opacity: 0.4;
    pointer-events: none;
}

header li a {
    border-bottom: 5px solid transparent;
    color: #3D3C3C;
    display: block;
    font: 500 .9375rem 'omnes-pro',Arial, Helvetica, sans-serif; /*15*/
    font-weight: 500;
    padding: 15px 0 11px;
}

header li a:hover {
    border-color: #99CC33;
}

header li.active a {
    border-color: #99CC33;
    font-weight: bold;
}

/*Icons*/

header li:nth-of-type(6) {
    margin: 0 0 0 auto;
}

header li:nth-of-type(1n+7) {
    margin: 0 0 0 36px;
}

header li .settings-notification a,
header .mobile-link {
    border: none;
    color: #A2BFB9;
    font-size: 1.375rem; /*22*/
    padding: 0;
}

header li:nth-of-type(1n+5) a:hover {
    color: #99CC33;
}

/***Mobile Menu***/

header .mobile-menu,
header .mobile-link {
    display: none;
}

/***************************************************************************************************************************************************************************************/

/*FOOTER STYLES*/

/***************************************************************************************************************************************************************************************/

footer {
    padding: 62px 0;
    text-align: center;
}

footer p,
footer ul,
footer li {
    display: inline-block;
    font-size: .875rem; /*14*/
    letter-spacing: .23px;
    margin: 0;
    padding: 0;
}

footer li {
    margin-left: 15px;
}

footer li a {
    color: #3D3C3C;
    text-decoration: underline;
}

footer li a:hover {
    text-decoration: none;
}

/***************************************************************************************************************************************************************************************/

/*SERIES ARCHIVE STYLES*/

/***************************************************************************************************************************************************************************************/

/***Explore Bar***/

.section-nav {
    background: #fff;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.10);
    padding-top: 34px;
    text-align: center;
}

.section-nav li {
    display: inline-block;
    margin: 0 30px;
}

.section-nav a {
    border-bottom: 5px solid transparent;
    color: #3D3C3C;
    display: block;
    font: 600 1.25rem 'omnes-pro',Arial, Helvetica, sans-serif; /*20*/
    padding-bottom: 30px;
}

.section-nav a span {
    font-weight: 400;
}

.section-nav a:hover,
.section-nav .active a {
    border-bottom-color: #99CC33;
}

/***Intro Content***/

.series-listing > article {
    background: url('img/dog.png') no-repeat 25px bottom;
    background-size: 123px auto;
    padding: 40px 30px 30px 190px;
}

.series-listing > article h1 {
    color: #3D3C3C;
    font-size: 1.75rem; /*28*/
    margin-bottom: 10px;
}

.series-listing > article p {
    font-size: 1.125rem;
    line-height: 1.33; /*24*/
    margin: 0;
    max-width: 827px;
}

.series-listing > article a {
    color: #99CC33;
    text-decoration: underline;
}

.series-listing > article a:hover {
    text-decoration: none;
}

/***Series Listings***/

.series-listing li {
    list-style: none;
}

.series-listing .series,
.page-hero {
    background: no-repeat center;
    background-size: cover;
    border: 4px solid black;
    margin-top: 40px;
    min-height: 430px;
    position: relative;
}

.cp-partner {
    background: #263d83;
    padding: 7px 10px 8px;
    color: white;
    position: absolute;
    width: 275px;
    top: 0;
    right: 0;
    font-family: 'omnes-pro';
    font-weight: 600;
    border-bottom-left-radius: 15px;
    font-size: 16px;
}

.mm-partner {
    background: #263d83;
    padding: 7px 10px 8px;
    color: white;
    position: absolute;
    width: 275px;
    top: 0;
    right: 0;
    font-family: 'omnes-pro';
    font-weight: 600;
    border-bottom-left-radius: 15px;
    font-size: 16px;
}

.series-listing .series:first-child {
    margin-top: 0;
}

.series-listing .series-storm,
.page-hero.series-storm {
    background-image: url('img/bkg-storm.png');
    border-color: #6AA891;
}

.series-listing .series-vital,
.page-hero.series-vital {
    background-image: url('img/bkg-vital.png');
    border-color: #2EA1D2;
}

.series-listing .series-crisis,
.page-hero.series-crisis {
    background-image: url('img/bkg-crisis.png');
    border-color: #EF443C;
}

.series-listing .series-pharm,
.page-hero.series-pharm {
    background-image: url('img/bkg-pharm.png');
    border-color: #FFCE00;
}

.series-listing .series:before,
.page-hero:before {
    background-image: linear-gradient(90deg, rgba(0,0,0,0.00) 0%, #3D3C3C 26%);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 100%;
}

.series-listing .series a {
    color: #fff;
    display: flex;
    height: 100%;
    padding: 60px 6.49%;
    position: relative;
    width: 100%;
}

.series-listing li article,
.page-hero article {
    color: #fff;
    margin: auto 0 0 auto;
    max-width: 716px;
}

.series-listing li article h2,
.page-hero h2 {
    margin-bottom: 30px;
}

.series-listing li article ul,
.page-hero ul {
    margin: 0;
    padding: 0;
}

.series-listing li article li,
.page-hero li {
    display: inline-block;
}

.series-listing .stats,
.series-listing .stars {
    height: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: all .25s ease;
}

.series-listing .series:hover .stats,
.series-listing .series:hover .stars {
    height: auto;
    margin-bottom: 19px;
    opacity: 1;
    visibility: visible;
}

.series-listing .stats li {
    font-size: 1.125rem; /*18*/
    font-weight: 900;
}

.series-listing .stats li:not(:last-child):after {
    background: #fff;
    border-radius: 100%;
    content: '';
    display: inline-block;
    height: 3px;
    margin: 0 8px 0 10px;
    vertical-align: middle;
    width: 3px;
}

.series-listing li article p,
.page-hero p {
    margin: 0 0 15px;
}

.series-listing .stars li,
.page-hero .stars li {
    font-size: .875rem;
    margin-right: 5px;
}

.series-listing .stars a,
.page-hero .stars a {
    color: #4DBDE5;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.series-listing .stars a:hover,
.page-hero .stars a:hover {
    text-decoration: none;
}

.series-listing .fa-angle-right {
    color: #fff;
    font-size: 44px;
    opacity: 0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .25s ease;
}

.series-listing .series:hover .fa-angle-right {
    opacity: 1;
}

/***************************************************************************************************************************************************************************************/

/*OBJECTIVES ARCHIVE STYLES*/

/***************************************************************************************************************************************************************************************/

.browse-objectives {
    flex-wrap: nowrap;
}

/***Filter Bar***/

.mobile-filter {
    display: none;
}

aside {
    background: #007AA6;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.10);
    color: #fff;
    flex-shrink: 0;
    padding: 45px 34px;
    width: 300px;
}

aside h3 {
    color: #fff;
    font-size: .875rem; /*14*/
    letter-spacing: .44px;
    margin-bottom: 14px;
    text-transform: uppercase;
}

aside ul {
    border-bottom: 1px solid rgba(255,255,255,.4);
    margin: 0 0 12px;
    padding: 0 0 24px;
}

aside ul:last-of-type {
    border: none;
    margin: 0;
    padding: 0;
}

aside li {
    font-size: .875rem; /*14*/
    font-weight: 600;
    letter-spacing: .44px;
    list-style: none;
    margin-bottom: 12px;
}

aside label input {
    left: -99999px;
    opacity: 0;
    position: absolute;
    visibility: hidden;
}

aside label span {
    border: 2px solid #fff;
    border-radius: 4px;
    display: inline-block;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    width: 20px;
}

aside label input:checked + span {
    background: url('svgs/icon-check-dark.svg') no-repeat center;
}

.apply-filters {
    display: none;
    margin-top: 30px;
}

/***Results***/

.results {
    justify-content: flex-start;
    margin: 0;
    /* padding: 0 6.125% 0; */
    padding: 22px 20px;
    width: 100%;
}

.results li {
    /* background: #FFFFFF; */
    /* box-shadow: 0 10px 20px 0 rgba(0,0,0,0.10); */
    list-style: none;
    /* margin: 0 1.73% 20px 0; */
    margin: 0 auto;
    min-height: 465px;
    /* width: 32.18%; */
    min-width: 76%;
    position: relative;
}

/* .results li:nth-of-type(3n) {
    margin-right: 0;
} */

.results li .fa-arrow-circle-right {
    position: absolute;
    bottom: 18px;
    right: 19px;
}

.results .image {
    position: relative;
}

.results .image img {
    width: 100%;
}

.results .logo {
    bottom: 20px;
    left: 20px;
    position: absolute;
    width: 78px!important;
    height: auto;
}

.results article {
    padding: 20px 20px 30px 20px;
}

.results h2 {
    font-size: 1.5rem; /*24*/
    margin-bottom: 8px;
}

.results h2 span {
    display: block;
    font-size: 1rem;
    margin-bottom: 8px;
}

.results p {
    color: #3D3C3C;
}

/***************************************************************************************************************************************************************************************/

/*SERIES - GAMES STYLES*/

/***************************************************************************************************************************************************************************************/

/***Page Hero***/

.page-hero {
    border: none;
    margin: 0;
    min-height: 398px;
    padding: 48px 0 53px;
}

.page-hero .back-link {
    color: #fff;
    font: 600 1.375rem 'omnes-pro',Arial, Helvetica, sans-serif; /*22*/
    left: 38px;
    letter-spacing: .69px;
    position: absolute;
    top: 26px;
}

.page-hero .back-link svg {
    display: inline-block;
    font-size: 1.5rem;
    left: 0;
    margin-right: 10px;
    position: relative;
    transition: all .25s ease;
    vertical-align: middle;
}

.page-hero .back-link:hover svg {
    left: -10px;
}

.page-hero .container {
    max-width: 1244px; /*1184*/
}

.page-hero .pdfs {
    margin: 34px 0 0;
}

.page-hero .pdfs li {
    margin-right: 35px;
}

.page-hero .pdfs a {
    color: #fff;
    font-weight: 600;
}

.page-hero .pdfs a:hover {
    color: #4DBDE5;
}

.page-hero .pdfs svg {
    font-size: 1.125rem; /*18*/
    margin-right: 12px;
}

/***Course Nav***/

.course-nav {
    background: #fff;
}

.course-nav .flex-container {
    align-items: center;
}

.course-nav ul {
    margin: 0 auto;
    padding: 0;
}

.course-nav li {
    display: inline-block;
    list-style: none;
    margin: 0 14px;
}

.course-nav a {
    border-bottom: 5px solid transparent;
    color: #3D3C3C;
    display: block;
    font-size: 1.25rem; /*20*/
    font-weight: 600;
    padding: 27px 38px 24px;
}

.course-nav li.active a {
    border-bottom-color: #99CC33;
}

.course-nav a:hover {
    color: #007AA6;
}

/***Mini Nav***/
.mini-nav {
	background: #3D3C3C;
}

.mini-nav .flex-container {
	align-items: center;
	justify-content: flex-start;
}

.mini-nav h2 {
	color: white;
	font-size: 1rem;
	font-weight: 300;
	margin: 0 57px 0 0;
}

.mini-nav h2 .tooltip {
	margin-left: 10px;
}

.mini-nav ul {
	margin: 0;
	padding: 0;
}

.mini-nav li {
	list-style: none;
	margin-right: 37px;
}

.mini-nav li a {
	border-bottom: 5px solid transparent;
	color: white;
	display: block;
	font-weight: 600;
	padding: 24px 0 20px;
}

.mini-nav li a.active {
	border-bottom-color: #99CC33;
}

.mini-nav li a:not(.active):hover {
	color: #007AA6;
}

.mini-nav li.active a{
	border-bottom-color: #99CC33;
}

.mini-nav li a:not(.active):hover {
	color: #007AA6;
}

/***Game Listings***/

.games-listings {
    flex-wrap: nowrap;
}

.game-info {
    width: 100%;
}

.game-info .container,
section.lessons-list .container {
    max-width: 1155px; /*1095*/
}

/*Units Sidebar*/

.games-listings aside {
    padding: 45px 0;
}

.games-listings aside h3 {
    margin-bottom: 8px;
    padding: 0 34px;
}

.games-listings aside ul {
    border-bottom: 1px solid rgba(255,255,255,.4);
    margin: 0 0 35px;
    padding: 0 0 22px;
}

.games-listings aside ul:last-child {
    border: none;
}

.games-listings aside li {
    margin: 0;
}

.games-listings aside a {
    color: #fff;
    display: block;
    font-size: 1.125rem; /*18*/
    font-weight: 600;
    letter-spacing: .56px;
    padding: 8px 34px;
}

.games-listings aside a:hover,
.games-listings aside li.active a {
    background: #263D83;
}

/*Game Intro*/

.game-intro {
    background: #263D83;
    color: #fff;
    padding: 40px 0 55px;
    position: relative;
}
.game-intro .mobile {
    display: none;
}

.game-intro:after {
    border-style: solid;
    border-width: 38px 44.5px 0 44.5px;
    border-color: #263D83 transparent transparent;
    content: '';
    height: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    top: calc(100% - 12px);
    width: 0;
}

.game-intro article {
    width: 54.15%; /*593 / 1095*/
}

.game-intro h1 {
    margin-bottom: 12px;
}

.game-intro p {
    font-size: 1.125rem; /*18*/
    line-height: 1.166; /*21*/
}

.game-intro .btn {
    margin-right: 32px;
    width: 30%;
}

.game-intro .longbtn {
    width: 46%;
}

.game-intro .btn.no-right-margin{
    margin-right: 0;
}

.game-intro a.alt {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}

.game-intro a.alt:hover {
    opacity: .6;
}

.game-intro img {
    align-self: flex-start;
    width: 33.78%; /*370*/
}

/*Supplementary Lessons*/

.lessons-list {
    padding: 60px 0 75px;
}

.lessons-list h2 {
    font-size: 1.5rem; /*24*/
    margin-bottom: 36px;
}

.lessons-list .flex-container {
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}

.lesson {
    background: #FFF;
    border-top: 6px solid #263D83;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0 1.62% 20px 0; /*20*/
    min-height: 380px;
    padding: 20px;
    width: 32.23%; /*353*/
}

.lesson:nth-of-type(3n+3) {
    margin-right: 0;
}

.lesson .time {
    display: block;
    font-size: .8125rem; /*13*/
    font-weight: 500;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.lesson .time svg {
    font-size: .875rem; /*14*/
    margin-right: 5px;
}

.lesson img {
    flex-shrink: 0;
    margin-bottom: 22px;
    width: 100%;
    height: auto;
}

.lesson ul {
    margin: 0 0 20px;
    padding: 0;
}

.lesson li,
.project-details .stats li {
    font-size: .875rem; /*14*/
    line-height: 1.14; /*16*/
    list-style: none;
    margin-bottom: 20px;
    padding-left: 36px;
    position: relative;
}

.lesson li svg,
.project-details .stats svg {
    color: #263D83;
    font-size: 1.3125rem; /*21*/
    left: 0;
    position: absolute;
    top: 2px;
}

.lesson .btn {
    margin-top: auto;
    width: 100%;
}

.lesson .btn + .btn {
    margin-top: 12px;
}

.lesson.callout {
    background: url('img/dog.png') no-repeat 14px calc(100% + 39px) #C30275;
    background-size: 136px auto;
    border: none;
    padding: 40px 30px;
}

.lesson.callout span {
    color: white;
    display: block;
    font-weight: 500;
    margin-bottom: 12px;
}

.lesson.callout em {
    display: block;
}

.lesson.callout .btn {
    margin: 0;
}

/*Learning Objectives*/

.objectives {
    background: #fff;
    padding: 60px 0 40px;
}

.objectives table {
    width: 100%;
}

.objectives th,
.objectives td {
    border-top: 1px solid rgba(151,151,151,.2);
    padding: 12px 0;
}

.objectives th {
    padding-right: 76px;
    text-align: left;
}

.objectives td {
    padding-right: 30px;
}

/***************************************************************************************************************************************************************************************/

/*SERIES - INTRO LESSONS STYLES*/

/***************************************************************************************************************************************************************************************/

section.lessons-list {
    padding: 70px 0 0;
}

.lesson.alt {
    border-top-color: #4DBDE5;
    padding-top: 30px;
}

.lesson.alt h2 {
    margin-bottom: 20px;
}

/***************************************************************************************************************************************************************************************/

/*SERIES - PROJECTS ARCHIVE STYLES*/

/***************************************************************************************************************************************************************************************/

section.projects {
    padding-top: 40px;
}

.lessons-list.projects .flex-container {
    justify-content: space-between;
}

/***Project***/

.projects .project {
    margin-right: 0;
    width: 49.3%;
}

.projects .project .time svg,
.projects .featured .time svg {
    font-size: 22px;
    margin-right: 8px;
    vertical-align: middle;
}

.projects .project img {
    margin-bottom: 11px;
}

/***Featured Project***/

.projects .featured {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 32px;
    min-height: 0;
    padding: 30px;
    width: 100%;
}

.projects .featured article {
    width: 55.87%; /*580 / 1038*/
}

.projects .featured img {
    margin: 0;
    width: 40.46%; /*420*/
}

.projects .featured p {
    margin-bottom: 33px;
}

.projects .featured .btn {
    max-width: 293px;
}

/***************************************************************************************************************************************************************************************/

/*SERIES - PROJECTS SINGLE STYLES*/

/***************************************************************************************************************************************************************************************/

.project-details {
    padding: 50px 0;
}

.project-details .back-link {
    display: inline-block;
    font-size: 1.375rem; /*22*/
    font-weight: 600;
    margin-bottom: 24px;
}

.project-details .back-link svg {
    font-size: 1.5rem; /*12*/
    margin-right: 10px;
    vertical-align: middle;

}

.project-details .btns {
    margin: 0 0 20px;
    padding: 0;
}

.project-details .btns li {
    display: inline-block;
    list-style: none;
    margin: 0 18px 10px 0;
}

/***Overview***/

.project-details .details {
    background: #fff;
    padding: 32px 35px;
}

.project-details article {
    width: 56.42%; /*584 / 1035*/
}

.project-details h2 {
    font-size: 1.125rem; /*18*/
    margin-bottom: 15px;
}

/***Stats***/

.project-details .stats {
    margin: 0;
    padding: 0;
    width: 36.03%; /*373*/
}

.project-details .stats li {
    font-size: 1rem;
    line-height: 1.1875; /*19*/
    margin-bottom: 16px;
}

/***Sessions***/

.session-list {
    background: #263D83;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    color: #fff;
    justify-content: flex-start;
    margin: 0;
    padding: 48px 40px;
}

.session-list li {
    list-style: none;
    margin: 0 1.72% 36px 0;
    padding-left: 37px;
    position: relative;
    width: 23.71%; /*239 / 1008*/
}

.session-list li:nth-of-type(4n+4) {
    margin-right: 0;
}

.session-list li:before {
    background: url('svgs/icon-check.svg') no-repeat center;
    background-size: 100% auto;
    content: '';
    height: 23px;
    left: 0;
    position: absolute;
    top: 4px;
    width: 24px;
}

.session-list li svg {
    font-size: 1.3125rem; /*21*/
    left: 0;
    position: absolute;
    top: 4px;
}
/***************************************************************************************************************************************************************************************/

/*LOGIN/REGISTER PAGE STYLES*/

/***************************************************************************************************************************************************************************************/

.login {
    align-items: center;
    background: #007AA6;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-height: 100vh;
}

.login.register {
    background: #263D83;
}

.login.register.a-plus-account,
.login.register.invite-page {
    background: url('img/vs/loc_conference.jpg') no-repeat center center fixed;
    background-size: cover;
    box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
}

.login #main {
    margin: auto;
}

/***Footer***/

.login footer {
    align-self: flex-end;
}

.login footer,
.login footer li a {
    color: #D8D8D8;
}

.register footer {
    background-color: #263D83 ;
}

.register footer div.container p,
.register footer div.container ul li a {
  color: #D8D8D8;
}

.a-plus-account footer,
.invite-page footer {
    background: none;
}

/***Login Form***/

.login-form {
    background: #F5F5F5;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.10);
    max-width: 1100px;
}

.login-form h1 {
    background: #FFFFFF;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.10);
    margin: 0;
    padding: 37px 20px 39px;
    text-align: center;
    width: 100%;
}

.login-form h1 img {
    width: 166px;
}

.login-form > img {
    object-fit: cover;
    width: 49.09%; /*540*/
}

.login-form form {
    padding: 90px 6.72% 115px 4.9%;
    width: 50.9%; /*560*/
}

.login-form input[type=submit] {
    margin-top: 10px;
    width: 100%;
}

.login-form .account-type-info,
.login-form .welcome-back {
    width: 49.09%;
    padding: 38px;
    margin: auto;
    margin-top: 55px;
    margin-right: 0px;
    padding-left: 60px;
}

.login-form .account-type-info h1,
.login-form .welcome-back h1 {
    font-size: 34px;
    box-shadow: none;
    background: none;
    text-align: left;
    padding-bottom: 25px;
}

.login-form .account-type-info p,
.login-form .welcome-back p {
    font-size: 20px;
    margin: 0;
    padding: 0 20px 20px;
}

.login-form .register-form {
    padding: 51px;
    padding-bottom: 10px;
}

.login-form .account-type-row {
    margin: 8px 0 36px 0;
}

.login-form .account-type-row span {
    font-weight: 500;
    color: #3d3c3c;
}

.login-form .account-type-row .toggle {
    margin-left: 16px;
    display: inline-block;
}

@media (max-width: 550px) {
    .login-form .account-type-row .toggle {
        display: revert;
        margin-left: 0;
        margin-top: 12px;
    }
    .login-form .account-type-row .toggle .btn {
       padding: 14px;
    }
}

.login-form .account-type-row .toggle .btn {
    color: #3d3c3c;
    background: white;
    border: solid 1px #979797;
}

.login-form .account-type-row .toggle .btn:not(:first-of-type) {
    border-left: none;
}

.login-form .account-type-row .toggle .btn.active,
.login-form .account-type-row .toggle .btn:hover {
    background: #263D83;
    color: #fff
}

.login-links {
    /* margin: 38px 0 0; */
    padding: 0;
}

.login-links li {
    display: inline-block;
    list-style: none;
}

.login-links li:nth-child(2)::before{
    background: rgba(151,151,151,.4);
    content: '';
    display: inline-block;
    height: 28px;
    margin: 0 20px 0 22px;
    vertical-align: middle;
    width: 1px;
}

.login-links li a,
.register input[type=submit] + a {
    color: #007AA6;
    font-weight: bold;
    text-decoration: underline;
}

.login-links li a:hover,
.register input[type=submit] + a:hover {
    color: #007AA6;
    text-decoration: none;
}

/***Register Form***/

.register form {
    padding: 51px 74px 35px 4.9%;
    text-align: center;
}

.register .options li {
    padding-right: 10px;
    width: 33.3333%;
}

.register input[type=submit] {
    margin-bottom: 28px;
}

/***************************************************************************************************************************************************************************************/

/*LEADERBOARD STYLES*/

/***************************************************************************************************************************************************************************************/

/***Section Nav***/

.section-nav .active a span {
    font-weight: 600;
}

/***Leadership Board***/

.leadership-board {
    padding-top: 46px;
}

.leadership-board table {
    width: 100%;
}

.leadership-board th {
    font: 500 .875rem 'omnes-pro',Arial, Helvetica, sans-serif; /*14*/
    padding-bottom: 17px;
    text-align: left;
    text-transform: uppercase;
}

.leadership-board td {
    background: #fff;
    border-bottom: 20px solid #F5F5F5;
    font-size: 1.125rem; /*18*/
    padding: 17px 0 20px;
    vertical-align: middle;
}

.leadership-board .your-class td {
    background: #C30275;
    color: #fff;
}

.leadership-board th:first-child,
.leadership-board td:first-child {
    width: 121px;
}

.leadership-board td:first-child span {
    align-items: center;
    background: #99CC33;
    border: 2px solid #fff;
    border-radius: 100%;
    box-shadow: 0 0 0 2px #99CC33;
    color: #fff;
    font: 600 1.125rem 'omnes-pro',Arial, Helvetica, sans-serif; /*18*/;
    display: flex;
    height: 53px;
    justify-content: center;
    margin-left: 28px;
    width: 53px;
}

.leadership-board .your-class td:first-child span {
    background: #fff;
    border: 2px solid #C30275;
    box-shadow: 0 0 0 2px #fff;
    color: #C30275;
}

.leadership-board td:nth-of-type(2) {
    color: #007AA6;
    font-weight: 600;
}

.leadership-board .your-class td:nth-of-type(2) {
    color: #fff;
}

.leadership-board td:last-child {
    padding-right: 40px;
    text-align: center;
}

.leadership-board button {
    display: block;
    margin: 30px auto;
    width: 240px;
}

/***Class Leaderboard***/

.leadership-board.class-leaderboard td:last-child {
    text-align: left;
}

/***************************************************************************************************************************************************************************************/

/*BADGES STYLES*/

/***************************************************************************************************************************************************************************************/

.badges {
    padding-top: 64px;
}

.badges h2 {
    font-size: 2.625rem; /*42*/
    margin-bottom: 30px;
}

.badges h2 span {
    color: #3D3C3C;
    display: block;
    font-size: 1.125rem; /*18*/
    font-weight: 500;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.badges h2 a {
    color: #C30275;
    display: inline-block;
    font-size: 1.375rem; /*22*/
    margin-left: 20px;
    text-decoration: underline;
}

.badges h2 a:hover {
    text-decoration: none;
}

.badges ul {
    justify-content: flex-start;
    margin: 0 0 64px;
    padding: 0;
}

.badges li {
    background: #FFFFFF;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.20);
    list-style: none;
    margin-right: 1.89%;
    padding: 259px 6px 34px;
    position: relative;
    text-align: center;
    width: 23.54%; /*259*/
}

.badges li:nth-of-type(4n+4) {
    margin-right: 0;
}

.badges li img {
    left: 33px;
    position: absolute;
    top: 33px;
    width: calc(100% - 66px);
    height: auto;
}

.badges li.unlocked img {
    left: 6px;
    top: 13px;
    width: calc(100% - 12px);
}

.badges li h3 {
    font-size: 1.125rem; /*18*/
    margin-bottom: 0;
    padding: 0 14px;
}

.badges li p {
    color: #263D83;
    font: 500 1.125rem 'omnes-pro',Arial, Helvetica, sans-serif; /*18*/
    margin-bottom: 14px;
    padding: 0 14px;
}

.badges .unlocked-date {
    color: #C30275;
    display: block;
    font: 600 .9375rem 'omnes-pro',Arial, Helvetica, sans-serif; /*15*/
}

.badges .progress {
    background: rgba(61,60,60,.1);
    display: block;
    height: 13px;
    margin: 20px auto 0;
    max-width: 191px;
    position: relative;
    width: 100%;
}

.badges .progress:after {
    background: #C30275;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    width: 50%;
}

/***************************************************************************************************************************************************************************************/

/*CLASSES STYLES*/

/***************************************************************************************************************************************************************************************/

.class-listings {
    padding-top: 82px;
}

.class-listings h1,
.single-class h1 {
    color: #3D3C3C;
    font-size: 2rem; /*32*/
    margin: 0;
}

.class-listings h1 + .btn {
    margin-top: 26px;
}

/***Empty Listings***/

.class-listings .empty,
.single-class .empty {
    background: url('img/empty-classes.png') no-repeat 95% bottom #fff;
    background-size: 395px auto;
    padding: 115px 12.87% 103px 12.87%;
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 10%);
    border-radius: 17px;
    min-height: 500px;
}

.class-listings .empty h2 {
    margin: 30px;
    text-align: center;
    color: #263d83;
    font-size: 24px;
    width: 302px;
}

.single-class .empty h2 {
    margin-bottom: 30px;
    text-align: left;
    color: #263d83;
    font-size: 24px;
}

.class-listings .empty .white-btn,
.single-class .empty .white-btn {
    width: 355px;
    margin-bottom: 15px;
}

.class-listings .empty .white-btn-google,
.single-class .empty .white-btn-google {
    width: 355px;
    margin-bottom: 15px;
}

.class-listings .empty .white-btn-clever,
.single-class .empty .white-btn-clever {
    width: 355px;
    margin-bottom: 15px;
}

.class-listings .empty > div,
.single-class .empty > div {
    background: #fff;
    max-width: 496px;
}

.class-listings .empty ol {
    margin: 0 0 46px;
    padding: 0;
}

.class-listings .empty li {
    font: 500 1rem/1.25 'omnes-pro',Arial, Helvetica, sans-serif; /*16,20*/
    list-style: none;
    width: 26.2%; /*130*/
}

.class-listings .empty li span {
    align-items: center;
    background: #99CC33;
    border-radius: 100%;
    color: #fff;
    display: flex;
    font-size: 1.625rem; /*26*/
    font-weight: 600;
    height: 56px;
    justify-content: center;
    margin: 0 auto 20px;
    width: 56px;
}

/***Active Listings***/

.listings-table {
    font: 500 1.125rem 'omnes-pro',Arial, Helvetica, sans-serif; /*18*/
    margin-top: 27px;
    width: 100%;
}

.listings-table th,
.listings-table td {
    padding: 15px 0;
    vertical-align: middle;
}

.listings-table td.accepted,
.listings-table td.invited {
    font-size: 0.95rem;
}

.listings-table td.accepted {
    color: #99CC33;
}


.listings-table th {
    font-size: .875rem; /*14*/
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
    background-image: none;
}

.listings-table th:first-child {
    padding-left: 25px;
}

.listings-table td {
    background: #fff;
    border-bottom: 1px solid rgba(151,151,151,.5);
    border-top: none;
}

.listings-table tr:first-child td {
    border-top: 1px solid rgba(151,151,151,.5);
}

.listings-table td:first-child {
    border-left: 1px solid rgba(151,151,151,.5);
    padding-left: 25px;
    width: 93px;
}

.listings-table td:last-child {
    border-right: 1px solid rgba(151,151,151,.5);
    padding-right: 25px;
    text-align: right;
}

.listings-table a {
    font-weight: bold;
}

.listings-table a svg,
.listing-table a svg
 {
    color: #3D3C3C;
    margin-left: 14px;
}

.listings-table label i,
.listing-table label i {
    border: 2px solid #3D3C3C;
    border-radius: 4px;
    display: inline-block;
    height: 20px;
    vertical-align: middle;
    width: 20px;
}

.listings-table label input:checked + i,
.listing-table label input:checked + i  {
    background: url('svgs/icon-check-dark.svg') no-repeat center;
}

.listings-table .all-checkbox,
.listing-table .all-checkbox {
    margin-right: 0.65em;
}

/***Lightbox - Add Class***/

.lightbox-container {
    background: rgba(61, 61, 61, 0.66);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

.lightbox {
    background: white;
    left: 50%;
    max-height: 75%;
    max-width: 640px;
    overflow: auto;
    padding: 35px 32px 0 36px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}

.lightbox-student-activity {
    background: white;
    left: 50%;
    max-height: 900px;
    height: 100%;
    max-width: 1140px;
    width: 90%;
    overflow: auto;
    padding: 35px 32px 0 36px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.lightbox .close {
    background: none;
    border: none;
    color: #263D83;
    font-size: 1.5rem;
    padding: 0;
    position: absolute;
    right: 35px;
    top: 34px;
    transition: color .25s ease;
}

.lightbox .close:hover {
    color: #3D3C3C;
}

.lightbox h2 {
    border-bottom: 1px solid rgba(151,151,151,.2);
    font-size: 1.5rem; /*24*/
    margin-bottom: 28px;
    padding-bottom: 12px;
}

.lightbox form {
    padding-bottom: 38px;
}

.lightbox form label {
    font: 500 .875rem 'omnes-pro',Arial, Helvetica, sans-serif; /*14*/
    text-transform: uppercase;
}

.lightbox .btn svg {
    margin-right: 8px;
}

.lightbox .btn {
    width: 100%;
}

/*Lightbox - News Update*/

.lightbox-news {
    padding: 35px;
}

.lightbox-news p {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin: 0 0 40px;
}

.lightbox-news p a {
    color: #263D83;
    font-weight: 600;
    text-decoration: underline;
}

.lightbox-news .flex-container {
    justify-content: flex-start;
    align-items: center;
}

.lightbox-news .btn {
    width: auto;
    margin-right: 30px;
}

.lightbox-news a.underline {
    color: #263D83;
    font: 600 1rem 'omnes-pro',Arial, Helvetica, sans-serif;
    text-decoration: underline;
}

/*Lightbox - Confirm Account*/
/* 
.confirm-account-side {
} */
.confirm-account-redesign {
    width: 100%;
    background-color: #263d83;
    display: flex;
    justify-content: space-evenly;
    color: white;
}

.confirm-account-redesign p {
    color: #fff;
}

.confirm-account-side {
    width: 50%;
}

.confirm-account-content-info {
    width: 50%;
    margin: 100px auto;
}

.confirm-account-content-info a {
    color: #fff;
    font-weight: bold;
}

.confirm-account-side h1 {
    color: #4dbde5;
    font-size: 36px;
    font-weight: bold;
}

.confirm-account-form {
    width: 80%;
    margin: 100px auto;
}

.confirm-account-form select {
    border-radius: 25px;
    margin-bottom: 0;
}

.confirm-account-form select option:not(:first-of-type) {
    color: #222;
}

.confirm-account-form .multiselect__placeholder {
    color: #6e6d6d;
}

.confirm-account-side .row {
    margin: 25px 0;
}

@media only screen and (max-width: 59.375em) {
    .confirm-account-redesign {
        flex-direction: column;
    }
    .confirm-account-side {
        width: 100%;
    }
    .confirm-account-content-info {
        width: 80%;
        margin: 30px auto;
    }
    .confirm-account-content-info img {
        display: none;
    }
    .confirm-account-form {
        margin: auto;
    }
}

.lightbox-confirm-account p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin: 0 0 40px;
}

.lightbox-confirm-account p a {
    color: #263D83;
    font-weight: 700;
    text-decoration: underline;
}

.lightbox-confirm-account form .row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.lightbox-confirm-account form .row .input-group {
    width: 100%;
}

.lightbox-confirm-account form .row .input-group label {
    display: block;
    font-weight: bold;
    margin: 0 0 12px;
    text-align: left;
    width: 100%;
    font: 700 1rem 'roboto', Arial, Helvetica, sans-serif;
    text-transform: none;
}

.lightbox-confirm-account form .row .input-group:first-of-type:not(fieldset) {
    margin-right: 40px;
}

.lightbox-confirm-account form .row .input-group .options {
    margin-top: 10px;
}

.lightbox-confirm-account form .row .input-group .options label {
    font-weight: 400;
}

.lightbox-confirm-account .btn {
    width: auto;
    margin-top: 10px;
}


/***Notofication***/
.notification-container {
    left: 0;
    position: fixed;
    top: 8%;
    width: 100%;
    z-index: 999;
    text-align: center;
}

.notification {
    background: rgb(250,226,147);
    left: 50%;
    max-width: 1430px;
    overflow: auto;
    position: absolute;
    line-height: 7.5vh;
    transform: translate(-50%, -50%);
    width: 90%;
    border: 2.5px rgb(244,193,59) solid;
    border-radius: 6px;
    opacity: 1;
    -webkit-animation: fadeinout 10s ease-in-out forwards;
    animation: fadeinout 9s ease-in-out forwards;
}

@-webkit-keyframes fadeinout {
    0%,100% { opacity: 0; }
    20%,50%,80% { opacity: 1; }
}
  
  @keyframes fadeinout {
    0%,100% { opacity: 0; }
    20%,50%,80% { opacity: 1; }
}

/***************************************************************************************************************************************************************************************/

/*SINGLE CLASSES STYLES*/

/***************************************************************************************************************************************************************************************/

.single-class {
    padding-top: 38px;
}

.single-class .back-link {
    display: inline-block;
    color: #3D3C3C;
    font: 600 1rem 'omnes-pro',Arial, Helvetica, sans-serif; /*16*/
    letter-spacing: .5px;
    margin-bottom: 68px;
}

.single-class .back-link svg {
    margin-right: 10px;
}

.single-class .back-link:hover {
    color: #263D83;
}

/***Empty State***/

.single-class .empty {
    background: url('img/single-empty-class.png') no-repeat calc(100% - 92px) bottom #fff;
    background-size: 333px auto;
    margin-top: 20px;
    min-height: 416px
}

.add-students,
.add-students ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.add-students .btn svg {
    margin-left: 38px;
}

.add-students ul {
    background: #FFF;
    box-shadow: 0 10px 20px rgba(0,0,0,.1);
    display: none;
    left: 50%;
    margin-left: -113px;
    padding: 12px 0;
    position: absolute;
    text-align: left;
    top: 100%;
    width: 226px;
}

.add-students ul:before {
    border-color: transparent transparent #fff transparent;
    border-style: solid;
    border-width: 5px;
    content: '';
    right: 20px;
    position: absolute;
    top: -10px;
}

.add-students li:hover ul {
    display: block;
}

.add-students ul a {
    color: #3D3C3C;
    display: block;
    font: 500 1.125rem 'omnes-pro',Arial, Helvetica, sans-serif; /*18*/
    padding: 6px 20px;
}

.add-students ul a:hover {
    color: #263D83;
}

/***Listings State***/

.single-class h1 + .add-students {
    display: inline-block;
    margin: 20px 10px 0 0;
    vertical-align: top;
}

.single-class .add-students + .btn {
    margin-top: 20px;
}

.single-class .btn svg {
    margin-right: 10px;
}

/* .single-class .listings-table th:nth-child(n+5):nth-child(-n+5),
.single-class .listings-table td:nth-child(n+5):nth-child(-n+5) {
    text-align: center;
} */

/***Lightbox - Add Students***/

.lightbox.add-student-form,
.lightbox.print-cards {
    max-width: 1080px;
}

.lightbox.add-student-form form {
    padding: 0;
}

.add-student-form .listings-table {
    margin-bottom: 12px;
}

.add-student-form .listings-table th:first-child,
.add-student-form .listings-table td:first-child,
.add-student-form .listings-table th:last-child,
.add-student-form .listings-table td:last-child {
    padding-left: 0;
    padding-right: 0;
}

.add-student-form .listings-table th {
    padding: 0;
}

.add-student-form .listings-table th:nth-of-type(n+2),
.add-student-form .listings-table td:nth-of-type(n+2) {
    text-align: center;
}

.add-student-form .listings-table tr:first-child td,
.add-student-form .listings-table td:first-child,
.add-student-form .listings-table td:last-child {
    border-top: none;
    border-left: none;
    border-right: none;
}

.add-student-form .listings-table td:first-child {
    padding-right: 20px;
    width: calc(53.56% + 20px); /*548*/
}

.add-student-form .flex-container {
    flex-wrap: nowrap;
}

.add-student-form .flex-container input {
    margin: 0;
    width: 48%;
}

.add-student-form form label {
    display: inline-block;
    text-align: center;
}

.add-student-form td:last-child button {
    background: none;
    border: none;
    color: #EF443C;
    font-size: 1.375rem; /*22*/
    margin-left: 42px;
    padding: 0;
    transition: color .25s ease;
}

.add-student-form td:last-child button:hover {
    color: #263D83;
}

.add-student-form .btn,
.print-cards .btn {
    width: auto;
}

.add-student-form form + .btn {
    margin: 148px 0 38px;
}

/***Class CSV Import***/
.class-csv-import-form form p{
    color: #263D83;
    font-weight: bold;
}
.class-csv-import-form form a{
    color: #C30275;
    font-weight: bold;
    text-decoration: underline;
}
.class-csv-import-form form a{
    color: #C30275;
    font-weight: bold;
    text-decoration: underline;
}

.class-csv-import-form .btn{
    width: 30%
}

.class-csv-import-form form label{
    text-transform: none;
    font: 600 1.1rem 'omnes-pro',Arial, Helvetica, sans-serif;;
}

.class-csv-import-form .submit-btn{
    margin: 24px 0 1px;
    float: right;
}

.class-csv-import-form .navigation{
    display: flex;
}

.class-csv-import-form .navigation .dropdown{
    flex-grow: 1.5;
    margin-right: 33%;;
    font-weight: bold;
    color: #263D83;
}

.class-csv-import-form .navigation .dropdown > p,
.class-csv-import-form .navigation .dropdown > select{
    margin-bottom: 0;
}

.class-csv-student-form .listings-table tr td{
 border: none;
}

.class-csv-student-form .submit-btn{
    float: right;
    margin-right: 0;
}

.class-csv-student-form.lightbox-news{
    height: 67.5vh;
}

.class-csv-student-form .navigation{
    position: fixed;
    bottom: 0;
    width: 87%;
    display: flex;
    flex-direction: row;
    margin-bottom: 2.2em;
}

.class-csv-student-form .navigation .link{
    margin-right: 33%;;
    font-weight: bold;
    color: #007AA6;
}

.class-csv-student-form form{
    max-height: 71%;
    overflow: auto;
}

.class-csv-student-form form .listings-table{
    margin-top: 0;
}

.class-csv-student-form form .listings-table .remove-option{
    padding-right: 0;
}

.class-csv-student-form .remove-btn {
    background: none;
    border: none;
    /* color: #EF443C; */
    color: #263D83;
    font-size: 1.375rem; /*22*/
    margin: 0;
    padding: 0;
    transition: color .25s ease;
}

.class-csv-student-form .remove-btn:hover {
    color: #263D83;
}

/***General***/
.black {
    color: black;
}

.file-upload{
    /* width and height set in order to work in all browsers */
    width: 0.1px;
    height: 0.1px;
    opacity: 0 !important;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.file-upload-text{
    font-style: italic;
}

.file-upload-text.not-set{
    color: #B6B5B5;
}

.link{
    cursor: pointer;
    text-decoration: underline;
}

.link:hover{
    opacity: 0.7;
}

/***Print Cards***/

.print-cards ul {
    margin: 0 0 20px;
    padding: 0;
}

.print-cards li {
    background: url('img/logo.png') no-repeat calc(100% - 20px) 20px;
    background-size: 55px auto;
    border: 3px dashed #979797;
    list-style: none;
    margin-bottom: 20px;
    padding: 20px 86px 10px 36px;
    width: 49%;
}

.print-cards dl {
    font-size: 1rem; /*16*/
    justify-content: flex-start;
    line-height: 1.1;
    margin: 0;
}

.print-cards dt {
    margin: 0 45px 10px 0;
    width: 74px;
}

.print-cards dd {
    font-weight: bold;
    margin: 0 0 10px;
    width: calc(100% - 45px - 74px);
    word-break: break-all;
}

.print-cards .btn {
    margin-bottom: 38px;
}

/***************************************************************************************************************************************************************************************/

/*SETTINGS PAGE STYLES*/

/***************************************************************************************************************************************************************************************/

/***Hero***/

.plain-hero {
    background: #263D83;
    margin-bottom: 76px;
    padding: 62px 0;
    text-align: center;
}

.plain-hero h1 {
    color: #fff;
    font-size: 2rem;
}

/***Form***/

.settings-form .container.fixed {
    max-width: 785px; /*725px*/
}

.settings-form h2 {
    border-bottom: 1px solid rgba(151,151,151,.2);
    font-size: 1.5rem; /*24*/
    margin-bottom: 17px;
    padding-bottom: 10px;
}

.settings-form fieldset {
    margin-bottom: 80px;
}

.settings-form .row,
.settings-form fieldset.flex-container {
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 16px;
}

.settings-form label,
.settings-form fieldset.flex-container legend {
    flex-shrink: 0;
    width: 219px;
}

.settings-form .row input {
    margin-bottom: 0;
}

.settings-form fieldset.flex-container {
    align-items: flex-start;
    margin-top: -64px;
}

.settings-form fieldset.flex-container legend {
    float: left;
}

.settings-form fieldset.flex-container .options {
    margin: 0;
    width: 100%;
}

.settings-form input.btn,
.settings-form .btn + .btn {
    margin-top: 60px;
}

.settings-form .btn + .btn {
    margin-left: 18px;
}

/***************************************************************************************************************************************************************************************/

/*HOW TO INTEGRATE STYLES*/

/***************************************************************************************************************************************************************************************/

/***Hero***/

.how-hero {
    background: #007AA6;
    margin-bottom: 65px;
    /*padding: 66px 0 50px;*/
    padding: 66px 0 0 0;
    position: relative;
}

.how-hero .flex-container {
    align-items: center;
}

.how-hero article {
    color: white;
    width: 48.81%; /*575*/
}

.how-hero h1 {
    color: white;
    font-size: 2.125rem; /*34*/
    margin-bottom: 13px;
}

.how-hero p {
    font-size: 1.25rem; /*20*/
    line-height: 1.5; /*30*/
    margin-bottom: 25px;
}

.how-hero img {
    bottom: -50px;
    max-width: 585px;
    /*position: absolute;*/
    right: 20px;
    width: 49.66%; /*585*/
}

.how-hero .btn svg {
    margin-right: 12px;
}

/***Sidebar***/

.page-content aside {
    background: none;
    box-shadow: none;
    color: inherit;
    padding: 0;
    width: 20.2%; /*238*/
}

aside ul.jump-links {
    margin-bottom: 80px;
}

.jump-links li {
    margin-bottom: 10px;
}

.jump-links li a {
    border-left: 6px solid #ccc;
    color: #007AA6;
    display: block;
    font: 600 1.125rem 'omnes-pro',Arial, Helvetica, sans-serif; /*18*/
    padding: 5px 0 5px 26px;
}

.jump-links li a:hover {
    border-left-color: #263D83;
    color: #263D83;
}

.page-content aside p {
    font-size: .875rem; /*14*/
    line-height: 1.71; /*24*/
}

.page-content aside p a {
    color: #3D3C3C;
    text-decoration: underline;
}

.page-content aside p a:hover {
    opacity: .6;
}

/***Page Content***/

.page-content article {
    width: 74.53%; /*878*/
}

.page-content article > h2 {
    margin-bottom: 18px;
}

.page-content article > h2:not(:first-child) {
    border-top: 1px solid #ddd;
    margin-top: 50px;
    padding-top: 26px;
}

.page-content article p,
.page-content article ul,
.page-content article ol {
    font-size: 1.25rem; /*20*/
    line-height: 1.5; /*30*/
    margin-bottom: 25px;
}

/*List style*/

.page-content article > ul:not(.gallery) {
    margin: 0;
    padding: 0 0 0 22px;
}

.page-content article > ul:not(.gallery) li {
    list-style: none;
    margin-bottom: 16px;
    padding-left: 28px;
    position: relative;
}

.page-content article > ul:not(.gallery) li:before {
    background: #263D83;
    border-radius: 100%;
    content: '';
    left: 0;
    height: 10px;
    position: absolute;
    top: 11px;
    width: 10px;
}

.page-content li .session-time {
    display: block;
    font: 500 .8125rem 'omnes-pro',Arial, Helvetica, sans-serif; /*13*/
    margin-top: 8px;
    text-transform: uppercase;
}

.page-content li .session-time svg {
    font-size: .875rem;
    margin-right: 8px;
}

.page-content img {
    height: auto;
}

/*Quote*/

.page-content .quote {
    align-items: flex-start;
    background: #007AA6;
    margin-top: 50px;
    padding: 30px;
}

.page-content .quote img {
    width: 33.37%; /*274*/
}

.page-content .quote blockquote {
    color: white;
    font: 500 1.375rem/1.27 'omnes-pro',Arial, Helvetica, sans-serif; /*22,28*/
    margin: 0;
    padding: 10px 0 0;
    width: 62.36%; /*512*/
}

/*Lesson*/

.page-content .lesson {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40px;
    min-height: 0;
    padding: 20px 26px 7px 20px;
    position: relative;
    width: 100%;
}

.page-content .lesson .time {
    width: 100%;
}

.page-content .lesson h2 {
    margin-bottom: 16px;
}

.page-content .lesson > div:first-of-type {
    width: 54.87%; /*456 / 831*/
}

.page-content .lesson li {
    font-size: 1rem;
}

.page-content .lesson > div:last-of-type {
    width: 37.83%; /*314*/
}

/*Gallery*/

.page-content .gallery {
    margin: 35px 0;
    padding: 0;
}

.page-content .gallery li {
    list-style: none;
    width: 31%;
}

/***************************************************************************************************************************************************************************************/

/*REPORTS STYLES*/

/***************************************************************************************************************************************************************************************/

/***Hero***/

.reports-hero {
    margin-bottom: 0;
    padding: 50px 0;
}

.reports-hero form.flex-container {
    align-items: flex-start;
    flex-wrap: nowrap;
    margin: 0 auto;
    max-width: 550px;
}

.reports-hero select {
    margin: 0;
}

.reports-hero .btn {
    flex-shrink: 0;
    height: 45px;
    margin-left: 12px;
    padding: 9px 10px;
    width: 212px;
}

.reports-hero .btn svg {
    margin-right: 14px;
}

/***Reports***/

.reports {
    padding: 50px 0 0;
}

/*Writing Activity Preview*/

.lightbox-student-activity.writing-activity {
    height: auto;
    padding: 35px 32px 20px 36px;
    width: 39%;
}
  
.writing-activity-preview {
    height: 81%;
    padding-top: 20px;
    margin-bottom: 20px;
}
  
#document-multimedia {
    height:624px;
    width: 641px;
    padding: 84px 22px 0px 40px;
    background: url('./img/ats/box_activity_multimedia.png') no-repeat;
}
  
#document-multimedia strong {
    display: block; 
    font-size: 14px;
    text-align: right; 
    padding-right: 22px;
    margin-bottom: 18px; 
}
  
.writing-activity-content {
    height: 485px;
    overflow-y: auto;
    font-size: 14px;
    padding: 0 30px 15px 0;
}
  
.writing-activity-content hr {
    margin: 2em 0;
}

.writing-activity-content .intro-item p, ul {
    margin-bottom: 15px;
}

.writing-activity-content .intro-item ul li strong, p strong {
    display: initial !important;
    padding-right: 0 !important;
}
  
.writing-activity-answers p {
    margin-bottom: 15px;
}
  
.writing-activity-answers p.title {
    font-size: 1.4rem;
}
  
.writing-activity-quizz > div {
    margin-bottom: 30px;
}
  
.writing-activity-quizz .quizz-question {
    font-weight: 600;
}
  
.writing-activity-quizz .quizz-question p {
    margin-bottom: 15px;
}
  
.writing-activity-quizz .quizz-answer {
    border-radius: 10px;
    padding: 0 3px;
}
  
.writing-activity-quizz .quizz-answer span {
    font: 600 .8125rem 'omnes-pro', Arial, Helvetica, sans-serif;
    align-items: center;
    border-radius: 100%;
    color: white;
    height: 19px;
    width: 19px;
    vertical-align: middle;
    display: inline-flex;
    justify-content: center;
    margin-bottom: 1px;
    margin-right: 3px;
}
  
.writing-activity-quizz .quizz-answer.correct {
    border: 2px solid #00c000;
}
  
.writing-activity-quizz .quizz-answer.correct span {
    background-color: #00c000;
}
  
.writing-activity-quizz .quizz-answer.incorrect {
    border: 2px solid #eb2e00;
}
  
.writing-activity-quizz .quizz-answer.incorrect span {
    background-color: #eb2e00;
}

/*Toolbar*/

.table-toolbar {
    align-items: center;
    margin-bottom: 34px;
}

.table-toolbar select {
    margin: 0;
    max-width: 325px;
}

.table-toolbar .tooltip em {
    border-bottom: 2px dashed #A2BFB9;
    margin-left: 8px;
    font: 500 .8125rem 'omnes-pro',Arial, Helvetica, sans-serif; /*13*/
    vertical-align: middle;
}

/*Table*/

.reports table {
    background: white;
    border: 1px solid rgba(151,151,151,.5);
    font-size: .8125rem; /*13*/
    font-weight: 700;
    width: 100%;
}

.reports th,
.reports td {
    /* border-bottom: 1px solid rgba(151,151,151,.5); */
    /* padding: 16px 20px; */
    /* text-align: left; */
    border: 1px solid rgba(151,151,151,.5);
    padding: 16px;
    text-align: center;
    position: relative;
}

.reports thead th {
    background: #F9F9F9;
    font-weight: 500;
}

.reports thead th:first-child,
.reports tbody th {
    border-right: 1px solid rgba(151,151,151,.25);
}

.reports td svg {
    font-size: .875rem;
    margin-right: 8px;
}

.reports td svg.fa-check {
    margin-right: 0;
}

.reports td .badge {
    color: #fff;
    background-color: #263d83;
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px;
    font-size: 9px;
}

.reports td span:not(.grade):not(.incomplete) {
    font-weight: 400;
    opacity: .5;
}

.reports span.incomplete {
    font-size: .6875rem; /*11*/
    font-style: italic;
    opacity: .5;
}

.reports .grade {
    align-items: center;
    background: #007AA6;
    border-radius: 100%;
    color: white;
    display: inline-flex;
    font: 600 .8125rem 'omnes-pro',Arial, Helvetica, sans-serif; /*13*/
    /* height: 23px; */
    height: 19px;
    justify-content: center;
    /* margin-right: 10px; */
    margin-right: 6px;
    text-transform: uppercase;
    vertical-align: middle;
    /* width: 23px; */
    width: 19px;
}

.reports .grade.grade-A {
    background: #263D83;
}

.reports .grade.grade-S {
    background: #99CC33;
}

/***************************************************************************************************************************************************************************************/

/* LOADING */

/***************************************************************************************************************************************************************************************/

.loadingContainer {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
    z-index: 10;
    text-align: center;
    padding: 0 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Roboto", sans-serif;
    font-size: 1.2em;
}

.loadingContainer.show{
    visibility: visible !important;
    transition: visibility 0s linear 0s, opacity 300ms;
}
.loadingContainer.hide{
    visibility: hidden !important;
    transition: visibility 0s linear 300ms, opacity 300ms;
}

.loadingContainer .text{
    width: 100%;
    height:100%;
}
.loadingContainer .body{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loadingContainer h3{
    margin-bottom: 0;
}

.loadingContainer svg {
    color: #263d83;
    font-size: 2.75rem;
    margin-left: 10px;
}

.loadingContainer.episodes-loader {
    position: relative;
    background: none;
}

.loadingContainer.multimedia-loader {
    margin-left: 0 !important;
    bottom: 0;
    height: 51px;
    top: unset;
    width: 60%;
}

.loadingContainer.multimedia-loader .text,
.loadingContainer.written-response-loader .text {
    margin: 0 !important;
}

.loadingContainer.multimedia-loader .body,
.loadingContainer.written-response-loader .body {
    margin: 0 !important;
}

.loadingContainer.multimedia-loader svg,
.loadingContainer.written-response-loader svg {
    width: 26px;
}

.loadingContainer.written-response-loader {
    margin-left: 0 !important;
    width: 100%;
    height: 179px;
    margin-right: 20px;
    bottom: 55px;
    top: 0;
}
.loadingContainer.written-response-loader.short {
    width: 72%;
    top: 0;
}
/***************************************************************************************************************************************************************************************/

/* Game Assign */

/***************************************************************************************************************************************************************************************/
.game-assign {
    display: flex;
    flex-wrap: wrap;
}

.game-assign-form.lightbox-news{
    min-height: 50.5vh;
}

.game-assign-form .navigation{
    position: fixed;
    bottom: 0;
    width: 87%;
    display: flex;
    flex-direction: row;
    margin-bottom: 2.2em;
}

.game-assign-form .navigation .link{
    margin-right: 33%;;
    font-weight: bold;
    color: #007AA6;
}

.game-assign-form .instructions {
    margin-top: 1vh;
    resize: none;
    width: 100%;
    height: 10vh;
    display: inline-block;
    padding-top: 0.5rem;
    border: 2px rgba(61,60,60,.3) groove;
    border-radius: 3px;
    padding-left: 0.5rem;
    font-size: 1rem;
    margin-bottom: 2vh;
}

.game-assign-form textarea::placeholder {
    color: #adadad;
    font-size: 1rem;
}

.game-assign-form .multiselect-tag {
    height: 4vh;
    min-width: 7vw;
    text-align: center;
    padding-top: 1.2vh;
}

.game-assign-form .multiselect__tags {
    min-height: 10vh !important;
    border: 2px rgba(61,60,60,.3) groove;
    border-radius: 3px;
}

.game-assign-form .multiselect__select {
    padding-top: 5vh;
}

.game-assign-form .multiselect-text {
    font-size: 15px;
}

.game-assign-form .multiselect-remove-tag {
    background: none;
    border: none;
    color: #263D83;
    padding: 0;
    position: absolute;
    right: 6px;
    width: 1.5vh;
    top: 1.35vh;
    transition: color .25s ease;
}

.game-assign-form .multiselect {
    margin-bottom: 1vh;
    margin-top: 1vh;
}

.multiselect__option--highlight {
    background-color: #263D83 !important;
}

.multiselect__tag {
    background-color: #263D83 !important;
}

.multiselect__option--highlight:after {
    background-color: #263D83 !important;
}

.multiselect__tag-icon {
    color: white !important;
}
.multiselect__tag-icon:after{
    color:white !important;
}
.multiselect__tag-icon:focus,.multiselect__tag-icon:hover{
    background:rgb(57, 90, 190) !important;
}

.multiselect__placeholder {
    font-size: 1rem;
}
/***************************************************************************************************************************************************************************************/

/* INVITATION */

/***************************************************************************************************************************************************************************************/

.invite-code-main {
    background-color: #263D83;
    min-height: 86.1vh;
    padding-top: 10%;
    min-width: 90vw;
  }
  
  .invite-code-modal {
    background: #FFF;
    width: 50%;
    margin: 0 25%;
    padding-top: 20px;
  }

  .invite-code-main .standard-fields {
    padding: 32px; box-shadow: inset 7px 34px 56px -36px rgba(0,0,0,0.38);
  }
  
  .input-code {
    text-transform: uppercase;
  }
  
  .inviteModal {
    min-width: 60%;
    padding: 32px 0px 0px;
  }
  
  .invitedModal {
    min-height: 90%;
  }
  
  .invitation-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  
  .invitation-item {
    flex: 1 0 49%;
    height: 40%;
    margin: 10% 0;
  }
  
  .divider {
    width: 1px;
    background-color: rgba(0, 0, 0, .2);
  }
  
  .invite_input_wrapper {
    display: flex;
    justify-content: space-around;
    width: 50%;
    margin: 0 25%;
  }
  
  .modal_header_logo {
      width: 30%;
      margin: 10px 35% 30px;
  }

  @media (max-width: 1050px) {
    .invite_input_wrapper input[type=text] {
      width: 50px !important;
    }
}

@media (max-width: 800px) {
    .invite-code-modal {
        width: 70%;
        margin: 0 15%;
    }
}

@media (max-width: 500px) {
    .invite-code-modal {
        width: 80%;
        margin: 0 10%;
    }

    .invite_input_wrapper input[type=text] {
      padding: 5px;
      width: 30px !important;
      height: 80px;
      font-size: 30px;
    }
  
    .invited_modal_wrapper {
      margin: 0;
      width: 100%;
    }
  
    .invitedModal button[type="button"] {
      font-size: 20px;
    }
  
    .invitedModal h1 {
      font-size: 29px;
    }
  
    .invitedModal h2 {
      padding-right: 0;
      font-size: 20px;;
    }
}

/***************************************************************************************************************************************************************************************/

/*MQ MAX-WIDTH 1200*/

/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: 75em) {

    /***Objectives***/

    .results {
        justify-content: space-between;
        padding: 22px 20px;
    }

    .results li {
        margin: 0 0 20px;
        /* width: 48%; */
    }

    /***Games***/

    .course-nav a,
    .section-nav:not(.activities-bar) a {
        font-size: 1rem;
        padding: 15px 0;
    }

    .course-nav li.games.active a::after {
		top: 90%;
	}
	
	.mini-nav li a {
		padding: 14px 0 10px;
	}

    .game-intro {
        padding: 40px 20px 55px
    }

    .lessons-list {
        padding: 60px 20px 75px;
    }

    .lesson {
        margin: 0 0 20px;
        width: 100%;
    }


    /* Playlists */
    .playlists,
    .playlist-actions,
    .playlist-form {
        width: 95% !important;
    }
}

/***************************************************************************************************************************************************************************************/

/*MQ MAX-WIDTH 950*/

/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: 59.375em) {

    html.active,
    html.active body {
        height: 100%;
        overflow: hidden;
    }

    .container {
        padding: 0 20px;
    }

    h1 {
        font-size: 1.875rem; /*30*/
    }

    h2.alt {
        font-size: 1.5rem; /*24*/
        margin-bottom: 10px;
    }

    h3 {
        font-size: 1.125rem; /*18*/
        margin-bottom: 25px;
    }

    .btn.small {
        padding: 8px 20px;
    }

    .tooltip span {
        font-size: .75rem;
        font-weight: 500;
        padding: 10px;
        width: 150px;
    }

    /***Header***/

    header {
        background: #fff;
        padding: 13px 0 11px;
    }

    header .mobile-menu,
    header.active .mobile-menu .fa-times {
        display: block;
    }

    header .mobile-menu .fa-times,
    header.active .mobile-menu .fa-bars {
        display: none;
    }

    header .mobile-menu {
        background: none;
        border: none;
        border-radius: 0;
        font-size: 1.125rem;
        margin: 0;
        padding: 0;
        z-index: 999;
    }

    header.active .mobile-menu {
        color: #fff;
    }

    header .logo {
        margin-left: 30px;
    }

    header .mobile-link {
        display: block;
        margin: 0 0 0 auto;
    }

    header nav {
        background: #007AA6;
        box-shadow: 10px 0 20px 0 rgba(0,0,0,0.20);
        height: 100vh;
        left: -300px;
        max-width: 100%;
        overflow: hidden;
        position: absolute;
        transition: all .5s ease;
        top: -13px;
        visibility: hidden;
        width: 300px;
        z-index: 99;
    }

    header.active nav {
        left: 0;
        visibility: visible;
    }

    header ul.flex-container {
        display: block;
        height: 100%;
        overflow: auto;
        padding: 78px 20px 0;
    }

    header nav li {
        display: block;
        margin: 0 0 22px;
        width: 100%;
    }

    header nav li a {
        border: none;
        color: #BFD6DE;
        font-size: 1.25rem;
        height: auto;
        margin: 0;
        padding: 0;
    }

    header nav li.active a,
    header nav li a:hover,
    header li:nth-of-type(n+6) a:hover {
        color: #fff;
        font-weight: bold;
    }

    header nav li:nth-of-type(6) {
        margin: 53px 0 0;
    }

    header nav li:nth-of-type(n+8) {
        margin: 20px 0 0;
    }

    header nav li .accessibility {
        left: 0;
        position: static;
    }

    header li:nth-of-type(n+6) a {
        color: #BFD6DE;
    }

    header li:nth-of-type(n+6) svg {
        color: #4DBDE5;
        display: inline-block;
        font-size: .9375rem;
        margin-right: 8px;
        vertical-align: middle;
    }

    /***Footer***/

    footer {
        padding: 30px 0;
    }

    /***Series***/

    .activities-bar,
    .section-nav:not(.activities-bar) {
        box-shadow: none;
    }

    .activities-bar {
        display: flex;
        padding: 20px 20px 0;
    }

    .activities-bar:before {
        content: "Browse By:";
        flex-shrink: 0;
        font: 400 1rem 'omnes-pro',Arial, Helvetica, sans-serif; /*44*/
    }

    .activities-bar .container {
        padding: 0;
        text-align: left;
    }

    .activities-bar li {
        margin: 0 0 0 25px;
    }

    .activities-bar a {
        border-bottom-width: 2px;
        font-size: 1rem;
        padding-bottom: 7px;
    }

    .activities-bar a span {
        display: none;
    }

    .series-listing .series {
        margin-top: 20px;
    }

    .series-listing .series a {
        padding: 40px 30px;
    }

    .series-listing li article,
    .page-hero article {
        margin: 0;
        max-width: 100%;
    }

    .series-listing li article h2,
    .page-hero article h2 {
        margin-bottom: 14px;
    }

    .series-listing .series-storm img,
    .page-hero.series-storm img {
        width: 137px;
    }

    .series-listing .series-vital img,
    .page-hero.series-vital img {
        width: 108px;
    }

    .series-listing .series-crisis img,
    .page-hero.series-crisis img {
        width: 156px;
    }

    .series-listing .series-pharm img,
    .page-hero.series-pharm img {
        width: 156px;
    }

    .series-listing .stats,
    .series-listing .stars {
        height: auto;
        margin-bottom: 19px;
        opacity: 1;
        visibility: visible;
    }

    .series-listing li article p {
        margin: 15px 0;
    }

    /***Objectives***/

    .browse-objectives {
        flex-wrap: wrap;
        margin-top: 15px;
    }

    .mobile-filter {
        align-items: center;
        background: #007AA6;
        border: none;
        color: #fff;
        display: flex;
        font: 500 1rem 'omnes-pro',Arial, Helvetica, sans-serif; /*16*/
        padding: 14px 20px;
        width: 100%;
    }

    .mobile-filter.active svg {
        transform: rotate(-180deg);
    }

    aside {
        display: none;
        padding: 6px 20px 20px;
        width: 100%;
    }

    .mobile-filter.active + aside {
        display: block;
        background-color: #fff !important;
    }

    .apply-filters {
        display: block;
        width: 95%;
        background-color: #F8C710;
        border: none;
        color: #3D3C3C;
        font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
        font-weight: 600;
        padding: 12px 30px 11px;
        margin-right: 5%;
        border-radius: 15px;
        box-shadow: 0 5px 15px 0 rgb(35 31 32 / 20%);
    }

    /***Games***/

    .page-hero {
        min-height: 0;
        padding: 30px 0 25px;
    }

    .page-hero .back-link {
        display: none;
    }

    .page-hero .pdfs {
        margin-top: 15px;
    }

    .page-hero .pdfs li {
        margin-bottom: 5px;
    }

    .course-nav,
    .section-nav:not(.activities-bar),
    .reports-hero + .activities-bar {
        padding: 0;
        overflow: auto;
        text-align: left;
    }

    .course-nav img {
        display: none;
    }

    .course-nav ul,
    .section-nav:not(.activities-bar) ul,
    .reports-hero + .activities-bar ul {
        margin: 0;
        min-width: 630px;
        width: 100%;
    }

    .course-nav li,
    .section-nav:not(.activities-bar) li,
    .reports-hero + .activities-bar li {
        margin: 0 38px 0 0;
    }

    .mini-nav h2,
	.mini-nav ul {
		font-size: .875rem;
	}
	
	.mini-nav h2,
	.mini-nav li {
		margin-right: 20px;
    }
    
    .games-listings {
        flex-wrap: wrap;
    }

    .games-listings aside {
        padding: 10px 0;
    }

    .games-listings aside h3 {
        padding: 0 20px;
    }

    .games-listings aside ul {
        margin-bottom: 24px;
        padding-bottom: 18px;
    }

    .games-listings aside a {
        padding: 6px 20px;
    }

    .game-info {
        display: flex;
        flex-direction: column;
    }
    /*When on mobile, show the mobile class */
    .game-intro {
        background: #F5F5F5;
        color: #3D3C3C;
        padding: 20px 0 30px;
    }
/*
    div.game-intro  a span#notMobile{
        display: block;
    }
    div.game-intro a span#mobile {
        display: none;
    }
    .game-intro .btn.pink.pointer {
        display: none;
    }
    .game-intro .btn.pink.mobile {
        display: block;
    }

    .game-intro h3.mobile {
        display: inline-block;
        border: 1px solid #263D83;
        font: 600 1.2rem 'omnes-pro',Arial, Helvetica, sans-serif;
        padding: 14px 30px;
        text-align: center;
    }
*/
    .game-intro img {
        margin: 0 auto 15px;
        width: auto;
    }

    .game-intro article {
        order: 2;
        width: 100%;
    }

    .game-intro h2.alt {
        color: #3D3C3C;
    }

    .game-intro p {
        font-size: 1rem;
    }

    .game-intro .btn {
        margin: 0 0 15px;
        width: 100%;
    }

    .game-intro a.alt {
        color: #3D3C3C;
    }

    .game-intro::after {
        display: none;
    }

    .objectives {
        background: #fff;
        padding: 40px 20px;
    }

    .objectives table,
    .objectives tbody,
    .objectives tr,
    .objectives th,
    .objectives td {
        display: block;
        width: 100%;
    }

    .objectives tr {
        border-top: 1px solid rgba(151,151,151,.2);
        padding: 20px 0;
    }

    .objectives th,
    .objectives td {
        border: none;
        padding: 0;
    }

    .objectives th {
        margin-bottom: 16px;
    }

    .lessons-list {
        order: 3;
        padding: 30px 0 0;
    }

    .lesson ul {
        margin-bottom: 38px;
    }

    .objectives {
        padding: 40px 0;
    }

    /***Intro Lessons***/

    section.lessons-list {
        padding-top: 40px;
    }

    /***Projects***/

    .projects .project,
    .projects .featured article,
    .projects .featured img {
        width: 100%;
    }

    .projects .featured {
        flex-wrap: wrap;
    }

    .projects .featured article {
        order: 2;
    }

    .projects .featured img {
        margin-bottom: 16px;
    }

    /***Projects Single***/

    .project-details .back-link {
        font-size: 1rem;
    }

    .project-details .details,
    .session-list {
        padding: 30px 20px;
    }

    .project-details article,
    .project-details .stats {
        width: 100%;
    }

    .session-list {
        justify-content: space-between;
    }

    .session-list li {
        margin-right: 0;
        width: 48%;
    }

    /***Login***/

    .login-form h1 {
        padding: 20px;
    }

    .login-form .account-type-info,
    .login-form .welcome-back {
        margin: 0;
        padding-left: 51px;
        width: 100%;
    }

    .login-form > img {
        height: 300px;
        object-position: center top;
        width: 100%;
    }

    .login-form form {
        padding: 30px 10px;
        width: 100%;
    }

    .login-links li {
        margin: 0 15px 15px;
    }

    .login-links li:first-child::after {
        display: none;
    }

    /***Leaderboard***/

    .leadership-board th {
        display: none;
    }

    .leadership-board table,
    .leadership-board tbody,
    .leadership-board tr,
    .leadership-board td {
        background: none;
        border: none;
        display: block;
        padding: 0;
        width: 100%;
    }

    .leadership-board tbody tr {
        background: #fff;
        border: 1px solid rgba(151,151,151,.5);
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
        padding: 15px 15px 15px 70px;
        position: relative;
    }

    .leadership-board tbody .your-class {
        background: #C30275;
    }

    .leadership-board td:first-child span {
        height: 40px;
        font-size: .875rem; /*14*/
        left: 15px;
        margin: 0;
        position: absolute;
        top: 15px;
        width: 40px;
    }

    .leadership-board td:nth-of-type(3) {
        font-size: 1rem;
    }

    .leadership-board td:nth-of-type(n+3) {
        font-size: .875rem; /*14*/
        margin-top: 10px;
        width: 50%;
    }

    .leadership-board td:nth-of-type(n+3):before {
        content: 'Location';
        display: block;
        font: 400 .75rem 'omnes-pro',Arial, Helvetica, sans-serif; /*12*/
        margin-bottom: 2px;
        text-transform: uppercase;
    }

    .leadership-board td:nth-of-type(4):before {
        content: 'Words Per Student';
    }

    .leadership-board td:nth-of-type(5):before {
        content: 'Total Words';
    }

    .leadership-board td:last-child {
        padding: 0;
        text-align: left;
    }

    .leadership-board td:last-child:before {
        content: 'Active Students';
    }

    /***Badges***/

    .badges {
        padding-top: 20px;
    }

    .badges h2 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .badges h2 span {
        font-size: .875rem; /*14*/
    }

    .badges h2 a {
        font-size: 1.125rem; /*18*/
    }

    .badges ul {
        margin-bottom: 25px;
    }

    .badges li {
        align-items: center;
        border: 1px solid rgba(151,151,151,.5);
        box-shadow: none;
        display: flex;
        margin: 0 0 10px;
        padding: 20px;
        width: 100%;
    }

    .badges li.unlocked {
        padding: 10px 25px 10px 10px;
    }

    .badges li img {
        flex-shrink: 0;
        margin-right: 19px;
        max-width: 96px;
        position: static;
        width: 29.17%;
        height: auto;
    }

    .badges li.unlocked img {
        max-width: 120px;
        width: 35.39%;
    }

    /***Classes***/

    .class-listings {
        padding-top: 40px;
    }

    .class-listings h1,
    .single-class h1 {
        font-size: 1.5rem; /*24*/
    }

    .class-listings .empty,
    .single-class .empty {
        background-position: right calc(100% + 27px);
        background-size: 181px auto;
        margin-top: 20px;
        padding: 30px 30px 136px;
        text-align: left;
    }

    .class-listings h2 {
        font-size: 1.375rem; /*22*/
        margin-bottom: 20px;
    }

    .class-listings .empty > div {
        background: none;
    }

    .class-listings .empty ol {
        margin-bottom: 10px;
    }

    .class-listings .empty li {
        align-items: center;
        display: flex;
        margin-bottom: 20px;
        position: relative;
        width: 100%;
    }

    .class-listings .empty li span {
        display: inline-flex;
        flex-shrink: 0;
        font-size: 1.125rem; /*18*/
        height: 40px;
        margin: 0 10px 0 0;
        width: 40px;
    }

    .listings-table,
    .listings-table tbody,
    .listings-table tr,
    .listings-table td {
        display: block;
    }

    .listings-table thead {
        display: none;
    }

    .listings-table tr {
        background: #fff;
        border: 1px solid rgba(151,151,151,.5);
        margin-bottom: 10px;
        padding: 16px 54px;
        position: relative;
        width: 100%;
    }

    .listings-table td {
        background: none;
        border: none !important;
        padding: 0;
    }

    .listings-table td:first-child,
    .listings-table td:last-child {
        padding: 0;
        position: absolute;
        top: 16px;
        width: auto;
    }

    .listings-table td:first-child {
        left: 20px;
    }

    .listings-table td:last-child {
        right: 20px;
    }

    .listings-table td:nth-of-type(2),
    .listings-table td:nth-of-type(3) {
        width: 100%;
    }

    .listings-table td:nth-of-type(3) {
        font-size: .875rem;
    }

    /***Single Classes***/

    .single-class {
        padding-top: 25px;
    }

    .single-class .back-link {
        margin-bottom: 25px;
    }

    .single-class .empty {
        background-position: calc(100% + 40px) calc(100% + 45px);
        background-size: 171px auto;
        min-height: auto;
        text-align: center;
    }

    .single-class .listings-table td:nth-child(n+3):nth-child(-n+5),
    .add-student-form .listings-table td:nth-child(n+2):nth-child(-n+4) {
        display: inline-block;
        margin: 9px 20px 0 0;
        text-align: left;
        vertical-align: top;
        width: auto;
    }

    .single-class .listings-table td:nth-child(n+3):nth-child(-n+5) span.accessibility,
    .add-student-form .listings-table td:first-child:before,
    .add-student-form .listings-table td:nth-child(n+2):nth-child(-n+4) span.accessibility {
        display: block;
        font-size: .75rem; /*12*/
        left: 0;
        position: static;
        text-transform: uppercase;
    }

    .single-class .listings-table td:nth-child(n+3):nth-child(-n+5) span.accessibility {
        display: inline-block;
        margin: 9px 0 0 10px;
    }

    .add-student-form .listings-table tr {
        border-width: 0 0 1px 0;
        margin: 0;
        padding: 20px 0 10px;
    }

    .add-student-form .listings-table td:first-child {
        padding: 0;
        position: static;
        width: 100%;
    }

    .add-student-form .listings-table td:first-child:before {
        content: 'Student Name';
    }

    .add-student-form .standard-fields label span {
        font-style: normal;
        font-weight: 500;
    }

    .add-student-form .standard-fields .tooltip {
        display: inline-block;
    }

    .add-student-form .standard-fields .tooltip span {
        display: none;
    }

    .add-student-form .flex-container {
        flex-wrap: wrap;
    }

    .add-student-form .flex-container input {
        margin-top: 10px;
        width: 100%;
    }

    .add-student-form .listings-table td:nth-of-type(n+2) {
        text-align: left;
    }

    .add-student-form .listings-table td:last-child {
        right: 0;
    }

    .add-student-form form label {
        text-align: left;
    }

    .add-student-form td:last-child button {
        font-size: 1rem;
    }

    .add-student-form form + .btn {
        margin-top: 35px;
        width: 100%;
    }

    .print-cards li {
        width: 100%;
    }

    /***How***/

    .how-hero {
        margin-bottom: 40px;
        overflow: hidden;
        padding: 40px 0 0;
    }

    .how-hero article {
        width: 100%;
    }

    .how-hero h1 {
        font-size: 1.5rem; /*24*/
        margin-bottom: 10px;
    }

    .how-hero p {
        font-size: 1rem;
    }

    .how-hero img {
        bottom: 0;
        left: 50%;
        position: relative;
        transform: translateX(-50%);
        width: 125%;
    }

    .page-content article {
        width: 100%
    }

    .page-content article > ul:not(.gallery) {
        padding: 0;
    }

    .page-content article p, .page-content article ul, .page-content article ol {
        font-size: 1.125rem;
    }

    .page-content .quote {
        margin-top: 40px;
    }

    .page-content .quote img {
        margin: 0 auto 15px;
        width: auto;
    }

    .page-content .quote blockquote {
        font-size: 1.125rem;
        padding: 0;
        width: 100%;
    }

    .page-content h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .page-content article > h2:not(:first-child) {
        margin-top: 40px;
        padding-top: 40px;
    }

    .page-content .lesson {
        flex-direction: column;
        padding: 20px 20px 30px;
    }

    .page-content .lesson > div:first-of-type,
    .page-content .lesson > div:last-of-type {
        width: 100%;
    }

    .page-content .gallery li {
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }

    /***Reports***/

    .reports-hero + .activities-bar {
        padding: 20px 20px 0;
    }

    .reports-hero + .activities-bar:before {
        content: "Performance By:";
        margin-right: 20px;
    }

    .reports-hero + .activities-bar ul {
        min-width: 330px;
    }

    .reports {
        padding-top: 20px;
    }

    .table-toolbar select {
        margin-bottom: 10px;
        max-width: 100%;
    }

    .reports table,
    .reports tbody,
    .reports th,
    .reports tr,
    .reports td {
        display: block;
        padding: 0;
        width: 100%;
    }

    .reports thead {
        display: none;
    }

    .reports tr {
        border-bottom: 1px solid rgba(151,151,151,.5);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 20px 20px 5px;
    }

    .reports th,
    .reports td {
        border: none;
    }

    .reports tbody th {
        border: none;
        font-size: 1rem;
        margin-bottom: 15px;
        width: 100%;
    }

    .reports td {
        margin-bottom: 15px;
        width: 100%;
    }

    .reports td:before {
        display: inline-block;
        margin-right: 15px;
    }

    .reports td:nth-of-type(1):before {
        content: 'Episode 1';
    }

    .reports td:nth-of-type(2):before {
        content: 'Episode 2';
    }

    .reports td:nth-of-type(3):before {
        content: 'Episode 3';
    }

    .reports td:nth-of-type(4):before {
        content: 'Episode 4';
    }

    .reports td:nth-of-type(5):before {
        content: 'Episode 5';
    }

    .reports td:nth-of-type(6):before {
        content: 'Episode 6';
    }
}

/***************************************************************************************************************************************************************************************/

/*MQ MAX-WIDTH 550*/

/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: 34.375em) {

    h4 {
        font-size: 1.25rem; /*20*/
    }

    /***Series***/

    .series-listing > article {
        background: none;
        padding: 30px;
    }

    /***Objectives***/

    .results li {
        width: 100%;
    }

    /***Projects Single***/

    .session-list li {
        width: 100%;
    }

    /***Register***/

    .register .options li {
        width: 50%;
    }

    /***Classes***/

    .lightbox {
        left: 0;
        max-height: 100%;
        max-width: 100%;
        padding: 30px 20px 0;
        transform: none;
        top: 0;
        width: 100%;
    }

    .lightbox h2 {
        padding-right: 50px;
    }

    .lightbox-news {
        padding: 30px 20px;
        height: 100%;
    }

    .lightbox-confirm-account form .row {
        flex-wrap: wrap;
    }

    .lightbox-confirm-account form .row .input-group:first-of-type:not(fieldset) {
        margin-right: 0;
    }

    /***Single Class***/

    .project-details .btns {
        margin-bottom: 20px;
    }

    .project-details .btns li {
        margin: 0 0 15px;
        width: 100%;
    }

    .project-details .btns .btn {
        width: 100%;
    }

    .single-class h1 + .add-students {
        margin-bottom: 15px;
    }

    .single-class h1 + .add-students,
    .single-class .btn.small {
        width: 100%;
    }

    .single-class .add-students + .btn {
        margin-top: 0;
    }

    .print-cards li {
        padding-left: 20px;
    }

    .print-cards dt,
    .print-cards dd {
        margin-right: 0;
        width: 100%;
    }

    .print-cards dt {
        margin-bottom: 5px;
    }

    .print-cards dd {
        margin-bottom: 15px;
    }

    /***Settings***/

    .plain-hero {
        margin-bottom: 40px;
        padding: 40px 0;
    }

    .plain-hero.reports-hero {
        margin: 0;
    }

    .plain-hero h1 {
        font-size: 1.5rem; /*24*/
    }

    .settings-form h2 {
        font-size: 1.375rem; /*22*/
        margin-bottom: 30px;
    }

    .settings-form fieldset {
        margin-bottom: 40px;
    }

    .settings-form .row,
    .settings-form fieldset.flex-container {
        flex-wrap: wrap;
    }

    .settings-form label,
    .settings-form fieldset.flex-container legend {
        width: 100%;
    }

    .settings-form fieldset.flex-container {
        margin-top: -40px;
    }

    .settings-form input.btn {
        margin-top: 30px;
        width: 100%;
    }

    .settings-form .btn + .btn {
        margin: 15px 0 0;
        width: 100%;
    }

    /***Reports***/

    .reports-hero h1 {
        margin-bottom: 20px;
    }

    .reports-hero form.flex-container {
        flex-wrap: wrap;
    }

    .reports-hero select,
    .reports-hero .btn {
        width: 100%;
    }

    .reports-hero .btn {
        margin: 10px 0 0;
    }

    /*When on mobile, show the mobile class */
    .game-intro {
        background: #F5F5F5;
        color: #3D3C3C;
        padding: 20px 0 30px;
    }
    
    .game-intro .btn.pink.pointer {
        display: none;
    }
    .game-intro .btn.pink.mobile {
        display: block;
    }

    .game-intro h3.mobile {
        display: inline-block;
        border: 1px solid #263D83;
        font: 600 1.2rem 'omnes-pro',Arial, Helvetica, sans-serif; /*22*/
        padding: 14px 30px;
        text-align: center;
    }
}

/***************************************************************************************************************************************************************************************/

/*MQ MAX-WIDTH 350*/

/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: 21.875em) {

    .btn {
        font-size: 1.125rem;
    }

    /***Series***/

    .section-nav li {
        margin: 0 0 0 15px;
    }

    .section-nav::before,
    .section-nav a {
        font-size: .875rem;
    }

    /***Leadership Board***/

    .leadership-board td:nth-of-type(n+3) {
        width: 100%;
    }

    /***Badges***/

    .badges li {
        display: block;
    }

    .badges li img,
    .badges li.unlocked img {
        margin: 0 auto 30px;
        width: auto;
    }

    .badges h2 a {
        display: block;
        margin: 15px 0 0;
    }
}
/*@media only screen and (max-width: 484px) {
    .how-hero {
        display: block;
    }
    .game-intro{
        display: none;
    }
}*/

/***************************************************************************************************************************************************************************************/

/*STUDENT ASSIGNMENTS*/

/***************************************************************************************************************************************************************************************/

.student-assignments {
    width: 100%;
    min-height: 90vh;
}

.student-assignments__header {
    background-color: #0072a6;
    width: 100%;
    height: 279px;
    padding-left: 10%;
    padding-top: 87px;
}

.student-assignments__header h1 {
    color: white;
    font-size: 2.25rem;
    margin-bottom: 10px;
}

.student-assignments__header p {
    color: white;
    font-size: 1.25rem;
}

.student-assignments__todos {
    width: 80%;
    margin: 30px 10%;
}

@media(max-width: 650px) {
    .student-assignments__todos>.standard-fields {
        flex-direction: column;
    }
    .student-assignments__todos>.standard-fields .assignment-label {
        margin-left: 0px !important;
    }
}

.assignment-label select {
    padding-right: 40px;
    border-radius: 12px;
    height: 55px;
}

.student-assignments__todos h1 {
    font-size: 1.75rem;
}

.student-assignments__todo {
    display: flex;
    border-radius: 17px;
    background: #fff;
    justify-content: space-between;
    min-height: 119px;
    height: auto;
    margin: 0 0 20px;
    padding: 17px 35px 18px 20px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);

}

.student-assignments__todo__kebab-menu {
    margin: auto 0;
    font-size: 20px;
    color: #3d3c3c;
    cursor: pointer;
}

.student-assignments__todo-section {
    display: flex;
    width: 42%;
}

.student-assignments__todo-section img {
    margin: auto 0;
    margin-right: 25px;
    height: auto;
    width: 127px;
    border-radius: 12px;
}

.student-assignments__todo-assignment {
    margin-left: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.student-assignments__todo-assignment h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
}
.student-assignments__todo-assignment a,
.student-assignments__todo-assignee a {
    color: #3d3c3c;
    font-weight: 600;
    border-bottom: 2px solid #ffc80b;
    font-size: 16px;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    line-height: 1.75;
    letter-spacing: 0.6px;
}

.student-assignments__todo-assignee {
    width: 22%;
    margin-top: 7px;
}
.student-assignments__todo-assignee h1 {
    color: #757575;
    font-size: 20px;
    margin-bottom: 7px;
}

.student-assignments__todo-assignee .note-button {
    color: #DC1C8F;
    text-decoration: underline;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    background: transparent;
    padding: 0;
}

.student-assignments__todo-assignee .note-button:hover { 
    color: #df53a7;
}

.student-assignments__todos .play-button {
    border: 2px solid #381e82;
    color: #381e82;
    padding: 2px 30px;
    margin: 22px 0;
    height: 40px;
    background-color: white;
    font-weight: 600;
}

.student-assignments__todos .play-button:hover {
    background-color: #381e82;
    color: white;
    transition: all .25s;
}

.student-assignments__completed svg {
    color: #74e03b;
}

.student-assignments__completed span {
    font-style: italic;
}

.student-assignments__completed {
    width: 165px;
    text-align: center;
}

.recently-completed .student-assignments__completed,
.recently-completed .student-assignments__todo-assignee,
.student-assignments__todo-assignee,
.student-assignments__completed {
    margin: auto 0 !important;
}

.note-container>.lightbox {
    padding-bottom: 32px;
}

.note-container>.lightbox h2 {
    width: 90%;
}

.note-container textarea {
    padding-top: 10px;
    border: none;
    background-color: transparent;
    font-family: Roboto;
    font-size: 20px;
    line-height: 1.5;
}

.note-info {
    display: flex;
    /* border-bottom: 1px solid rgba(151,151,151,.2); */
}

.note-info img {
    height: 52px;
    width: 98px;
}

.note-teacher-and-game-info {
    margin-left: 20px;
    height: 60px;
    margin-bottom: 20px;
}

.note-teacher-and-game-info h1 {
    font-size: 20px;
    margin: 0 0 10px 0;
}

.note-teacher-and-game-info p {
    font-size: 14px;
}

.note-invitations-info {
    margin-bottom: 20px;
    color: #263D83;
    font-size: 16px;
    font-weight: 600;
}

.view-note {
    padding: 10px;
    /* resize: none; */
    width: 100%;
    min-height: 100px;
}

.assignment-progress-entry {
    display: flex;
    border-bottom: 1px solid rgba(151,151,151,.2);
    height: 92px;
}

.assignment-progress-section {
    width: 50%;
    padding: 24px 0 26px;
}

.assignment-progress-section:first-of-type {
    border-right: 1px solid rgba(151,151,151,.2);
}

.assignment-modification {
    width: 35%;
    margin: auto;
    text-align: center;
}

.assignment-modification .assignment-completed div {
    display: inline-block;
    margin-right: 11px;
}

.assignment-modification .assignment-completed .badge {
    background-color: #263d83;
    color: #fff;
    font-size: 10px;
    padding: 3px;
    font-weight: 600;
}

.assignment-modification .assignment-completed .grade {
    align-items: center;
    color: #fff;
    border-radius: 100%;
    height: 19px;
    width: 19px;
    vertical-align: middle;
    justify-content: center;
    font: 600 .8125rem 'omnes-pro',Arial, Helvetica, sans-serif;
}

.assignment-modification .assignment-completed .grade.grade-S {
    background-color: #99CC33;
}

.assignment-modification .assignment-completed .grade.grade-M {
    background-color: #007AA6;
}

.assignment-modification .assignment-completed .grade.grade-A {
    background-color: #263D83;
}

.assignment-modification .assignment-completed .answered-count {
    font-weight: bold;
    margin-right: 0;
}

.assignment-modification .assignment-completed .total-count {
    opacity: .5;
    margin-right: 0;
}

.assignment-progress-icon {
    width: 15%;
    padding: 30px 0 26px;
    text-align: center;
    /* margin: auto; */
    border-right: 1px solid rgba(151,151,151,.2);
}

.assignment-progress-icon p {
    margin: 0;
    font-size: 26px;
}

.assignment-progress-section h1 {
    font-size: 20px;
    font-weight: 600;
    color: #3d3c3c;
    /* margin-bottom: 5px; */
    margin: 5px 0;
}

.assignment-progress-section p {
    font-size: 16px;
    margin-bottom: 0;
}

@media (max-width: 1200px) {
    .student-assignments__todo-assignment h1 {
        font-size: 1.2rem;
    }
    .student-assignments__todo-assignee h1 {
        font-size: 16px;
    }
    .student-assignments__todo-assignment a,
    .student-assignments__todo-assignee a {
        font-size: 14px;
    }
    .student-assignments__todo__kebab-menu {
        font-size: 18px;
    }
}

/***************************************************************************************************************************************************************************************/

/*ADMIN INTERFACE*/

/***************************************************************************************************************************************************************************************/

.admin__header {
    margin: 50px 0;
}
.admin__filter-row {
    display: flex;
}
.admin__filter-item {
    margin-right: 20px;
    height: 100%;
    display: flex;
}
.admin__filter-item h2 {
    font-weight: 100;
    color: black;
}
.admin__filter-search {
    max-width: 380px;
    flex-grow: 4;
    margin-left: auto;
}
.admin__filter-search input {
    padding: 6px 6px 6px 40px !important;
    border: none;
    margin: 0px 16px 0px -35px !important;
    font-size: 17px;
    border: 1px solid #979797;
}
.admin__filter-search button {
    border: none;
    background-color: inherit;
    z-index: 2;
}
.admin__filter-search button:hover {
    color: #df53a7;
    transition: all .25s;
}
.account-row-password:hover,
.account-row-type:hover {
  cursor: pointer;
}
.account-row-password svg,
.account-row-type svg {
  width: 0.75rem;
}
.account-row-password:hover svg,
.account-row-type:hover svg {
  color: #df53a7;
  transition: all .25s;
}
.admin-pagination {
  font-family: 'Open Sans', sans-serif;
  text-align: right;
  padding: 8px;
}
.admin-pagination-number {
  display: inline-block;
  padding: 4px 10px;
  color: #FFF;
  border-radius: 4px;
  background: #44475C;
  margin: 0px 5px;
  cursor: pointer;
}
.admin-pagination-number:hover, .admin-pagination-number.active {
  background: #717699;
}

/***************************************************************************************************************************************************************************************/

/* LOGIN TOUR GUIDE */

/***************************************************************************************************************************************************************************************/

.tour-guide-modal {
    width: 50%;
    height: 702px;
    margin: 10vh auto;
    position: relative;
}
.tour-logo {
    width: 100%;
    height: 19%;
    background: #fff;
    position: relative;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
}
.tour-logo img {
    width: 166px;
    height: 51px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.tour-guide-content {
    background: #f5f5f5;
    height: 81%;
}
.tour-guide-content h2 {
    text-align: center;
    color: #3d3c3c;
    font-size: 32px;
    max-width:  60%;
    display: inline-block;
    margin: 50px 19%;
    font: 'omnes-pro',Arial, Helvetica, sans-serif;
}
.tour-options {
    display: flex;
    /*width: 80%;*/
    width: 100%;
    max-width: 600px; 
    margin: 0 auto;
}
.tour-option {
    /*height: 289px;*/
    height: 250px;
    min-width: 150px;
    max-width: 250px;
    width: 60%;
    margin: 0 5%;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
}
.tour-option img {
    width: 100%;
    height: 100%;
    max-height: 250px;
    max-width: 250px;
}
.tour-option p {
    max-width: 85%;
    text-align: center;
    display: block;
    margin: 18px auto;
    font-size: 18px;
    font-weight: 600;
    color: #263d83;
    font: 'omnes-pro',Arial, Helvetica, sans-serif;
}
.tour-dog {
    width: 123px;
    height: 127px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.tour-guide-modal button.close {
    background-color: inherit;
    border: none;
    font-size: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
}
@media (max-width: 1500px) {
    .tour-guide-content h2 {
        font-size: 24px;
        margin: 22px 19%;
    }
}
@media (max-width: 1205px) {
    .tour-option p {
        font-size: 14px;
        font: 'omnes-pro',Arial, Helvetica, sans-serif;
    }
}
@media (max-width: 1050px) {
    .tour-guide-modal {
        height: 525px;
    }
    .tour-dog {
        display: none;
    }
    .tour-option {
        width: 100%;
        height: 200px;
        min-width: 150px;
        max-width: 250px;
        width: 60%;
        margin: 0 5%;
    }
    .tour-option img {
        max-height: 250px;
        max-width: 250px;
    }
    .tour-option p {
        font-size: 14px;
        margin: 10px;
        font: 'omnes-pro',Arial, Helvetica, sans-serif;
    }
}

@media (max-width: 525px) {
    .tour-guide-modal {
        height: 525px;
    }
    .tour-dog {
        display: none;
    }
    .tour-option {
        width: 100%;
        height: 200px;
        min-width: 200px;
        max-width: 300px;
        width: 60%;
        margin: 0 5%;
    }
    .tour-option img {
        max-height: 200px;
        max-width: 150px;
    }
    .tour-option p {
        font-size: 14px;
        margin: 2px;
        font: 'omnes-pro',Arial, Helvetica, sans-serif;
    }
}

iframe {
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0px !important;
    min-width: 0px !important;
}

.video-wrapper {
    text-align: center;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin-bottom: 20px;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    min-height: unset;
}

.video-wrapper.student-view h2.loading {
    border-bottom: none;
    padding: 100px;
}

.sort-button {
    border: none;
    background: inherit;
    padding: 0px !important;
    display: inline-block;
  }

.sort-button-cell:hover {
    cursor: pointer;
  }
  .sort-button-cell svg.fa-sort-down {
    margin-bottom: 3px;
  }
  .sort-button-cell svg.fa-sort-up {
    margin-bottom: -3px;
  }

/***************************************************************************************************************************************************************************************/

/* QUESTS */

/***************************************************************************************************************************************************************************************/

.breadcrumbs {
    background-color: #263d83;
    height: 65px;
    padding: 1% 190px;
    display: flex;
    align-items: center;
}
.breadcrumbs a {
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    margin-left: 15px;
}
.breadcrumbs a:first-of-type {
    margin-left: 0;
}
.breadcrumbs svg {
    margin-left: 15px;
}

.quests__header {
    width: 100%;
    background-color: #263D82;
    min-height: 338px;
    display: flex;
    justify-content: space-between;
    padding: 30px 190px 30px;
    position: relative;
}
.quests__header.quest-list {
    padding-bottom: 0;
}
.quests__header .header-text {
    width: 67%;
}
.quests__header .header-text h1 {
    color: white;
    font-size: 2.25rem;
    margin-bottom: 10px;
}
.quests__header .header-text p {
    color: white;
    font-size: 1.25rem;
    line-height: 1.5;
    padding-right: 30px;
}
.quests__header.quest-list .header-text {
    margin: auto 0;
    width: 100%;
}
.quests__header .header-image img {
    height: 269px;
    border: 8px solid white;
    padding-left: 0;
    border-radius: 15px;
    box-shadow: 0 5px 15px 0 rgb(35 31 32 / 20%);
}
.quests__header.quest-list .header-image {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.quests__header.quest-list .header-image img {
    border: none;
    height: 86%;
}
.quests__header .progress {
    font-size: 35px;
}
.quests__header .progress svg {
    margin-right: 10px;
    color: #f5f5f56b;
    opacity: 0.5;
}
.quests__header .progress svg.completed {
    color: #ffc80b;
    opacity: 1;
}
.quests__container {
    margin-top: 50px;
}

.quest-bibliography {
    color: #757575;
    border: none;
    font-family: 'omnes-pro', Arial, Helvetica, sans-serif;
    border-bottom: 2px solid #ffc80b;
    /* margin-right: 120px; */
    font-weight: 600;
    display: block;
    float: right;
}

/* ///////////////////////////////// */

.quest-card {
    background-color: white;
    min-height: 235px;
    margin: 0 auto 30px;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    border-radius: 17px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
    padding: 30px;
    position: relative;
}
.quest-card .locked {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(38, 61, 131, 0.8);
    border-radius: 17px;
    border: solid 10px #263d83;
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.quest-card .locked svg {
    font-size: 50px;
    margin-bottom: 25px;
}
.quest-card .locked p {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    width: 40%;
}
.quest-card-row {
    display: grid;
    grid-template-columns: 65% 35%;
}
.quest-card img {
    height: 230px;
    width: auto;
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 15px;
    box-shadow: 0 5px 15px 0 rgb(35 31 32 / 20%);
}
.quest-info h2 {
    font-size: 34px;
    font-weight: bold;
}
.quest-info {
    padding: 0 35px;
}
.quest-info .quest-duration {
    font-size: 16px;
    color: #757575;
    letter-spacing: 0.4px;
    font-weight: 600;
    margin-bottom: 12px;
}
.quest-duration svg {
    display: inline-block;
    margin-right: 10px;
}
.quest-info .quest-time {
    font-weight: 600;
    padding: 0 10px;
    display: inline-block;
    color: #263d83;
}
.quest-info p {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #3d3c3c;
    line-height: 1.63;
}
.quest-actions {
    margin: 30px;
}
.quest-actions .btn {
    width: 200px;
    height: 51px;
    margin: 20px 3px 0;
    padding: 12px 30px 11px;
    border-radius: 17px;
    box-shadow: 0 5px 15px 0 rgba(35, 31, 32, 0.2);
    border-color: transparent;
    background-color: #ffc80b;
    color: #231f20;
}
.quest-actions .achievements {
    font-size: 30px;
    margin-top: 15px;
    text-align: center;
}
.quest-actions .achievements svg {
    color: #3d3c3c;
    margin-right: 6px;
    opacity: 18%;
}
.quest-actions .achievements svg:last-of-type {
    margin-right: 0;
}
.quest-actions .achievements svg.completed {
    color: #5fb9d9;
    opacity: 1;
}
.challenge__container {
    margin-top: 50px;
}
.challenge-content {
    display: grid;
    grid-template-columns: 10% 60% 30%;
    width: 100%;
    min-height: 220px;
    background-color: #fff;
    border-radius: 17px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
    margin: 30px 0;
    padding: 30px;
    position: relative;
}
.challenge-content .locked {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(38, 61, 131, 0.8);
    border-radius: 17px;
    border: solid 10px #263d83;
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.challenge-content .locked svg {
    font-size: 50px;
    margin-bottom: 25px;
}
.challenge-content .locked p {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    width: 40%;
}
.challenge-status {
    padding-left: 20px;
}
.challenge-status svg {
    height: 30px;
    width: 30px !important;
}
.challenge-status svg.fa-check-circle {
    color: #99cc33;
}
.challenge-body {
    position: relative;
}
.challenge-body h3 {
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: bold;
    color: #263d83;
}
.challenge-body p {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 1.63;
    color: #3d3c3c;
    margin-bottom: 85px;
    width: 90%;
}
.challenge-information {
    padding: 30px 0 10px;
    color: #757575;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: 0.4px;
}
.challenge-duration, .challenge-skill {
    padding: 7px 0;
}
.challenge-duration svg, .challenge-skill svg {
    margin-right: 10px;
}
.challenge-duration span, .challenge-skill span {
    color: #263d83;
    margin-left: 10px;
    text-transform: capitalize;
}
.challenge-completed {
    margin: auto;
}
.challenge-completed svg.fa-trophy {
    display: inherit;
    margin: 10px auto;
    height: 34px;
    width: 30px;
    color: #5fb9d9;
}
.challenge-completed p {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #3d3c3c;
    text-transform: uppercase;
}
.challenge-completed svg.fa-check-circle {
    display: inherit;
    margin: auto;
    height: 30px;
    width: 30px;
    color: #99cc33;
}
.challenge-result {
    margin: 0 auto;
    position: absolute;
    bottom: 10px;
}
.challenge-result button {
    display: inherit;
    margin: auto;
}
.quest-dashboard {
    max-width: 1346px !important;
    /* display: grid;
    grid-template-columns: 25% 75%; */
    margin-top: 66px;
}
.quest-challenges-menu .challenge-menu-item {
    position: relative;
    border-left: 6px solid #cccccc;
    min-height: 58px;
    height: auto;
    margin-bottom: 39px;
}
.quest-challenges-menu .challenge-menu-item > div {
    width: 182px;
    margin-left: 20px;
    cursor: pointer;
}
.quest-challenges-menu .challenge-menu-item > div:hover h3,
.quest-challenges-menu .challenge-menu-item > div:hover p {
    color: #263d83;
}
.quest-challenges-menu .challenge-menu-item.locked > div:hover h3 {
    color: #cccccc;
}
.quest-challenges-menu .challenge-menu-item.locked .locked-message p {
    pointer-events: none;
    color: #a39d9d;
    padding-top: 3px;
}
.quest-challenges-menu .challenge-menu-item > svg {
    float: right;
    position: absolute;
    top: 30%;
    right: 27%;
    font-size: 30px;
}
.quest-challenges-menu .challenge-menu-item h3 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #007aa6;
}
.quest-challenges-menu .challenge-menu-item p {
    color: #007aa6;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.275;
}
.quest-challenges-menu .challenge-menu-item.active {
    border-color: #263d83;
}
.quest-challenges-menu .challenge-menu-item.active h3 {
    color: #263d83;
}
.quest-challenges-menu .challenge-menu-item.active p {
    color: #263d83;
}
.quest-challenges-menu .challenge-menu-item.locked h3,
.quest-challenges-menu .challenge-menu-item.locked svg {
    color: #cccccc;
}
.quest-challenges-menu .challenge-menu-item.locked svg {
    font-size: 24px;
    margin-top: 10px;
}
.quest-notes {
    height: 100%;
    position: relative;
}
.quest-notes textarea {
    outline: none;
    background-image: linear-gradient(rgba(0, 0, 0, 0.27) 0.05em,transparent 0.05em), radial-gradient(circle at 18px 15px, #e7e7e7 6px, white 3px);
    background-size: 100% 2em;
    -webkit-box-shadow: 9px 4px 7px -10px rgb(66 66 66);
    -moz-box-shadow: 9px 4px 7px -10px rgba(66,66,66,1);
    box-shadow: 9px 4px 7px -10px rgb(66 66 66);
    min-height: 97%;
    width: 89%;
    padding: 33px 5px 0 35px;
    margin: 0;
    line-height: 2;
    font-size: 15px;
    border: none;
    box-shadow: 9px 11px 8px -5px rgb(0 0 0 / 32%);
    -webkit-box-shadow: 9px 11px 8px -5px rgb(0 0 0 / 32%);
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
}
.quest-notes textarea:focus {
    outline: none;
}
.quest-notes .tape {
    background-color: rgb(228 227 212 / 60%);
    width: 102px;
    height: 40px;
    left: 28%;
    top: -20px;
    transform: translateX(3%) rotate(-3deg);
    position: absolute;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1.3px;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
}
.quest-challenge {
    position: relative;
}
.quest-challenge-item >span {
    text-decoration: underline;
    font-size: 14px;
    color: #263d83;
    font-weight: 600;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
}
.quest-challenge-item p {
    line-height: 1.5;
    font-size: 22px;
    color: #007aa6;
    font-weight: 600;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
}
.quest-challenge.image-first >span{
    display: block;
    margin-left: auto;
    margin-right: 0;
    width: 60%;
    text-align: right;
}
/* .quest-challenge .challenge-info {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
} */
.quest-challenge h1 {
    font-size: 34px;
    font-weight: bold;
}
.quest-challenge.image-first h1 {
    margin-right: 0;
    margin-left: auto;
    text-align: right;
}
.quest-challenge .challenge-info p {
    font-size: 16px;
    color: #3d3c3c;
    font-family: 'Roboto', sans-serif;
    line-height: 1.63;
    width: 60%;
}
/* .quest-challenge .challenge-info > div {
    display: flex;
    flex-direction: column;
    width: 30%;
} */
.quest-challenge .challenge-info .duration,
.quest-challenge .challenge-info .skill {
    text-transform: capitalize;
    font-size: 16px;
    line-height: 1.38;
    letter-spacing: 0.4px;
    color: #757575;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-weight: 600;
    padding: 7px 0;
}
.quest-challenge .challenge-info .duration svg,
.quest-challenge .challenge-info .skill svg {
    margin-right: 10px;
}
.quest-challenge .challenge-info .duration span,
.quest-challenge .challenge-info .skill span {
    color: #263d83;
    margin-left: 10px;
}
.quest-challenge .challenge-image {
    background-color: white;
    padding: 7.5px;
    height: 315px;
    width: auto;
    border-radius: 15px;
    box-shadow: 0 5px 15px 0 rgb(35 31 32 / 20%);
    /* position: absolute;
    top: 0;
    right: 0; */
}
.challenge-image img {
    border-radius: 15px;
}
.quest-challenge.image-first .challenge-image {
    right: unset;
    left: 0;
}
.challenge-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 25px !important;
}
.challenge-actions .submit {
    height: 51px;
}
.challenge-actions .action {
    position: relative;
    background-color: white;
    width: 48%;
    /* width: 33%; */
    padding: 30px 40px;
    min-height: 275px;
    margin: 20px 0;
    border-radius: 17px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
}
.challenge-actions .action .yellow-btn {
    position: absolute;
    bottom: 32px;
    height: 51px;
    right: 32px;
}
.challenge-actions .action .yellow-btn svg {
    margin-left: 10px;
}
.challenge-actions .action svg.fa-circle,
.challenge-actions .action svg.fa-check-circle {
    font-size: 30px;
    position: absolute;
}
.challenge-actions .action .notes-requirement {
    position: absolute;
    bottom: 32px;
    font: 600 15px 'omnes-pro',Arial, Helvetica, sans-serif;
    color: #3D3C3C;
}
.challenge-actions .action div {
    margin-left: 60px;
}
.challenge-actions .action h3 {
    font-size: 22px;
    margin-bottom: 15px;
}
.challenge-actions .action p {
    font-family: 'Roboto', sans-serif;;
    font-size: 16px;
    line-height: 1.57;
    color: #3d3c3c;
}
.challenge-actions .action.writing,
.challenge-actions .action.multimedia,
.challenge-actions .action.instruction {
    width: 100%;
}
.challenge-actions .action.instruction {
    min-height: 150px;
}
.challenge-actions .action.writing textarea {
    font-family: 'Roboto', sans-serif;
    width: 100%;
    height: 177px;
    margin-right: 20px;
    padding: 14px 20px;
    border-radius: 17px;
    border: solid 1px #bebebe;
    resize: none;
}
.challenge-actions .action.writing textarea.invalid {
    border: solid 2px #ef443c;
}
.challenge-actions .action.writing textarea.short {
    width: 75%;
}
.challenge-actions .action.writing textarea::placeholder {
    font-family: 'Roboto', sans-serif;;
    font-size: 16px;
    line-height: 1.75;
    color: #757575;
}
.challenge-actions .action.writing p.educator-info {
    width: 100%;
    font-style: italic;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.38;
    color: #3d3c3c;
}
.challenge-actions .action.writing p.educator-info.short {
    width: 75%;
}
.character-count {
    margin: 0 !important;
    width: 98%;
    display: flex;
    justify-content: space-between;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
    line-height: 2.08;
    letter-spacing: -0.1px;
    margin-bottom: 5px; 
}
.character-count.short {
    width: 71%;
}
.character-count span {
    color: #c62828;
}
.character-count span.valid {
    color: rgb(153, 204, 51);
}
.character-count .error-message {
    font-style: normal;
    color: #c62828;
    font-size: 13px;
}
.action .locked {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(38, 61, 131, 0.8);
    border-radius: 15px;
    border: solid 10px #263d83;
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 100;
    align-items: center;
}
.action .locked svg {
    font-size: 35px;
    margin-bottom: 16px;
}
.action .locked p {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    width: 68%;
    color: #fff;
}
.action.writing .locked p,
.action.multimedia .locked p {
    width: 36%;
}
.action.invalid {
    border: solid 2px #ef443c;
}
.action.multimedia p.educator-info {
    font-style: italic;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.38;
    color: #3d3c3c;
}
.remember-box {
    width: 253px;
    min-height: 179px;
    padding: 20px 16px;
    border-radius: 17px;
    background-color: #d8d8d8;
    margin-left: 0 !important;
    font-size: 11.5px;
    letter-spacing: -0.3px;
}
.remember-box h3 {
    font-size: 18px !important;
    font-weight: 600;
}
.remember-box ul {
    list-style: disc;
    line-height: 2.17;
    padding-left: 15px;
    margin-bottom: 0;
}
.url-help {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    margin-left: 0;
    cursor: default;
    border-bottom: 2px dashed;
    padding-bottom: 2px;
    font-weight: 600;
    color: #3d3c3c;
}
.url-help svg {
    margin-right: 7px;
    color: #263d83;
}
.url-help span {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    text-align: left;
    font-size: 13px;
    line-height: 1.62;
    letter-spacing: -0.1px;
    bottom: calc(100% + 3px);
    left: calc(100% - 110px);
    width: 310px;
}
.url-help span a {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: 0.6px;
}
.url-submission {
    margin: 20px 0 10px !important;
}
.url-submission span {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 2.08;
    letter-spacing: -0.1px;
    margin-bottom: 5px;
}
.url-submission span.error-message {
    font-style: normal;
    color: #c62828;
    font-size: 13px;
    font-weight: bold;
    position: absolute;
}
.url-submission .input-wrapper {
    position: relative;
    margin-left: 0 !important;
}
.url-submission .input-wrapper input {
    height: 51px;
    border-radius: 17px;
    border: solid 1px #bebebe;
    width: 60%;
    padding: 5px 15px;
}
.url-submission .input-wrapper input.invalid {
    border: solid 2px #ef443c;
}
ul.url-submission {
    padding: 0 20px;
}
.url-submission li {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: italic;
    line-height: 2.08;
    letter-spacing: -0.1px;
    margin-bottom: 5px;
}
.url-submission img {
    display: block;
    margin-top: 10px;
    height: 200px;
}
.url-submission .multimedia-player-wrapper {
    margin-left: 0 !important;
    width: 600px;
    height: 0;
}
.url-submission .multimedia-player-wrapper iframe {
    min-height: unset;
    border: none;
}
.finish-the-sentence {
    margin: 30px 0 20px !important;
    width: 100%;
    position: relative;
}
.finish-the-sentence span {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 2;
    letter-spacing: -0.1px;
    margin-right: 13px;
    float: left;
}
.finish-the-sentence .input-wrapper {
    overflow: hidden;
}
.finish-the-sentence .input-wrapper input {
    border-bottom: solid 1px #bebebe;
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 5px 2px;
    width: 100%;
}
.finish-the-sentence .input-wrapper input.invalid {
    border-bottom: solid 2px #ef443c;
}
.finish-the-sentence .input-wrapper input:focus {
    outline: none;
    border-bottom: 2px solid black;
}
.finish-the-sentence .error-message {
    font-style: normal;
    color: #c62828;
    font-size: 13px;
    font-weight: bold;
    position: absolute;
    left: 0;
    float: none;
    line-height: 2.08;
}
.finish-the-sentence .loadingContainer.multimedia-loader {
    width: 100%;
}
.written-assessment {
    display: block !important;
    position: relative;
    background: white;
    padding: 30px;
    height: 350px;
    border-top: 5px solid #263D82;
}
.written-assessment.locked {
    border: 2px dashed #979797;
}
.written-assessment .fa-lock {
    font-size: 24px;
    margin-right: 15px;
}
.written-assessment span {
    font-size: 13px;
    text-transform: uppercase;
}
.written-assessment.locked p {
    position: absolute;
    text-align: center;
    font-size: 14px;
    line-height: 1.43;
    width: 39%;
    top: 45%;
    left: 30%;
}
.written-assessment .form {
    margin-left: 37px;
    margin-top: 21px;
    height: 100%;
    position: relative;
}
.written-assessment .form .character-count {
    position: absolute;
    top: 66%;
    right: 11%;
    color: #c62828;
}
.written-assessment .form .character-count.within-limits {
    color: #0f7f0f;
}
.written-assessment .form p {
    font-size: 18px;
}
.written-assessment textarea {
    resize: none;
    width: 90%;
    padding: 12px 18px;
    margin-bottom: 11px;
    height: 47%;
    outline: none;
}
.written-assessment .response {
    margin: 15px 0;
    height: 250px;
    overflow-y: auto;
}

/* RESOURCES ACCORDION */

.resources {
    display: block !important;
} 
.accordion {
    display: block;
    background-color: #eee;
    color: #444;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    margin-top: 0;
}
.accordion-header {
    position: relative;
    padding: 18px;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; */
    /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */

    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
} 
.accordion button {
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    font: 600 18px 'omnes-pro',Arial, Helvetica, sans-serif;
    color: #263D83;
}  
.accordion-header svg {
    position: absolute;
    top: 36%;
    right: 3%;
    color: #263D83;
}  
.accordion-content {
    padding: 0 18px;
    background-color: #F5F5F5;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    height: 0;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
    /* transition: visibility 0.3s linear, opacity 0.3s linear; */
}  
.accordion.open .accordion-content {
    visibility: visible;
    opacity: 1;
    height: auto;
}  
.accordion-content .resource {
    padding: 12px 0;
}
.accordion-content .resource .fa-file {
    color: #263D83;
    margin-right: 11px;
}
.accordion-content .resource .fa-video {
    color: #263D83;
    margin-right: 8px;
}

@media (max-width: 1366px) {
    .breadcrumbs {
        padding: 1% 115px;
    }
    .quests__header {
        padding: 30px 115px 30px;
    }
    /* .quests__header .header-text {
        padding: 0 10%;
    }
    .quests__header .header-image img {
        height: auto;
    }
    .quests__header .header-text {
        padding: 0 10%;
    }
    .quests__header .header-image img {
        width: 100%;
        height: auto;
        padding-right: 12%;
    } */
}

/* @media (max-width: 1250px) {
    .quests__header .header-text {
        padding: 0 0 0 10%;
    }
} */
@media (max-width: 75em) {
    /* .quest-dashboard {
      grid-template-columns: 30% 70%;
    } */
    .quest-challenge >div {
        display: block;
        margin-top: 5px;
    }
    .quest-challenge .challenge-image {
        height: 200px;
        background: none;
        padding: 0;
        margin: 10px 0;
    }
    .quest-challenge .challenge-info {
        width: 40%;
    }
    .challenge-actions {
        display: block !important;
    }
    .challenge-actions .action {
        width: 100%;
        margin-bottom: 30px;
        min-height: 250px;
    }
    .resources {
        margin: 30px 0 !important;
    }
    .written-assessment {
        margin-top: 30px !important;
    }
}
@media (max-width: 1050px) {
    .quest-info {
        padding: 0 25px;
    }
    .quest-actions .btn {
        padding: 13px 20px;
    }
    .written-assessment {
        height: 370px;
    }
    /* .written-assessment .form .character-count {
        top: 71%;
    } */
}
@media (max-width: 59.375em) {
    .breadcrumbs {
        padding: 1% 10%;
    }
    .quests__header,
    .quests__header.quest-list {
        display: block;
        padding: 20px;
    }
    .quests__header .header-text,
    .quests__header.quest-list .header-text {
        padding: 3% 8%;
        width: 100%;
    }
    .quests__header .header-image,
    .quests__header.quest-list .header-image {
        display: none;
    }
    .quest-card {
        display: block;
        height: auto;
    }
    .quest-card img {
        margin-bottom: 22px;
        width: 100%;
        height: auto;
    }
    .quest-info {
        padding: 0;
    }
    .quest-actions {
        display: flex;
    }
    .quest-actions .btn {
        padding: 14px 30px;
    }
    .quest-actions .achievements {
        text-align: left;
        margin-left: 30px;
    }
    .quest-dashboard {
        display: revert;
        margin-top: 25px;
    }
    .quest-challenges-mobile-menu {
        overflow: hidden;
        margin-bottom: 15px;
    }
    .quest-challenges-mobile-menu div {
        float: left;
        margin: 0 17px 10px 0;
        border-bottom: 5px solid #cccccc;
        padding-bottom: 7px;
    }
    .quest-challenges-mobile-menu div.active {
        border-color: #263d83;
    }
    .quest-challenges-mobile-menu div.active a {
        color: #263d83;
    }
    .quest-challenges-mobile-menu div.locked a {
        color: #cccccc;
    }
    .quest-challenges-mobile-menu a {
        font-size: 18px;
        font-weight: 600;
        color: #007aa6;
    }
    .quest-challenges-mobile-menu a:active {
        color: #263d83;
    }
    .quest-challenge {
        width: 100%;
    }
    .quest-challenge h1 {
        width: 100%;
        height: auto;
    }
    .quest-challenge .challenge-info h1 {
        font-size: 1.875rem;
    }
    .quest-challenge .challenge-image {
        height: auto;
        position: unset;
    }
    .quest-challenge .challenge-image img {
        width: 100%;
    }
    .challenge-content {
        display: block;
        position: relative;
    }
    .challenge-status {
        position: absolute;
        padding-left: 0;
    }
    .challenge-body {
        margin-left: 60px;
    }
    .challenge-result {
        margin: 20px 0 0 60px;
    }
    .challenge-result .challenge-completed {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .challenge-result .challenge-completed .fa-trophy {
        margin: 0 15px 0 0;
    }
    .challenge-result .challenge-completed p {
        margin: 0 15px 0 0;
    }
    .challenge-result .challenge-completed br {
        display: none;
    }
    .challenge-result .challenge-completed .fa-check-circle {
        margin: 0;
    }
}
@media (max-width: 710px) {
    .challenge__container {
        width: 100%;
    }
    .written-assessment .form p {
        font-size: 16px;
    }
    .written-assessment textarea {
        height: 39%;
    }
    .written-assessment.locked p {
        left: 24%;
        width: 55%;
    }
}
@media (max-width: 480px) {
    .breadcrumbs svg {
        margin-left: 5px;
    }
    .quests__header .header-text h1,
    .quests__header.quest-list .header-text h1 {
        font-size: 1.875rem;
    }
    .quests__header .header-text p,
    .quests__header.quest-list .header-text p {
        font-size: 1.175rem;
    }
    .quest-actions {
        display: revert;
    }
    .quest-actions .btn {
        width: 100%;
    }
    .quest-actions .achievements {
        margin-left: 0;
    }
    .challenge-actions .action {
        padding: 20px 30px;
    }
    .challenge-actions .action svg {
        font-size: 25px;
    }
}


.displayActivity {
    margin-top: 0px !important;
}

.displayActivity>div {
    max-width: 60% !important;
    overflow-y: hidden;
}

.displayActivity p,
.displayActivity textarea {
    width: 100%;
    font-size: 14px;
    padding: 30px 10%;
    line-height: 1.57;
    color: #3d3c3c;
    overflow-y: auto;
    margin-bottom: 24px;
    height: 450px;
    max-height: 450px;
}

.displayActivity .btn {
    width: 225px;
    height: 60px;
    margin: 0 auto 50px;
    display: block;
}

.displayActivity video {
    width: 80%;
    height: 450px;
    margin: 50px auto;
    display: block;
}

.displayActivity .disabled {
    opacity: 0.5;
    cursor: pointer;
    width: 275px;
    background: #263D83;
}

.displayActivity .disabled:hover {
    background: #263D83;
    color: #fff;
}

/* CLEVER AND GOOGLE CUSTOM BUTTONS */
.custom-sso-btn {
    width: 100%;
    height: 55px;
    margin-bottom: 10px;
    position: relative;
    text-align: center;
    background: #fff;
    color: #3d3c3c;
    border-radius: 5px;
    border: solid 1px #979797;
    white-space: nowrap;
}
.custom-sso-btn:hover {
    cursor: pointer;
    box-shadow: 6px 6px 9px -2px rgba(151,151,151,0.72);
    -webkit-box-shadow: 6px 6px 9px -2px rgba(151,151,151,0.72);
    -moz-box-shadow: 6px 6px 9px -2px rgba(151,151,151,0.72);
}
.custom-sso-btn .icon {
    position: absolute;
    left: 15px;
    top: 13px;
}
.custom-sso-btn .buttonText {
    line-height: 55px;
}

/* PLAYLIST STYLES START  */

.playlist-actions {
    width: 80%;
    margin: 30px auto;
    font: 600 1.3rem 'omnes-pro',Arial, Helvetica, sans-serif;
  }
  .playlist-actions a svg {
    display: inline-block;
    font-size: 1.3rem;
    left: 0;
    margin-right: 10px;
    position: relative;
    transition: all .25s ease;
  }
  .playlists {
    width: 80%;
    margin: 10px auto;
    /* display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); */
  }
  .playlist-card {
    background: #fff;
    padding: 26px 17px 25px 23px;
    margin: 20px 15px 20px 15px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
  }
  .playlist-title {
    font-size: 1.5rem;
    margin-bottom: 0;
    height: 50px;
  }
  .playlist-summary {
    font-style: italic;
    font-weight: 500;
    margin: 20px 0;
    height: 73px;
  }
  .playlist-activities-link,
  .playlist-edit-link {
    text-decoration: none;
    border-bottom: 3px solid #F8C710;
    color: #3D3C3C;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-weight: 600;
    margin-right: 20px;
  }
  .playlist-activities {
    margin-top: 30px;
  }
  .playlist-activities img {
    width: 23.5%;
    height: 55px;
    object-fit: cover;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 7px;
  }
  .playlist-activities img:last-of-type {
    margin-right: 3px;
  }

  /* Playlist Activities popup */
  .standard-popup .lightbox {
    max-width: 53%;
    padding: 0;
    border-radius: 20px;
    background: none;
  }
  .standard-popup.youtube .lightbox {
    width: 900px;
    max-width: unset;
    max-height: unset;
  }
  @media (max-width: 59.375em) {
    .standard-popup.youtube {
      margin-top: 0;
    }
    .standard-popup.youtube .lightbox {
      width: 100%;
      height: 100%;
      border-radius: 0;
    }
  }
  @media (max-width: 1366px) {
    .standard-popup .lightbox {
      max-width: 70%;
    }
  }
  .standard-popup-header {
    background: #231F20;
    padding: 30px 50px;
  }
  .standard-popup-header h2 {
    color: #fff;
    border-bottom: none;
    margin-bottom: 5px;
    padding-bottom: 0;
  }
  .standard-popup-header h2.title {
    color: #F8C710;
  }
  .standard-popup-header h2 span {
    color: #F8C710;
  }
  .standard-popup-header p {
    color: #fff;
    margin: 15px 21px 15px 0;
    font-size: 16px;
    line-height: 1.7;
  }
  .standard-popup-header .close {
    top: 0;
    right: 0;
    background-color: #F8C710;
    color: #231F20;
    padding: 20px 25px;
    font-size: 1.2rem;
    border-bottom-left-radius: 20px;
  }
  .standard-popup .tabs {
    width: 100%;
    background-color: #fff;
  }
  .standard-popup .tabs .tablink {
    border: none;
    width: 50%;
    background: white;
    height: 51px;
    font: 500 17px 'omnes-pro',Arial, Helvetica, sans-serif;
  }
  .standard-popup .tabs .tablink:hover {
    border-bottom: 3px solid #F8C710;
  }
  .standard-popup .tabs .tablink.active {
    border-bottom: 3px solid #F8C710;
    font-weight: 600;
  }
  .standard-popup-content {
    background: #fff;
    padding: 30px 35px;
  }
  .standard-popup-content table th {
    padding: 15px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    opacity: 0.6;
    text-align: left;
  }
  .standard-popup-content table td {
    padding: 15px 25px 15px 15px;
    vertical-align: middle;
  }
  .standard-popup-content table td.activity-thumbnail {
    width: 25%;
    border-radius: 10px;
    padding: 24px;
  }
  .thumbnail-wrapper {
    position: relative;
  }
  .thumbnail-wrapper img {
    border-radius: 10px;
  }
  .activity-thumbnail-title {
    position: absolute;
    width: 100%;
    top: 0;
    border-radius: 10px 10px 0 0;
    padding: 1px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 12px;
    padding: 4px 0 8px 12px;
  }
  .activity-assigned-badge {
    position: absolute;
    width: 45%;
    bottom: 0;
    right: 0;
    border-radius: 10px 10px 0 0;
    padding: 1px;
    background: rgba(5, 50, 133, 0.753);
    color: #fff;
    font-size: 12px;
    padding: 4px 0 8px 12px;
  }
  .standard-popup-content table tr, 
  .standard-popup-content table th {
    background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 4px 1px;
    background-repeat: repeat-x;
  }
  .standard-popup-content table td p {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.7;
  }

  .playlist-activitiy-mobile {
    margin-bottom: 30px;
    background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 4px 1px;
    background-repeat: repeat-x;
  }
  .playlist-activitiy-mobile  .thumbnail-wrapper img {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius: 10px;
  }
  .playlist-activitiy-mobile p {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    padding: 10px 0;
  }

  /* Playlist Assignment Accordion */
  .playlist-info {
    background: #263d83;
    color: white;
    display: grid;
    grid-template-columns: 45% 35% 10% 10%;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    min-height: 62px;
    height: auto;
    margin-bottom: 20px;
    padding: 17px 15px 18px 20px;
    border-radius: 17px;
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 10%);
    cursor: pointer;
  }
  .playlist-info .title,
  .playlist-asignee,
  .playlist-note-link {
    font-size: 18px;
    font-weight: 600;
    line-height: 36px;
  }
  .playlist-info .title {
    cursor: pointer;
  }
  .playlist-info .title svg {
    margin-right: 10px;
    color: #fff;
  }
  .playlist-info .title span {
    color: #ffc80b;
  }
  .playlist-note-link a {
    color: #fff;
    border-bottom: 2px solid #ffc80b;
  }
  .playlist-accordion-items {
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition: visibility 0.2s linear, opacity 0.2s linear;
  }
  .playlist-accordion-items.open {
    visibility: visible;
    opacity: 1;
    height: auto;
    margin-bottom: 20px;
  }
  
  /* Playlist Assignment Accordion Item */
  .playlist-accordion-item {
    position: relative;
  }
  .accordion-link {
    width: 30px;
    height: 30px;
    border-bottom: 1px dashed #757575;
    border-left: 1px dashed #757575;
    position: absolute;
    top: 15px;
    left: 15px;
  }
  .playlist-assignment {
    display: grid;
    grid-template-columns: 77% 23%;
    min-height: 86px;
    height: auto;
    padding: 20px 30px;
    background: #fff;
    padding: 11px 36px 13px 20px;
    border-radius: 17px;
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 10%);
    width: 95%;
    margin-left: auto;
    margin-right: 0;
    margin-top: 20px
  }
  .playlist-assignment__episode-info {
    display: flex;
  }
  .playlist-assignment__episode-info img {
    margin: auto 50px auto 0;
    height: auto;
    width: 109px;
    border-radius: 12px;
  }
  .playlist-assignment__episode-info .title {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .playlist-assignment__episode-info .title h1 {
    font-size: 20px;
    margin-bottom: 0;
  }
  .playlist-assignment__assignee-info h1 {
    color: #757575;
    font-size: 18px;
    margin-bottom: 2px;
  }
  .playlist-assignment__assignee-info a {
    color: #3d3c3c;
    font-weight: 600;
    border-bottom: 2px solid #ffc80b;
    font-size: 16px;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    line-height: 1.75;
    letter-spacing: 0.6px;
  }
  .playlist-assignment__kebab-menu {
    font-size: 20px;
    margin: auto;
    color: #3d3c3c;
    cursor: pointer;
  }

/* PLAYLIST STYLES END */

/* NEW EPISODE CARD START */

.playlist-form {
    width: 80%;
    margin: 30px auto;
  }
  .episode-container {
    max-width: 888px;
    height: auto;
    /* margin: 25px 122px 25px 37px; */
    margin: 25px 0;
    padding: 30px 30px 38px;
    border-radius: 17px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
    position: relative;
  }
  .episode-container .tooltip {
    margin-left: 0;
  }
  /* .episode-container img {
    max-width: 200%;
  } */
  .episode-title {
    width: 410px;
    height: 35px;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 34px;
    font-weight: bold;
    color: #263d83;
    position: relative;
  }
  .episode-summary {
    display: block;
    width: 50%;
    height: auto;
    margin: 15px 0;
    font-family: Roboto;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.63;
    letter-spacing: normal;
    color: #3d3c3c;
  }
  .episode-image {
    position: absolute;
    top: 30px;
    left: 55%;
    width: 40%;
  }
  .episode-image img {
    border-radius: 17px;
    max-height: 13em;
  }
  .episode-assign {
    width: 157px;
    height: 51px;
    padding: 12px 30px 11px;
    border-radius: 17px;
    box-shadow: 0 5px 15px 0 rgba(35, 31, 32, 0.2);
    background-color: #ffc80b;
    margin-right: 20px;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: #231f20;
    padding: 15px 30px;
    text-align: center;
  }
  .episode-assign:hover {
    background-color: #F5BC00;
  }
  .preview-game, .preview-game-mobile {
    height: 28px;
    margin: 12px 3px;
    letter-spacing: 0.6px;
    text-align: center;
    text-decoration: none;
    border-bottom: 3px solid #F8C710;
    color: #3D3C3C;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-weight: 600;
    margin-right: 20px;
    font-size: 15px;
  }
  .preview-game-mobile {
    display: none;
  }
  .episode-options {
    display: flex;
    justify-content: flex-start;
    padding: 16px 0;
  }
  .additional-activities {
    margin: 5px 25px 2px 3px;
    padding-top: 0px;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.4px;
    color: #757575;
    width: 30%;
  }
  .additional-activities .tooltip {
    display: block;
    width: 100%;
  }
  .before-prepare {
    width: 238px;
    margin: 5px 20px 5px 5px;
    text-decoration: none;
    color: #3D3C3C;
    font-weight: 600;
    font-size: 15px;
  }
  .before-prepare p {
    display: inline;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.75;
    letter-spacing: 0.6px;
    color: #3d3c3c;
    border-bottom: 3px solid #F8C710;
    padding-bottom: 2px;
  }
  .before-prepare svg {
    margin-right: 13px;
  }
  .before-prepare span {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.75;
    letter-spacing: 0.6px;
    color: #3d3c3c;
    width: 250px;
    height: auto;
    text-align: left;
    bottom: 27px;
    left: 0;
  }
  .before-prepare span.wide {
    width: 272px;
  }
  .before-prepare a {
    display: inline-block;
    transition: none;
  }
  .before-prepare a:hover {
    border-bottom: 2px solid #F8C710;
  }
  .filter-categories {
    margin: 0;
    position: absolute;
    top: 239px;
    left: 55%;
  }
  .filter-category {
    margin: 5px 0px 15px 0px;
  }
  .category-title {
    margin: 29px 0px 20px 9px;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #757575;
  }
  .category-content {
    width: 126px;
    height: 22px;
    margin: 29px 0px 20px 10px;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #263d83;
  }
  .add-button{
    padding: 15px 26px;
    border-radius: 17px;
    box-shadow: 0 5px 15px 0 rgb(35 31 32 / 20%);
    background-color: #ffc80b;
    border: none;
    width: 42%;
    margin-top: 15px;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-weight: 600;
  }
  .add-button:hover {
    background: rgba(94, 182, 94, 0.747);
  }
  .add-button.remove:hover {
    background: rgba(219, 69, 69, 0.726);
  }
  .add-button svg {
    margin-right: 7px;
  }
  .filter-container {
    border: none;
  }
  .filter-container aside {
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: #3d3c3c;
    padding: 10px 0;
  }
  .filter-container h3 {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    color: #3d3c3c;
  }
  .filter-container ul {
    color: #3d3c3c;
  }
  .filter-container li {
    color: #3d3c3c;
  }
  .filter-container aside label {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-weight: 600;
  }
  .filter-container aside label span {
    border: 2px solid #3d3c3c;
    border-radius: 4px;
    display: inline-block;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    width: 20px;
  }
  .filter-container aside label input:checked + span {
    background: url('svgs/icon-check-dark.svg') no-repeat center;
  }
  .tooltip.dark svg {
    color: #3d3c3c;
  }
  .added-games-list {
    margin-bottom: 20px;
  }
  .added-games-item {
    color: #263d83;
    font-weight: 500;
  }
  .added-games-item span {
    cursor: pointer;
    color: #000;
  }

  @media only screen and (max-width: 1024px) {
    aside {
        margin-left: 2% !important;
        width: 273px !important;
    }
    .episode-title {
        font-size: 30px;
    }
    .episode-summary {
        font-size: 15px;
    }
  }

  @media only screen and (max-width: 950px) {
    aside {
        margin-top: 15px;
        width: 100% !important;
    }
    .btn.small.apply-filters {
        margin: 20px ​0 0 0 !important;
    }
  }

  @media only screen and (max-width: 768px) {
    .filter-categories {
        padding-right: 20px;
    }
  }

  @media only screen and (max-width: 650px) {
    .episode-image {
        position: unset;
        width: 100%;
        margin-top: 15px;
    }
    .episode-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .episode-summary {
        width: 100%;
    }
    .episode-options {
        margin-bottom: 5px;
    }
    .additional-activities {
        width: 100%;
        margin: 30px 0 0 0;
        margin-left: 0;
    }
    .before-prepare {
        margin-left: 0;
    }
    .filter-categories {
        position: unset;
        padding-right: 0;
    }
    .filter-category {
        margin-bottom: 10px;
    }
  }

  @media only screen and (max-width: 550px) {
    .preview-game {
        display: none;
    }
    .preview-game-mobile {
        display: block;
        margin: 10px 0 0 0;
    }
  }

  @media only screen and (max-width: 480px) {
    .episode-container {
        padding-top: 20px;
    }
    .episode-title {
        font-size: 25px;
    }
    .episode-summary {
        font-size: 14px;
    }
    .preview-game {
        margin-right: 0;
    }
    .activity-thumbnail-title {
        font-size: 10px;
        padding: 2px 0 2px 8px;
    }
  }

  @media only screen and (max-width: 420px) {
    .category-title,
    .category-content,
    .additional-activities,
    .before-prepare p {
        font-size: 14px;
    }
    .filter-category {
        margin-bottom: 5px;
    }
    .episode-assign {
        width: auto;
        height: 43px;
        font-size: 13px;
        margin-right: 15px;
        padding: 13px 20px;
    }
    .preview-game-mobile {
        font-size: 13px;
        height: 22px;
        margin-right: 16px;
    }
  }

/* NEW EPISODE CARD END */

/* CAROUSEL PLAYLIST */

.playlist-carousel-holder {
    background: #263d83;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.playlist-carousel-title {
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 0;
    font-size: 40px;
    position: relative;
}

.playlist-carousel-controls {
    width: 150px;
    background-color: #F8C710;
    position: absolute;
    right: 0;
    bottom: 35px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.playlist-carousel-buttons {
    display: inline-block;
    width: 50%;
    cursor: pointer;
}

.playlist-carousel-buttons:hover {
    background-color: #F5BC00;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.playlist-carousel-buttons:nth-of-type(2):hover {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.playlist-carousel-buttons svg {
    color: black;
    padding: 5px 0;
}

 /* vue-carousel CUSTOM NAVIGATION */
 .VueCarousel-navigation {
    position: absolute;
    top: -100px;
    right: 15px;
}
.VueCarousel-navigation-button {
    font-size: 30px;
    background-color: #F8C710 !important;
    width: 75px;
    height: 55px;
    position: relative !important;
    top: unset !important;
}
.VueCarousel-navigation-prev,
.VueCarousel-navigation-next {
    left: unset !important;
    transform: none !important;
}
.VueCarousel-navigation-button:first-of-type {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.VueCarousel-navigation-button:nth-of-type(2) {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
.VueCarousel-navigation--disabled {
    opacity: 1 !important;
}
.VueCarousel-navigation--disabled svg {
    opacity: 0.3;
}

.playlist-assign-button {
    background-color: #F8C710;
    border: none;
    color: #3D3C3C;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-weight: 600;
    padding: 12px 30px 11px;
    margin-right: 5%;
    border-radius: 15px;
    box-shadow: 0 5px 15px 0 rgba(35, 31, 32, 0.2);
}

.playlist-assign-button:hover {
    background-color: #F5BC00;
}

@media only screen and (max-width: 75em) {
    .playlist-title {
        height: 75px;
    }
    .playlist-summary {
        height: 85px;
    }
    .playlist-assign-button {
        padding: 12px 20px;
        font-size: 14px;
    }
    .playlist-activities-link {
        font-size: 14px;
    }
}

@media only screen and (max-width: 1024px) { 
    .playlist-carousel-title {
        font-size: 35px;
    }
    .playlists {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .playlist-card {
        margin: 11px;
    }
    .playlist-title {
        height: 50px;
    }
    .playlist-summary {
        height: 73px;
    }
    .playlist-assign-button {
        font-size: 100%;
    }
    .playlist-activities-link {
        font-size: revert;
    }

    .standard-popup-content table td.activity-thumbnail {
        padding: 0;
    }

    /* vue-carousel */
    .VueCarousel-navigation-button {
        width: 65px;
        height: 50px;
        font-size: 28px;
    }
}

@media only screen and (max-width: 950px) { 
    .playlist-carousel-controls {
        width: 115px;
    }
    /* vue-carousel */
    .VueCarousel-navigation {
        top: -45px;
    }
    .VueCarousel-navigation-button {
        width: 51px;
        height: 44px;
        font-size: 24px;
    }
    .badge-category .VueCarousel-navigation {
        top: -75px;
    }
}

@media only screen and (max-width: 810px) { 
    .playlist-carousel-title {
        font-size: 30px;
    }
    .playlist-card div:nth-of-type(2) {
        margin-top: 10px;
    }

    .standard-popup .lightbox {
        max-width: 90%;
    }
}

@media only screen and (max-width: 768px) { 
    .playlist-carousel-controls {
        width: 98px;
    }
    .playlist-assign-button,
    .playlist-activities-link {
        font-size: 14px;
    }
    .playlist-title {
        font-size: 20px;
        height: 40px;
    }
    .playlist-summary {
        font-size: 15px;
        height: 60px;
    }
    .playlist-activities img {
        width: 20%;
    }
}

@media only screen and (max-width: 667px) {
    .playlist-assign-button {
        padding: 10px 18px;
    }
    .playlist-card div:nth-of-type(2) {
        margin-top: 25px;
    }
}

@media only screen and (max-width: 655px) {
    .playlists {
        display: revert;
    }
    .playlist-carousel-holder {
        min-height: 472px;
    }
    .playlist-card {
        padding: 20px 12px 15px 20px;
    }
    .playlist-title {
        font-size: 1.5rem;
        height: auto;
    }
    .playlist-summary {
        font-size: 1rem;
        height: auto;
    }
    .playlist-card div:nth-of-type(2) {
        margin-top: 0;
    }
    .playlist-assign-button {
        padding: 12px 30px 11px;
        font-size: 100%;
    }
    .playlist-activities-link {
        font-size: revert;
    }
}

@media only screen and (max-width: 550px) {
    .standard-popup .lightbox {
        left: 0;
        max-height: 100%;
        max-width: 100%;
        transform: none;
        top: 0;
        width: 100%;
        border-radius: 0;
    }
}

@media only screen and (max-width: 440px) {
    .playlist-carousel-title {
        font-size: 25px;
    }
    .playlist-carousel-controls {
        width: 75px;
    }
    .playlist-title {
        font-size: 1.4rem;
    }
    .playlist-summary {
        font-size: 0.9rem;
    }
    .playlist-assign-button {
        padding: 12px 20px;
        font-size: revert;
    }
    .playlist-activities-link {
        font-size: 14px;
    }
}


/***************************************************************************************************************************************************************************************/

/*NEW REPORTS STYLES*/

/***************************************************************************************************************************************************************************************/
.reports-new .standard-fields {
    display: inline;
}
a.yellow-underline {
    text-decoration: none;
    border-bottom: 3px solid #F8C710;
    color: #3D3C3C;
    font-family: 'omnes-pro', Arial, Helvetica, sans-serif;
    font-weight: 600;
}
.gradebook-link {
    float: right;
    padding-top: 18px;
}
.reports-tabs {
    height: 125px;
    box-shadow: 0px -83px 46px -102px rgba(0,0,0,0.65) inset;
}
.reports-tabs .container.fixed {
    height: 100%;
    padding: 34px 30px;
}
.reports-tabs .back-button {
    margin-top: 18px;
    display: inline-block;
}
.reports-tabs .back-button svg {
    font-size: 10px;
    margin-right: 7px;
}
.parallelogram {
    display: inline-block;
    margin-right: 20px;
    width: 200px;
	height: 57px;
	transform: skew(20deg);
    padding: 14px;
    text-align: center;
    border-radius: 17px;
    cursor: pointer;
    transition: background-color ease-in-out 0.1s
}
.parallelogram.active {
    background-color: #F8C710;
}
.parallelogram.active:hover {
    background-color: #F5BC00;
}
.parallelogram span {
    display: inline-block;
    transform: skew(-20deg);
    color: #231f20;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.56;
    letter-spacing: 0.45px;
}
.parallelogram span:hover {
    color: #231f20cf;
}
.parallelogram.active span:hover {
    color: #231f20;
}
.reports-new {
    background-color: #fff;
    padding: 50px 0 50px;
}
/* Skill Card */
.skill-card {
    display: flex;
    margin: 18px 0 50px 0;
    border-bottom: dashed 1px #7575755c;
    padding: 15px 0 30px 0;
}
.skill-card h4 {
    font-size: 1.125rem;
    color: #231f20;
}
.skill-info {
    margin-right: 50px;
    flex: 1 1 0;
}
.skill-info h3 {
    margin-bottom: 28px;
}
.skill-info p {
    line-height: 1.75;
    font-family: 'Roboto', sans-serif;
}
.skill-info a {
    line-height: 1.75;
    letter-spacing: 0.6px;
}
.class-level-performance {
    flex: 1 1 0;
}
.skill-band .title {
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 15px;
    font-family: 'omnes-pro', Arial, Helvetica, sans-serif;
    font-weight: 600;
}
.skill-band .students {
    margin: 8px 0 23px 0;
    position: relative;
}
.skill-band .students span {
    font-family: 'omnes-pro', Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #263d83;
    position: absolute;
    top: -8px;
    left: 0;
}
.skill-band .students .initials {
    display: inline-grid;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 14px;
}
.skill-band .students .student {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 7px;
    padding: 6px;
    border-radius: 50%;
    background-color: #263d83;
    color: #fff;
    font-family: 'omnes-pro', Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}
.recommended-games {
    flex: 1 1 0;
    width: 373px;
    height: 356px;
    margin: 0 0 55px 36px;
    padding: 20px 17px 28px 25px;
    border-radius: 17px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
    position: relative;
}
.recommended-games .controls {
    position: absolute;
    right: 0;
    width: 74px;
    background-color: #F8C710;
    height: 42px;
    border-top-left-radius: 17px;
    border-bottom-left-radius: 17px;
}
.recommended-games .controls span {
    display: inline-block;
    width: 50%;
    cursor: pointer;
    padding: 13px;
    font-size: 11px;
    font-weight: 600;
}
.recommended-games .controls span.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}
.recommended-games .controls span.forward {
    padding-left: 12px;
    text-align: left;
}
.recommended-games .controls span.forward:hover svg {
    margin-left: 5px;
}
.recommended-games .controls span.back {
    padding-right: 4px;
    text-align: right;
}
.recommended-games .controls span.back:hover svg {
    margin-right: 5px;
}
.recommended-games .controls span.disabled:hover svg {
    margin: 0;
}
.recommended-games h4 {
    width: 70%;
}
.recommended-games .thumbnails {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap:12px;
    margin-bottom: 20px;
}
.recommended-games .thumbnails img {
    border-radius: 15px;
}
.recommended-games button.assign {
    position: absolute;
    bottom: 20px;
    width: 88%;
    background-color: #F8C710;
    border: none;
    color: #3D3C3C;
    font-family: 'omnes-pro', Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 16px;
    border-radius: 15px;
}
.recommended-games button:hover {
    background-color: #F5BC00;
}

/* REPORT STATS (WORDS READ, TIME SPENT READING, LEADERSHIP DECISIONS) */
.overall-stats {
    display: flex;
    justify-content: start; /* set to space-between when Time Spent Reading is added back */
    gap: 8px;
}
.overall-statistic {
    display: flex;
    /* width: 353px; */
    width: 50%;
    padding: 25px;
    border-radius: 17px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.overall-statistic.individual {
    height: 136px;
}
.statistic-type {
    font-family: 'omnes-pro', Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.58px;
    color: #757575;
    box-sizing: border-box;
    text-align: start;
}
.statistic-value {
    font-family: 'omnes-pro', Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #263d83;
    box-sizing: border-box;
    text-align: start;
}
.statistic-image {
    height: 58px;
    margin-right: 15px;
}
.ranking {
    position: absolute;
    bottom: 10px;
    border-radius: 6px;
    background-color: #f5f5f5;
    width: 85%;
    text-align: left;
    color: #757575;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 7px 7px 7px 17px;
}
.ranking span {
    color: #263d83;
}
@media (max-width: 1024px) {
    .statistic-image {
      height: 40px;
    }
    .statistic-value {
      font-size: 20px;
    }
}
@media (max-width: 59.375em) {
    .overall-stats {
        flex-direction: column;
    }
    .overall-statistic {
        width: 100%;
    }
    .ranking {
        width: 90%;
    }
}
  

/* NEW REPORTS TABLE */
.new-reports {
    table-layout: fixed;
    width: 100%;
}
.new-reports,
.new-reports td,
.new-reports th {
    border: none;
    font-family: 'omnes-pro', Arial, Helvetica, sans-serif;
}
.new-reports th {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.33;
    letter-spacing: 0.45px;
    color: #757575;
    text-align: left;
    padding: 5px 5px 36px;
    background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 4px 1px;
    background-repeat: repeat-x;
    position: relative;
    vertical-align: top;
}
.new-reports th a {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #231f20;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.4px;
    margin-top: 8px;
    position: absolute;
    bottom: 10px;
}
.new-reports th a svg {
    margin-right: 7px;
}
.new-reports td {
    position: relative;
    padding: 23px 5px 23px 12px;
    text-align: left;
    background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%), linear-gradient(to bottom, black 33%, rgba(255,255,255,0) 0%);
    background-position: bottom, right;
    background-size: 4px 1px, 1px 4px;
    background-repeat: repeat-x, repeat-y;
    vertical-align: middle;
    color: #263d83;
    font-size: 22px;
    font-weight: 600;
}
.new-reports td.sel {
    font-size: 18px;
}
.new-reports td.sel svg {
    right: 8px;
}
.new-reports td.student-name {
    font-size: 15px;
    font-weight: 600;
    color: #3d3c3c;
}
.new-reports td.student-name span {
    opacity: 1 !important;
    font-weight: 600 !important;
    cursor: pointer;
}
.score-circle {
    position: absolute;
    top: 40%;
    display: inline-block;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: solid 3px;
    right: 17px;
}
.score-circle.red {
    border-color: #ef443c;
}
.score-circle.green {
    border-color: #99cc33;
}
.score-circle.yellow {
    border-color: #ffc80b;
}
.score-circle.red.full {
    background-color: #ef443c;
}
.score-circle.green.full {
    background-color: #99cc33;
}
.score-circle.yellow.full {
    background-color: #ffc80b;
}
.score-circle.red.half{
    background: linear-gradient(-90deg, #fff 50%, #ef443c 50%);
}
.score-circle.green.half {
    background: linear-gradient(-90deg, #fff 50%, #99cc33 50%);
}
.score-circle.yellow.half {
    background: linear-gradient(-90deg, #fff 50%, #ffc80b 50%);
}
.skill-select-mobile {
    display: none;
}
@media only screen and (max-width: 950px) {
    .new-reports {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .new-reports table {
        table-layout: fixed;
        width: 100%;
    }
    .new-reports th.student-name,
    .new-reports td.student-name {
        position: sticky;
        background-color: #fff;
        left: 0;
        z-index: 10;
    }
    .new-reports td.student-performance-score {
        font-size: 15px;
    }
    .new-reports td.student-name span,
    .new-reports th.student-name a {
        display: block;
        word-wrap: break-word;
        width: 85px;
        white-space: normal;
    }
}
@media (max-width: 550px) {
    .skill-select-mobile {
        display: block;
        position: sticky;
        top: 0;
        padding: 30px 0;
        text-align: center;
        background: #fff;
        z-index: 999
    }
    .skill-select-mobile select {
        height: 51px;
        padding: 10px 23px 13px 26px;
        border-radius: 17px;
        border: solid 1px #bebebe;
        background-color: #fff;
        width: 100%;
        appearance: none;
        background: url(svgs/arrow-select.svg) no-repeat calc(100% - 18px) center #fff;
    }
    .skill-card {
        display: flex;
        flex-direction: column;
        margin: 18px 0 50px 0;
        border-bottom: dashed 1px #7575755c;
        padding: 15px 0 30px 0;
    }
    .skill-card h4 {
        font-size: 1.125rem;
        color: #231f20;
    }
    .recommended-games {
        flex: 1 1 0;
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 15px 20px;
        border-radius: 17px;
        background-color: #fff;
        position: relative;
    }
    .recommended-games h4 {
        width: 100%;
        font-size: 16px;
    }
    .recommended-games .controls {
        display: none;
    }
    .recommended-games .thumbnails {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 6px;
        margin-bottom: 20px;
    }
    .recommended-games .thumbnails img {
        border-radius: 12px;
        height: auto;
    }
    .recommended-games button.assign {
        position: relative;
        width: 100%;
        height: 55px;
        margin-top: 20px;
        font-size: 14px;
    }
    .parallelogram {
        display: inline-block;
        margin-right: 20px;
        margin-top: -13px;
        width: 200px;
        height: 57px;
        transform: skew(20deg);
        padding: 14px;
        text-align: center;
        border-radius: 17px;
        cursor: pointer;
        transition: background-color ease-in-out 0.1s
    }
    .parallelogram span {
        display: inline-block;
        transform: skew(-20deg);
        color: #231f20;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.56;
        letter-spacing: 0.45px;
        margin-top: -7px;
    }
    .reports-tabs .container.fixed {
        display: flex;
        flex-direction: row;
    }
    .skill-info {
        margin-bottom: 25px;
    }
}

/***************************************************************************************************************************************************************************************/

/*ACCOUNT INFO FORM (BLUE & WHITE FORM)*/

/***************************************************************************************************************************************************************************************/
.account-info-form {
    background: none;
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 10%);
    max-width: 1100px;
    height: 700px;
}
.account-info-form .left-side {
    width: 52%;
    background-color: #263d83;
    padding: 30px;
    border-radius: 17px 0 0 17px;
}
.account-info-form .right-side {
    width: 48%;
    background-color: #fff;
    padding: 120px 50px 0 50px;
    border-top-right-radius: 17px;
    border-bottom-right-radius: 17px;
}
.account-info-form .left-side img {
    width: 100px;
    height: auto;
}
.account-info-form .left-side h3 {
    color: #4dbde5;
    font-size: 36px;
    margin: 50px 60px 20px 35px;
    line-height: 1.33;
    font-weight: bold;
}
.account-info-form .left-side p {
    line-height: 28px;
    font-size: 16px;
    color: #fff;
    margin: 10px 60px 0 35px;
  }
.account-info-form .left-side p a {
    color: #fff;
    font-weight: bold;
}
.account-info-form form {
    padding: 0;
}
.account-info-form form .row {
    display: flex;
    justify-content: space-between;
}
.account-info-form form .row input {
    width: 48%;
}
.standard-fields.account-info-form input,
.standard-fields.account-info-form select {
    border-radius: 17px;
    height: 55px;
    border: solid 1px #bebebe;
    box-shadow: 0 5px 15px 0 rgb(35 31 32 / 20%);
}
.account-info-form select option:not(:first-of-type) {
    color: #222;
}
.account-info-form input.invalid,
.account-info-form select.invalid {
    border: 2px solid #c62828;
}
.account-info-form input[type=checkbox] {
    width: 15px;
    height: 15px;
    margin-right: 10px;
}
.account-info-form input.invalid[type=checkbox] {
    outline: 1px solid #c62828;
    outline-style: auto;
}
.account-info-form span {
    color: #757575;
    font-size: 13px;
}
.account-info-form span a {
    color: #263d83;
    font-weight: 600;
}
.account-info-form .right-side .btn {
    width: 100%;
    border: none;
    border-radius: 17px;
    box-shadow: 0 5px 15px 0 rgb(35 31 32 / 20%);
    background-color: #ffc80b;
    margin-right: 20px;
    margin-top: 33px;
    padding: 15px 30px;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    letter-spacing: 0.6px;
    font-size: 16px;
    font-weight: 600;
    color: #231f20;
    text-align: center;
}
.account-info-form .right-side h5 {
    margin-top: 0;
    text-align: center;
    color: #757575;
    font-size: 16px;
    letter-spacing: 0.5px;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-weight: 600;
}
.account-info-form .right-side h5 span {
    color: #263d83;
    font-size: 16px;
}
.account-info-form .right-side h5 a {
    font-weight: 600;
    color: #263D83;
}
.account-info-form .right-side h3 {
    padding: 0 48px;
    text-align: center;
}
@media only screen and (max-width: 59.375em) {
    .account-info-form {
        height: auto;
    }
    .account-info-form .left-side {
        width: 100%;
        border-radius: 0;
    }
    .account-info-form .right-side {
        width: 100%;
        border-radius: 0;
        padding: 50px;
    }
    .account-info-form .right-side h3 {
        padding: 0;
    }
}

@media only screen and (max-width: 34.375em) {
    .account-info-form form .row {
        flex-direction: column;
    }
    .account-info-form form .row input {
        width: 100%;
    }
    .account-info-form .left-side h3 {
        font-size: 29px;
        margin: 30px 0 10px 30px;
    }
    .account-info-form .left-side p {
        font-size: 13px;
        margin: 0 30px;
    }
}

.btn.red {
    background: #d9534f;
    border-color: #d9534f;
  }
  .flex-align-end {
    justify-content: flex-end;
  }
  .student-lightbox .btn {
    width: inherit;
  }
  .submit-btn {
    margin-right: 10px;
  }
  .add-students ul span {
    color: #3D3C3C;
    display: block;
    font: 500 1.125rem 'omnes-pro',Arial, Helvetica, sans-serif; /*18*/
    padding: 6px 20px;
    cursor: pointer;
  }

  .add-students ul span:hover {
    color: #263D83;
  }

  .invite-option h3 {
    margin-bottom: 20px;
  }

  .input-group select{
    margin-bottom: 0;
  }

  /* reducing the font-size for the popup */
  .invitation-wrapper h3 {
    font-size: 1.2rem;
  }

  .invitation-wrapper h2 {
    margin-bottom: 18px;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .kebab-menu ul {
    list-style: none;
    margin: 0;
    z-index: 1;
    display: none;
    position: absolute;
    background: #FFF;
    box-shadow: 0 10px 20px rgba(0,0,0,.1);
    padding: 12px;
    text-align: left;
    width: 180px;
  }

  .kebab-menu:hover ul {
    display: block;
  }

  .kebab-menu ul span:hover {
    color: #263D83;
  }

  .print-cards ul {
      margin: 0 0 20px;
      padding: 0;
  }

  .print-cards li {
      background: url('/img/logo.png') no-repeat calc(100% - 20px) 20px;
      background-size: 55px auto;
      border: 3px dashed #979797;
      list-style: none;
      margin-bottom: 20px;
      padding: 20px 86px 10px 36px;
      width: 49%;
  }

  .print-cards dl {
      font-size: 1rem; /*16*/
      justify-content: flex-start;
      line-height: 1.1;
      margin: 0;
  }

  .print-cards dt {
      margin: 0 45px 10px 0;
      width: 74px;
  }

  .print-cards dd {
      font-weight: bold;
      margin: 0 0 10px;
      width: calc(100% - 45px - 74px);
      word-break: break-all;
  }

  .print-cards .btn {
      margin-bottom: 38px;
  }

  .sort-button-cell {
    padding-left: 15px !important;
  }

  .error-banner {
    margin-bottom: 5px;
  }

/* NEW PAGE STYLES */

.page-header {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    background-color: #263d83;
    padding: 40px 15%;
  }

  .page-header {
    color: #fff;
  }

  .page-header-title {
    font-size: 24px;
    font-weight: 600;
  }

  .page-header-options {
    margin: 25px 0;
    display: flex;
    justify-content: space-between;
  }

  .page-dropdown {
    position: relative;
    display: inline-block;
  }

  .page-dropdown-button {
    color: #231f20;
    background-color: #ffc80b;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 21px;
    border-radius: 17px;
    border: none;
  }

  .page-dropdown-button:focus+.page-dropdown-content,
  .page-dropdown:hover .page-dropdown-content {
    display: block;
  }

  .page-dropdown-arrow {
    margin-left: 20px;
  }

  .page-dropdown-content {
    display: none;
    position: absolute;
    min-width: 300px;
    background: #ffffff;
    color: #3d3c3c;
    border-radius: 10px;
    box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
  }

  .page-dropdown-option {
    border: none;
    background: inherit;
    font-size: 16px;
    text-align: left;
    margin: 10px 0;
  }

  .page-dropdown-option-intercom-google-add-class {
    border: none;
    background: inherit;
    font-size: 16px;
    text-align: left;
    margin: 10px 0;
  }

  .page-dropdown-option-intercom-clever-add-class {
    border: none;
    background: inherit;
    font-size: 16px;
    text-align: left;
    margin: 10px 0;
  }


  .page-dropdown-option-intercom-form-add-class {
    border: none;
    background: inherit;
    font-size: 16px;
    text-align: left;
    margin: 10px 0;
  }


  .underline-button {
    color: #fff;
    border: none;
    border-bottom: 2px solid #ffc80b;
    font-size: 16px;
    font-weight: 600;
    background: inherit;
  }

  .listing-table {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    width: 80%;
    margin: 20px 10%;
  }

  .listing-table th,
  .listing-table td {
    width: 24%;
    padding: 20px;
    font-size: 16px;
  }

  .listing-table th,
  .listing-table td {
    width: 24%;
    padding: 20px;
    font-size: 16px;
  }

  .listing-table th:first-child,
  .listing-table td:first-child {
    font-size: 22px;
    font-weight: 600;
  }

  .listing-table td:first-child a {
    color: #263d83;
    border-bottom: 2px solid #ffc80b;
  }

  .listing-table th:last-child,
  .listing-table td:last-child {
    width: 5%;
  }

  .listing-table th {
    text-align: left;
    color: #757575;
  }

  .listing-table thead tr,
  .listing-table tbody tr {
    background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%), linear-gradient(to bottom, black 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 5px 1px;
    background-repeat: repeat-x;
    /* border-top: 1.5px dotted #757575;
    border-bottom: 1.5px dotted #757575; */
  }

  .refresh-button {
    background: inherit;
    border: none;
    padding-bottom: 2px;
    border-bottom: 2px solid #ffc80b;
  }

  .progressbar-container {
    display: flex;
  }

  .progressbar-max {
    display: inline-block;
    position: relative;
    background: #f5f5f5;
    border: 2px solid #f5f5f5;
    border-radius: 6px;
    padding: 0;
    margin: auto 0 auto 20px;
    width: 250px;
    height: 30px;
  }

  .progressbar-value {
    border-radius: 6px;
    position: absolute;
    left: 0;
    height: 100%;
    background: #4dbde5;
    padding: 0;
    margin: 0;
    border-radius: 6px;
  }

  .student-progress-value {
    border-radius: 6px;
    position: absolute;
    left: 0;
    height: 100%;
    padding: 0;
    margin: 0;
    background: #ffc80b;
  }

  .progressbar-container p {
    font-size: 40px;
    font-weight: bold;
    margin: 0;
  }

/* NEW STUDENT DASHBOARD */
.student-dashboard-hero {
    text-align: start;
    margin-bottom: 0;
}
.student-dashboard-hero p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.63;
    color: #fff;
}
.student-progress {
    display: flex;
    margin: 0 auto 76px;
    padding: 20px;
    background: #fff;
}
.student-progress h1 {
    font-size: 34px;
    margin-bottom: 10px;
    font-weight: bold;
}
.student-progress img {
    margin-right: 20px;
}
.student-activity-library h1 {
    font-family: 'omnes-pro', Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.33;
    color: #3d3c3c;
}
.student-activity-library p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.63;
    color: #3d3c3c;
    width: 65%;
}
.student-acitivities {
    margin-top: 41px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 30px;
}
.activity-card {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 17px;
    padding: 34px 41px 85px;
    position: relative;
}
.activity-card .activity-actions {
    position: absolute;
    bottom: 35px;
}
.activity-card img {
    width: 100%;
    height: 50%;
    object-fit: cover;
    border-radius: 17px;
    margin-bottom: 34px;
}
.activity-card h1 {
    color: #263d83;
}
.activity-card p {
    width: 100%;
}
.class-carousel .controls {
    display: inline;
}
.class-carousel .controls span {
    font-size: 14px;
    margin-right: 10px;
    cursor: pointer;
}
.class-carousel .controls span.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.class-carousel .classname {
    display: inline;
    font-family: 'omnes-pro', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.54px;
    color: #3d3c3c;
}


/***************************************************************************************************************************************************************************************/

/*ONBOARDING CHECKLIST STYLES*/

/***************************************************************************************************************************************************************************************/

.onboarding-container {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    background: rgba(61, 61, 61, 0.66);
}
.onboarding-container.no-background {
    background: none;
    position: unset;
}
.onboarding-card {
    background-color: white;
    width: 386px;
    height: 409px;
    padding: 49px 30px 0;
    border-radius: 17px;
    box-shadow: 0 10px 10px 10px rgb(0 0 0 / 10%);
    position: fixed;
    bottom: 100px;
    right: 98px;
    text-align: center;
}

.onboarding-card h3 {
    font-size: 24px;
    letter-spacing: 0.6px;
    line-height: 1.33;
}

.onboarding-card .yellow-btn {
    display: block;
    margin: 0 auto;
    margin-bottom: 24px;
}

.onboarding-card .close {
    top: 0;
    right: 0;
    background-color: #F8C710;
    color: #231F20;
    padding: 20px 25px;
    font-size: 1.2rem;
    border-bottom-left-radius: 17px;
    border-top-right-radius: 17px;
    position: absolute;
    border: none;
}

.onboarding-card img {
    height: 112px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

/***************************************************************************************************************************************************************************************/

/*STRENGTHS FINDER QUIZ STYLES*/

/***************************************************************************************************************************************************************************************/
.strengths-finder-banner {
    height: 265px;
    border-radius: 17px;
    margin: 0 auto 70px;
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 20%);
    padding: 30px 90px;
    max-width: 1100px;
    background-color: #fff;
}
.strengths-finder-banner.not-completed {
    background-image: url(img/family_happy.png);
    background-position: calc(100% - 60px) 30px;
    background-repeat: no-repeat;
    background-size: 195px auto;
    height: 305px;
    padding: 40px 90px 30px;
}
.strengths-finder-banner h1 {
    color: #231f20;
    font-weight: bold;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
}
.strengths-finder-banner p {
    color: #231f20;
    font-size: 16px;
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    line-height: 1.63;
    width: 74%;
}
.strengths-finder-banner .yellow-btn {
    height: 51px;
}
.strengths-finder-banner .quiz-info {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    width: 60%;
    position: relative;
}
.strengths-finder-banner .quiz-info span {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.74px;
    text-transform: uppercase;
    color: #3d3c3c;
}
.strengths-finder-banner .quiz-info h2 {
    color: #231f20;
    font-size: 24px;
    font-weight: 600;
    margin-top: 13px;
}
.strengths-finder-banner .quiz-info .yellow-underline {
    color: #3d3c3c;
    position: absolute;
    bottom: 50px;
    letter-spacing: 0.6px;
}
.strengths-finder-banner .quiz-info .strength-title {
    color: #263d83;
    font-size: 24px;
    font-weight: 600;
    text-transform: none;
}
.strengths-finder-banner .quiz-info .comma {
    font-size: 24px;
    font-weight: 600;
    text-transform: none;
    margin-left: -5px;
}
.strengths-review {
    margin: 25px auto;
}
.strengths-review .row {
    display: flex;
    margin-bottom: 25px;
}
.strengths-review .row:first-of-type {
    margin-left: 50px;
}
.strengths-review .row .strength-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    height: 69px;
    width: 69px;
    margin: 0 30px 0 0;
    cursor: default;
    flex: unset;
}
.strengths-review .row .strength-circle:hover {
    border: 3px solid #ffc80b;
}
.strengths-review .row img {
    width: auto;
    height: 45px;
}
.strengths-finder-quiz {
    background: #fff;
    padding: 50px;
    width: 65%;
    border-radius: 17px;
    margin: 50px auto 0;
}
.strengths-finder-quiz h3.title {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    color: #263d83;
    text-transform: uppercase;
}
.strengths-row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 30px;
    margin: 0px auto 50px;
}
.strength-circle {
    flex: 1;
    border-radius: 50%;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #ffc80b;
    cursor: pointer;
    padding: 1.5%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: content-box;
}
.strength-circle::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.strength-circle:hover,
.strength-circle.selected {
    border: 3px solid #263d83;
}
.strength-circle.disabled {
    pointer-events: none;
    opacity: 0.7;
}
.strength-circle img {
    width: auto;
    /* height: 50px; */
}
.strength-circle.disabled img {
    opacity: 0.5;
}
.strength-circle svg {
    font-size: 3em;
    height: auto;
    color: #263d83;
}
.strength-circle.finished {
    background-color: #ffc80b;
}
.strengths-row .connecting-line {
    width: 5%;
    height: 4px;
    background: #ffc80b;
    border-radius: 17px;
}
.quiz-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.quiz-header {
    padding: 20px 30px;
    text-align: center;
    margin-bottom: 15px;
    color: #263d83;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
}
.quiz-header span {
    font-style: italic;
    font-size: 28px;
    font-weight: 500;
}
.quiz-header h3 {
    margin: 20px 0;
    font-size: 34px;
    font-weight: bold;
}
.quiz-body {
    width: 75%;
}
.quiz-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.quiz-option {
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    width: 49%;
    min-height: 150px;
    cursor: pointer;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 17px;
    background-color: #263d83;
    color: #fff;
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 20%);
}
.quiz-option:hover,
.quiz-option.selected {
    outline: 4px solid #ffc80b;
}
.quiz-option-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.quiz-option-title span {
    font-size: 22px;
    font-weight: bold;
}
.quiz-option-status {
    display: inline-block;
    margin-right: 20px;
}
.quiz-option-status svg {
    font-size: 30px;
}
.quiz-option p {
    line-height: 1.5;
    font-size: 14px;
    font-family: 'roboto', Arial, Helvetica, sans-serif;;
}
.quiz-controls {
    background: none;
    border: none;
    font-size: 50px;
    color: #263d83;
}
.quiz-actions {
    text-align: center;
    margin-top: 20px;
}
.quiz-actions .yellow-btn {
    height: 51px;
}
.quiz-review-actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 30px;
}
.strengths-finder-review h1 {
    font-size: 49px;
    font-weight: bold;
    text-align: center;
}
.locked-strengths-list {
    padding: 20px 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.locked-strength {
    width: 50%;
    display: flex;
    justify-content: space-around;
    margin-bottom: 40px;
}
.locked-strength .strength-circle {
    pointer-events: none;
    flex: unset;
    margin: 0;
    padding: 20px;
    width: 88px;
    height: 88px;
}
.locked-strength .strength-circle::before {
    content: none;
}
.locked-strength .strength-details {
    width: 70%;
}
.locked-strength .strength-details .virtue {
    color: #263d83;
    font-size: 22px;
    font-weight: 500;
    font-style: italic;
    font-family: 'omnes-pro';
}
.locked-strength .strength-details .strength-title {
    color: #263d83;
    font-size: 22px;
    font-weight: 600;
    font-family: 'omnes-pro';
    margin-bottom: 10px;
}
.locked-strength .strength-details .strength-description {
    font-size: 14px;
    line-height: 1.5;
    color: #231f20;
    width: 215px;
}
.strengths-finder-review .copyright p {
    text-align: center;
    color: #3d3c3c;
    font-size: 16px;
    font-family: 'omnes-pro';
    margin: 40px 0 0;
}

.sfq-confirmation .lightbox {
    width: 500px;
    text-align: center;
}
.sfq-confirmation .standard-popup-content {
    height: 557px;
    font-family: 'omnes-pro',Arial, Helvetica, sans-serif;
    padding: 30px 45px;
}
.sfq-confirmation .standard-popup-content svg {
    font-size: 90px;
    margin-bottom: 10px;
}
.sfq-confirmation .standard-popup-content h1 {
    font-size: 49px;
    font-weight: bold;
}
.sfq-confirmation .standard-popup-content p {
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    color: #263d83;
}
.sfq-confirmation .standard-popup-content .yellow-btn {
    height: 51px;
    margin-top: 20px;
}

@media (max-width: 1366px) {
    .locked-strengths-list {
        padding: 20px 35px;
    }
}

@media (max-width: 1050px) {
    .strengths-finder-quiz {
        width: 80%;
    }
    .quiz-options {
        flex-direction: column;
    }
    .quiz-option {
        width: 100%;
    }
    .locked-strengths-list {
        padding: 20px;
    }
    .strengths-row .connecting-line {
        display: none;
    }
}

@media (max-width: 59.375em) {
    .strengths-finder-quiz {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }
    .quiz-header {
        padding: 20px 0;
    }
}

@media (max-width: 768px) {
    .strengths-finder-quiz {
        padding: 25px;
    }
    .strengths-row {
        margin-bottom: 10px;
    }
    .quiz-header span {
        font-size: 24px;
    }
    .quiz-header h3 {
        font-size: 30px;
    }
    .quiz-controls {
        font-size: 40px;
    }
    .quiz-body {
        width: 85%;
    }
    .locked-strengths-list {
        flex-direction: column;
    }
    .locked-strength {
        width: 100%;
        justify-content: start;
    }
    .locked-strength .strength-circle {
        margin-right: 30px;
    }
    .locked-strength .strength-details .strength-description {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .strengths-row {
        padding: 0;
    }
    .quiz-container {
        justify-content: center;
    }
    .quiz-controls {
        display: none;
    }
    .strength-circle.disabled {
        opacity: 0.5;
    }
}

@media (max-width: 480px) {
    .quiz-review-actions {
        flex-direction: column-reverse;
        align-items: center;
    }
    .quiz-review-actions .yellow-underline {
        margin-top: 20px;
    }
    .locked-strengths-list {
        padding: 10px;
    }
    .locked-strength {
        justify-content: space-between;
    }
    .locked-strength .strength-circle {
        margin-right: 0;
    }
}


/***************************************************************************************************************************************************************************************/

/* BADGING */

/***************************************************************************************************************************************************************************************/

.leaderboard__header {
    width: 100%;
    background-color: #263D82;
    min-height: 338px;
    display: flex;
    justify-content: space-between;
    padding: 30px 190px 0;
    position: relative;
}
.leaderboard__header .header-content {
    margin: 50px 0;
    width: 100%;
}
.leaderboard__header .header-content h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.33;
    color: #fff;
}
.leaderboard__header .header-content p {
    color: #fff;
}
.leaderboard__header .header-image {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.leaderboard__header .header-image img {
    border: none;
    height: 86%;
}
.leaderboard__header select {
    width: 30%;
    height: 51px;
    padding: 10px 39px 13px 26px;
    border-radius: 17px;
    border: solid 1px #bebebe;
    background-color: #fff;
    margin-right: 20px;
    margin-bottom: 0;
}
.leaderboard__header .standard-fields {
    display: flex;
    align-items: center;
    margin-top: 55px;
}
.leaderboard__header .yellow-underline {
    color: #fff;
}
.badge-suggestion {
    position: relative;
    margin-top: 50px;
    background: #fff;
    border-radius: 17px;
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 10%);
    padding: 40px 37px;
}
.badge-suggestion .close {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #F8C710;
    color: #231F20;
    padding: 20px 25px;
    font-size: 1.2rem;
    border-bottom-left-radius: 20px;
    border: none;
    border-top-right-radius: 17px;
}
.badge-suggestion-content {
    display: flex;
}
.badge-suggestion-content img {
    width: 170px;
    border-radius: 50%;
    margin-right: 60px;
    object-fit: cover;
}
.badge-suggestion-content h1 {
    font-size: 34px;
    font-weight: bold;
    width: 78%;
}
.badge-suggestion-content h1 span {
    color: #c30275;
}
.national-leaderboard-actions {
    margin: 70px 0 30px;
}
.national-leaderboard-actions .yellow-btn {
    margin-right: 40px;
    padding: 14px 30px;
}
.national-leaderboard-actions .yellow-underline {
    color: #263d83;
    font-size: 22px;
    font-weight: 600;
}
.national-leaderboard-actions .yellow-underline svg {
    margin-left: 10px;
    font-size: 11px;
    color: #3d3c3c;
}
.class-leaderboard {
    margin-top: 50px;
    width: 100%;
    font-family: 'omnes-pro';
}
.class-leaderboard thead {
    background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 4px 1px;
    background-repeat: repeat-x;
    text-align: left;
}
.class-leaderboard th {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.33;
    letter-spacing: 0.45px;
    color: #757575;
    padding: 30px 0;
}
.class-leaderboard th.rank {
    width: 14%;
    padding-left: 20px;
}
.class-leaderboard th.student-name {
    width: 27%;
}
.student-classmates {
    background: transparent;
    width: fit-content;
    font-weight: 600;
    color: #231f20;
    font-size: 16px;
    border: none;
    border-bottom: solid 2px #ffc80b;
    font-family: 'omnes-pro';
}
.class-leaderboard tr {
    background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 4px 1px;
    background-repeat: repeat-x;
}
.class-leaderboard td {
    padding: 30px 0;
    display: table-cell;
    vertical-align: middle;
}
.class-leaderboard td.rank {
    width: 14%;
    padding-left: 40px;
    color: #231f20;
    font-size: 22px;
    font-weight: 600;
}
.class-leaderboard td.student-name {
    width: 27%;
}
.class-leaderboard td.student-name div {
    color: #263d83;
    text-decoration: none;
    border-bottom: 3px solid #F8C710;
    display: inline;
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
}
.class-leaderboard td.student-name svg {
    color: #3d3c3c;
    font-size: 13px;
    margin-left: 5px;
}
.class-leaderboard td.earned-badges {
    color: #231f20;
    font-size: 22px;
    font-weight: 600;
    padding-left: 40px;
    position: relative;
    display: flex;
    align-items: center;
}
.earned-badges-row {
    display: inline-flex;
    justify-content: flex-start;
    gap: 10px;
    padding-left: 100px;
}
.earned-badges-row .badge {
    width: 55px;
    height: 55px;
    position: relative;
}
.earned-badges-row .badge:hover .badge-tooltip {
    display: block;
}
.earned-badges button {
    outline: none;
    border: none;
    background: none;
    position: absolute;
    right: 30px;
    font-size: 26px;
}
.badge-tooltip {
    display: none;
    position: absolute;
    background: #263d83;
    padding: 28px 43px 30px 47px;
    bottom: 65px;
    left: -125px;
    width: 300px;
    border-radius: 17px;
    text-align: center;
}
.badge-tooltip img {
    height: 62px;
    margin-bottom: 12px;
}
.badge-tooltip p {
    color: #f5f5f5;
    margin-bottom: 10px;
}
.badge-tooltip p:nth-of-type(2) {
    font-size: 16px;
}
.student-badges .standard-popup-header {
    background: #fff;
    padding: 0;
  }
.student-badges .standard-popup-content {
    padding: 50px 55px 40px;
}
.badge-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.badge-tile {
    min-height: 170px;
    width: 45%;
    border-radius: 17px;
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 20%);
    background-color: #fff;
    padding: 20px 25px;
    margin: 0 20px 30px 22px;
    font-family: 'omnes-pro';
    cursor: pointer;
}
.badge-details {
    display: flex;
    margin-bottom: 30px;
}
.badge-details img {
    height: 100px;
    margin-right: 20px;
}
.badge-info h3 {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.31;
    margin-bottom: 5px;
}
.badge-info p {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: 0.49px;
}
.badge-tiers-container {
  margin-top: 30px;
}
.badge-progress span {
    display: block;
    font-weight: normal;
    font-style: italic;
    line-height: 2;
    font-size: 12px;
    font-family: 'roboto';
}
.badge-tiers {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.badge-tiers svg {
    font-size: 30px;
}
.badge-tiers svg.earned {
    color: #99cc33;
}
.badge-tiers svg.pending {
    color: #757575;
    opacity: 0.2;
}
.badge-progress {
    color: #3d3c3c;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.6px;
}
.badge-progress .progressbar-max {
    height: 20px;
    margin-left: 0;
    margin-top: 6px;
    width: 100%;
}
.badge-collection__header {
    width: 100%;
    background-color: #263D82;
    padding: 30px 190px 0;
    height: 245px;
}
.badge-collection__header .header-content {
    margin: 50px 0;
    width: 100%;
}
.badge-collection__header .header-content h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.33;
    color: #fff;
}
.badge-collection__header .header-content p {
    color: #fff;
}
.badge-categories-container {
    /* padding: 50px 190px 0; */
    padding: 50px 0;
    width: 79%;
    margin: 0 auto;
}
.badge-category {
    margin-bottom: 50px;
}
.badge-category h1 {
    color: #3d3c3c;
    font-size: 36px;
    font-weight: bold;
}
.badges-popup .lightbox {
    width: 525px;
    max-height: 90%;
    text-align: center;
}
.badges-popup .standard-popup-header {
    background: #263d83;
    padding: 0;
}
.badges-popup .standard-popup-content {
    background: #263d83;
    padding: 30px 65px 52px 65px;
}
.badges-popup .standard-popup-content h1 {
    font-size: 42px;
    color: #fff;
}
.badges-popup .standard-popup-content h2 {
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    border-bottom: none;
}
.badges-popup .standard-popup-content h2:first-of-type {
    margin-bottom: 0;
}
.badges-popup .standard-popup-content .yellow-btn {
    height: 68px;
    font-size: 21px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 35px;
}
.badges-popup .standard-popup-content .yellow-underline {
    color: #fff;
}
.badges-popup .badge-details {
    display: block;
}
.badges-popup .badge-details p {
    color: #fff;
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    line-height: 1.63;
    text-align: center;
}
.badge-carousel {
    position: relative;
}
.badges-popup .badges {
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    margin: 20px 0;
}
.badges-popup .badge {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    display: inline-flex;
}
.badges-popup .badge img {
    height: 120px;
    width: 120px;
}
.badges-popup .badge.active {
    width: 180px;
    height: 180px;
    position: absolute;
    right: 110px;
    transition: .6s ease-in-out left;
}
.badges-popup .badge.active img {
    width: 180px;
    height: 180px;
}
.badge-carousel-controls {
    position: absolute;
    bottom: 69px;
    color: #ffc80b;
    font-size: 45px;
    cursor: pointer;
}
.badge-carousel-controls.prev {
    left: -20px;
}
.badge-carousel-controls.next {
    right: -20px;
}
.webgl-content{
    background-color: black;
}

@media (max-width: 1366px) {
    .badge-collection__header {
        padding: 30px 115px 30px;
    }
    .badge-categories-container {
        width: 90%;
    }
    .leaderboard__header {
        padding: 30px 115px 0;
    }
}

@media (max-width: 59.375em) {
    .badge-collection__header {
        padding: 20px;
    }
}