#collapseTools{
  background: #F7F9FE;
}

.contextual-sidebar{
  width:270px;
  list-style-type:none;
  border: solid 1px #EFF6FF;
}

.contextual-sidebar li{
  list-style:none !important;
}

.contextual-sidebar .list-group-item{
  border:0px;
  border-bottom: solid 1px #EFF6FF;
  font-weight: 400;
  color: #2B3944;
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 16px;
  background-color: transparent;
}

.contextual-sidebar li:last-child .list-group-item{
  border:0px;
}

.contextual-sidebar .list-group-item:hover{
  background-color: #EFF6FF;
  color:#0073E6;
  text-decoration: none;
  cursor:  url(../images/pointer.png), auto;
}

.contextual-sidebar .list-group-item.active{
  background-color: #e6f1ff;
  color: #004A94;
  z-index: 0;
}

.module-tool i,
.module-tool i::before{
  min-width: 16px !important;
  height: 16px !important;
}

/* --------------------------------------- Basic classes ------------------------------- */

.col_maincontent_active{
  transition: 0.4s;
  background-color: white;
  border-radius: 0px;
}

@media(min-width:992px){
  .col_maincontent_active{
    border: 0px;
    border-left: solid 1px #E8EDF8;
    border-radius: 0px;
    flex: 1;
    overflow-x: auto;
  }

  body:has(.footer-image) .col_maincontent_active{
    min-height: calc(100vh - 80px - 235px);
  }
  body:not(:has(.footer-image)) .col_maincontent_active{
    min-height: calc(100vh - 80px - 80px);
  }
  body:not(:has(.footer-image)) .fixed-announcement .col_maincontent_active{
    min-height: calc(100vh - 80px - 80px - 60px);
  }
  body:has(.footer-image) .fixed-announcement .col_maincontent_active{
    min-height: calc(100vh - 80px - 235px - 60px);
  }


  .fixed-announcement .col_maincontent_active{
    min-height: calc(100vh - 80px - 80px - 60px);
  }
  .container-fluid .course-wrapper .col_maincontent_active{
    padding: 24px 24px 24px 24px;
  }

  .container .course-wrapper .col_maincontent_active{
    padding: 24px 24px 24px 24px;
  }

  .col_maincontent_active.search-content {
      border-left: none;
  }

}
@media(max-width:991px){
  .container-fluid .course-wrapper .col_maincontent_active{
    padding: 8px 12px 8px 12px;
  }
  .container .course-wrapper .col_maincontent_active{
    padding: 8px 12px 8px 12px;
  }
}

.col_sidebar_active{
  transition: 0.4s;
  border-radius: 0px;
}

.ContentLeftNav{
  width:100%;
  background: #ffffff;
  border-radius: 0px;
  border: 0px;
  margin-left: auto;
  margin-right: auto;
}
@media(max-width:991px){
  .course-wrapper{
    padding-left: 10px;
    padding-right: 10px;
  }
}

.navbar_breadcrumb{
  margin-left:60px;
  margin-top:-35px;
  height:auto;
  width:95%;
}

.breadcrumb li{ white-space:nowrap; }

