@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap";
body,footer .right{font-size:16px!important}
:focus { outline: none; }
.copyright div{font-size:14px!important}
html{position:relative;min-height:100%}
body{background-color:#fff;color:#000;font-family:var(--font-family)}
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{float:none}
h6,h5,h4,h3,h2,h1{color:#000; font-family:var(--font-family);}
.container-fluid{max-width:992px}
ul{list-style-type:none}
label{font-weight:400;color:#676767}
a{text-decoration:none!important;color:inherit;-o-transition:color .1s ease-out,background .5s ease-in;-ms-transition:color .1s ease-out,background .5s ease-in;-moz-transition:color .1s ease-out,background .5s ease-in;-webkit-transition:color .1s ease-out,background .5s ease-in;transition:color .1s ease-out,background .5s ease-in}
button:focus,button:active,button:hover,a:hover,a:focus,a:active{color:inherit;cursor:pointer;outline:none!important;box-shadow:none!important}
i{padding:0 5px}
p{margin:10px 0}
.alert-page{font-size:150px!important;color:#cecece}
.copyright{padding-top:50px}
.copyright .keppel{width:150px}
.copyright div{padding:0}
.power-img{width:40px;padding:0 10px}
footer{width:100%;bottom:0;color:#fff;font-size:11px;margin-top:40px}
.navbar{border:0 none;border-radius:0;min-height:30px;margin-bottom:0}
.navbar-nav>li>a{padding:10px}
.navbar-default .navbar-toggle{border:0 none;border-radius:0}
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:#000}
.front{z-index:1}
.padding{padding:0}
.padding5{padding:5px}
.padding15{padding:15px}
.padding-right{padding-right:0}
.margin{margin:0}
.margin-top{margin-top:10px}
.center{text-align:center}
.click-button{margin-top:30px;background-image:url(../../img/front/black.png);background-position:center;background-repeat:repeat-x;width:100%}
.right{float:right}
.text-right{text-align:right}
.bottom{position:absolute;bottom:0}
.height-fixed{height:30px;left:0;right:0;margin-left:auto;margin-right:auto}
.fixed{position:fixed}
.error{color:red;margin: 5px 10px 10px;}
#welcome, #login{background-image:url(../../img/front/login.jpg);    background-position: bottom left; background-size: auto 100%; background-repeat:no-repeat;background-attachment:fixed;}
#welcome .announcements,#home .login label,#home .login p{font-size:18px}
#home .bg.white {opacity: 1;}
a{color:var(--link-color)}
table a:not(.btn),.table a:not(.btn){color:var(--cancel-color)}
.bg{background:url(../../img/front/home.jpg)no-repeat center left;height:100%;background-size:cover;position:fixed;width:100%;left:0;top:0;z-index:-1}
.bg.white{opacity:.1;background-attachment:fixed}
.bg.blur{filter:blur(2px)}
.fieldStyle{background:none;border:0;border-bottom:1px solid var(--main-txt-color);margin:10px auto;width:100%;padding:10px;-webkit-appearance:none;border-radius:0;outline:none;color:var(--main-txt-color)}
.commonBtn{background-color:transparent;border:1px solid #000;border-radius:0;color:#000;font-size:14px;padding:5px 50px;display:inline-block}
.commonBtn:hover{color:#FFF;color: var(--main-btn-color);background-color:var(--main-btn-bg);border-color:var(--main-btn-bg)}
.commonBtn.redCancel:hover{background-color:var(--cancel-color);border:1px solid var(--cancel-color)}
.fieldStyle.error{margin:none}
.loginPg .colRight{width:100%;height:100vh;max-width:500px;float:right;background-attachment:fixed;background:var(--main-bg-color);position:relative}
.loginPg .colRight h3{color:var(--main-txt-color)}
.loginPg .colRight .loginContainer{position:absolute;width:100%}
.loginPg .colRight .loginContainer .inner{position:relative;padding:50px;background:var(--main-bg-color)}
.loginPg .colRight .loginContainer .logo{width:200px;margin:0 auto 15vh}
.loginPg .colRight .loginContainer .logo img{width:100%}
.loginPg .colRight .loginContainer .fieldContainer{margin-top:50px}
.loginPg .colRight .loginContainer .fieldContainer label{display:block;color:var(--main-txt-color);margin-bottom:10px}
.loginPg .colRight .loginContainer .fieldContainer .fieldStyle{background:transparent;color:var(--main-txt-color)}
.loginPg .colRight .loginContainer .forgetPassword{text-align:right}
.loginPg .colRight .loginContainer .forgetPassword a{text-decoration:none;color:var(--main-txt-color)}
.loginPg .buttonCol{margin-top:10vh}
.loginPg .terms-text{margin-top:3vh;text-align:center}

.loginPg .colRight .loginContainer .buttonCol .commonBtn{width:100%}
.loginPg .colRight .loginContainer .fieldContainer label.error{color:red;font-size:13px;margin:0 10px 10px}
.loginPg .colRight .loginContainer .commonBtn{border:1px solid var(--main-txt-color);color:var(--main-txt-color)}
.loginPg .colRight .loginContainer .commonBtn:hover{background:var(--main-txt-color);color:var(--main-bg-color)}
#home .button{text-align:center}
#home .front-modal-dialog{text-align:center;max-width:350px;background:#FFF;height:auto}
#home .front-modal-content .button,.front-modal-content .button{text-align:right;padding:20px}
#home .form-control{box-shadow:none;border:0;border-bottom:1px solid #000;border-radius:0;color:#000}
.front-modal-dialog{background:#FFF;left:0;margin-left:auto;margin-right:auto;margin-top:10%;position:absolute;right:0;width:40%}
.front-modal-dialog h5{background:var(--main-btn-bg);color:var(--main-btn-color);border-bottom:1px solid #EEE;padding:10px 20px;font-size:15px;font-family:var(--font-family);text-align:center;margin:auto}
.front-modal-dialog .padding50{padding:20px}
.front-modal-dialog span#message{color:#000;font-family:var(--font-family);}
.front-modal-content .button .input{background-color:transparent;border:1px solid #000;border-radius:0;color:#000;font-size:14px;padding:5px 50px;display:inline-block}
.front-modal-content .button .input:hover{color:#FFF;background-color:var(--main-btn-color);border-color:transparent}
.front-modal-content .buttons{text-align:right;margin-top:20px;padding:10px}
.front-modal-content .buttons .commonBtn{margin-left:10px}
.front-modal-content .buttons .commonBtn.redCancel:hover{background:var(--cancel-color)}
.modal-inner{padding:10px;display:block}
.modal-content{background-color:#fff;padding:0;font-size:16px;color:#676767;border:0;border-radius:0}
.modal-content h5{border-bottom:1px solid #EEE;background:var(--main-btn-bg);color:var(--main-bg-color);margin:0;padding:20px;display:block;font-size:15px}
.modal-content .modal-inner{padding:20px}
.modal-content .buttons{text-align:right;margin-top:20px;padding:20px}
.modal-content .buttons .commonBtn{margin-left:10px}
.modal-content .buttons .commonBtn.redCancel:hover{background:var(--cancel-color)}
.modal-content .button .commonBtn:focus {color: var(--main-btn-color);}
.modalContents{padding: 20px; background:#FFFFFF; margin:5px;}
.hamburger{border:none;color:#fff;width:30px;height:20px;position:absolute;display:none;top:10px;right:-40px;z-index:999;cursor:pointer;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out}
.hamburger span{display:block;width:100%;height:4px;margin-bottom:4px;background:var(--main-btn-bg);}
.hamburger span:last-child{margin-bottom:0}
.hamburger.menuActive span{display:block;width:100%;height:5px;margin-bottom:5px;background:var(--main-btn-bg);}
.hamburger.menuActive span:nth-child(1){margin-top:7px;-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg)}
.hamburger.menuActive span:nth-child(2){opacity:0;left:-60px}
.hamburger.menuActive span:nth-child(3){margin-top:-20px;-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg)}
.hamburger.menuActive{left:285px;right:auto;position:absolute}
.backBtn{font-size:16px;text-align:right}
.menu{background-color:var(--main-bg-color);position:fixed;top:0;z-index:10;width:280px;height:100%}
.menu ul{width:100%;margin:0 auto;list-style:none;padding:0;}
.push-left{left:0;}
.push{padding-left:280px}
.push-toleft{padding-left:280px}
.menu li a{display:block;color:var(--main-txt-color);padding:10px 20px;text-decoration:none;position:relative;z-index:11}
.menu a:hover,.menu a:active,.menu li.mActive a,.bookfacilityPg .menu li.bookfacility a,.notificationPg .menu li.notification a,.managebookingPg .menu li.managebooking a,.usefulinformationPg .menu li.usefulinformation a{color:var(--link-color)}
.menu li img{width:100%}
.menu li .logo img {min-height: 80px;}
.menu li a .logo {
    width: 80%;
    margin: 0 auto;
    display: block;
}
.menu .innerScroll{overflow: auto;height: 100vh;}
.menu .drop.open{font-weight:bold;}
.menu .drop-menu{max-height:0; display:none; margin-bottom: 20px; width: 100%;}
.menu .drop-menu.open{max-height:unset; display:inline-block;}
.menu .drop-menu {padding:10px 0;-webkit-box-shadow: inset 1px 0px 25px -20px rgba(0,0,0,0.75);
-moz-box-shadow:inset 1px 0px 25px -20px rgba(0,0,0,0.75);
box-shadow: inset 1px 0px 25px -20px rgba(0,0,0,0.75); transition: 500ms linear;}
.menu .drop-menu li a{ padding: 10px 30px;}

/*
.menu .mainmenu-dropdown .down-caret {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: var(--main-txt-color) transparent transparent transparent;
  display: inline-block;
  margin-left: 6px;
  top: -3px;
  position: relative;
  transform: rotate(0deg);
  transition: all .25s ease-in;
}
.menu .mainmenu-dropdown .drop:hover .down-caret{
  border-color: var(--main-btn-bg) transparent transparent transparent;}
.menu .mainmenu-dropdown .open-caret {
    transform: rotate(180deg);
    transition: all .25s ease-out;
  }*/
.belowMenu ul{border-top:1px solid #B3B3B3;/*position:absolute;width:280px;bottom:0*/ margin-top:65px; width: 100%;}
/*.belowMenu ul li{width:80%;margin:0 auto}*/
.body-container{width:100%;min-height:100vh;position:relative}
.body-container .innerContents{padding:70px 30px;min-height:calc(100vh - 100px)}
.body-container h1{font-size:36px;display:block;margin-bottom:20px}
.body-container .description{font-size:14px;margin-bottom:20px}
.formsPage .pgTitle{font-size:40px}
.formsPage .formFields{margin-bottom:40px}
.formsPage .formFields .label{color:#000;font-size:16px;padding:0;display:inline-block}
.formsPage .formFields .inputField{max-width:800px;width:100%}
.formsPage .formFields .fieldStyle{margin:0 auto;color:#000;border-color:#000}
.formsPage .formFields.half{width:48%;display:inline-block;margin-right:2%;margin-left:0;vertical-align:top;margin-bottom:30px}
.formsPage .formFields.half.last{margin:0}
.formsPage .formFields.calContainer .label{display:block;text-align:left}
.formsPage .formFields.greybg{background-color: #e1e2e4; padding: 20px;}
.calContainer.formFields .legend{width:100%;display:inline-block;vertical-align:top;padding:10px}
.calContainer.formFields .legend h6{margin:0 10px 0 0;display:inline-block;vertical-align:middle}
.calContainer.formFields .legend .lndicon img{width:100%;display:block}
.calContainer.formFields .legend .lndicon{display:inline-block;width:20px;vertical-align:middle}
.calContainer.formFields .legend .lndlabel{display:inline-block;vertical-align:middle}
.calContainer.formFields .calendar{width:100%;display:block;vertical-align:top}
.calContainer.formFields .calendar table{width:100%}
.innerContents .assistance{margin:50px auto}
.fieldStyle[disabled],.fieldStyle[readonly],fieldset[disabled] .fieldStyle{background-color:#adafae;opacity:1}
.formsPage .buttons a{margin-right:5px;display:inline-block}
.formsPage .buttons a:last-child{margin-right:0}
.innerFooter{background:#000;text-align:center;padding:10px;position:relative}
.innerFooter .leftDiv{position:absolute;left:20px;top:0;bottom:0;margin:auto;height:15px}
.innerFooter .centerDiv{margin-top:5px}
.innerFooter a{color:#FFF}
.clear{clear:both}
.notifications{margin-top:8vh;max-width:500px;width:100%}
.notifications h3{color:#FFF}
.ntfc{background:rgba(255,255,255,.8);height:40vh;max-height:460px;overflow:auto}
.ntfc ul{margin:0;padding:0;list-style-type:none}
.ntfc ul li{display:block;padding:10px;border-bottom:1px solid #B3B3B3;position:relative}
.ntfc ul li .n-column{display:inline-block;vertical-align:middle}
.notifications a{color:#000}
.ntfc ul li .new{top:50%;transform:translateY(-50%);right:10px;position:absolute;border:1px solid #000;border-radius:100%;width:40px;height:40px;line-height:40px;text-align:center;color:var(--link-color);font-size:12px}
.ntfc ul li .n-column .ntfc-title{font-weight:var(--med);font-size:16px;margin-bottom:10px}
.ntfc ul li .n-column .ntfc-desc{font-weight:var(--reg);font-size:14px}
.notification.viewAll{padding:5px;text-align:center;background:rgba(255,255,255,.8);margin-top:2px}
.managebooking .tblBooking{width:100%;margin-bottom:40px}
.profile{background-color:rgba(103,103,103,0.8);color:#fff;margin-left:0;width:100%}
.profile p{padding-left:40px;line-height:30px}
.profile ul li{display:inline-block;padding-right:5px;line-height:30px}
.announcements{margin-top:15%;background-color:rgba(250,250,250,0.7);padding:40px 30px 30px;border-radius:30px;width:60%;height:400px;overflow:hidden;position:relative}
.announcements .content{overflow-y:scroll;height:70%;margin-right:-100px;padding-right:100px;padding-left:0}
.announcements em{padding:5px 0;text-align:right}
.ui-datepicker-calendar td{padding:0 3px!important}
#profile hr,.announcements hr{margin:0}
.announcements a{color:#676767}
.announcements a:hover{color:#fff}
.login{margin-right:auto;margin-left:auto;background-color:rgba(250,250,250,0.85);padding:30px;border-radius:30px;width:400px;position:relative;margin-top:20%;float:none}
.login img{margin-bottom:10px}
.loginbutton input{background:url(../../img/front/login.png) no-repeat;background-size:100% 100%;cursor:pointer;display:block;width:100%;height:44px;border:none}
.legend{border:1px solid #D4D4D4;right:0;font-size:12px;padding:15px}
.legend .padding15{padding-right:0}
.legend img{max-width:40px;max-height:40px}
#booking_confirmation .click-button{bottom:-65px}
#reset_password .click-button,#profile .click-button,#booking_facility .click-button,#booking_confirmation .click-button{padding:0;position:absolute;bottom:0;margin-bottom:-15px}
#booking_confirmation .click-button img{width:70%;margin-left:15%}
#home hr,#booking_confirmation hr{margin-bottom:0;margin-top:40px}
#terms_and_conditions .click-button{border-bottom:#000 solid 1px;position:relative;bottom:-40px}
#terms_and_conditions .click-button .row{position:absolute;bottom:-15px}
.wrapper-dropdown-3{position:relative;margin:0 auto;padding:5px;background:#fff;border:1px solid rgba(0,0,0,0.15);cursor:pointer;outline:none;color:#676767}
.wrapper-dropdown-3:after{content:"";width:0;height:0;position:absolute;right:10px;top:50%;margin-top:-3px;border-width:6px 6px 0;border-style:solid;border-color:#676767 transparent}
#profile .wrapper-dropdown-3::after,#booking_confirmation .wrapper-dropdown-3::after{border-style:none}
.wrapper-dropdown-3 .dropdown{position:absolute;top:140%;left:0;right:0;z-index:1;padding:0;background:#F3F7F8;border-radius:inherit;border:1px solid rgba(0,0,0,0.17);box-shadow:0 0 5px rgba(0,0,0,0.1);font-weight:400;-webkit-transition:all .1s ease-in;-moz-transition:all .1s ease-in;-ms-transition:all .1s ease-in;-o-transition:all .1s ease-in;transition:all .1s ease-in;list-style:none;z-index:2;opacity:0;pointer-events:none}
.wrapper-dropdown-3 .dropdown:after{content:"";width:0;height:0;position:absolute;bottom:100%;right:15px;border-width:0 6px 6px;border-style:solid;border-color:#fff transparent}
.wrapper-dropdown-3 .dropdown:before{content:"";width:0;height:0;position:absolute;bottom:100%;right:13px;border-width:0 8px 8px;border-style:solid;border-color:rgba(0,0,0,0.1) transparent}
.wrapper-dropdown-3 .dropdown li a{display:block;padding:10px;text-decoration:none;border-bottom:1px solid #e6e8ea;box-shadow:inset 0 1px 0 rgba(255,255,255,1);-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-ms-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out;color:var(--page-link-color)}
.wrapper-dropdown-3 .dropdown li i{float:right;color:inherit}
.wrapper-dropdown-3 .dropdown li:hover a{background:#fff}
.wrapper-dropdown-3.active .dropdown{opacity:1;pointer-events:auto}
.no-opacity .wrapper-dropdown-3 .dropdown,.no-pointerevents .wrapper-dropdown-3 .dropdown{display:none;opacity:1;pointer-events:auto}
.no-opacity .wrapper-dropdown-3.active .dropdown,.no-pointerevents .wrapper-dropdown-3.active .dropdown{display:block}
footer .container-fluid{position:relative;min-height:80px}
footer .right{font-size:14px;text-align:right}
.title{margin-top:-15px}
.notices,.useful_informations{padding:50px 0}
.greybackground{margin-bottom:15px}
.greybackground td{border-bottom:1px solid #ccc}
.managebooking .greybackground{border:0}
.bold{font-weight:700}
#booking_manage table,.notices table,.useful_informations table{line-height:30px;background-color:transparent;color:#000;font-size:14px}
.notices table a,.useful_informations a{color:#000;opacity:.7}
.notices table a:hover,.useful_informations a:hover{opacity:1}
#booking_manage table td,.notices table td{padding:0 10px; border-bottom: 1px solid #ccc;}
.notices table tr.table-row{background:var(--main-bg-color)}
.notices table.tblStyle{width:100%}
.notices table.tblStyle tr td > span{display:none}
.notices table.tblStyle tr:nth-child(odd){/*background:#EEE*/}
.notices table.tblStyle tr:nth-child(1){background:#EEEEEE;}
.notices table.tblStyle tr td:nth-child(1){width:100px}
.notices table.tblStyle tr td:nth-child(2){width:85%}
.notices table.tblStyle tr td:nth-child(3){text-align:right}
#booking_manage table tr:first-child{background-color:#676767;color:#FFF}
.notices table .notice-row{border-radius:10px;padding:15px;font-size:16px}
.notices table .notice-row td{padding:10px}
.notices table .notice-row td span{display:inline-block}
.notices table .table-row:nth-child(1) a{color:#000}
#booking_manage table{text-transform:capitalize}
#booking_manage table td:last-child{text-align:right}
#booking_manage table.mgbook tr td:nth-child(6){text-transform:lowercase}
#booking_manage table.mgbook tr:first-child td:nth-child(6){text-transform:capitalize}
.useful_informations h6{background-color:#676767;color:#fff;padding:10px;}
.useful_informations ul{padding:10px 15px;color:#676767;list-style-type:initial; margin-left:20px;}
.useful_informations a{color:#676767}
.booking_confirmation,.bookform{padding:50px 0;margin-bottom:30px}
.bookform .control-label{text-align:left;font-weight:400}
.terms_and_conditions{padding:50px 0 80px}
.terms_and_conditions ol{padding:20px;list-style-type:decimal}
.terms_and_conditions li{padding-left:5px}
.about-image{min-height:230px}
.welcome{font-size:16px;position:relative;font-size:16px;position:relative;left:150px;text-align:right;width:30%}
#header,#about_coral,#booking_manage #header{min-height:250px;background-image:url(../../img/front/header_banner/banner_05.jpg);background-size:cover;background-repeat:no-repeat;background-position:left;border-bottom:#000 solid 1px;padding-bottom:15px}
#home #header{min-height:0;background-image:none;border-bottom:#000 solid 0;padding-bottom:0}
.map{padding-bottom:600px;background-image:url(../../img/front_map.jpg);background-size:cover;background-position:center 40%;background-repeat:no-repeat;margin-top:20px;position:relative;bottom:-15px;border-top:1px solid #000}
#profile .modal-dialog{margin:0 auto;position:absolute;z-index:10;top:25%;width:30%;left:35%}
#home .modal-dialog{margin:0 auto;position:absolute;z-index:10;top:10vh;width:30%;right:0;left:0}
#booking_confirmation .modal-dialog{position:fixed;right:0;left:0;margin-right:auto;margin-left:auto;width:500px;margin-top:200px}
.invite{padding:50px 150px}
.invite-photo{padding-bottom:250px;background-image:url(../img/front/swimming_pool.jpg);background-repeat:no-repeat;background-size:cover}
.invite table{height:250px;width:100%}
.invite table tr,.invite table,.invite table td{background-color:#000;color:#fff;vertical-align:initial;text-align:left;margin:0;padding:10px 15px;border-bottom:1px #666766 solid}
.invite .input{display:inline-block;width:50%;float:right}
.invite-form{background-color:#f1f2f2;padding:30px 15px 15px}
.invite-form img{margin-top:-15px;margin-bottom:15px}
.invite-form .column{width:48%;display:inline-block;min-height:230px;padding:0 15px 15px;background-color:#e6e6e6;border-top:1px #000 solid}
.invite-form .column div+div{padding-left:5px;padding-bottom:8px}
.invite-form .message{min-height:100px;color:#000;border:1px solid #D4D4D4;margin-bottom:10px;resize:none;width:100%}
.invite-form .btn{background-image:url(../img/front/theme.jpg);background-repeat:no-repeat;background-position:right;background-size:cover;color:#fff;width:100%;margin:15px 0;font-size:14px}
.invite-form #googleMap{width:100%;height:250px;overflow:hidden;margin:15px 0}
.code{background-color:#f1f2f2;padding:30px 50px}
.code h4{line-height:40px;padding:0 50px}
.code h5,.code h1{font-family:var(--font-family);}
.checkBox{display:inline-block;position:relative;padding-left:30px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; font-weight:normal; font-weight: normal; margin-right: 20px; color: var(--link-color);}
.checkBox input{position:absolute;opacity:0;cursor:pointer}
.checkBox .checkmark{position:absolute;top:0;left:0;height:20px;width:20px;border:1px solid var(--main-btn-bg);}
/* .checkBox:hover input ~ .checkmark{background-color:#ccc}
.checkBox input:checked ~ .checkmark{background-color:transparent;} */
.checkBox .checkmark:before, .checkBox .checkmark:after{content:"";position:absolute;display:none}
.checkBox input:checked ~ .checkmark:before, .checkBox input:checked ~ .checkmark:after{display:block}
/*.checkBox .checkmark:after{ top: 4px; left: 4px; width: 10px; height: 10px;background:var(--main-btn-color);}*/
.checkBox .checkmark:after {
    top: 2px;
    left: 10px;
    width: 2px;
    height: 13px;
    background: var(--main-btn-bg);
    transform: rotateZ(45deg);
}
.checkBox .checkmark:before {
    top: 8px;
    left: 4px;
    width: 2px;
    height: 6px;
    content: "";
    position: absolute;
    background: var(--main-btn-bg);
    transform: rotateZ(-45deg);
}
.radioBtn{display:inline-block;position:relative;padding-left:30px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; font-weight:normal; font-weight: normal; margin-right: 20px;}
.radioBtn input{position:absolute;opacity:0;cursor:pointer}
.radioBtn .checkmark{position:absolute;top:2px;left:0;height:16px; width:16px; border:1px solid var(--main-btn-bg); border-radius:50%}
.radioBtn.disabled .checkmark{position:absolute;top:2px;left:0;height:16px; width:16px; border:1px solid var(--main-btn-disabled-bg); border-radius:50%}
/* .radioBtn:hover input ~ .checkmark{background-color:#ccc} */
/* .radioBtn input:checked ~ .checkmark{background-color:transparent;} */
.radioBtn .checkmark:after{content:"";position:absolute;display:none}
.radioBtn input:checked ~ .checkmark:after{display:block}
.radioBtn .checkmark:after{ top: 3px; left: 3px; width: 8px; height: 8px;border-radius:50%;background:var(--main-btn-bg);}

/* key collection */
.keycollection-contact.col-md-3{float:left}
.formFields.col-md-12{float:left}
.key-collection label.error{color:red;font-size:13px;margin:0 10px 10px}

/* smart home activation */
#smart_home_container label.error{color:red;font-size:13px;margin:0 10px 10px}

/*Application Forms*/

.applicationForms{}
.applicationForms .pdfForms ul{margin:0; padding:0; list-style-type: none;}
.applicationForms .pdfForms ul li{margin:0px auto 10px; clear: both; display:flex;border-bottom: 1px solid #EEEEEE;}
.applicationForms .pdfForms ul li a{display: block;text-decoration: none; color:#000000; }
.applicationForms .pdfForms ul li .formTitle{ padding: 10px;  display:inline-block; width: calc(100% - 130px);}
.applicationForms .pdfForms ul li .formTitle:hover{color:var(--main-btn-bg);}
.applicationForms .pdfForms ul li .downloadbtn{text-align:center; width: 200px; vertical-align: middle;}
.applicationForms .pdfForms ul li .downloadbtn a{display:block;padding: 10px 20px; color:var(--main-btn-bg);}
.applicationForms .pdfForms ul li .downloadbtn a:hover{ }

.appForm.formsPage{margin-top: 30px;}
.appForm.formsPage .addBtn{margin: 20px auto;}
.appForm.formsPage .rgtbuttons{text-align: right;}
.appForm.formsPage .rgtbuttons a {
text-decoration: none;
margin-right: 5px;
display: inline-block;
}
.appForm.formsPage .rgtbuttons .commonBtn.submit[disabled], .formsPage .rgtbuttons .commonBtn.submit[disabled]:hover {
background: #999999;
color: #DDDDDD;
border: #EEEEEE;
cursor:default;
}
.appForm.formsPage .rgtbuttons .commonBtn.submit{cursor: pointer;}
.appForm.formsPage .fillForm{padding:20px;}
.appForm.formsPage .pd20{padding:20px;}
.appForm.formsPage h6 {
background-color: #676767;
color: #fff;
font-size: 16px;
font-weight: normal;
padding: 10px;
margin:0 auto; display: block;
}
.appForm.formsPage .fieldStyle{width: calc(100% - 20px); border:1px solid rgba(0,0,0,0.15)}
.appForm.formsPage .block{padding: 20px 40px 0;}
.appForm.formsPage .formFields .third .occupantdet{ margin-bottom: 10px;}
.appForm.formsPage .formFields .third .three{width: calc(35% - 20px); display: inline-block; margin-right: 20px;}
.appForm.formsPage .formFields .third .three.short{width: calc(15% - 20px);  }
.appForm.formsPage .formFields .smaller{font-size:12px; margin-top: 5px; display: block;}
.appForm.formsPage .formFields .custom-file{position:relative;display:inline-block;width:69%;margin-bottom:0;margin-right:10px;border:1px solid rgba(0,0,0,0.15); height: 32px; vertical-align:middle;}
.appForm.formsPage .formFields .custom-file-input{position:absolute;z-index:2;width:69%;margin:0;opacity:0;height:32px;display:inline-block;vertical-align:middle; top:0; left:0;}
.appForm.formsPage .formFields .custom-file-input[disabled] ~ .custom-file-label,.appForm.formsPage .formFields .custom-file-input:disabled ~ .custom-file-label{background-color:#EEE}
.appForm.formsPage .formFields .custom-file-label{position:absolute;top:6px;left:10px;margin:auto;z-index:1;font-size:14px}
.appForm.formsPage .formFields .custom-file-label label{border:1px solid #000}
.appForm.formsPage .formFields .upload{display:inline-block; vertical-align:middle;}
.appForm.formsPage .formFields .uploaded-file-view{padding:10px 10px 0 10px}
.appForm.formsPage .formFields .uploaded-file-view a{color:#000;text-decoration:underline !important}
.appForm.formsPage ul.overview {margin:0;padding:0;list-style-type:none}
.appForm.formsPage ul.overview li{display:inline-block;width:30%; margin:10px auto;margin-right:20px; vertical-align: top;}
.appForm.formsPage ul.overview li .label{text-align:left;padding-right:20px; color:#000000; font-size:14px; display:inline-block; width: 40%; font-weight:bold;}
.appForm.formsPage .acknowledge a{color:var(--main-btn-bg)}
.appForm.formsPage .formFields.one-third{width: calc(31% - 20px); margin-right: 20px; display: inline-block;}
.appForm.formsPage .formFields .radioBtn{margin-top: 10px; display: block;}
.appForm.formsPage .formFields .inputField{width:auto; margin: 10px 0 0; display: block; font-size: 14px; position:relative;}
.appForm.formsPage .formFields .inputField .fieldStyle {width: 100%;}
.appForm.formsPage .formFields .inputField ol{list-style-type: decimal; margin: 5px 20px; padding:0;}
.appForm.formsPage .formFields textarea.fieldStyle{border:1px solid rgba(0,0,0,.15); width: 100%; height: 80px;resize:none;}
.appForm.formsPage .deposit,
.appForm.formsPage .deposit label{color:#000000;}
.appForm.formsPage .deposit .paynow{margin-left: 40px;}
.appForm.formsPage .redfont{color:#FF0000;}
.appForm.formsPage .numberTxt{width:40px;     border: 1px solid rgba(0,0,0,.15);
    padding: 5px 10px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    opacity: 1;
    margin-right: 10px;
    text-align: center;
    margin-top: -5px;}
 .appForm.formsPage table.tblViewForms{width: 100%; background:none;} 
 .appForm.formsPage table.tblViewForms tr td, .appForm.formsPage table.tblViewForms tr th{padding: 10px;font-size: 14px; font-weight:normal;}
 .appForm.formsPage table.tblViewForms tr th{background:#676767;}
 .appForm.formsPage table.tblViewForms tr td{color:#000000;}
.appForm.formsPage table.tblViewForms tr:nth-child(even) td{background-color:#EEEEEE;}
.appForm.formsPage table.tblViewForms tr td.tblRgt{text-align:right;}
.appForm.formsPage label.error {
    color: #FF0000;
    display: inline-block;
    margin-top: 5px;
}
.ui-datepicker-calendar{font-size:10px;}

.eVoucher .cards .card{
	border:1px solid #000000;
	display:inline-block;
	padding: 20px;
	width: 48%;
	margin-right: 1%;
	margin-bottom: 20px;
	
}
.eVoucher .formFields textarea{resize:none; height: 100px}
.eVoucher .rgtbuttons{text-align:left; width: 100%; margin-top: 50px;}
.eVoucher .formFields .inputField{    margin: 10px 0 0; border:1px solid rgba(0,0,0,0.15); width: 100%; background:none; padding: 5px 10px;}
.eVoucher .qrcode {width: 30vh; display: block;min-width: 250px;}

 @media screen and (max-width: 992px) {
.hamburger{display:block}
.push{-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;padding-left:unset}
.push-left{left:-280px;height:100vh;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out}
.push-left.pushleft-open{left:0;}
.push-toleft{left:280px;padding:0}
 }
@media screen and (max-width: 767px) {
.navbar-nav > li{float:none}
}
@media screen and (max-width: 768px) {
#booking_manage table td:last-child{text-align:left}
.front-modal-dialog{width:80%;/* height:100% */}
#booking_manage table,#booking_manage thead,#booking_manage tbody,#booking_manage th,#booking_manage td,#booking_manage tr{display:block}
#booking_manage tr.table-row{margin-bottom:50px}
#booking_manage table td{border:none;border-bottom:1px solid #eee;position:relative;padding-left:50%}
#booking_manage table td:nth-child(1),#booking_manage table td:nth-child(2),#booking_manage table td:nth-child(3),#booking_manage table td:nth-child(4),#booking_manage table td:nth-child(5),#booking_manage table td:nth-child(6),#booking_manage table td:nth-child(7){width:inherit}
#booking_manage table td:before{position:absolute;left:6px;width:45%;padding-right:10px;white-space:nowrap}
#booking_manage table tr:nth-child(1){position:absolute;top:-9999px;left:-9999px}
#booking_manage td:nth-of-type(1):before{content:"Unit"}
#booking_manage td:nth-of-type(2):before{content:"Date"}
#booking_manage td:nth-of-type(3):before{content:"Time"}
#booking_manage td:nth-of-type(4):before{content:"Facility type"}
#booking_manage td:nth-of-type(5):before{content:"Facility"}
#booking_manage td:nth-of-type(6):before{content:"Status"}
#booking_manage td:nth-of-type(7):before{content:"Cancel booking?"}
.notices table tr td:nth-child(1){width:120px}
.notices table tr td:nth-child(2){width:70%}
}
@media screen and (max-width: 760px) {
.formsPage .formFields.half{display:block;width:100%;margin-bottom:10px;}
.appForm.formsPage .formFields.one-third{display:block; width: 100%;margin-bottom:30px;}
}
@media screen and (max-width: 500px) {
.loginPg{background:var(--main-opacity-bg);min-height:100vh}
.loginPg .colRight{float:none;width:auto;height:100%;background:unset}
.loginPg .colRight .loginContainer{left:unset;top:unset;transform:none;position:relative}
.loginPg .colRight .loginContainer .inner{padding:20px;background:none}
.modal-content{margin-bottom:20px}
.modal-content .buttons .commonBtn{margin:auto;margin-top:10px}
.buttons a{display:block;margin:0 auto 5px;width:100%;min-width:150px;text-align:center}
.innerFooter .leftDiv{position:relative;text-align:center;left:unset}
#welcome, #login{background-size:cover;}
}