/********************************
 *	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, 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 {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);}

/*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-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 {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)}

/*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: 1.25rem 1.5rem;
}
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);}

/*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 {background: none;}
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 .ui-datatable-data > tr .ui-row-editor > a:hover {color: var(--primary-color)}

/*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}

/*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);
}

/*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);}

/* 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%)
}
#infoUsuari {
    background: var(--white);
    margin: 0;
    padding: .25rem;
    width: 100%;
    display: block;
}
#infoUsuari p {
    margin: 0;
    padding: 0;
    display: inline-block;
    font-size: .8rem;
}
#infoUsuari p i, #infoUsuari p svg {color: var(--text-color-secondary);}
#infoUsuari p.usuari,
#infoUsuari p.sortir {float:right}
#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 #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;
}
#menu_usuari {width:250px}
    #menu_usuari li {font-size: .875rem;}
        #menu_usuari li a {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;}
#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);
}

/* 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;}
}

@media screen and (max-width: 640px) {
    .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;
    }
}

@media screen and (min-width: 768px) {
    header.page-header h1 {text-align: center;}
    header.page-header img.logo {
        max-height: 90%;
    }

    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;
    }
    #infoUsuari {
        padding: .5rem 1rem;
        width: 100%;
        position: absolute;
        top: calc(1rem + 80px);
        left: 0;
    }
    .w_aside #infoUsuari {
        width: calc(100% - 240px);
    }
    #infoUsuari p {
        width: 50%;
        float: left;
        font-size: .875rem;
    }
    #infoUsuari p.usuari, #infoUsuari p.sortir {text-align: right}
    #menu-button:hover {background-color: var(--text-color-secondary)}
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
}