/*
    ESTRUCTURA DEL CSS
    ------------------
    1.  RESET & BASICOS
    2.  LAYOUT (HEADER, BODY, FOOTER)
    3.  TIPOGRAFIA (H1, H2, P, etc.)
    4.  FORMULARIOS (INPUTS, TEXTAREA, ETC)
    5.  BOTONES
    6.  GRIDS (WIJMO, C1GRID)
    7.  COMPONENTES (PANELES, MODALES, MENUS, TABS, ACORDIONES)
    8.  CLASES DE UTILIDAD (ESPACIOS, MARGENES, ALINEACION, COLORES)
    9.  MEDIA QUERIES
*/

/* 1. RESET & BASICOS
-------------------------------------------------- */
body, html, form {
    padding: 0 !important;
    margin: 0 !important;
}

body {
    background-color: #494949;
    font-size: 15px;
}

/* 2. LAYOUT
-------------------------------------------------- */
.body-content {
    background-color: #f9f9f9;
    -webkit-box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.75);
    padding: 0;
}

header {
    background-color: #000;
    margin: 0;
}

header .body-content {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.header-content {
    padding: 0;
    max-width: 1300px;
}

header .container {
    position: relative;
}

.container {
    margin-top: 0;
}

footer {
    bottom: 0;
    position: fixed;
    background-color: #dfdfdf;
    padding: 2px;
    font-size: 12px;
    margin: 0 auto !important;
    max-width: 1300px !important;
}

footer span {
    margin: 0;
    padding: 0;
}

.pie-content {
    width: 1300px;
}

.pie-content .row {
    margin-left: 0;
    margin-right: 0;
}

/* 3. TIPOGRAFIA
-------------------------------------------------- */
h1, h2 {
    display: inline-block;
    color: #ffffff;
    padding: 5px;
    font-size: 24px;
    margin: 0;
}

h3 {
    display: block;
    font-size: 24px;
    color: #292929;
}

h4 {
    display: block;
    font-size: 18px;
    color: #751500;
}

/* 4. FORMULARIOS
-------------------------------------------------- */
input[type=text], input[type=number], input[type=password], input[type=date], textarea, input[type=email], input[type=tel] {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #DDDDDD;
}

input[type=text]:focus, input[type=number]:focus, input[type=date]:focus, input[type=password]:focus, textarea:focus, input[type=email]:focus, input[type=tel]:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #0087D3;
    background-color: #fdfeca;
}

input[type=text]:disabled, input[type=number]:disabled, input[type=password]:disabled, input[type=date]:disabled, textarea:disabled, input[type=email]:disabled, input[type=tel]:disabled {
    font-weight: bold !important;
}

input[readonly] {
    background-color: #fffce0;
    pointer-events: none;
}

.formulario {
    background-color: #e4e4e4;
}

.cod-expediente {
    display: inline-block;
    min-width: 70px !important;
    text-align: center;
    padding: 2px 5px;
    margin-top: 3px;
    background-color: #f9f9f9;
    color: #000;
    border: 1px solid #9f9f9f;
    min-height: 28px !important;
    border-radius: 3px;
}

