/*!
 * LVI JavaScript Toolkit - Powered by 56KGen.com
 * Internal Use Only.
 * Unauthorized copying, modification, or distribution is strictly prohibited.
 * © 2026 All rights reserved.
 */
:root{
    --font-min:14px;
    --font-preferred:2vw;
    --font-max:17px;
    --font-size:clamp(var(--font-min), var(--font-preferred), var(--font-max));
    --font-family:sans-serif;
    --line-height:1.5;
    
    --gap-1:0.10rem;
    --gap-2:0.25rem;
    --gap-3:0.50rem;
    --gap-4:0.75rem;
    --gap-5:1.00rem;

    --size-textbox-height:2rem;
    --size-textbox-width:10rem;

    --size-button-height:2rem;
    --size-button-width:var(--size-button-height);

    --size-textarea-height:10rem;
    --size-select-list-height:10rem;
    --size-message-icon-height:2.50rem;

    --size-checkbox-width:2rem;
    --size-checkbox-height:2rem;

    --size-switchbox-width:2.5rem;
    --size-switchbox-height:1.5rem;

    --size-fieldset-left-width:200px;

    --size-dialog-width:500px;

    --toast-size-width:400px;
    --toast-red-background-color:#b93618;
    --toast-red-color:#fff;

    --toast-green-background-color:#2b8c3a;
    --toast-green-color:#fff;
    
    --toast-blue-background-color:#223d63;
    --toast-blue-color:#ebebeb;
    
    --toast-yellow-background-color:#918308;
    --toast-yellow-color:#fff;
    
    --toast-orange-background-color:#aa5631;
    --toast-orange-color:#fff;
    
    --transition-duration:0.30s;
    --transition-duration-1:0.10s;
    --transition-duration-2:0.20s;
    --transition-duration-3:0.30s;
    --transition-duration-4:0.40s;
    --transition-duration-5:0.50s;

    --radius:0.5rem;
    --radius_pill:9999px;
    --radius_circle:50%;
    --radius_dialog:1rem;

    --aspect-ratio-1-1: 100%;
    --aspect-ratio-1-2: 200%;
    --aspect-ratio-2-1: 50%;
    --aspect-ratio-2-3: 150%;
    --aspect-ratio-3-2: 66.6667%;
    --aspect-ratio-3-4: 133.3333%;
    --aspect-ratio-4-3: 75%;
    --aspect-ratio-4-5: 125%;
    --aspect-ratio-5-4: 80%;
    --aspect-ratio-5-6: 120%;
    --aspect-ratio-6-5: 83.3333%;
    --aspect-ratio-9-16: 177.7778%;
    --aspect-ratio-16-9: 56.25%;
    --aspect-ratio-21-9: 42.8571%;
    --aspect-ratio-9-21: 233.3333%;
}

html{
    --background-color:#fff;
    --text-color:#2e2e2e;
    --link-text-color:#18203a;

    --warning-background-color:#3d3d3d;
    --warning-text-color:#fff;

    --fieldset-field-odd-background-color:#fcfcfc;
    --fieldset-field-even-background-color:#f7f7f7;

    --quote-background-color:#f5f5f5;
    --quote-text-color:#1a1a1a;
    
    --control-background-color:#f7f7f7;
    --control-text-color:#2e2e2e;
    --control-hover-text-color:#000000;
    --control-border-color:#dedede;
    --control-hover-border-color:#b8b8b8;
    --control-focus-background-color:#fff;

    --control-disabled-background-color:#f7f7f7;
    --control-disabled-text-color:#b8b8b8;
    --control-disabled-border-color:#b8b8b8;

    --textbox-background-color:#f7f7f7;
    --textbox-text-color:#1f1f1f;
    --textbox-hover-background-color:#fafafa;
    --textbox-focus-background-color:#fff;
    --textbox-addon-background-color:#e3e3e3;

    --button-radius:9999px;
    --button-background-color:#ebebeb;
    --button-text-color:#2e2e2e;
    --button-hover-background-color:#f7f7f7;
    --button-focus-background-color:#f7f7f7;
    
    --button-red-background-color:#9a0e0e;
    --button-red-text-color:#fff;
    --button-red-hover-background-color:#9f4132;
    --button-red-focus-background-color:#9f4132;

    --button-green-background-color:#154720;
    --button-green-text-color:#ebebeb;
    --button-green-hover-background-color:#04622e;
    --button-green-focus-background-color:#04622e;

    --button-blue-background-color:#18203a;
    --button-blue-text-color:#ebebeb;
    --button-blue-hover-background-color:#1a3456;
    --button-blue-focus-background-color:#1a3456;

    --button-yellow-background-color:#726118;
    --button-yellow-text-color:#ffffff;
    --button-yellow-hover-background-color:#777527;
    --button-yellow-focus-background-color:#777527;

    --button-orange-background-color:#8f440a;
    --button-orange-text-color:#ffffff;
    --button-orange-hover-background-color:#b53a0d;
    --button-orange-focus-background-color:#b53a0d;

    --checkbox-color:#2e2e2e;
    --checkbox-hover-color:#000000;

    --switchbox-color:#bfbfbf;
    --switchbox-checked-color:var(--switchbox-green-checked-color);
    --switchbox-red-checked-color:var(--button-red-background-color);
    --switchbox-green-checked-color:var(--button-green-background-color);
    --switchbox-blue-checked-color:var(--button-blue-background-color);
    --switchbox-yellow-checked-color:var(--button-yellow-background-color);
    --switchbox-orange-checked-color:var(--button-orange-background-color);
    
    --note-border-color:#e3e3e3;
    --note-background-color:#ebebeb;
    --note-text-color:#0a0a0a;
    
    --note-red-border-color:#9a0e0e;
    --note-red-background-color:#9a0e0e;
    --note-red-text-color:#fff;
    
    --note-green-border-color:#154720;
    --note-green-background-color:#154720;
    --note-green-text-color:#ebebeb;
    
    --note-blue-border-color:#18203a;
    --note-blue-background-color:#18203a;
    --note-blue-text-color:#c2c2c2;
    
    --note-yellow-border-color:#645702;
    --note-yellow-background-color:#645702;
    --note-yellow-text-color:#fff;
    
    --note-orange-border-color:#8f440a;
    --note-orange-background-color:#8f440a;
    --note-orange-text-color:#ffffff;

    --dialog-background-color:#fff;
    --dialog-text-color:#2e2e2e;

    --dialog-icon-info-background-color:#223d63;
    --dialog-icon-info-text-color:#ebebeb;

    --dialog-icon-question-background-color:#223d63;
    --dialog-icon-question-text-color:#ebebeb;

    --dialog-icon-warn-background-color:#c36b28;
    --dialog-icon-warn-text-color:#fff;

    --dialog-icon-error-background-color:#a4160a;
    --dialog-icon-error-text-color:#fff;

    --popup-box-shadow:0 0 var(--gap-3) #e3e3e3;

    --loader-background-color:#fff;
    --loader-icon-filter:brightness(0%);
}

