body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote {
	margin: 0;
	padding: 0;
}

html {
  height: 100%;
}

body {
    min-height: 100%;
    background-repeat: no-repeat;
    background-position: right top;
    margin: 0;
    padding: 0;
    border: 0;
    padding: 0;
    background: white;
    font-family: system-ui;
    scrollbar-color: #555 #222;
    scrollbar-width: thin;
    /*
    display: flex;
    justify-content: center;
    align-items: center;
    */
}

/*
h1 {
    margin-bottom: 20px;
} */

a:link {
    color: white;
}

label {

}

label.onelinerinput {
    font-size: small;
    display: inline-block;
    min-width: 78px;
    vertical-align: top;
}

label.onelinerinputlong {
    font-size: small;
    display: inline-block;
    min-width: 78px;
    vertical-align: top;
}

input {
    margin-right: 10px;
    margin-bottom: 2px;
}
input[type='text'], input[type='number'], input[type='email'], input[type='password'], input[type='search'], select, textarea {
    background: #111820;
    color: inherit;
    border: 1px solid rgba(80,200,255,0.2);
    border-radius: 4px;
    padding: 3px 8px;
}

.disabled { opacity: 0.45; filter: grayscale(1); cursor: not-allowed; pointer-events: none; }
.btn:disabled { filter: grayscale(1); opacity: 0.45; cursor: not-allowed; }
.text-center { text-align: center; }
.white-bg { position: relative; background: #fff; padding: 8px; border-radius: 8px; }
.muted { opacity: 0.65; }
.sm { font-size: 0.85em; }
.pre-wrap { white-space: pre-wrap; }
.field-label { font-size: 0.8em; font-weight: bold; display: block; margin-top: 6px; margin-right: 8px; opacity: 0.6; }
.help-icon { display: inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 50%; border: 1px solid currentColor; font-size: 0.75em; cursor: pointer; opacity: 0.7; vertical-align: middle; }
.help-icon:hover { opacity: 1; }
.event-description p { margin: 0 0 8px; }

input.onelinerinput {
    width: 132px;
}

input.onelinerinputlong {
    min-width: 420px;
}

table {
    width: 100%;
}

th {
    background-color: #202020;
    padding: 4px 0 6px 0;
}



.email {
    width: 400px;
}

._box {
    margin: auto;
    padding: 8px;
    border: gray solid 2px;
    box-shadow: 10px 10px 5px grey;
    min-width: 600px;
    min-height: 100px;
    /* width: fit-content; */
    background-color: #f1f1f1;
    margin-bottom: 20px;
    transition: width 200ms, height 200ms;
}

._box_closed {
    margin: auto;
    padding: 8px;
    border: gray solid 2px;
    box-shadow: 5px 5px 2px grey;
    background-color: #f1f1f1;
    margin-bottom: 20px;
    width: fit-content;
    /* float: right; */
    min-height: 30px;
}

._bar {
    width: 100%;
    height: 20px;
}

._char {
    width: 55px;
    float: left;
}

._chartext {
    width: 45px;
    font-size: xx-large;
    padding: 2px;
    text-align: center;
}

.center {
    margin: 0 auto 10px auto;
    width: fit-content;
}

.popup-overlay {
  /*Hides pop-up when there is no "active" class*/
  visibility: hidden;
  position: absolute;
  background: #ffffff;
  border: 3px solid #666666;
  width: 50%;
  height: 50%;
  left: 25%;
}

.popup-overlay.active {
  /*displays pop-up when "active" class is present*/
  visibility: visible;
  text-align: center;
}

.popup-content {
  /*Hides pop-up content when there is no "active" class */
  visibility: hidden;
}

.popup-content.active {
  /*Shows pop-up content when "active" class is present */
  visibility: visible;
}

button {
    cursor: pointer;
}

.btn.green:hover { background: #388e3c; border-color: #2e7d32; color: #ffffff; transition: background 500ms ease, border-color 500ms ease; }
.btn.red:hover { background: #d32f2f; border-color: #c62828; color: #ffffff; transition: background 500ms ease, border-color 500ms ease; }
.btn.blue:hover { background: #1976d2; border-color: #1565c0; color: #ffffff; transition: background 500ms ease, border-color 500ms ease; }
.btn.grey:hover { background: #607d8b; border-color: #546e7a; color: #ffffff; transition: background 500ms ease, border-color 500ms ease; }

.btn.bottomright {
    right: 1px;
    position: absolute;
    bottom: -5px;
}

.btn.small {
    margin: 0 5px 0 0;
    padding: 3px 8px;
    min-width: fit-content;
}

.btn.small:hover {
    box-shadow: none;
    transition: all 500ms linear;
}

.btn.inline {
    float: left;
    margin: 0 0 0 10px;
    padding: 3px;
}

.floatright {
    float: right;
    margin-left: auto;
}
.floatleft {
    float: left;
}

.mw620 {
    min-width: 620px;
}

.mw420 {
    min-width: 422px;
}

.flashme {
    background-color: gold;
}


.computer-screen {
    position: relative;
    /* width: 1600px;
    height: 1024px; */
    top: 15px;
    left: 15px;
    /* border: 12px black solid; */
    border-radius: 36px;
    background: black;
    padding: 0px;
    box-sizing: border-box;
    box-shadow: 0 0 0 6px #999;
    overflow: hidden;
    /* background-color: black; */
    /* background-image: url("../../img/lokato/logo.png"); */
    background-position: center;
    background-repeat: no-repeat;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: #222;
}

body::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.iphone-screen {
    position: relative;
    width: 529px;
    height: 923px;
    top: 20px;
    left: 20px;
    border: 12px black solid;
    border-radius: 36px;
    background: white;
    padding: 0;
    box-sizing: border-box;
    box-shadow: 0 0 0 6px #999;
    overflow: hidden;
    background-color: black;
    background-image: url("../../img/lokato/logo.png");
    background-position: center;
    background-repeat: no-repeat;
}

.iphone-screen h1 {
    margin: 60px 0 0 0;
    color: white;
    font-size: 3em;
}

.iphone-screen p {
    margin: 50px 0 0 0;
    text-align: justify;
    color: white;
    font-size: 1.4em;
}

.content_main {
    position: absolute;
    background-size: cover;
    top: 0;
    left: 0;
    right: -8px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #555 transparent;
    scrollbar-width: thin;
}

.content_main::-webkit-scrollbar {
    width: 8px;
}

.content_main::-webkit-scrollbar-track {
    background: transparent;
}

.content_main::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.content_main::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.content_top {
    /* border: #3593d2 solid thin; */
    position: relative;
    padding: 20px;
    width: auto;
    display: block;
    color: #5cc4fd;
    margin-bottom: 10px;
}

.content {
    border-radius: 10px;
    color: #5cc4fd;
    float: left;
    margin: 0 10px 10px 0;
    padding: 10px;
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
}

.content_center {
    border-radius: 10px;
    color: #5cc4fd;
    margin: 0 auto 10px auto;
    padding: 5px;
    min-width: fit-content;
    margin: 15px;
}

.content_bottom {
    position: absolute;
    padding: 20px;
    width: auto;
    display: block;
    color: #5cc4fd;
    bottom: 0px;
}



.wmax {
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
}

.w50px {
    width: 50px;
}

.w100px {
    width: 100px;
}

.w200px {
    width: 200px;
}

.w300px {
    width: 300px;
}

.w400px {
    width: 400px;
}

.w500px {
    width: 500px;
}

.border1 {
    border: silver solid thin;
}

.content_center.border1 {
    background: linear-gradient(145deg, #272b38, #1e2230);
    border: 1px solid rgba(80, 200, 255, 0.45);
    border-radius: 13px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(80, 200, 255, 0.08);
    padding: 20px;
}

.logo {
    width: 200px;
    height: 148px;
    top: 42px;
    left: 47px;
    position: absolute;
    background-image: url("../../img/lokato/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.login_frame {
    position: absolute;
    top: auto;
    width: 465px;
    height: 100%;
    border-radius: 36px;
    background-color: #423E44;
    padding: 20px;
    z-index: 1;
}

.back_line {
    color: silver;
    font-size: large;
    font-weight: bolder;
    text-align: center;
    cursor: pointer;
}

.form-group {
    position: relative;
    margin: 20px 0 0 0;
}

textarea {
    width: 100%;
    height: 100px;
}

.input {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid #ddd;
    color: white;
    background-color: transparent;
}

.placeholder {
    position: absolute;
    top: 14px;
    left: 15px;
    padding: 2px;
    transition: 0.3s;
    pointer-events: none;
    color: white;
}

.input:not(:placeholder-shown) + .placeholder, .input:focus + .placeholder {
    transform: translateY(-24px);
    background-color: #423E44;
    font-size: 12px;
}

.passwordEye {
    position: relative;
    top: -38px;
    left: 93%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-image: url("../../img/components/eye1.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.passwordEye.closed {
    background-image: url("../../img/components/eye2.png");
}

.link {
    color: white;
    text-decoration: underline;
    cursor: pointer;
    font-size: x-small;
}

.bottom {
    position: absolute;
    bottom: 0;
}

.alignRight {
  text-align: right;
}

.textInput {
  text-align: right;
}

/* menu */

menu_ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

menu_li {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 7px 16px;
  text-decoration: none;
}

menu_li:hover:not(.menu_active) {
  background-color: #303030;
  font-weight: bold;
}

.menu_active {
  background-color: #04AA6D;
}

.metervalue {
    text-align: right;
    width: 300px;
}

.row {
    display: flex;
    height: 100%;
}

.scrollable {
    height: 100%;
    overflow-y: auto;
    margin: 0 10px 0 0;
}

.data-tree {
    min-width: fit-content;
}

.dataTreeRow {
    padding: 3px 0 0 0;
    margin: 5px;
    background-repeat: no-repeat;
    background-position: left bottom;
    color: grey;
    font-family: monospace;
    font-size: large;
    cursor: pointer;
}

.dataTreeRow.red {
    padding: 3px 0 0 22px;
    background-image: url(../../picture/red.png);
}

.dataTreeRow.green {
    padding: 3px 0 0 22px;
    background-image: url(../../picture/green.png);
}

.dataTreeRow.disconnected {
    padding: 3px 0 0 22px;
    background-image: url(../../picture/red.png);
}

.dataTreeRow.connected {
    padding: 3px 0 0 22px;
    background-image: url(../../picture/green.png);
}

.dataTreeRow.yellow {
    padding: 3px 0 0 22px;
    background-image: url(../../picture/green.png);
}

.dataTreeRow.selected {
    color: white;
}

.coverage {
    display: inline-block;
    width: 35px;
    text-align: right;
    padding-right: 5px;
}

.label {
    display: inline-block;
    text-align: right;
    min-width: 60px;
}

.editable {}

.redBox {
    border: red solid thin;
}

/* Shared styles (used by both desktop and mobile) */
section {
    background: #1a1e28;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    border: 1px solid #2a2f3d;
    color: #e3eaf3;
    line-height: 1.7;
}

section h2 {
    font-size: 1.15em;
    color: #5cc4fd;
    margin-bottom: 12px;
    letter-spacing: 0.03em;
}

section p, section ul, section li {
    color: #e3eaf3;
    font-size: 0.92em;
    line-height: 1.7;
}

section p {
    margin-bottom: 10px;
}

section ul {
    margin: 8px 0 0 8px;
    padding-left: 16px;
}

section li {
    margin-bottom: 4px;
}

section a {
    color: #5cc4fd;
    text-decoration: none;
}

section a:hover {
    text-decoration: underline;
}

.service {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: linear-gradient(145deg, #272b38, #1e2230);
    border-radius: 13px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(24,119,242,0.15);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.service img {
    transition: transform 0.35s ease, filter 0.35s ease;
}

.service strong {
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

.service::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #1877f2, #50c8ff, #1877f2);
    border-radius: 3px;
    transition: width 0.4s ease, left 0.4s ease, box-shadow 0.4s ease;
    box-shadow: none;
}

.service:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: rgba(80,200,255,0.6);
    box-shadow:
        0 6px 25px rgba(0,0,0,0.3),
        0 0 20px rgba(80,200,255,0.3),
        0 0 40px rgba(80,200,255,0.15),
        inset 0 0 15px rgba(80,200,255,0.08);
    animation: glowPulse 1.5s ease-in-out infinite;
}

.service:hover::after {
    width: 80%;
    left: 10%;
    box-shadow: 0 0 10px rgba(80,200,255,0.6), 0 0 20px rgba(80,200,255,0.3);
}

.service:hover img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 6px rgba(80,200,255,0.5));
}

.service:hover strong {
    color: #50c8ff;
    text-shadow: 0 0 8px rgba(80,200,255,0.4);
}

.service:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow:
        0 2px 10px rgba(0,0,0,0.3),
        0 0 8px rgba(24,119,242,0.2),
        -2px 0 10px rgba(24,119,242,0.15),
        2px 0 10px rgba(24,119,242,0.15);
    animation: none;
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 6px 25px rgba(0,0,0,0.3), 0 0 20px rgba(80,200,255,0.3), 0 0 40px rgba(80,200,255,0.15), inset 0 0 15px rgba(80,200,255,0.08); }
    50% { box-shadow: 0 6px 25px rgba(0,0,0,0.3), 0 0 30px rgba(80,200,255,0.5), 0 0 60px rgba(80,200,255,0.25), inset 0 0 20px rgba(80,200,255,0.12); }
}

.service strong {
    display: block;
    color: #67beea;
    font-size: 0.95em;
    margin-bottom: 6px;
}

.service p {
    color: #c8d4e3;
    font-size: 0.88em;
    line-height: 1.55;
    margin: 0;
}


.section-header-img {
    height: 60px;
    object-fit: contain;
    display: block;
    margin-bottom: 16px;
}

.footer {
    color: #6b7a96;
    font-size: 0.88em;
    padding: 10px 0;
}

/* LSS AI page */
textarea { box-sizing: border-box; }

.lss-question { max-width: 700px; }
.lss-top-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 16px; }
.lss-intro { flex: 1; }
.lss-points-box { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; background: rgba(80,200,255,0.06); border: 1px solid rgba(80,200,255,0.25); border-radius: 8px; padding: 8px 14px; font-size: 0.9em; color: #5cc4fd; white-space: nowrap; flex-shrink: 0; }
.lss-buy-popup-email { font-weight: 700; font-size: 1.1em; margin-top: 8px; }
.balance-bar { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 0.9em; color: #e0e0e0; }
#balance-bar { padding: 4px 10px; border-style: solid; border-width: 1px; border-radius: 10px; border-color: #555555 #555555 #131515 #555555; background-image: linear-gradient(to bottom, #888A8A 0%, #4C4E4F 48%, #1B1D20 51%, #131516 100%); background-size: 100% 100%; box-shadow: 0 0 2px 0 #ffffff inset; margin: 0 4px; }

/* Guest page */
.lss-hero { background: linear-gradient(135deg, #1a2540 0%, #1e2a3a 100%); border: 1px solid rgba(80,200,255,0.18); border-radius: 12px; padding: 28px 32px; margin-bottom: 20px; }
.lss-hero-intro { font-size: 1.05em; color: #c8d8ea; line-height: 1.7; margin-bottom: 20px; }
.lss-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lss-features li { padding: 10px 14px 10px 40px; background: rgba(80,200,255,0.05); border-left: 3px solid #5cc4fd; border-radius: 0 6px 6px 0; color: #a8c8e8; font-size: 0.95em; position: relative; }
.lss-features li::before { content: '→'; position: absolute; left: 12px; color: #5cc4fd; font-weight: bold; }
.lss-disclaimer { background: rgba(255,200,60,0.06); border: 1px solid rgba(255,200,60,0.35); border-radius: 8px; padding: 16px 20px; margin-bottom: 28px; }
.lss-disclaimer-title { font-size: 0.85em; font-weight: bold; color: #f0c040; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
.lss-disclaimer p { color: #8a9ab0; font-size: 0.85em; line-height: 1.65; margin: 0; }
.lss-cta { padding: 10px 0 6px; }
.lss-cta p { color: #7090b0; font-size: 0.95em; margin-bottom: 14px; }
.lss-cta .btn { min-width: 180px; padding: 12px 32px; font-size: 1.05em; float: none; display: inline-block; }
.lss-form-card { background: linear-gradient(145deg, #1e2230, #1a1e28); border: 1px solid rgba(80,200,255,0.15); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.lss-form-card textarea { background: rgba(0,0,0,0.2); color: #c8d8ea; border: 1px solid rgba(80,200,255,0.2); border-radius: 6px; padding: 10px; font-size: 0.95em; resize: vertical; }
.lss-form-card textarea[readonly] { opacity: 0.7; resize: none; }
.lss-form-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.lss-checkbox-label { cursor: pointer; color: #8a9ab0; font-size: 0.9em; }
.lss-model-cards { display: flex; gap: 8px; }
.lss-model-card { display: flex; flex-direction: column; align-items: center; padding: 8px 16px; border: 1px solid rgba(80,200,255,0.2); border-radius: 8px; cursor: pointer; transition: all 0.2s; background: rgba(80,200,255,0.03); min-width: 80px; }
.lss-model-card:hover { border-color: rgba(80,200,255,0.5); background: rgba(80,200,255,0.08); }
.lss-model-card.active { border-color: #5cc4fd; background: rgba(80,200,255,0.12); }
.lss-model-name { font-size: 0.88em; font-weight: 600; color: #a8c8e8; }
.lss-model-card.active .lss-model-name { color: #5cc4fd; }
.lss-model-cost { font-size: 0.75em; color: #607080; margin-top: 2px; }
.lss-model-card.active .lss-model-cost { color: #4a9abf; }
.lss-model-desc { font-size: 0.7em; color: #4a5a6a; margin-top: 4px; font-style: italic; }
.lss-model-card.active .lss-model-desc { color: #3a7a9f; }.lss-ask-row { margin-top: 14px; }
.lss-answer-div { display: none; margin-top: 14px; padding: 16px 20px; background: rgba(0,0,0,0.2); border: 1px solid rgba(80,200,255,0.12); border-radius: 6px; color: #c8d8ea; font-size: 1.05em; line-height: 1.7; }
.lss-answer-div h1, .lss-answer-div h2, .lss-answer-div h3 { color: #a8c8e8; margin: 0.8em 0 0.3em; }
.lss-answer-div h1 { font-size: 1.2em; }
.lss-answer-div h2 { font-size: 1.1em; }
.lss-answer-div h3 { font-size: 1em; }
.lss-answer-div p { margin: 0.4em 0; }
.lss-answer-div ul, .lss-answer-div ol { margin: 0.4em 0 0.4em 1.4em; padding: 0; }
.lss-answer-div li { margin-bottom: 0.2em; }
.lss-answer-div table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.lss-answer-div th { background: #1a4a6a; color: #c8d8ea; padding: 6px 10px; text-align: left; }
.lss-answer-div td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.lss-email-note { display: none; margin-top: 6px; font-size: 0.85em; color: #78909c; }
.lss-no-points { display: none; padding: 16px; background: rgba(255,200,80,0.07); border: 1px solid rgba(255,200,80,0.2); border-radius: 6px; margin-bottom: 12px; }
.lss-no-points p { margin: 0 0 12px 0; color: #c8a84b; font-size: 0.95em; }
.lss-sources { display: none; margin-top: 8px; margin-bottom: 12px; padding: 8px 12px; background: rgba(80,200,255,0.04); border: 1px solid rgba(80,200,255,0.1); border-radius: 4px; font-size: 0.8em; color: #607080; }
.lss-sources ul { margin: 4px 0 0 1.2em; padding: 0; }
.lss-sources li { margin-bottom: 2px; }
.lss-sources-label { display: block; font-size: 0.85em; font-weight: bold; color: #4a7090; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.lss-actions { display: none; margin-top: 10px; }
.lss-queue-info { display: none; font-size: 0.82em; color: #5cc4fd; opacity: 0.7; text-align: right; padding: 2px 10px; }
.lss-admin { margin-top: 40px; border-top: 1px solid rgba(80,200,255,0.15); padding-top: 20px; width: 100%; }
.lss-admin-title { font-size: 0.9em; font-weight: bold; color: #5cc4fd; margin-bottom: 12px; }
.lss-admin-actions { margin-top: 12px; }
.lss-req-controls { display: flex; align-items: center; gap: 8px; }
.lss-req-controls input[type='text'] { flex: 1; }
.lss-last-n { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.lss-last-n input[type='number'] { width: 60px; }
.lss-feedback-divider { margin: 12px 0; border-color: rgba(255,255,255,0.1); }
.indragen-text-ruta { padding: 10px 14px; background: rgba(0,0,0,0.25); border: 1px solid rgba(80,200,255,0.12); border-radius: 4px; white-space: pre-wrap; font-size: 0.9em; line-height: 1.6; }
.btn.qa-filter { background: transparent; border-color: rgba(80,200,255,0.3); color: #5cc4fd; }
.btn.qa-filter.active { background: linear-gradient(to bottom, #2a7aaa 0%, #1a5272 60%, #123d56 100%); border-color: rgba(80,200,255,0.5); color: #fff; }
.lss-admin-table { width: 100%; border-collapse: collapse; font-size: 0.82em; margin-top: 10px; table-layout: fixed; }
.lss-admin-table th { text-align: left; padding: 4px 8px; color: #b0bec5; border-bottom: 1px solid rgba(80,200,255,0.15); }
.lss-admin-table td { padding: 4px 8px; border-bottom: 1px solid rgba(80,200,255,0.07); vertical-align: top; word-break: break-word; }
.lss-admin-subtitle { display: flex; justify-content: space-between; align-items: center; font-size: 0.85em; font-weight: bold; color: #5cc4fd; margin-top: 20px; margin-bottom: 8px; }
.qa-card { border: 1px solid rgba(80,200,255,0.15); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; font-size: 0.88em; }
.qa-meta { margin: 8px 0 4px; }
.qa-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.qa-actions .table-input { flex: 1; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.8em; font-weight: bold; }
.status-pending { background: rgba(255,152,0,0.15); color: #ff9800; }
.status-approved { background: rgba(76,175,80,0.15); color: #4caf50; }
.status-rejected { background: rgba(244,67,54,0.15); color: #ef5350; }
.badge-draft { background: rgba(158,158,158,0.15); color: #9e9e9e; }
.badge-active { background: rgba(102,187,106,0.15); color: #66bb6a; }
.badge-closed { background: rgba(239,83,80,0.12); color: #ef5350; }
.nowrap { white-space: nowrap; }
.hidden { display: none; }
.event-hero { margin-bottom: 20px; }
.event-image { max-width: 100%; max-height: 320px; border-radius: 8px; margin-bottom: 16px; display: block; }
.event-image-preview img { max-width: 200px; max-height: 120px; border-radius: 6px; margin-top: 8px; display: block; margin-bottom: 8px; }
.event-closed-msg { margin-top: 12px; }
.event-login-cta { margin-top: 20px; padding: 16px; background: rgba(80,200,255,0.05); border-radius: 8px; text-align: center; }
.event-form { max-width: 560px; margin-top: 16px; }
.event-field { margin-bottom: 14px; }
.event-field input[type=text], .event-field input[type=number], .event-field input[type=date], .event-field select, .event-field textarea { width: 100%; box-sizing: border-box; }
.event-confirm { margin-top: 20px; padding: 20px; background: rgba(102,187,106,0.08); border: 1px solid rgba(102,187,106,0.3); border-radius: 8px; }
.event-confirm-title { font-size: 1.1em; font-weight: bold; color: #66bb6a; margin: 0 0 8px; }
.event-registrations-panel { margin-top: 16px; }
.invite-panel { margin: 12px 0; padding: 16px; background: rgba(80,200,255,0.04); border: 1px solid rgba(80,200,255,0.12); border-radius: 6px; }
.event-editor { margin-top: 20px; padding: 20px; background: rgba(80,200,255,0.04); border: 1px solid rgba(80,200,255,0.12); border-radius: 8px; overflow: hidden; }
.event-editor textarea { resize: vertical; max-width: 100%; }
.event-field-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.event-field-row .input { flex: 1; min-width: 80px; }
.event-field-row .ef-options { flex: 2; }
.ef-sort { display: flex; flex-direction: column; gap: 2px; }
.ef-sort .btn { min-width: 0; padding: 2px 6px; margin: 0; line-height: 1; font-size: 0.75em; }
.table-input { width: 100%; background: rgba(255,255,255,0.08); border: 1px solid rgba(80,200,255,0.2); color: inherit; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; box-sizing: border-box; }

h1, h2, h3 {
    color: #5cc4fd;
}

.hamburger-btn {
    display: none;
    background: none;
    border: none;
    color: #5cc4fd;
    font-size: 2em;
    cursor: pointer;
    padding: 4px 0 4px 16px;
    line-height: 1;
}

.btn {
    display: inline-block;
    min-width: 100px;
    padding: 8px 24px;
    margin: 8px 4px;
    background: linear-gradient(to bottom, #2a7aaa 0%, #1a5272 60%, #123d56 100%);
    color: #ffffff;
    border: 1px solid rgba(80,200,255,0.5);
    border-radius: 4px;
    font-weight: 700;
    font-family: system-ui;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.btn:hover {
    background: linear-gradient(to bottom, #3a8fbe 0%, #2a6a8a 60%, #1a4e6e 100%);
    border-color: rgba(80,200,255,0.8);
    color: #ffffff;
}

.btn.inverted {
    background: transparent;
    border: 1px solid rgba(80,200,255,0.5);
    color: #5cc4fd;
}

.btn.inverted:hover {
    background: rgba(80,200,255,0.08);
    border-color: rgba(80,200,255,0.8);
    color: #ffffff;
}

/* Home page (desktop layout) */
.home-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    color: #e5e6ea;
}

.home-hero {
    margin-bottom: 30px;
}

.home-hero h2 {
    font-size: 1.5em;
    color: #5cc4fd;
    margin-bottom: 8px;
}

.home-hero .home-subtitle {
    font-size: 1.1em;
    color: #a1bce0;
}

.home-section-title {
    font-size: 1.15em;
    color: #5cc4fd;
    margin-bottom: 16px;
    letter-spacing: 0.03em;
}

.home-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 28px;
}

.home-footer {
    color: #6b7a96;
    font-size: 0.88em;
    padding: 10px 0;
}

.home-back {
    color: #5cc4fd;
    cursor: pointer;
    font-size: 0.95em;
    margin-bottom: 16px;
    transition: opacity 0.2s;
}

.home-back:hover {
    opacity: 0.7;
}

.home-page h1 {
    font-size: 1.3em;
    color: #7dcbf5;
    margin-bottom: 16px;
    margin-left: 20px;
}

@media screen and (max-width: 1024px) {
    *, *::before, *::after {
        box-sizing: border-box;
    }
    body {
        overflow-x: hidden;
    }
    .computer-screen {
        top: 5px;
        left: 5px;
        border-radius: 18px;
    }
    .content_top {
        padding: 10px;
    }
    .email { width: 100%; max-width: 400px; }
    ._box { min-width: 0; width: 100%; }
    input.onelinerinputlong { min-width: 0; width: 100%; max-width: 420px; }
    .mw620 { min-width: 0; }
    .mw420 { min-width: 0; }
    .home-services {
        grid-template-columns: 1fr;
    }
    .eyes-container, .eyes-background {
        width: 100%;
        max-width: 1200px;
    }
    .eyes-background {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
}

.main-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 1200px) {
    .content_top .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
    }
    .content_top .w30 {
        width: auto;
        flex: 1;
    }
    #menu #menu_ebul_wrapper {
        display: none;
    }
    #menu.menu-open #menu_ebul_wrapper {
        display: block;
        position: absolute;
        top: 50px;
        right: 0;
        width: 200px;
        z-index: 1000;
        background: #161b26;
        border-top: 1px solid rgba(80,200,255,0.15);
        padding: 8px 0;
    }
    #menu.menu-open li.topitem {
        float: none;
        display: block;
        width: 100%;
    }
    #menu.menu-open .mnu_button {
        width: 100% !important;
        box-sizing: border-box;
        border-radius: 0;
        margin: 0;
    }
}

@media screen and (max-width: 768px) {
    .lss-hero { padding: 18px 16px; }
    .computer-screen {
        top: 0;
        left: 0;
        border: none;
        border-radius: 0;
        box-sizing: border-box;
        box-shadow: none;
    }
    .scrollable {
        height: auto;
        margin: 0;
    }
    .row {
        display: block;
    }
    .content_top {
        visibility: visible;
        padding: 0;
    }
    .content_bottom {
        visibility: hidden;
    }
    .logo {
        width: 110px;
        height: 81px;
        top: 8px;
        left: 8px;
    }
    .eye {
        width: 50px;
        height: 70px;
    }
    .pupil {
        width: 22px;
        height: 22px;
    }
    .lss-model-cards { width: 100%; }
    .lss-model-card { min-width: 0; flex: 1; padding: 6px 4px; font-size: 0.78em; }

}

.eyes-container {
    position: relative;
    width: 1200px;
    height: 200px;
    margin: 0 auto;
}

.eyes {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    column-gap: 20px;
    background-color: transparent;
    transition: background 1s linear, opacity 1s linear;
}

.eyes-background {
    position: relative;
    width: 1200px;
    height: 200px;
    top: -200px;
    margin: 0 auto;
}


.eye {
    width: 85px;
    height: 120px;
    border-radius: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pupil {
    width: 40px;
    height: 40px;
    border-radius: 101px;
    background-color: #000;
}

.btnCal {
    height: 15px;
    width: 16px;
    background-image: url(../../picture/calendar.png);
    background-repeat: no-repeat;
    cursor: pointer;
    margin-left: -9px;
    margin-right: 12px;
    margin-top: 3px;
}


/* The main calendar widget.  DIV containing a table. */

div.calendar { position: relative; }

.calendar, .calendar table {
  border: 1px solid #556;
  font-size: 11px;
  color: #000;
  cursor: default;
  background: #eef;
  font-family: tahoma,verdana,sans-serif;
}

/* Header part -- contains navigation buttons and day names. */

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  text-align: center;    /* They are the navigation buttons */
  padding: 2px;          /* Make the buttons seem like they're pressing */
}

.calendar .nav {
  background: #778 url("../../picture/calmenuarrow.gif") no-repeat 100% 100%;
}

.calendar thead .title { /* This holds the current "month, year" */
  font-weight: bold;      /* Pressing it will take you to the current date */
  text-align: center;
  background: #fff;
  color: #000;
  padding: 2px;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
  background: #778;
  color: #fff;
}

.calendar thead .daynames { /* Row <TR> containing the day names */
  background: #bdf;
}

.calendar thead .name { /* Cells <TD> containing the day names */
  border-bottom: 1px solid #556;
  padding: 2px;
  text-align: center;
  color: #000;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
  color: #a66;
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
  background-color: #aaf;
  color: #000;
  border: 1px solid #04f;
  padding: 1px;
}

.calendar thead .active { /* Active (pressed) buttons in header */
  background-color: #77c;
  padding: 2px 0px 0px 2px;
}

/* The body part -- contains all the days in month. */

.calendar tbody .day { /* Cells <TD> containing month days dates */
  width: 2em;
  color: #456;
  text-align: right;
  padding: 2px 4px 2px 2px;
}
.calendar tbody .day.othermonth {
  font-size: 80%;
  color: #bbb;
}
.calendar tbody .day.othermonth.oweekend {
  color: #fbb;
}

.calendar table .wn {
  padding: 2px 3px 2px 2px;
  border-right: 1px solid #000;
  background: #bdf;
}

.calendar tbody .rowhilite td {
  background: #def;
}

.calendar tbody .rowhilite td.wn {
  background: #eef;
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
  background: #def;
  padding: 1px 3px 1px 1px;
  border: 1px solid #bbb;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
  background: #cde;
  padding: 2px 2px 0px 2px;
}

.calendar tbody td.selected { /* Cell showing today date */
  font-weight: bold;
  border: 1px solid #000;
  padding: 1px 3px 1px 1px;
  background: #fff;
  color: #000;
}

.calendar tbody td.weekend { /* Cells showing weekend days */
  color: #a66;
}

.calendar tbody td.today { /* Cell showing selected date */
  font-weight: bold;
  color: #00f;
}

.calendar tbody .disabled { color: #999; }

.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  visibility: hidden;
}

.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  display: none;
}

/* The footer part -- status bar and "Close" button */

.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
  text-align: center;
  background: #556;
  color: #fff;
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  background: #fff;
  color: #445;
  border-top: 1px solid #556;
  padding: 1px;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
  background: #aaf;
  border: 1px solid #04f;
  color: #000;
  padding: 1px;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  background: #77c;
  padding: 2px 0px 0px 2px;
}

/* Combo boxes (menus that display months/years for direct selection) */

.calendar .combo {
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  width: 4em;
  cursor: default;
  border: 1px solid #655;
  background: #def;
  color: #000;
  font-size: 90%;
  z-index: 100;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
  text-align: center;
  padding: 1px;
}

.calendar .combo .label-IEfix {
  width: 4em;
}

.calendar .combo .hilite {
  background: #acf;
}

.calendar .combo .active {
  border-top: 1px solid #46a;
  border-bottom: 1px solid #46a;
  background: #eef;
  font-weight: bold;
}

.calendar td.time {
  border-top: 1px solid #000;
  padding: 1px 0px;
  text-align: center;
  background-color: #f4f0e8;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
  padding: 0px 3px 0px 4px;
  border: 1px solid #889;
  font-weight: bold;
  background-color: #fff;
}

.calendar td.time .ampm {
  text-align: center;
}

.calendar td.time .colon {
  padding: 0px 2px 0px 3px;
  font-weight: bold;
}

.calendar td.time span.hilite {
  border-color: #000;
  background-color: #667;
  color: #fff;
}

.calendar td.time span.active {
  border-color: #f00;
  background-color: #000;
  color: #0f0;
}

/* LSS brain animation */
.lss-status-row { display: flex; align-items: center; gap: 8px; }
.lss-flag-anim { display: none; font-size: 1.6em; line-height: 1; }
.lss-flag-anim::before { content: '🧠'; display: inline-block; animation: brainPulse 1.2s ease-in-out infinite; }
@keyframes brainPulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%       { transform: scale(1.25); opacity: 0.6; }
}

/* spinner while waiting */
.waiting-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: progress;
    backdrop-filter: blur(2px);
}
/* HTML: <div class="loader"></div> */
.loader {
  margin: auto;
  position: relative;
  top: 40%;
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25b09b;
  --_m:
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}

/* Login modal */
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:1000; display:flex; align-items:center; justify-content:center; }
.modal-box { background:#1a1e28; border:1px solid rgba(80,200,255,0.6); border-radius:12px; padding:32px; min-width:320px; max-width:420px; position:relative; color:#e3eaf3; box-shadow:0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2); }
.modal-box h3 { margin-bottom:16px; color:#5cc4fd; }
.modal-close { position:absolute; top:12px; right:16px; cursor:pointer; font-size:18px; color:#e3eaf3; }
.modal-close:hover { color:#fff; }
.modal-box.wide { max-width: 700px; }
.modal-box.wide .modal-content { max-height: 70vh; overflow-y: auto; }
.modal-content .lss-answer-div { display: block; }
.modal-box .input { background-color:#111418; border-color:#3a3f4d; }
.modal-box .input:-webkit-autofill,
.modal-box .input:-webkit-autofill:hover,
.modal-box .input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px #111418 inset; -webkit-text-fill-color:#e3eaf3; border-color:#3a3f4d; }
.modal-box .input:not(:placeholder-shown) + .placeholder, .modal-box .input:focus + .placeholder { background-color:#111418; }
.modal-box .input:focus { outline:none; border-color:rgba(80,200,255,0.6); }
.modal-box .placeholder { color:#3a9fc8; }
.login-msg-error { color:#f87171; margin-top:8px; min-height:1em; }
.login-msg-info { color:#e3eaf3; margin-bottom:12px; }
.login-gdpr { background:#12161f; border:1px solid #2a2f3d; border-radius:6px; padding:12px 14px; margin-bottom:12px; }
.login-gdpr-text { color:#a0aab8; font-size:0.85em; line-height:1.5; margin-bottom:8px; }
.login-gdpr-label { color:#e3eaf3; font-size:0.9em; cursor:pointer; }

/* Alertify dialog overrides for dark theme */
.alertify .ajs-dialog { background-color: #1a2534; color: #e0e8f0; border: 1px solid rgba(80,200,255,0.6); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2); }
.alertify .ajs-header { background-color: #151e2b; color: #e0e8f0; border-bottom: 1px solid rgba(80,200,255,0.15); }
.alertify .ajs-footer { background-color: #151e2b; border-top: 1px solid rgba(80,200,255,0.15); }
.alertify .ajs-body .ajs-content { color: #e0e8f0; }