/*! MAIN CSS */
/*! MAIN CSS */
/*! MAIN CSS */

@font-face {
font-family: 'Poppins';
src: url(/fonts-backup/Poppins-Regular.woff) format('truetype');
font-weight: 400;
font-style: normal;
}
html, body, * {
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

* {
font-size: 10.5px;
/* border: 1px solid red; */
font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html {
position: relative;
min-height: 100%;
padding: 0;
}

body {
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
}

#tabulasi_konten {
height: 91.1vh;
/* overflow: scroll; */
/* margin-bottom: 30px; */
}

.form-hr {
margin-top: 5px;
margin-bottom: 5px;
border: 0;
border-top: 1px solid var(--border);
opacity: 1;

}

::placeholder {
/* font-style: italic !important; */
font-size: 10px !important;
}

table caption {
caption-side: top;
font-weight: 500;
color: var(--text-color);
}

.title-top {
font-weight: 600;
color: var(--text-color);
}

.card {
border: 1px solid var(--border) !important;
--bs-card-border-color: var(--border) !important;
/* --bs-card-bg: var(--border) !important; */
}

.card, .card-body, .card-header, .card-footer {
border-radius: 0;

}

.card-header, .card-header:first-child {
background-color: var(--card-header);
color: var(--text-color);
border-radius: 0;
}

.card-body {
background-color: var(--card-body);
}

.card-footer {
background-color: var(--card-body);
color: var(--text-color);
font-size: 10px;
padding-top: 8px;
padding-bottom: 8px;
}

.main {
display: flex;
flex-grow: 1;
}

.workspace-left, .workspace-right {
display: none;
}

.workspace-center {
width: 100%;
}



.content {
flex-grow: 1;
background-color: var(--background);
border-left: 1px solid var(--border);
}

.merah {
color: #D82E2E !important;
}

.hijau {
color: #00A000 !important;
}

.form-control {
padding: .375rem;
border-radius: 0;
}

.form-control:focus {
border-color: var(--border);
box-shadow: 0 0 0 1px var(--border);
}

/* .form-control placeholder */
.form-control::placeholder {
color: #c0c0c0;
font-style: italic;
}

.accordion-button, .accordion-button:not(.collapsed) {
background-color: var(--border);
color: var(--text-color);
box-shadow: none;
}

/*! Tabulasi MAIN */
#scroller {
border: none;
}

.tab-content {
padding: 0;
}

.nav-tabs a {
border: 0 !important;
background-color: transparent !important;
}

.nav-tabs li.active {
/* border-bottom: 2px solid #3d84a8; */
background-color: var(--nav-hover);
}

.nav-tabs li a.active {
    background-color: var(--nav-hover) !important;
    /* pointer-events: none; */
}

.nav-tabs li a:not(.active):hover {
    background-color: #dbdbdb !important;
}


.nav-tabs li a {
width: 100%;
text-align: center;
height: 23px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: #666;
padding-left: 2px;
}

ul.nav.nav-tabs {
display: flex;
justify-content: flex-start;
align-items: flex-start;
overflow: hidden;
}

.nav-tabs li {
flex-basis: fit-content;
min-width: fit-content;
display: flex;
align-items: flex-start;
margin: 0 !important;
}

.tabs-wrapper {
position: relative;
}

.scroller-btn.inactive {
opacity: 0.3;
pointer-events: none;
}

/*! Tabulasi MAIN */


/*! Tabulasi Content */
.wrapperx {
background-color: var(--wrapperx);
width: 100%;
border-radius: 0px;
border: 1px solid var(--border);
font-size: 10px;
}

.nav-tabs-content a {
border: 0 !important;
background-color: transparent !important;
}

.nav-tabs-content li.active {
border-bottom: 2px solid #e59603;
background-color: transparent;
font-weight: 600;
}

.nav-tabs-content li {
border-bottom: 2px solid transparent;
}

.nav-tabs-content li a {
width: 100%;
text-align: center;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: var(--text-color);
}

ul.nav.nav-tabs-content {
display: flex;
justify-content: flex-start;
align-items: flex-start;
overflow: hidden;
}

.nav-tabs-content li {
padding-left: 10px;
padding-right: 10px;
flex-basis: fit-content;
min-width: fit-content;
display: flex;
align-items: flex-start;
margin: 0 !important;
}

.tabs-wrapperx {
position: relative;
border-bottom: 1px solid var(--border);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate
.paginate_button.current:hover {
font-weight: 600 !important;
}

#tabel_daftar_pelanggan_length {
display: none;
}

#tabel_daftar_pelanggan_filter {
display: none;
}

#tabel_daftar_pelanggan_paginate {
float: inline-start;
}

table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:before {
display: none;
}

table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
display: none;
}

table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting_asc_disabled,
table.dataTable thead>tr>th.sorting_desc_disabled,
table.dataTable thead>tr>td.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting_asc_disabled,
table.dataTable thead>tr>td.sorting_desc_disabled {
padding-right: 10px !important;
}


/*! MAIN CSS */
/*! MAIN CSS */
/*! MAIN CSS */

/*! styling nav */
/*! styling nav */
/*! styling nav */
.dropdown-nav {
height: 25px;
padding: 0;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
border: transparent;
}

.dropdown-toggle {
color: var(--text-color);
}

.dropdown-menu {
border-radius: 0;
background-color: var(--nav-hover);
}

.dropdown-item {
color: var(--text-color);
}

.dropdown-item:focus, .dropdown-item:hover {
color: var(--text-color);
background-color: var(--nav-hover);
}

.dropdown-item.active, .dropdown-item:active {
color: var(--text-color);
background-color: var(--topbar-hover);
}


nav {
background-color: var(--primary-color);
height: 25px;
}

.nav-link {
color: var(--text-color);
padding-left: 6px !important;
padding-right: 6px !important;
width: auto;
text-align: center;
}

.text {
color: var(--text-color) !important;
margin-bottom: 0;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
background-color: var(--nav-hover);
color: var(--text-color);
height: 25px;
}

.navbar-nav .nav-link:hover {
background-color: var(--nav-hover);
color: var(--text-color);
height: 25px;
}

/* Hilangkan hover khusus untuk nav-home */
.nav-link#nav-aplikasi:hover {
background-color: transparent !important;
color: inherit !important;
cursor: default;
}


.img-home {
width: 13px;
position: absolute;
margin-left: -18px;
}

.nav-link:focus {
color: var(--text-color);
}

/*! styling nav */
/*! styling nav */
/*! styling nav */

/*! TOP BAR */
/*! TOP BAR */
/*! TOP BAR */
.topbar {
display: flex;
background-color: var(--content);
height: 53px;
}

.item-top {
width: 70px;
padding-top: 8px;
cursor: pointer;
}

