:root {
    --primary: #6599ef;
    --primary-gradient: #6599ef;
    --primary-strong: #5589df;
    --primary-soft: rgba(101, 153, 239, 0.14);
    --primary-soft-bg: #F4F5FA;
    --text: #0f1217;
    --text_2: #A8AAAE;
    --text_3: #ffffffad;
    --danger: #f64b3c;
    --warning: #e7b110;
    --success: #76bf4c;
    --gray-light: #F8F7FA;
    --gray-lighter: #F4F5FA;
    --gray-border: #DBDADE;
    --dark-bg: #455367;
}
::selection {
    background: rgba(115, 103, 240, 0.15);
}
body {
    font-family: "Rubik", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    margin: 0;
}
a {
    text-decoration: none;
    color: var(--primary);
}
.text-muted {
    color: var(--text_2) !important;
}
.btn {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    border-radius: 12px;
    padding: 13px 24px;
}
.btn-sm {
    border-radius: 6px;
    padding: 6px 14px;
}
.btn-primary {
    background: var(--primary);
}
.btn-outline {
    background: #fff;
    color: var(--primary);
    border: 1px solid #DBDADE !important;
}
.btn-outline:hover,
.btn-outline:focus {
    background: #f3f6ff;
    color: var(--primary);
}
.btn-outline.light {
    background: #ffffff;
    color: var(--primary);
    border: 1px solid #E3E1FC !important;
}
.btn-outline-danger {
    background: #fff3f3;
    color: #c81e1e !important;
    border: 1px solid rgba(246, 75, 60, 0.4) !important;
    font-weight: 600;
    box-shadow: 0 10px 20px rgba(246, 75, 60, 0.12);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: var(--danger);
    color: #fff !important;
    border-color: var(--danger) !important;
}
label {
    margin-bottom: 8px;
}
.form-control {
    font-size: 14px;
    padding: 13px 20px;
    border-radius: 12px;
    box-shadow: 0px 5px 10px 0px rgba(115, 103, 240, 0.1) !important;
    border: none !important;
    outline: none !important;
}
.nav-tabs {
    margin-bottom: 20px;
    border-bottom: 1px solid #E3E1FC;
    gap: 16px;
}
.nav-tabs .nav-item .nav-link {
    outline: none !important;
    box-shadow: none !important;
    border: none;
    color: var(--text_2);
    padding: 10px 6px;
    font-weight: 500;
    position: relative;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--primary-strong);
    background-color: transparent !important;
    border: none;
    font-weight: 700;
}
.nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-strong) 0%, #8ab0ff 100%);
    border-radius: 999px;
}
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0px 5px 10px 0px rgba(115, 103, 240, 0.1) !important;
}
.lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 200px;
    pointer-events: none;
}

.line {
    position: relative;
    width: 1px;
    height: 100%;
    top: 0;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}
