html, body, #pagina {
    font-family: Open Sans, Arial;
    color: #333;
}

#pagina {
    width: 100%
}

.seccion {
    padding: 0.2em
}

#cabecera {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: right;
    width: 100%;
    background: #3473A9;
    border-bottom: 1px solid #305F8B;
    -webkit-box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.35);
    box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.35);
    color: #FFF
}

#cabecera a {
    color: #eeeeec
}

#cabecera #logos {
    clear: both;
    margin: 1em auto
}

#cabecera select {
    color: rgba(255, 255, 255, .5);
    background: #3473A9;
    border: 0;
    font-size: 80%;
    margin-top: .7rem;
    margin-right: 1rem;
}

#logoHospital, #logoSAS {
    float: left;
    margin-left: 5em
}

#logoJunta {
    float: right;
    margin-right: 5em
}

#contenido {
    width: 100%;
    min-height: 500px
}

#wrapperContenido {
    padding: 1em;
    min-height: 500px
}

#menu {
    text-align: right;
    width: 100%;
    font-size: small
}

#menu ul li {
    display: inline;
    margin-bottom: 1em;
    margin-right: 3em
}

#menu ul li#nombreUsuario {
    margin-right: 5em
}

#titulos {
    font-size: 16px;
    border-bottom: 1px solid #C5D4DF;
    padding: 0.4em 0em 0.4em 1em;
}

#cabeceraSeccion {
    color: #3473A9;
    font-weight: bold;
}

#subtitulo {
    font-size: 11px;
    text-transform: uppercase;
    color: #91B0C4;
    font-weight: 600;
    margin: 0
}

#logoInicio {
    display: block;
    margin-left: auto;
    margin-right: auto
}

#txtActualizar {
    margin-left: 1em
}

.mensajeError {
    color: #900;
    padding: 0.2em 0.2em 0.2em 1.5em;
    background: url("/qcoma/javax.faces.resource/hvn/img/error.png.xhtml") no-repeat top left
}

/* No me gusta el resaltado azul de las celdas cuando se editan */
#contenido tr.ui-state-highlight {
    background: none;
    color: #333
}

#contenido .tablasinborde td {
    border: 0;
}

.ui-icon-gris {
    background-image: url("/qcoma/javax.faces.resource/hvn/img/ui-icons_cccccc_256x240.png.xhtml") !important
}

/* El widget con el que se selecciona la hora de administracion es demasiado ancho */
.ui-datatable .hasDatepicker {
    display: block !important;
    margin: auto !important;
    width: 100px !important;
}

a:hover {
    text-decoration: none !important
}

#contenido fieldset {
    border-radius: 0
}

#contenido legend {
    font-size: 12px;
    margin-bottom: 1px;
    margin-left: -16px;
    border-radius: 0
}

#contenido fieldset td {
    text-align: left
}

.botones {
    display: block;
    float: right
}

.botones .ui-button {
    margin-right: 1em
}

.colOpciones button {
    width: 5em !important
}

.colOpciones button span {
    padding: 0 !important
}

.btnMargen {
    margin-right: 0.1em
}

fieldset.ui-fieldset {
    margin-bottom: 1em
}

.mensajeError {
    margin-bottom: 3em
}

.detallesError td {
    vertical-align: top
}

.enlaceResaltado {
    font-weight: bold
}

.oculto {
    display: none
}

/* Por defecto el color del texto en un campo erroneo se pone a blanco con fondo blanco */
.ui-state-error {
    color: #333 !important
}

.btn-group > .btnSala > .ui-button {
    font-size: 14px;
    margin-right: 1em;
}

#formPlanificacion .btn-group {
    margin-bottom: 2em
}

/* Boton activo */
.ui-button.active {
    background: #E5E5E5 none;
}

.ui-datatable td.columnaEquipo td {
    border: 0;
    text-align: center
}

button {
    outline: none !important
}

#contenido label {
    margin-bottom: 0
}

.notificacion {
    background: #CC0000;
    border-radius: 11px;
    box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset, 0 1px rgba(0, 0, 0, 0.2);
    color: #ffe3e3;
    display: inline-block;
    font-size: 11px;
    line-height: 16px;
    padding: 0 5px;
    text-shadow: 0 1px #902A27;
    vertical-align: text-top;
    position: absolute;
    margin-top: -8px;
    z-index: 10;
    float: left;
    right: 0.4em
}

