body {
    font-family:  "Century Gothic","Helvetica Neue",Helvetica,Arial,sans-serif !important;
}

.container>img {
    max-height: 20vh;
}

#forgotten-password-button {
    background: none;
    border: none;
    font-size: .8em;
    color: blue;
    text-decoration: underline;
}

#forgottenPwdEmail {
    width: 100%;
}

.group {
    position: relative;
    left: .5em;
    top: .5em;
    font-size: 1.2em;
    width: fit-content;
}

#addNewButton, .options, .deconnexion, .back {
    background-color: white;
    border: none;
    border-radius: 5px;
    padding: 7px 15px;
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.2);
}

.options-and-deconnexion, .back {
    position: absolute;
    top: 1em;
    right: 1em;
}

.options, .deconnexion, .back {
    text-decoration: none;
    color: black;
    cursor: pointer;
}

#addNewButton:hover, .options:hover, .deconnexion:hover, .back:hover {
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.5);
    color: black;
}

ul {
    width: 100%;
    padding: 0 !important;
}

li {
    border-radius: 5px;
    padding: 7px 15px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.2);
}

.header-row {
    background-color: #95A5A6;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: bold;
}

.body-row {
    font-size: .9em;
}

.row-prescripteur {
    background-color: rgba(0, 0, 110, .2);
}

.row-recepteur {
    background-color: rgba(50, 50, 255, .3);
}

.row-everybody {
    background-color: #B0F2B6;
}

.row-a-suivre {
    color: blue;
}

.row-ok {
    color: green;
}

.row-non {
    color: red;
}

img[id^="saveButton"] {
    filter: grayscale(1);
    width: 2em;
    height: 2em;
}

img[id^="editButton"] {
    width: 2em;
    height: 2em;
    cursor: pointer;
}

.col-recepteur>select, .col-prospect>input, .col-recommandation>input {
    width: 90%;
}

button[id^="deleteButton"] {
    background-color: rgba(255, 255, 255, 0);
    background-image: url(../images/delete.png);
    background-size: cover;
    width: 2em;
    height: 2em;
    border: 0;
}

.header-row .col-date, .header-row .col-prescripteur, .header-row .col-recepteur, .header-row .col-prospect, .header-row .col-statut {
    cursor: pointer;
}

.arrow {
    display: none;
    width: 1em;
    margin-left: 1em;
}

.modal-header {
    background-color: rgba(0, 0, 110, .2);
}

.modal-body {
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.2);
}

.modal-body>div {
    margin: .5em 0;
}

#nouveau-recepteur {
    display: flex;
}

#recepteur, #recepteurVictoire, #recepteurHappyBiz, #recepteurInvite {
    margin-left: 1em;
}

#recepteur-radios {
    display: flex;
    justify-content: space-evenly;
}

#recommandation {
    width: 100%;
}

.modal-footer {
    background-color: rgba(0, 0, 110, .2);
}

#alert-prospect, #alert-recommandation, #hidden-select, #alert-forgottenPwdEmail-empty, #alert-forgottenPwdEmail-wrong, #alert-forgottenPwdEmail-success, #alert-mismatch {
    display: none;
}

.hr-modal {
    position: relative;
    width: 30em;
    left: 50%;
    translate: -15em;
}

.hr-options {
    position: relative;
    width: 40em;
    left: 50%;
    transform: translate(-20em);
}

.first-hr {
    margin-top: 5em;
}

/* Options */
#changeIdentifier, #changePassword, #personalData, #userPersonalData, #createNewUser, #createNewGuest, #removeUser, #restoreUser {
    padding: 1em;
    border: 1px solid #ced4da;
    border-radius: 5px;
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.2);
}

.userPersonalDataContent {
    display: none;
}

#newIdentifierMessageContainer, #newPasswordMessageContainer, #newUserMessageContainer, #newGuestMessageContainer, #removeUserMessageContainer, #restoreUserMessageContainer, #newPersonalDataMessageContainer, #saveUserPersonalDataContainer, #userPersonalDataMessageContainer {
    display: none;
}

#newIdentifierMessage, #newPasswordMessage, #newUserMessage, #newGuestMessage, #removeUserMessage, #restoreUserMessage {
    color: red;
}

.generatePwd {
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
}

.passwordEye {
    position: absolute;
    width: 2em;
    height: 2em;
    top: 0;
    right: 1em;
    cursor: pointer;
}

#logs {
    background-color: rgba(150, 150, 150, 0.1);
    width: 100%;
    height: 20em;
    padding: 1em;
    border: 2px inset #ced4da;
    margin-bottom: 5em;
}

/* Version mobile */
.home-card {
    width: 100%;
}

@media (min-width: 768px) {
    .home-card {
        width: 50%;
    }
}

@media (max-width: 400px) {
    .options-and-deconnexion {
        position: relative;
        right: 0;
        text-align: center;
    }

    .group {
        top: 1.5em;
        text-align: center;
    }
}

.main-container {
    margin-top: 3rem;
}

@media (max-width: 768px) {
    .main-container {
        margin-top: 1rem;
    }
}

@media (max-width: 1100px) {
    .header-row {
        text-transform: none;
        letter-spacing: 0;
    }
}

@media (max-width: 768px) {
    li {
        display: block;
        padding: 0;
        overflow: hidden;
    }

    li>div {
        display: flex;
    }
}

.header-col {
    background-color: #95A5A6;
    flex: 1 1 40%;
    text-align: right;
    padding-right: .5em;
}

.body-col {
    flex: 1 1 60%;
    padding-left: .5em;
}

.first-row {
    padding-top: 7px;
}

.last-row {
    padding-bottom: .5em;
    padding-top: .5em;
}

img[id^="deleteButton"] {
    width: 2em;
    height: 2em;
}

@media (max-width: 768px) {
    #recepteur-radios {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.sorting-container {
    position: relative;
    /* width: 90% !important; */
    width: fit-content;
    text-align: center;
    margin: 1rem auto 0 auto;
    padding: .5rem;
    border-radius: 5px;
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.2);
}

.sorting-buttons-container {
    display: none;
}

.close-sorting {
    position: absolute;
    display: none;
    background-color: #e9e9ed;
    width: 1.5em;
    height: 1.5em;
    right: .5em;
    top: .5em;
    line-height: 1.7em;
    border: 1px solid #979797;
    border-radius: 50%;
}

.sorting-button {
    border-radius: 10px;
}

.button-active {
    background-color: #d0d0d7;
    border: 1px inset #979797;
}