/* roboto-regular - latin-ext_latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/roboto-v27-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('/fonts/roboto-v27-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/roboto-v27-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/roboto-v27-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ url('/fonts/roboto-v27-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/roboto-v27-latin-ext_latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-italic - latin-ext_latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/roboto-v27-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('/fonts/roboto-v27-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/roboto-v27-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/roboto-v27-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/roboto-v27-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/roboto-v27-latin-ext_latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin-ext_latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/roboto-v27-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('/fonts/roboto-v27-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/roboto-v27-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/roboto-v27-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */ url('/fonts/roboto-v27-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/roboto-v27-latin-ext_latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700italic - latin-ext_latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: url('/fonts/roboto-v27-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('/fonts/roboto-v27-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/roboto-v27-latin-ext_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/roboto-v27-latin-ext_latin-700italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/roboto-v27-latin-ext_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/roboto-v27-latin-ext_latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* START CUSTOM ICONS FROM ICOMOON */
@font-face {
    font-family: 'icomoon';
    src: url('../images/fonts/icomoon.eot?gqy7jy');
    src: url('../images/fonts/icomoon.eot?gqy7jy#iefix') format('embedded-opentype'),
    url('../images/fonts/icomoon.ttf?gqy7jy') format('truetype'),
    url('../images/fonts/icomoon.woff?gqy7jy') format('woff'),
    url('../images/fonts/icomoon.svg?gqy7jy#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

:root {
    --color-thumb-correct: #01C692;
    --color-thumb-approx: #ffb400;
    --color-thumb-wrong: #E60066;
    --color-primary: #0066ffaf;
    --color-secondary: #005770;
    --color-tertiary : #005770;
}

body {
    font-family: Roboto;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-bookmark-add:before {
    content: "\e990";
}

.icon-hamburger:before {
    content: "\e900";
}

.icon-search:before {
    content: "\e901";
}

.icon-close:before {
    content: "\e902";
}

.icon-wrong:before {
    content: "\e903";
}

.icon-correct:before {
    content: "\e904";
}

.icon-chevron-left:before {
    content: "\e905";
}

.icon-chevron-right:before {
    content: "\e906";
}

.icon-chevron-down:before {
    content: "\e907";
}

.icon-bookmark:before {
    content: "\e908";
}

/* END CUSTOM ICONS FROM ICOMOON */

/* Custom font sizes */
h4 {
    font-size: 16px !important;
}

.sub_category_name_header {
    padding-top: 10px; /* was 5px */
    padding-bottom: 10px; /* was 5px */
    padding-left: 0;
}

div.logo-style {
    background: url(/assets/packages/cappelen-damm-cosinus/images/sitename.png) center center no-repeat
}

.theory-icon-important,
.theory-icon-question {
    width: 30px;
    position: absolute;
    left: 64px;
    margin-top: 5px;
}

.flippable,
.example_wrapper {
    width: 103%;
    left: -3%;
}

.flippable:after {
    left: -50px;
}

/* Theory statement and theory definition changes */
.theory_statement {
    background-color: #FDF8FC;
    border-color: #C5557E;
    border-top: none;
    border-bottom: none;
    border-right: none;
    border-width: 2px;
}

.theory_statement:before {
    content: attr(data-title);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #C5557E;
    font-weight: 800;
}

.theory_statement:after {
    background: url(/assets/packages/cappelen-damm-cosinus/images/icons/Sinus_diskusjon.svg) left center no-repeat;
    background-size: 30px 30px;
    background-color: #FFF;
    border-color: #FFF;
    color: #f7b70000;
    content: '►';
    font-size: 30px;
    line-height: 1.4;
    top: 30px;
    margin-top: -25px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    font-weight: bold;
}

.theory_definition {
    border-color: #F7B700;
    border-width: 2px;
    border-top: none;
    border-bottom: none;
    border-right: none;
    background-color: #f7b7001a;
}

.theory_definition:after {
    background: url(/assets/packages/cappelen-damm-cosinus/images/icons/sinus_pil.svg) left center no-repeat;
    background-size: 30px 30px;
    background-color: #FFF;
    border-color: #FFF;
    color: #f7b70000;
    content: '►';
    font-size: 30px;
    line-height: 1.4;
    top: 30px;
    margin-top: -25px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    font-weight: bold
}

.theory_exercise:after {
    display: none;
}

/* START style for example text box */
/* .theory_example.example_wrapper {
    border: none;
    border-top: 2px solid #1C84A0;
    border-bottom: 2px solid #1C84A0;
    background-color: #FBFCFD;
} */

.theory_example {
    background-color: #F1F5FA;
}

.theory_example,
.theory_example:after {
    border-top: 2px solid #1C84A0;
    border-bottom: 2px solid #1C84A0;
    border-color: #1B77A3;
    border-width: 2px;
}

.theory_example:after {
    letter-spacing: 1px;
    top: -2px;
    left: auto;
    right: calc(100% + 2px);
    width: fit-content;
    color: white;
    background-color: #1B77A3;
    border: none;
    border-bottom-right-radius: 0px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 18px;
    padding: 2px 8px;
}

.theory_explore:after {
    background: url(/assets/packages/cappelen-damm-cosinus/images/icons/explore.svg) left center no-repeat;
    background-size: 30px 30px;
    background-color: #FFF;
    border-color: #FFF;
    color: #f7b70000;
    content: '►';
    font-size: 30px;
    margin-top: 15px;
    left: -50px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    font-weight: bold;
}

.theory_explore,
.theory_explore .theory_explore_step:before {
    border-color: #35A89B;
}

.theory_explore:before,
.theory_explore_step > .format_step_header {
    color: #35A89B;
}

.theory_explore .theory_explore_step {
    background-color: #F2FAFA;
}

.theory_solution:after {
    top: -2px;
    right: calc(100% + 2px);
    content: attr(data-title) !important;
}

.theory_solution {
    background-color: #fff;
    padding-top: 20px;
}

.theory_solution,
.theory_solution:after {
    border-top: 2px solid #1C84A0;
    border-bottom: 2px solid #1C84A0;
    border-color: #1B77A3;
    letter-spacing: 1px;
    border-width: 2px;
}

.theory_solution.flippable:after {
    top: 5px;
    left: auto;
    width: fit-content;
    color: #1B77A3;
    background-color: #fff;
    border: none;
    border-bottom-right-radius: 0px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 18px;
    padding: 2px 8px;
}

/* style solution differently if it follows an example */
.theory_example + .theory_solution {
    margin-top: 0;
    border-bottom-right-radius: 10px;
}

.theory_example {
    padding-bottom: 20px;
}

.theory_example + .theory_solution > .triangle_bottom,
.theory_example + .theory_solution > .triangle_top {
    display: block;
}

.theory_solution > .triangle_bottom {
    top: -8px;
    position: absolute;
    border-style: solid;
    border-color: #1B77A3;
    border-width: 6px;
    transform: rotate(45deg);
    display: none;
}

.theory_solution > .triangle_top {
    top: -8px;
    position: absolute;
    border-style: solid;
    border-color: white;
    border-width: 6px;
    transform: rotate(45deg);
    background: white;
    display: none;
}

.theory_solution > .triangle_top.-left {
    left: -10px;
}

.theory_solution > .triangle_bottom.-left {
    left: -7px;
}

.theory_solution > .triangle_top.-right {
    right: -10px;
}

.theory_solution > .triangle_bottom.-right {
    right: -7px;
}

.expandable {
    width: 103%;
    left: -3%
}

.expandables-container {
    right: 0px;
}

.project_assignment {
    background: #EEFAF8;
    padding: 20px;
    margin-top: 40px;
    width: 103%;
    left: -3%;
    position: relative;
}

.project_assignment strong {
    color: #00B09E;
}

/* push down for top menu */
#content_container {
    margin-top: 50px;
}

#content_container > #super_container {
    margin-top: 90px;
}

/* cappelen custom classes */

.forklaring {
    border-left: 2px solid #f17931;
    padding: 4px 8px;
    margin-left: 28px;
    display: inline-block;
    font-size: 80%;
    background-color: #FEF6F0;
}

.forklaring:before {
    content: "";
    display: inline-block;
    position: absolute;
    color: #f17931;
    background: url(/assets/packages/cappelen-damm-cosinus/images/icons/important_icon.svg) no-repeat center center;
    background-size: 7px 8px;
    width: 10px;
    height: 16px;
    margin: 0 0 0 -18px;
}


/* menu header styles */
#logo_brand {
    transform: translateX(-50%);
    left: 50%;
    position: fixed;
    top: 0;
}

div.logo-style {
    height: 50px;
}

#cosinusDropdownMenuLink {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

#navbarLeftContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0;
}

.sw-nav-bar {
    max-height: 50px;
    min-height: 50px;
    font-variant: none !important;
    transition: all 0.3s ease-in-out;
    z-index: 1000;
}

.sw-nav-bar.-scrolled-up {
    transform: translateY(-100%);
}

.sw-nav-bar.-scrolled-up + .exercise-nav.-top {
    transform: translateY(-50px);
}

.cosinus-hamburger-li .dropdown-menu {
    background: #333333;
}

.cosinus-dropdown .dropdown-menu li a {
    text-transform: capitalize;
}

.cosinus-hamburger-li .dropdown-menu #header_navigation,
.cosinus-dropdown.menu-profile-pic.open .dropdown-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.navbar .nav-item.active > .nav-link {
    color: #00F0FF;
}

.nav.navbar-left > li > *:not(.dropdown-menu) {
    padding: 10px 20px;
}

.navbar-inverse .navbar-nav > li > a.nav-link,
.navbar-inverse .navbar-nav > li > a.nav-item {
    color: #fff;
}

.navbar-inverse .navbar-nav > li > a.nav-link:hover,
.navbar-inverse .navbar-nav > li > a.nav-item:hover {
    color: #9d9d9d;
}

.navbar-nav > li > a {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    height: 50px;
}

.navbar-nav > li .nav-icon {
    height: 25px;
}

.navbar-nav > li .nav-icon.-cosinus {
    height: 22px;
}

.navbar-nav.menu-logos {
    float: right;
    margin-bottom: 0;
    padding-bottom: 0;
    height: 50px;
}

.navbar-nav.menu-logos > .menu-item:first-child,
.navbar-nav.menu-logos > .nav-seperator {
    display: none;
}

.navbar-nav.menu-logos {
    display: flex;
    align-items: center;
}

.navbar-inverse .navbar-nav > .active > a {
    background-color: transparent;
}

@media (min-width: 768px) {
    .navbar-nav.menu-logos > .menu-item:first-child,
    .navbar-nav.menu-logos > .nav-seperator {
        display: block;
    }
}

.cosinus-dropdown.menu-profile-pic > .menu-profile-a > span {
    display: none;
}

@media (min-width: 992px) {
    .cosinus-dropdown.menu-profile-pic > .menu-profile-a > span {
        display: inline-block;
    }
}

.navbar-nav.menu-logos > .menu-item:first-child > .nav-icon {
    margin-top: 10px;
}

#nav_link_profile {
    height: 50px !important;
    display: flex;
    align-items: center;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px !important;
}

