@font-face {
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Bold'), url('../fonts/Gilroy/Gilroy-Bold.otf') format('opentype');
}
@font-face {
    font-family: 'Gilroy-Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Heavy'), url('../fonts/Gilroy/Gilroy-Heavy.otf') format('opentype');
}
@font-face {
    font-family: 'Gilroy-Light';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Light'), url('../fonts/Gilroy/Gilroy-Light.otf') format('opentype');
}
@font-face {
    font-family: 'Gilroy-Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Medium'), url('../fonts/Gilroy/Gilroy-Medium.otf') format('opentype');
}
@font-face {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Regular'), url('../fonts/Gilroy/Gilroy-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Proxima-Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Proxima-Regular'), url('../fonts/ProximaNova/FontsFree-Net-proxima_nova_reg-webfont.ttf') format('truetype');
}
@font-face {
    font-family: 'Proxima-Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('Proxima-Semibold'), url('../fonts/ProximaNova/FontsFree-Net-Proxima-Nova-Sbold.otf') format('opentype');
}
@font-face {
    font-family: 'Proxima-Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Proxima-Bold'), url('../fonts/ProximaNova/FontsFree-Net-proxima_nova_bold-webfont.ttf') format('truetype');
}

html, body {
    height: 100%;
}

body {
    font-family: 'Proxima-Regular', sans-serif!important;
    font-weight: 400;
    font-size: 14px;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    color: #707070;
}
    
.wrapper {
    height: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

.container {
    clear: both;
}
.content-wrapper {
    clear: both;
    /*-webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;*/
    /*-moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;*/
    /*-o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;*/
    /*transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;*/
    margin-left: 280px;
    z-index: 820;
    padding: 10px 40px 25px 40px;
    margin-top: 80px;
    background: #F5F8FA;
    min-height: calc(100% - 135px);
    height: auto;
    margin-bottom: 55px;
}

.main-header {
    max-height: 80px;
    z-index: 1030;
    width: 100%;
    padding: 0px;
    position: fixed;
    background: #F5F8FA;
}
.main-header .search {
    /* float: right; */
    /* height: 60px; */
    padding-right: 1.6rem;
}
.main-header .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    font-size: 20px;
    font-weight: 600;
    line-height: 60px;
    width: 280px;
    padding: 0 20px;
    float: left;
    color: #fff;
    background-color: #f2f2f2;
    text-decoration: none;
    /* border-right: 1px solid #ccc; */
    /* padding-left: 10px;
    position: fixed; */
}

/* .main-header .logo img {
    float: left;
    margin-top: 10px;
} */
.main-header .logo a {
    float: left;
}
.main-header .logo.mini {
    width: 70px;
}
.main-header .logo.mini a span p {
    display: hidden;
}

.content-footer {
    z-index: 1030;
    width: 100%;
    padding: 0px 40px;
    position: fixed;
    background: #F5F8FA;
    margin-left: 280px;
    bottom: 0px;
}
.content-footer .row {
    height: 55px;
    align-items: center;
}
@media (max-width: 991px) {
    .main-header .logo.mini {
    width: 260px;
    }
    .main-header .logo.mini a span p {
    display: block;
    }
}
.main-header .logo.mbl {
    margin-left: 100% !important;
}
@media (min-width: 768px) {
    .main-header .logo.mbl {
    margin-left: 0px !important;
    }
}
/* .main-header .logo img {
    margin-right: 0px;
} */
@media (max-width: 767px) {
    .main-header .logo {
    margin-left: calc(100% - 260px);
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .main-header .logo {
    width: 80px;
    }
    .main-header .logo a span p {
    display: hidden;
    }
}
.main-header .navbar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    /* width: 100%; */
}
.main-header .nav-page {
    padding: 0px 40px;
    line-height: 30px;
    /* display: flow-root; */
    width: fit-content;
    /* float: left; */
    /* z-index: -1; */
}
.main-header .nav-page p {
    margin-bottom: 0px;
}
@media (max-width: 767px) {
    .main-header .nav-page {
        position: absolute;
    }
}
.main-header .toggel-btn {
    position: fixed;
    float: left;
    width: 60px;
    height: 60px;
    font-size: 30px;
    /* padding: 5px; */
    padding: 8px 0px 0px 272px;
    margin-left: calc(100% - 320px);
    display: inline-block;
    cursor: pointer;
    z-index: 100;
}
.main-header .toggel-btn a {
    color: #333;
}
.main-header .toggel-btn .bar1, .main-header .toggel-btn .bar2, .main-header .toggel-btn .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}
.main-header .toggel-btn .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}
.main-header .toggel-btn .bar2 {
    opacity: 0;
}
.main-header .toggel-btn .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}
.main-header .toggel-btn .active {
    margin-left: calc(100% - 60px);
}
.main-header .toggel-btn.mbl {
    margin-left: calc(100% - 60px);
    padding: 8px 0px 0px 0px !important;
}
.main-header .toggel-btn.mbl .bar1, .main-header .toggel-btn.mbl .bar2, .main-header .toggel-btn.mbl .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}
.main-header .toggel-btn.mbl .bar1 {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.main-header .toggel-btn.mbl .bar2 {
    opacity: 1;
}
.main-header .toggel-btn.mbl .bar3 {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
@media (min-width: 768px) {
    .main-header .toggel-btn.mbl {
    margin-left: 0px !important;
    }
}
@media (min-width: 768px) {
    .main-header .toggel-btn {
    display: none;
    }
}
    
.main-header .minimize {
    margin-left: 260px;
    position: fixed;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #fff;
    width: 30px;
    height: 30px;
    background-color: #444444;
    text-align: center;
    padding: 5px 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    /* transition: all 0.1s ease-in-out; */
    position: fixed;
    z-index: 1000;
}
.main-header .minimize.mini {
    margin-left: 80px;
    /* transition: all 0.2s ease-in-out; */
}
@media (max-width: 767px) {
    .main-header .minimize.mini {
    display: none;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .main-header .minimize.mini {
    margin-left: 260px;
    /* transition: all 0.2s ease-in-out; */
    }
}
@media (max-width: 767px) {
    .main-header .minimize {
    display: none;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .main-header .minimize {
    margin-left: 80px;
    /* transition: all 0.2s ease-in-out; */
    }
}
.main-header .navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 60px;
}
    
.main-header .navbar .bell {
    float: left;
    padding-right: 10px;
    color: #B4B4B4;
}
.main-header .float-navbar {
    height: 60px;
}
.main-header .float-navbar .navbar {
    float: right;
}
.main-header .float-navbar .navbar .bell {
    float: left;
    padding-right: 10px;
    color: #B4B4B4;
}
.main-header .float-navbar .navbar-left {
    float: left;
    padding: 5px 10px;
}
.main-header .float-navbar .navbar-left .fitur {
    font-size: 16px;
    margin: 0px;
}
.main-header .float-navbar .navbar-left .subfitur {
    font-size: 12px;
    margin: 0px;
}

.main-sidebar {
    height: calc(100% - 85px);
    width: 280px;
    position: fixed;
    overflow-x: hidden;
    margin-top: 85px;
    z-index: 100;
    top: 0;
    left: 0;
    background: #ffffff;
    /*  transition: all 0.3s ease-in-out; */
}
.main-sidebar.mbl {
    margin-left: 100%;
}
@media (min-width: 768px) {
    .main-sidebar.mbl {
    margin-left: 0px;
    }
}
.main-sidebar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}
.main-sidebar::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}
.main-sidebar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #878787;
}
.main-sidebar ul {
    list-style: none;
    padding: 0px;
    margin-bottom: 0px;
}
.main-sidebar ul .user {
    padding: 10px 10px 5px 20px;
    line-height: 40px;
    min-height: 40px;
    vertical-align: center;
    /*border-bottom: 0.2px solid grey;*/
    /* border-top: 0.2px solid grey; */
    background-color: #E0E0E0;
    margin-bottom: 1px;
}
.main-sidebar ul .user img {
    float: left;
}
.main-sidebar ul .user span {
    float: right;
}
.main-sidebar ul .user .name {
    line-height: 72%;
    /* float: left; */
    padding-left: 0px;
    padding-top: 3px;
    display: flex;
    align-items: center;
}

.margin-p-sidebar{
    margin-bottom: 0px;
    margin-left: 10px;
}

.main-sidebar ul .user .pull-right-container {
    float: right;
    /*padding-right: 20px;*/
}
.main-sidebar ul .user .pull-right-container .active {
    transform: rotate(90deg);
}
.main-sidebar ul li {
    line-height: 30px;
}
.main-sidebar ul li a {
    padding: 15px 10px 15px 22px;
    width: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 100%;
}
.main-sidebar ul li a .side-img {
    width: 11%;
    display: flex;
    justify-content: center;
    margin-right: 1rem;
}
.main-sidebar ul li a .side-text {
    width: 89%;
}
.main-sidebar ul li a .side-text .sidebar-menu-text {
    margin-bottom: 0px;
    font-family: 'Gilroy-Regular', sans-serif!important;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 17px;
    color: #252525;
}
.main-sidebar ul li a span {
    padding-left: 10px;
}
.main-sidebar ul li a .pull-right-container {
    float: right;
    padding-right: 20px;
}
.main-sidebar ul li a:hover {
    background-color: rgba(196, 196, 196, 0.2);
    text-decoration: none;
}
.main-sidebar ul li .active {
    border-left: 4px solid #002060;
    padding: 15px 10px 15px 16px;
}
.main-sidebar ul li a.active .side-text .sidebar-menu-text {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 110.34%;
    color: #252525;
}

.main-sidebar ul li .active-sub {
    border-left: 4px solid #fff;
    /*padding: 12px 5px 12px 16px;*/
}

