/* Main CSS File */

/* This file contains root colors only */
/* Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Ubuntu */    
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root{

    --sidebar-width:4rem;
    --top-nav-height:3rem;
    --breadcrumb-height:20px;

    /* Font Families */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Ubuntu', sans-serif;

    /* Font Sizes */
    --base-font-size: 12px;
    --xs-font-size: 10px;
    --xxs-font-size: 8px;
    --sm-font-size: 12px;
    --md-font-size: 14px;
    --lg-font-size: 16px;
    --xl-font-size: 18px;
    --xxl-font-size: 20px;

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
}

/* This file contains root padding styles only */

:root{

    --gap-space:0.8rem;
    --padding:1.2rem;
    --radius:12px;
    /* Button Padding */
    --pad-btn: .1rem .9rem;
    --pad-btn-rounded: .6rem 1.5rem;

    /* Input Padding */
    --pad-input: .2rem .4rem;

    /* Ghost Opacity */
    --ghost-opacity: 0.06;

    --gap-00: .3rem;
    --gap-01: .6rem;
    --form-gap: 1.6rem;
}
/* All Colors.. */
:root{



    --has-scheduled-commands-bg:rgb(174, 142, 0, 0.05);

}


/* This file contains root border styles only */

:root{

    /* Radius */
    --border-radius-01: 4px;
    --border-radius-02: 6px;
    --border-radius-03: 12px;
    --border-radius-rounded: 18px;

    /* Border Widths */
    --border-width-thin: 2px;
    --border-width-thick: 3px;
}

/*** Dark Mode ***/ 
:root[data-color-theme="dark"]{

        /* Genuine Action Background */
        --genuine-action-bg: #171c1f;
        --genuine-action-border: #152026;
        --genuine-action-border-light: rgba(255,255,255,0.2);

        --edit-window-bg: #171c1f;
        --edit-window-border: #152026;

        --text-input-bg:#1b2127;
        --breadcrumb-bg:linear-gradient(to right, rgb(247, 250, 249, 0.03), rgb(247, 250, 249, 0.01));

        --selected-row-bg:rgba(126,255,230,0.05);

        --table-row-bg:#11181a;
        --table-row-bg-odd:#111619;

    /* Font Weights */
    --base-font-weight:100;
    --md-font-weight:500;
    --lg-font-weight:600;
    --xl-font-weight:700;
    --xxl-font-weight:800;

    /* Background Colors */
    --background: #0d1012;
    --nav-background: #0d1012;
    --content-background: #191c1e;
    --content-background-light:#272b2d; 
    --content-background-secondary: #111417; 
    --content-background-tertiary: #111619;
    /*--content-background-secondary: #181d21; */
    /*--content-background-secondary: #15181a;*/
    --tertiary-color: #018544;

    --quaternary-color: #cf5b00;
    --text-color: #ffffff;
    --text-color-ghost: rgba(255, 255, 255, 0.7);
    

    /* Text Colors */
    --text-color-primary: #f1f1f1;
    --text-color-secondary: rgb(255,255,255,0.7);
    --text-color-ghost: rgb(255,255,255,0.8);

    /* Border Colors */
    --border-color-primary: rgba(255,255,255,0.4);
    --panel-border-color: rgba(255,255,255,0.0);
    --border-color-secondary: rgba(255,255,255,0.2);


    /* Unique Element Colors */
    --item-info-arrow-bg:#1f2225;
    --item-info-arrow-border:rgb(76,83,89, 0.2);
    --item-info-arrow-hover-bg:rgb(76,83,89, 0.4);

    --box-shadow-primary:0 0 10px 0 rgba(0, 0, 0, 0.4);
    --box-shadow-secondary:0 0 10px 0 rgba(0, 0, 0, 0.0);

    /* Button Colors */
    /* Button Colors */
    --plain-button-bg:inherit;
    --plain-button-border-color:rgb(218,218,218,0.6);
    --plain-button-ghost:rgb(218,218,218,0.04);
    --plain-button-color:inherit;
    --button-color-action-gradient:linear-gradient(45deg, #097856, #098f66);
    --button-color-action: #097856;
    --button-color-action-ghost: #09d99a;
    --button-color-action-ghost-light: rgb(9,143,102,var(--ghost-opacity));
    --button-color-submit-gradient: linear-gradient(45deg, #08538a, #0761a3);
    --button-color-submit: #08538a;
    --button-color-submit-ghost: #0984de;
    --button-color-submit-ghost-light: rgb(7,97,163,var(--ghost-opacity));
    --button-color-edit-gradient: linear-gradient(45deg, #a6810f, #cf9f0b);
    --button-color-edit: #a6810f;
    --button-color-edit-ghost: #f0c14b;
    --button-color-edit-ghost-light: rgb(240,193,75,var(--ghost-opacity));
    --button-color-delete-gradient: linear-gradient(45deg, #a1380a, #c6390c);
    --button-color-delete: #a1380a;
    --button-color-delete-ghost: #fba050;
    --button-color-delete-ghost-light: rgb(161,56,10,var(--ghost-opacity));
    --button-color-action-02: linear-gradient(45deg,#134487, #0f4692);
    --button-color-cancel: #a1380a;

    /* Status Colors */
    --status-color-active: #097856;
    --status-color-active-light: rgb(9,120,86,var(--ghost-opacity));
    --status-color-inactive: #a1380a;
    --status-color-inactive-light: rgb(161,56,10,var(--ghost-opacity));
    --status-color-pending: #e7b721;
    --status-color-pending-light: rgb(255,209,177,var(--ghost-opacity));

    --active-nav-bg:#111417 ;
    --active-nav-text-color:white;

    /* Dropdown Colors */
    --dropdown-color-bg: #f7f9fb;
    --dropdown-border-color: #e7e9ec;

    /* Shadows */
    --shadow-01: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    --shadow-02: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
    --shadow-03: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);

    /* Metrics */
    --metric-status-success: #2ecc71;
    --metric-status-success-light: rgba(46, 204, 113, 0.15); 
    --metric-status-neutral: #fcd276;
    --metric-price-color: #ffe7b2;
    --metric-price-color-bg: rgb(255, 231, 178, 0.05);
    --metric-status-neutral-light: rgba(252, 210, 118, 0.15);
    --metric-panel-background: rgb(129,255,140,0.01);

    /* IconLocations */
    --icon-add-src:url('../../images/icons/add_light.png');
    --icon-delete-src:url('../../images/icons/del_light.png');
    --icon-edit-src:url('../../images/icons/edit_light.png');
    --icon-submit-src:url('../../images/icons/submit_light.png');
    --icon-download-src:url('../../images/icons/download_light.png');

    --icon-upload-src:url('../../images/icons/upload_light.png');
    --icon-close-src:url('../../images/icons/close_light.png');
    --icon-menu-src:url(../assets/icons/menu-light.svg);
    --icon-search-src:url('../../images/icons/search_light.png');

    --icon-filter-src:url(../assets/icons/filter-light.svg);
    --icon-arrow-down-src:url(../assets/icons/arrow-down-light.svg);
    --icon-mail-src:url('../../images/icons/mail_light.png');
    --icon-machine-src:url('../../images/icons/sideBar/mach_light.png');
    --icon-dashboard-src:url('../../images/icons/sideBar/dash_light.png');
    --icon-settings-src:url('../../images/icons/tools_light.png');
    --icon-logout-src:url('../../images/icons/logout_light.png');


    --icon-user-src:url(../assets/icons/user-light.svg);
    --icon-users-src:url(../assets/icons/users-light.svg);

    --icon-user-group-src:url(../assets/icons/user-group-light.svg);
    --icon-reports-src:url('../../images/icons/sideBar/reports_light.png');
    --icon-products-src:url('../../images/icons/sideBar/products_light.png');
    --icon-select-all-src:url('../../images/icons/select-all_light.png');
    --icon-comment-src:url('../../images/icons/comment_light.png');
    --icon-calendar-src:url('../../images/icons/calendar_light.png');
    --icon-check-src:url('../../images/icons/check_light.png');
    --icon-connectivity-src:url('../../images/icons/connectivity_light.png');
    --icon-roles-src:url('../../images/icons/sideBar/roles_light.png');
    --icon-clients-src:url('../../images/icons/sideBar/clients_light.png');
    --icon-command-src:url('../../images/icons/command_light.png');
    --icon-api-cloud-src:url('../../images/icons/api_cloud.png');
    --icon-api-cloud-light-mode:url('../../images/icons/api_cloud_light.png');
    --eye-icon-src:url('../../images/icons/eye-icon-light.png');
    --security-icon-src:url('../../images/icons/admin_key.png');
    --icon-pages-src:url('../../images/icons/pages-icon.png');
    --icon-play-src:url('../../images/icons/play.png');
    --icon-ui-src:url('../../images/icons/sideBar/ui_light.png');
    --icon-signage-src:url('../../images/icons/sideBar/video_light.png');
    --icon-touch-src:url('../../images/icons/sideBar/interaction_light.png');
    --icon-sales-src:url('../../images/icons/dash-bars-light.png');
    --icon-copy-src:url('../../images/icons/copy_light.png');
    --icon-location-src:url('../../images/icons/location.png');
    --icon-router-src:url('../../images/icons/router_light.png');
    --software-package-icon-src:url('../../images/icons/software.png');
    --icon-error-src:url('../../images/icons/errorL.png');
    --icon-home-src:url('../../images/icons/business_light.png');
    --icon-ticket-src:url('../../images/icons/sideBar/ticket_light.png');
    --icon-promo-src:url('../../images/icons/promo_2_light.png');
    --icon-trash-bin-src:url('../../images/icons/trash-bin-light.png');
}

/*** Light Mode ***/ 
:root[data-color-theme="light"]{


        /* Genuine Action Background */
        --genuine-action-bg: #f7f7f7;
        --genuine-action-border: #c9c9c9;
        --genuine-action-border-light: #dedede;

        --edit-window-bg: #ffffff;
        --edit-window-border: #c9c9c9;

        --text-input-bg:#f7f7f7;

        --breadcrumb-bg:linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255));

        --table-row-bg:rgb(247, 247, 247);
        --table-row-bg-odd:rgb(253, 253, 253);
        --selected-row-bg:rgb(191, 240, 255);

    /* Font Weights */
    --base-font-weight:500;
    --md-font-weight:500;
    --lg-font-weight:600;
    --xl-font-weight:700;
    --xxl-font-weight:800;
    /* Background Colors */
    --background: #f7f7f7;
    --nav-background: white;
    --content-background: #f7f7f7;
    --content-background-secondary: #fff;
    --tertiary-color: #0097b2;
    --quaternary-color: #ffb275;

    --text-color: #000000;

    --text-color-ghost: rgba(0, 0, 0, 0.7);

    /* Text Colors */
    --text-color-primary: #131415;
    --text-color-secondary: rgb(0,0,0,0.7);
    --text-color-ghost: rgb(0,0,0,0.8);

    /* Border Colors */
    --border-color-primary: rgba(0,0,0,0.05);
    --panel-border-color: rgba(0,0,0,0.05);
    --border-color-secondary: rgba(0,0,0,0.2);


    /* Unique Element Colors */
    --item-info-arrow-bg:#1f2225;
    --item-info-arrow-border:rgb(76,83,89, 0.2);
    --item-info-arrow-hover-bg:rgb(76,83,89, 0.4);

    --box-shadow-primary:0 0 10px 0 rgba(0, 0, 0, 0.0);
    --box-shadow-secondary:0 0 10px 0 rgba(0, 0, 0, 0.08);

/* Button Colors */
    /* Button Colors */
    --plain-button-bg:inherit;
    --plain-button-border-color:rgb(0,0,0,0.6);
    --plain-button-ghost:rgb(218,218,218,0.04);
    --plain-button-color:inherit;
    --button-color-action-gradient:linear-gradient(45deg, #097856, #098f66);
    --button-color-action: #097856;
    --button-color-action-ghost: white;
    --button-color-action-ghost-light: rgb(0,130,173,0.9);
    --button-color-submit-gradient: linear-gradient(45deg, #08538a, #0761a3);
    --button-color-submit: #08538a;

    --button-color-submit-ghost: #0984de;
    --button-color-submit-ghost-light: rgb(7,97,163,var(--ghost-opacity));
    --button-color-edit-gradient: linear-gradient(45deg, #a6810f, #cf9f0b);
    --button-color-edit: #a6810f;
    --button-color-edit-ghost: #e5aa16;
    --button-color-edit-ghost-light: #ffe6a9;
    --button-color-delete-gradient: linear-gradient(45deg, #a1380a, #c6390c);
    --button-color-delete: #a1380a;
    --button-color-delete-ghost: #db6b09;
    --button-color-delete-ghost-light: #ffe9af;
    --button-color-action-02: linear-gradient(45deg,#134487, #0f4692);
    --button-color-cancel: #a1380a;

    /* Status Colors */
    --status-color-active: #097856;
    --status-color-active-light: rgb(9,120,86,var(--ghost-opacity));
    --status-color-inactive: #a1380a;
    --status-color-inactive-light: rgb(161,56,10,var(--ghost-opacity));
    --status-color-pending: black;
    --status-color-pending-light: #e7b721;

    --active-nav-bg:#f3f3f3 ;

    /* Dropdown Colors */
    --dropdown-color-bg: #f7f9fb;
    --dropdown-border-color: #e7e9ec;

    /* Shadows */
    --shadow-01: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    --shadow-02: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
    --shadow-03: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);

    /* Metrics */
    --metric-status-success: #0082ad;
    --metric-status-success-light: #83bccf; 
    --metric-status-neutral: #fcd276;
    --metric-status-neutral-light: rgba(252, 210, 118, 0.15);
    --metric-panel-background: rgb(129,255,140,0.01);

    /* IconLocations */
    --icon-add-src:url('../../images/icons/add_light.png');
    --icon-delete-src:url('../../images/icons/del_dark.png');
    --icon-edit-src:url('../../images/icons/edit_dark.png');
    --icon-submit-src:url('../../images/icons/submit_dark.png');
    --icon-download-src:url('../../images/icons/download_dark.png');
    --icon-upload-src:url('../../images/icons/upload_dark.png');
    --icon-close-src:url(../assets/icons/close-light.svg);
    --icon-menu-src:url(../assets/icons/menu-light.svg);
    --icon-search-src:url('../../images/icons/search_dark.png');
    --icon-filter-src:url('../../images/icons/filter_dark.png');
    --icon-arrow-down-src:url('../../images/icons/arrow-down_dark.png');
    --icon-mail-src:url('../../images/icons/mail_dark.png');
    --icon-dashboard-src:url('../../images/icons/sideBar/dash_dark.png');
    --icon-settings-src:url('../../images/icons/tools_dark.png');
    --icon-logout-src:url('../../images/icons/logout_dark.png');

    --icon-machine-src:url('../../images/icons/sideBar/mach_dark.png');


    --icon-user-src:url(../assets/icons/user-light.svg);
    --icon-users-src:url(../assets/icons/users-light.svg);


    --icon-user-group-src:url(../assets/icons/user-group-light.svg);
    --icon-reports-src:url('../../images/icons/sideBar/reports_dark.png');
    --icon-sales-src:url('../../images/icons/dash-bars-light.png');
    --icon-products-src:url('../../images/icons/sideBar/products_dark.png');
    --icon-select-all-src:url('../../images/icons/select-all_dark.png');
    --icon-check-src:url('../../images/icons/check_dark.png');
    --icon-connectivity-src:url('../../images/icons/connectivity_dark.png');
    --icon-roles-src:url('../../images/icons/sideBar/roles_dark.png');
    --icon-clients-src:url('../../images/icons/sideBar/clients_dark.png');
    --icon-command-src:url('../../images/icons/command_light.png');
    --icon-api-cloud-src:url('../../images/icons/api_cloud.png');
    --icon-api-cloud-light-mode:url('../../images/icons/api_cloud_dark.png');
    --eye-icon-src:url('../../images/icons/eye-icon-light.png');
    --security-icon-src:url('../../images/icons/admin_ey.png');
    --icon-pages-src:url('../../images/icons/pages-icon.png');
    --icon-play-src:url('../../images/icons/play.png');
    --icon-ui-src:url('../../images/icons/sideBar/ui_dark.png');
    --icon-signage-src:url('../../images/icons/sideBar/video_dark.png');
    --icon-touch-src:url('../../images/icons/sideBar/interaction_dark.png');
    --icon-copy-src:url('../../images/icons/copy_dark.png');
    --icon-location-src:url('../../images/icons/location.png');

    --icon-comment-src:url('../../images/icons/comment_dark.png');
    --icon-calendar-src:url('../../images/icons/calendar_dark.png');
    --icon-router-src:url('../../images/icons/router_dark.png');
    --software-package-icon-src:url('../../images/icons/software.png');
    --icon-error-src:url('../../images/icons/errorL.png');
    --icon-home-src:url('../../images/icons/business_dark.png');
    --icon-ticket-src:url('../../images/icons/sideBar/ticket_dark.png');
    --icon-promo-src:url('../../images/icons/promo_2_dark.png');
    --icon-trash-bin-src:url('../../images/icons/trash-bin-light.png');
}

#thru-logo{
    color:var(--text-color);
}

#top-navigation-bar{
    z-index: 1001 !important;
}


/**** Icon Locations ****/
.theme-icon {
    width: 20px;
    height: 20px;
    position: relative;
    visibility: hidden;
}

/* Display the themed icon using pseudo-element */
.theme-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: visible;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.error-icon::before{
    background-image:var(--icon-error-src);
}
.ticket-icon::before{
    background-image:var(--icon-ticket-src);
}
.play-icon::before{
    background-image:var(--icon-play-src);
}
.pages-icon::before{
    background-image:var(--icon-pages-src);
}
.promo-icon::before{
    background-image:var(--icon-promo-src);
}
.dashboard-icon::before{
    background-image:var(--icon-dashboard-src);
}
.settings-icon::before{
    background-image:var(--icon-settings-src);
}
.logout-icon::before{
    background-image:var(--icon-logout-src);
}
.mail-icon::before{
    background-image:var(--icon-mail-src);
}
.logout-icon::before{
    background-image:var(--icon-logout-src);
}
.machine-icon::before{
    background-image:var(--icon-machine-src);
}
.products-icon::before{
    background-image:var(--icon-products-src);
}
.reports-icon::before{
    background-image:var(--icon-reports-src);
}
.sales-icon::before{
    background-image:var(--icon-reports-src);
}
.home-icon::before{
    background-image:var(--icon-home-src);
    max-width:14px;
}

.edit-icon::before{
    background-image:var(--icon-edit-src);
}
.delete-icon::before{
    background-image:var(--icon-delete-src);
}
.submit-icon::before{
    background-image:var(--icon-submit-src);
}
.download-icon::before{
    background-image:var(--icon-download-src);
}
.upload-icon::before{
    background-image:var(--icon-upload-src);
}
.select-all-icon::before{
    background-image:var(--icon-select-all-src);
}
.comment-icon::before{
    background-image:var(--icon-comment-src);
}
.calendar-icon{
    content:var(--icon-calendar-src);
}

.check-icon{
    content:var(--icon-check-src);
}
.tools-icon{
    content:var(--icon-settings-src);
}
.connectivity-icon{
    content:var(--icon-connectivity-src);
}
.roles-icon::before{
    background-image:var(--icon-roles-src);
}
.clients-icon::before{
    background-image:var(--icon-clients-src);
}
.add-icon{
    content:var(--icon-add-src);
}
.command-icon{
    content:var(--icon-command-src);
}
.api-cloud-icon{
    content:var(--icon-api-cloud-src);
}
.api-cloud-light-mode::before{
    background-image:var(--icon-api-cloud-light-mode);
}
.eye-icon::before{
    background-image:var(--eye-icon-src);
}
.security-icon::before{
    background-image:var(--security-icon-src);
}
.ui-icon::before{
    background-image:var(--icon-ui-src);
}
.signage-icon::before{
    background-image:var(--icon-signage-src);
}
.touch-icon::before{
    background-image:var(--icon-touch-src);
}
.copy-icon::before{
    background-image:var(--icon-copy-src);
}
.location-icon::before{
    background-image:var(--icon-location-src);
}
.router-icon::before{
    background-image:var(--icon-router-src);
}
.software-icon::before{
    background-image:var(--software-package-icon-src);
}
.search-icon::before{
    background-image:var(--icon-search-src);
}
.trash-bin-icon::before{
    background-image:var(--icon-trash-bin-src);
}


/* Customer interaction elements .. */
.products-viewed{
    background:linear-gradient(45deg, #076b7d, #098699, #08598c);

}
.products-added{
    background:linear-gradient(45deg, #063c6b, #096499, #08418c);

}
.products-removed{
    background:linear-gradient(45deg, #063c6b, #096499, #08418c);

}
.discount-attempts{
    background:linear-gradient(45deg, #b66100, #d48700, #ffb700);
}
.products-viewed span, .products-added span, .products-removed span, .discount-attempts span,
.products-viewed p, .products-added p, .products-removed p, .discount-attempts p{
    color:white !important;
}




















/**** Icon Locations ****/





[data-color-theme="light"], [data-color-theme="dark"] {

    transition: background-color 0.6s ease-in-out,
                background 0.6s ease-in-out,
                color 0.6s ease-in-out,
                border-color 0.6s ease-in-out,
                box-shadow 0.6s ease-in-out,
                font-weight 0.6s ease-in-out;
}

/* Add transition to all elements that might change color */
*, *::before, *::after {
    transition: background-color 0.6s ease-in-out,
                background 0.6s ease-in-out,
                color 0.6s ease-in-out,
                border-color 0.6s ease-in-out,
                box-shadow 0.6s ease-in-out;
}

/* Global Styles */
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family:poppins;
    color:var(--text-color);
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--content-background-secondary);
}

::-webkit-scrollbar-thumb {
    background-color: var(--genuine-action-bg);
    border-radius: 3px;
}

/* Hover state */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--genuine-action-bg);
}
body{
    height:100vh;
    width:100vw;
    background:var(--nav-background);
    position:relative;
}

/*
[data-color-theme="light"] body{
    background-color:#006983 !important;
}
[data-color-theme="light"] #side-bar a,
[data-color-theme="light"] #side-bar p,
[data-color-theme="light"] #top-navigation-bar p,
[data-color-theme="light"] #top-navigation-bar a{
    color:white !important;
}
    */


a, button{
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;  /* Safari */
    -ms-user-select: none;      /* IE 10+ and Edge */
    user-select: none;    
}
a[disabled], button[disabled]{
    opacity: 0.3;
    pointer-events: none;
}
[disabled], [data-disabled="true"]{
    opacity: 0.3;
    pointer-events: none;
}
a:hover, button:hover{
    opacity: 0.6;
}
[active-selected]{
    border:2px solid var(--status-color-active);
}

[inactive], [data-inactive="true"]{
    opacity: 0.3;
}
[active-view] {
    display: block;
}

[inactive-view] {
    display: none;
}
/* Navigation section */
#side-bar{
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    gap:0.2rem;
    justify-content:flex-start; 
    position:fixed; 
    top:0; 
    left:0; 
    transition: all 0.1s ease-in-out;
    width:4rem; 
    height:100%; 
    padding:3rem 0.2rem 1rem 0.2rem;
    z-index:1000;
}
[data-color-theme="light"] #side-bar,
[data-color-theme="light"] #top-navigation-bar{
    background-color:#f5f5f5cd !important;
}
[data-color-theme="light"] .reg-fs,
[data-color-theme="light"] .sm-fs,
[data-color-theme="light"] .xs-fs,
[data-color-theme="light"] .xxs-fs,
[data-color-theme="light"] .small-fs{
    font-weight:500 !important;
}

#side-bar .side-bar-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.3rem;
    width:100%;
    padding:0.4rem 0;
    font-weight:500;
    font-size:8px;
    position:relative;
    border:none;
    background:inherit;
    color:var(--text-color);
    transition: all 0.5s ease-in-out;
}
.nav-text{
    color:var(--text-color);
}

.hamburger-icon{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:4rem;
    height:100%;
    padding:0.4rem 0;
    font-weight:400;
    font-size:20px;
    border:none;
    background:inherit;
    cursor:pointer;

}
.end-link{
    margin-top:auto;
}
[data-color-theme="dark"] #side-bar .side-bar-link.active-link{
    background-color:#1b2124;
}
[data-color-theme="light"] #side-bar .side-bar-link.active-link{
    background:#0087a8;
    color:white !important;
}