#nav_link_profile > .header_profile_pic {
    height: 25px !important;
    width: 25px !important;
    border: none;
}

#nav_link_profile > #user_name {
    padding-left: 5px;
    text-transform: capitalize;
}

.nav-seperator {
    padding: 10px 0;
}

.nav-seperator > .nav-bar-seperator {
    height: 30px;
    border-right: 1px #666666b2 solid;
    margin-right: 10px;
    padding-left: 10px !important;
}

.menu-item .notification-count {
    width: 1.3em;
    height: 1.3em;
    line-height: 1.3em;
    right: 12%;
    top: 15%;
    color: black;
    background-color: #00F0FF;
}

.menu-item.open > .nav-item {
    background-color: transparent !important;
    color: #00F0FF !important;
}

.cosinus-dropdown.dropdown.open .nav-icon {
    color: #00F0FF;
}

.cosinus-dropdown .dropdown-menu {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 175px;
}

.cosinus-dropdown .dropdown-menu.exercise-ul {
    position: relative;
    box-shadow: none;
    border-radius: 0;
}

/* menu bottom border radius, also on hovers */
.cosinus-dropdown .dropdown-menu,
.cosinus-dropdown .dropdown-menu > .navbar-nav,
.cosinus-dropdown .always-visible.dropdown.-lang,
.cosinus-dropdown .dropdown-menu.exercise-ul.-lang,
.cosinus-dropdown .dropdown-menu.exercise-ul.-lang > li:last-child > a,
.cosinus-dropdown .dropdown-menu.exercise-ul.-lang > li:last-child,
.cosinus-dropdown.menu-profile-pic .dropdown-menu.exercise-ul > li:last-child,
.cosinus-dropdown.menu-profile-pic .dropdown-menu.exercise-ul > li:last-child > a {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#header_navigation > li,
.cosinus-dropdown.menu-profile-pic li {
    border-top: 1px solid #ececec;
    background-color: #ffffff;
}

#header_navigation > li:first-child,
.cosinus-dropdown.menu-profile-pic li:first-child {
    border-top: none;
}

.cosinus-dropdown .navbar-nav > .active > a,
.cosinus-dropdown .navbar-nav > .active > a:focus,
.cosinus-dropdown .navbar-nav > .active > a:hover {
    color: #4A4C4B;
    background-color: #A4A8A6;
}

.cosinus-dropdown .navbar-nav > li > a {
    color: #4A4C4B !important;
}

.cosinus-dropdown .navbar-nav > li > a:focus,
.cosinus-dropdown .navbar-nav > li > a:hover {
    color: #9d9d9d !important;
    background-color: #ececec !important;
}

.sw-dropdown > ul > li > a {
    color: #4A4C4B;
    background-color: #ffffff;
}

.always-visible.dropdown a.active {
    color: #4A4C4B;
}

.cosinus-dropdown .sw-dropdown > a {
    display: flex;
    justify-content: space-between;
}

/* hide the filter tabs on the home page */
.filter_tabs_wrapper {
    display: none !important;
}

/* make background color of home page white */
.body-color, .body-style {
    background-color: #FFFFFF !important;
}

/* home page styles */
.custom-home-background {
    position: fixed;
    top: 49px;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(/assets/packages/cappelen-damm-cosinus/images/cosinus_background.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.custom-home-background ~ .background-gradient {
    position: fixed;
    top: 49px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #4a4c4b2e;
}

.container.super_container_home {
    width: 100%;
}

#home_left_content {
    display: flex;
    flex-wrap: wrap;
}

.home-category-line-row {
    border-top: 3px solid #dee5e9;
    margin-right: -15px;
}

.category_name_header {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.home-category-line {
    display: none;
}

.home_border_fix {
    border-bottom: none;
    margin-bottom: 20px;
    flex-grow: 1;
}

.home_border_fix > .category-list-container {
    background-color: #4a4c4b9e;
    border-radius: 6px;
    padding: 10px;
    min-height: 130px;
    height: 100%;
}

.home_border_fix > .category-list-container .content_name,
.home_border_fix > .category-list-container .category_name_link {
    color: #fff;
}

@media (min-width: 768px) {
    .home_border_fix.im_open .category-title .custom_category_name {
        max-width: calc(100% - 250px); /* ellipsis for title when it's too long */
    }
}

.category-list-name {
    display: grid;
}

.content_name {
    transition: color .5s ease-in-out;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home_border_fix:not(.im_open) .category-list-container h3 {
    margin: 0;
}

.home_border_fix:not(.im_open) .home-category-row {
    padding: 0 !important;
    width: 104%;
}

.home_border_fix:not(.im_open) .category-list-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home_border_fix:not(.im_open) .category-grade-col {
    display: flex;
    justify-content: flex-end; /*maye change to space-between if number is added to package*/
}

#fixed_cosinus_bar {
    margin-top: 49px;
    height: 155px;
    background: transparent;
    color: #fff;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    position: relative;
    z-index: 10;
}

#fixed_cosinus_bar .greeting {
    margin-left: 35px;
    font-size: 50px;
}

#cosinus_search_button {
    border: none;
    background-color: #4a4c4b70;
    height: 100%;
    padding: 0 35px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 0px;
    color: #fff;
    display: flex;
    align-items: center;
}

#cosinus_search_button > .search-icon {
    width: 30px;
}

#cosinus_search_container {
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    margin-left: 15px;
    width: 100%;
}

#search_results_list {
    margin-bottom: 0;
    margin-left: 15px;
    margin-right: 15px;
    width: 100%;
    background-color: #4A4C4B;
}

.filter_cosinus_search_home {
    transition: none;
}

#search_form {
    width: 100%;
    margin-right: 15px;
}

#cosinus_search_home {
    border: none;
    margin-top: 0;
    box-shadow: none;
    padding: 35px;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 0px !important;
    font-size: 20px;
    display: flex;
}

#search_results_list > div:last-child .search-bar-separator {
    display: none;
}

#search_results_list .sub-category-list-item-line-first {
    border-top: 1px solid #666766;
}

#search_results_list {
    border-bottom-right-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
}

#search_form .form-group {
    margin-bottom: 0;
}

.search_bar {
    height: auto;
}

.super_container_home #white_page {
    margin-top: 20px;
    padding-right: 20px;
    padding-left: 25px;
    background-color: transparent; /* transparent so background image is visible */
}

/* move scrollable items down for fixed bar adjustment */
@media (min-width: 768px) {
    .scrollable {
        margin-top: -45px !important;
        position: static !important;
    }
}

.search_bar {
    transition: none;
}

/* buttons for widget headers */
#widget_cosinus_header {
    padding: 0;
    margin-left: 20px;
}

#widget_cosinus_header button {
    font-weight: 500;
}

.cosinus_custom_row {
    margin-bottom: 40px;
}

.cosinus_header_button {
    border: none;
    padding: 5px 20px;
    background: transparent;
}

.cosinus_header_button.active {
    border-radius: 5px;
    border: none;
    color: #FFFFFF;
    background: #545759;
}

.scrollable .row button.side-bar {
    display: none !important;
}

.scrollable {
    overflow: visible !important;
    height: auto !important;
}

.scrollable .ps__rail- {
    display: none !important;
}

#round_progress_bar {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

#round_progress_bar div {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.classes-widget-row > div {
    margin-top: 0 !important;
}

.scores-widget-row #round_progress_bar > div {
    width: 100%;
    margin-bottom: 20px;
}

.scores-widget-row #round_progress_bar > div:last-child {
    margin-bottom: 0;
}

.scores-widget-row .knob_wrapper {
    width: auto;
    margin-left: 0;
    margin-right: 40px;
}

.scores-widget-row .home-knob-wrapper {
    margin: 0;
}

.scores-widget-row #round_progress_bar .side-bar {
    margin-left: 10px;
}

.scores-widget-row .colon-text {
    display: none;
}

.scores-widget-row .home-knob-label {
    text-transform: lowercase;
    font-weight: 500;
}

.scores-widget-row .home-knob-label::first-letter {
    text-transform: uppercase;
}

/* style for logo used in menu bar */
#logo_brand {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.cosinus-logo-container {
    height: 25px;
}

.cosinus-logo-img {
    max-width: 100%;
    max-height: 100%;
}

.custom-top-header {
    width: 100%;
    height: 130px;
}

/* Custom home packages styling START */
#home_left_content > .home_border_fix {
    opacity: 1;
    flex-grow: unset;
}

.content-menu,
#home_left_content > .home_border_fix.im_open {
    width: 100%;
    margin: 0 15px;
    padding: 0;
    background-color: #4A4C4B;
    border-radius: 6px;
}

#home_left_content.open_category > .home_border_fix:not(.im_open) { /* Hide other packages if one is open */
    opacity: 0;
    z-index: -10;
    position: absolute;
}

.category-close-button {
    display: none;
    width: 16px;
    margin: 0 25px;
    color: #c4c4c477;
    transition: all .5s ease 0s;
}

.category-close-button:hover {
    color: #c4c4c4;
}

.home_border_fix.im_open .category-close-button {
    display: block;
}

.home_border_fix.im_open .category-close-button > .icon {
    cursor: pointer;
    width: 100%;
}

