@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Reset */
body {
    font-family: 'Open Sans';
}

.x-body {
    font-weight: normal;
    line-height: 1.5;
}

.x-panel-body-default {
    font-weight: normal;
}

.x-keyboard-mode .x-view-item-focused {
    outline: none !important;
    outline-offset: 0 !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mr5 {
    margin-right: 5px;
}

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

.mt15 {
    margin-top: 15px !important;
}

.ml5 {
    margin-left: 5px;
}

.color-primary {
    color: #c42927;
}

.x-css-shadow {
    box-shadow: none !important;
}

.x-btn-default-small, .x-btn.x-btn-disabled.x-btn-default-small {
    background-color: #efefef;
    border-color: #afafaf;
}

.x-btn-over.x-btn-default-small {
    background-color: #efefef;
    border-color: #c9c9c9;
}

.x-btn-inner {
    font-size: 13px;
    color: #000000;
}

.x-btn-over:hover {
    text-decoration: none !important;
}

.x-btn-text.x-btn-icon-left > .x-btn-icon-el-default-small {
    margin-right: 0;
    font-size: 13px;
    padding-top: 2px;
    color: #df0a17;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.x-grid-componentcolumn .x-grid-cell .x-grid-cell-inner {
    padding-bottom: 6px;
}

.x-btn-icon-left > .x-btn-icon-el-default-toolbar-small, .x-btn-icon-right > .x-btn-icon-el-default-toolbar-small {
    font-size: 13px;
    padding-top: 1px;
    color: #df0a17;
}

.x-btn-text.x-btn-icon-left > .x-btn-icon-el-default-toolbar-small {
    margin-right: 0px;
    color: #df0a17;
}

.x-btn-wrap-default-small.x-btn-arrow-right:after {
    color: #404040;
}

.x-window-header-title-default > .x-title-icon-wrap-default > .x-title-icon-default {
    font-size: 14px;
    padding-top: 1px;
}

.x-grid-group-hd-collapsible .x-grid-group-title {
    font-family: 'Montserrat';
    font-weight: 600;
}

.x-btn-default-toolbar-small {
    padding: 8px 13px;
    border-color: #afafaf;
    background-color: #efefef;
}

.x-combo-list-item {
    line-height: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
    background-position: 1px 5px;
}

    .x-combo-list-item .x-mcombo-text {
        padding-left: 4px;
        margin-top: -2px;
    }

.x-window-header-default-top {
    background-color: #afafaf !important;
    border-color: #afafaf !important;
}

.x-window-default {
    border-color: #f8b60e !important;
}

.x-keyboard-mode .x-form-cb-checked .x-form-checkbox-focus.x-form-checkbox-default {
    color: #c42927;
}

.x-keyboard-mode .x-form-cb-checked .x-form-checkbox-focus.x-form-radio-default, .x-keyboard-mode .x-form-checkbox-focus.x-form-radio-default {
    color: #c42927;
}

.x-keyboard-mode .x-form-checkbox-focus.x-form-checkbox-default {
    color: #c42927;
}

.x-btn-over.x-btn-default-toolbar-small, .x-btn-over {
    text-decoration: none;
    border-color: #afafaf;
    background-color: #efefef;
}

.x-datepicker-selected div.x-datepicker-date {
    background-color: #df0a17;
}

.x-grid-item {
    font-weight: normal;
}

.x-boundlist-item-over {
    background: #a1a1a1;
    border-color: #a1a1a1;
}

.x-btn.x-btn-pressed {
    border-color: #000 !important;
    background-color: #000 !important;
}

    .x-btn.x-btn-pressed .x-btn-inner-default-toolbar-small {
        color: white !important;
    }

.x-keyboard-mode .x-btn-focus.x-btn-default-small {
    background-color: #efefef !important;
}
/* Fin Reset */
.x-toolbar.x-statusbar.x-docked.x-toolbar-default.x-docked-bottom.x-toolbar-docked-bottom {
    background-color: #f9f9f9;
}

.btn {
    display: inline-block;
    border: 1px solid;
    padding: 5px 12px;
    font-size: 13px;
    line-height: 1.5;
    font-family: Montserrat;
    border-radius: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}


.btn-outline-primary {
    color: #c42927;
    background-color: transparent;
    border-color: #c42927;
}

    .btn-outline-primary:not([disabled]):hover {
        background-color: #c42927;
        color: white;
    }

.btn-primary {
    color: white;
    background-color: #c42927;
    border-color: #c42927;
}

    .btn-primary:not([disabled]):hover {
        color: white;
        background-color: #a91d1c;
        border-color: #a91d1c;
    }

.btn-dark {
    color: white;
    background-color: #111;
    border-color: #111;
}

    .btn-dark:not([disabled]):hover {
        color: white;
        background-color: #111;
        border-color: #111;
    }

.btn-outline-dark {
    color: #111;
    background-color: transparent;
    border-color: #111;
}

    .btn-outline-dark:not([disabled]):hover {
        background-color: #111;
        color: white;
    }

.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Fix Tooltip de Ext.net en botones nuevas intranet */
.x-btn .x-btn-wrap {
    pointer-events: none;
}

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

.text-center {
    text-align: center;
}

/* To keep height with Floats */
div.clear {
    clear: both;
}

.noicon {
    padding-left: 3px !important;
}

.x-menu-icon-separator {
    display: none;
}

.ext-cal-evt.ext-cal-evr {
    border: 1px solid #5A5A5A;
}

    .ext-cal-evt.ext-cal-evr:hover {
        background-image: url(/Resources/images/pixela20.png);
        max-height: 100% !important;
        -moz-transition: max-height 1s;
        -ms-transition: max-height 1s;
        -o-transition: max-height 1s;
        -webkit-transition: max-height 1s;
        transition: max-height 1s;
    }

.ext-cal-evt:hover {
    z-index: 10000;
    opacity: 1;
}

.ext-cal-evt .ext-cal-evdm {
    border: 1px solid #5A5A5A;
}

    .ext-cal-evt .ext-cal-evdm:hover {
        background-image: url(/Resources/images/pixela20.png);
        max-height: 100% !important;
        -moz-transition: max-height 1s;
        -ms-transition: max-height 1s;
        -o-transition: max-height 1s;
        -webkit-transition: max-height 1s;
        transition: max-height 1s;
    }

.ext-cal-evt:hover .no-cabe {
    display: none;
}

.x-status-error-list {
    z-index: 99999;
}

/* Establecer la propiedad Cls de los GridPanel en "no-individual-cell-select" para evitar que aparezca un marco de selección en cada celda individual y que sólo se seleccionen filas enteras. 
    No afecta a la funcionalidad.
*/
.no-individual-cell-select .x-grid-item-focused .x-grid-cell-inner:before {
    border: 0 !important;
}

/*02/06/2014 -> Alberto Pradillo, se establece este etilo  alos textobx para que cuando puierdan el foco no se salga de la caja.*/
.x-form-text {
    display: inline-block !important;
}


.statusbar {
    padding: 4px 0px 4px 6px;
    margin: 5px 0px 0px 0px;
    background-color: #f5f5f5;
}

.save-button > a + a, .cancel-button > a + a {
    display: none;
}

/* Alineaciones de campos numéricos a la derecha. */
input[id*=_num] {
    text-align: right;
}

.numberFieldTabla input {
    text-align: right;
}

.x-grid-item:not(.x-grid-item-selected) .x-grid-cell-checkcolumn {
    pointer-events: none;
}

.x-grid-item:not(.x-grid-item-selected) .x-grid-cell-checkcolumn {
    pointer-events: none;
}

.x-boundlist {
    border-color: #DDDDDD !important;
}

/* Clase para los tooltip en grids */
.ext-strict .ext-ie .x-tree .x-panel-bwrap {
    position: relative;
    overflow: hidden;
}

.mascara {
    /*display: none;*/
    font-size: 18px;
    position: absolute;
    top: 45%;
    left: 45%;
}

.x-grid-view .x-grid-row .x-grid-cell-inner a {
    text-decoration: none;
    color: #3892d4;
}

/* Tooltip Bootstrap */
.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-family: 'Montserrat';
    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    opacity: 0;
    filter: alpha(opacity=0);
}

    .tooltip.in {
        opacity: 0.9;
        filter: alpha(opacity=90);
    }

    .tooltip.top {
        margin-top: -3px;
        padding: 5px 0;
    }

    .tooltip.right {
        margin-left: 3px;
        padding: 0 5px;
    }

    .tooltip.bottom {
        margin-top: 3px;
        padding: 5px 0;
    }

    .tooltip.left {
        margin-left: -3px;
        padding: 0 5px;
    }

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    background-color: #111;
    border-radius: 4px;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #111;
}

.tooltip.top-left .tooltip-arrow {
    bottom: 0;
    right: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #111;
}

.tooltip.top-right .tooltip-arrow {
    bottom: 0;
    left: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #111;
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #111;
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #111;
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #111;
}

.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    right: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #111;
}

