/********************************
 *	Faces Components Stylesheet *
 ********************************/

/* Styles for groups */
:root {
    --text-color:#37363B; /* Gris fort - guia */
    --text-color-secondary:#999999; /* Gris - guia */
    --primary-color:#B50027; /* Vermell variant logo Paeria - guia */
    --primary-color-hover:#950021;
    --primary-color-focus:#ffb9ca;
    --primary-color-text:#ffffff;
    --primary-color-light:#fff2f5;
    --secondary-color: #999999; /* Gris - guia */
    --white: #ffffff;
    --font-family: Arial, Helvetica, sans-serif;
    --surface-0: #ffffff;
    --surface-50: #FAFAFA;
    --surface-100: #F2F2F2; /* Gris fluix - guia */
    --surface-200: #EEEEEE;
    --surface-300: #E9EBEA;; /* Gris mig - guia */
    --surface-400: #BDBDBD;
    --surface-500: #9E9E9E;
    --surface-600: #757575;
    --surface-700: #616161;
    --surface-800: #424242;
    --surface-900: #212121;
    --surface-ground:#f8f9fa;
    --surface-section:#ffffff;
    --surface-card:#ffffff;
    --surface-overlay:#ffffff;
    --surface-border:#dee2e6;
    --content-padding:1rem;
    --inline-spacing:0.5rem;
}
/* override */
html {font-size: .875rem;}
body, body .ui-widget {
    font-family:  var(--font-family);
}
body {
    padding:.5rem;margin:.5rem;
}
h1 {
    color: var(--primary-color);
    font-weight: normal;
    font-size: 2rem;
}
h2 {
    font-size: 1.5rem;
    font-weight: normal;
    margin-top: 0;
    color: var(--text-color);
}
h3 {
    font-size: 1.5rem;
    font-weight: normal;
    margin-top: 0;
    color: var(--text-color-secondary);
}
h4, h5 {margin-top:0}
p, li {line-height: 150%}
hr {height: 1px;border: 0;background: var(--text-color-secondary);}

a, a:link, a:visited {color: var(--primary-color); text-decoration: none;}
a:hover, a:active, body .ui-commandlink:active, body .ui-link:active, body .ui-commandlink:hover, body .ui-link:hover {color: var(--primary-color); text-decoration: underline;}
body .ui-rating .ui-rating-star-on a, body .ui-rating .ui-rating-star a:hover {color: var(--primary-color);}
body .ui-state-highlight .ui-rating .ui-rating-star-on a, body .ui-state-highlight .ui-rating .ui-rating-star a:hover {color: var(--white);}
body .ui-button a, body .ui-rating .ui-rating-star a, body .ui-rating .ui-rating-cancel a {text-decoration: none}
body .ui-rating .ui-rating-star.ui-state-focus {box-shadow: 0 0 0 0.2em var(--primary-color-focus);}
body .ui-overlaypanel .ui-overlaypanel-close {background: var(--primary-color);}
body .ui-overlaypanel .ui-overlaypanel-close:hover {background: var(--primary-color-hover);}
body .ui-card .ui-card-title .ui-button svg {color:var(--white)}

