body{
    font-family: 'Poppins', 'Rubik', serif;
    color: #333333;
    background-color: #fff;
}
.ff1{
    font-family: 'Poppins', 'Rubik', serif!important;
}
.ff2{
    font-family: 'Rubik', 'Poppins', serif!important;
}
.cursor-pointer {
    cursor: pointer !important;
}
a{
    text-decoration: none;
    color: unset;
    transition: all 0.2s ease;
    cursor: pointer !important;
}
a:hover{
    color: #555555;
}
a.img-link:hover{
    filter: brightness(0) saturate(100%) invert(78%) sepia(47%) saturate(829%) hue-rotate(349deg) brightness(98%) contrast(101%);
}
.list-style-none{
    list-style: unset!important;
}
.shadow-md{
    box-shadow: 0 0.1rem 0.6rem rgba(0,0,0,.175)!important;
}
.fw-semibold{
    font-weight: 500 !important;
}
.fw-medium-semibold{
    font-weight: 600 !important;
}
.fz-12{
    font-size: 12px!important;
}
.fz-14{
    font-size: 14px!important;
}
.btn-fill{
    border: 1px solid #333333 !important;
    background: #333333 !important;
    color: white !important;
    font-weight: 600;
    transition: all 0.7s ease;
    font-family: 'Rubik', 'Poppins', serif!important;
}
.btn-fill:hover{
    border: 1px solid #555555 !important;
    background: #555555 !important;
    color: white !important;
}
.btn-line{
    border: 1px solid #333333 !important;
    background: white !important;
    color: #333333 !important;
    transition: all 0.7s ease;
}
.btn-line:hover{
    border: 1px solid #555555 !important;
    background: #555555 !important;
    color: white !important;
}
.text-yellow{
    color: #FCC310!important;
}
.link-yellow{
    color: #FCC310!important;
}
.link-yellow:hover{
    color: #ffd650!important;
}
.link-dark:hover{
    color: #555555!important;
}
.ps-2-5{
    padding-left: 0.7rem!important;
}
img{
    width: 100%;
    height: 100%;
}
.w-80{
    width: 88%!important;
}
textarea{
    resize: none;
}
.border-back:before {
    content: '';
    background-color: #bfbfbf;
    width: 45%;
    height: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
    display: block;
    z-index: 6;
}
.border-back:after {
    content: '';
    background-color: #bfbfbf;
    width: 45%;
    height: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
    display: block;
    z-index: 6;
}
.btn-line-gray{
    border: 1px solid #ced4da;
    background: white !important;
    transition: all 0.4s ease;
}
.btn-line-gray:hover{    
    background: rgb(250, 250, 250) !important;
}
.btn-light-gray, .btn:disabled, button:disabled{    
    background-color: #EFEFEF!important;
    color: #9C9D9E!important;
    transition: all 0.4s ease;
}
.btn:disabled{
    border-color: #EFEFEF!important;
}
.btn-light-gray:hover{    
    background-color: #dfdfdf!important;
}
.text-gray{
    color: #333333!important;
}
.alert-danger {
    color: #FF3333;
    background-color: #FFC2C2;
    border-color: #FFC2C2;
}
.bg-gray{
    background-color: #EFEFEF!important;
}
.bg-yellow{
    background-color: #FCC310!important;
}
.bg-green{
    background-color: #95BF03!important;
}
.list-style-disc{
    list-style: disc !important;
}
.bg-light-gray{
    background-color: #EFEFEF;
}
.bg-dark-gray{
    background-color: #333!important;
    color: white;
}
.badge-bintang{
    border-bottom-left-radius: 40%;
}
.badge-bintang .img-wrap{
    width: 23px;
}
.bg-dark-gray-gradient{
    background: radial-gradient(60.56% 51.77% at 36.11% 50%, #989FA6 0%, #959CA3 40.05%, #888F95 100%);
}
.border-yellow{
    border: 1px solid #FCC310;
    border-color: #FCC310 !important;
}
::selection {
    color: white;
    background: #FCC310;
}
.av-circle{
    width: 40px !important;
    height: 40px !important;
    overflow: hidden;
    background-color: white;
    border-radius: 100%;
}
.av-circle img{
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    object-fit: cover;
}
.text-light-gray{
    color: #dee2e6;
}
.icon-b-1{
    width: 3rem;
}
.icon-b-2{
    width: 2.5rem;
}
.icon-b-3{
    width: 2rem !important;
}
.icon-b-4{
    width: 1.5rem!important;
}
.icon-1{
    width: 1.3rem !important;
}
.icon-2{
    width: 1.1rem;
}
.icon-3{
    width: .9rem;
}
.icon-4{
    width: .5rem;
}
.icon-5{
    width: .3rem;
}
.icon-hw-1{
    width: 1.3rem;
    height: 1.3rem;
}
.icon-hw-2{
    width: 1.1rem;
    height: 1.1rem;
}
.icon-hw-3{
    width: .9rem;
    height: .9rem;
}
.icon-hw-4{
    width: .7rem;
    height: .7rem;
}
.icon-hw-b-1{
    width: 2.3rem;
    height: 2.3rem;
}
.b-shadow{
    box-shadow: 0px 0px 12px #EBEBEB;
}
.w-fit{
    width: fit-content!important;
}
.w-5rem{
    width: 5rem;
}
.w-4rem{
    width: 4rem;
}
.h-unset{
    height: unset!important;
}
.badge-blue {
    background-color: #31d2f2!important;
    color: white !important;
    font-size: 14px;
    padding-top: 0.4rem!important;
    padding-bottom: 0.4rem!important;
    padding-right: .8rem!important;
    padding-left: .8rem!important;
    width: fit-content!important;
    height: fit-content;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    border-radius: 50rem!important;
    text-align: center!important;
}
.badge-yellow{
    background-color: #FCC310!important;
    color: white !important;
    font-size: 14px;
    padding-top: 0.4rem!important;
    padding-bottom: 0.4rem!important;
    padding-right: .8rem!important;
    padding-left: .8rem!important;
    width: fit-content!important;
    height: fit-content;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    border-radius: 50rem!important;
    text-align: center!important;
}
.badge-green{
    background-color: #95BF03!important;
    color: white !important;
    font-size: 14px;
    padding-top: 0.4rem!important;
    padding-bottom: 0.4rem!important;
    padding-right: .8rem!important;
    padding-left: .8rem!important;
    width: fit-content!important;
    height: fit-content;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    border-radius: 50rem!important;
    text-align: center!important;
}
.badge-gray{
    background-color: #EFEFEF!important;
    color: #333333 !important;
    font-size: 14px;
    padding-top: 0.4rem!important;
    padding-bottom: 0.4rem!important;
    padding-right: .8rem!important;
    padding-left: .8rem!important;
    width: fit-content!important;
    height: fit-content;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    border-radius: 50rem!important;
    text-align: center!important;
}
.badge-red{
    background-color: #FF3333!important;
    color: white !important;
    font-size: 14px;
    padding-top: 0.4rem!important;
    padding-bottom: 0.4rem!important;
    padding-right: .8rem!important;
    padding-left: .8rem!important;
    width: fit-content!important;
    height: fit-content;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    border-radius: 50rem!important;
    text-align: center!important;
}
.box-shadow-focus-0:focus{
    box-shadow: unset !important;
}
.filter-white{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(65deg) brightness(100%) contrast(103%);
}
.border-2px{
    border-width: 2px!important;
}
.min-width-80{
    min-width: 80px;
}
.border{
    /* border: 1px solid #ced4da!important; */
}
.border-dashed{
    border-style: dashed !important;
}
.ar-square{
    aspect-ratio: 1 / 1!important;
}
.g-3, .gy-3 {
    --bs-gutter-y: 1rem;
}
.g-3, .gx-3 {
    --bs-gutter-x: 1rem;
}
.many-form .form-control, .many-form .form-select, .many-form .selection{
    font-size: 13px!important;
}
/* upload-file-custom */
.upload-file-custom{
    width: 100%;
    min-height: 12rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #808C92!important;
    border-radius: 0.3rem!important;
    padding: 1rem!important;
}
/* Clock Picker */
.clockpicker-popover .popover-title {
    display: none!important;
}
.clockpicker-plate{
    background-color: #efefef!important;
    border: unset!important;
}
.clockpicker-popover .popover-content {
    background-color: #ffffff!important;
}
.popover.clockpicker-popover{
    border: unset!important;
    box-shadow: 0 0.1rem 0.6rem rgba(0,0,0,.175)!important;
}
/* Popup Notif */
.list-popup-notif{
    border-bottom: 1px solid #f0f2f4!important;
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
    background-color: #FFFFFF;
    cursor: pointer;
}
.list-popup-notif:first-child{
    padding-top: unset!important;
}
.list-popup-notif:last-child{
    padding-bottom: unset!important;
    border-bottom: unset!important;
}
.list-popup-notif:hover{
    background-color: #EEEEEE;
}
/* Flipped */
.flipped, .flipped .content-isi{
    transform: rotateX(180deg);
    -webkit-transform: rotatex(180deg);
}
.flipped::-webkit-scrollbar {
    width: 5px;
}
.flipped::-webkit-scrollbar-track {
    background: gainsboro;
    border-radius: 1px;
}
.flipped::-webkit-scrollbar-thumb {
    background: #9FA7BC;
}
.flipped::-webkit-scrollbar-thumb:hover {
    background: #DEE3ED;
}
/* Checkbox */
.form-check-input:checked {
    background-color: #333333;
    border-color: #333333;
}
.form-check-input:focus {
    border: 1px solid rgba(0,0,0,.25);
}
.form-check-input.check-yellow:checked {
    background-color: #FCC310;
    border-color: #FCC310;
}
/* dropdown */
.dropdown{
    overflow: visible;
}
.dropdown-item.active, .dropdown-item:active {
    text-decoration: none;
    background-color: #f8f9fa;
}
.btn.dropdown-toggle{
    box-shadow: unset !important;
}
.dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
    vertical-align: .09rem!important;
}
.dropdown-toggle::after {
    flex-shrink: 0;
    width: 1rem;
    height: .5rem;
    content: "";
    background-image: url("../img/custom/caret-down.svg");
    background-repeat: no-repeat;
    transition: transform .2s ease-in-out;
    vertical-align: unset!important;
    border-top: unset;
    border-right: unset;
    border-bottom: unset;
    border-left: unset;
}

