@media print {
  body {
    width: 100%;
  }
}

html {
  width: 100%;
}

body {
  overflow-x: hidden !important;
}

body.show-spinner > main {
  overflow: hidden !important;
}

/* Hide everything under body tag */
body.show-spinner > * {
  opacity: 0;
}

/* Spinner */
body.show-spinner::after {
  content: ' ';
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  border-top-color: rgba(0, 0, 0, 0.3);
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  left: calc(50% - 15px);
  top: calc(50% - 15px);
  position: fixed;
  z-index: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

/********************************************************/
/********************************************************/
/*********************Custom CSS*************************/
/********************************************************/
/********************************************************/
.errorField {
  border-color: red;
}
.errorRBL {
  background-color: rgba(254, 0, 0, 0.7) !important;
}
.warningField {
  border-color: orange;
}
.form-control {
  border-radius: 5px;
}
.select2-selection__rendered {
  line-height: calc(1em + 1.2rem) !important;
}
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  /*height: calc(1em + 1.2rem) !important;*/
  height: calc(2em + 0.8rem);
  padding-left: 10px;
}
.select2-selection__arrow {
  height: calc(1em + 1.2rem) !important;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid #d7d7d7;
}
.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--multiple .select2-selection__rendered {
  height: calc(1em + 1.2rem);
}

.select2-selection__choice {
  height: calc(1em + 0.9em);
}
.btn-group-lg > .btn,
.btn-group-sm > .btn,
.btn-lg {
  border-radius: 5px;
}
.menu .main-menu ul li.headerActive:after {
  /*created this alternative class, because the "active" class that is normally applied fires the sub menu to open.*/
  content: ' ';
  background: #86367e;
  color: #232223;
  border-radius: 10px;
  position: absolute;
  width: 6px;
  height: 90px;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.simple-icon-trash:hover {
  color: #D70040;
  transition: 0.2s ease-in;
}

.disabled-icon{
  color: #b6b6b6;
}

.disabled-icon:hover{
  color: #b6b6b6;
  transition: none;
}

/********************************************************/
/*********************Master*****************************/
/********************************************************/
.datepicker table tr td.today {
  background-color: rgb(99, 30, 92, 0.3);
}
.data-table td {
  padding: 1%;
}
.data-table i:hover {
  cursor: pointer;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background-color: rgba(100, 100, 100, 0.1) !important;
}
.ddl-float-label label {
  font-size: 90%;
  opacity: 1;
  top: -0.4em;
  left: 0.75rem;
}
.modal-body .btn-sm,
.modal-content .btn,
.card-title .btn-md {
  border-radius: 5px;
}
.modal-content {
  border-radius: 0.75rem !important;
}
.dropzone,
.dz-preview.dz-file-preview {
  border-radius: 5px !important;
}
.input-daterange input:last-child {
  border-radius: 5px;
}
.price-sheet-products-datatable-pdf-btn {
  background-color: #922c88;
  border-color: #922c88;
  color: #fff;
}
.price-sheet-products-datatable-pdf-btn:hover {
  color: #fff;
  background-color: #73236b;
  border-color: #73236b;
}

/********************************************************/
/*********************NewJob Page************************/
/********************************************************/
.newJobRadioList {
    background: rgba(100, 100, 100, 0.1);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    font-weight: bold;
}
.newJobRadioList2 {
  background: rgba(100, 100, 100, 0.1);
  border-radius: 10px;
  padding: 8px;
  text-align: start;
}
.newJobRadioList2 label {
  font-size: 12px;
}
.newJobRadioList2 input[type="radio"] {
  transform: scale(0.8); 
  margin-right: 1px; 
  vertical-align: middle;
}
.newJobRadioList table {
  margin: auto;
}
.newJobRadioList td {
  padding: 0.75rem;
}
.errorFieldRadioList {
  border: solid 1px red;
}

.new-job-draft-list .list-group-item:hover {
  background-color: #f2e9f1 !important;
  transition: background-color 0.2s ease-in !important;
  cursor: pointer !important;
}

.draft-delete-icon:hover {
  color: #D70040;
  transition: 0.2s ease-in;
}

.draft-li-main-span {
  font-size: 14px;
}

.draft-buttons .btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #e1e1e1;
  border-color: #e1e1e1;
}


