/*::view-transition-old(root) {
    animation-duration: 0.5s;
}
::view-transition-new(root) {
  animation-duration: 1s;
}*/

.loginLogo {
    text-align: center;
    margin-bottom: 0px;
    user-select: none;
    pointer-events: none;
    padding: 10px;
}

    .loginLogo img {
        width: 90%;
        height: auto;
        margin-top: 0px;
        border: 0px !important;
    }

.MainBody {
    height: calc(100svh - 50px);
    overflow: auto !important;
    background-color: #fff;
    overflow: hidden;
}

.pageLogin {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100svh;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: #000;
}

    .pageLogin:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url(../images/bginlaco.jpg);
        width: 100%;
        height: 100%;
        opacity: 0.5;
        z-index: -1;
        background-size: cover;
    }

.e-dialog.frmLogin .e-dlg-header,
.e-dialog.frmLogin .e-dlg-header i {
    color: #303F9F;
    font-weight: 700 !important;
}

.e-dialog.frmLogin.e-popup-open {
    border: 3px solid #F5F5F5 !important;
    opacity: 1;
}

    .e-dialog.frmLogin.e-popup-open:hover {
        opacity: 1;
    }

.e-dialog.frmIndex.e-popup-open {
    border: 3px solid #F5F5F5 !important;
    opacity: 1;
}

    .e-dialog.frmIndex.e-popup-open:hover {
        opacity: 1;
    }

.e-dialog.frmIndex .e-dlg-header-content,
.e-dialog.frmLogin .e-dlg-header-content {
}

.e-dialog.frmLogin .e-dlg-header,
.e-dialog.frmLogin .e-dlg-header i,
.e-dialog.frmIndex .e-dlg-header,
.e-dialog.frmIndex .e-dlg-header i {
    font-weight: 700 !important;
    color: #303F9F !important;
}


.e-dialog.frmLogin .e-dlg-header-content {
}

.panelLoginBody {
    position: relative;
}

    .panelLoginBody .panelLeft {
        user-select: none;
        pointer-events: none;
        margin-top: 2px;
        box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
        margin-bottom: 20px;
    }

    .panelLoginBody .panelRight {
        padding: 10px;
        padding-top: 0px;
    }

.txtloginTaiKhoan input,
.txtloginMatKhau input {
    font-weight: 500 !important;
    color: #C2185B !important;
}

.btnLogin {
    width: 95px !important;
    background-color: #3F51B5 !important;
    color: #fff !important;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px !important;
}

    .btnLogin.btnSentCV {
        width: 115px !important;
        margin-right: 10px !important;
    }

.btnBack {
    width: 90px !important;
    background-color: #00796B !important;
    color: #FFF !important;
    box-shadow: none !important;
}

.btnLostPassWord {
    width: 115px !important;
    background-color: #9E9E9E !important;
    color: #FFF !important;
    box-shadow: none !important;
}

.e-dialog .e-footer-content .e-btn.btnLogin:hover {
    color: #fff !important;
    background-color: #303F9F !important;
}

.e-dialog .e-footer-content .e-btn.btnBack:hover {
    color: #fff !important;
    background-color: #00695C !important;
}

.e-dialog .e-footer-content .e-btn.btnLostPassWord:hover {
    color: #fff !important;
    background-color: #757575 !important;
}


.e-dialog .e-footer-content .e-btn.btnLostPassWord:hover {
}

.btnLogin:hover,
.btnLogin:focus {
}

.e-dialog.frmLogin .e-dlg-content .DefaultPadding {
}

.homePage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: calc(100svh - 65px);
    position: absolute;
    z-index: 1;
    top: 65px;
    left: 0px;
    width: 100%;
    background-color: #000;
    opacity: 1;
}

    .homePage:after {
        content: "";
        display: block;
        position: absolute;
        top: 0px;
        left: 0;
        background-image: url(../images/bg.jpg);
        width: 100%;
        height: 100%;
        opacity: 1;
        z-index: -1;
        background-size: cover;
        content: "";
        display: block;
        position: absolute;
        top: 0px;
        left: 0;
        background-image: url(../images/bginlaco.jpg);
        width: 100%;
        height: 100%;
        opacity: 0.5 !important;
        z-index: -1;
        background-repeat: repeat;
    }

    .homePage.welcome::before {
    }

.welcomeBg {
    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    display: block;
    user-drag: none;
}

    .welcomeBg img {
        opacity: 0.65;
        border-radius: 5px;
        background-color: #fff;
        padding: 10px;
        width: 320px;
        height: auto;
        user-select: none;
        pointer-events: none;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        user-drag: none;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }

.breakHomePage {
}

.welcomeBg2 {
    margin-top: 20px;
    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    display: block;
    user-drag: none;
}

    .welcomeBg2 img {
        width: 300px;
        height: auto;
        user-select: none;
        pointer-events: none;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        user-drag: none;
    }

.waper_grid.gdvFix2 div.e-gridcontent tr.e-row td.e-rowcell:nth-child(1),
.waper_grid.gdvFix2 div.e-gridheader tr.e-columnheader th.e-headercell:nth-child(1) {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0px;
    z-index: 1;
    background-color: #fff;
    border-left: 0px !important;
    border-right: 0px solid #bdbdbd !important;
}

.waper_grid.gdvFix2 div.e-gridcontent tr.e-row td.e-rowcell:nth-child(2),
.waper_grid.gdvFix2 div.e-gridheader tr.e-columnheader th.e-headercell:nth-child(2) {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 85px;
    z-index: 1;
    background-color: #fff;
    border-left: 0px !important;
    border-right: 2px solid #4CAF50 !important;
}

.waper_grid.gdvInCrew.fullheight_grid .e-gridcontent .e-content.e-yscroll,
.waper_grid.gdvInCrew.fullheight_grid .sf-grid .e-frozencontent {
    border-bottom: 0px !important;
    height: -moz-calc(100svh - 206px) !important;
    height: -webkit-calc(100svh - 206px) !important;
    height: calc(100svh - 206px) !important;
}

