@charset "UTF-8"; :root { --padding: .5rem .8rem; --textpadding: .5rem .2rem; --button_padding: .5rem .8rem; --trust_hue: 218; --trust_saturation: 93%; --trust_ligthness: 36%; --trust: hsl(var(--trust_hue),var(--trust_saturation),var(--trust_ligthness)); --trust_hover: hsl(var(--trust_hue),var(--trust_saturation),calc(var(--trust_ligthness) + 15%)); --text_hue: 218; --text_saturation: 0%; --text_ligthness: 30%; --text: hsl(var(--text_hue),var(--text_saturation),var(--text_ligthness)); --text_hover: hsl(var(--text_hue),var(--text_saturation),calc(var(--text_ligthness) + 50%)); --text_dark: hsl(var(--text_hue),var(--text_saturation),calc(var(--text_ligthness) + 10%)); --bg_hue: 215; --bg_saturation: 45%; --bg_ligthness: 19%; --background_light: hsl(var(--bg_hue),var(--bg_saturation),calc(var(--bg_ligthness) + 10%)); --background-color: hsl(var(--bg_hue),var(--bg_saturation),var(--bg_ligthness)); --background-color_hover: hsl(var(--bg_hue),var(--bg_saturation),calc(var(--bg_ligthness) + 5%)); --background: #f9f7f4; --border:#E0D9C6; --growth: #228B22; --value: #FFD700; --interactive: #FFA500; --blend:#008080; --lessprominant: #2F4F4F; --cite: slateblue; --color: 188, 70%; --colora: 25, 100%; --l: 30%; --color-main: HSL(var(--color),var(--l)); --color-background: HSL(var(--color),calc(var(--l) + 67%)); --color-hover: HSL(var(--color),calc(var(--l) + 15%)); --color-active: HSL(var(--color),calc(var(--l) + 5%)); --sign_menu: url('data:image/svg+xml;utf8,'); --sign_plus: url('data:image/svg+xml;utf8,'); --sign_minus: url('data:image/svg+xml;utf8,'); --arrow_right: url('data:image/svg+xml;utf8,'); --arrow_back: url('data:image/svg+xml;utf8,'); --free_use: url('data:image/svg+xml;utf8,'); --live: url('data:image/svg+xml;utf8,'); --demo: url('data:image/svg+xml;utf8,'); --buy: url('data:image/svg+xml;utf8,'); --purchases: url('data:image/svg+xml;utf8,'); --faq: url('data:image/svg+xml;utf8,'); --invoice: url('data:image/svg+xml;utf8,'); --mobile: url('data:image/svg+xml;utf8,'); --laptop: url('data:image/svg+xml;utf8,'); --phone: url('data:image/svg+xml;utf8,'); --mail: url('data:image/svg+xml;utf8,'); --website: url('data:image/svg+xml;utf8,'); --admin_settings: url('data:image/svg+xml;utf8,'); --video_settings: url('data:image/svg+xml;utf8,'); --video_edit: url('data:image/svg+xml;utf8,'); --users: url('data:image/svg+xml;utf8,'); --play_time: url('data:image/svg+xml;utf8,'); --video_time: url('data:image/svg+xml;utf8,'); --checkboxU: url('data:image/svg+xml;utf8,'); --checkbox: url('data:image/svg+xml;utf8,'); --radioU: url('data:image/svg+xml;utf8,'); --radio: url('data:image/svg+xml;utf8,'); --play_views: url('data:image/svg+xml;utf8,'); --update: url('data:image/svg+xml;utf8,'); --secure: url('data:image/svg+xml;utf8,'); --folder_add: url('data:image/svg+xml;utf8,'); --folder_not: url('data:image/svg+xml;utf8,'); --folder: url('data:image/svg+xml;utf8,'); --settings: url('data:image/svg+xml;utf8,'); --more: url('data:image/svg+xml;utf8,'); --play: url('data:image/svg+xml;utf8,'); --pause: url('data:image/svg+xml;utf8,'); --file_attached: url('data:image/svg+xml;utf8,'); --file_video: url('data:image/svg+xml;utf8,'); --file_video_not: url('data:image/svg+xml;utf8,'); --faculty: url('data:image/svg+xml;utf8,'); --expiry: url('data:image/svg+xml;utf8,'); --calculate: url('data:image/svg+xml;utf8,'); --cancel: url('data:image/svg+xml;utf8,'); --yes: url('data:image/svg+xml;utf8,'); --info: url('data:image/svg+xml;utf8,'); --caution: url('data:image/svg+xml;utf8,'); --warn: url('data:image/svg+xml;utf8,'); --error: url('data:image/svg+xml;utf8,'); --faq: url('data:image/svg+xml;utf8,'); --eye: url('data:image/svg+xml;utf8,'); --timer: url('data:image/svg+xml;utf8,'); --camon: url('data:image/svg+xml;utf8,'); --camoff: url('data:image/svg+xml;utf8,'); --micon: url('data:image/svg+xml;utf8,'); --micoff: url('data:image/svg+xml;utf8,'); --padding-top:.25rem; --header-height:4rem; } :root { --bg_hue:60; --bg_sat:20%; --bg_light:95%; --bg_op:0.4; --background-color: HSLA(var(--bg_hue),var(--bg_sat),var(--bg_light),var(--bg_op)); --menu-background: HSLA(var(--bg_hue),var(--bg_sat),calc(var(--bg_light) - 10%),var(--bg_op)); --input-background: HSLA(var(--bg_hue),var(--bg_sat),calc(var(--bg_light) - 1%),var(--bg_op)); --text-color: #1b2d46; --button-color: #ffffff; --button-background: #1b2d46; --border: gold; --radius: .4rem; --shadow: .3rem .3rem 1.5rem #bbb; --chat-background: transparent; --chat-background-image: url("/_images/chatbg_light.png"); } body.dark-theme { --bg_hue: 211; --bg_sat: 22%; --bg_light: 28%; --bg_op: .8; --background-color: HSLA(var(--bg_hue),var(--bg_sat),calc(var(--bg_light) - 7%),var(--bg_op)); --menu-background: HSLA(var(--bg_hue),var(--bg_sat),calc(var(--bg_light) - 4%),var(--bg_op)); --input-background: HSLA(var(--bg_hue),var(--bg_sat),calc(var(--bg_light) - 1%),var(--bg_op)); --text-color: #ffffff; --topmenu-text: #ffffff; --button-color: #1b2d46; --button-background: #ffffff; --border:#505050; --shadow: .3rem .3rem 2rem #000000e3; --chat-background: var(--menu-background); --chat-background-image: url("/_images/chatbg_light.png"); } /* width */ ::-webkit-scrollbar { width: 0.3rem; height: 0rem; } @media screen and (max-width: 768px) { ::-webkit-scrollbar { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: white; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #efefef; } } /* Track */ /* Handle */ ::-webkit-scrollbar-thumb { background-color: var(--menu-background); opacity: 0.9; border-radius: 0.5rem; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background-color: #ccc; opacity: 1; cursor: grab; } .col-2 { display: grid; width: calc(100% - 1em); grid-template-columns: minmax(50%, max-content) minmax(50%, max-content); gap: 1rem; } @media screen and (max-width: 640px) { .col-2 { grid-template-columns: auto; row-gap: 2rem; -moz-column-gap: 0; column-gap: 0; } } .col-2 img { max-height: 100%; width: 100%; padding: 1rem; box-shadow: 0 0 0.5em grey; border-radius: 0.5rem; } .col-3, .label_wrap ol.list { display: grid; width: calc(100% - 2em); grid-template-columns: 33% 34% 33%; gap: 1rem; } .col-3 img, .label_wrap ol.list img { width: 100%; padding: 1rem; box-shadow: 0 0 0.5em grey; border-radius: 0.5rem; } @media screen and (max-width: 900px) { .col-3, .label_wrap ol.list { width: calc(100% - 1em); grid-template-columns: minmax(50%, max-content) minmax(50%, max-content); gap: 1rem; } } @media screen and (max-width: 640px) { .col-3, .label_wrap ol.list { width: calc(100% - 1em); grid-template-columns: auto; gap: 1rem; } } .col-4 { display: grid; width: calc(100% - 3em); grid-template-columns: 25% 25% 25% 25%; gap: 1rem; } .col-4 img { width: 100%; padding: 1rem; box-shadow: 0 0 0.5em grey; border-radius: 0.5rem; } .camera { position: absolute; width: 100%; height: 100%; background-color: azure; } .loginForm, .registerForm, .resendForm { padding: 0.5em 1rem; color: grey; animation: showForm 0.3s ease-in-out forwards; } .loginForm h2, .registerForm h2, .resendForm h2 { color: var(--color-steel-blue); padding: 0.25rem; margin: 0.2rem; font-size: 3vw; border-bottom: 1px dotted grey; } @keyframes showForm { 0% { opacity: 0; } 100% { opacity: 1; } } .forms { position: absolute; left: 50%; width: 50%; top: 0; height: 100%; background-color: rgba(255, 255, 255, 0.9); padding: 0.5rem 1.5rem; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); font-size: 1.7vw; } input[type=checkbox], input[type=radio] { width: 1rem; height: 1rem; margin: 0.2rem; display: none; } input[type=checkbox] + label, input[type=radio] + label { -webkit-user-select: none; -moz-user-select: none; user-select: none; display: inline-block; cursor: pointer; margin: 0.25rem; padding: var(--padding) 0 0; min-height: 2rem; min-width: 2rem; position: relative; border-radius: 0.2rem; vertical-align: top; display: flex; -moz-column-gap: 1rem; column-gap: 1rem; } input[type=checkbox] + label svg-symbol, input[type=radio] + label svg-symbol { color: darkorange; width: 1.5rem; height: 1.5rem; opacity: 0.8; } @keyframes hoverhide { 50% { background-color: rgba(0, 0, 0, 0.55); } 100% { background-color: inherit; } } input[type=checkbox] + label:active::before, input[type=radio] + label:active::before { filter: invert(0.75); } @keyframes resetInvert { 0% { filter: invert(0.75); } 100% { filter: invert(0); } } input[type=checkbox].togglebutton, input[type=radio].togglebutton { display: none; border: 1px solid var(--border); } input[type=checkbox].togglebutton + label, input[type=radio].togglebutton + label { display: inline-block; background-color: transparent; text-align: left; position: relative; width: 100%; padding: 0.2em 0.3rem; padding-right: 4rem; } input[type=checkbox].togglebutton + label::before, input[type=checkbox].togglebutton + label::after, input[type=radio].togglebutton + label::before, input[type=radio].togglebutton + label::after { content: none !important; } input[type=checkbox].togglebutton + label .togglecheckbox, input[type=radio].togglebutton + label .togglecheckbox { display: inline-block; position: absolute; top: 0; right: 0.25rem; height: 1.3rem; width: 3rem; background-color: white; padding: 0.2rem; border-radius: 1.5rem; margin: 0.5em 0.25rem; font-size: 0.8rem; --b: HSL(var(--color), calc(var(--l) + 50%)); box-shadow: 0 0 1em 1px var(--b) inset; --c: HSL(var(--color),calc(var(--l) + 35%)); outline: 2px var(--c) solid; outline-offset: 2px; } input[type=checkbox].togglebutton + label .togglecheckbox .togglethumb, input[type=radio].togglebutton + label .togglecheckbox .togglethumb { position: absolute; top: 0; background-color: #ad5c00; height: 1.3rem; width: 1.3rem; border-radius: 1.5rem; margin: 0rem; box-shadow: 0 0 0.25em 1px #c8c8c8; animation: btnslideoff 0.12s ease-in-out forwards; } input[type=checkbox].togglebutton:checked + label, input[type=radio].togglebutton:checked + label { background-color: transparent; } input[type=checkbox].togglebutton:checked + label:hover, input[type=radio].togglebutton:checked + label:hover { background-color: transparent !important; } input[type=checkbox].togglebutton:checked + label .togglecheckbox .togglethumb, input[type=radio].togglebutton:checked + label .togglecheckbox .togglethumb { background-color: #008b10; animation: btnslideon 0.12s ease-in-out forwards; } input[type=checkbox].togglebutton:disabled + label, input[type=radio].togglebutton:disabled + label { background-color: transparent; } input[type=checkbox].togglebutton:disabled + label .togglecheckbox, input[type=radio].togglebutton:disabled + label .togglecheckbox { filter: saturate(0); outline: 2px #c6c6c6 solid; box-shadow: 0 0 1em 1px #c8c8c8 inset; } input[type=checkbox].togglebutton:disabled + label .togglecheckbox .togglethumb, input[type=radio].togglebutton:disabled + label .togglecheckbox .togglethumb { background-color: #525252; } @keyframes btnslideon { 0% { left: 0; background-color: #ad5c00; } 100% { left: calc(100% - 1.3em); background-color: #008b10; } } @keyframes btnslideoff { 0% { left: calc(100% - 1.3em); background-color: #008b10; } 100% { left: 0; background-color: #ad5c00; } } .label_wrap { margin: 0.2rem 0; } .label_wrap:has(+ .flex) { margin-bottom: 1rem; } .label_wrap .labeltext { padding: 0.2rem; font-weight: 600; font-size: 1.1em; line-height: 2.4rem; text-wrap: nowrap; text-overflow: ellipsis; overflow: auto; max-width: 90%; } .label_wrap .labeltext.select_heading { font-size: 1.2rem; color: var(--color-steel-blue); margin: 0.5em 0; border-bottom: 1px dashed; } .label_wrap input[type=text], .label_wrap input[type=password], .label_wrap input[type=date], .label_wrap input[type=number], .label_wrap input[type=tel], .label_wrap input[type=email], .label_wrap select, .label_wrap textarea { border: 1px solid var(--border); display: block; width: 100%; outline: none; padding: var(--padding); border-radius: 0.4rem; background-color: var(--menu-background); color: var(--text-color); line-height: normal; } .label_wrap input[type=text].good, .label_wrap input[type=password].good, .label_wrap input[type=date].good, .label_wrap input[type=number].good, .label_wrap input[type=tel].good, .label_wrap input[type=email].good, .label_wrap select.good, .label_wrap textarea.good { border-right: 3px solid rgb(0, 121, 60) !important; } .label_wrap input[type=text].error, .label_wrap input[type=password].error, .label_wrap input[type=date].error, .label_wrap input[type=number].error, .label_wrap input[type=tel].error, .label_wrap input[type=email].error, .label_wrap select.error, .label_wrap textarea.error { border-right: 3px solid rgb(161, 0, 70) !important; } .label_wrap input[type=text]:disabled, .label_wrap input[type=password]:disabled, .label_wrap input[type=date]:disabled, .label_wrap input[type=number]:disabled, .label_wrap input[type=tel]:disabled, .label_wrap input[type=email]:disabled, .label_wrap select:disabled, .label_wrap textarea:disabled { background-color: inherit; color: var(--color-steel-blue); box-shadow: none; border-color: inherit; cursor: auto; } .label_wrap input[type=text] option, .label_wrap input[type=password] option, .label_wrap input[type=date] option, .label_wrap input[type=number] option, .label_wrap input[type=tel] option, .label_wrap input[type=email] option, .label_wrap select option, .label_wrap textarea option { padding: 0.25em 0.5rem; } .label_wrap input[type=text] option:selected, .label_wrap input[type=password] option:selected, .label_wrap input[type=date] option:selected, .label_wrap input[type=number] option:selected, .label_wrap input[type=tel] option:selected, .label_wrap input[type=email] option:selected, .label_wrap select option:selected, .label_wrap textarea option:selected { background-color: #008b10; } .label_wrap input[type=text]:-moz-read-only, .label_wrap input[type=password]:-moz-read-only { background-color: #f7f7f7; border: 1px solid transparent; } .label_wrap input[type=text]:read-only, .label_wrap input[type=password]:read-only { background-color: #f7f7f7; border: 1px solid transparent; } .label_wrap input[type=text]:disabled, .label_wrap input[type=password]:disabled { color: rgb(17, 17, 17); border-color: transparent; } .label_wrap .prefilled { display: flex; border: 1px solid var(--border); border-radius: 0.4rem; width: 100%; overflow: hidden; } .label_wrap .prefilled span { display: inline-block; padding: var(--padding); padding-right: 0; background-color: white; } .label_wrap .prefilled input { display: inline-flex; padding-left: 0; border: none; } .label_wrap textarea { max-width: 100%; max-height: 15vh; min-height: 2vh; min-width: 100%; resize: vertical; line-height: 1.8rem; } .label_wrap textarea.noresize { resize: none; } .label_wrap textarea.resizeh { resize: horizontal; } .label_wrap textarea.resizev { resize: vertical; } .label_wrap .label_wrap { margin: 0; font-size: 0.9rem; } .label_wrap .label_wrap label { margin: 0; } .label_wrap:has(+ input) { padding-bottom: 1rem; } .label_wrap ol.list { list-style-position: inside; } .label_wrap ol.list li { cursor: pointer; } .label_wrap ol.list li.selected { background-color: var(--border); } .label_wrap ol.list li::marker { color: var(--text-color); font-weight: 600; } .label_wrap select + .inputbuttons { padding: 0.3rem; margin-right: 0.5rem; color: var(--blend); } .label_wrap select + .inputbuttons [contenteditable=true] { min-width: 3rem; display: inline-block; /* border: 1px solid red; */ margin-right: 0.5rem; border-radius: 0.4rem; background-color: aliceblue; padding: 0.1rem 0.8rem; text-align: center; } input[type=file] { display: none; } input[type=file] + .label_wrap label { border: 1px solid var(--border) !important; border-radius: 0.25rem; margin: 0.25rem; display: flex; width: calc(100% - 0.5em); } input[type=file] + .label_wrap label .label_wrap { margin: 0; } input[type=file] + .label_wrap label .filelist { display: inline-block; padding: 0em 0.5rem; font-weight: normal; word-break: break-word; max-height: 5rem; overflow: auto; margin: auto 0; } input[type=file] + .label_wrap label .filelist a { padding: 0; margin-left: 0.4rem; } input[type=file] + .label_wrap label .labeltext { display: inline-block; padding: 0em 0.5rem; font-weight: normal; font-weight: 600; background-color: #e2e2e2; border-radius: 0.2rem; flex: none; align-self: flex-start; padding: 0.1em 0.5rem; } input[type=submit], input[type=reset] { display: inline-flex !important; padding: 0.6rem 1.2rem !important; } input[type=submit]:has(+ input[type=submit]), input[type=submit]:has(+ [type=reset]), input[type=reset]:has(+ input[type=submit]), input[type=reset]:has(+ [type=reset]) { margin-right: 1.5rem; } .inactive { opacity: 0.2; cursor: not-allowed; pointer-events: none; } .childButton { display: flex !important; border: 1px solid var(--border); border-radius: 0.25rem; padding: 0 !important; margin: 0.25rem; width: calc(100% - 0.5em) !important; } .childButton button { padding: 0.25em 0.75rem; margin: 0.25rem; display: inline-block; align-self: flex-start; } .childButton button + .filelist { display: inline-block; padding: 0.25em 0.5rem; flex: 1; } input[type=radio]:disabled + label, input[type=checkbox]:disabled + label { filter: opacity(0.75); vertical-align: text-top; } input[type=radio] + label::before { content: var(--radioU); } input[type=radio]:disabled + label { filter: grayscale(0.75); } input[type=radio]:checked + label::before { content: var(--radio); } input[type=checkbox]:disabled + label { filter: grayscale(0.75); } input[type=checkbox].reverse + label { background-color: #e4e4e4; } input[type=checkbox].reverse + label::before { content: var(--checkbox); filter: hue-rotate(0deg); } input[type=checkbox].reverse:checked + label { background-color: transparent; } input[type=checkbox].reverse:checked + label::before { content: var(--checkboxU); filter: hue-rotate(0deg); } input[type=radio].reverse + label::before { content: var(--radioU); filter: hue-rotate(90deg); } input[type=radio].reverse:checked + label { background-color: #e4e4e4; } input[type=radio].reverse:checked + label::before { content: var(--radio); filter: hue-rotate(0deg); } .cancel + label::before { content: var(--cancel) !important; filter: hue-rotate(-90deg); } .cancel:checked + label { display: none; } .cancel:checked + label ::before { content: var(--cancel) !important; } .yes + label::before { content: var(--yes) !important; } .yes:checked + label { display: none; } .yes:checked + label ::before { content: var(--yes) !important; } input[type=range] { -webkit-appearance: none; width: 100%; height: 0.2rem; background: white; outline: none; opacity: 0.7; transition: opacity 0.2s; border-radius: 0.5rem; margin: 0.5em 0; } input[type=range]:hover { opacity: 1; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.2rem; height: 1.2rem; background: deepskyblue; cursor: pointer; border-radius: 1.2rem; border: 2px solid #eee; outline: solid #eee 0.15rem; outline-offset: -1.2rem; -moz-outline-radius: 0.2rem; } input[type=range]::-moz-range-thumb { width: 1.2rem; height: 1.2rem; background: deepskyblue; cursor: pointer; border-radius: 1.2rem; border: 2px solid #eee; outline: solid #eee 0.15rem; outline-offset: -1.2rem; -moz-outline-radius: 0.2rem; } .comment { margin: 0.1em 0.4rem; font-size: 0.9rem; font-style: italic; color: gray; padding-bottom: 0.8rem; padding: 0.1em 0.5rem; text-align: left; line-height: normal; } .comment:hover { color: #676767; } .countrySelect { display: flex; grid-template-columns: auto 5rem; } .countrySelect > :nth-child(0) { flex: 2; } .countrySelect > :nth-child(1) { flex: 1; } .countrySelect input { padding-left: 0.5rem; } dialog { margin: auto; min-width: 22rem; box-shadow: var(--shadow); border: none; border-radius: var(--radius); -webkit-user-select: none; -moz-user-select: none; user-select: none; max-width: 1280px; padding: 1.5rem; z-index: 2; } dialog.isResponse { position: relative; margin: auto; margin-top: 1rem; margin-right: 1rem; pointer-events: none; } dialog.isResponse::backdrop { width: 0; height: 0; } dialog .dialog { padding: 1em 0.8rem; } dialog .tabs-container { grid-template-rows: auto !important; } dialog .tabs-container .tab-content { min-height: 10rem; position: relative; } dialog .tabs-container .tab-content:empty:before { content: "Nothing to show here"; position: absolute; padding: var(--padding); } dialog header { padding: 0.25em 0.5rem; font-weight: 600; border-bottom: 1px dotted; padding-bottom: 0.75em !important; margin-bottom: 0.5rem; } dialog .infotext { padding: 0.75em 0.5rem; } dialog ul li { list-style: circle; list-style-position: inside; text-align: left; } dialog::backdrop { background: repeating-linear-gradient(45deg, rgba(209, 209, 209, 0.15), rgba(204, 204, 204, 0) 10px), repeating-linear-gradient(-45deg, rgba(186, 186, 186, 0.15), rgba(110, 110, 110, 0) 10px); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); } dialog menu { display: flex; gap: 1rem; box-shadow: none; } dialog menu button { flex: 1; text-align: center; max-width: -moz-fit-content; max-width: fit-content; padding: 0.5rem 2rem; } dialog .close { position: absolute; top: 0; right: 0; color: red; scale: 1.4; padding: 0.4rem; cursor: pointer; } .notification { position: fixed; bottom: 0; padding: 0.75em 1.2rem; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); background-color: var(--color-steel-blue); width: 100%; color: white; transform: translateY(0%); animation: showNotification 5s ease-in-out forwards; } @keyframes showNotification { 0% { transform: translateY(100%); } 5% { transform: translate(0%); } 90% { transform: translate(0%); } 100% { transform: translateY(100%); } } @keyframes hideNotification { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } .before, .warn, .faq, .caution, .error, .timer, .update, .info { padding-left: 1.5em !important; position: relative; } .before::before, .warn::before, .faq::before, .caution::before, .error::before, .timer::before, .update::before, .info::before { position: absolute !important; top: 0; left: 0; width: 1.4rem; height: 1.4rem; } .info { font-size: 0.9rem; padding: 0.25rem; color: rgb(0, 146, 0); text-shadow: 0 0 2.5rem; opacity: 0.5; } .info::before { content: var(--info); padding: 0.25em 0; } .update { padding: 0.25rem; display: inline; } .update::before { content: var(--update); padding: 0.25em 0; } .timer { padding: 0.25rem; display: inline; } .timer::before { content: var(--timer); padding: 0.25em 0; } .error { padding: 0.25rem; color: rgb(73, 73, 73); text-shadow: 0 0 2.5rem; } .error::before { content: var(--error); padding: 0.25em 0; } .caution { padding: 0.25rem; color: rgb(204, 99, 0); text-shadow: 0 0 2.5rem; } .caution::before { content: var(--caution); padding: 0.25em 0; } .faq { padding: 0.25rem; display: inline; } .faq::before { content: var(--faq); padding: 0.25em 0; } .warn { padding: 0.25rem; color: rgb(156, 0, 0); text-shadow: 0 0 2.5rem; } .warn::before { content: var(--warn); padding: 0.25em 0; } .isPhone::before { content: var(--phone); } .isMail::before { content: var(--mail); } .isWebsite::before { content: var(--website); } .users::before { content: var(--users); } .video_edit::before { content: var(--video_edit); } .admin_settings::before { content: var(--admin_settings); } .video_settings::before { content: var(--video_settings); } .invoice::before { content: var(--invoice); } .isVideo::before { content: var(--file_video); } .isVideo.na::before { content: var(--file_video_not); } .isDoc::before { content: var(--file_attached); } .isLaptop::before { content: var(--mobile); } .isMobile::before { content: var(--laptop); } .isFolder::before { content: var(--folder); } .isFolder.na::before { content: var(--folder_not); } @keyframes slide_up { 0% { opacity: 0; transform: translate(-50%, 10%); } 100% { opacity: 1; transform: translate(-50%, 0%); } } @keyframes slide_down { 0% { opacity: 1; transform: translate(-50%, 0%); } 100% { opacity: 0; transform: translate(-50%, -20%); } } .slide_up { animation: slide_up 0.3s ease-in-out forwards; } body.dashboard { display: grid; grid-template-columns: 15em auto; grid-template-areas: "header header " " nav main"; grid-template-rows: 4em auto; position: absolute; height: 100%; width: 100%; left: 0; top: 0; } body.dashboard header { grid-area: header; border-bottom: 1px solid grey; background-color: #fdfdfd; padding: 0.5em; display: grid; grid-template-columns: 3em auto; } body.dashboard header .adminLogo { height: 3em; } body.dashboard header h1, body.dashboard header h0 { padding: 0em 1em; } body.dashboard nav { grid-area: nav; min-width: 5em; border-right: 1px solid #ccc; display: grid; grid-template-columns: 3em auto; grid-template-areas: "menu_icons menu_items" "menu_icons menu_static"; grid-template-rows: auto 3em; } body.dashboard nav .menu_icons { grid-area: menu_icons; font-weight: bold; background-color: RGB(200, 200, 200); } body.dashboard nav .menu_icons .menu_icon { padding: 0.5em 0.2em; font-size: 2.75em; margin-bottom: 3px; border-radius: 0.2em 0 0 0.2em; background-color: RGB(235 235 235); z-index: 1; filter: grayscale(0.5); } body.dashboard nav .menu_icons .menu_icon.selected { background-color: RGB(255, 255, 255); z-index: 2; filter: none; } body.dashboard nav .menu_items { grid-area: menu_items; background-color: #f1f1f1; z-index: 0; width: 100%; } body.dashboard nav .menu_items .menu_list { display: none; } body.dashboard nav .menu_items .menu_list.selected { display: block; } body.dashboard nav .menu_items .nav_item { padding: 0.5em; background-color: #fbfbfb; margin: 0.25em 0; color: #4d4d4d; border-radius: 0.25em 0 0 0.25em; } body.dashboard nav .menu_items .nav_item.selected { color: var(--color-steel-blue); background-color: #ffffff; border-left: 5px solid var(--color-steel-blue); transform: translateX(2px); border: 1px solid #ccc; border-right: none; } body.dashboard nav .menu_static { grid-area: menu_static; border-top: 1px dotted var(--color-steel-blue); padding: 0.5em 1em; line-height: 0.75em; } body.dashboard nav legend { padding: 0.3em 0.5em; border-bottom: 1px solid grey; font-weight: 600; color: white; background-color: var(--color-steel-blue); display: block; width: 100%; margin: 0; } body.dashboard nav fieldset { outline: none; padding: 0; margin: 0.75; } body.dashboard nav a { display: block; text-align: left; padding: 0.5em 0.6em; } body.dashboard main { grid-area: main; z-index: 1; overflow: auto; } body.dashboard main .all_fill { padding: 0.5em; } body.dashboard main .all_fill .togglebutton + label { padding-bottom: 0.75em; } body.dashboard main .all_fill .all h2 { padding: 0.25em; padding-bottom: 0.5em; margin-bottom: 0.5em; border-bottom: 1px dashed; filter: hue-rotate(120deg); } body.dashboard main legend { font-weight: 600; color: var(--color-steel-blue); } body.dashboard main legend .togglebutton + label { border-bottom: 1px dashed var(--color-steel-blue); padding-bottom: 0.75em; padding-right: 1em; } body.dashboard.collapse { grid-template-columns: 3em auto; } body.dashboard.collapse nav { grid-template-columns: 3em; grid-template-areas: "menu_icons"; grid-template-rows: auto; min-width: auto; } body.dashboard.collapse nav .menu_items { display: none; } body.dashboard.collapse nav .menu_static { display: none; } .layout { display: grid; grid-template-columns: minmax(18rem, max-content) auto; grid-template-rows: 5em auto auto; grid-template-areas: "l t " "l m" "l f"; transition-duration: 0.3s; } @media print { .layout { grid-template-areas: "m t" " m m"; grid-template-rows: auto !important; grid-template-columns: auto; line-height: normal; } } .layout ._pagetitle { grid-area: t; background-color: var(--background_dark); color: whitesmoke; border-radius: 0 0 0.6rem 0; top: 0; z-index: 1; display: grid; grid-template-columns: auto 5rem 5rem; } .layout ._left { grid-area: l; max-height: 100%; background-color: var(--background_dark); } .layout ._left ._header { color: white; background-color: red; position: sticky; top: 0; background-color: var(--background_dark); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); z-index: 1; opacity: 0.8; } .layout ._left .floatmenu { position: sticky; padding: var(--padding); top: 0; overflow: auto; height: 100vh; width: 100%; } .layout ._footer { grid-area: f; height: 6rem; color: white; margin-top: 2rem; border-top: 1px solid var(--border); background-color: var(--background_dark); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); opacity: 0.8; } .layout ._main { grid-area: m; margin: 0.8em; border-radius: 1em; background-color: var(--background); padding: 1.5rem; padding-top: 0; height: calc(100vh - 7em); z-index: 0; overflow-x: hidden; } .layout ._main .sticky { background-color: white; padding: var(--padding); } @media print { .layout ._main { overflow: unset; } } .layout ._main .properties { border-left: 2px solid var(--border); background-color: #f7f7f7; padding: var(--textpadding); border-radius: 0.3rem; } @media print { .layout ._main .properties { display: none; } } .layout ._main .properties > menu { position: sticky; top: 0; } .layout ._main:has(.properties) { display: grid; grid-template-columns: auto minmax(15rem, 20rem); -moz-column-gap: 2rem; column-gap: 2rem; } @media print { .layout ._main:has(.properties) { grid-template-columns: auto; } } .layout ._main .__heading .label_wrap { display: inline-flex; } .layout ._right { grid-area: r; } /* Calendar container with gradient background */ .calendar-container { padding: 2rem; background-color: var(--background); } .calendar-container .datedetails { display: grid; grid-template-columns: 1fr 10fr; margin-bottom: 1em; box-shadow: 0 0 0.5em #ccc; border-radius: 0.5em; padding: 0.25em; background-color: white; z-index: 1; } .calendar-container .datedetails span { display: inline-block; padding: 0.4em 0.6em; } .calendar-container .datedetails span.date { padding: 0.5em; text-align: center; vertical-align: middle; font-weight: 600; border: 1px solid; box-shadow: 0 0 0.3em #ccc; border-radius: 0.25em; background-color: var(--background); align-self: flex-start; color: var(--color-main); } .calendar-container .datedetails .details { display: grid; grid-template-columns: 1fr 1fr 6fr; text-align: left; } .calendar-container .datedetails .details .head { color: var(--interactive); font-weight: 600; text-shadow: 0 0 2px #ccc; } .calendar-container + .calanderdetails { display: flex; flex-direction: column; } .calendar-container + .calanderdetails .event { display: grid; grid-template-columns: 4rem auto; color: var(--background_dark); border: 1px solid var(--border); padding: var(--padding); border-radius: 0.4rem; margin-bottom: 1rem; gap: 1rem; background-color: white; order: 0; } .calendar-container + .calanderdetails .event ._edate { display: flex; flex-direction: column; text-align: center; } .calendar-container + .calanderdetails .event ._edate h0 { font-size: 2.5rem; margin: 0; color: currentColor; } .calendar-container + .calanderdetails .event.past { opacity: 0.6; order: 1; scale: 0.95; position: relative; } .calendar-container + .calanderdetails .event.past::before { content: "Date has passed"; position: absolute; top: -1rem; left: 0; background-color: var(--border); line-height: normal; font-size: 0.8em; padding: 0rem 0.6rem; color: red; } .calendar-container + .calanderdetails .event.future { opacity: 0.8; position: relative; background-color: lightgoldenrodyellow; } .calendar-container + .calanderdetails .event.future::before { content: "Coming next month"; position: absolute; top: -1rem; left: 0; background-color: grey; color: white; line-height: normal; font-size: 0.8em; padding: 0rem 0.6rem; } .calendar-container + .calanderdetails .event.today { scale: 1.05; background-color: var(--border); color: var(--background_dark); } .calendar-container + .calanderdetails .event ._edetails .title { font-weight: 600; } .calendar-container + .calanderdetails .event ._edetails [data-svg] { color: gray !important; font-size: 0.8em !important; } .calendar-container + .calanderdetails .event ._edetails [data-svg] .svgicon { fill: gray; padding-left: 0; margin: 0; } .calendar-container + .calanderdetails .event ._edetails .colorgrey { font-size: 0.9em; } .calendar-container + .calanderdetails .event:has(.today) { box-shadow: 0 0 0.5rem #ccc; } .calendar { width: -moz-max-content; width: max-content; margin: auto; padding: var(--padding); background-color: rgba(255, 255, 255, 0.6); border-radius: 0.5rem; position: sticky; top: 0; z-index: 1; } .calendar .ch { display: grid; grid-template-columns: 2.5rem auto auto 3.5rem 2.5rem; -moz-column-gap: 0.3rem; column-gap: 0.3rem; margin: auto; scale: 0.95; } .calendar .ch select { padding: 0.25rem; margin-right: 0.5rem; background-color: transparent; border: none; } .calendar .ch i { display: flex; align-items: center; } .calendar .__ct { margin: auto; padding: var(--padding); transition: opacity 0.3s ease, transform 0.3s ease; } .calendar .__ct .rows { border: 1px solid var(--border); background-color: var(--border); border-radius: 0.4rem; } .calendar .__ct .tr { display: grid; grid-template-columns: repeat(7, 3rem); height: 3rem; text-align: center; } .calendar .__ct .tr:first-child .td:first-child { border-radius: 0.3rem 0 0 0; } .calendar .__ct .tr:first-child .td:last-child { border-radius: 0 0.3rem 0 0; } .calendar .__ct .tr:last-child .td:first-child { border-radius: 0 0 0 0.3rem; } .calendar .__ct .tr:last-child .td:last-child { border-radius: 0 0 0.3rem 0; } .calendar .__ct .th { color: var(--background_dark); font-weight: 600; display: flex; } .calendar .__ct .date { display: flex; margin: auto; } .calendar .__ct .td { cursor: pointer; display: flex; background-color: rgba(255, 255, 255, 0.8); border: 1px solid var(--border); } .calendar .__ct .td.today { background-color: var(--background_dark); color: var(--border); border-color: var(--background_dark); } .calendar .__ct .td:hover { background-color: var(--border); color: var(--background_dark); position: relative; z-index: 1; } .calendar .__ct .td.empty { background-color: hsla(0, 0%, 93%, 0.85); opacity: 1.8; color: gray; } .calendar .__ct .td.empty:hover { transform: none; box-shadow: none; position: relative; z-index: 1; border: 2px solid inherit; cursor: default; } .calendar .__ct .td .items { position: absolute; top: 0; right: 0; max-width: 70%; text-align: right; display: flex; flex-direction: column; } .calendar .__ct .td.dateitem { box-shadow: inset 0 0 0.8rem var(--border); } .calendar .__ct .td.selected { color: var(--background_dark); background-color: var(--value); border-radius: 0.3rem; } .edit { padding: 0.3em; border: 1px dashed transparent; display: block; width: 100%; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; position: relative; white-space: pre-wrap; } .edit:empty::before { content: attr(placeholder); color: var(--text_hover); } .edit *:empty:not(.__resize) { padding: 1rem; } .edit *:empty:not(.__resize)::before { position: absolute; top: 0; height: 100%; color: rgb(0, 255, 187); width: 2px; } .edit .selectedNode { outline: 1px dashed orangered; outline-offset: 0.25rem; box-shadow: 0 0 0.5rem #ddd; } .edit .vbar { border-right: 1px solid var(--border); vertical-align: middle; pointer-events: none; } .edit[contenteditable=true], .edit.__tags { outline: 1px dashed var(--border); display: inline-block; margin: 1em 0; background-color: white; } .edit[contenteditable=true]:focus, .edit.__tags:focus { outline: 1px dashed green; } .edit.__tags .tags, .edit.__tags .tag { display: inline-block; padding: 0.2em 0.6em; min-width: 5em; border-radius: 0.3em; background-color: white; margin: 0.3em; vertical-align: middle; } .edit.__tags .tag { background-color: #f5f5f5; } .edit.__tags .tags { padding: 0.4em; } .edit.__tags svg { height: 1.8em; width: 1.8em; margin: 0; fill: red; } .edit p, .edit li, .edit h1, .edit h0, .edit h2, .edit h3, .edit h4, .edit h5, .edit h6, .edit cite, .edit dd { border: 1px dashed #ddd; display: flow-root; position: relative; min-width: 30%; margin-top: 1.2em; } .edit p > *, .edit li > *, .edit h1 > *, .edit h0 > *, .edit h2 > *, .edit h3 > *, .edit h4 > *, .edit h5 > *, .edit h6 > *, .edit cite > *, .edit dd > * { outline: 1px solid; outline-offset: 0.1rem; } .edit p > span, .edit p > em, .edit li > span, .edit li > em, .edit h1 > span, .edit h0 > span, .edit h1 > em, .edit h0 > em, .edit h2 > span, .edit h2 > em, .edit h3 > span, .edit h3 > em, .edit h4 > span, .edit h4 > em, .edit h5 > span, .edit h5 > em, .edit h6 > span, .edit h6 > em, .edit cite > span, .edit cite > em, .edit dd > span, .edit dd > em { background-color: orangered; color: white; padding-left: 1rem; } .edit p:hover::before, .edit li:hover::before, .edit h1:hover::before, .edit h0:hover::before, .edit h2:hover::before, .edit h3:hover::before, .edit h4:hover::before, .edit h5:hover::before, .edit h6:hover::before, .edit cite:hover::before, .edit dd:hover::before { position: absolute; bottom: 100%; left: 0; width: auto; font-size: 0.8rem; background-color: grey; color: white; border-radius: 0.2em; padding: 0.1rem 0.5rem; font-weight: 600; content: "p"; } .edit p:hover, .edit li:hover, .edit h1:hover, .edit h0:hover, .edit h2:hover, .edit h3:hover, .edit h4:hover, .edit h5:hover, .edit h6:hover, .edit cite:hover, .edit dd:hover { border: 1px solid #ddd; box-shadow: 0 0 0.3em #ccc; background-color: white; } .edit p:hover menu, .edit li:hover menu, .edit h1:hover menu, .edit h0:hover menu, .edit h2:hover menu, .edit h3:hover menu, .edit h4:hover menu, .edit h5:hover menu, .edit h6:hover menu, .edit cite:hover menu, .edit dd:hover menu { display: block; font-size: 0.75em; z-index: 3; background-color: white; box-shadow: 0 0 0.3em #ccc; } .edit p:empty, .edit li:empty, .edit h1:empty, .edit h0:empty, .edit h2:empty, .edit h3:empty, .edit h4:empty, .edit h5:empty, .edit h6:empty, .edit cite:empty, .edit dd:empty { outline: 1px solid red; line-height: 1.2em; padding: 0.25em; background-color: #ddd; } .edit p.l, .edit p.c, .edit p.r, .edit p.j, .edit li.l, .edit li.c, .edit li.r, .edit li.j, .edit h1.l, .edit h0.l, .edit h1.c, .edit h0.c, .edit h1.r, .edit h0.r, .edit h1.j, .edit h0.j, .edit h2.l, .edit h2.c, .edit h2.r, .edit h2.j, .edit h3.l, .edit h3.c, .edit h3.r, .edit h3.j, .edit h4.l, .edit h4.c, .edit h4.r, .edit h4.j, .edit h5.l, .edit h5.c, .edit h5.r, .edit h5.j, .edit h6.l, .edit h6.c, .edit h6.r, .edit h6.j, .edit cite.l, .edit cite.c, .edit cite.r, .edit cite.j, .edit dd.l, .edit dd.c, .edit dd.r, .edit dd.j { min-width: calc(50% - 1.5em); } .edit p.l, .edit li.l, .edit h1.l, .edit h0.l, .edit h2.l, .edit h3.l, .edit h4.l, .edit h5.l, .edit h6.l, .edit cite.l, .edit dd.l { float: left; margin: 1.5em; margin-left: 0; } .edit p.c, .edit li.c, .edit h1.c, .edit h0.c, .edit h2.c, .edit h3.c, .edit h4.c, .edit h5.c, .edit h6.c, .edit cite.c, .edit dd.c { width: 50%; margin: 1.5em auto; } .edit p.r, .edit li.r, .edit h1.r, .edit h0.r, .edit h2.r, .edit h3.r, .edit h4.r, .edit h5.r, .edit h6.r, .edit cite.r, .edit dd.r { float: right; margin: 1.5em; margin-right: 0; } .edit p.j, .edit li.j, .edit h1.j, .edit h0.j, .edit h2.j, .edit h3.j, .edit h4.j, .edit h5.j, .edit h6.j, .edit cite.j, .edit dd.j { width: 100%; margin: 1.5em auto; } .edit p.tl, .edit li.tl, .edit h1.tl, .edit h0.tl, .edit h2.tl, .edit h3.tl, .edit h4.tl, .edit h5.tl, .edit h6.tl, .edit cite.tl, .edit dd.tl { text-align: left; } .edit p.tc, .edit li.tc, .edit h1.tc, .edit h0.tc, .edit h2.tc, .edit h3.tc, .edit h4.tc, .edit h5.tc, .edit h6.tc, .edit cite.tc, .edit dd.tc { text-align: center; } .edit p.tr, .edit li.tr, .edit h1.tr, .edit h0.tr, .edit h2.tr, .edit h3.tr, .edit h4.tr, .edit h5.tr, .edit h6.tr, .edit cite.tr, .edit dd.tr { text-align: right; } .edit p.tj, .edit li.tj, .edit h1.tj, .edit h0.tj, .edit h2.tj, .edit h3.tj, .edit h4.tj, .edit h5.tj, .edit h6.tj, .edit cite.tj, .edit dd.tj { text-align: justify; } .edit p a, .edit li a, .edit h1 a, .edit h0 a, .edit h2 a, .edit h3 a, .edit h4 a, .edit h5 a, .edit h6 a, .edit cite a, .edit dd a { text-decoration: underline; position: relative; color: #0077b6; padding: initial; } .edit p a:hover::before, .edit li a:hover::before, .edit h1 a:hover::before, .edit h0 a:hover::before, .edit h2 a:hover::before, .edit h3 a:hover::before, .edit h4 a:hover::before, .edit h5 a:hover::before, .edit h6 a:hover::before, .edit cite a:hover::before, .edit dd a:hover::before { opacity: 1; position: absolute; bottom: 100%; left: 0; width: auto; content: "a"; font-size: 0.6em; background-color: grey; color: white; border-radius: 0.2em; padding: 2px; font-weight: 600; } .edit p:hover::before { content: "p " attr(id); } .edit li:hover::before { content: "li " attr(id); } .edit h1:hover::before, .edit h0:hover::before { content: "h1 " attr(id); } .edit h2:hover::before { content: "h2 " attr(id); } .edit h3:hover::before { content: "h3 " attr(id); } .edit h4:hover::before { content: "h4 " attr(id); } .edit h5:hover::before { content: "h5 " attr(id); } .edit h6:hover::before { content: "h6 " attr(id); } .edit dd:hover::before { content: "dd " attr(id); } .edit q:hover::before { content: "q " attr(id); } .edit cite:hover::before { content: "cite " attr(id); } .edit svg { border: none; } .edit:active, .edit:focus { border: 1px dashed red; } .edit ul, .edit ol { padding: 0.25em; border: 1px solid #ccc; padding-left: 1em; } .edit ul menu, .edit ol menu { display: block; font-size: 0.75em; z-index: 3; } .edit ul:active, .edit ul:focus, .edit ol:active, .edit ol:focus { border-color: #0077b6; } .edit ul.custom_list, .edit ol.custom_list { list-style-type: none; /* Remove default numbering */ counter-reset: my-counter; /* Initialize a custom counter */ } .edit ul.custom_list li::before, .edit ol.custom_list li::before { content: "( " counter(my-counter) " )"; /* Use the custom counter as the content */ counter-increment: my-counter; /* Increment the custom counter */ margin-right: 5px; /* Add space between the counter and list item */ font-weight: 600; /* Apply custom styling to the counter */ color: #0077b6; /* Define a custom color for the counter */ } .edit ul li, .edit ol li { padding: 0.25em; } .edit ul li::marker, .edit ol li::marker { color: red; } .edit ul li span, .edit ul li p, .edit ol li span, .edit ol li p { display: block; } .edit ul li p, .edit ol li p { margin: 0; line-height: 1.2em; } .edit ul li menu, .edit ol li menu { display: block; font-size: 0.75em; z-index: 3; } .edit ul::marker { color: red; } .edit ol::marker { color: green; } .edit ol { list-style-type: decimal-leading-zero; } .edit ol ol { list-style-type: lower-alpha; } .edit ol ol ol { list-style-type: lower-roman; } .edit p { margin: 0.6em 0; margin-top: 1.5em; } .edit table { width: 90%; border: 1px solid var(--border); margin: 1.5em auto; position: relative; border-collapse: separate; } .edit table caption { caption-side: bottom; padding: 0.4em; font-size: 0.9em; font-weight: 600; text-align: left; color: #555; } .edit table:focus-within { border-color: var(--color-main); box-shadow: 0 0 1em #fcfcfc; } .edit table caption { border: 1px solid var(--border); } .edit table td, .edit table th { border: 1px solid var(--border); padding: 0.3em; position: relative; } .edit table td .__resize, .edit table th .__resize { width: 0px; height: 100%; display: inline-block; position: absolute; right: -3px; top: 0; border: 2px solid #ddd; } .edit table td .__resize:hover, .edit table th .__resize:hover { background-color: var(--color-main); cursor: col-resize; } .edit table td .__resize:hover::before, .edit table th .__resize:hover::before { position: absolute; width: 2px; left: 0; background-color: var(--color-main); } .edit table td .__insertrow, .edit table td .__insertcol, .edit table th .__insertrow, .edit table th .__insertcol { position: absolute; display: none; width: auto; top: -10px; left: 0; } .edit table td .__insertrow:hover, .edit table td .__insertcol:hover, .edit table th .__insertrow:hover, .edit table th .__insertcol:hover { cursor: pointer; } .edit table td .__insertrow svg, .edit table td .__insertcol svg, .edit table th .__insertrow svg, .edit table th .__insertcol svg { height: 1.5em; width: 1.5em; } .edit table td .__insertcol, .edit table th .__insertcol { transform: translate(-50%, -100%); padding: 0.25em; position: absolute; top: 0; left: 50%; } .edit table td .__insertrow, .edit table th .__insertrow { height: auto; left: -1px; top: 50%; transform: translate(-100%, -50%); width: auto; } .edit table td:hover .__insertrow, .edit table td:hover .__insertcol, .edit table th:hover .__insertrow, .edit table th:hover .__insertcol { display: flex; } .edit table td:hover .__insertcol, .edit table th:hover .__insertcol { display: flex; } .edit table td span > *, .edit table th span > * { background-color: lightgray; } .edit table th { background-color: var(--neutral); } .edit table tr.delete { animation: delete 1s ease-in-out forwards; } @keyframes delete { 0% { opacity: 1; } 100% { opacity: 0; transform: rotateX(90deg); } } .edit table:hover menu { display: block; } .edit table.l, .edit table.c, .edit table.r, .edit table.j { min-width: calc(50% - 1.5em); } .edit table.l { float: left; margin: 1.5em; margin-left: 0; } .edit table.c { width: 50%; margin: 1.5em auto; } .edit table.r { float: right; margin: 1.5em; margin-right: 0; } .edit table.j { width: 100%; margin: 1.5em auto; } .edit figure { display: table; width: 50%; clear: both; padding: 0.5em; position: relative; margin: 1.5em auto; background-color: #fcfcfc; } .edit figure img { min-width: 3em; min-height: 3em; position: relative; max-width: 100%; width: 50%; margin: auto; display: flex; pointer-events: none; } .edit figure img:empty::before { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA6UlEQVR4nL3VwQnCMBSA4R/xIFZwBWmdwIO4Qo9O4RSCI4gDKVi8uYIg7VlwAYkUXiG0xeY1jQ9yKAn5kpe8FP4UY+AEJKGAPWCAPBQyBS6CFMAyBLIVoL6TNfC2+rpaucC0DXjUBvogeRtQdUae6TLSfnb4IMYFKGMGZA636ybj1IArkgHXvkA9XS51oga0iBrYKM9EBaTABzjI9xx4dSDOwMKazAhybCmouA8wAe6KqrWRquLdt6Y8+JXs3BtoO/jYersaUSgeM+OYrsaNyQdCEgLEzErXU35ig0cEnIFdiMmrGIWcvBFfkhavyWIF8SMAAAAASUVORK5CYII=); width: auto; height: auto; position: absolute; display: block; margin: auto; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; } .edit figure figcaption { border: 1px solid red; margin-top: 1em; padding: 0.5em; background-color: #f7f7f7; } .edit figure:hover menu { display: block; } .edit figure.l, .edit figure.c, .edit figure.r, .edit figure.j { min-width: calc(50% - 1.5em); } .edit figure.l { float: left; margin-right: 1.5em; } .edit figure.c { width: 50%; } .edit figure.r { float: right; margin-left: 1.5em; } .edit figure.j { width: 100%; } .edit hr.relocate { border: 2px solid #ff00f3; padding: 0; } .edit section { padding: 0.5em; background-color: #f7f7f7; position: relative; min-width: 50%; } .edit section menu { left: auto; right: 0; } .edit section:hover menu { display: block; } .edit section.l { float: left; margin: 1.5em; margin-left: 0; } .edit section.c { width: 50%; margin: 1.5em auto; } .edit section.r { float: right; margin: 1.5em; margin-right: 0; } .edit section.j { width: 100%; margin: 1.5em auto; } .edit .selectMenu { display: none; position: absolute; border: 1px solid #ccc; background-color: #fff; list-style: none; padding: 5px; } .edit .selectMenu ul { margin: 0; padding: 0; } .edit .selectMenu ul li { cursor: pointer; padding: 5px 10px; } .edit .selectMenu ul li:hover { background-color: #f0f0f0; } .edit b { position: relative; } .edit b:hover::before { content: "b"; position: absolute; bottom: 100%; left: 0; background-color: rgb(157, 156, 156); color: white; padding: 0.4rem; font-size: 0.8rem; line-height: 1rem; font-weight: normal; border-radius: 0.3rem 0.3rem 0 0; } .edit > *::-moz-selection { background-color: #ddd; } .edit > *::selection { background-color: #ddd; } .edit > *:focus { background-color: red; } .edit img { max-width: 100%; } .EditTools { display: flex; gap: 0.8rem; padding: 0.5rem; background-color: white; border-radius: 0.5rem; color: dimgrey; flex-wrap: wrap; } .EditTools .group { display: inline-flex; gap: 0.5rem; } .EditTools .group > span { display: inline-block; background-color: #f7f7f7; padding: 0.1rem 0.4rem; border-radius: 0.2rem; cursor: pointer; } .EditTools .group > span:hover { color: #030303; } .EditTools .group > span.selected { color: #1d1d1d; } .EditTools .group > span.disabled { opacity: 0.5; pointer-events: none; } .EditTools .verticalSeperator { width: 1px; height: auto; padding: 0; background-color: lightgrey; cursor: default; } menu { text-align: left; background-color: white; box-shadow: 0 0 0.3rem #ddd; } menu.__menufloating { position: absolute; transform: translate(0%, -100%); top: 0; left: 0%; display: none; font-size: 0.8rem; z-index: 5; } menu span.selected svg { border: 1px solid var(--interactive); background-color: var(--interactive); fill: var(--color-main); } .clonenode { position: relative; padding: 0.25em 0.6em; } .clonenode menu.toolbar { position: absolute; top: calc(100% - 2px); left: 5em; border: 1px solid white; background-color: #fbfbfb; box-shadow: 0 0 0.6em #ccc; border-radius: 0.3em; opacity: 0.8; z-index: 10; font-size: 16px; display: flex; } .clonenode menu.toolbar:hover { opacity: 1; } .clonenode menu.toolbar .clonebutton { background-color: #fdfdfd; cursor: pointer; pointer-events: all; border-radius: 0.5em; margin: 0.2em; display: flex; align-items: center; position: relative; } .clonenode menu.toolbar .clonebutton:hover { background-color: #efefef; } .clonenode menu.toolbar span { padding: 0.4em; font-weight: 600; } .clonenode a { padding: 0 0.2em; margin: 0; color: deepskyblue; cursor: pointer; position: relative; } .clonenode a menu { position: absolute; bottom: 100%; left: 0; padding: 0.5em; border: 1px solid #fbfbfb; background-color: white; display: none; } .clonenode a:hover menu { display: flex; } .clonenode a:hover menu p { padding: 0; } .contextMenu { display: none; position: absolute; background-color: white; border: 1px solid #ccc; padding: 5px; z-index: 100; } .contextMenu .menusection { display: flex; } .editmenu .toolbar_edit { border: 1px solid #ddd; border-radius: 0.3em; box-shadow: 0.2em 0.2em 0.5em #ddd; background-color: white; padding: var(--padding); display: block; } .editmenu .toolbar_edit details { opacity: 0.75; } .editmenu .toolbar_edit details:hover { opacity: 1; } .editmenu .toolbar_edit details .iconrow { display: flex; } .editmenu .toolbar_edit button, .editmenu .toolbar_edit .asbutton, .editmenu .toolbar_edit .buttons_combo { padding: initial; margin: 0.25em; box-shadow: none; border: 1px solid #efefef; background-color: #fdfdfd; color: var(--color-background); position: relative; } .editmenu .toolbar_edit button svg, .editmenu .toolbar_edit .asbutton svg, .editmenu .toolbar_edit .buttons_combo svg { fill: var(--neutral); } .editmenu .toolbar_edit button input, .editmenu .toolbar_edit button select, .editmenu .toolbar_edit button textarea, .editmenu .toolbar_edit .asbutton input, .editmenu .toolbar_edit .asbutton select, .editmenu .toolbar_edit .asbutton textarea, .editmenu .toolbar_edit .buttons_combo input, .editmenu .toolbar_edit .buttons_combo select, .editmenu .toolbar_edit .buttons_combo textarea { color: var(--neutral); } .editmenu .toolbar_edit button.active input, .editmenu .toolbar_edit button.active select, .editmenu .toolbar_edit button.active textarea, .editmenu .toolbar_edit .asbutton.active input, .editmenu .toolbar_edit .asbutton.active select, .editmenu .toolbar_edit .asbutton.active textarea, .editmenu .toolbar_edit .buttons_combo.active input, .editmenu .toolbar_edit .buttons_combo.active select, .editmenu .toolbar_edit .buttons_combo.active textarea { color: var(--color-main); } .editmenu .toolbar_edit button.active:hover .submenu, .editmenu .toolbar_edit .asbutton.active:hover .submenu, .editmenu .toolbar_edit .buttons_combo.active:hover .submenu { color: var(--color-main); } .editmenu .toolbar_edit button.active:hover .submenu button, .editmenu .toolbar_edit .asbutton.active:hover .submenu button, .editmenu .toolbar_edit .buttons_combo.active:hover .submenu button { color: var(--color-main); } .editmenu .toolbar_edit button.active svg, .editmenu .toolbar_edit .asbutton.active svg, .editmenu .toolbar_edit .buttons_combo.active svg { fill: var(--color-main); } .editmenu .toolbar_edit button.selected, .editmenu .toolbar_edit .asbutton.selected, .editmenu .toolbar_edit .buttons_combo.selected { filter: hue-rotate(160deg); border-color: var(--color-main); background-color: var(--color-background); } .editmenu .toolbar_edit button .submenu, .editmenu .toolbar_edit .asbutton .submenu, .editmenu .toolbar_edit .buttons_combo .submenu { position: absolute; top: 100%; left: 0; border: 1px solid #ccc; background-color: #fdfdfd; color: var(--neutral); display: none; flex-direction: column; padding: 0.3em; box-shadow: 0 0 0.8em 0 var(--neutral); border-radius: 0.2em; transform: translateX(-2em); grid-template-columns: auto auto; min-width: -moz-max-content; min-width: max-content; } .editmenu .toolbar_edit button .submenu .sbi, .editmenu .toolbar_edit .asbutton .submenu .sbi, .editmenu .toolbar_edit .buttons_combo .submenu .sbi { flex: 1; flex-wrap: nowrap; padding: 0.3em 0.6em; display: flex; flex-direction: row; align-items: center; text-wrap: nowrap; } .editmenu .toolbar_edit button .submenu .sbi:hover, .editmenu .toolbar_edit .asbutton .submenu .sbi:hover, .editmenu .toolbar_edit .buttons_combo .submenu .sbi:hover { background-color: var(--color-background); color: var(--color-main); } .editmenu .toolbar_edit button .submenu .sbi label, .editmenu .toolbar_edit .asbutton .submenu .sbi label, .editmenu .toolbar_edit .buttons_combo .submenu .sbi label { width: -moz-max-content; width: max-content; } .editmenu .toolbar_edit button .submenu .sbi button, .editmenu .toolbar_edit .asbutton .submenu .sbi button, .editmenu .toolbar_edit .buttons_combo .submenu .sbi button { color: var(--neutral); width: 100%; text-align: justify; } .editmenu .toolbar_edit button .submenu:hover, .editmenu .toolbar_edit .asbutton .submenu:hover, .editmenu .toolbar_edit .buttons_combo .submenu:hover { display: flex; } .editmenu .toolbar_edit button .submenu .imageInsert, .editmenu .toolbar_edit .asbutton .submenu .imageInsert, .editmenu .toolbar_edit .buttons_combo .submenu .imageInsert { width: 10em; } .editmenu .toolbar_edit button .submenu .imageInsert img, .editmenu .toolbar_edit .asbutton .submenu .imageInsert img, .editmenu .toolbar_edit .buttons_combo .submenu .imageInsert img { width: 100%; aspect-ratio: 1/1; } .editmenu .toolbar_edit button .submenu .imageInsert .labeltext, .editmenu .toolbar_edit .asbutton .submenu .imageInsert .labeltext, .editmenu .toolbar_edit .buttons_combo .submenu .imageInsert .labeltext { display: none; } .editmenu .toolbar_edit button, .editmenu .toolbar_edit .asbutton, .editmenu .toolbar_edit .buttons_combo { z-index: 0; } .editmenu .toolbar_edit button:hover, .editmenu .toolbar_edit .asbutton:hover, .editmenu .toolbar_edit .buttons_combo:hover { background-color: #efefef; z-index: 2; } .editmenu .toolbar_edit button:hover .submenu, .editmenu .toolbar_edit .asbutton:hover .submenu, .editmenu .toolbar_edit .buttons_combo:hover .submenu { display: flex; } .editmenu .toolbar_edit button .submenu:hover, .editmenu .toolbar_edit .asbutton .submenu:hover, .editmenu .toolbar_edit .buttons_combo .submenu:hover { display: flex; } .editmenu .toolbar_edit .asbutton { display: inline-block; border: none; margin: 0; } .editmenu .toolbar_edit .asbutton:hover { background-color: transparent; } .editmenu .toolbar_edit .buttons_combo { padding: 0; border-radius: 0.3em; display: flex; vertical-align: middle; } .editmenu .toolbar_edit .buttons_combo button { background-color: transparent; margin: 0; border: none; } .editmenu .toolbar_edit .buttons_combo button:hover { background-color: transparent; } .editmenu .toolbar_edit .hasmenu::before { content: " "; position: absolute; left: -0.2em; height: 1.2em; top: 50%; width: 2px; background-color: #cccccc; transform: translateY(-50%); } .editmenu .toolbar_edit .hasmenu svg { width: 1.3em; } .editmenu .toolbar_edit .vbar { left: -0.2em; top: 50%; width: 1.5px; background-color: #cccccc; margin: 0.5em; } .editmenu .toolbar_edit ._grid { display: grid; grid-template-columns: auto auto; } .editmenu .toolbar_edit .table_insert { display: grid; grid-template-columns: repeat(10, 15px) !important; transform: none !important; } .editmenu .toolbar_edit .table_insert .cell { border: 1px solid #efefef; padding: 0.5em; border-radius: 2px; box-shadow: inset 0 0 0 1px #efefef; } .editmenu .toolbar_edit .table_insert .cell.selected { background-color: var(--color-main); } .editmenu .toolbar_edit .table_insert .cell.hover { background-color: var(--color-main); border-color: gold; box-shadow: inset 0 0 0 1px gold; } .editmenu .toolbar_edit .table_insert .cell.heading { background-color: grey; } .editmenu .toolbar_edit .table_insert .rowcol, .editmenu .toolbar_edit .table_insert .caption { grid-column: 1/-1; } .editmenu .toolbar_edit .table_insert .caption { padding: 0.2em; border: 1px solid #efefef; text-align: left; font-weight: bold; } .editmenu .toolbar_edit .table_insert .caption::before { content: "Table Caption "; font-size: 0.8em; } [data-svg] { flex: 1; text-align: center; position: relative; display: inline-block; } [data-svg] .svgicon { height: 2em; width: 2em; vertical-align: middle; border-radius: 0.2em; padding: 3px; margin: 0 0.2em; cursor: pointer; fill: currentColor; } [data-svg] .svgicon:hover { filter: brightness(0.75); } [data-svg].svgline .svgicon { stroke: var(--border); stroke-width: 2px; fill: transparent; } [data-svg].svgline .svgicon:hover { stroke: white; filter: drop-shadow(0 0 1px grey); } [data-svg]:active .svgicon { padding: 5px; } [data-svg].na .svgicon { padding: 5px; } .col-31 { display: grid; grid-template-columns: 3fr minmax(15em, 1fr); } .col-3, .label_wrap ol.list { display: grid; grid-template-columns: repeat(100%/3); } @counter-style options { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; suffix: " : "; prefix: "Chapter "; pad: 2 "0"; speak-as: numbers; } ul.ol { list-style: options; list-style-position: inside; } menu.custom, menu.customselect { position: fixed; border: 1px solid #ddd; box-shadow: 0 0 1em #ddd; left: 0; top: 0; width: 10em; background-color: white; /* margin: auto; */ border-radius: 0.2em; list-style: none; z-index: 10; font-size: 0.85em; } menu.custom li, menu.customselect li { padding: 0.4em 0.6em; border: 3px solid transparent; cursor: pointer; position: relative; padding-right: 1em; } menu.custom li:hover, menu.customselect li:hover { background-color: #f5f5f5; } menu.custom li:hover menu, menu.customselect li:hover menu { display: block; } menu.custom li:has(menu)::after, menu.customselect li:has(menu)::after { content: "❯"; position: absolute; right: 0.5em; top: 50%; transform: translateY(-50%); } menu.custom li menu, menu.customselect li menu { box-shadow: 0 0 1em #eee; width: 10em; background-color: white; display: none; list-style: none; position: absolute; left: 100%; top: 0; left: 100%; width: -moz-max-content; width: max-content; max-width: 10em; } menu.custom input, menu.custom select, menu.custom textarea, menu.customselect input, menu.customselect select, menu.customselect textarea { width: 100%; padding: 0.3em 0.5em; } .__heading { font-weight: 600; } .tag { display: inline-block; min-width: 5em; border-radius: 0.3em; background-color: lightyellow; margin: 0.3em; vertical-align: middle; position: relative; padding: 0.5rem 0.8rem; padding-right: 2.5rem; border: 3px solid white; box-shadow: 0 0 0.5rem #ccc; } .tag span { padding: 0.4em 0.8em; } .tag i { position: absolute; right: 0; top: 0.5rem; } .tag svg { height: 1.8em; width: 1.8em; margin: 0; fill: red !important; } @font-face { font-family: "Poppins"; src: local("Poppins"), url("../_style/Poppins-Regular.ttf") format("truetype"); } /* HTML TAGS*/ * { padding: 0; margin: 0; box-sizing: border-box; transition: color, background-color; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; -webkit-user-select: none; -moz-user-select: none; user-select: none; outline: none; letter-spacing: 0.2px; font-variation-settings: normal; line-height: 1.8rem; } html, body { height: 100%; /* this will sett the body at full height of window */ width: auto; position: relative; font-size: 10.5pt; } @media print { html, body { font-size: 9pt; line-height: normal; } } body { max-width: 100%; margin: auto; white-space-collapse: collapse; } html { display: block; } html:focus { outline: none; } body { transition: all 0.3s ease-out; padding: 0; overflow-x: hidden; height: auto; min-height: 100%; display: block; margin: auto; } body:focus { outline: none; } @media print { body::after { content: "CONFIDENTIAL"; /* Watermark text */ opacity: 0.2; /* Adjust the opacity as needed */ font-size: 7rem; /* Adjust font size */ color: #d3d3d3; /* Watermark color */ position: fixed; bottom: 50%; /* Adjust position vertically */ left: 5%; /* Adjust position horizontally */ transform: rotate(-60deg); /* Adjust rotation angle */ z-index: 9999; } } body:has(.multiview), body:has(.properties) { max-width: 100vw; } body.darktheme { --background-color: var(--background_light); --text: var(--text_dark); } ::-moz-selection { color: var(--border); background-color: var(--text-color); } ::selection { color: var(--border); background-color: var(--text-color); } ::highlight(range) { color: #ff0073; background-color: lightyellow; } .highlight, .bringforward, ::highlight(search-highlight) { background-color: yellow; } .content > .highlighted-parent { border: 2px solid red; } ::highlight(marked) { color: #c4004a; background-color: #ffe5ee; position: relative; } ::highlight(marked)::before { content: "Not active it"; position: absolute; top: 0; left: 0; } a:-webkit-any-link { color: currentColor; cursor: pointer; text-decoration: none; } a { padding: var(--textpadding); cursor: pointer; color: currentColor; } a:link { text-decoration: underline; text-underline-offset: 0.4rem; cursor: pointer; } a._fetch { text-decoration: none; color: currentColor; } a._fetch:visited { text-decoration: none; color: currentColor; } a._fetch:hover { text-decoration: none; } a.button, .__sideMenu a { position: relative; padding: var(--padding); } address { display: block; font-style: italic; } area { display: none; } article { display: block; } aside { display: block; } b { font-weight: 600; } bdo { unicode-bidi: bidi-override; } blockquote { display: block; margin-top: 1rem; margin-bottom: 1rem; margin-left: 40px; margin-right: 40px; } button, .button, .__sideMenu a, input[type=submit], input[type=reset] { padding: var(--button_padding); background-color: var(--button-background); color: var(--button-color); display: block; text-align: left; position: relative; text-wrap: nowrap; border-radius: 0.4em; border: 1px solid var(--border); margin: 0.3em auto; font-weight: 500; text-decoration: none; text-decoration-thickness: auto; cursor: pointer; -moz-user-select: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; line-height: normal; } button.inline, .button.inline, .__sideMenu a.inline, input.inline[type=submit], input.inline[type=reset] { display: inline-block; margin: auto 1.5rem; } button:hover, .button:hover, .__sideMenu a:hover, input[type=submit]:hover, input[type=reset]:hover { filter: drop-shadow(1px 3px 4px grey); } button:hover .svgicon, .button:hover .svgicon, .__sideMenu a:hover .svgicon, input[type=submit]:hover .svgicon, input[type=reset]:hover .svgicon { filter: invert(1); } button:active, .button:active, .__sideMenu a:active, input[type=submit]:active, input[type=reset]:active { color: white; background-color: var(--color-main); } button:disabled, button.disabled, .button:disabled, .__sideMenu a:disabled, input[type=submit]:disabled, input[type=reset]:disabled, .button.disabled, .__sideMenu a.disabled, input.disabled[type=submit], input.disabled[type=reset] { color: gray; background-color: var(--neutral); pointer-events: none; } canvas { height: 100%; width: 100%; } caption { display: table-caption; text-align: center; } cite { padding: var(--textpadding); border-left: 5px solid red; display: inline-block; padding-left: 1rem; background-color: yellow; } code, .code { font-family: monospace; } col { display: table-column; } colgroup { display: table-column-group; } datalist { display: block; } datalist option { padding: 0.5rem; } datalist option:hover { color: var(--text-color); cursor: grab; } datalist option:active { color: var(--border); background-color: var(--text-color); cursor: move; } dd { display: block; padding: var(--padding); border-color: var(--cite) !important; border-left: 1rem solid var(--cite) !important; color: var(--cite); font-size: 0.9rem; opacity: 0.7; } dd:hover { opacity: 1; } dd + dd { margin-top: 0.5rem !important; } del { text-decoration: line-through; } details { border-radius: var(--radius); background-color: var(--menu-background); margin-bottom: 0.5rem; height: -moz-fit-content; height: fit-content; font-size: 0.9em; margin: 0.5rem; border: 1px solid var(--border); } @media print { details { display: none; } } details summary { font-weight: bold; padding: var(--padding); width: 100%; text-align: left !important; position: relative; padding-right: 2rem; line-height: 2rem; } details summary:not(.noarrow)::after { content: "✚"; position: absolute; right: 0.75rem; line-height: 2rem; } details summary + div { padding: var(--padding); } details[open] summary { border-bottom: 1px solid var(--border); } details ul { list-style-type: none; } details ul li { cursor: pointer; margin: 2px; border-bottom: 1px solid var(--border); position: relative; } details ul li a { display: block; padding: var(--padding); padding-left: 1.5rem; border-radius: var(--radius); text-decoration: none !important; } details ul li.selected { --bg: HSLA(var(--bg_hue),var(--bg_sat),calc(var(--bg_light) - 20%),var(--bg_op)); background-color: var(--bg); } details ul li:hover { --bg: HSLA(var(--bg_hue),var(--bg_sat),calc(var(--bg_light) + 15%),var(--bg_op)); background-color: var(--bg); } details ul li:last-child { border-bottom: none; } details ul li::after { content: "❯"; position: absolute; right: 0rem; padding: var(--padding); top: 0rem; } details ul:has(.highlight, .bringforward) { color: dimgrey; } details ul:has(.highlight, .bringforward) h5 { color: black; } details ul summary { color: black; border-color: var(--text-color); } details ul summary ._show { display: none; } details ul summary + div > p:not(details ul summary + div > p.highlight):not(details ul summary + div > p.bringforward) { display: none; } details ul summary + div > p.showtext { display: block !important; } details ul[open] summary::after { top: 1.5rem; } details ul[open] summary ._show { display: inline-flex; } details ul > p:not(details ul > p.highlight):not(details ul > p.bringforward) { display: none; } details ul > p.showtext { display: block !important; } details ul .highlight, details ul .bringforward { color: var(--text); display: block; } dfn { font-style: italic; } dl { display: block; margin-top: 1rem; margin-bottom: 1rem; margin-left: 0; margin-right: 0; } dt { display: block; } em { font-style: italic; } embed:focus { outline: none; } fieldset { padding: 1.5rem; position: relative; margin: 1.5rem 0.75rem; border-radius: 0.5rem; border: 1px groove var(--border); } fieldset fieldset { border-radius: 0; box-shadow: none; border-top: 1px solid var(--border); } fieldset.height { height: 17rem; overflow-y: auto; } fieldset.center { max-width: 25rem; margin: 1.5rem auto; } fieldset legend { background-color: var(--menu-background); padding: var(--padding); border-radius: var(--radius); border: 1px solid var(--border); } fieldset .overlaydiv { position: absolute; background-color: rgba(255, 255, 255, 0.85); width: 100%; height: 100%; top: 0; left: 0; display: flex; border-radius: 0.25rem; } fieldset .overlaydiv::before { content: "Processing... Please wait"; margin: auto; height: 2rem; width: auto; } fieldset .overlaydiv .closediv::before { position: absolute; right: 0; top: 0; content: var(--sign_plus); width: 1rem; height: 1rem; filter: hue-rotate(150deg); transform: rotateZ(45deg); } figcaption { display: block; } figure { display: block; margin-top: 1rem; margin-bottom: 1rem; margin-left: 40px; margin-right: 40px; } footer { display: block; } form { display: none; margin-top: 0rem; } h1, h0, h2, h3, h4, h5, h6, p { display: block; padding: var(--textpadding); margin-top: 0.5rem; margin-bottom: 0.5rem; margin-left: 0; margin-right: 0; font-weight: 600; position: relative; } h1, h0 { font-size: 2rem; } h2 { font-size: 1.8rem; } h3 { font-size: 1.6rem; } h4 { font-size: 1.4rem; } h5 { font-size: 1.2rem; } h0 { font-size: 2.4rem; font-weight: bold; } h6 { font-size: 1.1rem; } head { display: none; } header { display: block; } hr { margin: var(--padding); border: 1px dashed var(--border); opacity: 0.5; } hr.spacer4 { margin: 5rem 2rem; } hr.spacer2 { margin: 2.5rem 2rem; } hr.spacer1 { margin: 1.5rem 1rem; } i { font-style: italic; } iframe:focus { outline: none; } iframe[seamless] { display: block; } img { display: inline-block; } ins { text-decoration: underline; } kbd { font-family: monospace; } label { cursor: default; } li { display: list-item; } link { display: none; } map { display: inline; } mark { background-color: yellow; color: black; } menu { display: block; list-style-type: disc; margin-left: 0; margin-right: 0; } nav { display: block; } object:focus { outline: none; } ol { display: block; list-style-type: decimal; margin-top: 1rem; margin-bottom: 1rem; margin-left: 0; margin-right: 0; padding-left: 40px; } output { display: inline; } p { font-size: 1rem; font-weight: normal; } param { display: none; } pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; } progress { width: 100%; padding: 0; margin: 0; block-size: 0.5rem; border: none; } progress::-webkit-progress-bar { background: cyan; } progress::-webkit-progress-value { background: pink; } progress::-webkit-progress-inner-element { block-size: 0.25rem; position: absolute; top: 0; left: 0; width: 100%; z-index: 100; border-radius: 4.5rem; overflow: hidden; } q { display: inline; padding: var(--textpadding); } q::before { content: open-quote; } q::after { content: close-quote; } rt { line-height: normal; } s { text-decoration: line-through; } samp { font-family: monospace; } script { display: none; } section { overflow: auto; } small { font-size: smaller; } strike { text-decoration: line-through; } style { display: none; } sub { color: seagreen; font-weight: 600; } summary { display: block; } sup { vertical-align: super; font-size: 0.8rem; } svg-symbol { line-height: normal; } .border4 { padding-bottom: 0.2em; border: none; border-bottom: 1px solid !important; margin-bottom: 1rem; } .border, .plancontainersingle .plan { border: 1px solid var(--border); } .hover { -webkit-backdrop-filter: contrast(0.95); backdrop-filter: contrast(0.95); } .block { display: block !important; } [draggable=true] { cursor: move; } [draggable=true]:active { cursor: grabbing; } .textblock { padding: var(--padding); color: var(--text); font-size: 1.2rem; line-height: 1.5rem; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .modal .__h { display: grid; grid-template-columns: auto max-content; padding: 0.3rem; background-color: #f7f7f7; } .modal .__t { padding: var(--textpadding); } .modal .__f { display: flex; padding: 0.3rem; width: inherit; margin: auto; } .modal .__b { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid var(--border); width: 50%; box-shadow: 0.2rem 0.2rem 2rem #ddd; border-radius: 0.3rem; } .modal .main { background-color: #c6c6c6; } .hastooltip { position: relative; cursor: pointer; color: deeppink; font-weight: 600; padding-left: 0.5rem; } .hastooltip:hover { background-color: lightyellow; } .hastooltip .tooltip { position: absolute !important; bottom: calc(100% + 0rem); width: -moz-max-content; width: max-content; max-width: 50vw; background-color: lightyellow; opacity: 1; border: 3px solid var(--border) !important; box-shadow: 0 0 1rem #ccc; border-radius: 0.5rem; left: -0.75rem; font-weight: normal; display: none; min-width: 10rem !important; min-height: 3rem; color: var(--text-color); padding: var(--padding); font-size: 0.9rem; z-index: 9; overflow: auto; max-height: 25rem; filter: blur(0px); } .hastooltip .tooltip:hover { z-index: 10; } .hastooltip .tooltip:empty { content: "Write something"; } .hastooltip .tooltip.open { display: flow-root !important; } @media print { .hastooltip .tooltip { display: none !important; } } .hastooltip:hover .tooltip { display: block; } .updates { display: none; position: relative; width: 100%; scale: 0.95; } .updates [data-name] > * { display: none; } .updates:has(.bringforward) { display: block; background-color: lightgoldenrodyellow; border: 1px solid var(--border); padding: 0.5rem 1.5rem; animation: none; border-radius: 0.5rem; box-shadow: 0 0 0.6rem #ccc; position: sticky; bottom: 0; max-height: 40vh; overflow-y: auto; } .updates:has(.bringforward) .bringforward { position: static; display: block; background-color: transparent; animation: none; border: none; box-shadow: none; bottom: 0; } .updates:has(.bringforward) .bringforward:hover { transform: none; } .updates:has(.bringforward) .bringforward::before { content: none; } .__sideMenu { background-color: var(--text-color); } .__sideMenu a { border: none; background-color: transparent; color: var(--border); line-height: 2.2rem; padding-right: 1.5rem; } .__sideMenu a::after { content: "❯"; position: absolute; right: 0.5rem; } .__sideMenu a:hover, .__sideMenu a.selected { color: var(--text_hover); background-color: var(--background-color_hover); } .__sideMenu details { background-color: transparent; } .__sideMenu details summary { color: var(--border); } .form { background-color: var(--text-color); } .form > *, .form .labeltext { color: white !important; border-color: white; } .C404 { max-width: 30rem; margin: auto; } .slideUp, dialog, .calendar { animation: su 0.35s cubic-bezier(0.43, -0.16, 0.53, 2.3) forwards; } @keyframes su { 0% { transform: translateY(1rem); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .slideInLeft { animation: sul 0.35s cubic-bezier(0.43, -0.16, 0.53, 2.3) forwards; } @keyframes sul { 0% { transform: translateX(1.5rem); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .slideInRight { animation: sur 0.35s cubic-bezier(0.43, -0.16, 0.53, 2.3) forwards; } @keyframes sur { 0% { transform: translateX(-1.5rem); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .slideOutUp { animation: sou 0.35s ease-in-out forwards; } @keyframes sou { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-2rem); opacity: 0; } } .p10 { padding: 10% !important; } .bg_bars { background: linear-gradient(135deg, rgba(0, 0, 0, 0) 20.5%, rgba(249, 247, 244, 0.73) 0 29.5%, rgba(0, 0, 0, 0) 0) 0 10px, linear-gradient(45deg, rgba(0, 0, 0, 0) 8%, rgba(249, 247, 244, 0.73) 0 17%, rgba(0, 0, 0, 0) 0 58%) 20px 0, linear-gradient(135deg, rgba(0, 0, 0, 0) 8%, rgba(249, 247, 244, 0.73) 0 17%, rgba(0, 0, 0, 0) 0 58%, rgba(249, 247, 244, 0.73) 0 67%, rgba(0, 0, 0, 0) 0), linear-gradient(45deg, rgba(0, 0, 0, 0) 8%, rgba(249, 247, 244, 0.73) 0 17%, rgba(0, 0, 0, 0) 0 58%, rgba(249, 247, 244, 0.73) 0 67%, rgba(0, 0, 0, 0) 0 83%, rgba(249, 247, 244, 0.73) 0 92%, rgba(0, 0, 0, 0) 0), rgba(255, 255, 255, 0.65); background-size: 40px 40px; } .sticky { position: sticky; top: 0rem; z-index: 1; background-color: white; padding: var(--padding); } @media print { .sticky { display: none; } } .page { padding: 1rem 1.5rem; margin: auto; text-align: justify; } .page h5 { font-size: 1.2rem; position: relative; } .page .report { font-size: 0.9rem; position: absolute; right: 0; bottom: 0; transform: translateY(80%); color: red; font-weight: normal; cursor: pointer; display: inline-block; } .page p { font-size: 1.05em; } .page.ammend { position: fixed; top: 10%; z-index: 25; padding: var(--padding); border-radius: 0.4rem; box-shadow: 0 0 1rem #ddd; width: 50%; /* left: 25%; */ display: flex; margin: auto; background-color: var(--value); color: black; display: none; } .page.reporterror p { color: red; -webkit-user-select: text !important; -moz-user-select: text !important; user-select: text !important; } .page.reporterror p > * { -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; } .highlight, .bringforward { border: rgba(255, 0, 0, 0.575) dashed 2px !important; outline-offset: 0.25rem; } .highlight:has(+ .highlight, + .bringforward), .bringforward:has(+ .highlight, + .bringforward) { border-bottom: none !important; } .highlight:has(+ .highlight, + .bringforward) + .highlight, .bringforward:has(+ .highlight, + .bringforward) + .highlight, .highlight:has(+ .highlight, + .bringforward) + .bringforward, .bringforward:has(+ .highlight, + .bringforward) + .bringforward { border-top: none !important; } .highlight2 { outline: rgba(255, 0, 0, 0.575) dashed 3px !important; outline-offset: 0.25rem; } .bringforward { background-color: white; box-shadow: 0 0 0.75rem #ccc; z-index: 1; animation: floatAnimation 3s infinite ease-in-out alternate; transition: transform 0.5s ease-in-out; } .bringforward:hover { transform: translateY(-5px); } .bringforward::before { content: "Click in the red box to close"; top: 0; left: 1rem; transform: translateY(-100%); background-color: #474747; position: absolute; padding: 0.3rem 0.5rem; font-size: 0.9rem; line-height: normal; color: white; border-radius: 0.3rem; } .bringforward + .bringforward::before { content: none; } @media print { .highlight, .bringforward { outline: none !important; border: none Im !important; } .bringforward { background-color: inherit !important; border: none !important; box-shadow: none !important; animation: none !important; } .bringforward::before { content: none !important; } } @keyframes floatAnimation { 0% { transform: translateY(0); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0); } } .flex { display: flex; gap: 1rem; margin-bottom: 1rem; } .flex > * { flex: 1; overflow: auto; } .flex .f2 { flex: 2; } .flex .f3 { flex: 3; } .flex .f4 { flex: 4; } .flex .f5 { flex: 5; } @media print { .noprint { display: none; } } .multiview { height: calc(100vh - 10rem); } .multicolortext { background: linear-gradient(91.42deg, #2b56f3 18.38%, #a505d8 62.2%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .aslist { display: list-item; } .floatl { float: left; margin-left: 0.5rem; } .floatr, .label_wrap select + .inputbuttons { float: right; margin-right: 0.5rem; } .alignl { text-align: left; } .alignc { text-align: center; } .alignr { text-align: right; } .bold { font-weight: 600; } .tabs { display: block; padding: 1rem; position: relative; } .tabs.arrow_right::before { content: "❯"; position: absolute; right: 1rem; padding: var(--textpadding); top: 2.5rem; background-color: rgba(185, 185, 185, 0.5803921569); } .tabs.arrow_left::after { content: "❮"; position: absolute; left: 1rem; padding: var(--textpadding); top: 2.5rem; background-color: rgba(185, 185, 185, 0.5803921569); } .tabs .tabcontiner { position: relative; font-size: 1.1em; margin-bottom: 6rem; font-weight: 600; border-bottom: 1px solid #ccc; padding: 1.5rem 1rem; } .tabs .tab { display: inline-block; padding: 0.6rem 1.6rem; border-radius: 0.3rem; margin: 0.5rem; text-wrap: nowrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; -webkit-backdrop-filter: brightness(0.98); backdrop-filter: brightness(0.98); } .tabs .tab.selected { background-color: var(--text-color); color: white; } .tabs .tab[open] { background-color: var(--border); } .tabs .contentcontiner { display: block; width: 100%; padding: var(--padding); min-height: 10rem; padding-bottom: 5rem; } .tabs.grid { display: grid; grid-template-columns: 15rem auto; } .tabs.grid .tabcontiner { display: flex; flex-direction: column; border: none; margin: 0rem auto; border-right: 1px dashed #ccc; } .tabs.grid .contentcontiner { margin-top: 2rem; } .pad1 { padding: 0.25rem !important; } .pad2 { padding: 0.5rem !important; } .pad3, .label_wrap ol.list li { padding: 0.75rem !important; } .pad4 { padding: 1rem !important; } .pad5 { padding: 1.25rem !important; } .pad6 { padding: 1.5rem !important; } .pad7 { padding: 1.75rem !important; } .pad8 { padding: 2rem !important; } .pad9 { padding: 4.5rem !important; } .pad10 { padding: 5rem !important; } .pad11 { padding: 5.5rem !important; } .pad12 { padding: 6rem !important; } .pad13 { padding: 6.5rem !important; } .pad14 { padding: 7rem !important; } .pad15 { padding: 7.5rem !important; } .pad16 { padding: 8rem !important; } .pad1 { padding: 0.25rem !important; } .pad2 { padding: 0.5rem !important; } .pad3, .label_wrap ol.list li { padding: 0.75rem !important; } .pad4 { padding: 1rem !important; } .pad5 { padding: 1.25rem !important; } .pad6 { padding: 1.5rem !important; } .pad7 { padding: 1.75rem !important; } .pad8 { padding: 2rem !important; } .pad9 { padding: 4.5rem !important; } .pad10 { padding: 5rem !important; } .pad11 { padding: 5.5rem !important; } .pad12 { padding: 6rem !important; } .pad13 { padding: 6.5rem !important; } .pad14 { padding: 7rem !important; } .pad15 { padding: 7.5rem !important; } .pad16 { padding: 8rem !important; } .ml-1 { margin-left: 2rem !important; } .ml-2 { margin-left: 4rem !important; } .ml-3 { margin-left: 6rem !important; } .ml-4 { margin-left: 8rem !important; } .ml-5 { margin-left: 10rem !important; } .ml-6 { margin-left: 12rem !important; } .ml-7 { margin-left: 14rem !important; } .ml-8 { margin-left: 16rem !important; } .ml-9 { margin-left: 18rem !important; } .ml-10 { margin-left: 20rem !important; } .width1 { width: 10% !important; margin: auto; } .width2 { width: 20% !important; margin: auto; } .width3 { width: 30% !important; margin: auto; } .width4 { width: 40% !important; margin: auto; } .width5 { width: 50% !important; margin: auto; } .width6 { width: 60% !important; margin: auto; } .width7 { width: 70% !important; margin: auto; } .width8 { width: 80% !important; margin: auto; } .width9 { width: 90% !important; margin: auto; } .width10 { width: 100% !important; margin: auto; } .center { margin: auto; max-width: 25rem; } .screencenter { margin: auto; max-width: 25rem; position: absolute; margin: auto; z-index: 1; top: 7rem; } .link { background-color: transparent; color: inherit; padding: var(--padding); text-decoration: none !important; cursor: pointer !important; border: 1px solid var(--border); border-radius: 0.4rem; margin: auto 1rem; text-decoration: none; font-weight: 600; color: inherit; } .link:hover, .link:active { color: white; background-color: var(--text-color); } .link:hover .svgicon, .link:active .svgicon { fill: var(--border); } .link.form:hover { color: #efefef; } .red { background-color: rgb(255, 136, 0); } .green { background-color: rgb(0, 162, 43); } .grey { background-color: rgb(145, 145, 145); } .dimgrey { background-color: whitesmoke; } .colordarkgrey { color: darkgray !important; } .colorgreen { color: #2d7c2d !important; } .colororange { color: #af750b !important; } .colorgrey { color: #767676 !important; } .colorred { color: #a60000 !important; } .colorsky { color: #007fa9 !important; } .rad, .label_wrap ol.list, .label_wrap ol.list li { border-radius: 0.3rem; } .off { background-color: white; color: inherit; border: none; } .userselect { -webkit-user-select: text; -moz-user-select: text; user-select: text; } .height1 { max-height: 10rem; overflow-y: auto; } .height2 { max-height: 20rem; overflow-y: auto; } .height3 { max-height: 30rem; overflow-y: auto; } .font2 { font-size: 2rem; } .font3 { font-size: 3rem; } .font4 { font-size: 4rem; } .font5 { font-size: 5rem; } .mauto { margin: auto; } /* CSS Document */ .header { padding: 0.5em 1em; background-color: white; position: sticky; top: 0; left: 0; width: 100%; background-color: RGBA(252, 252, 252, 1); box-shadow: 0 0 1em RGB(194, 194, 194); z-index: 3; } .body { padding: 0em; z-index: 2; min-height: 80vh; max-width: 1440px; margin: auto; overflow: hidden; } .body section { min-height: 30vh; padding: 2em; } .footer { z-index: 1; padding: 1em; background-color: #f6f6f6; color: black; } .footer .copyright { color: #39a3c6; padding: 0.5em 1em; } .menu { display: flex; flex-direction: row; margin: 0.5em 0; } .menu .menu_item { position: relative; } .menu .menu_item .item { border: 1px solid transparent; color: RGB(0, 0, 0); padding: 0.3em 0.8em; padding-right: 1.5em; cursor: pointer; margin: auto 1.5em; margin-left: 0; font-weight: 600; } .menu .menu_item .item:active { filter: hue-rotate(-20deg); } .menu .menu_item:hover { filter: hue-rotate(20deg); color: RGB(63, 63, 63); background-color: #f7f7f7; } .menu .menu_item .menu { display: flex; flex-direction: column; background-color: white; position: absolute; margin: 0; padding: 0.5em; left: 0; display: none; min-width: 8em; } .menu .menu_item .menu.__animate { animation: slide_up 0.3s ease-in-out forwards; } .menu .menu_item .menu .menu_item .item { margin: 1px 0; } .menu .menu_item:hover .item + .menu { animation: slide_up 0.3s ease-in-out forwards; display: flex; box-shadow: 0 0 0.3em #ccc; padding: 0; } .header_container { display: grid; grid-template-columns: 15em auto; grid-template-areas: "brand menu"; margin: auto; -moz-column-gap: 0.5em; column-gap: 0.5em; max-width: 1440px; } .header_container .brandname { grid-area: brand; padding: 0 0.5em; font-size: 1.25em; } .header_container .logo { grid-area: logo; padding: 0.2em; margin: 0 0.5em; filter: drop-shadow(0 0 0.2em #ddd); display: flex; display: none; } .header_container .logo img { margin: auto; max-height: 4em; } .header_container .menu { grid-area: menu; margin: auto 0; } .before, .info, .update, .timer, .error, .caution, .faq, .warn { padding-left: 1.5em; } .after { padding-right: 1.5em; } .has_child { position: relative; } .has_child::after { position: absolute; top: 0.2em; right: 0; content: var(--arrow_right); height: 2em; width: 2em; opacity: 0.2; transition-duration: 0.2s; } .has_child:hover::after { transform: rotate(90deg); opacity: 0.5; } .control_text { padding: 5em 2em; } .control_text .fullcontrol { display: flex; z-index: 0; } .control_text .fullcontrol img { margin: auto; max-width: 100%; } .control_text .left { margin: auto; padding: 3em; min-width: 30em; z-index: 1; background-color: inherit; } .control_text .left > .img { width: 5em; padding: 0.5em; height: auto; opacity: 0.25; } .control_text .left:hover > .img { opacity: 0.75; } .control_text .left h2 { font-size: 3em; font-weight: 600; line-height: 1.2em; color: #000000; font-family: Arial, Helvetica, sans-serif; } .control_text .left p { text-align: justify; color: gray; padding: 0.5em; } .control_text .left .text { text-align: center; } .control_text .left .button, .control_text .left input[type=submit], .control_text .left input[type=reset], .control_text .left .__sideMenu a, .__sideMenu .control_text .left a { background-color: #39a3c6; color: white; display: inline-block; padding: 1em; margin: 1em; border-radius: 0.25em; cursor: pointer; text-align: center; } .control_text .left .button:hover, .control_text .left input[type=submit]:hover, .control_text .left input[type=reset]:hover, .control_text .left .__sideMenu a:hover, .__sideMenu .control_text .left a:hover { filter: hue-rotate(20deg); } .control_text .left .button:active, .control_text .left input[type=submit]:active, .control_text .left input[type=reset]:active, .control_text .left .__sideMenu a:active, .__sideMenu .control_text .left a:active { filter: hue-rotate(-20deg); box-shadow: inset 0 0 0.25em #ccc; } .control_text .left .ul { padding: 0.5em 1em; } .control_text .left .ul .li { list-style: circle; list-style-position: inside; text-align: left; position: relative; padding: 0.3em 0.6em; color: RGB(159, 159, 159); } .control_text .left .ul .li::before { position: absolute; left: -0.75em; top: 0.3em; content: var(--arrow_right); height: 1em; width: 1em; } .features { padding: 5em 1em; background-color: RGBA(252, 252, 252, 0.58); } .features .featuretxt { text-align: center; padding: 2em; } .features .featuretxt h2 { font-size: 2.5em; color: #000000; padding: 0.3em; font-family: Arial, Helvetica, sans-serif; } .features .featuretxt p { font-size: 1.2; color: grey; } .features .featuresicon { text-align: center; padding: 2em; } .features .featuresicon .icon { flex: 1; margin: 1em; padding: 1.5em; border-radius: 0.2em; background-color: RGB(247, 247, 247); box-shadow: 0 0 0.5em 1px RGB(223, 223, 223); } .features .featuresicon .icon img { height: 3em; padding: 0.25em; opacity: 0.5; } .features .featuresicon .icon:hover img { opacity: 0.7; } .features .featuresicon .icon h3 { color: #000000; padding: 0.3em; font-family: Arial, Helvetica, sans-serif; } .features .featuresicon .icon p { color: RGB(125, 125, 125); font-size: 0.9em; padding: 0.5em; } .scrollable_right { overflow: auto; cursor: grab; } .scrollable_right .items { width: 100%; display: flex; gap: 1em; } .scrollable_right .item { padding: 3em 1.5em; color: RGB(77, 77, 77); margin: auto 1em; border-radius: 1em; background-repeat: no-repeat; background-position: 95% 95%; background-size: 8em; background-blend-mode: color-burn; min-width: 20em; padding-right: 6em; background-color: RGB(255, 239, 249); background-image: url("../_images/insights.svg"); } .scrollable_right .item h3 { padding: 0.25em; color: #000000; } .scrollable_right .item p { padding: 0.5em; } .extra_features .left, .extra_features .right { padding: 3em 1.5em; color: RGB(77, 77, 77); padding-right: 30%; margin: auto 2em; border-radius: 1em; background-repeat: no-repeat; background-position: 95% 95%; background-size: 8em; background-blend-mode: color-burn; } .extra_features .left h3, .extra_features .right h3 { padding: 0.25em; color: #000000; } .extra_features .left p, .extra_features .right p { padding: 0.5em; } .extra_features .left { background-color: RGB(255, 239, 249); background-image: url("../_images/insights.svg"); } .extra_features .right { background-color: RGB(241, 240, 255); background-image: url("../_images/timelapse.svg"); } .pricing { padding: 5em 1em; background-color: #fbfbfb; } .pricing .price { text-align: center; width: 60%; margin: auto; padding: 1em; } .pricing .price h2 { font-weight: 600; color: #000000; padding: 0.25em; font-size: 2em; font-family: Arial, Helvetica, sans-serif; } .pricing .price p { color: #808080; padding: 0.5em; } .pricing img { width: 4em; padding: 0.25em; } .pricing .tokens { width: 75%; margin: auto; text-align: center; padding: 1em; } .pricing .tokens .tags { background-color: #f7f7f7; margin: 1em; padding: 0.75em; border-radius: 0.3em; } .pricing .chart { padding: 3em; } .pricing .chart .ul { margin: 1.5vw; padding: 2em; border-radius: 0.5em; background-color: white; box-shadow: 0 0 0.75em #b1b1b1; } .pricing .chart .ul .heading h2 { padding: 0.25em; color: inherit; } .pricing .chart .ul .heading h3 { padding: 0.25em; } .pricing .chart .ul .li { list-style: circle; list-style-position: inside; text-align: left; position: relative; padding: 0.5em; } .pricing .chart .ul .li::before { position: absolute; left: -0.75em; top: 0.6em; content: var(--arrow_right); height: 1em; width: 1em; } .pricing .chart .button, .pricing .chart input[type=submit], .pricing .chart input[type=reset], .pricing .chart .__sideMenu a, .__sideMenu .pricing .chart a { border: 1px solid #39a3c6; background-color: white; color: #39a3c6; display: inline-block; padding: 0.3em 1.2em; margin: 0.25em; border-radius: 0.25em; cursor: pointer; text-align: center; } .pricing .chart .button:hover, .pricing .chart input[type=submit]:hover, .pricing .chart input[type=reset]:hover, .pricing .chart .__sideMenu a:hover, .__sideMenu .pricing .chart a:hover { filter: hue-rotate(20deg); } .pricing .chart .button:active, .pricing .chart input[type=submit]:active, .pricing .chart input[type=reset]:active, .pricing .chart .__sideMenu a:active, .__sideMenu .pricing .chart a:active { filter: hue-rotate(-20deg); box-shadow: inset 0 0 0.25em #ccc; } .questions { padding: 5em 1em; background-color: #fbfbfb; } .questions .question { text-align: center; width: 60%; margin: auto; padding: 1em; } .questions .question h2 { font-weight: 600; color: #000000; padding: 0.25em; font-size: 2em; font-family: Arial, Helvetica, sans-serif; } .questions .question p { color: #808080; padding: 0.5em; } .questions .imgcontainer { display: flex; } .questions img { width: 100%; padding: 0.25em; } .questions .chart { padding: 3em; } .questions .chart .ul { margin: 1.5vw; padding: 2em; border-radius: 0.5em; } .questions .chart .ul .li { list-style: auto; list-style-position: inside; text-align: left; position: relative; padding: 0.2em; display: list-item; font-size: 1.5em; font-weight: 600; color: #39a3c6; font-size: 1.5em; } .questions .chart .ul .li span { color: RGB(43, 43, 43); } .questions .chart .ul .ans { padding: 0.25em 0.5em; color: #343434; margin-bottom: 2em; text-align: justify; } .foottext { padding: 2em 1em; border: 1px dashed white; color: RGB(156, 156, 156); display: grid; grid-template-columns: 30% 70%; } .foottext:hover { color: #000000; } .foottext .about { display: flex; text-align: center; flex-direction: column; } .foottext .about h1, .foottext .about h0 { margin: auto; color: RGB(0, 139, 199); font-size: 2em; } .foottext .about p { padding: 0.25em 0.5em; } .foottext .links { padding: 1em; display: none; } .scroll_h { position: relative; height: 100%; min-height: auto !important; } .scroll_h .__left_right { position: sticky; bottom: 0; left: 0%; transform: translateX(1em); height: 2.5em; width: 7.5em; display: flex; } .scroll_h .__left_right .__right { height: 100%; width: 3em; position: relative; flex: 1; border: 1px solid #ddd; margin-left: 1em; background-color: white; border-radius: 0.2em; cursor: pointer; } .scroll_h .__left_right .__right:hover { filter: hue-rotate(180deg); } .scroll_h .__left_right .__right::before { position: absolute; content: var(--arrow_right); height: 2.5em; width: 2.5em; top: 0; right: 0%; } .scroll_h .__left_right .__left { height: 100%; width: 3em; position: relative; flex: 1; border: 1px solid #ddd; margin-right: 1em; background-color: white; border-radius: 0.2em; cursor: pointer; } .scroll_h .__left_right .__left:hover { filter: hue-rotate(180deg); } .scroll_h .__left_right .__left::before { position: absolute; content: var(--arrow_right); transform: rotate(180deg); height: 2.5em; width: 2.5em; top: 0; left: 0%; } .notify { position: absolute; top: 1em; left: 50%; transform: translateX(-50%); padding: 0.5em 1.5em; color: var(--color-steel-blue); border-radius: 0.25em; background-color: white; animation: slide_up 0.3s ease-in-out forwards; z-index: 5; box-shadow: 0 0 0.5em RGBA(0, 0, 0, 0.6); font-weight: 500; } .notify.autohide { animation: slide_down 0.3s ease-in-out 1.2s forwards; } .sj_overlay { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; z-index: 1001; display: flex; } .sj_overlay .container { margin: auto; background: lightyellow; padding: 1rem 2rem; border-radius: 0.5rem; box-shadow: 0 0.5rem 0.75rem rgba(0, 0, 0, 0.3); position: relative; max-width: 50rem; max-height: 95vh; overflow: auto; } .sj_overlay .container .sj_close { position: absolute; right: 0.25rem; top: 0.25rem; color: red; } .sj_overlay.autosize { gap: 2em; } .sj_overlay.autosize .container { max-width: none; } .sj_overlay .heading { display: grid; grid-template-columns: auto 2rem; border-bottom: 1px dashed grey; } .sj_overlay .heading .head { font-size: 1.2rem; font-weight: 600; color: var(--color-steel-blue); line-height: 1.75rem; white-space: nowrap; text-overflow: ellipsis; /* width: 15em; */ overflow: hidden; } .sj_overlay .heading .sj_close { padding: 0.25em 0.5em; border-left: 1px solid grey; width: 1.5em; margin: 0.25em; cursor: pointer; } .sj_overlay .overlay_close { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: HSLa(0, 0%, 0%, 0.3); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); cursor: pointer; } .sj_overlay .label_wrap { text-align: left !important; } .sj_overlay dialog { display: block; } .table-container .t-table { display: table; border: 1px solid #ddd; padding: 0em; margin: 0; border-collapse: collapse; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100%; counter-reset: my-sec-counter; } .table-container .t-table .table-container { background-color: #fdfdfd; padding: 0.3em 0.6em; } .table-container .t-table .t-table .t-header { background-color: #eeeeee; color: var(--color-steel-blue); z-index: 0; } .table-container .t-table form:empty { display: none; } .table-container .t-table .label_wrap { text-align: center; } .table-container .t-table .label_wrap label { margin: auto 0; text-align: left; } .table-container .t-table .label_wrap label:empty { width: 0; background-color: transparent; background: transparent; padding: 0; margin: 0; } .table-container .t-table .label_wrap label:empty:hover { background-color: inherit; } .table-container .t-table .t-caption { display: table-caption; padding: 0.25em 0.5em; border-bottom: 1px dotted #ccc; margin-bottom: 0.5em; position: sticky; top: 0; } .table-container .t-table .t-footer { display: table-row; filter: hue-rotate(180deg); position: sticky; bottom: -1px; z-index: 500; background-color: rgb(235, 235, 235); } .table-container .t-table .t-footer .t-footer-item { display: table-cell; padding: 0.1em 0.4em; } .table-container .t-table .t-header { display: table-row; background-color: var(--color-steel-blue); font-weight: 500; position: sticky; top: -1px; z-index: 500; text-align: center; color: white; } .table-container .t-table .t-header .t-header-item { display: table-cell; padding: 0.25em; font-size: 1.05em; } .table-container .t-table .t-header input[type=checkbox] + label::before, .table-container .t-table .t-header input[type=radio] + label::before { filter: grayscale(6) brightness(3.5); } .table-container .t-table.autonumber .t-row .first-child::before { counter-increment: my-sec-counter; content: Counter(my-sec-counter); color: #818181; } .table-container .t-table .t-row { display: table-row; } .table-container .t-table .t-row .t-row-item { display: table-cell; padding: 0.1em 0.4em; font-size: 1.05em; border: 1px solid white; -webkit-user-select: text; -moz-user-select: text; user-select: text; vertical-align: middle; text-transform: capitalize; } .table-container .t-table .t-row .t-row-item .more { content: var(--settings); height: 2em; filter: hue-rotate(90deg); } .table-container .t-table .t-row:nth-child(2n) { --c: HSL(var(--color),calc(var(--l) + 48%)); background-color: var(--c); --b: HSL(var(--color),calc(var(--l) + -48%)); color: var(--b); } .table-container .t-table .t-row:hover { --c: HSL(var(--color),calc(var(--l) + 44%)); background-color: var(--c); color: #434242; } .table-container .t-table .t-table { font-size: 0.8em; border: none; border-left: 3px solid #ddd; } .table-container .t-table .t-table .t-row { --c: HSL(var(--color),calc(var(--l) + 48%)); background-color: transparent; } .table-container .t-table .t-table .t-row :hover { --c: HSL(var(--color),calc(var(--l) + 48%)); background-color: transparent; } .table-container .t-table .t-table .container { padding: 0 2em; } .table-container .t-table .t-table .t-table { font-size: 1em; border-left: none; } .table-container .t-table .t-table .t-table .t-caption { position: relative; padding: 0.5em 1em; } .table-container .t-table .t-table .t-table .t-header { z-index: 1; } .table-container .t-table .t-table .t-table tr { background-color: #fcfcfc; } .table-container .t-table .t-table .t-table tr td { border-bottom: 1px dashed #ccc; padding: 0.25em; } .table-container .t-table .t-table .t-table tr:nth-child(2n) { background-color: #f5f5f5; } .table-container .t-table .fill_dummy { padding: 0.5em; border: 1px solid #ccc !important; width: 100% !important; display: table-row; height: 1.75em; position: relative; box-shadow: inset 0 0 0 0.2em #ffffff, inset 0 0 0.75em 0.1em #aeaeae; transition: "all"; transition-duration: 0.2s; transition-delay: 0.1s; } .table-container .t-table .fill_dummy ::after { content: "Drop here to move"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0.25em; font-size: 0.9em; color: #434242; margin: auto; } .table-container .t-table input[type=submit], .table-container .t-table .table-container .t-table input[type=reset], .table-container .t-table .table-container .t-table button { padding: 0.3em 0.75em; margin: 0; } .table-container .t-row-item-buttons { display: block; padding: 0.25em; } .table-container .responsemessage > * { border: 1px solid red; } .cloneRow { position: relative; padding-bottom: 0.5em; font-size: 0.8em; } .cloneRow .label_wrap { margin: 0; } .cloneRow .t-row-item { padding: 0.1em !important; } .cloneRow .cloneTools { top: 100%; left: 0; position: absolute; padding: 0.25em 0.5em; transform: translateY(-50%); display: none; width: auto; background-color: #ffbe11; border-radius: 0.2em; } .cloneRow .cloneTools::before { position: absolute; left: 50%; top: 0; height: 0.5em; width: 0.5em; transform: rotate(45deg) translateY(-100%); content: " "; background-color: #ffbe11; } .cloneRow:hover .cloneTools { display: inline-flex; z-index: 1; } .customMenu { position: fixed; background-color: white; border-radius: 0.25em; box-shadow: 0.2em 0.2em 1em darkgrey; } .customMenu .context_item { padding: 0.25em 1.25em; margin: 0.5em; cursor: pointer; border-radius: 0.2em; min-width: 10em; } .customMenu .context_item:hover { background-color: #f5f5f5; } .plancontainer { padding: 3rem 2rem; display: flex; gap: 0.6rem; max-width: 90rem; margin: auto; height: auto; } .plancontainer .plan { flex: 1; margin-top: 2rem; margin-bottom: 2rem; padding: 2.5rem; border-radius: 0.6rem; transition: all; transition-duration: 0.3s; font-size: 0.9em; display: grid; grid-template-rows: auto 4rem; background-color: white; box-shadow: 0 0 0.25rem lightgray; } .plancontainer .plan:nth-child(2) { margin-top: 0.5rem; flex: 1.1; background-color: var(--background_dark); } .plancontainer .plan:nth-child(2) h3, .plancontainer .plan:nth-child(2) h4, .plancontainer .plan:nth-child(2) p { color: var(--border); } .plancontainer .plan:hover { box-shadow: 0 0.5rem 0.5rem lightgray; transform: translateY(-0.5rem); } .plancontainer .plan ul { list-style-type: "✔"; color: grey; padding: 0.75rem; } .plancontainer .plan ul li { padding-left: 1.5rem; } .plancontainer .plan a.buy { display: block; margin: auto; margin-top: 2rem; background-color: var(--interactive); color: var(--background_dark); min-width: 65%; font-size: 1.1em; text-align: center; } .plancontainer .plan a.buy:hover { background-color: var(--border); } .plancontainer .plan .symbol, .plancontainer .plan .month { font-size: 0.7em; color: dimgrey; font-weight: normal; } .plancontainer .price:has(+ .billing) { margin-bottom: 0rem; } .plancontainer .billing { margin: 0; padding: 0; color: gray; font-weight: 600; } .plancontainersingle { padding: 3rem 2rem; display: flex; gap: 0.6rem; max-width: 90rem; margin: auto; height: auto; flex-direction: column; } .plancontainersingle .plan { flex: 1; margin-top: 1rem; margin-bottom: 2rem; padding: 3rem; border-radius: 0.6rem; transition: all; transition-duration: 0.3s; font-size: 0.9em; display: grid; grid-template-areas: "product buy" "details buy"; grid-template-columns: auto 35%; grid-template-rows: auto auto; box-shadow: 0 0 0.5rem lightgray; background-color: white; } .plancontainersingle .plan.recomended { border: 2px solid gold; box-shadow: 0 0 0.5rem lightgray, inset 0 0 0.5rem -1px deepskyblue; position: relative; } .plancontainersingle .plan.recomended::before { content: "Recomended"; position: absolute; right: 1rem; top: 1rem; background-color: deepskyblue; padding: 0.5rem 1.5rem; border-radius: 0.5rem; font-weight: 600; font-size: 1.1em; color: white; } .plancontainersingle .plan.new { background-color: white; box-shadow: 0 0 0.5rem lightgray, inset 0 0 0.5rem -1px gold; animation: floatAnimation 3s infinite ease-in-out alternate; position: relative; } .plancontainersingle .plan.new::before { content: "New"; position: absolute; right: 1rem; top: 1rem; background-color: gold; padding: 0.5rem 1.5rem; border-radius: 0.5rem; font-weight: 600; font-size: 1.1em; } .plancontainersingle .plan ul { list-style-type: "✔"; color: grey; padding: 0 2rem; display: grid; grid-template-columns: auto auto; -moz-column-gap: 2rem; column-gap: 2rem; } .plancontainersingle .plan ul li { padding-left: 0.75rem; } .plancontainersingle .plan ul li::marker { color: mediumseagreen; font-weight: 600; } .plancontainersingle .plan ul li.not { list-style-type: "✘"; color: lightgray; } .plancontainersingle .plan ul li.not::marker { color: orangered; font-weight: 600; } .plancontainersingle .plan .product { grid-area: product; } .plancontainersingle .plan .details { grid-area: details; } .plancontainersingle .plan .buy { grid-area: buy; margin: auto; } .plancontainersingle .plan a.buy { display: block; margin: auto; margin-top: 2rem; background-color: var(--background_dark); color: var(--border); min-width: 65%; font-size: 1.1em; text-align: center; } .plancontainersingle .plan a.buy:hover { background-color: var(--border); color: var(--background_dark); } .plancontainersingle .plan .symbol, .plancontainersingle .plan .month { font-size: 0.7em; color: dimgrey; font-weight: normal; } .plancontainersingle .price:has(+ .billing) { margin-bottom: 0rem; } .plancontainersingle .billing { margin: 0; padding: 0; color: gray; font-weight: 600; } .planexplained.cart { display: block; grid-template-columns: auto 25rem; margin: auto; } .planexplained.cart .plan { display: grid; grid-template-columns: auto 3rem; padding: 2rem 4rem; } .planexplained .payoutsummary { border: 1px solid var(--border); border-radius: 0.6rem; max-width: 40rem; margin: auto; background-color: var(--border); } .planexplained .payoutsummary p { color: var(--text); border-bottom: 1px dashed gray !important; } .planexplained .ordersummary { border: 1px solid var(--border); border-radius: 0.6rem; background-color: var(--border); } .planexplained .ordersummary p { color: var(--text); border-bottom: 1px dashed gray !important; } .planexplained .ordersummary span { display: block; color: var(--text); } .planduration { margin: auto; display: flex; justify-content: center; align-items: center; } .nobutton { padding: 1px; display: flex; border: 1px solid var(--border); border-radius: 10rem; } .nobutton .label_wrap { flex: 1; padding: 0; background-color: var(--border); border-radius: 5rem; text-align: center; text-wrap: nowrap; margin: 0.2rem; cursor: pointer; } .nobutton .label_wrap label { margin: 0; min-height: auto; width: 100%; text-align: center; text-overflow: ellipsis; overflow: hidden; background-color: transparent !important; padding: 0.7rem 1rem; color: var(--background_dark); } .nobutton .label_wrap label::before { content: none !important; } .nobutton .label_wrap :checked + label { color: var(--border); } .nobutton .label_wrap:has(:checked) { background-color: var(--background_dark); } .breadcrum { color: gray; padding: 1rem 0.3rem; } .breadcrum a { padding: var(--padding); text-decoration: none; color: grey; cursor: default; } .breadcrum a:has(+ a) { position: relative; } .breadcrum a:has(+ a)::after { content: "❯"; position: absolute; right: -0.5rem; top: auto; } .breadcrum a:link { color: var(--background_dark); font-weight: 600; cursor: pointer; } .breadcrum a.selected { color: var(--interactive); font-weight: 600; } .scroller { width: 100%; overflow-x: auto; white-space: nowrap; padding: 1rem; border: 1px dashed var(--border); } .scroller .scrolls { display: inline-block; } .scroller .scrolls .item { display: inline-block; width: 26rem; padding: 3rem 1rem 1rem; border: 2px dashed var(--border); margin-right: 1rem; order: 2; position: relative; border-radius: 0.75rem; text-wrap: wrap; vertical-align: top; min-height: 28rem; background-color: white; } .scroller .scrolls .item::before { content: "✉"; color: lightgray; position: absolute; top: 0.25rem; right: 0.25rem; font-size: 2rem; font-style: 600; line-height: 2rem; } .scroller .scrolls .item span { display: block; } .scroller .scrolls .item.selected { border: 2px solid gold; } .scroller .scrolls .item.selected::before { color: lightseagreen; } .scroller .scrolls .item.selected .green, .scroller .scrolls .item.selected .grey { background-color: gainsboro; pointer-events: none; color: gray; } .scroller .scrolls .item .container { display: grid; grid-template-rows: 5rem minmax(18rem, auto) 4.5rem; } .scroller .scrolls .item button { margin-left: 1rem; } body:has(.popmessage .content:not(.except)) .layout { filter: opacity(0.4) brightness(0.95); } .popmessage { position: fixed; top: 7rem; right: 3rem; z-index: 10; color: var(--text); display: flex; flex-direction: column; place-items: flex-end; } .popmessage .content { padding: 0.5rem 0.5rem 0.5rem 0.8rem; background-color: white; border-radius: 0.4rem; border: 1px solid var(--border); box-shadow: 0 0.25rem 0.25rem var(--border); max-width: 30rem; min-width: 20rem; position: relative; } .popmessage .content:has(+ .content) { margin-bottom: 0.75rem; } .popmessage .content [name=sj_cross] { position: absolute; top: 0.25rem; right: 0.25rem; cursor: pointer; } .popmessage .content .message { margin-bottom: 0.75rem; } .popmessage .content .message .heading { font-weight: 600; display: list-item; list-style-type: none; } .popmessage .content .message .heading::before { content: url("#mySymbol"); color: red; } .popmessage .content .message .text { padding: 0.5rem 0; } .popmessage .content .response { display: flex; } .popmessage .content .response button { border: none; padding: 0.3rem 1.2rem; background-color: var(--background); font-weight: 600; margin: 0.25rem 0; margin-right: 2rem; text-transform: capitalize; color: currentColor; } .popmessage .content:has(img) { display: grid; grid-template-columns: 5rem auto; max-width: 35rem; } .popmessage .content:has(img) img { display: flex; width: 4.5rem; border-radius: 2rem; grid-row: span 2; padding: 0.25rem; } .loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: none; z-index: 10000; } .loading::before { content: " "; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6rem; height: 6rem; border: 0.5rem solid #f3f3f3; /* Light grey */ border-top: 0.5rem solid deepskyblue; /* Blue */ border-radius: 50%; animation: spin 1s linear infinite alternate-reverse; /* Spin animation */ } .loading::after { content: " "; position: absolute; top: calc(50% + 0.5rem); left: calc(50% + 0.5rem); transform: translate(-50%, -50%); width: 5rem; height: 5rem; border: 0.5rem solid #f3f3f3; /* Light grey */ border-top: 0.5rem solid darkorange; /* Blue */ border-radius: 50%; animation: spin 1.1s linear infinite alternate; /* Spin animation */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } [tab="1"] { padding-left: 1.5rem; } [tab="2"] { padding-left: 3rem; } [tab="3"] { padding-left: 4.5rem; } [tab="4"] { padding-left: 6rem; } [tab="5"] { padding-left: 7.5rem; } [tab="6"] { padding-left: 9rem; } [tab="7"] { padding-left: 10.5rem; } [tab="8"] { padding-left: 12rem; } [tab="9"] { padding-left: 13.5rem; } [tab="10"] { padding-left: 15rem; } .MA { margin: auto; } .M2 { margin: 1rem; } .Ml2 { margin-left: 1rem; } .Mr2 { margin-right: 1rem; } .Mt2 { margin-top: 1rem; } .Mb2 { margin-bottom: 1rem; } .P2 { padding: 1rem; } .Pl2 { padding-left: 1rem; } .Pr2 { padding-right: 1rem; } .Pt2 { padding-top: 1rem; } .Pb2 { padding-bottom: 1rem; } .MA { margin: auto; } .M3 { margin: 1.5rem; } .Ml3 { margin-left: 1.5rem; } .Mr3 { margin-right: 1.5rem; } .Mt3 { margin-top: 1.5rem; } .Mb3 { margin-bottom: 1.5rem; } .P3 { padding: 1.5rem; } .Pl3 { padding-left: 1.5rem; } .Pr3 { padding-right: 1.5rem; } .Pt3 { padding-top: 1.5rem; } .Pb3 { padding-bottom: 1.5rem; } .MA { margin: auto; } .M4 { margin: 2rem; } .Ml4 { margin-left: 2rem; } .Mr4 { margin-right: 2rem; } .Mt4 { margin-top: 2rem; } .Mb4 { margin-bottom: 2rem; } .P4 { padding: 2rem; } .Pl4 { padding-left: 2rem; } .Pr4 { padding-right: 2rem; } .Pt4 { padding-top: 2rem; } .Pb4 { padding-bottom: 2rem; } .MA { margin: auto; } .M5 { margin: 2.5rem; } .Ml5 { margin-left: 2.5rem; } .Mr5 { margin-right: 2.5rem; } .Mt5 { margin-top: 2.5rem; } .Mb5 { margin-bottom: 2.5rem; } .P5 { padding: 2.5rem; } .Pl5 { padding-left: 2.5rem; } .Pr5 { padding-right: 2.5rem; } .Pt5 { padding-top: 2.5rem; } .Pb5 { padding-bottom: 2.5rem; } .MA { margin: auto; } .M6 { margin: 3rem; } .Ml6 { margin-left: 3rem; } .Mr6 { margin-right: 3rem; } .Mt6 { margin-top: 3rem; } .Mb6 { margin-bottom: 3rem; } .P6 { padding: 3rem; } .Pl6 { padding-left: 3rem; } .Pr6 { padding-right: 3rem; } .Pt6 { padding-top: 3rem; } .Pb6 { padding-bottom: 3rem; } .MA { margin: auto; } .M7 { margin: 3.5rem; } .Ml7 { margin-left: 3.5rem; } .Mr7 { margin-right: 3.5rem; } .Mt7 { margin-top: 3.5rem; } .Mb7 { margin-bottom: 3.5rem; } .P7 { padding: 3.5rem; } .Pl7 { padding-left: 3.5rem; } .Pr7 { padding-right: 3.5rem; } .Pt7 { padding-top: 3.5rem; } .Pb7 { padding-bottom: 3.5rem; } .MA { margin: auto; } .M8 { margin: 4rem; } .Ml8 { margin-left: 4rem; } .Mr8 { margin-right: 4rem; } .Mt8 { margin-top: 4rem; } .Mb8 { margin-bottom: 4rem; } .P8 { padding: 4rem; } .Pl8 { padding-left: 4rem; } .Pr8 { padding-right: 4rem; } .Pt8 { padding-top: 4rem; } .Pb8 { padding-bottom: 4rem; } .MA { margin: auto; } .M9 { margin: 4.5rem; } .Ml9 { margin-left: 4.5rem; } .Mr9 { margin-right: 4.5rem; } .Mt9 { margin-top: 4.5rem; } .Mb9 { margin-bottom: 4.5rem; } .P9 { padding: 4.5rem; } .Pl9 { padding-left: 4.5rem; } .Pr9 { padding-right: 4.5rem; } .Pt9 { padding-top: 4.5rem; } .Pb9 { padding-bottom: 4.5rem; } .MA { margin: auto; } .M10 { margin: 5rem; } .Ml10 { margin-left: 5rem; } .Mr10 { margin-right: 5rem; } .Mt10 { margin-top: 5rem; } .Mb10 { margin-bottom: 5rem; } .P10 { padding: 5rem; } .Pl10 { padding-left: 5rem; } .Pr10 { padding-right: 5rem; } .Pt10 { padding-top: 5rem; } .Pb10 { padding-bottom: 5rem; } .W1 { width: 100%; } .W2 { width: 50%; } .W3 { width: 33.3333333333%; } .W4 { width: 25%; } .W5 { width: 20%; } .W6 { width: 16.6666666667%; } .W7 { width: 14.2857142857%; } .W8 { width: 12.5%; } .W9 { width: 11.1111111111%; } .W10 { width: 10%; } .W11 { width: 9.0909090909%; } .W12 { width: 8.3333333333%; } .W13 { width: 7.6923076923%; } .W14 { width: 7.1428571429%; } .W15 { width: 6.6666666667%; } .W16 { width: 6.25%; } .Fi { display: inline-flex; gap: 1.5rem; } .F { display: flex; gap: 0.4rem; } .F1 { flex: 1; } .F2 { flex: 2; } .F3 { flex: 3; } .F4 { flex: 4; } .F5 { flex: 5; } .F6 { flex: 6; } .F7 { flex: 7; } .F8 { flex: 8; } .F9 { flex: 9; } .F10 { flex: 10; } .F11 { flex: 11; } .F12 { flex: 12; } .F13 { flex: 13; } .F14 { flex: 14; } .F15 { flex: 15; } .F16 { flex: 16; } .C1 { display: grid; grid-template-columns: repeat(1, 100%); } .C1.gap1 { gap: 0.5rem; } .C1.gap2 { gap: 1rem; } .C1.gap0 { gap: 0; } .C2 { display: grid; grid-template-columns: repeat(2, 50%); } .C2.gap1 { gap: 0.5rem; } .C2.gap2 { gap: 1rem; } .C2.gap0 { gap: 0; } .C3 { display: grid; grid-template-columns: repeat(3, 33.3333333333%); } .C3.gap1 { gap: 0.5rem; } .C3.gap2 { gap: 1rem; } .C3.gap0 { gap: 0; } .C4 { display: grid; grid-template-columns: repeat(4, 25%); } .C4.gap1 { gap: 0.5rem; } .C4.gap2 { gap: 1rem; } .C4.gap0 { gap: 0; } .C5 { display: grid; grid-template-columns: repeat(5, 20%); } .C5.gap1 { gap: 0.5rem; } .C5.gap2 { gap: 1rem; } .C5.gap0 { gap: 0; } .C6 { display: grid; grid-template-columns: repeat(6, 16.6666666667%); } .C6.gap1 { gap: 0.5rem; } .C6.gap2 { gap: 1rem; } .C6.gap0 { gap: 0; } [tleft] { text-align: left; } [tright] { text-align: right; } [tcenter] { text-align: center; } [tjustify] { text-align: justify; } .Bb { border-bottom: 1px solid var(--border); } custom-image { display: inline-block; position: relative; } custom-image .upload-label { cursor: pointer; } custom-image .dialog { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border: 1px solid #ccc; padding: 20px; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } custom-image .dialog.open { display: block; } custom-image .image-preview { display: flex; overflow-x: auto; margin-top: 10px; } custom-image .image-preview img { max-width: 100px; margin-right: 10px; } custom-image .progress { width: 100%; background: #f3f3f3; border-radius: 2px; overflow: hidden; margin-top: 10px; } custom-image .progress-bar { height: 10px; background: #4caf50; width: 0; } custom-image .actions { display: flex; justify-content: space-between; margin-top: 10px; } custom-image .apply-btn { cursor: pointer; padding: 5px 10px; background-color: #4caf50; color: white; border: none; border-radius: 5px; } custom-image .cancel-btn { cursor: pointer; padding: 5px 10px; background-color: #f44336; color: white; border: none; border-radius: 5px; } #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; z-index: 1000; } #progress-container { width: 80%; background-color: #fff; border-radius: 10px; padding: 10px; } #progress-bar { height: 20px; background-color: #4caf50; width: 0; border-radius: 10px; } .todo-container { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); width: 300px; } .todo-container h1, .todo-container h0 { text-align: center; margin-bottom: 20px; } .todo-container form { display: flex; margin-bottom: 20px; } .todo-container form input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 5px; margin-right: 10px; } .todo-container form button { padding: 10px 15px; background-color: #28a745; border: none; color: #fff; border-radius: 5px; cursor: pointer; } .todo-container form button:hover { background-color: #218838; } .todo-container ul { list-style: none; padding: 0; } .todo-container ul li { display: flex; align-items: center; padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 10px; } .todo-container ul li .checkbox { margin-right: 10px; cursor: pointer; } .todo-container ul li .task { flex: 1; } .todo-container ul li .remove-btn { background-color: #dc3545; border: none; color: #fff; padding: 5px 10px; border-radius: 5px; cursor: pointer; } .todo-container ul li .remove-btn:hover { background-color: #c82333; } .todo-container ul li.completed .task { text-decoration: line-through; color: #888; } :root { --cbheight:90vh; } .userdashboard { font-family: Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); display: grid; grid-template-rows: 10vh var(--cbheight); grid-template-columns: 20rem 1fr; grid-template-areas: "topmenu topmenu" "mainmenu contentarea"; --p: .4rem .6rem; height: 100vh; width: auto; /* Main menu styling */ /* Content area styling */ /* Hidden class for menus */ } .userdashboard.lite { --cbheight: 100vh; grid-template-rows: var(--cbheight); grid-template-columns: 1fr; grid-template-areas: "contentarea contentarea" "contentarea contentarea"; } .userdashboard.lite .mainmenu { display: none; } .userdashboard.lite .topmenu { display: none; } .userdashboard.lite .chatbox { grid-template-columns: 100vw 100vw; overflow: hidden; gap: 0; } .userdashboard.lite .chatbox .userlist, .userdashboard.lite .chatbox .chatscontainer { width: 100vw; } .userdashboard.lite input { max-width: 98%; } .userdashboard.lite .back { display: flex !important; } .userdashboard.lite .chatscontainer { padding: 0.25rem 1rem; padding-left: 0 !important; } .userdashboard .topmenu { padding: var(--p); grid-area: topmenu; border-bottom: 1px solid var(--border); } .userdashboard .mainmenu, .userdashboard .contentarea { padding: var(--p); } .userdashboard .mainmenu { grid-area: mainmenu; background-color: var(--menu-background); } .userdashboard .mainmenu ul { list-style-type: none; } .userdashboard .mainmenu ul li { cursor: pointer; margin: 2px; border-bottom: 1px solid var(--border); position: relative; } .userdashboard .mainmenu ul li a { display: block; padding: var(--padding); padding-left: 1.5rem; border-radius: var(--radius); text-decoration: none !important; } .userdashboard .mainmenu ul li.selected { --bg: HSLA(var(--bg_hue),var(--bg_sat),calc(var(--bg_light) - 20%),var(--bg_op)); background-color: var(--bg); } .userdashboard .mainmenu ul li:hover { --bg: HSLA(var(--bg_hue),var(--bg_sat),calc(var(--bg_light) + 15%),var(--bg_op)); background-color: var(--bg); } .userdashboard .mainmenu ul li:last-child { border-bottom: none; } .userdashboard .mainmenu ul li::after { content: "❯"; position: absolute; right: 0rem; padding: var(--padding); top: 0rem; } .userdashboard .mainmenu ul:has(.highlight, .bringforward) { color: dimgrey; } .userdashboard .mainmenu ul:has(.highlight, .bringforward) h5 { color: black; } .userdashboard .mainmenu ul summary { color: black; border-color: var(--text-color); } .userdashboard .mainmenu ul summary ._show { display: none; } .userdashboard .mainmenu ul summary + div > p:not(.userdashboard .mainmenu ul summary + div > p.highlight):not(.userdashboard .mainmenu ul summary + div > p.bringforward) { display: none; } .userdashboard .mainmenu ul summary + div > p.showtext { display: block !important; } .userdashboard .mainmenu ul[open] summary::after { top: 1.5rem; } .userdashboard .mainmenu ul[open] summary ._show { display: inline-flex; } .userdashboard .mainmenu ul > p:not(.userdashboard .mainmenu ul > p.highlight):not(.userdashboard .mainmenu ul > p.bringforward) { display: none; } .userdashboard .mainmenu ul > p.showtext { display: block !important; } .userdashboard .mainmenu ul .highlight, .userdashboard .mainmenu ul .bringforward { color: var(--text); display: block; } .userdashboard .contentarea { grid-area: contentarea; background-color: var(--content-background); overflow: auto; } @media (max-width: 600px) { .userdashboard .contentarea { overflow: auto; } } .userdashboard .hidden { transform: translateX(-100%); } .chatbox { display: grid; grid-template-columns: 20rem auto; grid-template-areas: "userlist chatscontainer"; gap: 0.5rem; } .chatbox:has(.usageConsole) { --cbheight: calc(90vh - 5.5rem); grid-template-rows: 5rem auto; grid-template-columns: 20rem auto 30rem; grid-template-areas: "usageconsole usageconsole messageboard " "userlist chatscontainer messageboard"; } .chatbox.lite { border: 5px slid red; display: block; display: inline-flex; flex-direction: r; } .chatbox.lite .userlist, .chatbox.lite .chatscontainer { width: 100vw; } .chatbox.lite input { max-width: 98%; } .chatbox.lite .back { display: flex !important; } .chatbox .messageBoard { grid-area: messageboard; display: flex; flex-direction: row; gap: 0.25rem; background-color: var(--menu-background); } .chatbox .messageBoard .chat-history { height: 89vh; } .chatbox .messageBoard .chat-history img { max-width: 50% !important; } .chatbox .messageBoard .chat-history .message { font-size: 0.8rem !important; line-height: normal !important; } .chatbox .usageConsole { grid-area: usageconsole; display: flex; flex-direction: row; gap: 0.25rem; background-color: var(--menu-background); } .chatbox .usageConsole .totalusers, .chatbox .usageConsole .active { background-color: var(--menu-background); border: 2px solid var(--border); padding: 0.2rem; border-radius: var(--radius); aspect-ratio: 1; text-align: center; margin: 0.3rem; color: var(--text-color); font-size: 0.8rem; display: flex; flex-direction: column-reverse; } .chatbox .usageConsole .totalusers .count, .chatbox .usageConsole .active .count { font-size: 2rem; font-weight: 600; } .chatbox .userlist { grid-area: userlist; padding: var(--padding); border-radius: var(--radius); background-color: var(--background-color); height: calc(var(--cbheight) - 1rem); display: grid; grid-template-rows: 10rem 1fr; border-right: 1px solid var(--menu-background); } .chatbox .userlist .profile { padding: 0.2rem 0; display: grid; grid-template-columns: 5rem auto; grid-template-rows: 5.25rem auto; height: 6rem; -moz-column-gap: 0.6rem; column-gap: 0.6rem; } .chatbox .userlist .profile .logas { text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 90%; } .chatbox .userlist .profile .img { width: 100%; border-radius: 100%; overflow: hidden; aspect-ratio: 1; background-color: var(--background-color); } .chatbox .userlist .profile .nam { font-weight: 600; text-transform: capitalize; } .chatbox .userlist .profile .settings, .chatbox .userlist .profile .adduser, .chatbox .userlist .profile .addgroup { opacity: 0.4; font-size: 0.9rem; cursor: pointer; margin-right: 0.8rem; } .chatbox .userlist .profile .settings:hover, .chatbox .userlist .profile .adduser:hover, .chatbox .userlist .profile .addgroup:hover { opacity: 0.8; } .chatbox .userlist .profile .search { grid-column: span 2; } .chatbox .userlist hr { margin: 0.6rem; } .chatbox .userlist .contact { display: flex; flex-direction: column; overflow: auto; padding-right: 0.5rem; } .chatbox .userlist .contact .user { display: grid; grid-template-columns: 3.5rem 1fr 3.5rem; grid-template-rows: auto auto; grid-template-areas: "img nam nam " "img msg time"; font-size: 0.9rem; padding: 0.5rem 0.3rem; -moz-column-gap: 3px; column-gap: 3px; grid-template-areas: "img nam nam" "img msg time"; background: var(--background-color); border-radius: var(--radius); cursor: pointer; margin-bottom: 0.4rem; transition: order 1s ease; order: 1; position: relative; } .chatbox .userlist .contact .user::before { content: " "; position: absolute; top: 0.5rem; left: 0.5rem; border-radius: 100%; height: 0.9rem; aspect-ratio: 1; } .chatbox .userlist .contact .user.online, .chatbox .userlist .contact .user.live { position: relative; } .chatbox .userlist .contact .user.online::before, .chatbox .userlist .contact .user.live::before { box-shadow: inset 1px -2px 0.4rem #00a987; background-color: #c2fef6; } .chatbox .userlist .contact .user.live::before { box-shadow: inset 1px -2px 0.4rem orange; background-color: yellow; } .chatbox .userlist .contact .user.selected { --bg: HSLA(var(--bg_hue),var(--bg_sat),calc(var(--bg_light) - 20%),var(--bg_op)); background-color: var(--bg); } .chatbox .userlist .contact .user:hover { background-color: var(--menu-background); } .chatbox .userlist .contact .user:last-child { margin-bottom: 5rem; } .chatbox .userlist .contact .user .nam { grid-area: nam; font-weight: 500; line-height: normal; text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 80%; grid-column: span 3; text-transform: capitalize; } .chatbox .userlist .contact .user .group { position: absolute; top: 0; right: 0.5rem; opacity: 0.3; } .chatbox .userlist .contact .user .msg { grid-area: msg; text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 90%; opacity: 0.5; max-height: 1.8rem; } .chatbox .userlist .contact .user .time { grid-area: time; line-height: normal; color: var(--text-color); opacity: 0.4; font-size: 0.7rem; text-align: right; align-self: flex-end; } .chatbox .userlist .contact .user .img { grid-area: img; border: 2px solid var(--text-color); border-radius: 100%; max-width: calc(100% - 4px); display: flex; align-self: flex-start; aspect-ratio: 1; margin: auto; background-color: var(--text-color); min-width: 2.5rem; min-height: 2.5rem; } .chatbox .chatscontainer { grid-area: chatscontainer; width: 100%; height: calc(var(--cbheight) - 1rem); display: grid; grid-template-rows: 3.5rem 1fr auto; gap: 0.3rem; } .chatbox .chatscontainer .center { display: flex; flex-direction: column; text-align: center; grid-row: span 5; grid-column: span 6; color: #adadad; } .chatbox .chatscontainer .center * { text-shadow: 0 0 1.5rem #adadad; } .chatbox .chatscontainer .chat-header { background-color: var(--menu-background); display: flex; flex-direction: row; padding: var(--padding); border-radius: var(--radius); align-items: center; } .chatbox .chatscontainer .chat-header .userdetails { flex: 1; white-space: nowrap; } .chatbox .chatscontainer .chat-header .user { font-weight: 500; text-transform: capitalize; } .chatbox .chatscontainer .chat-header .user.online, .chatbox .chatscontainer .chat-header .user.live { position: relative; padding-left: 1.5rem; } .chatbox .chatscontainer .chat-header .user.online::before, .chatbox .chatscontainer .chat-header .user.live::before { content: " "; position: absolute; top: 0.2rem; left: 0rem; border-radius: 100%; height: 0.9rem; aspect-ratio: 1; box-shadow: inset 1px -2px 0.4rem #14aee9; background-color: #bdfb5c; } .chatbox .chatscontainer .chat-header .user.live::before { background-color: #141fe9; } .chatbox .chatscontainer .chat-header .search { display: flex; align-items: center; -moz-column-gap: 1rem; column-gap: 1rem; } .chatbox .chatscontainer .chat-header .search .settings { opacity: 0.4; cursor: pointer; } .chatbox .chatscontainer .chat-header .search .settings:hover { opacity: 0.8; } .chatbox .chatscontainer .chat-header .back { padding-right: 1rem; cursor: pointer; display: none; } .chatbox .chatscontainer .chat-input { background-color: var(--menu-background); display: grid; grid-template-columns: auto 5rem; align-items: center; border-radius: var(--radius); } .chatbox .chatscontainer .chat-input .messagebox { min-height: 2rem; max-height: 10rem; background-color: white; color: darkblue; padding: var(--padding); margin: var(--padding); border-radius: var(--radius); border: 1px solid var(--border); overflow: auto; position: relative; } .chatbox .chatscontainer .chat-input .messagebox:empty::before { content: "Type here.."; position: absolute; color: rgb(159, 159, 159); } .chatbox .chatscontainer .chat-input .messagebox.disabled { pointer-events: none; position: relative; } .chatbox .chatscontainer .chat-input .messagebox.disabled:empty::before { content: "Field not yet active"; position: absolute; color: rgb(159, 159, 159); } .chatbox .chatscontainer .chat-input .send { padding: var(--padding); cursor: pointer; width: -moz-fit-content; width: fit-content; border-radius: var(--radius); border: 1px solid var(--border); background-color: var(--menu-background); } .chatbox .chatscontainer .chat-input .send:hover { box-shadow: var(--shadow); } .chatbox .chatscontainer .chat-input .send:active { transform: scale(0.95); } .chatbox .chatscontainer .chat-input .send.disable { pointer-events: none; } .chat-history { flex: 1; overflow-y: auto; border-bottom: 1px solid var(--border); position: relative; background-color: var(--chat-background); background-image: var(--chat-background-image); background-size: 30rem; background-blend-mode: color-burn; background-attachment: fixed; border-radius: var(--radius); } .chat-history .dropimage { position: sticky; bottom: 0; top: 0%; left: 0; width: 100%; height: 100%; z-index: 2; background: white; padding: 1rem; } .chat-history .dropimage::before { content: "Drop your file(s) here"; display: flex; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.9294117647); padding: 10%; border: 1px solid var(--border); border-radius: 1rem; } .chat-history .dropimage.drop { top: 50%; height: 50%; overflow: auto; display: inline-flex; } .chat-history .dropimage.drop::before { content: none; } .chat-history .dropimage img { width: 100%; -o-object-fit: contain; object-fit: contain; height: 100%; margin-bottom: 0; padding: 1rem; } .chat-history .chatbubble { padding: var(--padding); margin: var(--padding); display: flex; } .chat-history .chatbubble:last-child { scroll-padding-bottom: 2rem; /* Add padding to ensure the last element is fully visible */ scroll-snap-type: y proximity; /* Enable smooth scrolling to snap to elements */ scroll-snap-align: end; /* Ensure the last item snaps to the end of the container */ } .chat-history .chatbubble .chatcontent { border-radius: var(--radius); max-width: 27rem; display: flex; flex-direction: column; align-items: flex-start; } .chat-history .chatbubble .chatcontent .user { font-size: 0.8rem; font-weight: 400; color: #9d9d9d; line-height: normal; padding-bottom: 3px; } .chat-history .chatbubble .chatcontent .img { display: inline-block; width: 100%; overflow: hidden; max-height: 16rem; position: relative; } .chat-history .chatbubble .chatcontent .img img { max-width: 100%; border: 8px solid var(--menu-background); border-radius: var(--radius); background-color: whitesmoke; } .chat-history .chatbubble .chatcontent .img .view { position: absolute; bottom: 0; text-align: center; width: 100%; background-color: rgba(247, 241, 241, 0.8784313725); padding: var(--padding); border-radius: var(--radius); font-weight: 600; cursor: pointer; } .chat-history .chatbubble .chatcontent .img + .message { width: 100%; } .chat-history .chatbubble .chatcontent .message { font-size: 0.9rem; padding: 0.8rem 1rem; text-align: left; line-height: normal; border-radius: 0.5rem; -webkit-user-select: text; -moz-user-select: text; user-select: text; line-height: 1.5rem; max-width: 100%; overflow-wrap: break-word; } .chat-history .chatbubble .chatcontent .message ul, .chat-history .chatbubble .chatcontent .message ol { list-style-type: none; } .chat-history .chatbubble .chatcontent .message ul li, .chat-history .chatbubble .chatcontent .message ol li { line-height: 1.5rem; } .chat-history .chatbubble .chatcontent .message.warn { background-color: #fbf1f6; color: #8b2e47; } .chat-history .chatbubble .chatcontent .time { font-size: 0.7rem; opacity: 0.5; text-align: right; align-self: start; line-height: 1.2rem; } .chat-history .chatbubble.sent { flex-direction: row-reverse; align-items: flex-end; } .chat-history .chatbubble.sent .user { align-self: flex-end; } .chat-history .chatbubble.sent .message { background-color: #f2fbfb; color: seagreen; align-self: end; } .chat-history .chatbubble.sent .time { align-self: end; } .chat-history .chatbubble.sent:has(+ .sent) { padding-bottom: 0; } .chat-history .chatbubble.sent + .sent { padding-top: 0; } .chat-history .chatbubble.sent + .sent .user { display: none; } .chat-history .chatbubble.sent .failed { position: relative; } .chat-history .chatbubble.sent .failed::before { content: "Failed!"; color: orangered; position: absolute; right: 100%; padding-right: 1rem; /* background-color: var(--menu-background); */ border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; } .chat-history .chatbubble.sent.system { position: relative; padding-right: 2.5rem; } .chat-history .chatbubble.sent.system .chatcontent::after { content: "☸"; color: var(--text-color); position: absolute; right: -2.5rem; border-radius: var(--radius); font-size: 2.4rem; top: 0.5rem; opacity: 0.2; } .chat-history .chatbubble.recv { align-items: flex-start; } .chat-history .chatbubble.recv .user { align-self: flex-start; } .chat-history .chatbubble.recv .message { background-color: #f1f5ff; color: #1d5f8b; align-self: flex-start; } .chat-history .chatbubble.recv .time { align-self: flex-start; } .chat-history .chatbubble.recv:has(+ .recv) { padding-bottom: 0; } .chat-history .chatbubble.recv + .recv { padding-top: 0; } .chat-history .chatbubble.recv .failed { position: relative; } .chat-history .chatbubble.recv .failed::before { content: "Failed!"; color: orangered; position: absolute; left: 100%; padding-left: 1rem; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; } .chat-history .chatbubble.recv.system { position: relative; padding-left: 2.5rem; } .chat-history .chatbubble.recv.system .chatcontent::after { content: "☸"; color: var(--text-color); position: absolute; left: -2.5rem; border-radius: var(--radius); font-size: 2.4rem; top: 0.5rem; opacity: 0.2; } .chat-history .chatbubble:last-child { padding-bottom: 5rem; } .chat-history .divider { font-size: 0.85rem; color: var(--text-color); text-align: center; margin: 2rem auto; width: -moz-fit-content; width: fit-content; background-color: var(--menu-background); padding: var(--padding); line-height: normal; border-radius: var(--radius); position: sticky; top: 0.3rem; z-index: 1; --bg: HSLA(var(--bg_hue),var(--bg_sat),calc(var(--bg_light) - 5%),.9); background-color: var(--bg); } .contextmenu { position: absolute; } .contextmenu ul { list-style-type: none; margin: 0; } .contextmenu ul li { padding: var(--padding); } .messagePosts { padding: var(--padding); background-color: var(--chat-background); background-image: var(--chat-background-image); background-size: 30rem; background-blend-mode: color-burn; background-attachment: fixed; } .messagePosts .prevMessage { position: absolute; top: 0; left: 50%; background-color: var(--menu-background); padding: 0.3rem 0.8rem; border-radius: var(--radius); font-size: 0.8rem; font-weight: 500; color: grey; cursor: pointer; transform: translateX(-50%); box-shadow: var(--shadow); margin-top: 0.5rem; z-index: 1; } .messagePosts .messagePostsContainer { overflow: auto; display: flex; flex-direction: column; gap: 1.5rem; padding: 0 1rem; position: relative; min-height: 100%; } .messagePosts .messagePostsContainer > .messagePost:first-of-type { margin-top: 3rem; } .messagePosts .messagePostsContainer > .messagePost:last-of-type { margin-bottom: 5rem; } .messagePosts .messagePost { padding: 0.6rem 1rem; background-color: #f1f5ff; font-size: 0.9rem; border-radius: 0.4rem; max-width: 70%; align-self: flex-end; position: relative; align-self: flex-start; } .messagePosts .messagePost .username { font-size: 0.8rem; color: #ccc; line-height: normal; font-style: italic; } .messagePosts .messagePost .isReply { font-size: 0.8rem; color: deepskyblue; } .messagePosts .messagePost:hover .contextMenu { display: flex; flex-direction: row; left: 100%; top: 50%; padding: 0.5rem; gap: 0.5rem; background: transparent; transform: translateY(-50%); border: none; } .messagePosts .messagePost:hover .contextMenu > div { display: inline-block; background-color: var(--menu-background); padding: var(--padding); border-radius: 0.5rem; cursor: pointer; opacity: 0.3; } .messagePosts .messagePost:hover .contextMenu > div:hover { opacity: 1; } .messagePosts .messagePost:hover .contextMenu > div:active { scale: 0.95; filter: invert(0.3); } .messagePosts .messagePost .title { font-weight: 500; color: var(--interactive); } .messagePosts .messagePost .message { font-size: 1rem; font-weight: normal; color: darkslategray; } .messagePosts .messagePost.sent { align-self: self-end; background-color: #f2fbfb; } .messagePosts .messagePost.sent .time { text-align: right; } .messagePosts .messagePost.sent:hover .contextMenu { left: auto; right: 100%; } .messagePosts .messagePost .time { color: #888; font-size: 0.7rem; } .messagePosts:has(.messageReply) { display: grid; grid-template-rows: 1fr auto; height: 100%; } .messagePosts:has(.messageReply) .messageReply { display: grid; grid-template-columns: 1fr auto; width: 100%; gap: 1rem; border-top: 1px solid var(--border); } .messagePosts:has(.messageReply) .messageReply [type=submit] { align-self: self-end; } .messagePosts .replyingto, .messagePosts .replyinguser { position: sticky; bottom: 0; left: 0; padding: 1rem; background-color: whitesmoke; width: 100%; order: 2; } .messagePosts .replyingto .messagePost .contextMenu, .messagePosts .replyinguser .messagePost .contextMenu { display: none; } .messagePosts .replyingto .close, .messagePosts .replyinguser .close { padding: 0.5rem; position: absolute; top: -0.5rem; right: -2rem; color: red; cursor: pointer; } sj-tabs { height: 100vh; width: 100%; max-width: 100vw; max-height: 100vh; overflow: hidden; } sj-tabs .tabs-container { --tw-text-opacity:1; display: grid; grid-template-rows: 3.75rem calc(94.5vh - 3.75rem); } sj-tabs .tabs-container.sidetab { display: flex; flex-direction: row; } sj-tabs .tabs-container.sidetab .tabHeader { display: flex; flex-direction: column; height: 100%; } sj-tabs .tab-headers { display: flex; cursor: pointer; padding: 0.5rem 1rem 0.25rem 1rem; gap: 1rem; overflow: auto; } sj-tabs .tab-header { font-size: clamp(0.9rem, 3vw, 1rem); border-radius: 0.5rem 0.5rem 0 0; text-align: center; padding: 0.3rem 0.8rem; border-bottom: 1px solid #ccc; font-weight: 500; white-space: nowrap; opacity: 0.75; display: flex; gap: 0.4rem; } sj-tabs .tab-header:hover { border-bottom: 2px solid grey; } sj-tabs .tab-header.active { border-bottom: 3px solid var(--interactive); opacity: 1; } sj-tabs .tab-content { display: none; padding: 0rem; border-top: 1px solid var(--menu-background); overflow: auto; height: 1fr; } sj-tabs .tab-content.active { display: block; } .tabbedDashboard { font-family: Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); display: grid; grid-template-rows: 5.5vh 94.5vh; position: fixed; width: 100%; height: 100%; left: 0; top: 0; } .tabbedDashboard .tabHeader { grid-area: "tabheader"; padding: 0.5rem; display: flex; flex-direction: row; padding: 0.8rem; justify-content: space-between; align-content: center; } .tabbedDashboard .tabHeader .alignleft { display: flex; gap: 1rem; } .tabbedDashboard .tabHeader .alignleft img { width: 100%; } .tabbedDashboard .tabHeader .rightalign { gap: 1rem; align-self: flex-end; display: flex; flex-direction: row; align-items: center; align-self: stretch; } .tabbedDashboard .tabContainer { grid-area: "tabcontainer"; } .toggle0 { --size: 1.5rem; display: block !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; cursor: pointer; width: var(--size) !important; height: var(--size) !important; box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0; border-radius: 999px; color: grey; transition: all 500ms; } .toggle0::before { display: none !important; } .toggle0:checked { --ray-size: calc(var(--size) * -0.4); --offset-orthogonal: calc(var(--size) * 0.65); --offset-diagonal: calc(var(--size) * 0.45); transform: scale(0.75); color: hsl(40, 100%, 50%); box-shadow: inset 0 0 0 var(--size), calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), var(--offset-orthogonal) 0 0 var(--ray-size), 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), 0 var(--offset-orthogonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size), var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); } .toggle0 + label::before { display: none; content: ""; } .toggle0 { z-index: 1; } .toggle0:checked ~ .background { --bg: white; } .toggle0:checked ~ .title { --color: hsl(40, 100%, 50%); } .flex-console { display: grid; grid-template-columns: 18rem 1fr; padding: var(--padding); -moz-column-gap: 1rem; column-gap: 1rem; height: 100%; } .flex-console > :first-child { padding: var(--padding); max-height: 100%; overflow: auto; width: 18rem; position: relative; outline: 1px dashed var(--border); outline-offset: 0.6rem; } .flex-console > :nth-child(2) { border: 1px solid #ddd; padding: var(--padding); border-radius: var(--radius); overflow: auto; flex: 1; } .radio-group { display: flex; flex-direction: column; margin-top: 10px; } .radio-group label { margin-bottom: 10px; cursor: pointer; } .radio-group input[type=radio] { margin-right: 10px; } .label_wrap:has(.asToggle) { filter: drop-shadow(1px 1px 2px #bbb); } .label_wrap:has(.asToggle) > label::before { content: "❭"; position: absolute; left: 1.8rem; color: orange; } table { border: 1px solid #ddd; margin: 1.5em auto; position: relative; border-collapse: collapse; width: 100%; counter-reset: row-counter; } table table { margin: auto; filter: hue-rotate(250deg); counter-reset: row-counter1; } table table tr td.serial::before { counter-increment: row-counter1; content: counter(row-counter1); padding-right: var(--padding); text-align: right; } table caption { caption-side: top; padding: var(--padding); font-weight: 600; text-align: left; } table caption { border: 1px solid #ddd; } table tr td.serial::before { counter-increment: row-counter; content: counter(row-counter); padding-right: var(--padding); text-align: right; } table th { background-color: var(--menu-background); } table td, table th { border: 1px solid #ddd; padding: 0.3rem 0.6rem; position: relative; } table td label, table th label { margin: 0 !important; min-height: auto; padding: var(--padding) !important; } table td .label_wrap, table th .label_wrap { margin: 0; } table tr:hover { background-color: var(--input-background); } table tr.disabled { color: coral; } .table-detailed { width: 100%; border-collapse: collapse; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); border-radius: var(--radius); overflow: hidden; outline: 1px solid #ccc; } .table-detailed tr.expired { opacity: 0.75; background-color: var(--menu-background); filter: hue-rotate(-100deg); position: relative; } .table-detailed tr.selected { background-color: var(--menu-background); } .table-detailed .sub-table { display: none; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); } .table-detailed .sub-table td { padding: var(--padding); } .table-detailed th { text-align: left; } .table-detailed th input[type=checkbox], .table-detailed th td input[type=checkbox] { cursor: pointer; } .table-detailed .toggle-details-checkbox { justify-content: center; align-items: center; } @media screen and (max-width: 768px) { .table-detailed table { font-size: 12px; } .table-detailed th, .table-detailed td { padding: 10px; } .table-detailed th { font-size: 14px; } .table-detailed .toggle-details-checkbox { transform: scale(1.1); } }/*# sourceMappingURL=main.css.map */