/*$Id: $*/
.skin-blue, .skin-red, .skin-green, .skin-orange, .skin-purple, .skin-white {
   --lhsBgColor:#142746;
   --lhsMenuColor:rgba(255,255,255,0.8);
   --lhsMenuHoverColor:#ffffff;
   --lhsMenuSelectedBgColor:#08101d;
   --lhsMenuSelectedTextColor:#ffffff;
   --lhsMenuIconStrokeColor:#ffffff;
   --lhsMenuIconFillColor:#ffffff;
   --lhsMenuIconStrokeHoverColor:#ffffff;
   --lhsMenuIconFillHoverColor:#ffffff;
   --treeBgColor:#fafafa;
   --treeBorderColor:#ebedf2;
   --treeListTextColor:#1b1b1b;
   --treeListSelectedTextColor:#08101d;
   --rhsBgColor:#fafafa;
   --rhsBorderColor:#ebedf2;
   --lhsMargin0:0;
   --lhsWidth:72px; /* this is LHS width */
   --treeWidth:280px; /* this is TREE SubLHS width */
   --lhsWidthMinus:-72px; /* this is LHS width */
   --treeWidthMinus:-280px; /* this is TREE SubLHS width */
   --centerWidth:calc(100% - var(--lhsWidth)); /* this size will change(when we change LHS width) based on LHS */
   --centerMarginLeft:var(--lhsWidth); /* this size will change(when we change LHS width) based on LHS */
   --containerWidth:calc(100% - var(--treeWidth)); /* this size will change(when we change TREE width) based on TREE SubLHS */
   --subContainerWidth:calc(100% - 280px); /* this size will change(when we change TREE width) based on TREE SubLHS */
   --overlayBgLeft:var(--lhsWidth); /* this size will change(when we change LHS width) based on LHS */
   --treePanelCollapseMargin:var(--treeWidthMinus); /* this size will change(when we change TREE width) based on TREE SubLHS */
   --treePanelExpandMargin:0; /* this size will change(when we change TREE width) based on TREE SubLHS */
   --lhsMenuCollapseMargin:var(--lhsWidthMinus); /* this size will change(when we change LHS width) based on LHS */
   --lhsMenuExpandMargin:0; /* this size will change(when we change LHS width) based on LHS */
   --rhsPanelCollapseMargin:0; /* this size will change(when we change LHS width) based on LHS */
   --rhsPanelCollapseWidth:100%; /* this size will change(when we change LHS width) based on LHS */
   --rhsPanelExpandMargin:var(--lhsWidth); /* this size will change(when we change LHS width) based on LHS */
   --rhsPanelExpandWidth:calc(100% - var(--lhsWidth)); /* this size will change(when we change LHS width) based on LHS */
   --containerCollapseWidth:100%; /* this size will change(when we change TREE width) based on TREE SubLHS */
   --containerExpandWidth:calc(100% - var(--treeWidth)); /* this size will change(when we change TREE width) based on TREE SubLHS */
   --folderPanelExpandMargin:0; /* this size will change(when we change TREE width) based on TREE SubLHS */
   --folderPanelCollapseMargin:var(--treeWidthMinus); /* this size will change(when we change TREE width) based on TREE SubLHS */
   --slideIconLeft:350px;
}
.skin-blue {
   /* Primary Color */
   --primaryThemeColor:#2C66DD;
   --primaryThemeColorLight:#f4f6fb;
   --primaryTextColor:#2C66DD;
   --inputFocusBgColor:#f8fdff;
   --treeListSelectedBgColor:#e2edfe;
}
.skin-red {
   /* Primary Color */
   --primaryThemeColor:#CC3929;
   --primaryThemeColorLight:#fbf1f2;
   --primaryTextColor:#CC3929;
   --inputFocusBgColor:#fffafa;
   --treeListSelectedBgColor:#f8e4e6;
}
.skin-green {
   /* Primary Color */
   --primaryThemeColor:#0C8844;
   --primaryThemeColorLight:#f3f7f0;
   --primaryTextColor:#0C8844;
   --inputFocusBgColor:#fbfffb;
   --treeListSelectedBgColor:#e2f5e4;
}
.skin-orange {
   /* Primary Color */
   --primaryThemeColor:#D14900;
   --primaryThemeColorLight:#fbf6f2;
   --primaryTextColor:#D14900;
   --inputFocusBgColor:#fefbf9;
   --treeListSelectedBgColor:#f8e8e0;
}
.skin-purple {
   /* Primary Color */
   --primaryThemeColor:#663399;
   --primaryThemeColorLight:#f5f2fb;
   --primaryTextColor:#663399;
   --inputFocusBgColor:#fdfbff;
   --treeListSelectedBgColor:#eae4f5;
}
.skin-white {
   --lhsBgColor:#ffffff;
   --lhsMenuColor:#1c2237;
   --lhsMenuHoverColor:#f9f9f9;
   --lhsMenuSelectedBgColor:#fafafa;
   --lhsMenuSelectedTextColor:#ffffff;
   --lhsMenuBgHover:#f9f9f9;
   --lhsMenuborderColor:#e8e8e8;
   --lhsMenuChildColor1:#27bfac;
   --lhsMenuChildColor2:#ff7800;
   --lhsMenuChildColor3:#3a63f3;
   --lhsMenuChildColor4:#7f47d7;
   --lhsMenuChildColor5:#ff535b;
   --lhsMenuChildColor6:#16a9d7;
   --lhsMenuChildColor7:#c49815;
}
/* .skin-green {
   .global-searchinput { background: hsl(from var(--primaryThemeColor) h s 37%); }
} */

