/*------------------------------*\
    #POPIN/POPUP bootstrap
/*------------------------------*/
#loginPopup {
    /* correctif position en mobile */
    padding-right: 0!important;
}
.modal-open .modal,
.modal {
    background: rgba(0, 41, 72, .8);
}

/* modal bootstrap large -> utilisé pour voir société uniquement */
.modal .modal-dialog.modal-lg .close {
    top:-44px;
}

@media(min-width: 768.98px) {
    .modal-dialog__large {
        width: 60%;
        max-width: 60%;
    }
}

@media(max-width: 768px) {
  .modal-dialog {
    min-height: calc(100vh - 20px);
  }
}
.modal-content {
    /**--- Skew transform ---**/
    border-radius: 20px;
}
/* corrige l'effet skew pour les enfants */
.modal-content  > .modal-body {
    padding: 50px;
}

.modal-content .close {
    position: absolute;
    top: -28px;
    right: 0;
    background: var(--white);
    color: var(--main-color_esn-forfait);
    font-size: calc(4 * var(--basePX));
    line-height: 40px;
    font-weight: 100;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
}
.modal-content .close:hover {
    color: var(--main-color_profil);
    opacity: 1!important;
}

/*------------------------------*\
    #POPIN/POPUP bootstrap cookie
/*------------------------------*/
#cookiePopup .modal,
#cookiePopup.modal,
#cookiePopupParams .modal,
#cookiePopupParams.modal,
#cookiePopupParamsPlusPlus .modal,
#cookiePopupParamsPlusPlus.modal {
    background: transparent;
}
.modal-dialog.modal-dialog-bottomed {
    min-width: 80%;
    align-items: end!important;
}
#cookiePopupParamsPlusPlus {
    padding-right: 0!important;
}
@media(min-width: 768.98px) {
    #cookiePopupParamsPlusPlus .modal-dialog {
        min-width: 100%;
    }
}
/*-------- pas de skew ---------*/
.modal-content.cookies,
.modal-content.cookies > .modal-body {
    transform: initial;
}
.modal-content.cookies {
    border-radius: 20px;
    box-shadow: 5px 5px 5px var(--main-color_paragraphe);
}

