@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
::after,
::before{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* pallet */
:root{
    --color-bg: #fbf7f7;
    --color-c1: #FCA61F;
    --color-c2: #F36527;
    --color-c3: #0C70B5;
    --color-c4: #15ABB9;
    --color-c5: #FFFFFF;
    --color-c6: #000000;
    --color-c7: #F5F7F8;
    --color-c8: #7D6B4D;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    background-color: var(--color-bg);
}

.container-fluid {
    height: 100%;
}

.row {
    height: 100%;
}

.bg-image {
    background-size: cover;
    background-position: center;
    height: 100%;
}

.login-form-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.box{
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),   /* Layer pertama, shadow kecil */
        0 8px 16px rgba(0, 0, 0, 0.1),  /* Layer kedua, shadow medium */
        0 16px 32px rgba(0, 0, 0, 0.1), /* Layer ketiga, shadow besar */
        0 32px 64px rgba(0, 0, 0, 0.05);/* Layer keempat, shadow ekstra besar */
    background-color: #fff; /* Agar shadow terlihat jelas */
    border-radius: 8px;     /* Opsional: Sudut yang membulat untuk tampilan lebih lembut */
}

.login-form {
    width: 100%;
    max-width: 400px;
}

.login-form button{
    width: 50%;
}

h2, h3 {
    color: #4f4f4f;
}

input.form-control{
    border: none;
}

.btn-c1{
    background-color: var(--color-c1) !important;
    font-size: 12px;
    border: none !important;
    border-radius: 10px;
}
.btn-c2{
    background-color: var(--color-c2) !important;
    font-size: 12px;
    border: none !important;
    border-radius: 10px;
}
.btn-c3{
    background-color: var(--color-c3) !important;
    font-size: 12px;
    border: none !important;
    border-radius: 10px;
}
.btn-c4{
    background-color: var(--color-c4) !important;
    font-size: 12px;
    border: none !important;
    border-radius: 10px;
}
.btn-c5{
    background-color: var(--color-c5) !important;
    font-size: 12px;
    border: none !important;
    border-radius: 10px;
}
.btn-c6{
    background-color: var(--color-c6) !important;
    font-size: 12px;
    border: none !important;
    border-radius: 10px;
}
.btn-c7{
    background-color: var(--color-c7) !important;
    font-size: 12px;
    border: none !important;
    border-radius: 10px;
}
.btn-c8{
    background-color: var(--color-c7) !important;
    font-size: 12px;
    border: none !important;
    border-radius: 10px;
}

.btn-outline-c1{
    border: 1.5px solid var(--color-c1) !important;
    background: transparent !important;
    font-size: 12px;
    width: 50%;
    border-radius: 10px;
}
.btn-outline-c1:hover{
    background-color: var(--color-c1);
    transition: .3s;
    border-radius: 10px;
}

.btn-outline-c2{
    border: 1.5px solid var(--color-c2) !important;
    background: transparent !important;
    font-size: 12px;
    width: 50%;
    border-radius: 10px;
}
.btn-outline-c2:hover{
    background-color: var(--color-c2);
    transition: .3s;
    border-radius: 10px;
}

.btn-outline-c3{
    border: 1.5px solid var(--color-c3) !important;
    background: transparent !important;
    font-size: 12px;
    width: 50%;
    border-radius: 10px;
}
.btn-outline-c3:hover{
    background-color: var(--color-c3);
    transition: .3s;
    border-radius: 10px;
}

.btn-outline-c4{
    border: 1.5px solid var(--color-c4) !important;
    background: transparent !important;
    font-size: 12px;
    width: 50%;
    border-radius: 10px;
}
.btn-outline-c4:hover{
    background-color: var(--color-c4);
    transition: .3s;
    border-radius: 10px;
}

.btn-outline-c5{
    border: 1.5px solid var(--color-c5) !important;
    background: transparent !important;
    font-size: 12px;
    width: 50%;
    border-radius: 10px;
}
.btn-outline-c5:hover{
    background-color: var(--color-c5);
    transition: .3s;
    border-radius: 10px;
}

.btn-outline-c6{
    border: 1.5px solid var(--color-c6) !important;
    background: transparent !important;
    font-size: 12px;
    width: 50%;
    border-radius: 10px;
}
.btn-outline-c6:hover{
    background-color: var(--color-c6);
    transition: .3s;
    border-radius: 10px;
}

.btn-outline-c7{
    border: 1.5px solid var(--color-c7) !important;
    background: transparent !important;
    font-size: 12px;
    width: 50%;
    border-radius: 10px;
}
.btn-outline-c7:hover{
    background-color: var(--color-c7);
    transition: .3s;
    border-radius: 10px;
}

.btn-outline-c8{
    border: 1.5px solid var(--color-c8) !important;
    background: transparent !important;
    font-size: 12px;
    width: 50%;
    border-radius: 10px;
}
.btn-outline-c8:hover{
    background-color: var(--color-c8);
    transition: .3s;
    border-radius: 10px;
}

.text-c1{
    color: var(--color-c1);
}
.text-c2{
    color: var(--color-c2);
}
.text-c3{
    color: var(--color-c3);
}
.text-c4{
    color: var(--color-c4);
}
.text-c5{
    color: var(--color-c5);
}
.text-c6{
    color: var(--color-c6);
}
.text-c7{
    color: var(--color-c7);
}
.text-c8{
    color: var(--color-c8);
}

.bg-auth .bg-image {
    width: 98%;
}

@media (max-width: 768px) {
    .bg-auth .bg-image {
        width: 100% !important;
    }

    .login-form-container {
        position: relative;
        top: -10px;
        border-radius: 0 0 15px 15px;
        align-items: normal;
    }
}