html.dark-mode{
    --background-color:#3d3d3d;
    --text-color:#e8e8e8;
    --link-text-color:#a7b5e7;

    --warning-background-color:#fff;
    --warning-text-color:#2e2e2e;

    --fieldset-field-odd-background-color:#333333;
    --fieldset-field-even-background-color:#2e2e2e;

    --quote-background-color:#2e2e2e;
    --quote-text-color:#f5f5f5;
    
    --control-background-color:#3b3b3b;
    --control-text-color:#fff;
    --control-hover-text-color:#e8e8e8;
    --control-border-color:#171717;
    --control-hover-border-color:#171717;
    --control-focus-background-color:#3d3d3d;

    --control-disabled-background-color:#262626;
    --control-disabled-text-color:#3d3d3d;
    --control-disabled-border-color:#424242;

    --textbox-background-color:#262626;
    --textbox-text-color:#f2f2f2;
    --textbox-hover-background-color:#171717;
    --textbox-focus-background-color:#000;
    --textbox-addon-background-color:#171717;

    --button-radius:9999px;
    --button-background-color:#171717;
    --button-text-color:#fff;
    --button-hover-background-color:#333333;
    --button-focus-background-color:#333333;
    
    --button-red-background-color:#f8430d;
    --button-red-text-color:#000;
    --button-red-hover-background-color:#cc7d71;
    --button-red-focus-background-color:#cc7d71;

    --button-green-background-color:#43990b;
    --button-green-text-color:#000;
    --button-green-hover-background-color:#81dc65;
    --button-green-focus-background-color:#81dc65;

    --button-blue-background-color:#5699e1;
    --button-blue-text-color:#000;
    --button-blue-hover-background-color:#78abfc;
    --button-blue-focus-background-color:#78abfc;

    --button-yellow-background-color:#d0ca1b;
    --button-yellow-text-color:#212121;
    --button-yellow-hover-background-color:#efef1f;
    --button-yellow-focus-background-color:#efef1f;

    --button-orange-background-color:#f99034;
    --button-orange-text-color:#000;
    --button-orange-hover-background-color:#f2b650;
    --button-orange-focus-background-color:#f2b650;

    --checkbox-color:#e8e8e8;
    --checkbox-hover-color:#fff;

    --switchbox-color:#636363;
    --switchbox-checked-color:var(--switchbox-green-checked-color);
    --switchbox-red-checked-color:var(--button-red-background-color);
    --switchbox-green-checked-color:var(--button-green-background-color);
    --switchbox-blue-checked-color:var(--button-blue-background-color);
    --switchbox-yellow-checked-color:var(--button-yellow-background-color);
    --switchbox-orange-checked-color:var(--button-orange-background-color);
    
    --note-border-color:#2e2e2e;
    --note-background-color:#333333;
    --note-text-color:#f7f7f7;
    
    --note-red-border-color:#f8430d;
    --note-red-background-color:#e08e85;
    --note-red-text-color:#000;
    
    --note-green-border-color:#43990b;
    --note-green-background-color:#a1fdc4;
    --note-green-text-color:#3b3b3b;
    
    --note-blue-border-color:#867dca;
    --note-blue-background-color:#a7b5e7;
    --note-blue-text-color:#141414;
    
    --note-yellow-border-color:#efef1f;
    --note-yellow-background-color:#f0e19e;
    --note-yellow-text-color:#363636;
    
    --note-orange-border-color:#e45b0c;
    --note-orange-background-color:#e5cca9;
    --note-orange-text-color:#2b2b2b;

    --dialog-background-color:#3d3d3d;
    --dialog-text-color:#e8e8e8;

    --dialog-icon-info-background-color:#5699e1;
    --dialog-icon-info-text-color:#fff;

    --dialog-icon-question-background-color:#5699e1;
    --dialog-icon-question-text-color:#fff;

    --dialog-icon-warn-background-color:#e45b0c;
    --dialog-icon-warn-text-color:#000000;

    --dialog-icon-error-background-color:#a4160a;
    --dialog-icon-error-text-color:#fff;

    --popup-box-shadow:0 0 var(--gap-3) #000;

    --loader-background-color:#3d3d3d;
    --loader-icon-filter:brightness(0) invert(1);
}
  
html,body{
    -webkit-tap-highlight-color: transparent;
    margin:0;padding:0;
    font-size:var(--font-size);
    font-family:var(--font-family);
    background:var(--background-color);
    color:var(--text-color);overflow-x:hidden;
    width:100%;
    min-height:100vh;
}

body{
    position:relative;z-index:1;
}

.safe_zone{
    position:relative;z-index:2;
    padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    box-sizing:border-box;width:100%;height:100%;
}

