@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,800);
/*###############################################################################################################################################################################################################*/
/*#########################################   GLOBAL UNIVERSAL CHANGES   #######################################################################################################################################*/
/*###############################################################################################################################################################################################################*/

.screenreader-only,
.screenreader-only-tool {
    overflow: hidden !important;
    height: 0px !important;
}

body.course-menu-expanded:not(.ic-no-flex-layout):not(.embedded)
.ic-Layout-contentWrapper {
    max-width: 900px;
    margin: 0 auto;
}

/*======================== [ FR [White Label] ] START TEXT ===========================*/
/*Page Title*/
.pages.show .page-title {
    font-size: 24px;
    font-weight: 400;
    top: 110px;
    display: block;
    position: absolute;
    background-color: rgb(255 255 255 / 90%);
    left: 10%;
    right: 10%;
    padding: 10px 20px;
    margin: 0 0 0 auto;
    box-shadow: 0px 0px 65px 30px rgb(0 0 0 / 15%);
    color: #140F4E;
}

/*PAGE BANNER HEADING*/
.pages.show .show-content a:visited {
    color: #140F4E;
}

.pages.show .show-content a:active {
    color: #140F4E;
}

.pages.show .show-content .pages.show .page-title {
    font-size: 30px;
    color: #393d3e;
    font-weight: bold;
}

.pages .topic h1.discussion-title {
    font-size: 24px;
    font-weight: 400;
    color: #393d3e;
    top: 120px;
    display: block;
    position: absolute;
    background-color: rgb(255 255 255 / 90%);
    left: 10%;
    right: 10%;
    padding: 10px 20px;
    margin: 0 0 0 auto;
    box-shadow: 0px 0px 65px 30px rgb(0 0 0 / 15%);
}

/*DISCUSSION BANNER HEADING*/
.discussions .topic h1.discussion-title {
    font-size: 24px;
    font-weight: 400;
    color: #140F4E;
    top: 163px;
    display: block;
    position: absolute;
    background-color: rgb(255 255 255 / 90%);
    left: 15%;
    right: 15%;
    padding: 10px 20px;
    margin: 0 0 0 auto;
    box-shadow: 0px 0px 65px 30px rgb(0 0 0 / 15%);
    z-index: 999;
}

/*DISCUSSION BANNER HEADING*/
h2 {
    padding-top: 26px !important;
    font-size: 26px;
    color: #140F4E;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 10px;
}

h2::after {
    content: "";
    display: block;
    height: 2px;
    width: 100px;
    margin: 8px 0 0 0;
    background-color: #393d3e;
}

.quiz-header h2::after {
    border-bottom: 0 !important;
}

h3 {
    font-size: 23px;
    color: #140F4E;
    font-weight: bold;
    margin-top: 38px;
}

h4 {
    font-size: 18px;
    color: #140F4E;
    font-weight: bold;
    margin-top: 18px;
}

p {
    font-size: 16px;
    margin: 0 !important;
    padding: 12px 0;
}

.pad-box p {
    padding: 8px 0;
}

ul,
ol {
    padding-left: 10px;
    margin: 0 0 20px 25px;
}

li {
    font-size: 16px;
    margin: 3px;
}

.user_content
a:not(.btn):not(.Button):not(.ui-button):not(.ui-button.ui-state-hover):not(
    .ui-button.ui-state-focus
  ):not(.ui-button.ui-state-disabled):not([role="button"]),
.mceContentBody
a:not(.btn):not(.Button):not(.ui-button):not(.ui-button.ui-state-hover):not(
    .ui-button.ui-state-focus
  ):not(.ui-button.ui-state-disabled):not([role="button"]) {
    text-decoration: none;
}

dt {
    color: #140F4E;
}

dt,
dd {
    padding: 10px 0;
}

.background_grey {
    background-color: #e3e5e8;
}

#more {
    display: none;
}

img {
    height: auto;
}


/*Added by Carla on 2023/04/12*/
/* Zoomable image CSS */
img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}

/* Zoomable image overlay CSS */
.zoomable-image-overlay {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    display: none;
}

/* Zoomable image overlay content CSS */
.zoomable-image-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    text-align: center;
}

/* Zoomable image close button CSS */
.zoomable-image-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
}

/*PAGES & CONTENT*/
.toolbarView .headerBar {
    border: none !important;
}

/*PAGES & CONTENT*/

.span-text {
    font-size: 16px;
    margin: 0 !important;
    padding: 0;
    display: block !important;
}

.span-text-heading {
    font-size: 16px;
    margin: 0 !important;
    padding: 0;
    display: block !important;
}

.span-text-btn {
    font-size: 16px;
    margin: 0 !important;
    padding: 0;
}

