/* ==============================
   Color Variables
   ============================== */
:root {
    /*Red for borders and buttons */
    --primary-color: #d8151b;
    /* Semi-transparent dark blue for shadows */
    --primary-color-opacity: rgba(216, 21, 27, 0.4); /* Red with 40% opacity */
    /* Black for hover states */
    --hover-color: #000;
    /* Background color for arrows */
    --arrow-bg-color: white;
    /* Button text color */
    --button-text-color: white;
}


/*Main popOver*/
.driver-popover {
    box-shadow:
    /* Left shadow */
    -4px 4px 25px var(--primary-color-opacity),
    /* Right shadow */
    4px 4px 25px var(--primary-color-opacity),
    /* Bottom shadow */
    0px 8px 25px var(--primary-color-opacity);
    /* Border with same color as shadow */
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    position: fixed !important;
    top: auto;
    left: auto;
    transform: none !important;
}


    /* Next Button */
    .driver-custom .driver-popover-next-btn {
        background-color: var(--primary-color) !important;
        color: var(--button-text-color);
        text-shadow: none;
    }

    .driver-custom .driver-popover-next-btn:hover {
        background-color: var(--hover-color) !important;
        color: var(--button-text-color);
        text-shadow: none;
    }

    /* Previous Button */
    .driver-custom .driver-popover-prev-btn {
        background-color: var(--primary-color) !important;
        color: var(--button-text-color);
        text-shadow: none;
    }
    .driver-custom .driver-popover-prev-btn:hover {
        background-color: var(--hover-color) !important;
        color: var(--button-text-color);
        text-shadow: none;
    }

/*Description Text*/
.driver-popover-description{
    margin-top:10px;
margin-bottom:10px;
}

Footer
.driver-popover-footer{
    margin-top:0px;
}

/* ARROW */
.driver-popover-arrow {
    background-color: var(--arrow-bg-color);
    height: 15px;
    width: 15px;
    transform: rotate(45deg);
    margin: -8px;
}

/* Arrow pointing left */
.driver-popover-arrow-side-left {
    border-top: 1px solid var(--primary-color);
    border-right: 1px solid var(--primary-color);
}

/* Arrow pointing up */
.driver-popover-arrow-side-top {
    border-right: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
}

/* Arrow pointing right */
.driver-popover-arrow-side-right {
    border-bottom: 1px solid var(--primary-color);
    border-left: 1px solid var(--primary-color);
}

/* Arrow pointing down */
.driver-popover-arrow-side-bottom {
    border-left: 1px solid var(--primary-color);
    border-top: 1px solid var(--primary-color);
}

/*Close Button*/
.driver-popover-close-btn:hover{
    color: var(--primary-color);

}


/* Hover Tooltip */
.hover-tooltip {
    position: absolute;
    z-index: 1000;
    background-color: white;
    border: 1px solid var(--primary-color);
    
    /* Adjust padding to center the content properly */
/*    padding: 5px 10px;*/

    border-radius: 5px;
    box-shadow: 0 4px 10px var(--primary-color-opacity);
    font-size: 12px;
    color: black;
    white-space: nowrap;

    /* Prevent interfering with hover behavior */
    pointer-events: none;
}