* {
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
}

body {
    background-color: #eff5f6;
}

.main-contain {
    min-height: 100vh;
    display: flex;
}

/** Sidebar CSS */
.sidebar {
    background-color: #eff5f6;
    width: 250px;
    padding: 24px 0px 24px 25px;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    font-size: 14px;
    position: fixed;
    overflow: auto;
    height: 100vh;
}

.head-title {
    font-weight: 700;
    box-sizing: border-box;
    padding-top: 6px;
}

.head-logo {
    box-sizing: border-box;
    width: 40px;
    height: fit-content;
}

.sidebar .menu-list {
    overflow: auto;
    height: 470px;
    width: 220px;
    margin-left: -10px;
    margin-right: -90px;
    /* background-color: #002956; */
    padding-left: 10px;
}

.sidebar .menu-list .list-item form button {
    color: #737373;
    box-sizing: border-box;
    padding: 10px 0 10px 10px;
    font-weight: 500;
    /* width: 190px; */
    border: 0;
    text-align: left;
    background-color: transparent !important;
}

.sidebar .menu-list a .list-item {
    color: #737373;
    box-sizing: border-box;
    padding: 10px 0 10px 10px;
    font-weight: 500;
    width: 190px;
    margin: 3px 0;
}

.sidebar .menu-list .list-item form button:hover {
    background-color: #89bcffac !important;
    border-radius: 8px;
    color: #004aad;
    transition: all ease-in 0.1s;
}

.sidebar .menu-list a .list-item:hover {
    background-color: #89bcffac;
    border-radius: 8px;
    color: #004aad;
    transition: all ease-in 0.1s;
}

.sidebar .menu-list a .list-item.active {
    background-color: #004aad;
    /* background-image: linear-gradient(#ff8a00, #e52e71) */
    /* background: #004aad;
    background: linear-gradient(
        90deg,
        rgba(0, 74, 173, 1) 0%,
        rgb(30, 127, 255) 57%
    ); */
    border-radius: 8px;
    color: #ffffff;
    transition: all ease-in 0.1s;
    box-shadow: 0px 5px 10px rgba(61, 61, 61, 0.322);
}

.sidebar .menu-list .list-item svg {
    margin-top: -3px !important;
}

.sidebar .menu-list .list-item i {
    width: 50px !important;
    height: 30px !important;
    margin-top: -3px !important;
}

.sidebar .menu-list a {
    text-decoration: none;
}

.sidebar .menu-list a .list-item .list-title {
    padding-left: 10px;
}

.list-head {
    color: #737373;
    font-weight: 700;
}

.collapse a .list-item {
    margin-left: 20px !important;
    box-sizing: border-box;
    width: 160px !important;
}

.drop-icon-item {
    transition: all ease-in 0.2s;
}

.down {
    transform: rotate(90deg);
    transition: all ease-in 0.2s;
}

.bawah {
    transform: rotate(90deg);
}

.card-app-info {
    border: none;
    padding: 10px;
    border-radius: 8px;
    background-color: #cadaea;
    font-size: 12px;
    font-weight: 500;
    color: #737373;
    box-sizing: border-box;
    width: 180px;
    position: absolute;
    z-index: 99999;
    bottom: 20px;
    margin-top: 5px;
    left: 25px;
}

/** Scrollbar */
/* width */
::-webkit-scrollbar {
    width: 5px;
    display: none;
}

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

/* Handle */
::-webkit-scrollbar-thumb {
    background: #91909030;
    border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #55555560;
}

/** Main Content CSS  */
.main-content {
    width: 100%;
    margin-left: 270px !important;
    margin-right: 10px !important;
    position: relative !important;
}

.nav-content {
    padding: 20px 0 10px 10px;
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #eff5f6;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    width: 100%;
    right: 0;
    box-sizing: border-box;
}

.nav-title {
    font-weight: 700;
}

.nav-title svg {
    display: inline-block;
}

.nav-date {
    font-size: 13px;
    font-weight: 600;
    color: #303030;
    background-color: #e9e9e9;
    padding: 10px 15px;
    border-radius: 30px;
}

