* {
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
    font-optical-sizing: auto;
    color-scheme: light;

    letter-spacing: normal;
}

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

html[data-theme="light"] {
    --bg: rgb(239, 243, 247);
    --wrap-bg: white;
    --grey7: rgb(50, 54, 58);
    --grey0: rgba(245, 248, 251, 1);
    --grey: rgba(241, 244, 247, 1);
    --grey2: rgb(235, 239, 243);
    --grey3: rgb(202, 206, 211);
    --grey4: rgb(215, 222, 230);
    --grey5: rgba(0, 0, 0, 0.45);
    --grey6: rgb(235, 239, 243);
    --glass: rgba(0, 4, 9, 0.025);
    --text-color0: rgb(45, 45, 45);
    --text-color2: white;
    --text-color: black;
    --selected-bg: rgba(0, 4, 9, 0.025) !important;
    --selected-bg2: rgb(8, 96, 204) !important;
    --selected-color: black !important;
    --selected-color2: #f0f0f0;
    --theme-glass: rgba(0, 179, 255, 0.115);
    --theme-glass-hover: rgba(0, 183, 255, 0.184);
    --theme-glass-text: rgb(18, 109, 214);
    --theme-glass2: rgb(70, 70, 70);
    --theme-glass0: rgba(0, 160, 255, 0.055);
    --theme-glass-hover0: rgba(0, 160, 255, 0.09);
    --border-color: rgb(203, 207, 211);
    --shadow-border: rgb(216, 220, 225);
    --shadow: rgba(0, 4, 9, 0.1);
    --shadow2: rgba(0, 4, 9, 0.23);
    --theme-color: rgb(8, 96, 204);
    --theme-color2: rgb(8, 96, 204);
    --theme-color-hover: rgb(18, 109, 214);
    --theme-color-hover2: rgb(31, 116, 228);
    --menu-color: black;
    --color-loading: rgb(18, 109, 214);
    --i-color: rgb(55, 59, 64);
    --color-disabled: rgb(174, 174, 174);
    --box-bg: white;
    --box-bg2: white;
    --btn-bg: rgb(241, 244, 247);
    --btn-bg2: rgb(202, 206, 211);
    --box-shadow-s: 0px 0px 0px;
    --box-border: 0px;
    --btn-border: 0px;
    --handle: white;
    --popup-shadow: 0px 2px 4px;
}

html[data-theme="dark"] {
    --bg: rgb(19, 22, 25);
    --wrap-bg: rgb(27, 30, 33);
    --grey7: rgb(235, 239, 243);
    --grey0: rgb(23, 26, 29);
    --grey: rgb(37, 41, 44);
    --grey2: rgb(50, 54, 58);
    --grey3: rgb(64, 68, 72);
    --grey4: rgb(64, 68, 72);
    --grey5: rgba(0, 0, 0, 0.45);
    --grey6: rgb(54, 67, 81);
    --glass: rgba(0, 4, 9, 0.1);
    --text-color0: #f0f0f0;
    --text-color2: rgb(0, 0, 0);
    --text-color: #f0f0f0;
    --selected-bg: rgb(0, 74, 119) !important;
    --selected-bg2: #a6c4f8 !important;
    --selected-color: #f0f0f0 !important;
    --selected-color2: black;
    --theme-glass: rgb(0, 74, 119);
    --theme-glass-hover: rgb(0, 74, 119);
    --theme-glass-text: rgb(150, 182, 233);
    --theme-glass2: rgb(173, 173, 173);
    --theme-glass0: rgba(0, 160, 255, 0.1);
    --theme-glass-hover0: rgba(0, 160, 255, 0.19);
    --border-color: #ffffff;
    --shadow-border: rgb(255, 255, 255);
    --shadow: rgba(255, 255, 255, 0.1);
    --shadow2: rgba(255, 255, 255, 0.25);
    --theme-color: #a6c4f8;
    --theme-color2: #a6c4f8;
    --theme-color-hover: rgb(150, 182, 233);
    --theme-color-hover2: rgb(145, 177, 229);
    --menu-color: #f0f0f0;
    --color-loading: rgb(150, 182, 233);
    --i-color: rgb(201, 201, 201);
    --color-disabled: rgb(95, 95, 95);
    --box-bg: rgb(27, 30, 33);
    --box-bg2: rgb(37, 41, 44);
    --btn-bg: rgb(37, 41, 44);
    --btn-bg2: rgb(64, 68, 72);
    --box-shadow-s: 0px 0px 0px;
    --box-border: 0px;
    --btn-border: 0px;
    --handle: rgb(0, 74, 119);
    --popup-shadow: 0px 2px 4px;
}


.calendar-route {
    gap: 5px;
}

.trip-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-right: auto;
}

.trip-wrapper #select-trip {
    width: max-content;
}

#downtime-heading {
    margin-bottom: 10px;
}

.overview-min-top-info i {
    color: var(--theme-color);
}

.x-axis-info {
    background: var(--bg);
    padding: 1px;
    margin-bottom: 4px;
    border-radius: 15px;
    flex-direction: row !important;
}

.y-axis-info {
    flex-direction: column !important;
    align-items: center;
}

.y-axis-info span {
    max-width: 95px !important;
}

.result-top,
.overview-min-top-info,
.airport-details,
.airport-info div {
    width: 100%;
}

.airport-info,
.airport-info div {
    gap: 5px;
    flex-wrap: nowrap !important;
    display: flex;
    flex-direction: row;
}

.airport-info span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px !important;
}

.airport-info span[id*="depart-airport-code"] {
    color: var(--theme-color) !important;
}

.airport-info span[id*="arrival-airport-code"],
.airport-info span[id*="depart-airport-code"] {
    width: 100%;
    max-width: max-content !important;
}

.stops-div,
.duration-div {
    display: flex;
    align-items: center;
}

.stops-div span,
.duration-div span {
    font-size: 11px !important;
}

/* .moving-div{
    overflow: hidden;
}
.moving-text {
    white-space: nowrap;
    animation: scroll-left 1s linear infinite;
  }
  
  @keyframes scroll-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  } */

#recent-search-div {
    max-width: 100%;
    width: 760px;
    justify-self: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 50px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}

[id*="recent-airport-wrap"]:hover,
[id*="recent-airport-wrap"]:hover i {
    box-shadow: 0px 6px 12px var(--shadow);
    color: var(--theme-color-hover2);
}

[id*="recent-airport-wrap"] {
    width: 100%;
    max-width: 150px;
    cursor: pointer;
}

/* .recent-enter-icon{

} */

.recent-enter-icon i,
.recent-plane {
    color: var(--theme-color);
    font-size: 18px;
}

[id*="airports-short-title"],
[id*="airports-title"] {
    font-weight: 500;
}

[id*="recent-airport-wrap"] {
    background: var(--box-bg);
    border-radius: 15px;
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.recent-date-enter {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
}

.recent-airport-enter span {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.recent-date-enter span {
    font-size: 13px !important;
}

#flights-template {
    justify-self: center;
}

[id*="from-fare"] {
    text-overflow: initial !important;
    overflow: initial !important;
}

.f-flights {
    flex-wrap: nowrap !important;
    text-overflow: initial !important;
    gap: 5px;
}

.ds-flights .stops-div {
    background: var(--theme-glass-hover);
}

.ds-flights .stops-div,
.ds-flights .duration-div {
    width: 50% !important;
    padding: 2px;
    justify-self: center;
    border-radius: 4px;
}

.ds-flights .duration-div {
    background: var(--theme-color-hover);
}

.ds-flights .duration-div span {
    color: var(--text-color2);
    height: 100%;
    justify-self: center;
}

.ds-flights {
    margin-bottom: 7px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
    border-radius: 10px;
    padding: 0px 2px;
    max-width: 100% !important;
    background: transparent;
}

.ds-flights span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: initial !important;
    display: inline-block;
    max-width: 100% !important
}

.ds-flights .duration-div {
    max-width: 150px;
}

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

.distance-guide {
    margin-bottom: 5px;
}

.distance-guide span {
    font-size: 11px !important;
}

.no-cc {
    margin-bottom: 4px;
}

.x-small-font {
    font-size: 14px !important;
}

[id*="fare-drop-beta"] {
    margin-top: 15px;
}

.relative {
    position: relative;
}

#miles-toggle,
#gw-toggle,
#dd-toggle,
#std-toggle {
    display: none !important;
}

.alert-on {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

/* #notify-setup, #flights-all-wrap{
    display: block !important;
} */

.notify-opt {
    height: fit-content;
}

[id*="fare-target-setting"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 11px;
}

.fare-target-slider-wrap {
    margin-top: 10px;
}

#notify-seat-available {
    height: fit-content;
}

input:placeholder-shown {
    text-overflow: ellipsis;
}

[data-non="true"] {
    display: none !important;
}

.option {
    position: relative;
}

.beta {
    position: absolute;
    padding: 1px 6px;
    font-size: 11px !important;
    background-color: var(--theme-glass);
    border-radius: 5px;
    top: -35px;
    right: 0;
    font-weight: 500;
    color: var(--text-color);
    font-size: 11px;
}

[data-non_round="true"] {
    display: none !important;
}

.wrap {
    content-visibility: auto;
    contain-intrinsic-size: 100px;
}

/* #flights-toggles::-webkit-scrollbar-thumb:hover,
#flights-sorts::-webkit-scrollbar-thumb:hover,
#flights-sliders::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
    background: var(--theme-color-hover2);
}

#flights-toggles::-webkit-scrollbar-thumb,
#flights-sorts::-webkit-scrollbar-thumb,
#flights-sliders::-webkit-scrollbar-thumb {
    background: var(--theme-color);
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 25px;
}

::-webkit-scrollbar-thumb {
    background: var(--theme-color);
    border-radius: 25px;
    min-height: 34px;
    background-clip: padding-box;
}

::-webkit-scrollbar {
    width: 9px;
}

#flights-toggles::-webkit-scrollbar,
#flights-sorts::-webkit-scrollbar,
#flights-sliders::-webkit-scrollbar {
    height: 7px;
} */

#most-time-in-city-sort-wrap,
#lowest-time-in-city-sort-wrap {
    display: none;
}

#time-in-city-slider-wrap {
    display: none;
}

@supports (scrollbar-color: var(--theme-color)) {
    html {
        scrollbar-color: var(--theme-color) transparent;
    }
}

#flights-template #time-in-city-wrap,
#flights-template #flights-all-wrap,
#flights-template #flights-overview-wrap,
#flights-template #flights-overview-wrap-min,
#flights-template #recent-airport-wrap {
    display: none;
}

[id*="-time-in-city-wrap"] {
    border-radius: 25px;
    padding: 15px;
    background: var(--box-bg2);
    width: fit-content;
    justify-self: center;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
    justify-content: center;
    text-align: center;
    align-items: center;
    gap: 11px;
    display: flex;
    flex-direction: column;
}

[id$="-joined-min-fare"] {
    font-weight: 700;
    letter-spacing: 0.9px;
    font-size: 18px;
}

[id$="-time-in-city"] {
    font-weight: 600;
    border-radius: 12.5px;
    padding: 8px;
    font-size: 18px;
    background: var(--theme-glass);
}

.time-in-city-wrapper {
    border-radius: 12.5px;
    padding: 8px;
    background: var(--btn-bg2);
    padding-left: 0;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 7px;
}

[id$="-time-in-city-dest"] {
    font-weight: 600;
}

.draft {
    display: flex;
    justify-content: center;
}

.joined-route {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 25px;
    gap: 15px;
    max-width: 1280px;
    width: 100%;
    box-shadow: 0px 20px 40px var(--shadow2);
    border-radius: 25px;
    padding: 12.5px;

    margin-left: auto;
    margin-right: auto;
}

[data-non_day="true"] {
    display: none !important;
}

[data-non_day] {
    justify-items: center;
    place-items: center;
    align-items: center;
}

.limit-reached form {
    width: 100% !important;
    max-width: 100% !important;
}

.l-r-lines {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 15px 0px;
}

.l-r-lines span {
    font-size: 15px;
    font-weight: 600;
    margin: 0px 17px;
}

.l-r-lines::before,
.l-r-lines::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgb(207, 207, 207);
}

.l-r-lines:not(:empty)::before {
    margin-right: .5em;
}

.l-r-lines:not(:empty)::after {
    margin-left: .5em;
}

#select-trip-type.options {
    display: flex;
    flex-direction: row;
}

