:root{
    --blanco: #ffffff;
    --negro: #000000;
    --disabled: #e0e0e0;
    --color-desa: #E0E0AA;
    --page-root: #eeeeee;
    --page-outline: #e0e0e0;
    --page-shadow: #c2c2c2;
    --page-root-light: #eeeeee;
    --page-outline-light: #e0e0e0;
    --page-shadow-light: #c2c2c2;
    --page-root-dark: #222222;
    --page-outline-dark: #111111;
    --page-shadow-dark: #000000;
    --app-white: #fcfcfc;
    --app-dark: #333333;
    --page-text: var(--negro);
    --page-background: var(--app-white);
    --azul-ivace: #5b7f95;
    --azul-ivace-claro: #C9E1F0;
    --azul-ivace-oscuro: #3b5261;
    --azul-formulario: #0073ea;
    --azul-enlace: #0060C0;
    --rojo-ivace: #dc002e;
    --rojo-gva: #c8102e;
    --error: #dc002e;
    --error-fondo: #ffe6eb;
    --warning: #cc742f;
    --warning-fondo: #fff1e6;
    --confirmation: #44cc44;
    --confirmation-fondo: #e6ffe6;
    --color: var(--azul-ivace);
    --color-claro: var(--azul-ivace-claro);
    --color-oscuro: var(--azul-ivace-oscuro);
    --color-fondo: #e6f2fa;
    --color-blanco: #f2f9fc;
    --color-hover: rgba( 90, 126, 148, 0.08 );
}

* {
    box-sizing: border-box;
}

html {
    font-size: 14px;
}
@media screen and (max-width: 1200px) {
    html {
        font-size: 13px;
    }
}
@media screen and (max-width: 992px) {
    html {
        font-size: 12px;
    }
}
@media screen and (max-width: 768px) {
    html {
        font-size: 11px;
    }
}
@media screen and (max-width: 576px) {
    html {
        font-size: 10px;
    }
}

body {
    font-family: Raleway, Roboto, Helvetica, Arial, sans-serif;
    background: #eeeeee; /* Fix IE */
    background: var(--page-root);    
    color: var(--page-text);
    margin: 0px;
    padding: 0px 0px 4px 0px;
    line-height: 1.25;
}
@media screen and (min-width: 1450px) {
    body {
        border-left: 1px solid var(--page-outline);
        border-right: 1px solid var(--page-outline);
        margin: 0 2% 0 2%;
    }
}
@media screen and (min-width: 1650px) {
    body {
        margin: 0 3% 0 3%;
    }
}
form{
    margin: 0px;
}
.ui-widget, .ui-widget button {
    font-size: 1em;
    font-family: Raleway, Roboto, Helvetica, Arial, sans-serif;
}
.raleway, .ui-widget.raleway, .raleway .ui-widget{
    font-family: Raleway, Roboto, Helvetica, Arial, sans-serif;
}
.roboto, .ui-widget.roboto, .roboto .ui-widget{
    font-family: Roboto, Helvetica, Arial, sans-serif;
}
input, textarea, select, .ui-widget input, .ui-widget textarea, .ui-widget select{
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 1em;
}

input, textarea{
    display: flex;
}
input, textarea,
input.ui-state-default, .ui-widget-content input.ui-state-default, .ui-widget-header input.ui-state-default,
textarea.ui-state-default, .ui-widget-content textarea.ui-state-default, .ui-widget-header textarea.ui-state-default{
    border: none;
    border-bottom: 1px solid var(--page-shadow);
    transition: border-bottom-color 0.2s ease-in-out;
}
input.border, textarea.border{
    border: 1px solid var(--color-oscuro);
    border-radius: .2em;
}
input:focus, textarea:focus, input[type="text"].ui-state-focus{
    outline: none;
    border-color: var(--azul-formulario);
}
input[type="text"].ui-state-error {
    border-color: #dc002e;
    border-color: var(--error);
}
input, textarea, select{
    width: 100%;
    color: var(--page-text);
    background-color: var(--page-background);
}

select{
    border: 1px solid var(--color-oscuro);
    border-radius: .2em;
}
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: .50;
    filter: Alpha(Opacity=50);
}

/**
** CABECERA
**/
#cabecera-ivace {
    background-color: transparent;
    text-align: left;
    width: auto;
    border: 0px;
    border-left: 1px solid var(--page-outline);
    border-right: 1px solid var(--page-outline);
    padding: 0px;
    flex-grow: 0;
}


