: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-gradient-bg-color: linear-gradient(117.52deg, #D6E0F9 -8.82%, #F8FAFB 52.49%, #E3D9FC 109.48%);
    --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;
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --yak-border-gray: #1C1C1C1A;
        --yak-border-dark-gray: #cccccc;
        --yak-smoke-screen: #000000aa;
        --yak-input-gray: #7c7c7c;
        --yak-primary-color: #1D60FC;
        --yak-kbd-dark-gray: #777777;
        --yak-autocomplete-gray: #262626;
        --yak-secondary-color: #243446;
        --yak-autocomplete-text-gray: #555555;
        --yak-text-gray: #1C1C1C;
        --yak-content-bgcolor: #0a111a;
        --yak-content-border-color: #161616;
        --yak-content-shadow-color: rgba(0, 0, 0, 0.5);

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

        --yak-common-bg-color: #1c1c1c;
        --yak-common-dark-bg-color: #161616;
        --yak-menu-focus-bg-color: #2c2c2c;
        --yak-menu-focus-text-color: #ffffff;
        --yak-menu-text-color: #858585;
        --yak-sub-menu-focus-text-color: #909090;
        --yak-common-shadow-color: #ffffff55;

        --yak-search-bar-bg-color: #2c2c2c;
        --yak-search-bar-focus-bg-color: #2c2c2c;
        --yak-search-bar-focus-text-color: #ffffff;

        --yak-no-result-smoke-screen: #1c1c1caa;

        --yak-availability-bg-color: var(--yak-common-bg-color);
        --yak-schedule-tab-bg-color: #2c2c2c;
        --yak-schedule-tab-text-color: #858585;
        --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-white);
        --yak-schedule-add-text-color: var(--yak-white);

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

        --yak-form-input-bg-color: #2c2c2c;
        --yak-form-input-text-color: #858585;
        --yak-form-input-border-color: #2c2c2c;
        --yak-form-input-icon-color: #858585;
        --yak-form-input-label-color: #858585;
        --yak-form-input-focus-bg-color: #161616;
        --yak-form-input-focus-text-color: #ffffff;
        --yak-form-input-focus-border-color: #2c2c2c;
        --yak-form-input-focus-icon-color: #ffffff;
        --yak-form-input-focus-label-color: #ffffff;

        --yak-border-color: #2c2c2c;
        --yak-modal-bg-color: #1c1c1c;
    }
} */


*, html, body {
    scroll-behavior: smooth !important;
}

.modal {
    /* z-index: 999999 !important; */
    background-color: var(--yak-modal-bg-color) !important;
    scrollbar-width: none;
    overscroll-behavior-y: contain;
}

.modal-overlay {
    /* z-index: 99999 !important; */
}

* {
    box-sizing: border-box;
}

body {
    /* touch-action: auto; */
    background-color: var(--yak-common-bg-color);
    background: var(--yak-gradient-bg-color);
    background-attachment: fixed;
    font-family: "Nunito Sans", sans-serif !important;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    /* max-height: 100vh; */
}

body:has( .body-smoke-screen-show) {
    overflow-y: hidden;
}

.heading-h2 {
    font-family: Satoshi;
    font-size: 26px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    font-family: "Nunito Sans", sans-serif !important;
}

