@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Employees/ComponentDetailEmps/DetailRelationShip.razor.rz.scp.css */

@media (min-width: 64em) {
    .padding_title[b-rpfojtiax0] {
        padding: 0 1%;
    }
}

@media (min-width: 46.25em) and (max-width: 63.9375em) {
    .padding_title[b-rpfojtiax0] {
        padding: 1%;
    }

    .drop_button[b-rpfojtiax0] {
        padding: 2% 0 ;
    }

    .margin_button[b-rpfojtiax0] {
        margin: 3% 0 !important;
    }
    .padding_button[b-rpfojtiax0] {
        padding: 2%;
    }
}

@media (max-width: 46.25em) {

    .padding_title[b-rpfojtiax0] {
        padding: 2% 0;
    }

    .drop_button[b-rpfojtiax0] {
        padding: 4% 0;
    }
    .margin_button[b-rpfojtiax0] {
        margin: 6% 0 !important;
    }
    .padding_button[b-rpfojtiax0] {
        padding: 4%;
    }
}
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input[type=checkbox][b-rpfojtiax0] {
        --active: #275EFE;
        --active-inner: #fff;
        --focus: 2px rgba(39, 94, 254, .3);
        --border: #BBC1E1;
        --border-hover: #275EFE;
        --background: #fff;
        --disabled: #F6F8FF;
        --disabled-inner: #E1E6F9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

        input[type=checkbox][b-rpfojtiax0]:after {
            content: "";
            display: block;
            left: 0;
            top: 0;
            position: absolute;
            transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
        }

        input[type=checkbox]:checked[b-rpfojtiax0] {
            --b: var(--active);
            --bc: var(--active);
            --d-o: .3s;
            --d-t: .6s;
            --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
        }

        input[type=checkbox]:disabled[b-rpfojtiax0] {
            --b: var(--disabled);
            cursor: not-allowed;
            opacity: 0.9;
        }

            input[type=checkbox]:disabled:checked[b-rpfojtiax0] {
                --b: var(--disabled-inner);
                --bc: var(--border);
            }

            input[type=checkbox]:disabled + label[b-rpfojtiax0] {
                cursor: not-allowed;
            }

        input[type=checkbox]:hover:not(:checked):not(:disabled)[b-rpfojtiax0] {
            --bc: var(--border-hover);
        }

        input[type=checkbox]:focus[b-rpfojtiax0] {
            box-shadow: 0 0 0 var(--focus);
        }

        input[type=checkbox]:not(.switch)[b-rpfojtiax0] {
            width: 21px;
        }

            input[type=checkbox]:not(.switch)[b-rpfojtiax0]:after {
                opacity: var(--o, 0);
            }

            input[type=checkbox]:not(.switch):checked[b-rpfojtiax0] {
                --o: 1;
            }

        input[type=checkbox] + label[b-rpfojtiax0] {
            font-size: 14px;
            line-height: 21px;
            display: inline-block;
            vertical-align: top;
            cursor: pointer;
            margin-left: 4px;
        }

        input[type=checkbox]:not(.switch)[b-rpfojtiax0] {
            border-radius: 7px;
        }

            input[type=checkbox]:not(.switch)[b-rpfojtiax0]:after {
                width: 5px;
                height: 9px;
                border: 2px solid var(--active-inner);
                border-top: 0;
                border-left: 0;
                left: 7px;
                top: 4px;
                transform: rotate(var(--r, 20deg));
            }

            input[type=checkbox]:not(.switch):checked[b-rpfojtiax0] {
                --r: 43deg;
            }

        input[type=checkbox].switch[b-rpfojtiax0] {
            width: 38px;
            border-radius: 11px;
        }

            input[type=checkbox].switch[b-rpfojtiax0]:after {
                left: 2px;
                top: 2px;
                border-radius: 50%;
                width: 15px;
                height: 15px;
                background: var(--ab, var(--border));
                transform: translateX(var(--x, 0%));
            }

            input[type=checkbox].switch:checked[b-rpfojtiax0] {
                --ab: var(--active-inner);
                --x: 100%;
            }

            input[type=checkbox].switch:disabled:not(:checked)[b-rpfojtiax0]:after {
                opacity: 0.6;
            }
}
/* /Employees/ComponentDetailEmps/DetailWorkProcess.razor.rz.scp.css */

@media (min-width: 64em) {
    .padding_title[b-xgfomfwmln] {
        padding: 0 1%;
    }
    .padding_button[b-xgfomfwmln] {
        padding: 2%;
    }
}

@media (min-width: 46.25em) and (max-width: 63.9375em) {
    .padding_title[b-xgfomfwmln] {
        padding: 1%;
    }
    .drop_button[b-xgfomfwmln] {
        padding: 2% 0;
    }
    .margin_button[b-xgfomfwmln] {
        margin: 3% 0;
    }
    .padding_button[b-xgfomfwmln] {
        padding: 2%;
    }
}

@media (max-width: 46.25em) {

    .padding_title[b-xgfomfwmln] {
        padding: 2% 0;
    }
    .drop_button[b-xgfomfwmln]{
        padding:4% 0;
    }
    .margin_button[b-xgfomfwmln] {
        margin: 6% 0;
    }
    .padding_button[b-xgfomfwmln] {
        padding: 4%;
    }
}

.border-information[b-xgfomfwmln] {
    border: 1px solid #5F75B7;
    border-radius: 20px;
    /*margin-top: 32px;*/
    width: 372px;
    height: 694px;
}

.CheckboxAction[b-xgfomfwmln] {
    height: 0;
    width: 0;
    visibility: hidden;
    display: none !important;
}

