html, body {
    height: 100%;
    margin: 0;
}
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

.btn,
.form-control,
header .lineTitle img,
.card-header img,
.thumbnail img,
.card{
    border-radius: .75rem;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0,0,0,0);
}

.overflow-auto{
    overflow: auto;
}
.overflow-hidden{
    overflow: hidden;
}
.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}
img.shadow-lg{

  box-shadow: none !important;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.5) ) !important;
}

.bg-secondary {
  background-color: #25292e !important;
}
.alert{
    border-radius: 1rem !important;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}
/*
@keyframes yourAnimation {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

video{
    animation: yourAnimation 2s ease 0s normal none;
} */

/*body.bg-dark{
  background: rgb(37,41,46);
background: -moz-linear-gradient(180deg, rgba(37,41,46,1) 0%, rgba(52,58,64,1) 30%);
background: -webkit-linear-gradient(180deg, rgba(37,41,46,1) 0%, rgba(52,58,64,1) 30%);
background: linear-gradient(180deg, rgba(37,41,46,1) 0%, rgba(52,58,64,1) 30%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#25292e",endColorstr="#343a40",GradientType=1); 

background: url(../images/bkgtransparent.png) no-repeat 50% 50% #040c0f;
background-size: cover;
}
*/

body:before{
    content: "";
    width: 100%;
    height: 180px;
    pointer-events: none;
    position: absolute;
    background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
}
body:after{
    content: "";
    width: 100vw;
    height: 100vh;
    position: absolute;
    pointer-events: none;
    background: url("../images/bkg.jpg") no-repeat 50% 50% transparent;   
    z-index: -1;
    mix-blend-mode: screen;
    background-size: cover; 
    filter: blur(8px);
  -webkit-filter: blur(8px);
}

header .lineTitle img,
.card img{
    max-height: 40px;
    width: auto;
}
header button.btnOpt.collapsed >  span{
    display: inline-block;
}
header button.btnOpt.collapsed >  span.opened{
    display: none;
}
header button.btnOpt:not(.collapsed) >  span{
    display: none;
}
header button.btnOpt:not(.collapsed) > span.opened{
    display: inline-block;
}

header .btn{
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
header .btn i[class*=" picto-"]::before,
header .btn i[class=" picto-"]::before{
    line-height: 40px;
}



main{
    z-index: 0;
}

#searchInLines{
    width: 255px;
    max-width: 100%;
}


/*footer{
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    transform: rotate(-90deg) translate(100%, 0);
    transform-origin: right bottom;
    color: white;
    font-weight: lighter;
}*/

footer{
    position: absolute;
    bottom: .8rem;
    right: 1.5rem;
    left: 1.5rem;
    text-align: left;
    color: white;
    font-weight: lighter;
    font-size: .5rem;
    color: rgba(255,255,255,0.55);
}
footer a{
    color: rgba(255,255,255,0.65);
    text-decoration: underline;
}




.video-js{
    background: #25292e !important;
}

.btn-dark{
    background: transparent;
}
.btn-light{
    background: transparent;
}

.video-js .vjs-tech, .video-js.vjs-fill:not(.vjs-audio-only-mode) {
  height: 100%;
  width: 100%;
}


.toastArea{
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 6;
    flex-grow: 1;
    bottom: 5rem;
    overflow: auto;
    width: 300px;
    max-width: 50%;
    pointer-events: none;}

.toastArea .toast {
      flex-basis: auto;
      transition: all .3s;
    pointer-events: all;
        }
.toastArea .toast:last-child {
      margin-bottom: 0.75rem;
    }



.infoArea{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    flex-grow: 1;
    overflow: auto;
    width: auto;
    padding-top: .5rem 1.5rem;
    right: 1rem;
    bottom: 5rem;
    pointer-events: none;
    transition: all 3s;
}
.infoArea.show{
    opacity: 1;
    transition: all 1s;
}

#directionArea{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    flex-grow: 1;
    overflow: auto;
    width: auto;
    padding-top: .5rem 1.5rem;
    right: 1rem;
    bottom: 5rem;
    pointer-events: none;
    transition: all 3s;
}

#directionArea.show{
    opacity: 1;
    transition: all 1s;
}





