/* --pagination-color: #0345bf; */
:root {
    --main-color: black;
    --main-color-08: black;
    --menu-background-gray: #f2f2f2;
    --corporative-blue: darkgray;
    --pagination-color: #202020;
    --border-color: rgba(0, 0, 0, .15);
    --tbr_column_count: 4;
    --tbr_view_separation: 15px;
}

/* select {
    -moz-appearance: none;
    max-height: 28px;
    border-radius: 0;
    border-radius: 0!important;
    padding: 0!important;
} */

h5,
.h5 {
    font-size: 13px;
}

input,
.btn {
    border-radius: 0!important;
}

/* .btn {
    color: white!important;
} */

.filters-container {
    width: 100%;
    padding: 5px;
    overflow: auto;
    background-color: var(--menu-background-gray);
    border: 1px solid var(--border-color);
}

.filters-container .filter-box {
    width: 250px;
    float: left;
    margin-right: 10px;
    max-height: 50px;
    margin-top: 25px;
    position: relative;
}

.filters-container:not(.vertical) .filter-box {
    position: relative;
}

.filter-box h5 {
    font-size: 14px!important;
    line-height: 100%!important;
    margin-bottom: 0;
}

.filters-container:not(.vertical) .filter-box h5 {
    position: absolute;
    top: -22px;
    width: 100%;
    left: 0;
    text-align: left;
}

.filter-box.tblr_tooltip {
    display:grid;
    gap:5px;
    grid-gap:5px;
}

.filter-box.tblr_tooltip.tblr_tooltip_right {
    grid-template-columns: calc(100% - 42px) 38px;
}

.filter-box.tblr_tooltip.tblr_tooltip_left {
    grid-template-columns: 38px calc(100% - 42px);
}

.filter-box.tblr_tooltip.tblr_tooltip_left > .tblr_tooltip_div {
    grid-column:1;
    grid-row:1;
}

/* slider */

.filter-box.filter-slider {
    --range_normal_color: #3D4142;
    --range_focus_color: blue;
    --range_focus_background:#F7F6F6;
    margin-bottom: 30px !important;
}

.filter-slider {
    color: var(--range_normal_color)!important;
}

#filter_zone .price_range_slider_container {
    margin-top: 4px !important;
    margin-bottom: 15px !important;
}

.filter-slider .ui-slider-horizontal {
    height:2px!important;
    margin-top:.4em!important;
    border:none!important;
    background-color:#AAAAAA!important;
}

.filter-slider .ui-slider-horizontal .ui-widget-header {
    background:#3D4142!important;
}

.filter-slider .ui-slider-horizontal .ui-slider-handle {
    top: -.6em!important;
}

.filter-slider .price_range_slider_container .range-value {
    margin-top: .75em !important;
}

.filter-slider .range-value .min,
.filter-slider .range-value .max {
    font-weight:bold!important;
}

.filter-slider .ui-slider-handle {
    border:3px solid var(--range_normal_color)!important;
    background:var(--range_normal_color)!important;
}

.price_range_slider_container.focus-min .handle-min,
.price_range_slider_container.focus-max .handle-max {
  background: var(--range_focus_color) !important;
}

.price_range_slider_container .range-value {
    display:flex;
    justify-content: space-between;
}

.price_range_slider_container .range-value > label {
    float:none!important;
    display: flex;
    align-items: baseline;
}

.price_range_slider_container .range-value > label.range_max {
    text-transform: lowercase;
    flex-direction: row-reverse;
}

.price_range_slider_container .range-value > label > input[type="text"] {
    --border-color:var(--range_normal_color);
    --text-color:var(--range_normal_color);
    padding: 0.1rem 0.3rem !important;
    border-radius: 0.25rem !important;
    margin: 0 0.25rem !important;
    max-width: 70px !important;
    font-weight: bold!important;
    background-color: transparent!important;
    color:var(--text-color)!important;
    border-color: var(--border-color)!important;

}