.labelAction[b-xgfomfwmln] {
    cursor: pointer;
    width: 50px;
    height: 20px;
    background: #fff;
    display: block;
    border: 0.5px solid #5F75B7;
    border-radius: 100px;
    position: relative;
}

    .labelAction[b-xgfomfwmln]:after {
        content: '';
        position: absolute;
        top: 5%;
        left: 5%;
        bottom: 10%;
        width: 16px;
        height: 16px;
        background: linear-gradient(180deg, #5F75B7 0%, #21409A 0.01%, #899CD3 100%);
        border-radius: 100px;
        transition: 0.3s;
    }

.CheckboxAction:checked + .labelAction[b-xgfomfwmln] {
    background: linear-gradient(180deg, #5F75B7 0%, #899CD3 100%);
    border: none;
}

    .CheckboxAction:checked + .labelAction[b-xgfomfwmln]:after {
        top: 10%;
        left: calc(100% - 5%);
        transform: translateX(-100%);
        background: #fff;
    }

.bor[b-xgfomfwmln] {
    border: 1px solid #CED4D8 !important;
    height: 40px;
    border-radius: 2px;
    display: flex;
    align-items: center;
}

/*
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input[type=checkbox] {
        --active: #275EFE;
        --active-inner: #fff;
        --focus: 2px rgba(39, 94, 254, .3);
        --border: #BBC1E1;
        --border-hover: #275EFE;
        --background: #fff;
        --disabled: #F6F8FF;
        --disabled-inner: #E1E6F9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

        input[type=checkbox]:after {
            content: "";
            display: block;
            left: 0;
            top: 0;
            position: absolute;
            transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
        }

        input[type=checkbox]:checked {
            --b: var(--active);
            --bc: var(--active);
            --d-o: .3s;
            --d-t: .6s;
            --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
        }

        input[type=checkbox]:disabled {
            --b: var(--disabled);
            cursor: not-allowed;
            opacity: 0.9;
        }

            input[type=checkbox]:disabled:checked {
                --b: var(--disabled-inner);
                --bc: var(--border);
            }

            input[type=checkbox]:disabled + label {
                cursor: not-allowed;
            }

        input[type=checkbox]:hover:not(:checked):not(:disabled) {
            --bc: var(--border-hover);
        }

        input[type=checkbox]:focus {
            box-shadow: 0 0 0 var(--focus);
        }

        input[type=checkbox]:not(.switch) {
            width: 21px;
        }

            input[type=checkbox]:not(.switch):after {
                opacity: var(--o, 0);
            }

            input[type=checkbox]:not(.switch):checked {
                --o: 1;
            }

        input[type=checkbox] + label {
            font-size: 14px;
            line-height: 21px;
            display: inline-block;
            vertical-align: top;
            cursor: pointer;
            margin-left: 4px;
        }

        input[type=checkbox]:not(.switch) {
            border-radius: 7px;
        }

            input[type=checkbox]:not(.switch):after {
                width: 5px;
                height: 9px;
                border: 2px solid var(--active-inner);
                border-top: 0;
                border-left: 0;
                left: 7px;
                top: 4px;
                transform: rotate(var(--r, 20deg));
            }

            input[type=checkbox]:not(.switch):checked {
                --r: 43deg;
            }

        input[type=checkbox].switch {
            width: 38px;
            border-radius: 11px;
        }

            input[type=checkbox].switch:after {
                left: 2px;
                top: 2px;
                border-radius: 50%;
                width: 15px;
                height: 15px;
                background: var(--ab, var(--border));
                transform: translateX(var(--x, 0%));
            }

            input[type=checkbox].switch:checked {
                --ab: var(--active-inner);
                --x: 100%;
            }

            input[type=checkbox].switch:disabled:not(:checked):after {
                opacity: 0.6;
            }
}
*/
/* /Employees/ComponentDetailEmps/EmployessCV.razor.rz.scp.css */
.boxCv[b-mf25w2uwwp] {
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.boxOne[b-mf25w2uwwp] {
    width: 100%;
    height: 20%;
    background-color: #F79420;
}

.boxTwo[b-mf25w2uwwp] {
    width: 100%;
    height: 80%;
    background-color: #010719
}

.backgroudCv[b-mf25w2uwwp] {
    height: 80%;
    background-image: url('../../images/GroupCV.svg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.backgroudUnI[b-mf25w2uwwp] {
    height: 7%;
    background-image: url('../../images/footerU&I2.svg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.boxinfo[b-mf25w2uwwp]{
    padding: 30px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}

.boxinfo > .boxleft[b-mf25w2uwwp] {
    border-right: 1px solid #d8d8d8;
    overflow: hidden;
    background: #fff;
    align-content: flex-start;
    justify-content: center;
    padding-top: 15px;
    position: relative
}

.boxinfo > .boxleft[b-mf25w2uwwp]:after {
    content: "";
    width: 100%;
    height: 70px;
    background-image: url(../../images/footerU&I2.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
}

.boxinfo > .boxleft > .leftLogo[b-mf25w2uwwp] {
    height: 5%;
    margin: 5% 0;
    background-image: url('../../images/logo.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.boxinfo > .boxleft > .leftAvatar[b-mf25w2uwwp] {
    width: 200px;
    height: 200px;
    border: 1px solid #010719;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    padding: 2%;
}

.boxinfo > .boxleft > .leftAvatar > .avatarUser[b-mf25w2uwwp] {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 50%;
}

.boxinfo > .boxright[b-mf25w2uwwp] {
    padding-left: 2%;
    display: inline
}

.spanInfoCV[b-mf25w2uwwp] {
    color: black;
    font-weight: normal;
}

.spanInfoCV.InfoCV[b-mf25w2uwwp] {
    margin-left: 5px;
}

.divBox[b-mf25w2uwwp]{
    margin-top: 1%;
}

.labeCV[b-mf25w2uwwp] {
    color: #29419c3;
}

.style-1[b-mf25w2uwwp]::-webkit-scrollbar-track {
    margin: 20px 20px;
}

.list-item[b-mf25w2uwwp] {
margin-bottom: 10px
}

.company-header[b-mf25w2uwwp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.company-name h2[b-mf25w2uwwp] {
    font-size: 20px;
    margin: 0;
    color: #17479e;
    font-weight: bold;
    text-transform: uppercase;
}

.company-name .slogan[b-mf25w2uwwp] {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.company-info i[b-mf25w2uwwp] {
    color: #17479e;
    margin-right: 6px;
}

.company-logo img[b-mf25w2uwwp] {
    max-height: 80px;
    object-fit: contain;
}

#avatarImgForPDF[b-mf25w2uwwp] {
    z-index: 1;
    position: absolute;
    width: 150px;
    height: 150px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.file-drop-area[b-mf25w2uwwp] {
    display: flex;
    width: 100%;
}

.st0[b-mf25w2uwwp] {
    fill: #FFFFFF;
}

.st1[b-mf25w2uwwp] {
    fill: #E8E8E8;
}

.st2[b-mf25w2uwwp] {
    fill: #010719;
}

.st3[b-mf25w2uwwp] {
    fill: none;
    stroke: #231F20;
    stroke-miterlimit: 10;
}

.st4[b-mf25w2uwwp] {
    fill: #EDEDED;
}

.st5[b-mf25w2uwwp] {
    opacity: 0.75;
    fill: #F7941D;
    enable-background: new;
}

.st6[b-mf25w2uwwp] {
    opacity: 0.3;
    fill: #F7941D;
    enable-background: new;
}

.st7[b-mf25w2uwwp] {
    fill: #F7941D;
}

.st8[b-mf25w2uwwp] {
    opacity: 0.4;
    fill: #010719;
    enable-background: new;
}

.st9[b-mf25w2uwwp] {
    fill: #D8D8D8;
}

.infoCV-row[b-mf25w2uwwp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.infoCV-item[b-mf25w2uwwp] {
    display: grid;
    grid-template-columns: 35% 1fr;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-start;
}

.infoCV-label[b-mf25w2uwwp] {
    font-weight: bold;
    color: #29419c;
}

.infoCV-content[b-mf25w2uwwp] {
    color: #222;
}

@media screen {
    .A4[b-mf25w2uwwp] {
        width: 210mm;
        min-height: 297mm;
        margin: 0px auto;
        background: white;
        box-shadow: 0 0 5px rgba(0,0,0,0.3);
        page-break-inside: avoid;
    }
}

@media print {
    html[b-mf25w2uwwp], body[b-mf25w2uwwp] {
        width: 210mm;
        height: 297mm;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .A4[b-mf25w2uwwp] {
        page-break-inside: avoid;
        break-inside: avoid;
        background-color: #fff;
    }

    .pdf-view[b-mf25w2uwwp] {
        display: block;
        width: 150px;
        height: 150px;
        border-radius: 50%;
    }

    #avatarImgForPDF[b-mf25w2uwwp] {
        display: block; /* Hiện khi in hoặc xuất PDF */
    }
}

.image-Avatar[b-mf25w2uwwp] {
    position: relative;
    width: 100%;
    height: auto;
}
/* /Employees/Component/HappyBirthdayEmployee.razor.rz.scp.css */
body[b-api0q0r1nq] {
}

.backgroundBodyLeft[b-api0q0r1nq] {
    height: 100%;
    background-image: url('../../images/Layer_1-1.svg');
    background-size: 15%;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: flex-end;
}

.backgroundRightHeader[b-api0q0r1nq] {
    height: 20%;
    background-image: url('../../images/Layer_1.svg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.backdroundBottom[b-api0q0r1nq] {
    height: 30%;
    background-image: url('../../images/Frame.svg');
    background-size: cover;
    background-repeat: no-repeat;
    justify-content: flex-end;
}

h5.nomar[b-api0q0r1nq] {
    margin: 0;
}


/* /Employees/ShoworganizationalStructure.razor.rz.scp.css */
*[b-0w0gp58zr6] {
    margin: 0;
    padding: 0;
}

.tree ul[b-0w0gp58zr6] {
    padding-top: 20px;
    position: relative;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li[b-0w0gp58zr6] {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

    .tree li[b-0w0gp58zr6]::before, .tree li[b-0w0gp58zr6]::after {
        content: '';
        position: absolute;
        top: 0;
        right: 50%;
        border-top: 1px solid #f7941d;
        width: 50%;
        height: 20px;
    }

    .tree li[b-0w0gp58zr6]::after {
        right: auto;
        left: 50%;
        border-left: 1px solid #f7941d;
    }

    .tree li:only-child[b-0w0gp58zr6]::after, .tree li:only-child[b-0w0gp58zr6]::before {
        display: none;
    }

    .tree li:only-child[b-0w0gp58zr6] {
        padding-top: 0;
    }

    .tree li:first-child[b-0w0gp58zr6]::before, .tree li:last-child[b-0w0gp58zr6]::after {
        border: 0 none;
    }

    .tree li:last-child[b-0w0gp58zr6]::before {
        border-right: 1px solid #f7941d;
        border-radius: 0 5px 0 0;
        -webkit-border-radius: 0 5px 0 0;
        -moz-border-radius: 0 5px 0 0;
    }

    .tree li:first-child[b-0w0gp58zr6]::after {
        border-radius: 5px 0 0 0;
        -webkit-border-radius: 5px 0 0 0;
        -moz-border-radius: 5px 0 0 0;
    }

.tree ul ul[b-0w0gp58zr6]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1px solid #f7941d;
    width: 0;
    height: 20px;
}

.tree li label[b-0w0gp58zr6] {
    /*width: 160px; 
    height: 70px;*/
    width: 140px;
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: white;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

    .tree li label:hover[b-0w0gp58zr6], .tree li a:hover + ul li label[b-0w0gp58zr6] {
        background: #fffefd;
        color: black;
        border: 1px solid #94a0b4;
    }
        /*Connector styles on hover*/
        .tree li label:hover + ul li[b-0w0gp58zr6]::after,
        .tree li label:hover + ul li[b-0w0gp58zr6]::before,
        .tree li label:hover + ul[b-0w0gp58zr6]::before,
        .tree li label:hover + ul ul[b-0w0gp58zr6]::before {
            border-color: #010719;
        }
.labelCS_2[b-0w0gp58zr6] {
    background: #21409a;
    font-weight: bold;
    box-shadow: 2px 2px #f7941d;
}

.labelCS_3[b-0w0gp58zr6] {
    background: #4D66AE;
    color: black;
    font-weight: bold;
    box-shadow: 2px 2px #f7941d;
}

.labelCS_4[b-0w0gp58zr6] {
    background: #7185BE;
    color: black;
    font-weight: bold;
    box-shadow: 2px 2px #f7941d;
}

.labelCS_5[b-0w0gp58zr6] {
    background: #8D9DCB;
    color: black;
    font-weight: bold;
    box-shadow: 2px 2px #f7941d;
}
.labelCS_6[b-0w0gp58zr6] {
    background: #B6C1DD;
    color: black;
    font-weight: bold;
    box-shadow: 2px 2px #f7941d;
}
/* /Pages/Dashboard/BirthDay.razor.rz.scp.css */
.fw-700[b-waz7g4pt24] {
    font-weight: 700;
}

.component[b-waz7g4pt24] {
    border: solid 1px #5f75b7;
    border-radius: 12px;
    padding: 15px;
    height: 100%;
    font-family: Inter;
}

.text-blue[b-waz7g4pt24] {
    color: #21409a;
}

.text-blue-gray[b-waz7g4pt24] {
    color: #222c4c
}

.text-orange[b-waz7g4pt24] {
    color: #F79420;
}

.text-danger[b-waz7g4pt24] {
    color: #F93232;
}

.text-custom[b-waz7g4pt24] {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.active-c[b-waz7g4pt24] {
    background: #21409a !important;
    color: #fff;
}

h-header[b-waz7g4pt24] {
}

.nav-1[b-waz7g4pt24] {
    cursor: pointer;
    border-radius: 10px 0px 0px 0px;
    border: 0.5px solid #5F75B7;
}
.nav-2[b-waz7g4pt24] {
    cursor: pointer;
    border-radius: 0px 10px 0px 0px;
    border: 0.5px solid #5F75B7;
    border-left:none;
}
.text-normal[b-waz7g4pt24] {
    color: #010719;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.h-content[b-waz7g4pt24] {
    border-left: 0.5px solid #5F75B7;
    border-right: 0.5px solid #5F75B7;
    border-bottom: 0.5px solid #5F75B7;
    border-radius: 0px 0px 10px 10px;
    min-height: 50%;
    align-items: center;
    display: flex;
}

.imageAvatar > .dxbl-modal-content[b-waz7g4pt24] {
    border-radius: unset !important;
    border: unset !important;
    background-color: transparent !important;
    box-shadow: unset !important;
}
/* /Pages/Dashboard/EmployeeByCS.razor.rz.scp.css */
.fw-700[b-5wug4lemd3] {
    font-weight: 700;
}

.component[b-5wug4lemd3] {
    border: solid 1px #5f75b7;
    border-radius: 12px;
    padding: 15px;
    height: 100%;
    font-family: Inter;
}

.text-blue[b-5wug4lemd3] {
    color: #21409a;
}

.text-blue-gray[b-5wug4lemd3] {
    color: #222c4c;
}

.text-orange[b-5wug4lemd3] {
    color: #F79420;
}

.text-danger[b-5wug4lemd3] {
    color: #F93232;
}

.progress[b-5wug4lemd3]
{
    padding:0 !important;
    border-radius:30px !important;
}
.progress-bar[b-5wug4lemd3] {
    background: linear-gradient(90deg, #31be50 0%, #ffffff 99.98%, #ddffee 99.99%, #17B05A 100%);
    border-radius: 30px !important;
    text-align: center;
    border: solid 1px;
}
.text-custom[b-5wug4lemd3] {
    color: #21409a;
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 14px;
    font-style: normal;
}
.text-header[b-5wug4lemd3] {
    color: #000;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}
/* /Pages/Dashboard/EmployeeStatus.razor.rz.scp.css */
.fw-700[b-mkddjp3ly2] {
    font-weight: 700;
}

.component[b-mkddjp3ly2] {
    border: solid 1px #5f75b7;
    border-radius: 12px;
    padding: 15px;
    height: 100%;
    font-family: Inter;
}

.text-blue[b-mkddjp3ly2] {
    color: #21409a;
}

.text-blue-gray[b-mkddjp3ly2] {
    color: #222c4c;
}

.text-orange[b-mkddjp3ly2] {
    color: #F79420;
}

.text-danger[b-mkddjp3ly2] {
    color: #F93232;
}

.h-header[b-mkddjp3ly2] {
    height: auto;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px 4px 0 0;
    padding: 4px 2px;
    font-weight: 400 
}
.h-content[b-mkddjp3ly2] {
    justify-content: center;
    align-items: center;
    display: flex;
    height: 65%;
    flex-direction: column;
}

.working[b-mkddjp3ly2] {
    background-color: #378B2E;
    color: white !important;
}
.off[b-mkddjp3ly2] {
    background-color: #D33A2A;
    color: white !important;
}
.online[b-mkddjp3ly2] {
    background-color: #010719;
    color: white !important;
}
.holiday[b-mkddjp3ly2] {
    background-color: #F79420;
    color: white !important;
}

.custom-button[b-mkddjp3ly2] {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    top: 5rem;
    right: 2rem;
}

.h-20[b-mkddjp3ly2] {
    height: 20% !important;
}
/* /Pages/Dashboard/HappinessIndex.razor.rz.scp.css */
.fw-700[b-5z056z4jee] {
    font-weight: 700;
}

.component[b-5z056z4jee] {
    border: solid 1px #5f75b7;
    border-radius: 12px;
    padding: 15px;
    height: 100%;
    font-family: Inter;
}

.text-blue[b-5z056z4jee] {
    color: #21409a !important;
}

.text-blue-gray[b-5z056z4jee] {
    color: #222c4c;
}

.text-orange[b-5z056z4jee] {
    color: #F79420;
}

.text-danger[b-5z056z4jee] {
    color: #F93232;
}

.tooltipcustom[b-5z056z4jee] {
     position: relative;
    cursor: pointer;
    color: #F79420 !important;
}

    .tooltipcustom[b-5z056z4jee]:before {
        content: attr(data-text);
        position: absolute;
        top: 100%;
        left: -180%;
        width: max-content !important;
        height: max-content !important;
        max-width: 500px;
        border: 1px solid #010719;
        min-height: 19px;
        padding-left: 5px;
        padding-right: 5px;
        color: #010719 !important;
        border-radius: 10px;
        padding:3px;
        background: #ffffff;
        align-items: center;
        display: none;
        font-size: 0.9rem !important;
        overflow: visible !important;
    }

    .tooltipcustom:hover[b-5z056z4jee]:before {
        display: flex;
        z-index: 30;
    }

.parent[b-5z056z4jee]
{
    min-height:110px;
}
@media (max-width: 1850px) {
    .tooltipcustom[b-5z056z4jee]:before {
        max-width: 450px;
    }
}
@media (max-width: 1850px) {
    .tooltipcustom[b-5z056z4jee]:before {
        max-width: 450px;
    }
}
@media (max-width: 1700px) {
    .tooltipcustom[b-5z056z4jee]:before {
        max-width: 400px;
    }
}
@media (max-width: 1550px) {
    .tooltipcustom[b-5z056z4jee]:before {
        max-width: 350px;
    }
}
@media (max-width: 1400px) {
    .tooltipcustom[b-5z056z4jee]:before {
        max-width: 300px;
    }
}
@media (max-width: 1400px) {
    .tooltipcustom[b-5z056z4jee]:before {
        max-width: 300px;
    }
}
/* /Pages/Dashboard/Post.razor.rz.scp.css */
.fw-700[b-wcufho5897] {
    font-weight: 700;
}

.component[b-wcufho5897] {
    border: solid 1px #5f75b7;
    border-radius: 12px;
    padding: 15px;
    height: 100%;
    font-family: Inter;
}

.text-blue[b-wcufho5897] {
    color: #21409a;
}

.text-blue-gray[b-wcufho5897] {
    color: #222c4c;
}

.text-orange[b-wcufho5897] {
    color: #F79420;
}

.text-danger[b-wcufho5897] {
    color: #F93232;
}

.text-time[b-wcufho5897] {
    color: #C6C6C5;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.title-post-new[b-wcufho5897] {
    display: -webkit-inline-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color:black !important;
}


.carousel-custom .carousel-indicators[b-wcufho5897] {
    align-items: center;
    position: static;
    z-index: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .carousel-custom .carousel-indicators li[b-wcufho5897] {
        transform: none;
        opacity: 1;
    }

        .carousel-custom .carousel-indicators li.active[b-wcufho5897] {
            transform: none;
            opacity: 1;
        }

    .carousel-custom .carousel-indicators.carousel-indicators-dots li[b-wcufho5897] {
        border-radius: 0;
        background-color: transparent;
        height: 13px;
        width: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

        .carousel-custom .carousel-indicators.carousel-indicators-dots li[b-wcufho5897]:after {
            display: inline-block;
            content: " ";
            border-radius: 50%;
            transition: all 0.3s ease;
            background-color: #eff2f5;
            height: 9px;
            width: 9px;
        }

        .carousel-custom .carousel-indicators.carousel-indicators-dots li.active[b-wcufho5897] {
            background-color: transparent;
        }

            .carousel-custom .carousel-indicators.carousel-indicators-dots li.active[b-wcufho5897]:after {
                transition: all 0.3s ease;
                height: 13px;
                width: 13px;
                background-color: #474761;
            }

    .carousel-custom .carousel-indicators.carousel-indicators-bullet li[b-wcufho5897] {
        transition: all 0.3s ease;
        background-color: transparent;
        border-radius: 6px;
        height: 6px;
        width: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

        .carousel-custom .carousel-indicators.carousel-indicators-bullet li[b-wcufho5897]:after {
            display: inline-block;
            content: " ";
            transition: all 0.3s ease;
            background-color: #B5B5C3;
            border-radius: 6px;
            height: 6px;
            width: 6px;
        }

        .carousel-custom .carousel-indicators.carousel-indicators-bullet li.active[b-wcufho5897] {
            transition: all 0.3s ease;
            background-color: transparent;
            height: 6px;
            width: 16px;
        }

            .carousel-custom .carousel-indicators.carousel-indicators-bullet li.active[b-wcufho5897]:after {
                transition: all 0.3s ease;
                height: 6px;
                width: 16px;
                background-color: #7E8299;
            }

.carousel-custom .carousel-indicators-active-white li.active[b-wcufho5897]:after {
    background-color: #ffffff !important;
}

.carousel-custom .carousel-indicators-active-light li.active[b-wcufho5897]:after {
    background-color: #f5f8fa !important;
}

.carousel-custom .carousel-indicators-active-primary li.active[b-wcufho5897]:after {
    background-color: #009ef7 !important;
}

.carousel-custom .carousel-indicators-active-secondary li.active[b-wcufho5897]:after {
    background-color: #E4E6EF !important;
}

.carousel-custom .carousel-indicators-active-success li.active[b-wcufho5897]:after {
    background-color: #50cd89 !important;
}

.carousel-custom .carousel-indicators-active-info li.active[b-wcufho5897]:after {
    background-color: #7239ea !important;
}

.carousel-custom .carousel-indicators-active-warning li.active[b-wcufho5897]:after {
    background-color: #ffc700 !important;
}

.carousel-custom .carousel-indicators-active-danger li.active[b-wcufho5897]:after {
    background-color: #f1416c !important;
}

.carousel-custom .carousel-indicators-active-dark li.active[b-wcufho5897]:after {
    background-color: #181C32 !important;
}

.carousel-custom.carousel-stretch[b-wcufho5897] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .carousel-custom.carousel-stretch .carousel-inner[b-wcufho5897] {
        flex-grow: 1;
    }

    .carousel-custom.carousel-stretch .carousel-item[b-wcufho5897] {
        height: 100%;
    }

    .carousel-custom.carousel-stretch .carousel-wrapper[b-wcufho5897] {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
/* /Pages/Dashboard/Welcome.razor.rz.scp.css */
.fw-700[b-gksc9wympg] {
    font-weight: 700;
}
.component[b-gksc9wympg] {
    border: solid 1px #5f75b7;
    border-radius: 12px;
    padding: 15px;
    height: 100%;
    font-family: Inter;
}
.text-blue[b-gksc9wympg] {
    color: #21409a;
}
.text-blue-gray[b-gksc9wympg] {
    color: #222c4c;
}
.text-orange[b-gksc9wympg] {
    color: #F79420;
}
.text-danger[b-gksc9wympg] {
    color: #F93232;
}

.title-post-new[b-gksc9wympg] {
    display: -webkit-inline-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 33px;
}
/* /Pages/Evaluation/EmployeeDetail/Individual.razor.rz.scp.css */
.draw-border[b-p4dd1l31a2] {
    box-shadow: inset 0 0 0 4px #58afd1;
    color: #58afd1;
    transition: color 0.25s 0.0833333333s;
    position: relative;
}

    .draw-border[b-p4dd1l31a2]::before, .draw-border[b-p4dd1l31a2]::after {
        border: 0 solid transparent;
        box-sizing: border-box;
        content: "";
        pointer-events: none;
        position: absolute;
        width: 0;
        height: 0;
        bottom: 0;
        right: 0;
    }

    .draw-border[b-p4dd1l31a2]::before {
        border-bottom-width: 4px;
        border-left-width: 4px;
    }

    .draw-border[b-p4dd1l31a2]::after {
        border-top-width: 4px;
        border-right-width: 4px;
    }

    .draw-border:hover[b-p4dd1l31a2] {
        color: #ffe593;
    }

        .draw-border:hover[b-p4dd1l31a2]::before, .draw-border:hover[b-p4dd1l31a2]::after {
            border-color: #ffe593;
            transition: border-color 0s, width 0.25s, height 0.25s;
            width: 100%;
            height: 100%;
        }

        .draw-border:hover[b-p4dd1l31a2]::before {
            transition-delay: 0s, 0s, 0.25s;
        }

        .draw-border:hover[b-p4dd1l31a2]::after {
            transition-delay: 0s, 0.25s, 0s;
        }

.btnSend[b-p4dd1l31a2] {
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1.5;
    font: 700 1.2rem "Roboto Slab", sans-serif;
    padding: 1em 2em;
    letter-spacing: 0.05rem;
}

    .btnSend:focus[b-p4dd1l31a2] {
        outline: 2px dotted #55d7dc;
    }
/* /Pages/Evaluation/EmployeeDetail/Popup/EmployeeEvaluations.razor.rz.scp.css */
.myHeaderTable[b-e4amya92mx] {
    color: white;
    text-align: center;
    background-color: #4169e1;
    vertical-align: middle;
}
    .myTable td:first-child[b-e4amya92mx], .myHeaderTable th:first-child[b-e4amya92mx], .myTable tr:first-child[b-e4amya92mx] {
        padding-left: 2px;
    }

.myTooltip[b-e4amya92mx] {
    position: relative;
}

.myTable textarea[b-e4amya92mx]{
    width: 300px;
    height: 150px;
}

    .myTooltip[b-e4amya92mx]:after,
    .myTooltip[b-e4amya92mx]:before {
        opacity: 0;
        pointer-events: none;
        bottom: 100%;
        left: 50%;
        position: absolute;
        z-index: 10;
        transform: translate(-50%, 10px);
        transform-origin: top;
        transition: all 0.18s ease-out 0.18s;
    }

    .myTooltip[b-e4amya92mx]:after {
        background-color: #f5f5f5;
        box-shadow: 0 0 3px #ddd;
        content: attr(data-tooltip);
        padding: 10px;
        white-space: nowrap;
        margin-bottom: 11px;
    }

    .myTooltip[b-e4amya92mx]:before {
        width: 0;
        height: 0;
        content: "";
        margin-bottom: 6px;
    }

    .myTooltip:hover[b-e4amya92mx]:before,
    .myTooltip:hover[b-e4amya92mx]:after {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

[data-tooltip-pos="up"][b-e4amya92mx]:before {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #f5f5f5;
    margin-bottom: 6px;
}

[data-tooltip-pos="down"][b-e4amya92mx]:before {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #f5f5f5;
    margin-top: 6px;
}

[data-tooltip-pos="right"][b-e4amya92mx]:before {
    border-top: 6px solid transparent;
    border-right: 6px solid #f5f5f5;
    border-bottom: 6px solid transparent;
    margin-left: 6px;
}

[data-tooltip-pos="left"][b-e4amya92mx]:before {
    border-top: 6px solid transparent;
    border-left: 6px solid #f5f5f5;
    border-bottom: 6px solid transparent;
    margin-right: 6px;
}

[data-tooltip-pos="down"][b-e4amya92mx]:before,
[data-tooltip-pos="down"][b-e4amya92mx]:after {
    bottom: auto;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -10px);
}

[data-tooltip-pos="down"][b-e4amya92mx]:after {
    margin-top: 11px;
}

[data-tooltip-pos="down"]:hover[b-e4amya92mx]:before,
[data-tooltip-pos="down"]:hover[b-e4amya92mx]:after {
    transform: translate(-50%, 0);
}

[data-tooltip-pos="left"][b-e4amya92mx]:before,
[data-tooltip-pos="left"][b-e4amya92mx]:after {
    bottom: auto;
    left: auto;
    right: 100%;
    top: 50%;
    transform: translate(10px, -50%);
}

[data-tooltip-pos="left"][b-e4amya92mx]:after {
    margin-right: 11px;
}

[data-tooltip-pos="left"]:hover[b-e4amya92mx]:before,
[data-tooltip-pos="left"]:hover[b-e4amya92mx]:after {
    transform: translate(0, -50%);
}

[data-tooltip-pos="right"][b-e4amya92mx]:before,
[data-tooltip-pos="right"][b-e4amya92mx]:after {
    bottom: auto;
    left: 100%;
    top: 50%;
    transform: translate(-10px, -50%);
}

[data-tooltip-pos="right"][b-e4amya92mx]:after {
    margin-left: 11px;
}

[data-tooltip-pos="right"]:hover[b-e4amya92mx]:before,
[data-tooltip-pos="right"]:hover[b-e4amya92mx]:after {
    transform: translate(0, -50%);
}

[data-tooltip-length][b-e4amya92mx]:after {
    white-space: normal;
}

[data-tooltip-length="small"][b-e4amya92mx]:after {
    width: 80px;
}

[data-tooltip-length="medium"][b-e4amya92mx]:after {
    width: 150px;
}

[data-tooltip-length="large"][b-e4amya92mx]:after {
    width: 260px;
}

[data-tooltip-length="fit"][b-e4amya92mx]:after {
    width: 100%;
}
/* /Pages/Evaluation/EmployeeDetail/Popup/EmployeeGrade.razor.rz.scp.css */
.myHeaderTable[b-ak18b3whot] {
    color: white;
    text-align: center;
    background-color: #4169e1;
    vertical-align: middle;
}
/* /Pages/Evaluation/EmployeeDetail/Popup/EmployeeInfo.razor.rz.scp.css */
:root[b-k7ck7d9scd] {
    --accent-color: #6200ee;
}


.form-container[b-k7ck7d9scd] {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
}

.form[b-k7ck7d9scd] {
    padding: 3rem;
    /*display: flex;
    flex-direction: column;
    gap: 2rem;*/
    width: 95%;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.5rem;
    box-shadow: 0 0 8px 0 rgb(0 0 0 / 8%), 0 0 15px 0 rgb(0 0 0 / 2%), 0 0 20px 4px rgb(0 0 0 / 6%);
}

.input-container[b-k7ck7d9scd] {
    background-color: #f5f5f5;
    position: relative;
    border-radius: 4px 4px 0 0;
    height: 56px;
    transition: background-color 500ms;
}

    .input-container:hover[b-k7ck7d9scd] {
        background-color: #ececec;
    }

    .input-container:focus-within[b-k7ck7d9scd] {
        background-color: #dcdcdc;
    }

label[b-k7ck7d9scd] {
    font-size:larger;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    color: rgba(0, 0, 0, 0.5);
    transform-origin: left top;
    user-select: none;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1), top 500ms;
}

input[b-k7ck7d9scd] {
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    caret-color: var(--accent-color);
    border: 1px solid transparent;
    /*border-bottom-color: rgba(0, 0, 0, 0.42);*/
    border-bottom-color: #4169e1;
    color: rgba(0, 0, 0, 0.87);
    transition: border 500ms;
    padding: 20px 16px 6px;
    font-size: 1rem;
}

input:focus[b-k7ck7d9scd] {
    outline: none;
    border-bottom-width: 2px;
    border-bottom-color: var(--accent-color);
}

input:focus + label[b-k7ck7d9scd] {
    color: var(--accent-color);
}

input:focus + label[b-k7ck7d9scd],
input.is-valid + label[b-k7ck7d9scd] {
    transform: translateY(-100%) scale(0.75);
}

/* Image Circle */
.myCircle figure[b-k7ck7d9scd] {
    position: relative;
}

    .myCircle figure[b-k7ck7d9scd]::before {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        display: block;
        content: '';
        width: 0;
        height: 0;
        background: rgba(255,255,255,.2);
        border-radius: 100%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    .myCircle figure:hover[b-k7ck7d9scd]::before {
        -webkit-animation: circle .75s;
        animation: circle-b-k7ck7d9scd .75s;
    }

@-webkit-keyframes circle {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

@keyframes circle-b-k7ck7d9scd {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}
/* /Pages/Evaluation/EmployeeDetail/Popup/Propose.razor.rz.scp.css */
:root[b-82kygrbmkh] {
    --accent-color: #6200ee;
}

.activeDiv[b-82kygrbmkh] {
    margin-top: 1rem !important;
    border: 2px solid #00bfff !important; /* Viền màu xanh neon */
    border-radius: 8px !important;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.5), /* Outer glow */
    0 0 20px rgba(0, 191, 255, 0.3), /* Mid-level glow */
    0 0 30px rgba(0, 191, 255, 0.2) !important; /* Inner glow */
}

.form-container[b-82kygrbmkh] {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
}

.form[b-82kygrbmkh] {
    padding: 3rem;
    width: 95%;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.5rem;
    box-shadow: 0 0 8px 0 rgb(0 0 0 / 8%), 0 0 15px 0 rgb(0 0 0 / 2%), 0 0 20px 4px rgb(0 0 0 / 6%);
}

.input-container[b-82kygrbmkh] {
    background-color: #f5f5f5;
    position: relative;
    border-radius: 4px 4px 0 0;
    height: 56px;
    transition: background-color 500ms;
}

    .input-container:hover[b-82kygrbmkh] {
        background-color: #ececec;
    }

    .input-container:focus-within[b-82kygrbmkh] {
        background-color: #dcdcdc;
    }

.label[b-82kygrbmkh] {
    font-size: larger;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    color: rgba(0, 0, 0, 0.5);
    transform-origin: left top;
    user-select: none;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1), top 500ms;
}

.myInput[b-82kygrbmkh] {
    /*text-transform: uppercase;*/
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    caret-color: var(--accent-color);
    border: 1px solid transparent;
    border-bottom-color: #4169e1;
    color: rgba(0, 0, 0, 0.87);
    transition: border 500ms;
    padding: 20px 16px 6px;
    font-size: 1rem;
}

    .myInput:focus[b-82kygrbmkh] {
        outline: none;
        border-bottom-width: 2px;
        border-bottom-color: var(--accent-color);
    }

        .myInput:focus + .label[b-82kygrbmkh] {
            color: var(--accent-color);
        }

        .myInput:focus + .label[b-82kygrbmkh],
        .myInput.is-valid + .label[b-82kygrbmkh] {
            transform: translateY(-100%) scale(0.75);
        }

.form-check-input.is-valid ~ .form-check-label[b-82kygrbmkh], .was-validated .form-check-input:valid ~ .form-check-label[b-82kygrbmkh]{color: black !important;}
.form-check-input:checked[b-82kygrbmkh] {
    background-color: #21409a !important;
    border-color: #21409a !important;
}
.form-check-input.is-valid[b-82kygrbmkh], .was-validated .form-check-input:valid[b-82kygrbmkh] {
    border-color: lightgray;
}
/* /Pages/Evaluation/EmployeeDetail/Todolist.razor.rz.scp.css */
.draw-border[b-2ony7sotdr] {
    box-shadow: inset 0 0 0 4px #58afd1;
    color: #58afd1;
    transition: color 0.25s 0.0833333333s;
    position: relative;
}

    .draw-border[b-2ony7sotdr]::before, .draw-border[b-2ony7sotdr]::after {
        border: 0 solid transparent;
        box-sizing: border-box;
        content: "";
        pointer-events: none;
        position: absolute;
        width: 0;
        height: 0;
        bottom: 0;
        right: 0;
    }

    .draw-border[b-2ony7sotdr]::before {
        border-bottom-width: 4px;
        border-left-width: 4px;
    }

    .draw-border[b-2ony7sotdr]::after {
        border-top-width: 4px;
        border-right-width: 4px;
    }

    .draw-border:hover[b-2ony7sotdr] {
        color: #ffe593;
    }

        .draw-border:hover[b-2ony7sotdr]::before, .draw-border:hover[b-2ony7sotdr]::after {
            border-color: #ffe593;
            transition: border-color 0s, width 0.25s, height 0.25s;
            width: 100%;
            height: 100%;
        }

        .draw-border:hover[b-2ony7sotdr]::before {
            transition-delay: 0s, 0s, 0.25s;
        }

        .draw-border:hover[b-2ony7sotdr]::after {
            transition-delay: 0s, 0.25s, 0s;
        }

.btnSend[b-2ony7sotdr] {
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1.5;
    font: 700 1.2rem "Roboto Slab", sans-serif;
    padding: 1em 2em;
    letter-spacing: 0.05rem;
}

    .btnSend:focus[b-2ony7sotdr] {
        outline: 2px dotted #55d7dc;
    }
/* /Pages/Evaluation/Period/Index.razor.rz.scp.css */
#table-wrapper[b-ncaa5i2oxp] {
    position: relative;
}

#table-scroll[b-ncaa5i2oxp] {
    height: 700px;
    overflow: auto;
    margin-top: 20px;
    padding-bottom: 150px;
}

#table-wrapper table[b-ncaa5i2oxp] {
    width: 100%;
}
    
#table-wrapper table thead th .text[b-ncaa5i2oxp] {
    position: absolute;
    top: -20px;
    z-index: 2;
    border: 1px solid #b8d4e4;
    background: #ccecfd;
    height: 20px;
    width: 60%;
}

#_searchName[b-ncaa5i2oxp] {
    margin-bottom: 10px;
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: white;
    background-image: url('https://www.w3schools.com/howto/searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 10px 20px 10px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

#_searchName:focus[b-ncaa5i2oxp] {
    width: 100%;
}

#fixedScrollDivInfo[b-ncaa5i2oxp] {
    position: fixed;
    top: 89px;
    height: 400px;
    /*background-color: #f0f0f0; */
    overflow-y: auto; /* Tạo thanh cuộn dọc */
}

/* Nội dung dài để tạo thanh cuộn */
.contentDivInfo[b-ncaa5i2oxp] {
    height: 500px;
}
/* /Pages/Evaluation/Test/TestDisplay.razor.rz.scp.css */
*[b-o357860mgf] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}

p[b-o357860mgf] {margin: 0%;}

body[b-o357860mgf] {
    height: 100vh;
    background-color: bisque;
    padding: 10px;
}

/* Options */

label.box[b-o357860mgf] {
    display: flex;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #ddd;
}

input[type="radio"]:checked ~ label[b-o357860mgf],
input[type="checkbox"]:checked ~ label[b-o357860mgf] {
	border-color: #8e498e;
}

input[type="radio"]:checked ~ label.box .circle[b-o357860mgf],
input[type="checkbox"]:checked ~ label.box .square[b-o357860mgf] {
    border: 6px solid #8e498e;
    background-color: #fff;
}


label.box:hover[b-o357860mgf] {
    background: #d5bbf7;
}

label.box .course[b-o357860mgf] {
    display: flex;
    align-items: center;
    width: 100%;
}

label.box .circle[b-o357860mgf] {
    height: 22px;
    width: 22px;
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid #ddd;
    display: inline-block;
}

label.box .square[b-o357860mgf] {
    height: 22px;
    width: 22px;
    margin-right: 15px;
    border: 2px solid #ddd;
    display: inline-block;
}

input[type="radio"][b-o357860mgf] {
    display: none;
}
input[type="checkbox"][b-o357860mgf] {
    display: none;
}

.btn.btn-primary[b-o357860mgf] {
    border-radius: 25px;
    margin-top: 20px;
}

@media (max-width: 450px) {
    .subject[b-o357860mgf] {
        font-size: 12px;
    }
}

/* Write Text */
#wrapper-text[b-o357860mgf] {
    width: 700px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    margin-bottom: 100px;
}
#text[b-o357860mgf] {
    width: 895px;
    overflow: hidden;
    background-color: #FFF;
    color: #222;
    font-family: Courier, monospace;
    font-weight: normal;
    font-size: 16px;
    resize: none;
    line-height: 40px;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 45px;
    padding-bottom: 34px;
    background-image: url(https://static.tumblr.com/maopbtg/E9Bmgtoht/lines.png), url(https://static.tumblr.com/maopbtg/nBUmgtogx/paper.png);
    /*background-repeat: repeat-y, repeat;*/
    -webkit-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 0px 2px 14px #000;
    box-shadow: 0px 2px 14px #000;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}
/* /Shared/ComponentUnI/TagPopup/TagPopup.razor.rz.scp.css */
.overlay[b-e9e6onetju] {
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.boxOverplay[b-e9e6onetju] {
    width: 100%;
    position: absolute;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
}

.popup[b-e9e6onetju] {
    z-index: 1001;
    background: #fff;
    border-radius: 12px;
    top: 10%;
    left: 15%;
    position: absolute;
    transition: all 0.5s ease-in-out;
}

    .popup .close[b-e9e6onetju] {
        position: absolute;
        top: 20px;
        right: 30px;
        /* transition: all 200ms; */
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
    }

        .popup .close:hover[b-e9e6onetju] {
            color: #06D85F;
        }
/* /Shared/ComponentUnI/TagUnI/TagDiv.razor.rz.scp.css */
.divlabel[b-r7g8tc1xad] {
    z-index: 1;
    background-color: transparent;
    height: 22px;
    position: absolute;
    top: -15px;
    left: 2%;
}

    .divlabel > .labelFirst[b-r7g8tc1xad] {
        background: #eff3ff;
        padding: 0 10px 0 0;
        margin: 0 0 0 4px;
        width: auto;
        color: #21409a;
        font-weight: bold;
        font-size: 13px;
    }

.divMargin[b-r7g8tc1xad]{
    margin: 0 1%;
}
/* /Shared/ComponentUnI/TagUnI/TagInput.razor.rz.scp.css */
.styleBase[b-qz9cv8u2eb] {
    /*
    height: 32px;*/
    font-size: 16px;
    font-weight:500;
    font-style: normal;
    line-height:12px;
}

.pos-first[b-qz9cv8u2eb] {
    position: relative;
}

.pos-next[b-qz9cv8u2eb] {
    position: absolute;
}

.hearderInput[b-qz9cv8u2eb] {
    z-index: 1;
    width: auto;
    left: 10%;
    top: -25%;
    background-color: white;
}

/*Input Text*/
/*.group {
    position: relative;
    margin-bottom: 5%;
}

input[type=text] {
    font-size: 16px;
    padding: 5% 3% 2%;
    display: block;
    border: none;
    border-bottom: 1px solid #757575;
    background-color: transparent;
}

    input[type=text]:focus {
        outline: none;
    }*/

/* textbox ======================================= */

/*.textbox-1 {
    color: #999;
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5%;
    top: 40%;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}*/


/* active state */
/*input[type=text]:focus ~ .textbox-1, input[type=text]:valid ~ .textbox-1 {
    top: -15%;
    font-size: 16px;
    font-weight: bold;
    color: black;
}

.textbox-2 {
    color: #999;
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5%;
    top: 35%;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

input[type=text]:focus ~ .textbox-2, input[type=text]:valid ~ .textbox-2 {
    top: -10%;
    font-size: 16px;
    font-weight: bold;
    color: black;
}*/

/* BOTTOM BARS ================================= */
/*.bar {
    position: relative;
    display: block;
}

    .bar:before, .bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background: #5264AE;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }

    .bar:before {
        left: 50%;
    }

    .bar:after {
        right: 50%;
    }*/

/* active state */
/*input[type=text]:focus ~ .bar:before, input[type=text]:focus ~ .bar:after {
    width: 50%;
}*/

/* /Shared/Header.razor.rz.scp.css */
.navbar.header-navbar[b-7fcoz4ozei] {
    flex-grow: 0;
    flex-wrap: nowrap;
    border: none;
    background-color: inherit;
    border-radius: 0;
    height: 60px;
    min-height: 60px;
    box-shadow: none !important;
    justify-content: flex-start;
    transition: 0.5s
}

.header-navbar .navbar-toggler[b-7fcoz4ozei] {
    outline: none;
    border-radius: 0;
    padding-left: .75rem;
    padding-right: .75rem;
    box-shadow: none;
    align-self: stretch;
}

.header-navbar .navbar-toggler .navbar-toggler-icon[b-7fcoz4ozei] {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    background-color: transparent !important;
    height: 2rem;
    width: 2rem;
}

.title[b-7fcoz4ozei] {
    font-size: 1.1rem;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media (max-width: 350px) {
    .title[b-7fcoz4ozei] {
        font-size: inherit;
    }
}


/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-1oi4508u3d] {
    height: 100%;
    overflow: hidden;
    background-color: inherit;
}
[b-1oi4508u3d] .page-layout,
[b-1oi4508u3d] .page-layout > .dx-gridlayout-root,
[b-1oi4508u3d] .layout-item {
    background-color: inherit;
}

[b-1oi4508u3d] .content {
    padding: 1.1rem 2rem 0 2rem;
    overflow: auto;
}

@media (max-width: 720px) {
    [b-1oi4508u3d] .page-layout > .dx-gridlayout-root {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

[b-1oi4508u3d] .fit-width {
    max-width: 100%;
}

[b-1oi4508u3d] .mw-1100 {
    max-width: 1100px;
}
/* /Shared/NavMenu.razor.rz.scp.css */
.sidebar[b-6y5jaif2d1] {
    width: 0;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 60px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    z-index: 100;
    transition: width 0.5s ease-in-out, opacity 0.3s ease;
    opacity: 0.8;
    display: inline;
}

.sidebar.expand[b-6y5jaif2d1] {
width: 260px;
opacity: 1;
}

/* Trạng thái ban đầu khi sidebar expand, các item chưa có hiệu ứng */
.sidebar li.dxbl-treeview-item[b-6y5jaif2d1] {
opacity: 0;
transform: translateX(-20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Khi có class .slide-in thì chạy animation */
.sidebar.expand li.dxbl-treeview-item.slide-in[b-6y5jaif2d1] {
    animation: slideIn-b-6y5jaif2d1 0.3s ease forwards;
}

/* Định nghĩa animation */
@keyframes slideIn-b-6y5jaif2d1 {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in[b-6y5jaif2d1] {
    animation: slideIn-b-6y5jaif2d1 0.3s ease forwards;
}

.collapse:not(.show)[b-6y5jaif2d1] {
    display: block;
}

[b-6y5jaif2d1] .app-sidebar {
    --dxbl-treeview-spacing-x: 0.5rem;
    --dxbl-treeview-spacing-y: 1rem;
}

    [b-6y5jaif2d1] .app-sidebar > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-treeview-items-container > .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container {
        --dxbl-treeview-font-weight: 600;
    }

    [b-6y5jaif2d1] .app-sidebar > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-treeview-items-container > .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-btn.dxbl-invisible {
        display: none;
    }

@media (max-width: 1199.98px) {
    [b-6y5jaif2d1] .app-sidebar {
        padding-bottom: 0;
    }
}