/*loader*/
.loader {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.no-scroll {
  overflow: hidden;
}
@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader--hidden {
    opacity: 0;
    visibility: hidden;
}
.loader::after {
    content: "";
    width: 200px;
    height: 200px;
    border: 20px solid #EAF0F6;
    border-radius: 50%;
    border-top: 20px solid #8ECDDD;
    animation: spinner 4s linear infinite;
}
#forgot {
   top-margin: 40px;
}

#index_heading {
   font-weight: bold;
   color: white;
}
.verified {
    color: #90EE90;
    font-weight: bold;
}
.unverified {
    color: #FF0000;
    font-weight: bold;
}
#home {
    font-weight: bold;
    font-size: 2rem;
    z-index: 1;
}


#form {
    width: 50rem;
    justify-content: center;
}

.responsive-width-field {
    width: 100%;
}

#recaptcha_img{
    width: 280px;
    justify-content: center;
}
#ancillaries_proceed {
    margin-top: 2em;
}
#payment_amount {
    color: #4477CE;
    margin-right: 30px;
}
.red_flashes {
    text-align: center;
    justify-content: center;
    color: red;
    font-size: 1 rem;
}
#green_flashes {
    text-align: center;
    justify-content: center;
    color: #90EE90;
    font-size: 1.5rem;
}
.services {
    margin-bottom: 2rem;
}
.bookable_container:hover {
    background-color: 	rgb(192,192,192);
}

.search_quote {
    border: 1px dotted blue;
    margin-bottom: 2rem;
    background-color: rgb(192,192,192);
}

.flights_search_quote_table {
    border-collapse: separate;
    border-spacing: 1.5rem;
    @media screen and (max-width: 600px) {
       font-size: 0.7em;
       border-spacing: 1.5rem;
    }
}


.search_quote_table {
    border-collapse: separate;
    border-spacing: 0.1rem;
}

.search_quote_name {
    font-family: Roboto Slab 400;
    color: blue;
}

.search_quote_airline_code {
    font-family: Roboto Slab 300;
    font-size: 0.5em;
    color: blue;
}
.search_quote_cabin_class {
    font-family: Roboto Slab 400;
    color: blue;
    margin-left: 20vw;
}
.search_price {
    color: blue;
}
.search_quote_img {
    width: 10%;
    height: 10%;
}
.copyright {
    text-align: center;
}
.ticket_info {
    border-collapse: separate;
    border-spacing: 15px;
    border-style: dashed double dashed;
    margin-bottom: 50px;
    background-color: rgb(192,192,192)
}
.ticket_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    justify-content: space-around;
}
.ticket {
    height: 40vh;
    color: white;
}
@media screen and (max-width: 600px) {
    .ticket {
        font-size: 0.5em;
    }
}
@media screen and (min-width: 600px) {
    .ticket {
        font-size: 0.9em;
    }
}
.ticket_header {
    margin-bottom: 0.2rem;
}
.ticket_hr {

    background-color: yellow;
    margin-bottom: 1rem;
}
.ticket_ref {
    margin-top: 1rem;
}
.ticket_table {
    margin-bottom: 1rem;
    border-collapse: separate;
    border-spacing: 0.5rem;
    margin-bottom: 0.05rem;
}
.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
  width: 35px;
}

.y-axis {
    margin-top: 25vh;
    margin-bottom: 25vh;
}

.quote {
    border-collapse: separate;
    border-spacing: 50px;
    margin-top: 3rem;
    margin-bottom: 2rem;
}
/* flipping effect*/

 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  height: 40vh;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: white;
}
.front-color-x {
  color: teal;
}

.front-color-y {
  color: purple;
}
.depart_t {
  font-size: 0.8vw;
}

.front-color-z {
  background-color: grey;
  color: purple;
}
/* Style the back side */
.flip-card-back {
  background-color: grey;
  color: white;
  transform: rotateY(180deg);
}
@media screen and (max-width: 600px) {
    .flip-card-back {
        font-size: 0.5em;
    }
}




 /* Dropdown Button */
 .dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  /* Dropdown button on hover & focus */
  .dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #ddd;}
  
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .show {display:block;}  /* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


/* ancillaries */
duffel-ancillaries {
  transform:scale(1);
  transform-origin: 0 0;
}

