.alert.alert-info {
    background: none;
    border: none;
    color: tomato;
    margin: 4px 0 0 0;
    padding: 0;
    text-align: left;
}

.hourBox input {
    width: 90px !important;
}

@media print {
    body {
        visibility: hidden;
    }

    #product-qr-code {
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
    }
}

#forgotPassword {
    text-align: right;
    color: #2967ab;
}

#forgotPasswordLink {
    text-decoration: none;
}

.verifyEmail {
    transition: .35s;
}

.sendOtpAgain {
    cursor: pointer;
    transition: .3s;
}

.resetPassword,
.newPassword,
.confirmPassword,
.enterOtp,
.verifyEmail,
#changePasswordValidation,
.sendOtp,
.otpNumber {
    transition: .3s;
}

.sendOtpAgain:hover {
    text-decoration: underline;
    transition: .3s;
}

#changePasswordValidation {
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.js-timeout {
    position: absolute;
    left: 50%;
    top: 33%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#turnoutNumber {
    margin-top: 10px;
    border: none;
    min-height: 55px;
    padding: 10px;
    border-radius: 5px;
    transition: .25s;
    background: #EBF2FC;
    width: 100%;
}

#cancleCreate {
    background: #E0E6EC;
    min-width: 220px;
    border: 1px solid #ADC2DB;
    padding: 15px 70px;
    border-radius: 5px;
    font-size: 18px;
    text-decoration: none;
    margin-left: 20px;
    color: #212529;
}

#userroles {
    margin-top: 10px;
    border: none;
    min-height: 55px;
    padding: 10px;
    border-radius: 5px;
    transition: .25s;
    background: #EBF2FC;
    width: 100%;
}

.edit_icon a {
    text-decoration: none;
}

#successMsg,
#errorMsg,
#infoMsg {
    background: no-repeat;
    border: none !important;
    font-weight: 500 !important;
    text-align: center !important;
    width: fit-content !important;
    box-shadow: 0 0 12px -1px #d9d9d9 !important;
    margin: 0 auto !important;
    animation: fadeOut 2s forwards !important;
    animation-delay: 3s !important;
    position: absolute !important;
    left: 50%;
    transform: translate(-50%, 0);
}

#successMsg {
    color: green !important;
    background: #deedde !important;
}

#errorMsg {
    color: red !important;
    background: #f5dfdd !important;
}

#infoMsg {
    color: #626262 !important;
    background: #cafaff !important;
}



@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.avatar-preview {
    overflow: hidden;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 200px;
    height: 200px;
    background-color: #999;
}

.avatar-preview * {
    vertical-align: middle;
}

#imagePreview {
    width: 100%;
}

#backLink {
    color: #212529;
    text-decoration: none;
    padding: 14px 76px;
}

#loadData {
    display: none;
}

#schedule {
    display: none;
}

.inputDisabled {
    opacity: .5;
    cursor: not-allowed;
}

/* div.label-box label span {
    color: red;
} */

div#customDateModal .modal-body {
    text-align: center;
}

div#customDateModal .modal-body input {
    padding: 10px;
}

div#customDateModal .modal-body .calendar-icon svg {
    position: absolute;
    right: 15px;
    top: 7px;
}

div#customDateModal .modal-header,
div#customDateModal .modal-footer {
    border: none;
}

div#customDateModal .modal-body .cancel-save.customDate {
    min-width: 120px;
    padding: 5px;
}

#formHeader li label {
    vertical-align: sub;
}

#formHeader .essentials {
    background: #ebf2fc;
    border: none;
    height: 35px;
    border-radius: 5px;
    width: 250px;
    padding: 0px 10px;
    font-size: 16px;
}

#formHeader {
    width: 102%;
}

.essentials.wonumber {
    background-color: beige;
    color: tomato;
    text-align: center;
    /* cursor: none; */
    font-weight: 900;
    height: 40px;
    border: 2px solid #e3e3bb;
    border-radius: 5px;
    font-size: 21px;
    width: 180px;
}

#custDateRenew {
    display: none;
}

.notification-popup {
    overflow-y: scroll;
    max-height: 620px;
}

#err-msg p {
    color: tomato;
    text-align: center;
}

h3#noNotification {
    text-align: center;
    color: #2967ab;
    margin: 2px;
}

table tr {
    vertical-align: middle;
}

/* .work-list.align-middle {
    text-align: center;
} */
#datalist {
    display: none;
    position: absolute;
    height: 100px;
    z-index: 99;
    overflow-y: auto;
    top: 100px;
    border: solid 1px;
    width: 100%;
    background: #ebf2fc;
    padding: 2px 12px;
}

