/*$Id$*/
.HelpLearningDashboard_root {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: var(--primary-backdrop);
    font-family: var(--default-font-family);
    color: var(--font-color-dark);
    pointer-events: none;
    z-index: 1000;
}

.HelpLearningDashboard_root>.glass-container {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    width: 28vw;
    min-width: 340px;
    height: 100vh;
    border-radius: 1em 0 0 1em;
    background: var(--primary-content-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid var(--border-color-low);
    box-shadow: -10px 0 30px var(--util-backdrop-dark, rgba(0, 0, 0, 0.08));
    overflow: hidden;
    animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.HelpLearningDashboard_root .sp-header {
    display: flex;
    flex-direction: column;
    padding: 1.25em 1.25em 0 1.25em;
    border-bottom: 1px solid var(--border-color-low);
    background: var(--secondary-bg-v2);
}

.HelpLearningDashboard_root .sp-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
}

.HelpLearningDashboard_root .title-text {
    font-size: var(--font-large);
    font-weight: var(--font-weight-bold);
    color: var(--font-color-theme, var(--font-color-dark));
}

.HelpLearningDashboard_root .close-btn {
    color: var(--font-color-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0.2em;
    border-radius: 0.35em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.HelpLearningDashboard_root .close-btn:hover {
    background: var(--secondary-bg-v2, rgba(0, 0, 0, 0.05));
}

.HelpLearningDashboard_root .sp-search-bar {
    display: flex;
    align-items: center;
    background: var(--primary-content-bg);
    border: 1px solid var(--border-color-mid);
    border-radius: 0.5em;
    padding: 0.5em 0.75em;
    transition: all 0.2s ease;
    margin-bottom: 1em;
}

.HelpLearningDashboard_root .sp-search-icon {
    color: var(--font-color-dark);
    opacity: 0.6;
    margin-right: 0.5em;
    width: 1em;
    height: 1em;
}

.HelpLearningDashboard_root .sp-search-bar>input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--font-normal);
    color: var(--font-color-dark);
    padding: 0;
    margin: 0;
}

.HelpLearningDashboard_root .sp-cmd-k {
    font-size: var(--font-small);
    font-weight: var(--font-weight-bold);
    color: var(--font-color-dark);
    opacity: 0.6;
    background: var(--secondary-bg-v3);
    padding: 0.2em 0.4em;
    border-radius: 0.25em;
    border: 1px solid var(--border-color-mid);
    pointer-events: none;
    display: none;
}

.HelpLearningDashboard_root .sp-tabs-container {
    margin-bottom: -1px;
}

.HelpLearningDashboard_root .sp-tabs {
    display: flex;
    gap: 0.5em;
    padding-bottom: 0.75em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.HelpLearningDashboard_root .sp-tabs::-webkit-scrollbar {
    height: 0.15em;
    background-color: transparent;
}

.HelpLearningDashboard_root .sp-tabs::-webkit-scrollbar-thumb {
    background-color: var(--border-color-low);
    border-radius: 1em;
}

.HelpLearningDashboard_root .sp-tab {
    background: transparent;
    padding: 0.4em 1em;
    border-radius: 2em;
    font-size: var(--font-small);
    font-weight: var(--font-weight-medium);
    color: var(--font-color-dark);
    /* opacity: 0.7; */
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.HelpLearningDashboard_root .sp-tab:hover {
    background: var(--secondary-content-bg);
    opacity: 1;
}

.HelpLearningDashboard_root .sp-tab.active {
    background: var(--secondary-bg);
    color: var(--primary-content-bg);
    opacity: 1;
    box-shadow: 0 0.1em 0.3em var(--util-backdrop-dark);
}

.HelpLearningDashboard_root .sp-content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 1em 1.25em;
}

.HelpLearningDashboard_root .sp-content-wrapper::-webkit-scrollbar {
    width: 0.35vw;
    height: 0.35vw;
    background-color: transparent;
}

.HelpLearningDashboard_root .sp-content-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--border-color-mid);
    border-radius: 1em;
}