.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    left: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #111;
}
/* Fin Tooltip */
.x-panel-header-default {
    background-color: #afafaf;
    /*background: -webkit-linear-gradient(30deg, #808080, #f9f9f9);
    background-image: linear-gradient(30deg, #808080 0%, #f9f9f9 100%);*/
}

    .x-panel-header-default .x-title-text {
        color: white;
        font-family: 'Montserrat';
        font-weight: 400;
        text-transform: uppercase;
    }

.x-grid-cell-inner .x-action-col-icon {
    margin: 0 2px;
}


.x-grid-td {
    vertical-align: middle;
}

.x-keyboard-mode .x-tab-focus.x-tab-default {
    outline: none !important;
    outline-offset: 0 !important;
}

.alert.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    padding: 20px;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.badgeListado {
    border-radius: 3px;
    text-align: center;
    margin: -2px auto 1px auto;
    color: white;
    padding: 2px 6px;
    display: inline-block;
    min-width: 45px;
}

.badgeListado-ok {
    background-color: #2ecc71;
}

.textfield-align-right input {
    text-align: right;
}

.badgeTitulo {
    color: white;
    font-family: 'Montserrat';
    font-weight: 400;
    text-transform: uppercase;
    margin-right: 89px;
    border-radius: 3px;
    font-size: 12px;
    background-color: #b9b9b9;
    display: inline-block;
    padding: 3px 7px;
    background-image: url("/Resources/images/diagonal-lines-light.svg");
}

.btnListado {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    padding: 4px 9px;
    margin-bottom: 0;
    font-size: 11px;
    line-height: 11px;
    text-align: center;
    vertical-align: middle;
    border-radius: 2px;
    background-color: white;
    min-width: 28px;
    font-family: 'Montserrat';
    font-weight: normal;
    cursor: pointer;
}

    .btnListado i {
        margin-right: 3px;
    }

    .btnListado.azul {
        background-color: #006fa0;
        color: white;
    }

        .btnListado.azul:hover {
            background-color: #333;
        }

.btnListadoLink {
    cursor: pointer;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    color: #3892d4;
    border: 1px solid #3892d4;
}

    .btnListadoLink:hover {
        background-color: #3892d4;
        color: white;
    }

.badgebtnListado {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    padding: 4px 7px;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    vertical-align: -3px;
    border-radius: 2px;
    background-color: white;
    min-width: 28px;
    font-weight: normal;
}

.badgebtnListadoLink {
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    color: #3892d4;
    border: 1px solid #3892d4;
}

.badgebtnListadoOrange {
    background-color: #ff9800;
    color: white;
    border: 1px solid transparent;
}

.badgebtnListadoGreen {
    background-color: #4caf50;
    color: white;
    border: 1px solid transparent;
}

.badgebtnListadoRed {
    background-color: #F44336;
    color: white;
    border: 1px solid transparent;
}

.cursorPointer {
    cursor: pointer;
}

.badgebtnListado > i {
    margin-right: 4px;
}

.badgebtnListadoOrange.cursorPointer {
    border-bottom: 2px solid #e08600;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

    .badgebtnListadoOrange.cursorPointer:hover {
        background-color: #e08600;
    }

.field-lg input {
    font-size: 20px;
    border: 0;
    outline: none;
    padding: 0px 10px 6px 10px;
}

.field-lg .x-form-trigger {
    vertical-align: middle;
}

.labelAno {
    font-size: 20px;
    line-height: 30px;
    color: #333;
    font-weight: 500;
    text-transform: uppercase;
}

.x-fieldset-header-default {
    padding: 5px !important;
}

    .x-fieldset-header-default > .x-fieldset-header-text {
        color: #df0a17;
        padding: 0 2px;
        font-family: 'Montserrat' !important;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 14px;
    }

/*.x-panel:not(.panelWithoutPadding) .x-grid-td {
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
}*/
.x-grid-td {
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.x-panel.panelWithoutPadding .x-grid-td {
    padding: 0 !important;
}

td.x-grid-cell .x-toolbar .x-btn-default-toolbar-small {
    padding: 4px !important;
    margin: 0 2px !important;
}

.iconoColumna {
    vertical-align: 0px;
    font-size: 14px;
    margin-right: 2px;
}

label.alert, label.boxAlert {
    height: auto !important;
    font-weight: 600;
}

.boxAlert {
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 0px;
    font-weight: 600;
    display: block;
    width: 100%;
    font-size: 13px;
    line-height: 17px;
}

    .boxAlert.info {
        background-color: #d9edf7;
        border-color: #bce8f1;
        color: #31708f;
    }

    .boxAlert.danger {
        background-color: #f5c2c7;
        border-color: #f5c2c7;
        color: #842029;
    }

.mb15 {
    margin-bottom: 15px;
}

.boxFicheros {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px 0 -10px;
    background-color: #f9f9f9;
}

    .boxFicheros > div {
        padding: 10px;
    }

        .boxFicheros > div > div {
            cursor: pointer;
            -webkit-transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -ms-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            /*border-bottom: 2px solid #4a8cc5;*/
            display: flex;
            align-items: center;
            font-size: 13px;
            font-weight: 600;
            border-radius: 89px;
            padding: 0.7rem 1.7rem;
            color: white;
            background-image: linear-gradient(30deg, #FF5A72 0%, #FEAE6E 100%);
        }

            .boxFicheros > div > div:hover {
                background-color: #4a8cc5;
            }


    .boxFicheros a {
        color: #ffffff;
        text-decoration: none;
    }

        .boxFicheros a > i {
            margin-right: 6px;
        }

.hideIfReadOnly .btnEliminarFichero {
    padding: 2px;
    display: flex;
    margin-left: 8px;
    border-radius: 4px;
}

.boxModalAviso {
    padding: 15px;
    overflow: hidden;
}

    .boxModalAviso > div:first-child {
        float: left;
        font-size: 29px;
        margin: 0 20px 0 0;
        width: 32px;
    }

    .boxModalAviso > div:last-child {
        float: left;
        width: 370px;
    }

    .boxModalAviso h2 {
        text-transform: uppercase;
        font-size: 13px;
        line-height: 17px;
        margin: 0 0 5px 0;
        /*word-break: break-all;*/
    }

    .boxModalAviso p {
        font-weight: 400;
        font-size: 15px;
        line-height: 19px;
    }

.boxModalAviso-close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 17px;
    cursor: pointer;
    color: #404040;
}

    .boxModalAviso-close i {
        -webkit-transition-duration: .6s;
        transition-duration: .6s;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
    }

    .boxModalAviso-close:hover i {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        color: #c42927;
    }

.windowAviso.x-window-default {
    border-color: #ffa726;
}

.tablaProcesos .x-grid-td {
    padding: 5px;
}

.x-fieldset {
    background: #f9f9f9 !important;
}

.fixBtnExaminar {
    width: 100%;
}

.btnBorder {
    display: inline-block;
    border: 2px solid #404040;
    border-radius: 3px;
    padding: 7px 15px;
    font-family: 'Montserrat';
    font-weight: normal;
    font-size: 13px;
    line-height: 13px;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    color: #404040;
    text-decoration: none;
}

    .btnBorder:hover {
        color: white;
        background-color: #404040;
    }

.fwBold > label, .fwBold .x-form-display-field {
    font-weight: bold;
}

.fsItalic .x-form-display-field {
    font-style: italic;
}

/* Iconito home en tabs */
#TabPanelCenter-bodyWrap > .x-tab-bar:first-child .x-box-target > a:first-child {
    display: flex;
    align-items: center;
}

#TabPanelCenter-bodyWrap .x-tab-bar .x-box-target > a:first-child:before {
    content: "\f015";
    font-family: "Font Awesome 5 Pro";
    margin-right: 5px;
    margin-bottom: 2px;
    color: white;
    display: inline-block;
}

.submenu #TabPanelCenter-bodyWrap .x-tab-bar .x-box-target > a:first-child:before {
    display: none;
}
/* Iconito home en tabs */

.x-tab-bar .x-box-target > a.x-tab-active:first-child:before {
    color: #4c82b1;
}


.itementidad {
    padding: 8px 15px;
    border-bottom: 1px dashed #C9C9C9;
    font-size: 14px;
    color: #4E585A;
    cursor: pointer
}

    .itementidad:hover {
        background: #BACED3;
    }

.buscador-entidad {
    border-bottom: 1px solid #BCD0D0;
    padding: 15px;
    background: #F0F3F3;
    box-shadow: inset 0px -1px 0px #FFFFFF;
    margin-bottom: 0;
}


/* Table Bootstrap */
table {
    background-color: transparent;
}

    table col[class*="col-"] {
        position: static;
        display: table-column;
        float: none;
    }

    table td[class*="col-"],
    table th[class*="col-"] {
        position: static;
        display: table-cell;
        float: none;
    }

