.label-large.countdown-remaining {
    width: 60px;
    padding: 1px 5px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid;
}
.booked-job-option-item {
    display: flex;
    justify-content: space-between;
}
.earning-provider-item .manager-item .column .row {
    display: flex;
    gap: 3px;
}
.earning-provider-item .column {
    gap: 3px;
}
.manage-total-received.row {
    display: flex;
}
.manager-item .primary-icon.check-icon path {
    fill: #ccc;
}
.manager-item .primary-icon.check-icon:hover path {
    fill: var(--primary-color);
}

.modal-content.on-my-way-content p {
    font-size: 0.8em;
    text-indent: 1em;
    margin: 0;
}
.save-payment-info-btn {
    margin: 0 5px 5px 5px;
}
.manager-item.total {
    border: 2px solid var(--inactive-color);
}
.booked-job-section.manager-section {
    padding: 0;
}
.job-notes-section .row {
    width: fit-content;
    gap: 0.5em;
}
.preview-file-wrapper,
.preview-image-wrapper{
    display: flex;
    align-items: center;
    position: relative;
    align-items: end;
    cursor:pointer;
}
.preview-file-wrapper:hover,
.preview-image-wrapper:hover {
    display: flex;
    z-index:10;
}
.loaded-users.column .label-micro {
    font-size: 0.4rem!important;
}
.preview-image-wrapper img {
    height: 2.5rem;
    border-radius: var(--block-border-2);
    position: relative;
    transition: all 0.3s ease;
}
.preview-image-wrapper:hover img{
    height: 4rem;
}

#uploadedPreviews {
    gap: 0.6rem;
    position: relative;
    height: 2rem;
    align-items: end;
}

.link-button.add-notes-btn {
    font-size: 1em;
}
.required-resources-info,
.modifier-info,
.intake-questions,
.extras-info{
    display:flex;
    flex-direction:column;
    gap:5px
}
.job-main-info-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.job-service-date.column {
    width: 100%!important;
    border-top: 1px solid #ccc;
    padding-top: 5px;
}
.edit-earning .primary-icon path,
.edit-earning .primary-icon svg{
    height: 15px;
    width: 15px;
    fill:var(--primary-color);
}

.location-share-buttons button:hover,
.eta-option:hover,
.cancel-transaction:hover {
    color: white;
    background: var(--inactive-color);
}

.provider-actions button:hover .primary-icon path{
    fill:white;
}

.provider-actions {
    width: 70px;
    display: flex;
    gap: 5px;
    paddin: 3px;
}
.location-share-buttons button,
.eta-option {
    background: transparent;
    color: var(--inactive-color);
    border: 1px solid;
    width: 100%;
    height: 40px;
    font-size: 1.1em;
}
.location-share-buttons{
    display:flex;
}
.location-share-buttons,
#eta-options {
    gap: 10px;
    flex-direction: column;
}
.on-my-way-content .disclaimer {
    flex-direction: row;
}
.booked-job-item-body span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.provider-image-section {
    height: 20px;
    width: 50%;
    display: flex;
    align-items: center;
}

.calendar-section-header th {
    padding: 10px 15px;
    border: 1px solid #ccc;
}
.booked-job-item-footer {
    position: relative;
}


.booking-action-buttons button {
    padding: 0;
    width: 18px;
    height: 18px;
    font-size: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--primary-color);
    border: 1px solid;
}
.booking-action-buttons button:hover {
    color: white;
}
.booking-action-buttons .primary-icon svg {
    height: 15px;
    width: 15px;
}
.reschedule-booking-btn:hover{
    background: var(--inactive-color);
    border: 1px solid var(--inactive-color);
}
.cancel-booking-btn:hover {
    background: var(--cancel-color);
    border: 1px solid var(--cancel-color);
}

.reschedule-booking-btn path,
.reschedule-booking-btn svg {
    width: 14px;
    height: 14px;
    fill:currentColor;
}
.reschedule-booking-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.number-of-providers-row {
    display: grid;
    grid-template-columns: 35% auto;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    padding: 5px 0;
}