#datalist p {
    margin: 0;
    padding-bottom: 2px;
    cursor: pointer;
}

#datalist p:hover {
    background-color: #ccc;
}

#workOrderNumber,
#hydropumpWorkOrderNumber,
#hydroElectricWorkOrderNumber,
#pvrInspectionWorkOrderNumber,
#assigntoWorkOrderNumber h4 span {
    color: #3674bb;
}

.content-noti.view-all {
    width: 100%;
    transition: .3s;
    text-align: center;
}

li#clickNotification-viewall:hover h2 {
    color: white;
}

li#clickNotification-viewall:hover {
    cursor: pointer;
    background: #3574ba;
    transition: .3s;
}

#custRenew {
    display: none;
}

#customSchedule {
    display: none;
}

li#dateField {
    width: 21%;
}

li#notificationDetails:hover {
    background: #eeeff5;
}

span#displayDate {
    color: #3674bb;
    font-weight: 600;
    font-size: 16px;
    vertical-align: middle;
}

#calendar {
    max-width: 900px;
    /* margin: 40px auto; */
}


.popper,
.tooltip {
    position: absolute;
    z-index: 9999;
    background: #FFC107;
    color: black;
    width: 150px;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    padding: 10px;
    text-align: center;
}

.style5 .tooltip {
    background: #1E252B;
    color: #FFFFFF;
    max-width: 200px;
    width: auto;
    font-size: .8rem;
    padding: .5em 1em;
}

.popper .popper__arrow,
.tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
}

.tooltip .tooltip-arrow,
.popper .popper__arrow {
    border-color: #FFC107;
}

.style5 .tooltip .tooltip-arrow {
    border-color: #1E252B;
}

.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
    margin-bottom: 5px;
}

.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
}

.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
    margin-top: 5px;
}

.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
}

.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
    margin-left: 5px;
}

.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
}

.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
    margin-right: 5px;
}

.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
}

table td a {
    text-decoration: none;
    color: #2967ab;
    transition: .3s;
}

table td a:hover {
    color: #6885a3;
}

.progress-t {
    background-color: rgb(242, 242, 141)
}

#changeStatusWorkorder,
#changeStatusHydroPump,
#changeStatusHydroElectric,
#changeStatusPumpStation,
#changeStatusPvrInspection {
    width: 40%;
    float: right;
}

#updateMessage {
    position: absolute;
    left: 0;
    right: 0;
    top: 28px;
    margin-left: auto;
    margin-right: auto;
    width: 399px;
}

#calendarWarning,
#calendarWarning1,
#calendarWarning2 {
    position: absolute;
    color: red;
}

.preview .fa,
.previewInvoice .fa,
.previewPhotos .fa,
.previewVendor .fa {
    color: #2967ab;
    position: absolute;
    cursor: pointer;
    font-size: 25px;
    padding: 2px;
    background: white;
    border-radius: 5px;
    transition: .3s;
}

.preview .fa:hover,
.previewInvoice .fa:hover,
.previewPhotos .fa:hover,
.previewVendor .fa:hover {
    color: tomato;
    transition: .3s;
    box-shadow: 2px 2px 5px #414141;
}

.preview img,
.previewInvoice img,
.previewPhotos img,
.previewVendor img {
    border-radius: 15px;
    box-shadow: 1px 1px 10px #c5c5c5;
}

.preview.row,
.previewInvoice,
.previewPhotos,
.previewVendor {
    padding: 20px 0 0 0;
}

#overlayWorkorderProductConfdelPro,
#overlayWorkorder,
#overlayWorkorderProductConf,
#overlayHydroPumpWorkOrder,
#overlayHydroElectricWorkOrder,
#overlayPumpStationWorkOrder,
#overlayPvrInspectionWorkOrder,
#overlayCalendar,
#overlayWorkordercat,
#overlayWorkorderprod,
#scanbg,
#overlayWorkorderTcList,
#overlayGraph,
#overlaygismap {
    background: #ffffff;
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    transition: .5s;
    left: 0;
    z-index: 9999;
}

.dwnldBtn {
    background: #a8c283;
    padding: 5px 10px;
    border-radius: 14px;
    margin-right: 8px;
    border: 2px solid white;
    box-shadow: 0px 0px 5px lightgrey;
}

.dwnldBtn a {
    color: white;
}

#detailsLoader,
#detailsLoaderhpwo,
#detailsLoaderhewo,
#detailsLoaderpswo,
#detailsLoaderpiwo,
#detailsLoaderCalendar,
#detailsLoadercat,
#detailsLoaderprod,
#scanloader,
#detailsLoaderTcList,
#detailsLoaderGraph,
#detailsLoaderProductConfdelPro,
#detailsLoaderProductConf,
#detailsgismap {
    position: absolute;
    top: 50%;
    width: 100px;
    left: 50%;
    transform: translate(-50%, -50%);
}