[data-color-theme="light"] #side-bar .side-bar-link.active-link img {
    filter: invert(1); /* This will make light icons appear dark */
}




/*
#side-bar .side-bar-link.active-link::before{
    content:'';
    position:absolute; 
    top:0; 
    left:0; 
    width:3px; 
    height:100%; 
    background-color:var(--metric-status-success);
    transition: all 0.6s ease-in-out;
}
    */

#side-bar .side-bar-link img{
    /*
    width:20px;
    height:20px;
    */
    height:21px !important;
    width:21px !important;
}

.hover-effect{
    cursor: pointer;
}
/* Utility Classes */
.hover-effect:hover{
    opacity: 0.6;
}
.hover-effect[disabled]{
    opacity: 0.3;
    pointer-events: none;
}
.hover-effect-enlarge:hover{

    border:2px solid var(--button-color-action);
    opacity: 0.8;
}
.enlarge-on-hover{
    transition: all 0.2s ease-in-out;
}
.enlarge-on-hover:hover{
    transform:scale(1.02) !important;
}
.green-status-dot{
    background-color:var(--status-color-active);
    width:10px;
    height:10px;
    border-radius:50%;
}
.red-status-dot{
    background-color:var(--status-color-inactive);
    width:10px;
    height:10px;
    border-radius:50%;
}
.pending-text{
    color:var(--status-color-pending);
}
.selected-generic{
    background-color:var(--status-color-active) !important;
}
.fade-overflow {
    position: relative;
}

.fade-overflow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px; /* Adjust height of gradient as needed */
    background: linear-gradient(to bottom, transparent, var(--content-background-secondary));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.fade-overflow[style*="overflow-y: scroll"]::after,