.colPreferencia a, .colPreferencia div {
    float: left
}

.textoAntesIcono {
    display: block;
    float: left;
    min-width: 1.1em;
    text-align: right;
    margin-right: .3em;
}

.tablaAgendas {
    vertical-align: middle;
    margin-bottom: 3px
}

.columnaEstado {
    width: 5.5em !important
}

.columnaEstado div {
    width: 5em;
    height: .75em;
    border-radius: 3px;
    margin: 0 auto;
    padding: 0
}

.celdaAjusteContenido {
    width: 1%;
    white-space: nowrap;
    text-align: center
}

.tablaPromos, .tablaMensajes {
    width: 100%
}

.tablaPromos .ui-orderlist-controls, .tablaMensajes .ui-orderlist-controls {
    width: 3em
}

.tablaPromos .ui-orderlist-list, .tablaMensajes .ui-orderlist-list {
    width: 100% !important;
    height: 100% !important
}

.advertenciaInline {
    background-color: #FDF7F7;
    border-left: 3px solid #D9534F;
    margin: 0 0 20px;
    padding: 20px;
}

.advertenciaInline h4 {
    color: #D9534F;
    margin-bottom: 5px;
    margin-top: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
}

.imagenAmpliada .ui-dialog-titlebar {
    background-color: #CCC !important
}

.ui-tooltip {
    background-image: linear-gradient(to bottom, #f9f9f9, #f6f6f6) !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1) !important;
    color: #5c5c5c !important;
    font-size: 14px !important;
    padding: 30px 20px !important;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.formularioTabulado label {
    width: 8em
}

.dialogoCargando {
    text-align: center
}

.dialogoCargando span {
    font-size: 12px
}

.dialogoCargando .ui-dialog-titlebar {
    display: none
}

.ui-tabs .ui-tabs-nav li {
    border: 1px solid #dfdfdf !important;
    border-bottom-color: transparent !important;
    border-top-right-radius: 4px !important;
    border-top-left-radius: 4px !important;
    background: #f5f5f5 -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) repeat scroll 0 0 !important;
    color: #4f4f4f !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    border-color: transparent !important
}

.ui-tabs .ui-tabs-nav li a {
    outline: 0
}

.ui-outputlabel {
    width: 10em
}

.imprimir {
    display: none
}

/*
 * Un bug en Primefaces hace que los divs que emulan los checkboxes de selectManyMenu no tengan la clase ui-state-active
 * cuando están seleccionados, pero cada una de las filas de la tabla sí tienen un ui-state-highlight
 */
.ui-state-highlight div.ui-chkbox-box {
    background: #e6e6e6 none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    outline: 0 none;
}

.tablaArbol {
    border: 0
}

.tablaArbol th {
    display: none
}

.externoColBoton {
    padding: 0
}

.externoColEmpresa {
    width: 100%;
    padding: 0
}

/*
 * Muestra un icono de marcado en los checkboxes seleccionados
 */
#contenido span.ui-icon-check {
    background-image: url(/qcoma/javax.faces.resource/hvn/img/ui-icons_333333_256x240.png.xhtml) !important;
    background-position: -64px -144px
}

#contenido .ui-state-highlight .ui-icon {
    background-image: url(/qcoma/javax.faces.resource/hvn/img/ui-icons_333333_256x240.png.xhtml) !important;
}

#contenido .gruposDmsas div {
    border: 0
}

#contenido .gruposDmsas ol {
    list-style: inside none disc;
    padding: 0
}

.tablaFormulario td {
    vertical-align: top
}

/*
 * El botón para desplegar los select aparece con doble borde y con el icono sin centrar
 */
#contenido .ui-selectonemenu .ui-selectonemenu-trigger {
    padding: 3px 7px;
    width: 32px
}

/*
 * El desplegable del select muestra una barra de desplazamiento horizontal
 */
.ui-selectonemenu-panel .ui-selectonemenu-list {
    margin-right: .4em !important
}

