:root {
    --vermell: #cb023e;
    --gris-clar: #c7c6c6;
    --gris-fosc: #878786;
    --negre: #302e2b;
    --tipo-lletra: 'Open Sans', sans-serif;
    --tamany-lletra: 0.9rem;
}

body {
    font-family: var(--tipo-lletra) !important;
    font-size: 14px;
    margin: 0;
}

.ui-widget {
    font-family: var(--tipo-lletra) !important;
    font-size: var(--tamany-lletra) !important;
    color: var(--negre);
}
.ui-state-focus {
    outline: none !important;
}
.ui-icon {
    overflow: visible !important;
}
.ui-icon.ui-icon-minusthick,
.ui-icon.ui-icon-plusthick {
    display: none;
}

.ui-icon.ui-icon-search {
    display: none;
}
/***************** Botons *****************/
/*Botó vermell*/
.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-icon-left.primefaces.btn.btn-danger,
.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.primefaces.btn.btn-danger {
    color: white;
    background-color: var(--vermell);
    background-image: none;
    padding: 5px;
    border: 2px solid darkred;
    border-radius: 0;
    text-shadow: none;
    font-weight: bold;
}

.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-icon-left.primefaces.btn.btn-danger:hover,
.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.primefaces.btn.btn-danger:hover {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(225, 83, 97, 0.6);
}
/***************** ToggleSwitch *****************/
body .ui-toggleswitch {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.75rem;
}

body .ui-toggleswitch .ui-toggleswitch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ced4da;
    transition: background-color 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.5s;
    border-radius: 10px;
}
.ui-toggleswitch.ui-widget.ui-state-disabled {
    background: none !important;
}
body .ui-toggleswitch .ui-toggleswitch-slider:before {
    position: absolute;
    font-family: 'primeicons';
    content:"";
    top: 50%;
    background: #ffffff;
    width: 1.25rem;
    height: 1.15rem;
    left: 0.25rem;
    margin-top: -0.625rem;
    border-radius: 10px;
    text-align: center;
    padding-top: 0.15rem;
    transition: transform 0.2s;
}

body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider:before {
    transform: translateX(1.25rem);
    transition: transform 0.2s;
}

body .ui-toggleswitch.ui-toggleswitch-focus .ui-toggleswitch-slider {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
    background: #007bff;
}

body .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider:before {
    background: #ffffff;
    font-family: 'primeicons';
    content:"\e909";
    text-align: center;
    padding-top: 0.15rem;
}
/***************** SelectOneMenu *****************/
.ui-selectonemenu-trigger.ui-state-default.ui-corner-right {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    box-shadow: none;
}

.ui-icon.ui-icon-triangle-1-s.ui-c {
    display: none;
}

.ui-selectonemenu-trigger {
    position: relative;
}

.ui-selectonemenu-trigger:before {
    content: "\e902";
    font-family: 'primeicons';
}