*,*::before,*::after{
    font-size:inherit;
    font-family:inherit;
    box-sizing:border-box;
    line-height:var(--line-height);
}

i.sprite{
    /* --- GIỮ NGUYÊN KHỐI LOGIC TÍNH TOÁN CỦA ĐẠI CA --- */
    --sprite_sheet_width:1000;
    --sprite_sheet_height:1000;
    
    --x: 0;
    --y: 0;
    
    --sprite_width: 1;
    --sprite_height: 1;
    
    --width: 1;
    --height: 1;
    
    --scale_width: var(--width) / var(--sprite_width);
    --scale_height: var(--height) / var(--sprite_height);
    
    --new_sprite_sheet_width: calc(var(--sprite_sheet_width) * var(--scale_width) * 1px);
    --new_sprite_sheet_height: calc(var(--sprite_sheet_height) * var(--scale_height) * 1px);
    
    --sprite_x: calc(var(--x) * var(--scale_width) * -1px);
    --sprite_y: calc(var(--y) * var(--scale_height) * -1px);

    /* --- PHẦN THAY ĐỔI: CHUYỂN SANG MASK --- */
    display: inline-block; /* Đảm bảo nhận width/height */
    
    /* 1. Đặt ảnh gốc vào mask thay vì background */
    -webkit-mask-image: url('/static/images/sprites.webp');
    mask-image: url('/static/images/sprites.webp');
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    /* 2. Áp dụng các biến tính toán vào mask-size */
    -webkit-mask-size: var(--new_sprite_sheet_width) var(--new_sprite_sheet_height);
    mask-size: var(--new_sprite_sheet_width) var(--new_sprite_sheet_height);
    
    /* 3. Áp dụng các biến tính toán vào mask-position */
    -webkit-mask-position: var(--sprite_x) var(--sprite_y);
    mask-position: var(--sprite_x) var(--sprite_y);
    
    /* 4. MÀU SẮC: Mặc định lấy theo màu chữ (currentColor) hoặc biến */
    background: var(--icon_fill, currentColor);
    
    width: calc(var(--width) * 1px);
    height: calc(var(--height) * 1px);
}

h1,h2,h3,h4,h5,h6,p{
    margin:0;padding:0;
}
ul,ol{
    margin:0;padding:0;list-style:none;
}
*+h1,*+h2,*+h3,*+h4,*+h5,*+h6,*+p,*+ul,*+ol,*+pre,*+blockquote{
    margin-top:var(--gap-3);
}

blockquote,pre{overflow:auto;padding:var(--gap-5);}

h1{
    font-size:2rem;
}
h2{
    font-size:1.5rem;
}
h3{
    font-size:1.3rem;
}
h4{
    font-size:1.2rem;
}
h5{
    font-size:1.1rem;
}
h6{
    font-size:1rem;
}
li{
    margin:0;padding:0;
}

a{
    color:var(--link-text-color);
    cursor:pointer;
    text-decoration:underline;
}

.hidden{
    display:none!important;
}

.lvi-fieldset{
    overflow:hidden;
    border-radius:var(--radius);
    border:1px solid var(--fieldset-field-even-background-color);
}
* + .lvi-fieldset{
    margin-top:var(--gap-2);
}
.lvi-fieldset:empty{
    display:none;
}
.lvi-fieldset .lvi-field{
    display:flex;width:100%;
    align-items:center;
    background:var(--fieldset-field-odd-background-color);
    padding:var(--gap-2);
}
.lvi-fieldset .lvi-field + .lvi-field{
    margin-top:var(--gap-1);
}
.lvi-fieldset .lvi-field:nth-child(even){
    background:var(--fieldset-field-even-background-color);
}
.lvi-fieldset .lvi-field>.left:not(:empty){
    flex-basis:var(--size-fieldset-left-width);flex-shrink:0;
}
.lvi-fieldset .lvi-field>.left:empty{
    display:none;
}

.lvi-fieldset .lvi-field>.right{
    flex-grow:1;width:0;
    word-wrap:break-word;
}

.lvi-control{
    display:inline-flex;align-items:center;vertical-align:bottom;
    overflow:hidden;
    width:var(--size-textbox-width);
    position:relative;z-index:1;
    background:var(--control-background-color);
    border:1px solid var(--control-border-color);
    border-radius:var(--radius);
}
.lvi-control:hover{
    border-color:var(--control-hover-border-color);
}
.lvi-control.block{
    display:flex;
    width:100%;
}

.lvi-control.textbox{
    background:var(--textbox-background-color);
    align-items:stretch;
}
.lvi-control.textbox:hover{
    background:var(--textbox-hover-background-color);
}
.lvi-control.textbox>.addon{
    padding:0 var(--gap-3);
    display:flex;align-items:center;justify-content:center;
    background:var(--textbox-addon-background-color);
    -webkit-user-select:none;user-select:none;
}
.lvi-control.textbox>input{
    flex-grow:1;width:0;flex-shrink:0;
    border:none;
    outline:none;
    -webkit-appearance:none;
    appearance:none;
    background:none;
    position:relative;z-index:1;
    
    height:var(--size-textbox-height);
    padding:0 var(--gap-3);

    cursor:text;
    margin:0;
    font-size:max(16px,var(--font-size));
    color:var(--textbox-text-color);
}
.lvi-control.textbox>input:focus-visible{
    background:var(--textbox-focus-background-color);
}

.lvi-control.textarea{
    background:var(--textbox-background-color);
}
.lvi-control.textarea:hover{
    background:var(--textbox-hover-background-color);
}
.lvi-control.textarea>textarea{
    flex-grow:1;width:0;flex-shrink:0;
    border:none;
    outline:none;
    -webkit-appearance:none;
    appearance:none;
    background:none;
    position:relative;z-index:1;
    
    height:var(--size-textarea-height);
    padding:var(--gap-3);
    resize:none;

    cursor:text;
    margin:0;
    font-size:max(16px,var(--font-size));
    color:var(--textbox-text-color);
}
.lvi-control.textarea>textarea:focus-visible{
    background:var(--textbox-focus-background-color);
}

