@font-face {
    font-family: 'lato';
    src: url('../fonts/lato-regular-webfont.eot');
    src: url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato-regular-webfont.woff2') format('woff2'), url('../fonts/lato-regular-webfont.woff') format('woff'), url('../fonts/lato-regular-webfont.ttf') format('truetype'), url('../fonts/lato-regular-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latobold';
    src: url('../fonts/lato-bold-webfont.eot');
    src: url('../fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato-bold-webfont.woff2') format('woff2'), url('../fonts/lato-bold-webfont.woff') format('woff'), url('../fonts/lato-bold-webfont.ttf') format('truetype'), url('../fonts/lato-bold-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe UI Regular'), url('Segoe UI.woff') format('woff');
}


@font-face {
    font-family: 'Segoe UI Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe UI Italic'), url('Segoe UI Italic.woff') format('woff');
}


@font-face {
    font-family: 'Segoe UI Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe UI Bold'), url('Segoe UI Bold.woff') format('woff');
}


@font-face {
    font-family: 'Segoe UI Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe UI Bold Italic'), url('Segoe UI Bold Italic.woff') format('woff');
}

html, body {
    height: 100%;
    font-family: 'lato';
    font-size: 14px;
    color: #333333;
    background-color: #f0f3f4;
}

.padL0 { padding-left:0; }
.padR0 { padding-right:0; }
.marB0 {margin-bottom:0;}
.marB10 {margin-bottom:10px;}
.marB20 {margin-bottom:20px;}
.marT0 {margin-top: 0px;}
.pad15 { padding: 15px; }

a {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    color: #31a7ff;
}

    a:hover, a:focus, a:active {
        opacity: 0.8;
        outline: none;
    }

.wrapper {
    margin-bottom: -35px;
    min-height: 100%;
    padding-top: 111px;

}

    .wrapper:after {
        content: "";
        display: block;
    }

.footer {
    overflow-x: hidden;
    background-color: #19171a;
    color: #737373;
    position: relative;
    z-index: 100;
    font-size: 12px;
    padding-top: 12px;
    width: 100%;
}

.footer, .wrapper:after {
    min-height: 35px;
}


.header {
    background-color: #19171a;
    border-bottom: none;
}

    .header .navbar-brand {
        padding-top: 15px;
    }