.fade-overflow[style*="overflow: auto"]::after {
    opacity: 1;
}
.little-icon{
    width:auto;
    height:auto;
    max-height:12px;
}
.none{
    display: none;
    visibility: hidden;

    padding:0;
    margin:0;
    height:0;
    width:0;
}
.panel-view{
    text-align: left;
    margin:.6rem 0;
}
.ui-design-header{
    opacity: 0.6;
    padding:var(--gap-01) 0;
}
.flex-col{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.left-align{
    align-items: flex-start;
}
.col-gap{
    gap:0.5rem;
}
.col-gap-sm{
    gap:0.3rem;
}
.flex-row{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap:0.5rem;
}
.row-end{
    justify-content: flex-end;
}
.row-start{
    justify-content: flex-start;
}
.row-between{
    justify-content: space-between;
}
.left{
    margin-right:auto;
}
.right{
    margin-left:auto;
}
.form-section-spacer{
    padding:.3rem 0;
}
.stretch{
    width: 100%;
}
.auto-width{
    width:auto;
    min-width:0;
    max-width:100%;
}
.ghost-opacity{
    opacity:0.6;
}
.subtle-opacity{
    opacity:0.8;
}
.fade-out-and-in{
    opacity:0.5;
    transition: opacity 0.5s ease;
}
a[data-locked="locked"] {
    opacity:0.3;
    position:relative;
}
a[data-locked="locked"]::before {
    content: '';
    background-image: url('../../images/icons/admin_key.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position:absolute;
    top:1rem;
    right:1rem;
    width:100%;
    height:100%;
    display: inline-block;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    margin-right: 4px;
}

a[data-locked="locked"]::before {
    content: '';
    background-image: url('../../images/icons/admin_key.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position:absolute;
    top:1rem;
    right:1rem;
    width:100%;
    height:100%;
    display: inline-block;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    margin-right: 4px;
}

a[data-locked="locked"]:hover::after {
    content: "Not Permitted";
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border-radius: var(--border-radius-01);
    font-size:var(--xs-font-size);
    white-space: nowrap;
    animation: fadeIn 0.1s ease-in-out;
    pointer-events: none;
}

/* Base styles for selection-dependent elements */
[data-selection-rule] {
    transition: opacity 0.2s ease-in-out;
}
[data-selection-rule]:hover{
    opacity: 0.6 !important;
}

/* Initial disabled state for elements requiring selections */
[data-selection-rule]:not([data-initial-enabled="true"]),
[data-locked="locked"] {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}

/* Optional: Add a visual indicator for disabled items */
[data-selection-rule]:not([data-initial-enabled="true"])::before {
}

/* Style for when items become enabled - but only if not locked */
[data-selection-rule].enabled:not([data-locked="locked"]) {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

/* Ensure locked elements stay disabled regardless of other classes/states */
[data-locked="locked"] {
    opacity: 0.3 !important;
    pointer-events: none !important;

}
/* Class For an element that is locked, but should not be displayed at all */

.header-icon{
    max-height:14px;
    max-width:14px;
}

.alerts-button.has-alerts{
    position:relative;
}

.alerts-button.has-alerts::after{
    content:'';
    position:absolute;
    top:-0.2rem;
    right:-0.2rem;
    width:8px;
    height:8px;
    background-color:#e24400;
    border-radius:50%;
}

.bottom-brd{
    border-bottom: 2px solid var(--item-info-arrow-border);
    padding:.4rem 0;
}
.right-brd{
    border-right: 2px solid var(--item-info-arrow-border);
    padding-right:1rem;
}
.section-border{
    border: 2px solid var(--item-info-arrow-border);
    border-radius:var(--border-radius-02);
    padding:1rem;
}
.bold{
    font-weight: var(--font-weight-bold);
}
.light{
    border-color:var(--text-color-ghost);
}
.light-border{
    border: 1px solid var(--text-color-ghost);
}
/* Scrollable table styles */
.scrollable-data[data-scrollable-type="table-header"] {
    /* Always reserve space for scrollbar to prevent layout shift */
    padding-right: 22px; /* Standard scrollbar width across most browsers */
    margin-bottom: 0;
    background: inherit;

}

.scrollable-data[data-scrollable-type="table-rows"] {
    overflow-y: scroll; /* Changed from auto to always show scrollbar */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    min-height: 0;

    /* Standardized scrollbar styling */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.05); /* For Firefox */
    
    
    /* Webkit scrollbar styling */
    &::-webkit-scrollbar {
        width: 17px; /* Standardized width */
        background-color: transparent;
    }
    
    &::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
    }
    
    &::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        border: 4px solid transparent; /* Creates padding effect */
        background-clip: padding-box;
        
        &:hover {
            background: rgba(255, 255, 255, 0.15);
            background-clip: padding-box;
        }
    }
    
}


.base-scrollable-table-height{
    min-height:40rem;
    max-height:40rem;
}

/* Style for the dot menu to indicate it's clickable */
.dot-menu {
    cursor: pointer;
    padding: 0.5rem;
}

.inner-border {
    position: relative;
    border-radius: 4px;
    transform:scale(0.99);
    transition: all 0.2s ease-in-out;
}

.inner-border::after {
    content: '';
    position: absolute;
    inset: 0;
    border-left: 3px solid #018456;
    border-radius: 4px;
    pointer-events: none;
    animation: borderFadeIn 0.2s ease-in-out forwards;
    z-index: 10000;

}

.inner-border::before {
    content: 'selected';
    position: absolute;
    bottom: 0px;  /* Adjusted to sit more naturally in border */
    left: 20px;
    background:#018456;
    padding: 0 6px;  /* Reduced padding */
    font-size: var(--xxs-font-size);  /* Made text smaller */
    color:white;
    text-transform: lowercase;
    border-top-right-radius: 8px;  /* Added rounded corners */
    border-top-left-radius: 8px;
    animation: borderFadeIn 0.4s ease-in-out forwards;
    letter-spacing: 0.02em;  /* Slight letter spacing for readability */
    font-weight: var(--font-weight-medium);  /* Optional: adjust weight */
    z-index: 100000;
}
/*** End of Scrollable ***/



/***** Global Action Element Padding / radius / font size *****/
input, a, button{
    padding:0.4rem 0.8rem;
    border-radius: var(--border-radius-01);
    outline:none;
    border:none;
    background-color:var(--genuine-action-bg);
    border: var(--border-width-thin) solid var(--genuine-action-border);
}
.plain-a{
    border:none;
    outline:none;
    background:inherit;
    color:var(--text-color-primary);
    font-weight:var(--font-weight-medium);
    padding:.2rem;
    border-radius:0;
}

.nav-icon-btn{
    padding:0;
    margin:0;
    background:inherit;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:row;

    

}
.nav-icon-btn img{
    max-height:18px;
    max-width:18px;
}
.center-text {
    text-align: center !important;
}

/** ToolTips **/
.tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    max-width: 300px;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
}

.tooltip.show {
    opacity: 1;
}

/* Optional: Add arrow */
.tooltip:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent;
}
.no-bg{
    background:inherit;
}
/* End of Utility Classes */






/*** Font Size ***/
.header{
    font-size: var(--base-font-size);
    padding:0 0 0.5rem 0;
}
.xxs-fs{
    font-size: var(--xxs-font-size);
}
.small-fs{
    font-size: var(--xs-font-size);
}
.reg-fs{
    font-size: var(--base-font-size);
    font-weight:400;
}
.md-fs{
    font-size: var(--md-font-size);
}


.large-fs{
    font-size: var(--lg-font-size);
}
.xl-fs{
    font-size: var(--xl-font-size);
}

.italic-f{
    font-style: italic;
}
/*** End of Font Size ***/






/* Button Styles */
.plain-btn{
    padding:0.3rem 0.5rem;
    border-radius:var(--border-radius-01);
    background:inherit;
    border:2px solid var(--primary-text-color);
    color:var(--text-color-primary);
    font-weight:var(--font-weight-light);
    
}
/* Display / misc styles */
.button{
    padding:0.4rem 0.8rem;
    border-radius: var(--border-radius-02);
    font-weight: var(--font-weight-bold);
    position:relative;
    display:inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: var(--shadow-01);
    text-wrap: nowrap;
    color: var(--text-color-ghost);
    color:var(--primary);
}
.input{
    padding:0.4rem 0.8rem;
    border-radius: var(--border-radius-01);
    font-weight:400;
    position:relative;
    display:inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: var(--shadow-01);
    text-wrap: nowrap;
    color: var(--text-color-ghost);
    color:var(--primary);    
}
.editing{
    border:1px solid var(--button-color-submit);
}
.highlight-red{
    border:1px solid var(--button-color-delete) !important;
}
.tab-block-button{
    padding:0.8rem 1.4rem 0.8rem 1rem !important;
    box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.1);
}
.tab-block-button img{
    max-height:1.2rem;
    padding-right:0.2rem;
}

[data-color-theme="dark"] .tab-block-button{
    background:linear-gradient(45deg, #086c6f, #058d92) !important;
    border:none !important;
    color:white !important;
}
[data-color-theme="light"] .tab-block-button{
    background:linear-gradient(45deg, #0087a8, #0083a4) !important;
    border:none !important;
    color:white !important;
}

.tab-block-button p{
    color:white !important;
}

.button[data-btn-type="word"]{
    padding:0;
    background:inherit;
    border:none;
    color: var(--text-color-primary);
    box-shadow:none;
    font-weight:300;
    width:auto;
}
.button[data-btn-type="text-input"]{
    background:var(--text-input-bg);
    border:2px solid rgb(255,255,255,0.38) !important;
    font-weight:400;
}
[data-color-theme="dark"] .button[data-btn-type="text-input"]{
    border:2px solid rgb(255,255,255,0.02) !important;
}

.button[data-btn-type="plain-dropdown"]{
    background:inherit;
    border:none;
    color: var(--plain-button-border-color);
    box-shadow:none;
    width:auto;
}
/* Button Colors */
.button[data-btn-type="plain-button"]{
    background:inherit;
    border:none;
    color: var(--text-color-primary);
    box-shadow:none;
}
.button[data-btn-type="plain-button-ghost"]{
    border:none;
    color: var(--plain-button-border-color);
    border-bottom: var(--border-width-thin) solid var(--plain-button-border-color);
    box-shadow:none;
}

.button[data-btn-type="action-01"]{
    background: var(--button-color-action-gradient);
    border: var(--border-width-thin) solid var(--button-color-action);
}
.button[data-btn-type="action-01-ghost"]{
    color: var(--button-color-action-ghost);
    background: var(--button-color-action-ghost-light);
    border: var(--border-width-thin) solid var(--button-color-action-ghost-light);
    box-shadow: 0px 0px 2px var(--button-color-action-ghost-light);
}
.button[data-btn-type="submit"]{
    background: var(--button-color-submit-gradient);
    border: var(--border-width-thin) solid var(--button-color-submit);
    color:white;
}
.button[data-btn-type="submit-ghost"], [data-btn-type="submit-ghost"]{
    color: var(--button-color-submit-ghost);
    background: var(--button-color-submit-ghost-light);
    border: var(--border-width-thin) solid var(--button-color-submit-ghost-light);
    box-shadow: 0px 0px 2px var(--button-color-submit-ghost-light);
    
}
.button[data-btn-type="edit"]{
    background: var(--button-color-edit-gradient);
    border: var(--border-width-thin) solid var(--button-color-edit);
}
.button[data-btn-type="edit-ghost"]{
    color: var(--button-color-edit-ghost);
    background: var(--button-color-edit-ghost-light);
    border: var(--border-width-thin) solid var(--button-color-edit-ghost-light);
    box-shadow: 0px 0px 2px var(--button-color-edit-ghost-light);
    transform:scale(0.86);
}
[data-color-theme="light"] .button[data-btn-type="edit-ghost"]{
    color:black;
    background:var(--button-color-edit-ghost);
    border:var(--border-width-thin) solid var(--button-color-edit-ghost);
    box-shadow:0px 0px 2px var(--button-color-edit-ghost);
}
.button[data-btn-type="delete"]{
    background: var(--button-color-delete);
    border: var(--border-width-thin) solid var(--button-color-delete);
}
.button[data-btn-type="delete-ghost"]{
    color: var(--button-color-delete-ghost);
    background: var(--button-color-delete-ghost-light);
    border: var(--border-width-thin) solid var(--button-color-delete-ghost-light);
    box-shadow: 0px 0px 2px var(--button-color-delete-ghost-light);
}
.button[data-btn-type="cancel"]{
    background: var(--button-color-cancel);
}
.button[data-btn-type="service-status-button"]{
    background: rgb(255,255,255,0.1);
    padding:0.4rem 0.8rem;
    border-radius:var(--border-radius-01);
    border:none !important;
    color:var(--text-color-primary);
    font-weight:400 !important;
    font-size:var(--xs-font-size);
    box-shadow:none;

}
.button[data-btn-type="service-status-button"].active{
    background: #009445;
    color:white;
}
.button[data-locked="locked"]{
    opacity: 0.3;
    position: relative;
}

.button[data-locked="locked"]::before {
    content: '';  /* Remove direct URL usage in content */
    background-image: url('../../admin_key.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 8px;  /* Use fixed width instead of max-width */
    height: 8px; /* Use fixed height instead of max-height */
    vertical-align: middle;
    margin-right: 4px; /* Add spacing between icon and text */
}
.button[data-locked="locked"]:hover::after {
    content: "Not Permitted";
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border-radius: var(--border-radius-01);
    font-size:var(--xs-font-size);
    white-space: nowrap;
    animation: fadeIn 0.1s ease-in-out;
    pointer-events: none;
}

/* Button Icon */
.button img, .dropdown-item img{
    width: 10px;
    height: 10px;
}
.button[data-locked="locked"] img{
    display: none;
}
.icon-button img{
    width: 16px;
    height: 16px;
}
.floating-edit-button{
    padding:.3rem .8rem;
    border-radius:var(--border-radius-01);
    border:none;
    opacity:0.5;
    padding:.2rem 0.4rem;
    background:none;
}
.floating-edit-button:hover{
    opacity:1;
}

.checkbox-button {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-weight:400;
    border:none;
    padding:.6rem .8rem;
}

.checkbox-button .checkbox-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
     border: 2px solid rgb(255,255,255,0.2); 
    border-radius: 3px;
    font-size: 12px;
    color: transparent;
    transition: all 0.2s ease;
}

.checkbox-button.selected {
    background-color: var(--button-color-submit);
    color:white;
}

.checkbox-button.selected .checkbox-icon {
    background-color: white;
    border: 2px solid rgb(255,255,255,0.2);
}
[data-color-theme="light"] .checkbox-button .checkbox-icon{
    border:2px solid rgb(0,0,0,0.2);
}
[data-color-theme="light"] .checkbox-button.selected{
    background-color: #0087a8;
    color:white;
}
/* End of Button Styles */


/** Slide button (on/off, light mode/dark mode) **/
/* Slide button (on/off, light mode/dark mode) */
.slide-button {
    position: relative;
    min-width: 48px;
    width:24px;
    height: 24px;

    
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Remove horizontal padding to allow circle positioning */
    padding: 0 .7rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-color-theme="dark"] .slide-button{
    border: var(--border-width-thin) solid var(--genuine-action-border);
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.02)
    );
}
[data-color-theme="light"] .slide-button{
    border: var(--border-width-thin) solid #d18f00;
    background: linear-gradient(
        to bottom,
        #ffb81e,
        #d47c00
    );
}