.restrictedWorkorder p {
    text-align: center;
}

#ajaxLoaderWaitingLoader {
    position: absolute;
    top: 50%;
    width: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.col-md-6.show-btn.show-btn {
    text-align: center;
    padding: 10px;
}

.col-md-6.show-btn.show-btn button {
    width: 100%;
}

.ajaxLoaderWaiting {
    background: linear-gradient(216deg, #dddddd, #ffffffa6, #ebebeb);
    width: 300px;
    border-radius: 10px;
    height: 207px;
    position: absolute;
    left: 50%;
    position: fixed;
    /* transform: translate(-50%, 273px); */
    transform: translate(-50%, 50%);
    z-index: 99999;
    border: 3px solid #81818121;
    box-shadow: 0px 0px 21px #b5b5b5;
}

.ajaxLoaderWaitingsection {
    position: relative;
    height: 100%;
}

.ajaxLoaderWaiting p {
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#formCount {
    /* position: absolute;
    left: 82%;
    top: 2%; */
    text-align: right;
    font-weight: 900;
    color: tomato;
    font-size: 20px;
}

select.regenTable {
    width: 180px;
}

.filter-items {
    display: inline-flex;
}


.genword {
    opacity: .5;
    pointer-events: none;
    transition: opacity 0.5s, visibility 0.5s;

}

input[name="nodenumberCheck[]"] {
    width: 35px;
    height: 17px;
    vertical-align: sub;
}

.quadrat {
    -webkit-animation: blinking 2s infinite;
    -moz-animation: blinking 2s infinite;
    -o-animation: blinking 2s infinite;
    animation: blinking 2s infinite;
}

@keyframes blinking {
    0% {
        background-color: #06c3d1;
    }

    100% {
        background-color: #2967ab;
    }
}

.crtTcBlock {
    position: absolute;
    left: 50%;
    top: 22%;
    transform: translate(-50%, 0);
}

.inputValue {
    display: none;
}

.add_button,
.remove_button,
.remove_product {
    color: white;
    background: #ff0e0e;
    position: absolute;
    top: 53px;
    padding: 3px 8px;
    border-radius: 7px;
    cursor: pointer;
    margin-left: 10px;
    box-shadow: 2px 2px 12px #1b426e57;
}

.user_wrapper .row span,
.tiuser_wrapper .row span {
    background: #ebf2fc;
    width: fit-content;
    margin: 10px;
    padding: 6px 6px 6px 12px;
    border-radius: 5px;
    /* /* padding-right: 0; */
}

.user_wrapper .row {
    padding: 20px;
}

i.fa.fa-times.remove-us {
    border-radius: 5px;
    cursor: pointer;
}

i.fa.fa-times.remove-us:hover {
    color: red;
}


span label {
    padding-right: 6px;
}

#setComplete {
    border: none;
    font-size: 19px;
    padding: 10px 35px;
    color: #fff;
    border-radius: 5px;
    background: #2967ab;
    text-decoration: none;
    cursor: pointer;
}

.search-staff.userInput label {
    margin-top: 20px;
    margin-bottom: 5px;
}

.search-staff.userInput input {
    width: 78%;
    text-align: center;
}

.search-staff.userInput {
    display: unset;
}

p#confirmWarning,
p#timeValidation {
    color: red;
    margin: 0 auto -25px auto;
    text-align: right;
    width: fit-content;
}

table tbody td:first-child {
    color: #2967ab;
    font-family: 'Poppins Medium';
}

.hidden-td {
    display: none;
}

/* table th:nth-child(6) {
    text-align: center;
} */

.fa .fa-qrcode {
    font-size: 30px;
}

#correctNode {
    float: right;
    font-size: 20px;
    color: #79cc79;
}

.product-count-live {
    width: fit-content;
    font-family: 'Poppins Medium';
    position: absolute;
    bottom: 16px;
    /* left: 160px; */
    right: 0px;
    color: #3978bc;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

#view-all-button {
    width: 100%;
    margin-top: 10px;
    border: none;
    padding: 10px;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Poppins Medium';
    color: #555;
}

#adminWorkOrderListingAjax tr td:nth-child(9),
#adminWorkOrderListingAjax tr td:nth-child(10),
#adminWorkOrderListingAjax tr td:nth-child(11),
#adminWorkOrderListingAjax tr td:nth-child(12) {
    display: none;
}

.selectionNotice {
    color: red;
    text-align: center;
}