.item-top:hover {
background-color: #dbdbdb;
}

.item-top i {
font-size: 18px;
color: #272727;
text-align: center;
margin-bottom: 2px;
}

.item-top p {
text-align: center;
font-size: 10px;
line-height: 10px;
color: var(--text-color);
margin-top: 0px;
}

.item-top a {
text-decoration: none;
color: #272727;

}

.item-top.active {
text-decoration: none;
color: #272727;
background-color: var(--topbar-hover);
}

.divider {
margin-top: 3px;
border-radius: 3px;
margin-left: 0px;
margin-right: 0px;
width: 1px;
height: 90%;
background-color: var(--border);
}

.img-topbar {
margin-top: -4px;
height: 22px;
margin-bottom: 3px;
}

.img-kantor {
margin-top: -6px;
width: 33px;
margin-bottom: -2px;
}

.img-gender {
margin-top: -6px;
width: 29px;
margin-bottom: 2px;
}

.icon-tambah {
width: 15px;
}

.icon-edit {
width: 13px;
}

.icon-side-search {
width: 11px;
height: 11px;
margin: 5px;
margin-left: 0;
margin-top: 7px;
}

.input-side-search {
width: 100%;
text-decoration: none;
}

.input-side-search:focus-visible {
outline: none;
}

.input-side-search::placeholder {
color: #8c8c8c;
font-style: italic;
}

.nav-side-search {
display: flex;
width: 100%;
padding: 5px;
background-color: transparent !important;
text-decoration: none;
border-bottom: 1px solid var(--border);
}

.icon-aksi {
width: 15px;
margin-right: 4px;
transition: transform 0.3s ease;
}

.icon-collapse {
width: 15px;
margin-right: 4px;
margin-left: 3px;
}

.icon-collapse.rotate {
transform: rotate(180deg);
}

/* Biar transisi collapse lebih smooth */
.collapse {
transition: height 0.35s ease;
}

.icon-hapus {
width: 13px;
}

.icon-rp {
width: 13px;
}

.logotop {
width: 46%;
padding: 10px;
}

.logosoal {
width: 90%;
padding: 10px;
}

.logotmk {
width: 100%;
height: auto;
}

.logo-dinas {
    width: 35% !important;
    /* height: 90% !important; */
}


/*! TOP BAR */
/*! TOP BAR */
/*! TOP BAR */

/*! styling nav */
/*! styling nav */
/*! styling nav */

.nav-item-profil {
width: 16px;
height: 16px;
margin-left: 15px;
display: flex;
}

.nav-item-profil img {
border-radius: 50%;
width: 100%;
height: 100%;
}

.bulat-inggris {
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}

.bulat-inggris img {
width: 100%;
height: 100%;
border-radius: 50%;
}

.bulat-indonesia {
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}

.bulat-indonesia img {
width: 100%;
height: 100%;
border-radius: 50%;
}

.bulat-putih {
width: 15px;
height: 15px;
background-color: white;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
cursor: pointer;
}

.bulat-hitam {
width: 15px;
height: 15px;
background-color: black;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
cursor: pointer;
}

/*! styling nav */
/*! styling nav */
/*! styling nav */

/*! styling TOP Tabulasi */
/*! styling TOP Tabulasi */
/*! styling TOP Tabulasi */
.top-tabulasi {
padding-bottom: 0;
width: 100%;
height: 25px;
background-color: transparent;
align-items: flex-end;
border-top: 1px solid var(--top-tabulasi) !important;
border-bottom: 1px solid var(--topaksi-color);
}

.btn-tab {
display: flex;
align-items: center;
width: fit-content;
padding-left: 5px;
padding-right: 10px;
color: #272727;
}

.btn-tab p {
margin-bottom: 0;
margin-left: 4px;
color: var(--text-color);
line-height: 11px;
}

.btn-tab i {
padding: 3px;
font-size: 11px;
}

.btn-kiri {
background-color: transparent;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
border-radius: 0;
}

/*! styling TOP Tabulasi */
/*! styling TOP Tabulasi */
/*! styling TOP Tabulasi */

/*! TOP AKSI Start */
/*! TOP AKSI Start */
/*! TOP AKSI Start */
.top-aksi {
display: flex !important;
align-items: center !important;
width: 100%;
height: 24px;
background-color: transparent;
border: 1px solid var(--topaksi-color);
border-top: none;
padding-left: 3px;
}

.top-aksi button {
background-color: transparent;
border: none;
color: #272727;
}

.top-aksi button:hover {
background-color: var(--topbar-hover);
color: #272727;
border-radius: 0px;
}

.top-aksi button.active {
background-color: var(--topaksi-hover) !important;
color: #272727 !important;
border-radius: 0px !important;
}

.divider-top-aksi {
margin-top: 1px;
border-radius: 3px;
margin-left: 3px;
margin-right: 3px;
width: 1px;
height: 70%;
background-color: var(--border);
}

.aksi-search {
border-radius: 5px;
border-radius: 0;
border: 1px solid var(--border);
background-color: var(--search-bg);
color: var(--text-color);
}

.aksi-search:focus-visible {
outline: none;
}

.top-aksi p {
margin-top: 1px;
}

/*! TOP AKSI END */
/*! TOP AKSI END */
/*! TOP AKSI END */

/*! Table Style */
/*! Table Style */
/*! Table Style */
.table-style {
border-bottom: 1px solid var(--table-bottom) !important;
width: 100% !important;
}

.table-style th {
text-align: center !important;
vertical-align: middle !important;
background-color: var(--table-bg) !important;
box-shadow: none !important;
/* box-sizing: border-box; */
border: 0.5px solid var(--border) !important;
border-collapse: collapse;
font-weight: 500 !important;
padding: 5px !important;
color: var(--text-color) !important;
}

.table-style td {
vertical-align: middle !important;
padding: 4px !important;
background-color: var(--td-bg);
color: var(--text-color);
border-right: 0.5px solid var(--border) !important;
border-left: 0.5px solid var(--border) !important;
}

.td-validasi {
    background-color: #f9f9f9 !important;
}

.table-style-pengalaman-kerja {
border-bottom: 1px solid var(--table-bottom) !important;
}

.table-style-pengalaman-kerja th {
text-align: center !important;
vertical-align: middle !important;
/* background-color: var(--table-bg) !important; */
box-shadow: none !important;
/* box-sizing: border-box; */
border: 0.5px solid var(--border) !important;
border-collapse: collapse;
font-weight: 500 !important;
padding: 5px !important;
color: var(--text-color) !important;
}

.table-style-pengalaman-kerja td {
vertical-align: middle !important;
padding: 4px !important;
/* background-color: var(--td-bg); */
color: var(--text-color);
border-right: 0.5px solid var(--border) !important;
border-left: 0.5px solid var(--border) !important;
}

