body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.25;
    /*font-family: "Segoe UI","Segoe WP",Arial,Sans-Serif;*/
}

#divPagina:not(.no-min-width), .fixed-header {
    min-width: 300px;
}

#divPagina.no-min-width apl-page .PageHeader {solo aplica a la clase PageHeader de divPagina que tiene la clase no-min-width
    padding: 11px 10px 10px 10px;
}
.contenedorPrincipal {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: green;
    width: 100%;
}

.PageHeader {
    position: relative;
    z-index: 999;
    padding: 6px 10px 6px 10px;
    box-shadow: 0px 3px 2px -1px rgba(0,0,0,0.3);
    margin-bottom: 1px;
    height: 36px;
    display: flex;
    align-items: center;
    flex-direction: row;
}

    .PageHeader span {
        /*font-size: .75rem; 01/03/2018 Se comenta ya que se aprecia que la cabecera no esta alineando bien*/
        color: #535353;
    }

    .PageHeader .head-title { /* hay otra definición para móbiles en APLayoutMobile.css*/
        font-size: 1.4rem;
        color: #000;
    }

    .PageHeader .head-subTitle-bl {
        font-size: 0.6rem;
        color: #535353;
    }


    .PageHeader span.header-link {
        font-size: .80rem;
    }

    .PageHeader .masinfo, #PageHeader .masinfolbl, #PageHeader .masinfotxt {
        font-size: .75rem;
    }

    .PageHeader .masinfolbl {
        font-weight: 400;
    }

    .PageHeader .head-title-breadCrum { /* hay otra definición para móbiles en APLayoutMobile.css*/
        font-size: 1.4rem;
        color: #000;
    }

    /*#PageHeader span.header-link
{
    font-size:.85rem;
}*/

    .PageHeader .classAviso span {
        font-size: .7rem;
        color: #FF0000;
    }

    .PageHeader .header-link:hover {
        color: #2E86CD; /*#60A4DC*/
    }

    /*Solo se aplica a los titulos que contienen migas de pan*/
    .PageHeader span.breadcrumbs {
        color: #60a4dc; /*#535353*/
        font-size: .7rem;
    }


.header-link, .cursorPointer {
    cursor: pointer;
}

.PageHeader .breadcrumbs-title {
    color: #535353 !important; /*#60a4dc*/
}

.PageHeader.header-2 {
    height: 28px;
    padding-left: 20px !important;
    padding-top: 5px;
}

.masinfobold {
    font-size: .75rem !important;
    font-weight: 700;
}

.header-marR {
    padding-right: 30px !important;
}

/************************************************************************
    * Estilos SubMenú
**/
.divSubMenu .conf-body ul li {
    padding: 0px 10px;
}

.conf-section ul li > span {
    padding-left: 12px;
    padding-right: 10px;
}

.tooltiptext-visible .divSubMenu {
    display: inline-block !important;
}

.closeDivSubMenu {
    background-image: url(/cassette.axd/file/WindowModal/close-alpha-63df89dde40d4bdbaf4c1799be473442a19057fa.png);
    background-color: transparent;
    background-position: center center;
    background-size: 13px;
    background-repeat: no-repeat;
    height: 51px;
    width: 45px;
    display: inline-block;
    cursor: pointer;
}

.close-div-submenu-mobile {
    background-image: url(/cassette.axd/file/WindowModal/Close_mobile-812b27e0200b89c11094bf597a0c0dab0fd6afb8.png);
    background-color: transparent;
    background-position: center center;
    background-size: 17px;
    background-repeat: no-repeat;
    height: 25px;
    width: 30px;
    display: inline-block;
    cursor: pointer;
    margin-top: 5px;
    /*background-size: cover;*/
}

/*Flecha a la izquierda*/
.divSubMenu.langltr::after, .divSubMenu.langltr::before {
    content: "";
    position: absolute;
    top: 26px;
    right: 100%;
    margin-top: -5px;
    border-width: 8px;
    border-style: solid;
}

.divSubMenu.langltr::before {
    border-color: transparent #CBC7C8 transparent transparent;
}

.divSubMenu.langltr::after {
    left: -15px;
    right: auto;
    border-color: transparent #FFF transparent transparent;
}

/*Flecha a la derecha*/
.divSubMenu.langrtl::after, .divSubMenu.langrtl::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 100%;
    margin-top: -5px;
    border-width: 8px;
    border-style: solid;
}

.divSubMenu.langrtl::before {
    border-color: transparent transparent transparent #CBC7C8;
}

.divSubMenu.langrtl::after {
    left: auto;
    right: -15px;
    border-color: transparent transparent transparent #FFF;
}


.divSubMenuSeparador {
    width: auto;
    border-bottom-style: solid;
    border-bottom-color: rgb(179, 179, 179);
    border-bottom-width: 2px;
}

.divSubMenu {
    height: auto;
    display: none;
    border: 1px solid #333;
    box-shadow: rgb(0, 0, 0) 5px 5px 20px -3px !important;
    -webkit-box-shadow: rgb(0, 0, 0) 5px 5px 20px -3px !important;
    -moz-box-shadow: rgb(0, 0, 0) 5px 5px 20px -3px !important;
    border-radius: 6px !important;
}

    .divSubMenu .apl-divBlock-title {
        width: auto;
        cursor: default;
        background-color: #FFF;
        border-radius: 6px !important;
    }

    .divSubMenu > .panel-basico {
        margin: 10px;
    }

        .divSubMenu > .panel-basico > .panel-row > div {
            margin-top: 12px;
        }

/**
    * Fin Estilos SubMenú
***********************************************************
    * Estilos div Pestañas superior
**/
.apl-divBar {
    position: relative;
    z-index: 500;
}


.panel-border-content-tab .apl-divTabs {
    margin-top: 0px;
    margin-right: 0px;
    background-color: #EFEFEF;
    border-bottom: 0;
}

.panel-frames-content-basico {
    /*margin-left:30px;
    margin-right:30px;*/
}

    .panel-frames-content-basico .apl-divTabs {
        min-width: 200px;
        margin-top: 0px;
    }

.apl-divTabs {
    height: 40px;
    margin-top: 2px;
    background-color: #fff;
    padding-bottom: 0;
}

    .apl-divTabs .barBut {
        color: #686667;
        text-transform: uppercase;
        font-size: .75rem;
        font-weight: 600;
    }

.body-tree .apl-divTabs div[class^='apt-item'] {
    height: 31px;
}

.apl-divTabs > div:not(.apt-tab) {
    display: inline-block;
}

.barSep, .barSepHover {
    display: none;
}

.apl-divTabs, .barSepHover {
    /*background-color:#fff;*/
    color: #60A4DC;
    text-decoration: none;
}

.apl-divTabs {
    display: flex !important;
    box-sizing:border-box;    
}

/* TCR 21/03/2018 Se ha añadido .divMenu:not(:first-of-type) para que no lo aplique si en la página hay menus secundarios */
.panel-border-tree-content .barBut, .panel-border-tree-content .barHBut, .panel-border-content .divMenu:not(:first-of-type) .barBut, .panel-border-content .barHBut,
.panel-menu-white .barBut, .panel-menu-white .barHBut,
.panel-border-content-tab .barBut, .panel-border-content-tab .barHBut, .menu-style-white .barBut, .menu-style-white .barHBut {
    background-color: #fff;
}

.buttons-menu-tree .barBut, .buttons-menu-tree .barHBut {
    background-color: transparent;
}

.apl-tsMenu td td:hover {
    border-bottom: 0px;
}

.apl-tabsBarButtons {
    display: inline-flex;
    background-color: #EFEFEF;
    width: 100%;
}

    .apl-tabsBarButtons > div {
        align-items: flex-end;
    }

    .apl-tabsBarButtons .apt-item {
        margin-bottom: 3px;
        height: 39px !important;
        min-width: 80px;
        padding: 0 5px;
    }

.barFlipImage { /*gira la imagen cuando tiene direccionalidad en idiomas de escritura der-izq*/
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    bottom: 0px;
    position: relative;
}

.apl-divBar .barButHover:hover {
    outline: 0;
}

/**
    * Fin div Pestañas superior
**/

.apl-menuBarTree, .apl-menuBarMenu, .apl-estruct {
    background-color: #f2f2f2;
    right: 0;
    top: 0;
    left: 0px;
    padding: 8px 0px 8px 0px;
}

.apl-menuBarMenu { /*--------------------quitarlo junto con las llamadas en las páginas*/
    left: 0px;
}

    .apl-menuBarTree .barBut, .apl-menuBarMenu .barBut, .apl-estruct .barHBut {
        background-color: transparent; /*#f2f2f2;*/
    }

.apl-menuBarMenu_L { /*--------------------quitarlo junto con las llamadas en las páginas*/
    margin-left: 10px;
    padding: 0;
}

.apl-me {
    width: 394px;
    float: left;
    padding: 0;
    background-color: transparent;
    margin-top: 12px;
}


/*-------------------Estilos para barra----------------------*/
/*barBut {
        color: #686667;
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: 600;
    }*/

.barButHover {
    padding-left: 5px;
    padding-right: 5px;
    min-width: 25px;
    color: #656565;
}

    .barButHover span.barLblAlone, .barButHover span.barLblRoot { /*rolover de botones principales, cambia color del texto, no subopciones*/
        /*color: #60A4DC !important;*/
        background-color: transparent;
    }

