*, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
HTML, BODY { height: 100%; font-size: 16px; font-family: Roboto, "-apple-system-headline", Arial, Helvetica, sans-serif; }
BODY { color: #000000; background: #E5E4E2; margin: 0; }
TABLE { font-size: 1rem; }
TD { text-align: left; padding: 2px; }
TH { text-align: center; font-weight: 600; padding: 2px; }
H1, H2, H3 { color: #002FA7; font-family: Roboto, -apple-system-headline, Arial, Helvetica, sans-serif; font-weight: 400; margin: 5px 0 10px; }
H4, H5, H6 { color: #000000; font-family: Roboto, -apple-system-subheadline, Arial, Helvetica, sans-serif; font-weight: 400; margin: 5px 0 10px; }
H1 { font-size: 2rem; }
H1 I { margin: 0 10px 0 0; }
H2 { font-size: 1.75rem; }
H3 { font-size: 1.5rem; }
H4 { font-size: 1.375rem; }
H5 { font-size: 1.25rem; }
H6 { font-size: 1.125rem; }
A:link, A:visited, A:active { font-weight: normal; color: #C71585; text-decoration: underline; }
A:hover { font-weight: normal; color: #FF00FF; }
A:link.rezlink, A:hover.rezlink, A:visited.rezlink { color: #E5E4E2; font-size: 0.625rem !important; }
A:link.iconlink, A:active.iconlink, A:visited.iconlink { color: #003366; text-decoration: none; display: block; padding: 5px; }
A:hover.iconlink { background: #F8F8FF; border: 1px solid #007FFF; box-shadow: 0 0 10px #97B1BF; }
A:link.padlink, A:hover.padlink, A:visited.padlink { color: #FFFFFF; text-decoration: none; text-shadow: 1px 1px 1px #000000; width: 100%; height: 100%; padding: 8px 0px 0px; display: block; }
A:hover.padlink { background: #899999; }
IMG { max-width: 100%; max-height: 100%; border: none; }
P, UL, OL, LABEL { line-height: 140%; }
P { font-size: 1rem; margin: 0px 0px 20px 0px; }
INPUT { width: 100%; font-family: Roboto, -apple-system-body, Arial, Helvetica, sans-serif; font-size: 1rem; background: #F8F8FF; border: 1px solid #999999; border-radius: 3px; padding: 2px; margin: 3px 0; }
INPUT:disabled { background-color: #DEDEDE; opacity: 0.35; filter: Alpha(Opacity=35); }
INPUT:hover, INPUT:focus { background: #FFFFFF; border: 1px solid #F0911D; box-shadow: 0 0 10px #97B1BF; }
TEXTAREA { width: 100%; height: 110px; font-family: Roboto, -apple-system-body, Arial, Helvetica, sans-serif; font-size: 1rem; background: #F8F8FF; border: 1px solid #999999; border-radius: 3px; padding: 2px; margin: 1px; }
TEXTAREA:hover, TEXTAREA:focus { background: #FFFFFF; border: 1px solid #F0911D; box-shadow: 0 0 10px #97B1BF; }
SELECT { width: 100%; font-family: Roboto, -apple-system-body, Arial, Helvetica, sans-serif; font-size: 1rem; background: #F8F8FF; border: 1px solid #999999; border-radius: 3px; padding: 2px; margin: 3px 0; }
SELECT:disabled { background-color: #DEDEDE; opacity: 0.35; filter: Alpha(Opacity=35); }
SELECT:hover, INPUT:focus { background: #FFFFFF; border: 1px solid #F0911D; box-shadow: 0 0 10px #97B1BF; }
BUTTON { font-size: 1.125rem; font-weight: normal; padding: 8px; cursor: pointer; margin: 4px; border: 1px solid #777777; border-radius: 3px; box-shadow: 0px 2px 3px #AAAAAA; }
BUTTON:hover { color: #000000 !important; background: #F8F8FF !important; border: 1px solid #007FFF; box-shadow: 0 0 10px #97B1BF; }
BUTTON I { float: left; margin: 5px 0 0; }
HR { color: #4682B4; height: 1px; }
DEL { color: #B22222; }
MARK { color: #FF1493; background: #FFE4E1; border-bottom: 1px dotted #FF1493; }
FIELDSET { font-size: 0.9375rem; background: #FFFFFF; margin: 10px auto; padding: 10px; }
LABEL { margin: 0 4px 0 0; }
STRONG { font-weight: 600; }
#container { max-width: 480px; min-width: 360px; background: #333333; margin: 0 auto; border: 1px solid #0F4D92; }
#loginbox { background: #FFFFFF; max-width: 400px; min-width: 360px; margin: 0px auto 10px; border: 1px solid #0077D6; }
#topimage { width: 100%; height: 90px; text-align: center; background: #0F4D92; border-top: 3px solid #000000; border-bottom: 3px solid #000000; }
#iconbar { width: 100%; height: 60px; text-align: right; background: #336699; border-bottom: 3px solid #007ADA; }
#tablettbl { width: 100%; }
.navcard { position: relative; width: 100%; height: 100%; overflow: hidden; background-color: #FFFFFF; }
.menu-head { width: 100%; max-width: 480px; height: 55px; background: #0F4D92; padding: 10px; border-bottom: 1px solid #999999; position: fixed; top: 0; z-index: 10; }
.menu-title { width: 65%; color: #FFFFFF; font-size: 1.5rem; text-align: right; position: relative; top: -30px; display: block; float: left; }
.login-title { width: 100%; color: #FFFFFF; font-size: 1.5rem; text-align: center; position: relative; display: block; }
.home:not(.open) .menu-icon-toggle SPAN { background-color: #FFFFFF; }
.menu-icon-toggle { display: block; width: 35px; height: 30px; position: relative; z-index: 50; cursor: pointer; }
.home .menu-icon-toggle { top: 50px; position: absolute; right: 20px; top: 20px; }
.menu-icon-toggle SPAN { display: block; width: 100%; height: 4px; position: absolute; top: 50%; background-color: #FFFFFF; transform: translate(0, -50%); transition: opacity 0.3s 0.3s; }
.home:not(.open) .menu-icon-toggle SPAN { background-color: #FFFFFF; }
.menu-icon-toggle::before, .menu-icon-toggle::after { height: 4px; background-color: #FFFFFF; content: ''; margin: -4px 0; display: block; width: 100%; position: absolute; transition: transform 0.3s, top 0.3s 0.3s, bottom 0.3s 0.3s; }
.menu-icon-toggle::before { top: 6px; }
.menu-icon-toggle::after { bottom: 6px; }
.open .menu-icon-toggle SPAN { opacity: 0; transition: opacity 0.3s; }
.open .menu-icon-toggle::before, .open .menu-icon-toggle::after { background-color: #FF0000; margin: -1px; }
.open .menu-icon-toggle::before { top: calc(50% - 1px); transform: rotate(45deg); }
.open .menu-icon-toggle::after { bottom: calc(50% - 1px); transform: rotate(-45deg); }
.open .menu-icon-toggle::before, .open .menu-icon-toggle::after { transition: top 0.3s, bottom 0.3s, transform 0.3s 0.3s; }
.menu-background { visibility: hidden; width: 300%; height: 320px; position: absolute; left: -130%; background-color: #0F4D92; transition: background-position 0.5s, transform 0.5s 0.5s, visibility 0.5s 1s; }
.open .menu-background { visibility: visible; transition: background-position 0.5s, transform 0.5s 0.5s; }
.menu-background.top { transform: rotate(-45deg) translateY(-150%); background: linear-gradient(to top, #6191D1 50%, #0F4D92 50%); background-size: 100% 200%; background-position: -100% 100%; }
.open .menu-background.top { transform: rotate(-45deg) translateY(-49%); background-position: 0 0; }
.menu-background.middle { transform: rotate(-45deg) translateY(50%) scaleY(0); background: #0F4D92; }
.open .menu-background.middle { transform: rotate(-45deg) translateY(50%) scaleY(1); }
.menu-background.bottom { transform: rotate(-45deg) translateY(320%); background: linear-gradient(to bottom, #0F4D92 50%, #6191D1 50%); background-size: 100% 200%; background-position: 0 -100%; }
.open .menu-background.bottom { transform: rotate(-45deg) translateY(149%); background-position: 0 0; }
.menu { position: absolute; top: 70px; left: 15%; visibility: hidden; list-style-type: none; margin: 0; padding: 0; z-index: 9999; }
.menu I { margin: 0 15px 0 0; }
.open .menu { visibility: visible; }
.menu UL { margin: 16px 0 0; list-style-type: none; }
.menu LI { opacity: 0; color: #ACEEFF; margin: 0 0 10px 0; -webkit-transform: translateX(20px); transform: translateX(20px); -webkit-transition: all 0.3s; transition: all 0.3s; }
.menu LI:nth-child(11), .menu LI:nth-child(10), .menu LI:nth-child(9) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
.menu LI:nth-child(8), .menu LI:nth-child(7), .menu LI:nth-child(6), .menu LI:nth-child(5) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.menu LI:nth-child(4), .menu LI:nth-child(3), .menu LI:nth-child(2), .menu LI:nth-child(1) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.open .menu LI { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.open .menu LI:nth-child(1), .open .menu LI:nth-child(2), .open .menu LI:nth-child(3), .open .menu LI:nth-child(4) { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; }
.open .menu LI:nth-child(5), .open .menu LI:nth-child(6), .open .menu LI:nth-child(7), .open .menu LI:nth-child(8) { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; }
.open .menu LI:nth-child(11), .open .menu LI:nth-child(9), .open .menu LI:nth-child(10) { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }
.open .menu LI.noaccess { color: #999999; }
.menu-icons { width: 35%; text-align: right; position: relative; top: -35px; float: left; }
.menu-icons A { font-size: 1.5rem; padding: 8px; display: inline-block; }
.menu-icons A:hover { background: #002233; }
.menu-icons A.homelink { color: #7CFC00; }
.menu-icons A.outlink { color: #FEAFCE; }
.menu A { position: relative; text-decoration: none; color: #FFFFFF; display: inline-block; }
.menu A::before { content: ''; display: block; height: 4px; width: 0; position: absolute; left: -20px; top: 50%; background-color: #FFFFFF; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: width 0.3s; transition: width 0.3s; }
.menu A:hover::before { width: 15px; }
#pagecontent { width: 100%; min-height: 620px; color: #000000; padding: 70px 10px 10px; -webkit-transition: all 0.3s 1s; transition: all 0.3s 1s; }
.open #pagecontent { opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; }
#mycontent { padding: 10px; }
#dropdownmenu { width: 100%; height: 480px; }
#dropmenu { width: 100%; }
#ajaxerror { height: 0.875rem; font-size: 0.875rem; }
#hotelname { font-size: 1rem; text-align: center; color: #FFFFFF; background: #003366; padding: 10px; }
#DivCentre { margin: 0 auto; width: auto; }
#Capcha { width: 100%; height: 165px; text-align: center; }
.rad20 { width: 52px; background: #CCEBFF; border: 1px solid #336699; padding: 5px; margin: 6px; display: block; float: left; }
.insetimg { margin: 0px 0px 0px -30px; }
.boxshadow { min-width: 200px; min-height: 100px; margin: 10px auto; color: #000000; background: #FAF0E6; position: relative; padding: 10px; box-shadow: 0px 0px 8px #AAAAAA; -moz-box-shadow: 0px 0px 10px #AAAAAA; -webkit-box-shadow: 0px 0px 10px #AAAAAA; }
.fullwidth { width: 100%; }
.fld250 { width: 250px; }
.fld200 { width: 200px; }
.tblcentre { margin: 0 auto; }
.tblborder { border-collapse: collapse; }
.reztbl { width: 98%; color: #000000; background-color: #FFFFFF; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 0.9375rem; border: 1px solid #4682B4; border-collapse: collapse; outline: 8px solid #FFFFFF; box-shadow: 10px 10px 10px #999999, -7px -7px 10px #999999; margin: 20px auto; }
.reztbl2 { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 0.9375rem; color: #000000; background-color: #FFFFFF; border: 1px solid #BBBBBB; border-collapse: collapse; padding: 5px; margin: 0 auto; }
.tblhead { font-size: 1rem; color: #FFFFFF; background: #778899; }
.colcenter { text-align: center; }
.colright { text-align: right; }
.colleft { text-align: left; }
.lbl { color: #000000; white-space: nowrap; }
.hlite { color: #B22222; }
.error { background: #FFE4E1; border: 1px solid #FF0084; }
.error-diaglog { width: 500px; padding: 2px; position: relative; top: 50px; }
.pageloading { width: 90px; color: #000000; background: #ACE1AF; position: fixed; top: 45%; left: 45%; text-align: center; outline: 8px solid #FFFFFF; box-shadow: 10px 10px 10px #999999, -7px -7px 10px #999999; z-index: 150; padding: 30px 10px 10px; }
.thinline { background: #ECECEC url(images/line.png) repeat-x; }
.logout { height: 64px; background: #0070A9 url(images/phone-topbar.png) repeat-x; }
.smalltext { font-size: 0.75rem; }
.clearall { clear: both; }
.chart { width: 98%; background: #F5F5F5; border: 1px solid #AAAAAA; margin: 0 auto; margin: 0px 0px 15px 0px; }
.charthd { background: #C2D6D6; font-size: 1.25rem; display: block; padding: 5px; margin: 0px 0px 5px 0px; border-bottom: 1px solid #AAAAAA; }
.div1 { font-size: 1.5rem; text-align: center; margin: 0px 0px 5px 0px; }
.tothdg1 { background: #66B3FF; font-size: 0.9375rem; display: block; padding: 5px; margin: 0px; }
.tothdg2 { background: #8CD98C; font-size: 0.9375rem; display: block; padding: 5px; margin: 0px; }
.tothdg3 { background: #D9B38C; font-size: 0.9375rem; display: block; padding: 5px; margin: 0px; }
.tothdg4 { background: #B6BFC8; font-size: 0.9375rem; display: block; padding: 5px; margin: 0px; }
.tottxt1 { background: #99CCFF; font-size: 0.9375rem; display: block; padding: 5px; margin: 0px; }
.tottxt2 { background: #B3E6B3; font-size: 0.9375rem; display: block; padding: 5px; margin: 0px; }
.tottxt3 { background: #E6CCB3; font-size: 0.9375rem; display: block; padding: 5px; margin: 0px; }
.tottxt4 { background: #D3D9DE; font-size: 0.9375rem; display: block; padding: 5px; margin: 0px; }
.imgoff { background: #F8F8FF; margin: 5px; padding: 5px; border: 1px solid #888888; }
.imgon { background: #FFFF00; box-shadow: 5px 5px 3px #666666; border: 1px solid #000000; }
.highlite { font-weight: 600; color: #B22222; }
.padrow { width: 100%; height: 90px; font-size: 1.5rem; color: #FFFFFF; text-align: center; margin: 20px auto 0px; display: flex; flex-wrap: nowrap; justify-content: space-around; }
.pad1 { width: 160px; height: 70px; background: #2F9DF2; outline: 5px solid #FFFFFF; box-shadow: 7px 7px 7px #999999, -5px -5px 7px #999999; }
.pad2 { width: 160px; height: 70px; background: #1BBA97; outline: 5px solid #FFFFFF; box-shadow: 7px 7px 7px #999999, -5px -5px 7px #999999; }
.pad3 { width: 160px; height: 70px; background: #FCA92D; outline: 5px solid #FFFFFF; box-shadow: 7px 7px 7px #999999, -5px -5px 7px #999999; }
.pad4 { width: 160px; height: 70px; background: #C19A6B; outline: 5px solid #FFFFFF; box-shadow: 7px 7px 7px #999999, -5px -5px 7px #999999; }
.pad5 { width: 160px; height: 70px; background: #738678; outline: 5px solid #FFFFFF; box-shadow: 7px 7px 7px #999999, -5px -5px 7px #999999; }
.padoff { opacity: 0.4; filter: Alpha(Opacity=40); }
.paddiv { height: 8px; }
.btn-blue { color: #FFFFFF; background: #2A80B9; }
.btn-red { color: #FFFFFF; background: #E30022; }
.btn-green { color: #FFFFFF; background: #00A86B; }
.btn-orange { color: #FFFFFF; background: #FE7510; }
.thinline { background: url(images/line.png) repeat-x transparent; height: 6px; line-height: 10px; }