: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;
    
    /* Background Colors */
    --background-color: #dce2e2;
    --alternate-bg: #ccc;
    --page-background: #ffffff;
    --shaded-bg-color: #efefef;
    --form-bg: var(--background-color);
    --form-section-bg: var(--page-background);
    --context-menu-background-color: var(--background-color);
    --white-light-background: rgba(255, 255, 255, 0.50);
    --disc-bg: rgba(0, 0, 0, 0.05);
    --disc-border: rgba(0, 0, 0, 0.08);
    --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);
    --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);
    
    /* 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: #FF6B6B;
    --color-active-orange: #F8682C;
    --color-active-green: #8FBC8F;
    --color-active-blue: #5fc4e5;
    --color-active-purple: #6A66B2;
    --color-active-yellow: #FFC300;
    
    /* 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);
    
    /* 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);
    
    /* 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);
    
    /* 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;
    --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 Colors */
        --brand-color-1: #1f84a5;
        --brand-color-2: #871418;
        --brand-color-3: #3c3971;
        --brand-color-4: #a55809;
        
        /* Active Colors */
        --color-active-red: #943f3f;
        --color-active-orange: #8f3b19;
        --color-active-green: #547158;
        --color-active-blue: #356c80;
        --color-active-purple: #3f3d68;
        --color-active-yellow: #866900;
        
        /* Priority Light Colors */
        --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 Colors */
        --habit-performed-early: #07291a;
        --habit-performed-on-time: #175a26;
        --habit-performed-late: #91470b;
        --habit-not-performed: #7c2028;
        --habit-not-due: #85878b;
        
        /* Background Colors */
        --background-color: #222;
        --alternate-bg: #444;
        --background-color-light: #333;
        --background-color-dark: #111;
        --page-background: #333;
        --page-background-light: #444;
        --page-background-dark: #222;
        
        /* Border Colors */
        --border-color: #444444;
        --border-color-light: #666666;
        --border-color-dark: #22222;
        
        /* Text Colors */
        --text-color: #bbb;
        --text-color-invert: #eee;
        --grayed-text-color: #888;
        --deemed-text-color: #666;
        --text-color-link: var(--brand-color-2);
        
        /* SVG Stroke */
        --svg-stroke: #bbb;
        --svg-stroke-light: #333333;
        
        /* Shade Back Colors */
        --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 Colors */
        --highlight-bg: #871418;
        --highlight-bg-text: #e5e5e5;
        --highlight-bg-light: #8c202a;
        --highlight-bg-dark: #731c25;
        --highlight-border-color: #871418;
        
        /* Disc Colors */
        --disc-bg: rgba(255, 255, 255, 0.20);
        --disc-border: rgba(255, 255, 255, 0.30);
        
        /* Input Colors */
        --input-height: 36px;
        --input-bg: rgba(255, 255, 255, 0.10);
        --input-bg-hover: rgba(255, 255, 255, 0.20);
        --input-bg-focused: rgba(255, 255, 255, 0.40);
        --input-bg-form: rgba(255, 255, 255, 0.10);
        --input-bg-hover-form: rgba(219, 226, 226, 0.20);
        --input-bg-focused-form: rgba(219, 226, 226, 0.40);
        
        /* Chip Colors */
        --chip-bg-color: #444444;
        --chip-bg-color-form: var(--background-color);
        
        /* Hover Colors */
        --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 */
        --floating-button-bg: rgba(255, 255, 255, 0.60);
        --floating-button-bg-hover: rgba(255, 255, 255, 0.80);
        --floating-button-svg: #000;
        
        /* Section Colors */
        --highlight-bg-text-color: var(--brand-color-2);
        --section-header-text-color: var(--brand-color-2);
        
        /* Button Back Colors */
        --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);
        
        /* Alert Background Colors */
        --bg-color-info: #000000;
        --bg-color-warn: #000000;
        --bg-color-error: #000000;
        
        /* Gradient Colors */
        --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;
}

.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: 10px;
}

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

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

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

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

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

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

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

.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(--small-radius);
    border-top-right-radius: var(--small-radius);
}

.flat-list-item-container:last-child {
    border-bottom-left-radius: var(--small-radius);
    border-bottom-right-radius: var(--small-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;
}

.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: 10px;
    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: 700;
}

.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: 5px;
}

.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: 700;
    display: inline-block;
    width: 100%;
    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: 10px;
    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: 10px;
    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: 10px;
    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(--background-color);
    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: 700;
    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);
}

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

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

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;
    padding: var(--small-padding);
    background-color: var(--shade-back-color);
}

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

.form-cover>span.title {
    font-weight: 700;
    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-gap);
    border-bottom-right-radius: var(--default-gap);
    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: 700;
    margin: 0;
    transform: translateY(0);
}

.app-caption-container>.month {
    font-size: 2rem !important;
    font-weight: 700;
    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: 700;
    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: 700;
    color: var(--brand-color-3);
}