.waper_grid.gdvInCrew.fullheight_grid .e-emptyrow td {
    position: absolute;
    width: 100%;
    background-color: #fff;
    height: -moz-calc(100svh - 255px) !important;
    height: -webkit-calc(100svh - 255px) !important;
    height: calc(100svh - 255px) !important;
    background-image: url('/images/no-results-found.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 286px 141px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    font-size: 0;
}

.colNgayCutOff {
    font-weight: 500;
    color: #B71C1C;
}

.colMaKhachHang {
    font-weight: 500;
    color: #303F9F;
}

.colTrangThaiKeHoachHangXuat {
    width: 100%;
}

    .colTrangThaiKeHoachHangXuat i,
    .colLoadingKeHoachHangXuat i {
        margin-right: 5px;
        margin-left: 5px;
        font-weight: 500 !important;
    }

    .colTrangThaiKeHoachHangXuat .dangxuly {
    }

    .colTrangThaiKeHoachHangXuat .dahuy,
    .colTrangThaiKeHoachHangXuat .dahuy i {
        color: #C2185B !important;
    }

    .colTrangThaiKeHoachHangXuat .daxuatkho,
    .colTrangThaiKeHoachHangXuat .daxuatkho i {
        color: #388E3C !important;
    }

    .colTrangThaiKeHoachHangXuat .loading,
    .colTrangThaiKeHoachHangXuat .loading i {
        color: #5D4037 !important;
    }

    .colTrangThaiKeHoachHangXuat .nhapkho,
    .colTrangThaiKeHoachHangXuat .nhapkho i {
        color: #5D4037 !important;
    }

    .colTrangThaiKeHoachHangXuat .capnhat,
    .colTrangThaiKeHoachHangXuat .capnhat i {
        color: #E64A19 !important;
    }

.colLoadingKeHoachHangXuat .dangxuly i,
.colLoadingKeHoachHangXuat .dangxuly {
    color: #F57C00 !important;
}

.trangthaidangxuly {
    background-color: #fafafa !important;
    color: #666 !important;
}

.trangthaidahuy {
    background-color: #EFEBE9 !important;
    color: #5D4037 !important;
}

.trangthaihoanthanh {
    background-color: #E8F5E9 !important;
    color: #388E3C !important;
}


.chuacopo {
}

.dacopo {
    background-color: #E8F5E9;
    color: #388E3C;
}

.colNKKH {
    font-weight: 500;
    color: #C2185B;
}

.colNKCH .subCH {
    margin-left: 3px;
    margin-right: 3px;
    color: #9E9E9E;
    display: inline-block;
}

.colNKCH {
    color: #303F9F;
}

.LinkTaiFileMau {
    display: inline-block;
    margin-top: 5px !important;
    font-size: 13px;
    cursor: pointer;
    color: #388E3C;
    font-weight: 400;
    margin-left: 5px;
}

    .LinkTaiFileMau:hover {
        color: #B71C1C;
    }

    .LinkTaiFileMau i {
        margin-right: 5px;
        font-weight: 500 !important;
    }

.warningEditExcelNhapKhoHangXuat {
    border-left: 3px solid #E57373;
    border-radius: 3px;
    background-color: #FAFAFA;
    color: #E64A19;
    font-size: 13px;
    padding: 0px 8px;
    line-height: 25px;
    margin-top: 2px;
    font-style: italic;
    letter-spacing: 1px;
    margin-bottom: 8px !important;
}

.totalLoading {
    color: #5D4037;
}

    .totalLoading i {
        margin-right: 5px;
    }

.totalSumNhapKhoHangXuat {
    color: #303F9F;
    border-right: 1px solid #bdbdbd;
    padding-right: 5px;
}

.e-dialog .e-footer-content .totalSumNhapKhoHangXuat {
    padding-right: 0px;
    height: 30px;
    line-height: 30px;
    border-right: 0px;
}

.totalSumNhapKhoHangXuat span {
    font-weight: 500;
    color: #C2185B;
}

.totalSumNhapKhoHangXuat.footer {
    color: #303F9F !important;
    padding-left: 10px;
    line-height: 28px;
}

    .totalSumNhapKhoHangXuat.footer div {
        color: #303F9F;
    }

.divWaperFullHeight {
    padding: 10px;
    overflow: auto;
    height: calc(100svh - 50px);
    background-color: #ECEFF1;
}

    .divWaperFullHeight .welcomeSpl {
        height: 1px;
        border-bottom: 1px dashed #E0E0E0;
        margin-top: 15px;
    }

    .divWaperFullHeight .WelcomePage {
        position: absolute;
        margin-top: 0px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        user-select: none;
        width: 480px;
        background-color: #fff;
        background-color: rgba(255,255,255,1);
        padding: 25px 20px 20px 15px !important;
        border-radius: 10px;
        border: 3px solid rgba(158, 158, 158,0.25);
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }


.imgWarningScreen img {
    height: 100px;
    user-select: none;
    pointer-events: none;
    margin-bottom: 20px;
}

.warningScreen {
}

    .warningScreen .divWaperFullHeight {
        height: 100svh;
        background-color: #C8E6C9;
    }

        .warningScreen .divWaperFullHeight .WelcomePage {
            border-color: #B71C1C;
            padding: 5px !important;
        }

.warningHeader {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #C2185B;
    position: absolute;
    top: 30px;
    left: 30px;
}

.warningHeaderSub {
    font-size: 14px;
    line-height: 21px;
    color: #303F9F;
    text-align: justify-all;
}

.btnTiepTuc {
    margin-top: 10px;
    margin-bottom: 3px;
    font-size: 14px !important;
    font-weight: 500 !important;
    width: 100% !important;
    background-color: #C2185B !important;
    height: 35px !important;
    color: #fff !important;
}

    .btnTiepTuc:hover {
        background-color: red !important;
    }

.colKHCH {
    user-select: none;
}

.e-rowcell.cellChon.e-templatecell div div,
.e-rowcell.cellChon.e-templatecell div div .colNKKH,
.e-rowcell.cellChon.e-templatecell div div .colNKCH {
    color: red !important;
}

.noiBatRow .e-rowcell.e-templatecell div div,
.noiBatRow .e-rowcell.e-templatecell div div .colNKKH,
.noiBatRow .e-rowcell.e-templatecell div div .colNKCH {
    color: red !important;
}

.e-rowcell.cellUnChon.e-templatecell {
    background-color: #F5F5F5 !important;
}

    .e-rowcell.cellUnChon.e-templatecell div div,
    .e-rowcell.cellUnChon.e-templatecell div div .colNKKH,
    .e-rowcell.cellUnChon.e-templatecell div div .colNKCH {
        color: #9E9E9E !important;
    }

        .e-rowcell.cellUnChon.e-templatecell div div .colChon .e-checkbox-wrapper .e-frame,
        .e-rowcell.cellUnChon.e-templatecell div div .colChon .e-css.e-checkbox-wrapper .e-frame {
            background-color: #EEEEEE !important;
            border: none !important;
        }

.e-rowcell.e-templatecell div div .colChon .e-checkbox-wrapper.e-checkbox-disabled .e-frame,
.e-rowcell.e-templatecell div div .colChon .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame {
    background-color: #EEEEEE !important;
    border: none !important;
}

.btnViTriSync .e-btn {
    background-color: transparent !important;
    border: 0px !important;
    padding: 0px !important;
    float: right !important;
    height: 20px !important;
    width: 15px !important;
    margin-top: -1px;
    margin-right: -4px;
    font-size: 12px !important;
    color: #bdbdbd !important;
}

    .btnViTriSync .e-btn:hover {
        color: #C2185B !important;
    }

.btnToCongNhanSync .e-btn {
    background-color: transparent !important;
    border: 0px !important;
    padding: 0px !important;
    float: right !important;
    height: 20px !important;
    width: 15px !important;
    margin-top: -1px;
    margin-right: -4px;
    font-size: 12px !important;
    color: #bdbdbd !important;
}

    .btnToCongNhanSync .e-btn:hover {
        color: #C2185B !important;
    }

.nhapkhohxcapnhat {
    background-color: #FAFAFA;
    color: #666;
}

.nhapkhohxnhapkho {
    background-color: #E8EAF6;
    color: #303F9F;
}

.nhapkhohxloading {
    background-color: #FCE4EC;
    color: #C2185B;
}

.nhapkhohxdaxuatkho {
    background-color: #E8F5E9;
    color: #388E3C;
}

.cellHuyPhieu div div {
    font-style: italic !important;
    color: #666 !important;
    background-color: #f5f5f5 !important;
    text-decoration: line-through !important;
}

.divPhienBan {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1;
    user-select: none;
    font-size: 12px;
    color: #E3F2FD;
    pointer-events: none;
}

    .divPhienBan i {
        margin-right: 10px;
    }


.uploaderCrewAvatar {
    margin-top: 0px;
    position: relative;
    text-align: center;
    background-color: #fff;
    padding-top: 6px;
    padding-bottom: 0px;
    border-radius: 5px;
    width: 160px;
    height: 200px;
    margin-bottom: 0px;
    border: 2px solid #388E3C;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

    .uploaderCrewAvatar .btnDelImgUpload {
        padding: 0px;
        height: 28px;
        width: 62px;
        line-height: 28px;
        border-radius: 3px;
        background-color: #FAFAFA;
        border: 0px !important;
        outline: none !important;
        position: absolute;
        bottom: 7px;
        left: 90px;
        color: #C2185B;
        font-weight: 700 !important;
        border: 0px solid #bdbdbd !important;
        opacity: 1 !important;
    }

        .uploaderCrewAvatar .btnDelImgUpload::after {
            content: 'Del' !important;
            font-size: 12px !important;
            color: #C2185B !important;
            position: absolute;
            left: 33px;
            line-height: 30px;
            font-weight: 400;
        }

        .uploaderCrewAvatar .btnDelImgUpload i {
            margin-right: 0px !important;
            margin-left: -20px;
        }

        .uploaderCrewAvatar .btnDelImgUpload:hover {
            background-color: #FFEBEE;
        }

        .uploaderCrewAvatar .btnDelImgUpload:disabled {
            background-color: #fff !important;
            opacity: 1 !important;
        }

            .uploaderCrewAvatar .btnDelImgUpload:disabled i,
            .uploaderCrewAvatar .btnDelImgUpload:disabled::after {
                color: #9E9E9E !important;
            }
    .uploaderCrewAvatar .imgAvatarCrew {
        user-select: none !important;
        pointer-events: none !important;
    }
    .uploaderCrewAvatar .imgAvatarCrew img {
        height: 150px;
        width: 130px;
        user-select: none !important;
        pointer-events: none !important;
        border-radius: 5px;
        border: 0px dashed #607D8B;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    }
    /*.uploaderCrewAvatar .e-upload .e-file-select-wrap .e-btn,
    .uploaderCrewAvatar .e-upload .e-upload-actions .e-btn,
    .uploaderCrewAvatar .e-bigger.e-small .e-upload .e-file-select-wrap .e-btn,
    .uploaderCrewAvatar .e-bigger.e-small .e-upload .e-upload-actions .e-btn {
        color: red;
    }*/
    .uploaderCrewAvatar .e-upload .e-file-select-wrap .e-btn {
        color: transparent;
        font-size: 0px;
        padding: 0px;
        height: 28px;
        width: 80px;
        line-height: 18px;
        border-radius: 3px !important;
        background-color: #FAFAFA;
        border: 0px !important;
        outline: none !important;
        position: absolute;
        bottom: 7px;
        left: 5px;
        border: 0px solid #4CAF50 !important;
        opacity: 1;
    }

        .uploaderCrewAvatar .e-upload .e-file-select-wrap .e-btn::after {
            content: 'Upload' !important;
            font-size: 12px !important;
            color: #00695C !important;
            position: absolute;
            left: 30px;
            line-height: 23px;
        }

        .uploaderCrewAvatar .e-upload .e-file-select-wrap .e-btn:hover {
            background-color: #E0F2F1;
        }

        .uploaderCrewAvatar .e-upload .e-file-select-wrap .e-btn:before {
            font-family: "e-icons";
            content: "\e706";
            color: #00695C;
            font-size: 13px;
            line-height: 21px;
            font-weight: 700 !important;
            padding-left: 6px;
        }

    .uploaderCrewAvatar .e-upload .e-upload-files {
        display: none;
    }

    .uploaderCrewAvatar .e-upload .e-file-select-wrap .e-file-drop,
    .uploaderCrewAvatar .e-bigger.e-small .e-upload .e-file-select-wrap .e-file-drop {
        display: none;
    }

    .uploaderCrewAvatar .e-upload {
        border: 0px;
        height: 0px;
    }

        .uploaderCrewAvatar .e-upload .e-file-select-wrap,
        .uploaderCrewAvatar .e-bigger.e-small .e-upload .e-file-select-wrap {
            padding: 0px;
            font-size: 0px;
            color: transparent !important;
            border: 0px !important;
        }

.txtAutobiography {
    height: 105px;
    background-color: #f5f5f5 !important;
    border-radius: 5px !important;
    overflow: auto !important;
}

    .txtAutobiography textarea {
        resize: none !important;
        border-bottom: 0px !important;
    }

.txtCrewNote {
    height: 258px;
    resize: none;
    background-color: #f5f5f5 !important;
    border-radius: 5px !important;
}

    .txtCrewNote textarea {
        resize: none !important;
        border-bottom: 0px !important;
    }


.btnSaveCrewData {
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px !important;
}

.btnExportCrewData {
    background-color: #D32F2F !important;
    color: #FFEBEE !important;
    margin-left: 2px !important;
    margin-right: 3px !important;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px !important;
}

.e-control.e-btn.e-lib.btnExportCrewData:hover {
    background-color: #C62828 !important;
    color: #fff !important;
}

.e-control.e-btn.e-lib.btnExportCrewData:disabled {
    background-color: #f5f5f5 !important;
    color: #bdbdbd !important;
}

.e-rowcell .btnExportViewOnline,
.e-rowcell .btnExportDownloadFile {
    text-align: center !important;
    text-align: center !important;
    padding: 0px !important;
    padding-left: 5px !important;
}

    .e-rowcell .btnExportViewOnline:disabled i,
    .e-rowcell .btnExportDownloadFile:disabled i {
        color: #BDBDBD !important;
    }

.btnExportViewOnline {
    border-radius: 5px !important;
    background-color: transparent !important;
    color: #388E3C !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    width: 25px !important;
    height: 25px !important;
    line-height: 18px !important;
    box-shadow: none !important;
    outline: none !important;
    border: 0px !important;
}

    .btnExportViewOnline i,
    .btnExportDownloadFile i {
        font-weight: 400 !important;
    }

.e-control.e-btn.e-lib.btnExportViewOnline:hover {
    background-color: transparent !important;
    color: #D32F2F !important;
}

.btnExportDownloadFile {
    border-radius: 5px !important;
    background-color: transparent !important;
    color: #388E3C !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    width: 25px !important;
    height: 25px !important;
    line-height: 18px !important;
    box-shadow: none !important;
    outline: none !important;
    border: 0px !important;
}

.e-control.e-btn.e-lib.btnExportDownloadFile:hover {
    background-color: transparent !important;
    color: #D32F2F !important;
}

.colCode:has(.isMyTakeCare) {
    position: relative;
    width: 100%;
    display: block;
}

.colCode .isMyTakeCare {
    position: absolute;
    right: 0px;
    top: -5px;
}

    .colCode .isMyTakeCare i {
        font-size: 9px !important;
        color: #FF9800;
        font-weight: 700;
    }

.colCode:has(.isHasDocOd) {
    position: relative;
    width: 100%;
    display: block;
}

.colCode .isHasDocOd {
    position: absolute;
    right: 1px;
    bottom: -4px;
}

    .colCode .isHasDocOd i {
        font-size: 9px !important;
        color: #4CAF50;
        font-weight: 400 !important;
    }

.colCode:has(.isHasEss1),
.colCode:has(.isHasEss2) {
    position: relative;
    width: 100%;
    display: block;
}

.colCode .isHasEss1 {
    position: absolute;
    right: 12px;
    bottom: -4px;
}
.colCode .isHasEss2 {
    position: absolute;
    right: 1px;
    bottom: -4px;
}

    .colCode .isHasEss1 i,
    .colCode .isHasEss2 i {
        font-size: 9px !important;
        color: #4CAF50;
        font-weight: 400 !important;
    }


.colCode span.imgCrew img {
    margin-top: 0px;
    margin-bottom: 0px;
    vertical-align: middle !important;
    height: 38px !important;
    width: 34px !important;

    border-radius: 3px;
}

.colCode span.imgCrew {
    float: left;
    display: inline-block !important;
    text-align: center !important;
    border-radius: 5px;
    background-color: #5D4037;
    padding:0px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.colCode span.imgUserAvatar img {
    margin-top: 1px;
    margin-bottom: 1px;
    vertical-align: middle !important;
    height: 35px !important;
    width: 35px !important;
    border-radius: 50%;
}

.colCode.crewName {
    vertical-align: middle;
    display: inline-block;
    width: 120px;
    height: 38px;
    padding-left: 10px !important;
    display: table-cell;
}

.colRank {
    font-weight: 500;
}

.hidden {
    opacity: 0;
}

.console-container {
    opacity: 0.75;
    user-select: none;
    font-size: 32px;
    text-align: center;
    height: 100px;
    width: 800px;
    display: block;
    position: absolute;
    color: white;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0px -4px 10px rgba(255,255,255,0.3);
    letter-spacing: 1px;
    line-height: 46px;
}

.console-underscore {
    display: inline-block;
    position: relative;
    top: -0.14em;
    left: 10px;
    color: #fff;
}

.colcmb2Image {
    clear: both;
    position: relative;
}

    .colcmb2Image .colLeft {
        float: left;
        z-index: 1;
    }

    .colcmb2Image .colRight {
    }

    .colcmb2Image .colLeft.imgUserAvatar img {
        height: 50px;
        width: 50px;
        text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0px -4px 10px rgba(255,255,255,0.3);
        margin-right: 10px;
        vertical-align: middle;
        margin-top: 2px;
        z-index: 1;
        border-radius: 50%;
    }

    .colcmb2Image .colLeft.imgCrewAvatar img {
        height: 50px;
        width: 50px;
        text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0px -4px 10px rgba(255,255,255,0.3);
        margin-right: 10px;
        vertical-align: middle;
        margin-top: 3px;
        z-index: 1;
    }

.colRight .itemTen .cmbCrewName {
    font-weight: 500;
    margin-right: 10px;
    color: #B71C1C;
}

.itemMa.evaluationCode {
    font-weight: 400 !important;
    color: #000;
}

.itemMa.evaluationGroup {
    font-weight: 400 !important;
    color: #303F9F;
}

    .itemMa.evaluationGroup:before {
        font-family: "Font Awesome 6 Pro";
        content: '\f5fd';
        margin-right: 5px;
    }

.itemTen .addressCrew {
    max-width: 620px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.itemTen .rankcodeCrew,
.itemTen .dobcrew {
    color: #3F51B5;
}

.itemTen .rankcodeCrew {
    color: #388E3C;
    font-weight: 500;
    margin-right: 5px;
}

.itemTen .dobcrew {
    margin-right: 10px;
}

.itemTen .statusrew {
    color: #C2185B;
    font-weight: 500;
}

.itemMa .shipimo {
    color: #303F9F !important;
    font-weight: 500;
}

.itemMa .shipname {
    color: #B71C1C !important;
    font-weight: 500;
}

.itemTen.shiptype {
    font-weight: 400;
    color: #333 !important;
    letter-spacing: 0px;
}

.itemMa.maclient {
    font-weight: 500 !important;
    color: #303F9F !important;
}

.itemTen.tenclient {
    color: #000 !important;
}

.itemMa.macrewstatus {
    font-weight: 500 !important;
    color: #303F9F !important;
}

.itemMa.madoc {
    color: #303F9F !important;
}

.itemTen.tendoc {
    color: #000 !important;
}

.itemMa.marank {
    font-weight: 500 !important;
    color: #303F9F !important;
}

.itemTen.tenrank {
    color: #000 !important;
}

.waper_grid .e-grid td:has(.colExpDate),
.waper_grid .e-grid td.e-active:has(.colExpDate),
.waper_grid div.e-gridcontent tr.e-row td.e-rowcell.e-active:has(.colExpDate),
.waper_grid div.e-gridcontent tr.e-row:hover td.e-rowcell.e-active:has(.colExpDate) {
    background-color: #D32F2F !important;
}

.waper_grid .e-grid td .colExpDate,
.waper_grid .e-grid td.e-active .colExpDate,
.waper_grid div.e-gridcontent tr.e-row td.e-rowcell.e-active .colExpDate,
.waper_grid div.e-gridcontent tr.e-row:hover td.e-rowcell.e-active .colExpDate {
    color: #fff !important;
}

.waper_grid .e-grid td:has(.colExpSoon),
.waper_grid .e-grid td.e-active:has(.colExpSoon),
.waper_grid div.e-gridcontent tr.e-row td.e-rowcell.e-active:has(.colExpSoon),
.waper_grid div.e-gridcontent tr.e-row:hover td.e-rowcell.e-active:has(.colExpSoon) {
    background-color: #FBC02D !important;
}

.waper_grid .e-grid td .colExpSoon,
.waper_grid .e-grid td.e-active .colExpSoon,
.waper_grid div.e-gridcontent tr.e-row td.e-rowcell.e-active .colExpSoon,
.waper_grid div.e-gridcontent tr.e-row:hover td.e-rowcell.e-active .colExpSoon {
    color: #fff !important;
}

.spanDeleteFile i {
    margin-right: 3px;
}

.spanDeleteFile {
    margin-left: 10px;
    color: #666 !important;
    cursor: pointer;
    font-style: italic;
    font-size: 11px;
}

    .spanDeleteFile:hover {
        text-decoration: underline;
    }

.spanPreviewFile {
    color: #303F9F;
    cursor: pointer;
    margin-bottom:5px;
    display:inline-block;
}

    .spanPreviewFile:hover {
        text-decoration: underline;
    }

.spanDownloadFile {
    margin-left: 10px;
    color: #666 !important;
    cursor: pointer;
    font-style: italic;
    font-size: 11px;
}

    .spanDownloadFile:hover {
        text-decoration: underline;
    }

.lastRemark i {
    margin-right: 3px;
}

.lastRemark {
    font-size: 12px;
    color: #D32F2F;
    user-select: none;
    cursor: pointer;
}

    .lastRemark:hover {
        text-decoration: underline;
    }


    .lastRemark.nolastremark {
        color: #9E9E9E;
        cursor: default;
    }

        .lastRemark.nolastremark:hover {
            text-decoration: none;
        }


.e-rowcell .lastRemark {
    font-size: 11px;
    color: #303F9F;
    padding-right: 5px;
    padding-left: 5px;
    font-weight: 500;
}


.bsCrewInfo {
}

    .bsCrewInfo .bsCrewLeft {
    }

    .bsCrewInfo .bsCrewRight {
    }


#mentionIntegration .e-rte-container {
    border-radius: 3px;
    border: 1px solid #81C784;
    overflow: hidden !important;
}

.e-richtexteditor.e-focused .e-rte-container {
    border: 1px solid #D32F2F !important;
}

.e-mention.e-popup {
    border-radius: 5px !important;
    overflow: hidden !important;
    border: 1px solid #81C784 !important;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.e-dropdownbase .e-list-item {
    padding-right: 0px !important;
}

    .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
        background-color: #E8F5E9;
        border-color: #fff;
        color: #000;
    }

#mentionIntegration_rte-editable {
    padding: 10px 10px !important;
    font-size: 13px !important;
    color: #000 !important;
    height: 200px !important;
    max-height: 200px !important;
    overflow: scroll !important;
    min-height: unset !important;
    border-radius: 5px !important;
    overflow: hidden !important;
}

.e-richtexteditor.e-rte-full-screen #mentionIntegration_rte-editable {
    height: 100% !important;
    max-height: 100% !important;
    overflow: scroll !important;
}

.e-rte-placeholder.rte-placeholder {
    padding: 10px 10px !important;
    color: #666 !important;
    opacity: 1 !important;
    font-style: italic !important;
    letter-spacing: 1px !important;
}

#mentionIntegration_toolbar {
}