.zoom-container {
    width: 100%;
    margin: 100px auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.zoom-box {
    width: 900px;
    height: auto;
    margin: 0px 10px;
    transition: 1s;
}

.zoom-box:hover {
    transform: scale(1.3);
    z-index: 2;
}

.h5peditor .ui-dialog .h5p-joubelui-button,
.h5peditor .h5p-joubelui-button,
.h5p-joubelui-button {
    background: #e63635;
}

.h5p-course-presentation .h5p-progressbar .h5p-progressbar-part-show {
    background-image: linear-gradient(180deg, #e63635, #e63635);
}

/*======================== ARU COURSE OVERVIEW START ===========================*/

.container_overview {
    position: relative;
    border-radius: 2px;
    margin: 2px;
    margin-bottom: 15px;
    min-width: 200px;
    max-width: 200px;
}

.layout_overview_page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.image_overview {
    display: block;
    width: 100%;
    height: auto;
}

.overlay_overview {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.4s ease-in;
}

.container_overview:hover .overlay_overview {
    bottom: 0;
    height: 100%;
}

a.overlay_overview {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
}

.text_overview_page {
    font-size: 11pt;
    position: absolute;
    padding: 20px;
    line-height: 1.2;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.Module_header {
    background-color: #ebebeb;
    border-radius: 2px;
    padding: 10px;
    font-size: 14pt;
}

/*****End of Overview code********/

/*======================== COURSE OVERVIEW START ===========================*/
.course-overview-card {
    background-color: white;
    padding: 10px;
    box-shadow: 0 0 8px -2px #a3a3a3;
}

.course-overview-card h2 {
    font-size: 22px;
    padding: 0;
    margin: 0;
    border: none;
}

.course-overview-card p {
    padding: 0;
    font-size: 12px;
}

.course-overview-card span {
    font-size: 12px;
    background-color: #e3e5e8;
    border-radius: 3px;
    padding: 2px 4px;
    margin: 0 2px;
}

.course-overview-card a[class*="icon-"]:before,
a[class^="icon-"]:before {
    color: #0C0A26;
    margin: 0 5px;
    font-size: 0.9rem;
    padding: 0;
}

.course-overview-card hr {
    margin: 8px 0;
}

/*======================== MODULE OVERVIEW START ===========================*/
.week-title {
    background-color: #eeeeee;
    padding: 10px 15px;
    margin: 0;
    font-size: 18px;
}

.overview-items {
    border-bottom: 1px solid #eeeeee;
    margin: 0;
    font-weight: normal;
    padding: 10px 15px;
}

.learn-tag {
    font-size: 0.9rem;
    padding: 2px;
    margin: 10px 20px;
    min-width: 80px;
    display: inline-block;
    border-radius: 3px;
    background-color: #ddf6f2;
    border: 0.0625rem solid #7ce6d8;
    text-align: center;
    font-weight: normal;
}

.apply-tag {
    font-size: 0.9rem;
    padding: 2px;
    margin: 10px 20px;
    min-width: 80px;
    display: inline-block;
    border-radius: 3px;
    background-color: #d1e3f8;
    border: 0.0625rem solid #55acee;
    text-align: center;
    font-weight: normal;
}

.discuss-tag {
    font-size: 0.9rem;
    padding: 2px;
    margin: 10px 20px;
    min-width: 80px;
    display: inline-block;
    border-radius: 3px;
    background-color: #c3b5c5;
    border: 0.0625rem solid #5c305e;
    text-align: center;
    font-weight: normal;
}

/*======================== START GLOBAL NAVIGATION ===========================*/
.ic-app-header__logomark {
    margin: 15px;
}

.list-view a.active {
    padding-left: 15px;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    height: 38px;
}

a.pages.active:after {
    color: transparent;
}

/*======================== END GLOBAL NAVIGATION ===========================*/

.h5p iframe {
    margin: 0 auto;
}

/*======================== START LETTER ===========================*/
.letter {
    background: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 30%);
    margin: 15px auto 0;
    max-width: 900px;
    min-height: 300px;
    padding: 15px;
    position: relative;
    width: 96%;
}

.letter:before,
.letter:after {
    content: "";
    height: 98%;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.letter:before {
    background: #fafafa;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    left: -5px;
    top: 4px;
    transform: rotate(-2.5deg);
}

.letter:after {
    background: #f6f6f6;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    right: -3px;
    top: 1px;
    transform: rotate(1.4deg);
}

/*======================== START PAPER ===========================*/
.paper {
    margin: 15px auto;
    background-color: #f4f4f4;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
}

.paper h3 {
    padding: 0;
}

.paper::after {
    content: "";
    display: block;
    border-style: solid;
    border-color: #d7d7d7 transparent;
    position: absolute;
    top: 0;
    right: 0;
}

.paper::after {
    content: "";
    display: block;
    border-width: 0px 40px 40px 0px;
    border-style: solid;
    border-color: #d7d7d7 #fff;
    position: absolute;
    top: 0;
    right: 0;
}

.banner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 272px !important;
    background-color: #f0f0f0;
    margin-bottom: 40px;
}

.banner-text-block p {
    padding: 0;
    margin: 0;
    color: #666;
}

.banner-text-block h4 {
    padding: 0;
    margin: 0;
}

.no-hover-zoom {
    min-height: 250px !important;
    cursor: default !important;
}

/*======================== START GLOBAL NAVIGATION ===========================*/
.ic-app-header__logomark {
    margin: 15px;
}

.list-view a.active {
    padding-left: 15px;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    height: 38px;
}

a.pages.active:after {
    color: transparent;
}

/*======================== END GLOBAL NAVIGATION ===========================*/

/*======================== START BODY ===========================*/
/*All Content*/
body {
    font-family: "Roboto", Arial, sans-serif;
    line-height: 1.8;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*Page Width*/
.pages.show .show-content {
    max-width: 900px;
    padding-bottom: 50px;
    margin: 0 auto;
}

/*Assignment Width*/
#assignment_show .description.teacher-version {
    max-width: 900px;
    padding-bottom: 50px;
    margin: 0 auto;
    border: none;
}

/*Discussion Width*/
.topic .entry-content {
    max-width: 900px;
    padding-bottom: 50px;
    margin: 0 auto;
    border: none;
}

.ic-Layout-contentMain {
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.quiz-header,
.assignment-title {
    position: relative;
}

.quiz-header h1 {
    margin-top: 0;
    font-weight: bold;
}

#assignment_show .title-content .title {
    font-size: 24px;
    font-weight: 400;
    color: #393d3e;
    top: 190px;
    display: block;
    position: absolute;
    background-color: rgb(255 255 255 / 90%);
    left: 10%;
    right: 10%;
    padding: 10px 20px;
    margin: 0 0 0 auto;
    box-shadow: 0px 0px 65px 30px rgb(0 0 0 / 15%);
    z-index: 999 !important;
}

.headerBar {
    border: none;
}

.message_wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.file_download_btn img {
    display: none !important;
    height: 0;
    opacity: 0;
    visibility: hidden;
}

.list-view a.active {
    border: none;
}

* {
    box-sizing: border-box;
}

.external span {
    color: #f41d51 !important;
}

/*======================== [ FR [White Label] ] START TABLE ===========================*/
table {
    vertical-align: top !important;
    width: 100%;
    border: #c6cdd1;
    margin: 10px 0;
}

.table,
tr:hover {
    background-color: #f8f9fa;
}

.table,
th,
tr,
td {
    vertical-align: top !important;
}

.user_content table:not([cellpadding]) td,
.mceContentBody table:not([cellpadding]) td {
    padding: 6px;
}

caption {
    caption-side: bottom;
}

/*======================== [LSE [London School of Economics]] PROGRESS BAR START ===========================*/
.progress-bar-container {
    padding: 0;
    text-align: center;
}

.progress-negative {
    margin: 0;
    background-color: #eeeeee;
}

.progress-color {
    background-color: #140F4E;
    color: #ffffff;
    font-size: 14px;
    border-radius: 7px;
}

/*======================== [ FR [White Label] ] CODE START ===========================*/
.pages.show .show-content code {
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    font-size: 16px;
    color: #140F4E;
    border-radius: 3px;
    border: none;
}

code {
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
    font-size: 16px !important;
    color: #140F4E !important;
}

pre {
    color: #797979;
    display: block;
    margin: 0;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 1.4;
}

.pages.show .show-content pre {
    color: #797979;
    display: block;
    padding: 20px !important;
    margin: 0;
    word-break: break-all;
    word-wrap: break-word;
    border: 1px solid #c6cdd1 !important;
    line-height: 1.4;
}

.discussions .show-content pre {
    color: #797979;
    display: block;
    padding: 20px !important;
    margin: 0;
    word-break: break-all;
    word-wrap: break-word;
    border: 1px solid #c6cdd1 !important;
    line-height: 1.4;
}

.box_heading {
    background-color: #f5f5f5;
    padding: 20px 15px 0px 15px;
    margin: 20px 0 0 0;
    font-size: 16px;
    color: #000140;
    border-radius: 3px 3px 0 0;
    border: 1px solid #c6cdd1;
    border-bottom: none;
}

.box_heading p4 {
    color: #0059ff;
}

.box_heading a[class*="icon-"]:before,
a[class^="icon-"]:before {
    font-size: 1.2rem;
    color: #000140;
    margin: 0 10px;
}

.box_content {
    background-color: #f5f5f5;
    padding: 10px 20px;
    margin: 0 0 20px 0;
    border-radius: 0 0 3px 3px;
    border: 1px solid #c6cdd1;
    border-top: none;
}

.box_content p {
    padding: 8px 0;
}

.box_content_full {
    background-color: #f5f5f559;
    padding: 20px !important;
    margin: 10px;
    border-radius: 3px;
    border: 1px solid #c6cdd1;
}

.box_content_full .Button {
    margin: 10px 0 20px;
    color: #140F4E;
}

/*a.external:hover */
.ui-icon-extlink,
a.external:focus .ui-icon-extlink,
a.external:active .ui-icon-extlink {
    text-decoration: none !important;
    display: none;
}

/*Close button on modal*/
button .ui-icon {
    display: block !important;
}

/*======================== [ FR [White Label] ] IMAGES START ===========================*/
.pages.show .show-content img:not(.equation_image) {
    vertical-align: middle !important;
    width: auto !important;
}

.pages.show .show-content img {
    display: inline;
    margin: 0 auto;
    width: 100% !important;
    height: auto;
}

img:not(.equation_image) {
    vertical-align: middle !important;
    width: auto !important;
}

/*======================== [ FR [White Label] ] LATEX START ===========================*/
img:not(.equation_image) {
    vertical-align: middle !important;
    width: auto !important;
}

.equation_image {
    display: inline !important;
}

/*======================== [ FR [White Label] ] START MODULE OVERVIEW ===========================*/
.module-overview-wrapper {
    padding: 5px;
    width: 100%;
    margin: 0 auto;
}

.module-overview {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    margin: 0 auto;
    max-width: 1200px;
    padding-bottom: 15px;
}

.module-overview-wrapper h3 {
    text-align: center;
    margin: 0 auto;
}

.module-tile {
    position: relative;
    max-width: 270px;
    min-width: 250px;
    height: 151px;
    padding: 0;
    margin: 5px;
}

.pages.show .show-content .image__img {
    display: block;
    width: 100%;
}

.image__overlay > * {
    transform: translateY(20px);
    transition: transform 0.25s;
}

.image__overlay:hover {
    opacity: 1;
}

.image__overlay:hover > * {
    opacity: 1;
    transform: translateY(0);
}

span.image__title {
    font-size: 20px;
    padding: 0 10px;
    display: block;
}

span.image__description {
    font-size: 16px;
    padding: 0 3px 10px 3px;
    display: block;
    color: white;
}

.red-hr {
    border-top: 2px solid #140F4E;
}

/*======================== [ FR [White Label] ] START TOPIC OVERVIEW ===========================*/
.topic-overview-list {
    display: block;
}

.topic-overview-list .overview-title {
    display: block;
    background: #eeeeee;
    padding: 2px 10px;
    font-size: 13px;
    letter-spacing: 0.0125rem;
    font-weight: 600;
    text-transform: uppercase;
}

.topic-overview-list .row-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.0625rem solid #eeeeee;
}

.topic-overview-list .block-yellow,
.topic-overview-list .block-red,
.topic-overview-list .block-clear,
.topic-overview-list .block-blue {
    flex-grow: 0;
    flex-shrink: 0;
    width: 4.0625rem;
    font-size: 0.8875rem;
    line-height: 1.25rem;
    height: 1.25rem;
    border-radius: 0.1875rem;
    background-color: #ddf6f2;
    border: 0.0625rem solid #7ce6d8;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    margin-right: 2rem;
}

.topic-overview-list .block-red {
    background-color: #c3b5c5;
    border-color: #5c305e;
}

.topic-overview-list .block-blue {
    background-color: #d1e3f8;
    border-color: #55acee;
}

.topic-overview-list .block-clear {
    background-color: transparent;
    border-color: transparent;
}

.topic-overview-list .row-copy {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    margin: 0;
    padding: 10px 20px;
}

/*======================== [ FR [White Label] ]  MEDIA - VIDEO BOX ===========================*/
.pad-box {
    margin: 20px auto;
}

.pad-box-mega {
    padding: 20px;
    max-width: 950px;
    margin: 10px auto 20px;
}

.pad-box-mega h4 {
    margin-top: 0px;
}

.pad-box-mega iframe {
    width: 100% !important;
    min-width: 100% !important;
    height: 463px;
}

.more-card {
    border: 1px solid black;
    box-shadow: 2px 2px 5px 0.5px black;
    padding: 20px;
    transform: translateY();
    transition: 1s ease-in;
}

.long-text {
    display: none;
}

.show-more-button:hover {
    cursor: pointer;
}

video {
    width: 100% !important;
    height: auto !important;
}

.video-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

iframe {
    width: 100%;
}

.video_responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.btn .transcript-button a {
    text-decoration: none;
}

/*======================== [ FR [White Label] ] BLOCK QUOTE START  ===========================*/

blockquote {
    padding: 0 0 0 16px;
    border: 1px solid #e1e1e1;
    border-left-width: 5px !important;
    border-bottom: none;
    border-right: none;
    border-top: none;
}

.blockquote {
    max-width: 700px;
    margin: 20px auto;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
}

.blockquote--bordered {
    border-left-width: 10px;
}

.blockquote_text {
    font-style: italic;
    margin: 0;
}

.blockquote_text--credit {
    font-weight: bold;
    font-style: normal;
    text-align: right;
    padding: 0 20px;
    font-size: 0.9rem;
}

.blockquote_text--credit::before {
    content: "\2014\0020";
}

.blockquote_text:not(:last-child) {
    margin-bottom: 1em;
}

.blockquote--quoted::before {
    content: "\201C";
    font-size: 100px;
    color: #16D1EA;
    display: block;
    margin-bottom: -85px;
    margin-top: -50px;
    font-family: emoji;
}

.blockquote--quoted::after {
    content: "\201D";
    font-size: 100px;
    color: #16D1EA;
    display: block;
    margin-bottom: -85px;
    margin-top: -40px;
    margin-left: 590px;
    font-family: emoji;
}

/*======================== [ FR [White Label] ] ACCORDION START  ===========================*/
/* Style the buttons that are used to open and close the accordion panel */
.accordion,
.accordions {
    background-color: #E3E5E8;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    border: 1px solid #C7CDD1;
    border-radius: 3px;
    outline: none;
    transition: 0.4s;
    margin-top: 10px;
    box-sizing: border-box;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    background-color: #f8f9fa;
    overflow: hidden;
    border-radius: 0 0 3px 3px;
    transition: max-height 0.2s ease-out;
    margin-bottom: 3px;
    border: 1px solid #C6CDD1;
    border-top: none;
    /* unhide the accordions for now*/
    visibility: visible;
    height: unset;
    padding: 6px 14px;
}
/* Removed "+" for now
.accordion:after,
.accordions:after {
    content: '\002B';
    /* Unicode character for "plus" sign (+)
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}
*/

/* Removed for now
.active:after {
    content: "\2212";
    /* Unicode character for "minus" sign (-)
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}*/

/* Removed for now
.ic-app-course-menu .active,
.active:hover {
    border-color: #d4d7de !important;
    background: #F5F5F5 !important;
    border-radius: 3px !important;
    color: #393D3E !important;
    text-decoration: none !important;
}
*/

/*======================== [ FR [White Label] ] TABS START  ===========================*/
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    background-color: #e3e5e8;
}