th {
    text-align: left;
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
        border-top: 1px solid #dddddd;
    }

    .table > thead > tr > th {
        vertical-align: bottom;
        border-bottom: 2px solid #dddddd;
        font-weight: 500;
        font-family: 'Montserrat';
        text-transform: uppercase;
        font-size: 12px;
    }

    .table > caption + thead > tr:first-child > th,
    .table > colgroup + thead > tr:first-child > th,
    .table > thead:first-child > tr:first-child > th,
    .table > caption + thead > tr:first-child > td,
    .table > colgroup + thead > tr:first-child > td,
    .table > thead:first-child > tr:first-child > td {
        border-top: 0;
    }

    .table > tbody + tbody {
        border-top: 2px solid #dddddd;
    }

    .table .table {
        background-color: #ffffff;
    }

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
    padding: 5px;
}

.table-bordered {
    border: 1px solid #dddddd;
}

    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
        border: 1px solid #dddddd;
    }

    .table-bordered > thead > tr > th,
    .table-bordered > thead > tr > td {
        border-bottom-width: 2px;
    }

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
    background-color: #f5f5f5;
}

.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
    background-color: #e8e8e8;
}

.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
    background-color: #dff0d8;
}

.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
    background-color: #d0e9c6;
}

.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
    background-color: #d9edf7;
}

.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
    background-color: #c4e3f3;
}

.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
    background-color: #fcf8e3;
}

.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
    background-color: #faf2cc;
}

.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
    background-color: #f2dede;
}

.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
    background-color: #ebcccc;
}

.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}

@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #dddddd;
    }

        .table-responsive > .table {
            margin-bottom: 0;
        }

            .table-responsive > .table > thead > tr > th,
            .table-responsive > .table > tbody > tr > th,
            .table-responsive > .table > tfoot > tr > th,
            .table-responsive > .table > thead > tr > td,
            .table-responsive > .table > tbody > tr > td,
            .table-responsive > .table > tfoot > tr > td {
                white-space: nowrap;
            }

        .table-responsive > .table-bordered {
            border: 0;
        }

            .table-responsive > .table-bordered > thead > tr > th:first-child,
            .table-responsive > .table-bordered > tbody > tr > th:first-child,
            .table-responsive > .table-bordered > tfoot > tr > th:first-child,
            .table-responsive > .table-bordered > thead > tr > td:first-child,
            .table-responsive > .table-bordered > tbody > tr > td:first-child,
            .table-responsive > .table-bordered > tfoot > tr > td:first-child {
                border-left: 0;
            }

            .table-responsive > .table-bordered > thead > tr > th:last-child,
            .table-responsive > .table-bordered > tbody > tr > th:last-child,
            .table-responsive > .table-bordered > tfoot > tr > th:last-child,
            .table-responsive > .table-bordered > thead > tr > td:last-child,
            .table-responsive > .table-bordered > tbody > tr > td:last-child,
            .table-responsive > .table-bordered > tfoot > tr > td:last-child {
                border-right: 0;
            }

            .table-responsive > .table-bordered > tbody > tr:last-child > th,
            .table-responsive > .table-bordered > tfoot > tr:last-child > th,
            .table-responsive > .table-bordered > tbody > tr:last-child > td,
            .table-responsive > .table-bordered > tfoot > tr:last-child > td {
                border-bottom: 0;
            }
}
/* Fin Table Bootstrap */

.tablaMailjetPropio table {
    font-family: 'Montserrat';
    font-size: 13px;
}

    .tablaMailjetPropio table thead tr th {
        text-transform: uppercase;
        font-weight: 500;
        font-size: 11px;
    }

.tablaMailjetPropio .badge {
    padding: 3px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 11px;
    display: inline-flex;
    min-width: 75px;
    justify-content: center;
}

.badgeMailjet {
    padding: 3px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 11px;
    display: inline-flex;
    min-width: 75px;
    justify-content: center;
    height: 21px;
    align-items: center;
}

    .tablaMailjetPropio .badge.estado-sent, .badgeMailjet.estado-sent {
        background-color: #8085e9;
        color: white;
    }

    .tablaMailjetPropio .badge.estado-click, .badgeMailjet.estado-click {
        background-color: #4CAF50;
        color: white;
    }

    .tablaMailjetPropio .badge.estado-open, .badgeMailjet.estado-open {
        background-color: #8BC34A;
        color: white;
    }

    .tablaMailjetPropio .badge.estado-bounce, .badgeMailjet.estado-bounce {
        background-color: #ff9600;
        color: white;
    }

    .tablaMailjetPropio .badge.estado-blocked, .badgeMailjet.estado-blocked {
        background-color: #333;
        color: white;
    }

    .tablaMailjetPropio .badge.estado-spam, .badgeMailjet.estado-spam {
        background-color: #cc0b24;
        color: white;
    }

    .tablaMailjetPropio .badge.estado-other, .badgeMailjet.estado-other {
        background-color: #d5d5d5;
        color: #121212;
    }

    .tablaMailjetPropio .badge.estado-unsub, .badgeMailjet.estado-unsub {
        background-color: #23b2fb;
        color: white;
    }

.tablaMailjetPropio .enlace {
    color: #5fa2dd;
    text-decoration: none;
    min-height: 21px;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s ease-out;
}

    .tablaMailjetPropio .enlace:hover {
        color: #3f6a8f;
    }

    .tablaMailjetPropio .enlace i {
        margin-right: 4px;
    }


/*animaciones*/
.fadeIn {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: visible !important;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Cambios nuevo tema 2020 */
.x-tab-bar-default {
    background-color: #f8b60e;
}

.x-tab-default-top {
    padding: 6px 16px 6px 16px;
}

.x-tab-bar-horizontal > .x-tab-bar-body-default {
    min-height: 45px;
}

.x-tab.x-tab-active {
    background-color: white;
}

.x-tab-default-top {
    background-color: transparent;
    border-color: transparent;
}

    .x-tab-default-top .x-tab-inner-default {
        color: white;
    }

.x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
    color: #333;
}

.x-tab-inner-default, .x-body, body {
    font-family: 'Montserrat';
}

.x-tab-inner-default {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.badgePildoras {
    position: absolute;
    right: 10px;
    top: 6px;
    color: whitesmoke;
    background-color: #019ddb;
    display: flex;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 11px;
}

.x-tab-active .badgePildoras {
    background-color: white;
    color: #019ddb;
}

.tituloTabs h4 {
    font-size: 13px;
    font-family: 'Montserrat';
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-left: 3px solid #333;
    padding: 2px 0 2px 10px;
}
/* Iconito home en tabs */
#TabPanelCenter-bodyWrap .x-tab-bar .x-box-target > a:first-child {
    display: flex;
    align-items: center;
}

    #TabPanelCenter-bodyWrap .x-tab-bar .x-box-target > a:first-child:before {
        content: "\f015";
        display: inline-block;
        font-family: "Font Awesome 5 Pro";
        margin-right: 5px;
        margin-bottom: 2px;
        color: white;
    }

.x-tab-bar .x-box-target > a.x-tab-active:first-child:before {
    color: #333;
}

.x-tab-default .x-tab-close-btn {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 13px;
    top: 2px;
    right: 2px;
    color: white;
}

#TabPanelCenter-bodyWrap .x-keyboard-mode .x-tab-focus.x-tab-active.x-tab-default {
    background-color: white !important;
}

#TabPanelCenter-bodyWrap .x-tab-bar .x-box-target > a.x-tab-active:first-child:before {
    color: #333 !important;
}

.x-tab.x-tab-active.x-tab-default {
    background-color: white !important;
}

.x-tab-default.x-tab-active .x-tab-close-btn {
    color: #333;
}

.x-keyboard-mode .x-tab-default.x-tab-focus.x-tab-active .x-tab-close-btn {
    color: #333;
}

.x-mask-msg {
    padding: 10px;
    background: #df0a17;
    border-radius: 4px;
}

.x-mask-msg-text {
    background-image: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 20px;
    color: white;
    font-family: 'Montserrat';
    font-weight: normal;
    text-align: center;
}

@-webkit-keyframes ld-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.x-mask-msg-text:before {
    content: '\f110';
    font-family: "Font Awesome 5 Pro";
    font-size: 20px;
    color: white;
    margin-bottom: 8px;
    font-weight: 600;
    -webkit-animation: ld-spin 1s infinite;
    animation: ld-spin 1s infinite;
}

.x-toolbar-text-default {
    font-family: 'Montserrat';
    font-weight: 400;
    font-size: 14px;
}

.x-btn-icon-el-default-toolbar-small, .x-btn-inner-default-toolbar-small {
    color: #333;
}

.x-column-header {
    font-family: 'Montserrat';
    font-weight: 400;
    text-transform: uppercase;
}

.x-column-header-inner {
    padding: 8px 8px;
}

.x-column-header-sort-ASC .x-column-header-text-inner::after {
    content: "\f176";
    font-family: "Font Awesome 5 Pro";
}

.x-form-cb-label-default.x-form-cb-label-after {
    padding-left: 25px;
    cursor: pointer;
}

.x-form-cb-input {
    cursor: pointer;
}

.x-form-cb-label-default {
    font-size: 13px;
    font-family: 'Montserrat';
    font-weight: 400;
}

.x-form-cb-default {
    margin-top: 6px;
}

.x-form-item-label-default {
    /*font-family: 'Montserrat';
    color: #838383;*/
    color: #646464;
    font-size: 13px !important;
    font-family: 'Open Sans';
    font-weight: 400;
}

