@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700');
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;500);


@import url(stylesheet.css);

#app-root {
    position: absolute;
	top: 0;
	left: 0;
width: 1280px;
  height: 720px;
    overflow: hidden;
    background-color: rgb(12, 17, 37);
    /* background-image: url("https://img.freepik.com/premium-photo/grainy-gradient-background-red-white-blue-colors-with-soft-faded-watercolor-border-texture_927344-24167.jpg"); */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    z-index: 9999;
display: flex;
  flex-flow: row nowrap;
}

#googleCastLeft {
    position: relative;
    width: 490px;
    height: 664px;
    background-color: #181818;
display: flex;
  flex-flow: column nowrap;
  padding: 28px 35px 28px 35px;
}

#googleCastRight {
    position: relative;
    width: 626px;
    height: 675px;

    background-color: #232323;
	display: flex;
  flex-flow: column nowrap;
	padding: 25px 45px 20px 45px;
}
#qr-main-container{
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	justify-content: flex-start;
	width: 100%;
}
#wifi-main-container{
	display: flex;
	flex-flow: row wrap;
	align-content: center;
	justify-content: center;
	width: 100%;
	margin-top: 100px;
}
.steps{
	width: 15%;
	display: flex;
	flex-direction: column;
align-content: flex-start;
  justify-content: flex-start;
	margin-bottom: 10px;
	margin-top: 10px;
	text-align: center;

	
	
}
.steps:first-child{margin-top: 0!important}

.steps div{
	padding: 12px;
	border-radius: 100%;
	background: #393939;
	color: #fff;
	font-size: 24px;
    font-family: 'Google Sans';
    font-weight: normal;
    font-style: normal;
	width: 30px;
	text-align: center;

}
#googleCastConnectIcon {
    /* background-image: url(../images/pre_tos.svg); */
width: 430px;
  height: 248px;
    display: flex;
  /*  margin: 40px 60px 20px 60px;*/
   background: #000000; /* SRID*/
padding: 30px 0 30px 0;
	border-radius: 30px;
	
}

#googleCastConnectImage {

    height: 90%;
    width: auto;
	margin: 0 auto;
}

#googleCastLogo {
    width: 100%;
    height: 66px;
	margin-left: 7px;
    /* margin-top: 50px; */
}

#googleCastLogoIcon {
    background: url(../../images/chromecast_logo.svg) no-repeat;
		background-size: contain;
    width: 36px;
    height: 36px;
    margin-top: 6px;
    float: left;
    
}
#googleCastLogoIcon1 {
    background: url(../../images/chromecast_logo.png) no-repeat;
	background-size: contain;
    width: 46px;
    height: 46px;
   
}
#googleCastLogoContent {
    font-family: 'Google Sans';
    font-weight: 700;
    font-style: normal;
    font-size: 36px;
    /* font-weight: bold; */
    margin-left: 10px;
    float: left;
    color: #E9E9E9;
}

#googleCastRoomInfo {
font-family: Roboto;
font-weight: 500;
    font-style: normal;
    font-size: 15px;
   /* margin-left: 60px;*/
background: #181818;
  line-height: 1em;
  /*width: 30%;*/
	color: #bebebe;
	padding: 0px 0;
    /*display: none; srid*/
	text-transform: uppercase;
	margin-left: 7px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#googleCastDescription {
    text-align: left;
    font-family: 'Google sans';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
   /* margin-left: 60px;*/
	line-height: 28px;
    color: #AAAAAA;
	margin-left: 7px;
}

#googleCastSettingsDesc {
    text-align: left;
    font-style: normal;
    font-size: 14px;
   margin-left: 7px;
	margin-top: 30px;
  line-height: 22px;
    color: #AAAAAA;
	margin-top: 110px;
	font-family: Roboto;
font-weight: 400;


}

.button-text-container {
    display: flex;
    flex-direction: column;
    /*align-items: flex-start;*/
    align-items: center;
	justify-content: center; /*SRID*/
    font-family: 'Google Sans', ui-sans-serif;
    font-weight: normal;

    font-style: normal;
    font-size: 20px;
}

button {
    width: 100%;
    /* padding-left: 0.9em; */
    border: none;
    border-radius: 0.75em;
    transition: all .1s ease-in-out;
    font-size: 20px;
}

#googleCastSettingsButton {
    width: 155px;
    height: 48px;
   /* margin-left: 60px;*/    
	margin-top: 30px;
    border-radius: 36px;
    background-color: rgba(255,255,255,.1);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 50px;
    color: #fff;
font-family: Roboto;
font-weight: 500;

    font-size: 18px;
}

#googleCastQRCode {
    align-items: center;
    width: 430px;
    height: 430px;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
    background-color: #303030;
    color: #000000;
    display: flex;
}