.e-toolbar .e-toolbar-item .e-tbar-btn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    vertical-align: middle;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    min-height: 20px;
    min-width: 30px;
    padding: 0;
    border-radius: 0;
    line-height: 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    text-transform: none;
}

.listItemsUsers {
    height: 50px;
    vertical-align: middle !important;
    line-height: 16px;
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 7px;
}

    .listItemsUsers::after {
        clear: both;
    }

    .listItemsUsers .imgAvatar {
        float: left;
    }

        .listItemsUsers .imgAvatar img {
            border: 2px solid #fff;
            height: 48px;
            width: 48px;
            border-radius: 50%;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        }

    .listItemsUsers .username {
        display: block;
        padding-top: 10px;
        font-weight: 500 !important;
        font-size: 13px;
        color: #D32F2F;
        line-height: 16px;
        padding-bottom: 5px;
    }



    .listItemsUsers .fullname {
        display: block;
        font-weight: 400 !important;
        font-size: 12px;
        color: #000;
        line-height: 16px;
    }

.divCrewsComment {
    clear: both;
    padding: 5px;
}

    .divCrewsComment::after {
        clear: both;
    }

    .divCrewsComment .imgCommentCrew {
        text-align: center;
    }

    .divCrewsComment .txtCommentCrew {
        float: left;
        width: 940px;
    }

    .divCrewsComment .btnCommentCrew {
        float: left;
    }

