div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: var(--color-principal);
    color: white !important;
}

div.dt-container .dt-paging .dt-paging-button:hover {
    background: transparent;
    border-color: var(--color-principal);
    color: var(--color-principal) !important;
}

div.dt-container .dt-paging .dt-paging-button.next:hover,
div.dt-container .dt-paging .dt-paging-button.previous:hover,
div.dt-container .dt-paging .dt-paging-button.first:hover,
div.dt-container .dt-paging .dt-paging-button.last:hover {
    border-color: transparent;
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active {
    opacity: 0;
}

#list_productes {
    display: flex;
    gap: 2%;
    flex-wrap: wrap;
    row-gap: 30px;
}

#list_productes .card {
    width: 15%;
}

.panell_client {
    margin: 50px auto;
}

.panell_client>div {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.panell_client h1 {
    font-size: 32px;
    margin-bottom: 30px;
}

.panell_client #columna_esq {}

.panell_client #columna_dre.dadesuser {
    background-color: whitesmoke;
    padding: 50px;
}

.panell_client .dades_user {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
}

.panell_client .dades_user .info,
.panell_client .dades_user .contacte {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#header {}

#header .info {
    display: flex;
    font-size: 16px;
    align-items: flex-start;
    border-bottom: 1px solid grey;
    padding-bottom: 30px;
    justify-content: space-between;
}

#header .info .nom {
    /* width: 100%; */
    font-size: 48px;
    align-self: flex-end;
    line-height: 1;
    margin: 0px;
    font-weight: 500;
}

#header .info>div {
    display: flex;
    gap: 30px;
}

#header .info .t,
#header .info .c {
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* width: auto; */
}

#header .info .t {
    border-right: 1px solid grey;
    padding-right: 30px;
}

#header .info .t>span,
#header .info .c>span {
    font-weight: bold;
}

#header .info .t div,
#header .info .c div {
    display: flex;
    gap: 10px;
}

#header .info .t div i,
#header .info .c div i {
    color: var(--color-secundari);
}

#header .info .t div .data,
#header .info .c div .data {
    font-weight: normal;
}

#header .shortcuts {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#header .shortcuts a {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    text-transform: uppercase;
}

#header .shortcuts a:hover,
#header .shortcuts a.active {
    background-color: var(--color-secundari);
    color: white;
}

#header .shortcuts a i {}

#header .shortcuts a h2 {
    margin: 0px;
    line-height: normal;
    font-weight: bold;
}

#historial_filtres {
    background-color: #F4F4F4;
    padding: 48px 68px;
    display: flex;
    font-size: 18px;
    margin-bottom: 55px;
    align-items: flex-end;
    flex-wrap: wrap;
    /* gap: 30px; */
    justify-content: space-between;
}

#historial_filtres>div {
    /* flex: auto; */
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#historial_filtres label {
    font-family: 'roboto';
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
}

#historial_filtres input,
#historial_filtres select {
    font-size: 15px;
    width: 215px;
    /* height: 36px; */
    padding: 0px 15px;
}

#taula_historial {
    width: 100%;
    margin-bottom: 55px;
}

table.dataTable>tbody>tr.child ul.dtr-details {
    width: 100%;
    text-align: left;
}

#taula_historial thead tr {
    background-color: var(--color-principal);
    color: #FFF;
    font-size: 18px;
    font-family: 'roboto';
    font-weight: 500;
}

#taula_historial thead i {
    margin-left: 10px;
    cursor: pointer;
}

#taula_historial th {
    white-space: nowrap;
}

#taula_historial th,
#taula_historial td {
    text-align: center;
    padding: 15px 20px;
}

#taula_historial tbody tr {
    border-bottom: 1px solid #707070;
}

.shortcuts-select {
    border: 0px;
    background-color: var(--color-secundari);
    color: white;
    padding: 10px;
    width: 100%;
    font-size: 20px;
}
.shortcuts-select option {
    background-color: white;
    color: black;
}


@media screen and (max-width: 1440px) {
    #list_productes {}
    .panell_client {}
    .panell_client>div {}
    .panell_client h1 {}
    .panell_client #columna_esq {}
    .panell_client #columna_dre.dadesuser {}
    .panell_client .dades_user {}
    .panell_client .dades_user .info,
    .panell_client .dades_user .contacte {}
    #header {}
    #header .info {}
    #header .info .nom {}
    #header .info>div {}
    #header .info .t,
    #header .info .c {}
    #header .info .t {}
    #header .info .t>span,
    #header .info .c>span {}
    #header .info .t div,
    #header .info .c div {}
    #header .info .t div i,
    #header .info .c div i {}
    #header .info .t div .data,
    #header .info .c div .data {}
    #header .shortcuts {}
    #header .shortcuts a {}
    #header .shortcuts a:hover,
    #header .shortcuts a.active {}
    #header .shortcuts a i {}
    #header .shortcuts a h2 {}
    #historial_filtres {}
    #historial_filtres>div {}
    #historial_filtres label {}
    #historial_filtres input,
    #historial_filtres select {}
    #taula_historial {}
    #taula_historial thead tr {}
    #taula_historial thead i {}
    #taula_historial th {}
    #taula_historial th,
    #taula_historial td {}
    #taula_historial tbody tr {}
}