.HelpLearningDashboard_root .sp-card {
    display: flex;
    align-items: center;
    background: var(--primary-content-bg);
    border: 1px solid var(--border-color-mid);
    border-radius: 0.75em;
    padding: 0.8em 1em;
    margin-bottom: 0.75em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.HelpLearningDashboard_root .sp-card:hover {
    transform: translateY(-0.1em);
    box-shadow: 0 0em 0.6em var(--border-color-mid);
    border-color: var(--border-color-mid);
}

.HelpLearningDashboard_root .sp-icon-wrap {
    width: 2.5em;
    height: 2.5em;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1em;
    flex-shrink: 0;
}

.HelpLearningDashboard_root .sp-icon {
    width: 1.5em;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.HelpLearningDashboard_root .sp-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.HelpLearningDashboard_root .sp-icon-wrap.walkthrough {
    background: var(--util-blue-bg, #eef5ff);
    color: var(--util-blue-font-color-dark, #0066ff);
}

.HelpLearningDashboard_root .sp-icon-wrap.interactivevideo {
    background: var(--primary-content-bg-v5);
    color: var(--secondary-bg);
}

.HelpLearningDashboard_root .sp-icon-wrap.guide {
    background: var(--primary-content-bg-v5);
    color: var(--secondary-bg);
}

.HelpLearningDashboard_root .sp-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.HelpLearningDashboard_root .sp-card-title {
    font-size: var(--font-normal);
    font-weight: var(--font-weight-bold);
    color: var(--font-color-dark);
    margin-bottom: 0.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.HelpLearningDashboard_root .sp-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.HelpLearningDashboard_root .sp-tag {
    font-size: var(--font-xsmall);
    /* font-weight: var(--font-weight-bold); */
    padding: 0.15em 0.4em;
    border-radius: 0.25em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.HelpLearningDashboard_root .sp-tag.walkthrough {
    color: var(--util-blue-font-color-dark, #0066ff);
    background: var(--util-blue-bg, #eef5ff);
}

.HelpLearningDashboard_root .sp-tag.interactivevideo {
    color: var(--font-color-theme);
    background: var(--primary-content-bg-v5);
}

.HelpLearningDashboard_root .sp-tag.guide {
    color: var(--font-color-theme);
    background: var(--primary-content-bg-v5);
}

.HelpLearningDashboard_root .sp-author {
    font-size: 0.75em;
    color: var(--font-color-dark);
    opacity: 0.45;
    font-weight: var(--font-weight-normal, 400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.15em;
    display: none;
}

.HelpLearningDashboard_root .sp-card-hover-action {
    opacity: 0;
    color: var(--font-color-dark);
    transition: all 0.2s ease;
    transform: translateX(-0.5em);
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.HelpLearningDashboard_root .sp-card:hover .sp-card-hover-action {
    opacity: 0.6;
    transform: translateX(0);
}

.HelpLearningDashboard_root .sp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3em 1em;
    height: 100%;
}

.HelpLearningDashboard_root .sp-empty-icon {
    font-size: var(--font-xxxlarge);
    margin-bottom: 0.5em;
    opacity: 0.9;
}

.HelpLearningDashboard_root .sp-empty-title {
    font-size: var(--font-large);
    font-weight: var(--font-weight-bold);
    color: var(--font-color-dark);
    margin-bottom: 0.5em;
}

.HelpLearningDashboard_root .sp-empty-subtitle {
    font-size: var(--font-small);
    color: var(--font-color-dark);
    opacity: 0.6;
}/*$Id$*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: var(--default-font-family);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    letter-spacing: .035vw;
    scrollbar-color: var(--scrollbar-color) var(--transparent);
}
body ::-webkit-scrollbar-thumb{
    background: #80808054;
}
/*$Id$*/

body[data-base-theme=""], body[data-base-theme="light"] {
    /*util colours*/
    --util-red-bg-darkest : red;
    --util-red-bg-dark : #fb6868;
    --util-red-bg-light : #fff2f2;
    --util-red-font-color-dark : #fb6868;
    --util-red-font-color-darkest : red;
    --util-red-bg-blink :rgba(255, 0, 0, 0);
    --util-yellow-bg-light : rgb(255, 243, 205);
    --util-yellow-font-color-dark : rgb(104, 86, 32);
    --util-yellow-font-color-darkest : #dca000;
    --util-yellow-font-color-light : rgb(255, 234, 151);
    --util-green-bg-cell-color : rgb(232, 245, 233);
    --util-green-bg-nodata:rgba(94, 221, 192, 0.098);
    --util-red-bg-cell-color : rgb(255, 235, 238);
    --util-backdrop-dark : rgb(0 0 0 / 40%);
    --util-backdrop-light : rgb(255 255 255 / 50%);
    --scrollbar-color: rgb(200 200 200 / 50%);
    --util-green-font-color-dark : rgb(34 147 0);
    --util-green-font-color-darkest :rgb(0 128 128);
    --util-green-font-color-light :rgb(0 196 147);
    --util-green-font-color-lightest  : rgb(0 196 147 / 27%);
    --util-green-bg-font-color:rgb(60 118 61);
    --pure-white:#ffffff;
    --pure-black:#000;

   /*text color*/
    --font-color-dark: #000000;
    --font-color-landingpage: #eeeeee;
    --gradient1-landingpage: #003E3E;
    --gradient2-landingpage: #012727;
    --rectangle1-landingpage: #003B3B;
    --rectangle2-landingpage: #002727;
    --sidebar-elements-bg : rgb(255 255 255 / 6%);
    --modal-border-bg : rgb(255 255 255 / 25%);
    --util-blue-font-color-dark : rgb(33,150,243,1);
    --util-blue-bg-color : #199cfe;
    --util-green-bg-color : rgb(12 94 94);
    --spinner-color : rgba(0, 0, 0, 0.1);
    --status-color-green : rgb(0, 118, 0);
    --status-background-green : rgba(0, 128, 0, 0.059);
    --status-color-blue : rgb(0, 151, 192);
    --status-background-blue : rgba(0, 151, 192, 0.051);
    --status-color-orange : rgb(192, 145, 0);
    --status-background-orange : rgba(255, 220, 0, 0.09);
    --status-background-purple:#5700800d;
    --status-color-purple: #570080;
    --status-border-purple: #5700802e;
    --transparent : transparent;
    --primary-hovereffect : rgb(255 255 255 / 5%);
    --border-color-mid: rgb(68 68 68 / 10%);
    --border-red: #ff000059;
    --primary-backdrop : rgb(0 0 0 / 25%);
    --border-color-mid1: rgb(68 68 68 / 20%);
    --border-color-mid2:rgb(68 68 68 / 35%);
    --border-color-mid3:rgb(68 68 68 / 50%);
    --border-color-low1: rgb(197 197 197 / 25%);

    --zoho-blue:rgb(35 109 180);
    --zoho-blue-light:#f6faff;
    --zoho-blue-dark:rgb(25 79 128);
    --zoho-yellow:#f9b21d;
    --zoho-green:rgb(4 153 73);
    --zoho-red:rgb(228 37 39);
}

body[data-base-theme="dark"] {
    /*util colours*/
    --util-red-bg-darkest : red;
    --util-red-bg-dark : rgb(251, 104, 104);
    --util-red-bg-light : rgba(251, 104, 104, 0.169);
    --util-red-font-color-dark : rgb(251, 104, 104);
    --util-red-font-color-darkest : rgb(255, 0, 0);
    --util-yellow-bg-light : rgb(89 78 44 / 45%);
    --util-yellow-font-color-dark : rgb(102, 77, 3);
    --util-yellow-font-color-darkest : #dca000;
    --util-yellow-font-color-light : rgb(255, 234, 151);
    --util-green-bg-cell-color : rgb(232, 245, 233);
    --util-green-bg-nodata:rgba(94, 221, 192, 0.098);
    --util-red-bg-cell-color : rgb(255, 235, 238);
    --util-backdrop-dark : rgb(0 0 0 / 40%);
    --util-backdrop-light : rgb(255 255 255 / 50%);
    --scrollbar-color: rgb(225 225 225 / 10%);
    --util-green-font-color-dark : rgb(34 147 0);
    --util-green-font-color-darkest :rgb(50, 64, 64);
    --util-green-font-color-light :rgb(0 196 147);
    --util-green-font-color-lightest  : rgb(0 196 147 / 27%);
    --util-green-bg-font-color:rgb(60 118 61);
    --sidebar-elements-bg : rgb(255 255 255 / 6%);
    --modal-border-bg : rgb(255 255 255 / 25%);
    --util-blue-font-color-dark : rgb(33,150,243,1);
    --util-blue-bg-color : #199cfe;
    --util-green-bg-color : rgb(12 94 94);
    --spinner-color : rgba(0, 0, 0, 0.1);
    --status-color-green : rgb(0, 118, 0);
    --status-background-green : rgba(0, 128, 0, 0.059);
    --status-color-blue : rgb(0, 151, 192);
    --status-background-blue : rgba(0, 151, 192, 0.051);
    --status-color-orange : rgb(192, 145, 0);
    --status-background-orange : rgba(255, 220, 0, 0.09);
    --status-background-purple:#5700800d;
    --status-color-purple: #570080;
    --status-border-purple: #5700802e;
    --transparent : transparent;
    --border-red: #ff000038;
    --primary-backdrop : rgb(0 0 0 / 75%);
    --border-color-mid1: rgb(68 68 68 / 35%);
    --border-color-mid2:rgb(68 68 68 / 55%);
    --border-color-mid3:rgb(68 68 68 / 65%);

    --border-color-low1: rgb(197 197 197 / 25%);
    --pure-white:#000000;
    --pure-black:#000;

    --zoho-blue:rgb(35 109 180);
    --zoho-blue-light:#f6faff;
    --zoho-blue-dark:rgb(25 79 128);
    --zoho-yellow:#f9b21d;
    --zoho-green:rgb(4 153 73);
    --zoho-red:rgb(228 37 39);
}

body[data-color-theme="008080"][data-base-theme="light"],  
body[data-color-theme="nativegreen"][data-base-theme="light"] {
    /*primary background color for nav*/
    --primary-bg : rgb(0 48 62) ;
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    /*secondary background color for dashbords*/
    --secondary-bg : rgb(0 128 128) ;
    --secondary-bg-v1 : rgb(0 128 128 / 10%) ;
    --secondary-bg-v2 : rgb(0 128 128 / 15%) ;
    --secondary-bg-v3 : rgb(0 128 128 / 50%) ;
    --secondary-bg-v4 : rgb(0 128 128 / 5%) ;/*hover for table*/
    --primary-content-bg-v5: rgb(34 34 34);  
    
    /*content background color*/
    --primary-content-bg : rgb(255, 255, 255) ;
    --primary-content-bg-v1 : #f3f3f3 ;
    --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
    --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
    --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5 : rgb(240, 246, 247) ;/*leftpane background*/
    
    --secondary-content-bg : #f9f9f9 ;
    
    /*text color*/
    --font-color-white : rgb(255, 255, 255) ;
    --font-color-dark : rgb(0,0,0) ;
    --font-color-theme : rgb(0, 128, 128) ;
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
    --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(0, 128, 128) ;
    --theme-border-color-mid : rgb(0 128 128 / 25%);
    --theme-border-color-low : rgb(0 128 128 / 50%);
    
    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="008080"][data-base-theme="dark"],
body[data-color-theme="nativegreen"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(0 124 114);
    --secondary-bg-v1: rgb(32 46 44);
    --secondary-bg-v2: rgb(0 164 164 / 15%);
    --secondary-bg-v3: rgb(3 213 213 / 50%);
    --secondary-bg-v4: rgb(11 115 106 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(0, 196, 180) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(0, 128, 128) ;
    --theme-border-color-mid : rgb(0 128 128 / 25%);
    --theme-border-color-low : rgb(0 128 128 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}


/*extra colours*/

body[data-color-theme="red"][data-base-theme="light"],
body[data-color-theme="990000"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(153, 0, 0) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(153, 0, 0) ;
        --secondary-bg-v1 : rgb(153, 0, 0, 0.1) ;
        --secondary-bg-v2 : rgb(153, 0, 0, 0.15) ;
        --secondary-bg-v3 : rgb(153, 0, 0, 0.5) ;
        --secondary-bg-v4 : rgb(153, 0, 0, 0.05) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/   
        --primary-content-bg-v5 : rgb(255, 250, 250) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(153, 0, 0) ;
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(153, 0, 0) ;
        --theme-border-color-mid : rgb(153, 0, 0, 0.25);
        --theme-border-color-low : rgb(153, 0, 0, 0.5);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="990000"][data-base-theme="dark"],
body[data-color-theme="red"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(153, 0, 0) ;
    --secondary-bg-v1: rgb(50, 20, 20);
    --secondary-bg-v2: rgb(153 0 0 / 15%);
    --secondary-bg-v3: rgb(153 0 0 / 50%);
    --secondary-bg-v4: rgb(153 0 0 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(153, 0, 0) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(153, 0, 0) ;
    --theme-border-color-mid : rgb(153 0 0 / 25%);
    --theme-border-color-low : rgb(153 0 0 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="royalblue"][data-base-theme="light"],
body[data-color-theme="2d72d9"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(45, 114, 217) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(45, 114, 217) ;
        --secondary-bg-v1 : rgb(45 114 217 / 10%) ;
        --secondary-bg-v2 : rgb(45 114 217 / 15%) ;
        --secondary-bg-v3 : rgb(45 114 217 / 50%) ;
        --secondary-bg-v4 : rgb(45 114 217 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(241, 248, 255) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(45, 114, 217) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(45, 114, 217) ;
        --theme-border-color-mid : rgb(45 114 217 / 25%);
        --theme-border-color-low : rgb(45 114 217 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="royalblue"][data-base-theme="dark"],
body[data-color-theme="2d72d9"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(45, 114, 217) ;
    --secondary-bg-v1: rgb(28, 37, 52);
    --secondary-bg-v2: rgb(45 114 217 / 15%);
    --secondary-bg-v3: rgb(45 114 217 / 50%);
    --secondary-bg-v4: rgb(45 114 217 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(45, 114, 217) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(45, 114, 217) ;
    --theme-border-color-mid : rgb(45 114 217 / 25%);
    --theme-border-color-low : rgb(45 114 217 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}


body[data-color-theme="lightgreen"][data-base-theme="light"],
body[data-color-theme="439454"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(67, 148, 84) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(67, 148, 84) ;
        --secondary-bg-v1 : rgb(67 148 84 / 10%) ;
        --secondary-bg-v2 : rgb(67 148 84 / 15%) ;
        --secondary-bg-v3 : rgb(67 148 84 / 50%) ;
        --secondary-bg-v4 : rgb(67 148 84 / 5%) ;/*hover for table*/
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(247, 255, 248) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(67, 148, 84) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(67, 148, 84) ;
        --theme-border-color-mid : rgb(67 148 84 / 25%);
        --theme-border-color-low : rgb(67 148 84 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="lightgreen"][data-base-theme="dark"],
body[data-color-theme="439454"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(67, 148, 84) ;
    --secondary-bg-v1: rgb(28, 38, 39);
    --secondary-bg-v2: rgb(67 148 84 / 15%);
    --secondary-bg-v3: rgb(67 148 84 / 50%);
    --secondary-bg-v4: rgb(67 148 84 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(67, 148, 84) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(67, 148, 84) ;
    --theme-border-color-mid : rgb(67 148 84 / 25%);
    --theme-border-color-low : rgb(67 148 84 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="yellow"][data-base-theme="light"],
body[data-color-theme="e9a23f"][data-base-theme="light"]  {
    /*primary background color for nav*/
        --primary-bg : rgb(233, 162, 63) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
        --sidebar-elements-bg : rgb(255 255 255 / 7%);
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(233, 162, 63) ;
        --secondary-bg-v1 : rgb(233 162 63 / 10%) ;
        --secondary-bg-v2 : rgb(233 162 63 / 15%) ;
        --secondary-bg-v3 : rgb(233 162 63 / 50%) ;
        --secondary-bg-v4 : rgb(233 162 63 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(255, 251, 246) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(233, 162, 63) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(233, 162, 63) ;
        --theme-border-color-mid : rgb(233 162 63 / 25%);
        --theme-border-color-low : rgb(233 162 63 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="yellow"][data-base-theme="dark"],
body[data-color-theme="e9a23f"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(233, 162, 63) ;
    --secondary-bg-v1: rgb(44, 34, 21);
    --secondary-bg-v2: rgb(233 162 63 / 15%);
    --secondary-bg-v3: rgb(233 162 63 / 50%);
    --secondary-bg-v4: rgb(233 162 63 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(233, 162, 63) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(233, 162, 63) ;
    --theme-border-color-mid : rgb(233 162 63 / 25%);
    --theme-border-color-low : rgb(233 162 63 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}


body[data-color-theme="maroon"][data-base-theme="light"],
body[data-color-theme="660000"][data-base-theme="light"]  {
    /*primary background color for nav*/
        --primary-bg : rgb(102, 0, 0) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(102, 0, 0) ;
        --secondary-bg-v1 : rgb(102 0 0 / 10%) ;
        --secondary-bg-v2 : rgb(102 0 0 / 15%) ;
        --secondary-bg-v3 : rgb(102 0 0 / 50%) ;
        --secondary-bg-v4 : rgb(102 0 0 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(255, 245, 245) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(102, 0, 0) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(102, 0, 0) ;
        --theme-border-color-mid : rgb(102 0 0 / 25%);
        --theme-border-color-low : rgb(102 0 0 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="maroon"][data-base-theme="dark"],
body[data-color-theme="660000"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(102, 0, 0) ;
    --secondary-bg-v1: rgb(42, 14, 14);
    --secondary-bg-v2: rgb(102 0 0 / 15%);
    --secondary-bg-v3: rgb(102 0 0 / 50%);
    --secondary-bg-v4: rgb(102 0 0 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(102, 0, 0) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(102, 0, 0) ;
    --theme-border-color-mid : rgb(102 0 0 / 25%);
    --theme-border-color-low : rgb(102 0 0 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}


body[data-color-theme="navyblue"][data-base-theme="light"],
body[data-color-theme="07385d"][data-base-theme="light"] {
    /*primary background color for nav*/
    --primary-bg : rgb(7, 56, 93);
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(0 94 165);
        --secondary-bg-v1 : rgb(7 56 93 / 10%) ;
        --secondary-bg-v2 : rgb(7 56 93 / 15%) ;
        --secondary-bg-v3 : rgb(7 56 93 / 50%) ;
        --secondary-bg-v4 : rgb(7 56 93 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(242 246 249);/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(7, 56, 93) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
    --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(7, 56, 93) ;
    --theme-border-color-mid : rgb(7 56 93 / 25%);
    --theme-border-color-low : rgb(7 56 93 / 50%);
    
    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="navyblue"][data-base-theme="dark"],
body[data-color-theme="07385d"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(7, 56, 93) ;
    --secondary-bg-v1: rgb(22, 32, 41);
    --secondary-bg-v2: rgb(7 56 93 / 15%);
    --secondary-bg-v3: rgb(7 56 93 / 50%);
    --secondary-bg-v4: rgb(7 56 93 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(7, 56, 93) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(7, 56, 93) ;
    --theme-border-color-mid : rgb(7 56 93 / 25%);
    --theme-border-color-low : rgb(7 56 93 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="darkgreen"][data-base-theme="light"],
body[data-color-theme="165151"][data-base-theme="light"]  {
    /*primary background color for nav*/
        --primary-bg : rgb(22, 81, 81)  ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;


    /*secondary background color for dashbords*/
        --secondary-bg : rgb(22, 81, 81) ;
        --secondary-bg-v1 : rgb(22 81 81 / 10%) ;
        --secondary-bg-v2 : rgb(22 81 81 / 15%) ;
        --secondary-bg-v3 : rgb(22 81 81 / 50%) ;
        --secondary-bg-v4 : rgb(22 81 81 / 5%) ;/*hover for table*/


    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(233, 239, 236) ;/*leftpane background*/

        --secondary-content-bg : #f9f9f9 ;


    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(22, 81, 81) ;


    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/

        --theme-border-color-high : rgb(22, 81, 81) ;
        --theme-border-color-mid : rgb(22 81 81 / 25%);
        --theme-border-color-low : rgb(22 81 81 / 50%);

    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="darkgreen"][data-base-theme="dark"],
body[data-color-theme="165151"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(22, 81, 81) ;
    --secondary-bg-v1: rgb(10, 38, 38);
    --secondary-bg-v2: rgb(22 81 81 / 15%);
    --secondary-bg-v3: rgb(22 81 81 / 50%);
    --secondary-bg-v4: rgb(22 81 81 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(22, 81, 81) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(22, 81, 81) ;
    --theme-border-color-mid : rgb(22 81 81 / 25%);
    --theme-border-color-low : rgb(22 81 81 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

                        
body[data-color-theme="purple"][data-base-theme="light"],
body[data-color-theme="663399"][data-base-theme="light"]  {
    /*primary background color for nav*/
        --primary-bg : rgb(102, 51, 153) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(102, 51, 153) ;
        --secondary-bg-v1 : rgb(102 51 153 / 10%) ;
        --secondary-bg-v2 : rgb(102 51 153 / 15%) ;
        --secondary-bg-v3 : rgb(102 51 153 / 50%) ;
        --secondary-bg-v4 : rgb(102 51 153 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(251, 246, 255) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(102, 51, 153) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(102, 51, 153) ;
        --theme-border-color-mid : rgb(102 51 153 / 25%);
        --theme-border-color-low : rgb(102 51 153 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="purple"][data-base-theme="dark"],
body[data-color-theme="663399"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(102, 51, 153) ;
    --secondary-bg-v1: rgb(41, 29, 54);
    --secondary-bg-v2: rgb(102 51 153 / 15%);
    --secondary-bg-v3: rgb(102 51 153 / 50%);
    --secondary-bg-v4: rgb(102 51 153 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(102, 51, 153) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(102, 51, 153) ;
    --theme-border-color-mid : rgb(102 51 153 / 25%);
    --theme-border-color-low : rgb(102 51 153 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="darkblue"][data-base-theme="light"],
body[data-color-theme="1e5598"][data-base-theme="light"]  {
    /*primary background color for nav*/
        --primary-bg : rgb(11, 30, 54);
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(30, 85, 152) ;
        --secondary-bg-v1 : rgb(30 85 152 / 10%) ;
        --secondary-bg-v2 : rgb(30 85 152 / 15%) ;
        --secondary-bg-v3 : rgb(30 85 152 / 50%) ;
        --secondary-bg-v4 : rgb(30 85 152 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(242, 246, 251) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(30, 85, 152) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(30, 85, 152) ;
        --theme-border-color-mid : rgb(30 85 152 / 25%);
        --theme-border-color-low : rgb(30 85 152 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="darkblue"][data-base-theme="dark"],
body[data-color-theme="1e5598"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(30, 85, 152);
    --secondary-bg-v1: rgb(22, 34, 49);
    --secondary-bg-v2: rgb(30 85 152 / 15%);
    --secondary-bg-v3: rgb(30 85 152 / 50%);
    --secondary-bg-v4: rgb(30 85 152 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(30, 85, 152) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(30, 85, 152) ;
    --theme-border-color-mid : rgb(30 85 152 / 25%);
    --theme-border-color-low : rgb(30 85 152 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="forestgreen"][data-base-theme="light"],
body[data-color-theme="336600"][data-base-theme="light"]  {
    /*primary background color for nav*/
        --primary-bg : rgb(51, 102, 0) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(51, 102, 0) ;
        --secondary-bg-v1 : rgb(51 102 0 / 10%) ;
        --secondary-bg-v2 : rgb(51 102 0 / 15%) ;
        --secondary-bg-v3 : rgb(51 102 0 / 50%) ;
        --secondary-bg-v4 : rgb(51 102 0 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(247, 249, 245) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(51, 102, 0) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(51, 102, 0) ;
        --theme-border-color-mid : rgb(51 102 0 / 25%);
        --theme-border-color-low : rgb(51 102 0 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}
body[data-color-theme="forestgreen"][data-base-theme="dark"],
body[data-color-theme="336600"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(51, 102, 0);
    --secondary-bg-v1: rgb(28, 38, 17);
    --secondary-bg-v2: rgb(51 102 0 / 15%);
    --secondary-bg-v3: rgb(51 102 0 / 50%);
    --secondary-bg-v4: rgb(51 102 0 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(51, 102, 0) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(51, 102, 0) ;
    --theme-border-color-mid : rgb(51 102 0 / 25%);
    --theme-border-color-low : rgb(51 102 0 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="brown"][data-base-theme="light"],
body[data-color-theme="996633"][data-base-theme="light"]   {
    /*primary background color for nav*/
        --primary-bg : rgb(153, 102, 51) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(153, 102, 51) ;
        --secondary-bg-v1 : rgb(153 102 51 / 10%) ;
        --secondary-bg-v2 : rgb(153 102 51 / 15%) ;
        --secondary-bg-v3 : rgb(153 102 51 / 50%) ;
        --secondary-bg-v4 : rgb(153 102 51 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(252, 249, 248) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(153, 102, 51) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(153, 102, 51) ;
        --theme-border-color-mid : rgb(153 102 51 / 25%);
        --theme-border-color-low : rgb(153 102 51 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}
body[data-color-theme="brown"][data-base-theme="dark"],
body[data-color-theme="996633"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(153, 102, 51);
    --secondary-bg-v1: rgb(53, 40, 27);
    --secondary-bg-v2: rgb(153 102 51 / 15%);
    --secondary-bg-v3: rgb(153 102 51 / 50%);
    --secondary-bg-v4: rgb(153 102 51 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(153, 102, 51) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(153, 102, 51) ;
    --theme-border-color-mid : rgb(153 102 51 / 25%);
    --theme-border-color-low : rgb(153 102 51 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="wine"][data-base-theme="light"],
body[data-color-theme="553a48"][data-base-theme="light"]   {
        /*primary background color for nav*/
            --primary-bg : rgb(85, 58, 72)  ;
            --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
            --primary-bg-v2 : rgb(0 0 0 / 20%) ;
        
        
        /*secondary background color for dashbords*/
            --secondary-bg : rgb(85, 58, 72) ;
            --secondary-bg-v1 : rgb(85 58 72 / 10%) ;
            --secondary-bg-v2 : rgb(85 58 72 / 15%) ;
            --secondary-bg-v3 : rgb(85 58 72 / 50%) ;
            --secondary-bg-v4 : rgb(85 58 72 / 5%) ;/*hover for table*/
        
        
        /*content background color*/
            --primary-content-bg : rgb(255, 255, 255) ;
            --primary-content-bg-v1 : #f3f3f3 ;
            --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
            --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
            --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
            --primary-content-bg-v5 : rgb(250, 245, 247) ;/*leftpane background*/
        
            --secondary-content-bg : #f9f9f9 ;
        
        
        /*text color*/
            --font-color-white : rgb(255, 255, 255) ;
            --font-color-dark : rgb(0,0,0) ;
            --font-color-theme : rgb(102, 69, 86) ;
        
        
        /*border color*/
            --border-color-high : rgb(68 68 68);/*#444*/
            --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
            --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
        
            --theme-border-color-high : rgb(85, 58, 72) ;
            --theme-border-color-mid : rgb(85 58 72 / 25%);
            --theme-border-color-low : rgb(85 58 72 / 50%);
        
        /*tooltip*/
            --tooltip-bg : rgb(34, 34, 34);
}
body[data-color-theme="wine"][data-base-theme="dark"],
body[data-color-theme="553a48"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(85, 58, 72) ;
    --secondary-bg-v1: rgb(44, 32, 38);
    --secondary-bg-v2: rgb(85 58 72 / 15%);
    --secondary-bg-v3: rgb(85 58 72 / 50%);
    --secondary-bg-v4: rgb(85 58 72 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(102, 69, 86) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(85, 58, 72) ;
    --theme-border-color-mid : rgb(85 58 72 / 25%);
    --theme-border-color-low : rgb(85 58 72 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}


body[data-color-theme="darkgrey"][data-base-theme="light"],
body[data-color-theme="313949"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(49, 57, 73) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(49, 57, 73) ;
        --secondary-bg-v1 : rgb(49 57 73 / 10%) ;
        --secondary-bg-v2 : rgb(49 57 73 / 15%) ;
        --secondary-bg-v3 : rgb(49 57 73 / 50%) ;
        --secondary-bg-v4 : rgb(49 57 73 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(239, 241, 245) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(69, 83, 110) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(49, 57, 73) ;
        --theme-border-color-mid : rgb(49 57 73 / 25%);
        --theme-border-color-low : rgb(49 57 73 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}
body[data-color-theme="darkgrey"][data-base-theme="dark"],
body[data-color-theme="313949"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(49, 57, 73);
    --secondary-bg-v1: rgb(28, 32, 42);
    --secondary-bg-v2: rgb(49 57 73 / 15%);
    --secondary-bg-v3: rgb(49 57 73 / 50%);
    --secondary-bg-v4: rgb(49 57 73 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(69, 83, 110) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(49, 57, 73) ;
    --theme-border-color-mid : rgb(49 57 73 / 25%);
    --theme-border-color-low : rgb(49 57 73 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="orange"][data-base-theme="light"],
body[data-color-theme="d24143"][data-base-theme="light"]  {
    /*primary background color for nav*/
        --primary-bg : rgb(210, 65, 67) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(210, 65, 67) ;
        --secondary-bg-v1 : rgb(210 65 67 / 10%) ;
        --secondary-bg-v2 : rgb(210 65 67 / 15%) ;
        --secondary-bg-v3 : rgb(210 65 67 / 50%) ;
        --secondary-bg-v4 : rgb(210 65 67 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(255, 250, 250) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(210, 65, 67) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(210, 65, 67) ;
        --theme-border-color-mid : rgb(210 65 67 / 25%);
        --theme-border-color-low : rgb(210 65 67 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}
body[data-color-theme="orange"][data-base-theme="dark"],
body[data-color-theme="d24143"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(210, 65, 6);
    --secondary-bg-v1: rgb(46, 30, 24);
    --secondary-bg-v2: rgb(210 65 67 / 15%);
    --secondary-bg-v3: rgb(210 65 67 / 50%);
    --secondary-bg-v4: rgb(210 65 67 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(210, 65, 6) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(210, 65, 6) ;
    --theme-border-color-mid : rgb(210 65 67 / 25%);
    --theme-border-color-low : rgb(210 65 67 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="pink"][data-base-theme="light"],
body[data-color-theme="ea4c88"][data-base-theme="light"]  {
    /*primary background color for nav*/
        --primary-bg : rgb(234, 76, 136) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(234, 76, 136) ;
        --secondary-bg-v1 : rgb(234 76 136 / 10%) ;
        --secondary-bg-v2 : rgb(234 76 136 / 15%) ;
        --secondary-bg-v3 : rgb(234 76 136 / 50%) ;
        --secondary-bg-v4 : rgb(234 76 136 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(255, 250, 252) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(234, 76, 136) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(234, 76, 136) ;
        --theme-border-color-mid : rgb(234 76 136 / 25%);
        --theme-border-color-low : rgb(234 76 136 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}
body[data-color-theme="pink"][data-base-theme="dark"],
body[data-color-theme="ea4c88"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(234, 76, 136);
    --secondary-bg-v1: rgb(49, 28, 36);
    --secondary-bg-v2: rgb(234 76 136 / 15%);
    --secondary-bg-v3: rgb(234 76 136 / 50%);
    --secondary-bg-v4: rgb(234 76 136 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(234, 76, 136) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(234, 76, 136) ;
    --theme-border-color-mid : rgb(234 76 136 / 25%);
    --theme-border-color-low : rgb(234 76 136 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="turquoise"][data-base-theme="light"],
body[data-color-theme="37a5a5"][data-base-theme="light"]  {
    /*primary background color for nav*/
        --primary-bg : rgb(55, 165, 165) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(55, 165, 165) ;
        --secondary-bg-v1 : rgb(55 165 165 / 10%) ;
        --secondary-bg-v2 : rgb(55 165 165 / 15%) ;
        --secondary-bg-v3 : rgb(55 165 165 / 50%) ;
        --secondary-bg-v4 : rgb(55 165 165 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(239, 248, 248) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(55, 165, 165) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(55, 165, 165) ;
        --theme-border-color-mid : rgb(55 165 165 / 25%);
        --theme-border-color-low : rgb(55 165 165 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}
body[data-color-theme="turquoise"][data-base-theme="dark"],
body[data-color-theme="37a5a5"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(55, 165, 165);
    --secondary-bg-v1: rgb(25, 38, 40);
    --secondary-bg-v2: rgb(55 165 165 / 15%);
    --secondary-bg-v3: rgb(55 165 165 / 50%);
    --secondary-bg-v4: rgb(55 165 165 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(55, 165, 165) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(55, 165, 165) ;
    --theme-border-color-mid : rgb(55 165 165 / 25%);
    --theme-border-color-low : rgb(55 165 165 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}


body[data-color-theme="limegreen"][data-base-theme="light"],
body[data-color-theme="999900"][data-base-theme="light"]  {
    /*primary background color for nav*/
        --primary-bg : rgb(153, 153, 0) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(153, 153, 0) ;
        --secondary-bg-v1 : rgb(153 153 0 / 10%) ;
        --secondary-bg-v2 : rgb(153 153 0 / 15%) ;
        --secondary-bg-v3 : rgb(153 153 0 / 50%) ;
        --secondary-bg-v4 : rgb(153 153 0 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(255, 255, 251) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(153, 153, 0) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(153, 153, 0) ;
        --theme-border-color-mid : rgb(153 153 0 / 25%);
        --theme-border-color-low : rgb(153 153 0 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}
body[data-color-theme="limegreen"][data-base-theme="dark"],
body[data-color-theme="999900"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(53, 153, 0);
    --secondary-bg-v1: rgb(27, 41, 21);
    --secondary-bg-v2: rgb(53 153 0 / 15%);
    --secondary-bg-v3: rgb(53 153 0 / 50%);
    --secondary-bg-v4: rgb(53 153 0 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(53, 153, 0) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(53, 153, 0) ;
    --theme-border-color-mid : rgb(53 153 0 / 25%);
    --theme-border-color-low : rgb(53 153 0 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}


body[data-color-theme="coral"][data-base-theme="light"],
body[data-color-theme="de4f5d"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(222, 79, 93);
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(222, 79, 93);
        --secondary-bg-v1 : rgb(222 79 93 / 10%) ;
        --secondary-bg-v2 : rgb(222 79 93 / 15%) ;
        --secondary-bg-v3 : rgb(222 79 93 / 50%) ;
        --secondary-bg-v4 : rgb(222 79 93 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(255, 249, 249) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(222, 79, 93) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(222, 79, 93) ;
        --theme-border-color-mid : rgb(222 79 93 / 25%);
        --theme-border-color-low : rgb(222 79 93 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}
body[data-color-theme="coral"][data-base-theme="dark"],
body[data-color-theme="de4f5d"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(222, 79, 93);
    --secondary-bg-v1: rgb(54, 22, 25);
    --secondary-bg-v2: rgb(222 79 93 / 15%);
    --secondary-bg-v3: rgb(222 79 93 / 50%);
    --secondary-bg-v4: rgb(222 79 93 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(222, 79, 93) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(222, 79, 93) ;
    --theme-border-color-mid : rgb(222 79 93 / 25%);
    --theme-border-color-low : rgb(222 79 93 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="magenta"][data-base-theme="light"],
body[data-color-theme="993399"][data-base-theme="light"]  {
    /*primary background color for nav*/
        --primary-bg : rgb(153, 51, 153) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(153, 51, 153);
        --secondary-bg-v1 : rgb(153 51 153 / 10%) ;
        --secondary-bg-v2 : rgb(153 51 153 / 15%) ;
        --secondary-bg-v3 : rgb(153 51 153 / 50%) ;
        --secondary-bg-v4 : rgb(153 51 153 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(255, 250, 255) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(153, 51, 153) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(153, 51, 153) ;
        --theme-border-color-mid : rgb(153 51 153 / 25%);
        --theme-border-color-low : rgb(153 51 153 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}
body[data-color-theme="magenta"][data-base-theme="dark"],
body[data-color-theme="993399"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(153, 51, 153);
    --secondary-bg-v1: rgb(52, 21, 52);
    --secondary-bg-v2: rgb(153 51 153 / 15%);
    --secondary-bg-v3: rgb(153 51 153 / 50%);
    --secondary-bg-v4: rgb(153 51 153 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(153, 51, 153) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(153, 51, 153) ;
    --theme-border-color-mid : rgb(153 51 153 / 25%);
    --theme-border-color-low : rgb(153 51 153 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="blue"][data-base-theme="light"],
body[data-color-theme="366dc7"][data-base-theme="light"]  {
    /*primary background color for nav*/
        --primary-bg : rgb(54, 109, 199) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
     
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(54, 109, 199) ;
        --secondary-bg-v1 : rgb(54 109 199 / 10%) ;
        --secondary-bg-v2 : rgb(54 109 199 / 15%) ;
        --secondary-bg-v3 : rgb(54 109 199 / 50%) ;
        --secondary-bg-v4 : rgb(54 109 199 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(246, 250, 255) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(54, 109, 199) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(54, 109, 199) ;
        --theme-border-color-mid : rgb(54 109 199 / 25%);
        --theme-border-color-low : rgb(54 109 199 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}
body[data-color-theme="blue"][data-base-theme="dark"],
body[data-color-theme="366dc7"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(54, 109, 199);
    --secondary-bg-v1: rgb(16, 30, 60);
    --secondary-bg-v2: rgb(54 109 199 / 15%);
    --secondary-bg-v3: rgb(54 109 199 / 50%);
    --secondary-bg-v4: rgb(54 109 199 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(54, 109, 199) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(54, 109, 199) ;
    --theme-border-color-mid : rgb(54 109 199 / 25%);
    --theme-border-color-low : rgb(54 109 199 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}


body[data-color-theme="lightblue"][data-base-theme="light"],
body[data-color-theme="018ee0"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(1, 142, 224) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(1, 142, 224) ;
        --secondary-bg-v1 : rgb(1 142 224 / 10%) ;
        --secondary-bg-v2 : rgb(1 142 224 / 15%) ;
        --secondary-bg-v3 : rgb(1 142 224 / 50%) ;
        --secondary-bg-v4 : rgb(1 142 224 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(244, 251, 255) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(1, 142, 224) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(1, 142, 224) ;
        --theme-border-color-mid : rgb(1 142 224 / 25%);
        --theme-border-color-low : rgb(1 142 224 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}
body[data-color-theme="lightblue"][data-base-theme="dark"],
body[data-color-theme="018ee0"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(1, 142, 224);
    --secondary-bg-v1: rgb(8, 36, 56);
    --secondary-bg-v2: rgb(1 142 224 / 15%);
    --secondary-bg-v3: rgb(1 142 224 / 50%);
    --secondary-bg-v4: rgb(1 142 224 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(1, 142, 224) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(1, 142, 224) ;
    --theme-border-color-mid : rgb(1 142 224 / 25%);
    --theme-border-color-low : rgb(1 142 224 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}

body[data-color-theme="seablue"][data-base-theme="light"],
body[data-color-theme="0099cc"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(0, 153, 204) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(0, 153, 204) ;
        --secondary-bg-v1 : rgb(0 153 204 / 10%) ;
        --secondary-bg-v2 : rgb(0 153 204 / 15%) ;
        --secondary-bg-v3 : rgb(0 153 204 / 50%) ;
        --secondary-bg-v4 : rgb(0 153 204 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(247, 253, 255) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(0, 153, 204) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(0, 153, 204) ;
        --theme-border-color-mid : rgb(0 153 204 / 25%);
        --theme-border-color-low : rgb(0 153 204 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
}
body[data-color-theme="seablue"][data-base-theme="dark"],
body[data-color-theme="0099cc"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(0, 153, 204);
    --secondary-bg-v1: rgb(21, 37, 48);
    --secondary-bg-v2: rgb(0 153 204 / 15%);
    --secondary-bg-v3: rgb(0 153 204 / 50%);
    --secondary-bg-v4: rgb(0 153 204 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(0, 153, 204) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(0, 153, 204) ;
    --theme-border-color-mid : rgb(0 153 204 / 25%);
    --theme-border-color-low : rgb(0 153 204 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);
}




/* CRM New UI Themes */


body[data-color-theme="default-blue"][data-base-theme="light"],
body[data-color-theme="121d33"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(18, 29, 51) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(84, 100, 242) ;
        --secondary-bg-v1 : rgb(84 100 242 / 10%) ;
        --secondary-bg-v2 : rgb(84 100 242 / 15%) ;
        --secondary-bg-v3 : rgb(84 100 242 / 50%) ;
        --secondary-bg-v4 : rgb(84 100 242 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(245, 248, 252) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(46, 70, 117) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(84, 100, 242) ;
        --theme-border-color-mid : rgb(84 100 242 / 25%);
        --theme-border-color-low : rgb(84 100 242 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
        
    /*selected tab*/
    --selected-bg :   rgb(237, 240, 255);
    --selected-text : rgb(84, 100, 242);
}
body[data-color-theme="default-blue"][data-base-theme="dark"],
body[data-color-theme="121d33"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(84, 100, 242);
    --secondary-bg-v1: rgb(47, 54, 122);
    --secondary-bg-v2: rgb(84 100 242 / 15%);
    --secondary-bg-v3: rgb(84 100 242 / 50%);
    --secondary-bg-v4: rgb(84 100 242 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(84, 100, 242) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(84, 100, 242) ;
    --theme-border-color-mid : rgb(84 100 242 / 25%);
    --theme-border-color-low : rgb(84 100 242 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :   rgb(223, 245, 245);
    --selected-text : rgb(84, 100, 242);
}


body[data-color-theme="teal-green"][data-base-theme="light"],
body[data-color-theme="095169"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(9, 81, 105) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(6, 148, 148) ;
        --secondary-bg-v1 : rgb(6 148 148 / 10%) ;
        --secondary-bg-v2 : rgb(6 148 148 / 15%) ;
        --secondary-bg-v3 : rgb(6 148 148 / 50%) ;
        --secondary-bg-v4 : rgb(6 148 148 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(248, 253, 253) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(6, 148, 148) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(6, 148, 148) ;
        --theme-border-color-mid : rgb(6 148 148 / 25%);
        --theme-border-color-low : rgb(6 148 148 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
    
    /*selected tab*/
    --selected-bg :   rgb(223, 245, 245);
    --selected-text : rgb(6, 148, 147);
}
body[data-color-theme="teal-green"][data-base-theme="dark"],
body[data-color-theme="095169"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(6, 148, 148);
    --secondary-bg-v1: rgb(10, 40, 40);
    --secondary-bg-v2: rgb(6 148 148 / 15%);
    --secondary-bg-v3: rgb(6 148 148 / 50%);
    --secondary-bg-v4: rgb(6 148 148 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(6, 148, 148) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(6, 148, 148) ;
    --theme-border-color-mid : rgb(6 148 148 / 25%);
    --theme-border-color-low : rgb(6 148 148 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :   rgb(36, 36, 36);
    --selected-text : rgb(6, 148, 147);
}


body[data-color-theme="olive-green"][data-base-theme="light"],
body[data-color-theme="2d4724"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(41, 71, 36) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(68, 126, 46) ;
        --secondary-bg-v1 : rgb(68 126 46 / 10%) ;
        --secondary-bg-v2 : rgb(68 126 46 / 15%) ;
        --secondary-bg-v3 : rgb(68 126 46 / 50%) ;
        --secondary-bg-v4 : rgb(68 126 46 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(250, 253, 248) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(68, 126, 46) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(68, 126, 46) ;
        --theme-border-color-mid : rgb(68 126 46 / 25%);
        --theme-border-color-low : rgb(68 126 46 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :  rgb(238, 245, 235);
    --selected-text : rgb(44, 164, 1) ;
}
body[data-color-theme="olive-green"][data-base-theme="dark"],
body[data-color-theme="2d4724"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(68, 126, 46);
    --secondary-bg-v1: rgb(38, 40, 45);
    --secondary-bg-v2: rgb(68 126 46 / 15%);
    --secondary-bg-v3: rgb(68 126 46 / 50%);
    --secondary-bg-v4: rgb(68 126 46 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(68, 126, 46) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(68, 126, 46) ;
    --theme-border-color-mid : rgb(68 126 46 / 25%);
    --theme-border-color-low : rgb(68 126 46 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :  rgb(36, 36, 36);
    --selected-text : rgb(44, 164, 1) ;
}

body[data-color-theme="luminescent-green"][data-base-theme="light"],
body[data-color-theme="3e5726"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(62, 87, 38) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(127, 147, 15) ;
        --secondary-bg-v1 : rgb(127 147 15 / 10%) ;
        --secondary-bg-v2 : rgb(127 147 15 / 15%) ;
        --secondary-bg-v3 : rgb(127 147 15 / 50%) ;
        --secondary-bg-v4 : rgb(127 147 15 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(254, 255, 249) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(127, 147, 15) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(127, 147, 15) ;
        --theme-border-color-mid : rgb(127 147 15 / 25%);
        --theme-border-color-low : rgb(127 147 15 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :  rgb(234, 240, 217);
    --selected-text : rgb(108, 147, 0) ;
}
body[data-color-theme="luminescent-green"][data-base-theme="dark"],
body[data-color-theme="3e5726"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(127, 147, 15);
    --secondary-bg-v1: rgb(36, 38, 16);
    --secondary-bg-v2: rgb(127 147 15 / 15%);
    --secondary-bg-v3: rgb(127 147 15 / 50%);
    --secondary-bg-v4: rgb(127 147 15 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(127, 147, 15) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(127, 147, 15) ;
    --theme-border-color-mid : rgb(127 147 15 / 25%);
    --theme-border-color-low : rgb(127 147 15 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :  rgb(36, 36, 36);
    --selected-text : rgb(108, 147, 0) ;
}


body[data-color-theme="dark-gold"][data-base-theme="light"],
body[data-color-theme="6c5518"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(108, 86, 24) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(183, 131, 0) ;
        --secondary-bg-v1 : rgb(183 131 0 / 10%) ;
        --secondary-bg-v2 : rgb(183 131 0 / 15%) ;
        --secondary-bg-v3 : rgb(183 131 0 / 50%) ;
        --secondary-bg-v4 : rgb(183 131 0 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(255, 253, 249) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(183, 131, 0) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(183, 131, 0) ;
        --theme-border-color-mid : rgb(183 131 0 / 25%);
        --theme-border-color-low : rgb(183 131 0 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
    
    /*selected tab*/
    --selected-bg :  rgb(240, 234, 220);
    --selected-text : rgb(188, 135, 0) ;
}
body[data-color-theme="dark-gold"][data-base-theme="dark"],
body[data-color-theme="6c5518"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(183, 131, 0);
    --secondary-bg-v1: rgb(31, 34, 18);
    --secondary-bg-v2: rgb(183 131 0 / 15%);
    --secondary-bg-v3: rgb(183 131 0 / 50%);
    --secondary-bg-v4: rgb(183 131 0 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(183, 131, 0) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(183, 131, 0) ;
    --theme-border-color-mid : rgb(183 131 0 / 25%);
    --theme-border-color-low : rgb(183 131 0 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :  rgb(36, 36, 36);
    --selected-text : rgb(188, 135, 0) ;
}


body[data-color-theme="spicy-orange"][data-base-theme="light"],
body[data-color-theme="623222"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(98, 50, 34) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(193, 75, 35) ;
        --secondary-bg-v1 : rgb(193 75 35 / 10%) ;
        --secondary-bg-v2 : rgb(193 75 35 / 15%) ;
        --secondary-bg-v3 : rgb(193 75 35 / 50%) ;
        --secondary-bg-v4 : rgb(193 75 35 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(255, 250, 250) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(193, 75, 35) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(193, 75, 35) ;
        --theme-border-color-mid : rgb(193 75 35 / 25%);
        --theme-border-color-low : rgb(193 75 35 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :  rgb(255, 239, 225);
    --selected-text : rgb(223, 80, 0) ;
}
body[data-color-theme="spicy-orange"][data-base-theme="dark"],
body[data-color-theme="623222"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(193, 75, 35);
    --secondary-bg-v1: rgb(47, 29, 24);
    --secondary-bg-v2: rgb(193 75 35 / 15%);
    --secondary-bg-v3: rgb(193 75 35 / 50%);
    --secondary-bg-v4: rgb(193 75 35 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(193, 75, 35) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(193, 75, 35) ;
    --theme-border-color-mid : rgb(193 75 35 / 25%);
    --theme-border-color-low : rgb(193 75 35 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :  rgb(36, 36, 36);
    --selected-text : rgb(223, 80, 0) ;
}


body[data-color-theme="crimson"][data-base-theme="light"],
body[data-color-theme="5f222b"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(95, 34, 43) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(169, 38, 58) ;
        --secondary-bg-v1 : rgb(169 38 58 / 10%) ;
        --secondary-bg-v2 : rgb(169 38 58 / 15%) ;
        --secondary-bg-v3 : rgb(169 38 58 / 50%) ;
        --secondary-bg-v4 : rgb(169 38 58 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(255, 250, 250) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(169, 38, 58) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(169, 38, 58) ;
        --theme-border-color-mid : rgb(169 38 58 / 25%);
        --theme-border-color-low : rgb(169 38 58 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :  rgb(255, 236, 239);
    --selected-text : rgb(220, 43, 75);
}
body[data-color-theme="crimson"][data-base-theme="dark"],
body[data-color-theme="5f222b"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(169, 38, 58);
    --secondary-bg-v1: rgb(48, 30, 30);
    --secondary-bg-v2: rgb(169 38 58 / 15%);
    --secondary-bg-v3: rgb(169 38 58 / 50%);
    --secondary-bg-v4: rgb(169 38 58 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(169, 38, 58) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(169, 38, 58) ;
    --theme-border-color-mid : rgb(169 38 58 / 25%);
    --theme-border-color-low : rgb(169 38 58 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :  rgb(36, 36, 36);
    --selected-text : rgb(220, 43, 75);
}


body[data-color-theme="dark-raspberry"][data-base-theme="light"],
body[data-color-theme="5b1a3f"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(91, 26, 63) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(141, 38, 96) ;
        --secondary-bg-v1 : rgb(141 38 96 / 10%) ;
        --secondary-bg-v2 : rgb(141 38 96 / 15%) ;
        --secondary-bg-v3 : rgb(141 38 96 / 50%) ;
        --secondary-bg-v4 : rgb(141 38 96 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(255, 249, 252) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(141, 38, 96) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(141, 38, 96) ;
        --theme-border-color-mid : rgb(141 38 96 / 25%);
        --theme-border-color-low : rgb(141 38 96 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :  rgb(255, 232, 245); 
    --selected-text : rgb(141, 38, 96)
}
body[data-color-theme="dark-raspberry"][data-base-theme="dark"],
body[data-color-theme="5b1a3f"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(141, 38, 96);
    --secondary-bg-v1: rgb(44, 30, 38);
    --secondary-bg-v2: rgb(141 38 96 / 15%);
    --secondary-bg-v3: rgb(141 38 96 / 50%);
    --secondary-bg-v4: rgb(141 38 96 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29) ;
    --primary-content-bg-v1: rgb(45 45 45);
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(141, 38, 96) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(141, 38, 96) ;
    --theme-border-color-mid : rgb(141 38 96 / 25%);
    --theme-border-color-low : rgb(141 38 96 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :  rgb(36, 36, 36);
    --selected-text : rgb(141, 38, 96)
}


body[data-color-theme="grape"][data-base-theme="light"],
body[data-color-theme="36193c"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(54, 25, 60) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(83, 46, 89) ;
        --secondary-bg-v1 : rgb(83 46 89 / 10%) ;
        --secondary-bg-v2 : rgb(83 46 89 / 15%) ;
        --secondary-bg-v3 : rgb(83 46 89 / 50%) ;
        --secondary-bg-v4 : rgb(83 46 89 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(253, 247, 254) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(83, 46, 89) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(83, 46, 89) ;
        --theme-border-color-mid : rgb(83 46 89 / 25%);
        --theme-border-color-low : rgb(83 46 89 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :  rgb(243, 236, 255);
    --selected-text : rgb(153, 13, 180) ;
}
body[data-color-theme="grape"][data-base-theme="dark"],
body[data-color-theme="36193c"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(83, 46, 89);
    --secondary-bg-v1: rgb(40, 32, 41);
    --secondary-bg-v2: rgb(83 46 89 / 15%);
    --secondary-bg-v3: rgb(83 46 89 / 50%);
    --secondary-bg-v4: rgb(83 46 89 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29);
    --primary-content-bg-v1: rgb(45 45 45); 
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(83, 46, 89) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(83, 46, 89) ;
    --theme-border-color-mid : rgb(83 46 89 / 25%);
    --theme-border-color-low : rgb(83 46 89 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg :  rgb(36, 36, 36);
    --selected-text : rgb(153, 13, 180) ;
}

body[data-color-theme="dark-slate-blue"][data-base-theme="light"],
body[data-color-theme="2b1a48"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(43, 26, 72) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(77, 51, 121) ;
        --secondary-bg-v1 : rgb(77 51 121 / 10%) ;
        --secondary-bg-v2 : rgb(77 51 121 / 15%) ;
        --secondary-bg-v3 : rgb(77 51 121 / 50%) ;
        --secondary-bg-v4 : rgb(77 51 121 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(250, 246, 255) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(77, 51, 121) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(77, 51, 121) ;
        --theme-border-color-mid : rgb(77 51 121 / 25%);
        --theme-border-color-low : rgb(77 51 121 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
    
    /*selected tab*/
    --selected-bg : rgb(243, 236, 255);
    --selected-text : rgb(103, 30, 228);
}
body[data-color-theme="dark-slate-blue"][data-base-theme="dark"],
body[data-color-theme="2b1a48"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(77, 51, 121);
    --secondary-bg-v1: rgb(37, 31, 46);
    --secondary-bg-v2: rgb(77 51 121 / 15%);
    --secondary-bg-v3: rgb(77 51 121 / 50%);
    --secondary-bg-v4: rgb(77 51 121 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29);
    --primary-content-bg-v1: rgb(45 45 45); 
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(77, 51, 121) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(77, 51, 121) ;
    --theme-border-color-mid : rgb(77 51 121 / 25%);
    --theme-border-color-low : rgb(77 51 121 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg : rgb(36, 36, 36);
    --selected-text : rgb(103, 30, 228);
}


body[data-color-theme="dazzling-blue"][data-base-theme="light"],
body[data-color-theme="1c2a5e"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(28, 42, 94) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(56, 78, 156) ;
        --secondary-bg-v1 : rgb(56 78 156 / 10%) ;
        --secondary-bg-v2 : rgb(56 78 156 / 15%) ;
        --secondary-bg-v3 : rgb(56 78 156 / 50%) ;
        --secondary-bg-v4 : rgb(56 78 156 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(245, 247, 254) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(56, 78, 156) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(56, 78, 156) ;
        --theme-border-color-mid : rgb(56 78 156 / 25%);
        --theme-border-color-low : rgb(56 78 156 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
    
    /*selected tab*/
    --selected-bg : rgb(238, 242, 255);
    --selected-text : rgb(33, 69, 191);
}
body[data-color-theme="dazzling-blue"][data-base-theme="dark"],
body[data-color-theme="1c2a5e"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(56, 78, 156);
    --secondary-bg-v1: rgb(30, 34, 49);
    --secondary-bg-v2: rgb(56 78 156 / 15%);
    --secondary-bg-v3: rgb(56 78 156 / 50%);
    --secondary-bg-v4: rgb(56 78 156 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29);
    --primary-content-bg-v1: rgb(45 45 45); 
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(56, 78, 156) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(56, 78, 156) ;
    --theme-border-color-mid : rgb(56 78 156 / 25%);
    --theme-border-color-low : rgb(56 78 156 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg : rgb(36, 36, 36);
    --selected-text : rgb(33, 69, 191);
}


body[data-color-theme="persian-blue"][data-base-theme="light"],
body[data-color-theme="154054"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(21, 64, 84) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(1, 108, 147) ;
        --secondary-bg-v1 : rgb(1 108 147 / 10%) ;
        --secondary-bg-v2 : rgb(1 108 147 / 15%) ;
        --secondary-bg-v3 : rgb(1 108 147 / 50%) ;
        --secondary-bg-v4 : rgb(1 108 147 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(242=9, 254, 255) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(1, 108, 147) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(1, 108, 147) ;
        --theme-border-color-mid : rgb(1 108 147 / 25%);
        --theme-border-color-low : rgb(1 108 147 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);
    
    /*selected tab*/
    --selected-bg : rgb(228, 247, 255);
    --selected-text :rgb(0, 141, 222);
}
body[data-color-theme="persian-blue"][data-base-theme="dark"],
body[data-color-theme="154054"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(1, 108, 147);
    --secondary-bg-v1: rgb(24, 34, 42);
    --secondary-bg-v2: rgb(1 108 147 / 15%);
    --secondary-bg-v3: rgb(1 108 147 / 50%);
    --secondary-bg-v4: rgb(1 108 147 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29);
    --primary-content-bg-v1: rgb(45 45 45); 
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(1, 108, 147) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(1, 108, 147) ;
    --theme-border-color-mid : rgb(1 108 147 / 25%);
    --theme-border-color-low : rgb(1 108 147 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg : rgb(36, 36, 36);
    --selected-text :rgb(0, 141, 222);
}


body[data-color-theme="royal-brown"][data-base-theme="light"],
body[data-color-theme="3a3028"][data-base-theme="light"] {
    /*primary background color for nav*/
        --primary-bg : rgb(58, 48, 40) ;
        --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
        --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
        --secondary-bg : rgb(89, 66, 49) ;
        --secondary-bg-v1 : rgb(89 66 49 / 10%) ;
        --secondary-bg-v2 : rgb(89 66 49 / 15%) ;
        --secondary-bg-v3 : rgb(89 66 49 / 50%) ;
        --secondary-bg-v4 : rgb(89 66 49 / 5%) ;/*hover for table*/
    
    
    /*content background color*/
        --primary-content-bg : rgb(255, 255, 255) ;
        --primary-content-bg-v1 : #f3f3f3 ;
        --primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
        --primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
        --primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
        --primary-content-bg-v5 : rgb(255, 252, 249) ;/*leftpane background*/
    
        --secondary-content-bg : #f9f9f9 ;
    
    
    /*text color*/
        --font-color-white : rgb(255, 255, 255) ;
        --font-color-dark : rgb(0,0,0) ;
        --font-color-theme : rgb(89, 66, 49) ;
    
    
    /*border color*/
        --border-color-high : rgb(68 68 68);/*#444*/
        --border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
        --border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
    
        --theme-border-color-high : rgb(89, 66, 49) ;
        --theme-border-color-mid : rgb(89 66 49 / 25%);
        --theme-border-color-low : rgb(89 66 49 / 50%);
    
    /*tooltip*/
        --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg : rgb(249, 240, 234);
    --selected-text : rgb(150, 81, 29);

}
body[data-color-theme="royal-brown"][data-base-theme="dark"],
body[data-color-theme="3a3028"][data-base-theme="dark"] {
    /*primary background color for nav*/
    --primary-bg: rgb(36, 36, 36);
    --primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
    --primary-bg-v2 : rgb(0 0 0 / 20%) ;
    
    
    /*secondary background color for dashbords*/
    --secondary-bg: rgb(89, 66, 49);
    --secondary-bg-v1: rgb(36, 34, 32);
    --secondary-bg-v2: rgb(89 66 49 / 15%);
    --secondary-bg-v3: rgb(89 66 49 / 50%);
    --secondary-bg-v4: rgb(89 66 49 / 10%);/*hover for table*/
    
    
    /*content background color*/
    --primary-content-bg : rgb(29, 29, 29);
    --primary-content-bg-v1: rgb(45 45 45); 
    --primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
    --primary-content-bg-v3: rgb(50 50 50);
    --primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
    --primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
    
    --secondary-content-bg : rgb(18, 18, 18) ; 
    
    /*text color*/
    --font-color-white : rgb(246, 246, 246) ;
    --font-color-dark : rgb(238, 238, 238) ;
    --font-color-theme : rgb(89, 66, 49) ;
    
    
    /*border color*/
    --border-color-high : rgb(68 68 68);/*#444*/
    --border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
    --border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
    
    --theme-border-color-high : rgb(89, 66, 49) ;
    --theme-border-color-mid : rgb(89 66 49 / 25%);
    --theme-border-color-low : rgb(89 66 49 / 50%);

    /*tooltip*/
    --tooltip-bg : rgb(34, 34, 34);

    /*selected tab*/
    --selected-bg : rgb(36, 36, 36);
    --selected-text : rgb(150, 81, 29);
}


body[data-color-theme="0075b3"][data-base-theme="light"],
body[data-color-theme="hrjblue"][data-base-theme="light"] {
/*primary background color for nav*/
--primary-bg : rgb(0 48 74) ;
--primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
--primary-bg-v2 : rgb(0 0 0 / 20%) ;
/*secondary background color for dashbords*/
--secondary-bg : rgb(0 117 179) ;
--secondary-bg-v1 : rgb(0 117 179 / 10%) ;
--secondary-bg-v2 : rgb(0 117 179 / 15%) ;
--secondary-bg-v3 : rgb(0 117 179 / 50%) ;
--secondary-bg-v4 : rgb(0 117 179 / 5%) ;/*hover for table*/
/*content background color*/
--primary-content-bg : rgb(255, 255, 255) ;
--primary-content-bg-v1 : #f3f3f3 ;
--primary-content-bg-v2 : rgb(237, 237, 237, 0.5) ;
--primary-content-bg-v3 : rgba(237, 237, 237, 0.8) ;
--primary-content-bg-v4 : rgb(233, 233, 233) ;/*#e9e9e9*//*for table cell hover*/
--primary-content-bg-v5 : rgb(246 251 254) ;/*leftpane background*/
--secondary-content-bg : #f9f9f9 ;
/*text color*/
--font-color-white : rgb(255, 255, 255) ;
--font-color-dark : rgb(0,0,0) ;
--font-color-theme : rgb(0 117 179) ;
/*border color*/
--border-color-high : rgb(68 68 68);/*#444*/
--border-color-mid : rgb(68 68 68 / 10%);/*alternative to #eee*/
--border-color-low : rgb(68 68 68 / 5%);/*alternative to #f3f3f3*/
--theme-border-color-high : rgb(0 117 179) ;
--theme-border-color-mid : rgb(0 117 179 / 25%);
--theme-border-color-low : rgb(0 117 179 / 50%);
/*tooltip*/
--tooltip-bg : rgb(34, 34, 34);
}
 
body[data-color-theme="0075b3"][data-base-theme="dark"],
body[data-color-theme="hrjblue"][data-base-theme="dark"] {
/*primary background color for nav*/
--primary-bg: rgb(36, 36, 36);
--primary-bg-v1 : rgb(255, 255, 255, 0.1) ;
--primary-bg-v2 : rgb(0 0 0 / 20%) ;
/*secondary background color for dashbords*/
--secondary-bg: rgb(0 117 179);
--secondary-bg-v1 : rgb(0 117 179 / 10%) ;
--secondary-bg-v2 : rgb(0 117 179 / 15%) ;
--secondary-bg-v3 : rgb(0 117 179 / 50%) ;
--secondary-bg-v4 : rgb(0 117 179 / 5%) ;/*hover for table*/
/*content background color*/
--primary-content-bg : rgb(29, 29, 29) ;
--primary-content-bg-v1: rgb(45 45 45);
--primary-content-bg-v2 : rgba(46, 46, 46, 0.7) ;
--primary-content-bg-v3: rgb(50 50 50);
--primary-content-bg-v4: rgb(55 55 55);/*#e9e9e9*//*for table cell hover*/
--primary-content-bg-v5: rgb(34 34 34);/*leftpane background*/
--secondary-content-bg : rgb(18, 18, 18) ;
/*text color*/
--font-color-white : rgb(246, 246, 246) ;
--font-color-dark : rgb(238, 238, 238) ;
--font-color-theme : rgb(0 117 179) ;
/*border color*/
--border-color-high : rgb(68 68 68);/*#444*/
--border-color-mid: rgb(52, 52, 52);/*alternative to #eee*/
--border-color-low : rgb(46, 46, 46);/*alternative to #f3f3f3*/
--theme-border-color-high : rgb(0 117 179) ;
--theme-border-color-mid : rgb(0 117 179 / 25%);
--theme-border-color-low : rgb(0 117 179 / 50%);
 
/*tooltip*/
--tooltip-bg : rgb(34, 34, 34);
}/*$Id$*/

body{
    /* font size */

    --font-xxsmall: 0.55vw;
    --font-xsmall: 0.65vw;


    --font-small: 0.75vw;
    --font-normal: 0.8vw;
    --font-medium: 0.85vw;


    --font-large : 0.95vw;
    --font-larger : 1.05vw;
    --font-xlarge: 1.25vw;
    --font-xxlarge: 1.5vw;
    --font-xxxlarge : 2vw;
    --font-xxxxxlarge : 2.5vw;
    --font-5xlarge : 5vw;
    --font-countdownText:7vw;
    --font-guideDefaultText:11pt;
    /* font family */
    --default-font-family: 'Puvi';
    --font-family-material-icons: 'Material Icons';


    /* font weight */
    --font-weight-normal:normal;
    --font-weight-medium:600;
    --font-weight-bold:bold;


    /* leftpaneroot */
    --leftpane-width:26.5vw;
}


body[data-type='px']{
    /* font size */

    --font-xxsmall: 9px;
    --font-xsmall: 10px;

    
    --font-small: 11px;
    --font-normal: 12px;
    --font-medium : 14px;


    --font-large : 17px;
    --font-larger : 18.5px;
    --font-xlarge: 20px;
    --font-xxlarge: 25px;
    --font-xxxlarge : 37px;
    --font-xxxxxlarge : 45px;
    --font-countdownText: 100px;


    /* font family */
    --default-font-family: 'Puvi';
    --font-family-material-icons: 'Material Icons';


    /* font weight */
    --font-weight-normal:normal;
    --font-weight-medium:600;
    --font-weight-bold:bold;

    /* leftpaneroot */
    --leftpane-width:410px;
}/*$Id$*/
.guideDocView_root{
    width: 100%;
    height: 100%;
    position: relative;
}  
.guideDocView_root > #layoutContainer{
    width: 100%;
    height: 100%;
}/* $Id$ */
.toolbar_root {
    letter-spacing: 0.035em;
    width: 100%;
    height: 3vw;
    background: rgb(7, 56, 93);
    display: flex;
    align-items: center;
    padding: 0 1vw;
    box-shadow: 0px -2px 9px 0 #00000024;
    position: relative;
}


.toolbar_root>.dapHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    z-index: 999;
    font-size: 0.8vw;
    width: 100%;
    background: #07385d;
    height: 3vw;
}


.dapHeader_logo {
    height: 1.75vw;
    font-size: 0.8vw;
}


.dapHeader_title {
    font-size: 0.7vw;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.25em;
}


.dapHeader_subtext {
    font-size: 0.65vw;
    color: #d4d4d4;
}


.dapHeader_text {
    font-weight: 600;
    font-size: 0.75vw;
    color: #fff;
}

.toolbar_root>#autoplay{
    display: flex;
    font-size: 0.7vw;
    color: #ffffffdb;
    white-space: nowrap;
    align-items: center;
    gap: 1em;
    margin-right: 2vw;
}
.toolbar_root>#autoplay>#togglecontainer {
    width: 2.75vw;
    height: 1.5vw;
    border-radius: 2vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 0.1vw;
    position: relative;
    cursor: pointer;
    width: 2.5vw;
    height: 1.35vw;
    display: flex;
    background: #ffffff24;
    /* margin-right: 1vw; */
    border: 1px solid #ffffff29;
    border-radius: 2vw;
}
 

.toolbar_root>#autoplay>#togglecontainer>#button {
    background: #ffffff70;
    width: 1vw;
    height: 1vw;
    border-radius: 2vw;
    position: absolute;
    left: 5%;
    transition: 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.toolbar_root>#autoplay>#togglecontainer>#button[mode="true"] {
    left: 52%;
    background: #ffffffc9;
}

.toolbar_root>#view-container {
    display: flex;
    align-items: center;
    color: #fff;
    height: 2vw;
    border-radius: 0.5vw;
    background-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}


.toolbar_root>#view-container>.icon-container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 1vw;
    position: relative;
    cursor: pointer;
}


.toolbar_root>#view-container>.icon-container:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
}


.toolbar_root>#view-container>.icon-container>.view-icon {
    font-size: 1.2vw;
    width: 1.2vw;
    height: 1.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.65);
    transition: 0.25s ease-in-out;
    cursor: pointer;
}


.toolbar_root>#view-container>.icon-container>.view-icon:hover {
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-0.20vw);
}


.toolbar_root>#view-container>.icon-container>.view-icon.active {
    background-color: rgba(255, 255, 255, 0.20);
    border-radius: 0.4vw;
    padding: 0.8vw 0.9vw;
    transform: translateY(0);
}


.toolbar_root.full-view {
    display: none;
}
/*$Id$*/
.guideLayout_root{}
.guideLayout_root > #stepWrapper{
    width: 100%;
    height: 100%;
    overflow: auto;
}
.guideLayout_root > #stepWrapper >.webbanner_root{
    position: relative !important;
}
.guideLayout_root[data-version="1"] > #stepWrapper > #modalLayout{
    margin-left: auto !important;
    margin-right: auto !important;
}
.guideLayout_root[data-version="1"] > #stepWrapper  #image_wrapper{
    height:627px !important;
}
.guideLayout_root[data-version="1"] > #stepWrapper  #image_wrapper img{
    max-height:100% !important;
}
.guideLayout_root[data-version="1"]  > #stepWrapper .ui-rte-editor-div{
    font-size: 10pt !important;
}
.guideLayout_root[data-version="1"] > #stepWrapper >#modalLayout #frame-parent-container > #row-container:first-child > .row-container-child > .row-child:first-child > #textbuilder > #previewcontentdiv{
    padding-left:0px !important;
    padding-right:0px !important;
}
.guideLayout_root  .ui-rte-editor-div{
    background: transparent;
    padding: 0px;
    line-height: 1;
    user-select: text;
}
.guideLayout_root>#frame-parent-container>#row-container>.row-container-child>.row-child:first-child>div:first-child {
    align-items: flex-start !important;
}
.guideLayout_root > #stepWrapper >#modalLayout #frame-parent-container > #row-container > .row-container-child > .row-child{
    min-width:0.84em;
}
#guideLayout_root_wrapper > #header {
    display: flex;
    flex-direction: row;
    align-items: end;
    gap: 0.5em;
    z-index: 999;
    font-size: 0.8vw;
    width: 100%;
    padding: 0.7em 1.25em;
    background: #07385d;
    height: 3vw;
}
#guideLayout_root_wrapper > #header > img {
    height: 2vw;
    font-size: var(--font-normal);
}

#guideLayout_root_wrapper > #header > #title {
    font-size: 0.7vw;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.25em;
}

#guideLayout_root_wrapper > #header > #title > #text {
    font-weight: 600;
    font-size: 0.75vw;
    color: #fff;
}

#guideLayout_root_wrapper > #header >#title > #subtext {
    font-size: 0.65vw;
    color: #d4d4d4;
}

#guideLayout_root_wrapper {
    width: 100%;
    height: 100%;
}
.guideLayout_root > .manual-scrollbar {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: absolute;
    top: 0;
    right: 0;
}

.guideLayout_root > .manual-scrollbar::before {
    content: '';
    width: 0.5vw;
    border-radius: 0.5em;
    background: #00000014;
    align-self: stretch;
}

.guideLayout_root > .manual-scrollbar>.scroll-thumb {
    position: absolute;
    width: 1vw;
    height: 3.5em;
    background: linear-gradient(180deg, #3a4f8a, #1c3a70);
    border-radius: .5vw;
    cursor: pointer;
    left: 100%;
    transition: .3s ease-in-out;
}

.guideLayout_root> .manual-scrollbar>.scroll-thumb>.thumb-page-indicator {
    position: absolute;
    right: 120%;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #3a4f8a, #1c3a70);
    color: #ffffff;
    padding: 0.5em 0.75em;
    border-radius: 0.5em;
    font-size: 0.75vw;
    font-weight: 600;
    white-space: nowrap;
}/* $Id$ */
.guideSlider_root {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.guideSlider_root.fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 100000 !important;
    background: #fff;
    overflow: hidden !important;
}

.guideSlider_root > .viewerbody_root {
    width: 100%;
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.guideSlider_root > .viewerbody_root.slide-view {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

.guideSlider_root #stepWrapper {
    overflow: auto !important;
}


.guideSlider_root > .viewerbody_root.slide-view > .slide-wrapper,
.guideSlider_root .viewerbody_root.fullscreen-container > .fullscreen-slide-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.guideSlider_root > .viewerbody_root.slide-view .slide-content,
.guideSlider_root .viewerbody_root.fullscreen-container .slide-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    transition: transform 0.35s ease;
}

.guideSlider_root.auto-transition .slide-content {
    transition: none !important;
}

.guideSlider_root > .viewerbody_root.slide-view .slide-content > .slide-page-item,
.guideSlider_root .viewerbody_root.fullscreen-container .slide-content > .fullscreen-page-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.guideSlider_root .slide-content > .slide-page-item .guideLayout_root,
.guideSlider_root .slide-content > .fullscreen-page-item .guideLayout_root {
    position: relative !important;
}

.guideSlider_root .arrow-btn {
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
    background: rgb(7 56 93 / 75%);
    color: #ffffff;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    font-size: 1vw;
    flex-shrink: 0;
    z-index: 100005;
}

.guideSlider_root .arrow-btn:hover {
    background: rgb(7, 56, 93);
}

.guideSlider_root > .viewerbody_root.slide-view,
.guideSlider_root .viewerbody_root.fullscreen-container {
    position: relative;
}

.guideSlider_root > .viewerbody_root.slide-view .arrow-btn,
.guideSlider_root .viewerbody_root.fullscreen-container .arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.guideSlider_root > .viewerbody_root.slide-view .left-arrow {
    inset-inline-start: 4em;
}

.guideSlider_root > .viewerbody_root.slide-view .right-arrow {
    inset-inline-end: 4em;
}

.guideSlider_root .viewerbody_root.fullscreen-container .left-arrow {
    inset-inline-start: 4em;
}

.guideSlider_root .viewerbody_root.fullscreen-container .right-arrow {
    inset-inline-end: 4em;
}

.guideSlider_root .statusbar_root {
    order: -999;
    align-self: flex-start;
    margin: 1em 0 0 1em;
    padding: 0.5em 0.75em;
    border-radius: 0.35em;
    background: linear-gradient(180deg, #3a4f8a, #1c3a70);
    color: #ffffff;
    font-size: 0.85vw;
    z-index: 100006;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.guideSlider_root .viewerbody_root.slide-view .statusbar_root {
    position: absolute;
    top: 1em;
    left: 1em;
    margin: 0;
    align-self: unset;
}

.guideSlider_root .viewerbody_root.fullscreen-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 3vw;
}

.guideSlider_root .fullscreen-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3vw;
    background: #ffffff;
    border-top: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100015;
}

.guideSlider_root .fullscreen-footer .statusbar_root {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    top: auto !important;
    bottom: auto !important;
    order: unset !important;
    align-self: unset !important;
    flex: none !important;
    width: fit-content !important;
    height: fit-content !important;
}

.guideSlider_root .fullscreen-footer .fullscreen-branding {
    position: absolute;
    right: 0.75em;
    bottom: 50%;
    transform: translateY(50%);
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.75em;
    font-weight: 300;
    z-index: 100010;
    letter-spacing: 0.035em;
    background: transparent;
    box-shadow: none;
    padding: 0;
    height: auto;
}

.guideSlider_root .fullscreen-footer .fullscreen-branding .dapHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75em;
    height: auto;
    font-size: 0.8vw;
    background: transparent;
}

.guideSlider_root .fullscreen-footer .fullscreen-branding .dapHeader_logo {
    height: 1.75vw;
    font-size: 0.8vw;
}

.guideSlider_root .fullscreen-footer .fullscreen-branding .dapHeader_title {
    display: flex;
    font-size: 0.7vw;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1em;
    font-weight: normal;
}

.guideSlider_root .fullscreen-footer .fullscreen-branding .dapHeader_subtext {
    font-size: 0.65vw;
    color: black;
}

.guideSlider_root .fullscreen-footer .fullscreen-branding .dapHeader_text {
    font-weight: 600;
    font-size: 0.75vw;
    color: black;
}

.fullscreen-exit-btn .material-symbols-outlined {
    font-size: 16px;
    line-height: 16px;
}

.guideSlider_root .fullscreen-exit-container {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding: 1em;
    z-index: 100020;
    pointer-events: none;
}

.guideSlider_root .fullscreen-exit-btn {
    gap: 0.52em;
    pointer-events: auto;
    background: rgb(7 56 93 / 75%);
    color: #ffffff;
    border-radius: 0.4em;
    padding: 0.4em 0.9em;
    font-weight: 600;
    font-size: 0.75vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    border: none;
    outline: none;
}

.guideSlider_root .fullscreen-exit-btn:hover {
    background: rgb(7, 56, 93);
    color: #ffffff;
}

.guideSlider_root .fullscreen-footer > #autoplay {
    display: flex;
    position: absolute;
    font-size: 0.7vw;
    color: rgb(7, 56, 93);
    white-space: nowrap;
    align-items: center;
    gap: 1em;
    left: 1em;
    bottom: 30%;
    margin-right: 2vw;
}

.guideSlider_root .fullscreen-footer > #autoplay > #togglecontainer {
    width: 2.75vw;
    height: 1.5vw;
    border-radius: 2vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 0.1vw;
    position: relative;
    cursor: pointer;
    width: 2.5vw;
    height: 1.35vw;
    display: flex;
    background: rgb(7, 56, 93);
    border: 1px solid #ffffff29;
    border-radius: 2vw;
}

.guideSlider_root .fullscreen-footer > #autoplay > #togglecontainer > #button {
    background: #ffffff70;
    width: 1vw;
    height: 1vw;
    border-radius: 2vw;
    position: absolute;
    left: 5%;
    transition: 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guideSlider_root .fullscreen-footer > #autoplay > #togglecontainer > #button[mode="true"] {
    left: 52%;
    background: #ffffffc9;
}
.guideSlider_root .guideLayout_root> #stepWrapper {
    padding: .3em 0em !important;
}
.guideSlider_root .guideLayout_root> #stepWrapper >.webbanner_root{
    margin: auto !important;
}
.guideSlider_root > .viewerbody_root.slide-view .arrow-btn >span{
    font-size: 1.5em;
}/*$Id$*/
.guideStepEditor_root {
    width: 100%;
    height: 100%;
    background-color: var(--transparent);
    border: none;
    border-radius: 0px;
    box-shadow: none;
    position: relative !important;
}
.guideStepEditor_root * {
    letter-spacing: unset;
}
.guideStepEditor_root>.hideAddBuilderElement {
    visibility: hidden;
}
.guideStepEditor_root>#frame-parent-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.guideStepEditor_root>#frame-parent-container>#closableIcon {
    position: absolute;
    top: 6px;
    font-size: var(--font-xlarge);
    border-radius: 3px;
    z-index: 1000 !important;
    right: 6px;
    color: var(--font-color-dark);
    cursor: pointer;
}
.guideStepEditor_root>#frame-parent-container>#row-container {
    /*height == 'auto' */
    max-height: inherit;
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 0%;
    overflow-wrap: break-word;
    width: 100%;
    /* position: relative; */
}
.guideStepEditor_root.relativeRow>#frame-parent-container>#row-container {
    /*height != 'auto' */
    flex: 0 0 auto !important;
    min-height: 1.5vw;
    max-height: 100%;
    transition: height 0.025s linear;
    -webkit-transition: height 0.025s linear;
}
/* .guideStepEditor_root>#frame-parent-container>#row-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 100;
} */
.guideStepEditor_root.relativeRow>#frame-parent-container>#row-container:not(.highlightRow) {
    opacity: 0.25;
    pointer-events: none;
}
.guideStepEditor_root.relativeRow>#frame-parent-container>#row-container.normalState {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.guideStepEditor_root.relativeRow:hover>#frame-parent-container>#row-container.normalState>#adjustContainerheight {
    visibility: visible !important;
}
.guideStepEditor_root.relativeRow>#frame-parent-container>#row-container:not(.highlightRow)>#adjustContainerheight {
    visibility: hidden
}
.guideStepEditor_root >#frame-parent-container .modalCustomImage_root:hover{
    scale: .99;
}

/* .guideStepEditor_root.relativeRow>#frame-parent-container>#row-container.normalState.highlightRow::before {
    border: 3px dotted rgba(38, 179, 255, 0.74);
    border-bottom: none;
}

.guideStepEditor_root.relativeRow>#frame-parent-container> #row-container.highlightRow+#row-container::before {
    border: 3px dotted rgba(38, 179, 255, 0.74);
    border-top: none;
    top: -3px !important;
} */

.guideStepEditor_root.relativeRow>#frame-parent-container>#row-container> #row-container.highlightRow+#row-container {
    opacity: 1 !important;
}

.guideStepEditor_root.relativeRow>#frame-parent-container>#row-container> #row-container.highlightRow+#row-container>#adjustContainerheight {
    visibility: hidden;
}
.guideStepEditor_root>#frame-parent-container>#row-container>.row-container-child {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 0%;
    max-width: 100%;
    /* position: relative; */
    position: static !important;
    overflow-wrap: break-word;
}
.guideStepEditor_root.relativeRow>#frame-parent-container>#row-container>.row-container-child {
    height: 100%;
    overflow: hidden;
}
.guideStepEditor_root>#frame-parent-container>#row-container>.row-container-child>.row-child {
    display: flex;
    flex-wrap: wrap;
    /* position: relative; */
    position: static !important;
    max-width: 100%;
    overflow-wrap: break-word;
    cursor: pointer;
    min-width: .84em;
}
.guideStepEditor_root>#frame-parent-container>#row-container>.row-container-child>.row-child.active,
.guideStepEditor_root>#frame-parent-container>#row-container:first-child>.row-container-child:hover>.row-child:nth-child(2) {
    outline: 3px dotted var(--theme-border-color-low) !important;
    outline-offset: -3px;
    border-radius: 5px;
}

.guideStepEditor_root>#frame-parent-container>#row-container>.row-container-child>.row-child>div:first-child {
    display: inline-flex;
    height: 100%;
    position: static !important;
    overflow: hidden;
}
.guideStepEditor_root.relativeRow>#frame-parent-container>#row-container>.row-container-child>.row-child:hover>#wrapperdiv {
    width: 100%;
}

.guideStepEditor_root.relativeRow>#frame-parent-container>#row-container>.row-container-child>.row-child>#wrapperdiv>#previewcontentdiv {
    max-width: 100%;
    max-height: 100%;
    overflow-wrap: break-word;
}

.guideStepEditor_root.relativeRow>#frame-parent-container>#row-container>.row-container-child>.row-child>#wrapperdiv>.editorGroup {
    max-width: 100%;
    max-height: 100%;
}

.guideStepEditor_root   .active[data-type="customimage"] > .imageEditor_root  #imagecontainer{
    scale: .99;
    transition: .15s ease-in-out;
} 

.guideStepEditor_root > .delete {
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -2%;
    right: 2%;
    background: var(--primary-content-bg);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
    border-radius: 7px;
    color: var(--util-red-bg-dark);
    padding: 0.57em 0.75em;
    cursor: pointer;
    opacity: 1;
    /* display: flex; */
    transition: all 0.3s ease;
    /* border: 1px solid var(--border-color-mid); */
    font-size: var(--font-small);
}

.guideStepEditor_root > .delete:hover {
    color: var(--util-red-bg-darkest);
}

.guideStepEditor_root:hover > .delete {
    opacity: 1;
}

.guideStepEditor_root > .delete > #icon {
    width: 1vw;
    /* height: 1vw; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.guideStepEditor_root > .delete > #icon::before {
    font-family: var(--font-family-material-icons);
    content: "\e872";
    width: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.4em;
}/*$Id$*/
.guideTextEditor_root div#texteditor_root{
    border: none !important;
}
.guideStepEditor_root  #writer{
    position: static !important;
}

.guideStepEditor_root>#frame-parent-container>#row-container>.row-container-child>.row-child:first-child>div:first-child {
    align-items: flex-start !important;
}

.guideStepEditor_root .ui-flex-container > .ui-flex-container > #container-for-font-size > div{
        margin:0px !important;
}
.guideStepEditor_root .ui-flex-container > .ui-flex-container{
    gap: .3vw;
}
.guideStepEditor_root>#frame-parent-container>#row-container > #pointer{
    position: absolute;
    left: 50%;
    transform: translate(50%);
    top: 0.65vw;
    border-left: 0.4vw solid var(--transparent);
    border-top: 0.5vw solid var(--secondary-bg);
    border-right: 0.4vw solid var(--transparent);
}

/* Left side arrows — arrow points right */
.guideStepEditor_root.enableArrow[data-placement="left-top"]::before,
.guideStepEditor_root.enableArrow[data-placement="left-center"]::before,
.guideStepEditor_root.enableArrow[data-placement="left-bottom"]::before {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0.2vw solid transparent;
    border-left: 0.3vw solid var(--arrow-color, #ffffff);
    border-bottom: 0.2vw solid transparent;
    border-right: none;
    top: unset;
    right: unset;
    left: unset;
    bottom: unset;
    content: " ";
    z-index: 10;
}



/* Left-top position */
.guideStepEditor_root.enableArrow[data-placement="left-top"]::before {
    top: 13em;
    right: calc(-0.5vw + 1px);
    border-top-width: 0.4vw;
    border-left-width: 0.5vw;
    border-bottom-width: 0.4vw;
}

/* Left-center position */
.guideStepEditor_root.enableArrow[data-placement="left-center"]::before {
    top: 50%;
    right: calc(-0.5vw + 1px);
    transform: translateY(-50%);
    border-top-width: 0.4vw;
    border-left-width: 0.5vw;
    border-bottom-width: 0.4vw;
}

/* Left-bottom position */
.guideStepEditor_root.enableArrow[data-placement="left-bottom"]::before {
    bottom: 13em;
    right: calc(-0.5vw + 1px);
    border-top-width: 0.4vw;
    border-left-width: 0.5vw;
    border-bottom-width: 0.4vw;
}


/* Right side arrows — arrow points left */
.guideStepEditor_root.enableArrow[data-placement="right-top"]::before,
.guideStepEditor_root.enableArrow[data-placement="right-center"]::before,
.guideStepEditor_root.enableArrow[data-placement="right-bottom"]::before {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0.2vw solid transparent;
    border-right: 0.3vw solid var(--arrow-color, #ffffff);
    border-bottom: 0.2vw solid transparent;
    border-left: none;
    top: unset;
    right: unset;
    left: unset;
    bottom: unset;
    content: " ";
    z-index: 10;
}


.guideStepEditor_root.enableArrow[data-placement="right-top"]::before {
    top: 13em;
    left: calc(-0.5vw + 1px);
    border-top-width: 0.4vw;
    border-right-width: 0.5vw;
    border-bottom-width: 0.4vw;
}

/* Right-center position */
.guideStepEditor_root.enableArrow[data-placement="right-center"]::before {
    top: 50%;
    left: calc(-0.5vw + 1px);
    transform: translateY(-50%);
    border-top-width: 0.4vw;
    border-right-width: 0.5vw;
    border-bottom-width: 0.4vw;
}

.guideStepEditor_root.enableArrow[data-placement="right-bottom"]::before {
    bottom: 13em;
    left: calc(-0.5vw + 1px);
    border-top-width: 0.4vw;
    border-right-width: 0.5vw;
    border-bottom-width: 0.4vw;
}

/* Top arrows — arrow points down */
.guideStepEditor_root.enableArrow[data-placement="top-left"]::before,
.guideStepEditor_root.enableArrow[data-placement="top-center"]::before,
.guideStepEditor_root.enableArrow[data-placement="top-right"]::before {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 0.2vw solid transparent;
    border-top: 0.3vw solid var(--arrow-color, #ffffff);
    border-right: 0.2vw solid transparent;
    border-bottom: none;
    top: unset;
    right: unset;
    left: unset;
    bottom: unset;
    content: " ";
    z-index: 10;
}



.guideStepEditor_root.enableArrow[data-placement="top-left"]::before {
    left: 13em;
    bottom: calc(-0.5vw + 1px);
    border-left-width: 0.4vw;
    border-top-width: 0.5vw;
    border-right-width: 0.4vw;
}

/* Top-center position */
.guideStepEditor_root.enableArrow[data-placement="top-center"]::before {
    left: 50%;
    bottom: calc(-0.5vw + 1px);
    transform: translateX(-50%);
    border-left-width: 0.4vw;
    border-top-width: 0.5vw;
    border-right-width: 0.4vw;
}

.guideStepEditor_root.enableArrow[data-placement="top-right"]::before {
    right: 13em;
    bottom: calc(-0.5vw + 1px);
    border-left-width: 0.4vw;
    border-top-width: 0.5vw;
    border-right-width: 0.4vw;
}

/* Bottom arrows — arrow points up */
.guideStepEditor_root.enableArrow[data-placement="bottom-left"]::before,
.guideStepEditor_root.enableArrow[data-placement="bottom-center"]::before,
.guideStepEditor_root.enableArrow[data-placement="bottom-right"]::before {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 0.2vw solid transparent;
    border-bottom: 0.3vw solid var(--arrow-color, #ffffff);
    border-right: 0.2vw solid transparent;
    border-top: none;
    top: unset;
    right: unset;
    left: unset;
    bottom: unset;
    content: " ";
    z-index: 10;
}



.guideStepEditor_root.enableArrow[data-placement="bottom-left"]::before {
    left: 13em;
    top: calc(-0.5vw + 1px);
    border-left-width: 0.4vw;
    border-bottom-width: 0.5vw;
    border-right-width: 0.4vw;
}

/* Bottom-center position */
.guideStepEditor_root.enableArrow[data-placement="bottom-center"]::before {
    left: 50%;
    top: calc(-0.5vw + 1px);
    transform: translateX(-50%);
    border-left-width: 0.4vw;
    border-bottom-width: 0.5vw;
    border-right-width: 0.4vw;
}

.guideStepEditor_root.enableArrow[data-placement="bottom-right"]::before {
    right: 13em;
    top: calc(-0.5vw + 1px);
    border-left-width: 0.4vw;
    border-bottom-width: 0.5vw;
    border-right-width: 0.4vw;
}
.guideStepEditor_root.enableArrow[data-placement="right-bottom"]{
    right: auto !important;
    top:auto !important;
}
.guideStepEditor_root.enableArrow[data-placement="left-bottom"]{
    left: auto !important;
    top:auto !important;
}
/*$Id$*/
.guideTextEditor_root div#texteditor_root{
    border: none !important;
}
.guideStepEditor_root  #writer{
    position: static !important;
}

.guideStepEditor_root>#frame-parent-container>#row-container>.row-container-child>.row-child:first-child>div:first-child {
    align-items: flex-start !important;
}
.guideStepEditor_root .ui-flex-container > .ui-flex-container > #container-for-font-size > div{
        margin:0px !important;
}
.guideStepEditor_root .ui-flex-container > .ui-flex-container{
    gap: .3vw;
}
.guideStepEditor_root>#frame-parent-container>#row-container > #pointer{
    position: absolute;
    left: 50%;
    transform: translate(50%);
    top: 0.65vw;
    border-left: 0.4vw solid var(--transparent);
    border-top: 0.5vw solid var(--secondary-bg);
    border-right: 0.4vw solid var(--transparent);
}
   
.guideEditLayout_root > #stepWrapper > .guideStepEditor_root.guide > #frame-parent-container > #row-container > .row-container-child > .row-child[data-type="text"]  #rte-menubar {
    position: absolute !important;
    top: -2.4vw;
    left: 50%;
    transform: translate(-50%);
    width: max-content;
}
.guideEditLayout_root > #stepWrapper > .guideStepEditor_root.guide > #frame-parent-container > #row-container > .row-container-child > .row-child[data-type="text"] #rte-menubar  > .rte-toolbar{
    background: var(--pure-white);
    border-bottom: 3px solid var(--theme-border-color-high) !important;
    border-radius: 5px;
    padding: 0.6em 1em;
    border: .5px solid var(--theme-border-color-low);
}/* $Id$ */
.imageEditor_root{
    width:100%;
    height: max-content;
}
.imageEditor_root .image_wrapper{
    width: 100%;        
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imageEditor_root #imagecanvas{
    max-width: 100%;
    max-height: 100%;
}
.imageEditor_root > #imagecontainer{
    text-align: center;
    width:100%;
    height:max-content;
    position:relative;
    display: flex;
    justify-content: center;
}
.imageEditor_root .visible{
    visibility: hidden;
}
.imageEditor_root > #imagecontainer > #image_wrapper > #cropContainer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.imageEditor_root > #imagecontainer #loader_div .loader_root{
    background: none !important;
}
.imageEditor_root > #imagecontainer .scale{
    transition: .25s ease-out;

}
.imageEditor_root:not(.active):hover > #imagecontainer .scale{
    scale: 0.99;
}
.imageEditor_root .drawing{ 
    cursor:crosshair !important;
}

.imageEditor_root  #drag > circle[data-index="0"]{
    cursor: nw-resize;
}
.imageEditor_root  #drag > circle[data-index="1"]{
    cursor:n-resize;
}
.imageEditor_root  #drag > circle[data-index="2"] {
    cursor: ne-resize;
}
.imageEditor_root  #drag > circle[data-index="3"]{
    cursor:e-resize;
}
.imageEditor_root  #drag > circle[data-index="4"] {
    cursor: se-resize;
}
.imageEditor_root  #drag > circle[data-index="5"] {
    cursor: s-resize;
}
.imageEditor_root  #drag > circle[data-index="6"] {
    cursor: sw-resize;
}
.imageEditor_root  #drag > circle[data-index="7"] {
    cursor: w-resize;
}


.imageEditor_root > #imagecontainer  #svg_wrapper{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imageEditor_root > #imagecontainer  #svg_wrapper > svg{
    max-width: 100%;
    max-height: 100%;
    pointer-events: auto;
}
.imageEditor_root > #imagecontainer  #svgController > svg{
    position:absolute;
    top:0;
    left:0;
    max-width:100%;
    max-height:100%;
}
.imageEditor_root > #imagecontainer #originalImage{
    visibility: hidden;
}
.imageEditor_root > #imagecontainer #originalImage.show{
    visibility: visible !important;
}
.imageEditor_root svg.hide{
    visibility: hidden;
}
.imageEditor_root #svgController{
    max-width: 100%;
    max-height: 100%;
    position: relative;
}
.imageEditor_root #imageEditorPane{
    width: max-content;
    height: max-content;
    position: absolute;
    right: -3vw;
    top: 50%;
    transform: translateY(-50%);
    background: var(--pure-white);
    border-radius: 5px;
    /* padding: 0.6em 1em; */
    border: .5px solid var(--theme-border-color-low);
}
/* 
 */
.imageEditor_root #overlayElementEditor{
    position: fixed;
}
.imageEditor_root  #drag > .draggable{
    cursor: move;
    pointer-events: none;
    stroke-dasharray: 2,4;
    stroke-width: 2;
    stroke: #000000;
    stroke-opacity: .85;
}

.imageEditor_root #hubspotOverlay,.imageEditor_root #tooltipOverlay{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
}

.imageEditor_root #tooltipOverlay  > div, .imageEditor_root #hubspotOverlay  > div{
    z-index: 1111;
    pointer-events: auto;
}

.imageEditor_root  .ui-rte-editor-div .ui-rte-placeholder::before{
    color: var(--pure-white) !important;
    opacity: .8 !important;
}

.imageEditor_root #toooltipdraggable{
    position: absolute;
    width: 1.3vw;
    background: var(--primary-content-bg);
    z-index: 1000;
    display: flex;
    padding: 0.1vw;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0.5px solid var(--status-color-green);
    cursor: default;
    fill: var(--status-color-green);
    z-index: 11111;
}
.imageEditor_root #toolbar_root{
    position: fixed !important;
}
.imageEditor_root  .ui-rte-editor-div{
    color: inherit !important;
}/* $Id$ */
.rectangleHubspot_root{
    position: absolute;
}
.circleHubspot_root{
    position: absolute;
}


/* $Id$ */
/* for guide editor */
.guideEditLayout_root > #stepWrapper > .guideStepEditor_root.guide > #frame-parent-container > #row-container > .row-container-child > .row-child[data-type="text"]  #rte-menubar {
    position: absolute !important;
    top: -2.4vw;
    left: 50%;
    transform: translate(-50%);
    width: max-content;
}
.guideEditLayout_root > #stepWrapper > .guideStepEditor_root.guide > #frame-parent-container > #row-container > .row-container-child > .row-child[data-type="text"] #rte-menubar  > .rte-toolbar{
    background: var(--pure-white);
    border-bottom: 3px solid var(--theme-border-color-high) !important;
    border-radius: 5px;
    padding: 0.6em 1em;
    border: .5px solid var(--theme-border-color-low);
}

.guideStepEditor_root > #stepWrapper > .guideStepEditor_root.guide > #frame-parent-container > #row-container > .row-container-child > .row-child[data-type="text"] > .withouttoolbar #rte-menubar{
    display: none !important;
}
.guideStepEditor_root > #stepWrapper > .guideStepEditor_root.guide > #frame-parent-container > #row-container > .row-container-child > .row-child[data-type="text"]  > .guidetextEditor_root .ui-rte-editor {
    text-align: left;
}


.guideTextEditor_root .ui-rte-editor , .guideLayout_root .ui-rte-editor{
    font-size: inherit !important;
    overflow: hidden !important;
    color: inherit !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.guidestepeditor_root .rte-toolbar {
    min-height:max-content !important;
}/*$Id$*/
.videoPane_root {
    width: calc(100% - 9em);
    height: calc(100% - 1em);
    margin: 0.5em;
    background: var(--secondary-bg-v4);
    border-radius: 0.4vw;
    border: 1px solid var(--secondary-bg-v1);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--font-normal);
    position: relative;
}
 
.videoPane_root>#videocontainer {
    height: calc(100% - 4.5vw);
    width: 100%;
    overflow: hidden;
    padding: 1vw;
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}
 
.videoPane_root>#videocontainer>#parent {
    position: relative;
    border-radius: 0.2vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}
#home[parent="micszrouter"] .videoPane_root>#videocontainer>#parent {
    height: 100%;
}
 
.videoPane_root>#videocontainer>#parent>#hlsStreamingVideoSrcElement{
    width: 100%;
    height: 100%;
}
 
.videoPane_root > #playercontrol {
    width: 100%;
    height: 4.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 0 0 0.3vw 0.3vw;
    padding: 0 1vw;
    background: var(--primary-content-bg);
    gap: 0.7vw;
}
 
.videoPane_root > #playercontrol[editmode='true'] {
    opacity: 0.7;
    pointer-events: none;
}
 
.videoPane_root > #playercontrol>#progresscontainer {
    width: 100%;
    height: 0.4vw;
    background: var(--border-color-mid);
    border-radius: 0.5vw;
    cursor: pointer;
    position: relative;
    transition: 0.2s ease-in-out height;
}
 
.videoPane_root > #playercontrol>#progresscontainer>#progress {
    height: 100%;
    background: var(--secondary-bg);
    width: 20%;
    border-radius: 0.5vw;
    transition: 0.2s ease width;
}
.videoPane_root > #playercontrol>#progresscontainer>#progress>#indicator {
    position: absolute;
    left: 76.585%;
    width: 1vw;
    height: 1vw;
    top: -0.2vw;
    background: var(--secondary-bg);
    border-radius: 50%;
}
.videoPane_root > #playercontrol>#buttons {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65em;
}
 
.videoPane_root > #playercontrol>#buttons>#isPlaying {
    padding: 0.1em;
    background-color: var(--secondary-bg-v1);
    border: 0.1px solid var(--secondary-bg);
    border-radius: 50%;
    color: var(--font-color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulsegreen 2s infinite 1s cubic-bezier(.35, 0, 0, 1);
    transform: scale(1);
    transition: 0.2s ease-in-out;
}

.videoPane_root > #playercontrol>#buttons>#isPlaying:hover {
    transform: scale(1.1);
}
 
.videoPane_root > #playercontrol[editmode='true']>#buttons>#isPlaying {
    animation: none;
}
 
 
.videoPane_root > #playercontrol>#buttons>#isPlaying[isplaying='true'] {
    animation: none;
}
 
.videoPane_root > #playercontrol>#buttons>#isPlaying >.button{
    width: var(--font-xlarge);
    fill: var(--secondary-bg);
}
 
.videoPane_root > #playercontrol>#buttons>#isPlaying:hover {
    opacity: 0.9;
}
 
.videoPane_root > #playercontrol>#buttons>#time {
    font-size: var(--font-small);
    color: var(--font-color-dark);
    opacity: 0.85;
    letter-spacing: 0.035em;
}
 
.videoPane_root > #playercontrol>#progresscontainer>.marker {
    position: absolute;
    top: 0;
    width: 0.3vw;
    height: 100%;
    background-color: var(--util-red-bg-dark);
    border-radius: 0.1vw;
    transform: translateX(-50%); 
    transition: 0.2s ease-in-out all;
}
 
 
.videoPane_root > #playercontrol>#progresscontainer>.marker:hover {
     height: 1.2vw;
     top: -0.3vw;
}
 
.videoPane_root>#videocontainer>#parent >#playPauseOverlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--border-color-mid3);
    border-radius: 50%;
    width: 5vw;
    height: 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    z-index: 10000;
}
 
.videoPane_root>#videocontainer>#parent >#playPauseOverlay >.icon {
    width: 4vw;
    height: 4vw;
    fill: var(--primary-content-bg);
}
 
.videoPane_root>#videocontainer>#parent >#playPauseOverlay.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-in-out !important;
}

/*$Id$*/
.interactiveElements_root {
  z-index: 1000;
  cursor: default;
  user-select: none !important;
}
.interactiveElements_root[type='Blur']{
  z-index: 999 !important;
}
.interactiveElements_root #edit {
  position: absolute;
  width: 1.4vw;
  height: 1.4vw;
  left: -1.4vw;
  top: -1vw;
  background: var(--primary-content-bg);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--secondary-bg);
  cursor: pointer;
}

.interactiveElements_root #edit[voiceeditmode='true']{
    display:none;
}

.interactiveElements_root #edit::before {
  font-family: var(--font-family-material-icons);
  content: "\e3c9";
  font-size: var(--font-large);
  color: var(--secondary-bg);
}

.interactiveElements_root>#drag {
  position: absolute;
  width: 1.3vw;
  background: var(--primary-content-bg);
  left: -1.3vw;
  z-index: 1000;
  top: -1vw;
  display: flex;
  padding: 0.1vw;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0.5px solid var(--status-color-green);
  cursor: default;
  fill: var(--status-color-green);
}

/*tooltip_root*/
.interactiveElements_root>#container>.tooltip_root>#spotlight {
  position: relative;
  height: 11px;
  width: 11px;
  border-radius: 50%;
  z-index: 1;
  -webkit-animation: tooltipSpotlight 2s infinite 1s cubic-bezier(.40, 1, 0, 1);
  animation: 2s cubic-bezier(0.35, 0, 0, 1) 1s infinite normal none running tooltipSpotlight;
}

@keyframes tooltipSpotlight {
  0% {
    box-shadow: 0 0 0 0  var(--dynamic-border-color);
  }
  100% {
    box-shadow: 0 0 0 9px var(--transparent);
  }
}

.interactiveElements_root>#container>.tooltip_root>#tooltip_container {
  position: absolute
}

.interactiveElements_root #modalLayout {
  z-index: 11;
  position: absolute;
  left: unset;
  top: unset;
  right: unset;
  bottom: unset;
  transform: none;
  max-width: unset !important;
  border: solid;
}

.interactiveElements_root #modalLayout #frame-parent-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden auto;
}

.interactiveElements_root #modalLayout #row-container {
  max-height: inherit;
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 0%;
  overflow-wrap: break-word;
  width: 100%;
}

.interactiveElements_root #modalLayout #row-container > .row-container-child {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 0%;
  max-width: 100%;
  position: relative;
  overflow-wrap: break-word;
}

.interactiveElements_root #modalLayout #row-container>.row-container-child>.row-child {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  overflow-wrap: break-word;
}

.interactiveElements_root #modalLayout #row-container>.row-container-child>.row-child>#textbuilder {
  display: inline-flex;
  height: 100%;
  position: relative;
  width: 100%;
}

.interactiveElements_root #modalLayout #row-container>.row-container-child>.row-child>#textbuilder>#previewcontentdiv {
  overflow: hidden;
  width: 100%;
  height: fit-content;
  word-break: break-word;
  max-height: 100%;
}

.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout {
  border-radius: 5px !important;
  border-width: 0px !important;
}

#tooltip_container {
  --tooltip-offset: 10px
}

.interactiveElements_root>#container>.tooltip_root .top-center {
  top: calc(100% + var(--tooltip-offset));
  left: 50%;
  transform: translateX(-50%);
  bottom: initial;
  right: initial;
}

.interactiveElements_root>#container>.tooltip_root .top-left {
  top: calc(100% + var(--tooltip-offset));
  left: -4.5px;
  bottom: initial;
  right: initial;
}

.interactiveElements_root>#container>.tooltip_root .top-right {
  top: calc(100% + var(--tooltip-offset));
  right: -14px;
  bottom: initial;
  left: initial;
}

.interactiveElements_root>#container>.tooltip_root .bottom-center {
  bottom: calc(100% + 2.2*var(--tooltip-offset));
  left: 50%;
  transform: translateX(-50%);
  top: initial;
  right: initial;
}

.interactiveElements_root>#container>.tooltip_root .bottom-left {
  bottom: calc(100% + 2.2*var(--tooltip-offset));
  left: -4.5px;
  top: initial;
  right: initial;
}

.interactiveElements_root>#container>.tooltip_root .bottom-right {
  bottom: calc(100% + 2.2*var(--tooltip-offset));
  right: -14px;
  top: initial;
  left: initial;
}

.interactiveElements_root>#container>.tooltip_root .left-center {
  top: 50%;
  left: calc(100% + 2.2*var(--tooltip-offset));
  transform: translateY(-50%);
  bottom: initial;
  right: initial;
}

.interactiveElements_root>#container>.tooltip_root .left-top {
  top: -14px;
  left: calc(100% + 2.2*(var(--tooltip-offset)));
  bottom: initial;
  right: initial;
}

.interactiveElements_root>#container>.tooltip_root .left-bottom {
  bottom: -4.5px;
  left: calc(100% + 2.2*var(--tooltip-offset));
  top: initial;
  right: initial;
}

.interactiveElements_root>#container>.tooltip_root .right-center {
  top: 50%;
  left: calc(-100% - var(--tooltip-offset));
  transform: translate(-100%, -50%);
  bottom: initial;
  right: initial;
}