.price_range_slider_container .range-value > label > input[type="text"]:focus {
    --border-color:var(--range_focus_color);
    --text-color:var(--range_focus_color);
    background-color:var(--range_focus_background)!important;
}


/* search */

.filter-tags .tag-generator>* {
    float: left;
    margin-right: 5px;
}



.ordering_container {
    width: 100%;
    padding: 5px;
    overflow: auto;
    margin-top: 5px;
    background-color: #f7f4f4;
    border: 1px solid var(--main-color-08);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 5px;
}

.ordering_container .filter-box {
    float: left;
}

.ordering_container .ordering-field {
    margin: 0 5px 0 0!important;
    height: initial;
    min-height: initial;
    width: initial!important;
}

.ordering_container .filter-box input[type="radio"] {
    display: none;
}

.ordering_container .filter-box input[type="radio"]+label {
    background-color: white;
    padding: 2px 5px;
    border: 1px solid var(--main-color);
}

.ordering_container .filter-box input[type="radio"]:checked+label {
    background-color: green;
    color: white;
}


/* toggle */

.paracom-toggle {
    position: relative;
    width: 100%;
    height: 100%;
}

.filter-toggle {
    width: 141px!important;
    margin-left: 20px;
}

.paracom-toggle h5 {
    left: -20px;
}

.paracom-toggle a {
    border: 1px solid var(--corporative-blue);
    filter: grayscale(100%);
    text-align: center;
    padding: 3.5px 10px;
    float: left;
    font-size: 13px!important;
}

.paracom-toggle a.active {
    filter: grayscale(0%);
    background-color: var(--corporative-blue);
    color: white;
}


/* Checkbox */

.filter-box.filter-checkbox>.checkbox-container {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(4, 3fr);
}

.filter-box.filter-checkbox>.checkbox-container input[type="checkbox"] {
    vertical-align: middle;
}


/* Report */

.filter-box.filter-reportpanel ul.pgen_list {
    font-size: 14px;
}

.filter-box.filter-reportpanel ul.pgen_list>li:not(.ajaxSelect) {
    display: grid;
    grid-template-columns: 30px 40% auto;
    gap: 5px;
    grid-gap: 5px;
}

.filter-box.filter-reportpanel ul.pgen_list>li {
    border: none!important;
    background-color: rgba(255, 255, 255, 0.8);
    margin-bottom: 5px;
}

.filter-box.filter-reportpanel ul.pgen_list>li>span {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.filter-box.filter-reportpanel .pgen_filter-label {
    font-weight: bold;
}

.filter-box.filter-reportpanel ul.pgen_list>li>* {
    display: block;
    place-self: center;
}

.filter-box.filter-reportpanel ul.pgen_list>li.ajaxSelect .global {
    background: transparent!important;
}

.filter-box.filter-reportpanel ul.pgen_list>li.ajaxSelect .global,
.filter-box.filter-reportpanel ul.pgen_list>li.ajaxSelect ul>li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.filter-box.filter-reportpanel ul.pgen_list>li.ajaxSelect>ul {
    width: 100%;
}

.filter-box.filter-reportpanel .pgen_filter-text {
    text-align: right;
}

.report_panel_delete_button {
    display:grid;
    place-content:center;
}

.report_panel_delete_button svg {
    width:16px;
    height:16px;
}


/* ordering */

.header-column-container>div.ordering-field {
    display: inline-block;
}

.header-column-container input[type="radio"] {
    display: none;
}

.header-column-container input[type="radio"]+label, .header-column-container {
    color:rgb(83, 83, 83);
}

.header-column-container input[type="radio"]:checked+label {
    color: black;
}

.header-column-container label {
    margin: 0 2.5px;
    font-weight: bold;
}

.header-column-container label:hover {
    color: var(--corporative-blue);
}


/* datepicker */

.filter-box.filter-datepicker {
    display: grid;
    place-items: center;
    grid-template-columns: auto auto auto auto;
    gap: 5px;
    grid-gap: 5px;
}

.filter-box.filter-datepicker a.pgen_button {
    margin: 0!important;
    padding:0!important;
}

.datarender_datepicker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.datarender_datepicker > input[type="checkbox"] {
    margin-right:5px;
}

.datarender_datepicker > input[type="checkbox"]:checked + .datepicker_container {
    opacity:0.6;
    pointer-events:none;
}

.datarender_datepicker > .datepicker_container {
    display:grid;
    grid-template-columns: calc(100% - 25px) 20px;
    gap:5px;
    grid-gap:5px;
    align-items:center;
}

.datarender_datepicker.double > .datepicker_container {
    grid-template-columns: repeat(2,calc(50% - 15px)) 20px;
}

.datepicker_container .pgen_single_item[readonly="readonly"] {
    background-color:white!important;
}


/* Ajaxselect */

.filter-box.filter-ajaxSelect .pgen_ajaxSelect .aS_showDetails {
    min-height: 28px!important;
}

.filter-box.filter-ajaxSelect .pgen_ajaxSelect .aS_showDetails>* {
    min-height: 16px!important;
}

.filter-box.filter-ajaxSelect .pgen_ajaxSelect .aS_changeState {
    line-height: 16px!important;
    font-size: 16px!important;
}

.filter-box.filter-ajaxSelect .pgen_ajaxSelect .aS_showDetails .aS_reset {
    height: 20px!important;
}

.filter-box.filter-ajaxSelect .pgen_ajaxSelect .aS_tag {
    line-height: 16px!important;
}


/* pagination */

.pagination_block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 13px;
}