.refresh.refreshTimeCard {
    background: var(--blue-color);
    border: none;
    font-size: 18px;
    padding: 10px 25px;
    color: #fff;
    border-radius: 5px;
}

button#view-all-button:hover {
    color: white;
    background: #0d598c;
}

select#updateStatus {
    width: 85%;
    margin: auto;
    height: 30px;
    border: none;
    outline: none;
    box-shadow: 0 0 10px #dadadad4;
    padding: 5px;
    border-radius: 4px;
}

#statusAdmin .pendingStatus,
.pending-t {
    background-color: rgb(255, 224, 178);
}

#statusAdmin .activeStatus,
.active-t {
    background-color: rgb(255, 194, 194);
}

#statusAdmin .completeStatus,
.completed-t {
    background-color: rgb(200, 233, 198);
}

#statusAdmin .inprogress,
.progress-t {
    background-color: rgb(242, 242, 141);
}

#greetingText {
    margin-right: 10px;
    color: #3472b9;
    font-weight: 600;
}

select.form-select.form-select-lg.wolist {
    height: 30px;
    padding: 0px 0px 0px 8px;
    font-size: 15px;
}

tbody td:nth-child(6) {
    text-align: center;
}

.col-md-3.col-6 #testedInstalledBy {
    overflow: hidden;
}

#previousLinkBtn,
#homeLinkButton {
    width: fit-content;
    background: var(--blue-color);
    border: none;
    font-size: 14px;
    padding: 5px 10px;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 #0f355e75;
    margin-right: 5px;
}

li#clickNotification-viewall:hover {
    background-color: #2967ab !important;
    border-radius: 5px !important;
}

td.ui-datepicker-unselectable.ui-state-disabled,
.ui-datepicker-unselectable.ui-state-disabled {
    background: lightgrey;
    cursor: no-drop;
}

li#clickNotification-viewall {
    border-radius: 5px !important;
}

table.table tbody tr td {
    text-align: start;
    white-space: wrap;
}

#ui-datepicker-div {
    z-index: 99999 !important;
}

a.woeditlinks {
    text-decoration: none;
    color: #36a2eb;
    font-weight: 700;
    transition: .5s;
}

aside.float-left {
    height: 88% !important;
    /* height: 100% !important; */
}

a.woeditlinks:hover {
    color: #0d598c;
    transition: .5s;
}

.image-file img {
    width: 150px;
}

.fa.fa-clock-o {
    font-size: 20px;
    vertical-align: bottom;
    color: #2967ab;
}

.delete_account {
    cursor: pointer;
}

.row.bg-shadow.mt-4.mx-0.user-detail label {
    color: #2967ab;
    font-family: 'Poppins Medium';
}

#timesheetname {
    color: #2967ab;
}

a.woeditlinks {
    border: 0.5px solid lightgrey;
    padding: 1px;
    border-radius: 3px;
    margin-bottom: 2px;
}

a.woeditlinks:hover {
    border: 0.5px solid #2967ab;
    color: #FFFFFF;
    background-color: #2967ab;
    border-radius: 3px;
}

.overtime {
    position: relative;
    bottom: -37%;
    padding: 10px;
}

.overtime input {
    width: 20px;
    height: 16px;
    vertical-align: middle;
}

.overtime label {
    background: lightgrey;
    padding: 10px 20px;
    width: 100%;
    text-align: center;
    border-radius: 22px;
    box-shadow: 0px 0px 10px #e7e7e7;
}

#totalHoursWorked,
.hoursWorked,
.newAddedTime {
    color: #2967ab;
    font-weight: 600;
    font-size: 16px;
    font-family: sans-serif;
}

i.fa fa-clock-o {
    color: #2967ab;
}

label.hoursWorked,
#totalHoursWorked {
    text-align: left;
    width: unset;
}

button.btn.empstatus {
    border: none;
    cursor: unset;
    box-shadow: 0px 0px 10px #e9e9e9;
    width: 100px;
}

select.empstatusDropdown,
select.empLeaveStatus {
    border: none;
    padding: 3px 4px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #f3f3f3;
}

#userOvertime {
    background: #36b136;
    ;
    padding: 0px 7px;
    font-size: 12px;
    color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #c3c3c3;
    vertical-align: text-bottom;
}

.filter-date input {
    margin-top: 0;
    height: 45px;
}

.filter-date svg {
    top: 10px;
}

/* .filterButton.refresh {
    padding: unset;
} */

.moveToArchive {
    width: 180px !important;
    color: white;
}

button.filterButton {
    width: 60%;
    /* height: 45px; */
}

.archivedLMS {
    background: var(--blue-color);
    border: none;
    font-size: 18px;
    padding: 10px 25px;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 12px 0 #0f355e75;
}

