html {height:100%;margin:0;padding:0}
body {height:100%;margin:0;padding:0;overflow:hidden;background:black;}
/* Posición fixed para deshabilitar el "efecto rebote" en dispositivos móviles al arrastrar el fondo */
/*html,body {position:fixed;top:0;left:0;right:0;bottom:0;}*/
html,body {position:fixed;top:0; left:0; bottom:0; right:0; overflow: hidden;}
/* Efecto con inercia en scroll de subelementos en dispositivos móviles */
body * {-webkit-overflow-scrolling:touch;}
/* Page area */
#pagearea {position:absolute;top:0;left:0;right:0;bottom:0;}
/* Estilo de elementos no activos (ocultos, borrador, pendientes, programados,etc) */
.notactive {color:rgba(0,0,0,.4) !important} /* El texto está grisado */
.notactive.vcperror {color:rgba(255,0,0,0.6) !important} /* El texto está grisado */
.notactive td {color:rgba(0,0,0,0.4) !important} /* El texto está grisado */
.notactive img {opacity:.4 !important;} /* La imagen tiene transparencia y es ByN */
.notactive .colstatus img {opacity:1 !important;} /* El ícono del estado no tiene transparencia ni es ByN */
.listview li.notactive img {opacity:1 !important;} /* Listivew pone solo la images en opacity, deja las imagenes en color total*/
.listview li.notactive .images {opacity:0.4 !important;} /* Listivew pone solo la images en opacity, deja las imagenes en color total*/
/* Elements show and hide animation */
.vcpbusy {opacity:0;}
.vsmpanelbusy .vcpframebody{opacity:0;transition: opacity 0.2s}
.vsmpanelbusy .vcpbusy {opacity:1;}
/* Tabla para centrar un mensaje en un area de alto y ancho definido */
table.center {width:100%;height:100%}
table.center td {text-align:center;vertical-align:middle;}
/* Paginador secuencial */
.vcppager.sequential .pagenumber {text-align:center;border-left:0px;border-right:1px solid transparent;border-radius:0px;box-shadow:none;width:80px}
.vcppager.sequential .prevpage {border-right-color:transparent;border-top-right-radius:0px;border-bottom-right-radius:0px}
.vcppager.sequential .nextpage {border-left-color:transparent;border-top-left-radius:0px;border-bottom-left-radius:0px;box-shadow:none;}
.vcppager.sequential .prevpage:hover {border-right-color:#c0c0c0;}
.vcppager.sequential .nextpage:hover {border-left-color:#c0c0c0;}
.vcppager.sequential .vcpbutton:disabled {opacity:1;display:inline-block !important;pointer-events:none;}
.vcppager.sequential .vcpbutton:disabled img {display:none}
.vcppager.sequential .vcpbutton.selected {background:#c8c8c8;color:white;border-color:#888;text-shadow:rgba(0,0,0,0.5) -1px -1px}
/* Paginador numérico */
.vcppager.numeric button {text-align:center;margin-left:5px}
/*Gap del pathArea*/
.vcppath span.gap {background:url('/panel/theme/default/img/treeview/expandcollapse.png') no-repeat -3px 50%;;width:8px;display:inline-block;height:20px;margin:0 7px;vertical-align:middle;border:0 !important;}
.vcppath span.gap:first-child {margin-left:0}
.vcppath>span.text {display:inline-block;height:20px;line-height:20px;vertical-align: middle;}
/* Search area */
#searcharea{ display: inline-block;position: relative; vertical-align: top;margin-right:8px}
#searcharea.collapsed {width:78px;transition:width 200ms;}
#searcharea.expanded {width:500px;transition:width 200ms 200ms;}
#searcharea>.vcpbutton{position:absolute;}
#searcharea>.dialogbuttons{opacity:0;visibility: hidden; position: absolute;display: inline-block;vertical-align: top; margin-left: -3px; transform: translate(-100%, 0);}
#searcharea.expanded .dialogbuttons{opacity: 1;visibility: visible;transition: opacity 0.25s 0.5s;}
/* Elementos del search colapsado */
#searcharea>.vcpbutton {z-index:1;opacity:1;transition:opacity 100ms 200ms;margin-top:0 200ms;}
#searcharea>.vcpbutton .icon {transform:scale(1);width:18px;transition:width 100ms 300ms, transform 100ms 400ms;}
#searcharea>.vcpinput.suggest {opacity:0;transition:opacity 100ms 200ms;}
#searcharea>.vcpinput.suggest.single{overflow: hidden !important;}
#searcharea>.vcpinput.suggest.single.writing input {position:absolute}
#searcharea>.vcpinput.suggest.single input{left:23px;right:23px;width:calc(100% - 85px) !important}
#searcharea>.vcpinput.suggest.single.focus.writing ul{position:static;opacity:1;margin-top:0;}
#searcharea>.search {opacity:0;transition:opacity 100ms 200ms;}
/* Elementos del search expandido */
#searcharea.expanded>.vcpbutton {opacity:0;transition:opacity 100ms 150ms,margin-top 0s 300ms;margin-top:-1000px;}
#searcharea.expanded>.vcpbutton .icon {transform:scale(0);width:0px;transition:transform 200ms,width 100ms 100ms;}
#searcharea.expanded>.vcpinput.suggest {opacity:1;transition:opacity 100ms 150ms}
#searcharea.expanded>.vcpinput.vcpinput.suggest input{width:100%}
#searcharea.expanded #search_filters_ddp{width: calc(500px - 1em);padding:1em 0.5em}
#searcharea.expanded #search_filters_ddp h3{margin-bottom:0.5em}
#searcharea.expanded #search_filters_ddp>.dates-inline,
#searcharea.expanded #search_filters_ddp>h4,
#searcharea.expanded #search_filters_ddp>.vcpformel{max-width: calc(100% - 1em); margin: 0 auto;margin-bottom:1em}
#searcharea.expanded #search_filters_ddp>h4{margin-bottom: 0;}
#searcharea.expanded #search_filters_ddp>.dates-inline{display: flex;gap:1.7em}
#searcharea.expanded #search_filters_ddp>.dates-inline .vcpformel.datetime{width: calc(50%);margin-right:0;margin-bottom:0}
#searcharea.expanded #search_filters_ddp>.dates-inline .vcpformel.datetime .vcpinput.date{padding-right: 0}
#searcharea.expanded #search_filters_ddp .pagebuttons{text-align: right;max-width: calc(100% - 1em);margin:0 auto;padding-top:0.5em}
#searcharea.expanded #search_filters_ddp .pagebuttons button{text-align: center;}
#searcharea.expanded #search_filters_ddp .pagebuttons button:hover{color:#fff}
#searcharea.expanded>.search {opacity:1;transition:opacity 100ms 150ms;}
#searcharea.expanded .vcpinput li:not(:only-child) {max-width:27% !important;transition:width 200ms;} /* Si tiene más de una etiqueta empieza a limitar el ancho a 100px */
#searcharea.expanded .vcpinput li.searchitem {position:absolute;width: calc(100% - 11px)}
#searcharea.expanded.filters .vcpinput li.searchitem {width: calc(100% - 39px)}
/* #cancelbutton con clase .toprightcancel es el botón para cerrar ventanas popup arriba a la derecha */
#cancelbutton.toprightcancel {position:fixed;top:12px;right:12px;width:42px;height:42px;min-width:0;padding:0;border-radius:50%;border:none;box-shadow:none;
background-color:transparent;opacity:.5;background-image:url(/panel/theme/default/img/common/cancelbutton.png);background-repeat:no-repeat;
background-position:50%;transition:background-color 200ms, opacity 200ms,transform 200ms;}
#cancelbutton.toprightcancel:hover {opacity:1;background-color:rgba(0,0,0,0.05);}
#cancelbutton.toprightcancel:active{transform:scale(0.92);background-color:rgba(0,0,0,0.1);}
#cancelbutton.toprightcancel:active:after {background:none;}
/* Pin */
/*
#pinbutton {position:fixed;top:14px;right:50px;width:28px;height:28px;min-width:0;padding:0;border-radius:50%;border:none;box-shadow:none;
background-color:transparent;opacity:.5;background-image:url(/panel/theme/default/img/common/pin.png);background-repeat:no-repeat;background-size:16px 16px;
background-position:50%;transition:background-color 200ms, opacity 200ms,transform 200ms;}
*/
#pinbutton {position:fixed;top:12px;right:50px;width:42px;height:42px;min-width:0;padding:0;border-radius:50%;border:none;box-shadow:none;
background-color:transparent;opacity:.5;background-image:url(/panel/theme/default/img/common/pin.png);background-repeat:no-repeat;
background-position:50%;transition:background-color 200ms, opacity 200ms,transform 200ms;}
#pinbutton.pinned {background-image:url(/panel/theme/default/img/common/pinned.png)}
#pinbutton:hover {opacity:1;background-color:rgba(0,0,0,0.05);}
#pinbutton:active{transform:scale(0.92);background-color:rgba(0,0,0,0.1);}
#pinbutton:active:after {background:none;}
/* #cancelbutton con formato toprightcancel en el previewpanel */
#previewarea #cancelbutton.toprightcancel {position:absolute;right:5px;top:5px;}
/* Percent bar */
.vcppercentbar {width:100%;text-align:left;position:relative;}
.vcppercentbar .text-wrapper {position:relative;height:1.3em;margin-bottom:0.1em;}
.vcppercentbar .text {display:inline-block;margin-right:0.3em;vertical-align:top;}
.vcppercentbar .percentage {display:inline-block;vertical-align:top;}
.vcppercentbar .total {display:inline-block;vertical-align:top;}
.vcppercentbar .bar {position:relative;width:100%;height:10px;border-radius:3px;background:rgba(0,0,0,0.2);}
.vcppercentbar .mask {z-index:1;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;box-shadow:inset rgba(0,0,0,0.2) 0 0 2px;include:border-radius;}
.vcppercentbar .value {position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:inset rgba(0,0,0,0.2) 0 0 2px;transition:width 1s linear, background-color 1s linear;background-color:var(--vcp-main-color);}
/* Percent bar en ListView */
.listview li .vcppercentbar .text {padding:0;} /* Mata un padding de la regla .listview .text */
.listview li .vcppercentbar .percentage:before{content:"(";display:inline-block;}
.listview li .vcppercentbar .percentage:after{content:")";display:inline-block;}
.listview li .vcppercentbar .total {display:none;}
.listview li .vcppercentbar .bar {height:4px;margin-top:4px;}
/* Percent bar en Preview Panel */
.preview .vcppercentbar .bar {height:12px;margin:2px 0px;}
.preview .vcppercentbar .percentage:before{content:"(";display:inline;}
.preview .vcppercentbar .percentage:after{content:")";display:inline}
.preview .vcppercentbar .total {display:none;}
/*Panel Progress vcpProgressPanel*/
#panelprogress .vcppercentbar {margin-top:38px;transition:margin-top 0.5s}
#panelprogress .vcppercentbar .text-wrapper{direction:rtl}
#panelprogress .vcppercentbar .text-wrapper .text{padding-left:5px}
#panelprogress .vcppercentbar .total {display:none;}
#panelprogress .vcppercentbar .bar {height:20px;margin:2px 0px;}
#panelprogress #progresstext .time .minutes,#panelprogress #progresstext .time .minute,#panelprogress #progresstext .time .seconds,#panelprogress #progresstext .time .second{display:none}
#panelprogress #progresstext .time.minutes .minutes{display: inline}
#panelprogress #progresstext .time.minute .minute{display: inline}
#panelprogress #progresstext .time.seconds .seconds{display: inline}
#panelprogress #progresstext .time.second .second{display: inline}
#panelprogress #progressname{min-height: 18px}
#panelprogress #progresstext{margin-top:20px}
#panelprogress #progresserror{color:#b00000;margin-top:4px}
#panelprogress #progresserror a{color:#b00000}
#panelprogress #progresstext .amount .singular,#panelprogress #progresstext .amount .plural{display:none}
#panelprogress #progresstext .amount.singular .singular{ display:inline}
#panelprogress #progresstext .amount.plural .plural{ display:inline}
#panelprogress #progresserrorlist .errors{margin-left:20px}
#panelprogress #progresserrorlist .errors ul{padding:0}
#panelprogress #progresserrorlist .errors ul li{padding:0}
#panelprogress #progresserrorlist .errors ul li:hover{border-color:transparent;background:transparent}
#panelprogress #progresserrorlist .errors ul li:active{border-color:transparent;background:transparent}
#panelprogress #progresserrorlist ul.vcplist {height:200px;overflow:auto}
#panelprogress #progresserrorlist ul.vcplist>li{padding:5px}
#panelprogress.finish #progresserrorlist ul.vcplist {height:290px}
#panelprogress.finish .vcppercentbar {margin-top:15px}
/* Status button list */
DIV.statusbuttonlist {position:absolute;width:174px;z-index:1;text-align:left;include:dropdown-white-background;padding:0;} /* Layout */
/*DIV.statusbuttonlist:after {include:dropdown-white-arrow-bottom;bottom:-19px}*/
DIV.statusbuttonlist LI {position:relative;overflow:hidden;padding:7px 7px;line-height:18px;margin-bottom:-1px;include:light-gray-item;include:border-radius;cursor:default;white-space:nowrap;text-overflow:ellipsis}
DIV.statusbuttonlist LI:hover {include:light-gray-item-hover;}
DIV.statusbuttonlist LI:active{include:light-gray-item-selected;}
DIV.statusbuttonlist LI a {line-height:18px;text-decoration:none;color:inherit;}
DIV.statusbuttonlist LI img {width:16px;height:16px;vertical-align:middle;margin-top:-3px;margin-right:5px;}
/* Distribución en columnas en formulario VSM (viejo) */
TD.column {vertical-align:top;padding-left:30px;position:relative;}
TD.column:first-child {padding-left:0;}
/* Distribución en columnas en formulario VSM (nuevo) */
.vcpcolumn {vertical-align:top;display:inline-block;position:relative;margin-right:30px;width:400px;max-width:100%;/*background:rgba(255,0,0,0.03);*/order:1;}
.vcpcolumn.vcpfirstcolumn {order:0}
.vcpcolumn:last-of-type {margin-right:0}
/*
No funciona porque cuando cae la columna sigue teniendo el margen izquierdo
.vcpcolumn:not(.vcphidden)+.vcpcolumn {margin-left:30px;} /* Si es una segunda columna y la primera no está oculta le agrega un padding
*/
/* VSM Input Box */
.box {border:1px solid #c5c5c5;border-bottom:1px solid #fff;border-right:1px solid #fff;border-radius:3px;box-shadow:inset rgba(0,0,0,0.2) 0 0 3px;background:#f2f2f2;color:#444;box-shadow:inset rgba(0,0,0,0.2) 0 0 2px;overflow:hidden;padding:10px}
.box .title {font-weight:bold;margin-bottom:10px}
.iconbullet {line-height:20px;vertical-align:top;}
.iconbullet img {width:16px;height:16px;vertical-align:top;margin-right:0.35em;margin-top:1px}
/* Canvas */
.canvas {overflow:hidden;position:relative;include:border-radius;background-image:url(/panel/theme/default/img/canvas/full.jpg);background-size:cover;background-image:radial-gradient(circle at top, #777 0%, #111 100%);}
.vcpbglight .canvas {include:light-inset;background-color:#111 !important;}
.canvas table {width:100%;height:100%}
.canvas table td {width:100%;height:100%;overflow:hidden;text-align:center}
.preview button {opacity:.7} /* Formatea los botones del preview */
/* VSM Input Icon Panel */
div.iconlist {height:auto;overflow:auto !important;padding:3px;background:#fff}
div.iconlist>div {border:1px solid transparent;display:inline-block;padding:10px;position:relative;}
div.iconlist>div div {position:absolute;top:50%;left:0px;line-height:20px;margin-top:-10px;width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis}
div.iconlist>div img {position:static}
div.iconlist>div:hover {background-color:#fafafa;border:1px solid #d8d8d8;color:#000;border-radius:3px}
div.iconlist.icon64>div {width:64px;height:64px;}
div.iconlist.icon64>div div {position:absolute;top:50%;left:0px;line-height:20px;margin-top:-10px;width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;font-size:9px}
div.iconlist.icon64>div img {width:64px;height:64px;}
/* Objeto de area completa */
.fullarea {position:absolute !important;top:12px;left:12px;bottom:12px;right:12px;height:auto !important;/* width:auto !important;max-width:auto !important;;max-height:auto !important; Comentado porque arruinaba #previewpanel en /panel/content/content/selectTemplate.php*/}
.fullarea.withtoolbar {top:49px;}
.fullarea .fullarea {top:0;left:0;bottom:0;right:0}
.fullarea .fullarea.withtoolbar {top:37px}
/*Area de errores*/
.errorarea {width:100%;position:absolute;top:-33px;text-align:center}
.errorarea .error{border-radius:3px;color:#c00000;background-color:rgba(192,0,0,0.1);border:1px solid rgba(192,0,0,0.2);overflow:hidden;text-overflow:ellipsis;padding:3px 5px 3px 5px;display:inline-block;
padding-left: 23px;
background-image: url('/panel/img/icons16/warning.png');
background-repeat: no-repeat;
background-position: 4px 4px;
}
.errorarea .error a{color:#c00000;text-decoration:underline}
div.help {display:inline-block}
/* Led del botón */
button:not(.selected) .vcpchartled {box-shadow:1px 1px #fff,inset 1px 1px rgba(0,0,0,0.3) !important}
.vcpchartled {display:inline-block;vertical-align:middle;margin-left:0.3em;margin-right:0.3em;margin-bottom:0.2em;height:0.7em;width:0.7em}
/* Counters */
.vcpcounters {position:relative;white-space:nowrap;overflow:hidden}
.vcpcounters>.title {min-width:100px;color:#555;text-align:center;display:inline-block;font-size:26px;padding:0 !important;margin-right:0.4em;vertical-align:middle;} /* Título del bloque */
.vcpcounters>.title .subtitle {font-size:13px;font-weight:normal;}
.vcpcounters>.vcpcounter {margin-right:10px;display:inline-block}
/*Stats update*/
.vcpstatsupdate {position:absolute;right:110px;bottom:-6px;text-align:center;background-color:transparent;border-color:1px solid transparent;padding:3px 5px 3px 5px;}
/*Stats updatedate, social updatedate*/
.vcpstatsupdate .error ,.vcpcounters .error {border-radius:3px;color:#c00000;background-color:rgba(192,0,0,0.1);border:1px solid rgba(192,0,0,0.2);overflow:hidden;text-overflow:ellipsis;padding:3px 5px 3px 5px;margin-left:4px}
/* Stats details */
#statsdetails {position:absolute;margin-top:40px;bottom:0;width:100%;}
#statsdetails .vcpframe .title {margin-top:20px}
/* Contadores de estadísticas */
.vcpcounter {width:130px;height:100%;box-sizing:border-box;float:left;margin-right:8px;}
/* Botones en los contadores de estadísticas */
.vcpcounter .vcpbutton {display:flex;align-items: center;box-sizing:content-box;width:calc(100% - 6px);height:calc(100% - 6px);margin:2px;padding:0;include:light-inset;border:1px solid #d2d2d2;} /* Cuando el counterchart es botón */
.vcpcounter .vcpbutton.selected {margin:0;border:3px solid var(--vcp-main-color) !important;background:white !important;}
/* Datos del contador reducido */
.vcpcounter.small {width:130px;height:calc(50% - 4px);margin-bottom:8px;}
/* Datos del contador */
.vcpcounter .data {width:100%;padding:0 10px;}
.vcpcounter .title {text-align:center;padding-bottom:0px !important;margin-bottom:10px}
.vcpcounter .title a {text-decoration:none}
.vcpcounter .value {text-align:right;font-size:28px;line-height:28px;font-size:28px;}
.vcpcounter .value.d9 {font-size:23px}
.vcpcounter .value.d10 {font-size:20px}
.vcpcounter .value.d11 {font-size:18px}
.vcpcounter .value.d13 {font-size:16px}
.vcpcounter .text {text-align:right;line-height:20px;include:light-gray;padding-right:2px;}
.vcpcounter .text img {margin-right:5px;width:16px;height:16px;display:none;}
.vcpcounter .variation {color:#999;text-align:right;width:150px}
.vcpcounter .variation>span{ vertical-align: middle; line-height: 12px}
.vcpcounter .variation .positive {color:#009900}
.vcpcounter .variation .negative {color:#bb0000}
/* Datos del contador reducido */
.vcpcounter.small .value {padding-top:0px;font-size:18px;line-height:1.2em}
.vcpcounter.small .value.d13 {font-size:16px}
.vcpcounter.small .text {line-height:1.4em;padding-right:0;}
/* Ranking de estadísticas */
UL.vcpranking {list-style-type: none;margin:0;padding:0;}
UL.vcpranking LI {padding:8px 6px;position:relative;margin-bottom:0.2em;}
@media (max-height:768px) {UL.vcpranking LI {padding:4px 6px;position:relative;margin-bottom:0;}}
UL.vcpranking LI .rank {display:inline-block;margin-right:0.5em;vertical-align:top;background-color:rgba(0,0,0,0.2);color:rgba(255,255,255,0.9);width:24px;height:24px;line-height:24px;text-align:center;border-radius:12px;}
UL.vcpranking LI .content {display:inline-block;vertical-align:top;width:calc(100% - 24px - 5em);overflow:hidden;line-height:24px;}
UL.vcpranking LI .content a {white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;display:inline-block;margin-bottom:0;margin-top:2px}
UL.vcpranking LI .count {width:4em;margin-left:0.5em;display:inline-block;vertical-align:top;line-height:24px;text-align:right;}
/* En algún momento dejar de usar vcpstatspanel y usar vcppanel */
.vcpstatspanel {background:white !important;border:1px solid rgba(0,0,0,0.1);box-shadow:rgba(0,0,0,0.02) 2px 2px 0 1px;}
.vcppanel {
background: white !important;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: rgba(0,0,0,0.02) 2px 2px 0 1px;
padding:20px;
box-sizing:border-box;
}
.vcppanelcontent {
width:100%;
height:100%;
overflow:hidden;
position:relative;
}