.enlace {
    color: #1e9ff2 !important;
    cursor: pointer !important;
    font-weight: bold;
}

.enlace:hover {
    text-decoration: underline !important;
}

.pointer {
    cursor: pointer;
}

#hydra-toast-contenedor {
    position: fixed;
    width: 21rem;
    top: 0;
    right: 0;
    background-color: transparent;
    z-index: 9999;
}

.hydra-toast {
    float: right;
    width: 20rem;
    color: black;
    background-color: white;
    box-shadow: 0 10px 6px -6px #777;
    border-radius: 5px;
    margin-top: 10px;
    padding: 5px;
    margin-right: 5px;
}

.hydra-toast > hr {
    margin-top: revert;
    margin-bottom: revert;
}

.hydra-toast-type {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    /* background-color: var(--danger);  */
    float: left;
    margin-right: 5px;
}

/*MODIFICA EL MEN� PRINCIPAL DE HIDRA.*/
#sticky-wrapper .header-navbar .dropdown-item {
    padding: 15px 20px;
    width: 100%;
    min-width: 20rem;
}

#sticky-wrapper .header-navbar .dropdown-toggle::after {
    padding: 6px 2px 0 6px;
}

body:not(.modal-open) {
    padding-right: 0px !important;
}

/* Clases para los contenedores de Radio y Checkbox*/
.content-input {
    position: relative;
    padding: 5px 0 5px 60px;
    margin-bottom: 0px;
    display: block;
    cursor: pointer;
}

/* 
La propiedadd appearance da un aspecto standard a un elemento.
Por ejemplo: appearance: button
Como vamos a personalizar nuestros elemento a�adimos el valor none
*/
.content-input input,
.content-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.content-input i,
.content-input i:before {
    transition: all 0.25s ease;
}

/* 
Ocultamos nuestros inputs.
Con opacity 0. Si utilizamos visibility:hidden o display:none;
no funcionar�an
*/
.content-input input {
    opacity: 0;
    position: absolute;
    right: 0;
}

/*
Propiedades para cualquier el elmento i despu�s de un input
dentro de la capa .content-input
*/
.content-input input + i {
    background: #f0f0f0;
    border: 2px solid rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 0;
    top: 0;
}

/*
Propiedades para el checkbox
*/
.content-input input[type="checkbox"] + i {
    width: 52px;
    height: 30px;
    border-radius: 15px;
}

/*
Propiedades para radio
*/
.content-input input[type="radio"] + i {
    height: 30px;
    width: 30px;
    border-radius: 100%;
    left: 15px;
}

/*
Creamos el c�rculo que aparece encima de los checkbox
con la etqieta before. Importante aunque no haya contenido
debemos poner definir este valor.
*/
.content-input input[type="checkbox"] + i:before {
    content: ""; /* No hay contenido */
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    -webkit-box-shadow: 3px 0 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 3px 0 3px 0 rgba(0, 0, 0, 0.2);
}

.content-input input[type="checkbox"] + i:after {
    position: absolute;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    top: 8px;
    left: 4px;
    opacity: 0;
    transition: all 0.25s ease 0.25s;
}

/*
Creamos el c�culo que se mostrar� cuando hagamos click 
en cualquier radio y lo ocultamos con opacity 0
*/
.content-input input[type="radio"] + i:before {
    content: "";
    display: block;
    height: 18px;
    width: 18px;
    background: red;
    border-radius: 100%;
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 4px;
    background: #2ac176;
    transition: all 0.25s ease;
    transform: scale(0);
    opacity: 0; /* Lo ocultamos*/
}

.content-input:hover i {
    background: #b1e8cd;
}

/*
Con :checked definimos los valores css cuando un input
como radio o checkbox est� checheado
*/
.content-input input[type="checkbox"]:checked + i {
    background: #2ac176;
}

.content-input input[type="checkbox"]:checked + i:before {
    left: 22px;
    -webkit-box-shadow: -3px 0 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 3px 0 -3px 0 rgba(0, 0, 0, 0.2);
}

.content-input input[type="checkbox"]:checked + i:after {
    opacity: 1;
}

.content-input input[type="radio"]:checked + i:before {
    transform: scale(1);
    opacity: 1;
}

/* Select */
.content-select {
    max-width: 250px;
    position: relative;
}

.content-select select {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 7px 10px;
    height: 42px;
    outline: 0;
    border: 0;
    border-radius: 0;
    background: #f0f0f0;
    color: #7b7b7b;
    font-size: 1em;
    color: #999;
    font-family: "Quicksand", sans-serif;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    position: relative;
    transition: all 0.25s ease;
}

.content-select select:hover {
    background: #b1e8cd;
}

/* 
Creamos la fecha que aparece a la izquierda del select.
Realmente este elemento es un cuadrado que s�lo tienen
dos bordes con color y que giramos con transform: rotate(-45deg);
*/
.content-select i {
    position: absolute;
    right: 20px;
    top: calc(50% - 13px);
    width: 16px;
    height: 16px;
    display: block;
    border-left: 4px solid #2ac176;
    border-bottom: 4px solid #2ac176;
    transform: rotate(-45deg); /* Giramos el cuadrado */
    transition: all 0.25s ease;
}

.content-select:hover i {
    margin-top: 3px;
}

/* Eliminamos la fecha que por defecto aparece en el desplegable */
.content-select select::-ms-expand {
    display: none;
}

.datatable-button-pag #tabla_length, .datatable-button-pag .dataTables_length {
    padding-left: 1rem;
}

table.dataTable thead td.select-checkbox::before, table.dataTable thead th.select-checkbox::before {
    display: none !important;
}

table.dataTable tbody td.select-checkbox.noSelect::before, table.dataTable tbody th.select-checkbox.noSelect::before {
    background-color: #d9dadf !important;
    border: 1px solid #afa1a4  !important;
}

table.dataTable {
    width: 100%;
    margin: 0 auto;
    clear: both;
    border-collapse: collapse !important;
    border-spacing: 0;
}

.custom-file-label::after{
    content: "Buscar" !important;
}

table tr.table-iyc-ok:not(.selected) {
    background-color: #a7f4cf !important;
}

table tr.table-iyc-ko:not(.selected) {
    background-color: #ffccd3a8 !important;
}

table tr.table-iyc-warning:not(.selected) {
    background-color: #f3ff64a1 !important;
}

table tr.table-iyc-text-ok:not(.selected) {
    color: green !important;
}

table tr.table-iyc-text-ko:not(.selected) {
    color: red !important;
}

table tr.table-iyc-text-warning:not(.selected) {
    color: yellow !important;
}

.select-iyc-readonly {
    pointer-events: none;
    background-color: #ECEFF1;
}

.radio-iyc-component {
    margin-bottom: 0 !important;
}