.btnCommentCrew .btnPostComment {
    display: block;
    margin-left: 5px !important;
    font-size: 12px !important;
    background-color: #4CAF50 !important;
    color: #E8F5E9 !important;
    border-radius: 2px;
    border: 0px !important;
    outline: none !important;
    height: 30px !important;
    width: 80px !important;
    margin-top: 5px;
    inline-size: 50px;
    overflow: hidden;
    font-weight: 500 !important;
    margin-top: 5px !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

    .btnCommentCrew .btnPostComment:hover {
        color: #fff !important;
        background-color: #388E3C !important;
    }

    .btnCommentCrew .btnPostComment:disabled {
        color: #BDBDBD !important;
        box-shadow: unset !important;
        cursor: not-allowed !important;
        background-color: #fff !important;
    }


.btnCommentCrew .btnCloseRemark {
    margin-top: 10px !important;
    display: block;
    margin-left: 5px !important;
    font-size: 12px !important;
    background-color: #ECEFF1 !important;
    color: #414141 !important;
    border-radius: 2px;
    border: 0px !important;
    outline: none !important;
    height: 30px !important;
    width: 80px !important;
    margin-top: 5px;
    inline-size: 50px;
    overflow: hidden;
    font-weight: 500 !important;
}

    .btnCommentCrew .btnCloseRemark:hover {
        color: #B71C1C !important;
    }


.divCrewsComment .imgCommentCrew {
    background-color: #fff;
    margin-left: 5px;
    border: 1px solid #4CAF50;
    border-radius: 5px;
}

    .divCrewsComment .imgCommentCrew img {
        height: 70px;
        width: 70px;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        margin-top: 6px;
        margin-bottom: 0px;
        user-select: none;
        border-radius: 5px;
        pointer-events: none;
    }

.e-richtexteditor .rte-placeholder {
    padding: 5px;
    font-size: 12px !important;
}

.e-mention .e-mention-chip .mentionUserName,
.e-mention .e-mention-chip .mentionUserName:hover {
    background: #E8F5E9;
    padding: 3px 8px !important;
    border-radius: 3px;
    color: #388E3C;
    cursor: default;
    font-weight: 500;
}

    .e-mention .e-mention-chip .mentionUserName:before {
        font-family: "Font Awesome 6 Pro";
        content: '\40';
        margin-right: 3px;
    }

    .e-mention .e-mention-chip .mentionUserName:hover {
        background-color: #388E3C;
        color: #fff;
    }


.e-mention .e-mention-chip .mentionDepartment,
.e-mention .e-mention-chip .mentionDepartment:hover {
    background: #F3E5F5;
    padding: 3px 8px !important;
    border-radius: 3px;
    color: #7B1FA2;
    cursor: default;
    font-weight: 500;
}


    .e-mention .e-mention-chip .mentionDepartment:before {
        font-family: "Font Awesome 6 Pro";
        content: '\f02c';
        margin-right: 3px;
    }

    .e-mention .e-mention-chip .mentionDepartment:hover {
        background-color: #7B1FA2;
        color: #fff;
    }

.sltCrewComment::after {
    clear: both;
}

.sltCrewComment {
    clear: both;
    display: block;
    margin-bottom: 5px;
    margin-top: 0px;
    height: 5px;
    width: 100%;
    border-bottom: 1px solid #E0E0E0;
}

.crewNoComment {
    text-align: center;
    background-color: #fafafa;
}

    .crewNoComment img {
        height: 150px;
        width: auto;
        user-select: none;
        pointer-events: none;
        margin-left: 25px;
        margin-top: 9px;
    }

.divbasicInfo {
}

.lstCrewComment {
    padding: 10px;
    padding-top: 10px;
    vertical-align: middle;
    background-color: #f5f5f5;
    position: relative;
}

.lstHeaderCrewComments {
    background-color: #FAFAFA;
    margin-bottom: 5px;
    padding: 3px 5px;
    user-select: none;
    border-top: 1px solid #EEEEEE;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    position: sticky;
    width: 100%;
    top: 0px;
    z-index: 1;
}

    .lstHeaderCrewComments span.lbl {
        font-size: 13px;
        font-weight: 500;
        color: #2E7D32;
        letter-spacing: 1px;
        line-height: 30px;
        margin-left: 15px;
    }

        .lstHeaderCrewComments span.lbl i {
        }

    .lstHeaderCrewComments .btnAddRemark .e-btn {
        float: left;
        margin: 0px !important;
        padding: 0px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        background-color: #388E3C !important;
        color: #E0F2F1 !important;
        font-weight: 400 !important;
        font-size: 13px !important;
        height: 30px !important;
        line-height: 28px !important;
        border: 0px !important;
        border-radius: 2px !important;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        border: 1px solid #26A69A !important;
    }

        .lstHeaderCrewComments .btnAddRemark .e-btn:hover {
            background-color: #2E7D32 !important;
        }

        .lstHeaderCrewComments .btnAddRemark .e-btn:disabled {
            background-color: #bdbdbd !important;
            cursor: not-allowed;
        }

.subThreadComment {
    padding-left: 35px;
    position: relative;
}

    .subThreadComment::before {
        content: "";
        position: absolute;
        left: 10px;
        top: 0;
        width: 3px;
        height: 100%;
        background-color: #C8E6C9;
    }

    .subThreadComment .divCrewCommentThread {
        border-color: transparent;
        position: relative;
        z-index: 0;
    }

        .subThreadComment .divCrewCommentThread::before {
            content: "";
            position: absolute;
            left: -23px; /* Nối vào đường đỏ */
            top: 50%;
            width: 21px;
            height: 3px;
            background-color: #C8E6C9;
            transform: translateY(-50%);
        }



        .subThreadComment .divCrewCommentThread:hover {
            box-shadow: none !important;
        }

        .subThreadComment .divCrewCommentThread:last-child {
            margin-bottom: 35px;
        }

.subThreadCommentPage {
    margin-top: -20px;
    margin-bottom: 30px;
    text-align: right;
}

    .subThreadCommentPage .pNo {
        display: inline-block;
        background-color: #fafafa;
        padding: 5px 10px;
        margin-right: 10px;
        cursor: pointer;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 500;
        color: #333;
    }

        .subThreadCommentPage .pNo:hover {
            background-color: #fff;
            color: #388E3C;
        }

.divCrewCommentThread {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    margin-bottom: 5px;
    background-color: #fff;
}

    .divCrewCommentThread:hover {
        border: 1px solid #FFB74D;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    }

    .divCrewCommentThread .divRow1 {
        user-select: none;
        pointer-events: none;
    }

    .divCrewCommentThread .imgUserAvatar {
        user-select: none;
        pointer-events: none;
    }

        .divCrewCommentThread .imgUserAvatar img {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            border: 2px solid #fff;
            margin-right: 10px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
            vertical-align: middle;
            user-select: none;
            pointer-events: none;
            margin-left: 5px;
            margin-top: 0px;
        }

    .divCrewCommentThread .username {
        font-weight: 500;
        vertical-align: top;
        color: #D32F2F;
        letter-spacing: 1px;
        font-size: 13px;
        padding-top: 10px !important;
        user-select: none;
        pointer-events: none;
    }

        .divCrewCommentThread .username i {
            font-size: 8px;
            margin-top: -2px;
            vertical-align: middle;
            margin-right: 5px;
            color: #E0E0E0;
        }

        .divCrewCommentThread .username.useronline i {
            color: #4CAF50;
        }

        .divCrewCommentThread .username.useroffline i {
            color: #E0E0E0;
        }


    .divCrewCommentThread .fullname {
        font-weight: 400;
        vertical-align: top;
        color: #303F9F;
        font-size: 12px;
        user-select: none;
        pointer-events: none;
        margin-left: 3px;
    }

    .divCrewCommentThread .timeAgo {
        font-weight: 300;
        vertical-align: top;
        color: #616161;
        font-size: 10px;
        letter-spacing: 1px;
        user-select: none;
        pointer-events: none;
        margin-left: 3px;
    }

        .divCrewCommentThread .timeAgo i {
            margin-right: 0px;
            margin-left: 10px;
            vertical-align: top;
            margin-top: 2px;
            font-size: 9px !important;
            color: #F57C00;
            margin-right: -3px;
        }
    .divCrewCommentThread .department {
        font-weight: 400;
        color: #FFA000;
        font-size: 12px;
        user-select: none;
        pointer-events: none;
        margin-right: 8px;
        vertical-align: top;
        float: right;
        font-size: 10px;
        background-color: #FAFAFA;
        padding: 2px 5px;
    }

        .divCrewCommentThread .department i {
            margin-right: 5px;
        }


    .divCrewCommentThread .fullname i {
        font-size: 11px;
        color: #bdbdbd;
    }

    .divCrewCommentThread .remark {
        display: block;
        border-radius: 2px;
        margin-top: 0px;
        margin-bottom: 8px;
        padding: 5px 5px;
        padding-right: 10px;
        font-weight: 400;
        vertical-align: middle;
        color: #000;
        font-size: 12px;
        margin-left: 65px;
        margin-top: -30px;
        text-align: justify !important;
    }

.lstFiles.fRemark {
    font-size: 12px;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 10px;
    border-bottom: 1px dashed #E0E0E0;
    padding-top: 5px;
    margin-right: 20px;
    color: #5D4037;
    user-select: none;
    font-weight: 400;
}

.divCrewCommentThread .lstFiles {
    font-size: 12px;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 60px;
    border-top: 1px dashed #E0E0E0;
    padding-top: 5px;
    margin-right: 20px;
    user-select: none;
}

    .divCrewCommentThread .lstFiles:last-child {
        border-bottom: 1px dashed #bdbdbd;
    }

    .divCrewCommentThread .lstFiles .spanFileName {
        color: #5D4037;
        cursor: pointer;
    }

        .divCrewCommentThread .lstFiles .spanFileName:hover {
            text-decoration: underline;
        }

        .divCrewCommentThread .lstFiles .spanFileName i {
            margin-right: 5px;
        }

    .divCrewCommentThread .lstFiles .spanPreviewFile,
    .divCrewCommentThread .lstFiles .spanDownloadFile,
    .divCrewCommentThread .lstFiles .spanDeleteFile {
        color: #666;
    }

        .divCrewCommentThread .lstFiles .spanPreviewFile:hover,
        .divCrewCommentThread .lstFiles .spanDownloadFile:hover,
        .divCrewCommentThread .lstFiles .spanDeleteFile:hover {
            color: #B71C1C;
        }

::selection {
    color: #E65100 !important;
    background: #FFE0B2 !important;
}

.divCrewCommentThread .remark .mentionUserName {
    font-weight: 500;
    color: #388E3C;
    background-color: #E8F5E9;
    padding: 2px 5px;
}

    .divCrewCommentThread .remark .mentionUserName:before {
        font-family: "Font Awesome 6 Pro";
        content: '\40';
        margin-right: 3px;
    }

.divCrewCommentThread .remark .mentionDepartment {
    font-weight: 500;
    color: #7B1FA2;
    background-color: #F3E5F5;
    padding: 2px 5px;
}

    .divCrewCommentThread .remark .mentionDepartment:before {
        font-family: "Font Awesome 6 Pro";
        content: '\f02c';
        margin-right: 3px;
    }

.divCrewCommentThread .remark blockquote {
    border-left: 5px solid rgba(0, 0, 0, 0.3);
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 00px;
    unicode-bidi: isolate;
    padding-left: 5px;
}

.divCrewCommentThread .actBtn {
    display: block;
    font-weight: 400;
    vertical-align: middle;
    text-align: right;
    color: #000;
    font-size: 11px;
    font-style: italic;
    user-select: none;
    padding-right: 12px;
}

    .divCrewCommentThread .actBtn i {
        margin-right: 5px;
        margin-left: 10px;
    }

    .divCrewCommentThread .actBtn .createdate {
        margin-right: 6px;
        color: #666;
        user-select: none;
        pointer-events: none;
    }

    .divCrewCommentThread .actBtn .replyRemark {
        margin-right: 6px;
        color: #666;
        margin-left: 0px;
        font-style: normal;
        cursor: pointer;
    }

        .divCrewCommentThread .actBtn .replyRemark:hover {
            text-decoration: underline;
        }


    .divCrewCommentThread .actBtn .deleteicon {
        margin-left: 3px;
        color: #666;
        cursor: pointer;
    }

        .divCrewCommentThread .actBtn .deleteicon:hover {
            text-decoration: underline;
            color: #B71C1C;
        }

.divCrewCommentThread .remark {
}

.divCrewCommentThread .actEmotion {
    display: block;
    margin-left: 15px;
    margin-right: 15px;
    border-top: 1px dashed #E0E0E0;
    margin-top: 10px !important;
}

    .divCrewCommentThread .actEmotion .lblEmotion {
        display: block;
        font-size: 11px;
        font-weight: 400;
        color: #9E9E9E;
        letter-spacing: 1px;
        user-select: none;
        font-style: italic;
        display: none;
    }

        .divCrewCommentThread .actEmotion .lblEmotion i {
            margin-right: 5px;
        }

.divCrewCommentThread .remark {
}

.e-tooltip-wrap.e-popup.e-rating-tooltip .e-tip-content {
    width: 110px !important;
}

    .e-tooltip-wrap.e-popup.e-rating-tooltip .e-tip-content b {
        font-weight: 500 !important;
        color: #000 !important;
        font-size: 12px !important;
    }

.divCrewCommentThread .actEmotion .emoji img {
    height: 18px;
    width: 18px;
    margin-right: 0px;
}

.e-rating-item-container:not(.e-rating-selected) .emoji {
    filter: grayscale(1);
    opacity: 0.75;
}

.e-rating-container .e-icons.e-rating-reset.e-reset {
    vertical-align: top;
    margin-top: 5px;
    color: #607D8B !important;
    font-weight: 700;
}

.e-rating-container .e-reset.e-icons.e-rating-reset.e-disabled:before {
    color: #bdbdbd !important;
}

.e-rating-container .e-icons.e-reset:before {
    font-size: 14px;
    vertical-align: top;
}

.e-rating-container .e-icons.e-reset:before {
    content: "\f12d";
    font-family: "Font Awesome 6 Pro";
}

.divCrewCommentThread .actBtnAvg {
    font-size: 11px;
    letter-spacing: 1px;
    vertical-align: middle;
    margin-top: -10px;
    display: inline-block;
    user-select: none;
    color: #9E9E9E;
    font-style: italic;
}

    .divCrewCommentThread .actBtnAvg span {
        margin-right: 10px;
        font-weight: 500;
        color: #00796B;
        font-style: normal;
        font-size: 12px;
    }

    .divCrewCommentThread .remark ul,
    #mentionIntegration_rte-editable ul {
        display: block;
        list-style-type: disc;
        margin-block-start: 0px;
        margin-block-end: 0px;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 15px;
        unicode-bidi: isolate;
    }

        #mentionIntegration_rte-editable ul li {
            line-height: 10px !important;
        }

            .divCrewCommentThread .remark ul li::marker,
            #mentionIntegration_rte-editable ul li::marker {
                color: #607D8B;
                font-size: 13px;
            }