.complete::after {
    position: absolute;
    content:'✓';
    background: var(--confirm-color);
    color: white;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    top: -5px;
    right: -5px;
}

.calendar-date-selection {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
}
.available-providers-floating-list .provider-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 5px 3px 3px;
}
.provider-image.provider .primary-icon svg {
    width: 20px;
}
.available-providers-floating-list .providers-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.available-providers-floating-list .provider-name{
    font-size:0.7em;
}
.available-providers-floating-list img,
.available-providers-floating-list .primary-icon svg{
    width:25px;
    height:25px;
}

.calendar-actions-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filtered-provider-item img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.filtered-provider-item {
    align-content: center;
    display: flex;
    gap: 10px;
}

.preferred-provider-item.selected {
    padding: 4px;
    border-radius: var(--block-border-2);
    border: 2px solid var(--primary-color);
}
.selected-provider-list-wrapper {
    padding: 10px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background: var(--menu-bar-color);
    gap: 10px;
    display: flex;
    flex-direction: column;
}
.border-span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 1px solid;
    border-radius: var(--block-border-2);
}
.border-span.checked {
    color: white;
    background: var(--confirm-color);
}
.schedule-selection p {
    margin: 0;
    font-size: 0.8em;
}
.recurring-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 10px;
}
.recurring-container .dropdown-type-1 {
    font-size: 0.8em;
}
.recurring-advanced-settings {
    grid-template-columns: 64% 33%;
    gap: 3% !important;
}

.recurring-weekly-settings {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.recurring-container .column {
    gap: 3px;
    justify-content: space-between;
}
.recurring-advanced-settings,
.recurring-monthly-settings,
.recurring-weekly-settings {
    display: grid;
    gap:3px 10px;
}

.recurring-monthly-settings {
    grid-template-columns: 1fr 2fr;
}

.column.on-day-controls {
    grid-template-columns: 0.8fr 1.2fr;
}

.on-day-controls.row {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    display: flex;
    gap:5px;
}
.recurring-ends.column input {
    height: 32px;
}
.record-payment-content input {
    width: 100%;
}
.received-payment-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.record-patment-content .modal-body {
    padding: 10px 0;
    gap: 10px;
}
.recepient-item,
.record-payment-content .row,
.received-payment-details .row {
    display: grid;
    grid-template-columns: 50% auto;
}
.recepient-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}
.recepient-items-list .primary-icon,
.recepient-items-list img {
    height: 2rem;
    background:white;
    border-radius:50%
}

.recepient-items-list .row {
    display: flex;
}

.role-span {
    padding: 1px 3px;
    border-radius: var(--block-border-2);
    color: white;
    width:fit-content;
}
.end-date-btn {
    padding: 0;
    color: var(--primary-color);
    background: transparent;
    text-decoration: underline;
    align-self: center;
    justify-content: end;
    height: 32px;
    width: 100%;
    border: 1px solid #ccc;
}

.clear-selection-btn:hover,
.end-date-btn:hover {
    color: var(--primary-color);
    background: transparent;
    text-decoration: none;
}
.clear-selection-btn {
    background: transparent;
    color: var(--primary-color);
    padding: 0;
    text-decoration:underline;
}
.primary-icon.on-hold-payment.tooltip-hover {
    position: absolute;
    top: -0.3rem;
    right: -0.4rem;
    background: white;
    color: var(--primary-color);
}
.edit-earning,
.edit-service-address,
.remove-provider-btn,
.warning.tooltip-hover {
    display: none;
}
.provider-selection-menu .label-small,
.column.on-day-occurrence .label-small {
    white-space: nowrap;
}
.recurring-container .monthly-date-of-month .dropdown-type-1-option {
    display: grid;
    grid-template-columns: 20% auto;
}
.date-available-slots {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: 10px;
    width: 110px;
    height: fit-content;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
    background: white;
}