.moveToArchive {
    background: var(--blue-color);
    border: none;
    font-size: 18px;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 12px 0 #0f355e75;
}

.wodboxes,
.timesheetBoxes {
    width: 20px;
    height: 15px;
    vertical-align: middle;
}


#fromDate,
#toDate {
    margin-top: 0px;
}

#requiredField {
    color: red;
}

span.showOvertime label {
    vertical-align: top;
    margin-left: 3px;
}


.showOvertime {
    background: #e5e5e5;
    padding: 5px 10px 2px 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #efefef;
}

tr.currentEditData {
    background-image: linear-gradient(179deg, #c5c5c5, transparent);
    box-shadow: 0px 0px 10px #d1d1d1;
}

.counterLink {
    text-decoration: none;
}

.counterLink .cards {
    transition: .3s;
}

.counterLink .cards:hover {
    box-shadow: 0px 0px 15px grey;
    transition: .3s;
}

#getQRCode {
    font-size: 35px;
    cursor: pointer;
}

p.roleHeader {
    font-size: 10px;
    text-align: left;
}

.heading-page #updateStatus {
    width: 100%;
}

input.pcount,
input.pcountMultiForm {
    width: 70% !important;
}

span.productCountAvailable {
    vertical-align: sub;
    font-size: 12px;
}

span.woApproved {
    background: #52b952;
    color: white;
    padding: 2px 12px;
    border-radius: 3px;
    box-shadow: 0 0 10px 0 #0f355e75;
    height: 30px;
    font-size: 15px;
    align-items: center;
    justify-content: center;
    display: flex;
}

span.woUnapproved {
    background: #e76868;
    color: white;
    padding: 2px 12px;
    border-radius: 3px;
    box-shadow: 0 0 10px 0 #0f355e75;
    height: 30px;
    font-size: 15px;
    align-items: center;
    justify-content: center;
    display: flex;
}

span.initials {
    display: block;
    text-align: center;
}

.approvalSec {
    text-align: center;
}

#approve {
    margin-top: 0px;
    vertical-align: middle;
    border: none;
    height: 15px;
    padding: 10px;
    border-radius: 5px;
    transition: .25s;
    background: #EBF2FC;
    width: 15px;
}

#approveBox {
    float: left;
    background: #2967ab;
    color: white;
    font-size: 18px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 2px 2px 12px #1b426e57;
}

.user_wrapper.row {
    margin-top: 21px
}

.approve-green {
    background-color: #62b138;
}

.tltip {
    background: #787878b5;
    text-align: center;
    color: white;
    font-size: 12px;
    position: absolute;
    width: fit-content;
    padding: 0 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-left: 2%;
    margin-top: -5px;
    box-shadow: 1px 1px 3px #d3d3d3;
}

.input-group-addon {
    position: absolute;
    z-index: 9999;
    bottom: 0;
    height: 55px;
    right: 0;
    width: 20%;
}

#durationClock {
    position: absolute;
    right: 12px;
    top: 13px;
    color: #4e6d8e;
    font-size: 30px;
}

.form-label.calendar-icon svg {
    position: absolute;
    right: 15px;
    top: 45px;
}

.checkbox-option .radioBtn {
    width: 20px;
    height: 20px;
}

.checkbox-option label {
    margin: auto 0 3px 4px;
    vertical-align: text-bottom;
}

#timeRangeWarning {
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
    color: tomato;
}

/* #DataTables_Table_0_wrapper {
        margin-top: 20px;
    } */

#myTab button.nav-link.active {
    color: white;
    background: #2967ab;
}

#myTab button.nav-link {
    color: #2967ab;
    height: 50px;
}

button.nav-link.active {
    background: #3675bb !important;
    padding: 10px 25px;
    transition: .5s;
    max-width: 220px;
    min-width: 220px;
}

button.nav-link {
    padding: 10px 25px;
    transition: .5s;
    color: black;
    max-width: 220px;
    min-width: 220px;
}

#v-pills-tabContent {
    padding: 0px 50px;
    margin: auto;
}

#v-pills-tabContent button {
    background: #3675bb !important;
}

#v-pills-tabContent {
    border-radius: 8px;
    padding: 50px;
    width: 100%;
    box-shadow: 0px 0px 10px #e9e9e9;
}


#v-pills-tabContent button {
    width: 100px;
    display: block;
    margin: auto;
}

#prod-limit form {
    width: 50%;
    margin: auto;
}

#myTabContent {
    margin-top: 20px;
}

span.woUnapproved.leaveStatus {
    align-self: normal;
    border-radius: 5px;
    font-size: 14px;
    box-shadow: 0px 0px 10px #f3f3f3;
}

