:root {
    --floan_white: #ffffff;
    --floan_lightgrey: #aeadc7;
    --floan_navy: #090653;
    --floan_purple: #b678ea; /*a362fd*/

    --dark_light_sunset: var(--floan_navy);
    --light_dark_sunset: var(--floan_white);
    --purple_dark_sunset: var(--floan_purple);
    --dark_light_night: var(--floan_navy);
    --light_dark_night: var(--floan_white);
    --dark_purple_night: var(--floan_navy);
    --purple_dark_night: var(--floan_purple);
    --purple_light_night: var(--floan_purple);
    --title_color: var(--floan_purple);
    --title_btn_color: var(--floan_white);
    --title_btn_hover_color: var(--floan_navy);
    --gradient_color1: #A362FD;
    --gradient_color2: #C287DD;
    --gradient_color3: #F9E3D5;
    --gradient_top: #F9E3D5;
    --top_image_url: url("../../Content/Backgrounds/Default/TopBackground.png");
    --bottom_image_url: url("../../Content/Backgrounds/Default/BottomBackground.png");
    --home_image_url: url("../../Content/Backgrounds/Default/HomeBackground.jpg");
    --about_image_url: url("../../Content/Backgrounds/Default/AboutBackground.jpg");
    --navbar_logo_url: url("../../Content/Logos/LogoWithTagline/Logo_02_dark.svg");
    --navbar_background: rgba(255,255,255,0.4);
    --background_lighter: 0.2;
}

@font-face {
    font-family: 'HeaderFont';
    src: url(/fonts/HeaderFont/Chillax-Variable.ttf);
    font-weight: 200 700;
    font-display: block;
    font-style: normal;
}


html {
    scroll-behavior: smooth;
    background-color: transparent !important;
}

body {
    position: relative;
    padding-top: 0px;
    padding-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    font-display: block;
}

.gradient-background {
    background: linear-gradient(var(--gradient_color1), var(--gradient_color2), var(--gradient_color3));
    z-index: -1;
}

.home-background {
    background: var(--home_image_url) center top no-repeat;
    background-size: cover;
    margin-bottom: -50px;
    margin-top: -200px;
    padding-top: 200px;
}

.about-background {
    background: var(--about_image_url) center bottom no-repeat;
    background-size: cover;
    margin-bottom: -50px;
    margin-top: -200px;
    padding-top: 200px;
}

div.wheel {
    position: absolute;
    z-index: 10;
    right: 5px;
    bottom: 5px;
    max-width: calc(10% - 15px);
    min-width: 80px;
    aspect-ratio: 1/1;
    overflow: hidden;
    background-color: rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    background-image: url(../../Content/Logos/FloanSearchInner.svg);
    background-size: cover;
    opacity: 0.8;
}

#WheelIcon {
    height: 100%;
    width: 100%;
    animation: spin 20s linear infinite;
}

div.home-background > div.page-content, div.about-background > div.page-content {
    padding-bottom: 50px;
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.home-background-mobile {
    position: relative;
    margin-bottom: -50px;
}

    .home-background-mobile::before {
        content: "";
        background: var(--home_image_url) center bottom no-repeat;
        mask-image: linear-gradient(transparent 35%, rgba(0, 0, 0, 1) 65%);
        -webkit-mask-image: linear-gradient(transparent 35%, rgba(0, 0, 0, 1) 65%);
        background-size: 250% auto;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        left: 0;
        z-index: -1;
    }

.about-background-mobile {
    position: relative;
    margin-bottom: -50px;
}

    .about-background-mobile::before {
        content: "";
        background: var(--about_image_url) center bottom no-repeat;
        mask-image: linear-gradient(transparent 35%, rgba(0, 0, 0, 1) 65%);
        -webkit-mask-image: linear-gradient(transparent 35%, rgba(0, 0, 0, 1) 65%);
        background-size: 250% auto;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: -1;
    }

div.home-background-mobile > div.page-content, div.about-background-mobile > div.page-content {
    padding-bottom: 50px;
    min-height: calc(100vh - 25px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.top-image {
    position: absolute;
    z-index: -1;
    top: 0px;
    width: 100%;
    height: 100%;
    background: var(--top_image_url) center top no-repeat;
    background-size: cover;
}

img.navbar-logo {
    content: var(--navbar_logo_url);
    padding: 5px;
    max-height: 50px;
    max-width: 100%;
}

.bottom-image {
    position: absolute;
    top: 0px;
    height: 100%;
    background: var(--bottom_image_url) center bottom no-repeat;
    background-size: contain;
}

/*disable scrolling on mobile when modal open*/
@media only screen and (max-width: 768px) {
    body.overlay-open {
        overflow: hidden;
    }
}

.body-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: absolute;
    left: 0;
    right: 0;
    margin-right: 0px;
    margin-left: 0px;
    background: linear-gradient(var(--gradient_top) 20px, var(--gradient_color1) 250px, var(--gradient_color2), var(--gradient_color3));
    z-index: -1;
}

    .body-content.lighter::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, var(--background_lighter));
        z-index: -1;
    }

.mobile-body-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: absolute;
    left: 0;
    right: 0;
    margin-right: 0px;
    margin-left: 0px;
    background: linear-gradient(var(--gradient_color1) 100px, var(--gradient_color2), var(--gradient_color3));
    z-index: -1;
}

.body-content.doublegradient {
    background: linear-gradient(var(--gradient_top) 20px, var(--gradient_color1) 250px, var(--gradient_color2), var(--gradient_color3) 100vh, var(--gradient_color1) 150vh, var(--gradient_color2), var(--gradient_color3));
}

.mobile-body-content.doublegradient {
    background: linear-gradient(var(--gradient_color1) 100px, var(--gradient_color2), var(--gradient_color3) 100vh, var(--gradient_color1) 200vh, var(--gradient_color2), var(--gradient_color3));
}


/*FOOTER*/
footer {
    opacity: 0.7;
}

div.page-footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 2;
}

hr.page-footer {
    margin-top: 5px;
    height: 1px;
    width: 100%;
    border-top: 1px solid var(--floan_navy);
}


/*LAYOUT*/
div.page-content {
    padding: 10px 10% 20px 10%;
}

div.full-width {
    width: 100%;
}

div.centered-row, p.centered-row {
    display: flex;
    align-items: center;
}

div.stretch-row {
    display: flex;
    align-items: stretch;
}

div.centered-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}