.ui-tabs .ui-tabs-nav li a {
    padding: 10px 20px;
    color: #393d3e;
    font-size: 16px;
}

.ui-tabs-anchor {
    color: black;
}

.ui-tabs-anchor:active {
    background-color: #f6f6f6;
    padding: 10px 20px;
}

.ui-tabs-panel:active {
    background-color: #f6f6f6;
    padding: 10px 20px;
}

.user_content a:not(.btn):not(.Button):not(.ui-button):not([role="button"]),
.mceContentBody a:not(.btn):not(.Button):not(.ui-button):not([role="button"]) {
    text-decoration: none;
}

/*======================== START OBJECTIVES ===========================*/
.hover_sec {
    margin: 6px;
    padding: 1px 10px;
    border-radius: 3px;
    background-color: #e3e5e8;
}

/*======================== END OBJECTIVES ===========================*/

/*======================== PROGRESS BAR START ===========================*/

/*======================== PROGRESS BAR END ===========================*/

/*_________ IMAGES START _____________________________________________________________________________________________*/
/*--------------------------------------------------------------------------------------------------------------------*/

/*_________ OVERVIEW START _____________________________________________________________________________________________*/
/*--------------------------------------------------------------------------------------------------------------------*/

/*_________ SPECIAL HEADING START _____________________________________________________________________________________________*/
/*--------------------------------------------------------------------------------------------------------------------*/