#googleCastQRCodeText {
    font-family: 'Google Sans';
    font-weight: 500;
    font-style: normal;
    font-size: 26px;
    margin: 0 auto;
    text-align: left;
    color: #AAAAAA;
    margin-top: 0px; /*20px;*/
    height: 40px;
    line-height: 40px;
        width: 90%;/*SRID*/
}
#connectWithoutQR{
	background: #A8C7FA;
	color: #062E6F;
	text-align: center;
	border-radius: 40px;
	width: 305px;
height: 48px;
padding-top: 11px;
padding-right: 24px;
padding-bottom: 11px;
padding-left: 24px;
	font-family: Google Sans;
font-weight: 500;
font-style: Medium;
font-size: 18px;

line-height: 26px;
letter-spacing: 0%;
display: flex;
  flex-flow: row nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 10px;
	margin-top: 25px;
	
}
#connectWithQR{
	background: #A8C7FA;
	color: #062E6F;
	text-align: center;
	border-radius: 40px;
	width: 270px;
height: 48px;
padding-top: 11px;
padding-right: 24px;
padding-bottom: 11px;
padding-left: 24px;
	font-family: Google Sans;
font-weight: 500;
font-style: Medium;
font-size: 18px;

line-height: 26px;
letter-spacing: 0%;
display: flex;
  flex-flow: row nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 10px;
	margin-top: 160px;
	
}
#googleCastQRCodeWifi {
    font-family: 'Google Sans';
    font-weight: normal;

    font-style: normal;
    font-size: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;

    color: #ffffff;
    margin-top: 20px;
    height: 48px;
    line-height: 48px;
}

#googleCastQRCodeWifiLogo {
    background: url(../../images/wifi.png);
    width: 39px;
    height: 28px;
    float: left;
}

#googleCastQRCodeWifiText {
    float: left;
    margin-left: 10px;
    white-space: pre;
}

#googleCastQRCodeTextMore {
    font-family: 'Google Sans';
    font-weight: normal;
    font-style: normal;
    font-size: 27px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    color: #AAAAAA;
    margin-top: 30px;
    height: 36px;
    line-height: 36px;
}

#googleCastQRCodePwdText {
    font-family: 'Google Sans';
    /* font-weight: 700; */
    font-style: normal;
    font-size: 38px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #E9E9E9;
    margin-top: 20px;
   /* height: 60px;*/
    line-height: 60px;
    white-space: pre;
}

#googleCastQRCodeOuter,
#google-cast-qr{
    position: relative;
    width: 230px;
    height: 230px;
    /*margin: auto;*/
    margin: 10px;
    /*padding-top: 70px;*/
    background: url("../../images/qrcode-bg.png") center center;
    background-repeat: no-repeat;
	background-size: contain;
	padding: 30px;
}

#google-cast-qr{
    position: relative;
	width: 320px;
	height: 320px;
	margin: 30px 0 10px 0;
    /*padding-top: 70px;*/
    background: url("../../images/qrcode-bg.png") center center;
    background-repeat: no-repeat;
	background-size: contain;
	padding: 30px;


}
#google-cast-qr div,
#google-cast-qr canvas{
width: 290px;
  margin: 15px auto;
  height: 290px;
}
#qr-code-container{
display: flex;
  flex-flow: column nowrap;
  align-content: center;
  align-items: center;
	justify-content: center;
	width: 100%;
	/*border-bottom: 3px solid #393939;*/
	margin-top: 20px;
	margin-bottom: 20px;

}
#cast-code-container{
display: flex;
  flex-flow: column nowrap;
  align-content: center;
  align-items: center;
	justify-content: center;

}


#googleCast-Wifi-container {
width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin-top: 20px;
  padding-bottom: 20px;
  justify-content: flex-start;
  align-items: center;
	
}

#googleCast-url-container{
   display: flex;
   flex-flow: column nowrap;
   align-content: flex-start;
   align-items: flex-start;
   justify-content: flex-start;

margin-top: 20px}

#googleCast-Wifi-text {
    font-family: 'Google Sans';
    font-weight: 500;
    font-style: normal;
    font-size: 26px;
    color: #ffffff;
	padding: 0px 0;
	width: 80%;
	line-height: 26px;
	text-align: left;
	margin-bottom: 10px;
}

#googleCastUrlText{
    font-family: 'Google Sans';
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    color: #ffffff;
	padding: 0px 0;
	width: 100%;
	line-height: 26px;
	text-align: center;
	margin-bottom: 10px;
}
#googleCastPinCodeText {
    font-family: 'Google Sans';
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    color: #ffffff;
	padding: 0px 0;
	width: 100%;
	line-height: 26px;
	text-align: center;
	margin-bottom: 10px;
}
#googleCast-Key-text{
    font-family: 'Google Sans';
    font-weight: normal;
    font-style: normal;
    font-size: 26px;
    text-align: left;
    color: #ffffff;
	padding: 0px 0;
	line-height: 1em;
	width: 80%;
}

