/*
 * Copyright (c) D3V Services Limited on behalf of their client.
 * All code used in this development is either the property of D3V or their client and is not to be altered or reproduced without prior written consent from either of the above.
 */
.number_plate_hover {
    height: 40px; /* Fixed height to prevent overlap */
    position: relative;
    overflow: hidden;

}

.number_plate_hover.large {
    height: 45px; /* Adjusted height for large variant */
}

.number_plate_hover .plate-number,
.number_plate_hover .company-name {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.number_plate_hover .company-name {
    font-size: 0.75rem; /* Equivalent to text-xs */
    transform: translateY(100%);
}

.number_plate_hover:hover .plate-number {
    transform: translateY(-100%);
}

.number_plate_hover:hover .company-name {
    transform: translateY(0);
}

.number_plate {
    border: 2px solid #000;
    padding: 4px;
    width: 80px;
    font-weight: 800;
    color: #000000;
    text-align: center;

    .large {
        font-size: 2rem;
        width: 120px !important;
    }


}

.number_plate.search {
    font-size: 1.4rem;
    width: 120px !important;
}

.map_marker {
    font-size: 1.0rem;
    width: 95px !important;
}

.map_marker:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 35px;
    border-top: 5px solid black;
    border-top-color: inherit;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.62);
    -moz-box-shadow: 5px 10px 5px 0px rgba(0, 0, 0, 0.62);
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.62);
}

@keyframes overdue_pulse {
    0% {
        background-color: #FFFFFF;
        color: #000000;
    }
    50% {
        background-color: rgb(239 68 68/1);
        color: #FFFFFF;
    }
    100% {
        background-color: #FFFFFF;
        color: #000000;
    }
}

@keyframes dark_overdue_pulse {
    0% {
        background-color: #000000;
        color: #FFFF;
    }
    50% {
        background-color: rgb(239 68 68/1);
        color: #000;
    }
    100% {
        background-color: #000;
        color: #FFF;
    }
}

.dark .number_plate.untouched {
    border: 2px solid rgb(239 68 68/1);
    color: rgb(239 68 68/1);
}

.number_plate.untouched {
    border: 2px solid rgb(239 68 68/1);
    color: rgb(239 68 68/1);
}

.dark .number_plate.warning {
    border: 2px solid orange;
    color: orange;
}

.number_plate.warning {
    border: 2px solid orange;
    color: orange;
}

.dark .number_plate.closed {
    border: 2px solid rgb(7, 211, 79);
    color: rgb(7, 211, 79);
}

.number_plate.closed {
    border: 2px solid rgb(7, 211, 79);
    color: rgb(7, 211, 79);
}

.number_plate.overdue {
    animation: overdue_pulse 2s infinite;
    color: rgb(239 68 68/1);
}

.dark .number_plate.overdue {
    animation: dark_overdue_pulse 2s infinite;
    color: rgb(239 68 68/1);
}

.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68/var(--tw-bg-opacity));
    color: #FFF;


    :is(.dark .dark\:ring-custom-400\/30) {
        --tw-ring-color: #FFF;
        color: #FFF;
    }

    :is(.light .light\:ring-custom-400\/30) {
        --tw-ring-color: #FFF;
    }
}

.border-red-400 {
    --tw-border-opacity: 1;
    border-color: rgb(248 113 113/var(--tw-border-opacity));
}

.number_plate:hover {
    cursor: pointer;
}

.dark .number_plate {
    color: #FFF;
    border-color: #FFF;
}

.number_plate.due_soon {
    background-color: orange;
    color: #FFFFFF;
}

@keyframes due_soon_pulse {
    0% {
        background-color: #FFFFFF;
        color: #000000;
    }
    50% {
        background-color: orange;
        color: #FFFFFF;
    }
    100% {
        background-color: #FFFFFF;
        color: #000000;
    }
}


.number_plate.active {
    background-color: #009EF7;
    color: #FFFFFF;
}

.service_overdue td {
    color: red !important
}

.service_overdue td a {
    color: red !important
}


.map-shadow {
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.62);
    -moz-box-shadow: 5px 10px 5px 0px rgba(0, 0, 0, 0.62);
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.62);
}