.pagination_block select {
    font-size: 13px;
}

.pagination_block ul.pagination {
    margin-bottom: 0;
    width: initial!important;
}

.pagination_block ul.pagination>li>a {
    border: 1px solid var(--pagination-color);
    background-color: white;
    padding: 6px 12px;
    line-height: normal;
    color: var(--pagination-color);
    font-size: 13px;
}

.pagination_block ul.pagination>li:not(:first-child)>a {
    border-left: 0!important;
}

.pagination_block {
    flex-direction: row;
    border: 1px solid darkgray;
    padding: 5px;
    justify-content: left;
    margin: 10px 0;
}

.datarender-toolbar-container {
    display: grid;
    /* grid-template-columns: calc(20% - 5px) 80%; */
    grid-template-columns: 100%;
    gap: 5px;
    grid-gap: 5px;
    margin: 10px 0;
    border: 1px solid darkgray;
    padding: 5px;
    place-items:center;
}
.datarender-toolbar-container .pagination_block {
    margin:0!important;
    border:0!important;
    padding:0!important;
}

.datarender-toolbar-container.bottom {
    margin-bottom:0!important;
}

.datarender-toolbar-container .aS_displayZone .aS_showText > span,
.datarender-toolbar-container ul.aS_showResults > li > span {
    display:none;
}

.pagination_block>* {
    margin: 0 8px;
    white-space: nowrap;
}

#limit_results {
    width: 50px!important;
    font-size: 13px!important;
}

.row .col-md-12 ul.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

ul.pagination+p,
table+p {
    text-align: center;
}

ul.pagination li>a {
    padding: 2px 6px;
    cursor: pointer;
    border: 1px solid white;
}

ul.pagination li:hover>a {
    border-color: var(--pagination-color);
}

ul.pagination li.active>a {
    color: white;
    border-color: var(--pagination-color);
    background-color: var(--pagination-color);
}

ul.pagination+p,
table+p {
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.pagination+p select,
table+p select {
    width: 80px!important;
    margin-left: 5px;
}

#renderTableForm .pagination>*,
#renderTableForm .filters-container .filter-toggle a {
    cursor: pointer;
}

#renderTableForm .pagination li.active {
    pointer-events: none;
}


/* buttons */

.inverse_buttons .btn,
.inverse_buttons.btn {
    background-color: transparent!important;
    border-color: transparent!important;
    font-size: 20px!important;
    padding: 0!important;
    line-height: 100%;
}

.inverse_buttons .btn-success,
.inverse_buttons.btn-success {
    color: #5cb85c!important;
}

