/*Used for Fleet Data Underline text for home page*/
.textUnderMainBar {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    line-height: 1.5px !important;
    font-size: 12px !important;
}

/*Navigation*/
/*color for navigation*/

.payNav {
    margin-top: 150px;
    margin-bottom: 25px;
}

.navbar-fixed-top {
    height: 80px !important;
}
.modal.fade {
    z-index: 10001 !important;
}
.nav-selected {
    background-color: #9EABAE;
}

.nav-default {
    background-color: #ddd !important;
}

.buttonColumn {
    width: 300px
}

::-ms-clear {
    display: none;
}

.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-color: #f48641 !important;
    text-decoration: underline;
}

.largeWidthHoliday {
    font-weight: 900 !important;
    font-size: 20px;
}

.selected {
    background-color: #f6f11a;
    transition: font-weight 200ms;
    font-weight: bold;
}

/*Font size for Timeoff Accuarls tab*/
.fontSizeTab {
    font-size: 20px;
}

/*color for navigation*/
.navRed {
    color: #AB0520;
    text-align: center
}

.navwhite {
    color: white;
    text-align: center
}
/*Color used for Approver*/
select.redBackUA option[value*="true"] {
    color: white;
    background-color: #AB0520;    
}
select.redCombinedBackUA
option[value*="UNDER80_FLAG"] {
    color: black;
    background-color: #E2E9EB;
}

option[value*="LIMIT80_FLAG"] {
    color: white;
    background-color: #0C234B;
}

option[value*="APPROVED_FLAG"] {
    color: white;
    background-color: #AB0520;
}



.redUA {
    color: #AB0520;
}

.redUAShop {
    color: white;
    background-color: #AB0520;
}

.approverActive {
    background-color: darkgray !important;
}

.approverInActive {
    background-color: white !important;
}

/*HighLightClass*/
table tbody tr:nth-of-type(2n+1) td:nth-of-type(2n+1).highlight,
table tbody tr.highlight td:nth-of-type(n+1) {
    background-color: #f6f11a !important;
}

/*Color for Timesheet*/
.table tbody tr:nth-of-type(n+1) td:nth-of-type(n+1).styleRed {
    color: #AB0520;
    font-weight: bold;
}

/*Daily Timesheet calender color*/
.calenderHighlight button,
.btn-info {
    background-color: #9EABAE !important;
    font-size: 15px;
    color: black;
}

.calenderConfirmHighlight button {
    background-color: #0C234B !important;
    font-size: 15px;
    color: white;
}

.table tbody tr:nth-of-type(n+1) td:nth-of-type(n+1).disabledCheckbox,
table tbody tr:nth-of-type(n+1).disabledCheckbox td:nth-of-type(n+1) {
    background-color: #AB0520;
}

.table tbody tr:nth-of-type(n+1) td:nth-of-type(n+1).styleGrayback,
table tbody tr:nth-of-type(n+1).styleGray td:nth-of-type(n+1) {
    background-color: #F4EDE5;
}

.table tbody tr:nth-of-type(2n+1) td:nth-of-type(n+1).styleRedback,
table tbody tr:nth-of-type(2n+1).styleRedback td:nth-of-type(n+1) {
    background-color: #AB0520;
}

.table tbody tr:nth-of-type(2n+1) td:nth-of-type(n+1).styleDeafultback,
table tbody tr:nth-of-type(2n+1).styleDeafultback td:nth-of-type(n+1) {
    background-color: #e4e7ee;
}
.table tbody tr:nth-of-type(2n+1) td:nth-of-type(n+1).styleDarkGrayback,
table tbody tr:nth-of-type(2n+1).styleDeafultback td:nth-of-type(n+1) {
    background-color: #9EABAE;
}

.table tbody tr:nth-of-type(n+1) td:nth-of-type(n+1).styleYellowback {
    background-color: #f6f11a;
}

.redUA {
    color: #AB0520;
}

.input:focus {
    margin-top: 10px;
}

input.ng-invalid {
    border-color: red;
    color: red;
    background-color: pink;
}
select.ng-invalid {
    border-color: red;
    color: red;
    background-color: pink;
}

/*Used for Sick entry page*/
#SickTimeColor table > tbody > tr:nth-of-type(2n+1) > td,
table > tbody > tr:nth-of-type(2n+1) > th {
    background-color: #ffffff;
}

/*time window*/
.hrsbox {
    width: 35px;
    text-align: center;
    line-height: 0px;    
}
.hrsBoxSize {
    font-size: 16px !important;
}
    

    /*Inner spin*/
    /* Chrome, Safari, Edge, Opera */
    .hrsbox::-webkit-inner-spin-button,
    .hrsbox::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.form-control::-webkit-inner-spin-button,
.form-control::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.hrsbox[type=number] {
    -moz-appearance: textfield;
}

.form-control[type=number] {
    -moz-appearance: textfield;
}

.modal.fade {
    transition: opacity .3s linear;
}

.uib-time input {
    width: 70px;
}

