body {
    background-color: #f4f6fc;
}

label {
    cursor: text;
}

/* login page */
.login-input-group > .input-group-text {
    display: flex;
    height: 58px;
    background-color: #949bfe;
    color: #fff;
    padding: 0.375rem 0.75rem;
}

.input-group-text.reverse {
    background-color: #fff;
}

#eye,
#eye-old,
#eye-new,
#eye-konfirm,
#open-eye,
#open-eye-old,
#open-eye-new,
#open-eye-konfirm {
    display: none;
}

#open-eye,
#open-eye-old,
#open-eye-new,
#open-eye-konfirm,
#close-eye,
#close-eye-old,
#close-eye-new,
#close-eye-konfirm {
    cursor: pointer;
    color: #949bfe;
}

.card-login {
    --bs-card-border-radius: 1.375rem;
}

/* button */
.custom-btn {
    background-color: #949bfe;
    /* width: 100%; */
}

.custom-btn-reverse {
    background-color: #6f79fc;
}

.custom-btn:hover,
.custom-btn:focus {
    background-color: #6f79fc;
}

.custom-btn-reverse:focus,
.custom-btn-reverse:hover {
    background-color: #4b57f3;
}

.custom-table-btn {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.table-btn-view {
    background-color: #ffa92c;
    color: #fff;
}

.table-btn-view:hover {
    background-color: rgba(255, 169, 44, 0.8);
    color: #fff;
}

.table-btn-edit {
    background-color: #ffe2b8;
    color: #7870ff;
}

.table-btn-edit:hover {
    background-color: rgba(255, 226, 184, 0.6);
    color: #7870ff;
}

.table-btn-switch {
    background-color: #7670ff;
    color: #fff;
}

.table-btn-switch:hover {
    background-color: rgba(118, 112, 255, 0.6);
    color: #fff;
}

.btn-tooltip-view {
    --bs-tooltip-bg: #ffa92c;
}

.btn-tooltip-edit {
    --bs-tooltip-bg: #ffe2b8;
    --bs-tooltip-color: #7870ff;
}

.btn-tooltip-switch {
    --bs-tooltip-bg: #7670ff;
}

/* sidebar */
.side-bg {
    background-color: #949bfe;
}

.side-config {
    position: fixed;
    /* z-index: 1; */
    min-width: 250px;
    max-width: 250px;
}

.side-content {
    color: #fff;
    transition: all 0.5s ease;
}

.side-content:hover {
    background-color: #6f79fc;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
}

.side-content.active {
    background-color: #6f79fc;
    border-radius: 10px 10px 0 0;
}

.side-content.active:hover {
    background-color: #6f79fc;
    color: #fff;
}

.side-dropdown {
    background-color: #5663fd;
    transition: all 0.5s ease;
}

.side-dropdown:last-child {
    border-radius: 0 0 10px 10px;
}

.side-dropdown-content a {
    color: #fff;
}

.side-dropdown-content a div:hover {
    color: #fff;
    background-color: #6f79fc;
}

.side-dropdown-content:last-child a div:hover {
    border-radius: 0 0 10px 10px;
}

.side-dropdown-content a div span {
    font-size: 14px;
}

.dropdown-toggle::after {
    transition: all 0.2s ease;
}

.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(-180deg);
}

#btn-bars {
    cursor: pointer;
}

.navbar-with-content {
    padding-left: 250px;
}

@media (max-width: 767px) {
    #sidebar {
        margin-left: -250px;
        transition: all 0.5s ease;
    }

    .navbar-with-content {
        padding-left: 0;
        transition: all 0.5s ease;
    }

    #sidebar.active {
        margin-left: 0;
    }

    .navbar-with-content.active {
        padding-left: 250px;
    }

    #navbar {
        margin-left: 0;
        transition: all 0.5s ease;
    }

    #navbar.active {
        margin-left: 250px;
    }

    #content {
        margin-top: 56px;
    }
}

/* Sidebar profile */
.side-profile-bg {
    background-color: #6f79fc;
}

.img-profile {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.side-profile-text,
.side-profile-text:hover {
    color: #fff;
}

.side-role {
    font-size: 12px;
}

#side-logout {
    color: #fff;
    background-color: #5663fd;
}

#side-logout:hover {
    color: #fff;
    background-color: #4b57f3;
}

/* form page */
.nav-pills {
    --bs-nav-link-color: #949bfe;
    --bs-nav-link-hover-color: #4b57f3;
}

.nav-pills .nav-link.active {
    background-color: #949bfe;
}

.input-group-text {
    display: flex;
    height: 48px;
    background-color: #949bfe;
    color: #fff;
    padding: 0.375rem 1.5rem;
}

h3 {
    color: #949bfe;
}

.form-bg {
    background-color: rgba(253, 254, 255, 0.6);
}

.form-check-label {
    cursor: pointer;
}

.form-check-label:hover {
    color: #949bfe;
}

.form-check-input:checked {
    background-color: #949bfe;
    border-color: #949bfe;
    transition: all 0.3s ease;
}

.form-check-input:checked + label {
    color: #949bfe;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(148, 155, 254, 0.3);
}

/* form radio button */
.btn-radio {
    display: flex;
    align-items: center;
    flex: 1 1 0px;
    justify-content: space-evenly;
    background-color: #fff;
    --bs-btn-border-color: #d3d3d3;
    --bs-btn-color: #000;
    --bs-btn-active-bg: #6f79fc;
    --bs-btn-active-border-color: #6f79fc;
}

#pg + label {
    /* untuk tulisan PG diform siswa */
    font-size: 15px;
}

.error-box {
    background-color: rgba(220, 53, 69, 0.7);
    color: #fff;
}

/* show data */
.label-data-title {
    font-size: 1.025rem;
    color: #766edf;
}

.label-data-detail {
    color: #9c96ff;
}

a .label-data-detail {
    cursor: pointer;
}

a .label-data-detail:hover {
    color: #766edf;
    font-weight: bold;
}

/* table */
td[data-column-id="no"] {
    width: 1%;
    text-align: center;
}

th.table-th {
    background-color: #9c96ff;
    color: #fff;
    text-align: center;
    padding: 8px 10px;
}

td.table-td {
    font-size: 14px;
    padding: 4px 10px;
}

.gridjs {
    width: 100%;
}

/* btn check box */
.custom-check {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0 0.375rem 0.375rem 0;
}

.card-dashboard {
    --bs-card-border-radius: 0.75rem;
    font-size: 14px;
}

.dashboard-icon {
    background-color: #6f79fc;
    color: #fff;
    border-radius: 0 0.75rem 0 0.75rem;
}

@media (max-width: 1199px) {
    .dashboard-icon {
        border-radius: 0.75rem 0.75rem 0 0;
    }
}

/* Profile page */
.img-profile-page {
    width: 240px;
    height: 240px;
    object-fit: cover;
}

.profile-name {
    color: #766edf;
    font-size: 1.4rem;
}

.profile-role {
    color: #766edf;
}

.profile-user {
    color: #766edf;
}

.profile-a {
    width: 100%;
}

@media (max-width: 1199px) {
    .img-profile-page {
        width: 120px;
        height: 120px;
    }

    .profile-a {
        width: 25%;
    }
}

/* @media (max-width: 576px) {
    .img-profile-page {
        width: auto;
        height: 50px;
    }

    .profile-a {
        width: 25%;
    }
} */