/*SCREEN SCALE SETTINGS BEGIN*/
/*--SF = Size factor. This is calculated based on the minimum of width and height (Shortest side).
    Also took aspect ratio into account to make sure it scales well enough to be visible on all screens instead of linear*/
:root {
    --addNew: #38bce6;
    --sfn10: calc(-10.0 * var(--sf));
    --sfn0_5: calc(-0.5 * var(--sf));
    --sfn0_1: calc(-0.1 * var(--sf));
    --sf0_1: calc(0.1 * var(--sf));
    --sf0_15: calc(0.15 * var(--sf));
    --sf0_2: calc(0.2 * var(--sf));
    --sf0_25: calc(0.25 * var(--sf));
    --sf0_3: calc(0.3 * var(--sf));
    --sf0_35: calc(0.35 * var(--sf));
    --sf0_4: calc(0.4 * var(--sf));
    --sf0_5: calc(0.5 * var(--sf));
    --sf0_65: calc(0.65 * var(--sf));
    --sf0_7: calc(0.7 * var(--sf));
    --sf0_75: calc(0.75 * var(--sf));
    --sf0_9: calc(0.9 * var(--sf));
    --sf1_25: calc(1.25 * var(--sf));
    --sf1_5: calc(1.5 * var(--sf));
    --sf1_75: calc(1.75 * var(--sf));
    --sf1_9: calc(1.9 * var(--sf));
    --sf2: calc(2.0 * var(--sf));
    --sf2_25: calc(2.25 * var(--sf));
    --sf2_5: calc(2.5 * var(--sf));
    --sf2_6: calc(2.6 * var(--sf));
    --sf2_7: calc(2.7 * var(--sf));
    --sf3: calc(3.0 * var(--sf));
    --sf3_25: calc(3.25 * var(--sf));
    --sf3_5: calc(3.5 * var(--sf));
    --sf3_75: calc(3.75 * var(--sf));
    --sf4: calc(4.0 * var(--sf));
    --sf4_5: calc(4.5 * var(--sf));
    --sf5: calc(5.0 * var(--sf));
    --sf5_25: calc(5.25 * var(--sf));
    --sf5_5: calc(5.5 * var(--sf));
    --sf6: calc(6.0 * var(--sf));
    --sf7: calc(7.0 * var(--sf));
    --sf8: calc(8.0 * var(--sf));
    --sf8_5: calc(8.5 * var(--sf));
    --sf9: calc(9.0 * var(--sf));
    --sf10: calc(10.0 * var(--sf));
    --sf11: calc(11.0 * var(--sf));
    --sf12: calc(12.0 * var(--sf));
    --sf13: calc(13.0 * var(--sf));
    --sf14: calc(14.0 * var(--sf));
    --sf14_5: calc(14.5 * var(--sf));
    --sf14_75: calc(14.75 * var(--sf));
    --sf15: calc(15.0 * var(--sf));
    --sf16: calc(16.0 * var(--sf));
    --sf19: calc(19.0 * var(--sf));
    --sf20: calc(20.0 * var(--sf));
    --sf22: calc(22.0 * var(--sf));
    --sf24: calc(24.0 * var(--sf));
    --sf26: calc(26.0 * var(--sf));
    --sf28: calc(28.0 * var(--sf));
    --sf29: calc(29.0 * var(--sf));
    --sf30: calc(30.0 * var(--sf));
    --sf35: calc(35.0 * var(--sf));
}

:root {
    --sf: calc(1.0vw + calc(calc(var(--portrait) - 0.309) * 1.0vw));
}

@media (min-aspect-ratio: 8/8) {

    :root {
        --additionalsf: calc(var(--portrait) * 0.0vh);
        --sf: calc(1.0vh + var(--additionalsf));
    }
}

