.overlay {
    position: fixed;
    display: flex;
    justify-content: center;
    z-index: 3;
    top:0;
    width: 100vw;
    display: none;
}

.dark_over { 
    height: 100vh;
    width: 100vw;
    position:absolute;
    top:0;
    z-index: -1;
    background-color: black;
    opacity: 40%;
}

.popup {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    width:50vw;
    height: 70vh;
    min-height: 650px;
    overflow-y: scroll;

    background-color:white;
    opacity: 100% !important;
    gap:2vh;

    /* padding-top: 10px; */
    border-radius: 10px;
}

.progress-bar {
    margin-top: 3%;
    margin-bottom: 3%;
    height:2vh;
    min-height: 15px;
    width:70%;
    border: 2px solid black;
    border-radius: 20px;
    margin-left:15%

}
.spaced {
  margin-left: 3%;
}
.progress {
    width:50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color:black;
    animation:progress ease-out .56s;
    text-align:right;
    color:white;
    margin: none !important;
    font-family:Appl_font;
    font-size:1.3vh;
    border-radius: 20px 0px 0px 20px ;
   
}

.popUp_x {
  position: relative;
  width: 10%;
  min-width: 10%;
  padding-top: 2%;
  padding-bottom: 2%;
  background-color: transparent;
  left: 0px;
  margin-left: 7.5%;
  margin-right: auto;
}

.popUp_x:hover {
  cursor: pointer;
}

.popUp_x span {
  display: block;
  position:absolute;
  width: 50%;
  min-width: 50%;
  height: 4px;
  min-height: 4px;
  max-height: 4px;

  background-color: black;
}

.popUp_x span:first-child {
  transform: rotate(45deg);
  border-radius: 3px;
  top: 50%;
  left: 2%;
}

.popUp_x span:last-child {
  transform: rotate(-45deg);
  border-radius: 3px;
  top: 48%;
  left: 2%;
}

.progress p {
    margin-right: 2%;
    font-size: 1.5vh;
    font-size: max(8px, min(1.5vh, 150px)) !important; /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(8px, 1.5vh, 150px) !important;
}
.popup h1 {
    width:100%;
    text-align:center;
    font-size:6.5vh;
    font-size: max(35px, min(6.5vh, 150px)) !important; /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(35px, 6.5vh, 150px) !important;

    /* margin-bottom:5%;
    margin-top:5%; */
    font-family:Appl_font_bold;
}
.vertical-align {
    width:100%;
    display: flex;
    align-items:center;
    justify-content:space-between;
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: 0px;
    align-self: flex-start;
    background-color: rgba(255, 255, 255, 0.69);
    padding-top: 0;
    filter: invert(1);
}
.popup form {
    width:80%;
    display:flex;
    flex-wrap:wrap;
    gap:2vh;
    margin-bottom: 2%;
}
.input-group {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    /* margin-bottom:5%; */
}
.popup .h2t {
  width: 80%;
  text-align: left;
  font-family: Appl_font;
  font-size: clamp(14px, 1.8vh, 150px) !important;
  margin-bottom: 2vh;
}

.input-group label {
    font-family:Appl_font_medium;
    margin-bottom:10px;
    font-size: 2.3vh;
    font-size: max(15px, min(2.3vh, 150px)) !important; /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(15px, 2.3vh, 150px) !important;
}
.input-group input {
    width:100%;
    height:8vh;
    min-height: 45px;
    border:solid black 3px;
    border-radius:5px;
    font-size:1.6vh;
    font-size: max(10px, min(1.6vh, 150px)) !important; /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(10px, 1.6vh, 150px) !important;
}

.input-group select {
    width:100%;
    height:8vh;
    font-size:1.6vh;
    font-size: max(10px, min(1.6vh, 150px)) !important; /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(10px, 1.6vh, 150px) !important;
    min-height: 45px;
    border:solid 3px black;
    border-radius:5px;
    font-family:Appl_font
}
option {
  font-size:1.6vh;
  font-size: max(10px, min(1.6vh, 15px)) !important; /* Browsers that do not support the "clamp ()" function will take this value. */
  font-size: clamp(10px, 1.6vh, 15px) !important;
}
input::placeholder {
    font-family:Appl_font;
    font-size:1.6vh;
    font-size: max(10px, min(1.6vh, 150px)) !important; /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(10px, 1.6vh, 150px) !important;
}
.half-group {
    width:100%;
    display:flex;
    justify-content:space-between;
}
.checkbox-group {
  width: 100%;
  display: flex;
}
.checkbox {
  font-family: Appl_font;
  margin-left: 2%;
}