.home_border_fix .category-list-container {
    cursor: pointer;
    transition: transform ease-in-out .2s, box-shadow ease-in-out .2s;
}

.home_border_fix:not(.im_open) .category-list-container:hover {
    transform: scale(1.05);
    box-shadow: #0000004d 0 0 15px;
}

.home_border_fix .category-list-container > .home-category-row {
    padding-left: 15px;
}

.assignment_open > #home_left_content > .home_border_fix .category-list-container > .home-category-row {
    padding-right: 15px;
}

.home_border_fix .category-list-container > .home-category-row > .package-icon-hold {
    display: none;
    cursor: initial;
}

#home_left_content > .home_border_fix.im_open > .category-list-container {
    padding-top: 0;
    padding-left: 0;
    cursor: auto;
}

.content-menu-nav .nav-icon-hold,
.exercise-nav .nav-icon-hold,
.home_border_fix.im_open .category-list-container .home-category-row > .package-icon-hold {
    display: flex;
    align-items: center;
    height: 61px;
    border-top-left-radius: 5px !important;
    background: #E60066;
    border-color: transparent;
}

.home_border_fix.im_open .category-list-container .home-category-row > .package-icon-hold {
    padding: 0 30px;
}

.content-menu-nav .nav-icon-hold,
.exercise-nav .nav-icon-hold {
    height: 50px;
    padding: 0 25px;
}

.package-icon-hold > .settings-dropdown-icon {
    width: 25px;
    color: #fff;
    display: none;
}

.home-category-row .package-icon-hold > .settings-dropdown-icon {
    display: block;
}

.settings-dropdown-icon {
    margin-left: -2px;
}

.category-title,
.sub-category-list-name {
    justify-content: space-between;
    overflow: hidden;
}

.sub-category-list-name.sub-category-grade-col {
    display: flex;
    justify-content: flex-end;
}

.category-title {
    flex-grow: 1;
}

.category-title .custom_category_name {
    padding-left: 15px;
}

.category-title .filters {
    display: none;
}

#home_left_content > .home_border_fix.im_open .category-title .filters {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.category-title .filters > li {
    list-style-type: none;
    padding: 3px 10px;
    background-color: #c4c4c477;
    font-weight: 700;
    color: #4A4C4B;
    cursor: pointer;
    margin-right: 1px;
}

.category-title .filters > li .icon {
    width: 15px;
    margin-bottom: -1px;
}

.category-title .filters > li:hover,
.category-title .filters > li.active {
    background-color: #c4c4c4;
}

.category-title .filters > li:first-of-type {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.category-title .filters > li:last-of-type {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.home_border_fix.im_open .category-grade-col.-bottom,
.home_border_fix:not(.im_open) .category-grade-col.-top {
    display: none;
}

.home_border_fix.im_open .category-grade-col.-top,
.home_border_fix:not(.im_open) .category-grade-col.-bottom {
    display: inline-block;
}

.home_border_fix .pull-right.tiptool {
    display: flex;
}

.home_border_fix.im_open .category-grade-col.-top > .pull-right {
    margin-left: 10px;
}

.assignment_open > #home_left_content > .home_border_fix .category-list-container > .home-category-row .category-grade-col.-top > .pull-right {
    margin-right: 5px;
}

.home_border_fix:not(.im_open) .category-grade-col.-top > .pull-right {
    float: none !important;
}

/* Custom home packages styling END */

#fixed_cosinus_bar .flat-header {
    border-bottom: none;
}

#fixed_cosinus_bar + .container #white_page > div {
    padding: 0 !important;
}

#fixed_cosinus_bar + .container #white_page > div > div {
    margin-top: 0 !important;
}

#fixed_cosinus_bar + .container:not(.view_forum_readspeaker) {
    margin-top: 0 !important;
}

@media screen and (max-width: 767px) {
    #fixed_cosinus_bar {
        align-items: center;
    }

    #fixed_cosinus_bar .container {
        justify-content: flex-start;
        margin: 0;
        width: 100%;
    }

    #cosinus_search_container {
        margin-bottom: 30px;
    }
}

@media screen and (min-width: 767px) and (max-width: 1000px) {
    #fixed_cosinus_bar #cosinus_search_home {
        width: 410px !important;
    }
}

/* style the teacher page with fixed header */
#fixed_cosinus_bar + #main_content_container {
    margin-top: 20px !important;
}

/* style author page with fixed header */
#fixed_cosinus_bar .page-header {
    border-bottom: none;
}

/* style achievements page with fixed header */
#fixed_cosinus_bar .achievements-page-heading {
    margin-bottom: 30px;
}

/* style theory page with fixed header */
#exercise_head #fixed_cosinus_bar {
    margin-top: 0;
}

#exercise_head #fixed_cosinus_bar .page-header h3[data-key="title"] {
    margin-right: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#exercise_head #fixed_cosinus_bar .theory_header {
    padding-left: 20px;
    max-width: 750px;
    margin: auto;
}

#fixed_cosinus_bar .theory_header {
    margin-bottom: 0;
    margin-top: 20px;
}

/* style exercise page with fixed header */
#fixed_cosinus_bar .exercise-header {
    margin-bottom: 0;
    margin-top: 20px;
}

.exercise-header {
    border-bottom: none;
    margin-bottom: 30px;
}

.exercise-header .icons,
.exercise-header .edit-exercise-icon,
.exercise-header .pointer.tiptool {
    display: none;
}

.exercise-header > h3 {
    font-family: Roboto;
    color: #005770;
    font-weight: 700;
    font-size: 26px;
}

#fixed_cosinus_bar + #content_container #white_page.view_content_readspeaker {
    margin-top: 0 !important;
}

#exercise_head #fixed_cosinus_bar {
    position: fixed;
    z-index: 9; /* set at 9 because the theory proof expandable button has a z-index of 8 and the bar should be above */
}

#exercise_head #fixed_cosinus_bar .question_header {
    padding-left: 20px;
    max-width: 750px;
    margin: auto;
}

#fixed_cosinus_bar + #content_container .affix.return-home-wrapper {
    z-index: 10; /* set at 10 because this should be above the fixed cosinus bar which is 9 */
}

#fixed_cosinus_bar + #content_container #super_container {
    margin-top: 190px;
}

/* START header buttons for exercise and theory pages */
/* change home button to icomoon close */
.return-home-wrapper .return-home-btn .fa-home:before {
    content: "\e902";
    font-family: "icomoon";
    speak: none;
    font-size: 20px;
}

.return-home-wrapper .return-home-close-btn {
    position: fixed;
    left: 0;
    top: 92px;
}

/* change next button to icomoon chevron right */
.return-home-wrapper .return-home-btn .fa-angle-right:before {
    content: "\e906";
    font-family: "icomoon";
    speak: none;
    font-size: 20px;
    color: #555;
}

.return-home-wrapper .return-home-next-btn, .return-home-wrapper .return-home-previous-btn {
    position: fixed;
    top: 92px;
}

.return-home-wrapper .return-home-next-btn {
    right: 20px;
}

/* change previous button to icomoon chevron left */
.return-home-wrapper .return-home-btn .fa-angle-left:before {
    content: "\e905";
    font-family: "icomoon";
    speak: none;
    font-size: 20px;
    color: #555;
}

.return-home-wrapper .return-home-previous-btn {
    right: 60px;
}

.return-home-wrapper a {
    border: none;
    background: none;
}

#fixed_cosinus_bar .icons {
    bottom: 10px;
    margin-bottom: 0;
}

#fixed_cosinus_bar .icons li.bookmark_icon {
    background: none !important;
    width: auto;
    height: auto;
}

#fixed_cosinus_bar .icons li.bookmark_icon.bookmark_active {
    background: none !important;
    width: auto;
    height: auto;
}

#fixed_cosinus_bar .icons li.bookmark_icon:before {
    content: "\e908";
    font-family: "icomoon";
    speak: none;
    font-size: 24px;
    color: red;
}

/* END header buttons for exercise and theory pages */

/* START button styling at end of exercise */
.exercise_wrapper #buttons {
    border-top: 2px solid #dee5e9;
}

#content_vote_wrapper {
    display: inline;
}

#finished_buttons,
.exercise_wrapper #buttons #button_container {
    padding-top: 40px;
    bottom: -40px;
    position: absolute;
    right: 0;
    margin: auto;
    left: 0;
    margin-bottom: 40px;
}

.exercise-finished-buttons {
    display: inline-block;
}

.exercise_wrapper #buttons #button_container button:not(#check_button) {
    border: none;
}

.exercise_wrapper .exercise-finished-buttons button:not(#continue_button) {
    border: none;
}

.exercise_wrapper_last button:not(#continue_button) {
    border: none;
}

/* END button styling at end of exercise */

/* add border to subchapters that are closed */
.row.open_subcat.subcat_closed:after {
    content: "";
    background: #666766;
    height: 1px;
    width: calc(100% - 30px);
    margin-right: 30px;
    margin-left: 15px;
}

.row.home_border_fix {
    border: none;
}

.row.home_border_fix:not(.im_open):after {
    content: "";
    background: #dee5e9;
    height: 3px;
    width: 97%;
    margin-left: 20px;
}

.sub-category-list-arrow {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* START custom subcat expand icons */
.sub-category-list-arrow > .fa.fa-angle-up.fa-lg.arrow_img.pull-right,
.sub-category-list-arrow > .fa.fa-angle-up.fa-lg.arrow_img.pull-right.fa-flip-vertical {
    display: none !important;
}

.sub-category-list-arrow > .fa.fa-angle-up.fa-lg.arrow_img.pull-right ~ .plus-icon,
.sub-category-list-arrow > .fa.fa-angle-up.fa-lg.arrow_img.pull-right.fa-flip-vertical ~ .chevron-icon {
    display: none;
}

.sub-category-list-arrow > .fa.fa-angle-up.fa-lg.arrow_img.pull-right ~ .chevron-icon,
.sub-category-list-arrow > .fa.fa-angle-up.fa-lg.arrow_img.pull-right.fa-flip-vertical ~ .plus-icon {
    display: block;
}

.sub-category-list-arrow > .fa.fa-angle-up.fa-lg.arrow_img.pull-right ~ .plus-icon,
.sub-category-list-arrow > .fa.fa-angle-up.fa-lg.arrow_img.pull-right ~ .chevron-icon {
    width: 17px;
    margin-right: 9px;
    color: #00F0FF;
    cursor: pointer;
}

/* END custom subcat expand icons */

.crossword td.item_wrong, .item_wrong, .mc_wrong > div, .rank_wrong {
    background-color: #F9C2DA !important;
}

.crossword td.item_correct, .item_correct, .mc_correct > div, .rank_correct, tr.mc_correct > td,
.sw-correct, .sw-solution {
    background-color: #BFF1E4 !important;
}

.sw-correct, .sw-solution {
    border-bottom: 1px solid #4A4C4B;
    padding: 10px;
    margin: 0;
}

.result .answer > .feedback_icon {
    display: none;
}

/* increase search bar width */
#fixed_cosinus_bar #cosinus_search_home {
    width: 500px;
}

