/* Add here all your css styles (customizations) */




















body {
    font-size: 11px;
    font-size: 13px;
    /*margin-bottom: 60px;*/ /* Margin bottom by footer height */
    /*https://getbootstrap.com/docs/3.4/examples/sticky-footer/*/
}
/*
.footer-v1 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; 
    background-color: #f50000;
}
*/




/* header ***************************************************************************************************/
.header {
    background-color: var(--color-header-backend);

    /*background-color: #d3e4e7;*/
    /*background-color: var(--color-header);*/

    /*background-color: var(--color-main);*/
    border-bottom: 1px solid var(--color-main);
}
/* links menus */
.header .navbar-nav > li > a {
    color: #518f9a;
}
/* links login */
.header .topbar ul.loginbar > li > a, .header .topbar ul.loginbar > li > a:hover {
    color: #777;
}

.header .logo img {
    /*margin: 20px 0;*/
    margin: 20px 0px 2px 0px;
}












/* breadcrumbs ***************************************************************************************************/

.breadcrumbs { padding:0px 0 0px 0;}
/*.breadcrumbs h1 { margin-top: 4px; color:#fff; font-weight:bold; }*/
.breadcrumbs h1 { /*margin-top: 4px;*/ color:#fff; /*nt-weight:bold;*/ font-size:27px; }
/*.breadcrumb { top:3px; padding:6px 15px; margin-bottom:0px; }*/
    .breadcrumbs h1 {
        color: #68b8c1;
        color: #005683;
        color: #046f90;
        /*text-shadow: -2px 2px 6px #3E3E3E;*/
        /*text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);*/
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    }




/* separador en opciones de menu */
/* este lo he metido yo, no hay separador en los menus originales de unify */
.dropdown-menu > li > span.separator {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    border-bottom: solid 1px #eee;
    background-color: #ddd;
}



.content {
    padding-top: 20px;
}



/*
descomentar esto para debug checkboxes
.sky-form .toggle input {
    position: absolute;
    left: 0px;
}
*/













/* centrar logo y titulo en login a pagina completa */
.reg-block-header {
    text-align: center;
}

/* login box fondo semitrasparente */
.reg-block {
    background: rgba(255,255,255,0.9);
}







/* sombreados */
.sky-form, 
.boxDetalle, 
.table-bordered {
    box-shadow: 0 0 10px rgb(0 0 0 / 15%);
}
/* end sombreados */




/* tabs ***************************************************************************************************/


/*      ###########         ##           ########      #########  */
/*           ##            ## ##         ##      ##   ##          */
/*           ##           ##   ##        ##      ##   ##          */
/*           ##          ##     ##       #########     ########   */
/*           ##         ###########      ##      ##           ##  */
/*           ##        ##         ##     ##      ##           ##  */
/*           ##       ##           ##    ########     #########   */
/* tabs ******************************/
/* para tabs normales, no hay pading */
.tab-v2 .tab-content {
    padding: 10px 0 0 0;
    border: solid 1px #eee;
}
/* para tabs dentro de tabs, define un padding q enmarca visualmente los tabs internos. para usar este estilo, AŅADIR esta clase a la q tiene la clase .tab-v2 */
.opc2 {
    padding: 10px;
}
/* para definir un poco la silueta de los tabs no activos */
.tab-v2 .nav-tabs li a {
    background-color: #F2F2F2;
}

/* font weight bold en el titulo del tab seleccionado */
.tab-v2 .nav-tabs li.active a {
    font-weight: bold;
}





/* accordions ***************************************************************************************************/

/* hace q los accordion de bootstrap se puedan colapsar independientemente (originalmente, al expandir uno se colapsa el resto) */
.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}





.btn-u {
    margin-bottom:5px;
}


/* tamaņos iconos font-awesome (definidos por mi). lo uso en ppio solo para los iconos del helper ActionLinkConIcono... */
.fa-lg { font-size: 18px; }
.fa-sm { font-size: 14px; }
.fa-xs { font-size: 12px; }
/* nota - fontawesome tiene sus propias clases para tamaņos (fa-1x, fa-2x etc) pero ninguno de esos tamaņos me valia */




/* forms ***************************************************************************************************/

/* color fondo formularios */
.sky-form fieldset {
    background-color:#f3f3f3;
}
/* fondo formularios entidades inactivas */
    .sky-form fieldset.inactivo {
        background-color: #e0e0e0;
        border-color: #aaa;
    }



/* inputs, selects y buttons disabled o readonly */
/*
input:disabled, select:disabled,
input[readonly], select[readonly] {
*/
input:disabled, select:disabled, textarea:disabled,
input[readonly], select[readonly], textarea[readonly] {
    border-color: #cacaca !important;
    background-color: #e5e5e5 !important;
    color: #818181 !important;
    pointer-events: none;
}
/*button[disabled], a.link-boton[disabled] {*/    /* aplicar la clase link-boton a los links q actuan como botones, para q se puedan estilar cuando se les ponga disabled */
button[disabled], a.link-boton-disabled {    /* aplicar la clase link-boton-disabled para disablear los links q actuan como botones */
    border-color: #cacaca !important;
    background-color: #e5e5e5 !important;
    color: #818181 !important;
}
/* para links q actuen como boton, lo deshabilita cuando disabled */
a.link-boton-disabled {
    cursor: default;
}


/* checkboxes disabled y readonly */
input[type='checkbox']:disabled + i:before,
input[type='checkbox'][readonly] + i:before { /* afecta a los i q esten inmediatamente despues de un checkbox disabled o readonly (en template unify, esto es la bolita)*/
    background-color: #808080;
    /*background-color: red;*/
}
input[type='checkbox'][readonly] + i, input[type='checkbox'][disabled] + i { /* afecta a los i q esten inmediatamente despues de un checkbox disabled o readonly */
    pointer-events: none; /* para q no se pueda clickar en un checkbox readonly */
}
input[type='checkbox'][readonly] + i:after, input[type='checkbox'][disabled] + i:after {      
    /* afecta a los i q esten inmediatamente despues de un checkbox disabled o readonly (en template unify, esto es el "SI" o "NO") */
    color:#808080;
    /*color:blue;*/
    pointer-events: none;
}


/*
input[type = "checkbox"][readonly] {
    pointer - events: none;
    + label {
    pointer-events: none;
    }
}
*/

/* selects */
/* posicion mini-flechas en selects */
/*
.sky-form .select i::after, .sky-form .select i::before {       
    right: 0px;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.sky-form .select select {
    padding: 6px 4px 6px 8px;
}
.sky-form .select i {
    right: 6px;
}
*/

.sky-form .select i {
    background-color: transparent;      /* para q el rectangulillo este no cante cuando la select esta disabled */
}
.miclase .input input, .miclase .select select {
    background-color:red;
}

/* aņado esta clase para eliminar el padding en grids especiales (pej. en campos dobles, "1 semana", "4 dias") */
/*
.padding-0{
    padding-right:0 !important;
    padding-left:0 !important;
}
*/
/*
.campoDoble .col {
    padding-right:5px !important;
    padding-left:5px !important;
}

.padding-0{
    padding-right:0 !important;
    padding-left:0 !important;
}
*/

/* campos dobles (salen mas juntos y comparten label) (pej. en valores de periodos: 5 dias, 2 meses...) */
/*
.campoDoble .col {
    padding-right: 5px !important;
    padding-left: 5px !important;
}
.campoDoble div[class^="col"]:first-child {
    padding-right: 5px !important;
    padding-left: 15px !important;
}
.campoDoble div[class^="col"]:last-child {
    padding-right:15px !important;
    padding-left:  5px !important;
}
*/




/* este estilo no esta definido en el template (lo esta el .textarea textarea, pero no el .input textarea) */
/* englobando el textarea en un label con class .input, muestra el handler en la esquina inf.dcha del textarea. englobandolo en un label con class .textarea, no. */
.sky-form .input textarea {
    border-color:#999;
    border-width: 1px;
    font-size: 14px;
    color: #404040;
    font-weight: normal;
}


