:root {
  --bottom-bar-height: 70px;
  --bottom-left-width: 422px;
  --bottom-right-width: 422px;
  --bottom-left-one-fourth: 160px;
  --bottom-left-three-fourth: 262px;
  
  --launcher-menu-height: 80px;
  --light-blue: #32dafe;
}

body{
    overflow: hidden;
}

.body-background{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-size: cover;
    display: none;
}

.body-background.active{
    display: inline;
}

*{
    font-family: 'Arial';
}

.hidden{
    display: none;
}


/******************************************************
*******************************************************

Bottm-left section of the Launcher

*******************************************************
******************************************************/


.bottom-bar{
    background: url('../img/transparent_op80.png');
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: var(--bottom-bar-height);
    width: 100%;
}

.bottom-bar .bottom-left-section{
    color: white;
    width: var(--bottom-left-width);
    height: var(--bottom-bar-height);
    position: fixed;
    left: 0px;
    font-size: 32px;
    z-index: 10;
}

.bottom-bar .bottom-left-section img.background{
    width: var(--bottom-left-width);
    height: var(--bottom-bar-height);
}

.bottom-bar .bottom-left-section .weather{
    width: var(--bottom-left-width);
    height: var(--bottom-bar-height);
    position: absolute;
    bottom: 0px;
}

.bottom-bar .bottom-left-section .weather .weather-icon{
    position: absolute;
    width: var(--bottom-left-one-fourth);
    text-align: center;
}

.bottom-bar .bottom-left-section .weather .weather-icon img{
    height: 40px;
    margin-top: 7px;
}

.bottom-bar .bottom-left-section .weather .weather-flipping-section{
    width: var(--bottom-left-three-fourth);
    height: var(--bottom-bar-height);
}

.bottom-bar .bottom-left-section .weather .weather-temperature{
    position: relative;
    left: var(--bottom-left-one-fourth);
    text-align: center;
    width: var(--bottom-left-three-fourth);
    margin-top: 10px;
}

.bottom-bar .bottom-left-section .weather .weather-status{
    position: absolute;
    left: var(--bottom-left-one-fourth);
    text-align: center;
    width: var(--bottom-left-three-fourth);
    margin-top: 10px;
    top: 0px;
}


.bottom-bar .bottom-left-section .clock{
    width: var(--bottom-left-width);
    height: var(--bottom-bar-height);
    position: absolute;
    bottom: 0px;
    opacity: 1.0;
}

.bottom-bar .bottom-left-section .clock .time{
    position: absolute;
    width: var(--bottom-left-one-fourth);
    text-align: center;
    margin-top: 15px;
}

.bottom-bar .bottom-left-section .clock .day{
    position: absolute;
    width: var(--bottom-left-three-fourth);
    left: var(--bottom-left-one-fourth);
    text-align: center;
    margin-top: 15px;
}

.bottom-bar .bottom-left-section .clock .calendar{
    position: absolute;
    width: var(--bottom-left-three-fourth);
    left: var(--bottom-left-one-fourth);
    text-align: center;
    margin-top: 15px;  
}

.bottom-bar .bottom-left-section .clock .calendar-flipping-section{
    width: var(--bottom-left-three-fourth);
    height: var(--bottom-bar-height);
}

.bottom-bar .bottom-left-section .hotel-logo{
    width: var(--bottom-left-three-fourth);
    height: var(--bottom-bar-height);
    position: absolute;
    top: 0px;
}

.bottom-bar .bottom-left-section .hotel-logo img{
    height: var(--bottom-bar-height);
    width: var(--bottom-left-width);
}

.bottom-left-slant{
    visibility: hidden;
    background: url('../img/bottom-left-slant.png');
    background-repeat: no-repeat;
    background-size: 18px 100%;
    height: var(--bottom-bar-height);
    width: 18px;
    position: fixed;
    left: var(--bottom-left-width);
    z-index: 10;
}


/******************************************************
*******************************************************

Bottm-right section of the Launcher

*******************************************************
******************************************************/


.bottom-bar .bottom-right-section{
    width: var(--bottom-right-width);
    height: var(--bottom-bar-height);
    position: fixed;
    right: 0px;
    color: white;
    font-size: 32px;
    z-index: 10;
}

.bottom-bar .bottom-right-section img{
    width: var(--bottom-right-width);
    height: var(--bottom-bar-height);
}

.bottom-bar .bottom-right-section div{
    width: var(--bottom-right-width);
    position: absolute;
    top: 0px;
    margin-top: 15px;
    text-align: center;
}

.bottom-right-slant{
    background: url('../img/bottom-right-slant.png');
    background-repeat: no-repeat;
    background-size: 18px 100%;
    height: var(--bottom-bar-height);
    width: 18px;
    position: fixed;
    right: var(--bottom-right-width);
    z-index: 10;
}





.ticker-text-section{
    position: absolute;
    top: 0px;
    color: white;
    font-size: 32px;
    margin-top: 15px;
    z-index: 9;
    right: -500px;
    width: 100%;
}


.fade-box{
    height: var(--launcher-menu-height);
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 110px;
    background: url("../img/left_fade.png")  no-repeat 100% scroll left,url("../img/right_fade.png") no-repeat 100% scroll right;    
    z-index: 11;
}

