/* nav td:hover {background-color: #3c4854 !important;color:#dfe4e8 !important;} */
tbody[data-xtype=nav] td {background-color: var(--libra-nav-bg, #32404e) ;color: var(--libra-nav-text, #dfe4e8) !important;}
tbody[data-xtype=nav] tr:hover td {background-color: var(--libra-nav-hover-bg, #3c4854) !important;}
[data-xtype=nav] tr[data-selected]:first-child  td{background-color: var(--libra-nav-active-bg, #35baf6) !important;color: var(--libra-nav-active-text, #fff) !important;}
tbody[data-xtype=nav] tr[data-selected] td {background-color: var(--libra-nav-active-bg, #35baf6);color: var(--libra-nav-active-text, #fff) !important;}
.clps {table-layout: fixed;}
.clps .hide-on-collapse { display:none !important}
[data-xtype=nav]  :first-child td {background-color: var(--libra-nav-active-bg, #35baf6) !important;border-bottom:1px solid #32404e !important}
[data-bs-theme="dark"] tbody[data-xtype=nav] td {background-color: var(--libra-nav-bg, #1a1d1f) ;color: var(--libra-nav-text, #e9ecef) !important;}
[data-bs-theme="dark"] [data-xtype=nav] tr[data-selected]:first-child  td,
[data-bs-theme="dark"] tbody[data-xtype=nav] tr[data-selected] td,
[data-bs-theme="dark"] [data-xtype=nav] :first-child td {background-color: var(--libra-nav-active-bg, #1a1d1f) !important;color: var(--libra-nav-active-text, #e9ecef) !important;}
[data-bs-theme="dark"] [data-xtype=nav] :first-child td {background-color: #161719 !important;}
[data-bs-theme="dark"] [data-xtype=nav] tr[data-selected]:not(:first-child) td,
[data-bs-theme="dark"] tbody[data-xtype=nav] tr[data-selected]:not(:first-child) td {background-color: #1a1d1f !important;}

.form-group{margin-bottom:1rem}
/* .lrow{
    display: flex;
    flex-wrap: wrap;
} */

[hidden]{
  display:none !important;
}
.hr{height:1px;border-top: 1px solid rgba(0,0,0,.125);}
.b{font-weight:bold}
.indent{margin:10px}
.indentV{margin:10px 0 10px 0}
.indentH{margin:0 10px 0 10px}
.fit{width:100%;height:100%}
.w100{width:100%}
.h100{height:100%}
.hView{height:calc(100% - 14px) !important}      /*14px*/
.hViewTab{height:100%}   /* tab item fills its carousel; real chrome height handled by the tab header layout */

.fa-xs:before {
    font-size: .75rem;
}

.treeTd{width:100%}
/* tree chevron (nodes with children): always points RIGHT, rotates DOWN when open; side via `treeChevronRight` */
.treeChevron{transition: transform .2s ease}
tr.treeExpanded .treeChevron{transform: rotate(90deg)} /* right -> down */
.treeTd > .treeChevron:first-child{margin-right:.4rem}
tr.treeChevronRight .treeChevron, tr.treeChevronRight .treeSpinner{margin-left:auto}
.treeIcon{margin-right:.5rem}
/* Bootstrap spinner-grow shown while lazy children load (treeBusy); hidden otherwise */
.treeTd .treeSpinner{display:none}
tr.treeBusy .treeChevron{display:none}
tr.treeBusy .treeSpinner{display:inline-block}
/* cell children are decorative: let clicks land on the TD so the row handler (expand / setView) runs */
.treeTd > *{pointer-events:none}


.table{ margin-bottom: 0;}

.btn{
    border-radius: 0;
/*     padding: 7px 7px 7px 7px; */
    border-width: 1px;
    border-style: solid;    
}

/* restore Bootstrap .btn-group corner rounding (the .btn override above flattens them).
   Use .btn-group > .btn (child combinator) so Bootstrap 5.3 corner-zeroing
   (.btn-group>.btn:nth-child(n+3){border-*-left-radius:0} etc, higher specificity)
   still flattens the middle/adjacent inner corners -> proper grouped pill look. */
.btn-group > .btn { border-radius: var(--bs-btn-border-radius, var(--bs-border-radius, 0.375rem)); }
/* round the reload button that sits beside the group (a direct child of the table host) */
libra-table > button.btn[slot=tbar] { border-radius: var(--bs-border-radius, 0.375rem); }

.btnBar{
    background-color: #f6f6f6;
    border-color: #e4e4e4;
}

*:focus {
    outline: none;
}
/* remove link hover underline */
/* text-decoration: none !important; */
a { text-decoration: none !important;}
/********* loader spinner begin *****************/
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

*:not(:defined) { display: none;}
/********* loader spinner end *****************/

/*
body {
/* 	margin: 0; */
/* 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
/* 	font-size: 1rem; */
/* 	font-weight: 400; */
/* 	line-height: 1.5; */
/* 	color: #212529; */
/* 	text-align: left; */
/* 	background-color: #fff */


body {
    background-color: #f6f6f6 !important;
    color: var(--bs-body-color, #404040) !important;
/*      font-family: 'Roboto', sans-serif; */
/*          font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important; */
/*          height: 100%; */
         height: -moz-calc(100% + 2.0rem); /* Firefox */
        height: -webkit-calc(100% + 2.0rem); /* Chrome, Safari */
        height: calc(100% + 2.0rem); /* IE9+ and future browsers */

         /* height: -moz-calc(100% - 2rem); 
        height: -webkit-calc(100% - 2rem); 
        height: calc(100% - 2rem); IE9+ and future browsers */
}
html{
/*     height: calc(100%-40px); */
/*     height: 100%; */
    height: -moz-calc(100% - 2rem); /* Firefox */
    height: -webkit-calc(100% - 2rem); /* Chrome, Safari */
    height: calc(100% - 2rem); /* IE9+ and future browsers */
}
table{color: var(--bs-body-color) !important;}.view{
    height: -moz-calc(100% - 4rem)!important; /* Firefox */
    height: -webkit-calc(100% - 4rem)!important; /* Chrome, Safari */
    height: calc(100% - 4rem)!important; /* IE9+ and future browsers */
}

nav {
/*   width: 250px !important; */
  height:100% !important;
  min-height: 100% !important;
/*   padding:10px 10px 10px 10px !important; */
/*   color: #adb3b8 !important; */
}
.wmMenuView:empty{
/*     display:none !important */
    
}
.wmPocket:empty{display:none!important}
.icon{width:20px}
.cp{cursor:pointer;}
.w1{width:1rem}
tbody[data-xtype=tree] tr[data-loid]:hover{background-color: var(--libra-tree-hover-bg, var(--libra-nav-hover-bg, var(--bs-tertiary-bg)))}
tbody[data-xtype=tree] tr[data-loid]:hover td{background-color: var(--libra-tree-hover-bg, var(--libra-nav-hover-bg, var(--bs-tertiary-bg))) !important;}
tbody[data-xtype=table] tr[data-loid]:hover{background-color: var(--libra-tree-hover-bg, var(--libra-nav-hover-bg, var(--bs-tertiary-bg)))}
tbody[data-xtype=table] tr[data-loid]:hover td{background-color: var(--libra-tree-hover-bg, var(--libra-nav-hover-bg, var(--bs-tertiary-bg))) !important;}
/* libra-table[data-sorting] tr th:hover{background-color:#ddedff} */



.fa{font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;}
.fa:before{font-family: FontAwesome;}
.faTree:before{margin-right: 5px !important;color: var(--bs-secondary-color, #404040)}/*35baf6*/
.faTree{color: var(--bs-body-color, #404040)}
/* .faNav:before{font-size:24px;} */
.famr:before{margin-right:18px;display: inline-block;width:16px;text-align: center;}
/*.mr:before{
    padding-right:6px !important;
}*/
/*change from reboot bootstrap*/
/*nav td{
    color: #adb3b8 !important;
    padding: 1.25rem !important;
    }
nav td:hover {background-color: #3c4854;color:#dfe4e8 !important;}
.bg-primary{
    background-color: #35baf6 !important;
    color:#fff !important;
}
nav [data-selected]{
background-color: #475360 !important;
}*/

.libraShadow{
	 box-shadow: black 0px 0px 10px -6px !important; 
/*          box-shadow: 0 .2rem 0.5rem rgba(0,0,0,.15)!important; */

	/* box-shadow:#ddd 0px 0px 10px -6px !important; right: auto; left: 260px; top: 10px; */
	/* box-shadow: 0px 0px 15px 5px rgba(34,34,34,0.2); 
	box-shadow: 0px 0px 10px -10px rgba(34,34,34,0.2);*/
	/* box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.2); */
}

.panel{
    display:flex;
    flex-direction: column;

}
.bg-primary{
    background-color: #35baf6 !important;
    color:#fff !important;
}
/*********************** menu begin ***********************/
.menu li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
} 
/*********************** menu end ***********************/


/*********************** bs sidebars begin  ***********************/

/* body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
} */

/* html {
  height: -webkit-fill-available;
} */

/* main {
  height: 100vh;
  height: -webkit-fill-available;
  max-height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
} */

.dropdown-toggle { outline: 0; }

.btn-toggle {
  padding: .25rem .5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
  background-color: var(--bs-tertiary-bg);
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

[data-bs-theme="dark"] .btn-toggle::before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: var(--bs-tertiary-bg);
}

.scrollarea {
  overflow-y: auto;
}
/*********************** bs sidebars begin end ***********************/


/*********************** libra terminal begin ***********************/
.terminal{
    display:flex;
    flex-direction:column;
    height:calc(100% - 14px) !important;
    background:#1e1e1e;
    color:#e6e6e6;
    border:1px solid #3a3a3a;
    border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    overflow:hidden;
    font-family:'Ubuntu Mono','DejaVu Sans Mono',Menlo,Consolas,monospace;
    font-size:13px;
    line-height:1.45;
}
.terminal-titlebar{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    background:#2b2b2b;
    border-bottom:1px solid #3a3a3a;
    flex:0 0 auto;
    user-select:none;
}
.terminal-dots{ display:flex; gap:6px; }
.terminal-dots i{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.terminal-red{ background:#ff5f56; }
.terminal-yellow{ background:#ffbd2e; }
.terminal-green{ background:#27c93f; }
.terminal-title{ color:#8a8a8a; font-size:12px; flex:1; text-align:center; }
.terminal-cmd{ color:#5a5a5a; font-size:11px; }
.terminal-screen{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    background:#0f0f0f;
}
.terminal-output{
    flex:1 1 auto;
    overflow-y:auto;
    padding:10px 12px;
    min-height:120px;
    max-height:calc(100% - 44px);
    white-space:pre-wrap;
    word-break:break-word;
}
.terminal-line{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    background:#0f0f0f;
    border-top:1px solid #262626;
    flex:0 0 auto;
}
.terminal-prompt{
    white-space:nowrap;
    font-weight:bold;
}
.terminal-user{ color:#27c93f; }
.terminal-host{ color:#4ea1ff; }
.terminal-path{ color:#e6a23c; }
.terminal-input{
    flex:1;
    background:transparent;
    border:0;
    outline:0;
    color:#e6e6e6;
    font-family:inherit;
    font-size:13px;
    caret-color:#27c93f;
}
.terminal-line-cmd{
    color:#e6e6e6;
    margin:2px 0;
}
.terminal-prompt-inline{ color:#27c93f; font-weight:bold; }
.terminal-cmd-name{ color:#4ea1ff; margin-right:6px; }
.terminal-text{ color:#e6e6e6; }
.terminal-error{ color:#ff5f56; }
.terminal-warn{ color:#ffbd2e; }
.terminal-debug{ color:#4ea1ff; }
.terminal-res{ color:#27c93f; }
.terminal-view{ border-top:1px solid #262626; padding:6px 0; }
.terminal-view > * { background:#161616 !important; }
/*********************** libra terminal end ***********************/

/*********************** libra form begin ***********************/
libra-form{
    display:block;
    width:100%;
    height:auto;
    overflow:visible;
}
libra-form form{
    display:flex;
    flex-direction:column;
    width:100%;
    margin:0;
    overflow:visible;
}
libra-form fieldset{
    display:flex;
    flex-direction:column;
    width:100%;
    margin:0;
    overflow:visible;
}
libra-form .form-group.row,
libra-form .form-group{
    flex-wrap:nowrap;
    width:100%;
    margin-right:0;
    margin-left:0;
    margin-bottom:1rem;
}
libra-form .card-body{
    width:100%;
    height:auto;
    overflow:visible;
    padding:1.25rem;
}
libra-form .col-sm-10,
libra-form .col-sm-2,
libra-form .col-form-label{
    flex:1 1 auto;
    max-width:none;
}
libra-form input,
libra-form select,
libra-form textarea{
    background-color:#ffffff !important;
    color: var(--bs-body-color, #212529) !important;
    border:1px solid #ced4da !important;
    border-radius:4px;
    padding:.375rem .75rem;
    width:100%;
    box-sizing:border-box;
}
libra-form input:focus,
libra-form select:focus,
libra-form textarea:focus{
    border-color:#35baf6 !important;
    box-shadow:0 0 0 .2rem rgba(53,186,246,.25);
    outline:0;
}
libra-form input[disabled],
libra-form fieldset[disabled] input,
libra-form fieldset[disabled] select,
libra-form fieldset[disabled] textarea{
    background-color:#e9ecef !important;
    color: var(--bs-secondary-color, #495057) !important;
    opacity:1;
}
libra-form .flexbtns{
    display:flex;
    gap:.5rem;
    width:100%;
    margin-top:1rem;
}
/*********************** libra form end ***********************/

/*********************** dark theme overrides (data-bs-theme=dark) ***********************/
[data-bs-theme="dark"] body { background-color: #161719 !important; color: #e9ecef !important; }
[data-bs-theme="dark"] .faTree { color: #dee2e6; }
[data-bs-theme="dark"] .faTree:before { color: #8a929b; }
[data-bs-theme="dark"] table { color: #e9ecef !important; }
[data-bs-theme="dark"] .btnBar { background-color: #212529 !important; }
[data-bs-theme="dark"] libra-form input,
[data-bs-theme="dark"] libra-form select,
[data-bs-theme="dark"] libra-form textarea { background-color: #212529 !important; color: #e9ecef !important; border-color: #495057 !important; }

/*********************** libra table width/height fit (configurable via data-*) ***********************/
/* Fit-to-width (default): table fills its container, columns compress/truncate, never collapses to 0. */
.libra-table.fx-fit, libra-table.fx-fit { width:100%; min-width:0; }
libra-table.fx-fit > table { width:100%; table-layout:auto; }
/* Intrinsic width + horizontal scroll (opt-in via data-width="scroll"): keep natural column widths. */
libra-table.fx-scroll { width:100%; min-width:100px; overflow-x:auto; }
/* Records-only autoscroll: sticky header, tbody is the only vertical scroll region. */
libra-table.fx-fit, libra-table.fx-scroll, libra-table { display:flex; flex-direction:column; height:100%; min-height:0; }
libra-table.fx-fit > table, libra-table.fx-scroll > table, libra-table > table { display:flex; flex-direction:column; height:100%; min-height:0; margin-bottom:0; }
libra-table.fx-fit thead, libra-table.fx-scroll thead, libra-table thead { display:block; position:sticky; top:0; z-index:2; }
libra-table.fx-fit tbody, libra-table.fx-scroll tbody, libra-table tbody { display:block; overflow-y:auto; flex:1 1 auto; min-height:0; }
libra-table.fx-fit tbody tr, libra-table.fx-scroll tbody tr, libra-table tbody tr { height:auto; }
/* Keep the row height standard and allow horizontal scroll on the inner table when wide. */
libra-table.fx-scroll { overflow-x:auto; }

/*********************** narrow-viewport chrome collapse (table gets real width/height) ***********************/
@media (max-width: 575.98px) {
  /* collapse the fixed 200px sidebar + wmMenuView so the table fills the viewport width */
  #sidebarMenu, nav#sidebarMenu { display:none !important; }
  libra-carousel.wmMenuView, .wmMenuView, [ref="wmMenuView"] { flex: 0 0 0 !important; width:0 !important; min-width:0 !important; display:none !important; }
  .d-flex.flex-row.fit { flex-wrap:wrap; }
  /* give the main/table track a real width so the table doesn't collapse to 0 */
  .d-flex.flex-row.fit > div.fit, .d-flex.flex-row.fit > main.fx-responsive, .d-flex.flex-row.fit > libra-carousel.wmView, .d-flex.flex-row.fit > .wmView { flex:1 1 100% !important; min-width:0; width:100%; }
}

/*********************** libra-tab: flex column ONLY on the active tab ***********************/
/* Scope the flex/overflow to the ACTIVE carousel item. Bootstrap hides inactive items with
   .carousel-item{display:none} (+ .active{display:block}); applying display:flex to every libra-tab
   item kept the inactive (e.g. the table behind the form) visible, so table+form appeared side-by-side.
   Restricting to .active lets inactive tabs hide (one tab visible at a time -> carousel divides). */
libra-tab.carousel-item.active, libra-tab.carousel-item.active[role="listbox"] { display:flex !important; flex-direction:column; overflow:hidden !important; }
libra-tab.carousel-item.active > libra-container.nav-tabs, libra-tab.carousel-item.active > .nav-tabs { flex:0 0 auto; min-height:0; }
libra-tab.carousel-item.active > libra-table { flex:1 1 auto; min-height:0; overflow-y:auto; }

/*********************** libra-table host: hidden overflow (records scroll only) ***********************/
/* The <libra-table> host carries Bootstrap .overflow-auto{overflow:auto!important}; a bare "libra-table"
   selector loses the !important/specificity tie, so the host shows a phantom scrollbar. Force overflow
   hidden at the host (with enough specificity to beat Bootstrap) so ONLY the records (tbody) scroll. */
libra-table.fx-fit.carousel-item, libra-table.fx-scroll.carousel-item { overflow:hidden !important; }


/*********************** libra-table toolbar stays auto-width (not stretched by flex host) ***********************/
/* The <libra-table> host is a flex column (align-items:stretch), so the slotted toolbar container
   (libra-container[slot=tbar]) stretched to full width and its .btn-group buttons flex-grew to fill,
   producing oversized buttons. Reset it to auto width so buttons keep their compact size as before. */
libra-table.fx-fit.carousel-item > libra-container[slot=tbar],
libra-table.fx-scroll.carousel-item > libra-container[slot=tbar],
libra-container[slot=tbar] { align-self:flex-start !important; width:auto !important; flex:0 0 auto !important; min-width:0; }
libra-table.carousel-item:not(.active) { display:none !important; }
libra-table.carousel-item.active { display:flex !important; }
.libra-tooltip{ position:absolute; z-index:65000; padding:4px 8px; border-radius:4px; background:#212529; color:#f8f9fa; font-size:12px; white-space:nowrap; pointer-events:none; box-shadow:0 2px 8px rgba(0,0,0,.35) }

.libra-cardProduct .card{ transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease }
.libra-cardProduct .card:hover{ transform: translateY(-4px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.15) !important; border-color: var(--bs-primary) }
.libra-cardProduct .card-title.pricing-card-title{ font-size: 2.5rem }

.libra-cardProduct .btn{ border-radius: var(--bs-btn-border-radius, .375rem) }