.heading-h3 {
    font-family: "Nunito Sans", sans-serif !important;
    font-family: Satoshi;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

a {
    font-family: "Nunito Sans", sans-serif !important;
    text-decoration: none;
}

span {
    font-family: "Nunito Sans", sans-serif !important;
}

div {
    font-family: "Nunito Sans", sans-serif !important;
}

/*-----------------Header Design Start---------------------*/

.header {
    position: relative;
    /*     z-index: 9999; */
    min-height: 56px;
    max-height: 56px;
}

.header * {
    color: var(--yak-primary-text-color);
}

.header-main {
    width: 100%;
    height: 100%;
    display: flex;
/*     background-color: var(--yak-common-bg-color); */
    /*     border-bottom: 1px solid var(--yak-border-gray); */
/*     border-bottom: 1px solid var(--yak-content-border-color); */
}

.header-branding {
    height: 80px;
    max-width: 230px;
    flex: 1 1 auto;
    background-color: var(--yak-common-bg-color);
    transition: height ease 0.4s;
}

.scrollable-header {
    height: 80px;
    display: flex;
    flex: 1 1 auto;
    border-left: 1px solid var(--yak-content-border-color);
    transition: transform ease 0.4s;
    /* height: 80px; */
}

.scrollable-header.scrolled {
    position: fixed;
    top: -56px;
    transform: translateY(56px);
    left: 230px;
    height: 56px;
    width: calc(100% - 230px);
    background-color: var(--yak-common-bg-color);
    z-index: 12;
    border-left: none;
    border-bottom: 1px solid var(--yak-content-border-color);
}

.nav-sub-item {
    display: flex;
    align-items: center;
}

.side-bar-toggler {
    display: none;
    overflow: visible !important;
}

.nav-branding {
    height: 80px;
    padding: 0 0 0 30px;
    transition: all ease 0.4s;
    border-bottom: 1px solid transparent;
}

.header-main:has( .scrollable-header.scrolled) .header-branding {
    height: 56px;
}

.header-main:has( .scrollable-header.scrolled) .header-branding .nav-branding {
    height: 56px;
    border-bottom: 1px solid var(--yak-content-border-color);
}

.nav-search-bar {
    /* position: fixed;
    top: 0;
    left: 231px; */
    flex: 7 1 auto;
    justify-content: start;
    z-index: 14;
}

.nav-search-bar.opened {
    position: fixed;
}

.nav-notif-profile {
    flex: 2 1 auto;
    justify-content: end;
    padding: 0 20px 0 0;
}

.navbar-brand img {
    width: 130px;
    height: auto;
}


.nav-search-form-container {
    height: 100%;
    padding: 0 0 0 40px;
    width: 100%;
    overflow: visible;
    display: flex;
    align-items: center;
    position: relative;
}

#nav-search-form {
    height: 40px;
}

.body-smoke-screen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 13;
    background-color: var(--yak-smoke-screen);
    display: none;
    transition: all 0.5s ease-in-out;
}

.body-smoke-screen-show {
    display: block;
}

.search-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: none;
    border-radius: 30px;
    overflow: visible;
    min-width: 320px;
    transition: all 1s ease-out;
    background-color: var(--yak-search-bar-bg-color);
    border: 1px solid var(--yak-content-border-color);
/*     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); */
    position: absolute;
    left: 40px;
    z-index: 14;
}

.search-bar-input-group {
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 30px;
    padding: 0 10px;
}

.nav-search-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    /*     width: 80px; */
    flex: 1 1 auto;
}

.nav-search-icon {
    font-size: 30px;
}

.nav-search-icon-focus {
    color: var(--yak-primary-color);
}

#nav-search-input {
    min-height: 40px;
    max-height: 40px;
    border: none;
    padding: 0 10px 0 0;
    margin: 0 5px;
    border-radius: 0 30px 30px 0;
    background-color: transparent;
    outline: none;
    overflow: hidden;
    flex: 9 1 auto;
    box-shadow: none;
}

#nav-search-input:focus {
    border: none;
    outline: none;
}

.key-binding {
    min-width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    flex: 1 1 auto;
    transition: all 1s linear;
}

.key-binding>kbd>span {
    color: #aaa;
}

.key-binding>kbd {
    padding: 0px 4px;
    color: #aaa;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #ccc;
/*     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset; */
    transition: all 1s linear;
}

.key-binding>kbd span {
    font-size: 12px;
}

