﻿.ui-widget-header {
   
    background: #ccc !important;
    border: 1px solid #DDD !important;
    color: #fff;
    font-weight: bold;
}
label{
    width:auto;
}
.form-group {
    display: table !important;
    margin-bottom: 0;
    width: 100% !important;
}
.space {
height:10px;
}
.space-20{
    clear:both;
    height: 20px !important;
    /*margin: 10px !important;*/

}
.createspace
{
    clear:both;
    height:20px;
    /*margin: 10px !important;*/
}
.input{
    height:32px;

}
[hidden],
template {
  display: none !important;
}
 .k-textbox {
                    width: 11.8em;
                }

                .demo-section {
                    width: 800px;
                    padding: 0;
                }

#tickets {
    width: 800px;
    background: url('https://cdn.interpayafrica.com/content/web/validator/tickets.png') transparent no-repeat 30px 50%;
    background-color: #3f51b5;
}
                #tickets form {
                    padding: 30px;
                    margin-left: 150px;
                }
                #tickets h3 {
                    font-weight: normal;
                    font-size: 1.4em;
                    margin: 0;
                    padding: 0 0 20px;
                }

                #tickets ul {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                }
                #tickets li {
                    margin: 5px 0;
                }

                label {
                    display: inline-block;
                    text-align: right;
                    font-weight:bold;
                    padding-right: 10px;
                }

                .required {
                    font-weight: bold;
                }

                .accept, .status {
                    padding-left: 90px;
                }
                .confirm {
                    text-align: right;
                }

                .valid {
                    color: green;
                }

                .invalid {
                    color: red;
                }
                span.k-tooltip {
                    margin-left: 6px;
                }




.openbody {
    font-size: 14px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #555;
    background: #9eaaab;
    padding-bottom: 0px;
}

.openBg {
    background-image: url('https://cdn.interpayafrica.com/Images/merchantpageBG.png');
    width: 100%;
    height: 100%;
    display: block;
    padding-bottom: 80px;
    background-repeat: no-repeat;
    background-position: center;
}

.frmopenmerchantwell {

    margin-bottom: 0px !important;
    margin: 50px 0px;
    background: #f4f7f8;
    box-shadow: 0 0 10px 1px #dbdbdb;
    border-radius:6px;
    padding:40px 20px;

}

#frmOpenMerchant label{margin-top:10px;}

#frmOpenMerchant input {
    background: #fff;
    border: 0px solid #aaa;
    border-radius: 5px;
    /*box-shadow: inset 0 0px 10px rgba(0,0,0,0.05); */ 
    color: #444;
    display: block;
    height: 40px;
    line-height: 24px;
    overflow: hidden;
    padding: 3px 0 0 8px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
    width: 85%;
    box-shadow: 0 0 10px 1px #dbdbdb;
    font-size: 15px;
    margin-bottom: 15px;
}


#frmOpenMerchant select{
    background: #fff;
    border: 0px solid #aaa;
    border-radius: 5px;
    color: #444;
    display: block;
    height: 40px!important;
    line-height: 24px;
    overflow: hidden;
    padding: 3px 0 0 8px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
    width: 85%;
    box-shadow: 0 0 10px 1px #dbdbdb;
    font-size: 15px;
        margin-bottom: 15px;
}

#frmOpenMerchant .chckbox {
    background: #fff;
    border: 0px solid #aaa;
    border-radius: 5px;
    /*box-shadow: inset 0 0px 10px rgba(0,0,0,0.05); */ 
    color: #444;
    display: block;
    height: 50px;
    line-height: 24px;
    overflow: hidden;
    padding: 3px 0 0 8px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
    width: 21%;
    box-shadow: 0 0 10px 1px #dbdbdb;
    font-size: 17px;
    margin-bottom: 15px;
}

@media (min-width:768px) and (max-width:989px){
    #frmOpenMerchant select{width:90% !important}
    #frmOpenMerchant input{width:90% !important}
    #frmOpenMerchant textarea{width:90% !important}
}

@media (min-width:320px) and (max-width:767px){
    #frmOpenMerchant select{width:100% !important}
    #frmOpenMerchant input{width:100% !important}
    #frmOpenMerchant textarea{width:100% !important}
}


#frmOpenMerchant textarea{
    background: #fff;
    border: 0px solid #aaa;
    border-radius: 5px;
    color: #444;
    display: block;
    height: 50px;
    line-height: 24px;
    overflow: hidden;
    padding: 3px 0 0 8px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
    width: 85%;
    box-shadow: 0 0 10px 1px #dbdbdb;
    font-size: 17px;

}

#frmDataBank input{
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #444;
    display: block;
    height: 34px;
    line-height: 24px;
    overflow: hidden;
    padding: 3px 0 0 8px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
    width:40%;
}

#frmDataBank select{
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #444;
    display: block;
    height: 34px;
    line-height: 24px;
    overflow: hidden;
    padding: 3px 0 0 8px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
    width:40%;
}

@media (min-width:768px) and (max-width:989px){
    #frmDataBank select{width:90% !important}
    #frmDataBank input{width:90% !important}
    #frmDataBank textarea{width:90% !important}
}

@media (min-width:320px) and (max-width:767px){
    #frmDataBank select{width:100% !important}
    #frmDataBank input{width:100% !important}
    #frmDataBank textarea{width:100% !important}
}


#frmDataBank textarea{
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #444;
    display: block;
    height: 100px;
    line-height: 24px;
    overflow: hidden;
    padding: 3px 0 0 8px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
    width:40%;

}


#frmOpenMerchant   .intl-tel-input input
{
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
    /*margin-bottom: 0 !important;*/
    padding-right: 36px;
    margin-right: 0; 

}

#frmOpenMerchant .flag-container {
    position: absolute;
    top: 1px;
    bottom: 0;
    right: 0;
    padding: 1px;
    height: 30px;
  }

#frmBlyr .intl-tel-input .selected-flag {
   
    /*width: 36px;*/
    height: 20%!important;
}
#frmOAA .iti-flag {
    top:0%!important;
}
#frmOAA .iti-arrow 
{
     margin-top: 0px ! important; 
}

#frmDataBank .intl-tel-input .selected-flag 
{
    height:15%!important;
}

 .frmopenmerchantwell .flag-container {
     top: -2px !important;
}

.CustomError {
    color:red!important;
    padding-left:5px;
}  

.textleft{text-align:left;}
.textright{text-align:right;}

@media (min-width:320px) and (max-width:990px){
    .textleft{text-align:center !important;}
/*.textright{text-align:center !important;}*/
}

@media (min-width:320px) and (max-width:767px) {
    .text-right {
        text-align: left !important;
        float: left;
    }
    .redspan {
        float: left;
    }
    .nm{
        margin-left: -5% !important
    }
}