.launcher-menu-section{
    height: var(--launcher-menu-height);
    position: absolute;
    left: 0px;
    bottom: 110px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    background: url('../img/menu_bg.png') 100%;
}

.main-menu{
    box-sizing: content-box;
}

.launcher-menu-section .main-menu-item{
    display: inline-block;
    cursor: pointer;
}



.launcher-menu-section .main-menu .main-menu-item{
    color: white;
    font-size: 35px;
    font-weight: bold;
    padding-left: 100px;
    padding-right: 100px;
    background: url("../img/homeseperator.png") no-repeat scroll right;
    transition: color 0.5s;
    color: white;
    /*transition: font-size 0.5s;*/
    font-size: 45px;
    margin-top: 12px;
}

.launcher-menu-section .main-menu-item:first-child{
    background: none;    
    padding-left: 200px;
}
.launcher-menu-section .main-menu-item:last-child{
    background: none;
    padding-right: 200px;
}

.launcher-menu-section .main-menu .main-menu-item.active{
    transition: color 0.5s;
    color: var(--light-blue);
    transition: font-size 0.5s;
    /*font-size: 39px;*/
    outline: none;
}

.launcher-menu-section .main-menu .main-menu-item:focus{
    outline: none;
}



.launcher-sub-menu-section{
    height: 20px;
    position: absolute;
    bottom: 90px;
    left : 0px;
    right : 0px;
    margin : auto;
}

.launcher-sub-menu-section .sub-menu-section{
    text-align: center;
    display: block;
}

.launcher-sub-menu-section .sub-menu-section .sub-menu{
    
    background: url("../img/submenu_left_end.png") no-repeat scroll left,url("../img/submenu_right_end.png") no-repeat scroll right;
    display: inline-block;
    padding-left: 64px;
    padding-right: 64px;
    height: 34px;
    
}

.launcher-sub-menu-section .sub-menu-section .sub-menu .sub-menu-item{
    background: url('../img/submenu_bg.png');
    display: inline-block;
    color: white;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 8px;
    padding-bottom: 8px;
}





/***********************************************
Settings Screen
***********************************************/

@font-face{
    font-family: obj_bold;
    src: url(../fonts/Objectivity-Bold.otf);
}

@font-face{
    font-family: obj_light;
    src: url(../fonts/Objectivity-Light.otf);
}

@font-face{
    font-family: obj_thin;
    src: url(../fonts/Objectivity-Thin.otf);
}

.settings-screen{
    height: 100%;
    width: 100%;
    background: #011627;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0.0;
}


/** Content Portion */

.content-portion{
}

.tv-settings-block-heading{
    color: gray; 
    margin-top: 30px; 
    font-family: obj_light; 
    font-size: 30px;
    margin: 0;
}

.tv-settings-block{
    margin-top: 40px
}

.tv-settings{
    display: flex; 
    flex-wrap: wrap;
}

.settings-block{
    border-radius: 5px; 
    background: white; 
    height: 160px; 
    min-width: 340px; 
    max-width: 340px; 
    text-align: center; 
    margin: 10px;
    word-break: break-all;
}

.settings-block.active{
    background: orange;
}

.settings-heading{
    font-family: obj_bold;
    font-size: 35px;
    color: black;
    margin-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
    word-break: keep-all;
}

.settings-content{
    font-family: obj_thin;
    font-size: 22px;
    color: black;
    margin-top: 10px;
    letter-spacing: 1px;
}



/******************************************
Toast Message
******************************************/

.toast{
    min-width: 300px; 
    max-width: 500px; 
    background: turquoise; 
    font-family: obj_light; 
    font-size: 23px; 
    position: fixed; 
    bottom: 75px; 
    right: 75px;
    border-radius: 10px; 
    padding: 30px; 
    line-height: 32px;
    z-index: 999;
    opacity: 0.0;
}



/******************************************
Room No. Dialog
******************************************/

.room-no-dialog-holder{
    opacity: 0.0;
}

.backdrop{
    width: 1920px; 
    height: 1080px; 
    background: black; 
    opacity: 0.9; 
    position: absolute; 
    top: 0px; 
    left: 0px;
}


.room-no-dialog{
    background: white; 
    border-radius: 10px; 
    box-shadow: 5px 5px 20px grey; 
    min-width: 300px; 
    max-width: 400px; 
    padding: 70px; 
    position: fixed; 
    top: 200px; 
    left: 710px;
}


.room-no-dialog label{
    font-family: obj_light; 
    font-size: 23px; 
    line-height: 30px
}

.room-no-dialog input{
    font-family: obj_light; 
    display: block; 
    border: 1px solid gray; 
    border-radius: 5px; 
    height: 40px; 
    margin-top: 15px;
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 6px; 
    font-size: 25px;
}

.room-no-dialog button{
    border-radius: 10px; 
    padding: 10px 20px 10px 20px; 
    font-family: obj_light; 
    font-size: 15px;
    margin-top: 5px;
}


/***************************************/
/***************************************/
/**                   Loading Screen ***/
/***************************************/
/***************************************/

.launcher-loading-screen{
    width: 1920px;
    height: 1080px;
    background: black;
    position: absolute;
    top: 0px;
    left: 0px;
    display: table-cell
}

.launcher-loading-screen img{
    display: block;    
    position: absolute;
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}