:root {
  --cardbgact:#06c;
  --cardbgnormal: #f0f0f8;
  --bodybg:#f8f8f8;
  --bordercol: lightgrey;
  --menubordercol:var(--bordercol);
  --menubgcol:var(--bodybg);
  --menuactivecol:#FFFFFF;
}

html {
  font-family:Arial, Helvetica, sans-serif;
  font-size: 12px;
}
body {
  align-items: center;
  background-color: var(--bodydb);
  display: flex;
  justify-content: center;
  margin: 0;
  user-select: none;
}
.phone-screen {
  align-items: center;
  background-color: var(--bodydb);
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  /* perspective: 460px; */
  position: relative;
}

.headBlock {
  height: 10rem;
  width: 100%;
  background-color: darkblue;
}
.headLogo {
  width: 29%;
  color: #e0e0e0;   
  font-size: 3rem;
  font-weight: 900;
  padding-top: 0.5rem;
  padding-left: 2rem;
}
.headTitle {
  color: #e0e0e0;
  font-size: 1.5rem; 
  padding-top: 0.5rem;
  padding-left: 2rem;
}
.contentBlock { 
  overflow: hidden;
  width: 100%;
/*
  transform-origin: 100% 0;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
*/  
}
.imgContentBox {
  border: 1px solid var(--bordercol);
  border-radius: 1rem;
  position: relative;
}
.topRightIcon {
  position:absolute;
  z-index:1;
  width:4rem;
  right:4rem;
  translate: 50% 50%;
}

.contentBlockBox,
.form-feladas {
  background-color: var(--cardbgnormal);
  border: 1px solid var(--bordercol);
  border-radius: 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  margin-right: 1rem;  
}
.contentBlockRowHiden {
  display: none;
}
.contentBlockFirstRow {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}
.contentBlockRow {
  /* border-top: 1px solid var(--bordercol); */
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}
.contentBlockField {
  display:inline-block;
  padding-right: 2rem;
}
.contentBlockField05PadRight{
  display:inline-block;
  padding-right: 0.5rem;
}
.contentBlockField1PadRight{
  display:inline-block;
  padding-right: 1rem;
}
.fieldCaption {
  font-size: 1rem;
  color: #202020;
  padding-left: 1rem;
  padding-bottom: 0.2rem;
}
.fieldValue,
.fieldValue2 {
  font-size: 1.5rem;
  color: #000020;
  padding-left: 1rem;
}

/*
.active .contentBlock {
  transform: rotateX(-5deg);
}
*/

