.Clickable {
    cursor: pointer;
}

@font-face {
    font-family: "Raleway";
    src: url('Font/Raleway/Raleway-VariableFont_wght.ttf') format("truetype");
}

@font-face {
    font-family: "Raleway bold";
    src: url('Font/Raleway/Raleway-VariableFont_wght.ttf') format("truetype");
}

@font-face {
    font-family: "Cochin";
    src: url('Font/Cochin/Cochin.ttf') format("truetype");
}

@font-face {
    font-family: "Cochin Italique";
    src: url('Font/CochinItalic/CochinItalic.otf') format("truetype");
}

html * {
    font-size: 50%;
    font-family: "Raleway";
    font-weight: 600;
}

.FadeAble {
    will-change: opacity;
}

.SelectedQr {
    background: linear-gradient(135deg, rgba(11, 11, 11, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%) !important;
    border: 1px solid grey !important;
}




.CochinFont,
.CochinFont * {
    font-weight: 300 !important;
    font-family: "Cochin" !important;
}


.MPCenterMenus * {
    font-weight: 300 !important;
    font-family: "Cochin" !important;
}

.RalewayFont,
.RalewayFont * {
    font-family: "Raleway" !important;
    font-weight: 800 !important;
}


.CochinItalique,
.CochinItalique * {
    font-weight: 300 !important;
    font-family: "Cochin Italique" !important;
}

.SPCrow {
    margin-top: 4%;
    /*background: red;*/
    width: 100%;
    text-align: left;
}

.SPCelement {
    overflow-wrap: break-word;
    border: transparent 7px solid;
    display: inline-block;
    /*background: yellow;*/
    height: 270px;
    width: 20.8%;
    margin-left: 2%;
    margin-right: 2%;
}

.SPCelementTitle {
    z-index: 3;
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0px;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    font-size: 30px;
    text-align: center;
    font-weight: bold;
}

.SPCelementOverlay {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    height: 100%;
    width: 100%;
    z-index: 2;
}

#SPCDetailViewer {
    text-align: center;
    display: none;
    position: fixed;
    top: 5%;
    left: 5%;
    height: 90%;
    width: 90%;
    background: rgba(145, 145, 145, 0.9);
    z-index: 3;
}

.SPCelementOverlay>div {
    position: absolute;
    top: 10%;
    width: 100%;
    text-align: center;
}

.SPCelementOverlay>div>img {
    width: 100px;
    height: auto;
}

.SelectedSPCelement {
    border: rgb(0, 0, 0) 7px solid !important;
    box-shadow: 0 0 150px rgb(0, 0, 0) !important;
}

.SelectedSPCelement>.SPCelementOverlay {
    display: block !important;
}

.PortailAlbumItem {
    width: 100%;
    height: 200px;
    background: white;
    border-radius: 40px;
    margin-bottom: 50px;
    border: transparent 10px solid;
}

.SelectedPortailAlbumItem {
    border: black 10px solid !important;
}

.sidemenu_title {
    text-transform: capitalize;
}

.selected_delete_data {
    border: solid rgb(0, 57, 87) 5px !important;
    color: white !important;
    background: #282828 !important;
}

.MainPageCategory {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
}


.MainPageCategory>img {
    border-radius: 50%;
    height: 230px;
    width: auto;
    border: transparent solid 5px;
}

.MainPageCategorySelected {
    border: #cfc376 solid 5px !important;
}

.MainPageCategory>div {
    padding-right: 10px;
    padding-left: 10px;
    width: 225px;
    position: absolute;
    text-transform: capitalize;
    color: #cfc376;
    top: 140px;
    font-size: 26px;
}

#DeleteDataConfirmationContainer,
#RightsConfirmationContainer {
    font-size: 40px;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99997;
    background: rgba(46, 36, 45, 0.7);
    left: 0;
    top: 0;
}

#DeleteDataConfirmation,
#RightsDataConfirmation {
    position: absolute;
    width: 50%;
    height: 40%;
    z-index: 99998;
    background: rgb(196, 196, 196);
    left: 25%;
    top: 25%;
    border-radius: 25px;
}

#DeleteDataConfirmation>table {
    height: 100%;
    width: 100%;
    text-align: center;
}

#RightsDataConfirmation>table {
    height: 100%;
    width: 100%;
    text-align: center;
}

/********** METEO **********/

.SelectedWeatherInnerDiv {
    background: rgb(2, 0, 36);
    background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(9, 121, 104, 1) 100%, rgba(0, 212, 255, 1) 100%);
}

.WeatherInnerDiv {
    height: 100%;
    width: 100%;
    border: solid rgb(212, 201, 138) 3px;
    color: rgb(233, 229, 200);
}

#MeteoDetails {
    font-size: 40px;
    display: none;
    color: rgb(212, 201, 138);
    position: absolute;
    z-index: 9999999;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(19, 89, 238, 0.4);
    background: radial-gradient(circle, rgba(2, 0, 36, 0.4) 0%, rgba(9, 121, 104, 0.4) 100%, rgba(0, 212, 255, 0.4) 100%);
}

#MeteoDetails>div {
    border: solid rgb(196, 171, 29) 3px;
    position: absolute;
    width: 50%;
    height: 60%;
    top: 20%;
    left: 25%;
    background: rgba(2, 0, 36, 1);
    background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(9, 121, 104, 1) 100%, rgba(0, 212, 255, 1) 100%);
    border-radius: 25px;
}

#MeteoDetails>div>table {
    width: 100%;
    height: 100%;
}

.WIDdayCells {
    display: none;
    width: 25%;
    padding: 3%;
}

.MeteoArrows {
    text-align: center;
}

.MeteoArrows>img {
    visibility: hidden;
    height: auto;
    width: 70px;
}

/********** END METEO **********/

.SelectedSideMenu {
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.411);
    border: solid #cfc376 5px !important;
}

.SideMenu {
    width: 520px;
    border: solid transparent 5px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 28px;
}

.SideMenuDiv {
    text-align: center;
    display: inline-block;
    width: 80px;
}

.SHselected {
    border: solid 8px #213f5a !important;
}

.SelectedService {
    border: solid 4px orangered !important;
    border-radius: 20px;
}

.SelectedApp {
    /*border: solid 4px #ffffff;
    border-radius: 20px;*/

    border: 8px solid white !important;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 150px red !important;
    border-radius: 20px;
}