/*used for FML Page*/
/*time window*/
.searchbox {
    width: 85%;
    text-align: center;
    line-height: 0px;
}

/*used for main screen*/
.btn.focus,
.btn:focus,
.btn:hover {
    text-decoration: none;
    color: #cc665e;
}

/* Styles go here 

.active, .inactive {font-size:40px;cursor:pointer;}
.active, .inactive {font-size:40px;cursor:pointer;}
i.active { color: #5cb85c}
i.inactive {color: #d9534f}*/

/*show button on home page*/
.col-md-4 {
    width: 40%;
    line-height: 55px;
    border: 1px solid blue;
    margin-bottom: 20px;
    margin-left: 50px;
    margin-top: 20px;
    margin-right: 50px;
    background: #0C234B;
  /* background: #8F1124;*/
    color: white;
    text-align: center;
    border-radius: 25px;
}

.subMenuButton {
    width: 43%;
    line-height: 55px;
    border: 1px solid blue;
    margin-bottom: 20px;
    margin-left: 50px;
    margin-top: 30px;
    margin-right: 50px;
    background: #0C234B;
    color: white;
    text-align: center;
    border-radius: 25px;
}

.reportButton {
    width: 20%;
    height: 50px;
    border: 1px solid blue;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-top: 30px;
    margin-right: 20px;
    background: #0C234B;
    color: white;
    text-align: center;
    border-radius: 25px;
}
.mainReportButton {
    height: 75px;
    max-height: 75px !important;
    min-width: 250px !important;
    border: 1px solid blue;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-top: 30px;
    margin-right: 20px;
    background: #0C234B;
    color: white;
    text-align: center;
    border-radius: 25px;
}


/*UA color for button*/
.btn-primary {
    background-color: #0C234B !important;
}

.btn-default {
    background-color: #ddd !important;
    color: #0C234B;
}

.btn-success {
    background-color: #0C234B !important;
}

.colorRed {
    color: red;
}

.btn-danger {
    background-color: #AB0520 !important;
}

.btn-info {
    background-color: #378DBD !important;
}

.btn-warning {
    background-color: #a95c42 !important;
}

.btn-warning {
    background-color: #AB0520 !important;
}

.my {
    text-align: center;
}

/*Use for all modal*/
.modal.fade {
    z-index: 10001 !important;
}

.container {
    position: static;
    width: 95%;
}

.paginationRight {
    position: absolute;
    right: 10px;
    width: 280px;
}

.pagination {
    margin: 0px !important;
    text-align: center !important;
    right: 10px !important;
}

.input-group {
    position: relative;
}

.dropdown-menu {
    top: 40px !important;
}

.lefts {
    position: absolute;
    left: 15px;
    width: 300px;
    border: 3px solid #001C48;
    padding: 10px;
    background-color: #F4EDE5;
}

.center {
    position: absolute;
    left: 450px;
    width: 350px;
}

.centerColor {
    margin-top: 10px;
    width: 90%;
    height: 500px;
}

.centerColorDouble {
    position: absolute;
    margin-top: 280px;
    left: 100px;
    width: 60%;
    height: 300px;
}

.col-sm-1 {
    height: 40%;
    width: 29.29PX;
}

.text {
    width: 90px;
    margin: -2px 0 0 22px;
}

.form-control {
    border: none;
}

Inline style {
    z-index: 10000000 !important;
}

.weekendColor {
    background-color: red;
}

#totalColor {
    background-color: #9EABAE;
    border-color: #0C234B;
    color: white;
    /* border-top: 2px solid #0C234B;*/
}

#WeekTotalColor {
    background-color: #9EABAE;
    border-color: #0C234B;
    color: white;
    border-top: 2px solid #0C234B;
}

button[disabled],
html input[disabled] {
    background-color: #9EABAE;
}

/*This is used for Daily Timesheet*/
#totalSumColor {
    background-color: #9EABAE;
    color: white;
}

/*background color*/
.red-background {
    background-color: #AB0520;
}

.yellow-background {
    color: #f6f11a;
}

.col-lg-3 {
    width: auto;
}

.header5 {
    padding: 10px, 16px;
    background: white;
    color: #f1f1f1;
    z-index: 10000000 !important;
}

.content {
    padding: 16px;
}

.sticky {
    position: fixed;
    top: 30px;
    width: 100%;
}

.stickytt {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #4CAF50;
}

.sticky + .content {
    padding-top: 50px;
}
/*Creating CSS fro date in table*/
.widthDateField {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
}

.widthDateTimeField {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
}
.widthFullNameField {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
}

.widthCallButton {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
}

.buttonField {
    width: 150px !important;
    max-width: 150px !important;
}
/*Used for timesheet Scroll*/
.widthTimeButton {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
}

.widthTime {
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
}

.singleCharWidth {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
}

.widthJobNo {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
}

