/*PAGE INDEX******************************************************************************************************************
    - For show message on the top of the page
    - Cdn Command Button
    */

/*DevExpress Control Custom CSS******************************************************************************************/
/*ASPxGridView vertical scrollbar height*/
/*
    We must using this css because we set vertical scrollbar for ASPxGridView, its default height is 200px,
    ASPx will have height space 200px
    */
/*.dxgvCSD
    {
        height: auto !important;
        max-height: 600px !important;
    }*/

/*Page CSS***************************************************************************************************************/
/*
    For ignore border, padding when set width of element.
    The normal way: element's width = declared css width + padding + border
    This way: element's width = declared css width
    */
.no-boder-left {
    border-left: none !important;
}

.search-textbox-left-radius {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

/*Login Page*/
#divChangelanguage .dxeHLC, #divChangelanguage .dxeHC, #divChangelanguage .dxeHFC, #divChangelanguage .dxeHIC {
    display: none;
}

#fvPayTimeSetting .dxeHLC, #fvPayTimeSetting .dxeHC, #fvPayTimeSetting .dxeHFC, #fvPayTimeSetting .dxeHIC {
    display: none;
}

.dxbDisabled_MetropolisBlueCadena {
    opacity: 0.5;
}

.gridview-cell-readonly .dxICheckBox_MetropolisBlueCadena {
    opacity: 0.5;
}

.full-width {
    width: 100%;
}

.truncated {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-size {
    box-sizing: border-box;
}

/*For show message on the top of the page. This is a style of text and icon color*/

.error-message-panel {
    background: #FFC8C8; /*Using this color for the same with DevExpress Error Style*/
    border: 1px solid red;
}

.warning-message-panel {
    background: #FFFBB3;
    border: 1px solid #E5E551;
}

.success-message-panel {
    background: #d9edf7;
    border: 1px solid #2FA3BB;
}

.errorMainMessage {
    font-size: 12px !important;
    font-family: Arial, sans-serif !important; /*color: #BA1307;*/
    color: red;
}

.warningMainMessage { /*padding-left: 20px;*/
    font-size: 12px !important;
    font-family: Arial, sans-serif !important;
    color: #EE7A39;
}

.successMainMessage { /*padding-left: 20px;*/
    font-size: 12px !important;
    font-family: Arial, sans-serif !important;
    color: #0d74ba;
}

    .errorMainMessage:before, .warningMainMessage:before, .successMainMessage:before {
        content: "\f456";
        font-family: 'Genericons';
        font-size: 20px;
        vertical-align: middle;
        margin-right: 5px; /*position: absolute;*/
        left: 10px;
        line-height: 14px;
    }

.popup-error-message {
    background: #FFC8C8; /*Using this color for the same with DevExpress Error Style*/
}

    .popup-error-message > tbody > tr > td {
        background: #FFC8C8 !important; /*Using this color for the same with DevExpress Error Style*/
    }

#divPnlInfor {
    padding: 15px 10px !important;
}

#divPageInformationContent {
    padding: 0 !important;
}

    #divPageInformationContent > span { /*margin-left: 25px;*/
        margin-right: 10px;
        display: inline-table;
    }

/*#divPageInformationContent > span:before {
            content: "\f456";
            font-family: 'Genericons';
            font-size: 20px;
            vertical-align: middle;
            margin-right: 5px;
            position: absolute;
            left: 10px;
            line-height: 14px;
        }*/
/*For show error message when validate input control*/
/*with arrow*/
.errorTooltip {
    display: inline;
    position: absolute;
    z-index: 9999999 !important;
}

    .errorTooltip:hover::after {
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        bottom: 24px;
        color: #fff; /*content: attr(title);*/
        content: attr(data-tooltip);
        left: 6%;
        padding: 5px 5px;
        position: absolute;
        z-index: 9899999 !important;
        width: 120px;
    }

    .errorTooltip:hover:before {
        border: solid;
        border-color: #333 transparent;
        border-width: 6px 6px 0 6px;
        bottom: 20px;
        content: "";
        left: 25%;
        position: absolute;
        z-index: 9999999 !important;
    }