.SelectedGame {
    /*border: solid 4px #ffffff;
    border-radius: 20px;*/

    border: 8px solid white !important;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 150px red !important;
    border-radius: 20px;
    /*transition: box-shadow 0.3s ease-in-out;*/
}

.apptxt {
    float: right;
    margin-right: 630px;
    margin-top: -30px;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    font-size: 22px;
}

#ChannelNumberMainPage {
    display: none;
    ;
    position: absolute;
    top: 50px;
    right: 50px;
    font-size: 60px !important;
    padding: 20px;
    font-weight: bold;
    z-index: 50000;
    color: gold;
    background: rgba(14, 14, 14, 0.8);
    border: 2px solid white;
    border-radius: 25px;
}

#volumeglobal {
    display: none;
    position: absolute;
    z-index: 2000;
    margin-left: 500px;
    margin-top: 50px;
}

#volumetext_value {
    color: green;
    font-weight: bolder;
}

#volumecontrolmeter {

    height: 25px;
    width: 200px;
    -webkit-appearance: none;
    /* Reset appearance */
    border: 1px solid #ccc;
    border-radius: 3px;
}

#sceneGuide {
    width: 1280px;
    height: 720px
}

body {
    overflow-y: hidden;
    background-color: #282828;
}

#logo {
    /*background: rgba(255, 255, 255, 0.6);*/
    z-index: 99;
    height: 80px;
    width: 100%;
    margin-top: 4px;
}

#logorad {
    /*background-color: #5ea340;*/
    z-index: 99;
    height: 95px;
    width: 100%;
}

#blogtv {
    background-color: #1E90FF;
    z-index: 99;
    height: 80px;
    width: 100%;
}

#logojeux {
    /*background-color: #A9A9A9; z-index: 99; height: 95px; width: 100%;*/
    /*background-color: #20B2AA;*/
    z-index: 99;
    height: 95px;
    width: 100%;
}

#logoflux {
    background-color: #DCDCDC;
    z-index: 99;
    height: 95px;
    width: 100%;
}

#topjeux {
    /*background-color: #20B2AA;*/
    z-index: 99;
    height: 65px;
    width: 100%;
}

#logoser {
    /*background-color: #0058a2;*/
    z-index: 99;
    height: 95px;
    width: 100%;
}

#logoapps {
    /*background-color: #EE82EE;*/
    z-index: 99;
    height: 95px;
    width: 100%;
}

#logoqst {
    /*background-color: #DCDCDC;*/
    z-index: 99;
    height: 95px;
    width: 100%;
}

#logoalarm {
    /*background-color: #E91E63;*/
    z-index: 99;
    height: 95px;
    width: 100%;
}

#news {
    text-align: center;
    color: #fff;
    padding-top: 7px;
    padding-left: 15%;
    position: absolute;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 50s linear;
    font-size: 40px;
}

@-webkit-keyframes rightThenLeft {
    0% {
        left: 0%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 0%;
    }

    50% {
        right: 0%
    }
}

marquee {
    text-indent: -1000px;
    width: 100%;
}

.topj {
    text-align: center;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 15px;
}

.desc {

    color: #f6cc1e;
    position: absolute;
    margin-top: -70px;
    margin-left: 390px;

}

#fleches {
    /*padding-top: -20px;*/
    padding-bottom: 15px;
    margin-left: 570px;
    /*margin-top: -20px;*/
}

#ipso {
    padding-left: 30px;
    padding-top: 3px;
    /* visibility: visible;*/
}

#serv {
    padding-right: 150px;
    margin-top: 80px;
    position: absolute;
}

#all {
    text-align: center;
}


.col_menu {
    /*margin-right: 25px !important;*/
    margin-bottom: 10px !important;
}

.datenvalue {
    margin-left: 0px;
    text-shadow: 0 0 8px black;
    color: white;
    font-weight: bolder;

}

.daten {
    margin-left: 550px;
    margin-top: -50px;
    /*padding-top: 7px;*/
    font-size: 32px;
    color: black;
    font-weight: bolder;
    text-align: right;
    /*padding-right: 50px;*/
    padding-right: 18px;
}

.activeDeleteData {
    border: solid 6px white !important;
}

.inactiveDeleteData {
    border: solid 6px transparent !important;
}

.donnees {
    color: #5f5c5c;
    margin-left: 35%;
    margin-top: -50px;
    font-size: 24px;
    /* text-align: right; */
    padding-right: 30px;
    padding-left: 30px;
    /*padding-top: 10px;*/
    width: 500px;
    background-color: #cccccc;
}

.perso {
    float: right;
    /*margin-top: -35px;*/
    margin-top: -20px;
    font-size: 32px;
    /*padding-right: 50px;*/
    padding-right: 16px;
    font-weight: bolder;
    color: white;
    text-shadow: 0 0 8px black;
}

.choix {
    margin-top: -97px;
    float: right;
    margin-right: 100px;
    /*width: 30%;*/
    font-size: 26px;
    padding-right: 50px;
    color: #fff;
    text-transform: uppercase;
}

.radiook {
    margin-left: 550px;
    margin-top: -70px;
    font-size: 25px;
    font-weight: bold;
    text-align: right;
    padding-right: 50px;
}

#ipsoradio {
    padding-left: 30px;
    padding-top: 20px;
    visibility: hidden;
}

#ipsoGames {
    padding-left: 30px;
    padding-top: 20px;
    visibility: hidden;
}

#ipsoAlarm {
    padding-left: 30px;
    padding-top: 20px;
    visibility: hidden;
}

#ipsoinfo {
    padding-left: 30px;
    padding-top: 20px;
    visibility: hidden;

}

.weather {
    margin-left: -7px;
    margin-right: -8px;
    font-size: 32px;
    color: white;
    font-weight: bolder;
    text-shadow: 0 0 8px black;
    margin-top: 3px;

}

.timenow {
    margin-left: 20px;
    font-size: 30px;
    color: white;
    font-weight: bolder;

}

#ipsoQuestion {
    padding-left: 30px;
    padding-top: 20px;
    visibility: hidden;
}

#ipsoServices {
    padding-left: 30px;
    padding-top: 20px;
    visibility: hidden;
}

#ipsoSSradio {
    padding-left: 30px;
    padding-top: 20px;
    /*visibility: hidden;*/
}

#ipsoapps {
    padding-left: 30px;
    padding-top: 20px;
    /*visibility: hidden;*/
}

#logoradio {
    padding-left: 30px;
    padding-top: 20px;
    /*visibility: hidden;*/
}