.main-sidebar ul li ul {
    display: none;
}
.main-sidebar ul li ul li a {
    padding-left: 65px;
}
.main-sidebar ul li ul li a .submenu-active {
    background-color: rgba(196, 196, 196, 0.5);
}
.main-sidebar .menu-sidebar:last-child {
    margin-bottom: 100px;
}
.main-sidebar.mini {
    width: 70px;
    margin-top: 0px!important;
    /* transition: all 0.1s ease-in-out; */
}
.main-sidebar.mini ul li span {
    display: none;
}
.main-sidebar.mini ul .name {
    display: none;
}
.main-sidebar.mini ul ul li a {
    display: none;
}
@media (max-width: 767px) {
    .main-sidebar.mini {
    width: 260px;
    /* transition: all 0.2s ease-in-out; */
    }
    .main-sidebar.mini ul li span {
    display: block;
    }
    .main-sidebar.mini ul .name {
    display: block;
    }
    .main-sidebar.mini ul ul li a {
    display: block;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .main-sidebar.mini {
    width: 260px;
    /* transition: all 0.2s ease-in-out; */
    }
    .main-sidebar.mini ul li span {
    display: -webkit-inline-box;
    }
    .main-sidebar.mini ul .name {
    display: block;
    }
    .main-sidebar.mini ul ul li a {
    display: block;
    }
}
@media (max-width: 767px) {
    .main-sidebar {
    margin-left: calc(100% - 260px);
    /* transition: none; */
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .main-sidebar {
    width: 80px;
    /* transition: all 0.2s ease-in-out; */
    }
    .main-sidebar ul li span {
    display: none;
    }
    .main-sidebar ul .name {
    display: none;
    }
    .main-sidebar ul ul li a {
    display: none;
    }
}

.content-wrapper.mini {
    margin-left: 70px;
    /* transition: all 0.2s ease-in-out; */
}
.content-footer.mini {
    margin-left: 70px;
    /* transition: all 0.2s ease-in-out; */
}
@media (max-width: 991px) {
    .content-wrapper.mini {
    margin-left: 0px;
    }
}
@media (max-width: 767px) {
    .content-wrapper.mini {
    margin-left: 0px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .content-wrapper {
    margin-left: 80px;
    }
}
@media (max-width: 767px) {
    .content-wrapper {
    margin-left: 0px;
    }
}
    
.notif {
    width: 100%;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #333;
}
.notif .notif-content {
    float: initial;
    margin: 0px;
    padding-right: 15px;
}
.notif .notif-content p {
    margin-bottom: 0px;
}
.notif .close-btn-notif {
    float: right;
}

.notif-icon-offset {
    width: 22px;
    height: 22px;
    background-color: red;
    border-radius: 50%;
    font-size: 10px;
    line-height: 22px;
    text-align: center;
    margin-top: -30px;
    margin-bottom: 10px;
    margin-left: -10px;
}

.notif-icon {
    font-size: 20px;
    float: left;
    margin-right: 10px;
}


/* Card Table */
.card-content-wrapper {
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 16px;
    border: none;
}
.card-content-wrapper .card-body {
    padding: 0px 0px 2rem 0px;
}
.card-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 18px 1rem 18px;
}
.card-content-header .card-content-title {
    font-family: 'Gilroy-Regular', sans-serif!important;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 120%;
    color: #252525;
}
.card-content-header .button-add-table {
    background: #002060;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 8px;
    font-family: 'Gilroy-Regular', sans-serif!important;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 150%;
    color: #FFFFFF;
    padding: 11px 16px;
    text-decoration: none;
}
.card-content-header .button-checkin-table {
    background: #00d9d5;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 8px;
    font-family: 'Gilroy-Regular', sans-serif!important;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 150%;
    color: #FFFFFF;
    padding: 11px 16px;
    text-decoration: none;
}
.card-content-header .button-batal-table {
    background: #FF4447;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 8px;
    font-family: 'Gilroy-Regular', sans-serif!important;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 150%;
    color: #FFFFFF;
    padding: 11px 16px;
    text-decoration: none;
}
.card-content-header .button-lunas-table {
    background: #00D9D5;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 8px;
    font-family: 'Gilroy-Regular', sans-serif!important;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 150%;
    color: #FFFFFF;
    padding: 11px 16px;
    text-decoration: none;
}
.card-content-header .button-hasil-table {
    background: #00D9D5;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 8px;
    font-family: 'Gilroy-Regular', sans-serif!important;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 150%;
    color: #ffffff;
    padding: 11px 16px;
    text-decoration: none;
}
.card-content-header .button-hasil-table:focus, .card-content-header .button-hasil-table:active {
    outline: none;
}
.card-content-header .button-kwitansi-table {
    background: #002060;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 8px;
    font-family: 'Gilroy-Regular', sans-serif!important;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 150%;
    color: #ffffff;
    padding: 13px;
    text-decoration: none;
}
.card-content-header.border-bottom {
    border-bottom: 1px solid #EBEBEB;
    padding: 2rem 18px 1.7rem 18px;
}
.card-content-body {
    margin: 1rem 0px;
}
.card-content-padding {
    padding: 2rem 18px 1rem 18px;
}

/* Card Add */
.card-content-add-wrapper {
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 16px;
    border: none;
}
.card-content-add-wrapper .card-body {
    padding: 2rem 18px;
}
.card-content-add-wrapper .card-content-title {
    font-family: 'Gilroy-Regular', sans-serif!important;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 120%;
    color: #252525;
}
.card-content-add-wrapper .card-footer {
    border-radius: 0px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    background: #DEDEDE;
    height: 55px;
    display: flex;
    align-items: center;
}
.card-content-add-wrapper .card-footer p {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.05em;
    color: #6A6A6A;
    margin: auto;
}
.card-content-add-wrapper .card-footer.red {
    border-radius: 0px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    background: #FF4447;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.card-content-add-wrapper .card-footer.red p {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.05em;
    color: #ffffffc2;
    margin: auto 0px;
}
.card-content-add-wrapper .card-footer.red p span {
    color: #ffffff;
    margin-left: 35px;
}
.card-content-add-wrapper .card-footer.blue {
    border-radius: 0px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    background: #00D9D5;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.card-content-add-wrapper .card-footer.blue p {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.05em;
    color: #ffffffc2;
    margin: auto 0px;
}
.card-content-add-wrapper .card-footer.blue p span {
    color: #ffffff;
    margin-left: 35px;
}


/* Form CSS */
.form-silk .form-group {
    margin-bottom: 2.8rem;
}
.form-silk .form-group.login-password {
    margin-bottom: 2.8rem;
}
.form-silk .label-form {
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    color: #002060;
    margin-bottom: 1rem;
}
.form-silk .label-form.small {
    margin-top: 40px;
    margin-bottom: .5rem;
}
.form-silk .label-form.big {
    font-size: 24px;
}
.form-silk .form-group .with-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.6rem;
}
.form-silk .form-group .with-link label {
    margin-bottom: 0px;
}
.form-silk .form-group .with-link a {
    margin-right: 1rem;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 130%;
    color: #597393;
    text-decoration: none;
}
.form-silk .form-group .with-icon {
    position: relative;
}
.form-silk .form-group .with-icon img {
    position: absolute;
    right: 22px;
    top: 18px;
}
.form-silk .form-group .with-date-modal {
    position: relative;
}
.form-silk .form-group .with-date-modal img {
    position: absolute;
    right: 16px;
    top: 14px;
}
.form-silk .form-control {
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 8px;
    border: none;
    height: 50px;
    padding: .375rem 1.1rem;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 120%;
    color: #252525;
}
.btn-pemeriksaan-param {
    border: none;
    background: #002060;
    box-shadow: 0px 8px 16px rgba(0, 32, 96, 0.36);
    border-radius: 8px;
    height: 50px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
}
.btn-pemeriksaan-param:hover {
    color: rgba(255, 255, 255, 0.8);
    background: #002060fa;
}
.btn-pemeriksaan-param i {
    font-size: 22px;
    margin-right: 14px;
    margin-bottom: 3px;
}
.btn-pemeriksaan-param p {
    margin-bottom: 0px;
}
.form-silk textarea.form-control {
    height: auto;
    padding: .7rem 1.1rem;
}
.form-silk .form-control::-webkit-input-placeholder {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #5F5F5F;
}
.form-silk .form-control:-ms-input-placeholder {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #5F5F5F;
}
.form-silk .form-control::placeholder {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #5F5F5F;
}
.form-silk .form-control.readonly {
    background: #DEDEDE;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 8px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 120%;
    color: #252525;
}
.form-silk .custom-file {
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 8px;
    border: none;
    height: 50px;
    padding: .375rem 1.1rem;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #252525;
}
.form-silk .custom-file .custom-file-label {
    margin-bottom: 0px;
    border: none;
    height: 50px;
    display: flex;
    align-items: center;
}
.form-silk .custom-file .custom-file-label::after {
    color: #fff;
    background-color: #fff;
    content: "";
    background-image: url('../image/icon/icon-upload.svg');
    background-repeat: no-repeat;
    top: 12px;
    right: 17px;
}

.custom-file-multiple {
    position: relative;
    display: inline-block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    margin-bottom: 0;
}
.form-silk .custom-file-multiple {
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 8px;
    border: none;
    height: 200px;
    width: 172px;
    /* padding: .375rem 1.1rem; */
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #252525;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.form-silk .custom-file-multiple .custom-file-label {
    background: transparent;
    margin-bottom: 0px;
    border: none;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: .375rem .35rem;
}
.form-silk .custom-file-multiple .custom-file-label::after {
    /* color: #fff; */
    background-color: transparent;
    content: "";
    display: none;
    /* background-image: url('../image/icon/icon-upload.svg');
    background-repeat: no-repeat;
    top: 12px;
    right: 17px; */
}
.form-silk .custom-file-multiple .custom-file-label button {
    border: none;
    border-radius: 4px;
    color: grey;
    padding: 4px 9px;
}
.form-silk .custom-file-multiple .custom-file-input {
    background: transparent;
    height: calc(100% - 40px);
    margin-top: 40px;
}
.form-silk .custom-file-multiple span {
    position: absolute;
    top: 80px;
    left: 67px;
}
.form-silk .custom-file-multiple span i {
    font-size: 35px;
    opacity: .4;
}
.form-silk table .form-search {
    height: 30px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #BEBEBE;
    border-radius: 4px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 13px;
    color: #6A6A6A;
}
.form-silk table .select-filter select.form-search {
    padding: 0px 0px 0px 8px;
}
.form-silk table thead tr:last-child .input-filter {
    position: relative;
}
.form-silk table thead tr:last-child .input-filter::before {
    content: url('../image/icon-search-small.svg');
    position: absolute;
    top: 16px;
    left: 27px;
    width: 12px;
    height: 12px;
}
.form-silk table .input-filter input.form-search {
    padding: 0px 0px 0px 30px;
}
.form-silk .form-qty {
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 8px;
    height: 36px;
    text-align: center;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 14px;
    color: #252525;
    width: 60px;
}
.form-silk .form-qty:focus, .form-silk .form-qty:active {
    outline: none;
}
.form-silk .label-qty {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    color: #002060;
    margin-bottom: 0px;
    margin-top: 7px;
}
.form-silk .label-qty-grey {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -0.02em;
    color: #6A6A6A;
    margin-top: 8px;
}
.form-silk .form-qty-right {
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 8px;
    height: 36px;
    text-align: right;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 14px;
    color: #252525;
    padding: 1px 10px;
}
.form-silk .form-qty-right:focus, .form-silk .form-qty-right:active {
    outline: none;
}
.form-silk .summernote-modal .note-editor.note-frame {
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 8px !important;
}
.form-silk .summernote-modal .note-toolbar {
    border-bottom: none;
}
.form-silk .summernote-modal .note-editor.note-frame .note-editing-area .note-editable {
    padding: 10px 14px;
}
.form-silk .summernote-modal .note-editor.note-frame .note-placeholder {
    padding: 10px 14px;
}
.form-silk .summernote-modal .note-editor.note-frame .note-statusbar {
    border-top: none;
}

.select2-container {
    width: 100% !important;
}
.select2-container--default .select2-selection--single {
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 8px;
    border: none;
    height: 50px;
    padding: .375rem 1.1rem;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 120%;
    color: #252525;
    border: none;
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px;
    right: 15px;
}
.select2-dropdown {
    border: none;
}
.select2-results__option, .select2-search--dropdown {
    padding: .375rem 1.1rem;
}
.select2-container--default .select2-selection--multiple {
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 8px;
    border: none;
    min-height: 50px;
    padding: .375rem 1.1rem;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 120%;
    color: #252525;
    display: flex;
    align-items: center;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #B0F7FF;
    border-radius: 100px;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 12px;
    color: #047487;
    border: none;
    height: 24px;
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 0px 10px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #FF6567;
    font-size: 26px;
    margin-top: 2px;
    margin-right: 8px;
}


.select2-for-param-paket span.select2-container {
    width: 90% !important;
}


.modal-select2 .select2 {
    width: 100% !important;
}

.btn-blue {
    background: #002060;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    color: #FFFFFF;
}
.btn-blue:hover {
    background: #002060f3;
    color: #fffffff6;
}
.btn-blue-outline {
    border: 1px solid #002060;
    filter: drop-shadow(0px 20px 50px rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    color: #002060;
}
.btn-blue-add {
    background: #002060;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    color: #FFFFFF;
    /* margin-top: 44px; */
}
.btn-blue-add:hover {
    background: #002060f3;
    color: #fffffff6;
}
.btn-red-remove {
    background: #DF0E2C;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    color: #FFFFFF;
}
.btn-red-remove:hover {
    background: #df0e2def;
    color: #fffffff6;
}
.btn-blue-form {
    background: #002060;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 150%;
    color: #FFFFFF;
    /* margin-top: 44px; */
    padding: .4rem 1.7rem;
}
.btn-blue-form:hover {
    background: #002060f3;
    color: #fffffff6;
}
.btn-green-form {
    background: #04D900;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 150%;
    color: #FFFFFF;
    /* margin-top: 44px; */
    padding: .4rem 1.7rem;
}
.btn-green-form:hover {
    background: #04d900f3;
    color: #fffffff6;
}
.btn-reset-form {
    background: transparent;
    border-radius: 8px;
    border: 1px solid #BEBEBE;
    filter: drop-shadow(0px 20px 50px rgba(0, 0, 0, 0.1));
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 150%;
    color: #BEBEBE;
    padding: .4rem 1.7rem;
}
.btn-reset-form:hover {
    background: #DEDEDE;
    color: #6A6A6A;
}


/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
    /* width: 230px; */
}
.sidebar-collapsed {
    width: 60px;
}

/* Menu item*/
#sidebar-container .list-group a {
    height: 50px;
    font-family: 'Gilroy-Regular', sans-serif!important;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 110.34%;
    color: #252525;
    border-radius: 0px !important;
    border: 0px;
    display: flex;
    align-items: center;
    padding: .75rem 24px;
}
#sidebar-container .list-group a.active {
    border-right: 4px solid #002060;
    padding-right: 20px;
    background: #F6F7FC;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 110.34%;
    color: #252525;
}
#sidebar-container .list-group a.bold {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    color: #252525;
}
#sidebar-container .list-group a .sidebar-img {
    width: 22px;
    height: auto;
    margin-right: .8rem;
}
/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
    height: 45px;
    padding-left: 60px;
}
.sidebar-submenu {
    font-size: 0.9rem;
}

/* Separators */
.sidebar-separator-title {
    background-color: #333;
    height: 35px;
}
.sidebar-separator {
    background-color: #333;
    height: 25px;
}
.logo-separator {
    background-color: #333;    
    height: 60px;
}

/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
    content: "";
    /* font-family: "Font Awesome 5 Free"; */
    background-image: url('../image/icon/icon-chevron-down.svg');
    background-repeat: no-repeat;
    display: inline;
    text-align: right;
    padding-left: 10px;
    padding-left: 18px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
    content: "";
    /* font-family: "Font Awesome 5 Free"; */
    background-image: url('../image/icon/icon-chevron-down.svg');
    background-repeat: no-repeat;
    display: inline;
    text-align: right;
    padding-left: 10px;
    padding-left: 18px;
}