/* Style sidebar when toogle button is clicked */
@media(min-width:992px) and (max-width:1023px){

  .course-wrapper:has(.active-nav) .contextual-sidebar .list-group-item{
    justify-content: center !important;
  }

  #background-cheat-leftnav, .ContentLeftNav{
    width: 200px;
  }

  .course-wrapper:has(.active-nav) #background-cheat-leftnav,
  .course-wrapper:has(.active-nav) .ContentLeftNav{
    width: 50px;
    transition: all 0.5s ease-in-out;
    z-index: 0;
  }
  .course-wrapper:not(:has(.active-nav)) #background-cheat-leftnav,
  .course-wrapper:not(:has(.active-nav)) .ContentLeftNav{
    transition: all 0.5s ease-in-out;
  }

  .course-wrapper:has(.active-nav) #sidebar-accordion{
    min-width:192px;
    margin-left: auto;
    margin-right: auto;
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .menu-header{
    animation: cssAnimationMenuHeader 0s ease-in 0.01s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssAnimationMenuHeader {
    to {
        pointer-events: none;
    }
  }
  @-webkit-keyframes cssAnimationMenuHeader {
      to {
        pointer-events: none;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .menu-header .panel-title{
    animation: cssAnimationMenuHeaderTitle 0s ease-in 0.01s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes cssAnimationMenuHeaderTitle {
    to {
        opacity: 0;
    }
  }
  @-webkit-keyframes cssAnimationMenuHeaderTitle {
      to {
        opacity: 0;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .menu-items{
    animation: cssAnimationMenuItems 0s ease-in 0.45s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssAnimationMenuItems {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
  }
  @-webkit-keyframes cssAnimationMenuItems {
      to {
          width:0;
          height:0;
          visibility:hidden;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .module-tool{
    animation: cssModule 0s ease-in 0.45s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssModule {
    to {
        width:45px;
        height:32px;
        margin-left: 0px;
    }
  }
  @-webkit-keyframes cssModule {
      to {
          width:45px;
          height:32px;
          margin-left: 0px;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .module-tool i{
    animation: cssModule_i 0s ease-in 0.45s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssModule_i {
    to {
        margin-left: 19px;
    }
  }
  @-webkit-keyframes cssModule_i {
      to {
          margin-left: 19px;
      }
  }
  .course-wrapper:not(:has(.active-nav)) #sidebar-accordion{
    min-width:192px;
    margin: auto;
    display: block;
  }

  .col_sidebar_active.active-nav .menu-items,
  .col_sidebar_active.active-nav .menu-header{
    transition: visibility 0s, opacity 0.01s ease-in-out;
  }
  .col_sidebar_active.active-nav .switch-sidebar .on,
  .col_sidebar_active.active-nav .switch-sidebar .off{
    display: none;
  }

  .col_sidebar_active.active-nav .switch-sidebar .slider-round{
    width:40px;
  }

  .col_maincontent_active{
    transition: all 0.5s ease-in-out;
    z-index: 1;
  }

  .course-wrapper:has(.active-nav) .menu_btn_button img{
    transform: rotate(180deg);
    transition: transform 0.01s ease-in-out;
  }

  .course-wrapper:not(:has(.active-nav)) .menu_btn_button img{
    transform: rotate(0deg);
    transition: transform 0.01s ease-in-out;
  }
}

@media(min-width:1024px) and (max-width:1199px){

  .course-wrapper:has(.active-nav) .contextual-sidebar .list-group-item{
    justify-content: center !important;
  }

  #background-cheat-leftnav, .ContentLeftNav{
    width: 200px;
  }

  .course-wrapper:has(.active-nav) #background-cheat-leftnav,
  .course-wrapper:has(.active-nav) .ContentLeftNav{
    width: 50px;
    transition: all 0.5s ease-in-out;
    z-index: 0;
  }
  .course-wrapper:not(:has(.active-nav)) #background-cheat-leftnav,
  .course-wrapper:not(:has(.active-nav)) .ContentLeftNav{
    transition: all 0.5s ease-in-out;
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion{
    min-width:192px;
    margin-left: auto;
    margin-right: auto;
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .menu-header{
    animation: cssAnimationMenuHeader 0s ease-in 0.01s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssAnimationMenuHeader {
    to {
        pointer-events: none;
    }
  }
  @-webkit-keyframes cssAnimationMenuHeader {
      to {
        pointer-events: none;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .menu-header .panel-title{
    animation: cssAnimationMenuHeaderTitle 0s ease-in 0.01s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes cssAnimationMenuHeaderTitle {
    to {
        opacity: 0;
    }
  }
  @-webkit-keyframes cssAnimationMenuHeaderTitle {
      to {
        opacity: 0;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .menu-items{
    animation: cssAnimationMenuItems 0s ease-in 0.45s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssAnimationMenuItems {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
  }
  @-webkit-keyframes cssAnimationMenuItems {
      to {
          width:0;
          height:0;
          visibility:hidden;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .module-tool{
    animation: cssModule 0s ease-in 0.45s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssModule {
    to {
        width:45px;
        height:32px;
        margin-left: 0px;
    }
  }
  @-webkit-keyframes cssModule {
      to {
          width:45px;
          height:32px;
          margin-left: 0px;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .module-tool i{
    animation: cssModule_i 0s ease-in 0.45s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssModule_i {
    to {
        margin-left: 19px;
    }
  }
  @-webkit-keyframes cssModule_i {
      to {
          margin-left: 19px;
      }
  }
  .course-wrapper:not(:has(.active-nav)) #sidebar-accordion{
    min-width:192px;
    margin: auto;
    display: block;
  }

  .col_sidebar_active.active-nav .menu-items,
  .col_sidebar_active.active-nav .menu-header{
    transition: visibility 0s, opacity 0.01s ease-in-out;
  }
  .col_sidebar_active.active-nav .switch-sidebar .on,
  .col_sidebar_active.active-nav .switch-sidebar .off{
    display: none;
  }

  .col_sidebar_active.active-nav .switch-sidebar .slider-round{
    width:40px;
  }

  .col_maincontent_active{
    transition: all 0.5s ease-in-out;
    z-index: 1;
  }

  .course-wrapper:has(.active-nav) .menu_btn_button img{
    transform: rotate(180deg);
    transition: transform 0.01s ease-in-out;
  }

  .course-wrapper:not(:has(.active-nav)) .menu_btn_button img{
    transform: rotate(0deg);
    transition: transform 0.01s ease-in-out;
  }

}

/* laptop */
@media (min-width: 1200px) and (max-width:1399px){

  .course-wrapper:has(.active-nav) .contextual-sidebar .list-group-item{
    justify-content: center !important;
  }

  #background-cheat-leftnav, .ContentLeftNav{
    width: 206px;
  }

  .course-wrapper:has(.active-nav) #background-cheat-leftnav,
  .course-wrapper:has(.active-nav) .ContentLeftNav{
    width: 50px;
    transition: all 0.5s ease-in-out;
    z-index: 0;
  }
  .course-wrapper:not(:has(.active-nav)) #background-cheat-leftnav,
  .course-wrapper:not(:has(.active-nav)) .ContentLeftNav{
    transition: all 0.5s ease-in-out;
  }

  .course-wrapper:has(.active-nav) #sidebar-accordion{
    min-width:198px;
    margin-left: auto;
    margin-right: auto;
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .menu-header{
    animation: cssAnimationMenuHeader 0s ease-in 0.01s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssAnimationMenuHeader {
    to {
        pointer-events: none;
    }
  }
  @-webkit-keyframes cssAnimationMenuHeader {
      to {
        pointer-events: none;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .menu-header .panel-title{
    animation: cssAnimationMenuHeaderTitle 0s ease-in 0.01s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes cssAnimationMenuHeaderTitle {
    to {
        opacity: 0;
    }
  }
  @-webkit-keyframes cssAnimationMenuHeaderTitle {
      to {
        opacity: 0;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .menu-items{
    animation: cssAnimationMenuItems 0s ease-in 0.45s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssAnimationMenuItems {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
  }
  @-webkit-keyframes cssAnimationMenuItems {
      to {
          width:0;
          height:0;
          visibility:hidden;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .module-tool{
    animation: cssModule 0s ease-in 0.45s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssModule {
    to {
        width:45px;
        height:32px;
        margin-left: 0px;
    }
  }
  @-webkit-keyframes cssModule {
      to {
          width:45px;
          height:32px;
          margin-left: 0px;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .module-tool i{
    animation: cssModule_i 0s ease-in 0.45s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssModule_i {
    to {
        margin-left: 19px;
    }
  }
  @-webkit-keyframes cssModule_i {
      to {
          margin-left: 19px;
      }
  }
  .course-wrapper:not(:has(.active-nav)) #sidebar-accordion{
    min-width:198px;
    margin: auto;
    display: block;
  }

  .col_sidebar_active.active-nav .menu-items,
  .col_sidebar_active.active-nav .menu-header{
    transition: visibility 0s, opacity 0.01s ease-in-out;
  }
  .col_sidebar_active.active-nav .switch-sidebar .on,
  .col_sidebar_active.active-nav .switch-sidebar .off{
    display: none;
  }

  .col_sidebar_active.active-nav .switch-sidebar .slider-round{
    width:40px;
  }

  .col_maincontent_active{
    transition: all 0.5s ease-in-out;
    z-index: 1;
  }

  .course-wrapper:has(.active-nav) .menu_btn_button img{
    transform: rotate(180deg);
    transition: transform 0.01s ease-in-out;
  }

  .course-wrapper:not(:has(.active-nav)) .menu_btn_button img{
    transform: rotate(0deg);
    transition: transform 0.01s ease-in-out;
  }
}



/* large desktop */
@media (min-width: 1400px){

  .course-wrapper:has(.active-nav) .contextual-sidebar .list-group-item{
    justify-content: center !important;
  }

  #background-cheat-leftnav, .ContentLeftNav{
    width: 256px;
  }

  .course-wrapper:has(.active-nav) #background-cheat-leftnav,
  .course-wrapper:has(.active-nav) .ContentLeftNav{
    width: 50px;
    transition: all 0.5s ease-in-out;
    z-index: 0;
  }
  .course-wrapper:not(:has(.active-nav)) #background-cheat-leftnav,
  .course-wrapper:not(:has(.active-nav)) .ContentLeftNav{
    transition: all 0.5s ease-in-out;
  }

  .course-wrapper:has(.active-nav) #sidebar-accordion{
    min-width:248px;
    margin-left: auto;
    margin-right: auto;
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .menu-header{
    animation: cssAnimationMenuHeader 0s ease-in 0.01s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssAnimationMenuHeader {
    to {
        pointer-events: none;
    }
  }
  @-webkit-keyframes cssAnimationMenuHeader {
      to {
        pointer-events: none;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .menu-header .panel-title{
    animation: cssAnimationMenuHeaderTitle 0s ease-in 0.01s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes cssAnimationMenuHeaderTitle {
    to {
        opacity: 0;
    }
  }
  @-webkit-keyframes cssAnimationMenuHeaderTitle {
      to {
        opacity: 0;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .menu-items{
    animation: cssAnimationMenuItems 0s ease-in 0.45s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssAnimationMenuItems {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
  }
  @-webkit-keyframes cssAnimationMenuItems {
      to {
          width:0;
          height:0;
          visibility:hidden;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .module-tool{
    animation: cssModule 0s ease-in 0.45s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssModule {
    to {
        width:45px;
        height:32px;
        margin-left: 0px;
    }
  }
  @-webkit-keyframes cssModule {
      to {
          width:45px;
          height:32px;
          margin-left: 0px;
      }
  }
  .course-wrapper:has(.active-nav) #sidebar-accordion .module-tool i{
    animation: cssModule_i 0s ease-in 0.45s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  @keyframes cssModule_i {
    to {
        margin-left: 19px;
    }
  }
  @-webkit-keyframes cssModule_i {
      to {
          margin-left: 19px;
      }
  }
  .course-wrapper:not(:has(.active-nav)) #sidebar-accordion{
    min-width:248px;
    margin: auto;
    display: block;
  }

  .col_sidebar_active.active-nav .menu-items,
  .col_sidebar_active.active-nav .menu-header{
    transition: visibility 0s, opacity 0.5s ease-in-out;
  }
  .col_sidebar_active.active-nav .switch-sidebar .on,
  .col_sidebar_active.active-nav .switch-sidebar .off{
    display: none;
  }

  .col_sidebar_active.active-nav .switch-sidebar .slider-round{
    width:40px;
  }

  .col_maincontent_active{
    transition: all 0.5s ease-in-out;
    z-index: 1;
  }

  .course-wrapper:has(.active-nav) .menu_btn_button img{
    transform: rotate(180deg);
    transition: transform 0.01s ease-in-out;
  }

  .course-wrapper:not(:has(.active-nav)) .menu_btn_button img{
    transform: rotate(0deg);
    transition: transform 0.01s ease-in-out;
  }

}


/* ************************************************************************************************************************************* */
/* ************************************************************************************************************************************* */
/************************************** THIS IS Α SECOND CHOICE OF VIEW-STUDENT-TEACHER TOOGLE BUTTON ************************************/
/* ************************************************************************************************************************************* */
/* ************************************************************************************************************************************* */
.switch-sidebar {
  position: relative;
  display: inline-block;
  height: 40px;
}
@media(max-width:991px){
  .switch-sidebar{
    width: 200px;
  }
}
@media(min-width:992px) and (max-width:1199px){
  .switch-sidebar{
    width: 172px;
  }
}
@media(min-width:1200px) and (max-width:1399px){
  .switch-sidebar{
    width: 178px;
  }
}
@media(min-width:1400px){
  .switch-sidebar{
    width: 228px;
  }
}

@media(max-width:991px){
  .slider-btn-on{
    width:200px;
  }
}
@media(min-width:992px) and (max-width:1199px){
  .slider-btn-on{
    width:172px;
  }
}
@media(min-width:1200px) and (max-width:1399px){
  .slider-btn-on{
    width:178px;
  }
}
@media(min-width:1400px){
  .slider-btn-on{
    width:228px;
  }
}

.switch-sidebar input {
  display:none;
}

.slider-round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  -webkit-transition: .4s;
  transition: .4s;
  border: solid 1px #CDD4E0;
}
.course-wrapper:has(.active-cont) .slider-round{
  margin-left: auto;
  margin-right: auto;
}

.slider-round:before {
  position: absolute;
  content: "";
  height: 38px;
  width: 38px;
  top:0px;
  left: 0px;
  bottom: 0px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
  background-image: url(../../../resources/img/Icons_user-tie.svg);
  border: solid 1px #CDD4E0;
}

input:checked + .slider-round {
  background-color: #ffffff;
}

input:focus + .slider-round {
  box-shadow: 0 0 1px #F7F9FE;
}

@media(max-width:991px){
  input:checked + .slider-round:before {
    -webkit-transform: translateX(161px);
    -ms-transform: translateX(161px);
    transform: translateX(161px);
  }
}

@media(min-width:992px) and (max-width:1199px){
  input:checked + .slider-round:before {
    -webkit-transform: translateX(132px);
    -ms-transform: translateX(132px);
    transform: translateX(132px);
  }
}

@media(min-width:1200px) and (max-width:1399px){
  input:checked + .slider-round:before {
    -webkit-transform: translateX(138px);
    -ms-transform: translateX(138px);
    transform: translateX(138px);
  }
}

@media(min-width:1400px){
  input:checked + .slider-round:before {
    -webkit-transform: translateX(188px);
    -ms-transform: translateX(188px);
    transform: translateX(188px);
  }
}


.course-wrapper:has(.active-nav) input:checked + .slider-round:before{
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}

.on {
  display: none;
}

.on, .off {
  color: #2B3944;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
}

input:checked+ .slider-round .on {
  display: block;
}

input:checked + .slider-round .off {
  display: none;
}

.slider-round {
  border-radius: 34px;
}

.slider-round:before {
  border-radius: 50%;
}




/* ************************************************************************************************************************************* */
/* ************************************************************************************************************************************* */
/*********************************************************** OFF CANVAS ******************************************************************/
/* ************************************************************************************************************************************* */
/* ************************************************************************************************************************************* */

.offcanvas.show{
  max-width: 300px;
  overflow-x: auto;
}
.offcanvas .btn-close {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill='rgb(196, 70, 1)' d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 16px;
  opacity: 1;
}