.th-pengalaman-kerja {
background-color: #fff !important;
}

.th-pengalaman-kerja-gelap {
background-color: #EFEFEF !important;
}

.th-atas-pengalaman-kerja-dl {
background-color: var(--table-bg) !important;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
--bs-table-bg-type: var(--td-bg-odd);
}
.table-striped>tbody>tr:nth-of-type(even)>* {
--bs-table-bg-type: var(--td-bg-even);
}

table.dataTable {
border-collapse: collapse !important;
}

.btn-lihat-profil {
background-color: transparent;
border: none;
text-decoration: none;
color: rgb(66, 66, 255);
cursor: pointer;
align-content: end;
align-items: end;
}

.btn-lihat-profil:hover {
background-color: transparent;
text-decoration: none;
color: rgb(38, 38, 195);
}

/*! Table Style */
/*! Table Style */
/*! Table Style */



/*! user profil */
/*! user profil */
/*! user profil */
.profil-show {
position: absolute;
right: 5px;
z-index: 9999;
margin-right: 5px;
width: 35%;
}

.gear-show {
position: absolute;
top: 26px;
right: 0px;
z-index: 9999;
}

.profile-title {
width: 100%;
border-bottom: 1px solid var(--border);
margin-bottom: 10px;
}

.profile-title h2 {
margin-bottom: 0;
font-weight: 600;
font-size: 14px;
}

.profile-child {
margin-bottom: 5px;
display: flex;
border-bottom: 1px solid var(--border);
}

.profile-child p {
margin-bottom: 2px;
width: 35%;
}

.profile-child i {
width: 5%;
text-align: center;
}

.profile-child span {
width: 60%;
}

/*! user profil */
/*! user profil */
/*! user profil */

/*! MODAL STYLE */
/*! MODAL STYLE */
/*! MODAL STYLE */
.modal {
z-index: 1101 !important;
}

.modal-header {
background-color: #fff;
color: #272727;
border-radius: 0;
padding: 0;
}

.modal-footer {
background-color: #fff;
color: #272727;
border-radius: 0;
justify-content: start;
padding: 3px 5px;
font-size: 8.5px;
}

.modal-title {
font-size: 11px !important;
line-height: 11px;
padding: .5rem !important;
}

.modal-body {
background-color: var(--input-bg);
color: var(--text-color);
}

.close-button {
color: #272727;
font-size: 16px !important;
padding: 1px 9px;
border-radius: 0 !important;
border: none;
background-color: transparent;
}

.close-button:hover {
background-color: #D82E2E;
color: #fff !important;
}

.img-tanya {
width: 30px;
margin-right: 5px;
padding: 3px;
}

.btn-close {
font-size: 15px !important;
/* color: #fff !important; */
color: #000000 !important;
box-shadow: none;
--bs-btn-close-bg: transparent;
opacity: 1;
padding: 2px;
margin-right: 0px !important;
margin-top: -6px !important;
padding-top: 0px !important;
cursor: pointer;
}

.btn-close:hover {
background-color: #D82E2E;
color: #fff !important;
opacity: 1;
}

/*! MODAL STYLE */
/*! MODAL STYLE */
/*! MODAL STYLE */

/*! STYLING BUTTON */
/*! STYLING BUTTON */
/*! STYLING BUTTON */

.btn-done {
background-color: #D82E2E;
border: 1px solid #D82E2E;
height: 23px;
font-size: 10px;
color: #fff;
border-radius: 0px;
padding: 2px 3px;
width: fit-content;
}

.btn-done:hover {
background-color: transparent;
color: #D82E2E;
border: 1px solid #D82E2E;
}

.btn-cancel {
background-color: transparent;
border: 1px solid #adadad !important;
height: 23px;
font-size: 10px;
color: var(--text-color);
border-radius: 0px;
padding: 2px 5px;
width: fit-content;
}

.btn-cancel:hover {
background-color: #e1e1e1;
color: var(--text-color);
border: 1px solid #adadad;
}

.btn-real {
background-color: #e1e1e1 !important;
border: 1px solid #adadad !important;
color: #000;
border-radius: 0;
padding: 2px 5px !important;
}

.btn-real:hover, .btn-real:focus, .btn-real:active {
background-color: #fff !important;
border: 1px solid #909090 !important;
color: #000;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate {
color: var(--text-color) !important;
}

.paginate_button {
background-color: transparent !important;
border: 1px solid var(--border) !important;
color: var(--text-color) !important;
border-radius: 0 !important;
/* padding: 2px 5px !important;
margin-left: 0 !important;
margin-right: 5px !important; */
margin-top: 4px !important;
}

.paginate_button:hover {
background-color: #fff !important;
border: 1px solid #e8e8e8 !important;
color: #000 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate
.paginate_button.current:hover {
background-color: #E1E1E1 !important;
color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate
.paginate_button:active {
border: 1px solid #e8e8e8 !important;
background: #e8e8e8 !important;
color: #000 !important;
box-shadow: inset 0 0 3px #e8e8e8;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
margin-left: 0 !important;
}

/* Wrapper pagination */
.pagination {
    margin-top: 4px !important;
}

/* Tombol pagination */
.pagination .page-link {
    background-color: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-color) !important;
    border-radius: 0 !important;
    margin-left: 0 !important;
}

/* Hover */
.pagination .page-link:hover {
    background-color: #fff !important;
    border: 1px solid #e8e8e8 !important;
    color: #000 !important;
}

/* Active / current page */
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover {
    background-color: #E1E1E1 !important;
    color: #000 !important;
    font-weight: 600 !important;
    border: 1px solid #e8e8e8 !important;
}

/* Disabled */
.pagination .page-item.disabled .page-link {
    color: var(--text-color) !important;
    background-color: transparent !important;
    border: 1px solid var(--border) !important;
    cursor: not-allowed;
}

/* Active click effect */
.pagination .page-link:active {
    border: 1px solid #e8e8e8 !important;
    background: #e8e8e8 !important;
    color: #000 !important;
    box-shadow: inset 0 0 3px #e8e8e8;
}


#swift_left i {
color: #ff9b00;
}

/*! STYLING BUTTON */
/*! STYLING BUTTON */
/*! STYLING BUTTON */

/*! FOOTER START */
/*! FOOTER START */
/*! FOOTER START */
footer {
width: 71.2%;
position: fixed;
bottom: 0;
padding: 4px 14px;
border-top: 1px solid var(--footer-border);
background-color: var(--footer-color);
color: var(--text-color);
}

/*! FOOTER END */
/*! FOOTER END */
/*! FOOTER END */

.title-content p {
font-size: 12px;
font-weight: 600;
}

.title-content span {
font-weight: 500;
margin-left: 125px;
font-size: 12px;
}

