/*
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Sen:wght@400;500;600;700;800&display=swap');
*/

@font-face {
    font-family: avenirBold;
    src: url(/css/fonts/Avenir\ Heavy.ttf);
}

@font-face {
    font-family: avenirReg;
    src: url(/css/fonts/Avenir\ Regular.ttf);
}

@font-face {
    font-family: bierstadt-bold-italic;
    src: url(/css/fonts/bierstadt-bold-italic.ttf);
}

@font-face {
    font-family: bierstadt-bold;
    src: url(/css/fonts/bierstadt-bold.ttf);
}

@font-face {
    font-family: bierstadt-italic;
    src: url(/css/fonts/bierstadt-italic.ttf);
}

@font-face {
    font-family: bierstadt;
    src: url(/css/fonts/bierstadt.ttf);
}

.myobj,
.myprog {
    background-color: rgba(255, 255, 255, .7);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding-top: 15px;
    padding-right: 15px;
}



.thisicon {
    cursor: pointer;
}


.titleaction:hover {
    background-color: rgba(0, 138, 255, .1);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

html, body {

    font-family: avenirReg;
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
}

strong {
    font-family: avenirBold;
}


.pagewrapper {
    min-height: 100%;
    position: relative;
}

.last-div {
    padding-bottom: 325px;
}

body.presentation .last-div {
    padding-bottom: 450px;
}

body.mylogin .last-div {
    padding-bottom: 0px!important;
}

.lng:hover {
    text-decoration: none;
    background-color: #555555;
    color: white;
}

.lng {
    padding: 10px 15px;
    text-decoration: none;
    position: absolute;
    top: 50px;
    right: 30px;
    background-color: #008aff;
    color: white;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

a.lngint {
    padding: 5px 15px;
    text-decoration: none;
    position: relative;
    background-color: #008aff;
    color: white;
    margin-top: 2px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    width: 50px;
    display: inline-block !important;
}



.login-wr {
    padding: 25px;
}

.wrapper-login h1 {
    display: block;
}
.tf {
    background-color: #ffffffaa;
}

.wrapper-login img {
    
    -webkit-border-top-left-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomleft: 25px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.login-pict {
    width: 101%;
}
.wrapper-login {
    padding: 0;
    -webkit-box-shadow: 0px 0px 13px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 13px 4px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

.myfooter {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #164915;
    background-color: #00033b;
    background-color: #164915;
    background-color: white;
    background-color: #eeeeee55;

    color: #000;
    font-weight: 100;
}

.top-line {
    height: 20px;

    background: rgb(56, 135, 5);
    background: linear-gradient(90deg, rgba(56, 135, 5, 1) 1%, rgba(0, 138, 255, 1) 100%);
}

.priv {
    float: right;
}

body h1 {
    font-size: 35px;
    font-family: bierstadt;
    font-weight: bold;
    display: inline;
    padding-right: 10px;
    background-color: rgba(255, 255, 255, 0.4);
}

body h1 span {
    font-size: 35px;
    font-family: bierstadt-bold;
    color: #008aff;
}


body a {
    color: #164915;
    text-decoration: none;
}

body.introduction {
    background-image: url(../images/back-neur.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

body.ola-module {
    background-image: url(/images/intro-bg-img.jpg);
    background-image: url(../images/back-neur.png);
    /*background-size: 50%;*/
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

body.injection-module {
    background-image: url(/images/inj-module-o.jpg);
    background-image: url(../images/back-neur.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

body.mylogin {
    background-image: url(../images/back-neur.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

body.presentation {
    background-image: url(/images/presentation.png);
    background-image: url(../images/back-neur.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: right top;
}

.pre-btn {
    width: 400px;
}

.top-menu h3.injection.active a {
    color: #388705;
}

.top-menu h3.injection.disabled a {
    color: #000000;
}

.top-menu h3.injection.active {

    border-color: #388705;
    border: 1px solid #388705;
}

.top-menu h3.injection {
    background-color: #388705;
    border-color: #388705;
    border: 1px solid #388705;

}

.top-menu .ola {
    background-color: #008aff;

}

.top-menu .ola a {
    color: white;
}

.drp {
    width: 100%;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border: 3px solid #3cbd6d;
}

.drp.bl {
    border: 3px solid #008aff;
}

.wrapper-target {
    border: 1px solid #ddd;
    padding: 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
 -webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.37);
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.37);
    background-color: #ffffffcc;


}

.intro-liste {
    padding: 30px;
    border: 1px solid #ddd;
    background-color: #ffffffaa;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    -webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.37);
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.37);
}

}

.intro-liste a {
    font-size: 24px;
}

.intro-liste {
    font-size: 20px;
}

.number,
.duration {
    margin-top: 10px;
}

.bi.bi-check-lg {
    margin-right: 10px;
}

.target {
    overflow-y: scroll;
    height: 100px;
    padding-right: 20px;
    padding-left: 10px;
}

.play-your button {
    top: 40%;
    position: absolute;
}

.play-your {
    position: relative;
}

.target .bi.bi-x-square {
    float: right;
    color: red;
    cursor: pointer;
}

.number .t,
.duration .t {
    font-weight: bold;
    font-family: avenirBold;
    text-align: center;
}

.your {
    font-family: avenirBold;
}

.number .numv input,
.duration .time input {
    text-align: center;
}

.texte-intro-icon i {
    color: #388705;
    color: black;
}

.texte-intro-icon {
    display: inline-block;
    height: 70px;
    line-height: 1.2;
}

.but-intro {

    margin-top: 65px;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
}



body.injection-module input.videoCheckbox:checked {
    background-color: #388705;


    border-color: #388705;
}


body.injection-module input.videoCheckbox {

    background-color: white;

    border-color: #388705;
}



::-webkit-scrollbar-thumb {
    /*
    border-radius: 4px;
    background-color: #388705;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    */
}

.target.blue::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #008aff;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.target.green::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #388705;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}


.video-liste.blue::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #008aff;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.texte-intro a.liendoc:hover {
    background-color: #555555;
}


.texte-intro a.liendoc {
    background-color: #388705;
    color: white;
    font-size: 22px;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 485px;
}

.texte-intro a.liendoc i.bi {
    font-size: 22px;
}

.texte-intro {
    display: inline-block;
    padding-top: 0px;

}

.texte-introdoc {
    padding-top: 18px;
}

.Objectifs h2 {
    margin: 0;
    margin-top: 6px;

}

.texte-titre {
    display: inline-block;
    padding-top: 15px;

}

.texte-intro h2 a {
    font-family: avenirBold;
    font-size: 22px;
}

.texte-intro h2 {
    font-family: avenirBold;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 24px;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    background-color: #26878F;
    color: white;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}


.center-login {
    /*position: absolute;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    padding: 0px;
    margin-top: 10%;
}

ul.presentation-liste .dr {
    color: black;
}

ul.presentation-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.line-arrow {
    position: relative;
    height: 100%;
    width: 100%;
}

.bi.bi-arrow-up-square-fill {
    position: absolute;
    top: 0;
    line-height: 0;
    display: block;
    z-index: 900;
    background-color: white;
    color: #008aff;
}

.bi.bi-arrow-down-square-fill {
    position: absolute;
    bottom: 0;
    display: block;
    line-height: 0;
    z-index: 900;
    background-color: white;
    color: #008aff;
}

body.injection .bi.bi-arrow-down-square-fill,
body.injection .bi.bi-arrow-up-square-fill {
    color: #388705;
}


.reorder {

    /*
    margin : auto auto;
    position: absolute;
    top : 44%;
    bottom: 0;
    display: inline-block;
    font-size: 24px;
*/
    font-size: 24px;

    display: flex;
    width: 100%;
    height: 100%;
    margin: auto;
    border-radius: 10px;
    align-items: center;
    justify-content: left;
}

ol li.olliste {
    font-size: 22px;
    color: #008aff;
    font-family: avenirBold;
}

ul li {
    color: #212529;
    font-size: 18px;
}

ol li.olliste ul li {
    list-style: disc;
    font-family: avenirReg;
}

body .tooltip {
    width: 300px;
    max-width: 300px;
}

body .tooltip .tooltip-inner {
    background-color: #eee !important;
    color: black !important;
    text-align: left;
    width: 300px;
    max-width: 300px;
    -webkit-box-shadow: 4px 3px 13px 4px rgba(0, 0, 0, 0.37);
    box-shadow: 4px 3px 13px 4px rgba(0, 0, 0, 0.37);
}

body .tooltip .tooltip-inner strong {
    font-family: avenirBold;
}

.gren-line {
    height: 80%;
    height: 100%;
    position: absolute;
    background-color: #008aff;
    width: 10px;

    margin: 0px auto;
    display: inline-block;
    z-index: 800;
    min-height: 100px;
}

body.injection .gren-line{
    background-color: #388705;
}

.verti-line {

    height: 100%;
    position: absolute;
    display: block;
    width: 100%;
    width: 50px;
    min-height: 120px;
    left:36%;
}

.intro-liste span {
    line-height: 50px;
}

.pres-liste {
    border : 1px solid #ddd;
}

.pres-liste .dr {
    position: absolute;
    top: 27%;
}

.pres-liste .wrline {
    position: relative;
}

.intro-liste i.bi {
    font-size: 60px;
}

body h2 {
    font-size: 25px;
}

.btn.btn-primary:hover {
    background-color: #555555;
}

.obj-ci-bleu {

    filter: invert(47%) sepia(70%) saturate(5687%) hue-rotate(193deg) brightness(104%) contrast(104%);

}


.obj-ci-vert {



    filter: invert(37%) sepia(60%) saturate(5291%) hue-rotate(71deg) brightness(98%) contrast(96%);

}

.btn.btn-primary {
    background-color: #388705;

    color: white;
    border: 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

body.ola .btn.btn-primary { 
    background-color: #008aff;

    color: white;
    border: 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}



.btn.btn-primary.blue {
    background-color: #008aff;

    color: white;
    border: 0;

}

.myfooter .privacy p {
    margin: 10px 0;
    line-height: 17px;

}

.myfooter .privacy {
    font-size: 12px;
    line-height: 10px;
    padding: 20px 10px;
}

i.superBig {
    font-size: 150px;
    color: #164915;
}

.top-menu {
    margin-top: 10px;
}

.top-menu h3.active a {
    color: #008aff;
}

.top-menu a {
    display: block;
}


.video-liste .wrline i {
    color: #388705;
}

.video-liste.blue .wrline i {
    color: #008aff;
}

.video-liste {
    background-color: #ffffffaa;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    overflow-y: scroll;
    height: 690px;
    border: 1px solid #ddd;

    -webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.37);
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.37);


}



.dr {
    font-size: 20px;
    margin-top: 2px;

    color: #388705;
    font-weight: 900;

    font-family: avenirBold;
}

.blue .dr {
    color: #008aff;
}

.description {
    font-size: 18px;
}

.wrline:hover {
    cursor: pointer;
    background-color: #eeeeee;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.wrline .col-md-10 {
    cursor: move;
}

.wrline {
    /*cursor: pointer;
    cursor: move;*/
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.bi.bi-file-play-fill {
    font-size: 40px;
    color: #008aff;

}

body.ola .bi.bi-file-play-fill {
    font-size: 60px;
    color: #008aff;

}

body.injection .bi.bi-file-play-fill {
    font-size: 60px;
    color: #008aff;
    color: #388705;

}

.question-titre {
    font-family: avenirBold;
    font-size: 23px;
    font-weight: bold;
}

.top-menu h3.active {
    font-size: 20px;
    text-align: center;
    border: 1px solid #008aff;
    border: 1px solid #26878F;
    padding: 5px;
    background-color: #26878F;
    background-color: #fff;

    color: #008aff;
    color: #26878F;

    font-weight: 400;
}

.videoCheckbox {
    width: 40px;
    height: 40px;
    margin-top: 8px;
}

.top-menu h3.active.ola {
    border: 1px solid #008aff;
    background-color: #fff;
}

.top-menu h3.active.ola a {
    color: #008aff;
}

.top-menu h3.active a {
    color: #26878F;
}

.top-menu h3 a {
    color: white;
}

.top-menu h3.ola {
    border: 1px solid #008aff;
}


.top-menu h3 {
    background-color: #164915;
    background-color: #008aff;
    background-color: #26878F;
    color: white;
    font-size: 20px;
    text-align: center;
    padding: 5px;
    border: 1px solid #008aff;
    border: 1px solid #26878F;
    font-weight: 300;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.right-pic img {
    width: 100%;
}

.right-pic {
    /*background-image: url(/images/login-pic-1.jpg);
    background-repeat: no-repeat;*/

    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.box-btn a {
    color: white;
    font-size: 19px;
    padding: 4px 5px 4px 5px;
    display: inline-block;
    width: 430px;
    display: inline-block;
    text-transform: uppercase;

}

.introduction .box-btn a i.bi {
    font-size: 19px;
    margin-right: 5px;
 }


.box-btn.A2:hover,
.box-btn.A1:hover {
    border: 1px solid #555555;
    background-color: #555555 !important;
}


.box-btn {
    text-align: center;
    border: 1px solid #008aff;
    background-color: #008aff;
    color: white;
width: 430px;
display: inline-block;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
}

@media screen and (max-width: 1400px) {
.login-pict {
    width: 111%;
}
}

@media screen and (max-width: 1200px) {
.login-pict {
    width: 141%;
}
}


@media screen and (max-width: 992px) {

    .col-lg-11.texte-intro {
        text-align: center;
    }

    .myfooter {
        width: 100%;
        position: relative;
        bottom: 0;
        left: 0;
        background-color: white;
        color: #000;
        font-weight: 100;
    }

    .center-login {
        position: relative;
        top: 46px;
        left: 0;
        /*transform: translate(0%, 0%);*/
        transform: none !important;

        padding: 0px;
    }

    .container-lg.center-login .row>* {
        width: 83%;
    }

    .row .col-md-8.text-start {
        width: 83%;

    }


}