/* ABCD Budokai Sverige theme
   Light palette: white/grey backgrounds, #226E93 blue accent, Lato font
   Standalone — no import from lokato
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

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%;
    margin: 0;
    padding: 0;
    border: 0;
    background: #e8ecf0;
    font-family: 'Lato', sans-serif;
    color: #212121;
    scrollbar-color: #226e93 #dce3ea;
    scrollbar-width: thin;
}

a:link {
    color: #226e93;
}

a {
    color: #226e93;
}

a:hover {
    color: #1a5270;
    text-decoration: underline;
}

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

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

input {
    margin-right: 10px;
    margin-bottom: 2px;
}

.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: #226e93;
    color: #fff;
    padding: 4px 0 6px 0;
}


.email {
    width: 400px;
}

._box {
    margin: auto;
    padding: 8px;
    border: #cccccc solid 1px;
    box-shadow: 0 2px 8px rgba(34,110,147,0.10);
    min-width: 600px;
    min-height: 100px;
    background-color: #ffffff;
    margin-bottom: 20px;
    transition: width 200ms, height 200ms;
}

._box_closed {
    margin: auto;
    padding: 8px;
    border: #cccccc solid 1px;
    box-shadow: 0 1px 4px rgba(34,110,147,0.08);
    background-color: #ffffff;
    margin-bottom: 20px;
    width: fit-content;
    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 {
    visibility: hidden;
    position: absolute;
    background: #ffffff;
    border: 2px solid #226e93;
    width: 50%;
    height: 50%;
    left: 25%;
}

.popup-overlay.active {
    visibility: visible;
    text-align: center;
}

.popup-content {
    visibility: hidden;
}

.popup-content.active {
    visibility: visible;
}

button {
    cursor: pointer;
}

.btn.green:hover { background: #2e7d32; border-color: #1b5e20; color: #ffffff; transition: background 500ms ease, border-color 500ms ease; }
.btn.red:hover { background: #c62828; border-color: #b71c1c; color: #ffffff; transition: background 500ms ease, border-color 500ms ease; }
.btn.blue:hover { background: #1565c0; border-color: #0d47a1; color: #ffffff; transition: background 500ms ease, border-color 500ms ease; }
.btn.grey:hover { background: #546e7a; border-color: #37474f; 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 200ms 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: #fff3cd;
}


.computer-screen {
    position: relative;
    top: 15px;
    left: 15px;
    border-radius: 36px;
    background: #ffffff;
    padding: 0px;
    box-sizing: border-box;
    box-shadow: 0 0 0 6px #226e93;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
}

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

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

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

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

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

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

.iphone-screen p {
    margin: 50px 0 0 0;
    text-align: justify;
    color: #212121;
    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;
    background-color: #f2f4f7;
    scrollbar-color: #226e93 transparent;
    scrollbar-width: thin;
}

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

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

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

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

.content_top {
    position: relative;
    padding: 20px;
    width: auto;
    display: block;
    color: #212121;
    margin-bottom: 10px;
    background: #ffffff;
    border-bottom: 1px solid #dce3ea;
}

.content {
    border-radius: 6px;
    color: #212121;
    float: left;
    margin: 0 10px 10px 0;
    padding: 10px;
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    background-color: transparent;
}

.content_center {
    border-radius: 6px;
    color: #212121;
    margin: 15px;
    padding: 5px;
    min-width: fit-content;
    background-color: #ffffff;
}

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

.wmax {
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
}

.w50px  { width: 50px; }
.w100px { width: 100px; }
.w200px { width: 200px; }
.w300px { width: 300px; }
.w400px { width: 400px; }
.w500px { width: 500px; }

.border1 {
    border: #cccccc solid thin;
}

.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: #ffffff;
    border-right: 1px solid #dce3ea;
    padding: 20px;
    z-index: 1;
}

.back_line {
    color: #226e93;
    font-size: large;
    font-weight: bold;
    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 #b0bec5;
    color: #212121;
    background-color: #ffffff;
}

.input:focus {
    outline: none;
    border-color: #226e93;
}

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

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

.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: #226e93;
    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: #226e93;
}

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

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

.menu_active {
    background-color: #1a5270;
}

.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: #546e7a;
    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: #226e93;
    font-weight: bold;
}

.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: #c62828 solid thin;
}

/* Shared section styles */
section {
    background: #ffffff;
    border-radius: 6px;
    padding: 20px 24px;
    margin-bottom: 20px;
    border: 1px solid #dce3ea;
    color: #212121;
    line-height: 1.7;
    box-shadow: 0 1px 4px rgba(34,110,147,0.07);
}