.dropdown-menu {
    transition: none !important;
}
.w-18-persen{
    width: 18%!important;
}
.w-17-persen{
    width: 17%!important;
}
.w-16-5-persen{
    width: 16.5%!important;
}
.w-16-persen{
    width: 16%!important;
}
.w-15-5-persen{
    width: 15.5%!important;
}
.w-15-persen{
    width: 15%!important;
}
.w-14-persen{
    width: 14%!important;
}
.w-13-5-persen{
    width: 13.5%!important;
}
.w-13-persen{
    width: 13%!important;
}
.w-9-persen{
    width: 9%!important;
}
.w-8-persen{
    width: 8%!important;
}
.w-7-5-persen{
    width: 7.5%!important;
}
.w-7-persen{
    width: 7%!important;
}
.w-30{
    width: 30%!important;
}
.w-26{
    width: 26% !important;
}
.w-12rem{
    width: 12rem!important;
}
.w-300{
    width: 300px;
}
.bg-light-blue {
    background-color: #F6F9FC;
}
.shadow-base{
    /* box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2); */
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1)!important;
}
.overflow-unset{
    overflow: unset !important;
}
.alert-basic {
    background-color: #FFF9E7;
    border-color: #FCC310;
}
.will-change-0{
    will-change: unset!important;
}
.border-3 {
    border-width: 3px!important;
}
.border-base {
    border-color: #333 !important;
}
/* Star */
.jq-star {
    margin: 0px 0.14rem;
}
.rating-read-only-val .jq-star{
    cursor: unset!important;
}
/* pagination */
.pagination a{
    border: unset;
    color: #333;
}
.pagination a:hover{
    background-color: unset;
}
.page-item{
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-item.previous .page-link, .page-item.next .page-link{
    font-size: 10px;
}
.page-item .page-link{
    font-size: 14px;
    padding: .1rem .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #333333!important;
    border-color: #333333;
    border-radius: 5px;    
}
.page-item.active .page-link:hover{
    color: #fff!important;
    background-color: #555555!important;
    border-color: #555555;
}
/* Offcanvas */
.offcanvas{
    color: #333333;
    height: calc(100% - 62px);
    width: 100%;
}
.offcanvas .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #FCC310;
    background-color: unset!important;
    border-bottom: 2px solid #FCC310;
    font-weight: 600;
}
.offcanvas .nav-pills .nav-link{
    border-radius: unset!important;
    padding-right: 0;
    padding-left: 0;
    margin-right: 1.5rem;
}
.offcanvas .nav-link{
    color: #C2C2C2;
}
.offcanvas .accordion-button:not(.collapsed) {
    color: #333333;
    background-color: unset!important;
    box-shadow: unset!important;
}
.offcanvas .accordion-button:not(.collapsed)::after {
    background-image: url(../img/custom/caret-down.svg);
}
.offcanvas .accordion-button::after {
    width: 0.9rem;
    height: 0.9rem;
    background-image: url(../img/custom/caret-down.svg);
    background-size: 0.9rem;
}
.offcanvas .tab-content ul{
    list-style: none;
}
.offcanvas .tab-content ul li{
    padding: .8rem 0;
}
.offcanvas .accordion-button:focus {
    box-shadow: unset!important;
}
.offcanvas hr{
    background-color: #dee2e6;
    opacity: .5;
}
/* Main content */
.content-wrap{
    margin-top: 88px !important;
    overflow: hidden;
    position: relative;
}
.back{
    position: absolute!important;
    z-index: 1!important;
}
.content-wrap>*{
    position: relative;
    z-index: 2;
}
.wrap-content{
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.wrap-content .row>*{
    padding-right: unset!important;
    padding-left: unset!important;
}
.content-wrap ul{
    list-style: none;
}
.content-wrap ul li{
    padding: 0;
}
.content-wrap ul li .number{
    width: 40px;
    height: 40px;
}
/* faq */
.faq .accordion-button:focus {
    z-index: unset!important;
    border-color: unset!important;
    box-shadow: unset!important;
}
.faq .accordion-button {
    padding: 1.85rem 1.25rem;
}
.faq .accordion-item {
    border-color: rgba(0, 0, 0, 0.075);
}
.faq .accordion-button:not(.collapsed) {
    color: inherit;
    background-color: inherit;
    box-shadow: unset !important;
}
.faq .accordion-button:not(.collapsed)::after {
    background-image: unset!important;
    transform: unset!important;
}
.faq .accordion-button::after {
    content: unset!important;
}
.faq .accordion-button:not(.collapsed)::before {
    background-image: url("../img/custom/minus-accordion.svg");
    transform: rotate(-180deg);
}
.faq .accordion-button::before {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 2rem;
    content: "";
    background-image: url("../img/custom/plus-accordion.svg");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}
/* form */
form .btn img{
    width: 20px;
}
form .password{
    border: 1px solid #ced4da;
}
form .password.is-invalid{
    border-color: #dc3545;
}
form .password:focus-within{
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}
form .password .form-control:focus{
    box-shadow: unset;
}
.wrap-content .input-group img{
    cursor: pointer;
    height: 18px;
}
form{
    color: #5A5B5D;
}
/* datepicker */
.datepicker{
    padding: .5rem!important;
    box-shadow: 0 0.1rem 0.6rem rgba(0,0,0,.175)!important;
    border: 0;
}
.datepicker th.datepicker-switch {
    color: #444B55;
}
.datepicker th.dow{
    font-size: 10px;
    padding: 1.5rem .2rem;
    letter-spacing: 1px;
    color: #808C92;
}
.datepicker td{
    text-align: center;
    padding: 6px 8px;
    font-size: 13px;
    border-radius: 100%!important;
    color: #444B55;
}
.datepicker .prev img, .datepicker .next img{
    width: 20px;
    height: 10px;
}
.datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active:active, .datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled] {
    background-color: #333333!important;
    background-image: unset!important;
    border-color: unset!important;
    text-shadow: unset !important;
}
.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover.disabled, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:hover[disabled], .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active:hover[disabled], .datepicker table tr td span.active[disabled] {
    background-color: #333333!important;
    background-image: unset!important;
    border-color: unset!important;
    text-shadow: unset !important;
}
.datepicker-dropdown:after, .datepicker-dropdown::before{
    content: unset!important;
}
/* head */
.forgot-password .head{
    position: absolute;
    top: 0;
}
.head .img-wrap{
    height: 30px;
}
/* for-wrap */
.form-parent{
    overflow-y: auto;        
}
.form-parent .form-wrap{
    height: 100%;
}
.form-wrap form{
    width: 25%;
}
.signup .form-wrap form{
    width: 50%;
}
.forgot-password .form-wrap{
    height: 100%;
}
.ask .img-wrap{
    width: 17px;
}
.form-wrap .form-control{
    font-size: 14px;
}
/* img-wrap */
.img-parent{
    position: relative;
}
.img-parent .img-wrap{
    position: absolute;
}
/* Responsive */
@media (max-width: 1199.98px) {
    .welcome-text .col:nth-child(2)>div{
        border-right: unset!important;
    }
}
@media (max-width: 991.98px) { 
    .form-wrap form{
        width: 50%;
    }
    .signup .form-wrap form{
        width: 75%;
    }
    .w-lg-100{
        width: 100%!important;
    }
    .border-lg-0{
        border: unset!important;
    }
    .btn-lg-line{
        border: 1px solid #333333 !important;
        background: white !important;
        color: #333333 !important;
        transition: all 0.7s ease;
    }
    .btn-lg-line:hover{
        border: 1px solid #555555 !important;
        background: #555555 !important;
        color: white !important;
    }
    .btn-lg-down-fill{
        border: 1px solid #333333 !important;
        background: #333333 !important;
        color: white !important;
        font-weight: 600;
        transition: all 0.7s ease;
        font-family: 'Rubik', 'Poppins', serif!important;
    }
    .btn-lg-down-fill:hover{
        border: 1px solid #555555 !important;
        background: #555555 !important;
        color: white !important;
    }
}
@media (max-width: 767.98px) {
    .form-wrap form{
        width: 100%!important;
    }
    .border-md-bottom{
        border-bottom: 1px solid #dee2e6!important;
    }
    .border-md-right-0{
        border-right: 0!important;
    }
    .w-md-100{
        width: 100%!important;
    }
    .shadow-md-down-0{
        box-shadow: unset!important;
    }    
}
@media (max-width: 575.98px) {
    .content-wrap{
        margin-top: 71px !important;
    }
    .w-sm-100{
        width: 100%!important;
    }
    .w-sm-50{
        width: 50%!important;
    }
    @media (max-height: 800px)  {
        .signup .form-wrap{
            padding: 2rem 0;
        }
        .signup .ask{
            margin-bottom: 2rem;
        }
    }  
}
@media (max-width: 500px) {
    .form-wrap{
        align-items: unset!important;
        padding: 4rem 0;
    }
    .signup .form-wrap{
        padding: 4.5rem 0;
    }
}
@media (max-width: 374px) {
}
@media (max-height: 510px) {
    .signin .form-wrap{
        align-items: unset!important;
        padding: 2rem 0;
    }
    .signin .ask{
        padding-bottom: 2rem;
    }
}
@media (max-height: 540px)  {
    .signup .form-wrap{
        align-items: unset!important;
        padding: 2rem 0;
    }
    .signup .ask{
        margin-bottom: 2rem;
    }
}
@media (max-height: 530px)  {
    .forgot-password .head{
        position: unset;
        top: 0;
    }
    .forgot-password .form-wrap{
        align-items: unset!important;
        padding: 2rem 0;
    }
    .forgot-password .ask{
        margin-bottom: 2rem;
    }    
} 
@media (min-width: 768px) {
    .border-top-md-0{
        border-top: 0!important;
    }
    .border-bottom-md-0{
        border-top: 0!important;
    }
    .border-md-0{
        border: 0!important;
    }
}
/* Dashboard */

/* Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 23px;
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #EFEFEF;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider {
    background-color: #333333;
}
input:focus + .slider {
    box-shadow: 0 0 1px #fcc5103a;
}
input:checked + .slider:before {
    -webkit-transform: translateX(19px);
    -ms-transform: translateX(19px);
    transform: translateX(19px);
}
/* Rounded sliders */
.slider.round {
    border-radius: 63px;
}
.slider.round:before {
    border-radius: 50%;
}
/* Offcanvas */
.offcanvas{
    color: #333333;
}
.offcanvas .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #0047AB;
    background-color: unset!important;
    border-bottom: 2px solid #0047AB;
    font-weight: 600;
}
.offcanvas .nav-pills .nav-link{
    border-radius: unset!important;
    padding-right: 0;
    padding-left: 0;
    margin-right: 1.5rem;
}
.offcanvas .nav-link{
    color: #C2C2C2;
}
.offcanvas .accordion-button:not(.collapsed) {
    color: #333333;
    background-color: unset!important;
    box-shadow: unset!important;
}
.offcanvas .accordion-button:not(.collapsed)::after {
    background-image: url(../img/custom/caret-down.svg);
}
.offcanvas .accordion-button::after {
    width: 0.9rem;
    height: 0.9rem;
    background-image: url(../img/custom/caret-down.svg);
    background-size: 0.9rem;
}
.offcanvas .tab-content ul{
    list-style: none;
}
.offcanvas .tab-content ul li{
    padding: .8rem 0;
}
.offcanvas .accordion-button:focus {
    box-shadow: unset!important;
}
.offcanvas hr{
    background-color: #dee2e6;
    opacity: .5;
}
/* tab-navigasi */
.tab-navigasi .nav-wrap, .category-menu .nav-wrap{
    overflow-x: auto;
    width: 100%;
    flex-wrap: unset;
}
.tab-navigasi .nav-wrap .nav-item, .category-menu .nav-wrap .nav-item{
    width: fit-content;
    white-space: nowrap;
}
.tab-navigasi .nav-link{
    margin-right: 1rem;
}
.tab-navigasi .nav-link, .category-menu .nav-link{
    border: 1.5px solid #dee2e6!important;
    border-radius: 3rem;
    color: #333333;
}
.category-menu .nav-item{
    padding-right: 1rem;
}
.tab-navigasi .nav-wrap .nav-item:last-child .nav-link, .category-menu .nav-wrap .nav-item:last-child .nav-link{
    margin-right: 0;
}
.tab-navigasi .nav-pills .nav-link.active, .nav-pills .show>.nav-link, .category-menu .nav-pills .nav-link.active {
    color: white;
    background-color: #333333;
    font-weight: 500;
}
.category-menu .nav-link{
    min-width: 10rem;
    font-size: 14px;
}
.tab-navigasi .av-circle{
    width: 12rem !important;
    height: 12rem !important;
    object-fit: cover;
}
.tab-navigasi .input-group img {
    cursor: pointer;
    height: 18px;
}
.tab-navigasi .date, .tab-navigasi .search-product{
    width: 170px;
}
/* Main-Navbar */
.main-navbar{
    background-color: #ffffff;
    height: unset;
    padding: 1rem 0;
}
.main-navbar>div{
    margin: .8rem 0;
}
.main-navbar .border-circle{
    border: 1px solid #EEEEEE!important;
}
.main-navbar input.form-control:focus, .main-navbar .input-group .btn:focus{
    box-shadow: unset !important;
}
.main-navbar .input-group{
    width: 70%;
}
.main-navbar .input-group input{
    width: 70%;
}
.main-navbar .input-group button{
    width: 1.9rem;
    height: 1.9rem;
}
.main-navbar .input-group button:hover{
    background-color: #e1e1e1;
}
.main-navbar .badge.notif{
    color: white !important;
    font-size: 8.5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.badge:empty{
    display: none!important;
}
.object-fit-cover{
    object-fit: cover!important;
}
.avatar img {
    height: 100%!important;
}
.card-header, .card-footer {
    padding: 1rem;
}
.notification .avatar {
    width: 2.5rem;
    height: 2.5rem;
}
.navbar-nav .nav-item .badge {
    top: unset!important;
    bottom: -5px;
    right: -5px;
}
.main-navbar .menubar-brand {
    height: 40px;
}
/* Menubar */
.menubar{
    background-color: #FAFAFA;
}
.menubar-logo {
    height: 56px;
    margin: .8rem 1.5rem;
}
.menubar-enabled.menubar-collapsed .menubar .menubar-body{
    margin-left: 0;
    margin-right: 0;
}
.menubar .menu{
    width: 100%;
}
.menubar .menu-link.active i{
    transform: rotate(-180deg);
}
.menubar .menu-link i{
    transition: all .5s ease;
}
.menubar .menu-link, .menubar .active .menu-link[aria-expanded], .menubar .active ul .menu-link{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .2rem 0;
    padding: 0.6rem 1.5rem;
    font-size: 14px;
    font-weight: normal;
    color: #5A5B5D;    
    background-color: unset;
    position: relative!important;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
.menubar .menu-link img, .menubar .active .menu-link[aria-expanded] img, .menubar .active ul .menu-link img{
    filter: brightness(0) saturate(100%) invert(37%) sepia(7%) saturate(139%) hue-rotate(182deg) brightness(93%) contrast(91%);
}
.menubar .menu-link:hover, .menubar .active .menu-link[aria-expanded]:hover, .menubar .active ul .menu-link:hover{
    color: #9c9d9e!important;
}
.menubar .menu-link:hover img, .menubar .active .menu-link[aria-expanded]:hover img, .menubar .active ul .menu-link:hover img, .menubar .active .menu-link:hover>div:before, .menubar-enabled.menubar-collapsed .menubar .active .menu-link:hover[aria-expanded]>div::before, .menubar .active ul .active .menu-link:hover>div::before{
    filter: brightness(0) saturate(100%) invert(65%) sepia(9%) saturate(39%) hue-rotate(169deg) brightness(96%) contrast(85%)!important;
}
.menubar .menu-link img{
    width: 19px;
    height: unset;
    margin-right: .8rem;
}
.menubar-enabled.menubar-collapsed .menubar .menu-link img{
    margin-right: 0;
}
.menubar-enabled.menubar-collapsed .menubar .menu-link{
    height: 40px;
    padding: 0.45rem 1rem;
    margin: .4rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menubar .active .menu-link, .menubar-enabled.menubar-collapsed .menubar .active .menu-link[aria-expanded], .menubar .active ul .active .menu-link{
    color: #333;
}
.menubar .active .menu-link>div:before, .menubar-enabled.menubar-collapsed .menubar .active .menu-link[aria-expanded]>div::before, .menubar .active ul .active .menu-link>div::before{
    content: url('../img/custom/border-active.svg');
    position: absolute;
    left: 0;
    top: 0.45rem;
    bottom: 0.45rem;
    margin: auto 0;
}
.menubar .active .menu-link img, .menubar-enabled.menubar-collapsed .menubar .active .menu-link[aria-expanded] img{
    filter: brightness(0) saturate(100%) invert(13%) sepia(7%) saturate(0%) hue-rotate(274deg) brightness(104%) contrast(83%);
}
.menubar .menu-item ul{
    padding-left: 2.1rem;
}
.menubar .menu-item ul .menu-link{
    font-weight: normal;
}
.menubar .active .menu-link[aria-expanded] img{
    filter: unset;
}
.menubar-enabled.menubar-collapsed .menubar .active ul.show{
    display: none;
}
.menubar-enabled.menubar-collapsed .menubar .menubar-logo.menubar-label {
    display: none;
}
.menubar-enabled .menubar .btn-menu-control {
    display: none!important;
}
.menubar-enabled.menubar-collapsed .menubar .btn-menu-control {
    display: flex!important;
}
/* Offcanvas Menubar */
.offcanvas .menubar .active .menu-link img, .offcanvas .menubar-enabled.menubar-collapsed .menubar .active .menu-link[aria-expanded] img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(7%) saturate(451%) hue-rotate(104deg) brightness(97%) contrast(93%);
}
.offcanvas .menubar .menu-link:hover, .offcanvas .menubar .active .menu-link[aria-expanded]:hover, .offcanvas .menubar .active ul .menu-link:hover {
    color: #6f6f6f!important;
    background-color: #ffffff14!important;
}
.offcanvas .menubar .menu-link:hover img, .offcanvas .menubar .active .menu-link[aria-expanded]:hover img, .offcanvas .menubar .active ul .menu-link:hover img{
    filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(39%) hue-rotate(282deg) brightness(85%) contrast(81%);
}
.offcanvas .menubar .menubar-footer{
    position: absolute;
    width: 100%;
    bottom: 0;
}
.menubar-enabled.menubar-collapsed .offcanvas .menubar .menu-link .ava{
    width: 2rem!important;
}
.offcanvas .menubar, .offcanvas .menubar>*, .offcanvas .menubar>*>*, .offcanvas .menubar>*>*>*, .offcanvas .menubar>*>*>*>*, .offcanvas .menubar>*>*>*>*>*, .offcanvas .menubar>*>*>*>*>*>*{
    transition: unset!important;
}

/* Table */
table{
    width: 100%!important;
}
div.dataTables_wrapper{
    width: 100%;
}
.dataTables_scrollHeadInner{
    width: 100%!important;
    margin-bottom: 1rem;
}
.dataTables_scrollHeadInner table.dataTable{
    margin-top: 0!important;
}
.dataTables_scrollBody thead{
    display: none !important;
}
.dataTables_wrapper .dataTables_scroll {
    overflow: hidden;
}
tr:last-child td{
    border-bottom: unset!important;
}
table.dataTable thead th, table.dataTable thead td {    
    font-weight: normal!important;
    font-size: 15px;
    white-space: nowrap;
}
.tab-navigasi .dataTable thead th, .tab-navigasi table.dataTable thead td {
    padding: 1rem 0.5rem;
}
table.dataTable tbody th, table.dataTable tbody td {
    vertical-align: middle!important;
    color: #6F7170!important;
}
table.dataTable tbody td {
    font-size: 14px;
    padding-top: .8rem;
    padding-bottom: .8rem;
    white-space: nowrap;
}
table .number{
    min-width: 50px;
}
table .name{
    min-width: 250px;
}
table .total-items{
    min-width: 100px;
}
table.dataTable.table-striped>tbody>tr>* {
    box-shadow: unset !important;
}
tbody, td, tfoot, th, thead, tr {
    border: 0 solid;
    border-color: inherit;
    border: 0!important;
}
.dataTables_scrollHead table.dataTable thead th, .dataTables_scrollHead table.dataTable thead td {
    border-bottom: 1px solid #DEE3ED !important;
    border-top: 1px solid #DEE3ED !important;
}
.dataTables_wrapper .row:last-child{
    margin-top: 1rem;
    display: flex;
    align-items: center;
}
div.dataTables_wrapper div.dataTables_info {
    padding-top: 0!important;
}
.dataTables_info{
    font-size: 14px;
}
table#table_id .dataTables_empty, table#table_id2 .dataTables_empty{
    height: 233px!important;
    position: relative;
}
table#table_id .dataTables_empty, table#table_id2 .dataTables_empty{
    background: #fff!important;
}
table#table_id .dataTables_empty::before, table#table_id2 .dataTables_empty::before{
    content: url('../img/custom/empty-table.svg');
    
}
.table-striped>tbody>tr:nth-of-type(odd) {
    --bs-table-accent-bg: #F6F9FC!important;
    color: var(--bs-table-striped-color);
}
/* Ordinary Table */
.table-ordinary thead tr{
    margin-top: 0!important;
    border-bottom: 1px solid #DEE3ED!important;
    border-top: 1px solid #DEE3ED!important;
}
.table-ordinary thead th, .table-ordinary tbody td {    
    font-weight: normal!important;
    font-size: 15px;
    white-space: nowrap;
    /* padding: 1rem 0.5rem!important; */
    vertical-align: middle!important;
}
.table-ordinary tbody td {
    font-size: 14px!important;
    padding-top: .8rem!important;
    padding-bottom: .8rem!important;
}
.table-ordinary tbody:before {
    line-height: 1.2rem;
    content: ".";
    color: white;
    display: block;
}
.table-ordinary tbody td>.img-wrap {
    width: 100px;
    height: 72px;
}