.interactiveElements_root>#container>.tooltip_root .right-top {
  top: -14px;
  left: calc(-100% - var(--tooltip-offset));
  transform: translateX(-100%);
  bottom: initial;
  right: initial;
}

.interactiveElements_root>#container>.tooltip_root .right-bottom {
  top: 4.5px;
  right: initial;
  transform: translate(calc(-100% - var(--tooltip-offset)), -100%);
}



/*indicator*/
.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout::before {
  width: 0;
  height: 0;
  position: absolute;
  top: unset;
  right: unset;
  left: unset;
  bottom: unset;
  content: " ";
  z-index: 1000;
  border-color: var(--dynamic-border-color) !important;
}



.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout.left-top::before {
  border-top: 0.5vw solid var(--transparent) !important;
  border: 0.65vw solid;
  border-bottom: 0.5vw solid var(--transparent) !important;
  border-left: 0.5vw solid var(--transparent) !important;
  left: -1vw;
  top: 1.5px;
}

.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout.left-center::before {
  border-top: 0.5vw solid var(--transparent) !important;
  border-right: 0.65vw solid;
  border-bottom: 0.5vw solid var(--transparent) !important;
  left: -0.5vw;
  bottom: calc(50% - 0.2vw);
}

.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout.left-bottom::before {
  border-top: 0.5vw solid var(--transparent) !important;
  border-right: 0.65vw solid;
  border-bottom: 0.5vw solid var(--transparent) !important;
  bottom: 0.15vw;
  left: -0.5vw;
}