.background_grey {
    background-color: #e3e5e8;
}

.center-content {
    margin: 0 auto;
    align-content: center;
}

.output {
    background-color: #393d3e;
    color: #eeeeee;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    padding: 6px 20px;
}

.output-panel {
    padding: 10px 20px;
    display: none;
    overflow: hidden;
    border-radius: 0 0 3px 3px;
    transition: max-height 0.2s ease-out;
    border: 2px solid #393d3e;
    margin: 0 20px;
}

/*--
/*------# BEGINNING OF FLIP CARD ---------------------------------------------------------------------------------------------------------------------------*/

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #bbb;
    color: #393d3e;
}

/* Style the back side */
.flip-card-back {
    background-color: #eee;
    color: white;
    transform: rotateY(180deg);
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: #f5f5f5;
    width: 300px;
    height: 300px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
}

/*---------------------enlarge image code---------------------------*/

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {
    opacity: 0.7;
}

/* The Modal (background) */
body:not(.body--login-confirmation) .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content,
#caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0);
    }

    to {
        -webkit-transform: scale(1);
    }
}

@keyframes zoom {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

/*------------New popup-------------*/

.button_pop {
    font-size: 1em;
    padding: 10px;
    color: #fff;
    border: 2px solid #06d85f;
    border-radius: 20px/50px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.button_pop:hover {
    background: #06d85f;
}

.overlay_pop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

.overlay_pop:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    margin: 70px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 80%;
    height: 80%;
    position: relative;
    transition: all 5s ease-in-out;
}

.popup h2 {
    margin-top: 0;
    color: #333;
    font-family: Tahoma, Arial, sans-serif;
}

.popup .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

.popup .close:hover {
    color: #06d85f;
}

.popup .content_pop {
    max-height: 100%;
    overflow: auto;
}

/*############### MODULE CARDS*/
.user_content
a:not(.btn):not(.Button):not(.ui-button):not(.ui-button.ui-state-hover):not(
    .ui-button.ui-state-focus
  ):not(.ui-button.ui-state-disabled):not([role="button"]),
.mceContentBody
a:not(.btn):not(.Button):not(.ui-button):not(.ui-button.ui-state-hover):not(
    .ui-button.ui-state-focus
  ):not(.ui-button.ui-state-disabled):not([role="button"]) {
    text-decoration: none;
}

.module-cards-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(200px, 1fr)) [auto-fit];
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    -ms-grid-rows: (minmax(200px, 1fr)) [auto-fit];
    grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.module-cards-container * {
    text-decoration: none;
    color: var(--ic-brand-font-color-dark);
}