.inverse_buttons .btn-danger,
.inverse_buttons.btn-danger {
    color: #d9534f!important;
}

.inverse_buttons .btn-info,
.inverse_buttons.btn-info {
    color: #17a2b8!important;
}


/* datarender */

@import "tables.css";
.custom_table_datarender table thead tr>th:last-child,
.custom_table_datarender table thead tr>th:last-child>div,
.pgen_form .table thead tr>th:last-child,
.pgen_form .table thead tr>th:last-child>div,
.pgen_form .table tbody tr>td:last-child:not(.groupingLine):not(#active_accordion_td),
.custom_table_datarender table tbody tr>td:last-child:not(.groupingLine):not(#active_accordion_td) {
    text-align: center!important;
}


/* ES LA ÚNICA MANERA DE QUE FUNCIONI */

.custom_table_datarender #export_products_to_zoho_table tbody tr>td:last-child:not(.groupingLine):not(#active_accordion_td),
.custom_table_datarender #export_products_to_zoho_table thead tr>th:last-child>div {
    text-align: left!important;
}

.custom_table_datarender table tbody tr>td:last-child>a.btn.inverse_buttons:not(:last-child),
.pgen_form .table tbody tr>td:last-child>a.btn.inverse_buttons:not(:last-child) {
    margin-right: 30px!important;
}

.filter-ajaxSelect ul.aS_showResults {
    overflow-y: auto;
    max-height: 50vh;
}


/* Responsive de datarender */

@media (max-width: 1024px) and (orientation:portrait) {
    .container.custom_table_datarender .filters-container {
        display: flex!important;
        flex-direction: row!important;
        flex-wrap: wrap!important;
    }
    .container.custom_table_datarender .filters-container .filter-box {
        width: 48%!important;
        margin: 0 1% 35px!important;
    }
    .filters-container .filter-box:not(:last-child) {
        margin-bottom: 30px!important;
    }
}

@media (max-width: 767px) and (orientation:portrait) {
    .container.custom_table_datarender .filters-container {
        flex-wrap: nowrap!important;
        flex-direction: column!important;
    }
    .container.custom_table_datarender .filters-container,
    .container.custom_table_datarender.homepage .filters-container {
        padding: 18px!important;
    }
    .container.custom_table_datarender .filters-container .filter-box {
        width: 100%!important;
        margin: 0 0 35px!important;
    }
    .filters-container .filter-box:last-child {
        margin-bottom: 0!important;
    }
}


/* Especificacions per al mode vertical */

.filters-container.vertical {
    flex: 0 0 25%;
    max-width: 25%;
    overflow: initial!important;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 5px 5px 20px!important;
}

.filters-container.vertical .filter-box {
    width: 100%!important;
    float: inherit!important;
    margin-left: 0!important;
}

.vertical.filters-container .filter-box.filter-search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.vertical.filters-container .filter-box.filter-search>.pgen_button-delete {
    right: 17%!important;
    left: initial!important;
}

.vertical.filters-container .filter-box.filter-search>input[type="text"] {
    max-width: 50%;
}

.custom_table_datarender table tbody tr>td:last-child>a.btn.inverse_buttons:not(:last-child),
.pgen_form .table tbody tr>td:last-child>a.btn.inverse_buttons:not(:last-child) {
    margin-right: 30px!important;
}

/* Mode amb multiples blocks inners */

.filters-container.vertical.contains-multiple-blocks {
    padding:0!important;
    border:0!important;
    background-color:transparent!important;
}

.filters-container.vertical.contains-multiple-blocks > .filter-container-inner-block {
    padding: 5px 5px 20px!important;
    background-color: var(--menu-background-gray);
    border: 1px solid var(--border-color);
    width: 100%;
}

.filters-container.vertical.contains-multiple-blocks > .filter-container-inner-block:not(:last-child){
    margin-bottom:10px!important;
}

.filters-container.vertical.contains-multiple-blocks > .filter-container-inner-block.auto {
    height:100%!important;
}


/* Responsive de datarender */

