:root {
    --colorAzul: #08568C;
    --coloRojo: #FC0000;
    --colorAzulDark: #002743;
    --colorGris: #979797;
    --success: #069840;
    --azulSferea: #345DA6;
    --amarilloSferea: #F7A919;
}
input[type="file"] {
    color: transparent;
}
.colorPreview{
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

a:not(nav .nav-link) {
    color: var(--colorGris);
}

textarea:disabled, select:disabled, input:disabled {
    background-color: #F5F5F5 !important;
}

.search-custom {
    height: 28px;
    border-radius: 20px;
}

.search-custom::placeholder {
    font-size: 0.8rem;
}

label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 480 !important;
    margin-left: 10px;
}

.search-custom + img {
    top: 5px;
    right: 15px;
    filter: invert(68%) sepia(96%) saturate(1779%) hue-rotate(350deg) brightness(106%) contrast(94%);
}

.espacio-search {
    padding-right: 12%;
}

.table th, .table td {
    text-align: center;
}
table {
    text-align: center;
}
th, td { 
    vertical-align: middle !important; 
    white-space: nowrap;
}
.dataTables_info {
    margin-bottom: 20px;
}

div.dataTables_filter[id*="_filter"] {
    display: none !important;
}

.paginate_button {
    border-top: 1px solid;
    border-bottom: 1px solid;
}

.page-link:focus {
    box-shadow: none;
}

.paginate_button .page-link {
    padding: 3px 15px;
    font-size: 0.9rem;
}

.paginate_button.active .page-link {
    background: transparent;
    color: var(--azulSferea) !important;
    border: 0;
    font-weight: bold;
}

.paginate_button.previous {
    border: 1px solid;
    border-right: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.paginate_button.next {
    border: 1px solid;
    border-left: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

div.dataTables_length,
div.dataTables_info {
    text-align: left !important;
}

.delete{
    color:red;
}

.delete:hover{
    color: rgb(175, 6, 6);
}
.file-preview{
    display: block;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 300px;
}
#cropperModal .img-container img {
    max-width: 100%;
    background-color: #333;
    height:100%;
}

.card-margin-top{
    margin-top: 20px;
}

.responsive-iframe{
    display: block;
    position: relative;
    margin:0 auto;
    width: 450px;
    height: 600px;
}
.pdfPreview{
    display: block;
    position: relative;
    margin: 0 auto;
    width: 450px;
    height: 500px;
}

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

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

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

.border-top-red {
    border-top: 4px solid var(--amarilloSferea) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #ececec;
}

nav .nav-link.active {
    border-radius: 0;
    background: var(--amarilloSferea) !important;
}
/*
input[type='radio']:after {
    width: 18px;
    height: 18px;
    border-radius: 18px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: white;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid var(--coloRojo);
}*/
input[type='radio']:after {
    width: 9px;
    height: 9px;
    border-radius: 18px;
    top: -7px;
    left: 2px;
    position: relative;
    background-color: white;
    content: '';
    display: inline-block;
    visibility: visible;
 
    border: 1px solid white;
}
input[type='radio']:checked:after {
    background-color: var(--amarilloSferea);
}

.btn-blue {
    color: #fff;
    background-color: var(--azulSferea);
    border-color: var(--azulSferea);
    box-shadow: none;
}

.btn-blue:hover {
    color: #fff;
    background-color: var(--colorAzulDark);
    border-color: var(--colorAzulDark);
}

.btn-rojo {
    color: #fff;
    background-color: #EA1D2D;
    box-shadow: none;
}

.btn-rojo:hover {
    color: #fff;
    background-color: #EA1D2D;
    box-shadow: none;
}

.card-rojo.card-outline {
    border-top: 3px solid var(--amarilloSferea);
}

.login-box {
  width: 400px;
}

.badge-red {
    color: #fff;
    background-color: var(--amarilloSferea);
}

.nav-flat .nav-item>.nav-link {
    border-radius: 0;
}

.text-blue-sidebar:not(.active) {
    color: var(--azulSferea);
}

.text-blue-sidebar:not(.active):hover {
    color: var(--amarilloSferea) !important;
}

.dropdown-item-blue:active {
    text-decoration: none;
    background-color: white;
}

.nav-tabs .nav-link {
    background-color: white;
    border: none;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--amarilloSferea);
    font-weight: 600 !important;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    font-size: 15px;
}

.dropdown-item.active, .dropdown-item:active {
    text-decoration: none;
}

.hidden {
    display: none !important;
}

.btn-outline-danger-blue {
    color: var(--azulSferea);
    border-color: var(--azulSferea);
}

.btn-outline-danger-blue:hover {
    color: #fff;
    background-color: var(--azulSferea);
    border-color: var(--azulSferea);
}

.btn-outline-danger-blue:focus, .btn-outline-danger-blue.focus {
    box-shadow: 0 0 0 0 rgba(238, 255, 0, 0.5);
}

.btn-outline-danger-blue.disabled, .btn-outline-danger-blue:disabled {
    color: var(--azulSferea);
    background-color: transparent;
}

.btn-outline-danger-blue:not(:disabled):not(.disabled):active, .btn-outline-danger-blue:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger-blue.dropdown-toggle {
    color: #fff;
    background-color: var(--azulSferea);
    border-color: var(--azulSferea);
}

.swal2-cancel {
    margin-right: 20px;
    width: 120px;
}

.swal2-confirm {
    width: 120px;
}

.label-input {
    color: var(--azulSferea);
}

.btn-ancho {
    width: 120px;
}

.select-size {
    width:200px;
    padding:20px;
    height: 150px;
}
.documento-correcto {
    color: var(--success);
}

.swal2-title {
    color: var(--azulSferea);
}

.swal2-image {
    margin-top: -15px;
    margin-bottom: -50px;
}

.swal2-footer {
    margin-top: -5px;
}
.link-descargar-reporte-errores {
    color: var(--azulSferea) !important;
}

.was-validated .form-control:invalid, .form-control.iss-invalid {
    border-color: #dc3545;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:invalid:focus, .form-control.iss-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.25);
  }
.was-validated textarea.form-control:invalid, textarea.form-control.iss-invalid {
    padding-right: 2.25rem;
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
.txt-tarea {
    font-size: 35px !important;
}


/* Clases para swtichs */
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: var(--azulSferea) !important;
    background-color: var(--azulSferea) !important;
    box-shadow: none;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 0 0 1px #fff, 0 0 0 0.2rem rgba(20, 55, 149, 0.25);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--azulSferea);
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: #fff;
    background-color: var(--azulSferea);
    border-color: var(--azulSferea);
    box-shadow: none;
}

select {
    background-image: url(../img/dropdown_small.png); /*aquí deberás escribir la ruta de la imagen que utilizarás como flecha del desplegable*/
    background-repeat: no-repeat;
    background-position: right center;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
}
select::-ms-expand {
    display: none; /*Evita que se muestre la flecha por defecto en versiones de IE*/
}

.text-azul-sferea {
    color: var(--azulSferea) !important;
}

.text-amarillo-sferea {
    color: var(--amarilloSferea) !important;
}