:root {
    --isMobile: 0;
    --app-width: 100vw;
    --app-height: 100vh;
    --header-height: 3.8em;
    --footer-height: 4em;
    --font-color: #2f3235;
    --submit-color: #46C263; /*  005092  */
    --primary-color: #00345f; /*  005092  */
    --primary-color2: #1d73b9; /*  005092  */
    --menu-text-color: rgba(58, 58, 58, 0.8);
    --title-color: rgba(58, 58, 58, 0.8);
    --list-page: 0;
    --list-count: 5;
    --top-padding-size: 45px;
    --left-menu-mini-size: 80px;
    --left-menu-size: 220px;
    --awesome : "Font Awesome 6 Pro";
    --input-group-prepend-width: 6.5rem;
    --list-item-height: 27;
    --border-color: #dee2e6;
    --bg-color-input: #fff;
    --bg-color-input-disable: #e9ecef;
    --bg-color: #fff;
    --bg-color2: #efefef;
    --bg-color-a: rgba(240,240,240, .5);
    --bg-color-check: #efefef
}

html,
body {
    overflow: hidden;
    font-family: var(
        --font-body,
        'Segoe UI',
        'Roboto',
        'Oxygen',
        'Fira Sans',
        'Droid Sans',
        'Helvetica Neue',
        sans-serif
    );
    font-size: 9pt;
    -webkit-text-size-adjust: none;
    color: var(--font-color);
}
input:not([type="radio"],[type="checkbox"]),
.form-control,
.form-control:focus {
    border-color: var(--border-color);
    background-color: var(--bg-color-input);
    color: var(--font-color);
}

input:not([type="radio"],[type="checkbox"]):disabled,
input:not([type="radio"],[type="checkbox"])[readonly],
.form-control:disabled,
.form-control[readonly] {
    border-color: var(--border-color);
    background-color: var(--bg-color-input);
    color: var(--font-color);
    opacity: 0.8;
}

input,
button,
select,
optgroup,
textarea {
    font-family: var(
        --font-body,
        'Segoe UI',
        'Roboto',
        'Oxygen',
        'Fira Sans',
        'Droid Sans',
        'Helvetica Neue',
        sans-serif
    );
}

@media screen {
    html,
    body {
        height: 100vh;
    }
}

button,
input,
input[type=checkbox]+label,
input[type=radio]+label,
a,
label.input-label,
[data-no-result-list],
[form-tab-menu],
.input-group-text,
.section-title,
.title,
.navbar,
.navbar-top-menu-bar {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* 인터넷익스플로러 */
    user-select: none;
}

main {
    padding: 0 !important;
}
/*
*:not(.form-control, [list-item]) input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
*:not(.form-control, [list-item]) textarea {
    display: block;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--font-color);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
*/
.view-size-1, .view-resize-1 {--view-size: 8.333333%;}
.view-size-2, .view-resize-2 {--view-size: 16.666667%;}
.view-size-3, .view-resize-3 {--view-size: 25%;}
.view-size-4, .view-resize-4 {--view-size: 33.333333%;}
.view-size-5, .view-resize-5 {--view-size: 41.666667%;}
.view-size-6, .view-resize-6 {--view-size: 50%;}
.view-size-7, .view-resize-7 {--view-size: 58.333333%;}
.view-size-8, .view-resize-8 {--view-size: 66.666667%;}
.view-size-9, .view-resize-9 {--view-size: 75%;}
.view-size-10, .view-resize-10 {--view-size: 83.333333%;}
.view-size-11, .view-resize-11 {--view-size: 91.666667%;}
.view-size-12, .view-resize-12 {--view-size: 100%;}
[class*=view-size] {
    -ms-flex: 0 0 var(--view-size);
    flex: 0 0 var(--view-size);
}
:not([direction=column]) > [class*=view-size] {
    max-width: var(--view-size);
    width: 10%;
}
[direction=column] > [class*=view-size] {
    max-height: var(--view-size);
    height: 100%;
}
:not([direction=column]) > [size-bar]+[class*=view-size]:last-child {
    width: 0;
    max-width: none;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
[direction=column] > [size-bar]+[class*=view-size]:last-child {
    height: 0;
    max-height: none;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
:not([direction=column]) > [class*=view-resize] {
    min-width: var(--view-size);
}
[direction=column] > [class*=view-resize] {
    min-height: var(--view-size);
}
[layout-view]:not([class*=view-size]) {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
[editor-area] {
    height: fit-content;
}
[editor-area] [editor-tool] {
    margin: 0 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.nav-tabs,
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-color: var(--border-color);
}
.btn:not([class*=btn-]), .btn:hover:not([class*=btn-]) {
    color: var(--font-color) !important;
}
.btn:hover:not([class*=btn-]) {
    opacity: 0.8;
}
.border
.border-top,
.border-left,
.border-right,
.border-bottom {
    border-color: var(--border-color) !important;
}
[data-won-type="editor"] {
    overflow: auto;
    width: 100%;
    min-height: 10rem;
    padding: 0.5rem;
}
.bg-primary {background-color:var(--primary-color) !important}
.btn-primary {background-color:var(--primary-color) !important; border-color:var(--primary-color) !important}

.fa-classic, .fa-regular, .fa-solid, .far, .fas {
    font-family: 'Nanum Gothic', sans-serif; 
    font-weight: inherit;
    vertical-align: middle;
    -webkit-text-size-adjust: none;
}
.fa-classic::before, .fa-regular::before, .fa-solid::before, .far::before, .fas::before {
    font-family: var(--awesome);
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
}
.fa-regular::before, .far::before {
    font-weight: 400;
}
.fa-solid::before, .fas::before {
    font-weight: 900;
}

span.fa-solid::before, span.fas::before, span.fa-regular::before, span.far::before {
    margin-right: 0.25rem;
    min-width: 1rem;
    display: inline-block;
    text-align: center;
}

.normal		{ font-weight: 400 !important }
.bold		{ font-weight: 700 !important }
.bolder		{ font-weight: 800 !important }
.light		{ font-weight: 300 !important }

.toggle-helper {visibility: hidden;}

:not(.list-scroll, .dropdown-menu, [data-layout-form] > .id)::-webkit-scrollbar { display:none;}

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

html.layout-fixed body {
    padding-top: 95px;
}

nav.fixed-top {
    padding-top: 45px;
    margin-left: 0;
    background-color: var(--bg-color);
}
.navbar.fixed-left {
    max-height: 100vh;
}

.navbar.fixed-left .navbar-collapse{
    flex-grow:0;
    flex-direction:column;
    width:100%;
    height: 100%;
    overflow: hidden;
}

.navbar-expand-md .navbar-collapse.show {
    display: -ms-flexbox!important;
    display: flex!important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    height: calc(100vh - 50px);
}
@media (min-width:768px){
    .navbar.fixed-left{
        height: auto;
        bottom:0;
        width:var(--left-menu-mini-size);
        flex-flow:column nowrap;
        align-items:flex-start;
        -webkit-transition:width 0.1s;
        transition:width 0.1s;
        box-shadow: 5px 0 15px rgba(0, 0, 0, .25);
    }
    
    .navbar.fixed-left .navbar-collapse .navbar-nav{flex-direction:column;width:100%}
    .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item{width:100%}
    .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item .dropdown-menu{top:0}
    .navbar.fixed-left{right:auto}
    .navbar.fixed-left .navbar-nav .nav-item .dropdown-toggle:after{border-top:.3em solid transparent;border-left:.3em solid;border-bottom:.3em solid transparent;border-right:none;vertical-align:baseline}
    .navbar.fixed-left .navbar-nav .nav-item .dropdown-menu{left:100%}

    body.navbar-hold .navbar.fixed-left,
    .navbar.fixed-left:hover {
        width:var(--left-menu-size);
    }

    
    .navbar.navbar-mini {
        width:var(--left-menu-mini-size) !important;
    }

    body:not(.navbar-hold) .navbar.fixed-left .hold-pin,
    .navbar.fixed-left .walcome-msg{
        display: none;
    }
    body.navbar-hold .navbar.fixed-left .hold-pin {
        display: inline-block !important;
        color:rgb(148, 0, 0);
        transform: rotate(0.1turn);
        -webkit-transition:transform 0.2s;
        transition: transform 0.2s;
    }
    body:not(.navbar-hold) .navbar.fixed-left:hover .hold-pin {
        color:var(--menu-text-color);
        transform: rotate(0turn);
        -webkit-transition:transform 0.2s;
        transition: transform 0.2s;
    }
    .navbar.fixed-left:hover .hold-pin,
    body.navbar-hold .navbar.fixed-left .walcome-msg,
    .navbar.fixed-left:hover .walcome-msg {
        display: inline-block !important;
    }
    
    .navbar.fixed-left:hover .nav-group > b,
    .navbar.fixed-left:hover .nav-group >.fa-star ,
    .navbar.fixed-left:hover li.nav-item > span,
    .navbar.fixed-left:hover li.nav-item >.fa-star,
    body.navbar-hold .navbar.fixed-left .nav-group > b,
    body.navbar-hold .navbar.fixed-left .nav-group >.fa-star ,
    body.navbar-hold .navbar.fixed-left li.nav-item > span,
    body.navbar-hold .navbar.fixed-left li.nav-item >.fa-star  {
        width: auto;
        height: auto;
    }

    body.navbar-hold .navbar.fixed-left .nav-group,
    .navbar.fixed-left:hover .nav-group,
    body.navbar-hold .navbar.fixed-left li.nav-item,
    .navbar.fixed-left:hover li.nav-item {
        text-align: left;
    }
    body.navbar-hold .navbar.fixed-left .wavebox,
    .navbar.fixed-left:hover .wavebox {
        height: 150px;
    }
    .navbar.fixed-left .wavebox {
        height: 0;
    }
    body.navbar-hold .navbar.fixed-left #now-time,
    .navbar.fixed-left:hover #now-time {
        display: block;
    }
    #now-time {
        display: none;
    }
    .navbar.fixed-left .nav-group > b, .navbar.fixed-left .nav-group >.fa-star , .navbar.fixed-left li.nav-item > span, .navbar.fixed-left li.nav-item >.fa-star  {
        display: inline-block;
        width: 0;
        height: 0;
        overflow: hidden;
        vertical-align: middle;
        -webkit-transition:width 0s;
        transition:width 0s;
        -webkit-transition-delay: 0.5s;
        transition-delay: 0.5s;
    }

    .navbar.fixed-left .nav-group,
    .navbar.fixed-left li.nav-item {
        text-align: center;
    }

    html.layout-fixed body {
        padding-top:var(--top-padding-size);
    }

    html.layout-fixed body, nav.fixed-top {
        padding-left:var(--left-menu-mini-size);
    }

    body.navbar-hold, body.navbar-hold nav.fixed-top {
        padding-left:var(--left-menu-size);
    }

    nav.fixed-top {
        padding-top: 0;
    }


    .navbar.navbar-mini div.nav-group,
    .navbar.navbar-mini .nav-item {
        text-align: center !important;
        padding: 0.8rem 0.2rem !important;
    }
    .navbar.navbar-mini .nav-group > b,
    .navbar.navbar-mini .nav-item > span,
    .navbar.navbar-mini .nav-group > i.fa-star
    .navbar.navbar-mini .nav-item > i.fa-star {
        display: none !important;
    }
    .navbar.navbar-mini .nav-group:hover > b,
    .navbar.navbar-mini .nav-item:hover > span,
    .navbar.navbar-mini .nav-group:hover > i.fa-star,
    .navbar.navbar-mini .nav-item:hover > i.fa-star {
        display: inline-block !important;
    }
}

@media (min-width:1400px){
    .navbar.fixed-left:hover .hold-pin {
        display: inline-block;
    }
}

.navbar {
    color: var(--menu-text-color);
    background-color: var(--bg-color) !important;
    border-right: var(--border-color) solid 1px;
    font-size: 1.2rem;
    padding: 0.5rem 0;
}

.navbar a {
    color: var(--menu-text-color);
    text-decoration: none;
}
.navbar a.active {
    color: var(--primary-color);
}
.navbar a:hover {
    color: rgb(156, 156, 156);
}
.navbar .nav-link {
    padding: .3rem 1rem;
}

.navbar .nav-item {
    background-color: var(--bg-color2);
    padding: 0.8rem 1rem !important;
}

.navbar:not(.navbar-mini) .nav-item i.fa-star, .navbar:not(.navbar-mini) div.nav-group i.fa-star {
    text-align: right;
}

div + .navbar-nav {
    border-radius: 0 0 10px 10px;
    padding-bottom: 0.3 rem;
}

div.nav-group {
    border-bottom: var(--bg-color2) solid 1px;
    padding: 1rem .5rem !important;
}
div.nav-group-area:has( > div.nav-group[onclick="menuon(this);"]):not(:has(.navbar-nav .nav-item)) {
    display: none !important;
}
div.nav-group[data-nav-group]::after {
    text-align: right;
    font-family: var(--awesome);
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    content: "\f106";
    transform: rotate(0deg);
    transition: transform 300ms linear;
}
div.nav-group[data-nav-group].slideHidden::after {
    transform: rotate(180deg);
    transition: transform 300ms linear;
}
div.nav-group[data-nav-group]+.navbar-nav {
    height: auto;
    max-height: 200vh;
    transition: max-height 0.5s ease-in;
    overflow: hidden;
}
div.nav-group[data-nav-group].slideHidden+.navbar-nav {
    max-height: 0;
    transition: max-height 0.5s ease-out;
}

.navbar.fixed-left  {position:fixed;top:0;left:0;right:0; z-index:1030;}

:not(input, #layout-popup, [data-layout-form], [data-layout-list])[onclick], select, input[type=checkbox], input[type=radio] {
    cursor:pointer;
}
:disabled, [onclick]:disabled {
    cursor: not-allowed !important;
}

textarea:focus, button:focus, input:focus {
    outline: 0 !important;
}

header {
    display: inline-block;
    color: #fff;
    line-height: inherit !important;
}

main {
    display: inline-block;
    width: 100%;
}

:not(#layout-popup) .title button.fa-times-circle {
    display: none;
}

@media screen and (max-width: 767.98px) {
    .tab-content > div > div:not(:first-child) {
        display: none;
    }

    .tab-content > div > div:not(:first-child) button.fa-times-circle {
        display: inline-block;
    }

    .tab-content > div > div.active:not(:first-child) {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        padding: 1.5rem;
        background-color: rgba(0, 0, 0, .55);
        justify-content: center;
    }
}

.tab-content > div.active {
    display: flex !important;
    flex-direction: column;
}
[form-area], [form-area] > form {
    height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

[form-item-area] {
    overflow-y: auto;
    flex: 1 1 auto;
    background-color: var(--bg-color);
}
[form-item-area] > div {
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0.5rem;
}
[layout-type="form"].fill [form-item-area] {
    overflow: visible !important;
    max-height: 100%;
}
[layout-type="form"].fill [form-item-area] > div {
    overflow-y: visible;
    flex-wrap: nowrap;
    height: 100%;
}
[search-btn-area] > .btn {
    min-width: 30px;
}
.tab-pane .title,
.tab-pane .title .fas::before,
.tab-pane .title .btn,
#layout-popup .content .title .fas::before {
    color: white;
}
.tab-pane .title > .btn[class*="btn-"],
.tab-pane .title .input-group-append >.btn[class*="btn-"] {
    margin-right: .25rem;
}
.tab-pane .title > .title-name,
#layout-popup .content .title > .title-name {
    display: flex;
    text-align: left;
    vertical-align: middle;
    flex: 1 1 auto;
    align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
}
.tab-pane .title > .title-name:empty::before,
#layout-popup .content .title > .title-name:empty::before {
    content: ' ';
    padding: 0.25rem;
}

