button.loading, .gridViewEditInDisplayElement.loading{
    pointer-events: none !important;
    background: -moz-linear-gradient(left, rgba(30,87,153,0.1) 0,rgba(78,136,193,0.1) 50%,rgba(79,137,194,0) 50%,rgba(125,185,232,0) 100%) !important;
    background: -webkit-gradient(linear, left top, right top,
    color-stop(0%, rgba(30,87,153,0.1)), color-stop(50%, rgba(78,136,193,0.1)), color-stop(50%, rgba(79,137,194,0)), color-stop(100%, rgba(125,185,232,0))) !important;
    background: -webkit-linear-gradient(left, rgba(30,87,153,0.1) 0,rgba(78,136,193,0.1) 50%,rgba(79,137,194,0) 50%,rgba(125,185,232,0) 100%) !important;
    background: -o-linear-gradient(left, rgba(30,87,153,0.1) 0,rgba(78,136,193,0.1) 50%,rgba(79,137,194,0) 50%,rgba(125,185,232,0) 100%) !important;
    background: -ms-linear-gradient(left, rgba(30,87,153,0.1) 0,rgba(78,136,193,0.1) 50%,rgba(79,137,194,0) 50%,rgba(125,185,232,0) 100%) !important;
    background: linear-gradient(to right, rgba(30,87,153,0.1) 0,rgba(78,136,193,0.1) 50%,rgba(79,137,194,0) 50%,rgba(125,185,232,0) 100%) !important;

    background-color: rgb(135, 199, 255) !important;

    background-size: 10px 100% !important;

    -webkit-animation-duration: 0.3s !important;
    -webkit-animation-name: loading !important;
    -webkit-animation-iteration-count: infinite !important;
    -webkit-animation-timing-function: linear !important;
    -moz-animation-duration: 0.3s !important;
    -moz-animation-name: loading !important;
    -moz-animation-iteration-count: infinite !important;
    -moz-animation-timing-function: linear !important;
    -o-animation-duration: 0.3s !important;
    -o-animation-name: loading !important;
    -o-animation-iteration-count: infinite !important;
    -o-animation-timing-function: linear !important;
    animation-duration: 0.3s !important;
    animation-name: loading !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
}


@keyframes loading {
    to {
        background-position: 10px 0;
    }
}

@-webkit-keyframes loading {
    to {
        background-position: 10px 0;
    }
}

@-moz-keyframes loading {
    to {
        background-position: 10px 0;
    }
}

@-o-keyframes loading {
    to {
        background-position: 10px 0;
    }
}


/*Mobile*/

body.mobile button, body.mobile .button-primary{
    background-color: #999;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    border: none;
    border-radius: .5em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2), inset 0 2px 0 hsla(0,0%,100%,.1), inset 0 1.2em 0 hsla(0,0%,100%,0.1), inset 0 -.2em 0 hsla(0,0%,100%,.1), inset 0 -.25em 0 hsla(0,0%,0%,.25), 0 .25em .25em hsla(0,0%,0%,.05);
    color: #444;
    cursor: pointer;
    display: inline-block;
    font-family: var(--font_family);
    /* font-size: 1em; */
    /* font-weight: bold; */
    /* line-height: 1.5; */
    /* margin: 0 .5em 1em; */
    padding: .5em 1.5em .75em;
    padding: .4em .6em .6em;
    border-radius: 3px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body.mobile button:hover, body.mobile .button-primary:hover{
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2), inset 0 2px 0 hsla(0,0%,100%,.1), inset 0 1.2em 0 hsla(0,0%,100%,.1), inset 0 -.2em 0 hsla(0,0%,100%,.1), inset 0 -.25em 0 hsla(0,0%,0%,.25), inset 0 0 0 3em hsla(0,0%,100%,.2), 0 .25em .25em hsla(0,0%,0%,.05);
}
body.mobile button:active, body.mobile .button-primary:active{
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2), inset 0 2px 0 hsla(0,0%,100%,.1), inset 0 1.2em 0 hsla(0,0%,100%,.1), inset 0 0 0 3em hsla(0,0%,100%,.2), inset 0 .25em .5em hsla(0,0%,0%,.05), 0 -1px 1px hsla(0,0%,0%,.1), 0 1px 1px hsla(0,0%,100%,.25);
    margin-top: .25em;
    outline: none;
    padding-bottom: .5em;
}
body.mobile button:focus, body.mobile .button-primary:focus{
    /*opacity: 1;*/
    /*color: #ffffff;*/
    /*border-color: #000000;*/
}
button[disabled], .button-normal[disabled], .button-normal[disabled]:hover, .button-normal[disabled]:active,
.button-primary[disabled], .button-primary[disabled]:hover, .button-primary[disabled]:active,
.button-secondary[disabled], .button-secondary[disabled]:hover, .button-secondary[disabled]:active,
.button-tertiary[disabled], .button-tertiary[disabled]:hover, .button-tertiary[disabled]:active{
    cursor: default;
    background: #428bca;
    box-shadow: 0px 0px;
    pointer-events: none;
    opacity: .3;
}