.radioicon {
    float: right;
    margin-right: 950px;
    margin-top: -80px;
}

.alarmicon {
    float: right;
    margin-right: 620px;
    margin-top: -80px;
}


.radiotxt {
    /*float: right;
    margin-right: 940px;
    margin-top: -30px;*/
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    font-size: 28px;
}

.lngtxt {
    float: right;
    margin-right: 520px;
    margin-top: -30px;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    font-size: 22px;
}

.jeuxtxt {
    float: right;
    margin-right: 710px;
    margin-top: -30px;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    font-size: 28px;
}

.alarmtxt {
    /*float: right;
    margin-right: 605px;
    margin-top: -30px;*/
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    font-size: 22px;
}

.fluxtxt {
    float: right;
    margin-right: 40%;
    margin-top: -3.8%;
    text-transform: uppercase;

    color: #000000;
    font-size: 22px;
}

.servicetxt {
    float: right;
    margin-right: 660px;
    margin-top: -30px;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    font-size: 22px;
}

.fullScreenservice {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: 999;
}

.fullScreenserviceHide {
    width: 0%;
    height: 0%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.dd {
    height: 1px;
    position: relative;
    top: -100px;
    color: #fff;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 28px;
    float: left;

}

#images {
    float: left;
    margin-left: auto;
    margin-right: auto;
}

#SplashHeader {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 40px;
    width: 1280px;
    background: grey;
    z-index: 100;
}

#images:hover {
    border: 1px solid red;
}

#videofenster {
    position: absolute;
    z-index: -999 !important;
    width: 640px;
    height: 400px;
}

#txt {
    color: #fff;
}

#listradio {

    margin-top: 140px;
    margin-left: 40px;
}

#rr {
    position: absolute;
    padding-left: 30%;
    margin-top: -70px;
    padding-top: 10%;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
}

#rrr {
    position: relative;
    top: 10px;
    color: #fff;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 34px;
    float: left;
}

.lowertitleCat {
    position: relative;
    top: 10px;
    color: #fff;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 34px;
    float: left;
}

#Alarme {
    margin-top: 8px;
    font-size: 28px;
}

#radcat {
    position: relative;
    top: 30px;
    color: #fff;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 32px;
    float: left;
}

.ss {
    height: 25px;
    position: relative;
    top: 0px;
    color: #fff;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 34px;
    float: left;
}

#imagesrad {
    margin-top: 70px;
}

#footer {
    position: absolute;
    bottom: 0;
    color: #f6cc1e;
    text-transform: uppercase;

}

#imagesserv {
    width: 100%;
}

.col-md-2 {}

.col_service {
    width: 18% !important;
    margin-bottom: 90px !important;
    /*margin-bottom: 20px !important;
    margin-top: 10px !important;
    margin-left: 20px !important;*/

}

.col_service2 {
    margin-bottom: 100px !important;
    height: 250px;

}

.col_apps {

    margin-bottom: 20px !important;
    margin-top: 10px !important;
    margin-left: 20px !important;
}

.col_jeux {

    margin-bottom: 20px !important;
    margin-top: 10px !important;
    margin-left: 20px !important;
}

.col_radio {
    width: 19.2% !important;
    margin-bottom: 30px !important;
}

.col_radio2 {
    /*width: 200px !important;
    height: 240px !important;*/
    width: 360px !important;
    height: 460px !important;
    margin-bottom: 40px !important;
    margin-left: 30px !important;
    margin-top: -100px !important;
    padding-left: 10px;
    padding-right: 10px;
}

.col_livre {
    /*width: 200px !important;
    height: 240px !important;*/
    width: 360px !important;
    height: 460px !important;
    margin-bottom: 40px !important;
    margin-left: 30px !important;
    margin-top: -100px !important;
    padding-left: 10px;
    padding-right: 10px;
}

#testaud {

    color: #fff;
    margin-left: 14.2%;
    font-size: 30px;
    font-weight: bold;
    z-index: 1200;
    padding-top: 8px;


}

.servi {
    padding: 0px;
}

.serviSer {
    padding: 5px;
}

.serviapp {
    padding: 15px
}

.servigames {
    padding: 15px
}

.servis {
    padding: 13px;
    border-radius: 10px;
    margin-bottom: 20px;
}

#vd {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -999;
}

#texto {
    padding-top: 50px;
}

#navi {
    position: absolute;
    bottom: 0px;
    height: 40px;
    width: 100%;
    background-color: #404040;
    background: rgba(64, 64, 64);
    background-repeat: repeat-x;
    text-align: center;
    line-height: -25px;
}

#naviIndex {
    position: absolute;
    bottom: 0px;
    height: 62px;
    width: 100%;

    background: rgba(255, 255, 255);
    background-repeat: repeat-x;
    text-align: center;
    line-height: -25px;
    text-shadow: 2px 2px 0px black;
}

#naviAlarm {
    position: absolute;
    bottom: 0px;
    left: 0%;
    height: 40px;
    width: 100%;
    background-color: #7683c9;
    background-repeat: repeat-x;
    text-align: center;
    line-height: -25px;
}

.active_caracter {
    border: 3px solid #E91E63 !important;
    color: #000000;
}

.active_caracterr {
    background-color: #FFFF00 !important;
}

#navio {
    position: absolute;
    bottom: 0px;
    height: 32px;
    width: 100%;
    background-color: #404040;
    background-repeat: repeat-x;
    text-align: center;
    line-height: -25px;
}

.clavv {
    height: 25px;
    width: 25px;
    padding: 0px;

}


#help_navi2 {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: 28px;


}

#help_navi2_index {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 40px;
}

#style_navi {
    bottom: 4px;
    height: 10px;
    font-size: 24px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bolder;
    /*padding-top: 5px;*/

}

#style_navii1 {
    padding-top: 5px;
}

#style_navii2 {
    margin-left: 60px;
    padding-top: 5px;
}

#style_navii3 {
    margin-left: 18px;
    padding-top: 5px;
}

#help_navi3 {
    position: absolute;

    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: 28px;

}

#navi3 {
    position: absolute;
    bottom: 0px;
    height: 40px;
    width: 100%;
    background-color: #404040;
    background-repeat: repeat-x;
    text-align: center;
    line-height: -25px;
}

#naviLang {
    position: absolute;
    bottom: 0px;
    height: 40px;
    width: 100%;
    background-color: #404040;
    background-repeat: repeat-x;
    text-align: center;
    line-height: -25px;
}