/**
** TITULO
**/
.titulo-ivace {
    margin: 0px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.titulo-ivace.titulo-reducido .titulo-inferior{
    display: none;
}
.titulo-ivace.titulo-reducido .titulo-fila {
    -webkit-box-shadow: inset 0px -8px 5px -5px var(--page-shadow);
    -moz-box-shadow: inset 0px -8px 5px -5px var(--page-shadow);
    box-shadow: inset 0px -8px 5px -5px var(--page-shadow);
}
.titulo-ivace .titulo-fila{
    display: flex;
    flex-direction: row;
    background-color: #ffffff; /* Fix IE */
    background-color: var(--page-background);
}
.titulo-ivace .titulo-superior{
    font-size: 0.9em;
    justify-content: space-between;
}
.titulo-ivace .titulo-superior .titulo-elem{
    display: flex;
    align-items: center;
}
.titulo-ivace .titulo-desa{
    text-align: center;
    padding: 0em .3em;
}
.titulo-ivace .titulo-desa a{
    font-weight: bold;
    text-decoration: none;
    color: #5b7f95; /* Fix IE */
    color: var(--color);
}
.titulo-ivace .titulo-reducido{
    text-align: center;
    margin: auto;
}
.titulo-ivace .titulo-reducido a{
    font-weight: bold;
    text-decoration: none;
}
.titulo-ivace .right{
    text-align: right;
    margin-left: auto;
}
.titulo-ivace #settings {
    margin: 0em 1em;
}
.titulo-ivace #idiomas {
    flex-grow: 0;
    padding-right: 1em;
}
.titulo-ivace #idiomas a {
    margin-left: 1em;
    text-decoration: none;
    line-height: 2em;
}
.titulo-ivace #idiomas a:hover{
    text-decoration: underline;
}
.titulo-ivace #idiomas label {
    cursor: pointer;
}
.titulo-ivace .banner{
    display: flex;
    flex-direction: row;
    width: 100%;
    background: #efefef;
    background-color: var(--page-root);
    background-position: center;
    height: 8em;
    -webkit-box-shadow: 0px -3px 7px var(--page-shadow);
    -moz-box-shadow: 0px -3px 7px var(--page-shadow);
    box-shadow: 0px -3px 7px var(--page-shadow);
}
@media screen and (max-width: 768px) {
    .titulo-ivace .banner {
        height: 5em;
    }
}
.titulo-ivace .banner .logo {
    margin: auto 1em;
    width: 210px;
}
.titulo-ivace .banner .logo.logo-ivace {
    text-align: right;
}
.titulo-ivace .banner .logo img{
    height: 8em;
}
@media screen and (max-width: 768px) {
    .titulo-ivace .banner .logo {
        margin: auto .2em;
        width: 120px;
    }
    .titulo-ivace .banner .logo img{
        height: 5em;
    }
}
.titulo-ivace .banner .titulo-app {
    flex-grow: 1;
    padding: 0px;
    text-align: center;
    display: flex;
    align-items: center;
    font-size: 2em;
    font-weight: bold;
}

.titulo-app a, .titulo-app a.ui-widget{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    margin: auto;
}
.titulo-app a > *{
    margin: auto;
    display: flex;
    align-items: center;
}
.titulo-app a, .titulo-app .ui-widget {
    color: var(--rojo-ivace);
    text-shadow: 0px 0px 1px var(--color);
}
.cabecera-inversa .titulo-app a, .cabecera-inversa .titulo-app .ui-widget {
    color: #fff;
    color: var(--app-white);
    text-shadow: 2px 2px 2px var(--app-dark);
}
/**
** PARTES DE LAS WEBS
**/
#contenido-app {
    padding: 0px;
    width: auto;
    border: 0px;
    flex-grow: 1;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    overflow: auto;
    background: var(--page-background);
    color: var(--page-text);
}
#contenido-app > div {
    padding: 0px;
}
#cuerpo{
    height: 100%;
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    flex-direction: column;
}

#cuerpo #contenido{
    width: 100%;
    max-height: 100%;
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
}
.scroll-div{
    overflow: auto;
    max-height: 100%;
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
}
.max1120 {
    max-width: 1120px;
    display: flex;
    margin: auto;
    justify-content: center;
}
#cuerpo #contenido .pagina-flex{
    height: 100%;
    display: flex;
}
#cuerpo #contenido .contenido-scroll-div{
    height: 100%;
    display: block;
    width: 100%;
}

/**
**
** ELEMENTOS DE UI
**
**/

/**
** BTN como en PEIVNG
**/
.btn {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
    margin: auto;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    color: var(--color-blanco);
    background-color: var(--color);
    border: 0px solid transparent;
    border-radius: 1em;
    box-shadow: 1px 1px 2px 0px var(--color-oscuro);
    font-weight: bold;
    font-size: 1em;
    line-height: 1.5em;
    letter-spacing: 0.05em;
}
.ui-widget-content a.btn{
    color: var(--page-background);
}
.btn:hover {
    background-color: var(--color-blanco);
    color: var(--color);
    box-shadow: 1px 1px 2px 0px var(--color-oscuro), inset 0px 0px 1px 1px currentColor;
}
.ui-widget-content a.btn:hover{
    color: var(--color);
}
.btn:focus {
    box-shadow: 0px 0px 0px 0.2em var(--color-claro);
}
.btn-invertido {
    color: var(--color);
    background-color: var(--color-fondo);
    border-color: var(--color);
}
.ui-widget-content a.btn-invertido{
    color: var(--color);
}
.btn-thin, .btn-flat {
    line-height: 1.2em;
    padding: 3px 0.5em 3px calc(0.5em + 1px);
}
.btn-min {
    line-height: 1em;
    padding: 3px 0.1em 1px calc(0.1em + 1px);
}
.btn-column {
    flex-direction: column;
}
.btn:disabled, .btn[disabled] {
    cursor: default;
    color: var(--color-oscuro);
    background-color: var(--disabled);
    border-color: var(--disabled);
}
.btn.borderless {
    border: none;
}
.btn.shadowless {
    box-shadow: none;
}
.btn i {
    padding: 0em 0.3em;
}
.btn i::before, .btn i::after{
    vertical-align: middle;
}
.btn.modo-desa {
    color: var(--color-desa);
    border-color: var(--color-desa);
}