@media (max-width: 767px) {
    #fixed_cosinus_bar #cosinus_search_home {
        width: 100%;
    }
}

/* add plus icon if the bookmark has not been clicked yet */
#fixed_cosinus_bar .icons li.bookmark_icon:not(.bookmark_active):before {
    content: "\e990";
    font-family: "icomoon";
    speak: none;
    font-size: 24px;
    color: #555;
}

/* START style the theory overlay for an exercise */
#subcat-content-wrapper .theory_header {
    background: #dee5e9;
    border: none;
    height: 130px;
    margin: 0;
}

#subcat-content-wrapper .theory_header h3 {
    max-width: 750px;
    margin: auto;
    padding-left: 20px;
}

#subcat-content-wrapper .theory_header h3.theory_title_path {
    padding-top: 44px;
    margin-bottom: 18px;
}

#subcat-content-wrapper #close-subcat-wrapper-x {
    background: transparent;
    float: left !important;
    color: #4A4C4B;
    top: 0;
    position: sticky;
}

.scroll-to-top {
    display: none;
    position: sticky;
    bottom: 60px;
    left: 15px;
    padding: 10px;
    align-items: center;
    background-color: transparent;
    border-radius: 4px !important;
}

.scroll-to-top > svg {
    width: 20px;
    transform: rotate(180deg);
}

#subcat-content-wrapper.ps--active-y .scroll-to-top {
    display: flex;
}

#subcat-content-wrapper #subcat-content {
    padding-top: 20px;
}

#subcat-content-wrapper #close-subcat-wrapper-arrow .fa {
    font-family: "icomoon" !important;
    speak: none;
    font-size: 24px !important;
    margin: 0;
}

#subcat-content-wrapper #close-subcat-wrapper-arrow .fa-angle-double-right:before {
    content: "\e906";
}

#subcat-content-wrapper #close-subcat-wrapper-arrow .fa-angle-double-left:before {
    content: "\e905";
}

#subcat-content-wrapper #close-subcat-wrapper-arrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #5e5e5e;
}

#subcat-content-wrapper #close-subcat-wrapper-arrow {
    display: none;
}

#subcat-content-wrapper {
    border: none;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 25%);
}

/* make exercise appear locked when theory page is overlaid */
#subcat-content-wrapper.active ~ #super_container {
    opacity: 0.4;
    pointer-events: none;
}

/* END style the theory overlay for an exercise */

/* START customize the keyboard pop up on the exercise page */
.palette-switch {
    justify-content: flex-end;
    width: 1000px;
    padding-bottom: 6px;
    background: transparent;
    margin: -60px auto 0;
}

.palette-switch ul.tabs {
    flex-grow: 1;
}

.palette-switch ul.tabs > li {
    float: none;
}

.palette.palette-hidden .palette-switch ul li:not(.tab_close) {
    display: none;
}

@media (min-width: 1024px) {
    .palette.palette-hidden .tab_close {
        padding: 10px 20px 0 20px;
        background-color: #fff !important;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }
}

/* styling for list items that are not the keyboard */

.palette.palette-visible .palette-switch ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.palette.palette-visible .palette-switch ul li.tab_close {
    margin-right: auto;
    margin-left: 20px;
}

.palette .palette-switch ul li.tab_close {
    transition: all ease-in-out .2s;
    border-radius: 4px;
}

.palette.palette-visible .palette-switch ul li:not(.tab_close) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-self: center;
    float: right;
    min-width: 50px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    background-color: #E7E8E8;
    margin: 3px 10px 3px 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
}

.palette.palette-visible .palette-switch ul li.active:not(.tab_close) {
    background-color: #707070;
}

.palette.palette-visible .palette-switch ul li:not(.tab_close) a {
    padding: 6px 8px 4px;
    text-transform: uppercase;
    font-size: 12px;
    color: #5a5a5a;
}

.palette.palette-visible .palette-switch ul li.active:not(.tab_close) a {
    color: #FFFFFF;
}

.palette.palette-visible .palette-switch {
    background: #ced1d6;
}

.palette .palette-switch ul.tabs {
    padding: 0;
}

/* todo remove on smaller screens for positioning keyboard icon at bottom */
@media (min-width: 1024px) {
    .no-scroll {
        padding-right: 15px;
    }

    body.no-scroll .exercise-nav.-top {
        padding-right: 15px;
    }

    body.no-scroll .nav-menu-container {
        padding-right: 30px;
    }

    body.no-scroll #palette {
        padding-right: 19px;
    }

    .palette .palette-switch .tabs .tab_close {
        display: inline-flex;
        flex-direction: row;
        justify-content: normal;
        padding-bottom: 8px;
        padding-top: 6px;
        margin-left: 30px;
    }
}

span.palette-tab-close {
    display: none;
}

.tab_close:after {
    display: inline-block;
    border: 0;
    font-family: FontAwesome;
    content: "\f11c";
    font-size: 50px;
    font-weight: normal;
    width: auto;
    height: auto;
    color: #707070;
}

.palette-switch ul.tabs > li:hover {
    background: transparent;
}

.palette-switch ul.tabs.clearfix {
    background: transparent;
}

.palette-switch ul.tabs.clearfix li {
    background: transparent;
}

.palette-switch ul.tabs {
    max-height: none;
    line-height: normal;
}

/* todo fix the height on the keyboard palette */
@media (min-width: 1024px) {
    .palette-switch ul.tabs > li {
        height: auto;
        margin: 0;
        padding: 0;
    }
}

@media (max-width: 1023px) {
    #palette.palette-hidden {
        height: 35px !important;
    }

    .palette-switch ul.tabs > li {
        height: 35px !important;
    }

    .palette-switch ul.tabs > li.tab_close {
        flex-grow: 1;
        padding-left: 10%;
        padding-bottom: 5px;
    }
}

.palette-switch ul.tabs > li {
    box-shadow: none;
    max-width: none;
}

/* shrink the keyboard palette */
.palette {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
}

@media (max-width: 1023px) {
    .palette {
        height: initial !important;
    }
}

/* END customize the keyboard pop up on the exercise page */

/* START style analytics custom header */
.analytics__actions button {
    background: transparent;
}

.analytics__datetimefilter #daterangecontainer {
    background: transparent;
}

.package-exercise-anchor .exercise_thumb > i {
    display: none;
}

.package-history-selector span:after {
    display: none;
}

.exercise_thumb[data-repeat="0"]:not(.current-step),
.test_thumb[data-repeat="0"]:not(.current-step) {
    opacity: 0.5;
}

.exercise_thumb[data-repeat="0"]:hover,
.test_thumb[data-repeat="0"]:hover {
    box-shadow: none;
}

.package-exercise-anchor .exercise_thumb.test_thumb_error:after {
    content: "\e904";
    font-family: "icomoon";
    speak: none;
    font-size: 12px;
    display: inline-block;
    border: 0;
    position: absolute;
    color: #FFFFFF;
    width: auto;
    height: auto;
    margin: 1px 0 0;
}

/* END style analytics custom header */

/* replace hamburger bars with icomoon icon */

#navbarLeftContainer .cosinus-hamburger-li {
    height: 50px;
    width: 60px;
}

#cosinusDropdownMenuLink i {
    display: none;
}

/* #cosinusDropdownMenuLink:before {
    content: "\e900";
    font-family: "icomoon";
    speak: none;
    font-size: 16px;
    padding-left: 5px;
} */

#navbarLeftContainer .bookmark-menu-item i:before {
    content: "\e908";
    font-family: "icomoon";
    speak: none;
    font-size: 20px;
}

.analytics {
    padding-top: 30px;
}

/* fix breadcrumb styling for analytics */
.analytics__target--replay .try--selector.test_thumb:before {
    display: none;
}

.analytics__target--replay span.test_thumb_number {
    color: #bcc4c7 !important;
    margin-left: 15px;
    min-width: 22px;
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
    text-align: right;
}

.test-breadcrumbs .test_thumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.test-breadcrumbs .test_thumb span {
    margin-right: 45px;
}

.test-breadcrumbs .test_thumb_selected:after {
    display: none;
}

/* change background color of input canvas */
canvas.mathdoxformula {
    background-color: #EBF5F9;
}

#solution_button {
    margin-right: 10px;
}

.button_wrapper {
    padding-top: 50px;
    font-family: Roboto;
}

#buttons.button_wrapper {
    position: relative;
    padding-top: 100px;
}

@media (max-width: 767px) {
    .button_wrapper {
        padding-top: 100px;
    }
}

.button_wrapper button {
    font-weight: bold;
}

.button_wrapper button:focus,
.button_wrapper button:active,
.button_wrapper button:hover {
    border-radius: 4px !important;
}

/* shrink background image of checkmark icon shown in the result section of an exercise */
.sw-correct-answer {
    background-size: 30px;
}

.package-append-solution-wrapper {
    position: relative;
}

#append_solution_button {
    position: absolute;
    right: 0;
}

/* change append solution button to icomoon chevron down */
#append_solution_button .fa-angle-down:before {
    content: "\e907";
    font-family: "icomoon";
    speak: none;
    font-size: 24px;
    color: #555;
}

#append_solution_button.package-append-solution {
    border: none;
    padding: 15px;
}

/* make current step of breadcrumb darker */
.current-step.sw-bg-default {
    background-color: #fff;
}

.sw-bg-default {
    background-color: #D7DBD9;
}

