:root {
    --primario: #0482c1;
    --primario-hover: linear-gradient(0deg, #0482c1 0%, #0482c1 50%, #2990e9 100%);
    --primario-gradient: linear-gradient(0deg, #2990e9 0%, #2990e9 50%, #0482c1 100%);
    --secundario: #6c757d;
    --secundario-hover: linear-gradient(0deg, #6c757d 0%, #6c757d 50%, #78828b 100%);
    --secundario-gradient: linear-gradient(0deg, #78828b 0%, #78828b 50%, #6c757d 100%);
    --exito: #81c408;
    --exito-hover: linear-gradient(0deg, #81c408 0%, #81c408 50%, #81bc15 100%);
    --exito-gradient: linear-gradient(0deg, #81bc15 0%, #81bc15 50%, #81c408 100%);
    --advertencia: #ffc107;
    --advertencia-hover: linear-gradient(0deg, #ffc107 0%, #ffc107 50%, #ffac07 100%);
    --advertencia-gradient: linear-gradient(0deg, #ffac07 0%, #ffac07 50%, #ffc107 100%);
    --peligro: #dc3545;
    --peligro-hover: linear-gradient(0deg, #dc3545 0%, #dc3545 50%, #e44b5a 100%);
    --peligro-gradient: linear-gradient(0deg, #e44b5a 0%, #e44b5a 50%, #dc3545 100%);
    --oscuro: #212529;
    --oscuro-hover: linear-gradient(0deg, #212529 0%, #212529 50%, #2d343b 100%);
    --oscuro-gradient: linear-gradient(0deg, #2d343b 0%, #2d343b 50%, #212529 100%);
    --claro: #f8f9fa;
    --claro-hover: linear-gradient(0deg, #f8f9fa 0%, #f8f9fa 50%, #e7eef6 100%);
    --claro-gradient: linear-gradient(0deg, #e7eef6 0%, #e7eef6 50%, #f8f9fa 100%);
    --informacion: #0dcaf0;
    --informacion-hover: linear-gradient(0deg, #0dcaf0 0%, #0dcaf0 50%, #31ccec 100%);
    --informacion-gradient: linear-gradient(0deg, #31ccec 0%, #31ccec 50%, #0dcaf0 100%);
    --bloque_menu: #d1d2d4;
    --bloque_menu-hover: linear-gradient(0deg, #d1d2d4 0%, #d1d2d4 50%, #dadde2 100%);
    --bloque_menu-gradient: linear-gradient(0deg, #dadde2 0%, #dadde2 50%, #d1d2d4 100%);
}

/* @font-face {
    font-family: 'Fedra Sans';
    src: url('fonts/Fedra_Sans_Std_Normal/Fedra_Sans_Std_Normal.otf') format('opentype');
    font-style: normal;
    font-weight: normal;
} */

body {
    /*font-family: "Fedra Sans";*/
    font-size: 14px;
}

a{
    color: inherit;
    text-decoration: none;
}

/* Estilo para botones de clase btn-primary*/
.bg-primary,
.btn-primary {
    background: var(--primario-gradient);
    color: #fff !important;
}

.btn-primary:hover {
    background: var(--primario-hover);
}

.bg-secondary,
.btn-secondary {
    background: var(--secundario-gradient);
    color: #fff !important;
}

.btn-secondary:hover {
    background: var(--secundario-hover);
}

.bg-success,
.btn-success {
    background: var(--exito-gradient);
    color: #fff !important;
}

.btn-success:hover {
    background: var(--exito-hover);
}

.bg-warning,
.btn-warning {
    background: var(--advertencia-gradient);
    color: #000 !important;
}

.btn-warning:hover {
    background: var(--advertencia-hover);
}

.bg-danger,
.btn-danger {
    background: var(--peligro-gradient);
    color: #fff !important;
}

.btn-danger:hover {
    background: var(--peligro-hover);
}

.bg-dark,
.btn-dark {
    background: var(--oscuro-gradient);
    color: #fff !important;
}

.btn-dark:hover {
    background: var(--oscuro-hover);
}

.bg-light,
.btn-light {
    background: var(--claro-gradient);
    color: #666 !important;
}

.btn-light:hover {
    background: var(--claro-hover);
}

.bg-info,
.btn-info {
    background: var(--informacion-gradient);
    color: #fff !important;
}

.btn-info:hover {
    background: var(--informacion-hover);
}

/* Bloque con opciones home */
.bg_bloque {
    background: var(--bloque_menu-gradient);
    color: var(--primario);
}

.bg_bloque:hover {
    background: var(--bloque_menu-hover);
}

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

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

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

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

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

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


/* Borde superior e inferior*/
.border_top {
    border-top: 3px solid;
    border-image: linear-gradient(to right, #226656, #1f5c4e) 1 0 0 0;
}

.border_bottom {
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #226656, #1f5c4e) 0 0 1 0;
}

/*Estilo del login*/
.card_form {
    width: 20rem;
}

.login_background {
    min-height: 100vh;
    background-image: url("./img/bg_login.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.5);
}

.center_block {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1rem;
    background-image: url("./img/bg_login.jpg");
    box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.5);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

.center_block .card {
    opacity: 0.93 !important;
}

.offscreen {
    position: absolute;
    left: -9999px;
}

/* Fondo del contenido */
.content_background {
    /*background-image: linear-gradient(#999, #fff);
    background-image: url("./img/background02.png");
    box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.95);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;*/
    min-height: 90vh;
}

/* Para el botón del accordion que lo expande */
.accordion_header {
    background-color: var(--exito) !important;
    color: #fff !important;
}

/*
Para agrandar el tamaño de los input type form-check tipo switch
*/
.form-check-input.custom-switch-size {
    width: 2.3rem;
    height: 1.4rem;
    margin-right: .5em;
}

.form-check-input.custom-switch-size:checked {
    background-position: right center;
}

/* Cambia el estilo de los botones desactivados*/
.custom_btn{
    background-color: var(--primario);
    color: #fff;
}

.custom_btn:hover{
    background-color: var(--primario-hover);
}

.custom_btn:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Controles slider */
.carousel-control-prev,
.carousel-control-next {
    background: var(--primario);
    opacity: 1;
    width: 2em;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    /* anula el default */
}


.floating {
    position: relative;
    background: transparent;
    padding: 20px;
    border-radius: 12px;
}

.floating:after {
    content: "";
    position: absolute;
    left: 2%;
    bottom: -15px;
    /* la sombra queda separada */
    width: 96%;
    height: 25px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    filter: blur(25px);
    z-index: -1;
    /* queda detrás */
}

.text-justify {
  text-align: justify;
}