/* USER MENU */
@keyframes increase-width {
    from {width: 0;}
    to {width: 300px;}
}

@keyframes increase-opacity {
    from {opacity: 0;}
    to {opacity: 1;}
}

#g-navigation .header-c .open > .dropdown-menu {
    display: flex;
    flex-direction: column;
    align-items: start;
    position: fixed;
    right: 0 !important;
    width: 300px;
    min-width: 0;
    margin-top: 0;
    height: 100%;
    border: unset;
    border-radius: 0;
    box-shadow: unset;
    animation: increase-width 0.3s;
    animation-fill-mode: forwards;
    transition: all 0.3s ease-in-out;
    padding: var(--p-32) var(--p-32) var(--p-32) var(--p-32);
}
#g-navigation:not(.g-flushed) .header-c .open > .dropdown-menu {
    right: 0;
}
#g-navigation.g-flushed .header-c .open > .dropdown-menu {
    right: 0;
}

#g-navigation .header-c .open > #userDropdownMenu *{
    opacity: 0;
    animation: increase-opacity 0.3s;
    animation-fill-mode: forwards;
    animation-delay: 0.2s;
    transition: all 0.3s ease-in-out;
}

#userDropdownMenu h5  {
    color: var(--neutral-900);
    font-family: var(--em-default-font-title);
}


#userDropdownMenu li {
    width: 100%;
    height: auto !important;
    margin: 0 !important;
}
#userDropdownIcon {
    background-color: var(--blue-500);
    border: 2px solid var(--blue-500);
    color: var(--neutral-0);
    margin:0;
    box-shadow: none !important;
    cursor: pointer;
}
#userDropdownIcon:hover,
#userDropdownIcon.active,
#userDropdownIcon:hover:active {
    background-color:transparent;
    color: var(--blue-700);
}

#g-navigation .header-c .open > #userDropdownMenu li.dropdown-header {
    font-family: var(--em-default-font);
}


#userDropdownMenu li.dropdown-header {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-all;
    white-space: break-spaces;
}

#userDropdownMenu li>a:hover,
#userDropdownMenu .active>a {
    background: #29d4ff;
    color: var(--neutral-0);
}

li>a:hover {
	text-decoration: underline;
}

.header-c .header-right a:not(.btn):hover {
    text-decoration: underline;
}

.view-reset #g-navigation .header-c .header-right a.btn {
    letter-spacing: 0.1rem;
    line-height: 1.15;
}

.view-reset #g-navigation .header-c .header-right a.btn.btn-danger:not(.btn-creer-compte) {
    margin-right: 0;
}

.em-user-dropdown-button {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    position: relative;
    width: 45px !important;
    height: 45px;
    min-width: 30px;
}

#g-navigation #header-c .header-right {
    display: flex;
    gap: var(--p-8);
}

#g-navigation #header-c .header-right a.btn.btn-danger {
    font-size: var(--em-applicant-font-size) !important;
    margin-bottom: 0 !important;
    text-shadow: none;
    padding: var(--em-spacing-vertical) var(--em-spacing-horizontal);
    display: flex;
    align-items: center;
    justify-content: center;
}

#g-navigation #header-c .header-right a.btn.btn-danger.btn-creer-compte,
#g-navigation #header-c .header-right a.btn.btn-danger.btn-creer-compte.inscription {
    border-radius: var(--em-applicant-br);
    margin-bottom: var(--m-4);
    line-height: normal;
    letter-spacing: normal;
    color: var(--neutral-0);
    background: var(--em-primary-color);
    border: 1px solid var(--em-primary-color) !important;
}