.app-caption-container>.my-day-2 {
    font-size: 1.5rem !important;
    font-weight: 700;
    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: 700;
    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: 700;
    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: 700;
}

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

.inviting-message>h2 {
    font-weight: 700;
    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: 700;
    font-size: 2.5rem !important;
}

.welcome-to-app {
    width: auto !important;
    font-weight: 700;
    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>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: 700;
    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: 5px;
    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;
}

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

.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: 5px;
    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: 10px;
}

.ih-step-list>.ih-step-list-item {
    padding: 15px;
    border-radius: 5px;
}

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

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

.info-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--default-gap);
    width: 100%;
    padding: 3px;
}

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

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

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

.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: 10px;
    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: 700;
}

.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: 700;
    flex-grow: 1;
    flex-shrink: 1;
    color: #fff !important;
}

.special-message>.note {
    margin-top: 15px;
    border-radius: 10px;
    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: 700;
    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: 5px;
    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: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: 10px;
    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);
}
.folding-section > .header {
    padding: var(--small-padding) 0px !important;
}

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

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

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

.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: 700;
    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: 10px;
    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);
}

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: 5px;
    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: 700;
    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;
}

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

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

.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: 5px 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: 15px;
}

.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: 10px;
}

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

.diamond-list {
    padding: 5px 10px 5px 0 !important;
}

.diamond-list:before {
    content: "🔹" !important;
    font-weight: 700;
    font-size: 1.5rem;
}

highlight {
    font-weight: 700;
    color: var(--brand-color-1);
}

emphasized {
    font-weight: 700;
    color: var(--brand-color-4);
}

focused {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--brand-color-2);
}

.has-rich-text svg {
    transform: translateY(6px);
}

.standard-list {
    gap: 5px;
    padding: 5px;
    border-radius: 5px;
    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;
}

.bg-color-brand-1 {
    background-color: var(--brand-color-1);
}

.bg-color-brand-2 {
    background-color: var(--brand-color-2);
}

.bg-color-brand-3 {
    background-color: var(--brand-color-3);
}

.bg-color-brand-4 {
    background-color: var(--brand-color-4);
}

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

.has-contents {
    flex-direction: row;
    height: 100%;
    max-height: 500px;
    overflow-y: auto;
}

.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 h2{
    font-size: 1.3rem;
}

.has-contents ul{
    margin-top: 0px;
    padding-left: 25px;
    width: 100%;
}

.has-contents ul li{
    border-bottom: 1px solid var(--border-color);
    padding: 0px 5px;
}

.image-banner {
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 350px;
    height: 100%;
    background-color: var(--brand-color-3);
}

.image-banner>img {
    width: 150px !important;
    height: auto !important;
}

.image-banner * {
    color: #eee;
    padding: 5px;
    text-align: center !important;
}

.image-banner>.caption {
    text-align: left;
    font-size: 1.75rem;
    font-weight: 700;
    white-space: unset;
    overflow: hidden;
    text-overflow: unset;
    line-height: 3rem !important;
}

.image-banner>.tag-line {
    text-align: left;
    font-size: 1rem;
    line-height: 1rem;
}

.main-content {
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1;
    gap: 15px;
    height: 100%;
    width: 100%;
    padding: 10px;
    padding-top: 30px;
}

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

.overflow-auto {
    overflow: auto;
}

.overflow-autoX {
    overflow-x: auto;
}

.overflow-autoY {
    overflow-y: auto;
}

.overflow-scroll {
    overflow: scroll;
}

.top-margin-s {
    margin-top: var(--small-margin);
}

.top-margin-m {
    margin-top: var(--default-margin);
}

.top-margin-l {
    margin-top: var(--large-margin);
}

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

.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);
    padding-right: var(--small-padding);
}

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

.all-padding-s {
    padding: var(--small-padding);
}

.all-padding-m {
    padding: var(--default-padding);
}

.all-padding-l {
    padding: var(--large-padding);
}

.all-padding-xl {
    padding: 30px;
}

.no-padding {
    padding: 0;
}

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

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

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

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

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

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

.smallest-font {
    font-size: .7rem !important;
}

.smaller-font {
    font-size: .8rem !important;
}

.small-font {
    font-size: .9rem !important;
}

.large-font {
    font-size: 1.1rem !important;
}

.larger-font {
    font-size: 1.2rem !important;
}

.largest-font {
    font-size: 1.2rem !important;
}

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

.deemed-text {
    color: var(--deemed-text-color) !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] {
    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=email]:hover,
input[type=number]:hover,
input[type=password]:hover,
input[type=search]:hover,
input[type=text]:hover,
textarea: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 {
    background-color: var(--input-bg-focused);
}

textarea {
    width: 100%;
    border-radius: var(--small-radius);
    border: none;
    padding: var(--small-padding);
    overflow-y: auto;
    resize: none;
    font-size: 1rem !important;
}