/********************************************************/
/*********************Search*****************************/
/********************************************************/
.completedJob {
  background-color: #28a745;
  color: #363537;
}

.completedJob:hover {
  background-color: #3ab656;
  transition: 0.1s ease-in;
  cursor: pointer;
}

.midJob {
  background-color: #ffc107;
  color: #363537;
}

.midJob:hover {
  background-color: #fece3e;
  transition: 0.1s ease-in;
  cursor: pointer;
}

.notCompletedJob {
  background-color: #dc3545;
  color: #363537;
}

.notCompletedJob:hover {
  background-color: #dd4d5b;
  transition: 0.1s ease-in;
  cursor: pointer;
}

#tbl_jobSearch,
#tbl_ticketSearch,
#tbl_ticketSummary,
#tbl_jobSummary,
#tbl_driverTickets {
    border-collapse: collapse !important;
}
#tbl_jobSearch i,
#tbl_ticketSearch i,
#tbl_ticketSummary i,
#tbl_jobSummary i,
#tbl_editedJobs i,
#tbl_newJobs i{
    font-size: 150%;
    padding: 0.5em;
}
#tbl_driverTickets i {
    font-size: 150%;
    margin: 0.5em;
}
#tbl_jobSearch tbody {
  font-size: 115%;
  font-weight: bold;
}
#tbl_ticketSearch tbody,
#tbl_driverTickets tbody{
    font-weight: bold;
}
#tbl_jobSearch i:hover,
#tbl_ticketSearch i:hover,
#tbl_ticketSummary i:hover,
#tbl_jobSummary i:hover{
    cursor: pointer;
}
#tbl_driverTickets i:hover {
    cursor: pointer;
    color: #922c88;
}
.ddlRow {
  margin-bottom: 3rem !important;
}
#tbl_ticketSearch td:nth-child(15),
#tbl_ticketSearch td:nth-child(16),
#tbl_driverTickets td:nth-child(15),
#tbl_driverTickets td:nth-child(16), {
    text-wrap: normal;
}
#tbl_driverTickets.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child {
    cursor: default !important;
}
.approvedSwitches {
  margin-right: 2%;
}
.nowrap {
  white-space: nowrap;
}
.wrapAndWidth {
  white-space: normal !important;
  /*width: 30%;*/
}
.ticketSearchAverageBadge {
  font-size: 0.8rem;
}
.columnPaddingSmall {
  padding-left: 10px;
  padding-right: 10px;
}
#tbl_jobSearch td {
  padding: 0%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
}
#tbl_jobSearch td:nth-child(0) {
  width: 8%;
}
#tbl_jobSearch th.wrapAndWidth:first-of-type::before,
#tbl_jobSearch th.wrapAndWidth:first-of-type::after {
  display: none;
}
#tbl_jobSearch td:nth-child(3), #tbl_jobSearch td:nth-child(6) {
    width: 8%;
}
#tbl_jobSearch td:nth-child(7) {
    width: 6%;
}
#tbl_jobSearch td:nth-child(11), #tbl_jobSearch td:nth-child(12) {
    font-size: 80%;
}
#tbl_jobSearch td:last-child {
    padding-right: 1%;
}
#tbl_jobSearch td:first-child {
  padding-left: 1%;
}
#tbl_jobSearch {
  border-collapse: separate !important;
}
#tbl_jobSearch tr:first-child,
#tbl_jobSearch td:first-child {
  border-top-left-radius: 10px;
}
#tbl_jobSearch tr:first-child,
#tbl_jobSearch td:last-child {
  border-top-right-radius: 10px;
}
#tbl_jobSearch tr:last-child,
#tbl_jobSearch td:first-child {
  border-bottom-left-radius: 10px;
}
#tbl_jobSearch tr:last-child,
#tbl_jobSearch td:last-child {
  border-bottom-right-radius: 10px;
}