.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout.right-top::before {
  border-top: 0.5vw solid var(--transparent) !important;
  border: 0.65vw solid;
  border-bottom: 0.5vw solid var(--transparent) !important;
  border-right: 0.5vw solid var(--transparent) !important;
  top: 1.5px;
  right: -1vw;
}

.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout.right-center::before {
  border-top: 0.5vw solid var(--transparent) !important;
  border-left: 0.65vw solid;
  border-bottom: 0.5vw solid var(--transparent) !important;
  bottom: calc(50% - 0.2vw);
  right: -0.5vw;
}

.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout.right-bottom::before {
  border-top: 0.5vw solid var(--transparent) !important;
  border-left: 0.65vw solid;
  border-bottom: 0.5vw solid var(--transparent) !important;
  bottom: 0.15vw;
  right: -0.5vw;
}

.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout.top-left::before {
  left: 1.6px;
  top: -1vw;
  border-left: 0.5vw solid var(--transparent) !important;
  border: 0.65vw solid;
  border-top: 0.5vw solid var(--transparent) !important;
  border-right: 0.5vw solid var(--transparent) !important;
}


.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout.top-center::before {
  right: calc(50% - 0.85vw);
  top: -1vw;
  border-left: 0.5vw solid var(--transparent) !important;
  border: 0.65vw solid;
  border-top: 0.5vw solid var(--transparent) !important;
  border-right: 0.5vw solid var(--transparent) !important;
}


