:root {

    --viewport-height-mko: 90vh;

    /* Priority Colors */
    --priority-high: rgba(222, 33, 39, 1);
    --priority-medium: rgba(248, 104, 44, 1);
    --priority-normal: rgba(145, 175, 0, 1);
    --priority-low: rgba(144, 202, 249, 1);
    --priority-least: rgba(106, 102, 178, 1);
    
    --priority-high-light: rgba(250, 200, 200, 1);
    --priority-medium-light: rgb(255, 210, 180, 1);
    --priority-normal-light: rgba(233, 245, 210, 1);
    --priority-low-light: rgba(233, 244, 254, 1);
    --priority-least-light: rgba(225, 224, 240, 1);

    /* Brand Colors */
    --brand-color-1: #5fc4e5;
    --brand-color-2: #de2127;
    --brand-color-3: #6a66b2;
    --brand-color-4: #f3912d;

    --brand-text-color-1: #5555;
    --brand-text-color-3: #fff;
    --brand-text-color-4: #555;

    --text-color-kpi-fresh: #00aa00;
    --text-color-kpi-attention: var(--brand-color-4);
    --text-color-kpi-critical: var(--brand-color-2);
    --color-kpi-fresh: color-mix(in srgb, #00aa00 15%, transparent);
    --color-kpi-attention: color-mix(in srgb, var(--brand-color-4) 15%, transparent);
    --color-kpi-critical: color-mix(in srgb, var(--brand-color-2) 15%, transparent);

    /* Background Colors */
    --background-color: #dce2e2;
    --background-color-invert: rgba(255,255,255,0.60);
    --alternate-bg: #ccc;
    --page-background: #ffffff;
    --disc-bg: rgba(255, 255, 255, 0.75);
    --bg-color-info: #DDEFFF;
    --bg-color-warn: #FFF4CC;
    --bg-color-error: #FFE1E1;

    /* Border Colors */
    --border-color: rgba(0, 0, 0, 0.10);
    --border-color-light: rgba(0, 0, 0, 0.05);
    --border-color-dark: rgba(0, 0, 0, 0.15);
    --border-color-darkest: rgba(0, 0, 0, 0.30);
    --highlight-border-color: #dc3546;
    --default-border: 1px solid var(--border-color);
    --light-border: 1px solid var(--border-color-light);

    /* Text Colors */
    --text-color: #000;
    --text-color-invert: #efefef;
    --grayed-text-color: #777;
    --deemed-text-color: #aaa;
    --text-color-link: var(--brand-color-2);
    --section-header-text-color: var(--brand-color-2);

    --font-size-smallest: 0.80rem;
    --font-size-smaller: 0.87rem;
    --font-size-small: 0.94rem;
    --font-size-normal: 1.00rem;
    --font-size-large: 1.1rem;
    --font-size-larger: 1.2rem;
    --font-size-largest: 1.3rem;
    --font-size-extra-largest: 1.5rem;

    /* Highlight Colors */
    --highlight-bg: #de2127;
    --highlight-bg-text: #fff;
    --highlight-bg-dark: #cd3545;
    --highlight-bg-darker: #bc3545;
    --highlight-bg-light: #ff3545;
    --highlight-bg-text-color: var(--brand-color-2);

    /* Active Colors */
    --color-active-red: var(--brand-color-2);
    --color-active-green: #91C300;
    --color-active-blue: var(--brand-color-1);
    --color-active-purple: var(--brand-color-3);
    --color-active-orange: var(--brand-color-4);
    --color-active-yellow: #D4AF37;

    /* Habit Colors */
    --habit-performed-early: #0F5132;
    --habit-performed-on-time: #28A745;
    --habit-performed-late: #FD7E14;
    --habit-not-performed: #DC3545;
    --habit-not-due: #E9ECEF;

    /* Input Colors */
    --input-height: 36px;
    --input-bg: rgba(0, 0, 0, 0.05);
    --input-bg-hover: rgba(255, 255, 255, 0.30);
    --input-bg-focused: rgba(255, 255, 255, 0.90);
    --input-bg-form: rgba(219, 226, 226, 0.30);
    --input-bg-hover-form: rgba(219, 226, 226, 0.60);
    --input-bg-focused-form: rgba(219, 226, 226, 0.80);
    --folding-bg: var(--input-bg);

    /* Chip Colors */
    --chip-bg-color: rgba(0, 0, 0, 0.05);
    --chip-bg-color-form: var(--chip-bg-color);

    /* Hover Colors */
    --hover-bg-color: rgba(0, 0, 0, 0.05);
    --hover-bg-color-dark: rgba(0, 0, 0, 0.07);
    --hover-bg-color-light-surface: rgba(0, 0, 0, 0.05);

    /* Floating Button */
    --floating-button-bg: rgba(255, 255, 255, 0.60);
    --floating-button-bg-hover: rgba(255, 255, 255, 0.80);
    --floating-button-svg: #000;

    /* SVG Stroke */
    --svg-stroke: #000;
    --svg-stroke-light: #999;
    --highlight-svg-stroke: #de2127;

    /* Shade Back Colors */
    --shade-back-color: rgba(0, 0, 0, 0.07);
    --shade-back-color-light: rgba(0, 0, 0, 0.03);
    --shade-back-color-dark: rgba(0, 0, 0, 0.15);
    --shade-back-color-darkest: rgba(0, 0, 0, 0.20);
    
    --shade-back-color-rev: rgba(255, 255, 255, 0.50);
    --shade-back-color-rev-light: rgba(255, 255, 255, 0.35);
    --shade-back-color-rev-dark: rgba(255, 255, 255, 0.65);

    /* Button Back Colors */
    --button-back-color: rgba(0, 0, 0, 0.05);
    --button-back-color-light: rgba(0, 0, 0, 0.03);
    --button-back-color-dark: rgba(0, 0, 0, 0.10);

    /* Gradient Colors */
    --gc-top-left: #bcc4c4;
    --gc-bottom-right: #c5cfcf;
    --gc-center: #dce2e2;
    --gc-bottom-left: #e8ebeb;
    --gc-top-right: #f0f2f2;
    --default-gradient: radial-gradient(ellipse at top left, var(--gc-top-left) 0%, transparent 50%),
        radial-gradient(ellipse at top right, var(--gc-bottom-right) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, var(--gc-bottom-left) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, var(--gc-top-right) 0%, transparent 50%),
        var(--gc-center);

    --default-shadow: 0 4px 16px color-mix(in srgb, currentColor 8%, transparent), 0 0 0 1px color-mix(in srgb, currentColor 5%, transparent);

    /* Status Colors */
    --status-color-not-started: var(--text-color);
    --status-color-progress: var(--text-color);
    --status-color-followup: var(--text-color);
    --status-color-completed: var(--grayed-text-color);
    --status-color-cancelled: red;

    /* Icons */
    --icon-blank: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
    --icon-more-h: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2"><circle stroke="%235fc4e5" fill="%235fc4e5" cx="5" cy="12" r="1"></circle><circle stroke="%23de2127" fill="%23de2127" cx="12" cy="12" r="1"></circle><circle stroke="%236A66B2" fill="%236A66B2" cx="19" cy="12" r="1"></circle></svg>');
    --icon-not-started: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 13a7 7 0 1 0 14 0a7 7 0 0 0 -14 0z" /><path d="M14.5 10.5l-2.5 2.5" /><path d="M17 8l1 -1" /><path d="M14 3h-4" /></svg>');
    --icon-check: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12l5 5l10 -10" /></svg>');
    --icon-close: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
    --icon-attachment: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5" /></svg>');
    --icon-integrated: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="#de2127" d="M19 8.268a2 2 0 0 1 1 1.732v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h3" /><path d="M5 15.734a2 2 0 0 1 -1 -1.734v-8a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-3" /></svg>');

    /* Spacing - Margins */
    --tiny-margin: 3px;
    --small-margin: 5px;
    --default-margin: 10px;
    --large-margin: 20px;

    /* Spacing - Padding */
    --tiny-padding: 3px;
    --small-padding: 5px;
    --default-padding: 10px;
    --large-padding: 20px;

    /* Spacing - Gap */
    --tiny-gap: 5px;
    --small-gap: 5px;
    --default-gap: 10px;
    --large-gap: 20px;

    /* Spacing - Radius */
    --tiny-radius: 5px;
    --small-radius: 5px;
    /* --default-radius: 10px; */
    --default-radius: 5px;
    --large-radius: 25px;

    /* Cards */
    --cards-per-row: 3;

    /* Player - Brand Colors */
    --player-brand-cyan: #5fc4e5;
    --player-brand-red: #de2127;
    --player-brand-purple: #6A66B2;
    --player-brand-orange: #F3912D;

    /* Player - Background Colors */
    --player-bg: #000000;
    --player-overlay-dark: rgba(0, 0, 0, 0.8);
    --player-overlay-medium: rgba(0, 0, 0, 0.5);
    --player-overlay-light: rgba(0, 0, 0, 0.3);

    /* Player - Glass Effect */
    --player-glass-bg: rgba(0, 0, 0, 0.50);
    --player-glass-bg-hover: rgba(255, 255, 255, 0.12);
    --player-glass-border: rgba(255, 255, 255, 0.15);
    --player-glass-border-bright: rgba(255, 255, 255, 0.25);

    /* Player - Text Colors */
    --player-text-primary: #ffffff;
    --player-text-secondary: rgba(255, 255, 255, 0.7);
    --player-text-tertiary: rgba(255, 255, 255, 0.5);

    /* Player - Interactive States */
    --player-hover-bg: rgba(255, 255, 255, 0.15);
    --player-active-bg: rgba(95, 196, 229, 0.2);
    --player-accent-glow: rgba(95, 196, 229, 0.3);

    /* Player - Shadows */
    --player-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
    --player-shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.4);
    --player-shadow-glow: 0 0 20px rgba(95, 196, 229, 0.3);

    /* Player - Transitions */
    --player-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --player-transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --player-transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --player-transition-slide: 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Player - Border Radius */
    --player-radius-small: 8px;
    --player-radius-medium: 12px;
    --player-radius-large: 16px;
    --player-radius-full: 50%;

    /* Other */
    --bottom-nav-bottom-padding: 20px;
}

@media screen and (prefers-color-scheme:dark) {
    :root {
    --brand-color-1: #1f84a5;
    --brand-color-2: #871418;
    --brand-color-3: #3c3971;
    --brand-color-4: #a55809;

    
    --color-active-red: #960018;
    --color-active-orange: #f3912d;
    --color-active-green: #0a0;
    --color-active-blue: #5fc4e5;
    --color-active-purple: #6a66b2;
    --color-active-yellow: #D4AF37;

    --priority-high: rgba(180, 50, 55, 1);
    --priority-medium: rgba(200, 85, 40, 1);
    --priority-normal: rgba(120, 140, 30, 1);
    --priority-low: rgba(90, 140, 180, 1);
    --priority-least: rgba(85, 82, 140, 1);

    --priority-high-light: rgba(60, 25, 28, 1);
    --priority-medium-light: rgba(65, 35, 25, 1);
    --priority-normal-light: rgba(45, 50, 25, 1);
    --priority-low-light: rgba(30, 45, 60, 1);
    --priority-least-light: rgba(35, 33, 55, 1);

    --habit-performed-early: #07291a;
    --habit-performed-on-time: #175a26;
    --habit-performed-late: #91470b;
    --habit-not-performed: #7c2028;
    --habit-not-due: #85878b;

    --background-color: #000;
    --alternate-bg: #222;
    --background-color-light: #333;
    --background-color-dark: #000;
    --page-background: #333;
    --page-background-light: #444;
    --page-background-dark: #222;
    --border-color: #444;
    --border-color-light: #555;
    --border-color-dark: #333;
    --text-color: #ddd;
    --text-color-invert: #333;
    --grayed-text-color: #888;
    --deemed-text-color: #666;
    --text-color-link: var(--brand-color-2);
    --svg-stroke: #ddd;
    --svg-stroke-light: #888;
    --shade-back-color: rgba(255, 255, 255, 0.10);
    --shade-back-color-light: rgba(255, 255, 255, 0.15);
    --shade-back-color-dark: rgba(255, 255, 255, 0.05);
    --highlight-bg: #871418;
    --highlight-bg-text: #e5e5e5;
    --highlight-bg-light: #8c202a;
    --highlight-bg-dark: #731c25;
    --highlight-border-color: #871418;
    --disc-bg: rgba(255, 255, 255, 0.20);
    --input-height: 36px;
    --input-bg: #333;
    --input-bg-hover: #444;
    --input-bg-focused: #444;
    --input-bg-form: #333;
    --input-bg-hover-form: #444;
    --input-bg-focused-form: #444;
    --folding-bg: #222;
    --chip-bg-color: #444;
    --chip-bg-color-form: var(--background-color);
    --hover-bg-color: rgba(255, 255, 255, 0.10);
    --hover-bg-color-dark: rgba(0, 0, 0, 0.15);
    --hover-bg-color-light-surface: rgba(255, 255, 255, 0.20);
    --floating-button-bg: rgba(255, 255, 255, 0.60);
    --floating-button-bg-hover: rgba(255, 255, 255, 0.80);
    --floating-button-svg: #000;
    --highlight-bg-text-color: var(--brand-color-2);
    --section-header-text-color: var(--brand-color-2);
    --button-back-color: rgba(255, 255, 255, 0.05);
    --button-back-color-light: rgba(255, 255, 255, 0.10);
    --button-back-color-dark: rgba(255, 255, 255, 0.03);
    --bg-color-info: #000000;
    --bg-color-warn: #000000;
    --bg-color-error: #000000;
    --gc-top-left: #111;
    --gc-bottom-right: #111;
    --gc-center: #333;
    --gc-bottom-left: #222;
    --gc-top-right: #222;
    --default-gradient: radial-gradient(ellipse at top left, var(--gc-top-left) 0%, transparent 50%), radial-gradient(ellipse at top right, var(--gc-bottom-right) 0%, transparent 50%), radial-gradient(ellipse at bottom left, var(--gc-bottom-left) 0%, transparent 50%), radial-gradient(ellipse at bottom right, var(--gc-top-right) 0%, transparent 50%), var(--gc-center);
    }
}



@supports (padding:max(0px)) {
    .navbar-container:first-child {
        padding-top: max(5px, env(safe-area-inset-top))
    }

    .navbar-container:last-child {
        padding-bottom: max(5px, env(safe-area-inset-bottom))
    }

    .sidebar-container {
        padding-left: max(0px, env(safe-area-inset-left))
    }

    .content-container {
        padding-right: max(0px, env(safe-area-inset-right))
    }
}