/******** Default theme start ***/
.top-header { background: var(--primaryThemeColor);}
/** lhs start **/
.left-nav { background: var(--lhsBgColor); width: var(--lhsWidth);}
.left-nav-menu ul li a { color: var(--lhsMenuColor);}
.left-nav-menu ul li a:hover { color: var(--lhsMenuHoverColor); background: rgba(255,255,255,0.1); }
.left-nav-menu ul li a.active-menu { color: var(--lhsMenuSelectedTextColor); background: var(--lhsMenuSelectedBgColor) }
.left-nav-menu ul li a:hover .svg-fill-color { fill:var(--lhsMenuIconFillHoverColor); }
.left-nav-menu ul li a:hover .svg-line-color { stroke:var(--lhsMenuIconStrokeHoverColor); }
.active-menu .svg-fill-color { fill:var(--lhsMenuIconFillHoverColor); }
.active-menu .svg-line-color { stroke:var(--lhsMenuIconStrokeHoverColor); }
.svg-fill-color { fill:var(--lhsMenuIconFillColor); }
.svg-line-color { stroke: var(--lhsMenuIconStrokeColor); }
/** lhs end **/

/** tree start **/
.password-tree-list-selected { background:var(--treeListSelectedBgColor);}
.jstree-default .jstree-wholerow-clicked { background:var(--treeListSelectedBgColor);}
.btn-primary,
.btn-primary-line,
.btn-primary-line:hover { border-color:var(--primaryThemeColor);}
.btn-primary,
.btn-primary-line:hover { background: var(--primaryThemeColor) !important;}
.folders-container-panel,
.settings-left-panel, 
.audit-left-panel, 
.apps-left-panel { background: var(--treeBgColor); width: var(--treeWidth);}
.folder-list-panel,
.settings-left-panel, 
.audit-left-panel, 
.apps-left-panel { border-color: var(--treeBorderColor); }
.selected-settings-left-accordion-list, 
.selected-audit-left-accordion-list, 
.password-tree-list-selected,
.jstree-default .jstree-wholerow-clicked { background: var(--treeListSelectedBgColor); }
.left-nav-menu ul li a.active-menu:before,
.selected-settings-left-accordion-list:before, 
.selected-audit-left-accordion-list:before,
.password-tree-list-selected:before,
.jstree-default .jstree-wholerow-clicked:before { background:var(--primaryThemeColor) !important; }

ul.password-tree-list li a.password-tree-list-selected,
ul.audit-left-accordion-list li a.selected-audit-left-accordion-list,
ul.settings-left-accordion-list li a.selected-settings-left-accordion-list,
ul.settings-left-accordion-list li a.selected-audit-left-accordion-list { color: var(--treeListSelectedTextColor);}
.jstree-default .jstree-clicked { color: var(--treeListSelectedTextColor) !important; }

