html, body {
    width: 100%;
    height: 100%;
}

article {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
a,
a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
}
main {
    flex-grow: 1;
    margin: 40px 20px;
}

header, main, footer {
    flex-shrink: 0;
}
ul {
    list-style: square;
}
.bg-rose {
    background-color: #ffeef0;  /* Very light grayish rose */
}
.text-white a {
    color: white !important;
}
.btn-press-effect {
  transition: transform 0.1s ease;
}
.btn-press-effect:active {
  transform: translateY(2px);
}
.custom-employee-icon {
    display: inline-block;
    width: 20px; /* Adjust based on actual icon size */
    height: 20px; /* Adjust based on actual icon size */
    background-image: url("../images/employee-icon.6e9264bbb38c.png"); /* Replace with the actual URL to your icon */
    background-size: contain;
    background-repeat: no-repeat;
}
.ws-icon {
    height: 1em;
    width: 3em;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.osha-icon {
    background-image: url("../images/osha.ff90ca58f386.svg"); /* Replace with the actual URL to your icon */
}
.lift-icon {
    background-image: url("../images/lift.061c339131b7.png"); /* Replace with the actual URL to your icon */
}
.excavator-icon {
    background-image: url("../images/excavator.bf14930dd8bc.png"); /* Replace with the actual URL to your icon */
}
.hilti-icon {
    background-image: url("../images/hilti.03f5d0c40c94.png"); /* Replace with the actual URL to your icon */
}
.tin-matched-icon {
    display: inline-block;
    vertical-align: middle;
    height: 1.2em;
    width: 1.2em;
    background-image: url("../images/matched.d72e7256d3d6.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.tin-not-matched-icon {
    display: inline-block;
    vertical-align: middle;
    height: 1.2em;
    width: 1.2em;
    background-image: url("../images/not-matched.6a1b38c45de4.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.bank-approved-icon {
    display: inline-block;
    vertical-align: middle;
    height: 2em;
    width: 2em;
    background-image: url("../images/bank-approved.1afabdaed78f.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.bank-not-approved-icon {
    display: inline-block;
    vertical-align: middle;
    height: 2em;
    width: 2em;
    background-image: url("../images/bank-not-approved.0e0c93b116e0.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.fa.fa-exclamation-triangle {
    color: #ffcc00 !important;
}
.fa.fa-times-circle {
    color: #cc3300 !important;
}
.fa.fa-check-circle {
    color: #339900 !important;
}
.dropdown-menu {
    z-index: 1050; /* higher value than sticky headers */
}
.th-project {
  position: relative;
  z-index: 1049; /* this needs to be less than dropdown menu but more than sticky headers (1020) */
}
.header-nav {
    z-index: 1050;
}
.download:visited {
    color: rebeccapurple !important;
}
.pointer,
.clickable {
    cursor: pointer;
}
.errorlist {
    color: darkred;
}
.blacklisted {
    background: rgba(0, 0, 0, 0.5);
}
.invalid {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}
.bg-darkgray {
    background: rgb(190, 190, 190);
}
.highlight {
    background: #FFFF00 !important;
}
.highlight-blue {
  background-color: #41fdfe !important;
  padding: 6px 6px;
}
.bg-red {
    background: red !important;
}
/* Resume */
.dark-blue {
    color: #323b4c;
}
.bg-dark-blue {
    background: #323b4c !important;
    color: white !important;
}
.bg-dark-blue a:not(.dropdown-item),
.bg-dark-blue a:not(.dropdown-item):visited,
.bg-dark-blue i:not(.dropdown-item-icon) {
    color: white !important;
}
.bg-dark-blue .text-muted {
    color: rgba(255, 255, 255, 0.55) !important;
}
.bg-dark-blue .text-dark,
.bg-dark-blue .text-primary {
    color: white !important;
}
.check-inner-panel {
    background: #f8f9fa;
    border-radius: .375rem;
    padding: .5rem;
    height: 100%;
}
.bg-dark-blue .check-inner-panel {
    background: white !important;
    color: #212529 !important;
}
.bg-dark-blue .check-inner-panel .text-muted {
    color: #6c757d !important;
}
.bg-dark-blue .check-inner-panel .border-top {
    border-color: #dee2e6 !important;
}
.check-action-btn {
    background: white;
    color: #6c757d;
}
.bg-dark-blue .check-action-btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: white;
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover {
  background: rgba(0, 150, 255, 0.1);
}
.border-dashed {
  border-style: dashed !important;
}

.timesheet-table {
  background: rgba(243, 241, 224, 0.3);
}

.tableFixHead {
    overflow: auto;
    min-height: 700px;
}
.tableFixHead thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(230, 230, 230, 1);
}
.strikethrough {
    text-decoration: line-through;
}
.fa.terminated {
    color: red;
}
.fa.active {
    color: green;
}
.placement.active {
    color: darkgreen;
}
.placement.terminated {
    color: red;
}
.status.active {
    background: lightblue;
    border-radius: 50%;
    width: 25px;
    height: 25px;
}
#app input[type='number']{
    width: 70px;
}
input.orderId {
    width: 120px;
}
/* Borders (if you need them) */
/*.tableFixHead,*/
/*.tableFixHead td {*/
/*  box-shadow: inset 1px -1px #000;*/
/*}*/
/*.tableFixHead th {*/
/*  box-shadow: inset 1px 1px #000, 0 1px #000;*/
/*}*/

/* Application */
.form-name {
    font-size: 1.5rem;
}
#signature,
#preparer-signature {
  border: 1px dotted #CCCCCC;
  border-radius: 5px;
  cursor: crosshair;
}
.irs-form-name {
    font-size: 3rem;
    font-weight: bolder;
}
.w9 {
    position: relative;
}
.w9 .vertical {
    width: 350px;
    transform: rotate(270deg) translate(-100%, -250%);
    position: relative;
}
@media print {
    header {
        display: none;
    }
    .hide-print {
        display: none;
    }
    .hide-print > * {
        display: none;
    }
}

#nc4-warning {
    border: 3px solid black;
    padding: 20px;
}
#js-nc4-form input[type=text].boxy {
    background-image: url("/static/images/half-box-input.5a0867cb8819.png");
    height: 20px;
    background-size: 20px;
    font-family: monospace;
    font-size: 13px;
    padding-left: 7px;
    letter-spacing: 12px;
    border: 1px solid;
}
#js-nc4-form #id_middle_name {
    width: 27px;
}