@media screen and (min-width: 992px){
    .col-16-9{
      max-height: 37.4vw;
    }
    .video-js.vjs-16-9:not(.vjs-audio-only-mode) {
      padding-top: 0 !important;
    }
    .toastArea{
        right: 1.5rem;
        border-top-right-radius: 1rem;
    }
    .infoArea{
        left: 1rem;
        border-top-left-radius: 1rem;
    }
    video,
    .vjs-poster,
    .video-js{
        border-radius: 1rem !important;
    }
    .vjs-control-bar{
        border-bottom-left-radius: 1rem !important;
        border-bottom-right-radius: 1rem !important;
    }
    #my-video{
        box-shadow: 0 0.5rem 3rem 1rem rgba(0, 0, 0, 0.5) !important
    }
}

@media screen and (min-width: 1200px){
    .col-16-9{
      max-height: 46.75vw;
    }
}


@media only screen 
    and (device-width : 812px) 
    and (device-height : 375px) 
    and (-webkit-device-pixel-ratio : 3) { 
        .video-js.vjs-16-9:not(.vjs-audio-only-mode) {
          padding-top: 56.25%;
        }
        .col-iphoneX-8 {
          -ms-flex: 0 0 66.666667% !important;
          flex: 0 0 66.666667% !important;
            flex-grow: 0 !important;
          max-width: 66.666667% !important;
        }
        .col-iphoneX-4 {
          -ms-flex: 0 0 33.333333% !important;
          flex: 0 0 33.333333% !important;
            flex-shrink: 0 !important;
          max-width: 33.333333% !important;
        }
        main .flex-column {
          -ms-flex-direction: row !important;
          flex-direction: row !important;
        }
}


body.bg-dark .infoArea{
    color: white;
    text-shadow: 0 0 1rem black;
    background: rgb(0,0,0);
    background: -moz-linear-gradient(164deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 37%);
    background: -webkit-linear-gradient(164deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 37%);
    background: linear-gradient(164deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 37%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);


}