#g-navigation #header-c .header-right a.btn.btn-danger.btn-creer-compte:hover,
#g-navigation #header-c .header-right a.btn.btn-danger.btn-creer-compte:focus,
#g-navigation #header-c .header-right a.btn.btn-danger.btn-creer-compte:active,
#g-navigation #header-c .header-right a.btn.btn-danger.btn-creer-compte.inscription:hover,
#g-navigation #header-c .header-right a.btn.btn-danger.btn-creer-compte.inscription:focus,
#g-navigation #header-c .header-right a.btn.btn-danger.btn-creer-compte.inscription:active{
    color: var(--em-primary-color);
    background: var(--neutral-0);
    border: 1px solid var(--em-primary-color);
}

#g-navigation #header-c .header-right a.btn.btn-danger:not(.btn-creer-compte) {
    border-radius: var(--em-applicant-br) !important;
    margin-bottom: 0 !important;
    line-height: normal;
    letter-spacing: normal;
    color: var(--em-secondary-color);
    background: var(--neutral-0);
    border: 1px solid var(--em-secondary-color);
}

#g-navigation #header-c .header-right a.btn.btn-danger:not(.btn-creer-compte):hover,
#g-navigation #header-c .header-right a.btn.btn-danger:not(.btn-creer-compte):focus,
#g-navigation #header-c .header-right a.btn.btn-danger:not(.btn-creer-compte):active {
    color: var(--neutral-0);
    background: var(--em-secondary-color);
    border: 1px solid var(--em-secondary-color) !important;
}

#g-navigation #header-c .header-right a:not(.btn):hover {
    text-decoration: underline;
}


a.forgotten_password_header {
    font-size: var(--em-applicant-font-size);
    color: var(--link-regular);
    float: right;
}

a.forgotten_password_header:hover {
    color: var(--link-hover);
}


a.btn.btn-danger .btn-creer-compte,
a.btn.btn-danger .inscription {
    background: var(--em-primary-color);
    border: 1px solid var(--em-primary-color);
    color: var(--neutral-0);
    border-radius: var(--em-applicant-br) !important;
    height: auto;
}

a.btn.btn-danger .btn-creer-compte:hover,
a.btn.btn-danger .btn-creer-compte:active,
a.btn.btn-danger .btn-creer-compte:focus,
a.btn.btn-danger .inscription:hover,
a.btn.btn-danger .inscription:focus,
a.btn.btn-danger .inscription:active{
    background: var(--transparent);
    color: var(--em-primary-color);
    border-color: var(--em-primary-color) !important;
}

a.btn.btn-danger:not(.btn-creer-compte) {
    background: var(--transparent);
    border: 1px solid var(--em-secondary-color);
    color: var(--em-secondary-color);
    height: auto;
}

a.btn.btn-danger:not(.btn-creer-compte):hover {
     background: var(--em-secondary-color);
     color: var(--neutral-0);
     border-color: var(--em-secondary-color) !important;
 }


#userDropdownIcon {
    background: transparent;
    font-size: 1.5em;
    width: 30px !important;
    height: 30px !important;
    align-items: center;
    display: flex;
    justify-content: center;
    border: unset !important;
}

#userDropdownMenu li > a:hover,
#userDropdownMenu.active > a {
    background: var(--em-primary-color);
    color: var(--neutral-0);
}

#userDropdownMenu hr {
    margin: var(--m-16) 0;
}

.em-profile-container {
    padding: 8px;
}
#userDropdown:hover .em-profile-container{
    background: transparent;
    border-radius: var(--em-default-br);
}

/* CORRECTION  */
.login .btn, .logout .btn, .registration .btn, .profile-edit .btn, .remind .btn, .reset .btn {
    margin-right: 0 !important;
}

.logout-button-user{
    padding: var(--em-spacing-vertical) var(--em-spacing-horizontal)!important;
    border-radius: var(--em-applicant-br);
    text-align: center;
    background-color: var(--red-500);
    color: var(--neutral-0) !important;
    letter-spacing: normal;
    line-height: normal !important;
    font-size: var(--em-applicant-font-size);
    border: 1px solid var(--red-500) !important;
}

.logout-button-user span {
    color: var(--neutral-0) !important;
}