.sky-form,
.sky-form .input input,
.sky-form .input textarea,
.sky-form .select select,
.sky-form .textarea textarea,
.sky-form .button,
.sky-form.submited .message,
.sky-form .option option,
.ui-datepicker {
	font-family: 'Raleway', serif !important;
}

/* font contenido campos forms */
.sky-form .input input,
.sky-form .input textarea,
.sky-form .textarea textarea, 
.sky-form .select select,
.sky-form.submited .message,
.sky-form .option option,
.ui-datepicker {
	font-family: 'Roboto', serif !important;
}
/*nota - los textarea se pueden meter en un label con clase .input o con clase .textarea. con .input, el textarea se muestra como textarea (con handler en la esquina). con .textarea, no (se muestra como un cuadro de texto grande pero sin handle en la esquina) */

/* posiciona verticalmente los campos de formulario q no llevan label encima */
/*(esto es una opcion para campos dobles, otra mejor es usar las clases de campoDoble (ver ejemplo html en el editortemplate Seguridad.cshtml) */
.campoSinLabel {
    display:block;
    margin-top:31px;
}



/* altura en selects multiples */
select[multiple] {
  height: 150px !important;
}







    /* estilos de items seleccionados en select multiple (esto es especial pq en ppio lo controla el browser ver https://stackoverflow.com/questions/50618602/change-color-of-selected-option-in-select-multiple) */
    select[multiple] option:checked {
        /*background-color: #1e90ff;*/ /* este no funciona, pq el bgcolor de los items de un select los controla el browser. por eso hay q establecer una imagen (con un gradient simplemente) */
        /*background-image: linear-gradient(0deg, #77a9da 0%, #77a9da 100%);*/
        /*background-image: linear-gradient(0deg, #77a9da 0%, #1e90ff 100%);*/
        background-image: linear-gradient(0deg, #1e90ff 0%, #1e90ff 100%);
        /* esto pone el texto blanco en items seleccionados, cuando el campo no tiene el foco (no funciona en firefox)*/
        color: white;
    }
    /* esto es cuando el campo tiene el foco */
    select[multiple]:focus option:checked {
        /*background: red linear-gradient(0deg, red 0%, red 100%);*/
        /*color: white;*/
    }




/* checkboxes */
/* checkbox en posicion no chequed */
.sky-form .toggle i {
    left:0;
    top:0;
}
.sky-form .toggle i:after {     /* texto "SI"/"NO" */
	content: 'NO';
	color: #8f362b;
}
.sky-form .toggle i:before {    /* bolita */
	background-color: #8f362b;
}
/* checkbox en posicion chequed */
.sky-form .toggle input:checked + i:after { /* texto "SI"/"NO" */
    content: 'SI';
    color: var(--color-main);
}
.sky-form .toggle input:checked + i:before { /* bolita */
    background-color: var(--color-main);
}

/* checkboxes disabled (ver mas abajo) */
input[type='checkbox']:disabled + i, 
input[type='checkbox'][readonly] + i  {      /* afecta a los i q esten inmediatamente despues de un checkbox disabled o readonly */
    background-color:#e5e5e5;
}







/* para q el checkbox visual quede pegado arriba igual q el resto de campos */
.sky-form .toggle {
    font-weight: normal;
    display: inline-block;
    vertical-align: top;
}


/* checkboxes inline con su label. esto es especifico para el editortemplate de encargadotto, revisar esto */
/* revisar esto, debe haber otra forma (en el template original, los checkboxes son inline con el label) */
.checkboxInlineConLabel div {
    margin-bottom:10px;
}
.checkboxInlineConLabel .toggle, .checkboxInlineConLabel .label {
    display: inline-block;
}


.sky-form .input input {
    padding: 6px 10px;
}
.sky-form .select select {
    padding: 6px 8px;
}



/* campos cartela (cartelas q ocupan la posicion de un campo en un form) */
.sky-form .campoCartela {
    position: relative;
    display: block;
    margin-top: 8px;
    color: #383838;
}



/* notes de skyforms */
.sky-form .note {
    /*
    margin-top: 6px;
    padding: 0 1px;
    font-size: 11px;
    line-height: 15px;
    */
    color: #888;    /* un poco mas oscuro q por defecto, q era 999 */
}


/* campos form importantes */
.inputImp1{
    font-size:18px !important;
    font-weight: bold !important ;
}
.inputImp2{
    font-size:17px !important;
    font-weight: bold !important ;
}
.inputImp3{
    font-size:14px !important;
    font-weight: bold !important ;
}












/* START estilos Validation Summary en forms ************************************************/

/* estilos en validation summary de formularios */
.text-danger ul li {
    color: #a94442;
}
/* div validationSummary en forms */
.validation-summary-errors {
    background-color: #fff0f0;
    padding: 20px 10px;
}
    .validation-summary-errors span:first-of-type {     /*para q el primer span dentro del validationSummary (el q contiene la frase q se especifica en el helper) salga negrita y con padding-bottom */
        font-weight: bold;
        display: block;
        padding-bottom:10px;
    }
/* para q el validationsummary salga oculto mientras no haya errores (pej. al cargar el form) (nota - esto se supone q ya lo deberia hacer pq esta en el site.css q se crea con cualquier proyecto mvc, pero en este caso supongo q en algun momento dejo de funcionar... asi q lo meto aqui */
.validation-summary-valid {
    display: none;
}

/* END estilos Validation Summary en forms ************************************************/










/* para iconos redondos (pej. campos boolean en listados (paginas Index) y en paginas Details) nota - estos no son de bootstrap ni unify */
/* MUEVO ESTO MAS ARRIBA, JUNTO AL RESTO DE ESTILOS DE LISTADOS ENTIDADES Y PAGINAS DETAILS */
/*
.dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
}
*/



/* campos form importantes */
/* MUEVO ESTO MAS ARRIBA, JUNTO AL RESTO DE ESTILOS DE FORMS. ELIMINAR LUEGO DE AQUI. */
/*
.inputImp1{
    font-size:18px !important;
    font-weight: bold !important ;
}
.inputImp2{
    font-size:17px !important;
    font-weight: bold !important ;
}
.inputImp3{
    font-size:14px !important;
    font-weight: bold !important ;
}
*/


/* accordion para campos notas internas */
.acc-camposNotas {
    margin-top: 22px;
}
.acc-camposNotas .panel-heading a {
    display: block;
    font-size: 10px;
    padding: 3px 15px;
    background: #fefefe;
    color: #555;
}
.acc-camposNotas .panel-heading i { /* icono notas en header del accordion */
    padding-right: 15px;
}
.acc-camposNotas .panel-heading a:hover {
    color: var(--color-main);
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
    background: #fafafa;
}







/* reduce texto en textareas */
.form-control {
    font-size: 12px;
    font-weight: bold;
}

/* modificacion campos formularios - para hacerlos mas compactos. comentar estos estilos para dejarlo como estaba originalmente */
.sky-form .label {
    margin-bottom: 0px;
    padding: 0.2em 0 0.1em;
}
.sky-form section {
    margin-bottom: 10px;
}
.campoSinLabel {
    margin-top: 24px;
}
        /* reduce la altura de los campos input */
/*
.sky-form .input input {
    height: 28px;
    padding: 6px 12px;
}
.sky-form .select select {
    height: 27px;
    padding: 2px 6px;
}
*/




/* class para dark medium, aņadida al template. para badges etc. es un gris no tan oscuro como el dark pero no tan claro como el light... */
span.label-dark-medium, span.badge-dark-medium, .list-group-item.active > .badge.badge-dark-medium {
    background: #888888;
}




/* tables ***************************************************************************************************/

.table { font-size:11px; }


/* tablas en seccion dev (about) */
.tablaDev th {
    background-color: #555;
}


/* tablas listados entidades ***************************************************************/

/* para hacer las tablas fixed width */
/*
table {
    table-layout: fixed;
    word-wrap: break-word;
}
*/
th {
    color: white;
}
th a { color: white !important; text-decoration: none !important; }
th a:hover { color: white !important; }
th a:visited { color: white !important; }
th a:active { color: white !important; }

/*td.colId { background-color: #7e7e7e; color:white; }*/             /* columna id (si se muestra) */
td.colId { background-color: var(--color-dev); }             /* columna id (si se muestra) */
td.colMain { font-size:120%; font-weight: bold; }   /* columna principal */
td.colImp { font-size:110%; font-weight: bold; }   /* columna importante */
td.colRef { background-color: #eeeeee; }
td.colNomEmpresa { color: var(--color-main); }



td.colFechas {
    color: #909090;
    font-size: 9px;
}	/* solo en columnas fechaAlta y fecUltModif */
tr.no-activo td.colFechas { color: #505050; }	/* solo en columnas fechaAlta y fecUltModif */
td.colButtons { background-color: #ddd; white-space: nowrap; }  /* para columna botones*/  /* el white-space nowrap hace que todos los botones se muestren siempre en fila */
td.colButtonsB { background-color: #ccc; white-space: nowrap; }  /* para columna botones especial (pej. en pedidos, para botones de cambio de estado) */  /* el white-space nowrap hace que todos los botones se muestren siempre en fila */

/* para columna de requestData en listado webtrails */
td.colRequestData pre {
    font-size:8px !important;
}

tr.no-activo  { background-color:#aaaaaa; }
tr.erroneo { background-color: #C56A6A; }

tr.empresaPpal {
    border: 2px solid var(--color-main) !important;
    background-color: #ebf8fa;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}       /* en listado empresas, para marcar la empresa ppal del usuario. ojo, cuando el usuario logeado sea un reseller o basico mostrara la suya, cuando el logeado sea dev o admin, vera varias ppales (la de cada reseller...) */
/*ojo de momento no estoy usando este... */

/*
.validation-summary-errors p {
    color:red;
}
*/

tr.trail-error { background-color: #C56A6A; }       /* rows de trails al controller de errores */
tr.trail-ajax  { background-color: #d2e9ed; }       /* rows de trails ajax */


/* hover en rows no-activos */
.table-hover tbody tr.no-activo:hover td, .table-hover tbody tr:hover th {
  background-color: #979797;    /* debe ser un poco mas oscuro q el de la clase .erroneo */
}

/* hover en rows erroneos */
.table-hover tbody tr.erroneo:hover td, .table-hover tbody tr:hover th {
  background-color: #A66464;    /* debe ser un poco mas oscuro q el de la clase .erroneo */
}



/* para badges, labels etc en tablas */
table span.label, table span.badge {
    font-size: 9px;
    font-weight: 400;
    padding: 4px 7px;
}


.pagination { margin-bottom: 5px; }

button #nuevo { margin-bottom: 10px; }

/*td span.moneda { font-size:9px; }*/
td small {font-size:9px; font-weight:normal; }

/* box superior en listado (boton nuevo, filtro) */
.boxSuperior {
    margin-bottom:20px;
}


/* filtros ***************************************************************************************************/

.boxFiltro { /*padding:10px;*/ }
.boxFiltro .row { margin:0px; }
#frmFiltro {
    border-width: 0px !important;
}

#filtroAccordion .panel-default,
#filtroAccordion .accordion-toggle {
    background-color: #eee;
}

/* cartela filtros aplicados en filtros */
.filtrosAplicados {
    margin-left: 15px;
    padding: 5px;
    font-size: 9px;
    background-color: #ddd;
}




/* para iconos redondos (pej. campos boolean en listados (paginas Index) y en paginas Details) nota - estos no son de bootstrap ni unify */
.dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
}




/* aplicar a divs .row del grid de bootstrap para q tengan el mismo height ver https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height */
/*OJO ESTO ES UNA PRUEBA Y CREO Q NO LA ESTOY USANDO O NO ESTA FUNCIONANDO */
.equal {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}













/* pagina details ****************************************************************/
/* definition lists (en paginas details, delete */
.dl-horizontal dt {
    float: left;
    /*width: 160px;*/
    width: 260px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*margin: 8px 10px;*/
    margin: 3px 10px;
}
.dl-horizontal dd {
    margin-left: 180px;
    padding: 3px 25px;
}








/* bloques de detalle (conceptos facturas, albaranes facturas... ) */
.templateLineaDetalle {
    border-bottom: 1px solid #ccc;
}
.detalles {
    border: 1px solid #dddddd;
    margin-bottom: 25px;
}
.detalles .row { margin:5px; }
.detalles .cabeceras { border-bottom: 1px solid #dddddd; background-color: #e6e6e6; }
.detalles .col {
    float: left;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}











/* loading spinner (usado en eventos ajax) */
/*ojo no estoy usando este, no me chutaba aqui... */
.spinner {
    position:relative;
    /*position:absolute;*/
    top:50%;
    left:44%;
    background-color: rgba(255, 255, 255, 0.5);
    /*background-color: rgba(255, 125, 120, 0.5);*/
}
.spinner > div {
    width: 20px;
    height: 20px;
    background-color: var(--color-main);
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modall {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modall {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modall {
    display: block;
}


/* test para marcar campos required - ojo esto no funciona, al final hay q hacerlo en js-jquery */
/*input[data-val-required], textarea[data-val-required] { background:red !important; } */

.markRequired {
    color: var(--color-main);
    font-size: 9px;
    padding-right: 5px;
}

/* esta clase es una ņapa temporal para poder marcar como required campos q realmente no lo son (son campos q no son required en el model, sino dependiendo del valor de otro campo, y para los q no he metido de momento regla de validacion especifica) */
/* el estilo es exactamente igual que el markRequired, pero tiene q llamarse distinto para q la funcion global no lo elimine */
.markRequiredChapuza {
    color: var(--color-main);
    font-size: 9px;
    padding-right: 5px;
}






/* checkboxes inline */
.sky-form .label-inline {
    display: inline-block;
    margin-top:2px;
}
.sky-form .toggle-inline {
    position: relative;
    display: inline;
}



/* checkboxes inline (nota: el campo con .toggle-inline debe llevar la clase pull-right) */
.sky-form .label-inv {
    margin-top:0px;
}
.sky-form .toggle-inv{
    top:0px;
    right: 10px;
    padding-right:71px;
}
.sky-form .toggle-inv i {
    top: 0px;
    right:7px;
}




.bkgGris {
    background-color: #EBEDED !important;
}



/* bloque tags en alta y edicion auditoria */
.nomTag {
	/*margin-top: 5px;*/
}




/* bloques con datos empresa, datos tto... */
div.bloqueDatos {
    /*border:1px solid #eeeeee; border-top:none; padding:10px; display:none; background-color:#FCFCFC; min-height:100px;*/
    border:1px solid #eeeeee; border-top:none; padding:10px; display:none; background-color:#FCFCFC; min-height:10px;
}
div.bloqueDatos .sep {
    min-height:10px; display:block; 
}
div.bloqueDatos a {
    /*
    color: var(--main-color);
    */
}



/* bloque campos ocultos en alta auditoria (se muestran al elegir empresa y tipo_auditoria) */
#bloqueCamposOcultos {
    display: none;
}




/* sortables drag-n-drop (en divs boxDetalle) */
.sortable-placeholder {
    background: #e6e1b4;
    background: #eeecd9;
    border: 1px solid #dcd9c4;
    visibility: visible;
    width: 100%;
    height: 200px;
}






/* estilos hr */
hr.hr-dark {
    border-top: 1px solid #aaa;
}
hr.hr-thin {
    margin: 5px 0;
}





/* bloques sub-entities (collections navigation properties) */
.boxDetalle {
}

/* este creo q no se usa, o no deberia usarse... revisar */
/*.boxDetalles hr.separator {*/
.boxDetalle hr.separator {
    height: 1px;
    background: #E2E2E2;
    background: red;
    margin: 0px;
    margin-bottom: 10px;
}

.boxDetalle hr {
    height: 1px;
    background: #E2E2E2;
    background: #CECECE;
    margin: 0px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.boxDetalle {
    /*
    border-bottom: 1px solid #A2A2A2;
    margin-bottom: 10px;
    */
    border-top: 1px solid #A2A2A2;
    margin-top: 10px;
    padding-top: 10px;

    /* nuevo estilo para el box detalle, con bordes y bgcolor algo distinto al de base */
    border: 1px solid #A2A2A2;
    padding: 20px;
    background-color: #e9e9e9;
    margin-bottom: 25px;
    position: relative;
}
/* btn delete detalle en esquina sup.dcha. */
.btnDeleteDetalle {
    position: absolute;
    background: red;
    color: white;
    top: -1px; /*-6px;*/
    right: -1px; /*-6px;*/
}






/* MOVER ESTE DE AQUI A OTRO SITIO MAS LOGICO... */
/* esto es para meter un triangulillo en la esquina inf.dcha de un boton, para botones desplegables, de momento es para el boton de generar documento en listado de ttos... */
/* intentar refactorizar esto para hacerlo con un boton:after en lugar de tener q meter un div vacio dentro del boton con esta clase... */
/* https://stackoverflow.com/questions/54208842/css-triangle-bottom-right-of-parent-div/54209036 */
.btn-u-split {
    position: relative;
}

.botonTriangle {
    /*.btn-u-split:after {*/
    position: absolute;
    width: 0px;
    height: 0px;
    /*border-bottom: 10px solid #aaa;*/
    border-bottom: 10px solid var(--color-sec);
    border-left: 10px solid transparent;
    bottom: 0;
    right: 0;
    color: green;
}


/* https://stackoverflow.com/questions/51318510/add-triangle-corner-button-css */
/*.button:after {*/
/*
.btn-u-split:after {
    position: absolute;
    bottom: 0;
    height: 5px;
    width: 3px;
    right: -14px;
    background: red;
    content: "";
    z-index: 1000;

    position: absolute;
    bottom: 0;
    height: 0;
    width: 0;
    right: 0;
    border: 25px solid transparent;
    border-bottom-color: red;
    border-right-color: red;
    content: "";
}
*/
/* box generico para child entities en paginas Display */
.boxChildDisplay {
    background-color: #EDEDED;
    /*margin:5px;*/
    margin-bottom: 8px;
}
.boxChildDisplay .titulo {
    padding:10px;
    font-size: 13px;
    background-color: #DDDDDD;
}
.boxChildDisplay .contenido {
    padding:10px;
}

/* box especifico para child entities Dpto en paginas Display */
.boxChildDptoDisplay {
    border:1px solid #CECECE;
    margin:5px;
    padding:3px; 
}
.boxChildDptoDisplay .contenido {
    padding:10px;
}



/* cambio el horizontal spacing entre columnas para las paginas display */
/*
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
}
*/





/* los rows con esta clase gutter-10 tienen distinto gutter entre columnas centrales y las laterales, para q visualmente sean iguales. lo uso en display de empresas */
.row.gutter-10 {
    margin-left: -5px;
    margin-right: -5px;
}
.row.gutter-10 > [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
}


/* en las paginas Details, todos los col de un row de bootstrap tienen la misma altura. */
.details .row {
  display: -webkit-box;
  /*display: -webkit-flex;*/
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.details .row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}








.acc-v1 .panel-heading a:focus,
.acc-v1 .panel-heading a:hover,
.acc-v1 .panel-heading a:active {
    text-decoration:none;
}




/* colores generales mios */
.verde {
    color:green;
}
.rojo {
    color:rgb(231, 76, 60);
}











/* validaciones (validator y unobstrusive) ------------------------------------------------------------------------------------*/

/* override estilos validaciones jquery.validator y jquery.validator.unobstrusive */
/* colores campos validados con error. sobreescriben los que ponga el skyforms para estos campos (bueno, no estoy seguro si los pone skyforms, o el plugin jquery validator, o el unobstrusive validation q se sobrepone al validator...  */
input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error,
div.dropzone.input-validation-error { /* para q tb se pueda aplicar a divs de dropzone */
    background: #fff0f0 !important;
    border: 1px solid #ffbbbb !important;
}
    div.dropzone.input-validation-error i.dropzoneBgIcon {
        color: #ffe0e0;
    }


/* cartela "sin resultados" en listados entities */
.sinResultados {
    color: #68b8c1;
    font-size: 14px;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 60px;
}






/* dropzone ------------------------------------------------------------------------------------*/

.dropzone {
    /*min-height: 150px;*/
    min-height: 50px;
    border: 2px solid rgba(0, 0, 0, 0.3);
        border-top-color: rgba(0, 0, 0, 0.3);
        border-right-color: rgba(0, 0, 0, 0.3);
        border-bottom-color: rgba(0, 0, 0, 0.3);
        border-left-color: rgba(0, 0, 0, 0.3);
    background: white;
    padding: 5px 5px;
    border-color: #89a2a6;
}
.dropzoneBgIcon {       /* fondo en div dropzone, con icono fontawesome */
    font-size: 80px;
    color: #f6f6f6;
}
.dropzone .dz-message {
    text-align: center;
    /*margin: 2em 0;*/
    margin: 0;
}
.dropzone .dz-preview .dz-image {   /* box en ficheros de imagen */
    border-radius: 10px;
    width: 80px;
    height: 80px;
    border:1px solid #ddd;
}
.dropzone .dz-preview .dz-image img { /* box en ficheros de imagen */
    width: 80px;
    height: 80px;
}

.dropzone .dz-preview.dz-file-preview .dz-image {   /* box en ficheros no de imagen (doc, pdf...) ojo, luego esto estar overriden en mi codigo al instanciar los dropzones */
    border-radius: 10px;
    background: #999;
    background: linear-gradient(to bottom, #eee, #ddd);
}

.dropzone .dz-preview .dz-details {
    font-size: 10px;
    text-align: center;
    color: rgba(0, 0, 0, 0.9);
    line-height: 150%;
    padding: 0.2em 1em;
}
.dropzone .dz-preview .dz-details .dz-size {
    font-size: 12px;
    margin-bottom: 1.3em;
}
.dropzone .dz-preview .dz-remove {
    font-size: 12px;
    text-align: center;
    display: block;
    cursor: pointer;
    border: none;
}

/* nota - hay alguna opcion mas para dropzones, pej. para su validacion, pero esta mas arriba, buscar por */




















/* para debug devs ***************************************************************************************************/

/* color para campos y cartelas solo para devs (pej color de camposstring de dropzone, cartelas de views/models etc) */
.color-dev {
    background-color: var(--color-dev) !important;
}

/* cartelas q muestran view/model */
.infoDebug {
    font-size: 9px;
    background-color: var(--color-dev);
    /*color: #fff;*/
    color: #555;
    padding: 2px 4px;
}

/* para desarrollo, un link camuflado en la esquina del form de tto para cargar los campos con datos de prueba */
#RellenaDatosPrueba {
    color: transparent;
    cursor: default;
}

span.label-dev,
span.badge-dev,
.list-group-item.active > .badge.badge-dev {
    background: var(--color-dev) !important;
}











/* en botones con texto e icono , aņade separacion entre icono y texto */
.sky-form button *, .sky-form button *:after, .sky-form button *:before {
    padding-right: 3px;
}







/* modales generacion contrato */
/*
.modalContrato .boxIcoCircuito {
    font-size: 55px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}
.modalContrato .icoCircuito {
    font-size: 70px;
    color: gray;
    color: var(--color-main);
}
.modalContrato .icoCircuito:hover{
    font-size: 70px;
    color: black;
}
*/
.modalContrato label.radio,
.modalContrato label.checkbox {
    margin-left: 20px;
}










/* bloques info Talk puntoneutro */
div.infoTalk {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    font-family: 'Roboto', serif !important;
}
    div.infoTalk .row-template {
        display:none;
    }











/* boxes circuito en modal generar contrato */
.modalContrato .boxCircuito {
    /*padding: 15px;*/
}
.modalContrato .boxCircuito > div {
    padding: 10px 15px;
}
.modalContrato .boxCircuito > div + div {
    border-top: 1px solid #ddd;

}
.modalContrato .boxCircuito .boxIcoCircuito {
    border-bottom: 1px solid black;
    font-size: 55px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.modalContrato .boxCircuito .icoCircuito {
    font-size: 70px;
    color: gray;
    color: var(--color-main);
}

.modalContrato .boxCircuito .icoCircuito:hover {
    font-size: 70px;
    color: black;
}



.boxCircuito .titulo {
    /*border-bottom: 1px solid black;*/
    color: var(--color-main) !important;
}
.boxCircuito .titulo label {
    color: var(--color-main) !important;
}

/* boxes circuito en modal generar contrato */
.boxCircuito.sel {
    border: 1px solid var(--color-main);
    background-color: #e3f2f5;
    background-color: #f2fbfd;
    background-color: #f6feff;
    background-color: #f9feff;
}
.boxCircuito.sel .boxIcoCircuito {
    background-color: #fff;
}

.boxCircuito.noSel {
    filter: grayscale(100%);
    border: 1px solid #ddd;
    background-color: #fafafa;
}





/* optionsBox - esto es basicamente lo mismo que lo de circuitoContrato, pero con esto intento hacer lo mismo pero mas generico, pq pej. en aboutsyncfusion tengo q usar algo igual... */
/* asi q meto estas clases, y las uso para lo de about, pero si luego esto funciona, cambiar todo lo de circuitocontrato para q use estas clases en lugar de las otras... */


/* boxes circuito en modal generar contrato */

/*.modalContrato .boxCircuito {*/
.optionsBox {
    /*padding: 15px;*/
}

    /*.modalContrato .boxCircuito > div {*/
    .optionsBox > div {
        padding: 10px 15px;
    }

        /*.modalContrato .boxCircuito > div + div {*/
        .optionsBox > div + div {
            border-top: 1px solid #ddd;
        }

    /*.modalContrato .boxCircuito .boxIcoCircuito {*/
    .optionsBox .boxIcoCircuito {
        border-bottom: 1px solid black;
        font-size: 55px;
        background-color: #f0f0f0;
        border: 1px solid #ddd;
        margin-bottom: 20px;
    }

    /*.modalContrato .boxCircuito .icoCircuito {*/
    .optionsBox .icoCircuito {
        font-size: 70px;
        color: gray;
        color: var(--color-main);
    }

        /*.modalContrato .boxCircuito .icoCircuito:hover {*/
        .optionsBox .icoCircuito:hover {
            font-size: 70px;
            color: black;
        }



/*.boxCircuito .titulo {*/
.optionsBox .titulo {
    /*border-bottom: 1px solid black;*/
    color: var(--color-main) !important;
}

    /*.boxCircuito .titulo label {*/
    .optionsBox .titulo label {
        color: var(--color-main) !important;
    }

/* boxes circuito en modal generar contrato */

/*.boxCircuito.sel {*/
.optionsBox.sel {
    border: 1px solid var(--color-main);
    background-color: #e3f2f5;
    background-color: #f2fbfd;
    background-color: #f6feff;
    background-color: #f9feff;
}

    /*.boxCircuito.sel .boxIcoCircuito {*/
    .optionsBox.sel .boxIcoCircuito {
        background-color: #fff;
    }

/*.boxCircuito.noSel {*/
.optionsBox.noSel {
    filter: grayscale(100%);
    border: 1px solid #ddd;
    background-color: #fafafa;
}












/* partes contrato */
/*- OJO ESTO AFECTA AL CONTRATO ENCARGADO, PARA LAS CARTELAS CON LAS PARTES DEL CONTRATO... AUN NO ESTA METIDO EN LA PARTE DE CONTRATO DE EMPLEADO */
/* juntarlo luego con el resto de estilos relativos a los dropzones de contrato etc */
.cartelaParteContrato {
    color: #518f9a;
    font-weight: bold;
}


/* en alta y edicion de tto, si se actua como encargado, el primer encargado del tab encargados sera el encargado propio y se estila distinto */
.boxEncargadoPropio {
    background-color: #e7f6f8 !important;
}


/* en alto y edicion de tto, el bloque inicial del form se oscurece cuando se pasa la primera fase con el boton continuar */
.bloqueInicialOscuro {
    background-color: #ddd !important;
    background-color: #ccc !important;
}









/* para grids anidados ***************************************************************************************************/


/* para grids anidados 
    para q en grids anidados (un row dentro de un col), el row externo no aplique margins y paddings laterales. la idea es q el grid exterior solo sirve para estructurar 
    pero no debe afectar visualmente
    este en concreto es para usarlo en paginas con forms, o sea dentro del form (pej. Empleado/Edit), para usarlo sin forms de por medio habria q hacer otro q cambien un par de cosas (en ppio colores)

    estos 3 estilos son para grids anidados. aplicar al row externo el estilo .no-pad. ver pej. Empleados/Edit
    nota - esto sirve para grids con form, para otros casos cambiaria un poco...
    nota2 - esto es para bootstrap3, en bootstrap4 es mas simple (con la clase no-gutters)
*/
.row.no-pad {
    margin-right: 0;
    margin-left: 0;
    background-color: #f3f3f3; /* debe ser el mismo que el fondo de los cols */

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.row.no-pad > [class*='col-'] {
    padding-right: 0;
    padding-left: 0;

    display: flex;
    flex-direction: column;
}
.row.no-pad > .col + .col {         /* elementos .col q esten justo despues de otro .col (o sea, las cols q no sean la primera) */
    border-left: 1px solid rgba(0,0,0,.1);      /* debe ser el mismo color que la separacion entre fieldsets */
}






/* icono Notificaciones usuario en header */

/* esto sobreescribe de App.css */
span.badge {
    /*
        jun2022: cambio de absolute a relative pq salia mal (antes no, no se q carajo ha pasado...). al hacerlo, tengo q eliminar tb el top y right pq si no lo pinta mal... 
    top: -10px;
    right: -6px;
    position: absolute;
    */
    position: relative;
    /*
        ok, ya se q pasa... esto de span.badge se usa en mas de un sitio: en los badges de las tablas, pero tb en el icono de 
        notificaciones del header...
        asi q si lo cambio aqui, afecta a ambos...

        lo suyo seria crear 2 estilos, y q los aplicara cuando es un span.badge y ademas tienen una clase mia concreta...

    */
}




/* icono Notificaciones usuario en header ***************************************************************************************************/
.ico-notif {
    margin-right: 10px;
}
    .ico-notif .fa {
        font-size: large;
        color: white;
    }
        .ico-notif .fa:hover {
            color: white !important;
        }
    .ico-notif .badge {
        padding: 3px 5px;
        top: -10px;
        right: -6px;
        position: absolute;
    }






/* alerts bootstrap ***************************************************************************************************/

/* glow en alerts bootstrap con css animations */
/*css variables colores glow */
.alert-glow.alert-success {
    --box-shadow-color: #3c763d;    /*#89af86*/
}
.alert-glow.alert-danger {
    --box-shadow-color: #a94442;    /*#ca888a*/
}
.alert-glow.alert-warning {
    --box-shadow-color: #8a6d3b;    /*#c2ac84*/
}
.alert-glow.alert-info {
    --box-shadow-color: #31708f;    /*#77acc0*/
}
.alert-glow {
    animation: glow 3.0s alternate ;
}
@keyframes glow {
    0% { box-shadow: 0 0 -10px var(--box-shadow-color) }
    40% { box-shadow: 0 0 20px var(--box-shadow-color) }
    60% { box-shadow: 0 0 20px var(--box-shadow-color) }
    100% { box-shadow: 0 0 -10px var(--box-shadow-color) }
}








/* resultados auditoria ***************************************************************************************************/

#resultado {
}
    #resultado p {
        margin-bottom:10px;
    }

    #resultado hr {
        margin: 15px 0;
    }

    #resultado .sky-form .radio, #resultado .sky-form .checkbox {
        margin-bottom: 4px;
        padding-left: 27px;
        font-size: 12px;
        line-height: 17px;
        color: #404040;
        cursor: pointer;
    }

    #resultado .sky-form .radio i, #resultado .sky-form .checkbox i {
        top: 0px;
    }

    #resultado .sky-form fieldset {
        padding-top: 5px;
    }

    #resultado #docs {
        padding: 10px;

    }

    #resultado .result {

    }

#correcciones {
}







/* subBox: boxes en forms, con borde gris y con un titulillo opcional (pej. en nuevo tto, encargados, motivo del encargo, o tambien en nuevo tto, la parte de jefatura blabla */
.subBox {
    border: 1px solid #ccc;
    padding-top: 10px;
    margin: 10px 0px !important;
}
    .subBox .tit {
        padding: 0 0 15px 15px;
        font-weight: bold;
    }








/* paginas error */
.error-v1 {
    border: 1px solid white;
    background: rgba(255,255,255,0.7);
}















/* barra aviso de cookies */
/*
#barra-informativa {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    z-index: 99999;
    padding: 6px;
}

.inner {
    width: 100%;
    height: 100%;
    position: relative;
    padding-left: 5px;
    font-size: 0.95em;
    top: 30%;
}

    .inner a.info {
        padding-left: 5px;
        text-decoration: underline !important;
        color: #fff;
        font-size: 0.90em;
        font-weight: bold;
    }

    .inner a.ok {
        padding: 5px;
        margin: 0px;
        min-width: 0px;
        color: #ffffff;
        text-decoration: none;
        padding-left: 7px;
        padding-right: 7px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        text-transform: none;
        font-size: 0.90em !important;
    }
*/




/* aviso de cookies */
.avisoCookies {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    padding-left: 1%;
    padding-top: 5px;
    font-size: 1.2em;
    clear: both;
    font-weight: strong;
    color: #333;
    bottom: 0px;
    position: fixed;
    left: 0px;
    background-color: #FFF;
    opacity: 0.9;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    z-index: 999999999;
}
/* Fin aviso de cookies */






/* esto es solo para el jumbotron de la home, q es temporal, eliminar esto cuando quite el jumbotron */
.jumbotron p.normal {
    font-size: 12px;
}
















/* estos estilos son de la parte de dev, para la pagina q analiza documentos doc con syncfusion */

#infoStyles .rowParagraphStyle {
    background-color: #d4e5f7;
    color: black;
}
#infoStyles .rowCharacterStyle {
    background-color: #dcf3f2;
    color: black;
}
#infoStyles .rowTableStyle {
    background-color: #e7f3dc;
    color: black;
}
#infoStyles .rowNumberingStyle {
    background-color: #f1e6f4;
    color: black;
}