.divMenu .barLblAlone, .divMenu .barLblRoot {
    /*color:#666;*/
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-family: "Segoe UI","Segoe WP",Arial,Sans-Serif;
}

.apl-menuBarTreeTop {
    margin-top: 2px;
    padding-left: 8px;
}

.apl-menuBarForm {
    margin-left: 20px;
    margin-right: 20px;
}
/*-------------------End estilos para barra----------------------*/
.panel-tree {
    background-color: #fff;
}

.apwc_grid, .panel-tree, .pnl-filtro {
    border: 2px solid #ccc;
    /*-webkit-box-shadow: 0px 0px 2px 2px rgba(1,1,1,0.50);
-moz-box-shadow: 0px 0px 2px 2px rgba(1,1,1,0.50);
box-shadow: 0px 0px 2px 2px rgba(1,1,1,0.50);*/
}

.pnl-FiltroTree {
    border-bottom: 0px;
}

.pnl-filtro {
    margin-left: 10px;
    margin-right: 12px;
    overflow: auto;
    padding-bottom: 8px;
}

    .pnl-filtro .CampFiltroT, .pnlfiltro-noborder .CampFiltroT, .pnlForm-noborder .CampFiltroT {
        margin-top: 15px;
        padding-bottom: 12px;
    }

    .pnl-filtro .mar-L, .tbl-filtro .mar-L, .pnlfiltro-noborde .mar-L {
        margin-left: 40px;
    }

    .pnl-filtro .first {
        margin-left: 55px;
        /*margin-left:32px;*/
    }

.btnFiltroT {
    margin-top: 10px;
}

.pnl-filtro .btnFiltroT {
    margin-top: 25px;
}

.pnlfiltro-noborder .btnFiltroT {
    margin-top: 28px;
}

.pnlForm-noborder {
    margin-right: 40px;
    overflow: auto;
    padding-bottom: 8px;
    margin-top: 20px;
    margin-left: 40px;
    min-height: 50px;
}

.pnlfiltro-noborder {
    margin-right: 10px;
    overflow: auto;
    padding-bottom: 8px;
    margin-top: 20px;
    margin-left: 22px;
    min-height: 50px;
    padding-left: 25px;
}

    .pnlfiltro-noborder .mar-L {
        margin-right: 50px;
    }

.panelfiltro-noborder {
    overflow: auto;
    padding-bottom: 8px;
    margin-top: 20px;
    margin-left: 22px;
    margin-right: 20px;
    min-height: 50px;
}

    .panelfiltro-noborder .mar-L {
        margin-right: 20px;
    }


.pnlfiltrosimple {
    margin: 40px 20px 20px 100px;
}

    .pnlfiltrosimple .CampFiltroT {
        margin-top: 25px;
    }

.pnlFilter_C {
    margin: 0px;
    border: 0px;
}
/*Posicion del grid en las paginas de arbolclases*/
.apl-gridTree {
    position: absolute;
    left: 10px;
    right: 14px;
    bottom: 14px;
    top: 114px;
}

.apl-gridTree_1 {
    border: 2px solid #ccc;
    border-top: 0px;
    right: 12px;
}

.apl-gridTree .fixedgrid {
    left: 13px;
    top: 6px;
    right: 15px;
    bottom: 12px;
}

.apl-editTree {
    border: 2px solid #ccc;
}

.apl-gridTreeExt {
    position: absolute;
    border: 2px solid #ccc;
    border-top: 0px;
    right: 12px;
    bottom: 10px;
    left: 10px;
}

.apl-gridTreeInt {
    position: absolute;
    left: 13px;
    right: 15px;
    bottom: 15px;
    top: 6px;
}

.apl-gridTreeIntSimple {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: 5px;
}

.apl-panel {
    /*margin:20px 20px 20px 30px;*/
    margin-top: 20px;
    margin-left: 28px;
    margin-right: 10px;
    margin-bottom: 20px;
}

    .apl-panel .CampFiltroT {
        margin-top: 20px;
    }

.apl-headershadow {
    box-shadow: 0px 3px 12px 0px rgba(0,0,0,0.8);
}

    .apl-headershadow > .apl-menuBarTree {
        margin-top: 5px;
    }

.apl-menuBarMenuForms {
    margin-top: 3px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.80rem;
}

.panel-level {
    border: 0;
}

    .panel-level td {
        border: 1px solid #ccc;
        padding: 5px;
    }

.panelSimpleEspaciado {
    margin: 20px 35px 30px 35px;
}

/*Estilos para formularios de entrada de datos tipo ventidad.aspx*/
.marTable {
    overflow: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    clear: both;
    margin: 0 10px;
}

    .marTable div {
        margin-top: 30px;
        margin-left: 50px;
    }


.elementTopXL {
    margin-top: 40px;
}

.pnlDivi {
    border: 1px solid #ccc;
}

.labelPanelInput {
    margin-left: 35px;
    margin-top: 30px;
}

.panelInpunt {
    margin: 30px;
    margin-bottom: 0px;
    padding: 15px;
    padding-bottom: 20px;
    /*outline:1px solid #ccc;*/
    overflow: auto;
    background-color: #f7f7f7; /*#FBFCFC;*/
}

.panelInput_nocolor {
    background-color: #fff;
    margin-top: 15px;
}

.panelInpunt_center {
    margin: 50px 20px 20px 100px;
}

.labelPanelInput_2 {
    margin-left: 50px;
    margin-top: 30px;
}

.panelInpunt_2 {
    margin-left: 50px;
    margin-right: 50px;
}
/* La aplico cuando un panel tiene una label de titulo*/
.panelInputLabel {
    margin-top: 4px;
}

.panelInpunt .CampFiltroT {
    margin-top: 25px;
}

.barrapanel {
    background-color: #fff;
    height: 4px;
    width: 97%;
    border: none;
}

.pnlinformation {
    outline: 1px solid #ccc;
    overflow: auto;
}

.fixedgrid {
    left: 30px;
    right: 30px;
    bottom: 30px;
}

.fixedgrid_2 {
    left: 13px;
    right: 15px;
    bottom: 13px;
}

.filtrogrid {
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 28px;
}

a {
    color: #60a4dc;
    text-decoration: underline;
}

.apc-width-t10, .div-t10 {
    width: 50px;
}

.apc-width-t12 {
    width: 60px;
}

.apc-width-t18 {
    width: 105px;
}

.apc-width-t20, .div-t20 {
    width: 120px;
}

.apc-width-t25, .div-t25 {
    width: 145px;
}

.apc-width-t30, .div-t30 {
    width: 170px;
}

.apc-width-t35, .div-t35 {
    width: 195px;
}

.apc-width-t40, .div-t40 {
    width: 220px;
}

.apc-width-t45, .div-t45 {
    width: 260px;
}

.apc-width-t50, .div-t50 {
    width: 300px;
}

.apc-width-t55 {
    width: 370px;
}

.apc-width-t60, .div-t60 {
    width: 500px;
}

/*Para el control fecha se le da un ancho mayor ya que al no llevar la x de borrar no se alinea bien con el resto de elementos*/
.apc-calendar.apc-width-t30 {
    width: 184px;
}
/*Clases para la propiedad LabelWidthType de los controles se fija el ancho*/
.apc-label-width-t10 {
    width: 60px;
}

.apc-label-width-t12 {
    width: 70px;
}

.apc-label-width-t18 {
    width: 104px;
}

.apc-label-width-t20 {
    width: 110px;
}

.apc-label-width-t25 {
    width: 140px;
}

.apc-label-width-t30 {
    width: 170px;
}

.apc-label-width-t40 {
    width: 270px;
}

.apc-label-width-t45 {
    width: 330px;
}

.apc-label-width-t50 {
    width: 350px;
}

.apc-label-width-t55 {
    width: 475px;
}

.apc-label-width-t60 {
    width: 600px;
}
/* /propiedad LabelWidthType */
/**
    NUEVOS ESTILOS
*/
.panel-col-5 {
    width: 49%;
    float: left;
}


/*01/03/2018 Se modifica el margin pasando de 30px a 25px, el problema es que no alineaba bien cuando bajo habia un basico ejem. ConfigurableGrid_Create.aspx*/
.panel-general-noborder {
    margin-right: 25px;
    margin-left: 25px;
    padding-left: 25px;
    /*20/02/2018 Se añade el padding-right para que deje el margen a la derecha*/
    padding-right: 25px;
    /*min-height: 60px;*/
}

.panel-general-filtro {
    margin-right: 20px;
    margin-left: 20px;
    padding-left: 20px;
}

.panel-border-tree-content .panel-general-noborder {
    margin-left: 0px;
    margin-top: 2px;
}

.panel-general-doble {
    /*margin-top:50px;
    margin-left:50px;
    margin-bottom:50px;
    min-height: 120px;*/
}

.panel-borderonly {
    border: 2px solid #ccc;
}

.panel-menu-white {
    border: 1px solid #EFEFEF;
    margin: 0;
}

.panel-border, .panel-noborder, .panel-border-tree-content, .panel-border-tree, .panel-border-content {
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0px;
    position: absolute;
    border: 1px solid #EFEFEF;
    margin: 0;
}

.panel-border-content, .panel-border-tree {
    border: none;
}

