::-webkit-scrollbar { width: 3px; height:5px; }
::-webkit-scrollbar-track { background: transparent !important;  }
::-webkit-scrollbar-thumb { background: #607d8b !important;  }
::-webkit-scrollbar-thumb:hover { background: #009688 !important;  }
.desc-product p{ padding: 0px !important; margin: 0px !important; margin-bottom: 0.5rem !important; }
.shadow, .saas_two_main_header{box-shadow: 0 5px 10px 0 rgba(191, 64, 181, 0.12) !important; }
.section-not-header{ padding: 110px 0px 30px !important; }
#cart-content input, #cart-content select, #cart-content textarea{ font-size: 12px !important; }
#cart-content select{
    /*height: calc(1.5em + 0.5rem + 2px) !important;
    padding: 0.25rem 0.5rem !important;
    line-height: 1.5 !important;
    border-radius: 0.2rem !important;*/
}
#main-search:hover, #main-search:active{
    color: #212529 !important;
}
.app-edu-header-main{
    z-index: 999999 !important;
}
.app-edu-course-content{
    padding: 10px 0px 30px !important;
}
.hide_element{
    display: none !important;
}
.show-content{opacity: 1 !important;visibility: visible !important;}
.hide-content{opacity: 0 !important;height: 0px !important;width: 0px !important;visibility: hidden !important;}
.saasio-breadcurmb-section{
    background-image: linear-gradient(45deg, #08b9d5 0%, #119ec1 100%);
}
.app-edu-banner-text h1{
    font-size: 40px !important;
}
.app-edu-intro-innerbox .app-edu-intro-icon{
    width: 100px !important;
    height: 100px !important;
}
.app-edu-intro-innerbox .app-edu-intro-text p, .app-edu-section-title p{
    font-size: 15px !important;
}
.view-more{
    width: 100px !important;
    border-radius: 80px !important;
    font-size: 15px !important;
}
#header-btn-auth:focus, #header-btn-auth:active, #header-btn-auth:hover{
    /*color: #373a5b !Important;*/
}
.saasio-breadcurmb-section{
    padding: 110px 0px 30px !important;
}
.app-edu-footer-logo a img{
    width: 200px !important;
}

.app-edu-footer-widget-area{
    padding: 0px 0px 20px !important;
}
.app-edu-footer-copyright{
    padding-bottom: 15px !important;
    font-size: 15px;
}
.app-edu-footer-section, .app-edu-category-section{
    background-size: 100% 100% !important;
}
.singkat{
  text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}
.del {
    text-decoration: line-through;
}
.img-list{
    height: 250px !important;
    display: flex !important;
    justify-content: center !important;
}
.img-list img{
    width: auto !important;
    height: auto !important;
}
.category-list img{
    width: 100px !important;
    height: 100px !important;
    border-radius: 80px !important;
}

.no-border{
	border: none !important;
}
.no-padding{
	padding: 0px !important;
}

.chip{
	text-align: center;border-radius: 8px;background: #0707072e;color: #FFFFFF !important;margin:0px 3px;float: left;box-shadow: rgb(0 0 0 / 10%) 0rem 0.1rem 0.4rem 0.1rem;padding: 5px 15px;background-color: rgb(52, 59, 106);border: 0.2rem none rgb(94, 106, 186);font-size: 13px;letter-spacing: 1px;
}
.chip .icon{
    background: #ffffff2e !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-block !important;
    line-height: 30px !important;
    border-radius: 80px !important;
    font-size: 19px !important;
}
.chip span{
	padding: 5px !important;
}

a{
	cursor: pointer !important;
}

.swiper-container{
	overflow: hidden !important;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
	font-size: 13px !important;
    text-align: center !important;
    line-height: 35px !important;
    height: 35px !important;
    width: 35px !important;
    border-radius: 8px !important;
    background-color: rgb(255, 255, 255) !important;
    box-shadow: rgb(0 0 0 / 10%) 0rem 0.1rem 0.4rem 0.1rem !important;
    font-weight: bold !important;
}
.swiper-button-disabled{
	opacity: 0 !important;
}