@keyframes slideFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes slideFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slideFromRight {
    from {
        transform: translateX(100%);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes slideFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slideToLeft {
    from {
        transform: translateX(0);
        opacity: 1
    }

    to {
        transform: translateX(-100%);
        opacity: 0
    }
}

@keyframes slideToTop {
    from {
        transform: translateY(0);
        opacity: 1
    }

    to {
        transform: translateY(-100%);
        opacity: 0
    }
}

@keyframes slideToRight {
    from {
        transform: translateX(0);
        opacity: 1
    }

    to {
        transform: translateX(100%);
        opacity: 0
    }
}

@keyframes slideToBottom {
    from {
        transform: translateY(0);
        opacity: 1
    }

    to {
        transform: translateY(100%);
        opacity: 0
    }
}

@keyframes loader {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes pulse {
    0% {
        transform: scale(.8);
        opacity: .5
    }

    50% {
        transform: scale(1);
        opacity: 1
    }

    100% {
        transform: scale(.8);
        opacity: .5
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: .8;
        box-shadow: 0 0 20px var(--player-brand-cyan)
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 30px var(--player-brand-cyan)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

* {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    color: var(--text-color);
}

html {
    height: 100%;
    width: 100%;
    /* overscroll-behavior: none; */
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.75em;
    background: var(--default-gradient);
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    font-kerning: auto;
    /* overscroll-behavior: none; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: auto;
}

body.keyboard-open {
    overflow: hidden;
    touch-action: none;
}

:focus {
    outline: 0;
}

.selectable,
[contenteditable=true],
input,
textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100dvh;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.navbar-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 5px;
    min-height: 64px;
    width: 100%;
    padding: 5px;
    flex-shrink: 0;
}

.client-area {
    display: flex;
    flex: 1 1 0;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.sidebar-container {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: 250px;
    min-width: 200px;
    max-width: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* overscroll-behavior: contain; */
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1);
}

.content-container,
.view-area {
    display: flex;
    flex: 1 1 0;
    flex-direction: row;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* overscroll-behavior: contain; */
}

.content-container::-webkit-scrollbar,
.sidebar-container::-webkit-scrollbar {
    width: 8px;
}

.content-container::-webkit-scrollbar-track,
.sidebar-container::-webkit-scrollbar-track {
    background: 0 0;
}

.content-container::-webkit-scrollbar-thumb,
.sidebar-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    border-radius: 4px;
}

.content-container::-webkit-scrollbar-thumb:hover,
.sidebar-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .3);
}

.clickable {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.focusable:hover {
    background-color: var(--hover-bg-color);
}

.draggable {
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
}

div {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    width: 100%;
    /* overscroll-behavior: none; */
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.bg-drift {
    background: linear-gradient(90deg, #fefefe 0, #dce2e2 25%, #dce2e2 75%, #f8f9fa 100%);
    background-size: 300% 300%;
}

.mpt {
    padding-top: 150px !important;
}

body,
html {
    /* overscroll-behavior: none; */
    height: 100vh;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

svg .brand-color-1 {
    stroke: var(--brand-color-1);
}

svg .brand-color-2 {
    stroke: var(--brand-color-2);
}

svg .brand-color-3 {
    stroke: var(--brand-color-3);
}

svg .brand-color-4 {
    stroke: var(--brand-color-4);
}

a {
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--default-radius);
}

a:visited {
    color: var(--text-color-link) !important;
}

.active {
    background-color: var(--highlight-bg) !important;
    color: var(--highlight-bg-text) !important;
}

svg.active {
    background-color: transparent !important;
    stroke: var(--svg-stroke);
    stroke-width: 2px;
}

.pushed,
.selected {
    background-color: var(--hover-bg-color) !important;
}

p {
    width: 100%;
    margin: 0;
    text-align: left;
}

p.warrning {
    background-color: var(--brand-color-4);
    border-radius: var(--small-radius);
    padding: var(--small-padding) var(--default-padding);
    margin-bottom: var(--large-margin);
    font-weight: bold;
    text-align: center;
}

.inline-block {
    display: inline-block;
}

span.flex {
    display: flex !important;
}

h1,
h2,
h3,
h4 {
    width: 100%;
    margin: var(--default-margin) 0 0 0;
    padding: 0 10px;
}

.caption {
    display: inline-block;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.1rem;
    font-weight: 600;
}

.form-caption {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 3px 6px 3px 10px;
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-title {
    width: 100%;
    margin-top: var(--default-margin) 0;
    border-bottom: 1px solid var(--highlight-border-color);
    font-weight: 700 !important;
    font-size: 1.1rem;
}

img.round {
    border-radius: var(--default-radius) !important;
}

img.thumb {
    border-radius: var(--default-radius) !important;
    border: 1px solid var(--border-color);
    overflow: hidden;
    padding: var(--small-padding);
    width: 100px !important;
    height: 100px !important;
}

img.cover-photo {
    border-radius: var(--default-radius) !important;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

img.stamp {
    max-width: 60px;
    max-height: 60px;
    border-radius: var(--small-radius) !important;
    object-fit: cover;
}

img.aspect-1 {
    width: auto;
    height: auto;
    aspect-ratio: auto;
    object-fit: cover;
}

img.aspect-1-1 {
    width: auto;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

img.aspect-16-9 {
    width: auto;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
}

img.aspect-9-16 {
    width: auto;
    height: auto;
    aspect-ratio: 9/16;
    object-fit: cover;
}

img.flat {
    border-radius: 0 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

img.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    object-fit: contain !important;
    border-radius: 4px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

div.thumb-container {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 3px;
    overflow-y: auto;
    padding: var(--small-padding);
}

div.thumb {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: var(--default-radius);
    background-color: var(--page-background);
    overflow: hidden;
    margin: 0 5px 5px 0;
    border: 1px solid var(--border-color);
}

div.thumb>img {
    object-fit: cover !important;
}

div.thumb>.upload-progress,
div.thumb>a {
    position: absolute;
    padding: var(--small-padding);
    border-radius: var(--default-radius);
    top: 3px;
    right: 3px;
}

div.thumb>a:hover {
    background-color: var(--hover-bg-color);
}

div.thumb>.upload-progress {
    background-color: var(--page-background);
}

svg {
    fill: none;
    stroke: var(--svg-stroke);
    stroke-width: 1.25px;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-grow: 0;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 0 5px;
    transition: transform .3s ease;
}

svg.grayed { stroke: var(--grayed-text-color); }
svg.deemed { stroke: var(--deemed-text-color); }

svg.thick {
    stroke-width: 2px !important;
}

svg.larger {
    transform: scale(110%);
}

svg.checkbox {
    stroke: var(--highlight-border-color);
    stroke-width: 3px;
}

svg.flipped {
    transform: rotate(180deg);
}

svg.icon-x {
    fill: unset;
    stroke: var(--svg-stroke);
    stroke-width: 1.5px;
}

.auto-height {
    height: auto;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-no-grow {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

.flex-grow {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
}

span.flex-grow {
    display: inline-block;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
}

.flex-start {
    align-items: start !important;
    justify-content: start !important;
}

.flex-center {
    align-items: center !important;
    justify-content: center !important;
}

.flex-align-center {
    align-items: center !important;
}

.flex-justify-center {
    align-items: center !important;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-end {
    align-items: end !important;
    justify-content: end !important;
}

.flex-space-around {
    align-items: center !important;
    justify-content: space-around !important;
}

.show-on-mobile {
    display: none !important;
}

.hide-on-mobile {
    display: unset !important;
}

.visible {
    display: flex;
}

.invisible {
    display: none;
}

.hidden {
    display: none;
}

.all-border {
    border: 1px solid var(--border-color) !important;
}

.vert-border {
    border-top: 1px solid var(--border-color) !important;
}

.horz-border {
    border-left: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
}

.left-border {
    border-left: 1px solid !important;
}

.left-border-s {
    border-left: 1px solid var(--border-color);
}

.left-border-m {
    border-left: 2px solid var(--border-color);
}

.left-border-l {
    border-left: 3px solid var(--border-color);
}

.no-background {
    background-color: transparent !important;
}

.no-border {
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border: none;
}

.rounded-border-s {
    border-radius: var(--small-radius) !important;
}

.rounded-border-m {
    border-radius: var(--default-radius) !important;
}

.rounded-border-l {
    border-radius: var(--large-radius) !important;
}

.rounded-border-full {
    border-radius: 50% !important;
}

.no-rounded-border {
    border-radius: 0 !important;
}

.separator {
    height: 100% !important;
    border-bottom: 1px solid var(--border-color);
}

.divider-h {
    width: 100% !important;
    padding: 1px 0;
    border-bottom: 1px solid var(--border-color);
}

.normal {
    font-weight: 400 !important;
    color: inherit !important;
}

.bold {
    font-weight: 700 !important;
}

.no-bold {
    font-weight: 400 !important;
}

.italic {
    font-style: italic !important;
}

.v-margin {
    margin-top: var(--default-margin) !important;
    margin-bottom: var(--default-margin) !important;
}

.v-margin-xl {
    margin: 40px 0 !important;
}

.auto-width {
    width: auto;
}

.name {
    font-weight: 400;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snippet {
    margin: 0;
    text-align: left;
    color: var(--grayed-text-color) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25rem !important;
}

.description {
    margin: 0;
    text-align: left;
}

.snippet>svg {
    margin: 0;
    transform: scale(.75) translateY(10px);
}

.flat-item {
    border: none !important;
    border-radius: 0;
}

.top-shadow {
    box-shadow: 0 -8px 25px rgba(99, 102, 241, .12), 0 -4px 10px rgba(99, 102, 241, .08);
}

.bottom-right-shadow {
    box-shadow: 4px 4px 8px -2px rgba(0, 0, 0, .1), 12px 12px 24px -4px rgba(0, 0, 0, .08);
}

.right-shadow {
    box-shadow: 8px 0 25px rgba(99, 102, 241, .12), 4px 0 10px rgba(99, 102, 241, .08);
}

.bottom-left-shadow {
    box-shadow: -4px 4px 8px -2px rgba(0, 0, 0, .1), -12px 12px 24px -4px rgba(0, 0, 0, .08);
}

.left-shadow {
    box-shadow: -8px 0 25px rgba(99, 102, 241, .12), -4px 0 10px rgba(99, 102, 241, .08);
}

.center-shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06);
}

.bottom-highlight-border {
    border-bottom: 1px solid var(--highlight-border-color) !important;
}

.top-highlight-border {
    border-top: 1px solid var(--highlight-border-color);
}

.bottom-border,
td.bottom-border {
    border-bottom: 1px solid var(--border-color);
}

.top-border,
td.top-border {
    border-top: 1px solid var(--border-color) !important;
}

.no-scroll {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.v-scroll {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.h-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.all-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.icon {
    width: 24px;
    height: 24px;
}

.medium-icon {
    width: 36px;
    height: 36px;
}

.large-icon {
    width: 48px !important;
    height: 48px !important;
}

.round-icon {
    background-color: var(--shade-back-color-dark);
    padding: var(--small-padding);
    border-radius: 50%;
    width: 34px;
}

.small-icon {
    transform: scale(75%);
    display: inline-block;
}

.tiny-icon {
    transform: scale(75%);
    display: inline-block;
}

svg.small-icon{
    stroke-width: 2px;
}

.small-icon>*,
.tiny-icon>* {
    margin: 0;
}

.largest-icon {
    width: 96px !important;
    height: 96px !important;
}

.default-cursor {
    cursor: default !important;
}

.pointer-cursor {
    cursor: pointer;
}

.no-hover-effect:hover {
    background-color: transparent !important;
    cursor: default !important;
}

.font-color-highlight {
    color: var(--highlight-bg) !important;
}

.font-color-purple {
    color: var(--border-color-3) !important;
}

.small-label {
    width: 75px !important;
}

.default-label {
    width: 150px !important;
}

.no-hover-background:hover {
    background-color: transparent !important;
}

.rotatable {
    transition: transform .4s ease;
}

.rotatable.rotate00 {
    transform: rotate(0);
}

.rotatable.rotate45 {
    transform: rotate(45deg);
}

.rotatable.rotate90 {
    transform: rotate(90deg);
}

.placeholder {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
}

.togglable-panel {
    display: none;
}

svg.blank-item {
    stroke: var(--shade-back-color);
    transform: scale(500%);
}

div.blank-item {
    flex-shrink: 0;
    flex-grow: 0;
    width: 24px;
    height: 24px;
}

.min-height-s {
    min-height: 150px;
}

.height-s {
    min-height: 150px;
    max-height: 150px;
}

.min-height-m {
    min-height: 250px;
}

.min-height-l {
    min-height: 350px;
}

.min-height-48{ min-height: 48px !important; }
.min-height-96{ min-height: 96px !important; }

.default-font-size {
    font-size: 1rem !important;
}

.viewable-image {
    cursor: pointer;
}

.top-right-element {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
}

.single-line-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
}

.page-caption {
    font-size: 1.3rem !important;
    font-weight: bold;
    line-height: 1.3em;
}

.vert-scroll {
    overflow-y: auto;
}

.horz-scroll {
    overflow-x: auto;
}

.preview-area {
    min-height: 150px;
}

.no-background-color {
    background-color: transparent !important;
}

.logo {
    height: 36px !important;
    width: 36px !important;
}

::-webkit-input-placeholder {
    color: var(--grayed-text-color);
}

:-moz-placeholder {
    color: var(--grayed-text-color);
    opacity: 1;
}

::-moz-placeholder {
    color: var(--grayed-text-color);
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--grayed-text-color);
}

::-ms-input-placeholder {
    color: var(--grayed-text-color);
}

::placeholder {
    color: var(--grayed-text-color);
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .15);
}

.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 9900;
    display: flex;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
}

.navbar>.contents {
    padding: 10px 5px;
    display: flex;
    flex-direction: row !important;
    justify-content: space-around;
    align-items: center;
}

.navbar>.contents>a>.logo {
    width: 48px;
    transform: translateY(5px);
}

.main-side-bar {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 350px;
    min-width: 350px;
    max-width: 500px;
    height: 100vh;
    padding: 0;
    border-radius: 0;
}

.main-side-bar>.toolbar {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    padding: var(--small-padding);
    border-radius: 0;
    background-color: transparent;
}

.explorer-data-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    overflow: auto;
    height: 100%;
    width: 100%;
    padding: var(--small-padding) var(--default-padding);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    background: var(--page-background);
}

.round-left-top {
    border-top-left-radius: 25px !important;
}

.round-left-top-m {
    border-top-left-radius: var(--default-radius) !important;
}

.round-right-top-m {
    border-top-right-radius: var(--default-radius) !important;
}

.round-left-bottom-m {
    border-bottom-left-radius: var(--default-radius) !important;
}

.round-right-bottom-m {
    border-bottom-right-radius: var(--default-radius) !important;
}

.round-top-m {
    border-top-left-radius: var(--default-radius) !important;
    border-top-right-radius: var(--default-radius) !important;
}

.data-container {
    align-items: start;
    justify-content: center;
    gap: 0;
    flex-grow: 0;
    flex-shrink: 0;
    height: auto;
    width: 100%;
    background-color: transparent;
}

.inline-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5px;
    flex-grow: 0;
    flex-shrink: 0;
    background-color: transparent;
}

.dataload-overlayer {
    position: absolute;
    display: none;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background-color: transparent;
}

.element-label,
label {
    font-weight: 500;
    width: 100%;
    padding: 0 var(--small-padding);
    margin-bottom: var(--small-margin);
}

.list-item-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    width: 100%;
    padding: var(--default-padding) var(--small-padding);
    border-radius: var(--default-radius);
    position: relative;
    border: none;
    background: transparent;
    cursor: pointer;
}

.list-item-container * {
    color: var(--text-color);
}

.list-item-container:hover {
    background-color: var(--hover-bg-color);
}

.list-item-container .snippet {
    font-size: .9rem;
}

.flat-list-item-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    width: 100%;
    gap: 0;
    border-radius: 0;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    padding: var(--small-padding);
}

.flat-list-item-container:first-child {
    border-top-left-radius: var(--default-radius);
    border-top-right-radius: var(--default-radius);
}

.flat-list-item-container:last-child {
    border-bottom-left-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
    border-bottom: none;
}

.flat-list-item-container:hover {
    background-color: var(--hover-bg-color);
}

.form-section .flat-list-item-container:hover {
    background-color: var(--hover-bg-color) !important;
}

.flat-list-item-container.selected::before {
    /* content: "🗸";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px;

    display: flex;
    align-items: center;
    justify-content: center;
    
    font-weight: bold;
    font-size: 1.1rem !important;
    color: var(--grayed-text-color);

    background-color: var(--page-background);
    width: 32px;
    border-radius: 50%;
    height: 32px; */

    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 5px;
    height: 100%;
    background-color: var(--highlight-bg);
}

.list-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: var(--small-gap);
    padding: var(--small-padding);
    border-radius: 0;
}

.list-item-tb-button {
    border-radius: var(--small-radius);
}

.list-item-tb-button:hover {
    background-color: var(--hover-bg-color);
}

.list-item-tb-button>svg {
    transform: translateY(5px);
    stroke-width: 1;
}

.list-item-tb-button:hover>svg {
    stroke: var(--svg-stroke);
}

.drop-down {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: var(--small-gap);
    padding: var(--small-padding);
    border-radius: 0;
    cursor: pointer;
}

.drop-down>span.caption,
.drop-down>span.value {
    display: inline-block;
    width: 100%;
}

.drop-down>span.value {
    display: inline-block;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
}

.drop-down>.dropdown-content {
    display: none;
    position: absolute;
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    background-color: var(--page-background);
}

.drop-down>.dropdown-content>.dropdown-item {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    padding: 10px;
    cursor: pointer;
}

.drop-down>.dropdown-content>.dropdown-item:last-child {
    border-bottom: none;
}

.drop-down>.dropdown-content>.dropdown-item:hover {
    background-color: var(--hover-bg-color);
}

.acm-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: var(--large-margin);
}

.acm-toolbar>.tb-button {
    flex-direction: column;
}

.acm-toolbar>a {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    margin-right: var(--small-margin);
    border: none;
}

.acm-toolbar>a:active {
    background-color: var(--shade-back-color-light);
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: start !important;
    align-items: center !important;
    position: relative;
    height: auto;
    overflow: hidden;
    border-radius: var(--default-radius);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.card>input[type=checkbox],
.list>input[type=checkbox],
.masonry>input[type=checkbox] {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;
}

.card>.coverphoto {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    border-radius: var(--small-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: var(--page-background);
}

.card>.property,
.masonry>.property {
    justify-content: start;
    align-items: start;
    width: 100%;
    height: auto;
    flex-grow: 1;
    flex-shrink: 1;
    padding: var(--small-padding);
}

.card>.property>.title,
.list>.property>.title,
.masonry>.property>.title {
    flex-direction: row;
    width: 100%;
    height: auto !important;
    padding: 0 var(--small-padding);
    margin-top: var(--small-margin);
}

.card>.property>.title>span,
.list>.property>.title>span,
.masonry>.property>.title>span {
    display: inline-block;
    flex-grow: 1;
    flex-shrink: 1;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card>.property>.snippet,
.list>.property>.snippet,
.masonry>.property>.snippet {
    display: inline-block;
    margin-top: 0;
    color: var(--text-color) !important;
    padding: 0 var(--small-padding);
    overflow: hidden;
}

.card>.property>.tags,
.list>.property>.tags,
.masonry>.property>.tags {
    flex-direction: row;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    width: 100%;
    height: auto !important;
    max-height: 75px;
    overflow-y: hidden;
    margin-top: 0;
    padding: 0 var(--small-padding);
    display: none;
}

.card>.property>div.info-bar,
.list>.property>div.info-bar,
.masonry>.property>div.info-bar {
    flex-direction: row;
    justify-content: start;
    align-items: center;
    width: 100%;
    height: auto !important;
    margin-top: 0;
    padding: var(--small-padding);
    display: none;
}

.list {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: var(--small-gap);
    width: 100%;
    padding: var(--small-gap);
    border-radius: 0;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.list>.coverphoto {
    width: 100px;
    border-radius: var(--default-radius);
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 0;
}

.list>.property {
    justify-content: start;
    align-items: start;
    width: 100px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 200;
}

.masonry {
    display: flex;
    flex-direction: column;
    justify-content: start !important;
    align-items: center !important;
    position: relative;
    overflow: hidden;
    border-radius: var(--small-radius);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.masonry>.coverphoto {
    width: 100%;
    border-radius: var(--small-radius);
    position: relative;
    overflow: hidden;
}

.card:hover,
.list:hover,
.masonry:hover {
    background-color: var(--hover-bg-color);
}

.h-card {
    background-color: var(--page-background);
    padding: var(--small-gap);
    border: 1px solid var(--border-color);
    margin-top: var(--default-margin);
}

.asset-list {
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: var(--default-gap);
}

.asset-list>img {
    width: 64px;
    height: auto;
}

.asset-list>.summary>.caption {
    font-weight: bold;
}

.slide-from-left {
    animation: slideFromLeft .5s forwards;
}

.slide-from-top {
    animation: slideFromTop .5s forwards;
}

.slide-from-right {
    animation: slideFromRight .5s forwards;
}

.slide-from-bottom {
    animation: slideFromBottom .5s forwards;
}

.slide-to-left {
    animation: slideToLeft .5s forwards;
}

.slide-to-top {
    animation: slideToTop .5s forwards;
}

.slide-to-right {
    animation: slideToRight .5s forwards;
}

.slide-to-bottom {
    animation: slideToBottom .5s forwards;
}

.image-viewer,
.modal-background,
.popup-overlay {
    position: fixed;
    display: none;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9901;
    background-color: rgba(0, 0, 0, .1);
    border-radius: 0;
}

.image-viewer {
    z-index: 13000;
    background-color: rgba(0, 0, 0, .5);
    padding: var(--large-padding);
    align-items: center;
    justify-content: center;
}

.image-viewer>img {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

.image-viewer>.tb-button:hover {
    background-color: rgba(255, 255, 255, .3) !important;
}

form {
    padding: 0;
}

.datepicker {
    width: auto !important;
}

.datepicker span.active.day,
.datepicker span.active.month,
.datepicker span.active.year,
.datepicker td.active.day,
.datepicker td.active.month,
.datepicker td.active.year {
    background-color: var(--highlight-bg) !important;
    color: var(--highlight-bg-text) !important;
    border-radius: var(--small-radius);
}

.control-container {
    align-items: center;
    justify-content: center;
}

.control-container-h {
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    padding: var(--small-padding);
}

.control-container-h>span.name {
    display: inline-block;
    width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
}

.generic-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    overflow-y: auto;
    background-color: transparent;
}

.hv-panel-xy {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    overflow-y: auto;
    background-color: transparent;
}

.foldable-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100% !important;
}

.foldable-container:last-child {
    border-bottom: none;
}

.foldable-container>.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    border-radius: 0;
    padding: var(--small-padding);
}

.foldable-container>.header>h2 {
    margin: 0;
    padding: var(--small-gap);
}

.foldable-container>.foldable>p {
    margin: var(--small-margin) !important;
}

.foldable-container>.floating {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 12000;
    background: var(--page-background);
    border: 1px solid var(--border-color);
    padding: var(--default-padding);
}

.search-container {
    flex-direction: row;
    justify-content: start;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0;
    border-bottom: 1px solid var(--border-color);
}

.form-section-container {
    margin-top: var(--large-margin);
}

.form-section-container:first-child {
    margin-top: 0 !important;
}

.form-section-container>.caption {
    font-size: 1.1rem !important;
    font-weight: bold;
    display: inline-block;
    width: 100%;
    max-height: 350px;
    padding-left: var(--default-padding) !important;
}

.form-section {
    border-radius: var(--default-radius);
    background-color: var(--page-background);
    /* padding: var(--default-padding); */
    margin-bottom: var(--large-margin);
    border: 1px solid var(--border-color);
    overflow-y: auto;
}

.form-section>.object-area {
    padding: 0;
}

.jconfirm .jconfirm-box {
    width: auto !important;
    max-width: 90% !important;
    min-width: 300px !important;
    background-color: var(--page-background);
}

.jconfirm .jconfirm-holder {
    max-height: 400px;
    padding: 50px 0;
    max-width: 700px;
    margin: auto;
}

.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button,
.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button {
    text-transform: none;
    padding: 10px 35px;
    border-radius: var(--large-radius);
    background-color: var(--highlight-bg) !important;
    color: var(--highlight-bg-text) !important;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {
    font-weight: 400;
    padding-bottom: 0 !important;
    transform: translateY(-12px) !important;
}

.jconfirm.jconfirm-light .jconfirm-box,
.jconfirm.jconfirm-white .jconfirm-box {
    box-shadow: 0 30px 40px 10px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 30px 40px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 30px 40px 10px rgba(0, 0, 0, .2);
}

.jconfirm .jconfirm-box div.jconfirm-closeIcon {
    top: 15px;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane {
    padding: 15px 0;
}

.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons,
.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons {
    justify-content: center;
    flex-direction: row;
}

.message-box-content {
    max-height: 175px;
    max-width: 550px;
    padding-right: 10px;
}

.busyback {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

.busyback .content {
    padding: 20px;
    border-radius: var(--default-radius);
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

.busyback .content img {
    height: 32px;
    width: 32px;
    margin-right: 15px;
}

.busyback .content span {
    display: inline-block;
    transform: translateY(-4px);
    letter-spacing: 3px;
    font-size: 1.3rem;
}

.loader-container {
    flex-direction: row;
    padding: 10px 25px;
    border-radius: 15px;
    width: auto;
    background-color: rgba(255, 255, 255, .05);
    z-index: 1;
}

.loader-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: pulse 1.5s ease-in-out infinite;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
}

.loader-circle:before {
    content: "";
    display: block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    animation: loader 1.2s linear infinite;
    border: 8px solid #dd2027;
    border-color: #dd2027 transparent #dd2027 transparent;
}

.loader-text {
    width: auto;
    margin-top: 15px;
    color: #dd2027;
}

.h-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.h-panel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.h-panel>* {
    flex-grow: 0;
    flex-shrink: 0;
}

.h-panel>.main-element {
    flex-grow: 1;
    flex-shrink: 1;
}

.v-panel {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.v-panel>.main-element {
    flex-grow: 1;
    flex-shrink: 1;
}

.h-panel>span.main-element,
.v-panel>span.main-element {
    display: inline-block;
}

.spacer {
    display: inline-block;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
}

.search-result-container {
    padding: 0;
    overflow-y: auto;
    min-height: 0;
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
    background-color: transparent;
}

.search-result-container>.item-container {
    width: 100%;
    padding: 0 !important;
}

.search-result-container>.item-container>.item {
    border-radius: var(--small-radius);
    color: var(--text-color) !important;
}

.search-result-container>.item-container>.item:hover {
    background-color: var(--hover-bg-color);
}

.object-list>.body>.chips-container {
    padding: 0;
}

.result-load-indicator {
    padding: var(--large-padding);
    display: flex;
}

.chips-container {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    justify-content: start;
    padding: var(--small-padding);
    margin-top: var(--small-margin);
    border-top: 1px solid var(--highlight-border-color);
    min-height: 200px;
    max-height: 350px;
}

.chips-container>h2 {
    margin: 0 !important;
    padding: var(--small-padding) !important;
}

.chips-container>.chips {
    flex-direction: row;
    flex-wrap: wrap;
    margin: var(--small-margin) 0;
    overflow-y: auto;
}

.chip {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: var(--small-gap);
    padding: 5px 10px;
    margin: 5px;
    background-color: var(--chip-bg-color);
    border-radius: 25px;
    width: auto;
    max-width: 420px;
    max-height: 40px;
    overflow: hidden;
}

.av-container .chip,
.form-section .chip {
    background-color: var(--chip-bg-color-form);
}

.chip>img.icon {
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-grow: 0;
    flex-shrink: 0;
    width: 24px !important;
    height: 24px !important;
}

.chip>.name {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    font-weight: 400 !important;
    padding: var(--default-padding);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip>.info-byte {
    background-color: var(--shade-back-color);
    padding: 0 10px;
    border-radius: var(--small-radius);
    text-align: center;
}

.chip>.chip-closer {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 1.3rem !important;
    color: var(--svg-stroke) !important;
    padding: var(--default-padding);
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    cursor: pointer;
    border-left: 2px solid var(--border-color);
}

.toolbar-container {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    background-color: transparent;
}

.toolbar-container>* {
    flex-grow: 0;
    flex-shrink: 0;
}

.toolbar-container>.caption {
    flex-grow: 1;
    flex-shrink: 1;
}

.toolbar-container>svg {
    margin: 0 var(--small-margin) 0 0;
    transform: translateY(3px);
}

.toolbar {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    flex-wrap: wrap !important;
    gap: var(--small-gap) !important;
    width: 100%;
    background-color: transparent;
    position: relative;
}

.toolbar-section {
    flex-direction: row;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100px;
}

.toolbar-button-group {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    width: auto;
    padding: 3px;
    border-radius: var(--small-radius);
    background-color: var(--shade-back-color-light);
}

.flat-button {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: start;
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    margin-right: var(--small-margin);
    background-color: var(--input-bg);
    height: var(--input-height);
}

.flat-button:hover {
    background-color: var(--input-bg-hover);
}

.flat-button:active {
    background-color: var(--input-bg-focused);
}

.flat-button:last-child {
    margin-right: 0;
}

.form-section .flat-button {
    background-color: var(--input-bg-form);
}

.form-section .flat-button:hover {
    background-color: var(--input-bg-hover-form);
}

.form-section .flat-button:active {
    background-color: var(--input-bg-focused-form);
}

.tree-container {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-x: auto;
    overflow-y: auto;
    flex-grow: 1;
    flex-shrink: 1;
    gap: 0;
    padding: var(--small-gap) 0;
    padding-bottom: 30px;
}

.tree-container>.tree-nodes-container {
    margin-top: 5px;
}

.tree-nodes-container {
    padding: 0;
}

.tree-nodes-container>.tree-node {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: var(--small-gap);
    width: 100%;
    height: var(--input-height);
    padding: 5px;
    margin-top: 5px;
    border-bottom: 1px solid var(--border-color-light);
    cursor: pointer;
}

.tree-nodes-container>.tree-node:hover {
    background-color: var(--hover-bg-color);
}

.tree-nodes-container>.tree-nodes-child-container {
    padding-left: var(--large-padding);
    display: none;
}

.tree-nodes-container>.tree-nodes-child-container>.tree-node {
    background-color: var(--hover-bg-color);
}

.tree-nodes-container>.tree-node>.arrow {
    margin: 0 !important;
}

.tree-nodes-container>.tree-node>.icon {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0;
    width: 20px !important;
    height: 20px !important;
}

.tree-nodes-container>.tree-node>.name {
    display: inline-block;
    flex-grow: 1;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-nodes-container>.tree-node>input[type=checkbox] {
    display: none;
}

/* .tree-nodes-container>.tree-node>.cm-trigger {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 var(--default-padding);
    border-radius: var(--small-radius);
    height: 100%;
}

.tree-nodes-container>.tree-node>.cm-trigger>svg {
    stroke: var(--svg-stroke-light);
} */

.tree-nodes-container>.tree-node:hover svg {
    stroke: var(--svg-stroke);
}

.tree-nodes-container>.tree-node>.cm-trigger>* {
    transform: translateY(3px);
}

.tree-nodes-container>.tree-node>.cm-trigger:hover {
    background-color: var(--hover-bg-color);
}

.node-placeholder {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0;
    width: 24px !important;
    height: 24px !important;
}

.info-byte {
    text-align: right;
    padding-right: var(--small-padding);
    font-size: .8rem !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    height: var(--input-height);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100px;
    width: auto;
}

.input-form {
    max-width: 450px;
    background-color: var(--page-background);
    border: var(--default-gap);
    overflow: hidden;
}

.file-container {
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 200px;
}

.file-container>input[type=file] {
    display: none;
}

.file-container>.file-loader {
    display: flex;
    padding: 15px 20px;
    align-self: center;
    justify-self: center;
    margin: 15px 0;
}

.file-container>.file-summary {
    align-items: start;
    justify-content: start;
    border-radius: var(--default-radius);
    padding: var(--small-padding);
    min-height: 150px;
    width: 100%;
    display: none;
}

.file-container>.file-summary>.header {
    border-top-left-radius: var(--default-radius);
    border-top-right-radius: var(--default-radius);
}

.file-container>.file-summary>.summary {
    justify-content: start;
    align-items: start;
    height: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    padding: var(--small-padding);
    overflow: auto;
    border-bottom-left-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
}

.file-container>.file-summary>.summary>table {
    width: 100%;
    border-collapse: collapse;
}

.file-container>.file-summary td {
    font-size: .9rem !important;
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.summary {
    width: 100%;
    border-collapse: collapse;
}

table.summary td {
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.summary tr:last-child td {
    border-bottom: none;
}

.editor-form {
    gap: 0 !important;
}

.editor-form>.header {
    margin-bottom: 0;
}

.editor-form>.body {
    height: unset;
    flex: 1;
    overflow-y: auto;
    gap: var(--small-gap);
    padding: 0;
}

.preview {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.tnch.select {
    background-color: var(--hover-bg-color);
}

.image-handler-container {
    justify-content: start;
    max-width: 400px;
    gap: 0;
    border-radius: var(--small-radius) !important;
    border: 1px solid var(--border-color);
    background-color: var(--page-background);
    overflow: hidden;
    padding: var(--default-padding);
}

.image-handler-container>.header {
    border-top-left-radius: var(--small-radius) !important;
    border-top-right-radius: var(--small-radius) !important;
}

.image-handler-container>.header>span {
    padding: 0 !important;
}

.image-handler-container>.tabs {
    flex-grow: 0;
    flex-shrink: 0;
    gap: 0;
    width: 100%;
    height: auto;
    margin-top: var(--default-margin);
}

.image-handler-container>.tabs>.tab {
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 100px;
    padding: var(--small-padding);
    border-radius: 0;
    border-top-left-radius: var(--small-radius);
    border-top-right-radius: var(--small-radius);
    background-color: var(--hover-bg-color);
}

.image-handler-container>.images-container {
    display: none;
    gap: var(--small-gap);
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 5px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-bottom-left-radius: var(--small-radius);
    border-bottom-right-radius: var(--small-radius);
    border-top-right-radius: var(--small-radius);
}

.image-handler-container>.cropper-container {
    width: 100%;
    min-height: 200px;
    overflow: hidden;
    padding: var(--default-padding);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: var(--small-radius);
    border-bottom-right-radius: var(--small-radius);
    border-top-right-radius: var(--small-radius);
}

.image-handler-container>.cropper-container>.img-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100px !important;
    height: 100px !important;
    background-color: var(--hover-bg-color);
    overflow: hidden;
}

.image-handler-container>.cropper-container>.img-card>span {
    display: block;
    width: 100%;
    color: #dd2027;
}

.multi-line-input-form {
    gap: 0 !important;
    max-height: 350px;
}

.single-line-input-form>.body>input[type=text] {
    width: 100%;
    margin: 0;
}

.multi-line-input-form>.footer,
.single-line-input-form>.footer {
    margin: 0 !important;
}

.control-row {
    padding: var(--large-padding) var(--default-padding);
    border-bottom: 1px solid var(--border-color);
}

.control-row:last-child {
    border-bottom: none;
}

.object-area {
    padding: var(--small-padding);
}

.object-area>.button {
    display: flex;
    padding: 30px;
    align-self: center;
    justify-self: center;
    margin: 30px 0;
}

.object-area>.object-container {
    flex-direction: row;
    flex-wrap: wrap;
    padding: var(--small-padding);
}

.object-area .default-button:hover,
.object-area .tb-button:hover {
    background-color: var(--shade-back-color) !important;
}

.object-area .action-button:hover {
    background-color: var(--highlight-bg-dark) !important;
}

.edit-comm>svg {
    stroke: var(--shade-back-color-dark);
}

.edit-comm:hover>svg,
.edit-comm>svg:hover {
    stroke: var(--svg-stroke);
}

.overlay-button {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto;
    height: auto;
    padding: var(--default-padding) var(--small-padding);
    border-radius: var(--default-radius);
    opacity: .75;
    position: absolute;
}

.overlay-button>svg {
    stroke: rgba(0, 0, 0, 0.3);
}

.overlay-button:focus,
.overlay-button:hover {
    background-color: var(--shade-back-color-dark);
    opacity: 1;
}

.overlay-button:focus>svg,
.overlay-button:hover>svg {
    stroke: var(--svg-stroke);
}

.ob-top-left {
    left: 5px;
    top: 5px;
}

.ob-top-right {
    right: 5px;
    top: 5px;
}

.ob-bottom-left {
    left: 5px;
    bottom: 5px;
}

.ob-bottom-right {
    right: 5px;
    bottom: 5px;
}

.modal-underlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 0;
}

.leftSide {
    overflow: hidden;
}

.splitter {
    background-color: var(--hover-bg-color);
}

.splitter:hover {
    background-color: var(--shade-back-color-dark);
}

.explorer {
    position: relative;
    background-color: var(--hover-bg-color);
}

.explorer-side-bar {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.dragover-background {
    background-color: var(--hover-bg-color);
}

.dragover-image-container {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: var(--small-gap);
    max-width: 300px;
    height: var(--input-height);
    overflow: hidden;
    border-radius: var(--small-radius);
    top: -9999px;
    left: -9999px;
    background-color: var(--page-background);
    box-shadow: 15px 15px 30px 1px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 15px 15px 30px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow: 15px 15px 30px 1px rgba(0, 0, 0, .2);
}

.dragover-image-container>.dragover-image {
    max-width: 30px !important;
    max-height: 30px !important;
    object-fit: contain;
    border-radius: 0;
    padding: var(--small-padding);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.body-container {
    padding: var(--small-padding);
    flex-grow: 1;
    flex-shrink: 1;
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.form-container {
    min-height: 0;
    flex-basis: auto;
    padding: var(--small-padding);
    flex-grow: 1;
    flex-shrink: 1;
}

.icon-container {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--large-gap);
    width: 100%;
    overflow-y: auto;
}

.icon-container>.dataviewer-item {
    flex-direction: row !important;
    width: auto !important;
    height: auto !important;
    padding: var(--default-padding) !important;
    border-radius: var(--default-radius);
}

.icon-container>.dataviewer-item:hover {
    background-color: var(--hover-bg-color);
}

.icon-selector-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--default-padding);
    justify-items: center;
    align-items: center;
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    max-height: 100%;
    overflow-y: auto;
}

.icon-thumb {
    display: inline-block;
    width: 64px !important;
    height: 64px !important;
    padding: var(--default-padding) !important;
    cursor: pointer;
    border-radius: var(--default-radius);
    background-color: var(--shade-back-color);
}

.icon-thumb:hover {
    filter: brightness(.8);
}

.icon-thumb>* {
    display: inline-block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}

span.icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: auto !important;
    margin-right: var(--small-margin) !important;
}

.form-section .combobox-container {
    background-color: var(--input-bg-form);
}

.form-section .combobox-container:hover {
    background-color: var(--input-bg-hover-form);
}

.combobox-container {
    background-color: var(--input-bg);
    height: var(--input-height);
    padding: var(--small-padding);
    border-radius: var(--small-radius);
}

.combobox-dropdown {
    max-width: unset;
    height: auto !important;
    max-height: 450px;
    box-shadow: 5px 20px 20px 1px rgba(0, 0, 0, .2) !important;
    -webkit-box-shadow: 5px 20px 20px 1px rgba(0, 0, 0, .2) !important;
    -moz-box-shadow: 5px 20px 20px 1px rgba(0, 0, 0, .2) !important;
}

.combobox-dropdown>.body {
    padding: 0 !important;
}

.combobox-dropdown>.body>div>label {
    padding: var(--small-padding);
}

.combobox-dropdown>.body>div>label>input[type=text] {
    width: 100px;
}

.radio-button-container {
    padding: var(--small-gap);
    background-color: transparent;
    border-radius: var(--default-radius);
}

.radio-button-container>span {
    font-weight: bold;
    display: inline-block;
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    border-top-left-radius: var(--small-radius);
    border-top-right-radius: var(--small-radius);
    padding: var(--small-padding);
    border-bottom: 1px solid var(--border-color);
}

.default-checkbox,
.default-radiobutton {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--default-gap);
    width: 100%;
    color: var(--svg-stroke) !important;
    padding: var(--small-padding);
    border-bottom: 1px solid var(--border-color);
    font-weight: 400;
    cursor: pointer;
}

.default-checkbox:hover,
.default-radiobutton:hover {
    background-color: var(--hover-bg-color);
}

.default-checkbox:last-child,
.default-radiobutton:last-child {
    border-bottom: none;
}

.default-radiobutton:first-child {
    border-top-left-radius: var(--default-radius);
    border-top-right-radius: var(--default-radius);
}

.default-radiobutton:last-child {
    border-bottom-left-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
}

input[type=checkbox],
input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    outline: 0;
    cursor: pointer;
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    border: 1.75px solid var(--svg-stroke);
    background-color: var(--checkbox-bg-color);
}

input[type=checkbox]:checked::before,
input[type=radio]:checked::before {
    content: "\2713";
    font-weight: 700 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -45%);
    color: var(--brand-color-2);
}

input[type=checkbox]:checked,
input[type=radio]:checked {
    background-color: var(--checkbox-bg-color);
    border: 1.75px solid var(--svg-stroke);
}

label:has(input:disabled),
input[type=checkbox]:disabled,
input[type=radio]:disabled {
    /* background-color: var(--checkbox-bg-color);
    border: 1.75px solid var(--svg-stroke-light); */

    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* label:has(input:disabled) {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
} */


.list-check:before {
    content: "\2713";
    color: var(--shade-back-color-dark);
    font-size: 1.2rem !important;
}

.list-check,
.list-check:checked,
.list-check:disabled {
    border: none !important;
    background-color: transparent !important;
}

.list-check:checked::before {
    font-size: 1.2rem !important;
}

.cmtoast-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .15);
    display: none;
}

.cmtoast {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: var(--default-gap);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 600px;
    height: auto;
    max-width: 90%;
    max-height: 450px;
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    background-color: var(--background-color);
    box-shadow: 0 -5px 20px 10px rgba(0, 0, 0, .23);
    z-index: 20000;
    border: 1px solid var(--border-color);
}

.cmtoast>.title {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    overflow-y: hidden;
    padding: var(--small-padding);
    padding-bottom: 15px;
    border-top-left-radius: var(--default-radius);
    border-top-right-radius: var(--default-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid var(--border-color);
}

.cmtoast>.title>svg {
    font-size: 1.2rem !important;
    width: 100px;
    display: inline-block;
    padding-left: var(--small-padding);
    flex-grow: 1;
    flex-shrink: 1;
}

.cmtoast>.title>span {
    font-size: 1.2rem !important;
    font-weight: 500;
    width: 100px;
    display: inline-block;
    padding-left: var(--small-padding);
    flex-grow: 1;
    flex-shrink: 1;
}

.cmtoast.success>.title {
    border-bottom: 1px solid var(--color-active-green);
}

.cmtoast.error>.title {
    border-bottom: 1px solid var(--color-active-red);
}

.cmtoast.warrning>.title {
    border-bottom: 1px solid var(--color-active-orange);
}

.cmtoast>p {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 30px var(--default-padding);
    padding-top: 0;
    margin: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
}

.module-ui {
    border: 1px solid var(--border-color);
}

.upload-icon {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.activity-indicator {
    border: 3px solid var(--border-color);
    border-radius: 50%;
    border-top: 3px solid var(--border-color);
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

.empty-content-message {
    align-self: center;
    justify-self: center;
    width: 100%;
    text-align: center;
    margin: 40px 0;
}

.empty-content-message>h2,
.empty-content-message>p {
    margin: 0;
    width: 100%;
    text-align: center;
}

.contact-field-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: var(--small-gap);
    padding: var(--small-padding);
    margin-top: var(--default-margin);
    border-bottom: 1px solid var(--border-color);
}

.contact-field-container:first-child {
    margin-top: 0;
}

.contact-field-container:last-child {
    border-bottom: none;
}

.contact-field-container>label {
    width: 120px;
    flex-grow: 0;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    border-bottom: none;
}

.contact-field-container>input[type=text] {
    width: 200px;
    height: 100%;
    flex-grow: 1;
    flex-shrink: 1;
}

.create-contact-container {
    margin-top: 30px;
    background-color: var(--page-background);
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    border: 1px solid var(--border-color);
}

.create-contact-container>span {
    display: inline-block;
    flex-grow: 1;
    flex-shrink: 1;
    height: 100%;
    width: 100%;
    padding-left: var(--small-padding);
}

.oddapy-user {
    border-left: 3px solid var(--highlight-border-color);
}

.not-oddapy-user {
    border-left: 3px solid var(--border-color);
}

.section-summary {
    text-align: left;
    color: var(--grayed-text-color) !important;
    margin-top: 0;
    margin-bottom: 10px;
    padding: 0 10px;
}

.section-summary>svg {
    transform: scale(90%) translateY(7px);
    margin: 0;
    stroke: var(--grayed-text-color);
}

.datepicker.dropdown-menu {
    min-width: 340px !important;
}

.datepicker table {
    width: 100% !important;
}

.datepicker td,
.datepicker th {
    font-size: 1.2rem !important;
}

.evenly-dist-controls>* {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
}

.popup-window {
    width: 340px;
    height: 600px;
    background-color: #faebd7;
    border-radius: var(--default-radius);
    border: 1px solid var(--border-color);
    padding: var(--default-padding);
    box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
}

.module-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--large-gap);
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 950px;
    padding: 35px 15px;
    border: none;
}

.module-button {
    width: 200px;
    height: 130px;
    padding: 30px 50px;
}

.module-button:hover {
    background-color: var(--hover-bg-color);
}

.module-button:active {
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
}

.module-button>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--large-gap);
}

.module-button:active>div {
    transform: translateY(3px) translateX(3px);
}

.module-button>div>.icon {
    align-items: center;
    justify-content: center;
    padding: 5px;
    width: 48px !important;
    height: 48px !important;
}

.app-name {
    display: inline-block;
    margin-left: var(--default-margin);
    font-size: 1.2rem;
    font-weight: bold;
}

svg.menu-angle {
    stroke: var(--shade-back-color-dark);
    margin: 0 !important;
}

.search-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0;
    padding: 1px;
    overflow: hidden;
    min-height: 36px;
}

.toolbar>.search-bar {
    max-width: 250px;
}

.search-bar>form>input[type=search] {
    flex-grow: 1;
    flex-shrink: 1;
}

.search-bar>button,
.search-bar>form>button {
    display: flex;
    flex-flow: row;
    flex-grow: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 10px;
    background-color: transparent;
    margin-right: 0;
    border: none;
    cursor: pointer;
}

.mi-selection-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0;
    padding: 1px;
    overflow: hidden;
    width: 100%;
    max-width: 500px;
    min-height: 36px;
}

.form-icon-container {
    display: flex;
}

.tablet {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: var(--small-gap);
    padding: 3px;
    padding-right: 10px;
    margin: 0 5px 5px 0;
    border-radius: var(--small-radius);
    width: auto;
    max-width: 420px;
    overflow: hidden;
}

span.tablet {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: var(--small-gap);
    padding: 3px;
    padding-right: 10px;
    margin: 0 5px 5px 0;
    border-radius: var(--small-radius);
    width: auto;
    max-width: 420px;
    overflow: hidden;
    background-color: var(--shade-back-color);
}

.tablet>svg {
    background-color: var(--shade-back-color-light) !important;
    padding: var(--small-padding);
    width: 34px !important;
    height: 34px !important;
    border-radius: var(--small-radius);
    margin: 0 !important;
}

.tablet>.span {
    font-weight: 400 !important;
    display: inline-block;
    margin-right: var(--small-margin);
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tablet.status-not-started {
    background-color: #6a5acd !important;
}

.tablet.status-not-started>svg {
    stroke: var(--highlight-bg-text) !important;
}

.tablet.status-not-started>span {
    color: var(--highlight-bg-text) !important;
}

.tablet.status-progress {
    background-color: #ffb300 !important;
}

.tablet.status-progress>svg {
    stroke: var(--highlight-bg-text) !important;
}

.tablet.status-progress>span {
    color: var(--highlight-bg-text) !important;
}

.tablet.status-followup {
    background-color: teal !important;
}

.tablet.status-followup>svg {
    stroke: var(--highlight-bg-text) !important;
}

.tablet.status-followup>span {
    color: var(--highlight-bg-text) !important;
}

.tablet.status-completed {
    background-color: #50c878 !important;
}

.tablet.status-completed>svg {
    stroke: var(--highlight-bg-text) !important;
}

.tablet.status-completed>span {
    color: var(--highlight-bg-text) !important;
}

.tablet.status-cancelled {
    background-color: #dc143c !important;
}

.tablet.status-cancelled>svg {
    stroke: var(--highlight-bg-text) !important;
}

.tablet.status-cancelled>span {
    color: var(--highlight-bg-text) !important;
}

.capsul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding: var(--small-padding) var(--large-padding);
    border-radius: var(--large-radius);
    margin: 0 var(--small-margin);
    color: var(--text-color-link) !important;
    background-color: var(--shade-back-color-dark);
    cursor: pointer;
}

.capsul>img,
.capsul>svg {
    width: 16px !important;
    height: 16px !important;
}

.capsul>span {
    display: inline-block;
    margin-left: var(--small-gap);
}

.app-profile-container,
.profile-container {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    width: 100%;
    max-width: 450px;
    height: auto;
    position: relative;
    border-radius: var(--default-radius);
    background-color: transparent;
}

.app-profile-container {
    background-color: var(--page-background) !important;
    border-radius: 0 !important;
}

.app-profile-container>.profile-picture,
.profile-container>.profile-picture {
    border-radius: 50% !important;
    width: 150px !important;
    height: 150px !important;
    border: 5px solid var(--hover-bg-color);
}

.app-profile-container>.logo,
.profile-container>.logo {
    border-radius: 0 !important;
    width: 100px !important;
    height: 100px !important;
    border: none !important;
}

.app-profile-container>.email,
.app-profile-container>.name,
.app-profile-container>.sub-title,
.app-profile-container>.title,
.profile-container>.email,
.profile-container>.name,
.profile-container>.sub-title,
.profile-container>.title {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-weight: 700 !important;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.app-profile-container>.name {
    font-size: 1.3rem;
}

.app-profile-container>.email,
.app-profile-container>.sub-title,
.profile-container>.email,
.profile-container>.sub-title {
    font-weight: 400 !important;
}

.rounded-list-items:first-child {
    border-top-left-radius: var(--default-radius) !important;
    border-top-right-radius: var(--default-radius) !important;
}

.rounded-list-items:last-child {
    border-bottom-left-radius: var(--default-radius) !important;
    border-bottom-right-radius: var(--default-radius) !important;
}

.sub-form-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    width: 100%;
    border-bottom: 1px solid var(--highlight-border-color);
    padding: var(--small-padding) var(--default-padding);
}

.sub-form-title>svg {
    transform: scale(130%);
}

.form-cover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: var(--default-margin);
    width: 100%;
    height: auto;
    position: relative;
    border-radius: 0;
    background-color: transparent;
}

.form-cover>.img-container {
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    max-height: 100px;
    margin-bottom: var(--default-margin);
}

.form-cover>.img-container>.tb-button {
    position: absolute;
    right: 25%;
    bottom: 10px;
    border-radius: 50%;
    padding: var(--default-padding) var(--small-padding);
    z-index: 1;
}

.form-cover>.img-container>img {
    border-radius: 50% !important;
    width: 100px !important;
    height: 100px !important;
    background-color: var(--shade-back-color);
    border: 5px solid var(--border-color);
    /*           */
}

.form-cover>span {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.form-cover>span.title {
    font-weight: bold;
    font-size: 1.5rem;
    margin: var(--default-margin) 0 0 0;
}

p.ticket-detail {
    padding: var(--small-padding);
    margin: 0;
    border-bottom: 1px solid var(--border-color);
}

p.ticket-detail:last-child {
    border: none;
}

.document-viewer,
.gallary-form,
.rf-editor-form {
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    border: none !important;
}

.gallary-form {
    background-color: var(--background-color) !important;
}

.gallary-form>.header,
.rf-editor-form>.header {
    border-radius: 0 !important;
    border: none !important;
}

.gallary-form>.body,
.rf-editor-form>body {
    padding: 0;
    border-top: none !important;
    background-color: var(--page-background);
}

.gallary-container {
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    bottom: 0;
    background-color: var(--background-color);
    display: none;
    padding: 0;
    border-radius: 0;
    border: none;
    overflow-y: auto;
}

.iv-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    background-color: rgba(0, 0, 0, .85);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.iv-container>.iv-left-arrow,
.iv-container>.iv-right-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100px !important;
    border-radius: 0;
    background-color: transparent;
}

.iv-left-arrow:hover,
.iv-right-arrow:hover {
    background-color: rgba(255, 255, 255, .1);
}

.iv-left-arrow>svg,
.iv-right-arrow>svg {
    stroke: #555 !important;
}

.iv-close-button {
    position: absolute;
    top: var(--default-margin);
    right: var(--default-margin);
}

.floating-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    height: 80px;
    width: 80px;
    border-radius: 0;
}

.gallary-floating-button {
    background-color: var(--highlight-bg) !important;
}

.gallary-floating-button:hover {
    background-color: var(--highlight-bg-dark) !important;
}

.gallary-floating-button>svg {
    stroke: var(--highlight-bg-text) !important;
}

.floating-button.bottom-right {
    bottom: 0;
    right: 0;
    border-radius: 0;
    border-top-left-radius: var(--default-padding);
}

.floating-button.bottom-left {
    bottom: 0;
    left: 0;
    border-radius: 0;
    border-top-right-radius: var(--default-padding);
}

.floating-button.top-left {
    top: 0;
    left: 0;
    border-radius: 0;
    border-bottom-right-radius: var(--default-padding);
}

.floating-button.top-right {
    top: 0;
    right: 0;
    border-radius: 0;
    border-bottom-left-radius: var(--default-padding);
}

.floating-button.middle-right {
    top: 0;
    right: 0;
    border-radius: 0;
    border-bottom-left-radius: var(--default-padding);
}

.absolute-top-left {
    position: absolute;
    top: 0;
    left: 0;
}

.absolute-top-right {
    position: absolute;
    top: 0;
    right: 0;
}

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

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

.glass-effect {
    background-color: rgba(255, 255, 255, .3) !important;
    box-shadow: 0 4px 30px #000 !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.dark-glass-effect {
    background-color: rgba(0, 0, 0, .5) !important;
    box-shadow: 0 4px 30px #000 !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.glass-effect-2 {
    background-color: rgba(255, 255, 255, .4) !important;
    box-shadow: 0 4px 4px #000 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.gallary-form>.body>.av-document-viewer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.gallary-form>.body>.av-document-viewer>iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #000;
}

.av-container {
    padding: var(--large-padding) !important;
    align-items: center !important;
}

.av-container>.asset-header {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
}

.av-container>.asset-header>.profile-thumb {
    border-radius: var(--default-radius) !important;
    overflow: hidden !important;
    padding: 0;
    width: 100px !important;
    height: auto;
    border: 1px solid var(--border-color);
}

.av-container>.av-asset-detail {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    max-width: 1000px;
}

.av-container .tb-button:hover {
    background-color: var(--shade-back-color);
}

.floating-toolbar {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
}

.av-list-container>.av-list,
.av-list-container>.av-list-header {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 5px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.av-list-container>.av-list-header {
    cursor: default;
}

.av-list-container>.av-list:last-child {
    border-bottom: none;
    border-bottom-left-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
}

.av-list-container>.av-list:first-child {
    border-top-left-radius: var(--default-radius);
    border-top-right-radius: var(--default-radius);
}

.av-list-container>.av-list:hover {
    background-color: var(--hover-bg-color);
}

.av-list-container>.av-list-header>span,
.av-list-container>.av-list>span {
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding: 3px 5px;
}

.av-list-container>.av-list-header>.av-name,
.av-list-container>.av-list>.av-name {
    width: 200px !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
}

.av-list-container>.av-list-header>.av-controls,
.av-list-container>.av-list>.av-controls {
    width: auto;
    flex-direction: row;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

table.av-list {
    width: 100%;
    border-collapse: collapse;
}

table.av-list>tbody>tr {
    height: 48px;
}

table.av-list>tbody>tr>td,
table.av-list>thead>tr>th {
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    height: 48px;
}

table.av-list>tbody>tr,
table.av-list>thead>tr {
    height: 48px;
}

table.av-list>tbody>tr:hover {
    background-color: var(--shade-back-color) !important;
    cursor: pointer;
}

table.av-list>tbody>tr>td.itemname {
    padding-left: 10px;
}

table.av-list>tbody>tr>td {
    padding: 0 5px;
}

table.av-list>tbody>tr>td.price,
table.av-list>tbody>tr>td.quantity,
table.av-list>thead>tr>th.price,
table.av-list>thead>tr>th.quantity {
    text-align: right !important;
}

table.av-list>tbody>tr>td.controls {
    padding-right: 10px;
    width: 48px;
}

.av-task-container {
    background-color: var(--page-background);
    border-radius: var(--small-radius);
    padding: var(--default-padding) var(--small-padding);
}

.asset-viewer-section-header {
    padding: var(--small-padding) !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--highlight-border-color) !important;
}

.asset-viewer-section-header>a>span {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    transform: translateY(5px);
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
}

.asset-viewer-section-header>.caption {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    transform: translateY(5px);
}

.asset-viewer-section-header>.tb-button {
    background-color: transparent !important;
    padding: var(--small-padding) var(--default-padding);
}

.asset-viewer-section-header>.tb-button:hover {
    background-color: var(--shade-back-color) !important;
}

.h-text-data {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    max-width: 500px;
    width: 100%;
    padding: 5px;
}

.h-text-data:last-child {
    border-bottom: none;
}

.h-text-data:hover {
    background-color: var(--hover-bg-color);
}

.h-text-data>.label {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-grow: 0;
    flex-shrink: 0;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    padding: 0 5px;
}

.h-text-data>.value {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    flex-grow: 1;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    padding: 0 5px;
}

.plus-symbol::before {
    content: "+";
    font-size: 1.3rem !important;
    float: right;
    padding-right: 5px;
}

.element-br-grip {
    position: absolute;
    width: 24px;
    height: 24px;
    bottom: 0;
    right: 0;
    cursor: ns-resize;
    background: url(../images/wingrip.svg) no-repeat;
}

.ctime-indicator {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--brand-color-3);
}

.ctime-indicator::before {
    content: "";
    position: absolute;
    left: 0;
    top: -3px;
    width: 10px;
    height: 10px;
    background-color: var(--brand-color-3);
    border-radius: 50%;
}

.filter-side-bar {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 400px;
    overflow-y: auto;
    padding: var(--default-padding);
}

.visible-on-hover {
    display: none;
    align-items: start;
    justify-content: start;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .5);
    cursor: pointer;
}