/*--PSF = Portrait Size factor. This is --SF multiplied by --portrait. --portrait is 1.0 when aspect ratio is 1080/1920
 and it gradually goes to zero as aspect ratio goes higher to 1920/1080
*/
:root {
    --psfn10: calc(var(--portrait) * var(--sfn10));
    --psfn0_5: calc(var(--portrait) * var(--sfn0_5));
    --psfn0_1: calc(var(--portrait) * var(--sfn0_1));
    --psf0_1: calc(var(--portrait) * var(--sf0_1));
    --psf0_15: calc(var(--portrait) * var(--sf0_15));
    --psf0_2: calc(var(--portrait) * var(--sf0_2));
    --psf0_25: calc(var(--portrait) * var(--sf0_25));
    --psf0_35: calc(var(--portrait) * var(--sf0_35));
    --psf0_4: calc(var(--portrait) * var(--sf0_4));
    --psf0_5: calc(var(--portrait) * var(--sf0_5));
    --psf0_65: calc(var(--portrait) * var(--sf0_65));
    --psf0_7: calc(var(--portrait) * var(--sf0_7));
    --psf0_75: calc(var(--portrait) * var(--sf0_75));
    --psf0_9: calc(var(--portrait) * var(--sf0_9));
    --psf: calc(var(--portrait) * var(--sf));
    --psf1_25: calc(var(--portrait) * var(--sf1_25));
    --psf1_5: calc(var(--portrait) * var(--sf1_5));
    --psf1_75: calc(var(--portrait) * var(--sf1_75));
    --psf1_9: calc(var(--portrait) * var(--sf1_9));
    --psf2: calc(var(--portrait) * var(--sf2));
    --psf2_25: calc(var(--portrait) * var(--sf2_25));
    --psf2_5: calc(var(--portrait) * var(--sf2_5));
    --psf2_6: calc(var(--portrait) * var(--sf2_6));
    --psf2_7: calc(var(--portrait) * var(--sf2_7));
    --psf3: calc(var(--portrait) * var(--sf3));
    --psf3_25: calc(var(--portrait) * var(--sf3_25));
    --psf3_5: calc(var(--portrait) * var(--sf3_5));
    --psf3_75: calc(var(--portrait) * var(--sf3_75));
    --psf4: calc(var(--portrait) * var(--sf4));
    --psf4_5: calc(var(--portrait) * var(--sf4_5));
    --psf5: calc(var(--portrait) * var(--sf5));
    --psf5_25: calc(var(--portrait) * var(--sf5_25));
    --psf5_5: calc(var(--portrait) * var(--sf5_5));
    --psf6: calc(var(--portrait) * var(--sf6));
    --psf7: calc(var(--portrait) * var(--sf7));
    --psf8: calc(var(--portrait) * var(--sf8));
    --psf8_5: calc(var(--portrait) * var(--sf8_5));
    --psf9: calc(var(--portrait) * var(--sf9));
    --psf10: calc(var(--portrait) * var(--sf10));
    --psf11: calc(var(--portrait) * var(--sf11));
    --psf12: calc(var(--portrait) * var(--sf12));
    --psf13: calc(var(--portrait) * var(--sf13));
    --psf14: calc(var(--portrait) * var(--sf14));
    --psf14_5: calc(var(--portrait) * var(--sf14_5));
    --psf14_75: calc(var(--portrait) * var(--sf14_75));
    --psf15: calc(var(--portrait) * var(--sf15));
    --psf16: calc(var(--portrait) * var(--sf16));
    --psf19: calc(var(--portrait) * var(--sf19));
    --psf20: calc(var(--portrait) * var(--sf20));
    --psf22: calc(var(--portrait) * var(--sf22));
    --psf24: calc(var(--portrait) * var(--sf24));
    --psf26: calc(var(--portrait) * var(--sf26));
    --psf28: calc(var(--portrait) * var(--sf28));
    --psf29: calc(var(--portrait) * var(--sf29));
    --psf30: calc(var(--portrait) * var(--sf30));
    --psf35: calc(var(--portrait) * var(--sf35));
}
/*--LSF = landscape Size factor. This is --SF multiplied by --landscape. --landscape is 1.0 when aspect ratio is 1920/1080
 and it gradually goes to zero as aspect ratio goes lower to 1080/1920
*/
:root {
    --lsfn10: calc(var(--landscape) * var(--sfn10));
    --lsfn0_5: calc(var(--landscape) * var(--sfn0_5));
    --lsfn0_1: calc(var(--landscape) * var(--sfn0_1));
    --lsf0_1: calc(var(--landscape) * var(--sf0_1));
    --lsf0_15: calc(var(--landscape) * var(--sf0_15));
    --lsf0_2: calc(var(--landscape) * var(--sf0_2));
    --lsf0_25: calc(var(--landscape) * var(--sf0_25));
    --lsf0_35: calc(var(--landscape) * var(--sf0_35));
    --lsf0_4: calc(var(--landscape) * var(--sf0_4));
    --lsf0_5: calc(var(--landscape) * var(--sf0_5));
    --lsf0_65: calc(var(--landscape) * var(--sf0_65));
    --lsf0_7: calc(var(--landscape) * var(--sf0_7));
    --lsf0_75: calc(var(--landscape) * var(--sf0_75));
    --lsf0_9: calc(var(--landscape) * var(--sf0_9));
    --lsf: calc(var(--landscape) * var(--sf));
    --lsf1_25: calc(var(--landscape) * var(--sf1_25));
    --lsf1_5: calc(var(--landscape) * var(--sf1_5));
    --lsf1_75: calc(var(--landscape) * var(--sf1_75));
    --lsf1_9: calc(var(--landscape) * var(--sf1_9));
    --lsf2: calc(var(--landscape) * var(--sf2));
    --lsf2_25: calc(var(--landscape) * var(--sf2_25));
    --lsf2_5: calc(var(--landscape) * var(--sf2_5));
    --lsf2_6: calc(var(--landscape) * var(--sf2_6));
    --lsf2_7: calc(var(--landscape) * var(--sf2_7));
    --lsf3: calc(var(--landscape) * var(--sf3));
    --lsf3_25: calc(var(--landscape) * var(--sf3_25));
    --lsf3_5: calc(var(--landscape) * var(--sf3_5));
    --lsf3_75: calc(var(--landscape) * var(--sf3_75));
    --lsf4: calc(var(--landscape) * var(--sf4));
    --lsf4_5: calc(var(--landscape) * var(--sf4_5));
    --lsf5: calc(var(--landscape) * var(--sf5));
    --lsf5_25: calc(var(--landscape) * var(--sf5_25));
    --lsf5_5: calc(var(--landscape) * var(--sf5_5));
    --lsf6: calc(var(--landscape) * var(--sf6));
    --lsf7: calc(var(--landscape) * var(--sf7));
    --lsf8: calc(var(--landscape) * var(--sf8));
    --lsf8_5: calc(var(--landscape) * var(--sf8_5));
    --lsf9: calc(var(--landscape) * var(--sf9));
    --lsf10: calc(var(--landscape) * var(--sf10));
    --lsf11: calc(var(--landscape) * var(--sf11));
    --lsf12: calc(var(--landscape) * var(--sf12));
    --lsf13: calc(var(--landscape) * var(--sf13));
    --lsf14: calc(var(--landscape) * var(--sf14));
    --lsf14_5: calc(var(--landscape) * var(--sf14_5));
    --lsf14_75: calc(var(--landscape) * var(--sf14_75));
    --lsf15: calc(var(--landscape) * var(--sf15));
    --lsf16: calc(var(--landscape) * var(--sf16));
    --lsf19: calc(var(--landscape) * var(--sf19));
    --lsf20: calc(var(--landscape) * var(--sf20));
    --lsf22: calc(var(--landscape) * var(--sf22));
    --lsf24: calc(var(--landscape) * var(--sf24));
    --lsf26: calc(var(--landscape) * var(--sf26));
    --lsf28: calc(var(--landscape) * var(--sf28));
    --lsf29: calc(var(--landscape) * var(--sf29));
    --lsf30: calc(var(--landscape) * var(--sf30));
    --lsf35: calc(var(--landscape) * var(--sf35));
}