.item-box-bg{
    background-size: cover !important;
    background-repeat: no-repeat !important;
    height: 150px !important;
    background-position: center !important;
}

.detail-item-gray{
	background-color: rgb(28, 32, 57) !important;
}

.bg-event{
	    background: linear-gradient(90deg, rgb(39, 111, 191) 0%, rgb(44, 179, 172) 100%) !important;
}

.detail-item-brown {
    background-color: rgb(62 42 4) !important;
}

.detail-item-white {
    background-color: #FFFFFF !important;
}

.no-bg{
	background: transparent !important;
}

.view-more{
    color: #FFFFFF !important;
    padding: 7px 10px !important;
    background: #0a1051 !important;
    border-radius: 80px !important;
    letter-spacing: 0.5px !important;
    font-size: 13px !important;
    text-transform: capitalize !Important;
}
.view-more-outline{
    color: #0a1051 !important;
    padding: 7px 10px !important;
    background: transparent !important;
    border-radius: 80px !important;
    letter-spacing: 0.5px !important;
    font-size: 13px !important;
    border:1px solid #0a1051 !important;
    text-transform: capitalize !Important;
}

.text-white{
	color: #FFFFFF !important;
}
.no-margin{
	margin: 0px !important;
}

.back-page{
	font-size: 22px !important;
    color: #607d8b !important;
    background: #ffffff0d !important;
    padding: 10px !important;
    vertical-align: middle !important;
}
.breadcrumb_main{
	text-align: left  !important;
	color: #607d8b !important;
	font-size: 13px !important;
	letter-spacing: 0.5px  !important;
}
.list_breadcrump{
	margin-right: 5px !important;
}
.pull-left{
	float: left !important;
}
.pull-right{
	float: right; !important;
}
.gradient_blue{
	background: linear-gradient(90deg, rgb(35, 39, 69) 0%, #3f51b5 100%) !important;
}
.content-inner{
	padding: 15px !important;
}

.uppercase, .list_breadcrump.active span{
	text-transform: uppercase !Important;
}
.title-blog{
	text-align: center !Important;
    color: #FFFFFF !Important;
    font-weight: bold !important;
    letter-spacing: 0.5px !Important;
}

.text-singkat{
    text-overflow: ellipsis !Important;
    overflow: hidden !Important;
    white-space: nowrap !Important;
}
.attribute-detail-course{
    padding: 5px 10px !Important;
    font-size: 13px !Important;
    letter-spacing: 0.5px !Important;
    text-transform: uppercase !Important;
}
.carousel-control-prev, .carousel-control-next{
    z-index: 9999 !important;
}

.item-table-responsive ul{
      text-align: left !important;
}

/*=============== DEKSTOP DEVICE =====================*/

@media screen and (min-width: 768px) {
  /*=============== START LINE DEKSTOP DEVICE =====================*/

  .dekstop-none{
  	display: none !important;
  }


  /*=============== END LINE DEKSTOP DEVICE =====================*/
}
/*=============== END DEKSTOP DEVICE =====================*/



/*=============== MOBILE DEVICE =====================*/

.menu-user-mobile{
    width: 35px !important;
    height: 35px !important;
    line-height: 35px !important;
    margin: 0px 10px !important;
    margin-right: 45px !important;
}

@media screen and (max-width: 768px) {
  /*=============== START LINE MOBILE DEVICE =====================*/
  #main-search{
   /* width: 35px !important;
    height: 35px !important;
    line-height: 35px !important;
    margin: 0px 10px !important; */
  }
  .saas_two_main_header .saas_sign_up_btn{
    width: 35px !important;
    height: 35px !important;
    line-height: 35px !important;
    margin: 0px 5px;
  }
  .saas_two_main_header .saas_sign_up_btn a.mobile{
    font-size: 20px !important;
  }
  .header-dia-cta-btn.mobile-page{
    right: 100px !important;
    position: absolute !important;
    top: -40px !important;
  }
  .mobile-none{
  	display: none !important;
  }
  .no-padding-m, .no-pading-m{
  	padding: 0px !important;
  }
  .no-margin-m{
  	margin: 0px !important;
  }
  .cat-home{
  	justify-content: space-between !important;
    margin: 0px !important;
    overflow: auto !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }
  .p-5-m{
  	padding: 5px !important;
  }
  .p-10-m{
  	padding: 10px !important;
  }
  .view-more, .view-more-outline{
  	font-size: 11px !important;
  }
  .title-content{
  	font-size: 15px !important;
  	padding: 5px 0px !important;
  }
  .nk-content{
  	padding-bottom: 0px !important;
  }
  .left-m{
  	float: left !important;
  }
  .view-more-ctn{
  	margin: 15px 0px !important;
  }
  .full-m{
    display: inline-block !important;
    width: 100% !important;
  }
  .detail-item-box{
    height: 97px !important;
  }
  .item-table-responsive .nk-tb-actions{
     display: inline-block !important;
   }
   .container-detail{
        padding: 0px 15px !important;
    }
    .brand_logo img{
        width: 130px !important;
    }


  /*=============== END LINE MOBILE DEVICE =====================*/
}
/*=============== END MOBILE DEVICE =====================*/


