/******************** Role ********************/
html.ROLE-EMPLOYEE .ROLE-HR_STAFF {display: none !important;}
html.ROLE-DEPUTY_MANAGER .ROLE-HR_STAFF {display: none !important;}
html.ROLE-DEPUTY_MANAGER .ROLE-HR_STAFF-MANAGER {display: none !important;}
html.ROLE-MANAGER .ROLE-HR_STAFF {display: none !important;}
html.ROLE-EMPLOYEE .ROLE-MANAGER {display: none !important;}
html.ROLE-HR_STAFF .ROLE-MANAGER {display: none !important;}
html.ROLE-EMPLOYEE .ROLE-HR_STAFF-MANAGER {display: none !important;}
html.ROLE-HR_DEV .ROLE-NOT-HRDEV {display: none !important;}
html.ROLE-HR_SALARY .ROLE-NOT-HRSALARY {display: none !important;}
html.ROLE-EMPLOYEE #idFooterRecruiting,
html.ROLE-DEPUTY_MANAGER #idFooterRecruiting,
html.ROLE-EMPLOYEE #idFooterPlanning,
html.ROLE-DEPUTY_MANAGER #idFooterPlanning {color: #ccc !important; cursor: default !important;}
html.ROLE-EMPLOYEE #idFooterRecruiting .fa,
html.ROLE-DEPUTY_MANAGER #idFooterRecruiting .fa,
html.ROLE-EMPLOYEE #idFooterPlanning .fa,
html.ROLE-DEPUTY_MANAGER #idFooterPlanning .fa,
#idFooterPlanning.PLANNING .fa {color: #ccc !important; cursor: default !important;}
.EXPERIMENTAL {display: none !important;}
html.ROLE-HR_STAFF #idBody.EMP-STATUS-ENDED button.cssReadMode:not(.EMP-STATUS-ENDED-ENABLE) {display: none !important;}
html.ROLE-HR_STAFF #idBody.EMP-STATUS-ENDED #idButPrintWorkContract.cssReadMode { display: inline-block !important; }
html.ROLE-HR_STAFF #idBody.EMP-STATUS-ENDED button.EMP-STATUS-ENDED-DISABLE {display: none !important;}
html.ROLE-HR_STAFF #idBody.EMP-STATUS-ENDED .CSS_SCHEDULE_DROPDOWN {display: none !important;}
html.ROLE-HR_STAFF:not(.ROLE-HR_ADMIN) #idOperationsSidebar .ROLE-HR_ADMIN,
html.ROLE-HR_STAFF:not(.ROLE-HR_ADMIN) #idCreateAccount .ROLE-HR_ADMIN,
html.ROLE-HR_STAFF-MANAGER:not(.ROLE-HR_ADMIN) #idCreateAccount .ROLE-HR_ADMIN {display: none!important;}
html.ROLE-HR_PEOP #idPageRewarding .ROLE-HR_STAFF {display: none !important;}
html.ROLE-HR_PEOP #idPageDevelopment .ROLE-HR_STAFF {display: none !important;}
html.ROLE-HR_PEOP #idPagePerformance .ROLE-HR_STAFF {display: none !important;}
html.ROLE-HR_PEOP #idPageRewarding .ROLE-MANAGER {display: none !important;}
html.ROLE-HR_PEOP #idPageDevelopment .ROLE-MANAGER {display: none !important;}
html.ROLE-HR_PEOP #idPagePerformance .ROLE-MANAGER {display: none !important;}
html.ROLE-HR_PEOP #idPageRewarding .ROLE-HR_STAFF-MANAGER {display: none !important;}
html.ROLE-HR_PEOP #idPageDevelopment .ROLE-HR_STAFF-MANAGER {display: none !important;}
html.ROLE-HR_PEOP #idPagePerformance .ROLE-HR_STAFF-MANAGER {display: none !important;}
html.ROLE-HR_PEOP #hrPeopleRestricted {display: none !important;}
html.ROLE-HR_PEOP #hrDashboard {display: none !important;}
html.ROLE-HR_PEOP-MANAGER #idPageRewarding .ROLE-HR_STAFF {display: none !important;}
html.ROLE-HR_PEOP-MANAGER #idPageDevelopment .ROLE-HR_STAFF {display: none !important;}
html.ROLE-HR_PEOP-MANAGER #idPagePerformance .ROLE-HR_STAFF {display: none !important;}
html.ROLE-HR_PEOP:not(.ROLE-HR_PEOP-MANAGER) .ROLE-NOT-HR_PEOP {display: none !important;}
html.ROLE-HR_PEOP_DEV #idPageRewarding .ROLE-HR_STAFF {display: none !important;}
html.ROLE-HR_PEOP_DEV #idPagePerformance .ROLE-HR_STAFF {display: none !important;}
html.ROLE-HR_PEOP_DEV #idPageRewarding .ROLE-MANAGER {display: none !important;}
html.ROLE-HR_PEOP_DEV #idPagePerformance .ROLE-MANAGER {display: none !important;}
html.ROLE-HR_PEOP_DEV #idPageRewarding .ROLE-HR_STAFF-MANAGER {display: none !important;}
html.ROLE-HR_PEOP_DEV #idPagePerformance .ROLE-HR_STAFF-MANAGER {display: none !important;}
html.ROLE-HR_PEOP_DEV #hrPeopleRestricted {display: none !important;}
html.ROLE-HR_PEOP_DEV #hrDashboard {display: none !important;}
html.ROLE-HR_PEOP_DEV-MANAGER #idPageRewarding .ROLE-HR_STAFF {display: none !important;}
html.ROLE-HR_PEOP_DEV-MANAGER #idPagePerformance .ROLE-HR_STAFF {display: none !important;}
html.ROLE-HR_PEOP_DEV:not(.ROLE-HR_PEOP_DEV-MANAGER) .ROLE-NOT-HR_PEOP_DEV {display: none !important;}
html.ROLE-HR_PEOP_DEV-MANAGER .ROLE-NOT-HR_PEOP_DEV-MANAGER {display: none !important;}