.half-group div {
    width:48% !important;
}
.phone {
  width: 100%;
  display: flex;
}
.phone select {
  width: 25%;
  height:auto !important;
  background-color: #e1e0e0;
  border-radius: 5px 0 0 5px;
  border-right: 0;
  min-height: 53px;
  font-size:1.6vh;
  font-size: max(10px, min(1.6vh, 150px)) !important; /* Browsers that do not support the "clamp ()" function will take this value. */
  font-size: clamp(10px, 1.6vh, 150px) !important;
  text-align: center;
}
.phone select option {
  font-size:1.6vh;
  font-size: max(10px, min(1.6vh, 15px)) !important; /* Browsers that do not support the "clamp ()" function will take this value. */
  font-size: clamp(10px, 1.6vh, 15px) !important;
}
.phone input {
  width: 75%;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  padding-left: 2%;
}
.pop-footer {
    width: 100%;
    height: 10vh;
    min-height: 60px;
    background-color:#2768C1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:White;
    margin-top: auto;
    margin-top: auto;
    align-self: flex-end;
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    bottom: 0px;
}
.text-content {
    height:50%;
    display:flex;
    gap:0 auto;
    flex-wrap:wrap;
    margin-left:2%;
}
.text-content h1 {
    font-size:2vh !important;
    font-size: max(15px, min(2vh, 150px)) !important; /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(15px, 2vh, 150px) !important;
    width: 100%;
    margin-top:0 !important;
    text-align:left;
}
.text-content h2 {
  font-size:2vh !important;
  font-size: max(15px, min(2vh, 150px)) !important; /* Browsers that do not support the "clamp ()" function will take this value. */
  font-size: clamp(15px, 2vh, 150px) !important;
  font-family:Appl_font_medium;
}
.pop-footer button {
    padding: 1% 8%;
    background-color: #1B4D8F;
    color: white;
    border: none;
    transition: .2s ease;
    font-family: Appl_font;
    margin-right:2%;
    min-height: 30px;
}
.pop-footer button:hover {
    background-color: #102F5A;
    cursor: pointer; 
}
.thank-you {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    opacity:0%;
    display:none;
}
.containter {
    display: flex;
    width:100%;
    justify-content:center;
    flex-wrap:wrap; 
}
.container h1 {
    font-size:8vh;
    width:100%;
    text-align:center;
}
.container h2 {
    font-size: 6vh;
    width:100%;
    text-align:center;
    font-family:Appl_font
}
.left-corner {
    width:auto;
    height:inherit;
    display:flex;
    align-items:center;
}
.left-corner h1 {
    margin-bottom:1%;
}
.left-corner img {
    margin-left:5%;
    margin-right:5%;
    min-height:30px;
}


/* Anim */

@keyframes progress {
  from {width:0%}
  to {width:50%}  
}


/* Resizing */

@media only screen and (max-width:1050px) {
    .pop-footer button {
      padding:1.5% 8%
    }
    #popup {
      width:70vw !important;
    }
}
@media screen and (max-width:650px) {
  .phone select {
    width: 35%;
  }
  .phone input {
    width: 75%;
  }
  #popup {
    width: 90vw !important;
  }
  .pop-footer {
    height: 12vh;
  }
}

@media screen and (max-width:600px) {
    .popup h1 {
      font-size:5.5vh
    }
    .pop-footer button {
      width: 35vw;
      padding: 0;
      height: 4vh;
    }
  
    .popUp_x {
      width:3%;
    }
    .progress-bar {
      margin-left:14.5%
    }
}

@media screen and (max-width:550px) {
    .input-group {
      margin-bottom:12%;
    }
    .input-group label {
      font-size:1.5vh;
    }
    .input-group input,.input-group select {
      height:6vh;
    }

    .popup form, .popup .h2t {
      width:90%;
    }
    .text-content h2, .text-content h1 {
      font-size:1.5vh;
    }
    .pop-footer button {
      padding: none;
      width:40vw
    }
    .popup h1 {
      font-size:4.5vh;
    }
}

@media screen and (max-width:350px) {
    .pop-footer button {
      width:48vw
    }
    .input-group label {
      font-size:1.29vh;  
    }
    .pop-footer img {
      height: 30px;
      width: auto;
    }
    .pop-footer {
      height: 15vh;
    }
}

@media screen and (max-width:300px) {
  .input-group label {
    zoom:1;
  }
  .popup {
    height: 300px;
    overflow-y: scroll;
  }
  .input-group select {
    height: 24px;
    font-size: 10px;
  }
  .pop-footer button {
    height: fit-content;
  }
  #booking-title {
    font-size: 32px !important;
    margin-bottom: 32px;
  }
  .pop-footer h2 {
    font-size: 1.5vh !important;
    font-size: clamp(10px,1.5vh,100px) !important;
    font-size: max(10px,min(1.5vh,100px)) !important;

  }
}
@media screen and (max-height:700px) {
  .popup {
    min-height: 450px;
  }
}
@media screen and (max-height:500px) {
  .popup {
    min-height: 300px;
    height: 98vh;
  }
}