.floatleft {
    float: left;
}
/*with not arrow*/
.pcContainter .dxpc-mainDiv {
    border-radius: 5px;
}

.pcContent {
    background-color: #B2DAEB;
    border: transparent; /*background-color: Yellow;*/ /*background: #333;
            background: rgba(0,0,0,.8);*/
    border-radius: 5px; /*color:white !important;*/
}

.imgButton {
    cursor: pointer;
    padding-left: 10px;
}

.command-button-list {
    padding: 0;
    margin: 0;
}

    .command-button-list > li {
        float: left;
        list-style: none;
        text-align: center; /*border-right:1px solid #DAE5F2;*/
        border-right: 1px solid #FFFFFF;
        padding: 0 10px;
        cursor: pointer;
        line-height: 28px;
    }

    .command-button-list li:last-child {
        border-right: none;
    }

    .command-button-list li.hover:hover {
        background-color: #FCF9DF !important;
    }

.text-button-command { /*display:none;*/
    display: normal;
}

.command-button-size {
    width: 12px;
    height: 12px;
    float: left;
    margin-top: 6px;
    margin-right: 3px;
    text-decoration: none !important; /*color:black !important;*/
}

.command-button-size-hover {
    background-color: #FCF9DF !important;
}

.command-button-module-management {
    width: 16px;
    height: 16px;
    position: absolute;
    cursor: pointer;
}

    .command-button-module-management:hover {
        background-color: #FCF9DF;
        opacity: 0.7;
    }

.button-icon-no-display {
    display: none;
}

.content {
    padding-top: 5px;
    height: 100%;
    background-color: #F9F9F9;
}

/*Dashboard page*********************************************************************************************************/
.previousDashboard {
    background: url('Images/TempIcon/NavigateLeft_Blue.png');
    width: 32px;
    height: 32px;
}

.nextDashboard {
    background-image: url('Images/TempIcon/NavigateRight_Blue.png');
    width: 32px;
    height: 32px;
}

/*ASPxDataView in AssignCompetency.ascx*/
.module-item {
    border: 1px solid #bdcbdf;
    border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    width: auto !important; /*height: auto !important;*/
    padding: 0 !important;
}

    .module-item:hover {
        border-color: #f2ca58;
    }

.item-spacing {
    margin-left: 10px !important;
    margin-top: 10px !important;
}

.new-line {
    margin-bottom: 2px;
}

.border-radius-style {
    border: 1px solid #8BA0BC;
    border-radius: 5px;
}

.caption-groupbox-style {
    color: #8BA0BC;
    font-weight: bold;
}

.groupbox-container {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    margin: 0;
}

#lblMessageCreatUser span.errorMainMessage:before {
    left: 20px !important;
}
/*ASPxGridview format**********************************************************************************************************************************/
/*.header-gridview {
    height:17px;
}*/
/*.pnlMessageCreateUser_RPC {
    margin-right: 10px;
}*/
/*#lblMessageCreatUser span.errorMainMessage {
    margin-left: 20px !important;
}*/
.gridview-title-text {
    width: 1%;
    white-space: nowrap;
    padding-left: 5px;
    line-height: 25px;
    text-align: left;
    vertical-align: middle;
    color: #0072C6;
}

.wrap-content {
    width: 1%;
    white-space: nowrap;
}

/*
    Using for LayoutGroup in ASPxFormlayout. We don't modify theme because Page have multiple LayoutGroup
    will display incorrectly.

    */
.no-margin-bottom {
    margin-bottom: 2px !important;
}

/*Remove padding of header of ASPxRoundPanel*/
.remove-padding {
    padding: 0 !important;
}

/*ASPxPopupControl format*/
.popup { /*min-width:600px;
    min-height:400px;*/
    min-width: 500px;
    min-height: 300px;
    max-width: 700px;
    max-height: 500px; /*width:300px !important;
    height:300px !important;*/
}

    .popup .dxpc-contentWrapper {
        width: auto !important;
    }

        .popup .dxpc-contentWrapper .content {
            width: auto !important;
            margin-right: 10px; /*height:auto !important;*/
        }

/*.popup .gridview {
        min-width:500px;
        max-width:700px;
    }*/