/*forms*/
body .ui-button {background-color: var(--primary-color);border-color: var(--primary-color);}
body .ui-button.ui-state-hover {background-color: var(--primary-color-hover);border-color: var(--primary-color-hover);}
body .ui-button.ui-button-outlined {color: var(--primary-color);}
body .ui-button.ui-button-outlined.ui-state-hover {color: var(--primary-color-hover);}
body .ui-button.ui-button-outlined.ui-state-hover { background-color: rgba(149, 0, 33, 0.04);}
body .ui-button.ui-state-focus {box-shadow: 0 0 0 0.2em var(--primary-color-focus);}
body .ui-inputfield.ui-state-hover, body .ui-selectonemenu.ui-state-hover, body .ui-chkbox .ui-chkbox-box.ui-state-hover, body .ui-radiobutton .ui-radiobutton-box.ui-state-hover {border-color: var(--primary-color-hover);}
body .ui-inputfield.ui-state-focus, body .ui-selectonemenu.ui-state-focus, body .ui-chkbox .ui-chkbox-box.ui-state-focus, body .ui-radiobutton .ui-radiobutton-box.ui-state-focus {border-color: var(--primary-color-hover);box-shadow: 0 0 0 0.2em var(--primary-color-focus);}
body .ui-button.ui-state-active, body .ui-button.ui-state-down, body .ui-chkbox .ui-chkbox-box.ui-state-active, body .ui-radiobutton .ui-radiobutton-box.ui-state-active {background: var(--primary-color-hover);border-color: var(--primary-color-hover);}
body .ui-button.ui-button-outlined.ui-state-active, body .ui-button.ui-button-outlined.ui-state-down {background: rgba(149, 0, 33, 0.16);color: var(--primary-color-hover);}
body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight {background: var(--primary-color);color:#fff;}
body .ui-chkbox .ui-chkbox-box.ui-state-active.ui-state-hover, body .ui-radiobutton .ui-radiobutton-box.ui-state-active.ui-state-hover {background: var(--primary-color-hover);}
body .field-checkbox > label, body .field-radiobutton > label {line-height: 1.25;}
body .w-full .ui-inputfield {width:100%}
body .ui-input-icon-left .ui-inputfield {text-indent: 1.25rem;background:none}
body .ui-selectbooleanbutton.ui-state-active, body .ui-selectonebutton > .ui-button.ui-state-active, body .ui-selectmanybutton > .ui-button.ui-state-active,
body .ui-selectbooleanbutton.ui-state-active:not(.ui-state-disabled):hover, body .ui-selectonebutton > .ui-button.ui-state-active:not(.ui-state-disabled):hover, body .ui-selectmanybutton > .ui-button.ui-state-active:not(.ui-state-disabled):hover {background-color: var(--primary-color-hover);border-color: var(--primary-color-hover);}
body select {border-color: #a6a6a6;border-radius: 3px;}
body .ui-selectonemenu .ui-selectonemenu-label {min-height: 1rem;}
body .ui-button.ui-button-secondary, body .ui-splitbutton.ui-button-secondary > .ui-button {background-color: var(--secondary-color);border-color: var(--secondary-color);}
body .ui-button.ui-button-secondary.ui-state-hover, body .ui-button.ui-button-secondary:not(:disabled):hover, body .ui-splitbutton.ui-button-secondary > .ui-button.ui-state-hover, body .ui-splitbutton.ui-button-secondary > .ui-button:not(:disabled):hover {background-color: var(--text-color);border-color: var(--text-color)}
body .ui-slider .ui-slider-handle.ui-state-hover {border-color: var(--primary-color);}
body .ui-slider .ui-slider-range {background-color: var(--primary-color)}
body .ui-autocomplete-panel .ui-autocomplete-items .ui-autocomplete-item.ui-state-highlight {background-color: var(--primary-color)}
body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {background-color: var(--primary-color)}
body .ui-toggleswitch.ui-toggleswitch-focus .ui-toggleswitch-slider, body .ui-fieldset .ui-fieldset-legend.ui-state-focus,
body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon:focus {box-shadow: 0 0 0 0.2em var(--primary-color-focus);}
body .ui-selectcheckboxmenu.ui-state-focus {border-color: var(--primary-color)}
body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container .ui-selectcheckboxmenu-token .ui-selectcheckboxmenu-token-icon,
body .ui-selectcheckboxmenu-items .ui-chkbox .ui-chkbox-box .ui-chkbox-icon, body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check,
body .ui-autocomplete .ui-autocomplete-multiple-container .ui-autocomplete-token .ui-autocomplete-token-icon,
body .ui-picklist-item table .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check {margin-top: -.7rem;}
body table .ui-selectcheckboxmenu-items .ui-chkbox .ui-chkbox-box .ui-chkbox-icon, body table .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check,
body .ui-inputgroup-addon .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check {margin-top: -0.5rem;}
body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items .ui-selectcheckboxmenu-item-group {background: var(--surface-100);}
body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container.ui-inputfield {padding: .2rem 2.357rem .15rem 0.25rem;min-height: 2rem;}
body .ui-button.ui-button-flat {color: var(--primary-color)}
body .ui-button.ui-button-flat.ui-state-hover {background: rgba(149, 0, 33, 0.04);color:var(--primary-color)}
body .ui-button.ui-button-flat.ui-state-active, body .ui-button.ui-button-flat.ui-state-down {background: rgba(149, 0, 33, 0.16);color: var(--primary-color);}
body .ui-progressbar .ui-progressbar-value {background: var(--primary-color);}
body .cropper-point, body .cropper-line {background-color: var(--primary-color);}
body .cropper-view-box {outline: 1px solid var(--primary-color);outline-color: rgba(181,0,39,0.75);}
body .ui-picklist .ui-picklist-list .ui-picklist-item.ui-state-highlight {background: var(--primary-color);}
body .ui-selectonemenu.ui-state-focus:not(.ui-state-error) {border-color: var(--primary-color)}
body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container .ui-selectcheckboxmenu-token {background-color: var(--primary-color)}
body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-close:hover {color: var(--primary-color)}
body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-close:focus {box-shadow: 0 0 0 0.2em var(--primary-color-focus);}

/*panels*/
body .ui-panel .ui-panel-titlebar {
    background-color: var(--text-color);
    border-color: var(--text-color);
    color:var(--white);
}
body .ui-panel .ui-panel-title {
    font-size: 1.5rem;
    font-weight: normal;
    line-height: 100%;
}
body .ui-panel .ui-panel-content,
body .ui-panel .ui-panel-footer {border:0;color: var(--text-color)}
body .ui-panel .ui-panel-content .ui-panel-content {padding:0}
body .col-12 .ui-panel {height: 100%;}
body .col-12 .ui-panel .ui-panel-content {height: calc(100% - 3rem);}
body .ui-panel.w_footer .ui-panel-content {height: calc(100% - 8rem);}

/*cards*/
body .ui-card {color: var(--text-color)}
body .ui-panel-content .ui-card {
    box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 1px rgb(0 0 0 / 12%);
}
body .ui-card .ui-card-body {
    padding: 1rem;
}
body .ui-card .ui-card-title {
    font-weight: normal;
    font-size: 1.5rem;
}
body .ui-card .ui-card-title svg {color: var(--text-color-secondary);}
body .ui-card .ui-card-title .ui-button svg {color:var(--white)}

/*tabs*/
body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active a {color: var(--primary-color);}
body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header {
    white-space: break-spaces;
    border-bottom: 2px solid var(--surface-300);
    background: none;
}
body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-active {border-bottom: 2px solid var(--primary-color);}
body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-hover {border-color: var(--text-color);}
body .ui-tabs .ui-tabs-nav li.ui-tabs-header a {color:var(--text-color)}
body .ui-tabs.ui-tabs-top > .ui-tabs-nav:before {border-bottom: 2px solid var(--surface-300);}
body .ui-tabs .ui-tabs-panels {color: var(--text-color);border:0}


/*messages*/
body .ui-widget + .ui-message {margin: 0}
body .ui-message-info, body .ui-message-error, body .ui-message-warn, body .ui-message-fatal {
    margin: 0;
    padding: 1rem;
}
body .ui-messages-error, body .ui-message-error, body .ui-message.ui-message-error, body .ui-message.ui-message-fatal,
body .ui-message.ui-message-error .ui-message-error-icon, body .ui-message.ui-message-fatal .ui-message-error-icon {border-color: #bb0300;color: #7a0200;}

body .ui-message.ui-message-info .ui-message-info-icon,
body .ui-messages-info, body .ui-message-info, body .ui-message.ui-message-info,
body .ui-message.ui-message-info .ui-message-error-icon, body .ui-messages .ui-messages-info {border-color: #3a87ad;color: #173c4e;border-width: 0 0 0 6px;}
body .ui-messages-info, body .ui-message-info, body .ui-message.ui-message-info, body .ui-message.ui-message-info, body .ui-messages .ui-messages-info {background-color: #d9edf7;}

body .ui-message.ui-message-warn .ui-message-warn-icon,
body .ui-messages-warn, body .ui-message-warn, body .ui-message.ui-message-warn,
body .ui-message.ui-message-info .ui-message-error-icon {border-color: #e5ab48;color: #604a23;}

/*accordion*/
body .ui-accordion .ui-accordion-header {font-weight: normal;font-size: 1.25rem;}
body .ui-accordion .ui-accordion-header.ui-state-active,
body .ui-accordion .ui-accordion-header.ui-state-active:hover {border-color: var(--text-color);background-color: var(--text-color);color: var(--white)}
body .ui-accordion .ui-accordion-header:focus {box-shadow: 0 0 0 0.2em var(--surface-500);}

/*tables*/
body .ui-datatable .ui-datatable-header {background-color: var(--text-color);color: var(--white);border-color: var(--text-color);font-size: 1.5rem;font-weight: normal;}
body .ui-datatable .ui-datatable-data > tr.ui-state-highlight {background: var(--primary-color);}
body .ui-datatable thead th {background: var(--surface-300);}
body .ui-datatable thead th.ui-state-active {color: var(--primary-color);background: var(--surface-100);}
body .ui-datatable thead th.ui-state-hover, body .ui-datatable thead th.ui-state-active.ui-state-hover {color: var(--primary-color);background-color: var(--surface-300)}
body .ui-datatable thead th.ui-state-focus, body .ui-datatable thead th.ui-sortable-column.ui-state-focus {box-shadow: inset 0 0 0 0.2rem var(--primary-color-focus);}
body .ui-datatable thead th .ui-sortable-column-badge {background: var(--primary-color);}
body .ui-datatable .ui-datatable-data > tr .ui-row-editor > a:hover {color: var(--primary-color)}
.ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden) {
    padding: .25rem .5rem;
}
body .ui-datatable .ui-sortable-placeholder {background-color: var(--primary-color-focus)}

/*pagination*/
body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active {background: var(--primary-color);color: var(--white)}
body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-focus,
body .ui-paginator .ui-paginator-first.ui-state-focus,
body .ui-paginator .ui-paginator-prev.ui-state-focus,
body .ui-paginator .ui-paginator-next.ui-state-focus,
body .ui-paginator .ui-paginator-last.ui-state-focus {box-shadow: 0 0 0 0.2rem var(--primary-color-focus);}
body .ui-paginator .ui-paginator-current,
body .ui-paginator .ui-paginator-pages .ui-paginator-page {color: var(--text-color);}
body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-hover {background: var(--surface-300);color: var(--text-color);}
body .ui-datatable .ui-paginator {padding:.5rem}
body .ui-datatable .ui-paginator {background-color: white;border: none;}

/*dataview*/
body .ui-dataview i, .ui-dataview svg {color: var(--text-color-secondary);}
body .ui-dataview .ui-dataview-header {background: none; border: 0; padding: 0 0 1rem 0;}
body .ui-dataview.ui-dataview-list .ui-dataview-row {border-width: 0 0 1px 0;}

/*dialog*/
body .ui-dialog .ui-dialog-content {border:0}
body .ui-dialog .ui-dialog-titlebar {background: var(--text-color);border: 0;color: var(--white);}
body .ui-dialog .ui-dialog-titlebar .ui-dialog-title {font-size: 1.25rem;font-weight: normal;}
body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon {position: absolute;right: .5rem;top: .75rem;}
body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon:hover {color: var(--primary-color);}
body .ui-dialog .ui-dialog-footer {border: 0;}

/*carousel*/
body .ui-carousel .ui-carousel-indicators .ui-carousel-indicator.ui-state-highlight button {
    background: var(--primary-color);
}

/*calendar*/
body .ui-datepicker .ui-datepicker-calendar td a.ui-state-active,
body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a.ui-state-active {
    background: var(--primary-color);
}
body .ui-datepicker .ui-datepicker-next:hover, body .ui-datepicker .ui-datepicker-prev:hover {color: var(--primary-color);text-decoration: none}
body .ui-datepicker .ui-datepicker-next:focus, body .ui-datepicker .ui-datepicker-prev:focus,
body .ui-datepicker .ui-datepicker-calendar td > a:focus, body .ui-datepicker .ui-datepicker-calendar td > span:focus {box-shadow: 0 0 0 0.2em var(--primary-color-focus);}

/*steps*/
body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/*definitions*/
main#content dl {margin:0;}
main#content dl dt {font-weight: bold}
main#content dl dt::after {
    content: ": ";
}
main#content dl dd {margin: 0;}

/*badge*/
body .ui-overlay-badge .ui-badge {background-color: var(--primary-color);}

/*tag*/
body .ui-tag {padding: .25rem .4rem .15rem .4rem;}
body .ui-tag.ui-tag-warning {background: #ff8800;color: var(--white);}

/*editor*/
.ui-texteditor .ql-snow.ql-toolbar button.ql-active, .ui-texteditor .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ui-texteditor .ql-snow.ql-toolbar .ql-picker-item.ql-selected {color: var(--primary-color);}
.ui-texteditor .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ui-texteditor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ui-texteditor .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {stroke: var(--primary-color);}

/* toggle */
body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider:before, body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider .ui-toggleswitch-handler {
    background: #eee;
}
body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider:before, body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-handler {
    color: #000;
}
/* rating */
body .ui-rating .ui-rating-cancel a {color: var(--text-color-secondary);}
body .ui-rating .ui-rating-star.ui-state-focus {box-shadow:none}

/* custom */
header.page-header {
    background: linear-gradient(to top, var(--surface-100) 0%, var(--white) 80%);
    height: 80px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    align-items: center;
    justify-content: center;
}
header.page-header h1 {padding:0 5rem 0 .5rem;margin:.5rem 0;
    -moz-transition: transform 0.2s;
    -o-transition: transform 0.2s;
    -webkit-transition: transform 0.2s;
    transition: transform 0.2s;
}
header.page-header img.logo {
    position: absolute;
    top: 50%;
    right: .5rem;
    width: auto;
    max-height: 40%;
    transform: translate(0,-50%)
}
    .w_notificacions header.page-header img.logo {top: 3.5rem;}
#infoUsuari {
    background: var(--white);
    margin: 0;
    padding: .25rem;
    display: block;
    width: auto;
    position: absolute;
    top: .25rem;
    right: .25rem;left:auto;
    background: none;
}
#infoUsuari #notificacions {
    position: absolute;right: 3.25rem;top: .75rem;margin: 0 .5rem;
}
#infoUsuari #notificacions i {  font-size: 1.5rem }
#infoUsuari p {
    margin: 0;
    padding: 0;
    display: inline-block;
    font-size: .8rem;
    width: 100%;
    text-align: right;
}
#infoUsuari p i, #infoUsuari p svg {color: var(--text-color-secondary);}
#infoUsuari p.usuari,
#infoUsuari p.sortir {float:right}
#infoUsuari p.ajuntament {display: none; text-align: left}
#infoUsuari p.sortir a, #infoUsuari p.sortir svg {color: var(--primary-color);}
#infoUsuari p.sortir a:hover, #infoUsuari p.sortir a:hover svg {color: var(--text-color);text-decoration: none}
#infoUsuari p.usuari svg {display: none}
#infoUsuari .btn_menu_usuari {
    color: var(--white);
    position: fixed;top: .5rem;right: .5rem;
    width: 2.15rem;height: 2.15rem;
    background: var(--primary-color);
    padding: .5rem;
    line-height: 1;
    border-radius: 50%;
    z-index:1002;
    -moz-transition: transform 0.2s;
    -o-transition: transform 0.2s;
    -webkit-transition: transform 0.2s;
    transition: transform 0.2s;
}
#infoUsuari .btn_menu_usuari .ui-button-text {display: none}
.menu_usuari {width:250px}
.menu_usuari li {font-size: .875rem;}
.menu_usuari .ui-menu-list li.ui-menuitem a.ui-menuitem-link {padding:.5rem .857rem}
.menu_usuari li a svg {color: var(--text-color-secondary);}
.menu_usuari li a.logout, #menu_usuari li a.logout .ui-menuitem-text, #menu_usuari li a.logout svg {color:var(--primary-color)}
main#content {
    background-color: var(--surface-100);
    padding: 1rem;
    min-height: calc(100vh - 80px - 4rem - 7.125rem); /*mòbil*/
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top:1rem;
}
footer.page-footer {
    background: var(--surface-100);
    color: var(--text-color);
    margin: 1rem auto 0 auto;
    padding: 1rem;
}
footer .address {font-size: 0.875rem;margin:.5em 0;}
footer .privacy {font-size: 0.875rem;list-style: none;margin:.5em 0;padding:0;}
aside.sidebar {
    display: block;
    padding: 2rem 1rem 1rem 1rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100%;
    z-index: 1001;
    background: var(--text-color);
    -moz-transition: transform 0.2s;
    -o-transition: transform 0.2s;
    -webkit-transition: transform 0.2s;
    transition: transform 0.2s;
    transform: translate3d(-241px, 0px, 0px);
}
.w_aside aside.sidebar { transform: translate3d(0px, 0px, 0px); }
aside.sidebar ul.menu {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}
aside.sidebar ul.menu li { display: block; margin-bottom: 1rem}
aside.sidebar ul.menu li a {color:var(--text-color-secondary);display: block}
aside.sidebar ul.menu li a:hover,
aside.sidebar ul.menu li a:active,
aside.sidebar ul.menu li a.active {color:var(--surface-100);text-decoration: none}
aside.sidebar .javateam {color: var(--text-color-secondary); font-size: .875rem;position: absolute;bottom: 0;left: 1rem;}