#infoStyles .rowSinOcurrencias {
    color: darkgray;
}

#infoStyles .cellOcurrencias {
    font-size: 12px;
    font-weight: bold;
}





/* para leyendas en tablas etc. de momento solo lo estoy usando en la parte dev, en el analizador de docs con syncfusion */
.leyenda {
    border:1px solid #ddd;
    margin:10px;
}
.leyenda .leyendaClave {
    width:40px;
    height:25px;
    padding-left:5px;
    padding-right:5px;
    margin-bottom:3px;
}
.leyenda .leyendaClaveBloque {
    border: 1px solid gray;
    width: 40px;
    height: 25px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 3px;
}






/* estilos para badges en about */

/*OJO, TAL COMO ESTA ESTO AHORA, SE APLICARIA A TODOS LOS BADGES Q HAYA EN OTRAS PAGINAS... ESTO DEBERIA AFECTAR SOLO A LA PAG. DE INFO SYNCFUSION... */
span.badge, .list-group-item.active > .badge {
    padding: 2px 7px;
}

.badge {
    font-size: 9px;
}










/* separador en opciones de menu */
/* este lo he metido yo, no hay separador en los menus originales de unify */
/* MOVIDO A LA PARTE DE ARRIBA DE ESTE FICHERO, LUEGO ELIMINAR DE AQUI... */
/*
.dropdown-menu > li > span.separator {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    border-bottom: solid 1px #eee;
    background-color: #ddd;
}
*/