.nav-date svg {
    margin-top: -2px;
    margin-right: 3px;
}

.img-user {
    /* height: fit-content; */
    width: 30px !important;
    height: 30px !important;
    object-fit: cover;
}

.user-name {
    font-weight: 700;
    margin-bottom: -10px;
}

.user-role {
    margin-top: -35px;
    font-size: 12px;
    color: #737373;
    font-weight: 500;
}

.content {
    min-height: 100vh;
    padding-bottom: 20px;
    margin-top: 20px;
    font-size: 14px;
}

.content-sm {
    min-height: 80vh;
}

.card-content {
    border: 0;
    box-shadow: 0px 2px 7px 0px rgba(143, 143, 143, 0.2);
    border-radius: 10px;
}

.nav-title a {
    text-decoration: none;
    color: black;
}

.nav-title a svg {
    width: 24px !important;
    height: 24px !important;
    margin-top: 0;
}

.nav-title svg {
    width: 20px !important;
    height: 20px !important;
    margin-top: -5px;
}

.footer {
    text-align: center;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 12px;
    color: #555;
}

/** ##### Component #####  */
/** Breadcrumb  */
.breadcrumb {
    font-size: 12px;
    font-weight: 500;
}

.breadcrumb a {
    text-decoration: none;
    margin-right: 5px;
}

/** Button  */
.btn {
    font-size: 14px;
    border: 1px solid;
    border-radius: 6px;
    box-shadow: rgba(33, 35, 38, 0.5) 0px 5px 8px -10px !important;
}

.btn-primary {
    background-color: #004aad;
}

.btn-warning {
    background-color: #fdcb35;
    color: #644b00;
    font-weight: 500;
    border: none;
}

.btn-warning:hover {
    background-color: #dbad24;
    color: #644b00;
    border: 1px solid #dbad24;
}

.btn-info {
    background-color: #aecdf5;
    color: #004aad;
    font-weight: 500;
    border: none;
}

.btn-info:hover {
    background-color: #79b3ff;
    color: #004aad;
    font-weight: 500;
    border: 1px solid #79b3ff;
}

.btn-light {
    background-color: #f0f0f0;
    color: rgb(105, 105, 105);
    font-weight: 500;
    border: none;
}

.btn-light:hover {
    background-color: #c4c4c4;
    color: rgb(105, 105, 105);
    font-weight: 500;
    border: 1px solid #c4c4c4;
}

.btn-default {
    border: 1px solid #e7e7e7;
    font-weight: 600;
}

.btn-default:hover {
    box-shadow: 0 2px 3px 1px rgba(100, 100, 100, 0.1);
}

.btn-default-2 {
    border: 1px solid #e7e7e7;
    font-weight: 600;
    background-color: #f7f7f7;
    color: #616161;
}

.btn-default-2:hover {
    box-shadow: 0 2px 3px 1px rgba(100, 100, 100, 0.1);
}

/** Table  */
.mobile-table tr td {
    vertical-align: middle;
}

.mobile-table tr td svg {
    width: 28px;
    height: 28px;
}

.mobile-table tr td a svg {
    width: 16px;
    height: 16px;
}

.mobile-table tr td span:nth-child(1) {
    font-weight: 600;
    display: block;
}

.mobile-table tr td span:nth-child(2) {
    font-size: 10px;
    display: block;
}

.mobile-table tr td:nth-child(3) a {
    text-decoration: none;
    color: #555;
}

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

.dropdown-menu.dropdown-menu-tmobile.show {
    border-radius: 10px;
    border: none;
    min-width: 10px !important;
}

.dropdown-menu-tmobile li a svg {
    padding-right: 5px;
    width: 18px !important;
    height: 18px !important;
    margin-top: -2px;
}

.desktop-table tr td {
    vertical-align: middle;
    color: #555;
    font-size: 12px;
}

.desktop-table tr td svg {
    width: 28px;
    height: 28px;
}

.desktop-table tr td a svg {
    width: 16px;
    height: 16px;
}

.desktop-table tr td span:nth-child(1) {
    font-weight: 600;
    /* display: block; */
}