.inputan, .input-group-text1 {
height: 25px !important;
border-radius: 0;
font-size: 10px !important;
color: var(--input-text) !important;
background-color: var(--input-bg) !important;
border: 1px solid #dddddd5b !important;
}

.inputan::placeholder {
color: var(--input-text) !important;
}

.inputfile {
line-height: 20px;
}

.title-form {
margin-bottom: 5px;
font-weight: 600;
}

.select2 {
height: 26px !important;
}

.select2-container {
width: 100%;
z-index: 1000;
}

.select2-container--default .select2-selection--single {
height: 25px !important;
border: 1px solid #ddd;
border-radius: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 23px;
color: var(--input-text) !important;
background-color: var(--input-bg) !important;
border: 1px solid #dddddd5b !important;
}

.select2-results__option {
text-transform: capitalize !important;
}


.select2-container--default .select2-selection--single, .select2-dropdown {
color: var(--input-text) !important;
background-color: var(--input-bg) !important;
border: 1px solid #dddddd5b !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default
.select2-results__option--disabled {
background-color: var(--input-bg) !important;
border: 1px solid #dddddd5b !important;
/* color: var(--input-text) !important; */
color: #767676 !important;
padding: 0px;
padding-left: 6px;
}

#select2-create_kota_sekarang-container {
text-transform: capitalize !important;
}

.select2-container.select2-container--default.select2-container--open {
z-index: 5000;
}

.head-form {
background-color: var(--head-form);
margin-top: -2px;
border-bottom: 1px solid var(--border);
margin-bottom: 5px;
}

.number-tab-progress {
border: 1px solid orange !important;
border-radius: 50% !important;
/* background-color: orange; */
width: 18px;
color: var(--text-color);
margin-right: 5px;
}

.style-pagination {
background-color: transparent !important;
}

.badge-aktif {
color: green;
border: 1px solid green;
background-color: transparent;
padding: 1px 7px;
}

.badge-aktif:hover {
background-color: green;
color: #fff;
}


#form_filter {
background-color: var(--background);
border: 1px solid var(--border);
margin-bottom: 10px;
}

#form_filter p {
font-size: 12px;
font-weight: 600;
margin-bottom: 0;
}

.icon-dapartment {
width: 12px;
height: 12px;
margin-right: 5px;
}

.table-dinamis {
height: 570px;
overflow-y: scroll;

}

::-webkit-scrollbar {
width: 0px;
height: 0px;
}

/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
display: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 10px;
display: none;
}

caption {
caption-side: top;
color: var(--text-color);
}

.p_caption {
padding-top: .5rem;
padding-bottom: .5rem;
color: var(--bs-secondary-color);
text-align: left;
caption-side: top;
font-weight: bold;
margin-bottom: 0;
line-height: 14px;
}

#pos_alert {
position: absolute;
right: 5px;
top: 5px;
z-index: 99999999;
}

.xmark {
color: red;
font-weight: 600;
font-size: 1.5em;
background-color: transparent;
border: none;
position: relative;
right: 0;
}

.text-alert {
white-space: nowrap;
}

.alert {
z-index: 99999999999999999999;
border-radius: 0 !important;
padding-right: 20px;
margin-top: 26px;
}

.alert button {
position: absolute;
right: 0;
}

#alert_info {
background-color: #3967ff;
color: #fff;
}

#alert_warning {
background-color: #ff9b00;
color: #fff;
}

#alert_danger {
background-color: #ff0000;
color: #fff;
}

#alert_success {
background-color: #00a000;
color: #fff;
}

.alert-persentase {
border: 1px solid #ffafaf;
color: #ff0000;
height: 5vh;
padding: 5px;
margin-bottom: 0;
}

.dataTables_filter {
display: none;
}

.dataTables_length {
display: none;
}

.icon-cancel-btn {
width: 8px;
height: 8px;
margin-right: 3px;
margin-top: -1px;
}

.icon-add-btn {
width: 11px;
height: 11px;
margin-right: 1px;
margin-top: -1px;
}

.icon-next-btn {
width: 11px;
height: 11px;
margin-right: 3px;
margin-top: -1px;
}

.icon-delete-btn {
width: 11px;
height: 10px;
margin-right: 1px;
margin-top: -2px;
}

.title-filter {
font-weight: 600;
}

.sub-item-level-1 {
padding-left: 20px !important;
}

.sub-item-level-2 {
padding-left: 40px !important;
}

.sub-item-level-3 {
padding-left: 60px !important;
}


.tab-content>.active {
display: block;
padding-bottom: 15px;
}

.nav-item-child {
padding-left: 0;
}

.nav-item-child li {
list-style: none;
}

/* .nav-item-child li a {
padding-left: 2rem !important;
} */

.nav .expanded>a {
background-color: #c0c0c0;
color: var(--text-color);
border-radius: 0;
}

.dropdown-toggle::after {
vertical-align: middle;
}

.box-form-input {
padding: 5px;
}

.box-form-input p {
margin-bottom: 0;
font-weight: 600;
color: var(--text-color);
}

.br-form-input {
border-right: 1px solid var(--border);
}

.form-label {
color: var(--text-color);
margin-bottom: 5px;
}

.form-select {
font-size: 11px;
border-radius: 0;
}

.small-label, .small-label b {
font-size: 8px;
font-style: italic;
margin-top: -2px;
line-height: 10px;
margin-bottom: 5px !important;
}


.add_button,
.remove_button {
border: solid 1px;
border-radius: 0%;
padding: 2px 7px;
text-decoration: none;
color: #272727;
}

.btn_add {
display: flex;
justify-content: center;
align-items: end;
padding-left: 0;
}

.side-tab {
width: 100%;
float: left;
border: 1px solid #ccc;
}

.side-tab button {
display: block;
background-color: inherit;
color: var(--text-color);
padding: 4px 5px;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
width: 100%;
display: flex;
align-items: center;
}

.side-tab button span {
line-height: 10px;
margin-left: 6px;
}

.side-tab button:hover {
background-color: #dbdbdb;
}

.side-tab button.active {
background-color: #b3b3b3;
}

.open-close-side {
float: left;
width: 100%;
}

.form-table {
border: 1px solid #6666663a;
height: 20px;
}

.btn-tambah-table {
border: 1px solid green !important;
}

.btn-tambah-table p {
font-weight: 500 !important;
}

.btn-ubah-table {
border: 1px solid #db8e02 !important;
}

.btn-ubah-table p {
font-weight: 500 !important;
}

.btn-hapus-table {
border: 1px solid red !important;
}

.deskripsi-form {
margin-bottom: 0;
margin-left: 5px;
}

.icon-view {
width: 20px;
}

.icon-image {
width: 100px;
height: 100px;
}

.icon-image-popup {
width: 100%;
}

