body{
  font-family: helvetica, sans-serif;
  font-size:10px;
  background-position:center center;
  background-repeat: no-repeat;
  background-size:100% 100%;
  background:#325364; 
  background-image: url("../images/nayax_au_admin_background.png");
}

.au-main-container{
  max-width:660px;
  min-width: 480px;
  margin: 0 auto;
  padding:0;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
}

.nayax-logo{
  background-image:url("../images/nayax_au_admin_logo.png");
  background-size:165px auto;
  background-position:center center;
  background-repeat: no-repeat;
  width:200px;
  height:80px;
  padding:75px 0;
  box-sizing: border-box;
  margin: 0 auto;
  float: none;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
}

.au-form-main-container{
  background-color:#ffffff;
  width:100%;
  min-height:400px;
  border-radius:5px;
  overflow-x:hidden;


}
.au-form-box-top-bar{
  background-color:#6984a9;
  width:100%;
  height:75px;
  font-size:3em;
  font-weight:bold;
  color:#ffffff;
  line-height:75px;
  text-align:center;
}

.au-form-box-inner-container{
  text-align:center;
}

.au-form-box-inner-container h1{
  color:#0c334f;
  font-size:4em;
  font-weight:bold;
  margin:0;
  padding:36px 0 72px;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;

}

.au-form-submit-btn{
  min-width:330px;
  max-width:420px;
  height:75px;
  background-color:#ffc84a;
  border-radius:5px;
  position:relative;
  top:-38px;
  transition: 0.2s all ease-in;

  font-size:3em;
  font-weight:bold;
  color:#ffffff;
}
.au-form-submit-btn:hover, .au-form-submit-btn:focus, .au-form-submit-btn:active,
.payment-submit-btn:hover, .payment-submit-btn:focus, .payment-submit-btn:active {
  background-color:#e6ab23;
  color:#ffffff;
}

.payment-submit-btn{
  top:auto;
  position:static;
  max-width:100%;
  width:100%;
  margin-top:30px;
}

.au-form-box-products{
  display:flex;
  flex-direction: row;
  justify-content:space-between;
  min-width:360px;
  max-width:495px;
  margin:0 auto;
  padding: 15px 0 30px;
  float:none;
	
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;

	
}

.au-form-box-product{
  width:300px;
  height:309px;
  background-repeat:no-repeat;
  background-position: center center;
  background-size:100% auto;
}

.vpos{
  background-image:url("../images/nayax_au_admin_vpos.png");
    
    top: 0; bottom:0; left: 0; right:0;
    margin: auto;  
}
.au-form-cards{
  background-image:url("../images/nayax_au_admin_cards.png");
  background-size:100% auto;
  width:270px;
  height:81px;
  background-position:center center;
  background-repeat: no-repeat;
  margin: 36px auto 0px;
  float:none;
  box-sizing:border-box;
}

form.au-r{
    margin: 24px auto 54px;
}

form .au-label-n-r{
  color:#b2b2b2;
  font-size:2em;
  font-weight:lighter;
  text-align:left;
  padding-left:9px;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
}

/* here I will try to create a custom checkbox */
form.au-r input[type="checkbox"]:checked,
form.au-r input[type="checkbox"]:not(:checked){
  position:absolute;
  left:-9999px;
}

form.au-r input[type="checkbox"]:checked + label,
form.au-r input[type="checkbox"]:not(:checked) + label{
  position:relative;
  padding-left:30px;
  cursor: pointer;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
}

form.au-r input[type="checkbox"]:checked + label:before,
form.au-r input[type="checkbox"]:not(:checked) + label:before{
  content: '';
  position:absolute;
  left:0;
  top:3px;
  width:21px;
  height:21px;
  background-color:#efefef;
  border-radius:5px;
}

