/********************
	Style général des modals
********************/
.modal,
.modal-open {
    overflow : hidden
}

.modal {
    position   : fixed;
    top        : 0;
    right      : 0;
    bottom     : 0;
    left       : 0;
    z-index    : 1050;
    display    : none;
    outline    : 0;
    background : transparent;
    opacity    : 0;
    transition : all .3s;
}

.modal.in {
    opacity     : 1;
    background  : rgba(0, 0, 0, 0.5);
    display     : flex !important;
    align-items : center;
}

.modal p + p {
    margin-top : .25em
}

.modal.fade .modal-dialog {
    transition        : -webkit-transform .3s ease-out;
    transition        : transform .3s ease-out;
    transition        : transform .3s ease-out, -webkit-transform .3s ease-out;
    -webkit-transform : translateY(-25%);
    transform         : translateY(-25%)
}

.modal.in .modal-dialog {
    -webkit-transform : translate(0);
    transform         : translate(0)
}

.modal-open .modal {
    overflow-x : hidden;
    overflow-y : auto
}

.modal-dialog {
    position : relative;
    width    : auto;
    margin   : 10px
}

.modal-content {
    position         : relative;
    background-color : #fff;
    background-clip  : padding-box;
    border-radius    : .3rem;
    outline          : 0
}

.modal-backdrop {
    position         : fixed;
    top              : 0;
    right            : 0;
    bottom           : 0;
    left             : 0;
    z-index          : 1040;
    background-color : #000;
    display          : none;
}

.modal-backdrop.fade {
    opacity : 0
}

.modal-backdrop.in {
    opacity : .5
}

.modal-header {
    background    : var(--color-primary);
    padding       : 1em;
    border-bottom : 1px solid #e5e5e5
}

.modal-header:after {
    content : "";
    display : table;
    clear   : both
}

.modal-header .close {
    color: #fff;
    opacity: 1;
}

.modal-title {
    font-size   : 1em;
    margin      : 0;
    line-height : 1.5;
    font-weight : 600;
    color       : var(--color-white-default);
}

.modal-body {
    position  : relative;
    color     : var(--color-primary);
    font-size : var(--font-size-300);
    padding   : 1em;
}

.modal-body__info-value {
    display         : flex;
    justify-content : space-between;
}

.modal-footer {
    padding    : 15px;
    text-align : right;
    border-top : 1px solid #e5e5e5
}

.modal-footer:after {
    content : "";
    display : table;
    clear   : both
}

.modal-scrollbar-measure {
    position : absolute;
    top      : -9999px;
    width    : 50px;
    height   : 50px;
    overflow : scroll
}

@media (min-width : 576px) {
    .modal-dialog {
        max-width : 600px;
        margin    : 30px auto
    }

    .modal-sm {
        max-width : 300px
    }
}

@media (min-width : 992px) {
    .modal-lg {
        max-width : 900px
    }
}

@media (max-width : 767px) {
    .modal-header {
        font-size : var(--font-size-100);
    }
}

@media (min-width : 768px) {
    .modal-header {
        font-size : var(--font-size-400);
    }
}