@media (max-width: 1024px) and (orientation:portrait) {
    .container.custom_table_datarender .filters-container {
        display: flex!important;
        flex-direction: row!important;
        flex-wrap: wrap!important;
    }
    .container.custom_table_datarender .filters-container .filter-box {
        width: 48%!important;
        margin: 0 1% 35px!important;
    }
    .filters-container .filter-box:not(:last-child) {
        margin-bottom: 30px!important;
    }
}

@media (max-width: 767px) and (orientation:portrait) {
    .container.custom_table_datarender .filters-container {
        flex-wrap: nowrap!important;
        flex-direction: column!important;
    }
    .container.custom_table_datarender .filters-container,
    .container.custom_table_datarender.homepage .filters-container {
        padding: 18px!important;
    }
    .container.custom_table_datarender .filters-container .filter-box {
        width: 100%!important;
        margin: 0 0 35px!important;
    }
    .filters-container .filter-box:last-child {
        margin-bottom: 0!important;
    }
    .vertical.filters-container .filter-box.filter-search h5 {
        display: initial!important;
    }
}

.datarender_hide {
    display:none;
}

/* lazyload */

.datarender-lazyload {
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    /* padding-bottom:100%!important; */
}

/* .datarender-lazyload:before {
    content: "";
    position: absolute;
    width: 33%;
    height: 0;
    padding-top: 30%;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%,-50%);
    transition: transform 0.5s, opacity 0.5s;
    border: 1em solid;
    border-color: #0484 #0488;
    border-radius: 50%;
} */

/* @keyframes spin_datarender {
	0% {
		transform:translate(-50%,-50%) rotate(0deg) scale(1);
	}
	50% {
		transform:translate(-50%,-50%) rotate(180deg) scale(0.7);
	}
	100% {
		transform:translate(-50%,-50%) rotate(360deg) scale(1);
	}
}

.datarender-lazyload:before {
    animation: spin_datarender 1s linear infinite;
    opacity: 1!important;
} */

/* datarender onepage */

/* .datarender-onepage {
    display:block;
    width:100%;
    overflow:hidden;
}

.datarender-onepage > .onepage-container {
    position:relative;
    width:100%;
    white-space:nowrap;
}

.datarender-onepage > .onepage-container > .onepage-item {
    display:inline-block;
    width:100%;
    max-width:100%;
}

.datarender-onepage > .onepage-container > .onepage-item.show {
    position:relative;
    vertical-align: top;
} */

.tbr_container {
    display:grid;
    grid-gap:var(--tbr_view_separation);
    gap:var(--tbr_view_separation);
    grid-template-columns: repeat(4,1fr);
    list-style-type:none;
    padding:0!important;
    margin:0;
}

.tbr_container > .tbr_item {
    position: relative;
    padding: 5px;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    display:grid;
    place-items:center;
    border: 1px solid #ebe8e8;
    min-height:200px!important;
    /* height:200px!important;
    max-height:200px!important; */
}

.tbr_container .tbr_show {
    grid-column: 1 / 5;
    grid-row: auto;
    height:100%;
    padding: 5px;
    border: 1px solid #ebe8e8;
    background: #fff;
    min-height:200px;
    position:relative;
    z-index:9;
}

.tbr_show_delete {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
}

.tbr_container .tbr_show .preloader {
    display:grid;
    place-items:center;
    width:100%;
    height:200px;
}

.tbr_read_only_container {
    display:grid;
    place-content: center;
    -webkit-box-shadow: inset 0px 10px 15px 0px rgba(255,255,255,0.8);
    -moz-box-shadow: inset 0px 10px 15px 0px rgba(255,255,255,0.8);
    box-shadow: inset 0px 10px 15px 0px rgba(255,255,255,0.8);
    padding: 20px 0;
}

.tbr_read_only_container > a {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.4375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.53;
    --bs-btn-color: #697a8d;
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: 0.375rem;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: none;
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.05rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #696cff;
    border-color: #696cff;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(105, 108, 255, 0.4);
}