.module-cards-container .module-card-container--outer {
    background: #ededed;
    -webkit-transition: background-color 200ms ease;
    transition: background-color 200ms ease;
    -webkit-box-shadow: 0 0 8px -2px #dddddd;
    box-shadow: 0 0 8px -2px #dddddd;
    border: 1px #dedede solid;
    border-radius: 5px;
    padding: 15px;
}

.module-cards-container .module-card-container--outer:hover {
    background: #000140;
    color: #FFFFFF !important;
}

.module-cards-container .module-card-container--outer:hover * {
    /*color: var(--ic-brand-button--primary-text);*/
    color: #FFFFFF !important;
}

.module-cards-container
.module-card-container--outer
.module-card-inner--top
> span,
.module-cards-container .module-card-container--outer .module-card-inner--top,
.module-cards-container
.module-card-container--outer
.module-card-inner--bottom
> span,
.module-cards-container
.module-card-container--outer
.module-card-inner--bottom {
    display: block;
}

.module-cards-container
.module-card-container--outer
.module-card-inner--bottom {
    margin-top: 20px;
    padding-top: 10px;
    border: 1px none #c5c5c5;
    border-top-style: solid;
}

.module-cards-container .module-card-container--outer .module-card-heading {
    font-size: 16px;
    line-height: 1.5;
    font-weight: bold;
}

.module-cards-container .module-card-container--outer .module-card-text {
    font-size: 1rem;
    margin: 5px 0;
}

.pill-container {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: wrap row;
    flex-flow: wrap row;
}