table.lms tr td:last-child,
table.lms tr th:last-child {
    text-align: center;
}

table.lms tr td:nth-child(7),
table.lms tr th:nth-child(7) {
    text-align: center;
}

.table>:not(:first-child) {
    border-top: none;
}

span#leaveBadgeOne,
span#leaveBadgetwo,
#leaveBadgeAll,
#timeCardBadge {
    padding: 1px 8px;
    color: white;
    background: rgb(238, 116, 116);
    border-radius: 6px;
    position: absolute;
    margin-top: -8px;
    right: 6px;
    z-index: 1;
    box-shadow: 0px 0px 10px grey;
}

#timeCardBadge {
    background: rgb(94, 180, 94);
    box-shadow: 0px 0px 3px #484848;
}

#leaveBadgeAll,
#timeCardBadge {
    position: relative;
    margin-left: 13px;
    margin-top: -2.5px;
}

#lvloder img#detailsLoader {
    width: 24px;
    position: relative;
    /* background: red; */
    /* margin: auto; */
    /* display: block; */
    margin-bottom: -17px;
}

#roleTable_filter {
    display: none;
}

p.editApprovalText {
    text-align: center;
    color: red;
    width: fit-content;
    padding: 8px;
}

#countOfUsersSelected {
    font-size: 15px;
    color: red;
}

#exportWorkOrder .col button {
    height: 53px;
    width: 100%;
}

#exportWorkOrder .columnBox {
    padding: 15px;
    border: 0.5px solid #ededed;
    border-radius: 7px;
    margin-top: 20px;

}

.selected-option span {
    background: #1872f7;
    color: white;
    padding: 3px 10px;
    margin: 2px 2px;
    display: inline-block;
    border-radius: 3px;
    white-space: nowrap;
    width: fit-content;
}

.selected-option i,
.fa-exclamation-triangle {
    margin-left: 0px;
    color: #ff6d6d;
    cursor: pointer;
}

.prodTip {
    margin-left: auto;
    margin-right: auto;
    left: 0px;
    right: 0px;
    position: absolute;
    text-align: left;
    display: none;
    background: lightgrey;
    width: 90%;
    border-radius: 5px;
    box-shadow: 0px 0px 17px #4a4a4a;
    color: black;
    font-size: 17px;
    z-index: 99;
}

.prodTip p {
    text-align: center;
    margin-top: 10px;
    text-decoration: underline;
}

.timecardEntryBlock {
    box-shadow: 0px 0px 25px #f3f3f3;
    margin: 10px 0px;
    padding: 24px;
    border-radius: 12px;
}

.timecardEntryBlock .fa-times {
    display: block;
    float: right;
    width: fit-content;
    font-size: 25px;
    color: tomato;
    cursor: pointer;
}

p.timeSheetValidation {
    color: red;
    text-align: center;
}


table i.fa.fa-times {
    position: relative;
    font-size: 20px;
    cursor: pointer;
    color: #ffa4a4;
    transform: .5s;
}

table i.fa.fa-times:hover {
    position: relative;
    font-size: 20px;
    cursor: pointer;
    color: #ffa4a4;
    transform: .5s;
}

.work_order_column_list input,
.userList input,
.columnList input {
    width: 16px;
    height: 16px;
}

.work_order_column_list label,
.userList label,
.columnList label {
    text-transform: capitalize;
}

h3.listData {
    text-align: center;
    color: #a1a1a1;
}

p.imageValid {
    color: #2c2c2c;
    text-align: center;
    margin-top: 10px;
}

p.imageValidOther {
    color: #2c2c2c;
    margin-top: 10px;
}

#workorderRedirect {
    margin-left: 10px;
    background: var(--blue-color);
    font-size: 14px;
    float: right;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    box-shadow: 0 0 5px 0 #0f355e75;
}

#workorderRedirect a {
    color: white;
    text-decoration: none;
}


.dropdown-btn.report {
    text-decoration: none;
    color: white;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
}

.dropdown-container.report {
    display: none;
    background-color: transparent;
    padding-left: 44px;
    margin-top: -24px;
}

.fa-caret-down.report {
    float: right;
    padding-right: 8px;
}

.addNewTimeSheet {
    background: #2967ab;
    color: white;
    padding: 5px 10px 3px 10px;
    transition: .3s;
}

.addNewTimeSheet:hover {
    color: white;
    box-shadow: 0px 0px 10px #969696;
    transition: .3s;
}