.logout-button-user:hover,
.logout-button-user:focus {
    border: 1px solid var(--red-500) !important;
    background-color: var(--neutral-0) !important;
    color: var(--red-500) !important;
}

.logout-button-user:hover span,
.logout-button-user:focus span {
    color: var(--red-500) !important;
}

#header-c #userDropdownMenu a.edit-button-user {
    text-shadow: none;
    text-transform: initial;
    border-radius: var(--em-applicant-br) !important;
    color: var(--neutral-0);
    padding: var(--em-spacing-vertical) var(--em-spacing-horizontal);
    text-align: center;
    line-height: normal;
    letter-spacing: normal;
    font-size: var(--em-applicant-font-size);
    white-space: normal;
}

#header-c #userDropdownMenu a.edit-button-user:hover,
#header-c #userDropdownMenu a.edit-button-user:focus,
#header-c #userDropdownMenu a.edit-button-user:active {
     background: transparent !important;
 }


#header-c .platform-content #userDropdownLabel .em-profile-container p.em-font-weight-500 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 200px;
}

@media all and (min-width: 480px) and (max-width: 767px) {

    .header-right {
        text-align: center !important;
        margin-top: var(--m-8);
        margin-bottom: -70px;
    }

    .header-right {
        margin-top: 0;
        margin-bottom: 0;
    }

    .top-a .g-content, .header-c {
        justify-content: center;
    }

    #header-c.size-29 {
        -webkit-flex: 0 100% !important;
        -moz-flex: 0 100% !important;
        -ms-flex: 0 100% !important;
        flex: 0 100% !important;
        width: 100% !important;
    }

    #header-c .platform-content div#userDropdownLabel {
        position: fixed;
        right: 12px;
        top: 22px;
    }
}

@media screen and (min-width: 768px) and (max-width: 959px) {
    #header-c .platform-content div#userDropdownLabel {
        position: fixed;
        right: 59px;
        top: 19px;
    }
}

.dropdown #userDropdownLabel {
    display: flex;
    justify-content: flex-end;
}

.dropdown #userDropdownLabel div  {
    cursor: pointer;
    position: relative;
    width: fit-content;
}

#g-navigation .g-content .platform-content:nth-child(1){
    z-index: 2;
}

#g-navigation .g-content .platform-content:nth-child(2) {
    z-index: 1;
}

/* Gestionnaire plateforme et programme */
.dropdown #background-shapes {
    mask-image: url('/modules/mod_emundus_user_dropdown/assets/fond-formes-header.svg');
    height: 72px;
    background: var(--em-profile-color);
    position: absolute;
    width: 300px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 300px;
    mask-origin: border-box;
    right: -10px;
    top: -6px;
}

/* Déconnecté */
#background-shapes {
    mask-image: url('/modules/mod_emundus_user_dropdown/assets/fond-formes-header.svg');
    height: 72px;
    background: var(--em-profile-color);
    position: absolute;
    width: 300px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 300px;
    mask-origin: border-box;
    right: 0;
    top: 0;
    pointer-events: none;
    z-index: -1;
}

div#userDropdown {
    float: initial !important;
}

@media screen and (min-width: 768px) and (max-width: 959px) {
     .header-c #background-shapes {
         display: none;
    }

    #header-c .platform-content #userDropdownLabel .em-profile-container p.em-font-weight-500 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 150px;
    }
}

@media screen and (min-width: 960px) and (max-width: 1023px) {
     #header-c .platform-content #userDropdownLabel .em-profile-container p.em-font-weight-500 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 180px;
    }
}

@media (max-width: 768px) {
    .header-c #background-shapes {
        display: none;
    }
}

@media (max-width: 479px) {
    #header-c .platform-content #userDropdownLabel .em-profile-container p.em-font-weight-500 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 160px;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    #header-c .platform-content #userDropdownLabel .em-profile-container p.em-font-weight-500 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 120px;
    }
}