.ui-selectonemenu.ui-state-default.ui-corner-all,
.ui-selectonemenu-label.ui-inputfield.ui-corner-all {
    background-color: #fff;
    background-image: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

.ui-selectonemenu.ui-state-default.ui-corner-all.ui-state-focus,
.ui-selectonemenu-label.ui-inputfield.ui-corner-all.ui-state-focus,
.ui-selectonemenu.ui-state-default.ui-corner-all.ui-state-hover,
.ui-selectonemenu-label.ui-inputfield.ui-corner-all.ui-state-hover {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-corner-all.ui-state-highlight {
    background: var(--vermell);
    overflow: auto;
    border: none;
}

.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-corner-all.ui-state-hover {
    background: var(--gris-clar);
    overflow: auto;
}

.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-corner-all {
    margin: 0;
    padding: 0.3rem 0.1rem 0.3rem 0.8rem;
    background: rgba(0, 0, 0, 0);
    outline: 0 none;
    border-radius: 0;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s;
    white-space: normal !important;
}

.ui-selectonemenu-items.ui-selectonemenu-list.ui-widget-content.ui-widget.ui-corner-all.ui-helper-reset {
    padding: 0;
}

.ui-selectonemenu-panel.ui-widget.ui-widget-content.ui-corner-all.ui-helper-hidden.ui-shadow.ui-input-overlay {
    box-shadow: 0 4px 0.5em 0.1em var(--gris-fosc) !important;
    border: none;
    border-radius: 0;
}

.ui-selectonemenu-panel .ui-selectonemenu-filter-container {
    margin: 0.4rem 0 !important;
}

.ui-selectonemenu-item-group.ui-corner-all {
    margin: 0.4rem 0 0.4rem 0.1rem !important;
}

/***************** Grid *****************/
.ui-grid {
    background: none;
    border: none;
}

.ui-panelgrid.ui-panelgrid-cell {
    border-width: 0;
}

.ui-panelgrid tr:first-child td {
    border-top: 2px solid var(--vermell);
    border-bottom: 1px solid var(--vermell);
}

tr.ui-widget-content {
    border: 0 solid white;
}
/***************** DatePicker *****************/
.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all.ui-shadow.ui-input-overlay.p-datepicker-panel.ui-connected-overlay-enter-done{
    font-family: var(--tipo-lletra);
    color: var(--negre);
    background: white;
    box-shadow: 0 0 4px 0 var(--negre);
    min-width: 0 !important;
}

.ui-datepicker {
    background: white;
}
.ui-datepicker-calendar td a:hover,
.ui-datepicker select.ui-datepicker-month:hover,
.ui-datepicker select.ui-datepicker-year:hover,
.ui-button-icon-only .ui-icon:hover,
.ui-fluid .ui-trigger-calendar .ui-datepicker-trigger.ui-button:hover,
.p-datepicker .ui-calendar .ui-trigger-calendar .ui-inputwrapper-filled:hover,
.ui-datepicker-trigger .ui-button .ui-widget .ui-state-default .ui-corner-all .ui-button-icon-only .ui-state-hover,
.ui-selectonemenu-trigger.ui-state-default.ui-corner-right.ui-state-hover,
.ui-selectonemenu-trigger.ui-state-default.ui-corner-right.ui-state-focus {
    cursor: pointer !important;
}

.ui-datepicker-calendar td a.ui-state-default {
    background: white;
    color: var(--negre);
}

.ui-datepicker-calendar td a.ui-state-highlight {
    background: #2196F3;
    color: white;
}

.ui-datepicker-calendar td a.ui-state-active {
    background: var(--vermell);
    color: white;
}
/***************** Pantalles petites *****************/
@media screen and (max-width: 768px) {

}

/***************** Pantalles grans *****************/
@media screen and (min-width: 768px) {
    .column5 {
        width: 5% !important;
    }

    .column10 {
        width: 10% !important;
    }

    .column15 {
        width: 15% !important;
    }

    .column20 {
        width: 20% !important;
    }

    .column25 {
        width: 25% !important;
    }

    .column30 {
        width: 30% !important;
    }

    .column35 {
        width: 35% !important;
    }

    .column40 {
        width: 40% !important;
    }

    .column45 {
        width: 45% !important;
    }

    .column50 {
        width: 50% !important;
    }

    .column55 {
        width: 55% !important;
    }

    .column60 {
        width: 60% !important;
    }

    .column65 {
        width: 65% !important;
    }

    .column70 {
        width: 70% !important;
    }

    .column75 {
        width: 75% !important;
    }

    .column80 {
        width: 80% !important;
    }

    .column85 {
        width: 85% !important;
    }

    .column90 {
        width: 90% !important;
    }

    .column95 {
        width: 95% !important;
    }

    .column100 {
        width: 100% !important;
    }
}
/***************** Elements propis *****************/
.carta-shadow-right-bottom {
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
    margin:0.2rem;
}
.carta-shadow-right-bottom:hover {
    cursor: pointer;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2);
}
.column12 {
    width: 12% !important;
    min-width: 45px;
}
.column88 {
    width: 88% !important;
}
.outputPanel2, .outputPanel3 {
    display: flex;
    align-items: center;
}
.panel-doble-icona{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: row;
}
.flex-row-reverse{
    display:flex;
    flex-direction: row-reverse;
}
.flex-row{
    display: flex;
    flex-direction: row;
}
.flex-row-center{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.flex-column{
    display: flex;
    flex-direction: column;
}
.divider-gradient{
    width: 60% !important;
    height: 2px;
    color:transparent;
    background: linear-gradient(90deg, rgba(203, 2, 62, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.font-bold{
    font-weight: bold !important;
}
.icona-tamany{
    height:20px;
    width:20px;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: var(--vermell);
}
.ui-state-default{
    text-shadow: none !important;
}
.icono {
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    left: 0 !important;
    margin: 0 !important;
    top: 0 !important;
}
.icono-no-centro {
    background-position: center;
    height: 28px;
    width: 28px;
    top: 30% !important;
    left: 0 !important;
}
.icono-linkedin {
    background-image: url("/esoibfront/javax.faces.resource/images/icons/linkedin.svg.xhtml?ln=assets") !important;
}
.icono-twitter {
    background-image: url("/esoibfront/javax.faces.resource/images/icons/x-twitter.svg.xhtml?ln=assets") !important;
}
.icono-facebook {
    background-image: url("/esoibfront/javax.faces.resource/images/icons/facebook.svg.xhtml?ln=assets") !important;
}
.icono-whatsapp {
    background-image: url("/esoibfront/javax.faces.resource/images/icons/whatsapp.svg.xhtml?ln=assets") !important;
}
.icono-clipboard {
    background-image: url("/esoibfront/javax.faces.resource/images/icons/clipboard.svg.xhtml?ln=assets") !important;
}
.icono-email {
    background-image: url("/esoibfront/javax.faces.resource/images/icons/envelope.svg.xhtml?ln=assets") !important;
}
.icono-bell {
    background-image: url("/esoibfront/javax.faces.resource/images/icons/bell.svg.xhtml?ln=assets") !important;
}
.icono-bell-slash {
    background-image: url("/esoibfront/javax.faces.resource/images/icons/bell-slash.svg.xhtml?ln=assets") !important;
}

/*LOADING*/
.loadingSpinner {
    width: 72px;
    height: 72px;
    display: grid;
    border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side,#0000 40%,#cb023e 41%);
    background: linear-gradient(0deg ,rgba(203,2,62,0.5) 50%,rgba(203,2,62,1) 0) center/5.8px 100%,
    linear-gradient(90deg,rgba(203,2,62,0.25) 50%,rgba(203,2,62,0.75) 0) center/100% 5.8px;
    background-repeat: no-repeat;
    animation: spinner-d3o0rx 1.2s infinite steps(12);
}

.loadingSpinner::before,
.loadingSpinner::after {
    content: "";
    grid-area: 1/1;
    border-radius: 50%;
    background: inherit;
    opacity: 0.915;
    transform: rotate(30deg);
}

.loadingSpinner::after {
    opacity: 0.83;
    transform: rotate(60deg);
}

@keyframes spinner-d3o0rx {
    100% {
        transform: rotate(1turn);
    }
}
div#loadingDialog_content {
    align-content: center;
}