.sfHide { display: none !important; }

/******************** MODULES ********************/
html.MODULE-RECRUIT-CORE .MODULE-RECRUIT-FULL {display: none !important;}
html.MODULE-RECRUIT-CORE .MODULE-RECRUIT-MINI {display: none !important;}
html.MODULE-RECRUIT-MINI .MODULE-RECRUIT-FULL {display: none !important;}

/******************** For IE  ********************/
[hidden] { display: none; }
/******************** Validation ********************/
.sfRequired {width: 6px;height: 6px;background: #d9534f;display: inline-block;margin: 4px 0 0 0;border-radius: 3px;}
.cssDialog .sfRequired {float: right;}
div.sfNotValid {border-radius: 4px;min-height: 24px;}
.sfNotValid {border: solid 1px #d43f3a !important;}
/******************** Left Menu ********************/
#idLeftMenu {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: block;
    float: left;
    width: 280px;
    height: auto;
    overflow: hidden;
    transition: all 300ms;
    background-color: #f9fafc;
    border-right: 1px solid #d2d6de;
}
#idLeftMenu:hover{overflow-y: auto}
.sfMenuTitle { height: 50px; width: 50px; line-height: 38px}
.sfMenuTitle .sfRowHeader {position: absolute;left: 40px;cursor: pointer;transition: all 300ms;}
.sfMenuTitle:hover {cursor: pointer; background-color: #0491bf}
.sfMenuTitle:hover i.fa{color: #fff}
.sfMenuTitle i {cursor: pointer; transition: all 300ms; padding: 10px 0; font-size: 17px}
#idLeftMenu > nav {display: block;padding: 0;list-style: none;transition: all 300ms;}
#idLeftMenu nav div {padding: 14px 5px 14px 15px;cursor: pointer;vertical-align: middle; border-left: 3px solid transparent;}
#idLeftMenu nav .sfHeader {padding: 5px 0 5px 30px;font-weight: bold;}
/******************** Page Head ********************/
.sfPageHead{display: block; width: 1170px;}
.sfPageHead > table {vertical-align: middle;}
#idEmpImg{border-radius: 4px;width: 120px;height: 120px;padding: 4px;border: 1px solid #ddd;transition: all .2s ease-in-out;}
.sfPageHeadM > div {width: 500px;padding-bottom: 5px;padding-left:20px ;}
.sfPageHeadR {width: 400px; vertical-align: top; padding-top: 10px}
.sfPageHeadM button:not(#idSocialLinksIcon button){border-radius: 8px;width:auto;box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);}
#idPageHeadExternal {
  margin-left: 5px;
  font-size: 12px;
  font-weight: bold;
  color: #05A4D8 !important;
}
#idNotebookBtn{display: none;margin-left: 20px;height: 19px}
/******************** Page Content ********************/
table {border-collapse: collapse;}
table .cssTablePreLoad {text-align: center; width: 100%}
#idContent {
    display:inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    padding: 5px 0 40px 15px;
    background: #fcfeff;
    border-radius: 0;
    box-sizing: border-box;
    transition: all 300ms;
}
#idContent.sfContent{left:281px;}
.sfPage {display: none;}
#idContent .sfPage:first-child {display: block;}
body.menu-close #idContent {left: 0 !important;}
body.menu-close #idLeftMenu {left: -280px;}
body .sfMenuTitle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    color: #025874;
}

/******************** Tab Divider ********************/
.ui-tabs .ui-tabs-nav .ui-tabs-anchor{padding: 0.5em 0.8em}
.sfTabLabel {padding: 10px 0 10px 0;}
.sfTabLabel span {font-weight: bold; font-size: 15px; padding-left: 8px;}
.sfTabLabel div {display: inline-block;float: right;margin-right: 6px;}
.sfTabLabel button {height: 20px;}
/******************** Row ********************/
.sfRow{position: relative;width: 1138px;}
.sfRow > div, .sfRowHeader > div{display: inline-block;margin-right: 3px;}
.sfTool > span {padding-top: 6px;padding-right: 5px;}
.sfTool > span i {font-weight: bold;}
.fa {cursor: pointer;}
#idFooterFunctions .sfDisabled { cursor: default !important;}


html #idHomeTableContainerTD .ROLE-EMPLOYEE #idTdRecruiting .fa, html #idHomeTableContainerTD .ROLE-EMPLOYEE #idTDPlanning .fa,
html #idHomeTableContainerTD .ROLE-DEPUTY_MANAGER #idTDRecruiting .fa, html #idHomeTableContainerTD .ROLE-DEPUTY_MANAGER #idTDPlanning .fa {cursor: default !important;}
/******************** Editable Table ********************/
.sfTable th {text-align: left; padding-left: 1px; padding-right: 4px;}
.sfTable td {padding-left: 1px; padding-right: 4px;}
.sfTable input:not([type="checkbox"]), .sfTable select {width: 100% !important;}
.cssReadMode .sfRequired,
.cssReadMode .cssEditMode,
.cssEditMode .cssReadMode {display: none !important;}

/* sfTable hide column in EditMode */
.sfTable.cssEditMode th.readModeCol,
.sfTable.cssEditMode td.readModeCol {
    visibility: collapse;
    width:0;
    overflow:hidden;
}

/* sfTable common column widths */
.sfTable th.colWidth20 {width: 20px;}
.sfTable th.colWidth30 {width: 30px;}
.sfTable th.colWidth80 {width: 80px;}
.sfTable th.colWidth100 {width: 100px;}
.sfTable th.colWidth120 {width: 120px;}
.sfTable th.colWidth130 {width: 130px;}
.sfTable th.colWidth150 {width: 150px;}
.sfTable th.colWidth170 {width: 170px;}
.sfTable th.colWidth270 {width: 270px;}

/* sfTable Delete Row Button Column*/
.sfTable th.deleteRowCol {width: 20px; padding-right: 30px;}

/* sfTable Attachments */
/* Attachment Input Cell: Full cell width attachment input element */
.sfTable td.attachmentInputCell {padding-right: 50px;white-space: nowrap;}
.sfTable td.attachmentInputCell .cssAttachmentInput {width: 100% !important;}
/* Alternative solution for full cell width attachment input, if needed */
/*.sfTable td.attachmentInputCell .cssAttachmentInput {width: calc(100% - 2 * 24px) !important;}*/

/* Attachment Filename on multiple rows */
.sfTable .sfDownload {word-break: break-all !important}

/******************** Input & Select Style ********************/
.cssPad input[type="text"] {-webkit-appearance: caret; -moz-appearance: caret}
.cssSafari #idFooterRightSearch {height: 37px !important;}
.cssPad #idFooterRightSearch {height: 39px !important;}
input:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]), select:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]), textarea:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]) {box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
input:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"])[type="text"],input:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"])[type="password"],textarea:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]) {padding: 3px 6px;border: 1px solid #ccc;border-radius: 4px;}
select:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]) {padding: 2px 2px;border: 1px solid #ccc;border-radius: 4px;outline: none}
option:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]){padding: 4px 2px}
option:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]):hover{background-color: #cccccc}
input:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]):not([class*="sp-"])[type="text"],input:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"])[type="password"], select:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]) {width: 280px; outline: none}
.sfFieldDate {width: 90px !important;}
.sfFieldInt, .sfFieldNum {width: 80px !important; text-align: right !important;}
#idLoginPopup input[type="text"], #idLoginPopup input[type="password"] {width: 300px !important;}
/******************** People Page Job Tab & Contact Tab ********************/
.sfContainer > div {padding-top: 2px;padding-bottom: 8px;}
.sfContainer > div > div {display: inline-block;}
.sfContainer > div > div:first-child {width: 180px;vertical-align: top;padding-top: 3px;padding-right: 6px;}
.sfContainer > div > div:nth-child(2) {width: 350px;}
.sfHR {border-top: solid 1px #D6D6D6;margin: 15px 0 15px 0}
.cssTabContent {border-top: 0 !important;padding: 10px 15px !important;}
.ui-datepicker select {padding: 0 !important;}
/******************** CKEditorb ********************/
#cke_bottom_detail,.cke_bottom {display:none !important;}
/******************** Table List ********************/
.cssTableList th {text-align: left;padding: 6px 8px 4px 8px;vertical-align: top;}
.cssTableList td {padding: 6px 8px;vertical-align: top;}
.cssTable{
    margin-top: 3px;
    border-spacing: 0px 3px;
}
.cssTable  thead{background-color: #f6f6f6}
.cssTable  th{
    border: none;
    border-bottom:2px solid #cccccc;
    text-align: left;padding: 6px 8px 4px 8px;vertical-align: top;
    color:#336699;
}
.cssTable  th:first-child{
    border-radius:6px 0 0 0 ;
}
.cssTable  th:last-child{
    border-radius:0 6px 0 0 ;
}
.cssTable tr{height: 30px;}
.cssTable td{padding: 6px 8px;vertical-align: top;border:none;border-bottom: solid 1px #ddd !important;cursor: pointer}
.cssTable tr:hover {background-color: #f6f6f6;}

table.cssScroll thead {display: block;}
table.cssScroll tbody {display: block;overflow-y: auto;}
table.cssScroll.cssEditMode tbody {overflow-y: inherit;max-height: none !important;}

/********************  New Button ********************/
button:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]):not([class*="sp-"]){ padding: 0;margin: 0; margin-left: 2px;}
button:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]):focus {outline:0;}
button::-moz-focus-inner {border: 0;}
button.autoHeight:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]) { min-height: 24px; height: auto; }
button:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]) {
    position: relative;height: 24px;top:0;display: inline-block;
    cursor: pointer;border: 1px solid #cccccc;border-radius: 2px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eaeaea));
    background-image: -webkit-linear-gradient(top, #f6f6f6, #eaeaea);
    background-image: -moz-linear-gradient(top, #f6f6f6, #eaeaea);
    background-image: -ms-linear-gradient(top, #f6f6f6, #eaeaea);
    background-image: -o-linear-gradient(top, #f6f6f6, #eaeaea);
    background-image: linear-gradient(top, #f6f6f6, #eaeaea);
    /*-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);*/
    /*-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);*/
    /*box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);*/
}
button:not([class*="Mui"]):not([class*="jss"]):not([class*="cke"]):not([class*="k-"]):disabled {
    opacity: 0.5;
}
/* TODO: commented this, because it breaks the visual aspect of material buttons and saw no problem in the old interface
button:active{
    top: 1px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#f6f6f6));
    background-image: -webkit-linear-gradient(top, #eaeaea, #f6f6f6);
    background-image: -moz-linear-gradient(top, #eaeaea, #f6f6f6);
    background-image: -ms-linear-gradient(top, #eaeaea, #f6f6f6);
    background-image: -o-linear-gradient(top, #eaeaea, #f6f6f6);
    background-image: linear-gradient(top, #eaeaea, #f6f6f6);
} */
button i {margin: 2px 2px 2px 4px;color: #336699;}
button em {margin: 2px 4px 2px 2px;color: #336699;}
button input {margin: 4px 3px 6px 3px;color: #05A4D8;}
.fa-trash, .fa-file-text-o,.fa-flag-o {margin: 2px !important;}
button .laDelete {color: #dd5143;}
.cssBut1 {
    height: 20px;
    border-radius: 2px;
    background: none;
}
/********************  Transaction ********************/
.sfTransactionHeader {text-align: right}
.sfTransactionHeader .cssTransactionEdit { display: inline-block; width: 150px}
.sfTransactionHeader .cssTransactionEdit .sfDelBut { margin-left: 4px !important }
.sfTableTransaction {width: 1125px}
.sfTableTransaction th:nth-child(1) {width: 303px !important}
.sfTableTransaction th:nth-child(2) {width: 561px !important}
.sfTableTransaction th:nth-child(3) {width: 84px !important}
.sfTableTransaction th:nth-child(4) {width: 179px !important}
#idDevPlanRead .sfTableTransaction th:nth-child(1) {width: 203px !important}
#idDevPlanRead .sfTableTransaction th:nth-child(2) {width: 661px !important}
.sfTableTransaction .chosen-container {width: 300px !important;}
.sfTransactionHeader .chosen-container {width: 300px !important;}
/********************  Select light ********************/
#idSelectLight {z-index: 3;position: absolute;display: none;border-radius: 27px;padding: 8px;}
/********************  Attachment ********************/
/*.sfTable input.cssAttachmentInput {width: 230px !important;border-radius:4px 0 0 4px;margin-right: 0 !important;}*/
/*.cssAttachmentBtn {width:24px;height:24px;border: 1px solid #cccccc;border-left: none;border-radius: 0 4px 4px 0;margin: 0}*/
.cssAttachment{position: absolute}
.sfTable input.cssAttachmentInput {width: 200px !important;border-radius:4px 0 0 4px;margin-right: 0 !important;}
.cssAttachmentBtn {width:24px;height:24px;border: 1px solid #cccccc;border-left: none;border-radius:0;margin: 0}
.cssAttachmentBtnDel {width:24px;height:24px;border: 1px solid #cccccc;border-left: none;border-radius: 0 4px 4px 0;margin: 0}
.cssAttachmentBtnDownload {width:24px;height:24px;border: 1px solid #cccccc;border-left: none;border-radius: 0 4px 4px 0;margin: 0}
/********************  Other ********************/
.sfRight {text-align: right;}
.cssRight {float: right;}

a.sfaBut{margin-right: 20px; color: #05A4D8}
a.sfaBut i{margin-right: 5px;  }
a.sfaBut:hover{text-decoration:underline; cursor: pointer;}
a.sfaBut:active{color: #336699;}
.jqplot-point-label{z-index: 0 !important;}
.sfSquImg50{height: 50px;width:50px; border-radius: 4px }
/********************  Tag ********************/
.cssTagText { display:inline-block;
    text-overflow:ellipsis;
    overflow:hidden;
    margin-right: -1px;
    background-color:#f6f6f6;border-radius:4px; max-width: 160px;border:1px solid #cccccc;padding: 3px;border-bottom-right-radius: 0;border-top-right-radius: 0}
.cssTag button{border-bottom-left-radius: 0;border-top-left-radius: 0;border-left: none}
.cssTag {display: inline-flex; margin: 4px 8px 4px 0; cursor: move}

/********************  Other ********************/
.cssCharCount {font-weight: normal}
.chosen-drop {margin-bottom: 50px}
.chosen-disabled .search-choice-close{display: none!important;}
.tablesorter th {cursor: pointer}
.tablesorter-header-inner i {margin-left:4px; position:absolute; top:0; right:-8px}

input:required {
    box-shadow: none;
}
input.sfNotValid {outline: none}
caption {text-align: left; color: #05A4D8; padding: 10px 0 8px 0}
caption h1 {display:inline-block; font-weight:bold; font-size:15px; padding-left:12px; margin:0}
caption span {float: right; margin-right: 8px}
caption button {height: 20px}

.cssClearFloatRow { display: block; clear: both;}

/********* Calendar table *********************/
.cssCalTable {border-collapse: collapse; border-spacing: 0;}
.cssCalTable th {font-weight: normal}
.cssCalTable th,.cssCalTable td {padding: 0; border: solid 1px #ccc; width: 20px !important;min-width: 20px; -webkit-print-color-adjust: exact;}
.cssCalTable td {text-align: center;}
#idScrollDiv4 .cssCalTable td, #idScrollDiv8 .cssCalTable td, #idScrollDivVacAbsBodyCal .cssCalTable td {height:29px; -webkit-print-color-adjust: exact;}
.cssCalTable .cssMonthRow td {text-align: left; padding-left: 4px; background-color: #fff !important;font-weight: bold}
.cssCalTable .cssToday {background-color: #92cf51; color: #fff}
.cssCalTable .cssWeekDay0, .cssCalTable .cssWeekDay6 {background-color: #e6e6e6 !important;}
#idAbColors div, #idVacColors div, #idVacAbsColors div, #idVacAbsLegend div {display: inline-block; width: 20px; margin: 6px 4px 0 0; -webkit-print-color-adjust: exact;}
#idAbColors div:first-child, #idVacColors div:first-child, #idVacAbsColors div:first-child, #idVacAbsLegend div:first-child {margin-left: 0}
#idAbColors span, #idVacColors span, #idVacAbsColors span, #idVacAbsLegend span { display: block; float: left; margin-right: 20px; width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

::-webkit-scrollbar-track-piece{
    background-color:transparent;
    -webkit-border-radius:0;}

::-webkit-scrollbar{
    width:8px;
    height:8px;
}
::-webkit-scrollbar-thumb {
    height:50px;
    background-color:rgba(0,0,0,0.3);
    -webkit-border-radius:4px;
    outline-offset:-2px;
}
::-webkit-scrollbar-thumb:hover{
    height:50px;
    background-color:#9f9f9f;
    -webkit-border-radius:4px;
}

/********* Workflow *********************/
#idBasicDataLeft {display: inline-block; width: 530px}

#idShowWorkflow {
    display: inline-block;
    width: 350px;
    vertical-align: top;
    min-height: 165px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    padding: 5px;
}
#idShowWorkflow .sfHeader2 {text-align:center; padding:5px; border-bottom: 1px solid #d6d6d6; margin-bottom: 8px}
.cssHigherManager img {width: 50px !important; height: 50px !important; vertical-align: top!important; margin: 0 12px 0 6px; border-radius: 4px;}
.cssHigherManager div {margin-left: 15px; display: table-cell; vertical-align: top}
.cssHigherManager div span:nth-child(1) {font-size: 16px; font-weight: bold}

#idHRSelect, #idHRSelect .dd-select, #idHRSelect .dd-options {width: 335px !important}

#idBonusProposalPopup #idWorkflowBox {height: 150px}
#idSalaryProposalPopup #idWorkflowBox {height: 310px}
#idNewPosition #idWorkflowBox {height: 310px}
#idPageNewEmpManager #idWorkflowBox {height: 200px}

#idWorkflowBox {padding-bottom: 4px; overflow-y:auto; overflow-x: hidden}
#idWorkflowBox span {display: inline-block; vertical-align: middle}
#idWorkflowBox img {height: 40px; width:40px; border-radius: 4px; margin: 0 8px; vertical-align: middle}
#idWorkflowBox .fa-long-arrow-down {padding: 0 10px}
.sfPropArrow {margin: 8px 0 8px 18px; color: #05A4D8}

.cssShowWorkflow .sfHeader2 {text-align:center; padding:5px; border-bottom: 1px solid #d6d6d6; margin-bottom: 8px}
.cssShowWorkflow {padding-bottom: 4px; overflow-y:auto; overflow-x: hidden}
.cssShowWorkflow span {display: inline-block; vertical-align: middle}
.cssShowWorkflow img {height: 40px; width:40px; border-radius: 4px; margin: 0 8px; vertical-align: middle}
.cssShowWorkflow .fa-long-arrow-down {padding: 0 10px}

/********* Other *********************/
.cssHint {font-size: 12px}

.cssScrollToTop{
    width:200px;
    height:30px;
    padding:2px;
    text-align:center;
    background: #000;
    position:fixed;
    bottom:55px;
    left:400px;
    display:none;
    opacity: 0.6;
    z-index: 10000;
    border-radius: 75px;
    color: #ffffff;
    vertical-align: middle;
}
.cssScrollToTop em {
    font-size: 16px;
    font-weight: bold;
}
.cssScrollToTop:hover{
    text-decoration:none;
}
/*** EXPERIMENTAL LABEL AND NEW ****/
.label, .labelNew, .labelSchedule, .labelScheduleEmplDetail, .labelExp, .labelUpcomingEmpl {
    display: block;
    color: #fff !important;
    padding: 2px;
    float: right;
    font-size: 10px;
    border-radius: 3px;
    width: 15px;
}
.labelExp, .cssLeftMenu li:hover .labelExp {
    background-color: #ff6600 !important;
    color: #fff !important;
}
.labelNew {
    width: auto;
    padding: 2px 4px;
    font-size: 12px;
    background-color: #009900;
}
.labelSchedule {
    background-color: #05A4D8;
}
.labelScheduleEmplDetail {
    background-color: #3CA789;
}
.labelUpcomingEmpl {
  background-color: #ebc111;
  color: black !important;
  width: fit-content !important;
}

.cssDropdownMenu {
    position: absolute;
    display: none;
    width: auto;
    padding: 5px 0;
    white-space: nowrap;
    border: 1px solid rgba(0, 0, 0, .15);
    color: #333;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    z-index: 999;
}
.cssDropdownMenu a {
    display: block;
    padding: 4px 8px;
    text-decoration: none;
}
.cssDropdownMenu a:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

#idInstructionPopup {
    overflow-y: auto !important;
}

/*Collaboration preload css*/
.cssPageNav {
    height: 38px;
    border-bottom: 1px solid #d2d6de;
    overflow: visible;
    width: 100%;
    display: inline-flex;
}
.cssPageNav .fa{ display: inline-flex}
/*.pageTool em {font-weight: bold;color: #6f6f6f}*/
.cssPageNav > button {height: 26px;border-radius: 4px;background: none;}

/* The container <div> - needed to position the dropdown content */
.cssDropdown {
    position: relative;
    display: inline-block;
}

.cssTaskNav{
    display: inline-flex;
}

.cssTaskNav > section {
    border-bottom: 2px solid transparent;
}
.cssTaskNav  section:hover, .cssTaskNav  section.cssTaskNavSecActive {
    border-bottom: 3px solid #3c8dbc;
    color: #3c8dbc;
}

#idUnitTasksNav {
    padding: 5px;
}

.cssTaskImg{
    padding: 2px;
    margin: 0 15px;
}
.cssTaskImg img{
    height: 32px;
    width: 32px;
    border-radius: 4px;
}

.cssAbsShortDescr {
    display: block;
    overflow:hidden;
    text-overflow:ellipsis;
    width: 150px;
    max-width: 150px;
    white-space: nowrap;
}

.cssCalHelp {
    padding-top: 6px;
    overflow: auto !important;
    width: auto !important;
}

.cssCalSeparator {
    display: block;
    float: left;
    padding: 5px;
}

.sfImg40{height:40px;width:40px;border-radius: 20px}

/*CUSTOM FIELD*/
.cssCustomField .sfSection {display: inline-block;width: 750px;vertical-align: top;padding: 0 15px 15px 0;line-height: 19px;}
.cssCustomField .cssCustomTableSection {width: 47% !important; margin-right: 3%; float: left;}
.cssCustomField input[type="text"]{width: 500px;}
.cssCustomField .chosen-single {width: 500px !important;}
.cssCustomField .chosen-drop {width: 500px !important;}
.cssCustomField .chosen-container-multi .chosen-choices {border: solid 1px #ccc}
.cssCustomField .chosen-container-multi {width: 500px !important}
.cssCustomField .sfSection .sfHeader2 {width: 330px}
.cssCustomField .sfSection table{margin-top: 10px;border-collapse: separate;border-spacing: 0px 4px;}
.cssCustomField .sfSection table > div{margin:4px 0;}
.cssCustomField .sfSection table tr td:nth-child(1),
.cssCustomField .sfSection table > div >div:nth-child(1){font-size: 13px;font-weight: bold;}
.cssCustomField .sfSection button{margin-left: 5px;float: right;height:20px;}
.cssCustomField textarea {width: 500px; max-height: 250px;}

.cssCustomFieldContent {word-break: break-word}

/*D3 PERSONNEL GROUP LINK*/
.tree-container {
    cursor: move;
}
.tree-container .node {
    cursor: pointer;
}

.tree-container .overlay{
    background-color:#EEE;
}

.tree-container .node circle {
    fill: #fff;
    stroke: #05A4D8;
    stroke-width: 1.5px;
}

.tree-container .node circle.nodeCircle2 {
    fill: #fff;
    stroke: #fc9300;
    stroke-width: 1.5px;
}

.tree-container .node text {
    font-size:12px;
    font-family:sans-serif;
}

.tree-container .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}

.tree-container .templink {
    fill: none;
    stroke: red;
    stroke-width: 3px;
}

.tree-container .ghostCircle.show{
    display:block;
}

.tree-container .ghostCircle, .activeDrag .ghostCircle{
    display: none;
}

.cssTable.cssCustomEnumTable th {
    color: #fc9300;
}

#idEmpNumCheck .sfSuccess, #idSSNCheck .sfSuccess {
    position: absolute;
    right: 6px;
    top: 4px
}

/******************** Kendo table  ********************/
.k-button {height: auto}
.cssKendoName {display:inline-block; line-height:40px; vertical-align:middle; padding-left:8px; text-decoration:underline;}
.cssKendoName:hover {cursor: pointer}
.cssKendoTable .sfImg40 {float: left}
.cssKendoTable .sfImg40:hover {cursor: pointer}
.cssKendoToolbar {border-bottom:0; margin-bottom:0; height:auto}
.k-grid-excel {float: right}
.k-grid  .k-grid-header  .k-header  .k-link {height: auto}
.k-grid  .k-grid-header  .k-header {white-space: normal}
.k-state-selected .cssKendoName, .k-state-selected {color:#fff !important;}
.cssKendoExportTableCSV {float: right !important;}
th.k-header {position: relative}
.k-grid-filter, .k-header-column-menu {position:absolute !important; bottom: 6px; right: 10px}
.ck-balloon-panel {
  z-index: 10000 !important;
}

.cssKendoTable.cssKendoTableBottomMargin{margin-bottom: 120px;}

.enum-warn {
  color: red;
}

/* HACKY: Overriding the color from #idContent em/div/span/i that makes the color from snackbars gray. */
.kendo-report-settings-controls-container #client-snackbar {
    color: #fff;
}

/* Fix the opacity and background overridden by .ui-widget-shadow */
.ui-tooltip.ui-widget-content {
    background: #fff;
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.cssColorPickerContainer button.sp-choose {
    color: #606c72;
}

.cssColorPickerReplacer.sp-replacer,
.cssColorPickerReplacer .sp-dd {
    margin-right: 0;
}

/* Hide selected option from contract selection to make it menu alike */
#idPageHeadPosition .dd-option-selected {
    display: none;
}

#idPageHeadPosition .isDefaultContract {
    display: inline-block;
    background-color: #eaeaea;
    font-size: 10px;
    font-weight: normal;
    vertical-align: text-top;
    padding: 1px 3px;
    border: solid 1px #fff;
    border-radius: 5px;
}

.cssInlineIcon {
    display: inline;
}

.cssTopMargin10 {
    margin-top: 10px;
}

.noPadding {
    padding: 0 !important;
}

.embed-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.embed-iframe.negate-admin-content-padding {
    margin: -5px 0 -40px -15px;
    width: calc(100% + 15px);
    height: calc(100% + 45px);
}

/*  spin css */
.spinner {
  margin: 300px 400px;
  position: absolute;
  z-index: 10000;
  background-color:rgba(255,255,255,.4) ;
  text-align: center;
  font-size: 30px;
}
.spinner > section {position:relative;font-size: 15px;font-weight: bold}
.spinner > div {
  display: inline-block;
  color:#FFD200 !important;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  color:#FFD200 !important;
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  color:#FFD200 !important;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  color:#FFD200 !important;
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  color: #05A4D8 !important;
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.spinner .rect6 {
  color: #05A4D8 !important;
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.spinner .rect7 {
  color: #05A4D8 !important;
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.spinner .rect8 {
  color: #05A4D8 !important;
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.spinner .rect9 {
  color: #05A4D8 !important;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.6) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
      transform: scaleY(0.6);
      -webkit-transform: scaleY(0.6);
  }  20% {
         transform: scaleY(1.0);
         -webkit-transform: scaleY(1.0);
     }
}