/* navbar */
body {
    font-family: "Inter", sans-serif !important;
}

/* Auto Fill  */
[data-theme="dark"] input {
    color-scheme: dark !important;
}
/* End Auto Fill */

.card-primary.card-outline {
    border-top: #fff !important;
}

.ubah-warna-alert {
    opacity: 0.9 !important;
    color: rgb(255, 255, 255) !important;
}
.ubah-warna-alert:hover {
    opacity: 1 !important;
    color: rgb(0, 0, 0) !important;
    text-shadow: none;
}

.card-header {
    border-bottom: none !important;
}

.login-box {
    width: 540px !important;
}

.link-underline {
    color: #0d6efd !important;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000,
        rgb(255, 255, 255) 0px -0.166667em 0px 0px inset,
        #c7ddff 0px -0.333333em 0px 0px inset;
}

.form-btn {
    border-right: #ffff !important;
}

.icon-green {
    color: #067751 !important;
}

.input-group-text {
    background-color: #ffff !important;
    border-left-color: #ffff !important;
}

.card {
    border-radius: 1rem !important;
}

.text-weight-500 {
    font-weight: 500 !important;
}

.text-signin {
    font-weight: 500 !important;
}

.box-login {
    min-height: 100vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #f6f9ff;
}

.btn-daftar {
    background-color: #ffff;
    border-color: #067751;
}

.btn-daftar:hover {
    background-color: #067751;
    color: #fff;
    transition: 0.4s;
}

.btn-login {
    background-color: #067751 !important;
    color: white;
}

.btn-login:hover {
    color: white;
}

.btn-forget-password {
    color: black;
}

.btn-forget-password:hover {
    color: #067751;
}

.social-log {
    position: relative;
    text-align: center;
    z-index: 1;
}

.social-log span {
    padding: 0 20px;
    background: #fff;
}

.social-log span:before {
    content: "";
    background: #e8e8e8;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    top: 50%;
    transform: translateY(-50%);
    right: auto;
    z-index: -1;
}

.btn-social-log {
    border: 1px solid rgba(209, 213, 219);
}

.btn-social-log:hover {
    background-color: #f8fafb;
    transition: 0.8s;
}

.text-tiny {
    font-size: 0.915rem;
}

.login-forgot-pw {
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke;
    color: black;
}

.login-forgot-pw:hover {
    background-color: #eeee;
    color: black;
}

[data-theme="dark"] .login-forgot-pw:hover {
    background-color: #2c3147;
}

input:placeholder-shown {
    font-size: 0.915rem;
}

.letter-spacing {
    letter-spacing: -0.025em;
}

.h4 {
    font-size: 1.125rem !important;
}

/* Dark Theme */
[data-theme="dark"] {
    background-color: #0f172a;
}

[data-theme="dark"] body {
    background-color: #0f172a;
}

[data-theme="dark"] .card {
    background-color: #1c233e;
}

[data-theme="dark"] .social-log span {
    background-color: #1c233e;
}

[data-theme="dark"] .btn-daftar {
    background-color: #067751;
}

[data-theme="dark"] .btn-daftar:hover,
[data-theme="dark"] .btn-daftar:focus {
    background-color: #282958;
    border-color: #282958;
}

[data-theme="dark"] .btn-social-log {
    border-color: rgb(71 85 105);
}

[data-theme="dark"] .btn-social-log:hover {
    background-color: #282958;
    border-color: #282958;
}
[data-theme="dark"] a,
[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
    color: #ffffff;
    box-shadow: none;
}

[data-theme="dark"] .link-underline {
    color: #0ea5e9 !important;
    text-decoration-color: #075985 !important;
    text-decoration: underline;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] p,
[data-theme="dark"] label,
[data-theme="dark"] span,
[data-theme="dark"] h6 {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] input:focus {
    border-color: rgb(71 85 105);
    color: #fff;
}

[data-theme="dark"] .form-control {
    background-color: #1c233e;
}

[data-theme="dark"] .icon-green {
    color: #56578d !important;
}

[data-theme="dark"] .input-group-text {
    background-color: #1c233e !important;
    border-color: rgb(71 85 105);
}

/* Sweet Alert Dark */
[data-theme="dark"] .swal2-popup {
    background-color: #0f172a !important;
}
[data-theme="dark"] .swal2-html-container {
    color: rgb(237, 235, 235) !important;
}

.border-blue {
    --tw-ring-color: rgb(25 48 114) !important;
    border-color: rgb(59 130 246) !important;
}

.form-control:focus {
    --tw-ring-color: rgb(25 48 114) !important;
    border-color: rgb(59 130 246) !important;
    box-shadow: 0px rgb(25 48 114) 0 1px 2px !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
}

@media (min-width: 1024px) {
    .h4 {
        font-size: 1.25rem !important;
    }
}