body {    
}

/*#region general*/
.cssPage {
    padding:15px;
}

.ui-line {
    width: 1000px;
    display: block;
    margin: 20px auto 10px auto;
    background-color: #d4d4d4;
    border-bottom: 1px solid white;
    border-radius: 10px;
    padding: 1px 0 0 0;
}

.formLine {
    max-width: 100%;
    margin: 10px 0 30px 0 !important;
}

.cssSpinner {
    width: 15px;
    height: 15px;
    background-size: cover;
    display: inline-block;
    background-image: url('Images/ajax-loader.gif');
}

/*#endregion*/

/*#region */

#cookieConsent {
    background-color:rgba(0, 0, 0, 1);
    color:white;
    text-shadow:none;
    padding:20px;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
    z-index:1000;
}

#cookieConsent span {
    display:inline-block;
}

#cookieConsent button {
    background-color:#03b8eb;
    border:none;
    padding:5px 10px;
    width:auto;
    float:right;
    color:white;
    text-shadow:none;
}

/*#endregion*/

/*#region header*/
.cssPageHeader {
    margin: 0;
    padding: 10px 0 9px 0;
    background-color: #383838 !important;
    border: none;
}

    .cssPageHeader h1 {
        color: white;
        padding: 0 !important;
        padding-top: 8px !important;
        padding-bottom: 4px !important;
        display: inline-block;
        text-shadow:none;
    }

    .cssPageHeader .cssLogoWrapper {
        display: inline-block;
        float: left;
    }

        .cssPageHeader .cssLogoWrapper img {
            width: 250px;
            margin-left: 5px;
        }

    .cssPageHeader .btnHamburger {
        top: 12px !important;
        border: none;
        background-color: transparent !important;
        opacity: 0.9;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

        .cssPageHeader .btnHamburger:hover {
            opacity: 1;
            background-color: #e9e9e9;
        }

        .cssPageHeader .btnHamburger.ui-btn-active {
            background-color: #e9e9e9;
        }

/*#endregion*/

/*#region Footer*/

.cssFooter {
    background-color: #383838;
    color:white;
    text-shadow:none !important;
    padding:10px;
    position:relative;
    z-index:100;
}

.cssFooter p {
    display:inline-block;
}

.cssFooter .termsnConds {
    float:right;
    margin-left:20px;
}

.cssFooter .termsnConds a {
    color:white !important;
    text-decoration:none;
    font-weight:lighter;
}

.cssFooter .termsnConds a:hover {
    text-decoration:underline;
}

/*#endregion*/

/*#region index page*/

.cssIndexJumbatron {
    margin-top:-20px;
    background-image: url('Images/Img_SafeTrack_Home.png?v=7');
    background-clip:content-box;
    background-size: cover;
    height: 420px;
    position:relative;
}

    .cssIndexJumbatron div {
        position:absolute;
        width: 40%;
        min-width: 200px;        
        margin:20px;
        left: 50%;
    }

        .cssIndexJumbatron div h2 {
            text-shadow:none !important;
            font-size:30pt;
            font-weight:normal;
            color:white;
        }

        .cssIndexJumbatron div h3 {
            text-shadow:none !important;
            color:white;
            font-weight:normal;
        }

.cssCheckCardNo {    
    background-color: #383838;
    text-shadow:none;
    color:white;
    width: 100%;
    padding:30px 0;
}


.cssCustomers {
    background-color:white;
    padding:15px;
}

.cssCheckCardNo h3 {
    font-size:2vw;
    font-weight:normal;
    margin-top:0;
}

    .cssCheckCardNo div:last-child {
        text-align:right;
    }

    .cssCheckCardNo div:last-child img {
        width:60%;
        border-radius:8px;
        box-shadow:10px 10px 30px rgba(0, 0, 0, 0.31);
    }

    .cssCheckCardNo div {
        width:45%;
        display:inline-block;
        padding:25px;
        vertical-align:top;
    }

        .cssCheckCardNo div input {
            width: 40% !important;
            display:inline-block;
            height:45px;
            font-size:30pt;
            padding:15px;            
            margin-right:10px;
            vertical-align:top;
            color: #383838;
            margin-top:9px;
        }

        .cssCheckCardNo div button {
            background-color: #a4c639 !important;
            text-shadow: none !important;
            color: white !important;
            width: 40% !important;
            display:inline-block;
            padding:15px;
            height:80px;
            vertical-align:top;
        }


.cssIndexInfoBoxWhite {
    background-color:white;
    width:100%;
    text-align:center;
}


    .cssIndexInfoBoxWhite h3 {
        padding: 100px;
        font-weight:normal;
        font-size: 30pt;
    }
/*#endregion*/

/*#region Card*/
.cssCardPage {
    width:300px;
    margin:15px;
    margin-left:auto;
    margin-right:auto;
    background-color: white;
    padding:15px;
}

    .cssCardPage h2 {
        font-weight:normal;
        color: #808080;        
        text-shadow:none;        
    }

.cssCardCard {    
    background-color: #f8f8f6;
    text-shadow:none;
}


.cssCardCard header {
    display:block;
    padding:10px;
}

    .cssCardCard header div {
        display:inline-block;
        width:49%;                
    }

        .cssCardCard header div img {
            width:90%;
        }

        .cssCardCard header div:last-child {
            text-align:right;
        }

.cssCardCard content {
    display:block;
    background-color:#03b8eb;
    position:relative;
    height:150px;
}

    .cssCardCard content #imgCardOwner {
        position:absolute;
        left:10px;
        top:10px;
        max-width: 100px;
    }

    .cssCardCard content #lblCardName {
        position:absolute;
        left:120px;
        top:20px;
        text-shadow:none;
        font-weight:bold;
        max-width:170px;
        overflow:hidden;
        word-wrap:break-word;
        line-height:15px;
    }

    .cssCardCard content #lblCardNumber {
        position:absolute;
        left:120px;
        top:70px;
        text-shadow:none;
    }

    .cssCardCard content #imgCardQRCode {
        position:absolute;
        background-color:white;
        width: 70px;
        height: 70px;     
        bottom:5px;
        right:5px;  
        padding:5px;
    }