.visible-on-hover>.comms {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding: 0;
}

.visible-on-hover>.comms>a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 0;
}

.visible-on-hover>.comms>a:hover {
    background-color: rgba(255, 255, 255, .3);
}

.visible-on-hover>.comms>a>svg {
    stroke: #eee;
}

.visible-on-hover>.title {
    display: inline-block;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    padding: 0 var(--small-padding);
    border-bottom: 1px solid var(--highlight-border-color);
    color: #eee !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visible-on-hover>.description {
    color: #eee !important;
    font-size: .9rem !important;
    padding: var(--small-padding);
    overflow: hidden;
}

.visible-on-hover>.info-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: var(--small-gap);
    padding: var(--small-padding);
}

.visible-on-hover>.info-bar>svg {
    stroke: #eee;
}

.task-view-container {
    display: flex;
    flex-direction: row;
    gap: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    background-color: var(--page-background);
    padding-bottom: var(--large-padding);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}

.task-view-container>.slot-header {
    flex-grow: 0;
    flex-shrink: 0;
    position: sticky;
    left: 0;
    top: 0;
    width: 60px;
    height: 1490px;
    z-index: 100;
    background-color: var(--page-background);
}

.task-view-container>.slot-header>table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.task-view-container>.slot-header>table>tr>th {
    font-weight: 400;
    font-size: .8rem !important;
    text-align: center;
    height: 30px;
}

.task-view-container>.day-views {
    flex-direction: row;
    align-items: start;
    justify-content: start;
    flex-grow: 1;
    flex-shrink: 1;
    gap: 0;
    width: auto;
    height: 1490px;
    position: relative;
    background-color: var(--page-background);
}

.task-view-container>.day-views>.day-view {
    flex-grow: 1;
    flex-shrink: 1;
    height: 1490px;
    min-width: 150px;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 10;
    border-right: 1px solid var(--border-color);
}

.task-view-container>.day-views>.day-view>table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.task-view-container>.day-views>.day-view>table>tr>td {
    font-weight: 400;
    font-size: .8rem !important;
    text-align: center;
    height: 30px;
}

.task-view-container>.day-views>.day-view>table>tr:nth-child(2n)>td {
    border-bottom: 1px solid var(--border-color);
}

.task-view-container>.day-views>.day-view>table>tr:nth-child(odd)>td {
    border-bottom: 1px dotted var(--border-color);
}

.task-view-container>.day-views>.day-view>table>tr>td.focus,
.task-view-container>.day-views>.day-view>table>tr>td.hover {
    background-color: var(--hover-bg-color);
}

.task-view-container>.day-views>.day-view>.slot-container {
    flex-direction: row;
    align-items: start;
    justify-items: center;
    position: absolute;
    font-size: .9rem !important;
    line-height: 1rem;
    overflow: hidden;
    cursor: pointer;
    border-top-right-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
    border: 1px solid var(--border-color);
    background-color: var(--page-background);
    transition: filter .3s;
    touch-action: pan-y;
    pointer-events: auto;
}

.task-view-container>.day-views>.day-view>.slot-container:hover {
    filter: brightness(.9);
}

.task-view-container>.day-views>.day-view>.slot-container.viewing {
    filter: brightness(.85);
}

.cal-day-view-col-head {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    height: 50px;
    background-color: var(--page-background);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.cal-day-view-col-head>.day {
    font-size: 1.75rem !important;
    color: var(--brand-color-3) !important;
    font-weight: 700 !important;
    margin-right: var(--default-margin);
}

.cal-day-view-col-head>.month {
    font-weight: 700 !important;
}

.cal-day-view-col-head.today {
    background-color: var(--highlight-bg);
}

.cal-day-view-col-head.today>.day,
.cal-day-view-col-head.today>.month {
    color: var(--highlight-bg-text) !important;
}

.flatpickr-days,
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-weekdays {
    display: initial !important;
    flex-direction: row !important;
    justify-content: initial !important;
    align-items: initial !important;
    width: initial !important;
}

.flatpickr-weekdaycontainer {
    flex-direction: initial !important;
    justify-content: initial !important;
    align-items: initial !important;
    width: initial !important;
    height: 30px;
}

.flatpickr-weekday {
    color: var(--text-color) !important;
}

.flatpickr-time {
    flex-direction: row !important;
    border: none !important;
    background-color: var(--input-bg) !important;
}

.flatpickr-months {
    flex-direction: row;
    align-items: center;
    padding: var(--default-padding);
    margin-bottom: var(--default-margin);
    background-color: transparent;
}

.flatpickr-calendar {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 5px !important;
}

.flatpickr-current-month {
    padding: 0;
    padding-top: 0;
    background-color: transparent;
}

.flatpickr-next-month,
.flatpickr-prev-month {
    top: unset !important;
    height: unset !important;
    padding: 5px 10px !important;
    background-color: transparent !important;
}

.flatpickr-day.selected,
.flatpickr-day.today:focus,
.flatpickr-day:hover {
    background-color: var(--highlight-bg) !important;
    border-color: var(--highlight-bg) !important;
    color: var(--highlight-bg-text);
}

.flatpickr-day.today {
    border-width: 2px;
    background-color: transparent !important;
    border-color: var(--highlight-bg) !important;
    color: var(--text-color) !important;
}

.dayContainer {
    display: inline-block !important;
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
}

.flatpickr-calendar.inline {
    width: 100% !important;
}

.flatpickr-day {
    max-width: unset !important;
    border-radius: var(--default-radius);
    background-color: transparent !important;
    color: var(--text-color);
}

.nextMonthDay,
.prevMonthDay {
    color: var(--grayed-text-color) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 400 !important;
}

.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowTop::before {
    border: none;
}

.flatpickr-calendar::after,
.flatpickr-calendar::before {
    border: none;
}

.flatpickr-monthDropdown-months {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

.flatpickr-next-month>svg,
.flatpickr-prev-month>svg {
    stroke: var(--svg-stroke) !important;
}

.sliding-info-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 500px;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 0;
    border-radius: 0;
    overflow-y: auto;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-left: none;
    transform: translateX(-100%);
    transition: transform .3s ease-in-out;
}

.sliding-info-container.show {
    transform: translateX(0);
}

.task-list-container {
    background-color: var(--page-background);
}

.task-list-container>.task {
    border-left: 10px solid transparent;
    padding: var(--small-padding);
    border-bottom: 1px solid var(--border-color) !important;
}

.task-list-container>.task:hover {
    background-color: var(--input-bg-hover-form);
}

.task-list-container>.task:last-child {
    border-bottom: 1px solid transparent;
}

.data-card-selection {
    position: absolute !important;
    left: var(--default-padding);
    top: var(--default-padding);
    display: none;
}

.task-caption {
    display: flex;
    align-items: center;
    justify-content: start;
}

.task-caption>svg {
    transform: scale(75%);
    margin: var(--small-gap);
}

.selected-task {
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .2) inset;
    -webkit-box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .2) inset;
    -moz-box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .2) inset;
}

.loader-circle-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: transparent;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    animation: pulse 1.5s ease-in-out infinite;
}

.loader-circle-small::before {
    border: 8px solid #dd2027;
    border-top-color: #ef233c;
    border-right-color: #ef233c;
    border-bottom-color: #ef233c;
    border-left-color: #ef233c;
    border-color: #dd2027 transparent #dd2027 transparent;
    content: "";
    border-radius: 50%;
    animation: loader 1.2s linear infinite;
}

.app-caption-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--small-gap);
    width: auto;
}

.app-caption-container>svg {
    margin: 0;
}

.app-caption-container>.name {
    font-size: 1.1rem !important;
    font-weight: bold;
    margin: 0;
    transform: translateY(0);
}

.app-caption-container>.month {
    font-size: 2rem !important;
    font-weight: bold;
    margin: 0;
    margin-left: var(--default-margin);
    color: var(--brand-color-3);
    transform: translateY(-3px);
}

.app-caption-container>.year {
    font-size: 1.5rem !important;
    font-weight: bold;
    color: var(--brand-color-2);
    margin-left: var(--small-margin);
    margin-right: var(--default-margin);
}

.app-caption-container>.my-day-1 {
    font-size: 1.3rem !important;
    font-weight: bold;
    color: var(--brand-color-3);
}

.app-caption-container>.my-day-2 {
    font-size: 1.5rem !important;
    font-weight: bold;
    color: var(--brand-color-2);
}

.activity-moritor {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 50px;
    padding: 25px;
    border-radius: 50%;
    background-color: #dd2027;
    z-index: 999999;
}

.share-button {
    width: 36px;
    height: 36px;
}

.share-button>img {
    width: 100%;
    height: 100%;
}

.day-slot-list {
    flex-direction: row;
    gap: var(--large-gap);
    padding: var(--default-padding);
    border-bottom: 1px solid var(--border-color);
}

.day-slot-list>.day {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 2rem !important;
    font-weight: bold;
    color: var(--brand-color-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.day-slot-list>.date {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    font-size: 1.4rem !important;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 3.75rem;
}

.tablet-message {
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    margin-top: var(--large-margin);
    font-size: 1.2rem;
    color: var(--color-contrast-text-1);
    background-color: var(--color-contrast-background-1);
    border: 1px solid var(--color-contrast-border-1);
    box-shadow: 5px 20px 20px 1px rgba(0, 0, 0, .2) !important;
    -webkit-box-shadow: 5px 20px 20px 1px rgba(0, 0, 0, .2) !important;
    -moz-box-shadow: 5px 20px 20px 1px rgba(0, 0, 0, .2) !important;
}

.inviting-message {
    align-self: center;
    justify-self: center;
    background-color: var(--page-background);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 600px;
    margin-top: var(--large-margin);
    padding: 15px;
    border-radius: var(--default-radius);
}

.inviting-message>*,
.inviting-message>*>strong {
    color: var(--grayed-text-color);
}

.inviting-message>p {
    text-align: justify;
    margin-top: var(--large-margin);
}

.inviting-message>.title {
    font-size: 1.25rem;
    font-weight: bold;
}

.inviting-message>*>.tb-button>svg {
    transform: translateY(7px) !important;
}

.inviting-message>h2 {
    font-weight: bold;
    color: var(--highlight-bg) !important;
    padding: 0;
    margin: 0;
}

.inviting-message>.icon-container {
    border-radius: 50%;
    background-color: var(--shade-back-color);
    border: 5px solid var(--shade-back-color-dark);
    padding: 15px;
    width: auto;
    align-items: center;
    justify-content: center;
}

.inviting-message>.icon-container>img {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
}

.hover-on-mouse:hover {
    background-color: var(--hover-bg-color);
}

.form-section>.list-item-container:hover {
    background-color: var(--shade-back-color);
}

.centered-ecm {
    align-items: center;
    justify-content: center;
}

.centered-ecm>p {
    max-width: 450px;
    text-align: center;
    font-size: 1.2rem;
    padding: 30px;
    border-radius: var(--default-radius);
    box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
}

.task-list-item-container {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: var(--small-gap);
    width: 100%;
    padding: var(--small-padding) var(--default-padding);
    border-radius: var(--small-radius);
    background-color: var(--shade-back-color-light);
    margin-bottom: var(--small-margin);
    cursor: pointer;
}

.task-list-item-container:hover {
    background-color: var(--shade-back-color);
}

.task-list-item-container>.detail-container {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    overflow: hidden;
}

.task-list-item-container>.detail-container>.task-name {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
}

.task-list-item-container>.detail-container>.deadline {
    flex-direction: row;
}

.task-list-item-container>.detail-container>.deadline>span {
    font-size: .9rem;
    color: var(--grayed-text-color) !important;
}

.task-list-item-container>.detail-container>.deadline>svg {
    margin-left: 0 !important;
}

.task-list-item-container>.status-container {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--small-gap);
    padding: var(--small-padding);
    border-radius: var(--default-radius);
    width: 150px;
}

.task-list-item-container>.status-container>svg {
    margin: 0 !important;
}

.sli-icon {
    background-color: var(--sli-icon-background);
}

.full-background,
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    transition: opacity .3s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.large-logo {
    max-width: 150px !important;
    max-height: 150px !important;
}

.large-app-name {
    width: auto !important;
    font-weight: bold;
    font-size: 2.5rem !important;
}

.welcome-to-app {
    width: auto !important;
    font-weight: bold;
    font-size: 1.25rem !important;
}

.text-color-blue {
    color: var(--brand-color-1) !important;
}

.text-color-red {
    color: #8b0000 !important;
}

.text-color-purple {
    color: var(--brand-color-3) !important;
}

.text-color-orange {
    color: var(--brand-color-4) !important;
}

.text-color-grayed {
    color: var(--grayed-text-color) !important;
}

.text-color-deemed {
    color: var(--deemed-text-color) !important;
}

.shopping-item-form {
    width: 450px !important;
    height: auto !important;
    max-height: 90%;
}

.shopping-item-form>.body {
    padding: 0 !important;
}

.shopping-item-form>.body>.body-container {
    padding: 10px 10px 0 10px !important;
}

.shopping-item-form .form-section-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.shopping-item-form .form-section {
    margin-bottom: 0 !important;
}

.explorer-sb-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    min-height: 0;
    flex-basis: auto;
    margin: var(--small-margin) 0;
    overflow: hidden;
    box-sizing: border-box;
}

.explorer-sb-section>.header {
    border-bottom: 1px solid var(--border-color);
    padding: var(--small-padding);
}

.explorer-sb-section>.header>.caption {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 1;
}

.explorer-sb-section>.header>.caption>span {
    font-size: 100% !important;
    font-weight: 700 !important;
}

.explorer-sb-section>.header>.tb-button {
    padding: var(--small-padding);
}

.explorer-sb-section>.folding-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    min-height: 0;
    flex-basis: auto;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: var(--default-radius);
    margin: var(--default-margin) 0 var(--small-margin) 0;
}

.svg-color-yellow {
    stroke: #ffc300 !important;
    fill: #ffc300;
}

.svg-color-green {
    stroke: #668900 !important;
}

.svg-color-red {
    stroke: #dc3545 !important;
    fill: #dc3545;
}

.svg-color-orage {
    stroke: #f8682c !important;
}

.svg-color-blue {
    stroke: #00b4f1 !important;
    fill: #00b4f1;
}

.svg-color-dark-blue {
    stroke: blue !important;
}

.svg-color-purple {
    stroke: #4e4999 !important;
}

.svg-color-merun {
    stroke: #800000 !important;
}

.popup-form {
    position: fixed;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: auto;
    max-width: 100%;
    height: 90%;
    max-height: 100%;
    padding: 0;
    padding-bottom: var(--default-padding);
    background-color: var(--background-color);
    border-radius: var(--default-radius);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
}

.fol-browser,
.hol-browser,
.icon-browser,
.tag-browser,
.upload-form {
    width: 100vw;
    height: auto;
    max-width: 450px;
    max-height: 90vh;
}

.hol-browser {
    min-height: 500px;
}

.icon-browser {
    height: 650px;
    max-height: 90%;
}

.dtp-selector {
    height: auto;
    max-width: 400px;
}

.dtp-selector>.body {
    overflow-y: unset;
    align-items: center;
    justify-content: center;
}

.multi-line-input-form,
.single-line-input-form {
    width: 500px;
    height: auto !important;
    max-height: 90%;
}

.full-height-form,
.side-menu {
    max-width: 100%;
    top: 0;
    right: 0;
    border: none;
    border-radius: 0;
    border-right: 1px solid var(--border-color);
    background-color: var(--background-color);
}

.full-height-form {
    width: 500px;
    height: 100%;
}

.full-screen-form {
    width: 100%;
    height: 100%;
}

.side-menu {
    width: 400px;
    height: 100%;
}

.full-height-form>.header {
    border-radius: 0;
    border-bottom: 1px solid var(--border-color);
}

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100% !important;
    padding: var(--small-padding);
    border-radius: 0;
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius: var(--default-radius);
    border-top-right-radius: var(--default-radius);
}

.header>* {
    flex-grow: 0;
    flex-shrink: 0;
}

.header>.spacer {
    flex-grow: 1;
    flex-shrink: 1;
}

.header>.caption,
.header>h2,
.header>span {
    display: inline-block;
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 110%;
    font-weight: 400;
}

.header>svg {
    margin-right: var(--small-padding);
}

.section-header {
    justify-content: start;
}

.body {
    align-items: start;
    justify-content: start;
    flex-grow: 1;
    flex-shrink: 1;
    padding: var(--default-padding);
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100% !important;
    padding: var(--default-padding);
    border-radius: 0;
    border-bottom-left-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
}

.object-area>.header {
    padding: var(--default-padding);
    border-bottom: 1px solid var(--border-color);
}

.module-browser {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #e9e4f0, #d3cce3);
}

.overlapping-form {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.module-title>svg {
    transform: scale(130%);
    margin-right: var(--default-margin);
}

.module-title>.caption {
    font-size: 130% !important;
}

.unread-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--brand-color-2);
}

.task-deadline,
.task-name {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
}

.task-deadline,
.task-description {
    font-weight: 400;
    font-size: .8rem !important;
    color: #555 !important;
}

div.white-light {
    background-color: var(--page-background-light) !important;
}

.color-picker-form {
    width: unset;
    height: auto !important;
    max-height: 90%;
    padding-bottom: 0 !important;
}

.color-picker-form>.header {
    border-bottom: none;
}

.color-picker-form>.body,
.color-picker-form>.body-container {
    padding: 0 !important;
}

.sp-container,
.sp-container * {
    display: unset;
}

.sp-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    padding: 5px;
    box-shadow: none;
    background-color: transparent;
}

.sp-palette-container {
    display: flex;
    border-right: none;
    padding: 0;
}

.sp-picker-container {
    padding: 0;
    margin-top: 15px;
}

.sp-palette .sp-thumb-el {
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
}

.sp-alpha,
.sp-preview,
.sp-thumb-el {
    background-image: none;
}

.sp-palette .sp-thumb-el.sp-thumb-active,
.sp-palette .sp-thumb-el:hover {
    border-color: var(--page-background) !important;
}

.disabled {
    pointer-events: none !important;
    box-shadow: none !important;
    background: 0 0 !important;
}

.disabled>svg {
    stroke: var(--shade-back-color) !important;
}

.tb-button.disabled:active {
    pointer-events: none !important;
    box-shadow: none !important;
    background: 0 0 !important;
}

.tb-button.disabled:hover {
    cursor: default !important;
    background: 0 0 !important;
}

.doc-previewer-toolbar {
    max-width: 1024px;
    padding-left: 10px;
    padding-right: 10px;
}

.doc-previewer {
    width: 100%;
    max-width: 1024px;
    height: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    overflow-y: auto;
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    border: 1px solid var(--border-color);
    background-color: var(--page-background);
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}







a.ddm-trigger {
    position: relative;
}

a.ddm-trigger:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    padding: 0 5px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6l6 -6" /></svg>') center/contain no-repeat;
}

.av-list {
    width: 100%;
    padding: var(--small-padding);
    background-color: #fff;
}

.av-list svg {
    margin: 0;
}

.av-list>.main {
    flex-direction: row;
    gap: var(--small-gap);
    align-items: center;
    width: 100%;
}

.av-list>.main>.name {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
}

.av-list>p {
    font-size: .9rem;
    color: var(--grayed-text-color);
}

.av-section {
    padding: var(--small-padding);
    overflow: unset;
    margin-bottom: 0;
}

.av-head-tb-button {
    padding: 20px 0;
    flex-grow: 1;
    flex-shrink: 1;
}

.av-head-tb-button>svg {
    transform: scale(120%);
    stroke-width: 1.5px !important;
}

.thumb-container {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 3px;
    overflow-y: auto;
    padding: var(--small-padding);
}

.thumb-container>.thumb-card {
    width: 32.5%;
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
    background-color: #000;
}

.player-element {
    cursor: pointer;
}

.thumb-container>.thumb-card>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb-container>.thumb-card>.label {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: var(--small-padding);
}

.thumb-container>.thumb-card>.tb-button {
    position: absolute;
    right: 3px;
    top: 3px;
}

.document-viewer>.body>.error,
.document-viewer>.body>iframe,
.document-viewer>.body>pre {
    margin: 0;
    border: none;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.document-viewer>.body>iframe {
    padding: 0;
}

.document-viewer>.body>pre {
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.document-viewer>.body>.error,
.document-viewer>.body>pre {
    padding: var(--default-padding);
}

.document-viewer>.body>pre.source-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem !important;
}

.gs-container-background {
    background-color: var(--background-color);
    position: fixed;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.gs-container {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    width: auto;
    min-width: 400px;
    max-width: 450px;
    height: auto;
    min-height: 450px;
    overflow: hidden;
    border-radius: var(--default-radius);
    box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    position: relative;
}

.gs-container>.gs-header {
    padding: 20px 0 10px 0;
    background-color: var(--page-background);
}

.gs-container>.gs-body {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: var(--default-gap);
    flex-grow: 1;
    flex-shrink: 1;
    padding: 20px var(--default-padding);
    background-color: var(--background-color);
    overflow-y: auto;
}

.gs-container>.gs-extra-footer,
.gs-container>.gs-footer {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    gap: var(--small-gap);
    padding: var(--large-padding) var(--default-padding);
    background-color: var(--background-color);
}

.gs-container>.gs-footer {
    border-top: 1px solid var(--border-color);
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.gs-container>.gs-extra-footer {
    padding: var(--default-padding);
}

.gs-check-label {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    font-weight: 400;
    cursor: pointer;
}

.gs-check-label:hover {
    background-color: var(--input-bg-hover-form);
}

.gs-container>.gs-floating-commands {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    padding: 5px 3px;
    background-color: transparent;
    z-index: 1001;
}

.gs-logo {
    width: 50px !important;
    height: 50px !important;
}

.gs-caption {
    font-size: 1.5rem !important;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    width: 100%;
}

.gs-slide-container {
    position: relative;
    width: 450px;
    height: 800px;
    border-radius: var(--default-radius);
    box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
}

.gs-slide-button-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    padding: 20px;
}

.gs-slide-button-left {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    padding: 20px;
}

.prime-button>svg {
    stroke: var(--brand-color-2);
    stroke-width: 2px;
}

.ol-floating-button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--shade-back-color-light);
    min-width: 75px;
    min-height: 75px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    z-index: 999;
}