.tab-pane .title, #layout-popup .content .title {
    display: inline-flex;
    align-items: center;
    width: 100%;
    background-color: var(--title-color);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
}

.tab-pane .title.primary, #layout-popup .content .title.primary {
    background-color: var(--primary-color);
    font-size: 1.3rem;
    min-height: 2.5rem;
}

footer {
    display: none;
}

.tab-content > div.guide:first-child {
    display: none;
}
.tab-content > div.guide:last-child {
    display: block;
}
main {
    height: 100%;
    width: 100%;
}
@media screen and (min-width:767.98px){
    main, .tab-content, .tab-content .tab-pane {
        height: 100%;
        width: 100%;
    }

    .tab-content > div.active {
        flex-direction: row;
    }

    [size-bar] {
        z-index: 1;
        min-width: 11px;
        margin: 0;
        background: padding-box var(--border-color);
        border-left: 5px solid rgba(255, 255, 255, 0);
        border-right: 5px solid rgba(255, 255, 255, 0);
        cursor: col-resize;
        position: relative;
    }
    [size-bar]:hover {
        border-left: 5px solid rgba(243, 243, 243, 0.5);
        border-right: 5px solid rgba(243, 243, 243, 0.5);
    }
    [size-bar].h, [direction=column] > [size-bar] {
        z-index: 1;
        width: 100%;
        min-height: 11px;
        margin: 0;
        border-left: none;
        border-right: none;
        border-top: 5px solid rgba(255, 255, 255, 0);
        border-bottom: 5px solid rgba(255, 255, 255, 0);
        cursor: row-resize;
    }
    [size-bar].h:hover, [direction=column] > [size-bar]:hover {
        border-left: none;
        border-right: none;
        border-top: 5px solid rgba(243, 243, 243, 0.5);
        border-bottom: 5px solid rgba(243, 243, 243, 0.5);
    }

    .hide-form div > [size-bar] {
        cursor: default;
    }
    .hide-form div > [size-bar] {
        border-left: 5px solid rgba(255, 255, 255, 0);
        border-right: 5px solid rgba(255, 255, 255, 0);
    }

    [size-bar] > i {
        position: absolute;
        left: -11px;
        top: 10rem;
        color: rgb(220, 220, 220);
        background-color: var(--bg-color);
        border-radius: 50%;
        transform: rotate(0deg);
        height: 22px;
        width: 22px;
        cursor: pointer;
    }

    [size-bar] > i::before {
        font-family: var(--awesome) !important;
        -webkit-font-smoothing: antialiased;
        display: var(--fa-display,inline-block);
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        content: "\f138";
        font-size: 22px;
        margin-top: -5px;
    }
    
    .tab-content > [size-bar].fullsize > i {
        transform: rotate(180deg);
    }

    [layout-view] {
        padding-left: 0;
        padding-right: 0;
    }
    [layout-type=list]:not([class|=view-size]),
    [layout-type=form]:not([class|=view-size]) {
        flex: 1 1 auto;
    }
    [layout-type=form] {
        min-height: fit-content;
        display: flex;
        flex-direction: column;
    }
    .size-bar+[layout-view] {
        flex: 1 1 auto;
        width: 100px;
    }
    [layout-view]:not([class|=view-size]):first-child {
        width: 520px;
        min-width: 50%;
    }
    [direction=column] > [layout-type="search"] {
        width: 100% !important;
        min-width: 100% !important;
        height: 0;
    }
    [direction=column] > [layout-view]:not([layout-type="search"]) {
        width: 100% !important;
        min-width: 100% !important;
    }
    [direction=column] > [layout-view]:not([layout-type="search"]):not([class*=view-size-]) {
        max-height: 100%;
    }
    [direction=column] > [layout-view]:not([layout-type=list]):not(.flex-fill):not([class*=view-size-]) {
        height: fit-content;
        flex: 0 0 auto;
    }
    [direction=column] > [layout-type] {
        margin-left: 0;
    }
    :not([direction=column]) > [layout-type]+[layout-type] {
        margin-left: 0.25rem;
    }
    [direction=column] > [layout-view]+[layout-view] {
        margin-top: 0.25rem;
    }

    [layout-view]:only-child {
        min-width: 100%;
    }

    footer {
        position: fixed;
        display: inline-block;
        background-color: var(--menu-text-color);
        color: white;
        height: 16px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
    }
}
[layout-type=area], [layout-type=section],
.view-size-fit,
.view-size-fill {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

[direction=row] > [layout-view].view-size-fit {
    max-width: fit-content !important;
    width: fit-content !important;
}
[direction=column] > [layout-view].view-size-fit {
    max-height: fit-content !important;
    height: fit-content !important;
}

[direction=column] > [layout-view].flex-fill,
[direction=column] > [layout-view].view-size-fill {
    max-height: 100%;
    height: 100px;
}

header a { text-decoration:none !important }

header .brand {
    color: #fff;
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    white-space: nowrap;
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
@media print {
#layout-popup {
    display: flex;
    position: relative !important;
    left: 0;
    right: 0;
    top: 0;
    height: fit-content !important;
}

#layout-popup .content {
    min-width: 100vw;
    max-width: 100vw;
    height: fit-content !important;
}

#layout-popup .content [data-layout-list] {
    min-width: 100vw;
}