/* submenú desplegable */
body .sidebar .ui-menu {background: none; border:0; width: 100%}
body .sidebar .ui-menu .ui-menu-list .ui-menuitem.ui-submenu-child {padding: 0 1.25rem;}
body .sidebar .ui-menu .ui-menu-list .ui-widget-header {margin-top:1rem;}
body .sidebar .ui-menu .ui-menu-list .ui-widget-header,
body .sidebar .ui-menu .ui-menu-list .ui-widget-header h3,
body .sidebar .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-text,
body .sidebar .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon {background:none;color: var(--text-color-secondary);}
body .sidebar .ui-menu .ui-menu-list .ui-widget-header,
body .sidebar .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {padding: .5rem 0;}
body .sidebar .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover,
body .sidebar .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover .ui-menuitem-text,
body .sidebar .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover .ui-menuitem-icon,
body .sidebar .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.active,
body .sidebar .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.active .ui-menuitem-text,
body .sidebar .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.active .ui-menuitem-icon,
body .sidebar .ui-menu .ui-menu-list .ui-widget-header.ui-state-hover,
body .sidebar .ui-menu .ui-menu-list .ui-widget-header.ui-state-hover h3,
body .sidebar .ui-menu .ui-menu-list .ui-widget-header.ui-state-hover .ui-icon {background:none;color:var(--white)}

