/* Font: Alef */
@import url('https://fonts.googleapis.com/css2?family=Alef:wght@400;700&display=swap');

/* ######################
    COLORS:
    Blue: #31519a
    Light Blue: #87a6e6
    Gray: #616161
    Pink: #cd4279

###################### */

/* ######################
    Color Variables
###################### */
  :root {
    --main-blue: #23acff; /*main blue*/
    --title-blue: #344b87; /*light blue*/
    --main-grey: #a6a6a6;
    --light-grey: #F2F3F3;
    --menu-item-bg: #e8e8e8;
} 

/* ######################
  	   UNIT NAV MENU
     ###################### */

main#main div.sequence-nav button.sequence-nav-button.button-previous,
main#main div.sequence-nav button.sequence-nav-button.button-next,
div .sequence-nav, 
main#main div.sequence-nav button,
.sequence-nav-button-label {
	color: white;
}
 
.sequence-nav-button-label {
	color: white;
}

main#main div.sequence-nav button.sequence-nav-button.button-previous,
main#main div.sequence-nav button.sequence-nav-button.button-next {
  background-color: #ffffff;
  color: var(--main-blue);
  border-radius: 0;
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-color: #fff;
}

main#main .xmodule_display.xmodule_SequenceBlock div.sequence-nav button.sequence-nav-button.button-previous:hover,
main#main .xmodule_display.xmodule_SequenceBlock div.sequence-nav button.sequence-nav-button.button-next:hover {
  color: var(--main-blue);
  border-bottom-color: var(--main-blue);
}