/*Confirm Dialog**********************************************************************/
#tbDialogBox_ConfirmDialogControl td > * {
    vertical-align: middle;
}

.line-spacing {
    height: 2px;
}

.no-padding {
    padding: 0;
}

/*Using on OrgChartManagement.ascx. This css adjust height of content of Pane.*/
.full-height {
    height: 100% !important;
}

    .full-height > div {
        height: 100% !important;
    }

.no-padding div.dxb {
    padding: 0 1px !important;
}

.staffing-data-setup-header {
    width: 100%;
    height: 30px;
    border: 1px solid #8ba0bc;
    border-bottom: 0;
    box-sizing: border-box;
    text-align: center;
    padding: 5px 0 0 5px;
}

/*For custom ASPxPopup control*/
.dxpc-content {
    height: 100%;
}

/**/
.center-text-align {
    text-align: center !important;
}
/*For Padding caption style********************************************************************************/
.Padding-left-none .dxflGroup {
    padding-left: 0 !important;
}

.Padding-top-none .dxflGroup {
    padding-top: 0 !important;
}

.Padding-left-none .dxflGroupCell {
    padding-left: 0 !important;
}

.Padding-top-none .dxflGroupCell {
    padding-top: 0 !important;
}

.Rpn-Padding-4 .dx-borderBox.dxrpCW {
    padding-left: 4px !important;
    padding-right: 4px !important;
}
/*For ASPxFormView caption style********************************************************************************/
.caption-width-general-info {
    width: 150px !important;
    max-width: 170px !important;
    min-width: 150px !important;
    white-space: normal;
}

/*For Import Real Time Attendance*/
.caption-width-general-info-import-real-time-attendance {
    width: 155px !important;
    max-width: 170px !important;
    min-width: 155px !important;
    white-space: normal;
}

.caption-width-general-info-edit155 {
    width: 155px !important;
    max-width: 170px !important;
    min-width: 155px !important;
    white-space: normal;
}

.caption-width-general-info-edit130 {
    width: 130px !important;
    max-width: 150px !important;
    min-width: 130px !important;
    white-space: normal;
}

.caption-width-general-info-edit115 {
    width: 115px !important;
    max-width: 115px !important;
    min-width: 115px !important;
    white-space: normal;
}

.caption-width-general-info-ess {
    width: 100px !important;
    max-width: 90px !important;
    min-width: 150px !important;
    white-space: normal;
}

/*For ASPxFormView caption style of Working Hour Adjustment********************************************************************************/
.caption-width-general-info-edit-iras {
    width: 300px !important;
    max-width: 320px !important;
    min-width: 300px !important;
    white-space: normal;
}

/*For ASPxFormView caption style of Working Hour Adjustment********************************************************************************/
.caption-width-general-info-edit-adjust {
    width: 190px !important;
    max-width: 200px !important;
    min-width: 190px !important;
    white-space: normal;
}

/*For ASPxFormView caption style of Quick Configuration - Annual Leave Policy ********************************************************************************/
.caption-width-general-info-paytime-cloud {
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
    white-space: normal;
}

.alignLayoutItem {
    width: 300px;
}

/*Text-Overlow-Multiline*****************************************************************************************/
.ellipsis-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*Style for some ASPxButton with '...' text**********************************************************************/

.cdn_button_height {
    padding: 0px !important;
}

    .cdn_button_height > div {
        padding: 3px 7px 2px !important;
        border: none !important;
    }

        .cdn_button_height > div > span {
            padding: 1px 1px 3px 1px !important;
        }

/*.cdn_button_height_onGrid
{
    height: 20px !important;
}*/

.cdn_button_height_onGrid {
    padding: 0px !important;
    height: 20px !important;
}

    .cdn_button_height_onGrid > div {
        padding: 3px 7px 2px !important;
        border: none !important;
    }

        .cdn_button_height_onGrid > div > span {
            padding: 1px 1px 3px 1px !important;
        }

/*FromLayout LayoutGroup and CaptionCell**********************************************************************/
/*.dxflGroup {
    padding: 0px 0px 0px 0px !important;
}

.dxflGroupCell {
    padding: 0px 3px 0px 3px !important;
}

.dxflCaptionCell {
    padding: 3px 6px 3px 6px !important;
}

td .dxflGroupCell {
    padding-left: 0 !important;
}*/

