/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

.messageOnWindow {
    background-color: white;
    margin: auto;
    z-index: 999999999;
    overflow-y: auto;
    min-height: 200px;
    width: 360px;
    position: fixed;
    border-radius: 5px;
    max-height: 98%;
}

.shadowMessageOnWindow {
    z-index: 777777777;
    background-color: #122D46;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.9;
    width: 100%;
    height: 100%;
    display: none;
}

.closeMessageOnWindow {
    position:absolute;
    right:15px;
    top:7px;
    font-size:26px;
    cursor:pointer;
}

.headMessageOnWindow {
    height:35px;
    margin-bottom:15px;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    background-color: #FFF7;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.contentMessageOnWindow {
    min-height:110px;
    height:auto;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    -webkit-overflow-scrolling: touch;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.contentMessageOnWindow #contentTexteForMessageBox{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    font-size:16px;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
}

.contentBtMessageBox {
    height:40px;
    width:100%;
    text-align:right;
}

.contentBtMessageBox.backgroundForScroll {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0px;
    background-color: inherit;
    padding-top: 10px;
    -webkit-box-shadow: 0px 0px 13px -9px black;
            box-shadow: 0px 0px 13px -9px black;
}

.btAnnuleMessageBox {
    display:inline-block;
    cursor:pointer;
    color:#3352C2;
    -webkit-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
    padding:5px 10px;
    -webkit-user-select : none;
    -moz-user-select : -moz-none;
    -ms-user-select : none;
    user-select : none;
    font-size:16px;
}

.btAnnuleMessageBox:hover {
        background-color:#DEE5F1;
    }

.btAcceptMessageBox {
    display:inline-block;
    cursor:pointer;
    color:#99195E;
    -webkit-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
    padding:5px 10px;
    margin-right:10px;
    -webkit-user-select : none;
    -moz-user-select : -moz-none;
    -ms-user-select : none;
    user-select : none;
    font-size:16px;
    background-color:transparent;
    border:0px;
}

    .btAcceptMessageBox:hover {
        background-color:#DEE5F1;
    }

.btYesMesssageBox {
    margin-left:35px;
}

.titleMessageOnWindow {
    line-height:40px;
    margin-left:14px;
    text-transform:uppercase;
    font-size:22px;
}

.messageOnWindow.chooseMotif {
    -webkit-overflow-scrolling: touch;
}

.messageOnWindow.chooseMotif .titleMessageOnWindow {
    font-size:20px;
}

.messageOnWindow.chooseMotif #commentaireMessageBox {
    width:90%;
    height:50px;
    margin-top:10px;
    margin-bottom:10px;
}

.styleRaisonGlobal {
    height:30px;
    font-size:15px;
    cursor:pointer;
    line-height:30px;
    -webkit-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
    border-radius:3px;
    width:250px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    padding-left:10px;

    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none;

    -o-text-overflow:ellipsis;

       text-overflow:ellipsis;
    user-select: none;
    white-space: nowrap;
    overflow-x: hidden;
}

    .styleRaisonGlobal.hidden {
        -webkit-transform:translateY(-15px);
            -ms-transform:translateY(-15px);
                transform:translateY(-15px);
        opacity:0;
    }

.uneRaison {

}

.uneRaison:hover{
    padding-left:25px;
    background-color:#DEE5F1;
}

.uneRaisonChoisi {
    width:300px;
    background-color:#CB297B;
    color:#FFF;
}

#commentaireMessageBox {
    border:1px solid black;
    resize:none;
    margin-top:20px;
    padding:10px;
    border-radius:3px;
    width:250px;
    margin-left:auto;
    margin-right:auto;
}

    .messageOnWindow.vibre {
        -webkit-animation-name:vibration;
                animation-name:vibration;
        -webkit-animation-duration: 0.25s;
                animation-duration: 0.25s;
    }

#messageErrorInMessageBox {
    color: red;
    position: -webkit-sticky;
    position: sticky;
    bottom: 48px;
    background-color: #FFF7;
    padding: 10px 10px;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    display:none;
}

    @-webkit-keyframes vibration {
        0% {
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
        }


        20% {
            -webkit-transform: translateX(-5px);
                    transform: translateX(-5px);
        }


        40% {
            -webkit-transform: translateX(5px);
                    transform: translateX(5px);
        }


        60% {
            -webkit-transform: translateX(-5px);
                    transform: translateX(-5px);
        }


        80% {
            -webkit-transform: translateX(5px);
                    transform: translateX(5px);
        }
                
        100% {
            -webkit-transform: translateX(0px);
                    transform: translateX(0px);
        }
    }

    @keyframes vibration {
        0% {
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
        }


        20% {
            -webkit-transform: translateX(-5px);
                    transform: translateX(-5px);
        }


        40% {
            -webkit-transform: translateX(5px);
                    transform: translateX(5px);
        }


        60% {
            -webkit-transform: translateX(-5px);
                    transform: translateX(-5px);
        }


        80% {
            -webkit-transform: translateX(5px);
                    transform: translateX(5px);
        }
                
        100% {
            -webkit-transform: translateX(0px);
                    transform: translateX(0px);
        }
    }

#contentNumeroSecuForMessageBox {
    -webkit-transition:0.2s;
    -o-transition:0.2s;
    transition:0.2s;
}

    #contentNumeroSecuForMessageBox.hidden {
        -webkit-transform:translateY(-15px);
            -ms-transform:translateY(-15px);
                transform:translateY(-15px);
        opacity:0;
    }

#contentInfoNumeroSecuForMessageBox {
    position:-webkit-sticky;
    position:sticky;
    top:35px;
}

#contentInfoRegimeForMessageBox {
    margin-top:9px;
    position:-webkit-sticky;
    position:sticky;
    top:67px;
}

#contentInfoNumeroSecuForMessageBox, #contentInfoRegimeForMessageBox {
    -webkit-transition:0.2s;
    -o-transition:0.2s;
    transition:0.2s;
    background-color: #FFF7;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    padding-top:5px;
    width:100%;
}

#contentInfoNumeroSecuForMessageBox.hidden, #contentInfoRegimeForMessageBox.hidden {
    -webkit-transform:translateX(-15px);
        -ms-transform:translateX(-15px);
            transform:translateX(-15px);
    opacity:0;
}

    #contentInfoNumeroSecuForMessageBox .separator, #contentInfoRegimeForMessageBox .separator {
        width: 100%;
        height: 1px;
        display: block;
        background-color: #CCC;
        margin-top: 8px;
    }

    #contentInfoNumeroSecuForMessageBox div, #contentInfoRegimeForMessageBox div {
        font-size:14px;
        display:inline-block;
    }

    

.contentMessageOnWindow.modeRegimeAndCaisse {
    text-align:left;
    height:auto;
    display:block;
}

#contentRegimeForMessageBox {
    max-height: calc(100vh - 278px);
    overflow-y: auto;
    overflow-x:hidden;
    width:100%;
    -webkit-overflow-scrolling: touch;
    padding-bottom:100px;
    padding-top:20px;
}

#contentCaisseOfRegimeForMesageBox {
    overflow-y:auto;
    max-height: calc(100vh - 380px);
    width:100%;
    overflow-x:hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom:150px;
    padding-top:20px;
}

@media screen and (max-width: 600px) {
    #contentRegimeForMessageBox {
        max-height: calc(100vh - 330px);
        padding-bottom:150px;
    }
}

@media screen and (max-width:450px) {
    .messageOnWindow {
        width:95%;
    }
}