/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Nov 11 2023 | 06:11:36 */ /* ///// Web Application CSS /////// ///////////////////////////////// *//*** Webapp theme for AJAX-based pages ***/ /*** Theme Variables ***/ :root { --webapp-theme-background-color: white; --webapp-sidebar-selected: 0; --webapp-topbar-bg: transparent;/* rgba(var(--a-black),1) */ --webapp-sidebar-bg: #31403A; --webapp-divider-color: rgba(0,0,0, 0.3); --webapp-divider-shadow: -1px -1px 1px rgba(0,0,0, 0.2); --webapp-wrapper-max-width: 1400px; --a-tab-frame-bg: transparent; } /*** Web Application Reset ***/ body { background-color:#f9f9f9; /* overflow:hidden; */ height:100vh; } h2 { font-size:1.25rem; line-height:2rem; } [new]:after { content: attr(new); font-size:8px; background:red; box-sizing:border-box; display:flex; align-items:center; justify-content:center; border-radius:16px; width:16px; height:16px; color:white; position:absolute; top:-2px; right:-2px; } .webapp-wrapper { max-width: var(--webapp-wrapper-max-width); width:100%; margin-left:auto; margin-right:auto; box-sizing:border-box; } /*** Topbar ***/ #webapp-topbar { background:var(--webapp-topbar-bg); box-sizing:border-box; --a-font-color: rgba(var(--a-font5-color),1); color:white; z-index:9; --a-tab-line-color: #61CE70; } #webapp-topbar button { text-shadow:none !important; } #webapp-topbar .group { border:1px solid #cccccc11; box-sizing:border-box; } #webapp-search input { width:300px !important; height:32px !important; } #webapp-topbar input { outline:none; } #webapp-logo { text-decoration:none !important; color:inherit; } #webapp-topbar ::placeholder { color: rgba(255,255,255,0.50); font-style:italic } #webapp-topbar [type=text] { background: rgba(0,0,0,0.25); color:white; border-radius:3px; border:0px; padding:0px 10px; } /*** Topbar Navigation ***/ #webapp-nav { position:absolute; z-index:8; opacity:0; left:-12px; top:0px; bottom:0px; width:0%; } #webapp-apps-button:focus #webapp-nav { width:298px; opacity:1; height:100vh; background: #fff; cursor:default; } /*** Side Bar ***/ #webapp-sidebar { background:var(--webapp-sidebar-bg); box-sizing:border-box; /**/ position:absolute; top:48px; left:0px; bottom:0px; width:48px; padding:4px; display:flex; flex-wrap: nowrap; flex-direction: column; gap:5px; z-index:2; display:none; } #webapp-sidebar:before { content:''; border:1px solid rgba(0,0,0,0.3); box-shadow: -2px 0 5px rgba(0,0,0,1); position:absolute; top:0px; right:0px; bottom:0px; } #webapp-sidebar > * { outline:none; color:white; display:flex; align-items: center; align-self:center; justify-content:center; } #webapp-sidebar > hr { border-color: var(--webapp-divider-color); border-style:solid; border-width:1px 0 0 0; width:25px; margin:-3px 0; box-shadow: var(--webapp-divider-shadow); } #webapp-sidebar > hr:last-of-type { margin-top:auto; } #webapp-sidebar > button { background: rgba(255,255,255,0.00); font-size:18px; border-radius:50%; border:0px; width:40px; height:40px; padding:0px; box-shadow:none; outline:none; position:relative; overflow:visible; } #webapp-sidebar > button:hover { background: rgba(255,255,255,0.10); } #webapp-sidebar > button:active { background: rgba(255,255,255,0.20); text-shadow:0px 0px 5px gold; } #webapp-sidebar > button[new]:after { border:2px solid var(--webapp-sidebar-bg); } #webapp-sidebar > .bar-highlight { position:absolute; z-index:1; height:40px; width:3px; left:0px; top:4px; background:dodgerblue; } /*** Sidebar Drawer ***/ /*** Body ***/ #webapp-body { display:flex; flex-direction:column; flex-grow:3; z-index:1; /* position:absolute; top:90px; */ background: var(--a-tab-frame-bg); width:100%; max-width: var(--webapp-wrapper-max-width); margin-left:auto; margin-right:auto; padding-left:15px; padding-right:15px; box-sizing:border-box; } #webapp-body > div { position:relative; box-sizing:border-box; height:100%; width:100%; border:0; } #webapp-body > div.tab-content { padding-left:0px !important; } /*** Widgets ***/ .webapp-panel { background-color: var(--webapp-theme-background-color); display:inline-block; min-width:250px; min-height:100px; } @media (min-width:601px){ #webapp-sidebar .bar-highlight { top: calc(4px + var(--webapp-sidebar-selected)*45px); --webapp-separator:0; } } @media (max-width:600px){ #webapp-sidebar { top:auto; bottom:0px; left:0px; right:0px; flex-direction: row; width:auto; height:48px; z-index:1; box-sizing:border-box; } #webapp-sidebar > hr { border-width:0px 1px 0px 0px; height:25px; width:0px; margin-left:auto; margin:0 -3px; } #webapp-sidebar > hr:last-of-type { margin-left:auto; margin-top:0px; } #webapp-sidebar .bar-highlight { left: calc(4px + var(--webapp-sidebar-selected)*45px); height:3px; width:40px; top:auto; bottom:0px; z-index:1; } #webapp-sidebar:before { top:-5px; right:-5px; left:-5px; bottom:auto; z-index:1 } #webapp-body { left:0px; bottom:48px; z-index:1; } } @media (max-width : 960px){ #webapp-logo h1 { font-size:20px !important; } } @media print { #webapp-topbar .toolbar { padding:0px !important; } @page { margin: 0; size: 8.5in 11in; size: portrait; -webkit-print-color-adjust: exact; image-rendering: -webkit-optimize-contrast; margin-top: 20mm !important; margin-bottom: 14mm !important; } body { margin: 0 !important; margin-top:-10px !important; } table { empty-cells:show; margin-top:60px; } img { image-rendering: -webkit-optimize-contrast; } input[type],select,textarea { background-color:#ffffff !important; -webkit-print-color-adjust: exact; border-radius:0 !important; } #nav-menu,#nav-footer,#acc-info, button[type=submit] { display:none; } h2 { margin: 0 !important; padding: 0px !important; } .e-con-inner { row-gap:0 !important; } .elementor-col-90 { width:90% !important; } .elementor-col-80 { width:80% !important; } .elementor-col-60 { width:60% !important; } .elementor-col-50 { width:50% !important; } .elementor-col-40 { width:40% !important; } .elementor-col-30 { width:30% !important; } .elementor-col-25 { width:25% !important; } .elementor-col-20 { width:20% !important; } .elementor-element { page-break-inside: auto !important; } #nav-header { -webkit-print-color-adjust: exact; margin: 0 !important; padding: 0 0 10px !important; height: auto !important; min-height: auto !important; } #nav-header > :first-child { border-bottom:2px double #ccc; } #nav-header h1 { font-size:24px !important; } #nav-header h2 { font-size:20px !important; } #form-wrapper { overflow:hidden; padding: 0 !important; } #form-wrapper h2 { font-size:20px !important; } #form-wrapper h4 { font-size:18px !important; margin: 40px 0 20px !important; padding: 0 10px !important; } #form-wrapper label, #form-wrapper input[type], #form-wrapper select, #form-wrapper textarea { font-size:9px !important; } #form-wrapper select, #form-wrapper input[type] { border-width: 0 0 1px 0; padding: 0 5px !important; height:20px !important; min-height:20px !important; } #form-wrapper textarea { padding: 5px !important; } #form-wrapper label { padding: 0 0 2px !important; } #form-wrapper label:after { color:red !important; -webkit-print-color-adjust: exact; } #form-wrapper [invalid], #form-wrapper [required][value='XXX'] { background-color:mistyrose !important; color:red !important; -webkit-print-color-adjust: exact; } } /*** legacy (wordpress) *** @media print { #webapp-topbar .toolbar { padding:0px !important; } @page { margin: 0; size: 8.5in 11in; size: portrait; -webkit-print-color-adjust: exact; image-rendering: -webkit-optimize-contrast; } body { margin: 0; margin-top:-10px; } table { empty-cells:show; } img { image-rendering: -webkit-optimize-contrast; } input[type],select,textarea { background-color:#ffffff !important; -webkit-print-color-adjust: exact; border-radius:0 !important; } #nav-menu,#nav-footer,#acc-info, button[type=submit] { display:none; } h2 { margin: 0 !important; padding: 0px !important; } .e-con-inner { row-gap:0 !important; } .elementor-col-90 { width:90% !important; } .elementor-col-80 { width:80% !important; } .elementor-col-60 { width:60% !important; } .elementor-col-50 { width:50% !important; } .elementor-col-40 { width:40% !important; } .elementor-col-30 { width:30% !important; } .elementor-col-25 { width:25% !important; } .elementor-col-20 { width:20% !important; } #nav-header { -webkit-print-color-adjust: exact; margin: 0 !important; padding: 60px 0 10px !important; height: auto !important; min-height: auto !important; margin:0 60px 0 !important; } #nav-header > :first-child { border-bottom:2px double #ccc; } #nav-header h1 { font-size:20px !important; height: auto !important; } #nav-header h2 { font-size:20px !important; } #form-wrapper { overflow:hidden; padding: 0 !important; } #form-wrapper h2 { font-size:20px !important; } #form-wrapper h4 { font-size:18px !important; margin: 40px 0 20px !important; padding: 0 10px !important; } #form-wrapper label, #form-wrapper input[type], #form-wrapper select, #form-wrapper textarea { font-size:9px !important; } #form-wrapper select, #form-wrapper input[type] { border-width: 0 0 1px 0; padding: 0 5px !important; height:20px !important; min-height:20px !important; } #form-wrapper textarea { padding: 5px !important; } #form-wrapper #form-wrapper label { padding: 0 0 2px !important; } #form-wrapper label:after { color:red !important; -webkit-print-color-adjust: exact; } #form-wrapper [invalid[required][value='XXX'] { background-color:mistyrose !important; color:red !important; -webkit-print-color-adjust: exact; } } */ #form-wrapper [invalid], #form-wrapper [required][value='XXX'] { background-color:mistyrose !important; color:red !important; -webkit-print-color-adjust: exact; }