span.label-dev, span.badge-dev, .list-group-item.active > .badge.badge-dev {
    background: #1abc9c;
}






/* boxes de begincollection de entidades inactivas */
.boxInactivo {
    background-color: #aaa;
}
    /* links inactivos - nota: estos en ppio solo los estoy usando en estos boxes de entidades inactivas, pero quiza seria bueno sacar este estilo para q sea global... */
    /* en concreto, aqui lo estoy usando para q no se puedan desplegar los accordions de notas en bloques inactivos */
    .boxInactivo .inactiveLink {
        pointer-events: none;
        cursor: default;
        background-color: #ddd !important;
        color: #bbb !important;
    }
    /* asteriscos de campos required en boxes inactivos */
    .boxInactivo .markRequired {
        color: #808080;
    }
    /* dropzones inactivos (nota: esto es solo para la parte visual, para desactivar la funcionalidad de un dropzone, hay q hacerlo con js */
    .boxInactivo .dropzone-readonly {
        background-color: #ddd !important;
        border-color: #909090;
        cursor: default;
    }
        /* icono de fondo en dropzones vacios */
        .boxInactivo .dropzone-readonly .dropzoneBgIcon {
            color: #ccc;
            /*cursor: default;*/
        }

        /* cursor default en todo el dropzone (normalmente cursor mano) */
        /* coņo, este del dz-message tengo q meterlo aparte, pq en el grupo de abajo no le hace caso no se pq... */
        .boxInactivo .dropzone-readonly .dz-message{
            cursor: default;
        }
        .boxInactivo .dropzone-readonly .dz-clickable
        .boxInactivo .dropzone-readonly .dz-message,
        .boxInactivo .dropzone-readonly .dz-message *,
        .boxInactivo .dropzone-readonly .dz-message > * {
            cursor: default !important;
        }

        /* en dropzones inactivos q tengan previews dentro, pone las imgs de preview en grayscale */
        /*ver para grayscale https://stackoverflow.com/questions/14112550/how-to-desaturate-background-image-of-a-div-using-css */
        .boxInactivo .dropzone-readonly .dz-image > img {
            filter: url(~"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.7 0.7 0.7 0 0 0.7 0.7 0.7 0 0 0.7 0.7 0.7 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            /*filter: gray;*/
            filter: gray brightness(350%);
        }
        /*
        .boxInactivo .dropzone-readonly .dz-image > img:hover {
            filter: url(~"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: gray;
        }
        */







/**/
/* tooltips de unify/skyforms */
/**/

/* por defecto, los tooltips de unify/skyforms no contemplan dropdowns (solo inputs y textareas), y muestran tooltips vacios (sin texto). */
/* overriding estilos de assets/plugins/sky-forms-pro/skyforms/css/sky-forms.css */

/* no muestra tooltips sin texto (con los tooltips de unify/skyforms, si no hay texto del tooltip, este se muestra igualmente pero vacio y queda mal) */
.tooltip:empty {
    display: none;
}

/* aņade q se muestren tooltips tambien en dropdowns */
.sky-form .input input:focus + .tooltip,
.sky-form .textarea textarea:focus + .tooltip, 
.sky-form .select select:focus + .tooltip {
    opacity: 1;
}

.sky-form .input input:focus + .tooltip-top-right,
.sky-form .textarea textarea:focus + .tooltip-top-right,
.sky-form .select select:focus + .tooltip-top-right {
    right: 0;
    left: auto;
    margin-bottom: 5px;
}

.sky-form .input input:focus + .tooltip-top-left,
.sky-form .textarea textarea:focus + .tooltip-top-left,
.sky-form .select select:focus + .tooltip-top-left {
    right: auto;
    left: 0;
    margin-bottom: 5px;
}

.sky-form .input input:focus + .tooltip-right,
.sky-form .textarea textarea:focus + .tooltip-right,
.sky-form .select select:focus + .tooltip-right {
    left: 100%;
    margin-left: 5px;
}

.sky-form .input input:focus + .tooltip-left,
.sky-form .textarea textarea:focus + .tooltip-left,
.sky-form .select select:focus + .tooltip-left {
    right: 100%;
    left: auto;
    margin-right: 5px;
}

.sky-form .input input:focus + .tooltip-bottom-right,
.sky-form .textarea textarea:focus + .tooltip-bottom-right, 
.sky-form .select select:focus + .tooltip-bottom-right {
    right: 0;
    left: auto;
    margin-top: 5px;
}

.sky-form .input input:focus + .tooltip-bottom-left,
.sky-form .textarea textarea:focus + .tooltip-bottom-left,
.sky-form .select select:focus + .tooltip-bottom-left {
    right: auto;
    left: 0;
    margin-top: 5px;
}



/* para que los tooltips no sean en una sola linea sino q tengan un max-width */
/* tengo q overridear .tooltip para establecer un max-width y width:100%, y .tooltip-right para cambiar el white-space de nowrap a normal */
.sky-form .tooltip {
    width: 100%;
    max-width: 250px;
    z-index:2;      /* le pongo z-index 2 para q salga encima de pej. las bolitas de los checkboxes unify si/no */
}
/*por defecto, el tooltip es siempre en una sola linea. con esto, el tooltip-right permite varias lineas (usar en conjuncion con aplicar un max-width a .tooltip) */
.sky-form .tooltip-right {
    /*white-space: nowrap;*/
    white-space: normal;        /* permite wrap del texto */
}
.sky-form .tooltip-left {
    /*white-space: nowrap;*/
    white-space: normal;        /* permite wrap del texto */
}



/* box requestdata en webTrails */
.boxRequestData {
    display: none;
}

























/* esto es para meter iconitos de ordering en las cabeceras de tablas, basado en datatables... */
/* tomando como base datatables y especificamente como lo implemente en mi aplicacion de modelos3d */
table thead .sorting,
table thead .sorting_asc,
table thead .sorting_desc {
    cursor: pointer;
    *cursor: hand;
}

table thead .sorting,
table thead .sorting_asc,
table thead .sorting_desc,
table thead .sorting_asc_disabled,
table thead .sorting_desc_disabled {
    background-repeat: no-repeat;
    background-position: center right;
}

table thead .sorting {
    background-image: url("../images/sort_both.png");
}

table thead .sorting_asc {
    background-image: url("../images/sort_asc.png");
}

table thead .sorting_desc {
    background-image: url("../images/sort_desc.png");
}

table thead .sorting_asc_disabled {
    background-image: url("../images/sort_asc_disabled.png");
}

table thead .sorting_desc_disabled {
    background-image: url("../images/sort_desc_disabled.png");
}


/* ********************** override estilos dataTable */
table {
    border-collapse: collapse;
}

    /* por defecto, datatables usa imgs para los iconos de ordenacion de las cabeceras de la tabla.
este bloque cambia los iconos de ordenacion en las cabeceras por iconos de font-awesome. */
    table thead th {
        position: relative;
        background-image: none !important; /* esta linea es la q evita q cargue la imagen */
    }

        table thead th.sorting:after,
        table thead th.sorting_asc:after,
        table thead th.sorting_desc:after {
            position: absolute;
            top: 12px;
            top: 0px;
            right: 4px;
            display: block;
            /*font-family: FontAwesome;*/
            font-family: "Font Awesome 6 Free";
        }

        table thead th.sorting:after {
            content: "\f0dc";
            color: #fff;
            color: #355964;
            font-size: 0.8em;
            font-size: 1.0em;
            padding-top: 0.12em;
        }

        table thead th.sorting_asc:after {
            content: "\f0de";
            color: #fff;
            color: var(--color-sec);
            color: #f99d8f;
            color: #ffaea2;
            font-size: 1.2em;
        }

        table thead th.sorting_desc:after {
            content: "\f0dd";
            color: #fff;
            color: var(--color-sec);
            color: #f99d8f;
            color: #ffaea2;
            font-size: 1.2em;
        }
        /* mete el color de sorting a todo el th, no solo al icono de sorting */
        table thead th.sorting_asc a,
        table thead th.sorting_desc a {
            color: #f99d8f !important;
            color: #ffaea2 !important;
            /*color: #ff826f !important;*/
        }




th.sorting:hover {
    background: --color-main-hover;
}




/* iconos en tabs */
.tab-v2 li .fa {
    font-size:15px;
    padding-right:3px;
}


























/* color custom: salmon */

/*Buttons Color*/
.btn-u.btn-u-salmon {
    background: var(--color-sec);
}

    .btn-u.btn-u-salmon:hover,
    .btn-u.btn-u-salmon:focus,
    .btn-u.btn-u-salmon:active,
    .btn-u.btn-u-salmon.active,
    .open .dropdown-toggle.btn-u.btn-u-salmon {
        background: var(--color-sec-hover);
    }

.btn-u.btn-u-split-salmon.dropdown-toggle {
    border-left: solid 1px var(--color-sec-hover);
}


/*Bordered Buttons*/
.btn-u.btn-brd.btn-u-salmon {
    border-color: var(--color-sec);
}

    .btn-u.btn-brd.btn-u-salmon:hover {
        color: var(--color-sec-hover);
        border-color: var(--color-sec-hover);
    }

    .btn-u.btn-brd.btn-u-salmon.btn-brd-hover:hover {
        background: var(--color-sec-hover);
    }


/*Badges*/
span.label-salmon,
span.badge-salmon,
.list-group-item.active > .badge.badge-salmon {
    background: var(--color-sec);
}


/*Icons Color*/
i.icon-color-salmon {
    background: none;
}

i.icon-color-salmon {
    color: var(--color-sec);
    border: solid 1px var(--color-sec);
}



/*Icons Background Color*/
i.icon-bg-salmon {
    color: #fff;
    border-color: transparent;
}

i.icon-bg-salmon {
    background: var(--color-sec);
}


/*Text Highlights*/
.text-highlights-salmon {
    background: var(--color-sec);
}


/*Panel Salmon*/
.panel-salmon {
    border-color: var(--color-sec);
}

    .panel-salmon > .panel-heading {
        background: var(--color-sec);
    }


/*progress-bar (colors)*/
.progress-bar-salmon {
    background: var(--color-sec);
}


/*Text Colors*/
.color-salmon {
    color: var(--color-sec);
}


/*Background Colors*/
.bg-color-salmon {
    color: #fff;
}

.bg-color-salmon {
    background-color: var(--color-sec) !important;
}








/* paypal ***************************************************************************************************/


#paypal-container {
    background-color: #ffc439;
    height: 2em;
    width: 5em;
    cursor: pointer;
    margin-top: 1em;
}