.x-form-type-text .x-form-text-default, .x-form-type-password .x-form-text-default {
    color: #333;
    font-weight: 500;
}

    .x-form-type-text .x-form-text-default::-webkit-input-placeholder {
        color: #afafaf !important;
        font-weight: normal;
        font-style: italic;
    }

    .x-form-type-text .x-form-text-default::-moz-placeholder {
        color: #afafaf !important;
        font-weight: normal;
        font-style: italic;
    }

    .x-form-type-text .x-form-text-default:-ms-input-placeholder {
        color: #afafaf !important;
        font-weight: normal;
        font-style: italic;
    }

    .x-form-type-text .x-form-text-default:-moz-placeholder {
        color: #afafaf !important;
        font-weight: normal;
        font-style: italic;
    }

.x-form-item-label-text span {
    font-style: italic;
}

.x-field-note {
    font-size: 11px;
    color: #a7a7a7;
    font-family: 'Montserrat';
    font-style: italic;
}

.FormPanelFv > .x-panel-bodyWrap > .x-panel-body {
    padding: 30px;
}

/* Sistema flex layouts */
.tablaFlexFv .x-autocontainer-innerCt {
    display: flex;
    flex-wrap: wrap;
    margin: 0px -12px 0 -12px;
}

    .tablaFlexFv .x-autocontainer-form-item, .tablaFlexFv .x-autocontainer-innerCt > .x-field {
        padding: 12px;
        margin-bottom: 0 !important;
    }

.tablaFlexFv:not(.auto) .x-autocontainer-form-item {
    flex-basis: 100%;
}

.tablaFlexFv.auto .x-autocontainer-form-item {
    flex-grow: 1;
}

.tablaFlexFv.col2 .x-autocontainer-form-item, .tablaFlexFv.col2 .x-autocontainer-innerCt > .x-field {
    flex-basis: 50%;
}



/*.x-panel-body-default, .x-fieldset, .x-fieldset .x-fieldset-body, .x-container {
    width: 100% !important;
}*/

.checksFlexFv .x-table-plain {
    width: 100%;
    margin: -10px;
}

    .checksFlexFv .x-table-plain tr {
        display: flex;
        flex-wrap: wrap;
    }

        .checksFlexFv .x-table-plain tr td {
            width: auto !important;
            padding: 2px 10px;
        }

.checksFlexFv.col5 .x-table-plain tr td {
    flex-basis: 20%;
}

.checksFlexFv.col1 .x-table-plain tr td {
    flex-basis: 100%;
}

.checksFlexFv.col4 .x-table-plain tr td {
    flex-basis: 25%;
}

.checksFlexFv.col3 .x-table-plain tr td {
    flex-basis: 33.333%;
}

.checksFlexFv.col2 .x-table-plain tr td {
    flex-basis: 50%;
}

@media (max-width: 575px) {
    .tablaFlexFv .x-autocontainer-innerCt {
        display: block;
    }

    .tablaFlexFv .x-autocontainer-form-item {
        width: 100%;
    }
}

.x-autocontainer-form-item {
    margin: 0;
}

.x-form-text-default.x-form-textarea {
    min-height: 32px;
}
/* fIN */


/* Tramites */
.campos-list {
    background-color: #f2f2f2;
    padding: 8px;
    width: 100%;
    margin-top: 20px;
}

.fila > .campo > div {
    margin: 10px;
    background-color: white;
    display: flex;
    padding: 8px;
    justify-content: space-between;
    font-size: 12px;
    font-family: 'Montserrat';
    position: relative;
    height: 33px;
}

    .fila > .campo > div > div:first-child {
        max-height: 17px;
        overflow: hidden;
    }

.cuadrocontrol {
    display: flex;
}

.controltamano {
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
}

.campo .eliminar {
    position: absolute;
    right: -8px;
    top: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    background-color: #F44336;
    border-radius: 50%;
    color: white;
    font-size: 11px;
    cursor: pointer;
}

.campo .editar {
    cursor: pointer;
    color: #8b8b8b;
}

    .campo .editar:hover {
        color: #333;
    }

.btnNuevo {
    background-color: transparent;
    display: inline-block;
    border: 1px solid #5795cb;
    padding: 6px 12px;
    line-height: 10px;
    text-transform: uppercase;
    color: #5795cb;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Montserrat';
    font-size: 12px;
    line-height: 17px;
}

    .btnNuevo:hover {
        background-color: #5795cb;
        color: white;
    }

.popoverCuadroControl {
    min-width: 154px;
    display: flex;
    justify-content: space-between;
}

.cuadrocontrol {
    width: 50px;
    height: 50px;
    position: relative;
}

.cuadrocontrol {
    width: 50px;
    height: 50px;
    position: relative;
}

    .cuadrocontrol .btnArriba {
        top: 0;
        left: 0;
        right: 0;
        position: absolute;
        margin: auto;
    }

    .cuadrocontrol .btnAbajo {
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        margin: auto;
    }

.btnIzquierda {
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
}

.mb16 {
    margin-bottom: 16px;
}

.btnDerecha {
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
}

.popoverCuadroControl p {
    text-align: center;
    font-size: 12px;
    margin-top: 3px;
}

.popoverCuadroControl .separator {
    width: 1px;
    background-color: #ddd;
    height: 30px;
    margin-top: 12px;
}

.cuadrocontrol .button, .controltamano .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: #5fa2dd;
    border-radius: 50%;
    color: white;
    font-size: 11px;
}

.controltamano .button {
    margin: 0 3px;
}

    .cuadrocontrol .button:not(.deshabilitado), .controltamano .button:not(.deshabilitado) {
        cursor: pointer;
    }

    .cuadrocontrol .button.deshabilitado, .controltamano .button.deshabilitado {
        opacity: 0.7;
    }

    .cuadrocontrol .button:not(.deshabilitado):hover, .controltamano .button:not(.deshabilitado):hover {
        background-color: #333;
    }

.configuracioncampo {
    padding: 10px 15px;
}

    .configuracioncampo .label {
        font-family: Montserrat;
        font-weight: 500;
        font-size: 13px;
        margin: 0 0 8px 0;
    }

    .configuracioncampo > div {
        margin-bottom: 16px;
    }

    .configuracioncampo .form-control {
        font-family: Montserrat;
        font-weight: normal;
        font-size: 13px;
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }

    .configuracioncampo input.form-control:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    }

    .configuracioncampo .row {
        display: flex;
        margin-left: -10px;
        margin-right: -10px;
    }

        .configuracioncampo .row .col-md-6 {
            flex-basis: 50%;
            margin: 0 10px;
        }

.mt16 {
    margin-top: 16px;
}

.boxResumenes {
    padding: 30px;
}

    .boxResumenes > div {
        padding: 20px;
        margin-bottom: 15px;
        background-color: white;
        border: 1px solid #f2f2f2;
    }

