:root {
    --color-primary: #0087b6;
    --color-primary-hover: #02749b;
    --color-primary-dark-hover: #009cd2;
    --color-fondo: #eff0ee;
    --color-fondo-light: #f8f8f8;
    --color-fondo-dark: #282c34;
    --color-texto: #51555f;
}

html,
body {
    height: 100%;
    color: var(--color-texto);
}

body.dark-mode {
    color: var(--color-fondo);
}

.table:not(.table-dark) {
    color: var(--color-texto);
}

.dark-mode .table {
    color: var(--color-fondo);
}

.wrapper {
    min-height: 100vh;
}

/* Color primario */

a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-hover);
}

.dark-mode a {
    color: var(--color-primary-dark-hover);
}

.text-primary {
    color: var(--color-primary) !important;
}

.card {
    background-color: var(--color-fondo-light);
}

.dark-mode a:not(.btn):hover {
    color: var(--color-primary-dark-hover);
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.btn-primary,
.dark-mode .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:active,
.dark-mode .btn-primary:not(:disabled):not(.disabled):active,
.dark-mode .btn-primary:not(:disabled):not(.disabled).active,
.show>.dark-mode .btn-primary.dropdown-toggle {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.dark-mode .btn-primary:hover {
    background-color: var(--color-primary-dark-hover);
    border-color: var(--color-primary-dark-hover);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-group .btn-primary {
    border-color: var(--color-primary-hover);
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--color-primary);
}

.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--color-primary);
}

.card-primary.card-outline,
.dark-mode .card-primary.card-outline {
    border-top: 3px solid var(--color-primary);
}

.dark-mode .card-primary:not(.card-outline)>.card-header {
    background-color: var(--color-primary);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--color-primary);
}

.nav-pills .nav-link:not(.active):hover {
    color: var(--color-primary-hover);
}

.dark-mode .nav-pills .nav-link:not(.active):hover {
    color: var(--color-primary-dark-hover);
}

.card-primary:not(.card-outline)>.card-header {
    background-color: var(--color-primary);
}

blockquote {
    border-left: .7rem solid var(--color-primary);
}

.page-item.active .page-link,
.dark-mode .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.page-link,
.dark-mode .page-item .page-link {
    color: var(--color-primary);
}

.page-link:hover {
    color: var(--color-primary-hover);
}

.dark-mode .page-item:not(.active) .page-link:focus,
.dark-mode .page-item:not(.active) .page-link:hover {
    color: var(--color-primary-dark-hover);
}

/* color de fondo */
.content-wrapper {
    background-color: var(--color-fondo);
}

.dark-mode,
.dark-mode .content-wrapper {
    background-color: var(--color-fondo-dark);
}

/* Formularios */

.dark-mode .custom-control-label::before,
.dark-mode .custom-file-label,
.dark-mode .custom-file-label::after,
.dark-mode .custom-select,
.dark-mode .form-control:not(.form-control-navbar):not(.form-control-sidebar),
.dark-mode .input-group-text {
    background-color: var(--color-fondo-dark);
}

/* Content */
.content-wrapper>.content {
    padding: 1rem;
}

/* Card */
.card-body .table {
    margin-bottom: 0;
}

/* check box */
.dark-mode .icheck-primary>input:first-child:checked+input[type=hidden]+label::before,
.dark-mode .icheck-primary>input:first-child:checked+label::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Input autocompletado */
.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px var(--color-fondo-dark) inset !important;
    box-shadow: 0 0 0 1000px var(--color-fondo-dark) inset !important;
    caret-color: #fff;
    border-color: var(--color-primary) !important;
}

/* Profile */
.profile-user-img {
    width: 200px;
}

.img-bordered-basic {
    border: 1px solid #adb5bd;
}

.dark-mode .img-bordered-basic {
    border-color: var(--color-fondo-dark);
}

.custom-file-input:lang(en)~.custom-file-label::after {
    content: "Seleccionar";
}

/* Select2 */
/* .dark-mode .select2-selection--single {
    background-color: var(--color-fondo-dark);
    
}

.dark-mode .select2-selection--single .select2-selection__rendered {
    color: var(--color-fondo-light);
} */

.dark-mode .select2-container--bootstrap4 .select2-selection {
    background-color: var(--color-fondo-dark);
    border-color: #6c757d;
}

.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: var(--color-fondo-light);
}

/* Flatpickr */
.dark-mode .flatpickr-calendar {
    background: var(--color-fondo-dark);
    -webkit-box-shadow: 1px 0 0 var(--color-texto), -1px 0 0 var(--color-texto), 0 1px 0 var(--color-texto), 0 -1px 0 var(--color-texto), 0 3px 13px rgba(0, 0, 0, 0.08);
    box-shadow: 1px 0 0 var(--color-texto), -1px 0 0 var(--color-texto), 0 1px 0 var(--color-texto), 0 -1px 0 var(--color-texto), 0 3px 13px rgba(0, 0, 0, 0.08);
}

.dark-mode span.flatpickr-weekday,
.dark-mode .flatpickr-day {
    color: var(--color-fondo-light);
}

.dark-mode .flatpickr-day:hover {
    background-color: var(--color-texto);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--color-primary);
}

.dark-mode .flatpickr-months .flatpickr-prev-month,
.dark-mode .flatpickr-months .flatpickr-next-month {
    color: var(--color-fondo-light);
    fill: var(--color-fondo-light);
}

.dark-mode .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--color-fondo-dark);
}

.dark-mode .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.dark-mode .flatpickr-current-month .numInputWrapper:hover {
    background: var(--color-texto);
}

.dark-mode .flatpickr-current-month {
    color: var(--color-fondo-light);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.dark-mode .flatpickr-time input,
.dark-mode .flatpickr-time .flatpickr-time-separator {
    color: var(--color-fondo-light);
}

/* Multiselect */
#undo_redo_to,
#undo_redo {
    height: 300px;
}

/* Tagin */
.dark-mode .tagin-input {
    background-color: var(--color-fondo-dark);
    color: var(--color-fondo-light);
}

.tagin-tag {
    background-color: var(--color-primary-dark-hover);
    color: var(--color-fondo-light);
}

.border-2 {
    border-width: 2px !important;
}

.border-3 {
    border-width: 3px !important;
}

.border-4 {
    border-width: 4px !important;
}

.border-5 {
    border-width: 5px !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 2rem !important;
}

.dark-mode .table-danger,
.dark-mode .table-danger>td,
.dark-mode .table-danger>th {
    background-color: #713e44;
}

.dark-mode .table-warning,
.dark-mode .table-warning>td,
.dark-mode .table-warning>th {
    background-color: #9e7f3f;
}

.dark-mode .table-success,
.dark-mode .table-success>td,
.dark-mode .table-success>th {
    background-color: #43693f;
}

.dark-mode .table-info,
.dark-mode .table-info>td,
.dark-mode .table-info>th {
    background-color: #3f6669;
}

.vich-image img {
    max-width: 100px;
    max-height: 100px;
    padding-top: 10px;
}

ul.pagination {
    margin-top: 0;
    margin-bottom: 0;
}