/* change font on exercise pages and theory pages*/
#exercise_head {
    font-family: "Cambria Math", "Cambria", "Georgia", serif;
    font-size: 18px;
    background-color: #DBE7EC !important;
}


/* show header for test wrapper */
.test_wrapper .exercise_wrapper .exercise-header {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* hide package name in exercise header */

/* content hold styling */
#exercise_head #white_page {
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding-top: 50px;
    padding-left: 30px;
    padding-right: 30px;
}

.exercise-nav {
    height: 50px;
    background-color: #4A4C4B;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-radius: 6px 6px 0px 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    transition: all .2s ease-in-out;
    font-family: Roboto;
}

.content-menu {
    display: none;
    position: fixed;
    max-height: 85vh;
    z-index: 9;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    margin-left: -15px;
    font-family: Roboto;
}

.content-menu .col-xs-1 {
    width: 4%;
}

.content-menu .col-sm-1 {
    width: 2.5%;
}

@media (min-width: 768px) {
    .content-menu {
        width: inherit;
    }
}

.content-menu::-webkit-scrollbar {
    width: 12px; /* width of the entire scrollbar */
}

.content-menu::-webkit-scrollbar-track {
    background: #4A4C4B; /* color of the tracking area */
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.content-menu::-webkit-scrollbar-thumb {
    background-color: #A4A8A6; /* color of the scroll thumb */
    border-radius: 20px; /* roundness of the scroll thumb */
    border: 3px solid #4A4C4B; /* creates padding around scroll thumb */
}

/* .content-menu .home_border_fix .category-list-container {
    transition: none;
} */

.content-menu-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #4A4C4B;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 25%);
}

.content-menu-nav .close-button {
    padding: 0 15px;
    background-color: transparent;
    color: #A4A8A6;
}

.content-menu .home_border_fix .category-list-container:hover {
    transform: none;
    box-shadow: none;
}

.content-menu-nav .close-button > svg {
    width: 20px;
    vertical-align: middle;
}

.content-menu-data {
    display: flex;
}

.content-menu-data > .content-error {
    margin: 10px;
    color: white;
    padding: 5px;
    font-weight: bold;
}

.content-menu-data .home-category-row {
    display: none;
}

.content-menu .home_border_fix .sub-category-teacher-menu {
    display: none;
}

.content-menu .category_name_link,
.content-menu .category_name_link .pointer,
.content-menu .sub-category-list-name .subcategory_name_link,
.content-menu .home_border_fix .category-list-container {
    cursor: default !important;
}

.content-menu .home_border_fix a {
    cursor: pointer;
}

.content-menu .sub-category-list-arrow {
    display: none;
}

.exercise-nav.-top.-hide {
    opacity: 0;
    pointer-events: none;
}

.exercise-nav.-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 50px;
    z-index: 10;
    border-radius: 0;
    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
    opacity: 1;
    pointer-events: all;
}

.exercise-nav.-top .nav-icon-hold {
    border-radius: 0 !important;
}

.left-nav-container {
    display: flex;
    align-items: center;
    max-width: calc(100% - 205px); /* makes sure right buttons are always visible by adding ellipsis to path crumbs*/
}

.left-nav-container .chapter-title {
    color: #fff;
    margin-left: 16px;
}

.left-nav-container button.path-crumb {
    margin-left: 0;
    color: #fff;
    border: none;
    background: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.left-nav-container button.path-crumb:first-of-type {
    margin: 0 0 0 10px;
}

.left-nav-container button.path-crumb:hover {
    text-decoration: underline;
}

.exercise-nav .nav-icon-hold:hover {
    border-top-left-radius: 6px;
}

.content-menu-nav .nav-icon-hold > svg,
.exercise-nav .nav-icon-hold > svg {
    width: 25px;
    color: #fff;
}

.exercise-nav .bookmark-hold {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}

.exercise-nav .bookmark-hold ul {
    margin: 0;
    padding-top: 0;
    padding-left: 0;
}

.exercise-nav svg {
    width: 18px;
    color: #fff;
}

.exercise-nav .bookmark_icon {
    list-style-type: none;
    cursor: pointer;
}

.exercise-nav .bookmark_icon svg {
    width: 20px;
}

.exercise-nav .bookmark_icon.bookmark_active {
    background: none !important;
}

.exercise-nav .bookmark_icon.bookmark_active svg {
    color: #00F0FF;
}

.exercise-nav .exercise-nav-buttons {
    padding-right: 25px;
}

.exercise-nav .exercise-nav-buttons,
.bookmark_icon {
    display: flex;
    align-items: center;
}

.exercise-nav .exercise-nav-buttons > a {
    position: initial;
    margin: 5px;
    padding: 0 10px;
    display: flex;
    align-items: center;
}

.exercise-nav .exercise-nav-buttons > a:last-of-type {
    padding-right: 0;
}

#button_container svg,
.content-page-button svg {
    width: 20px;
    vertical-align: text-top;
    margin-right: 10px;
}

#button_container i {
    margin-right: 10px;
}

.test_thumb,
.sw-label-primary,
.sw-btn-primary {
    background-color: #0066FF;
}

.sw-btn-primary {
    border-color: #0066FF;
}

.sw-btn-primary:hover {
    background-color: #0066ffaf;
}

#save_button,
#stop_button,
#check_button,
#continue_button,
.sw-btn-primary.next_button,
.sw-btn-primary.prev_button {
    border-radius: 4px !important;
}

#button_container > button:nth-of-type(2) {
    margin-right: 0;
}

#exercise_head #fixed_cosinus_bar {
    top: 0;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
}

#exercise_head #fixed_cosinus_bar.shrink {
    top: -75px;
}

/* set max width for exercise content */

/* add arrow button after the continue text */
#continue_button i {
    display: none;
}

.content-margin-fix-exercise .content-icon {
    display: none;
}

.content-icon {
    width: 20px;
    margin-bottom: -2px;
    vertical-align: baseline;
    position: absolute;
    margin-left: -35px;
}

@media (min-width: 768px) and (max-width: 991px) {
    .content-icon {
        margin-left: -95px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .content-icon {
        margin-left: -205px;
    }
}

@media (min-width: 1200px) {
    .content-icon {
        margin-left: -180px;
    }
}

#continue_button::after {
    content: "\e906";
    font-family: "icomoon";
    speak: none;
    font-size: 12px;
    padding-left: 10px;
}

/* change the question button style */
.theory_wrapper #question_button {
    border: none;
    float: none;
    color: #000;
}

.theory_wrapper #question_button i, .exercise-finished-buttons #question_button i {
    display: none;
}

.theory_wrapper #question_button:focus, #question_button:hover {
    color: #595959;
    background-color: #eee;
}

/* change font style for theory and exercise page buttons and headers */
/* .theory_new_example_btn, .theory_example:after, .theory_wrapper #buttons, .exercise_wrapper button, #fixed_cosinus_bar,
.answer_table .feedback, .previous_table .previous_feedback, .exercise_wrapper_last, #palette .palette-switch,
#post_question, #subcat-content-wrapper .page-header, .hint-wrapper strong, .footer-content, .qa_buttons button {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} */

.footer-content {
    font-size: 14px;
}

.sw-footer:not(.content) {
    margin-left: 40px;
    margin-right: 40px;
    text-align: initial !important;
}

.sw-footer a {
    color: #00F0FF;
}

.sw-footer.content {
    margin-bottom: 40px;
    font-size: 16px;
    text-align: initial !important;
}

.sw-footer.content a {
    color: #000;
    text-decoration: underline;
}

.super_container_home ~ .sw-footer {
    color: #fff;
}

.home-link, .sidebar-nav, .sw-nav-bar {
    font-variant: initial;
}

/* fix dropdown for small screens */
@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu {
        position: absolute;
        background-color: #333333;
    }

    .navbar-nav {
        float: left;
        margin: 0;
    }
}

/* move edit theory button in front of fixed cosinus header bar */
#edit-button {
    margin-left: -20px;
    z-index: 10;
    top: 145px;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
}

#author_edit_buttons {
    z-index: 1000;
    top: 90px;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
}

#edit-button.shrink {
    top: 70px;
}

.edit-button {
    background: none;
    padding-left: 0;
    position: relative;
}

.edit-button:active {
    box-shadow: none;
}

.edit-button > .icon {
    width: 20px;
    color: #fff;
}

#author_edit_buttons.shrink {
    top: 16px;
}

.exercise_wrapper_last {
    max-width: 750px;
    margin: auto;
}

/* uppercase first letter of buttons */
.exercise_wrapper_last .buttons button {
    text-transform: capitalize;
}

#post_question .buttons button {
    text-transform: capitalize;
}

/* order the tabs in the keyboard */
.palette-switch .tabs .tab1 {
    order: 1;
}

.palette-switch .tabs .tab11 {
    order: 2;
}

.palette-switch .tabs .tab12 {
    order: 3;
}

.palette-switch .tabs .tab13 {
    order: 4;
}

.palette-switch .tabs .tab7 {
    order: 5;
}

.palette-switch .tabs .tab10 {
    order: 6;
}

.palette-switch .tabs .tab8 {
    order: 7;
}

/* make current step number bold */
.exercise_thumb.current-step span.test_thumb_number {
    color: #626667 !important;
}

.thumb_wrong.attempt_viewer_history_box {
    border: 2px solid #E60066;
    border-radius: 5px;
    height: var(--breadcrumb-size);
    width: var(--breadcrumb-size);
}

.exercise_thumb.current-step.thumb_wrong,
.thumb_wrong {
    background-color: #fff !important;
}


.thumb_wrong.attempt_viewer_history_box,
.thumb_wrong.attempt_viewer_history_box_selected {
    border: 2px solid #E60066;
    border-radius: 5px;
    height: var(--breadcrumb-size);
    width: var(--breadcrumb-size);
    background-color: #E60066 !important;
}

.package-history-selector .attempt_viewer_history_box_nav {
    border-radius: 5px;
    height: var(--breadcrumb-size);
    width: var(--breadcrumb-size);
}

.thumb_correct,
.exercise_thumb.current-step.thumb_correct {
    background-color: #fff !important;
}

.thumb_correct.attempt_viewer_history_box,
.thumb_correct.attempt_viewer_history_box_selected {
    background-color: #01C692 !important;
}

