/*AutoPay css file*/



/*////////////////////Overall////////////////////*/
:root{
    --main: #000000;
    --secondary: #706e6f;
    --white: #ffffff;
    --green: #0b8e36;
    --grey: #9E9E9E;
    --red: #e40613;
    --orange: #f9b234;
    --blue: #536DFE;
    --yellow: #feed01;
    --elements-width: 85vw;
}

.grey{
    background: var(--grey);
}

.white{
    background: var(--white);
}

.red{
    background: var(--red);
}

.green{
    background: var(--green);
}

.orange{
    background: var(--orange);
}

.yellow{
    background: var(--yellow);
}

.blue{
    background: var(--blue);
}



/*////////////////////index_body.html////////////////////*/

.ap_body{
    background: var(--main);
    position:absolute;
}



/*////////////////////index_body_top.html////////////////////*/

.ap_index_body_top{
    width:100%;
    height:5vh;
    display:flex;
}

.ap_index_body_top>div{
    width:50%;
    height:100%;
    box-sizing: border-box;
}



/*////////////////////index_body_center.html////////////////////*/

.ap_index_body_center{
    width:100%;
    height:100%;
    position: fixed;
}



/*////////////////////wc_pay.html////////////////////*/

.wc_pay{
    width:100%; height:100%; text-align:center;
}

.reduced_width{
    width:85vw; margin-left:auto; margin-right:auto; display:flex; flex-direction:column;
}

.reduced_height{
    height:91vh;
}

.centered{
     margin-left:auto; margin-right:auto;
}

.full_size{
    width:100%; height:100%;
}

.full_size_big{
    width: 100%;
    height: 204%;
}

.column_flex{
    display:flex; flex-direction:column;
}

.content_box{
    width:90%;
}

.content_title{
    color:white; font-size:3vh; padding-top: .6vh;
}



/*////////////////////payment_informations.html////////////////////*/

.payment_informations{
    color:white; height:12vh;
}

.payment_informations_h1{
    font-size: 3.4vh; padding-top: 1vh;
}

.payment_informations_h2{
    font-size: 6.5vh;
    margin-top: -1.5vh;
}



/*////////////////////cash_informations.html////////////////////*/

.cash_informations{
    margin-top:2vh; height:33.6vh;
}

.cash_content_box{
    height: 11.8vh;
}

.cash_content_box>div:nth-child(1){
    font-size:2.65vh; margin-top: 0.5vh;
}

.cash_content_box>div:nth-child(2){
    font-size:5.5vh; margin-top: -1.5vh;
}



/*////////////////////paypass_option.html////////////////////*/

.paypass_option{
    margin-top:2vh; height:26vh;
}

/* 1280x1024 felbontás esetén nagyobban írjuk ki a szövegeket */
.paypass_option_infos > div:first-child {
    font-size: 5.5vh;
}

.paypass_option_infos > div:nth-child(2) {
    font-size: 4.5vh;
    margin-top: -2vh;
}

.paypass_option_infos>img{
    height: 6vh;
    margin-top: -1vh;
}

.paypass_monera_select_btn {
    border: 2px solid black;
    border-radius: 20px;
    margin-top: -4vh;
    margin-bottom: 3vh;
    box-shadow: 3px 4px 10px 0px #000000;
}

/* Tablet esetén az eredeti méretben írjuk ki */
@media screen and (max-width: 900px) {
    .paypass_option_infos > div:first-child {
        margin-top: .6vh;
        font-size: 2.5vh;
    }

    .paypass_option_infos > div:nth-child(2) {
        margin-top: .6vh;
        font-size: 2.5vh;
    }

    .paypass_option_infos>img{
        height: 10vh;
        margin-top: 0vh;
    }
}

.payback_error_info{
    margin-top:2vh; height:16vh;
}

/*////////////////////parking_main.html////////////////////*/
.parking_main_info {
    color: white;
    font-size: 4.5vh;
    padding: 2vh 0vh 5vh 0vh;
}

.parking_main_info > div:first-child {
    font-size: 7vh;
    border-bottom: 2px white solid;
    margin-bottom: 2vh;
    padding-bottom: 3vh;
}

@media screen and (max-width: 900px) {
    .parking_main_info > div:first-child {
        font-size: 4.5vh;
    }

    .parking_main_info > div:nth-child(2) {
        font-size: 3.5vh;
    }
}

.parking_main_img {
    animation: bounce 5s infinite;
    display: flex;
    margin-top: .6vh;
    margin-bottom: 5vh;
    height:auto;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}


/*////////////////////parking_paid.html////////////////////*/
.parking_success_info {
    font-size: 6vh;
    padding: 5vh 0 5vh 0;
}

@media screen and (max-width: 900px) {
    .parking_success_info {
        font-size: 4vh;
    }
}


/*////////////////////bill_option.html////////////////////*/

.bill_option{
    margin-top:2vh; height:15.5vh;
}

