html {
    color: black !important;
    background-color: transparent;
}

body {
    color: black !important;
}

.input-group-text {
    background-color: black !important;
    color: white;
    border-left: 2px solid var(--bs-primary);
    border-top: 2px solid var(--bs-primary);
    border-bottom: 2px solid var(--bs-primary);
}

/* textarea {
    min-height: 35px !important;
    height: 35px;
} */

h1 {
    text-transform: uppercase;
    font-weight: bold;
}

.progress {
    --bs-progress-bar-transition: width 2s linear;
    --bs-progress-bg: gray;
    --bs-border-radius: 0;
}

.progress-bar-animated {
    animation-direction: reverse !important;
}

/*---------------- Comienzan Modal ----------------*/

.modal {
    /* background-color: black; */
    border-radius: 5px;
}

.modal-dialog {
    background-color: white;
    border: 2px solid var(--bs-primary) !important;
    border-radius: 5px;
    color: black;
}

.modal-content {
    /* background-color: red; */
    border-radius: 5px;
    background-color: white;
    color: black;
    text-align: left;
}

.modal-header {
    border-bottom: 4px solid var(--bs-danger) !important;
    /* background-color: white; */
    /* color: black; */

      background-color: rgba(0, 0, 0, 0.8) !important;
    /* border-bottom: 5px solid var(--bs-danger); */
    /* height: 120px; */
    /* width: 100%; */
    color: white;
    /* font-size: 14px; */

}

.modal-footer {
    border-top: 2px solid var(--bs-primary) !important;
    align-content: start;
}

/*---------------- Terminan MODAL ----------------*/

hr {
    border: 3px solid var(--bs-primary) !important;
}

/* ------------------ Paginaion ---------------------*/
.pagination {
    margin: 0px;
}