.ol-floating-button:hover {
    background-color: var(--shade-back-color);
}

.ol-floating-button:active {
    background-color: var(--shade-back-color-dark);
}

.ol-floating-button:active>span,
.ol-floating-button:active>svg {
    transform: translateX(1px) translateY(1px);
}

.ol-floating-button.left {
    left: 15px;
}

.ol-floating-button.right {
    right: 15px;
}

.ol-floating-button.right-2 {
    right: 105px;
}

.ol-floating-button.right-3 {
    right: 195px;
}

.ol-floating-button.top {
    top: 15px;
}

.ol-floating-button.bottom {
    bottom: 15px;
}

.ol-floating-button.bottom-2 {
    bottom: 105px;
}

.ol-floating-button.center {
    top: 50%;
    transform: translateY(-50%);
}

.ol-floating-button.round {
    border-radius: 50% !important;
}

.center-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ol-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    background-color: var(--page-background);
    border: 1px solid transparent;
    border-radius: var(--small-radius);
    cursor: pointer;
}

.ol-button:hover {
    border-color: var(--border-color);
}

.ol-button>span,
.ol-button>svg {
    stroke: var(--svg-stroke);
    color: var(--text-color) !important;
}

.ol-button:active * {
    transform: translateX(.5px) translateY(.5px);
}

.ol-button.action {
    background-color: var(--brand-color-2);
}

.ol-button.action:hover {
    border-color: var(--brand-color-2);
}

.ol-button.action>span,
.ol-button.action>svg {
    stroke: #fff;
    color: #fff !important;
}

.ih-ul-list {
    list-style: none;
    padding-left: 0;
    width: 100%;
}

.ih-ul-list>li {
    margin-top: 5px;
    padding: 5px;
    position: relative;
    display: flex;
    border-bottom: 1px solid var(--brand-color-4);
}

.ih-ul-list>li>svg {
    margin-right: 15px;
}

.ih-ul-list-bar {
    list-style: none;
    padding-left: 0;
}

.ih-ul-list-bar>li {
    margin-top: 5px;
    padding: 10px 20px;
    position: relative;
    display: flex;
    background-color: var(--shade-back-color);
}

.ih-ul-list-bar>li>svg {
    margin-right: 15px;
}

.ih-card-container {
    flex-direction: row;
    gap: 10px;
    align-items: stretch;
    padding: 5px;
    flex-grow: 1;
    flex-shrink: 1;
}

.ih-card-container>.ih-card {
    gap: 10px;
    flex-grow: 1;
    flex-shrink: 1;
    border-radius: var(--small-radius);
    background-color: var(--shade-back-color-light);
    border: 1px solid var(--border-color);
    padding: 10px;
    width: 200px;
    justify-content: space-between;
}

.ih-card-container>.ih-card>.ih-card-header {
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.ih-step-list {
    background-color: var(--shade-back-color-light);
    padding: 15px;
    border-radius: var(--default-radius);
}

.ih-step-list>.ih-step-list-item {
    padding: 15px;
    border-radius: var(--small-radius);
}

.ih-step-list>.ih-step-list-item>.heading {
    flex-direction: row;
    margin-bottom: 5px;
}

.ih-step-list>.ih-step-list-item>.heading>.step {
    font-size: 1.25rem !important;
    font-weight: bold;
    color: var(--brand-color-2) !important;
    margin-right: 8px;
}

.ih-step-list>.ih-step-list-item>.heading>.description {
    font-weight: 700 !important;
}

.ih-image-quarter {
    max-width: 25% !important;
    height: auto !important;
}

.ih-image-half {
    max-width: 50% !important;
    height: auto !important;
}

.ih-image-full {
    max-width: 100% !important;
    height: auto !important;
}

.ih-card-container>.ih-card>.ih-card-header>img {
    width: 75px !important;
    height: 75px !important;
}

.ih-card-container>.ih-card>.ih-card-header>span {
    font-size: 1.25rem;
    font-weight: bold;
}

.ih-card-container>.ih-card>p {
    text-align: justify;
}

.capsule {
    flex-direction: row;
    padding: 10px 15px;
    background-color: var(--shade-back-color);
    border-radius: 25px;
    width: auto !important;
}

.capsule>strong {
    padding-right: 10px;
    margin-right: 10px;
    border-right: 3px solid gray;
}

.seperator-h {
    height: 100%;
    width: 1px;
    background-color: var(--brand-color-2);
    padding: 0 10px;
}

.bullet-number {
    font-size: 2rem !important;
    color: var(--brand-color-2);
    font-weight: bold;
    margin-right: 20px;
}

.text-bar {
    padding: 10px 15px !important;
    background-color: var(--shade-back-color);
    font-size: 1.2rem;
}

.menu-container {
    align-items: center;
    justify-content: center;
    padding: var(--default-padding);
    gap: var(--default-gap);
    width: 100%;
}

.menu-item-group {
    flex-direction: row;
    align-items: start;
    justify-content: start;
    margin: 0 auto;
    width: auto;
    overflow-y: auto;
    background-color: var(--page-background);
}

.menu-item-group>.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 130px;
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    margin-top: var(--large-margin);
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.menu-item-group>.menu-item:hover {
    background-color: var(--shade-back-color);
}

.menu-item-group>.menu-item>img {
    max-width: 56px !important;
    height: 56px !important;
}

.menu-item-group>.menu-item>.mi-caption {
    font-weight: bold;
}

.info-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--default-gap);
    width: 100%;
    padding: 3px;
    height: 48px;
    border-bottom: 1px solid var(--border-color);
}

.info-list-item>span {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;
    flex-direction: row;
    justify-content: start;
    width: 100%;
}

.info-list-item>.comm-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    flex-grow: 0;
    flex-shrink: 0;
    width: auto;
}

.info-list-item button {
    width: 44px !important;
    height: 36px !important;
    margin: 0;
}

.info-list-item .chip {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: var(--small-gap);
    padding: 3px 6px;
    background-color: var(--shade-back-color);
    border-radius: 25px;
    width: auto;
    overflow: hidden;
}

.info-list-item img{
    margin: 0px var(--small-margin);
}

.flatpickr-time:hover {
    background-color: var(--input-bg-hover) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper,
.flatpickr-current-month input.cur-year,
.flatpickr-time input {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

.flatpickr-am-pm {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
    align-items: center;
    justify-content: center;
    width: 200px;
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    margin: 0 auto;
    background-color: var(--shade-back-color);
    border: 1px solid var(--border-color) !important;
}

.numInputWrapper>input {
    padding-bottom: 0 !important;
}

.flow-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 600px;
    max-height: 680px;
    border: 1px solid var(--border-color);
    border-radius: var(--default-radius);
    background-color: var(--page-background);
    overflow: hidden;
}

.flow-card>.flow-comms,
.flow-card>.flow-header {
    flex-direction: row;
    align-items: center;
    padding: var(--default-padding) var(--small-padding);
    border-bottom: 1px solid var(--border-color);
    height: 64px;
}

.flow-card>.flow-header>.title {
    display: inline-block;
    flex-grow: 1;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.3rem;
    font-weight: bold;
}

.flow-card>.flow-header>.tb-button {
    display: inline-block;
    padding: 3px 4px;
}

.flow-card>.module-detail {
    flex-direction: row;
    gap: var(--small-gap);
    width: 100%;
    padding: 5px 10px;
    border-radius: 0;
}

.flow-card>.flow-cover {
    width: 100%;
    border-radius: 0;
    max-height: 450px;
    min-height: 200px;
}

.flow-card>.flow-cover .cover-comm {
    cursor: pointer;
}

.flow-card>.flow-comms {
    flex-direction: row;
    gap: var(--small-gap);
    padding: var(--small-padding);
}

.flow-card>.flow-comms>.tb-button:hover {
    background-color: var(--shade-back-color);
}

.cover-comm {
    cursor: pointer;
}

.custom-cover {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1;
    gap: var(--default-gap);
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.cover-text {
    display: inline-block;
    width: 100%;
    font-size: 2rem !important;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 3px #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 42px;
}

.pattern-bookmark {
    background: radial-gradient(circle farthest-side at 0 50%, var(--brand-color-2) 23.5%, #0000 0) 33.6px 48px, radial-gradient(circle farthest-side at 0 50%, rgba(150, 0, 0, .3) 24%, #0000 0) 30.4px 48px, linear-gradient(var(--brand-color-2) 14%, #0000 0, #0000 85%, var(--brand-color-2) 0) 0 0, linear-gradient(150deg, var(--brand-color-2) 24%, rgba(150, 0, 0, .3) 0, rgba(150, 0, 0, .3) 26%, #0000 0, #0000 74%, rgba(150, 0, 0, .3) 0, rgba(150, 0, 0, .3) 76%, var(--brand-color-2) 0) 0 0, linear-gradient(30deg, var(--brand-color-2) 24%, rgba(150, 0, 0, .3) 0, rgba(150, 0, 0, .3) 26%, #0000 0, #0000 74%, rgba(150, 0, 0, .3) 0, rgba(150, 0, 0, .3) 76%, var(--brand-color-2) 0) 0 0, linear-gradient(90deg, rgba(150, 0, 0, .3) 2%, var(--brand-color-2) 0, var(--brand-color-2) 98%, rgba(150, 0, 0, .3) 0) 0 0 var(--brand-color-2);
    background-size: 64px 96px;
    background-color: var(--brand-color-2);
}

.pattern-document {
    background: radial-gradient(27% 29% at right, #0000 83%, rgba(0, 0, 0, .1) 85% 99%, #0000 101%) calc(32px/2) 32px, radial-gradient(27% 29% at left, #0000 83%, rgba(0, 0, 0, .1) 85% 99%, #0000 101%) calc(32px/-2) 32px, radial-gradient(29% 27% at top, #0000 83%, rgba(0, 0, 0, .1) 85% 99%, #0000 101%) 0 calc(32px/2), radial-gradient(29% 27% at bottom, #0000 83%, rgba(0, 0, 0, .1) 85% 99%, #0000 101%) 0 calc(32px/-2) #115b91;
    background-size: 64px 64px;
}

.pattern-shopping-list {
    background: radial-gradient(ellipse farthest-side at top left, #f0b7a1 0, #8c3310 40%, #752201 62%, #bf6e4e 100%);
}

.pattern-tasks {
    background: radial-gradient(35.36% 35.36% at 100% 25%, #0000 66%, RGBA(255, 255, 255, .2) 68% 70%, #0000 72%) 25px 25px/calc(2*25px) calc(2*25px), radial-gradient(35.36% 35.36% at 0 75%, #0000 66%, RGBA(255, 255, 255, .2) 68% 70%, #0000 72%) 25px 25px/calc(2*25px) calc(2*25px), radial-gradient(35.36% 35.36% at 100% 25%, #0000 66%, RGBA(255, 255, 255, .2) 68% 70%, #0000 72%) 0 0/calc(2*25px) calc(2*25px), radial-gradient(35.36% 35.36% at 0 75%, #0000 66%, RGBA(255, 255, 255, .2) 68% 70%, #0000 72%) 0 0/calc(2*25px) calc(2*25px), repeating-conic-gradient(#514e88 0 25%, #0000 0 50%) 0 0/calc(2*25px) calc(2*25px), radial-gradient(#0000 66%, RGBA(255, 255, 255, .2) 68% 70%, #0000 72%) 0 calc(25px/2)/25px 25px #514e88;
}

.pattern-memory {
    background: radial-gradient(ellipse farthest-corner at top left, #959595 0, #0d0d0d 64%, #010101 61%, #0a0a0a 63%, #4e4e4e 75%, #383838 90%, #1b1b1b 100%);
}

.document-files {
    flex-direction: row;
    gap: var(--small-gap);
    padding: var(--small-padding) var(--large-padding);
    border-radius: 25px;
    width: auto;
    align-items: center;
    background-color: rgba(255, 255, 255, .2) !important;
    box-shadow: 1px 1px 5px #000 !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
}

.document-files>img {
    width: 16px !important;
    height: 16px !important;
}

.pattern-note {
    background: radial-gradient(100% 100% at 100% 100%, #0000 46%, rgba(0, 0, 0, .1) 47% 53%, #0000 54%) 32px 32px, radial-gradient(100% 100% at 0 0, #0000 46%, rgba(0, 0, 0, .1) 47% 53%, #0000 54%) 32px 32px, radial-gradient(100% 100%, #0000 22%, rgba(0, 0, 0, .1) 23% 29%, #0000 30% 34%, rgba(0, 0, 0, .1) 35% 41%, #0000 42%) #6a66b2;
    background-size: 64px 64px;
}

.pattern-tasks *,
.pattern-note *,
.pattern-shopping-list *,
.pattern-bookmark *,
.pattern-memory *,
.pattern-document * {
    color: var(--text-color-invert);
}

.flow-card>.main-link {
    flex-direction: row;
    gap: var(--default-gap);
    padding: 5px 10px;
    width: 100%;
    margin-bottom: var(--small-margin);
    border-radius: 0;
}

.flow-card>.main-link>span {
    font-weight: bold;
}

.flow-card>.main-link>a {
    display: inline-block;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    border-radius: 0;
    color: unset !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flow-card>.main-link>a:visited {
    color: unset !important;
}

.tp-container {
    align-items: center;
    justify-content: start;
    padding: 10px;
    height: 100%;
    max-width: 650px;
}

.performance-card-container {
    width: 100%;
    padding: var(--default-padding);
    background-color: var(--page-background);
}

.performance-card-container>table.performance-score {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    flex-grow: 1;
    flex-shrink: 1;
}

.performance-card-container>table.performance-score .row-header {
    width: 50px !important;
    text-align: center;
}

.performance-card-container>table.performance-score th,
table.performance-score td {
    padding: 0 !important;
}

.performance-card-container>table.performance-score>thead>tr>th {
    width: 140px;
    max-height: 100px;
}

.performance-card-container>table.performance-score>tbody>tr>th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: 50px;
    padding: 0 5px !important;
}

.performance-card-container>table.performance-score>tbody>tr>td {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.performance-card-container>table.performance-score>tbody>tr:last-child>td {
    border-bottom: none;
}

.performance-card-container>table.performance-score .data-cell {
    border-right: 1px solid rgba(255, 255, 255, .2);
}

.performance-card-container>table.performance-score .data-cell:last-child {
    border-right: none;
}

.tp-container>.performance-navigator {
    background-color: var(--shade-back-color);
    margin-top: var(--large-margin);
    border-radius: var(--default-radius);
}

.tp-below-par {
    background-color: var(--habit-performed-late);
}

.tp-at-par {
    background-color: var(--habit-performed-on-time);
}

.tp-above-par {
    background-color: var(--habit-performed-early);
}

.tp-not-par {
    background-color: var(--habit-not-performed);
}

.tp-not-available {
    background-color: var(--habit-not-due);
}

.performance-legends {
    list-style: none;
    padding-left: var(--default-padding);
    width: 100%;
    margin: 0;
}

.performance-legends>li {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    padding: var(--small-padding);
    padding-left: 40px !important;
    margin-bottom: var(--small-margin);
    border-top-left-radius: var(--small-radius);
    border-bottom-left-radius: var(--small-radius);
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.performance-legends>li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 100%;
}

.performance-legends>li.tp-below-par::before {
    background-color: var(--habit-performed-late) !important;
}

.performance-legends>li.tp-at-par::before {
    background-color: var(--habit-performed-on-time) !important;
}

.performance-legends>li.tp-above-par::before {
    background-color: var(--habit-performed-early) !important;
}

.performance-legends>li.tp-not-par::before {
    background-color: var(--habit-not-performed) !important;
}

.performance-legends>li.tp-not-available::before {
    background-color: var(--habit-not-due) !important;
}

.card-1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
}

.card-2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
}

.card-3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}

.card-4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
}

.card-5 {
    box-shadow: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22);
}

.performance-score>tbody tr:first-child td:nth-child(2) {
    border-top-left-radius: 10px;
}

.performance-score>tbody tr:first-child td:last-child {
    border-top-right-radius: 10px;
}

.performance-score>tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.performance-score>tbody tr:last-child td:nth-child(2) {
    border-bottom-left-radius: 10px;
}

.performance-score th.rotate {
    height: 140px;
    white-space: nowrap;
}

.performance-score th.rotate>div {
    align-items: start;
    justify-content: center;
    overflow: hidden;
    max-width: 120px;
    transform: translate(5px, 5px) rotate(300deg);
}

.performance-score th.rotate>div>span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    width: 100%;
}

.myday-item {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 3px;
    width: 100%;
    padding: var(--small-padding);
}

.myday-item>.myday-item-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 5px;
    width: 100%;
}

.myday-item>.myday-item-header>input[type=checkbox],
.myday-item>.myday-item-header>input[type=radio] {
    width: 20px;
    height: 20px;
}

.myday-item>.myday-item-header>.myday-name {
    display: inline-block;
    flex-grow: 1;
    flex-shrink: 1;
}

.myday-item>.myday-description {
    display: inline-block;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    color: var(--grayed-text-color) !important;
}

.myday-item>.myday-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    width: 100%;
}

.myday-item>.myday-description,
.myday-item>.myday-footer>* {
    font-size: .7rem !important;
    color: var(--grayed-text-color) !important;
}

.myday-item>.myday-footer>.myday-task-type {
    background-color: var(--shade-back-color);
    border-radius: 25px;
    padding: 3px 9px;
    flex-grow: 0;
    flex-shrink: 0;
    display: inline-block;
}

.myday-performance-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    flex-grow: 0;
    flex-shrink: 0;
    display: inline-block;
}

.myday-target-desciption {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--default-gap);
    font-size: 1rem;
}

.negative-list,
.positive-list {
    list-style-type: none;
    padding: 15px;
    border-radius: var(--default-radius);
    width: 100%;
}

.negative-list>li,
.positive-list>li {
    margin-right: 0;
    margin-bottom: 3px;
    padding: 5px;
    border-radius: var(--small-radius);
    background-color: var(--shade-back-color);
}

.negative-list>li:before,
.positive-list>li:before {
    font-weight: 400;
    font-size: .9rem;
    margin-right: 5px;
}

.positive-list>li:before {
    content: "✔️";
}

.negative-list>li:before {
    content: "❌";
}

.negative-list>.list-header,
.positive-list>.list-header {
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    border-radius: 10 !important;
    background-color: transparent !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.1rem !important;
    font-weight: bold;
}

.negative-list>.list-header:before,
.positive-list>.list-header:before {
    content: none;
}

.shaded-back-container {
    background-color: var(--shade-back-color);
}

.styled-left-border {
    border-left: 5px solid transparent;
}

.styled-left-border.green {
    border-left-color: green;
}

.styled-left-border.red {
    border-left-color: red;
}

.styled-left-border.blue {
    border-left-color: #00f;
}

.special-message {
    width: 100%;
    padding: 15px;
}