#select-trip .guide-text-div {
    display: none;
}

#select-trip {
    padding: 8px !important;
    place-self: self-start;
    margin-right: auto;
}

#select-trip .option {
    margin-top: 0;
}

.plan-loading {
    margin-top: 10px;
    margin-bottom: 8px;
}

.loader2 {
    width: 100%;
    height: 90px;
    display: block;
    position: relative;
    background: transparent;
    box-sizing: border-box;

    --mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='90'%3E%3Crect x='15%25' y='0' width='70%25' height='25.5' rx='8' ry='25' fill='black'/%3E%3Crect x='0' y='43.5' width='100%25' height='45.5' rx='8' ry='25' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* The shimmer effect layer */
.loader2::after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-image:
        /* 1. Shimmer Layer */
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6) 50%, transparent 100%),
        /* 2. Subtitle (25.5px) */
        linear-gradient(var(--bg) 25.5px, transparent 0),
        /* 3. Button (45.5px) */
        linear-gradient(var(--bg) 45.5px, transparent 0);

    background-repeat: no-repeat;

    /* SIZES: shimmer, subtitle (70%), button (100%) */
    background-size: 200px 100%, 70% 25.5px, 100% 45.5px;

    /* POSITIONS: shimmer starts left, subtitle center, button center */
    background-position: -200px 0, center 0, center 43.5px;

    box-sizing: border-box;
    animation: animloader 1s linear infinite;
}

@keyframes animloader {
    0% {
        background-position: -200px 0, center 0, center 43.5px;
    }

    100% {
        background-position: calc(100% + 200px) 0, center 0, center 43.5px;
    }
}

.manage-plan {
    display: none;
}

.welcome-text {
    display: none;
    text-align: center;
}

.welcome-text,
.user-name {
    color: var(--text-color);
}

.user-name {
    font-weight: 600;
    color: var(--theme-color);
}

.plan-name {
    background: var(--theme-bg);
    color: var(--text-color);
    font-weight: 700;
}

.plan-text {
    font-size: 16px !important;
}

.plan-div {
    display: none;
    margin-bottom: 4px;
    width: fit-content;
    justify-self: center;
    place-self: center;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

#settings-div i {
    font-size: 20px !important;
}

.body-upgrade-plan {
    display: none;
    flex-direction: column;
    width: fit-content;
    justify-self: center;
    place-self: center;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

.body-create-account {
    display: none;
}

.limit-reached .btn2 {
    display: none;
}

.limit-reached-wrap {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100000;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: hidden;
}

.limit-reached {
    min-width: 0;
    max-width: 500px;
    top: 50px;
    display: flex;
    flex-direction: column;
    height: fit-content;
    background: var(--box-bg);
    gap: 5px;
    border-radius: 25px;
    padding: 15px 30px;
    opacity: 1;
    margin: 20px 20px 0px;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

.limit-reached .btn1 {
    padding: 11px 15px !important;
}

.limit-reached .heading {
    margin-bottom: 0px;
}

.limit-reached .subtitle {
    margin: 8px 0px 16px;
}

.limit-reached .button-div {
    margin-top: 13px;
}

.limit-reached a {
    text-align: center;
}

.limit-reached .btn2 {
    margin-top: 7px;
    background: var(--bg);
    color: var(--text-color);
}

.select-airport {
    font-size: 15px !important;
}

.airport-selector,
.airport-pinner {
    padding: 3px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.airport-pinner {
    padding-bottom: 3px;
}

.airport-miles-div {
    text-align: start;
    display: flex;
    flex-direction: row;
    gap: 7px;
}

.airport-miles-span {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--theme-glass2);
}

.airport-miles-div i {
    margin-top: 3px;
}

.airport-selector:hover,
.airport-pinner:hover {
    background: var(--glass);
}

.no-flights-subtitle {
    text-align: center;
}

.fa-globe {
    color: var(--theme-color) !important;
}

#no-match {
    margin-top: 10px;
    margin-bottom: 10px;
}

.downtime {
    max-width: 600px;
}

.column-search {
    display: block;
}

.row-search {
    display: none;
}

.row-search {
    margin: 0 !important;
}

.row-search #get-flights {
    position: relative;
    margin: 0 !important;
    width: 100%;
    padding: 10px 35px !important;
}

.glass-text {
    color: var(--theme-color2) !important;
}

/* .airport-pinner{
    transform: rotate(-45deg);
} */

.multi-search-card {
    padding-left: 0px;
    padding-right: 0px;
    padding-left: 10px !important;
    gap: 3px !important;
}

.multi-search-card .select-depart-name {
    width: fit-content;
    max-width: fit-content;
    flex-wrap: wrap !important;
}

.multi-search-card .select-depart-name span {
    font-size: 15px;
}

.btn-airport-name-div {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 7px;
}

.btn-airport-name,
.btn-airport-code,
.btn-airport-code-wrap,
.btn-airport-code-div {
    text-align: start !important;
    justify-self: start !important;
    justify-content: start !important;
}

.btn-airport-code-wrap,
.btn-airport-code-div {
    width: 100%;
}

.search-wrap {
    margin-left: auto;
    margin-right: auto;
    padding: 20px 20px;
    max-width: 100%;
    width: 760px;
    border-radius: 25px;
    margin-bottom: 35px !important;
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    /* width: fit-content; */
    display: flex;
    flex-direction: column;
    margin: auto;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 7px 14px var(--shadow2);
    background: var(--wrap-bg);
}

.guide-text-div,
.select-date-div,
.trip-date,
.selected-airport {
    margin: 0 !important;
}

#from-airport,
#to-airport,
#select-depart-date {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

#from-airport div,
#to-airport div {
    max-width: 100%
}

#to-airport .guide-text-div {
    margin-right: 3px !important;
}

#from-airport div,
#to-airport div,
#select-depart-date div {
    min-width: 0;
}

.from-to {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* display: flex; */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.trip-year {
    display: none;
}

.search-wrap-button-div {
    display: none;
}

.select-depart-code {
    display: none;
}

.select-depart-code-multi {
    display: none;
}

.select-depart-name {
    margin-bottom: 0 !important;
}

#search-flights-div {
    position: relative;
    margin-right: 110px;
}

#get-flights {
    position: absolute;
    width: max-content
}

#search-btn-div {
    justify-content: center;
    place-self: center;
}

.btn-airport-name-div {
    margin-bottom: 4px;
}

.btn-airport-name,
.btn-airport-name[data-pressed="true"] {
    /* color: var(--theme-color); */
    font-weight: 600 !important;
}

.btn-airport-code,
.btn-airport-code[data-pressed="true"] {
    font-weight: 400 !important;
    color: var(--theme-glass2);
    font-size: 14px;
}

.airport[data-pressed="true"] .airport-miles-span {
    color: var(--text-color) !important;
}

.airport[data-type="multi"],
.airport[data-type="multi"] .btn-airport-name,
.airport[data-type="multi"] .btn-airport-code {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    justify-self: center;
}

.airport[data-type="multi"] .btn-airport-name {
    max-width: 100%;
}

h1,
h2,
h3,
strong {
    font-weight: 600;
}

#flights-overview-wrap-min .f-flights,
#flights-overview-wrap-min .t-flights,
#flights-overview-wrap-min .result-top,
#flights-overview-wrap-min .y,
#flights-overview-wrap-min .airport-details {
    width: 100% !important;
    place-items: center;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.loader {
    width: 23px;
    height: 23px;
    border: 5px solid var(--box-bg);
    margin-left: 9px;
    margin-top: 7px;
    border-bottom-color: var(--theme-color-hover);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.overview-one [id*="airports-filter"] {
    max-width: 110px;
}

.overview-all [id*="airports-filter"] {
    max-width: 150px !important;
}

.div-search-wrap {
    position: relative;
}

.scroll-up,
.scroll-hide {
    background: var(--bg);
    border-radius: 25px;
    /* padding: 2px; */
    width: 27px;
    height: 27px;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    justify-content: center;
    padding: 0;
    /* margin-top: auto; */
    display: flex;
}

.scroll-up i,
.scroll-hide i {
    font-size: 13px;
}

.scroll-hide {
    background: var(--theme-glass);
}

.scroll-hide i {
    color: var(--text-color);
}

.downtime {
    background: var(--box-bg) !important;
    border-radius: 25px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.results-loading-div {
    display: none;
}

.multi-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.return-trip,
.joined-trip {
    gap: 25px !important;
}

.overview-min-top-info {
    display: none;
}

.no-flights-wrap {
    margin-top: 54px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    place-items: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    background: var(--box-bg);
    padding: 32px;
    border-radius: 25px;
    gap: 7px;
    display: none;
}

.no-flights-wrap i {
    font-size: 36px;
    color: var(--theme-color);
    margin-bottom: 7px;
}

.close-div {
    position: absolute;
    right: 0;
    bottom: 15px;
    top: -4px;
}

.close-btn {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
}

.notify-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.notify-heading {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: center;
}

.notify-heading span {
    font-weight: 500;
}

.webAlert-btn {
    margin-top: 10px;
}

.webAlert-title {
    text-align: center;
    font-weight: 500;
}

.webAlert-subtitle-div {
    width: max-content;
}

.webAlert-title-div {
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.notify-btn {
    margin-top: 15px;
}

.webAlert-wrap {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.webAlert {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.webAlert,
.webAlert-subtitle-div {
    max-width: 320px !important;
}

.notification-wrap,
.webAlert-wrap {
    background: var(--box-bg);
    position: absolute;
    width: fit-content;
    height: fit-content;
    padding: 15px;
    border-radius: 15px;
    box-sizing: content-box;
    box-shadow: 0px 0px 5px var(--shadow);
    z-index: 100;
}

.notification-wrap {
    padding: 32px 20px 20px 21px;
    top: unset !important;
    width: unset !important;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 100;
    box-shadow: 0px 2px 4px var(--shadow) !important;
}

.notification-wrap .vertical {
    margin-bottom: 13px;
}

[hidden] {
    display: none !important;
}

/* .wrap[aria-hidden="false"]:not([data-non_round="true"]):not([data-non_day="true"]):not([data-non="true"]) {
    display: block !important;
} */

.airport-details {
    background: var(--grey) !important;
    border-radius: 11px;
    padding: 3px 0px 0px 0px;
}

.irs-single {
    left: auto !important;
    right: auto !important;
    justify-self: center !important;
}


.results-loading {
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
}

[id*="airports-filter"] {
    max-width: 150px;
}

#flights-overview-wrap-min .wrap {
    width: 120px;
    height: auto;
}

#flights-overview-wrap-min .wrap span {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 95px;
}

.f-flights {
    margin-top: 1px;
}

.t-flights {
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 25px;
    background-color: var(--theme-color) !important;
}

#flights-overview-wrap-min .result-top {
    background: transparent !important;
    padding: 9px !important;
}

#flights-overview-wrap-min .wrap .x {
    margin-bottom: 4px;
}

.wrap[data-pressed="true"] .t-flights {
    background-color: var(--theme-color-hover) !important;
}

.wrap[data-pressed="true"] .t-flights span {
    color: var(--selected-color2) !important;
}

.t-flights span {
    color: var(--selected-color2) !important;
    font-weight: 500;
    font-size: 14px !important;
}

.btn-airport-code-div {
    margin-left: 0 !important;
    border-left: 0 !important;
}

.airport-sort-div,
.airport-sorts-toggles {
    position: relative;
}

.airport-sorts-wrap {
    z-index: 2;
    flex-direction: column;
    position: absolute;
    padding: 12px;
    background: var(--box-bg);
    box-shadow: var(--popup-shadow) var(--shadow);
    border-radius: 10px;
    margin-top: 210px;
}

.toggles-1,
.toggles-2 {
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    gap: 8px;
}

.airport-toggles {
    flex-direction: row;
}

#airport-display {
    height: 100%;
}

.airport-sorts-toggles,
.airport-display-div,
#multi-airports-switch {
    width: max-content;
}

#multi-airports-switch[data-pressed="true"] {
    font-weight: 600 !important;
}

button i,
button span {
    pointer-events: none;
}

.airport-sort-div,
.airport-display-div {
    position: relative;
}

.airport-sorts-toggles {
    align-items: center;
}

.airport-toggles-wrap {
    z-index: 2;
    flex-direction: column;
    position: absolute;
    padding: 12px;
    background: var(--box-bg);
    box-shadow: var(--popup-shadow) var(--shadow);
    border-radius: 10px;
    margin-top: 10px;
    right: -10px;
}