.buttonex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--default-gap);
    padding: var(--default-padding) var(--large-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:last-child {
    margin-right: 0;
}

.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 {
    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 {
    color: var(--highlight-bg-text) !important;
}

.action-button:hover {
    border-color: #de2127;
    box-shadow: 0 4px 8px rgba(222, 33, 39, .4);
}

.action-button:active {
    border-color: #de2127;
    box-shadow: 0 4px 8px rgba(222, 33, 39, .6);
}

.action-button>* {
    color: var(--highlight-bg-text) !important;
}

.action-button>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: 10px;
    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.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: center;
    padding: var(--default-padding) var(--large-padding);
    width: 100%;
    border-radius: 0;
    border-bottom: 1px solid var(--border-color);
}

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

.list-button:active,
.list-button:visited {
    background-color: var(--hover-bg-color-dark);
}

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

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

.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(--default-radius);
    border-bottom-left-radius: var(--default-radius);
}

.option-group>.option:last-child {
    border-right: none;
    border-top-right-radius: var(--default-radius);
    border-bottom-right-radius: var(--default-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,
.icon-form,
.upload-form {
    width: 500px;
    min-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: 700;
    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: 100%;
    height: auto;
    background-color: var(--background-color) !important;
}

.default-list-item {
    border-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom: 1px solid var(--border-color);
}

.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: 5px;
    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;
}

.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: 24px;
    height: 24px;
    background-image: var(--icon-more-h);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(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;
}

.inline-description {
    max-height: 150px;
    overflow-y: auto;
    line-height: 1.75em;
}

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: 5px;
}

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;
}
.sl-item{
    border-radius: var(--small-radius);
}

.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,
.sl-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,
.sl-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,
.sl-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,
.sl-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,
.sl-item.priority-least-border,
.slot-container.priority-least-border {
    border: 1px solid var(--priority-least) !important;
    border-left-width: 6px !important;
}

/* .myday-task-item.priority-high-thick-border,
.sl-item.priority-high-thick-border,
.slot-container.priority-high-thick-border {
    border-left-width: 6px !important;
}

.myday-task-item.priority-medium-thick-border,
.sl-item.priority-medium-thick-border,
.slot-container.priority-medium-thick-border {
    border-left-width: 6px !important;
}

.myday-task-item.priority-normal-thick-border,
.sl-item.priority-normal-thick-border,
.slot-container.priority-normal-thick-border {
    border-left-width: 6px !important;
}

.myday-task-item.priority-low-thick-border,
.sl-item.priority-low-thick-border,
.slot-container.priority-low-thick-border {
    border-left-width: 6px !important;
}

.myday-task-item.priority-least-thick-border,
.sl-item.priority-least-thick-border,
.slot-container.priority-least-thick-border {
    border-left-width: 6px !important;
} */

.sl-item {
    background-color: transparent;
    cursor: pointer;
}

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

.sl-item .description {
    color: var(--text-color) !important;
    font-size: 1rem !important;
    line-height: 1rem;
}

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

.item-snippet,
.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: 10px;
    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: 5px;
    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: 700;
}

[draggable="true"] {
    touch-action: none;
}

.lined-list {
    background-color: var(--page-background);
    padding: 10px;
    border-radius: 10px;
    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: 95%;
        min-width: 300px;
        width: auto;
        bottom: unset;
        border-bottom: 1px solid var(--border-color);
        border-radius: var(--default-radius);
        padding: var(--default-padding);
    }

    .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: 5px;
    }

    ::-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: 5px;
    }

    .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%;
        padding-bottom: 40px;
        box-shadow: 0 -8px 25px rgba(99, 102, 241, .12), 0 -4px 10px rgba(99, 102, 241, .08);
    }

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

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

    .ih-card-container {
        flex-direction: column;
        align-items: start;
        justify-content: start;
        height: 100%;
    }

    .ih-card-container>.ih-card {
        width: 100%;
    }

    .has-contents {
        flex-direction: column;
    }

    .main-content {
        justify-content: start;
    }

    .image-banner {
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
        height: 200px;
        padding: 15px;
    }

    .image-banner>img {
        width: 100px !important;
        height: auto !important;
    }

    .image-banner * {
        color: #eee;
        padding: 5px;
        text-align: center !important;
    }

    .image-banner>.caption {
        text-align: left;
        font-size: 1.25rem;
        font-weight: 700;
        white-space: unset;
        overflow: hidden;
        text-overflow: unset;
        line-height: unset !important;
    }

    .image-banner>.tag-line {
        text-align: center;
        font-size: 1rem;
        line-height: unset;
    }

    .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: 5px !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: 5px !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;
}

.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 {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: var(--page-background);
    cursor: pointer;
}
.insta-help-botton:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06);
}
.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: 5px;
    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: 5px;
    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;
}