/*.dxflGroup .dxflCaptionCell {
    padding-left: 0px !important;
}*/

/*Cdn MessageBox**********************************************************************************************/
.cdnConfirmOverlayClass {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: normal;
    font-family: Arial, sans-serif;
    width: 100%; /*height: 100%;*/
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(255, 255, 255, 0.498039);
    z-index: 12000;
}

    .cdnConfirmOverlayClass .cdnConfirmBox {
        background: white;
        z-index: 12001;
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        display: inline-block;
        min-width: 250px;
        max-width: 300px;
        border: 1px solid #0072C6;
        padding: 10px;
        padding-top: 20px; /*border-radius:4px;box-shadow:10px 10px 5px #888888;*/
        box-sizing: border-box;
    }

/*Cdn Collapse Button of Collapse panel********************************************************************/

.genericon img {
    display: none;
}

.collapse-expand-button-color { /*color: #0072c6;*/
    color: #0067aa;
}

/*Cdn Command Button***************************************************************************************/
.command-button {
    background-color: transparent !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    border: none !important;
}

    .command-button .command-icon {
        padding-left: 15px;
        background-size: 12px 12px !important;
        background-position: 5px center !important;
    }

.command-button-icon-disable {
    opacity: 0.5;
}

.command-button-icon-separator {
    width: 1px !important;
    background: white !important;
}

.auto-assign-command-icon {
    background: url('/Content/Images/Icon/auto-assign-16.png') no-repeat !important;
}

.add-command-icon {
    background: url('/Content/Images/Icon/add.png') no-repeat !important;
}