html {
    width: 100%;
    height: 100vh;
    --black: hsl(215 10% 17% / 1);
    --dark: #1D3250;
    --vivid: hsl(27 100% 70% / 1);
    --light: hsl(27 85% 76% / 1);
    --lite: hsl(27 91% 97% / 1);
    overflow-y: scroll;
    overflow-x: hidden;
    /* position: fixed; */
    top: 0;
    left: 0;
}

body {
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.input.password {
    -webkit-text-security: circle;
}

.hidden {
    display: none !important;
}

.button:hover {
    background-color: #365066;
}

.button.deactive {
}

.button {
    background-color: #486583;
    cursor: pointer;
    color: white;
    display: flex;
    /* border-radius: 4px; */
    font-size: var(--sf1_75);
    transition: background-color 0.25s;
    padding: var(--sf0_75) var(--sf2);
    position: relative;
    border: 1.5px solid #ffffff;
    border-left: none;
    border-right: none;
    clip-path: polygon( 8.6px -0.5px, 0px 50%, 8.6px calc(100% + 0.5px), calc(100% - 8.4px) calc(100% + 0.5px), 100% 50%, calc(100% - 8.4px) -0.5px );
    align-items: center;
    align-content: center;
    justify-content: center;
    overflow: visible;
    height: 2.17em;
}

    .button:after {
        content: "";
        background-color: #ffffff;
        width: 100%;
        position: absolute;
        left: 0;
        height: calc(100% + 2px);
        top: -1px;
        clip-path: polygon( calc(100% - 14.5px) 0, calc(100% - 13px) 0, calc(100% - 5px) 50%, calc(100% - 13px) 100%, calc(100% - 14.5px) 100%, calc(100% - 6.5px) 50%, calc(100% - 14.5px) 0, calc(100% - 9.5px) 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, calc(100% - 9.5px) 100%, calc(100% - 1.5px) 50%, calc(100% - 9.5px) 0, 14.5px 0, 13px 0, 5px 50%, 13px 100%, 14.5px 100%, 6.5px 50%, 14.5px 0, 8px 0, 9.5px 0, 1.5px 50%, 9.5px 100%, 8px 100%, 0px 50%, 8px 0 );
        /* transform: scale(3.5); */
        z-index: 11;
        overflow: visible;
    }

input[type='text'] {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 2px 2px 21px #000000;
    border: 2px solid #ffffff;
    color: white;
    background-color: #0000008a;
    outline: none;
}

input[type='checkbox'] {
    width: var(--sf2_7);
    aspect-ratio: 1;
    margin: 0;
    cursor: pointer;
}

textarea {
    font-size: var(--sf2_5);
}

    textarea:focus-visible {
        outline: none;
    }

* {
    box-sizing: border-box;
}

.placeHolder {
    aspect-ratio: unset !important;
    margin: -100px 0;
    padding: 0;
    height: 0 !important;
    border: none !important;
}

head {
    display: none !important;
}

script {
    display: none !important;
}

.dismissible:not(.active):not(.toggle.toggleThis) {
    display: none !important;
}

.dismissible.toggle.toggleThis:not(.active) > * {
    display: none !important;
}


script, style, head > * {
    display: none !important;
}


.field {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: hsl(0 0% 96% / 1);
    padding: var(--sf1_5);
    border-radius: var(--sf);
    border: solid 1px hsl(0 0% 94% / 1);
}

    .field > .label {
    }

    .field > input {
        flex-grow: 1;
        background-color: white;
        border: 1px solid gray;
        height: 1.6em;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding-left: var(--sf0_75);
        position: relative;
    }



@keyframes placeholder-shimmer {
    0% {
        background-position: 100%;
    }

    100% {
        background-position: -100%;
    }
}

.c-animated-background {
    animation: 3s cubic-bezier(.25,.50,.75,.50) infinite placeholder-shimmer;
    background-image: linear-gradient(to right, rgba(0,0,0,.00) 0%, rgba(0,0,0,.25) 25%, rgba(0,0,0,.00) 50%, rgba(0,0,0,.25) 75%, rgba(0,0,0,.00) 100% );
    background-size: 200%;
    height: 100%;
    width: 100%;
}


.citySearchResultBox {
    width: 100%;
    left: 0;
    min-height: var(--sf4);
    background-color: lightblue;
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    animation: 3s cubic-bezier(.25,.50,.75,.50) infinite placeholder-shimmer;
    background-image: linear-gradient(to right, rgba(0,0,0,.00) 0%, rgb(255 255 255 / 55%) 25%, rgba(0,0,0,.00) 50%, rgb(255 255 255 / 52%) 75%, rgba(0,0,0,.00) 100% );
    background-size: 200%;
    z-index: 999;
    padding: var(--sf);
    gap: var(--sf0_4);
    border-radius: 0 0 var(--sf) var(--sf);
    border: solid 1px gray;
}

    .citySearchResultBox:has(.city) {
        background-image: none;
    }

.city {
    cursor: pointer;
    background-color: #ffffff73;
    padding: var(--sf0_5)
}

    .city:hover {
        background-color: #ffffffa8;
    }