/* The sliding circle */
.slide-circle {
    position: absolute;
    /* Adjust left position for even spacing */
    left: 2px;
    width: 16px; /* Slightly reduced width */
    height: 16px; /* Slightly reduced height */
    background: linear-gradient(45deg, 
        rgba(255, 255, 255, 0.84), 
        #fff
    );
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-inner-circle{
    width:12px;
    height:12px;
    border-radius:50%;
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.2), 
        white
    );
}



/* Active state */
.slide-button[data-state="on"] .slide-circle {
    /* Adjust transform to maintain even spacing on right side */
    transform: translateX(24px);
}



/* Labels */
.left-label,
.right-label {
    font-size: 8px;
    color: var(--text-color-primary);
    z-index: 1;
    user-select: none;
}

.slide-button[data-slide-type="active-inactive"]{
    width:100px;
}
.slide-button[data-slide-type="active-inactive"][data-state="off"]{
    border-color:#00954c;
    background-color:#00954c;
}
.slide-button[data-slide-type="active-inactive"][data-state="on"]{
    border-color:#a22d01;
    background-color:#a22d01;
}
.slide-button[data-slide-type="active-inactive"] .slide-circle{
    width:48px;
}
.slide-button[data-slide-type="active-inactive"][data-state="on"] .slide-circle{
    transform: translateX(44px);
}
.slide-button[data-slide-type="active-inactive"][data-state="off"] .slide-circle{
    transform: translateX(0px);
}

/* Hover effects */
.slide-button:hover {
    opacity: 0.9;
}
/** End of Slide button **/


/* Custom Dropdown */
.custom-dropdown {
    position: relative;
    display: inline-block;
}
.custom-dropdown[data-locked="locked"] {
    opacity: 0.2;
    position: relative;
    cursor: not-allowed;  /* Better semantic cursor for locked state */
    pointer-events: none;
    background: var(--button-color-cancel);
}

.custom-dropdown[data-locked="locked"]::before {
    content: '';
    background-image: url('../../lock.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 8px;
    height: 8px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.custom-dropdown[data-locked="locked"]:hover::after {
    content: "Not Permitted";
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border-radius: var(--border-radius-01);
    font-size: var(--xs-font-size);
    white-space: nowrap;
    animation: fadeIn 0.1s ease-in-out;
    pointer-events: none;
}

/* Remove the old dropdown arrow style for locked state */
.custom-dropdown[data-locked="locked"] .dropdown-arrow {
    display: none;
}

.csv-columns-dropdown .dropdown-trigger{
    color:white !important;
}


.csv-columns-dropdown .dropdown-trigger .selected-value,
.csv-columns-dropdown .dropdown-trigger .dropdown-arrow,
.csv-columns-dropdown .dropdown-content .column-selector-item p{
    color:white !important;
}



.csv-columns-dropdown .dropdown-trigger{
    border-color:#086c6f !important;
    background:linear-gradient(45deg, #064f52, #046b6e) !important;
    border-radius:8px;
    border-bottom:none !important;
    color:white !important;
}

[data-color-theme="light"] .csv-columns-dropdown .dropdown-trigger{
    border-color:#0087a8 !important;
    background:linear-gradient(45deg, #0087a8, #0083a4) !important;
}

.csv-columns-dropdown .dropdown-content{
    background: #046b6e !important;
    color:white !important;
}

[data-color-theme="light"] .csv-columns-dropdown .dropdown-content{
    background: #0087a8 !important;
    color:white !important;
}


.export-csv-button{
    background-color:#046b6e !important; 
    border-color:#046b6e !important; 
    font-weight:300;
    padding:0.25rem 0.8rem;
    color:white !important;
}

[data-color-theme="light"] .export-csv-button{
    background-color:#0087a8 !important; 
    border-color:#0087a8 !important; 
}

.export-csv-visible-column{
    color:#ffb300 !important;

}

[data-color-theme="light"] .export-csv-visible-column{
    color:#0087a8 !important;
}



.dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 200px;
    padding-right: 1rem;
}
.dropdown-arrow {
    font-size: 0.8em;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}
.dropdown-trigger.active .dropdown-arrow {
    transform: rotate(180deg);
}
.dropdown-content {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 100%;
    border-radius: var(--border-radius-01);
    background: var(--genuine-action-bg);
    border: var(--border-width-thin) solid var(--genuine-action-border);
    box-shadow: var(--shadow-01);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 10000;
    border:none;
    overflow:hidden;
}
.dropdown-content.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.selected-value{
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8rem;
}
.dropdown-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8rem;
}
.dropdown-item:hover {
    opacity: 0.6;
}
.dropdown-item[data-locked="locked"]{
    opacity: 0.2;
    position: relative;
    cursor:auto;
    pointer-events: none;
}
.dropdown-item[data-locked="locked"]::after {
    content: 'locked';
    margin-left: auto; /* Pushes content to the end */
    font-size: var(--xs-font-size);
    color: var(--text-color-secondary);
}

[data-color-theme="light"] .dropdown-item[data-locked="locked"]::after,
[data-color-theme="light"] .dropdown-item[disabled]{
    opacity: 0.2 !important;
}

.dropdown-item.column-selector-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.dropdown-item.column-selector-item label{
    margin-left:auto;
}

.dropdown-item.column-selector-item .custom-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.dropdown-item.column-selector-item .custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.dropdown-item.column-selector-item .checkmark {
    position: relative;
    height: 16px;          /* Reduced from 16px */
    width: 16px;           /* Reduced from 16px */
    background-color: #046b6e;
    border: 2px solid white;
    border-radius: var(--border-radius-01);
    transition: all 0.2s ease-in-out;
}

[data-color-theme="light"] .dropdown-item.column-selector-item .checkmark{
    background-color:#0087a8;
}


.column-selector-item.selected-column{
    background-color: #00954c;
}
[data-color-theme="light"] .column-selector-item.selected-column{
    background-color:#00a6d0;
}
[data-color-theme="light"] .column-selector-item.selected-column .checkmark{
    background-color:white;
}
.column-selector-item.selected-column .checkmark{
    background-color: white;
}

/* End of Custom Dropdown */


/** Publishing Date Input **/
.date-range-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    position: relative;
    outline:none;
    border:none;
}

.date-input {
    position: relative;
    outline:none;
    border:none;
    font-size:8px;
}

.date-picker {
    border: none;
    outline:none;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: border-color 0.2s ease;
    width: 130px;
    font-size:12px;
}

.date-picker:hover {
    border-bottom-color: var(--primary-color);
}

.date-picker:focus {
    outline: none;
    border-bottom-color: var(--primary-color);
}

.date-label {
    position: absolute;
    left: 0.5rem;
    top: -1rem;
    font-size: 0.5rem;
    color: var(--text-secondary);
    border:none;
    outline:none;
}

.refresh-icon {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    padding: 4px;
    transition: color 0.2s ease;
}

.refresh-icon:hover {
    color: var(--primary-color);
}

/*** Floating Input for forms ***/
.floating-input {
    position: relative;
    width: 100%;
    transition: all 0.2s ease;
}

.floating-input-error-message{
    position: absolute;
    top:0.3rem;
    right: 0.8rem;
    font-size: 0.50rem;
    font-weight: 300;
    color: var(--button-color-delete);
}

.floating-input input {
    width: 100%;
    height: 2.6rem;
    padding: 1.8rem 0.8rem 1rem;
    border-radius: 4px;
    border:1px solid rgb(0,0,0,0.0);
    transition: border-color 0.2s ease;

}

.floating-input input[type="date"]:placeholder-shown {
    opacity: 0.6;
}

.floating-input input[type="date"]:not(:placeholder-shown) {
    opacity: 1;
}

#edit-discount-modal .floating-input input{
    padding:0.5rem 0.8rem;
}

.floating-input:has(input[required])::before,
.floating-input:has(textarea[required])::after,
.floating-input-selector[required]::after {
    content: '* Required';
    color: var(--button-color-delete-ghost);
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 8px;
    pointer-events: none;
    opacity: 0.5;
}

[data-color-theme="light"] .floating-input:has(input[required])::before,
[data-color-theme="light"] .floating-input:has(textarea[required])::after,
[data-color-theme="light"] .floating-input-selector[required]::after {
    opacity:1 !important;
}



.floating-input label {
    position: absolute;
    left: 0.8rem;
    top: 0.2rem;
    font-size: 0.75rem;
    color: #666;
    pointer-events: none;
}


.floating-input .select-wrapper{
    position:absolute;
    right:1.2rem;
    top:1rem;
    font-size: 0.75rem;
    color: #666;
    width:auto;
}

.floating-input input:focus {
    outline: none;
    border: 1px solid #007bff;
}

/* Ensure the placeholder is invisible but maintains space */
.floating-input input::placeholder {
    color: transparent;
}

/* Hide label if input is empty and not focused */
.floating-input input:placeholder-shown + label {
    top: 1rem;
    color: #999;
    transition: all 0.2s ease;
}
#edit-discount-modal .floating-input input:placeholder-shown + label {
    top: 0.82rem;
    transition: all 0.2s ease;
}

/* Show label in small size above when input is focused or has content */
.floating-input input:focus + label,
.floating-input input:not(:placeholder-shown) + label {
    top: 0.2rem;
    font-size: 0.65rem;
    color: #666;
}

#edit-discount-modal .floating-input input:focus + label,
#edit-discount-modal .floating-input input:not(:placeholder-shown) + label {
    top: 0.11rem;
    font-size: 0.5rem;
    color: #666;
    transition: all 0.2s ease;
    opacity: 0;
}

/* Fixed-size text area variation */
.floating-input.fixed-text-area {
    position: relative;
    width: 100%;
    min-width: 100%;
    min-height: 10vh;
    transition: all 0.2s ease;
}
.floating-input.fixed-text-area.long-desc {
    min-height: 20vh;
}

.floating-input.fixed-text-area textarea {
    width: 100%;
    height: 10vh;
    padding: 2rem 0.8rem 0.5rem 0.8rem;
    border-radius: 4px;
    border: 1px solid rgb(0,0,0,0.0);
    transition: border-color 0.2s ease;
    resize: none;
    white-space: pre-wrap;
    text-wrap: pretty;
    line-height: 1.4;
    background-color: var(--genuine-action-bg);
    color: var(--text-color);
}

.floating-input.fixed-text-area textarea.long-desc {
    height: 20vh;
}

.floating-input.fixed-text-area label {
    position: absolute;
    left: 0.8rem;
    top: 0.2rem;
    font-size: 0.75rem;
    color: #666;
    pointer-events: none;
}

.floating-input.fixed-text-area textarea:focus {
    outline: none;
    border: 1px solid #007bff;
}

/* Ensure the placeholder is invisible but maintains space */
.floating-input.fixed-text-area textarea::placeholder {
    color: transparent;
}

/* Hide label if textarea is empty and not focused */
.floating-input.fixed-text-area textarea:placeholder-shown + label {
    top: 1rem;
    color: #999;
    transition: all 0.2s ease;
}

/* Show label in small size above when textarea is focused or has content */
.floating-input.fixed-text-area textarea:focus + label,
.floating-input.fixed-text-area textarea:not(:placeholder-shown) + label {
    top: 0.2rem;
    font-size: 0.65rem;
    color: #666;
}

.floating-input.fixed-text-area.character-tool-added{
    position: relative;
    overflow: hidden;
}

.character-tool-added .character-tool-bar{
    position: absolute;
    bottom: .5rem;
    left: .2rem;
    width: 80%;
    height: 2rem;
    background-color: var(--genuine-action-bg);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    padding:0.5rem;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

}


.character-tool-bar a{
    max-height:100%;
    padding:0.5rem;
    border-radius: 4px;
    background-color: var(--genuine-action-bg);
    border: 1px solid var(--text-color-secondary);
    font-size: 1rem;
}


.floating-input.fixed-text-area.character-tool-added textarea {
    padding-bottom: 3rem; /* Ensures space for the toolbar */
}


.grid-two-col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.floating-input-selector {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    width: 100%;
    height: 2.6rem;
    padding: 1.8rem 0.8rem 1rem;
    border-radius: 4px;
    border:1px solid rgb(0,0,0,0.0);
    transition: border-color 0.2s ease;
    background-color:var(--genuine-action-bg);
    position:relative;
    cursor:pointer;
}
.notification-row{
    background-color:rgb(108,251,203,0.5);
    padding:0.4rem 0.8rem;
    border-radius:4px;
    width:100%;
}

.floating-input-selector:not(.open):hover {
    opacity: 0.8;
}

.floating-input-selector  label{
    position: absolute;
    left: 0.8rem;
    top: 1rem;
    font-size: 0.75rem;
    color: #999;
    pointer-events: none;
}

.floating-input-selector .select-wrapper{
    position:absolute;
    right:2.2rem;
    top:1rem;
    font-size: 0.75rem;
    color: #666;
    width:auto;
}

