﻿body {
    padding: 0px;
    margin: 0px;
    font-family: "Roboto",'adobe-clean', Helvetica, sans-serif;
    font-size: 16px;
    background-color: #fafafa;
    color: #707070;
}

.clear {
    clear: both;
}
.ajaxloader {
    display: none;
    text-align: center;
}
input[type=button], input[type=submit] {
    -webkit-appearance: none;
}
#wait {
    display: none;
}
.formcontainer {
    width: 100%;
    max-width: 830px;
    margin: auto;
    border: 1px solid #e5e5e5;
    background-color: #FFFFFF;
}
.logo { border-bottom:4px solid #808080; margin:0px  auto 15px auto; text-align:left; max-width:96%;
}
    .logo img, .footer img {
        max-width: 100%;
    }
    .logo img  {
        max-width: 400px;
    }
.footer { margin-top:50px; text-align:center;
}
.inform {
    max-width: 100%;
    padding: 0px 65px 0px 65px;
}
.smallcenter {
    padding: 0px 40px 0px 40px;
}
 
.offerblock {
    margin-bottom: 20px;
}
.circle {
    background-color: #0facf3;
    color: #FFFFFF;
    text-align: center;
    display: inline-block;
    width: 55px;
    height: 49px;
    border: 1px solid #0facf3;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-size: 36px;
    padding: 6px 0px 0px 0px;
    float: left;
}
.offername {
    display: inline-block;
    font-family: 'Exo 2', sans-serif;
    font-size: 24px;
    
    margin: 10px 0px 0px 20px;
    
    float: left;
}
.headingp {
     
    font-family: 'Exo 2', sans-serif;
    font-size: 24px;
    margin: 30px 0px 30px 0px;
    
}
.tblproducts tr td {
    padding: 3px 10px 3px 0px;
    font-size: 16px;
    text-align: left;
}
.tblproducts tr td.secondcopy {
    padding: 3px 10px 3px 10px;
    font-size: 18px;
}
.productlist {
    margin: 0px 0px 0px 15px;
}
.logotop {
    text-align: center;
    margin-bottom: 10px;
}
#pageform { border:1px solid #808080; border-radius:10px;
            padding:20px;
}
/*.productlist ul {
    list-style: none;
    margin: 0px 0px 10px 0px;
    padding: 0px;
}
    .productlist ul li {
        padding:0px 0px 10px 0px; font-size:18px;
    }

        .productlist ul li label {
            margin: auto auto auto 10px;
            width: calc(100% - 15px);
           
        }
            .productlist ul li label span {
                display: inline-block;
                width:150px;
                float:right;
                
            }*/
.button {
    font-family: 'Exo 2', sans-serif;
    font-size: 20px;
    width: 200px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background-color: #0facf3;
    color: #ffffff;
    box-sizing: border-box;
    cursor: pointer;
    margin-top:20px;
}
.active {
    background-color: #0facf3;
    border: 1px solid #0facf3;
    color: #FFFFFF;
}
.disabled {
    color: #bbbbbb;
    background-color: #eeeeee;
    border: 1px solid #c1c1c1;
}
.button_utility {
    font-family: 'Exo 2', sans-serif;
    font-size: 20px;
    height: 50px;
    display: inline-block;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background-color: #FFFFFF;
    color: #0facf3;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid #0facf3;
    margin: 0px 0px 0px 10px;
    padding: 4px 15px 9px 15px;
}


.fcenter {
    float: left;
    left: 22%;
    position: relative;
    margin-top: 130px;
    width: 333px;
}
.fright {
    float:right;
}
.frleft {
    float: left;
}
.pblocks {
    padding: 23px 0px 0px 0px;
}
.pblock {

    border-top: 1px solid #c1c1c1;
    padding: 23px 0px 30px 0px;
}
.firstblock {
    border-top: none;
    padding: 0px 0px 30px 0px;
}
.form-group {
    margin-bottom: 5px;
}
    .form-group img {
        max-width: 100%;
    }
.form-control {
    height: 50px;
    padding: 10px 10px 10px 20px;
    border: 1px solid #c1c1c1;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #444444;
    box-sizing: border-box;
}
.form-group input[type="password"], .form-group input[type="text"] {
    width: 100%;
}
    .form-group input[type="text"].fullwidth {
        width: 98%;
    }
.form-group select {
    width: 100%;
}
    .txtshort, .form-group input[type="password"].txtshort, .form-group input[type="text"].txtshort, .form-group select.txtshort {
        width: 160px;
    }
.txtlong {
    width: 673px;
}
.second {
    margin-left: 10px;
}

.form-group .chk {
    float: left;
    width: 34px;
    overflow: hidden;
    height: unset;
}
.form-group .chk input {
    width: 25px;
    height: 25px;
}
.tblproducts input {
    width: 55px;
    height: 25px;
}
    .tblproducts input[type=radio] {
        width: 25px;
        height: 25px;
        float: left;
        display: block;
    }
.tblproducts {
   
}
    .tblproducts label {
        float: left;
        display: block;
        margin: 0px 0px 20px 15px;
        width: calc(100% - 50px);
    }
.form-group .chkspan {
    display: block;
    padding: 8px 0px 0px 10px;
    float: left;
    width: calc(100% - 70px);
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #bbbbbb;
}

::-moz-placeholder { /* Firefox 19+ */
    color: #bbbbbb;
}

:-ms-input-placeholder { /* IE 10+ */
    color: #bbbbbb;
}

