.bgtheme {
  background-color: #faa719;
}

.bgtheme:hover,
.bgtheme:active,
.bgtheme:focus {
  background-color: #faa719;
}


/* Default state: white text */
.car-option {
    color: white; /* Default text color */
    background-color: #333; /* You can adjust this default background color */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover state: bg-warning with dark text */
.car-option:hover {
    background-color: #ffc107 !important; /* bg-warning */
    color: #333 !important; /* Dark text on hover */
    cursor: pointer;
}

/* Selected state: bg-warning with dark text */
.car-option.selected {
    background-color: #ffc107 !important; /* bg-warning */
    color: #333 !important; /* Dark text */
}

/* Optional: To give it a shadow on hover */
.car-option:hover,
.car-option.selected {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}





.ftntheme {
color: #faa719;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1490px;
    }
}

@media screen and (max-width: 1200px) {
    .option-page {
        width: 70%;
    }
}

@media screen and (max-width: 992px) {
    #map {
        height: 500px;
    }



    .logo {
        height: 40px !important;
    }

    #bars_menu {
        height: 40px;
    }
}

@media screen and (max-width: 650px) {
    .paragraph-box {
        overflow: auto;
    }

    .paragraph-box table {
        width: 600px !important;
    }

    .top-header {
        border-radius: 0 0 10px 10px !important;
        margin-top: 0 !important;
        position: absolute;
        top: 0;
        right: 0;
    }

    .number-box {
        margin-top: 32px;
    }

    aside{
        margin-top: 0.5rem;
    }
}

@media screen and (max-width: 500px) {
    .option-page {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

@media screen and (max-width: 450px) {
    #map {
        height: 450px;
    }
}