.airport-arrange-wrap[data-pressed="true"] {
    display: flex;
}

.airport-arrange-wrap:not([data-pressed="true"]) {
    display: none;
}

.airport-arrange-wrap {
    gap: 7px;
}

.airport-arrange-wrap button {
    width: 100%;
}

.cursor {
    cursor: pointer;
}

.airports-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.overview-features {
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    order: -1;
}

/* .flights-wrap .wrap:first-child:only-child {
    justify-self: center;
}

.flights-wrap .wrap:first-child:not(:only-child) {
    justify-self: end;
} */

.flights-wrap .wrap {
    justify-self: center;
}

i {
    pointer-events: none;
}

.text-link {
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.company-links {
    padding: 8px;
    /* background: var(--box-bg); */
    border-radius: 25px;
}

.company-links a {
    justify-content: unset !important;
}

[data-pressed="true"]:not(.airport-pinner):not(i):not(#mobile-menu-btn):not(:hover):not(.wrap),
.pressed:not(i):not(#mobile-menu-btn):not(:hover) {
    background: var(--theme-glass) !important;
    border-color: transparent !important;
    color: var(--text-color) !important;
}

[data-pressed="true"]:not(i),
.pressed:not(i),
[data-pressed="true"] div:not(.btn-airport-code),
.pressed div,
.pressed span {
    font-weight: 500 !important;
    color: var(--text-color) !important;
}

[data-pressed="true"] span:not([id*="depart-airport-code"]):not([id*="arrival-airport-code"]) {
    font-weight: 500 !important;
}

[data-pressed="true"] i:not(.theme-color) .pressed i {
    color: var(--text-color) !important;
}

[data-pressed="true"]:hover:not(.airport-pinner),
.pressed:hover {
    background: var(--theme-glass-hover) !important;
    color: var(--text-color) !important;
}

/* [data-pressed="true"]:hover i, */
/* .pressed:hover i, */
[data-pressed="true"]:hover span,
.pressed:hover span {
    background: transparent !important;
    color: var(--text-color) !important;
}

#flights-overview-wrap-min .wrap {
    padding: 0 !important;
    border: 1px solid transparent !important;
    box-shadow: 0px 7px 12px rgba(0, 4, 9, 0.233);
    align-items: center;
    /* background: var(--box-bg); */
    cursor: pointer;
    border-radius: 10px !important;
}

#flights-overview-wrap-min .wrap .x {
    justify-content: center;
}

#flights-overview-wrap-min .wrap .t-flights {
    column-gap: 5px;
}

#flights-overview-wrap-min .wrap {
    background: var(--box-bg) !important;
}

#flights-overview-wrap-min .wrap[data-pressed="true"]:not(:hover) {
    background: var(--box-bg) !important;
    border: 1px solid var(--theme-glass2) !important;
}

/* #flights-overview-wrap-min .wrap[data-pressed="true"],
#flights-overview-wrap-min .wrap[data-pressed="true"] span:not([id*="total-flights"]):not([id*="total-flights"]-word-1),
#flights-overview-wrap-min .wrap[data-pressed="true"] div {
    color: var(--text-color) !important;
} */

#flights-overview-wrap-min .wrap:hover:not([data-pressed="true"]) {
    background: var(--box-bg) !important;
    border: 1px solid var(--grey3) !important;
}

#flights-overview-wrap-min .wrap[data-pressed="true"]:hover {
    background: var(--box-bg) !important;
    border: 1px solid var(--theme-color) !important;
}

/* #flights-overview-wrap-min .wrap[data-pressed="true"]:hover span:not([id*="total-flights"]):not([id*="total-flights"]-word-1),
#flights-overview-wrap-min .wrap[data-pressed="true"]:hover div {
    color: var(--text-color) !important;
} */

#flights-overview-wrap-min {
    margin-bottom: 13px;
}

.overview-one {
    margin-top: 22px;
}

.overview-features {
    margin-bottom: 20px;
}

#flights-overview-wrap-min {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: fit-content;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

#flights-overview-wrap-min .wrap div,
#flights-overview-wrap-min .wrap span {
    pointer-events: none;
}

#flights-overview-wrap-min [id*="arrival-airport-name"] {
    font-weight: 400 !important;
    color: var(--text-color);
}

.f-flights span {
    font-weight: 600;
}

#show-all-btn {
    margin-top: 7px;
}

#flights-all {
    width: 100%;
    justify-content: center;
    align-items: center;
    place-items: center;
}

.input-wrap {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    justify-content: center;
}

.result-prices-wrap {
    margin-top: 7px;
}

.flight-results-wrapper {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.header-end .header-btns {
    gap: 10px;
}

#log-in-btn {
    background: var(--theme-glass0);
}

#log-in-btn,
#pricing-btn,
#sign-up-btn {
    width: max-content;
    font-weight: 500;
}

.header2 {
    gap: 10px;
}

#mobile-menu {
    pointer-events: none;
}

.result-cta-btns {
    grid-column: span 2;
    width: 100% !important;
    gap: 10px;
    flex-grow: 1;
}

.select-depart-name,
.select-depart-code,
.select-date-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100% !important
}

.btn-airport-name,
.btn-airport-code {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

.search-wrap-element,
#search-btn-div {
    /* max-width: 200px; */
    flex-grow: 1;
    /* max-width: 120px; */
    /* max-height: 180px; */
}

.search-wrap span {
    word-break: break-word;
}

.select-date-div {
    margin-top: 8px;
}

.calendar-btn {
    background: transparent !important;
}

.calendar-btn button i {
    pointer-events: none;
}

.y-arrange-heading {
    display: block;
}

.x-arrange-heading {
    display: none;
}

.landing-features span {
    font-size: 16px;
}

.landing-features h2 {
    font-size: 22px;
}

.pricing-btns-wrap {
    margin-bottom: 25px;
    padding: 13px;
    background: var(--box-bg);
    width: fit-content;
    border-radius: 25px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    display: none;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.pricing-btns-wrap a {
    color: var(--text-color);
    font-weight: 500;
    background: var(--btn-bg);
}

.divider2 {
    margin: 15px 0px;
    border-top: 1px solid var(--grey2);
}

.compare a,
.compare .feature-point,
.feature-all {
    font-size: 15px;
}

.compare i {
    margin-right: 7px;
}

.feature-point {
    margin-bottom: 19px;
}

.striked-wrapper {
    margin: 10px 0px 3px;
}

.price-w-0 {
    font-size: 18px;
}

.price-w-1 {
    font-size: 28px !important;
    font-weight: 500;
}

.price-w-2 {
    font-size: 15px;
    font-weight: 400;
}

.price-w-3 {
    font-weight: 400;
}

.landing-center {
    text-align: center;
}

.landing-top-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#mobile-menu {
    font-size: 19px;
}

#mobile-menu-btn {
    width: 45px;
    height: 45px;
    background: transparent !important;
}

.text-link:hover {
    padding: 2px 4px;
}

.img-link:hover,
.img-link:hover a {
    background: transparent !important;
}

#pricing-btn:hover {
    background: var(--theme-glass-hover0) !important;
    color: var(--theme-color) !important;
}

#pricing-btn:hover i,
#pricing-btn:hover span {
    background: transparent !important;
    color: var(--theme-color) !important;
}

.icon-btn:hover,
#log-in-btn:hover {
    background: var(--theme-glass-hover) !important;
}

[id*="book-flight-btn"] :hover i,
[id*="book-flight-btn"] :hover span {
    /* color: var(--theme-glass-text) !important; */
    color: var(--selected-color2) !important;
}

.icon-btn:hover i {
    background: transparent !important;
}

a.theme-color:hover,
button.theme-color:hover {
    background-color: var(--theme-glass0) !important;
    color: var(--theme-color) !important;
}

#results-arrange button:hover {
    background: var(--grey);
}

.inverted-color:hover {
    background: var(--grey) !important;
}

.inverted-color:hover span,
.inverted-color:hover i {
    background: transparent !important;
    color: var(--theme-color) !important;
}

a.theme-bg:hover,
button.theme-bg:hover,
[id*="book-flight-btn"] :hover {
    background-color: var(--theme-color-hover2) !important;
    color: var(--selected-color2) !important;
}

button[data-checked="true"],
button[data-checked="true"]:hover {
    background-color: var(--theme-glass) !important;
    color: var(--selected-color) !important;
}

a.theme-bg:hover span,
button.theme-bg:hover span,
a.theme-bg:hover i,
button.theme-bg:hover i {
    background: transparent !important;
    color: var(--selected-color2) !important;
}

form button:hover,
button:hover,
a:hover,
button:hover span,
a:hover span,
#mobile-menu-btn:hover {
    background: var(--grey2) !important;
}

/* button:hover i,
a:hover i {
    color: var(--text-color) !important;
} */

.irs-handle:hover {
    border: 3px solid var(--theme-color-hover2) !important
}

.irs-to:hover,
.irs-from:hover,
.irs-min:hover,
.irs-max:hover,
.irs-single:hover {
    background: var(--theme-color) !important;
    color: var(--text-color2) !important;
}

.line {
    flex-grow: 1;
    height: 1px;
    background: var(--theme-color);
    color: var(--theme-color);
    position: relative;
}

.left-line {
    margin-left: -3px;
}

.right-line {
    margin-right: -0px;
}

.left-line::before {
    font-family: "Font Awesome 7 Free";
    content: "\f0c8";
    font-weight: 900;

    position: absolute;
    top: -5.25px;
    left: -8px;
    font-size: 8px;
}

.right-line::after {
    font-family: "Font Awesome 7 Free";
    content: "\f0c8";
    font-weight: 900;

    position: absolute;
    top: -5.25px;
    right: -8px;
    font-size: 8px;
}

.icon-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 7px;
}

.cta-3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* gap: 4px; */
}

.cta-3 a {
    font-size: 16px;
}

#log-in-btn,
#sign-up-btn {
    padding: 10px 20px;
    border-radius: 25px;
}

#sign-up-btn {
    border: 1px solid var(--grey);
    background: var(--box-bg);
}

.company-links a {
    display: flex;
    flex-direction: row;
    text-align: center;
}

#compare_wrap {
    max-width: 1024px;
}

#compare_wrap h1 {
    margin-bottom: 26px;
}

#logo {
    aspect-ratio: 1;
    margin-top: -7px;
    width: 55px;
    margin-left: 5px;
    margin-right: 10px;
}

.company-links i {
    font-size: 18px;
}

.company-links .x,
.company-links .y {
    margin-left: 4px;
}

.company-links .x a,
.company-links .y a {
    padding: 10px;
    width: fit-content;
    /* margin-right: 6px; */
}

#pricing-btn {
    display: flex;
    background: var(--theme-glass0);
    color: var(--theme-color);
    font-weight: 500;
    padding: 10px;
    font-size: 15px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    display: none;
}

#pricing-btn i {
    color: var(--theme-color);
}

.article-wrap {
    background: var(--wrap-bg);
    padding: 20px 50px 47px;
    border-radius: 25px;
    margin-top: 33px;
}

.search-wrap-element button,
#results-arrange button,
.option button {
    font-weight: 500;
    font-size: 16px;
}

#results-arrange button {
    font-size: 15px;
    font-weight: 400;
}

.option button {
    font-size: 16px;
    min-width: max-content;
}

.range-labels,
.result-tsr {
    font-weight: 500;
}

.text-link {
    padding: 2px 4px;
}

.fit {
    width: fit-content;
}