body.bg-light .infoArea{
    color: black;
    text-shadow: 0 0 1rem white;
    background: rgb(248,249,250);
    background: -moz-linear-gradient(164deg, rgba(248,249,250,1) 0%, rgba(248,249,250,0) 37%);
    background: -webkit-linear-gradient(164deg, rgba(248,249,250,1) 0%, rgba(248,249,250,0) 37%);
    background: linear-gradient(164deg, rgba(248,249,250,1) 0%, rgba(248,249,250,0) 37%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f8f9fa",endColorstr="#f8f9fa",GradientType=1);

}


.thermo_3 .thermoItem::after {
  background: red;
}

.thermo_3 .thermoItem.is_nodeOut button:after,
.thermo_3 .thermoItem.back_nodeOut button:after,
.thermo_3 .thermoItem.is_nodeOut ~ li.thermoItem button:after,
.thermo_3 .thermoItem.is_nodeOut ~ li.thermoItem:last-child button:after,

.thermo_3 .thermoItem.is_nodeIn button:after,
.thermo_3 .thermoItem.back_nodeIn button:after,
.thermo_3 .thermoItem.back_nodeIn ~ li.thermoItem button:after,
.thermo_3 .thermoItem.back_nodeIn ~ li.thermoItem:last-child button:after{
    border-color: red;
}

.thermoList {
  list-style-type: none;
  padding-left: 0;
}

.thermoItem {
    position: relative;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

    .thermoItem .btn {
        width: 100%;
        padding-left: 2rem;
        border-radius: 1rem;
        min-height: 60px;

        font-size: 0.9rem;

        -webkit-box-shadow: inset 0 0 0 0.1rem transparent;
        box-shadow: inset 0 0 0 0.1rem transparent;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;

        height: auto;
    }

    .thermoItem .btn:hover {
        //background: #25292E !important
    }

    .thermoItem .btn:focus {
        //background: #25292E !important;
        -webkit-box-shadow: inset 0 0 0 0.1rem rgba(216, 217, 219, 0.5);
        box-shadow: inset 0 0 0 0.1rem rgba(216, 217, 219, 0.5);
   }

    .thermoItem .btn.is-accessible .picto-zzzzz_noaccess {
        display: none;
    


}
/* --------------------- Gellule arrêt --------------------- */


.thermoItem.is_terminus:before,
.thermoItem:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid white;
    background: #343a40;
    position: absolute;
    left: calc(25px / 2);
    border-radius: 50rem;
    z-index: 2;
    top: 50%;
    margin-top: -5px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.thermoItem.is_terminus:before,
.thermoItem:hover:before {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}

.thermoItem.is_terminus button{
    font-weight: 700;
}



/* --------------------- Représentation ligne --------------------- */

.thermoItem:after {
    content: "";
    display: block;
    width: 3px;
    background: #adb5bd;
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    z-index: 1;
}


.thermoItem:first-child:after {
    top: 50%;
}

.thermoItem:last-child:after {
    bottom: 50%;
}

/*Gestion double ligne*/

.thermoItem.is_nodeOut button:after,
li.thermoItem.back_nodeOut button:after,
.thermoItem.is_nodeIn button:after,
li.thermoItem.back_nodeIn button:after,
li.thermoItem.betweenTerminus button:after{
    content: "";
    display: block;
    width: 18px;
    border: 3px solid #adb5bd;
    border-right: transparent;
    }

.thermoItem.is_nodeOut button:after,
li.thermoItem.back_nodeOut button:after,
li.thermoItem.betweenTerminus button:after{
    border-bottom: transparent;
}

.thermoItem.is_nodeIn button:after,
li.thermoItem.back_nodeIn button:after{

    border-top: transparent;
}
.thermoItem.is_nodeOut button:after,
li.thermoItem.back_nodeOut button:after,
.thermoItem.is_nodeIn button:after,
li.thermoItem.back_nodeIn button:after,
li.thermoItem.betweenTerminus button:after{
    position: absolute;
}

.thermoItem.is_nodeOut button:after,
li.thermoItem.back_nodeOut button:after,
.thermoItem.is_nodeIn button:after,
li.thermoItem.back_nodeIn button:after,
li.thermoItem.betweenTerminus button:after{
    transform: translateX(1px);

}
.thermoItem.is_nodeOut button:after,
li.thermoItem.back_nodeOut button:after,
.thermoItem.is_nodeIn button:after,
li.thermoItem.back_nodeIn button:after,
li.thermoItem.betweenTerminus button:after{
    z-index: 1;
}

.thermoItem.is_nodeOut button:after{
    left: 0rem;
    top: 50%;
    bottom: -50%;
    border-radius: 12px 0 0 0;
}
.thermoItem.is_nodeIn button:after{
    left: 0rem;
    top: -50%;
    bottom: 50%;
    border-radius: 0 0 0 12px;
}
li.thermoItem.is_terminus.terminusCenter button:after{
    
    border-top: transparent;
    left: 1rem;
    top: 100%;
    bottom: -45%;
    border-radius: 0;
/*    transform: translateY(-3px);*/
}
li.thermoItem.betweenTerminus button:after,
li.thermoItem.is_terminus.terminusCenter.betweenTerminus button:after{
    left: 0rem;
    top: 50%;
    bottom: -50%;
    border-top: transparent;
    border-radius: 0;
}

li.thermoItem.back_nodeOut button:after{
    border-bottom: 3px solid #adb5bd;
    border-top: transparent;
    left: 0;
    top: -50%;
    bottom: 100%;
    border-radius: 0 0 0 12px;
}
li.thermoItem.back_nodeIn button:after{
    border-top: 3px solid #adb5bd;
    border-bottom: transparent;
    left: 0;
    top: 100%;
    bottom: -50%;
    border-radius: 12px 0 0 0;
}



li.thermoItem.is_terminus.terminusCenter.terminusCenterAfterNode:after{
    top: 0;
    bottom: 50%;
}
li.thermoItem.is_terminus.terminusCenter.terminusCenterBeforeNode:after{
    top: 50%;
    bottom: 0;
}

/*
.positionbus {
  display: block;
  z-index: -1;
  position: absolute;
  top: -11px;
  left: 5px;
  right: 5px;
  height: 1px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 9px 3px rgba(255,255,255,0.2);
}*/

.positionbus {
    width: 27px;
    height: 27px;
    background: transparent url(../images/positionbus2.png) no-repeat scroll 50% 50%;
    background-size: contain;
    display: block;
    position: absolute;
    z-index: 99999999;
    top: -11px;
    left: 4px;
}


#my-video{
  position: relative;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#my-video video{
  transform: scale(1);
  transform-origin: right;
  transition: all .3s;
}

#my-video.scaled video{
  transform: scale(1.5);
  transform-origin: right;
  transition: all .3s;
}
@media screen and (max-width:575px){
    header img.mr-2{
        height: 20px;
    }
    header .col-auto.px-0.d-flex.align-items-center.justify-content-end {
        position: absolute;
        right: 15px;
        bottom: -27px;
        z-index: 9;
    }
    header .col-auto.px-0.d-flex.align-items-center.justify-content-end .btn{
        background: black;
    }
}