/********************************************************/
/*********************Loader*****************************/
/********************************************************/
.loader {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #922c88; /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
  margin: auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.hidden {
  display: none;
}

.tableLoader {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid #922c88; /* Blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
}

/********************************************************/
/*********************Job Details************************/
/********************************************************/
#table_jobSummary {
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
}
#table_jobSummary tr:nth-child(3) td {
  border-top: none;
}
#table_jobSummary i {
  margin-left: 10px;
}
#table_jobSummary #jobDetailsAccord {
  font-size: 0.8rem;
}
#ContentPlaceHolder1_RBL_Production label {
  display: block;
}
.editDetails {
  display: none;
}
.displayDetails {
  text-align: left;
}
.jobDetailsHeader {
  font-weight: bold;
}
.ticketCard {
  max-width: 100%;
}
.ticketContainer {
  border-top: solid #f3f3f3;
  padding-top: 10px;
}
/* .ticketContainerColumn{
    padding-left: 0px;
    padding-right: 0px;
} */
.ticketContainerColumn i {
  font-size: 150%;
}
.ticketContainer span strong {
  font-size: 1rem;
}
.ticketContainer i:hover,
#tbl_jobUnits i:hover,
#tbl_jobProducts i:hover {
  cursor: pointer;
}
.ticketHeader i:hover {
  cursor: pointer;
}
.ticketHeader h5 {
  float: left;
}
.ticketHeader i,
.ticketHeader .employeeName {
  float: right;
}
.timeCardHeader {
  font-size: 1.1rem;
}
.ticketHeader div {
  font-size: 150%;
}
.paddedIcon {
  margin-left: 10px;
}
.ticketCharges {
  margin: auto;
  width: 100%;
  margin-top: 5%;
  margin-bottom: 1%;
}
.ticketCharges td:first-child {
  padding-right: 0px;
}
.showCharges {
  cursor: pointer;
}
.dropdown-menu {
  font-family: 'Nunito', sans-serif;
}
.dropdown-menu i {
  margin-right: 15%;
}
.productsArrow {
  margin-left: 3%;
  font-weight: bold;
}
.editItem {
  display: none;
}
.ticketEditItem {
  display: none;
}
.editItem i {
  font-size: 130%;
}
.ticketContainer input[type='button'],
.ticketContainer button {
  border-radius: 5px !important;
}
.ticketLogo {
  /*Leave this commented out for now. Need to apply it by jquery, so we can dynamically apply it based on the card's height*/
  /*background-image: url(../img/jdcgrey.PNG);
    background-position: -360% 154%;
    background-size: 116%;
    background-repeat: no-repeat;*/
}
.jobTotals {
  text-align: center;
  font-size: 150%;
}
.expandJobDetailsButton {
  color: #3a3a3a;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: bold;
}
.expandJobDetailsButton i {
  color: #3a3a3a;
  font-weight: bold;
}
#tbl_addEquipment td {
  padding-top: 0px;
  padding-bottom: 0px;
}
.search-sm input {
  border-radius: 5px;
}
.ticketSectionHeader .btn {
  border-radius: 5px;
}
#tblList_tickets i {
  font-size: 150%;
  padding: 0.5em;
}
.form-group.ddl-float-label {
  margin-bottom: 0.75rem;
}
.legendPurple,
.legendBlue {
  height: 19px;
  width: 19px;
  border-radius: 5px;
}
.addButtonIcon {
  margin-left: 0px;
  margin-right: 10px;
  font-size: 110%;
  vertical-align: middle;
  font-weight: bold;
}
/* .alert_sendTicket_attachedTicket{
    line-height: 1;
    border-radius: 5px;
} */
.alert_sendTicket_attachedTicket i {
  font-size: 115%;
}
.sendTicketAlert {
  line-height: 1;
  border-radius: 5px;
}
.pdfConfirmation {
  line-height: 1.5;
}
#btn_insertProduct {
  display: flex;
}
#job_approved_badge {
  cursor: pointer;
}

.message-icon{
  cursor: pointer;
}

.jobedit-timeline-icon{
  font-size: 1.7rem;
  color: #17a2b8;
}

.jobedit-timeline-icon:hover {
  color: #138496;
  transition: 0.2s ease-in;
  cursor: pointer;
}

.ticketedit-timeline-icon:hover {
  color: #73236b;
  transition: 0.2s ease-in;
  cursor: pointer;
}

.jobDetails-jobEditTimeline {
  padding: 0.5rem 0.5rem 0.5rem 0.2rem;
  background-color: #F4E9F3;
  border: 1px solid #ebebeb;
  border-radius: 4px;
}