.image {
  position: relative;
  width: 100%;
}
.button-menu {
  position: absolute;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.button-menu1 {
  top: 2rem;
  fill: none;
  height: 6rem;
  right: 2rem;
  -webkit-tap-highlight-color: transparent;
  width: 6rem;
}
.bg {
  fill: #a0a0a0;
}
.button-menu1:active .bg {
  fill: #707070;
}
.active .button-menu {
  transform: translateY(-10rem);
}

.menurow {
    display: contents;
}
.menu {
  background-color: var(--menubgcol);;
  display: flex;
  flex-wrap: wrap;
  height: 10rem;
  position: absolute;
  transform: translateY(-20rem);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
.option20 {
  align-items: center;
  border: 1px solid var(--menubordercol);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  width: 20%;
}

.option25 {
    align-items: center;
    border: 1px solid var(--menubordercol);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    width: 25%;
  }
  

.option:active::after {
  background-color: var(--menuactivecol);
  content: " ";
  opacity: 0.25;
  height: 100%;
  position: absolute;
  width: 100%;
}

.active .menu {
  transform: translateY(0);
}

.menutxt {
  font-family:Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 600;
}


.fieldCaption-img img {
height: 25px;
width: 25px;
padding-right: 5px;
}

.fieldCaption-img {
  display: inline;
}

.contentBlockRow .button {
  margin: 0 auto 0 auto;
}

.button {
  padding: 2rem 3rem;
  background: cornsilk;
  text-transform: uppercase;
  font-weight: bold;
  border: none;
  font-size: larger;
  color:#202020;
  line-height: 1;
  margin: 1rem 0 1.5rem 0;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
  border-radius: 1rem;
}

.button:hover {
  background: var(--cardbgact);
}

.contentBlockRow-button {
  text-align: center;
}
.contentBlockRow-button .button {
  display: inline-block;
}


                                /*Innentől a feladás form css*/




.text_input_mid,
.comments, 
.form-feladas input[type="tel"],
.form-feladas input[type="text"],
.form-feladas input[type="password"],
.form-feladas input[type="date"],
.form-feladas input[type="time"],
.service_provider, .passenger_count,
.luggage_count, .luggage_size {
  height: 3.5rem;
  border-radius: 10px;
  border: 0.25px solid var(--bordercol);
  width: 9.5rem;
  font-size: 1.5rem;
  padding-inline-start: 1rem;
  background-color: #ffffff;
}

.form-feladas textarea {
  height: 15vh;
  width: 82vw;
  border-radius: 10px;
}

.form-feladas ::placeholder {
  font-size: 1.5rem;
  /* padding-left: 1rem; */ 
}

.luggage_count-txt {
margin-left: -10px;
}

.BorderTop0_25 {
  border-top: 1px solid var(--bordercol);
}

.PaddingBottom3 {
  padding-bottom: 3rem;
}

.PaddingTop2 {
  padding-top: 2rem;
}

.PaddingTop1 {
  padding-top: 1rem;
}

.PaddingRight0 {
  padding-right: 0;
}

.PaddingRight0_5 {
  padding-right: 0.5rem;
}

.PaddingLeft1 {
  padding-left: 1rem;
}

.PaddingLeft1_5 {
  padding-left: 1.5rem;
}

.width50vW{
  width:50vw !important;
}

.width40vW{
  width:40vw !important;
}

.width25vW{
  width:25vw !important;
}


.widthMAXvw {
  width:82vw !important;
}

.luggage_count select option {
  margin-bottom: 1rem;
}

.passenger_count,
.luggage_count,
.luggage_size {
  height: 40px;
  width: 50px;
  border-radius: 10px;
  text-align: center;
}

.form-feladas option {
  font-size: 1.5rem;
}

.service_provider,
.arrival_date,
.luggage_count,
.passenger_count,
.luggage_size {
  font-size: 1.5rem;
  color: #6a6a6a;
}

.refid {
  font-size: 1rem;
}
  /*Innen lefelé a login oldal*/

.text_input_mid {
  background-color: #f8f8f8;
}

.login_field {
  text-align: center;
}

.login-txt {
display: block;

}

.login-field-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.login_button {
  padding: 2rem 2rem;
  background: cornsilk;
  text-transform: uppercase;
  font-weight: bold;
  font-size: larger;
  color:#202020;
  border: none;
  line-height: 1;
  margin: 2rem 0 2rem 0rem;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
  border-radius: 1rem;
}

.noshow_button {
  padding: 1rem 1rem;
  background: #202020;
  text-transform: uppercase;
  font-weight: bold;
  font-size: larger;
  color:cornsilk;
  border: none;
  line-height: 1;
  margin: 0rem 0 0rem 0rem;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
  border-radius: 1rem;
}

.filter_button {
  padding: 1rem 1rem;
  background: #404040;
  /* text-transform: uppercase; */
  font-weight: bold;
  /* font-size: larger; */
  color:cornsilk;
  border: none;
  line-height: 1;
  margin: 0.2rem 0 0.2rem 0rem;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
  border-radius: 1rem;
}

input[type=file]::file-selector-button {
  padding: 1rem 1rem;
  background: #2020f0;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.5rem;
  color:cornsilk;
  border: none;
  line-height: 1;
  margin: 0.5rem 1rem 0.5rem 0rem;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
  border-radius: 1rem;
}

.upload_button {
  padding: 1rem 1rem;
  background: #209020;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.5rem;
  color:cornsilk;
  border: none;
  line-height: 1;
  margin: 0.5rem 1rem 0.5rem 0rem;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
  border-radius: 1rem;
}

                                    /* Idáig login oldal*/