#sidebar-container .profile-dropdown {
    padding: .75rem 24px;
}
#sidebar-container .profile-access i {
    font-size: 17px;
}

.parameter-keterangan {
    padding: 1rem 1rem 0px 1rem;
}
.parameter-keterangan p {
    margin-bottom: 0px;
}
.dataTables_wrapper .dataTables_scroll .dataTables_scrollHead {
    margin-top: 1rem;
    border: none;
    /* overflow: visible !important; */
}
.dataTables_wrapper .dataTables_scroll .dataTables_scrollHead .dataTables_scrollHeadInner table thead tr th {
    border: none;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 130%;
    color: #BDBDBD;
    /* padding: 10px 28px; */
}
.dataTables_wrapper .dataTables_scroll .dataTables_scrollHead .dataTables_scrollHeadInner table thead tr th:first-child {
    /* padding-left: 3rem; */
}
.dataTables_wrapper .dataTables_scroll .dataTables_scrollHead .dataTables_scrollHeadInner table thead tr th:last-child {
    /* padding-right: 3rem; */
}

.dataTables_wrapper .dataTables_scroll .dataTables_scrollBody {
    border: none;
    overflow: unset !important;
}
.dataTables_wrapper .dataTables_scroll .dataTables_scrollBody table tbody tr.odd {
    background: #EDFCF3;
}
.dataTables_wrapper .dataTables_scroll .dataTables_scrollBody table tbody tr td {
    border: none;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 130%;
    color: #252525;
    padding: 10px 18px;
}
.dataTables_wrapper .dataTables_scroll .dataTables_scrollBody table tbody tr td:first-child {
    /* padding-left: 3rem; */
}
.dataTables_wrapper .dataTables_scroll .dataTables_scrollBody table tbody tr td:last-child {
    /* padding-right: 3rem; */
}

.dataTables_wrapper .dataTables_paginate .pagination {
    margin-top: 1rem;
    margin-right: 1rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    margin-left: 0px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled a {
    color: #F3F2F7 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #fff;
    border-radius: 5px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button a {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    color: #828282;
    text-decoration: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #002060;
    color: #FFFFFF !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button a:hover {
    color: #FFFFFF;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background: #002060;
    color: #FFFFFF;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.active {
    background: #002060;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.active a {
    color: #FFFFFF;
}
.dataTables_wrapper .dataTables_paginate .paginate_button a:active {
    color: #FFFFFF;
}


.btn-table-action {
    color: #BDBDBD;
}
.btn-table-action:hover {
    color: #b4b4b4;
}
.table-action-dropdown.dropleft button::before {
    display: none;
}
.table-action-dropdown .dropdown-menu {
    background: #FFFFFF;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    border: none;
}
.table-action-dropdown .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    padding: .3rem .6rem;
}
.table-action-dropdown .dropdown-menu .dropdown-item img {
    margin-right: 1rem;
}
.table-action-dropdown .dropdown-menu .dropdown-item p {
    margin-bottom: 0px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 130%;
    color: #252525;
}

.dataTables_wrapper .dataTables_filter {
    padding-right: 18px;
}

span.badge-blue {
    background-color: #2EAADF;
    color: #E8F7EE;
    font-size: 13px;
    border-radius: 5px;
    width: 80px;
    padding: 4px 10px;
}
span.badge-grey {
    background-color: #BDBDBD;
    color: #E8F7EE;
    font-size: 13px;
    border-radius: 5px;
    width: 80px;
    padding: 4px 10px;
}


table.table-modal {
    border-bottom: 0px !important;
}
table.table-modal thead tr th {
    border-bottom: 0px;
}
table.table-modal tbody tr.odd {
    background: #EDFCF3;
}

.sampling-status {
    padding: .5rem 1rem;
    border-radius: 16px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 120%;
    color: #fff;
    text-align: center;
    width: 130px;
}
.sampling-status.red {
    background: #FF6567;
}
.sampling-status.grey {
    background: #C4C8DC;
}
.sampling-status.green {
    background: #33E894;
}
.sampling-status.greenOld {
    background: #00A3A0;
}


.table-with-filter thead tr.for-filter .input-filter {
    position: relative;
}
/* .table-with-filter thead tr.for-filter .input-filter::before {
    content: url('../image/icon-search-small.svg');
    position: absolute;
    top: 18px;
    left: 27px;
    width: 12px;
    height: 12px;
} */
.table-with-filter .input-filter input.form-search {
    padding: 0px 0px 0px 8px;
}
.table-with-filter .form-search {
    height: 30px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #BEBEBE;
    border-radius: 4px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 13px;
    color: #6A6A6A;
}
.table-with-filter .select-filter select.form-search {
    padding: 0px 0px 0px 8px;
}

.table-with-filter .form-input-table-hasil {
    height: 30px;
    min-width: 250px;
    background: #FFFFFF;
    border: 1px solid #BEBEBE;
    border-radius: 4px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 13px;
    color: #6A6A6A;
    padding: 3px 10px;
}
.table-with-filter .button-input-table-hasil {
    height: 22px;
    width: 22px;
    background: #03a200;
    border: none;
    border-radius: 50%;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 13px;
    fill: #FFFFFF;
    margin-left: 10px;
}


#tableTransaksi tr.for-filter .input-filter::before, #tablePemeriksaan tr.for-filter .input-filter::before {
    display: none !important;
}
#tableDokter_wrapper.dataTables_wrapper .dataTables_scroll .dataTables_scrollBody, #tableTransaksi_wrapper.dataTables_wrapper .dataTables_scroll .dataTables_scrollBody, #tablePemeriksaan_wrapper.dataTables_wrapper .dataTables_scroll .dataTables_scrollBody {
    overflow: auto !important;
}
#tableTransaksi.table-with-filter thead tr th, #tablePemeriksaan.table-with-filter thead tr th {
    border: none;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 130%;
    color: #BDBDBD;
    padding: 0px 18px !important;
}


table.format-table.table td {
    border-top: none;
}
table.format-table.table.table-bordered td {
    border: 1px solid #dee2e6;
}

table.format-table.table td p {
    margin-bottom: 0px;
}


#tableDetailPemeriksaan input {
    width: 100%;
    height: 36px;
    border: 1px solid #dee2e6;
}
#tableDetailPemeriksaan tr td {
    vertical-align: middle;
    padding: 12px 10px !important;
}

#tableDetailPemeriksaanSismex input {
    width: 100%;
    height: 36px;
    border: 1px solid #dee2e6;
}
#tableDetailPemeriksaanSismex tr td {
    vertical-align: middle;
    padding: 12px 10px !important;
}

.check{
    width: 43% !important;
    height: 15px !important;
    margin-top: 3px;
    margin-left: 16px;
}

.check-disabled{
    width: 43% !important;
    height: 15px !important;
    margin-top: 3px;
    margin-left: 16px;
}

#checkAll{
    width: 43% !important;
    height: 15px !important;
    margin-top: 3px;
    margin-left: 16px;
}

#replaceTemplateHasil table {
    width: 100% !important;
}
.swal2-title {
    font-size: 1.3em;
}

.logo-form{
    width: 40%;
    height: auto;
    margin-right: 45px;
}

.note-insert{
    display: none !important;
}

.label-check {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-style: normal;
    font-weight: bold;
}
.label-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checklimit {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: white;
    border-radius: 3px;
    border: 1px solid black;
}
.label-check:hover input ~ .checklimit {
    background-color: white;
}
.label-check input:checked ~ .checklimit {
    background-color: #2196F3;
}
.checklimit:after {
    content: "";
    position: absolute;
    display: none;
}
.label-check input:checked ~ .checklimit:after {
    display: block;
}
.label-check .checklimit:after {
    left: 6px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 7px;
}
.check-custom-tree {
    margin: 20px 0px 20px 34px;
}


.custome-radio {
    display: block;
    position: relative;
    width: 40px;
    margin: 0px auto;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

  /* Hide the browser's default radio button */
.custome-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    top: 2px;
    left: 1px;
    z-index: 10;
    width: 18px;
    height: 17px;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    /*background-color: white;*/
    border: 1px solid grey;
    border-radius: 50%;
}

  /* On mouse-over, add a grey background color */
.custome-radio:hover input ~ .checkmark {
    background-color: white;
}

  /* When the radio button is checked, add a blue background */
.custome-radio input:checked ~ .checkmark {
    background-color: white;
}

  /* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

  /* Show the indicator (dot/circle) when checked */
.custome-radio input:checked ~ .checkmark:after {
    display: block;
}

  /* Style the indicator (dot/circle) */
.custome-radio .checkmark:after {
    top: 4px;
	left: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #2795F8;
}

.custome-radio input:disabled ~ .checkmark {
    background-color : #ccc;
}

.table-limit-nominal{
    margin-top: 30px;
}

.table-limit-nominal thead th{
    border: none;
    padding-left: 0px;
}

.table-limit-nominal td{
    border: none;
    padding-left: 0px;
}

.img-limit{
    width: 20px;
    height: 20px;
}

.p-rupiah{
    text-align: right;
}

.nav-main{
    padding-left: 0px;
}

.radio-limit{
    background-color: white;
}

.table-nominal{
    border:none !important;
}

.konten-ayat{
    direction:rtl;
    unicode-bidi:bidi-override;
}

.note-btn {
    min-width: 0px!important;
    padding: .25rem .5rem!important;
}
.note-editor.note-frame {
    /* border: none!important; */
    border-radius: 0px !important;
    padding: 0px !important;
}

.active-step-activation-card {
    cursor: not-allowed;
    filter: grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(1);
}

.deactive-step-activation-card{
    cursor: pointer;
}

.deactive-step-activation-card:hover{
    filter: grayscale(100%) brightness(153%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(1);
}

.img-check-activate-card {
    position: absolute;
    z-index: 100;
}

.custom-width-biller{
    width: 131px;
}
.custom-dropdown {
    top: -6px;
    padding: 0px 0px 0px 30px;
}
.custom-dropdown-menu {
    margin-top: 20px;
    background: #FFFFFF;
    box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.07);
    border-radius: 6px;
    border: none;
}
.custom-height-denom {
    height: 45px;
}
.custom-font-volume-transaksi {
    font-size: 25px;
}
ul.thumbnails.image_picker_selector li .thumbnail.selected {
    background: #5badd6;
    width: 215px!important;
}
ul.thumbnails.image_picker_selector li .thumbnail {
    padding: 6px;
    border: 1px solid #DDD;
    width: 215px!important;
}
.upload-img-ayat {
    width: 200px;
}
.box-preview-warna {
    border: 1px solid black;
    width: 100px;
    height: 50px;
}
.box-warna {
    border: 1px solid black;
    width: 100px;
    height: 50px;
}
.file-upload-edit{
	position: relative;
}
.file-upload-edit .form-control-file-edit{
	display: none;
}
.file-upload-edit label{
	font-size: 16px;
	line-height: 44px;
	color: #d6d6d6;
	width: 100%;
	position: relative;
	cursor: pointer;
	background-color: gray;
	border-radius: 5px;
	display: block;
	height: 44px;
	margin: 0;
	overflow: hidden;
	padding: 0 20px 0 120px;
}
.file-upload-edit label:before{
	content: 'UPLOAD';
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	text-align: center;
	background-color: #000;
	color: #fff;
}

.file-upload{
	position: relative;
}
.file-upload .form-control-file{
	display: none;
}
.file-upload label{
	font-size: 16px;
	line-height: 44px;
	color: #d6d6d6;
	width: 100%;
	position: relative;
	cursor: pointer;
	background-color: gray;
	border-radius: 5px;
	display: block;
	height: 44px;
	margin: 0;
	overflow: hidden;
	padding: 0 20px 0 120px;
}
.file-upload label:before{
	content: 'UPLOAD';
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	text-align: center;
	background-color: #000;
	color: #fff;
}

.info-blokir {
    padding: 20px;
    background-color: #f44336;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
}

.info-blokir.aktif{
    background-color: #2196F3;
}

.info-blokir.nonAktif{
    background-color: #ff9800;
}

.info-blokir.accept{
    background-color: #28c528;
}

.info-blokir.pending{
    background-color: #9ea6ad;
}

.pass-weak{
    margin-top: 5px;
    padding: 4px;
    background-color: #f44336;
    color: white;
}

.pass-medium{
    margin-top: 5px;
    padding: 4px;
    background-color: #ff9800;
    color: white;
}

.pass-strong{
    margin-top: 5px;
    padding: 4px;
    background-color: #28c528;
    color: white;
}

.black-hr{
    border-top: 2px solid rgba(0, 0, 0, 0.75) !important;
}

.box-refferal {
    border: 2px solid black;
    width: 200px;
    height: 80px;
}

.line-vertical-refferal {
    border-left: 2px solid black;
    height: 100px;
    position: absolute;
    left: 50%;
    margin-left: -3px;
    top: 0;
}

.custom-height-refferal {
    height: 100px;
}

.pull-right {
    float: right!important;
    color: #909090!important;
    text-decoration: none!important;
    border: none!important;
}

.height-activation-card {
    min-height: 400px;
}