#paypal {
    margin: auto;
    position: relative;
    top: 0.4em;
    left: 1em;
}

    #paypal:hover {
        color: white;
    }

#paypal-disabled {
    background-color: white;
    height: 3em;
    opacity: 0.5;
    position: relative;
    bottom: 2.5em;
}

#disabled-content {
    opacity: 0;
}

#disable-tabing {
    opacity: 0;
}



























/* facturas PDF - ESTO SE PODRIA SACAR A OTRO CSS APARTE */
/* ESTO AFECTA A FACTURAS Y ALBARANES EN PDF */

/* ******************************** */
/* ESTO ESTA PILLADO DIRECTAMENTE DE FRUTERIAS, REVISAR... */
/* ******************************** */


/*
    importante: hay un error al usar algunas fuentes, se muestra bien en el browser pero al generar el pdf este sale vacio. 
    ver https://stackoverflow.com/questions/6721295/google-web-fonts-and-pdf-generation-from-html-with-wkhtmltopdf
    https://stackoverflow.com/questions/41295382/custom-fonts-not-working-in-generated-pdf-using-wkhtmltopdf-library

*/
#facturaPdf {
    /*font-family: 'Roboto', serif;*/ /*si descomento esta linea, algunos pdf salen bien (facturas de albaranes pej.) y otros salen vacios (facturas de tickets, albaranes...) ver comentario y link a stackoverflow mas arriba */
}

    #facturaPdf .bloque {
        border: 1px solid #bbbbbb;
        padding: 15px 15px;
        margin-bottom: 15px;
    }

    #facturaPdf .bloqueTexto {
        padding: 10px;
    }

    #facturaPdf .bloqueAlbaranesFactura {
        border: 1px solid #dddddd;
        padding: 10px;
        margin: 10px 0px;
    }

    #facturaPdf .bloqueFacturaAlbaran {
        border: 1px solid #dddddd;
        padding: 10px;
        margin: 10px 0px;
    }

    #facturaPdf #bloqueTop {
        padding-bottom: 15px;
    }

    #facturaPdf #listado .colNumerica {
        text-align: right;
    }

    #facturaPdf #comentarios {
        border: 1px solid #dddddd;
        min-height: 50px;
    }

    #facturaPdf #numFactura {
        font-size: 15px;
        font-weight: bold;
    }

    #facturaPdf #fecha {
        font-size: 13px;
    }

    #facturaPdf #albaranes {
        font-size: 15px;
        /*font-weight:bold;*/
    }

        #facturaPdf #albaranes .fa { /* icono flecha en albaranes */
            font-size: 10px;
            color: #aaaaaa;
            padding: 0px 3px 3px 3px;
            /*font-weight:bold;*/
        }

    #facturaPdf #datosTienda {
        font-size: 13px;
        line-height: 17px;
    }

    #facturaPdf #datosCliente {
        border: 1px solid #dddddd;
        padding: 10px;
    }

    #facturaPdf .totalesTitulos {
        font-weight: bold;
        text-align: right;
        font-size: 13px;
    }

    #facturaPdf .totalesVals {
        text-align: right;
        font-size: 14px;
    }

    #facturaPdf #totalFacturaTitulo {
        font-weight: bold;
        font-size: 18px;
        margin-top: 10px;
    }

    #facturaPdf #totalFacturaVal {
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
    }


    #facturaPdf tr th {
        background-color: #08899e;
    }


    #facturaPdf a {
        color: #08899e;
    }

    #facturaPdf .sep {
        margin-bottom:5px;
    }