.list-scroll {
    overflow: visible;
}
}

#layout-popup .content [data-layout-list] [list] {
    min-width: 100%;
}

[data-layout-list] > div {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
}

@media screen {
    .only-print {
        display: none;
    }

    #layout-popup, #layout-login {
        display: flex;
        justify-content: center;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .55);
        z-index: 2031;
        align-items: center !important;
        height: 100vh;
    }

    #layout-popup .content::before {
        font-family: var(--awesome);
        font-weight: 900;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        font-size: 1.5rem;    
        background-color: var(--menu-text-color);
        color: #fff;
        content: '\f00d';
        position: absolute;
        top: -30px;
        bottom: 100%;
        right: 0;
        pointer-events: none;
        padding: 0.5rem 0.75rem;
        text-align: right;
    }

    #layout-popup .content {
        position: relative;
        min-width: 50%;
        max-width: 100vw;
        min-height: 10vh;
        max-height: 90vh;
        background-color: var(--bg-color);
        padding: 0.25rem;
    }

    #layout-login .signin {
        background-color: var(--bg-color);
        margin: 20pt 0;
        padding: 1rem;
        border-radius: 1.5rem;
    }

}

@media screen and (max-width: 767.98px),
screen\9 {
    :root {
        --isMobile: 1;
    }
    html,body {
        width: 100vw;
        height: 100vh;
    }
    body {
        padding-top: 0;
    }

    [data-info-list-view] {
        display: none;
    }
    nav.fixed-top {
        display: none;
    }
    .tab-content > div.guide{
        display: none;
    }

    .tab-content > div > div:first-child {
        padding-top: 40px;
        height: calc(100vh - constant(safe-area-inset-top) - constant(safe-area-inset-bottom) - 50px);
        height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 50px);
        height: calc(100vh - 15px);
    }

    .tab-content > div > [size-bar] {
        display: none;
    }

    .navbar.fixed-left .hold-pin {
        display: none !important;
    }
    #layout-popup .content {
        max-width: 95vw !important;
        max-height: 98vh ​!important;
    }
    .tab-content > div > div.active:not(:first-child) {
        padding: 0.5rem;
    }
    header .brand {
        display: none !important;
    }

    .nav-link:not(.active) > span {
        display: none !important;
    }

    .nav-link:first-child {
        display: none !important;
    }
}

header .btn,header .link {
    color: #fff !important;
}

header .form-control {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
}

header .form-control::placeholder {
    color: rgba(255, 255, 255, .5);
}

header .form-control:focus {
    color: var(--font-color);
    background-color: rgba(255, 255, 255, .8);
    border-color: rgba(255, 255, 255, .1);
}

header .form-control:focus::placeholder {
    color: rgba(0, 0, 0, .5);
}

tr[id|=item] {cursor: pointer;}

.img-profile {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    object-fit: cover;
    object-position: center center;
}

span[class^="post-lineup-"], span[class*=" post-lineup-"] {
    font-size: 0.7em;
    font-weight: bold;
    color: var(--font-color);
    background-color: #f0f0f0;
    padding: .3em .6em;
    border-radius: .25em;
}

span.post-lineup-inkiupcorona {
    color: #1fb6ff;
    background-color: #f2fbff;
}

span.post-lineup-inkiupfree {
    color: #ff411f;
    background-color: #fff4f2;
}

span.post-lineup-inkiuphumor {
    color: #9a1fff;
    background-color: #f9f2ff;
}

span.post-lineup-inkiuplife {
    color: #ff1fc7;
    background-color: #fff2fd;
}

span.post-lineup-inkiuppolitics {
    color: #3ad11c;
    background-color: #e9f1e9;
}

span.post-lineup-inkiupfactcheck {
    color: #1f2eff;
    background-color: #f2f3ff;
}

.write-area {
    position: fixed;
    width: 45em;
    height: 100%;
    top: 0;
    right: 0;
    background-color: #ffffff;
    z-index: 100;
    overflow-y: scroll;
}

.write-full-area {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
}

.font-size-10 {
    font-size: 10px;
}

.main-font-size{
    font-size: 1rem;
}

.menu-sub{
    font-size: 1rem;
    padding: 0px;;
}

.area-size-7 {
    width: 7em;
}

.tabmenu {
    margin-bottom: 2pt;
    border-bottom: 1px solid #b4b4b4;
}
.tabmenu > .item {
    padding:5px 10pt 5pt 10pt;
    border-right: 1px solid #b4b4b4;
    border-top: 1px solid #b4b4b4;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
    color: #696969;
    font-weight: 100;
    font-size: 1rem;
    background-color: #b4b4b4;
}
.tabmenu > .active {
    background-color:#555;
    color: #fff;
}

[list-area] input.form-control {
    width: 100% !important;
}

[list-item] > div[onclick] {
    color: blue;
    text-decoration: underline;
}

.copyright {
    width: 100%;
    font-size: 0.8rem;
}

[list-area]:not(.readonly) [list-item].new:last-child > div:last-child button.btn-danger,
[list-area]:not(.readonly) [list-item].new:last-child > div.order * {
    visibility: hidden;
}

.w-input-text {
    width: var(--input-group-prepend-width) !important;
}

.list-table {
    width: 100%;
    display: block !important;
    white-space: nowrap;
}

.input-content {
    padding: 7px 20px 6px 20px;
    border-bottom: solid 1px;
    width: 70%;
}
.form-control > .dropdown-menu > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.form-control > .dropdown-menu li.subtitle {
    font-weight: bolder;
    border-bottom: solid;
}
.form-control > .dropdown-menu [role=presentation].active {
    background-color: #e9e9e9;
}

@media (max-width:767px) {
    .photo-gallery h2 {
        margin-bottom:25px;
        padding-top:25px;
        font-size: 1rem;
    }
    .tab-content > div.guide:first-child {
        display: none;
    }
    .tab-content > div.guide:last-child {
        display: none;
    }
}

.form-optimization:has(input[name="_id"][value=""]) .title .form-top-button-area button.btn-delete,  
.form-optimization.readonly .title .form-top-button-area,
.form-optimization[readonly] .title .form-top-button-area {
    display: none !important;
}

.displayNone {
    display: none;
}
[list-area].table-text-center [list-item] > [fixed-area] > div, 
[list-area].table-text-center [list-item] > div {
    text-align: center !important;
    vertical-align: middle !important;
}
[list-item] [group-area] > div.group [data-name]:has( > [style*="--row-compare"]),
[list-area] [list-item] [data-name]:has( > [style*="--row-compare"]) {
    position: relative !important;
    overflow: visible !important;
}
[list-area] [list-item] [data-name]:has(.btn) {
    text-align: center;
}
[list-area] [list-item] [data-name] > [style*="--row-compare"] {
    position: absolute !important;
    bottom: -1px;
    right: 0;
    left: 0;
    background-color: var(--bg-color);
    line-height: calc(var(--row-compare) * 1px) !important;
    height: calc(var(--row-compare) * 1px) !important;
    border-bottom: 1px solid var(--border-color);
    pointer-events: none;
    padding: 0.15rem 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
}
[list] {
    display: table;
    height: 1px;
}
[list] [list-head] {
    display: table-header-group;
}
[list-area] {
    transform: translateY(0);
}
[layout-type="form"]:not(.fill) [list-area] {
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 0.3s, transform 0.3s;
}
[layout-type="form"]:not(.fill) [list-area].visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