.line::after {
    content: "";
    display: block;
    position: absolute;
    height: 15vh;
    width: 100%;
    top: -50%;
    left: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        #ffffff 75%,
        #ffffff 100%
    );
    animation: drop 6s 0s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.line:nth-child(1)::after {
    animation-delay: 4s;
}
.line:nth-child(2)::after {
    animation-delay: 3.2s;
}
.line:nth-child(3)::after {
    animation-delay: 3.6s;
}
.line:nth-child(4)::after {
    animation-delay: 3s;
}
.line:nth-child(5)::after {
    animation-delay: 4.1s;
}
.line:nth-child(6)::after {
    animation-delay: 3.4s;
}
.line:nth-child(7)::after {
    animation-delay: 3.8s;
}
@keyframes drop {
    0% {
        top: -50%;
    }
    100% {
        top: 110%;
    }
}
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
.form-check-input:focus {
    border-color: #6599ef;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(138 96 255 / 22%);
}
.fw-600 {
    font-weight: 600;
}
.fw-500 {
    font-weight: 500;
}
.bg-success {
    background-color: var(--success) !important;
}
.bg-danger {
    background-color: var(--danger) !important;
}
.bg-warning {
    background-color: var(--warning) !important;
}
.bg-primary {
    background-color: var(--primary) !important;
}
.btn-warning {
    color: #fff !important;
}
.nowrap {
    white-space: nowrap;
}
a[disabled] {
    cursor: no-drop;
    position: relative;
    overflow: hidden;
}
a[disabled]:before {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
}
#toolbarContainer {
    display: none;
}
#datatable {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 1px 3px 10px 0px rgba(115, 103, 240, 0.1);
}
#datatable tr {
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px !important;
    position: relative;
}
#datatable.datatable-full tr td,
#datatable.datatable-full tr th {
    width: 100%;
}
#datatable tr td,
#datatable tr th {
    border: none !important;
    text-align: left !important;
    padding: 14px 18px;
}
#datatable tr th {
    font-weight: 500;
}
#datatable tr td {
    font-weight: 400;
    color: var(--text_2);
    border-top: 1px solid #DBDADE !important;
}
.table-responsive::-webkit-scrollbar {
    width: 0;
}
.dt-layout-cell.dt-layout-end {
    width: 100%;
}
.dt-search {
    width: 100%;
}
.dt-search label {
    display: none;
}
.dt-search .dt-input {
    font-size: 14px;
    padding: 13px 20px !important;
    border-radius: 12px !important;
    box-shadow: 0px 5px 10px 0px rgba(115, 103, 240, 0.1) !important;
    border: none !important;
    outline: none !important;
    background-color: #fff !important;
    width: 100%;
    margin-bottom: 8px;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
    justify-content: center;
}
.dt-paging-button {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    color: var(--text_2) !important;
}
div.dt-container .dt-paging .dt-paging-button:hover,
div.dt-container .dt-paging .dt-paging-button:hover {
    color: var(--primary) !important;
    background: transparent !important;
}
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background-color: var(--primary) !important;
    color: #fff !important;
}
div.dt-container .dt-search input {
    margin-left: 0;
}
.dt-layout-table {
    overflow: auto;
    margin-bottom: 20px !important;
}
.badge {
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
}
.text-end-desktop {
    text-align: end;
}
.col-form-label {
    display: grid;
    align-content: center;
    text-align: right;
}
.input-group-text {
    background-color: #fff;
    font-size: 14px;
    border: none;
    padding: 13px 20px;
    box-shadow: 0px 5px 10px 0px rgba(115, 103, 240, 0.1) !important;
}
.input-group .input-group-text {
    border-radius: 0 12px 12px 0;
}
.input-group .input-group-text:not(:last-child) {
    border-radius: 12px 0 0 12px;
}
input.form-control[type="file"] {
    position: relative;
}
input.form-control[type="file"]::before {
    content: "Pilih File";
    display: block;
    position: absolute;
    left: 0;
    width: 110px;
    background: #f9f9f9;
    top: 0;
    bottom: 0;
    align-content: center;
    text-align: center;
}
textarea.form-control {
    line-height: 26px;
}
.cke_notifications_area {
    display: none !important;
}
.text-start-mobile {
    text-align: end;
}

.iziToast {
    font-family: "Rubik", sans-serif;
    border: none;
    border-radius: 8px;
    overflow: hidden;
}
.iziToast > .iziToast-body .iziToast-message {
    color: #fff;
}
.iziToast > .iziToast-body .iziToast-title {
    color: #fff;
    font-weight: 500;
}
.iziToast.iziToast-color-green {
    background: #34cb3b;
}
.iziToast.iziToast-color-red {
    background: #ed4852;
}
.iziToast.iziToast-color-orange {
    background: #f3b809;
}
.iziToast.iziToast-color-blue {
    background: #03a9f4;
}
.iziToast > .iziToast-body .iziToast-icon,
.iziToast > .iziToast-close {
    filter: grayscale(0) invert(1);
}
.iziToast-wrapper-topCenter {
    top: 90px;
}