:root {
    --bg-color-boton: #002C55;
    --bg-color-boton-hover: #004080;
    --bg-color-boton-transparencia: #CDD5FC;
    --text-color-boton: white;
    --text-color-boton-gris: #3f4254;
}

.ep-boton-color {
    background-color: var(--bg-color-boton) !important;
    color: var(--text-color-boton);
}

.stepper.stepper-pills .stepper-item.current .stepper-icon {
    background-color: var(--bg-color-boton) !important;
    color: var(--text-color-boton);
}

.stepper.stepper-pills .stepper-item.completed .stepper-icon .stepper-check,
.stepper.stepper-pills .stepper-item.current:last-child .stepper-icon .stepper-check {
    color: var(--bg-color-boton) !important;
}

.stepper.stepper-pills .stepper-item .stepper-icon {
    background-color: var(--bg-color-boton-transparencia) !important;
    color: var(--text-color-boton) !important;
}

.stepper.stepper-pills .stepper-item .stepper-icon .stepper-number {
    color: var(--text-color-boton) !important;
}

.btn.btn-light-primary {
    color: var(--text-color-boton-gris) !important;
}

.svg-icon.svg-icon-4 svg {
    color: var(--text-color-boton-gris) !important;
}

.btn.btn-primary {
    background-color: var(--bg-color-boton);
    color: var(--text-color-boton);
}

.btn-check:active+.btn.btn-primary,
.btn-check:checked+.btn.btn-primary,
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.show>.btn.btn-primary {
    background-color: var(--bg-color-boton-hover) !important;
    color: var(--text-color-boton) !important;
    border-color: var(--bg-color-boton-hover) !important;
}

.swal2-confirm {
    border-color: var(--bg-color-boton) !important;
}

.form-check-input:checked {
    background-color: var(--bg-color-boton) !important;
    border-color: var(--bg-color-boton) !important;
}

a {
    color: var(--text-color-boton-gris) !important;
}

.form-label {
    color: var(--bg-color-boton) !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--bg-color-boton) !important;
}

.element.style {
    background-color: var(--bg-color-boton) !important;
}

#map {
    height: 250px;
    width: 100%;
}

#mapa_principal {
    height: 250px;
    width: 100%;
}

.table-responsive-eco {
    overflow-y: scroll !important;
}

@media only screen and (max-width: 800px) {
    .table-responsive-eco {
        width: 85vw;
    }

    .select2-selection {
        max-width: 85vw !important;
    }
}

/* No cambiar el nombre de esta clase, solo modificar el color en caso de requerirlo */
.menu {
    background-color: #1B2B33 !important;
}

.active {
    background-color: #002C55 !important;
    color: #fff !important;
}

/* Fin clase menu */

/* tarjeta de reportes */
.card-header {
    background-color: #002C55 !important;
}

.card-title {
    color: #fff !important;
}

.card-label {
    color: #fff !important;
}

.error {
    color: red !important;
}