#menu-button {
    color: var(--white);
    position: fixed;
    top: .5rem;
    left: .5rem;
    background: var(--text-color);
    padding: .5rem;
    line-height: 1;
    border-radius: 3px;
    z-index:1002;
    -moz-transition: transform 0.2s;
    -o-transition: transform 0.2s;
    -webkit-transition: transform 0.2s;
    transition: transform 0.2s;
}
.w_aside #menu-button {transform: translate3d(calc(240px - 3rem), 0px, 0px);}
#menu-button .pi {
    -moz-transition: transform 0.2s;
    -o-transition: transform 0.2s;
    -webkit-transition: transform 0.2s;
    transition: transform 0.2s;
}
body:not(.w_aside) #menu-button .menu-button-times {display:none}
.w_aside #menu-button .menu-button-bars {display:none}

body .esperar .ui-dialog-content {
    position: relative;
    padding: 1.5rem 1rem 1.5rem 4rem;
    font-weight: bold;
}
body .esperar .ui-dialog-content i {font-size: 2rem; color: var(--surface-300); position: absolute; top:1rem;left:1rem;}

body .ui-datatable.no-border  thead th,
body .ui-datatable.no-border th {
    border: 0;
    padding: 1rem .857rem;
}
body .ui-datatable.no-border .ui-datatable-data>tr>td,
body .ui-datatable.no-border td {
    padding: 1rem .857rem;
    border-width: 0 0 1px 0;
    border-color: var(--surface-300);
}