.img-line-activate-card {
    margin-left: 25px;
    height: 220px;
    position: absolute;
    top: -1%;
    z-index: 10;
}

.p-custom-activate-card {
    margin-top: 13px;
    margin-left: 5px;
}

.bg-change-owner {
    position: absolute;
    left: -40px;
}

.bg-link-card {
    position: absolute;
    left: -40px;
    margin-top: 50px;
}

.bg-activate-card {
    position: absolute;
    left: -40px;
    margin-top: 140px;
}

.bg-setujui {
    position: absolute!important;
    left: -40px;
    margin-top: 195px!important;
}

.bg-proses {
    position: absolute!important;
    left: -40px;
    margin-top: 80px!important;
}

.custom-p-eform {
    margin-bottom: 0px!important;
}
.bg-pengajuan {
    position: absolute!important;
    left: -40px;
}

.bg-line-eform-detail {
    background-image: url(/image/icon/progressLine.svg);
    background-position: left 10px;
    background-repeat: no-repeat;
    margin-bottom: 200px;
    position: relative;
}

.margin-left-20 {
    margin-left: 20px;
}
.margin-top-10 {
    margin-top: 10px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-150 {
    margin-top: 150px !important;
}

.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}

.tbl-custom-margin {
    width:100%!important;
    margin-right: 20px!important;
}
.fitur-custom-input {
    width: 93%!important;
    float: left;
}

.fitur-custom-input-biller {
    width: 85%!important;
    float: left;
}

.img-custom-ktp {
    width: 100px;
    height: 100px;
}

.margin-right-custom-font {
    margin-right: 20px;
    font-size: 12px;
}
.img-input-custom {
    /* width: 201px;
    height: 116px; */
    width: 100%;
}
.img-input-custom-notif {
    width: 100%;
}
.fitur-custom {
    color:#6F6F6F;
}
.img-custom-navbar {
    margin-top:20px!important;
    margin-left: 5px;
}
.margin-left-10 {
    margin-left: 10px;
}
.width-100 {
    width:100%!important;
}
.btn-hapus-modal {
    background: #D40F0F;
    color: white;
    border-radius: 5px;
}
.btn-reject-modal {
    background: #F44C4F;
    color: white;
    border-radius: 5px;
}
.btn-submit-modal {
    background: #2699FF;
    color: white;
    border-radius: 5px;
}
.btn-close-modal {
    background: #ffffff;
    border: 1px solid #EBEDF1;
    box-sizing: border-box;
    border-radius: 5px;
}
.modal-title-color {
    color: #3F4046;
}
.margin-left-20 {
    margin-left: 20px;
}
.margin-right-20 {
    margin-right: 20px;
}

.note-popover{
    z-index: 0 !important;
}

/* .note-insert{
    display: none !important;
} */

.unit-simulator {
    position: absolute;
    right: 30px;
    top: 15px;
}
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*Label*/
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.label-primary {
    background-color: #337ab7;
}
.label-danger {
    background-color: #d9534f;
}
/* Tabs*/

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    /*color: #f3f3f3;*/
    background-color: transparent;
    border-bottom: 2px solid #2699FF !important;
    /*font-size: 20px;*/
    font-weight: bold;
    color: #6F6F6F;
    pointer-events: none;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.border-green.active {
    border-bottom: 2px solid #27AE60 !important;
}

.nav-tabs .nav-link {
    border: 0px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #B5B5B5;
    /*font-size: 20px;*/
}

.image-upload > input {
    display: none;
}
.right {
    float: right;
}
.left {
    float: right;
}
.btn-transparent{
    background: transparent !important;
    padding: 0px !important;
    margin: 0px !important;
}

.btn-blockpermanen{
    background-color: #535353;
    color: #ffffff;
    border: 1px solid #EBEDF1;
}

.btn-blockpermanen:hover,
.btn-blockpermanen:focus,
.btn-blockpermanen:active,
.btn-blockpermanen.active {
  color: #ffffff;
  background-color: #6D6D6D;
  border-color: #e5e5e5;
}

.btn-back{
    background-color: #FFFFFF;
    color: #212428;
    border: 1px solid #EBEDF1;
}

.sub-role{
    margin-left: 17px;
}

.p-sub{
    margin-left: 17px;
    margin-bottom: 0px !important;
}

.btn-back:hover,
.btn-back:focus,
.btn-back:active,
.btn-back.active {
  color: #212428;
  background-color: #E6E6E6;
  border-color: #e5e5e5;
}

.btn-min{
    background: #C5C5C5;
    color: #ffffff;
    border-radius: 5px;
    min-width: 50px!important;
    margin-top: 10px!important;
}

.btn-min:hover,
.btn-min:focus,
.btn-min:active,
.btn-min.active {
  color: #ffffff;
  background-color: #ACACAC;
  border-color: #e5e5e5;
}

.btn-plus{
    background: #535353;
    color: #ffffff;
    border-radius: 5px;
    min-width: 50px!important;
    margin-top: 10px!important;
}

.btn-plus:hover,
.btn-plus:focus,
.btn-plus:active,
.btn-plus.active {
  color: #ffffff;
  background-color: #868686;
  border-color: #e5e5e5;
}

.btn-upload{
    background: #535353;
    color: #ffffff;
    border-radius: 5px;
}

.btn-upload:hover,
.btn-upload:focus,
.btn-upload:active,
.btn-upload.active {
  color: #ffffff;
  background-color: #868686;
  border-color: #e5e5e5;
}

.btn-export{
    background: #ffffff;
    color: #A8ABC1;
    border-radius: 5px;
}

.btn-export:hover,
.btn-export:focus,
.btn-export:active,
.btn-export.active {
  color: #8F92A8;
  background-color: #E6E6E6;
  border-color: #e5e5e5;
}
.bg-logo {
    background-color: #fefffe!important;
}
.btn-danger{
    background: #D40F0F;
    color: white;
    border-radius: 5px;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
  color: #fff;
  background-color: #f02b2b;
  border-color: #f66060;
}

.btn-primary{
    background: #2699FF;
    color: white;
    border-radius: 5px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  color: #fff;
  background-color: #51adff;
  border-color: #1e95ff;
}

.dot {
  height: 7px;
  width: 7px;
  background-color: #00D9D5;;
  border-radius: 50%;
  display: inline-block;
}

.footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #d2d2d2;
  color: white;
  text-align: center;
}

.font-color-p {
    color: #b3b5b7;
}

.mini #menu-toggle {
    margin-left: 5px!important;
}

.table-onboarding th {
    border:none!important;
    border-collapse: collapse;
}

.table-onboarding td {
    border:none!important;
    border-collapse: collapse;
    width: 100%;
}

.table-pertanyaan {
    border:none!important;
    width: 100%;
}

.bg-label{
    background-color: #ffffff!important;
}

.bg-input{
    background-color: #ffffff;
    border-bottom: 1px solid #D0D0D0!important;
}

/* .logo-sidebar{
    margin-top: 13px!important;
    width: 216px;
    margin-left: 11px;
} */

.font-color-sidebar{
    color:#535353;
}

.right-icon-sidebar{
    /*float: right;*/
    /*margin-right: 20px;*/
    /*float: right!important;*/
    margin-right: 5px;
}

.filter-input{
    padding-left: 0px;
    padding-right: 10px;
}

.filter-text{
    padding-right: 0px;
    padding-left: 35px;
}

.filter-text-sales{
    padding-right: 0px;
    padding-left: 0px;
    max-width: 50px;
}

.form-input-filter{
    height: 31px !important;
}

.datepicker-container{
    z-index: 100000 !important;
}

label.error {
    color: #F64662;
    margin-bottom: 0px;
    margin-top: .7rem;
    margin-left: .9rem;
}

.hidden{
    display: none;
}

.padding-sidebar{
    padding-right: 0px !important;
}

#tableInqSales th{
    width: 50%;
    text-align: right;
}
#buttonDetailSalesWarung{
    margin-top: 20px;
}

#buttonDetailSales{
    margin-top: 20px;
}

.bukti-transfer-label{
    padding: 10px;
    background: #23527c;
    color: #fff;
    border-radius: 8px;
    /* position: relative; */
    /* top: 148px; */
    z-index: 999;
    cursor: pointer;
    /* left: 23px; */
    color: white !important;
}

.label-bukti{
    color: white !important;
}

.file {
    display: none !important;
}

.img-bukti {
    width: 100%;
}

.table-detail-sales{
    border-collapse: collapse;
}

.img-detail-sales{
    width: 100%;
    height: 30%;
}

.img-detail-warung{
    width: 100%;
    height: 30%;
}

.foto-warung-label{
    padding: 10px;
    background: #23527c;
    color: #fff;
    border-radius: 8px;
    /* position: relative; */
    /* top: 148px; */
    z-index: 999;
    cursor: pointer;
    /* left: 23px; */
    color: white !important;
}

.label-warung{
    color: white !important;
}

.img-warung {
    width: 100%;
}

.fa-logout{
    font-size: 20px !important;
    /* margin-left: 10px; */
    margin-right: 18px;
    position: relative;
    top: 5px;
    color: black;
    padding-left: 11px;
    float: right;
}

.fa-notif{
    font-size: 20px !important;
    position: relative;
    top: 5px;
    color: black;
    padding-left: 11px;
    float: none !important;
}

.span-notif{
    top: -16px !important;
    right: 9px;
}

.btn-notif{
    position:relative;
    padding-right: 0px;
    bottom: 7px;
}

.dropdown-toggle::after{
    display: none;
}

#loading-overlay{
    display: none;
}

#loading-overlay.active{
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: #00000096;
    padding-top: 20%;
}

.loader {
    margin: 7px auto;
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #013354;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
}

.tbl-logo-offset{
    background: #006677 !important;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*.dropdown-menu{
    transform: translate3d(-188px, 38px, 0px) !important;
    width: 300px;
}*/
.notif-modal{
    padding: 0px;
    border-radius: 5px;
}
.notif-modal .notify-drop-title{
    background: #4B4B4B;
    color: #fff;
}

.btn-link:focus, .btn-link.focus{
    text-decoration: none !important;
}

.pull-right{
    float: right;
    color: white;
    text-decoration: none;
    border: none;

}

.pull-right:hover, .pull-right:focus, .pull-right:active{
    color: white;
    text-decoration: none;
    border: none;
}



.dropdown-item-notif {
    padding: 0.25rem 1.5rem;
}

.aNotif{
    padding: 5px 10px;
    border-bottom: 1px solid grey;
    display: block;
    text-decoration: none !important;
}

.drop-content-notif {
    min-height: 280px;
    max-height: 280px;
    overflow-y: scroll;
    color:red;

}
.unread {
    background-color: #f3f3f3;
}

.font-notif {
    color: #000;
    font-size: 12px;
    margin: 0px;
}

.notify-drop-title {
    padding: 10px;
}

.notify-drop-footer{
    background: #444444;
}

.notify-drop-footer a {
    text-decoration: none;
    color: #fff;
}

#modalDetailSalesWarung{
    overflow-y: scroll !important;
}

#modalDetailSales{
    overflow-y: scroll !important;
}

.btn-logout-mbl{
    display: none !important;
}

.main-sidebar.mini .pull-right{
        display: none !important;
}

/* BNI MyCart */
.green-bni{
    color: #006677;
}
.orange-bni{
    color: #F15A22;
}

#menu-toggle{
    float: right !important;
    color: #F15A22;
}
#logo{
    text-decoration: none;
}
.mini #logo{
    display: none !important;
}

.mini #menu-toggle{
    width: 100%;
    text-align: center;
    color: #F15A22;
}

.form-inline{
    display: block !important;
}


@media only screen
and (min-device-width: 320px)
and (max-device-width: 425px)  {
    .logo-sidebar {
        margin-top: 20px;
        width: 170px;
        margin-left: 0px;
    }
}

@media only screen
and (min-device-width: 320px)
and (max-device-width: 767px)  {
    .search{
        display: block !important;
    }
    .main-header .search {
        position: absolute;
        margin-left: calc(100% - 155px);
        z-index: -1;
    }
    .logout{
        display: none;
    }
    .main-sidebar ul li .active {
        border-left: 4px solid #013354;
        padding: 12px 5px 12px 16px;
        color: #006677;
        background: #e1e1e1;
        height: 50px!important;
    }
    .main-sidebar ul li a:hover {
        background-color: rgba(196, 196, 196, 0.2);
        text-decoration: none;
        height: 50px!important;
    }
    #menu-toggle {
        display: none;
    }
    .logo-sidebar {
        margin-top: 20px;
        width: 170px;
    }
}

@media only screen
and (min-device-width: 375px)
and (max-device-width: 767px) {
    #menu-toggle {
        display: none;
    }
}

@media only screen
and (min-device-width: 425px)
and (max-device-width: 767px) {
    #menu-toggle {
        display: none;
    }
}