.lvi-control.select{
    background:var(--textbox-background-color);
}
.lvi-control.select:hover{
    background:var(--textbox-focus-background-color);
}
.lvi-control.select>select{
    flex-grow:1;width:0;flex-shrink:0;
    border:none;
    outline:none;
    -webkit-appearance:none;
    appearance:none;
    background:var(--textbox-background-color);
    position:relative;z-index:1;

    display:block;
    height:var(--size-textbox-height);
    padding:0 calc(3 * var(--gap-3)) 0 var(--gap-3);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    cursor:pointer;
    margin:0;
    color:var(--textbox-text-color);
}
.lvi-control.select::after{
    pointer-events:none;z-index:2;
    content:'';
    display:block;
    position:absolute;
    top:50%;margin-top:calc(0px - var(--gap-3) / 2 );
    width:0;height:0;
    right:var(--gap-3);
    border:var(--gap-3) solid transparent;
    border-top-color:var(--control-border-color);
}
.lvi-control.select>select:focus-visible{
    box-shadow:inset 0 0 1em var(--control-focus-background-color);
}
.lvi-control.select-list{
    background:var(--textbox-background-color);
}
.lvi-control.select-list:hover{
    background:var(--textbox-hover-background-color);
}
.lvi-control.select-list>select{
    flex-grow:1;width:0;flex-shrink:0;
    border:none;
    outline:none;
    -webkit-appearance:none;
    appearance:none;
    background:none;
    position:relative;z-index:1;

    display:block;
    min-height:var(--size-select-list-height);
    padding:0;
    white-space:nowrap;
    overflow-x:hidden;
    overflow-y:auto;
    text-overflow:ellipsis;

    cursor:pointer;
    margin:0;
    color:var(--textbox-text-color);
}

.lvi-control.select-list>select>option{
    display:block;
    height:var(--size-textbox-height);
    width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding:calc((var(--size-textbox-height) - 1em) / 2) var(--gap-3) 0 var(--gap-3);
}

.lvi-control.select-list>select:focus-visible{
    box-shadow:inset 0 0 1em var(--control-focus-background-color);
}

.lvi-control.button{
    border:none;min-width:var(--size-button-width);width:auto;
    border-radius:9999px;
    -webkit-user-select:none;
    user-select:none;
}
.lvi-control.button>input,.lvi-control.button>button,.lvi-control.button>a{
    display:flex;align-items:center;justify-content:center;
    width:100%;flex-shrink:0;
    border:1px solid var(--control-border-color);
    border-radius:9999px;

    outline:none;
    -webkit-appearance:none;
    appearance:none;
    position:relative;z-index:1;

    height:var(--size-button-height);
    padding:0 var(--gap-5);

    background:var(--button-background-color);
    color:var(--button-text-color);
    transition:background-color var(--transition-duration);

    cursor:pointer;
    margin:0;
}
.lvi-control.button>input>.icon,.lvi-control.button>button>.icon,.lvi-control.button>a>.icon{
    flex-shrink:0;
}
.lvi-control.button>input>.icon+.text,.lvi-control.button>button>.icon+.text,.lvi-control.button>a>.icon+.text{
    margin-left:0.2rem;
}


.lvi-control.button>input>.text,.lvi-control.button>button>.text,.lvi-control.button>a>.text{
    flex-grow:1;
}
.lvi-control.button>input:hover,.lvi-control.button>button:hover,.lvi-control.button>a:hover{
    background:var(--button-hover-background-color);
}
.lvi-control.button>button:focus-visible,.lvi-control.button>a:focus-visible{
    box-shadow:inset 0 0 1em var(--button-focus-background-color);
}

.lvi-control.button.red>input,.lvi-control.button.red>button{
    border-color:var(--button-red-background-color);
    background:var(--button-red-background-color);
    color:var(--button-red-text-color);
}
.lvi-control.button.red:hover>input,.lvi-control.button.red:hover>button,.lvi-control.button.red:hover>a{
    border-color:var(--button-red-hover-background-color);
    background:var(--button-red-hover-background-color);
}
.lvi-control.button.red>button:focus-visible,.lvi-control.button.red>a:focus-visible{
    box-shadow:inset 0 0 1em var(--button-red-focus-background-color);
}

.lvi-control.button.green>input,.lvi-control.button.green>button,.lvi-control.button.green>a{
    border-color:var(--button-green-background-color);
    background:var(--button-green-background-color);
    color:var(--button-green-text-color);
}
.lvi-control.button.green:hover>input,.lvi-control.button.green:hover>button,.lvi-control.button.green:hover>a{
    background:var(--button-green-hover-background-color);
    border-color:var(--button-green-hover-background-color);
}
.lvi-control.button.green>button:focus-visible,.lvi-control.button.green>a:focus-visible{
    box-shadow:inset 0 0 1em var(--button-green-focus-background-color);
}

.lvi-control.button.blue>input,.lvi-control.button.blue>button,.lvi-control.button.blue>a{
    border-color:var(--button-blue-background-color);
    background:var(--button-blue-background-color);
    color:var(--button-blue-text-color);
}
.lvi-control.button.blue:hover>input,.lvi-control.button.blue:hover>button,.lvi-control.button.blue:hover>a{
    border-color:var(--button-blue-hover-background-color);
    background:var(--button-blue-hover-background-color);
}
.lvi-control.button.blue>button:focus-visible,.lvi-control.button.blue>a:focus-visible{
    box-shadow:inset 0 0 1em var(--button-blue-focus-background-color);
}