#js-nc4-form #id_county {
    width: 120px;
}
#js-w4-form input[type=number] {
    width: 120px;
}

/* RESUME */
@media screen and (min-width: 1200px) {
    .timeline {
        position: relative;
    }

    .timeline::after {
        content: '';
        position: absolute;
        width: 1px;
        background-color: black;
        top: 0;
        bottom: 0;
        left: 15px;
    }

    .timeline-item {
        position: relative;
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        left: 15px;
        top: 0;
        background-color: white;
        border: 4px solid #FF9F55;
        border-radius: 50%;
        z-index: 1;
    }
}

/* WORK REQUESTS */
.candidates-table.table th, .candidates-table.table td {
    white-space: nowrap;  /* Ensures the content of each cell is on a single line */
}
.nowrap {
    white-space: nowrap;
}
#move-workers {
    position: absolute;
    left: -65px;
    top: 47px;
    width: 60px;
}
.bg-selected {
    background: #86b7fe;
}
.no-docs {
    background: #D32F2F !important; /* A rich, deep red */
    text-decoration: line-through !important;
    color: rgba(140, 140, 140, 5) !important;
}
.circle-background {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: relative;
}

.circle-fill {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    clip: rect(0, 50px, 100px, 0);
    background-color: #00ff00;
}
.vue3-circular-progressbar {
  position: relative;
}
.vue3-circular-progressbar .current-counter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* TIME SHEETS */
.purchase-order-field {
    width: 150px;
}
.td-border-right {
    border-right: 2px inset rgba(230, 230, 230, 0.8);
}
.disabled-row {
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* INVOICES */
.invoice-app #app input[type='number']{
    width: 150px;
}
/* Modal Overlay Styles */
.vue-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);  /* semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1050;
}

/* Modal Content Styles */
.vue-modal-content {
  width: 60%;  /* You can set to your desired width */
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  position: relative;  /* relative positioning for the close button or any other modal elements */
}

/* This will prevent the modal from closing when clicking inside of it */
.vue-modal-content {
  max-height: 90vh; /* 90% of the viewport height */
  overflow-y: auto; /* Make it scrollable */
  width: 60%;  /* You can set to your desired width */
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  position: relative;  /* relative positioning for the close button or any other modal elements */
  box-sizing: border-box;
}

.vue-modal-content .table-hover tbody tr:hover {
    cursor: pointer;
}

:root {
  --popper-theme-background-color: #ffffff;
  --popper-theme-background-color-hover: #ffffff;
  --popper-theme-text-color: #333333;
  --popper-theme-border-width: 0px;
  --popper-theme-border-style: solid;
  --popper-theme-border-radius: 6px;
  --popper-theme-padding: 32px;
  --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
}
.popper {
    max-width: 800px;
}

.popper * {
    white-space: normal;
}

.list-group-item-action {
  cursor: pointer;
}