/* --- SIDEBAR NAVIGATION --- */

    #sidebar-nav {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 0px;

        position: fixed;
        width: 250px;
        height: 100vh;
        left: 0px;
        top: 0px;
        
        background-color: var(--base-white);

        transition: all 0.5s;
    }

    #sidebar-nav .content {
        /* Auto layout */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0px;
        width: 100%;
        height: 100vh;

        /* Flex order */
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 1;
    }

    #sidebar-nav .divider {
        width: 1px;
        height: 100vh;
        background-color: var(--grey-200);

        /* Flex order */
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }

    

/* -- Sidear Nav Items -- */

    .nav {

        width: 100%;
        min-height: 300px;
        
        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0px;
        gap: 20px;

        /* Flex order */
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;

    }

    .header {

        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px 20px 0px 20px;

        /* Flex order */
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;

    }

    .header .logo {

        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 0px;

        /* Flex order */
        flex: none;
        order: 0;
        flex-grow: 0;

        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        transition: all 0.35s ease;

    }

    .header .logo .img {
        width: 120px;
        background-image: var(--nav-brand-logo);
        width: 100%;
        height: 50px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        transition: all 0.35s ease;
    }

    .search {
        
        width: 100%;
        height: 44px;

        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px 24px;

        /* Flex order */
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;

        display: none;

    }

    .search .input-dropdown {

        width: 100%;
        height: 44px;
        position: relative;

        /* Flex order */
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;

    }

    .search .input-dropdown ._input-dropdown-base {
        position: absolute;
        height: 44px;
        left: 0px;
        right: 0px;
        top: 0px;

        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 6px;
    }

    .search .input-dropdown ._input-dropdown-base .input-with-label {
        width: 100%;
        height: 44px;

        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 6px;

        /* Flex order */
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    .search .input-dropdown ._input-dropdown-base .input-with-label .input {
        
        width: 100%;
        height: 44px;

        /* Input */
        box-sizing: border-box;

        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10px 14px;
        gap: 8px;

        background: var(--base-white);
        border: 1px solid var(--grey-300);

        /* Shadow/xs */
        box-shadow: var(--shadow-xs);
        border-radius: 8px;

        /* Flex order */
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    .search .input-dropdown ._input-dropdown-base .input-with-label .input .content {
        
        width: 100%;
        height: 24px;

        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 0px;
        gap: 8px;

        /* Flex order */
        flex: none;
        order: 0;
        flex-grow: 1;
    }

    .search .input-dropdown ._input-dropdown-base .input-with-label .input .content .search {

        width: 20px;
        height: 20px;
        position: relative;
        padding: 0;

        /* Flex order */
        flex: none;
        order: 0;
        flex-grow: 0;
    }

    .search .input-dropdown ._input-dropdown-base .input-with-label .input .content .search .icon {

        /* Icon */
        position: absolute;
        left: 12.5%;
        right: 12.5%;
        top: 20%;
        bottom: 0;
        background-image: var(--icon-search);
        background-repeat: no-repeat;
        background-size: contain;
    }

    .search .input-dropdown ._input-dropdown-base .input-with-label .input .content .text {

        width: 53px;
        height: 24px;
        color: var(--grey-500);

        /* Flex order */
        flex: none;
        order: 1;
        flex-grow: 0;
    }

    .nav .navigation {

        position: relative;

        /* Auto layout */    
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 4px;

        /* Flex order */
        flex: none;
        order: 2;
        align-self: stretch;
        flex-grow: 0;
    }

    .navigation [data-main-nav-link],
    .navigation a {
        width: 100%;
        text-decoration: none;
    }

    .nav-item-base {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        border-radius: 6px;
        cursor: pointer;

        transition: all 0.3s ease;
    }

    .nav-item-base:hover {
        /* background-color: var(--grey-100) !important; */
    }

    .nav-item-content {   
        width: auto;
        height: auto;
        
        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 12px;

        /* Flex order */
        flex: none;
        order: 0;
        flex-grow: 0;
    }

    .nav-item-content .icon-wrapper {
        width: var(--icon-wrapper-width);
        height: var(--icon-wrapper-height);
        position: relative;

        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0px;

        /* Flex order */
        flex: none;
        order: 0;
        flex-grow: 0;
        background-repeat: no-repeat;
        background-size: var(--icon-width) auto;
        background-position: center;

        transition: all 0.5s ease
    }

    .nav-home {
        background-image: var(--icon-home);
    }
    .nav-dashboard {
        background-image: var(--icon-dashboard);
    }
    .nav-data-request {
        background-image: var(--icon-data-request);
    }
    .nav-projects {
        background-image: var(--icon-projects);
    }
    .nav-tasks {
        background-image: var(--icon-tasks);
    }
    .nav-reporting {
        background-image: var(--icon-reporting);
    }
    .nav-users {
        background-image: var(--icon-users);
    }
    .nav-groups {
        background-image: var(--icon-groups);
    }
    .nav-support {
        background-image: var(--icon-support);
    }
    .nav-settings {
        background-image: var(--icon-settings);
    }
    .nav-io-form {
        background-image: var(--icon-io-form);
    }
    .nav-suppress-user {
        background-image: var(--icon-phone-off);
    }
    .nav-counts {
        background-image: var(--icon-locate);
    }
    .nav-calendar {
        background-image: var(--icon-calendar);
    }
    .nav-dealer-directory {
        background-image: var(--icon-search);
    }
    .nav-dealers {
        background-image: var(--icon-car-nav);
    }

    .nav-item-content .text {

        color: var(--grey-700);

        /* Flex order */
        flex: none;
        order: 1;
        flex-grow: 0;

        transition: all 0.5s ease;

    }

    .nav-item-actions {

        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0px;
        gap: 8px;

        width: var(--icon-dropdown-width);
        height: var(--icon-dropdown-height);

        /* Flex order */
        flex: none;
        order: 1;
        flex-grow: 0;

        transition: all 0.5s ease;
    }

    .nav-item-actions .chevron-down {

        width: 100%;
        height: 100%;
        background-image: var(--icon-dropdown);
        background-repeat: no-repeat;
        background-size: contain;

        /* Flex order */
        flex: none;
        order: 0;
        flex-grow: 0;

        transition: transform 0.2s ease;
    }

    .chevron-down.open {
        transform: rotate(180deg);
    }


    .dropdown {
        display: none;
        opacity: 1;
        transition: all 0.5s ease;
    }


/* -- Sidear Footer -- */

    #sidebar-nav .footer {
       
        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px 0px 32px ;
        gap: 20px;

        /* Flex order */
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;

    }

    .footer .navigation {

        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 4px;

        /* Flex order */
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }


    /* - Feature Card - */
    .nav-featured-card {

        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 16px;
        gap: 12px;

        background: var(--primary-25);
        border-radius: 8px;

        /* Flex order */
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;

    }

    .nav-featured-card .text-content {
        
        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 4px;

        /* Flex order */
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;

    }

    .nav-featured-card .text-content .text {

        color: var(--grey-900);

        /* Flex order */
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    .nav-featured-card .text-content .supporting-text {

        color: var(--grey-500);

        /* Flex order */
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }

    .nav-featured-card .progress-bar svg {
        width: 100%;
    }

    .nav-featured-card .actions {
        
        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 0px;
        gap: 18px;

        /* Flex order */
        flex: none;
        order: 2;
        flex-grow: 0;
    }

    .nav-featured-card .actions .nav-featured-card-button {

        /* Auto layout */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px;
        gap: 12px;

        cursor: pointer;

        /* Flex order */
        flex: none;
        order: 0;
        flex-grow: 0;
    }

    .nav-featured-card .actions .nav-featured-card-button .text.dismiss {
        color: var(--grey-500);
    }

    .nav-featured-card .actions .nav-featured-card-button .text.act {
        color: var(--primary-700);
    }

    /* - Account Section - */

    .segment-divider {

        width: 250px;
        height: 1px;

        background: var(--grey-200);

        /* Flex order */
        flex: none;
        order: 2;
        align-self: stretch;
        flex-grow: 0;
    }

    .footer .account {

        /* Auto layout */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0px 8px;
        
        position: relative;

        /* Flex order */
        flex: none;
        order: 3;
        align-self: stretch;
        flex-grow: 0;
    }

    .footer .account .avatar-label-group {
        
        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 12px;

        cursor: pointer;

        /* Flex order */
        flex: none;
        order: 0;
        flex-grow: 0;

    }

    .footer .account .avatar-label-group .avatar {
        
        /* Auto layout */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px;

        width: var(--avatar-nav-width);
        height: var(--avatar-nav-height);
        border-radius: 50%;

        /* Flex order */
        flex: none;
        order: 0;
        flex-grow: 0;

    }

    .footer .account .avatar-label-group .avatar img { 
        width: var(--avatar-nav-width);
        height: var(--avatar-nav-height);
        border-radius: 50%;
    }


    .footer .account .avatar-label-group .text-content {

        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;

        /* Flex order */
        flex: none;
        order: 1;
        flex-grow: 0;

        
        transition: all 0.5s ease;
    }



    .footer .account .avatar-label-group .text-content .text {
        
        color: var(--grey-900);
    
        /* Flex order */
        flex: none;
        order: 0;
        flex-grow: 0;

    }

    .footer .account .avatar-label-group .text-content .supporting-text {

        color: var(--grey-500);  
        
        /* Flex order */
        flex: none;
        order: 1;
        flex-grow: 0;

    }

    .footer .account .icon {

        width: 18px;
        height: 18px;

        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-60%);

        /* Flex order */
        flex: none;
        order: 1;
        flex-grow: 0;

        background-image: var(--icon-logout);
        background-repeat: no-repeat;
        background-size: contain;

        cursor: pointer;

    }

    .nav-active {
        background-color: var(--primary-25);
        border-right: 3px solid var(--primary-700);
        border-radius: 0px;
        color: var(--primary-700)!important;
    }

    /* Collapsed Sidebar Nav Styles */


    .collapsed .header .logo .img {
        background-image: var(--nav-brand-logo-icon);
        transition: all 0.35s ease;
    }

    #sidebar-nav.collapsed  {
        width: 80px;
    }
    .collapsed .nav-item-base {
        padding: 12px;
    }

    .collapsed .nav-item-base,
    .collapsed .footer .account {
        /* justify-content: center; */
        transition: all 0.5s ease;
    }

    .collapsed .dropdown {
        /* display: none; */
        opacity: 0;
        height: 0px;
        transition: all 0.25s ease;
    } 

    .collapsed .nav-item-content,
    .collapsed .footer .account .avatar-label-group {
        gap: 0;
        /* margin: auto; */
    }

    .collapsed .nav-item-content {
        padding-left: 14px;
    }

    .collapsed .footer .account .avatar-label-group {
        padding-left: 10px;
    }

    .collapsed .nav-item-content .text,
    .collapsed .nav-item-actions,
    .collapsed .footer .account .avatar-label-group .text-content,
    .collapsed #logout-button
    {
        /* display: none; */
        opacity: 0;
        width: 0;
        transition: all 0.5s ease;
    }

    .collapsed .nav-item-content .icon-wrapper {
        transform: scale(1.15);
    }
    .main-content {
        transition: margin 0.5s ease;
    }
    #sidebar-nav.collapsed + .main-content {
        margin-left: 80px;
    }
    #collapse-nav {
        border: none;
        background: none;
        padding: 16px 8px 36px 32px;
        cursor: pointer;
        position: relative;
        width: 40px;
        height: 40px;
    }

    #collapse-nav:before {
        display: inline-flex;
        content: '';

        /* Using the background-image and
           its related properties to add
           the SVG content */
        background-image: var(--icon-sidebar-close);
        background-size: contain;
        height: 20px;
        width: 20px;
    }
    #collapse-nav.collapsed:before {
        content: '';
        background-image: var(--icon-sidebar-open);
    }


    /* Collapsed Sidebar Nav Styles */

    #sidebar-nav.mobile  {
        width: 100%;
        max-width: 400px;
        padding: 0px 48px 48px 40px;
    }

    #sidebar-nav.mobile + .main-content {
        margin-left: 100%;
    }