.panel-default>.panel-heading {
  color: #333;
  background-color: #fff;
  border-color: #e4e5e7;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.panel-default>.panel-heading a {
  display: block;
  padding: 10px 15px;
}

.panel-default>.panel-heading a:after {
  content: "";
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  transition: transform .25s linear;
  -webkit-transition: -webkit-transform .25s linear;
}

.panel-default>.panel-heading a[aria-expanded="true"] {
  background-color: #eee;
}

.panel-default>.panel-heading a[aria-expanded="true"]:after {
  content: "\2212";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
  content: "\002b";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.desc-product img{
    padding: 10px;
    border-radius: 8px;
}
.is-paging-slider{ width: 30px;height: 30px;line-height: 30px;border-radius: 80px;font-size: 25px;background-image: none !important; }
.not-show{ opacity: 0 !important; } .fs-14{font-size: 14px !important;} .fs-15{font-size: 15px !important;} .fs-13{font-size: 13px !important;}
.fs-10{font-size: 10px !important;} .fs-11{font-size: 11px !important;} .fs-12{font-size: 12px !important;} .fs-16{font-size: 16px !important;}
.fs-18{font-size: 18px !important;} .fs-20{font-size: 20px !important;}
.slider-flex .slick-track{display: flex;align-items: center;}
.lms-menu-item a{height: 40px;} .lms-menu-item.active{background-color: #17a2b8!important; color: #FFFFFF !important}
.is-relative{position: relative !important;} .br-8{border-radius: 8px !important;} .lh-normal{line-height: normal !important;}
#content-menu-lms{background-color: #eaeef1!important;}
#content-menu-lms .slick-arrow.slick-hidden{display: inline-block !important;opacity: 0.5 !important;}
.lms-content-item{display: none;} .lms-content-item.active{display: block !important;}
.user-avatar{
    height: 40px;
    width: 40px;
    font-size: 28px;
    font-weight: 400;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    position: relative;
}
.user-avatar.sm{ height: 30px !important;width: 30px !important; } .user-avatar.lg{ height: 100px !important;width: 100px !important; }
.user-avatar.md{ height: 75px !important;width: 75px !important; } .user-avatar img{width: 100%;height: 100%;}
.br-80{border-radius: 80px !important;} .is-circle{border-radius: 50% !important;}
.fw-normal{font-weight: normal !important;} .ls-05{letter-spacing: 0.5px !important;} .fw-bold{font-weight: bold !important;}
.badge-gray-dim{background-color: #bdc1df !important;border-color: #bdc1df !important;}
.summary-lms-about .title::after{ content: '';width: 50px;display: block;height: 3px;background: #17a2b8; }
.summary-lms-about .icon{width: 20px;filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);}
.break-icon .icon{width: 25px;filter: invert(0.5) sepia(1) saturate(50) hue-rotate(175deg) brightness(75%) !important;}
.break-icon::before, .break-icon::after{content: ''; width: 30px;height: 2px;display: inline-block;background: #dcdcdc;}
.border-bottom-2-blue{border-bottom: 2px solid #0e3bc1;}
.btn-icon.btn-sm{width: 1.75rem;height: 1.75rem;line-height: 1.75rem;}
#content-about-instructor .card{height: 270px !important;}
.card-box-img-profile{height: 200px;overflow: hidden;} .card-box-img-profile img{width: auto; max-width: 100%; height: auto;max-height: 100%;}
.table thead th, .table tbody td{vertical-align: middle !important;}
.btn-light2{color: #101924;background-color: #e5e9f2;border-color: #e5e9f2;} .br-5-top{border-radius: 5px 5px 0px 0px !important;} .h-100p{height: 100px !important;}
.h-50p{height: 50px !important;}
.bg-info-dim { background-color: #dff7fb !important; }
.action-edit-foto-center{
    position: absolute;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    background: #04040454 !important;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
    border: 1px solid gray !important;
}
.capitalize{text-transform: capitalize !important;} .border-none{border: 0px !important;} .br-none{border-radius: 0px !important;}
#tab-agenda a.nav-link{ background-color: #eaeef1!important; min-width: 100px !important; }
#tab-agenda a.nav-link.active{ background-color: #17a2b8!important; color: #FFFFFF !important; }
.btn-xs{padding: 0.15rem 0.25rem !important;line-height: 1 !important;} .is-absolute{position: absolute !important;}
.accordion-item{border: 1px solid #0a0a0a1c;border-radius: 8px;} .br-4{border-radius: 4px !important;}
.accordion-head .title{ margin-bottom: 0px !important; line-height: 1.3; }
.accordion-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    font-size: 1rem;
    color: #364a63;
    transform: translateY(-50%);
    transition: rotate 0.4s;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}
.accordion-icon:before {
    content: '\25BC';
    transition: 0.4s;
}
.accordion-head.collapsed .accordion-icon:before {
    content: '\25B2';
}
.h-auto{height: auto !important;} .note-popover .popover-content>.note-btn-group, .note-editor .note-toolbar>.note-btn-group{margin: 0px !important;padding: 3px !important;}
.app-edu-main-navigation li a{font-size: 14px !important;letter-spacing: 0.5px !important;font-weight: 600 !important;}
.app-edu-counter-innerbox .app-edu-counter-text h3{font-size: 35px !important;}
.saas_two_main_header .s2-main-navigation .navbar-nav li{margin-right: 30px !important;}
.saasio-breadcurmb-section{ padding: 90px 0px 15px !important;}
.breadcurmb-title h2{font-size: 30px !important;letter-spacing: 0.5px !important;padding-bottom: 5px !important;}
.breadcurmb-item-list{font-size: 14px !important;letter-spacing: 0.5px !important;}
.saasio-page-breadcurmb li a:after{margin-right: 3px !important;top: 1px !important;font-size: 10px !important;}
.lh-50{line-height: 50px !important;}
.is-question-exam p, .is-answer-exam p{margin: 0px !important;padding: 0px !important;}
.is-answer-exam p{display: inline-block !important;}
#table-exam-list_wrapper .dataTables_paginate .paginate_button{
    background-color: #17a2b8;
    color: #ffffff !important;
    padding: 0px;
    font-size: 14px;
    letter-spacing: 0.5px;
    border-radius: 4px;
    width: 75px;
    height: 30px;
    line-height: 30px;
    margin-left: 1rem !important;
}
#table-exam-list_wrapper .dataTables_paginate .paginate_button.disabled{
    background-color: #ccc !important;
}
.menu-lms-exam{
    color: #101924; background-color: #e5e9f2; border-color: #e5e9f2;
}
.menu-lms-exam.active{
    color: #fff !important; background-color: #007bff !important; border-color: #007bff !important;
}
#table-exam-list_paginate{display: flex !important;width: auto !important;}
#finish-lms-exam{margin-left: 1rem !important;}
.form-description-logbook .note-editable, .content-show-exam-manage .note-editable{font-size: 13px;}
.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate.paging_simple_numbers{font-size: 13px !important;}
.dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button{padding: 0.25rem 0.5rem !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    color: #0c5460 !important;
    background-color: #d1ecf1 !important;
    border-color: #bee5eb !important;
}
.dataTables_wrapper .dataTables_filter input{border-radius: 80px !important; padding: 0.25rem 0.5rem !important;}
.description-show-logbook-list p{margin-bottom: 0.25rem!important;}
textarea#text-communication{resize: none !important;min-height: 36px !important;padding-top: 0.5rem !important;}
.is-content-attachment-lms-communication{height: 250px !important;width: 250px !important;}
.is-content-attachment-lms-communication.audio{height: 45px !important;padding: 0.25rem !important;}
.is-content-attachment-lms-communication.document{
    height: 35px !important;
    padding: 0.25rem !important;
}
.w-15px{width: 15px !important;}
#content-item-pinned-communication .nk-error-ld{padding: 0.5rem!important;}
#content-item-pinned-communication .nk-error-title, #content-item-pinned-communication .nk-error-text{color: #ffffff !important}
#content-item-pinned-communication .nk-error-ld img{width: 50px !important;}
#content-item-pinned-communication .nk-error-title{font-weight: normal !important;font-size: 13px !important;margin-bottom: 0px !important;}
#content-item-pinned-communication .nk-error-text{font-size: 11px !important;color: #dddddd !important;font-style: italic !important;}
#content-pinned-communication::before{
    content: '';
    position: absolute;
    top: 100%;
    display: block;
    border-radius: 0px 0px 0px 0px;
    width: 0;
    border-top: 15px solid #2b022e;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    cursor: pointer;
    left: 20px;
}
table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.dataTables_empty{
    text-align: center;
    font-size: 11px;
    color: #999;
    font-weight: normal;
}
.input-group.input-group-transparent input{
  border:none !Important; background: transparent !Important;
}
.input-group.input-group-transparent .input-group-append, .input-group.input-group-transparent .input-group-text{
  border:none !Important; background: transparent !Important;
}
table.dataTable tbody td.dtfc-fixed-left, table.dataTable tbody td.dtfc-fixed-right{
  z-index: 1 !important;
  background: #dee2e6 !important;
}
table.dataTable thead th.dtfc-fixed-left, table.dataTable thead th.dtfc-fixed-right{
  z-index: 1 !important; background: #dee2e6 !important;
}
.top-0{top:0 !important;} .right-0{right: 0 !important;} .left-0{left:0 !important;} .bottom-0{bottom: 0 !important;}
#app-edu-main-nav .dropdown-toggle::after, .app-edu-main-navigation .dropdown:after {display: none !important;}
.app-edu-main-navigation .dropdown .dropdown-menu{
    width: auto !important;
    top:0px;
    left: -75%;
    background: #FFFFFF;
    border-radius: 18px;
}
.app-edu-main-navigation .dropdown:hover .dropdown-menu{
    top:0px;
}
.app-edu-main-navigation .dropdown .dropdown-menu .dropdown-item{
    padding-bottom: 5px !important;
    color: #4eb988 !important;
    font-weight: normal !important;
    display: inline-block !important;
}
.app-edu-main-navigation .dropdown .dropdown-menu .dropdown-item-title{
    border-bottom: 2px solid #4eb988;
    font-weight: bold !important;
    margin-bottom: 10px !important;
}

.app-edu-main-navigation .dropdown .dropdown-menu .dropdown-item:hover{
    background: transparent !important;
}