/* UI COMP REPLACEMENT */

/* BTN styles */
/* cancel */
.btn-cancel span {
    color: #7f7f7f;
}
.btn-cancel:hover{
    background: #7f7f7f;
    border: 1px solid #7f7f7f;
}
.btn-cancel:hover span{
    color: #fff;
}
/* delete */
.btn-delete span {
    color: rgb(244, 67, 54);
}
.btn-delete:hover{
    background: rgb(244, 67, 54);
    border: 1px solid rgb(244, 67, 54);
}
.btn-delete:hover span{
    color: #fff;
}

/* MESSAGES */
.ui-messages-info, .ui-messages-warn, .ui-messages-error, .ui-messages-fatal {
    margin: .5em;
    font-size: 1em;
}

.ui-messages-error-icon,
.ui-messages-warn-icon,
.ui-messages-info-icon {
    background: none;
    display: inline-block;
    font: normal normal normal 1rem/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-top: .1em;
    text-align: center;
}

.ui-messages-info-summary, .ui-messages-warn-summary, .ui-messages-error-summary, .ui-messages-fatal-summary,
.ui-message-info-summary, .ui-message-warn-summary, .ui-message-error-summary, .ui-message-fatal-summary {
    margin-left: 0px;
}

.ui-messages-info-icon:before {
    content: "\f05a";
}
.ui-messages-warn-icon:before {
    content: "\f06a";
}
.ui-messages-error-icon:before {
    content: "\f071";
}

/* TABLES */
table{
    font-size: 1em;
}
.ui-datatable thead th {
    border: 1px solid #f7f7f7;
    border: 1px solid var(--page-root);
}
.ui-datatable.tabla-con-filtros thead th {
    text-align: center;
}
.ui-datatable thead th,
.ui-datatable tbody td,
.ui-datatable tbody tr,
.ui-datatable-data.ui-widget-content {
    border: none;
    background: none;
    text-align: center;
    padding: .2em .5em;
}
.ui-datatable thead th.ui-state-default,
.ui-datatable tbody tr.ui-state-default,
.ui-datatable tfoot td.ui-state-default{
    border: none;
}
.ui-datatable thead tr,
.ui-datatable tbody tr,
.ui-datatable tfoot tr {
    border-bottom: 1px solid #eaeaea;
    border-bottom: 1px solid var(--page-outline);
}
.ui-widget-header,
.ui-datatable thead th {
    font-size: 1em;
    color: var(--page-text);
}
.ui-datatable tbody td {
    border-color: inherit;
    font-size: .9em;
}
.ui-datatable tfoot td {
    font-size: 1em;
}
.ui-datatable thead th.col-left, .ui-datatable tbody td.col-left, .ui-datatable tfoot td.col-left, .ui-datatable tbody td.col-left input{
    text-align: left;
}
.ui-datatable thead th.col-right, .ui-datatable tbody td.col-right, .ui-datatable tfoot td.col-right, .ui-datatable tbody td.col-right input{
    text-align: right;
}
.ui-datatable thead th.col-center, .ui-datatable tbody td.col-center, .ui-datatable tfoot td.col-center, .ui-datatable tbody td.col-center input{
    text-align: center;
}

/**
SELECT ONE MENU
**/
.ui-selectonemenu-items-wrapper {
    max-width: 90vw;
    max-height: 80vh;
}
.ui-widget .ui-selectonemenu{
    width: 100%;
    background: none;
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid #dddddd;
    border-bottom: 1px solid var(--page-outline);
}
.ui-widget .ui-selectonemenu .ui-selectonemenu-label{
    border: none;
}
.ui-widget .ui-selectonemenu .ui-selectonemenu-trigger{
    border-left: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-left-color: var(--page-outline);
    border-top-color: var(--page-outline);
    border-right-color: var(--page-outline);
    border-bottom: none;
}