#flux {
    position: absolute;
    bottom: 0px;
    height: 84px;
    width: 100%;
    margin-left: 0px;
    background-color: #404040;
    background-repeat: repeat-x;
    text-align: center;
}

#style_navi3 {
    height: 10px;
    font-size: 22px;
    color: #f6cc1e;
    text-transform: uppercase;
    margin-right: 30px;
    margin-top: -15px;
    padding-left: 10px;
}

.plus_infos {
    height: 10px;
    font-size: 20px;
    color: #20B2AA;
    margin-right: 10px;
    margin-top: -15px;
    padding-left: 5px;
}

#return {
    bottom: 4px;
    height: 10px;
    font-size: 15px;
    color: #f6cc1e;
    text-transform: uppercase;
    margin-right: 30px;
    margin-top: -15px;
    padding-right: -150px;
}

.img1>col_service2>img {
    width: 100%;
}

#meteo {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

#saints {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

.saint {
    text-align: center;
    padding-bottom: 10%;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

#stmet {}

#rtv {
    text-align: center;
    padding-top: 20px;
    color: #fff;
    font-weight: bold;
    font-size: 25px;
}

.col-md-22 {
    background-color: #6A5ACD;
    height: 350px;
    width: 13.1% !important;
    margin-top: 3%;
    margin-left: 1%;
    margin-bottom: -50px;
}

.col-md-23 {
    background-color: #6A5ACD;
    height: 150px;
    width: 13.1% !important;
    margin-top: 5%;
    margin-left: 1%;
    color: #ffffff;
    font-size: 28px;
    text-align: center;
}

.temp {
    color: #000000;
    font-size: 22px;
    padding-top: 50%;
}

.maxmin {
    color: #ffffff;
    font-size: 22px;
    padding-top: 50%;
}

.nomJour {
    color: #ffffff;
    text-align: center;
    font-size: 28px;
    margin-top: 15%;
    padding-bottom: 8%;

}

.dateJour {
    color: #ffffff;
    text-align: center;
    font-size: 24px;
    padding-bottom: 8%;
    font-weight: bold;
}

.col-md-21 {
    background-color: #c2bceb;
    height: 50px;
    width: 13.2% !important;
    margin-left: 1%;
}

#villes {
    text-align: center;
    font-size: 20px;
    color: #000000;
    padding-top: 0.6%;
    margin-top: 13px;
}

img.displayed {
    margin-left: -18px;
}

.trait {
    background-color: #ffffff;
    height: 60px;
    margin-top: -20px;
    width: 2.5px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.deletdata {
    color: white;
    font-size: 22px;
    font-weight: bold;
    margin-left: 20px;
}

#titleflux {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    padding-top: 10px;
    padding-left: 5px;
}

#dateflux {
    padding-left: 5px;
}

#detailsflux {
    font-size: 20px;
    padding-left: 5px;
    padding-top: 12px;
    padding-bottom: 12px;
}

#subtitle {
    position: absolute;
    left: 0px;
    top: 480px;
    width: 960px;
    height: 40px;
    font-size: 25px;
    text-align: center;
    color: #ffffff;
}

.StartUpSceneLangs {
    height: 70px;
    width: 100px;
    border: solid transparent 6px;
    border-radius: 5px;
}

#StartUpSceneWelcome {
    position: fixed;
    z-index: 100;
    width: 100%;
    text-align: center;
    left: 0px;
    bottom: 165px;
    font-size: 38px;
    color: white;
    text-shadow: rgb(0, 0, 0) 4px 0px 0px, rgb(0, 0, 0) 3.87565px 0.989616px 0px, rgb(0, 0, 0) 3.51033px 1.9177px 0px, rgb(0, 0, 0) 2.92676px 2.72656px 0px, rgb(0, 0, 0) 2.16121px 3.36588px 0px, rgb(0, 0, 0) 1.26129px 3.79594px 0px, rgb(0, 0, 0) 0.282949px 3.98998px 0px, rgb(0, 0, 0) -0.712984px 3.93594px 0px, rgb(0, 0, 0) -1.66459px 3.63719px 0px, rgb(0, 0, 0) -2.51269px 3.11229px 0px, rgb(0, 0, 0) -3.20457px 2.39389px 0px, rgb(0, 0, 0) -3.69721px 1.52664px 0px, rgb(0, 0, 0) -3.95997px 0.56448px 0px, rgb(0, 0, 0) -3.97652px -0.432781px 0px, rgb(0, 0, 0) -3.74583px -1.40313px 0px, rgb(0, 0, 0) -3.28224px -2.28625px 0px, rgb(0, 0, 0) -2.61457px -3.02721px 0px, rgb(0, 0, 0) -1.78435px -3.57996px 0px, rgb(0, 0, 0) -0.843183px -3.91012px 0px, rgb(0, 0, 0) 0.150409px -3.99717px 0px, rgb(0, 0, 0) 1.13465px -3.8357px 0px, rgb(0, 0, 0) 2.04834px -3.43574px 0px, rgb(0, 0, 0) 2.83468px -2.82216px 0px, rgb(0, 0, 0) 3.44477px -2.03312px 0px, rgb(0, 0, 0) 3.84068px -1.11766px 0px, rgb(0, 0, 0) 3.9978px -0.132717px 0px;
}

.SUSselectionActive {
    border: solid gold 6px !important;
}

.StartUpSceneSelection {
    display: none;
    width: auto;
    height: 40px;
    margin-top: 20px;
}

.loader {
    position: fixed;
    z-index: 9999;
    background: url('icon-loader.gif') 50% 50% no-repeat;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    cursor: wait;
}

.scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* all scenes are hidden until focused */
    display: none;
}


.dynamic_field_long {}

.firstRow {
    color: white;
    position: absolute;
    margin-top: -106px;
    margin-left: 720px;
    text-transform: uppercase;
    width: 55%;
    font-size: 22px;
    text-shadow: 2px 2px 0px black;
}

.secondRow {
    color: white;
    position: absolute;
    margin-top: -70px;
    margin-left: 720px;
    text-transform: uppercase;
    width: 55%;
    font-size: 22px;
    text-shadow: 2px 2px 0px black;
}

.bottom {
    text-overflow: clip;
}

.dynamic_fieldl {
    display: inline-block;
    width: 250px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    /*              text-align: right; */
    margin-right: 40px;
}