@media only screen and (max-width: 576px) {
    .xs-hide {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    div.page-content {
        padding: 5px 20px 20px 20px;
    }

    .sm-hide {
        display: none;
    }
}

@media only screen and (max-width: 992px) {
    div.page-content {
        padding: 10px 5% 20px 5%;
    }

    .md-hide {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    div.sm-centered-row {
        display: flex;
        align-items: center;
    }

    div.sm-stretch-row {
        display: flex;
        align-items: stretch;
    }

    div.sm-centered-col {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
}

@media only screen and (min-width: 992px) {
    div.md-centered-row {
        display: flex;
        align-items: center;
    }

    div.md-stretch-row {
        display: flex;
        align-items: stretch;
    }

    div.md-centered-col {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
}


@media only screen and (max-width: 1200px) {
    .lg-hide {
        display: none;
    }
}

@media only screen and (min-width: 1200px) {
    div.lg-centered-row {
        display: flex;
        align-items: center;
    }

    div.lg-stretch-row {
        display: flex;
        align-items: stretch;
    }

    div.lg-centered-col {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
}


/*NAVBAR*/
div.navbar {
    padding: 15px 10% 15px 10%;
    margin: 30px 0;
    z-index: 10;
    top: 0;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    min-height: 100px;
}

div.navbar-mobile {
    background-size: cover;
    background-image: linear-gradient(to top, var(--gradient_color1), var(--gradient_top));
    background-color: var(--navbar_background);
    min-height: 80px;
    margin: 0;
}

@media only screen and (max-width: 992px) {
    div.navbar {
        padding: 15px 5% 15px 5%;
    }
}

div.navbar-time {
    padding: 0 50px 0 100px;
    flex-grow: 1
}

    div.navbar-time p {
        margin: 0;
    }

div.navbar-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

div.navbar-links {
    width: fit-content;
    float: right;
}

a.navlink {
    background-color: transparent !important;
    font-weight: 400;
    font-size: 16px;
    color: var(--dark_light_sunset);
    text-decoration: none;
}

    a.navlink > div.navlink-icon {
        background-color: var(--dark_light_sunset);
        width: 20px;
        height: 20px;
        mask-position: center;
        mask-repeat: no-repeat;
    }

    a.navlink:hover {
        text-shadow: 0px 0px 2px var(--dark_light_sunset);
    }

a.navlink-mobile {
    background-color: transparent !important;
    color: var(--floan_navy);
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    margin: 12px 0;
}

    a.navlink-mobile:active {
        text-shadow: 0px 0px 1px var(--floan_navy);
    }

/*NAVBAR POPUPS*/
div.counter {
    position: absolute;
    z-index: 1;
    right: 8px;
    top: 8px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background-color: var(--floan_white);
}

    div.counter p {
        font-size: 12px;
        text-align: center;
    }


/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
    white-space: normal;
}


/*TEXT ELEMENTS*/

h1, h2, h3, h4, h5, h6,
h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b,
h1 > span, h2 > span, h3 > span, h4 > span, h5 > span, h6 > span {
    font-family: HeaderFont;
    color: var(--floan_purple);
    cursor: default;
}

    h1.body-font, h2.body-font, h3.body-font, h4.body-font, h5.body-font, h6.body-font, b.body-font, p.body-font, span.body-font {
        font-family: 'Poppins', sans-serif;
    }

p.header-font, b.header-font, span.header-font {
    font-family: HeaderFont;
}


label, p, b, li {
    font-family: 'Poppins', sans-serif;
    color: var(--floan_navy);
    font-size: 16px;
    cursor: default;
}

    p.no-overflow {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

a {
    font-family: 'Poppins', sans-serif;
    color: var(--floan_navy);
    font-size: 16px;
    cursor: pointer;
}

label {
    font-weight: 400;
}


@media (hover:none) {
    a {
        text-decoration: underline;
    }
}

a.link {
    text-decoration: underline;
}

    a.link:hover {
        font-weight: bold;
    }

.hover-text-container {
    position: relative;
}

    .hover-text-container:hover > div.hover-text {
        display: block;
    }

div.hover-text {
    display: none;
    position: absolute;
    z-index: 5;
    left: calc(50% - 100px);
    top: 100%;
    width: 200px;
    padding: 5px;
    background-color: var(--floan_white);
    color: var(--floan_purple);
    border: 1px solid var(--floan_purple);
    border-radius: 10px;
}

    div.hover-text > p {
        margin: 0;
    }


label.purple, p.purple, b.purple, a.purple, p.purple > b {
    color: var(--floan_purple);
}

span.purple, b.purple {
    color: var(--floan_purple) !important;
}

h1.dark, h2.dark, h3.dark, h4.dark, h5.dark, h6.dark,
h1.dark > b, h2.dark > b, h3.dark > b, h4.dark > b, h5.dark > b, h6.dark > b,
h1.dark > span, h2.dark > span, h3.dark > span, h4.dark > span, h5.dark > span, h6.dark > span,
span.dark {
    color: var(--floan_navy);
}

h1.light, h2.light, h3.light, h4.light, h5.light, h6.light,
h1.light > b, h2.light > b, h3.light > b, h4.light > b, h5.light > b, h6.light > b,
h1.light > span, h2.light > span, h3.light > span, h4.light > span, h5.light > span, h6.light > span,
label.light, p.light, ul.light, ul.light > li, p.light > b, p.light > span {
    color: var(--floan_white);
}

b.light, a.light, span.light {
    color: var(--floan_white) !important;
}

h1.dark-light-sunset, h2.dark-light-sunset, h3.dark-light-sunset, h4.dark-light-sunset, h5.dark-light-sunset, h6.dark-light-sunset,
h1.dark-light-sunset > b, h2.dark-light-sunset > b, h3.dark-light-sunset > b, h4.dark-light-sunset > b, h5.dark-light-sunset > b, h6.dark-light-sunset > b,
h1.dark-light-sunset > span, h2.dark-light-sunset > span, h3.dark-light-sunset > span, h4.dark-light-sunset > span, h5.dark-light-sunset > span, h6.dark-light-sunset > span,
label.dark-light-sunset, p.dark-light-sunset, b.dark-light-sunset, span.dark-light-sunset, a.dark-light-sunset, p.dark-light-sunset > b, p.dark-light-sunset > span, ul.dark-light-sunset > li {
    color: var(--dark_light_sunset);
}

h1.dark-light-night, h2.dark-light-night, h3.dark-light-night, h4.dark-light-night, h5.dark-light-night, h6.dark-light-night,
h1.dark-light-night > b, h2.dark-light-night > b, h3.dark-light-night > b, h4.dark-light-night > b, h5.dark-light-night > b, h6.dark-light-night > b,
h1.dark-light-night > span, h2.dark-light-night > span, h3.dark-light-night > span, h4.dark-light-night > span, h5.dark-light-night > span, h6.dark-light-night > span,
label.dark-light-night, p.dark-light-night, b.dark-light-night, span.dark-light-night, ul.dark-light-night, a.dark-light-night, p.dark-light-night > b, p.dark-light-night > span, ul.dark-light-night > li, ul.dark-light-night b {
    color: var(--dark_light_night);
}

h1.light-dark-night, h2.light-dark-night, h3.light-dark-night, h4.light-dark-night, h5.light-dark-night, h6.light-dark-night,
h1.light-dark-night > b, h2.light-dark-night > b, h3.light-dark-night > b, h4.light-dark-night > b, h5.light-dark-night > b, h6.light-dark-night > b,
h1.light-dark-night > span, h2.light-dark-night > span, h3.light-dark-night > span, h4.light-dark-night > span, h5.light-dark-night > span, h6.light-dark-night > span,
label.light-dark-night, p.light-dark-night, b.light-dark-night, span.light-dark-night, a.light-dark-night, p.light-dark-night > b, p.light-dark-night > span, ul.light-dark-night li {
    color: var(--light_dark_night);
}

h5.purple-dark-night, p.purple-dark-night, b.purple-dark-night, span.purple-dark-night, p.purple-dark-night > b, p.purple-dark-night > span,
p > b.purple-dark-night, span > b.purple-dark-night {
    color: var(--purple_dark_night);
}

p.purple-dark-sunset, b.purple-dark-sunset, span.purple-dark-sunset, p.purple-dark-sunset > b, p.purple-dark-sunset > span,
p > b.purple-dark-sunset, span > b.purple-dark-sunset {
    color: var(--purple_dark_sunset);
}


p.dark-purple-night, p.dark-purple-night > b {
    color: var(--dark_purple_night);
}

h1.multiline, h2.multiline {
    margin-bottom: -20px;
}

h3.multiline, h4.multiline, h5.multiline, h6.multiline, p.multiline {
    margin: 0px;
}

h1.main-title {
    font-weight: 700;
    font-size: 100px;
}

h1, h1 > b, h1 > span {
    font-weight: 700;
    font-size: 80px;
}

h2, h2 > b, h2 > span {
    font-weight: 700;
    font-size: 60px;
}

h3, h3 > b, h3 > span {
    font-weight: 700;
    font-size: 40px;
}

h4, h4 > b, h4 > span {
    font-weight: 600;
    font-size: 30px;
}

h5, h5 > b, h5 > span {
    font-weight: 600;
    font-size: 25px;
}

h6, h6 > b, h6 > span {
    font-weight: 500;
    font-size: 16px;
}

@media only screen and (max-width: 768px) {
    h1.main-title {
        font-size: 50px;
    }

    h1, h1 > b, h1 > span {
        font-size: 45px;
    }

    h2, h2 > b, h2 > span {
        font-size: 40px;
    }

    h3, h3 > b, h3 > span {
        font-size: 30px;
    }

    h4, h4 > b, h4 > span {
        font-size: 25px;
    }

    h5, h5 > b, h5 > span {
        font-size: 20px;
    }

    label, p, a, b {
        font-size: 14px;
    }
}

p.checkbox-label {
    width: calc(100% - 20px);
    float: right;
    font-size: 12px;
    margin: 0;
}

div.imagetext {
    z-index: 1;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: calc(100% - 20px);
    margin: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

p.imagetext, b.imagetext {
    z-index: 1;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: calc(100% - 20px);
    margin: 10px;
    font-size: large;
}

    p.imagetext > b {
        font-size: large;
    }

    div.imagetext.padded, p.imagetext.padded, b.imagetext.padded {
        padding: 0px 20px;
    }

div.imagetext p, div.imagetext b {
    font-size: large;
}

div.imagetext > span {
    transform: rotate(90deg);
    margin-left: 20px;
}

@media only screen and (max-width: 768px) {
    div.imagetext.padded, p.imagetext.padded, b.imagetext.padded {
        padding: 0px 10px;
    }
}


label.checkbox-label {
    width: calc(100% - 35px);
    float: right;
    font-size: 15px;
    margin-bottom: 20px;
    margin-top: 5px;
}


/*TEXT ANIMATIONS*/
.char {
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    transform: translate(0px, 50%);
    transition: opacity .8s, transform .8s ease-in-out;
}

.animatedTitle {
    visibility: hidden;
    opacity: 0;
    transform: translate(0px, 50%);
    transition: opacity .8s, transform .8s ease-in-out;
}



/*IMAGE ANIMATIONS*/
img.profile-picture {
    border-radius: 50%;
    background-color: var(--floan_lightgrey);
}

img.parallax-image {
    filter: drop-shadow(black 10px 10px 10px);
}

div.purple-wash, div.navy-wash {
    position: relative;
}

    div.purple-wash::after {
        content: "";
        position: absolute;
        bottom: 0;
        height: 50%;
        left: 0;
        right: 0;
        background: linear-gradient(to top, var(--floan_purple), rgba(255,255,255,0));
        background-size: cover;
        border-radius: 0 0 25px 25px;
    }

    div.navy-wash::after {
        content: "";
        position: absolute;
        bottom: 0;
        height: 50%;
        left: 0;
        right: 0;
        background: linear-gradient(to top, var(--floan_navy), rgba(255,255,255,0));
        background-size: cover;
        border-radius: 0 0 25px 25px;
    }

    div.purple-wash.rounded-2::after, div.navy-wash.rounded-2::after {
        border-radius: 0 0 50px 50px;
    }

img.rounded {
    width: 100%;
    border-radius: 25px;
}

img.rounded-2 {
    width: 100%;
    border-radius: 50px;
}

div.img-hover-zoom {
    overflow: hidden;
    border-radius: 25px;
    cursor: pointer;
    position: relative;
}

    div.img-hover-zoom > img {
        transition: transform .5s ease;
    }

    div.img-hover-zoom:hover > img {
        transform: scale(1.5);
        border-radius: 25px;
    }


/*BUTTONS*/

span.icon-btn {
    color: var(--floan_purple);
    cursor: pointer;
}

    span.icon-btn:hover {
        color: var(--floan_navy);
    }

    span.icon-btn:active {
        color: var(--floan_purple);
    }

@media (hover:none) {
    span.icon-btn:active {
        color: var(--floan_navy);
    }
}

button {
    font-family: 'Poppins', sans-serif;
    color: var(--floan_white);
    background-color: var(--floan_purple);
    text-align: center;
    border: 0;
    border-radius: 22px;
    height: 44px;
    width: 200px;
    max-width: 100%;
    font-weight: 500;
    margin: 5px;
    padding: 0 15px;
}

    button.outline {
        border: 2px solid var(--floan_purple);
        background-color: transparent;
        color: var(--floan_purple);
    }

    button:hover {
        color: var(--floan_purple);
        background-color: var(--floan_white);
    }

    button:active {
        color: var(--floan_white);
        background-color: var(--floan_purple);
    }

@media (hover:none) {
    button:active {
        color: var(--floan_purple);
        background-color: var(--floan_white);
    }
}

button.outline:hover {
    background-color: var(--floan_purple);
    color: var(--floan_white);
}

button.outline:active {
    background-color: transparent;
    color: var(--floan_purple);
}

@media (hover:none) {
    button:active {
        background-color: var(--floan_purple);
        color: var(--floan_white);
    }
}

button.dark {
    color: var(--floan_white);
    background-color: var(--floan_navy);
}

    button.dark > svg {
        fill: var(--floan_white);
    }

    button.dark.outline {
        border: 2px solid var(--floan_navy);
        background-color: transparent;
        color: var(--floan_navy);
    }

    button.dark:hover {
        color: var(--floan_navy);
        background-color: var(--floan_white);
    }

    button.dark:active {
        color: var(--floan_white);
        background-color: var(--floan_navy);
    }

@media (hover:none) {
    button.dark:active {
        color: var(--floan_navy);
        background-color: var(--floan_white);
    }
}

button.dark:hover > svg {
    fill: var(--floan_navy);
}

button.dark:active > svg {
    fill: var(--floan_white);
}

button.dark.outline:hover {
    background-color: var(--floan_navy);
    color: var(--floan_white);
}

button.dark.outline:active {
    background-color: transparent;
    color: var(--floan_navy);
}

@media (hover:none) {
    button.dark.outline:active {
        background-color: var(--floan_navy);
        color: var(--floan_white);
    }
}

button.dark2 {
    color: var(--floan_white);
    background-color: var(--floan_navy);
}

    button.dark2:hover {
        background-color: var(--floan_purple);
    }

    button.dark2:active {
        background-color: var(--floan_navy);
    }

@media (hover:none) {
    button.dark2:active {
        background-color: var(--floan_purple);
    }
}

button.dark-light-night {
    color: var(--light_dark_night);
    background-color: var(--dark_light_night);
}

    button.dark-light-night > svg {
        fill: var(--light_dark_night);
    }

    button.dark-light-night.outline {
        border: 2px solid var(--dark_light_night);
        background-color: transparent;
        color: var(--dark_light_night);
    }

    button.dark-light-night:hover {
        color: var(--dark_light_night);
        background-color: var(--light_dark_night);
    }

    button.dark-light-night:active {
        color: var(--light_dark_night);
        background-color: var(--dark_light_night);
    }

@media (hover:none) {
    button.dark-light-night:active {
        color: var(--dark_light_night);
        background-color: var(--light_dark_night);
    }
}

button.dark-light-night:hover > svg {
    fill: var(--dark_light_night);
}

button.dark-light-night:active > svg {
    fill: var(--light_dark_night);
}

@media (hover:none) {
    button.dark-light-night:active > svg {
        fill: var(--dark_light_night);
    }
}

button.dark-light-night.outline:hover {
    background-color: var(--dark_light_night);
    color: var(--light_dark_night);
}

button.dark-light-night.outline:active {
    background-color: transparent;
    color: var(--dark_light_night);
}

@media (hover:none) {
    button.dark-light-night.outline:active {
        background-color: var(--dark_light_night);
        color: var(--light_dark_night);
    }
}

button.dark-purple-night {
    color: var(--floan_white);
    background-color: var(--dark_purple_night);
}

    button.dark-purple-night:hover {
        color: var(--dark_purple_night);
        background-color: var(--floan_white);
    }

    button.dark-purple-night:active {
        color: var(--floan_white);
        background-color: var(--dark_purple_night);
    }

@media (hover:none) {
    button.dark-purple-night:active {
        color: var(--dark_purple_night);
        background-color: var(--floan_white);
    }
}

button.purple-dark-night {
    color: var(--floan_white);
    background-color: var(--purple_dark_night);
}

    button.purple-dark-night:hover {
        color: var(--purple_dark_night);
        background-color: var(--floan_white);
    }

    button.purple-dark-night:active {
        color: var(--floan_white);
        background-color: var(--purple_dark_night);
    }

@media (hover:none) {
    button.purple-dark-night:active {
        color: var(--purple_dark_night);
        background-color: var(--floan_white);
    }
}

button.dark-light-sunset {
    color: var(--light_dark_sunset);
    background-color: var(--dark_light_sunset);
}

    button.dark-light-sunset.outline {
        border: 2px solid var(--dark_light_sunset);
        background-color: transparent;
        color: var(--dark_light_sunset);
    }

    button.dark-light-sunset:hover {
        color: var(--dark_light_sunset);
        background-color: var(--light_dark_sunset);
    }

    button.dark-light-sunset:active {
        color: var(--light_dark_sunset);
        background-color: var(--dark_light_sunset);
    }

@media (hover:none) {
    button.dark-light-sunset:active {
        color: var(--dark_light_sunset);
        background-color: var(--light_dark_sunset);
    }
}

button.dark-light-sunset.outline:hover {
    background-color: var(--dark_light_sunset);
    color: var(--light_dark_sunset);
}

button.dark-light-sunset.outline:active {
    background-color: transparent;
    color: var(--dark_light_sunset);
}

@media (hover:none) {
    button.dark-light-sunset.outline:active {
        background-color: var(--dark_light_sunset);
        color: var(--light_dark_sunset);
    }
}

button.light {
    color: var(--floan_navy);
    background-color: var(--floan_white);
}

    button.light.outline {
        border: 2px solid var(--floan_white);
        background-color: transparent;
        color: var(--floan_white);
    }

    button.light:hover {
        color: var(--floan_white);
        background-color: var(--floan_navy);
    }

    button.light:active {
        color: var(--floan_navy);
        background-color: var(--floan_white);
    }

@media (hover:none) {
    button.light:active {
        color: var(--floan_white);
        background-color: var(--floan_navy);
    }
}

button.light.outline:hover {
    background-color: var(--floan_white);
    color: var(--floan_navy);
}

button.light.outline:active {
    background-color: transparent;
    color: var(--floan_white);
}

@media (hover:none) {
    button.light.outline:active {
        background-color: var(--floan_white);
        color: var(--floan_navy);
    }
}

button.light-dark-night {
    color: var(--dark_light_night);
    background-color: var(--light_dark_night);
}

    button.light-dark-night.outline {
        border: 2px solid var(--light_dark_night);
        background-color: transparent;
        color: var(--light_dark_night);
    }

    button.light-dark-night:hover {
        color: var(--light_dark_night);
        background-color: var(--dark_light_night);
    }

    button.light-dark-night:active {
        color: var(--dark_light_night);
        background-color: var(--light_dark_night);
    }

@media (hover:none) {
    button.light-dark-night:active {
        color: var(--light_dark_night);
        background-color: var(--dark_light_night);
    }
}

button.light-dark-night.outline:hover {
    background-color: var(--light_dark_night);
    color: var(--dark_light_night);
}

button.light-dark-night.outline:active {
    background-color: transparent;
    color: var(--light_dark_night);
}

@media (hover:none) {
    button.light-dark-night.outline:active {
        background-color: var(--light_dark_night);
        color: var(--dark_light_night);
    }
}


button.facebook-btn {
    margin: 10px 5px;
    width: 300px;
    color: var(--floan_navy);
    fill: #1877f2;
    background-color: white;
}

    button.facebook-btn > svg {
        margin-left: 10px;
        width: 40px;
        height: 40px;
    }

    button.facebook-btn:hover {
        color: white;
        fill: white;
        background-color: var(--floan_navy);
    }

    button.facebook-btn:active {
        color: var(--floan_navy);
        fill: #1877f2;
        background-color: white;
    }

@media (hover:none) {
    button.facebook-btn:active {
        color: white;
        fill: white;
        background-color: var(--floan_navy);
    }
}

button.twitter-btn {
    margin: 10px 5px;
    width: 300px;
    color: var(--floan_navy);
    fill: black;
    background-color: white;
}

    button.twitter-btn > svg {
        margin-left: 10px;
        width: 25px;
        height: 25px;
    }

    button.twitter-btn:hover {
        color: white;
        fill: white;
        background-color: var(--floan_navy);
    }

    button.twitter-btn:active {
        color: var(--floan_navy);
        fill: black;
        background-color: white;
    }

@media (hover:none) {
    button.twitter-btn:active {
        color: white;
        fill: white;
        background-color: var(--floan_navy);
    }
}

button.title-btn {
    color: var(--title_btn_hover_color);
    background-color: var(--title_btn_color);
}

    button.title-btn:hover {
        color: var(--title_btn_color);
        background-color: var(--title_btn_hover_color);
    }

    button.title-btn:active {
        color: var(--title_btn_hover_color);
        background-color: var(--title_btn_color);
    }

@media (hover:none) {
    button.title-btn:active {
        color: var(--title_btn_color);
        background-color: var(--title_btn_hover_color);
    }
}

button.title-btn.animated > span {
    color: var(--purple_light_night);
}

button.title-btn.animated:hover > span {
    color: var(--floan_purple);
}


button.round-large {
    height: 60px;
    width: 60px;
    border-radius: 30px;
    max-width: unset;
    padding: 2px;
}

button.round-medium {
    height: 40px;
    width: 40px;
    border-radius: 20px;
    padding: 0px;
    font-size: 18px;
    max-width: unset;
}

    button.round-medium > span {
        margin-top: 5px;
        font-size: 20px;
    }

button.round-small {
    height: 30px;
    width: 30px;
    border-radius: 15px;
    max-width: unset;
    padding: 0;
}

    button.round-small > span {
        margin-top: 2px;
    }


button.round-extrasmall {
    height: 20px;
    width: 20px;
    border-radius: 10px;
    padding: 1px;
}

    button.round-extrasmall.outline {
        padding: 0px;
    }

    button.round-extrasmall > span {
        font-size: 15px;
    }

button.icon {
    padding-right: 20px;
    padding-left: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

    button.icon span {
        margin-left: 10px;
    }

button.dark-light-night.icon > span.chat-icon {
    background-color: var(--dark_light_night);
}

button.dark-light-night.icon:hover > span.chat-icon {
    background-color: var(--light_dark_night);
}

button.dark-light-night.icon:active > span.chat-icon {
    background-color: var(--dark_light_night);
}

@media (hover:none) {
    button.title-btn:active {
        background-color: var(--light_dark_night);
    }
}


button.animated {
    display: flex;
    align-items: center;
    justify-content: center;
}

    button.animated > div {
        margin-left: -10px;
        height: 100%;
        min-width: 50px;
        background-image: linear-gradient(to right, transparent 20%, var(--floan_white) 50%);
        mask-image: url(../../Content/Icons/BtnIcon.svg);
        -webkit-mask-image: url(../../Content/Icons/BtnIcon.svg);
        mask-size: 100%;
        -webkit-mask-size: 100%;
        mask-position: 0px 50%;
        -webkit-mask-position: 0px 50%;
        transition: all .8s ease-in-out;
    }

    button.animated:hover > div {
        background-image: linear-gradient(to right, transparent 20%, var(--floan_purple) 50%);
        mask-position: 50px 50%;
    }

button.title-btn.animated > div {
    background-image: linear-gradient(to right, transparent 20%, var(--purple_light_night) 50%);
}

button.title-btn.animated:hover > div {
    background-image: linear-gradient(to right, transparent 20%, var(--floan_purple) 50%);
}

button.dark.animated > div {
    background-image: linear-gradient(to right, transparent 20%, var(--floan_purple) 50%);
}

button.dark2.animated > div {
    background-image: linear-gradient(to right, transparent 20%, var(--floan_purple) 50%);
}

button.dark2.animated:hover > div {
    background-image: linear-gradient(to right, transparent 20%, var(--floan_white) 50%);
}

button.dark-light-night.animated > div {
    background-image: linear-gradient(to right, transparent 20%, var(--purple_dark_night) 50%);
}

button.dark-light-night.animated:hover > div {
    background-image: linear-gradient(to right, transparent 20%, var(--purple_light_night) 50%);
}

button.dark-purple-night.animated > div {
    background-image: linear-gradient(to right, transparent 20%, var(--purple_light_night) 50%);
}

button.dark-purple-night.animated:hover > div {
    background-image: linear-gradient(to right, transparent 20%, var(--floan_purple) 50%);
}


button.chat-icon, span.chat-icon {
    mask-image: url(../Content/Icons/ChatBtn.svg);
    -webkit-mask-image: url(../Content/Icons/ChatBtn.svg);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    border-radius: 0;
}

button.phone-icon {
    mask-image: url(../Content/Icons/PhoneBtn.png);
    -webkit-mask-image: url(../Content/Icons/PhoneBtn.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    border-radius: 0;
}

button.twitter-icon {
    mask-image: url(../Content/Icons/TwitterBtn.svg);
    -webkit-mask-image: url(../Content/Icons/TwitterBtn.svg);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    border-radius: 0;
}

button.insta-icon {
    mask-image: url(../Content/Icons/InstaBtn.png);
    -webkit-mask-image: url(../Content/Icons/InstaBtn.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    border-radius: 0;
}

button.ticktok-icon {
    mask-image: url(../Content/Icons/TikTokBtn.png);
    -webkit-mask-image: url(../Content/Icons/TikTokBtn.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    border-radius: 0;
}

button.linkedin-icon {
    mask-image: url(../Content/Icons/LinkedInBtn.svg);
    -webkit-mask-image: url(../Content/Icons/LinkedInBtn.svg);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    border-radius: 0;
}


button.smaller {
    width: 150px;
}

button.small {
    width: 100px;
}

button.large {
    max-width: 100%;
    width: 250px;
}

button.fat {
    height: 45px;
    border-radius: 23px;
}

@media only screen and (min-width: 768px) {
    button.big {
        margin-top: 20px;
        height: 60px;
        border-radius: 30px;
        font-size: 18px;
        font-weight: 600;
    }
}


button.full-width {
    width: calc(100% - 10px);
}

button[disabled] {
    pointer-events: none;
}

@media only screen and (max-width: 768px) {
    button.full-width-mobile {
        width: calc(100% - 10px);
        float: none !important;
    }
}

button.scrolldown {
    border-width: 1px !important;
}

    button.scrolldown > span {
        font-size: 40px;
        font-weight: 200;
    }

/*
button.scrolldown-btn {
    position: relative;
    border: 1px solid var(--dark_light_sunset);
    height: 60px;
    width: 60px;
    border-radius: 30px;
    background-color: transparent;
}

    button.scrolldown-btn:hover {
        background-color: var(--dark_light_sunset);
    }

    button.scrolldown-btn::after {
        content: "";
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
        mask-image: url(Icons/DownIcon.svg);
        -webkit-mask-image: url(Icons/DownIcon.svg);
        mask-size:cover;
        background-color: var(--dark_light_sunset);
    }

    button.scrolldown-btn:hover::after {
        background-color: var(--light_dark_night);
    }
    */



/*INPUTS*/
:focus-within {
    outline: none !important;
}

progress {
    height: 12px;
    width: 100%;
    background-color: rgba(255,255,255,0.3);
    border: none;
    border-radius: 6px;
    -webkit-appearance: none;
}

    progress::-webkit-progress-bar {
        background-color: rgba(255,255,255,0.3);
        border-radius: 6px;
        border: none;
    }

    progress::-moz-progress-bar { /*Firefox compatibility*/
        background-color: var(--floan_navy);
        border-radius: 6px;
    }

    progress::-webkit-progress-value {
        background-color: var(--floan_navy);
        border-radius: 6px;
    }



    progress.dark-light-night::-webkit-progress-bar {
        background-color: rgba(255,255,255,0.3);
    }

    progress.dark-light-night::-moz-progress-bar { /*Firefox compatibility*/
        background-color: var(--dark_light_night);
    }

    progress.dark-light-night::-webkit-progress-value {
        background-color: var(--dark_light_night);
    }

    progress.dark-light-night.outline {
        background-color: transparent;
        border: 1px solid var(--dark_light_night);
    }

        progress.dark-light-night.outline::-webkit-progress-bar {
            background-color: transparent;
        }

        progress.dark-light-night.outline::-moz-progress-bar { /*Firefox compatibility*/
            background-color: var(--dark_light_night);
        }

        progress.dark-light-night.outline::-webkit-progress-value {
            background-color: var(--dark_light_night);
        }

    progress.dark-light-sunset::-webkit-progress-bar {
        background-color: rgba(255,255,255,0.3);
    }

    progress.dark-light-sunset::-moz-progress-bar { /*Firefox compatibility*/
        background-color: var(--dark_light_sunset);
    }

    progress.dark-light-sunset::-webkit-progress-value {
        background-color: var(--dark_light_sunset);
    }


input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=color] {
    font-size: 16px;
    color: var(--floan_navy);
    padding: 10px 20px;
    height: 60px;
    width: 100%;
    border-radius: 30px;
    background-color: transparent;
    border: 1px solid var(--floan_navy);
    margin-bottom: 20px;
    outline: none !important;
}

    input[type=text].thin, input[type=email].thin, input[type=password].thin, input[type=tel].thin, input[type=number].thin, select.thin {
        height: 50px;
        border-radius: 25px;
    }

button.thin {
    height: 30px;
    border-radius: 15px;
    margin: 0;
}

    input[type=text].x-thin, input[type=email].x-thin, input[type=password].x-thin, input[type=tel].x-thin, input[type=number].x-thin, select.x-thin {
        height: 45px;
        border-radius: 23px;
    }

button.x-thin {
    height: 24px;
    border-radius: 12px;
    margin: 0;
}

textarea {
    font-size: 16px;
    color: var(--floan_navy);
    padding: 20px 20px;
    height: 150px;
    width: 100%;
    border-radius: 30px;
    background-color: transparent;
    border: 1px solid var(--floan_navy);
    margin-bottom: 20px;
    resize: none;
    outline: none !important;
}

select {
    font-size: 16px;
    color: var(--floan_navy);
    padding: 10px 20px;
    height: 60px;
    width: 100%;
    border-radius: 30px;
    background-color: transparent;
    border: 1px solid var(--floan_navy);
    margin-bottom: 20px;
    outline: none !important;
}

option {
    color: var(--floan_navy);
    Background-color: var(--floan_white);
}

input[type=text]::placeholder, input[type=email]::placeholder, input[type=password]::placeholder, input[type=tel]::placeholder, input[type=number]::placeholder, input[type=color]::placeholder, textarea::placeholder {
    color: var(--floan_navy);
    opacity: 0.7;
}

select:invalid {
    color: rgba(9,6,83,0.7);
}

input:autofill, input:-webkit-autofill, textarea:autofill, textarea:-webkit-autofill {
    filter: none;
    background-image: none;
    background-color: rgba(255,255,255,0.4);
}

@media only screen and (max-width: 768px) {
    input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=color], textarea, select {
        margin-bottom: 15px;
    }
}

div.numberinput {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: var(--floan_navy);
    height: 60px;
    width: 100%;
    border-radius: 30px;
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid var(--floan_navy);
    margin-bottom: 20px;
    outline: none !important;
}

    div.numberinput.thin {
        height: 50px;
        border-radius: 25px;
    }

    div.numberinput.dark-light-night {
        border: 1px solid var(--dark_light_night);
        background-color: transparent;
    }

    div.numberinput input[type=number].numberinput + div > button {
        display: none;
        margin: 1px;
    }

    div.numberinput:hover input[type=number].numberinput + div > button {
        display: block;
    }

    div.numberinput input[type=number].numberinput:disabled + div > button {
        display: none;
    }

    div.numberinput > input[type=number].numberinput {
        width: calc(100% - 25px);
        text-align: left;
        border: none;
    }

input[type="number"].numberinput {
    height: 40px;
    width: 40px;
    padding: 0;
    text-align: center;
    margin: 0;
    border-radius: 10px;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

    input[type="number"].numberinput::-webkit-outer-spin-button,
    input[type="number"].numberinput::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

input[type=text].light, input[type=email].light, input[type=password].light, input[type=tel].light, input[type=number].light {
    color: var(--floan_white);
    border: 1px solid var(--floan_white);
}

    input[type=text].light::placeholder, input[type=email].light::placeholder, input[type=password].light::placeholder, input[type=tel].light::placeholder, input[type=number].light::placeholder {
        color: var(--floan_white);
        opacity: 0.7;
    }

select.light {
    color: var(--floan_white);
    border: 1px solid var(--floan_white);
}

p.prefix {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 20px;
    height: max-content;
    margin: auto;
    width: 40px;
    text-align: center;
    opacity: 0.8;
}


@media only screen and (max-width: 768px) {
    input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select {
        font-size: 14px;
        padding: 4px 10px;
        height: 40px;
        border-radius: 20px;
    }

        input[type=text].thin, input[type=email].thin, input[type=password].thin, input[type=tel].thin, input[type=number].thin, select.thin {
            font-size: 14px;
            padding: 4px 10px;
            height: 44px;
            border-radius: 22px;
            margin-top: 0px;
            margin-bottom: 15px;
        }

    p.prefix {
        bottom: 16px;
    }

    textarea {
        font-size: 14px;
        padding: 10px 10px;
        height: 80px;
        border-radius: 20px;
    }

        textarea.thin {
            font-size: 14px;
            padding: 10px 10px;
            height: 80px;
            border-radius: 22px;
            margin-top: 0px;
            margin-bottom: 15px;
        }
}

input[type=text].dark-light-night, input[type=email].dark-light-night, input[type=password].dark-light-night, input[type=tel].dark-light-night, input[type=number].dark-light-night, textarea.dark-light-night, select.dark-light-night {
    color: var(--dark_light_night);
    border: 1px solid var(--dark_light_night);
}

    input[type=text].dark-light-night::placeholder, input[type=email].dark-light-night::placeholder, input[type=password].dark-light-night::placeholder, input[type=tel].dark-light-night::placeholder, input[type=number].dark-light-night::placeholder, textarea.dark-light-night::placeholder, select.dark-light-night::placeholder {
        color: var(--dark_light_night);
        opacity: 0.7;
    }

input[type=text].dark-light-sunset, input[type=email].dark-light-sunset, input[type=password].dark-light-sunset, input[type=tel].dark-light-sunset, input[type=number].dark-light-sunset, textarea.dark-light-sunset, select.dark-light-sunset {
    color: var(--dark_light_sunset);
    border: 1px solid var(--dark_light_sunset);
}

    input[type=text].dark-light-sunset::placeholder, input[type=email].dark-light-sunset::placeholder, input[type=password].dark-light-sunset::placeholder, input[type=tel].dark-light-sunset::placeholder, input[type=number].dark-light-sunset::placeholder, textarea.dark-light-sunset::placeholder, select.dark-light-sunset::placeholder {
        color: var(--dark_light_sunset);
        opacity: 0.7;
    }

input[type=text].contact-input, input[type=email].contact-input, input[type=tel].contact-input, textarea.contact-input, select.contact-input {
    border: none;
    background-color: rgba(255, 255, 255, 0.5);
}

    input.contact-input::placeholder, textarea.contact-input::placeholder, select.contact-input::placeholder {
        color: var(--floan_navy);
        opacity: 0.7;
    }

input[type=text][disabled], input[type=email][disabled], input[type=password][disabled], input[type=tel][disabled], input[type=color][disabled], input[type=number][disabled], textarea[disabled], select[disabled] {
    cursor: default;
    opacity: 0.7;
}

input[type=checkbox][disabled], input[type=radio][disabled] {
    cursor: default;
}

input[type=range], input[type=radio], input[type=checkbox] {
    accent-color: var(--floan_navy);
}

div.radiogroup {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
}

    div.radiogroup > div {
        border: 1px solid var(--dark_light_sunset);
        width: 18%;
        height: 1px;
    }

    div.radiogroup > p {
        position: absolute;
        top: 40px;
        width: 150px;
        text-align: center
    }

div.radiogroup-mobile {
}

    div.radiogroup-mobile > div {
        border: 1px solid var(--dark_light_sunset);
        width: 1px;
        height: 30px;
        margin: -7px 14px -2px 14px;
    }

    div.radiogroup-mobile > label {
        padding-left: 5px;
    }


div.checkbox-container {
    display: flex;
    flex-direction: row;
}

div.expandable-content div.checkbox-container > input[type=checkbox]:checked + label, div.expandable-content div.checkbox-container > input[type=checkbox]:checked + div > label {
    font-weight: 500;
}

input[type=radio], input[type=checkbox] {
    -webkit-appearance: none;
    border: 2px solid var(--floan_navy);
    margin: 0;
    text-align: center;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    font-size: 22px;
    position: relative;
    cursor: pointer;
    outline: none !important;
}

    input[type=radio].small-square, input[type=checkbox].small-square {
        height: 15px;
        width: 15px;
        border-radius: 5px;
        font-size: 12px;
        position: relative;
    }

    input[type=radio].small-circle, input[type=checkbox].small-circle {
        margin: 2px 15px 0 2px;
        height: 14px;
        width: 14px;
        border-radius: 7px;
        font-size: 12px;
        position: relative;
    }

    input[type=radio].contact-input, input[type=checkbox].contact-input {
        border: 2px solid var(--floan_white);
        background-color: rgba(255, 255, 255, 0.5);
    }

        input[type=radio].contact-input:checked, input[type=checkbox].contact-input:checked {
            background-color: var(--floan_white);
        }

            input[type=radio].contact-input:checked::after, input[type=checkbox].contact-input:checked::after {
                color: var(--floan_navy);
            }

    input[type=radio]:checked, input[type=checkbox]:checked {
        background-color: var(--floan_navy);
    }

        input[type=radio]:checked::after, input[type=checkbox]:checked::after {
            content: "\2714";
            position: absolute;
            top: -4px;
            right: -4px;
            left: -4px;
            bottom: -4px;
            color: var(--floan_white);
        }

    input[type=radio].purple-dark-night, input[type=checkbox].purple-dark-night {
        border: 2px solid var(--purple_dark_night);
    }

        input[type=radio].purple-dark-night:checked, input[type=checkbox].purple-dark-night:checked {
            background-color: var(--purple_dark_night);
        }


    input[type=range].dark-light-night, input[type=radio].dark-light-night, input[type=checkbox].dark-light-night {
        accent-color: var(--dark_light_night);
    }

    input[type=range].purple-dark-night, input[type=radio].purple-dark-night, input[type=checkbox].purple-dark-night {
        accent-color: var(--purple_dark_night);
    }

    input[type=range].dark-light-sunset, input[type=radio].dark-light-sunset, input[type=checkbox].dark-light-sunset {
        accent-color: var(--dark_light_sunset);
    }

    input[type=radio].dark-light-night, input[type=checkbox].dark-light-night {
        border: 2px solid var(--dark_light_night);
    }

        input[type=radio].dark-light-night:checked, input[type=checkbox].dark-light-night:checked {
            background-color: var(--dark_light_night);
        }

            input[type=radio].dark-light-night:checked::after, input[type=checkbox].dark-light-night:checked::after {
                color: var(--light_dark_night);
            }


    input[type=radio].dark-light-sunset, input[type=checkbox].dark-light-sunset {
        border: 2px solid var(--dark_light_sunset);
    }

        input[type=radio].dark-light-sunset:checked, input[type=checkbox].dark-light-sunset:checked {
            background-color: var(--dark_light_sunset);
        }

            input[type=radio].dark-light-sunset:checked::after, input[type=checkbox].dark-light-sunset:checked::after {
                color: var(--light_dark_sunset);
            }


/*SLIDER*/

div.slidercontainer {
    position: relative;
    margin: 15px 0px 15px 0px;
    height: 10px;
}

div.sliderfill {
    background-color: var(--floan_purple);
    position: absolute;
    left: 0;
    top: 0;
    height: 6px;
    border-radius: 3px;
    z-index: 1;
}

    div.sliderfill.purple-dark-night {
        background-color: var(--purple_dark_night);
    }

input[type=range].slider {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: 0;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: var(--floan_white);
    outline: 1px solid var(--floan_lightgrey);
    -webkit-transition: .2s;
    accent-color: var(--floan_white);
}

    input[type=range].slider:hover {
        outline: 1px solid var(--floan_white);
    }

    input[type=range].slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        position: relative;
        margin-top: 1px;
        width: 60px;
        height: 41px;
        z-index: 2;
        background-color: var(--floan_purple);
        -webkit-mask-image: url(Icons/PlaneSlider.svg);
        mask-image: url(Icons/PlaneSlider.svg);
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-position: center;
        cursor: pointer;
    }

    input[type=range].slider.purple-dark-night::-webkit-slider-thumb {
        background-color: var(--purple_dark_night);
    }

    input[type=range].slider::-moz-range-thumb { /*Firefox Compatibility*/
        -webkit-appearance: none;
        appearance: none;
        position: relative;
        margin-bottom: -1px;
        width: 60px;
        height: 40px;
        z-index: 2;
        background-color: var(--floan_purple);
        -webkit-mask-image: url(Icons/PlaneSlider.svg);
        mask-image: url(Icons/PlaneSlider.svg);
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-position: center;
        cursor: pointer;
    }

    input[type=range].slider.purple-dark-night::-moz-range-thumb { /*Firefox Compatibility*/
        background-color: var(--purple_dark_night);
    }



/*SWITCH INPUT*/

div.switch {
    position: relative;
    background-color: transparent;
    border-radius: 20px;
    height: 40px;
    width: 200px;
    max-width: 100%;
    font-size: small;
}

    div.switch.purple-dark-night {
        background-color: transparent !important;
        border: 1px solid var(--purple_dark_night);
    }

    div.switch.dark-light-night {
        background-color: transparent !important;
        border: 1px solid var(--dark_light_night);
    }

    div.switch input[type=checkbox] {
        z-index: 5;
        position: absolute;
        margin: 0;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: 30px;
        opacity: 0;
    }

div.switch-label-left {
    position: absolute;
    left: 0px;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

div.switch-label-right {
    position: absolute;
    right: 0px;
    top: 0;
    bottom: 0;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px;
}

    div.switch-label-left p, div.switch-label-right p {
        font-size: small;
        text-align: center;
        line-height: 0.9;
    }

@media only screen and (max-width: 768px) {
    div .switch {
        border-radius: 15px;
        height: 30px;
        width: 150px;
    }

        div.switch input[type=checkbox] {
            border-radius: 20px;
        }
}

div.slider {
    position: absolute;
    left: 0px;
    width: 50%;
    top: 0;
    bottom: 0;
    border-radius: 26px;
    -webkit-transition: .4s;
    transition: .4s;
}

    div.slider.purple-dark-night {
        border: 0 !important;
        background-color: var(--purple_dark_night);
    }

    div.slider.dark-light-night {
        border: 0 !important;
        background-color: var(--dark_light_night);
    }

input:checked + .slider {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}


div.wide {
    width: 100%;
}


input.searchbar {
    font-size: 16px;
    padding: 6px 12px 6px 0px;
    margin: 0;
    height: 30px;
    border-radius: 0px;
    background-color: transparent;
    border: 0px;
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: bold;
}

    input.searchbar::placeholder, input.searchbar-mobile::placeholder {
        font-weight: normal;
        color: var(--floan_lightgrey);
        opacity: 0.8;
    }

input.searchbar-mobile {
    font-size: 16px;
    padding: 6px 12px 6px 0px;
    margin: 0;
    height: 20px;
    border-radius: 0px;
    background-color: transparent;
    border: 0px;
}

div.error-message {
    margin: 0px;
    color: var(--floan_navy);
    font-size: 12px;
    position: absolute;
    bottom: 2px;
    left: 35px;
    white-space: nowrap;
}

div.error-dark-light-sunset {
    color: var(--dark_light_sunset);
}

div.error-dark-light-night {
    color: var(--dark_light_night);
}

@media only screen and (max-width: 768px) {
    div.error-message {
        font-size: 10px;
        bottom: 2px;
        left: 25px;
    }
}

input[type=checkbox].error {
    border-color: red;
}


div.payment-bar {
    display: flex;
    margin: 20px 5px;
}

    div.payment-bar div.paid {
        background-color: var(--floan_navy);
        height: 8px;
        flex-grow: 1;
        border-radius: 5px;
        margin: 0 2px;
    }

        div.payment-bar div.paid.dark-light-night {
            background-color: var(--dark_light_night);
            border: none;
        }

    div.payment-bar div.unpaid {
        border: 1px solid var(--floan_navy);
        height: 8px;
        flex-grow: 1;
        border-radius: 5px;
        margin: 0 2px;
    }

        div.payment-bar div.unpaid.dark-light-night {
            border: 1px solid var(--dark_light_night);
            background: none;
        }



/*CAROUSEL*/

div.carousel, div.image-carousel {
    margin: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

    div.carousel > div, div.image-carousel > div {
        width: max-content;
    }

    div.image-carousel img {
        height: 400px;
        margin: 10px;
    }

        div.image-carousel img:first-child {
            margin-left: 10vw
        }

        div.image-carousel img:last-child {
            margin-right: 10vw;
        }

@media only screen and (max-width: 992px) {
    div.image-carousel img:first-child {
        margin-left: 5vw
    }

    div.image-carousel img:last-child {
        margin-right: 5vw;
    }
}

div.carousel-mobile {
    position: relative;
    width: 100%;
    margin: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    height: 350px;
}

.carousel-mobile-item {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    max-height: 340px;
    margin: 5px;
    display: none;
    opacity: 0;
    -webkit-transition: .4s;
    transition: .4s;
}

.carousel-mobile-item-previous {
    transform: translateX(calc(-100% - 10px));
    display: block;
    opacity: 0.5;
}

.carousel-mobile-item-selected {
    display: block;
    opacity: 1;
}

.carousel-mobile-item-next {
    transform: translateX(calc(100% + 10px));
    display: block;
    opacity: 0.5;
}

/*SEARCH BAR*/

div.searchbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--floan_white);
    border-radius: 50px;
    padding: 5px 5px 5px 30px;
    font-size: 16px;
    margin-bottom: 20px;
}

div.searchbar-mobile {
    background-color: var(--floan_white);
    border-radius: 30px;
    padding: 6px 5px;
    font-size: 12px;
    margin: 5px 0px;
}

    div.searchbar label, div.searchbar-mobile label {
        margin: 0px;
        font-weight: 600;
    }

    div.searchbar div.right-divider, div.searchbar-mobile div.right-divider {
        border-right: none;
    }

        div.searchbar div.right-divider::after, div.searchbar-mobile div.right-divider::after {
            content: "";
            border-right: 2px solid var(--floan_lightgrey);
            opacity: 0.5;
            position: absolute;
            height: 100%;
            top: 0;
            right: 0;
        }

div.searchbar div.error-message {
    bottom: -8px;
}

/*BOXES*/

div.card {
    width: 95%;
    height: 240px;
    position: relative;
    border-radius: 25px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.3));
    transform: translate(25%, 0);
    border: 1px solid var(--floan_white);
    padding: 20px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

@media only screen and (max-width: 992px) {
    div.card {
        width: 90%;
        margin-bottom: -30px;
        transform: translate(5%, -20%);
    }
}

img.snapcard {
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    max-height: 120%;
    max-width: 20%;
    margin: auto;
    filter: drop-shadow(0 0 10px white);
}

img.snapcard-mobile {
    position: absolute;
    right: -5px;
    top: -5px;
    max-height: 60px;
    filter: drop-shadow(0 0 10px white);
}

div.background-logo {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    overflow: clip;
    opacity: 0.7;
}

    div.background-logo > img {
        position: absolute;
        bottom: 35px;
        max-height: 75%;
        max-width: 50%;
        transform: rotate(-45deg);
        opacity: 0.5;
    }

div.article-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -25px;
}

    div.article-container > div.img-hover-zoom {
        margin: 25px;
        flex-grow: 1;
        position: relative;
        display: flex;
        flex-direction: column;
    }

        div.article-container > div.img-hover-zoom::after {
            content: "";
            position: absolute;
            bottom: 0;
            height: 50%;
            left: 0;
            right: 0;
            background: linear-gradient(to top, var(--floan_navy), rgba(255,255,255,0));
            background-size: cover;
            border-radius: 0 0 25px 25px;
        }


@media only screen and (max-width: 768px) {
    div.article-container {
        margin: 0 -5px;
    }

        div.article-container > div.img-hover-zoom {
            margin: 5px;
        }

            div.article-container > div.img-hover-zoom:nth-child(2n)::after {
                background: linear-gradient(to top, var(--floan_purple), rgba(255,255,255,0));
            }
}


div.payment-plan {
    background-color: var(--floan_navy);
    padding: 30px;
    margin-bottom: 15px;
    font-size: 16px;
    position: relative;
    min-height: calc(100% - 115px);
    border: none !important;
    display: flex;
    flex-direction: column;
}

    div.payment-plan b {
        float: right;
    }

@media only screen and (max-width: 768px) {
    div.payment-plan {
        padding: 30px 20px 20px 20px;
    }
}

div.box {
    border-radius: 30px;
    padding: 25px;
    margin-bottom: 15px;
    font-size: 16px;
    border: 1px solid var(--floan_white);
}

    div.box.rounded {
        border-radius: 40px;
    }

    div.box.padded {
        padding: 40px;
    }

@media only screen and (max-width: 992px) {
    div.box {
        padding: 20px;
    }

        div.box.padded {
            padding: 30px;
        }
}

@media only screen and (max-width: 768px) {
    div.box {
        padding: 15px;
    }

        div.box.padded {
            padding: 20px;
        }
}

div.blur {
    background-color: rgba(255,255,255,0.5);
    border: 1px solid var(--floan_white);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

div.clear {
    background-color: rgba(255,255,255,0.25);
}

div.flight-tile {
    width: 325px;
    margin: 15px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

div.flight-tile-mobile {
    width: 100%;
    margin-bottom: 25px;
}

div.archived {
    display: none;
}


div.background-pattern {
    border-radius: 50px;
    background-color: var(--floan_navy);
    background: url('../../Content/Patterns/Pattern_muted_01.png');
    background-size: cover;
    padding: 80px 10% 80px 10%;
    margin-bottom: 50px;
    position: relative;
    z-index: 0;
}

@media only screen and (max-width: 992px) {
    div.background-pattern {
        padding: 20px 5% 20px 5%;
    }
}

@media only screen and (max-width: 768px) {
    div.background-pattern {
        padding: 20px;
        margin-bottom: 20px;
    }
}

div.background-pattern > div {
    position: relative;
    z-index: 1;
}

div.background-pattern::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--floan_navy);
    border-radius: 50px;
    opacity: 0.5;
}

div.background-pattern-text::before {
    content: "";
    z-index: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.75;
    background-image: linear-gradient(to right, transparent, var(--floan_navy) 15%, var(--floan_navy) 85%, transparent);
    mask-image: linear-gradient(to top, transparent, var(--floan_navy) 15%, var(--floan_navy) 85%, transparent);
    -webkit-mask-image: linear-gradient(to top, transparent, var(--floan_navy) 15%, var(--floan_navy) 85%, transparent);
}

div.background-pattern-text h1, div.background-pattern-text p, div.background-pattern-text ul, div.background-pattern-text b, div.background-pattern-text button {
    z-index: 1;
    position: relative;
}

div.parallax-box {
    border-radius: 50px;
    padding: 25px;
    margin-bottom: 15px;
    font-size: 16px;
    background-color: rgba(255,255,255,0.25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: none;
    position: relative;
}

@media only screen and (max-width: 768px) {
    div.parallax-box {
        border-radius: 30px;
        padding: 15px;
    }
}

div.parallax-background {
    padding: 10px;
    background-color: rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 35px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

    div.parallax-background > img {
        width: 60%;
    }

@media only screen and (max-width: 768px) {
    div.parallax-background {
        border-radius: 20px;
    }

        div.parallax-background > img {
            margin-top: -30px;
            width: 80%;
        }
}

div.parallax-text {
    margin: 0px 35px;
    line-height: 1;
}

    div.parallax-text h3 {
        text-align: left;
    }

    div .parallax-text p {
        text-align: left;
        font-size: 24px;
        opacity: 0.7;
    }

@media only screen and (max-width: 768px) {
    div.parallax-text {
        margin: 0px 15px;
    }

        div.parallax-text p {
            font-size: 16px;
        }
}

div.dark {
    border-width: 2px;
    background-color: var(--floan_navy);
    border-style: solid;
}

div.dark-light-night {
    border-width: 2px;
    background-color: var(--dark_light_night);
    border-style: solid;
}

div.right-divider {
    border-right: 2px solid var(--floan_lightgrey);
}

@media only screen and (min-width: 768px) {
    div.sm-right-divider {
        border-right: 2px solid var(--floan_lightgrey);
    }
}

@media only screen and (min-width: 992px) {
    div.md-right-divider {
        border-right: 2px solid var(--floan_lightgrey);
    }

    div.upgradetab-divider {
        border-right: 2px dotted var(--floan_navy);
    }
}

div.account-section {
    border-radius: 30px;
    padding: 25px;
    margin-bottom: 15px;
    font-size: 16px;
    border: 1px solid var(--floan_lightgrey);
}

div.account-section-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

@media only screen and (max-width: 768px) {
    div.account-section {
        padding: 0px;
        border: 0;
    }

    div.account-section-header {
        margin-bottom: 10px;
    }

        div.account-section-header > h5 {
            font-size: large;
            font-weight: 700;
        }
}


/*FLIGHT CONTAINERS*/

div.flight-info {
    position: absolute;
    left: calc(100% - 20px);
    width: max-content;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid var(--floan_navy);
    border-radius: 20px;
    padding: 5px;
    display: none;
}

    div.flight-info p {
        margin: 0;
    }

div.flightresult-mobile {
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    margin: 0px;
}

    div.flightresult.selectedflight, div.flightresult-mobile.selectedflight {
        box-shadow: var(--dark_light_night) 0 0 10px 5px;
        border-radius: 25px;
    }

div.flightresult-mobile-top {
    background-color: var(--floan_navy);
    border-radius: 25px 25px 0px 0px;
    padding: 0 15px;
    height: 30px;
    width: 100%;
}

    div.flightresult-mobile-top span {
        color: green;
        margin-top: 2px;
        float: right;
    }


div.flightresult-mobile-middle.closed {
    border-radius: 0px 0px 25px 25px;
}

div.flightresult-mobile-middle {
    background-color: var(--floan_white);
    border-radius: 0px 0px 10px 10px;
    padding: 5px 10px;
    width: 100%;
}

    div.flightresult-mobile-middle p {
        font-size: 12px;
        margin: 0;
    }

div.flightresult-mobile.details div.flightresult-mobile-middle {
    border-radius: 0px 0px 25px 25px;
    transition: all 0.1s;
}

div.flightresult-mobile.details-shown div.flightresult-mobile-middle {
    border-radius: 0px 0px 10px 10px;
}

div.flightresult-mobile-middle span {
    height: 25px;
    width: 35px;
    background-image: linear-gradient(var(--floan_navy), var(--floan_navy));
    mask-image: url(../../Content/Icons/PlaneSlider.svg);
    -webkit-mask-image: url(../../Content/Icons/PlaneSlider.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

div.flightresult-mobile-middle hr {
    height: 1px;
    background-color: var(--floan_navy);
    width: 30%;
}


div.flightresult-mobile-bottom {
    background-color: var(--floan_white);
    border-radius: 10px 10px 25px 25px;
    padding: 10px;
    width: 100%;
    position: relative;
}

    div.flightresult-mobile-bottom h3 {
        margin-top: 5px;
    }

    div .flightresult-mobile-bottom::after {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        top: -1px;
        height: 2px;
        border-top: 1px dashed black;
    }

div.flightresult {
    margin: 5px 0 10px 0;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

div.flightresult-start {
    background: var(--floan_navy);
    border-radius: 20px 0px 0px 20px;
    width: 45px;
    position: relative;
}

    div.flightresult-start > img {
        width: 80%;
        transform: rotate(-45deg);
        position: absolute;
        left: 12px;
        bottom: 25px;
    }

    div.flightresult-start > span {
        color: green;
        margin: 8px;
    }

div.flightresult-middle {
    padding: 10px 25px;
    background: var(--floan_white);
    border-radius: 0px 10px 10px 0px;
    width: calc(70% - 45px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    position: relative;
}

    div.flightresult-middle::after {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 8px;
        right: -1px;
        width: 2px;
        border-right: 1px dashed black;
        z-index: 1;
    }

    div.flightresult-middle hr {
        height: 1px;
        background-color: var(--floan_navy);
        width: 40%;
    }

    div.flightresult-middle span {
        height: 30px;
        width: 40px;
        background-image: linear-gradient(var(--floan_navy), var(--floan_navy));
        mask-image: url(../../Content/Icons/PlaneSlider.svg);
        -webkit-mask-image: url(../../Content/Icons/PlaneSlider.svg);
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-position: center;
    }

    div.flightresult-middle p {
        font-size: 14px;
        margin: 0;
    }


div.flightresult-end {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    background: var(--floan_white);
    border-radius: 10px 20px 20px 10px;
    width: 30%;
    text-align: center;
}

    div.flightresult-end b {
        font-weight: 500;
    }

    div.flightresult-end p {
        font-weight: 300;
    }

    div.flightresult-end div.background-icon {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        max-height: 200px;
        max-width: 200px;
        aspect-ratio: 1/1;
        z-index: -1;
        overflow: hidden;
        transform: rotate(-45deg);
        background-image: linear-gradient(var(--floan_purple), var(--floan_purple));
        mask-image: url(../../../Content/Icons/BtnIcon.svg);
        -webkit-mask-image: url(../../../Content/Icons/BtnIcon.svg);
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-position: top right;
        -webkit-mask-position: top right;
        opacity: 0.7;
    }

div.selection-container {
    position: sticky;
    width: 100%;
    height: 180px;
    border-radius: 50px 50px 0px 0px;
    bottom: 0;
    padding: 20px 20px 5px 20px;
    background-color: var(--floan_navy);
    z-index: 5;
    display: none;
}

div.selected-flight-info {
    height: 100%;
    border: 2px dashed var(--floan_white);
    border-radius: 25px 5px 5px 25px;
    padding: 5px;
    margin: 5px;
    overflow-y: auto;
    overflow-x: hidden;
}

    div.selected-flight-info div.col-xs-3 {
        width: 30%;
    }

    div.selected-flight-info div.col-xs-6 {
        width: 40%;
    }

    div.selected-flight-info hr {
        height: 1px;
        background-color: var(--floan_white);
        width: 40%;
    }

    div.selected-flight-info span {
        transform: rotate(90deg);
        font-size: 30px;
        color: var(--floan_white);
    }

    div.selected-flight-info h4, div.selected-flight-info p, div.selected-flight-info b, div.selected-flight-info label {
        color: white;
    }

div.selection-mobile-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: max-content;
    z-index: 5;
    display: none;
}

div.selection-mobile-content {
    position: relative;
    width: 100%;
    height: max-content;
    max-height: 0px;
    overflow: auto;
    background-color: var(--floan_navy);
    border-radius: 20px 20px 0 0;
    outline: 2px solid var(--floan_white);
    transition: max-height 0.5s ease-in;
}

    div.selection-mobile-content.expanded {
        max-height: 400px;
        transition: max-height 0.5s ease-out;
    }


    div.selection-mobile-content div.selected-flight-info hr {
        width: 30%;
    }

    div.selection-mobile-content div.selected-flight-info span {
        font-size: 20px;
    }

div.selection-mobile-tab {
    position: relative;
    width: 250px;
    height: 30px;
    border-radius: 25px 25px 0px 0px;
    color: var(--floan_white);
    background-color: var(--floan_navy);
    outline: 2px solid var(--floan_white);
}

div.stopsmarker {
    position: absolute;
    left: -25px;
    top: 25%;
    bottom: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    div.stopsmarker > div:nth-child(2n+1) {
        height: 10px;
        width: 10px;
        border-radius: 5px;
        background-color: var(--floan_navy);
    }

    div.stopsmarker > div:nth-child(2n) {
        height: 80%;
        width: 1px;
        border: 1px solid var(--floan_navy);
    }


/*Upgrade Containers*/

div.upgrade-header {
    color: var(--dark_light_night);
    float: right;
    display: flex;
    flex-direction: column;
}

    div.upgrade-header > div {
        display: inline-flex;
    }

    div.upgrade-header span {
        color: var(--dark_light_night);
    }

    div.upgrade-header p {
        color: var(--dark_light_night);
    }



/*EXPANDABLE TAB*/

div.expandable {
    border: 1px solid var(--floan_white);
    border-radius: 30px;
    background-color: transparent;
    margin-bottom: 10px;
}

div.expandable-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 55px;
    border-radius: 20px;
    padding: 8px 15px 5px 15px;
}

div.expandable-content {
    padding: 15px;
    display: none;
}

    div.expandable-content p, div.expandable-content label, div.expandable-content h6 {
        color: var(--dark_light_night);
    }

div.expandable-header p {
    color: var(--dark_light_night);
    font-size: large;
    margin: 0;
}

div.expandable-header span {
    color: var(--dark_light_night);
    font-size: 30px;
    cursor: pointer;
}

    div.expandable-header span.up-icon {
        display: none;
    }

    div.expandable-header span.down-icon {
        display: block;
    }

div.expandable.expanded {
    background-color: rgba(255,255,255,0.4);
}

div.expanded div.expandable-header {
    border: 2px solid var(--floan_white);
    border-radius: 26px;
    background-color: var(--floan_white);
}

    div.expanded div.expandable-header p {
        color: var(--floan_navy);
    }

    div.expanded div.expandable-header span {
        color: var(--floan_navy);
    }

        div.expanded div.expandable-header span.up-icon {
            display: block;
        }

        div.expanded div.expandable-header span.down-icon {
            display: none;
        }


/*SELECTABLE TAB*/

div.tab-container {
    background-color: var(--dark_purple_night);
    border-radius: 25px;
    padding: 20px;
}

div.slider-container {
    position: relative;
    padding: 10px 10px 10px 12%;
    box-shadow: 0 5px 8px 2px var(--dark_purple_night);
}

div.snap-banner {
    position: relative;
    padding: 15px 5%;
}

@media only screen and (min-width: 992px) {
    div.snap-banner div.background-logo > img {
        opacity: 1;
    }
}

@media only screen and (max-width: 992px) {
    div.slider-container {
        padding: 20px 30px;
        box-shadow: 0 4px 5px 2px var(--dark_purple_night);
    }
}

@media only screen and (max-width: 768px) {
    div.slider-container {
        padding: 10px;
    }
}

div.tab {
    border-radius: 20px;
    margin: 5px;
    padding: 5px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

    div.tab h5, div.tab p {
        cursor: unset;
        color: white;
        margin: 0px 5px;
    }

    div.tab img {
        width: 22px;
        margin-right: 5px;
        color: white;
    }

    div.tab span {
        margin-right: 2px;
        color: white;
    }

@media only screen and (max-width: 768px) {
    div.tab img {
        margin-right: 0;
        margin-top: 3px;
        margin-bottom: 5px;
    }

    div.tab span {
        margin-right: 0;
    }
}

div.tab:hover {
    background-color: var(--purple_dark_night);
}


div.selectedtab {
    background-color: var(--purple_dark_night);
}



/*SELECTABLE BOX*/

div.selectable {
    border: 2px solid var(--dark_light_night);
    background-color: transparent;
    border-radius: 25px;
    padding: 5px 20px 5px 20px;
    cursor: pointer;
}

    div.selectable p {
        color: var(--dark_light_night);
        cursor: unset;
    }

    div.selectable h3, div.selectable h4, div.selectable h5 {
        color: var(--dark_light_night);
        cursor: unset;
    }

    div.selectable:hover {
        border: 2px solid var(--light_dark_night);
    }

div.selected {
    background-color: var(--dark_light_night);
}

    div.selected p {
        color: var(--light_dark_night);
    }

    div.selected h4, div.selected h5 {
        color: var(--light_dark_night);
    }



/*DRAGGABLE OBJECT*/

.draggable {
    border: 5px dashed var(--floan_purple) !important;
    cursor: move;
}

    .draggable:hover {
        background-color: rgba(178,126,231,0.5);
    }



/*AUTO COMPLETE*/

div.autocomplete-container {
    width: max-content;
    max-width: calc(100vw - 30px);
    min-width: 100%;
    z-index: 5;
    position: absolute;
    left: 0;
    margin-top: 17px;
    padding: 1px;
    border: 2px solid var(--floan_white);
    background-color: rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: none;
}

div.autocomplete-container-mobile {
    width: calc(200% + 20px);
    z-index: 5;
    position: absolute;
    left: -10px;
    margin-top: 5px;
    border: 2px solid var(--floan_white);
    background-color: rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: none;
}

div.autocomplete-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px 15px 2px 15px;
    border-radius: 20px;
    height: 50px;
    color: var(--floan_navy);
}

div.autocomplete-container-mobile div.autocomplete-item {
    height: 45px;
}

    div.autocomplete-container-mobile div.autocomplete-item p {
    }

div.highlighted {
    outline: 2px solid var(--floan_purple);
}

div.autocomplete-item > span.city {
    background-color: var(--floan_navy);
    mask-image: url(../Content/Icons/LocationIcon.svg);
    -webkit-mask-image: url(../Content/Icons/LocationIcon.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    margin: 0 8px 0 2px;
    height: 25px;
    width: 20px;
}

div.autocomplete-item > span.airport {
    background-color: var(--floan_navy);
    transform: rotate(-90deg);
    mask-image: url(../Content/Icons/BtnIcon.svg);
    -webkit-mask-image: url(../Content/Icons/BtnIcon.svg);
    mask-size: 100%;
    -webkit-mask-size: 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    margin: 0 -5px -15px -10px;
    height: 45px;
    width: 45px;
}

div.autocomplete-item > p {
    margin: 5px;
}

div.autocomplete-item:hover {
    background-color: var(--floan_purple);
}


/*DATE PICKER*/

#ui-datepicker-div {
    border: 2px solid var(--floan_white);
    background-color: rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 5px;
    margin-top: 17px;
}

    #ui-datepicker-div select {
        padding: 0 5px;
        margin-left: 5px;
        height: 30px;
        border-radius: 15px;
        min-width: 70px;
    }

.ui-widget {
    font-family: 'Poppins', sans-serif;
}

div .ui-widget-header {
    font-family: HeaderFont !important;
    border-radius: 30px;
    font-size: 17px;
    border: 2px solid var(--floan_navy);
    background: none !important;
}

div.ui-datepicker-title {
    width: calc(100% - 80px);
    color: var(--floan_navy);
    display: inline-flex;
    justify-content: center;
}

a.ui-datepicker-prev, a.ui-datepicker-next {
    border-radius: 50%;
}

.ui-datepicker td a {
    width: 30px;
}

span.ui-icon {
    background-image: none !important;
    background-color: var(--floan_navy);
    mask: url(https://code.jquery.com/ui/1.12.1/themes/base/images/ui-icons_444444_256x240.png);
    transform: scale(1.5);
}

a.ui-state-hover {
    border: none !important;
    background: none !important;
    font-weight: unset !important;
}

.ui-datepicker .ui-datepicker-prev {
    left: 0px !important;
    top: 5px !important;
}

.ui-datepicker .ui-datepicker-next {
    right: 0px !important;
    top: 5px !important;
}

a.ui-corner-all:hover span.ui-icon {
    background-color: var(--floan_purple);
}

a.ui-corner-all:active span.ui-icon {
    background-color: var(--floan_navy);
}

@media (hover:none) {
    a.ui-corner-all:active span.ui-icon {
        background-color: var(--floan_purple);
    }
}

span.ui-icon-circle-triangle-e {
    mask-position: -32px -0px;
    -webkit-mask-position: -32px -0px;
}

span.ui-icon-circle-triangle-w {
    mask-position: -96px -0px;
    -webkit-mask-position: -96px -0px;
}


table.ui-datepicker-calendar thead {
    color: var(--floan_navy) !important;
}

table.ui-datepicker-calendar a, table.ui-datepicker-calendar span {
    text-align: center;
    border-radius: 50%;
    font-size: 15px;
}

td.ui-datepicker-today, td.ui-datepicker-current-day, td.ui-datepicker-unselectable {
    border: none !important;
}

a.ui-state-default {
    background-color: var(--floan_white) !important;
    color: var(--floan_navy) !important;
}

a.ui-state-highlight {
    background-color: var(--floan_purple) !important;
    color: var(--floan_white) !important;
    border: 1px solid var(--floan_purple) !important;
}

a.ui-state-active {
    background-color: var(--floan_navy) !important;
    color: var(--floan_white) !important;
    border: 1px solid var(--floan_navy) !important;
}

a.ui-state-default:hover {
    border: 1px solid var(--floan_navy) !important;
}

.ui-datepicker-buttonpane {
    margin: 0 !important;
    border-radius: 0 0 10px 10px !important;
}

.ui-datepicker-buttonpane::after {
    content: "Leave blank for one way tickets";
    color: var(--floan_navy);
}

button.ui-datepicker-current {
    display: none !important;
}

button.ui-datepicker-close {
    display: none !important;
}

/*CUSTOM SELECT*/
div.select-input {
    position: relative;
    background-color: transparent !important;
    border: none !important;
}

.select-input > select {
    padding-right: 30px;
    -webkit-appearance: none;
    appearance: none;
}

.select-input > span {
    position: absolute;
    right: 15px;
    bottom: calc(50% - 3px);
    color: var(--floan_navy);
    pointer-events: none;
}

.select-input.thin > span {
    position: absolute;
    right: 15px;
    bottom: calc(50% - 7px);
    color: var(--floan_navy);
    pointer-events: none;
}

.select-input.light > span {
    color: var(--floan_white);
}

.select-input.dark-light-night > span {
    color: var(--dark_light_night);
}

.select-input.dark-light-sunset > span {
    color: var(--dark_light_sunset);
}

.select-input input[type=text] {
    padding-right: 40px;
}

div.select-container {
    width: max-content;
    width: 100%;
    z-index: 5;
    position: absolute;
    margin-top: -18px;
    border: 2px solid var(--floan_white);
    background-color: rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: none;
}

div.select-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px 15px 2px 15px;
    border-radius: 15px;
    height: 30px;
    color: var(--floan_navy);
    font-size: 16px;
    overflow: clip;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    div.select-item > p {
        margin: 5px;
    }

    div.select-item:hover {
        background-color: var(--floan_purple);
    }



/*POPUPS*/

div.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    opacity: 0;
    background-color: rgba(255,255,255,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    transition: 0.2s ease-in-out;
}

div.overlay-open {
    visibility: unset;
    opacity: 1;
}

div.overlay > div {
    transition: 0.3s ease-in-out;
    transform: scale(0);
}

div.overlay.overlay-open > div {
    transform: scale(1);
}

div.cookie-popup {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: max-content;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 15px;
    z-index: 12;
}

div.message-popup {
    min-width: 20vw;
    width: 500px;
    max-width: calc(100vw - 30px);
    height: max-content;
    max-height: calc(100vh - 30px);
    box-shadow: var(--floan_navy) 0px 0px 10px 0px;
}


div.full-screen-popup {
    position: fixed;
    margin: 10px;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}


/*LOCATION TIP*/

div.LocationTip {
    width: 60vw;
    height: 35vw;
    position: absolute;
    top: 0;
    left: calc(50% - 30vw);
    -webkit-transition: .6s;
    transition: .6s;
    display: none;
}

    div.LocationTip:first-child {
        transform: translateX(-120vw);
        filter: blur(2px);
        opacity: 0.8;
        display: block;
    }

    div.LocationTip:nth-child(2) {
        transform: translateX(-60vw);
        filter: blur(2px);
        opacity: 0.8;
        display: block;
    }

    div.LocationTip:nth-child(3) {
        display: block;
    }

    div.LocationTip:nth-child(4) {
        transform: translateX(60vw);
        filter: blur(2px);
        opacity: 0.8;
        display: block;
    }

    div.LocationTip:nth-child(5) {
        transform: translateX(120vw);
        filter: blur(2px);
        opacity: 0.8;
        display: block;
    }

    div.LocationTip:hover {
        filter: none;
        opacity: 1;
    }



/*TABLES*/

table.bordered {
    border-radius: 10px;
    border: 1px solid var(--dark_light_night);
}

    table.bordered th {
        border: 3px solid var(--dark_light_night);
        text-align: center;
        color: var(--floan_navy);
        font-size: 18px;
    }

    table.bordered tr {
        border: 2px solid var(--dark_light_night);
    }

        table.bordered tr:nth-child(2n) {
            background-color: rgba(255,255,255,0.4);
        }

    table.bordered td {
        border: 1px solid var(--dark_light_night);
        padding: 5px;
        color: var(--floan_navy);
    }



/*CUSTOM BORDERS*/

div.custom-border {
    border: none;
    position: relative;
}

div.gradient-border-part {
    position: absolute;
    z-index: -1;
}

div.cutout-shape-border {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
}

div.cutout-shape {
    flex-grow: 1;
    height: 35px;
    width: 35px;
    background-image: linear-gradient(var(--dark_light_night) 50%, transparent 50%);
    mask-image: radial-gradient(transparent 35.36%, white 35.36%);
    -webkit-mask-image: radial-gradient(transparent 35.36%, white 35.36%);
}


/*Loading Spinner*/

div.spinner {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-image: radial-gradient(transparent 15px, var(--floan_navy) 15px);
    mask-image: conic-gradient(transparent, white);
    -webkit-mask-image: conic-gradient(transparent, white);
    animation: spin 2s linear infinite;
    margin-left: 15px;
}

div.spinner-dark-light-night {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-image: radial-gradient(transparent 15px, var(--dark_light_night) 15px);
    mask-image: conic-gradient(transparent, white);
    -webkit-mask-image: conic-gradient(transparent, white);
    animation: spin 2s linear infinite;
    margin-left: 15px;
}

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

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