.sidebar-header {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.sidebar-header-elementos {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2rem;
}

.header-form {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2rem;
}

.modal-active {
    display: flex;
}

.modal-btn-profile {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
}

.modal-profile-user {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.2rem;
}  

.letra {
    align-self: center;
}

.modal-prfile-logout {
    display: flex;
    align-items: center;
    justify-content: center; 
}

.modal-profile-nav {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0.5rem;
}

/*Modal notification*/
.modal-btn-notification {
    display: flex;
    flex-direction: column;
}

.modal-notification-m-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

.modal-notification-m-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.modal-notification-m-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.notification-m-body-message {
    display: flex;
    flex-direction: row;
}

.m-body-message-body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.1rem;
}

@media only screen and (max-width: 476px) {
    .header-form {
        gap: 0.4rem;
    }
}

@media only screen and (min-width: 475px) and (max-width: 660px) { 
    .header-form {
        gap: 0.4rem;
    }
}

@media only screen and (min-width: 668px) and (max-width: 880px) {
    .header-form {
        gap: 0.3rem;
    }
}

@media only screen and (min-width: 1077px) and (max-width: 1200px) {
    .sidebar-header-elementos {
        gap: 0.7rem;
    }

    .header-form {
        gap: 0.5rem;
    }
}

@media only screen and (min-width: 1208px) and (max-width: 1300px) {
    .header-form {
        gap: 1rem;
    }
}