/* Site Wide Styles ----------------------------------------------------------------------------*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-bottom: 20px; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color:#6c757d;}
/* Bootstrap overwrites */
.navbar {font-size: 14px; padding-left: 30px; padding-top: 0px; padding-right: 30px; padding-bottom: 0px;}
    .navbar li {padding-left: 20px;}
    .navbar-header {font-size: 12px;}
.navbar-inverse .navbar-nav > li > a {color: #c5c3bc;cursor: pointer;}
.navbar-inverse .navbar-nav > li > a:hover {color:white;}
.body-inside-session {background-color: #f8f9fa !important;padding-bottom: 0px !important;}
a {color: #428bca}
.navbar-header {font-size: 14px; height: 40px; background-color: #292C33;}
.navbar-inverse {background-color: #292C33;}
.header-area-toolboxlogo {padding-left: 0.5em !important; font-size: 24px;font-weight: bold;font-family: Arial;color: white;line-height: 1.7em;}
.header-area-companyname {font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #c5c3bc;}
.header-area-username {font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; color: white;}
.footer-area {position: fixed; bottom: 0; width: 100%; overflow: visible; z-index: 99; clear: both; background-color: #292C33; padding-left: 3em; padding-right:3em; color: lightgray; vertical-align: bottom; line-height: 24px; height: 24px;}
.hidden_control {display: none;}
/* .back-to-top {cursor: pointer; position: fixed; bottom: 50px; right: 20px; display: none;} */
.well-transparent {min-height: 20px; padding: 19px; margin-bottom: 20px;}
.body-content {padding-left: 15px; padding-right: 15px;}
.remove-row-padding {padding-left:0px !important; padding-right:0px !important;}
.resizeVerticalOnly {resize: vertical !important;}
.loading {z-index: 9999999;}

/* Pagination ----------------------------------------------------------------------------*/
.pagination {clear: both; list-style-type: none; margin: 5px 0 0; width: 100%;}    /*removed float: left;*/
.pagination li {float: left; margin-left: 3px; }
.pagination .ellipsis {padding: 2px 5px;}
/* basic pagination link rules */
    .pagination a:link,
    .pagination a:visited,
    .pagination a:active {background: #999; color: white; display: block; float: left; padding: 2px 7px; border-radius: 3px;}
.pagination a:hover {background: #999;text-decoration: none; color:black;}
.pagination select {background: #999; text-decoration: none; color: white; border-radius: 3px; height:100%;}
/* currently active pagination link customization */
    .pagination a.current:link,
    .pagination a.current:visited,
    .pagination a.current:active {background: #9e5555;color: white;}

.page-item.active .page-link {background: #9e5555 !important; color: white !important;}
div.dataTables_length select {width: 6em !important;}
.page-item.disabled {display: none;}

/* DataTable styles ----------------------------------------------------------------------------*/
table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before { bottom: .5em;}

/* Message Panel ----------------------------------------------------------------------------*/
.messagePanelOverflow {position: fixed; z-index: 100002 !important; max-width: 100em; bottom: 50px;}
.messagePanelTable {font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif; width: 100%;border: 0px;}
.messagePanel { width: 100%; border-radius: 0.5em; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; box-sizing: border-box; box-shadow: 0.2em 0.2em 0.7em 0 #777;}
.messagePanelErrorSign {background: #f8bda9 url("exc.png") no-repeat 12px 16px; border: 2px solid #ff0000; color: #b94a48;}
.messagePanelInfoSign {background: #b9cce5 url("info.png") no-repeat 12px 16px; border: 2px solid #466eae; color: #000;}
.messagePanelWarningSign {background: #faffb5 url("warn.png") no-repeat 12px 16px; border: 2px solid #f7d229; color: #c09853;}
.messagePanelSuccessSign {background: #99ff99 url("tick.png") no-repeat 12px 16px; border: 2px solid #2f9949; color: #468847;}

/* Clears ----------------------------------------------------------------------------*/
.clearFix {clear: both;}
.clearL00 {clear: both;display: block;}
.clearL03 {clear: both;display: block;margin-top: 3px}
.clearL05 {clear: left;display: block;margin-top: 5px}
.clearL10 {clear: left;display: block;margin-top: 10px}
.clearL15 {clear: left;display: block;margin-top: 15px}
.clearL20 {clear: left;display: block;margin-top: 20px}
.clearL50 {clear: left;display: block;margin-top: 50px}

/* Types ----------------------------------------------------------------------------*/
.negroB10 {font-weight: bold; font-size: 10px; color: black; font-family: Verdana, Arial, Helvetica, sans-serif;}
.negro10 { font-weight: normal; font-size: 10px; color: black; font-family: Verdana, Arial, Helvetica, sans-serif;}
.negro12 { font-weight: normal; font-size: 12px; color: black; font-family: Verdana, Arial, Helvetica, sans-serif;}
.negro14 { font-weight: normal; font-size: 14px; color: black; font-family: Verdana, Arial, Helvetica, sans-serif;}
.negro20 { font-weight: normal; font-size: 20px; color: black; font-family: Verdana, Arial, Helvetica, sans-serif;}
.lightGrey10 {font-weight: normal;font-size: 10px;color:lightgray; font-family: Verdana, Arial, Helvetica, sans-serif;}
.darkGrey14 {font-weight: normal;font-size: 14px;color:darkgray; font-family: Verdana, Arial, Helvetica, sans-serif;}
.customerNotifications {font-weight: normal; font-size: 12px; color: bisque; background-color: darkred; font-family: Verdana, Arial, Helvetica, sans-serif; width: 100%; padding-left: 19px; padding-right: 19px; padding-top: 5px; padding-bottom: 5px; border-radius: 5px;}
.darkGreen14 { font-weight: normal; font-size: 14px; color: #535d65; font-family: Verdana, Arial, Helvetica, sans-serif;}
.darkGreenB14 {font-weight:bold; font-size: 14px; color: #535d65; font-family: Verdana, Arial, Helvetica, sans-serif;}
/* Toolbars -------------------------------------------------------------------------*/
.tlbr {height: 35px;}
.tlbrIcon {font-size: 22px !important;}
.tlbrListItemAnchor {font-size: 18px !important; cursor: default;}
.tlbrFont {font-weight:normal; font-size: 12px; color: #474848; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
/* Boxes ----------------------------------------------------------------------------*/
.editBoxLarge {width: 100%; max-width: 400px; min-width: 80px; padding-left: 10px; min-height: 30px; border-radius: 0.25rem;}
.editBoxMedium {width: 100%; max-width: 200px; min-width: 50px; padding-left: 10px; min-height: 30px; border-radius: 0.25rem;}
.editBoxSmall {width: 100%; max-width: 80px; min-width: 20px; padding-left: 5px; min-height: 30px; border-radius: 0.25rem;}
.inputTextBoxMedium {display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555555; vertical-align: middle; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 4px;}

/*The clear text 'x' in search text-boxes properties */
.span-cleartext {
    background: transparent !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 5px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 5px !important;
    color: #cdcccc !important;
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
    width: 3em;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
}
.span-cleartext-border-blur {
    border-bottom: 1px solid #e4e4e4 !important;
    border-right: 1px solid #e4e4e4 !important;
    border-left: none !important;
    border-top: 1px solid #e4e4e4 !important;
}
.span-cleartext-border-focus {
    border-bottom: 1px solid #cccccc !important;
    border-right: 1px solid #cccccc !important;
    border-left: none !important;
    border-top: 1px solid #cccccc !important;
}
div.input-group-append .mdi-close::before {
    font-size: large !important;
}
.textbox-without-borderright {border-right: none !important; border-bottom-right-radius: 0 !important; border-top-right-radius: 0 !important;}

/* Grids ----------------------------------------------------------------------------*/
.dlLBH {font-weight: bold; font-size: 12px; color: black; font-family: Verdana, Arial, Helvetica, sans-serif; vertical-align:inherit;} /* DataList LinkButton Header */
.dllbr {font-weight: normal; font-size: 12px; color: black; font-family: Verdana, Arial, Helvetica, sans-serif;} /* DataList LinkButton Row */
.dataListDropDown {padding: 0px 6px; border:none } /* Overwrite bootstrap "btn" class settings to avoid line height increase */
.dataListRowInactive {background-color: #efc2c2 !important;}
.dataListRowSuspended {background-color: #ffd052 !important;}
.dataListRowLocked {background-color: #ffd052 !important;}
.dlClm {line-height: 1em !important; padding: 5px !important;  vertical-align: middle !important;} /* DataList Column */
.scrolling-wrapper {overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}
.rightAlling {text-align:right;}
.centerAlling {text-align:center;}
.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) {background-color: #eef !important;}
.tableStripedRow:nth-child(odd) {background-color:transparent;}
.dgth {vertical-align:top !important;} /* Dragable Table Header */
.thDrHn {height: 10px; margin-top:0px; cursor: move;} /* background-image: url("handle.png");background-repeat: repeat-x; margin-bottom: 3px; */ /* Table Header Drag Handle */
/* Aligns */
.alingBottom {position: absolute; bottom: 0;}
.alingMiddle {position:center;}
/* Icons ----------------------------------------------------------------------------*/
.headerIcon {font-size: 17px;text-align: center;}
.addnewIcon {color: green;font-size: 17px;}
.editIcon {color: #428bca;font-size: 17px;}
.infoIcon {color: dodgerblue; font-size: 17px;}
.trashIcon {color: darkred; font-size: 17px;}
.syncIcon {color: darkgreen; font-size: 17px;}
.checkIcon {color: green; font-size: 17px;}
.uncheckIcon {color: dimgrey; font-size: 17px;}
.suspendedIcon {color: #92640f;font-size: 17px;}
.timeStampIcon {color: cadetblue; font-size: 17px; float:right;}
.signedIcon {color:darkgreen; font-size:24px;}
.signupIcon {color:brown; font-size: 24px;}
.searchBarIcon {font-size: 24px !important; vertical-align: middle !important; color: #495057 !important;}
/* Error Page ------------------------------------------------------------------------*/
.errorHdr {color: brown; font-family: helvetica, arial, sans serif; font-size: 28px; font-weight: normal; line-height: 1; letter-spacing: -1px; margin: 0 0 10px 0;}
.errorPageTextBox {width: 100%; max-width: 500px;}
/* DatePicker -----------------------------------------------------------------------*/
.ajax__calendar_container {background-color:aliceblue !important; }
.datePickerTextBox {width: 90px; height: 26px; padding: 3px 6px; font-size: 13px; line-height: 1.428571429; color: #555555; vertical-align: middle; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 4px;}
.dateTimePickerList {width: 90px; height: 26px; padding: 3px 6px; font-size: 11px; line-height: 1.428571429; color: #555555; vertical-align: middle; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 4px;}
.labelEmulation {border: 0px !important; background-color: transparent !important; }
.lightBlueDatePickerDate {max-width: 100px !important; color: #428bca !important;}
.dPDate {max-width: 100px !important; color: #61686d !important;}
.dPOpnClndrIcn {font-size: 18px !important; cursor: default; color: #61686d !important;}
/* Popup modal global settings */
.popupExtenderBackGround {background-color: Gray; filter: alpha(opacity=60); opacity: 0.60;}
.mopopextcntrn {position: fixed; left: 0; top: 0; z-index: 999900;} /* ClueTips zIndex is set to 9999999 */
.mopopext_sl {position: fixed; left: 0; top: 0; z-index: 999990;}
.popupExtenderHeader {background-color: #4c4b4b; color: white;font-weight: 100; padding: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; font-size:larger;}
.popupExtenderFooterButtons {padding-top: 10px; padding-bottom: 10px; padding-left: 20px; background-color: #999999; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
.popupExtenderEditPanel {background-color: #f8f9fa; border-radius: 16px;}
.ButtonsArea {background-color: #caccd8; margin-right: 0px; margin-left: 0px;}
    .ButtonsArea a {padding-top: 8px !important; padding-bottom: 8px !important; padding-right: 20px !important;} /* padding-right to add separation between line items */
.waitPanel {background-color: #2f2f2f;filter: alpha(opacity=90);opacity: 0.90;width: 100% !important;height: 100% !important;top: 0px !important;left: 0px !important;position: absolute !important;z-index: 100002 !important;border-radius:8px;}
.waitMessageLabel {color: white;font-size: 16px;}
 /* Service Agreement Edit Popup */
.ServiceAgreementEditPopup {width: 1100px; min-height: 700px; background-color: #f8f9fa; border-radius: 16px;}
.ServiceAgreementEditPopupBody { min-height: 600px;}
/* Signature Popup */
.SignaturePopup {min-width: 305px; min-height: 220px;}
.SignaturePopupBody {min-height: 200px;}
/* Clue Tips */
.clueTipLineSeparator { border-top: 3px solid #999999;}
/* Signature Control */
#signatureCanvas {background-color: #fff;}
#btnClear {float: right;}
#btnAccept {float: left;}
.signatureArea {width: 300px;color: #ff6600;}
.signatureArea div {}

.form-control {height: 28px; font-size: 13px; padding: 3px 6px;}
.btn {font-size: 14px; padding: 3px 12px; border-radius:.35rem;}
.btn-primary {color: #ffffff; background-color: #428bca; border-color: #357ebd;}
.well {min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);}
.container { max-width:96%;}
label {font-weight: normal; margin-bottom: 0px;}
.requieredField {background-color: #e6ece9;}
/* Outside Sesion */
#outsideMainDiv {display: table; position: absolute; height: 100%; width: 100%; background-image: url(../Images/index-background.jpg); background-repeat: no-repeat; background-size: cover;}
#outsideConteinerDiv {margin-left: auto; margin-right: auto; position: relative; max-width: 440px; width: calc(100% - 40px); padding: 44px; margin-bottom: 28px; background-color: #fff; -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.2); -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.2); 
                      box-shadow: 0 2px 6px rgba(0,0,0,0.2);  min-width: 320px;  min-height: 338px;  overflow: hidden;  box-sizing: border-box; -webkit-animation: fadeIn .3s ease-in; border-radius: 10px;}

/* Tree View */
.tvSelectableItem {font-weight: bold; color: #474848;}
.tvInactiveItem {color: #de4b4b !important;}
.tvSelectableItemIcon { font-size: 14px; color: #de4b4b;}
.tvAddItem {font-weight: bold;}
.tvAddItemIcon {font-size: 14px; color: #008000;}

/* SPLITER */
.split { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow-y: auto; overflow-x: hidden;}
.content { border: 0px;  box-shadow: inset 0 1px 2px #e4e4e4;}
.gutter { background-color: transparent; background-repeat: no-repeat; background-position: 50%;}
    .gutter.gutter-horizontal { cursor: col-resize; background-image: url('../Images/vertical.png');}
    .gutter.gutter-vertical { cursor: row-resize; background-image: url('../Images/horizontal.png');}
    .split.split-horizontal,
    .gutter.gutter-horizontal { height: 100%; float: left;}
/* Main Menu */
.mainMenuSmallScreen {display: none;}
.mainMenuLargeScreen {display: inherit;}
.mainMenuIconConteinerWidth {width: 30px;}
/* Sub Menus */
.submenu {position: absolute;top: 50px;left: 20px;z-index: 1010;padding: 1px;text-align: left;white-space: normal;background-color: #f5f3f3;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 8px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);background-clip: padding-box;}
.submenu-content {padding: 9px 14px;}
.submenu-title {padding: 8px 14px; margin: 0; color: white;font-size: 14px;font-weight: normal;line-height: 18px;background-color: #535d65;border-bottom: 1px solid #ebebeb;border-radius: 8px 8px 0 0;}
.submenu-list-group-item {background-color: transparent; border: 0px; padding: 5px 15px;}
.menuItemSelected {color: #535d65 !important;}
/* User Profile */
.userProfileSubmenu {position: absolute;top: 50px;right: 20px;z-index: 1010;padding: 1px;text-align: left;white-space: normal;background-color: #f5f3f3;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 8px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);background-clip: padding-box;width: 345px;margin-left: 12px;max-height: calc(100vh - 62px - 100px);overflow-y: auto;overflow-x: hidden;}
#headerUserProfileAvatar {min-width:270px; line-height:1.2em;}
#headerUserProfileAvatar img {border-radius: 50%;height: 35px;width: 35px;}
.userProfileSubmenu-2 {margin: 20px 33px;white-space: nowrap;line-height: normal;color: #000;}
.userProfileSubmenu-3 {margin-left: 101px;margin-bottom: 10px;position: relative;height: 86px;width: 86px;display: block;vertical-align: top;text-align: center;}
#userProfileSubmenuAvatar {background-size: 80px 80px;height: 80px;width: 80px;border: none;vertical-align: top;border-radius: 50%;overflow: hidden;display: block;text-align: center;}
    #userProfileSubmenuAvatar img {border-radius: 50%;height: 80px;width: 80px;}
#userProfileSubmenuChangeAvatar {background: #fff;bottom: 0;position: absolute;right: 0;overflow: visible;height: 32px;width: 32px;border-radius: 50%;display: block;text-align: center;}
    #userProfileSubmenuChangeAvatar a {bottom: 0;box-shadow: 0 1px 1px 0 rgba(65,69,73,0.3), 0 1px 3px 1px rgba(65,69,73,0.15); margin: 0 2.5px 3px;outline: 0;position: absolute;right: 0;height: 26px;width: 26px;border-radius: 50%;overflow: hidden;font-size: 18px;color: #886c6c;padding-top: 3px;}
.userProfileSubmenu-4 {display: block;vertical-align: top;text-align: center;}
.userProfileSubmenuEmployeeName {color: #202124;font: 500 16px/22px Vedana,Helvetica,Arial,sans-serif;letter-spacing: .29px;margin: 0;text-align: center;text-overflow: ellipsis;overflow: hidden;}
.userProfileSubmenuEmployeeAccount {color: #5f6368;font: 400 14px/19px Helvetica,Arial,sans-serif;letter-spacing: normal;text-align: center;text-overflow: ellipsis;overflow: hidden;}
.userProfileSubmenuButton {background-color: #ffffff;border: 1px solid #dadce0;-webkit-border-radius: 100px;border-radius: 100px;color: #3c4043;display: inline-block;font: 500 14px/16px Helvetica,Arial,sans-serif;letter-spacing: .25px;margin: 16px 0 16px 0;max-width: 254px;outline: 0;padding: 8px 16px;text-align: center;text-decoration: none;text-overflow: ellipsis;overflow: hidden;}
.userProfileAvatarPopup {min-width: 550px; min-height: 300px;}
.userProfileAvatarPopupBody {min-height: 250px;}
.imgUploadedUserProfileAvatar {height:25em; border-radius: 8px;}
/* Posts */
.userProfileAvatar {border-radius: 50%; height: 35px; width: 35px;}
.postEditPopup {width: 50em;}
.postEditPopupBody {max-height: 48em;}
.postListBackground {background-color: #d3e0e0; border-radius: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 5px;}
.postListGroupItem {background-color: transparent; border: 0px; padding: 5px 5px;}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 1000px) {
    .body-content {padding-left: 0px; padding-right: 0px;}
}

/* Responsive: Small Devices up to 600px width */
@media screen and (max-width: 600px) {
}

/* Responsive: Small Devices up to 768px width */
@media screen and (max-width: 768px) {
    .hideOnSmaillScreen {display:none; visibility:hidden;}
    .mainMenuSmallScreen {color: #c5c3bc; font-size: 16px; display: inherit;}
    .smallScreenMenuAnchor {color: #c5c3bc;}
    .mainMenuLargeScreen {display: none;}
    #headerUserProfileAvatar {display: none;}
    .header-area-companyname {padding-left: 0px !important;}
}

/* Responsive: Small Devices up to 1000px width */
@media screen and (max-width: 1000px) {
    .well-transparent {min-height: 10px; padding-left: 0px; padding-right: 0px; margin-bottom: 10px;}
    /* TimeCard Edit Popup */
    .timeCardEditContent {max-height: 350px; overflow-y: scroll; overflow-x: hidden;}
    .TimeCardEditPopup {min-width: 300px;}
    .imgUploadedUserProfileAvatar {
        height: 200px;
        border-radius: 8px;
    }
}

.cuswiz-card {
    width: 100%;
}

/* Responsive: Devices up to 1200px width */
@media screen and (min-width: 1200px) {
}

/* Responsive: Devices up to 1400px width */
@media screen and (min-width: 1400px) {
}

/* Responsive: Devices up to 1600px width */
@media screen and (min-width: 1600px) {
    .cuswiz-card {width: 90%;}
}