.pill-container .pill {
    background: #c5c5c5;
    border: none;
    margin: 3px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.ui-dialog
.ui-widget
.ui-widget-content
.ui-corner-all
.ui-draggable
.ui-resizable {
    top: 150px !important;
    left: 440px !important;
    width: 65%;
    margin-top: 10% !important;
}

/*############### HOVER ZOOMS*/
.image-hover-zoom {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    background-size: 200%;
    background-position-x: 0%;
    background-position-y: 0%;
    background-image: none !important;
}

.pages.show .show-content .image-hover-zoom img.hover-image {
    max-width: 100% !important;
    height: auto !important;
    opacity: 1;
    -webkit-transition: opacity 350ms ease !important;
    transition: opacity 350ms ease;
}

.pages.show .show-content .image-hover-zoom:hover img.hover-image {
    opacity: 1;
}

/*======================== FOOTER PAGE NAVIGATION ===========================*/
.ui-tooltip {
    display: none !important;
}

.module-sequence-footer .hidden {
    display: block !important;
}

.module-sequence-footer-content {
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.module-sequence-footer-content a {
    font-size: 0;
}

.module-sequence-footer-content a.Button {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: auto;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    text-align: left;
    border: none;
}

.module-sequence-footer-content a:hover {
    box-shadow: rgba(0, 0, 0, 0.25);
}

.module-sequence-footer-content a .hidden {
    font-size: 14px;
    border: 0 !important;
}

.module-sequence-footer,
.module-sequence-footer .module-sequence-footer-content {
    height: auto !important;
    padding-top: 20px;
}

/*NAVIGATION BUTTONS TEXT*/
#msf0-previous-desc,
#msf0-next-desc {
    font-size: 13px;
    height: 70px;
    padding: 10px;
    display: block;
    visibility: visible;
    margin-top: 0;
    border: 1px solid #c7cdd1 !important;
}

#msf0-previous-desc {
    border-radius: 0 5px 5px 0;
}

#msf0-next-desc {
    border-radius: 5px 0 0 5px;
}

/*NAVIGATION ICONS*/
.module-sequence-footer-button--previous .icon-mini-arrow-left {
    height: 70px;
    width: auto;
    border: 1px solid #c7cdd1;
    padding: 10px;
    border-radius: 5px 0 0 5px;
    position: absolute;
    left: 0px;
    top: 0px;
}

.module-sequence-footer-button--next .icon-mini-arrow-right {
    height: 70px;
    width: auto;
    border: 1px solid #c7cdd1;
    padding: 10px;
    border-radius: 0 5px 5px 0;
    position: absolute;
    right: 0px;
    top: 0px;
}

/*NAVIGATION BUTTONS*/
.module-sequence-footer-button--previous {
    width: 30%;
}

.module-sequence-footer-button--previous > a {
    padding: 0px 0px 0px 38px;
    display: block;
    line-height: normal;
}

.module-sequence-footer-button--next {
    width: 30%;
}

.module-sequence-footer-button--next > a {
    padding: 0px 38px 0px 0px;
    display: block;
    line-height: normal;
}

/*NEXT BUTTON SWOP*/
.module-sequence-footer-button--next a i {
    position: absolute;
}

.module-sequence-footer-button--next span {
    text-align: right;
}

.module-sequence-footer-button--previous > a:hover,
.module-sequence-footer-button--next > a:hover {
    background: transparent;
}

.module-sequence-footer-button--previous > a:hover i,
.module-sequence-footer-button--next > a:hover i {
    background-color: rgba(0, 0, 0, 0.2);
}

.btn:focus,
.Button:focus,
.ui-button:focus {
    box-shadow: none !important;
}

/* merge css */

input[type="textfield"].false {
    border: 1px solid #d2413d;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
    cursor: not-allowed;
    background-color: #eee;
}

.oes-fibtf-checked {
    color: #000000;
    background: #ececec;
    border: 1px solid lightgray;
}

.oes-fibtf-incorrect {
    padding: 0.2em 0.4em;
    border-radius: 3px;
    margin-left: 0.2em;
    color: #ffffff;
    background: #d2413d;
    font-weight: bold;
}

.oes-quiz-fillinblank div.oes-feedback-correct,
.oes-quiz-fillinblank div.oes-feedback-incorrect,
.oes-quiz-fillinblank div.oes-feedback {
    clear: both;
    display: none;
    opacity: 0;
    float: none;
    margin-bottom: 0.5em;
}

.oes-bg-feedback,
div.oes-feedback {
    border: 1px solid #d4d7de;
}

div.oes-feedback-correct,
div.oes-feedback-incorrect,
div.oes-feedback {
    background: #f1f2f4;
    border-radius: 3px;
    display: block;
    padding: 1em;
    margin: 1em;
}

.oes-feedback-correct,
.oes-feedback-incorrect,
.oes-feedback {
    display: none;
    opacity: 0;
}