[list] [list-area] {
    display: table-row-group;
}
.list-optimization {
    position: relative !important;
}
.list-optimization [list] > div {
    position: sticky !important;
    top: 0 !important;
    max-height: var(--list-optimization-height);
    overflow: visible;
    display: table;
}
.list-optimization [list-head] {
    position: relative !important;
}
[list],
[list] > div:not([list-input-area]),
[list-head],
[list-area],
[list-item] {
    min-width: 100%;
}
[layout-type="list"] [save-btn][style*="--btn-name"]::after,
[delete-btn][style*="--btn-name"]::after {
    line-height: 1.2;
    margin-left: 0.25rem;
    content: var(--btn-name, '');
}

.list-optimization [list-area] [list-item]:is([list-item=""]),
[list-tiem] [row-hidden],
[list-item] > div[data-won-type="hidden"],
[list-item] > div[data-type="hidden"],
[list-item] > div[type="hidden"] {
    display: none !important;
}
/*
[list-item] [data-won-type="checkbox"] > .form-check,
[list-item] [data-won-type="checkbox"] input[type="checkbox"] {
    display: none !important;
}
[list-item] [data-won-type="checkbox"]:has(input[type="checkbox"])::before {
    display: inline-flex;
    content: ' ';
    border: 1px solid var(--border-color);
    background-color: #fff;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
}
[list-item] [data-won-type="checkbox"]:has(input[type="checkbox"]:checked)::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
*/
.list-table {
    border-bottom: 1px solid var(--border-color) !important;
}
body:not([production]) .form-optimization,
body:not([production]) .list-optimization {
    border-bottom: 2px solid #a30000 !important;
}

[list-item-margin],
[list] [list-item] {
    display: table-row;
}

[list] [list-item="TEMP"] {
    display: table-row !important;
}

[layout-type="list"] [list-area]:has([list-item*=""]) {
    
}

[list] [list-area] div[data-name].select-list-item {
    background-color: rgb(211, 238, 255) !important;
}
[list] [list-item] > div,
[list] [list-item] > [fixed-area] > div {
    display: table-cell;
    height: 100%;
    padding: 0.15rem 0.25rem;
}

[list] [list-item] [data-name]:empty:not([data-won-type="checkbox"]):not([data-won-type="radio"]) {
    min-height: calc(var(--list-item-height) * 1px - 1px);
}
[list] [list-item] > [fixed-area] > div {
    height: calc(var(--list-item-height) * 1px - 1px);
}
[list] [list-item] [data-won-type="button"] > .btn {
    padding: 0 0.25rem;
}
[list] [list-item] > [fixed-area] > [group-area],
[list] [list-item] > [group-area] {
    width: 0;
    padding: 0 !important;
}
[list] [list-item] [group-area] > div.group:not(:has([data-name])),
[list] [list-item] [group-area] > div.group div[data-name] {
    padding: 0;
    align-items: center;
    justify-content: center;
}
[list] [list-item] [group-area] > div.group div[data-name] {
    flex: 1 1 auto;
}
[list] [list-item] [group-area] > div.group {
    min-width: 100%;
    display: flex;
    border-right: none !important;
    align-items: stretch;
}

[list] [list-item] [group-area]:has(> div.group:empty) > div.group:has([data-name]) {
    min-height: 100%;
}
[list] [list-item] [group-area] > div.group:not(:last-child) {
    border-bottom: 1px solid var(--border-color) !important;
}
[list] [list-item] [group-area] > div.group:empty {
    padding: 0;
    display: none;
}
[list] [data-name="index"] {
    width: 10px;
}
[list] [list-head] [list-item] > div,
[list] [list-head] [list-item] > [fixed-area] > div {
    text-align: center;
    border-top: none !important;
    border-bottom: none !important;
}
[list-item] > [fixed-area] {
    background-color: var(--bg-color);
}
[list-item]:nth-of-type(even) {
    background-color: rgba(0,0,0,.05);
}
[list-item] [fixed-area] > [data-name]:hover,
[list-item] > [data-name]:hover {
    overflow: visible !important;
    position: absolute;
}
[list-item] [fixed-area] > [data-name]:not([data-won-type="select"]):hover span,
[list-item] > [data-name]:not([data-won-type="select"]):hover span {
    background-color: var(--bg-color);
}
[list-item] [fixed-area] > [data-name]:hover,
[list-item] > [data-name]:hover,
[list-item]:hover {
    color: var(--font-color);
    background-color: rgba(0,0,0,.075);
}
[list-item] > [fixed-area]:empty {
    display: none !important;
}
[list-item] > [fixed-area]:not(:empty) {
    border-right: 3px solid var(--border-color) !important; 
}
[list-area] [list-item] [data-name="index"],
[list-item]:nth-of-type(even) > [fixed-area] {
    background-color: var(--bg-color2);
}
[list-item]:hover > [fixed-area] {
    color: var(--font-color);
    background-color: var(--bg-color2);
}
[list-item].on,
[list-item].on > [fixed-area] {
    background-color: #fff3de !important;
}

[list] [list-item] > [fixed-area] > div:not(:last-child),
[list] [list-item] > [fixed-area] > [group-area] div[data-name]:not(:last-child),
[list] [list-item] > [group-area] div[data-name]:not(:last-child),
[list] [list-item] > div [group-area]:not(:last-child),
[list] [list-item] > div {
    border-right: 1px solid var(--border-color);
}
/*
[list] [list-item]:last-child [data-name], 
[list] [list-item]:has(+ [list-item=""]) [data-name] {
    border-bottom: 1px solid var(--border-color);
}
*/
[list-item] > [fixed-area] > div,
[list-item] > div {
    vertical-align: middle;
}
[list-item] [fixed-area],
[lsit-item] [group-area] {
    vertical-align: top;
}
[list-item],
[list-item] [data-name] {
    position: relative;
}
.list-optimization [list-item] {
    height: calc(var(--list-item-height) * 1px) !important;
    max-height: calc(var(--list-item-height) * 1px) !important;
}
[list-area] [list-item]:not(:has([row-compare])) {
    overflow: hidden !important;
}

[data-name][contenteditable] {
    overflow: scroll !important;
    text-align: left;
}
[list-input-area]:not(:focus-within) {
    width: 0 !important;
    height: 0 !important;
    left: 0 !important;
    top: 0 !important;
}
[list-input-area] {
    position: fixed !important;
    z-index: 100;
}
[list-input] {
    width: 100%;
    height: 100%;
    outline: 0;
    padding: 0 0.25rem;
    background-color: #fff;
    box-shadow: inset 0 0 0 0.2rem rgba(0,123,255,.25);
    overflow: scroll;
    word-break: manual;
}
[list-input][type="textarea"]:focus {
    height: 6rem !important;
    word-break: break-all;
    overflow-x: hidden;
    white-space: normal;
}
[list-input]:focus::before {
    position: absolute;
    left: 0;
    top: -12px;
    content: var(--list-item-tag);
    background-color: var(--primary-color2);
    color: #fff;
}
[list-item] > [fixed-area] > div[data-name].select-list-item-first,
[list-item] > div[data-name].select-list-item-first,
[list-item] [data-name]:has(textarea:focus),
[list-item] [data-name][contenteditable]:focus,
[list-item] [data-name]:has(input:focus:not([type=checkbox]):not([type=radio]):not([type=hidden])) {
    outline: 0;
    box-shadow: inset 0 0 0 0.2rem rgba(0,123,255,.25);
}
[list-item] [data-name].is-invalid {
    box-shadow: inset 0 0 0 1px #e4606d;
}
[list-item] [data-name] textarea,
[list-item] [data-name]:not([data-won-type="select"]) input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
    display: none;
}
[list] [list-item]:has([data-name="use"]) [data-name="item-delete-button"],
[list]:has([list-area].disable) [list-item] [data-name="item-delete-button"],
[list]:has([list-area].readonly) [list-item] [data-name="item-delete-button"] {
    display: none !important;
}

[list-area] [list-item] div[data-name][data-won-type="textarea"] {
    overflow: hidden !important;
    /*white-space: pre-wrap !important;*/
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 10rem;
    max-width: 10rem;
}