.test_thumb_error,
.exercise_thumb.current-step.thumb_approx {
    background-color: #fff !important;
}

.test_thumb_error.attempt_viewer_history_box,
.test_thumb_error.attempt_viewer_history_box_selected {
    background-color: #ffb400 !important;
}


/* test table uppercase first letter */
#test_table h5::first-letter, #test_table h6::first-letter {
    text-transform: capitalize;
}

/* style test overview button */
.test_wrapper .test_button_wrapper .overview_button {
    border: none;
}

/* uppercase first letter student test setting page */
.row .well h5::first-letter {
    text-transform: capitalize;
}

/* shrink text of titles in achievements */
.achievement_card .achievement_front_title, .achievement_card .achievement_front_title_hidden {
    font-size: 20px;
}

.achievement_back .achievement_back_title h2 {
    font-size: 18px;
}

/* START custom widget styling for desktop layout */
.widget-scrollable-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 25px;
}

.widget-scrollable-container > .scrollable > .row {
    margin-bottom: 25px;
}

@media (max-width: 1199px) {
    .widget-scrollable-container {
        padding-left: 35px;
        padding-right: 35px;
    }

    .super_container_home #white_page {
        padding-left: 20px;
        min-height: initial;
        margin-bottom: 100px;

    }

    .widget-scrollable-container > .scrollable {
        max-width: 100% !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-right: 0 !important;
    }

    .widget-scrollable-container > .scrollable > .row {
        width: 50%;
        display: inline-block;
    }
}


@media (max-width: 700px) {
    #home_left_content > .home_border_fix.im_open .category-title .filters {
        display: none;
    }
}

@media (max-width: 767px) {
    #home_left_content > .home_border_fix.im_open {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }

    #fixed_cosinus_bar .greeting {
        font-size: 40px;
    }

    .widget-scrollable-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .widget-scrollable-container > .scrollable {
        justify-content: center;
    }

    .widget-scrollable-container > .scrollable > .row {
        width: 100%;
        display: inline-block;
    }

    .widget-scrollable-container > .scrollable > .row > .col-xs-12 {
        padding-right: 0;
        padding-left: 0;
    }
}

/* align top of widget column with packages top */
@media (min-width: 1200px) {
    .widget-scrollable-container > .scrollable {
        padding-top: 55px;
        max-width: 500px !important;
    }
}

.widget-scrollable-container > .scrollable .alert {
    border-radius: 5px !important;
}

.widget-scrollable-container > .scrollable > .row .widget-header {
    padding: 6px 15px;
    color: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
}

/*TODO colors look differently in browsers then in design*/
.widget-scrollable-container > .scrollable > .row .widget-header.-messages {
    background-color: #e6006652;
}

.widget-scrollable-container > .scrollable > .row .widget-header.-assignments {
    background-color: #00f0ff61;
}

.widget-scrollable-container > .scrollable > .row .widget-header.-tests {
    background-color: #0066ff63;
}

.widget-scrollable-container > .scrollable > .row .widget-header.-schools {
    background-color: #e6006661;
}

.widget-scrollable-container > .scrollable > .row .widget-header.-classes {
    background-color: #ffdaf573;
}

.widget-scrollable-container > .scrollable > .row .widget-header.-scores {
    background-color: #00640094;
}

.widget-scrollable-container > .scrollable > .row .widget-body.-scores {
    background-color: #4a4c4b70;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.widget-scrollable-container > .scrollable > .row .widget-body.-scores .knob {
    color: white !important;
}

.widget-scrollable-container > .scrollable > .row .widget-header .widget-create-button-shortcut {
    margin-bottom: 0;
    padding: 0;
}

.widget-scrollable-container > .scrollable > .row .widget-header .widget-create-button-shortcut a {
    color: #fff;
    display: flex;
    align-items: center;
}

.widget-scrollable-container > .scrollable > .row .widget-body {
    padding: 15px;
    background-color: #fff;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.widget-scrollable-container > .scrollable > .row .widget-body .icon {
    width: 20px;
}

.widget-scrollable-container > .scrollable > .row .widget-body .label-sidebar-waiting-room {
    border-radius: 5px !important;
    padding: 5px 6px;
}

.widget-scrollable-container > .scrollable > .row .widget-body.-assignments,
.widget-scrollable-container > .scrollable > .row .widget-body.-tests {
    padding-left: 0;
    padding-right: 0;
}

/*Hide button in message widget body for Cappelendamm*/
.widget-scrollable-container > .scrollable > .row .widget-body .widget-create-button-shortcut {
    display: none !important;
}

.assignment-widget .widget-create-button-shortcut {
    margin-bottom: 0;
    margin-top: 0;
}

.tests-widget-row .widget-create-button-shortcut, .messages-widget-row .widget-create-button-shortcut {
    margin-top: 0;
    margin-bottom: 25px;
}

.messages-widget-row .widget-create-button-shortcut span {
    text-transform: lowercase;
}

.messages-widget-row .widget-body > .side-bar-class-message > .label {
    background-color: #DCEAF0;
    color: #000;
    padding: 5px 6px;
    border-radius: 2px !important;
}

.assignments-widget-row .widget-body .assignment-content,
.widget-body .test-item-row .test-content {
    padding: 0;
}

.widget-body .test-item-row .test-content {
    padding-bottom: 10px;
}

.widget-body .test-item-row .test-content .side-bar-tests-a {
    margin-left: 0;
    color: #000;
}

.widget-body .test-item-row .test-content .test-info > span:first-of-type {
    font-weight: bold;
}

.side-bar-tests-hr {
    margin-left: 0;
}

.assignments-widget-row .widget-body .assignment-content .icon {
    color: #4A4C4B;
}

.widget-body .icon.-large {
    width: 40px !important;
}

.assignments-widget-row .widget-body .assignment-content .assignment-start-button {
    margin-top: 10px;
}

.assignments-widget-row .widget-body.-assignments > .view-past {
    margin: 0 15px;
}

.assignments-widget-row .widget-body.-assignments .side-bar-tests-i {
    margin-bottom: 15px;
    margin-left: -15px;
}

.assignments-widget-row .assignment-wrapper,
.test-item-row {
    border-bottom: #D9D8D7 solid 1px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 10px;
    margin-top: 15px;
}

.assignments-widget-row .assignment-wrapper {
    padding-bottom: 20px;
}

.assignments-widget-row .assignment-wrapper:first-of-type {
    margin-top: 0;
}

.assignments-widget-row .assignment-wrapper h5,
.test-item-row .test-content .side-bar-tests-a {
    color: #257BFF;
    font-size: 16px;
    text-decoration: none;
}

.assignments-widget-row .assignment-wrapper .assignment-buttons {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}

.test-item-row .test-content .test-buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.test-item-row .test-content .test-buttons .test-info {
    text-align: end;
}

.test-item-row .test-content .test-buttons .icon,
.assignments-widget-row .assignment-wrapper .assignment-buttons .icon {
    color: #A4A8A6;
}

.test-item-row .test-content .test-buttons .icon:hover,
.assignments-widget-row .assignment-wrapper .assignment-buttons .icon:hover {
    color: #000;
}

.assignments-widget-row .assignment-wrapper .assignment-buttons > div {
    margin-top: 10px;
}

.assignments-widget-row .assignment-wrapper .assignment-buttons .assignment-progress-circle {
    align-self: flex-end;
    margin-top: 0;
}

.test-item-row:last-of-type,
.assignments-widget-row .assignment-wrapper:last-of-type {
    border-bottom: none;
}

.select2-container--bootstrap .select2-selection,
.select2-container--open .select2-dropdown--below {
    border-radius: 6px !important;
}

/* END custom widget styling for desktop layout */

/* START custom widget styling for mobile layout */
#scrollable-sm .widget-header-button {
    display: none;
}

@media (max-width: 767px) {
    #scrollable-sm .cosinus_custom_row {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    #super_container.super_container_home > .row {
        display: flex;
        flex-direction: column;
        margin-top: -10px;
    }

    .scrollable {
        height: auto !important;
    }
}

@media (min-width: 768px) {
    #scrollable-sm {
        margin-top: -45px;
        position: static;
    }
}

/* END custom widget styling for mobile layout */

.assignments-header {
    display: flex;
    flex-direction: row;
    margin-top: -10px;
    margin-bottom: 15px;
    margin-left: 15px;
    width: 100%;
}

.assignments-header > .icon {
    border: none;
    background-color: #4a4c4b70;
    padding: 20px 35px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    display: flex;
    align-items: center;
}

.assignments-header > .icon > svg {
    width: 30px;
}

.assignments-header > .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    margin-right: 30px;
    background-color: #4A4C4B;
    width: 100%;
    color: #fff;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.assignments-header > .info i {
    display: none;
}

.assignments-header > .info > .info-text {
    margin: 0;
}

.assignments-header > .info > .info-text:nth-child(1) {
    font-weight: 800;
}

.assignments-header > .info > .info-text:nth-child(2) {
    margin-right: 10px;
}

.assignments-header > .info > .info-text:nth-child(3) {
    flex-basis: 100%;
}

.assignments-header > .info > .info-text:nth-child(3):empty {
    display: none;
}

@media (max-width: 767px) {
    .assignments-header {
        margin-bottom: 14px;
        margin-left: 0;
    }

    .assignments-header > .info {
        margin-right: 0;
    }
}

#white_page.assignment_open .assignments-header > .info {
    border-bottom-right-radius: 0;
}

#white_page.assignment_open #cosinus_search_container {
    margin-top: 5px;
}

#white_page.assignment_open .assignments-header > .icon {
    border-bottom-left-radius: 0;
}

#white_page.assignment_open #home_left_content {
    margin-top: -15px !important;
}

#white_page.assignment_open .teacher_home_context_menu,
#white_page.assignment_open .sub-category-teacher-menu,
#white_page.assignment_open .package-icon-hold,
#white_page.assignment_open .filters {
    display: none !important;
}

#white_page.assignment_open #home_left_content .home_border_fix.im_open {
    border-radius: 0;
}

#white_page.assignment_open #home_left_content .home_border_fix.im_open.-last {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