#googleCast-Wifi-ssid{
    font-family: 'Google Sans';
    font-weight: 500;
    font-style: normal;
    font-size: 36px;
    text-align: left;
    color: #9BC3FF;
	padding: 0px 0;
width: 76%;
  line-height: 1.5em;

}
#googleCast-Wifi-container img{
	width: 42px;
	margin-left: 15%;
	margin-right: 10px;
}
#googleCast-Wifi-ssid img{
	height: 35px;
	margin-right: 5px;
}

#googleCastUrl{
    font-family: 'Google Sans';
    font-weight: normal;
    font-style: normal;
    font-size: 26px;
    text-align: left;
    color: #fff;
	width: 80%;

	padding: 0px 0;
		line-height: 1em;
width: 300px;
margin-bottom: 20px;
}

#googleCast-Key-pass {
    font-family: 'Google Sans';
    font-weight: 500;
    font-style: normal;
    font-size: 36px;
    text-align: left;
    color: #9BC3FF;
	padding: 0px 0;
		line-height: 1em;
	margin-left: 15%;

}


#googleCastPinCode {
    font-family: 'Google Sans';
    font-weight: normal;
    font-style: normal;
    font-size: 42px;
    text-align: left;
    color: #96c2f6;
    padding: 5px 0;
    width: 40%;/*SRID*/
    border-radius: 50px;
    line-height: 40px;
    height: 40px;
}




/* #googleCastQRCodeOuter {
    position: relative;
    width: 560px;
    height: 580px;
    margin: auto;
    border: #a5a5a5 solid 5px;
    margin-top: 100px;
    border-radius: 40px;
}

#googleCastQRCodeMiddle {
    position: relative;
    width: 500px;
    height: 500px;
    margin: auto;
    margin-top: -30px;
    border-radius: 50%;
}

#googleCastQRCodeMiddle:before,
#googleCastQRCodeMiddle:after,
#googleCastQRCodeMiddle>:first-child:before,
#googleCastQRCodeMiddle>:first-child:after {
    position: absolute;
    width: 60px;
    height: 60px;
    border-style: solid;
    content: ' ';
}

#googleCastQRCodeMiddle:before {
    top: -40;
    left: 0;
    border-width: 10px 0 0 10px;
    border-color: #1e8e3e;
    border-top-left-radius: 40%;
}

#googleCastQRCodeMiddle:after {
    top: -40;
    right: 0;
    border-width: 10px 10px 0 0;
    border-color: #1a73e8;
    border-top-right-radius: 40%;
}

#googleCastQRCodeMiddle>:first-child:before {
    bottom: 30;
    right: 0;
    border-width: 0 10px 10px 0;
    border-color: #d93025;
    border-bottom-right-radius: 40%;
}

#googleCastQRCodeMiddle>:first-child:after {
    bottom: 30;
    left: 0;
    border-width: 0 0 10px 10px;
    border-color: #f9ab00;
    border-bottom-left-radius: 40%;
} */

/*#googleCastWithoutQRCode*/
#googleCastCode {
    width: 317px;/*260px; srid*/
    height: 50px;
    margin: auto;
    margin-top: 20px;/*60px; srid*/
    border-radius: 30px;
    background-color: #262c42;
    text-align: center;
    line-height: 50px;
    color: #FFFFFF;
        padding-top: 13px;/*srid*/
}

#googleCastHelp {

    font-style: normal;
    height: 33px;
    text-align: center;
    margin: auto;
    color: #E4E4E4;
    font-size: 14px;
    line-height: 33px;
	margin-top: 50px;
	font-family: Roboto;
font-weight: 500;
}

.transparent-primary-section {
    /* background-color: rgba(2, 79, 145, 0.7); */
    /* background-color: #1b409c; */
    background-color: black;
    border-width: 0;
    /* border-color: rgba(2, 79, 145, 0.7); */
}

.transparent-primary-secondary {
    background-color: rgba(1, 42, 104, 0.7);
}

.primary-font {
    color: white;
}

.background-highlight {
    background-color: #f7941d;
}

.hide {
    display: none;
}

.show {
    display: block;
}

#video-play {
    width: 100%;
    /* height: 100%; */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}


/* lidg */

.section-wrapper {
    position: relative;
}


/* =========================================== */

.icon-highlight {
    /* webkit-filter: contrast(40%) sepia(1) hue-rotate(-34deg) saturate(554%);
    filter: contrast(40%) sepia(1) hue-rotate(-34deg) saturate(554%); */
    border-radius: 10px;
    box-shadow: 0px 0px 15px 2px var(--basic-border-color);
    border: 5px solid var(--basic-border-color);
}