.floating-input-selector .floating-input-dropdown-arrow{
    position:absolute;
    right:1.2rem;
    top:1rem;
    font-size: 0.85rem;
    color: #999;
    transform: rotate(90deg);
    cursor:pointer;
}


.floating-input-dropdown-menu {
    background: var(--genuine-action-bg); /* Match parent input background */
    border-radius: 4px;
    z-index: 10000;
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    position: absolute;
    width: 100%;
    top: 100%; /* Position directly below the input */
    left: 0;
    margin-top: 4px; /* Small gap between input and dropdown */
}

.floating-input-options-container {
    max-height: 200px;
    overflow-y: auto;
}

.floating-input-dropdown-option {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-color, #fff);
    transition: background-color 0.15s ease;
}

.floating-input-dropdown-option:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Clean scrollbar styling */
.floating-input-options-container::-webkit-scrollbar {
    width: 4px;
}

.floating-input-options-container::-webkit-scrollbar-track {
    background: transparent;
}

.floating-input-options-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}
/**** End of Floating Input for forms ***/






/* Number input */
.number-input-no-arrows {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
}

/* Chrome, Safari, Edge, Opera */
.number-input-no-arrows::-webkit-outer-spin-button,
.number-input-no-arrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.number-input-no-arrows[type='number'] {
    -moz-appearance: textfield;
}
/* Text Inpputs */
input[type="text"][data-input-type="search"] {
    background-image: var(--icon-search-src);
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 10px;
    padding-left: 32px;
    padding-right: 0px;
    outline: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: var(--border-width-thin) solid var(--genuine-action-border);  /* Keep consistent border */
    position: relative;
    color: var(--text-color-secondary);
}

/* Add these to handle all focus states */
input[type="text"][data-input-type="search"]:focus,
input[type="text"][data-input-type="search"]:active,
input[type="text"][data-input-type="search"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: var(--border-width-thin) solid var(--genuine-action-border);  /* Keep consistent border */
    -webkit-appearance: none;
}
input.round-left{
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}
.wide-input {
    flex: 1;  /* Makes the input grow to fill available space */
    min-width: 200px;  /* Prevents input from becoming too narrow */
    max-width: 100%;  /* Ensures it doesn't grow beyond container */
}
/* End of Text Inputs */







/** Search input / results Styles **/
/* Updated search results styling */
.search-results {
    position: absolute;
    background: var(--genuine-action-bg);
    border: var(--border-width-thin) solid var(--genuine-action-border);
    border-radius: var(--border-radius-01);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 2px; /* Small gap between input and results */
    box-shadow: var(--shadow-01);
    z-index: 1000; /* Match z-index with search results */
}

.search-result-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:var(--genuine-action-bg);
}

.search-result-item:hover,
.search-result-item.selected {
    background: rgba(255, 255, 255, 0.1);
}

.item-type {
    color: var(--text-color-secondary);
    font-size: var(--xs-font-size);
}

/* Ensure the input's parent has relative positioning */
.input-container {
    position: relative;
    width: fit-content; /* or specify a width */
    padding:0;
    margin:0;
    z-index: 1000; /* Match z-index with search results */
}
/* Add/modify these styles */
.input-container.stretch {
    flex: 1;
    min-width: 0; /* Allows proper shrinking */
}

.input-container.stretch input {
    width: 100%;
    min-width: 0; /* Allows proper shrinking */
}
/** End of Search input / results Styles **/

/** Sorting Arrows **/
/* Sorting Arrows Styles */
.sort-arrows {
    position: relative;
    padding-right: 16px;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
}

.sort-arrows::before,
.sort-arrows::after {
    content: '';
    position: absolute;
    right: 4px;
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

/* Up arrow - points upward */
.sort-arrows::before {
    top: 35%; /* Adjusted from 30% to bring closer */
    transform: translateY(-48%);
    border-bottom: 3.5px solid var(--text-color-primary);
}

/* Down arrow - points downward */
.sort-arrows::after {
    bottom: 35%; /* Adjusted from 30% to bring closer */
    transform: translateY(48%);
    border-top: 3.5px solid var(--text-color-primary);
}

/* Active states */
.sort-arrows.sort-asc::before {
    opacity: 1;
    transform: scale(1.1) translateY(-48%);
}

.sort-arrows.sort-desc::after {
    opacity: 1;
    transform: scale(1.1) translateY(48%);
}

/* Hover state */
.sort-arrows:hover,
.sort-arrows:hover::before,
.sort-arrows:hover::after {
    opacity: 0.7;
}

/* Optional: Disabled state */
.sort-arrows.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Add this to your CSS file */
.sort-arrows.sort-asc::before {
    color: #ffeb3b !important; /* Yellow highlight for ASC */
}

[data-color-theme="light"] .sort-arrows.sort-asc::before{
    color: #005c73 !important; /* Yellow highlight for ASC */
}

.sort-arrows.sort-desc::after {
    color: #ffeb3b !important; /* Yellow highlight for DESC */
}

[data-color-theme="light"] .sort-arrows.sort-desc::after{
    color: #005c73 !important; /* Yellow highlight for DESC */
}

.sort-arrows.sort-asc,
.sort-arrows.sort-desc {
    color: #ffeb3b !important; /* Always highlight the text when sorting */
}

[data-color-theme="light"] .sort-arrows.sort-asc,
[data-color-theme="light"] .sort-arrows.sort-desc {
    color: #005c73 !important; /* Always highlight the text when sorting */
}

/** End of Sorting arrow **/

/* Table Styles */

.actions-container {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

.left-section {
    flex: 1;
    min-width: 200px; /* Minimum width before wrapping */
}

.right-section {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    justify-content: flex-end;
    flex-wrap: wrap;
}



/* Auto Refresh Styles */
.auto-refresh-button{
    cursor: auto;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap:0.5rem;
}
.auto-refresh-button::before {
    content: '\21BB';
}
/* End of Auto Refresh Styles */





/* End of Table Styles */

/* Layout Styles */
.breadcrumb-container{
    grid-column:1/-1;
    padding:var(--gap-space);
    min-height:var(--breadcrumb-height);
    position:relative;
    /*
    background:linear-gradient(to right, rgb(247, 250, 249, 0.03), rgb(247, 250, 249, 0.01));*/
    background:var(--breadcrumb-bg);
}
.breadcrumbs-text{
    font-weight:400;
}

#page-content{
    width:calc(100% - var(--sidebar-width));
    min-height:calc(100% - var(--top-nav-height));
    max-height:calc(100% - var(--top-nav-height));
    background:var(--background) !important;
    border-top-left-radius:var(--radius);
    position:fixed;
    bottom:0;
    right:0;
    transition: width 0.2s ease-in-out, 
                background 0.2s ease-in-out,
                border-radius 0.2s ease-in-out;
    box-shadow:var(--box-shadow-primary);
    overflow:auto;
    /*border-top:2px solid rgb(255,255,255,0.05);
    border-left:2px solid rgb(255,255,255,0.05);*/
    animation:contentLoadFade 0.8s ease-out;
    padding:var(--gap-space);
    display:flex;
    flex-direction:column;
    gap:var(--gap-space);
    display:grid;
    grid-auto-rows: min-content;  /* Add this line */

}
[data-color-theme="light"] #page-content{
    background:rgb(0,0,0,0.3);
}

#content{
    position:relative;
    width:100%;
    height:100%;
}

.content{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(24rem, 1fr));
    grid-auto-rows: min-content;  /* Add this line */
    grid-gap:var(--gap-space);
}
.content-block-panel{
    /*background:var(--content-background-secondary);*/
    background:var(--content-background-secondary);
    border-radius:calc(var(--radius) - 6px);
    padding:var(--padding);
    box-shadow:var(--box-shadow-secondary);
    animation-delay:0.2s;
    animation:contentLoadFade 1.4s ease-out;
}
.content-block-panel[data-locked="locked"]{
    opacity:0.4;

    pointer-events: none;
    position:relative;
}
.content-block-panel[data-locked="locked"]::after {
    content: 'Locked';  /* Changed to show "Locked" text */
    background-image: url('../../lock.png');
    background-size: 8px;  /* Fixed size for icon */
    background-repeat: no-repeat;
    background-position: left center;  /* Position icon to the left */
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: .8rem;
    right: .8rem;
    padding-left: 12px;  /* Space for the icon */
    font-size: var(--xxs-font-size);
    color: var(--text-color-secondary);
    opacity: 0.6;
}

.content-block-panel.inner{
    padding:var(--padding) 0 var(--padding) 0;
}

.content-block-panel.full-width{
    grid-column: 1 / -1;
}

.content-block-panel.third-width{
    grid-column: 1 / 3;
}
.content-block-panel.quarter-width{
    grid-column: 1 / 4;
}
.content-block-panel.half-width{
    grid-column: 1 / 2;
}
.content-block-panel.two-thirds-width{
    grid-column: 1 / 3;
}
.content-block-panel.one-sixth-width{
    grid-column: 1 / 2;
}
.content-block-panel.one-third-width{
    grid-column: 1 / 2;
}


.content-header {
    position: relative;
    min-height: 100%;
    padding-left: 0.6rem; /* Increased padding to give more space from line */
    display: flex;        /* Add flex to help with vertical alignment */
    align-items: center;  /* Center content vertically */
}

.content-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;           /* Position at vertical center */
    transform: translateY(-50%); /* Center the line perfectly */
    height: 70%;        /* Reduce height to 70% of container */
    width: 6px;
    background:var(--metric-status-success);
    border-radius: 1px;
}

@media (max-width: 900px) {
    #page-content{
        width:100%;
        border-radius:0;
        border-left:none;

    }
    #side-bar{
        left:-4rem;
    }
}


@media (max-width: 768px) {
    #page-content{
        min-height:calc(100% - var(--top-nav-height) - 2.6rem);
        height:calc(100% - var(--top-nav-height) - 2.6rem);
        grid-template-columns:1fr;
    }

    .content-block-panel{
        grid-column: 1 / -1;
    }
    .content-block-panel.full-width{
        grid-column: 1 / -1;
    }
    .content-block-panel.third-width{
        grid-column: 1 / -1;
    }

    #top-navigation-bar{
        padding:0 1rem 0 2rem;
    }


    #mobile-navigation-list {
        display: flex !important; /* Use !important to override any other display rules */
        visibility: visible !important; /* Ensure visibility is also set */
        opacity: 1 !important; /* Ensure opacity is set to visible */
    }
    #hamburger-icon{
        display:none;
    }

}



@media (max-width: 532px) {
    #page-content{

        padding:.2rem;
        gap:0.3rem;
    }

    .content-block-panel{
        border-radius:0;
    }
}


.content-block{
    width: 100%;
    padding:1rem;
    border:var(--border-width-thin) solid var(--genuine-action-border);
    border-radius: var(--border-radius-03);
    background-color:inherit;
}
/* Table Layout Styles */
.content-table {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.content-table .table-cell{
    flex-grow:1;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}
.content-table .table-cell.left{
    justify-content:flex-start;
}
.content-table .table-cell.right{
    justify-content:flex-end;
}
.table-cell {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index:0;
}
.table-cell .table-cell-icon{
    padding-right:0.3rem;
    max-height:14px;
    max-width:14px;
}
.every-other-table-row:nth-child(odd){
    background:#191d21;
}
.table-row{
    /*background:linear-gradient(45deg, rgba(18,103,158,0.06), rgba(255,255,255,0.02));*/
    /*background:rgb(255,255,255,0.02);*/
    /*border-bottom:1px solid rgba(255,255,255,0.02);*/
    cursor:pointer;
    transition:all 0.1s ease-in-out;
    background:var(--table-row-bg);
    
}
.table-row:nth-child(odd){
    background:var(--table-row-bg-odd);
}
.table-row.highlight{
    position:relative;
    background:rgb(255,255,255,0.02);
}

.table-row:hover{
    opacity:0.9;
}
.table-row.selected, .currently-editing{
    background:var(--selected-row-bg);
}


.table-row .table-cell:not(:last-child){
    border-right:1px solid rgba(255,255,255,0.1);
}
.table-row .table-cell:first-child{
    border-right:none;
}
.table-row .table-cell.noBorder{
    border-right:none;
}
/* Define specific widths for different cell sizes */
.lg-cell {
    width: 30%;
}

.md-cell {
    width: 15%;
}

.sm-cell {
    width: 15%;
}
.xs-cell {
    width: 5%;
}
.table-header-row, .table-row{
    padding:1rem;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:.4rem;
    border-radius: var(--border-radius-02);
    
}
.table-row{
    padding:0.1rem 1rem;
    animation:genuineFadeIn 0.5s ease-in-out;
}

.table-header-row{
    margin-top:0.5rem;
    border-top:1px solid var(--genuine-action-border);
    border-bottom:1px solid var(--genuine-action-border);
    background:#101315;
    z-index:4;
    z-index:0;
}
.table-footer{
    background:inherit;
    padding:0.2rem 0.1rem;
}
.auto-refresh-button{
    color:var(--text-color-secondary);
}
/* End of Layout Styles */


/** Basic Grid Styles **/

/** 2 Column grid system (for desktop, changes to one column when screen is smaller) **/
.grid-2-col{
    display: grid;
    gap: 1rem;
}
.grid-3-col{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.grid-2-col-header-value{
    display: grid;
    grid-template-columns:20% 80%;
    gap: 1rem;
}
.grid-system {
    display: grid;
    /*grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));*/
    gap: 1rem;
    width: 100%;
    align-items: start;
}

/* If you're using the custom checkbox class from your CSS */
.grid-system .custom-checkbox {
    display: grid;
    grid-template-columns: auto 1fr; /* First column for checkbox, second for label */
    align-items: center;
    gap: 0.5rem;
}

/** End of Basic Grid Styles **/
.assets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    padding-bottom:0.8rem;
}

.group-actions {
    display: flex;
    gap: 0.5rem;
}

/* Responsive behavior */
@media (max-width: 532px) {
    .assets-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .group-actions {
        justify-content: flex-end;

    }

}

/* Filter options container */
.filter-options-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    transform-origin: top;
    transform: translateY(-10px);
    margin-top: 0;
    margin-bottom: 0;
    background-color: var(--primary); /* Add solid background color */
    border-radius: var(--border-radius-02); /* Optional: adds rounded corners */
    position: relative; /* Ensures proper stacking context */
    z-index: 1; /* Ensures proper layering */
    /*background-color:#15191c;*/
}
.filter-options-container input[data-locked="locked"]{
    pointer-events: none;
    cursor: auto;
    opacity:0.25;
    position:relative;
}
.filter-options-container input[data-locked="locked"]::after{
    content: 'locked';  /* Remove direct URL usage in content */
    display: inline-block;
    width: 8px;  /* Use fixed width instead of max-width */
    height: 8px; /* Use fixed height instead of max-height */
    vertical-align: middle;
    margin-right: 4px; /* Add spacing between icon and text */
}
.filter-options-container.active {
    max-height: 100px; /* Adjust based on your content height */
    opacity: 1;
    transform: translateY(0);
    padding: 0.5rem;
    margin: 0.5rem 0;
    overflow: visible;
    border-left:1px solid var(--genuine-action-border);
    border-right:1px solid var(--genuine-action-border);
}
.filter-query{
    font-size:9px;
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    gap:0.5rem;
    padding:0.2rem 1rem;
    border-radius:12px;
    border-bottom:2px solid var(--genuine-action-border);
    cursor:pointer;
    background-color:var(--button-color-submit);
    color:white !important;
}
.filter-query:hover{
    opacity:0.75;
}
/* End of filer options container styles */