.modal-title,
.modal-angular-title {
    color: var(--main-color_esn-forfait);
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.modal-subtitle,
.modal-angular-subtitle {
    font-size: calc(2 * var(--basePX));
    color: var(--draggable-bleu-ciel);
    font-family: "Poppins", sans-serif;
    background: var(--white);
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin-right: 0!important; /* compense le scroll horizontal lors de la position sticky */
}
.modal-subtitle.engagements {
    font-size: calc(var(--basePX) + 7px);
    /* charte */
    /* un effet de sticky proposé par mes soins */
    padding: .5rem!important;
    border: 2px solid var(--main-color_paragraphe);
    text-align: center;
}
.modal-subtitle.titleEngagements {
    top: 40px;
}
.modal-paragraph {
    font-size: calc(var(--basePX) + 4px);
    color: var(--main-color_paragraphe);
    font-family: "Poppins", sans-serif;
    text-align: justify;
}

.modal-paragraph ol {
    font-size: calc(var(--basePX) + 3px);
    margin-top:.5rem;
}

.modal-content .form-control {
    border: transparent;
    font-size: calc(var(--basePX) + 4px);
    border-radius: 0;
}
.modal-content label {
    font-size: calc(var(--basePX) + 2px);
    font-family: "Poppins", sans-serif;
}

.modal-content .pwd-miss a {
    color: var(--main-color_paragraphe);
    font-size: calc(var(--basePX) + 2px);
}

/*------------------------------*\
    #POPIN/POPUP angular
/*------------------------------*/
md-backdrop.md-opaque {
    background: rgba(0, 41, 72, .8);
    opacity: 1;
}
body.md-dialog-is-showing {
    top: 0!important;
}
body.md-dialog-is-showing .md-dialog-container {
    overflow-x: hidden;
    overflow-y: auto;
}
.md-dialog-container {
    top: 0!important;
    height: 100%;
}

.wrapper-scrollbar-modal {
    height: 350px;
    overflow-x: hidden;
}

.wrapper-scrollbar-modal__profil {
    height: 500px;
    overflow-x: hidden;
}

md-dialog.fake--bootstrap-modal {
    position: relative;
    overflow: initial;
    background-color:initial;
    box-shadow: none;
}

@media (width: 576px) {
    md-dialog.fake--bootstrap-modal {
        width: 80%;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini,
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__medium {
        max-width: 550px;
    }

    .fake--bootstrap-modal .modal-content .close {
        top: 0;
    }
}
@media (width: 768px) {
    md-dialog.fake--bootstrap-modal {
        width: 80%;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini {
        max-width: 550px;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__medium,
    .fake--bootstrap-modal.fake--bootstrap-modal__medium .modal-dialog {
        max-width: 700px;
    }

    .fake--bootstrap-modal .modal-content .close {
        top: 0;
    }
}

@media (width: 834px) {
    md-dialog.fake--bootstrap-modal {
        width: 80%;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini {
        max-width: 550px;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__medium,
    .fake--bootstrap-modal.fake--bootstrap-modal__medium .modal-dialog {
        max-width: 700px;
    }

    .fake--bootstrap-modal .modal-content .close {
        top: 0;
    }
}
@media (width: 992px) {
    md-dialog.fake--bootstrap-modal {
        width: 80%;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini {
        max-width: 550px;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__medium,
    .fake--bootstrap-modal.fake--bootstrap-modal__medium .modal-dialog {
        max-width: 700px;
    }

    .fake--bootstrap-modal .modal-content .close {
        top: 0;
    }
}
@media (width: 1024px) {
    md-dialog.fake--bootstrap-modal {
        width: 80%;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini {
        max-width: 550px;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__medium,
    .fake--bootstrap-modal.fake--bootstrap-modal__medium .modal-dialog {
        max-width: 700px;
    }

    .fake--bootstrap-modal .modal-content .close {
        top: 0;
    }
}
@media (min-width: 1200px) { 
    /* il faut avoir une modal taille fixe car le btn close ne suis pas le skew, sauf entre les breakpoint, car à chaque px, il faudrait mettre un style */
    md-dialog.fake--bootstrap-modal {
        max-width: initial;
        width: 1100px;
    }
    .fake--bootstrap-modal .modal-content .close {
        top: 5px;
        border-radius: 50%;
        right: 5px;
    }
    .not__angular.fake--bootstrap-modal .modal-content .close {
        top: 5px;
        border-radius: 50%;
        right: 5px;
    }

    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini {
        width: 550px;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__medium,
    .fake--bootstrap-modal.fake--bootstrap-modal__medium .modal-dialog {
        max-width: 700px;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini .close{
        top: 5px;
        right: 10px;
    }
}
/* reset skew modal pour responsive */
@media (max-width: 959.98px) {
    .fake--bootstrap-modal .modal-content,
    .fake--bootstrap-modal .modal-content > *,
    .modal-content .close,
    .modal-content .close > div,
    .not__angular.fake--bootstrap-modal.fake--bootstrap-modal__mini,
    .not__angular.fake--bootstrap-modal.fake--bootstrap-modal__medium {
        transform: initial;
    }

    .modal-content .close {
        top: 0;
        right: 0;
    }
    
}

@media (min-width: 959.98px) and (max-width: 1199.98px) {
    .modal-content .close {
        top: 6px;
        right: 6px;
    }
    
}

.fake--bootstrap-modal .modal-body {
    position: initial;
}

.md--modal-content {
    /**--- Skew transform ---**/
    border-radius: 0;
}

.md--modal-content .modal-content {
    border: 0;
}
/* corrige l'effet skew pour les enfants */
.md--modal-content > .md--modal-body {
    padding: 50px;
}

.md--modal-content .modal-content .close {
    top: 0;
    right: 0;
}

.fake--bootstrap-modal .md-dialog-content {
    padding: 0;
}

.md-dialog-container .md-toolbar:not(.md-menu-toolbar) {
    background: var(--white);
}

.fake--bootstrap-modal .md-button:not([disabled]) {
    border: 1px solid transparent;
}
.fake--bootstrap-modal .md-button:not([disabled]):hover {
    background: var(--white);
    color: var(--main-color_paragraphe);
    border: 1px solid var(--main-color_paragraphe);
}

.fake--bootstrap-modal .color--black {
    color: var(--background_menu-gauche)!important;
}
.fake--bootstrap-modal .color--black .custom-control-label {
    color: var(--black)!important;
}