.wrap-box {
    background-color: var(--wrap-bg);
    padding: 30px 60px;
    border-radius: 25px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.wrap-box h1,
.wrap-box h2,
.wrap-box h3 {
    margin: 0;
    padding: 0;
}

.wrap-box h1 {
    margin-bottom: 17px;
}

.vertical a,
.act-pg-sw {
    width: fit-content !important;
}

.vertical {
    position: relative;
    margin-bottom: 7px;
}

.vertical input {
    transition: border-color 0.2s;
    /* transition: all 0.01s ease-out; */
}

input:-webkit-autofill+label {
    transform: translateY(-50%);
}

input:focus {
    border-color: var(--theme-color);
    outline: none;
}

.vertical label {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    /* transition: all 0.01s ease-out; */
    pointer-events: none;
    color: var(--text-color0);
    font-size: 16px;
    line-height: 1.5rem;
    z-index: 10;
}

.vertical input:focus+label,
.vertical input:not(:placeholder-shown)+label {
    top: 0;
    font-size: 13px;
    line-height: 1rem;
    transform: translateY(-50%);
    background-color: var(--box-bg);
    border-radius: 25px;
    padding: 0 0.5rem;
}


.vertical input:focus+label {
    color: var(--text-color);
}

.vertical input:not(:focus):not(:placeholder-shown)+label {
    color: var(--text-color0);
}

.theme-color {
    color: var(--theme-color) !important;
}

.theme-bg {
    background: var(--selected-bg2) !important;
    color: var(--selected-color2) !important;
}

a.theme-bg span,
button.theme-bg span,
a.theme-bg i,
button.theme-bg i,
.theme-bg i,
.theme-bg span {
    background: transparent !important;
    color: var(--selected-color2) !important;
}

.status {
    border: none !important;
    outline: none !important;
}

a {
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.cta-2 {
    font-weight: 500;
    margin-top: 20px;
    padding: 11px 17px !important;
}

.btn-pad {
    padding: 9px 40px;
}

.form-btn {
    padding: 9px 40px;
    width: 100%;
    text-align: center;
    width: 100% !important;
}

.act-pg-sw a {
    font-size: 15px;
}

.style-btn {
    margin-top: auto;
    margin-bottom: auto;
}

.selected,
.selected span {
    border: 1px solid transparent;
}

.btn-text-2 {
    font-weight: 800;
}

.img-link,
.img-link a {
    padding: 0;
}

#trips-p .dot {
    color: var(--text-color);
}

.page-start {
    margin-top: 70px;
}

.btn-airport-i-div i:not(.select-airport):not(.airport-pinner) {
    font-size: 14px;
}

span,
p,
button,
ul,
li,
div,
h1,
h2,
h3,
h4,
h5,
h6,
input::placeholder,
input,
.guide-text {
    color: var(--text-color);
}

h1,
h2,
h3,
h3,
h5,
h6 {
    color: var(--text-color);
}

button {
    font-weight: 500;
}

.grey {
    background-color: var(--grey) !important;
    color: white !important;
}

.margin-top {
    margin-top: 15px;
}

[id*="notify-flight"],
[id*="book-flight"] {
    width: 100%;
}

[id*="notify-flight"] {
    margin-bottom: 5px;
}

.result-cta-btns button {
    width: 100%;
}

.result-dt {
    /* border: 1px solid var(--shadow-border); */
    padding: 10px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.row-gap2 {
    row-gap: 2px;
}

.result-value2 {
    font-size: 15px;
}

.result-top {
    grid-template-columns: 1fr 1fr 1fr !important;
    text-align: center;
    margin-bottom: 2px;
    border: var(--box-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--box-bg);

    border-radius: 25px;
    padding: 10px;
}

.w-100 {
    width: 100% !important;
}

.flight-details {
    order: 2;
    border: var(--box-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--box-bg);
    border-radius: 15px;
    padding: 10px;
    display: none !important;
}

.result-prices-wrap {
    order: 1;
    padding: 15px;
    border-radius: 15px;
    border: var(--box-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--box-bg);
}

.result-prices-wrap .result-value {
    font-weight: 400;
    font-size: 17px;
}

.result-prices {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    position: relative;
}

.result-prices .result-data-div,
.result-price-div {
    border: none;
    box-shadow: none;
    background: transparent;
    /* border: var(--box-border) solid var(--border-color); */
    /* box-shadow: var(--box-shadow-s) var(--shadow); */
    /* background: var(--box-bg); */
    padding: 10px;
    border-radius: 15px;
}

.result-data {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.result-data-div {
    padding: 6px;
    border-radius: 15px;
    gap: 4px;
    display: flex;
    flex-direction: column;
}

.margin-left {
    margin-left: 20px !important;
}

.result-heading {
    font-weight: 500;
    color: var(--text-color);
}

.result-heading2 {
    font-weight: 800;
}

.result-heading3 {
    font-weight: 500;
}

.result-heading,
.result-value,
.result-heading2,
.result-heading3 {
    font-size: 16px;
}

[id*="notify-btn"] {
    background: var(--grey);
}

.heading-wrap {
    font-weight: 900;
    /* padding: 4px 7px; */
    width: fit-content;
    border-radius: 10px;
}

.result-prices-wrap i {
    margin-right: 4px;
    margin-bottom: 3px;
}

[id*="gw-heading"],
.gw-heading-wrap i

/* ,.gw-heading-wrap div, .gw-heading-wrap span */
    {
    color: var(--theme-color-hover2);
}

[id*="dd-heading"],
.dd-heading-wrap i

/* ,.dd-heading-wrap div, .dd-heading-wrap span   */
    {
    color: rgb(14, 183, 127);
}

[id*="std-heading"],
.std-heading-wrap i

/* ,.std-heading-wrap div, .std-heading-wrap span */
    {
    color: var(--text-color);
}

[id*="miles-heading"],
.miles-heading-wrap i

/* .miles-heading-wrap div, .miles-heading-wrap span  */
    {
    color: rgb(172, 0, 255);
}

.gw-heading-wrap

/* , .gw-heading-div */
    {
    background: rgba(11, 136, 208, 5%) !important;
}

.dd-heading-wrap

/* , .dd-heading-div  */
    {
    background: rgba(14, 183, 127, 5%) !important;
}

.std-heading-wrap {
    background: var(--grey) !important;
}

/* .std-heading-div{
    background: var(--grey2);
} */

.miles-heading-wrap

/* , .miles-heading-div  */
    {
    background: rgba(172, 0, 255, 5%) !important;
}


[id*="book-flight-btn"] {
    border-radius: 25px;
    /* background-color: var(--theme-glass-hover0); */
    background: var(--theme-color);
}

[id*="book-flight-btn"],
[id*="book-flight-btn"] span,
[id*="book-flight-btn"] i {
    font-size: 17px;
    /* color: var(--theme-glass-text); */
    color: var(--selected-color2);
}

[id*="book-flight-btn"] span,
[id*="book-flight-btn"] i {
    background: transparent !important;
}

[id*="book-flight-btn"],
[id*="book-flight-btn"] span {
    font-weight: 600;
}

.overview-features h3 {
    font-weight: 800;
    color: var(--text-color);
    /* background: var(--theme-color); */
    padding: 0px 7px;
    border-radius: 25px;
    font-size: 19px;
    text-align: center;
}

.overview-features i {
    font-size: 15px;
}

.overview-features-div {
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;

    align-items: center;
    gap: 12px;
}

.overview-features {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0px;
    z-index: 3;
    background: var(--box-bg);
    border-radius: 25px;
    padding: 13px;

    width: max-content;
    justify-content: space-around;
}

.show-more {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.show-more button {
    width: fit-content;
    width: 40px;
    height: 40px;
    padding: 0px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    border: var(--btn-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--btn-bg);
}

.header-div,
a,
button {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.btn-airport-code-div {
    border-left: 25px solid transparent;
}

.btn-airport-code-wrap,
.btn-airport-code-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.btn-airport-code-wrap i {
    margin-bottom: 3.5px;
}

i {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--i-color);
}

.month {
    font-weight: 500;
    font-size: 18px;
    width: max-content;
}

.calendar-btn {
    border: var(--btn-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--btn-bg);
}

.calendar-btn button {
    border: 0px solid;
}

.toggles-sorts-mob,
.toggles-sorts-mob-wrap {
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    gap: 8px;
    align-items: center;
}

.toggles-sorts-mob-wrap div {
    flex-grow: 1;
}

.toggles-sorts-mob {
    display: none;
}

.toggles-sorts-mob div {
    flex-grow: 1;
}

.toggles-sorts-mob button {
    font-weight: 500 !important;
}

button {
    color: var(--text-color);
    padding: 7px 14px;
    border-radius: 20px;
    font-weight: 400;
    cursor: pointer;
    width: 100%;
    justify-content: center;

    border: var(--btn-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--btn-bg);
}

.header-btns i {
    color: var(--i-color);
    font-size: 16px;
}

.enter-airport {
    width: 100%;
}

.airport-sorts-toggles {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
}

.input-search-icon {
    position: absolute;
    left: 15px;
}

.input-search-icon i {
    color: var(--i-color);
}

.toggle-headline {
    gap: 2px;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

.gowild-dates-heading {
    background: transparent;
    font-weight: 800;
    font-size: 18px;
}

.airport-sorts-toggles,
.gowild-dates-heading {
    /* background: rgb(241, 242, 243); */
    /* background: var(--menu-color); */
    /* padding: 8px; */
    border-radius: 15px;
}

.airport-sorts-toggles,
.gowild-dates-heading span {
    /* color: white !important; */
    color: rgb(64, 63, 63);
}

.indication_wrapper span {
    font-size: 19px;
}

/* h1, .subtitle span, label, input, button .form-btn, .act-pg-sw */
/* Font Sizes */
.xl-font {
    font-size: 49px;
}

h1,
.l-font {
    font-size: 35px;
    margin-bottom: 15px;
}

h2,
.m-font {
    font-size: 25px;
    margin-bottom: 18px;
}

h3 {
    font-size: 20px;
}

.sm-font {
    font-size: 21px;
    font-weight: 500;
}

.t-font {
    font-size: 19px !important;
}

.s-font {
    font-size: 18px !important;
}

p,
span,
li {
    font-size: 17px;
    color: var(--text-color);
}

.subtitle span {
    font-size: 16px !important;
}

label {
    font-size: 16px;
}

button {
    font-size: 16px;
}

.btn-2,
.form-btn,
.act-pg-sw {
    font-size: 16px;
}

.message span {
    font-size: 16px !important;
}

.a-btn {
    font-size: 15px;
}

.cta-2 {
    font-size: 18px !important;
}

.company-links a {
    font-size: 15px !important;
    row-gap: 4px;
    column-gap: 24px;
}

input {
    font-size: 16px;
}

#copyright span {
    font-size: 14px;
}

#faq p,
#faq ul,
#faq li {
    font-size: 17px;
    color: rgb(98, 98, 98);
}

.airport span {
    font-size: 16px;
    font-weight: 400;
    pointer-events: none;
}

/* .airport-miles-div i */
.airport i {

    color: var(--theme-color) !important;
}

.iata-code .airport-miles-div,
.iata-code .airport-pinner {
    display: none;
}

.toggles-sorts {
    font-size: 17px;
}

.fa-plane {
    font-size: 20px;
}

.enter-airport {
    font-size: 16px;
}

/* Font Sizes End */

.search-wrap button {
    border: var(--btn-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--btn-bg);
}

.x-scroll {
    scroll-behavior: smooth;
}

.x-scroller {
    overflow-x: scroll;
}

.subtitle {
    margin-bottom: 25px;
    text-align: center;
}

.form-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
}

.row-only {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

form button {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.month-top {
    display: flex;
    flex-direction: row;
}

.prev-wrap .month-btn {
    order: 0;
}

.next-wrap .month-btn {
    order: 2;
}

.prev-wrap .calendar-btn {
    margin-right: auto;
    width: fit-content;
}

.next-wrap .calendar-btn {
    margin-left: auto;
    width: fit-content;
}

.prev-wrap .month-name-wrap {
    border-right: 34px solid transparent;
}

.next-wrap .month-name-wrap {
    border-left: 34px solid transparent;
}

.month-name-wrap {
    display: flex;
    align-content: center;
    flex-wrap: wrap;

    margin-left: auto;
    margin-right: auto;
    order: 1;
}

.lottie-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.loading-icon {
    display: none;
    width: 17px;
    height: 17px;
    border-width: 2px;
    margin-right: 8px;
    animation: 0.75s linear infinite spinner-border;
}

.x {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.row-div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px !important;
}

.start {
    width: fit-content;
    margin-right: auto;
}

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

.vertical label {
    padding: 9px;
}

.spacing {
    margin-top: 25px;
    margin-bottom: 20px;
}

.btn-2 {
    background-color: transparent;
    color: var(--text-color);
}

.btn-selected {
    background: var(--selected-bg) !important;
    color: var(--selected-color) !important;
    border-color: transparent !important;
}

.error {
    background-color: rgba(251, 0, 0, 0.642) !important;
    color: white !important;
    border: none !important;
    outline: none !important;
}

.message {
    border-radius: 5px;
    background: var(--theme-color);
    border-radius: 10px;
    color: var(--text-color2);
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100% !important;
    text-align: center;
    display: none;
}

body {
    background-color: var(--bg);
    color: var(--text-color);
    margin: 15px 25px 40px;
}

.header2 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    width: 100%;
}

.icon-btn {
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 50px;
    padding: 0;
}

.a-href {
    padding: 12px 16px;
    cursor: pointer;
    text-decoration: none;
    background: var(--grey);
    color: var(--text-color);
}

.a-btn {
    padding: 8px 16px;
    border-radius: 20px;
    outline: none;
    border: 0;
    cursor: pointer;
}

.div-btn {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    display: flex;
}

.text-btn {
    margin-right: 9px;
}

.div-btn a {
    /* background-color: transparent; */
    display: flex;
    color: var(--text-color);
}

.header-start {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 12px;
    justify-self: start;
}

.header,
.header-btns {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.header-btns .a-btn {
    border: var(--btn-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--btn-bg);
    color: var(--text-color);
}

.header-end {
    width: fit-content !important;
    justify-self: end;
}

#pricing-btn-mob {
    display: none;
}

.landing-features .section {
    max-width: 500px;
    /* background: var(--grey); */
    padding: 20px;
    border-radius: 25px;
    box-shadow: 0px 4px 12px var(--shadow);
}

.landing-features {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-top: 18px;
    border-radius: 25px;
}

.landing-features {
    text-align: unset;
}

.landing-features p {
    width: fit-content;
}

.landing-features i {
    background: var(--theme-glass0);
    color: var(--theme-color-hover2);
    width: 40px;
    height: 40px;
    align-content: center;
    border-radius: 10px;
    margin-right: 5px;
}

.cta {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.middle {
    margin-left: auto !important;
    margin-right: auto !important;
}

#top-disclaimer {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.dot {
    color: var(--text-color);
    font-weight: bolder;
}

.center {
    text-align: center;
}

h1 {
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 20px;
}

h2 {
    margin-top: 15px;
    margin-bottom: 15px;
}

table {
    margin-bottom: 20px !important;
}

#sign-up-div,
#log-in-div {
    display: none;
}


#sign-up-div a {
    color: var(--text-color);
}

.margin-y {
    margin-top: 15px;
    margin-bottom: 15px;
}

.compare {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 17px;
}

.version {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;

    /* border: 1px solid var(--shadow-border); */
}

.compare_headline {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 10px;
}


.version-headline {
    margin-bottom: 8px;
}

#free-version .version-headline {
    margin-bottom: 15px;
}