.bill_content_box{
    margin-top: .6vh; height: 8vh;
}

.bill_option_pipa{
    width:6vh; height:6vh; margin-left: 8.2vw; margin-top: 1vh; float:left;
}

.checkbox_text{
    font-size:2.5vh; text-align:left; margin-left:30vw;
}



/*////////////////////cancel.html////////////////////*/

.abort{
    margin-top:2vh; height:12.7vh; font-size:4.9vh; position: relative; z-index: 1;
}

.abort_body{
    border-radius:2vh; cursor:pointer;
}

.abort_body_content{
    color:white; padding:2vh;
}



/*////////////////////wc_pay_success.html////////////////////*/

.success_box{
    margin-top:2vh; height:28vh; color:white; font-size:3.4vh; display:none;
}

.pass_through_icon{
    height: 16.6vh; float: left; margin-left: 6vw; margin-top: 6vh;
}

.pass_through_icon_big{
    height: 16.6vh;
    float: left;
    margin-left: -1vw;
    margin-top: 6vh;
}

.pass_through_h1{
    padding-top: 2vh; font-size: 5vh; margin-left:35vw;
}

.pass_through_h1_big{
    font-size: 11vh;
    margin-left: 2vw;
}

.pass_through_h2{
    font-size: 4vh; margin-left:35vw;
}

.pass_through_h2_big{
    font-size: 9vh;
    margin-left: 25vw;
}

.success_icons_div{
    height: 16vh;
}

.success_first_icon{
    height: 15.5vh; margin-left: 30px; margin-top: .7vh; float: left;
}

.success_pipa{
     height: 15.5vh; margin-top:.7vh; margin-right: 30px; float: right;
}

.progressbar_base{
    height: 5vh; background: grey; border-radius: 1vh; margin-top: 1vh;
}

.progressbar_center{
    width:0; height: 5vh; background: orange; border-radius: 1vh;
}



/*////////////////////wc_pay_paypass.html////////////////////*/

.paypass_page{
    color:white; font-size:3vh;
}

.paypass_informations{
    margin-top:2.5vh; height:28vh;
}

.paypass_informations>div>div>div{
    padding-top: 6vh;
}

.paypass_img{
    width: 100%; margin-top:2.5vh;
}



/*////////////////////wc_pay_invoicing.html////////////////////*/

.invoicing_title{
    color: white; font-size: 3vh; margin-top: 2vh; height: 8vh; padding: 1.6vh;
}

.invoicing_form{
    width: 100%; text-align:left; color: white; font-size: 2vh;
}

.label{
    margin-top:2vh;
}

.invoice_input{
    font-size: 3vh; width:100%; border-radius:10px; border:solid transparent 1px;
}

.invoicing_button{
    text-align:center; color:white; font-size:2vh; padding:1vh;; border-radius:1vh; cursor:pointer; margin-top:1.5vh; flex-grow:1
}



/*////////////////////keyboard////////////////////*/

.softkeys{
    font-size: 2.7vh !important;
}



/*////////////////////ticket_pieces.html////////////////////*/

.ticket_pieces{
    margin-top: 3.3vh; height: 25vh;
}

.ticket_pieces_infos{
    display: flex; margin-top: 1.4vh; height: 11.6vh; font-size:7vh;
}

.ticket_pieces_infos>div{
    width:30vw;
}



/*////////////////////ticket_informations.html////////////////////*/

.ticket_informations{
    margin-top: 4vh;
}

.ticket_info_content{
    color: white; font-size: 3.2vh;
}

.ticket_info_reset{
    float: right;
    font-size: 2vh;
    margin-top: -6vh;
    background: grey;
    color: black;
    padding: 5px;
    box-shadow: rgb(50 50 50) 8px 8px 15px;
}



/*////////////////////next_to_pay.html////////////////////*/

.next_to_pay{
    margin-top:3.2vh; height:25vh;
}

.next_to_pay_content{
    color: white; font-size: 3.2vh;
}

.next_to_pay_infos{
    margin-top: 1.8vh; font-size: 5vh; height: 7.7vh; box-shadow: rgb(50 50 50) 8px 8px 15px; animation: color-pulsate-black 2s infinite;
}

.next_to_pay_infos_disabled{
    margin-top: 1.8vh; font-size: 5vh; height: 7.7vh; box-shadow: rgb(50 50 50) 8px 8px 15px;
}

.next_to_pay_infos>div{
    height:100%; animation: background-pulsate-orange 2s infinite; opacity: 95%;
}

/*////////////////////further_informations.html////////////////////*/

.further_informations{
    margin-top:5.6vh; height:12.8vh;
}

.further_informations_text{
    color:black; font-size:2.5vh;
}

.further_informations_text_content{
    color:black; font-size:5vh;
}



/*////////////////////service_menu.html////////////////////*/


/*////////////////////coins.html////////////////////*/

.coins{
    color:white;
    position:fixed;
    top:0vh;
}