.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout.top-right::before {
  top: -1vw;
  right: 1.5px;
  border-left: 0.5vw solid var(--transparent) !important;
  border: 0.65vw solid;
  border-top: 0.5vw solid var(--transparent) !important;
  border-right: 0.5vw solid var(--transparent) !important;
}

.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout.bottom-left::before {
  left: 1.5px;
  bottom: -1vw;
  border-left: 0.5vw solid var(--transparent) !important;
  border: 0.65vw solid;
  border-bottom: 0.5vw solid var(--transparent) !important;
  border-right: 0.5vw solid var(--transparent) !important;
}


.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout.bottom-center::before {
  right: calc(50% - 0.85vw);
  bottom: -1vw;
  border-left: 0.5vw solid var(--transparent) !important;
  border: 0.65vw solid;
  border-bottom: 0.5vw solid var(--transparent) !important;
  border-right: 0.5vw solid var(--transparent) !important;
}


.interactiveElements_root>#container>.tooltip_root>#tooltip_container.indicator-active #modalLayout.bottom-right::before {
  right: 1.5px;
  bottom: -1vw;
  border-left: 0.5vw solid var(--transparent) !important;
  border: 0.65vw solid;
  border-bottom: 0.5vw solid var(--transparent) !important;
  border-right: 0.5vw solid var(--transparent) !important;
}