:-moz-placeholder { /* Firefox 18- */
    color: #bbbbbb;
}

.qinfo {
    text-decoration: none;
    color: #0facf3;
    margin-left: 10px;
}

.summary {
    border: 1px solid #c1c1c1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.summarytitle {
    border-bottom: 1px solid #c1c1c1;
    display: block;
    font-size: 24px;
    padding: 15px 10px 15px 20px;
    font-family: 'Exo 2', sans-serif;
}
.cartline {
    margin: 20px 20px 10px 20px;
    padding-bottom: 10px;
    font-size: 18px;
    border-bottom: 1px solid #c1c1c1;
    font-family: 'Exo 2', sans-serif;
}

.noborder {
    border: none;
}
.bolded { font-weight:bold;
}
.labelleft {
    display: inline-block;
 
    width: calc(100% - 70px);
}
.labelright {
    display: inline-block;
    width: 65px;
    text-align: right;
    float: right;
}
.largeicon { font-size:30px; display:block; width:35px; height:35px;
}

.ccard {
    margin: 0px 0px 0px 45px;
}
.ccoupon {
    margin: 0px 0px 0px 0px;
}

.top40 {
    margin-top: 40px;
}
.top210 {
    margin-top: 210px;
} 
.top20 {
    margin-top: 20px;
}
#btnStep3 {
    margin-left: 45px;
}
.cardnumber {
    width: 330px !important;
    background-image: url('/images/cc_card.png');
    background-repeat: no-repeat;
    background-position: 268px 4px;
}
.dinfo { padding:0px 0px 0px 80px;
}
.crdimg { float:left;
}
.crdlast4 {
    float: left;
    padding: 11px 0px 0px 10px;
}
.red {
    font-size: 32px;
    color: #FF0000;
}

.warning {
    display: block;
    border: 1px solid;
    margin: 10px 0px;
    padding: 15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #D8000C;
    background-color: #ffffe0;
    background-image: url('/systemimages/error.png');
    font-family: Helvetica,Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
}

 
.btn {
    padding: 10px 10px 10px 10px;
    background-color: #29b768;
    color: #FFF;
    border: 1px solid #29b768;
    cursor: pointer;
    font-size: 14px;
}
.validatordiv {
    display:block;
}
input[type="text"].form-control, input[type="password"].form-control, textarea.form-control {
    padding: 6px 5px 5px 7px;
   
}
.formfield {
/*min-width: 290px;*/
width:48%;
float: left;
}
    .formfield span, .validatordiv span, .form-group span {
        font-weight: normal;
        font-size: 12px;
        color: #FF0000;
        display: inline-block;
        width: 100%;
        height: 16px;
    }


        .validatordiv span.vsecond {
            margin-left:5px;
        }
.small span {
    width: 170px;
}
.redborder { border-color:#FF0000 !important;
}
.indented70 {
    display: block;
    margin: 0px 0px 0px 70px;
}
#divpay1 { margin:30px 0px 0px 0px;
}

.viframe {
    background-color: #252c38;
    text-align: center;
    margin: 0px 0px 30px 0px;
    width: 830px; max-width:100%;
}

    .viframe iframe {
        margin: auto;
        width: 100%;
        max-width:680px;
        height: 380px;
    }

.fleft {
    float: left;
}

.right {
    text-align: right;
}

.rightfloat {
    float: right;
}

.center {
    text-align: center;
}

.hidden {
    display: none;
}

@media screen and (max-width: 750px) {
    .formcontainer {
        width: 93%;
        padding: 0px 3% 0px 4%;
    }

    .second {
        margin-left: 10px;
    }

    .labelleft {
        display: inline-block;
        width: calc(100% - 100px);
    }

    .secondm {
        margin-left: 10px;
    }

    .right {
        text-align: right !important;
        margin-bottom: 10px;
    }

    .dinfo {
        padding: 10px 0px 0px 0px;
    }

    .chkspan {
        width: calc(100% - 60px);
        padding: 0px 0px 0px 10px;
    }


    .cardnumber {
        width: 305px !important;
        background-image: url('/assets/images/cc_card.png');
        background-repeat: no-repeat;
        background-position: 249px 4px;
    }

    .txtshort, .form-group input[type="password"].txtshort, .form-group input[type="text"].txtshort, .form-group select.txtshort {
        width: 140px;
    }

    #divpay1 {
        margin: 35px 0px 20px 0px;
    }

    .indented70 {
        display: block;
        margin: 0px 0px 0px 0px;
    }
}

    @media screen and (max-width: 450px) {
        .second {
            margin-left: 0px;
        }

        .formfield {
            width: 98%;
            float: left;
        }

        .logo {
            border-bottom: 4px solid #808080;
            margin: 0px auto 15px auto;
            text-align: center;
            max-width: 400px;
        }

            .logo img {
                max-width: 100%;
            }

        .viframe iframe {
            margin: auto;
            width: 100%;
            height: 200px;
        }

        .inform {
            max-width: 98%;
            padding: 0px 0px 0px 0px;
            margin: auto;
        }

        .smallcenter {
            padding: 0;
        }

        .smallbtn {
            width: 160px;
        }

        .secondm {
            margin-left: 10px;
        }

        .small span {
            width: 145px;
        }
        .formcontainer {
            max-width: 93% !important;
            width: 93% !important;
        }
        .ccard {
            margin: 0px 0px 0px 0px;
        }
    }

    @media screen and (max-width: 320px) {
        .ccard {
            margin: 0px 0px 0px 0px;
        }
    }