.update-command-icon {
    background: url('/Content/Images/Icon/edit12.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.delete-command-icon {
    background: url('/Content/Images/Icon/deletered_16x16.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.remove-command-icon {
    background: url('/Content/Images/Icon/deletered_16x16.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.print-command-icon {
    background: url('/Content/Images/Icon/printer.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.send-command-icon {
    background: url('/Content/Images/Icon/send-16.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.import-command-icon {
    background: url('/Content/Images/Icon/import-16.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.export-command-icon {
    background: url('/Content/Images/Icon/export-16.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.save-command-icon {
    background: url('/Content/Images/TempIcon/save24.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.save-and-close-command-icon {
    background: url('/Content/Images/TempIcon/save24.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.ok-command-icon {
    background: url('/Content/Images/Icon/ok.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.view-history-command-icon {
    background: url('/Content/Images/Icon/history-16.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.view-detail-command-icon {
    background: url('/Content/Images/Icon/information16.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.execute-command-icon {
    background: url('/Content/Images/Icon/execute.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.openreport-command-icon {
    background: url('/Content/Images/Icon/open-report.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.rehire-command-icon {
    background: url('/Content/Images/Icon/ok.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.select-command-icon {
    background: url('/Content/Images/Icon/ok.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.clear-command-icon {
    background: url('/Content/Images/TempIcon/clear.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.cancel-command-icon {
    background: url('/Content/Images/TempIcon/cancel.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.approve-command-icon {
    background: url('/Content/Images/Icon/approve.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.resetpassword-command-icon {
    background: url('/Content/Images/Icon/change-password-16.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.unapprove-command-icon {
    background: url('/Content/Images/Icon/cancel.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.close-command-icon {
    background: url('/Content/Images/Icon/close-16.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.revert-command-icon {
    background: url('/Content/Images/Icon/revert-16.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.lock-command-icon {
    background: url('/Content/Images/Icon/lock_yellow.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.locktimesheet-command-icon {
    background: url('/Content/Images/Icon/lock-time-sheet-16.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.unlock-command-icon {
    background: url('/Content/Images/Icon/unlock-time-sheet-16.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.search-command-icon {
    background: url('/Content/Images/TempIcon/Search20.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.employee-profile-command-icon {
    background: url('/Content/Images/Icon/EmployeeProfile.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.appraisal-profile-command-icon {
    background: url('/Content/Images/Icon/checklist.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.training-profile-command-icon {
    background: url('/Content/Images/Icon/Training.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.nav-command-icon {
    background-size: 12px 12px !important;
}

.active-command-icon {
    background: url('/Content/Images/Icon/approve.png') no-repeat; /*opacity: 0.2;*/
    background-size: 16px 16px;
}


.arrow-down-icon {
    background: url('/Content/Images/Icon/arrow-down.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.arrow-up-icon {
    background: url('/Content/Images/Icon/arrow-up.png') no-repeat !important;
    background-size: 12px 12px !important;
}

.inactive-command-icon { /*background: url('/Content/Images/TempIcon/cancel.png') no-repeat;*/
    background: url('/Content/Images/Icon/icon_remove.png') no-repeat; /*opacity: 1.0;*/
    background-size: 16px 16px;
}

.analyzeData-command-icon {
    background: url('/Content/Images/Icon/analyzed-16.png') no-repeat;
    background-size: 16px 16px;
}

/*Using for Service Management*/
.run-command-icon {
    background: url('/Content/Images/Icon/run.png') no-repeat;
    background-size: 16px 16px;
}

.stop-command-icon {
    background: url('/Content/Images/Icon/stop.png') no-repeat;
    background-size: 16px 16px;
}

.pause-command-icon {
    background: url('/Content/Images/Icon/pause.png') no-repeat;
    background-size: 16px 16px;
}

.resume-command-icon {
    background: url('/Content/Images/Icon/resume.png') no-repeat;
    background-size: 16px 16px;
}

/*.resume-command-icon {
    background: url('/Content/Images/Icon/resume.png') no-repeat;
    background-size: 16px 16px;
}*/

.install-button-icon {
    background: url('/Content/Images/TempIcon/math-add-icon.png') no-repeat;
    background-size: 16px 16px;
}

.uninstall-button-icon {
    background: url('/Content/Images/TempIcon/math-minus-icon.png') no-repeat;
    background-size: 16px 16px;
}

.refresh-button-icon {
    background: url('/Content/Images/Icon/refresh.png') no-repeat;
    background-size: 12px 12px !important;
}

.view-by-week-icon {
    background: url('/Content/Images/Icon/week.png') no-repeat;
    background-size: 12px 12px !important;
}

.view-by-month-icon {
    background: url('/Content/Images/Icon/month.png') no-repeat;
    background-size: 12px 12px !important;
}

.release-command-icon {
    background: url('/Content/Images/Icon/release-from-job-16.png') no-repeat !important;
    background-size: 16px 16px !important;
}
.paid-command-icon {
    background: url('/Content/Images/Icon/pay-16.png') no-repeat !important;
    background-size: 16px 16px !important;
}

.send-mail-command-icon {
    background: url('/Content/Images/Icon/send-mail-16.png') no-repeat !important;
    background-size: 16px 16px !important;
}

/*Custom for Appraisal Form*/
.send-mail-appraisalform-command-icon {
    background: url('/Content/Images/Icon/send-mail-16.png') no-repeat !important;
    background-size: 12px 12px !important;
    background-position:5px 6px !important;
    background-color:#fff !important;
}
.send-mail-appraisalform-command-icon:hover{
    background-color:#0d74ba !important;
}

.approve-appraisalform-command-icon {
    background: url('/Content/Images/Icon/approve-16.png') no-repeat !important;
    background-size: 12px 12px !important;
    background-position: 5px 6px !important;
    background-color:#fff !important;
}

.approve-appraisalform-command-icon:hover{
    background-color:#0d74ba !important;
}

.revert-appraisalform-command-icon {
    background: url('/Content/Images/Icon/revert-16.png') no-repeat !important;
    background-size: 12px 12px !important;
    background-position: 5px 6px !important;
    background-color:#fff !important;
}

.revert-appraisalform-command-icon:hover{
    background-color:#0d74ba !important;
}

.back-appraisalform-command-icon {
    background: url('/Content/Images/Icon/back.png') no-repeat !important;
    background-size: 12px 12px !important;
    background-position: 5px 6px !important;
    background-color:#fff !important;
}

.back-appraisalform-command-icon:hover{
    background-color:#0d74ba !important;
}

.detail-command-icon {
    background: url('/Content/Images/Icon/information16.png') no-repeat !important;
    background-size: 12px 12px !important;
}

/*End*/

/*ARROW*/
.manager-detail-arrow-size {
    border: 13px;
}

.arrow-left {
    width: 0;
    height: 0; /*border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #0067aa;*/
    border-top-style: solid;
    border-top-color: transparent;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    border-right-style: solid;
    border-right-color: #0067aa;
}

.arrow-right {
    width: 0;
    height: 0; /*border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #0067aa;*/
    border-top-style: solid;
    border-top-color: transparent;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    border-left-style: solid;
    border-left-color: #0067aa;
}

/* ----- BUTTON ----- */
.group-vertical-button {
    width: 100%;
}

    .group-vertical-button .button {
        border-radius: 2px;
        height: 30px;
        cursor: pointer;
        transition: all 200ms ease-in-out 0s;
        width: 100%;
        margin: 0 0 5px 10px;
        text-align: left;
        padding-top: 2px;
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
    }

        .group-vertical-button .button i {
            padding-top: 3px;
            padding-right: 5px;
            font-size: 16px;
        }

    .group-vertical-button .white {
        background: linear-gradient(to bottom, #fff 0%, #eee 74%, #eee 100%) repeat;
        border: #ccc solid 1px;
        color: #222;
    }

        .group-vertical-button .white:hover {
            background: linear-gradient(to bottom, #fff 0%, #eee 40%, #ddd 100%) repeat;
            border: #555 solid 1px;
        }

    .group-vertical-button .blue { /*background:linear-gradient(to bottom, #10b2e9 0%, #0067aa 100%) repeat;*/
        background: #0067aa;
        border: #0067aa solid 1px;
        color: #fff;
    }

        .group-vertical-button .blue:hover {
            background: #55b6fa;
            border: #fff solid 1px;
        }

    .group-vertical-button .red { /*background:linear-gradient(to bottom, #10b2e9 0%, #0067aa 100%) repeat;*/
        background: #bf1b00;
        border: #981601 solid 1px;
        color: #fff;
    }

        .group-vertical-button .red:hover {
            background: #fc8181;
            border: #fff solid 1px;
        }

    .group-vertical-button .disabled {
        background-color: lightgray;
        border-color: lightgray;
        cursor: default;
    }

        .group-vertical-button .disabled:hover {
            background-color: lightgray;
            border-color: lightgray;
            cursor: default;
        }

    .group-vertical-button .no-style {
        background: transparent none;
        border: none 0;
        width: inherit !important;
        height: inherit !important;
        padding: 0;
        margin: 0;
        cursor: pointer;
    }

.fulled-height {
    height: 100% !important;
}

.cursor-pointer {
    cursor: pointer;
}

.custom-gridview-status-bar tr.dxgv > td {
    padding: 0 !important; /*background:pink !important;*/
}

.hidden {
    display: none;
}

.disable-click .dxICheckBox_MetropolisBlueCadena {
    pointer-events: none;
    opacity: 0.5;
}

/*indent 20px for checkbox in edit Leave form*/
.indent-checkbox {
    padding-left: 20px !important;
    box-sizing: border-box;
}

.indent-checkbox-require {
    padding-left: 13px !important;
    box-sizing: border-box;
}

/*Hide header column of ASPxCombobox in Real OT Time-sheet*/
#fvFilterConditionOT .dxeHLC, #fvFilterConditionOT .dxeHC, #fvFilterConditionOT .dxeHFC {
    display: none;
}

#fvFilterConditionOT td.dxeLTM {
    border-style: none !important;
}

/*Login Page*/
#cbbChangeLanguage .dxeHLC, #cbbChangeLanguage .dxeHC, #cbbChangeLanguage .dxeHFC {
    display: none;
}

#cbbChangeLanguage .dxeHLC {
    display: none;
}

#cbbChangeLanguage .dxeHIC {
    display: none;
}

/*Hide header column of ASPxCombobox in Real OT Time-sheet*/
#fvCanidateInfo .dxeHLC, #fvCanidateInfo .dxeHC, #fvCanidateInfo .dxeHFC {
    display: none;
}

#fvCanidateInfo td.dxeLTM {
    border-style: none !important;
}

/*Hide header column of ASPxCombobox in Leave setup */
#fvEditFormLeave_3 .dxeHLC, #fvEditFormLeave_3 .dxeHC, #fvEditFormLeave_3 .dxeHFC {
    display: none;
}

#fvEditFormLeave_3 td.dxeLTM {
    border-style: none !important;
}

/*Hide header column of ASPxCombobox in Leave setup*/
#fvResignation .dxeHLC, #fvResignation .dxeHC, #fvResignation .dxeHFC {
    display: none;
}

#fvResignation td.dxeLTM {
    border-style: none !important;
}

/*Hide header column of ASPxCombobox in leaveProfileTitle setup*/
#leaveProfileTitle .dxeHLC, #leaveProfileTitle .dxeHC, #leaveProfileTitle .dxeHFC {
    display: none;
}

#leaveProfileTitle td.dxeLTM {
    border-style: none !important;
}

#fvImortTimeSheetFilter .dxeHLC, #fvImortTimeSheetFilter .dxeHC, #fvImortTimeSheetFilter .dxeHFC {
    display: none;
}

#fvImortTimeSheetFilter td.dxeLTM {
    border-style: none !important;
}

/*Hide header column of ASPxCombobox in Personal INfor setup*/
#fvEmployeeProfilePersonalInformationView .dxeHLC, #fvEmployeeProfilePersonalInformationView .dxeHC, #fvEmployeeProfilePersonalInformationView .dxeHFC {
    display: none;
}

#fvEmployeeProfilePersonalInformationView td.dxeLTM {
    border-style: none !important;
}

/*Hide header column of ASPxCombobox in Contract Type */

#fvContractInforView .dxeHLC, #fvContractInforView .dxeHC, #fvContractInforView .dxeHFC {
    display: none;
}

#fvContractInforView td.dxeLTM {
    border-style: none !important;
}

/*Hide header column of ASPxCombobox in Contract Type */

#fvContractInforEdit .dxeHLC, #fvContractInforEdit .dxeHC, #fvContractInforEdit .dxeHFC {
    display: none;
}

#fvContractInforEdit td.dxeLTM {
    border-style: none !important;
}

/*Hide header column of ASPxCombobox in Reference Setting*/
#fvReferenceSetting .dxeHLC {
    display: none !important;
}

#fvReferenceSetting .dxeHIC {
    display: none !important;
}

/*Add padding for icon in Combobox for Standard version*/
#fvReferenceSetting .dxeIIC img {
    padding-top: 3px;
}

/*Add padding for icon in Combobox for Paytime version*/
#fvPayTimeSetting .dxeIIC img {
    padding-top: 3px;
}

/**/
.headerTitleCaption {
    font-size: medium !important;
    font-weight: bold;
    width: 100%;
    display: inline-block;
    padding: 0px;
}

/*FormLayout's Caption Cell style for Empty Caption*/
.formlyaout-empty-caption {
    width: 10px !important;
}

/*Html table style*/
.html-table {
}

    .html-table th {
        background-color: lightgray;
        height: 25px;
        box-sizing: border-box;
        padding: 5px;
        border: 1px solid rgb(190, 186, 186);
        text-align: center;
    }

    .html-table .header-row { /*background-color: lightgray;*/
    }

.html-table-cell {
    border: 1px solid rgb(190, 186, 186);
    padding: 10px;
    text-align: center;
}

    .html-table-cell > table {
        margin: auto;
    }

#formContent {
    padding: 4px;
    box-sizing: border-box;
}

.splitter-user-managerment {
    margin: -4px -8px -8px -4px;
}

#divPnlInfor .icon-close:before { /*font-size: 12px;
    color: white;*/ /*fixed added by sonnt*/
    font-size: 12px;
    color: #C0C0C0;
}

#divPnlInfor .icon-close {
    position: absolute;
    right: 5px;
    top: 1px;
    cursor: pointer;
}

/*
    Because Dev v14.2.5 has error on ASPxTreeList (lost test of node),
    we must add this class to correct the error.
    */
.dxtlHSEC {
    display: none !important;
}

.dxtlCSD > table {
    table-layout: auto !important;
}

.radio-no-padding {
    padding: 0;
}

td < .radio-no-padding {
    padding: 0;
}

/*fixed message added By Sonnt*/
#page-message {
    position: fixed;
    right: 0;
    width: 45%;
    z-index: 10000;
}

table#pnlMessageOrgAndJobOrgAndJob {
}

#pnlMessageOrgAndJobOrgAndJob_RPC, #pnlMessage_RPC, .dxgvEditingErrorRow_MetropolisBlueCadena { /*border: 1px solid rgb(235, 204, 209) !important;
    background: rgb(254, 230, 229) !important;*/
}

/*Hue commented, replace by another css*/
/*#pnlMessageOrgAndJobOrgAndJob_RPC span.errorMainMessage,
    #pnlMessageAllFormula_RPC span.errorMainMessage,
    #pnlMessageError_RPC span.errorMainMessage,
    #lblMessageCreatUser span.errorMainMessage,
    #pnlEditPolicyMessage_RPC span.errorMainMessage,
    #pnlMessage_RPC span.errorMainMessage, .dxgvEditingErrorRow_MetropolisBlueCadena span.errorMainMessage {
        margin-left: 20px;
        margin-right: 10px;
        display: inline-table;
        color: #FF0000 !important;
    }

        #pnlMessageOrgAndJobOrgAndJob_RPC span.errorMainMessage:before,
        #pnlMessageAllFormula_RPC span.errorMainMessage:before,
        #lblMessageCreatUser span.errorMainMessage:before,
        #pnlMessageError_RPC span.errorMainMessage:before,
        #pnlEditPolicyMessage_RPC span.errorMainMessage:before,
        #pnlMessage_RPC span.errorMainMessage:before, .dxgvEditingErrorRow_MetropolisBlueCadena span.errorMainMessage:before {
            content: url('../Content/Images/TempIcon/ErrorMessage.png');
            /*font-family: 'Genericons';
            font-size: 20px;*/
/*vertical-align: middle;
            margin-right: 5px;
            position: absolute;
            left: 10px;
            line-height: 15px;
            margin-top: -2px;*/
/*}*/
#cbpLoginProcessing_lbLoginMessage > span { /*color: #FF0000 !important;*/
    margin-left: 20px;
    margin-right: 10px;
    display: inline-table;
}

/*#cbpLoginProcessing_lbLoginMessage > span:before {
    content: url('../Content/Images/TempIcon/ErrorMessage.png');
    /*font-family: 'Genericons';
            font-size: 20px;*/
/*vertical-align: middle;
    margin-right: 5px;
    position: absolute;
    left: 10px;
    line-height: 15px;
    margin-top: -2px;
}*/

.html-dataview {
    border: 1px solid rgb(190, 186, 186); /*padding: 10px;*/
    text-align: left;
    color: black;
}

    .html-dataview td { /*background-color: lightgray;*/ /*height: 25px;*/
        box-sizing: border-box;
        padding-left: 5px;
        border: 1px solid rgb(190, 186, 186);
        text-align: left;
    }

    .html-dataview .caption {
        background-color: #E7E7E5;
        width: 105px;
    }

.truncateCap {
    width: 101px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncateText {
    width: 148px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Set up css for Assign Permission User popup in UserView.ascx*/
.pu-assign-user-permission {
    height: 500px !important;
}

#splUnassignGroupPermissions, .pu-assign-user-permission-content, .pu-assign-user-permission-content > div {
    height: 458px !important;
}

.cblist-padding-left-none td.dxe {
    padding-left: 0 !important;
    padding-top: 0 !important;
}

.cblist-padding-left-none td table tr td {
    padding-right: 10px !important;
    padding-left: 0 !important;
}

.padding-top-none {
    padding-top: 0 !important;
}

/*Style for 25px height on Login form, Change Password form, Forget Password form*/
.height25 input[type="text"],
.height25 input[type="password"] {
    height: 25px !important;
}

.kpiobjective {
    float: left;
}

.xrtable-rounded {
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    color: red;
}
.radio-button-import-transaction-margin{
    margin-left: 140px !important;
}