.tbr_read_only_container > a:hover {
    color: #fff;
    background-color: #5f61e6;
    border-color: #5f61e6;
    transform: translateY(-1px);
}

@media (max-width:992px){

    :root {
        --tbr_column_count: 3;
    }

    .tbr_container {
        grid-template-columns: repeat(3,calc((100% / 3) - 15px));
    }

    .tbr_container .tbr_show {
        grid-column: 1 / 4;
    }
}

@media (max-width:767px){

    :root {
        --tbr_column_count: 2;
    }

    .tbr_container {
        grid-template-columns: repeat(2,calc((100% / 2) - 15px));
    }

    .tbr_container .tbr_show {
        grid-column: 1 / 3;
    }
}

@media (max-width:430px){

    :root {
        --tbr_column_count: 1;
    }

    .tbr_container {
        grid-template-columns: 100%;
    }

    .tbr_container .tbr_show {
        grid-column: initial;
    }
}

/* Responsive */

.datarender_open_filter, .datarender_close_filter {
    display:none;
    width:100%;
    margin-bottom:10px!important;
}

.datarender_open_filter > a, .datarender_close_filter > a {
    display:block;
    width:100%;
}

@media (max-width:992px){
    .datarender_open_filter {
        display:block;
    }

    #table_render > div {
        max-width:100%;
        flex: 0 0 100%;
        margin-bottom: 10px;
    }

    #datarender-filters-block {
        display:none;
    }
}


/* auxiliar imatge */

.datarender_container td {
    position:relative;
}

.display_image_on_hover {
    display:none;
    position: absolute;
    max-width: none;
    width:500%;
    z-index:1;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}

.display_image_on_hover.right {
    left:calc(100% + 8px);
    top:8px;
}
.display_image_on_hover.top {
    bottom:100%;
    left:0;
}
.display_image_on_hover.left {
    right:100%;
    top:0;
}
.display_image_on_hover.bottom {
    top:100%;
    left:0;
}

img:hover + .display_image_on_hover {
    display:block;
}

/* audio */

.datarender_audio {
    display: grid;
    grid-template-columns: calc(65% - 10px) 35%;
    grid-gap: 10px;
    gap: 10px;
}

.audio_buttons {
    display: grid;
    grid-template-rows: repeat(2,calc(50% - 5px));
    width: 100%;
    place-content: center;
    height: 100%;
    gap: 10px;
    grid-gap: 10px;
}

.audio_buttons > .pgen_button {
    line-height: 100%;
    margin: 0!important;
    padding: 0!important;
    display: grid;
    place-content: center;
}

.datarender_audio > img {
    width: 40px;
    height: auto;
    place-self: center;
}

.datarender_audio a, .datarender_text_popover .fa {
    font-size:30px!important;
}

/* text popover */

.datarender_text_popover.pgen_tooltip .tooltiptext {
    color: #76767a!important;
    border-color:#76767a!important;
}

.datarender_text_popover.pgen_tooltip .tooltiptext:before {
    border-bottom-color: #76767a!important;
}

.clone_matrix_origin {
    display:none;
}

.limit_block {
    display: grid;
    align-items: center;
    grid-template-columns: auto auto auto;
    gap: 5px;
    grid-gap: 5px;
}

#datarender-content-block, #datarender-filters-block {
    position:relative;
}

#datarender_container table .do-day-format, #datarender_container table .do-hour-format {
    height: 26px;
    line-height: 26px;
    padding-top: 0!important;
}

/* Informative div */

.tblr_tooltip_div {
    display: inline;
    position: relative;
}