@media only screen
and (min-device-width: 768px)
and (max-device-width: 992px)  {
    .main-sidebar .pull-right{
        display: none !important;
    }
    .main-sidebar.mini .pull-right{
        display: block !important;
    }
    #logo {
        display: none !important;
    }
    .mini #logo{
        display: block!important;
    }
    #menu-toggle{
        float: left !important;
        margin-left: 5px!important;
    }
    .hidden {
        display: none;
    }
    .main-sidebar ul .user.mini {
        display: block!important;
    }

    .main-sidebar ul .user {
        display: none;
    }
    .logo-sidebar {
        margin-top: 18px;
        width: 165px;
    }
}


/* .tabel-detail-trx tr td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px;
} */

.breadcrumb-nav {
    display: flex;
}
.breadcrumb-nav .bread {
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: #252525;
}
.breadcrumb-nav .bread.active {
    color: #002060;
    text-decoration: none;
}


.profile-access {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.profile-access .img-profile {
    width: 30px;
    height: 30px;
    object-fit: cover;
}
.profile-access .name-profile {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
    color: #050401;
    margin-bottom: 0px;
    margin-left: 10px;

    width: 128px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.profile-access .name-role {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #BEBEBE;
    margin-bottom: 0px;
    margin-left: 10px;

    width: 128px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.profile-access i {
    margin-left: 10px;
    color: #BDBDBD;
    font-size: 20px;
}
.profile-dropdown .dropdown-menu {
    background: #FFFFFF;
    border: 0.2px solid #E0E0E0;
    box-sizing: border-box;
    box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 0px;
    min-width: 212px;
    /* overflow: hidden; */
    top: 110%;
    left: -12px !important;
    margin: 1rem 0 0;
}
.profile-dropdown .dropdown-menu:before {
    content: "";
    border-bottom: 13.2px solid #E0E0E0;
    border-right: 10.2px solid transparent;
    border-left: 10.2px solid transparent;
    position: absolute;
    top: -13px;
    left: 18px;
    z-index: 1001;
}
.profile-dropdown .dropdown-menu:after {
    content: "";
    border-bottom: 13px solid #fff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    top: -12.1px;
    left: 18px;
    z-index: 1002;
}
.profile-dropdown .dropdown-item {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 113.2%;
    color: #333333;
    text-decoration: none;
    padding: 1rem;
    display: flex;
    align-items: center;
}
.profile-dropdown .dropdown-item img {
    margin-right: 7px;
}
.profile-dropdown h6.dropdown-item {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 113.2%;
    color: #050401;
    margin-bottom: 0.4rem;
    margin-top: 0.4rem;
}
.profile-dropdown h6.dropdown-item:hover {
    background-color: #FFFFFF;
}
.profile-dropdown h6.dropdown-item:active {
    background-color: #FFFFFF;
}
.profile-dropdown .dropdown-item:active {
    background-color: #DF0E2C;
}
.profile-dropdown .dropdown-item.signout:hover {
    background-color: transparent;
}
.profile-dropdown .dropdown-item.signout:active {
    background-color: transparent;
}
.profile-dropdown .dropdown-divider {
    margin: 0px;
    border-top: 1px solid #BDBDBD;
}


.notif-dropdown.dropdown {
    margin-right: 2rem;
    margin-top:4px;
}
.notif-dropdown .notif-access {
    cursor: pointer;
}
.notif-dropdown .notif-count {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 9px;
    line-height: 12px;
    color: #E8F7EE;
    background: #DF0E2C;
    border: 2px solid #FFFFFF;
    border-radius: 20px;
    padding: 1px 3px;
    right: -7px;
    top: -6px;
    height: 17px;
}
.notif-dropdown .dropdown-menu {
    background: #FFFFFF;
    border: 0.2px solid #E0E0E0;
    box-sizing: border-box;
    box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 0px;
    min-width: 300px;
    /* overflow: hidden; */
    top: 110%;
    /* right: -14px; */
    left: 13px !important;
    margin: 1.15rem 0 0;
}
.notif-dropdown .dropdown-menu:before {
    content: "";
    border-bottom: 13.2px solid #E0E0E0;
    border-right: 10.2px solid transparent;
    border-left: 10.2px solid transparent;
    position: absolute;
    top: -13px;
    right: 13.5px;
    z-index: 1001;
}
.notif-dropdown .dropdown-menu:after {
    content: "";
    border-bottom: 13px solid #fff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    top: -12.1px;
    right: 13.3px;
    z-index: 1002;
}
.notif-dropdown .dropdown-item .notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.notif-dropdown .dropdown-item .notif-header h6 {
    margin-bottom: 0px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 113.2%;
    color: #050401;
}
.notif-dropdown .dropdown-item .notif-header h6 .notif-count-inside {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #E8F7EE;
    background: #DF0E2C;
    border: 2px solid #FFFFFF;
    border-radius: 20px;
    padding: 1px 3px;
}
.notif-dropdown .dropdown-item .notif-header a {
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: #DF0E2C;
    text-decoration: none;
}
.notif-dropdown .dropdown-item:first-child {
    margin-bottom: 0.4rem;
    margin-top: 0.4rem;
}
.notif-dropdown .dropdown-item:first-child:hover {
    background-color: #FFFFFF;
}
.notif-dropdown .dropdown-item:first-child:active {
    background-color: #FFFFFF;
}
.notif-dropdown .dropdown-item:active {
    background-color: transparent;
}
.notif-dropdown .dropdown-divider {
    margin: 0px;
    border-top: 1px solid #BDBDBD;
}
.notif-dropdown .dropdown-item {
    text-decoration: none;
    padding: 1rem;
}
.notif-dropdown .dropdown-item .notif-title {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 113.2%;
    color: #333333;
    margin-bottom: 0px;
}
.notif-dropdown .dropdown-item .notif-content {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    color: #828282;
    margin: .3rem 0px;

    max-width: 250px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
}
.notif-dropdown .dropdown-item .notif-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .5rem;
}
.notif-dropdown .dropdown-item .notif-detail .date-notif {
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 130%;
    color: #828282;
    margin-bottom: 0px;
}
.notif-dropdown .dropdown-item .notif-detail .link-notif {
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: #DF0E2C;
    text-decoration: none;
}

.height-270 {
    height: 270px;
}
.card-solusi-kesehatan {
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(0, 32, 96, 0.24);
    border-radius: 16px;
    border: none;
    background-image: url(../image/bg-solusi-kesehatan.svg);
    background-size: cover;
}
.solusi-kesehatan-wrapper .title-half {
    font-family: 'Gilroy-Regular', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -.03em;
    color: #002060;
}
.solusi-kesehatan-wrapper .title-half.bold {
    font-family: 'Gilroy-Bold', sans-serif;
}
.solusi-kesehatan-wrapper .subtitle {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 22px;
    color: #597393;
    margin-bottom: 0px;
}
.card-dashboard {
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 16px;
    border: none;
    height: 122px;
}
.card-dashboard.ratings {
    background-image: url('../image/bg-rating.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.card-dashboard.pasien {
    background-image: url('../image/bg-pasien.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.card-dashboard .dashboard-icon-wrapper {
    width: 50px;
    height: 50px;
    background: #85ADFF;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1rem;
    margin-bottom: 6px;
}
.card-dashboard .dashboard-desc .title {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 16px;
    color: #597393;
    margin-bottom: 0.7rem;
}
.card-dashboard .dashboard-desc .subtitle {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 19.2px;
    letter-spacing: -0.03em;
    color: #002060;
    margin-bottom: 0px;
}
.card-dashboard .dashboard-desc .total {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 13px;
    letter-spacing: -0.02em;
    color: #597393;
    margin-bottom: 0px;
}
.card-dashboard .dashboard-desc .subtitle span {
    font-weight: 700;
    font-size: 26px;
    line-height: 28.8px;
}
.card-dashboard .dashboard-desc img {
    margin-left: 2px;
    margin-right: 2px;
}
.card-dashboard-mb {
    margin-bottom: 25px;
}
.card-dashboard-chart {
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 16px;
    border: none;
    min-height: 250px;
}
.mt-chart {
    margin-top: 1.9rem;
}

.modal-custom-view-user {
    max-width: 650px;
}
.modal-custom-view-user .modal-content {
    background: #FFFFFF;
    box-shadow: 0px 50px 50px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
}
.modal-custom-view-user .modal-content .modal-body {
    padding: 1.6rem 2.1rem;
}
.modal-custom-view-user .modal-content .modal-body .modal-head .title {
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 120%;
    color: #252525;
    margin-bottom: 0px;
}
.modal-custom-view-user .modal-content .modal-body .modal-detail-wrapper {
    margin-top: 2.6rem;
}
.modal-custom-view-user .modal-content .modal-body .modal-detail-wrapper .form-group {
    margin-bottom: 1.5rem;
}
.modal-custom-view-user .modal-content .modal-body .modal-detail-wrapper .form-group label {
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 120%;
    color: #252525;
}
.modal-custom-view-user .modal-content .modal-body .modal-detail-wrapper .form-group .text {
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 120%;
    color: #002060;
    margin-bottom: 0px;
    text-transform: capitalize;
}
.modal-custom-view-user .modal-content .modal-body .modal-detail-wrapper .form-group.image {
    display: flex;
    flex-direction: column;
}
.modal-custom-view-user .modal-content .modal-body .modal-detail-wrapper .form-group.image img {
    width: auto;
    height: 115px;
    margin: 5px;
    border-radius: 6px;
    box-shadow: 0px 16px 24px rgb(190 190 190 / 16%);
}
.modal-custom-view-user .modal-content .modal-body .modal-detail-wrapper .table tr td {
    padding: .3rem;
}
.modal-custom-view-user .modal-content .modal-body .modal-detail-wrapper .table .form-group {
    margin-bottom: .5rem;
}
.modal-custom-view-user .modal-content .modal-action-green {
    background: #EDFCF3;
    border-radius: 16px;
    padding: .7rem 1rem;
}
.modal-custom-view-user .modal-content .modal-status {
    border-radius: 16px;
    padding: 1.2rem 2rem;
    background: #EDFCF3;
}
.modal-custom-view-user .modal-content .modal-status p.status-text {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 130%;
    color: #252525;
    opacity: 0.7;
    margin-bottom: 0px;
    margin-right: 16px;
}
.modal-custom-view-user .modal-content .modal-status .status-desc {
    display: flex;
    align-items: center;
}
.modal-custom-view-user .modal-content .modal-status .status-desc .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}
.modal-custom-view-user .modal-content .modal-status .status-desc span {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 130%;
}
.modal-custom-view-user .modal-content .modal-status .status-desc.red .dot {
    background: #FF6567;
}
.modal-custom-view-user .modal-content .modal-status .status-desc.red span {
    color: #FF6567;
}
.modal-custom-view-user .modal-content .modal-status .status-desc.grey .dot {
    background: #C4C8DC;
}
.modal-custom-view-user .modal-content .modal-status .status-desc.grey span {
    color: #C4C8DC;
}
.modal-custom-view-user .modal-content .modal-status .status-desc.green .dot {
    background: #33E894;
}
.modal-custom-view-user .modal-content .modal-status .status-desc.green span {
    color: #33E894;
}
.modal-custom-view-user .modal-content .modal-status .status-desc.greenOld .dot {
    background: #00A3A0;
}
.modal-custom-view-user .modal-content .modal-status .status-desc.greenOld span {
    color: #00A3A0;
}
/* .modal-custom-view-user .modal-content .modal-status.red {
    background: #FF6567;
}
.modal-custom-view-user .modal-content .modal-status.grey {
    background: #C4C8DC;
}
.modal-custom-view-user .modal-content .modal-status.green {
    background: #33E894;
} */
.btn-modal-action {
    display: flex;
    align-items: center;
}
.btn-modal-action img {
    margin-right: .7rem;
}
.btn-modal-action p {
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 130%;
    color: #252525;
    margin-bottom: 0px;
}

.btn-white {
    border: 1px solid #6A6A6A;
    filter: drop-shadow(0px 16px 24px rgba(29, 51, 79, 0.24));
    border-radius: 8px;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    color: #BEBEBE;
}
.modal-custom-action-user {
    max-width: 360px;
}
.modal-custom-action-user .modal-content {
    max-width: 360px;
    background: #FFFFFF;
    box-shadow: 0px 50px 50px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    /* overflow: hidden; */
}
.modal-custom-action-user .modal-body {
    padding: 2rem;
}
.modal-custom-action-user .modal-head {
    display: flex;
    align-items: center;
    margin-bottom: 2.7rem;
}
.modal-custom-action-user .modal-head img {
    margin-right: .7rem;
}
.modal-custom-action-user .modal-head h5 {
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 120%;
    color: #252525;
    margin-bottom: 0px;
}
.modal-custom-action-user .modal-wrapper p {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #252525;
    margin-bottom: 2rem;
}
.modal-custom-action-user .modal-wrapper p b {
    font-weight: 600;
    color: #002060;
}


/* ===================================================================== */
#previewGenerateHasilWrap {
    min-height: calc(100vh - 15rem);
}
.modal-custom-generate-hasil {
    max-width: 100%;
}
.modal-custom-generate-hasil .modal-content {
    max-width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 50px 50px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    /* overflow: hidden; */
}
.modal-custom-generate-hasil .modal-body {
    padding: 2rem;
}
.modal-custom-generate-hasil .modal-head {
    display: flex;
    align-items: center;
    margin-bottom: 2.7rem;
}
.modal-custom-generate-hasil .modal-head img {
    margin-right: .7rem;
}
.modal-custom-generate-hasil .modal-head h5 {
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 120%;
    color: #252525;
    margin-bottom: 0px;
}
.modal-custom-generate-hasil .modal-wrapper p {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #252525;
    margin-bottom: 2rem;
}
.modal-custom-generate-hasil .modal-wrapper p b {
    font-weight: 600;
    color: #002060;
}

#replaceTemplateHasil p {
    margin-bottom: 0px;
}
/* ===================================================================== */


.modal-custom-action-wide {
    max-width: 1140px;
}
.modal-custom-action-wide .modal-content {
    /* max-width: 360px; */
    background: #FFFFFF;
    box-shadow: 0px 50px 50px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    /* overflow: hidden; */
}
.modal-custom-action-wide .modal-body {
    padding: 2rem;
}
.modal-custom-action-wide .modal-head {
    display: flex;
    align-items: center;
    margin-bottom: 2.7rem;
}
.modal-custom-action-wide .modal-head img {
    margin-right: .7rem;
}
.modal-custom-action-wide .modal-head h5 {
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 120%;
    color: #252525;
    margin-bottom: 0px;
}
.modal-custom-action-wide .modal-wrapper p {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 120%;
    color: #252525;
    margin-bottom: 2rem;
}
.modal-custom-action-wide .modal-wrapper p b {
    font-weight: 600;
    color: #002060;
}
.modal-custom-action-wide .modal-wrapper .form-group label {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #252525;
}
.modal-custom-action-wide .modal-wrapper .form-group h5 {
    font-family: 'Gilroy-Regular', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    color: #002060;
}

.card-list {
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 1.2rem 1.5rem;
    margin: 10px 0px;
}
.card-list.pemeriksaan {
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    border-bottom: none;
    box-sizing: border-box;
    border-radius: 0px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 10px;
    margin-bottom: 0px;
}
.card-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-list-head p {
    font-family: 'Proxima-Bold', sans-serif!important;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 130%;
    color: #252525;
    margin-bottom: 0px;
    text-transform: capitalize;
}
.card-list-body .card-list-content label {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 130%;
    color: #BEBEBE;
}
.card-list-body .card-list-content p {
    font-family: 'Proxima-Semibold', sans-serif!important;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 130%;
    color: #252525;
    margin-bottom: 6px;
    text-transform: capitalize;
}
.card-list-foot {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 0.6rem 1.5rem;
    background: #FF6567;
    border: 1px solid #FF6567;
}
.card-list-foot.blue {
    background: #7FBEFF;
    border: 1px solid #7FBEFF;
}
.card-list-foot.green {
    background: #33E894;
    border: 1px solid #33E894;
}
.card-list-foot.grey {
    background: #C4C8DC;
    border: 1px solid #C4C8DC;
}
.card-list-foot p {
    margin-bottom: 0px;
}
.card-list-foot p:first-child {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 130%;
    color: #FFFFFF;
    opacity: 0.7;
}
.card-list-foot p:last-child {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 130%;
    color: #FFFFFF;
}
.card-summary-loket {
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 16px;
    border: none;
}
.card-summary-loket .loket-color {
    width: 38px;
    height: 38px;
    border-radius: 8px;
}
.card-summary-loket .loket-color.green {
    background: #00D98B;
}
.card-summary-loket .loket-color.yellow {
    background: #C8D900;
}
.card-summary-loket .loket-color.purple {
    background: #BB00D9;
}
.card-summary-loket .loket-text h4 {
    font-family: 'Gilroy-Bold', sans-serif!important;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #252525;
}
.card-summary-loket .loket-text p {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 17px;
    color: #252525;
    opacity: 0.5;
    margin-bottom: 0px;
}

.modal-custom-form-double {
    max-width: 677px;
}
.modal-custom-form-double .modal-content {
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 50px 50px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    /* overflow: hidden; */
}
.modal-custom-form-double .modal-body {
    padding: 2rem;
}
.modal-custom-form-double .modal-head {
    display: flex;
    align-items: center;
    margin-bottom: 2.7rem;
}
.modal-custom-form-double .modal-head img {
    margin-right: .7rem;
}
.modal-custom-form-double .modal-head h5 {
    font-family: 'Gilroy-Bold', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 120%;
    color: #252525;
    margin-bottom: 0px;
}
.modal-custom-form-double .modal-wrapper p {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #252525;
    margin-bottom: 2rem;
}
.modal-custom-form-double .modal-wrapper p b {
    font-weight: 600;
    color: #002060;
}
.modal-custom-form-double.single {
    max-width: 359px;
}
.modal-custom-form-double.single .modal-content {
    width: 100%;
}

.modal-custom-form-double.width {
    max-width: calc(100% - 50px);
}
.modal-custom-form-double.width .modal-header {
    border-bottom: none;
    padding: 1rem 2rem;
}

.modal-custom-form-double.checkin {
    max-width: 425px;
}
.modal-custom-form-double.report {
    max-width: 484px;
}

.pagination-table {
    margin: 0px 15px;
}
.pagination-table nav {
    display: flex;
    align-items: center;
}
.pagination-table nav .divider {
    height: 30px;
    width: 1px;
    background: #E0E0E0;
    margin: 0px 15px;
}
.pagination-table nav .goto {
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 15px;
    color: #424651;
    margin-bottom: 0px;
    margin-right: 15px;
}
.pagination-table nav .form-paginate input {
    height: 30px;
    width: 30px;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.07);
    border-radius: 5px;
    text-align: center;
}
.pagination-table .pagination {
    margin-bottom: 0px;
}
.pagination-table .pagination .page-item {
    min-width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination-table .pagination .page-item .page-link {
    min-width: 30px;
    height: 30px;
    border: none;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 12px;
    color: #828282;
    border-radius: 5px;
}
.pagination-table .pagination .page-item.active .page-link {
    min-width: 30px;
    height: 30px;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 13px;
    color: #FFFFFF;
    background: #002060;
    border-radius: 5px;
}

.button-add-loket {
    background: #002060;
    border-radius: 16px;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    color: #FFFFFF;
}
.button-add-loket:hover {
    color: #dddada;
}
.warn-loket img {
    margin-right: 1rem;
}
.warn-loket p {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 120%;
    color: #6A6A6A;
    margin-bottom: 0px;
}

.selected-parameter-text {
    padding: 0px 2rem 1rem;
    border-bottom: 1px solid #dee2e6;
}
.selected-parameter-text .choose-parameter {
    background: #B0F7FF;
    border-radius: 100px;
    display: flex;
    align-items: center;
    padding: 4px 14px;
    width: fit-content;
    margin: 5px;
}
.selected-parameter-text .choose-parameter p {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    color: #047487;
    margin-bottom: 0px;
    margin-right: 8px;
}
.selected-parameter-text .choose-parameter i {
    color: #FF6567;
    font-size: 11px;
    cursor: pointer;
}
.btn-blue-modal {
    background: #002060;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    color: #FFFFFF;
    padding: .5rem 1.5rem;
}
.btn-blue-modal:hover {
    color: #f7f1f1;
}
.choosed-parameter {
    background: #B0F7FF;
    border-radius: 100px;
    display: flex;
    align-items: center;
    padding: 4px 14px;
    width: fit-content;
    margin: 5px;
}
.choosed-parameter p {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    color: #047487;
    margin-bottom: 0px;
    margin-right: 8px;
}
.choosed-parameter i {
    color: #FF6567;
    font-size: 11px;
    cursor: pointer;
}

#tableTransaksi_wrapper .row:first-child, 
#tableInstalasi_wrapper .row:first-child, 
#tableDokter_wrapper .row:first-child,
#tableCusType_wrapper .row:first-child,
#tableUser_wrapper .row:first-child,
#tableCustomerInstansi_wrapper .row:first-child,
#tableMetode_wrapper .row:first-child,
#tableJenisSample_wrapper .row:first-child,
#tableParameter_wrapper .row:first-child,
#tablePaket_wrapper .row:first-child,
#tableMedia_wrapper .row:first-child,
#tableCustomer_wrapper .row:first-child,
#tableRole_wrapper .row:first-child,
#tableSampling_wrapper .row:first-child,
#tableFormat_wrapper .row:first-child,
#tablePemeriksaan_wrapper .row:first-child {
    display: none;
}
#tableListParameterModal_wrapper .row:first-child {
    display: none;
}
#tableListParameterModal.dataTable thead tr:first-child th {
    border-top: none;
    border-bottom: none;
}
#tableListParameterModal.dataTable thead tr:last-child th {
    border-top: none;
    border-bottom: 1px solid #EBEBEB;
}
#tableListParameterModal.dataTable.display tbody tr.odd {
    background: white;
}
#tableListParameterModal.dataTable.display tbody tr.even {
    background: white;
}
#tableListParameterModal.dataTable.display tbody tr.odd .sorting_1 {
    background: white;
}
#tableListParameterModal.dataTable.display tbody tr.even .sorting_1 {
    background: white;
}
#tableListParameterModal.dataTable.display tbody tr.selected .sorting_1 {
    background: #F0FDFC;
}
#tableListParameterModal.dataTable.display tbody tr.selected {
    background: #F0FDFC;
}
#tableListParameterModal.dataTable.display tbody tr.selected td:first-child {
    border-left: 2px solid #00D9D5;
}
#tableListParameterModal.dataTable.display tbody tr td.select-harga {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 13px;
    letter-spacing: 0.05em;
    color: #34B8BA;
}
#tableListParameterModal.dataTable.display tbody tr td {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 13px;
    color: #6A6A6A;
    padding: 24px 10px;
}
#tableListParameterModal.dataTable.display tbody tr td ul {
    padding-left: 16px;
    list-style: none;
    margin-bottom: 4px;
    margin-top: 5px;
}
#tableListParameterModal.dataTable.display tbody tr td ul li {
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 14px;
    color: #BEBEBE;
    padding: 5px 0px;
}
#tableListParameterModal.dataTable.display tbody tr td ul li::before {
    content: "\2022";
    color: #C4C4C4;
    font-weight: bold;
    display: inline-block;
    width: 12px;
    font-size: 16px;
    margin-left: -15px;
}
#tableListParameterModal.dataTable.no-footer {
    border-bottom: none;
}
/* #tableListParameterModal.dataTable tr th.select-checkbox.selected::after {
    content: "✔";
    margin-top: -6px;
    margin-left: -6px;
    position: absolute;
    top: 1.1em;
    left: 53%;
    text-align: center;
    color: white;
}
#tableListParameterModal.dataTable tr th.select-checkbox {
    position: relative;
}
#tableListParameterModal.dataTable tr:first-child th.select-checkbox::before {
    content: ' ';
    margin-top: -6px;
    margin-left: -6px;
    display: block;
    position: absolute;
    top: 1.2em;
    left: 50%;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    background: #ECF3F2;
    border: 1px solid #00D9D5;
    box-sizing: border-box;
    border-radius: 2px;
}
#tableListParameterModal.dataTable tr:first-child th.select-checkbox.selected::before {
    background: #00D9D5;
} */
#tableListParameterModal.dataTable tbody td.select-checkbox:before {
    content: ' ';
    margin-top: 6px;
    margin-left: -6px;
    background: #ECF3F2;
    border: 1px solid #00D9D5;
    border-radius: 2px;
    width: 16px;
    height: 16px;
}
#tableListParameterModal.dataTable tr.selected td.select-checkbox::before {
    background: #00D9D5;
}
#tableListParameterModal.dataTable tr.selected td.select-checkbox:after {
    content: '\2714';
    margin-top: 8px;
    margin-left: -4px;
    text-align: center;
    text-shadow: none;
    color: white;
}


