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: sans-serif;
    /* 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 {
        height: 80px;
        width: 120px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border: 2px dashed #c5d0e0;
        border-radius: 8px;
        background-color: #f8fafc;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23a0b0c8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='12' y1='18' x2='12' y2='12'/%3E%3Cline x1='9' y1='15' x2='15' y2='15'/%3E%3C/svg%3E");
        background-size: 40px 40px;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
        transition: all 0.25s ease;
    }

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

    .documentElement:active {
        transform: scale(0.98);
    }

    /* When document is uploaded (has background-image set inline) */
    .documentElement[style*="background-image"] {
        border-style: solid;
        border-color: #d1d9e6;
        background-color: #ffffff;
        background-size: contain;
        background-position: center;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

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

    /* Tooltip-style filename display */
    .documentElement[title]:not([title=""]):after {
        content: attr(title);
        position: absolute;
        bottom: -24px;
        left: 50%;
        transform: translateX(-50%);
        max-width: 140px;
        padding: 3px 8px;
        font-size: 11px;
        color: #4a5568;
        background-color: #f1f5f9;
        border-radius: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }

    .documentElement[title]:not([title=""]):hover:after {
        opacity: 1;
    }

    .btnRemoveDocument {
        position: absolute;
        top: -8px;
        right: -8px;
        display: none;
        width: 22px;
        height: 22px;
        padding: 0 !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 20px;
        text-align: center;
        color: #ffffff;
        background-color: #e53e3e;
        border: 2px solid #ffffff;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .btnRemoveDocument:hover {
        background-color: #c53030;
        transform: scale(1.1);
    }

    /* Show remove button when document is present */
    .documentElement[style*="background-image"] ~ .btnRemoveDocument {
        display: block;
    }

    /* Hide remove button when hidden class is applied */
    .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;
    }

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