.coins_title{
    margin-top:20px;
    margin-left:20px;
    text-align:left;
    font-size:3vh;
}

.valuta{
    margin-left:20px;
}

.coin_element{
    width:max-content;;
    margin:1vh;
}

.coin_element>img{
    height:100%;
}


button.user_add_btn {
    margin: 5px;
}

@keyframes background-pulsate-orange {
    0%   { background-color: #f9b234; }
    50%  { background-color: #555; }
    100% { background-color: #f9b234; }
}

@keyframes color-pulsate-black {
    0%   { color: black; }
    50%  { color: #f9b234; }
    100% { color: black; }
}
@keyframes background-pulsate-white {
    0%   { background-color: white; }
    50%  { background-color: #f9b234; }
    100% { background-color: white; }
}

@keyframes hand-pulsate-size {
    0%   { font-size: 4vh; margin-top: 12vh; }
    50%  { font-size: 16vh; margin-top: 0vh; }
    100% { font-size: 4vh; margin-top: 12vh; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-20px);}
}

td {
    border-top: none;
}

/*/////////////// INVOICE LOADER /////////////*/

.loader_invoice {
    position: absolute;
    width: 120px;
    height: 120px;
    margin-left: calc(50% - 145px);
    margin-top: -43vh;
}
.loader_invoice div {
    animation: loader_invoice 1.2s cubic-bezier(0.59, 0.07, 0.55, 0.74) infinite;
    transform-origin: 60px 60px;
}
.loader_invoice div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: black;
    margin: -3px 0 0 -3px;
}
.loader_invoice div:nth-child(1) {
  animation-delay: -0.036s;
}
.loader_invoice div:nth-child(1):after {
  top: 93.75px;
  left: 93.75px;
  opacity:0.1;
}
.loader_invoice div:nth-child(2) {
  animation-delay: -0.072s;
}
.loader_invoice div:nth-child(2):after {
  top: 101.25px;
  left: 84.375px;
  opacity:0.2;
}
.loader_invoice div:nth-child(3) {
  animation-delay: -0.108s;
}
.loader_invoice div:nth-child(3):after {
  top: 106.875px;
  left: 73.125px;
  opacity:0.3;
}
.loader_invoice div:nth-child(4) {
  animation-delay: -0.144s;
}
.loader_invoice div:nth-child(4):after {
  top: 108.75px;
  left: 60px;
  opacity:0.4;
}
.loader_invoice div:nth-child(5) {
  animation-delay: -0.18s;
}
.loader_invoice div:nth-child(5):after {
  top: 106.875px;
  left: 46.875px;
  opacity:0.5;
}
.loader_invoice div:nth-child(6) {
  animation-delay: -0.216s;
}
.loader_invoice div:nth-child(6):after {
  top: 101.25px;
  left: 35.625px;
  opacity:0.6;
}
.loader_invoice div:nth-child(7) {
  animation-delay: -0.252s;
}
.loader_invoice div:nth-child(7):after {
  top: 93.75px;
  left: 26.25px;
  opacity:0.7;
}
.loader_invoice div:nth-child(8) {
  animation-delay: -0.288s;
}
.loader_invoice div:nth-child(8):after {
  top: 84.375px;
  left: 18.75px;
  opacity:0.8;
}
.loader_invoice div:nth-child(9) {
  animation-delay: -0.324s;
}
.loader_invoice div:nth-child(9):after {
  top: 73.125px;
  left: 15px;
  opacity:0.9;
}
@keyframes loader_invoice {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Keyframes */
@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  25% {
    transform: rotateZ(-8deg);
  }
  30% {
    transform: rotateZ(7deg);
  }
  45% {
    transform: rotateZ(-4deg);
  }
  50% {
    transform: rotateZ(2deg);
  }
  65% {
    transform: rotateZ(-1deg);
  }
  70%, 100% {
    transform: rotateZ(0);
  }
}

@keyframes wiggle_invert {
  0%, 7% {
    transform: rotateZ(0);
  }
  25% {
    transform: rotateZ(8deg);
  }
  30% {
    transform: rotateZ(-7deg);
  }
  45% {
    transform: rotateZ(4deg);
  }
  50% {
    transform: rotateZ(-2deg);
  }
  65% {
    transform: rotateZ(1deg);
  }
  70%, 100% {
    transform: rotateZ(0);
  }
}

@keyframes mouse_movement {
  0% {
    left: 48%;
    top: 40%;
    scale: 0;
  }
  5% {
    scale: 1;
  }
  30% {
    left: 43%;
    scale: 1;
  }
  35% {
    scale: 2;
  }
  40% {
    scale: 1;
    left: 43%;
    top: 40%;
  }
  75% {
    left: 80%;
    top: 43%;
    scale: 1;
  }
  80% {
    scale: 2;
  }
  85% {
    scale: 1;
    left: 80%;
  }
  100% {
    scale: 0;
  }
}

.accepted_banknotes{
    margin-top:2vh; height:26vh;
}