/* CALENDAR */
#ui-datepicker-div{
    border-radius: 3px !important;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(171, 171, 171, 0.4);
}
.ui-datepicker .ui-datepicker-header {
    background: transparent;
    border: 0px;
}
.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev{
    top: 4px;
}
.ui-datepicker-month, .ui-datepicker-year {
    border-radius: 2px !important;
    border: 1px solid #eee;
    border: 1px solid var(--page-root);
    padding: 3px;
}
#ui-datepicker-div .ui-datepicker-month {
    margin-right: 1% !important;
}
#ui-datepicker-div .ui-datepicker-year {
    margin-left: 1% !important;
}
.ui-datepicker th {
    font-size: 1em;
    color: #5d5d5d;
}
.ui-datepicker td span, .ui-datepicker td a {
    height: 2em;
    line-height: 2em;
    width: 2em;
    text-align: center !important;
    padding: 0px !important;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    background: transparent !important;
    border: 0px !important;
    color: #828282 !important;
    font-weight: normal !important;
    font-size: 1em;
}
.ui-datepicker td span, .ui-datepicker td a:hover{
    background: #eee !important;
    background: var(--page-root) !important;
}
.ui-datepicker td span, .ui-datepicker td a.ui-state-highlight{
    border: 1px solid #DADADA !important;
}
.ui-datepicker td span, .ui-datepicker td a.ui-state-active{
    /* border: 1px solid #FF0084 !important; */
    background: #FF0084 50% 50% repeat-x !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
}

/* OTHERS */
.ui-widget-header {
    border: 1px solid #eaeaea;
    border: 1px solid var(--page-outline);
    background: #eee;
    background: var(--page-root);
}
.ui-widget-content {
    color: var(--page-text);
    background-image: none;
    background-color: var(--page-background);
    border-color: var(--page-outline);
    border-radius: 0px;
}
.ui-widget-content a{
    color: var(--page-text);
}
.ui-dialog-content {
    max-height: calc( 100vh - 40px );
}
.ui-button-text{
    font-size: 1em;
}

.ui-widget.ui-button{
    padding: 0.5em;
    border-radius: 0.5em;
    box-shadow: 1px 1px 1px var(--color);
    letter-spacing: 0.05em;
}
.ui-widget.ui-button:hover{
    cursor: pointer;
}
.ui-widget.ui-button.ui-spinner-button{
    padding: 0px;
}
.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield, .ui-widget-content .ui-inputfield.ui-state-focus, .ui-widget-header .ui-inputfield.ui-state-focus {
    box-shadow: none;
    background-color: var(--page-background);
}
.ui-paginator .ui-paginator-current, .ui-paginator .ui-paginator-rpp-options{
    width: fit-content;
}
.ui-layout-unit{
    z-index: auto;
}
.ui-menu .ui-menuitem-link{
    width: 100%;
}
.ui-radiobutton-icon {
    margin: -1px 0px;
}
.ui-selectoneradio label {
    margin: 0 8px 0 8px;
}
/* END UI COMP REPLACEMENT */

/**
** LOADING-BLOCK
**/

.loading-block ~ div {
    background: transparent;
    border: 0px;
    box-shadow: none;
}
.loading-block ~ div span{
    white-space: nowrap;
    font-size: 1em;
}

.dialogo-manual{
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 100;
}
.dialogo-manual-panel{
    position: relative;
    margin: 50vh 15vw;
    transform: translateY(-50%);
}

/**
** PANELES
**/
.panel-contenedor{
    margin: .6rem .3rem;
}
.panel-controles{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 1em 0em;
}
.panel-guardar-cancelar{

}

/**
** MENU SUPERIOR
**/
.menu-superior {
    display: flex;
    overflow: auto;
    flex-shrink: 0;
    background-color: #5b7f95; /* Fix IE */
    background-color: var(--color);
    color: var(--color-blanco);
    box-shadow: 0 2px 4px -2px var(--page-shadow);
}
.menu-superior .menu-div{
    display: flex;
    align-items: center;
}
.menu-superior .menu-bio{
    background: #ffffff; /* FIX IE */
    background: linear-gradient( 90deg, var(--page-background) 12%, var(--page-root) 98%, var(--color));
    color: #5b7f95; /* Fix IE */
    color: var(--page-text);
    padding: 0.1em 0.5em 0.1em 0;
}
.menu-superior .menu-left{
    margin: 0px auto 0px 0px;
}
.menu-superior .menu-right{
    margin: 0px 0px 0px auto;
}
.menu-superior .hover:hover{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background-color: #334854; /* Fix IE */
    background-color: var(--color-oscuro);
}
.menu-superior label {
    font-weight: bold;
}
.menu-superior .menu-elemento{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.2em 1em;
    text-align: center;
    height: 100%;
}
.menu-superior .menu-bio .menu-elemento{
    text-align: left;
    align-items: flex-start;
    overflow: hidden;
    white-space: nowrap;
    max-width: 20vw;
}
.menu-superior .menu-bio .menu-elemento:hover{
    max-width: fit-content;
}
.menu-superior .bio {
    display: block;
    padding: 0em 0em 0.1em 0.2em;
}
.menu-superior .menu-elemento a{
    font-weight: bold;
    text-decoration: none;
}
.menu-superior .menu-elemento .ui-widget.ui-button {
    background: transparent;
    border: none;
    -webkit-box-shadow: none;
    font-size: 1em;
    color: #fff;
    color: var(--page-background);
    text-shadow: none;
    text-transform: uppercase;
    box-shadow: none;
    padding: 0px;
    letter-spacing: 0em;
}
.menu-superior .menu-elemento button span,
.menu-superior .menu-elemento .ui-widget.ui-button span,
.menu-superior .menu-elemento a {
    color: #fff;
    color: var(--page-background);
    text-shadow: 1px 1px 2px #000000;
}
.menu-superior .menu-elemento button.modo-desa span,
.menu-superior .menu-elemento .ui-widget.ui-button.modo-desa span,
.menu-superior .menu-elemento a.modo-desa{
    color: #E0E0AA; /* Fix IE */
    color: var(--color-desa);
}
.menu-superior .menu-elemento a, .menu-superior a.menu-elemento, .menu-superior .menu-elemento button, .menu-superior button.menu-elemento,
.menu-superior .menu-elemento .ui-commandlink, .menu-superior .menu-elemento.ui-commandlink{
    height: 100%;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}