input[type="text"], input[type="number"]{
    border: 1px solid #999;
    border-radius: 6px;
    /*box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);*/
    /*width:200px;*/
    padding: 4px 2px;
    font-size: 12px;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}
select{
    padding: 4px 2px;
}
textarea{
    margin-top: 2px;
    margin-bottom: 2px;
    height: 50px;
    border: 1px solid #999;
    border-radius: 1px;
    /*box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);*/
    padding: 4px 2px;
    font-size: 12px;
}
input[type="text"]:hover{
    border:1px solid rgba(105, 105, 105, 0.74);
}
input[type="text"]:focus{
    /* border-color: #51a7e8; */
    border-color: #304051;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5);
    outline: none;
}
input[type="text"][readonly]{
    border: none;
    background: transparent;
    box-shadow: none;
}

textarea:hover{
    border:1px solid rgba(105, 105, 105, 0.74);
}
textarea:focus{
    border-color: #51a7e8;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5);
    outline: none;
}



/*PC*/

button, .button-primary{
    outline: none;
    /* background-color: #525789; */
    /*background-color: #2d3e50;*/
    /*background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));*/
    /*background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));*/
    /*background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));*/
    /*background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));*/
    border: none;
    border-radius: .5em;
    /*margin: 3px;*/
    /* box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2), inset 0 2px 0 hsla(0,0%,100%,.1), inset 0 1.2em 0 hsla(0,0%,100%,0.1), inset 0 -.2em 0 hsla(0,0%,100%,.1), inset 0 -.25em 0 hsla(0,0%,0%,.25), 0 .25em .25em hsla(0,0%,0%,.05); */
    color: #FFF;
    cursor: pointer;
    /*font-weight: bold;*/
    /*padding: .5em 1.5em .75em;*/
    /*position: relative;*/
    text-decoration: none;
    /*text-shadow: 0 1px 1px hsla(0,0%,100%,.25);*/
    vertical-align: middle;
    border-radius: .25em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*font-weight: 300;*/
    /*min-width: 80px;*/
    /*padding-left: 20px;*/
    /*padding-right: 20px;*/
    /*padding-top: 8px;*/
    /*padding-bottom: 8px;*/
}

