/*
    GLOBAL STYLES
*/

body {
    background-image:url('../images/bg_default.jpg');
    background-color: black;
    background-repeat:no-repeat;
    background-position:top center;
    color: white;
}

img {
    max-width: 100%;
}

input {
    color: black;
}

/*
    MAIN CONTAINER
*/
.container {
    /*border: 1px solid black;*/
    position: relative; /* Required for footer to be sticky within the container */

    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.85);/*rgba(238, 238, 238, 0.9);*/

    padding: 10px;
    /*-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;*/
}

.centered {
    margin: 0 auto;
    float: none;
    text-align: center;
}
/* iPad Portrait */
/*@media (min-width: 601px) and (max-width: 769px)
{
    .container {
        width: 728px;
        height: 1024px;
    }
}*/

/* iPad Landscape */
@media (min-width: 990px)
{
    /*body {
        max-width: 1024px;
        max-height: 768px;
        overflow-x: hidden;
    }*/
    .container {
        width: 1024px;
        height: 738px;
    }
}

/*iOS fix for extra space on the side */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

    html,
    body{
        width:100%;
        overflow-x:hidden;
    }

}

/* iPhone 5 Landscape */
/*@media (min-width: 568px)*/
/*{*/
    /*.container {*/
        /*width: 568px;*/
        /*height: 320px;*/
    /*}*/
/*}*/

/* iPhone 5 Portrait */
/*@media (min-width: 320px) and (min-height: 568px)*/
/*{*/
    /*.container {*/
        /*width: 320px;*/
        /*height: 568px;*/
    /*}*/
/*}*/

/* iPhone <=4 Landscape */
/*@media (min-width: 480px)*/
/*{*/
    /*.container {*/
        /*width: 480px;*/
        /*height: 320px;*/
    /*}*/
/*}*/

/* iPhone <=4 Portrait */
/*@media (min-width: 320px) and (min-height: 480px)*/
/*{*/
    /*.container {*/
        /*width: 320px;*/
        /*height: 480px;*/
    /*}*/
/*}*/

/*
    TOP HEADER
*/

.topHeader {
    margin-bottom: 10px;
    padding-top: 10px;
}

.topLeftBackArrow {
    text-align: left;
}


@media (min-width: 768px) {
    .topCenterHeader {
        font-size: 30px;
        text-align: center;
        margin: 0px;
    }
}

/* For mobile responsiveness */
@media (max-width: 767px) {
    .topCenterHeader {
        font-size: 20px;
        text-align: center;
        margin: 0px;
    }
}


.topRightDropdown {
    text-align: right;
}


@media (min-width: 768px) {
    .languageDropdown {
        float: right; z-index: 1049;
    }
}

/* For mobile responsiveness */
@media (max-width: 767px) {
    .languageDropdown {
        float: right; z-index: 1049;
    }
}