/** Form Content Styles **/
form, .form-layout{
    display: flex;
    flex-direction: column;
    align-items:left;
    justify-content:flex-start;
    gap: var(--form-gap);
    padding:calc(var(--gap-01) * 6);
    border:var(--border-width-thin) solid var(--genuine-action-border);
    border-radius: var(--border-radius-03);
}
.form-layout.modal{
    min-width:400px;
}
form a, form button, .form-layout a, .form-layout button {
    display: inline-flex; /* Changed from 'block' to 'inline-flex' */
    width: fit-content; /* Add this to make elements only as wide as their content */
    align-self: flex-start; /* Add this to align buttons to the left */
}
form .header, .form-layout .header{
    font-size: var(--lg-font-size);
}
.form-note{
    opacity: 0.6;
}
.form-description{
    opacity:0.8;
}
.form-panel-col{
    display: flex;
    flex-direction: column;
    align-items:left;
    justify-content:flex-start;
    gap: var(--gap-01);
}
.form-end{
    padding-top: var(--gap-01);
}

.info-row {
    border-bottom: 1px solid var(--item-info-arrow-border);
    overflow: hidden;
    width:100%;
    transition: all 0.2s ease;
}
.info-row:hover{
    background-color:var(--item-info-arrow-hover-bg);
}

/* Clickable header row */
.info-row .flex-row {
    padding: 0.8rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    -webkit-user-select: none;  /* Safari */
    -ms-user-select: none;      /* IE 10+ and Edge */
    user-select: none;   
}

.info-row .flex-row:hover {
    background: var(--button-hover-submit-ghost);
}

/* Arrow indicator */
.info-arrow {
    transition: transform 0.3s ease;
}

/* Description container - hidden by default */
.item-info-description {
    max-height: 0;
    overflow: hidden;
    transition: 
        max-height 0.2s cubic-bezier(0, 1, 0, 1),
        opacity 0.1s ease,
        visibility 0s linear 0.2s;
    padding: 0 1rem;
}

/* Description text */
.form-description {
    padding: .2rem 0 .7rem .7rem;
    color: var(--text-color-secondary);
    transition: all 0.2s ease;
}

/* Active states - add these classes via JavaScript */
.info-row.active .info-arrow {
    transform: rotate(90deg);
    transition: all 0.2s ease;
}
.info-row.active:hover{
    background-color:inherit;
    transition: all 0.2s ease;
    opacity:.75;
}

.info-row.active .item-info-description {
    max-height: 500px; /* Adjust based on content needs */
    transition:
        max-height 0.3s cubic-bezier(0.4, 0, 1, 1),
        opacity 0.2s ease 0.1s, /* Slight delay for fade in */
        visibility 0s linear;
}

/** End of Form Content Styles **/


/** modal styles **/
.modal{
    background-color:var(--secondary);
    border-radius:var(--border-radius-03);
    border:1px solid var(--genuine-action-border);
    box-shadow:var(--shadow-01);
}
.modal {
    max-height: 90vh; /* Maximum height of 90% of viewport height */
    display: flex;
    flex-direction: column;
}

.modal-scrollable-content {
    overflow-y: auto; /* Enable vertical scrolling */
    max-height: calc(90vh - 4rem - 50px); /* Subtract padding and footer height */
    margin-bottom: 1rem; /* Space between content and footer */
}

.modal-footer {
    margin-top: auto; /* Push footer to bottom */
    position: sticky; /* Keep footer visible */
    bottom: 0;
    background: inherit; /* Match modal background */
    padding-top: 1rem; /* Space above footer */
}

.confirm-warning-text{
    color:#ff7a4a !important;
    background-color:rgb(255, 68, 0, 0.05) !important;
    padding:0.5rem 0.5rem;
    border-radius:4px;
    font-size:var(--sm-font-size) !important;
    width:100%;
}
[data-color-theme="light"] .confirm-warning-text{
    background-color:rgb(255, 68, 0, 0.05) !important;
}
/** End of modal styles **/


/** custom Slider Styles **/
.custom-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: var(--genuine-action-border); /* This styles the unfilled portion */
    border-radius: var(--border-radius-01);
    height: 4px; /* Match the track height */
    padding:0;
    margin:0;
}

/* Remove the default track styling */
.custom-slider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
}

.custom-slider::-moz-range-track {
    background: transparent;
}
.custom-slider-container{
    position: relative;
}
.slider-progress {
    position: absolute;
    height: 4px; /* Adjust based on your slider height */
    background-color: var(--button-color-submit-ghost); /* Or any color you prefer */
    pointer-events: none; /* Ensures the progress bar doesn't interfere with slider interaction */
    top: 80%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 2px;
}
input[type="range"] {

    z-index: 1;
}
/** End of custom Slider Styles **/

/** Checkbox Styles **/
.custom-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: relative;
    height: 14px;          /* Reduced from 16px */
    width: 14px;           /* Reduced from 16px */
    background-color: var(--genuine-action-bg);
    border: 2px solid var(--genuine-action-border-light);
    border-radius: var(--border-radius-01);
    transition: all 0.2s ease-in-out;
}

.selection-count{
    font-size:var(--xxs-font-size);
    opacity:0.8;
    padding:0.2rem 0.5rem;
    border-radius:4px;
    position:absolute;
    top:-8px;
    right:0px;
}
    



/* Hover effect */
.custom-checkbox:hover input ~ .checkmark {
    border-color: var(--button-color-submit-ghost);
}

/* Checked state */
.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--button-color-submit);
    border-color: var(--button-color-submit);
}

/* Checkmark icon */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 2px;            /* Adjusted for perfect centering */
    top: 0px;             /* Adjusted for perfect centering */
    width: 4px;           /* Slightly smaller */
    height: 6px;          /* Slightly smaller */
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* Show checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Optional: Disabled state */
.custom-checkbox input:disabled ~ .checkmark {
    opacity: 0.5;
    cursor: not-allowed;
}

/** End of Checkbox Styles **/

/** Status Element Styles **/
.table-status-element{
    padding:0.2rem 0.5rem;
    border-radius:4px;
    font-weight:800;
}
.table-status-element[data-status-element-type="plain"]{
    background-color:var(--plain-button-ghost);
    color:var(--plain-button-border-color);
}
.table-status-element[data-status-element-type="active"],
.table-status-element[data-status-element-type="inactive"]{
    transform:scale(0.85);
}
[data-color-theme="dark"] .table-status-element[data-status-element-type="active"]{
    background-color: var(--status-color-active-light);
    color: var(--status-color-active);
}
[data-color-theme="dark"] .table-status-element[data-status-element-type="inactive"]{
    background-color: var(--status-color-inactive-light);
    color: var(--status-color-inactive);
}
[data-color-theme="light"] .table-status-element[data-status-element-type="active"]{
    background-color:var(--status-color-active);
    color:white;
}
[data-color-theme="light"] .table-status-element[data-status-element-type="inactive"]{
    background-color:#c20000;
    color:white;
}
.table-status-element[data-status-element-type="pending"]{
    background-color: var(--status-color-pending-light);
    color: var(--status-color-pending);
}
.table-status-element[data-status-element-type="price"]{
    font-weight:400 !important;
    color: var(--metric-price-color) !important;
    background-color: var(--metric-price-color-bg) !important;
}
.table-status-element[data-status-element-type="products-sold"]{
    background-color: #00C795;
    color: #000;
    padding:0.1rem 0.4rem;
    border-radius:6px;
    font-weight:700;
    font-size:var(--md-font-size);
    transform:scale(0.75);
}

.table-status-element[data-status-element-type="discount"]{
    background-color: #ffaa50;
    color: #000;
    padding:0.2rem 0.4rem;
    border-radius:6px;
    font-weight:700;
    font-size:var(--md-font-size);
    transform:scale(0.7);
    position: relative;
}

.table-status-element[data-status-element-type="discount"]::after{
    content: '';
    position: absolute;
    bottom: -3px;
    left: 4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #ffaa50;
}

.table-status-element[data-status-element-type="has_discounts"]{
    background-color: #ffaa50;
    color: #000;
    padding:0.2rem 0.4rem;
    border-radius:6px;
    font-weight:700;
    transform:scale(0.5);
    font-size:var(--md-font-size);
    transition:all 0.2s ease;
}
.table-status-element[data-status-element-type="has_discounts"]::after{
    content: '';
    position: absolute;
    bottom: -3px;
    left: 4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #ffaa50;
}

.table-status-element[data-status-element-type="has_discounts"]:hover{
    transform:scale(0.7);
}

.table-status-element[data-status-element-type="discount_value"]{
    background-color: #009771;
    color: #ffffff;
    padding:0.2rem 0.4rem;
    border-radius:6px;
    font-weight:100;
    transform:scale(0.8);
    font-size:var(--md-font-size);
    transition:all 0.2s ease;
}
.table-status-element[data-status-element-type="discount_value"]::after{
    content: '';
    position: absolute;
    bottom: -3px;
    left: 4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #009771;
}

