/**
 * @file
 * RGR css pour message flash
 */


@keyframes AnimMessageFlash {
    0% {
        left: 100%;
    }
    100% {
        left: -100%;
    }
}


/*defilement*/

@keyframes MessageFlashDefil {
    from {
        left: 100%;
        transform: translate(100%, 0);
    }
    to {
        left: -100%;
        transform: translate(-100%, 0);
    }
}

@-webkit-keyframes MessageFlashDefil {
    from {
        left: 100%;
        transform: translate(100%, 0);
    }
    to {
        left: -100%;
        transform: translate(-100%, 0);
    }
}

.marqueeMessageFlashDefil {
    width: 100%;
    /* height:100px; */
    /* line-height:20px; */
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}

.textMessageFlashDefil {
    white-space: nowrap;
    /* height:100px; */
    vertical-align: middle;
    font-size: 0.8em;
    padding-top: 5px;
    /*  line-height: 20px; */
    /* text-align: right;  */
    animation-name: MessageFlashDefil;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-name: MessageFlashDefil;
    -webkit-animation-duration: 15s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}


/*fin defilement*/

@-webkit-keyframes AnimMessageFlash {
    0% {
        left: 100%;
    }
    100% {
        left: -100%;
    }
}

.messageFlash {
    width: 100%;
    /* height:120px; */
    /* height: auto !important;  */
    /* line-height:100px; */
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}

.bandeauMessageFlash {
    /* text-align: left;  */
    vertical-align: middle;
    font-size: 20px;
    /* position:relative; */
}


.bandeauMessageFlashV2 {
    display: block !important;
    height: 100%;
    margin-left: -260px;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    /* text-align: center; */
    /* top: 50px; */
    width: 260px;
    /* z-index: 20; */
}

body .bandeauMessageFlashV2 {
    left: 0 !important;
    transition: all 5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -webkit-transition: all 5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    /* -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s; */
    -ms-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.alerteFlash {
    /* float: left; */
    background: transparent;
    /* background: green; */
    border-radius: 100%;
    margin-top: 10px;
    width: 30px;
    height: 30px;
    -webkit-animation: alerteF1 3s 3;
    animation: alerteF1 3s 3;
}

@-webkit-keyframes alerteF1 {
    0% {
        -webkit-transform: scale(1.0, 1.0);
        transform: scale(1.0, 1.0);
        background: white;
    }
    17% {
        -webkit-transform: scale(1.0, 1.0);
        transform: scale(1.0, 1.0);
        background: white;
    }
    50% {
        -webkit-transform: scale(1.0, 1.0);
        transform: scale(1.0, 1.0);
        background: orange;
    }
    83% {
        -webkit-transform: scale(1.0, 1.0);
        transform: scale(1.0, 1.0);
        background: red;
    }
    100% {
        -webkit-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
        background: red;
    }
}

@keyframes alerteF1 {
    0% {
        background: green;
        transform: scale(1.0, 1.0);
    }
    10% {
        background: orange;
        transform: scale(0.5, 0.5);
    }
    20% {
        background: red;
        transform: scale(1.0, 1.0);
    }
    30% {
        background: orange;
        transform: scale(0.5, 0.5);
    }
    40% {
        background: green;
        transform: scale(1.0, 1.0);
    }
    50% {
        background: orange;
        transform: scale(0.5, 0.5);
    }
    60% {
        background: red;
        transform: scale(1.0, 1.0);
    }
    70% {
        background: orange;
        transform: scale(0.5, 0.5);
    }
    80% {
        background: green;
        transform: scale(1.0, 1.0);
    }
    90% {
        background: orange;
        transform: scale(0.5, 0.5);
    }
    100% {
        background: red;
        transform: scale(1.0, 1.0);
    }
}

.drapeauMessageFlash {
    float: left;
    /* width: 100%; */
    height: 100px;
    /* background: #F00; */
    background-image: url(../../images/logo.jpg);
    background-size: 100px 100px;
    background-repeat: no-repeat;
    width: 102px;
    position: absolute;
}

.textMessageFlash {
    /* clear: both; */
    /* padding-left: 50px;   */
    /* text-align: left !important;  */
    position: relative;
    /* left: 105px; */
    /* width: 100%; */
}

.scrollMessageFlash .content {
    overflow: hidden;
    white-space: nowrap;
}

.scrollMessageFlash .left {
    float: left;
    width: 20px;
}

.scrollMessageFlash.right {
    float: right;
    width: 20px;
}