.timeslot-btn.active {
    background: var(--confirm-color);
    border: 1px solid var(--confirm-color);
    color: white;
}
.available-providers {
    display: flex;
    grid-template-columns: 13px 13px 13px 13px;
    align-items: center;
}
label.provider-selection-label {
    display: grid;
    grid-template-columns: 20px 25px auto;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
}
label.provider-selection-label img {
    width: 25px;
}

.timeslot-btn.active .available-providers-item .primary-icon svg,
.available-providers-item img,
.available-providers-item .primary-icon svg {
    width: 20px;
    height: 20px;
    background:white;
    border-radius:50%;
}
.timeslot-btn.active .available-providers-item .primary-icon path{
    fill:var(--primary-color)!important;
}
.available-providers-item{
    display: flex;
    width: 20px;
    border-radius: 50%;
    overflow: hidden;
    /*border: 1px solid #ccc;*/
    margin-left: -7px;
    position: relative;
}
.available-providers-item:first-child {
  margin-left: 0;
}
.available-providers {
    display: flex;
    align-items: center;
    position: relative;
}
.timeslot-floating-menu,
.available-providers-floating-list {
    background: white;
    border: 1px solid #ccc;
    border-radius:var(--block-border-2);
    padding: 10px;
    z-index: 10000;
    box-shadow: var(--box-shadow);
}
.provider-selection-menu,
.provider-selection-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.job-provider-item:hover .remove-provider-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    padding: 0;
    flex-shrink:0;
    width:20px;
    height:20px;
    border:1px solid;
    background:transparent;
    color:var(--inactive-color);
    margin-left: auto;
}
.job-provider-item:hover .remove-provider-btn:hover {
    background:var(--inactive-color);
    color:white;
    border-color:var(--inactive-color);
}
.provider-actions{
    width:100%;
}
.provider-text-btn,
.provider-call-btn {
    display:none;        
}
button.job-done:hover {
    background:var(--confirm-color);
}




.modifier-block,
.extra-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.job-details-section-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.invoice-head.row {
    justify-content: space-between;
}

.invoice-head.row .column {
    width: fit-content;
}

span.paid-status {
    display: flex;
    padding: 1px 6px;
    height: fit-content;
    background: var(--confirm-color);
    border-radius: var(--block-border-2);
    color: white;
    font-size: 0.5em;
}

.invoice-summary {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-self: end;
    width: 40%;
    padding: 10px 0;
    gap: 5px;
}
.invoice-actions {
    display: grid;
    grid-template-columns: 1fr 0.8fr 1.2fr 0.2fr;
    gap: 10px;
    font-size: 0.8em;
}

.invoice-actions button {
    font-size: 0.8em;
    padding: 5px;
}

.invoice-preview-actions {
    display: flex;
    gap: 0.5rem;
}

.modal-actions-row .row {
    width: fit-content;
}

.invoice-product-item {
    display: grid;
    grid-template-columns: auto 20% 20% 20%;
    justify-items: end;
}
.universal-floating-menu {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 5px;
    font-size: 0.8em;
    border-radius: var(--block-border-2);
    box-shadow: var(--box-shadow);
    gap: 5px;
    border: 1px solid #ccc;
    align-items: start;
    z-index: 10000;
}

.floating-menu-item {
    display: flex;
    align-items: center;
    justify-content: start;
    background: transparent;
    color: var(--primary-color);
    font-size: 0.8em;
    padding: 3px 5px;
    border-radius: var(--block-border-2);
    gap: 10px;
    width:100%;
}
.floating-menu-item:hover{
    background: var(--label-hover-color);
}




.column.paid.tooltip-hover {
    padding: 1px 5px;
    border: 2px solid var(--confirm-color);
    border-radius: var(--block-border-2);
    height: fit-content;
    background: #d5ffd5;
    color: #005c00;
}
.invoice-total-paid.column.partially-paid {
    border: 2px solid var(--confirm-color);
    border-radius: var(--block-border-2);
}
.invoice-head .column {
    padding: 5px;
    width: fit-content;
}