/* For mobile responsiveness */
@media (max-width: 767px) {
    .currentCultureString {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
    .dropdown dd { position:relative; }
    .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
    .dropdown a:hover { color:#5d4617;}
    .dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
    .dropdown dt a {background:#e4dfcb url("../images/flags/arrow.png") no-repeat scroll right center; display:block; padding-right:20px;
        border:1px solid #d4ca9a; width:180px;}
    .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
    .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
        left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:180px; max-width: 180px; list-style:none;}
    .dropdown span.value { display:none;}
    .dropdown dd ul li a { padding:5px; display:block;}
    .dropdown dd ul li a:hover { background-color:#d0c9af;}
    img.flag { border:none; vertical-align:baseline; margin-left:10px;}
}

/* For mobile responsiveness */
@media (max-width: 767px) {
    .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
    .dropdown dd { position:relative; }
    .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
    .dropdown a:hover { color:#5d4617;}
    .dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
    .dropdown dt a {background:#e4dfcb url("../images/flags/arrow.png") no-repeat scroll right center; display:block; padding-right:20px;
        border:1px solid #d4ca9a; width:60px;}
    .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
    .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
        left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:60px; max-width: 60px; list-style:none;}
    .dropdown span.value { display:none;}
    .dropdown dd ul li a { padding:5px; display:block;}
    .dropdown dd ul li a:hover { background-color:#d0c9af;}
    img.flag { border:none; vertical-align:baseline; margin-left:10px;}
}

/*
    BOTTOM FOOTER
*/

@media (min-width: 768px) {
    .footer {
        position: absolute; /* Required for footer to be sticky within the container */
        font-size: 24px;
        margin-bottom: 20px; /* fixes iPad buttons being off until the screen is panned */
    }
}

/* For mobile responsiveness */
@media (max-width: 767px) {
    .footer {
        position: absolute; /* Required for footer to be sticky within the container */
        font-size: 24px;
    }
}

.bottomLeftFooter {
    text-align: center;
    padding-right: 0;
}

.bottomRightFooter {
    text-align: center;
    padding-left: 0;
}

.leftButton {
    width: 100%;
    height: 100%;
    margin: 0;
}

.rightButton {
    width: 100%;
    height: 100%;
    margin: 0;
}

/*
    STEP 1
*/

.step1RegistrationHeader {
    margin-top: 20px;
}

.step1RegistrationBody {
    margin-top: 30px;
}

/*
    STEP 2
*/

.requiredAsterisk {
    color: red;
}

.cameraPicture {
    max-width: 480px;
    max-height: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.facebookProfilePicture {
    max-width: 480px;
    max-height: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.LV_validation_message{
    font-weight:bold;
    margin:0 0 0 5px;
}

.LV_valid {
    color:#00CC00;
    display: block;
}

.LV_invalid {
    color:#CC0000;
    display: block;
}

.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active {
    border: 1px solid #00CC00;
}

.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
    border: 1px solid #CC0000;
}

/* For mobile responsiveness */
@media (max-width: 767px) {
    .formArea {
        margin-bottom: 40px;
    }
}

/*
    STEP 3
*/

@media (min-width: 768px) {
    .termsBox {
        max-height: 550px; overflow-y: auto; overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        font-size: 18px; padding: 20px;
    }
}

/* For mobile responsiveness */
@media (max-width: 767px) {
    .termsBox {
        max-height: 220px; overflow-y: auto; overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        font-size: 12px; padding: 20px;
    }
}


@media (min-width: 768px) {
    .termsCheckboxArea {
        text-align: right;
        vertical-align: middle;
        font-size: 18px;
    }
}

/* For mobile responsiveness */
@media (max-width: 767px) {
    .termsCheckboxArea {
        text-align: right;
        vertical-align: middle;
        font-size: 12px;
        margin-bottom: 25px;
        margin-top: 10px;
    }

    #iagreeButton {
        font-size: 8px;
    }
    #idisagreeButton {
        font-size: 8px;
    }
}

@media (min-width: 768px) {
    .modalContent {
        height: 650px;
    }
    .innerSigPad {
        width: 850px;
        height: 478px;
    }
    .cancelSigningButton {
        width: 425px; text-align: center; background-color: #7a0000; color: white;
    }
    .startSigningButton {
        width: 425px; text-align: center; background-color: #008000; color: white;
    }
    .sigWrapper {
        height: 483px !important;
    }
    .iAgreeCheckbox {
        vertical-align: text-top;
        margin-right: 5px !important;
    }
}

/* For mobile responsiveness */
@media (max-width: 767px) {
    .modalContent {

    }
    .innerSigPad {
        width: 280px;
        height: 200px;
    }
    .cancelSigningButton {
        width: 138px; text-align: center; background-color: #7a0000; color: white;
    }
    .startSigningButton {
        width: 138px; text-align: center; background-color: #008000; color: white;
    }
    .sigWrapper {
        height: 200px !important;
        width: 280px !important;
    }
    .sigNavInner {
        display: inline-block;
        height: 22px !important;
    }
    .sigPad {
        width: 280px !important;
    }
    .clearButtonStyle {
        font-size: 8px !important;
    }
    .modal-body {
        padding: 1px !important;
    }

    .iAgreeCheckbox {
        vertical-align: top;
        margin-right: 5px !important;
        margin-top: 0px !important;
    }
}


/*
    BACK ARROWS
*/

a.arrow {
    background: #950006;
    background: -moz-linear-gradient(top, #de0009 0%, #950006 100%);
    background: -o-linear-gradient(top, #de0009 0%, #950006 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #de0009), color-stop(100%, #950006));
    background: -webkit-linear-gradient(top, #de0009 0%, #950006 100%);
    background: linear-gradient(top, #de0009 0%, #950006 100%);
    border: solid #dd0009;
    border-width: 1px 1px 1px 0;
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    display: inline-block;
    height: 48px;
    line-height: 46px;
    margin-left: 40px;
    margin-right: 2px;
    padding: 0 7px 0 3px;
    position: relative;
    text-decoration: none;
}

a.arrow:before {
    background: #950006;
    background: -moz-linear-gradient(-45deg, #de0009 0%, #950006 100%);
    background: -o-linear-gradient(-45deg, #de0009 0%, #950006 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #de0009), color-stop(100%, #950006));
    background: -webkit-linear-gradient(-45deg, #de0009 0%, #950006 100%);
    background: linear-gradient(-45deg, #de0009 0%, #950006 100%);
    border: solid #dd0009;
    border-width: 0 0 1px 1px;
    border-radius: 2px 0 2px 2px;
    content: '';
    display: block;
    height: 34px;
    left: -18px;
    position: absolute;
    top: 6px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 36px;
}

a.arrow:hover, a.arrow:focus {
    border-color: #b50007;
    background: #7e0004;
    background: -moz-linear-gradient(top, #b50007 0%, #7e0004 100%);
    background: -o-linear-gradient(top, #b50007 0%, #7e0004 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b50007), color-stop(100%, #7e0004));
    background: -webkit-linear-gradient(top, #b50007 0%, #7e0004 100%);
    background: linear-gradient(top, #b50007 0%, #7e0004 100%);
}

a.arrow:hover:before, a.arrow:focus:before {
    border-color: #b50007;
    background: #7e0004;
    background: -moz-linear-gradient(-45deg, #b50007 0%, #7e0004 100%);
    background: -o-linear-gradient(-45deg, #b50007 0%, #7e0004 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #b50007), color-stop(100%, #7e0004));
    background: -webkit-linear-gradient(-45deg, #b50007 0%, #7e0004 100%);
    background: linear-gradient(-45deg, #b50007 0%, #7e0004 100%);
}

a.arrow span {
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    position: relative;

}

/* Hiding default Signature Pad error message - cannot be localized very well */
p.error {
    display: none !important;
}

/*
    LOADING SPINNER
*/
.spinner {
    margin: 0 auto;
    width: 100px;
    height: 60px;
    text-align: center;
    font-size: 20px;
}

.spinner > div {
    background-color: #333;
    height: 100%;
    width: 6px;
    display: inline-block;

    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% {
           transform: scaleY(1.0);
           -webkit-transform: scaleY(1.0);
       }
}

#loading{
    position: absolute;
    left: 50%;
    margin-left: -145px;
    height: 500px;
    top: 50%;
    margin-top: -125px;
}

.ui-datepicker-year {
    color: black;
}

.capitalize {
    text-transform: capitalize;
}

/* GDPR Consent Step */
/* To make GDPR check boxes bigger for iPad - Issue reported by Matt */

#gdprCheckBoxes {
    /*background-color: red; */
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.32); /* IE */
    -moz-transform: scale(1.32); /* FF */
    -webkit-transform: scale(1.32); /* Safari and Chrome */
    -o-transform: scale(1.32); /* Opera */
    /* padding: 4px; */
    margin: 8px 4px 8px 140px;
}


/* Add Minors */
.segment {
    border-radius: 10px;
    background: #404040;
    padding: 10px;
    /*width: 250px;
    height: 200px;*/
    vertical-align: middle;
    margin-left: 40px;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-top: 10px;
}

.round-button {
    background-color: #df272d;
    border: none;
    color: #FFF;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    transition: .4s;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 2px #bd6565;
}
    .round-button:hover {
        background: #7e0004;
    }

.scrollablesegment {
    border-radius: 10px;
    background: #404040;
    padding: 10px;
    /*width: 250px;
    height: 200px;*/
    vertical-align: middle;
    margin-left: 40px;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-top: 10px;
    padding-left: 10px;
    overflow-y: scroll;
    height: 300px;
}