#pdf table.tablaPdf tr {
    page-break-inside: avoid; /* para que no corte los rows al cambiar pagina en el pdf */
}

    #pdf table.tablaPdf tr td {
        padding: 3px;
        font-size: 10px;
    }







#pdf {
    /* fuente general en los pdf */
    font-family: /*'Roboto Condensed', 'Raleway',*/ 'Nunito', sans-serif;
}

    #pdf hr {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /* datalists en pdfs */
    #pdf .dl-horizontal dd {
        padding: 3px 25px;
    }

    #pdf .dl-horizontal dt {
        margin: 3px 10px;
    }

    #pdf dd, dt {
        line-height: 1.2;
    }























/* solo para pagina contacto, d emomento lo meto aqui... pillado del template unify de assets/cs/pages/page_contact.css */
/*Contact Pages
------------------------------------*/
.map {
    width: 100%;
    height: 350px;
    border-top: solid 1px #eee;
    border-bottom: solid 1px #eee;
}

    /* important! bootstrap sets max-width on img to 100% which conflicts with google map canvas*/
    .map img {
        max-width: none;
    }

.map-box {
    height: 250px;
}

.map-box-space {
    margin-top: 15px;
}

.map-box-space1 {
    margin-top: 7px;
}

/*Custom Sky Forms (Advanced Contacts Page)*/
.sky-changes-3.sky-form,
.sky-changes-3.sky-form footer {
    border: none;
}

    .sky-changes-3.sky-form footer,
    .sky-changes-3.sky-form fieldset {
        padding: 0;
        background: none;
    }





















    /* de momento meto esto aqui... es para el dropdown de usuario en el header... esta basado en el de languages original */