.menu-superior .menu-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    text-transform: uppercase;
    padding: 0em 1em;
}
.menu-superior .menu-link *{
    padding: 0em 0.2em;
}

/**
** MENU NAVEGACIÓN
**/
.menu-navegacion {
    padding: 6px 3px 0px 3px;
    font-size: 1em;
}
.menu-navegacion .menu-bread {
    padding: 5px 5px 7px 10px;
    font-size: 1em;
}

/**
** MENU LATERAL
**/
.menu-lateral{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.menu-lateral .elemento{
    display: flex;
    flex-direction: row;
    padding: 0.2em 0.3em;
    margin: 0.2em 0em;
}

/**
** BOTONES Y ENLACES
**/

.enlace, .enlace.ui-commandlink, .enlace-destacado, .enlace-destacado.ui-commandlink{
    font-size: 1em;
    cursor: pointer;
    color: #0060C0; /** Fix IE **/
    color: var(--azul-enlace);
    text-shadow: 1px 1px var(--page-background);
    transition: text-shadow 100ms ease-in-out;
}
.enlace, .enlace.ui-commandlink{
    text-shadow: 1px 1px var(--page-background);
}
.enlace-destacado, .enlace-destacado.ui-commandlink{
    font-weight: bold;
    text-shadow: 1px 1px var(--page-shadow);
}
.enlace label, .enlace.ui-commandlink label, .enlace-destacado label, .enlace-destacado.ui-commandlink label{
    cursor: pointer;
}
.enlace:hover, .enlace.ui-commandlink:hover, .enlace-destacado:hover, .enlace-destacado.ui-commandlink:hover{
    text-shadow: 1px 1px var(--page-shadow);
}
.enlace-con-resultados .enlace{
    padding: 0em 0.5em;
}

/**
** DROPPABLE
**/
.droppable{

}
.droppable .dragging:hover{
    cursor: pointer;
    background-color: #F0F0AF;
}

/**
** HOVERABLE
**/
.hoverable {
}
.hoverable label {
    position: relative;
    pointer-events:none;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}
/* Cuando está sobre el input, posición normal */
.hoverable label {
    top: 0rem;
}
/* Cuando está en el lugar del input, bajamos 1.1 líneas (este valor cambia para campos, porque su label tiene padding) */
.hoverable.label-hover label {
    top: 1.4em;
    margin: auto 0px 0px 0px;
}

/**
** 
** CAMPOS
**
**/
.campo{
    display: flex;
    flex-direction: row;
}
.campo-addons{
    display: flex;
}
.campo-addon{
    display: flex;
    margin: auto 0px;
    vertical-align: middle;
}
.campo-content{
    display: flex;
    flex-grow: 2;
    width: 100%;
    flex-direction: column;
    padding: 0em 0.2em;
}
.campo-label.ui-state-error {
    color: #dc002e;
    color: var(--error);
    background: none;
}
.campo-control{
    width: 100%;
    flex-direction: row;
}
.campo-control, .campo-control .ui-inputfield, .campo-control.ui-inputfield{
    color: #0073ea;
    color: var(--azul-formulario);
    padding: 1px 2px;
}
.campo-control.ui-state-error, .campo-control.ui-state-error .ui-radiobutton {
    color: #dc002e;
    color: var(--error);
}
.campo-disabled .campo-label{
    opacity: .50;
    filter: Alpha(Opacity=50);
}
.campo-requerido .campo-label{

}
.campo-requerido .campo-label .campo-label-requerido{

}
.campo table td {
    padding: 0px;
}
.campo table tr {
    border-bottom: 0px none;
}
/**
** SELECT
**/
.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
    margin-top: 2px;
    margin-left: 2px;
}
.ui-selectonemenu-trigger.ui-state-default {
    width: 28px;
}
.campo-select{
    padding: 1px 0px 1px 0px;
}
.campo-select > label{
    padding: 1px 30px 1px 4px;
}
.ui-selectonemenu-label {
    min-width: 40px;
}