.valign{
    vertical-align: middle;
}
.input-group {
    padding: 0 2px 0 2px;
}
.input-group:not([class*=col-]) {
    width: fit-content;
}
.input-group:not(:has( > *:not(script):not(style))) {
    display: none !important;
}
select {
    min-width: fit-content;
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .55rem center/8px 10px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select:not(.search-option) option[value=""] {
    display: none;
}
.table,
.table-hover tbody tr:hover {
    color: var(--font-color);
}

[list] {
    border-spacing: 0;
    border-collapse: separate;
}
[list] [list-head] > [list-item] > div {
    background-color: var(--bg-color2);
    color: var(--menu-text-color);
}

[list] [list-item].thead > div {
    border-bottom: 2px solid var(--border-color);
    background-color: var(--bg-color2) !important;
    color: var(--menu-text-color) !important;
    font-weight: bold;
}

[list-item] > [fixed-area] {
    position: -webkit-sticky !important; 
    position: sticky !important; 
    left: 0 !important;
    width: 0 !important;
    min-width: fit-content !important;
    z-index: 2;
    padding: 0 !important;
    margin: 0 !important;
}
.list-col-visible-control {
    --col-visible-control: 0;
    position: absolute;
    left: 0;
    top: 100%;
    box-shadow: 5px 0 15px rgba(0, 0, 0, .25);
    background-color: var(--bg-color2);
    list-style-type : none;
    padding: 0.5rem;
    color: var(--menu-text-color);
    border-radius: 0.25rem;
    display: none;
    z-index: 100;
    overflow-y: scroll;
    max-height: calc(100vh - var(--col-visible-control) - 2.75rem);
}
button:focus+.list-col-visible-control,
.list-col-visible-control:hover {
    display:block;
}

.list-col-visible-control li {
    display: inline-flex;
    text-align: left !important;
    white-space : nowrap;
    padding: 0;
    padding-bottom: 0.25rem;
}

.list-scroll {
    overflow: auto;
}

.list-scroll [list-head],
.list-scroll [list-item].thead {
    position: sticky;
    top: 0;
    border-bottom: 2px solid var(--border-color);
    z-index: 19;
}

.dev-db {
    background-color: #BBFF !important;
}
.input-group label.error {
    position: absolute;
    color: #ffffff;
    background-color:#dc3545;
    left: 0.25rem;
    right: 0.25rem;
    bottom: -15px;
    border-radius: 0 0 5px 5px;
    z-index: 1;
}
.input-group .input-group-prepend+input+label.error {
    left: calc(var(--input-group-prepend-width) + 0.25rem);
}
.input-group-text {
    background-color: var(--bg-color2);
}
body.font-size-2 .input-group label.error {
    bottom: -18px;
}

body.font-size-3 .input-group label.error {
    bottom: -30px;
}
/*
.input-group:has(> .error:visited) {
}
*/
[list-item] [data-name="index"] {
    min-width: 35px;
}
[list-item] > [fixed-area] > div:not(.no-resize):not([group-area]),
[list-item] [group-area] > div.group div[data-name]:not(.no-resize):not(.group),
[list-item] > div:not(.no-resize):not([group-area]):not([fixed-area]):not(.group) {
    position: relative;
}
[list-item] > [fixed-area] > div:not(.no-resize):not([group-area]),
[list-item] [group-area] > div.group div[data-name]:not(.no-resize),
[list-item] > div:not(.no-resize):not([group-area]):not([fixed-area]):not(.group) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[list-item] [data-won-type="select"] {
    padding-right: 20px !important;
}
[list-item] > [fixed-area] > div:not(.no-resize):not([group-area])::after,
[list-item] [group-area] > div.group div[data-name]:not(.no-resize):not(.group)::after,
[list-item] > div:not(.no-resize):not([group-area]):not([fixed-area]):not(.group):not([data-won-type="select"])::after,
[list-item] > div[data-won-type="select"]:not(.no-resize):not([group-area]):not([fixed-area]):not(.group)::before {
    content: ' ';
    cursor: col-resize;
    min-width: 5px;
    width: 5px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

[list-item] div[data-name] {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none;
}

.hidden, [list-item] > div[type=hidden] {
    display: none !important;
}

input::-ms-clear,
input::-ms-reveal{
	display:none;width:0;height:0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	display:none;
}
.nav-tabs > a.move {
    transform: translateX( var(--mouse-pos-x));
}
.nav-tabs {
    overflow-x: auto;
    flex-grow: 1;
    padding: 0 0.75rem;
    height: var(--top-padding-size);
}

.nav-tabs > a {
    padding: 0.5rem;
    color: var(--menu-text-color);
    background-color: var(--bg-color);
}

@media (min-width:768px){
    .nav-tabs > a {
        padding: 0.7rem 1rem 0;
    }
}

.nav-tabs > a > .fa-window-close {
    display: none;
}

.nav-tabs > a > i {
    display: inline-block;
    margin-right: 0.3rem;
}

.nav-tabs > a.active {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    font-weight: bold;
}
.nav-tabs > a:hover {
    color: rgb(129, 129, 129);
}
.nav-tabs > a.active > i, .nav-tabs > a:hover > i {
    display: none;
}

.nav-tabs > a.active > .fa-window-close, .nav-tabs > a:hover > .fa-window-close {
    display: inline-block;
    visibility: hidden;
    animation: 0.5s fadeInDely;
    animation-fill-mode: forwards;
}

@keyframes fadeInDely {
    99% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}

.wavebox {
    width: 100%;
    min-height: 150px;
    background: lighten(#003057, 90%);
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    text-shadow: 3px 0px 3px rgba(0,0,0, 0.5);
}

.wavebox > .wave {
opacity: .9;
position: absolute;
top: 10%;
left: 50%;
background: #005092;
width: 150%;
height: 230%;
margin-left: -80%;
margin-top: -100%;
transform-origin: 50% 48%;
border-radius: 43%;
animation: drift 50000ms infinite linear;
}

@media screen and (max-width: 767.98px),
screen\9 {
    .wavebox > .wave {
        top: 0%;
        width: 130% !important;
        height: 380% !important;
        margin-left: -70% !important;
        margin-top: -103% !important;
    }
}

.wavebox > .wave.-three {
animation: drift 70000ms infinite linear;
}

.wavebox > .wave.-two {
animation: drift 150000ms infinite linear;
opacity: .2;
background: #005092;
}

.wavebox:after {
content: '';
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
z-index: 11;
transform: translate3d(0, 0, 0);
}
.user-info {
    position: relative;
}
.user-info > .desc {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
transform: translate3d(0, 0, 0);
color: white;
text-shadow: 0 1px 5px rgb(0, 0, 0);
text-indent: .3em;
}
@keyframes drift {
from { transform: rotate(0deg); }
from { transform: rotate(360deg); }
}

.paginate-counter {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -15px;
    font-size: 30px;
    font-family: sans-serif;
    text-shadow: 0px 2px 0px rgba( 0, 0, 0, 0.2 );
    color: #fff;
}

@media (max-width:767px) {
    table{
        table-layout: unset;
    }
}

.form-control-text, .input-group-files, div.form-datepicker-from-to {
    display: flex;
    flex: 1 1 0%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--font-color);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.input-group-files ul {
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

.input-group-files ul li {
    display: list-item;
}

.form-datepicker-from-to .form-datepicker {
    flex: 1 1 0% ;
    border:none !important;
    border-right:0px;
    border-top:0px;
    border-left:0px;
    border-bottom:0px;
}

input[type=text].form-datepicker {
    text-align: center !important;
}

.form-datepicker-from-to input[type=text].form-datepicker {
    width: 1rem;
}

input::placeholder {
    color:#c2c2c2 !important;
}

.btn-group.flex-wrap>.btn {
    margin-bottom: 0.2rem;
    flex: 0 1 auto !important;
}

.loader {
    --loader-size: 0.9rem;
    --thickness: 0.2rem;
    --base-color: #fff;
    --wheel-color: rgb(255, 0, 0);
    display: inline-block;
    height: var(--loader-size);
    width: var(--loader-size);
    border-left: var(--thickness) solid var(--base-color);
    border-bottom: var(--thickness) solid var(--base-color);
    border-top: var(--thickness) solid var(--wheel-color);
    border-right: var(--thickness) solid var(--wheel-color);
    border-radius: 100%;
    animation: spin 800ms infinite linear;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

hr {
    margin-top: 0.3rem;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    margin-bottom: 0.6rem;
}

[data-info-list-view] {
    background-color: var(--bg-color-a)
}

*.fas::before, *.far::before, *.fal::before, *.fad::before {
    font-size: 1.2rem;
    padding-right: 0.25rem;
}

*.fas:empty::before, *.far:empty::before, *.fal:empty::before, *.fad:empty::before {
    padding-right: 0;
}

.fa-file-excel::before {
    color:#00D037;
}
.fa-file-image::before {
    color:#0081FF;
}
[layout-type="form"] [list-area].disable [list-item].new,
[layout-type="form"] [list-area].readonly [list-item].new {
    display: none !important;
}

[list-item] > div.multiline {
    white-space: normal;
    word-break: break-all;
}

[list-item] > div.fit-content {
    min-width: fit-content !important;
    max-width: fit-content !important;
}

@media screen {
[list-item] > div.td-w-1 {
    min-width: 1.5rem;
    max-width: 1.5rem;
}

[list-item] > div.td-w-2 {
    min-width: 2.5rem;
    max-width: 2.5rem;
}

[list-item] > div.td-w-3 {
    min-width: 3.5rem;
    max-width: 3.5rem;
}

[list-item] > div.td-w-4 {
    min-width: 4.5rem;
    max-width: 4.5rem;
}

[list-item] > div.td-w-5 {
    min-width: 5.5rem;
    max-width: 5.5rem;
}

[list-item] > div.td-w-6 {
    min-width: 6.5rem;
    max-width: 6.5rem;
}

[list-item] > div.td-w-12 {
    min-width: 12.5rem;
    max-width: 12.5rem;
}
[data-layout-list] [list-area] [list-item] > div .form-check-label::before {
    margin-top: -14px;
}
[data-layout-list] [list-area] [list-item] > div .form-check-label::after {
    margin-top: -9px;
}
[data-layout-list] [list-head] [list-item] > div .form-check-label::before {
    margin-top: -12px;
}
[data-layout-list] [list-head] [list-item] > div .form-check-label::after {
    margin-top: -7px;
}
}

[data-layout-list]:has([list-area] [list-item]:not([list-item=""])) [data-no-result-list] {
    display: none !important;
}

[list-item] > div.excel-only {
    display: none !important;
}

.navbar-light .navbar-toggler {
    color: var(--menu-text-color) !important;
    border-color: rgba(0,0,0,.1);
}

.navbar-toggler {
    border: none;
    background: transparent !important;
}

.navbar-toggler:focus {
    outline: none;
    background: transparent !important;
}

.navbar-toggler .icon-bar {
    background-color: var(--menu-text-color);
    transform: rotate(0deg) translate(0px, 0px);
    transition: ease all .2s;
}

.navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

.navbar-toggler .icon-bar+.icon-bar {
    margin-top: 4px;
}

.icon-bar:nth-child(2) {
    width: 16px;
    transition: ease all .2s;
}

.navbar-toggler:hover>.icon-bar:nth-child(2) {
    width: 22px;
    transition: ease all .2s;
}

.navbar-toggler:active>.icon-bar:nth-child(2) {
    width: 22px;
    transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 4px);
    transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
    opacity: 0;
    transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
    transition: ease all .2s;
}

.sub-title {
    width: 100% !important;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 0 0.5rem;
    border-left: 5px solid var(--primary-color);
    color: var(--primary-color);
    margin: 1rem 0;
}

@media screen {
    [list-item].on > div.fold-ellipsis {
        text-overflow: unset;
        overflow: auto;
        white-space: normal;
        word-break: break-all;
    }

    [list-item].on > div.fold-ellipsis br {
        display: inline-block;
    }

    [list-item] > div.fold-ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    [list-item] > div.fold-ellipsis br {
        display: none;
    }
}

input.form-datepicker {
    min-width: 80px !important;
}

.form-datepicker-from-to {
    max-width: 230px !important;
    min-width: fit-content !important;
}

.navbar .nav-item.active, .navbar .nav-group.active {
    color: var(--primary-color2);
    font-weight: bold !important;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
}

[data-tooltip] {
    position: relative;
    display: inline-block;
}

[data-tooltip] > span.text {
    --tooltip-width: 0;
    pointer-events: none;
    visibility: hidden;
    width: fit-content;
    max-width: 150px;
    height: fit-content !important;
    background-color: rgba(0, 0, 0, .75);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    position: absolute;
    padding: 5px;
    white-space: nowrap;
}
[data-tooltip]:hover {
    z-index: 30 !important;
}
[data-tooltip]:hover > span.text {
    visibility: visible;
}

[data-tooltip] > span.text::after {
    content: " ";
    position: absolute;
    border-style: solid;
    border-width: 5px;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: rgba(0, 0, 0, .75) transparent transparent transparent;
}

[data-tooltip] > span.text:not(.l):not(.r) {
    left: calc(50% - (var(--tooltip-width) / 2 ) );
}
[data-tooltip] > span.text:not(.d) {
    bottom: 150%;
}
[data-tooltip] > span.text.d {
    top: 150%;
}
[data-tooltip] > span.text.d::after {
    top: -9px !important;
    border-color: transparent transparent rgba(0, 0, 0, .75) transparent !important;
}
[data-tooltip] > span.text.r {
    right: -5px;
}
[data-tooltip] > span.text.r::after {
    left: 85%;
}
[data-tooltip] > span.text.l {
    left: -5px;
}
[data-tooltip] > span.text.l::after {
    left: 15%;
}
button[data-tooltip].fas::before,
a[data-tooltip].fas::before {
    padding: 0;
}

.form-control-text > img {
    max-width: 100% !important;
}
.form-check-inline {
    margin: 0;
}
.moxie-shim {
    min-width: 100% !important;
    max-width: 100% !important;
}

.btn-outline-secondary, .btn-outline-secondary:disabled {
    border-color: var(--border-color);
}
:not(.btn) > [type="checkbox"] + label,
:not(.btn) > [type="radio"] + label {
    margin-left: 0.2rem;
    margin-bottom: 0;
    white-space: nowrap;
}
div.checkbox:hover::before,
:not(.btn) > [type="checkbox"]:hover,
:not(.btn) > [type="radio"]:hover {
    opacity: 0.6;
}
div.checkbox::before,
:not(.btn) > [type="checkbox"],
:not(.btn) > [type="radio"] {
    position: relative;
    appearance: none;
    float: left;
    width: 1.25em;
    max-width: 1.25em;
    min-width: 1.25em;
    height: 1.25em;
    background-color: var(--bg-color-input);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--border-color);
    margin: 0;
    margin-top: 0.1rem;
}
div.checkbox::before {
    margin-right: 0.2rem;
    content: ' ';
}
div[checked].checkbox::before,
:not(.btn) > [type="checkbox"]:checked,
:not(.btn) > [type="radio"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
:not(.btn) > [type="radio"] {
    border-radius: 1.25rem;
}
:not(.btn) > [type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
div.checkbox::before,
:not(.btn) > [type="checkbox"] {
    border-radius: 0.25rem;
}
div.checkbox::before,
:not(.btn) > [type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

:not(.btn) > [type="checkbox"].switch {
    border-radius: 1.25em;
    width: 2.25em;
    max-width: 2.25em;
    height: 1.25em;
    background-color: rgba(0,0,0,.25);
    border: none;
}
:not(.btn) > [type="checkbox"].switch::before {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: 0.12rem;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    transform: scale(0.8);
    background-color: white;
    transition: left 250ms linear;
}
:not(.btn) > [type="checkbox"].switch:checked::before {
    background-color: white;
    left: 1.15em;
}

:not(.btn) > [type="checkbox"].switch:checked {
    background-color: var(--primary-color);
    background-image: none;
}

[list-item] [data-name][data-won-type="checkbox"] {
    width: 0;
    text-align: center;
}
[list-item] [data-name][data-won-type="checkbox"]:disabled::before,
:not(.btn) > [type="checkbox"]:disabled {
    border-color: lightgray;
    opacity: 0.7;
    cursor: not-allowed;
}

:not(.btn) > [type="checkbox"]:disabled:before {
    background-color: lightgray;
}

.form-check .form-check-single[type="checkbox"] {
    height: 100%;
    min-width: 2.5rem;
    margin-top: 0;
}
.input-group:has(.form-check+.input-group-append) .form-check-single[type="checkbox"] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group:has(.input-group-prepend+.form-check) .form-check-single[type="checkbox"] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

[list-item] [data-name] .form-check .form-check-single[type="checkbox"] {
    width: 1.25em;
    max-width: 1.25em;
    min-width: 1.25em;
    height: 1.25em;
}

.btn > [type="checkbox"],
.btn > [type="radio"] {
    display: none !important;
}

.btn-inline-confirm {
    position: relative;
}
.btn[disabled] {
    cursor: not-allowed !important;
    opacity: .65;
}
.btn-checkbox.checked,
.btn-inline-confirm.checked {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-inline-confirm .confirm { 
    position: absolute;
    z-index: 11;
    background-color: rgba(0, 0, 0, .75);
    width: 15rem;
    padding: 1.5rem;
    margin-top: 100%;
    position: absolute;
    text-align: left;
    display: none;
}
.btn-inline-confirm .confirm > span {
    width: 100%;
    word-break: break-all;
    word-wrap: break-word;
}
.btn-inline-confirm .confirm:not(.left) {
    right: 0;
}
.btn-inline-confirm .confirm:not(.left):before {
    right: 10px;
}
.btn-inline-confirm .confirm:before {
    content: " ";
    position: absolute;
    border-style: solid;
    border-width: 5px;
    top: -10px;
    margin-left: -5px;
    border-color: transparent transparent rgba(0, 0, 0, .75) transparent;
}
.btn-inline-confirm.checked > span.text {
    display: none !important;
}
.btn-inline-confirm.checked .confirm {
    display: inline-block !important;
}
.btn-inline-confirm .confirm.left {
    left: -5%;
}
.nav-tabs .nav-item > i,.nav-tabs .nav-item > span {
    padding-bottom: 0.7rem;
}
.nav-tabs .nav-item ul.subtab-area {
    margin: 0;
    padding: 0;
    display: none;
}
.nav-tabs .nav-item.active ul.subtab-area {
    display: -ms-flexbox!important;
    display: flex!important;
}
.nav-tabs .nav-item ul.subtab-area li {
    list-style: none;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    background-color: rgba( 0, 0, 0, 0.2 );
    padding: 0.25rem 0.5rem;
    color: rgba( 255,255, 255, 0.6 )
    margin 1px 0;
}
.nav-tabs .nav-item ul.subtab-area li:first-child {
    margin-left: 0.7rem;
}
.nav-tabs .nav-item ul.subtab-area li:hover {
    color: #fff;
}
.nav-tabs .nav-item ul.subtab-area li.active {
    background-color: #fff;
    color: var(--primary-color);
}

.layout-alert-list {
    border-left: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    display : flex;
    align-items : center;
    padding: 1rem;
    display: none;
}
.layout-alert-list > i::before {
    font-family: var(--awesome);
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    content: '\f0f3';
    font-size: 1.5rem;
    cursor: pointer;
}

.layout-alert-list > i:not(:empty)::before {
    font-weight: 900;
}

.tab-content > .tab-pane > .left-search-area {
    flex: 0 0 300px;
    margin-right: 0.5rem;
}

.tab-content > .tab-pane:has(.wide-search-area) {
    flex-flow: column;
}
.tab-content > .tab-pane:has(.wide-search-area) > .wide-search-area {
    height: fit-content !important;
}

[layout-type] {
    width: 0;
}
[layout-type="area"] {
    padding: 0;
}
.tab-content > .tab-pane > .layout,
#layout-popup .content > .layout {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
}
#layout-popup .content {
    display: -ms-flexbox;
    display: flex;
}
#layout-popup .content:has(>[form-area]) {
    flex-direction: column;
}
#layout-popup .content > [form-area],
#layout-popup .content > [form-area] form {
    height: fit-content;
}
#layout-popup .content > [form-area]
{
    max-height: 90vh;
}
#layout-popup .content:has(#form-userform) {
    max-width: 70vh;
    min-width: 70vh;
}
[layout-type=tab],
[layout-type=area],
[layout-type=section],
[form-type=area],
[form-type=section] {
    display: -ms-flexbox;
    display: flex;
}

[layout-type=tab],
[layout-view]:not([layout-type=tab])[direction=column],
[form-type][direction=column],
[form-tab-items][direction=column] {
    -ms-flex-direction: column;
    flex-direction: column;
}
[form-type][direction=column] > div {
    width: 100%;
}
[layout-view]:not([layout-type=tab])[direction=row],
[form-type][direction=row],
[form-tab-items][direction=row] {
    -ms-flex-direction: row;
    flex-direction: row;
}

[form-type][direction=row]:not(.nowrap) {
    -ms-flex-wrap: wrap!important;
    flex-wrap: wrap!important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
}

[layout-type=section],
[form-type="section"], .section-style {
    position: relative;
    border: none;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    margin-top: 0.75rem !important;
    padding: 1rem 0.5rem 0.5rem 0.5rem !important;
    outline: 1px solid var(--border-color);
    outline-offset: -0.2rem;
}

[layout-type=section] > .section-title,
[form-type="section"] > .section-title {
    position: absolute;
    display: block;
    left: 0.25rem;
    top: -0.7rem;
    margin-right: 0;
    background-color: var(--bg-color);
    border: none;
    padding: 0 0.5rem !important;
    width: fit-content !important;
    font-weight: 900;
    font-size: 1.25rem;
}

.datepicker {
    z-index: 20 !important;
}
[list-area] {
    counter-reset: line-number;
}
[list-area] [list-item] [data-name="index"]:not([style*="display: none"]),
[list-area] [list-item] .index:not([style*="display: none"]) {
    counter-increment: line-number;
}

[list-area] [data-name="index"]:not([style*="display: none"]):before,
[list-area]:not(.readonly) [list-item]:not(:last-child) .index:not([style*="display: none"]):before {
    content: counter(line-number);
}

[list-area] [list-item][class*=list-tree-] >div:eq(0):before {
    font-family: var(--awesome);
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    content: '\f146';
    margin-right: 0.25rem;
}

[list-area] [list-item][class*=list-tree-] {
    background-color: #999999;
}
[list-area] [list-item][class*=list-tree-] [data-name=index] {
    counter-reset: line-number 0;
}
[list-area] [list-item][class*=list-tree-] [data-name=index]::before {
    font-family: var(--awesome);
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    content: '\f146';
    margin-right: 0.25rem;
}

[list-area] [list-item][class*=list-tree-].close [data-name=index] {
    content: '\f0fe';
}

.list-optimization [list-area] [data-name="index"]:not([style*="display: none"]):before {
    content: var(--list-index);
}
.dropdown {
    position: relative !important;
}
.dropdown > .dropdown-menu {
    max-height: 1000%;
    overflow: scroll;
    padding: 0;
    min-width: 90%;
    max-width: 300%;
}
.dropdown > .dropdown-menu table {
    border: none;
}
.dropdown > .dropdown-menu thead {
    position: sticky;
    top: 0;
}
.dropdown > .dropdown-menu thead tr:last-child th {
    background-color: var(--bg-color2);
    border-bottom: 2px solid var(--border-color);
}

.dropdown-menu table th,
.dropdown-menu table td {
    word-break: keep-all;
    border-color: var(--border-color);
}

.dropdown > .dropdown-menu tbody > tr.active {
    color: var(--font-color);
    background-color: rgba(0,0,0,.075);
}

[list-item] > div.row-sticky {
    position: sticky;
    left: 0;
}

.input-group>.form-check:not(:has(.form-check-single)),
.input-group>.input-content,
.input-group>.form-control-text {
    position: relative;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
    margin-bottom: 0;
}

[layout-tab-bar], [layout-tab-content] {
    width: 100%;
    height: fit-content;
    min-height: 0;
}
[layout-tab-content] {
    height: 0;
    min-height: 100px;
    max-height: 100%;
    width: 100%;
    flex: 1 1 auto;
}
[layout-tab-content] > * {
    width: 100% !important;
    min-width: 100%;
    max-height: 100%;
}
[layout-tab-content] > *:not(.active) {
    display: none !important;
}
.form-tab {
    display: flex;
    flex-direction: column;
}

[form-tab] > [form-tab-items] {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
}
[form-tab] > [form-tab-items]:not([direction=column]) {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

[direction=column] > .form-tab[class*="view-size-"],
[direction=column] > .form-tab.flex-fill {
    .form-tabs {
        height: 100px;
        flex: 1 1 auto;
    }
    .form-tabs > [form-tab] {
        height: 100%;
    }
    .form-tabs > [form-tab]:not(:has(.list-scroll)) {
        overflow: auto;
    }
    .form-tabs > [form-tab] [form-tab-items]:has(.list-scroll) {
        height: 100% !important;
        max-height: 100% !important;
    }
}
.form-tab .form-tab-bar, [layout-tab-bar] {
    overflow-x: scroll;
    height: fit-content !important;
    max-height: fit-content !important;
    margin-bottom: 0.25rem;
}
.form-tab .form-tab-bar ul, [layout-tab-bar] ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
}

.form-area, .form-tab {
    padding: 0 !important;
}
.title .btn {
    padding: 0.15rem 0.25rem;
    line-height: 1rem;
}
.title+[search-area] {
    padding: 5px 11px 5px 11px;
}
.title+[search-area],
.title+[form-area] {
    background-color:var(--bg-color);
    box-shadow: 0px 3px 4px rgb(0 0 0 / 20%);
    border-bottom-left-radius: 12px 1em;
    border-bottom-right-radius: 12px 1em;
}

.form-tab .form-tab-bar ul > li, [layout-tab-bar] ul > li {
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    white-space:nowrap;
}

.form-tab .form-tab-bar ul > li.active, [layout-tab-bar] ul > li.active {
    border: 1px solid var(--primary-color);
    color: #fff !important;
    background-color: var(--primary-color) !important;
    font-weight: bold;

}

[form-type="radio"].input-group [data-toggle="buttons"] {
    flex-grow: 1;
}

.input-label {
    padding: 0.375rem 0.75rem;
}

.section-style > .input-group-prepend {
    position: absolute;
    display: block;
    left: 0.25rem;
    top: -0.7rem;
    margin-right: 0;
    border: none;
    background-color: #fff;
    padding: 0 0.5rem !important;
    width: fit-content !important;
    font-weight: 900;
    font-size: 1.25rem;
}
.section-style > .input-group-prepend > .w-input-text {
    width: fit-content !important;
    background-color: #fff;
    border: none;
    padding: 0;
}

[layout-view].fill {
    -ms-flex: 1 1 auto!important;
    flex: 1 1 auto!important;
}

[data-layout-form] form .list-table {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

[data-layout-form] form .list-table.list-scroll {
    max-height: 100%;
    overflow-y: auto;
}

.btn-submit {
    background-color: var(--submit-color);
    border-color: var(--submit-color);
    color: #fff;
}

.btn-submit:hover {
    opacity: 0.8;
    color: #fff;
}
.input-group-prepend + .form-check.multi, .form-control + .form-check.multi {
    border: 1px solid #ced4da;
}
.form-check.multi, .multi .form-radio {
    border-radius: 0.25rem;
    display: inline-flex;
    flex-wrap:wrap;
}
.form-check.multi input[type=checkbox],
.form-radio input[type=radio] {
    display: none;
}
.form-radio {
    display: inline-flex;
}
.form-radio input[type=radio]+label.form-radio-label {
    display: flex;
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 0;
    color: var(--font-color);
    background-color: var(--bg-color2);
    border: 1px solid var(--border-color);
    padding: 0.33rem 0.75rem;
    cursor: pointer;
    margin: 0;
    line-height: 1.5;
    margin-left: -1px;
    margin-bottom: 1px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-radio input[type=radio]:first-child+label.form-radio-label{
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    margin-left: 0;
}
.form-radio input[type=radio]+label.form-radio-label:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.form-radio input[type=radio]:checked+label.form-radio-label {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
    z-index: 1;
}
.radio-multiline .form-radio {
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
}
.radio-multiline .form-radio > label {
    width: 100%;
    border-radius: 0.25rem !important;
    border: 1px solid var(--border-color) !important;
}
.radio-multiline .form-radio > input[type=radio]:checked+label {
    border-color: #6c757d !important;
}
.radio-multiline .form-radio > label:not(:last-child) {
    margin-bottom: 0.15rem !important;
}
.form-check.multi input[type=checkbox]+label.form-check-label,
.multi .form-radio input[type=radio]+label.form-radio-label {
    border-radius: 1rem;
    background-color: var(--bg-color-check);
    color: var(--font-color);
    padding: 0.2rem 0.75rem 0.25rem 0.2rem;
    margin: 0 0.25rem 0.25rem 0.25rem;
    cursor: pointer;
    justify-content: left;
    text-align: left;
}
.input-group-prepend + .form-check.multi input[type=checkbox]+label.form-check-label,
.multi .input-group-prepend + .form-radio input[type=radio]+label.form-radio-label {
    margin: 0.25rem;
}
.form-check.multi input[type=checkbox]+label.form-check-label:hover,
.multi .form-radio input[type=radio]+label.form-radio-label:hover {
    opacity: 0.8;
}
.form-check.multi input[type=checkbox]+label.form-check-label::before,
.multi .form-radio input[type=radio]+label.form-radio-label::before {
    font-family: var(--awesome);
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-size: 1.25rem;
    margin-right: 0.25rem;
    color: #fff;
    text-align : center;
    content: "\f111";
    translate: 0 0.1rem;
    margin-right: 0.5rem;
}
.input-group.col-md-12 .form-radio {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.input-group:has(.form-radio):not(:has(.form-control)),
.input-group:has(.form-check.multi):not(:has(.form-control)) {
    margin-bottom: 0 !important;
}
/*
.input-group:has(.form-radio):not(:has(.form-control)) .input-group-prepend,
.input-group:has(.form-check.multi):not(:has(.form-control)) .input-group-prepend {
    margin-bottom: 0.25rem !important;
}
*/
.form-check.multi input[type=checkbox]+label.form-check-label::before {
    width: 1.25rem;
    content: '';
}
.multi .form-radio input[type=radio]:checked+label.form-radio-label::before {
    content: "\f192";
} 
.form-check.multi input[type=checkbox]:checked+label.form-check-label::before {
    content: "\f00c";
} 
.form-check.multi input[type=checkbox]+label.form-check-label:hover
.multi .form-radio input[type=radio]+label.form-radio-label:hover {
    background-color: #6c757d;
    color: #fff;
}
.form-check.multi input[type=checkbox]:checked+label.form-check-label,
.multi .form-radio input[type=radio]:checked+label.form-radio-label {
    background-color: #6c757d;
    color: #fff;
    font-weight: 800;
}
.form-radio input[type=radio]:disabled+label.form-radio-label,
.multi .form-check input[type=checkbox]:disabled+label.form-check-label {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.title .form-radio input[type=radio]+label.form-radio-label {
    padding: 0 0.75rem;
}
[form-type="area"] {
    padding: 0;
}
[layout-type="list"] [search-area]+[list-title] {
    margin-top: 0.75rem;
}
#layout-alert {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 99999;
    background-color: rgba( 0, 0, 0, 0.5 );
}
#layout-alert.show {
    display: flex;
    justify-content: center;
    align-items: center;
}
#layout-toast {
    left: 50%;
    top: 4rem;
    background-color: #fff;
    transform: translate(calc(-50% + 2rem), calc(-100% - 4rem));
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.25, 1.35);
}
#layout-toast, #layout-alert .content {
    display: flex;
    align-content: stretch;
    position: fixed;
    box-shadow: 0 0 10px rgba(0,0,0, 0.1);
    border-radius: 0.5rem;
    overflow: hidden;
    z-index: 9999;
}

#layout-alert .content {
    min-width: 20rem;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.25, 1.35) 1s;
}
#layout-alert .content .message {
    background-color: #fff;
}
#layout-alert .footer {
    width: 100%;
    display: flex;
    align-content: stretch;
}
#layout-alert .footer button {
    flex-grow: 1;
    border: none;
    color: #fff;
    padding: 0.33rem 0.75rem;
}
#layout-alert .footer button:hover {
    opacity: 0.8;
}
#layout-alert .footer button.ok {
    background-color: var(--primary-color);
}
#layout-alert:not([popup-type=msgbox]) .footer button.no,
#layout-alert[popup-type=alert] .footer button.cancel {
    display: none;
}
#layout-alert .footer button.cancel {
    background-color: #6c757d;
}
#layout-alert .footer button.no {
    color: var(--menu-text-color);
}