.search-suggestion-container {
    display: none;
    min-height: 200px;
    max-height: 600px;
    border: none;
    border-radius: 12px;
    overflow-y: auto;
    width: 550px;
    transition: all 1s ease-out;
    background-color: var(--yak-autocomplete-gray);
    position: absolute;
    top: 110%;
    left: 0;
    z-index: 99999 !important;
    scrollbar-width: none;
    box-shadow: var(--yak-shadow-raised);
}

.search-suggestion-item-list {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.suggestion-item {
    height: 50px;
    width: 100%;
    display: flex;
}

.suggestion-item:focus {
    outline: none;
    background-color: #1D60FC22;
}

.suggestion-item:hover {
    background-color: var(--yak-secondary-color);
}

.suggestion-item-sub-container {
    display: flex;
    align-items: center;
}

.suggestion-item-text-container {
    width: 90%;
    padding: 0 0 0 20px;
}

.suggestion-item-paste-container {
    width: 10%;
    justify-content: center;
    cursor: pointer;
}

.suggestion-item-search-icon {
    margin: 0 10px 0 0;
}

.suggestion-item-detail-container {
    
}

.suggestion-item-category-container {
    padding: 1px 5px;
    display: flex;
    gap: 3px;
    background-color: #0001;
    border-radius: 12px;
    width: fit-content;
}

.suggestion-item-category-container .suggestion-item-category-icon {
    font-size: 14px;
    color: #0006;
    max-width: 18px;
}

.suggestion-item-category-text {
    font-size: 10px;
    color: #0006;
}

.suggestion-item-text {
    font-size: 14px;
    text-transform: capitalize;
    color: var(--yak-search-bar-focus-text-color);
}

.suggestion-item:hover .suggestion-item-text {
    color: var(--yak-primary-color);
}

.suggestion-item:hover>.suggestion-item-sub-container {
    color: var(--yak-primary-color);
}

.nav-phone-search-container {
    display: none;
}

.nav-notif-container {
    height: 30px;
    margin: 0 10px 0 0;
    padding: 0 5px 0 0;
    border-right: 1px solid var(--yak-border-dark-gray);
}


.nav-create-service-container {
    height: 100%;
    border: none;
}

.nav-create-service-container .wrapper {
    margin-right: 20px;
    display: flex;
    align-items: center;
    background-color: transparent;
}

.nav-create-service-container .nav-publish-service-link {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    width: 100%;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    padding: 0 12px;
}

.nav-create-service-container .nav-publish-service-link:hover {
    opacity: 0.8;
}

.nav-create-service-container .nav-publish-service-link.skeleton-shimmer {
    background-color: #f7b733;
}

.nav-publish-service-link .create-service-icon {
    font-size: 20px;

}


.nav-notif-container>button {
    border: none;
    background-color: transparent;
    height: 30px;
}

.nav-notif-container>button>i {
    font-size: 30px;
}

.nav-notif-container>button:hover>i {
    color: var(--yak-primary-color);
}

.nav-profile-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.nav-profile-container:hover {
    background-color: var(--yak-menu-focus-bg-color);
}

.nav-profile-container>button {
    height: 100%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.nav-profile-container .nav-profile-name {
    font-weight: bold;
}

.nav-profile-pic {
    border-radius: 50%;
    width: 32px;
    aspect-ratio: 1/1;
    margin: 0 10px 0 0;
}

.nav-profile-menu-icon {
    display: inline-block;
    height: 20px;
    width: 30px;
}

.nav-profile-menu-icon>.nav-profile-menu-expand-icon {
    transition: all 0.5s ease;
    font-size: 20px;
}

#nav-profile-dropdown {
    position: absolute;
    z-index: 9000;
    top: 100% !important;
    left: 0% !important;
    border-radius: 12px;
    /*     min-height: 200px; */
    overflow-y: visible;
    list-style-type: none;
    padding: 0;
    background-color: var(--yak-menu-focus-bg-color);
}

#nav-profile-dropdown>li {
    border-radius: 0;
}