.oes-quiz-button {
    margin: 0 0.5em;
    padding: 0.5em 1.5em;
    border-radius: 3px;
    background: #f1f2f4;
    border: 1px solid #d4d7de;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}

textarea.oes-textarea,
.oes-canvas-quiz textarea {
    padding: 0;
    width: 100%;
    min-height: 40px;
    height: 100%;
}

.oes-feedback-context {
    color: #f1f2f4;
    font-style: italic;
}

.oes-quiz-multichoice {
    position: relative;
}

.oes-selector-group {
    list-style-type: none;
    padding-left: 15px;
    margin-left: 15px;
}

.oes-canvas-quiz label {
    font-weight: normal;
}

.oes-canvas-quiz input[type="radio"],
.oes-canvas-quiz input[type="checkbox"] {
    margin: 0 0 0 -17px;
}

.oes-mc-checked {
    margin-left: 10em;
    border-left: 1px solid #ececec;
    padding-left: 1em;
}

.oes-mc-checked .oes-selector-group {
    color: #000000;
}

.oes-canvas-quiz input[type="radio"],
.oes-canvas-quiz input[type="checkbox"] {
    margin: 0 0 0 -17px;
}

.oes-bg-feedback,
div.oes-feedback {
    border: 1px solid #d4d7de;
}

.oes-mc-correct:before,
.oes-mc-incorrect:before,
.oes-mc-missed:before {
    margin-left: -11em;
    margin-bottom: 0.2em;
    margin-top: 0.2em;
    width: 9em;
    line-height: 1.1em;
    float: left;
    font-size: 0.9em;
    padding: 0.2em 0.5em;
    border-radius: 3px;
}

.oes-mc-missed:before {
    color: #000000;
    background: #ececec;
    content: "Correct answer";
}

.oes-mc-incorrect:before {
    color: #ffffff;
    background: #d2413d;
    content: "You answered";
}

span.oes-feedback,
span.oes-feedback-correct,
span.oes-feedback-incorrect {
    margin-left: 0.2em;
    padding: 0.2em 0.5em 0.2em 0.5em;
    border-radius: 3px;
    white-space: nowrap;
}

span.oes-feedback-correct {
    color: #ffffff;
    background: #00ac18;
}

.oes-mc-correct:before {
    color: #ffffff;
    background: #00ac18;
    content: "Correct!";
}

span.oes-feedback-incorrect {
    color: #ffffff;
    background: #d2413d;
}

.oes-mc-missed:before {
    color: #000000;
    background: #ececec;
    content: "Correct answer";
}

.oes-quiz-textresponse div.oes-feedback {
    display: block;
    width: auto;
    margin: 0 0 1em 0;
    float: none;
}

.oes-quiz-fillinblank div.oes-feedback {
    margin-left: 0px;
}

.open {
    opacity: 1;
    border: 1px solid #aaa;
    margin-bottom: 10px;
    margin-top: -10px;
    padding: 15px;
}

a.oes-ulo-link {
    cursor: pointer;
}

.ui-dialog .dialog-ULO > ol {
    display: block;
    color: #7f7f80;
}

.ui-dialog .dialog-ULO.LO1 ol > li:nth-of-type(1),
.oes-ulo-list.LO1 ol > li:nth-of-type(1) {
    color: black;
    font-weight: bold;
}

.ui-dialog .dialog-ULO.LO2 ol > li:nth-of-type(2),
.oes-ulo-list.LO2 ol > li:nth-of-type(2) {
    color: black;
    font-weight: bold;
}

.ui-dialog .dialog-ULO.LO3 ol > li:nth-of-type(3),
.oes-ulo-list.LO3 ol > li:nth-of-type(3) {
    color: black;
    font-weight: bold;
}

.ui-dialog .dialog-ULO.LO4 ol > li:nth-of-type(4),
.oes-ulo-list.LO4 ol > li:nth-of-type(4) {
    color: black;
    font-weight: bold;
}

.ui-dialog .dialog-ULO.LO5 ol > li:nth-of-type(5),
.oes-ulo-list.LO5 ol > li:nth-of-type(5) {
    color: black;
    font-weight: bold;
}

.ui-dialog .dialog-ULO.LO6 ol > li:nth-of-type(6),
.oes-ulo-list.LO6 ol > li:nth-of-type(6) {
    color: black;
    font-weight: bold;
}

.ui-dialog .dialog-ULO.LO7 ol > li:nth-of-type(7),
.oes-ulo-list.LO7 ol > li:nth-of-type(7) {
    color: black;
    font-weight: bold;
}

.ui-dialog .dialog-ULO.LO8 ol > li:nth-of-type(8),
.oes-ulo-list.LO8 ol > li:nth-of-type(8) {
    color: black;
    font-weight: bold;
}

.ui-dialog .dialog-ULO.LO9 ol > li:nth-of-type(9),
.oes-ulo-list.LO9 ol > li:nth-of-type(9) {
    color: black;
    font-weight: bold;
}

.ui-dialog.ui-widget-content {
    width: 800px !important;
    left: 0px !important;
    right: 0px !important;
    top: 20px !important;
    margin: auto !important;
    margin-top: 10% !important;
}

@media only screen and (max-width: 600px) {
    .ui-dialog.ui-widget-content {
        width: auto !important;
        left: 15px !important;
        right: 15px !important;
    }

    .ui-dialog .ui-dialog-content {
        width: auto !important;
    }
}

.ui-dialog .ui-dialog-content {
    font-size: 10px;
}

.ui-dialog .ui-dialog-title {
    font-weight: bold !important;
}

.delete_question_link img,
.edit_teaser_link img {
    min-height: auto;
    width: 16px;
    height: 16px;
}

.question img,
.answer img {
    max-width: 100% !important;
    height: auto;
    width: auto;
    min-height: auto;
}

ul.order-list li.active-order,
ol.order-list li.active-order {
    color: black;
    font-weight: bold;
}

.enhanceable_content {
    display: none;
}

.enhanceable_content iframe:active {
    visibility: visible;
}

.equation_image img {
    max-width: none !important;
    min-height: auto !important;
    width: auto !important;
    min-width: auto !important;
    height: auto !important;
}

.equation_image span.image-hover-zoom {
    display: inline !important;
    background-image: none !important;
}

.equation_image .image-hover-zoom:hover img.hover-image {
    opacity: 1;
}

.instructure_file_holder a.file_download_btn {
    display: none;
}

@media only screen and (max-width: 600px) {
    .ui-dialog.ui-widget-content {
        width: auto !important;
        left: 15px !important;
        right: 15px !important;
    }

    .ui-dialog .ui-dialog-content {
        width: auto !important;
    }
}

/* merge css */

.user_content a:not(.btn):not(.Button):not(.ui-button):not([role="button"]),
.mceContentBody a:not(.btn):not(.Button):not(.ui-button):not([role="button"]) {
    color: #723ee8 !important;
    text-decoration: underline;
}

/*======================== Student Support page ===========================*/

.SS-icon a[class*="icon-"]:before,
a[class^="icon-"]:before {
    font-size: 1.5rem;
    color: #8431a6;
    margin: 0 10px;
}

/*Buttons*/
a.hover-fade {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    overflow: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
}

a.hover-fade:hover,
a.hover-fade:focus,
a.hover-fade:active {
    background-color: #c6c6c6;
    color: white;
}

a.hover-fade * {
    text-decoration: none !important;
}

/*Menu items*/
.ui-menu-item .icon-trash .delete_page .ui-corner-all {
    font-size: 16px;
}

.oes-carousel {
    visibility: hidden;
    margin: 2em 0;
    border: none;
    overflow: hidden;
    position: relative;
}

.oes-carousel > div {
    height: 100%;
    overflow: hidden;
    border: none;
    border: 1px solid #d4d7de !important;
    padding: 0 6% 40px !important;
    min-height: 160px;
}

.oes-carousel .oes-carousel-section-content figure {
    margin-bottom: 2em !important;
}

.oes-carousel.fixed-height > div {
    min-height: 500px;
}

.oes-carousel ul.oes-carousel-bottom-nav {
    display: flex;
    border: none !important;
    border-color: transparent !important;
    flex-direction: row;
    justify-content: center !important;
    border-width: 0 !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 0px;
}

.oes-carousel.no-nav ul.oes-carousel-bottom-nav {
    visibility: hidden;
}

.oes-carousel ul.oes-carousel-bottom-nav li {
    border: none !important;
    background: transparent !important;
    list-style-type: none;
}

.oes-carousel ul.oes-carousel-bottom-nav li a {
    text-decoration: none !important;
    color: #000000 !important;
    padding: 0.5em !important;
    transform: scale(1);
}

.oes-carousel ul.oes-carousel-bottom-nav li a:hover {
    transform: scale(1.3);
    margin-top: -1px;
}

.oes-carousel ul.oes-carousel-bottom-nav li a:before {
    content: "\25CF";
    font-size: 2em;
}

.oes-carousel ul.oes-carousel-bottom-nav li.ui-tabs-active a:before {
    content: "\25CB" !important;
    font-size: 2em;
}

.oes-carousel ul.oes-carousel-bottom-nav li.ui-tabs-active a:hover {
    transform: scale(1);
    margin-top: 0;
}

.oes-carousel .oes-carousel-side-nav {
    width: 6%;
    height: 100%;
    position: absolute;
    top: 1px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000 !important;
    transition: background 0.5s ease;
    cursor: pointer;
}

.oes-carousel .oes-carousel-side-nav:hover {
    color: #000000 !important;
    background: rgba(0, 0, 0, 0.02);
}

.oes-carousel .oes-carousel-side-nav i {
    width: 2.5em;
    height: 2.5em;
    transition: margin 0.75s ease;
    animation-duration: 0.75s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.oes-carousel .oes-carousel-side-nav i:before {
    font-size: 2.5em !important;
}

.oes-carousel .oes-carousel-side-nav.left {
    left: 0px;
}

.oes-carousel .oes-carousel-side-nav.left i {
    left: 50%;
}

.oes-carousel .oes-carousel-side-nav.left:hover > i {
    animation-name: oes-carousel-side-nav-left-hover;
}

.oes-carousel .oes-carousel-side-nav.right {
    right: 0px;
}

.oes-carousel .oes-carousel-side-nav.right i {
    right: 50%;
}

.oes-carousel .oes-carousel-side-nav.right:hover > i {
    animation-name: oes-carousel-side-nav-right-hover;
}

@keyframes oes-carousel-side-nav-left-hover {
    from {
        margin-left: 0;
    }

    to {
        margin-left: -0.5em;
    }
}

@keyframes oes-carousel-side-nav-right-hover {
    from {
        margin-right: 0;
    }

    to {
        margin-right: -0.5em;
    }
}

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 1px;
    margin: 0 0.2em 1px 0;
    border-bottom: 0 !important;
    padding: 0;
    white-space: nowrap;
    box-shadow: none;
}

.oes-carousel-cnt {
    display: none;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    padding: 1em 1.4em;
    background-color: #fff;
    border-width: 0 1px 1px 1px;
    border-radius: 0;
}

.ui-tabs .ui-tabs-panel {
    border-color: #c7cdd1;
    padding: 14px;
}

.oes-carousel-cnt {
    display: none;
}

.disabledCls {
    opacity: 0.4;
    cursor: none !important;
}

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border-width: 0 0 1px 0;
    box-shadow: none;
}

img {
    cursor: default !important;
}

img:hover {
    cursor: default !important;
}

.no-hover-zoom {
    min-height: 250px !important;
    cursor: default !important;
}

img.no-hover-zoom:hover {
    transform: inherit !important;
}

#iframeVideo {
    width: 1088px !important;
    height: 600px !important;
}