/* Package: Variables */
:root { --content_w: 5px; --crud_h: 30px; --crud_p: 10px; }
@font-face { font-family: 'Calibri'; src: url('font_calibri.ttf'); src: local('Calibri'), local('Calibri'), url('font_calibri.ttf') format('truetype'), url('font_calibri.ttf#font') format('ttf'); }

/* Package: Basics */
html, body { height: 100%; margin: 0; padding: 0; display: flex; flex-direction: column;  background: radial-gradient(#E9E8E7, #3B425B); scroll-behavior: smooth;  -webkit-font-smoothing: antialiased;  scrollbar-width: none; background-repeat: no-repeat; background-attachment: fixed; }
* { box-sizing: border-box; font-family: Calibri; font-size: 10pt; }
a { display: grid; display: inline-block; }
div { display: flex;flex-direction: column;justify-content: center; vertical-align: top; align-items: center; width: 100%; }
div.w_site { width: 100%; object-fit: contain; max-width: 1200px; }
div.w_site_crud { width: 100%; max-width: 450px; }
div.w_menu { width: 230px; }
div.w_content { width: 100%; }
div.w_error { width: 100%; align-items: center; }
div.w_status { width: 100%; max-width; 200px; }
div.site { position: relative; width: 100%; display: flex; box-sizing: border-box; align-items: center; text-align: center; overflow: hidden; }
div.h_part { display:table; table-layout: fixed; }
div.h_row { display:table-row; }
div.h_row > * { padding: var(--content_w); }
div.l_overflow { /* overflow: hidden; */ }
div.h_cell { display:table-cell; position: relative; }
div.c_wrapper { padding: var(--content_w); }
div.line_wrapper { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
div.t { display:table; table-layout: auto; width: auto; margin-left: auto; margin-right: auto; }
div.t_row { display: table-row; }
div.t_cell { display: table-cell; width: auto; height: auto; vertical-align: middle; text-align: center; padding: calc(var(--content_w) / 2); }
form { width:100%; margin: 0px;padding: 0px; }
form > * { align-items: center; margin-left: auto; margin-right: auto; }
img { display: block; width: auto; height: auto; margin-left: auto; margin-right: auto; }
div.space { height: calc(var(--content_w) * 2); }
div.text { display: inline-block; text-align: left; align-items: center; width: auto; }
.hovermouse { cursor: pointer; }
.none-interactive { pointer-events: none; }

/* Package: IndholdTopMenu */
div.itm { width:99%; display: grid; grid-template-columns: 1fr max-content 1fr; margin-left: var(--content_w); margin-right: var(--content_w) }
div.itm >:nth-child(1) { display: flex; flex-direction: row; width: auto; justify-content: left;}
div.itm >:nth-child(1) > * { display: flex; flex-direction: row; height: 100%; width: auto; margin-right: var(--content_w); margin-left: calc(var(--crud_h) * 0.05); }
div.itm >:nth-child(2) { align-items: center; }
div.itm >:nth-child(3) { display: flex; flex-direction: row; width: auto; justify-content: right; }
div.itm >:nth-child(3) > * { display: flex; flex-direction: row; height: 100%; width: auto; margin-left: var(--content_w); margin-right: calc(var(--crud_h) * 0.05); }
div.itm_popout_right { width: 100%; background: scale(1); transition: all 0.5s ease-in; transition-delay: 0s; }
div.itm_popout_right:hover >:nth-child(2) { transform: scale(1.1); transition: all 0.1s ease-in; transition-delay: 0s; }
div.itm_popout_left { width: 100%; background: scale(1); transition: all 0.5s ease-in; transition-delay: 0s; }
div.itm_popout_left:hover >:nth-child(1) { transform: scale(1.1); transition: all 0.1s ease-in; transition-delay: 0s; }
div.itm_cell { display: flex; flex-direction: row; white-space: nowrap; }

/* Package: Layouts */
div.floatTopLeft { z-index: 1; position: fixed;left: 20px;top: 20px; } 
div.floatTop { z-index: 1; position: fixed; top: 25px; left: 50%; transform: translateX(-50%); }
div.floatBottom { z-index: 1; position: fixed; bottom: 25px; left: 25px; }
div.floatCrudTopLeft { position: absolute; width: 30%; top: calc(var(--crud_h) + var(--content_w) + 12px); left: calc(var(--crud_h) + var(--content_w) - 18px); } 
div.floatTopRight { z-index: 1; position: fixed;right: 20px;top: 20px; } 
div.floatCrudTopRight { position: absolute; width: 30%; top:  calc(var(--crud_h) + var(--content_w) + 12px); right: calc(var(--crud_h) + var(--content_w) - 18px); } 
div.floatCenter { pointer-events: none; z-index: 1;position: fixed; top: 20%; left: 50%; margin-left: -100px; margin-top: -100px; }
div.menuFloatAnchor { position: absolute; top: 0; left: 0; z-index: 200; }
div.menuFloat { position: absolute; width: 200px; top: -25px; left: 0px; }

/* Package: Wrappers */
div.wrapper { width: inherit; background: #F5F5F5;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E9E8E7), to(#3B425B)); } 
div.wrapper_a { border: 0.13rem solid rgba(80, 80, 100, 1); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); border-radius: 10px; }	
div.wrapper_b { }
div.wrapper_c { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); border: 0.13rem solid rgba(180, 180, 200, 1); border-radius: 6px; }

/* Package: Warnings and Errors */
div.shotbox_notification { background: #FFFFFF; padding: 8px; margin-bottom: 10px; }
div.crud_error { width: 50px; height: 28px; background:linear-gradient(45deg, rgba(255, 186, 1, 0.3), rgba(255, 255, 255, 0)); }
div.warning_outer { width: 100%; height: auto; border: double 1em transparent; border-radius: 25px; background-image: linear-gradient(white, white), linear-gradient(to right, red, gold); background-origin: border-box; background-clip: content-box, border-box; padding: 8px;box-shadow: #00000040 0px 0px 1px 2px; }
div.warning_inner { background: radial-gradient(red, gold); border-radius: 4px; }
div.warning_content { padding: 10px; }
div.warning { background: repeating-linear-gradient(45deg, #FF0000, #FF0000 10px, #D70D0D 10px, #AF1111 20px); border-radius: 5px; border: 2px solid red; padding: 10px; }
div.warning_text_title { font-size: 25pt; color: #FFFFFF; font-weight: bold; text-shadow: 2px 2px 2px #666, -1px 1px 2px #666, -1px -1px 2px #666, 1px -1px 2px #666; }
div.warning_text { font-size: 12pt; color: #FFFFFF; font-weight: normal; text-shadow: 2px 2px 2px #666, -1px 1px 2px #666, -1px -1px 2px #666, 1px -1px 2px #666; padding-bottom: 20px; }
div.shoutbox_warning { display: flex; flex-direction: row; padding: 8px; width: 100%; min-height: 30px; text-align: left; background: #F5F5F5; background: linear-gradient(0deg, #D6D3D0, #FFFFFF); }
div.shoutbox_normal { background: #F5F5F5; background: linear-gradient(0deg, #FFE5FD, #FFFFFF); width: 100%; min-height: 30px; align-items: end; }
div.shoutbox_holder { position: relative; width: auto; display: flex; flex-direction: row; justify-content: flex-start; left: 0; transform: translateX(25px); }

/* Package: Layers */
div.layer_html { width: 100%; position: relative; flex-grow: 1; display: flex; flex-direction: column; }
div.layer_body { z-index: 0; width: 100%; flex-grow: 1; position: relative; justify-content: flex-start; }
div.layer { transition: opacity 1s ease-in-out; position: absolute; display: flex; justify-content: center; align-items: center; top: 50%; left: 50%; transform: translate(-50%, -50%); position: fixed; width: 100vw; height: 100vh; z-index: 0; width: auto; }
div.layer_inactive > div:first-of-type, .layer_active > div:first-of-type { transition: all 0.25s ease-in-out; }
div.layer_inactive > div:first-of-type { transform: scale(1.05); opacity: 0.2; filter: brightness(0.9) grayscale(100%); pointer-events: none; }
div.layer_active > div:first-of-type { transform: scale(1); opacity: 1; filter: brightness(1) grayscale(0%); pointer-events: auto; }

/* Package: Animations */
.fadeNormal { opacity: 1; }
@keyframes fadeIn { 0% {opacity: 0;}100% {opacity: 1;} } 
.fadeIn { animation: fadeIn; animation-duration: 0.4s; animation-fill-mode: both; } 
@keyframes fadeOut { 0% {opacity: 1;}100% {opacity: 0;} } 
.fadeOut { animation: fadeOut; animation-duration: 3s; animation-fill-mode: both; animation-delay: 1.5s; }
@keyframes fadeOutQuick { 0% {opacity: 1; } 100% {opacity: 0; } } 
.fadeOutQuick { animation: fadeOutQuick; animation-duration: 0.1s; animation-fill-mode: both; }
@keyframes submitButton { 0% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.5; } }
.submitButton { animation: submitButton; animation-duration: 0.3s; animation-fill-mode: both; }
@keyframes moveleft { 0% { transform: translateX(0px); } 100% { transform: translateX(-105%); pointer-events: none; } }
.moveleft { animation: moveleft 2s normal; animation-timing-function: ease-in-out; animation-delay: 1.8s; animation-fill-mode: forwards; }
@keyframes bounce { 0% { transform: scale(1); } 100% { transform: scale(0.95); } }
.bounce { animation: bounce 1s infinite; animation-timing-function: ease-in-out; animation-direction: alternate; }
.popout { transform: scale(1) translateZ(0); backface-visibility: hidden; transition: transform 0.5s ease; }
.popout:hover { transform: scale(1.05) translateZ(0); transition: transform 0.1s ease; }
.glowy {  transform: scale(1); transition: all 0.5s ease-in; transition-delay: 0s;}
.glowy:hover { filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5)); transition: all 0.1s ease-in; transition-delay: 0s;}
.hoverfading { opacity: 0; transform: scale(1); transition: all 0.5s ease-in; transition-delay: 0s; }
.hoverfading:hover { opacity: 1; filter: transition: all 0.1s ease-in; transition-delay: 0s;}
@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); }}

/* Package: Tooltip */
.tooltip { position: relative; display: inline-block; }
.tooltip:hover { cursor: pointer; }
.tooltip .tooltiptext { transition: all 1.0s ease-out; transition-delay: 0.5s; position: fixed; bottom: 20px; right: 20px; opacity: 0; padding: 5px; z-index: 1; background:linear-gradient(45deg, #D6D3D0, #FFFFFF);margin: 2px;border: 2px solid #C8C8C8;border-radius: 6px;box-shadow: #666 0px 1px 2px;}
.tooltip:hover .tooltiptext { opacity: 1; transition: all 0.3s ease-in; transition-delay: 0.2s; }

/* Package: FlexFiles */
div.meter_container { position: relative; display: flex; background:linear-gradient(0deg, #71C000, #5FA200); z-index: 31; height: 21px; width: 200px; align-items: flex-start; justify-content: center; }
div.meter_child { background: #96FF01; border-radius: 3px; z-index: 32; height: 100%; }
div.meter_child_text { position: absolute; z-index: 33; color: #FFFFFF; text-shadow: 1px 1px 1px #000000; }

/* Package: Range Slider */
.styler_rangeslider_variable { background:linear-gradient(0deg, #DBDBDB, #FFFFFF); width: auto; height: 22px; border-top: 2px solid #DBDBDB; border-left: 2px solid #DBDBDB; border-right: 2px solid #DBDBDB; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 5px; }
.styler_rangeslider_variable_left { padding-right: 20px; position: absolute; left: 10px; transform: translateX(-100%); height: 22px; background:linear-gradient(0deg, #DBDBDB, #FFFFFF); width: auto; border-top: 2px solid #DBDBDB; border-left: 2px solid #DBDBDB; border-bottom: 2px solid #DBDBDB; border-top-left-radius: 10px; border-bottom-left-radius: 10px; padding: 5px; }
.styler_rangeslider_variable_right { padding-left: 20px; position: absolute; right: 10px; transform: translateX(100%); height: 22px;background:linear-gradient(0deg, #DBDBDB, #FFFFFF); width: auto; border-top: 2px solid #DBDBDB; border-right: 2px solid #DBDBDB; border-bottom: 2px solid #DBDBDB; border-top-right-radius: 10px; border-bottom-right-radius: 10px; padding: 5px; }
.styler_rangeslider_value { font-size: 11pt; }
.styler_rangeslider_button:before { position: absolute;content: '';height: 16px;width: 16px;left: 3px;bottom: 8px;background-color: #FFFFFF;-webkit-transition: 0.4s; transition: 0.4s; } 
.styler_rangeslider { display: flex; flex-direction: row; background: linear-gradient(90deg, #D6D3D0, #FFFFFF); border: 2px solid #dcdcdc; padding: 0px; width: auto; border-radius: 16px; }
.styler_rangeslider div:first-child { margin-right: 5px; background: #999999; width: 25px; height: 20px; transform: translateX(2px); cursor: pointer; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.styler_rangeslider div:first-child > * { transform: scale(0.5); }
.styler_rangeslider div:last-child { margin-left: 5px; transform: scale(0.5); background: #999999; width: 25px; height: 20px; transform: translateX(-2px); cursor: pointer; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.styler_rangeslider div:last-child > * { transform: scale(0.5); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; cursor: pointer; }
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 18px; background: linear-gradient(to right, #ADB7C4 0%, #E9ECF0 var(--ratio), #D6D3D0 var(--ratio), #FFFFFF 100%); border-radius: 10px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 18px; width: 18px; border-radius: 50%; background: #FFFFFF; border: 3px solid #000000; box-shadow: 0 0 0 1px #414B57; }

/* Package: Tabs */
div.tabfields { display: flex; flex-direction: row; margin: 0px; }
div.tab { position: relative; background:linear-gradient(180deg, #D6D3D0, #FFFFFF);margin-left: 2px; margin-right: 2px; margin-top: 2px; vertical-align: baseline;font-size: 10pt;color: #000000;font-weight: bold;min-width: 50px;height: 32px;cursor: pointer;outline: none;
	border-left: 2px solid #C8C8C8;border-top: 2px solid #C8C8C8;border-right: 2px solid #C8C8C8;border-top-left-radius: 5px;border-top-right-radius: 5px; }
div.tab_text { width: 95%; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; }
div.tab:hover, div.tab_selected { font-size: 10pt;background: linear-gradient(0deg, #FFFFFF, #AAACB5); }
div.tab_content_wrapper  { width: 100%; padding-left: 2px; padding-right: 2px; }
div.tab_top { width: 100%; height: 25px; background: white; border-left: 2px solid #C8C8C8;border-right: 2px solid #C8C8C8; }
div.tab_connecter { position: absolute; bottom: -8px; right: -8px; width: 8px; height: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border: 2px solid #C8C8C8; border-top: 0; }
div.tab_bottom_wrapper  { display: flex; flex-direction: row; margin: 0px; width: 100%; height: 10px; background: white; padding-left: 2px; padding-right: 2px; }
div.tab_bottom_left { width: 2px; height: 10px; background:linear-gradient(180deg, #D6D3D0, #FFFFFF); }
div.tab_bottom_middle { width: 100%; background: red; }
div.tab_bottom_right { width: 2px; height: 10px; background:linear-gradient(180deg, #D6D3D0, #FFFFFF); }
div.tab_content { position: relative; width: auto; background: white; border-left: 2px solid #C8C8C8;border-right: 2px solid #C8C8C8; border-bottom: 2px solid #C8C8C8; margin-bottom: 2px; width: 100%; padding: 5px; border-bottom-left-radius: 5px;border-bottom-right-radius: 5px; }

/* Package */
div.username { width: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Package: Themes */
div.theme_tab { width: 100%; display: flex; flex-direction: row; }
div.theme_tab_item { position: relative; background: #FFFFFF; height: 60px; margin: 0px; }
a.href_tab_item { display: flex; width: 100%; padding: 8px; }

div.submit_inactive { border: 2px solid transparent; width: auto; height: auto; border-radius: 12px; display: flex; justify-content: center; align-items: center; padding: 0px; height: auto; width: auto; border-radius: 12px; }
div.submit_active { display: flex; justify-content: center; align-items: center; padding: 0px; height: auto; width: auto; border: 2px solid #0000; border-radius: 10px; background: linear-gradient(var(--angle), #4B5068, #FFFFFF) border-box; animation: 6s rotate linear infinite; }
.userbutton_submit { background: linear-gradient(#FFFFFF, #D6D3D0); }
@keyframes rotate { to { --angle: 360deg; } } @property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.loader-element { width: 20px; height: 20px; border-radius: 50%; border: 5px solid transparent; background: linear-gradient(#FFFFFF, #D6D3D0) padding-box, linear-gradient(var(--angle), #4B5068, #FFFFFF) border-box; animation: rotate 1s linear infinite; margin: 0 auto; }

/* Package: WebCrud */
@keyframes spin { to { transform: rotate(360deg); }}
.form-waiting { pointer-events: none; cursor: wait; }
button.button-waiting { background: linear-gradient(#FFFFFF, #D6D3D0); }
div.crud_l { width: 100%; display: grid; gap: 10px; }
div.crud_l > * { text-align: left; align-items: left; margin-right: 5px; }
div.crud_slider { width: auto; align-items: center; }
div.crud_slider > * { align-items: left; padding: 0px; display: grid; gap: 10px; grid-template-columns: 25px auto 25px;}
div.crud_slider > * > *:nth-child(1) { align-items: end; }
div.crud_slider > * > *:nth-child(2) { align-items: center; }
div.crud_slider > * > *:nth-child(3) { align-items: start; }
div.crud_pin_holder { display: flex; flex-direction: row; }
div.crud_pin_holder > * { width: 50px; }
input.crud_pin { width: 40px; height: 40px; font-size: 16pt; font-weight: bold; text-align: center; }
input.crud_pin:hover { outline: none; } 
input.crud_pin:focus { outline: none; } 
div.webcrud { position: relative; width: auto; padding: 10px; margin-bottom: 0px; background: linear-gradient(0deg, #E9E8E7, #FFFFFF); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); border: 0.1rem solid rgba(180, 180, 200, 0.3); border-radius: 8px; }
div.crud_module_holder { padding: 10px; }
div.crud_module { position: relative; background: #FFFFFF; padding: 15px; width: 100%; height: 100%; }
div.crud_module_element { position: relative; background: #FFFFFF; width: 100%; height: 30px; margin: 5px }
div.crud_module_status { position: absolute; top: 5px; right: 5px; }
div.crud_module_ds { margin: 0px; padding: 0px; }
div.crud_perm { display: grid; grid-template-columns: 25% 25% 25% 25%; margin: 2px; width: 100%; }
div.crud_perm > div:nth-child(4n+1) { align-items: start; padding-left: 5px; }
div.crud_submit { z-index: 1; bottom: -34px; }
div.crud_submit_border { background:linear-gradient(180deg, #D6D3D0, #E9E8E7); z-index: 1; width: 136px; right: 50%; height: 46px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); border: 0.13rem solid rgba(180, 180, 200, 1); border-radius: 8px; }
div.text_crud { display: inline-block; }

/* ColorPicker */
div.colorpickerbutton { position: relative; width: 22px; height: 22px; padding: 10px;}
div.colorpickerbutton_background { width: 22px; height: 22px; background-color: #e5e5f7; opacity: 0.8; background-image:  repeating-linear-gradient(45deg, #C3C3C3 25%, transparent 25%, transparent 75%, #C3C3C3 75%, #C3C3C3), repeating-linear-gradient(45deg, #C3C3C3 25%, #e5e5f7 25%, #e5e5f7 75%, #C3C3C3 75%, #C3C3C3); background-position: 0 0, 8px 8px; background-size: 16px 16px; }
div.colorpickerbutton_zone { width: 20px; height: 20px; background: rgba(255, 255, 255, 1); }
div.colorpickerwindow { visibility:hidden; position: absolute; z-index: 1; width: 275px; height: 250px; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#D6D3D0), to(#FFFFFF)); }
div.cp_currently_selected { position: absolute; border: 1px solid black; left: 5px; bottom: 5px; }
div.cp_currently_alpha { position: absolute; border: 1px solid black; right: 5px; bottom: 5px; }
canvas.colorpicker { border: 1px solid black; cursor: pointer; }
div.range_slider_wrapper { width: 40px; }
input.range_slider { writing-mode: vertical-lr;	vertical-align: middle;	background: #FFFFFF; box-shadow: #666 0px 1px 2px; cursor: pointer;	width: 8px !important; -webkit-appearance: none; z-index: 1; width: 50px; height: 190px; border-radius: 8px; background-image: linear-gradient(180deg, #FFFFFF, #000000); border: linear-gradient(180deg, #000000, #FFFFFF); transform: translateY(-20px); }
input.range_slider_color { background-image: linear-gradient(180deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%)); }
input[type=range].range_slider::-webkit-slider-thumb { box-shadow: #000000 0px 1px 2px;	-webkit-appearance: none; width: 20px; height: 20px; background-color: #FFFFFF; background-image: linear-gradient(180deg, #FFFFFF, #FFFFFF); border: linear-gradient(180deg, #000000, #FFFFFF);	border-radius: 15px; }
div.cp_color_selected {	position: absolute; width: auto; height: auto; pointer-events: none; }
div.color_picker_selected { box-shadow: #666 2px 3px 3px; -webkit-appearance: none;	width: 10px; height: 10px; background-color: #FFFFFF; background-image: linear-gradient(180deg, #FFFFFF, #FFFFFF); border: linear-gradient(180deg, #000000, #FFFFFF); border-radius: 15px; pointer-events: none; }

/* Styler */
div.styleelement { padding-left: 2px; margin: 0px; width: 100%; }
div.stylefield { display: flex; flex-direction: rows; padding: 0px; margin: 0px; width: 100%; }
div.stylefields > * { padding: 0; margin: 0px; width: 100%; }
div.styleArea { padding-left: 4px; width: 100%; }
.styler_icon { cursor: pointer; z-index: 1; width: auto; }
.styler_box_selection { display: flex; flex-direction: row; width: 100%; }
.styler_box_item { margin-bottom: 5px; margin-top: 5px; align-items: start; }
.styler_box_items { display: flex; flex-direction: row; width: auto; align-items: start; justify-content: start; margin-left: 5px; }
.styler_box_item_delete_parent { position: relative; width: auto; }
.styler_box_item_delete { position: absolute; width: auto; transform: translateX(-20px); cursor: pointer;}
.styler_textfield { box-sizing: border-box; text-align: center; width: 100%; height: 20px; display: block;margin: 1px 1px 1px 0px;border: 1px solid #dcdcdc;padding: 6px;font-weight: bold;font-size: 10pt;resize: none; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);}
.styler_textfield:hover { outline: none; } 
.styler_textfield:focus { outline: none; }
.styler_dropdown { }
.styler_dropdown { box-sizing: border-box; width: auto; height: 24px; display: block;margin: 3px 3px 3px 0px;border: 1px solid #dcdcdc;padding: 0px; padding-top: 0px; padding-bottom: 0px;font-weight: bold;font-size: 10pt;resize: none; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);}
.styler_dropdown:hover { outline: none; }
.styler_dropdown:focus { outline: none; }
.styler_number { display: flex; flex-direction: row; background: linear-gradient(90deg, #D6D3D0, #FFFFFF); border: 2px solid #dcdcdc; padding: 0px; width: auto; border-radius: 14px; }
.styler_number div:first-child { background: #999999; width: 25px; height: 20px; transform: translateX(2px); cursor: pointer; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.styler_number div:first-child > * { transform: scale(0.5); }
.styler_number div:last-child { transform: scale(0.5); background: #999999; width: 25px; height: 20px; transform: translateX(-2px); cursor: pointer; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.styler_number div:last-child > * { transform: scale(0.5); }
.styler_addelement { width: auto; padding: 5px; margin: 10px; }
.styler_message { }
.styler_slider { display: grid; grid-auto-rows: minmax(auto, auto); gap: 0px; list-style: none; padding: 0px; margin: 0; max-width: 100vw; overflow-x: auto; border-radius: 0px; border: 1px solid #ddd; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); border: 0.13rem solid rgba(180, 180, 200, 1); border-radius: 6px; }
.slider_item { width: auto; background:linear-gradient(180deg, #D6D3D0, #FFFFFF); text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4); color: #333; height: 22px; border-radius: 0px; text-align: center; font-weight: 400; cursor: pointer; display: flex; justify-content: center;align-items: center;font-size: 11px;line-height: 1;overflow: hidden;white-space: nowrap; }
.slider_item:not(:last-child) { border-right: 2px solid #D6D3D0; }
.slider_item input[type="radio"] {position: absolute;opacity: 1;width: 50px;height: 20px;padding: 0;margin: 1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border-width: 0; }
.slider_item label { display: flex; align-items: center;justify-content: center;cursor: pointer;width: 100%;height: 100%;padding: 8px; }
.slider_item label span {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;max-width: 100%;}
.slider_item:has(input[type="radio"]:checked) {background:linear-gradient(0deg, #CFD3D7, #FFFFFF);text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);box-shadow: none;transform: none;font-weight: bold; }
.slider_item:has(input[type="radio"]:checked) label span { color: #333; }

/* Package: WebTable */
div.webtable { width: 100%; padding: 10px; justify-content: start; background: linear-gradient(45deg, #E9E8E7, #FFFFFF); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); border: 0.1rem solid rgba(180, 180, 200, 0.3); border-radius: 8px; }
div.webtable_folder { display: flex; flex-direction: row; height: 25px; width: 100%; justify-content: flex-start; background: linear-gradient(45deg, #E9E8E7, #FFFFFF); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); border: 0.1rem solid rgba(180, 180, 200, 0.3); border-radius: 4px; }
div.webtable_folder > * { width: auto; padding: 3px; }
div.webtable > * { padding: 1px; }
div.webtable_list:nth-child(even) { background: linear-gradient(45deg, transparent, #F1F0EF); }
div.webtable_list:nth-child(odd) { background: linear-gradient(45deg, transparent, #E9E8E7); }
div.webtable_list:nth-child(2) { border-top-right-radius: 5px; }
div.webtable_list:last-child { border-bottom-right-radius: 5px; }
div.webtable_empty, div.webtable_item { min-height: 20px; }
div.webtable_grid { width: 76px; height: 76px; }
div.webtable_grid > img { max-width: 76px; max-height: 76px; border-radius: 5px; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));  }
div.webtable_text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
input.webtable_selector_item { transform: scale(0.8); }

div.webtable_options_holder { width: auto; position: absolute; left: 50%; transform: translateX(-50%); top: -15px; }
div.webtable_options { opacity: 0; transform: opacity: 0; transition: all 0.5s ease-in; transition-delay: 0s; width: auto; text-align: center; padding-left: 5px; padding-right: 5px; height: 30px; background: linear-gradient(0deg, #D6D3D0, #FFFFFF); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
div.webtable_selector_options { width: auto; text-align: center; padding-left: 5px; padding-right: 5px; height: 30px; background: linear-gradient(0deg, #D6D3D0, #FFFFFF); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
div.webtable_options:hover { opacity: 1; transition: all 0.1s ease-in; transition-delay: 0s; }
div.webtable_select { width: 30px; transform: opacity: 0; transition: all 0.5s ease-in; transition-delay: 0s; margin: 10px; padding: 10px; text-align: center; height: 25px; background: linear-gradient(0deg, #D6D3D0, #FFFFFF); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}

/* Package: Menus and Content Containers */
span.c_menubutton { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }
div.c_menubutton { position: relative; background:linear-gradient(45deg, #D6D3D0, #FFFFFF);margin: 0px;width: 100%;height: 32px; } 
div.c_menubutton > * { text-align: center; }
div.c_menubutton:hover { font-weight: bold; background:linear-gradient(90deg, #DFDEDF, #FFFFFF); }
div.c_menutitle { position: relative; text-align: center; height: var(--crud_h); font-weight: bold; background: #F5F5F5; background: linear-gradient(0deg, #D6D3D0, #FFFFFF); border-top-left-radius: 5px; border-top-right-radius: 5px; }
div.c_menuheader { text-align: center; height: var(--crud_h); font-weight: bold; background: #F5F5F5; background: linear-gradient(45deg, #D6D3D0, #FFFFFF); font-size: 11pt; } 
div.c_menuheader:nth-child(1) { border-top-left-radius: 5px; border-top-right-radius: 5px; }
div.c_menucontent { padding: 10px; border-top: 2px solid #EFF0F5; background: #F5F5F5; justify-content: left; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
div.c_title { height: var(--crud_h); font-weight: bold; background: linear-gradient(0deg, #D6D3D0, #FFFFFF); border-top-left-radius: 5px; border-top-right-radius: 5px; margin-bottom: -0px; }
div.c_title_small { height: 2px; font-weight: bold; background: linear-gradient(45deg, #D6D3D0, #FFFFFF); border-top-left-radius: 5px; border-top-right-radius: 5px; }
div.c_content { position: relative; margin-top: -1px; padding: 10px; border-top: 2px solid #EFF0F5; background: #F5F5F5; box-sizing: border-box; align-items: center; text-align: center; width: 100%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
div.c_bottom { padding: 2px;background: linear-gradient(45deg, #D6D3D0, #FFFFFF); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); align-items: center; }
div.c_status { z-index: 1; min-width: 300px; max-width: 500px; pointer-events: none; }

/* Uploader */
.uploader { position: relative; overflow: visible; width: 100%; display: flex; align-items: center;justify-content: center;flex-direction: column; }
.uploader_section_div { z-index: 1; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; }
.uploader_section { position: absolute; width: 90%; }
.uploader_section_error { z-index: 1; position: absolute; top: 50%; transform: translateY(-50%) translateX(105%); right: 0px; width: auto; }
.uploader_window { position: relative; margin: 0px; padding: 0px; width: 100%; }
.uploader_small { width: 96px;padding: 15px;display: flex;margin: 10px 0;align-items: center;justify-content: center;flex-direction: column;border-radius: 13px;border: 4px ridge rgba(150, 150, 150, 0.2); } 
.uploader_image_top { width: auto;padding: 5px;display: flex;margin-top: 0px;align-items: center;justify-content: center;flex-direction: column;border-radius: 13px; } 
.uploader_holder { position: relative; background: #FFFFFF; padding: 5px; margin-bottom: 5px;align-items: center;justify-content: center;flex-direction: column;border-radius: 13px;border: 4px ridge rgba(150, 150, 150, 0.2); } 
.uploader_image { border-radius: 5px; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3)); }
.uploader_image_cancel { z-index: 1;position: absolute; transform: translate(-50%, -50%); top: 50%; right: -10%; cursor: pointer; }
.uploader_icon { cursor: pointer; z-index: 1; width: 40px; }
.uploader_progress { width: 100%; }
.uploader_selected { position: relative; width: 100%;background:linear-gradient(45deg, #D6D3D0, #FFFFFF);padding: 4px;margin: 7px;align-items: center;justify-content: center; border-radius: 12px; border: 4px ridge rgba(150, 150, 150, 0.3); } 
.uploader_s_filename { width: 100%; text-overflow: ellipsis;overflow: hidden;white-space: nowrap; color: #FFFFFF; font-weight: bold; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1.0); } 
.uploader_cancel { z-index: 1;position: absolute; width: 28px;height: 27px; cursor: pointer; right: 6px; top: -20px; transform: translateX(6px) translateY(-20px); }
.uploader_cancel_current { position: absolute; z-index: 1; transform: translate(-50%, -50%); top: 50%; right: 0%; cursor: pointer; }
.uploader_sel_cancel { z-index: 1;position: absolute;top: 28px;right:-3px;width: 28px;height: 27px; margin-top: -29px; cursor: pointer; }
.uploader_sel_done { z-index: 1; position: absolute; top: 28px;left: -3px;width: 28px;height: 27px; margin-top: -29px; } 
.uploader_sel_error { z-index: 1;position: absolute; top: 50%; right: -15%; transform: translateY(50%) translateX(-15%);width: 30px;height: 30px;margin-top: -30px; } 
.uploader_error_text { padding: 10px; }
.uploader_show { position: absolute; z-index: 1; width: 32px; height: 32px; top: -44px; right: 5px; transform: translateY(5px) translateX(-5px); }
.uploader_hidden { position: absolute; z-index: 1; width: 100%; top: -49px; right: 0; padding: 5px; }
.uploader_progress { position: relative; width: 100%; height: auto; }
.uploader_progress_meter { width: 100%; height: 28px;align-items: start;background:linear-gradient(45deg, #D6D3D0, #FFFFFF);border-radius: 12px; border: 4px ridge rgba(150, 150, 150, 0.3); }
.uploader_progress_meter > span { height: 28px; transform: translateY(1px); border-radius: 12px;background-color: #808592;box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4); overflow: hidden; }
.uploader_progress_procentage { position: absolute; right: 0px; top: -8px; background: #555;width: 45px;height: 45px;border-radius: 50%;border: 3px solid #333;color: #FFFFFF;line-height: 45px;font-weight: bold; font-size: 12pt; } 
.uploader_progress_icon { position: absolute; right: -8px; top: -16px; width: 64px;height: 64px; } 
.uploader_progress_filename { position: absolute; color: #FFFFFF; font-weight: bold; text-overflow: ellipsis;overflow: hidden; width: auto;white-space: nowrap; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1.0); } 

/* Package: General Styles */
div.fields { display: flex; flex-direction: row; padding: 1px; width: 100%; }
div.fields > * { padding: var(--content_w); width: 100%; }
div.text-outsider > * { color: #FFFFFF; text-shadow: 2px 2px 3px rgba(0, 0, 0, 1.0); }
div.status_offline { position: relative; width: 100%; height: 40px; background: linear-gradient(0deg, #C0C0C0, #FFFFFF);}
div.status_online { position: relative; width: 100%; height: 40px; background: linear-gradient(0deg, #C0C0C0, #FFFFFF); }
div.l_banner { width: 100%; height: 100px;margin-bottom: 0px; margin-top: 10px; }
.truncated { display: inline-block;vertical-align: bottom;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; } 
a:link { font-size: 10pt;color: #000000;text-decoration: none; } 
a:visited { font-size: 10pt;color: #000000;} 
a:hover { font-size: 10pt;color: #000000;font-decoration: none;font-weight: none; }
.menu_shortcut:link { } 
.menu_shortcut:hover { font-decoration: none;font-weight: none; }
.info { font-size: 8.5pt; } 
.onlyshadows { border: 1px solid #C7C3BF;padding: 2 2;border-radius: 3px;box-shadow: #666 0px 1px 2px; } 
.floatSearch { z-index: 1;position: absolute;left: 10px;top: 37px; } 
.switch { position: relative;display: inline-block;width: 60px;height: 24px;margin: 3px; } 
.switch input { opacity: 0;width: 0;height: 0; } 
.slider { position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(#FFFFFF, #999999);-webkit-transition: 0.4s; transition: 0.4s; } 
.slider:before { position: absolute;content: '';height: 16px;width: 16px;left: 3px;bottom: 8px;background-color: #FFFFFF;-webkit-transition: 0.4s; transition: 0.4s; } 
input:checked + .slider { background: linear-gradient(#FFFFFF, #A7B3C1); } 
input:checked + .slider:before { transform: translateX(36px);left: 5px;bottom: 5px;height: 12px;width: 12px;background-color: #F3F5F7;box-shadow: 0 0 0 4px #414B57; } 
input:disabled + .slider:before { opacity: 0.25; }
.slider.round { border-radius: 10px;border: 1px solid #D9DEE3; } 
.slider.round:before { border-radius: 50%;left: 6px;bottom: 5px;height: 12px;width: 12px;box-shadow: 0 0 0 4px #414B57; } 
input[type="checkbox"] { -webkit-appearance: none; appearance: none;background: linear-gradient(#FFFFFF, #E5E8EB); margin: 3px; width: 20px; height: 20px; border: 2px solid #5D6C7F; border-radius: 5px; display: grid; place-content: center; cursor: pointer; }
input[type="checkbox"]::before { content: ""; width: 16px; height: 16px; transform: scale(0); transition: 120ms transform ease-in-out; background-image: url("/themes/default/css/checkbox_checked.png"); background-size: cover; background-position: center; background-repeat: no-repeat;; border-radius: 0px; }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:disabled { cursor: default; opacity: 0.5; }
input[type="checkbox"]:disabled::before { }
.userbutton { z-index: 1; background:linear-gradient(45deg, #D6D3D0, #FFFFFF);margin: 2px; max-width: 100px; vertical-align: baseline;font-size: 10pt;color: #000000;font-weight: bold;width: auto;min-width: 60px;height: 32px;cursor: pointer;outline: none;border: 3px solid #C8C8C8;border-radius: 3px;box-shadow: #666 0px 1px 2px; } 
.userbutton:hover { font-size: 10pt;background: linear-gradient(#FFFFFF, #D6D3D0); } 
.userbutton_disabled { background:linear-gradient(45deg, #D6D3D0, #FFFFFF);margin: 2px; max-width: 100px; vertical-align: baseline;font-size: 10pt;color: #000000;font-weight: bold;width: auto;min-width: 60px;height: 32px;cursor: normal;outline: none;border: 2px solid #C8C8C8;border-radius: 3px;box-shadow: #666 0px 1px 2px; } 
.userbutton_text { height: 28px; padding-left: 10px; padding-right: 10px; min-width: 120px; }
.textfield { box-sizing: border-box; width: 100%; display: block;margin: 3px 3px 3px 0px;border: 1px solid #dcdcdc;padding: 6px;font-weight: bold;font-size: 10pt;resize: none; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);}
.textfield:hover { outline: none; } 
.textfield:focus { outline: none; } 
.textfield_delete { box-sizing: border-box; text-align: center; width: auto; display: block;margin: 3px 3px 3px 0px;border: 1px solid #dcdcdc;padding: 6px;font-weight: bold;font-size: 12pt;resize: none; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);}
.textfield_delete:hover { outline: none; } 
.textfield_delete:focus { outline: none; } 
.dropdown { box-sizing: border-box; width: 100%; display: block;margin: 3px 3px 3px 0px;border: 1px solid #dcdcdc;padding: 3px; padding-top: 6px; padding-bottom: 6px; font-weight: bold;font-size: 10pt;resize: none; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);}
.dropdown:hover { outline: none; } 
.dropdown:focus { outline: none; }
.textarea { box-sizing: border-box; width: 100%; resize: none; margin: 3px 6px 3px 3px;border: 1px solid #dcdcdc;padding: 5px;font-size: 10pt; } 
.textarea:disabled { background: #FFFFFF; }
.textarea:hover { outline: none; } 
.textarea:focus { outline: none; } 
.browsefile { font-size: 10pt;background: #FFFFFF;width: 95%; } 
.browsefile:hover { outline: none; } 
.browsefile:focus { outline: none; } 
.progress_number { font-weight: bold; transform: translateX(-1px); color: #FFFFFF; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4); }
.progress_fadeout { font-weight: bold; color: #333333; } 
.progress_info { font-size: 10pt;color: #000000; } 
.elementbutton { vertical-align: baseline;font-size: 9.5pt;color: #000000;font-weight: bold;width: 95%;height: 30px;cursor: pointer;width: 95%;outline: none; } 
.elementbutton:hover { font-size: 10pt;background: linear-gradient(#FFFFFF, #D6D3D0); } 
.flow_element_left { float: left; } 
.flow_element_right { float: right; } 
.flow_element { border-radius: 4px;z-index: 1;position: absolute;padding: 2px; } 
.elements_wrapper { width: 100%;display: inline-block; display: flex; } 
.element_wrapper { width: 100%;display: flex; flex-direction: row; border: 1px solid black; } 
.element_dashed { position: relative;border: 2px dashed;border-color: #C1C1C1; border-radius: 0px; background: #FFFFFF; } 
.element { position: relative;display: flex;margin: 2px 2px 2px 2px;padding: 15px;justify-content: center;align-items: center; } 
.collapsebutton { position: absolute;left: 2px;background:linear-gradient(45deg, #D6D3D0, #FFFFFF);margin: 2pxpx 2pxpx 2pxpx 2pxpx;vertical-align: baseline;font-size: 10pt;font-weight: bold;width: 20px;height: 20px;cursor: pointer;outline: none;border: 2px solid #C8C8C8;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: #666 0px 2px 3px;-moz-box-shadow: #666 0px 2px 3px;box-shadow: #666 0px 1px 2px; } 
.collapsebutton:hover { font-size: 10pt;background:linear-gradient(45deg, #FFFFFF, #D6D3D0); } 
.collapsed { padding: 0px; }