#nav-profile-dropdown>li:hover {
    background-color: var(--yak-common-dark-bg-color);
}

#nav-profile-dropdown>li:first-child {
    border-radius: 12px 12px 0 0;
}

#nav-profile-dropdown>li:last-child {
    border-radius: 0 0 12px 12px;
}

#nav-profile-dropdown>li a {
    color: var(--yak-menu-focus-text-color);
}

#nav-profile-dropdown>li:hover a {
    color: var(--yak-menu-focus-text-color);
}

.profile-menu-logout-option form {
    margin: 0;
    padding: 0;
}

.profile-menu-logout-option form button {
    background-color: transparent;
    border: none;
    color: var(--yak-red) !important;
    margin: 0;
    padding: 0;
}

.profile-menu-logout-option a {
    color: var(--yak-red) !important;
}

.profile-menu-logout-option:hover a {
    color: var(--yak-red) !important;
}


/*-----------------Header Design End---------------------*/

.main-part {
    touch-action: auto;
    padding: 0;
    margin: 0;
    flex: 1 1 auto;
    /*     min-height: calc(100vh - 80px); */
    display: flex;
    /* max-height: calc(100vh - 56px); */
    /* overflow-y: hidden; */
}

.main-part>section {
    touch-action: auto;
    padding: 0;
    margin: 0;
    /*     min-height: calc(100vh - 80px); */
    display: flex;
    position: relative;
    flex: 1 1 100%;
}

#side-bar-smoke-screen {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 11;
    background-color: var(--yak-smoke-screen);
    display: none;
    transition: all 0.5s ease-in-out;
}

.side-bar-smoke-screen-show {
    display: block;
}

.side-bar-section {
    width: 20%;
    min-width: 230px;
    max-width: 230px;
    min-height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    /*     box-shadow: 0px 5px 15px rgba(0,0,0,0.1); */
    z-index: 12;
    transition: all 0.5s ease;
    position: relative;
    overflow-y: auto;
    scrollbar-width: none;
}

.content-section {
    padding: 10px;
    flex: 1 1 auto;
    /* overflow-y: auto; */
/*     border-radius: 10px 0 0 0; */
    border-left: 1px solid var(--yak-content-border-color);
/*     box-shadow: 0 0 10px var(--yak-content-shadow-color) inset; */
/*     background-color: #f8fced; */
/*     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) inset; */
}

#wrapper {
    height: 100%;
}

#sidebar-wrapper {
    height: 100%;
    background-color: var(--yak-common-bg-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* Sidebar Styles */

.sidebar-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    padding-top: 10px;
}

.sidebar-nav>li {
    overflow: hidden;
    min-height: 40px;
    margin: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
}

.sidebar-nav>li:hover {
    background-color: var(--yak-menu-focus-bg-color);
}

.sidebar-nav>li a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 0 0 0 20px;
    text-decoration: none;
    color: var(--yak-menu-text-color);
}

.sidebar-icon-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    background-color: #eee;
    border-radius: 8px;
}

.sidebar-nav>li .sidebar-icon {
    font-size: 18px;
    color: var(--yak-menu-text-color);
}

.slidebar-menu {
    font-size: 14px;
    height: 20px;
}

.sidebar-nav>li:hover .sidebar-icon {
    color: var(--yak-menu-focus-text-color);
}

.sidebar-nav>.active .sidebar-icon {
    color: var(--yak-menu-focus-text-color);
}

.sidebar-nav>li:hover>a>.slidebar-menu {
    color: var(--yak-menu-focus-text-color);
}

.sidebar-nav .active {
    background-color: var(--yak-menu-focus-bg-color);
}

.sidebar-nav .active>a>span {
    font-weight: bold;
    color: var(--yak-menu-focus-text-color);
}

.sidebar-submenu {
    box-shadow: none;
}

.sidebar-submenu-collapsible {
    box-shadow: none;
    border: none;
    margin: 0;
    width: 100%;
    list-style-type: none;
    /* background-color: var(--yak-menu-focus-bg-color); */
    padding: 0;
}