.dynamic_field_smalll {
    display: inline-block;
    width: 75px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    text-align: left;
}

.selected-radio img {
    border: solid 7px gold !important;
    background: gold;
    box-shadow: 0 0 100px orangered !important;
    border-radius: 25%;
}

.selected-livre img {
    border: solid 7px gold !important;
    background: gold;
    box-shadow: 0 0 100px orangered !important;
    border-radius: 25%;
}




.slide {
    width: 100%;
    height: 500px;
}

.hide_slide {
    display: none;
}

.column {
    height: 30%;
    width: 20%;
    display: inline-block;
    margin: 2.5%;
}

.selected_column {
    border: 8px solid white !important;
    background: rgba(0, 0, 0, 0.35);
    /*padding-top: 15px;*/
    box-shadow: 0 0 50px orangered !important;
    border-radius: 5%;
}

.selected_column_livre {
    border: 8px solid white !important;
    background: rgba(0, 0, 0, 0.35);
    /*padding-top: 15px;*/
    box-shadow: 0 0 50px orangered !important;
    border-radius: 5%;
}

.selected_column_livre_backup {
    background: rgba(0, 0, 0, 0.35);
}

.selected_column_livre_bottom {
    border: 8px solid white !important;
    /*padding-top: 15px;*/
    box-shadow: 0 0 50px orangered !important;
}

.imgrad {
    height: 80%;
    width: 100%;
}

.title_radio {
    text-align: center;
    display: inline-block;
    width: 100%;
    align: center;
    color: white;
    margin-top: -50px;
    font-size: 32px;
    font-weight: bolder;
}


#box {
    position: absolute;
    height: 98%;
    width: 100%;
    z-index: 1000;
}



#box_services {
    position: absolute;
    z-index: 500;
    height: 65%;
    width: 100%;
    margin-top: 5%;
    padding: 2%;
    margin-left: 0px;
}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

#loader {
    visibility: hidden;
}

img.centerLoader {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25%;
}

.AlarmSelected {
    color: white !important;
    background-color: black !important;
    border: #000000 10px solid !important;
    box-shadow: 0 0 20px #000000 !important;
}

#AlarmDaysTable td {
    padding: 5px;
}

.hourNow {
    color: #ffffff;
    font-size: 70px;
    font-weight: bold;
    text-align: center;
    padding-top: 6%;
}

.DayNow {
    color: #ffffff;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    padding-top: 0.2%;
    padding-bottom: 0.2%;
}

.fixHour {
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding-top: 1%;
}

.fixDate {
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding-top: 6%;

}

.reglage {
    margin-top: 60px;
    text-align: center;
}

.inputAlarm {
    width: 8%;
}

.champs {
    width: 100%;
    height: 50px;
}

.liste_scroll {
    height: 255px;

    overflow-x: auto;
}

.liste_item {
    background-color: white;
    height: 50px;
    margin-bottom: 1px;
}

.active_item {
    background-color: gray;
}

.caractere {
    width: 32px;
    height: 37px;
    background-color: white;
    color: black;
    text-align: center;
    font-size: 200%;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 2px 2px 1px #888888;

}

.cssbo {
    z-index: 200;
    height: 37px;
    width: 32px;
    padding: 0px;
    margin-right: 2px;
    margin-bottom: 1px;
}

.caractere_espace {
    width: 168px;
    height: 37px;
    background-color: white;
    color: black;
    text-align: center;
    font-size: 200%;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 2px 2px 1px #888888;
}

.active_heure_box {
    background-color: #E91E63 !important;
}

.GetHorloge {
    text-transform: lowercase;
    /*margin-top: -4px;*/
    margin-top: -50px;
    font-size: 16px;
}

.SetActive {
    color: red;
    /*display: none;*/
}

@font-face {
    font-family: "Font MyriadPro";
    src: url('Font/MyriadPro/MyriadPro-Regular.otf');
}

@font-face {
    font-family: "Font Roboto";
    src: url('Font/roboto/Roboto-Regular.ttf');
}



@font-face {
    font-family: "Font FuturaT";
    src: url('Font/MyriadPro/MyriadPro-Light.otf');
}






.slide {
    width: 100%;
    height: 500px;
}

.hide_slider {
    display: none !important;
}

.show_slider {
    visibility: visible;
    display: inline-block;
}

.column {
    height: 30%;
    width: 20%;
    display: inline-block;
    margin: 2.5%;

}

.selected_column {
    border: 5px solid white;
}

.imgrad {
    height: 80%;
    width: 100%;
}


.trademark {
    display: block;
    position: absolute;
    bottom: 0px;

    font-size: 16px;
    color: #ffffff;

    font-weight: light;
    width: 100%;
    text-align: center;
}


.YeliasTitleItem {
    white-space: nowrap;
    font-size: 40px;
    padding-right: 65px;
    padding-left: 10px;
    width: 250px;
    display: table-cell;
    background-image: url(../../images/left-c.png);
    background-size: 100% 100%;
}

.YeliasTitleClosure {
    display: table-cell;
    padding-left: 5000px;
}

.YeliasFiller {
    border-top: 5px #484646 solid;
    border-right: 5px #484646 solid;
    transform: rotate(45deg);
    width: 20px;
    height: 20px;
    display: table-cell;
}


.YeliasContainer {

    position: absolute;
    bottom: 0px;
    height: 250px;
    width: 100%;
    margin-left: 0px;
    background-color: #404040;
    background-repeat: repeat-x;
    background: black;
}

.YeliasTitle {
    overflow: hidden;
    height: 55px;
    background: black;
    color: white;
}

.Yeliasactive {
    background-image: url(../../images/left-s.png) !important;
    color: white;
}


.YeliasContent {
    width: 100%;
    font-size: 40px;
    padding-top: 10px;
    padding-left: 10px;
    height: 347px;
    background: #615f5f;
    color: white;
    overflow: scroll;
}

.standardBg {
    background-color: rgba(41, 41, 41, 0.6);
}

.bottom_img_icons {
    margin-bottom: 9px;
}

.SelectedHR .HRElement {
    border: solid 10px orangered;
    border-radius: 50%;
    box-shadow: 0 0 150px red !important;
}

.SelectedHR {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 30%;
    box-shadow: 0 0 150px rgb(0, 0, 0) !important;
}

.HoroscopeMainText {
    font-size: 28px;
    color: white;
    margin-left: 50px;
    margin-right: 50px;
}