.drag-drop-area {
border: 2px dashed #ccc;
padding: 10px;
height: 56% !important;
display: flex;
align-items: center;
justify-content: center;
/* margin-top: -150px; */
margin-top: 10px;
/* height: 150px; */
}

.drag-drop-area.dragover {
border-color: #000;
background-color: #f0f0f0;
}

.top-menu-dropdown {
padding: 10px;
padding-left: 20px;
border: 1px solid #cfcfcf
}

.top-menu-dropdown p {
opacity: 0.9;
}

.top-menu-dropdown a {
color: var(--text-color);
text-decoration: none;
line-height: 15px;
display: block;
}

.top-menu-dropdown a:hover {
text-decoration: underline;
}

.a_top-menu-dropdown {
margin: 15px 0;
}

.menu-aksi-cepat .dropdown-aksi-cepat {
background-color: #B3B3B3;
border-radius: 0%;
}

.menu-aksi-cepat .dropdown-aksi-cepat.collapsed {
background-color: transparent !important;
}

/* .nav-gear:hover {
animation: rotate 3s linear infinite;
} */

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

100% {
transform: rotate(360deg);
}
}

.side-gear a {
display: block;
padding: 3px 5px;
width: 100%;
text-decoration: none;
color: var(--text-color);
}

.side-gear a:hover {
background-color: #c0c0c0;
}

.input-box {
position: relative;
width: 100%;
height: 100%;
margin: 0 20px;
background-color: #fff;
border-radius: 6px;
transition: all 0.5s ease-in-out;
}

.input-box.open {
max-width: 450px;
}

.input-box input {
display: none;
position: relative;
width: 100%;
height: 100%;
font-size: 11px;
font-weight: 400;
color: #333;
/* padding: 0 15px; */
border: none;
border-radius: 3px;
outline: none;
transition: all 0.5s ease-in-out;
}

.input-box.open input {
display: block;
padding: 0 15px 0 5px;
}

.input-box .search {
position: absolute;
top: 0;
left: 0px;
width: 10px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
cursor: pointer;
}

.input-box.open .search {
left: 160px;
}

.search .search-icon {
font-size: 30px;
color: #1c1c1c;
}

.result-search {
position: fixed;
background-color: #fff;
width: 146px;
margin-top: 2px;
border-radius: 3px;
border: 1px solid #e0e0e0;
z-index: 9999;
}

.result-search li {
list-style: none;
}

.result-search ul {
padding-left: 0;
}

.result-search a {
color: var(--text-color);
padding: 5px;
display: block;
width: 100%;
border-bottom: 1px solid #eaeaea;
text-decoration: none;
font-size: 10px;
}

.result-search a:hover {
background-color: #f1f1f1;
}

.radio-tile-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.radio-tile-group .input-container {
position: relative;
height: 7rem;
width: 7rem;
margin: 0.5rem;
}

.radio-tile-group .input-container .radio-button {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
cursor: pointer;
}

.radio-tile-group .input-container .radio-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 2px solid var(--nav-hover);
border-radius: 5px;
padding: 1rem;
transition: transform 300ms ease;
}

.radio-tile-group .input-container .radio-tile .icon svg {
fill: var(--nav-hover);
width: 3rem;
height: 3rem;
}

.radio-tile-group .input-container .radio-tile .radio-tile-label {
text-align: center;
font-size: 10px;
line-height: 9px;
letter-spacing: 1px;
color: var(--nav-hover);
}

.radio-tile-group .input-container .radio-button:checked+.radio-tile {
background-color: var(--nav-hover);
border: 2px solid var(--nav-hover);
color: var(--text-color);
transform: scale(1.1, 1.1);
}

.radio-tile-group .input-container .radio-button:checked+.radio-tile .icon svg {
fill: white;
background-color: var(--nav-hover);
}

.radio-tile-group .input-container .radio-button:checked+.radio-tile .radio-tile-label {
color: var(--text-color);
background-color: var(--nav-hover);
}

.rotate90 {
transform: rotate(-90deg);
}

#salam.active {
background-color: transparent !important;
}

#salam a:hover {
background-color: transparent !important;
}

#topbar_item {
height: 53px;
}

#dinamisTabulasi {
width: -webkit-fill-available;
}

#dinamisTabulasi .nav {
border-bottom: 1px solid var(--border);
}

.panah-btn-side-child {
background-color: var(--border);
}

.have-child.active {
background-color: #c0c0c0;
}

.item-top {
position: relative;
}

.tooltiptext {
white-space: nowrap;
visibility: hidden;
width: auto;
background-color: #666;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
top: 50%;
left: 70px;
margin-top: -16px;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}

.tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #666 transparent transparent;
}

.item-top:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

#childKonten {
height: 72vh;
}

.dropdown-aksi-cepat {
padding: 3px !important;
}

.item-akses-cepat {
border-bottom: 1px solid var(--border) !important;
}

.item-akses-cepat button {
padding: 4.5px;
}

.folder-tree {
border: none !important;
}

.side-content-main {
height: 100%;
}

.side-content-main img {
width: 12px !important;
}

.disable {
pointer-events: none;
cursor: default;
opacity: 0.8;
justify-content: center;
}

.icon-count {
background-color: var(--bs-tertiary-bg);
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
}

.icon-count img {
width: 15px
}

.background-card-body {
background-color: var(--background) !important;
}

.custom-file {
position: relative;
display: inline-block;
width: 100%;
}