/**
** TIPOS DE CAMPO
**/
.campo-fecha{
    width: 120px;
}
.campo-spinner{
    width: 120px;
}
.campo-spinner{
    display: inline-flex;
    width: 120px;
    height: 1.5em;
}
.campo-spinner input{
    display: inline-flex;
    width: 100%;
    margin-right: 1em;
    padding-right: 2px;
}
.campo-control input[type="text"].ui-spinner-input {
    padding-right: 1.2em;
    margin-right: 0px;
}
.campo-importe{
    width: 150px;
}
.campo-texto, .campo-password{
    width: 90%;
}
.campo-text-area{

}
.campo-nif{
    width: 110px;
}
.campo-si-no{
    width: 200px;
}
.campo-checkbox{
    text-align: center;
    padding: 0px 10px;
}
.campo-porcentaje{
    width: 80px;
}
.campo-radio-buttons, .campo-output {
    color: inherit;
}
.campo-radio-buttons tr{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.campo-output, .campo-fake {
    padding: 0.10em 0.10em 0.10em 0.20em;
    box-sizing: content-box;
    min-height: 1em;
}

/**
** COMPARACIONES
**/
.campo-comparator{
    width: 40px; /* Margen de 10px */
    height: 30px;
    font-size: 1em;
}
.comparator-div{
    text-align: center;
    margin: auto;
    height: 30px;
    width: 30px;
    font-size: 1em;
}
.campo-comparator button, .comparator-div button{
    padding: 2px 0px;
    height: 30px;
    width: 30px;
}
.campo-comparator .boton-comparacion-same, .comparator-div .boton-comparacion-same{
    color: #10a055;
}
.campo-comparator .boton-comparacion-distinct, .comparator-div .boton-comparacion-distinct{
    color: #a01055;
}
.campo-comparator .boton-comparacion-missing, .comparator-div .boton-comparacion-missing{
    color: #a05510;
}
.campo-comparator .boton-comparacion-new, .comparator-div .boton-comparacion-new{
    color: #a05510;
}
.campo-comparator .boton-comparacion-removed, .comparator-div .boton-comparacion-removed{
    color: #a01055;
}
.campo-comparator .boton-comparacion-question, .comparator-div .boton-comparacion-question{
    color: #a05510;
}
.campo-comparator .boton-comparacion-undo, .comparator-div .boton-comparacion-undo{
    color: #55aa10;
}

/**
** TOOLTIPS
**/

.tooltip-button-div {
    display: inline-flex;
    align-items: center;
}
.tooltip-button.ui-button {
    padding: 0.1em;
    background: transparent;
    border: none;
    box-shadow: none;
}
.tooltip-button.ui-button:hover{
    color: #0073ea; /* Fix IE */
    color: var(--azul-formulario);
}
.tooltip-button.ui-button > .ui-icon{
    font-size: 1em;
    padding: 0px;
    color: rgba(0, 115, 234, 0.75);
}
.tooltip-button.ui-button > .ui-button-text{
    padding: 0px;
}
.tooltip-button.ui-button > .tooltip-content{
    background: transparent;
    font-size: 90%;
    max-width: 80%;
}
.tooltip-frase{
    cursor: pointer;
    color: #0073ea; /* Fix IE */
    color: var(--azul-formulario);
    border-bottom-color: #0073ea; /* Fix IE */
    border-bottom-color: var(--azul-formulario);
    border-bottom-width: 1px;
    border-bottom-style: dashed;
}

/**
** VALIDACIONES
**/
.validacion-ok {
    background: transparent;
    border: 0px;
    color: #44cc44;
    color: var(--confirmation);
}
.validacion-warn {
    background: transparent;
    border: 0px;
    color: #cc742f;
    color: var(--warning);
}
.validacion-error {
    background: transparent;
    border: 0px;
    color: #dc002e;
    color: var(--error);
}
.resultados-icono{
    display: flex;
    margin: auto;
}
.resultados-icono .resultados-i{
    font-size: 120%;
    margin: auto;
}
.resultados-tooltip{
    background: transparent;
    font-size: 80%;
    max-width: 80%;
}

/**
** p:fileUpload, siempre vertical
**/
.ui-fileupload{
    max-width: 100%;
}
.ui-fileupload .ui-fileupload-files{
    display: flex;
    width: 100%;
}
.ui-fileupload .ui-fileupload-files>div{
    display: flex;
    width: 100%;
}
.ui-fileupload .ui-fileupload-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    word-break: break-all;
    width: 100%;
}
.ui-fileupload .ui-fileupload-row>div {
    display: flex;
    padding: 0.5em 1em;
    max-width: 100%;
}
.ui-fileupload .ui-fileupload-progress{
    width: 100%;
}
.ui-fileupload .ui-fileupload-content .ui-progressbar {
    width: 100%;
}