.HRBorder {
    border-right: 3px solid white;
}

.ellipsis {
    text-overflow: ellipsis;

    /* Required for text-overflow to do anything */
    white-space: nowrap;
    overflow: hidden;
}


/* @group Blink */
.blink_me {
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0.3;
    }
}

.blink {
    -webkit-animation: blink 1.5s linear infinite;
    -moz-animation: blink 1.5s linear infinite;
    -ms-animation: blink 1.5s linear infinite;
    -o-animation: blink 1.5s linear infinite;
    animation: blink 1.5s linear infinite;
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    50.01% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    50.01% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    50.01% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    50.01% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    50.01% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.epgactive {
    border-radius: 20px;
    border: solid red 2px !important;
    background: rgba(255, 0, 0, 0.25) !important;
    box-shadow: 0px 0px 40px red !important;
}

.epgactive .epgident {
    background: rgba(255, 140, 0, 1) !important;
    background: -moz-linear-gradient(-45deg, rgba(255, 140, 0, 1) 0%, rgba(255, 191, 94, 1) 36%, rgba(161, 161, 161, 1) 58%, rgba(69, 69, 69, 1) 100%) !important;
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255, 140, 0, 1)), color-stop(36%, rgba(255, 191, 94, 1)), color-stop(58%, rgba(161, 161, 161, 1)), color-stop(100%, rgba(69, 69, 69, 1))) !important;
    background: -webkit-linear-gradient(-45deg, rgba(255, 140, 0, 1) 0%, rgba(255, 191, 94, 1) 36%, rgba(161, 161, 161, 1) 58%, rgba(69, 69, 69, 1) 100%) !important;
    background: -o-linear-gradient(-45deg, rgba(255, 140, 0, 1) 0%, rgba(255, 191, 94, 1) 36%, rgba(161, 161, 161, 1) 58%, rgba(69, 69, 69, 1) 100%) !important;
    background: -ms-linear-gradient(-45deg, rgba(255, 140, 0, 1) 0%, rgba(255, 191, 94, 1) 36%, rgba(161, 161, 161, 1) 58%, rgba(69, 69, 69, 1) 100%) !important;
    background: linear-gradient(135deg, rgba(255, 140, 0, 1) 0%, rgba(255, 191, 94, 1) 36%, rgba(161, 161, 161, 1) 58%, rgba(69, 69, 69, 1) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8c00', endColorstr='#454545', GradientType=1);
}

.epgprogramheader {
    font-size: 26px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    height: 50px;
}

.epgprogramcontent {
    padding-left: 10px;
    padding-right: 10px;
    height: 60px;
}

.epgprogramfooterbg {
    font-size: 26px;
    font-weight: bold;
    color: black;
    background: rgb(238, 174, 202);
    background: radial-gradient(circle, rgba(238, 174, 202, 0.75) 0%, rgba(148, 187, 233, 0.75) 100%);
    height: 50px;
}

.epgprogramfooter {
    text-shadow: -1px 0 rgb(246, 255, 126), 0 1px rgb(246, 255, 126), 1px 0 rgb(246, 255, 126), 0 -1px rgb(246, 255, 126);
    padding-left: 10px;
    padding-right: 10px;
}

.epgemptyprogram {
    border-radius: 10px;
    background: repeating-linear-gradient(45deg,
            #606dbc,
            #606dbc 10px,
            #465298 10px,
            #465298 20px);
    overflow: hidden;
    display: inline-block;
    height: 160px;
}

.epgprograms {
    overflow: hidden;
    white-space: nowrap;
}

.epgprogram {
    border-radius: 10px;
    overflow: hidden;
    display: inline-block;
    height: 160px;
    border: solid white 1px;
    color: white;
    font-size: 30px;
}

#CurrentHourruler {
    color: red;
    width: 100%;
    position: absolute;
    bottom: 0px;
    height: 1025px;
}

#epg-ruler {
    width: 100%;
    position: absolute;
    bottom: 0px;
    height: 1000px;
    /*border: solid white 3px;*/
}

.channelname {
    color: white;
    font-size: 28px;
    width: 100%;
}

#epg-data {
    margin-top: 55px;
}

.epgchannel {
    overflow: hidden;
    margin-bottom: 15px;
    height: 164px;
    background-color: rgba(45, 0, 207, 0.144);
    width: 100%;
    border: solid transparent 2px;
    /*border-top: silver solid 2px;
    border-bottom: silver solid 2px;*/
    box-shadow: 0px 0px 20px rgb(0, 0, 0);
}

.epgchannel .epgident {
    border-radius: 8%;
    border: solid silver 1px;
    text-align: center;
    width: 180px;
    height: 160px;
    /*background-color: rgba(255, 255, 255, 0.356);*/
    background: rgb(102, 102, 102);
    background: linear-gradient(90deg, rgba(102, 102, 102, 0.6979166666666667) 0%, rgba(170, 170, 170, 0.7) 50%, rgba(102, 102, 102, 0.7) 100%);
    background-position: 0 0;
    background-repeat: no-repeat;
    float: left;
}

#epg-container {
    overflow: hidden;
}

.EpgDetailsTextElements:nth-child(even) {
    background: rgba(255, 255, 255, 0.1)
}

.EpgDetailsTextElements:nth-child(odd) {
    background: rgba(56, 56, 56, 0.1)
}

.gradientbg {
    background: rgb(102, 102, 102);
    background: linear-gradient(90deg, rgba(102, 102, 102, 0.6979166666666667) 0%, rgba(170, 170, 170, 0.7) 50%, rgba(102, 102, 102, 0.7) 100%);
}

.epdidentrank {
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
    font-size: 26px;
    position: absolute;
    left: 10px;
    color: darkred;
}

/* @end */

/* canal plus */
@font-face {
    font-family: "Canal Bold Romain";
    src: url('Font/CanalPlus/CanalBoldRomain.otf');
}

@font-face {
    font-family: "Canal Demi Romain";
    src: url('Font/CanalPlus/CanalDemiRomainG7.otf');
}

@font-face {
    font-family: "Canal Light Romain";
    src: url('Font/CanalPlus/CanalLightRomain.otf');
}

.CPMSelected {
    border: 8px solid white !important;
}

.CPMtd {
    border: 8px solid transparent;
}

.CPMUSelected {
    border: 5px solid white !important;
}

.CPMUtd {
    border: 5px solid transparent;
}

.CPCSelected {
    border: 8px solid white !important;
}