.selectCategoria {
    min-width: 24em
}

#contenido .ui-tree {
    width: 100%
}

#contenido .btnOperador {
    -webkit-border-top-right-radius: 0;
    -moz-border-top-right-radius: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0
}

#contenido .btnProfesional {
    -webkit-border-top-left-radius: 0;
    -moz-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
    margin-left: 0;
    margin-right: 1em
}

.modulosMaco ul, .aplicacionesExternas ul {
    list-style: none;
    padding-left: 0
}

/* Estilo del botón marcado con mayor acento */
.ui-button.ui-state-active {
    background-color: #1484e6;
    outline: 0;
    border: 1px solid #0059b3;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    font-weight: bold;
}

.desplegableDmsas {
    width: 100% !important
}

.desplegableDmsas .ui-selectlistbox-listcontainer {
    height: 385px !important
}

.app-header-logout {
    display: table-cell;
    width: 41px;
    border-left: 1px solid #346EA1;
    font-size: 20px;
    text-align: center;
    vertical-align: middle;
    color: #C4D6E6;
    text-decoration: none
}

#contenido .ui-tabs .ui-tabs-nav.ui-widget-header li a {
    color: #3473A9
}

#contenido .ui-accordion .ui-accordion-header.ui-state-default a {
    color: #3473A9
}

#contenido .ui-breadcrumb a {
    color: #3473A9
}

#contenido .ui-panelmenu .ui-panelmenu-header a {
    color: #3473A9
}

#contenido .ui-button {
    font-size: 12px
}

/* Botón principal de la pantalla */
#contenido .ui-priority-primary {
    background-image: linear-gradient(to bottom, #3473a9 0%, #2d6593 100%)
}

#contenido .ui-inputfield {
    font-size: 14px;
    padding: 2px 10px

}

#contenido .ui-widget {
    font-size: 1em
}

/* Ajustar ancho de las columnas al contenido */
.ui-datatable table {
    table-layout: auto !important
}

/* Modifica color del placeholder de los campos de entrada */
::-webkit-input-placeholder {
    color: #c4d6e6
}

::-moz-placeholder {
    color: #c4d6e6
}

::-ms-placeholder {
    color: #c4d6e6
}

::placeholder {
    color: #c4d6e6
}

/* Corrige estilo del tooltip */
.ui-tooltip {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important
}

.ui-tooltip .ui-tooltip-text {
    margin-right: -15px !important
}

#pie {
    text-align: right;
    color: #AAA;
    margin-top: 2em;
    margin-right: 1em;
    font-size: small
}

.columnaEstado {
    width: 5.5em !important
}

.columnaEstado .leyendaPendiente, .columnaEstado .leyendaIniciado, .columnaEstado .leyendaCompletado {
    width: 4em;
    height: .75em;
    border-radius: 3px;
    float: left
}

.leyendaPendiente {
    background-color: #888a85;
    float: left
}

.leyendaIniciado {
    background-color: #75507b;
    float: left
}

.leyendaCompletado {
    background-color: #4e9a06;
    float: left
}

.avatar {
    width: 50px;
    height: 50px;
    margin: 8px auto;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}

.avatar img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75px
}

.avatarPrimero {
    width: 70px;
    height: 70px;
    margin: 11px auto;
}

.avatarPrimero img {
    width: 90px
}

.imagenUltimoUsuario {
    width: 100px;
    float: left;
    padding: 4px;
    border: 1px solid #ccc;
    margin-right: 1em
}


.card {
    border: 3px solid #fff;
    box-shadow: 0px 5px 5px 0px rgba(41, 42, 51, 0.2);

    /*border: 1px solid #CCC;*/
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    border-radius: .25rem;
    word-wrap: break-word;
}

.card .body {
    overflow: hidden;
    font-weight: 400;
    border-radius: .35rem;
    font-size: 14px;
    color: #222;
    padding: 20px;

}

.mcard_4 .img {
    text-align: right;
    float: right;
}

.mcard_4 .img img {
    margin-right: -80px;
    margin-top: -90px;
    max-width: 250px;
    max-height: 250px;
}

.rounded-circle {
    border-radius: 50% !important;
}

.mcard_4 .img {
    text-align: right;
}