#user-profile-container{
    border-left: 3px solid var(--gray-light-color);
}

.header-section-user{
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid var(--gray-lighter-color);
}

.header-section-user > h3{
    margin: 0px;
}

.content-section-user{
    align-self: center;
    width: 60%;
}

.section-description{
    font-size: 16px;
    color: var(--gray-dark-color);
    margin-top: var(--padding-margin-xl);
    margin-bottom: var(--padding-margin-xl);
}

.data-user{
    background-color: rgb(255, 229, 70, .1);
    border:2px solid rgb(255, 229, 70, .6);
    border-radius: 8px;
    padding: var(--padding-margin-md);
    display: flex;
    gap: 16px;
    margin-bottom: var(--padding-margin-xxxl);
}

.data-user > div:nth-child(1){
    flex-grow: 1;
}

.data-user > div:nth-child(2){
    flex-grow: 2;
}

#formUpdateUser label, #formUpdateUser input{
    font-size: 16px;
}

#formUpdateUser input{
    border:2px solid var(--text-color);
}

#formUpdateUser .btn-primary{
    font-size: 18px;
}

.user-frame{
    position: relative;
}

.user-frame > button{
    font-size: 32px;
    position: absolute;
    left: 176px;
    bottom: 24px;
    padding: 10px 10px;
    line-height: 0px;
    border-radius: 32px;
}

.photo-user{
    color: var(--text-color);
    font-size: 256px;
}

.user-feature{
    display: flex;
    gap: var(--padding-margin-xxl);
    font-size: 16px;
    color: var(--text-color);
    margin-bottom: var(--padding-margin-md);
}

.tab-user-profile{
    color: var(--text-color);
    width: 80%;
    display: flex;
    align-items: center;
    gap: var(--padding-margin);
    padding: var(--padding-margin) var(--padding-margin);
}

.tab-user-profile > span{
    font-size: 16px;
}

button.tab-user-profile:hover > span{
    font-weight: 500;
    text-decoration: underline;
}

button.tab-user-profile.btn-primary > span{
    text-decoration: underline;
}

div.card.card-search{
    padding: var(--padding-margin-sm) !important;
}

div.card.card-search > .card-body{
    padding: 0px;
}

div.card.card-search > .card-body .card-filters{
    display: flex;
    flex-wrap: wrap;
    gap: var(--padding-margin);

}

div.card.card-search > .card-body .search-filter{
    background-color: var(--primary-color);
    padding: var(--padding-margin-xs);
    border-radius: 5px;
    width: fit-content;
}

div.card.card-search > .card-footer > button{
    display: flex;
    gap: var(--padding-margin-xs);
    align-items: center;
}

/* RESPONSIVE DESIGN */

/* 
// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
*/

@media (max-width: 575.98px) { 
    .tab-user-profile{
        width: 90%;
        flex-direction: column;
        gap: 0px;
        padding: var(--padding-margin-xs) var(--padding-margin-xs);
    }

    div.card.card-search{
        width: unset !important;
    }

    .header-section-user > h3, #formUpdateUser button{
        font-size: 18px;
    }

    .content-section-user{
        width: 95%;
    }

    .section-description{
        font-size: 14px;
        margin-top: var(--padding-margin-sm);
        margin-bottom: var(--padding-margin-sm);
    }

    .data-user{
        padding: var(--padding-margin);
        flex-direction: column;
        gap: var(--padding-margin);
        margin-bottom: var(--padding-margin-xxxl);
    }

    .photo-user{
        font-size: 140px;
    }

    #formUpdateUser label, #formUpdateUser input, #formUserPreferences label{
        font-size: 14px;
    }

    .user-frame{
        text-align: center;
    }

    .user-frame > button{
        font-size: 26px;
        left: 120px;
        bottom: 15px;
        padding: var(--padding-margin-xs) var(--padding-margin-xs);
    }
}

@media (max-width: 991.98px) {
    .tab-user-profile{
        width: 80%;
    }

    .content-section-user{
        width: 95%;
    }
}

@media (max-width: 1199.98px){
    .content-section-user{
        width: 90%;
    }
}