.cellMessage {
    display: inline-block;
    font-size: 12px;
    padding: 3px 0px;
}

    .cellMessage .datetimeCrewLoged {
        font-weight: 400;
        margin-right: 3px;
        color: #000;
        letter-spacing: 0px;
        font-size: 11px !important;
    }

        .cellMessage .datetimeCrewLoged i {
            margin-right: 5px;
            font-weight: 500 !important;
        }

    .cellMessage .userCrewLoged {
        font-weight: 500;
        margin-right: 3px;
        color: #D32F2F;
        font-size: 11px !important;
        margin-right: 5px;
    }

    .cellMessage .logObject {
        color: #607D8B;
        font-size: 11px !important;
        margin-left: 5px;
        background-color: #ECEFF1;
        padding: 3px 5px;
        border-radius: 3px;
    }

    .cellMessage .logId {
        color: #607D8B;
        font-size: 11px !important;
        margin-right: 5px;
        background-color: #ECEFF1;
        padding: 3px 5px;
        border-radius: 3px;
        font-style: italic;
    }

    .cellMessage .actionCrewLoged {
        font-weight: 400;
        margin-right: 5px;
        color: #388E3C;
        font-size: 11px !important;
        font-style: italic;
        text-decoration: underline !important;
    }

        .cellMessage .actionCrewLoged.actUpdate {
            color: #00796B;
        }

        .cellMessage .actionCrewLoged.actInsert {
            color: #303F9F;
        }

        .cellMessage .actionCrewLoged.actDelete {
            color: #5D4037;
        }

    .cellMessage .messageCrewLoged {
        font-weight: 400 !important;
    }

.cellMaxHeight {
    font-size: 12px;
    max-height: 40px;
    overflow: auto;
    line-height: 18px !important;
    white-space: pre-line;
    word-break: break-all;
    color: #000000;
    padding: 2px;
    user-select: none;
}

.cellRemarkCrew {
    font-size: 12px;
    max-height: 40px;
    overflow: auto;
    line-height: 18px !important;
    white-space: pre-line;
    word-break: break-all;
    color: #000000;
    padding: 2px;
    user-select: none;
}

    .cellRemarkCrew::selection {
        color: #D32F2F;
        background: #FFEBEE;
    }

    .cellRemarkCrew span.cellUserName {
        font-weight: 500;
        margin-right: 5px;
        color: #333;
        user-select: none;
        pointer-events: none;
    }


        .cellRemarkCrew span.cellUserName:before {
            font-family: "Font Awesome 6 Pro";
            content: '\f4a4';
            margin-right: 5px;
            font-weight: 500;
        }

    .cellRemarkCrew span.cellDateTime {
        margin-right: 3px;
        color: #303F9F;
        user-select: none;
        pointer-events: none;
        font-size: 11px;
    }

        .cellRemarkCrew span.cellDateTime:before {
            font-family: "Font Awesome 6 Pro";
            content: '\e29e';
            margin-right: 5px;
            font-weight: 500;
        }



    .cellRemarkCrew .mentionUserName {
        font-weight: 500;
        color: #388E3C;
    }

        .cellRemarkCrew .mentionUserName:before {
            font-family: "Font Awesome 6 Pro";
            content: '\40';
            margin-right: 2px;
        }


    .cellRemarkCrew .mentionDepartment {
        font-weight: 500;
        color: #7B1FA2;
    }

        .cellRemarkCrew .mentionDepartment:before {
            font-family: "Font Awesome 6 Pro";
            content: '\f02c';
            margin-right: 3px;
        }

    .cellRemarkCrew div {
        display: inline !important;
    }

.pagerRemark {
    margin-top: 0px;
    padding: 10px;
    padding-bottom: 2px;
    position: relative;
}

    .pagerRemark .waper_pager {
        position: unset;
        bottom: 0px;
        height: 26px !important;
        width: 100%;
        border: 0px !important;
        background-color: #fff !important;
    }

        .pagerRemark .waper_pager .e-pager {
            background-color: #fff;
            border: 0px !important;
            box-shadow: none !important;
        }

            .pagerRemark .waper_pager .e-pager .txtPager input {
                background-color: #fff !important;
            }

.e-dialog.e-popup.e-popup-open.frmCrew .e-dlg-content .e-tab {
}

.lstStatus {
    max-height: 250px;
    overflow: auto;
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    flex-direction: row;
}

    .lstStatus .crewstatusSpan {
        margin-right: 15px;
        margin-bottom: 8px;
        display: inline-block;
        text-align: justify;
        text-justify: inter-word;
        flex-grow: 1;
        flex-wrap: wrap;
    }

    .lstStatus .e-checkbox-wrapper .e-label,
    .lstStatus .e-css.e-checkbox-wrapper .e-label {
        font-size: 12px !important;
        color: #000 !important;
        font-weight: 400 !important;
    }

    .lstStatus .e-checkbox-wrapper:has(.e-check) .e-label,
    .lstStatus .e-css.e-checkbox-wrapper:has(.e-check) .e-label {
        color: red !important;
    }

.historyCrewPaging .waper_pager {
    position: unset !important;
}

.cellNotification {
    display: block;
    padding: 5px 5px !important;
    user-select: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 5px;
    border: 1px solid #E0E0E0;
}

    .cellNotification .contentNotification {
        color: #000 !important;
        font-size: 13px !important;
        line-height: 21px;
        font-style: italic;
        text-align: justify-all !important;
        user-select: none;
        margin-top: 5px;
        margin-bottom: 5px;
        border: 1px solid #E0E0E0;
        padding: 10px 10px;
        border-radius: 5px;
        margin-top: 8px !important;
        margin-bottom: 10px !important;
    }


        .cellNotification .contentNotification .userUserNameNoti {
            font-weight: 500 !important;
            color: #388E3C;
            font-style: normal;
        }

            .cellNotification .contentNotification .userUserNameNoti:before {
                font-family: "Font Awesome 6 Pro";
                content: '\40';
                margin-right: 3px;
                font-weight: 700;
            }

        .cellNotification .contentNotification .userFullNameNoti {
            font-weight: 400 !important;
            color: #303F9F;
            font-style: normal;
            letter-spacing: 1px;
        }

        .cellNotification .contentNotification .crewRankNoti,
        .cellNotification .contentNotification .crewFullNameNoti {
            color: #303F9F;
            font-weight: 500;
            font-style: normal;
            margin-right: 5px;
        }

        .cellNotification .contentNotification .crewRankNoti {
            font-weight: 500;
            color: #C2185B;
            margin-left: 5px;
            margin-right: 5px;
        }

        .cellNotification .contentNotification .crewCodeNoti {
            font-weight: 400;
            color: #7B1FA2;
            font-style: normal;
            margin-right: 5px;
        }

            .cellNotification .contentNotification .crewCodeNoti:before {
                font-family: "Font Awesome 6 Pro";
                content: '\f121';
                margin-right: 3px;
                margin-left: 5px;
            }

        .cellNotification .contentNotification .crewNoted {
            font-weight: 400;
            color: #000;
        }


    .cellNotification .titleNotification {
        font-weight: 500;
        color: #000;
        margin-top: 5px;
        margin-left: 5px;
        font-size: 13px;
    }

        .cellNotification .titleNotification:before {
            font-family: "Font Awesome 6 Pro";
            content: '\e1e4';
            margin-right: 5px;
            font-weight: 400;
        }

        .cellNotification .titleNotification .unseenNotification {
            margin-left: 10px;
            color: #D32F2F;
            font-weight: 400 !important;
            font-size: 12px !important;
        }

            .cellNotification .titleNotification .unseenNotification:before {
                font-family: "Font Awesome 6 Pro";
                content: '\e16f';
                margin-right: 5px;
                font-weight: 400;
                color: #B71C1C;
            }

        .cellNotification .titleNotification .seenNotification {
            margin-left: 10px;
            color: #388E3C;
            font-weight: 400 !important;
            font-size: 12px !important;
        }

            .cellNotification .titleNotification .seenNotification:before {
                font-family: "Font Awesome 6 Pro";
                content: '\f2b6';
                margin-right: 5px;
                font-weight: 400;
                color: #388E3C;
            }



    .cellNotification .btnGotoMessageNoti,
    .cellNotification .btnMarkAsViewedNoti {
        font-size: 12px !important;
        font-weight: 500 !important;
        border: 0px !important;
        outline: none !important;
        margin-bottom: 5px !important;
    }

    .cellNotification .btnGotoMessageNoti {
        margin-right: 5px;
        color: #C2185B;
    }

    .cellNotification .btnMarkAsViewedNoti {
        color: #607D8B;
    }

.panelLoginBody.pageIndex {
    padding: 0px !important;
}

    .panelLoginBody.pageIndex .panelLeft {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }

    .panelLoginBody.pageIndex .panelRight {
        float: none !important;
        display: block !important;
    }

.frmIndex .loginLogoIndex {
    text-align: center !important;
}

.frmIndex .panelRight .homeTitle {
    font-weight: 500;
    font-size: 13px;
    color: #333;
}

    .frmIndex .panelRight .homeTitle i {
        margin-right: 8px;
    }

.frmIndex .panelRight .e-btn {
    font-size: 13px !important;
    letter-spacing: 1px;
    font-weight: 500 !important;
    color: red !important;
    width: 100%;
    text-align: left;
    height: 38px;
    border: 0px !important;
    outline: none !important;
    border-radius: 3px !important;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    color: #fff !important;
    letter-spacing: 1px !important;
}

    .frmIndex .panelRight .e-btn i {
        font-weight: 700 !important;
        margin-right: 8px !important;
    }

.frmIndex .panelLoginBody .panelRight {
}

.btnHomeCV {
    margin-top: 0px !important;
    margin-bottom: 10px !important;
    color: #FCE4EC !important;
    background-color: #E91E63 !important;
}

    .btnHomeCV:hover {
        color: #fff !important;
        background-color: #D81B60 !important;
    }

.btnTestTV, .btnTestPV {
    margin-top: 0px !important;
    margin-bottom: 10px !important;
    color: #ECEFF1 !important;
    background-color: #607D8B !important;
}

    .btnTestTV:hover, .btnTestPV:hover {
        color: #fff !important;
        background-color: #546E7A !important;
    }

.btnHomePV {
    margin-top: 0px !important;
    margin-bottom: 10px !important;
    color: #E0F2F1 !important;
    background-color: #00796B !important;
}

    .btnHomePV:hover {
        color: #fff !important;
        background-color: #00695C !important;
    }

.btnHomeCrew {
    color: #E8EAF6 !important;
    background-color: #3F51B5 !important;
}

    .btnHomeCrew:hover {
        color: #fff !important;
        background-color: #3949AB !important;
    }


.btnOnBoardHome {
    margin-top: 0px !important;
    margin-bottom: 10px !important;
    color: #E0F2F1 !important;
    background-color: #00796B !important;
}

    .btnOnBoardHome:hover {
        color: #fff !important;
        background-color: #00695C !important;
    }