.pagination > li > a {
    background-color: black;
    color: white;
    border: solid 1px gray;
    border-radius: 5px;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    color: white;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.pagination > .active > a {
    color: white;
    background-color: var(--bs-primary) !important;
    border: solid 2px var(--bs-primary) !important;
}

.pagination > .active > a:hover {
    background-color: var(--bs-primary) !important;
    border: solid 2px var(--bs-primary);
}

.pagination > .disabled > a {
    background-color: gray !important;
    border: solid 1px var(--bs-primary) !important;
    color: black;
}

/* ------------------ Termina Pagination ----------- */

.subrayado {
    border-bottom: 2px solid var(--bs-primary) !important;
    margin-bottom: 10px;
    margin-top: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

input[type="file"]::file-selector-button {
    border: 2px solid var(--bs-primary) !important;
    padding: 0.2em 0.4em;
    border-radius: 0.2em;
    background-color: var(--bs-primary) !important;
    transition: 10000s;
    color: white;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select {
    border: 2px solid var(--bs-primary) !important;
    /* box-shadow: 0 1px 1px var(--bs-danger) inset, 0 0 8px red; */
    /* outline: 0 none; */
}

area:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus {
    border: 2px solid var(--bs-primary) !important;
    box-shadow:
        0 1px 1px var(--bs-primary) inset,
        0 0 8px var(--bs-primary);
    outline: 0 none;
}

.form-control:disabled,
.form-select:disabled,
input.form-control:read-only,
/* select.form-select:read-only, */
textarea.form-control:read-only {
    background-color: var(--bs-secondary);
    color: white;
    border: 2px solid var(--bs-primary);
    text-align: center;
}

input[type="checkbox"]:disabled {
    background-color: black;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--bd-violet-bg);
    --bs-tooltip-color: var(--bs-white);
}

.btn-outline-primary i {
    background-color: transparent;
    color: white;
}

/* TABLES */

.table-dark {
    /* titulo */
    --bs-table-color: black;
    --bs-table-bg: rgba(255, 255, 255, 0.9);
    --bs-table-border-color: black;

    /* color de striped */
    --bs-table-striped-bg: goldenrod;
    --bs-table-striped-color: pink;

    /* activos */
    --bs-table-active-bg: green;
    --bs-table-active-color: blue;

    /* posicion */
    --bs-table-hover-bg: black;
    --bs-table-hover-color: white;

    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);

    border-bottom: 2px solid var(--bs-primary);

    margin-bottom: 0px;
}

/* .table-dark tr:last-child {
    border-bottom: 2px solid var(--bs-primary);
} */

/* OFFCANVAS */
.offcanvas {
    color: black;
    /* --bs-offcanvas-color: white; */
    --bs-offcanvas-bg: rgba(255, 255, 255, 0.8) !important;
    /* background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; */

    border: 2px solid var(--bs-primary) !important;
}

.offcanvas-backdrop {
    background-color: black;
}

.offcanvas-backdrop.show {
    opacity: 0.8;
}

.offcanvas-body {
    border-right: 2px solid transparent !important;
}

.offcanvas-header {
    border-right: 2px solid transparent !important;
    margin: -10px;
    margin-bottom: 15px;


    
      background-color: rgba(0, 0, 0, 0.8) !important;
    /* border-bottom: 5px solid var(--bs-danger); */
    /* height: 120px; */
    /* width: 100%; */
    color: white;
    /* font-size: 14px; */
}

/* espacios */
.cero {
    margin-left: 0px;
    margin-right: 0px;

    border: 1px solid transparent;
}

.uno {
    margin-left: 0px;
    margin-right: 0px;

    border: 6px solid transparent;
}

/* aspectos modal */

.final {
    border-bottom-right-radius: 5px !important;
    border-top-right-radius: 5px !important;
}

.siguiente {
    border-bottom-left-radius: 5px !important;
    border-top-left-radius: 5px !important;
}

.miniEspacio {
    margin-left: 30px !important;
    /* margin-right: 5px; */
}

/* small */

small {
    font-weight: bold;
}

/* CHAT */

.btn-chat {
    margin: 0;
    margin-top: -120px;
    margin-right: -180%;
    opacity: 0.5;
    font-size: 25px;
    border-radius: 10px;
    border: 2px solid transparent;

    transition:
        opacity 2s,
        font-size 2s,
        border 2s,
        margin-right 2s;
}

.btn-chat:hover {
    margin: 0;
    margin-top: -120px;
    margin-right: -80%;
    opacity: 1;
    font-size: 50px;
    border: 2px solid white;
}

/* alertas personalizadas */

.alert-info {
    --bs-alert-color: #6ea8fe !important;
    --bs-alert-bg: #031633 !important;
    --bs-alert-border-color: #084298 !important;
    --bs-alert-link-color: #6ea8fe !important;

    --bs-alert-border: 2px solid #6ea8fe;

    text-align: center !important;
}

.alert-warning-note {
    --bs-alert-color: #ffda6a !important;
    --bs-alert-bg: #332701 !important;
    --bs-alert-border-color: #997404 !important;
    --bs-alert-link-color: #ffda6a !important;

    text-align: center !important;
}

span {
    text-transform: uppercase !important;
}

.inputfile {
    background-color: white !important;
    color: black !important;
    border: 2px solid var(--bs-primary);
}

.carga {
    background-color: transparent;
    border: 2px solid var(--bs-primary);
    padding: 0px;
    border-radius: 5px;
    margin: 0px;
    padding: 0px;
    /* width: 100%; */
    /* height: 100px; */
    max-height: 250px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.carga img {
    margin-left: 25%;
}

.documentossuccess_1 {
    background-color: rgba(0, 255, 0, 0.2) !important;
    color: black !important;
    font-weight: bold;
}

.documentossuccess_2 {
    background-color: rgba(0, 255, 0, 0.3) !important;
    color: black !important;
    font-weight: bold;
}

.documentosdanger {
    background-color: var(--bs-danger) !important;
    color: white !important;
    font-weight: bold;
}