.dataTable tbody td>.img-wrap {
    width: 100px;
    height: 72px;
}
/* Empty */
.empty-wrap{
    height: calc(100vh - 228px);
}
.img-wrap-empty{
    width: 15rem!important;
}
/* Swiper */
:root {
    --swiper-navigation-size: 30!important;
    --swiper-theme-color: #5A5B5D!important;
}
.tab-navigasi .swiper .nav-wrap{
    overflow-x: unset;
}
.tab-navigasi .swiper-button-next, .tab-navigasi .swiper-rtl .swiper-button-prev {
    right: 0px !important;
    background: white;
}
.tab-navigasi .swiper-button-next.swiper-button-disabled, .tab-navigasi .swiper-button-prev.swiper-button-disabled {
    opacity: 0!important;
    cursor: auto;
    pointer-events: none;
}
.tab-navigasi .swiper-button-prev, .tab-navigasi .swiper-rtl .swiper-button-next {
    left: 0px !important;
    background: white;
}
.tab-navigasi .swiper-button-next, .tab-navigasi .swiper-button-prev {
    top: 0!important;
    width: 3rem!important;
    height: 100%!important;
}
.tab-navigasi .swiper-button-next:after, .tab-navigasi .swiper-button-prev:after {
    width: 30px!important;
    height: 30px!important;
    align-items: center!important;
    justify-content: center!important;
    display: flex!important;
    border-radius: 100%!important;
    box-shadow: 0px 0px 6px 0px #e7e7e7!important;
}
.tab-navigasi .swiper-nav-2:hover{
    overflow: unset!important;
}
.tab-navigasi .swiper-slide {
    width: unset!important;
}
/* Swiper */
.swiper-button-next, .swiper-button-prev {
    display: none !important;
}
.swiper-button-next::after, .swiper-button-prev::after {
    content: ""!important;
}
.swiper-slide {
    width: 460px!important;
}
.text-wrap-1{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-height: 1.5em;
    max-height: 1.5em;
}
.text-wrap-2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5em;
    max-height: 3em;
}
.text-wrap-3{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.5em;
    max-height: 4.5em;
}
/* Profile */
.btn-back-background{
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 6;
}
.btn-back-background button.btn{
    border: 1px solid #ced4da!important;
}
.img-profile-wrapper{
    margin-bottom: 9rem;
}
.img-profile-wrapper .img-profile{
    position: absolute;
    bottom: -5rem;
}
.btn-profile-background{
    position: absolute;
    z-index: 5;
    bottom: 0;
    right: 1rem;
}
.back-profile{
    height: 20rem;
}
/* Select 2 */
.select2-container{
    display: block!important;
    width: 100%!important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0!important;
    padding: 0!important;
}
.selection{
    display: block!important;
    width: 100%!important;
    padding: 0.2504rem 2.25rem 0.2504rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da!important;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: unset!important;
    padding-right: unset!important;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: unset!important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0!important;
}
.select2-container--default .select2-selection--single {
    border: unset!important;
}
.select2-dropdown {
    border: 1px solid #ced4da!important;
    min-width: 220px;
}
.select2-search--dropdown {
    padding: 0.8rem!important;
    padding-bottom: 0.4rem !important;
    position: relative;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da!important;
    border-radius: 6px!important;
    outline: unset;
    font-size: 14px;
    padding: 0.5rem 1.8rem 0.5rem 0.6rem;
}
.select2-search--dropdown::after{
    content: '';
    background: url('../img/custom/search.svg') no-repeat;
    position: absolute;
    width: 1.1rem;
    height: 1.1rem;
    background-size: contain;
    right: 1.2rem;
    bottom: 1.15rem;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable, .select2-container--default .select2-results__option--selected  {
    background-color: #F6F9FC!important;
    color: unset!important;
}
.select2-results__option {
    -webkit-user-select: none;
    margin: 0.2rem 0.8rem 0.2rem 0rem!important;
    border-radius: 6px!important;
    font-size: 14px!important;
}
.select2-results__option:first-child {
    margin-top: unset!important;
}
.select2-results__option:last-child {
    margin-bottom: unset!important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%!important;
    position: absolute;
    top: 0!important;
    width: 35px!important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: unset!important;
    border-style: unset !important;
    border-width: unset!important;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    background-size: contain;
    width: 13px!important;
    height: 7px!important;
    background: transparent url(../img/custom/caret-down.svg) no-repeat scroll;
}
.select2-container--default.select2-container--disabled .selection{
    background-color: #eee;
    cursor: default;
}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
  width: 5px;
}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
  background: #F8F8F8; 
}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
  background: #C2C2C8; 
}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #afafb4; 
}
.select2-results {
    padding: 0.5rem 1rem 0.8rem 1rem;
}
/* Items */
.img-items{
    height: 60px!important;
    width: 60px!important;
}
/* Select ul */
#count, #province, #city, #neighbourhood {
	cursor: pointer;
	height: 38.21px;
	position: relative;
	width: 150px;
	margin: auto;
    padding: unset;
}

