/* ==== EcoMobility Theme ==== */

/* Color Variables */
:root {
    /* Brand Colors */
    --color-primary: #034638;
    --color-primary-hover: #02342A;
    
    --color-secondary: #9CAF88;
    --color-secondary-hover: #7F946C;
    
    --color-info: #9FEEFF;
    --color-info-hover: #5FD5E5;
    
    --color-danger: #ee4938;
    --color-danger-hover: #c53a2c;

    --color-warring: #fff3cd;
    
    --color-gray: #393939;
    --color-gray-hover: #202020;
    --color-white: #fff;
    }



/* Background Colors */
.bgEcoPrimary {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.bgEcoPrimary:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-white);
}

.bgEcoSecondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
}
.bgEcoSecondary:hover {
    background-color: var(--color-secondary-hover);
    color: var(--color-white);
}

.bgEcoDanger {
    background-color: var(--color-danger);
    color: var(--color-white);
}
.bgEcoDanger:hover {
    background-color: var(--color-danger-hover);
    color: var(--color-white);
}

.bgEcoInfo {
    background-color: var(--color-info);
    color: var(--color-white);
}
.bgEcoInfo:hover {
    background-color: var(--color-info-hover);
    color: var(--color-white);
}
.bgEcoWarring {
    background-color: var(--color-warring);
    border-color: var(--color-warring);
    color: var(--color-gray);
}
.bgEcoWarring:hover {
    background-color: var(--color-gray);
    color: var(--color-white);
}
.bgEcoGray {
    background-color: var(--color-gray);
    color: var(--color-white);
}
.bgEcoGray:hover {
    background-color: var(--color-gray-hover);
    color: var(--color-white);
}


/* Links */
a {
    color: var(--color-secondary);
    font-weight: bold;
}
a:hover {
    color: var(--color-secondary-hover);
}


/* Headers */
.ecoHeader {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* nav */
.nav {
    background-color: var(--color-primary);
}
.nav-link {
    cursor: pointer;
    color: var(--color-white);
}

/* Pagination */
.pagination .page-item {
    background-color: var(--color-white);
}
.pagination .page-item.active {
    background-color: var(--color-secondary);
}
.pagination .page-link:not(.active):hover {
    background-color: var(--color-secondary-hover);
}

/* Form Elements */
.sub-text {
    font-size: 12px;
    color: var(--color-secondary);
    margin-top: -5px;
}

.sub-text a {
    text-decoration: none;
    color: var(--color-secondary);
}

.sub-text a:hover {
    text-decoration: underline;
    color: var(--color-secondary-hover);
}

/* Dropdowns */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-secondary);
    color: var(--color-white);
}
.dropdown-toggle:hover {
    color: var(--color-secondary-hover);
}

/* Modals */
.modal-header {
    padding: 20px;
    background-color: var(--color-primary);
    color: var(--color-white);
}

.modal-body {
    padding: 30px;
}

.modal-footer {
    padding: 20px;
}