body.pc .buttonGroup{
    background-color: rgb(96, 101, 153);
    position: relative;
    display: inline-block;
    min-width: 50px;
    height: 32px;
    overflow: hidden;
    color: #FFF;
    text-align: center;
    cursor: pointer;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 3px;
    font-size: 15px;
    font-weight: 400;
    vertical-align: top;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

body.pc .buttonGroup:after {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    /*border-top: 15px solid #525789;*/
    border-top: 10px solid #ffffff;
    position: absolute;
    content: "";
    top: 12px;
    right: 10px;
}

body.pc .buttonGroup:hover{
    overflow: visible;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    z-index: 100;
}

body.pc .buttonGroup > span{
    padding: 9px;
    display: inline-block;
    margin-right: 20px;
}

body.pc .buttonGroup .groupButtonContainer{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: rgb(255, 255, 255);
    display: block;
    position: relative;
    padding-top: 5px;
    padding-right: 8px;
    padding-left: 8px;
    padding-bottom: 2px;
    top: -1px;
    border: 1px solid rgb(171, 171, 173);
    border-top: 0;
    /* background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%), linear-gradient(to bottom, rgb(96, 101, 153) 0%, rgb(96, 101, 153) 100%); */
    /* background-clip: content-box, padding-box; */
}

body.pc .buttonGroup button{
    position: relative;
    display: block !important;
    width: 100%;
    margin-left: 0;
    box-shadow: 0px 0px 3px 1px rgb(181, 181, 181);
    background: rgba(255, 255, 255, 1);
    color: rgb(81, 86, 132);
    border-radius: 0px;
    margin-top: 10px;
    margin-bottom: 9px;
    padding-top: 9px;
}

body.pc button:hover, body.pc .button-primary:hover{
    border-radius: 2px;
    /*box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2), inset 0 2px 0 hsla(0,0%,100%,.1), inset 0 1.2em 0 hsla(0,0%,100%,.1), inset 0 -.2em 0 hsla(0,0%,100%,.1), inset 0 -.25em 0 hsla(0,0%,0%,.25), inset 0 0 0 3em hsla(0,0%,100%,.2), 0 .25em .25em hsla(0,0%,0%,.05);*/
}
body.pc button:active, body.pc .button-primary:active{
    /*box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2), inset 0 2px 0 hsla(0,0%,100%,.1), inset 0 1.2em 0 hsla(0,0%,100%,.1), inset 0 0 0 3em hsla(0,0%,100%,.2), inset 0 .25em .5em hsla(0,0%,0%,.05), 0 -1px 1px hsla(0,0%,0%,.1), 0 1px 1px hsla(0,0%,100%,.25);*/
    /*margin-top: .25em;*/
    outline: none;
    border-radius: 4px;
    /*padding-bottom: .5em;*/

}
body.pc button:focus, body.pc .button-primary:focus{
    /*outline: auto;*/
}
button[disabled], .button-normal[disabled], .button-normal[disabled]:hover, .button-normal[disabled]:active,
.button-primary[disabled], .button-primary[disabled]:hover, .button-primary[disabled]:active,
.button-secondary[disabled], .button-secondary[disabled]:hover, .button-secondary[disabled]:active,
.button-tertiary[disabled], .button-tertiary[disabled]:hover, .button-tertiary[disabled]:active{
    cursor: default;
    background: #428bca;
    box-shadow: 0px 0px;
    pointer-events: none;
    opacity: .3;
}


body.pc input[type="checkbox"]{
    -webkit-appearance: none;
    border: 1.5px solid var(--border_primary);
    width: 16px;
    height: 16px;
    position: relative;
    outline: none;
    background: var(--bg_primary);
    background-size: contain;
    border-radius: var(--radius_sm);
    cursor: pointer;
    transition: all var(--transition_fast);
}

body.pc input[type="checkbox"]:hover{
    border-color: var(--accent_primary);
    background: var(--bg_secondary);
}

body.pc input[type="checkbox"]:focus{
    outline: none;
    box-shadow: 0 0 0 3px var(--accent_primary_lighter);
    border-color: var(--accent_primary);
}

body.pc input[type="checkbox"]:checked{
    background: var(--accent_primary) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUgMS41TDQuMjUgNy43NUwxLjUgNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+) no-repeat center;
    border-color: var(--accent_primary);
    background-size: 10px;
}