.total-regis-loket p.title {
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 15px;
    color: #6A6A6A;
}
.total-regis-loket p.subtitle {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 17px;
    color: #BEBEBE;
}
.total-regis-loket p.subtitle span {
    font-style: normal;
    font-weight: bold;
    font-size: 15px;
    line-height: 17px;
    color: #252525;
}
/* .table-bordered-summary.dataTable tr th.select-checkbox {
    position: relative;
}
.table-bordered-summary.dataTable tr:first-child th.select-checkbox::before {
    content: ' ';
    margin-top: 3px;
    margin-left: -6px;
    display: block;
    position: absolute;
    top: 1.2em;
    left: 50%;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    background: #ECF3F2;
    border: 1px solid #00D9D5;
    box-sizing: border-box;
    border-radius: 2px;
}
.table-bordered-summary.dataTable tr:first-child th.select-checkbox.selected::before {
    background: #00D9D5;
}
.table-bordered-summary.dataTable tr th.select-checkbox.selected::after {
    content: "✔";
    margin-top: 5px;
    margin-left: -5px;
    position: absolute;
    top: 1.1em;
    left: 53%;
    text-align: center;
    color: white;
} */
.table-bordered-summary {
    border-left: 1px solid #EBEDF2;
    border-right: 1px solid #EBEDF2;
}
.table-bordered-summary.dataTable tbody tr.selected {
    background-color: #ffffff;
}
.table-bordered-summary th {
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    line-height: 15px;
    color: #252525;
}
.table-bordered-summary td, .table-bordered-summary td p {
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 14px;
    color: #252525;
}
.table-bordered-summary td, .table-bordered-summary th {
    /* border-bottom: 2px solid #EBEDF2; */
}
.table-bordered-summary td {
    padding: 18px 10px !important;
}
.table-bordered-summary th.select-qty {
    text-align: center;
}
.table-bordered-summary td.select-qty {
    padding: 8px 10px !important;
    text-align: center;
}
.table-bordered-summary td ul {
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
}
.table-bordered-summary td ul li {
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 14px;
    color: #BEBEBE;
    margin: 8px 0px;
}
.table-bordered-summary.dataTable thead th {
    border-bottom: none;
    padding: 20px 10px;
}
.table-bordered-summary.dataTable tbody td.select-checkbox:before {
    top: .7em;
    content: '\00D7';
    margin-top: -6px;
    margin-left: -6px;
    /* background: #ECF3F2; */
    border: none;
    /* border-radius: 2px; */
    width: 16px;
    height: 16px;
    font-size: 36px;
    color: #00D9D5;
    font-weight: 600;
    cursor: pointer;
}
.table-bordered-summary.dataTable tbody tr.selected td.select-checkbox:before {
    background: #00D9D5;
}
/* .table-bordered-summary.dataTable tbody tr.selected td.select-checkbox:after {
    top: 1.8em;
    content: '\2714';
    margin-top: -4px;
    margin-left: -4px;
    text-align: center;
    text-shadow: none;
    color: white;
} */
.table-bordered-summary.dataTable.no-footer {
    /* border-bottom: none; */
    border-bottom: 1px solid #EBEDF2;
}
.table-bordered-summary.dataTable tbody td.harga {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 13px;
    letter-spacing: 0.05em;
    color: #252525;
}

