/* primary   : #2463EB; */
/* secondary : #FF8600; */
/* tertiary  : #C77DFF; */
:root {
    --btn-bg-primary: #2463EB;
    --btn-color-primary: #FFFFFF;
    --btn-border-color-primary: #2463EB;
    --btn-hover-bg-primary: #1E54C7;
    --btn-hover-color-primary: #FFFFFF;
    --btn-hover-border-color-primary: #1E54C7;
    --btn-active-bg-primary: #1743A3;
    --btn-active-color-primary: #FFFFFF;
    --btn-active-border-color-primary: #1743A3;

    /* form */
    --form-invalid-border-color: #D90429;
    --form-valid-border-color: #38B000;

    --form-control-focus-border-color: #2463EB;
}

.btn-outline-primary {
    --bs-btn-color: #2463EB;
    --bs-btn-border-color: #2463EB;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2463EB;
    --bs-btn-hover-border-color: #2463EB;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2463EB;
    --bs-btn-active-border-color: #2463EB;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #2463EB;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #2463EB;
    --bs-gradient: none;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    box-shadow: 0 0 6px .25rem rgb(217, 4, 41, .25);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    box-shadow: 0 0 6px .25rem rgb(56, 176, 0, .25);
}

/* button */
.btn {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.btn:focus-visible {
    background-color: var(--btn-hover-bg-primary);
    color: var(--btn-hover-color-primary);
    border-color: var(--btn-hover-border-color-primary);
    box-shadow: none;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    background-color: var(--btn-active-bg-primary);
    color: var(--btn-active-color-primary);
    border-color: var(--btn-active-border-color-primary);
}

.btn-primary:hover {
    background-color: var(--btn-hover-bg-primary);
    color: var(--btn-hover-color-primary);
    border-color: var(--btn-hover-border-color-primary);
}

.btn-primary {
    background-color: var(--btn-bg-primary);
    color: var(--btn-color-primary);
    border-color: var(--btn-border-color-primary);
    /* transition: all 0.2s ease-in; */
}

/* akhir button */

/* form */
.form-control {
    background-color: transparent;
    padding: 8px 16px;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: .44rem;
}

.form-control:focus {
    background-color: transparent;
    border-color: var(--form-control-focus-border-color);
    box-shadow: none;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--form-valid-border-color);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: var(--form-valid-border-color);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--form-invalid-border-color);
}

.input-group-text {
    padding: 8px 16px;
    font-size: .875rem;
    background: transparent;
    color: #212529;
    transition: all 0.3s ease-in;
}

.input-group-text:hover {
    cursor: pointer;
    background: #FFFFFF;
    color: #003499;
}

/* akhir form */

/* card */
.card-body {
    padding: 1.75rem 1.75rem;
}

/* akhir card */

/* akhir override Bootstrap 5 */

::selection {
    background: #dce1ff;
    color: #344479;
}

input:-webkit-autofill {
    background-color: transparent !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    transition: background-color 5000s ease-in-out 0s;
}

.glass {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
}

.radial-gradient {
    /* background-image: url('<?= base_url() ?>assets/images/login/bg-2.png'); */
    background-image: linear-gradient(109.6deg, rgba(223, 234, 247, 1) 11.2%, rgba(244, 248, 252, 1) 91.1%);
    background-position: center;
    background-size: cover;
    opacity: 1;
}

.py-8 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* browser */
:focus-visible {
    outline: 0;
}

.card-body {
    padding: 1.75rem 3.5rem;
}

@media only screen and (max-width: 991.98px) {
    #toastContainer {
        width: 100% !important;
    }

    .left-side-form {
        display: none;
    }

    .card-body {
        padding: 1.75rem 1.75rem;
    }
}

.left-side-form {
    /* display: flex;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 100%; */
    background-image: linear-gradient(107.1deg, rgba(111, 63, 255, 1) 11.1%, rgba(21, 192, 229, 1) 54.8%, rgba(255, 229, 189, 1) 82.9%);
    color: #FFFFFF !important;
}

.right-side-form {
    background-image: linear-gradient(109.6deg, rgba(223, 234, 247, 1) 11.2%, rgba(244, 248, 252, 1) 91.1%);
}

.card {
    border: none;
    box-shadow: rgba(<?= $warna_shadow ?>, 0.4) -5px 5px, rgba(<?= $warna_shadow ?>, 0.3) -10px 10px, rgba(<?= $warna_shadow ?>, 0.2) -15px 15px, rgba(<?= $warna_shadow ?>, 0.1) -20px 20px, rgba(<?= $warna_shadow ?>, 0.05) -25px 25px;
}

select {
    background-color: #FFFFFF !important;
}

select option:checked {
    color: #FFFFFF;
    background-color: #1E54C7;
}