body, html { overflow-x:hidden; }
body { margin:0; padding:0; font-family:Helvetica,Arial,sans-serif; background-color:white; }
html { margin:0 auto; min-width:320px; max-width:1280px; }

/* * { outline:1px red solid !important; visibility:visible !important; } */



.navhead     { width:100%; max-width:1280px; height:26px; margin:0; padding:5px 10px; position:fixed; top:0; font-size:14px; color:#0080FF; cursor:pointer; box-sizing: border-box; 
			   background-color:#FFFFFF; border-bottom:1px #B6B4B6 solid; white-space:nowrap; overflow:hidden; z-index:100; }
.navhead span:hover { color:#F58621  }
.navlang     { font-size:14px; display:inline-block; background-color:#E6E6E6; padding:3px 5px; border-radius:9px; cursor:pointer; }
.starrating  { display:inline-block; overflow:hidden; white-space:nowrap; }
.hotelpage   { margin-top:26px }


#gmap  { background-color:#f7f7f7; overflow:hidden; display:inline-block; width:calc(100% - 560px); height:300px; }
.ggmap { background-color:#f7f7f7; overflow:hidden; margin:5%; height:85vh; width:90%; }


/* currency modal */
.currencyinp 	   { cursor:pointer;display: inline-block; height: 30px; width:80px; padding:3px 23px 3px 3px; 
		       		 background-color: white; border: 1px solid #4D90FE; border-radius: 2px; box-sizing: border-box; }
.currencyinp.arrow { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), radial-gradient(#dddddd 70%, transparent 72%);
				     background-position: calc(100% - 14px) 12px, calc(100% - 7px) 12px, calc(100% - 3px) 3px; background-size: 7px 7px, 7px 7px, 22px 22px; background-repeat: no-repeat; }
.currencyinp       { transform: scale(0.75); }
.currmodal         { background-color:#F8F8F8; margin:5vh auto; height:80vh; width:90vw; font-size:14px; overflow:auto; overflow-x: hidden; }
.currmodal .active { background-color:#99CCFF; }
.currmodal ul      { width:90vw; margin:0 auto; padding:0; -webkit-columns:200px; -moz-columns:200px; columns:200px; column-gap:20px; }
.currmodal li      { list-style:none; white-space:nowrap; line-height:28px; cursor:pointer; }
.currmodal li b    { display:inline-block; width:50px; text-align:center; }
.currmodal li hr   { width:80%; margin:13px 0; }

/* header module */
.mod_header { height:80px; width:100%; font-size:14px; margin:0; padding: 5px 10px; background-color:#f7f7f7; position:relative; box-sizing: border-box; }
.mod_header .starrating * { width:12px; }
.mod_header .navlang   { position:absolute; right:85px; top:45px; font-size:14px; color:#0080FF; }
.mod_header .currency  { position:absolute; right:0px;  top:40px; width:80px; }
.mod_header .logo      { position:absolute; right:10px; top:1px; }
.mod_header .logo img  { width:150px}
.mod_header .hotelname { white-space:nowrap; overflow:hidden; font-weight:bold; margin:0; font-size:15px;  }
.mod_header .address   { white-space:nowrap; overflow:hidden; margin-top:5px;  }
.mod_header lg-modal   { position:absolute; right:75px; top:45px; font-size:14px; color:#0080FF; }
.mod_header fx-modal   { position:absolute; right: 5px; top:45px; font-size:14px; color:#0080FF; }

/* picture module */
.mod_pictures         { position:relative; margin:20px 5px 50px 5px; }
.mod_pictures > img   { width:300px; height:200px; }
.mod_pictures .spacer { display:none; }
.mod_pictures .imgnav { width:calc(100% - 200px); height:0px; position:relative; }
.mod_pictures .images { width:calc(100% - 200px); max-height:200px; height:200px; overflow:auto; line-height:1px; position:relative; }
.mod_pictures svg { display:none; position:absolute; top:15px; width:30px; height:40px; opacity:0.6; z-index:5; cursor:pointer; }
.mod_pictures svg.left  { left:0; }
.mod_pictures svg.right { right:0; }
.mod_pictures .images img { width:90px; height:60px; border:1px #CCCCCC solid; display:inline-block; }
.mod_pictures .images img:hover, 
.mod_pictures .images img:active { border-color:blue; }
.mod_pictures .xml    { display:inline-block; vertical-align:top; max-height:180px; width:calc(100% - 520px); position:absolute; top:0; left: 300px; 
				        padding:0 10px; overflow:hidden; font-size:12px; background-color:#FFFFFF; text-align:justify; margin:0; font-weight:500 }
.mod_pictures .review_minimap img    { width:180px; height:180px; position:absolute; top:  0px; right:0px; border:0; }
.mod_pictures .review_minimap iframe { width:180px; height:200px; position:absolute; top:203px; right:0px; border:0; overflow:hidden; z-index:2; }
.mod_pictures .review_minimap span   { position:absolute; top: 0px; right:50px; font-size:11px; display:inline-block; color:blue; }

/* facilities module */
.mod_facilities { text-align:center; margin-top:30px; }
.mod_facilities .faclist { margin:10px; }
.mod_facilities ul { box-sizing: border-box; font-size:12px;text-align:left; list-style-type:square; padding:0 0 0 20px; margin:0; display: inline-block; vertical-align: top; line-height: 20px; columns:200px; width:50%;}
.mod_facilities li { white-space:nowrap; }
.mod_facilities ul.head  { list-style-type:none; }
.mod_facilities .head li { font-size:16px; font-weight:bold; text-decoration:underline; line-height:30px; color:#F6851F; }

/* ratetable */
.mod_ratetable { white-space:nowrap; /* overflow:hidden; */ margin:5px; }
.customer { min-width:320px; border-radius:9px; box-shadow:5px 5px 5px rgba(0,0,0,0.1); border:1px #008000 solid; color:black; box-sizing:border-box; overflow:hidden;   }
.customer { padding:3px; font-size:12px; position:relative; background-color:#F0F0F0; text-align:left; margin:5px; display:none;}
.customer label { display:block; min-height:30px; max-width:440px; }
.customer label  b { display:inline-block; width:110px; }
.customer label span { font-size:11px;  }
.customer label textarea,
.customer label input { width:190px; margin:0 5px; border:1px #CCCCCC solid; background-color:#FFFFFF; box-sizing:border-box; padding:3px; }
.customer label textarea { height:40px; vertical-align:top; }
.customer .prcode { margin-top:5px; }
.customer .prcode > input { width:120px;  }
.customer .prcode input + input { width:60px; font-size:14px; font-weight:bold; color:white; border:1px #0080FF solid; border-radius:5px; background-color:#FF6600; box-shadow:2px 2px 2px #C0C0C0; cursor:pointer; }
.customer .final    { margin:15px 0 5px 0; width:305px; position:relative; color:green; font-size:16px; font-weight:bold; height:40px; }
.customer .final strong {  display:inline-block; width:80px; }
.customer .final input  { position:absolute; top:0; right:0; font-size:16px; color:white; font-weight:bold; padding:3px; margin-left:50px; width:110px; border:1px #0080FF solid; border-radius:5px; background-color:#FF6600; box-shadow:2px 2px 2px #C0C0C0; cursor:pointer;}
.customer .final div    { position:absolute; top:30px; right:20px; font-size:11px; color:blue; }
.customer .terms { position:absolute; top:25px; left:15px; font-size:11px; color:blue;  }
.customer .discount { margin:15px 0 5px 0; width:305px; position:relative; color:green; font-size:14px; font-weight:bold; xdisplay:none; }
.customer .discount strong:first-child { display:inline-block; width:80px; }
.customer .discount strong ~ strong    { margin-left:20px; }
.customer .prcode span { color:red; }
.customer input.verify { background-color:#FFC0C0; }
.customer .arrow { background-image: linear-gradient(60deg, transparent 50%, gray 50%), linear-gradient(120deg, gray 50%, transparent 50%), radial-gradient(#dddddd 70%, transparent 72%);
				   background-position: calc(100% - 10px) 8px, calc(100% - 6px) 8px, calc(100% - 3px) 2px; background-size: 5px 7px, 5px 7px, 16px 16px; background-repeat: no-repeat; 
				   cursor:pointer; }
.paydetail {  width:calc(100% - 440px); min-width:320px; float:right; padding:5px; box-sizing:border-box; margin-bottom:5px; }
.paydetail b {background:#ffffff url('img/logo-payment-method-sprite4.png') no-repeat; width:70px; height:70px; position:relative; cursor:pointer; display:inline-block; margin:3px; border:2px solid #fff; background-size:210px auto;}
.paydetail span { position:absolute;bottom:-2px;left:0;z-index:10;background:rgb(255,255,255); background:rgba(255,255,255,0.6); display:inline-block; width:100%; text-align:center; font-size:9px;color:blue; font-weight:400; line-height:10px }
.paydetail b:hover, .paydetail .active {border:2px solid #ff6600; background-color:#fff6e9;}
.paydetail div {  color:red; font-size:12px; font-weight:bold; }
.paydetail strong { display:block; font-size:12px; margin-left:5px; }
.paydetail .N_A { opacity:0.2 }
.bgOK  { background-image:url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMEEwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIi8+PC9zdmc+");
         background-repeat:no-repeat; background-position:right center; background-size:16px 16px; }    
.iframeR24   {background-color:#FFFFFF; position:absolute; z-index:999; border-width:0; width:320px; height:90vh; } 

/* footer */
.mod_footer { background-color:#373737;font-size:11px;color:white;height:80px; overflow: hidden;}
.mod_footer .footer { text-align:center;font-weight:700;padding:15px; }
.mod_footer a { text-decoration:none;color:white;}
.mod_footer svg { width:30px;height:30px;text-align:center;margin-top:5px;margin-right:5px;}


@media screen and (min-width: 481px) and (max-width: 768px) { 
#gmap         { display:none; }
.currmodal    { margin:5vh auto; height:90vh; width:90vw; font-size:16px; }
.currmodal    { font-size:16px; }
.currmodal li { line-height:36px; }
.mod_header .hotelname { width:calc(100% - 250px); }
.mod_header .address   { width:calc(100% - 250px); }
.mod_pictures          { min-height:400px; margin:15px 2px; }
.mod_pictures .images  { white-space:nowrap; width:calc(100% - 190px); height:auto; overflow-y:hidden;  }
.mod_pictures .imgnav  { width:calc(100% - 190px); }
.mod_pictures svg { display:block; }
.mod_pictures .xml     { position:static; display:block; width:auto; padding-top:10px; max-height:120px; width:calc(100% - 210px); }
.mod_pictures .spacer     { display:inline-block; vertical-align:top; width:calc(100% - 500px); height:200px; }
.mod_pictures .spacer img { max-width:100%; height:auto; }
.mod_pictures .review_minimap span   {  }
.mod_facilities .faclist{ overflow: auto; overflow-scrolling:touch; white-space: nowrap; }
.mod_facilities ul      { columns:1;width:250px; } 
.mod_ratetable { margin:2px;; text-align:center; }
.customer { margin:5px auto; max-width:550px;}
.paydetail { float:none; width:100%; max-width:550px;  }
.mod_footer .footer { padding:10px; }
.mod_footer svg { height:25px;width:25px;}
.mod_footer br:nth-child(1){ display:none;} 
}


@media screen and (max-width: 480px) {  
#gmap            { display:none; }
.gmapinfowin img { display:none; }
.currmodal    { margin:5vh auto; height:90vh; width:70vw; font-size:18px; }
.currmodal    { font-size:18px; }
.currmodal li { line-height:40px; padding-left:10px; }
.currmodal ul { width:70vw; -webkit-columns:auto 1; -moz-columns:auto 1; columns:auto 1; }
.navhead span:last-child { display:none; }
.mod_header .navlang   { font-size:12px; top:10px; right:90px;}
.mod_header .currency  { right:0px;top:5px;}
.mod_header .logo      { right:auto; left:0;}
.mod_header .logo img  { width:120px} 		
.mod_header .hotelname { width:calc(100% - 75px); position:absolute; top:40px; left:3px; }
.mod_header .address   { width:calc(100% - 75px); position:absolute; top:55px; left:3px; }	
.mod_header .starrating{ position:absolute; top:40px; right:15px; }
.mod_header lg-modal   { position:absolute; right:75px; top:5px; font-size:14px; color:#0080FF; }
.mod_header fx-modal   { position:absolute; right: 5px; top:5px; font-size:14px; color:#0080FF; }
.mod_pictures          { min-height:400px; margin:0px; }
.mod_pictures > img    { display:block; margin:0 auto; width:100%; height:auto; }
.mod_pictures .images  { white-space:nowrap; width:auto; height:auto; overflow-y:hidden;  }
.mod_pictures .imgnav  { width:auto; }
.mod_pictures svg { display:block; }
.mod_pictures .xml     { position:static; display:block; width:auto; max-height:80px; margin:10px 0; }
.mod_pictures .review_minimap        { display:block; position:relative; height:200px; margin-bottom:20px; border:1px #CCCCCC solid  }
.mod_pictures .review_minimap img    { left:0; right:auto;  }
.mod_pictures .review_minimap iframe { top:-10px; height:200px;transform:scaleY(0.9);  }
.mod_pictures .review_minimap span   { left:40px; right:auto; }
.mod_facilities .faclist{ overflow: auto; overflow-scrolling:touch; white-space: nowrap; }
.mod_facilities ul      { columns:1;width:230px; }
.mod_ratetable { margin:0px; }
.customer { margin:2px auto; }
.customer label span { display:none; }
.paydetail { float:none; width:100%; }
.mod_footer .footer { padding:5px;font-size:10px;} 
.mod_footer svg { height:23px;width:23px;margin-top:2px;}
.mod_footer br:nth-child(2){ display:none;}	
}


@media (pointer: fine) {
.currmodal li:hover { background-color:#CCCCCC; }
}




.R24hotelpage { font-size:12px; text-align:left; background-color:#F0F0F0; background:url('../img/bg.gif') repeat; margin:0 auto; 
				padding:5px; min-width:320px; max-width:1024px; font-family:Helvetica,Arial,sans-serif; position:relative; }
.R24hotelpage table { margin:0 auto; }
				
@media screen and (max-width: 980px) { 
.R24hotelpage { padding:0px; }
.R24hotelpage div   { max-width:100%!important; box-sizing: border-box;  }
.R24hotelpage table { width:100%!important; }
.R24hotelpage table tr { display: block; }
.R24hotelpage table td { display: inline-block; }
.R24hotelpage table table tr { display:table-row; }
.R24hotelpage table table td { display:table-cell; }
.R24hotelpage table img { max-width:100%; max-height:66vw; }
}