#layout-alert .content {
    flex-direction: column;
    cursor: default !important;
}
#layout-toast.show {
    transform: translate(calc(-50% + 2rem), 0);
}
#layout-toast i.close {
    margin: 0.25rem 0.75rem 0.25rem 0.25rem;
}

#layout-toast i.icon, #layout-alert i.icon {
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color2);
    padding: 0 1rem 0 1.75rem;
}

#layout-toast i.icon::before {
    font-family: var(--awesome);
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-size: 1.75rem;
}
#layout-toast[type=success] {
    border-left: var(--submit-color) solid 6px;
}
#layout-toast[type=info] {
    border-left: var(--primary-color2) solid 6px;
}
#layout-toast[type=error] {
    border-left: #a02d2d solid 6px;
}
#layout-toast[type=warning] {
    border-left: #dfab00 solid 6px;
}
#layout-toast[type=success] {
    border-left: var(--submit-color) solid 6px;
}
#layout-toast[type=success] i.icon::before {
    content: '\f058';
    color: var(--submit-color);
}
#layout-toast[type=info] i.icon::before {
    content: '\f05a';
    color: var(--primary-color2);
}
#layout-toast[type=error] i.icon::before {
    content: '\f057';
    color: #a02d2d;
}
#layout-toast[type=warning] i.icon::before {
    content: '\f071';
    color: #dfab00;
}