#main-header .logo-container .logo {
    height: 100%;
    background-size: 113% 164%;
    background-position: -12px -47px;
}

.atlantis-logo {
    background-image: url(../../images/logo_samsunghotel.png);
}

.li-focus {
    color: var(--basic-subtitle-color);
    /* background-color: #1b6ef3 !important; */
    color: #000000 !important;
    background-color: #FFFFFF !important;
    transform: scale(1.0);
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5) !important;
}

.li-focus-font {
    font-weight: bold;
}

#main-header {
    position: absolute;
    left: 400px !important;
    width: 1520px !important;
    height: 105px;
    z-index: 500;
}

#main-header .logo-container {
    width: 250px;
    height: 70px;
    margin-left: 60px;
    margin-top: 18px;
    float: left;
}

#main-header .info-container {
    position: relative;
    width: 50%;
    height: 100%;
    float: right;
    text-align: right;
    padding-top: 18px;
}

.info-container .date-time {
    font-size: 25px;
    padding-top: 15px;
    padding-left: 30px;
    position: relative;
    margin-right: 190px;
}

.weather {
    position: absolute;
    top: 30px;
    right: 50px;
    font-size: 25px;
    display: flex;
}

#tvChannelWeatherValueId {
    display: flex;
    height: 50px;
    align-items: center;
}

#tvChannelLableId {
    height: 80px;
    font-size: 25px;
    position: absolute;
    top: 10px;
    left: 350px;
    line-height: 80px;
    border-left: 2px solid white;
    padding-left: 20px;
}

#tvChannelNavId {
    width: 400px;
    height: 100%;
    background-color: black;
}

#tvChannelNavTitle {
    margin-left: 35px;
    font-size: 24px;
    padding-top: 40px;
    padding-bottom: 10px;
    margin-right: 20px;
    border-bottom: 2px solid white;
    font-weight: bold;
}

#tvChannelNavContent {
    height: 970px;
    overflow: hidden;
}

.tv-channel-nav-li:first-child {
    margin-top: 40px;
}

.tv-channel-nav-li {
    font-size: 25px;
    margin-left: 35px;
    margin-right: 20px;
    height: 50px;
    border-bottom: 1px solid white;
    line-height: 50px;
}

.tv-channel-nav-li>img {
    width: 25px;
    float: right;
    position: relative;
    top: 15px;
}

#tvChannelContentBodyId {
    position: relative;
}

#tvChannelContentId {
    background-color: black;
    width: 1520px;
    /* height: 100%; */
    left: 400px;
    position: absolute;
    top: 105px;
    /* border-top: 2px solid white; */
    border-width: 5px;
    overflow: hidden;
    padding-left: 25px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.tv-channel-icon-li {
    float: left;
    margin-right: 10px;
    width: 200px;
    height: 148px;
    box-sizing: border-box;
    overflow: hidden;
}

.tv-channel-icon-li img {
    /* object-fit: cover; */
    width: 200px;
    height: 148px;
}

.tv-row {
    margin-top: 10px;
}

.tv-row:after {
    content: '';
    display: table;
    clear: both;
}

#ampmId {
    padding-left: 10px;
}

.time-first-split-class,
.time-second-split-class {
    display: none;
}

#tvChannelWeatherIconId {
    width: 50px;
    height: 50px;
}

/* copy from yellow-pencil, because default project has following css
   so just copy it here
*/
/* Logo */
#logoId {
    width: 56%;
    position: relative;
    left: 111px;
}

/* Division */
#tvChannelLableId {
    font-size: 35px;
    font-weight: 700;
}

/* Section */
#tvChannelContentId {
    border-color: #a5a5a5;
    border-style: solid;
    height: 970px;
}

/* List Item */
#tvChannelNavContent li {
    font-size: 34px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Division */
#tvChannelNavTitle {
    font-size: 43px;
}


/* lidg: accessibility */
body.lynk-ab-high-contrast .tv-channel-nav-li {
    border-bottom: 0px !important;
}

body.lynk-ab-high-contrast .li-focus {
    background-color: var(--contrast-hover-background) !important;
}

body.lynk-ab-high-contrast .li-focus span {
    background-color: var(--contrast-hover-background) !important;
    color: var(--contrast-hover-text-color) !important;
}

body.lynk-ab-high-contrast #main-header .logo-container .logo::before {
    content: "HOTEL";
    position: absolute;
    top: 10px;
    font-size: 40px;
    font-weight: bold;
}

body.lynk-ab-high-contrast .atlantis-logo {
    background-image: none !important;
}

#GC_page_1 .gc-active-button {
    background: red
}