.custom-file-label {
display: block;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.25rem;
cursor: pointer;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* input[type="file"] {
position: absolute;
opacity: 0;
z-index: -1;
} */


.nav-sidebar .nav-item .nav-link {
display: flex;
align-items: center;
width: 100%;
}

.nav-sidebar .nav-item .nav-link p {
margin-bottom: 0;
margin-left: 5px;
}

.nav-pills .show>.nav-link {
background-color: transparent;
border-radius: 0;
color: var(--text-color);
}


.nav-pills .nav-link.active {
    background-color: #c9c9c9;
    /* color: var(--text-color); */
    border-radius: 0;
}

.nav-sidebar .nav-item .nav-link:not(.active):hover {
    background-color: #dbdbdb;
    color: var(--text-color);
    border-radius: 0;
}

.nav-pills .nav-link.active:hover {
    background-color: #c0c0c0;
}


.side-shortcut {
width: 44px !important;
overflow-y: auto;
height: 100%;
background-color: var(--background);
border-right: 1px solid var(--border);
}

.side-shortcut ul li a {
flex-direction: column;
justify-content: center;
align-items: center;
height: 48px;
border-radius: 0 !important;
}

.side-shortcut ul li a img {
width: 18px !important;
}

.side-shortcut ul li a i {
font-size: 16px;
}

.hide-side {
background-color: #d9d9d9 !important;
border: 1px solid #d9d9d9 !important;
height: 23px
}

.btn-side {
height: 23px !important;
border-radius: 0;
border: 1px solid #9090906f;
background-color: var(--merah-btn-side);
/* color: var(--text-color); */
/* border-top: 2px solid var(--top-tabulasi) !important; */
}

.btn-side:hover {
/* border: 1px solid #9090906f; */
color: var(--merah-btn-side);
}

.sidenav-filter {
height: 100%;
background-color: var(--background);
border: 1px solid var(--border);
margin-right: 17px;
display: block;
width: 173px;
}

.divider-side {
margin: 0 !important;
border-top: 1px solid var(--border) !important;
opacity: 1;
}

.pengkinian {
border-bottom: 1px solid var(--border);
margin-bottom: 5px;
}

.pengkinian p {
margin-bottom: 0;
color: var(--text-color);
}

.side-content-main {
border-bottom: 1px solid var(--border);
height: 23px;
padding: 0;
}

.side-content-main.active {
border-bottom: 1px solid transparent;
}

.loading-table {
position: absolute;
top: 42px;
right: 10px;
z-index: 999999;
height: 100vh;
width: 100%;
}

.nav-tabs .nav-item .nav-link {
border-radius: 0;
}

.nav-tabs .nav-item .nav-link.active {
background-color: var(--nav-hover) !important;
color: var(--text-color) !important;
}

.btn-closenew {
    width: 10px;
    height: auto;
    padding: 2px;
    margin-right: 5px;
    margin-left: -5px !important;
    cursor: pointer;
    filter: brightness(0) saturate(100%);
    opacity: 1;
}

.btn-closenew:hover {
    /* background-color: #D82E2E; */
    filter: brightness(0) saturate(100%) invert(17%) sepia(93%) saturate(7493%) hue-rotate(357deg) brightness(95%) contrast(110%);
    transform: scale(1.2);
}



/* width% */
.width-1 {
width: 1% !important;
}

.width-2 {
width: 2% !important;
}

.width-3 {
width: 3% !important;
}

.width-4 {
width: 4% !important;
}

.width-5 {
width: 5% !important;
}

.width-6 {
width: 6% !important;
}

.width-7 {
width: 7% !important;
}

.width-8 {
width: 8% !important;
}

.width-9 {
width: 9% !important;
}

.width-10 {
width: 10% !important;
}

.width-11 {
width: 11% !important;
}

.width-12 {
width: 12% !important;
}

.width-13 {
width: 13% !important;
}

.width-14 {
width: 14% !important;
}

.width-15 {
width: 15% !important;
}

.width-16 {
width: 16% !important;
}

.width-17 {
width: 17% !important;
}

.width-18 {
width: 18% !important;
}

.width-19 {
width: 19% !important;
}

.width-20 {
width: 20% !important;
}

.width-21 {
width: 21% !important;
}

.width-22 {
width: 22% !important;
}

.width-23 {
width: 23% !important;
}

.width-24 {
width: 24% !important;
}

.width-25 {
width: 25% !important;
}

.width-26 {
width: 26% !important;
}

.width-27 {
width: 27% !important;
}

.width-28 {
width: 28% !important;
}

.width-29 {
width: 29% !important;
}

.width-30 {
width: 30% !important;
}

.width-31 {
width: 31% !important;
}

.width-32 {
width: 32% !important;
}

.width-33 {
width: 33% !important;
}

.width-34 {
width: 34% !important;
}

.width-35 {
width: 35% !important;
}

.width-36 {
width: 36% !important;
}

.width-37 {
width: 37% !important;
}

.width-38 {
width: 38% !important;
}

.width-39 {
width: 39% !important;
}

.width-40 {
width: 40% !important;
}

.width-41 {
width: 41% !important;
}

.width-42 {
width: 42% !important;
}

.width-43 {
width: 43% !important;
}

.width-44 {
width: 44% !important;
}

.width-45 {
width: 45% !important;
}

.width-46 {
width: 46% !important;
}

.width-47 {
width: 47% !important;
}

.width-48 {
width: 48% !important;
}

.width-49 {
width: 49% !important;
}

.width-50 {
width: 50% !important;
}

.width-51 {
width: 51% !important;
}

.width-52 {
width: 52% !important;
}

.width-53 {
width: 53% !important;
}

.width-54 {
width: 54% !important;
}

.width-55 {
width: 55% !important;
}

.width-56 {
width: 56% !important;
}

.width-57 {
width: 57% !important;
}

.width-58 {
width: 58% !important;
}

.width-59 {
width: 59% !important;
}

.width-60 {
width: 60% !important;
}

.width-61 {
width: 61% !important;
}

.width-62 {
width: 62% !important;
}

.width-63 {
width: 63% !important;
}

.width-64 {
width: 64% !important;
}

.width-65 {
width: 65% !important;
}

.width-66 {
width: 66% !important;
}

.width-67 {
width: 67% !important;
}

.width-68 {
width: 68% !important;
}

.width-69 {
width: 69% !important;
}

.width-70 {
width: 70% !important;
}

.width-75 {
width: 70% !important;
}

.width-81 {
width: 81% !important;
}

.width-82 {
width: 82% !important;
}

.width-83 {
width: 83% !important;
}

.width-84 {
width: 84% !important;
}

.width-85 {
width: 85% !important;
}

.width-86 {
width: 86% !important;
}

.width-87 {
width: 87% !important;
}

.width-88 {
width: 88% !important;
}

.width-89 {
width: 89% !important;
}

.width-90 {
width: 90% !important;
}

.width-91 {
width: 91% !important;
}

.width-92 {
width: 92% !important;
}

.width-93 {
width: 93% !important;
}

.width-94 {
width: 94% !important;
}

.width-95 {
width: 95% !important;
}

.width-96 {
width: 96% !important;
}

.width-97 {
width: 97% !important;
}

.width-98 {
width: 98% !important;
}

.width-99 {
width: 99% !important;
}

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

/* width % */

/* ----------------------------------------------------------------------------------------------------------------- */

/* width px */
.width-1-px {
width: 1px !important;
}

.width-2-px {
width: 2px !important;
}

.width-3-px {
width: 3px !important;
}

.width-4-px {
width: 4px !important;
}

.width-5-px {
width: 5px !important;
}

.width-6-px {
width: 6px !important;
}

.width-7-px {
width: 7px !important;
}

.width-8-px {
width: 8px !important;
}

.width-9-px {
width: 9px !important;
}

.width-10-px {
width: 10px !important;
}

.width-11-px {
width: 11px !important;
}

.width-12-px {
width: 12px !important;
}

.width-13-px {
width: 13px !important;
}

.width-14-px {
width: 14px !important;
}

.width-15-px {
width: 15px !important;
}

.width-16-px {
width: 16px !important;
}

.width-17-px {
width: 17px !important;
}

.width-18-px {
width: 18px !important;
}

.width-19-px {
width: 19px !important;
}

.width-20-px {
width: 20px !important;
}

.width-21-px {
width: 21px !important;
}

.width-22-px {
width: 22px !important;
}

.width-23-px {
width: 23px !important;
}

.width-24-px {
width: 24px !important;
}

.width-25-px {
width: 25px !important;
}

.width-26-px {
width: 26px !important;
}

.width-27-px {
width: 27px !important;
}

.width-28-px {
width: 28px !important;
}

.width-29-px {
width: 29px !important;
}

.width-30-px {
width: 30px !important;
}

.width-31-px {
width: 31px !important;
}

.width-32-px {
width: 32px !important;
}

.width-33-px {
width: 33px !important;
}

.width-34-px {
width: 34px !important;
}

.width-35-px {
width: 35px !important;
}

.width-36-px {
width: 36px !important;
}

.width-37-px {
width: 37px !important;
}

.width-38-px {
width: 38px !important;
}

.width-39-px {
width: 39px !important;
}

.width-40-px {
width: 40px !important;
}

.width-41-px {
width: 41px !important;
}

.width-42-px {
width: 42px !important;
}

.width-43-px {
width: 43px !important;
}

.width-44-px {
width: 44px !important;
}

.width-45-px {
width: 45px !important;
}

.width-46-px {
width: 46px !important;
}

.width-47-px {
width: 47px !important;
}

.width-48-px {
width: 48px !important;
}

.width-49-px {
width: 49px !important;
}

.width-50-px {
width: 50px !important;
}

.width-51-px {
width: 51px !important;
}

.width-52-px {
width: 52px !important;
}

.width-53-px {
width: 53px !important;
}

.width-54-px {
width: 54px !important;
}

.width-55-px {
width: 55px !important;
}

.width-56-px {
width: 56px !important;
}

.width-57-px {
width: 57px !important;
}

.width-58-px {
width: 58px !important;
}

.width-59-px {
width: 59px !important;
}

.width-60-px {
width: 60px !important;
}

.width-61-px {
width: 61px !important;
}

.width-62-px {
width: 62px !important;
}

.width-63-px {
width: 63px !important;
}

.width-64-px {
width: 64px !important;
}

.width-65-px {
width: 65px !important;
}

.width-66-px {
width: 66px !important;
}

.width-67-px {
width: 67px !important;
}

.width-68-px {
width: 68px !important;
}

.width-69-px {
width: 69px !important;
}

.width-70-px {
width: 70px !important;
}

.width-81-px {
width: 81px !important;
}

.width-82-px {
width: 82px !important;
}

.width-83-px {
width: 83px !important;
}

.width-84-px {
width: 84px !important;
}

.width-85-px {
width: 85px !important;
}

.width-86-px {
width: 86px !important;
}

.width-87-px {
width: 87px !important;
}

.width-88-px {
width: 88px !important;
}

.width-89-px {
width: 89px !important;
}

.width-90-px {
width: 90px !important;
}

.width-91-px {
width: 91px !important;
}

.width-92-px {
width: 92px !important;
}

.width-93-px {
width: 93px !important;
}

.width-94-px {
width: 94px !important;
}

.width-95-px {
width: 95px !important;
}

.width-96-px {
width: 96px !important;
}

.width-97-px {
width: 97px !important;
}

.width-98-px {
width: 98px !important;
}

.width-99-px {
width: 99px !important;
}

.width-100-px {
width: 100px !important;
}

/* width px */

/* ----------------------------------------------------------------------------------------------------------------- */

.button-akses-cepat {
pointer-events: none;
border-bottom: 1px solid #a8a8a8 !important;
}

.jarak-kiri-akses-cepat {
margin-left: 15px !important;
}

.modal-50 {
top: 18%;
max-width: 50%;
}

.top-20 {
top: 20%;
}

.top-18 {
top: 18%;
}

.top-15 {
top: 15%;
}

.top-10 {
top: 10% !important;
}

.textareaip {
height: 100px;
}

.deskripsi-list {
height: 100px;
overflow: scroll;
}

#header_content_id {
margin-bottom: 5px;
}