/**
** TABLAS
**/
.table-no-header thead {
    display: none;
}
.table-icon-action, .ui-widget-content .table-icon-action {
    text-decoration: none;
    padding: 5px;
    font-size: 1em;
    text-align: center;
    width: 28px;
    float: left;
}
.table-action-cell, .ui-datatable tbody td.table-action-cell, .ui-datatable thead th.table-action-cell {
    font-size: 2rem;
    width: 1em;
    padding: 0px;
}

.table-icon-action:hover{
    color: #0073ea; /* Fix IE */
    color: var(--azul-formulario);
}
.celda-botones-registro{
    width: 105px;
}

/**
**
**/
.ordenacion-controles{
    display: flex;
    flex-direction: row;
}
.ordenacion-controles .ordenacion-orden{
    display: inline-flex;
    margin: auto 0.8rem;
}
.ordenacion-controles .ordenacion-control{
    display: inline-flex;
    border-radius: 3px;
    border: 1px solid var(--page-outline);
    margin: auto 0.1em;
}
.ordenacion-controles .ordenacion-control a:hover{
    background-color: var(--page-background);
}

/**
** Generadores y otros elementos de Desarrollo
**/

.generador-nif-aleatorio{
    padding: 0em .5em;
    align-items: center;
}
.generador-nif-aleatorio .generador{
    display: flex;
    padding: 0em 0.1em;
}
.generador-nif-aleatorio .generador a{
    color: #0060C0; /** Fix IE **/
    color: var(--azul-enlace);
    font-size: 1.2em;
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
    background-color: var(--color-desa);
}
.generador-nif-aleatorio .generador a:hover{
    box-shadow: 0px 0px 2px 1px var(--azul-enlace);
}

/**
** UTILIDADES
**/
.centro, button.centro, .ui-menu .ui-menuitem-link.centro {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.negrita, .ui-menu .ui-menuitem-link.negrita{
    font-weight: bold;
}
.ancho, .ui-menu .ui-menuitem-link.ancho, .ui-widget-header.ancho,
.ui-menu .ui-menu-list .ui-widget-header.ancho{
    width: 100%;
}
.alto{
    height: 100%;
}
.grow{
    flex-grow: 1;
}
.autofit{
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}
.nowrap {
    text-overflow: ellipsis;
    white-space: nowrap;
}
.espacio::before{
    content: ' ';
}
.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
}
.flex{
    display: flex;
    align-items: center;
}
.flex-row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.flex-column{
    display: flex;
    flex-direction: column;
}
.flex-row.wrap, .flex-column.wrap{
    flex-wrap: wrap;
    row-gap: 1em;
    column-gap: 1em;
}
.flex-cell-fija{
    display: flex;
    flex-grow: 0;
    margin: auto;
}
.flex-cell-variable{
    display: flex;
    flex-grow: 1;
    margin: auto;
}
.modo-desa,
.ui-widget.ui-button.modo-desa,
.ui-widget.ui-button.modo-desa span,
.modo-desa .ui-column-title,
a.modo-desa{
    color: #E0E0AA; /* Fix IE */
    color: var(--color-desa);
}
.modo-desa-invertido {
    color: var(--color-oscuro);
    background-color: var(--color-desa);
}

.ui-widget.ui-button.modo-desa span.ui-button-icon-left.ui-icon{
    filter: contrast(0) sepia(100%) hue-rotate(30deg) brightness(1.5) saturate(0.9);
}
.rojo, .ui-menu .ui-menuitem-link.rojo{
    color: var(--rojo-ivace);
}
.pointer, .pointer *{
    cursor: pointer;
}
.centro-vertical{
    margin: auto 0px;
}
.centro-horizontal{
    margin: 0px auto;
    text-align: center;
}
.borderless{
    border: none;
}
.sombra-ui {
    box-shadow: 0 10px 20px rgba(0,0,0,0.10), 0 6px 6px rgba(0,0,0,0.12);
}