.panel-border-tree-content, .panel-border-content, .panel-border-content-tab {
    border: none;
    border-top: 0;
    background-color: #FFFFFF;
}

.panel-border-tree-content {
    border: 1px solid #EFEFEF;
    border-top: none;
}

.panel-border-tree {
    border: 0px solid #EFEFEF;
    background-color: #fff;
    border-top: none;
}

.panel-noborder {
    border: none;
}

/*Se utiliza en los menus secundarios pagina de ejemplo "Grupo de Empleados" en estructura*/
.panel-simple {
    margin: 0 40px 0 40px;
}

.panel-simple-50 {
    margin: 0 50px 0 50px;
}

.panel-simple-35 {
    margin: 0 35px 0 35px;
}

.panel-simple-30 {
    margin: 0 30px 0 30px;
}

.panel-simple-20 {
    margin: 0 20px 0 20px;
}

.panel-simple-12 {
    margin: 0 12px;
}
/*/*/

/*galeria de imagenes*/
#ctrlGaleria_tblGeneral .apc-radio-label {
    word-break: break-all;
    max-width: 150px;
}

#ctrlGaleria_tblGeneral .apc-radio-indicator {
    background-color: #fff;
}

#ctrlGaleria_tblGeneral > tbody > tr {
    vertical-align: top;
}
/*/*/

/*labelpanelinput*/
.panel-title-label, .panel-title-label-out-noborder, .panel-title-label-out, .panel-title-label-out-nopadding {
    margin-left: 30px;
    margin-bottom: 0px; /*margin-bottom: 10px;  2018.01.30 Raúl: Manel indica que el contenido está muy separado del titulo (TemplateCellField_Style.aspx) */
    padding-bottom: 0px; /*padding-bottom: 4px; */
    /* para poner la raya debajo de titulo*/
    /*border-bottom: solid 1px #60A4DC;*/
    border-bottom: solid 2px #999;
    margin-right: 30px;
    text-transform: uppercase;
    min-height: 20px;
}

.panel-title-label-noborder, .panel-title-label-out-noborder {
    margin-bottom: 0;
    border-bottom: none;
    background-color: #FFFFFF;
}

.panel-proceso .panel-title-label, .panel-proceso .panel-title-label-noborder {
    margin-left: 20px;
    margin-right: 20px;
}

.panel-proceso .panel-row > div {
    margin-top: 10px;
}

/*20032018 Juan LLinares Se comenta porque se entiende que no hace ya falta*/
/*.panel-proceso .panel-basico > .panel-row:first-child > div:first-child, .panel-proceso .panel-basico > .panel-row-full:first-child > div:first-child {
    margin-top: 5px;
}*/
/*.panel-proceso .panel-basico > .panel-row 
{
    padding-left:10px;
}*/

.panel-proceso > #PageHeader {
    padding-left: 0px;
}

.panel-basico {
    margin-left: 30px;
    margin-bottom: 10px;
    padding-bottom: 4px;
    margin-right: 30px;
}

.panel-flex {
    display: flex;
    flex-wrap: wrap;
}
/*02/03/2018 Se ha modificado el padding left y right para que cuadre con un panel-general-noborder ejem. pagina ContentEmployeeName_Create.aspx*/
.ngrid-row-background .panel-basico-fondo, .ngrid-row-background .panel-basico-fondo-nobottom {
    padding: 0 30px 30px 30px;
    margin: 0 0 10px 0;
    height: 100%;
}

.ngrid-row-background .panel-basico-fondo-nobottom {
    padding: 0 30px 0px 30px;
}

.panel-basico-nobottom {
    padding: 30px 30px 0px 30px;
}

/*Color de fondo de los paneles que contienen información este deberia de ser un color claro*/
.ngrid-row-background .panel-basico-fondo, .panel-fondo-color, .panel-fondo-color-bottom20, .ngrid-row-background .panel-basico-fondo-nobottom {
    background-color: #fafafa;
}

.panel-proceso .panel-basico {
    margin-left: 30px;
    margin-right: 30px;
}

.panel-title-label-out, .panel-title-label-out-nopadding, .panel-title-label-out-noborder {
    margin-left: 0px;
    /*13/02/2018 Juan Se añade el margin-right para que coja todo el ancho me hacia falta en los titulos de procesos*/
    margin-right: 0px;
}

.panel-title-label-out-nopadding {
    padding: 0 30px;
}

.panel-fondo-color-bottom20
{
    padding-bottom: 20px;
}