.special-message>.title-container {
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.special-message>.title-container>.title {
    font-size: 1.5rem;
    font-weight: bold;
    flex-grow: 1;
    flex-shrink: 1;
    color: #fff !important;
}

.special-message>.note {
    margin-top: 15px;
    border-radius: var(--default-radius);
    width: 100%;
    background-color: var(--shade-back-color);
    padding: 15px;
    font-size: 1.1rem;
    text-align: center;
    color: #fff !important;
}

.special-message>.note * {
    color: #fff !important;
}

.special-message.warning {
    background: linear-gradient(135deg, #f59e0b 0, #d97706 100%);
}

.special-message.information {
    background: linear-gradient(135deg, #3b82f6 0, #1d4ed8 100%);
}

.special-message.error {
    background: linear-gradient(135deg, #ef4444 0, #dc2626 100%);
}

.special-message.cta {
    background: linear-gradient(135deg, #10b981 0, #059669 100%);
}

.special-message>.title-container>.icon {
    padding: 8px 3px;
    border-radius: 50%;
    background-color: var(--page-background);
}

.special-message>.title-container>.icon>svg {
    stroke-width: 1.5px !important;
    transform: scale(125%);
}

.subscription-button {
    width: auto;
}

.card-width-half {
    width: 49.5% !important;
}

.card-width-one-third {
    width: 32.5% !important;
}

.card-width-one-fourth {
    width: 24.5% !important;
}

.card-width-one-fifth {
    width: 19.5% !important;
}

.no-results-container {
    max-width: 400px;
    text-align: center;
    padding: 40px 30px;
    background: var(--page-background);
    border-radius: 12px;
}

.no-results-container .nrc-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 24px;
    transform: scale(200%);
}

.no-results-container .nrc-title {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 1.5rem !important;
    font-weight: 500;
    margin-bottom: 16px;
}

.no-results-container .suggestions {
    text-align: left;
    margin-bottom: 32px;
}

.no-results-container .suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.no-results-container .suggestions li {
    padding: 4px 0;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    padding-left: 16px;
}

.no-results-container .suggestions li::before {
    content: "•";
    color: #999;
    position: absolute;
    left: 0;
}

.notification::after {
    content: attr(data-count);
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

.large-svg-15x>img,
.large-svg-15x>svg {
    transform: scale(150%);
}

.large-svg-20x>img,
.large-svg-20x>svg {
    transform: scale(200%);
}

.flat-list {
    list-style: none;
    padding-left: 0;
    width: 100%;
    margin: 0;
}

.flat-list-item {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    width: 100%;
    gap: 10px;
    border-radius: 0 !important;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    background-color: transparent;
    padding: var(--small-padding);
}

.flat-list-item:last-child {
    border-bottom: none;
}

.flat-list-item:hover {
    background-color: var(--shade-back-color);
}

svg.slot-status-stamp {
    padding: 5px;
    border-radius: var(--small-radius);
    width: 34px;
    height: 34px;
    stroke-width: 2px;
}

.fluid-form-body {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    height: 100%;
    gap: var(--default-gap);
    padding: var(--default-padding);
}

.fluid-control-container {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: var(--default-gap);
}

.options-selector>.body>.body-container {
    gap: 15px;
}

.myday-view {
    padding: var(--default-padding) !important;
    gap: var(--small-gap);
    background-color: var(--background-color);
}

.myday-item-button {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;
    min-width: 36px;
    height: 100%;

    border: none;

    background-color: transparent;
    cursor: pointer;
}

.myday-task-item>.myday-item-button>svg {
    stroke: var(--text-color);
}

.habit-score-card {
    gap: var(--default-gap);
    margin: 0 auto;
    margin-top: var(--large-margin);
    max-width: 600px;
    width: 100%;
    padding: var(--default-padding);
    border-radius: var(--default-radius);
}

.myday-task-item {
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: var(--small-gap);
    width: 100%;
    height: auto;
    position: relative;
    padding: var(--small-padding) var(--default-padding);
    cursor: pointer;
    transition: filter .3s;
    border-radius: var(--small-radius);
    border: 1px solid var(--border-color);
    background-color: var(--page-background);
}

.myday-task-item:first-child {
    border-top-left-radius: 15px !important;
}

@media only screen and (max-width:768px) {
    .myday-task-item:first-child {
        border-top-left-radius: var(--small-radius) !important;
    }
}

.myday-task-item:active,
.myday-task-item:hover {
    filter: brightness(.9);
}

.myday-task-item.viewing {
    filter: brightness(.85);
}

.myday-task-item-selected {
    background-color: var(--shade-back-color-light);
}

.myday-task-item>.disc-container {
    flex-grow: 0;
    flex-shrink: 0;
    width: auto;
    height: 100%;
}

.myday-task-item>.comm-container {
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    width: auto;
    height: 100%;
}

.myday-task-item>.main-container {
    overflow-x: hidden;
}

.myday-task-item .date-time {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--default-gap);
    padding: 0 6px;
    border-radius: var(--small-radius);
    height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--shade-back-color);
}

.myday-task-item .date-time.myday-defaulted {
    border: 1px solid rgba(255, 0, 0, .12);
    background-color: rgba(255, 0, 0, .1);
    color: #8b0000;
}

.myday-task-item .date-time.myday-ontrack {
    border: 1px solid var(--border-color);
    background-color: var(--shade-back-color);
    color: var(--grayed-text-color);
}

.myday-task-item .description,
.myday-task-item .title {
    width: 100%;
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.myday-task-item .description {
    font-size: .85rem;
    color: var(--grayed-text-color);
}

.task-status {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: var(--small-gap);
    padding: 3px 8px;
    border: none;
    border-radius: var(--small-radius);
}

.floating-info-container {
    position: absolute;
    max-width: 450px;
    max-height: 90%;
    padding: 0;
    border-radius: var(--default-radius);
    display: none;
    background-color: var(--page-background);
}

.floating-full-height-container {
    max-width: 500px;
    top: 0;
    border: none;
    border-radius: 0;
    display: none;
    background-color: var(--background-color);
}

.slot {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.slot svg {
    stroke-width: 2px;
    transform: scale(65%);
    margin: 0 !important;
    padding: 0 !important;
}

.slot .icon {
    width: 16px !important;
    height: 16px !important;
}

.slot-caption {
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
}

.slot-caption>span {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    font-size: 90% !important;
    font-weight: 500;
    color: var(--priority-text-color);
}

.slot-caption>svg {
    transform: scale(65%);
    stroke: var(--priority-text-color);
    stroke-width: 2px;
    margin-left: 0;
    margin-right: 0;
}

.slot-snippet {
    margin: 0;
    text-align: left;
    font-size: .7rem !important;
    color: var(--grayed-text-color) !important;
    line-height: .9rem;
    padding: 1px 2px;
}

.slot-resizer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10px;
    cursor: ns-resize;
    background-color: var(--shade-back-color);
}

.folding-section {
    border-radius: var(--default-radius);
    border: 1px solid var(--border-color);
    /* background-color: var(--input-bg); */
    background-color: var(--folding-bg);

    position: relative;
}

.folding-section>.header {
    padding: var(--small-padding) !important;

    position: relative;
}

.form-task-item {
    min-height: 350px;
    max-height: 90%;
}

li {
    text-align: left;
}

.m-card>.custom-cover {
    min-height: 200px;
}

.presenter-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .3) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

ul.tick-list {
    list-style: none;
    padding-left: 0 !important;
    margin: 0;
    margin-top: 10px;
}

ul.tick-list * {
    line-height: 1.4rem !important;
}

ul.tick-list li {
    position: relative;
    background-color: var(--shade-back-color-light);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-bottom: 5px;
    padding: 5px;
    padding-left: 55px;
}

ul.flat-list {
    list-style: none;
    padding-left: 0 !important;
    margin: 0;
    margin-top: 10px;
}

ul.flat-list * {
    line-height: 1.4rem !important;
}

ul.flat-list>li {
    position: relative;
    background-color: var(--shade-back-color);
    border-radius: var(--small-radius);
    margin-bottom: 5px;
    padding: 5px 10px;
}

ul.flat-list>li::before {
    content: '';
}

ul.tick-list li::before {
    content: '✓';
    background-color: var(--brand-color-2);
    color: var(--page-background);
    font-weight: bold;
    padding: 2px 15px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

ul.tick-list ul {
    list-style: disc inside;
    padding-left: 0 !important;
}

ul.tick-list ul li {
    background-color: transparent;
    margin-bottom: 0;
    padding: 0;
    padding-left: 10px;
}

ul.tick-list ul li::before {
    content: none;
    background: 0 0;
}

.ih-background-imager {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.fixed-placeholder {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    max-height: 50px;
}

.diamond-list {
    padding: 5px 10px 5px 0 !important;
}

.diamond-list:before {
    content: "🔹" !important;
    font-weight: bold;
    font-size: 1.5rem;
}

.standard-list {
    gap: 5px;
    padding: 5px;
    border-radius: var(--small-radius);
    width: 100%;
    background-color: var(--page-background);
}

.standard-list>.item {
    flex-direction: row;
    gap: 5px;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.standard-list>.item>.icon {
    padding: 10px 5px;
    height: 100%;
    border-radius: 50%;
}

.standard-list>.item>.description {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.modern-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;

    width: 100%;

    padding: var(--small-padding);
    gap: var(--small-gap);
    border-radius: var(--default-radius);
}

.modern-list-item>img {
    background-color: var(--shade-back-color);
    width: 48px !important;
    border-radius: var(--default-radius);
    padding: var(--default-padding);
}

.row {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    width: auto;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    width: auto;
}

.grow {
    flex-grow: 1;
}

.shrink {
    flex-shrink: 1;
}

.nogrow {
    flex-grow: 0;
}

.noshrink {
    flex-shrink: 0;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.min-full-height {
    min-height: 100%;
}

.hspacer {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    height: 20px;
}

.vspacer {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    height: 100%;
    width: 20px;
}

.no-gap {
    gap: 0;
}

.small-gap {
    gap: var(--small-gap);
}

.medium-gap {
    gap: var(--default-gap);
}

.large-gap {
    gap: var(--large-gap);
}

.justify-start {
    justify-content: start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

.align-start {
    align-items: start;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

.align-stretch {
    align-items: stretch;
}

.align-baseline {
    align-items: baseline;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.w-auto {
    width: auto;
}

.h-auto {
    height: auto;
}

.w-fit {
    width: fit-content;
}

.h-fit {
    height: fit-content;
}

.min-w-0 {
    min-width: 0;
}

.min-h-0 {
    min-height: 0;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.static {
    position: static;
}

.block {
    display: block;
}

.inline {
    display: inline;
}

.grid {
    display: grid;
}

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-autoX {
    overflow-x: auto !important;
}

.overflow-autoY {
    overflow-y: auto !important;
}

.overflow-scroll {
    overflow: scroll !important;
}

.top-margin-s {
    margin-top: var(--small-margin);
}

.top-margin-m {
    margin-top: var(--default-margin);
}

.top-margin-l {
    margin-top: var(--large-margin);
}

.top-margin-xl {
    margin-top: 40px;
}

.left-margin-s {
    margin-left: var(--small-margin);
}

.left-margin-m {
    margin-left: var(--default-margin);
}

.left-margin-l {
    margin-left: var(--large-margin);
}

.right-margin-s {
    margin-right: var(--small-margin);
}

.right-margin-m {
    margin-right: var(--default-margin);
}

.right-margin-l {
    margin-right: var(--large-margin);
}

.bottom-margin-s {
    margin-bottom: var(--small-margin);
}

.bottom-margin-m {
    margin-bottom: var(--default-margin);
}

.bottom-margin-l {
    margin-bottom: var(--large-margin);
}

.vert-margin-s {
    margin-top: var(--small-margin);
    margin-bottom: var(--small-margin);
}

.vert-margin-m {
    margin-top: var(--default-margin);
    margin-bottom: var(--default-margin);
}

.vert-margin-l {
    margin-top: var(--large-margin);
    margin-bottom: var(--large-margin);
}

.horz-margin-s {
    margin-left: var(--small-margin);
    margin-right: var(--small-margin);
}

.horz-margin-m {
    margin-left: var(--default-margin);
    margin-right: var(--default-margin);
}

.horz-margin-l {
    margin-left: var(--large-margin);
    margin-right: var(--large-margin);
}

.all-margin-s {
    margin: var(--small-margin);
}

.all-margin-m {
    margin: var(--default-margin);
}

.all-margin-l {
    margin: var(--large-margin);
}

.all-margin-xl {
    margin: 40px;
}

.no-margin {
    margin: 0px !important;
}

.top-padding-s {
    padding-top: var(--small-padding);
}

.top-padding-m {
    padding-top: var(--default-padding);
}

.top-padding-l {
    padding-top: var(--large-padding);
}

.right-padding-s {
    padding-right: var(--small-padding);
}

.right-padding-m {
    padding-right: var(--default-padding);
}

.right-padding-l {
    padding-right: var(--large-padding);
}

.left-padding-s {
    padding-left: var(--small-padding);
}

.left-padding-m {
    padding-left: var(--default-padding);
}

.left-padding-l {
    padding-left: var(--large-padding);
}

.bottom-padding-s {
    padding-bottom: var(--small-padding);
}

.bottom-padding-m {
    padding-bottom: var(--default-padding);
}

.bottom-padding-l {
    padding-bottom: var(--large-padding);
}

.horz-padding-s {
    padding-left: var(--small-padding) !important;
    padding-right: var(--small-padding) !important;
}

.horz-padding-m {
    padding-left: var(--default-padding);
    padding-right: var(--default-padding);
}

.horz-padding-l {
    padding-left: var(--large-padding);
    padding-right: var(--large-padding);
}

.vert-padding-s {
    padding-top: var(--small-padding);
    padding-bottom: var(--small-padding);
}

.vert-padding-m {
    padding-top: var(--default-padding);
    padding-bottom: var(--default-padding);
}

.vert-padding-l {
    padding-top: var(--large-padding);
    padding-bottom: var(--large-padding);
}

.vert-padding-xl {
    padding-top: 30px;
    padding-bottom: 30px;
}

.all-padding-s {
    padding: var(--small-padding) !important;
}

.all-padding-m {
    padding: var(--default-padding) !important;
}

.all-padding-l {
    padding: var(--large-padding) !important;
}

.all-padding-xl {
    padding: 30px !important;
}

.no-padding {
    padding: 0 !important;
}

.no-vert-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.no-horz-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.no-right-padding {
    padding-right: 0;
}

.top-left-radius-s {
    border-top-left-radius: var(--small-radius);
}

.top-left-radius-m {
    border-top-left-radius: var(--default-radius);
}

.top-left-radius-l {
    border-top-left-radius: var(--large-radius);
}

.top-right-radius-s {
    border-top-right-radius: var(--small-radius);
}

.top-right-radius-m {
    border-top-right-radius: var(--default-radius);
}

.top-right-radius-l {
    border-top-right-radius: var(--large-radius);
}

.bottom-left-radius-s {
    border-bottom-left-radius: var(--small-radius);
}

.bottom-left-radius-m {
    border-bottom-left-radius: var(--default-radius);
}

.bottom-left-radius-l {
    border-bottom-left-radius: var(--large-radius);
}

.bottom-right-radius-s {
    border-bottom-right-radius: var(--small-radius);
}

.bottom-right-radius-m {
    border-bottom-right-radius: var(--default-radius);
}

.bottom-right-radius-l {
    border-bottom-right-radius: var(--large-radius);
}

.top-radius-s {
    border-top-left-radius: var(--small-radius);
    border-top-right-radius: var(--small-radius);
}

.top-radius-m {
    border-top-left-radius: var(--default-radius);
    border-top-right-radius: var(--default-radius);
}

.top-radius-l {
    border-top-left-radius: var(--large-radius);
    border-top-right-radius: var(--large-radius);
}

.bottom-radius-s {
    border-bottom-left-radius: var(--small-radius);
    border-bottom-right-radius: var(--small-radius);
}

.bottom-radius-m {
    border-bottom-left-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
}

.bottom-radius-l {
    border-bottom-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
}

.left-radius-s {
    border-top-left-radius: var(--small-radius);
    border-bottom-left-radius: var(--small-radius);
}

.left-radius-m {
    border-top-left-radius: var(--default-radius);
    border-bottom-left-radius: var(--default-radius);
}

.left-radius-l {
    border-top-left-radius: var(--large-radius);
    border-bottom-left-radius: var(--large-radius);
}

.right-radius-s {
    border-top-right-radius: var(--small-radius);
    border-bottom-right-radius: var(--small-radius);
}

.right-radius-m {
    border-top-right-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
}

.right-radius-l {
    border-top-right-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
}

.all-radius-s {
    border-radius: var(--small-radius);
}

.all-radius-m {
    border-radius: var(--default-radius);
}

.all-radius-l {
    border-radius: var(--large-radius);
}

.no-radius {
    border-radius: 0px !important;
}
.no-right-radius {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}
.no-top-radius {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.top-border-s {
    border-top: 1px solid var(--border-color);
}

.top-border-m {
    border-top: 2px solid var(--border-color);
}

.top-border-l {
    border-top: 3px solid var(--border-color);
}

.right-border-s {
    border-right: 1px solid var(--border-color);
}

.right-border-m {
    border-right: 2px solid var(--border-color);
}

.right-border-l {
    border-right: 3px solid var(--border-color);
}

.bottom-border-s {
    border-bottom: 1px solid var(--border-color);
}

.bottom-border-m {
    border-bottom: 2px solid var(--border-color);
}

.bottom-border-l {
    border-bottom: 3px solid var(--border-color);
}

.vert-border-s {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.vert-border-m {
    border-top: 2px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
}

.vert-border-l {
    border-top: 3px solid var(--border-color);
    border-bottom: 3px solid var(--border-color);
}

.horz-border-s {
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.horz-border-m {
    border-left: 2px solid var(--border-color);
    border-right: 2px solid var(--border-color);
}

.horz-border-l {
    border-left: 3px solid var(--border-color);
    border-right: 3px solid var(--border-color);
}

.all-border-s {
    border: 1px solid var(--border-color) !important;
}

.all-border-m {
    border: 2px solid var(--border-color);
}

.all-border-l {
    border: 3px solid var(--border-color);
}

.fb-left-border-s {
    border-left: 1px solid var(--border-color-light);
}

.fb-top-border-s {
    border-top: 1px solid var(--border-color-light);
}

.fb-right-border-s {
    border-right: 1px solid var(--border-color-light);
}

.fb-bottom-border-s {
    border-bottom: 1px solid var(--border-color-light);
}

.fb-all-border-s {
    border: 1px solid var(--border-color-light);
}

.top-border-s-hl {
    border-top: 1px solid var(--highlight-bg);
}

.top-border-m-hl {
    border-top: 2px solid var(--highlight-bg);
}

.top-border-l-hl {
    border-top: 3px solid var(--highlight-bg);
}

.left-border-s-hl {
    border-left: 1px solid var(--highlight-bg);
}

.left-border-m-hl {
    border-left: 2px solid var(--highlight-bg);
}

.left-border-l-hl {
    border-left: 3px solid var(--highlight-bg);
}

.right-border-s-hl {
    border-right: 1px solid var(--highlight-bg);
}

.right-border-m-hl {
    border-right: 2px solid var(--highlight-bg);
}

.right-border-l-hl {
    border-right: 3px solid var(--highlight-bg);
}

.bottom-border-s-hl {
    border-bottom: 1px solid var(--highlight-bg);
}

.bottom-border-m-hl {
    border-bottom: 2px solid var(--highlight-bg);
}

.bottom-border-l-hl {
    border-bottom: 3px solid var(--highlight-bg);
}

.vert-border-s-hl {
    border-top: 1px solid var(--highlight-bg);
    border-bottom: 1px solid var(--highlight-bg);
}

.vert-border-m-hl {
    border-top: 2px solid var(--highlight-bg);
    border-bottom: 2px solid var(--highlight-bg);
}

.vert-border-l-hl {
    border-top: 3px solid var(--highlight-bg);
    border-bottom: 3px solid var(--highlight-bg);
}

.horz-border-s-hl {
    border-left: 1px solid var(--highlight-bg);
    border-right: 1px solid var(--highlight-bg);
}

.horz-border-m-hl {
    border-left: 2px solid var(--highlight-bg);
    border-right: 2px solid var(--highlight-bg);
}

.horz-border-l-hl {
    border-left: 3px solid var(--highlight-bg);
    border-right: 3px solid var(--highlight-bg);
}

.all-border-s-hl {
    border: 1px solid var(--highlight-bg);
}

.all-border-m-hl {
    border: 2px solid var(--highlight-bg);
}

.all-border-l-hl {
    border: 3px solid var(--highlight-bg);
}

.visible-ex {
    visibility: visible;
}

.invisible-ex {
    visibility: hidden;
}

.bg-color-def { background-color: var(--background-color) !important; }
.bg-color-invert { background-color: var(--background-color-invert) !important; }
.bg-color-dark { background-color: var(--gc-top-left) !important; }
.bg-color-page { background-color: var(--page-background) !important; }
.bg-color-light-shade { background-color: var(--shade-back-color-light) !important; }
.bg-color-dark-shade { background-color: var(--shade-back-color-dark) !important; }
.bg-color-highlight { background-color: var(--highlight-bg) !important; color: var(--highlight-bg-text) !important;}
.bg-color-highlight>svg { stroke: var(--highlight-bg-text) !important; }
.bg-color-black { background-color: #000; }
.bg-color-none { background-color: transparent; }
.bg-color-info { background-color: var(--bg-color-info) !important; }
.bg-color-warn { background-color: var(--bg-color-warn) !important; }
.bg-color-error { background-color: var(--bg-color-error) !important; }
.bg-color-red { background-color: var(--color-active-red) !important; }
.bg-color-green { background-color: var(--color-active-green) !important; }
.bg-color-orange { background-color: var(--color-active-orange) !important; }
.bg-color-brand-1 { background-color: var(--brand-color-1) !important; }
.bg-color-brand-2 { background-color: var(--brand-color-2) !important; }
.bg-color-brand-3 { background-color: var(--brand-color-3) !important; }
.bg-color-brand-4 { background-color: var(--brand-color-4) !important; }
.bg-color-shade { background-color: var(--shade-back-color) !important; }
.bg-color-brand-1>svg { stroke: #000 !important; }
.bg-color-brand-2>svg { stroke: #fff !important; }
.bg-color-brand-3>svg { stroke: #fff !important; }
.bg-color-brand-4>svg { stroke: #fff !important; }

.default-shadow {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05);
}

.bottom-shadow {
    box-shadow: 0 8px 25px rgba(99, 102, 241, .12), 0 4px 10px rgba(99, 102, 241, .08);
}

.focused {
    background-color: var(--hover-bg-color) !important;
}

.highlight.focused {
    background-color: var(--highlight-bg-darker) !important;
}

/*
--font-size-smallest: 0.80rem;
    --font-size-smaller: 0.87rem;
    --font-size-small: 0.94rem;
    --font-size-normal: 1.00rem;
    --font-size-large: 1.1rem;
    --font-size-larger: 1.2rem;
    --font-size-largest: 1.3rem;
    --font-size-extra-largest: 1.5rem;
*/
.smallest-font { font-size: var(--font-size-smallest) !important; }
.smaller-font { font-size: var(--font-size-smaller) !important; }
.small-font { font-size: var(--font-size-small) !important; }
.normal-font { font-size: var(--font-size-small) !important; }
.large-font { font-size: var(--font-size-large) !important; }
.larger-font { font-size: var(--font-size-larger) !important; }
.largest-font { font-size: var(--font-size-largest) !important; }
.extra-largest-font { font-size: var(--font-size-extra-largest) !important; }

.normal-text, .normal-text * { color: var(--text-color) !important; }
.invert-text, .invert-text * { color: var(--text-color-invert) !important; }
.grayed-text, .grayed-text * { color: var(--grayed-text-color) !important; }
.deemed-text, .deemed-text * { color: var(--deemed-text-color) !important; }
.error-text, .error-text * { color: var(--color-active-red) !important; }

.nowrap { white-space: nowrap !important; }

.left-text {
    text-align: left !important;
}

.center-text {
    text-align: center !important;
}

.right-text {
    text-align: right !important;
}

.no-bold-text {
    font-weight: 400 !important;
}

.light-bold-text {
    font-weight: 500 !important;
}

.bold-text {
    font-weight: 700 !important;
}

.heavy-bold-text {
    font-weight: 900 !important;
}

.caption-prefix {
    font-size: 1.3rem;
    color: var(--brand-color-3);
}

.caption-suffix {
    color: var(--text-color);
}

.min-height-descriptive {
    min-height: 120px;
}

input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=text],
.input-check,
.input-type {
    width: 100%;
    min-height: 36px;
    border: none;
    margin-right: 0;
    border-radius: var(--small-radius);
    padding: var(--small-padding);
    background-color: var(--input-bg);
}

.input-type {
    padding: 0px;
}

input[type=email]:hover,
input[type=number]:hover,
input[type=password]:hover,
input[type=search]:hover,
input[type=text]:hover,
textarea:hover,
.input-check:hover,
.input-type:hover {
    background-color: var(--input-bg-hover);
}

input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=text]:focus,
textarea:focus,
.input-check:focus,
.input-type:focus {
    background-color: var(--input-bg-focused);
}

.input-check,
.input-type {
    margin: 0px;
    cursor: pointer;
}

textarea {
    width: 100%;
    border-radius: var(--small-radius);
    border: none;
    padding: var(--small-padding);
    overflow-y: auto;
    resize: none;
    line-height: 1.75em;
    font-size: 1rem !important;
    background-color: var(--input-bg);
}

.buttonex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--default-gap);
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    margin-right: var(--default-margin);
    border: 1px solid var(--border-color);
    background-color: var(--button-back-color);
    cursor: pointer;
}

.buttonex.small {
    padding: var(--small-padding) var(--default-padding);
    /* padding-right: var(--default-padding); */
    border-radius: var(--small-radius);
}
.buttonex.small svg {
    transform: scale(90%);
}

.buttonex:last-child {
    margin-right: 0;
}

.buttonext-def-dim {
    width: 120px;
}

.default-button {
    border-color: transparent;
    background: linear-gradient(135deg, var(--shade-back-color) 0, var(--shade-back-color-dark) 100%);
    box-shadow: 0 2px 4px var(--shade-back-color);
    transition: all .2s ease;
}

.default-button:hover {
    border-color: var(--border-color);
    box-shadow: 0 4px 8px var(--shade-back-color-dark);
}

.action-button,
.oddapy-tour-next {
    background: linear-gradient(135deg, #de2127 0, #b91c1c 100%);
    color: #fff;
    border-color: transparent;
    transition: all .2s ease;
    box-shadow: 0 2px 4px rgba(222, 33, 39, .3);
}

.action-button:visited,
.oddapy-tour-next:visited {
    color: var(--highlight-bg-text) !important;
}

.action-button:hover,
.oddapy-tour-next:hover {
    border-color: #de2127;
    box-shadow: 0 4px 8px rgba(222, 33, 39, .4);
}

.action-button:active,
.oddapy-tour-next:active {
    border-color: #de2127;
    box-shadow: 0 4px 8px rgba(222, 33, 39, .6);
}

.action-button>*,
.oddapy-tour-next>* {
    color: var(--highlight-bg-text) !important;
}

.action-button>svg,
.oddapy-tour-next>svg {
    stroke: var(--highlight-bg-text);
}

.tb-button {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    margin-right: var(--small-margin);
    border: none;
    background-color: transparent;
    position: relative;
    cursor: pointer;
}

.tb-button:last-child {
    margin-right: 0;
}

.tb-button:hover {
    background-color: var(--hover-bg-color);
}

.tb-button:active {
    background-color: var(--hover-bg-color-dark);
}

.tb-button>svg {
    cursor: pointer;
}

.tb-button:active>* {
    transform: translateY(1px) translateX(1px);
}

.tb-button.large {
    padding: var(--large-padding);
    border-radius: var(--default-radius);
}

.tb-button.small {
    padding: var(--small-padding);
    border-radius: var(--small-radius);
}
.tb-button.small svg {
    transform: scale(90%);
}

.tb-button.rounded-border-full {
    padding: var(--default-padding) var(--small-padding) !important;
}

.tb-button:disabled:hover {
    background-color: transparent;
}

.tb-button:disabled:active>* {
    transform: translateY(0) translateX(0);
}

.tb-button:disabled>svg {
    stroke: var(--shade-back-color);
}

.tb-button.lowlight {
    background-color: var(--background-color);
}

.tb-button.highlight,
.tb-button.highlight:hover {
    background-color: var(--brand-color-2);
}

.tb-button.highlight>svg {
    stroke: var(--highlight-bg-text);
}

.list-button {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: start;
    padding: var(--default-padding) var(--large-padding);
    width: 100%;
    border-radius: 0;
    border-bottom: 1px solid var(--border-color);

    color: var(--text-color) !important;
}

.list-button:first-child {
    border-top-left-radius: var(--default-radius);
    border-top-right-radius: var(--default-radius);
}

.list-button:last-child {
    border-bottom-left-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
    border: none;
}

.list-button:hover {
    background-color: var(--hover-bg-color);
    color: var(--text-color) !important;
}

.list-button:active,
.list-button:visited {
    background-color: var(--hover-bg-color-dark);
    color: var(--text-color) !important;
}

.icon-s {
    width: 16px !important;
    height: 16px !important;
}

.icon-m {
    width: 24px !important;
    height: 24px !important;
}

.icon-l {
    width: 36px !important;
    height: 36px !important;
}

.caption-ex {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

.single-line-text-ex {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

textarea.multi-line-text-ex {
    min-height: 100px;
    padding: var(--small-padding);
}

.multi-line-text-ex {
    display: inline-block;
    white-space: wrap;
    overflow-x: hidden;
    overflow-y: auto;
}

.description-ex {
    display: inline-block;
    width: 100%;
}

.sliding-window {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: transform .3s ease-out, opacity .3s ease-out, z-index 0s linear .3s;
}

.sliding-window.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    transition: transform .3s ease-out, opacity .3s ease-out;
}

.sliding-window.closing {
    transform: translateX(0);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity .3s ease-out;
}

.default-form {
    border-radius: var(--default-radius);
}

.option-group {
    gap: 0;
    width: 100%;
    border-radius: var(--small-radius);
}

.option-group>.option {
    display: inline-block;
    flex-grow: 1;
    flex-shrink: 1;
    width: 64px;
    height: 44px;
    border: none;
    background-color: var(--page-background);
    border-right: 1px solid var(--border-color);
    cursor: pointer;
}

.option-group>.option:hover:not(:disabled) {
    background-color: var(--highlight-bg);
    border-color: var(--highlight-bg);
    color: var(--highlight-bg-text);
}

.option-group>.option:first-child {
    border-top-left-radius: var(--small-radius);
    border-bottom-left-radius: var(--small-radius);
}

.option-group>.option:last-child {
    border-right: none;
    border-top-right-radius: var(--small-radius);
    border-bottom-right-radius: var(--small-radius);
}

.option-group>.option.active {
    background-color: var(--highlight-bg);
    border-color: var(--highlight-bg);
    color: var(--highlight-bg-text);
}

.time-presets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--small-gap);
}

.time-presets .time-tablet {
    background-color: var(--page-background);
    border: 1px solid var(--border-color-light);
    border-radius: var(--small-radius);
    padding: 8px 3px;
    cursor: pointer;
}

.time-presets .time-tablet:hover {
    background-color: var(--highlight-bg);
    border-color: var(--highlight-bg);
    color: var(--highlight-bg-text);
}

.time-presets .time-tablet.active {
    background-color: var(--highlight-bg);
    border-color: var(--highlight-bg);
    color: var(--highlight-bg-text);
}

.time-presets .time-tablet.disabled {
    color: var(--deemed-text-color);
}

.floating-window-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100;
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.floating-window-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.floating-window-backdrop.close {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.floating-window {
    position: fixed;
    max-width: 500px;
    max-height: 90vh;
    padding: 0;
    display: none;
    background-color: var(--page-background);
    box-shadow: rgba(101, 122, 122, .3) 0 0 0 2px, rgba(101, 122, 122, .6) 0 4px 6px -1px, rgba(101, 122, 122, .05) 0 1px 0 inset;
}

.floating-window-full-height {
    max-width: 500px;
    top: 0;
    height: 100%;
    border: none;
    display: none;
    background-color: var(--background-color);
}

.floating-window-full-screen {
    max-width: 100%;
    max-height: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: none;
    background-color: var(--background-color);
}

.floating-window-body {
    align-items: start;
    justify-content: start;
    flex-grow: 1;
    flex-shrink: 1;
    height: 100%;
    width: 100%;
    padding: 0;
    overflow-y: auto;
}

.user-settings-form {
    width: 400px;
}

.task-form {
    width: 500px;
    max-width: 100%;
}

.fol-selector,
.upload-form {
    width: 500px;
    /* min-height: 600px; */
}

.icon-form {
    width: 500px;
    min-height: 300px;
    max-height: 600px;
}

.module-form .module-name {
    padding: var(--default-padding) !important;
    border: 1px solid var(--border-color) !important;
    height: 2.5rem !important;
}

.upload-form {
    width: 500px;
    height: auto;
    max-height: 95%;
    min-height: 450px;
    padding: 0;
}

.upload-form .file-summary {
    width: 100%;
    height: auto;
    max-height: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    text-align: center;
    font-weight: bold;
    background-color: var(--shade-back-color);
}

.task-editor-slot-field>label {
    max-width: 130px !important;
}

.editable-control {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    position: relative;
    background-color: transparent;
    cursor: pointer;
}

.disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: var(--default-padding);
    border: none;
    overflow: hidden;
    background-color: var(--disc-bg);
    cursor: pointer;
}

.disc>img {
    object-fit: unset !important;
    width: 24px !important;
    height: 24px !important;
}

.warning-confirmation {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fafad2;
    border: 1px solid #bdb76b;
    padding: var(--small-padding);
    margin-bottom: 0;
    border-radius: var(--small-radius);
    cursor: pointer;
}

.unsvg {
    fill: unset !important;
    stroke: unset !important;
    stroke-width: unset !important;
    stroke-linecap: unset !important;
    stroke-linejoin: unset !important;
    flex-grow: unset !important;
    flex-shrink: unset !important;
    width: unset !important;
    height: unset !important;
    margin: unset !important;
    transition: unset !important;
}

.unsvg>.unsvg-base {
    fill: rgba(95, 196, 229, 0.25);
    stroke: var(--shade-back-color-dark);
}

.unsvg>.unsvg-highlight {
    fill: var(--brand-color-2);
    stroke: var(--brand-color-2);
}

.oside-menu {
    width: 400px !important;
}

.context-menu {
    width: auto;
    min-width: 300px;
    max-width: 500px;
    height: auto;
    padding: var(--small-padding);
}

.default-list-item {
    border-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom: 1px solid var(--border-color);

    cursor: pointer;
}

.default-list-item:last-child {
    border-bottom-left-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
    border-bottom: none;
}

.default-list-item:first-child {
    border-top-left-radius: var(--default-radius);
    border-top-right-radius: var(--default-radius);
}

.slot-viewer-priority {
    padding: 5px 10px;
    border-radius: var(--small-radius);
    height: 40px;
    cursor: pointer;
}

.slot-viewer-priority:hover {
    background-color: var(--shade-back-color);
}

.summary-line-item {
    /* border-bottom: 1px solid var(--border-color); */
    padding: var(--small-padding) var(--default-padding);
}

.summary-line-item:first-child {
    border-top-left-radius: var(--small-radius);
    border-top-right-radius: var(--small-radius);
}

.summary-line-item:last-child {
    border-bottom-left-radius: var(--small-radius);
    border-bottom-right-radius: var(--small-radius);
    border-bottom: none !important;
}

.summary-line-item.clickable {
    cursor: pointer;
}

.summary-line-item.clickable:hover {
    background-color: var(--hover-bg-color);
}

.summary-line-item.clickable:after {
    content: "";
    display: inline-block;
    width: 30px;
    height: 24px;
    background-image: var(--icon-more-h);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(5px) scale(105%);
    margin-left: 5px;
}

.summary-line-item.non-clickable {
    cursor: default;
}

.summary-line-item.non-clickable:after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: var(--icon-blank);
    background-size: contain;
    background-repeat: no-repeat;
}

.no-after:after {
    content: unset !important;
    display: unset !important;
    width: unset !important;
    height: unset !important;
    background-image: unset !important;
    background-size: unset !important;
    background-repeat: unset !important;
}

.clickable-browse-button{
    cursor: pointer;
}
.clickable-browse-button:hover{
    background-color: var(--input-bg-hover);
}
.clickable-browse-button:after {
    content: "";
    display: inline-block;
    width: 30px;
    height: 24px;
    background-image: var(--icon-more-h);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 5px;
}

.inline-description {
    max-height: 150px;
    overflow-y: auto;
    line-height: 1.75em;
    white-space: pre-line;
}

span.highlight {
    color: var(--highlight-bg-text-color) !important;
}

a.highlight {
    background-color: var(--highlight-bg) !important;
}

a.highlight>*>span,
a.highlight>span {
    color: var(--highlight-bg-text) !important;
}

.highlight-on-hover:hover {
    background-color: var(--hover-bg-color);
}

input[type=text].highlight-on-hover:hover {
    background-color: transparent;
    cursor: pointer;
}

svg.owned-creation.highlight,
svg.owned-share.highlight {
    stroke: var(--dark-svg-stroke);
}

.highlight>.stroke-red {
    stroke: #dc3545 !important;
}

svg.check.highlight {
    background-color: var(--shade-back-color-light);
    padding: 3px;
    width: 30px;
    height: 30px;
    border-radius: var(--small-radius);
}

svg.favorite.highlight {
    stroke: var(--color-active-red) !important;
    fill: var(--color-active-red);
}

svg.tag.highlight {
    stroke: var(--color-active-red) !important;
}

svg.highlight::after {
    border-bottom: 2px solid var(--highlight-bg);
}

svg.share.highlight {
    stroke: var(--color-active-blue-dark) !important;
}

svg.lock.highlight {
    stroke: var(--color-active-blue) !important;
}

svg.delete.highlight {
    stroke: var(--color-active-blue-dark) !important;
}

svg.archive.highlight {
    stroke: var(--color-active-yellow) !important;
}

svg.hide.highlight {
    stroke: var(--color-active-red);
}

svg.attachment.highlight {
    stroke: var(--color-active-blue);
}

.slot-container {
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
    padding: 2px 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    transition: all .2s ease-in-out;
    z-index: 1;
}

.slot-container:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
}

.slot-container .task-attachment>svg,
.slot-container .task-status>svg {
    stroke: var(--priority-text-color);
    transform: translateY(5px);
}

.slot-container .snippet {
    margin: 2px 0;
    font-size: .85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slot-container .task-caption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .9em;
}

.shopping-time {
    gap: var(--small-gap);
    padding: var(--small-padding);
    background-color: var(--background-color) !important;
}

.myday-task-item.priority-high-bg,
.slot-container.priority-high-bg {
    background-color: var(--priority-high-light) !important;
}

.myday-task-item.priority-medium-bg,
.slot-container.priority-medium-bg {
    background-color: var(--priority-medium-light) !important;
}

.myday-task-item.priority-normal-bg,
.slot-container.priority-normal-bg {
    background-color: var(--priority-normal-light) !important;
}

.myday-task-item.priority-low-bg,
.slot-container.priority-low-bg {
    background-color: var(--priority-low-light) !important;
}

.myday-task-item.priority-least-bg,
.slot-container.priority-least-bg {
    background-color: var(--priority-least-light) !important;
}

.myday-task-item.priority-high-border,
.slot-container.priority-high-border {
    border: 1px solid var(--priority-high) !important;
    border-left-width: 6px !important;
}

.myday-task-item.priority-medium-border,
.slot-container.priority-medium-border {
    border: 1px solid var(--priority-medium) !important;
    border-left-width: 6px !important;
}

.myday-task-item.priority-normal-border,
.slot-container.priority-normal-border {
    border: 1px solid var(--priority-normal) !important;
    border-left-width: 6px !important;
}

.myday-task-item.priority-low-border,
.slot-container.priority-low-border {
    border: 1px solid var(--priority-low) !important;
    border-left-width: 6px !important;
}

.myday-task-item.priority-least-border,
.slot-container.priority-least-border {
    border: 1px solid var(--priority-least) !important;
    border-left-width: 6px !important;
}

.sl-item.priority-high-border {
    border-left: 6px solid var(--priority-high) !important;
}

.sl-item.priority-medium-border {
    border-left: 6px solid var(--priority-medium) !important;
}

.sl-item.priority-normal-border {
    border-left: 6px solid var(--priority-normal) !important;
}

.sl-item.priority-low-border {
    border-left: 6px solid var(--priority-low) !important;
}

.sl-item.priority-least-border {
    border-left: 6px solid var(--priority-least) !important;
}

.sl-item.priority-none-border {
    border-left: 6px solid var(--grayed-text-color) !important;
}

.sl-item {
    background-color: transparent;
    cursor: pointer;
}

.sl-item:first-child {
    border-top-left-radius: var(--small-radius);
    border-top-right-radius: var(--small-radius);
}

.sl-item:last-child {
    border-bottom-left-radius: var(--small-radius);
    border-bottom-right-radius: var(--small-radius);
}

.sl-item:hover {
    background-color: var(--hover-bg-color);
}

.sl-item .description {
    color: var(--text-color);
}

.sl-item .snippet {
    color: var(--grayed-text-color);
    line-height: 1rem;
}

.sl-item.completed span.name {
    color: var(--deemed-text-color) !important;
    text-decoration: line-through;
}

.sl-item-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--small-radius);
}

.sl-item-status,
.sl-item-status * {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--grayed-text-color);
}

.item-snippet {
    margin: 0;
    text-align: left;
    color: var(--grayed-text-color) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25rem !important;
}
.item-snippet * {
    margin: 0;
    text-align: left;
    color: var(--grayed-text-color) !important;
    font-size: .8rem;
}

.floating-window.inner-scroller {
    max-height: 90vh;
    overflow: hidden !important;
}

.floating-window-body.non-scrollable-body {
    overflow: hidden !important;
    min-height: 0;
}

.floating-window-body.non-scrollable-body>.column,
.floating-window-body.non-scrollable-body>.column>.column {
    flex: 1 1 auto;
    min-height: 0;
}

.floating-window-body.non-scrollable-body .overflow-autoY {
    overflow-y: visible !important;
}

.floating-window-body.non-scrollable-body .scrollable-container {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto !important;
}

.floating-window-body.non-scrollable-body .scrollable-container>.column {
    overflow: visible !important;
    min-height: 0;
}

.module-icon {
    transform: scale(120%);
}

.disc.high-priority,
.flat-list-item-container.high-priority,
.myday-task-item.high-priority,
.slot-container.high-priority,
.task-list-item-container.high-priority {
    background-color: var(--priority-high-light);
    border-left: 10px solid var(--priority-high);
}

.disc.high-priority {
    border-left-width: unset;
}

.high-priority>svg,
svg.high-priority {
    fill: var(--priority-high);
    stroke: var(--priority-high);
}

.disc.medium-priority,
.flat-list-item-container.medium-priority,
.myday-task-item.medium-priority,
.slot-container.medium-priority,
.task-list-item-container.medium-priority {
    background-color: var(--priority-medium-light);
    border-left: 10px solid var(--priority-medium);
}

.disc.medium-priority {
    border-left-width: unset;
}

.medium-priority>svg,
svg.medium-priority {
    stroke: var(--priority-medium);
}

.disc.normal-priority,
.flat-list-item-container.normal-priority,
.myday-task-item.normal-priority,
.slot-container.normal-priority,
.task-list-item-container.normal-priority {
    background-color: var(--priority-normal-light);
    border-left: 10px solid var(--priority-normal);
}

.disc.normal-priority {
    border-left-width: unset;
}

.normal-priority>svg,
svg.normal-priority {
    stroke: var(--priority-normal);
}

.disc.low-priority,
.flat-list-item-container.low-priority,
.myday-task-item.low-priority,
.slot-container.low-priority,
.task-list-item-container.low-priority {
    background-color: var(--priority-low-light);
    border-left: 10px solid var(--priority-low);
}

.disc.low-priority {
    border-left-width: unset;
}

.low-priority>svg,
svg.low-priority {
    stroke: var(--priority-low);
}

.disc.least-priority,
.flat-list-item-container.least-priority,
.myday-task-item.least-priority,
.slot-container.least-priority,
.task-list-item-container.least-priority {
    background-color: var(--priority-least-light);
    border-left: 10px solid var(--priority-least);
}

.myday-task-item.status-incomplete .title {
    text-decoration: none;
    color: var(--text-color);
}

.myday-task-item.status-complete .title {
    text-decoration: line-through;
    color: var(--status-color-completed);
}

.myday-task-item.status-cancelled .title {
    text-decoration: line-through;
    color: var(--status-color-cancelled);
}

.high-priority>svg,
.least-priority>svg,
.low-priority>svg,
.medium-priority>svg,
.normal-priority>svg {
    stroke: #000 !important;
}

svg.high-priority {
    fill: var(--priority-high);
    stroke: var(--priority-high);
}

svg.medium-priority {
    fill: var(--priority-medium);
    stroke: var(--priority-medium);
}

svg.normal-priority {
    fill: var(--priority-normal);
    stroke: var(--priority-normal);
}

svg.low-priority {
    fill: var(--priority-low);
    stroke: var(--priority-low);
}

svg.least-priority {
    fill: var(--priority-least);
    stroke: var(--priority-least);
}

.card-item.selection-enabled .data-card-selection {
    display: block;
}

.hcard-container {
    display: grid;
    grid-template-columns: repeat(var(--cards-per-row, 3), 1fr);
    gap: var(--default-gap);
    align-items: start;
}

.hcard-container>.hcard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border-radius: var(--default-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.hcard-container>.hcard>.card-graph {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.hcard-container>.hcard>.h-panel {
    height: 54px;
    width: 100%;
    flex-shrink: 0;
}

.wrapper {
    display: block;
    column-count: var(--cards-per-row, 3);
    column-gap: var(--small-gap);
    align-items: initial;
    justify-content: initial;
    flex-direction: initial;
    flex-wrap: initial;
}

.wrapper>.m-card {
    break-inside: avoid;
    border-radius: var(--default-radius);
    overflow: hidden;
    margin-bottom: var(--small-margin);
    border: 1px solid var(--border-color);
    position: relative;
    cursor: pointer;
}

.wrapper>.m-card>img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
}

.wrapper>.m-card>.custom-cover {
    width: 100%;
    height: auto;
    min-height: 200px;
}

.hlist-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--small-gap);
}

.hlist-container>.item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--default-gap);
    padding: var(--small-padding);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    position: relative;
}

.hlist-container>.item:last-child {
    border: none;
}

.hlist-container>.item:hover {
    background-color: var(--hover-bg-color);
}

.hlist-container>.item>.item-thumb {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: var(--default-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hlist-container>.item>.item-thumb>svg {
    transform: scale(200%);
}

.hlist-container>.item>.item-thumb>img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.hlist-container>.item>.item-body {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 100px;
}

.hlist-container>.item>.item-body>.item-name {
    display: inline-block;
}

.hlist-container>.item>.item-body>.description {
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .9rem !important;
}

.hlist-container>.item>.item-body>.info-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: var(--small-gap);
    padding: var(--small-padding);
}

.hlist-container>.item>.item-command {
    max-width: 50px;
    flex-grow: 0;
    flex-shrink: 0;
}

.rte-top-toolbar {
    border: 1px solid var(--border-color);
}

.rte-editor {
    border: none;
}

.player-highlight {
    background-color: var(--player-brand-cyan) !important;
}

.player-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--player-bg);
    display: none;
    z-index: 9999;
    overflow: hidden;
}

.player-container.active {
    display: block;
}

.player-view {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: var(--player-bg);
}

.player-view>video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;
}

.player-view>audio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.player-image-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform var(--player-transition-slide), opacity var(--player-transition-smooth);
}

.player-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.player-boundary-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--player-brand-cyan) 20%, var(--player-brand-cyan) 80%, transparent);
    opacity: 0;
    transition: opacity var(--player-transition-normal);
    pointer-events: none;
    box-shadow: 0 0 20px var(--player-brand-cyan);
}