.jobDetails-ticketEditTimeline {
  padding: 0.5rem 0.5rem 0.5rem 0.2rem;
  background-color: #F4E9F3;
  border: 1px solid #ebebeb;
  border-radius: 4px;
}

.ticketEditsTimeline-modal-table-div tr:first-of-type {
  font-weight: bold;
  color: #922c88;
}

.ticketEditsTimeline-modal-table-div tr:not(:first-of-type) td {
  padding-left: 1rem;
}

.ticketEditsTimeline-modal-table-div {
  margin-bottom: 1rem;
  font-size: 0.9rem;
}


ul.ulJobEditsTimeline, ul.ulTicketEditsTimeline {
  list-style-type: none;
  position: relative;
  display: list-item;
}

ul.ulJobEditsTimeline:before, ul.ulTicketEditsTimeline:before {
  content: ' ';
  background: #d7d7d7;
  display: inline-block;
  position: absolute;
  left: 29px;
  width: 2px;
  height: 100%;
  z-index: 400;
}

ul.ulJobEditsTimeline > li, ul.ulTicketEditsTimeline > li {
  margin: 1rem 0 3rem 0.5rem;
  padding-left: 20px;
}

ul.ulJobEditsTimeline > li:before, ul.ulTicketEditsTimeline > li:before {
  content: ' ';
  background: white;
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border: 3px solid #922c88;
  left: 20px;
  width: 20px;
  height: 20px;
  z-index: 400;
}

.unit-row-no-unused-tickets, 
.unit-row-no-unused-tickets .select2-container--default.select2-container--disabled .select2-selection--single, 
.unit-row-no-unused-tickets .form-control:disabled, 
.unit-row-no-unused-tickets .custom-control-label::before {
  background-color: #ededed !important;
}

/********************************************************/
/*************************TBS****************************/
/********************************************************/
.tbsSums {
  display: inline-grid;
}
.tbsSums label,
.tbsSums h3 {
  font-weight: bold;
}
.printButton {
  background-color: #631e5c !important;
  border: none;
}
#tbl_tbs i {
  font-size: 150%;
}
.tbsTableFontSize {
  font-size: 90%;
}
th.tbsTableFontSize {
  font-size: 80%;
}
.tbsTableIconSize {
  font-size: 135%;
}

/********************************************************/
/****************Receive Tickets Modal*******************/
/********************************************************/
.centerAlignTable {
  text-align: center;
}
#table_receiveTickets i:hover {
  cursor: pointer;
}

/********************************************************/
/****************Search Ticket Books*********************/
/********************************************************/
.disabled {
  color: rgba(58, 58, 58, 0.2);
  cursor: unset;
}

/********************************************************/
/****************Database Reports Modal******************/
/********************************************************/
.databaseReportsCustomers tr:nth-child(10) td,
.databaseReportsProducts tr:nth-child(10) td {
  border-bottom: solid 4px var(--theme-color-1);
}

/********************************************************/
/*************************Chat***************************/
/********************************************************/
.chatCard {
  min-width: 10%;
}

/********************************************************/
/********************Flush Tickets Report*****************/
/********************************************************/
.hideApprovedFlush {
  padding-top: unset;
}
#tbl_flushTickets i {
  font-size: 150%;
}
#tbl_flushTickets .ticketSearchAverageBadge {
  margin-left: 5%;
}
.flushTotals {
  font-size: 125%;
}
/* .testery{
    max-width: 10px !important;
} */

/********************************************************/
/********************Manage Time Cards*******************/
/********************************************************/
#timeCardTotals {
  text-align: center;
}

/********************************************************/
/********************Home********************************/
/********************************************************/
#spinner_sendMessage {
  font-size: 110%;
  vertical-align: middle;
  margin: 0;
}
#mapid {
  height: 100%;
}
#modifyNoteDropdown::after {
  content: none;
}
#modifyNoteDropdown {
  font-size: 110%;
}
#reviewNoteIcon {
  font-size: 150%;
}

/*Custom Scrollbar for Non-Dispatched Units Card*/
.non-dispatched-units-card::-webkit-scrollbar {
  width: 20px;
}