.desktop-table tr td span:nth-child(2) {
    font-size: 10px;
    /* display: block; */
}

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

.dropdown-menu.dropdown-menu-tdesktop.show {
    border-radius: 10px;
    border: none;
    min-width: 10px !important;
}

.dropdown-menu.dropdown-menu-tdesktop.kurlum.show {
    border-radius: 10px;
    border: none;
    min-width: 10px !important;
    position: absolute;
    inset: 0px auto auto 0px;
    margin: 0px;
    transform: translate3d(251px, 30px, 0px) !important;
}

.dropdown-menu.pilihan-kelas.show {
    border-radius: 10px;
    border: 1;
    min-width: 30px !important;
}

.dropdown-menu-tdesktop li a svg {
    padding-right: 5px;
    width: 18px !important;
    height: 18px !important;
    margin-top: -2px;
}

.dropdown-menu-tdesktop li a {
    font-size: 12px;
    color: #555;
}

.tr-table th:first-child {
    color: rgb(92, 92, 92);
    font-size: 12px;
    background-color: #ebebeb;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.tr-table th:last-child {
    color: rgb(92, 92, 92);
    font-size: 12px;
    background-color: #ebebeb;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.tr-table th {
    color: rgb(92, 92, 92);
    font-size: 12px;
    background-color: #ebebeb;
    border-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

/** Pagination  */
.page-link {
    font-size: 12px !important;
    color: #555;
    border: 0 !important;
}

.page-item.active .page-link {
    background-color: #555;
    border-radius: 10px;
}

.page-item .page-link {
    border-radius: 10px;
}

.page-item {
    margin-left: 5px;
}

.page-item:last-child .page-link {
    border-radius: 10px;
}

.page-item:first-child .page-link {
    border-radius: 10px;
}

.page-link span svg {
    width: 14px;
    height: 14px;
}

/** Modal  */
.modal-header,
.modal-footer {
    border: 0;
}

.modal-content {
    border-radius: 10px;
    border: 0;
}

.bayang {
    box-shadow: rgba(33, 35, 38, 0.5) 0px 5px 8px -10px;
}

/** Tabs  */
.nav.nav-tabs .nav-link.active {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    background-color: #ffffff !important;
    border-bottom: 0 !important;
    box-shadow: 2px -1px 0px 0px rgba(100, 100, 100, 0.2);
    font-weight: 600;
}

.nav.nav-tabs .nav-link {
    background-color: #eff5f6 !important;
    border-top-right-radius: 8px !important;
    border-top-left-radius: 8px !important;
    box-shadow: 1px 0px 1px 1px rgba(61, 61, 61, 0.122);
    color: #737373;
}

.nav.nav-tabs .nav-link:hover {
    color: #303030;
    font-weight: 500;
}

.nav.nav-tabs {
    border-bottom: 0;
}

/** Form  */
.form-default,
.form-control {
    box-shadow: rgba(33, 35, 38, 0.5) 0px 5px 8px -10px;
}

form .form-control.form-borderless,
.form-borderless {
    border: 0 !important;
}

form .form-control.form-bg,
.form-bg {
    border: 0 !important;
    background-color: #e9e9e97c;
}

/** ##### Page #####  */
/** Error Page  */
.logo-page a {
    padding-left: 15px !important;
    text-decoration: none;
    color: #303030;
}

.error {
    color: #535353;
}

.code-no {
    font-weight: 700;
    font-size: 80px;
}

.sub-error {
    font-size: 35px;
}

.ket-error {
    font-size: 12px;
}

/** Login Page  */
.card-login {
    border: 0;
    box-shadow: 0px 2px 7px 0px rgba(143, 143, 143, 0.2);
    border-radius: 10px;
    padding: 20px;
    width: 450px;
    box-sizing: border-box;
    margin-right: 20px;
}

.login-title {
    font-weight: 600;
    color: #303030;
}

form.form-login input::placeholder {
    color: #c9c9c9 !important;
}

.remember-btn {
    font-size: 12px;
    font-weight: 600;
}

.remember-btn a {
    text-decoration: none;
}

form.form-login label {
    font-weight: 500;
}

.login-btn {
    padding: 10px 0 !important;
}

.login-btn-akun svg {
    margin-top: -4px;
    margin-right: 3px;
}

.login-btn-akun {
    width: 100%;
}

.group-show-password .btn {
    box-shadow: none !important;
}

.btn-show-password {
    /* box-shadow: rgba(33, 35, 38, 0.5) 0px 5px 8px -10px; */
    border: 0 !important;
    /* margin-left: -20px !important; */
    z-index: 999 !important;
    position: absolute;
    right: 0;
}

.link-sign-up {
    font-size: 14px;
}

.link-sign-up a {
    text-decoration: none;
}

.divider {
    font-size: 14px;
    display: flex;
    align-items: center;
}

.divider::before,
.divider::after {
    flex: 1;
    content: "";
    padding: 0.5px;
    background-color: #61616136;
    /* margin: 15px; */
}

.divider::before {
    margin-right: 15px;
}

.divider::after {
    margin-left: 15px;
}

.container-login .footer {
    text-align: center;
}
/* .container-login {
    margin-top: 0;
    margin-bottom: 0 !important;
    display: none !important;
} */

.alert-default {
    font-size: 12px !important;
}

/** Profile page  */
.card-profile {
    border: 2px dashed #c5c5c5;
}

.name-profile {
    margin-bottom: 0 !important;
}

.misc-profile {
    font-size: 12px !important;
    color: #616161;
}

.m-kiri {
    margin-left: 150px;
}

.daftar-kelas {
    margin-bottom: 10px;
}

.per-kelas > i {
    font-size: 45px !important;
    background-color: #cfe2ff;
    color: #004aad;
    border-radius: 5px;
    padding: 0 15px;
}

.btn-binduk {
    background-color: #d04200;
    color: white;
    padding: 6px 0;
    border-radius: 50px;
    width: 70px;
    text-align: center;
    font-size: 12px;
}

.btn-binduk:hover {
    border: none;
    background-color: #b53900;
    color: white;
}

.peringatan-modal {
    font-size: 14px;
    color: #303030c4 !important;
}

.aclog-primary {
    background-color: #6fadff67;
    color: #004bac;
    padding: 5px 8px;
    border-radius: 8px;
    min-width: fit-content;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.aclog-danger {
    background-color: #ff5d5d6d;
    color: #9d0000;
    padding: 5px 8px;
    border-radius: 8px;
    min-width: fit-content;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.aclog-success {
    background-color: #80ff5d6d;
    color: #197400;
    padding: 5px 8px;
    border-radius: 8px;
    min-width: fit-content;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.badge-tahun-ajar {
    background-color: #80ff5d3c;
    color: #197400;
    padding: 5px 8px;
    border-radius: 8px;
    min-width: fit-content;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.badge-status-terdaftar {
    background-color: #5d93ff3c;
    color: #002956;
    padding: 5px 8px;
    border-radius: 8px;
    min-width: fit-content;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.badge-status-diterima {
    background-color: #80ff5d3c;
    color: #197400;
    padding: 5px 8px;
    border-radius: 8px;
    min-width: fit-content;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.badge-status-ditolak {
    background-color: #ff5d5d3c;
    color: #710000;
    padding: 5px 8px;
    border-radius: 8px;
    min-width: fit-content;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.badge-status-dicabut {
    background-color: #ffd45d3c;
    color: #805e00;
    padding: 5px 8px;
    border-radius: 8px;
    min-width: fit-content;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.badge-status-aktif {
    background-color: #80ff5d3c;
    color: #197400;
    padding: 5px 8px;
    border-radius: 8px;
    min-width: fit-content;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.badge-status-nonaktif {
    background-color: #ff5d5d3c;
    color: #740004;
    padding: 5px 8px;
    border-radius: 8px;
    min-width: fit-content;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.badge-dash-aclog {
    background-color: #6fadff67;
    color: #004bac;
    padding: 3px 0;
    border-radius: 10px;
    width: 130px;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.bg-globe {
    background-color: #3bee5c71;
    /* color: #007e17; */
    font-size: 10px !important;
    font-weight: 600;
}

.badge-globe {
    background-color: #3bee5c71;
    color: #007e17;
    padding: 3px 0;
    border-radius: 10px;
    width: fit-content;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.badge-blobe {
    background-color: #6fadff3c;
    color: #004bac;
    padding: 3px 0;
    border-radius: 10px;
    width: fit-content;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.bg-blobe {
    background-color: #6fadff3c;
    color: #004bac;
}

.jenkel-l {
    background-color: #6fadff3c;
    color: #004bac;
    padding: 3px 0;
    border-radius: 10px;
    width: 70px;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.jenkel-p {
    background-color: #ff5adb34;
    color: #910071;
    padding: 3px 0;
    border-radius: 10px;
    width: 90px;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.dt-search {
    font-size: 12px;
    width: 100vh;
}

.dt-search > input#dt-search-0 {
    border-radius: 10px;
    min-width: 170%;
    height: 35px;
}

.dt-paging {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.dt-paging > nav > button.dt-paging-button.current {
    border-radius: 30% !important;
    border: 0 !important;
    color: white !important;
    box-shadow: 0 2px 2px rgba(100, 100, 100, 0.2);
}

h3.judul {
    text-transform: uppercase !important;
    text-align: center;
    margin-bottom: 10px;
    font-size: 16px;
}

h4.sub-judul {
    text-transform: uppercase;
    /* margin-bottom: 8px; */
    font-size: 14px;
    margin-top: 8px;
}

table.form {
    width: 100%;
    font-size: 12px;
    /* border-spacing: 6px; */
    /* border: 1 solid gray; */
}

table.form h4 {
    font-size: 12px;
}

.container-binduk {
    /* margin-top: -5px; */
    width: 100%;
    margin: auto;
    padding-left: 80px !important;
    /* background-color: #535353; */
}

.foto-binduk {
    margin: 20px 0px;
    display: block;
}

.bg-layer {
    background-color: #eff5f6;
}

.data-detail-siswa > div > span {
    color: #677078;
    font-size: 13px;
}

.data-detail-siswa > div > h6 {
    overflow-wrap: break-word;
}

.user-aktif {
    background-color: #60c897;
}

.user-aktif:hover {
    background-color: #198754;
    color: rgb(212, 212, 212);
}

.user-non-aktif {
    background-color: #dc3545;
}

.user-non-aktif:hover {
    background-color: #b02735;
    color: rgb(212, 212, 212);
}

.reset-pw-user:hover {
    background-color: #0056d6;
    color: rgb(212, 212, 212);
}

.fs-nama {
    font-size: 14px;
    font-weight: bold;
    display: inline;
}

.badge-siswa {
    background-color: #dc5dff6d;
    color: #9900c3;
    padding: 3px 0;
    border-radius: 10px;
    width: 70px;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.badge-keluar {
    background-color: #ff5d5d6d;
    color: #9d0000;
    padding: 3px 0;
    border-radius: 10px;
    width: 70px;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.badge-masuk {
    background-color: #80ff5d6d;
    color: #197400;
    padding: 3px 0;
    border-radius: 10px;
    width: 70px;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.badge-draft {
    background-color: #fffc5d6d;
    color: #9a9702f8;
    padding: 3px 0;
    border-radius: 10px;
    width: 70px;
    text-align: center;
    font-size: 10px !important;
    font-weight: 600;
}

.badge-aclog {
    width: fit-content;
}

.badge-role-admin {
    background-color: #cb2ddc59 !important;
    color: #cb2ddc;
}

.badge-role-user {
    background-color: #dc852d59 !important;
    color: #dc852d;
}

.loading-screen {
    background-color: #303030;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.5;
    display: flex;
    align-items: center;
}

.loader {
    margin: auto;
    width: 48px;
    height: 48px;
    border: 5px solid #fff;
    border-bottom-color: #004aad;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

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

/* Mobile view */
@media only screen and (max-width: 800px) {
    /** Sidebar */
    .sidebar {
        position: fixed;
        z-index: 9999999;
        top: 0;
        bottom: 0;
        height: 100%;
        left: 0;
        transform: translate(-250px);
        transition: all ease-in 0.2s;
        opacity: 0;
    }

    .bg-overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.397);
        z-index: 999;
        cursor: pointer;
        transition: all ease-in 0.2s;
    }

    .slide {
        opacity: 1;
        transform: translate(0px);
        transition: all ease-in 0.2s;
    }

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

    ul.dropdown-menu-user.show {
        transform: translate3d(215px, 55px, 0px) !important;
        border-radius: 10px;
        border: none;
    }

    ul.dropdown-menu-tdesktop.show {
        transform: translate3d(162px, 40px, 0px) !important;
        border-radius: 10px;
        border: none;
    }

    /* #pilihKelas {
    } */

    /* .dropdown-menu.pilihan-kelas.show {
        transform: translate3d(215px, 55px, 0px) !important;
        border-radius: 10px;
        border: none;
        min-width: 50px !important;
    } */

    .dropdown-username {
        font-weight: 700;
    }

    .dropdown-user-role {
        font-weight: 500;
        font-size: 12px;
        color: #737373;
        margin-top: -12px;
    }

    .dropdown-user-menu {
        font-weight: 500;
        font-size: 16px;
        color: #737373;
        margin-top: -12px;
        padding: 10px 2px 10px 15px;
    }

    .dropdown-user-menu svg {
        margin-right: 5px;
    }

    /** Main Content  */
    .main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* .nav-content {
        width: 100%;
        right: 0;
        top: 0;
        left: 0;
    } */

    a.hum-menu svg {
        margin-top: -3px;
    }

    /* .nav-title svg {
        display: none;
    }

    .nav-mobile {
        max-width: 100%;
        right: 0;
        bottom: 10px;
        left: 0;
        padding: 18px 20px 10px 20px;
        position: fixed;
        z-index: 99;
        background-color: #004aad;
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 10px;
        color: #ffffff;
    } */

    .nav-mobile a {
        color: rgb(192, 192, 192) !important;
        text-decoration: none;
        box-sizing: border-box;
        margin-left: 20px;
        margin-right: 20px;
    }

    .nav-mobile a.active {
        color: white !important;
        font-weight: 500;
    }

    .nav-mobile a svg {
        width: 24px !important;
        height: 24px !important;
        margin: 0px 14px 5px 14px;
        display: block;
    }

    .nav-mobile-title {
        font-size: 12px;
        padding: 0 8px 0 8px;
    }

    .content {
        margin-bottom: 95px;
    }

    .card-content {
        margin: 0;
    }

    .nav-user {
        display: none;
    }

    .nav-profile {
        margin-right: 0px !important;
    }

    .nav-title a {
        text-decoration: none;
        color: black;
    }

    .nav-title a.ham-menu svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* .footer {
        display: none;
    } */

    .card-login {
        border: 0;
        box-shadow: 0px 2px 7px 0px rgba(143, 143, 143, 0.2);
        border-radius: 10px;
        padding: 20px;
        width: 350px;
        box-sizing: border-box;
        margin-right: 20px;
    }

    .link-sign-up {
        /* width: 90%; */
        font-size: 14px;
    }

    .container-login {
        height: 100vh;
        position: relative;
    }

    .container-login .footer {
        position: absolute;
        bottom: 0;
        margin: auto;
        text-align: center;
        right: 0;
        left: 0;
        display: block !important;
    }

    .m-kiri {
        margin-left: 0;
    }

    .add-btn-siswa-mbl {
        position: fixed;
        z-index: 1;
        bottom: 10px;
        right: 10px;
        border: 1px solid white;
        padding: 0 12px;
    }

    .add-btn-siswa-mbl .bi-plus-lg {
        font-size: 30px !important;
    }

    .ucapan-salam,
    .bi-house-door-fill,
    .bi-grid-fill {
        font-size: 16px;
    }

    .container-binduk {
        width: 100%;
        margin: auto;
        padding-left: 30px !important;
    }
}