.sidebar-submenu-collapsible>li {
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.sidebar-submenu-collapsible>.active {
    margin: 0;
    background-color: var(--yak-menu-focus-bg-color);
}

.sidebar-submenu-collapsible .sidebar-icon-container:has(.submenu-expand-icon) {
    background-color: transparent;
}

.sidebar-submenu-collapsible .sidebar-icon {
    width: 20px;
    height: 20px;
    margin: 0;
}

.sidebar-submenu-collapsible>.active .sidebar-icon {
    color: var(--yak-menu-focus-text-color);
}

.submenu-expand-icon {
    margin-left: 20px;
    transition: all 0.5s ease;
}

.submenu-expand-icon-expand {
    rotate: 90deg;
}

.sidebar-submenu-collapsible>.active>.sidebar-submenu-header {
    background-color: var(--yak-menu-focus-bg-color);
    color: var(--yak-menu-focus-text-color);
}

.sidebar-submenu-header {
    padding: 0;
    display: flex;
    align-items: center;
    min-height: 40px;
    border: none;
    padding: 0 0 0 20px;
    background-color: transparent;
    color: var(--yak-menu-text-color);
}

.sidebar-submenu-header:focus {
    background-color: transparent;
}

.sidebar-submenu-header:hover {
    background-color: var(--yak-menu-focus-bg-color);
    color: var(--yak-menu-focus-text-color);
}

.sidebar-submenu-header>span {
    font-size: 14px;
}

.sidebar-submenu-list-container {
    border: none;
    margin: 0;
    padding: 0;
}

.sidebar-submenu-list {
    list-style-type: none;
    padding: 0;
}

.sidebar-submenu-list>li {
    margin: 0;
}

.sidebar-submenu-list>li>a {
    padding: 0 0 0 50px;
    color: var(--yak-sub-menu-focus-text-color) !important;
}

.secondary-sidebar {
    margin: 0 0 25px 0;
}

.secondary-sidebar .profile-menu-logout-option {
    color: var(--yak-red);
}

.secondary-sidebar .profile-menu-logout-option>.sidebar-icon {
    color: var(--yak-red);
}

.sidebar-nav>li:hover .profile-menu-logout-option>.sidebar-icon {
    color: var(--yak-red) !important;
}

.sidebar-nav>li:hover .profile-menu-logout-option {
    color: var(--yak-red) !important;
}

.help-and-support-modal {
    height: fit-content;
    width: 400px;
    border-radius: 12px;
}

.help-and-support-modal .modal-header {
    border: none;
    display: flex;
    justify-content: center;
}

.help-and-support-modal .modal-header-text {
    font-size: 18px;
}

.help-and-support-modal .modal-content {
    border: none;
    
}

.help-and-support-modal .modal-content p {
    text-align: center;
    margin: 0;
    color: #0009;
}


/*---------------Responsive Design----------------*/

@media(min-width:768px) {
    #sidebar-wrapper {
        max-width: 230px;
    }
}

@media(max-width:768px) {
    .sidebar-nav {
        min-width: 250px;
        max-width: 250px;
    }

    .notification-list-li {
        display: block;
    }
}