.compare .div-btn {
    width: 100%;
}

.version a {
    display: block;
    text-align: center;
    background-color: var(--selected-bg);
    color: var(--selected-color);
}

#paid-version i,
#paid-version .version-headline {
    color: var(--text-color);
}

#free-version a {
    background-color: var(--grey);
    color: var(--text-color);
}

.version {
    background: #fbfbfb;
    padding: 40px;
    border-radius: 20px;

    border: var(--box-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--box-bg);
}

.side-menu,
.header {
    left: -10px;
}

.side-menu {
    position: absolute;
    width: max-content;
    top: 60px;
    display: flex;
    background: var(--box-bg);
    border-radius: 25px;
    padding: 10px;
    box-shadow: 0px 2px 7px var(--shadow);
}

.side-menu,
.side-menu-opened {
    z-index: 11;
}

.side-menu a {
    background-color: transparent;
}

.side-menu button {
    margin-left: 5px;
}

.iata-code {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

.iata-code .btn-airport-code-div {
    max-width: 83px !important;
}

.iata-code i {
    display: none;
}

.iata-code .btn-airport-code {
    color: var(--text-color) !important;
}

.airport-name {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.name-code {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.company-links a {
    /* margin-right: 2px; */
    margin-bottom: 8px;
    padding: 0px;
    color: var(--text-color);
    border-bottom: 1px solid transparent;
    /* padding: 5px 10px; */
    padding: 8px;
    border-radius: 13px;
    width: 100%;
}

.company-links .div-btn {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
}

#copyright {
    margin-left: 10px;
    margin-top: 5px;
    /* display: flex;
    gap: 50px;
    justify-content: center;
    align-items: center; */
}

.black {
    color: var(--text-color);
}

#tool-name {
    margin-bottom: 0;
    margin-top: 22px;
    color: var(--theme-color);
    font-weight: 800;
    color: var(--text-color);
    font-size: 58px;
}

.gradient-before {
    background: linear-gradient(35deg,
            var(--text-color0) 45%,
            var(--theme-color) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient {
    background: linear-gradient(35deg,
            var(--theme-color-hover2) 10%,
            var(--text-color0) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

input {
    border: 1px solid var(--border-color);
    border-radius: 25px;
    padding: 13px 15px;
}

input::placeholder {
    color: var(--text-color);
}

.form-btn-div {
    margin: 23px 0px;
}

.color-1 {
    color: var(--text-color);
}

.color-1 i {
    color: var(--text-color) !important;
}

#tool {
    margin-top: 20px;
    position: relative;
}

.guide-text {
    font-weight: 500;
}

.search-wrap-element {
    min-width: 0;
    /* width: 100%; */
    padding: 14px 10px;
    border-radius: 25px;
    align-items: center;

    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--grey);
    /* border: 1px solid rgba(0, 0, 0, 14%); */
    cursor: pointer;
}

.selected-airport {
    margin-top: 7px;
}

.downtime {
    margin-left: auto;
    margin-right: auto;
    /* background: rgb(255, 255, 255);   */
    /* background: var(--glass); */
    padding: 25px 35px;
}

.indication_wrapper {
    justify-content: center;
    display: flex;
    flex-direction: row;
    column-gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 20px;

    margin-left: auto;
    margin-right: auto;
    width: max-content;
}

.gowild-text {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.plane-col {
    gap: 8px;
    justify-content: center;
}

.plane-col div {
    font-size: 17px;
}

.fd-rpd span {
    font-size: 15px !important;
    font-weight: 500 !important;
}

.cities-div-wrap {
    display: flex;
    flex-direction: column;

    border-radius: 20px;
    gap: 20px;
    flex-wrap: wrap;

    padding: 23px 30px 13px;
    margin-bottom: 20px;

    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;

    border: var(--box-border) solid var(--border-color);
    background: var(--box-bg);
}

.airport-list-wrap {
    gap: 12px;
    display: grid;
    margin-top: 15px;
    padding-right: 6px;
    border-radius: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.airport {
    background-color: unset;
    color: var(--text-color);
    padding: 12px 11px;
    border-radius: 20px;

    border: var(--box-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--grey);
}

#airport-search {
    position: relative;
    /* min-width: 300px; */
    width: auto;
    flex-grow: 1;
}

.airport-filters,
.airport-toggles,
.airport-sorts {
    display: flex;
    gap: 13px;
    width: fit-content;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
}

.toggles-sorts {
    width: 100%;
    display: flex;
    flex-direction: row;
    /* padding: 10px 20px 10px 10px; */
    margin-bottom: 7px;
    border-radius: 20px;
    /* flex-wrap: wrap; */
    gap: 14px;
}

.airport-toggle {
    margin-top: auto;
    margin-bottom: auto;
}

.airport-filter,
.airport-toggle,
.airport-sort {
    border-radius: 20px;
    text-align: center;
    vertical-align: middle;
}

textarea:focus,
input:focus {
    outline: none;
}

#BUR.name-code .btn-airport-name {
    font-size: 15px;
}

.sort-btn,
.toggle-btn {
    padding: 7px 15px !important;
}

.toggle-headline,
.filter-headline,
.sort-headline {
    margin-bottom: auto;
    margin-top: auto
}

.top-middle {
    margin-top: auto;
    margin-bottom: auto;
    width: fit-content;
}

.calendar {
    margin-top: 0px;
    margin-bottom: 20px;
    border-radius: 25px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.calendar-wrap {
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
    flex-wrap: wrap;
    /* margin: 10px 15px 20px 15px; */
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    background: var(--bg);
    border-radius: 25px;
    z-index: 4;

    box-shadow: var(--popup-shadow) var(--shadow);

    padding: 17px 22px;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.fa-plane {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
}

.month-date-div {
    width: 35px !important;
    padding: 6px !important;
    border-radius: 20px;
    text-align: center;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    place-items: center;
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: fit-content;

    border: var(--btn-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--btn-bg);
}

.month-date-div {
    margin-top: 15px;
}

.month-date {
    color: var(--text-color);
    margin-left: auto;
    margin-right: auto;
}

.enter-airport {
    padding: 10px 0px 10px 42px;
    gap: 7px;

    border: 2px solid transparent;
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--grey);
    flex-grow: 1;
}

.enter-airport::placeholder {
    color: var(--text-color);
    font-weight: 400;
    align-items: center;
    justify-content: center;
}

.toggle-headline-wrap {
    display: flex;
    font-size: 16px;
    font-weight: 500;
}

.month-div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    border-radius: 25px;
    padding: 15px 20px;

    border: var(--box-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--box-bg);
}

.month-date-div-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 20px;
}

.month-week-div-wrap {
    display: grid;
    gap: 0px;
}

.week-days,
.week-div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.day {
    text-align: center;
}

.months-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

input {
    background: transparent;
}

.guide-text-div {
    margin-bottom: 5px;
}

.guide-text-div span {
    font-size: 17px;
}

.option {
    margin-top: 10px;
    border-radius: 25px;
    text-align: center;
}

.option button {
    padding: 3px 12px !important;
}

.wrap,
.airport-flights-all {
    width: fit-content;
    padding: 20px 23px;
    border-radius: 5px;
}

.row-div,
.all-airport {
    display: flex;
    flex-direction: row;
    gap: 7px;
}

label[for="tos-pp"] {
    vertical-align: middle;
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding: 10px 0px;
    margin-top: 15px;
}

#arranged-flights {
    justify-content: center;
}

.search-wrap-button {
    border: var(--btn-border) solid var(--border-color);
    text-align: center;
    font-size: 18px;
}

.option {
    text-align: center;
}

.select-depart-name,
.select-depart-code-multi {
    text-align: center;
    margin-bottom: 13px;
}

.select-depart-code {
    text-align: center;
}

.option button,
.search-wrap-button-div {
    font-size: 16px;
}

.select-depart-name span,
.select-depart-code span,
.trip-date span {
    font-size: 17px;
}

.search-wrap-divs {
    display: flex;
    flex-direction: column;
}

.trip-date {
    text-align: center;
    margin-top: 10px;
}

.trip-date button {
    margin-top: 15px;
}

#get-flights {
    display: flex;
    padding: 10px 18px;
    /* border: var(--box-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--box-bg); */
    justify-content: center;
    align-items: center;
    align-content: center;
}

#get-flights i {
    font-size: 21px !important;
    margin-right: 5px;
}

#get-flights span,
#get-flights {
    font-size: 16px !important;
    font-weight: 500;
}

.toggle-headline {
    display: flex;
    flex-direction: row;
    border-radius: 25px;
}

.inverted-color {
    background: var(--btn-bg) !important;
    /* border: 1px solid var(--border-color) !important; */
    color: var(--theme-color) !important;
}

.inverted-color span,
.inverted-color i {
    color: var(--theme-color);
}

.toggles-sorts button span {
    font-size: 16px;
    ;
}

.calendar-btns {
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    /* gap: 10px; */
}

.calendar-btn {
    border-radius: 25px;
    margin-bottom: auto;
}

.calendar-btn button {
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.domestic {
    color: var(--theme-color);
}

.international {
    color: #10B981;
}

.early-booking {
    color: #c300ff;
}

.blackout {
    color: var(--text-color);
}

.month-date-i {
    width: 100%;
    font-size: 14px !important;
    font-style: normal;
}

.heading span {
    font-size: 20px;
    font-weight: 800;
}

.heading {
    margin-bottom: 8px;
}

.value {
    margin-bottom: 8px;
    gap: 15px;
}

.value-1 {
    max-width: 70px;
    width: fit-content;
    font-weight: 500 !important;
}

.value-2 {
    width: 70px;
    width: fit-content;
}

.value-3 {
    font-weight: 500 !important;
}

.value span {
    font-size: 18px;
}

/* #icon {
    margin-top: -6px;
} */

#icon i {
    margin-top: -6px;
    font-size: 20px;
}

.wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-radius: 25px;
    height: fit-content;
    width: fit-content;
    width: 100%;
    max-width: 510px;

    border: var(--box-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--grey2);
}