section h2 {
    font-size: 1.1em;
    color: #226e93;
    margin-bottom: 12px;
    letter-spacing: 0.03em;
    font-weight: 700;
}

section p, section ul, section li {
    color: #37474f;
    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: #226e93;
    text-decoration: none;
}

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

.service {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #ffffff;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid #dce3ea;
    box-shadow: 0 1px 4px rgba(34,110,147,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.service img {
    transition: transform 0.25s ease;
}

.service strong {
    transition: color 0.25s ease;
}

.service::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0;
    height: 3px;
    background: #226e93;
    border-radius: 3px;
    transition: width 0.3s ease, left 0.3s ease;
}

.service:hover {
    transform: translateY(-3px);
    border-color: #226e93;
    box-shadow: 0 4px 16px rgba(34,110,147,0.18);
}

.service:hover::after {
    width: 80%;
    left: 10%;
}

.service:hover img {
    transform: scale(1.05);
}

.service:hover strong {
    color: #226e93;
}

.service:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(34,110,147,0.12);
}

.service strong {
    display: block;
    color: #1a5270;
    font-size: 0.95em;
    margin-bottom: 6px;
    font-weight: 700;
}

.service p {
    color: #546e7a;
    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: #90a4ae;
    font-size: 0.88em;
    padding: 10px 0;
}

h1, h2, h3 {
    color: #226e93;
}