.cabeceraFake {
    background: -webkit-linear-gradient(30deg, #808080, #f9f9f9);
    background-image: linear-gradient(30deg, #808080 0%, #f9f9f9 100%);
    padding: 12px 16px 12px 16px;
    color: white;
    font-family: 'Montserrat';
    font-weight: 300;
    text-transform: uppercase;
    font-size: 16px;
}

.boxCardResumen .d-flex {
    display: flex;
    align-items: center;
}

    .boxCardResumen .d-flex h3 {
        font-family: 'Montserrat';
        margin: 0 20px 0 0;
        font-weight: 600;
    }

.boxCardResumen .lista {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
}

    .boxCardResumen .lista > div {
        margin-right: 10px;
    }

    .boxCardResumen .lista .campo {
        min-width: 80px;
        font-weight: 600;
        margin-right: 10px;
        margin-bottom: 4px;
    }

.valorcampo {
    display: flex;
    flex-wrap: wrap;
}

    .valorcampo a {
        padding: 5px 12px;
        border-radius: 3px;
        background-color: #828282;
        color: white;
        cursor: pointer;
        border-bottom: 2px solid rgba(0, 0, 0, 0.19);
        margin: 5px;
        font-size: 12px;
        display: flex;
        text-decoration: none;
        font-weight: normal;
        line-height: 17px;
        align-items: center;
    }

        .valorcampo a:hover {
            background-color: #6a6a6a;
        }

        .valorcampo a i {
            margin-right: 5px;
        }

        .valorcampo a span {
            display: inline-block;
            max-width: 140px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.badgeListado {
    border-radius: 3px;
    text-align: center;
    margin: -2px auto 1px auto;
    color: white;
    padding: 2px 6px;
    display: inline-block;
    min-width: 45px;
}

.badgeListado-ok {
    background-color: #2ecc71;
}

.badgeListado-ko {
    background-color: #cc2e2e;
}

.textfield-align-right input {
    text-align: right;
}

.badgeTitulo {
    color: white;
    font-family: 'Montserrat';
    font-weight: 300;
    text-transform: uppercase;
    margin-right: 89px;
    border-radius: 3px;
    font-size: 12px;
    background-color: #b9b9b9;
    display: inline-block;
    padding: 3px 7px;
    background-image: url("/Resources/images/diagonal-lines-light.svg");
}

.btnListado {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    padding: 4px 9px;
    margin-bottom: 0;
    font-size: 11px;
    line-height: 11px;
    text-align: center;
    vertical-align: middle;
    border-radius: 2px;
    background-color: white;
    min-width: 28px;
    font-family: 'Montserrat';
    font-weight: normal;
    cursor: pointer;
}

    .btnListado i {
        margin-right: 3px;
    }

    .btnListado.azul {
        background-color: #006fa0;
        color: white;
    }

        .btnListado.azul:hover {
            background-color: #333;
        }

.btnListadoLink {
    cursor: pointer;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    color: #3892d4;
    border: 1px solid #3892d4;
}

    .btnListadoLink:hover {
        background-color: #3892d4;
        color: white;
    }

.badgebtnListado {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    padding: 4px 7px;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    vertical-align: -3px;
    border-radius: 2px;
    background-color: #df0a17;
    min-width: 28px;
    font-weight: normal;
}

.badgebtnListadoLink {
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    color: #3892d4;
    border: 1px solid #3892d4;
}

.badgebtnListadoOrange {
    background-color: #ff9800;
    color: white;
    border: 1px solid transparent;
}

.badgebtnListadoGreen {
    background-color: #4caf50;
    color: white;
    border: 1px solid transparent;
}

.badgebtnListadoRed {
    background-color: #F44336;
    color: white;
    border: 1px solid transparent;
}

.cursorPointer {
    cursor: pointer;
}

.badgebtnListado > i {
    margin-right: 4px;
}

.badgebtnListadoOrange.cursorPointer {
    border-bottom: 2px solid #e08600;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

    .badgebtnListadoOrange.cursorPointer:hover {
        background-color: #e08600;
    }

.badgeEstadoListado.badgeEstadoListadoVerde {
    background-color: #2ecc71;
    color: white;
}

.badgeEstadoListado.badgeEstadoListadoNaranja {
    background-color: #ff8029;
    color: white;
}

.badgeEstadoListado.badgeEstadoListadoRojo {
    background-color: #e74c3c;
    color: white;
}

.badgeEstadoListado.badgeEstadoListadoNegro {
    background-color: #000000;
    color: white;
}

.badgeEstadoListado.badgeEstadoListadoGris {
    background-color: #afafaf;
    color: white;
}

.badgeEstadoListado.badgeEstadoListadoAzul {
    background-color: #60b8d9;
    color: white;
}

.badgeEstadoListado.gener {
    background-color: #f0932b;
    color: white;
}

.badgeEstadoListado.badgeEstadoListadoAquamarina {
    background-color: #0651ad;
    color: white;
}

.badgeEstadoListado.badgeEstadoListadoPlum {
    background-color: #e68ce4;
    color: white;
}


.badgeEstadoListado.badgeEstadoListadoAzul {
    background-color: #25a9d0;
    color: white;
}

.badgeEstadoListado {
    display: inline-block;
    padding: 3px 5px;
    border-radius: 4px;
    line-height: 1.5;
    font-family: 'Montserrat';
    min-width: 120px;
    font-weight: 600;
    font-size: 11px;
    text-align: center;
}

/* Variante corta para columnas estrechas (p. ej. la abreviatura de la disciplina): sin el ancho mínimo de 120px. */
.badgeEstadoListado.badgeEstadoListadoMini {
    min-width: 0;
    padding: 3px 8px;
}

.badgebtnListadoClick {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    padding: 4px 7px;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    vertical-align: -3px;
    border-radius: 5px;
    background-color: #000000;
    color: #ffffff;
    min-width: 60px;
    font-weight: normal;
}

.badgeSimple {
    display: inline-block;
    padding: 3px 5px;
    border-radius: 4px;
    line-height: 1.5;
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 11px;
    text-align: center;
    min-width: 35px;
}

    .badgeSimple.verde {
        background-color: #2ecc71;
        color: white;
    }

    .badgeSimple.naranja {
        background-color: #ff8029;
        color: white;
    }

    .badgeSimple.rojo {
        background-color: #e74c3c;
        color: white;
    }

    .badgeSimple.negro {
        background-color: #000000;
        color: white;
    }

    .badgeSimple.azul {
        background-color: #3498db;
        color: white;
    }

    .badgeSimple.gris {
        background-color: #95a5a6;
        color: white;
    }

.badgeEstado {
    background-color: transparent;
    display: inline-block;
    border: 1px solid transparent;
    padding: 5px 8px !important;
    font-size: 10px;
    line-height: 10px;
    text-transform: uppercase;
    color: #111;
    text-align: center;
    font-weight: 500;
    min-width: 100px !important;
    border-radius: 3px 3px
}

    .badgeEstado.relleno {
        border-radius: 3px;
        color: white;
        /*min-width: 91px;*/
        text-align: center;
    }

    .badgeEstado.hover {
        cursor: pointer;
    }

    .badgeEstado i {
        margin-right: 6px;
    }

    .badgeEstado.verde i {
        color: #4caf50;
    }

    .badgeEstado.rojo i {
        color: #f44336;
    }

    .badgeEstado.azul i {
        color: #029cdb;
    }

    .badgeEstado.gris i {
        color: #838383;
    }

    .badgeEstado.relleno.verde {
        background-color: #4caf50;
    }

    .badgeEstado.relleno.naranja {
        background-color: #ff9800;
    }

    .badgeEstado.relleno.rojo {
        background-color: #f44336;
    }

    .badgeEstado.relleno.azul {
        background-color: #029cdb;
    }

    .badgeEstado.relleno.gris {
        background-color: #838383
    }

    .badgeEstado.relleno.verde.hover:hover {
        background-color: #378f3b;
    }

    .badgeEstado.relleno.rojo.hover:hover {
        background-color: #cf3328;
    }

    .badgeEstado.relleno.azul.hover:hover {
        background-color: #0087bf;
    }

    .badgeEstado.relleno.naranja.hover:hover {
        background-color: #e18600;
    }

    .badgeEstado.relleno.gris.hover:hover {
        background-color: #6a6a6a;
    }

    .badgeEstado.relleno.verde i, .badgeEstado.relleno.rojo i, .badgeEstado.relleno.azul i, .badgeEstado.relleno.gris i, .badgeEstado.relleno.naranja i {
        color: white;
    }

.invalid-border {
    border: 1px solid #cf4c35;
}

.cntOptions {
    max-height: 200px;
    overflow-y: auto;
}

/* FIN TRÁMITES */

/*ECOMMERCE*/

/* Productos Compra */
.productosCompra .rowitem {
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

    .productosCompra .rowitem:nth-child(even) {
        background-color: #f9f9f9;
    }

    .productosCompra .rowitem h2 {
        font-family: 'Montserrat', sans-serif;
        color: #3892d4;
        float: left;
        margin: 5px 0;
    }

.rowitem-cabecera {
    overflow: hidden;
    margin-bottom: 15px;
    margin: -5px 0 10px 0;
}

.productosCompra .boxTemporada {
    color: #f39c12;
    font-weight: bold;
}

.productosCompra .boxAtributos {
    float: left;
    margin: 0 5px -5px 5px;
}

    .productosCompra .boxAtributos > div {
        display: inline-block;
        border: 1px solid #3892d4;
        border-radius: 4px;
        padding: 3px 6px;
        color: #3892d4;
        font-size: 12px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        line-height: 12px;
        margin: 5px 5px 0 5px;
        background-color: white;
    }

.productosCompra .boxTotales {
    float: right;
    padding: 5px;
    color: #3892d4;
    text-transform: uppercase;
    font-weight: 600;
    margin-right: 10px;
}

    .productosCompra .boxTotales > label > div {
        display: inline-block;
        background-color: #f39c12;
        color: white;
        border-radius: 4px;
        padding: 2px 5px 1px 5px;
        font-size: 11px;
        position: relative;
    }

        .productosCompra .boxTotales > label > div:before {
            content: '';
            display: inline-block;
            border-top: 5px solid transparent;
            border-left: 6px solid #f39c12;
            border-bottom: 5px solid transparent;
            position: absolute;
            right: -6px;
            top: 50%;
            margin-top: -5px;
        }

    .productosCompra .boxTotales > label > span {
        color: #f39c12;
        margin-left: 4px;
        font-weight: 600;
        font-size: 17px;
        vertical-align: -2px;
        min-width: 28px;
        display: inline-block;
        text-align: center;
    }

td.boxAtributos > div {
    display: inline-block;
    border: 1px solid #3892d4;
    border-radius: 4px;
    padding: 3px 6px;
    color: #3892d4;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 12px;
    margin-right: 5px;
    background-color: white;
}

.productosCompra .cancel-button {
    float: right;
    margin-left: 5px;
    margin-top: 2px;
}

.productosCompra .rowitem h2 span {
    font-size: 13px;
    color: #a7a7a7;
    font-weight: normal;
}

.productosCompra .rowItem-campos {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
    flex-wrap: nowrap;
}

    .productosCompra .rowItem-campos > div {
        flex: 1 5;
    }

        .productosCompra .rowItem-campos > div > div {
            display: inline-block;
        }

        .productosCompra .rowItem-campos > div > label {
            font-weight: bold;
            display: inline-block;
            color: #717171;
            vertical-align: 9px;
            margin-right: 10px;
        }

@media (max-width: 1218px) {
    .productosCompra .rowItem-campos > div > label {
        display: block;
        margin-bottom: 5px;
    }
}

.titleTallas {
    font-family: 'Montserrat', sans-serif;
    color: #3892d4;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 8px;
    display: inline-block;
}

    .titleTallas:before {
        content: '';
        width: 100%;
        height: 1px;
        background-color: #3892d4;
        display: block;
        margin-bottom: 3px;
    }

.productosCompra .rowItem-tallas {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 -10px;
}

    .productosCompra .rowItem-tallas > div {
        margin: 0 10px;
    }

        .productosCompra .rowItem-tallas > div > label {
            font-weight: bold;
            display: inline-block;
            color: #717171;
            vertical-align: 8px;
            margin-right: 10px;
        }

        .productosCompra .rowItem-tallas > div > div {
            display: inline-block;
        }

/*ComprasForm*/
.rowitem-totales {
    overflow: hidden;
    background-color: #3892d4;
    color: white;
    padding: 5px 0;
}

    .rowitem-totales > div {
        padding: 4px 10px;
        float: right;
        border-left: 1px solid rgba(255, 255, 255, 0.44);
    }

        .rowitem-totales > div span {
            font-weight: bold;
        }

/*PANEL LANDER*/
/* Paneles Lander */
.panelLander .x-view-item-focused, .panelLander-pndt .x-view-item-focused, .panelLander-danger .x-view-item-focused, .panelLander-success .x-view-item-focused {
    outline: none !important;
    outline-offset: initial !important;
}
/* Panel default azul */
.panelLander {
    border-left: 1px solid #3892d4;
    border-right: 1px solid #3892d4;
    border-bottom: 1px solid #3892d4;
    margin-bottom: 20px;
}

    .panelLander .subtitulo {
        line-height: 20px;
        color: white;
        font-family: 'Montserrat', sans-serif;
        text-shadow: 1px 1px 1px #267ab7;
        text-transform: uppercase;
        margin-left: 5px;
        font-size: 15px;
    }

        .panelLander .subtitulo i {
            margin-right: 5px;
        }

    .panelLander table > thead > tr > th {
        padding: 5px 0 5px 8px;
        color: #267ab7;
        height: 29px;
    }

        .panelLander table > thead > tr > th:last-child {
            padding: 5px 8px;
            height: 29px;
        }

    .panelLander table > tbody > tr > td {
        padding: 2px 0 2px 8px;
        height: 29px;
    }

    .panelLander table > tbody > tr:first-child > td {
        padding-top: 10px !important;
    }

    .panelLander table > tbody > tr:last-child > td {
        padding-bottom: 5px !important;
    }

    .panelLander table > tbody > tr > td:last-child {
        padding: 2px 8px;
        height: 29px;
    }

    .panelLander table > thead > tr {
        background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0, rgba(41, 120, 196, 0.15)), color-stop(1, #FFFFFF) );
        background-image: -o-linear-gradient(top, rgba(41, 120, 196, 0.15) 0%, #FFFFFF 100%);
        background-image: -moz-linear-gradient(top, rgba(41, 120, 196, 0.15) 0%, #FFFFFF 100%);
        background-image: -webkit-linear-gradient(top, rgba(41, 120, 196, 0.15) 0%, #FFFFFF 100%);
        background-image: -ms-linear-gradient(top, rgba(41, 120, 196, 0.15) 0%, #FFFFFF 100%);
        background-image: linear-gradient(to top, rgba(41, 120, 196, 0.15) 0%, #FFFFFF 100%);
    }

/* Panel Pendientes naranja */
.panelLander-pndt {
    border-left: 1px solid #f39c12;
    border-right: 1px solid #f39c12;
    border-bottom: 1px solid #f39c12;
    margin-bottom: 20px;
}

    .panelLander-pndt .subtitulo {
        line-height: 20px;
        color: white;
        font-family: 'Montserrat', sans-serif;
        text-shadow: 1px 1px 1px #ce8209;
        text-transform: uppercase;
        margin-left: 5px;
        font-size: 15px;
    }

    .panelLander-pndt table > thead > tr > th {
        color: #ce8209;
        padding: 5px 0 5px 8px;
        height: 29px;
    }

        .panelLander-pndt table > thead > tr > th:last-child {
            padding: 5px 8px;
            height: 29px;
        }

    .panelLander-pndt table > tbody > tr > td {
        padding: 2px 0 2px 8px;
        height: 29px;
    }

    .panelLander-pndt table > tbody > tr:first-child > td {
        padding-top: 9px !important;
    }

    .panelLander-pndt table > tbody > tr:last-child > td {
        padding-bottom: 5px !important;
    }

    .panelLander-pndt table > tbody > tr > td:last-child {
        padding: 2px 8px;
        height: 29px;
    }

    .panelLander-pndt table > thead > tr {
        background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0, rgba(243, 156, 18, 0.15)), color-stop(1, #FFFFFF) );
        background-image: -o-linear-gradient(top, rgba(243, 156, 18, 0.15) 0%, #FFFFFF 100%);
        background-image: -moz-linear-gradient(top, rgba(243, 156, 18, 0.15) 0%, #FFFFFF 100%);
        background-image: -webkit-linear-gradient(top, rgba(243, 156, 18, 0.15) 0%, #FFFFFF 100%);
        background-image: -ms-linear-gradient(top, rgba(243, 156, 18, 0.15) 0%, #FFFFFF 100%);
        background-image: linear-gradient(to top, rgba(243, 156, 18, 0.15) 0%, #FFFFFF 100%);
    }

/* Panel danger rojo */
.panelLander-danger {
    border-left: 1px solid #f44336;
    border-right: 1px solid #f44336;
    border-bottom: 1px solid #f44336;
    margin-bottom: 20px;
}

    .panelLander-danger .subtitulo {
        line-height: 20px;
        color: white;
        font-family: 'Montserrat', sans-serif;
        text-shadow: 1px 1px 1px #da2e22;
        text-transform: uppercase;
        margin-left: 5px;
        font-size: 15px;
    }

    .panelLander-danger table > thead > tr > th {
        padding: 5px 0 5px 8px;
        color: #da2e22;
        height: 29px;
    }

        .panelLander-danger table > thead > tr > th:last-child {
            padding: 5px 8px;
            height: 29px;
        }

    .panelLander-danger table > tbody > tr > td {
        padding: 2px 0 2px 8px;
        height: 29px;
    }

    .panelLander-danger table > tbody > tr:first-child > td {
        padding-top: 9px !important;
    }

    .panelLander-danger table > tbody > tr:last-child > td {
        padding-bottom: 5px !important;
    }

    .panelLander-danger table > tbody > tr > td:last-child {
        padding: 2px 8px;
        height: 29px;
    }

    .panelLander-danger table > thead > tr {
        background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0, rgba(244, 67, 54, 0.15)), color-stop(1, #FFFFFF) );
        background-image: -o-linear-gradient(top, rgba(244, 67, 54, 0.15) 0%, #FFFFFF 100%);
        background-image: -moz-linear-gradient(top, rgba(244, 67, 54, 0.15) 0%, #FFFFFF 100%);
        background-image: -webkit-linear-gradient(top, rgba(244, 67, 54, 0.15) 0%, #FFFFFF 100%);
        background-image: -ms-linear-gradient(top, rgba(244, 67, 54, 0.15) 0%, #FFFFFF 100%);
        background-image: linear-gradient(to top, rgba(244, 67, 54, 0.15) 0%, #FFFFFF 100%);
    }

/* Panel añadir verde */
.panelLander-success {
    border-left: 1px solid #4caf50;
    border-right: 1px solid #4caf50;
    border-bottom: 1px solid #4caf50;
    margin-bottom: 20px;
}

    .panelLander-success .subtitulo {
        line-height: 20px;
        color: white;
        font-family: 'Montserrat', sans-serif;
        text-shadow: 1px 1px 1px #39983d;
        text-transform: uppercase;
        margin-left: 5px;
        font-size: 15px;
    }

    .panelLander-success table > thead > tr > th {
        padding: 5px 0 5px 8px;
        color: #39983d;
        height: 29px;
    }

        .panelLander-success table > thead > tr > th:last-child {
            padding: 5px 8px;
            height: 29px;
        }

    .panelLander-success table > tbody > tr > td {
        padding: 2px 0 2px 8px;
        height: 29px;
    }

    .panelLander-success table > tbody > tr:first-child > td {
        padding-top: 9px !important;
    }

    .panelLander-success table > tbody > tr:last-child > td {
        padding-bottom: 5px !important;
    }

    .panelLander-success table > tbody > tr > td:last-child {
        padding: 2px 8px;
        height: 29px;
    }

    .panelLander-success table > thead > tr {
        background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0, rgba(76, 175, 80, 0.15)), color-stop(1, #FFFFFF) );
        background-image: -o-linear-gradient(top, rgba(76, 175, 80, 0.15) 0%, #FFFFFF 100%);
        background-image: -moz-linear-gradient(top, rgba(76, 175, 80, 0.15) 0%, #FFFFFF 100%);
        background-image: -webkit-linear-gradient(top, rgba(76, 175, 80, 0.15) 0%, #FFFFFF 100%);
        background-image: -ms-linear-gradient(top, rgba(76, 175, 80, 0.15) 0%, #FFFFFF 100%);
        background-image: linear-gradient(to top, rgba(76, 175, 80, 0.15) 0%, #FFFFFF 100%);
    }

.containerfotos {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

    .containerfotos .rowitem {
        padding: 10px;
    }

        .containerfotos .rowitem .containerfoto {
            text-align: center;
            position: relative;
            display: flex;
        }

            .containerfotos .rowitem .containerfoto img {
                max-width: 140px;
                max-height: 140px;
                margin: 0 auto;
                object-fit: cover;
                width: 100%;
                min-width: 140px;
                border: 1px solid #9E9E9E;
            }

.boxEnlaceSeccion {
    position: relative;
    overflow: hidden;
    height: 140px;
}

.flex100 .boxEnlaceSeccion {
    height: 280px;
}

.flex25 .boxEnlaceSeccion {
    height: 115px;
}

.boxEnlaceSeccion-ribbon {
    position: absolute;
    left: 0;
    padding: 4px 6px;
    font-size: 11px;
    line-height: 11px;
    text-transform: uppercase;
    color: white;
    font-family: 'Montserrat', sans-serif;
    top: 10px;
    background-color: #9C27B0;
    border-radius: 0 3px 3px 0;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.boxEnlaceSeccion-img {
    display: block;
    height: 100%;
    background-size: cover;
    background-position: center;
    border: 1px solid #d2d2d2;
}

.boxEnlaceSeccion-info {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    text-align: center;
    z-index: 997;
    color: #fff;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    background-color: rgba(0,72,107,0.75);
}

.boxEnlaceSeccion:hover .boxEnlaceSeccion-info {
    opacity: 1
}

.boxEnlaceSeccion:hover .boxEnlaceSeccion-ribbon {
    opacity: 1;
}

.boxEnlaceSeccion-txt {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    height: 100%
}

    .boxEnlaceSeccion-txt > div > div {
        width: 100%;
    }

    .boxEnlaceSeccion-txt > div {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%
    }

    .boxEnlaceSeccion-txt h3 {
        margin: 0 auto 10px auto;
        font-size: 14px;
        word-wrap: break-word;
        text-align: center;
        width: 85%;
    }

.boxEnlaceSeccion-btns > a {
    margin: 5px;
    font-size: 16px;
    text-align: center;
    color: white;
    border-radius: 50%;
    display: inline-block;
    width: 44px;
    height: 44px;
    background-color: transparent;
    border: 2px solid white;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    text-decoration: none;
}

    .boxEnlaceSeccion-btns > a:first-child:hover {
        background-color: #4caf50;
        border: 2px solid transparent;
    }

    .boxEnlaceSeccion-btns > a:nth-child(2):hover {
        background-color: #00BCD4;
        border: 2px solid transparent;
    }

    .boxEnlaceSeccion-btns > a:nth-child(3):hover {
        background-color: #003cda;
        border: 2px solid transparent;
    }

    .boxEnlaceSeccion-btns > a:last-child:hover {
        background-color: #F44336;
        border: 2px solid transparent;
    }

    .boxEnlaceSeccion-btns > a > i {
        min-width: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

.x-grid-view .x-grid-row .x-grid-cell-inner a.buttonStatus {
    width: calc(100% - 1px) !important;
}
/*.x-notification .x-window-body{
    padding: 0 !important;
}*/
.notificacionExtnet {
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: normal;
    height: calc(100% + 3px);
    margin: -3px;
}

    .notificacionExtnet .content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .notificacionExtnet .texto {
        padding: 10px;
        word-break: break-word;
    }

    .notificacionExtnet .buttons {
        padding: 8px;
        background-color: #f5f5f5;
        display: flex;
        flex-wrap: wrap;
        margin: -5px;
        justify-content: center;
    }

        .notificacionExtnet .buttons > div {
            margin: 5px;
        }

        .notificacionExtnet .buttons button {
            padding: 7px 12px;
            border-radius: 0;
            background-color: #5fa2dd;
            color: white;
            border: 0;
            cursor: pointer;
            transition: all .2s ease-in-out;
        }

            .notificacionExtnet .buttons button:hover {
                background-color: #4c8cc5;
            }

            .notificacionExtnet .buttons button i {
                margin-right: 3px;
            }


/* Popover */
.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 276px;
    padding: 1px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    line-break: auto;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    font-size: 14px;
    background-color: #ffffff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

    .popover.top {
        margin-top: 0px;
    }

    .popover.right {
        margin-left: 10px;
    }

    .popover.bottom {
        margin-top: 10px;
    }

    .popover.left {
        margin-left: -10px;
    }

    .popover > .arrow {
        border-width: 11px;
    }

        .popover > .arrow,
        .popover > .arrow:after {
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
        }

            .popover > .arrow:after {
                content: "";
                border-width: 10px;
            }

    .popover.top > .arrow {
        bottom: -11px;
        left: 50%;
        margin-left: -11px;
        border-top-color: #999999;
        border-top-color: rgba(0, 0, 0, 0.25);
        border-bottom-width: 0;
    }

        .popover.top > .arrow:after {
            bottom: 1px;
            margin-left: -10px;
            content: " ";
            border-top-color: #ffffff;
            border-bottom-width: 0;
        }

    .popover.right > .arrow {
        top: 50%;
        left: -11px;
        margin-top: -11px;
        border-right-color: #999999;
        border-right-color: rgba(0, 0, 0, 0.25);
        border-left-width: 0;
    }

        .popover.right > .arrow:after {
            bottom: -10px;
            left: 1px;
            content: " ";
            border-right-color: #ffffff;
            border-left-width: 0;
        }

    .popover.bottom > .arrow {
        top: -11px;
        left: 50%;
        margin-left: -11px;
        border-top-width: 0;
        border-bottom-color: #999999;
        border-bottom-color: rgba(0, 0, 0, 0.25);
    }

        .popover.bottom > .arrow:after {
            top: 1px;
            margin-left: -10px;
            content: " ";
            border-top-width: 0;
            border-bottom-color: #ffffff;
        }

    .popover.left > .arrow {
        top: 50%;
        right: -11px;
        margin-top: -11px;
        border-right-width: 0;
        border-left-color: #999999;
        border-left-color: rgba(0, 0, 0, 0.25);
    }

        .popover.left > .arrow:after {
            right: 1px;
            bottom: -10px;
            content: " ";
            border-right-width: 0;
            border-left-color: #ffffff;
        }

.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
}

.popover-content {
    padding: 9px 14px;
}

.popover.in {
    z-index: 99999;
    display: block;
    opacity: 1;
}

/* Nuevo */
.botoneraFlex {
    display: flex;
    flex-wrap: wrap;
    margin: -5px;
}

    .botoneraFlex.justify-content-center {
        justify-content: center;
    }

    .botoneraFlex > div {
        margin: 5px;
    }

.jornadasPartidos {
    cursor: pointer;
}
/* Estilos básicos para .form-control */
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    /* Estilos para .form-control en estado de desactivado */
    .form-control:disabled, .form-control[readonly] {
        background-color: #e9ecef;
        opacity: 1;
    }

    /* Estilos para .form-control con focus */
    .form-control:focus {
        color: #495057;
        background-color: #fff;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    /* Estilos para .form-control::placeholder */
    .form-control::placeholder {
        color: #6c757d;
        opacity: 1;
    }

/* Estilos para .form-control en tamaño pequeño */
.form-control-sm {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

/* Estilos para .form-control en tamaño grande */
.form-control-lg {
    height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

/* Estilos para select.form-control */
select.form-control:focus::-ms-value {
    color: #495057;
    background-color: #fff;
}

select.form-control[multiple], select.form-control[size]:not([size="1"]) {
    height: auto;
}

/* Estilos para textarea.form-control */
textarea.form-control {
    height: auto;
}

.tarjetasPerfiles {
    background-color: #f6f2ed;
    padding: 30px;
    font-family: Montserrat;
}

    .tarjetasPerfiles .tarjeta {
        background-color: white;
        display: flex;
        position: relative;
        padding: 20px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .06);
    }

    .tarjetasPerfiles .numerito {
        position: absolute;
        right: 20px;
        top: 24px;
        font-size: 12.5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .tarjetasPerfiles .numerito span {
            position: absolute;
            top: 7px;
            color: #c42927;
            font-weight: 600;
        }

        .tarjetasPerfiles .numerito i {
            color: #c42927;
            font-size: 36px;
        }

    .tarjetasPerfiles .icono {
        margin-right: 18px;
    }

        .tarjetasPerfiles .icono div {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: #111;
            color: white;
        }

    .tarjetasPerfiles .tarjeta + .tarjeta {
        margin-top: 12px;
    }

    .tarjetasPerfiles .cargo {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .tarjetasPerfiles .vadgeActivo {
        display: inline-block;
        padding: 5px 12px;
        font-size: 12px;
        line-height: 1.4;
        font-family: Montserrat;
        border-radius: 3px;
        text-align: center;
        font-weight: 500;
        cursor: default;
        background-color: #4caf502e;
        border: 0;
        color: #4CAF50;
    }

    .tarjetasPerfiles .bordelateral {
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background-color: #4CAF50;
    }

.ficherosBox .input-group {
    display: flex;
    justify-content: space-between;
}

.ficherosBox .state {
    border-bottom: 1px solid #cccccc;
    padding: 10px 0 10px;
}

.input-group-append {
    display: flex;
    align-items: center;
}

.ficherosBox .form-control {
    display: flex;
    align-items: center;
    width: 90%;
}

    .ficherosBox .form-control .icon i {
        font-size: 23px;
        color: #848689;
        margin-right: 10px;
    }

.ficherosBox input {
    height: 28px;
    padding: 3px 10px;
    border: 1px solid #ababab;
    width: 100%;
}
/* Estilos para el contenedor del checkbox personalizado */
.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    margin-right: 0.5rem;
}

.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: middle;
    padding-top: 3px;
    vertical-align: -3px;
    padding-left: 5px;
}

    .custom-control-label::before {
        position: absolute;
        top: 0.25rem;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        content: "";
        background-color: #fff;
        border: 1px solid #adb5bd;
        border-radius: 0;
    }

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #111;
    border-color: #111;
}

.custom-control-input:checked ~ .custom-control-label::after {
    position: absolute;
    top: 0.30rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat center/80% 80%;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564 1.27a.5.5 0 0 1 .707.707L3.73 5.518a.5.5 0 0 1-.707 0L1.228 3.723a.5.5 0 0 1 .707-.707L3.377 4.46 6.564 1.27z'/%3E%3C/svg%3E");
}

.custom-control-label:hover::before {
    border-color: #0056b3;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    border-color: #80bdff;
}

.red-row {
    background: #f9cfcf;
}

    .red-row.x-grid-row:hover {
        background: #EFB8B8;
        border-color: #EFB8B8;
    }

.x-grid-item-selected .red-row {
    background: #e89b9b !important;
}

.purple-row {
    background: #dcabf5;
}

    .purple-row.x-grid-row:hover {
        background: #cba6de;
        border-color: #cba6de;
    }

.x-grid-item-selected .purple-row {
    background: #a384b3 !important;
}

.green-row {
    background: #75e596;
}

    .green-row.x-grid-row:hover {
        background: #56bf75;
        border-color: #56bf75;
    }

.x-grid-item-selected .green-row {
    background: #519d68 !important;
}

.blue-row {
    background: #92cffb;
}

    .blue-row.x-grid-row:hover {
        background: #78b4df;
        border-color: #78b4df;
    }

.x-grid-item-selected .blue-row {
    background: #6298bf !important;
}

.yellow-row {
    background: #edfb92;
}

    .yellow-row.x-grid-row:hover {
        background: #f3fcb6;
        border-color: #f3fcb6;
    }

.x-grid-item-selected .yellow-row {
    background: #d9e879 !important;
}
/* Estilos para el contenedor del checkbox personalizado */

ol.forzar-list-style {
    list-style: decimal !important;
    padding-left: 26px;
}

.x-panel-body-default {
    font-weight: normal;
}

.textoInstrucciones ol + p {
    margin-top: 8px;
}

.textoInstrucciones p + p {
    margin-top: 8px;
}

.badgeDestacada {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 16px;
    vertical-align: 7px;
    min-width: 81px;
    text-align: center;
    font-family: 'Montserrat';
    font-weight: 500;
}

    .badgeDestacada:hover {
        cursor: pointer;
    }

    .badgeDestacada.inscrito {
        background-color: #4caf50;
        color: white;
    }

    .badgeDestacada.solicitado {
        background-color: #ff9800;
        color: white;
    }

    .badgeDestacada.pendiente {
        background-color: #03a9f4;
        color: white;
    }

    .badgeDestacada.pendienteCambioClub {
        background-color: #e91e63;
        color: white;
    }

    .badgeDestacada.denegado {
        background-color: #f44336;
        color: white;
    }

    .badgeDestacada.baja {
        background-color: #795548;
        color: white;
    }

    .badgeDestacada.abierto {
        background-color: #00bcd4;
        color: white;
    }

    .badgeDestacada.pendienteFA {
        background-color: #9c27b0;
        color: white;
    }

.x-form-item-default.x-item-disabled {
    opacity: 0.6 !important;
}

.dropdown-container {
    display: flex;
    align-items: center;
}

   .dropdown-container label {
      white-space: nowrap;
      padding: 3px 9px;
      font-weight: 500;
      font-size: 12px;
      border-radius: 3px 0 0 3px;
      flex-grow: 1;
   }

    .dropdown-container.naranja label {
        background-color: #ff9800;
        color: white;
    }

    .dropdown-container.azul label {
        background-color: #2196f3;
        color: white;
    }

    .dropdown-container.gris label {
        background-color: #616161;
        color: white;
    }

    .dropdown-container.rojo label {
        background-color: #f44336;
        color: white;
    }

    .dropdown-container.verde label {
        background-color: #4caf50;
        color: white;
    }

    .dropdown-container.morado label {
        background-color: #673ab7;
        color: white;
    }

    .dropdown-container.cian label {
        background-color: #00bcd4;
        color: white;
    }

    .dropdown-container.naranjaOscuro label {
        background-color: #ff5722;
        color: white;
    }

.estado select {
    padding: 0px 8px;
    max-width: 100%;
    width: 100%;
    font-size: 12px;
    border-color: transparent;
    border-radius: 0 3px 3px 0;
    height: 23px;
    text-indent: -9999px;
    display: inline-block;
    width: 20px;
    cursor: pointer;
}

.x-window-header-title-default > .x-title-icon-wrap-default > .x-title-icon-default {
    color: #f8b60e;
}

.btnAccion:hover {
    border-color: #df0a17;
}

.btnToolbar:hover {
    border-color: #df0a17;
}

/* Fila ampliada al pasar el ratón por un listado (activarFilaAmpliada en JSColumns.js) */
.fila-ampliada-popup {
    display: none;
    position: fixed;
    z-index: 30000;
    flex-wrap: wrap;
    width: max-content;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    padding: 6px 0;
    background-color: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    /* El ratón sigue sobre la fila de debajo: se puede pasar de una fila a otra aunque el popup las tape */
    pointer-events: none;
}

.fila-ampliada-campo {
    padding: 2px 12px;
    border-right: 1px solid #ececec;
}

.fila-ampliada-cabecera {
    font-size: 11px;
    text-transform: uppercase;
    color: #8a8a8a;
    white-space: nowrap;
}

.fila-ampliada-valor {
    font-size: 13px;
    line-height: 22px;
    color: #404040;
    white-space: nowrap;
}

    .fila-ampliada-valor .badgeDestacada {
        vertical-align: middle;
    }


/* Plugin copiarcampo (ExtOverrides.js): icono de copiar a la derecha de un campo de texto.
   El host es el contenedor input + triggers del campo; el icono va superpuesto a su derecha y se
   deja hueco en el input para que el texto no quede debajo. */
.fv-copiar-host {
    position: relative;
}

.fv-copiar-campo .x-form-text-default.x-form-text {
    padding-right: 30px;
}

.fv-copiar-icono {
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 13px;
    color: #7a7a7a;
    cursor: pointer;
    z-index: 2;
    /* Ext pone pointer-events:none a todo lo que cuelga de un campo deshabilitado: el icono lo recupera */
    pointer-events: auto !important;
}

.x-item-disabled .fv-copiar-icono {
    cursor: pointer !important;
}

.fv-copiar-icono:hover {
    color: #0069b4;
}

/* En un TextArea el icono va arriba (no centrado) y deja libre la barra de scroll */
.x-form-textarea-body .fv-copiar-icono {
    top: 8px;
    right: 24px;
    margin-top: 0;
}

.fv-copiar-icono.fv-copiar-ok {
    color: #2e9e4f;
}

/* Aviso ("Copiado"/"Vacío") a la izquierda del icono, dentro del propio campo para que no lo recorte ningún contenedor */
.fv-copiar-icono[data-aviso]::after {
    content: attr(data-aviso);
    position: absolute;
    right: 100%;
    top: 50%;
    margin-right: 6px;
    transform: translateY(-50%);
    padding: 1px 6px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
    border-radius: 3px;
    background: #fff;
    color: #7a7a7a;
    box-shadow: 0 0 0 1px #d0d0d0;
}

.fv-copiar-icono.fv-copiar-ok[data-aviso]::after {
    color: #2e9e4f;
    box-shadow: 0 0 0 1px #2e9e4f;
}