.table-row-done {
    background-color: rgba(255, 138, 128, 0.6);
    /* Lighter red background color with 60% opacity */
}

.table-row-low {
    background-color: rgba(255, 224, 178, 0.6);
    /* Lighter orange background color with 60% opacity */
}

.table-row-regular {
    background-color: #FAFAFA;
    /* Lighter gray background color */
}

.ui-datepicker {
    z-index: 9999 !important;
}

.select2-container .select2-selection--single {
    height: auto;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

.Assign_btn {
    background: #17a2b8;
    color: #fff;
}

.Assign_btn:hover {
    background: #6dc6d7;
    color: #000000;
    border: 1px solid #6dc6d7;
}

.edit_job_btn {
    background: #6695d1;
    color: #fff;

}

.edit_job_btn:hover {
    background: #6dc6d7;
    color: #000000;
    border: 1px solid #6dc6d7;
}

.confirm-btn {
    background: #28a745;
    color: #fff;
}

.confirm-btn:hover {
    background: #5cb85c;
    color: #000000;
    border: 1px solid #5cb85c;
}

.cancel-btn,
.delete_btn {
    background: #dc3545;
    color: #fff;
}

.cancel-btn:hover {
    background: #f4b0bb;
    color: #000000;
    border: 1px solid #f4b0bb;
}

.delete_btn:hover {
    background: #f4b0bb;
    color: #000000;
    border: 1px solid #f4b0bb;
}

.cssbuttons-io-button {
    display: flex;
    align-items: center;
    font-family: inherit;
    font-weight: 500;
    font-size: 16px;
    padding: 1px;
    color: white;
    background: #ad5389;
    background: linear-gradient(0deg, rgba(220, 220, 220, 1) 0%, rgba(211, 211, 211, 1) 100%);
    border: 1px solid none;
    box-shadow: 0 0.7em 1.5em -0.5em #14a73e98;
    letter-spacing: 0.05em;
    border-radius: 20em;
}

.cssbuttons-io-button:hover {
    box-shadow: 0 0.5em 1.5em -0.5em gray;
}

.custom-modal-lg {
    max-width: 50%;
}

.radio-group {
    display: inline-block;
    margin-right: 10px;
}

.action-dropdown,
.machine-status-dropdown {
    border-radius: 1.25rem;
}

.info-button {
    --fs: 1.25em;
    --col1: honeydew;
    --col2: #00BCD4;
    --col3: #00BCD4;
    --col4: #ffffff;
    --pd: .4em .1em;
    display: grid;
    align-content: baseline;
    appearance: none;
    border: 0;
    grid-template-columns: min-content 1fr;
    padding: var(--pd);
    font-size: var(--fs);
    color: var(--col1);
    background-color: var(--col3);
    border-radius: 6px;
    text-shadow: 1px 1px var(--col4);
    box-shadow: inset -2px 1px 1px var(--col2),
        inset 2px 1px 1px var(--col2);
    position: relative;
    transition: all .75s ease-out;
    transform-origin: center;
}

.info-button:hover {
    color: var(--col4);
    /* box-shadow: inset -2px 1px 1px var(--col2),
        inset 2px 1px 1px var(--col2),
        inset 0px -2px 20px var(--col4),
        0px 20px 30px var(--col3),
        0px -20px 30px var(--col2),
        1px 2px 20px var(--col4); */
    text-shadow: 1px 1px var(--col2);
}

.info-button:active {
    animation: offset 1s ease-in-out infinite;
    outline: 2px solid var(--col2);
    outline-offset: 0;
}

.info-button::after,
.info-button::before {
    content: '';
    align-self: center;
    justify-self: center;
    height: .5em;
    margin: 0 .5em;
    grid-column: 1;
    grid-row: 1;
    opacity: 1;
}

.info-button::after {
    position: relative;
    border: 2px solid var(--col4);
    border-radius: 50%;
    transition: all .5s ease-out;
    height: .1em;
    width: .1em;
}

.info-button:hover::after {
    border: 2px solid var(--col3);
    transform: rotate(-120deg) translate(10%, 140%);
}

.info-button::before {
    border-radius: 50% 0%;
    border: 4px solid var(--col4);
    box-shadow: inset 1px 1px var(--col2);
    transition: all 0.4s ease-out;
    transform: rotate(45deg);
    height: .9em;
    width: .9em;
}

.info-button:hover::before {
    border-radius: 50%;
    border: 4px solid var(--col1);
    transform: scale(1.25) rotate(0deg);
    animation: blink 1.5s ease-out 1s infinite alternate;
}

.info-button:hover>span {
    filter: contrast(150%);
}

@keyframes blink {
    0% {
        transform: scale(1, 1) skewX(0deg);
        opacity: 1;
    }

    5% {
        transform: scale(1.5, .1) skewX(10deg);
        opacity: .5;
    }

    10%,
    35% {
        transform: scale(1, 1) skewX(0deg);
        opacity: 1;
    }

    40% {
        transform: scale(1.5, .1) skewX(10deg);
        opacity: .25;
    }

    45%,
    100% {
        transform: scale(1, 1) skewX(0deg);
        opacity: 1;
    }
}

@keyframes offset {
    50% {
        outline-offset: .15em;
        outline-color: var(--col1);
    }

    55% {
        outline-offset: .1em;
        transform: translateY(1px);
    }

    80%,
    100% {
        outline-offset: 0;
    }
}