/* Logo */
.contlogomcnc {
    width: 100vw;
    height: 10vh;
    background-color: white;
    text-align: center;
}

.logomcnc {
    width: auto;
    height: 10vh;
}

.turn {
    width: 100vw;
}

.contlogomcncturn {
    width: 100vw;
    height: 10vh;
    background-color: white;
    text-align: center;
}

.logomcncturn {
    width: auto;
    height: 10vh;
}

.contturn {
    margin-top: 25vh;
    text-align: center;
}

.textrotate {
    font-size: 4vw;
}

.logorotate {
    width: auto;
    height: 20vh;
}
/* Selection des paramètres */
.contdaysselector {
    width: 100vw;
    height: 10vh;
    background-color: orange;
    margin-bottom: 0;
    display: flex;
}

.nav.nav-tabs.listdays {
    width: 100vw;
    margin: 0;
    border: none;
}

.elementlistdays {
    width: 10vw;
    height: 10vh;
    text-align: center;
    margin: 0%;
}

.linklistdays {
    text-decoration: none;
    margin: 0%;
    width: 10vw;
    height: 10vh;
}

.textlistdays {
    color: white;
    margin: 0;
    font-size: 1vw;
}

.contlangselector {
    width: 10%;
    height: 50%;
}

.contcheckbox {
    width: 100%;
    height: 5%;
    background-color: grey;
    margin-top: 0%;
    display: flex;
    align-items: center;
}

.checkbox {
    width: 1.5vw;
    height: 1.5vw;
    margin-left: 1%;
}

.textcheckbox {
    color: white;
    margin-right: 2%;
    margin-bottom: 0;
    font-size: 1vw;
}
/* Conteneur principal */


.content {
    display: flex;
    width: 100%;
    overflow-x: hidden;
    white-space: nowrap;
}
@-moz-document url-prefix() {
    .content {
        scroll-behavior: smooth;
    }
}
@supports (-ms-ime-align:auto) {
    .content {
        scroll-behavior: smooth;
    }
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .content {
        scroll-behavior: smooth;
    }
}

.conteneurprinc {
    height: 100%;
    width: 100%;
    display: flex;
}

.contslider {
    position: absolute;
    display: inline-block;
    top: 30%;
    width: 100%;
    height: 15vh;
}

.btn.sliderleft {
    cursor: pointer;
    position: absolute;
    left: 0;
    height: auto;
    border: solid #000;
    border-width: 1px;
}

.btn.sliderright {
   cursor: pointer;
   position: absolute;
   right: 0;
   height: auto;
   border: solid;
   border-width: 1px;
}

.colchannel {
    width: 25vw;
    height: 100%;
    overflow-y: hidden;
}

.contchannel {
    width: 100%;
    height: 15vh;
    text-align: center;
    border-right: solid;
    border-right-width: 0.5px;
    border-bottom: solid;
    border-bottom-width: 0.5px;
}

.logochannel {
    margin-top: 1vh;
    max-height: 10vh;
    max-width: 25vw;
}

.namechannel {
    font-size: 1.2vw;
    font-weight: bold;
}

.boxnumber {
    position: relative;
    top: -16.5vh;
    width: 5vw;
}

.number {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    border-bottom: solid;
    border-right: solid;
    border-width: 0.5px;
}

.numberlogo {
    max-height: 2.5vw;
    max-width: 2.5vw;
}

.numbertext {
    margin-bottom: 0;
    font-size: 1vw;
}

.contprogramms {
    height: 80vh;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 0;
    border-right: solid;
    border-right-width: 0.5px;
}

.blockprogram {
    margin-top: 2vh;
    margin-left: 4%;
    width: 92%;
    height: 25%;
}

.programcontent {
    width: 100%;
    height: 100%;
}

.programconttitle {
    width: 100%;
    height: 15%;
}

.programtitle {
    font-size: 1vw;
    font-weight: bold;
}

.programconthour {
    width: 100%;
    height: 25%;
}

.programcontlive {
    width: 1vw;
    height: 1vw;
    border-radius: 0.5vw;
    background: red;
}

.programlive {
    float: right;
    font-size: 0.8vw;
    font-style: italic;
    margin-bottom: 0;
}

.programhour {
    font-size: 0.8vw;
    font-weight: bold;
    margin: 0;
}

.programhourar {
    text-align: right;
}

.programcontdescription {
    width: 100%;
    height: 20%;
}

.programdescription {
    font-size: 0.8vw;
    margin: 0;
}

.programcontbutton {
    display: flex;
    width: 100%;
    align-items: center;
}

.programcontreplay {
    width: 1vw;
    height: 1vw;
    border-radius: 0.5vw;
    background: green;
    float: right;
}

.programreplay {
    font-size: 0.8vw;
    font-style: italic;
    margin-bottom: 0;
}

.lign {
    margin: 0;
    margin-left: 2%;
    margin-right: 2%;
}

/* Détails des programmes */
.detail {
    z-index: 1000;
}

.modal-header.detailheader {
    background-color: orange;
    display: block;
}

.haut-header {
    align-items: center;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.logochanneldetail {
    max-height: 10vh;
    max-width: 25vw;
}

.condetailtitle {
    text-align: center;
}

.detailchannelname {
    margin-bottom: 0;
    font-size: 3vw;
    font-weight: bold;
    color: white;
}

.detaillogo {
    max-width: 100%;
}

.detailprogramname {
    text-align: center;
    font-weight: bold;
    font-size: 2vw;
}

.detailhour {
    text-align: center;
}

.detailtitle {
    font-weight: bold;
}

.detailcontcategorie {
    display: flex;
    align-items: center;
}

.detailcategorie {
    width: 0.5vw;
    height: 0.5vw;
    border-radius: 0.25vw;
    background: orange;
}

.detailcategoriename {
    font-size: 1vw;
    font-style: italic;
    margin-bottom: 0;
}


/* (B) CORRECT ORIENTATION - SHOW CONTENT HIDE MESSAGE */
@media only screen and (orientation:landscape) {
    #turn { display:none; }
    #container { display:block; }
}

/* (A) WRONG ORIENTATION - SHOW MESSAGE HIDE CONTENT */
@media only screen and (orientation:portrait) {
    #turn { display:block; }
    #container { display:none; }
}