.cssCardInvalid {
    text-align:center;
}

.cssCardCerts {
 text-align:center;       
}

    .cssCardCerts ul {
        list-style:none;
        text-align:left;
        margin:0;
        padding:0;
    }

        .cssCardCerts ul li {
            border-bottom: 1px solid #03b8eb;
        }

            .cssCardCerts ul li img {
                height:20px;
                margin-right:15px;
                margin-bottom:-5px;
            }

            .cssCardCerts ul li:first-child {
                border-top: 1px solid #03b8eb;
            }

        .cssCardCerts ul li p{            
            padding-left:35px;
            text-indent:-2.2em;
            word-wrap:break-word;
            word-break:break-word;
        }

.cssCardEmail {
    text-align:center;
    margin-bottom:50px;
}

.cssCardEmail button{
    background-color: #a4c639 !important;
    text-shadow:none !important;
    color:white !important;
}

.cssCardEmailSent {
    text-align:center;
}

/*#endregion*/


/*#region login*/
.cssPatternBackground {
    min-width:100%;
    min-height:100%;
    
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;

    background-color:#03b8eb;
}

    .cssPatternBackground:before {
        content:"";
        background-image: url('Images/backgroundImage.jpg');
        background-repeat:no-repeat;
        background-size:cover;

        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;

        opacity:0.4;
    }

.cssLogin {
    width:400px;
    margin-left:auto;
    margin-right:auto;
}

    .cssLogin .login_header {
        margin:170px 0 0 0;
        padding:15px;
        position:relative;
        z-index:2;
        background-color:#383838;

        text-align:center;
        border-radius:0 8px 0 0;
    

    }

    .cssLogin .loginHeader h1 {
        position:relative;
        z-index:5;

        margin:170px 0 15px -200px;
        opacity:0;

        text-shadow:none;
        font-weight:normal;
        color:rgba(255, 255, 255, 0.9);
        font-size:2em;
    }

    .cssLogin img {
        width:60%;
    }

    .cssLogin .ui-content {
        margin:400px 0 0 0;
        opacity:0;
        padding:0;

        position:relative;
        z-index:3;
        
        border-radius:0 8px 8px 8px;
        box-shadow:3px 3px 3px rgba(0, 0, 0, 0.20);
    }



@media only screen and (max-width:500px) {
    .cssLogin {
        width: 95%;
    }

        .cssLogin .ui-content {
            margin-top: 0 !important;
        }

        .cssLogin .loginHeader h1 {
            margin-top:90px;
        }
}

.css_loginformwrapper {
    background-color:rgba(255, 255, 255, 0.61);
    border-radius:0 8px 8px 8px;    

    margin:0 0 0 0;
    padding:20px 20px 30px 20px;
}

.css_loginformwrapper .loginSafeTrackLogo {
    text-align:center;
    padding-bottom:20px;
    padding-top:10px;
}

.css_loginformwrapper form {
    margin-bottom:30px;
}

.loginLink:hover {
    text-decoration:underline;
    cursor:pointer;
}

.css_loginformwrapperForgot {
    background-color:rgba(255, 255, 255, 0.62);
    border-radius:0 8px 8px 8px;

    margin:0 0 0 0;
    padding:20px 20px 15px 20px;

    position:relative;
    z-index:3;
}

.css_loginformwrapperForgot form {
    margin-bottom:20px;
}

.css_loginformWrapperSend {
    background-color:rgba(255, 255, 255, 0.62);
    border-radius:0 8px 8px 8px;

    margin:0 0 0 0;
    padding:20px 20px 15px 20px;

    position:relative;
    z-index:3;
}

.css_loginformWrapperSend .loginSafeTrackLogo {
    width:100%;
    text-align:center;
    margin-top:50px;
    margin-bottom:50px;
}

.css_loginformWrapperSend .loginSafeTrackLogo img {
    margin-left:-20px;
}