main#main div.sequence-nav button.sequence-nav-button.button-previous.disabled,
main#main div.sequence-nav button.sequence-nav-button.button-next.disabled {
  opacity: 1;
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav button {
  background-color: var(--main-grey);
  border-bottom: 0px;
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav button.active {
  background-color: var(--main-blue);
  border-bottom: 0px;
}

/* new temp */
.sequence-nav button:hover {
  border-bottom: 3px solid white;
  padding-top: 2px;
}

/* icon hover*/
.xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover .icon, .xmodule_display.xmodule_SequenceBlock .sequence-nav button:active .icon {
  color: #25AEFF;
}

/* text hover */
.xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover span,
.xmodule_display.xmodule_SequenceBlock .sequence-nav button:active span {
color: #24adff;
}

/*bottom line hover*/
.xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover {
  border-bottom-color: #24adff;
  padding-top: 2px;
}

button.active span.icon {
  color: white;
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav button.active .icon {
  color: white;
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .icon {
  color: white;
  font-size: 150%;
}

span.icon.fa.fa-chevron-next, 
span.icon.fa.fa-chevron-prev {
  color: var(--main-blue);
  font-size: 180%;
}

.sequence-nav-button.button-previous.disabled span.icon.fa.fa-chevron-prev,
.sequence-nav-button.button-next.disabled span.icon.fa.fa-chevron-next {
  color: var(--light-grey);
}

/* next/prev icon hover color */
.xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover .icon 
{
color: #004670 !important;
}

.sequence-nav {
  /*background-image: url(unit_nav_bar_career.jpg);*/
  background-color: #A6A6A6;
}

/* ׳³ֲœ׳³ג€׳³ֲ¡׳³ֳ—׳³ג„¢׳³ֲ§ ׳³ג€œ׳³ג„¢׳³ג€¢׳³ֲŸ ׳³ג€˜׳³ֳ—׳³ג‚×׳³ֲ¨׳³ג„¢׳³ֻœ ׳³ֲ¨׳³ֲ׳³ֲ©׳³ג„¢ */
.wrapper-course-material .course-tabs .tab:nth-child(3) {
  display: none;
}

     /* ######################
               SIDE NAVIGATION PANEL
             ###################### */
     nav.course-navigation span.group-heading {
       background-color: #e5e5e5;
       color: black;
       margin-top: 3px;
       margin-bottom: 3px;
       font-family: "Alef";
     }
     
     .course-index .accordion .course-navigation .button-chapter .group-heading {
       font-family: "Alef";
       font-size: 131%;
     }
     
     .course-index
       .accordion
       .course-navigation
       .chapter-content-container
       .chapter-menu {
       padding: 0;
     }
     
     .course-index
       .accordion
       .course-navigation
       .chapter-content-container
       .chapter-menu
       .menu-item {
       background-color: #f3f3f3;
       margin: 0;
     }
     
     /* current select menu item - remove rounded corners */
     .course-index
       .accordion
       .course-navigation
       .chapter-content-container
       .chapter-menu
       .menu-item
       a {
       border-radius: 0;
     }
     
     .course-index .accordion .course-navigation .chapter-content-container .chapter-menu .menu-item a:hover {
       /* background-color: #25AEFF; */
       color: #25AEFF;
    }

     .course-index
       .accordion
       .course-navigation
       .chapter-content-container
       .chapter-menu
       .menu-item.active
       a {
       background-color: #003354;
     }
     
     /* current menu item text color */
     div.chapter-menu.is-open div.active p.accordion-display-name {
       color: white;
     }
     
     p.accordion-display-name {
       font-family: "Alef";
     }
     
     /* ######################
               TOP NAVIGATION MENU
             ###################### */
     body.view-in-course .wrapper-course-material .course-material .course-tabs {
       background-color: #003253;
       height: 145px;
       background-repeat: no-repeat;
       background-image: url(header_banner_terms_of_employment_01_09_24a.png);
       background-size: cover;
      }
      
      #content .wrapper-course-material .course-tabs li.tab a.active {
        color: #25AEFF;
       border-bottom-color: #25AEFF;
       border-bottom-width: 3px;
     }

     .wrapper-course-material .course-tabs li a:hover,
     .wrapper-course-material .course-tabs li a:visited:hover {
       color: #24adff;
       border-bottom-color: #24adff;
       border-bottom-width: 3px;
     }
     
     .wrapper-course-material .course-tabs li a,
     .wrapper-course-material .course-tabs li a:visited {
       font-family: "Alef";
       font-size: 110%;
       color:white;
       /*background-color: rgba(243, 243, 243, 0.8);*/
     }

     .course-wrapper .course-content ul li, .course-wrapper .courseware-results-wrapper ul li {
      font-family: "Alef";
      font-size: 19.2px;
     }
     
     
     .course-wrapper .course-content h3,
     .course-wrapper .course-content p {
       font-family: "Alef";
       font-size: 120%;
     }
     .course-wrapper .course-content div.pdf-replace h6.centered-title {
        font-family: "Alef";
        font-size: 30px;
        text-align: center;
    }
     .breadcrumbs {
       font-family: "Alef";
       font-size: 111%;
     }

  .course-wrapper .course-content .titleWhatwelearn-small,
  .xmodule_display.xmodule_HtmlBlock .titleWhatwelearn-small {
      background-image: url('Header.png');
      color: white;
      padding: 5px 20px 10px 40px;
      background-size: 120%;
      background-repeat: no-repeat;
      position: relative;
      left: 11px;
      width: fit-content;
      font-weight: bold;
   }

   .course-wrapper .course-content .titleWhatwelearn-larg {
      background-image: url('Headerlong.png');
      color: white;
      padding: 10px 20px 10px 40px;
      background-size: 170%;
      background-repeat: no-repeat;
      position: relative;
      left: 11px;
      width: 256px;
      font-weight: bold;
   }

   .xmodule_display.xmodule_HtmlBlock .titleWhatwelearn-large {
      width: fit-content; 
      padding: 10px 20px 10px 80px;
      background-image: url('Header.png');
      background-repeat: no-repeat;
      background-size: cover;
      color: white;
  }

   .xmodule_display.xmodule_HtmlBlock table td, .xmodule_display.xmodule_HtmlBlock table th {
      font-size: 19.7px;
   }

    @media (min-width: 768px) {
      .xmodule_display.xmodule_SequenceBlock .sequence-nav-button {
          min-width: 60px;
      }

      .xmodule_display.xmodule_SequenceBlock .sequence-nav-button .sequence-nav-button-label {
          display: none; /* hide 'back / next' in all screen sizes */
      }
  }

  .course-content .bookmark-button-wrapper {
    margin-bottom: 0px;
  }

     /* breadcrumbs/learning map under main header */
     /*
     header.page-header.has-secondary {
      display: none;
     }
     */
     /* ######################
                 MAIN CONTENT AREA
             ###################### */
     div#seq_content {
       /* background-color: #f3f3f3; */
       background-color: white;
       padding: 12px 12px 12px 0px;
     }
     
     h2.unit-title,
     .xblock--drag-and-drop h3.problem-title {
       color: #003354;
       font-family: "Alef";
       /*font-size: 160%;*/
     }

     .xmodule_display.xmodule_HtmlBlock h2 {
      font-family: "Alef";
      font-size: 25px;
      font-weight: bold;
      color: #25AEFF;
      background-color: #002258;
      width: fit-content;
      padding: 1px 5px 1px 5px;
    }

    .xmodule_display.xmodule_HtmlBlock a, div.problem a.in-text {
      font-family: "Alef";
      font-weight: bold;
      color: #126f9a;
      text-decoration: underline;
    }

    .xmodule_display.xmodule_HtmlBlock a:hover, div.problem a.in-text:hover {
      text-decoration: none;
    }

     .xblock--drag-and-drop h3.problem-title {
      color: #ea7d00;
      font-size: 24px;
     }
     
     button.submit,
     button.submit-answer-button {
       border-color: #24adfe;
       border-width: 2px;
       font-family: "Alef";
       color: white;
       background: #ffffff;
       border-radius: 5px;
       padding: 0.325rem 1.3rem;
     }

     b.blue-title {
      color: var(--title-blue);
      font-size: 120%;
      font-weight: bold;
     }
     
     b {
      font-family: "Alef";
      font-size: 19.2px;
     }

     /* #################################################
         MAIN CONTENT AREA - FOOTER NAV BUTTONS PREV/NEXT
      ################################################# */
     nav.sequence-bottom button.sequence-nav-button {
       color: #25AEFF;
       background-color: #014671;
     }

     .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover .icon,
     .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover {
      border-bottom-color: #24adff;
      padding-top: 2px;
      color: #24adff;
     }


     nav.sequence-bottom button.sequence-nav-button:hover {
       border-bottom-color: #24adff;
       padding-top: 2px;
     }

     .xmodule_display.xmodule_SequenceBlock .sequence-nav-button {
      background-color: #004670;
     }


     
     /* ######################
            PROBLEMS
          ###################### */
     
     div .problem {
       /*background-color: #393939;*/
       /*background-image: url("https://courses.campus.gov.il/asset-v1:campus+methodica_sandbox+1_2018+type@asset+block@q_mark_bg_02.png");*/
       background-repeat: no-repeat;
       background-position: left bottom;
       margin-top: 0px;
       margin-left: 0px;
       padding-right: 50px;
       padding: 50px 50px 50px 50px;
       border-radius: 15px;
       /*color: white;*/
     }
     
     /*
     div.problem div.field label {
       color: white;
       font-family: "Alef";
     }
       */
    div.problem p,
    div.problem li,
    .xmodule_display.xmodule_ProblemBlock div.problem .problem-group-label,
    div.problem legend,
    button.submit,
    button.submit-answer-button {
       font-family: "Alef";
       font-size: 120%;
     }
     
     .course-wrapper .course-content h3.problem-header {
       font-family: "Alef";
       color: #25AEFF;
       background-color: #002258;
       width: fit-content;
       padding: 5px 10px;
     }
     
     .course-wrapper .course-content h3 {
      font-size: 24px;
      font-weight: bold;
      color: var(--title-blue);
    }

     .wrapper-problem-response input {
       font-family: "Alef";
       font-size: 115%;
     }
     
     div.problem p.instruction-text {
       color: #003354;
       font-weight: bold;
     }
     div.wrapper-problem-response div.field label.field-label {
      font-family: "Alef";
     }
     
     button.submit .submit-label {
       font-size: 125%;
       color: white;
     }

    /* multiple choice question - options' text and background */
     .xmodule_display.xmodule_CapaModule div.problem .choicegroup label {
      color: white;
      background-color: #24adff;
      font-family: "Alef";
      font-size: 115%;
      border-radius: 0px;
    }

    /* radio button adjustments*/
    .xmodule_display.xmodule_CapaModule div.problem .choicegroup input[type="radio"] {
      right: 0.2em;
    }

    /* solution */
    solution {
      font-family: "Alef"; 
      font-size: 19.2px;
    } 

    .xmodule_display.xmodule_ProblemBlock div.problem solution li {
      margin-bottom: 6px;
    }

    /* DRAG drop Question*/
    div.option {
      background-color: #24adff;
    }

    .xblock--drag-and-drop .btn-brand {
      border-color: #24adfe;
       border-width: 2px;
       font-family: "Alef";
       color: white;
       background: #ffffff;
       border-radius: 5px;
       padding: 0.325rem 1.3rem;

       
    }

    .xblock--drag-and-drop .btn-brand {
      font-family: "Alef";
      font-size: 130%;
      color: #24adfe;
    }

    .xblock--drag-and-drop .btn-brand:hover {
      background-color: #065683;
    }

    .xblock--drag-and-drop .drag-container .option {
      background-color: #24adff;
    }

    .xblock--drag-and-drop .drag-container .option .item-content {
      font-family: Alef;
      line-height: 1.2;
    }

    .xblock--drag-and-drop .drag-container .option {
      font-size: 14px;
      padding: 5px 10px;
      /*width: 360px;*/
    }

    /*fix feedback label right offset bug - 2. actually hide it*/
    .xmodule_display.xmodule_CapaModule .hint-label {
      padding-right: 0;
      display:none;
    }

    /*hide feedback explanation title*/
    .xmodule_display.xmodule_CapaModule .explanation-title {
      display: none;
    }

    /*problem feedback font*/
    .xmodule_display.xmodule_CapaModule .hint-text {
      font-family: "Alef";
      font-size: 110%;;
    }

    .rtl .xblock--drag-and-drop .feedback p:after {
      margin-left: 0.5em;
      margin-right: 0.5em;
      float: right;
    }
     
     /* ######################
            PROBLEM custom JS
          ###################### */
     
     div.problem div.wrapper-problem-response p {
       font-family: "Alef";
       font-size: 120%;
     }
     
     /* ######################
            TABLES
          ###################### */
     
     .xmodule_display.xmodule_HtmlModule table {
       width: auto;
     }
     
     .xmodule_display.xmodule_HtmlModule table th {
       background-color: #db5c2f;
       color: white;
       font-size: 100%;
     }
     
     table.striped-table tr:nth-child(even) {
       background-color: #b4b2b2;
     }
     
     tbody {
       font-family: "Alef";
       font-size: 116%;
     }
     
     table audio {
       width: 210px;
     }

      /* ######################
           POLL/SURVEY component
      ###################### */

    .survey-table tr.survey-row th p {
      margin-right: 10px;
    }

    tbody tr.survey-row .survey-question p {
      font-size: 1.15rem;
    }

    tbody tr.survey-row .survey-question p {
      font-size: 1.15rem;
    }

    .themed-xblock.poll-block .survey-table thead tr th {
        font-size:1rem;
        font-family: Alef;
    }

/* KOA Fixes */
.wrapper-course-material .course-tabs .tab a,
.wrapper-course-material .course-tabs .tab a:visited {
	color:white;
}

.xblock.xmodule_display.xmodule_SequenceBlock .sequence-nav-button {
	color: white;
}

body .wrapper-course-material .course-material .course-tabs .tab a:hover {
  color: #24ADFF;
  border-bottom-color: #24ADFF;
}

.course-index .accordion .course-navigation .chapter-content-container .chapter-menu .menu-item.active a {
  background-color: #24ADFF;
}

.xmodule_display.xmodule_ProblemBlock div.problem button.btn-brand,
.xmodule_display.xmodule_HtmlBlock button.btn-brand {
    border: solid 3px var(--main-blue);
    border-radius: 20px;
    background-color: var(--main-blue);
    font-size: 19.2px;
    color: #fff;
}

/* QUESTION */
.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-buttons-wrapper {
  flex-direction: row-reverse;
}

.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-button-wrapper {
  border-right: 1px solid #d9d9d9;
  border-left: none;
}

.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn {
  padding: 7px;
  /*background-color: #002258;*/
}

div .problem {
  background-image: url('/static/QQQ.png');
  /* background-image: url(https://source.unsplash.com/random); */
  background: linear-gradient(270deg, rgba(116, 110, 199, 0.1) 0%, rgba(0, 212, 255, 0) 100%);
}

.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label {
  font-family: 'Alef'!important;
  border-radius: 15px;
  font-size: 120%;
}

.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input+label.choicegroup_correct .status-icon::after
{
    float: left;
    margin-top: -25px;
}

.xmodule_display.xmodule_HtmlBlock p {
  margin-left: 10px;
  font-family: 'Alef';
  font-size: 19.2px !important;
}

/* ######################
    ACCORDION
     #################### */
     .tableout {
      border: solid 0px black !important;
      width: 100%;
      height: 98px;
    }
    
    .tableout tr {
      border: solid 0px black !important;
      padding: 0px 20px;
    }
    
    .tableout tr td {
      border: solid 0px black !important;
      padding: 0px 20px;
    }
    
    .tablein {
      border-collapse: separate;
      border-spacing: 10px;
      text-align: center;
    }
    .xmodule_display.xmodule_HtmlBlock .tableout tr td ol li, 
    .xmodule_display.xmodule_HtmlBlock .tdin {
      background-color: #ededed;
      font-size: 18px;
      border-color: transparent;
      padding: 3%;
    }
    
    .accordion1 {
      background-color: white;
      color: #564833;
      font-weight: bold;
      cursor: pointer;
      padding: 18px;
      width: 90%;
      border: none;
      text-align: right;
      outline: none;
      font-size: 19.2px;
      transition: 0.4s;
      margin-top: 10px;
      -webkit-box-shadow: 7px 7px 20px 1px rgba(0, 0, 0, 0.3);
      box-shadow: 7px 7px 20px 1px rgba(0, 0, 0, 0.3);
    }
    
    .accordion1.active,
    .accordion1:hover {
      background-color: var(--title-blue);
      color: white;
    }
    
    div.panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      width: 90%;
      transition: 0.6s ease-in-out;
      opacity: 0;
      font-size: 1.2rem;
    }

    div.panel .s33 {
      float: right;
      width: 31%;
      font-size: 19.2px;
      padding: 1%;
    }

    div.panel .s33 .acc-title {
      height: 50px;
      line-height: 50px;
      color: var(--title-blue);
      padding-right: 50px;
      background-position: right center;
      background-repeat: no-repeat;
      background-size: 40px auto;
      font-size: 25px;
    }

    div.panel .s33 .acc-title.t1 {
      background-image: url(Icon1_Line330.png);
    }

    div.panel .s33 .acc-title.t2 {
      background-image: url(Icon2_Line330.png);
    }

    div.panel .s33 .acc-title.t3 {
      background-image: url(Icon3_Line330.png);
    }
    
    div.panel.show {
      opacity: 1;
      max-height: 1500px;
      padding-top: 10px;
      width: 90%;
      background-color: #fff;
      line-height: 1.4;
    }
    
    .xmodule_display.xmodule_HtmlBlock .changeall {
      display: inline-block;
      padding: 5px 10px;
      font-weight: bold;
      cursor: pointer;
      text-align: center;
      transition: 0.4s;
      border: solid 3px var(--main-blue);
      border-radius: 20px;
      background-color: var(--main-blue);
      font-size: 19.2px;
      color: #fff;
    }
    
    .xmodule_display.xmodule_HtmlBlock .changeall:hover {
      background-color: var(--title-blue);
    }
    
    .accplus {
      float: left;
      font-size: 30pt;
      margin: -9px 0 0 0;
      padding: 0;
      position: relative;
      top: -3px;
      height: 10px;
    }

    
    .headnumSteps {
      font-size: 40pt;
      color: #ba80b7;
      vertical-align: middle;
      text-align: center;
    }