.lvi-control.button.yellow>input,.lvi-control.button.yellow>button,.lvi-control.button.yellow>a{
    border-color:var(--button-yellow-background-color);
    background:var(--button-yellow-background-color);
    color:var(--button-yellow-text-color);
}
.lvi-control.button.yellow:hover>input,.lvi-control.button.yellow:hover>button,.lvi-control.button.yellow:hover>a{
    border-color:var(--button-yellow-hover-background-color);
    background:var(--button-yellow-hover-background-color);
}
.lvi-control.button.yellow>button:focus-visible,.lvi-control.button.yellow>a:focus-visible{
    box-shadow:inset 0 0 1em var(--button-yellow-focus-background-color);
}

.lvi-control.button.orange>input,.lvi-control.button.orange>button,.lvi-control.button.orange>a{
    border-color:var(--button-orange-background-color);
    background:var(--button-orange-background-color);
    color:var(--button-orange-text-color);
}
.lvi-control.button.orange:hover>input,.lvi-control.button.orange:hover>button,.lvi-control.button.orange:hover>a{
    border-color:var(--button-orange-hover-background-color);
    background:var(--button-orange-hover-background-color);
}
.lvi-control.button.orange>button:focus-visible.lvi-control.button.orange>a:focus-visible{
    box-shadow:inset 0 0 1em var(--button-orange-focus-background-color);
}

.lvi-control.checkbox{
    background:none;border:none;
    align-items:center;
    width:auto;
}
.lvi-control.checkbox input{
    display:none;
}
.lvi-control.checkbox label{
    -webkit-user-select:none;user-select:none;
    display:flex;align-items:start;
    color:var(--control-text-color);
    position:relative;z-index:1;
    cursor:pointer;
}
.lvi-control.checkbox.block label{
    width:100%;
}
.lvi-control.checkbox label::before{
    content:'';flex-shrink:0;
    display:block;align-items:center;justify-content:center;

    width:var(--size-checkbox-width);
    height:var(--size-checkbox-height);
    
    border:1px solid var(--checkbox-color);
    border-radius:var(--radius);
}
.lvi-control.checkbox label::after{
    content:'';display:none;position:absolute;z-index:2;

    width:calc(var(--size-checkbox-width) / 2);
    height:calc(var(--size-checkbox-height) / 2);

    background:var(--checkbox-color);

    top:0;left:0;
    margin-top:calc(var(--size-checkbox-height) / 4);
    margin-left:calc(var(--size-checkbox-width) / 4);
    border-radius:var(--radius);
}
.lvi-control.checkbox:hover label::before{
    border-color:var(--checkbox-hover-color);
}
.lvi-control.checkbox:hover label::after{
    background:var(--checkbox-hover-color);
}
.lvi-control.checkbox:hover label{
    color:var(--control-hover-text-color);
}
.lvi-control.checkbox input:checked+label::after{
    display:block;
}
.lvi-control.checkbox label:not(:empty)::before{
    margin-right:var(--gap-3);
}


.lvi-control.radio{
    background:none;border:none;
    align-items:center;
    width:auto;
}
.lvi-control.radio input{
    display:none;
}
.lvi-control.radio label{
    -webkit-user-select:none;user-select:none;
    display:flex;align-items:start;
    color:var(--control-text-color);
    position:relative;z-index:1;
    cursor:pointer;
}
.lvi-control.radio.block label{
    width:100%;
}
.lvi-control.radio label::before{
    content:'';flex-shrink:0;
    display:block;align-items:center;justify-content:center;

    width:var(--size-checkbox-width);
    height:var(--size-checkbox-height);
    
    border:1px solid var(--checkbox-color);
    border-radius:var(--radius_circle);
}
.lvi-control.radio label::after{
    content:'';display:none;position:absolute;z-index:2;

    width:calc(var(--size-checkbox-width) / 2);
    height:calc(var(--size-checkbox-height) / 2);

    background:var(--checkbox-color);

    top:0;left:0;
    margin-top:calc(var(--size-checkbox-height) / 4);
    margin-left:calc(var(--size-checkbox-width) / 4);
    border-radius:var(--radius_circle);
}
.lvi-control.radio:hover label::before{
    border-color:var(--checkbox-hover-color);
}
.lvi-control.radio:hover label::after{
    background:var(--checkbox-hover-color);
}
.lvi-control.radio:hover label{
    color:var(--control-hover-text-color);
}
.lvi-control.radio input:checked+label::after{
    display:block;
}
.lvi-control.radio label:not(:empty)::before{
    margin-right:var(--gap-3);
}



.lvi-control.switchbox{
    background:none;border:none;
    align-items:center;
    width:auto;
}
.lvi-control.switchbox input{
    display:none;
}
.lvi-control.switchbox label{
    -webkit-user-select:none;user-select:none;
    display:flex;align-items:start;
    color:var(--control-text-color);
    position:relative;z-index:1;
    cursor:pointer;
}
.lvi-control.switchbox.block label{
    width:100%;
}
.lvi-control.switchbox label::before{
    content:'';flex-shrink:0;
    display:block;align-items:center;justify-content:center;

    width:var(--size-switchbox-width);
    height:var(--size-switchbox-height);
    
    border-radius:9999px;

    background:var(--switchbox-color);
    transition:background-color var(--transition-duration);
}
.lvi-control.switchbox label::after{
    content:'';position:absolute;z-index:2;

    width:calc(var(--size-switchbox-height) - 4px);
    height:calc(var(--size-switchbox-height) - 4px);

    background:white;

    top:2px;left:0px;
    transform:translateX(2px);
    border-radius:var(--radius_circle);
    transition:transform var(--transition-duration);
}
.lvi-control.switchbox input:checked+label::before{
    background:var(--switchbox-checked-color);
}
.lvi-control.switchbox input:checked+label::after{
    transform:translateX(calc(var(--size-switchbox-width) - var(--size-switchbox-height) + 2px ));
}
.lvi-control.switchbox label:not(:empty)::before{
    margin-right:var(--gap-3);
}
.lvi-control.switchbox.red input:checked+label::before{
    background:var(--switchbox-red-checked-color);
}
.lvi-control.switchbox.green input:checked+label::before{
    background:var(--switchbox-green-checked-color);
}
.lvi-control.switchbox.blue input:checked+label::before{
    background:var(--switchbox-blue-checked-color);
}
.lvi-control.switchbox.yellow input:checked+label::before{
    background:var(--switchbox-yellow-checked-color);
}
.lvi-control.switchbox.orange input:checked+label::before{
    background:var(--switchbox-orange-checked-color);
}