.frmIndex .panelRight .tgNow {
    margin-top: 18px;
    padding-top: 12px;
    margin-right: 6px;
    border-top: 2px dashed #E0E0E0;
    position: relative;
    width: 100%;
}


    .frmIndex .panelRight .tgNow .serverStatus i {
        margin-right: 5px;
    }

    .frmIndex .panelRight .tgNow .serverStatus {
        position: absolute;
        right: 2px;
        font-size: 10px;
        font-weight: 500;
        color: #009688;
        top: 16px;
    }

    .frmIndex .panelRight .tgNow .gio {
        font-size: 11px;
        font-weight: 400 !important;
        color: #B71C1C;
        width: 75px !important;
        letter-spacing: 0px !important
    }

        .frmIndex .panelRight .tgNow .gio i {
            font-weight: 700 !important;
        }

    .frmIndex .panelRight .tgNow .ngay {
        font-size: 11px;
        font-weight: 400 !important;
        color: #3F51B5;
        letter-spacing: 0px !important;
        width: 115px;
    }

span.wapperHistoryCrew {
    position: relative;
}

span.historyCount {
    position: absolute;
    top: -3px;
    right: 0px;
    font-size: 11px;
    font-weight: 400;
    color: #D32F2F;
    text-align: right;
    text-align: left;
    width: 50px;
    font-style: italic;
}