.player-boundary-indicator.left {
    left: 0;
}

.player-boundary-indicator.right {
    right: 0;
}

.player-boundary-indicator.active {
    opacity: .8;
    animation: pulse-glow 1s ease-in-out infinite;
}

.player-container>.top-bar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 16px;
    gap: 8px;
    z-index: 100;
    transition: opacity var(--player-transition-normal), transform var(--player-transition-normal);
}

.player-container>.top-bar.hidden {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

.player-container>.top-bar>.tb-button,
.player-floating-button {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--player-glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--player-glass-border);
    border-radius: var(--player-radius-medium);
    cursor: pointer;
    transition: all var(--player-transition-normal);
    position: relative;
    overflow: hidden;
}

.player-container>.top-bar>.tb-button::before,
.player-floating-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--player-hover-bg) 0, transparent 70%);
    opacity: 0;
    transition: opacity var(--player-transition-fast);
}

.player-container>.top-bar>.tb-button:hover,
.player-floating-button:hover {
    background: var(--player-glass-bg-hover);
    border-color: var(--player-glass-border-bright);
    transform: translateY(-2px);
    box-shadow: var(--player-shadow-soft);
}

.player-container>.top-bar>.tb-button:hover::before,
.player-floating-button:hover::before {
    opacity: 1;
}

.player-container>.top-bar>.tb-button:active,
.player-floating-button:active {
    transform: translateY(0);
}

.player-container>.top-bar>.tb-button.highlight,
.player-floating-button.highlight {
    background: var(--player-active-bg);
    border-color: var(--player-brand-cyan);
    box-shadow: var(--player-shadow-glow);
}

.player-container>.top-bar>.tb-button>svg,
.player-floating-button>svg {
    width: 24px;
    height: 24px;
    stroke: var(--player-text-primary);
    fill: none;
    stroke-width: 2px;
    transition: all var(--player-transition-fast);
}

.player-container>.top-bar>.tb-button.highlight>svg,
.player-floating-button.highlight>svg {
    stroke: var(--player-brand-cyan);
    filter: drop-shadow(0 0 4px var(--player-brand-cyan));
}

.player-container>.left-arrow,
.player-container>.right-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    width: 56px;
    height: 56px;
    transition: all var(--player-transition-normal);
}

.player-container>.left-arrow {
    left: 16px;
}

.player-container>.right-arrow {
    right: 16px;
}

.player-container>.left-arrow:hover,
.player-container>.right-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

.player-control-bar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    max-width: 800px;
    background: var(--player-glass-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--player-glass-border);
    border-radius: var(--player-radius-large);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--player-shadow-medium);
    z-index: 100;
    transition: all var(--player-transition-normal);
}

.player-control-bar.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    pointer-events: none;
}

.player-track-name {
    color: var(--player-text-primary);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.progress-bar-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.progress-bar-container .time {
    color: var(--player-text-secondary);
    font-size: 12px;
    font-weight: 500;
    min-width: 60px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.progress-bar {
    flex: 1;
    position: relative;
}

.player-control-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.player-control-container .mbutton,
.player-control-container .tbutton {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: 0 0;
    border: 1px solid transparent;
    border-radius: var(--player-radius-medium);
    cursor: pointer;
    transition: all var(--player-transition-normal);
    position: relative;
}

.player-control-container .mbutton {
    width: 56px;
    height: 56px;
    background: var(--player-brand-cyan);
    border-color: var(--player-brand-cyan);
    box-shadow: 0 4px 16px rgba(95, 196, 229, .3);
}

.player-control-container .mbutton:hover,
.player-control-container .tbutton:hover {
    background: var(--player-hover-bg);
    transform: scale(1.05);
}

.player-control-container .mbutton:hover {
    background: var(--player-brand-cyan);
    filter: brightness(1.1);
    box-shadow: 0 6px 24px rgba(95, 196, 229, .4);
}

.player-control-container .mbutton:active,
.player-control-container .tbutton:active {
    transform: scale(.95);
}

.player-control-container .mbutton>svg,
.player-control-container .tbutton>svg {
    width: 24px;
    height: 24px;
    stroke: var(--player-text-primary);
    fill: none;
    stroke-width: 2px;
}

.player-control-container .mbutton>svg {
    width: 28px;
    height: 28px;
    stroke: #000;
    fill: #000;
}

input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    background: 0 0;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

input[type=range]:focus {
    outline: 0;
}

input[type=range]::-webkit-slider-runnable-track {
    height: 6px;
    background: var(--player-glass-border);
    border-radius: 3px;
    transition: background var(--player-transition-fast);
}

input[type=range]:hover::-webkit-slider-runnable-track {
    background: var(--player-glass-border-bright);
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--player-brand-cyan);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
    box-shadow: 0 2px 8px rgba(95, 196, 229, .4);
    transition: all var(--player-transition-fast);
}

input[type=range]:hover::-webkit-slider-thumb {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(95, 196, 229, .6);
}

input[type=range]:active::-webkit-slider-thumb {
    transform: scale(1.3);
}

input[type=range]::-moz-range-track {
    height: 6px;
    background: var(--player-glass-border);
    border-radius: 3px;
    border: none;
}

input[type=range]::-moz-range-progress {
    height: 6px;
    background: var(--player-brand-cyan);
    border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--player-brand-cyan);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(95, 196, 229, .4);
    transition: all var(--player-transition-fast);
}

input[type=range]:hover::-moz-range-thumb {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(95, 196, 229, .6);
}

input[type=range]:active::-moz-range-thumb {
    transform: scale(1.3);
}

input[type=range].dark::-moz-range-track {
    background: var(--player-glass-border);
}

input[type=range].dark::-moz-range-progress {
    background: var(--player-brand-cyan);
}

input[type=range].dark::-moz-range-thumb {
    background: var(--player-brand-cyan);
}

.player-play-list-container {
    position: fixed;
    left: 50%;
    top: 100px;
    bottom: 190px;
    width: calc(100% - 48px);
    max-width: 500px;
    transform: translateX(-50%);
    background: var(--player-glass-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--player-glass-border);
    border-radius: var(--player-radius-large);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--player-shadow-medium);
    z-index: 101;
    transition: all var(--player-transition-normal);
}

.player-play-list-container.hidden {
    opacity: 0;
    transform: translateX(-50%) scale(.95);
    pointer-events: none;
}

.play-list-caption-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--player-overlay-light);
    border-bottom: 1px solid var(--player-glass-border);
}

.play-list-caption-bar .caption {
    color: var(--player-text-primary) !important;
    font-size: 16px;
    font-weight: 600;
}

.play-list-caption-bar .tb-button {
    width: 36px;
    height: 36px;
}

.player-play-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.player-play-list::-webkit-scrollbar {
    width: 8px;
}

.player-play-list::-webkit-scrollbar-track {
    background: 0 0;
}

.player-play-list::-webkit-scrollbar-thumb {
    background: var(--player-glass-border);
    border-radius: 4px;
}

.player-play-list::-webkit-scrollbar-thumb:hover {
    background: var(--player-glass-border-bright);
}

.player-play-list>.item {
    background: var(--player-overlay-light);
    border: 1px solid transparent;
    border-radius: var(--small-radius);
    padding: 12px 16px;
    cursor: pointer;
    transition: all var(--player-transition-normal);
}

.player-play-list>.item:hover {
    background: var(--player-glass-bg-hover);
    border-color: var(--player-glass-border);
    transform: translateX(4px);
}

.player-play-list>.item.highlight {
    background: var(--player-active-bg);
    border-color: var(--player-brand-cyan);
}

.player-play-list>.item>div>span {
    color: var(--player-text-secondary) !important;
    font-size: 14px;
}

.player-play-list>.item.highlight>div>span {
    color: var(--player-brand-cyan) !important;
    font-weight: 500;
}

.player-play-list>.item>div>svg {
    color: var(--player-text-secondary) !important;
    fill: var(--player-text-secondary);
}

.player-play-list>.item.highlight>div>svg {
    color: var(--player-brand-cyan) !important;
    fill: var(--player-brand-cyan);
}

.player-glass-effect {
    background: var(--player-glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--player-glass-border);
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.top-bar-caption {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.top-bar-caption>span {
    color: var(--player-text-primary);
    font-weight: bold;
}

[draggable="true"] {
    touch-action: none;
}

.lined-list {
    background-color: var(--page-background);
    padding: 10px;
    border-radius: var(--default-radius);
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, .1), 0 0 24px 6px rgba(0, 0, 0, .06);
    list-style: none;
}

.lined-list>li {
    border-bottom: 1px solid var(--border-color);
    padding: 5px 0px;
}

.lined-list>li:last-child {
    border-bottom: none;
}

#bottomNavBar {
    justify-content: space-around;
    padding-bottom: var(--bottom-nav-bottom-padding);
    padding-top: var(--default-padding);
}

.wrapper>.m-card,
.wrapper>.hcard,
.wrapper>.item,
.dataviewer-item {
    touch-action: pan-y;
}

@media only screen and (max-width:768px) {
    * {
        font-size: 1.1rem;
    }

    .sidebar-container {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 280px;
        max-width: 80vw;
        z-index: 100;
        transform: translateX(-100%);
        box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
    }

    .sidebar-container.visible {
        transform: translateX(0);
    }

    .sidebar-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .5);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
    }

    .sidebar-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    body {
        position: fixed;
        width: 100%;
    }

    .toolbar>.search-bar {
        max-width: unset;
    }

    .full-height-form,
    .side-menu .popup-form {
        padding-bottom: 50px;
    }

    .floating-info-container {
        max-width: 100%;
        width: 100%;
        height: auto;
        max-height: 90%;
        bottom: 0;
        border-radius: 0;
        border-top-left-radius: var(--default-radius);
        border-top-right-radius: var(--default-radius);
        border: none;
        padding-bottom: 50px !important;
    }

    .show-on-mobile {
        display: unset !important;
    }

    .hide-on-mobile {
        display: none !important;
    }

    .app-caption-container>.month {
        font-size: 1.5rem !important;
    }

    .app-caption-container>.year {
        font-size: 1.25rem !important;
    }

    .popup-form {
        max-width: 100%;
        width: 100%;
        height: auto;
        bottom: 0;
        border-radius: 0;
        border-top-left-radius: var(--default-radius);
        border-top-right-radius: var(--default-radius);
        border: none;
        padding-bottom: 50px;
    }

    .context-menu {
        max-width: 100%;
        width: 100%;
        bottom: unset;
        border-bottom: none;
        border-radius: 0px;
        border-top-left-radius: var(--default-radius);
        border-top-right-radius: var(--default-radius);
    }

    .context-menu>.body {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .av-container {
        padding: 0 !important;
    }

    .av-container>.asset-header {
        flex-direction: column;
    }

    .av-container>.asset-header>.header-summary {
        padding: 0 5px !important;
    }

    .av-container>.asset-header>.profile-thumb {
        border-radius: 0 !important;
        overflow: hidden;
        padding: 0;
        width: 100% !important;
        height: auto;
        background-color: var(--page-background);
        border-bottom: 1px solid var(--border-color);
    }

    .av-container>.av-asset-detail {
        flex-grow: 1;
        flex-shrink: 1;
        width: 100%;
        background-color: var(--color-active-green);
        max-width: 1000px;
    }

    .hol-browser,
    .icon-browser,
    .tag-browser {
        width: 100%;
        height: 100%;
        bottom: 0;
    }

    .upload-form {
        width: 500px;
        height: auto;
        max-height: 90%;
    }

    .color-picker-form,
    .multi-line-input-form,
    .single-line-input-form {
        height: auto;
    }

    .full-height-form {
        position: fixed;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        top: 0;
        right: 0;
        border: none;
        border-radius: 0;
    }

    .full-height-form>.header {
        border-radius: 0;
    }

    .itree-form {
        max-width: 100%;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border: none;
        border-radius: 0;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
        border-radius: var(--small-radius);
    }

    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 5px;
        height: 5px;
        border-bottom-right-radius: 5px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .15);
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    span.on-mobile-50 {
        display: inline-block !important;
        max-width: 50px !important;
    }

    span.on-mobile-100 {
        display: inline-block !important;
        max-width: 100px !important;
    }

    span.on-mobile-200 {
        display: inline-block !important;
        max-width: 200px !important;
    }

    .client-area {
        gap: 0;
    }

    .explorer-data-container {
        padding: 0;
        padding-bottom: 50px;
        border-top-left-radius: 0;
        border-left: none;
    }

    .data-container {
        padding: 0 var(--small-padding);
    }

    .card {
        border-radius: 0 !important;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: var(--large-margin);
    }

    .card:last-child {
        border-bottom: none;
    }

    .side-menu {
        border: none;
        border-radius: 0;
        width: 100% !important;
    }

    .cards-container {
        padding: 0 !important;
    }

    .hcard {
        margin-top: var(--large-margin);
        border-radius: 0;
        border: none;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    .wrapper {
        column-gap: var(--small-gap);
        row-gap: var(--small-gap);
        padding: var(--small-padding) !important;
    }

    .search-bar {
        min-width: 250px;
        max-width: 100%;
        min-height: 36px;
    }

    .task-view-container {
        padding-bottom: 75px;
    }

    .itree-checkbox {
        margin-right: 7px;
    }

    .tree-nodes-container>.tree-node {
        height: 48px;
    }

    .main-side-bar {
        min-width: 100%;
        max-width: 100%;
    }

    .main-side-bar>.header {
        padding: var(--small-padding);
        border-radius: 0;
    }

    .filter-side-bar {
        max-width: 100%;
    }

    .app-caption-container>.name {
        font-size: 1.1rem !important;
    }

    .task-list-item-container .tb-button {
        width: 36px;
        height: 36px;
        border-radius: var(--small-radius);
    }

    .tb-button {
        padding: 13px;
    }

    .top-navbar .tb-button {
        padding: 8px;
        margin-right: 0px;
    }

    .rf-editor-form {
        border: none !important;
        padding-bottom: 0 !important;
    }

    .quill-preview {
        padding: 10px !important;
    }

    .av-head-tb-button {
        padding: 20px 0 !important;
    }

    .av-head-tb-button>svg {
        transform: scale(120%) !important;
        stroke-width: 1.5px !important;
    }

    .hv-panel-xy {
        display: flex;
        flex-direction: column;
    }

    .subscription-button {
        width: 100%;
    }

    .inviting-message {
        padding: 15px;
    }

    .sliding-info-container {
        width: 100%;
    }

    .special-message>.title-container>.title {
        font-size: 1.1rem !important;
    }

    .fluid-control-container {
        flex-direction: column;
    }

    .fluid-control {
        width: 100%;
    }

    .options-selector {
        padding: 25px 15px;
    }

    .habit-score-card {
        gap: var(--default-gap);
        padding: var(--small-padding);
        border-radius: var(--small-radius);
        background-color: var(--page-background);
        border: none;
        box-shadow: none;
    }

    .floating-full-height-container {
        max-width: 100;
        width: 100%;
        bottom: 0;
    }

    .gs-container {
        max-width: 100%;
        width: 100% !important;
        min-width: 300px;
        height: 100% !important;
        padding-bottom: 50px;
        border-radius: 0;
    }

    .gs-container>.gs-header {
        padding: 30px 0;
    }

    .gs-container>.gs-body {
        padding: 20px var(--default-padding);
    }

    .gs-logo {
        width: 75px !important;
        height: 75px !important;
    }

    .gs-caption {
        font-size: 1.25rem !important;
    }

    .gs-slide-container {
        width: 100% !important;
        min-width: 300px;
        height: 100% !important;
        padding-bottom: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }

    .gs-slide-button-left,
    .gs-slide-button-right {
        display: none;
    }

    .gs-extra-footer>.tb-button {
        padding: 10px;
        width: 100%;
        align-items: start;
        justify-content: start;
    }

    .flow-card {
        border-radius: 0 !important;
        border-left: none;
        border-right: none;
    }

    .performance-score th.rotate {
        position: relative;
    }

    .performance-score th.rotate>div {
        width: 200px;
        transform: translate(-50%, -15px) rotate(270deg);
        position: absolute;
        left: 50%;
        bottom: 40px;
        font-size: .9rem !important;
    }

    input[type=checkbox],
    input[type=radio] {
        width: 26px;
        height: 26px;
    }

    .ih-card-container {
        flex-direction: column;
        align-items: start;
        justify-content: start;
        height: 100%;
    }

    .ih-card-container>.ih-card {
        width: 100%;
    }

    input[type=email],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=text] {
        padding: var(--default-padding);
    }

    textarea {
        padding: var(--default-padding);
        min-height: 7rem;
    }

    svg.icon,
    svg {
        width: 28px;
        height: 28px;
        stroke-width: 1.5px;
        stroke: var(--svg-stroke);
    }

    img.icon {
        width: 28px;
        height: 28px;
    }

    .floating-window-backdrop {
        background-color: rgba(0, 0, 0, .3);
    }

    .floating-window,
    .floating-window-full-height {
        width: 100%;
        max-width: 100%;
        box-shadow: 0 -8px 25px rgba(99, 102, 241, .12), 0 -4px 10px rgba(99, 102, 241, .08);
    }
    
    .floating-window .floating-window-body,
    .floating-window-full-height .floating-window-body{
        padding-bottom: 40px;
    }

    .user-settings-form {
        width: 100%;
    }

    .fol-selector,
    .icon-form,
    .upload-form {
        width: 100% !important;
        height: auto !important;
    }

    .floating-window,
    .floating-window-full-height,
    .floating-window-full-screen {
        width: 100%;
        max-width: 100%;
    }

    .oside-menu {
        width: 100% !important;
    }

    .mpt {
        padding-top: 120px !important;
    }

    .ih-card-container {
        flex-direction: column;
        align-items: start;
        justify-content: start;
        height: 100%;
    }

    .ih-card-container>.ih-card {
        width: 100%;
    }

    .hcard-container {
        grid-template-columns: 1fr !important;
    }

    .wrapper {
        column-count: 1 !important;
    }

    .player-control-bar {
        width: calc(100% - 24px);
        bottom: 16px;
        padding: 16px 18px;
    }

    .control-container .tbutton {
        width: 40px;
        height: 40px;
    }

    .control-container .mbutton {
        width: 52px;
        height: 52px;
    }

    .player-play-list-container {
        width: 100%;
        top: 80px;
        bottom: 170px;
    }

    .player-container>.left-arrow,
    .player-container>.right-arrow {
        width: 48px;
        height: 48px;
    }

    .player-container>.left-arrow {
        left: 8px;
    }

    .player-container>.right-arrow {
        right: 8px;
    }

    .play-list-caption-bar {
        display: none;
    }

}

.messagebox-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: var(--default-gap);
    flex-grow: 1;
    flex-shrink: 1;

    padding: var(--default-padding);
    min-height: 100px;
}

.messagebox-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--default-gap);
    flex-grow: 0;
    flex-shrink: 0;

    width: 100%;
    padding: var(--default-padding);
}

.offline-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--default-gradient);
}

.offline-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}


.offline-container .logo {
    width: 100px !important;
    height: 100px !important;
    stroke-width: 2px;
}

.offline-container h1 {
    font-size: 2rem !important;
    text-align: center;
    width: auto;
    margin: 25px 0px;
    font-weight: bold;
    height: auto;
    background: var(--brand-color-2);
    padding: 30px 45px;
    color: #fff;
    border-radius: 15px;
}

.offline-container p {
    font-size: 1.25rem !important;
    text-align: center;
    width: auto;
    padding: 15px;
}

.floating-window-mko {
    max-height: var(--viewport-height-mko) !important;
}













/* ===== Oddapy Tour (Modern) ===== */

.oddapy-tour-root {
    opacity: 0;
    transition: opacity 180ms ease;

    top: 0px;
    left: 0px;
    position: fixed;
    width: 100%;
    height: 100%;
}

.oddapy-tour-root.oddapy-tour-visible {
    opacity: 1;
}

/* Dark overlay panes (BACKDROP) */
.oddapy-tour-pane {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    /* background: var(--shade-back-color); */
    transition: top 220ms cubic-bezier(0.2, 0, 0, 1),
        left 220ms cubic-bezier(0.2, 0, 0, 1),
        width 220ms cubic-bezier(0.2, 0, 0, 1),
        height 220ms cubic-bezier(0.2, 0, 0, 1);
}

.oddapy-tour-tip,
.oddapy-tour-tip .oddapy-tour-content {
    /* overscroll-behavior: contain; */
}

/* Target indicator: 5px red border */
.oddapy-tour-highlight {
    position: fixed;
    z-index: 9999;
    pointer-events: none;

    border: 5px solid #ff3b30;
    border-radius: 12px;

    /* Glow to draw attention */
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.25),
        0 0 18px rgba(255, 59, 48, 0.45);

    transition: top 220ms cubic-bezier(0.2, 0, 0, 1),
        left 220ms cubic-bezier(0.2, 0, 0, 1),
        width 220ms cubic-bezier(0.2, 0, 0, 1),
        height 220ms cubic-bezier(0.2, 0, 0, 1);
}

.oddapy-tour-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;

    padding: var(--small-margin);
    border-bottom: 1px solid var(--border-color);
}

.oddapy-tour-header>h2 {
    margin: 0px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;

    flex-grow: 1;
    flex-shrink: 1;

    font-size: 1.25rem;
}

/* Tooltip (modern) */
.oddapy-tour-tip {
    position: fixed;
    z-index: 10000;
    width: min(450px, calc(100vw - 24px));
    background: var(--page-background);
    color: var(--text-color);
    border-radius: 16px;
    border: 1px solid var(--default-border);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
    padding: 0px;

    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
    will-change: transform, opacity;
}

.oddapy-tour-root.oddapy-tour-visible .oddapy-tour-tip {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.oddapy-tour-content {
    max-height: 90%;
    overflow-y: auto;
    padding: 0px;
    border-bottom: 1px solid var(--border-color);
}

.oddapy-tour-content p {
    margin: 0 0 10px 0;
}

.oddapy-tour-content p:last-child {
    margin-bottom: 0;
}

.oddapy-tour-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--small-gap);
    margin: 0px;
    padding: var(--default-padding);
}

/* Optional: lock background scroll while tour active */
.oddapy-tour-lock {
    overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {

    .oddapy-tour-root,
    .oddapy-tour-pane,
    .oddapy-tour-highlight,
    .oddapy-tour-tip {
        transition: none !important;
    }
}

.command-path {
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: var(--default-gap);
    background-color: var(--background-color);
    padding: var(--default-padding);
    border-radius: var(--small-radius);
    margin-top: var(--default-margin);
}


.ql-container,
.ql-toolbar {
    display: block;
    flex-direction: initial;
    justify-content: initial;
    align-items: initial;
    padding: var(--small-padding);
    background-color: transparent !important;
}

.ql-toolbar {
    background-color: var(--hover-bg-color);
}

.ql-container {
    flex: 1;
    overflow-y: auto;
    background-color: var(--page-background);
    font-size: unset !important;
}

.ql-snow .ql-tooltip {
    flex-direction: row;
    transform: translateX(15px) translateY(10px);
    width: 90%;
    padding: 15px;
    gap: 15px;
    align-items: center;
}

.ql-editing {
    margin-left: 15px !important;
}

.ql-snow .ql-tooltip.ql-editing input[type=text] {
    flex: 1;
}

.ql-action {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: var(--small-padding) var(--large-padding) var(--small-padding) var(--small-padding);
    margin-right: var(--default-margin);
    border-radius: var(--default-gap);
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-color) !important;
}

.ql-action:hover {
    background-color: var(--hover-bg-color);
}

.ql-toolbar.ql-snow {
    border: none !important;
}

.ql-picker,
.ql-snow .ql-toolbar button,
.ql-snow.ql-toolbar button {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: var(--small-radius) !important;
    padding: 12px !important;
}

.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:hover {
    background-color: var(--hover-bg-color);
}

.ql-picker-options {
    margin-top: 3px !important;
    overflow-y: auto;
}

.ql-picker-item {
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: var(--small-radius) !important;
    padding: 12px !important;
}

.ql-picker-item:hover {
    background-color: var(--hover-bg-color);
}

.ql-snow svg {
    margin: initial;
}

#ql-picker-options-0 {
    width: 182px !important;
    padding: 15px !important;
}

#ql-picker-options-1 {
    width: 125px;
    padding: 15px !important;
}

#ql-picker-options-0>.ql-picker-item,
#ql-picker-options-1>.ql-picker-item {
    height: auto !important;
}

#ql-picker-options-1,
#ql-picker-options-2,
#ql-picker-options-3 {
    width: 295px;
    padding: 15px !important;
}

#ql-picker-options-4 {
    gap: 10px;
    padding: 15px;
}

.ql-code-block-container>.ql-code-block {
    background-color: var(--shade-back-color);
    padding: var(--default-padding);
    border-radius: 0;
    font-family: 'Courier New', Courier, monospace;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}












/* =========================================================
   Quill Rich Text Preview (scoped under .quill-preview only)
   - Modern, readable defaults
   - Resistant to global app overrides
   - Supports Quill align + indent + lists (incl. data-list)
   ========================================================= */