#count span, #province span, #city span, #neighbourhood span {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0.75rem;
}

#count ul, #province ul, #city ul, #neighbourhood ul {
	background-color: #FFFFFF;
	box-shadow: 0 2px 2px rgba(0,0,0,.5);
	display: none;
	height: auto;
	margin-top: 37px;
    padding-left: unset!important;
    position: relative;
    z-index: 1;
    width: inherit;
}

#count li, #province li, #city li, #neighbourhood li {
	background-color: inherit !important;
	border: inherit !important;
	display: block !important;
	float: none !important;
	font-size: inherit !important;
	height: auto !important;
	line-height: inherit !important;
	margin-right: auto !important;
	padding: 2px 0.75rem !important;
	position: inherit !important;
	width: auto !important;
}

#count ul li:hover, #province ul li:hover, #city ul li:hover, #neighbourhood ul li:hover {
	background: #f9f9ff !important;
}
.card-project {
    box-shadow: 0px 0px 12px #EBEBEB;
    border-radius: 8px;

    margin-bottom: 2rem;
}
.card-project .item .item-picture {
    width: 50%!important; height: 180px!important
}
.card-project .item > div {
    position: relative;
}
.card-project .item > div:before {
    content: "";
    position: absolute;
    display: block;
    width: 1px; height: 100%;
    background-color: #DEE3ED;
}
.card-project .item > div:first-child:before {
    display: none;
}
.card-project dt {
    color: #5A5B5D;
    margin-bottom: 1rem;
}
.card-project dd {
    margin-bottom: 2rem;
}
.card-project dd:last-child {margin-bottom: 0;}
.card-project .badge-new {
    padding: .5rem 1.5rem;
    font-size: 1rem;
}