.headerPageTop {
    padding: 5px 5px;
    background-color: #fff !important;
    user-select: none;
    pointer-events: none;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

    .headerPageTop .lolgoheaderPageTop {
        text-align: left;
    }

    .headerPageTop .titleheaderPageTop {
        text-align: left;
        line-height: 32px;
        font-size: 14px !important;
        letter-spacing: 1px;
        font-weight: 500 !important;
        color: #303F9F;
        margin-top:3px !important;
        text-transform: uppercase;
    }

    .headerPageTop .lolgoheaderPageTop img {
        height: 28px;
        width: auto;
    }

@media (max-width: 700px) {
    .headerPageTop .lolgoheaderPageTop,
    .headerPageTop .titleheaderPageTop {
        text-align: center;
    }
}

.notiSentCV {
    padding: 10px;
    background-color: #E8F5E9;
    border: 1px solid #C5E1A5;
    color: #388E3C;
    font-weight: 400;
    line-height: 26px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

    .notiSentCV .sentCvName {
        font-weight: 500;
        color: #7B1FA2;
    }

    .notiSentCV .sentCvCode {
        font-weight: 500;
        color: #E64A19;
    }


.colBtnCrewSubmit .e-btn {
    font-size: 10px;
    height: 25px !important;
    font-weight: 500 !important;
    padding: 0px 8px;
    margin-top: 0px;
    margin-bottom: 5px;
    border: 0px !important;
    outline: none !important;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


    .colBtnCrewSubmit .e-btn.btnOk {
        color: #E8F5E9 !important;
        background-color: #4CAF50 !important;
    }

        .colBtnCrewSubmit .e-btn.btnOk:hover {
            color: #fff !important;
            background-color: #43A047 !important;
        }

    .colBtnCrewSubmit .e-btn.btnDelete {
        color: #FCE4EC !important;
        background-color: #E91E63 !important;
    }

        .colBtnCrewSubmit .e-btn.btnDelete:hover {
            color: #fff !important;
            background-color: #C2185B !important;
        }

        .colBtnCrewSubmit .e-btn:disabled,
        .colBtnCrewSubmit .e-btn.btnOk:disabled,
        .colBtnCrewSubmit .e-btn.btnDelete:disabled {
            background-color: #F5F5F5 !important;
            color: #9E9E9E !important;
            cursor: not-allowed;
            box-shadow: none !important;
        }


.miniUpload .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-type,
.miniUpload .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-size,
.miniUpload .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-status {
    display: inline-block;
    margin-right: 5px;
    font-size: 11px !important;
}

.miniUpload .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-name {
    font-size: 11px !important;
}

.miniUpload .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-status {
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0 !important;
}

.miniUpload .e-upload .e-upload-files .e-upload-file-list,
.miniUpload .e-bigger.e-small .e-upload .e-upload-files .e-upload-file-list {
    min-height: unset !important;
}

.e-tooltip-wrap.e-popup {
    background-color: #fff;
    border: 1px solid #388E3C;
    border-radius: 3px;
}

.e-tooltip-wrap .e-arrow-tip-inner.e-tip-right,
.e-tooltip-wrap .e-arrow-tip-inner.e-tip-left,
.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom,
.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
    color: #388E3C;
}

.e-tooltip-wrap {
    width: auto !important;
}

    .e-tooltip-wrap .e-tip-content {
        padding: 10px 15px;
        font-size: 13px;
        width: auto !important;
    }

.itemActives {
    border-bottom: 1px dashed #bdbdbd;
    padding-bottom: 5px;
    margin-bottom: 8px;
}

    .itemActives:last-child {
        border-bottom: 0px !important;
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
    }

    .itemActives .itemTitle i {
        margin-right: 5px;
    }

    .itemActives .itemTitle {
        font-weight: 400;
        font-size: 11px;
        color: #000;
        display: block !important;
    }

    .itemActives .itemTime {
        font-weight: 400;
        font-size: 10px;
        margin-right: 10px;
        color: #666;
        display: block !important;
        margin-top: 5px;
        font-style: italic;
    }

        .itemActives .itemTime i {
            margin-right: 5px;
        }

.txtRemarkEvalucation {
    height: 125px;
    background-color: #f5f5f5 !important;
    border-radius: 5px !important;
    overflow: auto !important;
}

    .txtRemarkEvalucation textarea {
        resize: none !important;
        border-bottom: 0px !important;
    }

.itemEvalucationRecord {
    padding-left: 10px;
}

.e-popup.e-popup-open.e-dialog.frmCrew {
    border: 3px solid #303F9F !important;
}
.frmCrew div.e-dlg-overlay {
    display: flex !important;
}
.jobCanceled {
    display: block;
    font-weight: 500;
    background-color: #FFEBEE !important;
    color: #D32F2F !important;
    padding: 5px 15px;
}

.jobClosed {
    display: block;
    font-weight: 500;
    background-color: #E0F2F1 !important;
    color: #00796B !important;
    padding: 5px 15px;
}

.jobOpen {
    display: block;
    font-weight: 500;
    background-color: #FFF3E0 !important;
    color: #E64A19 !important;
    padding: 5px 15px;
}

.itemMa.JobCategory {
    font-weight: 500;
    color: #303F9F;
}

.itemMa.Client {
    color: #C2185B;
}

.itemMa.Description {
    color: #666;
}

.brkLine {
    height: 1px;
    background-color: #E0E0E0;
    margin-top: 10px;
    margin-bottom: 10px;
}

.txtContentTask {
    height: 120px;
    border: 1px dashed #E0E0E0 !important;
    resize: none;
}

    .txtContentTask textarea {
        resize: none !important;
    }

.colPriority span {
    height: 20px !important;
    line-height: 20px !important;
    width: 65px;
    font-size: 11px;
    font-weight: 400 !important;
    display: inline-block !important;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.colTaskDescription {
    font-size: 12px;
    max-height: 46px;
    min-height: 46px;
    height: 46px;
    overflow: auto;
    line-height: 14px !important;
    white-space: pre-line;
    word-break: break-all;
    color: #000000;
    padding: 3px;
    margin-top:1px;
    margin-bottom:1px;
}
.colStartTimeTask {
    font-weight: 500;
    color: #303F9F;
}


.colJobOpen {
    background-color: #fafafa;
    color: #303F9F;
    font-weight:500;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    margin-top: 2px;
    width: 65px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.colJobClosed {
    background-color: #fafafa;
    color: #2E7D32;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    margin-top: 2px;
    width: 65px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.colJobCanceled {
    background-color: #fafafa;
    color: #9E9E9E;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    margin-top: 2px;
    width: 65px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.taskAssigned {
    background-color: #fafafa;
    color: #E91E63;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    margin-top: 2px;
    width: 65px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.taskDone {
    background-color: #fafafa;
    color: #2E7D32;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    margin-top: 2px;
    width: 65px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.taskProcessing {
    background-color: #fafafa;
    color: #009688;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    margin-top: 2px;
    width: 65px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.headerShipOwner {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 10px;
    background-color: #f5f5f5;
    padding: 10px 0px;
    margin-left: 10px;
    margin-right: 10px;
    user-select:none;
    letter-spacing:1px;
    color:#303F9F;
}
.txtPasswordShipOwner input{
    font-weight:700 !important;
    padding-left:10px !important;
    color:#388E3C !important;
}


.menuAppWrap .menuAppShipOwner {
    position: absolute;
    top: 0px;
    left: 220px;
    user-select: none;
    padding-top:2px;
}

.menuAppShipOwner .lblToolbarIconSearch {
    margin-top: 10px;
    display: inline-block;
    margin-right: 10px;
    color: #7B1FA2;
}

.menuAppShipOwner .e-input-group.e-control-wrapper {
    border: 1px solid #4CAF50 !important;
    padding: 3px 10px;
    border-radius: 3px !important;
    margin-right: 5px;
}
.menuAppShipOwner .wapper_input .btnOpen {
    position: absolute !important;
    top: 2px;
    right: 10px;
    padding: 0px !important;
    height: 23px !important;
    width: 15px !important;
    line-height: 28px !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    border: 0px !important;
}
.menuAppShipOwner .wapper_input .btnRemove {
    position: absolute !important;
    top: 5px;
    right: 25px;
    padding: 0px !important;
    height: 26px !important;
    width: 15px !important;
    line-height: 26px !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    border: 0px !important;
}
.menuAppShipOwner .btnReload {
    background-color: #388E3C !important;
    color: #fff !important;
    border:0px !important;
    border-radius:3px !important;
    letter-spacing:1px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
}
    .menuAppShipOwner .btnReload:hover {
        background-color: #2E7D32 !important;
    }


.MainBody.pageShipOwner .waper_grid.fullheight_grid .e-gridcontent .e-content.e-yscroll,
.MainBody.pageShipOwner .waper_grid.fullheight_grid .sf-grid .e-frozencontent {
    border-bottom: 0px !important;
    height: -moz-calc(100svh - 146px) !important;
    height: -webkit-calc(100svh - 146px) !important;
    height: calc(100svh - 146px) !important;
}

.MainBody.pageShipOwner .e-emptyrow td {
    position: absolute;
    width: 100%;
    background-color: #fff;
    height: -moz-calc(100svh - 150px) !important;
    height: -webkit-calc(100svh - 150px) !important;
    height: calc(100svh - 150px) !important;
    background-image: url('/images/no-results-found.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 286px 141px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    font-size: 0;
}

.btnViewCertShipOwner{
    width:100% !important;
    font-weight:500 !important;
    font-size:12px !important;
    text-align:left !important;
    background-color:transparent !important;
    box-shadow:none !important;
    border:0px !important;
    color:#D32F2F !important;
    cursor:pointer;
    text-decoration-skip-ink:auto !important;
}
.btnViewCertShipOwner:hover {
    text-decoration:underline !important;
}
.e-dialog.frmShipOwnerDocs .e-dlg-content .DefaultPadding {
    padding: 0px !important;
}



.dlgTest .e-richtexteditor .e-rte-content .e-content,
.dlgTest .e-richtexteditor .e-source-content .e-content {
    width: 100%;
    float: left;
    background: unset;
    box-sizing: border-box;
    height: 100%;
    min-height: unset;
    outline: 0 solid rgba(0, 0, 0, 0);
    padding: 8px;
    position: relative;
    text-align: inherit;
    z-index: 2;
    font-weight: normal;
    line-height: 18px;
    font-size: 13px;
    font-weight: 400;
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) {
    border-radius: 0px !important;
    margin: 0 0px;
    min-height: unset !important;
}

    .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item {
        min-height: unset !important;
    }

        .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item .e-btn,
        .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item .e-btn:hover {
            min-height: 28px;
            min-width: 28px;
            padding: 0 0px;
        }

.e-rte-quick-popup .e-rte-quick-toolbar .e-tbar-btn .e-icons.e-btn-icon:not(.e-caret) {
    font-size: 13px;
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item .e-tbar-btn:not(.e-rte-dropdown-btn) {
    line-height: 28px;
}

.e-rte-quick-popup .e-rte-quick-toolbar {
    min-height: unset !important;
}

.e-dialog.frmNoFooter .e-footer-content {
    display: none;
}

.dlgTest .e-richtexteditor .e-rte-toolbar.e-control[class*=e-toolbar],
.dlgTest .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar.e-control[class*=e-toolbar] {
    height: unset !important;
    overflow: unset !important;
    z-index: 99999999 !important;
}

.dlgTest .e-richtexteditor .e-rte-content,
.dlgTest .e-richtexteditor .e-rte-iframe-content {
    position: unset !important;
    z-index: 1 !important;
  
}
.e-rte-inline-popup.e-rte-quick-popup.e-rte-elements.e-popup.e-popup-open{
    max-width:100% !important;
    left:0px !important;
}

.cmbTraLoi input {
    text-align: center !important;
    font-weight: 700 !important;
    color: #388E3C !important;
}

.cellQuestion {
    font-size: 12px;
    max-height: 65px;
    overflow: auto;
    line-height: 18px;
    white-space: pre-line;
    word-break: break-all;
    color: #000000;
    padding: 3px;
    user-select: none;
}

    .cellQuestion::selection {
        color: #D32F2F;
        background: #FFEBEE;
    }


.loginLogoTest {
    user-select: none !important;
    pointer-events: none !important;
}

    .loginLogoTest img {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

.frmCodeTestPV .loginLogoTest {
    user-select: none !important;
    pointer-events: none !important;
    text-align:center;
}

    .frmCodeTestPV .loginLogoTest img {
        width: 300px;
        height: auto;
        margin-bottom: 10px;
    }

.txtTestCode {
}

    .txtTestCode input {
        color: #388E3C !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 10px !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

.btnDoExamOnline {
    width: 100%;
    margin-top: 10px;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    background-color: #E91E63 !important;
    color: #fff !important;
    height: 32px !important;
    line-height: 24px !important;
    border-radius: 3px !important;
    border: 0px !important;
    outline: none !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}

    .btnDoExamOnline i {
        margin-right: 10px !important;
        font-weight: 700 !important;
    }

    .btnDoExamOnline:hover {
        background-color: #C2185B !important;
        color: #fff !important;
    }

.btnBackExamOnline {
    width: 100%;
    margin-top: 5px;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    background-color: #607D8B !important;
    color: #fff !important;
    height: 32px !important;
    line-height: 24px !important;
    border-radius: 3px !important;
    border: 0px !important;
    outline: none !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}

    .btnBackExamOnline i {
        margin-right: 10px !important;
        font-weight: 700 !important;
    }

    .btnBackExamOnline:hover {
        background-color: #455A64 !important;
        color: #fff !important;
    }

.headerPageTop {
    padding: 5px 5px;
    background-color: #fff !important;
    user-select: none;
    pointer-events: none;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    margin-bottom: 10px;
}

    .headerPageTop .lolgoheaderPageTop {
        text-align: left;
    }

    .headerPageTop .titleheaderPageTop {
        text-align: left;
        padding-left: 20px;
        margin-top: -5px;
        font-weight: 400;
        font-size: 12px;
        letter-spacing: 1px;
        color: #303F9F !important;
    }

        .headerPageTop .titleheaderPageTop div {
            color: #5D4037 !important;
        }

    .headerPageTop .testFullName .testName {
        font-weight: 500;
        color: #303F9F;
    }

    .headerPageTop .testSubRow .testSubRank {
        font-weight: 500;
        color: #D32F2F;
    }

    .headerPageTop .testSubRow .testSubCode {
        font-weight: 500;
        color: #388E3C;
    }

    .headerPageTop .lolgoheaderPageTop img {
        height: 30px;
        width: auto;
        margin-top:5px;
    }

.divContentQuest {
    height: 460px !important;
    overflow: auto !important;
}

@media (max-width: 700px) {
    .headerPageTop .lolgoheaderPageTop,
    .headerPageTop .titleheaderPageTop {
        text-align: center;
        padding-left: 0px;
    }

    .lblTimeTestNow {
        text-align: center !important;
    }

    .divContentQuest {
        height: unset !important;
        overflow: scroll !important;
    }
}


.lblTimeTestNow {
    margin-top: 12px;
    font-size: 13px;
    color: #303F9F;
    text-align: left;
    width: 100%;
    padding-left: 0px;
    display: block !important;
    font-weight: 400;
    letter-spacing: 1px;
}

    .lblTimeTestNow .timeNowTest {
        font-weight: 700;
        font-size: 13px;
        color: red;
        letter-spacing: 1px;
    }

.testPageNow {
    line-height: 32px;
    color: #fff;
    text-align: center;
    width: 100%;
    display: block !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    background-color: #607D8B;
    height: 32px;
    margin-top: 5px;
    border-radius: 3px !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}

.btnTestTruocDo {
    width: 100%;
    margin-top: 5px;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    background-color: #388E3C !important;
    color: #E8F5E9 !important;
    height: 32px !important;
    line-height: 24px !important;
    border-radius: 3px !important;
    border: 0px !important;
    outline: none !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}

    .btnTestTruocDo i {
        margin-right: 10px !important;
        font-weight: 700 !important;
    }

    .btnTestTruocDo:hover {
        background-color: #2E7D32 !important;
        color: #fff !important;
    }

.btnTestTiepTheo {
    width: 100%;
    margin-top: 5px;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    background-color: #388E3C !important;
    color: #E8F5E9 !important;
    height: 32px !important;
    line-height: 24px !important;
    border-radius: 3px !important;
    border: 0px !important;
    outline: none !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}

    .btnTestTiepTheo i {
        margin-right: 10px !important;
        font-weight: 700 !important;
    }

btnTestTiepTheo:hover {
    background-color: #2E7D32 !important;
    color: #fff !important;
}

.lblTimeTestNow .doneDivR {
    letter-spacing: 0px !important;
    font-size: 11px;
}

    .lblTimeTestNow .doneDivR.chitiet:hover,
    .lblTimeTestNow .doneDivR.chitiet:hover .slDone,
    .lblTimeTestNow .doneDivR.chitiet:hover i {
        cursor: pointer !important;
        text-decoration: underline !important;
    }

        .lblTimeTestNow .doneDivR.chitiet:hover,
        .lblTimeTestNow .doneDivR.chitiet:hover i {
            color: #303F9F;
        }

    .lblTimeTestNow .doneDivR i {
        margin-right: 3px;
    }

    .lblTimeTestNow .doneDivR:nth-child(1) {
        margin-top: -8px;
        color: #5D4037;
    }

    .lblTimeTestNow .doneDivR .tgDone {
        color: #5D4037;
        padding-left: 2px;
        padding-right: 2px;
        font-weight: 500;
    }

    .lblTimeTestNow .doneDivR:nth-child(2) {
        margin-top: 0px;
        color: #5D4037;
    }

    .lblTimeTestNow .doneDivR .slDone {
        color: #D32F2F;
        font-weight: 500;
        display: inline-block;
        font-size: 13px;
        display: inline-block;
        margin-left: 2px;
        margin-right: 2px;
    }

.footerQuest {
    border-top: 1px solid #E0E0E0;
    padding-top: 2px;
}

.btnTestTruocDo:disabled,
.btnTestTiepTheo:disabled {
    background-color: #F5F5F5 !important;
    box-shadow: none !important;
    color: #9E9E9E !important;
}


.btnTestGuiBai {
    width: 100%;
    margin-top: 5px;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    background-color: #C2185B !important;
    color: #FCE4EC !important;
    height: 32px !important;
    line-height: 24px !important;
    border-radius: 3px !important;
    border: 0px !important;
    outline: none !important;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

    .btnTestGuiBai i {
        margin-right: 10px !important;
        font-weight: 700 !important;
    }

    .btnTestGuiBai:hover {
        background-color: #AD1457 !important;
        color: #fff !important;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }


.btnTestGuiBai2 {
    width: 100%;
    margin-top: 5px;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    background-color: #C2185B !important;
    color: #FCE4EC !important;
    height: 32px !important;
    line-height: 24px !important;
    border-radius: 3px !important;
    border: 0px !important;
    outline: none !important;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

    .btnTestGuiBai2 i {
        margin-right: 10px !important;
        font-weight: 700 !important;
    }

    .btnTestGuiBai2:hover {
        background-color: #AD1457 !important;
        color: #fff !important;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }


.questionCode {
    font-weight: 500;
    font-size: 13px;
    color: #C2185B;
    margin-top: 5px;
    padding-left: 5px;
    display: none;
}

    .questionCode i {
        margin-right: 5px;
    }

.questionDetail {
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 20px;
    margin-bottom: 15px;
    position: relative;
    margin-top: 10px;
    padding: 10px;
    padding-top: 5px;
    padding-left: 5px;
    margin-right: 5px;
    background-color: #fff;
    user-select: none;
    pointer-events: none;
}

    .questionDetail .iconQuestion {
        display: none;
        position: absolute;
        top: -12px;
        left: 5px;
        color: #9C27B0;
        font-size: 16px;
        background-color: #fff;
        padding-right: 5px;
        padding-left: 5px;
        font-weight: 400 !important;
    }

.questionAnswer {
    font-size: 13px;
    font-weight: 400;
    margin-top: 10px;
    padding: 10px;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-right: 5px;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    position: relative;
}

    .questionAnswer img {
        user-select: none;
        pointer-events: none;
    }

    .questionAnswer:hover {
        border-color: #388E3C;
        cursor: pointer;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }



    .questionAnswer.dachon {
        border: 2px solid #FFA000;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

    .questionAnswer .questionAbc {
        font-weight: 500;
        position: absolute;
        top: -10px;
        left: 10px;
        background-color: #9E9E9E;
        font-size: 11px;
        color: #fff !important;
        height: 18px;
        width: 18px;
        text-align: center;
        border-radius: 50%;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }

    .questionAnswer.dachon .questionAbc {
        background-color: #FFA000;
        color: #fff !important;
    }

.btnQuestionCount {
    width: 100%;
    font-size: 11px !important;
    color: #C2185B;
}

    .btnQuestionCount:hover {
        color: #C62828;
        text-decoration: underline;
    }


.dalamxong .questionAnswer {
    box-shadow: none !important;
}

    .dalamxong .questionAnswer:hover {
        box-shadow: none !important;
        cursor: default !important;
        border: 1px solid #bdbdbd;
    }



.dalamxong.chondung .questionAnswer.dachon {
    border: 2px solid #388E3C;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
}

    .dalamxong.chondung .questionAnswer.dachon .questionAbc {
        background-color: #388E3C;
    }

.dalamxong.chonsai .questionAnswer.dachon {
    border: 2px solid #D32F2F;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
}

    .dalamxong.chonsai .questionAnswer.dachon .questionAbc {
        background-color: #D32F2F;
    }

.tblResultOnline {
    width: 100%; /* Độ rộng 100% */
    border-collapse: collapse; /* Gộp các border của các ô */
}
    /* Thiết lập cho header của bảng */
    .tblResultOnline th {
        background-color: #E8EAF6; /* Màu nền của header */
        color: #303F9F !important; /* Màu chữ */
        padding: 5px; /* Khoảng cách giữa nội dung và viền */
        border: 1px solid #CFD8DC; /* Viền của header */
        text-align: left; /* Căn lề trái */
        font-weight: 500 !important;
        font-size: 13px;
        text-align: center;
        text-transform: uppercase;
    }

    /* Thiết lập cho các ô dữ liệu */
    .tblResultOnline td {
        padding: 5px;
        border: 1px solid #ddd;
        font-size: 13px;
        text-align: center;
    }

        .tblResultOnline th:nth-child(1),
        .tblResultOnline td:nth-child(1) {
            text-align: left;
            color: #333;
            font-weight: 400;
        }

        .tblResultOnline td:nth-child(2),
        .tblResultOnline td:nth-child(3),
        .tblResultOnline td:nth-child(4),
        .tblResultOnline td:nth-child(5) {
            width: 90px;
            font-weight: 400;
            letter-spacing: 1px;
        }
    /* Hiệu ứng hover cho các hàng */
    .tblResultOnline tr:hover {
    }

    .tblResultOnline td:nth-child(1) {
        color: #333;
        font-weight: 500;
    }

    .tblResultOnline td:nth-child(3) {
        color: #2E7D32;
        font-weight: 500;
    }

    .tblResultOnline td:nth-child(4) {
        color: #E64A19;
    }

    .tblResultOnline td:nth-child(5) {
        color: #9E9E9E;
    }

.imgAvatarCrewTest img {
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 10px;
    margin-top:7px;
}

.e-dialog.frmCodeTestOnline.frmResultTestCode.e-popup-open {
}

.e-dlg-container.frmIndex.frmNoFooter.frmCodeTestOnline.frmResultTestCode {
    z-index: 999999999999 !important;
}

.e-dialog.frmResultTestCode .e-dlg-header,
.e-dialog.frmResultTestCode .e-dlg-header i {
    color: #00796B;
    letter-spacing: 1px;
    line-height: 20px;
    font-size: 14px;
}

.e-dialog.frmResultTestCode.e-popup-open {
    border: 3px solid #00796B !important;
    opacity: 1;
}

.timelineLogs {
    height: calc(100svh - 129px);
    max-height: calc(100svh - 139px);
    overflow: auto;
    background-color: #fff;
}

    .timelineLogs .tgSlog {
        font-weight: 400;
        font-size: 12px;
        user-select: none;
        margin-top: 10px;
        margin-left: 0px;
    }

        .timelineLogs .tgSlog .slogTgAgo {
            font-weight: 500;
            color: #303F9F;
        }

            .timelineLogs .tgSlog .slogTgAgo i {
                margin-right: 6px;
                font-weight: bold !important;
            }

    .timelineLogs.noti .tgSlog .slogTgAgo,
    .timelineLogs.noti .tgSlog .slogTgNow {
        display: block;
    }

    .timelineLogs.noti .tgSlog .slogTgAgo {
        margin-top: -10px;
    }

    .timelineLogs .tgSlog .slogTgNow {
        font-weight: 400;
        margin-left: 10px;
        color: #666;
        font-size: 11px;
        letter-spacing: 1px;
        margin-right: 10px;
    }

    .timelineLogs.noti .tgSlog .slogTgNow {
        margin-right: -12px;
        margin-top: 10px;
        color: #333
    }

        .timelineLogs.noti .tgSlog .slogTgNow i {
            color: #bdbdbd !important;
        }

    .timelineLogs .msgSlog {
        font-weight: 400;
        font-size: 12px;
        color: #000000;
        display: inline-block;
        line-height: 23px;
    }

    .timelineLogs .e-timeline-item.e-connector {
        padding-bottom: 25px;
    }

    .timelineLogs div.imgUserAvatar img {
        margin-top: 1px;
        margin-bottom: 1px;
        vertical-align: middle !important;
        height: 35px !important;
        width: 35px !important;
        border-radius: 50%;
        margin-top: -40px;
        margin-bottom: 5px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
        user-select: none;
        pointer-events: none;
    }

    .timelineLogs .divRow1 .username {
        font-size: 13px;
        font-weight: 500;
        color: #D32F2F;
        border-radius: 5px;
        letter-spacing: 1px;
        display: block;
        margin-top: 0px;
        user-select: none;
        pointer-events: none;
    }

    .timelineLogs .divRow1 .fullname {
        font-size: 12px;
        font-weight: 400;
        color: #303F9F;
        display: block;
        margin-top: 5px;
        user-select: none;
        pointer-events: none;
    }

    .timelineLogs .divRow1 .username,
    .timelineLogs .divRow1 .fullname,
    .timelineLogs .divRow1 .department {
        margin-right: -10px;
    }

        .timelineLogs .divRow1 .username i,
        .timelineLogs .divRow1 .fullname i,
        .timelineLogs .divRow1 .department i {
            color: #bdbdbd !important;
            font-size: 11px;
        }

    .timelineLogs .e-opposite-content {
        padding-bottom: 20px;
    }

    .timelineLogs.noti .e-opposite-content {
        padding-bottom: 10px;
    }

    .timelineLogs .divRow1 .department {
        font-size: 10px;
        font-weight: 400;
        color: #388E3C;
        letter-spacing: 1px;
        display: block;
        margin-top: 5px;
        background-color: #f5f5f5 !important;
        padding: 5px 10px !important;
        margin-right: -20px;
        margin-bottom: 20px !important;
        user-select: none;
        pointer-events: none;
    }

    .timelineLogs .e-timeline-items {
        padding-top: 30px !important;
    }

    .timelineLogs .msgSlog {
        margin-top: 15px;
        margin-bottom: 10px;
        padding: 5px 10px;
        border-radius: 5px;
        background-color: #FAFAFA;
        margin-left: -25px;
        padding-left: 25px;
    }

    .timelineLogs .slogUser {
        display: inline-block;
    }

    .timelineLogs .logId {
        display: inline-block;
        color: #7B1FA2;
        font-size: 11px;
        font-weight: 400 !important;
        font-style: italic;
    }

        .timelineLogs .logId i {
            margin-right: 6px;
        }

    .timelineLogs .slogOppositeContent {
        display: inline-block;
        margin-top: -20px;
        margin-left: 5px;
    }

    .timelineLogs .Insert .e-dot {
        background: #4CAF50;
    }

    .timelineLogs .Update .e-dot {
        background: #2196F3;
    }

    .timelineLogs .Delete .e-dot {
        background: #F44336;
    }

    .timelineLogs .View .e-dot {
        background: #26A69A;
    }

    .timelineLogs .Download .e-dot {
        background: #AB47BC;
    }

    .timelineLogs.noti .read .e-dot {
        background: #bdbdbd;
    }

    .timelineLogs.noti .unread .e-dot {
        background: #F57C00;
    }

    .timelineLogs .notiStatus {
        margin-top: 10px;
        margin-right: -12px;
        font-weight: 500;
    }

        .timelineLogs .notiStatus.read {
            color: #9E9E9E;
            font-weight: 400;
            font-size: 11px;
            letter-spacing: 1px;
        }

        .timelineLogs .notiStatus.unread {
            color: #C2185B;
        }



    .timelineLogs p.khongcodulieu {
        font-weight: 400 !important;
        margin-left: 10px;
        font-size: 13px;
        letter-spacing: 1px;
        background-color: #fafafa;
        display: inline-block;
        padding: 5px 15px;
        user-select: none;
        border-radius: 5px;
        color: #9E9E9E;
        font-style: italic;
    }

    .timelineLogs.oneCol .e-opposite-content {
        flex: 1 1 100%;
    }

    .timelineLogs.oneCol .e-content {
        flex: 0 0 200px;
    }

    .timelineLogs.oneCol .e-timeline-item.e-connector::after {
        top: 0;
        bottom: 0;
        left: 220px;
        right: auto;
        content: "";
        position: absolute;
        z-index: 999;
        border-width: var(--connector-size);
        border-style: solid;
    }

    .timelineLogs.oneCol.noti .e-content {
        flex: 0 0 130px;
    }

    .timelineLogs.oneCol.noti .e-timeline-item.e-connector::after {
        left: 150px;
    }

    .timelineLogs .lstBtnNoti .btnGotoMessageNoti,
    .timelineLogs .lstBtnNoti .btnMarkAsViewedNoti {
        font-weight: 500;
        font-size: 11px;
        background-color: #fff;
        border: 0px;
        padding: 0px;
    }

    .timelineLogs .lstBtnNoti .btnGotoMessageNoti {
        color: #5D4037;
    }

        .timelineLogs .lstBtnNoti .btnGotoMessageNoti:hover {
            color: #C2185B;
        }

    .timelineLogs .lstBtnNoti .btnMarkAsViewedNoti {
        color: #303F9F;
        margin-left: 25px;
    }

        .timelineLogs .lstBtnNoti .btnMarkAsViewedNoti:hover {
            color: #C2185B;
        }

    .timelineLogs.noti .contentNotification .userUserNameNoti {
        font-weight: 500;
        font-size: 13px !important;
        color: #2E7D32;
    }

        .timelineLogs.noti .contentNotification .userUserNameNoti:before {
            font-family: "Font Awesome 6 Pro";
            content: '\f007';
            margin-right: 5px;
        }

    .timelineLogs.noti .contentNotification .userFullNameNoti {
        font-weight: 500;
        color: #C62828;
    }

    .timelineLogs.noti .contentNotification .crewRankNoti {
        font-weight: 500;
        color: #7B1FA2;
    }

    .timelineLogs.noti .contentNotification .crewFullNameNoti {
        font-weight: 500;
        color: #7B1FA2;
        margin-left: 5px;
    }

    .timelineLogs.noti .contentNotification .crewCodeNoti {
        font-weight: 500;
        color: #7B1FA2;
        margin-left: 5px;
    }

.txtCommentCrew {
}

    .txtCommentCrew .e-richtexteditor .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
    .txtCommentCrew .e-richtexteditor .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) .e-toolbar-item.e-toolbar-popup .e-tbar-btn.e-btn,
    .txtCommentCrew .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-tbar-btn.e-btn {
        min-height: 40px;
        min-width: 35px;
        padding: 0;
    }

.divLstFileDocs{
    max-height:480px;
    overflow:auto;
    margin-bottom:15px;
    font-size:13px;
    font-weight:400;
}
    .divLstFileDocs.inCrews {
        max-height: 200px;
    }
    .divLstFileDocs i {
        margin-right: 5px;
    }
    .divLstFileDocs .itemFileDoc {
        border-bottom: 1px dashed #CFD8DC;
        margin-bottom: 5px;
    }
    .divLstFileDocs .itemFileDoc:last-child{
        margin-bottom:0px;
        border-bottom:0px;
    }
        .divLstFileDocs .itemFileDoc .spanPreviewFile {
            color: #7B1FA2;
        }
        .divLstFileDocs .itemFileDoc .spanDownloadFile {
            color: #303F9F !important;
        font-style:normal;
        }
        .divLstFileDocs .itemFileDoc .spanDeleteFile {
            color: #D32F2F !important;
            font-style: normal;
        }
.colStackedDocName{
    font-size:13px !important;
    font-weight:500 !important;
    color:#000 !important;
}
.waper_grid .e-grid .e-rowcell:has(.lastCell),
.waper_grid .e-grid .e-headercell:has(.lastCell) {
    border-right: 1px solid #C2185B !important;
}
.waper_grid .e-grid .e-rowcell .fileShipOwner {
    font-weight: 500;
    cursor: pointer;
    color: #303F9F;
}
.waper_grid .e-grid .e-rowcell .fileShipOwner:hover {
    color:#C2185B;
}
.waper_grid .e-grid .e-rowcell .fileShipOwner i{
   
}

    .waper_grid .e-grid .e-rowcell .fileShipOwner .btnView {
        background-color: #f5f5f5;
        padding: 5px 0px;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
        margin-right: 2px;
        width: 30px;
        display: inline-block;
    }

    .waper_grid .e-grid .e-rowcell .fileShipOwner .btnDown {
        background-color: #f5f5f5;
        padding: 5px 0px;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
        width: 30px;
        display: inline-block;
    }