/*--------------------------------------------------------------
# GLOBAL
--------------------------------------------------------------*/
:root {
    --body-bg: #f6f9ff;
    --default-color: #fea228;
    --navy-blue: #1f3361;
}

body {
    background: var(--body-bg);
}

.text-default {
    color: var(--default-color);
}

.text-blue {
    color: var(--navy-blue);
}

.btn-default,
.btn-default:hover {
    background-color: var(--default-color);
}

.btn-default:hover {
    opacity: 90%;
}

.rounded-6 {
    border-radius: 50px;
}

.fs-7 {
    font-size: .9rem;
}

.top-12_5 {
    top: 12.5%;
}

.border-custom {
    border: 1px solid var(--default-color);
}

.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active {
    background-color: #ffb847 !important;
}

/*--------------------------------------------------------------
# SECTIONS
--------------------------------------------------------------*/

/***** HEADER *****/

.custom-action:hover,
.custom-action:active,
.custom-action.active {
    color: var(--default-color) !important;
    transition: color 0.1s ease-in-out;
    background: transparent;
}

.popup-icon {
    width: 100px;
    height: 100px;
    font-size: 60px;
}

/***** LOGIN *****/

.form-floating>.form-control-plaintext~label::after,
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
    background-color: transparent;
}

.toggle-password {
    cursor: pointer;
}

/***** Dashboard *****/

.dashboard-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-5px);
}

/***** Profile Page *****/

.profile-icon {
    width: 120px;
    height: 120px;
    font-size: 60px;
    background-color: #fbdbb184;
    border: 2px solid #fea228;
}

/***** Edit Profile Page *****/

.error-message {
    color: red;
}

/*--------------------------------------------------------------
# MEDIA QUERY
--------------------------------------------------------------*/

/* lg and larger */
@media (min-width: 992px) {
    .border-lg-0 {
        border-bottom: 0 !important;
    }

    .border-lg-start {
        border-left: 1px solid #dee2e6 !important;
    }
}