.CPCtd {
    border: 8px solid transparent;
    padding: 5px;
}

.CPCUSelected {
    border: 5px solid white !important;
}

.CPISelected {
    border: 5px solid white !important;
}

.CPCUtd {
    border: 5px solid transparent;
}

.CPImEselected {
    border: 5px solid white !important;
}

@-webkit-keyframes CPM_upper_slide {
    0% {
        height: 80px;
        opacity: 0.5;
    }

    100% {
        height: 120px;
        opacity: 1;
    }
}

#CPMUpperbar {
    -webkit-animation-name: CPM_upper_slide;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}

#CPCUpperbar {
    -webkit-animation-name: CPM_upper_slide;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}

/* canal plus end */

/* Main page */
.box2 {
    font-size: 60px;
    left: 5%;
    top: 80px;
    position: fixed;
    height: 800px;
    width: 20%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0);
}

.hid-box2 {
    padding: 30px;
    border-radius: 0px 30px 30px 00px;
    right: 100%;
    position: relative;
    transition: all .5s ease-out;
    background: rgba(255, 255, 255, 0.8);
    height: 100%;
    will-change: transform;
}


.MPCCellText {
    text-transform: capitalize;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 24px;
}

.MPCRadiosImage,
.MPCAppsImage {
    width: 150px;
    height: auto;
}

.MPCRadiosCell {
    width: 20%;
    text-align: center;
}


.Blackbg {
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 50000 !important;
}

.MainPageCategoryDiv {
    padding-bottom: 20px;
    /*padding: 5px;*/
    border: solid 1px transparent;
    border-radius: 20px;
    text-align: center;
}

.MPSUSSelected {
    border: 2px solid #B79F79 !important;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(164, 164, 164, 0.5) 100%);
}

.MPLDDLanguage {
    padding: 5px;
    margin: 5px;
    border: 2px solid transparent;
}

.MPLDDLanguageSelected {
    border: 2px solid #B79F79;
    background: rgba(101, 101, 101, 0.438);
}

.MustDoAndMustSeePages {
    height: 100%;
}

.MainPageCategoryDivSelected {
    /*border-radius: 20px;
    border: solid 3px silver !important;*/
    background: radial-gradient(circle at 0% 0%, rgba(11, 11, 11, 0.30), rgba(255, 255, 255, 0.30));
    border-radius: 20px;
    border: solid 1px white;
}

.MainPageCategoryDivSelected>.imgContainer {
    /*margin-right: 30px !important;
    margin-left: 30px !important;*/
}

.MainPageCategoryDiv>.imgContainer {
    margin-right: 1vw;
    margin-left: 1vw;
    margin-bottom: 1vh;
    margin-top: 1vh;
    /*margin: 20px;*/
    padding: 1vw;
    border-radius: 15px;
    border: solid white 3px;
}

.MainPageCategoryDivSelected>div>img {
    /*height: 100px !important;*/
}

.MainPageCategoryDivSelected>.catTitle {
    /*font-size: 32px !important;*/
}

.MainPageCategoryDiv>div>img {
    width: auto;
    height: 5vw;
}

.MainPageCategoryDiv>.catTitle {
    /*padding-top: 20px;*/
    color: white;
    font-size: 1.4vw;
}



.ChannelPlayerInvisible {
    visibility: hidden;
}


#MainPageCCTitle {
    width: 100%;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 34px;
}

.MainPageAppSelected {
    background: rgba(3, 0, 88, 0.6) !important;
    color: white !important;
    border-radius: 20px;
}

.MainPageGameSelected {
    background: rgba(76, 0, 41, 0.6) !important;
    color: white !important;
    border-radius: 20px;
}

.MainPageRadioSelected {
    background: rgba(2, 121, 32, 0.6) !important;
    color: white !important;
    border-radius: 20px;
}

.MPCSelectedRadio {
    background: rgba(0, 255, 0, 0.25);
    border: solid green 5px !important;
}

.MPCSelectedService {
    background: rgba(48, 41, 250, 0.6) !important;
    color: white !important;
    border-radius: 20px;
}

.MPCSelectableRadios {
    border: solid transparent 5px;
    border-radius: 10px;
    padding-left: 15px;
    padding-right: 15px;
    vertical-align: middle;
    height: 220px;
    width: 50%;
}

.MPChannel {
    margin: 1vw;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vw;
    background-color: rgba(0, 0, 0, 0.6);
    /* Background color for each channel box */
    border-radius: 20px;
    border: silver 2px solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    height: 12vh;
}

.MPApp {
    margin: 1vw;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vw;
    background-color: #000000;
    /* Background color for each channel box */
    border-radius: 20px;
    border: silver 2px solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    height: 12vh;
}

.MPFillerChannel {
    visibility: hidden;
    margin: 1vw;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vw;
    background-color: #000000;
    /* Background color for each channel box */
    border-radius: 20px;
    border: silver 2px solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    height: 12vh;
}

.MPChannel img {
    max-width: 70%;
    max-height: 70%;
    /* Adjust logo size */
    object-fit: contain;
}

.MPApp img {
    max-width: 70%;
    max-height: 70%;
    /* Adjust logo size */
    object-fit: contain;
}

