:root {
    scroll-behavior: smooth !important;
    --yak-border-gray: #1C1C1C1A;
    --yak-border-dark-gray: #cccccc;
    --yak-smoke-screen: #00000088;
    --yak-input-gray: #eeeeee;
    --yak-primary-color: #1D60FC;
    --yak-kbd-dark-gray: #777777;
    --yak-autocomplete-gray: #f9f9f9;
    --yak-secondary-color: #F4F7FF;
    --yak-autocomplete-text-gray: #555555;
    --yak-black: #000000;
    --yak-red: #dc3545;
    --yak-white: #ffffff;
    --yak-text-gray: #1C1C1C;
    --yak-content-bgcolor: #f5f5f5;
    --yak-content-border-color: #dddddd;
    --yak-content-shadow-color: rgba(0, 0, 0, 0.2);

    --yak-primary-text-color: #000000;

    --yak-common-bg-color: #ffffff;
    --yak-common-dark-bg-color: #f5f5f5;
    --yak-menu-focus-bg-color: #F4F7FF;
    --yak-menu-focus-text-color: #1D60FC;
    --yak-menu-text-color: #1C1C1C;
    --yak-sub-menu-focus-text-color: #1C1C1C;
    --yak-common-shadow-color: #00000055;

    --yak-search-bar-bg-color: #eeeeee;
    --yak-search-bar-focus-bg-color: #f9f9f9;
    --yak-search-bar-focus-text-color: #555555;

    --yak-no-result-emoji: #00000055;
    --yak-no-result-text: #aaaaaa;
    --yak-no-result-smoke-screen: #ffffffaa;
    /* ----- */
    --yak-availability-bg-color: #ffffff;
    --yak-schedule-tab-bg-color: #f5f5f5;
    --yak-schedule-tab-text-color: var(--yak-black);
    --yak-schedule-tab-active-bg-color: var(--yak-primary-color);
    --yak-schedule-tab-active-text-color: var(--yak-white);
    --yak-schedule-action-icon-color: var(--yak-black);
    --yak-schedule-add-text-color: var(--yak-white);

    --yak-dropdown-bg-color: var(--yak-white);
    --yak-dropdown-shadow-color: #38312f1a;
    --yak-dropdown-selected-text-color: var(--yak-black);
    --yak-dropdown-focus-text-color: var(--yak-black);
    --yak-dropdown-text-color: var(--yak-black);
    --yak-dropdown-hover-text-color: var(--yak-black);

    /* --yak-form-input-bg-color: #eeeeee;
    --yak-form-input-text-color: #858585;
    --yak-form-input-border-color: #cccccc;
    --yak-form-input-icon-color: #858585;
    --yak-form-input-label-color: #858585;
    --yak-form-input-focus-bg-color: #f9f9f9;
    --yak-form-input-focus-text-color: #000000;
    --yak-form-input-focus-border-color: #cccccc;
    --yak-form-input-focus-icon-color: #000000;
    --yak-form-input-focus-label-color: #000000; */

    --yak-form-input-bg-color: #f9f9f9;
    --yak-form-input-text-color: #656565;
    --yak-form-input-border-color: #f0f0f0;
    --yak-form-input-icon-color: #1D60FCaa;
    --yak-form-input-label-color: #656565;
    --yak-form-input-focus-bg-color: #f9f9f9;
    --yak-form-input-focus-text-color: #000000;
    --yak-form-input-focus-border-color: #3876c0;
    --yak-form-input-focus-icon-color: #1D60FC;
    --yak-form-input-focus-label-color: #000000;

    --yak-border-color: var(--yak-border-dark-gray);
    --yak-modal-bg-color: var(--yak-white);
    
    --yak-shadow-raised: rgba(9, 30, 66, 0.25) 0px 1px 1px 0px, rgba(9, 30, 66, 0.31) 0px 0px 1px 0px;
}

* {
    scroll-behavior: smooth !important;
    box-sizing: border-box;
    text-decoration: none;
    font-family: Helvetica Neue;
}

a {
    text-decoration: none;
}

body {
    background: linear-gradient(117.52deg, #D6E0F9 -8.82%, #F8FAFB 52.49%, #E3D9FC 109.48%);
    background-attachment: fixed;
    padding: 0;
    margin: 0;
}

header {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 80px;
    top: 0;
    left: 0;
}

header.sticky {
    position: fixed;
    z-index: 10;
    height: 60px;
    background-color: #fffa;
    backdrop-filter: blur(5px);
    animation-name: slideDown;
    animation-duration: 0.5s;
    border-bottom: 1px solid #eee;
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }
}


header>.wrapper {
    padding: 0 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

header.sticky>.wrapper {
    padding: 0 60px;
}

header .logo-image {
    height: 48px;
    width: 125px;
}

header .header-app-access-container {
    display: flex;
    align-items: center;
    gap: 40px;
}

header .header-app-login-link {
    font-size: 16px;
    line-height: 20px;
    color: #020817;
}

header .header-app-signup-link {
    font-size: 16px;
    line-height: 20px;
    height: 36px;
    padding-top: 8px;
    padding-right: 24px;
    padding-bottom: 8px;
    padding-left: 24px;
    gap: 8px;
    border-radius: 32px;
    color: #fff;
    background: #2463EB;
}


main {
    padding-top: 60px;
}

.main-part {
    touch-action: pan-x;
    padding: initial;
    margin: initial;
    flex: 1 1 auto;
    min-height: 100%;
    display: block;
    max-height: 100%;
    overflow-y: initial;
}

.main-part > section {
    touch-action: pan-x;
    padding: initial;
    margin: initial;
    min-height: 100%;
    display: block;
    position: relative;
    flex: 1 1 100%;
}


@media screen and (max-width: 600px) {
    
    header {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 60px;
        top: 0;
        left: 0;
    }
    
    header.sticky {
        position: fixed;
        z-index: 10;
        height: 60px;
        background-color: #fffa;
        backdrop-filter: blur(5px);
        animation-name: slideDown;
        animation-duration: 0.5s;
        border-bottom: 1px solid #eee;
    }    
    
    header>.wrapper {
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }
    
    header.sticky>.wrapper {
        padding: 0 10px;
    }
    
    header .logo-image {
        height: 32px;
        width: fit-content;
    }
    
    header .header-app-access-container {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    
    header .header-app-login-link {
        font-size: 16px;
        line-height: 20px;
        color: #020817;
    }
    
    header .header-app-signup-link {
        font-size: 12px;
        line-height: 20px;
        height: 36px;
        padding-top: 8px;
        padding-right: 14px;
        padding-bottom: 8px;
        padding-left: 14px;
        gap: 8px;
        border-radius: 32px;
        color: #fff;
        background: #2463EB;
    }
    
    
    main {
        padding-top: 60px;
    }
    
    .main-part {
        touch-action: pan-x;
        padding: initial;
        margin: initial;
        flex: 1 1 auto;
        min-height: 100%;
        display: block;
        max-height: 100%;
        overflow-y: initial;
    }
    
    .main-part > section {
        touch-action: pan-x;
        padding: initial;
        margin: initial;
        min-height: 100%;
        display: block;
        position: relative;
        flex: 1 1 100%;
    }
}