ul.password-tree-list li a,
ul.audit-left-accordion-list li a,
ul.settings-left-accordion-list li a,
.zv-folder-action-icons ul.vault-list li a,
.settings-left-accordion-list-header, 
.audit-left-accordion-list-header,
.jstree-anchor, .jstree-anchor:link, 
.jstree-anchor:visited, 
.jstree-anchor:hover, 
.jstree-anchor:active { color: var(--treeListTextColor); }

/** tree end **/

.right-side-bar { background: var(--rhsBgColor); border-color: var(--rhsBorderColor); }

/** bg primarycolor grouped classes start **/
.list-view-passwords-list .password-list-inner-selected:before, 
.settings-panel-column h5:after,
.subscription-panel-list-selected:before,
.import-passwords-steps-list-selected:after,
.import-passwords-steps-list-selected a,
ul.vault-tabs-horizontal li a:after,
lyte-tab-title:after,
.subscription-current-plan,
.subscription-panel-list-selected .subscription-panel-tick,
.hamburger-icon-panel,
.lyteMenuSelection:before, 
.lyteDropdownSelection:before,
.progressbar li .active + li:after,
.lytePrimaryBtn,
.list-view-passwords-list .password-list-view-selected:before,
.lyteTourArrow,
.zv-product-tour .modal-panel-header { background: var(--primaryThemeColor); }
.lytePrimaryBtn:hover,
#add-passwords { background: var(--primaryThemeColor) !important; }

ul.add-password-plus-minus li a:hover,
.calendar-show:hover,
ul.vault-list li a:hover,
.filter-links-icons li a:hover,
.list-view-passwords-list .password-list-inner-selected,
.list-view-passwords-list .password-list-inner-selected:hover,
.password-list-inner-selected .card-view-password-icons,
.card-view-password-icons li a:hover,
lyte-drop-item:hover,
lyte-menu-item:hover,
.lyteMenuSelection,
.circle-passwords,
ul.filter-result-list li a, 
ul.filter-result-list li abbr,
.list-view-manage-users ul.manage-app-access-list li .password-list-inner-selected,
.password-list-inner-selected { background: var(--primaryThemeColorLight); }
/** bg primarycolor grouped classes end **/

.form-field input:focus, .form-field textarea:focus { background: var(--inputFocusBgColor); }

/** text primary color grouped classes start **/
ul.settings-column-list li a:hover,
ul.settings-left-accordion-list li a:hover, 
ul.audit-left-accordion-list li a:hover,
ul.breadcrumbs li:first-child:before,
.page-title-info, 
a,
.filter-links-icons li a:hover,
.card-view-password-icons li a:hover,
.draggable-div a:hover,
.profile-panel-inner-links li a:hover,
.settings-panel-header-image i,
.filter-links-icons,
.draggable-div a:hover,
.filter-links-icons li a:hover,
.card-view-password-icons li a:hover,
ul.add-password-plus-minus li a:hover,
.calendar-show:hover,
ul.vault-list li a:hover,
.transfer-list-selected:before,
.folders-page-list-inner:hover .folders-page-list-name,
.btn-primary-line,
.bg-primary-none,
.text-primary,
ul.password-add-menu li a:hover,
.active .label-control .label-text,
lyte-tab-title.lyteTabActive, 
lyte-tab-title.lyteTabActive:hover,
.progressbar li .active, 
.progressbar .active p, 
.progressbar .active span i,
.user-panel-slider-list-selected:before,
.circle-passwords i,
.breadcrumbs sub,
ul.password-tree-list li a:hover,
.jstree-default .jstree-search,
.jstree-hovered { color: var(--primaryTextColor); }

.subscription-panel-list-selected i, 
.settings-column-list-selected,
lyte-tab-title.lyteTabActive, 
lyte-tab-title.lyteTabActive:hover,
.circle-passwords,
.progressbar .active p, 
.progressbar .active span i { color: var(--primaryTextColor) !important; }
/** text primary color grouped classes end **/