/*languages*/
.header .topbar ul.languages {
    top: 25px;
    left: -5px;
    display: none;
    padding: 4px 0;
    padding-left: 0;
    list-style: none;
    min-width: 200px;
    position: absolute;
    background: #f0f0f0;
    background: var(--color-main);
    
}

.header .topbar li:hover ul.languages {
    display: block;
}

.header .topbar ul.languages:after {
    top: -4px;
    width: 0;
    height: 0;
    left: 8px;
    content: " ";
    display: block;
    position: absolute;
    border-bottom: 6px solid #f0f0f0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-left-style: inset; /*FF fixes*/
    border-right-style: inset; /*FF fixes*/
}

.header .topbar ul.languages li a {
    color: #555;
    color: white;
    display: block;
    font-size: 10px;
    font-size: 13px;
    padding: 2px 12px;
    margin-bottom: 1px;
    text-transform: uppercase;
}

.header .topbar ul.languages li.active a i {
    color: #999;
    float: right;
    margin-top: 2px;
}

.header .topbar ul.languages li a:hover,
.header .topbar ul.languages li.active a {
    background: #fafafa;
}

.header .topbar ul.languages li a:hover {
    text-decoration: none;
    color: #555;
}

/*No Topbar*/
.header.no-topbar .navbar-toggle {
    margin-top: 25px;
}



