@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: "Glyphicons Halflings";
    src: url("fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("fonts/glyphicons-halflings-regular.woff") format("woff"), url("fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}

@font-face {
    font-family: 'robotothin';
    src: url('../fonts/Roboto-Thin-webfont.eot');
    src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/Roboto-Thin-webfont.woff') format('woff'),
    url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
    url('fonts/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotoregular';
    src: url('Roboto-Regular-webfont.eot');
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('Roboto-Regular-webfont.woff') format('woff'),
    url('Roboto-Regular-webfont.ttf') format('truetype'),
    url('Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

* {
    font-family: "Roboto",sans-serif;
}
.total-amount {
    font-size: 2.5em;
    font-weight:600;
}
.overflow {
    overflow: hidden;
}
.heading-light {
    font-weight: 300;
}
.btn-grey {
    background-color: #7E7E7E;
    border-color: #666;
    color: #f3f3f3;
}
.padding20 {
    padding:20px;
}
.public-portal .glyphicon {
    color: #666;
    font-size: 1.2em;
}
.shopping-cart-item {
    float: left;
    margin: 20px 10px;
}

input::-webkit-calendar-picker-indicator{
    display: none;
}
input[type="date"]::-webkit-input-placeholder{
    visibility: hidden !important;
}

.booking-details-contatiner {width: 90%; background:#f1f1f1;margin: 0 auto;padding:2%;line-height:1.1em;}
.booking-details-contatiner p {font-size: .9em; color:#666; }
tr#booking-details, tr#booking-details td {border: none;}
.payment-details {margin-top: 10px;}
table.item-details{width: 90%;margin: 10px auto;}
table.item-details td {border-top: 1px solid #ccc!important;}
.paid-status .btn,.paid-status .glyphicon-ok-circle {color:#67BC4B;}

table.booking-history {margin-top: 20px;}
#weatherFeed {clear:both;}
.port-profile-pic img {border-radius: 100px;float: right;}

.weatherCt {float: left; margin-right: 1%; color:#747474; width:19%; font-size:.8em;}
.weatherDay, .weatherTempR, .weatherIcon {float: left;clear:both;}
b.weatherDay {font-weight: normal;color:#747474;}

/*registration*/
form.registration .input-group[class*="col-"] {}
form.registration, .signup-confirm {margin:10px;}
.terms-and-conditions textarea {font-size:.8em; margin:15px 0;}
.terms-agreement {font-size: .8em;}
.submit-group .btn {float: right;margin-left: 8px;}
input#website { display: none;}
.input-group[class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}
.errorBox ul {clear: both;}


/*taken from jsp*/

.circular
{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    margin-left: 10px;
}

.errorBox {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    border-width: 1px;
    border-style: solid;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.errorBox {
    background-color: #f2dede;
    border-color: #eed3d7;
}

.errorBox * {
    color: #b94a48;
}

.error {
    background-color: #f2dede !important;
}



@media only screen and (max-width: 768px), screen and (max-device-width: 768px) {
    .registration-form-cont {
        max-width: 700px;
    }
}
@media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 480px){
   .dob-input, .dob-label {display: none!important;}
}

/*Kiosk Mode*/
a.keyboardChar {color: #333;line-height: 50px;}
a#DeleteKey.keyboardChar{color: #fff;}
a.keyboardChar:hover {text-decoration: none;}
.dob-input.input-group .form-control {z-index: 1;}
#suPage h2 {font-size: 40px;}
#suPage label {font-size: 20px;}
#suPage input.form-control, #suPage input.seInputSelect {height: 45px; font-size: 20px;
    background-color:#fff;width:100%; border-color: #ccc;padding: 6px 12px;}
#suPage .panel-content {padding: 20px 20px 5px 20px;}
#suPage .registration-form-cont {margin: 0 auto;max-width: 1200px;}
#suPage #seKeys {margin: 0 auto;max-width: 1200px; text-align: center;display: flex;justify-content: center;flex-direction: column;align-items: center;}
.keyboardChar {height: 50px; width:50px;display:inline-block;margin: 0 10px 10px 0;}
.keyboardChar.spaceKey, .keyboardChar#DeleteKey {width: 100px;font-size: 26px;line-height: 60px;}
#DeleteKey.keyboardChar {background-color: #333; color: #fff;}
#suPage .modal-dialog {width: 800px;}
#suPage .terms-agreement {font-size: 18px;vertical-align:top; padding-top: 10px;display: inline-block;}
#suPage .btn.terms-button {width: 200px;}
#suPage input[type="checkbox"] {width:40px; height: 40px; cursor: pointer; appearance: none; background: #fff;margin-top: 10px;border: 1px solid #ccc;border-radius: 3px;}
#seCTopGrey {height: 40px; width: 100px; float: right;}

.suAgreement {background: #f5f5f5; margin: 20px 0;display: flex; align-items: center;height: 90px;}

.miClubContainer{width: 100%;position: absolute;bottom: 5%;display: flex;justify-content: center;align-items: center;}
.miClubContainer span.miClubTitle{color:#ffffff;font-weight:600;}
.miClubContainer a#secretBtn {cursor:pointer}
.miClubContainer img.miclubLogoWhite{width:80px;}
@media screen and (max-width:1400px){
    .miClubContainer{width: 100%;position: relative;bottom: 0;}
    #seButContainer a{flex:1 1 100%;}
}
#social-logins {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.social-login-container .btn {
    width: 200px;
    height: 40px;
}
.facebook-signup-btn {
    background-color: #385499;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 14px;
 }

.facebook-signup-btn:hover {
    background-color: #314a86;
}

.facebook-logo {
    height: 20px !important;
    margin-right: 8px;
}
.apple-signup-btn {
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    justify-content: center;
    align-items: center;
    padding: 7px 31px;
    border: 0;
    border-radius: 4px;
    background-color: #000;
    text-decoration: none;
    cursor: pointer;
}

.apple-logo {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.apple-signup-text {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

.google-logo {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

#google-signup-button {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    color: black;
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 7px 22px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s;
}

#google-signup-button:hover {
    background-color: #f8f9f9;
}

.agreeTcs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

#email-signup-button {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    color: black;
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 7px 22px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s;
}

#email-signup-button:hover {
    background-color: #f8f9f9;
}

.email-logo {
    padding: 0px 9px 0px 0px;
    height: 23px !important;
}

.circle-loader {
    margin-bottom: 3.5em;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-left-color: white;
    animation: loader-spin 1.2s infinite linear;
    position: relative;
    display: inline-block;
    vertical-align: top;
    border-radius: 50%;
    width: 3em;
    height: 3em;
}

.load-complete {
    -webkit-animation: none;
    animation: none;
    border-color: white;
    transition: border 500ms ease-out;
}

.checkmark {
    display: none;
}
.checkmark.draw:after {
    animation-duration: 800ms;
    animation-timing-function: ease;
    animation-name: checkmark;
    transform: scaleX(-1) rotate(135deg);
}
.checkmark:after {
    opacity: 1;
    height: 3.5em;
    width: 1.75em;
    transform-origin: left top;
    border-right: 3px solid white;
    border-top: 3px solid white;
    content: "";
    left: 1.75em;
    top: 3.5em;
    position: absolute;
}

@keyframes loader-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }
    20% {
        height: 0;
        width: 1.75em;
        opacity: 1;
    }
    40% {
        height: 3.5em;
        width: 1.75em;
        opacity: 1;
    }
    100% {
        height: 3.5em;
        width: 1.75em;
        opacity: 1;
    }
}

@media (max-width: 768px) {
    div[style*="z-index: 2000000000"] {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}