/** Discount container Pretty **/
.discount_code_container{
    background:linear-gradient(45deg, #006c97, #009797,  #008591);
    padding:0.8rem;
    margin:0.5rem 0;
    border-radius:0.4rem;
}

/*
.discount_code_container:nth-child(even){
    background:linear-gradient(45deg, #67006a, #7201b4, #b00ceb);
}
    */

.discount_code_container:nth-child(even){
    background:linear-gradient(45deg, #006297, #007197,  #006691);
}

.table-status-element[data-status-element-type="mach_pos"]{
    background-color:#b24b22;
    color:white;
    padding:0.4 1.2rem;
    border-radius:6px;
    font-size:var(--lg-font-size);
}

.table-status-element[data-status-element-type="availability"]{
    background-color:none !important;
    color:white;
    padding:0.2 1.2rem;
    border-radius:5px;
    font-size:var(--md-font-size);
}



.table-status-element[data-table-status-element-type="vending-service-status"]{
    color:white;
    font-size:var(--sm-font-size);
    padding:0.2rem 0.5rem;
    border-radius:4px;
    font-weight:300;
    text-align:center;
    width:fit-content;
    transform:scale(0.7);
}
.table-status-element[data-table-status-element-type="vending-service-status"][data-status-value="active"]{
    /*background-color:#006807;*/
    background-image: url('../../images/icons/active-service.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    color: transparent;
}
.table-status-element[data-table-status-element-type="vending-service-status"][data-status-value="inactive"]{
    /*background-color:#7c0600;*/
    background-image: url('../../images/icons/inactive-service.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    color: transparent;
}
.table-status-element[data-table-status-element-type="vending-service-status"][data-status-value="unknown"]{
    /*background-color:#7c0600;*/
    background-image: url('../../images/icons/unknown-status.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    color: transparent;
}
.table-status-element[data-table-status-element-type="vending-service-status"][data-status-value="expiring soon"]{
    background-color:#7d4100;
}

.table-status-element[data-table-status-element-type="discount-status"]{
    color:white;
    font-size:var(--sm-font-size);
    padding:0.2rem 0.5rem;
    border-radius:4px;
    font-weight:300;
    text-align:center;
    width:fit-content;
    transform:scale(0.7);
}

.table-status-element[data-table-status-element-type="discount-status"][data-status-value="active"]{
    /*background-color:#006807;*/
    background-image: url('../../images/icons/active-service.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    color: transparent;
}
.table-status-element[data-table-status-element-type="discount-status"][data-status-value="inactive"]{
    /*background-color:#7c0600;*/
    background-image: url('../../images/icons/inactive-code.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    color: transparent;
}
.table-status-element[data-table-status-element-type="discount-status"][data-status-value="unknown"]{
    /*background-color:#7c0600;*/
    background-image: url('../../images/icons/unknown-status.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    color: transparent;
}


/* Connectivity Elements */
.table-status-element[data-status-element-type="goodConnection"]{
    background-color: var(--status-color-active-light);
    color: var(--status-color-active);
}
.table-status-element[data-status-element-type="badConnection"]{
    background-color: var(--status-color-inactive-light);
    color: var(--status-color-inactive);
}
.table-status-element[data-status-element-type="decentConnection"]{
    background-color: var(--status-color-pending-light);
    color: var(--status-color-pending);
}

.table-status-element[data-status-element-type="stockStatus"]{
    background:rgb(227,186,0,0.05);
}

.table-status-element[data-status-element-type="editable-text"]{
    cursor:pointer;
    background-color:var(--plain-button-ghost);
    color:var(--plain-button-border-color);
    padding:0.2 1.2rem;
    border-radius:8px;
}
.table-status-element[data-status-element-type="editable-text"]:hover{
    opacity:.75;
}
.table-status-element[data-status-element-type="products_list"]{
    display:flex;
    flex-direction:row;
    gap:0.3rem;
    align-items:left;
    justify-content:flex-start;
    padding:0.2rem;
    border-radius:4px;
    color:var(--plain-button-border-color);
    font-weight:700;
    transform:scale(0.7);
    max-height:3.5rem;
    max-width:6rem;
    overflow:hidden;
}
.table-status-element[data-status-element-type="products_list"] .products-list-container{
    display:flex;
    flex-direction:row;
    gap:0.3rem;
    align-items:left;
    justify-content:flex-start;
}

.table-status-element[data-status-element-type="products_list"].enlarge-on-hover:hover{
    transform:scale(0.8) !important;
}



.signal-strength-indicator {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 15px;
    padding: 2px;
}

.signal-bar {
    width: 4px;
    background-color: #e0e0e0;
    border-radius: 1px;
}

.bar1 { height: 5px; }
.bar2 { height: 10px; }
.bar3 { height: 15px; }

/* Good connection - all bars green */
.signal-strength-indicator[data-connection="good"] .signal-bar {
    background-color: #4CAF50;
}

/* Medium connection - first two bars orange, last one faded */
.signal-strength-indicator[data-connection="medium"] .bar1,
.signal-strength-indicator[data-connection="medium"] .bar2 {
    background-color: #FFA500;
}
.signal-strength-indicator[data-connection="medium"] .bar3 {
    background-color: rgba(255, 165, 0, 0.2);
}

/* Bad connection - first bar red, others faded */
.signal-strength-indicator[data-connection="bad"] .bar1 {
    background-color: #FF0000;
}
.signal-strength-indicator[data-connection="bad"] .bar2,
.signal-strength-indicator[data-connection="bad"] .bar3 {
    background-color: rgba(255, 0, 0, 0.2);
}

.short-sweet-note{
    font-size:var(--xs-font-size);
    opacity:0.8;
    padding:0.2rem 0.5rem;
    border-radius:4px;
}
.short-sweet-note[data-not-type="info"]{
    color:#02c265;
    background-color:rgba(2,194,101,0.1);
}
.short-sweet-note[data-not-type="warning"]{
    color:#ffaa50;
    background-color:rgba(255,170,80,0.1);
}

/* Scheduled Commands */
.scheduled-commands{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    align-items:center;
}
.scheduled-command-element{
    font-size:var(--xxs-font-size);
    padding:0.2rem 0.5rem;
    border-radius:4px;
    background-color:#b88600;
    /*border:1px solid var(--genuine-action-border);*/
    color:white;
    font-weight:700;
    cursor:pointer;
    position:relative;
    width:fit-content;
    text-align:center;
}
.scheduled-command-element:hover{
    opacity:0.8;
}
.has-scheduled-commands{
    background-color:var(--has-scheduled-commands-bg);
}
/* End of Scheduled Commands Styles */
/* Stock Status */
.stock-status {
    display: flex;
    align-items: flex-end;  /* Changed from flex-start to flex-end */
    justify-content: flex-start;
    gap: 2px;
}


.stock-status-text[data-status="high"] {
    color: var(--status-color-active);
}
.stock-status-text[data-status="low"] {
    color: var(--status-color-inactive);
}
/** End of Stock Status Styles **/



.bullet {
    display: inline-block;
    font-size: 10px;
    color: white;
    opacity: 0.5;
}
.bullet::before {
    content: '•';
    display: inline-block;
    font-size: 10px;
    color: white;
    opacity: 0.5;
}

/* Info Icon Styles */

.info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;  /* Add padding for text */
    font-size: var(--xxs-font-size);  /* Match your existing small text size */
    color: var(--text-color-secondary);  /* Use secondary text color */
    background: var(--genuine-action-bg);  /* Match your button styling */
    border: 1px solid var(--genuine-action-border);
    border-radius: var(--border-radius-01);
    opacity: 0.25;
    cursor: pointer;
}

.info-icon::before {  /* Add the text content */
    content: 'more info';
}

.info-icon:hover {
    opacity: 1;
}


.edit-window {
    position: fixed;
    display: none;
    background-color: var(--edit-window-bg);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    min-width: 150px;
    z-index: 10000;
    transform-origin: top left;
    border: 1px solid var(--genuine-action-border);
    /* Add these properties */
    opacity: 1 !important; /* Force full opacity */
    pointer-events: auto !important; /* Ensure clickable */
}

/* Add this to prevent parent opacity from affecting children */
.table-row:hover .edit-window, .table-row:hover .edit-window.active {
    opacity: 1 !important;
}
.edit-window.active {
    display: block;
    animation: popupAnimation 0.15s ease-out forwards;
}


.edit-window-content {
    padding: 8px 0;

}

.edit-option {
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    
}
.edit-option[data-locked="locked"]{
    opacity:0.1;
    pointer-events: none;
    cursor:auto;

}
.edit-option[data-locked="locked"]::before {
    content: '';  /* Remove direct URL usage in content */
    background-image: url('../../lock.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 8px;  /* Use fixed width instead of max-width */
    height: 8px; /* Use fixed height instead of max-height */
    vertical-align: middle;
    margin-right: 4px; /* Add spacing between icon and text */
}
.edit-option:not(:last-child){
    border-bottom:1px solid var(--edit-window-border);
}

.edit-option:hover {
    background-color: rgba(0, 0, 0, 0.1);
}
#editWindow {
    z-index: 1000001;
    /* Add your existing styles */
}

.edit-overlay {
    display: none;
    transition: background-color 0.2s ease;
}
.overlay{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.7);
    z-index:3000;
    animation: genuineFadeIn 0.4s ease-out forwards;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.overlay .modal{
    background-color:var(--nav-background);
}
@keyframes popupAnimation {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* Content transition styles */
.content-fade-out {
    animation: contentLoadFadeOut 0.3s ease-out forwards;
}

.content-fade-in {
    animation: contentLoadFadeUp 0.5s ease-out forwards;
}

/* Loading overlay transitions */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 3000;
    opacity: 0; /* Start fully transparent */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease-out;
}

.overlay.active {
    opacity: 1;
}

/* Refined animations */
@keyframes contentLoadFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes contentLoadFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/** End of edit window styles **/




/*** Pagination Styles ***/
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding:0.5rem 0;
    flex-wrap: wrap;
}

/* Page Numbers and Navigation Buttons */
.pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: var(--border-radius-02);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease-in-out;
    background: var(--genuine-action-bg);
    border: 2px solid var(--genuine-action-border);
    color: var(--text-color-primary);
    cursor: pointer;
    user-select: none;
}

/* Current Page Styling */
.pagination-item[data-active="true"] {
    background: var(--button-color-submit-gradient);
    border-color: var(--button-color-submit);
    color: var(--primary);
    font-weight: var(--font-weight-bold);
    transform: scale(1.05);
}

/* Navigation Arrows */
.pagination-nav {
    font-size: 1.2rem;
    padding: 0 1rem;
}

/* Hover Effects */
.pagination-item:not([data-active="true"]):hover {
    background: var(--button-color-submit-ghost-light);
    border-color: var(--button-color-submit-ghost);
    transform: translateY(-2px);
    box-shadow: var(--shadow-01);
}

/* Disabled State */
.pagination-item[data-disabled="true"] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Ellipsis Styling */
.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    color: var(--text-color-secondary);
}

/* Info Text */
.pagination-info {
    font-size: var(--sm-font-size);
    color: var(--text-color-secondary);
    margin: 0 1rem;
}
/*** End of Pagination Styles ***/

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.5rem;
    border-radius: 8px;
}

.pagination-btn {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border:none;
    color: var(--text-color-primary);
}

.pagination-arrow {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color-primary);
    text-decoration: none;
    border:none;
}

.pagination-btn:hover:not(.active),
.pagination-arrow:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.1);
}

.pagination-btn.active {
    background: var(--accent-color);
    color: var(--accent-text);
}

.pagination-btn.disabled,
.pagination-arrow.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pagination-ellipsis {
    opacity: 0.5;
    user-select: none;
}


/* Card Elements */
/* Card Elements */
.card-element {
    padding: 0.5rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    margin-bottom:0;
}

.inventory-product-element[data-card-type="inventory_product"]{
    /*background:linear-gradient(45deg, rgba(18, 103, 158, 0.06), rgba(255, 255, 255, 0.02));*/
    background:var(--content-background);
    border-radius:4px;
    cursor:pointer;
    padding:0.1rem 0.4rem;

}

/*
.inventory-product-element[data-card-type="inventory_product"]{
    /* border-top:1px solid var(--genuine-action-border); */
/*}*/


.inventory-product-element[data-card-type="inventory_product"]:hover{
    opacity:0.8;
}

.card-image {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-image: url('../../images/no-image.png');
    background-size: cover;
    background-position: center;
    background-color: rgb(255,255,255,0.05);
    border:1px solid var(--genuine-action-border-light) !important;
}
[data-color-theme="dark"] .card-image{
    border:1px solid var(--genuine-action-border-dark) !important;
}
.card-image.medium{
    width:2rem;
    height:2rem;
}

.card-image.large, .position-container{
    width: 3rem;
    height: 3rem;
}

.card-image.huge{
    width:5rem;
    height:5rem;
}
/*
.position-container{

}*/
.position-element{
    font-size:var(--lg-font-size);
    color:var(--text-color-secondary);
    font-weight:700;
    opacity:0.9;
}


.card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.01rem;
}

.card-name, .main-text {

    color: var(--text-color-primary);
}

.card-id, .sub-text {

    color: var(--text-color-primary);
    opacity: 0.6;
}

.dot-menu {
    font-size: 16px;
    font-weight: 700;  /* Makes dots bolder */
    letter-spacing: 1px;  /* Adds space between dots */
}
.dot-menu::after {
    content: "•••";  /* Three bullet points */
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    opacity:0.6;
    transition: opacity 0.2s ease;
    cursor: pointer;
}
.dot-menu:hover::after {
    opacity:1;
}



.collapsable-content {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: 
        max-height 0.2s cubic-bezier(0, 1, 0, 1),
        opacity 0.1s ease,
        transform 0.2s ease,
        visibility 0s linear 0.2s;
    padding: 0.5rem 0;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.98) translateY(-10px);
    transform-origin: top;
    margin: -.5rem 0; /* Compensate for padding to prevent layout shift */
}

.collapsable-content.active {
    max-height: 500px; /* Adjust based on content needs */
    transition:
        max-height 0.3s cubic-bezier(0.4, 0, 1, 1),
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0s linear;
    visibility: visible;
    opacity: 1;
    transform: scale(1) translateY(0);
    margin: 0;
}
/** End of Status Element Styles **/