.invoice-head .row {
    justify-content: space-between;
}
.toggle-invoice{
    cursor:pointer;
}
.invoice-body-collapsible {
    flex-direction: column;
    gap: 10px;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}
.invoice-body-collapsible.open {
	max-height: 100%;
	display: flex;
}

.transaction-item.reward,
.transaction-item.reward .transaction-item-summary.row {
    font-size: 0.8em;
}
.transaction-item.reward .transaction-item-summary.row .label-small {
    white-space: nowrap;
}
.transaction-item.reward .transaction-item-summary.row .column {
    align-items: end;
}


.transaction-item.void .primary-icon.icon20 {
    cursor: auto;
}
.transaction-item em {
    color: var(--inactive-color);
    font-size: 0.8rem;
}
.transaction-amount.column,
.transaction-amount .column {
    width: 100px;
    min-width: 100px;
    justify-content: end;
    align-items: end;
    gap: 3px;
    transition: transform 0.3s;
}
.transaction-initiator.column {
    width: 100%;
}

.timer {
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    padding:0.1em 0.2em;
}
.job-provider-item .timer {
    width: 60px;
    background: var(--primary-button-contrast-hover-color);
    color: white;
}
/*** Invoice preview***/
.preview-section {
    padding: 20px;
    background: var(--menu-bar-color);
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.paid-stamp-span {
    padding: 3px 7px;
    border-radius: var(--block-border-2);
    border: 2px solid;
    color:var(--confirm-color)
}

.staff-note-textarea {
    min-height: 70%;
    box-sizing: border-box;
    padding: 3px;
    background: transparent;
    border: none;
    border-top: 1px solid #ccc;
    border-radius: 0;
}

textarea.staff-note-block {
    height: 100%;
}
.staff-note-block {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-top: 10px;
}

.modal-actions-row {
    display: flex;
    justify-content: space-between;
}
.record-payment-content .modal-body {
    overflow: visible;
}
.record-payment-content .input-wrapper:focus-within {
    width: 100%;
}
.record-payment-content .column {
    gap: 3px;
}
textarea.email-message {
    background: transparent;
    border: none;
    outline:none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
}
.email-form.column {
    gap: 10px;
}
.email-form .column {
    gap: 3px;
}
.staff-note-block .link-button,
.preview-section .link-button.add-message-btn {
    font-size: 0.7em;
    width: fit-content;
    align-self: end;
}
.transaction-item.reward .label-small {
    white-space: nowrap;
}

.transaction-item-summary.row .column {
    align-items: end;
}
/***Confirmation modal***/
.request-new-payment.column label {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.request-new-payment.column {
    gap: 1rem;
    padding: 1rem 1rem 0;
}
/***Preferred Payment modal***/
#editPaymentInputWrapper .row {
    justify-content: flex-end;
}
#editPaymentInputWrapper .span-border-wrapper {
    padding:0.2rem;
}
/*** Flatpickr ***/
.calendar-wrapper .dayContainer {
    text-align: center;
    width: 100%;
    min-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
}
.calendar-wrapper .numInputWrapper:hover {
    background: transparent;
}
.calendar-wrapper .flatpickr-current-month .flatpickr-monthDropdown-months {
    width: 100%;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
}
.calendar-wrapper .flatpickr-current-month {
    display:flex;
    display: flex;
    align-items:center;
    gap:10px;
    padding: 0;
}    
.calendar-wrapper .flatpickr-current-month .numInputWrapper {
    width: 100%;
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: var(--block-border-2);
    border: 1px solid #ccc;
}
.calendar-wrapper .flatpickr-months .flatpickr-prev-month,.calendar-wrapper .flatpickr-months .flatpickr-next-month {
    display: flex;
    align-items: center;
    padding: 0;
}
.calendar-wrapper .past-date {
    opacity: 0.5;
}
.calendar-wrapper input.date-selector.flatpickr-input {
    display: none;
}