.tblr_tooltip_div > summary:focus {
    outline: none;
}
.tblr_tooltip_div > summary::-webkit-details-marker {
    display: none;
}
.tblr_tooltip_div > summary {
    list-style: none;
}
.tblr_tooltip_div > summary + * {
    position: absolute;
    display: block;
    z-index: 1;
    width: 350%;
    border: solid 1px black;
    border-radius: 5%;
    padding: 10px;
    background: white;
}
.tblr_tooltip_div > * + * {
/* hide detail elements that would ruin the popover */
    display: none;
}
/* details[data-popover="up"] > summary + * {
bottom: calc(0.5rem + 100%);
right: 50%;
transform: translateX(50%);
}
details[data-popover="down"] > summary + * {
top: calc(0.5rem + 100%);
right: 50%;
transform: translateX(50%);
} */
.filter-box.tblr_tooltip.tblr_tooltip_left > .tblr_tooltip_div > summary + * {
    right: calc(1rem + 100%);
    bottom: 50%;
    transform: translateY(50%);
}
.filter-box.tblr_tooltip.tblr_tooltip_right > .tblr_tooltip_div > summary + * {
    left: calc(1rem + 100%);
    bottom: 50%;
    transform: translateY(50%);
}

.tblr_tooltip_div.hover > summary + .tblr_tooltip_div_content {
    display:none;
}

.tblr_tooltip_div.hover > summary:hover + .tblr_tooltip_div_content {
    display:block;
}

/* Section header */

#datarender_container {
    margin-top:calc(var(--tbr_view_separation) * 2);
}

.tbr_line_header {
    display: grid;
    gap: 30px;
    grid-gap: 30px;
    grid-template-columns: auto min-content auto;
    align-items: center;
    width: 100%;
    padding: calc(var(--tbr_view_separation) * 2) 0;
}

.tbr_line_header hr {
    border-top: 2px solid var(--corporative_third_color);
}