/** Comments Styles **/
.comment-header {
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.comment-input-wrapper {
    display: flex;
    width: 100%;
    gap: 0.5rem;
    align-items: center;
    position: relative;

    
}

.comment-input {
    flex: 1;
    padding: 0.75rem 1rem 0.75rem 0;
    background: var(--input-background);
    color: var(--text-color);
    transition: border-color 0.2s ease;
    border:none;
    border-bottom:3px solid var(--item-info-arrow-hover-bg);
    min-width:0;

}



.comment-input:focus {
    outline: none;

}

.comment-button {
    white-space: nowrap;
    padding: 0.75rem 1rem;
    border: none;
    color: var(--button-text-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.comment-button:hover {
    opacity:0.8;
}

.comment-element {
    padding: 1rem;
    border-radius: 12px;
    background-color: var(--content-background);
    margin-bottom: 1rem;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.comment-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-color-theme="light"] .api-key-element{
    color:rgb(105, 105, 105) !important;
}

.user-avatar {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--button-color-submit);
}

.user-name {
    color: var(--text-color);
    font-weight: 500;
}

.comment-timestamp {
    color: var(--ghost-opacity);
    opacity:0.5;
}

.comment-text {
    color: var(--text-color);
    line-height: 1.4;
    margin: 0;
    padding:0.4rem; /* Aligns with the user name, accounting for avatar width + gap */
    opacity:0.8;
}

/** End of Comments Styles **/
/** Sales (recent Saless) **/
.sales-element{
    background-color:var(--content-background);
}
/** Metric Value Styles **/
.metric-display {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 400px;
    width:100%;
}
.metric-panel{
    padding:0.8rem;
    background-color:var(--metric-panel-background);
    box-shadow:none;
    border:2px solid var(--panel-border-color);

}





.metric-progress-bar {
    width: 30%;
    max-width:100%;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.metric-value {
    font-weight: 500;
}
/** End of Metric Value Styles **/


.spinner-container {
    text-align: center;
}

.spinner-text {
    color: white;
    margin-top: 1rem;
    font-size: 1.1rem;
}

.spinner {
    display: inline-block;
}

.spinner > div {
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 100%;
    display: inline-block;
    margin: 0 4px;
    animation: bounce 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% { 
        transform: scale(0);
    } 
    40% { 
        transform: scale(1.0);
    }
}

@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}
.blinker {
    animation: blinker 2000ms infinite;
    -webkit-animation: blinker 2000ms infinite; /* For Safari */
    z-index: 10000000000000 !important;
    animation-timing-function: ease-in-out;
    will-change: opacity;
}

@keyframes genuineFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, 2px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
/* Animation for page changes */
@keyframes paginationChange {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes borderFadeIn {
    from {
        border-color: transparent;
    }
    to {
        border-color:#018456;
    }
}


@keyframes contentLoadFade{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes contentLoadFadeOut{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
}

@keyframes contentLoadFadeUp{
    from{
        opacity:0;
        transform:translateY(2px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }

}

#mobile-navigation-list{

    width:100vw;
    position:absolute;
    top:3.2rem;
    left:0;
    display:flex;
    visibility: hidden; /* This is preventing it from showing */
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:0.6rem;
    border-top:1px solid var(--panel-border-color);
    padding:0 0.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    
    /* Hide scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
        display: none;
    }
    
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
#mobile-navigation-list p{
    font-size:var(--base-font-size);
    background:var(--content-background-secondary);
    padding:0.2rem 1.2rem;
    border-radius:25px;
}




.pagination-item[data-changing="true"] {
    animation: paginationChange 0.3s ease-out;
}

/* Responsive behavior */
@media (max-width: 1200px) {
    .actions-container {
        flex-direction: column;
    }

    .left-section,
    .right-section {
        width: 100%;
    }

}

@media (max-width: 960px) {
    .table-cell[data-priority="3"]{
        display: none !important; /* Force removal */
        width: 0 !important;     /* Ensure no space is taken */
        height: 0 !important;    /* Ensure no space is taken */
        padding: 0 !important;   /* Remove any padding */
        margin: 0 !important;    /* Remove any margin */
        border: 0 !important;    /* Remove any border */
    }
}

/* Show priority-2 elements above 768px */
@media (min-width: 769px) {
    [data-priority="2"] {
        display: initial;
        visibility: visible;
        opacity: 1;
        transition: opacity 0.3s ease-in;
    }
}
@media (max-width: 768px) {

    .reg-fs{
        font-size: var(--xs-font-size);
    }
    .small-fs{
        font-size: var(--xxs-font-size);
    }

    /* Remove priority-2 elements completely */
    [data-priority="2"] {
        display: none !important; /* Force removal */
        width: 0 !important;     /* Ensure no space is taken */
        height: 0 !important;    /* Ensure no space is taken */
        padding: 0 !important;   /* Remove any padding */
        margin: 0 !important;    /* Remove any margin */
        border: 0 !important;    /* Remove any border */
    }

    /* Modal Sizing */
    .form-layout.modal{
        width:90%;
        min-width:0;
        max-width:90%;
        max-height:90%;
        margin:0 auto;
    }
    .modal{
        width:90%;
        max-width:90%;
        max-height:90%;
        margin:0 auto;
    }

    .stretch{
        width:100%;
    }
    /* Grid styles */
    .grid-2-col{
        display: grid;
        grid-template-columns:1fr;
        gap: 1rem;
    }
    .grid-2-col > *{
        width:100%;
    }
    

}

@media (max-width: 1024px) {
    .pagination-container {
        gap: 0.25rem;
    }

    .pagination-item {
        min-width: 2rem;
        height: 2rem;
        font-size: var(--xs-font-size);
    }

    .pagination-nav {
        padding: 0 0.5rem;
    }

    /* Hide some elements on mobile */
    .pagination-info {
        display: none;
    }

    .pagination-ellipsis:not(:first-of-type):not(:last-of-type) {
        display: none;
    }
}

/* Additional breakpoint for very narrow screens */
@media (max-width: 480px) {
    .right-section {
        flex-direction: column;
    }
    .input-container {
        width: 100%;
    }
    .button.stretch {
        width: 100%;
        text-align: center;
    }
}



.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    background:var(--genuine-action-bg);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    min-width: 300px;
    max-width: 400px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease-in-out;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-icon {
    font-size: 20px;
}

.toast-message {
    flex: 1;
    font-size: 14px;
}

.toast-success {
    border-left: 4px solid #4caf50;
}

.toast-error {
    border-left: 4px solid #f44336;
}

.toast-warning {
    border-left: 4px solid #ff9800;
}

.toast-info {
    border-left: 4px solid #2196f3;
}

.toast-progress {
    height: 3px;
    background: #e0e0e0;
    margin-top: 8px;
    width: 100%;
    animation: progress 3s linear;
}

@keyframes progress {
    from { width: 100%; }
    to { width: 0%; }
}

.tax-warning {
    background-color: var(--genuine-action-bg);
    border: 1px solid #ffeeba;
    color: #856404;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tax-warning i {

    color: var(--text-color-primary);
}

.tax-group {
    background-color: var(--genuine-action-bg);
    border: 1px solid var(--genuine-action-border);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

.tax-group h3 {
    margin: 0 0 10px 0;
    color: var(--text-color-primary);
}

.tax-group-products {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-name {
    font-weight: 500;
}

.product-sku {
    color: var(--text-color-primary);
    font-size: 0.9em;
}

.product-count {
    margin-top: 10px;
    color: var(--text-color-primary);

    text-align: right;
}

.tax-input-container {
    margin: 20px 0;
}

.tax-input-container label {
    display: block;
    margin-bottom: 5px;
}

.tax-input-container input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}
.tax-groups-scroll {
    max-height: 25rem;
    overflow-y: auto;
}

.footer{
    width:100%;
    margin-top:auto;
    text-align:center;
    padding:0.5rem 0;
}
.footer p{
    font-size:var(--xs-font-size);
    opacity:0.6;
    font-weight:300;
}
.footer a{
    color:var(--text-color-primary);
    font-weight:500;
    text-decoration:none;
    opacity:1;
}

.highlighted-text-two{
    color:rgb(255, 241, 185);
}
[data-color-theme="light"] .highlighted-text-two{
    color:rgb(118, 118, 118);
}

.view-breakdown-button{

    padding:0.1rem 0.4rem;
    border-radius: 5px;
    background-color:rgb(0, 117, 121);
    border:1px solid var(--genuine-action-border);
    color:white;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
    opacity:0.8;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:0.2rem;
}

[data-color-theme="light"] .view-breakdown-button{
    background-color:rgb(255, 255, 255);
    border:1px solid rgb(0, 0, 0, 0.2);
    color:white !important;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
    color:rgb(0, 0, 0) !important;
}
[data-color-theme="light"] #interaction-log-view-modal .card-image{
    border:1px solid rgb(0,0,0,0) !important;
}

[data-color-theme="light"] .role-encapsulator-content-item.selected{
    color:white !important;
}

.role-encapsulator{
    padding:1rem;
    box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.1);
    cursor:pointer;
    transition:all 0.1s ease;
}
.role-encapsulator:hover{
    box-shadow:0 0 10px 0 rgba(255,255,255,0.2);
    border:1px solid var(--button-color-action);
}
.role-encapsulator.selected{
    /*background-color:var(--status-color-active);*/
    border:1px solid var(--button-color-action);
}

.permission-selection-count .permission-count{
    background-color:rgb(0, 146, 102 , 0.1);
    color:var(--text-color);
    border-radius:6px;
    padding:0.2rem 0.4rem;
    position: relative;
    opacity:0.8;
}

.permission-selection-count .full-permission-count{
    background-color:rgb(0, 146, 102 , 0.1);
    color:#84ffda;
    border-radius:6px;
    padding:0.2rem 0.4rem;
    position: relative;
}


.role-encapsulator-content{
    display:none;
    height:0px;
    overflow:hidden;
    visibility:hidden;
    transition:all 0.2s ease;
}
.role-encapsulator-content.expanded {
    display:block;
    padding: 0 1rem;
    height: auto;
    visibility: visible;
}
.role-encapsulator-content.expanded .permissions-list{
    padding:1rem 0;
}

.permissions-list {
    display: grid;
    /* Base column size of 150px but allow growth */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    width: 100%;
}
.role-encapsulator-content-item {
    padding: 0.8rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;

    text-align: center;
    vertical-align: middle;
    /* Handle text overflow */
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Prevent text from overflowing */
    overflow: hidden;
    /* Optional: add ellipsis for very long text */
    text-overflow: ellipsis;
    transition:all 0.1s ease;
}
.role-encapsulator-content-item.selected{
    background-color:var(--status-color-active);
    border:1px solid var(--button-color-action);
}
[data-color-theme="light"] .role-encapsulator-content-item.selected p,
[data-color-theme="light"] .role-encapsulator-content-item.selected-generic p{
    color:white !important;
}
/* Make text inside also handle overflow */
.role-encapsulator-content-item p {
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.role-encapsulator-content-item:hover{
    border:1px solid var(--button-color-action);
    box-shadow:0 0 10px 0 rgba(255,255,255,0.2);
}

.submit-role-button{
    background-color:rgb(0, 146, 102 , 0.1);
    color:#84ffda;
    border-radius:6px;
    padding:0.4rem 0.8rem;
    position: relative;
    cursor:pointer;
}
.submit-role-button:hover{
    background-color:rgb(0, 146, 102 , 0.2);
    color:#84ffda;
}

.product_price_amount, .total_charge_amount{
    padding:.1rem 0.3rem;
    border-radius:4px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:0.1rem;
    background-color:rgb(185, 130, 0, 0.04) !important;
}

.product_price_amount span, .total_charge_amount span{
    font-weight:500;
    color:rgb(255, 223, 80) !important;
    font-size:var(--sm-font-size) !important;
}

[data-color-theme="light"] .product_price_amount span, [data-color-theme="light"] .total_charge_amount span{
    color:rgb(0,0,0,0.7) !important;
}


.simple-check-label-button {
    padding: 0.3rem 0.8rem;
    background-color: rgba(232, 232, 232, 0.01);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border-radius: 6px;
    cursor: pointer;
    border: none !important;
}

/* Add the checkbox element */
.simple-check-label-button::before {
    content: '';
    width: 7px;
    height: 7px;
    border: 2px solid #ccc;
    border-radius: 2px;
    background-color: transparent;
    transition: all 0.2s ease;
}

/* Active/checked state */
.simple-check-label-button.active::before {
    background-color: #00ae4e; /* Light green background */
    border-color: #00ae4e; /* Light green border */
}

.active-period {
    font-family: 'Monaco', 'Menlo', monospace; /* Monospace for alignment */
    font-size: 0.85em;
    color: #d5d5d5;
    white-space: nowrap; /* Prevent wrapping */
}
[data-color-theme="light"] .active-period{
    color: #323232;
}

.breadcrumb-container {
    display: flex;
    gap:0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background:inherit !important;
    height:auto !important;
    min-height:auto !important;
    max-height:auto !important;
    padding:0 !important;
    margin:0 !important;
}

.breadcrumb-link{
    padding:0.5rem 1.5rem 0.5rem 1rem;
    background:var(--content-background-secondary) !important;
    border:1px solid var(--border-color) !important;
    color:var(--text-color);
    text-decoration:none;
    font-size:0.7rem;
    display:inline-block;
    margin-left:-8px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    transition: all 0.2s ease;
}
.breadcrumb-link:first-child{
    background:linear-gradient(to right, #1b2124, #1b2124);
    margin-left:0;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}
.breadcrumb-container .breadcrumb-link.last-child{
    flex:1;
    background:var(--content-background-secondary);
    border:1px solid var(--border-color);
    margin-left:-8px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%) !important;
}

[data-color-theme="light"] .breadcrumb-container .breadcrumb-link{
    color:black;
}

[data-color-theme="light"] .breadcrumb-container .breadcrumb-link{
    /*background:linear-gradient(45deg, #00B883, #00B883);*/
    background:#cdecff;
    opacity:.9;

}

[data-color-theme="light"] .breadcrumb-container .breadcrumb-link:first-child{
    /*background:linear-gradient(45deg, #00B883, #00B883);*/
    background:#cdecff;


}

[data-color-theme="light"] .breadcrumb-container .breadcrumb-link.last-child{
    background:rgb(0,0,0,0.05);

}

[data-color-theme="light"] .breadcrumb-container .breadcrumb-link.last-child{
    /*background:linear-gradient(45deg, #00B883, #00B883);*/
    background:#cdecff;
    opacity:.9 !important;

}

.breadcrumb-link .theme-icon{
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block;
    vertical-align: middle;
}
.breadcrumb-link:not(:first-child){
    background:linear-gradient(to right, #14181a, #14181a);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
    padding-left:1.5rem;
}
.breadcrumb-link:hover{
    background:var(--content-background-primary);
}

[data-color-theme="light"] [data-status-element="inv_prod_price"]{
    color:rgb(0,0,0,0.7);
}

[data-color-theme="dark"] [data-status-element="inv_prod_price"]{
    color:rgb(255,255,255,0.7);
}

[data-color-theme="light"][data-status-element-type="card-element"]{
background:rgb(0,0,0,0.04) !important;
background-color:rgb(0,0,0,0.04);
}

.auto-refresh-container{
    background:linear-gradient(to right, rgb(28, 31, 33), rgba(38, 38, 38, 0.2)); 
    padding:.2rem .4rem; 
    border-radius:8px;
    transition:all 0.2s ease;
}
[data-color-theme="light"] .auto-refresh-container{
    background:linear-gradient(to right, rgb(247, 250, 249), rgba(247, 250, 249, 0.2)); 
}
.auto-refresh-container p{
    font-size:0.7rem;
}