/* 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: #f0f7fb; border: 1px solid #226e93; border-radius: 6px; padding: 8px 14px; font-size: 0.9em; color: #226e93; white-space: nowrap; flex-shrink: 0; }
.lss-buy-popup-email { font-weight: 700; font-size: 1.1em; margin-top: 8px; }

/* Guest page */
.lss-hero { background: linear-gradient(135deg, #f0f7fb 0%, #e8f2f8 100%); border: 1px solid #c2dce8; border-radius: 10px; padding: 28px 32px; margin-bottom: 20px; }
.lss-hero-intro { font-size: 1.05em; color: #2d4a5a; 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(34,110,147,0.05); border-left: 3px solid #226e93; border-radius: 0 6px 6px 0; color: #2d4a5a; font-size: 0.95em; position: relative; }
.lss-features li::before { content: '→'; position: absolute; left: 12px; color: #226e93; font-weight: bold; }
.lss-disclaimer { background: #fffbee; border: 1px solid #d4a820; border-radius: 8px; padding: 16px 20px; margin-bottom: 28px; }
.lss-disclaimer-title { font-size: 0.85em; font-weight: bold; color: #a07800; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
.lss-disclaimer p { color: #6a7080; font-size: 0.85em; line-height: 1.65; margin: 0; }
.lss-cta { padding: 10px 0 6px; }
.lss-cta p { color: #546e7a; 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: #f7f9fb; border: 1px solid #c2d8e8; border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.lss-form-card textarea { background: #ffffff; color: #212121; border: 1px solid #b0bec5; border-radius: 6px; padding: 10px; font-size: 0.95em; resize: vertical; }
.lss-form-card textarea[readonly] { background: #f5f5f5; opacity: 0.8; 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: #37474f; 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 #b0c8d8; border-radius: 8px; cursor: pointer; transition: all 0.2s; background: #ffffff; min-width: 80px; }
.lss-model-card:hover { border-color: #226e93; background: #f0f7fb; }
.lss-model-card.active { border-color: #226e93; background: #e3eff6; }
.lss-model-name { font-size: 0.88em; font-weight: 600; color: #37474f; }
.lss-model-card.active .lss-model-name { color: #226e93; }
.lss-model-cost { font-size: 0.75em; color: #90a4ae; margin-top: 2px; }
.lss-model-card.active .lss-model-cost { color: #226e93; }
.lss-model-desc { font-size: 0.7em; color: #90a4ae; margin-top: 4px; font-style: italic; }
.lss-model-card.active .lss-model-desc { color: #226e93; }.lss-ask-row { margin-top: 14px; }
.lss-answer-div { display: none; margin-top: 14px; padding: 16px 20px; background: #f5f8fb; border: 1px solid #c2d8e8; border-radius: 6px; color: #212121; font-size: 1.05em; line-height: 1.7; }
.lss-answer-div h1, .lss-answer-div h2, .lss-answer-div h3 { color: #226e93; 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: #226e93; color: #fff; padding: 6px 10px; text-align: left; }
.lss-answer-div td { padding: 6px 10px; border-bottom: 1px solid #e0e0e0; }
.lss-email-note { display: none; margin-top: 6px; font-size: 0.85em; color: #78909c; }
.lss-no-points { display: none; padding: 16px; background: #fffbea; border: 1px solid #f6d860; border-radius: 6px; margin-bottom: 12px; }
.lss-no-points p { margin: 0 0 12px 0; color: #92660a; font-size: 0.95em; }
.lss-sources { display: none; margin-top: 8px; margin-bottom: 12px; padding: 8px 12px; background: #f5f8fb; border: 1px solid #c2d8e8; border-radius: 4px; font-size: 0.8em; color: #78909c; }
.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: #546e7a; 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: #226e93; opacity: 0.8; text-align: right; padding: 2px 10px; }
.lss-admin { margin-top: 40px; border-top: 1px solid #dde3ea; padding-top: 20px; width: 100%; }
.lss-admin-title { font-size: 0.9em; font-weight: bold; color: #226e93; 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: #dce3ea; }
.indragen-text-ruta { padding: 10px 14px; background: #f5f8fb; border: 1px solid #c2d8e8; border-radius: 4px; white-space: pre-wrap; font-size: 0.9em; line-height: 1.6; }
.btn.qa-filter { background: transparent; border-color: #226e93; color: #226e93; }
.btn.qa-filter.active { background: linear-gradient(to bottom, #2a7aaa 0%, #1a5272 60%, #123d56 100%); border-color: #226e93; 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 #dde3ea; }
.lss-admin-table td { padding: 4px 8px; border-bottom: 1px solid #f0f3f7; 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: #226e93; margin-top: 20px; margin-bottom: 8px; }
.qa-card { border: 1px solid #dde3ea; 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: #fff3e0; color: #e65100; }
.status-approved { background: #e8f5e9; color: #2e7d32; }
.status-rejected { background: #ffebee; color: #c62828; }
.badge-draft { background: #f5f5f5; color: #757575; }
.badge-active { background: #e8f5e9; color: #388e3c; }
.badge-closed { background: #ffebee; color: #c62828; }
.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: #f5f8fb; 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: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 8px; }
.event-confirm-title { font-size: 1.1em; font-weight: bold; color: #388e3c; margin: 0 0 8px; }
.event-registrations-panel { margin-top: 16px; }
.invite-panel { margin: 12px 0; padding: 16px; background: #f5f8fb; border: 1px solid #c2d8e8; border-radius: 6px; }
.event-editor { margin-top: 20px; padding: 20px; background: #f5f8fb; border: 1px solid #c2d8e8; 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: #f5f7fa; border: 1px solid #c5cdd8; color: inherit; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; box-sizing: border-box; }

.hamburger-btn {
    display: none;
    background: none;
    border: none;
    color: #226e93;
    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: #226e93;
    color: #ffffff;
    border: 1px solid #1a5270;
    border-radius: 4px;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
    cursor: pointer;
    letter-spacing: 0.03em;
}

.btn:hover {
    background: #1a5270;
    border-color: #144260;
    color: #ffffff;
    transition: background-color 200ms linear;
}

.btn.inverted {
    background: #ffffff;
    border: 1px solid #226e93;
    color: #226e93;
}

.btn.inverted:hover {
    background: #e8f2f8;
    color: #1a5270;
    transition: background-color 200ms linear;
}

/* Home page */
.home-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    color: #212121;
}

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

.home-hero h2 {
    font-size: 1.5em;
    color: #226e93;
    margin-bottom: 8px;
    font-weight: 300;
    letter-spacing: 0.5px;
}

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

.home-section-title {
    font-size: 1.1em;
    color: #226e93;
    margin-bottom: 16px;
    letter-spacing: 0.03em;
    font-weight: 700;
}

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

.home-footer {
    text-align: center;
    color: #90a4ae;
    font-size: 0.88em;
    padding: 10px 0;
}

.home-back {
    color: #226e93;
    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: #226e93;
    margin-bottom: 16px;
    margin-left: 20px;
    font-weight: 300;
}

@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: #ffffff;
        border-top: 1px solid #dde3ea;
        box-shadow: 0 4px 12px rgba(0,0,0,0.10);
        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;
    }
    .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: #226e93;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.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;
}

/* Calendar widget */

div.calendar { position: relative; }

.calendar, .calendar table {
    border: 1px solid #b0bec5;
    font-size: 11px;
    color: #212121;
    cursor: default;
    background: #f8f9fa;
    font-family: 'Lato', tahoma, verdana, sans-serif;
}

.calendar .button {
    text-align: center;
    padding: 2px;
}

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

.calendar thead .title {
    font-weight: bold;
    text-align: center;
    background: #fff;
    color: #212121;
    padding: 2px;
}

.calendar thead .headrow {
    background: #226e93;
    color: #fff;
}

.calendar thead .daynames {
    background: #e3eff6;
}

.calendar thead .name {
    border-bottom: 1px solid #b0bec5;
    padding: 2px;
    text-align: center;
    color: #212121;
}

.calendar thead .weekend {
    color: #c62828;
}

.calendar thead .hilite {
    background-color: #b3d4e8;
    color: #212121;
    border: 1px solid #226e93;
    padding: 1px;
}

.calendar thead .active {
    background-color: #1a5270;
    padding: 2px 0px 0px 2px;
}

.calendar tbody .day {
    width: 2em;
    color: #37474f;
    text-align: right;
    padding: 2px 4px 2px 2px;
}

.calendar tbody .day.othermonth {
    font-size: 80%;
    color: #b0bec5;
}

.calendar tbody .day.othermonth.oweekend {
    color: #ef9a9a;
}

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

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

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

.calendar tbody td.hilite {
    background: #b3d4e8;
    padding: 1px 3px 1px 1px;
    border: 1px solid #78b4d4;
}

.calendar tbody td.active {
    background: #cce0ed;
    padding: 2px 2px 0px 2px;
}

.calendar tbody td.selected {
    font-weight: bold;
    border: 1px solid #226e93;
    padding: 1px 3px 1px 1px;
    background: #fff;
    color: #226e93;
}

.calendar tbody td.weekend {
    color: #c62828;
}

.calendar tbody td.today {
    font-weight: bold;
    color: #226e93;
}

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

.calendar tbody .emptycell {
    visibility: hidden;
}

.calendar tbody .emptyrow {
    display: none;
}

.calendar tfoot .footrow {
    text-align: center;
    background: #226e93;
    color: #fff;
}

.calendar tfoot .ttip {
    background: #fff;
    color: #37474f;
    border-top: 1px solid #b0bec5;
    padding: 1px;
}

.calendar tfoot .hilite {
    background: #b3d4e8;
    border: 1px solid #226e93;
    color: #212121;
    padding: 1px;
}

.calendar tfoot .active {
    background: #1a5270;
    padding: 2px 0px 0px 2px;
}

.calendar .combo {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 4em;
    cursor: default;
    border: 1px solid #78b4d4;
    background: #e3eff6;
    color: #212121;
    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: #b3d4e8;
}

.calendar .combo .active {
    border-top: 1px solid #226e93;
    border-bottom: 1px solid #226e93;
    background: #e3eff6;
    font-weight: bold;
}

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

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
    padding: 0px 3px 0px 4px;
    border: 1px solid #78b4d4;
    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: #226e93;
    background-color: #226e93;
    color: #fff;
}

.calendar td.time span.active {
    border-color: #c62828;
    background-color: #212121;
    color: #e3eff6;
}

/* 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);
}

.loader {
    margin: auto;
    position: relative;
    top: 40%;
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #226e93;
    --_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.35); z-index:1000; display:flex; align-items:center; justify-content:center; }
.modal-box { background:#ffffff; border:1px solid #dce3ea; border-radius:6px; padding:32px; min-width:320px; max-width:420px; position:relative; color:#212121; box-shadow:0 8px 24px rgba(34,110,147,0.15); }
.modal-box h3 { margin-bottom:16px; color:#226e93; font-weight:300; letter-spacing:0.5px; }
.modal-close { position:absolute; top:12px; right:16px; cursor:pointer; font-size:18px; color:#546e7a; }
.modal-close:hover { color:#226e93; }
.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:#f8f9fa; border-color:#b0bec5; color:#212121; }
.modal-box .input:-webkit-autofill,
.modal-box .input:-webkit-autofill:hover,
.modal-box .input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px #f8f9fa inset; -webkit-text-fill-color:#212121; border-color:#b0bec5; }
.modal-box .input:not(:placeholder-shown) + .placeholder, .modal-box .input:focus + .placeholder { background-color:#f8f9fa; color:#226e93; }
.login-msg-error { color:#c62828; margin-top:8px; min-height:1em; }
.login-msg-info { color:#37474f; margin-bottom:12px; }
.login-gdpr { background:#f2f4f7; border:1px solid #dce3ea; border-radius:4px; padding:12px 14px; margin-bottom:12px; }
.login-gdpr-text { color:#546e7a; font-size:0.85em; line-height:1.5; margin-bottom:8px; }
.login-gdpr-label { color:#212121; font-size:0.9em; cursor:pointer; }

/* Balance bar */
.balance-bar { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 0.9em; color: #226e93; }
#balance-bar { padding: 4px 10px; border-style: solid; border-width: 1px; border-radius: 10px; border-color: #b0c8d8 #b0c8d8 #7aaabf #b0c8d8; background-color: #dce8f0; background-image: linear-gradient(to bottom, #f0f4f8 0%, #dce8f0 100%); background-size: 100% 100%; box-shadow: 0 0 2px 0 #226e93 inset; margin: 0 4px; }
#balance-bar .btn { background: rgba(255,255,255,0.75); color: #226e93; border-color: #7aaabf; margin: 0; }
#balance-bar .btn:hover { background: rgba(255,255,255,0.95); }

/* Menu — light mode overrides */

#menu_ebul_wrapper,
#menu_ebul_wrapper.centeritems {
    background-color: #dce8f0;
    background-image: linear-gradient(to bottom, #f0f4f8 0%, #dce8f0 100%);
    background-size: 100% 100%;
    border-color: #b0c8d8 #b0c8d8 #7aaabf #b0c8d8;
    box-shadow: 0 0 2px 0 #226e93 inset;
}

#menu_ebul_table li a,
#menu_ebul_table_burger li a {
    color: #1a5270;
}

/* arrows: recolor white PNG to dark blue */
#menu_ebul_table div.arrow,
#menu_ebul_table ul li a.with_arrow,
#menu_ebul_table_burger ul li a div.with_arrow {
    filter: sepia(1) saturate(5) hue-rotate(165deg) brightness(0.5);
}

/* dropdown submenu background — light blue instead of grey */
#menu_ebul_table ul,
#menu_ebul_table_burger ul {
    background: #eaf4fb;
    border-color: #b3d4e8;
}

/* hover/active/expanded text color */
#menu_ebul_table li:hover div.mnu_button a,
#menu_ebul_table li.expanded a.topitem,
#menu_ebul_table li.active a.topitem,
#menu_ebul_table li.itemhot a.topitem,
#menu_ebul_table li a:hover,
#menu_ebul_table_burger li:hover div.mnu_button a,
#menu_ebul_table_burger li.expanded a.topitem,
#menu_ebul_table_burger li.active a.topitem,
#menu_ebul_table_burger li.itemhot a.topitem,
#menu_ebul_table_burger li a:hover {
    color: #1a5270;
}

/* hover/active/expanded li background — covers the full item area */
#menu_ebul_table li:hover,
#menu_ebul_table li.expanded,
#menu_ebul_table li.active,
#menu_ebul_table li.itemhot,
#menu_ebul_table_burger li:hover,
#menu_ebul_table_burger li.expanded,
#menu_ebul_table_burger li.active,
#menu_ebul_table_burger li.itemhot {
    background-color: #c8dff0;
    border-radius: 3px;
}

/* mnu_button inner styling on hover */
#menu_ebul_table li.expanded div.mnu_button,
#menu_ebul_table li.active div.mnu_button,
#menu_ebul_table li.itemhot div.mnu_button,
#menu_ebul_table li:hover div.mnu_button,
#menu_ebul_table_burger li.expanded div.mnu_button,
#menu_ebul_table_burger li.active div.mnu_button,
#menu_ebul_table_burger li.itemhot div.mnu_button,
#menu_ebul_table_burger li div.mnu_button:hover {
    background-color: #c8dff0;
    box-shadow: 0 0 1px 0 #7aaabf, 0 0 3px -1px #b3d4e8 inset;
    border-color: #b3d4e8;
}

#menu_ebul_table li:hover div.gradient_button,
#menu_ebul_table li.expanded div.gradient_button,
#menu_ebul_table li.active div.gradient_button,
#menu_ebul_table li.itemhot div.gradient_button,
#menu_ebul_table_burger li div.gradient_button:hover,
#menu_ebul_table_burger li.expanded div.gradient_button,
#menu_ebul_table_burger li.active div.gradient_button,
#menu_ebul_table_burger li.itemhot div.gradient_button {
    background-image: linear-gradient(to bottom, #e8f4fb 0%, #c8dff0 50%, #aecde4 100%);
    background-color: transparent;
}

/* Alertify dialog overrides for light theme */
.alertify .ajs-dialog { border: 1px solid #dce3ea; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 24px rgba(34,110,147,0.15); }
.alertify .ajs-header { border-bottom: 1px solid #dce3ea; color: #226e93; }
.alertify .ajs-footer { border-top: 1px solid #dce3ea; }