.MainPageSelectedChannel {
    border: solid transparent 2px !important;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.MainPageSelectedChannel img {
    max-width: 90% !important;
    max-height: 90% !important;
}

.MainPageSelectedApp {
    border: solid transparent 2px !important;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.MainPageSelectedApp img {
    max-width: 90% !important;
    max-height: 90% !important;
}

.MPChannelListRow {
    display: flex;
    justify-content: space-between;
}

.MPChannelListContainer {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.MPAppListRow {
    display: flex;
    justify-content: space-between;
}

.MamouniaScrollBar::-webkit-scrollbar {
    width: 10px;
    /* Width of the scrollbar */
}

.MamouniaScrollBar::-webkit-scrollbar-track {
    background: #ffffff;
    /* Background of the scrollbar track */
    border-radius: 10px;
}

.MamouniaScrollBar::-webkit-scrollbar-thumb {
    background-color: rgb(255, 187, 0);
    /* Color of the scrollbar handle (thumb) */
    border-radius: 10px;
    border: 2px solid #555;
    /* Padding around the thumb */
}

.MamouniaScrollBar2::-webkit-scrollbar {
    width: 15px;
    /* Width of the scrollbar */
}

.MamouniaScrollBar2::-webkit-scrollbar-track {
    background: #b9b9b9;
    /* Background of the scrollbar track */
    border-radius: 20px;
}

.MamouniaScrollBar2::-webkit-scrollbar-thumb {
    background-color: rgb(90, 90, 90);
    /* Color of the scrollbar handle (thumb) */
    border-radius: 20px;
    /* Padding around the thumb */
}



#ErrorMessage {
    border-radius: 20px;
    left: 50%;
    transform: translate(-50%);
    padding: 15px;
    background-color: #1f1c23;
    text-align: center;
    vertical-align: middle;
    z-index: 100000;
    position: absolute;
    /* left: 50%; */
    bottom: 220px;
    color: white;
    font-size: 40px;
}

#MPServicesList td {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.MPServicesSelected {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(11, 11, 11, 0.3) 100%), url('../../images/mamounia_icons/enter.png') !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 0 0, 20px center !important;
    background-size: cover, 3vw 3vw !important;
    border: solid 2px rgb(202, 202, 202) !important;
    font-size: 2.5vw !important;
    /*font-weight: bold !important;*/
}

.MPServices {
    /*padding-bottom: 15px;*/
    color: white;
    font-size: 2vw;
    display: flex;
    justify-content: center;
    /* Horizontal centering */
    align-items: center;
    border-radius: 20px;
    border: solid 2px grey;
    background: linear-gradient(135deg, rgba(42, 42, 42, 0.1) 0%, rgba(255, 255, 255, 0.211) 100%), url('../../images/mamounia_icons/3.png');
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 20px center;
    background-size: cover, 3vw 3vw;
    height: 9vh;
    width: 100%;
}

.BarsEtSalonDeTheSelected {
    font-size: 2vw !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(11, 11, 11, 0.3) 100%), url('../../images/mamounia_icons/enter.png') !important;
    /*background: linear-gradient(135deg, rgba(63, 63, 63, 0.1) 0%, rgba(193, 193, 193, 0.5) 100%), url('../../images/mamounia_icons/enter.png') !important;*/
    background-repeat: no-repeat, no-repeat !important;
    background-position: 0 0, 20px center !important;
    background-size: cover, 3vw 3vw !important;
    border: solid 2px rgba(193, 193, 193, 0.5) !important;
}

.SpaEtLoisirsSelected,
.RestaurantsSelected,
.InformationsUtilesSelected,
.BoutiquesSelected,
.ExclusifsSelected {
    /*font-weight: bold !important;*/
    font-size: 2.5vw !important;
    background: linear-gradient(135deg, rgba(11, 11, 11, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%), url('../../images/mamounia_icons/enter.png') !important;
    /*background: linear-gradient(135deg, rgba(63, 63, 63, 0.1) 0%, rgba(193, 193, 193, 0.5) 100%), url('../../images/mamounia_icons/enter.png') !important;*/
    background-repeat: no-repeat, no-repeat !important;
    background-position: 0 0, 20px center !important;
    background-size: cover, 3vw 3vw !important;
    border: solid 2px rgba(193, 193, 193, 0.5) !important;
}

.RestaurantsSelected>img {
    height: 7vh !important;
    width: auto !important;
}


.InformationsUtiles,
.SpaEtLoisirs,
.Restaurants,
.BarsEtSalonDeThe,
.Exclusifs,
.Boutiques {
    border: solid 2px transparent;
    border-radius: 20px;
    color: white;
    font-size: 2vw;
    display: flex;
    justify-content: center;
    /* Horizontal centering */
    align-items: center;
    height: 9vh;
    width: 100%;
}

#PolitiqueDeConfidentialiteTextContainer * {
    font-size: 100%;
}

#ServiceScene * {
    font-size: 100%;
}

.InformationsUtiles {
    font-size: 1.8vw !important;
}

.InformationsUtilesSelected {
    font-size: 2vw !important;
}

.AutresBoutiquesaLaMamounia {
    height: auto;
    width: 100%;
    font-size: 7vw;
}

.BarsEtSalonDeThe {
    margin: auto;
    width: 90%;
    margin-bottom: 10px;
    height: 12vh;
    font-size: 1.8vw;
    background: linear-gradient(135deg, rgba(11, 11, 11, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%), url('../../images/mamounia_icons/3.png');
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 20px center;
    background-size: cover, 3vw 3vw;
}



.InformationsUtiles,
.Restaurants,
.Exclusifs,
.Boutiques {
    flex-direction: column;
    text-align: center;
    height: 10vh;
}

.InformationsUtiles {
    font-size: 40px;
}

#ServiceMainText {
    font-style: italic;
}

#ServiceMainText div:nth-child(n+2) {
    margin-top: 8px;
}

.GoldenParagraph {
    color: #B79F79;
}

.HeaderPara {
    margin-top: 10px;
    color: #B79F79;
}

/* General styling for the list */
ul.custom-mamounia-list {
    list-style: none;
    /* Remove default bullets */
    padding: 0;
}

/* Styling for each list item */
ul.custom-mamounia-list li {
    position: relative;
    padding-left: 45px;
    color: white;
}


/* Creating the gold diamond */
ul.custom-mamounia-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5vh;
    /* Adjust to center vertically */
    width: 20px;
    /* Adjust size */
    height: 20px;
    /* Adjust size */
    background-color: #B79F79;
    transform: rotate(45deg);
    /* Turn square into diamond */
}

ul.custom-mamounia-list2 {
    list-style: none;
    /* Remove default bullets */
    padding: 0;
}

/* Styling for each list item */
ul.custom-mamounia-list2 li {
    position: relative;
    padding-left: 45px;
    color: white;
}


/* Creating the gold diamond */
ul.custom-mamounia-list2 li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1vh;
    /* Adjust to center vertically */
    width: 20px;
    /* Adjust size */
    height: 20px;
    /* Adjust size */
    background-color: #B79F79;
    transform: rotate(45deg);
    /* Turn square into diamond */
}

.mustsDiv {
    border-radius: 20px;
    border: solid #B79F79 3px;
    width: 100%;
    height: 20vh;
    margin-top: 10vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.MPChannelCountry {
    border: solid transparent 2px;
    border-radius: 15px;
}

.SelectedMPChannelCountry {
    background-color: rgb(76, 76, 76) !important;
    border: solid #B79F79 2px !important;
}

.MPChannelCountrySelectorSelected {
    background-color: rgba(76, 76, 76, 0.538) !important;
    border: solid #B79F79 2px !important;
}