@media screen and (max-width: 576px) {
  .hide-xs {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .hide-s,
  .hide-sm {
    display: none !important;
  }
}
@media screen and (max-width: 992px) {
  .hide-m,
  .hide-md {
    display: none !important;
  }
}
@media screen and (max-width: 1200px) {
  .hide-l,
  .hide-lg {
    display: none !important;
  }
}
@media screen and (max-width: 1400px) {
  .hide-xl{
    display: none !important;
  }
}

.m00{
    margin: 0em;
}
.m11{
    margin: 1em;
}
.m10{
    margin: 1em 0em;
}
.m01{
    margin: 0em 1em;
}
.m55{
    margin: 0.5em;
}
.m50{
    margin: 0.5em 0em;
}
.m05{
    margin: 0em 0.5em;
}
.m51{
    margin: 0.5em 1em;
}
.m15{
    margin: 1em 0.5em;
}
.p00{
    padding: 0em;
}
.p11{
    padding: 1em;
}
.p10{
    padding: 1em 0em;
}
.p01{
    padding: 0em 1em;
}
.p55{
    padding: 0.5em;
}
.p50{
    padding: 0.5em 0em;
}
.p05{
    padding: 0em 0.5em;
}
.p51{
    padding: 0.5em 1em;
}
.p15{
    padding: 1em 0.5em;
}

.m-1{
  margin: 1em;
}
.m-5{
  margin: 0.5em;
}
.m-0{
  margin: 0em;
}
.m-auto{
  margin: auto;
}
.mt-1{
  margin-top: 1em;
}
.mt-5{
  margin-top: 0.5em;
}
.mt-0{
  margin-top: 0em;
}
.mt-auto{
  margin-top: auto;
}
.mb-1{
  margin-bottom: 1em;
}
.mb-5{
  margin-bottom: 0.5em;
}
.mb-0{
  margin-bottom: 0em;
}
.mb-auto{
  margin-bottom: auto;
}
.ml-1{
  margin-left: 1em;
}
.ml-5{
  margin-left: 0.5em;
}
.ml-0{
  margin-left: 0em;
}
.ml-auto{
  margin-left: auto;
}
.mr-1{
  margin-right: 1em;
}
.mr-5{
  margin-right: 0.5em;
}
.mr-0{
  margin-right: 0em;
}
.mr-auto{
  margin-right: auto;
}
.mx-1{
  margin-left: 1em;
  margin-right: 1em;
}
.mx-5{
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.mx-0{
  margin-left: 0em;
  margin-right: 0em;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-1{
  margin-top: 1em;
  margin-bottom: 1em;
}
.my-5{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.my-0{
  margin-top: 0em;
  margin-bottom: 0em;
}
.my-auto{
  margin-top: auto;
  margin-bottom: auto;
}

.p-1{
  padding: 1em;
}
.p-5{
  padding: 0.5em;
}
.p-0{
  padding: 0em;
}
.pt-1{
  padding-top: 1em;
}
.pt-5{
  padding-top: 0.5em;
}
.pt-0{
  padding-top: 0em;
}
.pb-1{
  padding-bottom: 1em;
}
.pb-5{
  padding-bottom: 0.5em;
}
.pb-0{
  padding-bottom: 0em;
}
.pl-1{
  padding-left: 1em;
}
.pl-5{
  padding-left: 0.5em;
}
.pl-0{
  padding-left: 0em;
}
.pr-1{
  padding-right: 1em;
}
.pr-5{
  padding-right: 0.5em;
}
.pr-0{
  padding-right: 0em;
}
.px-1{
  padding-left: 1em;
  padding-right: 1em;
}
.px-5{
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.px-0{
  padding-left: 0em;
  padding-right: 0em;
}
.py-1{
  padding-top: 1em;
  padding-bottom: 1em;
}
.py-5{
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.py-0{
  padding-top: 0em;
  padding-bottom: 0em;
}

.ta-left{
  text-align: left;
}
.ta-right{
  text-align: right;
}
.ta-center{
  text-align: center;
}

.hh:hover, .hover:hover, tr.hh:hover, tr.hover:hover td {
  background-color: var(--color-hover);
}
.hh-invertido:hover {
  color: var(--page-background);
  background-color: var(--color);
}
.hh-invertido-oscuro:hover {
  color: var(--page-background);
  background-color: var(--color-oscuro);
}

.color-fondo {
  color: var(--color-fondo);
}
.bg-fondo {
  background-color: var(--color-fondo);
}
.border-fondo {
  border-color: var(--color-fondo);
}
.hh-fondo:hover {
  background-color: var(--color-fondo);
}
.color-claro {
  color: var(--color-claro);
}
.bg-claro {
  background-color: var(--color-claro);
}
.border-claro {
  border-color: var(--color-claro);
}
.hh-claro:hover {
  background-color: var(--color-claro);
}
.color-color {
  color: var(--color);
}
.bg-color {
  background-color: var(--color);
}
.border-color {
  border-color: var(--color);
}
.hh-color:hover {
  background-color: var(--color);
}
.color-oscuro {
  color: var(--color-oscuro);
}
.bg-oscuro {
  background-color: var(--color-oscuro);
}
.border-oscuro {
  border-color: var(--color-oscuro);
}
.hh-oscuro:hover {
  background-color: var(--color-oscuro);
}
.color-error {
  color: var(--error);
}
.bg-error {
  background-color: var(--error-fondo);
}
.border-error {
  border-color: var(--error);
}
.color-warning {
  color: var(--warning);
}
.bg-warning {
  background-color: var(--warning-fondo);
}
.border-warning {
  border-color: var(--warning);
}
.color-confirmation {
  color: var(--confirmation);
}
.bg-confirmation {
  background-color: var(--confirmation-fondo);
}
.border-confirmation {
  border-color: var(--confirmation);
}

.hh-shadow{
    transition: box-shadow 200ms ease-in-out;
}
.hh-shadow:hover{
    box-shadow: 0px 0px 0.2em 1px var(--page-shadow);
}
.hh-scale:hover {
    transform: scale(1.1);
    letter-spacing: 0.05em;
}