#productNameQR {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.addSetPressure,
.addSetPressureDetail,
.removeSetPressure,
.removeSetPressureDetail {
    transform: translate(0, 200%);
    transform: translate(0, 65%);
    background: #3675bb;
    color: white;
    border-radius: 5px;
    padding: 8px;
    cursor: pointer;
}

.dateRangeBlock svg {
    margin-top: 0px !important;
}

.removeSetPressure,
.removeSetPressureDetail {
    background-color: red !important;
}

.addSetPressure,
.addSetPressureDetail {
    margin-left: 5px;
}

label i.addSetPressure,
.addSetPressureDetail {
    transform: translate(0, 0) !important;
}

select.woStatus {
    height: unset;
    margin-top: unset;
}

.delNot,
.confirm-delete {
    z-index: 999999;
    cursor: pointer;
    border-top-left-radius: 80px 80px;
    border-bottom-left-radius: 80px 80px;
    text-align: center;
    position: absolute;
    top: 50%;
    width: 50px;
    left: 75%;
    transform: translate(55%, -50%);
    height: 60px;
    overflow: hidden;
    box-shadow: -1px 2px 13px #999999;
}

.delNot {
    background: linear-gradient(45deg, #ff2700, #ffae9f);
}

.confirm-delete {
    transition: .3s;
    background: linear-gradient(45deg, #22cc3f, #ffae9f);

}

.yes-delete,
.deny-delete {
    height: 50%;
    color: white;
    overflow: hidden;
    position: relative;
}

.yes-delete {
    background: linear-gradient(45deg, #15d100, #e3e3e3);
    transition: .3s;
}

.yes-delete i {
    position: absolute;
    top: 10px;
    left: 20px;
}

.yes-delete:hover {
    background: linear-gradient(45deg, #4fd740, #e3e3e3);
    transition: .3s;
}

.deny-delete {
    background: linear-gradient(337deg, #f50000, #e7e7e7);
}

.deny-delete:hover {
    background: linear-gradient(337deg, #f53232, #e7e7e7);
}

.deny-delete i {
    position: absolute;
    top: 7px;
    left: 21px;
}

.delNot .fa {
    position: absolute;
    top: 17px;
    right: 15px;
    color: white;
    font-size: 25px;
}

.success-upload.list li {
    list-style: none;
    color: green;
}

.failed-upload.list li {
    list-style: none;
    color: tomato;
}


/*22-08-2023 Css Here*/
.customSelect_Drop {
    width: 135px;
}



/* 19 Jan 2024 */
button.moveToArchive.filterButton.refresh.w-100 {
    width: 100% !important;
}

@media (max-width: 1600px) {
    button.moveToArchive.filterButton.refresh.w-100 {
        font-size: 16px;
    }
}


.cstm-class-for-changes.work-list-table .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.cstm-class-for-changes.work-list-table div[class^="col-"] {
    padding: 0;
}

button.archivedLMS.cstm-btn-lms-width {
    width: fit-content;
}

.space-btn-edit-workorder-page {
    justify-content: flex-end;
}

.cstm-flex-btn-action-work-list {
    display: flex;
    gap: 6px;
}

.cstm-flex-btn-action-work-list span {
    margin: 0;
}

.cstm-view-number-order-wor-list {
    display: flex;
    gap: 4px;
    align-items: center;
}

table.cstmScrollTable tbody tr td {
    white-space: nowrap;
}

ul.notDeletedProduct {
    width: fit-content;
}

button#catProBut {
    border: none;
    background: none;
    color: cornflowerblue;
}

#leaveCheck {
    padding: 30px 0px 0px 15px;
}

#leaveCheck input {
    width: 20px;
    height: 20px;
}

#leaveCheck p {
    margin: -25px 0px 0px 30px;
}

#leaveIcon {
    width: 30px;
    height: auto;
}

.fa.fa-ticket {
    color: tomato;
    font-size: 18px;
}

#leaveListBadge {
    vertical-align: bottom;
    mix-blend-mode: multiply;
}

p.custHrs {
    color: black;
    font-weight: 100;
    display: contents;
    font-size: 14px;
}

#gisUrlUpdate textarea {
    font-family: revert;
    font-weight: 900;
    color: #2967AB;
    border: 2px solid lightgrey;
    text-decoration-line: underline;
}

.infoBanner {
    padding: 10px 40px;
}

.selectionAndDate {
    display: -webkit-inline-box;
    display: flex;
    justify-content: center;
}

.applyNextMailDate {
    background: lightgrey;
    border: none;
    color: white !important;
}

.dateSetSection {
    display: inline-flex;
}

.applyNextMailDate:focus {
    outline: none;
}

input.allRolesForRecipents {
    margin-bottom: 10px;
    margin-top: 10px;
}