.panel-fixedgrid-0 {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.panel-fixedgrid {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
}

.panel-fixedgrid-10 {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

.panel-fixedgrid-15 {
    position: absolute;
    left: 12px;
    right: 15px;
    bottom: 15px;
}

.panel-border-tree-content .panel-fixedgrid-15 {
    left: 14px;
    right: 12px;
}

.panel-fixedgrid-30 {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
}

.panel-fixedgrid-40 {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 40px;
}

.panel-fixedgrid-vertical-10 {
    position: absolute;
    bottom: 10px;
}

.panel-fixedgrid-vertical-30 {
    position: absolute;
    bottom: 30px;
}

/*.panel-fixedgrid, panel.fixed-grid-10, .panel.fixed-grid-15, .panel-fixedgrid-30 {
    min-height: 120px;
}*/

.panel-general-noborder > div, .panel-general-doble > div {
    /*margin-top:20px;*/
    padding: 0px 10px 0px 10px;
}

.panel-row > div, .panel-row-top0 > div, .pnl-filtro > div:not(:first-child) {
    display: inline-block;
}

/*Se asigna un espaciado a la izquierda y un margen top a los hijos principales que esten dentro de .panel-row*/
.panel-row > div {
    margin-top: 20px;
}

.panel-row > .panel-row > div {
    margin-top: 0px;
}

.panel-row-top0 > div {
    margin-top: 0px;
}

.panel-centrado {
    padding: 1em 3em;
    margin: 2em 15%;
}

.panel-top-8 {
    margin-top: 8px !important;
}

.panel-top-10 {
    margin-top: 10px !important;
}

.panel-top-15 {
    margin-top: 15px;
}

.panel-top {
    margin-top: 20px;
}

.panel-top-30 {
    margin-top: 30px;
}

.panel-top-40 {
    margin-top: 40px;
}

.panel-top-50 {
    margin-top: 50px;
}

.panel-top-0 {
    margin-top: 0px !important;
}

.panel-bottom {
    margin-top: 20px;
}

/*<!--Este div vacio se utiliza para calcular el top del grid-->*/
.panel-general-vacio {
    height: 0;
}

/* Para centrar el contenido sin saber el ancho ni alto (en pruebas)*/
.panel-centrado {
    position: absolute;
    left: 20%;
    top: 50%;
    transform: translate(-20%, -50%);
    -webkit-transform: translate(-20%, -50%);
}

.panel-div-visible {
    display: inline-block;
}

.panel-div-hidden {
    display: none;
}

.fixed-header {
    z-index: 400; /*bajado de 9999 a 400 por la página BPM_ProcesosClases_Crear, el velo al pulsar una opcion de la barra quedaba por debajo del div con esta clase*/
    top: 0px;
    left: 0px;
    /*porque entre la cabecera y la barra de menu hay un margin bottom de 3px que hace que se vea el contenido al hacer scroll*/
    background-color: #fff;
    position: fixed;
    width: 100%;
    /* 
                Pasos  : 1. Sacar la cabecera y el menu de divPagina y ponerlo como en el ejemplo
                         2. Ajustar el margin-top de divpagina que irá en función del alto de los dos anteriores.
                Ejemplo:
                <div class="fixed-header">
                        <asp:Panel ID="PageHeader123" runat="server"></asp:Panel>
                        <asp:Panel ID="DivBar123" runat="server"></asp:Panel>
                </div>
                <div id="divPagina123" class="fixed-header-divPaginaTop">
            */
}

.fixed-header-divPaginaTop {
    margin-top: 105px;
}

.fixed-header-NoBarraTop {
    margin-top: 90px;
}
/*Estilos para los Tabs se puede ver un ejemplo en la pagina ConfigurableGrid_Create.aspx*/
.panel-tabs {
    margin-left: 25px;
    margin-right: 25px;
    border: none;
    margin-top: 4px;
    height: 32px;
}

    .panel-tabs, .panel-tabs td:hover, .panel-tabs .tabSeleccionado {
        color: #60A4DC;
        text-decoration: none;
    }

        .panel-tabs td {
            height: 30px;
        }

            .panel-tabs td td {
                border: 0px;
                min-width: 80px;
                cursor: pointer;
            }

        .panel-tabs .tabSeparador {
            cursor: initial;
        }

        .panel-tabs .tabSeleccionado {
            border-bottom: 2px solid #60A4DC;
        }

        .panel-tabs .barBut, .panel-tabs td td { /*hacer busqueda, si no se usa arreglar las llamadas en las páginas*/
            background-color: #fff;
            color: #686667;
            text-transform: uppercase;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .panel-tabs .tabSeleccionado span, .panel-tabs .tabSeleccionado-COM2 span {
            color: #60a4dc;
        }
/*Fin estilo tabs*/
.panel-tabs-multipagina-contenedor, .panel-tabs-multipagina-border {
    left: 0px;
    right: 0px;
    position: absolute;
}

.panel-tabs-multipagina-border {
    border: 2px solid #EAEDED;
}

/*Separa los elementos que contiene un checkboxlist*/
.apCheckBoxList .apc-check-label {
}

/*Estilo para los controles dentro de los grids*/
.apwc_grid .apc-control-float {
    padding: 0 .1rem 0 .1rem;
}

.apwc_grid .apc-check,
.apwc_grid .apc-radio {
    padding: .2rem 0 !important;
}

.apwc_grid .apc-check-indicator,
.apwc_grid .apc-radio-indicator {
    margin: 0;
}

.apwc_grid .apc-text {
    border-width: 1px 1px 1px 1px;
    background-color: #fff;
    padding-left: .1rem;
}

.apwc_grid .apc-dropdown {
    font-size: .75rem;
    height: .9375rem;
    padding: 0 1rem 0 0;
}

.apwc_grid .apc-text {
    padding: .1rem .1rem .1rem .1rem;
    font-size: .75rem;
}

.apwc_grid .apc-bar {
    display: none;
}

.apwc_grid .apc-text:focus {
    background-color: #fff !important;
}
/*/ Estilo para los controles dentro de los grids*/

.title-column, .title-column-nobottom {
    border-bottom: solid 1px #60A4DC;
    text-transform: uppercase;
    text-align: center;
}

.title-column {
    padding-bottom: 4px;
}

/*Cuando en una ventana hay 2 botones juntos tal vez se quieran agrupar y dar un ancho minimo
    ejem. BuscadorEnlacesItems.aspx
*/
.panel-boton {
    align-self: flex-end;
}

    .panel-boton > div {
        margin-right: 10px;
        display: inline;
    }

    .panel-boton a > span {
        min-width: 60px;
    }

/*Menu que se muestra en la parte superior de algunas paginas arbolclases.aspx*/
.panel-menu-superior {
    width: 100%;
    min-width: 400px;
    position: relative;
    z-index: 99999;
}

    .panel-menu-superior > table {
        border: 0;
        empty-cells: show;
        position: relative;
        z-index: 99999;
    }
/*Fin Menu que se muestra en la parte superior*/

/*Paginas con frame ejemplo arbolclases.aspx*/
.panel-header-breadcrumbs {
    position: relative;
    z-index: 4;
    background-color: #FFFFFF;
}

/* -----------------------------TABS ESTILOS PARA FRAMES--------------------------------------*/
.panel-general-frames .apl-divTabs, .panel-general-frames-notree .apl-divTabs, .panel-frames-content-basico .apl-divTabs {
    min-width: 400px;
    margin-top: 13px;
    margin-right: 0px;
    background-color: #EFEFEF;
    border-bottom: 0;
}

.panel-frames-content-basico .apl-divTabs {
    margin-top: 0;
}

.panel-general-frames-notree .apl-divTabs {
    margin-left: 0px;
}


.panel-general-frames, .panel-general-frames-notree {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

.panel-general-frames-top {
    top: 9px;
}

.panel-general-frames > div:first-child, .panel-general-frames-notree > div:first-child {
    position: absolute;
    top: 63px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

/*.panel-general-frames .apl-divTabs td td, .panel-general-frames-notree .apl-divTabs td td {
    padding-left: 20px;
    padding-right: 20px;
}*/
/* -------------------FIN----------TABS ESTILOS PARA FRAMES--------------------------------------*/
/* -----------------------------TABS ESTILOS PARA PAGINA RELATIVOS--------------------------------------*/
.panel-general-tabs .apl-divTabs, .panel-general-tabs-notree .apl-divTabs {
    min-width: 0px;
    margin-top: 0px;
    margin-right: 0px;
    background-color: #EFEFEF;
    border-bottom: 0;
}

.panel-general-tabs-notree .apl-divTabs {
    margin-left: 0px;
}

.panel-general-tabs, .panel-general-tabs-notree {
    position: relative;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

    .panel-general-tabs > div:first-child, .panel-general-tabs-notree > div:first-child {
        position: relative;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
    }

    .panel-general-tabs .apl-divTabs td td, .panel-general-tabs-notree .apl-divTabs td td {
        padding-left: 20px;
        padding-right: 20px;
    }
/* -------------------FIN----------TABS ESTILOS PARA FRAMES--------------------------------------*/

/* -------------------INICIO----------TABS ESTILOS PARA PAGINAS CON ARBOL--------------------------------------*/

.panel-tree-tabs {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: #EFEFEF;
}

    .panel-tree-tabs > div:first-child {
        position: absolute;
        top: 63px;
        left: 0px;
        right: 0px;
        bottom: 0px;
    }

.panel-tree-tabs-nobarra > div:first-child {
    top: 38px;
}

/*Esta clase se aplica cuando en las paginas de arbol no se muestra el menu superior*/
.panel-tree-tabs-full > div:first-child {
    top: 36px;
}

.panel-tree-tabs .apl-divTabs { /*hay otra para móbiles*/
    margin-top: 13px;
    margin-right: 0px;
    background-color: #EFEFEF;
    border-bottom: 0;
}

.panel-tree-tabs-tree {
    position: absolute;
    top: 13px;
    left: 0px;
    width: 392px;
    bottom: 0px;
}

    .panel-tree-tabs-tree .panel-arbol {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #fff;
    }

.panel-tree-tabs-content { /*hay otro en APLayoutMobile para móbiles*/
    position: absolute;
    top: 53px !important;
    right: 0px;
    bottom: 0px;
    border: 6px solid #EFEFEF;
    border-bottom-width: 1px;
    border-top: none;
    border-right: none;
}

.panel-tree-tabs-menu .divMenu {
    margin-top: 0px;
}

.panel-tree-tabs-menu > .divMenu div:first-child {
    left: 0px !important;
}

.menu-style-white > .divMenu {
    background-color: transparent !important;
    border-bottom: 1px solid #EFEFEF;
}

.body-tree .menu-style-white > .divMenu {
}
/* -------------------FIN----------TABS ESTILOS PARA PAGINAS CON ARBOL--------------------------------------*/

/************************************ PAGINA CON TABS SIN ARBOL ************************************/
.panel-tree-tabs-noleft .panel-tree-tabs-content {
    left: 0px;
    border: none;
}
/************************************ FIN PAGINA CON TABS SIN ARBOL *******************************/



.panel-frames-content, .panel-frames-content-notree {
    left: 402px; /*397px*/
    position: absolute;
    top: 49px;
    right: 0px;
    bottom: 10px;
    min-width: 730px;
}

.panel-frames-content-notree {
    z-index: 100;
    left: 0px;
    top: 47px;
    right: 0px;
}



/*Fin paginas con frames*/

/**Para poner una botonera con iconos en la parte superior izquierda
    tambien esta definido en las css de direccion
*/
.panel-botonera-menu > .panel-row > div {
    margin-top: 5px;
    margin-right: 5px;
}

.panel-div-border {
    padding: 20px !important;
    border: 1px solid rgb(204, 204, 204);
    border-image: none;
    margin-top: 10px;
}

/* TCR 21/03/2018 Se ha añadido .divMenu:not(:first-of-type) para que no lo aplique si en la página hay menus secundarios 
    Se utiliza en la pag ViewerConfig_Grid.aspx         */
.panel-border-tree-content .divMenu, .panel-border-content .divMenu:not(:first-of-type), .panel-menu-white .divMenu, .panel-border-content-tab .divMenu {
    background-color: transparent !important;
    border-bottom: 1px solid #EFEFEF;
    padding-left: 0px;
}
/*.panel-border-content .divMenu
{
    padding-left:0;
}*/

.buttons-menu-tree .divMenu {
    background-color: transparent !important;
    padding-left: 5px;
    padding-top: 4px;
}

    .panel-border-tree-content .divMenu .barLeftDiv, .buttons-menu-tree .divMenu .barLeftDiv {
        left: 2px !important;
    }

.body-tree {
    background-color: #FFFFFF;
}

/*Se establece el ancho y color del hover a los botones de los arboles*/
.panel-border-tree .barBut, .panel-border-tree .barHBut, .panel-border-tree .barButHover {
    min-width: 50px;
}

.panel-border-tree .barButHover {
    color: #60a4dc;
}

.panel-editor {
    border: 1px solid #dddddd;
    border-image: none;
    width: 490px;
    height: 40px;
    overflow: auto;
    padding-top: 5px;
    padding-left: 6px;
    font-size: 10pt;
    visibility: visible;
    background-color: white;
}

.panel-editor-html {
    border: 1px solid #dddddd;
    visibility: visible;
    border-image: none;
    width: 490px;
    height: 40px;
    background-color: #fff;
}

/********************************** PANELES Y COLUMNAS *********************************/
/*15/02/2018 Juan. Pasamos el funcionamiento de estas clases a flexbox, lo estamos probando en zgrid-col pensamos que no deberia de afectar a lo existente*/
.ngrid-row {
    display: flex;
    display: -ms-flexbox;
}
/*Alineacion vertical de los elementos en las columnas que componen la fila*/
.ngrid-row-bottom {
    align-items: flex-end;
}
/*Los ngrid-row de un zgrid-col-panel verticalmente se aliearan en la parte inferior*/
/*.zgrid-col-panel .ngrid-row
{
    align-items:flex-end;
}*/
/*21/02/2018 * Se quita para probar ya que afectaba siempre y en divisiones de columnas unas estaban muy bajas*/
/*.ngrid-row
{
    align-items:flex-end;
}*/
.ngrid-col {
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

.ngrid-col-width-90 {
    width: 90%;
}

.ngrid-col-width-85 {
    width: 85%;
}

.ngrid-col-width-80 {
    width: 80%;
}

.ngrid-col-width-75 {
    width: 75%;
}

.ngrid-col-width-70 {
    width: 70%;
}

.ngrid-col-width-66 {
    width: 66.666%;
}

.ngrid-col-width-60 {
    width: 60%;
}

.ngrid-col-width-55 {
    width: 55%;
}

.ngrid-col-width-50 {
    width: 50%;
}

.ngrid-col-width-45 {
    width: 45%;
}

.ngrid-col-width-40 {
    width: 40%;
}

.ngrid-col-width-35 {
    width: 35%;
}

.ngrid-col-width-33 {
    width: 33.333%;
}

.ngrid-col-width-30 {
    width: 30%;
}

.ngrid-col-width-25 {
    width: 25%;
}

.ngrid-col-width-20 {
    width: 20%;
}

.ngrid-col-width-16 {
    width: 16.66%;
}

.ngrid-col-width-15 {
    width: 15%;
}

.ngrid-col-width-10 {
    width: 10%;
}

.ngrid-col-width-5 {
    width: 5%;
}

/*Cuando hay paneles hay ocasiones en que el titulo esta vacio, para que se respete la altura se le da un minimo ejem. CRMCreaContacto_Contacto.aspx?*/
/*.ngrid-row > div > .panel-title-label-out,.ngrid-row > div > .panel-title-label {
    min-height: 20px;
}*/
/*.zgrid-col
{
    width:50%;
}

.zgrid-col-3
{
    width:33.33%;
}
.zgrid-col-4
{
    width:25%;
}

.zgrid-row > div
{
    
    margin-bottom:20px;
}*/
/*Se definen los estilos para los paneles*/
/*.zgrid-col-panel
{
    background-color:#fafafa;
    padding:0px 25px 0px 25px;
    height:100%;
}*/

/*Al primer div hijo de un zgrid-col-panel se le da el margin-top para que el titulo no este pegado en la parte superior del panel*/
.panel-basico-fondo > div:first-child, .panel-basico-fondo-nobottom > div:first-child {
    padding-top: 20px;
}
    /*Me daba problemas cuando se ponia un panel-row en primer lugar por el margin-top que tiene este último*/
    .panel-basico-fondo > div:first-child > div, .panel-basico-fondo-nobottom > div:first-child > div {
        margin-top: 0;
    }

/*Cambiado 12042018*/
/*.panel-basico-fondo > .panel-row:first-child {
    padding-top: 0px;
}*/


/*Para su correcto funcionamiento los elementos que contenga esta clase deberan tener el width a 100%*/

/*.zgrid-col-panel  .panel-row-full > div*/
.panel-row-full > div {
    display: flex;
    display: -ms-flexbox;
    margin-top: 20px;
}

.panel-title-info {
    text-transform: none;
}

    .panel-title-info > div > span {
        color: #ababab;
        font-weight: 400;
    }

    .panel-title-info > div > a {
        padding-bottom: 5px;
    }



/* ----------------Estilos para el arbol Treeview en la selección de los Arboles */
.TreeViewStyle {
    padding-left: 5px;
}

    .TreeViewStyle td {
        vertical-align: middle;
    }

    .TreeViewStyle a, .TreeViewStyle a:visited, .TreeViewStyle a:hover, .TreeViewStyle span {
        color: #535353;
        font-size: 13px;
    }

    .TreeViewStyle img {
        margin-top: 4px;
    }

    .TreeViewStyle img {
        margin-right: 8px;
    }

    .TreeViewStyle a.tvselected {
        font-weight: bold !important;
        color: #60a4dc;
        font-size: 13px;
    }


.control-options-separate .apc-radio label:not(:first-child) {
    margin-top: 8px;
    display: inline-block;
}

/*Estilos para los divs que simulan una ventana emergente*/
.divEmergente {
    background-color: #fff;
    z-index: 1005;
    position: absolute;
    top: 35%;
    left: 50%;
    margin-left: -298px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 500px;
    height: 240px;
    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);
}

    .divEmergente > .PageHeader {
        background-color: #FFFFFF;
        border-radius: 6px 6px 0px 0px;
        -moz-border-radius: 6px 6px 0px 0px;
        -webkit-border-radius: 6px 6px 0px 0px;
        border: 0px;
    }

    .divEmergente > #headerRefresh {
        height: 44px !important;
    }

        .divEmergente > #headerRefresh > div:nth-child(2) {
            padding-top: 12px !important;
        }

        .divEmergente > #headerRefresh > div:nth-child(3) {
            top: 16px !important;
        }
/*Repeater Grid*/
.containerRepeaterGrid {
    height: 100%;
}

.repeaterGrid {
    display: -ms-flexbox;
    display: flex;
    align-content: flex-start;
    flex-flow: row wrap;
    padding: 10px;
    box-sizing: content-box;
}

.rptDiv {
    margin: 17px;
    height: 165px;
    width: 195px;
    /*padding: 8px;*/
    background-color: #FFFFFF;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 0;
}

    .rptDiv:hover {
        border: 2px solid #82baff;
        margin: -2px 15px 0 15px;
    }

    .rptDiv #name {
        color: #656565;
    }

.repeaterGrid a {
    text-decoration: none;
}

/*Fin Repeater Grid*/

.tabNoSeleccionado > table {
    border-bottom: 2px solid transparent;
}

.tabSeleccionado > table {
    border-bottom: 2px solid #60a4dc;
}


/*Estilo ventanas warning*/
.divPanelWarning {
    z-index: 10001;
    display: none;
    width: 670px;
    position: absolute;
    height: 450px;
    overflow: hidden;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    left: 0px;
}

.divPaginaWarning {
    height: 100%;
    overflow: hidden;
}

.content-warning-title span {
    color: #D24331;
    font-weight: 700;
}

.content-warning-title-info span {
    color: #6BA0DF;
    font-weight: 700;
}

.warning-image {
    background-color: #D24331;
    text-align: center;
    padding-right: 0 !important;
}

.warning-image-information {
    background-color: #6BA0DF;
    text-align: center;
    padding-right: 0 !important;
}

.windows-warning-content {
    margin: auto 30px;
    height: 100%;
}

    .windows-warning-content div {
    }

.content-warning-title, .content-warning-title-info {
    padding-top: 20px;
}

    .content-warning-title span, .content-warning-title-info span {
        font-size: 1.2rem;
    }

.content-warning-msg {
    min-height: 0px;
}

    .content-warning-msg span {
        font-size: .8rem;
    }

.div-warning-confirm {
    padding: 10px 0 25px;
    text-align: center;
}

.windows-warning-content .panel-boton {
    text-align: center;
}

.divPaginaWarning .panel-boton {
    /*padding-bottom:20px;*/
}
/*Fin Estilo ventanas warning*/

.warning-mylabel {
    margin: 10px 0 0px 0 !important;
}

.warning-mylabel span {
    font-size: .85rem !important;
    color: #c82333 !important;
}

.apl-badge {
    background-color: #000;
    color: #fff;
    display: inline-block;
    padding: 2px 8px;
    text-align: center;
    border-radius: 50%;
    position:absolute;
    top:0px;
    left:35px;
}

.apl-badge-red, .apl-badge-red:hover {
    color: #fff !important;
    background-color: #f44336 !important;
    text-decoration: none !important;
}

.apl-badge-float {
    cursor: pointer;
    font-size: .60rem;
    padding: 0px 4px 1px;
}
/* Tooltip text */
.tooltipheader .tooltiptext span {
    background: #878787;
    color: #fff;
    padding: 0px 4px;
    font-size: .75rem;
    text-align: justify;
    line-height: 1.4;
}

.tooltipOK {
    background-color: #6ba0df !important;
}

.tooltiptext {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    font-size: .75rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    top: 24px;
    opacity: 1;
    position: absolute;
    z-index: 10002;
    display: none;
    width: auto;
    background: #878787 !important;
    color: #fff !important;
    padding: 5px 10px 7px !important;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-transform: none;
    cursor: default;
    margin-top: 0px;
    word-wrap: break-word;
}

    .tooltiptext.inUse {
        white-space: normal;
    }

    .tooltiptext.headerInfo {
        white-space: normal;
        max-width: 450px;
    }

        .tooltiptext.headerInfo .enum {
            text-indent: -1rem;
        }

    .tooltiptext.ttt-menu {
        top: 44px;
    }

    .tooltiptext.ttt-menuSup {
        top: 30px;
        white-space: nowrap;
        z-index: 1010;
    }

    .tooltiptext.ttt-narrow {
        width: 90vw;
        white-space: normal;
    }

    .tooltiptext.ttt-auto {
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        margin-top: 10px;
        white-space: normal;
    }

    /*ColapseButton*/
    .tooltiptext.collapseMenu {
        position: fixed;
        top: auto;
        right: auto;
        margin-top: 18px;
        min-width: 45px;
        max-width: 400px;
        word-break: break-word;
    }

/*ColapseButton*/
.masinfodot {
    /*font-size: 1rem !important;*/
    font-weight: 700;
}

.imagebullet {
    background-image: url("/cassette.axd/file/App_Themes/Minimal/Imagenes/bullet-aqua-91b4e83fffb0851a566d8d7d8958222c050a8cac.png");
    width: 30px;
    height: 20px;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: text-bottom;
}

/*Clases para los submenús tipo popup, con una lista <UL> dentro*/
.apl-divBlock.submenu-popup {
    position: absolute;
    z-index: 99999;
    width: auto;
    height: auto;
    min-width: 275px;
    padding: 0px;
    margin: 0px;
}

.submenu-popup ul {
    padding: 0;
    line-height: 2.8em;
    font-size: .85rem;
    list-style-type: none;
    margin: 0;
}

    .submenu-popup ul a {
        text-decoration: none;
        color: #208dd3;
    }

        .submenu-popup ul a li:hover, .submenu-popup ul a:hover, .submenu-popup ul a .tooltiptext-visible {
            background-color: #f2f2f2;
        }

    .submenu-popup ul li {
        white-space: nowrap;
    }

    .submenu-popup ul li {
        padding: 0px 10px;
    }

/*Bloque principal*/
.apl-divBlock {
    width: 30%;
    min-width: 455px;
    height: 345px;
    background-color: #fff;
    display: flex;
    display: -ms-flexbox;
    align-self: flex-start;
    flex-flow: row wrap;
    margin: 20px;
    -webkit-box-shadow: 1px 1px 9px 1px rgba(204,204,204,1);
    -moz-box-shadow: 1px 1px 9px 1px rgba(204,204,204,1);
    box-shadow: 1px 1px 9px 1px rgba(204,204,204,1);
    border: 1px solid #CBC7C8;
    border-radius: 3px;
    box-sizing: border-box;
    z-index: 1;
}
/* fin Bloque principal*/

/*Seccion dentro del bloque principal*/
.aplSubTitle {
    display: flex;
    display: -ms-flexbox;
    flex-flow: row wrap;
    align-items: flex-end;
}
/*Fin Ultimo estilo 23032018*/
.aplSubImgTitle {
    width: 35px;
}

    .aplSubImgTitle img {
        height: 24px;
        width: 24px;
    }

.aplDivTitleImg {
    width: 36px;
}

    .aplDivTitleImg img {
        height: 36px;
        width: 36px;
    }

.aplSubTxt {
    padding-bottom: 6px;
}

/*Titulo bloque principal*/
.apl-divBlock-title {
    width: 100%;
    height: 25px;
    padding: 15px 20px;
    display: -ms-flexbox;
    display: flex;
    background-color: #F0F0F0; /*EFEFEF*/
}

    .apl-divBlock-title > div {
        width: 50%;
    }

.divMenuDivs > div:first-of-type {
    width: 95%;
}

.divMenuDivs > div:last-of-type {
    width: 5%;
}

.apldivTitle {
    margin: 0 10px 8px 10px;
    font-size: 1.6em;
}
/*Fin Titulo bloque principal*/

/*Contenido bloque principal*/
.apl-divBlock-content {
    display: flex;
    display: -ms-flexbox;
    flex-flow: row wrap;
    width: 100%;
    height: 285px;
    padding: 0 20px;
}


/*Se usa para dar margenes a los paneles que se crean con la rejilla de bootstrap*/
.panel-bootstrap {
    padding: 10px 0px 5px 30px !important;
    margin-bottom: 30px !important;
}

    .panel-bootstrap:not(:first-child) {
        padding: 10px 30px 5px 30px !important;
        margin-bottom: 30px !important;
    }
/*Fin rejilla de bootstrap*/


/*FONDO CABECERA*/
/*Establece el fondo de la cabecera del grid en blanco*/
.gridstyle-header-white .apwc_header {
    background-color: #fff !important;
    border-bottom: 2px solid #EFEFEF;
}

.gridstyle-header-white .apwc_header_cell {
    font-weight: 700;
    color: #000000;
}
/*FIN FONDO CABECERA*/

/*Padding de la primera columna de grid, la gridstyle-padding-first-column-23 alinea el texto de la cabecera del grid con la cabecera de la pagina*/
/*Columnas izquierda*/
/*style*="ltr" se usa para identificar el idioma*/
.apwc_grid[style*="ltr"] .gridstyle-padding-column-10-first {
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
}

.apwc_grid[style*="rtl"] .gridstyle-padding-column-10-first {
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 5px;
}
/*Fin Columnas izquierda*/

/*Columnas derecha*/
.apwc_grid[style*="ltr"] .gridstyle-padding-column-10-last {
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 5px;
}

.apwc_grid[style*="rtl"] .gridstyle-padding-column-10-last {
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
}
/*Fin Columnas derecha*/
/************************** PADDING 23 EN GRID **********************/
/*Columnas izquierda*/
.apwc_grid[style*="ltr"] .gridstyle-padding-column-23-first {
    padding-right: 5px;
    padding-left: 23px;
}

.apwc_grid[style*="rtl"] .gridstyle-padding-column-23-first {
    padding-right: 23px;
    padding-left: 5px;
}
/*Fin columnas izquierda*/

/*Columnas derecha*/
.apwc_grid[style*="ltr"] .gridstyle-padding-column-23-last {
    padding-right: 23px;
    padding-left: 5px;
}

.apwc_grid[style*="rtl"] .gridstyle-padding-column-23-last {
    padding-right: 5px;
    padding-left: 23px;
}
/*Fin columnas derecha*/

/*fin padding primera columna*/

/*Le da un borde al grid*/
.gridstyle-border .apwc_grid {
    border: 1px solid #EFEFEF;
}

/*Deja el grid sin borde*/
.gridstyle-border-0 .apwc_grid {
    border: 0 !important;
}

/*Cuando se pone el panel-fixedgrid-0 quiere decir que no dejara espacios a los lados por lo que le quitamos el border al grid*/
.panel-fixedgrid-0 .apwc_grid {
    border: 0 !important;
}

/* --- Panel con fondo, se utiliza en BPM_STC_CREATE.ASPX y los controles de TS */
.panel-fondo {
    background-color: #fafafa;
    padding: 1px 30px 22px 30px;
    margin: 0 30px 8px 30px;
}

.margintop0, .margintop0 > div {
    margin-top: 0px;
}

.margin0 {
    margin: 0px;
}

.padding0 {
    padding: 0px;
}

.h100 {
    height: 100%;
}
/*----------------------------------*/
/*----------ICONO AZUL DE INFORMACIÓN EN CABECERA DE  VENTANA-------Cabecera.cs    CreateInfoIcon() ----------------*/
#header-icon-info-img {
    background: url('/cassette.axd/file/App_Themes/Minimal/Cabecera/Information_Repose-478e349b81345b4207ca488af94bdb634bbba891.png');
    width: 21px;
    height: 21px;
    margin: 7px 20px;
}

    #header-icon-info-img:hover {
        background: url('/cassette.axd/file/App_Themes/Minimal/Cabecera/Information_Over-15c39c7eeb81a1c90ecf01941328284fe8891791.png');
        background-size: auto;
        width: 21px;
        height: 21px;
        margin: 7px 20px;
    }

