html {
    background: #fff;
    -webkit-font-smoothing: subpixel-antialiased;
    min-height: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}
body {
    background: #fff;
    color: #2b2a35;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 auto;
    max-width: 2000px;
    min-height: 100%;
    overflow-x: hidden;
    padding: 0;
    word-wrap: break-word;
}
a,
.link {
    -webkit-appearance: none;
    color: #5c6ecd;
    cursor: pointer;
    display: inline-block;
    position: relative;
    -webkit-transition: color 0.3s ease 0s;
    -moz-transition: color 0.3s ease 0s;
    transition: color 0.3s ease 0s;
    text-decoration: none;
}
a:hover,
.link:hover {
    color: #334ac0;
}
.link.reverse {
    color: #334ac0;
}
.link.reverse:hover {
    color: #2b2a35;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #2b2a35;
    font-weight: 400;
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 44px;
    font-weight: 500;
}
h2 {
    font-size: 42px;
}
h3 {
    font-size: 30px;
}
h4 {
    font-size: 18px;
}
h5 {
    font-size: 14px;
}
h6 {
    font-size: 12px;
}
ul {
    /*list-style: none;*/
    margin: 0;
    /*padding: 0;*/
}
ul li {
    float: left;
    position: relative;
    width: 100%;
}
ul li:marker {
    position: absolute;
    top: 50%;
}
p {
    clear: both;
    float: left;
    margin: 10px 0;
    position: relative;
    width: 100%;
}
iframe {
    max-width: 100%!important;
}
img {
    display: block;
    height: auto !important;
    max-width: 100%;
}
math {
    font-size: 18px;
}
.ccFont {
    font-family: 'ccFont';
}
.blenFont {
    display: block;
    font-family: 'blenFont';
    line-height: 1;
}
.eyeIcon {
    color: #8f919d;
    font-size: 24px;
    position: relative;
}
.eyeIcon.active {
    color: #586ee0;
}
[x-cloak] {
    display: none !important;
}
.noSelection {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.pageLoaderContainer {
    -webkit-align-items: center;
    align-items: center;
    background-color: rgba(255,255,255,0.8);
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    height: 100vh;
    left: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    top: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100vw;
    z-index: 1000;
}
.pageLoaderContainer.active {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}
.pageLoader,
.pageLoader:after {
    border-radius: 50%;
    width: 110px;
    height: 110px;
}
.pageLoader {
    margin: 60px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 10px solid rgba(139,81,237, 0.2);
    border-right: 10px solid rgba(139,81,237, 0.2);
    border-bottom: 10px solid rgba(139,81,237, 0.2);
    border-left: 10px solid #8b51ed;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
.pageLoaderMessage {
    margin-bottom: 200px;
    position: absolute;
    text-align: center;
    width: 100%;
}
@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.ccPage {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: table;
    table-layout: fixed;
    margin: 0 auto !important;
    max-width: 1440px;
    padding: 0 30px;
    width: 100%;
}
.generalButton {
    -webkit-appearance: none;
    -webkit-align-items: center;
    align-items: center;
    background-color: #fff;
    background-image: none !important;
    border: 1px solid #334ac0;
    border-radius: 5px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #334ac0;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 16px;
    font-weight: 600;
    min-height: 50px;
    -webkit-justify-content: center;
    justify-content: center;
    line-height: 1;
    min-width: 140px;
    outline: none !important;
    padding: 0 35px;
    position: relative;
    text-align: center;
    text-shadow: none;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.generalButton.introjs-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.generalButton:not(.introjs-disabled):hover {
    background-color: #334ac0;
    color: #fff;
    text-shadow: none;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.generalButtonSmall {
    font-size: 12px;
    min-height: 25px;
    min-width: 60px;
    padding: 0 15px;
}
.introjs-tooltipReferenceLayer * {
    font-family: 'GothamGreek', sans-serif !important;
}
.introjs-tooltip-header {
    padding: 0;
}
.introjs-skipbutton {
    padding: 3px 10px;
    position: absolute;
    right: 0;
    top: 0;
}
.introjs-tooltipbuttons {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.introjs-tooltipbuttons::after {
    display: none !important;
}
.whiteButton {
    -webkit-align-items: center;
    align-items: center;
    border: none;
    display: -webkit-flex;
    display: flex;
    min-height: 40px;
    min-width: 1px;
}
.general .text,
.whiteButton .text {
    float: left;
    position: relative;
}
.generalButton .icon,
.whiteButton .icon {
    float: left;
    margin-left: 15px;
    position: relative;
}
.generalButton .leftIcon,
.whiteButton .leftIcon {
    float: left;
    margin-right: 15px;
    position: relative;
}
.whiteButton .playIcon {
    font-size: 20px;
}
.blueButton {
    -webkit-align-items: center;
    align-items: center;
    background-color: #5c6ecd;
    border: none;
    -webkit-box-shadow: 0 0 10px -5px #000;
    -moz-box-shadow: 0 0 10px -5px #000;
    box-shadow: 0 0 10px -5px #000;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    font-weight: 500;
    min-height: 40px;
    min-width: 1px;
}
.blueButton:hover {
    background-color: #334ac0;
}
.blueButton.disabled {
    opacity: 0.4;
    pointer-events: none;
}
.plainButton {
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: #5c6ecd;
    cursor: pointer;
    float: left;
    padding: 0;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.plainButton.disabled {
    color: #767676 !important;
    pointer-events: none;
}
.plainButton:hover {
    color: #334ac0;
}
.buttonWithIcon {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    float: left;
    position: relative;
}
.buttonWithIcon .text {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding-right: 10px;
    position: relative;
}
.buttonWithIcon .icon {
    float: left;
    position: relative;
}
.generalPreviousButton,
.generalNextButton {
    -webkit-appearance: none;
    -webkit-align-items: center;
    align-items: center;
    background-color: #5c6ecd;
    background-image: none !important;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 10px -5px #000;
    -moz-box-shadow: 0 0 10px -5px #000;
    box-shadow: 0 0 10px -5px #000;
    color: #fff;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 16px;
    font-weight: 500;
    min-height: 50px;
    -webkit-justify-content: center;
    justify-content: center;
    line-height: 1;
    min-width: 140px;
    outline: none !important;
    overflow: hidden;
    padding: 0 35px;
    position: relative;
    text-align: center;
    text-shadow: none;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.generalPreviousButton .icon,
.generalNextButton .icon {
    font-family: 'ccFont';
    font-size: 24px;
}
.generalPreviousButton .icon {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}
.generalPreviousButton .text,
.generalNextButton .text {
    float: left;
    font-size: 16px;
    font-weight: 700;
    position: relative;
}
.generalPreviousButton .text {
    margin-left: 20px;
}
.generalNextButton .text {
    margin-right: 20px;
}
.generalPreviousButton:hover,
.generalNextButton:hover {
    background-color: #334ac0;
    color: #fff;
}
.generalPreviousButton.disabled,
.generalNextButton.disabled {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    opacity: 0.2;
    pointer-events: none;
}
.greyBg {
    background-color: #f6f6f9;
}
.blueBg {
    background-color: #586ee0;
}
.whiteColor {
    color: #fff;
}
.livewireWrapper {
    float: left;
    position: relative;
    width: 100%;
}
.swal2-popup .swal2-title {
    font-size: 20px !important;
}
/*.swal2-icon.swal2-warning,
.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
    font-size: 12px !important;
}*/
/*--- TOP NOTIFICATIONS BAR ---*/
#ccTopNotifications {
    float: left;
    position: relative;
    width: 100%;
}
.notificationContainer {
    background-color: #cce5ff;
    border: 1px solid #b8daff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #004085;
    float: left;
    padding: 20px;
    position: relative;
    width: 100%;
}
.notificationContainer.success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}
.notificationContainer.danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}
.notificationContainer.warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}
.notificationContainer.info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}
.clickToActionLink:hover {
    text-decoration: underline;
}
/*--- VERTICAL MENU ---*/
.verticalMenuContainer {
    float: left;
    position: relative;
    width: 100%;
}
.verticalMenu {
    /*border-bottom: 2px solid #fff;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 0 25px;
    position: relative;
    width: 100%;
}
.verticalMenuContainer.grey .verticalMenu {
    border-color: #e5e5e5;
}
.verticalMenu::after {
    background-color: #fff;
    bottom: 2px;
    content: '';
    left: 0;
    height: 2px;
    position: absolute;
    width: 100%;
}
.verticalMenuContainer.grey .verticalMenu::after {
    background-color: #e5e5e5;
}
.verticalMenuItem {
    float: left;
    padding: 0 0 2px;
    position: relative;
}
.verticalMenuItem a {
    border-bottom: 2px solid transparent;
    color: #fff;
    cursor: pointer;
    float: left;
    margin-bottom: -2px;
    padding: 12px 25px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.verticalMenuContainer.grey .verticalMenuItem a {
    color: #767676;
}
.verticalMenuItem.active a,
.verticalMenuItem a:hover {
    /*border-color: #2b2a35;*/
    color: #2b2a35;
}
.verticalMenuContainer.grey .verticalMenuItem.active a,
.verticalMenuContainer.grey .verticalMenuItem a:hover {
    /*border-color: #334ac0;*/
    color: #334ac0;
}
.verticalMenu .mCustomScrollBox,
.scrolledTableContainer .mCustomScrollBox {
    margin: 0;
}
.verticalMenu .mCSB_horizontal.mCSB_inside > .mCSB_container,
.scrolledTableContainer .mCSB_horizontal.mCSB_inside > .mCSB_container {
    margin: 0 !important;
}
.verticalMenu .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.scrolledTableContainer .mCSB_scrollTools.mCSB_scrollTools_horizontal {
    height: 6px;
    opacity: 1;
}
.verticalMenu .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.scrolledTableContainer .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
    background-color: #f6f6f9;
    border-radius: 10px;
    height: 6px;
    margin: 0 0;
    width: 100%;
}
.verticalMenuContainer.blue .verticalMenu .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRai,
.scrolledTableContainer.blue .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
    background-color: #586ee0;
}
.verticalMenuContainer.grey .verticalMenu .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.scrolledTableContainer.grey .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
    background-color: transparent;
}
.verticalMenu .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.verticalMenu .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.scrolledTableContainer .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.scrolledTableContainer .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
    background-color: #334ac0;
    border-radius: 10px;
    height: 6px;
    margin: 0 auto;
    width: 100%;
}
.verticalMenuContainer.blue .verticalMenu .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.verticalMenuContainer.blue .verticalMenu .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.scrolledTableContainer.blue .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.scrolledTableContainer.blue .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
    background-color: #f6f6f9;
}
.verticalMenuContainer.grey .verticalMenu .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.verticalMenuContainer.grey .verticalMenu .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.scrolledTableContainer.grey .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.scrolledTableContainer.grey .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
    background-color: #334ac0;
}
.verticalMenu .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.verticalMenu .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,
.scrolledTableContainer .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.scrolledTableContainer .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
    height: 6px;
    margin: 0 auto;
}
.verticalMenu .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.verticalMenu .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.scrolledTableContainer .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.scrolledTableContainer .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
    margin: 0;
}
/*--- POPUP NOTIFICATIONS ---*/
.toast-title {
    font-size: 16px;
    font-weight: 500;
}
.toast-message {
    font-size: 15px;
}
.toast {
    background-color: #00aeb3;
}
.toast-success {
    background-color: #60aa14;
}
.toast-error {
    background-color: #dd2e1f;
}
.toast-info {
    background-color: #00aeb3;
}
.toast-warning {
    background-color: #e6a700;
}
#toast-container > div {
    border-radius: 5px;
    -moz-box-shadow: 1px 1px 7px -1px #ccc;
    -webkit-box-shadow: 1px 1px 7px -1px #ccc;
    box-shadow: 1px 1px 7px -1px #ccc;
    max-width: 300px;
    opacity: 0.9;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
    filter: alpha(opacity=90);
}
#toast-container > div:hover {
    -moz-box-shadow: 1px 1px 7px -1px #ccc;
    -webkit-box-shadow: 1px 1px 7px -1px #ccc;
    box-shadow: 1px 1px 7px -1px #ccc;
}
.swal2-popup .swal2-actions {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.swal2-popup .swal2-styled {
    margin-bottom: 5px !important;
    margin-top: 5px !important;
}
/*--- HEADER ---*/
.appWrapper {
    float: left;
    position: relative;
    width: 100%;
}
.withoutMenu .appWrapper {
    margin: 0;
}
#ccHeader {
    float: left;
    position: relative;
    width: 100%;
}
.ccHeaderTop {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
    float: left;
    padding: 7px 0;
    position: relative;
    width: 100%;
}
.ccHeaderTop .ccPage {
    max-width: 100%;
}
.ccHeaderTopInner {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    float: left;
    min-height: 60px;
    position: relative;
    width: 100%;
}
#mobileMenu {
    display: none;
    float: left;
    margin: 0 20px 0 0;
    position: relative;
}
#mobileMenuOverlay {
    background-color: #000;
    height: 100vh;
    left: 0;
    opacity:0;
    position: fixed;
    top: 0;
    -webkit-transition: opacity 0.3s ease 0s;
    -moz-transition: opacity 0.3s ease 0s;
    transition: opacity 0.3s ease 0s;
    visibility:hidden;
    width: 100vw;
    z-index: 10;
}
#mobileMenuOverlay.active {
    pointer-events: auto;
    opacity: 0.7;
    visibility:visible;
}
#mobileMenuContainer {
    background-color: #fff;
    float: left;
    height: 100vh;
    max-width: 280px;
    padding: 100px 0 0;
    position: fixed;
    left: -200vw;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: 15;
}
#mobileMenuContainer .mobileMenuWrapper {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    max-height: calc(100vh - 100px);
    overflow: auto;
    padding: 0 20px 30px;
    position: relative;
    width: 100%;
}
#mobileMenuContainer.active {
    left: 0;
    pointer-events: auto;
}
#mobileMenuToggler {
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    height: 22px;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    left:0;
    margin: 0;
    pointer-events: auto;
    position: relative;
    -webkit-transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
    -moz-transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
    transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
    width: 26px;
    z-index: 20;
}
#mobileMenuTogglerLine1,
#mobileMenuTogglerLine2,
#mobileMenuTogglerLine3 {
    background-color: #253150;
    border-radius: 2px;
    height: 4px;
    position: relative;
    -webkit-transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
    -moz-transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
    transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
}
#mobileMenuTogglerLine2 {
    -webkit-transition: opacity .11s cubic-bezier(.54,-.81,.57,.57) 0.22s;
    -moz-transition: opacity .11s cubic-bezier(.54,-.81,.57,.57) 0.22s;
    transition: opacity .11s cubic-bezier(.54,-.81,.57,.57) 0.22s;
}
#mobileMenuToggler.active #mobileMenuTogglerLine2 {
    -webkit-transition: opacity .22s cubic-bezier(.54,-.81,.57,.57) 0s;
    -moz-transition: opacity .22s cubic-bezier(.54,-.81,.57,.57) 0s;
    transition: opacity .22s cubic-bezier(.54,-.81,.57,.57) 0s;
}
#mobileMenuTogglerLine1 {
    transform-origin: center;
    width: 100%;
}
#mobileMenuTogglerLine2 {
    width: 100%;
}
#mobileMenuTogglerLine3 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
    transform-origin: center;
    width: 100%;
}
#mobileMenuToggler.active #mobileMenuTogglerLine1 {
    -webkit-transform: rotate(45deg) translate(5px,6px);
    -moz-transform: rotate(45deg) translate(5px,6px);
    transform: rotate(45deg) translate(5px,6px);
}
#mobileMenuToggler.active #mobileMenuTogglerLine2 {
    opacity: 0;
}
#mobileMenuToggler.active #mobileMenuTogglerLine3 {
    -webkit-transform: rotate(-45deg) translate(6px,-8px);
    -moz-transform: rotate(-45deg) translate(6px,-8px);
    transform: rotate(-45deg) translate(6px,-8px);
}
#mobileMenuContainer > .accordeonck {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
    height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 20px 23px 70px;
    position: relative;
    top: 0;
    width: 100%;
}
#mobileMenuContainer > .accordeonck > ul.menu {
    float: left;
    margin: 0 0 10px;
    position: relative;
    width: 100%;
}
#mobileMenuContainer > .accordeonck > ul.menu li ul {
    float: left;
    margin-left: 10px;
    position: relative;
    width: calc(100% + 20px);
}
#mobileMenuContainer ul li {
    position: relative;
    float: left;
    width: auto;
}
#mobileMenuContainer ul li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    float: left;
    list-style: none;
    position: relative;
    width: 100%;
}
#mobileMenuContainer .accordeonck > ul > li.level1 {
    padding: 10px 30px 10px 0;
}
#mobileMenuContainer .accordeonck ul li.level2,
#mobileMenuContainer .accordeonck ul li.level3,
#mobileMenuContainer .accordeonck ul li.level4 {
    padding: 10px 30px 0 0;
}
#mobileMenuContainer li span.toggler {
    color: #fff;
    cursor: pointer;
    font-family: 'ccFont';
    font-size: 22px;
    line-height: 30px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 6px;
    -webkit-transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
    -moz-transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
    transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
    z-index: 100;
}
.open > span.toggler {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    transform: scaleY(-1);
}
#mobileMenuContainer li {
    font-size: 16px;
    font-weight: 400;
}
#mobileMenuContainer li a {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    position: relative;
    width: auto;
}
#mobileMenuContainer > .accordeonck > ul.menu li ul li,
#mobileMenuContainer > .accordeonck > ul.menu li ul li a {
    font-size: 18px;
    font-weight: 300;
}
#mobileMenuContainer li a:hover,
#mobileMenuContainer li.current > a,
#mobileMenuContainer li.active > a {
    color: #dee2f9;
}