/* hide border on solution button in theory pages */
.qa_buttons .solution_button {
    border: none;
}

/* limit width on exercise pages */
#finished_buttons,
.main_container,
.test_wrapper,
#super_container .exercise_wrapper,
.exercise_wrapper #buttons #button_container {
    max-width: 750px;
    margin: 0 auto 40px auto;
}

@media screen and (max-width: 1199px) {
    .main_container,
    .test_wrapper,
    #super_container .exercise_wrapper,
    .exercise_wrapper #buttons #button_container {
        max-width: 500px;
    }
}

@media screen and (max-width: 743px) {
    .main_container,
    .test_wrapper,
    #super_container .exercise_wrapper,
    .exercise_wrapper #buttons #button_container {
        max-width: 360px;
    }
}

.exercise_wrapper {
    padding: 0;
}

#exercise_loader {
    padding: 0 200px !important;
}

.test_wrapper {
    clear: initial;
}

.main_container #overview > .row:first-of-type {
    display: flex;
}

/* change font style on test overview */
#exercise_head #overview[data-function="test"] {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 20px;
}

.test_button_wrapper, .question_header {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* hide access code for class on profile page */
#user_info #access_code_link {
    display: none !important;
}

.register-student_number {
    display: none;
}

/* style achievements icon in menu */
#menu-achievements {
    height: 50px;
    width: 50px;
}

#menu-achievements a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 !important;
}

#menu-achievements .fa-trophy {
    font-size: 22px;
}

/* make width of first subcategory line extend to match the category line */
.sub-category-list-item-line-first {
    width: 100%;
    border-top: 3px solid #666766;
}

.sub-category-list-item-line {
    border-color: #666766;
    transition: all .5s ease-in-out;
}

.sub-category-list-container {
    padding-right: 15px;
}

.front .row:first-of-type .sub-category-list-container {
    padding-top: 0;
    margin-top: 10px;
}

.front .row:last-of-type .sub-category-list-container:last-of-type {
    padding-bottom: 0;
}

.sub-category-list-item-container {
    display: flex;
}

.sub-category-list-item-container > .bookmark-progress-wrap {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-left: 0;
    justify-content: space-between;
}

.-bold .home-content-icon-img {
    opacity: 1 !important;
}

.sub-category-list-item-container .item_icon > img,
#search_results_list > div .home-content-icon-img {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(299deg) brightness(106%) contrast(100%);
}

.sub-category-list-item-container .alt-font-color {
    color: #fff;
}

.bookmark-icon {
    display: flex;
    justify-self: center;
}

.bookmark-icon > .icon {
    width: 15px;
    color: #00F0FF;
    height: intrinsic; /* Safari fix */
}

.sw-label-danger.no-results {
    display: inline-block;
    margin: 20px 0;
    background-color: transparent;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}

/* custom style for class button on sidebar widget */
.widget-class-ul {
    display: flex;
    flex-direction: column;
}

.widget-class-ul li {
    margin-left: 0 !important;
    border: none !important;
    padding-bottom: 10px !important;
}

.widget-class-button {
    text-transform: uppercase;
    width: 100%;
    border-radius: 5px;
    border: none;
    color: black;
    background: #EFF2F4;
}

.widget-class-ul li.class-active .widget-class-button {
    background: #4A4C4B;
    color: #FFFFFF;
}

.widget-class-button i {
    display: none;
}

.class-inactive {
    padding: 0;
    opacity: 1;
}

.class-active {
    font-weight: normal;
}

/* this selects the add class link */
.widget-class-ul li > a {
    border-radius: 5px !important;
    border: none;
    background: #EFF2F4 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.widget-class-ul li > a i {
    padding-left: 10px;
}

.class-inactive a:hover {
    background-color: #EFF2F4 !important;
    color: #337ab7;
}

.home-number-of-exercises {
    padding-right: 15px;
}

.home_tests_empty, .home_messages_empty {
    width: 100%;
    border-radius: 5px;
    color: black;
    background: #EFF2F4;
    margin: auto;
    text-align: initial !important;
    opacity: 1;
    padding: 10px 15px;
}

.home_tests_empty .test_text {
    display: inline-block !important;
}

/* general modal changes */
.modal .modal-title {
    font-size: 24px !important;
}

.modal .modal-header .close {
    font-size: 32px;
}

.modal .modal-notifi-center .alert-error .close {
    display: none;
}

.modal-notifi-center, .notifi-center {
    width: auto;
}

/* access code modal change */
.access_code_form p {
    display: inline;
}

.access_code_form #access_code {
    float: none;
    margin-left: 10px;
}

/* border for input error */
.input_error_border {
    border: 2px solid #b54142;
}

/* change the url to use for loading from the white background img to the default ajax-loader in imgs */
.sw-waiting, .sw-polling {
    background: url(/assets/packages/cappelen-damm-cosinus/images/ajax-loader.gif) left center no-repeat;
}

/* sans serif font for breadcrumb numbers on exercises */
.test_thumb_number {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* align content with theory header */
#content_theory {
    max-width: 750px;
    margin: auto;
    padding-left: 20px;
}

/* align top of bookmark with other toolbar icons */
.filter_bookmark_home .fa-bookmark, .menu-achievements-item .fa-trophy {
    vertical-align: -25%;
}

/* make bookmark link extend full height of the menu toolbar */
.filter_bookmark_home a {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* change direction of arrow on open categories */
.category-list-icon .fa-angle-up:before {
    content: "\f107";
}

.sub-category-list-arrow .fa-angle-up:before {
    content: "\f107";
}

/* change closed category and subcategory to plus icon */
.category-list-icon .fa-angle-up.fa-flip-vertical:before {
    content: "\f067";
    font-size: 24px;
}

.sub-category-list-arrow .fa-angle-up.fa-flip-vertical:before {
    content: "\f067";
    font-size: 20px;
}

/* extend width of school dropdown */
#widget_school_dropdown #ddSchool + span {
    width: auto !important;
}

/* center indicator circle for subcategory items */
.sub-category-list-row {
    display: flex;
    align-items: center;
}

.sub-category-list-row > .sub-category-teacher-menu > button > .icon,
.home-category-row > .sub-category-teacher-menu > button > .icon,
.sub-category-list-item > .sub-category-teacher-menu > button > .icon {
    color: #fff;
    width: 70%;
    cursor: pointer;
}

.home_border_fix.im_open .home-category-row:hover > .sub-category-teacher-menu,
.home_border_fix.im_open .home-category-row > .sub-category-teacher-menu:hover,
.home_border_fix.im_open .home-category-row:hover > .sub-category-teacher-menu,
.home_border_fix.im_open .home-category-row > .sub-category-teacher-menu:hover,
.home_border_fix.im_open .sub-category-teacher-menu.open,
.sub-category-list-row:hover > .sub-category-list-name ~ .sub-category-teacher-menu,
.sub-category-list-row > .sub-category-list-name ~ .sub-category-teacher-menu:hover,
.sub-category-list-item:hover > .sub-category-teacher-menu,
.sub-category-list-item > .sub-category-teacher-menu:hover {
    opacity: 1;
}

.sub-category-list-item {
    position: relative;
}

.home-category-row > .sub-category-teacher-menu,
.sub-category-list-row > .sub-category-teacher-menu,
.sub-category-list-item > .sub-category-teacher-menu {
    display: block;
    opacity: 0;
    position: absolute;
    width: 45px;
    height: 40px;
    left: -45px;
    top: 2.5px;
    /* transition: opacity ease-in-out .2s; */
    padding: 0;
}

.sub-category-list-row > .sub-category-teacher-menu {
    left: -30px;
    top: 7.5px;
}

.home-category-row > .sub-category-teacher-menu {
    left: -25px !important;
    top: 9.5px !important;
}

.home-category-row > .sub-category-teacher-menu > button,
.sub-category-list-row > .sub-category-teacher-menu > button,
.sub-category-list-item > .sub-category-teacher-menu > button {
    width: 25px;
    height: 100%;
    background-color: #e6006685;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sub-category-teacher-menu ul,
.teacher_home_context_menu_dropdown ul {
    border-radius: 5px;
}

.sub-category-teacher-menu ul > li:first-of-type > button,
.teacher_home_context_menu_dropdown ul > li:first-of-type > button {
    border-top-left-radius: 0;
    border-top-right-radius: 5px;
}

.sub-category-teacher-menu ul > li:last-of-type > button,
.teacher_home_context_menu_dropdown ul > li:last-of-type > button {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.sub-category-teacher-menu .dropdown-menu {
    top: -3px;
    left: 24px;
}

.teacher_home_context_menu .dropdown-menu {
    top: -21px;
    left: 52px;
}

/* increase the z-index for the formula pop out from the tinymce editor to be above the fixed cosinus bar */
#palette-backdrop {
    z-index: 15 !important;
}

.palette {
    z-index: 16 !important;
}

/* widget shortcut button customizations */
.widget-create-button-shortcut {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.widget-create-button-shortcut span {
    margin-left: 10px;
    font-size: 15px;
}

.nav-pills.white .widget-create-button-shortcut a {
    background: transparent;
}

/* change style for add access code button shortcut to match other widgets */
.classes-widget-row .widget-create-button-shortcut {
    margin-top: 0;
    margin-bottom: 25px;
    text-transform: lowercase;
}

/* style for empty widget text */
#home_tests_data .greyedout, #class_messages .greyedout {
    text-transform: lowercase;
}

#home_tests_data .greyedout:first-letter, #class_messages .greyedout:first-letter {
    text-transform: uppercase;
}

.edit_lang_wrapper {
    display: none;
}

/* Tooltip style */
div[id^=DataTables_Table_] .tooltip.fade.left.in * {
    color: white;
}

/* Force geogebra tool bar to go under the cosinus-bar */
.ggbtoolbarpanel.smart-nb-draggable.toolbarPanelNorth.toolbarPanel {
    z-index: 1;
}

/* BEGIN Default table style */
.cappelendamm-table-default {
    width: 0;
    border: 1px solid black;
    border-collapse: collapse;
}

/* all cells */
.cappelendamm-table-default th,
.cappelendamm-table-default td {
    border: 1px solid black !important;
    padding: 5px 10px;
    width: fit-content !important;
}