@media(max-width:600px) {
    html, body {
        height: 100%;
    }

    body {
        min-height: 100%;
    }

    body:has( .side-bar-section-show) {
        overflow-y: hidden;
    }
    /*-----------------Header Design Start---------------------*/

    .header {
        min-height: 50px;
        max-height: 50px;
        background-color: var(--yak-common-bg-color);
        z-index: 11;
        border-bottom: 1px solid var(--yak-content-border-color);
    }

    .header-main {
        width: 100%;
        height: 100%;
        min-height: 50px;
        max-height: 50px;
    }

    .header-branding {
        display: flex;
        height: 50px;
        background-color: transparent;
    }

    .side-bar-toggler {
        display: flex;
        padding: 0 0 0 10px;
    }

    .nav-branding {
        height: 50px;
        flex: 1 1 auto;
        padding: 0 0 0 5px;
        border: none;
    }

    .scrollable-header {
        height: 100%;
        border: none;
    }

    .nav-notif-profile {
        padding: 0 10px 0 0;
    }

    .navbar-brand img {
        width: 100px;
    }

    .nav-search-form-container {
        height: 100%;
        padding: 0;
        width: 100%;
        overflow: visible;
    }

    #nav-search-form {
        height: 40px;
    }

    .body-smoke-screen {
        position: absolute;
        min-height: 100%;
        width: 100%;
        z-index: 10;
        background-color: var(--yak-smoke-screen);
        display: none;
        transition: all 0.5s ease-in-out;
    }

    .body-smoke-screen-show {
        display: block;
    }

    .search-bar {
        display: none;
        align-items: center;
        justify-content: center;
        height: 50px;
        border: none;
        border-radius: 0px !important;
        overflow: visible;
        width: 0px;
        min-width: 0px;
        max-width: 100vw;
        transition: all 1s ease-out;
        background-color: var(--yak-autocomplete-gray);
        box-shadow: none;
        position: fixed;
        top: 0% !important;
        left: 0 !important;
        z-index: 11 !important;
    }

    .search-bar-active {
        display: flex;
    }

    .search-bar-input-group {
        border-radius: 0px;
    }

    .nav-search-icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 40px;
        flex: 1 1 auto;
    }

    .nav-search-icon {
        font-size: 25px;
    }

    .nav-search-icon-focus {
        color: var(--yak-primary-color);
    }

    #nav-search-input {
        min-height: 50px;
        max-height: 50px;
        border: none;
        padding: 0 10px 0 0;
        margin: 0;
        border-radius: 0 0px 0px 0 !important;
        outline: none;
        overflow: hidden;
        flex: 9 1 auto;
    }

    #nav-search-input:focus {
        border: none;
        outline: none;
    }

    .key-binding {
        display: none;
    }

    .search-suggestion-container {
        min-height: 100px;
        max-height: 300px;
        border: none;
        border-radius: 0;
        overflow-y: auto;
        width: 100vw;
        transition: all 1s ease-out;
        background-color: var(--yak-autocomplete-gray);
        position: absolute;
        top: 100%;
        left: 0 !important;
        z-index: 11 !important;
        scrollbar-width: none;
        padding: 10px 0;
    }

    .search-suggestion-item-list {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .suggestion-item {
        height: fit-content;
        width: 100%;
        display: flex;
        padding: 5px 0;
    }

    .suggestion-item:hover {
        background-color: var(--yak-secondary-color);
    }

    .suggestion-item-sub-container {
        display: flex;
        align-items: center;
    }

    .suggestion-item-text-container {
        width: 90%;
        padding: 0 0 0 20px;
    }

    .suggestion-item-paste-container {
        width: 10%;
        justify-content: center;
        cursor: pointer;
        margin: 0 10px 0 0;
    }
    
    .suggestion-item-paste-container .suggestion-item-paste-icon {
        font-size: 18px;
    }

    .suggestion-item-search-icon {
        margin: 0 10px 0 0;
    }
    
    .suggestion-item-category-container {

    }
    
    .suggestion-item-category-icon {

    }
    
    .suggestion-item-category-text {

    }

    .suggestion-item-text {
        font-size: 12px;
        color: var(--yak-autocomplete-text-gray);
    }

    .suggestion-item:hover .suggestion-item-text {
        color: var(--yak-primary-color);
    }

    .suggestion-item:hover>.suggestion-item-sub-container {
        color: var(--yak-primary-color);
    }


    .nav-notif-container {
        height: 100%;
        margin: 0;
        padding: 0;
        border-right: none;
        display: flex;
        align-items: center;
    }

    .nav-phone-search-container {
        overflow: visible;
    }

    .nav-notif-container>button {
        border: none;
        background-color: transparent;
        height: 25px;
    }

    .nav-notif-container>button>i {
        font-size: 25px;
    }

    .nav-notif-container>button:hover>i {
        color: var(--yak-primary-color);
    }
    
    .nav-create-service-container {
        height: 100%;
        border: none;
    }

    .nav-create-service-container.phone-only .wrapper {
        margin-right: 10px;
        display: flex;
        align-items: center;
        height: 100%;
    }

    .nav-create-service-container.phone-only .nav-publish-service-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0px;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        font-size: 14px;
        padding: 0;
    }

    .nav-create-service-container.phone-only .nav-publish-service-link:hover {
        opacity: 0.8;
    }

    .nav-create-service-container.phone-only .nav-publish-service-link.skeleton-shimmer {
        background-color: #f7b733;
    }

    .nav-publish-service-link .create-service-icon {
        font-size: 24px;

    }


    .nav-profile-container {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: visible;
    }

    .nav-profile-container:hover {
        background-color: var(--yak-secondary-color);
    }

    .nav-profile-container>button {
        height: 100%;
        border: none;
        box-shadow: none;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
    }

    .nav-profile-pic {
        border-radius: 50%;
        height: 32px;
        width: 32px;
        margin: 0 0px 0 0;
    }

    .nav-profile-name {
        display: none;
    }

    .nav-profile-menu-icon {
        display: none;
        height: 20px;
        width: 30px;
    }

    .nav-profile-menu-icon>.nav-profile-menu-expand-icon {
        transition: all 0.5s ease;
        font-size: 20px;
    }

    #nav-profile-dropdown {
        position: absolute;
        z-index: 10;
        top: 100% !important;
        left: -105px !important;
        border-radius: 12px;
        /*     min-height: 200px; */
        overflow-y: visible;
        min-width: 140px;
        min-height: 100px;
    }

    #nav-profile-dropdown>li {
        border-radius: 0;
        min-height: 50px;
        max-height: 50px;
    }

    #nav-profile-dropdown>li:hover {
        background-color: var(--yak-secondary-color);
    }

    #nav-profile-dropdown>li:first-child {
        border-radius: 12px 12px 0 0;
    }

    #nav-profile-dropdown>li:last-child {
        border-radius: 0 0 12px 12px;
    }

    #nav-profile-dropdown>li a {
        font-size: 14px;
        color: var(--yak-black);
        padding: 10px 10px;
        width: 100%;
    }

    #nav-profile-dropdown>li:hover a {
        color: var(--yak-primary-color);
    }

    .profile-menu-logout-option a {
        color: var(--yak-red) !important;
    }

    .profile-menu-logout-option:hover a {
        color: var(--yak-red) !important;
    }

    .nav-profile-dropdown-item-icon {
        font-size: 20px;
        margin: 0 10px !important;
    }


    /*-----------------Header Design End---------------------*/

    .main-part {
        touch-action: auto;
        padding-top: 50px;
    }

    .content-section {
        border-radius: 10px 10px 0 0;
    }

    .side-bar-section {
        position: fixed;
        top: 0;
        left: -250px;
        min-width: 250px;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        max-height: 100%;
    }

    .side-bar-section>#wrapper {
        display: flex;
        flex: 1 1 auto;
    }

    #sidebar-wrapper {
        height: auto;
        min-height: 100%;
        flex: 1 1 auto;
    }

    .side-bar-section-show {
        left: 0;
    }

    #side-bar-smoke-screen.side-bar-smoke-screen-show {
        position: fixed;
        top: 0px;
        left: 0px;
        min-height: 100vh;
        display: block !important;
        z-index: 11;
    }
    
    .help-and-support-modal {
        height: fit-content;
        width: 90vw;
    }
}

.material-icons-outlined,
.material-icons {
/*     color: var(--yak-primary-text-color); */
}