radiogroup{
    display: inline-block;
    padding: 5px;
    text-align: left;
}
radiogroup.horizontal{
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

radiogroup.horizontal label {
    display: inline-block;
    vertical-align: top;
    padding-top: 3px;
    padding-right: 4px;
    padding-left: 1px;
}


body.pc{


    /*Image -------------------------*/
    .formview-main-view .btnRemoveImage {
        display: none;
    }

    .gridViewImgElement {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        min-width: 40px;
        min-height: 40px;
        max-width: 100px;
        max-height: 100px;
        cursor: pointer;
    }

    .imgElement {
        height: 75px;
        width: 75px;
        display: inline-block;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABACAYAAABGHBTIAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAA1VJREFUaEPtmk+L1DAUwFcFBfHfwZt+Bb3pV5AVUVav3kXxsPgF9BuIIMqCTmdZvMxFvQjioU47K3sQWVhxdb0p6EVQ0T0I64vvTZvuTLZpmjS0ac1AoEzSl/d7L++9pO3MjP95C3gLeAt4C3gLeAs4Z4F+DLNBDF/6MWMutUQnmLVuMBdhueFJN+vALnk1TxcPXNUColWrynP+fg/svIsqKug9LBjQ1SxuXKdVHnYVmPQyqtNtBibdtSPaA7ckhrmjvIdVFnBrScNGMIRLCy/YYWp0jSemjaLEqeLb0e8KMGbcD0HIjogK0n/9CN7LoFsL3Ivhokx56usc8NIKHJIBU1/ngB+M4KAMeBCyA50DxuQ0JwOmvu4BR7BekLTWuwdMDxExGy8O4QItb2p0XZSh/dayTI1ypQ6bnsrKME6N8cD+8KD/RiKI2S1qpstU577GlzSBciXqgG4UeBK2LujGgPNg64BuBLgIVgd6MYJz1HCzcb9sHNcOXAa2DDSB8nGMsV1loWsF1oEtgp6Ug6BXaSxBBxE8V3m6NmAT2DxoUQ4++djCPfQZGnvnGexD6DUnHvFoW1a4gddqUU4K96P3Ek5QHx3+0QifGz8tVQWWn32TjQ5BLoVwnMb1X8ExXOqbedDaepjupbUnKnnDpD4IvbLwmu0fQ4/gPEL/VemrnEYlwNpSUmqSDBDnwxh+OhiwPdSHBphX6aucRvyoRRJTO77wUQo2HJBr4Ahuc3FiudKepjeCs/jM6Kvs1UXTHs7mT8vVTcZ2k9dl+mobwEkPJ0lsi+I4y9xpuaoM6CrwOHNH8DMrV5jBKZPXBqzaAen2ZzGq+CJwqlxFcLLzwGNDRrDKy9X/AZws76xcWYXWXZqm48suaWFjcs8qbFrsa/nSNttRSWMYPmH5fIxtGb37EWP5N8HjsfKaVWixTpt6UHUff3s45cEIAOM1TPfWv+ilmlU4F4RxYPQioDevPwrZUbz+k/wPV1zQ0aoOab0dw3LBuHyfpF5+Y3UyF4Qh6HcxLqdelw7htAt6WtMBY/ayKGzwlu3FZf0trcEPrU3msiA0xN0UeDPvPbLLuhvp1luGU9sZfDu+jYS15SZMXu/SpLbWFp0r6YnJ7EaSsWGOzsVFwv4BhMB5SCG66HkAAAAASUVORK5CYII=);
        -webkit-transition: width .5s ease, height .5s ease;
        -moz-transition: width .5s ease, height .5s ease;
        -ms-transition: width .5s ease, height .5s ease;
        transition: width .5s ease, height .5s ease;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .imgElement[style*="back"]:hover {
        height: 200px;
        width: 200px;
    }

    .btnRemoveImage {
        display: inline-block;
        padding: 1px 4px !important;
        display: none; /*    temp aki */
    }

    .imageInputElement {
        display: none;
    }

    /*Document -------------------------*/
    .formview-main-view .btnRemoveDocument {
        display: none;
    }

    .gridViewDocumentElement {
        background-size: contain;
        background-repeat: no-repeat;
        /*min-width: 40px;*/
        /*min-height: 40px;*/
        /*max-width: 100px;*/
        /*max-height: 100px;*/
        cursor: pointer;
    }

    /* Document Column Wrapper - parent container for document upload elements */
    .document_column_wrapper {
        position: relative;
        display: inline-block;
        margin: 4px 0;
    }

    /* Parent container styling for document elements */
    .documentElement {
        min-height: 60px;
        width: 320px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        padding: 10px 14px;
        box-sizing: border-box;
        border: 2px dashed #c5d0e0;
        border-radius: 10px;
        background-color: #f8fafc;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
        transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
        outline: none;
    }

    .documentElement:hover {
        border-color: #6b8cc9;
        background-color: #eef3fb;
        box-shadow: 0 2px 8px rgba(107, 140, 201, 0.12);
    }

    .documentElement:focus-visible {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }

    .documentElement.is-drag-over {
        border-color: #6366f1;
        border-style: solid;
        background-color: #eef2ff;
        box-shadow: 0 4px 14px rgba(99, 102, 241, 0.18);
    }

    .documentElement .document_empty_state {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: 100%;
        pointer-events: none;
    }

    .documentElement .document_upload_icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background-color: #eef2ff;
        color: #6366f1;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .documentElement .document_upload_icon svg {
        width: 17px;
        height: 17px;
    }

    .documentElement:hover .document_upload_icon,
    .documentElement.is-drag-over .document_upload_icon {
        background-color: #e0e7ff;
        color: #4f46e5;
    }

    .documentElement .document_upload_text {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
        flex: 1;
    }

    .documentElement .document_upload_label {
        font-size: 12px;
        color: #1e293b;
        font-weight: 500;
        text-align: left;
        line-height: 1.25;
    }

    .documentElement .document_upload_drag_hint {
        color: #6366f1;
        font-weight: 600;
    }

    .documentElement .document_upload_subtext {
        font-size: 10.5px;
        color: #94a3b8;
        text-align: left;
        letter-spacing: 0.01em;
    }

    /* View-mode placeholder: subdued, non-interactive look */
    .documentElement.documentElement_view_mode {
        cursor: default;
        border-style: solid;
        border-color: #e2e8f0;
        background-color: #ffffff;
    }

    .documentElement.documentElement_view_mode:hover {
        border-color: #e2e8f0;
        background-color: #ffffff;
        box-shadow: none;
    }

    .documentElement.documentElement_view_mode .document_no_file_label {
        color: #94a3b8;
        font-weight: 400;
        font-style: italic;
    }

    /* View-mode filled state: inherits horizontal layout from base, only overrides interactivity */
    .documentElement.documentElement_view_mode[style*="background-image"] {
        border-color: #e2e8f0;
        box-shadow: none;
        cursor: default;
    }

    .documentElement.documentElement_view_mode[style*="background-image"]:hover {
        border-color: #e2e8f0;
        box-shadow: none;
    }

    .documentElement.documentElement_view_mode[style*="background-image"] .document_filled_state {
        cursor: pointer;
        pointer-events: all;
    }

    .documentElement.documentElement_view_mode[style*="background-image"] .document_file_meta {
        font-size: 10.5px;
        color: #94a3b8;
        text-align: left;
    }

    .documentElement .document_filled_state {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        width: 100%;
        padding-top: 0;
        position: relative;
        z-index: 1;
        min-width: 0;
        pointer-events: none;
    }

    .documentElement .document_file_name {
        font-size: 12px;
        color: #1e293b;
        font-weight: 500;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        padding: 0;
    }

    .documentElement .document_file_meta {
        font-size: 10.5px;
        color: #94a3b8;
        text-align: left;
    }

    .documentElement .document_file_meta:empty {
        display: none;
    }

    /* Filled state: horizontal layout with a tinted thumbnail tile on the left */
    .documentElement[style*="background-image"] {
        border-style: solid;
        border-color: #d1d9e6;
        background-color: #ffffff;
        background-size: 22px 22px;
        background-position: 18px center;
        background-repeat: no-repeat;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        justify-content: flex-start;
        padding-left: 56px;
    }

    .documentElement[style*="background-image"]::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        /*background-color: #eef2ff;*/
        transform: translateY(-50%);
        z-index: 0;
    }

    .documentElement[style*="background-image"] .document_empty_state {
        display: none;
    }

    .documentElement[style*="background-image"] .document_filled_state {
        display: flex;
    }

    .documentElement[style*="background-image"]:hover {
        border-color: #6b8cc9;
        box-shadow: 0 3px 12px rgba(107, 140, 201, 0.18);
    }

    .btnRemoveDocument {
        position: absolute;
        top: -8px;
        right: -8px;
        display: none;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0 !important;
        color: #ffffff;
        background-color: #ef4444;
        border: 2px solid #ffffff;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.15s ease, transform 0.15s ease;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .documentElement[style*="background-image"] ~ .btnRemoveDocument {
        display: inline-flex;
    }

    .btnRemoveDocument:hover {
        background-color: #dc2626;
        transform: scale(1.08);
    }

    .btnRemoveDocument svg {
        display: block;
    }

    .btnRemoveDocument.hidden {
        display: none !important;
    }

    .documentInputElement {
        display: none;
    }

    /* Progress bar styling for document upload */
    .document_column_wrapper .progressBar {
        position: absolute;
        bottom: 8px;
        left: 8px;
        right: 8px;
        width: calc(100% - 16px);
        height: 4px;
        border-radius: 2px;
        background-color: #e2e8f0;
        overflow: hidden;
    }

    .document_column_wrapper .progressBar::-webkit-progress-bar {
        background-color: #e2e8f0;
        border-radius: 2px;
    }

    .document_column_wrapper .progressBar::-webkit-progress-value {
        background: linear-gradient(90deg, #4299e1, #667eea);
        border-radius: 2px;
        transition: width 0.3s ease;
    }

    .document_column_wrapper .progressBar::-moz-progress-bar {
        background: linear-gradient(90deg, #4299e1, #667eea);
        border-radius: 2px;
    }

    /* Compact variant used inside subforms (SimpleDataTableRow) where vertical space is tight */
    .document_column_wrapper_inside_subform {
        display: block;
        width: 100%;
        margin: 0;
    }

    .document_column_wrapper_inside_subform .documentElement {
        min-height: 38px;
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 6px 10px;
        gap: 8px;
        border-radius: 6px;
        border-width: 1px;
    }

    .document_column_wrapper_inside_subform .documentElement .document_empty_state {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
    }

    .document_column_wrapper_inside_subform .documentElement .document_upload_icon {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background-color: transparent;
    }

    .document_column_wrapper_inside_subform .documentElement .document_upload_icon svg {
        width: 18px;
        height: 18px;
    }

    .document_column_wrapper_inside_subform .documentElement .document_upload_label {
        font-size: 10px;
        text-align: left;
        line-height: 1.2;
        /* white-space: nowrap; */
        /* overflow: hidden; */
        /* text-overflow: ellipsis; */
        flex: 1;
        min-width: 0;
        max-width: 90px;
        white-space: break-spaces;
    }

    .document_column_wrapper_inside_subform .documentElement .document_upload_subtext {
        display: none;
    }

    .document_column_wrapper_inside_subform .documentElement .document_filled_state {
        padding-top: 0;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        text-align: left;
    }

    .document_column_wrapper_inside_subform .documentElement .document_file_name {
        font-size: 11px;
        text-align: left;
        padding: 0;
        max-width: 50px;
    }

    .document_column_wrapper_inside_subform .documentElement .document_file_meta {
        font-size: 10px;
    }

    .document_column_wrapper_inside_subform .documentElement[style*="background-image"] {
        background-size: 18px 18px;
        background-position: 10px center;
        justify-content: flex-start;
        padding-left: 36px;
    }

    .document_column_wrapper_inside_subform .btnRemoveDocument {
        width: 18px;
        height: 18px;
        top: -6px;
        right: -6px;
        border-width: 1px;
    }

    .document_column_wrapper_inside_subform .btnRemoveDocument svg {
        width: 8px;
        height: 8px;
    }

    .document_column_wrapper_inside_subform .progressBar {
        bottom: 2px;
        left: 4px;
        right: 4px;
        width: calc(100% - 8px);
        height: 3px;
    }

    .gridViewDocumentElement {
        width: 24px;
        height: 24px;
        display: inline-block;
    }


}





/* Toggle Switch Styles for checkboxBit and checkboxValue */

.toggle_switch_container {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.pc .toggle_switch_container{


    .toggle_switch_input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .toggle_switch_label {
        position: relative;
        display: inline-block;
        width: 32px;
        height: 16px;
        cursor: pointer;
        background: #e2e8f0;
        border-radius: 8px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid #cbd5e0;
        overflow: hidden;
    }

    .toggle_switch_label::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none;
    }

    .toggle_switch_label.disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    .toggle_switch_slider {
        position: absolute;
        top: 1px;
        left: 2px;
        width: 12px;
        height: 12px;
        background: #ffffff;
        border-radius: 50%;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(56, 189, 248, 0);
        transform: scale(1);
    }

    /* Checked state */
    .toggle_switch_input:checked + .toggle_switch_label {
        background: #3b82f6;
        border-color: #2563eb;
    }

    .toggle_switch_input:checked + .toggle_switch_label::before {
        opacity: 1;
    }

    .toggle_switch_input:checked + .toggle_switch_label .toggle_switch_slider {
        left: 16px;
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(59, 130, 246, 0.15);
        transform: scale(1);
    }

    /* Hover effects (not disabled) */
    .toggle_switch_label:not(.disabled):hover {
        border-color: #94a3b8;
        transform: translateY(-1px);
    }

    .toggle_switch_input:checked + .toggle_switch_label:not(.disabled):hover {
        background: #2563eb;
        border-color: #1d4ed8;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
    }

    .toggle_switch_label:not(.disabled):hover .toggle_switch_slider {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(56, 189, 248, 0.1);
    }

    /* Active/Click state */
    .toggle_switch_input:active + .toggle_switch_label .toggle_switch_slider {
        transform: scale(0.95);
    }

    /* Focus state for accessibility */
    .toggle_switch_input:focus + .toggle_switch_label {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    .toggle_switch_input:focus:not(:focus-visible) + .toggle_switch_label {
        outline: none;
    }

    /* GridView specific adjustments */
    .grid-data-item.toggle_switch_container {
        justify-content: center;
    }

    /* FormView specific adjustments */
    .formview-column-display-value .toggle_switch_container {
        margin: 4px 0;
    }

    /* Smaller variant for compact tables */
    .compact .toggle_switch_label {
        width: 28px;
        height: 14px;
    }

    .compact .toggle_switch_slider {
        width: 10px;
        height: 10px;
        top: 1px;
        left: 2px;
    }

    .compact .toggle_switch_input:checked + .toggle_switch_label .toggle_switch_slider {
        left: 14px;
    }


}

/* Common Checkbox Container Base */

.checkbox_container {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Modern Checkbox Styles */

.modern_checkbox_container {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.pc .modern_checkbox_container {
    
    .modern_checkbox_input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .modern_checkbox_label {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        cursor: pointer;
        background: #ffffff;
        border-radius: 6px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        border: 2px solid #cbd5e1;
    }

    .modern_checkbox_label.disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    .modern_checkbox_checkmark {
        position: absolute;
        opacity: 0;
        transform: scale(0.5);
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modern_checkbox_checkmark svg {
        width: 14px;
        height: 14px;
        stroke-width: 3;
    }

    /* Checked state */
    .modern_checkbox_input:checked + .modern_checkbox_label {
        background: #3b82f6;
        border-color: #3b82f6;
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    }

    .modern_checkbox_input:checked + .modern_checkbox_label .modern_checkbox_checkmark {
        opacity: 1;
        transform: scale(1);
    }

    /* Hover effects (not disabled) */
    .modern_checkbox_label:not(.disabled):hover {
        border-color: #94a3b8;
        box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.1);
    }

    .modern_checkbox_input:checked + .modern_checkbox_label:not(.disabled):hover {
        background: #2563eb;
        border-color: #2563eb;
        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
    }

    /* Active/Click state */
    .modern_checkbox_input:active + .modern_checkbox_label {
        transform: scale(0.95);
    }

    /* Focus state for accessibility */
    .modern_checkbox_input:focus + .modern_checkbox_label {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    .modern_checkbox_input:focus:not(:focus-visible) + .modern_checkbox_label {
        outline: none;
    }

    /* GridView specific adjustments */
    .grid-data-item.modern_checkbox_container {
        justify-content: center;
    }

    /* FormView specific adjustments */
    .formview-column-display-value .modern_checkbox_container {
        margin: 4px 0;
    }

    /* Smaller variant for compact tables */
    .compact .modern_checkbox_label {
        width: 18px;
        height: 18px;
        border-radius: 4px;
    }

    .compact .modern_checkbox_checkmark svg {
        width: 12px;
        height: 12px;
    }
}

/* Yes or No Switch Styles */

.yes_or_no_switch_container {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.pc .yes_or_no_switch_container {
    
    .yes_or_no_switch_input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .yes_or_no_switch_label {
        position: relative;
        display: inline-flex;
        align-items: center;
        width: 44px;
        height: 20px;
        cursor: pointer;
        background: #ef4444;
        border-radius: 10px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid #dc2626;
        overflow: hidden;
    }

    .yes_or_no_switch_label.disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    .yes_or_no_switch_slider {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 14px;
        height: 14px;
        background: #ffffff;
        border-radius: 50%;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        z-index: 2;
    }

    .yes_or_no_switch_text {
        position: absolute;
        font-size: 8px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        transition: all 0.3s ease;
        user-select: none;
    }

    .yes_or_no_switch_text_yes {
        left: 5px;
        color: #ffffff;
        opacity: 0;
    }

    .yes_or_no_switch_text_no {
        right: 4px;
        color: #ffffff;
        opacity: 1;
    }

    /* Checked state (Yes) */
    .yes_or_no_switch_input:checked + .yes_or_no_switch_label {
        background: #22c55e;
        border-color: #16a34a;
    }

    .yes_or_no_switch_input:checked + .yes_or_no_switch_label .yes_or_no_switch_slider {
        left: 26px;
    }

    .yes_or_no_switch_input:checked + .yes_or_no_switch_label .yes_or_no_switch_text_yes {
        opacity: 1;
    }

    .yes_or_no_switch_input:checked + .yes_or_no_switch_label .yes_or_no_switch_text_no {
        opacity: 0;
    }

    /* Hover effects (not disabled) */
    .yes_or_no_switch_label:not(.disabled):hover {
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
        transform: translateY(-1px);
    }

    .yes_or_no_switch_input:checked + .yes_or_no_switch_label:not(.disabled):hover {
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    }

    /* Active/Click state */
    .yes_or_no_switch_input:active + .yes_or_no_switch_label .yes_or_no_switch_slider {
        width: 18px;
    }

    .yes_or_no_switch_input:checked:active + .yes_or_no_switch_label .yes_or_no_switch_slider {
        left: 22px;
    }

    /* Focus state for accessibility */
    .yes_or_no_switch_input:focus + .yes_or_no_switch_label {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    .yes_or_no_switch_input:focus:not(:focus-visible) + .yes_or_no_switch_label {
        outline: none;
    }

    /* GridView specific adjustments */
    .grid-data-item.yes_or_no_switch_container {
        justify-content: center;
    }

    /* FormView specific adjustments */
    .formview-column-display-value .yes_or_no_switch_container {
        margin: 4px 0;
    }

    /* Smaller variant for compact tables */
    .compact .yes_or_no_switch_label {
        width: 38px;
        height: 16px;
        border-radius: 8px;
    }

    .compact .yes_or_no_switch_slider {
        width: 10px;
        height: 10px;
        top: 2px;
        left: 2px;
    }

    .compact .yes_or_no_switch_input:checked + .yes_or_no_switch_label .yes_or_no_switch_slider {
        left: 24px;
    }

    .compact .yes_or_no_switch_text {
        font-size: 7px;
    }
}