.non-dispatched-units-card::-webkit-scrollbar-track {
  background-color: transparent;
}

.non-dispatched-units-card::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

.non-dispatched-units-card::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

/********************************************************/
/********************Job Details*************************/
/********************************************************/
.daysOffRow {
  background-color: #f7fe2e !important;
  border: solid 1px #f3f3f3 !important;
}
.equipmentServiceRow {
  background-color: #de2a45 !important;
  border: solid 1px #f3f3f3 !important;
}
.dbErrorRow {
  background-color: #58faf4;
  border: solid 1px #f3f3f3 !important;
}
#ContentPlaceHolder1_LV_DaySheets_itemPlaceholderContainer tr {
  border: solid 1px #f3f3f3 !important;
}
.insertProdControl,
.chargesRow td {
  padding-left: 5px;
  padding-right: 5px;
}

#addTicketModal {
  overflow-y: hidden;
}
#addTicketModal .modal-dialog {
  overflow-y: auto;
}

/********************************************************/
/********************New Jobs Report*********************/
/********************************************************/
.jobEditsTimeline-modal-table-div{
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.jobEditsTimeline-modal-table-div tr:first-of-type {
  font-weight: bold;
  color: #922c88;
}

.jobEditsTimeline-modal-table-div tr:not(:first-of-type) td {
  padding-left: 1rem;
}

.edit-job-view-edits-icon:hover {
  transition: 0.2s ease-in;
  color: #922c88;
}

.edit-job-view-edits-icon-div{
  display: flex;
  justify-content: center;
}

/********************************************************/
/********************Add Ticket Modal********************/
/********************************************************/

.edit-skipped-book-icon{
    font-size: 0.85rem;
}

.edit-skipped-book-icon:hover {
    color: #73236b;
    cursor: pointer;
    transition: 0.2s ease-in;
}

/********************************************************/
/***********Send Ticket Validation Report Modal**********/
/********************************************************/

#rbl_validationReportEmail_0  {
  margin-right: 0.6rem !important;
}

#rbl_validationReportEmail_1 {
  margin-right: 0.6rem !important;
}

/********************************************************/
/***********Fluid Summary Calculator*********************/
/********************************************************/

.input-column {
    min-width: 160px;
    flex-shrink: 0;
}

.input-column h5 {
    position: sticky;
    top: 0;
    background: white;
    text-align: center;
    z-index: 2;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 0.5rem;
}

.input-column.narrow {
    min-width: 9rem;
    max-width: 9rem;
    display: inline-block;
    vertical-align: top;
}

.input-column.extra-narrow {
    min-width: 7rem;
    max-width: 7rem;
    display: inline-block;
    vertical-align: top;
}

.input-column.narrow .form-group, .input-column.extra-narrow .form-group {
    margin-bottom: 0.25rem;
}

.input-column.narrow input, .input-column.extra-narrow input {
    width: 100% !important;
    padding: 0.25rem 0.3rem;
    font-size: 0.75rem;
}

/***********Production Wells Report**********************/
/********************************************************/

.preview-container {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.preview-item {
    border: 1px solid #ddd;
    padding: 0.5rem;
    border-radius: 4px;
    width: 150px;
    text-align: center;
}

.preview-item iframe {
    width: 100%;
    height: 200px;
    border: none;
}

.preview-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 0.3rem;
    border-radius: 3px;
}

/***********Day Sheets Report**********************/
/********************************************************/

.prod-serv-row {
    display: flex;
    align-items: center;
}

.prod-serv-row .arrow {
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.3s ease;
}

/* Rotate arrow when expanded */
.prod-serv-row.expanded .arrow {
    transform: rotate(90deg);
}

.job-row:hover {
    background-color: rgba(0, 0, 0, 0.05) !important; /* very light grey film */
}

.prodServ-row.expanded strong,
.job-row.expanded strong {
    color: #922c88 !important;
}

.customer-row.expanded strong {
    color: #922c88 !important;
}

.highlight-yellow {
    background-color: #f7fe2e;
    color: #000; /* Ensure text is readable on yellow */
}

.highlight-red {
    background-color: #de2a45;
    color: #000;
}

.prodServ-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.customer-card, .job-card {
    transition: all 0.2s ease;
    background-color: transparent !important;
}