/* data cells */
.cappelendamm-table-default td {
    background: white;
}


/* Header cells */
.cappelendamm-table-default th {
    color: black;
    background: #EBF0F7;
}

/* END Default table style */

input[type="search"] {
    border: 1px solid gray;
    padding: .2em .4em;
    border-radius: .2em;
}

input[type="search"].dark {
    background: #222;
    color: #fff;
}

input[type="search"].light {
    background: #fff;
    color: #222;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1em;
    width: 1em;
    border-radius: 50em;
    background: url(/images/icons/times.svg) no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
    opacity: .3;
    pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
    filter: invert(1);
}


/*A little space between top navbar and start of theory/exercise page*/
#white_page {
    margin-top: 0;
}

.courses-header-sub-title {
    display: none;
}

.blur {
    filter: blur(1px);
    pointer-events: none;
}

.no-scroll {
    overflow: hidden !important;
}

.-text-blue {
    color: #00F0FF !important;
}

.-border-blue {
    border-color: #00F0FF !important;
}

.-bold {
    font-weight: bold;
}

/* New forum tweaks */
.view_forum #white_page {
    background-color: #fff !important;
}

.view_forum .post_wrapper {
    background-color: #f5f5f5;
    border-radius: 0 !important;
}

.forum-question {
    border-radius: 0;
}

.question_view_question_wrapper {
    background-color: #f5f5f5;
    border-radius: 0;
}

.view_forum .question_detail_header {
    color: inherit;
    font-weight: initial;
}

.question_view_vote_box,
.question_view_vote_box > * {
    border-radius: 0 !important;
}

.question-answers-label {
    padding: .3em .6em .3em;
    border-radius: 0 !important;
}

.tag-dropdown .dropdown-toggle {
    background-color: #599bb4;
}

.tag-dropdown:hover .dropdown-toggle {
    background-color: #fff;
    color: #599bb4;
}

.tag-dropdown:hover > .dropdown-menu {
    border-color: #599bb4;
    border-radius: 0;
}

.tag-dropdown:hover > .dropdown-menu span {
    display: inline-block;
}

/* Prerequisites styles START */
.sub-category-list-name .item-locked {
    padding-right: 5px;
    display: flex;
}

.home-category-row .category-title .item-locked {
    padding-left: 10px;
}

/* Prerequisites styles END */

/* START test breadcrumb styles */
.thumb_correct:after,
.thumb_correct.sub-step:after {
    content: "\e904";
    display: grid;
    place-items: center;
    position: absolute;
    border: 0;
    speak: none;
    color: #01C692;
    font-family: "icomoon";
    font-size: 12px;
    font-weight: 900;
}

.thumb_approx:after,
.thumb_approx.sub-step:after {
    content: "\e904";
    display: grid;
    place-items: center;
    position: absolute;
    border: 0;
    speak: none;
    color: #ffb400;
    font-family: "icomoon";
    font-size: 12px;
    font-weight: 900;
}

/* add white x for wrong answer */
.thumb_wrong:after,
.thumb_wrong.sub-step:after {
    content: "\e903";
    display: grid;
    place-items: center;
    position: absolute;
    border: none;
    speak: none;
    color: #E60066;
    font-family: "icomoon";
    font-size: 10px;
    font-weight: 900;
}

#test-top-nav .test_thumb_selected {
    color: #575757 !important;
}

#test-top-nav #pag-overview:hover {
    color: initial;
}

/* hide the numbers for sub-step problems */
.test_thumb_number.current-main-step-from-sub-step {
    display: none;
}

.exercise-breadcrumbs {
    --indicator-color: #bcc4c7;
    margin-top: 40px;
    height: 100%;
    position: absolute;
    transform: none;
}

.breadcrumbs-wrapper {
    --row-gap: 8px;
    overflow-y: hidden;
    display: grid;
    gap: var(--row-gap) 2px;
    grid-template-columns: var(--breadcrumb-size) var(--breadcrumb-size);
    margin-top: 50px;
    max-height: 75%;
    padding: 2px;
}

.breadcrumbs-wrapper:hover {
    overflow-y: auto;
}

.breadcrumbs-wrapper::-webkit-scrollbar {
    width: 12px; /* width of the entire scrollbar */
}

.breadcrumbs-wrapper::-webkit-scrollbar-track {
    background: transparent; /* color of the tracking area */
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.breadcrumbs-wrapper::-webkit-scrollbar-thumb {
    background-color: #A4A8A6; /* color of the scroll thumb */
    border-radius: 20px; /* roundness of the scroll thumb */
    border: 3px solid #FFF; /* creates padding around scroll thumb */
}

.breadcrumbs-wrapper.with-bookmarks {
    grid-template-columns: var(--breadcrumb-size) var(--breadcrumb-size) max-content;
}

.breadcrumbs-wrapper .sub-step {
    float: none;
    margin-left: 0;
    width: var(--breadcrumb-size);
}

.breadcrumb-number {
    align-self: center;
    background: none;
    background-color: transparent !important;
    color: #bcc4c7;
    font-size: 20px;
    font-weight: 400;
    justify-self: center;
    line-height: 25px;
    outline: none;
}

.breadcrumb-number.highlight {
    color: #bcc4c7;
}

.breadcrumb-number.current-number, .breadcrumb-wrapper:has(.current-step) > .breadcrumb-number {
    color: #626667;
}

.test_thumb,
.exercise_thumb {
    position: relative;
    border-radius: 5px;
    height: var(--breadcrumb-size);
    padding: 0;
    width: var(--breadcrumb-size);
}

.exercise_thumb.main-step {
    background-color: #D7DBD9;
}

.sub-step,
.next-step,
.next-test-step {
    background-color: #D7DBD9;
    position: relative;
}

/* Don't use the new way of showing the indicator. Doesn't fit with the design of these breadcrumbs */
.breadcrumb-wrapper:has(+ .breadcrumb-wrapper > .next-step) > .exercise_thumb::before {
    content: none;
    top: unset;
}

.sub-step:before,
.next-step:before,
.next-test-step:before {
    content: " " !important;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 2px !important;
    height: var(--row-gap) !important;
    transform: translateX(-50%);
    background: var(--indicator-color);
}

.sub-steps {
    display: grid;
    gap: var(--row-gap) 2px;
    grid-template-columns: var(--breadcrumb-size);
    grid-column: 1;
}

.next-test-step:after {
    background: #bcc4c7;
    content: " ";
    height: var(--row-gap);
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    width: 2px;
}

.test-breadcrumbs {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 40px;
    position: absolute;
}

.test_thumb_selected .test_thumb_number {
    color: #575757 !important;
    font-weight: bold;
}

.test_thumb_selected .test_thumb {
    outline: none;
}

.test_thumb {
    cursor: pointer;
    display: grid;
    place-items: center;
}

.test_thumb_initial.test_thumb,
.test_thumb_initial .test_thumb {
    background-color: #bcc4c7;
    color: #bcc4c7;
}

.thumb_correct:after,
.thumb_wrong:after,
.thumb_approx:after,
.thumb_error:after,
.test_thumb_error:after {
    background-color: #fff;
    border: 0;
    border-radius: inherit;
    display: grid;
    font-family: "icomoon";
    font-size: 12px;
    font-weight: 900;
    height: inherit;
    margin: 0;
    place-items: center;
    position: absolute;
    speak: none;
    width: inherit;
}

.test-total.sw-label-success:after,
.thumb_correct:after,
.thumb_correct .test_thumb:after {
    color: #01C692;
    content: "\e904";
    font-size: 10px;
    margin: 0;
    outline: 2px solid #01C692;
}

.thumb_wrong:after,
.thumb_wrong .test_thumb:after {
    color: #E60066;
    content: "\e903";
    outline: 2px solid #E60066;
}

.thumb_approx:after,
.thumb_error:after,
.test_thumb_error:after,
.thumb_approx .test_thumb:after,
.test_thumb_error .test_thumb:after {
    color: #ffb400;
    content: "\e903";
    outline: 2px solid #ffb400;
}

.test-breadcrumbs-live .test_thumb_selected .test_thumb:not(.thumb_correct):not(.thumb_wrong):not(.thumb_approx) {
    background-color: #575757;
}

.current-step {
    border: none !important;
    outline: none;
}

.current-step:not(.breadcrumb-number):after {
    background: url(/assets/packages/cappelen-damm-cosinus/images/icons/ellipsis.svg) left center no-repeat;
    background-color: #fff !important;
    border: 0;
    content: "";
    display: inline-block;
    font-family: "icomoon";
    font-size: 10px;
    height: 25px !important;
    margin: 0;
    position: absolute;
    speak: none;
    /* flat overrides this without !important */
    width: 25px !important;
}

.current-step.thumb_correct:after {
    background: url(/assets/packages/cappelen-damm-cosinus/images/icons/ellipsis-green.svg) left center no-repeat;
}

.current-step.thumb_wrong:after {
    background: url(/assets/packages/cappelen-damm-cosinus/images/icons/ellipsis-red.svg) left center no-repeat;
}

.current-step.thumb_approx:after {
    background: url(/assets/packages/cappelen-damm-cosinus/images/icons/ellipsis-orange.svg) left center no-repeat;
}

.exercise_thumb_popover_btns > button:first-of-type {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.exercise_thumb_popover_btns > button:last-of-type {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom: 0;
}

.exercise_thumb_popover_btns > button:hover {
    background-color: #3C5AFA;
    border-color: #3C5AFA;
    color: #fff;
}

.exercise_thumb_popover_btns {
    width: 134px;
}

.exercise_thumb_popover_btns > button {
    color: #333;
    font-weight: normal;
}

.test-breadcrumbs {
    right: auto;
}

.pag-fw, .pag-fw:hover, .test_status {
    border-radius: 4px !important;
}

.prev-test-step:after {
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    transform: none;
    background: none;
    z-index: auto;
}

/* END test breadcrumb styles */

/* Author tabs */
.nav-tabs {
    --author-tabs-color: #337ab7;
    --author-tabs-active-color: #555;
    --author-tabs-border-color: #DDD;
    --author-tabs-active-border-bottom-color: white;
    --author-tabs-border-width: 1px;
    --author-tabs-border-radius: 0;
}

/* end Author tabs */