/* icono user en dropdown usuario header */
/* overrides el estilo en all.min.css */
.fa-user:before {
    content: "\f007";
    font-size:15px;
}




















/* estos son para las paginas del frontend, en ppio no las estoy usando en el backend... */


.purchase span {
    color: #333;
    display: block;
    font-size: 24px;
    line-height: 35px;
    font-weight: normal;
    margin-bottom: 12px;
}



ul.list-no-bullets {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
    margin-left:50px;
}
ul.list-no-bullets li {
    padding-bottom: 8px;
}


.purchase {
    background:#eee;
}
.service:hover i {
    color: var(--color-sec);
}

/* pagina tarifas */
.pricing-content li.ppal {
    color: #555;
    font-size: 13px;
    border-bottom: solid 1px #f5f9e7;
    background: #ddd;
}

.pricing-medium-light .pricing-head h3 {
    color: #005683 !important;
}

.pricing-medium-light .pricing-footer h4 {
    color: #005683 !important;
}

.owl-item img {
    filter: saturate(0%);
}

.owl-item img:hover {
        filter: saturate(100%);
}


.pricing-medium-light .btn-u {
    background: #fff;
    background: var(--color-main) !important;
    padding: 5px 58px;
    border: 1px solid #888;
    color:white;
}


.pricing-medium-light .pricing li i.color-dark-blue {
    color: #005683;
}

/*
ul.list-bullets-arrow li::before {
    font-family: 'Font Awesome 6 Free';
    font-family: FontAwesome;
    content: "\f061";
}


    ul.list-bullets-arrow li::before {
    top: 16px;
    right: 15px;
    content: "\f107";
}
    */




.modal-backdrop + .modal-backdrop {
    z-index: 1040;
}

.modal + .modal {
    z-index: 1050;
}



#footer .logoFooter {
    filter: saturate(0%);
    text-align: center;
    align-content:center;
    padding-bottom:20px;
}


.copyright-bis {
    background: #272727;
    text-align: center;
}


.copyright-bis a, .copyright-bis a:hover {
    color: #9abec9 !important;
}

.footer-logo {
    margin: 17px 0 20px;
    margin: 0 0 20px;
}

#footer address i {
    padding-right:20px;
}

.footer-v1 .footer {
    padding: 30px 0 20px;
}



/* en frontend, bloque testimonials */
.content-md {
    padding-top: 50px;
    padding-bottom: 80px;
}


/* box en footer con info para devs (version y fecha build/deploy) */
.footer .boxInfoDevFooter,
.footer .boxInfoDevFooter p {
    color: #aaa !important;
    font-size: 10px;
}
    .footer .boxInfoDevFooter hr {
        margin: 5px;
    }







/* sobreescribe de text.emphasis.less */
/* esto lo estoy usando en algunos sitios para pintar textos e iconos de verde (pej. en listado auditorias) */
/* pero en otros sitios estoy usando una clase mia "verde" o algo asi... mirar como unificar criterio */
.text-success {
    color: #3c763d;
    color: #008c00;
}






/* watermark en facturas */
/*
.watermark-facturas {
    font-size: 150px;
    position: absolute;
    position: fixed;
    top: 200px;
    left: 300px;
    opacity: 30%;
    transform: rotate(-25deg);
}
*/

#watermark-facturas {
    position: absolute;
    display: block;
    min-width: 100%;
    opacity: 0.5;
    text-align: center;
    background-color: transparent;
    padding: 0px;
    top: 190px;
    left: 0px;
}

#watermark-text {
    color: lightgrey;
    font-size: 150px;
    transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    opacity: 0.9;
    filter: alpha(opacity=50);
    background-color: transparent;
}








/* ojo para visualizar contraseņas. (en login, confirmEmail, changePassword...) */
.password-toggle-icon i {
    color: black !important;
    cursor: pointer;
    color: var(--color-main) !important;
}
.password-toggle-icon i:hover {
    color: black !important;
}