.detail {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.buttons button {
    padding: 10;
    font-size: 22px;
    font-weight: 800;
}

.buttons {
    border: 1px solid var(--border-color);
    border-radius: 25px;
    display: flex;
    flex-direction: row;
    margin-top: 8px;
    /* gap: 100px; */
    justify-content: center;
}

.row-div {
    justify-content: space-between;
    gap: 10px;
}

.detail {
    display: flex;
    flex-direction: column;
    margin: auto;
    /* text-align: center; */
}

.detail-1 {
    font-size: 17px;
}

.detail-2 {
    font-size: 16px;
}

.detail-3,
.detail-3 span {
    font-size: 16px !important;
}

.heading-guide {
    font-size: 15px !important;
}

#icon {
    text-align: center;
}

#from span,
#icon span,
#to span {
    font-size: 21px;
    font-weight: 800;
    margin: auto;
}

.y-1 {
    margin: 0;
}

.y-2 {
    margin: 0;
}

.y-3 {
    margin: 0;
}

.detail div {
    margin-bottom: 2px;
}

.y {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.row-gap {
    row-gap: 14px;
}

.info-text {
    font-style: normal;
}

[id*="depart-airport-code"],
[id*="arrival-airport-code"] {
    font-size: 18px;
    /* color: var(--theme-color) !important; */
    font-weight: 800 !important;
}

[id*="depart-time"],
[id*="arrival-time"] {
    font-size: 18px;
    font-weight: 800;
    /* color: var(--theme-color) !important; */
}

.est-value {
    color: var(--text-color) !important;
    font-weight: 500;
}

.value {
    font-weight: 500 !important;
    color: var(--text-color) !important;
}



.btn-text-1 {
    font-size: 17px !important;
}

.btn-text-3 {
    font-size: 17px !important;
}

.text-med {
    font-size: 18px;
}

.mid-value {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.mid-value span {
    font-size: 21px;
}

[id*="depart-airport-name"],
[id*="arrival-airport-name"] {
    text-align: center;
}

.y-2 div {
    width: max-content;
}

#flights-all-wrap {
    display: flex;
}

#flights-all-wrap h3,
#flights-overview-wrap h3 {
    margin: 0;
}

.flights-wrap {
    gap: 15px;
    margin: 20px 0px;
    display: grid;
    margin: 0;
    margin-top: 15px !important;
    justify-content: center;
    place-items: center;
    align-items: center;
}

#flights-all-wrap,
#flights-overview-wrap {
    border-radius: 25px;
    flex-direction: column;
    flex-wrap: nowrap !important;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;

    display: flex;
    justify-content: center;
    align-items: center;

    /* border: var(--box-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--box-bg); */
}

.irs--flat,
.irs--flat .irs-handle>i:first-child,
.irs-from,
.irs-to,
.irs-min,
.irs-max,
.irs-single {
    background: var(--theme-glass0) !important;
    color: var(--text-color) !important;
    border-radius: 25px;
}

.irs--flat .irs-line,
.irs--flat .irs-bar {
    height: 25px;
}

.irs--square .irs-line {
    background-color: var(--theme-color)
}

.irs--flat .irs-line {
    background-color: var(--theme-color)
}

.irs-bar {
    background-color: var(--grey4) !important;
}

.irs--flat .irs-from:before,
.irs--flat .irs-to:before,
.irs--flat .irs-single:before,
irs--flat .irs-from:before,
.irs--flat .irs-to:before,
.irs--flat .irs-single:before {
    border-top-color: var(--text-color) !important;
    cursor: pointer;
}

.irs--square .irs-bar,
.irs--square .irs-line {
    cursor: pointer;
    height: 5px !important;
}

.irs--square .irs-handle {
    background: var(--handle) !important;
}

.irs--square .irs-bar,
.irs--square .irs-line,
.irs--square .irs-handle {
    &::before {
        content: "";
        left: -6px;
        top: -6px;
        right: -6px;
        bottom: -6px;
        position: absolute;
        cursor: pointer;
    }
}

.irs--flat .irs-handle {
    height: 33px;
    cursor: pointer;
}

.irs-handle {
    border-color: var(--theme-color) !important;
    cursor: pointer;
    z-index: 0 !important;
}

.irs-grid-text,
.irs-single {
    font-size: 13px !important;
    top: -5px;
    cursor: pointer;
}

.irs-from,
.irs-to,
.irs-min,
.irs-max {
    font-size: 13px !important;
    top: -5px;
    cursor: pointer;
}

.irs-grid {
    height: unset;
    cursor: pointer;
}

.range-labels {
    width: 130px;
    justify-content: center;
    display: flex;
}

.range-labels {
    display: block;
    border-radius: 1rem;
    margin: 10px 0px 15px 0px;
    font-size: 14px;
    text-align: center;
}

.range-slider-div {
    width: max-content;
    margin-left: 3px !important;
}

#flights-toggles,
#flights-sorts,
#flights-sliders {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: scroll;
    /* -ms-overflow-style: none;
    scrollbar-width: none; */
    padding: 5px 4px 10px;
    border-radius: 10px;
}

#flights-toggles button,
#flights-sorts button,
#flights-sliders button {
    border: var(--btn-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--btn-bg);
}


#flights-sliders {
    display: flex;
    /* width: 500px !important; */
    height: fit-content;
}

#flights-sliders {
    display: flex;
    flex-direction: row;
    gap: 50px;
    min-width: 33%
}

.result-sort-div,
.result-filter-div,
.result-toggle-div {
    border-radius: 25px;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
}

.result-sort-div button,
.result-filter-div button,
.result-toggle-div button {
    border: 1px solid var(--border-color);
    width: max-content;
    font-size: 15px;
    padding: 7px 12px;
    color: inherit;
    background-color: inherit;
}

.info-div {
    margin: 20px 0px
}

#results-arrange {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    padding: 20px 25px 7px;
    border-radius: 25px;
    margin-bottom: 26px;

    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;

    align-self: center;
    justify-content: center;

    border: var(--box-border) solid var(--border-color);
    box-shadow: var(--box-shadow-s) var(--shadow);
    background: var(--box-bg);
    gap: 20px;

    display: none;
}

#results-arrange button {
    border: 1px solid var(--grey2);
    background: var(--wrap-bg);
}

#flights-sorts-wrap {
    width: 68% !important;
    flex-grow: 1;
}

.result-tsr {
    font-weight: 800;
    font-size: 15px;
}

/* #side-pricing-btn {
    display: none;
} */

.divider {
    margin-bottom: 9px;
    border-top: 1px solid var(--border-color);
}

#flights-sliders-wrap,
#flights-sorts-wrap,
#flights-toggles-wrap {
    display: flex;
    flex-direction: column;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-bottom: 10px;
    border-radius: 25px;
    /* padding-right: 20px; */
    padding: 0px 2px;
}

.result-tsr {
    margin-right: 5px;
    margin-left: 5px;
}

.margin-bottom {
    margin-top: 15px;
    margin-bottom: 15px;
}

.margin-bottom2 {
    margin-top: 16px;
    margin-bottom: 28px;
}

.margin {
    margin: 12px 0px;
}

.margin2 {
    margin-top: 15px;
    margin-bottom: 22px;
}

.y,
.y-3 {
    width: fit-content;
    flex-wrap: wrap;
}

.center {
    display: flex;
    justify-content: center !important;
    align-items: center;
}

#column-1 {
    margin-bottom: 5px;
    width: max-content;
}

.wrap {
    position: relative;
}

#flights-overview .mid-icon {
    left: 45.5%;
    top: 5.5%;
    position: absolute;
}

.flights-all .mid-icon {
    left: 47%;
    top: 5.5%;
    position: absolute;
}

[id*="airbus"] {
    width: auto;
    text-align: center;
}

.y-div .y {
    row-gap: 2% !important;
}

.month-top {
    margin-bottom: 5px;
}

.next-prev-btn,
.calendar-btn button {
    width: fit-content;
    padding: 5px;
    border-radius: 50px;

    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    display: flex;

    border: 1px solid var(--grey2) !important;
    box-shadow: 0px 0px 2px var(--shadow);
    background: var(--grey) !important;
    color: var(--text-color);
}

.next-prev-btn i {
    font-size: 14px !important;
}

#slider-next-btn,
#toggle-next-btn {
    margin-left: 2.5px;
}

#settings-div {
    display: none;
}

.header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0px;
    position: relative;
}

.header-start {
    margin-top: auto;
    margin-bottom: auto;
}

.plane-div {
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 4px;
}

.plane-col i {
    color: var(--theme-color) !important;
}

.result-top1 {
    justify-self: start;
}

.result-top2 {
    justify-self: center;
}

.result-top3 {
    justify-self: end;
}

/* Smart Watch */
@media screen and (max-width: 240px) {
    #airport-display {
        display: none !important;
    }
}

@media screen and (max-width: 210px) {
    .search-wrap {
        grid-template-columns: 1fr !important;
    }

    .search-wrap :nth-child(5) {
        grid-column: unset !important;
    }

    .airport-name {
        grid-template-columns: 1fr !important;
    }

    .name-code {
        grid-template-columns: 1fr !important;
    }
}

@media screen and (max-width: 325px) {
    .btn-airport-code-wrap {
        gap: 1px !important;
    }
}

@media screen and (max-width: 317px) {
    .search-wrap {
        padding: 0px !important;
    }

    .from-to {
        gap: 7px !important;
    }

    .wrap-box {
        border: 0px;
    }

    .page-start {
        padding: 0px !important;
        background: transparent;

    }

    .airport-name {
        grid-template-columns: 1fr !important;
    }

    #get-flights i {
        font-size: 17px !important;
    }

    .gowild-text span {
        font-size: 12px !important;
    }

    .month-div {
        padding: 20px 13px !important;
    }

    .week-div {
        gap: 0px !important;
    }

    .month-date-div {
        padding: 3px !important;
    }

    .month-date-div {
        width: unset !important;
        background: transparent !important;
    }

    .btn-airport-code-wrap,
    .btn-airport-name-div {
        padding: 0px 15px;
    }

    /* .from-to {
        grid-template-columns: 1fr !important;
    } */

    #search-flights-div {
        justify-self: center;
        place-self: center;
        align-self: center;
    }

    .sm-font {
        font-size: 16px !important;
    }

    .t-font {
        font-size: 16px !important;
    }

    .a-btn {
        padding: 10px !important;
    }
}

@media screen and (max-width: 350px) {
    #logo {
        width: 30px !important;
    }

    #mobile-menu-btn {
        font-size: 13px !important;
    }

    .header2 {
        gap: 2px !important;
    }

    .header-start .header-btns {
        gap: 2px !important;
    }
}

@media (min-width: 317px) and (max-width: 343px) {
    .week-div {
        gap: 5px !important;
    }
}

@media (min-width: 317px) and (max-width: 359px) {
    .search-wrap {
        padding: 10px !important;
    }

    .month-div {
        padding: 20px 15px !important;
    }

    .month-date-div {
        padding: 5px !important;
    }
}

@media screen and (max-width: 343px) {
    .overview-features [id*="airports-filter"] {
        max-width: 5px !important;
    }

    #tool-name {
        font-size: 24px !important;
    }

    .month-div {
        padding: 7px;
    }

    .month-date-div {
        padding: 2px !important;
    }
}

@media (min-width: 210px) and (max-width: 317px) {
    .search-wrap {
        grid-template-columns: 1fr 1fr !important;
    }

    .search-wrap :nth-child(5) {
        grid-column: unset !important;
    }
}

/* Mobile */

@media screen and (min-width: 317px) and (max-width: 480px) {
    .a-btn {
        padding: 10px 13px !important;
    }

    .sm-font {
        font-size: 18px !important;
    }

    .t-font {
        font-size: 17px !important;
    }

    .indication_wrapper span {
        font-size: 14px !important;
    }
}

@media screen and (min-width: 343px) and (max-width: 359px) {
    .week-div {
        gap: 7px !important;
    }
}

@media screen and (max-width: 359px) {
    #pricing-btn {
        font-size: 12px !important;
    }

    .header-btns i:not(#mobile-menu-btn i):not(#settings-btn i) {
        font-size: 12px !important;
    }

    .month-div {
        padding: 9px;
    }

    .search-wrap {
        /* background: transparent; */
        gap: 12px !important;
    }

    .btn-airport-name,
    .btn-airport-i-div {
        font-size: 13px !important;
    }

    .cities-div-wrap {
        padding: 10px !important;
        padding-top: 0px !important;
        padding-bottom: 3px !important;
    }

    .search-wrap-element,
    #search-btn-div {
        /* max-width: 88px; */
        max-height: 176px;
    }

    .select-depart-name {
        max-width: 100%
    }
}