.lvi-control.textbox input:disabled,
.lvi-control.textarea textarea:disabled,
.lvi-control.select select:disabled,
.lvi-control.select-list select:disabled,
.lvi-control.button input:disabled,
.lvi-control.button button:disabled,
.lvi-control.button a.disabled{
    border-color:var(--control-border-color)!important;
    color:var(--control-disabled-text-color)!important;
    background:var(--control-disabled-background-color)!important;
    cursor:not-allowed!important;
}

.lvi-control.textbox input:disabled + *,
.lvi-control.textarea textarea:disabled + *,
.lvi-control.select select:disabled + *,
.lvi-control.select-list select:disabled + *{
    pointer-events:none!important;
}


.lvi-control.checkbox input:disabled + label,
.lvi-control.radio input:disabled + label{
    color:var(--control-disabled-text-color)!important;
    cursor:not-allowed!important;
    opacity:0.6!important;
}

.lvi-control.checkbox input:disabled + label::before,
.lvi-control.radio input:disabled + label::before{
    border-color:var(--control-disabled-border-color)!important;
}

.lvi-control.checkbox input:disabled + label::after,
.lvi-control.radio input:disabled + label::after{
    background:var(--control-disabled-border-color)!important;
}



.lvi-control+.lvi-control{
    margin:0 0 0 var(--gap-1);
}
.lvi-control+.lvi-control.block{
    margin:var(--gap-1) 0 0 0;
}
#lvi-error{
    position:fixed;top:0;left:0;z-index:99999999;
    width:100vw;height:100vh;box-sizing:border-box;
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
}
#lvi-error::before{
    content:'';display:block;width:100%;height:100%;
    position:absolute;z-index:1;
    background:#000;
    opacity:0.8;
}
#lvi-error::after{
    box-sizing:border-box;
    content:attr(data-content);padding:1rem;
    color:#fff;
    z-index:2;position:absolute;
    display:flex;width:100%;height:100%;align-items:center;justify-content:center;text-align:center;
}

#lvi-loader{
    -webkit-user-select:none;user-select:none;
    font-size:max(2rem,min(10vw,10vh));
    position:fixed;top:-25vh;left:0;z-index:9999999;
    display:flex;align-items:center;justify-content:center;
    width:100vw;height:150vh;box-sizing:border-box;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}
#lvi-loader::before{
    content:'';display:block;width:100%;height:100%;
    position:absolute;z-index:1;
    background:var(--loader-background-color);
    opacity:0.8;
}
#lvi-loader::after{
    content:'';
    display:block;z-index:2;
    width:1em;height:1em;
    background:url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path style="rgba(0,0,0,1)" d="M100-0.25c-10.458,0-18.966,8.508-18.966,18.966S89.542,37.682,100,37.682s18.966-8.508,18.966-18.966S110.458-0.25,100-0.25z M42.524,45.113c0.691,0,1.342-0.27,1.831-0.758c0.489-0.489,0.759-1.14,0.759-1.832c0-0.691-0.27-1.342-0.759-1.831c-0.489-0.489-1.139-0.759-1.831-0.759c-0.692,0-1.342,0.27-1.832,0.759c-1.009,1.009-1.009,2.652,0,3.662C41.182,44.843,41.832,45.113,42.524,45.113z M18.716,95.07c-2.718,0-4.929,2.211-4.929,4.93c0,2.718,2.211,4.929,4.929,4.929c2.718,0,4.93-2.211,4.93-4.929C23.646,97.282,21.434,95.07,18.716,95.07z M42.523,150.208c-1.941,0-3.767,0.756-5.14,2.129c-2.833,2.833-2.833,7.444,0,10.279c1.373,1.373,3.198,2.129,5.14,2.129s3.767-0.756,5.14-2.129s2.129-3.199,2.129-5.141s-0.756-3.767-2.129-5.139C46.29,150.964,44.465,150.208,42.523,150.208z M100,171.676c-5.297,0-9.607,4.31-9.607,9.607s4.31,9.607,9.607,9.607c5.298,0,9.608-4.31,9.608-9.607S105.298,171.676,100,171.676z M157.477,145.528c-3.191,0-6.191,1.243-8.448,3.5c-4.658,4.658-4.658,12.238,0,16.896c2.257,2.256,5.257,3.498,8.448,3.498s6.191-1.242,8.448-3.498c4.658-4.658,4.658-12.238,0-16.896C163.668,146.771,160.668,145.528,157.477,145.528z M181.284,85.713c-7.878,0-14.287,6.409-14.287,14.287s6.409,14.287,14.287,14.287s14.287-6.409,14.287-14.287S189.162,85.713,181.284,85.713z M157.477,59.149c4.441,0,8.616-1.729,11.757-4.869c6.482-6.483,6.482-17.031,0-23.514c-3.141-3.141-7.315-4.87-11.757-4.87s-8.616,1.729-11.757,4.87c-6.482,6.483-6.482,17.031,0,23.514C148.86,57.42,153.035,59.149,157.477,59.149z"/></svg>');
    -webkit-animation:0.8s steps(8) infinite lvi_spinner_keyframes;
    animation:0.8s steps(8) infinite lvi_spinner_keyframes;
    filter:var(--loader-icon-filter);
}