@media screen and (max-width: 1280px) {
    #list_productes {}
    .panell_client {}
    .panell_client>div {}
    .panell_client h1 {}
    .panell_client #columna_esq {}
    .panell_client #columna_dre.dadesuser {}
    .panell_client .dades_user {}
    .panell_client .dades_user .info,
    .panell_client .dades_user .contacte {}
    #header {}
    #header .info {}
    #header .info .nom {}
    #header .info>div {}
    #header .info .t,
    #header .info .c {}
    #header .info .t {}
    #header .info .t>span,
    #header .info .c>span {}
    #header .info .t div,
    #header .info .c div {}
    #header .info .t div i,
    #header .info .c div i {}
    #header .info .t div .data,
    #header .info .c div .data {}
    #header .shortcuts {}
    #header .shortcuts a {}
    #header .shortcuts a:hover,
    #header .shortcuts a.active {}
    #header .shortcuts a i {}
    #header .shortcuts a h2 {}
    #historial_filtres {
    justify-content: flex-start;
    gap: 20px;
}
    #historial_filtres>div {}
    #historial_filtres label {}
    #historial_filtres input,
    #historial_filtres select {}
    #taula_historial {}
    #taula_historial thead tr {}
    #taula_historial thead i {}
    #taula_historial th {}
    #taula_historial th,
    #taula_historial td {}
    #taula_historial tbody tr {}
}

@media screen and (max-width: 1024px) {
    #list_productes {}
    .panell_client {}
    .panell_client>div {}
    .panell_client h1 {}
    .panell_client #columna_esq {}
    .panell_client #columna_dre.dadesuser {}
    .panell_client .dades_user {}
    .panell_client .dades_user .info,
    .panell_client .dades_user .contacte {}
    #header {}
    #header .info {}
    #header .info .nom {}
    #header .info>div {}
    #header .info .t,
    #header .info .c {}
    #header .info .t {}
    #header .info .t>span,
    #header .info .c>span {}
    #header .info .t div,
    #header .info .c div {}
    #header .info .t div i,
    #header .info .c div i {}
    #header .info .t div .data,
    #header .info .c div .data {}
    #header .shortcuts {
    justify-content: left;
    gap: 10px;
    row-gap: 10px;
}
    #header .shortcuts a {}
    #header .shortcuts a:hover,
    #header .shortcuts a.active {}
    #header .shortcuts a i {}
    #header .shortcuts a h2 {}
    #historial_filtres {}
    #historial_filtres>div {}
    #historial_filtres label {}
    #historial_filtres input,
    #historial_filtres select {}
    #taula_historial {}
    #taula_historial thead tr {}
    #taula_historial thead i {}
    #taula_historial th {}
    #taula_historial th,
    #taula_historial td {}
    #taula_historial tbody tr {}
}

@media screen and (max-width: 768px) {
    #list_productes {}
    .panell_client {}
    .panell_client>div {}
    .panell_client h1 {}
    .panell_client #columna_esq {}
    .panell_client #columna_dre.dadesuser {
    padding: 25px;
}
    .panell_client .dades_user {
    flex-direction: column;
    gap: 20px;
}
    .panell_client .dades_user .info,
    .panell_client .dades_user .contacte {}
    #header {}
    #header .info {
    flex-direction: column;
    justify-content: left;
    gap: 20px;
}
    #header .info .nom {
    align-self: flex-start;
}
    #header .info>div {
    width: 100%;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 20px;
}
    #header .info .t,
    #header .info .c {
    width: 100%;
    /* max-width: 300px; */
}
    #header .info .t {
    border: 0px;
}
    #header .info .t>span,
    #header .info .c>span {}
    #header .info .t div,
    #header .info .c div {}
    #header .info .t div i,
    #header .info .c div i {}
    #header .info .t div .data,
    #header .info .c div .data {}
    #header .shortcuts {}
    #header .shortcuts a {}
    #header .shortcuts a:hover,
    #header .shortcuts a.active {}
    #header .shortcuts a i {}
    #header .shortcuts a h2 {}
    #historial_filtres {
    flex-direction: column;
    padding: 20px;
    gap: 15px;
    align-items: flex-start;
}
    #historial_filtres>div {
    width: 100%;
}
    #historial_filtres label {}
    #historial_filtres input,
    #historial_filtres select {
    width: 100%;
}
    #taula_historial {}
    #taula_historial thead tr {}
    #taula_historial thead i {}
    #taula_historial th {}
    #taula_historial th,
    #taula_historial td {}
    #taula_historial tbody tr {}
}