.side-tab.akses-cepat {
height: 33.6em;
border-left: none !important;
border-bottom: none !important;
border-top: none !important;
border-right: 1px solid var(--border);
}

#tablemasa_berlaku {
display: table !important;
width: 100% !important;
visibility: visible !important;
}

.page-content-main {
padding: 10px;
}

.form-pelamar {
background-color: #F1F1F1 !important;

}

.status-nilai {
cursor: context-menu
}

.status-nilai, .status-nilai input {
cursor: pointer;
display: flex;
justify-content: center;
}

.status-nilai .input-group-text {
width: 17px;
padding: 0px;
height: 100%;
display: flex;
justify-content: center;
border-radius: 0;
height: 17px !important;
}

.status-nilai .input-group-text i {
color: #fff;
}

.status-nilai input {
flex: unset !important;
background-color: transparent !important;
padding: 1px 5px;
height: 17px !important;
width: 20px !important;
}

.status-nilai .warning {
background-color: #ffc107;
}

.status-nilai .secondary {
background-color: #6C757D;
}

.status-nilai .success {
background-color: #198754;
}

.status-nilai .danger {
background-color: #DC3545;
}

.cursor-pointer {
cursor: pointer !important;
}

.note-editable ol {
padding-left: 14px;
font-size: 16px;
color: #000000;
line-height: 1.6;
}

.note-editable ol li {
margin-bottom: 10px;
padding-left: 6px;
}

.note-editable {
background-color: white;
}

.title-to {
pointer-events: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
background: url('/img/icon/arow-down.png') no-repeat center center !important;
opacity: 0.5 !important;
background-size: 16px 16px !important;
width: 30px !important;
}

.rotate-180 {
transform: rotate(180deg);
transition: transform 0.3s ease-in-out;
}

.icon-arrow {
transition: transform 0.3s ease-in-out;
}

.tab-header-content {
padding-left: 0;
margin-bottom: 0;
display: flex;
}

.btn-aksi {
display: flex;
align-items: center;
}

.error-message {
color: red;
font-size: 10px;
margin-top: 3px;
}


.figure-profile {
margin-bottom: 0;
height: 260px;
border: 2px solid var(--border) !important;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}

.figure-profile img {
height: 100%;
width: auto;
}

.figure-profile-atas {
margin-bottom: 0;
height: 200px;
border: 2px solid var(--border) !important;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}

.figure-profile-atas img {
height: 100%;
width: auto;
}

.show-informasi-table td {
height: 31px;
border-bottom: 1px solid var(--border)
}

.show-informasi-table caption {
margin-bottom: 10px;
font-weight: 600;
}