/* flight cancellation quote*/

#flight_cancellation_quote_header {
  margin-top: 15vh;
}
#flight_cancellation_quote_button {
  margin-bottom: 5vh;
}
/* hotels css */
.hotels_page {
    display: grid;
}
.hotel_search_quote {
    margin-bottom: 0.5rem;
    border-collapse: separate;
    border-spacing: 3rem;
}
.choices {
    z-index: 10;
    background-color: #808080;
}
.hotel_search_quote_img {
    height: auto;
    width: 120px;
}
.hotel_name {
    font-size: 1em;
    @media screen and (max-width: 600px) {
       font-size: 0.7em;
    }
}
.address {
    font-size: 0.5em;
    @media screen and (max-width: 600px) {
       font-size: 0.7em;
    }
}
.hotel_rate {
    font-size: 0.7em;
}
.stars {
    font-size: 0.7em;
}
.rates-img {
    width: 43vw;
    height: 62vh;
    @media screen and (max-width: 600px) {
     width: 100vw;
    }
}
.rates2-img {
    width: 20vw;
    height: 31vh;
    @media screen and (max-width: 600px) {
     width: 50vw;
    }
}
.rates3-img {
    width: 20vw;
    height: 31vh;
    @media screen and (max-width: 600px) {
     width: 50vw;
    }
}

.grid-container {
    display: grid;
    width: 20vw;
    grid-template-columns: 20vw 20vw;
    grid-template-rows: 31vh 31vh;
    grid-column-gap: 2px;
    grid-row-gap: 2px;
    @media screen and (max-width: 600px) {
     width: 50vw;
     grid-template-columns: 50vw;
    }

}

.grid-item-1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}
.grid-item-2 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}
.grid-item-3 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}
.grid-item-4 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}
.description_container {
    margin-top: 10rem;
}
#rooms {
    margin-bottom: 3rem;
}
.rooms-img {
    width: 10vw;
    height: 10vw;
}
.rooms_table {
    border-collapse: separate;
    border-spacing: 1rem;
}
.room_hr {
    margin-top: 3rem;
    margin-bottom: 6rem;
    color: yellow;
}

.circular_button {
    height: 50px;
    width: 50px;
    background-color: #bbb;
    border: 2px solid #bbb;
    border-radius: 50%;
    font-size: 1vw;
    @media screen and (max-width: 600px) {
        font-size: 2vw;
    }
}
.circular_button:hover {
    height: 60px;
    width: 60px;
    background-color: #7895CB;
}
.policy_table {
    border-collapse: separate;
    border-spacing: 1rem;
}
.policy_buttons {
    height: 0.1rem;
    width: 2rem;
    background-color: #bbb;
}
.policy_buttons:hover {
    background-color: #7895CB;
}
.date_time {
    font-size: 1.5rem;
}
#booking_amount {
    font-size: 1.3rem;
}
#cancel_p {
    font-size: 1.3rem;
}
.cancel_date {
    font-size: 1.5rem;
}

#quote_button {
    width: 10rem;
    background: black;
}
/* checkout */
#search_quote_table {
    style.display = "none";
    z-index: 50;
}
#checkout_quote_table {
    border-collapse: separate;
    border-spacing: 3rem;
    border: 1px solid grey;
}
.checkout_quote_table_td {
    display: flex;
    justify-content: end;
}

#room_row {
    background-color: #B4B4B3;
    border-top: 1px solid black;

}
#tax_row {
    background-color: #B4B4B3;
    bolder-bottom: 1px solid black;
}
#hotel_details {
    border: 1px solid #B4B4B3;
}
#checkout_description_table {
    border-collapse: separate;
    border-spacing: 1rem;
}
#checkout_img {
    height: 5vw;
    width: 5vw;
    border-radius: 5%;
    @media screen and (max-width: 600px) {
        height: 10vw;
        width: 10vw;
    }
}
.out_td {
    padding-left: 20px;
}
#room_description {
    font-size: 1rem;
}
.checkout_description_table2 {
    border-collapse: separate;
    border-spacing: 0.7em;
    font-size: 0.7em;
}
#checkout_description_table3 {
    border-collapse: separate;
    border-spacing: 1em;
    font-size: 0.7em;
}
.headings {
    margin-bottom: 0px;
}
form textarea#special {
     height: 100px;
}