.quill-preview {
    /* Layout */
    box-sizing: border-box !important;
    padding: 1.5rem 2rem !important;
    background: var(--page-background, #ffffff) !important;

    /* Typography */
    /* font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif !important; */
    font-size: 1rem !important;
    font-size: unset !important;
    line-height: 1.65 !important;
    color: var(--rte-text, #111827) !important;

    /* Quill/editor-friendly */
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    tab-size: 4 !important;

    border-radius: var(--default-radius);
}

.quill-preview * {
    font-size: unset !important;
}

.quill-preview,
.quill-preview *,
.quill-preview *::before,
.quill-preview *::after {
    box-sizing: border-box !important;
}

/* Keep selection usable even if the app has overrides */
.quill-preview * {
    -webkit-user-select: auto !important;
    user-select: auto !important;
}

/* -------------------------
   Spacing for block elements
   ------------------------- */
.quill-preview p,
.quill-preview ul,
.quill-preview ol,
.quill-preview blockquote,
.quill-preview pre,
.quill-preview table,
.quill-preview hr {
    margin: 0 0 1rem !important;
}

.quill-preview> :first-child {
    margin-top: 0 !important;
}

.quill-preview> :last-child {
    margin-bottom: 0 !important;
}

/* -------------------------
   Headings (standard-ish)
   ------------------------- */
.quill-preview h1,
.quill-preview h2,
.quill-preview h3,
.quill-preview h4,
.quill-preview h5,
.quill-preview h6 {
    margin: 1.25rem 0 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: inherit !important;
}

.quill-preview h1 {
    font-size: 2rem !important;
}

.quill-preview h2 {
    font-size: 1.5rem !important;
}

.quill-preview h3 {
    font-size: 1.25rem !important;
}

.quill-preview h4 {
    font-size: 1.125rem !important;
}

.quill-preview h5 {
    font-size: 1rem !important;
}

.quill-preview h6 {
    font-size: 0.875rem !important;
    opacity: 0.9 !important;
}

/* Make bold visually distinct inside headings (fonts permitting) */
.quill-preview h1 b,
.quill-preview h1 strong,
.quill-preview h2 b,
.quill-preview h2 strong,
.quill-preview h3 b,
.quill-preview h3 strong {
    font-weight: 800 !important;
}

/* -------------------------
   Inline formatting
   ------------------------- */
.quill-preview b,
.quill-preview strong {
    font-weight: 700 !important;
}

.quill-preview em,
.quill-preview i {
    font-style: italic !important;
}

.quill-preview u {
    text-decoration: underline !important;
    text-underline-offset: 0.12em !important;
}

.quill-preview s,
.quill-preview strike {
    text-decoration: line-through !important;
}

/* Sub/Sup (Quill script) */
.quill-preview sub,
.quill-preview sup {
    font-size: 0.75em !important;
    line-height: 0 !important;
    position: relative !important;
    vertical-align: baseline !important;
}

.quill-preview sup {
    top: -0.5em !important;
}

.quill-preview sub {
    bottom: -0.25em !important;
}

/* -------------------------
   Links
   ------------------------- */
.quill-preview a {
    color: var(--rte-link, #2563eb) !important;
    text-decoration: underline !important;
    text-underline-offset: 0.12em !important;
    text-decoration-thickness: 1px !important;

}

.quill-preview a:hover {
    color: var(--rte-link-hover, #1d4ed8) !important;
}

/* -------------------------
   Lists (supports Quill's data-list output)
   ------------------------- */
.quill-preview ul,
.quill-preview ol {
    padding-left: 1.5em !important;
    margin-left: 0 !important;
}

.quill-preview li {
    margin: 0.25rem 0 !important;
}

/* If your Quill outputs <ol><li data-list="bullet">..., make markers correct */
.quill-preview li[data-list="ordered"] {
    list-style-type: decimal !important;
}

.quill-preview li[data-list="bullet"] {
    list-style-type: disc !important;
}

/* Checklists (Quill: data-list="checked"/"unchecked") */
.quill-preview li[data-list="checked"],
.quill-preview li[data-list="unchecked"] {
    list-style: none !important;
    position: relative !important;
    padding-left: 1.6em !important;
}

.quill-preview li[data-list="checked"]::before,
.quill-preview li[data-list="unchecked"]::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.35em !important;
    width: 1em !important;
    height: 1em !important;
    border: 1px solid rgba(17, 24, 39, 0.35) !important;
    border-radius: 0.25em !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

.quill-preview li[data-list="checked"]::after {
    content: "" !important;
    position: absolute !important;
    left: 0.28em !important;
    top: 0.6em !important;
    width: 0.45em !important;
    height: 0.25em !important;
    border-left: 2px solid rgba(17, 24, 39, 0.85) !important;
    border-bottom: 2px solid rgba(17, 24, 39, 0.85) !important;
    transform: rotate(-45deg) !important;
}

/* -------------------------
   Blockquote
   ------------------------- */
.quill-preview blockquote {
    padding: 0.25rem 0 0.25rem 1rem !important;
    border-left: 4px solid rgba(17, 24, 39, 0.25) !important;
    color: rgba(17, 24, 39, 0.85) !important;
    background: rgba(17, 24, 39, 0.03) !important;
    border-radius: 0.5rem !important;
}

/* -------------------------
   Code (inline + blocks)
   ------------------------- */
.quill-preview code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace !important;
    font-size: 0.95em !important;
    padding: 0.15em 0.35em !important;
    border-radius: 0.375rem !important;
    background: rgba(17, 24, 39, 0.06) !important;
}

.quill-preview pre,
.quill-preview pre.ql-syntax {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    background: rgba(17, 24, 39, 0.04) !important;
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    overflow: auto !important;
}

/* -------------------------
   Images / media
   ------------------------- */
.quill-preview img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 1rem 0 !important;
    border-radius: 0.75rem !important;
}

/* If you ever embed video with Quill */
.quill-preview .ql-video {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0.75rem !important;
}

/* -------------------------
   Horizontal rule
   ------------------------- */
.quill-preview hr {
    border: none !important;
    border-top: 1px solid rgba(17, 24, 39, 0.15) !important;
    margin: 1.5rem 0 !important;
}

/* -------------------------
   Tables (if you allow them)
   ------------------------- */
.quill-preview table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    border-radius: 0.75rem !important;
}

.quill-preview th,
.quill-preview td {
    padding: 0.75rem !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.10) !important;
    border-right: 1px solid rgba(17, 24, 39, 0.10) !important;
    vertical-align: top !important;
}

.quill-preview th {
    background: rgba(17, 24, 39, 0.04) !important;
    font-weight: 700 !important;
}

.quill-preview tr:last-child td {
    border-bottom: none !important;
}

.quill-preview td:last-child,
.quill-preview th:last-child {
    border-right: none !important;
}

/* -------------------------
   Quill alignment classes
   ------------------------- */
.quill-preview .ql-align-center {
    text-align: center !important;
}

.quill-preview .ql-align-right {
    text-align: right !important;
}

.quill-preview .ql-align-justify {
    text-align: justify !important;
}

/* -------------------------
   Quill indent classes
   ------------------------- */
.quill-preview .ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 3em !important;
}

.quill-preview .ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 6em !important;
}

.quill-preview .ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 9em !important;
}

.quill-preview .ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 12em !important;
}

.quill-preview .ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 15em !important;
}

.quill-preview .ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 18em !important;
}

.quill-preview .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 21em !important;
}

.quill-preview .ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 24em !important;
}

.quill-preview .ql-direction-rtl {
    direction: rtl !important;
    text-align: inherit !important;
}

.quill-preview .ql-indent-1.ql-direction-rtl {
    padding-right: 3em !important;
    padding-left: 0 !important;
}

.quill-preview .ql-indent-2.ql-direction-rtl {
    padding-right: 6em !important;
    padding-left: 0 !important;
}

.quill-preview .ql-indent-3.ql-direction-rtl {
    padding-right: 9em !important;
    padding-left: 0 !important;
}

/* -------------------------
   Optional: selection styling (scoped)
   ------------------------- */
.quill-preview ::selection {
    background: rgba(37, 99, 235, 0.25) !important;
}


.insta-help-botton {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 48px;
    height: 48px;
    border-radius: 50%;

    border: none;
    background-color: var(--page-background);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06);
    cursor: pointer;
}

.insta-help-botton:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .20);
    transform: translateX(-0.5px) translateY(-0.5px);
}

.insta-help-botton:active {
    transform: translateX(0.5px) translateY(0.5px);
}

.insta-help-botton>svg {
    transform: scale(140%);
}

@media only screen and (max-width:768px) {
    .insta-help-botton {
        bottom: 90px;
    }
}

ul.header-list {
    list-style: none;
    padding-left: 15px;
    margin: 0;
    width: 100%;
}

ul.header-list li {
    position: relative;
    background-color: #ffebcd;
    padding: 8px 15px 8px 40px;
    margin-bottom: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

ul.header-list li::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    width: 40px;
    height: 100%;
    background-color: var(--brand-color-2);
    clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.insta-help-contents {
    /* column full-width all-padding-l large-gap */
    gap: var(--large-gap);

    width: 100%;
    height: 100%;
    padding: var(--large-padding);
    max-height: 500px;
    overflow-y: auto;
}

.insta-help-contents ul {
    margin: 0px;
    width: 100%;
    padding-left: 0;
    list-style: none;
}

.insta-help-contents ul li {
    padding: var(--small-padding) var(--default-padding);
    margin-top: 0;
    border-bottom: 1px solid var(--shade-back-color-dark);
}

.insta-help-contents ul li:last-child {
    border-bottom: none;
}

.insta-help-contents h1,
.insta-help-contents h2,
.insta-help-contents h3,
.insta-help-contents h4,
.insta-help-contents h5 {
    margin: 0px;
    margin-top: var(--default-margin);
    padding: 0px;
}

.insta-help-contents h1 {
    font-size: 1.25rem;
}

.insta-help-contents h2 {
    font-size: 1.20rem;
}

.insta-help-contents h3 {
    font-size: 1.15rem;
}

.insta-help-contents h4 {
    font-size: 1.10rem;
}

.insta-help-contents h5 {
    font-size: 1.05rem;
}

.insta-help-contents p.has-description svg,
.insta-help-contents li>svg {
    transform: translateY(6px);
}

.comms-options {
    width: 100%;
    border-radius: var(--small-radius);
    padding: 10px !important;
    background-color: var(--shade-back-color);
    list-style: none;
}

.comms-options h3 {
    margin-top: var(--default-margin);
    padding: 0;
}

.comms-options .comms-options-item {
    margin-top: var(--default-margin);
    padding: 0;
}

.comms-options .comms-options-item span:first-child {
    font-weight: bold;
}

.comm-path {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    padding: 10px 0px;
    border-radius: var(--small-radius);
    background-color: var(--shade-back-color);
    margin: 0;
}

.crumb {
    display: flex;
    align-items: center;
    justify-content: center;
}

.comm-path>.crumb+.crumb::before {
    content: "\203A";
    margin: 0 var(--default-margin) 0 0;
    display: inline-block;
}

.iconer svg {
    fill: none;
    stroke-width: 1.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 24px;
    height: 24px;
}

.code-viewer {
    font-family: 'Fira Code', 'Consolas', monospace;

    width: 100%;
    margin: 0;
    padding: var(--large-padding);
    border-radius: var(--default-radius);
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    tab-size: 2;

    background-color: var(--page-background);
}

.docview-ifame {
    width: 100%;
    height: 100%;
    border: none;
}

.support-ticket-form {
    width: 600px;
    max-width: 800px;
}

.support-ticket-form .support-details {
    height: 250px;
    padding: var(--default-padding);
}

@media only screen and (max-width:768px) {
    .support-ticket-form {
        max-width: 100%;
    }
}

.max-height-50 {
    max-height: 50px;
}

.max-height-10 {
    max-height: 100px;
}

.max-height-150 {
    max-height: 150px;
}

.max-height-200 {
    max-height: 200px;
}

textarea.address-editor {
    width: 100%;
    height: 150px;
}

.support-ticket-log-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;

    align-items: start;
    justify-content: start;

    background-color: var(--page-background);

    overflow-y: auto;

    height: 100%;
    width: 100%;
    padding: var(--default-padding);

    /* column full-width full-height grow shrink overflow-autoY align-start justify-start bg-color-page */
}

.user-message,
.oddapy-message {
    width: 80%;
    height: auto;
    padding: var(--default-padding);
    border-radius: var(--default-gap);
    gap: var(--default-gap);
}
.user-message {
    align-self: start;
    background-color: var(--shade-back-color);
}

.oddapy-message {
    align-self: end;
    background-color: #3B82F611;
}

.response-caption {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;

    border-bottom: 2px solid var(--brand-color-2);
    padding-left: var(--small-padding);
    padding-right: var(--small-padding);

    font-size: 1.1rem;
    font-weight: bold;
}

.response-body {
    display: inline-block;
    width: 100%;

    white-space: pre-wrap;
    /* to show the new line character */

    padding-left: var(--small-padding);
    padding-right: var(--small-padding);
}

.response-footer {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;

    border-top: 1px solid var(--border-color);
    padding-left: var(--small-padding);
    padding-right: var(--small-padding);

    font-size: 0.8rem;
    font-weight: bold;
}







.has-example-list {
    list-style: none;
    margin: 0;
    padding: 10px 15px;
    border-radius: 15px;
    border: 1px solid rgba(255, 245, 0, .5);
    background-color: rgba(255, 245, 0, .25);
}

.has-example-list>li {
    border-bottom: 1px solid var(--shade-back-color-dark);
    padding: 10px 0;
}

.has-example-list>li:last-child {
    border-bottom: none;
}

.has-example-list>li:before {
    content: "🔹";
    margin-right: .5em;
}

.has-introduction {
    /* background-color: var(--shade-back-color); */
    padding: 15px !important;
    border-radius: var(--small-radius);
}

.has-awareness {
    display: flex;
    flex-direction: row;
    gap: 15px;
    background-color: rgba(0, 180, 241, .25);
    padding: 15px !important;
    border-radius: 15px;
}

.has-important,
.has-tips {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: 15px;
    padding: 10px !important;
    border-radius: var(--default-radius);
}

.has-tips {
    background-color: rgba(255, 195, 0, .25);
}

.has-important {
    background-color: rgba(0, 180, 241, .25);
}

.has-important>.has-important-icon,
.has-tips>.has-tips-icon {
    background-color: var(--page-background);
    padding: 7px 5px;
    border-radius: 50%;
    border: 1px solid var(--shade-back-color-dark);
    font-size: 1.5rem;
    margin-top: 0;
}

.has-banner-slide {
    flex-direction: row;
}

.has-rich-text svg {
    transform: translateY(6px);
}

.has-contents {
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.has-contents h1,
.has-contents h2,
.has-contents h3,
.has-contents h4 {
    width: 100%;
    margin: var(--default-margin) 0px 0px 0px;
    padding: 0px;
}

.has-contents h1 {
    font-size: 2rem;
}

.has-contents h2 {
    font-size: 1.3rem;
}

.image-banner {
    align-items: center;
    justify-content: center;

    width: 350px;
    height: 100%;
    gap: 15px;

    background-color: var(--brand-color-3);

    padding: 30px 10px;
}

.image-banner>img,
.modern-list>img {
    background: #fff;
    padding: var(--large-padding);
    border-radius: 50%;
    width: 150px !important;
    height: auto !important;
}

.image-banner>* {
    color: #eee;
    padding: 5px;
    text-align: center !important;
}

.image-banner>.has-caption {
    width: 100%;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    line-height: initial !important;
}

.image-banner>.tag-line {
    text-align: left;
    font-size: 1rem;
    line-height: 1rem;
}

.main-content {
    align-items: start;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1;
    gap: 15px;
    height: 100%;
    width: 100%;
    padding: 10px;
    padding-top: 30px;
    overflow-y: auto;
}

.has-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    align-items: center;
    justify-content: start;
    width: 800px;
    height: 90%;
    max-height: 600px;
    padding: 0;
    background-color: var(--page-background);
    overflow: hidden;
    border-radius: var(--default-radius);
    box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 40px 20px rgba(0, 0, 0, .2);
}

.has-stamp {
    width: 75px !important;
    height: 75px !important;
    margin: 30px 30px 0 30px;
}

.has-body {
    align-items: start;
    justify-content: start;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
}

.has-body * {
    line-height: 1.5rem !important;
}

.has-slide {
    background: var(--page-background);
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
}

.has-slide>.heading {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid var(--brand-color-1);
}

.has-slide>.heading>img {
    width: 75px !important;
    height: auto !important;
}

.has-slide>.heading>div>.caption {
    width: 100%;
    text-align: left;
    font-size: 1.5rem;
    font-weight: bold;
}

.has-slide>.heading>div>.tag-line {
    width: 100%;
    text-align: left;
    font-size: 1rem;
    font-style: italic;
}

.has-slide>.content {
    align-items: start;
    flex-grow: 1;
    flex-shrink: 1;
    gap: var(--small-gap);
    padding: var(--large-padding) var(--default-padding);
}

.has-slide>.content>.heading {
    width: 100%;
    text-align: left;
    font-size: 1.25rem;
    font-weight: bold;
    border-bottom: 1px solid var(--brand-color-2);
    padding: 0 var(--default-padding);
}

.has-slide>.content>.introduction {
    text-align: justify;
    padding: var(--default-padding);
    border-radius: var(--default-radius);
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}

.has-slide>.content>p {
    text-align: justify;
    line-height: 1.65rem !important;
    padding: 0 var(--default-padding);
}

.has-list {
    padding: var(--default-padding);
    gap: 5px;
}

.has-list>.has-list-item {
    flex-direction: row;
    align-items: center;
    gap: 5px;
    border-radius: var(--small-radius);
    background-color: var(--shade-back-color);
}

.has-list>.has-list-item>span {
    padding: 10px 5px;
}

.has-list>.has-list-item>svg {
    width: 48px !important;
    height: 100% !important;
    padding: 10px;
    background-color: var(--brand-color-3);
    stroke: #fff;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    transform: translateX(-6px);
}

.has-list>.has-list-item.has-list-item-no-color {
    background-color: transparent !important;
}

.has-list>.has-list-item.has-list-item-no-color>svg {
    background-color: transparent;
    stroke: var(--svg-stroke);
}

.has-footer {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.has-footer>.has-navigator {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0 5px;
}

.has-footer>.has-navigator>.indicator {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    height: 8px;
    cursor: pointer;
    background-color: var(--shade-back-color);
}

.has-footer>.has-navigator>.indicator.current {
    background-color: var(--grayed-text-color);
}

.has-footer>.has-buttons {
    flex-direction: row;
    padding: 10px;
    gap: 10px;
}

highlight {
    font-weight: bold;
    color: var(--brand-color-3);
}

emphasized {
    font-weight: bold;
    color: var(--brand-color-4);
}

focused {
    font-weight: bold;
    font-size: 1.3rem;
    color: var(--brand-color-2);
}

@media only screen and (max-width:768px) {
    .has-container {
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    /* .has-slide>.heading {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding: 25px;
    }

    .has-slide>.heading>img {
        width: 75px !important;
    }

    .has-slide>.heading>div>.caption {
        width: 100%;
        text-align: center;
        font-size: 1.5rem;
    }

    .has-slide>.heading>div>.tag-line {
        text-align: center;
    } */

    .has-list {
        padding: 0;
    }

    .has-contents {
        flex-direction: column;
    }

    .main-content {
        justify-content: start;
    }

    .image-banner {
        width: 100%;
        height: initial !important;
    }

    .image-banner>img {
        width: 100px !important;
        height: auto !important;
    }
}

.show-info-tooltip {
    position: absolute;
    background: #333;
    color: #fff;
    padding: var(--default-padding) var(--large-padding);
    border-radius: var(--default-radius);
    white-space: nowrap;
    width: auto;
    max-width: 450px;

    flex-direction: row;
    align-items: start;
    gap: 20px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06);

    transition: bottom 0.2s ease-out, opacity 0.2s ease-out;
}

.show-info-tooltip * {
    color: #fff;
}

.show-info-tooltip .show-info-message {
    white-space: normal;
}

.show-info-tooltip .show-info-close {
    font-size: 1.3rem;
    cursor: pointer;
}

.def-folding-cont-height {
    max-height: 350px;
}

.quill-preview li {
    display: block !important;
}


.flat-list-item-container[data-live="true"]::before,
.flow-card[data-live="true"]::before,
.card-item[data-live="true"]::before {
    content: attr(data-count);
    position: absolute;
    top: 8px;
    right: 8px;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

.launch-pad {
    width: 500px;
    height: 98vh !important;
    max-height: 98vh;
}
@media only screen and (max-width:768px) {
    .launch-pad {
        width: 100%;
        max-width: 100%;
        height: 98vh !important;
        max-height: 98vh;
    }
    .launch-pad .floating-window-body{
        padding-bottom: 40px;
    }
}

[data-lpitem="true"]::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

.ocreate-option-snippet {
    padding-left: 34px;
    line-height: 1rem;
}

.module-hint {
    margin: var(--small-margin) 0px;
    padding: var(--small-padding);
    border-radius: var(--small-radius);

    font-size: 0.90rem !important;
    line-height: 1.3rem;

    background-color: var(--shade-back-color);
    border: 1px solid var(--border-color);

    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05);
}

.module-hint * {
    font-size: 0.90rem !important;
    line-height: 1.3rem;
}

.module-link-container {
    background-color: var(--page-background);
    border-radius: 0px 0px var(--default-radius) var(--default-radius);
    border-top: 1px solid var(--border-color);
}

.notification-message {
    /* font-size: 0.8rem !important; */

    width: 100%;
    margin: 0;
    text-align: left;
    padding: var(--small-padding);
    border-radius: var(--small-radius);
    /* background-color: var(--shade-back-color); */
    background-color: var(--bg-color-warn);
}

.notification-message * {
    font-size: 0.8rem !important;
}

.info-button {
    display: inline-block;

    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 0.8rem;
    text-align: left;
    color: var(--grayed-text-color);

    padding: 0px var(--small-padding);
    margin-right: 0px;
    border-radius: var(--small-radius);
    border: 1px solid var(--border-color);
    background-color: var(--button-back-color);

    cursor: pointer;
}




.date-time-form {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: var(--default-gap);

    width: 100%;
    height: 100%;

    padding: var(--small-padding);

    overflow: hidden;
}





/* ── Scroll-wheel time picker ── */
.cmdt-time-picker {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0;
    user-select: none;
    -webkit-user-select: none;
    padding: var(--default-padding) 0;
}

.cmdt-time-picker-wrap {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* width: auto; */
    /* background: var(--input-bg); */
    border-radius: var(--default-radius);
    padding: 0 var(--small-padding);
    overflow: hidden;
}

@media only screen and (max-width:768px) {
    .cmdt-time-picker-wrap * {
        font-size: 1.3rem !important;
    }
}

.cmdt-time-picker-band {
    position: absolute;
    left: 1px;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    height: 46px;
    width: calc(100% - 2px);
    background: var(--hover-bg-color-dark);
    border-radius: var(--tiny-radius);
    border: 1px solid var(--border-color);
    pointer-events: none;
    z-index: 0;
    padding: 5px;
}

.cmdt-time-col {
    position: relative;
    height: 180px;
    width: 64px;
    flex-shrink: 0;
    flex-grow: 0;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.3) 20%,
            rgba(0, 0, 0, 1) 40%,
            rgba(0, 0, 0, 1) 60%,
            rgba(0, 0, 0, 0.3) 80%,
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.3) 20%,
            rgba(0, 0, 0, 1) 40%,
            rgba(0, 0, 0, 1) 60%,
            rgba(0, 0, 0, 0.3) 80%,
            transparent 100%);
}

/* AM/PM column slightly wider */
.cmdt-time-col.cmdt-ampm-col {
    width: 56px;
}

.cmdt-time-col-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cmdt-time-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    flex-shrink: 0;
    font-weight: 400;
    color: var(--grayed-text-color);
    cursor: pointer;
    transition: color 0.2s, font-weight 0.2s;
    border-radius: var(--tiny-radius);
}

.cmdt-time-cell.selected {
    color: var(--text-color);
    font-weight: bold;
}

.cmdt-time-separator {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    flex-shrink: 0;
    flex-grow: 0;
    font-weight: bold;
    color: var(--text-color);
    padding: 0 2px;
    z-index: 1;
}


.cmdu-slider-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: var(--small-gap);
    padding: var(--small-padding) 0;
}

.cmdu-slider-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    /* font-size: var(--font-size-largest); */
    font-weight: bold;
    /* color: var(--brand-color-2) !important; */
    min-height: 32px;
}

.cmdu-slider-label .cmdu-slider-unit {
    /* font-size: 13px; */
    font-weight: 400;
    color: var(--grayed-text-color);
    margin-left: 4px;
}

.cmdu-slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: transparent;
    outline: none;
    cursor: pointer;
    margin: 8px 0;
}

/* ── Track ── */
.cmdu-slider::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: var(--priority-high-light);
    border: 1px solid var(--border-color-light);
}

.cmdu-slider::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: var(--brand-color-2) !important;
    border: 1px solid var(--border-color-light);
    border: none;
}

input[type=range].cmdu-slider.dark::-moz-range-track {
    background: var(--brand-color-2) !important;
}

.cmdu-slider::-ms-track {
    height: 8px;
    border-radius: 4px;
    background: var(--priority-high-light);
    border: none;
    color: transparent;
}

.cmdu-slider::-ms-fill-lower {
    background: var(--brand-color-2) !important;
    border-radius: 4px;
}

.cmdu-slider::-ms-fill-upper {
    background: var(--priority-high-light);
    border-radius: 4px;
}

/* ── Thumb ── */
.cmdu-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50%;
    background: var(--brand-color-2) !important;
    border: 3px solid var(--page-background);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    margin-top: -12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cmdu-slider::-moz-range-thumb {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50%;
    background: var(--brand-color-2) !important;
    border: 3px solid var(--page-background);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.cmdu-slider::-ms-thumb {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50%;
    background: var(--brand-color-2) !important;
    border: 3px solid var(--page-background);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

/* ── Active / hover states ── */
.cmdu-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(222, 33, 39, 0.35);
}

.cmdu-slider::-webkit-slider-thumb:active {
    transform: scale(1.2);
    box-shadow: 0 3px 12px rgba(222, 33, 39, 0.45);
}

.cmdu-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(222, 33, 39, 0.35);
}

.cmdu-slider::-moz-range-thumb:active {
    transform: scale(1.2);
    box-shadow: 0 3px 12px rgba(222, 33, 39, 0.45);
}

/* ── Disabled ── */
.cmdu-slider:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.cmdu-slider:disabled::-webkit-slider-thumb {
    background: var(--grayed-text-color);
    box-shadow: none;
    transform: none;
}

.cmdu-slider:disabled::-moz-range-thumb {
    background: var(--grayed-text-color);
    box-shadow: none;
    transform: none;
}

input[type=range].cmdu-slider::-moz-range-progress {
    background: var(--brand-color-2) !important;
}

input[type=range].cmdu-slider.dark::-moz-range-progress {
    background: var(--brand-color-2) !important;
}

.slot-selector.free {
    background-color: color-mix(in srgb, var(--brand-color-3) 15%, transparent)
}

.slot-selector.priority-high-border {
    border-left: 6px solid var(--priority-high) !important;
}

.slot-selector.priority-medium-border {
    border-left: 6px solid var(--priority-medium) !important;
}

.slot-selector.priority-normal-border {
    border-left: 6px solid var(--priority-normal) !important;
}

.slot-selector.priority-low-border {
    border-left: 6px solid var(--priority-low) !important;
}

.slot-selector.priority-least-border {
    border-left: 6px solid var(--priority-least) !important;
}

.slot-selector.priority-none-border {
    border-left: 6px solid var(--grayed-text-color) !important;
}

.slot-selector-date {
    border: none;
    background-color: var(--shade-back-color);
    border-radius: var(--small-radius);
    padding: 8px var(--large-padding);
}

.slot-selector-date * {
    font-weight: bold;
}


.myday-task-item[data-overdue="true"]::after {
    content: "Overdue";
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: auto;
    height: auto;
    padding: 0px var(--small-padding);
    border-radius: var(--small-radius);
    background-color: var(--highlight-bg);
    color: var(--highlight-bg-text);
    font-size: 0.75rem;
}










/* ============================================
   LAUNCH PAD — Dashboard
   ============================================ */

.launchpad-page {
    gap: var(--default-gap);
    padding: var(--default-padding);
}

/* ══════════════════════════════════════
   ODDAPY DASHBOARD STYLES
   Note: Assumes default div styling:
   display: flex; flex-direction: column;
   justify-content: start; align-items: start;
   width: 100%; overscroll-behavior: none;
   ══════════════════════════════════════ */

/* ── Dashboard Container ── */
.dashboard {
    padding: var(--large-padding);
    overflow-y: auto;
    gap: 24px;
}

/* ── Section Headers ── */
.db-section-title {
    font-size: var(--font-size-smaller);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--grayed-text-color);
    /* margin-bottom: 12px; */
}

/* ── Section Divider ── */
.db-divider {
    height: 1px;
    background: var(--border-color-light);
    margin: 4px 0;
}

/* ══════════════════════════════════════
   1. SUMMARY STRIP
   ══════════════════════════════════════ */
.summary-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.summary-strip__item {
    border: none;
    align-items: center;
    padding: 12px 6px;
    border-radius: var(--default-radius);
    background: var(--shade-back-color);
    cursor: pointer;
    transition: background 0.2s;
}

.summary-strip__value {
    font-size: var(--font-size-largest);
    font-weight: bold;
    line-height: 1;
    margin-bottom: 4px;
}

.summary-strip__label {
    font-size: var(--font-size-smallest);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--grayed-text-color);
}

.summary-strip__item--overdue .summary-strip__value {
    color: var(--color-active-red);
}

.summary-strip__item--completed .summary-strip__value {
    color: var(--color-active-green);
}

.summary-strip__item--rate .summary-strip__value {
    color: var(--color-active-blue);
}

/* ══════════════════════════════════════
   2. NEXT TASK
   ══════════════════════════════════════ */
.next-task {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--default-radius);
    background: linear-gradient(135deg, rgba(95, 196, 229, 0.08) 0%, rgba(106, 102, 178, 0.06) 100%);
    border: 1px solid var(--border-color-light);
    cursor: pointer;
    transition: background 0.2s;
}

.next-task:hover {
    background: linear-gradient(135deg, rgba(95, 196, 229, 0.14) 0%, rgba(106, 102, 178, 0.10) 100%);
}

.next-task__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-color-1);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.next-task__icon svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    stroke-width: 2;
    fill: none;
}

.next-task__info {
    flex: 1;
    min-width: 0;
}

.next-task__label {
    font-size: var(--font-size-smallest);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--grayed-text-color);
    margin-bottom: 2px;
}

.next-task__name {
    font-size: var(--font-size-large);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.next-task__time {
    font-size: var(--font-size-smaller);
    color: var(--grayed-text-color);
    margin-top: 1px;
}

.next-task__countdown {
    font-size: var(--font-size-larger);
    font-weight: bold;
    color: var(--color-active-blue);
    white-space: nowrap;
    flex-shrink: 0;
    width: auto;
}

.next-task--empty {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 18px 16px;
    cursor: default;
}

.next-task--empty:hover {
    background: linear-gradient(135deg, rgba(95, 196, 229, 0.08) 0%, rgba(106, 102, 178, 0.06) 100%);
}

.next-task--empty .next-task__label {
    margin: 0;
    font-size: var(--font-size-smaller);
    color: var(--deemed-text-color);
    text-transform: none;
    letter-spacing: 0;
    width: auto;
}

/* ══════════════════════════════════════
   3. COMPLETION QUALITY
   ══════════════════════════════════════ */
.completion-quality {
    flex-direction: row;
    gap: 8px;
}

.completion-quality__pill {
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: var(--default-radius);
    font-size: var(--font-size-smaller);
    font-weight: 600;
}

.completion-quality__pill--ahead {
    background: rgba(15, 81, 50, 0.08);
    color: var(--habit-performed-early);
}

.completion-quality__pill--ontime {
    background: rgba(40, 167, 69, 0.08);
    color: var(--habit-performed-on-time);
}

.completion-quality__pill--late {
    background: rgba(253, 126, 20, 0.08);
    color: var(--habit-performed-late);
}

.completion-quality__count {
    font-size: var(--font-size-normal);
    font-weight: bold;
    width: auto;
}

.completion-quality__empty {
    align-items: center;
    padding: 14px;
    font-size: var(--font-size-smaller);
    color: var(--deemed-text-color);
    background: var(--shade-back-color-light);
    border-radius: var(--default-radius);
}

/* ══════════════════════════════════════
   4. TIME INSIGHTS
   ══════════════════════════════════════ */
.time-insights {
    flex-direction: row;
    gap: 8px;
}

.time-insights__card {
    flex: 1;
    align-items: center;
    padding: 12px;
    border-radius: var(--default-radius);
    background: var(--shade-back-color-light);
}

.time-insights__value {
    font-size: var(--font-size-larger);
    font-weight: bold;
    line-height: 1.2;
    width: auto;
}

.time-insights__sub {
    font-size: var(--font-size-smallest);
    color: var(--grayed-text-color);
    margin-top: 2px;
}

.time-insights__label {
    font-size: var(--font-size-smallest);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--grayed-text-color);
    margin-top: 6px;
}

.time-insights__bar {
    height: 4px;
    border-radius: 2px;
    background: var(--shade-back-color);
    margin-top: 8px;
    overflow: hidden;
}

