html { font-size: 16px; }
html, body { height: 100%; margin: 0; padding: 0; background: var(--windows11-head); overflow: hidden; }
.w-80px { width: 80px; }
.w-90px { width: 90px; }
.w-100px { width: 100px; }
.mw-300px { max-width: 300px; }
.mw-400px { max-width: 400px; }
.mw-600px { max-width: 600px; }
.mw-1200px { max-width: 1200px; }
/*-------| Framework |---------------------------------------------------------------------------------------------*/
:root {
--naviwidth: 250px;
}
#framework-logo { position: absolute; z-index: 2; left: 0; top: 0; width: var(--naviwidth); height: 80px; overflow: hidden; }
#framework-navi { position: absolute; z-index: 100; left: 0; top: 80px; bottom: 30px; width: var(--naviwidth);/* background: var(--menu-bg); */ background: var(--windows11-head) }
#framework-navi > div:first-child { position: absolute; z-index: 100; left: 0; top: 0; bottom: 0; right: 0; overflow: hidden; }
#framework-crump { position: absolute; z-index: 3; left: calc(var(--naviwidth) + 1px); top: 5px; right: 0; height: 20px; }
#framework-funct { position: absolute; z-index: 2; left: calc(var(--naviwidth) + 1px); top: 30px; right: 0; height: 50px; background: var(--functbg); border-top-left-radius: 8px; }
#framework-content { position: absolute; z-index: 2; left: calc(var(--naviwidth) + 1px); top: 80px; right: 0; bottom: 0; overflow: hidden; background: white; }
#framework-content > div > iframe { width: 100%; height: 100%; border: none; }
#iframe-funct { position: absolute; z-index: 2; left: 0; top: 0; right: 0; height: 50px; background: var(--functbg); border-top-left-radius: 8px; }
#iframe-content { position: absolute; z-index: 2; left: 0; top: 50px; right: 0; bottom: 0; overflow: hidden; background: white; }
body.iframe #framework-funct { display: none; }
body.iframe #framework-content { top: 30px; }
.collaps-sidenavi #framework-logo,
.collaps-sidenavi #framework-navi { width: 45px; }
.collaps-sidenavi #framework-funct,
.collaps-sidenavi #framework-crump,
.collaps-sidenavi #framework-content { left: 45px; }
.collaps-sidenavi #framework-navi.hover { width: var(--naviwidth); }
body.loaded #framework-logo,
body.loaded #framework-navi,
body.loaded #framework-crump,
body.loaded #framework-funct { transition: all 0.3s; }
body.loaded #framework-content { transition: left 0.3s; }
@media screen and (max-width: 959px){
#framework-logo,
#framework-navi { width: 45px; }
#framework-funct,
#framework-crump,
#framework-content { left: 45px; }
#framework-navi.hover { width: var(--naviwidth); }
.collaps-sidenavi #framework-navi { width: var(--naviwidth); }
}
/*-------| Framework: LOGO |---------------------------------------------------------------------------------------------*/
#fw-l-portrait { position: absolute; left: 10px; top: calc(50% - 20px); width: 40px; height: 40px; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 50%; }
#fw-l-name { display: flex; flex-wrap: wrap; align-content: center; position: absolute; left: 60px; top: 10px; bottom: 10px; width: calc(var(--naviwidth) - 80px); font-size: 12px; line-height: 13px; color: var(--windows11-font); opacity: 1; }
#fw-l-name > div { width: 100%; }
.collaps-sidenavi #fw-l-portrait { top: calc(50% - 12.5px); width: 25px; height: 25px; }
.collaps-sidenavi #fw-l-name { opacity: 0; }
body.loaded #fw-l-portrait { transition: all 0.3s; }
body.loaded #fw-l-name { transition: opacity 0.3s; }
@media screen and (max-width: 959px){
#fw-l-portrait { top: calc(50% - 12.5px); width: 25px; height: 25px; }
#fw-l-name { opacity: 0; }
}
/*-------| Framework: NAVI |---------------------------------------------------------------------------------------------*/
#fw-nl-toggler { position: absolute; left: 0; bottom: -30px; right: 0; height: 30px; line-height: 30px; text-align: center; color: var(--menu-main-color); cursor: pointer; background-color: var(--windows11-head)}
#fw-nl-toggler:hover { color: var(--windows11-primary); }
body.collaps-sidenavi #fw-nl-toggler i { transform: rotate(180deg); }
body.loaded #fw-nl-toggler i { transition: all 0.3s; }
@media screen and (max-width: 959px){
#fw-nl-toggler i { transform: rotate(180deg); }
body.collaps-sidenavi #fw-nl-toggler i { transform: rotate(0); }
.hover #fw-nl-toggler i { transform: rotate(0); }
}
#fw-nl-treeview { position: absolute; left: 0; top: 0; bottom: 0; width: var(--naviwidth); }
/* Level 1 */
#fw-nl-treeview > ul { margin: 0; padding: 0; }
#fw-nl-treeview > ul:first-child { border-top: 1px solid var(--menu-bg); }
#fw-nl-treeview > ul > li { margin: 0; padding: 0; border-bottom: 1px solid var(--menu-bg); }
#fw-nl-treeview > ul > li > span { display: flex; align-items: center; padding: 10px 10px 10px 0; background: var(--menu-main-bg); color: var(--menu-main-color); cursor: pointer; }
#fw-nl-treeview > ul > li > span:hover { color: var(--windows11-primary); }
#fw-nl-treeview > ul > li > span:before { content:''; display: none;position: absolute;left: 0; z-index: 1; height: 42px; width: 3px; max-width: 3px; overflow: hidden; background-color: #629CC9; }
#fw-nl-treeview > ul > li > span:hover:before { display: block; background-color: var(--windows11-primary); }
#fw-nl-treeview > ul > li.active > span { color: var(--windows11-primary); background-color: var(--windows11-menu-active)}
#fw-nl-treeview > ul > li.active > span:hover { color: var(--windows11-primary); }
#fw-nl-treeview > ul > li > span > i:nth-child(1) { width: 35px; text-align: center; }
#fw-nl-treeview > ul > li > span > span:nth-child(2) { width: calc(var(--naviwidth) - 69px); padding-top: 2px; font-size: 14px; line-height: 20px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#fw-nl-treeview > ul > li > span > i:nth-child(3) { width: 14px; margin-left: 10px; }
#fw-nl-treeview > ul > li.active > span > i:nth-child(3) { transform: rotate(180deg); }
/* Level 2 */
#fw-nl-treeview > ul > li > ul { margin: 0; padding: 0 0 10px 0; border-top: 1px solid var(--menu-bg); background: var(--menu-sub-bg); display: none;}
#fw-nl-treeview > ul > li > ul > li { margin: 0; padding: 0; cursor: pointer; }
#fw-nl-treeview > ul > li > ul > li.sub-menu { background: var(--menu-sub-bg); }
#fw-nl-treeview > ul > li > ul > li.sub-menu.active { background: var(--menu-sub-bg); }
#fw-nl-treeview > ul > li > ul > li.sub-menu > ul > li{ background: var(--menu-sub-bg); }
#fw-nl-treeview > ul > li > ul > li.sub-menu.active > ul > li{ background: var(--menu-sub-bg); }
#fw-nl-treeview > ul > li > ul > li.sub-menu > span { display: flex; align-items: center; padding: 5px 10px 5px 0; border-radius: 0; color: var(--menu-main-color); }
#fw-nl-treeview > ul > li > ul > li.sub-menu.active > span,
#fw-nl-treeview > ul > li > ul > li.sub-menu > span:hover { color: var(--windows11-primary); }
#fw-nl-treeview > ul > li > ul > li.sub-menu > span > i { width: 35px; text-align: center; }
#fw-nl-treeview > ul > li > ul > li.sub-menu.active > span > i { transform: rotate(180deg); }
#fw-nl-treeview > ul > li > ul > li.sub-menu > span > span { order: 2; width: calc(var(--naviwidth) - 45px); padding-top: 2px; font-size: 13px; line-height: 20px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#fw-nl-treeview li.fw-t-mit { display: flex; align-items: center; padding: 5px 10px 5px 0; border-radius: 0; color: var(--menu-main-color); cursor: pointer; background-color: var(--menu-sub-bg);}
#fw-nl-treeview li.fw-t-mit:before, li.sub-sub-menu:before { content:''; display: none;position: absolute;left: 0; z-index: 1; height: 32px; width: 3px; max-width: 3px; overflow: hidden; background-color: #629CC9; }
#fw-nl-treeview li.fw-t-mit:hover:before, li.sub-sub-menu:hover:before { display: block; background-color: var(--windows11-primary); }
#fw-nl-treeview li.fw-t-mit:hover { color: var(--windows11-primary) !important; }
#fw-nl-treeview li.fw-t-mit.current { color: var(--windows11-primary) !important; }
#fw-nl-treeview li.fw-t-mit > i { width: 35px; font-size: 12px; text-align: center; }
#fw-nl-treeview li.fw-t-mit > span { width: calc(var(--naviwidth) - 45px); padding-top: 2px; font-size: 13px; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Level 3 */
#fw-nl-treeview > ul > li > ul > li > ul { margin: 0; padding: 0 0 10px 25px; }
.collaps-sidenavi #fw-nl-treeview > ul > li > ul > li > ul { padding: 0 0 10px 0; }
@media screen and (max-width: 959px){
#fw-nl-treeview > ul > li > span > i:nth-child(1) { width: 45px; }
#fw-nl-treeview > ul > li > span > span:nth-child(2) { width: calc(var(--naviwidth) - 79px); }
#fw-nl-treeview li.fw-t-mit > i { width: 45px; }
#fw-nl-treeview li.fw-t-mit > span { width: calc(var(--naviwidth) - 55px); }
#fw-nl-treeview > ul > li > ul > li.sub-menu > span > i { width: 45px; }
#fw-nl-treeview > ul > li > ul > li.sub-menu > span > span { width: calc(var(--naviwidth) - 55px); }
/*
#fw-nl-treeview > ul > li > ul > li > ul { padding: 0 0 10px 0; }
.hover #fw-nl-treeview > ul > li > ul > li > ul { padding: 0 0 10px 25px; }
body.collaps-sidenavi #fw-nl-treeview > ul > li > ul > li > ul { padding: 0 0 10px 25px; }
*/
}
.collaps-sidenavi #fw-nl-treeview > ul > li > span > i:nth-child(1) { width: 45px; }
.collaps-sidenavi #fw-nl-treeview > ul > li > span > span:nth-child(2) { width: calc(var(--naviwidth) - 79px); }
.collaps-sidenavi #fw-nl-treeview li.fw-t-mit > i { width: 45px; }
.collaps-sidenavi #fw-nl-treeview li.fw-t-mit > span { width: calc(var(--naviwidth) - 55px); }
.collaps-sidenavi #fw-nl-treeview > ul > li > ul > li.sub-menu > span > i { width: 45px; }
.collaps-sidenavi #fw-nl-treeview > ul > li > ul > li.sub-menu > span > span { width: calc(var(--naviwidth) - 55px); }
body.loaded #fw-nl-treeview > ul > li > span,
body.loaded #fw-nl-treeview > ul > li > span > i:nth-child(1),
body.loaded #fw-nl-treeview > ul > li > span > span:nth-child(2),
body.loaded #fw-nl-treeview > ul > li > span > i:nth-child(3),
body.loaded #fw-nl-treeview > ul > li > ul > li.sub-menu,
body.loaded #fw-nl-treeview > ul > li > ul > li.sub-menu > span,
body.loaded #fw-nl-treeview > ul > li > ul > li.sub-menu > span > i,
body.loaded #fw-nl-treeview > ul > li > ul > li > ul,
body.loaded #fw-nl-treeview li.fw-t-mit,
body.loaded #fw-nl-treeview li.fw-t-mit > i,
body.loaded #fw-nl-treeview li.fw-t-mit > span { transition: all 0s; }
.bwTree-container a > span:has(> span.highlight) { background: var(--neonyellowhighlight); }
/*-------| Framework: CRUMP |---------------------------------------------------------------------------------------------*/
#bwCrump ul { display: flex; margin: 0; padding: 0; }
#bwCrump ul li { display: flex; align-items: center; padding: 0; list-style: none; line-height: 20px; font-size: 10px; text-transform: uppercase; font-weight: 700; color: var(--windows11-font); }
#bwCrump ul li a { color: white; line-height: 16px; font-size: 9px; }
#bwCrump ul li i { padding: 0 5px; line-height: 16px; font-size: 9px; }
#fw-c-service ul { display: flex; margin: 0; gap: 5px; padding: 0 10px 0 0; }
#fw-c-service ul li { display: flex; align-items: center; justify-content: center; list-style: none; line-height: 20px; font-size: 10px; text-transform: uppercase; font-weight: 700; }
#fw-c-service ul li i { padding: 0; line-height: 20px; text-align: center; font-size: 14px; width: 20px; color: var(--windows11-font); cursor: pointer; }
/*-------| Framework: FUNCT |---------------------------------------------------------------------------------------------*/
#fw-f-funct ul { display: flex; height: 50px; margin: 0; padding: 5px; }
#fw-f-funct ul li { height: 40px; padding: 0; list-style: none; }
#fw-f-funct ul button { position: relative; width: 40px; height: 40px; padding: 5px; border: none; background: none; cursor: pointer; }
#fw-f-funct ul button i:first-child { float: left; width: 30px; height: 30px; line-height: 30px; font-size: 24px; color: white; opacity: 0.8 }
#fw-f-funct ul button i + i { position: absolute; right: 5px; bottom: 5px; width: 20px; height: 20px; line-height: 20px; font-size: 18px; color: black; text-shadow: 0 0 1px var(--functbg), 0 0 1px var(--functbg), 0 0 1px var(--functbg), 0 0 1px var(--functbg), 0 0 1px var(--functbg), 0 0 1px var(--functbg), 0 0 1px var(--functbg), 0 0 1px var(--functbg); }
#fw-f-funct ul button:hover i:first-child { opacity: 1; }
#fw-f-funct ul button:hover i + i { color: black; }
#fw-f-search { position: relative; width: 180px; height: 28px; margin-right: 10px; min-width: 180px; }
#fw-f-search i { position: absolute; z-index: 2; left: 5px; top: 0; color: var(--windows11-font); line-height: 28px; font-size: 14px; color: var(--gray-dark) }
#fw-f-search input { position: relative; z-index: 3; width: 100%; padding: 0 0 0 28px; border: none; background: none; outline: none; font-size: 14px; line-height: 28px; color: var(--gray-dark) }
#fw-f-search input::placeholder { color: var(--gray-dark)}
#fw-f-search div { position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.25); border-radius: 3px; }
#fw-f-search input:focus::placeholder { color: var(--gray-light)}
#fw-f-search input:focus + div { background: rgba(255,255,255,0.8); }
body.loaded #fw-f-funct ul button i { transition: all 0.3s; }
body.loaded #fw-f-search input { transition: all 0.3s; }
body.loaded #fw-f-search div { transition: all 0.3s; }
#fw-f-funct ul li i.bg-contain.srt { background-size: auto 85%; }
/*-------| Framework: Frame |---------------------------------------------------------------------------------------------*/
#bwFrame { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden /* DAS MUSS HIDDEN SEIN!!! GRUSS BEAT */; }
#bwFrame .dialog { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 10px; overflow: auto; }
#bwFrame .list { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 0; overflow: hidden; }
/*-------| Framework: Hauptcontainer |---------------------------------------------------------------------------------------------*/
#bwContent { position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; }
#bwFrame.filter-200 #bwContent { left: 200px; }
#bwFrame.filter-300 #bwContent { left: 300px; }
#bwFrame.filter-400 #bwContent { left: 400px; }
#bwFrame.filter-500 #bwContent { left: 500px; }
#bwFrame.filter-hide #bwContent { left: 0; }
#bwFrame.log #bwContent { bottom: 100px; }
#bwFrame.sidebar.sidebar-show #bwContent { right: 200px; }
#bwFrame.sidebar #bwContent { right: 0; }
body.loaded #bwContent { transition: all 0.3s; }
/*-------| Framework: Filter |---------------------------------------------------------------------------------------------*/
#bwFilter { position: absolute; z-index: 10; left: 0; top: 0; bottom: 0; width: 200px; border-right: 3px solid var(--menu-main-color); }
#bwFilter.filter-200, #bwFilter.filter-200 > div > div { width: 200px; max-width: 100%; }
#bwFilter.filter-300, #bwFilter.filter-300 > div > div { width: 300px; max-width: 100%; }
#bwFilter.filter-400, #bwFilter.filter-400 > div > div { width: 400px; max-width: 100%; }
#bwFilter.filter-500, #bwFilter.filter-500 > div > div { width: 500px; max-width: 100%; }
#bwFrame.filter-200.filter-hide #bwFilter { left: -200px; }
#bwFrame.filter-300.filter-hide #bwFilter { left: -300px; }
#bwFrame.filter-400.filter-hide #bwFilter { left: -400px; }
#bwFrame.filter-500.filter-hide #bwFilter { left: -500px; }
#bwFilter .filter-toggler { position: absolute; right: 0; top: calc(50% - 15px); height: 30px; width: 15px; background: var(--menu-main-color); border-radius: 3px 0 0 3px; color: white; text-align: center; line-height: 30px; cursor: pointer; font-size: 14px; z-index: 999 }
#bwFilter .filter-toggler:hover { background: var(--menu-main-bg); color: #ffffff; }
#bwFrame.filter-hide #bwFilter .filter-toggler { right: -15px; border-radius: 0 3px 3px 0; }
#bwFrame.filter-hide #bwFilter .filter-toggler i { transform: rotate(180deg); }
body.loaded #bwFilter { transition: all 0.3s; }
body.loaded #bwFilter .filter-toggler { transition: all 0.3s; }
body.loaded #bwFilter .filter-toggler i { transition: transform 0.3s; }
/*-------| Framework: Sidebar |---------------------------------------------------------------------------------------------*/
#bwSidebar { position: absolute; z-index: 10; right: -220px; top: 0; bottom: 0; width: 200px; border-left: 3px solid var(--functbg); background: white; }
#bwFrame.sidebar-show #bwSidebar { right: 0; }
#bwSidebar .sidebar-toggler { position: absolute; left: -38px; top: calc(50% - 15px); height: 30px; width: 15px; background: var(--menu-bg); border-radius: 3px 0 0 3px; color: white; text-align: center; line-height: 30px; cursor: pointer; font-size: 14px; }
#bwSidebar .sidebar-toggler:hover { background: var(--menu-main-bg); color: #ffffff; }
#bwFrame.sidebar-show #bwSidebar .sidebar-toggler { left: 0px; border-radius: 0 3px 3px 0; }
#bwFrame.sidebar-show #bwSidebar .sidebar-toggler i { transform: rotate(180deg); }
/* OFF-CANVAS */
#bwSidebar.bwOffcanvas { box-shadow: 0 0 10px rgba(0,0,0,0.1); }
body.loaded #bwSidebar { transition: all 0.3s; }
body.loaded #bwSidebar .sidebar-toggler { transition: all 0.3s; }
body.loaded #bwSidebar .sidebar-toggler i { transition: transform 0.3s; }
/*-------| Framework: Log |---------------------------------------------------------------------------------------------*/
#bwLog { position: absolute; z-index: 2; left: 0; bottom: 0; right: 0; height: 100px; border-top: 3px solid var(--functbg); background: white; overflow: auto; }
#bwLog .log-toggler { position: absolute; left: calc(50% - 15px); top: 0; width: 30px; height: 15px; background: var(--menu-bg); border-radius: 0 0 3px 3px; color: white; text-align: center; line-height: 15px; cursor: pointer; font-size: 14px; }
#bwLog .log-toggler:hover { background: var(--menu-main-bg); color: #ffffff; }
#bwFrame.filter-200 #bwLog { left: 200px; }
#bwFrame.filter-300 #bwLog { left: 300px; }
#bwFrame.filter-400 #bwLog { left: 400px; }
#bwFrame.filter-500 #bwLog { left: 500px; }
#bwFrame.filter-hide #bwLog { left: 0; }
#bwFrame.sidebar.sidebar-show #bwLog { right: 200px; }
#bwFrame.sidebar #bwLog { right: 0; }
#bwFrame.log-show #bwLog { height: calc(100% + 3px); }
#bwFrame.log-show #bwLog .log-toggler i { transform: rotate(180deg); }
body.loaded #bwLog { transition: all 0.3s; }
body.loaded #bwLog .log-toggler { transition: all 0.3s; }
body.loaded #bwLog .log-toggler i { transition: transform 0.3s; }
/*-------| BWBLOCK |---------------------------------------------------------------------------------------------*/
.bwBlock-overlay { position: absolute; z-index: var(--shadowZ); left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.3s; }
.bwBlock-overlay.show { opacity: 1; }
body > .bwBlock-overlay { position: fixed; }
/*-------| BWTABS |---------------------------------------------------------------------------------------------*/
.bwTabs-loaded { display: flex; flex-direction: column; width: 100%; height: 100%; }
.bwTabs-loaded > ul { display: flex; flex-wrap: wrap; position: relative; z-index: 2; width: 100%; margin: 0 0 -1px 0; padding: var(--gap) var(--gap) 0 var(--gap); overflow: hidden; }
.bwTabs-loaded > ul:before { display: block; content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: -12px; height: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.25); }
.bwTabs-loaded > ul li { position: relative; z-index: 1; margin: 0 3px 0 0; padding: 3px var(--gap); background: white; border-style: solid; color: var(--gray-light); border-color: var(--gray-verylight); border-width: 1px 1px 0 1px; list-style: none; cursor: pointer; transition: color 0.3s; }
.bwTabs-loaded > ul li:hover { color: var(--gray-dark); }
.bwTabs-loaded > ul li.current { color: var(--gray-dark); z-index: 3; }
.bwTabs-loaded > div { width: 100%; flex: 2; position: relative; z-index: 1; }
.bwTabs-loaded > div:after { display: block; content: ""; clear: both; }
.bwTabs-loaded > div > div { float: left; position: relative; z-index: 1; max-height: 100%; overflow-y: auto; margin-left: -1000000%; opacity: 0; background: white; transition: opacity 0.3s; }
.bwTabs-loaded > div > div.show { z-index: 2; opacity: 1; margin-left: 0; }
.bwTabs-loaded.bwTabs-v { flex-direction: row; flex-wrap: nowrap; }
.bwTabs-loaded.bwTabs-v > ul { display: block; width: auto; margin: 0 -1px 0 0; padding: var(--gap) 0 var(--gap) var(--gap); }
.bwTabs-loaded.bwTabs-v > ul:before { left: auto; top: 0; right: -12px; bottom: 0; width: 10px; height: auto; }
.bwTabs-loaded.bwTabs-v > ul li { margin: 0 0 3px 0; padding: 3px var(--gap); border-width: 1px 0 1px 1px; }
.bwTabs-loaded.bwTabs-border > ul li { border-width: 1px; }
.bwTabs-loaded.bwTabs-border > ul li.current { border-bottom-color: white; }
.bwTabs-loaded.bwTabs-border.bwTabs-loaded-v > ul li.current { border-bottom-color: var(--gray-verylight); border-right-color: white; }
.bwTabs-loaded.bwTabs-border > div { border: 1px solid var(--gray-verylight); }
/*-------| BWTtree |---------------------------------------------------------------------------------------------*/
.bwTree-container { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; padding: 1rem 0 0 0.5rem; }
.bwTree-root { padding: 0 0 0.25rem 0.25rem; color: var(--success); }
.bwTree-loaded { position: relative; z-index: 1; height: 100%; max-height: 100%; overflow-y: auto; }
.bwTree-root + .bwTree-loaded { height: calc(100% - 28px); max-height: calc(100% - 28px); }
.bwTree-loaded ul { width: 100%; }
.bwTree-loaded ul li { display: flex; flex-wrap: wrap; padding: 0 0 2px 0; }
.bwTree-loaded ul li a { display: flex; align-items: center; max-width: calc(100% - 24px); }
.bwTree-loaded a > i { font-size: 13px; }
.bwTree-loaded a > span { width: calc(100% - 24px); font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.bwTree-toggler { position: absolute; justify-content: flex-end; z-index: 2; top: 0.25rem; right: 0.5rem; width: auto !important; }
.bwTree-toggler > div { width: 30px !important; margin-left: 2px; cursor: pointer; line-height: 30px; text-align: center; color: var(--gray-light); transition: color 0.3s; width: 100%; }
.bwTree-toggler > div:hover { color: var(--menu-main-bg); }
.bwTree-toggler > div:before { display: block; width: 30px; font: 18px/30px "Font Awesome 6 Free"; font-weight: 900; color: inherit; }
.bwTree-toggler.filter { width: 198px; }
.bwTree-toggler > div:nth-last-child(4) { display: none; align-items: center; width: 100px !important; }
.bwTree-toggler.filter > div:nth-last-child(4) { display: flex;}
.bwTree-toggler.filter > div:nth-last-child(4) input { width: 100%; padding: 0; line-height: 20px; border: none; border-bottom: 1px solid var(--gray-light); outline: none; }
.bwTree-toggler > div:nth-last-child(1):before { content: "\f068"; }
.bwTree-toggler > div:nth-last-child(2):before { content: "\f067"; }
.bwTree-toggler > div:nth-last-child(3):before { content: "\f002"; font-size: 16px; }
/*-------| bwDatatable |---------------------------------------------------------------------------------------------*/
.bwDatatable { width: 100% }
.bwDatatable, .bwDatatable * { border-color: var(--gray-verylight) !important;}
.bwDatatable td, .bwDatatable th { padding: 8px 10px !important; border-right-width: 0 !important; line-height: 20px !important; background-color: #F2F2F2;}
.bwDatatable .dataTables_scrollBody thead th { padding: 0 10px !important; }
.bwDatatable,
.bwDatatable > div,
.bwDatatable > div > div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; font-size: 14px; }
.bwDatatable .dataTables_scrollHead { background-color: var(--table-color); }
.bwDatatable .dataTables_scrollHead > div > table > thead > tr { border-bottom: 0; }
.bwDatatable thead { font-size: 13px !important; }
.bwDatatable .dataTables_scrollBody { max-height: calc(100% - 37px) !important; background: white; }
.bwDatatable .dataTables_scrollBody td { background-color: white !important; box-shadow: none !important; }
.bwDatatable .dataTables_scrollBody > table > thead > tr { height: 0 !important; border: 0;}
.bwDatatable .dataTables_scrollBody > table > tbody > tr > td:first-child { background-color: #F2F2F2 !important; font-weight: 700; font-size: 13px !important; }
.bwDatatable .dataTables_scrollBody > table > tbody > tr > td:first-child:last-child { background-color: white !important; }
.bwDatatable .dataTables_scrollBody tr:hover > td { background-color: var(--table-color) !important; cursor: pointer; }
.bwDatatable .dataTables_scrollBody tr.selected > td { background-color: #d9edf7 !important; }
.bwDatatable .dataTables_scrollBody > table > tbody > tr.selected > td:first-child { background-color: #d9edf7 !important; }
/*-------| MDB Correction |---------------------------------------------------------------------------------------------*/
.loading-spinner { z-index: 1100 !important; }
.bg-center { background-position: center; }
.bg-norepeat { background-repeat: no-repeat; }
.bg-contain { background-size: contain; }
.col-mw-100 { width: 100%; max-width: 100px; }
.col-mw-200 { width: 100%; max-width: 200px; }
.col-mw-300 { width: 100%; max-width: 300px; }
.col-mw-400 { width: 100%; max-width: 400px; }
.col-mw-500 { width: 100%; max-width: 500px; }
.col-mw-600 { width: 100%; max-width: 600px; }
.col-mw-700 { width: 100%; max-width: 700px; }
.col-mw-800 { width: 100%; max-width: 800px; }
.col-mw-900 { width: 100%; max-width: 900px; }
.col-mw-1000 { width: 100%; max-width: 1000px; }
.col-mw-1100 { width: 100%; max-width: 1100px; }
.col-mw-1200 { width: 100%; max-width: 1200px; }
.col-mw-1300 { width: 100%; max-width: 1300px; }
.col-mw-1400 { width: 100%; max-width: 1400px; }
.col-mw-1500 { width: 100%; max-width: 1500px; }
.col-mw-1600 { width: 100%; max-width: 1600px; }
.col-mw-1700 { width: 100%; max-width: 1700px; }
.col-mw-1800 { width: 100%; max-width: 1800px; }
.col-mw-1900 { width: 100%; max-width: 1900px; }
.col-mw-2000 { width: 100%; max-width: 2000px; }
/*-------| SORT / NESTABLE |---------------------------------------------------------------------------------------------*/
.dd, .dd-list { display: block; padding: 0; list-style: none; }
.dd-item { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; line-height: 20px; }
.dd-handle { display: block; min-height: 38px; margin: 5px 0; padding: 8px 12px; background: var(--gray-beyondultralight); border: 1px solid var(--menu-bg); color: var(--gray-dark); text-decoration: none; box-sizing: border-box; cursor: pointer; }
.dd-handle:hover { color: black; background: var(--menu-main-bg15); border-color: var(--menu-main-bg50); }
.dd-placeholder { display: block; min-height: 38px; margin: 5px 0; padding: 8px 12px; background: var(--menu-main-bg15); border: 1px dashed var(--menu-main-bg); text-decoration: none; box-sizing: border-box; cursor: pointer; }
.dd-dragel { position: absolute; pointer-events: none; z-index: 999; opacity: .8; }
.dd-dragel .dd-handle { margin-top: 0; background: var(--menu-main-bg15); border: 1px solid var(--menu-main-bg50); color: var(--menu-main-bg); }
/*
.dd-dragel>li>.dd-handle{color:#4B92BE;background:#F1F5FA;border-color:#D6E1EA;border-left:2px solid #777;position:relative}
.dd-dragel>li>.dd-handle[class*=btn-]{color: pink}
.dd-empty,.dd-handle,.dd-placeholder,.dd2-content{-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.dd2-content[class*=btn-],.dd2-handle.btn-yellow{text-shadow:none!important}
.dd,.dd-item>button,.dd-list{position:relative}
.dd{margin:0;max-width:600px;line-height:20px}
.dd-list{margin:0}
.dd-list .dd-list{padding-left:30px}
.dd-collapsed .dd-list{display:none}
.dd-empty,.dd-item,.dd-placeholder{display:block;position:relative;margin:0;padding:0;min-height:20px;line-height:20px}
.dd-handle,.dd2-content{display:block;min-height:38px;margin:5px 0;padding:8px 12px;background:#F8FAFF;border:1px solid #DAE2EA;color:#7C9EB2;text-decoration:none;font-weight:700;box-sizing:border-box}
.dd-handle:hover,.dd2-content:hover{color:#438EB9;background:#F4F6F7;border-color:#DCE2E8}
.dd-handle[class*=btn-],.dd2-content[class*=btn-]{color:#FFF;border:none;padding:9px 12px}
.dd-handle[class*=btn-]:hover,.dd2-content[class*=btn-]:hover{opacity:.85;color:#FFF}
.dd2-handle+.dd2-content,.dd2-handle+.dd2-content[class*=btn-]{padding-left:44px}
.dd-handle[class*=btn-]:hover,.dd2-content[class*=btn-] .dd2-handle[class*=btn-]:hover+.dd2-content[class*=btn-]{color:#FFF}
.dd-item>button:hover~.dd-handle,.dd-item>button:hover~.dd2-content{color:#438EB9;background:#F4F6F7;border-color:#DCE2E8}
.dd-item>button:hover~.dd-handle[class*=btn-],.dd-item>button:hover~.dd2-content[class*=btn-]{opacity:.85;color:#FFF}
.dd2-handle:hover~.dd2-content{color:#438EB9;background:#F4F6F7;border-color:#DCE2E8}
.dd2-handle:hover~.dd2-content[class*=btn-]{opacity:.85;color:#FFF}
.dd2-item.dd-item>button{margin-left:34px}
.dd-item>button{display:block;z-index:1;cursor:pointer;float:left;width:25px;height:20px;margin:5px 1px 5px 5px;padding:0;text-indent:100%;white-space:nowrap;overflow:hidden;border:0;background:0 0;font-size:12px;line-height:1;text-align:center;font-weight:700;top:4px;left:1px;color:#707070}
.dd-item>button:before{font-family:FontAwesome;content:'\f067';display:block;position:absolute;width:100%;text-align:center;text-indent:0;font-weight:400;font-size:14px}
.dd-item>button[data-action=collapse]:before{content:'\f068'}
.dd-item>button:hover{color:#707070}
.dd-item.dd-colored>button,.dd-item.dd-colored>button:hover{color:#EEE}
.dd-empty,.dd-placeholder{margin:5px 0;padding:0;min-height:30px;background:#F0F9FF;border:2px dashed #BED2DB;box-sizing:border-box}
.dd-empty{border-color:#AAA;border-style:solid;background-color:#e5e5e5}
.dd-list>li[class*=item-]{border-width:0;padding:0}
.dd-list>li[class*=item-]>.dd-handle{border-left:2px solid;border-left-color:inherit}
.dd-list>li>.dd-handle .sticker{position:absolute;right:0;top:0}
.dd-dragel>li>.dd2-handle,.dd2-handle{left:0;top:0;width:36px;margin:0;text-align:center;padding:0!important;line-height:38px;height:38px;background:#EBEDF2;border:1px solid #DEE4EA;cursor:pointer;overflow:hidden;position:absolute;z-index:1}
.dd-dragel>li>.dd2-handle,.dd2-handle:hover{background:#E3E8ED}
.dd2-handle[class*=btn-]{text-shadow:none!important;background:rgba(0,0,0,.1)!important;border-right:1px solid #EEE}
.dd2-handle[class*=btn-]:hover{background:rgba(0,0,0,.08)!important}
.dd-dragel .dd2-handle[class*=btn-]{border-color:transparent #EEE transparent transparent}
.dd2-handle.btn-yellow{background:rgba(0,0,0,.05)!important;border-right:1px solid #FFF}
.dd2-handle.btn-yellow:hover{background:rgba(0,0,0,.08)!important}
.dd-dragel .dd2-handle.btn-yellow{border-color:transparent #FFF transparent transparent}
.dd-item>.dd2-handle .drag-icon{display:none}
.dd-dragel>.dd-item>.dd2-handle .drag-icon{display:inline}
.dd-dragel>.dd-item>.dd2-handle .normal-icon{display:none}
.dd-empty,.dd-item,.dd-placeholder{display:block;position:relative;margin:0;padding:0;min-height:20px;line-height:20px}
*/
/* BOOTBOX */
.bootbox-close-button { float: right; font-size: 21px; color: #000; text-shadow: 0 1px 0 #fff; opacity: .2; transition: opacity 0.3s; border: none; background: none; }
.bootbox-close-button:hover { opacity: .7; }
#ag-grid { height: 100%; }
#ag-grid .ag-cell-value { padding-top: 5px; padding-bottom: 5px; line-height: 18px; }
#ag-grid .ag-cell[col-id="cr"] { background: #f5f7f7 !important; text-align: right; }
#ag-grid .ag-row:hover .ag-cell[col-id="cr"] { background: #ecf0f1 !important; }
#ag-grid .ag-row-selected .ag-cell[col-id="cr"] { background: #b8e0f9 !important; }
#ag-grid .ag-row-selected:hover .ag-cell[col-id="cr"] { background: #aad5ef !important; }
#ag-grid .ag-header-row-column-filter input[class^=ag-][type=text]{ height: 24px; border-color: #c5c5c5; }
#ag-grid .text-selectable { user-select: text; }
.ag-toggle-all { position: absolute; left: 6px; top: 3px; right: 6px; bottom: 3px; cursor: pointer; }
.ag-toggle-all:before { display: block; content: ""; position: absolute; right: 0; bottom: 3px; border-width: 8px; border-style: solid; border-color: transparent #e5e5e5 #e5e5e5 transparent; }
.ag-toggle-all:hover:before { border-color: transparent #c5c5c5 #c5c5c5 transparent; }
.ag-center-cols-container { min-width: 100%; }
.ag-cell-hasbeenchanged { background-color: #ffe1c2; }
/*
* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; font: 14px/1.5 var(--ag-font-family); color: #393939; }
table { border-collapse: collapse; border-spacing: 0; }
.gritter-error { background: #b74635; }
.gritter-success { background: #629b58; }
.gritter-top { background: none !important; }
.label { padding: 0.2em 0.6em; font-size: 12px; }
.label.label-success { color: white; background-color: #82AF6F; }
.label.label-danger { color: white; background-color: #D15B47; }
*/
/* styles for the icon wrap */
.icon-wrapper {
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.icon-wrapper::after {
content: '';
position: absolute;
padding: 50%;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s;
z-index: -1;
}
.icon-wrapper:hover::after {
background-color: rgba(0, 0, 0, .25);
}
.icon-wrapper-nav:hover {
color: black !important;
}
.icon-wrapper-nav:hover::after {
background-color: white;
/* background-color: rgba(255, 255, 255, 0.25); */
}
.dropdown {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 5px;
margin-bottom: -5px;
}
.dropdown-content {
display: none;
position: absolute;
top: 25px;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content span {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
cursor: pointer;
}
.dropdown-content span:hover {background-color: #f1f1f1}
/*-------| Login |---------------------------------------------------------------------------------------------*/
#login_wrapper
{
background-color: white;
}
#loginform
{
padding-top: 20px;
}
#login_innerPanel
{
height: 100%;
background: rgba(0,0,0,.5);
}
#login_info
{
background-image: url("../img/login-register.webp");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height:100%;
}
/* .col-md-4
{
height:100%;
padding:0;
} */
/* .skin-1
{
background-color: white;
} */
#login_img
{
padding: 20px;
width: 150px;
display: inline-block;
}
#login_h2
{
color: white;
line-height: 36px;
font-size: 24px;
}
#login_h3
{
font-weight: bold;
font-size: 16px;
line-height: 30px;
font-family: Rubrik, sans-serif;
text-transform: uppercase;
margin-bottom: 0px;
}
#login_mutedPanel
{
font-style:italic;
color: rgba(255,255,255,.7);
padding: 20px 0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active
{
transition: background-color 9999s ease-in-out 0s;
}
.lucee-modal-header {
background-color: #F90;
}