.table-total-loket td {
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: none;
}
.table-total-loket td input {
    width: 100%;
}
.table-total-loket td textarea {
    width: 100%;
}
.table-total-loket .form-check-dot {
    display: flex;
    /* width: 20%; */
}
.table-total-loket .form-check-dot input {
    margin-top: 4px;
    width: 30px;
}
.table-total-loket .form-check-dot label {
    white-space: nowrap;
}
.table-total-loket .card-box-loket {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.65rem;
    padding: 1.5rem;
    height: 156px;
}
.table-total-loket .card-box-loket.no-h {
    height: 100%;
}
.table-total-loket .card-box-loket.no-h .form-group-mini {
    margin-bottom: .8rem;
}
.table-total-loket .card-box-loket .form-group-travel {
    display: flex;
    flex-direction: column;
}


.card-detail-paket {
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    border-radius: 8px;
    padding: .8rem 1.6rem;
}
.card-detail-paket h1 {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 130%;
    color: #252525;
}
.card-detail-paket label {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 130%;
    color: #BEBEBE;
}
.card-detail-paket p {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 130%;
    color: #252525;
}
.card-detail-paket .dot-green {
    width: 7px;
    height: 7px;
    background: #009639;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px;
    margin-bottom: 1px;
}
.card-detail-paket .dot-grey {
    width: 7px;
    height: 7px;
    background: #BDBDBD;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px;
    margin-bottom: 1px;
}

.card-detail-pemeriksaan h1.sample {
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 130%;
    color: #002060;
    margin-bottom: 1.3rem;
}
.card-detail-pemeriksaan .form-group label {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 130%;
    color: #252525;
}
.card-detail-pemeriksaan .form-group p.detail {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 130%;
    color: #002060;
    margin-bottom: 0px;
}
.card-detail-pemeriksaan .status p {
    margin-bottom: 0px;
}
.card-detail-pemeriksaan .status .dot {
    margin-right: 8px;
}
.card-detail-pemeriksaan .status.red .dot {
    background-color: #FF6567;
}
.card-detail-pemeriksaan .status.red p {
    color: #FF6567;
}
.card-detail-pemeriksaan .status.green .dot {
    background-color: #33E894;
}
.card-detail-pemeriksaan .status.green p {
    color: #33E894;
}
.card-detail-pemeriksaan .status.grey .dot {
    background-color: #C4C8DC;
}
.card-detail-pemeriksaan .status.grey p {
    color: #C4C8DC;
}
.card-detail-pemeriksaan .line-title {
    margin-bottom: 1.5rem;
}
.card-detail-pemeriksaan .line-title p {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    color: #00D9D5;
    white-space: nowrap;
    margin-bottom: 0px;
    margin-right: 1.5rem;
}
.card-detail-pemeriksaan .line-title .line {
    border-top: 1px solid #EBEBEB;
    width: 100%;
}

#tableDetailPaket.dataTable.no-footer {
    border-bottom: none;
}
#tableDetailPaket thead th {
    padding: 22px 18px;
    border-bottom: none;
    font-family: 'Proxima-Bold', sans-serif!important;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 130%;
    color: #BDBDBD;
}
#tableDetailPaket tbody td {
    padding: 12px 18px;
    border-top: none;
}
#tableDetailPaket tbody tr.odd td {
    background: #EDFCF3;
}
#tableDetailPaket tbody tr.even td {
    background: #FFFFFF;
}
#tableDetailPaket tbody tr.odd.shown td {
    border-bottom: 1px solid #EBEBEB;
}
#tableDetailPaket tbody tr.even.shown td {
    border-bottom: 1px solid #EBEBEB;
}
#tableDetailPaket td .details-control {
    width: 20px;
    height: 20px;
    background: url('../image/table-right.svg') no-repeat center center;
    cursor: pointer;
}
#tableDetailPaket tr.shown td .details-control {
    width: 20px;
    height: 20px;
    background: url('../image/table-down.svg') no-repeat center center;
}
#tableDetailPaket tbody tr.odd.shown + tr {
    background: #EDFCF3;
}
#tableDetailPaket tbody tr.odd.shown + tr table {
    width: 70%;
}
#tableDetailPaket tbody tr.odd.shown + tr table tbody tr {
    background: #EDFCF3;
}
#tableDetailPaket tbody tr.odd.shown + tr table tbody tr td {
    padding: 0px 18px;
}
#tableDetailPaket tbody tr.even.shown + tr {
    background: #FFFFFF;
}
#tableDetailPaket tbody tr.even.shown + tr table {
    width: 70%;
}
#tableDetailPaket tbody tr.even.shown + tr table tbody tr {
    background: #FFFFFF;
}
#tableDetailPaket tbody tr.even.shown + tr table tbody tr td {
    padding: 0px 18px;
}
#tableDetailPaket tbody tr.odd.shown + tr table tbody tr td.for-label {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #BEBEBE;
    padding: 10px 0px 7px;
}
#tableDetailPaket tbody tr.odd.shown + tr table tbody tr td.for-text {
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    color: #6A6A6A;
    padding: 0px 40px 10px 0px;
}
#tableDetailPaket tbody tr.even.shown + tr table tbody tr td.for-label {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #BEBEBE;
    padding: 10px 0px 7px;
}
#tableDetailPaket tbody tr.even.shown + tr table tbody tr td.for-text {
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    color: #6A6A6A;
    padding: 0px 40px 10px 0px;
}


.detail-page .form-group {
    margin-bottom: 2rem;
}
.detail-page .detail-label {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #252525;
}
.detail-page .dummy-trx {
    height: 268px;
    width: 100%;
    background: #F5F8FA;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.detail-page .dummy-trx p {
    margin-bottom: 0px;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: #BDBDBD;
}
.detail-page .detail-text {
    font-family: 'Gilroy-Medium', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    color: #002060;
}
.detail-page .detail-image {
    height: auto;
    width: 90%;
    border-radius: 8px;
}
.card-footer-detail {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.05);
    background: #00D9D5;
    display: flex;
    justify-content: flex-end;
    padding: 1.2rem 1.8rem;
}
.card-footer-detail p {
    margin-bottom: 0px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.05em;
    color: #CEF5F5;
}
.card-footer-detail p span {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    margin-left: 2rem;
}

.form-trx-approve .form-label {
    font-family: 'Gilroy-Medium', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    color: #002060;
    margin-bottom: 13px;
}
.form-trx-approve .form-control {
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.24);
    border-radius: 8px;
    border: none;
}
.form-trx-approve .form-control::placeholder {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #6A6A6A;
}

.custom-switch {
    height: 50px;
    display: flex;
    align-items: flex-start;
    padding-left: 3.5rem;
}
.custom-switch .custom-control-label::before {
    height: 1.5rem;
    top: 0rem;
    left: -3.3rem;
    width: 2.75rem;
    border-radius: 1.5rem;
}
.custom-switch .custom-control-label::after {
    top: calc(.11rem + 2px);
    left: calc(-3.3rem + 2px);
    width: calc(1.3rem - 4px);
    height: calc(1.3rem - 4px);
}
.custom-switch .custom-control-input:checked~.custom-control-label::after {
    transform: translateX(1.4rem);
}

.btn-range-period {
    background: #EBF1FF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 8px;
    border: none;
    /* padding: .8rem 1.3rem; */
    cursor: pointer;
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0px 24px 0px 10px;
}
.btn-range-period input {
    border: none;
    background: transparent;
    width: 184px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: #002060;
}
.btn-range-period input:focus, .btn-range-period input:active {
    outline: none;
    border: none;
}
.btn-range-period i {
    position: absolute;
    top: 9px;
    right: 12px;
    font-size: 20px;
}
.btn-range-period:active {
    outline: none;
}
.btn-range-period:focus {
    outline: none;
}
.btn-range-period svg {
    fill: #597393;
    margin-left: 5px;
}
.title-chart {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 18px;
    color: #597393;
    margin-bottom: 0px;
}
.bold-chart {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #002060;
    display: flex;
    align-items: flex-start;
    margin-bottom: 0px;
}
.bold-chart span {
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #002060;
}