#loginbox { padding:5px 5px 0; background:#696969; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; margin-top:40px; margin-left:220px; box-shadow:0 15px 50px #999999; }
.loginPanel .panel-info > .panel-heading {background-color:#696969;border-color: #696969;color: #ff9e47; text-align:center; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; font-family: 'latobold'; }
.loginPanel .panel-info .panel-heading .panel-title { font-size:20px; text-transform:uppercase; }
.loginPanel .panel-info { border-color: #696969; background:#e9e9e9; border-radius:0 0 8px 8px; -moz-border-radius:0 0 8px 8px; -webkit-border-radius:0 0 8px 8px; margin-bottom:5px; }
.loginPanel .panel-info .panel-body { padding-top:20px; }
.loginPanel .form-control { border-color:#ffffff; box-shadow:none; height:40px; }
.loginPanel .btn.btn-warning {color:#fff; text-transform:uppercase; text-shadow:none; padding:6px 25px; }
.loginPanel .borTop { border-top:2px solid #ffffff; padding:15px 0 0; }
.linkOrange { color:#e5740c; font-size:16px; font-family: 'latobold'; }
.inputPass a.glyphicon { position:absolute; top:13px; right:13px; font-size:15px; color:#333333; }
.inputPass a.glyphicon:hover, .inputPass a.glyphicon:focus { color:#333333; text-decoration:none; }
.loginPanel .contHead { text-align:center; }
.loginPanel .contHead:after { content:""; width:100%; border-top:2px solid #ffffff; position:absolute; left:0; top:10px; }
.loginPanel .contHead span { display:inline-block; padding:0 10px; background:#e9e9e9; color:#979797; font-family: 'latobold'; font-size:15px; text-transform:uppercase; position:relative; z-index:1; }

.navbar-default .navbar-nav notification {
	display:block; float:left; padding:20px 8px 0;
}
.navbar-right .notifications .top-dropdown-menu {
    right: -40px;
    top: 32px;
}

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav notification a.dropdown-toggle {
    color: #fff;
    padding: 15px 8px;
}

    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
        color: var(--primary-color);
    }

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: var(--primary-color);
    color: #fff;
}

.header .badge {
    position: absolute;
    top: -7px;
    left: -7px;
    padding: 3px;
    z-index: 1;
    background-color: #AE0228;
    font-weight: normal;
}


.page-header {
    padding-right:15px;
    /*padding-left:45px;*/
    margin-bottom:0;
    border-color:#333;
     background:#f0f3f4;
     margin-top:0;
     border-bottom:none;
     position:fixed;
     width:100%;
    top:51px;
    z-index:100;
}

.page-header h1 {
    font-size:24px;
    padding-top:2px;
    color:#666;
    text-transform:uppercase;
    margin-top:15px;
    font-family: 'latobold';
    text-shadow:1px 1px 1px #ddd;
}


.containerPanel {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-raidus: 5px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
	width:100%;
	float:left;
}

.forgotPwdPanel {
    background-color: #fff;
    padding-top: 15px;
}

h3.with-line {
    border-bottom: 1px solid #d6d6d6;
    font-weight: 400;
    line-height: 39px;
    width: 100%;
    margin-bottom: 15px;
    margin-top: 15px;
    font-size: 18px;
}

.tab-content {
    padding: 15px;
}

.notificatonsUL {
    margin: 0;
    padding: 0;
    margin-left: 10px;
}

    .notificatonsUL li {
        position: relative;
        padding: 2px 18px 2px 0;
    }

.notificatonClose {
    position: absolute;
    right: 0;
    top: 6px;
    width: 12px;
    height: 15px;
    cursor: pointer;
}

    .notificatonClose .glyphicon {
        color: #FD1014;
        font-weight: normal;
        font-size: 11px;
        vertical-align: text-top;
        margin-top: -2px;
        opacity: 0.7;
    }

    .notificatonClose:hover .glyphicon {
        opacity: 0.9;
    }
.input-group-addon {cursor:default;}


.popover-dfg {
    padding: 5px 10px;
    overflow: auto;
    max-height: 210px;
}

.popover-arrow {
    width: 20px;
    height: 15px;
    margin-top: -11px;
    margin-left: auto;
    margin-right: auto;
    background: url('../images/popup-arrow.png') 0 0 no-repeat;
}

.dashboardPanel .thumbnail .caption h3 {
    margin-top: 10px;
}
legend {padding-bottom:15px;}
.hamburger.is-open .hamb-top, .hamburger.is-open .hamb-bottom {display:none;}

.fieldset {border:1px solid #ccc; padding: 10px; margin-bottom: 15px; }
.roleAllocCont .fieldset { min-height:134px; }
.equipAllocCont .fieldset { min-height:148px; margin-bottom:0; }
.fieldset legend {border-bottom: none; font-size: 14px; margin-bottom: 0; width:auto;  padding: 0px 10px; font-family: 'latobold';}
.dropableUL { border:1px solid #ccc; min-height:134px; }


.userStatus {width:18px; height: 18px; border-radius: 50px; -moz-border-radius:50px; -webkit-border-radius:50px; background-color:#e55353; display: inline-block;}
.roleUL {margin:0; padding: 0;}
.roleUL li {list-style-type:none; border-bottom: 1px solid #ccc; padding: 10px 5px; min-height:60px;}
.roleUL li:last-child{border-bottom: none;}
.accordionBody {padding:15px;}
.newAssignments > .roleUL li, .allocateAllListPanel > .roleUL li {cursor:pointer;}
.listMainPanel .panel, .assignRightsPanel .panel {box-shadow: none;}
.listMainPanel .panel-default, .assignRightsPanel .panel-default {border:none;}
.listMainPanel .panel-body, .assignRightsPanel .panel-body {background-color: #ececec; padding:5px 10px 15px 10px;}
.listMainPanel .panel-default > .panel-heading, .assignRightsPanel .panel-default > .panel-heading {background-color: #bababa; border-bottom: none; font-size: 16px; font-family: 'latobold'; color:#fff; font-weight: normal;}
.nameCercle {width:40px; height: 40px; background-color: #838383; text-align: center; vertical-align: middle; border-radius: 50px; -moz-border-radius:50px; -webkit-border-radius:50px;font-family: 'latobold'; color:#fff; font-size: 18px; line-height: 40px; text-transform: uppercase;}
.roleUL h3 {color:#428bca; margin: 0; padding: 0; margin-top:5px; font-weight: normal; font-size: 14px;}
.roleUL h5 {color:#666; margin-top: 5px; margin-bottom: 0; font-weight: normal; font-size: 12px;}
.disableList {opacity:0.5;}
.historyDatePanel {/*float:right;*/ color:#333; font-size: 14px;}
.historyDatePanel .datetimepickerhistory { margin-top:-9px; margin-right:-23px; }
.userId {color:#666;}
.requestsCount{font-family: 'latobold';}


.userStatus {width:18px; height: 18px; border-radius: 50px; -moz-border-radius:50px; -webkit-border-radius:50px; background-color:#e55353; }
.equipmentInActive {display: block;   width:18px; height: 18px; border-radius: 50px; -moz-border-radius:50px; -webkit-border-radius:50px; background-color:#333333; }
.leaveStatusList.panelHeight { max-height:45px; padding:0 !important; }
.leaveStatusList li {padding-bottom:0px; padding-top:0px; min-height: inherit; }
.leaveStatusList li a {padding:0; white-space:normal; color:#31a7ff; }
.leaveStatusList li a:hover { text-decoration:underline !important; color:#2a6496; opacity:0.8; outline:none; }
.leaveStatusList {min-width:140px; right:0; top:12px; left:inherit; overflow: auto; padding:5px; border:1px solid #aaa; background:#f5f5f5; }
.requestsListPanel .leaveStatusList li {text-align:left;}
.requestsListPanel .leaveStatusList li a { color:#428bca; }
.requestsListPanel {padding-top:5px; border-bottom:1px solid #ccc; padding-bottom: 5px; margin:0 -10px; }
.requestsListPanel:last-child {border-bottom:0; margin-bottom: 0;}
.iconClose, .iconNote, .iconEdit, .arrowDown, .tickButton { display: inline-block; vertical-align: middle;background: url('../img/sprite.png') 0 0 no-repeat;}
.iconClose {background-position:-3px -3px; width:22px; height: 22px;}
.iconNote {background-position:-61px -3px; width:19px; height: 19px; }
.addNote .iconNote {background-position:-61px -26px;}
.iconEdit {background-position:-85px -3px; width:19px; height: 19px; }
.arrowDown {background-position:-6px -31px; width:19px; height: 18px; }
.tickButton {background-position:-4px -49px; width:25px; height: 25px;}
.badgeCercle {width:25px; height: 25px; border-radius: 50px; -moz-border-radius:50px; -webkit-border-radius:50px; background-color:#838383; display: inline-block; color:#fff; font-size:10px; line-height: 25px; text-align: center; font-family: 'latobold';}
/* auto complete styles */
.auto-complete-results {margin:0; padding:0; border:1px solid #ccc; top:0;}
.auto-complete-results li {list-style-type:none; background:#fff; padding:2px 5px; }

.borderLeftBlock { border-left: 1px solid #999999; padding: 0 0 0 10px; }

.suggestions-list {margin:0; padding:0; top:32px; z-index:99;
  position:absolute;
  width:92%; /* 87% */
	max-height:250px;
	overflow:auto;
  border: 1px solid #cccccc;
  background: #ffffff;
}

.suggestions-list li {

    list-style-type:none;
    background:#fff;
    border-top:1px solid #ccc;
    /*border-left:1px solid #ccc;
    border-right:1px solid #ccc;*/
padding:8px 10px; cursor:pointer; }
.suggestions-list li:last-child { border-bottom:1px solid #ccc;}
.suggestions-list li.active { background: var(--primary-color); color: #ffffff; }

/* ---- custom select -------*/
.custom-select {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: 13px;
	zoom: 1;
	*display: inline;
	width: 220px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.custom-select.small {
	width: 104px;
}
.custom-select.medium {
	width: 164px;
}
.custom-select.large {
	width: 300px;
}
.custom-select.xlarge {
	width: 380px;
}
.custom-select > select {
	display: none !important;
}
.custom-select > a.dropdown-toggle {
	border-radius: 0;
	line-height: 28px;
	box-shadow: none;
	background: #ffffff;
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0 0 0 8px;
	border: 1px solid #aaa;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	color: #888;
	width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 30px;
}
.custom-select > a.dropdown-toggle.disabled,
.custom-select > a.dropdown-toggle.disabled:hover {
	cursor: not-allowed;
	color: #aaa;
	background: #eee;
}
.custom-select > a.dropdown-toggle:hover,
.custom-select.open > a.dropdown-toggle {
	color: #333;
}
.custom-select.open > a.dropdown-toggle {
	border-bottom: 0;
	line-height: 29px;
}
.control-group.error .custom-select > a.dropdown-toggle {
	border-color: #f09784;
	color: #d68273;
}
.custom-select > a.dropdown-toggle > span {
	display: block;
	overflow: hidden;
	margin-right: 26px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.custom-select > a.dropdown-toggle > b {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 18px;
	height: 100%;
}
.custom-select > a.dropdown-toggle > b:before {
	content: "\f0d7";
	display: inline-block;
	font-family: FontAwesome;
	font-size: 12px;
	position: relative;
	top: -1px;
	left: 1px;
}
.custom-select.open > a.dropdown-toggle > b:before {
	content: "\f0d8";
}
.custom-select > .dropdown-menu {
	margin-top: 0;
	border: 1px solid #aaa;
	border-top: 0;
	padding-bottom: 0;
	width: auto;
	min-width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 0;
}
.custom-select > .dropdown-menu > .custom-select-search {
	position: relative;
	z-index: 1010;
	margin: 0;
	padding: 0 4px;
	white-space: nowrap;
}
.custom-select > .dropdown-menu > .custom-select-search > input {
	width: 100%;
	height: 30px;
	margin: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 4px 20px 4px 5px;
	border-radius: 0;
}
.custom-select > .dropdown-menu > .custom-select-search:after {
	content: "\f002";
	display: inline-block;
	color: #888;
	font-family: FontAwesome;
	font-size: 14px;
	position: absolute;
	top: 4px;
	right: 10px;
}
.custom-select > .dropdown-menu > ul {
	border-color: #aaa;
	border-top: 0;
	margin: 4px 0;
	padding: 0;
	list-style: none;
	background-color: #fff;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 240px;
	padding-right: 14px;
}
.custom-select > .dropdown-menu > ul > li > a {
	font-size: 13px;
	margin-bottom: 1px;
	margin-top: 1px;
	display: block;
	padding: 3px 8px;
	clear: both;
	font-weight: normal;
	line-height: 20px;
	color: #333;
	cursor: pointer;
	width: 100%;
}
.custom-select > .dropdown-menu > ul > li > a:hover,
.custom-select > .dropdown-menu > ul > li > a:focus {
	color: #fff;
	text-decoration: none;
	background-repeat: repeat-x;
}
.custom-select > .dropdown-menu > ul > li > a:hover {
	background: #4f99c6;
}
.custom-select > .dropdown-menu > ul > li > a:focus {
	background: #2283c5;
}
.custom-select > .dropdown-menu > ul > li.empty-result > em {
	text-align: center;
	padding: 4px 8px;
	display: block;
}
.custom-select > .dropdown-menu > .custom-select-action > button {
	border-radius: 0;
	background-image: none;
}
.custom-select > .dropdown-menu:before {
	border: 0;
}

/*.autoCompletePanel .dropdown-menu {top:1px;}
.autoCompletePanel  .custom-select > a.dropdown-toggle {cursor:default;}*/

/*.autoCompletePanel .radio-inline {padding-left:0;}*/
.autoCompletePanel .radio-inline input {width:inherit;}
.custom-select > a.dropdown-toggle {height:35px; line-height:33px;}

.form-horizontal label {line-height:22px;}

/* ---- custom select -------*/

/* ------------- grid ------------- */
.containerHeader {background:#e0e0e0; padding: 15px; margin-top:-15px; margin-right:-15px; margin-left:-15px; margin-bottom: 15px;}
.containerHeader .calView { color:#666666; font-size:20px; margin-top:5px; }
.containerHeader .calView:hover, .containerHeader .calView:focus { text-decoration:none; }
.containerHeader .input-group-addon {background-color:transparent; border: none;}
.containerHeader .form-horizontal .control-label { padding-top:7px !important; }
.statusEnable .glyphicon {
    color: #29a000;
}

.statusDisable .glyphicon {
    color: #d22d11;
}

.deleteIcon .glyphicon {
    color: #d22d11;
}
.iconsDisable .glyphicon {color:#ccc;}

.settingOperationHrs .glyphicon {margin-top:8px;}

.deleteIcon .glyphicon {color:#d22d11;}
td.actionLinks { min-width:100px; }
.actionLinks a {margin:0 4px 0 0;}
.actionLinks .editable-table-button { font-size:18px; }
.tab-content .glyphicon { margin:0 4px 0 0; }
.disabled, .disabled:hover, .disabled:active { opacity:0.4 !important; cursor:not-allowed !important; color:#333333 !important; }
.txtOrange { color:#ed9c28; font-size:16px; }
.divider { margin:0 15px; }

.checkbox.lightGreyBg, .checkbox.greyBg, .radio.lightGreyBg, .radio.greyBg  { margin:5px 0; padding:5px 5px 5px 30px; text-transform:uppercase; }
.greyBg { background:#cdcdcd; }
.lightGreyBg { background:#f5f5f5; }

.gridLink {

    cursor:pointer;
    margin-right:15px;
}

.disableGridLink {
    cursor:default;
    color:#ccc;
    margin-right:15px;
}

.paginationPanel ul {
    margin: 0;
}

.dataTables_length label, .dataTables_filter label {
    font-weight: normal;
}

.dataTables_length select {
    border: 1px solid #ccc;
    font-size: 12px;
    padding: 2px;
    border-radius: 4px;
    moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.dataTables_filter input[type="text"] {
    border: 1px solid #ccc;
    padding: 0 2px;
    border-radius: 4px;
    moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.paging_full_numbers a.paginate_active {
    background-color: var(--primary-color);
    color: #fff;
}

tr.even td.sorting_1 {
    background-color: #ffe3cb;
}

/* ---------- form -------------*/
label.control-label , .col-form-label {font-weight:normal; color:#666; font-family: 'latobold'; font-size:13px; padding-right:1px;}
.form-control-static label {font-weight:normal;}
.form-control-static {border-bottom:1px solid #ddd;}
.form-control:focus {border-color:#dea36f;}
.input-group {margin-bottom:0;}
.input-group > span { border-radius:4px; }

.btn {
    font-family: 'latobold';
}

    .btn.btn-warning {
        color: #fff;
        text-shadow: 1px 1px 1px #666;
    }

.btn-warning {
    background-color: var(--primary-color);
}

.btn-gray {
    background-color: #d6d6d6;
    color: #333;
}

.btn-warning, .btn-warning:hover {
    color: #FFF;
}

.form-group.required > .control-label:after {
    content: "*";
    color: red;
    font-weight: 700;
}

.subfieldset {border:1px solid #ccc; margin:0; padding:0; margin-bottom:20px;}
.subfieldset legend { font-size:14px; padding:5px; margin-left:2%; background:#eee; border:1px soli dred; width:auto; margin-bottom:0;	}

button.btn.btn-warning {background-color:var(--primary-color); border-color:var(--primary-color);}

/* ----- modal ----- */
.modal .modal-dialog {
    margin:30px auto;
	vertical-align:middle;
}
.modal-header {
    background-color: #f0f3f4;
}

.modal-title {
    text-transform: uppercase;
    font-family: 'latobold';
    text-shadow: 1px 1px 1px #ccc;
    color: #666;
}

.modal-content {
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

/* ---- left tab --- */

.tabs-left > .nav-tabs {
    border-bottom: 0;
}

    .tabs-left > .nav-tabs > li,
    .tabs-right > .nav-tabs > li {
        float: none;
    }

        .tabs-left > .nav-tabs > li > a,
        .tabs-right > .nav-tabs > li > a {
            min-width: 74px;
            margin-right: 0;
            margin-bottom: 3px;
        }

.tabs-left > .nav-tabs {
    float: left;
    margin-right: 19px;
    border-right: 1px solid #ddd;
}

    .tabs-left > .nav-tabs > li > a {
        margin-right: -1px;
        -webkit-border-radius: 4px 0 0 4px;
        -moz-border-radius: 4px 0 0 4px;
        border-radius: 4px 0 0 4px;
    }

        .tabs-left > .nav-tabs > li > a:hover,
        .tabs-left > .nav-tabs > li > a:focus {
            border-color: #eeeeee #dddddd #eeeeee #eeeeee;
        }

    .tabs-left > .nav-tabs .active > a,
    .tabs-left > .nav-tabs .active > a:hover,
    .tabs-left > .nav-tabs .active > a:focus {
        border-color: #ddd transparent #ddd #ddd;
        *border-right-color: #ffffff;
    }

    .numberUL {margin:0; padding:0;    }
    .numberUL li {list-style-type:none; margin-bottom:10px;}

    .updatePwdPanel .alert {color:#3c763d; font-size:16px;}

/* Grid styles*/
.displayInline {
    display: inline;
}

.gridPagination {
    width: 100%;
}
    .gridPagination .form-control {
        padding:5px;
        height:27px;
    }

    .gridPagination .first {
        text-align: left;
        vertical-align: middle;
        min-width: 225px;
    }

    .gridPagination .middle {
        min-width: 325px;
    }

        .gridPagination .middle a {
            padding: 3px 7px;
            font-size: 16px;
            font-weight: 600;
            background: #f1f1f1;
            margin: 0 5px;
            color: #565656;
            border: 1px solid #d4d1da;
            border-radius: 2px;
        }

    .gridPagination .last {
        text-align: right;
        min-width: 175px !important;
    }

.pad0 {
    padding: 0px !important;
}

.mar0 {
    margin: 0px !important;
}

 /*.form-control, .btn {
    border-radius: 0;
}

.form-control {
    background: #e1e0e0;
    border: none;
    box-shadow: none;
    color: #333333;
   height: 30px;
}*/

.width80 {
    width: 65px;
}

.tabContent h2.pageHead .btn {
    top: -10px;
    text-transform: none;
}

.tblGridCont {
    max-width: 100%;
    overflow: auto;
}

.tblGridCont .tblGrid {
        /*box-shadow: 2px 2px 3px #d6d6d6;*/
    }
.table-bordered {border:none;}
.table tbody > tr > td {border:none;}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {border-bottom:1px solid #ddd;}
.table-bordered > thead > tr > th, .table-bordered > thead > tr > td {border:none; border-bottom:1px solid #ddd;}

.tblGrid thead td, .tblGrid thead th {
    text-align: left;
    background: #fff;
    color: #444;
    font-weight: 600;
}
.tblGrid thead td, .tblGrid thead th.textCenter {
    text-align:center;
}

.tblGrid tbody td {
    /*text-align: center;*/
    vertical-align: middle !important;
}

.tblGrid tbody td span {
	display: inline-block;
	vertical-align: middle;
}

.table > thead > tr > th {
    font-family: "latobold";
    font-weight: normal;
}
/*End Grid styles*/
/*model Validation*/
.error-msg {
    color: #f9222c;
    padding-right: 6px;
	display:block;
}
/*End Validation*/
/*Custom Radio*/
.customRadio, .customCheckbox {
    position: relative;
    padding-left: 19px;
    text-align: left;
}

.customRadio input, .customCheckbox input {
    opacity: 0;
    position: absolute;
    left: -99999px;
}

.customRadio input ~ span {
    width: 14px;
    height: 14px;
    background-color: #d5d4d4;
    position: absolute;
    top: 4px;
    left: 0;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

.customRadio input:not(:checked) ~ span:before, .customRadio input:checked ~ span:before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);
    position: absolute;
    left: 3px;
    top: 3px;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    transition: all .2s;
}

.customRadio .form-control[disabled], .customCheckbox .form-control[disabled], .customRadio .form-control[readonly], .customCheckbox .form-control[readonly] {
    opacity: 0;
}

.customRadio .form-control[disabled] ~ span, .customCheckbox .form-control[disabled] ~ span, .customRadio .form-control[readonly] ~ span, .customCheckbox .form-control[readonly] ~ span {
    cursor: not-allowed;
}
.customRadio i.arrowTop {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #eeeeee;
    position: absolute;
    bottom: -17px;
    left: 40%;
    display: none;
}

.customRadio input:checked ~ i.arrowTop {
    display: block;
}
/*End Custom Radio*/
/*Custom Checkbox*/

.customCheckbox input ~ span {
            width: 15px;
            height: 15px;
            background-color: #f8f8f8;
            border: 1px solid #aaa;
            border-radius: 3px;
            position: absolute;
            left: 0;
            top: -5px;
            box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
        }

.customCheckbox input:not(:checked) ~ span:before, .customCheckbox input:checked ~ span:before {
    content: "✔";
    color: #522e91;
    position: absolute;
    left: 1px;
    top: -5px;
    font-weight: 700;
    transition: all .2s;
}

.customCheckbox input:not(:checked) ~ span:before, .customRadio input:not(:checked) ~ span:before {
    opacity: 0;
    transform: scale(0);
}

.customCheckbox input:checked ~ span:before, .customRadio input:checked ~ span:before {
    opacity: 1;
    transform: scale(1);
}
/*End Custom Checkbox*/
.marT4 {
    margin-top: 4px;
}
.marT8 {
    margin-top: 8px;
}
.marT10{
    margin-top: 8px;
}
.marT12{
    margin-top:12px;
}
.marT20{
    margin-top: 20px;
}
.marR10 {
    margin-right: 10px;
}
.hasLoader {
    display: block;
}


/*8888888888888888888888888888888-----------SPINNER--------------888888888888888888888888888888*/
.spinner {
    /*margin: 100px auto 0;*/
    /*width: 70px;*/
    text-align: center;
    position: fixed;
    display: none;
    /* Newly Added properties */
    width: 100%;
    height: 100%;
    background: #ffffff;
    opacity: 0.6;
    left: 0;
    top: 0;
    padding-top: 20%;
    z-index: 99999;
}

.spinner.hasLoader {
    display: inherit;
}

.spinner > div {
    width: 18px;
    height: 18px;
    background-color: var(--primary-color);
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.hovericon{
    cursor:pointer;
}

.tabSection .nav-tabs { border:0 none; }
.tabSection .nav > li > a { text-transform:uppercase; font-family:"latobold"; padding:10px 30px; }
.tabSection .nav-tabs > li.active > a, .tabSection .nav-tabs > li.active > a:hover, .tabSection .nav-tabs > li.active > a:focus { background:#428bca; color:#ffffff; opacity:1; border-width:0 0 1px 0; }
.tabSection .tab-content { background:#f9f9f9; border:2px solid #ddd; min-height:310px; width:100%; float:left; overflow:auto; padding:10px 0; }
#staffSendInvite .modal-lg { width:80%; max-width:95%; }
.tab-content .pagination { margin:0; }

/*-- blue admin sidebar style overite here */
.al-sidebar {
 width:220px;
 top:50px;
 background-color:#19171a;
  left: 0;
  z-index: 904;
  display: block;
  min-height: 100%;

  height: 100%;
  position: fixed;
}
.al-sidebar-sublist > li.selected:not(.with-sub-menu) > a, .al-sidebar-sublist > li.selectedMenu:not(.with-sub-menu) > a, .al-sidebar-list-item.selected:not(.with-sub-menu), .al-sidebar-list-item.selectedMenu:not(.with-sub-menu) {background-color:var(--primary-color);}
a.al-sidebar-list-link:hover {color:var(--primary-color);}
.sidebar-hover-elem {display:none;}
.btn:hover {transform:none;-webkit-transform:none;}
/*-- //blue admin sidebar style overite here */

legend { font-size:19px; }
table.table { margin-bottom:0; }

.dhx_cal_light_wide .dhx_wrap_section:last-child { display:none; }
.dhx_cal_event_clear b { display:none; }
.dhx_cal_next_button { background:url('../img/arrow_right.png') no-repeat center center; }
.dhx_cal_prev_button { background:url('../img/arrow_left.png') no-repeat center center; }

.panel-collapse { position:relative; }
.accordionLoading { position:absolute; width:100%; height:100%; background:#000000; opacity:0.8; z-index:9; top:0; left:0; text-align:center; display:none; }
.accordionLoading img { margin-top:200px; }

.fc-unthemed .fc-today { background:#fff2e7; font-weight:bold; }

.equipAddNew { position:absolute; top:0; right:-15px; }
.equipAddNew span { display:inline-block; padding:8px; }

.errorListPanel { background: #ffffff; border-radius: 5px;border: 1px solid #cccccc; margin-top: 10px; margin-bottom: 10px; padding: 10px; color: #ff0000; }
.errorListPanel ul { list-style: none; margin: 0; padding: 0; }
.errorListPanel ul li { margin: 5px 0; }

@media screen and (min-width:768px) and (max-width:991px) {
	.calNote { margin-top:0; }

	.tabSection .tab-content .table { width:auto; }
}

.allocationAccordion h4 a {outline:none; display:block; position:relative; font-size:16px; text-transform: uppercase;}
.allocationAccordion h4 a:hover, .allocationAccordion h4 a:focus{text-decoration: none;}
.allocationAccordion .panel {margin-bottom:10px;}

.newsPreviewPane { max-width: 75%; }

#allocationCalendar .blurCalendar { height:auto; }
#allocationCalendar .fc th, #allocationCalendar .fc td { padding:0 5px; }
#allocationCalendar .fc-other-month { background:#f9f9f9; }
#allocationCalendar .fc-basic-view tbody .fc-row { max-height:120px; color:#888888; font-size:12px; line-height:18px; }
#allocationCalendar .fc-basic-view tbody .fc-row strong { font-size:13px; }
#allocationCalendar .fc-day-number {font-size: 15px; line-height: 20px; }

.editable-wrap .editable-controls > input, .editable-wrap .editable-controls > select, .editable-wrap .editable-controls > textarea { width:100%; max-width:100%; }
.table > tbody > tr > td { line-height:18px; padding:8px 4px; }
.form-control.widhAuto { width:auto; }

.phNoCounCode .code { width:auto; display:inline-block; font-size:17px; margin-right:5px; }
.phNoCounCode .form-control { width:75%; display:inline-block; }

.accordion-panel .listMainPanel .panelHeight { height:400px; overflow: auto; padding:15px 1px; }
.accordion-panel .allocateAllListPanel .panelHeight { height:346px; }
.accordion-panel .allocateAllListPanel .panelHeight .mCSB_container { padding-bottom:20px; }
.accordion-panel .listMainPanel .panel-heading { padding: 12px; height: auto; }
.accordion-panel .panel-title { background: #efefef; border-radius: 5px 5px 0 0; height: 45px; }
.accordion-panel:nth-child(even) .panel-title { background:#f5f5f5; }
.accordion-panel.panel-open .panel-title, .accordion-panel .panel-title:hover { background:#dfdfdf; }
.accordion-panel .panel-title .indTotalCount { font-size:11px; text-align:right; }
.accordion-panel .panel-title .indTotalCount .countPane { min-width:100px; display:inline-block; text-align:left; }
.accordion-panel .panel-title .indTotalCount .divider { margin:0 20px 0 0; height: 45px; }
.accordion-panel .panel-heading .accordion-toggle { padding:0;  }
.panel-heading, .panel-footer { height:auto; }
.panelHeight .mCSB_inside > .mCSB_container { margin-right:15px; }
.requestsListPanel:nth-child(even), .newAssignments .roleUL li:nth-child(even), .allocateAllListPanel .roleUL li:nth-child(even) { background:#dddddd; }
.allocateAllListPanel .roleUL ul li:nth-child(even) { background:transparent; }

.accordion-panel .listMainPanel .roleAllocCont.panelHeight { height:154px; padding:5px 0 0; }
.accordion-panel .listMainPanel .equipAllocCont.panelHeight { height:163px; padding:5px 0; margin-bottom:10px; }
.accordion-panel .listMainPanel .newAssignments .commonMessage { padding-right:10px; }

/* Attendance Styles */
.attendancePanel { background:#bababa; border-radius:5px 5px 0 0; padding:5px 5px 0; }
.attendancePanel .headerBlock { padding:5px 0; border-bottom:1px solid #ffffff; }
.attendanceTbl { padding:10px; background:#ececec; max-width:100%; overflow:auto; }
.attendanceTbl.viewJob { margin-left:10px; padding:5px; }
.attendanceTbl td { vertical-align:middle !important; }
.attendanceTbl th { text-align:center; background:#ccc; }
.attendanceTbl td .glyphicon { position:relative; top:6px; font-size:10px; }
.attendanceTbl td.actionLinks { width:120px; }
.attendanceTbl td.actionLinks a { margin:0 10px 0 0; }
.attendanceTbl td.actionLinks .glyphicon { font-size:14px; top:inherit; }
.attendanceTbl td .linkOrange .glyphicon { font-size:24px; }
.attendanceTbl td .glyphicon.big { font-size:14px; top:2px; }
.attendanceTbl td .linkOrange.disabled { cursor:not-allowed; opacity:0.8; }
.attendanceTbl tr.active td { background:#fbeae0 !important; color:var(--primary-color); }
.attendanceTbl .attendanceAccordCont { background:#a8a8a8; max-height:190px; margin:-9px; overflow:auto; }
.attendanceTbl .attendanceAccordCont th, .attendanceTbl .attendanceAccordCont td { background:#8e8e8e; padding:8px; border-color:#797979; color:#ffffff; }
.attendanceTbl .attendanceAccordCont th { color:#b5d3ee; }

.leaveManagement .table { min-width:1300px; }

@media screen and (max-width:991px) {
.attendanceTbl > table { min-width:768px; }
.attendanceTbl.viewJob > table { min-width:inherit; }
#loginbox {margin-left:0;}
.noSideMenu #wrapper.toggled {padding-left:0;}
}
/* Attendance Styles */

/* Leave Management popover Styles
.viewLeaveStatus { width:350px; height:100%; overflow:auto; z-index:1032; position:fixed; top:0; right:-350px; background:#f5f5f5; }*/
.modal-content .container-fluid { padding:0; }
.viewLeaveStatus .headerBar { background:var(--primary-color); font-size:14px; color:#ffffff; padding:10px; }
.viewLeaveStatus .headerBar a.back { color:#ffffff; font-weight:bold; text-transform:uppercase; font-weight:600; }
.viewLeaveStatus .userDetails { padding:10px 0; border-bottom:1px solid #cccccc; }
.viewLeaveStatus .userDetails .user { text-transform:uppercase; margin-top:20px; }
.viewLeaveStatus .userDetails .user span { background:#666; display:inline-block; width:30px; height:30px; border-radius:15px; color:#ffffff; padding:7px 0 0 8px; margin-right:2px; }
.viewLeaveStatus .appliedDays { border-left:1px solid #cccccc; }
.viewLeaveStatus .appliedDays .noOfdays { width:40px; height:40px; background:var(--primary-color); border-radius:20px; display:block; margin:auto; font-size:18px; color:#ffffff; padding:12px 0 0; }
.viewLeaveStatus .appliedDays .noOfdays.grey { background:#333333; }
.viewLeaveStatus h4 { font-size:15px; color:var(--primary-color); margin:0 0 5px; padding:0; }
.viewLeaveStatus table td { padding:5px; }
.viewLeaveStatus table td.labelTxt { width:25%; text-align:right; color:#777; }
/* Leave Management popover Styles */

/*lookup insert styles*/
.lookupMiniPopupForm{
    position: absolute;
	right:0;
    width: 400px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    z-index: 100;
    padding: 16px 10px;
    border-radius: 6px;
}
.lookupMiniPopupForm legend { font-size:16px; padding-bottom:10px; margin-bottom:10px; }


.csvFieldErr{
  /*background:#e5c649 !important;*/
  border-left:4px solid #e5c649 !important;
  padding: 0.2px !important;
}
.csvFieldValid{
  /*background:#90b900 !important;*/
  border-left:4px solid #90b900 !important;
}
.topListLinks a { padding:10px; display:inline-block; margin-right:10px; }
.topListLinks a.activeLink { background:#ffffff; }

.approve.Approved{
  pointer-events: none;
}
.reject.Rejected{
  pointer-events: none;
}

.text-wrap { word-wrap:break-word; }
.jobViewPage label { color:var(--primary-color); }

/* Notifications Styles */
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color:transparent; color:#ffffff; }
.navbar-right .top-dropdown-menu { right:-40px; top:55px; }
.navbar-right .top-dropdown-menu.userLog { right:-21px; }
.top-dropdown-menu .header { background:#f5f5f5; font-size:14px; }
.top-dropdown-menu .msg-list { overflow-y:auto; max-height:190px; }
.top-dropdown-menu .msg-list > a {
    border-top: 1px solid #fff;
    color: #7d7d7d;
    display: block;
    font-size: 14px;
    padding: 10px 12px;
    text-decoration: none;
}
.top-dropdown-menu .msg-list > a:hover {
    background: #e2f0ff none repeat scroll 0 0;
}
.top-dropdown-menu .msg-list > a:first-child {
    border-top: medium none;
}

/* Notifications Styles */
.notificationCont { margin-bottom:15px; border-bottom:1px solid #cccccc; padding-left:60px; position:relative; }
.notificationCont h4 { margin:0 0 5px; padding:0; font-size:15px; }
.notificationCont .icon { width:50px; height:100%; background:var(--primary-color); font-weight:600; color:#ffffff; padding:5px 5px 5px 8px; position:absolute; left:0; top:0; text-align:center; }
.notificationCont p { border-left:5px solid #cccccc; padding:10px 0 10px 10px; color:#666666; font-size:13px; }
/* Notifications Styles */

/* Prestart checklist styles */
.prestartChecklist { overflow:inherit; }
.prestartChecklist .prestartCont { /*overflow:auto;*/ position:relative;  min-height:143px; margin: -9px -16px -9px -4px;}
.prestartChecklist .prestartCont table { position:absolute; top:0; left:0; width:1280px; }
/* Prestart checklist styles */

.descCount {font-size: 12px; float:right; color:#999;}

.editable-empty, .editable-empty:hover, .editable-empty:focus, a.editable-empty, a.editable-empty:hover, a.editable-empty:focus { font-style:normal; color:#666;
}
a.errorInfoIcon,a.errorInfoIcon:hover {color:red;}
a.errorInfoIcon:hover {opacity:0.9;}

.siteDiaryTablePanel {padding:10px;  min-height:260px;}
.siteDiaryTable {background:#ccc; }
.siteDiaryTable tbody tr td {padding:5px; background:#fff; border:1px solid #ccc;}
.siteDiaryLbl {font-weight:700; position:relative; margin-right:5px;}
.siteDiaryReportHeader {margin:0 20px;}
.siteDiaryReportHeader h3 {font-size:18px; margin-top:20px; color:#333; font-weight:700;}
.siteDiaryReportHeader h4 {font-size:16px; color:#333;}
.commentBox{
    max-height: 100px;
    overflow-y: auto;
}

.roleMessage {font-size: 12px; float:right; color:#999;}
a.roleInfoIcon,a.errorInfoIcon:hover {color:#209e91;}
a.roleInfoIcon:hover {opacity:0.9;}


.progressBar div.innerProgressBar {
    background-color: #AFDDFA;
    height: 2%;
    font-size: 12px;
    line-height: 4px;
    text-align: center;
    width: 0%;
}

div.innerProgressBar.failed {
    background-color: #ff6a00;
}

.progressBar {
    width: 100px;
    position: relative;
    /*background: white;*/
}

td.tableSec {
    vertical-align: middle !important;
    text-align: center;
}

div.innerProgressBar.success {
    background-color: var(--primary-color);
}

.filesTable {
    background: #f2f2f2;
    margin-bottom: 10px;
    border-radius: 5px;
}
.marB15{margin-bottom:15px;}
.dropdown-menu.open{z-index:9999}
.numericSelect .bootstrap-select.form-control:not([class*="col-"]){width:90px;}
.progressBar div.innerProgressBar{background-color:var(--primary-color);}
.progressBar div.innerProgressBar.success{background-color:#209e91}
.progressBar{width:110px;}
a.roleInfoIcon{position:relative;left:-8px;}
.fieldHeader{color:var(--primary-color);}
.workshopReport td{width:31%}
.workshopReport td:first-child, .workshopReport td:nth-child(3){width:19%}
.dailyCheckList .table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th{background-color: #f9f9f9;}
.dailyCheckList .table-bordered>tbody>tr>td, .dailyCheckList .table-bordered>thead>tr>th{border: 1px solid #ddd;}
.dailyCheckList .attendanceAccordCont .table-bordered>tbody>tr>td, .dailyCheckList .attendanceAccordCont .table-bordered>thead>tr>th{border-color:#797979}

.sk-circle {

  width: 25px;
  height: 25px;
  position: absolute;right:-15px;top:3px; }
  .sk-circle .sk-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; }
  .sk-circle .sk-child:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: var(--primary-color);
    border-radius: 100%;
    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
            animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }
  .sk-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg); }
  .sk-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
            transform: rotate(60deg); }
  .sk-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg); }
  .sk-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
            transform: rotate(120deg); }
  .sk-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
            transform: rotate(150deg); }
  .sk-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg); }
  .sk-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
            transform: rotate(210deg); }
  .sk-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
            transform: rotate(240deg); }
  .sk-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
            transform: rotate(270deg); }
  .sk-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
            transform: rotate(300deg); }
  .sk-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
            transform: rotate(330deg); }
  .sk-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s; }
  .sk-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
            animation-delay: -1s; }
  .sk-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s; }
  .sk-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; }
  .sk-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s; }
  .sk-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s; }
  .sk-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s; }
  .sk-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s; }
  .sk-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s; }
  .sk-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s; }
  .sk-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1); } }