.lvi-previewer{
    position:fixed;top:0;left:0;z-index:999999;
    display:flex;align-items:center;justify-content:center;
    width:100vw;height:100vh;box-sizing:border-box;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    padding:max(var(--gap-5),var(--safe-top)) max(var(--gap-5),var(--safe-right)) max(var(--gap-5),var(--safe-bottom)) max(var(--gap-5),var(--safe-left));
}
.lvi-previewer .box{
    display:flex;position:relative;z-index:1;box-sizing:border-box;padding:var(--gap-5);
    overflow:auto;border-radius:var(--radius_dialog);
    color:var(--dialog-text-color);
    max-width:100%;max-height:100%;
    flex-direction:column;
}
.lvi-previewer .box .command{
    display:flex;flex-shrink:0;
    height:calc(var(--size-button-height) * 2);
    justify-content:center;align-items:center;
}

.lvi-previewer .box .image-container{
    display:flex;
    border-radius:var(--radius_dialog);
    max-height:calc(100vh - calc(var(--size-button-height) * 2) - max(var(--gap-5),var(--safe-top)) - max(var(--gap-5),var(--safe-bottom)) - var(--gap-5) - var(--gap-5));
    max-width:100%;
    flex-grow:1;flex-shrink:1;align-items:center;justify-content:center;
    background:no-repeat center center;
    background-size:contain;
}
.lvi-previewer .box .image-container img{
    max-width:100%;max-height:100%;
    object-fit:contain;
}
.lvi-previewer .box .image-container video{
    background:#000;
    max-height:80vh;
    max-width:80vw;
    border-radius:var(--radius);
}

.lvi-popup{
    position:fixed;top:0;left:0;z-index:999999;
    display:flex;align-items:center;justify-content:center;
    width:100vw;height:100vh;box-sizing:border-box;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    padding:max(var(--gap-5),var(--safe-top)) max(var(--gap-5),var(--safe-right)) max(var(--gap-5),var(--safe-bottom)) max(var(--gap-5),var(--safe-left));
    flex-direction:column;
}

.lvi-popup>.box{
    display:flex;position:relative;z-index:1;box-sizing:border-box;padding:var(--gap-5);
    overflow:auto;border-radius:var(--radius_dialog);
    color:var(--dialog-text-color);
    max-width:100%;max-height:calc(100% - (var(--size-button-height) * 2));align-items:center;justify-content:center;
    overflow:auto;
    box-shadow:var(--popup-box-shadow);
    background:var(--background-color);
    align-items:stretch;
}
.lvi-popup>.box>div{
    width:100%;height:100%;
}

.lvi-popup>.command{
    display:flex;flex-shrink:0;
    height:calc(var(--size-button-height) * 2);
    justify-content:center;align-items:center;
}

#lvi-toast-container{
    pointer-events:none;position:fixed;z-index:99999999;
    bottom:0;
    right:0;
    padding:max(var(--gap-5),var(--safe-top)) max(var(--gap-5),var(--safe-right)) max(var(--gap-5),var(--safe-bottom)) max(var(--gap-5),var(--safe-left));
    box-sizing:border-box;
    width:var(--toast-size-width);
    max-width:100%;
}
#lvi-toast-container .toast{
    cursor:pointer;pointer-events:auto;position:relative;
    display:flex;flex-grow:1;flex-shrink:0;
    flex-direction:column;
    padding:var(--gap-3);
    border-radius:var(--radius);
    overflow:hidden;
    opacity:1;transform:translateY(0px);
    -webkit-animation:toastFadeInOut var(--transition-duration-5) ease-out forwards;
    animation:toastFadeInOut var(--transition-duration-5) ease-out forwards;
}
@keyframes toastFadeInOut {
    0%{opacity:0;transform:translateY(20px);}
    100%{opacity:1;transform:translateY(0px);}
}
#lvi-toast-container .toast::before{
    content:'';display:block;position:absolute;z-index:1;top:0;left:0;
    opacity:0.8;width:100%;height:100%;
}
#lvi-toast-container .toast.red{
    color:var(--toast-red-color);
}
#lvi-toast-container .toast.red::before{
    background:var(--toast-red-background-color);
}
#lvi-toast-container .toast.green{
    color:var(--toast-green-color);
}
#lvi-toast-container .toast.green::before{
    background:var(--toast-green-background-color);
}
#lvi-toast-container .toast.blue{
    color:var(--toast-blue-color);
}
#lvi-toast-container .toast.blue::before{
    background:var(--toast-blue-background-color);
}
#lvi-toast-container .toast.yellow{
    color:var(--toast-yellow-color);
}
#lvi-toast-container .toast.yellow::before{
    background:var(--toast-yellow-background-color);
}
#lvi-toast-container .toast.orange{
    color:var(--toast-orange-color);
}
#lvi-toast-container .toast.orange::before{
    background:var(--toast-orange-background-color);
}
#lvi-toast-container .toast+.toast{
    margin-top:var(--gap-3);
}
#lvi-toast-container .toast .title{
    font-weight:bold;display:block;position:relative;z-index:2;
    padding-bottom:var(--gap-3);
}
#lvi-toast-container .toast .title:last-child{
    padding-bottom:0;
}
#lvi-toast-container .toast .content{
    position:relative;z-index:2;
}

.lvi-dialog{
    position:fixed;top:0;left:0;z-index:999999;
    display:flex;align-items:center;justify-content:center;
    width:100vw;height:100vh;box-sizing:border-box;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}