/*$Id$*/
.progressbar_root {
    width: 100%;
    height: 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 0 0 0.3vw 0.3vw;
    padding: 0 1vw;
    background: var(--primary-content-bg);
    gap: 0.7vw;
}

.progressbar_root[editmode='true'] {
    opacity: 0.7;
}

.progressbar_root>#progresscontainer {
    width: 100%;
    height: 0.4vw;
    background: var(--border-color-mid);
    border-radius: 0.5vw;
    cursor: pointer;
    position: relative;
    transition: 0.2s ease-in-out height;
    z-index:10;
}

.progressbar_root>#progresscontainer>#progress {
    height: 100%;
    background: var(--secondary-bg);
    width: 20%;
    border-radius: 0.5vw;
    min-width: 0%;
    max-width: 100%;
    /*transition: 0.2s ease width;*/
}

.progressbar_root>#progresscontainer>#progress>#indicator {
    position: absolute;
    left: 76.585%;
    width: 1vw;
    height: 1vw;
    top: -0.2vw;
    background: var(--secondary-bg);
    border-radius: 50%;
}

.progressbar_root>#buttons {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    
    gap: 0.65em;
}

.progressbar_root>#buttons>#isPlaying {
    padding: 0.2em 0.3em;
    background-color: var(--secondary-bg-v1);
    border: 0.1px solid var(--secondary-bg);
    /* border-radius: 50%; */
    color: var(--font-color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
    transition: 0.2s ease-in-out;
    border-radius: 0.4em;
    opacity: 0.83;
}