#logo {
    float: left;
    margin-right: auto;
    padding: 15px 0;
    position: relative;
}
.logoContainer {
    float: left;
    position: relative;
}
.logoContainer a {
    float: left;
    position: relative;
}
.logoContainer img,
.logoContainer svg {
    float: left;
    height: auto;
    position: relative;
    width: 58px;
}
#topMenu {
    float: left;
    position: relative;
}
.userMenuContainer {
    display: -webkit-flex;
    display: flex;
    float: left;
    position: relative;
}
.userMenuContainer .menuItem {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    float: left;
    margin-left: 20px;
    position: relative;
}
.userMenuContainer .menuItem.coinSystemMenu,
.userMenuContainer .menuItem.referFriendsMenu {
    font-weight: 700;
}
.menuItemImageContainer {
    float: left;
    position: relative;
}
.menuItemImage {
    float: left;
    position: relative;
}
.menuItemImage a {
    -webkit-align-items: center;
    align-items: center;
    background-color: #f4f5fd;
    border-radius: 5px;
    color: #acb1bc;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 26px;
    height: 34px;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 34px;
}
.menuItemImage a:hover {
    background-color: #334ac0;
    color: #fff;
}
.notificationsMenu .menuItemImage a:hover {
    background-color: #f4f5fd;
    color: #334ac0;
}
.notificationsCounter {
    -webkit-align-items: center;
    align-items: center;
    background-color: #334ac0;
    border-radius: 50%;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    font-size: 11px;
    height: 24px;
    -webkit-justify-content: center;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    -webkit-transform: translate(30%,-30%);
    -moz-transform: translate(30%,-30%);
    transform: translate(30%,-30%);
    width: 24px;
}
.userMenuContainer .user {
    float: left;
    position: relative;
}
.userDropDownSwitch {
    cursor: pointer;
    border-radius: 50%;
    float: left;
    overflow: hidden;
    position: relative;
    width: 60px;
}
.userDropDownSwitch .userImage {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    padding-top: 100%;
    position: relative;
    width: 100%;
}
#userDropDownMenuContainer {
    background-color: #fff;
    border-radius: 0 0 5px 5px;
    bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 1px 5px 16px -14px #000;
    -moz-box-shadow: 1px 5px 16px -14px #000;
    box-shadow: 1px 5px 16px -14px #000;
    display: none;
    overflow: hidden;
    padding: 10px;
    position: absolute;
    right: -20px;
    -webkit-transform: translateY(calc(100% + 15px));
    -moz-transform: translateY(calc(100% + 15px));
    transform: translateY(calc(100% + 15px));
    width: 200px;
    z-index: 1000;
}
.dropdownMenu {
    float: left;
    position: relative;
    width: 100%;
}
.dropdownMenuItem {
    float: left;
    margin: 2px 0;
    position: relative;
    width: 100%;
}
.dropdownMenuItem a {
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #2b2a35;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 22px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.dropdownMenuItem a:hover {
    background-color: #f5f6fc;
    color: #334ac0;
}
.dropdownMenuItem .dropdownMenuItemIcon {
    color: #334ac0;
    float: left;
    font-size: 18px;
    position: relative;
    width: 30px;
}
#ccPageContent {
    float: left;
    position: relative;
    width: 100%;
    z-index: 1;
}
#ccMainContentContainer {
    display: -webkit-flex;
    display: flex;
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}
#ccMainContentWrapper {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    min-height: calc(100vh - 80px);
    position: relative;
    width: 100%;
}
#ccMainContentContainer.withSidebar #ccMainContentWrapper {
    order: 2;
    width: calc(100% - 280px);
}
#ccMainContent {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    position: relative;
    width: 100%;
}
#ccMainContentContainer.withSidebar #ccMainContent {
    padding: 40px 50px;
}
/*--- SIDEBAR ---*/
#ccSidebar {
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    order: 1;
    padding: 40px 20px;
    position: relative;
    width: 280px;
}
.sidebarMenuContainer {
    float: left;
    position: relative;
    width: 100%;
}
/*--- MAIN MENU ---*/
.mainMenuContainer {
    float: left;
    position: relative;
    width: 100%;
}
.mainMenuContainer .menuItem {
    float: left;
    margin: 2px 0;
    position: relative;
    width: 100%;
}
.mainMenuContainer .menuItem a {
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #2b2a35;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 16px;
    font-weight: 500;
    padding: 14px 22px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.mainMenuContainer .menuItem.active a,
.mainMenuContainer .menuItem a:hover {
    background-color: #f5f6fc;
    color: #334ac0;
}
.mainMenuContainer .menuItem .menuItemIcon {
    color: #334ac0;
    float: left;
    font-size: 20px;
    position: relative;
    width: 40px;
}
/*--- FORMS ---*/
.userForm {
    float: left;
    position: relative;
    width: 100%;
}
.fieldsContainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: relative;
    width: 100%;
}
.fieldsContainer .fieldContainer,
.fieldContainer {
    float: left;
    margin: 0 0 12px;
    position: relative;
    width: 100%;
}
.fieldsContainer .fieldContainer.halfWidth,
.fieldContainer.halfWidth {
    width: calc(50% - 10px);
}
.bookmarkTopics .fieldContainer.halfWidth {
    width: 50%;
}
.fieldContainer.coupon {
    margin: 0 0 50px;
}
.fieldContainerNote {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #767676;
    float: left;
    font-size: 14px;
    padding: 0 0 0 20px;
    position: relative;
    width: 100%;
}
.fieldsContainer .field {
    float: left;
    position: relative;
    width: 100%;
}
.fieldsContainer .field.halfWidth {
    width: calc(50% - 10px);
}
.fieldsContainer .field label {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    font-weight: 700;
    padding: 10px 20px 5px;
    position: relative;
    width: 100%;
}
.fieldsContainer .field input[type="text"],
.fieldsContainer .field input[type="email"],
.fieldsContainer .field input[type="tel"],
.fieldsContainer .field input[type="number"],
.fieldsContainer .field input[type="date"],
.fieldsContainer .field input[type="password"],
.fieldsContainer .field textarea {
    -webkit-appearance: none;
    border: 1px solid #e5e5e5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    color: #2b2a34;
    float: left;
    font-size: 16px;
    padding: 15px 20px;
    outline: none;
    position: relative;
    width: 100%;
}
.fieldsContainer .field input[type="date"] {
    max-width: 280px;
}
.fieldContainer.coupon .field,
.fieldContainer.balance .field {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.fieldContainer.coupon .field input[type="text"],
.fieldContainer.balance .field input[type="number"] {
    width: calc(100% - 130px);
}
.fieldContainerTitle {
    float: left;
    font-weight: 700;
    margin: 5px 0;
    position: relative;
    width: 100%;
}
.fieldsContainer .field input#password {
    padding-right: 45px;
}
.fieldsContainer .field textarea {
    height: 190px;
    min-height: 150px;
    max-height: 350px;
    resize: vertical;
}
.fieldTipIcon {
    cursor: pointer;
    font-size: 22px;
    position: absolute;
    right: 15px;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30px;
}
.fieldTip {
    background-color: #2b2a35;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    max-width: 260px;
    opacity: 0;
    pointer-events: none;
    padding: 20px;
    position: absolute;
    right: -20px;
    top: 50%;
    -webkit-transform: translate(100%, -50%);
    -moz-transform: translate(100%, -50%);
    transform: translate(100%, -50%);
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: auto;
    z-index: 1;
}
.hasFieldTip > input:focus + .fieldTip,
.fieldTipIcon.enabled + .fieldTip,
.fieldTipIcon:hover + .fieldTip {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.fieldTip::before {
    border-color: transparent #2b2a35 transparent  transparent;
    border-style: solid;
    border-width: 10px 10px  10px;
    content: '';
    height: 0;
    left: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-100%,-50%);
    -moz-transform: translate(-100%,-50%);
    transform: translate(-100%,-50%);
    width: 0;
}
.fieldTipTitle {
    float: left;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px;
    position: relative;
}
.fieldTipText {
    float: left;
    font-size: 14px;
    position: relative;
}
.fieldTipText ul {
    padding: 0 0 0 13px;
}
.showPassword {
    cursor: pointer;
    font-size: 22px;
    position: absolute;
    right: 15px;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30px;
}
.showPassword .open {
    display: none;
}
.showPassword .close {
    display: block;
}
.showPassword.open .open {
    display: block;
}
.showPassword.open .close {
    display: none;
}
.fieldsContainer .radioGroup {
    float: left;
    margin: 0 0 25px;
    position: relative;
    width: 100%;
}
.fieldsContainer .radioButtons {
    float: left;
    position: relative;
    width: 100%;
}
.fieldsContainer .radioButton {
    float: left;
    margin: 0 25px 0 0;
    position: relative;
}
.fieldsContainer .radioButton.fullWidth {
    margin: 0;
    width: 100%;
}
.fieldsContainer .checkbox.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.fieldsContainer .checkbox > label,
.fieldsContainer .radioButton > label {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #545465;
    cursor: pointer;
    float: left;
    font-size: calc(14px + (16 - 14)*((100vw - 320px)/(2000 - 320)));
    font-weight: 400;
    padding: 0 0 0 20px;
    width: auto;
}
.fieldsContainer .checkbox.margin > label,
.fieldsContainer .radioButton.margin > label {
    margin: 5px 0;
}
.fieldsContainer .checkbox.small > label {
    font-size: 12px;
    line-height: 20px;
}
.fieldsContainer .checkbox > label a,
.fieldsContainer .radioButton > label a {
    display: inline;
}
.fieldsContainer .checkbox > label::before,
.fieldsContainer .radioButton > label::before{
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #e5e5e5;
    color: #fff;
    content: "";
    display: -webkit-flex;
    display: flex;
    float: left;
    font-family: 'FontAwesome';
    font-size: 13px;
    height: 14px;
    line-height: 1;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 3px 0 0 -20px;
    overflow: hidden;
    text-align: center;
    -webkit-transition: border-color 0.2s ease 0s, background 0.2s ease 0s;
    -moz-transition: border-color 0.2s ease 0s, background 0.2s ease 0s;
    transition: border-color 0.2s ease 0s, background 0.2s ease 0s;
    width: 14px;
}
.fieldsContainer .checkbox > label::before {
    background-color: #fff;
    border-radius: 2px;
    height: 15px;
    margin-top: 3px;
    width: 15px;
}
.fieldsContainer .radioButton > label::before {
    border-radius: 50%;
}
.fieldsContainer .checkbox > input:checked + label::before {
    background-color: #334ac0;
    border-color: #334ac0;
    content: '\f00c';
}
.fieldsContainer .radioButton > input:checked + label::before {
    background-color: #334ac0;
    border-color: #334ac0;
}
.fieldsContainer .checkbox > input:disabled + label,
.fieldsContainer .radioButton > input:disabled + label {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}
.buttonsContainer {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 15px 0 0;
    position: relative;
    width: 100%;
}
#updatePersonalSettingsForm .buttonsContainer {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.formButton,
.formButton[type="button"],
.formButton[type="submit"],
button.formButton {
    -webkit-appearance: none;
    -webkit-align-items: center;
    align-items: center;
    background-color: #99a4df;
    background-image: none !important;
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 16px;
    font-weight: 400;
    -webkit-justify-content: center;
    justify-content: center;
    line-height: 1;
    margin-right: 20px;
    outline: none !important;
    padding: 12px 35px;
    position: relative;
    text-align: center;
    text-shadow: none;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    /*width: 100%;*/
}
.formButton:hover,
.formButton[type="button"]:hover,
.formButton[type="submit"]:hover,
button.formButton:hover {
    background-color: #334ac0;
    color: #fff;
    text-shadow: none;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.formButton.disabled,
.formButton.disabled[type="button"],
.formButton.disabled[type="submit"],
button.formButton.disabled {
    background-color: rgba(153, 164, 223, 0.59);
    cursor: not-allowed;
    pointer-events: none;
}
.cardAuthenticationButtonsContainer .formButton {
    margin: 0 10px;
}
.formExtraLinkContainer {
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.formExtraLink {
    color: #5c6ecd;
    float: left;
    font-weight: 700;
    margin: 15px 0 0;
    position: relative;
    text-align: center;
}
.formExtraLink:hover {
    color: #334ac0;
}
.help-block {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #f15252;
    border-radius: 5px;
    color: #fff;
    float: left;
    font-size: 12px;
    font-weight: 400;
    margin: 5px 0;
    padding: 3px 5px;
    position: relative;
    text-align: center;
    width: 100%;
}
.help-block2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    color: #f15252;
    float: left;
    font-size: 12px;
    font-weight: 400;
    margin: 5px 0;
    padding: 3px 5px;
    position: relative;
    text-align: center;
    width: 100%;
}
.help-block3 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    color: #545465;
    float: left;
    font-size: 12px;
    font-weight: 400;
    margin: 5px 0;
    padding: 3px 5px;
    position: relative;
    text-align: center;
    width: 100%;
}
.successfulMessage {
    float: left;
    font-weight: bold;
    margin-top: 20px;
    width: 100%;
}
.appliedCoupon {
    background-color: #e5e5e5;
    pointer-events: none;
}
.appliedCoupon ~ .generalButton {
    opacity: 0.2;
    pointer-events: none;
}
.couponMessageAfterValidation {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    width: 100%;
}
.couponMessageAfterValidation.validCoupon,
.couponMessageAfterValidation.invalidCoupon{
    padding: 10px 20px 0;
}
/*--- USER PAGES ---*/
.userFormPage {
    float: left;
    position: relative;
    width: 100%;
}
.userFormContainer {
    float: left;
    position: relative;
    width: 100%;
}
.userFormContainerInner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 90px 0;
    position: relative;
    width: 100%;
}
.userFormWrapper {
    background-color: #fff;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    max-width: 800px;
    overflow: hidden;
    padding: 120px 20px 90px;
    position: relative;
    width: 100%;
}
.registerFormContainer .userFormWrapper {
    overflow: visible;
}
.userFormWrapperInner {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    position: relative;
    width: 100%;
    z-index: 200;
}
.userFormHeader {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    text-align: center;
    width: 100%;
}
.userFormImage {
    float: left;
    margin: 0 0 10px;
    max-width: 23%;
    position: relative;
}
.userFormTitle {
    float: left;
    font-size: calc(26px + (50 - 26)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    line-height: 0.9;
    margin: 10px 0 25px;
    position: relative;
    width: 100%;
}
.userFormText {
    color: #545465;
    float: left;
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 25px;
    max-width: 320px;
    position: relative;
    width: 100%;
}
.userFormText.error {
    color: #8e0701;
    font-size: 17px;
    font-weight: bold;
    max-width: 410px;
}
.cartAuthenticationFormContainer .userFormText {
    max-width: 435px;
}
.notifyParentsFormContainer {
    margin-top: 20px;
}
.userFormPage .userForm {
    max-width: 320px;
}
.userFormPage .userForm .formButton {
    margin: 0;
    width: 100%;
}
.userFormIcon {
    position: absolute;
    z-index: 100;
}
.loginFormIconTopLeft,
.registerFormIconTopLeft,
.inquiryFormIconTopLeft {
    left: 0;
    top: 0;
}
.loginFormIconTopRight,
.registerFormIconTopRight,
.inquiryFormIconTopRight {
    right: 0;
    top: 0;
}
.loginFormIconBottomLeft,
.inquiryFormIconBottomLeft {
    bottom: 0;
    left: 15px;
}
.loginFormIconBottomRight,
.inquiryFormIconBottomRight {
    bottom: 20px;
    right: 0;
}
.registerFormIconBottomLeft {
    bottom: 0;
    left: 0;
}
.registerFormIconBottomRight {
    bottom: 0;
    right: 0;
}
.registerFormIconMiddleLeft {
    left: 50px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.registerFormIconMiddleRight {
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.formStepsContainer {
    background-color: #fff;
    float: left;
    padding: 10px 0;
    position: relative;
    width: 100%;
}
.formStepsContainerInner {
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.formStepsContainerWrapper {
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    max-width: 700px;
    position: relative;
    width: 100%;
}
.formStepsContainerWrapper::before {
    background-color: #ccc;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    top: 18px;
    width: 100%;
    z-index: 1;
}
.formStepsContainerWrapper::after {
    background-color: #5c6ecd;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    top: 18px;
    width: 0;
    z-index: 2;
}
.formStep {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 0 5px;
    position: relative;
    text-align: center;
    width: 25%;
}
.steps2 .formStep {
    width: 50%;
}
.formStepInner {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    width: 100%;
}
.formStep1 .formStepInner::before {
    background-color: #fff;
    content: '';
    height: 24px;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%;
    z-index: 3;
}
.formStep4 .formStepInner::after {
    background-color: #fff;
    content: '';
    height: 24px;
    left: 50%;
    position: absolute;
    top: 0;
    width: 50%;
    z-index: 3;
}
.formStepNumber {
    -webkit-align-items: center;
    align-items: center;
    background-color: #e5e5e5;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 12px;
    font-weight: 700;
    height: 34px;
    line-height: 1;
    -webkit-justify-content: center;
    justify-content: center;
    width: 34px;
    z-index: 4;
}
.formStepTitle {
    float: left;
    font-size: calc(12px + (16 - 12)*((100vw - 320px)/(2000 - 320)));
    line-height: 1.1;
    margin: 5px 0 0;
    position: relative;
    width: 100%;
    z-index: 4;
}
.formStepsContainerWrapper.activeStep2::after {
    width: 37%;
}
.formStepsContainerWrapper.activeStep3::after {
    width: 63%;
}
.formStepsContainerWrapper.activeStep4::after {
    width: 100%;
}
.formStep1 .formStepNumber,
.formStepsContainerWrapper.activeStep2 .formStep2 .formStepNumber,
.formStepsContainerWrapper.activeStep3 .formStep2 .formStepNumber,
.formStepsContainerWrapper.activeStep3 .formStep3 .formStepNumber,
.formStepsContainerWrapper.activeStep4 .formStep2 .formStepNumber,
.formStepsContainerWrapper.activeStep4 .formStep3 .formStepNumber,
.formStepsContainerWrapper.activeStep4 .formStep4 .formStepNumber {
    background-color: #5c6ecd;
    color: #fff;
}
#resendCode {
    display: none;
    float: left;
    margin: 20px 0 0;
    position: relative;
    width: 100%;
}
.resendCodeFormContainerInner {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
#resendCode .userFormWrapper {
    padding: 50px 10px;
}
.closeResendCodeFormContainer {
    cursor: pointer;
    font-family: 'ccFont';
    font-size: 22px;
    position: absolute;
    right: 20px;
    top: 20px;
}
/*--- MODAL ---*/
.modalWrapper {
    bottom: 0;
    left: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10001;
}
.modalOverlay {
    background-color: #000;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    position: fixed;
    top: 0;
    right: 0;
}
.modalBoxContainer {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px;
    pointer-events: none;
    position: relative;
}
.modalBox {
    background-color: #fff;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    max-width: 420px;
    overflow: hidden;
    padding: 70px 50px 50px;
    pointer-events: auto;
    position: relative;
    width: 100%;
}
.modalBox.mediumWidth {
    max-width: 540px;
}
.modalBox.largeWidth {
    max-width: 800px;
    padding: 120px 20px 90px;
}
.modalBoxBody {
    float: left;
    position: relative;
    width: 100%;
    z-index: 200;
}
.modalCloseButton {
    color: #818996;
    cursor: pointer;
    font-family: 'ccFont';
    font-size: 28px;
    font-weight: 700;
    position: absolute;
    right: 15px;
    top: 15px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 101;
}
.modalCloseButton:hover {
    color: #2b2a35;
}
.modalHeader {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0 0 15px;
    position: relative;
    width: 100%;
}
.modalHeaderTitle {
    color: #2b2a34;
    float: left;
    font-size: 18px;
    font-weight: 700;
    margin-right: 5px;
    position: relative;
}
.modalMainContainer {
    float: left;
    position: relative;
    width: 100%;
}
.modalMainTitle {
    color: #2b2a35;
    float: left;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 30px;
    position: relative;
    text-align: center;
    width: 100%;
}
.modalMainTitle.noMargin {
    margin: 0;
}
.modalMainTextContainer {
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.modalMainTextContainer.flexColumn {
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.modalMainText {
    float: left;
    margin: 0 0 20px;
    max-width: 320px;
    position: relative;
    text-align: center;
    width: 100%;
}
.modalMainText.noMargin {
    margin: 0;
}
.modalButtonsContainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 20px 0 0;
    position: relative;
    width: 100%;
}
.modalButton {
    -webkit-appearance: none;
    -webkit-align-items: center;
    align-items: center;
    background-color: #99a4df;
    background-image: none !important;
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #fff !important;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 16px;
    font-weight: 400;
    -webkit-justify-content: center;
    justify-content: center;
    line-height: 1;
    margin: 0 10px 10px;
    min-width: 130px;
    outline: none !important;
    padding: 12px 35px;
    position: relative;
    text-align: center;
    text-shadow: none;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.modalButton:hover {
    background-color: #334ac0;
    color: #fff;
    text-shadow: none;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.modalButton.fullWidth {
    margin: 0 0 10px;
    width: 100%;
}
.modalIcon {
    position: absolute;
    z-index: 100;
}
.defaultModalFormIconTopLeft {
    left: 0;
    top: 0;
}
.assignmentsButtonContainer {
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
/*--- PACKAGES / PLANS ---*/
.packagesPage {
    float: left;
    position: relative;
    width: 100%;
}
.packagesContainer {
    float: left;
    position: relative;
    width: 100%;
}
.packagesContainerInner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 60px 0;
    position: relative;
    width: 100%;
}
.packagesForm {
    float: left;
    position: relative;
    width: 100%;
}
.packagesMainTitle {
    float: left;
    font-size: calc(30px + (50 - 30)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    margin: 0 0 20px;
    position: relative;
    text-align: center;
    width: 100%;
}
.packagesMainText {
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 14px;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    text-align: center;
    width: 100%;
}
.packagesMainTextInner {
    color: #545465;
    float: left;
    max-width: 400px;
    position: relative;
    width: 100%;
}
.packagesGroupsContainer {
    float: left;
    padding: calc(40px + (80 - 40)*((100vw - 320px)/(2000 - 320))) 0 0;
    position: relative;
    width: 100%;
}
.packagesGroup {
    float: left;
    margin: 0 0 40px;
    position: relative;
    width: 100%;
}
.packagesGroupTitle {
    color: #2b2a35;
    float: left;
    font-size: calc(22px + (30 - 22)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    margin: 0 0 30px;
    position: relative;
    text-align: center;
    width: 100%;
}
.packagesGroupList,
.plansGroupList {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.plansGroupList.gridContainer .gridItem {
    padding: 10px calc(10px + (35 - 10)*((100vw - 320px)/(2000 - 320))) 40px;
    width: 450px;
}
.packagesGroupList .gridItemInner,
.plansGroupList .gridItemInner {
    cursor: pointer;
}
.plansText {
    float: left;
    position: relative;
    text-align: center;
    width: 100%;
}
.packageSelectContainer,
.planSelectContainer {
    -webkit-align-items: center;
    align-items: center;
    background-color: #2b2a34;
    border-radius: 5px;
    bottom: 10px;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    font-size: 26px;
    height: 30px;
    -webkit-justify-content: center;
    justify-content: center;
    left: 10px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    -webkit-transition: opacity 0.3s ease 0s;
    -moz-transition: opacity 0.3s ease 0s;
    transition: opacity 0.3s ease 0s;
    visibility: hidden;
    width: 30px;
}
.packagesGroupList input:checked + label .packageSelectContainer,
.plansGroupList input:checked + label .planSelectContainer {
    opacity: 1;
    visibility: visible;
}
#errorMessage {
    float: left;
    font-weight: 600;
    margin: 20px 0 0;
    position: relative;
    text-align: center;
    width: 100%;
}
.paymentMainTitle {
    float: left;
    font-size: calc(28px + (35 - 28)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    margin: 0 0 40px;
    position: relative;
    text-align: center;
    width: 100%;
}
.paymentSubtitle {
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    margin: 0 0 40px;
    position: relative;
    text-align: center;
    width: 100%;
}
.addPaymentMethodButton {
    float: left;
    margin: 50px 0 -30px;
    position: relative;
    width: 100%;
}
.balanceContainer {
    float: left;
    margin: 0 0 30px;
    position: relative;
    width: 100%;
}
.balanceTitle {
    float: left;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
    position: relative;
    width: 100%;
}
.balanceText {
    float: left;
    margin: 0 0 20px;
    position: relative;
    width: 100%;
}
.balanceNote {
    float: left;
    font-weight: 700;
    margin: 0 0 5px;
    position: relative;
    width: 100%;
}
.addedAmount {
    float: left;
    margin: 0 0 20px;
    font-weight: 700;
    position: relative;
    width: 100%;
}
.balanceSwitch {
    cursor: pointer;
    float: left;
    position: relative;
    width: 100%;
}
.addAmountModal {
    float: left;
    margin: 20px 0 0;
    position: relative;
    width: 100%;
}
.packagesButtonsContainer,
.plansButtonsContainer,
.paymentButtonsContainer {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    margin: 30px 0 0;
    position: relative;
    width: 100%;
}
.plansButtonsContainer,
.paymentButtonsContainer {
    margin: 30px 0 100px;
}
.plansButtonsWrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
}
.packagesSubmitButton,
.plansSubmitButton,
.paymentSubmitButton {
    float: left;
    max-width: 300px;
    position: relative;
    text-align: center;
    width: 100%;
}
.plansButtonsWrapper .plansSubmitButton {
    margin: 0 15px;
}
.packagesCancelButton,
.plansCancelButton,
.paymentCancelButton {
    float: left;
    margin-top: 20px;
    max-width: 300px;
    position: relative;
    text-align: center;
    width: 100%;
}
.packagesSubmitButton button.formButton,
.plansSubmitButton button.formButton,
.paymentSubmitButton button.formButton,
.paymentSubmitButton a.formButton {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    width: 100%;
}
.packagesSubmitButton button.formButton:not(.disabled),
.plansSubmitButton button.formButton:not(.disabled),
.paymentSubmitButton button.formButton:not(.disabled),
.paymentSubmitButton a.formButton:not(.disabled) {
    background-color: rgba(51, 74, 192, 0.8);
}
.paymentCancelButton button {
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    color: #5c6ecd;
    cursor: pointer;
    display: inline-block;
    position: relative;
    -webkit-transition: color 0.3s ease 0s;
    -moz-transition: color 0.3s ease 0s;
    transition: color 0.3s ease 0s;
    text-decoration: none;
}
.paymentCancelButton button:hover {
    color: #334ac0;
}
.informYourParentsExplanation {
    font-size: 18px;
    margin: 20px 0;
    text-align: center;
    width: 100%;
}
.gridItemTextContainerTitle {
    float: left;
    font-size: calc(22px + (30 - 22)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    margin: 0 0 30px;
    position: relative;
    text-align: center;
    width: 100%;
}
.gridItemTextContainerText {
    color: #545465;
    float: left;
    font-size: 18px;
    margin: 0 0 15px;
    position: relative;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.gridItemTextContainerText p {
    margin: 0;
}
.plansGroupList.gridContainer .gridItem .gridItemInner {
    height: 100%;
}
.plansGroupList.gridContainer .gridItem .gridItemTextContainer {
    height: 100%;
    overflow: hidden;
}
.ccPlanDiscountContainer {
    -webkit-align-items: flex-end;
    align-items: flex-end;
    background-color: #596ccb;
    bottom: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 17px;
    font-weight: 700;
    -webkit-justify-content: center;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
}
.ccPlanDiscountContainer .ccPlanCurrency {
    color: #fff;
    padding: 10px 0;
}
.ccPlanDiscount {
    color: #fff;
    padding: 10px 0;
}
.ccPlanStartingPriceContainer {
    -webkit-align-items: flex-end;
    align-items: flex-end;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.ccPlanStartingPriceContainer .ccPlanCurrency {
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    line-height: 1;
    margin: 0 5px 0 0;
    padding: 0 0 10px;
    position: relative;
}
.ccPlanStartingPrice {
    float: left;
    font-size: calc(16px + (26 - 16)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    line-height: 1;
    padding: 0 0 10px;
    position: relative;
}
.ccPlanStartingPrice::after {
    background-color: red;
    content: '';
    height: 2px;
    left: calc(50% - 6px);
    position: absolute;
    top: calc(50% - 5px);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%) rotate(-15deg);
    width: calc(100% + 30px);
}
.ccPlanPriceContainer {
    -webkit-align-items: flex-end;
    align-items: flex-end;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.ccPlanPriceContainer .ccPlanCurrency {
    float: left;
    font-size: calc(22px + (30 - 22)*((100vw - 320px)/(2000 - 320)));
    line-height: 1;
    margin: 0 5px 3px 0;
    position: relative;
}
.ccPlanPrice {
    float: left;
    font-size: calc(30px + (60 - 30)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    line-height: 1;
    position: relative;
}
/*--- GRID ---*/
.gridMainContainer {
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.gridHeader {
    float: left;
    margin: 0 0 20px;
    position: relative;
    width: 100%;
}
.gridMainTitleContainer {
    float: left;
    font-size: calc(24px + (30 - 24)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    margin: 0 0 10px;
    position: relative;
    width: 100%;
}
.gridMainTextContainer {
    float: left;
    position: relative;
    width: 100%;
}
.gridMainText {
    color: #545465;
    float: left;
    font-size: 14px;
    position: relative;
    width: 100%;
}
.gridContainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin-left: -10px;
    position: relative;
    width: calc(100% + 20px);
}
.gridContainer .gridItem {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 10px 10px 40px;
    position: relative;
    width: 320px;
}
.gridContainer .gridItemInner {
    float: left;
    position: relative;
    width: 100%;
}
.gridContainer .gridItem.shadow .gridItemInner {
    -webkit-box-shadow: 0 0 14px -10px #000;
    -moz-box-shadow: 0 0 14px -10px #000;
    box-shadow: 0 0 14px -10px #000;
}
.gridContainer .gridItem .gridItemImage {
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    float: left;
    margin: 0 0 20px;
    padding: 56% 0 0;
    position: relative;
    width: 100%;
}
.gridContainer .gridItem .gridItemInner.locked {
    opacity: 0.6;
}
.gridContainer .gridItem .gridItemInner.scheduled .gridItemImage,
.gridContainer .gridItem .gridItemInner.scheduled .gridItemTitle {
    pointer-events: none;
    opacity: 0.6;
}
.gridContainer .gridItem .gridItemImage a {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.gridContainer .gridItem .gridItemTextContainer {
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 50px 20px 70px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.plansGroupList.gridContainer .gridItem .gridItemTextContainer:hover {
    background-color: #dee2f9;
}
.plansGroupList input:checked + label .gridItemTextContainer {
    background-color: #3dcda4 !important;
    color: #fff;
}
.plansGroupList input:checked + label .gridItemTextContainer .gridItemTextContainerText {
    color: #fff;
}
.gridContainer .gridItem .gridItemTitle {
    color: #2b2a34;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: calc(16px + (18 - 16)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.gridContainer .gridItem .gridItemTitle a {
    color: #2b2a34;
    float: left;
    position: relative;
}
.gridContainer .gridItem .gridItemTitle .locker {
    color: #2b2a34;
    float: left;
    margin: 3px 5px 0 0;
    position: relative;
}
.gridContainer .gridItem:hover .gridItemTitle,
.gridContainer .gridItem .gridItemTitle a:hover {
    color: #334ac0;
}
.gridItemNote {
    color: #2b2a35;
    float: left;
    font-size: 14px;
    margin: 3px 0 0;
    position: relative;
    width: 100%;
}

/*--- PAGES HEADER ---*/
.learnMainContainer,
.builderMainContainer,
.bookmarksMainContainer,
.libraryMainContainer,
.classroomMainContainer,
.notificationsMainContainer,
.referMainContainer,
.assignmentsMainContainer,
.invitationMainContainer,
.settingsMainContainer,
.reportsMainContainer,
.reportMainContainer,
.helpMainContainer {
    float: left;
    position: relative;
    width: 100%;
}
.reportMainContainerInner {
    float: left;
    position: relative;
    width: 100%;
}
.learnMainHeader,
.builderMainHeader,
.bookmarksMainHeader,
.libraryMainHeader,
.classroomMainHeader,
.notificationsMainHeader,
.referMainHeader,
.assignmentsMainHeader,
.createAssignmentsMainHeader,
.invitationMainHeader,
.settingsMainHeader,
.reportsMainHeader,
.reportMainHeader,
.helpMainHeader {
    float: left;
    position: relative;
    width: 100%;
}
.learnMainHeader {
    margin: 0 0 20px;
}
.builderMainHeader,
.bookmarksMainHeader,
.libraryMainHeader,
.classroomMainHeader,
.notificationsMainHeader,
.referMainHeader,
.assignmentsMainHeader,
.reportsMainHeader,
.invitationMainHeader,
.settingsMainHeader {
    padding: 60px 0 0;
}
.learnMainIcon,
.builderMainIcon,
.bookmarksMainIcon,
.referMainIcon,
.libraryMainIcon,
.libraryCreateIcon,
.classroomMainIcon,
.notificationsMainIcon,
.assignmentsMainIcon,
.createAssignmentsMainIcon,
.createAssignmentsMainIcon2,
.settingsMainIcon,
.reportsMainIcon,
.reportMainIcon,
.helpMainIcon {
    position: absolute;
    right: 50px;
}
.learnMainIcon {
    top: calc(-20px + (-90 + 20)*((100vw - 320px)/(2000 - 320)));
    width: calc(100px + (560 - 100)*((100vw - 320px)/(2000 - 320)));
}
.helpMainIcon {
    right: 160px;
    top: calc(0px + (-60 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (250 - 70)*((100vw - 320px)/(2000 - 320)));
}
.helpMainIcon.teacher {
    right: 160px;
    top: calc(0px + (-80 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (300 - 70)*((100vw - 320px)/(2000 - 320)));
}
.helpMainIcon.questions {
    max-width: 300px;
}
.builderMainIcon.ownIcon,
.builderMainIcon.own.subject {
    right: 120px;
    top: calc(0px + (-60 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (360 - 70)*((100vw - 320px)/(2000 - 320)));
}
.builderMainIcon.ownSubjectIcon,
.builderMainIcon.own.lesson {
    right: 160px;
    top: calc(0px + (-80 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (300 - 70)*((100vw - 320px)/(2000 - 320)));
}
.builderMainIcon.mockIcon,
.builderMainIcon.mock.subject {
    right: 120px;
    top: -30px;
    width: calc(90px + (420 - 90)*((100vw - 320px)/(2000 - 320)));
}
.builderMainIcon.mockSubjectIcon,
.builderMainIcon.mock.lesson {
    max-width: 290px;
    right: 160px;
    top: calc(0px + (-90 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (290 - 70)*((100vw - 320px)/(2000 - 320)));
}
.builderMainIcon.builderIcon {
    max-width: 450px;
    right: 50px;
    top: calc(0px + (-90 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (450 - 70)*((100vw - 320px)/(2000 - 320)));
}
.builderMainIcon.assignmentsOwnIcon {
    max-width: 380px;
    right: 60px;
    top: calc(0px + (-40 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (380 - 70)*((100vw - 320px)/(2000 - 320)));
}
.builderMainIcon.assignmentsMockIcon {
    max-width: 380px;
    right: 60px;
    top: calc(0px + (-40 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (380 - 70)*((100vw - 320px)/(2000 - 320)));
}
.builderMainIcon.assignmentsPracticeIcon {
    max-width: 420px;
    right: 50px;
    top: calc(0px + (-40 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (420 - 70)*((100vw - 320px)/(2000 - 320)));
}
.builderMainIcon.assignmentsReadingIcon {
    max-width: 360px;
    right: 60px;
    top: calc(0px + (-60 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (360 - 70)*((100vw - 320px)/(2000 - 320)));
}
.bookmarksMainIcon {
    max-width: 400px;
    right: 50px;
    top: calc(0px + (-100 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (400 - 70)*((100vw - 320px)/(2000 - 320)));
}
.bookmarksMainIcon.teacher {
    max-width: 310px;
    right: 80px;
    top: calc(0px + (-70 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (310 - 70)*((100vw - 320px)/(2000 - 320)));
}
.referMainIcon {
    max-width: 530px;
    right: 160px;
    top: 10px;
    width: calc(70px + (530 - 70)*((100vw - 320px)/(2000 - 320)));
}
.libraryMainIcon {
    max-width: 340px;
    right: 160px;
    top: calc(0px + (-40 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (340 - 70)*((100vw - 320px)/(2000 - 320)));
}
.libraryCreateIcon {
    max-width: 340px;
    right: 160px;
    top: calc(0px + (-40 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (340 - 70)*((100vw - 320px)/(2000 - 320)));
}
.classroomMainIcon {
    max-width: 320px;
    right: 160px;
    top: calc(0px + (-60 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (320 - 70)*((100vw - 320px)/(2000 - 320)));
}
.notificationsMainIcon {
    max-width: 190px;
    right: 160px;
    top: calc(0px + (-60 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (190 - 70)*((100vw - 320px)/(2000 - 320)));
}
.assignmentsMainIcon {
    max-width: 340px;
    right: 120px;
    top: calc(0px + (-60 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (340 - 70)*((100vw - 320px)/(2000 - 320)));
}
.createAssignmentsMainIcon {
    max-width: 360px;
    right: 160px;
    top: calc(0px + (-60 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (360 - 70)*((100vw - 320px)/(2000 - 320)));
}
.createAssignmentsMainIcon2 {
    max-width: 480px;
    right: 50px;
    top: calc(0px + (-120 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (480 - 70)*((100vw - 320px)/(2000 - 320)));
}
.settingsMainIcon {
    right: 180px;
    top: calc(0px + (-70 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (160 - 70)*((100vw - 320px)/(2000 - 320)));
}
.reportsMainIcon {
    right: 160px;
    top: calc(0px + (-40 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (200 - 70)*((100vw - 320px)/(2000 - 320)));
}
.reportsMainIcon.teacher {
    right: 50px;
    top: calc(0px + (-80 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (320 - 70)*((100vw - 320px)/(2000 - 320)));
}
.reportMainIcon {
    right: 120px;
    top: calc(0px + (-90 - 0)*((100vw - 320px)/(2000 - 320)));
    width: calc(70px + (380 - 70)*((100vw - 320px)/(2000 - 320)));
}
.backToParent {
    float: left;
    padding: 0 0 calc(20px + (30 - 20)*((100vw - 320px)/(2000 - 320)));
    position: relative;
    width: 78%;
}
.backToParent a {
    -webkit-align-items: center;
    align-items: center;
    color: #2b2a35;
    display: -webkit-flex;
    display: flex;
    float: left;
    position: relative;
}
.backToParent a:hover {
    color: #fff;
    cursor: pointer;
}
.singleQuestionPreview .backToParent a:hover,
.assignmentsMainContainer .backToParent a:hover,
.helpMainContainer .backToParent a:hover,
.reportsMainContainer .backToParent a:hover {
    color: #334ac0;
}
.backToParent a .icon {
    font-family: 'ccFont';
    font-size: 24px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}
.backToParent a .text {
    float: left;
    font-size: 16px;
    font-weight: 700;
    margin-left: 20px;
    position: relative;
}
.learnMainSubtitleContainer {
    color: #fff;
    float: left;
    font-size: 16px;
    font-weight: 700;
    margin: 40px 0 10px;
    position: relative;
    width: 100%;
}
.reportMainSubtitleContainer {
    color: #fff;
    float: left;
    font-size: 16px;
    margin: 40px 0 10px;
    position: relative;
    width: 100%;
}
.reportMainSubtitleContainer .main {
    font-weight: 700;
}
.builderMainSubtitle {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    font-size: 16px;
    margin: 0 0 10px;
    position: relative;
    width: 70%;
}
.builderMainSubtitle .subject {
    font-weight: 700;
    margin: 0 0 2px;
}
.builderMainSubtitle .topics,
.builderMainSubtitle .levels,
.builderMainSubtitle .paper {
    color: #545465;
    font-weight: 400;
    margin: 0 0 2px;
}
.learnMainTitleContainer,
.builderMainTitleContainer,
.bookmarksMainTitleContainer,
.libraryMainTitleContainer,
.classroomMainTitleContainer,
.notificationsMainTitleContainer,
.referMainTitleContainer,
.assignmentsMainTitleContainer,
.invitationMainTitleContainer,
.settingsMainTitleContainer,
.reportsMainTitleContainer,
.reportMainTitleContainer,
.helpMainTitleContainer {
    float: left;
    font-size: calc(28px + (60 - 28)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    line-height: 1;
    margin: 0 0 40px;
    position: relative;
    width: 70%;
}
.learnMainTitleContainer,
.reportMainTitleContainer {
    color: #fff;
}
.assignmentsMainTitleContainer.small {
    font-size: calc(22px + (30 - 22)*((100vw - 320px)/(2000 - 320)));
    margin: 0 0 30px;
}
.learnMainTextContainer,
.builderMainTextContainer,
.bookmarksMainTextContainer,
.libraryMainTextContainer,
.classroomMainTextContainer,
.notificationsMainTextContainer,
.referMainTextContainer,
.assignmentsMainTextContainer,
.invitationMainTextContainer,
.settingsMainTextContainer,
.reportsMainTextContainer,
.reportMainTextContainer,
.helpMainTextContainer {
    float: left;
    position: relative;
    width: 100%;
}
.learnMainTextContainer,
.classroomMainTextContainer,
.libraryMainTextContainer,
.referMainTextContainer,
.assignmentsMainTextContainer {
    float: left;
    margin: 0 0 35px;
}
.builderMainTextContainer {
    margin: 0 0 40px;
}
.learnMainText,
.builderMainText,
.bookmarksMainText,
.libraryMainText,
.classroomMainText,
.notificationsMainText,
.referMainText,
.assignmentsMainText,
.settingsMainText,
.reportsMainText,
.reportMainText,
.helpMainText {
    float: left;
    font-size: calc(16px + (18 - 16)*((100vw - 320px)/(2000 - 320)));
    max-width: 760px;
    position: relative;
    width: 70%;
}
.learnMainTitleContainer,
.learnMainText {
    width: calc(100% - (150px + (610 - 150)*((100vw - 320px)/(2000 - 320))));
}
.learnMainText,
.reportMainText {
    color: #fff;
}
.builderMainText,
.bookmarksMainText,
.libraryMainText,
.classroomMainText,
.notificationsMainText,
.assignmentsMainText,
.referMainText,
.settingsMainText,
.helpMainText {
    color: #545465;
}
.learnButtonsContainer,
.classroomButtonsContainer,
.referButtonsContainer,
.libraryButtonsContainer,
.assignmentsButtonsContainer,
.assignmentButtonsContainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    position: relative;
    width: 100%;
}

.classroomButtonsContainer .generalButton,
.libraryButtonsContainer .generalButton {
    margin-right: 30px;
}
.learnButton {
    float: left;
    margin: 0 50px 10px 0;
    position: relative;
}
.builderStepContainer {
    float: left;
    position: relative;
    width: 100%;
}
.builderStep {
    color: #545465;
    float: left;
    font-size: 18px;
    position: relative;
    width: 100%;
}
.assignmentsDetailsList {
    float: left;
    position: relative;
    width: 100%;
}
.assignmentsDetailsListItem {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    margin: 0 0 2px;
    position: relative;
    width: 100%;
}
.assignmentsDetailsListItemTitle {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    font-weight: 700;
    padding-right: 10px;
    position: relative;
    width: 180px;
}
.assignmentsDetailsListItemText {
    float: left;
    position: relative;
    width: calc(100% - 180px);
}
.assignmentsDetailsListItemText .blue {
    color: #334ac0;
    font-weight: 700;
}
.paginationContainer {
    background-color: #fff;
    float: left;
    padding: 0 0 40px;
    position: relative;
    width: 100%;
}
.pagination {
    -webkit-align-items: center;
    align-items: center;
    color: #545465;
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.paginationItem {
    float: left;
    font-size: 18px;
    padding: 0 10px;
    position: relative;
}
.paginationItem.prevPage,
.paginationItem.nextPage {
    font-size: 22px;
    font-weight: 700;
    margin: 4px 0 0;
}
.paginationItem a {
    color: #545465;
}
.paginationItem.disabled,
.paginationItem.current {
    cursor: default;
}
.paginationItem.current {
    font-weight: 600;
}
/*--- CARDS ---*/
.cardsList {
    float: left;
    margin: 50px 0 0;
    position: relative;
    width: 100%;
}
.cardsList.noBorder {
    margin: 0;
}
.cardsList.myWallet {
    margin: 70px 0 0;
}
.cardsList.refer {
    margin: 10px 0 0;
}
.cardContainer {
    -webkit-align-items: center;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    margin: 0 0 12px;
    padding: 30px 50px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.gradeLabel {
    float: left;
    font-weight: 700;
    margin-right: 10px;
    position: relative;
}
.gradeInput {
    float: left;
    margin-right: 10px;
    position: relative;
    width: 80px;
}
.gradeInput input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    position: relative;
    width: 100%;
}
.gradeTotalMarks {
    float: left;
    font-weight: 700;
    position: relative;
}
.cardContainer.grade {
    background-color: #20202c;
    color: #fff;
}
.cardContainer.locked {
    opacity: 0.6;
}
/*.checkList .cardContainer.locked:hover,
.reportList .cardContainer.locked:hover*/
.cardContainer.locked:hover {
    opacity: 1;
}
.cardContainer.teacherReport {
    margin: 50px 0 0;
}
.cardContainer.refer {
    padding: 30px;
}
.cardContainer.myWallet {
    padding: 30px 75px;
}
.checkList .cardContainer.locked .cardBody {
    pointer-events: none;
}
.reportList .cardContainer.locked .cardBody {
    pointer-events: none;
}
.cardsList.withHover .cardContainer:hover {
    background-color: #dee2f9;
}
.cardsList.withHover .cardContainer.locked:hover {
    background-color: #fff;
}
.cardNumber {
    color: #e5e5e5;
    float: left;
    font-size: calc(36px + (60 - 36)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: calc(80px + (130 - 80)*((100vw - 320px)/(2000 - 320)));
}
.cardContainer:hover .cardNumber {
    color: #fff;
}
.cardContainer.locked:hover .cardNumber {
    color: #e5e5e5;
}
.cardBody {
    float: left;
    position: relative;
    width: 100%;
}
.cardContainer.withNumber .cardBody {
    width: calc(100% - (80px + (130 - 80)*((100vw - 320px)/(2000 - 320))));
}
.cardTitle {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    font-size: calc(20px + (30 - 20)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    line-height: 1.1;
    position: relative;
    -webkit-transition: color 0.3s ease 0s;
    -moz-transition: color 0.3s ease 0s;
    transition: color 0.3s ease 0s;
    width: 100%;
}
.cardTitle p {
    margin: 0;
}
.cardContainer.keyConcepts .cardTitle,
.cardContainer.bookmarks .cardTitle {
    cursor: pointer;
    padding-right: 30px;
    width: calc(100% - 40px);
}
.cardContainer.assignments .cardTitle,
.cardContainer.refer .cardTitle {
    cursor: pointer;
    padding-left: calc(30px + (45 - 30)*((100vw - 320px)/(2000 - 320)));
    width: calc(100% - 45px);
}
.cardContainer .cardTitle.markScheme {
    cursor: default;
}
.cardContainer.keyConcepts .cardTitle:hover,
.cardContainer.keyConcepts .cardTitle.open,
.cardContainer.assignments .cardTitle:hover,
.cardContainer.assignments .cardTitle.open,
.cardContainer.refer .cardTitle:hover,
.cardContainer.refer .cardTitle.open {
    color: #334ac0;
}
.cardContainer.keyConcepts .cardToggle {
    top: 7px;
}
.cardContainer.keyConcepts .cardToggle.plus,
.cardContainer.assignments .cardToggle.plus,
.cardContainer.refer .cardToggle.plus {
    display: block;
}
.cardContainer.keyConcepts .cardToggle.minus,
.cardContainer.assignments .cardToggle.minus,
.cardContainer.refer .cardToggle.minus {
    display: none;
}
.cardContainer.keyConcepts.open .cardToggle.plus,
.cardContainer.assignments.open .cardToggle.plus,
.cardContainer.refer.open .cardToggle.plus {
    display: none;
}
.cardContainer.keyConcepts.open .cardToggle.minus,
.cardContainer.assignments.open .cardToggle.minus,
.cardContainer.refer.open .cardToggle.minus {
    display: block;
}
.cardTitleSmall {
    font-size: 18px;
}
.cardTitleInner {
    float: left;
    margin-right: 10px;
    position: relative;
}
.cardFlag {
    background-color: #3dcda4;
    border-radius: 5px;
    color: #fff;
    float: left;
    font-size: 12px;
    font-weight: 400;
    padding: 3px 10px;
    pointer-events: none;
    position: relative;
}
.cardFlag.Cancelled {
    background-color: #ff7670;
}
.cardTitle a {
    color: #2b2a34;
    cursor: pointer;
}
.cardsList.faq .cardTitle {
    cursor: pointer;
    font-size: 18px;
    padding-right: 30px;
}
.cardsList.faq .cardTitle:hover,
.cardsList.faq .cardTitle.open {
    color: #334ac0;
}
.cardText .cardSubjectsList {
    float: left;
    padding: 0;
    position: relative;
    width: 100%;
}
.cardToggle {
    color: #2b2a34;
    font-family: 'ccFont';
    font-size: 14px;
    position: absolute;
    right: 0;
    top: 4px;
}
.cardToggleLeft {
    font-size: calc(15px + (28 - 15)*((100vw - 320px)/(2000 - 320)));
    left: 0;
    right: auto;
}
.cardToggle:hover {
    color: #334ac0;
}
.cardDate {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #545465;
    float: left;
    font-size: 14px;
    margin: 0 0 10px;
    position: relative;
    width: 100%;
}
.cardDescription {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #545465;
    float: left;
    font-size: 14px;
    margin: 10px 0 0;
    position: relative;
    width: 100%;
}
.keyConcepts .cardDescription,
.cardDescription.assignmentInstructionsText {
    font-size: 18px;
}
.cardDescription p {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 5px 0 0;
}
.cardDescription ol {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding-left: 14px;
    position: relative;
}
.cardDescription ul {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    margin-top: 5px;
    padding-left: 14px;
    position: relative;
    width: 100%;
}
.cardDescription ol li,
.cardDescription ul li {
    padding: 3px 0;
}
.cardsList.faq .cardDescription {
    margin: 20px 0 0;
    padding-right: 30px;
}
.viewSolutionContainer .cardToggle.plus,
.cardsList.faq .cardToggle.plus {
    display: block;
}
.viewSolutionContainer .cardToggle.minus,
.cardsList.faq .cardToggle.minus {
    display: none;
}
.viewSolutionContainer .cardContainer.open .cardToggle.plus,
.cardsList.faq .cardContainer.open .cardToggle.plus {
    display: none;
}
.viewSolutionContainer .cardContainer.open .cardToggle.minus,
.cardsList.faq .cardContainer.open .cardToggle.minus {
    display: block;
}
.viewSolutionContainer .cardContainer .cardText {
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    max-width: 100%;
}
.cardText {
    color: #545465;
    float: left;
    font-size: 14px;
    margin: 15px 0 0;
    max-width: 1000px;
    position: relative;
    width: 100%;
}
.cardText.noMagrin {
    margin: 0;
}
.cardText ul,
.cardText ol {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    width: 100%;
}
.cardText ul {
    list-style: outside;
    padding: 0 0 0 40px;
}
.cardText ul ul li {
    list-style: circle;
}
.cardTextRow {
    float: left;
    position: relative;
    width: 100%;
}
.cardLinks {
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.cardLinksInner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin: 10px -20px 0;
    position: relative;
    width: calc(100% + 40px);
}
.cardLink {
    float: left;
    font-size: 14px;
    margin-top: 10px;
    padding: 0 20px;
    position: relative;
}
.cardLink a {
    color: #545465;
}
.cardLinks.withSeparators .cardLink::before {
    background-color: #545465;
    content: '';
    height: 12px;
    left: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-30%);
    -moz-transform: translateY(-30%);
    transform: translateY(-30%);
    width: 1px;
}
.cardDownloadLink {
    float: left;
    font-size: 16px;
    margin: 10px 0 0;
    position: relative;
    width: 100%;
}
.cardAbsoluteButton {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    position: absolute;
    right: -15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 20px;
}
.cardAbsoluteButton .fa-caret-right {
    font-size: 20px;
}
.cardAbsoluteButton a {
    color: #334ac0;
}
.cardButtons {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin: 10px 0 0;
    position: relative;
    width: 100%;
}
.cardButtonContainer {
    float: left;
    padding: 10px 40px 0 0;
    position: relative;
}
.cardButton {
    -webkit-align-items: center;
    align-items: center;
    border: none;
    -webkit-box-shadow: 0 0 10px -5px #000;
    -moz-box-shadow: 0 0 10px -5px #000;
    box-shadow: 0 0 10px -5px #000;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    font-size: 14px;
    min-height: 40px;
    min-width: 1px;
}
.cardSubscriptionButtons,
.cardPaymentButtons {
    float: left;
    margin: 15px 0 0;
    position: relative;
    width: 100%;
}
.cardSubscriptionButton,
.cardPaymentButton {
    float: left;
    font-size: 14px;
    margin: 5px 20px 0 0;
    position: relative;
}
.cardSubscriptionButton a,
.cardPaymentButton a {
    font-size: 14px;
}
.settingsMainContainer .cardContainer .checkbox > label,
.settingsMainContainer .cardContainer .radioButton > label,
.builderMainContainer .cardContainer .checkbox > label,
.builderMainContainer .cardContainer .radioButton > label {
    cursor: pointer;
    padding: 0 0 0 calc(40px + (90 - 40)*((100vw - 320px)/(2000 - 320)));
}
.settingsMainContainer .cardContainer .checkbox .checkboxDisabled,
.settingsMainContainer .cardContainer .radioButton .radioDisabled,
.builderMainContainer .cardContainer .checkbox .checkboxDisabled,
.builderMainContainer .cardContainer .radioButton .radioDisabled {
    padding: 0 0 0 calc(40px + (90 - 40)*((100vw - 320px)/(2000 - 320)));
}
.settingsMainContainer .cardContainer .checkbox > label::before,
.settingsMainContainer .cardContainer .radioButton > label::before,
.settingsMainContainer .cardContainer .checkbox > .checkboxDisabled::before,
.settingsMainContainer .cardContainer .radioButton > .radioDisabled::before,
.builderMainContainer .cardContainer .checkbox > label::before,
.builderMainContainer .cardContainer .radioButton > label::before,
.builderMainContainer .cardContainer .checkbox > .checkboxDisabled::before,
.builderMainContainer .cardContainer .radioButton > .radioDisabled::before {
    background-color: rgba(255,255,255,0.3);
    border-radius: 50%;
    content: "";
    float: left;
    height: calc(28px + (44 - 28)*((100vw - 320px)/(2000 - 320)));
    left: 0;
    position: absolute;
    top: calc(-1px + (-4 + 1)*((100vw - 320px)/(2000 - 320)));
    width: calc(28px + (44 - 28)*((100vw - 320px)/(2000 - 320)));
}
.settingsMainContainer .cardContainer .checkbox > label::before,
.settingsMainContainer .cardContainer .radioButton > label::before,
.settingsMainContainer .cardContainer .checkbox > .checkboxDisabled::before,
.settingsMainContainer .cardContainer .radioButton > .radioDisabled::before {
    background-color: #f6f6f9;
}
.settingsMainContainer .cardContainer .checkbox > label::after,
.settingsMainContainer .cardContainer .radioButton > label::after,
.builderMainContainer .cardContainer .checkbox > label::after,
.builderMainContainer .cardContainer .radioButton > label::after {
    -webkit-align-items: center;
    align-items: center;
    content: "\f00c";
    display: -webkit-flex;
    display: flex;
    float: left;
    font-family: 'FontAwesome';
    font-size: calc(30px + (50 - 30)*((100vw - 320px)/(2000 - 320)));
    height: calc(28px + (44 - 28)*((100vw - 320px)/(2000 - 320)));
    -webkit-justify-content: center;
    justify-content: center;
    left: calc(2px + (5 - 2)*((100vw - 320px)/(2000 - 320)));
    opacity: 0;
    position: absolute;
    top: calc(-4px + (-8 + 4)*((100vw - 320px)/(2000 - 320)));
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: calc(28px + (44 - 28)*((100vw - 320px)/(2000 - 320)));
}
.settingsMainContainer .cardContainer .checkbox > label::after,
.settingsMainContainer .cardContainer .radioButton > label::after {
    color: #334ac0;
}
.settingsMainContainer .cardContainer .checkbox > input:checked + label::after,
.settingsMainContainer .cardContainer .radioButton > input:checked + label::after,
.builderMainContainer .cardContainer .checkbox > input:checked + label::after,
.builderMainContainer .cardContainer .radioButton > input:checked + label::after {
    opacity: 1;
    visibility: visible;
}
.settingsMainContainer .cardContainer .checkbox > .checkboxDisabled::after,
.settingsMainContainer .cardContainer .radioButton > .radioDisabled::after,
.builderMainContainer .cardContainer .checkbox > .checkboxDisabled::after,
.builderMainContainer .cardContainer .radioButton > .radioDisabled::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    float: left;
    height: calc(16px + (32 - 16)*((100vw - 320px)/(2000 - 320)));
    left: 6px;
    position: absolute;
    top: calc(5px + (2 - 5)*((100vw - 320px)/(2000 - 320)));
    width: calc(16px + (32 - 16)*((100vw - 320px)/(2000 - 320)));
}
.bookmarkButtonContainer {
    position: absolute;
    right: 50px;
    top: 30px;
}
.bookmarkButton {
    color: #b0b5bd;
    cursor: pointer;
    float: left;
    font-size: 28px;
    position: relative;
}
.bookmarkButton.hidden {
    display: none;
}
.notificationButtonContainer {
    position: absolute;
    right: 15px;
    top: 15px;
}
.notificationButton {
    color: #b0b5bd;
    cursor: pointer;
    float: left;
    font-family: 'ccFont';
    font-size: 20px;
    position: relative;
}
.helpButton .tooltip,
.bookmarkButton .tooltip,
.reportABug .tooltip,
.gridItemInner .tooltip,
.cardContainer .tooltip {
    background-color: #2b2a35;
    bottom: -20px;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    font-size: 12px;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    padding: 15px;
    position: absolute;
    text-align: center;
    -webkit-transform: translate(-50%, 100%);
    -moz-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: auto;
    z-index: 1;
}
.gridItemInner .tooltip {
    bottom: 30px;
}
.cardContainer:not(.keyConcepts, .bookmarks) .tooltip {
    bottom: 83px;
    left: 90px;
}
.builderMainContainer .cardContainer .tooltip {
    bottom: 68px;
    left: 71px;
}
.reportList .cardContainer .tooltip {
    bottom: 56px;
    left: 112px;
}
.helpButton .tooltip::before,
.bookmarkButton .tooltip::before,
.reportABug .tooltip::before,
.gridItemInner .tooltip::before,
.reportList .cardContainer .tooltip::before {
    border-color: transparent transparent #2b2a35 transparent;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    content: '';
    height: 0;
    left: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: translate(-50%, -100%);
    -moz-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    width: 0;
}
.helpButton:hover .tooltip,
.bookmarkButton:hover .tooltip,
.reportABug:hover .tooltip,
.gridItemInner:hover .tooltip,
.cardContainer:not(.keyConcepts, .bookmarks):hover .tooltip {
    opacity: 1;
    visibility: visible;
}
/*--- LEARN ---*/
.learnVerticalMenu {
    float: left;
    margin: 0 0 50px;
    position: relative;
    width: 100%;
}
/*--- BUILDER ---*/
.builderMainContainer .cardContainer .quizReportButton {
    opacity: 1;
    position: absolute;
    right: -50px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    visibility: visible;
}
.builderMainContainer .cardContainer:hover .quizReportButton {
    opacity: 1;
    visibility: visible;
}
.builderMainContainer .cardContainer .quizReportButton a {
    -webkit-align-items: center;
    align-items: center;
    background-color: #f6f6f9;
    border-radius: 5px 0 0 5px;
    display: -webkit-flex;
    display: flex;
    font-size: 16px;
    height: 34px;
    -webkit-justify-content: center;
    justify-content: center;
    width: 34px;
}
.builderButtonsContainer {
    -webkit-align-items: center;
    align-items: center;
    float: left;
    display: -webkit-flex;
    display: flex;
    margin: 35px 0 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.builderButtons {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin-left: -15px;
    position: relative;
    width: calc(100% + 30px);
}
.builderButton {
    cursor: pointer;
    float: left;
    padding: 0 15px;
    position: relative;
}
.builderButton::before {
    background-color: #e5e5e5;
    content: '';
    left: 0;
    height: 30px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-30%);
    -moz-transform: translateY(-30%);
    transform: translateY(-30%);
    width: 1px;
}
.builderButton:first-child::before,
.builderButton.generalButton::before {
    display: none;
}
.builderErrorsContainer {
    float: left;
    font-weight: 700;
    margin: 20px 0 0;
    position: relative;
    width: 100%;
}
.builderQuestionPreviewTitle {
    color: #545465;
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    position: relative;
    width: 100%;
}
.builderQuestionPreviewDescription {
    color: #545465;
    float: left;
    position: relative;
    width: 100%;
}
.builderQuestionPreviewMainContainer {
    float: left;
    position: relative;
    width: 100%;
}
/*--- REFER A FRIEND ---*/
.referScrolledTable {
    border-top: 1px solid #f6f6f9;
    display: none;
    float: left;
    margin: 30px 0 0;
    position: relative;
    width: 100%;
}
.referScrolledTable .scrolledTableBox {
    margin: 0;
}
.referScrolledTable .scrolledTableHeader {
    margin: 0 0 40px;
    padding: 30px 15px 0;
}
.referScrolledTable .scrolledTableBody {
    padding: 0 15px 30px;
}
.myWalletButtonsContainer {
    float: left;
    margin: 30px 0 0;
    position: relative;
    width: 100%;
}
.myWalletBody {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin: 30px 0 0 -40px;
    position: relative;
    width: calc(100% + 80px);
}
.myWalletSummaryItem {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: calc(20% - 11px);
}
.myWalletItem {
    -webkit-align-items: center;
    align-items: center;
    border-right: 1px solid #f6f6f9;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: calc(20% - 11px);
}
.myWalletItem:last-child {
    border-right: none;
}
.myWalletCircleProgressContainer {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
}
.myWalletCircleProgressStatic {
    -webkit-align-items: center;
    align-items: center;
    border: 10px solid #f6f6f9;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    height: 130px;
    line-height: 1.1;
    margin: 0;
    /*overflow: hidden;*/
    padding: 0;
    position: relative;
    width: 130px;
}
.myWalletSummaryItem .myWalletCircleProgressStatic {
    border-color: #334ac0;
    color: #334ac0;
    height: 160px;
    width: 160px;
}
.myWalletCircleProgressNumber {
    float: left;
    font-size: 34px;
    font-weight: 700;
    position: relative;
}
.myWalletCircleProgressNote {
    float: left;
    font-size: 16px;
    margin: 20px 0 0;
    position: relative;
    text-align: center;
    width: 100%;
}
.myWalletSummaryItem .myWalletCircleProgressNote {
    color: #334ac0;
    font-size: 20px;
    font-weight: 700;
}
.myWalletItemEqual {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    position: relative;
    width: 55px;
}
.myWalletItemEqualInner {
    float: left;
    height: 40px;
    margin: 0 0 34px;
    position: relative;
    width: 40px;
}
.myWalletItemEqualInner::before {
    background-color: #334ac0;
    bottom: 56%;
    content: '';
    height: 8px;
    left: 0;
    position: absolute;
    width: 100%;
}
.myWalletItemEqualInner::after {
    background-color: #334ac0;
    content: '';
    height: 8px;
    left: 0;
    position: absolute;
    top: 56%;
    width: 100%;
}
.referModalFormIconBottomLeft {
    bottom: 0;
    left: 0;
    max-width: 60%;
    -webkit-transform: translate(-19%,7%);
    -moz-transform: translate(-19%,7%);
    transform: translate(-19%,7%);
}
.referModalFormIconTopRight {
    max-width: 32%;
    right: 60px;
    top: 0;
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    transform: translateY(-20%);
}
.referModalFormIconBottomRight {
    bottom: 30%;
    right: 50px;
}
.referRedeemModalFormIconTopLeft {
    left: 12%;
    top: 0;
    max-width: 32%;
}
.referRedeemModalFormIconBottomLeft {
    bottom: 10%;
    left: 0;
    max-width: 32%;
}
.referRedeemModalFormIconBottomRight {
    bottom: 0;
    right: 0;
    max-width: 38%;
}
/*--- INVITATION ---*/
.invitationBody {
    float: left;
    position: relative;
    width: 100%;
}
.invitationMessage {
    float: left;
    font-size: 20px;
    margin: 0 0 30px;
    position: relative;
    width: 100%;
}
.invitationUpdateMessage {
    float: left;
    margin: 0 0 30px;
    position: relative;
    width: 100%;
}
.invitationForm {
    float: left;
    position: relative;
    width: 100%;
}
.invitationFormButtons {
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
/*--- ASSIGNMENTS ---*/
.assignmentsVerticalMenu {
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
.assignmentsDescription {
    border-bottom: 1px solid #f6f6f9;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 0 0 35px calc(30px + (45 - 30)*((100vw - 320px)/(2000 - 320)));
    position: relative;
    width: 100%;
}
.assignmentsContainer {
    float: left;
    margin: 20px 0 0;
    position: relative;
    width: 100%;
}
.assignment {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin: 45px 0 0;
    position: relative;
    width: 100%;
}
.assignmentImageContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding-right: 45px;
    position: relative;
    width: 215px;
}
.assignmentImage {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    float: left;
    padding-top: 100%;
    position: relative;
    width: 100%;
}
.assignmentBody {
    float: left;
    position: relative;
    width: calc(100% - 215px);
}
.teacherAssignment .assignmentBody {
    overflow: hidden;
    width: calc(100% - 370px);
}
.teacherAssignment .cardAssignmentsCircleProgressContainer {
    width: 130px;
}
.assignmentHeader {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin: 0 0 15px;
    position: relative;
    width: 100%;
}
.teacherAssignment .assignmentHeader {
    margin: 0 0 15px -5px;
    width: calc(100% + 10px);
}
.assignmentTitle {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #2b2a34;
    float: left;
    font-size: 18px;
    font-weight: 700;
    margin-right: 5px;
    position: relative;
}
.teacherAssignment .assignmentTitle {
    padding: 0 5px;
}
.assignmentTitleDetails {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #334ac0;
    float: left;
    font-size: 14px;
    font-weight: 700;
    position: relative;
}
.teacherAssignment .assignmentTitleDetails {
    padding: 0 5px;
}
.teacherAssignment .assignmentTitleDetails::before {
    background-color: #334ac0;
    content: '';
    height: 13px;
    left: -1px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 2px;
}
.assignmentText {
    float: left;
    position: relative;
    width: 100%;
}
.assignmentDetailsContainer {
    float: left;
    position: relative;
    width: 100%;
}
.assignmentDetails {
    float: left;
    position: relative;
    width: 100%;
}
.assignmentDetailsTitle {
    float: left;
    font-weight: 700;
    margin: 0 5px 0 0;
    position: relative;
}
.assignmentDetailsValue {
    float: left;
    position: relative;
}
.assignmentButtonContainer {
    float: left;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
.modalBox .userForm {
    max-width: 320px;
}
.notifyMyTeacherFormIconTopRight {
    left: 65%;
    top: 0;
    -webkit-transform: translateY(-18%);
    -moz-transform: translateY(-18%);
    transform: translateY(-18%);
}
.notifyMyTeacherFormIconBottomLeft {
    bottom: 0;
    left: 0;
    -webkit-transform: translate(-15%,6%);
    -moz-transform: translate(-15%,6%);
    transform: translate(-15%,6%);
}
.notifyMyTeacherFormIconBottomRight {
    top: 54%;
    left: 84%;
}
.modalBox .assignmentHeader {
    -webkit-justify-content: center;
    justify-content: center;
}
.modalBox .assignmentDetailsContainer {
    text-align: center;
}
.modalBox .assignmentInstructionsContainer {
    float: left;
    position: relative;
    width: 100%;
}
/* CREATE ASSIGNMENTS */
.createAssignmentFormIconTopLeft {
    left: 0;
    top: 0;
    -webkit-transform: translate(-18%,-48%);
    -moz-transform: translate(-18%,-48%);
    transform: translate(-18%,-48%);
    width: 48%;
}
.createAssignmentFormIconBottomLeft {
    bottom: 0;
    left: 30px;
    -webkit-transform: translateY(23%);
    -moz-transform: translateY(23%);
    transform: translateY(23%);
    width: 23%;
}
.createAssignmentFormIconRight {
    bottom: 15%;
    right: 10px;
    width: 25%;
}
.assignmentsFiltersContainer {
    float: left;
    position: relative;
    width: 100%;
}
.createAssignmentsBodyContainer {
    float: left;
    position: relative;
    width: 100%;
}
.assignmentButtonsContainer {
    margin: 30px 0 0;
}
.assignmentButtonsContainer .generalButton {
    margin-right: 30px;
}
.latestAssignments .cardDescription {
    margin-bottom: 40px;
}
.latestAssignments .verticalMenuContainer {
    margin-left: -50px;
    width: calc(100% + 100px);
}
.viewAllAssignmentsButtonContainer {
    float: left;
    margin: 75px 0 0;
    position: relative;
    width: 100%;
}
.createAssignmentsTable {
    background-color: #fff;
    border-radius: 5px;
    float: left;
    position: relative;
    width: 100%;
}
.createAssignmentsTableHeader {
    -webkit-align-items: center;
    align-items: center;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    overflow: hidden;
    padding: 65px 45px 35px;
    position: relative;
    width: 100%;
}
.createAssignmentsTableBody {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 40px;
    position: relative;
    width: 100%;
}
.createAssignmentsTableHeaderColumn {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 20px;
    font-weight: 700;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0 10px;
    position: relative;
    text-align: center;
    width: 100%;
}
.createAssignmentsTableRow {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    padding: 15px 5px;
    position: relative;
    text-align: center;
    width: 100%;
}
.createAssignmentsTableRow:nth-child(2n+1) {
    background-color: #f6f6f9;
}
.createAssignmentsTableColumn {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0 10px;
    position: relative;
    text-align: center;
    width: 100%;
}
.createAssignmentsTableHeaderColumn.checkbox,
.createAssignmentsTableColumn.checkbox {
    width: 35px;
}
.createAssignmentsTableHeaderColumn.name,
.createAssignmentsTableColumn.name {
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    text-align: left;
    width: calc(100% - 270px);
}
.createAssignmentsTableHeaderColumn.finalIbExam,
.createAssignmentsTableColumn.finalIbExam {
    width: 235px;
}
.createAssignmentsTableColumnMobileTitle {
    display: none;
    float: left;
    font-weight: 700;
    position: relative;
}
.createAssignmentsTable .scrolledTableHeaderColumn.checkbox label,
.createAssignmentsTable .scrolledTableColumn.checkbox label,
.createAssignmentsTableHeaderColumn.checkbox label,
.createAssignmentsTableColumn.checkbox label {
    cursor: pointer;
    padding: 0 0 0 20px;
}
.createAssignmentsTable .scrolledTableHeaderColumn.checkbox label::before,
.createAssignmentsTable .scrolledTableColumn.checkbox label::before,
.createAssignmentsTableHeaderColumn.checkbox label::before,
.createAssignmentsTableColumn.checkbox label::before {
    background-color: #fff;
    border: 1px solid #f6f6f9;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: '';
    height: 16px;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 16px;
    z-index: 1;
}
.createAssignmentsTable .scrolledTableHeaderColumn.checkbox label::after,
.createAssignmentsTable .scrolledTableColumn.checkbox label::after,
.createAssignmentsTableHeaderColumn.checkbox label::after,
.createAssignmentsTableColumn.checkbox label::after {
    -webkit-align-items: center;
    align-items: center;
    content: "\f00c";
    display: -webkit-flex;
    display: flex;
    float: left;
    font-family: 'FontAwesome';
    font-size: 12px;
    font-weight: 400;
    height: 16px;
    -webkit-justify-content: center;
    justify-content: center;
    left: 50%;
    opacity: 0;
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    top: 50%;
    visibility: hidden;
    width: 16px;
    z-index: 2;
}
.createAssignmentsTable .scrolledTableColumn.checkbox label::after,
.createAssignmentsTableColumn.checkbox label::after {
    color: #fff;
}
.createAssignmentsTable .scrolledTableHeaderColumn.checkbox input:checked + label::after,
.createAssignmentsTable .scrolledTableColumn.checkbox input:checked + label::after,
.createAssignmentsTableHeaderColumn.checkbox input:checked + label::after,
.createAssignmentsTableColumn.checkbox input:checked + label::after {
    opacity: 1;
    visibility: visible;
}


/*--- CLASSROOM ---*/
.classroomVerticalMenu {
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
.classroomBodyContainer {
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
.classroomTopLeft {
    left: 0;
    top: 0;
}
.classroomBottomRight {
    bottom: 0;
    right: 0;
    -webkit-transform: translate(15%,15%);
    -moz-transform: translate(15%,15%);
    transform: translate(15%,15%);
}
/*--- LIBRARY ---*/
.libraryVerticalMenu {
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
.libraryBodyContainer {
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
.questionContainer {
    float: left;
    position: relative;
    width: 100%;
}
.questionBasicContainer {
    float: left;
    position: relative;
    width: 100%;
}
.questionMainContainer {
    float: left;
    position: relative;
    width: 100%;
}
.questionFieldContainer {
    float: left;
    margin: 0 0 20px;
    position: relative;
    width: 100%;
}
.questionFieldContainer.noMargin {
    margin: 0;
}
.questionFieldContainer > label {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    font-weight: 700;
    padding: 0 10px 10px;
    position: relative;
    width: 100%;
}
.questionField input[type="text"],
.questionField input[type="number"] {
    -webkit-appearance: none;
    border: 1px solid #e5e5e5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    color: #767676;
    float: left;
    font-size: 16px;
    padding: 15px 20px;
    outline: none;
    position: relative;
    width: 100%;
}
.questionField {
    float: left;
    margin: 0 0 20px;
    position: relative;
    width: 100%;
}
.questionFieldContainer.noMargin .questionField {
    margin: 0;
}
.questionFieldInner {
    float: left;
    position: relative;
    width: 100%;
}
.questionField .tox-tinymce {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}
.questionField.answers .tox-tinymce {
    border-radius: 8px 8px 0 0;
}
.questionField .tox-tinymce * {
    border-color: #e5e5e5 !important;
}
.questionField .tox .tox-toolbar,
.questionField .tox .tox-toolbar__overflow,
.questionField .tox .tox-toolbar__primary {
    background: none;
    border-bottom: 1px solid #e5e5e5;
}
.questionField .tox .tox-statusbar__branding {
    display: none !important;
}
.setCorrectAnswerContainer {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-radius: 0 0 8px 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    padding: 10px;
    position: relative;
    width: 100%;
}
.setCorrectAnswer {
    float: left;
    font-size: 14px;
    position: relative;
}
.setCorrectAnswer label {
    cursor: pointer;
    padding-left: 25px;
}
.setCorrectAnswer label::before {
    border: 1px solid #e5e5e5;
    content: '';
    border-radius: 50%;
    content: "";
    height: 16px;
    left: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 16px;
}
.setCorrectAnswer input:checked + label::before {
    background-color: #334ac0;
    border-color: #334ac0;
}
.subQuestionsContainer {
    float: left;
    margin: 0 0 40px;
    position: relative;
    width: 100%;
}
.subQuestionContainer {
    border-bottom: 1px solid #e5e5e5;
    float: left;
    margin: 0 0 20px;
    padding: 0 0 20px;
    position: relative;
    width: 100%;
}
.subQuestionTitle {
    float: left;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 40px;
    position: relative;
    width: 100%;
}
.subQuestionBody {
    float: left;
    position: relative;
    width: 100%;
}
/*--- BOOKMARKS ---*/
.bookmarksVerticalMenu {
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
.bookmarksMainButtonsContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    padding: 50px 0 0;
    position: relative;
    width: 100%;
}
.bookmarksMainButtons {
    background-color: #e1d5f7;
    border-radius: 5px;
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.bookmarksMainButton {
    border-radius: 5px;
    cursor: pointer;
    float: left;
    font-size: calc(14px + (16 - 14)*((100vw - 320px)/(2000 - 320)));
    font-weight: 600;
    padding: calc(10px + (15 - 10)*((100vw - 320px)/(2000 - 320))) 0;
    position: relative;
    text-align: center;
    width: 50%;
}
.bookmarksMainButton.active {
    background-color: #8b51ed;
    color: #fff;
}
.bookmarkTopics {
    float: left;
    margin: 20px 0 0;
    position: relative;
    width: 100%;
}
.bookmarkTopics .field label {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #1e1d28;
    float: left;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px;
    padding: 10px 20px 5px;
    position: relative;
    width: 100%;
}
/*--- SETTINGS ---*/
.settingsVerticalMenu {
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
.settingsContainer {
    float: left;
    padding: 50px 0 0;
    position: relative;
    width: 100%;
}
.settingsContainerInner {
    float: left;
    position: relative;
    width: 100%;
}
.settingsHeader {
    float: left;
    margin: 0 0 30px;
    position: relative;
    width: 100%;
}
.settingsTitle {
    color: #334ac0;
    float: left;
    font-size: calc(22px + (30 - 22)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    margin: 0 0 10px;
    position: relative;
    width: 100%;
}
.settingsTextContainer {
    float: left;
    position: relative;
    width: 100%;
}
.settingsText {
    color: #545465;
    float: left;
    font-size: 14px;
    position: relative;
    width: 100%;
}
.settingsWrapper {
    float: left;
    position: relative;
    width: 100%;
}
.settingsFormWrapper {
    float: left;
    position: relative;
    width: 100%;
}
.settingsFormButtons {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
.settingsFormButtons .cancelButton {
    margin: 0 0 0 20px;
}
.settingsTeachersContainer {
    float: left;
    margin: 0 0 40px;
    position: relative;
    width: 100%;
}
.settingsTeacher {
    float: left;
    margin: 0 0 10px;
    position: relative;
    width: 100%;
}
.settingsTeacher .teacherDetails {
    float: left;
    position: relative;
}
.settingsTeacher .deleteTeacher {
    cursor: pointer;
    float: left;
    margin: 0 5px 0 0;
    position: relative;
}
.settingsTeacher .teacherPending {
    float: left;
    position: relative;
}
.settingsTeacher:last-child {
    margin: 0;
}
.notificationsSettingsListHeader {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    padding: 15px 20px;
    position: relative;
    width: 100%;
}
.notificationsSettingsListContainer {
    float: left;
    position: relative;
    width: 100%;
}
.notificationsSettingsList {
    float: left;
    max-width: 980px;
    position: relative;
    width: 100%;
}
.notificationsSettingsListItem {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    padding: 20px;
    position: relative;
    width: 100%;
}
.notificationsSettingsListItem:nth-child(2n+1) {
    background-color: #fff;
}
.notificationsSettingsListHeaderMainContainer,
.notificationsSettingsListMainContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #1e1d28;
    float: left;
    font-size: 16px;
    position: relative;
    width: calc(100% - 320px);
}
.notificationsSettingsListHeaderOption,
.notificationsSettingsListOption {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #1e1d28;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 16px;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0 10px;
    position: relative;
    text-align: center;
    width: 160px;
}
.notificationsSettingsListHeaderOption:last-child,
.notificationsSettingsListOption:last-child {
    padding-right: 0;
}
.notificationsSettingsListOption label {
    display: none;
    font-size: 14px;
    margin: 0 0 0 5px;
}
.notificationsSettingsListHeaderMainContainer,
.notificationsSettingsListMainContainer,
.notificationsSettingsListHeaderOption {
    font-weight: 700;
}
.notificationsSettingsButtons {
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
.loginSettingsFieldsContainer {
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.loginSettingsFields {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin-left: -20px;
    position: relative;
    width: calc(100% + 40px);
}
.loginSettingsField {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    margin: 0 80px 15px 0;
    padding: 0 20px;
    position: relative;
}
.loginSettingsFieldRow {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin: 0 0 5px;
    position: relative;
}
.loginSettingsFieldRow .label {
    float: left;
    font-weight: 700;
    margin-right: 10px;
    position: relative;
}
.loginSettingsFieldButton {
    float: left;
    font-size: 14px;
    position: relative;
}
/*--- HELP ---*/
.helpVerticalMenu {
    float: left;
    margin: 40px 0 50px;
    position: relative;
    width: 100%;
}
.helpFormContainer {
    float: left;
    position: relative;
    width: 100%;
}
.helpFormContainer .helpForm {
    float: left;
    position: relative;
    width: 100%;
}
.helpFormContainer .helpForm .field label {
    color: #1e1d28;
    display: none;
    float: left;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px;
    position: relative;
    width: 100%;
}
.helpFormContainer .helpForm.contactUs .field label.contactUs,
.helpFormContainer .helpForm.reportABug .field label.reportABug,
.helpFormContainer .helpForm.suggestNewFeature .field label.suggestNewFeature {
    display: block;
}
.helpFormContainer .buttonsContainer {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    margin: 40px 0 0;
}
.selectField.contactUs,
.selectField .field {
    display: none;
}
.helpForm.reportABug .selectField,
.helpForm.suggestNewFeature .selectField,
.helpForm.reportABug .selectField .field.reportABug,
.helpForm.suggestNewFeature .selectField .field.suggestNewFeature {
    display: block;
    margin: 0 0 12px;
}
/*--- TAKE A TOUR ---*/
.takeATourContainer {
    float: left;
    margin: 50px 0 0;
    position: relative;
    width: 100%;
}
.takeATourContainerInner {
    float: left;
    position: relative;
    width: 100%;
}
.takeATourWrapper {
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.takeATourWrapperInner {
    float: left;
    max-width: 800px;
    position: relative;
    width: 100%;
}
.takeATourTitle {
    float: left;
    font-size: calc(28px + (60 - 28)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    line-height: 1;
    margin: 0 0 40px;
    position: relative;
    width: 100%;
}
.takeATourText {
    float: left;
    font-size: 14px;
    max-width: 760px;
    position: relative;
    width: 100%;
}
.takeATourSubmitForm {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 50px 0;
    position: relative;
    width: 100%;
}
.takeATourSubmitForm input {
    float: left;
    margin: 0 0 15px;
    position: relative;
}
.takeATourSubmitForm a {
    float: left;
    position: relative;
}
.tourContainer {
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
.tourSliderContainer {
    border-radius: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
#tourSlider {
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 16px -14px #000;
    -moz-box-shadow: 0 0 16px -14px #000;
    box-shadow: 0 0 16px -14px #000;
    float: left;
    margin: 0 !important;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.tourSliderItem {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    position: relative;
    width: 100%;
}
.tourSliderItemImageContainer {
    float: left;
    position: relative;
    width: 100%;
}
.tourSliderItemImage {
    float: left;
    position: relative;
    width: 100%;
}
.tourSliderItemTextsContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 30px 35px;
    position: relative;
    width: 100%;
}
.tourSliderItemTexts {
    float: left;
    position: relative;
    width: 100%;
}
.tourSliderItemTitle {
    color: #2b2a34;
    font-size: calc(22px + (30 - 22)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    margin: 0;
    position: relative;
    width: 100%;
}
.tourSliderItemText {
    color: #545465;
    float: left;
    font-size: 14px;
    margin: 15px 0 0;
    position: relative;
    width: 100%;
}
#tourSliderButtons {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    -webkit-transform: translateY(calc(-100% - 35px));
    -moz-transform: translateY(calc(-100% - 35px));
    transform: translateY(calc(-100% - 35px));
    width: 100%;
}
.tourSliderButton {
    -webkit-align-items: center;
    align-items: center;
    background-color: rgba(255,255,255,0.3);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    font-family: 'ccFont';
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    height: calc(26px + (40 - 26)*((100vw - 320px)/(2000 - 320)));
    -webkit-justify-content: center;
    justify-content: center;
    pointer-events: auto;
    width: calc(26px + (40 - 26)*((100vw - 320px)/(2000 - 320)));
}
#tourSliderCounter {
    color: #545465;
    float: left;
    margin: 0 25px;
    position: relative;
}
/* CC VIMEO VIDEO */
/* CC YOUTUBE VIDEO */
.ccVimeoVideoContainer,
.ccYoutubeVideoContainer {
    float: left;
    position: relative;
    width: 100%;
}
.ccVimeoVideo,
.ccYoutubeVideo {
    cursor: pointer;
    overflow: hidden;
    padding-top: 60%;
    position: relative;
}
.ccVimeoVideo iframe,
.ccYoutubeVideo iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.ccVimeoVideoThumb,
.ccYoutubeVideoThumb {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.ccVimeoVideoPlayButton,
.ccYoutubeVideoPlayButton {
    border-radius: 50%;
    border: 6px solid #fff;
    cursor: pointer;
    height: 80px;
    left: 50%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    -webkit-transform: translate3d( -50%, -50%, 0 );
    -moz-transform: translate3d( -50%, -50%, 0 );
    transform: translate3d( -50%, -50%, 0 );
    width: 80px;
    z-index: 20;
}
.ccVimeoVideoPlayButton::after,
.ccYoutubeVideoPlayButton::after {
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 14px 0 14px 20px;
    content: '';
    height: 0;
    left: 54%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate3d( -50%, -50%, 0 );
    -moz-transform: translate3d( -50%, -50%, 0 );
    transform: translate3d( -50%, -50%, 0 );
    width: 0;
}
/*--- REPORTS ---*/
.reportsVerticalMenu {
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
.reportsMainButtonsContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    padding: 50px 0 0;
    position: relative;
    width: 100%;
}
.reportsMainButtons {
    background-color: #e1d5f7;
    border-radius: 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.reportsMainButton {
    -webkit-align-items: center;
    align-items: center;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: calc(13px + (16 - 13)*((100vw - 320px)/(2000 - 320)));
    font-weight: 600;
    -webkit-justify-content: center;
    justify-content: center;
    padding: calc(10px + (15 - 10)*((100vw - 320px)/(2000 - 320))) 5px;
    position: relative;
    text-align: center;
    width: 25%;
}
.reportsMainButton.locked {
    opacity: 0.6;
    pointer-events: none;
}
.reportsMainButton.active {
    background-color: #334ac0;
    color: #fff;
}
.reportsMainContainer {
    float: left;
    position: relative;
    width: 100%;
}
.noReportsFound {
    float: left;
    position: relative;
    width: 100%;
}
.cardTopicHeader,
.cardAssignmentsHeader {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    position: relative;
    width: 100%;
}
.cardTopicTitleContainer {
    float: left;
    position: relative;
    width: calc(100% - 470px);
}
.cardAssignmentsTitleContainer {
    float: left;
    position: relative;
    width: calc(100% - 240px);
}
.cardTopicTitle,
.cardAssignmentsTitle {
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    float: left;
    position: relative;
}
.cardTopicTitle:hover,
.cardAssignmentsTitle:hover {
    color: #334ac0;
}
.cardTopicTitleIconContainer,
.cardAssignmentsTitleIconContainer {
    float: left;
    margin: calc(2px + (3 - 2)*((100vw - 320px)/(2000 - 320))) 15px 0 0;
    position: relative;
}
.cardTopicTitleIcon,
.cardAssignmentsTitleIcon {
    float: left;
    font-family: 'ccFont';
    font-size: calc(16px + (24 - 16)*((100vw - 320px)/(2000 - 320)));
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.cardTopicTitleLockedIcon {
    float: left;
    font-size: calc(16px + (24 - 16)*((100vw - 320px)/(2000 - 320)));
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.cardContainer.open .cardTopicTitleIcon,
.cardContainer.open .cardAssignmentsTitleIcon {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}
.cardTopicTitleLabel,
.cardAssignmentsTitleLabel {
    font-size: calc(18px + (30 - 18)*((100vw - 320px)/(2000 - 320)));
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.cardTopicTitleLabel strong,
.cardAssignmentsTitleLabel strong {
    font-weight: 700;
}
.cardTopicLevelTestButton {
    float: left;
    margin: 0 50px;
    position: relative;
}
.cardTopicCircleProgressContainer {
    float: left;
    margin-left: auto;
    position: relative;
    width: 114px;
}
.cardAssignmentsCircleProgressContainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    margin-left: auto;
    margin-right: 20px;
    width: 200px;
}
.cardAssignmentsCircleProgressStatic {
    -webkit-align-items: center;
    align-items: center;
    border: 10px solid #f6f6f9;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #334ac0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    height: 114px;
    line-height: 1.1;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 114px;
}
.cardAssignmentsCircleProgressNumber {
    float: left;
    font-size: 32px;
    font-weight: 700;
    position: relative;
}
.cardAssignmentsCircleProgressLabel {
    float: left;
    font-weight: 700;
    position: relative;
}
.cardAssignmentsCircleProgressNote {
    color: #334ac0;
    float: left;
    font-size: 16px;
    font-weight: 700;
    margin: 10px 0 0;
    position: relative;
    text-align: center;
    width: 100%;
}
.cardTopicDetails,
.cardAssignmentsDetails {
    border-top: 1px solid #f6f6f9;
    float: left;
    margin: 40px 0 0;
    padding: 45px 0 0;
    position: relative;
    width: 100%;
}
.teacherReportDetails {
    float: left;
    position: relative;
    width: 100%;
}
.cardSubtopicsList {
    float: left;
    position: relative;
    width: 100%;
}
.cardSubtopicListHeader,
.cardAssignmentsDetailsHeader,
.teacherReportDetailsHeader {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin: 0 0 45px;
    padding: 0 20px;
    position: relative;
    width: 100%;
}
.cardSubtopicMobileHeader,
.cardAssignmentsDetailsMobileHeader,
.teacherReportDetailsMobileHeader {
    display: none;
    float: left;
    margin: 0 0 20px;
    font-weight: 700;
    position: relative;
    text-align: center;
    width: 100%;
}
.cardSubtopicHeaderMainContainer,
.cardSubtopicMainContainer {
    float: left;
    margin-right: auto;
    max-width: 50%;
    position: relative;
    width: calc(100% - 580px);
}
.cardAssignmentsDetailsHeaderMainContainer,
.cardAssignmentsDetailsMainContainer {
    float: left;
    margin-right: auto;
    max-width: 50%;
    position: relative;
    width: calc(100% - 900px);
}
.cardAssignmentsDetailsHeaderMainContainer.small,
.cardAssignmentsDetailsMainContainer.small {
    width: calc(100% - 900px);
}
.cardSubtopicHeaderPracticeContainer,
.cardSubtopicPracticeContainer,
.cardSubtopicHeaderTestContainer,
.cardSubtopicTestContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 0 20px;
    position: relative;
    text-align: center;
    width: 200px;
}
.cardSubtopicHeaderKeyConceptsContainer,
.cardSubtopicKeyConceptsContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0 20px;
    position: relative;
    width: 180px;
}
.cardAssignmentsDetailsHeaderSecondaryContainer,
.cardAssignmentsDetailsSecondaryContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0 10px;
    position: relative;
    text-align: center;
    width: 180px;
}
.cardAssignmentsDetailsSecondaryContainerInner {
    float: left;
    position: relative;
}
.teacherReportDetailsHeaderColumn,
.teacherReportDetailsColumn {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    flex: 1 1 0px;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 1px;
    padding: 0 10px;
    position: relative;
    text-align: center;
}
.teacherReportDetailsHeaderColumn.name,
.teacherReportDetailsColumn.name {
    text-align: left;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.teacherReportDetailsColumn.lastSubmissions {
    -webkit-align-items: center;
    align-items: center;
}
.teacherReportDetailsColumn.lastSubmissions .lastSubmission {
    margin: 0 4px;
}
.teacherReportDetailsColumn.lastSubmissions .lastSubmission.completed,
.teacherReportDetailsColumn.lastSubmissions .lastSubmission.pending,
.teacherReportDetailsColumn.lastSubmissions .lastSubmission.incomplete {
    -webkit-align-items: center;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    font-size: 12px;
    -webkit-justify-content: center;
    justify-content: center;
    height: 20px;
    width: 20px;
}
.teacherReportDetailsColumn.lastSubmissions .lastSubmission.completed {
    background-color: #39a935;
}
.teacherReportDetailsColumn.lastSubmissions .lastSubmission.pending {
    background-color: #fbea0d;
}
.teacherReportDetailsColumn.lastSubmissions .lastSubmission.incomplete {
    background-color: #e63346;
}
.cardSubtopicHeaderMainContainer,
.cardAssignmentsDetailsHeaderMainContainer,
.teacherReportDetailsHeaderColumn {
    color: #1e1d28;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
}
.cardSubtopicHeaderPracticeContainer,
.cardSubtopicHeaderTestContainer,
.cardSubtopicHeaderKeyConceptsContainer,
.cardAssignmentsDetailsHeaderSecondaryContainer {
    color: #1e1d28;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    text-align: center;
}
.cardSubtopicListItem,
.cardAssignmentsDetailsListItem,
.teacherReportDetailsListItem {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 15px 20px;
    position: relative;
    width: 100%;
}
.cardSubtopicListItem:nth-child(2n+1),
.cardAssignmentsDetailsListItem:nth-child(2n+2),
.teacherReportDetailsListItem:nth-child(2n+2) {
    background-color: #f6f6f9;
}
.cardSubtopicListItem:nth-child(2n+2),
.cardAssignmentsDetailsListItem:nth-child(2n+1),
.teacherReportDetailsListItem:nth-child(2n+1) {
    background-color: #fff;
}
.cardSubtopicContainer,
.cardAssignmentsContainer,
.teacherReportContainer {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    position: relative;
    width: 100%;
}
.cardSubtopicTitleContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 0 0 10px;
    position: relative;
    width: 100%;
}
.cardAssignmentsDetailsTitleContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    position: relative;
    width: 100%;
}
.cardSubtopicTitle {
    float: left;
    font-size: 16px;
    font-weight: 700;
    position: relative;
}
.cardAssignmentsDetailsTitle {
    float: left;
    font-size: 16px;
    position: relative;
}
.cardSubtopicProgressLabel {
    color: #767676;
    font-weight: 400;
    padding: 0 7px;
    position: relative;
}
.cardSubtopicProgressLabel::before {
    background-color: #1e1d28;
    content: '';
    height: 15px;
    left: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 2px;
}
.cardSubtopicProgressContainer {
    float: left;
    position: relative;
    width: 100%;
}
.cardSubtopicProgress {
    border-radius: 20px;
    float: left;
    height: 25px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.cardSubtopicProgress svg {
    float: left;
    height: 25px;
    position: relative;
    width: 100%;
}
.cardSubtopicPracticeList,
.cardSubtopicTestList {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    position: relative;
    width: 100%;
}
.cardSubtopicPracticeListItem,
.cardSubtopicTestListItem {
    float: left;
    margin: 0 0 15px;
    position: relative;
}
.cardSubtopicPracticeListItem:last-child,
.cardSubtopicTestListItem:last-child {
    margin: 0;
}
.cardSubtopicPracticeListItem .buttonWithIcon,
.cardSubtopicTestListItem .buttonWithIcon,
.cardMockSet .buttonWithIcon {
    color: #1e1d28;
    font-size: calc(14px + (18 - 14)*((100vw - 320px)/(2000 - 320)));
}
.cardSubtopicPracticeListItem a.buttonWithIcon:hover,
.cardSubtopicTestListItem a.buttonWithIcon:hover,
.cardMockSet a.buttonWithIcon:hover {
    color: #334ac0;
}
.cardSubtopicPracticeListItem .buttonWithIcon .text {
    width: 90px;
}
.cardSubtopicTestListItem .buttonWithIcon .text {
    width: 120px;
}
.cardSubtopicPracticeListItem .buttonWithIcon .icon,
.cardSubtopicTestListItem .buttonWithIcon .icon,
.cardMockSet .buttonWithIcon .icon {
    color: #8f919d;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 20px;
    width: 14px;
}
.cardSubtopicPracticeListItem .buttonWithIcon .icon .fa-search,
.cardSubtopicTestListItem .buttonWithIcon .icon .fa-search,
.cardMockSet .buttonWithIcon .icon .fa-search {
    color: #334ac0;
    font-size: 13px;
}
.cardMockTitleContainer {
    float: left;
    position: relative;
    width: calc(100% - 600px);
}
.cardMockTitle {
    color: #1e1d28;
    float: left;
    font-size: 20px;
    font-weight: 700;
    position: relative;
}
.cardMockSetsContainer {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    position: relative;
    width: 600px;
}
.cardMockSet {
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 5px;
    position: relative;
    width: 25%;
}
.cardTestTopicsContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 0 30px 0 0;
    position: relative;
    width: 40%;
}
.cardTestLevelsContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 0 30px 0 0;
    position: relative;
    width: 30%;
}
.cardTestDurationContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 0 30px 0 0;
    position: relative;
    width: 30%;
}
.cardTestSubtitle {
    color: #1e1d28;
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    margin: 0 0 25px;
    position: relative;
    width: 100%;
}
.cardTestTopicsList,
.cardTestLevelsList {
    float: left;
    position: relative;
    width: 100%;
}
.cardTestTopicsListItem,
.cardTestLevelsListItem {
    float: left;
    font-size: calc(15px + (18 - 15)*((100vw - 320px)/(2000 - 320)));
    position: relative;
    width: 100%;
}
.cardContainer .cardTestReportButtonContainer {
    position: absolute;
    right: -50px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.cardContainer .cardTestReportButton {
    -webkit-align-items: center;
    align-items: center;
    background-color: #f6f6f9;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    font-size: 16px;
    height: 34px;
    -webkit-justify-content: center;
    justify-content: center;
    width: 34px;
}
.cardContainer .cardTestReportButton .fa-caret-right {
    font-size: 22px;
}
.reportCardContainer {
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.reportSynopsisWrapper {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: calc(30px + (50 - 30)*((100vw - 320px)/(2000 - 320))); calc(20px + (40 - 20)*((100vw - 320px)/(2000 - 320)));
    position: relative;
    width: 100%;
}
.reportSynopsisContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 0 0 50px;
    position: relative;
    width: 100%;
}
.reportSynopsisContainer:last-child {
    padding: 0;
}
.reportSynopsisHeader {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin: 0 0 20px;
    position: relative;
    width: 100%;
}
.reportSynopsisHeaderIcon {
    float: left;
    margin-right: 25px;
    position: relative;
    width: calc(23px + (27 - 23)*((100vw - 320px)/(2000 - 320)));
}
.reportSynopsisHeaderTitle {
    float: left;
    font-size: calc(22px + (44 - 22)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    margin-right: 25px;
    position: relative;
}
.reportSynopsisHeaderSubtitle {
    color: #586ee0;
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    margin-top: calc(5px + (10 - 5)*((100vw - 320px)/(2000 - 320)));
    position: relative;
}
.reportSynopsisListContainer {
    float: left;
    position: relative;
    width: 100%;
}
.reportSynopsisList {
    float: left;
    position: relative;
    width: 100%;
}
.reportSynopsisListItem {
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    padding: 12px 0;
    position: relative;
    width: 100%;
}
.reportSynopsisListItem:last-child {
    border: none;
}
.reportSynopsisListItemTitle {
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    margin-right: auto;
    max-width: calc(100% - 200px);
    position: relative;
}
.reportSynopsisListItemScore {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    padding-left: 20px;
    position: relative;
    width: 200px;
}
.reportSynopsisListItemScore .correct {
    color: #586ee0;
    float: left;
    font-weight: 700;
    position: relative;
}
.reportSynopsisListItemScore .sum {
    margin-right: 8px;
    float: left;
    position: relative;
}
.reportSynopsisListItemScore .label {
    float: left;
    position: relative;
}
.reportAnalysisWrapper {
    background-color: #f6f6f9;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    padding: 50px 0;
    position: relative;
    width: 100%;
}
.reportAnalysisContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 0 calc(20px + (40 - 20)*((100vw - 320px)/(2000 - 320)));
    position: relative;
    width: 50%;
}
.reportAnalysisContainer.performance {
    border-left: 1px solid #2b2a35;
}
.reportAnalysisHeader {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    float: left;
    margin: -10px 0 20px;
    position: relative;
    width: 100%;
}
.reportAnalysisHeaderIcon {
    float: left;
    margin-right: 25px;
    position: relative;
    width: calc(28px + (34 - 28)*((100vw - 320px)/(2000 - 320)));
}
.reportAnalysisHeaderTitle {
    float: left;
    font-size: calc(22px + (44 - 22)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    margin-right: 25px;
    position: relative;
}
.reportAnalysis {
    float: left;
    margin: 25px 0 0;
    position: relative;
    width: 100%;
}
.reportAnalysisScoreContainer {
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.reportAnalysisScore {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    float: left;
    position: relative;
}
.reportAnalysisScore .correct {
    color: #586ee0;
    float: left;
    font-size: calc(45px + (60 - 45)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    margin: 0 3px;
    position: relative;
}
.reportAnalysisScore .label {
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    font-weight: 300;
    margin: 0 3px;
    position: relative;
}
.reportAnalysisDetailsContainer {
    float: left;
    margin: 15px 0 0;
    position: relative;
    width: 100%;
}
.reportAnalysisDetailsList {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.reportAnalysisDetailsListItem {
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    margin: 10px 20px 0;
    position: relative;
}
.reportAnalysisDetailsListItem .number {
    color: #586ee0;
    float: left;
    font-weight: 700;
    margin: 0 5px 0 0;
    position: relative;
}
.reportAnalysisDetailsListItem .label {
    float: left;
    position: relative;
}
.reportAnalysisExtendedMessage {
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    margin: 20px 0 0;
    position: relative;
    text-align: center;
    width: 100%;
}
.reportAnalysisExtendedMessage .number {
    color: #586ee0;
    font-weight: 700;
}
.reportAnalysisGraphicsContainer {
    float: left;
    margin: 30px 0 0;
    position: relative;
    width: 100%;
}
.reportAnalysisGraphics {
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    padding: 0 50px 0 0;
    position: relative;
}
.reportAnalysisGraphics:last-child {
    padding: 0;
}
.reportAnalysisCircleProgressContainer {
    float: left;
    margin-left: auto;
    position: relative;
    width: 114px;
}
.reportAnalysisCircleProgressContainer .button1 {
    background-color: #586ee0;
    height: 8px;
    left: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: translate(-50%,-17px);
    -moz-transform: translate(-50%,-17px);
    transform: translate(-50%,-17px);
    width: 34px;
}
.reportAnalysisCircleProgressContainer .button2 {
    background-color: #586ee0;
    height: 5px;
    left: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: translate(-50%,-9px);
    -moz-transform: translate(-50%,-9px);
    transform: translate(-50%,-9px);
    width: 16px;
}
.reportAnalysisCircleProgressContainer .button3 {
    background-color: #586ee0;
    height: 9px;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: translate(4px,15px) rotate(51deg);
    -moz-transform: translate(4px,15px) rotate(51deg);
    transform: translate(4px,15px) rotate(51deg);
    width: 16px;
}
.reportAnalysisGraphicsLabel {
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    position: relative;
}
.reportButtonsContainer {
    float: left;
    margin: 40px 0 0;
    position: relative;
    width: 100%;
}
.reportButtonsContainer .generalButton {
    margin: 10px 50px 0 0;
}
/* SCROLLED TABLE */
.scrolledTableToolbar {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin: 0 0 50px;
    position: relative;
    width: 100%;
}
.scrolledTableFiltersContainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin-left: -15px;
    position: relative;
    width: calc(100% + 30px);
}/*
.scrolledTableSortingContainer {
    float: left;
    margin-left: auto;
    max-width: 300px;
    position: relative;
}*/
.scrolledTableToolbar .filterField,
.scrolledTableToolbar .sortingField {
    padding: 0 15px;
}
.scrolledTableToolbar .selectField {
    min-width: 180px;
}
.scrolledTableToolbar .filterField {
    -webkit-appearance: none;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    position: relative;
    width: 180px;
}
.scrolledTableToolbar .filterField label,
.scrolledTableToolbar .sortingField label {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 10px 5px;
    position: relative;
}
.scrolledTableToolbar .filterField input[type="text"],
.scrolledTableToolbar .filterField input[type="date"] {
    background-color: #334ac0;
    border: 1px solid #334ac0;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    margin: 0;
    outline: none;
    padding: 14px 10px 15px;
    position: relative;
}
.scrolledTableContainer {
    float: left;
    position: relative;
    overflow-x: auto;
    width: 100%;
}
.scrolledTable {
    float: left;
    position: relative;
    width: 100%;
}
.scrolledTableBox {
    -webkit-align-items: center;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    margin: 0 0 20px;
    min-width: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.scrolledTableWrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    position: relative;
    width: 100%;
}
.scrolledTableHeader {
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    margin: 0 0 30px;
    padding: 30px 40px 0;
    position: relative;
}
.createAssignmentsTable .scrolledTableHeader {
    color: #fff;
    padding: 65px 45px 35px;
}
.scrolledTableHeaderInner {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    padding: 0 20px;
    position: relative;
}
.createAssignmentsTable .scrolledTableHeaderInner {
    padding: 0;
}
.scrolledTableHeaderColumn {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    font-size: 20px;
    font-weight: 700;
    padding: 0 10px;
    position: relative;
}
.scrolledTableLimitContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    padding: 0 40px;
    position: relative;
    width: 100%;
}
.scrolledTableLimit {
    float: left;
    max-width: 90px;
    position: relative;
    width: 100%;
}
.scrolledTableBody {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    padding: 0 40px 30px;
    position: relative;
    width: auto;
}
.createAssignmentsTable .scrolledTableBody {
    padding: 40px;
}
.scrolledTableRow {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 15px 20px;
    position: relative;
}
.createAssignmentsTable .scrolledTableRow {
    padding: 15px 5px;
}
.scrolledTableRow:nth-child(2n+1) {
    background-color: #f6f6f9;
}
.scrolledTableRowInner {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    float: left;
    min-width: 100%;
    position: relative;
}
.scrolledTableColumn {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    float: left;
    padding: 0 10px;
    position: relative;
}
.scrolledTableColumn.delete,
.scrolledTableColumn.delete a {
    font-family: 'ccFont';
    font-size: 18px;
    font-weight: 700;
}
.scrolledTableColumn p {
    margin: 0;
}
.createAssignmentsTable .scrolledTableColumn a {
    color: #2b2a35;
}
.createAssignmentsTable .scrolledTableColumn a:hover {
    color: #5c6ecd;
}
/*--- QUIZ ---*/
.noQuestions {
    float: left;
    font-size: calc(16px + (30 - 16)*((100vw - 320px)/(2000 - 320)));
    font-weight: 700;
    position: relative;
    width: 100%;
}
.quizMainWrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    min-height: 100vh;
    position: relative;
    width: 100%;
}
.quizSidebar {
    background-color: #20202c;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    height: 100vh;
    left: 0;
    padding: 30px 20px;
    position: fixed;
    top: 0;
    width: 420px;
}
.quizSidebarHeader {
    float: left;
    margin: 0 0 25px;
    position: relative;
    width: 100%;
}
.quizLessonName,
.quizTopicName,
.quizLevel {
    color: #818996;
    float: left;
    position: relative;
    width: 100%;
}
.quizSubtopicName {
    color: #586ee0;
    float: left;
    position: relative;
    width: 100%;
}
.quizSidebarInfo {
    float: left;
    margin: 0 0 25px;
    position: relative;
    width: 100%;
}
.quizName {
    color: #fff;
    float: left;
    font-size: 30px;
    font-weight: 700;
    position: relative;
    width: 100%;
}
.adminQuizId {
    color: #fff;
    float:left;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    width: 100%;
}
.quizMobileName .adminQuizId {
    color: #20202c;
    width: auto;
}
.quizAttempts {
    color: #818996;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    font-size: 14px;
    position: relative;
    width: 100%;
}
.quizAttemptsTitle {
    float: left;
    margin-right: 6px;
    position: relative;
}
.quizAttemptsValue {
    float: left;
    font-weight: 700;
    position: relative;
}
.quizSidebarButtons {
    -webkit-align-items: center;
    align-items: center;
    bottom: 0;
    color: #818996;
    display: -webkit-flex;
    display: flex;
    font-size: 20px;
    right: 0;
    position: absolute;
}
.quizSidebarButtons span {
    cursor: pointer;
    margin-left: 10px;
}
.quizSidebarButtons span.active {
    color: #586ee0;
}
.quizShowDetails {
    bottom: 2px;
    display: none;
    float: left;
    position: relative;
}
.quizShowDetails span {
    margin: 0;
}
.quizMobileDetailsContainer {
    background-color: #f6f6f9;
    bottom: -20px;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #545465;
    font-size: 14px;
    opacity: 0;
    padding: 15px 0;
    pointer-events: none;
    position: absolute;
    right: -60px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 280px;
    z-index: 100;
}
.quizMobileDetailsContainer.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.quizMobileDetailsContainer::before {
    border-color: transparent transparent #f6f6f9 transparent;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    content: '';
    height: 0;
    position: absolute;
    right: 60px;
    top: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
    width: 0;
}
.quizMobileDetailsLesson {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 0 15px;
    width: 100%;
}
.quizMobileDetailsContainer .quizLessonName,
.quizMobileDetailsContainer .quizTopicName {
    color: #545465;
    font-weight: 700;
}
.quizMobileDetailsContainer .quizSubtopicName {
    font-size: 16px;
}
.quizMobileDetailsAvailableTime {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-top: 1px solid #e5e5e5;
    color: #545465;
    float: left;
    font-size: 16px;
    margin: 10px 0 0;
    padding: 10px 15px 0;
    width: 100%;
}
.quizQuestionsListContainer {
    float: left;
    margin: 30px 0 0;
    overflow-x: hidden;
    opacity: 0;
    position: relative;
    -webkit-transition: opacity 0.2s ease 0s;
    -moz-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
    width: 100%;
}
.quizQuestionsList {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    position: relative;
    width: 100%;
}
.quizQuestionsList.grid {
    margin-left: -6px;
    width: calc(100% + 12px);
}
.quizQuestionsListItem {
    border-radius: 5px;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    float: left;
    margin: 0 0 3px;
    position: relative;
    -webkit-transition: background-color 0.3s ease 0s;
    -moz-transition: background-color 0.3s ease 0s;
    transition: background-color 0.3s ease 0s;
    width: 100%;
}
.quizQuestionsListItem:hover,
.quizQuestionsListItem.active {
    background-color: rgba(255,255,255,0.05);
}
.quizQuestionsList.grid .quizQuestionsListItem {
    background-color: transparent !important;
    margin: 0 6px 12px;
    width: 60px;
}
.quizQuestionsListItemNumber {
    -webkit-align-items: center;
    align-items: center;
    border-radius: 5px;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 20px;
    font-weight: 700;
    -webkit-justify-content: center;
    justify-content: center;
    height: 60px;
    position: relative;
    width: 60px
}
.quizQuestionsListItemNumber.answered {
    color: #3dcda4;
}
.quizQuestionsListItem.active .quizQuestionsListItemNumber {
    color: #586ee0;
}
.quizQuestionsList.grid .quizQuestionsListItemNumber {
    background-color: rgba(255,255,255,0.05);
}
.quizQuestionsListItemTitle {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    float: left;
    font-size: 14px;
    line-height: 1.4;
    padding: 22px 20px 22px 0;
    position: relative;
    width: calc(100% - 60px);
}
.quizQuestionsListItemTitle p {
    margin: 0;
}
.quizQuestionsList.grid .quizQuestionsListItemTitle {
    display: none;
}
.quizContainer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    position: relative;
    width: calc(100% - 420px);
}
.quizContainerHeader {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 20px 50px;
    position: relative;
    width: 100%;
}
.quizContainerHeaderInner {
    border-bottom: 1px solid #e5e5e5;
    float: left;
    min-height: 55px;
    padding: 0 0 15px;
    position: relative;
    width: 100%;
}
.quizMobileName {
    color: #20202c;
    display: none;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    font-size: 30px;
    font-weight: 700;
    margin: 0 20px 0 0;
    max-width: calc(100% - 185px);
    position: relative;
}
.quizTimerContainer {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    float: left;
    position: relative;
    width: 100%;
}
.quizTimerButtons {
    float: left;
    position: relative;
}
.quizTimerButton {
    -webkit-align-items: center;
    align-items: center;
    background-color: #545465;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 10px;
    height: 24px;
    -webkit-justify-content: center;
    justify-content: center;
    margin-right: 10px;
    position: relative;
    width: 24px;
}
.quizTimerButton.hidden {
    display: none;
}
.quizTimer {
    color: #545465;
    float: left;
    font-size: 16px;
    font-weight: 700;
    position: relative;
}
.quizAvailableTime {
    color: #545465;
    float: left;
    font-size: 16px;
    margin: 10px 0 0;
    position: relative;
    width: 100%;
}
.quizHeaderButtons {
    -webkit-align-items: center;
    align-items: center;
    bottom: 5px;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    right: 0;
}
.quizMobileSidebarToggler {
    cursor: pointer;
    display: none;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    height: 16px;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 5px 0 0;
    pointer-events: auto;
    position: relative;
    -webkit-transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
    -moz-transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
    transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
    width: 22px;
    z-index: 20;
}
#quizMobileSidebarTogglerLine1,
#quizMobileSidebarTogglerLine2,
#quizMobileSidebarTogglerLine3 {
    background-color: #818996;
    border-radius: 2px;
    height: 4px;
    position: relative;
    -webkit-transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
    -moz-transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
    transition: transform .33s cubic-bezier(.54,-.81,.57,.57);
}
.quizMobileSidebarToggler:hover #quizMobileSidebarTogglerLine1,
.quizMobileSidebarToggler:hover #quizMobileSidebarTogglerLine2,
.quizMobileSidebarToggler:hover #quizMobileSidebarTogglerLine3 {
    background-color: #545465;
}
#quizMobileSidebarTogglerLine2 {
    -webkit-transition: opacity .11s cubic-bezier(.54,-.81,.57,.57) 0.22s;
    -moz-transition: opacity .11s cubic-bezier(.54,-.81,.57,.57) 0.22s;
    transition: opacity .11s cubic-bezier(.54,-.81,.57,.57) 0.22s;
}
#mobileMenuToggler.active #quizMobileSidebarTogglerLine2 {
    -webkit-transition: opacity .22s cubic-bezier(.54,-.81,.57,.57) 0s;
    -moz-transition: opacity .22s cubic-bezier(.54,-.81,.57,.57) 0s;
    transition: opacity .22s cubic-bezier(.54,-.81,.57,.57) 0s;
}
#quizMobileSidebarTogglerLine1 {
    transform-origin: center;
    width: 100%;
}
#quizMobileSidebarTogglerLine2 {
    width: 100%;
}
#quizMobileSidebarTogglerLine3 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
    transform-origin: center;
    width: 100%;
}
.quizMobileSidebarToggler.active #mquizMobileSidebarTogglerLine1 {
    -webkit-transform: rotate(45deg) translate(5px,6px);
    -moz-transform: rotate(45deg) translate(5px,6px);
    transform: rotate(45deg) translate(5px,6px);
}
.quizMobileSidebarToggler.active #quizMobileSidebarTogglerLine2 {
    opacity: 0;
}
.quizMobileSidebarToggler.active #quizMobileSidebarTogglerLine3 {
    -webkit-transform: rotate(-45deg) translate(6px,-8px);
    -moz-transform: rotate(-45deg) translate(6px,-8px);
    transform: rotate(-45deg) translate(6px,-8px);
}
.quizCloseButtonContainer {
    float: left;
    position: relative;
}
.quizCloseButton {
    color: #818996;
    cursor: pointer;
    font-family: 'ccFont';
    font-size: 36px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.quizCloseButton:hover {
    color: #545465;
}
.quizContainerInner {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 20px 50px;
    position: relative;
    width: 100%;
}
.quizQuestionTop {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    margin: 0 0 calc(40px + (90 - 40)*((100vw - 320px)/(2000 - 320)));
    position: relative;
    width: 100%;
}
.quizQuestionTopTitle {
    color: #586ee0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    font-size: 16px;
    font-weight: 700;
    float: left;
    margin: 0 0 3px;
    position: relative;
    width: calc(100% - 140px);
}
.quizQuestionId {
    color: #586ee0;
    float:left;
    font-weight: 700;
    position: relative;
    width: 100%
}
.quizQuestionTopDetailsContainer {
    float: left;
    overflow: hidden;
    position: relative;
    width: calc(100% - 190px);
}
.quizQuestionTopDetails {
    display: -webkit-flex;
    display: flex;
    float: left;
    margin-left: -10px;
    position: relative;
    width: calc(100% + 20px);
}
.quizQuestionTopDetailsItem {
    color: #545465;
    float: left;
    padding: 0 10px;
    position: relative;
}
.quizQuestionTopDetailsItem.quizQuestionTopic {
    margin: 5px 0;
}
.quizQuestionTopDetailsItem::before {
    background-color: #545465;
    content: '';
    height: 14px;
    left: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1px;
}
.quizQuestionTopTools {
    -webkit-align-items: center;
    align-items: center;
    bottom: 0;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    right: 0;
}
.quizQuestionTopTools .helpContainer,
.quizQuestionTopTools .bookmarkButtonContainer {
    float: left;
    margin: 0 0 0 25px;
    position: relative;
    right: auto;
    top: auto;
}
.quizQuestionTopTools .reportABugContainer {
    float: left;
    margin: 0 0 0 25px;
    position: relative;
}
.quizQuestionTopTools .helpButton,
.quizQuestionTopTools .reportABug {
    color: #b0b5bd;
    cursor: pointer;
    float: left;
    font-size: 25px;
    position: relative;
}
.reportABugFormContainer {
    background-color: #fff;
    border-radius: 5px;
    bottom: -20px;
    -webkit-box-shadow: 0 0 22px -14px #000;
    -moz-box-shadow: 0 0 22px -14px #000;
    box-shadow: 0 0 22px -14px #000;
    max-width: 95vw;
    position: absolute;
    right: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    width: 640px;
    z-index: 100;
}
.reportABugFormHeader {
    background-color: #f6f6f9;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #2b2a34;
    float: left;
    font-size: 20px;
    font-weight: 700;
    padding: 30px 35px;
    position: relative;
    width: 100%;
}
.reportABugFormBody {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 40px 35px;
    position: relative;
    width: 100%;
}
.reportABugFormField {
    float: left;
    margin: 0 0 12px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.reportABugFormField.radioGroup {
    margin: 0;
}
.reportABugFormField .radioGroupInner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin-left: -10px;
    position: relative;
    width: calc(100% + 20px);
}
.radioGroupItem {
    float: left;
    padding: 0 9px 18px;
    position: relative;
}
.reportABugFormField.radioGroup .radioButton {
    -webkit-align-items: center;
    align-items: center;
    background-color: #f4f5fd;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    color: #545465;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 14px;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 10px;
    position: relative;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.reportABugFormField.radioGroup .radioButton:hover,
.reportABugFormField.radioGroup input:checked + .radioButton {
    background-color: #334ac0;
    color: #fff;
}
.reportABugFormField textarea {
    -webkit-appearance: none;
    border: 1px solid #f4f5fd;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    height: 220px;
    padding: 10px;
    outline: none;
    position: relative;
    resize: none;
    width: 100%;
}
.reportABugFormButtons .formButton {
    background-color: #f4f5fd;
    color: #545465;
    font-weight: 700;
    width: 100%;
}
.reportABugFormButtons .formButton:hover {
    background-color: #334ac0;
    color: #fff;
}
.quizQuestionBody {
    float: left;
    position: relative;
    width: 100%;
}
.quizQuestionDescription {
    color: #545465;
    float: left;
    font-size: 20px;
    position: relative;
    width: 100%;
}
.quizQuestionDescription ul,
.quizQuestionDescription ol {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    width: 100%;
}
.quizQuestionContainer {
    float: left;
    position: relative;
    width: 100%;
}
.quizQuestionForm {
    float: left;
    position: relative;
    width: 100%;
}
.cardsList.answersList {
    margin: 20px 0 0;
}
.answerContainer {
    float: left;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.cardsList.answersList .cardContainer {
    border: 2px solid transparent;
    cursor: pointer;
}
.answerContainer.isCorrect .cardContainer {
    border-color: #3dcda4 !important;
}
.cardsList.answersList .cardContainer.correctAnswer {
    cursor: default;
    border-color: #3dcda4 !important;
    padding: 30px 20px;
}
.correctAnswerFlag {
    color: #3dcda4;
    font-size: 11px;
    font-weight: 600;
    position: absolute;
    right: 10px;
    top: 5px;
}
.answerPrefix {
    -webkit-align-items: center;
    align-items: center;
    background-color: #f4f5fd;
    border-radius: 50%;
    color: #545465;
    display: -webkit-flex;
    display: flex;
    float: left;
    font-size: 20px;
    font-weight: 700;
    height: 40px;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 40px;
}
.answerBody {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    float: left;
    font-size: 20px;
    padding: 0 35px;
    position: relative;
    width: calc(100% - 40px);
}
.answerBody label {
    cursor: pointer;
    float: left;
    font-size: 20px;
    position: relative;
    width: 100%;
}
.cardsList.answersList.checkList input:checked + .cardContainer,
.cardsList.answersList.radioGroup input:checked + .cardContainer {
    border-color: #586ee0;
    -webkit-box-shadow: 0 0 22px -14px #000;
    -moz-box-shadow: 0 0 22px -14px #000;
    box-shadow: 0 0 22px -14px #000;
}
.cardsList.answersList.checkList input:checked + .cardContainer .answerPrefix,
.cardsList.answersList.radioGroup input:checked + .cardContainer .answerPrefix {
    background-color: #586ee0;
    color: #fff;
}
.cardsList.answersList.text input {
    -webkit-appearance: none;
    outline: none;
}
.cardsList.answersList.editor .cardContainer {
    padding: 30px;
}
.quizMultipleQuestionsContainer {
    float: left;
    position: relative;
    width: 100%;
}
.quizMultipleQuestion {
    float: left;
    margin: 30px 0 0;
    position: relative;
    width: 100%;
}
.quizMultipleQuestionTitleContainer {
    float: left;
    position: relative;
    width: 100%;
}
.quizMultipleQuestionTitle {
    color: #545465;
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    position: relative;
    width: calc(100% - 200px);
}
.quizMultipleQuestionTitle ul {
    list-style: inside;
    padding-left: 20px;
}
.quizMultipleQuestionMarks {
    color: #545465;
    float: left;
    font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    position: relative;
    text-align: right;
    width: 200px;
}
.viewSolutionContainer {
    float: left;
    margin: 45px 0 0;
    position: relative;
    width: 100%;
}

.cardContainer.viewSolutionButton {
    background-color: #334ac0;
    color: #fff;
}
.cardContainer.viewSolutionButton .cardTitle {
    cursor: pointer;
    font-size: 16px;
}
.cardContainer.viewSolutionButton .cardToggle {
    color: #fff;
}
.questionButtons {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    margin: 45px 0 0;
    position: relative;
    width: 100%;
}
.questionButtons .generalPreviousButton {
    margin: 0 45px 0 0;
}
.quizFinishButton {
    float: left;
    margin-left: auto;
    position: relative;
}
#ccFooter {
    background-color: #fff;
    float: left;
    padding: 15px 0;
    position: relative;
    width: 100%;
}
#ccFooter .ccPage {
    max-width: 100%;
}
.ccFooterInner {
    float: left;
    position: relative;
    width: 100%;
}
#ccCopyrights {
    color: #545465;
    float: left;
    font-size: 10px;
    position: relative;
    width: 100%;
}
#ccCopyrights a {
    color: #2b2a34;
}
#ccCopyrights a:hover {
    color: #334ac0;
}
.ccCopyrightsContainer {
    float: left;
    position: relative;
    width: 100%;
}
.ccDisclaimerWrapper {
    float: left;
    margin: 0 0 10px;
    position: relative;
    width: 100%;
}
.ccCopyrightsWrapper {
    float: left;
    position: relative;
    width: 100%;
}
.ccCopyrights {
    float: left;
    margin-right: 5px;
    position: relative;
}
.siteUpdated {
    color: #2b2a35;
    display: inline-block;
    float: left;
    font-weight: 700;
    position: relative;
}
mjx-container[jax="CHTML"],
mjx-container.MathJax {
    font-size: 140% !important;
    line-height: 2 !important;
}
.keyConcepts mjx-container[jax="CHTML"],
.keyConcepts mjx-container.MathJax,
.keyConcepts mjx-container.MathJax * {
    font-size: 100% !important;
}
mjx-container[jax="CHTML"] *,
mjx-container.MathJax * {
    font-family: 'Latin Modern' !important;
}
img.Wirisformula {
    display: inline-block;
    margin: 0 3px;
}
.stripeMainContainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: relative;
    width: 100%;
}
.stripeMainContainer #cardNumber,
.stripeMainContainer #cardExpire,
.stripeMainContainer #cardCvc {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    background-color: #fff;
    float: left;
    height: 51px;
    margin: 0 0 4px;
    padding: 0 20px;
    position: relative;
    width: 100%;
}
.stripeMainContainer #cardExpire,
.stripeMainContainer #cardCvc {
    width: calc(50% - 2px);
}
.stripeMainContainer #cardNumber > div,
.stripeMainContainer #cardNumber iframe,
.stripeMainContainer #cardExpire > div,
.stripeMainContainer #cardExpire iframe,
.stripeMainContainer #cardCvc > div,
.stripeMainContainer #cardCvc iframe {
    float: left;
    position: relative;
    width: 100%;
}

/* Profile Pic */
.field .dropzone {
    background-color: #fff;
    -webkit-appearance: none;
    border: 1px solid #e5e5e5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
}
.field .dropzone:after {
    bottom: auto;
    content: '+';
    font-size: 50px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.field .dropzone img {
    max-width: 10000%;
}
.field .dropzone .tools {
    bottom: 0;
    left: 100%;
    position: absolute;
    right: auto;
    top: auto;
    z-index: 999;
    display: inline-block;
}
.field .dropzone .btn {
    -webkit-align-items: center;
    align-items: center;
    background-image: none;
    border: 1px solid transparent;
    /*border-radius: 4px;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    height: 21px;
    line-height: 1;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 4px 0 0 5px;
    padding: 6px 12px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    width: 21px;
}
.field .dropzone .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.field .dropzone .btn-warning {
    color: #fff;
    background-color: #e6a700;
    border-color: #e6a700;
}
.field .dropzone .btn-danger {
    color: #fff;
    background-color: #dd2e1f;
    border-color: #dd2e1f;
}
.field .dropzone .btn-success {
    color: #fff;
    background-color: #60aa14;
    border-color: #60aa14;
}
.field .dropzone .btn-info {
    color: #fff;
    background-color: #00aeb3;
    border-color: #00aeb3;
}

@media (max-width: 1750px) {
    .reportAnalysisGraphics {
        -webkit-align-items: center;
        align-items: center;
        -webkit-flex-direction: column;
        flex-direction: column;
        margin: 0;
        width: 50%;
    }
    .reportAnalysisCircleProgressContainer {
        margin: 0;
    }
    .reportAnalysisGraphicsLabel {
        margin: 10px 0 0;
        text-align: center;
    }
}
@media (max-width: 1600px) {
    .cardAssignmentsDetailsHeaderMainContainer,
    .cardAssignmentsDetailsMainContainer {
        width: calc(100% - 750px);
    }
    .cardAssignmentsDetailsHeaderMainContainer.small,
    .cardAssignmentsDetailsMainContainer.small {
        width: calc(100% - 750px);
    }
    .cardAssignmentsDetailsHeaderSecondaryContainer,
    .cardAssignmentsDetailsSecondaryContainer {
        width: 150px;
    }
}
@media (max-width: 1500px) {
    .cardSubtopicHeaderMainContainer,
    .cardSubtopicMainContainer {
        width: calc(100% - 490px);
    }
    .cardSubtopicHeaderPracticeContainer,
    .cardSubtopicPracticeContainer {
        width: 160px;
    }
    .cardSubtopicHeaderTestContainer,
    .cardSubtopicTestContainer {
        width: 180px;
    }
    .cardSubtopicHeaderKeyConceptsContainer,
    .cardSubtopicKeyConceptsContainer {
        width: 150px;
    }
    .cardTestTopicsContainer {
        width: 50%;
    }
    .cardTestLevelsContainer,
    .cardTestDurationContainer {
        width: 25%;
    }
    .myWalletCircleProgressStatic {
        border-width: calc(6px + (12 - 6)*((100vw - 320px)/(2000 - 320)));
        height: calc(60px + (150 - 60)*((100vw - 320px)/(2000 - 320)));
        width: calc(60px + (150 - 60)*((100vw - 320px)/(2000 - 320)));
    }
    .myWalletSummaryItem .myWalletCircleProgressStatic {
        height: calc(80px + (180 - 80)*((100vw - 320px)/(2000 - 320)));
        width: calc(80px + (180 - 80)*((100vw - 320px)/(2000 - 320)));
    }
    .myWalletCircleProgressNumber {
        font-size: calc(22px + (34 - 22)*((100vw - 320px)/(2000 - 320)));
    }
    .myWalletCircleProgressNote {
        font-size: calc(14px + (16 - 14)*((100vw - 320px)/(2000 - 320)));
    }
    .myWalletSummaryItem .myWalletCircleProgressNote {
        font-size: calc(16px + (20 - 16)*((100vw - 320px)/(2000 - 320)));
    }
}
@media (max-width: 1450px) {
    .cardAssignmentsDetailsHeaderMainContainer,
    .cardAssignmentsDetailsMainContainer {
        width: calc(100% - 600px);
    }
    .cardAssignmentsDetailsHeaderMainContainer.small,
    .cardAssignmentsDetailsMainContainer.small {
        width: calc(100% - 600px);
    }
    .cardAssignmentsDetailsHeaderSecondaryContainer,
    .cardAssignmentsDetailsSecondaryContainer {
        width: 120px;
    }
}
@media (max-width: 1300px) {
    .appWrapper {
        margin-top: 75px;
    }
    #ccHeader {
        left: 0;
        position: fixed;
        top: 0;
        z-index: 1000;
    }
    #mobileMenu {
        display: block;
    }
    #ccSidebar {
        display: none;
    }
    #ccMainContentContainer.withSidebar #ccMainContentWrapper {
        width: 100%;
    }
    #ccMainContentContainer.withSidebar #ccMainContent {
        padding: 40px 30px;
    }
    .learnMainIcon,
    .builderMainIcon,
    .builderMainIcon.ownIcon,
    .builderMainIcon.own.subject,
    .builderMainIcon.ownSubjectIcon,
    .builderMainIcon.own.lesson,
    .builderMainIcon.mockIcon,
    .builderMainIcon.mock.subject,
    .builderMainIcon.mockSubjectIcon,
    .builderMainIcon.mock.lesson,
    .builderMainIcon.assignmentsOwnIcon,
    .builderMainIcon.assignmentsMockIcon,
    .builderMainIcon.assignmentsPracticeIcon,
    .builderMainIcon.assignmentsReadingIcon,
    .bookmarksMainIcon,
    .bookmarksMainIcon.teacher,
    .referMainIcon,
    .libraryMainIcon,
    .libraryCreateIcon,
    .classroomMainIcon,
    .notificationsMainIcon,
    .assignmentsMainIcon,
    .createAssignmentsMainIcon,
    .settingsMainIcon,
    .reportsMainIcon,
    .reportsMainIcon.teacher
    .reportMainIcon,
    .helpMainIcon,
    .helpMainIcon.teacher {
        right: 0;
    }
    .learnMainTitleContainer,
    .builderMainTitleContainer,
    .bookmarksMainTitleContainer,
    .libraryMainTitleContainer,
    .classroomMainTitleContainer,
    .notificationsMainTitleContainer,
    .assignmentsMainTitleContainer,
    .settingsMainTitleContainer,
    .reportsMainTitleContainer,
    .reportMainTitleContainer,
    .helpMainTitleContainer,
    .learnMainText,
    .builderMainText,
    .bookmarksMainText,
    .libraryMainText,
    .classroomMainText,
    .notificationsMainText,
    .referMainText,
    .assignmentsMainText,
    .settingsMainText,
    .reportsMainText,
    .reportMainText,
    .helpMainText {
        width: 78%;
    }
    .learnMainTitleContainer,
    .learnMainText {
        width: calc(100% - (100px + (560 - 100)*((100vw - 320px)/(2000 - 320))));
    }
    .quizSidebar {
        width: 320px;
    }
    .quizContainer {
        width: calc(100% - 320px);
    }
    .quizQuestionsList.grid .quizQuestionsListItem {
        width: 50px;
    }
    .quizQuestionsListItemNumber {
        height: 50px;
        width: 50px;
    }
    .quizContainerHeader {
        padding: 20px;
    }
    .quizContainerInner {
        padding: 20px;
    }
    .quizQuestionDescription,
    .answerBody {
        font-size: 17px;
    }
    .reportABug .tooltip {
        left: auto;
        right: -10px;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        transform: translateY(100%);
    }
    .reportABug .tooltip::before {
        left: auto;
        right: 13px;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        transform: translateY(-100%);
        width: 0;
    }
    .noQuestions {
        padding: 70px 0 0;
    }
    .cardContainer .tooltip {
        bottom: 83px;
        left: 83px;
    }
    .modalBoxContainer {
        padding: 120px 20px 40px;
    }
    .cardAssignmentsDetailsHeaderMainContainer,
    .cardAssignmentsDetailsMainContainer {
        width: calc(100% - 750px);
    }
    .cardAssignmentsDetailsHeaderMainContainer.small,
    .cardAssignmentsDetailsMainContainer.small {
        width: calc(100% - 750px);
    }
    .cardAssignmentsDetailsHeaderSecondaryContainer,
    .cardAssignmentsDetailsSecondaryContainer {
        width: 150px;
    }
}
@media (max-width: 1200px) {
    .generalButton {
        font-size: 14px;
        min-height: 45px;
        min-width: 100px;
        padding: 0 20px;
    }
    .generalPreviousButton,
    .generalNextButton {
        min-height: 45px;
        min-width: 120px;
        padding: 0 20px;
    }
    .questionButtons .generalPreviousButton {
        margin-right: 15px;
    }
}
@media (max-width: 1100px) {
    .cardAssignmentsDetailsHeaderMainContainer,
    .cardAssignmentsDetailsMainContainer {
        width: calc(100% - 600px);
    }
    .cardAssignmentsDetailsHeaderMainContainer.small,
    .cardAssignmentsDetailsMainContainer.small {
        width: calc(100% - 600px);
    }
    .cardAssignmentsDetailsHeaderSecondaryContainer,
    .cardAssignmentsDetailsSecondaryContainer {
        width: 120px;
    }
}
@media (max-width: 980px) {
    .ccPage {
        padding: 0 15px;
    }
    #ccMainContentContainer.withSidebar #ccMainContent {
        padding: 40px 15px;
    }
    #userDropDownMenuContainer {
        right: 0;
    }
    .generalButton {
        font-size: 14px;
        min-height: 35px;
        min-width: 60px;
        padding: 0 15px;
    }
    .generalPreviousButton,
    .generalNextButton {
        font-size: 14px;
        min-height: 35px;
        min-width: 100px;
        padding: 0 20px;
    }
    .generalPreviousButton .text,
    .generalNextButton .text {
        font-size: 14px;
    }
    .generalPreviousButton .icon,
    .generalNextButton .icon {
        font-size: 20px;
    }
    .fieldTip {
        right: 50%;
        top: 100%;
        -webkit-transform: translate(50%, 15px);
        -moz-transform: translate(50%, 15px);
        transform: translate(50%, 15px);
        width: 70%
    }
    .fieldTip::before {
        border-color: transparent transparent #2b2a35 transparent;
        border-width: 0 10px 10px 10px;
        left: 50%;
        top: 0;
        -webkit-transform: translate(-50%, -100%);
        -moz-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);
    }
    .fieldContainer.coupon .field input[type="text"],
    .fieldContainer.balance .field input[type="number"] {
        width: calc(100% - 90px);
    }
    .cardContainer {
        padding: calc(20px + (30 - 20)*((100vw - 320px)/(2000 - 320))) calc(10px + (50 - 10)*((100vw - 320px)/(2000 - 320)));
    }
    .latestAssignments .verticalMenuContainer {
        margin-left: calc(-10px - (50 - 10)*((100vw - 320px)/(2000 - 320)));
        width: calc(100% + (20px + (100 - 20)*((100vw - 320px)/(2000 - 320))));
    }
    .cardLink {
        margin-top: calc(5px + (10 - 5)*((100vw - 320px)/(2000 - 320)));
    }
    .cardContainer .cardTestReportButtonContainer,
    .builderMainContainer .cardContainer .quizReportButton {
        right: calc(-10px + (-50 + 10)*((100vw - 320px)/(2000 - 320)));
    }
    .bookmarkButtonContainer {
        right: calc(10px + (50 - 10)*((100vw - 320px)/(2000 - 320)));
        top: calc(20px + (30 - 20)*((100vw - 320px)/(2000 - 320)));
    }
    .cardSubtopicHeaderMainContainer,
    .cardSubtopicMainContainer {
        width: calc(100% - 420px);
    }
    .cardSubtopicHeaderPracticeContainer,
    .cardSubtopicPracticeContainer {
        width: 120px;
    }
    .cardSubtopicPracticeListItem .buttonWithIcon .text {
        width: 80px;
    }
    .cardSubtopicHeaderTestContainer,
    .cardSubtopicTestContainer {
        width: 160px;
    }
    .cardSubtopicTestListItem .buttonWithIcon .text {
        width: 110px;
    }
    .cardSubtopicHeaderKeyConceptsContainer,
    .cardSubtopicKeyConceptsContainer {
        width: 120px;
    }
    .cardMockTitleContainer {
        width: calc(100% - 340px);
    }
    .cardMockSetsContainer {
        width: 340px;
    }
    .reportAnalysisContainer {
        width: 100%;
    }
    .reportAnalysisContainer.score {
        padding-bottom: 40px;
    }
    .reportAnalysisContainer.performance {
        border-left: none;
        border-top: 1px solid #2b2a35;
        padding-top: 40px;
    }
    .quizSidebar {
        left: -200vw;
        max-width: 480px;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        width: 100%;
        z-index: 100;
    }
    .quizSidebar.sidebarOpen {
        left: 0;
    }
    .quizContainer {
        width: 100%;
    }
    .quizSidebarHeader {
        display: none;
    }
    .quizName {
        display: none;
    }
    .quizShowDetails {
        display: block;
    }
    .quizContainerHeader {
        background-color: #fff;
        left: 0;
        padding: 20px 15px 10px;
        position: fixed;
        top: 0;
        z-index: 100;
    }
    .quizContainerHeaderInner {
        -webkit-align-items: center;
        align-items: center;
        border: none;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        padding: 0;
    }
    .quizMobileName {
        display: -webkit-flex;
        display: flex;
    }
    .quizTimerContainer {
        margin-left: auto;
        width: 120px;
    }
    .quizMobileSidebarToggler {
        display: -webkit-flex;
        display: flex;
    }
    .quizAvailableTime {
        display: none;
    }
    .quizHeaderButtons {
        bottom: auto;
        position: relative;
        right: -5px;
    }
    .quizContainerInner {
        padding: 40px 15px 20px;
    }
    .reportABugFormHeader {
        padding: 20px 10px;
    }
    .reportABugFormBody {
        padding: 20px 10px;
    }
    .builderMainContainer .cardContainer .tooltip {
        bottom: 58px;
        left: 62px;
    }
    .cardContainer .tooltip {
        bottom: 72px;
        left: 80px;
    }
    .assignment {
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }
    .assignmentImageContainer {
        padding-right: 25px;
        width: 185px;
    }
    .assignmentBody {
        width: calc(100% - 185px);
    }
    .teacherAssignment .assignmentBody {
        width: calc(100% - 345px);
    }
    .assignmentsReport .cardSubtopicHeaderMainContainer,
    .assignmentsReport .cardSubtopicMainContainer {
        width: calc(100% - 375px);
    }
    .assignmentsReport .cardSubtopicHeaderMainContainer.small,
    .assignmentsReport .cardSubtopicMainContainer.small {
        width: calc(100% - 500px);
    }
    .cardSubtopicHeaderSecondaryContainer,
    .cardSubtopicSecondaryContainer {
        width: 125px;
    }
}
@media (max-width: 940px) {
    .myWalletSummaryItem {
        width: 100%;
    }
    .myWalletItem {
        -webkit-align-items: flex-start;
        align-items: flex-start;
        padding: 0 5px;
        width: 25%;
    }
    .myWalletItemEqual {
        -webkit-justify-content: center;
        justify-content: center;
        margin: 30px 0;
        width: 100%;
    }
    .myWalletItemEqualInner {
        margin: 0;
    }
    .myWalletCircleProgressStatic {
        border-width: calc(6px + (12 - 6)*((100vw - 320px)/(920 - 320)));
        height: calc(60px + (150 - 60)*((100vw - 320px)/(920 - 320)));
        width: calc(60px + (150 - 60)*((100vw - 320px)/(920 - 320)));
    }
    .myWalletSummaryItem .myWalletCircleProgressStatic {
        height: calc(80px + (180 - 80)*((100vw - 320px)/(920 - 320)));
        width: calc(80px + (180 - 80)*((100vw - 320px)/(920 - 320)));
    }
    .myWalletCircleProgressNumber {
        font-size: calc(22px + (34 - 22)*((100vw - 320px)/(920 - 320)));
    }
    .myWalletCircleProgressNote {
        font-size: calc(14px + (16 - 14)*((100vw - 320px)/(920 - 320)));
    }
    .myWalletSummaryItem .myWalletCircleProgressNote {
        font-size: calc(16px + (20 - 16)*((100vw - 320px)/(920 - 320)));
    }
    .myWalletButtonsContainer {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        margin: 50px 0 0;
    }
}
@media (max-width: 880px) {
    .cardAssignmentsDetailsHeaderMainContainer,
    .cardAssignmentsDetailsMainContainer {
        width: calc(100% - 550px);
    }
    .cardAssignmentsDetailsHeaderMainContainer.small,
    .cardAssignmentsDetailsMainContainer.small {
        width: calc(100% - 550px);
    }
    .cardAssignmentsDetailsHeaderSecondaryContainer,
    .cardAssignmentsDetailsSecondaryContainer {
        width: 110px;
    }
}
@media (max-width: 860px) {
    .loginFormIconTopLeft,
    .registerFormIconTopLeft,
    .inquiryFormIconTopLeft {
        width: 35%;
    }
    .loginFormIconTopRight,
    .registerFormIconTopRight,
    .inquiryFormIconTopRight {
        width: 35%;
    }
    .loginFormIconBottomLeft,
    .inquiryFormIconBottomLeft {
        width: 28%;
    }
    .loginFormIconBottomRight,
    .inquiryFormIconBottomRight {
        width: 22%;
    }
    .registerFormIconMiddleLeft {
        width: 14%;
    }
    .registerFormIconMiddleRight {
        width: 22%;
    }
    .registerFormIconBottomLeft {
        width: 27%;
    }
    .registerFormIconBottomRight {
        width: 22%;
    }
    .cardTopicTitleContainer {
        margin: 0 0 20px;
        width: 100%;
    }
    .cardTopicLevelTestButton {
        margin: 0 15px 0 0;
    }
    .reportAnalysisCircleProgressContainer,
    .cardTopicCircleProgressContainer {
        width: calc(80px + (114 - 80)*((100vw - 320px)/(860 - 320)));
    }
    .progressbar__label {
        font-size: calc(18px + (24 - 18)*((100vw - 320px)/(860 - 320))) !important;
    }
    .cardAssignmentsTitleContainer {
        width: calc(100% - (100px + (220 - 100)*((100vw - 320px)/(860 - 320))));
    }
    .cardAssignmentsCircleProgressContainer {
        margin-right: 0;
        width: calc(80px + (200 - 80)*((100vw - 320px)/(860 - 320)));
    }
    .teacherAssignment .cardAssignmentsCircleProgressContainer {
        width: calc(80px + (130 - 80)*((100vw - 320px)/(860 - 320)));
    }
    .teacherAssignment .assignmentBody {
        width: calc(100% - 225px - (80px + (130 - 80)*((100vw - 320px)/(860 - 320))));
    }
    .cardAssignmentsCircleProgressStatic {
        border-width: calc(8px + (10 - 8)*((100vw - 320px)/(860 - 320)));
        height: calc(80px + (114 - 80)*((100vw - 320px)/(860 - 320)));
        width: calc(80px + (114 - 80)*((100vw - 320px)/(860 - 320)));
    }
    .cardAssignmentsCircleProgressNumber {
        font-size: calc(18px + (24 - 18)*((100vw - 320px)/(860 - 320))) !important;
    }
    .cardAssignmentsCircleProgressLabel,
    .cardAssignmentsCircleProgressNote {
        font-size: calc(12px + (16 - 12)*((100vw - 320px)/(860 - 320))) !important;
    }
    .reportList .cardContainer .tooltip {
        bottom: auto;
        left: calc(72px + (50 - 10)*((100vw - 320px)/(2000 - 320)));
        top: calc(15px + (30 - 20)*((100vw - 320px)/(2000 - 320)));
    }
    .notificationsSettingsListHeaderMainContainer,
    .notificationsSettingsListMainContainer {
        width: calc(100% - 260px);
    }
    .notificationsSettingsListHeaderOption,
    .notificationsSettingsListOption {
        width: 130px;
    }
    .keyConcepts .cardDescription {
        font-size: 16px;
    }
}
@media (max-width: 780px) {
    .gridContainer .gridItem {
        max-width: 320px;
        width: 50%;
    }
    .cardSubtopicListHeader {
        display: none;
    }
    .cardAssignmentsDetailsHeader,
    .teacherReportDetailsHeader {
        display: none;
    }
    .teacherReportContainer {
        -webkit-justify-content: center;
        justify-content: center;
    }
    .teacherReportDetailsColumn.name {
        flex: inherit;
        font-size: 20px;
        font-weight: 700;
        -webkit-justify-content: center;
        justify-content: center;
        text-align: center;
        width: 100%;
    }
    .teacherReportDetailsColumn {
        flex: inherit;
        margin: 20px 0 0;
        width: 33.33%;
    }
    .cardSubtopicContainer {
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }
    .cardAssignmentsContainer {
        -webkit-justify-content: center;
        justify-content: center;
    }
    .cardAssignmentsDetailsMainContainer,
    .cardAssignmentsDetailsMainContainer.small {
        max-width: 100%;
        width: calc(100% - 30px);
    }
    .cardAssignmentsDetailsTitle {
        font-size: calc(18px + (20 - 18)*((100vw - 320px)/(860 - 320)));
    }
    .cardAssignmentsDetailsSecondaryContainer {
        margin: 25px 0 0;
        width: 33.33%;
    }
    .cardSubtopicMobileHeader,
    .cardAssignmentsDetailsMobileHeader,
    .teacherReportDetailsMobileHeader {
        display: block;
    }
    .cardSubtopicHeaderMainContainer,
    .cardSubtopicMainContainer {
        margin: 0 0 20px;
        max-width: 100%;
        width: 100%;
    }
    .cardSubtopicHeaderPracticeContainer,
    .cardSubtopicPracticeContainer,
    .cardSubtopicHeaderTestContainer,
    .cardSubtopicTestContainer,
    .cardSubtopicHeaderKeyConceptsContainer,
    .cardSubtopicKeyConceptsContainer {
        width: 33.33%;
    }
    .cardAbsoluteButton {
        right: 0;
        top: 0;
        -webkit-transform: none;
        -moz-transform: none;
        transform: none;
    }
    .reportSynopsisHeaderSubtitle {
        margin: 20px 0 0;
        width: 100%;
    }
    .quizMultipleQuestionTitle {
        width: 100%;
    }
    .quizMultipleQuestionMarks {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        width: 100%;
    }
}
@media (max-width: 740px) {
    .myWalletItemEqual {
        margin: 30px 0 0;
    }
    .myWalletItem {
        margin: 30px 0 0;
        width: 50%;
    }
    .myWalletItem:nth-child(2n+2) {
        border: none;
    }
    .myWalletCircleProgressStatic {
        border-width: calc(6px + (12 - 6)*((100vw - 320px)/(740 - 320)));
        height: calc(60px + (150 - 60)*((100vw - 320px)/(740 - 320)));
        width: calc(60px + (150 - 60)*((100vw - 320px)/(740 - 320)));
    }
    .myWalletSummaryItem .myWalletCircleProgressStatic {
        height: calc(80px + (180 - 80)*((100vw - 320px)/(740 - 320)));
        width: calc(80px + (180 - 80)*((100vw - 320px)/(740 - 320)));
    }
    .myWalletCircleProgressNumber {
        font-size: calc(22px + (34 - 22)*((100vw - 320px)/(740 - 320)));
    }
    .myWalletCircleProgressNote {
        font-size: calc(14px + (16 - 14)*((100vw - 320px)/(740 - 320)));
    }
    .myWalletSummaryItem .myWalletCircleProgressNote {
        font-size: calc(16px + (20 - 16)*((100vw - 320px)/(740 - 320)));
    }
    .teacherAssignment .assignmentImageContainer {
        padding-right: 15px;
        width: 120px;
    }
    .teacherAssignment .assignmentBody {
        width: calc(100% - 150px - (80px + (130 - 80)*((100vw - 320px)/(860 - 320))));
    }
}
@media (max-width: 680px) {
    .notifyMyTeacherFormIconTopRight {
        left: auto;
        right: 50px;
        width: 27%;
    }
    .notifyMyTeacherFormIconBottomLeft {
        width: 60%;
    }
}
@media (max-width: 620px) {
    .assignmentImageContainer {
        width: 130px;
    }
    .assignmentBody {
        width: calc(100% - 130px);
    }
    .reportsMainButtons {
        background-color: transparent;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    .reportsMainButton {
        background-color: #e1d5f7;
        margin: 2px 0;
        width: calc(50% - 2px);
    }
    .notificationsSettingsListHeader {
        display: none;
    }
    .notificationsSettingsListHeaderMainContainer,
    .notificationsSettingsListMainContainer {
        margin: 0 0 10px;
        width: 100%;
    }
    .notificationsSettingsListHeaderOption,
    .notificationsSettingsListOption {
        padding: 0 20px 0 0;
        width: auto;
    }
    .notificationsSettingsListOption label {
        display: block;
    }
}
@media (max-width: 580px) {
    .ccPage {
        padding: 0 10px;
    }
    #ccMainContentContainer.withSidebar #ccMainContent {
        padding: 40px 10px;
    }
    .formExtraLink {
        font-size: 15px;
    }
    .userFormWrapper {
        padding: calc(60px + (120 - 60)*((100vw - 320px)/(2000 - 320))) 10px 90px;
    }
    .registerFormIconMiddleLeft,
    .registerFormIconMiddleRight {
        display: none;
    }
    .fieldsContainer .fieldContainer.halfWidth,
    .fieldContainer.halfWidth,
    .bookmarkTopics .fieldContainer.halfWidth {
        width: 100%;
    }
    #tourSliderButtons {
        -webkit-transform: translateY(calc(-30% - 35px));
        -moz-transform: translateY(calc(-30% - 35px));
        transform: translateY(calc(-30% - 35px));
    }
    .verticalMenu {
        padding: 0;
    }
    .verticalMenu a {
        font-size: 14px;
        padding: 15px;
    }
    .cardSubscriptionButtons,
    .cardPaymentButtons {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .cardSubscriptionButton,
    .cardPaymentButton {
        margin: 5px 0 0;
    }
    .cardSubtopicHeaderPracticeContainer,
    .cardSubtopicPracticeContainer,
    .cardSubtopicHeaderTestContainer,
    .cardSubtopicTestContainer {
        margin: 0 0 25px;
        width: 50%;
    }
    .cardSubtopicHeaderKeyConceptsContainer,
    .cardSubtopicKeyConceptsContainer {
        width: 100%;
    }
    .cardTestTopicsContainer {
        margin: 0 0 25px;
        width: 100%;
    }
    .cardTestLevelsContainer,
    .cardTestDurationContainer {
        width: 50%;
    }
    .quizContainerHeader {
        padding: 20px 10px 10px;
    }
    .quizContainerInner {
        padding: 40px 10px 20px;
    }
    .questionButtons .generalPreviousButton {
        margin-right: 10px;
    }
    .builderMainContainer .cardContainer .tooltip {
        bottom: auto;
        top: -33px;
    }
    .cardContainer .tooltip {
        bottom: 61px;
        left: 65px;
    }
    .cardAssignmentsDetailsSecondaryContainer {
        width: 50%;
    }
    .teacherReportDetailsColumn {
        width: 50%;
    }
    .teacherAssignment .assignmentImageContainer {
        display: none;
    }
    .teacherAssignment .assignmentBody {
        width: calc(100% - 15px - (80px + (130 - 80)*((100vw - 320px)/(860 - 320))));
    }
    .createAssignmentsTableBody {
        padding: 20px;
    }
    .createAssignmentsTableHeader {
        padding: 25px;
    }
    .createAssignmentsTableHeaderColumn.name,
    .createAssignmentsTableHeaderColumn.finalIbExam {
        display: none;
    }
    .createAssignmentsTableRow {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .createAssignmentsTableColumn.name,
    .createAssignmentsTableColumn.finalIbExam {
        -webkit-align-items: flex-start;
        align-items: flex-start;
        text-align: left;
        width: calc(100% - 35px);
    }
    .createAssignmentsTableColumn.finalIbExam {
        margin: 10px 0 0;
        padding-left: 45px;
    }
    .createAssignmentsTableColumnMobileTitle {
        display: block;
    }
}
@media (max-width: 540px) {
    .assignmentImageContainer {
        width: 110px;
    }
    .assignmentBody {
        width: calc(100% - 110px);
    }
}
@media (max-width: 500px) {
    .quizContainerHeaderInner {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .quizMobileName {
        font-size: 24px;
        margin: 0 0 10px;
        max-width: 100%;
        width: 100%;
    }
    .quizTimerContainer {
        margin-left: 0;
    }
    .quizQuestionTopTools {
        bottom: auto;
        top: -30px;
    }
    .quizQuestionTopTitle {
        font-size: 14px;
        width: 100%;
    }
    .quizQuestionTopDetailsContainer {
        font-size: 14px;
        width: 100%;
    }
    .quizFinishButton {
        margin: 20px 0 0;
        width: 100%;
    }
}
@media (max-width: 480px) {
    .gridContainer .gridItem {
        max-width: 320px;
        width: 100%;
    }
    .cardMockTitleContainer {
        /*width: calc(100% - 240px);*/
        margin: 0 0 20px;
        width: 100%;
    }
    .cardMockSetsContainer {
        /*width: 240px;*/
        width: 100%;
    }
    .cardMockSet {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }
    .reportButtonsContainer .generalButton {
        margin: 10px 20px 0 0;
    }
    .reportSynopsisListItemTitle {
        max-width: 100%;
        width: 100%;
    }
    .reportSynopsisListItemScore {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        margin: 10px 0 0;
        padding: 0;
        width: 100%;
    }
    .learnMainTitleContainer,
    .learnMainText {
        width: 100%;
    }
    .modalBox {
        padding: 70px 20px 50px;
    }
    .modalMainTitle {
        font-size: 28px;
    }
    .assignmentsDetailsListItemTitle {
        width: 150px;
    }
    .assignmentsDetailsListItemText {
        width: calc(100% - 150px);
    }
}
@media (max-width: 460px) {
    .userMenuContainer .menuItem.coinSystemMenu,
    .userMenuContainer .menuItem.referFriendsMenu {
        display: none;
    }
    .assignmentImageContainer {
        display: none;
    }
    .assignmentBody {
        width: 100%;
    }
}
@media (max-width: 440px) {
    .myWalletItem {
        border: none;
        width: 100%;
    }
    .myWalletCircleProgressStatic {
        border-width: 10px;
        height: 150px;
        width: 150px;
    }
    .myWalletSummaryItem .myWalletCircleProgressStatic {
        height: 180px;
        width: 180px;
    }
    .myWalletCircleProgressNumber {
        font-size: 34px;
    }
    .myWalletCircleProgressNote {
        font-size: 16px;
    }
    .myWalletSummaryItem .myWalletCircleProgressNote {
        font-size: 20px;
    }
}
@media (max-width: 420px) {
    .cardSubtopicHeaderPracticeContainer,
    .cardSubtopicPracticeContainer,
    .cardSubtopicHeaderTestContainer,
    .cardSubtopicTestContainer {
        width: 100%;
    }
    .cardAssignmentsDetailsSecondaryContainer {
        width: 100%;
    }
    .teacherReportDetailsColumn {
        width: 100%;
    }
    .assignmentButtonsContainer .generalButton {
        margin-right: 10px;
    }
}
@media (max-width: 380px) {
    .reportsMainButton {
        min-height: 52px;
    }
    /*.learnMainTitleContainer,
    .builderMainTitleContainer,
    .bookmarksMainTitleContainer,
    .libraryMainTitleContainer,
    .classroomMainTitleContainer,
    .notificationsMainTitleContainer,
    .assignmentsMainTitleContainer,
    .settingsMainTitleContainer,
    .reportsMainTitleContainer,
    .reportMainTitleContainer,
    .helpMainTitleContainer,
    .learnMainText,
    .builderMainText,
    .bookmarksMainText,
    .libraryMainText,
    .classroomMainText,
    .notificationsMainText,
    .referMainText,
    .assignmentsMainText,
    .settingsMainText,
    .reportsMainText,
    .reportMainText,
    .helpMainText {
        width: 100%;
    }*/
    /*.cardMockTitleContainer {
        margin: 0 0 20px;
        width: 100%;
    }
    .cardMockSetsContainer {
        width: 100%;
    }
    .cardMockSet {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }*/
}