.payments_img {
    height: 5vw;
    width: 5vw;
    border-radius: 5%;
}
.payments_img:hover {
    background-color: #7895CB;
}
.payments_page_img {
    height: 2.5vw;
    width: 2.5vw;
    border-radius: 5%;
}
.red {
    color: red;
}
.name_input {
    width: 170px;
}

/* hotel_bookings room images */
.rooms-img_ {
    width: 5vw;
    height: 5vw;
    @media screen and (max-width: 600px) {
        width: 10vw;
        height: 10vw;
    }
}
.hotel_name_ {
    font-size: 0.7em;
    }
.address_ {
    font-size: 0.5em;
}
.policy_buttons_ {
    height: 0.1em;
    width: 1em;
    color: #FFFFFF;
}
.bottom {
    margin-bottom: 0.5em;
}
#credits {
    font-size: 0.5em;
    text-align: center;
}



/* flights */
#journey {
    margin-top: 15px;
    margin-bottom: 15px;
}
.dot {
    height: 3px;
    width: 3px;
    radius: 50%;
    background-color: #6499E9;
}
.separator {
    height: 2px;
    width: 20vw;
    background-color: #5B0888;
}
.center_row {
    display: flex;
    align-items: center;
    align-content: center;
}
#email_ticket {
    border: 2px inset #071952;
    background-color: #6499E9;
    color: white;
}

.index_row {
    margin-bottom: 3rem;
}
.fins_container {
    margin-top: 45px;
    margin-bottom: 45px;
}
.fins {
    width: 2.5vw;
    height: 2.5vw;
    radius: 3%;
    position: relative;
    z-index: 2;
    @media screen and (max-width: 768px) {
        width: 7vw;
        height: 7vw;
    }

}
.fins:hover {
    background-color: #62a0ea;
}
.left_fins {
    margin-right: 15px;
}

#topup {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Courier New;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

#topup:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
.title_format {
  text-transform: uppercase;
}

.p_fields {

    margin-bottom: 40px;
}
.butt {
    width: 100%;
    margin
}
.butt:hover {
    background-color: #7895CB;
}
label {
    font-weight: normal;
}
.flight-ticket {
    margin-bottom: 3vw;
}

.ticket_button {
    background:    #6fa8dc;
    border-radius: 1000px;
    padding:       10px 10px;
    color:         #ffffff;
    display:       inline-block;
    font:          normal bold 13px/1 "Open Sans", sans-serif;
    text-align:    center;
}






/*alerts*/
/* Designing dialog box */
#container {
            display: none;
            background-image: linear-gradient(to right, #66a80f, #c0eb75);
            background-size:cover;
            color: white;
            position: absolute;
            width: 350px;
            border-radius: 5px;
            left: 50%;
            margin-left: -160px;
            padding: 16px 8px 8px;
            box-sizing: border-box;
        }

/* Designing dialog box's okay button */
#container .yes {
            background-color: #5c940d;
            display: inline-block;
            border-radius: 5px;
            border: 2px solid gray;
            padding: 5px;
            margin-right: 10px;
            text-align: center;
            width: 60px;
            float: right;
        }

#container .no {
   background-color: #22b8cf;
   display: inline-block;
   border-radius: 5px;
   border: 2px solid gray;
   padding: 5px;
   margin-right: 10px;
   text-align: center;
   width: 95px;
   float: right;
}

#container .yes:hover {
   background-color: #82c91e;
}

#container .no:hover {
   background-color: #99e9f2;
}

.cancelled {
    color: red;
    font-size: 15px;
}
/* Dialog box message decorating */
#container .message {
   text-align: left;
   padding: 10px 30px;
}
.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;

}

.image-wrapper {
  position: relative;
  max-width: 400px;
  color: white;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Adjust opacity as needed */
}


.overlay-text {
  position: relative;
  bottom: 0.5rem;
  font-size: 18px;
  font-weight: 700;
  padding: 50px 12px 10px;
}
.overlay-text-2 {
  position: relative;
  font-size: 9px;
  font-weight: 100;
  padding: 0px 12px 10px;
}

/* Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

#dashboard_panel {
  margin-top: 60px;
  margin-bottom: 45px;
}