.lvi-dialog .box{
    display:block;position:relative;z-index:1;
    width:var(--size-dialog-width);max-width:calc(100vw - max(var(--gap-5),calc(var(--safe-right) + var(--safe-left))));
    height:auto;max-height:calc(100vh - max(var(--gap-5),calc(var(--safe-top) + var(--safe-bottom))));
    overflow:auto;border-radius:var(--radius_dialog);
    padding:var(--gap-5);
    background:var(--dialog-background-color);color:var(--dialog-text-color);border:1px solid var(--control-border-color);
    box-shadow:0 0 1rem var(--control-border-color);
}
.lvi-dialog .box .container{
    height:100%;
}

.lvi-dialog .box .container .title{
    font-size:1.4rem;-webkit-user-select:none;user-select:none;
}
.lvi-dialog .box .container .message{
    display:flex;align-items:center;
}
.lvi-dialog .box .container * + .message:not(:empty){
    padding-top:var(--gap-3);
}

.lvi-dialog .box .container .message .icon{
    flex-basis:var(--size-message-icon-height);flex-shrink:0;
    height:var(--size-message-icon-height);
    margin-right:var(--gap-3);
}
.lvi-dialog .box .container .message .icon:empty{
    display:none;
}

.lvi-dialog .box .container .message .icon .info{
    display:flex;width:100%;height:100%;align-items:center;justify-content:center;
    background:var(--dialog-icon-info-background-color);
    border-radius:50%;
}
.lvi-dialog .box .container .message .icon .info::after{
    content:'i';font-style:italic;font-family:serif;font-size:2rem;
    color:var(--dialog-icon-info-text-color);
}


.lvi-dialog .box .container .message .icon .question{
    display:flex;width:100%;height:100%;align-items:center;justify-content:center;
    background:var(--dialog-icon-question-background-color);
    border-radius:50%;
}
.lvi-dialog .box .container .message .icon .question::after{
    content:'?';font-family:serif;font-size:2rem;
    color:var(--dialog-icon-question-text-color);
}

.lvi-dialog .box .container .message .icon .error{
    display:flex;width:100%;height:100%;align-items:center;justify-content:center;
    background:var(--dialog-icon-error-background-color);
    border-radius:50%;
}
.lvi-dialog .box .container .message .icon .error::after{
    content:'!';font-family:serif;font-size:2rem;
    color:var(--dialog-icon-error-text-color);
}

.lvi-dialog .box .container .message .icon .warning{
    display:flex;width:100%;height:100%;align-items:center;justify-content:center;
}
.lvi-dialog .box .container .message .icon .warning::before{
    content:'';position:absolute;
    display:block;
    z-index:1;
    width:0;height:0;
    border:1.25rem solid transparent;
    border-bottom:2.5rem solid var(--dialog-icon-warn-background-color);
    transform:translateY(-0.75rem);
}

.lvi-dialog .box .container .message .icon .warning::after{
    content:'!';font-family:serif;font-size:2rem;position:absolute;z-index:2;
    color:var(--dialog-icon-warn-text-color);
}

.lvi-dialog .box .container .message .content{
    flex-grow:1;flex-shrink:0;width:0;
}

.lvi-dialog .box .container .list-button{
    display:flex;align-items:center;justify-content:right;
}
.lvi-dialog .box .container * + .list-button:not(:empty){
    padding-top:var(--gap-2);
}

.lvi-control+.lvi-note,.lvi-note+.lvi-note{
    margin:var(--gap-1) 0 0 0;
}

.lvi-note{
    padding:var(--gap-3);
    border:1px solid var(--note-border-color);
    background:var(--note-background-color);
    color:var(--note-text-color);
    border-radius:var(--radius);
}
.lvi-note.red{
    border-color:var(--note-red-border-color);
    background:var(--note-red-background-color);
    color:var(--note-red-text-color);
}
.lvi-note.green{
    border-color:var(--note-green-border-color);
    background:var(--note-green-background-color);
    color:var(--note-green-text-color);
}
.lvi-note.blue{
    border-color:var(--note-blue-border-color);
    background:var(--note-blue-background-color);
    color:var(--note-blue-text-color);
}
.lvi-note.yellow{
    border-color:var(--note-yellow-border-color);
    background:var(--note-yellow-background-color);
    color:var(--note-yellow-text-color);
}
.lvi-note.orange{
    border-color:var(--note-orange-border-color);
    background:var(--note-orange-background-color);
    color:var(--note-orange-text-color);
}
@media print {body {-webkit-print-color-adjust: exact;print-color-adjust: exact;}html, body {background: inherit !important;color: inherit !important;}*, *::before, *::after {box-shadow: none !important;text-shadow: none !important;}img, svg {max-width: 100% !important;page-break-inside: avoid;}nav, footer, .no-print {display: none !important;}@page {margin: 1cm;size: auto;}}

@media(max-width:48em){
    .lvi-fieldset .lvi-field{
        flex-direction:column;
    }
    .lvi-fieldset .lvi-field>.left,.lvi-fieldset .lvi-field>.left:not(:empty),.lvi-fieldset .lvi-field>.right,.lvi-fieldset .lvi-field>.right:not(:empty){
        flex-basis:auto;
        width:100%;
        flex-grow:1;
    }
    .lvi-fieldset .lvi-field .left+.right{
        margin-top:var(--gap-2);
    }

    .lvi-dialog .box .container .title{
        text-align:center;
    }
    .lvi-dialog .box .container .message{
        justify-content:center;
    }
    .lvi-dialog .box .container .list-button{
        flex-direction:column;
        justify-content:center;
    }
    .lvi-dialog .box .container .list-button>.lvi-control{
        display:flex;
        border-radius:var(--radius);
    }
    .lvi-dialog .box .container .list-button>.lvi-control.button{
        width:100%;
        border-radius:var(--radius);
    }
    .lvi-dialog .box .container .list-button>.lvi-control.button>button,.lvi-dialog .box .container .list-button>.lvi-control.button>a{
        border-radius:var(--radius);
    }
    .lvi-dialog .box .container .list-button>.lvi-control+.lvi-control{
        margin:var(--gap-1) 0 0 0;
    }   
}