.modal-req-hapus {
max-width: 50% !important;
width: 100% !important;
top: 1%;
}

.col-req-hapus {
border: 1px solid var(--border);
}

.col-req-hapus figure {
    width: 100%;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.col-req-hapus figure img {
    width: 100%;
    height: auto;
    padding: 10px;
}

.col-req-hapus p {
    margin-bottom: 0;
}

.col-req-hapus h1 {
    font-size: 10px;
    margin-bottom: 0;
    font-weight: 500;
}

.req-table {
    margin-bottom: 0;
}

.req-table td {
    background-color: var(--td-bg-odd) !important;
}

.req-table p {
    margin-bottom: 0 !important;
}

.req-table .space-table {
    padding: 1px !important;
}

.req-table figure {
    padding: 5px 10px;
}

.body-req-hapus {
    padding: 15px;
    border: 1px solid var(--border);
    border-top: none;
}

.body-req-hapus p {
    margin-bottom: 3px;
}

.underline-request {
    border-bottom: 1px solid var(--border);
}

.icon-paper-plane {
    position: absolute;
    width: 24px;
    height: auto;
    margin-top: -23px;
    margin-left: -10px;
}

.btn-real:hover .icon-delete-btn.icon-paper-plane {
    margin-top: -25px;
    margin-left: -5px;
}

.body-req-hapus .input-request {
    margin: 3px 0;
}

.title-menu {
    margin: 8px 0px 8px 0px;
}
/*! End css */

.hover-btn-hapus {
    cursor: pointer;
    display: inline-flex;
}

.hover-btn-hapus:hover {
    background-color: rgb(160, 48, 48) !important;
}

.hover-btn-hapus:hover label {
    color: #ffffff !important;
}

.text-hover-btn-hapus {
    color: rgb(160, 48, 48);
}

.hover-btn-edit {
    cursor: pointer;
    display: inline-flex;
}

.hover-btn-edit:hover {
    background-color: #0078D7 !important;
}

.hover-btn-edit:hover .text-hover-btn-edit {
    color: #ffffff !important;
}

.text-hover-btn-edit {
    color: #0066b7;
}



.hover-btn-preview {
    display: flex;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.hover-btn-preview:hover {
    background-color: #F67A51 !important;
}

.hover-btn-preview:hover .text-hover-btn-tambah {
    color: #ffffff !important;
}


.hover-btn-tambah:hover {
    background-color: #3d812e !important;
}

.hover-btn-tambah:hover label {
    color: #ffffff !important;
}

.text-hover-btn-tambah:hover {
    color: #ffffff !important;
}

.hover-btn-status:hover {
    background-color: #F0AE42 !important;
}

.hover-btn-status:hover label {
    color: #ffffff !important;
}

.text-hover-btn-status:hover {
    color: #ffffff !important;
}

.hover-btn-export:hover {
    background-color: #00733B !important;
}

.hover-btn-export:hover label {
    color: #ffffff !important;
}

.text-hover-btn-export:hover {
    color: #ffffff !important;
}

.btn-simpan-pelanggaran {
    background-color: transparent !important;
    color: #3d812e !important;
    border: 1px solid #56b941 !important;
}

.btn-simpan-pelanggaran:hover {
    background-color: #3d812e !important;
    color: #ffffff !important;
    border: 1px solid #3d812e !important;
}

.btn-simpan-prestasi {
    background-color: transparent !important;
    color: #3d812e !important;
    border: 1px solid #56b941 !important;
}

.btn-simpan-prestasi:hover {
    background-color: #3d812e !important;
    color: #ffffff !important;
    border: 1px solid #3d812e !important;
}

.btn-batal-pelanggaran {
    background-color: transparent !important;
    color: rgb(160, 48, 48) !important;
    border: 1px solid rgb(160, 48, 48) !important;
}

.btn-batal-pelanggaran:hover {
    background-color: rgb(160, 48, 48) !important;
    color: #ffffff !important;
    border: 1px solid rgb(160, 48, 48) !important;
}

.btn-batal-prestasi {
    background-color: transparent !important;
    color: rgb(160, 48, 48) !important;
    border: 1px solid rgb(160, 48, 48) !important;
}

.btn-batal-prestasi:hover {
    background-color: rgb(160, 48, 48) !important;
    color: #ffffff !important;
    border: 1px solid rgb(160, 48, 48) !important;
}

.custom-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #3d812e;
    border: 1px solid #d1d1d1;
    border-radius: 3px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    position: relative;
    transition: all 0.2s ease;
}

.custom-checkbox:checked {
    background-color: #3d812e;
    border-color: #3d812e;
}

.custom-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.back-to-top {
    position: fixed;
    bottom: 40px;
    right: 260px;
    display: none;
}

.back-to-top button {
    padding: 9px 13px;
}

.back-to-top button:hover {
    background-color: var(--nav-hover);
    border-color: var(--nav-hover);
}

.back-to-top button i {
    font-size: 20px;
}

option:disabled {
    background: #e9ecef !important;
    color: #c0c0c0 !important;
}

.disabled-eye {
    pointer-events: auto;
    cursor: not-allowed;
    position: relative;
}

.disabled-eye[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
}

.disabled-eye[data-tooltip]:hover::before {
    content: "";
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1001;
}

.disabled-eye[data-tooltip]::after,
.disabled-eye[data-tooltip]::before {
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}

.garis-abu {
    color: #a8a8a8;

}

.anchor-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 5px 4px 5px;
    /* border-radius: 4px; */
    text-decoration: none;
    color: #272727;
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
    margin-right: 0.1em;
}

.top-profil {
    width: 15px; /* semua icon konsisten */
    height: auto;
}

.click-profil:hover,
.click-gear:hover,
.anchor-profile:hover {
    background-color: #fff;
    color: var(--text-color);
    cursor: pointer;
    /* transform: scale(1.1); */
}

/* Active state */
.click-profil.active,
.click-gear.active {
    background-color: var(--hover-active);
    color: var(--text-color);
}



.murid-list {
    max-height: 120px;
    overflow-y: auto;
    padding: 6px;
    background: #f9f9f9;
    /* border-radius: 4px; */
}

.guru-row {
    cursor: pointer;
}

.link-tristek {
    color: var(--text-color);
    text-decoration: none;
}

.link-tristek:hover {
    color: #0d6efd;
    text-decoration: none;
}

.row-hover:hover td {
    color: #0d6efd;
}

.footer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: end;

    background: #fff;
    z-index: 999;
    font-size: 12px;
}

.konten-scroll {
    overflow-y: scroll;
    height: 72em;
}

.text-biru {
    color: #0d6efd !important;
}

.text-oren {
    color: #F67A51 !important;
}

.text-hijau {
    color: #3d812e !important;
}

.btn-crud-new {
    cursor: pointer;
}