.notif-item-lightblue {
    cursor: pointer;
    background-color: #F6F9FC;
}
.notif-item-lightbluel:hover {
    background-color: #EEEEEE !important;
}
.notif-item-white {
    cursor: pointer;
    background-color: #FFFFFF;
}
.notif-item-white:hover {
    background-color: #EEEEEE !important;
}
.order-stat {
    cursor: pointer;
    background-color: #FFFFFF;
}
.order-stat:hover {
    background-color: #EEEEEE;
}


/* Responsive */
@media (max-width: 991.98px) { 
    .menubar-enabled .main-navbar, .menubar-enabled .wrapper {
        margin-left: unset!important;
    }
    .menubar-enabled .wrapper > .container-fluid {
        margin-top: 1rem!important;
    }
    .main-navbar>div {
        margin: 0;
    }
    .av-circle {
        width: 30px !important;
        height: 30px !important;
        overflow: hidden;
        background-color: white;
        border-radius: 100%;
    }
    .main-navbar .menubar-brand {
        height: 30px;
    }
}
@media (max-width: 767.98px) {
    .dataTables_wrapper .row:last-child>*{
        display: flex;
        justify-self: start!important;
    }
    .dataTables_wrapper .row:last-child>*:last-child{
        margin-top: .5rem;
    }
    .back-profile{
        height: 15rem!important;
    }
    .img-profile-wrapper{
        margin-bottom: 7rem!important;
    }
    .faq .accordion-button {
        padding: 1.35rem 1.25rem;
    }
}
@media (max-width: 575.98px) {
    .fz-sm-16{
        font-size: 16px!important;
    }
    .fz-sm-14{
        font-size: 14px!important;
    }
    .fz-sm-12{
        font-size: 12px!important;
    }
    body{
        font-size: 14px;
    }
    .fs-5{
        font-size: 16px!important;
    }
    .fs-6{
        font-size: 14px!important;
    }
    .fz-14{
        font-size: 12px!important;
    }
    .fz-12{
        font-size: 10px!important;
    }
}