.time-insights__bar-fill {
    height: 100%;
    width: auto;
    border-radius: 2px;
    background: var(--brand-color-1);
    transition: width 0.6s ease;
}

/* ══════════════════════════════════════
   5. PRIORITY BREAKDOWN
   ══════════════════════════════════════ */
.priority-breakdown {
    gap: 6px;
}

.priority-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--default-radius);
    font-size: var(--font-size-smaller);
}

.priority-row__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.priority-row__label {
    flex: 1;
    font-weight: 600;
    font-size: var(--font-size-smaller);
    width: auto;
}

.priority-row__stats {
    font-size: var(--font-size-smaller);
    color: var(--grayed-text-color);
    white-space: nowrap;
    width: auto;
}

.priority-row__bar {
    width: 50px;
    height: 4px;
    border-radius: 2px;
    background: var(--shade-back-color);
    overflow: hidden;
    flex-shrink: 0;
}

.priority-row__bar-fill {
    height: 100%;
    width: auto;
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* ══════════════════════════════════════
   6. PENDING TASKS BUTTONS
   ══════════════════════════════════════ */
.pending-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.pending-btn {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--default-radius);
    border: 1px solid var(--border-color-light);
    background: var(--page-background);
    cursor: pointer;
    transition: all 0.2s;
}

.pending-btn:hover {
    background: var(--hover-bg-color);
    border-color: var(--border-color);
}

.pending-btn__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pending-btn__icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    fill: none;
}

.pending-btn__info {
    flex: 1;
    min-width: 0;
}

.pending-btn__count {
    font-size: var(--font-size-normal);
    font-weight: bold;
    line-height: 1;
    width: auto;
}

.pending-btn__label {
    font-size: var(--font-size-smallest);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--grayed-text-color);
    /* margin-top: 2px; */
    width: auto;
}

.pending-btn--unscheduled {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: var(--shade-back-color-light);
    border: none;
}

.pending-btn--unscheduled .pending-btn__info {
    flex-direction: row;
    align-items: center;
    flex: none;
    width: auto;
    gap: var(--small-gap);
}

.pending-btn--unscheduled .pending-btn__icon {
    width: 28px;
    height: 28px;
}

/* ══════════════════════════════════════
   7. CALENDAR EVENTS BUTTON
   ══════════════════════════════════════ */
.calendar-btn {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--default-radius);
    background: linear-gradient(135deg, rgba(106, 102, 178, 0.06) 0%, rgba(95, 196, 229, 0.06) 100%);
    border: 1px solid var(--border-color-light);
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--brand-color-3);
}

.calendar-btn:hover {
    background: linear-gradient(135deg, rgba(106, 102, 178, 0.12) 0%, rgba(95, 196, 229, 0.10) 100%);
    border-color: var(--border-color);
}

.calendar-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--color-active-purple);
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

.calendar-btn__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--brand-color-3);
    color: #fff;
    font-size: var(--font-size-smaller);
    font-weight: bold;
    width: auto;
}

/* ══════════════════════════════════════
   8. QUICKNOTES NUDGE
   ══════════════════════════════════════ */
.quicknotes-nudge {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--default-radius);
    transition: all 0.2s;
}

.launchpad-page>.quicknotes-nudge {
    cursor: pointer;
}
.launchpad-page>.quicknotes-nudge:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05);
    transform: translateY(-1px);
}
.launchpad-page>.quicknotes-nudge:active {
    transform: translateY(0) scale(0.99);
}
.quicknotes-nudge__badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-small);
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
}

.quicknotes-nudge__info {
    flex: 1;
}

.quicknotes-nudge__title {
    font-size: var(--font-size-smaller);
    font-weight: 600;
    width: auto;
}

.quicknotes-nudge__message {
    font-size: var(--font-size-smallest);
    color: var(--grayed-text-color);
    width: auto;
    line-height: 1rem;
}

.quicknotes-nudge__arrow {
    width: 16px;
    height: 16px;
    stroke: var(--grayed-text-color);
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   9. STORAGE DONUT
   ══════════════════════════════════════ */
.storage-donut-wrap {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.storage-donut {
    position: relative;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.storage-donut svg {
    width: 110px;
    height: 110px;
    transform: rotate(-90deg);
}

.storage-donut__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    width: auto;
}

.storage-donut__percent {
    font-size: var(--font-size-larger);
    font-weight: bold;
    line-height: 1;
    width: auto;
}

.storage-donut__sublabel {
    font-size: var(--font-size-smallest);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--grayed-text-color);
    margin-top: 2px;
    width: auto;
}

.storage-summary {
    flex: 1;
}

.storage-summary__used {
    font-size: var(--font-size-largest);
    font-weight: 600;
    width: auto;
}

.storage-summary__total {
    font-size: var(--font-size-smallest);
    color: var(--grayed-text-color);
    margin-top: 2px;
    width: auto;
}

.storage-summary__callout {
    margin-top: 10px;
    font-size: var(--font-size-smallest);
    color: var(--grayed-text-color);
    padding: 8px 10px;
    background: var(--shade-back-color-light);
    border-radius: var(--default-radius);
    line-height: 1.4;
}

.storage-summary__callout strong {
    color: var(--text-color);
}

/* ══════════════════════════════════════
   10. MODULE BREAKDOWN
   ══════════════════════════════════════ */
.module-breakdown {
    gap: 6px;
}

.module-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--default-radius);
    background: var(--shade-back-color-light);
    font-size: var(--font-size-smallest);
}

.module-row--empty {
    opacity: 0.5;
}

.module-row__color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.module-row__name {
    flex: 1;
    font-weight: 600;
    font-size: var(--font-size-smallest);
    width: auto;
}

.module-row__assets {
    font-size: var(--font-size-smallest);
    color: var(--grayed-text-color);
    white-space: nowrap;
    width: auto;
}

.module-row__bar-wrap {
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: var(--shade-back-color);
    overflow: hidden;
    flex-shrink: 0;
}

.module-row__bar-fill {
    height: 100%;
    width: auto;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.module-row__size {
    font-size: var(--font-size-smallest);
    font-weight: 600;
    min-width: 50px;
    text-align: right;
    white-space: nowrap;
    width: auto;
}

/* ══════════════════════════════════════
   5. PERFORMANCE MATRIX (replaces Priority Breakdown)
   ══════════════════════════════════════ */
.perf-matrix {
    gap: 12px;
}

/* Score Header */
.perf-matrix__score {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--default-radius);
    background: var(--shade-back-color-light);
}

.perf-matrix__score-left {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    width: auto;
}

.perf-matrix__score-value {
    font-size: var(--font-size-extra-largest);
    font-weight: bold;
    line-height: 1;
    width: auto;
}

.perf-matrix__score-unit {
    font-size: var(--font-size-smaller);
    font-weight: 600;
    color: var(--grayed-text-color);
    width: auto;
}

.perf-matrix__score-tier {
    font-size: var(--font-size-smallest);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 12px;
    width: auto;
}

.perf-matrix__score-tier--excellent {
    background: rgba(15, 81, 50, 0.10);
    color: var(--habit-performed-early);
}

.perf-matrix__score-tier--good {
    background: rgba(40, 167, 69, 0.10);
    color: var(--habit-performed-on-time);
}

.perf-matrix__score-tier--attention {
    background: rgba(253, 126, 20, 0.10);
    color: var(--habit-performed-late);
}

.perf-matrix__score-tier--critical {
    background: rgba(222, 33, 39, 0.10);
    color: var(--highlight-bg);
}

/* Grid */
.perf-matrix__grid {
    gap: 0;
    border-radius: var(--default-radius);
    overflow: hidden;
    border: 1px solid var(--border-color-light);
}

/* Header Row */
.perf-matrix__header {
    flex-direction: row;
    align-items: stretch;
}

.perf-matrix__corner {
    width: 80px;
    min-width: 80px;
    padding: 8px 10px;
    background: var(--shade-back-color);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.perf-matrix__col-label {
    flex: 1;
    padding: 8px 4px;
    align-items: center;
    justify-content: center;
    background: var(--shade-back-color);
    font-size: var(--font-size-smallest);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* border-left: 1px solid var(--border-color-light); */
}

/* Data Rows */
.perf-matrix__row {
    flex-direction: row;
    align-items: stretch;
    border-top: 1px solid var(--border-color-light);
}

.perf-matrix__row-label {
    width: 90px;
    min-width: 90px;
    padding: 10px 10px;
    align-items: flex-start;
    justify-content: center;
    font-size: var(--font-size-smallest);
    font-weight: 600;
    flex-shrink: 0;
    background: var(--shade-back-color-light);
}

.perf-matrix__row--completed .perf-matrix__row-label {
    color: var(--color-active-green);
}

.perf-matrix__row--due .perf-matrix__row-label {
    color: var(--text-color);
}

.perf-matrix__row--overdue .perf-matrix__row-label {
    color: var(--color-active-red);
}

/* Cells */
.perf-matrix__cell {
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    border-left: 1px solid var(--border-color-light);
    cursor: pointer;
    transition: all 0.15s;
    min-height: 42px;
}

.perf-matrix__cell:hover {
    filter: brightness(0.93);
}

.perf-matrix__cell-count {
    font-size: var(--font-size-small);
    font-weight: bold;
    line-height: 1;
    width: auto;
}

.perf-matrix__cell--empty {
    cursor: default;
}

.perf-matrix__cell--empty:hover {
    filter: none;
}

.perf-matrix__cell--empty .perf-matrix__cell-count {
    color: var(--deemed-text-color);
    font-weight: 400;
    font-size: var(--font-size-smallest);
}

/* Clear state: empty overdue/due cells show soft green (absence = win) */
.perf-matrix__cell--clear {
    cursor: default;
}

.perf-matrix__cell--clear:hover {
    filter: none;
}

.perf-matrix__cell--clear .perf-matrix__cell-count {
    color: var(--habit-performed-on-time);
    font-weight: 400;
    font-size: var(--font-size-smallest);
    opacity: 0.6;
}

/* Score Bar */
.perf-matrix__bar {
    height: 6px;
    border-radius: 3px;
    background: var(--shade-back-color);
    overflow: hidden;
}

.perf-matrix__bar-fill {
    height: 100%;
    width: auto;
    border-radius: 3px;
    transition: width 0.6s ease;
}












.lp-shortcuts {
    gap: var(--default-gap);
}

.lp-shortcuts .db-section-title {
    margin: 0px;
    margin-top: var(--default-margin);
    padding-left: var(--small-padding);
}

.lp-shortcuts .la-section {
    width: 100%;
    border-radius: var(--default-radius);
    margin-bottom: var(--large-margin);
    background-color: var(--page-background);
}










        
.lp-quicknotes{
    background-color: var(--page-background);
}
.scratch-pad-item {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: var(--small-gap);

    position: relative;

    padding: var(--default-padding);
    border-bottom: 1px solid var(--border-color);

    background-color: var(--page-background);

    cursor: pointer;
}

.scratch-pad-item:hover {
    background-color: var(--hover-bg-color);
}
.scratch-pad-item[data-starred="true"]:before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-color-4);
}
.scratch-pad-item .focus-icon {
    color: var(--brand-color-4);
}

.scratch-pad-item:first-child {
    border-top-left-radius: var(--default-radius);
    border-top-right-radius: var(--default-radius);
}
.scratch-pad-item:last-child {
    border-bottom-left-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
    border-bottom: none;
}

.scratch-pad-item>.scratch-pad-item-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;

    gap: var(--default-gap);
}

.scratch-pad-item>.scratch-pad-item-header,
.scratch-pad-item>.scratch-pad-item-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;

    gap: var(--default-gap);
}

.scratch-pad-item>.scratch-pad-item-details {
    font-size: var(--font-size-small);
    color: var(--grayed-text-color);
    white-space: pre-line;
    line-height: 1.4rem;
}
.scratch-pad-item .qn-date{
    color: var(--grayed-text-color);
    padding: 0px var(--small-padding);
    font-size: var(--font-size-smaller);
    white-space: nowrap;
    border-radius: var(--small-radius);
}

.qn-header{
    flex-direction: row;
    gap: var(--default-gap);
    align-items: center;

    width: 100%;
    padding: 0px;
    margin-bottom: var(--default-margin);
    border-radius: var(--small-radius);
    /* min-height: 50px; */

    background-color: var(--page-background);
    border: 1px solid var(--border-color-light);
}
.qn-info{
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--default-gap);

    width: fit-content;
    aspect-ratio: 1 / 1;
    padding: 20px;
    padding-bottom: 25px;
    border-radius: 50%;
    overflow: hidden;

    font-size: 1.5rem !important;
    font-weight: bold;
    color: var(--grayed-text-color); 

    border: 10px solid  var(--border-color);
    background-color: var(--shade-back-color); 

    position: relative;
}

.qn-info.fresh{ 
    color: var(--text-color-kpi-fresh); 
    background-color: var(--color-kpi-fresh); 
    border-color: var(--color-kpi-fresh); 
}
.qn-info.attention{ 
    color: var(--text-color-kpi-attention); 
    background-color: var(--color-kpi-attention); 
    border-color: var(--color-kpi-attention); }
.qn-info.critical{ 
    color: var(--text-color-kpi-critical); 
    background-color: var(--color-kpi-critical); 
    border-color: var(--color-kpi-critical); 
}

.qn-details{
    flex: 1 1 auto;
    width: 100%;

}
.qn-comm{
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: fit-content;
}












.button-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}
.button-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.button-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.button-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}
.sc-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 8px 14px;
    border-radius: var(--default-radius);
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.sc-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.5) 0%, transparent 70%);
}

.sc-tile:hover::before {
    opacity: 1;
}

.sc-tile:active {
    transform: scale(0.95);
}

.sc-tile__icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* background-color: var( --shade-back-color-rev); */
    background-color: var(--disc-bg);
    border-radius: 50%;
    padding: var(--large-padding);
}

.sc-tile__icon svg {
    /* width: 26px;
    height: 26px; */
    /* stroke-width: 1.8; */
    fill: none;
}

.sc-tile__label {
    font-size: var(--font-size-smallest);
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: center;
    line-height: 1.2;

    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Color variants */
.sc-tile--cyan {
    background: rgba(95, 196, 229, 0.10);
}
/* .sc-tile--cyan .sc-tile__icon svg { stroke: var(--brand-color-1); } */
.sc-tile--cyan .sc-tile__label { color: #3a9ab8; }

.sc-tile--red {
    background: rgba(222, 33, 39, 0.08);
}
/* .sc-tile--red .sc-tile__icon svg { stroke: var(--brand-color-2); } */
.sc-tile--red .sc-tile__label { color: #b8282e; }

.sc-tile--purple {
    background: rgba(106, 102, 178, 0.10);
}
/* .sc-tile--purple .sc-tile__icon svg { stroke: var(--brand-color-3); } */
.sc-tile--purple .sc-tile__label { color: #5955a0; }

.sc-tile--orange {
    background: rgba(243, 145, 45, 0.10);
}
/* .sc-tile--orange .sc-tile__icon svg { stroke: var(--brand-color-4); } */
.sc-tile--orange .sc-tile__label { color: #c5751f; }

.sc-tile--green {
    background: rgba(40, 167, 69, 0.10);
}
/* .sc-tile--green .sc-tile__icon svg { stroke: #28a745; } */
.sc-tile--green .sc-tile__label { color: #1e7e34; }

.sc-tile--slate {
    background: var(--shade-back-color);
}
/* .sc-tile--slate .sc-tile__icon svg { stroke: var(--grayed-text-color); } */
.sc-tile--slate .sc-tile__label { color: var(--grayed-text-color); }

.lp-sc-btn-group{
    gap: var(--small-gap);
}

.lp-sc-btn-group .lp-sc-header{
    margin-top: var(--default-margin);
}
.lp-sc-btn-group .lp-sc-header .section-caption{
    font-size: var(--font-size-smaller) !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--grayed-text-color);
    margin: 0px;
}
.lp-sc-btn-group .lp-sc-header button svg{
    stroke: var(--deemed-text-color);
}

.card-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    width: 100%;

    gap: var(--default-gap);
    padding: 15px;
    border-radius: var(--default-radius);

    background: var(--page-background);
    overflow: hidden; /* required for top-right triangle */
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    -webkit-user-select: none;
    user-select: none;

    max-height: 150px;
}

.card-button.thumb-button{
    padding: 0px !important;
    align-items: start;
}

.card-button:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05);
    transform: translateY(-1px);
}
.card-button:active {
    transform: translateY(0) scale(0.99);
}
.qn-header .card-button {
    padding: var(--default-padding);
    background-color: transparent;
    cursor: default;
}
.qn-header .card-button:hover {
    box-shadow: none;
    transform: none;
}
.qn-header .card-button:active {
    transform: none;
}

.card-button .card-button-cmtrigger {

    position: absolute;
    top: 5px;
    right: 5px;

    
    opacity: 1;
    pointer-events: auto;

    margin: 0px;
    border-radius: 50%;
    aspect-ratio: 1;
    background-color: var(--shade-back-color);
    z-index: 1;

}
/* .card-button:hover .card-button-cmtrigger {

    opacity: 1;
    pointer-events: auto    ;

} */

.hover-visible .card-button-cmtrigger{
    opacity: 0;
    pointer-events: none;
}
.hover-visible:hover .card-button-cmtrigger {
    opacity: 1;
    pointer-events: auto;
}

.card-button .card-button-icon {
    align-items: center;
    justify-content: center;
    padding: var(--small-padding);
    border-radius: 50%;
    background-color: var(--shade-back-color);
    width: 40px;
    flex-grow: 0;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    color: var(--text-color) !important;
}
.card-button.thumb-button .card-button-icon{
    padding: 0px !important;
    border-radius: var(--default-radius) 0px 0px var(--default-radius);
    width: 100px;
    background-color: transparent;
    aspect-ratio: unset;        /* remove the 1/1 from base rule */
    align-self: stretch;        /* stretches to full row height */
}

.card-button.thumb-button .card-button-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--default-radius) 0px 0px var(--default-radius);
}

.card-button .card-button-body{
    width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;           /* allows flex child to shrink below content size */
    overflow: hidden;       /* prevents content from pushing parent */
}
.card-button.thumb-button .card-button-body{
    padding: var(--default-padding) 0px;
    height: 100%;
}

.card-button .card-button-snippet,
.card-button-action-comm .card-button-snippet {
    font-size: var(--font-size-smallest);
    font-weight: 400;
    line-height: 1.45;
    color: var(--grayed-text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.card-button .card-button-snippet {
    word-break: break-word; /* breaks long unbroken strings like URLs */
}
.card-button .card-button-info-byte {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: var(--shade-back-color);
    padding: 0 10px;
    border-radius: 50%;
    font-weight: bold;
    aspect-ratio: 1;

    color: var(--text-color) !important;
}

.card-button-alert {
    margin-top: 20px;
    /* border-top: 1px solid var(--border-color); */
    /* padding-top: 15px; */
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
}

.card-button-alert button{
    border-radius: 25px;
    background-color: color-mix(in srgb, var(--brand-color-1) 15%, transparent);
}
.card-button-alert button:hover {
    /* box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05); */
    transform: translateY(-1px);
}
.card-button-alert button span {
    padding-left: 5px;
}

.alert-chip {
    background-color: var(--shade-back-color-light);
    padding: 3px 10px;
    border-radius: 5px;

    color: var(--grayed-text-color);
    font-size: var(--font-size-smallest);
}
/* .info-chip, .info-chip * {
    background-color: var(--shade-back-color-light);
    color: var(--grayed-text-color);
    stroke: var(--grayed-text-color);
} */
.reminder-chip, .reminder-chip * {
    background-color: color-mix(in srgb, var(--highlight-bg) 5%, transparent);
    color: color-mix(in srgb, var(--highlight-bg) 50%, transparent);
    stroke: color-mix(in srgb, var(--highlight-bg) 50%, transparent);
}

.card-button.card-button-red .card-button-icon { background-color: var(--color-active-red); }
.card-button.card-button-green .card-button-icon    { background-color: var(--color-active-green); }
.card-button.card-button-blue .card-button-icon {  background-color: var(--color-active-blue); }
.card-button.card-button-purple .card-button-icon   { background-color: var(--color-active-purple); }
.card-button.card-button-orange .card-button-icon   { background-color: var(--color-active-orange); }
.card-button.card-button-yellow .card-button-icon   { background-color: var(--color-active-yellow); }

.card-button.card-button-red .card-button-icon svg {  stroke: var(--page-background); }
.card-button.card-button-green .card-button-icon svg {  stroke: var(--page-background); }
.card-button.card-button-blue .card-button-icon svg {  stroke: var(--page-background); }
.card-button.card-button-purple .card-button-icon svg {  stroke: var(--page-background); }
.card-button.card-button-orange .card-button-icon svg {  stroke: var(--page-background); }
.card-button.card-button-yellow .card-button-icon svg {  stroke: var(--page-background); }
@media screen and (prefers-color-scheme:dark) {
    .card-button.card-button-red .card-button-icon svg {  stroke: var(--text-color); }
    .card-button.card-button-green .card-button-icon svg {  stroke: var(--text-color); }
    .card-button.card-button-blue .card-button-icon svg {  stroke: var(--text-color); }
    .card-button.card-button-purple .card-button-icon svg {  stroke: var(--text-color); }
    .card-button.card-button-orange .card-button-icon svg {  stroke: var(--text-color); }
    .card-button.card-button-yellow .card-button-icon svg {  stroke: var(--text-color); }
}

.promp-button{ min-height: 80px; }
.card-button.promp-button.card-button-red { border-left: 3px solid var(--color-active-red); }
.card-button.promp-button.card-button-green { border-left: 3px solid var(--color-active-green); }
.card-button.promp-button.card-button-blue { border-left: 3px solid var(--color-active-blue); }
.card-button.promp-button.card-button-purple { border-left: 3px solid var(--color-active-purple); }
.card-button.promp-button.card-button-orange { border-left: 3px solid var(--color-active-orange); }
.card-button.promp-button.card-button-yellow { border-left: 3px solid var(--color-active-yellow); }

/* .card-button.status-good { border-bottom: 3px solid var(--color-active-green); } */
/* .card-button.status-attention { border-bottom: 3px solid var(--color-active-orange); }
.card-button.status-critical { border-bottom: 3px solid var(--color-active-red); } */

.card-button.status-good .card-button-info-byte { background-color: var(--color-active-green); color: #fff; }
.card-button.status-attention .card-button-info-byte { background-color: var(--color-active-orange); color: #fff; }
.card-button.status-critical .card-button-info-byte { background-color: var(--color-active-red); color: #fff; }

.message-to-user, .output-to-user{
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--default-radius);
    background: linear-gradient(135deg, rgba(106, 102, 178, 0.10) 40%, rgba(95, 196, 229, 0.10) 100%);
    border: 1px solid var(--border-color-light);
    transition: all 0.2s;
    font-size: var(--font-size-small);
}
.message-to-user span, .output-to-user span{
    text-align: center;
}
.output-to-user{
    background: rgba(95, 196, 229, 0.06);
}

.default-info-bg{
    background: linear-gradient(135deg, rgba(106, 102, 178, 0.10) 40%, rgba(95, 196, 229, 0.10) 100%);
    border: 1px solid var(--border-color-light);
}

.busy-element-overlay{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--shade-back-color);
    border-radius: var(--default-border);

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: all;
    z-index: 999;
}
.element-busy svg {
  animation: shake 1s ease-in-out infinite;
}
@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

/* .element-busy::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: rgba(255, 255, 255, 0.3);
    border-top-color: #de2127;
    background-color: color-mix(in srgb, #de2127 15%, transparent);
    display: block;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.element-busy::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 0.250rem !important;
    color: #555 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23de2127' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
} */


.myday-timeline-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;

    gap: 0px;
    background-color: var(--page-background);
}

/* --- Day Header --- */
.myday-timeline-container .myday-day-header {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 22px 0 10px 0;
    z-index: 2;

    /* width: auto; */
    padding-left: 68px;
    margin-left: 0;
}
.myday-timeline-container .myday-day-header::before {
    content: '';
    position: absolute;
    left: 38px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-color-2);
    transform: translateY(-50%);
    margin-top: 6px;
    box-shadow: 0 0 0 3px var(--background-color);
    z-index: 3;

    
}
.myday-timeline-container .myday-day-header-label {
    font-size: var(--font-size-smaller);
    font-weight: 700;
    color: var(--section-header-text-color);
    letter-spacing: 0.02em;
}
.myday-timeline-container .myday-day-header-line {
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* --- Timeline Entry Row --- */
.myday-timeline-container .tl-entry {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    cursor: pointer;
    transition: background 0.15s ease;
    /* border-radius: var(--default-radius); */
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-radius);
}
.myday-timeline-container .tl-entry:hover {
    background: var(--hover-bg-color);
}
.myday-timeline-container .tl-entry.viewing {
    background: var(--hover-bg-color-dark);
}

/* --- Time Label Column --- */
.myday-timeline-container .tl-time {
    width: 42px;
    min-width: 42px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding-top: 12px;
    user-select: none;
}
.myday-timeline-container .tl-time-h {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-color);
}
.myday-timeline-container .tl-time-ampm {
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--grayed-text-color);
    letter-spacing: 0.04em;
    margin-top: 1px;
}

.myday-timeline-container .tl-entry[data-overdue="true"] .tl-time-h {
    color: var(--brand-color-2);
}
.myday-timeline-container .tl-entry[data-overdue="true"] .tl-time-ampm {
    color: var(--brand-color-2);
    opacity: 0.7;
}

/* --- Track Column (vertical line + disc) --- */
.myday-timeline-container .tl-track {
    position: relative;
    width: 52px;
    min-width: 52px;
    flex-shrink: 0;
    display: flex;
    /* flex-direction: column is inherited — that's fine */
    align-items: center;        /* was flex-start, need center for horizontal centering in column */
    justify-content: flex-start; /* was center, now vertical axis — keep top */
    padding-top: 8px;
}

/* Continuous vertical line segment */
.myday-timeline-container .tl-track::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--border-color-light);
    transform: translateX(-50%);
    z-index: 0;
}

/* Past items: colored track */
.myday-timeline-container .tl-entry[data-timeline-past="true"] .tl-track::before {
    background: var(--border-color-darkest);
    opacity: 0.35;
}

/* Disc on top of the line */
.myday-timeline-container .tl-track .disc {
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 3px var(--background-color);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.myday-timeline-container .tl-entry:hover .tl-track .disc {
    box-shadow: 0 0 0 3px var(--background-color), 0 2px 8px rgba(0,0,0,0.1);
    transform: scale(1.06);
}

/* No-icon fallback dot */
.myday-timeline-container .tl-track .tl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color-dark);
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 3px var(--background-color);
    margin-top: 12px;
}

/* --- "NOW" Marker --- */
.myday-timeline-container .myday-now-marker {
    position: relative;
    display: flex;
    flex-direction: row ;
    align-items: center;
    justify-content: start;
    flex-grow: 1;
    flex-shrink: 1;
    height: 24px;
    z-index: 5;

    width: auto;
    padding-left: 42px;
    margin-left: 0;
    
}
.myday-timeline-container .myday-now-marker-dot {
    position: absolute;
    left: 26px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-color-1);
    transform: translateX(-50%);
    box-shadow: 0 0 0 3px var(--background-color), 0 0 12px rgba(95, 196, 229, 0.5);
    z-index: 6;
    animation: tlNowPulse 2.5s ease-in-out infinite;
}
.myday-timeline-container .myday-now-marker-line {
    position: absolute;
    left: 42px;
    right: 0;
    height: 1.5px;
    background: linear-gradient(to right, var(--brand-color-1), transparent);
    opacity: 0.5;
}
.myday-timeline-container .myday-now-marker-label {
    position: absolute;
    left: 56px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-active-blue);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@keyframes tlNowPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--background-color), 0 0 8px rgba(95, 196, 229, 0.4); }
    50%      { box-shadow: 0 0 0 3px var(--background-color), 0 0 18px rgba(95, 196, 229, 0.7); }
}

/* --- Content Area --- */
.myday-timeline-container .tl-entry .main-container {
    padding: 8px 0 10px 0;
    min-width: 0;
    gap: 2px;
}
.myday-timeline-container .tl-entry .title {
    font-size: var(--font-size-small);
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.myday-timeline-container .tl-entry .description {
    font-size: var(--font-size-smallest);
    color: var(--grayed-text-color);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.myday-timeline-container .tl-entry .date-time {
    color: var(--deemed-text-color);
}

/* --- Priority left-edge accent --- */
.myday-timeline-container .tl-entry[data-priority="1"] { border-left: 3px solid var(--priority-high); }
.myday-timeline-container .tl-entry[data-priority="2"] { border-left: 3px solid var(--priority-medium); }
.myday-timeline-container .tl-entry[data-priority="3"] { border-left: 3px solid var(--priority-normal); }
.myday-timeline-container .tl-entry[data-priority="4"] { border-left: 3px solid var(--priority-low); }
.myday-timeline-container .tl-entry[data-priority="5"] { border-left: 3px solid var(--priority-least); }

/* --- Status Button --- */
.myday-timeline-container .myday-item-button {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--default-radius);
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.myday-timeline-container .myday-item-button:hover {
    background: var(--hover-bg-color-dark);
}
.myday-timeline-container .myday-item-button svg {
    width: 20px;
    height: 20px;
    stroke: var(--svg-stroke-light);
    fill: none;
    stroke-width: 1.8;
}

/* --- Completed state --- */
.myday-timeline-container .tl-entry.status-completed .title {
    text-decoration: line-through;
    color: var(--grayed-text-color);
}
.myday-timeline-container .tl-entry.status-completed .disc {
    opacity: 0.45;
}
.myday-timeline-container .tl-entry.status-completed .tl-time-h,
.myday-timeline-container .tl-entry.status-completed .tl-time-ampm {
    opacity: 0.45;
}

/* --- Overdue glow on disc --- */
.myday-timeline-container .tl-entry[data-overdue="true"] .tl-track .disc {
    box-shadow: 0 0 0 3px var(--background-color), 0 0 0 5px rgba(222, 33, 39, 0.15);
}

/* --- Unscheduled section --- */
.myday-timeline-container .myday-unscheduled-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    /* width: auto; */
    padding-left: 68px;
    margin-left: 0;
}
.myday-timeline-container .myday-unscheduled-header span {
    font-size: var(--font-size-smallest);
    color: var(--deemed-text-color);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.myday-timeline-container .myday-unscheduled-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color-light);
}

/* Hide track line for unscheduled items */
.myday-timeline-container .tl-entry.unscheduled .tl-track::before {
    display: none;
}
.myday-timeline-container .tl-entry.unscheduled .tl-time {
    visibility: hidden;
}

/* --- Button column alignment --- */
.myday-timeline-container .tl-entry .column.full-height.small-gap {
    justify-content: flex-start;
    padding-top: 8px;
    padding-right: 4px;
}


/* --- Last scheduled item: clip bottom line --- */
.myday-timeline-container .tl-entry.tl-last-scheduled .tl-track::before {
    bottom: 50%;
}

.time-block{
    background-color: #ccc;
}

.lp-trigger { background-color: var(--shade-back-color-darkest); }
.lp-trigger svg { stroke: var(--svg-stroke); }
.lp-trigger:hover { background-color: var(--shade-back-color); }


.list-item-container.highlight, .default-list-item.highlight{
    background-color: var(--hover-bg-color) !important;
}


.list-item .item-caption {
  text-align: left;
}

.empty-task-button{
    background: linear-gradient(135deg, rgba(106, 102, 178, 0.10) 40%, rgba(95, 196, 229, 0.10) 100%) !important;
}