.aspNetDisabled, .cod-expediente:read-only {
    padding: 2px 5px;
    color: #292929 !important;
    background-color: #dfdfdf !important;
    background-image: linear-gradient(to top, #EAEAEA 0%, #FEFEFE 51%, #EAEAEA 100%);
    border: 1px solid #ccc;
    vertical-align: middle;
    min-height: 28px !important;
}

.aspNetDisabled label {
    margin-bottom: 0;
}

.obligatorio {
    border: 1px solid #FF5252 !important;
}

.opcional {
    border: 1px solid #FFA000 !important;
}

.busqueda {
    background-color: #f0f0f0;
    color: #292929;
    font-size: 13px;
    padding-left: 10px !important;
    margin: 0 3px 0 1px;
}

.busqueda-historial {
    background-color: #fdfdfd;
    padding: 0 7px;
    height: 18px !important;
    border-radius: 30px;
    color: #dfdfdf;
}

.columnas {
    box-sizing: content-box;
}

.columnas span {
    width: 10% !important;
    display: inline-block;
}

.columnas input[type=text], .columnas input[type=number], .columnas input[type=date], .columnas select, .columnas textarea {
    width: 20% !important;
    display: inline-block;
}

.txt-observacion {
    width: 75% !important;
}

/* 5. BOTONES
-------------------------------------------------- */
.boton {
    display: inline-block;
    border-radius: 3px;
    font-size: 15px;
    min-width: 20px !important;
    box-shadow: 0px 0px 2px 3px rgba(50,50,50,.05), inset -1px -2px 1px 2px rgba(0,0,0,.4);
    padding: 1px 12px 7px 8px;
    margin-left: 1px;
    margin-right: 1px;
    cursor: pointer;
    color: #fdfdfd !important;
    text-decoration: none !important;
    transition: all 0.2s ease 0s;
    vertical-align: bottom;
    border-bottom: 2px solid rgba(50,50,50,.6);
    -webkit-transition: all 0.5s;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.boton i {
    font-size: 14px !important;
    margin: 0 2px;
}

.boton:hover {
    color: #ffffff;
    border-top: 1px solid #000;
    padding: 2px 12px 6px 8px;
    box-shadow: 0px 0px 1px 2px rgba(50,50,50,.05), inset -1px -2px 2px 1px rgba(0,0,0,.3);
}

.boton:active {
    box-shadow: 0px 0px 1px 1px #101010, inset -1px -2px 2px 1px rgba(0,0,0,.4);
    transition: all 0.1s ease 0s;
    border-bottom: 1px solid #000;
}

.solo-icono {
    text-align: center !important;
    padding: 5px 10px !important;
    vertical-align: middle !important;
}

.solo-icono i {
    margin-bottom: 5px !important;
}

.separar-boton {
    margin-left: 30px !important;
}

.separar-boton2 {
    margin-left: 90px !important;
}

/* COLORES BOTONES */
.azul {
    background-image: linear-gradient(to top, #0f758b 0%, #1fc9d0 51%, #0f758b 100%);
    border-top: 1px solid #0b0e07;
}

.azul:hover {
    background-image: linear-gradient(to right, #1fc9d0 0%, #0f758b 51%, #1fc9d0 100%);
}

.azul:hover > .boton i {
    color: #ffffff;
}

.naranja {
    background-image: linear-gradient(to top, #d36600 0%, #e98c00 51%, #d36600 100%);
    border-top: 1px solid #0b0e07;
}

.naranja:hover {
    background-image: linear-gradient(to right, #d36600 0%, #e98c00 51%, #d36600 100%);
}

.naranja:hover > .boton i {
    color: #ffffff;
}

.celeste {
    background: linear-gradient(to top, #1fc9d0 5%, #0f758b 100%);
    background-color: #1fc9d0;
    border-top: 1px solid #0b0e07;
    color: #ffffff;
}

.celeste:hover {
    background: linear-gradient(to right, #1fc9d0 5%, #0f758b 51%, #1fc9d0 100%);
    background-color: #0688fa;
}

.verde {
    background-image: linear-gradient(to top, #007541 0%, #009f59 51%, #007541 100%);
    border-top: 1px solid #006337;
}

.verde:hover {
    background-image: linear-gradient(to right, #007541 0%, #009f59 51%, #007541 100%);
}

.verde:hover > .boton i {
    color: #ffffff;
}

.rojo {
    background-image: linear-gradient(to top, #D32F2F 0%, #F44336 51%, #D32F2F 100%);
    border-top: 1px solid #006337;
}

.rojo:hover {
    background-image: linear-gradient(to right, #D32F2F 0%, #F44336 51%, #D32F2F 100%);
}

.rojo:hover > .boton i {
    color: #ffffff;
}

.negro {
    background-image: linear-gradient(to top, #696969 0%, #292929 51%, #696969 100%);
    border-top: 1px solid #0b0e07;
}

.negro:hover {
    background-image: linear-gradient(to right, #292929 0%, #696969 51%, #292929 100%);
}

.negro:hover > .boton i {
    color: #ffffff;
}

/* 6. GRIDS
-------------------------------------------------- */
.c1-c1gridview-selectedrow {
    background-color: #61b4c2 !important;
    color: #fff !important;
    background-image: none !important;
    font-weight: bold !important;
    border: 1px solid #000 !important;
}

.c1-c1gridview-selectedrow i {
    color: #069;
}

.wijmo-wijgrid {
    height: auto !important;
}

.c1gridview-marker {
    box-sizing: border-box;
    width: 100% !important;
}

.wijmo-wijgrid-scroller {
    min-height: 20vh;
    max-height: 30vh;
}

.wijmo-wijgrid .ui-state-highlight, .wijmo-wijgrid .ui-state-highlight td {
    border-top-width: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-bottom-width: 0 !important;
    border: none;
}

.grid-header .wijmo-wijgrid-headertext {
    padding: 5px !important;
    margin: 0;
    font-size: 12px;
}

.wijmo-wijgrid-row {
    font-size: 12px;
}

table tr:hover {
    background: none !important;
    background-color: #cfd8dc !important;
    color: #000 !important;
    border-color: #292929 !important;
}

.GridPage {
    font-size: 12px;
}

.wijdata-type-datetime, .wijdata-type-number {
    text-align: center !important;
}

.scroll-horizontal {
    width: 1300px !important;
    overflow-x: auto;
    -moz-box-sizing: inherit !important;
    -webkit-box-sizing: inherit !important;
    box-sizing: inherit !important;
}

.scroll-horizontal .wijmo-wijgrid {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.wijmo-wijgrid .wijmo-wijgrid-innercell {
    padding: 5px 7px !important;
    white-space: normal;
}

/* 7. COMPONENTES
-------------------------------------------------- */
/* PANELES */
.panel {
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    background-color: #f9f9f9;
    padding: 0;
    vertical-align: top !important;
}

.panel-limpio {
    box-sizing: border-box;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    background-color: #f9f9f9;
    padding: 0;
}

.centrarPanel {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    min-width: 250px;
}

/* MODALES Y LOADING */
.modal {
    background-color: rgba(0,0,0,.8);
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.modal-contenido {
    background-color: #fdfdfd;
    width: 1200px;
    padding: 22px 30px;
    margin: 2% auto;
    position: relative;
    top: 0px;
    left: 0px;
    height: auto;
}

.loading {
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid #67CFF5;
    width: 200px;
    height: 190px;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
}

/* MENU PRINCIPAL */
#M_Principal {
    color: #fff;
}

header .logo-menu {
    display: inline-block;
    position: absolute;
    border-radius: 5px;
    padding-left: 20px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    background-color: #f9f9f9;
    width: auto;
    right: 0;
    top: 15px;
}

.MenuP {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
}

.MenuP a {
    display: block;
    text-decoration: none;
    color: inherit;
    font-size: 14px;
    padding: 7px 17px;
    margin: 0;
}

.MenuP li {
    display: inline-block;
    position: relative;
    border: 1px solid #292929;
    background-image: linear-gradient(to right, #002147 0%, #002147 51%, #002147 100%);
    text-align: center;
    list-style: none;
    transition-duration: 0.5s;
}

.MenuP li:hover {
    background-image: linear-gradient(to top, #002147 0%, #002147 51%, #002147 100%);
    color: #fff;
}

.MenuP li ul {
    visibility: hidden;
    opacity: 0;
    min-width: 5rem;
    position: absolute;
    display: none;
    transition: all 0.5s ease;
    margin-top: 1rem;
    left: 0px;
    background-color: #1d1d1d;
    border: 2px solid #069;
    list-style-type: none;
    margin: 0;
    padding: 0;
    z-index: 9999999;
    font-size: 12px;
    min-width: 300px;
}

.MenuP li ul li {
    clear: both;
    width: 100%;
    text-align: left;
    border-style: solid;
    border-color: #292929;
    background-image: none;
    border-width: 1px 0px 0px 0px;
}

.MenuP li ul li a {
    padding: 8px 12px;
}

.MenuP li:hover > ul,
.MenuP li:focus-within > ul, 
.MenuP li ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
    transition: 0.25s;
}

.MenuP li ul li:first-child {
    border-width: 0px 0px 1px 0px;
}

/* TABS */
.ui-tabs {
    border: 1px solid #ccc;
    background-color: #292929 !important;
    background-image: none;
}

.ui-tabs .ui-tabs-nav {
    font-size: 14px;
    padding: 4px 4px 0 4px;
    border: none;
    background: none;
    border-radius: 0;
}

.ui-tabs .ui-tabs-nav li {
    border-left: 1px solid #696969 !important;
    border-top: 1px solid #696969 !important;
    border-right: 1px solid #696969 !important;
    border-bottom: none;
    padding: 0;
    padding-bottom: 0;
    bottom: -2px;
}

.ui-tabs .ui-tabs-nav li a {
    padding: 6px 9px !important;
}

.ui-tabs .ui-tabs-nav .ui-tabs-active {
    background-image: linear-gradient(to top, #f1f1f1 0%, #f9f9f9 51%, #ffffff 100%) !important;
    border-left: 1px solid #f1f1f1 !important;
    border-top: 1px solid #f1f1f1 !important;
    border-right: 1px solid #f1f1f1 !important;
    border-bottom: none !important;
    color: #000000;
    padding-bottom: 0 !important;
}

.ui-tabs .ui-tabs-panel {
    padding: 10px;
    margin: 0 4px 4px 4px;
    background-color: #f1f1f1;
}

/* ACORDION / ARBOL */
.arbol {
    font-size: 14px;
    background: #333;
    -webkit-box-shadow: inset 3px 3px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 3px 3px 5px 0px rgba(0,0,0,0.75);
    box-shadow: inset 3px 3px 5px 0px rgba(0,0,0,0.75);
}

.acordion li {
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

.acordion ul li {
    padding: 2px 5px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.acordion ul li a {
    color: #03A9F4;
}

.acordion ul li:hover {
    background-color: #000;
}

.acordion ul li a:hover {
    color: #fff;
    text-decoration: none;
}

.arbol, .arbol ul, .arbol li {
    position: relative;
}

.arbol ul {
    list-style: none;
}

.arbol li::before, .arbol li::after {
    content: "";
    position: absolute;
    left: -12px;
}

.arbol li::before {
    border-top: 2px solid #03A9F4;
    top: 9px;
    width: 8px;
    height: 0;
}

.arbol li::after {
    border-left: 2px solid white;
    height: 100%;
    width: 0px;
    top: 2px;
}

.arbol ul > li:last-child::after {
    height: 8px;
}

/* OTROS COMPONENTES */
.combo {
    display: inline-block;
    min-width: 20px !important;
    width: auto !important;
    margin-left: 2px;
    margin-right: 2px;
    box-shadow: 1px 1px 3px 0px rgba(179,179,179,1);
    cursor: pointer;
}

.wijmo-wijcombobox {
    margin: 5px 0 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    top: -2px;
}

.ui-state-disabled {
    opacity: .8 !important;
}

.ui-state-disabled .ui-state-default {
    background: #c7c7c7 !important;
}

.ui-state-disabled .ui-state-default .wijmo-wijcombobox-input {
    color: #0e2365 !important;
    font-weight: bold !important;
}

.NotiSIS {
    padding: 7px;
    margin: 2px 0;
    background-color: #FFEB3B;
    color: #000;
    text-align: center;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
    z-index: 99999;
    font-size: 18px;
    transition: visibility 2s, opacity 1s linear;
}

#printSIS {
    transition: all .5s;
}

.mitooltip {
    max-width: 350px;
    z-index: 99;
    background: rgba(255,255,255,.8);
}

.barra {
    border-radius: 3px;
    background-color: #008169; /* Verde oscuro */
    margin: 5px;
    color: #f0f0f0;
}

.cinta-cabecera {
    background-color: #ffffff;
}

.foto {
    width: 270px;
    border: 1px solid #ddddef;
    background-color: #ffffef;
    border-radius: 3px;
}

.fichero {
    background-color: #fff;
    padding: 7px 15px;
    border: 1px solid #F40F02;
    border-radius: 5px;
    margin: 5px;
    display: inline-block;
}

#boxdd {
    text-align: center;
    width: 100%;
    padding: 20px;
    background-color: rgba(255,195,0,.2);
    margin: 10px 0;
    border: dashed 1px rgba(255,255,0,0.8);
}

.subirFichero {
    display: inline-block;
    padding: 10px;
    margin-bottom: 10px;
    color: #292929;
    min-width: 200px !important;
    max-width: 50%;
    border: 1px solid #dddd55;
    font-size: 12px !important;
    background-color: rgba(255,255,255,.8);
}

.subirFicheroOld {
    padding: 20px;
    margin: 10px 0;
    border: 1px solid rgba(129,129,129,0.2);
    text-align: center;
    background-color: rgba(255,255,255,.2);
}

/* 8. CLASES DE UTILIDAD
-------------------------------------------------- */
/* ALINEACION */
.alinear-centro { text-align: center !important; }
.alinear-derecha { text-align: right !important; }
.alinear-izquierda { text-align: left !important; }
.AlinearDerecha { text-align: right; width: 1081px; }
.vertical-top { vertical-align: top; }
.vertical-middle { vertical-align: middle; }

/* ESPACIOS Y MARGENES */
.espacio { padding: 20px; }
.espacio-x1 { padding: 10px; }
.espacio-x2 { padding: 20px; }
.espacio-x3 { padding: 30px; }
.espacio-x4 { padding: 40px; }
.espacio-x5 { padding: 50px; }

.margen { margin: 5px; }
.margen-x1 { margin: 10px; }
.margen-x2 { margin: 20px; }
.margen-x3 { margin: 30px; }

.margin-right-x1 { margin-right: 10px; }
.margin-right-x2 { margin-right: 20px; }
.margin-right-x3 { margin-right: 30px; }
.margin-right-x4 { margin-right: 40px; }
.margin-right-x5 { margin-right: 50px; }

.margin-left-x1 { margin-left: 10px; }
.margin-left-x2 { margin-left: 20px; }
.margin-left-x3 { margin-left: 30px; }
.margin-left-x4 { margin-left: 40px; }
.margin-left-x5 { margin-left: 50px; }

.sin-margen { margin-left: 0 !important; margin-right: 0 !important; }
.corregir-margen { margin: 5px 0; }

/* VISIBILIDAD */
.ocultar { display: none; }
.mostrar { display: block; }
.ocultar2 { visibility: hidden; }

/* BORDES Y CONTORNOS */
.border { border: 1px solid #696969 !important; }
.contorno { border-radius: 5px; border-width: thin; border-style: solid; }
.redondear { -webkit-transition: all 0.5s; -webkit-border-radius: 5px; border-radius: 5px; }
.espacio-barra { padding: 5px 3px; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; }

/* COLORES DE FONDO Y TEXTO */
.fondo-upload { background-color: #ffffef; border-color: #dddd99; }
.fondo-rojo { background-image: none !important; background: none !important; background-color: #ffcdd2 !important; }
.fondo-amarillo { background-image: none !important; background: none !important; background-color: #fff9c4 !important; }
.fondo-verde { background-image: none !important; background: none !important; background-color: #c8e6c9 !important; }
.fondo-rojo-dark { background-image: none !important; background: none !important; background-color: #b71c1c !important; color: #fff !important; }
.fondo-amarillo-dark { background-image: none !important; background: none !important; background-color: #ff5722 !important; color: #fff !important; }
.fondo-verde-dark { background-image: none !important; background: none !important; background-color: #1b5e20 !important; color: #fff !important; }
.rojo-pastel { background-color: #f4bfb5 !important; }
.verde-pastel { background-color: #d5f5d1 !important; }
.campo-pie { background-color: #cfcfcf; }
.highlight { background-color: rgba(171,235,198,.8); }
.remarcar { background-color: lightgoldenrodyellow; padding: 5px 3px; margin-top: -5px; font-weight: bold; vertical-align: middle; border: 1px solid #292929; }

.texto-azul { color: #000099; }
.texto-verde { color: #009900; }
.texto-rojo { color: #990000; }

.fondo-amarillo:hover, .fondo-rojo:hover, .fondo-verde:hover {
    color: #000 !important;
}

/* OTROS */
.inline { display: inline-block; box-sizing: border-box; margin: 0; border: 0; }
.float-right { float: right; }
.centro-pantalla { display: block; text-align: center; height: 85vh; line-height: 100%; }
.centro-pantalla > * { vertical-align: middle; }
.centro-pantalla img { display: inline-block; }
.ancla-vertical { display: inline-block; height: 100%; }
.login { height: 80vh; line-height: 100%; text-align: center; }
.logincenter { padding: 20px; color: #fff; -webkit-box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.75); -moz-box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.75); box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.75); }

/* 9. MEDIA QUERIES
-------------------------------------------------- */
@media only screen and (max-width:559px) {
    .body-content {
        width: 100%;
    }
}

@media only screen and (min-width:600px) and (max-width:1020px) {
    .body-content {
        width: 100%;
    }
}

@media only screen and (min-width:1021px) and (max-width:1300px) {
    .body-content {
        max-width: 1000px;
    }
}

@media only screen and (min-width:1301px) and (max-width:1675px) {
    .body-content {
        margin-bottom: 40px;
        max-width: 1300px;
    }
}

@media only screen and (min-width:1676px) and (max-width:1930px) {
    .body-content {
        margin-bottom: 40px;
        max-width: 1300px;
    }
}

@media only screen and (min-width:1931px) {
    .body-content {
        margin-bottom: 40px;
        max-width: 1300px;
    }
}