.widthDate {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.widthSr2Time {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
}

.widthSubHrs {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
}
.widthPayrollEntry {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
}
.widthDateType {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
}

.widthPayrollHrsType {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    /* Styles */
    .widthSr2Time {
        width: 99% !important;
        min-width: 250px !important;
        max-width: 99% !important;
    }
    .widthPayrollHrsType {
        width: 99% !important;
        min-width: 120px !important;
        max-width: 99% !important;
    }
   
}

.alphabet {
    display: inline-block;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid;
    height: 50;
    padding-right: 15px;
}

.widthHrs {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.widthForPTime {
    width: 39px !important;
    min-width: 39px !important;
    max-width: 39px !important;
}

/*Testing Css base on different screen resultion*/

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
    /* Styles */
}


/************************************************CSS used for Timeoff and All table and timepicker**************************************************************************************/
/*1. Timepicker*/
.timePicker table > thead > tr > th,
.timePicker table > tbody > tr > th,
.timePicker table > tfoot > tr > th,
.timePicker table > thead > tr > td,
.timePicker table > tbody > tr > td,
.timePicker table > tfoot > tr > td {
    padding: 2px;
    border: 0px;
}

.timePicker table {
    font-size: 16px;
    width: 100%;
    max-width: 90%;
    margin-bottom: 0px;
}

.uib-time input {
    width: 25px;
    padding: 0;
    height: 20px;
    font-size: 16px;
    font-weight: 600;
}

.uib-time > .btn-default {
    padding: 0;
    height: 20px;
    width: 25px;
    margin-left: 3px;
    font-size: 10px;
    font-weight: 600;
    position: relative;
    bottom: 1px;
    border-color: white !important;
}

.uib-separator {
    font-weight: 600;
}

.uib-increment > .btn-link,
.uib-decrement > .btn-link {
    padding: 0;
}

table > thead > tr > th, table > tbody > tr > th, table > tfoot > tr > th, table > thead > tr > td, table > tbody > tr > td, table > tfoot > tr > td {
    padding: 1px !important;
}

[disabled].form-control, [readonly].form-control, fieldset[disabled] .form-control {
    background-color: #eee;
}

/*2.Used for all table header and center*/
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 1px;
    line-height: 1.2;
    text-align: center;
}

.leftTable.table > tbody > tr > td, .leftTable.table > tbody > tr > th, .leftTable.table > tfoot > tr > td, .leftTable.table > tfoot > tr > th, .leftTabletable > thead > tr > td, .leftTable.table > thead > tr > th {
    padding: 1px;
    line-height: 1.2;
    text-align: left;
}

.leftTable.table > thead > tr > th, .leftTable table > thead > tr > th {
    vertical-align: bottom;
    background: #0C234B;
    color: #fff;
    text-align: center;
}

.table > thead > tr > th, table > thead > tr > th {
    vertical-align: bottom;
    background: #0C234B;
    color: #fff;
    text-align: center;
}
table > thead > tr > th {
    font-size: 16px !important;
}

.btn-group-sm > .btn, .btn-sm {
    padding: 4px 7px;
    line-height: 1.2;
    font-size: 12px;
}

/*3.Border for all accruals*/
/*use for future accuarls*/
.borderacc, .borderacc > thead > tr > td {
    border: 1.8px solid black;
}

/*4. Height adjust for timesheet**********************************/
.smallHeight {
    height: auto !important;
}

.largeHeight {
    height: 250px !important;
}
/*5.Used for navigation ******************************************/
.dropbtn {
    background-color: transparent;
    color: white;
    padding: 5px;
    font-size: 10px;
    border: none;
}

.dropdown, nav.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    border: dashed;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        .dropdown-content a:hover {
            background-color: #F4EDE5;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: grey;
}

ul, ol {
    overflow: inherit !important;
}
/*6. Color for erro message*/
.alert-danger {
    color: #a94442 !important;
}
/*7.Center navigation**********************************/
@media (min-width:768px) {
    .navbar-center .dropdown-menu {
        /* text-align:center;-*   
    }
.navbar-center .dropdown-menu-center {
        /*text-align:center; */
    }
}

/*@media all and (min-width:768px)*/
.navbar-right .dropdown-menu {
    right: 0px;
    left: 0px !important;
}

.navbar-inverse .navbar-nav > li > a:hover {
    background-color: #E2E9EB !important;
}

.nav-barr {
    text-align: center;
}

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    color: #262626 !important;
}
/*need for togglek*/
.navbar-toggle {
    width: auto;
}

#bs-example-navbar-collapse-1 {
    margin-top: 0px;

}

/*@media all and (max-width:767px)*/
.navbar-inverse .navbar-nav .open .dropdown > li > a {
    background-color: #0C234B;
}

@media (min-width: 820px) {
    .navbar-brand.abs {
        position: absolute;
        width: 100%;
        left: 0;
        text-align: center;
        color: white;
    }
}
/*Used for header hide or display*/
@media screen and (max-width: 767px) {
    .navbar-brand.abs.myHideClass {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .navbar-brand.myHideClass {
        display: none !important;
    }
}

.accrualsHeader {
    background-color: #0C234B !important;
    color: white !important;
}

/*CSS for Reports*/
.payrollEmp {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
}
.payrollName {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
}