/* ######################
    img-list container
     #################### */

    .img-list-container {
      width: 90%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    
    .img-list-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 10px; /* Adjust as needed */
    }
    
    .img-list-circle {
      width: 60px;
      height: 60px;
      object-fit: cover; /* Ensures the image covers the whole area of the div */
      flex: 0 0 auto; /* This ensures that the image doesn't shrink or grow */
      margin-left: 10px;
    }
    
    .img-list-text {
      flex-grow: 1;
      margin-left: 20px; /* You might want to adjust this value */
      align-self: flex-start;
    }
    
    .course-name {
      display: none;
    }




    /***************************************/
    /*       EdX Quince Fixes 2025         */
    /***************************************/
    
    
    /*         TOP MENU & BANNER           */
    
    nav.nav.nav-underline-tabs {
        background-color: #f3f3f3;
        height: 145px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left center;
        background-image: url(https://courses.campus.gov.il/asset-v1:MolSA+GOV_Career_ToE_HE+2024_1+type@asset+block@header_banner_terms_of_employment_01_09_24a.png);
    }
    
    .course-tabs-navigation .nav a:hover {
        background-color: transparent;
    }
    
    .nav-underline-tabs .nav-link {
        font-family: 'Alef';
        color: #fff;
        height: 3em;
    }
    
    .nav-underline-tabs .nav-link:hover {
        color: #23acff;
        border-bottom-color: #23acff;
    }
    
    .course-tabs-navigation .nav-underline-tabs a.nav-link.active {
        color: #23acff;
        background-color: transparent;
        border-bottom-color: #23acff;
    }
    
    .course-tabs-navigation .nav-underline-tabs a.nav-link:not(.active):hover {
        background-color: transparent;
        border-bottom: solid 4px #23acff;;
    }
    
    /*        UNITS' MENU           */
    
    .sequence-navigation {
        background-color: #A6A6A6;
    }
    
    .sequence-navigation .sequence-navigation-tabs {
        overflow: hidden;
    }
    
    .sequence-navigation .btn {
        color: #fff;
        text-decoration: none;
    }
    
    .sequence-navigation .btn.active {
        color: #fff;
        background-color: #23acff;
    }
    
    .sequence-navigation .btn:hover {
        color: #004670;
        background-color: #fff;
    }
    
    .sequence-navigation .btn.active::after,
    .sequence-navigation .btn:hover::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #23acff;
        height: 4px;
    }
    
    .sequence-navigation .btn.next-btn,
    .sequence-navigation .btn.previous-btn {
        background: #fff;
        color: #23acff;
        border-radius: 0;
    }
    
    .sequence-navigation .btn.next-btn:disabled,
    .sequence-navigation .btn.previous-btn:disabled {
        background: #fff;
        color: rgb(35,172,255,0.5);
        opacity: 1;
    }
    
    .sequence-navigation .btn.next-btn .btn-icon-after,
    .sequence-navigation .btn.previous-btn .btn-icon-before {
        transform: scale(2);
    }
    
    
    /*           SIDE MENU             */
    
    [dir=rtl] .sequence-container section.ml-lg-4 {
        margin-right: 0 !important;
    }
    
    [dir=rtl] #course-outline-sidebar {
        padding: 17px 4px 20px 4px;
    }
    
    #courseHome-outline .mb-2 {
        margin-bottom: 0.25rem !important;
    }
    
    .collapsible-card .collapsible-icon, /* ??? */
    .collapsible-card-lg .collapsible-icon {
        margin-inline-start: 0.25rem;
    }
    
    #courseHome-outline .col-10 {
        max-width: 75%; /* 83.33333333%; */
        margin-right: 0.25rem!important;
    }
    
    #courseHome-outline .col-10 span:first-child {
        font-family: 'Alef';
        font-size: 18px;
        color: #313131;
        font-weight: 700;
    }
    
    #courseHome-outline .btn-icon.btn-icon-primary {
        color: #fff;
    }
    
    #courseHome-outline .is-open>.collapsible-trigger {
        background-color: #e5e5e5;
        color: #fff;
    }
    
    #courseHome-outline li .collapsible-trigger {
        padding: 4px 8px;
        background-color: #e5e5e5;
    }
    
    #courseHome-outline .btn-icon.btn-icon-primary {
        color: #1c8da4;
    }
    
    #courseHome-outline .btn-icon.btn-icon-primary:hover {
        color: #fff;
    }
    
    #courseHome-outline .collapsible-body ol li {
        padding: 4px 10px 4px 0;
    }
    
    .collapsible-body ol li a {
        font-size: 16px;
        color: #313131;
        font-weight: normal;
    }
    
    
    /*           UNIT AREA           */
    
    .course-wrapper .course-content .vert-mod .vert {
        height: fit-content;
    }
    
    nav[aria-label="breadcrumb"] {
        font-family: 'Alef';
    }
    
    .unit-container .unit h1.h3:first-child {
        font-family: 'Alef';
        font-size: 24px;
        color: #003354;
        font-weight: 600;
    }
    
    section#course-content {
        background-color: #f3f3f3;
    }
    
    
    /*         BOTTOM NAV BUTTONS        */
    
    .unit-navigation .next-button, 
    .unit-navigation .previous-button {
        box-sizing: border-box;
        border-radius: 4px;
        white-space: nowrap;
        flex-basis: 22%;
        background-color: #014167;
        color: #fff;
        border-bottom: 3px solid #014167;
    }
    
    .unit-navigation .next-button:hover, 
    .unit-navigation .previous-button:hover {
        background-color: white;
        color: #014167;
        border-bottom: 3px solid #014167;
    }