.dateSetSection i.fa.fa-check {
    font-size: 20px;
    margin-left: 5px;
    color: #22cc3f;
    display: none;
    width: 25px;
}

.lds-ellipsis {
    /* change color here */
    color: #2967ab
}

.lds-ellipsis,
.lds-ellipsis div {
    box-sizing: border-box;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 10px;
}

.lds-ellipsis div {
    position: absolute;
    /* top: 33.33333px; */
    width: 13.33333px;
    height: 13.33333px;
    border-radius: 50%;
    background: currentColor;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

.selectRolesForReport input {
    margin-left: 20px;
}

button.addRecipents {
    border: none;
    background: #2967ab;
    color: white;
    padding: 5px 15px;
    border-radius: 15px;
}

.dateSetSection i.fa.fa-exclamation {
    font-size: 20px;
    margin-left: 5px;
    color: orangered;
    display: none;
    width: 25px;
}

.durationRadio {
    width: unset;
    background: transparent;
    border: none;
    display: inline-flex;
    padding: 10px 30px;
    background: #f1f1f1;
    border-radius: 25px;
}

.firstsChkBox {
    margin-right: 10px;
}

.radioSelection {
    margin-right: 3px;
}

.table-customHundred th {
    padding: 5px;
}

.table-customHundred td {
    border-bottom: .1px solid #dddddd !important;
}

.table-customHundred tbody tr:hover {
    background: #ececec;
}

.gisLinkUpdate {
    position: absolute;
    left: 56%;
    top: 27%;
    border: none;
    padding: 0px 6px;
    font-size: 18px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #565656;
    transition: .3s;

}

.gisLinkUpdate:hover {
    background-color: #494949;
    color: white;
    transition: .3s;
}

button#saveGisLink {
    height: 40px;
    width: 100%;
    background: rgb(94, 180, 94);
    border: none;
    transition: .3s;
}

button#saveGisLink:hover {
    transition: .3s;
    background-color: rgb(83, 160, 83);
}

.gisMapSaveLinkLoader {
    width: 100%;
    height: 40px;
    background: #5ccfe3;
}

.saveGisLink img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 7%;
    margin-top: 2.5px;
}

.saveGisLink i {
    font-size: 20px;
}

.col-2.col-md-3.mb-3.label-box.boxOfHour {
    display: inline-block;
}

p.timeDescription {
    text-align: center;
}

p.timeDescription span {
    margin-left: 10px;
}

.form-control.aaa {
    width: fit-content;
    display: inline-block;
    border: 2px solid rgb(237 237 237);
    margin-right: 5px;
    margin-bottom: 5px;
}

p.currDate,
p.currTime {
    text-align: center;
    color: dimgrey;
}

label #fillAllP,
label #multipleUserBlockP {
    margin: -44px 0px 0px 30px;
}

label .fillAll,
label .multipleUserBlock {
    width: 20px;
    height: 55px;
    margin-top: 30px;
    box-shadow: none;
}

div#multipleUserLeaveSelectBox {
    z-index: 9;
}

label .fillAll:checked,
label .multipleUserBlock:checked {
    box-shadow: none;
}

input.selectAllUsersLeave.multipleUserSelectLeave {
    width: 20px;
    height: 20px;
    margin-top: 0px;
}

.multipleUserLeaveSelectBox {
    background: #ebf2fc;
    padding: 10px;
    position: absolute;
    box-shadow: 3px 3px 2px #f9f9f9;
}

.col-12.userLeaveSelection {
    display: flex;
}

.selectMultipleUserForLeave {
    cursor: pointer;
}

a#previousLinkBtnNew {
    background: #2967ab;
    color: white;
    padding: 6px 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 #0f355e75;
    text-decoration: none;
}

.setting-page {
    margin-top: 20px;
}

.empstatusDropdown.individual {
    width: 150px;
    height: 35px;
}

.superStatusChanged {
    pointer-events: none;
    opacity: .5;
    background-color: lightgrey !important;
}

a.woeditlinks.currUserLeave {
    background: #dc8550;
    color: purple;
    pointer-events: none;
}

a.leaveOnFullCalendar.woeditlinks {
    margin: 0px 3px 0px 3px;
}

a.leaveOnFullCalendar.woeditlinks.statusApproved {
    background-color: #81f381;
}

a.leaveOnFullCalendar.woeditlinks.statusRejected {
    background-color: rgb(255, 148, 129);
}

a.leaveOnFullCalendar.woeditlinks.statusPending {
    background-color: rgb(255, 255, 0);
}

a.leaveOnFullCalendar.woeditlinks:hover{
    background-color: lightgrey;
    border: 1px solid lightgrey;
    color: #1e70bf;
}