.css_loginformWrapperSend article {
    text-shadow:none;
}

.css_loginformWrapperSend article h2 {
    font-weight:normal;
    font-size:1.4em;
    margin-bottom:5px;
    margin-top:0;
}

.css_loginformWrapperSend article .formLine {
    border-bottom-color:#ffffff !important;
    background-color:#61c8e5 !important;
    margin:0 !important;
}

.css_loginformWrapperSend article p {
    margin-top:15px;
    margin-bottom:30px;
}




/*#endregion*/

/*#region terms*/
#termsPageWrapper {
    position:relative;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:-21px 0 0 0;
    padding:40px 0 40px 0;
    background-color:#03b8eb;
    z-index:100;
    overflow:hidden;
    height:auto;
    min-height:unset;
}

#termsPageWrapper:after {
    content:'';
    position:fixed;
    top:0;
    left:0;
    /*bottom:72.5px;*/
    min-width:100%;
    min-height:unset;
    height:100%;
    background-image: url('Images/backgroundImage.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    opacity:0.5;
}

h1#termsHeader {
    width:90%;
    margin:0 auto;
    padding:20px 0 20px 0;
    color:white;
    text-shadow:none;
    z-index:3;
    position:relative;
    font-weight:lighter;
}

/*#blurredTerms {
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    background-image: url('Images/backgroundImage.jpg');
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -ms-filter: blur(4px);
    -o-filter: blur(4px);
    filter: blur(4px);
}*/

#contentTerms {
    position: relative;
    background: rgba(255, 255, 255, 0.6);
    z-index:20;

    
    width: 90%;
    min-width: 260px;
    margin: 0 auto 0 auto;
    padding:5px 50px;
    z-index:20;
    border-radius:0 5px 5px 5px;
    box-sizing:border-box;
    overflow:hidden;
}

.terms_page {
    position:relative;
}

.terms_page article:first-child {
    padding-top:20px;
    top:0;
}

.terms_page article {
    padding-bottom:10px;
}

    .terms_page article:before {
        content: '';
        display: block;
        position: relative;
        width: 0;
        height: 5em;
        margin-top: -100px;
    }

.terms_page strong {
    color:#03b8eb;
}

.terms_page article ul {
    list-style:none;
}

.terms_page article ul li {
    margin:5px 0;
}

.fakeListIndents p {
    display: flex;
}

    .fakeListIndents p span:first-child {
        box-sizing: border-box;
        width: 5%;
        padding-right:10px;
        text-align:right;
    }

    .fakeListIndents p span:nth-child(2) {
        box-sizing: border-box;
        width: 95%;
    }

.fakeList {
    padding-left: 40px;
}

/*#endregion*/

/*#region contact form*/

.cssContactForm {
    padding:15px;
}

    .cssContactForm div ul {
        list-style:none;
    }

    .cssContactForm div ul li {
        margin-bottom:10px;
    }

    .cssContactForm div {
        width:45%;
        display:inline-block;
        vertical-align:top;
    }


        .cssContactForm div form {
            background-color:white;
            padding:20px;
        }
    .cssContactForm h2 {
        color:#383838;        
        margin-bottom:0;
    }

#wrapper_ContactConfirmation {
    text-align:center !important;
}
/*#endregion*/

/*#region Download */
.cssDownload {
    margin:15px;
    width:300px;
    margin-left:auto;
    margin-right:auto;
}

    .cssDownload table {
        width: 100%;
    }

        .cssDownload table th, .cssDownload table td {
            text-align:center;
        }

/*#endregion*/

/*#region scan failed*/

.cssAuditorScanFailed {
    background-color: #cd3737 !important;
    text-shadow: none !important;
    color: white;
}

/*#endregion*/


/*#region mobile*/

@media only screen and (max-width: 950px) {
    .cssIndexJumbatron div {
        display: none;
    }

    .cssCheckCardNo div {
        display: block;
        width: 100%;
        padding: 5px;
        text-align: center;
        padding-bottom:15px;
    }

        .cssCheckCardNo div h3 {
            display: none;
        }

        .cssCheckCardNo div:last-child {
            display:none;
        }

        .cssCheckCardNo div button {
            font-size: 0pt;
            margin-top:9px;
        }

    .cssIndexInfoBoxWhite h3 {
        padding: 5px;
        font-size: 14pt;
        text-align: left;
    }

    .cssContactForm div {
        display: block;
        width: 100%;
    }
}


/*#endregion*/

/*#region cookie popup*/

#cookiesPopup {
    position:fixed;
    bottom:0;
    right:0;
    left:0;
    background-color:rgba(0, 0, 0, 0.9);
    z-index:1000;
    color:white;
    text-shadow:none;
    text-align:center;
    padding:10px;
}

#cookiesPopup p {
    display:inline-block;
    margin-right:20px;
}

    #cookiesPopup button {
        background-color: #a4c639;
        border: none;
        padding: 5px 20px;
        border-radius: 5px;
        cursor:pointer;
    }

/*#endregion*/