@media screen and (min-width: 359px) and (max-width: 480px) {
    .month-div {
        padding: 10px 15px !important;
    }

    .week-div {
        gap: 8px !important;
    }

    .month-date-div {
        padding: 7px !important;
        font-size: 14px !important;
    }

    .search-wrap {
        padding: 15px !important;
    }

    .btn-airport-name,
    .btn-airport-i-div {
        font-size: 13px !important;
    }

    .cities-div-wrap {
        padding: 16px 16px 9px !important;
        padding-top: 0px !important;
        padding-bottom: 3px !important;
    }
}

@media screen and (max-width: 480px) {
    .calendar-route{
        order: 0;
    }
    .flight-route{
        order: 1;
    }
    .search-wrap-element.calendar-route {
        width: 100% !important;
    }

    .search-wrap-element.calendar-route #select-trip-type {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    .search-wrap-element.calendar-route #select-trip-type .trip-type-option-div {
        min-width: 0 !important;
    }

    .search-wrap-element.calendar-route #select-trip-type .trip-type-option-div button {
        min-width: 0 !important;
        /* 1. Allows the text to wrap to the next line */
        white-space: normal;

        /* 2. Forces long words (like URLs) to break if they still don't fit */
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .trip-wrapper {
        flex-direction: column !important;
    }

    .ds-flights span {
        max-width: 100% !important;
        text-overflow: initial !important;
    }

    .ds-flights .duration-div {
        max-width: 110px;
    }

    .airport-miles-div i,
    .airport-miles-div span {
        font-size: 12px !important;
    }

    .airport-pinner {
        font-size: 14px !important;
    }

    .notify-opt {
        width: fit-content;
        flex-grow: 1;
        padding: 7px 7px !important;
    }

    .notify-opt,
    .push-notify,
    .notify-btn {
        font-size: 13px !important;
    }

    .beta {
        font-size: 11px !important;
    }

    .limit-reached.upgrade {
        margin-left: 20px;
        margin-right: 20px;
    }

    .settings-btn i {
        font-size: 12px !important;
    }

    .welcome-text,
    .welcome-text span {
        font-size: 14px !important;
    }

    .select-airport {
        font-size: 15px !important;
    }

    .btn-airport-code {
        font-size: 12px !important;
    }

    .calendar-wrap {
        top: 138px !important;
    }

    .cities-div-wrap {
        top: 138px !important;
        padding-top: 0px !important;
        padding-bottom: 3px !important;
    }

    .search-wrap-element {
        padding: 15px 12px !important;
    }

    .multi-search-card .select-depart-name span {
        font-size: 11px !important;
    }

    .airport-list-wrap {
        gap: 8px;
    }

    .airport {
        padding: 10px 10px;
    }

    #flights-overview-wrap-min .wrap {
        padding: 0px 2px !important;
    }

    .t-flights span {
        font-size: 12px !important;
    }

    dotlottie-wc {
        width: 220px !important;
        height: 220px !important;
    }

    .name-code {
        grid-template-columns: 1fr !important;
    }

    .calendar-wrap {
        padding: 7px 0px !important;
    }

    .side-menu,
    .header {
        left: -5px;
    }

    .company-links a {
        font-size: 13px !important;
        column-gap: 15px !important;
    }

    #mobile-menu-btn {
        margin-top: 3px;
    }

    #mobile-menu-btn i,
    .company-links i {
        font-size: 15px !important;
    }

    .header .icon-btn {
        width: 27px !important;
        height: 27px !important;
    }

    #log-in-btn,
    #pricing-btn,
    #sign-up-btn {
        padding: 5px 7px !important;
        width: max-content;
        font-size: 12px !important;
    }

    .header2 {
        gap: 3px;
        justify-content: space-between !important;
    }

    .header-start .header-btns {
        gap: 3px;
        justify-content: space-between !important;
    }

    .header,
    .header-btns {
        gap: 3px !important;
        justify-content: space-between !important;
    }

    .header-end a:not(#settings-btn),
    .header-end i,
    header-mid a,
    .header-mid i {
        font-size: 12px !important;
    }

    #logo {
        width: 35px;
        margin: 0;
        /* margin-bottom: -7px; */
    }

    .header2 {
        display: flex;
        flex-direction: row;
    }

    /* Flights Wrap */
    .cta-2 {
        font-size: 16px !important;
    }

    .text-link {
        font-size: 15px !important;
    }

    .next-prev-btn {
        width: 27px;
        height: 27px;
    }

    [id*='prev-btn'] {
        margin-left: 3px;
        margin-right: 0px;
    }

    [id*='next-btn'] {
        margin-left: 0px;
        margin-right: 3px;
    }

    #flights-sliders-wrap {
        margin-top: 10px;
    }

    .next-prev-btn i {
        font-size: 12px !important;
    }

    /* Toggles, Sorts, Sliders */
    #flights-toggles-wrap,
    #flights-sorts-wrap,
    #flights-sliders-wrap {
        padding: 0;
        gap: 5px !important;
    }

    #results-arrange {
        gap: 10px !important;
    }

    #select-fare {
        padding: 20px 13px !important;
    }

    .option button {
        padding: 3px 7px !important;
        border-radius: 13px !important;
    }

    .irs--square .irs-handle {
        border: 2px solid var(--theme-color);
    }

    .month,
    .day,
    .month-date-div {
        font-size: 14px !important;
    }

    .month-date-div {
        margin-top: 7px !important;
    }

    .month-date-i {
        font-size: 12px !important;
    }

    .scroll-up,
    .scroll-hide {
        width: 25px !important;
        height: 25px !important;
    }

    .overview-features i {
        font-size: 13px !important;
    }

    .enter-airport {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    .enter-airport::placeholder {
        font-size: 12px !important;
    }

    .enter-airport,
    #airport-search {
        min-width: unset;
    }

    .search-wrap-element span:not(.beta),
    .search-wrap-element button,
    #get-flights,
    #get-flights span {
        font-size: 14px !important;
    }

    .landing-features h2 {
        font-size: 19px !important;
    }

    .landing-features span {
        font-size: 15px !important;
    }

    .plane-col div {
        font-size: 12px;
    }

    #results-arrange {
        padding: 13px !important;
    }

    /* *::-webkit-scrollbar {
        width: 8px;
        height: 7px;
    } */

    .input-search-icon i {
        font-size: 14px;
    }

    .enter-airport {
        padding-left: 38px;
    }

    .search-wrap {
        margin-bottom: 0;
    }

    .calendar-btn button {
        width: 30px;
        height: 30px;
    }

    .xl-font {
        font-size: 49px !important;
    }

    h1,
    .l-font {
        font-size: 28px !important;
    }

    h2,
    .m-font {
        font-size: 22px !important;
    }

    h3 {
        font-size: 17px !important;
    }

    body {
        margin: 13.5px;
    }

    a,
    button :not(.notify-opt):not(.btn-airport-code):not(.airport-miles-span),
    a span,
    button span,
    a div,
    button div {
        font-size: 14px !important;
    }

    span,
    p,
    li {
        font-size: 16px !important;
    }

    .side-menu-opened {
        right: 0;
        top: 50px;
        border-radius: 25px;
    }

    .header1 {
        justify-content: center;
        width: 100%;
    }

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

    .header-start {
        margin-left: 0;
        margin-right: 0px;
    }

    .header-mid {
        margin-left: 0;
        margin-right: 0;
    }

    .header-end {
        margin-left: 0;
        margin-right: 0;
    }

    #flights-toggles {
        min-width: unset !important;
        width: unset !important;
    }

    #flights-sorts {
        min-width: unset !important;
        width: unset !important;
    }

    #flights-sliders {
        min-width: unset !important;
        width: unset !important;
    }

    .wrap {
        min-width: unset !important;
    }

    /* Search Elements */

    #flights-toggles button,
    #flights-sorts button,
    #flights-sliders button {
        font-size: 12px !important;
        padding: 6px;
    }

    /* Range */
    #flights-sliders {
        gap: 30px;
    }

    .range-labels {
        padding: 0;
        margin: 0;
        margin-bottom: 10px;
        min-width: max-content;
        width: 70px;
        font-weight: 400 !important;
    }

    .date-slider-div {
        margin-left: 15px;
        margin-right: 33px;
    }

    .result-tsr {
        font-size: 14px !important;
    }

    .range-labels {
        font-size: 12px !important;
    }

    .irs-from,
    .irs-to,
    .irs-single {
        font-size: 12px !important;
        padding: 0 !important;
        top: 0px;
    }

    .irs--square .irs-handle {
        width: 12px;
        height: 12px;
    }

    .irs-handle {
        left: 3%;
    }

    .irs--square .irs-bar,
    .irs-line {
        top: 25px !important;
    }

    .irs--square .irs-handle {
        top: 23px;
    }

    .irs--square {
        height: 40px;
    }

    /* Search Element */

    #get-flights span {
        font-size: 14px !important;
    }

    /* Search Filter */
    .info-text {
        font-size: 12px !important;
    }

    .row-div {
        justify-content: space-between;
        gap: 5px;
    }

    .y {
        row-gap: 4px;
    }

    #pricing-btn-mob {
        display: unset;
    }

    /* #settings-page div {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    } */

    .search-wrap {
        flex-wrap: wrap;
        gap: 16px;
    }

    .toggles-sorts-mob-wrap button {
        padding: 6px 12px !important;
        font-size: 14px !important;
    }

    input {
        font-size: 16px !important;
    }

    .airport {
        font-size: 12px !important;
    }

    .search-wrap-element,
    #search-btn-div {
        /* max-width: 94px; */
        max-height: 176px;
    }

    .select-depart-name {
        max-width: 100%
    }
}

.form-links {
    display: flex;
    flex-direction: row;
    gap: 17px;
    justify-content: center;
}

@media screen and (min-width: 480px) {

    .form,
    form {
        max-width: 360px !important;
        min-width: 360px !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 576px) {
    .multi-search-card .select-depart-name span {
        font-size: 14px;
    }

    .search-wrap-element span {
        font-size: 16px;
    }

    .t-flights span {
        font-size: 13px !important;
    }

    .airport span,
    .airport div {
        font-size: 14px;
    }

    #mobile-menu {
        display: block;
    }

    .search-wrap {
        gap: 15px !important;
    }

    .search-wrap-divs button,
    .search-wrap button {
        font-size: 16px !important;
    }

    .search-wrap-element,
    #search-btn-div {
        /* max-width: 113px; */
        max-height: 176px;
    }

    .select-depart-name {
        max-width: 100%
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    #get-flights span {
        font-size: 16px !important;
    }

    .calendar-wrap {
        top: 170px !important;
    }

    .cities-div-wrap {
        top: 145px !important;
        padding-top: 0px !important;
        padding-bottom: 3px !important;
    }

    .search-wrap-divs button,
    .search-wrap button {
        width: 100%;
        font-size: 14px;
    }

    .option button {
        padding: 3px 9px !important;
    }

    .month,
    .day,
    .month-date-div {
        font-size: 15px !important;
    }

    .month-date-div {
        margin-top: 13px;
    }

    #logo {
        width: 50px;
    }

    .a-btn {
        padding: 11px 13px !important;
        font-size: 13px !important;
    }

}