.tbr_line_header > span {
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    font-size: 32px;
    line-height: 120%;
    font-weight: 500;
    color: var(--corporative_third_color);
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tbr_no_image_container {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    background-color: lightgray;
    font-weight:300;
    font-size:32px;
    color:#202020;
}

/* Style 1: product_item */

.tbr_item.product_item {
    box-shadow: 0 0.125rem 0.25rem 0 rgba(0,0,4,0.25)!important;
}

.tbr_item.product_item {
    background-color: white!important;
}

.tbr_item.product_item > a.product-item {
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 5px;
    gap: 5px;
    grid-template-rows: calc(100% - 32px) 27px;
    height: 100%;
}

.tbr_item.product_item span.product_name {
    display: inline!important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.9px;
}

.tbr_item.product_item a.product_link {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: black;
 	text-decoration: none!important;
  	width:100%;
  	overflow:hidden;
}

.tbr_item.product_item a.product_link {
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 5px;
    gap: 5px;
    grid-template-rows: calc(100% - 32px) 27px;
    height: 100%;
}

.tbr_zone_backdrop {
    content: " ";
    position: fixed;
    z-index: 8;
    height: 100vh;
    width: 100vw;
    overflow: show;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: radial-gradient(rgba(20, 20, 20, .5), rgba(0, 0, 0, .5));
    background: -webkit-radial-gradient(rgba(20, 20, 20, .5), rgba(0, 0, 0, .5));
}

.pgen_search_checkbox_container {
    display: grid;
    grid-template-columns: min-content 1fr;
    align-items: center;
    grid-gap:10px;
    gap:10px;
}

.pgen_search_checkbox_container .pgen_search_div {
    --lupa-column:20px;
    --borrar-column:20px;
    padding-left:5px!important;
    padding-right:5px!important;
    align-items:center!important;
}

.pgen_search_checkbox_container .pgen_search_div i.bx{
    width: 20px !important;
    text-align: center !important;
    font-size: 20px !important;
}

.pgen_search_checkbox_container .pgen_search_div *,
.pgen_search_checkbox_container .pgen_search_div > i.bx:first-child {
    margin:0!important;
    margin-right:0!important;
}

.pgen_search_checkbox_container .pgen_search_div > input[type="text"]{
    width:calc(100% - 20px)!important;
}

/* buttons */

.filter-box.filter-datepicker {
position:relative;
}

.filter-box.filter-datepicker .datepicker_button_container {
    position:absolute;
    left:0;
    bottom:-48%;
    display: flex;
    width: min-content;
    gap: 5px;
}

.preset_button, .preset_button:hover {
    background-color:blue!important;
    color:white!important;
    font-size: 14px;
    padding: 5px 10px;
    line-height: 1;
    margin: 0!important;
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

/* checkbox */

.filter-box.filter-checkbox>.checkbox-container {
    grid-gap:3px;
    gap:3px;
}

.checkbox-container.with_count_element > label.checkbox-value {
    display: grid;
    grid-template-columns: min-content auto 25px;
    width: 100%;
    grid-gap:5px;
    gap:5px;
}

.checkbox-container.with_count_element > label.checkbox-value span:nth-child(2){

}

.checkbox-container.with_count_element > label.checkbox-value .count_number {
    border-radius:0.25rem;
    color:white;
    background-color:blue;
    text-align:center;
    display:block;
    width:100%;
    height:min-content;
}

.checkbox-container.with_count_element input[type="checkbox"]{
    margin-top:3px!important;
}

.checkbox-container:not(.with_count_element) input[type="checkbox"]{
    margin-top:-2px!important;
}

.download_file_button{
    transition: 0.3s;
}

.download_file_button.processing_action {
    pointer-events: none;
    animation: stripes 1s linear infinite;
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem;
    background-color: #ffc107!important;
    color:black!important;
    opacity:0.9;
}

.download_file_button.downloading_action {
    pointer-events: none;
    opacity:0.9;
    background-color: #28a745!important;
    color:white;
}

@keyframes stripes {
    from {
        background-position: 1rem 0
    }

    to {
        background-position: 0 0
    }
}

/* Datashow image helper */

.datashow_image_container {
    --ds_im_padding: 15px;
    --selected_color: blue;
    width:100%;
    display:grid;
    grid-gap:var(--ds_im_padding);
    gap:var(--ds_im_padding);
}

.datashow_image_container > .main_image_container {
    --ds_main_height: 500px;
    width:100%;
    height:var(--ds_main_height);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

.datashow_image_container > .mini_images_container > ul {
    padding:0!important;
    margin:0!important;
    list-style: none;
    display:grid;
    grid-gap:var(--ds_im_padding);
    gap:var(--ds_im_padding);
    grid-template-columns: repeat(var(--ds_images_per_page),1fr);
}

.datashow_image_container > .mini_images_container > ul > li {
    cursor:pointer;
    border: 2px solid transparent;
}

.datashow_image_container > .mini_images_container > ul > li.selected {
    border-color: var(--selected_color);
}

.datashow_image_container > .mini_images_container > ul > li > div {
    --ds_thumb_height: 200px;
    display:block;
    width:100%;
    height:var(--ds_thumb_height);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

.datashow_image_container .mini_images_pagination {
    display:flex;
    align-items:center;
    justify-content: center;
    width:100%;
    margin:calc(var(--ds_im_padding) / 2);
    margin-top:0;
}

.datashow_image_container .mini_images_pagination > ul {
    display:flex;
    padding:0!important;
    margin:0!important;
    list-style: none;
}

.datashow_image_container .mini_images_pagination > ul > li {
    cursor:pointer;
    margin:calc(var(--ds_im_padding) / 2);
    margin-top:0;
    border: 2px solid var(--selected_color);
    width:20px;
    height:10px;
    border-radius:5px!important;
}

.datashow_image_container .mini_images_pagination > ul > li.active {
    background-color: var(--selected_color);
}

/* slider */

.filter-slider > h5 {
    margin-bottom: 15px !important;
}

.filter-slider .ui-slider-horizontal {
    height:2px!important;
    margin-top:.4em!important;
}

.filter-slider .ui-slider-horizontal .ui-slider-handle {
    top: -.6em!important;
}

.filter-slider .range-value {
    margin-top: .5em !important;
}

/* accordion */

.filter-box.accordion_hide > *:not(h5){
    height:1px!important;
    visibility: hidden!important;
    overflow:hidden!important;
}

.filter-box.with_value_inside .accordion_toggle {
    color:#20c997!important;
}