form.au-r input[type="checkbox"]:checked + label:after,
form.au-r input[type="checkbox"]:not(:checked) + label:after{
  content:url("../images/nayax_au_admin_v.png") ;
  position:absolute;
  left:0px;
  top: -15px;
  font-size:1.65em;
  color: #6984A9;
  transition: all .2s;
  z-index:9999;
}

form.au-r input[type="checkbox"]:checked + label:after{
  opacity:1;
  transform:scale(1);
}

form.au-r input[type="checkbox"]:not(:checked) + label:after{
  opacity:0;
  transform:scale(0);
}

form.au-r label:hover:before{
   border: 2px solid #cfcfcf!important;
}

/* end of custom checkbox */

span.error-robot {
    color: #D65B41;
    font-size: 1.5em;
    padding: 0;
    margin: 0;
    font-weight: 400;
}

.visible{
  display: block;
}

.hidden{
  display: none;
}

.au-contact{
  min-width:360px;
  max-width:495px;
  margin: 0 auto;
  padding: 24px 0 60px;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
}

.au-form-icon{
  width:54px;
  height: 54px;
  border-radius: 5px;
  background-color:#efefef;
  background-repeat:no-repeat;
  background-position:center center;
}

.username{
  background-image:url("../images/nayax_au_admin_username_icon.png");
  background-size:30px auto;
}
.card-number{
  background-image:url("../images/nayax_au_admin_cardnumber_icon.png");
  background-size:36px auto;
}
.date{
  background-image:url("../images/nayax_au_admin_date_icon.png");
  background-size:36px auto;
}
.security-num{
  background-image:url("../images/nayax_au_admin_security_icon.png");
  background-size:30px auto;
}
.invoice-number{
  background-image:url("../images/nayax_au_admin_invoice_icon.png");
  background-size:30px auto;
}
.amount{
  background-image:url("../images/nayax_au_admin_amount_icon.png");
  background-size:30px auto;
}

.au-form-input{
  width:100%;
  display:block;
  float: left;
  display: flex;
  justify-content: space-between;
}

form.au-contact input, select{
    margin-left:6px;
    margin-bottom:6px;
    background-color:#efefef;
    border:0px solid #ffffff;
    border-radius: 5px;
    font-size:2em;
    padding:12px;
    color:#7d7d7d;
    height: 54px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
}

form.au-contact input:focus, form.au-contact input:active, select:active, select:focus{
    border:0px solid #ffffff;
}

  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #a5a4a4;
    opacity:1;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: #a5a4a4;
    opacity:1;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: #a5a4a4;
    opacity:1;
  }
  :-moz-placeholder { /* Firefox 18- */
    color: #a5a4a4;
    opacity:1;
  }


form.au-contact input[type="text"]{
  width:100%;
}

select{
  width:50%;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  -moz-appearance: none;
  appearance: none;
  background-image:url("../images/nayax_au_admin_dropdown.png");
  background-size:21px auto;
  background-position:right 12px center;
  background-repeat:no-repeat;
}


.au-form-box-invoice-number{
  font-weight:lighter;
  color:#0c334f;
  text-align:center;
}

.au-form-box-invoice-number h3{
  font-size:2em;
  margin:0;
}

.au-form-box-invoice-number h5{
  margin:0;
  font-size:1.65em;
  padding: 9px 0;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
}

.au-form-invoice-documnet-link{
  background-image:url("../images/nayax_au_admin_document.png");
  background-size: 150px auto;
  width:150px;
  height:165px;
  float: none;
  background-position: center center;
  background-repeat: no-repeat;
  margin: 15px auto 36px;
}

/* decorative stuff */
.au-form-line{
  height:1px;
  width:100%;
  background-color:#cfcfcf;
}

/**********************************************/
/* mobile */

@media screen and (max-width:540px){

  .au-form-box-top-bar {
    font-size: 2.4em;
}

.au-form-box-invoice-number {
    padding: 0 30px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
}

.au-main{
  padding: 0;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
}

.au-contact {
    padding: 24px 30px 60px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
}

}