.progressbar_root>#buttons>#isPlaying>#text{
    padding: 0 0.4em 0 0.2em;
    color: var(--secondary-bg);
    font-size: var(--font-small);
    font-weight: var(--font-weight-medium);
}

.progressbar_root>#buttons>#isPlaying[isplaying='true'] {
    animation: none;
}

.progressbar_root>#buttons>#isPlaying>.button {
    width: var(--font-xlarge);
    fill: var(--secondary-bg);
}

.progressbar_root>#buttons>#isPlaying:hover {
    opacity: 1;
}

.progressbar_root>#buttons>#time {
    font-size: var(--font-small);
    color: var(--font-color-dark);
    opacity: 0.85;
    letter-spacing: 0.035em;
}

.progressbar_root>#progresscontainer>.marker {
    position: absolute;
    top: 0;
    width: 0.3vw;
    height: 100%;
    background-color: var(--util-red-bg-dark);
    border-radius: 0.1vw;
    transition: 0.2s ease-in-out all;
}


.progressbar_root>#progresscontainer>.marker:hover {
    height: 1.2vw;
    top: -0.3vw;
}

.videoPane_root >#error {
    position: absolute;
    opacity: 0;
    bottom: 4vw;
}

.progressbar_root[editmode='true']:hover~#error {
    padding: 0.7em;
    border-radius: 0.25vw;
    color: var(--util-yellow-font-color-dark);
    font-size: var(--font-medium);
    background: var(--util-yellow-bg-light);
    border: 0.9px solid var(--util-yellow-font-color-darkest);
    white-space: nowrap;
    transition: 0.2s ease-in-out;
    pointer-events: none;
    opacity: 1 !important;
    display: flex;
}