.label-chart-payment {
    position: absolute;
    right: 7rem;
}
.label-chart-payment .wrapper-chart {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.label-chart-payment .wrapper-chart .label-color {
    height: 10px;
    width: 10px;
    background: black;
    border-radius: 50%;
    margin-right: 10px;
}
.label-chart-payment .wrapper-chart .label-text {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 12px;
    color: #002060;
    margin-bottom: 0px;
}



.star-ratings {
    unicode-bidi: bidi-override;
    color: #FFFFFF;
    font-size: 40px;
    position: relative;
    margin: 0;
    padding: 0;
}
.star-ratings .fill-ratings {
    color: #EFCB68;
    padding: 0;
    position: absolute;
    z-index: 1;
    display: block;
    top: 0;
    left: 0;
    overflow: hidden;
}

.star-ratings .fill-ratings span {
    display: inline-block;
}
.star-ratings .fill-ratings .empty-ratings {
    padding: 0;
    display: block;
    z-index: 0;
}

.btn-transparant {
    border: none;
    background: transparent;
    padding: 0px;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.btn-transparant:hover {
    outline: none;
    border: none;
}
.btn-transparant:focus {
    outline: none;
    border: none;
}
.btn-transparant:active {
    outline: none;
    border: none;
}
.btn-transparant p {
    margin-bottom: 0px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 130%;
    color: #252525;
    margin-left: 5px;
    margin-top: 2px;
}
p.detail-sampling {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 130%;
    color: #002060;
}

.alert-report {
    background: rgba(29, 51, 79, 0.05);
    /* opacity: 0.05; */
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 8px;
    padding: 0.6rem 1.4rem;
}
.alert-report .header-alert-report {
    margin-bottom: .4rem;
}
.alert-report .header-alert-report p {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    color: #002060;
    margin-bottom: 0px;
}
.alert-report .header-alert-report button {
    border: none;
    background: transparent;
}
.alert-report .desc-alert {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #6A6A6A;
    margin-bottom: 0px;
}

.filter-reporting {
    background: #FFFFFF;
    box-shadow: 0px 8px 8px rgba(190, 190, 190, 0.08);
    border-radius: 8px;
    position: relative;
    height: 93px;
    margin-top: 2.4rem;
    padding: 0px 1rem;
}
.filter-reporting .row {
    height: 93px;
    align-items: center;
}
.filter-reporting .row .column {
    padding: 5px 2rem;
}
.filter-reporting .row .column.separate-key {
    padding-right: 100px;
}
.filter-reporting .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
}
.filter-reporting .form-group .with-icon {
    position: relative;
}
.filter-reporting .form-group .with-icon img {
    position: absolute;
    top: 4px;
    right: 0;
}
.filter-reporting .label-reporting {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 126.7%;
    color: #BEBEBE;
}
.filter-reporting .input-reporting {
    width: 100%;
    border: none;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 120%;
    color: #252525;
}
.filter-reporting .input-reporting:focus {
    border: none;
    outline: none;
}
.filter-reporting .input-reporting:active {
    border: none;
    outline: none;
}
.filter-reporting .input-reporting::placeholder {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 120%;
    color: #BEBEBE;
}
.separate-start {
    border-right: 1px solid #BEBEBE;
}
.separate-end {
    border-left: 1px solid #BEBEBE;
    /* border-right: 1px solid #BEBEBE; */
}
.separate-key {
    border-left: 1px solid #BEBEBE;
}
.filter-reporting button {
    border: none;
    background: transparent;
    background: #002060;
    box-shadow: 0px 16px 16px rgba(0, 32, 96, 0.24);
    border-radius: 8px;
    position: absolute;
    right: 0;
    top: 0;
    height: 93px;
    width: 93px;
}
.notice {
    display: flex;
    align-items: flex-start;
    margin: 1.5rem 0px;
}
.notice img {
    margin-right: 1.4rem;
}
.notice p {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.002em;
    color: #BEBEBE;
}

.card-reporting {
    text-decoration: none;
    filter: drop-shadow(0px 16px 16px rgba(190, 190, 190, 0.16));
    background: white;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 110px;
    width: 100%;
    padding: 1rem 1.5rem;
    cursor: pointer;
}
.card-reporting .bg {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
    z-index: -1;
}
.card-reporting .download {
    display: none;
}
.card-reporting .download .print {
    cursor: pointer;
}
.card-reporting .download img {
    margin-right: 10px;
}
.card-reporting .download i {
    color: white;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    text-align: center;
}
.card-reporting label {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #252525;
    opacity: 0.5;
}
.card-reporting h1 {
    font-family: 'Gilroy-Bold', sans-serif!important;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #252525;
}
.card-reporting p {
    margin-bottom: 0px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 14px;
    color: #FFFFFF;
}
.card-reporting:hover {
    background: #002060;
}
.card-reporting:hover .download {
    display: block;
}
.card-reporting:hover label {
    color: #FFFFFF;
}
.card-reporting:hover h1 {
    color: #FFFFFF;
}

.collapse-kategori {
    display: flex;
    align-items: center;
}
.collapse-kategori .for-line {
    height: 1px;
    width: 100%;
    background: #DEDEDE;
    margin-right: 10px;
}
.collapse-kategori .collapse-notice {
    text-decoration: none;
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 130%;
    color: #00A3A0;
    margin-right: 15px;
}
.collapse-kategori .collapse-notice::after {
    content: url('../image/collapse-up.svg');
    position: absolute;
    top: 2px;
    right: 0;
    margin-right: 15px;
}
.collapse-kategori .collapse-notice.down::after {
    content: url('../image/collapse-down.svg');
    position: absolute;
    top: 2px;
    right: 0;
    margin-right: 15px;
}
.collapse-subkategori {
    padding-top: .5rem;
}
.collapse-subkategori .title {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 130%;
    color: #BEBEBE;
}
.collapse-subkategori .subkategori {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 130%;
    color: #6A6A6A;
    display: flex;
    align-items: center;
}
.collapse-subkategori .subkategori span {
    width: 4px;
    height: 4px;
    background: #00A3A0;
    border-radius: 50%;
    display: block;
    margin-right: 1rem;
}

.btn-filter {
    border: none;
    background: transparent;
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
    color: #002060;
    padding: .5rem 1rem;
}
.btn-filter:focus, .btn-filter:active {
    border: none;
    outline: none;
}
.btn-filter img {
    margin-right: .6rem;
}
.btn-shadow {
    background: #FFFFFF;
    border: 1px solid #BEBEBE;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    color: #BEBEBE;
}

.base-view-error h1 {
    font-family: 'Gilroy-Bold';
    font-weight: bold;
    font-size: 120px;
    color: #252525;
}
.base-view-error p {
    font-size: 30px;
}


/* MANAJEMEN ROLE */
.checkbox {
    /*display: block;*/
    position: relative;
    line-height: 25px;
    padding-left: 25px;
    padding-right: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.cbver2 {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border: 1px solid #A2BFFD;
    border-radius: 5px;
}

.cbver1 {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background: #FFFFFF;
    border: 1px solid #002060;
    box-sizing: border-box;
    border-radius: 2px;
}

.checkbox:hover input ~ .cbver2 {
    border: 1px solid #002060;
}

.checkbox:hover input ~ .cbver1 {
    border: 1px solid #002060;
}

.checkbox input:checked ~ .cbver2 {
    border-left: 3px solid #4778d9;
    background-color: transparent;
}

.checkbox input:checked ~ .cbver1 {
    background-color: #00D9D5;
    border: 1px solid #00D9D5;
}

.checkbox input:checked ~ .v1 {
    border-left: 3px solid #4778d9;
    background-color: transparent;
    color: #4778d9;
}

.cbver2:after {
    content: "";
    position: absolute;
    display: none;
}

.cbver1:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox input:checked ~ .cbver2:after {
    display: block;
}

.checkbox input:checked ~ .cbver1:after {
    display: block;
}

.checkbox .cbver2:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #4778d9;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkbox .cbver1:after {
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.sub-permission{
    margin-left: 17px;
}

.label-permission{
    text-transform: capitalize;
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    color: #002060;
    margin-bottom: 1rem;
}

.label-subpermission{
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 150%;
    color: #6A6A6A;
    text-transform: capitalize;
    margin-left: 3px;
}
/* END MANAJEMEN ROLE */


.preview-report {
    background: #FFFFFF;
    box-shadow: 0px 8px 8px rgb(190 190 190 / 8%);
    border-radius: 8px;
    padding: 2rem;
}
.preview-report .btn-download {
    background: #002060;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 10px 22px;
}
.preview-report .btn-download i {
    margin-right: 1rem;
    color: #FFFFFF;
}
.preview-report .btn-download p {
    margin-bottom: 0px;
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    color: #FFFFFF;
}
.preview-report .preview-report-title {
    text-align: center;
    margin-bottom: 1.5rem;
}
.preview-report .preview-report-title h1 {
    font-family: 'Proxima-Bold';
    font-style: normal;
    font-weight: normal;
    font-size: 26px;
    line-height: 120%;
    color: #252525;
}
.preview-report table {
    border-collapse: collapse;
}
.preview-report table th, .preview-report table td {
    border: 1px solid #252525;
    padding: .5rem;
    font-size: 12px;
}
.preview-report table th {
    /* font-size: 14px; */
}
.preview-report table td {
    /* font-size: 14px; */
}

.btn-report-excel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #4DFF9D;
    border: 1px solid #207245;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 12px 0px;
}
.btn-report-excel img {
    margin-right: .5rem;
}
.btn-report-excel p {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: #207245;
    margin-bottom: 0px;
}
.btn-report-pdf {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #FF8572;
    border: 1px solid #6A332A;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 12px 0px;
}
.btn-report-pdf img {
    margin-right: .5rem;
}
.btn-report-pdf p {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: #6A332A;
    margin-bottom: 0px;
}

.list-var-format {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    color: #002060;
    margin-bottom: 0px;
    border: none;
    padding: 0;
    outline: none;
}
.btn-var-format {
    background: transparent;
    border: none;
    outline: none;
}

.format-lihat-contoh {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
    color: #002060 !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    border: none;
    background: transparent;
}
.format-lihat-contoh img {
    margin-right: 5px;
}



.modal-xl-full {
    max-width: 100%;
    margin: 0px auto;
}
.modal-preview-format .modal-header {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    border-bottom: 0px;
    align-items: center;
    padding: 1rem 2rem;
}
.modal-preview-format .modal-header .modal-title {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 120%;
    color: #252525;
}
.modal-preview-format .modal-header .for-close {
    border: 1px solid #002060;
    filter: drop-shadow(0px 20px 50px rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    color: #002060;
    margin-right: 15px;
    outline: none;
    background-color: #fff;
    padding: 11px 33px;
}
.modal-preview-format .modal-header .for-save {
    background: #002060;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    color: #FFFFFF;
    border: none;
    outline: none;
    padding: 11px 33px;
}
table.format-table.table td {
    border-top: none;
    padding: 0px;
}
table.format-table.table.table-bordered td {
    /* border: 1px solid #000; */
    padding: .5rem;
}


.card-detail-format {
    background: #FFFFFF;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 0.16);
    border-radius: 8px;
    padding: 1.5rem;
}

.card-select-format {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    border-radius: 8px;
    min-height: 220px;
    margin-bottom: 2.5rem;
}
.card-select-format p.pilih {
    font-family: 'Gilroy-Medium';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    color: #002060;
    margin-bottom: 0px;
    margin-left: .5rem;
}
.card-select-format p.desc {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #BEBEBE;
    margin-bottom: 0px;
}

.card-body-covid {
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 16px;
    padding: 2rem 2rem 0rem 2rem;
    margin-bottom: 1rem;
    position: relative;
}
.card-body-covid .card-judul {
    background: white;
    position: absolute;
    top: -12px;
}

.dz-image img {
    width: 100%;
    height: 100%;
}
.dropzone.dz-started .dz-message {
	display: block !important;
}
.dropzone {
	border: 2px dashed #DEDEDE !important;;
}
.dropzone .dz-preview.dz-complete .dz-success-mark {
    opacity: 1;
}
.dropzone .dz-preview.dz-error .dz-success-mark {
    opacity: 0;
}
.dropzone .dz-preview .dz-error-message{
	top: 144px;
}

.list-img-lampiran .img-lampiran {
    width: 100%;
    height: auto;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.list-img-lampiran .img-lampiran:hover {opacity: 0.7;}
.modal-custom {
    display: none;
    position: fixed;
    z-index: 1030;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}
.modal-content-custom {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}
#captionCustom {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}
.modal-content-custom, #captionCustom {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
.close-custom {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
.close-custom:hover,
.close-custom:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
.preorder-param {
    background: #EBEDF7;
    border-radius: 4px;
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 130%;
    color: #75798A;
    padding: 2px 5px;
}
.stok-param {
    font-weight: 400;
}

.btn-tooltip {
    border: none;
    background: transparent;
}
.btn-tooltip:active, .btn-tooltip:focus, .btn-tooltip:hover {
    outline: none;
    box-shadow: none;
}



.tab-vertical .nav.nav-tabs {
    float: left;
    display: block;
    margin-right: 0px;
    border-bottom: 0;
}

.tab-vertical .nav.nav-tabs .nav-item {
    margin-bottom: 6px;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 25%);
}

.tab-vertical .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    background: #fff;
    padding: 17px 49px;
    color: #71748d;
    background-color: #dddde8;
    -webkit-border-radius: 4px 0px 0px 4px;
    -moz-border-radius: 4px 0px 0px 4px;
    border-radius: 4px 0px 0px 4px;
}

.tab-vertical .nav-tabs .nav-link.active {
    color: #5969ff;
    background-color: #fff !important;
    border-color: transparent !important;
}

.tab-vertical .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 0px !important;
}

.tab-vertical .tab-content {
    overflow: auto;
    -webkit-border-radius: 0px 4px 4px 4px;
    -moz-border-radius: 0px 4px 4px 4px;
    border-radius: 0px 4px 4px 4px;
    background: #fff;
    padding: 30px;
    box-shadow: 0px 16px 24px rgba(190, 190, 190, 25%);
}

.text-keterangan{
    padding-left: 0px !important;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 14px;
    color: #BEBEBE;
    padding: 5px 0px;
}

.modal-custom-medium {
    max-width: 680px;
}
.modal-custom-medium .modal-content {
    /* max-width: 360px; */
    background: #FFFFFF;
    box-shadow: 0px 50px 50px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    /* overflow: hidden; */
}
.modal-custom-medium .modal-body {
    padding: 2rem;
}
.modal-custom-medium .modal-head {
    display: flex;
    align-items: center;
    margin-bottom: 2.7rem;
}
.modal-custom-medium .modal-head img {
    margin-right: .7rem;
}
.modal-custom-medium .modal-head h5 {
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 120%;
    color: #252525;
    margin-bottom: 0px;
}
.modal-custom-medium .modal-wrapper p {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 120%;
    color: #252525;
    margin-bottom: 2rem;
}
.modal-custom-medium .modal-wrapper p b {
    font-weight: 600;
    color: #002060;
}
.modal-custom-medium .modal-wrapper .form-group label {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    color: #252525;
}
.modal-custom-medium .modal-wrapper .form-group h5 {
    font-family: 'Gilroy-Regular', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    color: #002060;
}
/*LOADING OVERLAY*/
#loading-overlay{
    display: none;
}

#loading-overlay.active{
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: #00000096;
    padding-top: 20%;
}


.spinner {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.spinner > div {
    background-color: #ff6411;
    height: 100%;
    width: 6px;
    display: inline-block;
    
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% { 
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% { 
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}

#divMon {
    margin: 20px 0 0 0;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}


label.error {
    color: #F64662 !important;
}