#layout-toast span.message, #layout-alert .message {
    color: #6c757d;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}

#layout-alert .message {
    padding: 1rem 1.5rem;
}
[list-head] [list-item] [data-name][required]::before {
    color: #b40000;
    font-weight: 800;
    content: '*';
}
.list-sort { 
    text-decoration: none !important;
}
@media screen {
    [list-head] [list-item] [data-name]:has(.list-sort) {
        padding-right: calc(0.25rem + 13.5px);
    }
    .list-sort > i {
        position: absolute;
        right: 0;
        padding: 0 0.25rem;
    }
    .list-sort > i::before, .list-sort > i::after {
        font-family: "Font Awesome 6 Duotone";
        font-weight: 900;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        letter-spacing: normal;
        font-size: 1rem;
        color: var(--fa-primary-color,inherit);
        opacity: 0.4;
    }
    .list-sort > i::before {
        position: absolute;
        content: '\f0dc';
    }
    .list-sort > i::after {
        content: '\f0dc\f0dc';
    }
    
    .list-sort.down > i::after {
        opacity: 1;
    }
    .list-sort.down > i::before {
        opacity: .4;
    }
    
    .list-sort.up > i::before {
        opacity: 1;
    }
    .list-sort.up > i::after {
        opacity: .4;
    }
    .loading {
        position: relative;
        pointer-events: none !important;
    }
    .loading::after,
    .loading::before {
        position: absolute;
        width: 50px;
        height: 50px;
        left: calc(50% - 25px);
        top: calc(50% - 25px);
        z-index: 200;
    }
    .loading::before {
        content: '';  
        border-radius: 50%;
        display: inline-block;
        border-top: 4px solid var(--primary-color2);
        border-right: 4px solid transparent;
        box-sizing: border-box;
        -webkit-animation: loadingrotation 1s linear infinite;
        -moz-animation: loadingrotation 1s linear infinite;
        animation: loadingrotation 1s linear infinite;
        opacity: 0.3;
    }
    .loading::after {
        content: '';  
        box-sizing: border-box;
        position: absolute;
        border-radius: 50%;
        border-left: 4px solid var(--primary-color);
        opacity: 0.8;
        border-bottom: 4px solid transparent;
        -webkit-animation: loadingrotation 0.5s linear infinite reverse;
        -moz-animation: loadingrotation 0.5s linear infinite reverse;
        animation: loadingrotation 0.5s linear infinite reverse;
    }

    .btn.loading {
        pointer-events: none;
        min-width: 1.75rem;
    }
    .btn.loading::after,
    .btn.loading::before {
        width: 1.5rem;
        height: 1.5rem;
        left: calc(50% - 0.75rem);
        top: calc(50% - 0.75rem);
        border-width: 3px;
    }

    .title:not(.primary) .btn.loading::after,
    .title:not(.primary) .btn.loading::before,
    .title.primary .btn.loading::after,
    .btn-primary.btn.loading::after {
        border-color: #fff;
    }
    .title.primary .btn.loading::before,
    .btn-primary.btn.loading::before {
        border-color: var(--primary-color2);
        opacity: 0.8;
    }

    @-moz-keyframes loadingrotation {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
    }

    @-webkit-keyframes loadingrotation {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
    }

    @keyframes loadingrotation {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
    }
}