.progressbar_root~#error:before {
    content: "";
    background: var(--util-yellow-bg-light);
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    transform: rotate(45deg);
    border: 0.1px solid var(--util-yellow-font-color-darkest);
    border-left: none;
    border-top: none;
    right: calc(50% - 0.5vw);
    bottom: -0.25vw;
    left: unset;
    top: unset;
}

.progressbar_root~#error>#icon:before {
    font-family: var(--font-family-material-icons);
    content: "\e000";
    display: flex;
    font-size: var(--font-large);
    margin-right: 0.4em;
}

.progressbar_root[editmode='true']>#progresscontainer {
    pointer-events: none;
}


.progressbar_root[editmode='true']>#buttons>#isPlaying {
    animation: none;
    pointer-events: none;
}
/*$Id$*/
.blurElement_root {
    position: absolute;
    width: 100%;
    height: 100%;
}


.blurElement_root[editmode='true'] {
    border: 2px dashed var(--util-blue-bg-color);
}

.blurElement_root>#shapedContainer {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.blurElement_root>#shapedContainer[shape='Circle'] {
    border-radius: 50% !important;
}


.blurElement_root>.handle {
    width: 5px;
    height: 5px;
    background: var(--font-color-white);
    border: 1px solid var(--util-blue-bg-color);
    position: absolute;
    z-index: 2;
    visibility: hidden;
}

.blurElement_root[editmode='true']>.handle {
    visibility: visible;
}

.blurElement_root>.handle.nw {
    top: -2.5px;
    left: -2.5px;
    cursor: nwse-resize;
}

.blurElement_root>.handle.n {
    top: -2.5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.blurElement_root>.handle.ne {
    top: -2.5px;
    right: -2.5px;
    cursor: nesw-resize;
}

.blurElement_root>.handle.e {
    top: 50%;
    right: -2.5px;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.blurElement_root>.handle.se {
    bottom: -2.5px;
    right: -2.5px;
    cursor: nwse-resize;
}

.blurElement_root>.handle.s {
    bottom: -2.5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.blurElement_root>.handle.sw {
    bottom: -2.5px;
    left: -2.5px;
    cursor: nesw-resize;
}

.blurElement_root>.handle.w {
    top: 50%;
    left: -2.5px;
    transform: translateY(-50%);
    cursor: ew-resize;
}