#header-icon-info-img-small {
    background: url('/cassette.axd/file/App_Themes/Minimal/Cabecera/Information_small_Repose-e55bc76557655937ffcf85a6d5fa4f0e4b9e0582.png');
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    margin: 0 3px 2px 0;
}

    #header-icon-info-img-small:hover {
        background: url('/cassette.axd/file/App_Themes/Minimal/Cabecera/Information_small_Over-e47c363f83ea0938128b3b6f292705fb04f0b911.png');
        background-repeat: no-repeat;
        background-size: auto;
        width: 15px;
        height: 15px;
        margin: 0 3px 2px 0;
    }


.barraBotonera {
    background-color: #EFEFEF;
    min-height: 50px;
    width: 100%;
}

    .barraBotonera > div {
        padding-top: 8px;
    }

    .barraBotonera .panel-boton {
        margin-left: 8px;
    }

    .barraBotonera > .panel-basico {
        padding-bottom: 0px;
    }

        .barraBotonera > .panel-basico > div {
            display: inline-block;
        }

    .barraBotonera > div > div {
        margin-right: 0px !important;
    }

    .barraBotonera .TreeButtons {
        margin-left: 15px;
    }

.row-align-top > div {
    vertical-align: top !important;
}


/********************************************************************************************************************/
.repeater_div_observacion {
    padding: 20px;
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

.repeater_div {
    padding: 20px;
    width: 100%;
}

.repeater_fila {
    display: flex;
}

.repeater_fila_texto {
    width: 80%;
    height: auto;
    float: left;
    background-color: #FFF;
    padding: 10px 20px 20px;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #EFEFEF;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
}

.repeater_div > .repeater_fila:not(:last-child) > .repeater_fila_texto {
    margin-bottom: 20px;
}

.repeater_div_traza {
    width: 8px;
    height: auto;
    background-color: #D9D9D9;
}

.repeater_div > .repeater_fila:first-child > .repeater_divDate > .repeater_div_traza {
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    border: 0px solid #000000;
}

.repeater_div > .repeater_fila:last-child > .repeater_divDate > .repeater_div_traza {
    border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    border: 0px solid #000000;
}

.repeater_div_date {
    width: 175px;
    margin-top: 10px;
}

.repeater_div_bola {
    position: relative;
    height: 14px;
    width: 14px;
    background-color: #7F7F7F;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin-right: -6px;
    margin-top: 2px;
}

.repeater_div > .repeater_fila:first-child > .repeater_divDate > .repeater_div_date > .repeater_div_bola {
    background-color: #1785B0;
}

.repeater_divDate {
    display: flex;
}
/**************************/


/**** Esta clase se usa para recortar el texto ****/
.ellipsis-text {
    white-space: nowrap;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
}

/***Da un estilo redondeado a una imagen****/
.img__container {
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

/*-------------Estilos para las presentaciones tipo acordeón de la gestion de contenidos--------------------*/
.kwicks {
    display: block;
    list-style-type: none;
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}

    .kwicks > * {
        display: block;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

    .kwicks.kwicks-processed > * {
        margin: 0;
        position: absolute;
    }

.kwicks-horizontal > * {
    float: left;
}
.kwicks-horizontal-rtl > * {
    float: right;
}

.kwicks-horizontal > :first-child {
    margin-left: 0;
}

.kwicks-vertical > :first-child {
    margin-top: 0;
}

.kwicks > li {
    height: 100%;
    margin: -5px;
    float: left;
}

.kwicks-shadow {
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url('/cassette.axd/file/App_Themes/Minimal/Imagenes/BGDivAccord-7723c89571b044b168eb56f1d59dae314edceb37.png');
    width: 30px;
    background-color: transparent;
    background-repeat: repeat-y;
    z-index: 2;
}
.kwicks-shadow-rtl {
    float: right;
    position: absolute;
    right: 0px;
    top: 0px;
    background-image: url('/cassette.axd/file/App_Themes/Minimal/Imagenes/BGDivAccord-7723c89571b044b168eb56f1d59dae314edceb37.png');
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    width: 30px;
    background-color: transparent;
    background-repeat: repeat-y;
    z-index: 2;
}

.bottomFilter {
    margin-bottom: 10px;
}

.bottomFilter-15 {
    /*Aunque no coincida con el nombre modifico el margin bottom, para que se aplique a todos sitios mientras se cambia*/
    margin-bottom: 10px;
}

.bottomFilter-None {
    margin-bottom: unset;
}

#divBotonera > div {
    vertical-align: bottom;
}
/****Colapsa/Expande el div arbol****/
.apTreeCollapse-DivTree {
    width: 15px !important;
    -webkit-­transition: width 0.4s ease;
    ­-moz-­transition: width 0.4s ease;
    -­o-­transition: width 0.4s ease;
    transition: width 0.4s ease;
}

.apTreeExpand-DivTree {
    width: 392px;
    -webkit-­transition: width 0.4s ease;
    ­-moz-­transition: width 0.4s ease;
    -­o-­transition: width 0.4s ease;
    transition: width 0.4s ease;
}
/****Colapsa/Expande el div Content****/
.apTreeCollapse-DivContent {
    left: 10px !important;
    -webkit-­transition: left 0.4s ease;
    ­-moz-­transition: left 0.4s ease;
    -­o-­transition: left 0.4s ease;
    transition: left 0.4s ease;
}

.apTreeExpand-DivContent {
    left: 391px;
    -webkit-­transition: left 0.4s ease;
    ­-moz-­transition: left 0.4s ease;
    -­o-­transition: left 0.4s ease;
    transition: left 0.4s ease;
}

.apTreeCollapse-DivPestanyas {
    margin-left: 10px !important;
    -webkit-­transition: margin-left 0.4s ease;
    ­-moz-­transition: margin-left 0.4s ease;
    -­o-­transition: margin-left 0.4s ease;
    transition: margin-left 0.4s ease;
}

.apTreeExpand-DivPestanyas {
    margin-left: 397px;
    -webkit-­transition: margin-left 0.4s ease;
    ­-moz-­transition: margin-left 0.4s ease;
    -­o-­transition: margin-left 0.4s ease;
    transition: margin-left 0.4s ease;
}

.ap-collapseTree {
    background-position: center;
    /*background-color: #F4F4F4;*/
    background-color: #efefef;
    background-repeat: no-repeat;
    border: 0px unset #efefef;
    border-right: none;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    opacity: 1;
    width: 22px;
    height: 50px;
    position: relative;
    top: 98px;
    left: 371px;
    z-index: 99;
    cursor: pointer;
}

.ap-collapseTreeCollapse {
    background-position: center;
    /*background-color: #F4F4F4;*/
    background-color: #efefef;
    background-repeat: no-repeat;
    border: 0px unset #efefef;
    border-right: none;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    opacity: 1;
    left: 5px;
    width: 22px;
    height: 50px;
    position: relative;
    top: 98px;
    z-index: 99;
    cursor: pointer;
}

.ap-Arrow {
    /*border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;*/
    border-left: 0;
    display: inline-block;
    width: 20px;
    height: 25px;
    margin-top: 15px;
    -webkit-transition: transform linear .25s .25s;
    -o-transition: transform linear .25s .25s;
    transition: transform linear .25s .25s;
}

.ap-ArrowLeft {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 0;
    display: inline-block;
    width: 0;
    height: 0;
    margin-top: 3px;
    transition: transform linear .25s .25s;
    border-right: 7px solid #656565;
    margin-top: 17px;
    margin-left: 7px;
}

.ap-ArrowRigth {
    /*border-right: 7px solid #656565;
    margin-top: 17px;
    margin-left: 7px;*/
    background-image: url(/cassette.axd/file/App_Themes/Minimal/Imagenes/tree-structure-3a871e3fd16c8031096dfc41f580d3104e82549f.png);
    background-repeat: no-repeat;
    margin-top: 16px;
    margin-left: 1px;
    /*transform: rotate(180deg)*/
}
/****Fin Colapsa/Expande el div arbol****/

.ap-LabelDefault {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: .85rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    color: #292b2c;
}
.ap-LabelDefault-top {
    font-size: .75rem;
    color: #60a4dc;
}
.ap-CalendarDefault {
    color: #353535 !important;
    font-family: fontello;
}
.ap-CalendarDefault:before {
    content: '\e81d';
}
.ap-button-search {
    border: none;
    background: none;
    padding: 0;
}
.ap-MagnifyClass {    
    background-color: transparent;        
    height: 1.4rem;
    width: 1.8rem;    
    border-radius: .25rem;
    padding: .2rem .4rem;
    border: 1px solid transparent;
    font-family:fontello; 
    cursor:pointer;
}
.ap-MagnifyClass:before {
    content: "\e82d";
    font-size:.8rem;
}

.ap-MagnifyClass:hover {
    border: 1px solid #60A4DC;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}

.ap-btnView {    
    background-color: transparent;
    height: 1.4rem;
    width: 1.8rem;    
    border-radius: .25rem;
    padding: .2rem .4rem;
    border: 1px solid transparent;
    font-family:fontello;
    cursor:pointer;
    font-size:.92rem;
}
.ap-btnView:before {
    content: "\e817";
}
.ap-btnView:hover {
    border: 1px solid #60A4DC;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}

.ap-dropdown {
    background-image: url('/cassette.axd/file/App_Themes/Minimal/Imagenes/I_abajo-7e44f56b84239e59cef5928d8321a0743c29d1a5.gif') !important;
    background-repeat: no-repeat;
    -moz-appearance: none;
    -webkit-appearance: none;
    line-height: 1.3;
    appearance: none;
    background-position: right;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: rgba(0,0,0,.15);
    padding: .2rem 1rem .2rem .2rem;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}
.ap-dropdown:hover {
    border-bottom: 1px solid #60A4DC;
}

.panel-responsive .ngrid-row-background {
    min-width: 280px;
}

.panel-responsive .panel-basico-fondo {
    height: calc(100% - 65px) !important;
}

.panel-responsive .DivEyes > .panel-row {
    display: flex;
    align-items: center;
    padding-top: 20px;
}

    .panel-responsive .DivEyes > .panel-row > div {
        margin-top: 0px;
    }

.lbtnExitTree {
    vertical-align: top;
    height: 100%;
    cursor: pointer
}

    .lbtnExitTree > div {
        display: flex;
        display: -ms-flexbox;
        align-items: center;
        justify-content: center;
        height: 40px;
        width: 30px;
        padding-top: 3px;
    }

/* Icono utilizado para marcar la posición de la operación actual de conector */
.fa-angle-right {
    content: url('/cassette.axd/file/Styles/comun/rightDisabled-2a77e2d3cf139f26d6b59e4a8021c3944b9dcb08.png');
}

.fa-trash-o {
    content: url('/cassette.axd/file/Styles/comun/fa-trash-o-b7eafaa26e98749ad5b043bc32786fec256c0670.png');
}

.EndPageSpace {
    padding-bottom: 20px;
}

.columnFeaturedGrid {
    background-color: #f2fefe;
}

.apwc_header_row .columnFeaturedGrid
{
    background-color:#fff;
}

    .apwc_header_row .columnFeaturedGrid .apwc_header_cell {
        color: #246aa3;
    }
/*
    ** Se usa en una columna para dar a un texto el formato de link (usado en columna biblioteca en Documentos)
*/
.ap-link-style {
    color: #1473e6 !important;
    text-decoration: none !important;
    font-size: .75rem;
    padding: 3px 6px;
}

    .apwc_body_sep_rig:hover > div > .ap-link-style, .ap-link-style:hover {
        text-decoration: underline !important;
        cursor: pointer !important;
    }

/* Fin link */

/*
    **Estructura de pagina, div que contiene 4 divs. Estos divs de dibujan uno debajo del otro, sin altura, ocupando lo que ocupen y el último (apl-body) ocupa el resto de la pagina.
*/
.apl-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.apl-header {
    position: relative;
}

.apl-bar {
    position: relative;
}

.apl-filter {
    position: relative;
}

.apl-body {
    flex-grow: 1;
    position: relative;
}

.apl-form {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.apl-tab-position {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display: flex;
    flex-direction: column;
}

.apl-tab-position-form {
    position: relative;
    flex-grow: 1;
}

.apl-divbtnMoreFilters {
    height: auto !important;
    padding-bottom: 5px;
    /*vertical-align:bottom!important;*/
}

/*.apl-divbtnMoreFilters > span {
        background-color: #EFEFEF;
    }*/
/*
    * Estilos complementarios para cuando se utiliza bootstrap
*/
.container-fluid.apl-panel-basico {
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    padding-bottom: 4px;
    padding-left: 30px;
    padding-right: 30px;
}

.apl-ngrid-row > div {
    width: 100%;
    margin-top: 20px;
}

.apl-panel-title {
    padding-top: 20px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    border-bottom: solid 2px #999;
    text-transform: uppercase;
    min-height: 20px;
    width: 100%;
}

.apl-panel-color, .apl-panel-color-title {
    padding: 10px 20px 30px;
    background-color: #fafafa;
}

.apl-panel-color-title {
    height: calc(100% - 50px);
}

.apl-nopadding-sides {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.apl-nomargin-sides {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/*
    * Fin estilos complementarios para cuando se utiliza bootstrap
*/

/*
    * Efecto botón estilo etiquetas se puede ver un ejemplo en familias definibles vista tarjeta
*/
.ap-btn-etiquete, .ap-btn-etiquete-xcross {
    display: inline-flex;
    background-color: #EFEFEF;
    border-radius: 4px;
    padding: 10px 12px;
    text-decoration: none;
    cursor: pointer;
}

.ap-btn-etiquete-xcross {
    padding: 10px 4px 5px 12px !important;
}

    .ap-btn-etiquete:hover, .ap-btn-etiquete-xcross:hover {
        background-color: #CACACA;
    }

.ap-btn-etiquete-text {
    color: #656565;
    font-weight: 700;
    font-size: .82rem;
}

.ap-btn-etiquete-mark {
    font-size: .9rem;
    font-weight: 500;
    margin: 0px 0px 0px 10px;
}


.ap-btn-xcross {
    height: 20px;
    width: 20px;
    margin-left: 10px;
    background-image: url('/cassette.axd/file/Styles/Minimal/APWC_Cards/xcross-7ce8104851770ab2c401a67339ae0ab28e37f68b.svg');
    background-repeat: no-repeat;
    background-size: 16px;
    margin-top: 1px;
}
/*
    * Fin Efecto botón estilo etiquetas se puede ver un ejemplo en familias definibles vista tarjeta
*/

.ap-pagemployee .ap-card-repeaterGrid {
    position: absolute;
    bottom: 20px;
    top: 20px;
    overflow-y: auto;
    height: 95%;
}

.apl-divTabsColor {
    background-color: #EFEFEF;
}

/*
    Estilos para mostrar el mensaje de tareas nuevas en rojo en una esquina
*/

.task_alert {
    font-size: 11px;
    padding: 5px;
    background-color: #000;
    opacity:0.80;
    color: white;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    position: absolute;
    top: 20px;
    right: -310px;

    z-index: 100001;

    display: none;
    width: 300px;
    height: 90px;
    text-align: center;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.25;
    /*font-family: "Segoe UI","Segoe WP",Arial,Sans-Serif;*/
    cursor: pointer;
}
.task_center {
    position:relative;
    left:-8px;
    top:35px;
}

.task_alert a{
    color: white;
}

.task_closebtn {
    margin-left: 3px;
    color: #CBC7C8;
    font-weight: bold;
    float: left;
    font-size: 19px;
    line-height: 15px;
    cursor: pointer;
}

.task_closebtn:hover {
    color:#fff
}

.wrapper {
    position:relative;
    top:68px;
    left:-5px; 
}

.progress-bar {
    width: 103.4%;
    /*background-color: #e0e0e0;*/
    padding: 0px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);    
    display: flex;
    justify-content: flex-end;
}

.progress-bar-fill {
    display: block;
    height: 11px;
    background-color: #1487b4;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    transition: width 50ms ease-in-out;
    opacity: 1;
    text-align: right;
}

.apl-grid-middle .apwc_body_row_p td, .apl-grid-middle .apwc_body_row_i td {
    vertical-align: middle !important;
}

.apl-grid-middle .apwc_col_TwoElement
{
    padding-top: 8px;
}

.apl-divAll-readOnly {
    position: absolute;
    top: 126px;
    left: 15px;
    right: 15px;
    bottom: 0;
    z-index: 10000;
    background-color: #505050;
    opacity: 0.03;
}

.panel-title-label-check {
    display: flex;
    align-items: flex-end;
}

    .panel-title-label-check > div:first-child {
        text-transform: none;
    }

    .panel-title-label-check > div:last-child {
        padding-bottom: 4px;
    }

.ap-checkHelp {
    font-family: fontello;
}

    .ap-checkHelp:before {
        content: '\E816';
        font-size: 1rem;
    }

.ap-checkOk {
    font-family: fontello;
}

    .ap-checkOk:before {
        content: '\E832';
    }

.ap-checkKo {
    font-family: fontello;
}

    .ap-checkKo:before {
        content: '\E831';
    }

.ap-arrow {
    font-family: fontello;
    font-size: 1.2rem;
}

    .ap-arrow:before {
        content: '\E834';
    }

/**
        apl-panel-process se usa en las paginas que muestran el diagrama al lado, 
        con esta clase que ha de ser añadida al divMain
        y añadiendo al divPagina la clase apl-head y el estilo overflow-y: hidden;
        se consigue que el scroll se inicie debajo de la barra. Ejem. BPM_EventosMensajeClases_Crear.aspx
    */
.apl-panel-process {
    overflow-y: auto;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
}

.toggle-label > div {
    flex-direction: column
}

    .toggle-label > div > div:last-child {
        display: flex;
        height: 26px;
    }

    .toggle-label > div > div:last-child > div:first-child {
            display: flex;
            align-items: flex-end;
    }

        .toggle-label > div > div:last-child > div:last-child > span {
            padding-top: 0;
        }

/*Pestañas de boton (Mis tareas/familyelements/FamiliasDefiniblesList/deepbi)*/
.apl-divButtons {
    height: 47px;
    background-color: #EFEFEF;
    display: flex;
}

.apl-divButtons > div {
    display: flex;
}

.apl-divButtons > div:first-child {
    height: 46px;
}

.apl-divButtons > div > a > div {
    min-width: 80px;
    height: 100%;
    padding: 0 5px;
}

.apl-divButtons > div > a > div > div {
    margin-top: 7px;
    text-align: center;
}

.apl-divButtons > div > a > div > div > span {
    margin-top: 12px;
    text-transform: uppercase;
}

.apl-divButtons-selected {
    display: flex;
    background-color: #fff;
    padding: 0 4px;
}

.apl-divButtons-selected > div {
    border-bottom: 2px solid #60a4dc;
    width: 100%;
}

.apl-divButtons-selected > div > span {
    color: #60a4dc;
}

.ap-videocontainer {
    background-color: transparent;
    position: absolute;
    display: flex;
    height: 100vh;
    justify-content: center;
    width: 100%;
}

    .ap-videocontainer > video {
        /*position:absolute;
            top:0;
            left:0;*/
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
/*Panel desplegable para mostrar opciones en vez de ventana superpuesta*/
.apl-subitems {
    position: absolute;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 5px;
    overflow: hidden;
    height: 0;
    top: -1000px;
    left: 0;
    z-index: 10001;
    transition: height ease-in-out .25s;
}
.apl-subitems.show{
    height:auto;
}

.apl-featured-button-inBar
{
    color: red !important;
}

/*Panel de navegacion entre formularios en botones*/
.apl-btMenu {
    display: flex;
    display: -webkit-flex;
    box-sizing: border-box;
}

/**
    * Botones sincronización, auditoria y eliminar en formularios dinamicos
*/
.apl-HeadButtons
{
    display: flex;
}

    .apl-HeadButtons > div {
        display: flex;
        align-items: center;
        justify-content:center;
        /*width: 200px;*/
        height: 30px;
        padding: 0 10px;
        cursor: pointer;
    }

    /*.apl-HeadButtons > div:hover
    {
        border-bottom: 1px solid #ffffff;
    }*/

    .apl-HeadButtons > div > span {
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
    }

        .apl-HeadButtons > div > img {
            padding: 2px;
            margin-bottom: 2px;
        }

    .apl-HeadButtons .selectedbuttonform
    {
        border-radius: 4px;
    }

    .apl-HeadButtons .selectedbuttonform:hover {
        background-color: #767476;
    }