@media screen and (min-width: 576px) and (max-width: 768px) {
    #tool-name {
        font-size: 40px;
    }

    .search-wrap-element span,
    .search-wrap-element button,
    #get-flights,
    #get-flights span {
        font-size: 14px !important;
    }

    #get-flights span {
        font-size: 16px !important;
    }

    .search-wrap {
        gap: 15px !important;
    }

    .search-wrap-element,
    #search-btn-div {
        /* max-width: 113px; */
        max-height: 175px;
    }

    .select-depart-name {
        max-width: 100%
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {

    .search-wrap span,
    .search-wrap p {
        font-size: 16px;
    }

    .search-wrap-element,
    #search-btn-div,
    .select-depart-name {
        max-height: 170px;
    }

    .option button {
        padding: 3px 7px !important;
    }

    #get-flights i {
        font-size: 25px !important;
    }

    .search-wrap {
        gap: 20px !important;
    }

    h1,
    .l-font {
        font-size: 35px;
    }

    .landing-features {
        grid-template-columns: 1fr 1fr;
    }

    .search-wrap-element span,
    .search-wrap-element button,
    #get-flights,
    #get-flights span {
        font-size: 15px !important;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {}

@media screen and (min-width: 1200px) and (max-width: 1400px) {}

/* Multiple */
@media screen and (min-width: 343px) and (max-width: 576px) {
    .overview-one [id*="airports-filter"] {
        max-width: 100px !important;
    }
}

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

    .f-flights span,
    .t-flights span {
        font-size: 11px !important;
    }

    .toggles-2 span {
        display: none !important;
    }

    #tool-name {
        font-size: 30px;
    }

    #flights-overview-wrap-min .wrap {
        width: 71px !important;
        height: auto;
    }

    .y-axis-info span {
        max-width: 59px !important;
    }

    #flights-overview-wrap-min .result-top {
        padding: 4px 0px !important;
    }

    .t-flights {
        padding: 3px 4px !important;
        border-radius: 9px !important;
    }

    #flights-overview-wrap-min .wrap .t-flights {
        column-gap: 2.5px !important;
    }

    .iata-code {
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        overflow-x: hidden;
    }

    .btn-airport-i-div i:not(.select-airport):not(.airport-pinner):not(.airport-pinner i) {
        font-size: 11px !important;
    }

    /* Flight Results */
    .overview-features {
        gap: 8px;
        margin-bottom: 5px !important;
    }

    .flights-wrap {
        grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    }

    .wrap i {
        font-size: 11px !important;
    }

    .result-value,
    .result-value2 {
        font-size: 12px !important;
        width: max-content;
    }

    .airports-filter-div i,
    .wrap div,
    .wrap span:not(.notify-heading span):not(.webAlert span):not(.t-flights span):not(.f-flights span):not(.beta):not(.ds-flights span),
    .result-heading3,
    [id*="notify-btn"],
    [id*="airports-filter"] {
        font-size: 11px !important;
    }

    .overview-features h3 {
        font-size: 16px !important;
    }

    [id*="depart-time"],
    [id*="arrival-time"],
    [id*="depart-airport-code"],
    [id*="arrival-airport-code"],
    [id*="book-flight-btn"],
    [id*="book-flight-btn"] span,
    [id*="book-flight-btn"] i,
    #show-all-btn i,
    #show-all-btn,
    #show-all-btn span {
        font-size: 14px !important;
    }

    .wrap-box {
        padding: 15px 30px;
    }

    .page-start {
        margin-top: 35px !important;
    }

    [id*="book-flight-btn"] {
        padding: 6px;
        /* margin-top: 7px; */
    }

    #flights-all-wrap,
    #flights-overview-wrap {
        padding: 0px !important;
    }

    .result-prices {
        gap: 7px 8px;
    }

    .plane-div i {
        display: none;
    }

    .result-cta-btns button:not(.notification-wrap button) {
        padding: 6px !important;
    }

    .result-prices-wrap i {
        margin: 0;
    }

    .result-prices-wrap,
    .result-top {
        padding: 9px 11px;
        border-radius: 15px;
    }

    .wrap {
        padding-bottom: 0;
        padding: 9px;
        gap: 5px;
    }

    .wrap .y {
        gap: 3px !important;
    }

    .result-data-div,
    .result-price-div {
        padding: 7px 10px !important;
        gap: 0px !important;
    }

    .result-dt {
        padding: 3px !important;
        gap: 3px;
    }

    .plane-div {
        gap: 3px;
    }

    .result-cta-btns {
        margin-top: 0px;
        margin-left: 0px;
    }

    .result-prices {
        grid-template-columns: 1fr 1fr;
    }

    /*  */


    .airport-name {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .name-code {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article-wrap {
        padding: 7px 14px 43px;
    }

    .div-btn {
        margin-top: 2px;
    }

    .header-start {
        margin-left: 14px !important;
    }

    .form-wrapper {
        grid-template-columns: 1fr;
    }

    .toggles-sorts-mob-wrap button {
        font-weight: 500 !important;
    }
}

@media (min-width: 317px) and (max-width: 768px) {
    .gowild-text span {
        font-size: 14px !important;
    }

    #get-flights i {
        font-size: 23px !important;
    }

}

@media screen and (max-width: 768px) {
    #search-flights-div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100% !important
    }

    .column-search {
        display: none;
    }

    .row-search {
        display: block;
    }

    .from-to {
        grid-template-columns: 1fr 1fr;
    }

    .cities-div-wrap {
        position: absolute;
        left: 0;
        right: 0;
        top: 150px;
        z-index: 4;
        margin-top: 0;
        box-shadow: var(--popup-shadow) var(--shadow);
    }



    .indication_wrapper {
        margin-top: 10px;
        width: min-content;
        place-items: center;
    }

    .gowild-text {
        width: max-content;
    }

    .month-date-div {
        margin-top: 13px;
    }

    .month-div {
        gap: 6px;
    }

    .landing-features {
        grid-template-columns: 1fr;
    }

    .toggles-sorts {
        flex-direction: row;
    }

    .a-btn {
        padding: 12px;
        font-size: 14px;
    }

    /* Search Elements */
    .search-wrap {
        /* display: grid; */
        /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
        align-items: center;
        place-items: center;
    }

    .search-wrap-element span {
        font-size: 14px;
    }

    .guide-text-div {
        width: fit-content;
    }

    .search-wrap-divs {
        align-items: center;
    }

    .search-wrap-divs div {
        width: fit-content;
    }

    .search-wrap i {
        font-size: 14px;
    }

    .months-wrap {
        grid-template-columns: 1fr !important;
    }

    .indication_wrapper {
        margin-bottom: 5px;
        margin-top: 10px;
        order: 2;
    }

    .calendar-wrap {
        padding: 10px 5px 7px 5px;
    }

    .gowild-dates-heading {
        margin-bottom: 5px;
        font-size: 14px;
    }

    .gowild-text {
        gap: 13px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        row-gap: 5px;
    }

    .return-trip,
    .joined-trip {
        grid-template-columns: 1fr !important;
    }
}

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

    #log-in-btn,
    #sign-up-btn {
        padding: 7px 21px
    }

    .pricing-btns-wrap {
        display: flex;
    }

    .compare {
        grid-template-columns: 1fr !important;
        max-width: 100%;
    }

    #compare_wrap {
        max-width: 768px !important;
    }

    .month-date-div {
        font-size: 16px;
    }

    .cities-div-wrap {
        padding: 25px 25px 13px;
    }

    .search-wrap {
        padding: 20px;
    }

    .header-mid {
        border-left: 0;
    }

    .indication_wrapper span {
        font-size: 16px;
    }

    .search-wrap button,
    .option button {
        font-size: 17px;
    }

    #get-flights span {
        font-size: 16px;
    }

    .search-wrap button {
        padding: 5px 15px;
    }

    .prev-wrap .calendar-btn {
        margin-right: 0;
    }

    .next-wrap .calendar-btn {
        margin-left: 0;
    }
}

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

    .side-menu,
    .company-links a,
    #how-it-works-btn {
        max-width: unset;
    }

    .company-links a {
        flex-direction: row;
        border-radius: 10px;
    }

    .months-wrap {
        grid-template-columns: 1fr 1fr;
    }

    #results-arrange {
        gap: 19px;
    }

    #flights-sliders-wrap,
    #flights-sorts-wrap,
    #flights-toggles-wrap {
        padding: 0;
        margin-bottom: 0;
    }

    #results-arrange .row-only {
        justify-content: flex-start !important;
    }

    /* #results-arrange .wrap-heading{
        padding: 7px !important;
        background: var(--grey) !important;
        color: var(--text-color) !important;
        border-radius: 25px;
        width: fit-content;
    }
    #results-arrange .wrap-heading span{
        color: var(--text-color) !important;
    } */
    .y-arrange-heading {
        display: block;
    }

    .x-arrange-heading {
        display: none;
        margin-right: 15px;
    }
}

@media screen and (max-width: 1350px) {
    #theme-div {
        border-right: 0 !important;
    }

    #pricing-btn {
        font-size: 14px;
    }

    .header-start {
        margin-left: 0 !important;
    }

    #company-links {
        padding: 0;
    }

    /* Mobile Menu */
    .side-menu {
        padding: 0px;
    }

    .company-links {
        border: var(--btn-border) solid var(--border-color);
        box-shadow: var(--box-shadow-s) var(--shadow);
        background: var(--box-bg);
        border-radius: 15px;
    }

    #home-btn {
        display: none;
    }

    #side-home-btn {
        display: flex;
    }

    .header-mid .header-btns {
        margin-left: 0;
    }

    #mobile-menu {
        display: flex;
        align-self: start;
        cursor: pointer;
    }

    .side-menu {
        display: none;
    }

    .side-menu-opened {
        display: block;
        margin-top: 0;
    }
}

@media screen and (min-width: 1350px) {
    .week-div {
        gap: 10px !important;
    }

    .month-date-div {
        width: 42px !important;
        height: fit-content;
    }
}


@media screen and (max-width: 1240px) {
    .toggles-sorts-mob {
        display: flex;
    }
}

@media screen {
    .week-div {
        gap: 10px;
    }

    .month-div {
        padding: 25px;
    }

    .article {
        max-width: 992px;
        margin-left: auto;
        margin-right: auto;
    }

    #flights-toggles-wrap {
        order: 0;
    }

    #flights-sorts-wrap {
        order: 1;
    }

    #flights-sliders-wrap {
        order: 2;
    }

    #flights-sorts-wrap .next-prev-btn,
    #flights-toggles-wrap .next-prev-btn {
        margin-bottom: 14px;
    }
}

@media screen and (min-width: 768px) {
    #flights-sorts-wrap {
        width: 62% !important;
        gap: 10px;
    }

    #flights-toggles-wrap {
        width: 35% !important;
        gap: 10px;
    }

    .joined-trip {
        grid-template-columns: 1fr !important;
    }

    .return-trip {
        grid-template-columns: 1fr 1fr !important;
    }

    .cities-div-wrap {
        margin-top: -5px;
    }

    .calendar-wrap {
        top: 158px;
    }
}

@media screen and (min-width: 576px) {

    .flights-wrap {
        grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
    }

    .wrap i {
        font-size: 14px !important;
    }

    .result-value,
    .result-value2 {
        font-size: 15px !important;
    }

    .airports-filter-div i,
    .wrap div,
    .wrap span:not(.notify-heading span):not(.webAlert span):not(.beta):not(.ds-flights span):not(.t-flights span):not(.airport-info span),
    .result-heading3,
    [id*="notify-btn"] {
        font-size: 16px !important;
    }

    [id*="depart-time"],
    [id*="arrival-time"],
    [id*="depart-airport-code"],
    [id*="arrival-airport-code"],
    [id*="book-flight-btn"],
    [id*="book-flight-btn"] span,
    [id*="book-flight-btn"] i,
    #show-all-btn i,
    #show-all-btn,
    #show-all-btn span {
        font-size: 17px !important;
    }

    #show-all-btn,
    #show-all-btn span {
        font-weight: 500;
    }

    #flights-all-wrap,
    .flights-all-wrap-div,
    .flights-wrap {
        width: 100%;
    }

    /* Flight Results */
    .wrap-box {
        padding: 15px 30px;
    }

    .page-start {
        margin-top: 35px !important;
    }

    [id*="book-flight-btn"] {
        padding: 8px;
        /* margin-top: 7px; */
    }

    .result-prices {
        gap: 7px 8px;
    }

    .plane-div i {
        display: none;
    }

    .result-cta-btns button:not(.notification-wrap button) {
        padding: 6px !important;
    }

    .result-prices-wrap i {
        margin: 0;
    }

    .result-prices-wrap,
    .result-top {
        padding: 9px 11px;
        border-radius: 15px;
    }

    .wrap {
        padding-bottom: 0;
        padding: 9px;
        gap: 5px;
    }

    .wrap .y {
        gap: 0px !important;
    }

    .result-data-div,
    .result-price-div {
        padding: 7px 10px !important;
        gap: 0px !important;
    }

    .result-dt {
        padding: 3px !important;
        gap: 0px;
    }

    .plane-div {
        gap: 3px;
    }

    .result-cta-btns {
        margin-top: 0px;
        margin-left: 0px;
    }

    .result-prices {
        grid-template-columns: 1fr 1fr;
    }
}

#flights-all-wrap,
#gpf-map-wrapper {
    display: none;
    position: relative;
}

/* while animating OUT → remove from layout */
.gpf-exit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

@media screen and (max-width: 710px) {
    .trip-wrapper {
        flex-direction: column !important;
    }
}