/** border primary color grouped classes start **/
ul.left-nav-sub-menus li a:hover,
.card-view-add-password-panel,
ul.vault-tabs-horizontal li a.selected,
.form-field input:focus, 
.form-field textarea:focus,
.form-active-message,
.password-list-inner-selected:hover,
.draggable-div a:hover,
.card-view-password-list-inner:hover,
.password-list-inner-selected,
.subscription-current-plan,
.notification-count,
.feedback-tabs-active,
ul.feedback-tabs li:hover,
.feedback-tabs-active,
.draggable-div a:hover,
.form-group .label-control:after,
.transfer-list-selected:before,
.lyteInputBox.lyteInputFocus .lyteField,
.lyteTabDefaultTop lyte-tab-title.lyteTabActive,
.lyteTabDefaultTop lyte-tab-title.lyteTabActive:hover,
.progressbar li .active:before,
.lytePrimaryBtn,
.funnel-dropdown-selected,
ul.filter-result-list li a, 
ul.filter-result-list li abbr { border-color : var(--primaryThemeColor); }
.subscription-panel-list-selected,
.lytePrimaryBtn:hover { border-color : var(--primaryThemeColor) !important; }
.feedback-panel { border-top:2px solid var(--primaryThemeColor); }
/** border primary color grouped classes end **/
/******** Default theme end ***/

/********* White theme start *********/
.skin-white .left-nav { background: var(--lhsBgColor); }
.skin-white .left-nav:after { 
    border-right: 1px solid var(--lhsMenuborderColor);
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 50px;
    z-index: 1;
 }
.skin-white .hamburger-icon-panel:after { content: ""; }
.skin-white .left-nav-menu ul li a { color: var(--lhsMenuColor); }
.skin-white .left-nav-menu ul li a:hover { background:var(--lhsMenuBgHover); }
.skin-white .left-nav-menu ul li a.active-menu { 
   background:var(--lhsMenuSelectedBgColor); 
   font-weight:600; 
   border-top: 1px solid var(--lhsMenuborderColor); 
   border-bottom: 1px solid var(--lhsMenuborderColor); 
}
.skin-white .left-nav-menu ul li:nth-child(7n+1) i, .color-teal { color: var(--lhsMenuChildColor1); }
.skin-white .left-nav-menu ul li:nth-child(7n+2) i, .color-orange { color: var(--lhsMenuChildColor2); }
.skin-white .left-nav-menu ul li:nth-child(7n+3) i, .color-royalblue { color: var(--lhsMenuChildColor3); }
.skin-white .left-nav-menu ul li:nth-child(7n+4) i, .color-purple { color: var(--lhsMenuChildColor4); }
.skin-white .left-nav-menu ul li:nth-child(7n+5) i, .color-red { color: var(--lhsMenuChildColor5); }
.skin-white .left-nav-menu ul li:nth-child(7n+6) i, .color-blue { color: var(--lhsMenuChildColor6); }
.skin-white .left-nav-menu ul li:nth-child(7n+7) i, .color-brown { color: var(--lhsMenuChildColor7); }

.skin-white .left-nav-menu ul li:nth-child(7n+1) .svg-line-color { stroke: var(--lhsMenuChildColor1); }
.skin-white .left-nav-menu ul li:nth-child(7n+1) .svg-fill-color { fill: var(--lhsMenuChildColor1); }
.skin-white .left-nav-menu ul li:nth-child(7n+2) .svg-line-color { stroke: var(--lhsMenuChildColor2); }
.skin-white .left-nav-menu ul li:nth-child(7n+3) .svg-line-color { stroke: var(--lhsMenuChildColor3); }
.skin-white .left-nav-menu ul li:nth-child(7n+4) .svg-line-color { stroke: var(--lhsMenuChildColor4); }
.skin-white .left-nav-menu ul li:nth-child(7n+4) .svg-fill-color { fill: var(--lhsMenuChildColor4); }
.skin-white .left-nav-menu ul li:nth-child(7n+5) .svg-line-color { stroke: var(--lhsMenuChildColor5); }
.skin-white .left-nav-menu ul li:nth-child(7n+5) .svg-fill-color { fill: var(--lhsMenuChildColor5); }
.skin-white .left-nav-menu ul li:nth-child(7n+6) .svg-line-color { stroke: var(--lhsMenuChildColor6); }
.skin-white .left-nav-menu ul li:nth-child(7n+6) .svg-fill-color { fill: var(--lhsMenuChildColor6); }
.skin-white .left-nav-menu ul li:nth-child(7n+7) .svg-line-color { stroke: var(--lhsMenuChildColor7); }
/********* White theme end *********/