.loader {
    border: 10px solid var(--surface-100);
    border-radius: 50%;
    border-top: 10px solid var(--primary-color);
    width: 50px;
    height: 50px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* responsive */
/* sm  576px        md  768px       lg  992px         xl  1200px */
@media screen and (min-width: 576px) {
    header.page-header h1 {padding:0 2rem;}
    header.page-header img.logo {
        max-height: 60%;
    }
    body .ui-datatable .ui-paginator {padding:1rem;}
    body .ui-datatable .ui-paginator {background-color: white;border: none;}
}

@media screen and (max-width: 640px) {
    body .ui-paginator .ui-paginator-current {display:block;}
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden) {
        padding: .25rem 1rem;
    }
    body .ui-datatable-reflow .ui-datatable-data td[role="gridcell"] .ui-column-title {
        min-width: 25%;
        color: var(--text-color-secondary);
        display: inline-block;
        vertical-align: top;
        margin-right: 0;
    }
    body .ui-datatable-reflow .ui-datatable-data td[role="gridcell"] .ui-outputlabel {
        display: inline-block;
        width: 75%;
    }
    body .ui-datatable-reflow .ui-datatable-data td[role="gridcell"].hidden-col-mobile,
    body .ui-datatable-reflow .ui-datatable-data td[role="gridcell"].hidden-col-mobile .ui-column-title {display: none}
    body .ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden):first-child {padding-top: .5rem;}
    body .ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden):last-child {padding-bottom: .5rem;}
}
@media screen and (min-width: 768px) {
    body .ui-card .ui-card-body {
        padding: 1.25rem 1.5rem;
    }
    header.page-header h1 {text-align: center;}

    footer .address {display: inline-block;}
    footer .privacy {float: right}
    footer .privacy li {display: inline-block;margin-left: 1rem}

    .w_aside header.page-header,
    .w_aside main#content,
    .w_aside #infoUsuari,
    .w_aside footer.page-footer {
        margin-left: 240px;
    }
    main#content {
        min-height: calc(100vh - 80px - 4rem - 4.5rem - 1rem);
        padding: 1rem;
        margin-top: 1rem;
    }
    #menu-button:hover {background-color: var(--text-color-secondary)}
}

@media screen and (min-width: 992px) {
    header.page-header img.logo {
        max-height: 90%;
    }
        .w_notificacions header.page-header img.logo {top: 50%;}

    #infoUsuari {
        padding: .5rem;
        width: 100%;height: auto;
        position: relative;top:0;right: 0;
        background: var(--white);
    }
        .w_aside #infoUsuari {
            width: calc(100% - 240px);
            height: auto
        }
        #infoUsuari p {
            width: auto;
            float: left;
            font-size: .875rem;
        }
            #infoUsuari p.usuari, #infoUsuari p.sortir {text-align: right}
            #infoUsuari p.connexio {float: right;width:auto;}
            #infoUsuari p.ajuntament {display: inline-block;width:auto}
            #infoUsuari p.usuari {float: right;}
            #infoUsuari p.usuari svg {display: inline-block}
        #infoUsuari #notificacions  {
            float: right;
            margin: 0 1.5rem 0 0;
            position: relative; top:0;right:0; height: 1rem;
        }
}
@media screen and (min-width: 1200px) {
}