/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    width:100%;
    height:100%;
}




/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
    /*font-family: 'Heebo';*/
    width:100%;
    height:100%;
    padding:0px;
    margin:0px 0px 0px 0px;
    direction:rtl;
    font-family: Arimo, sans-serif;

}

input, textarea, button {
    -webkit-appearance:none;
    outline: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-family: Arimo, sans-serif;
    color: lightgrey;
}
::-moz-placeholder { /* Firefox 19+ */
    font-family: Arimo, sans-serif;
    color: lightgrey;
}
:-ms-input-placeholder { /* IE 10+ */
    font-family: Arimo, sans-serif;
    color: lightgrey;
}
:-moz-placeholder { /* Firefox 18- */
    font-family: Arimo, sans-serif;
    color: lightgrey;
}



input:focus {
    outline: none !important;
    border:1px solid #3190e7;
    box-shadow: 0 0 10px #719ECE;
}

select {
  /*  background: url(/src/img/down-arr.png) no-repeat left;*/
    background: url(https://app.upay.co.il/BANKRESOURCES/UPAY/YPAY/images/down-arr.png) white no-repeat 2% !important; /* !important used for overriding all other customisations */
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
   /* background-position-x: 244px;*/

}

a {
    text-decoration:none;
    outline: none;
    text-decoration:none;
    color:#48c3ed;
}

a:hover {
    text-decoration:underline;
    outline: none;
}

img{
    border:0px;
}

p {
    margin: 0;
}

h3{
    font-size: 26px;
    font-weight: 800;
    margin-top:  0;
}

h4{
    font-size: 18px;
    font-weight: 800;
    margin-top:  0;
    margin-bottom:  15px;
}

.dir{
    float:right;
}

.dir-op{
    float: left !important;
}

.full-div{
    width:100%;
    float:right;
}

.text-left{
    text-align: left;
}

.half-div{
    width:50%;
    float:right;
}

.third-div{
    width:33.333333%;
    float: left;
}

.qrtr-div{
    width: 12%;
    float:right;
}

.three-qrtr-div{
    width: 88%;
    float:right;
    margin-bottom: 38px;
}

.pad-sides-10{
    padding:10px 10px 10px 10px ;
    float:right;
}

.base{
    font-size: 15px;
    background-color:#f3f4f6;
    color: #132336;
}

.c-white{
    color: white;
}

.t-b{
    font-weight: bold;
}

.bg-white{
    background-color: white;
}

.bg-light-green{
    background-color: #86cebc;
}

.bg-blue{
    background-color: #3190e7;
}

.border-grey{
    border: 1px solid #e6eaee;
}



/* ==========================================================================
   Form classes
   ========================================================================== */
.currency {
    border: 1px solid #e6eaee;
    font-size: 15px;
    font-family: 'Arimo';
    padding:  12px;
    width:  100%;
    margin-bottom: 20px;
}

.currency-symbol {
    position:absolute;
    padding: 2px 5px;
}

.upay-inner-form-wrapper {
    padding-top: 5%;
    max-width: 1350px;
    margin: auto;
    float:  none;
    min-height: 750px;
}


.form-bg {
    width: 85%;
    padding-right: 10%;
    padding-top: 2%;
    float:  right;
}

.form-bg-left {
    width: 85%;
    padding-right: 5%;
    padding-left:  5%;
    padding-top: 5%;
    float:  right;
}

form-recipient-inf-txt-left{
    margin-bottom: 0%;
    width: 85%;
    float:  right;
}

.form-recipient-section,
.form-recipient-inf-txt {
    margin-bottom: 2%;
    width: 90%;
    float:  right;
}

.form-recipient-inf-section {
    width: 85%;
    padding-right: 5%;
    padding-top: 2%;
    padding-left:  5%;
    float: left;
    padding-bottom: 3%;
    border-bottom: 0;
}

.form-c-card-inf {
    width: 100%;
    display:table;
}

.table-cell1 {display:table-header-group;    float: none;}
.table-cell2 {display:table-footer-group;    float: none;}


@-moz-document url-prefix(){
    .table-cell1{display:table-row-group; float: initial;}
    .table-cell2{display:table-row-group; float: initial;}
    .txt-c-card-inf.txt-c-card-expire{min-width: 30px; line-height: 60%;margin: 12px 8px 20px 9px;}
    .input-field.input-c-card-inf{margin-top: 12px}
    .txt-c-card-inf{margin-top: 12px}
}

.input-field {
    border: 1px solid #e6eaee;
    font-size: 15px;
    font-family: 'Arimo';
    padding:  12px;
    width:  100%;
    margin-bottom: 20px;
}

.input-field
.input-c-card-inf{
    border: 1px solid #e6eaee;
    font-size: 15px;
    padding:  12px;
    width:  100%;
    margin-bottom: 20px;
}

.input-field.input-c-card-inf{
    width: 100px;
    display: inline-block;
    text-align: center;
    float: left;
}



.general-field-select{
    border: 1px solid #a9a9a9;
    width: 297px;
    padding-right: 5%;
    height: 47px;
    width: 60%;
    font-size: 16px;
    font-family: 'Arimo';
    font-weight: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
   /* background-image: none;*/
    float: left;

}


.general-field-select.expirymonth{width: 20%;}
.general-field-select.expiryyear{width:30%;margin-left:2%;}

.payment-field-select{
    border: 1px solid #a9a9a9;
    float: left;
    padding-right: 5%;
    height: 47px;
    width: 70%;
    font-size: 16px;
    font-family: 'Arimo';
    font-weight: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*background-image: none;*/

}
.txt-c-card-inf {
    min-width: 30px;
    display: inline-block;
    line-height:  290%;
    margin: 0 8px 20px 9px;
}

.txt-c-payment-inf {
    width: 20%;
    float: right;
    display: inline-block;
    line-height:  290%;
    margin: 0 1% 20px 2%;
}

.recipient-inf-section-underline {
    background: white;
    height: 1px;
    margin: 4% 0;
    width: 100%;
}

.recipient-inf-price {
    font-size: 20px;
    width: 100%;
    float: right;
}

.sbmt-blue-btn {
    border-radius: 25px;
    width: auto;
    padding: 2% 7%;
    cursor: pointer;
}

.three-qrtr-div>p {
    max-width: 75%;
    line-height: 150%;
}

.form-recipient-section p {
    padding: 12px 0;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Media Queries for Laptop Responsive Design.
   ========================================================================== */

@media (max-width:1685px){
    .txt-c-card-inf {
        min-width: auto;
        margin: 0 8px 0 9px;
        margin-bottom: 20px;
    }
}
@media (max-width:1460px){
    .input-field
    .input-c-card-inf {
        width: 90px;
    }
}

@media (max-width:1280px){
    .input-field
    .input-c-card-inf {
        width: 80px;
        padding: 10px 0;
    }
    .upay-inner-form-wrapper {
        max-width: 1200px;
    }

    .form-bg {}/*min-height: 565px;}*/
}

/* ==========================================================================
   Media Queries for Mobile Responsive Design.
   ========================================================================== */
@media (max-width:768px){
    .half-div { width: 100%; margin-bottom: 10%;}
    .form-input-wrapper.form-c-card-inf .half-div {width: 50%;}
    .form-recipient-inf-section, .form-bg-left,.form-bg{float: right!important;width: 90%;}
    .form-bg {min-height: auto;}
    .form-recipient-inf-txt-left{margin-bottom: 0;}
    .three-qrtr-div {width: 75%;}
    .qrtr-div { width: 25%;}
    .three-qrtr-div>p {max-width: 100%;}
    .form-c-card-inf .half-div {width: 50%;}

}
@media (max-width:420px){
    .form-input-wrapper.form-c-card-inf .half-div {width: 100%;}
    .half-div { margin-bottom: 5%;}
    .txt-c-card-inf {float: right;text-align: right;}
    .input-field.input-c-card-inf { width: 80px;}
    .txt-c-card-inf.txt-c-card-expire {text-align:  right; float: right}
    .input-field {margin-bottom: 4%;}
    .sbmt-blue-btn { padding: 3.5% 12%;}
    .three-qrtr-div {margin-bottom: 4%;}

}