:root {
    font-size: calc(1rem * var(--zoom-value));
    --top-bar-height: calc(50px * var(--zoom-value));
    --color-rgb-theme-primary: 40, 40, 40;
    --color-rgb-theme-secondary: 255, 109, 0;
    --color-rgb-theme-background: 255, 0, 0;
    --color-rgb-theme-text-primary: 255, 255, 255;
}

body {
    font-family: Roboto;
    height: 100vh;
    margin: 0;
    --mdc-theme-primary: rgb(var(--color-rgb-theme-primary));
    --mdc-theme-secondary: rgb(var(--color-rgb-theme-secondary));
    --mdc-theme-background: rgb(var(--color-rgb-theme-background));
    font-weight: var(--mdc-typography-subtitle2-font-weight, 500);
}

#app {
    display: flex;
    height: 100%;
}

    #app > .mdc-linear-progress.mdc-linear-progress--indeterminate {
        width: 50%;
        margin: auto;
        height: 1rem;
    }

    #app .mdc-linear-progress__bar-inner {
        border-top: 1rem solid;
    }

button:focus {
    outline: 0;
}

.main-content {
    background-color: #ddd;
}

.main-body {
    padding-top: var(--top-bar-height);
}

.main-pdf .mdc-list-item {
    padding-left: 0px;
    padding-right: 0px;
    height: calc(24px * var(--zoom-value));
}

.main-pdf .mat-accordion .mat-expansion-panel__summary {
    height: calc(24px * var(--zoom-value));
}

.main-pdf .mdc-sub-menu-icon {
    right: calc(24px * var(--zoom-value));
    top: calc(-5px * var(--zoom-value));
}

.main-pdf .flex-fixed-width-item {
    flex: 0 0 calc(400px * var(--zoom-value));
}

.main-pdf .flex-item {
    flex: 1 0 50%;
}

.logout-button {
    margin-left: calc(10px * var(--zoom-value));
}

.padding-left {
    padding: calc(5px * var(--zoom-value)) !important;
}

.padding-0 {
    padding: 0px !important;
}

.padding-left-10 {
    padding-left: calc(10px * var(--zoom-value)) !important;
}

.padding-right-10 {
    padding-right: calc(10px * var(--zoom-value)) !important;
}

.padding-right-15 {
    padding-right: calc(15px * var(--zoom-value)) !important;
}

.padding-top-10 {
    padding-top: calc(10px * var(--zoom-value)) !important;
}

.table.margin-bottom-with-notes {
    margin-bottom: 4.5rem;
}

.table.margin-bottom-with-notes-smartphone {
    margin-bottom: 4rem;
}

.table thead th {
    border-bottom: calc(2px * var(--zoom-value)) solid #dee2e6;
}

.table td, .table th {
    border-top: calc(1px * var(--zoom-value)) solid #dee2e6;
}

.table .table-header {
    background-color: #95A5A6;
    font-size: calc(14px * var(--zoom-value));
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.table .table-header-coming-soon {
    background-color: #e6df05;
}

.table .table-header-access-denied {
    background-color: red;
    color: white;
}

.table .table-header2 {
    background-color: red;
    color: white;
}

.table .table-header3 {
    background-color: #1165a0;
    color: white;
}

.table .table-header4 {
    background-color: #e6df05;
    color: black;
}

.table .th-time-width {
    width: calc(100px * var(--zoom-value));
}

.table .best-background {
    background-color: #ff000052;
}

.table .th-speed-width {
    width: calc(100px * var(--zoom-value));
}

tbody.alternate tr:nth-child(even) {
    background: #00000024;
}

thead.table-thead {
    position: relative;
    z-index: 1;
}

.table .table-header-riferimenti {
    background-color: #d67070;
    font-size: calc(16px * var(--zoom-value));
    text-transform: none;
}

    .table .table-header-riferimenti th {
        padding-top: 0.2rem;
        padding-bottom: 0rem;
    }

table.table-statistiche {
    width: 100%;
}

tr.table-row-meteo {
    vertical-align: baseline;
    box-shadow: 0px 0px calc(9px * var(--zoom-value)) 0px rgba(0, 0, 0, 0.3);
}

    tr.table-row-meteo td {
        padding-top: 0.3rem;
        padding-bottom: 0.2rem;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }

tr.table-row:first-child {
    box-shadow: 0px 0px calc(9px * var(--zoom-value)) 0px rgba(0, 0, 0, 0.3);
}

tr.table-row:not(:first-child) {
    box-shadow: 0px 0px calc(9px * var(--zoom-value)) 0px rgba(0, 0, 0, 0.3);
}

tr.table-row td {
    padding-top: 0.2rem;
    padding-bottom: 0.05rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

tr.table-header th, tr.table-header2 th, tr.table-header3 th, tr.table-header4 th {
    padding-top: 0.1rem;
    padding-bottom: 0.0rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

tr.table-header-statistiche {
    height: calc(30px * var(--zoom-value));
    background-color: darkgray !important;
}

    tr.table-header-statistiche th {
    font-size: 1rem;
    }

.table .table-header-name {
    background-color: mediumaquamarine;
    font-size: 1.1rem;
    font-weight: bold;
}

    .table .table-header-name th {
        padding: 0px;
        border: 0px;
    }

/*table thead.table-thead-separator:not(:first-child) {
    border-top: 3px solid black;
}*/

td.min {
    width: 1%;
    white-space: nowrap;
}

td.orario-note {
    width: 7%;
}

td.numero-concorrente-note {
    width: 4%;
}

td.nominativo-concorrente-note {
    width: 20%;
}

td.nominativo-concorrente-guide-note {
    width: 37%;
}

td.nominativo-pdf-archivio {
    width: 50%;
}

td.table-body-statistiche {
    width: 20%;
}

td:empty::after {
    content: "\00a0";
}

.table-name {
    width: 100%;
}

    .table-name td {
        padding-top: 0.25rem;
        padding-bottom: 0.10rem;
    }

.grid-td-separator-up {
    border-top: calc(2px * var(--zoom-value)) solid #717070 !important;
}

.grid-td-separator-down {
    border-bottom: calc(2px * var(--zoom-value)) solid #717070 !important;
}

.grid-th-separator {
    border-left: calc(2px * var(--zoom-value)) solid;
    border-left-color: white;
}

.grid-td-separator {
    border-left: calc(2px * var(--zoom-value)) solid;
    border-left-color: white;
}

.spinner {
    border: calc(16px * var(--zoom-value)) solid silver;
    border-top: calc(16px * var(--zoom-value)) solid rgb(var(--color-rgb-theme-primary));
    border-radius: 50%;
    width: calc(80px * var(--zoom-value));
    height: calc(80px * var(--zoom-value));
    animation: spin 750ms linear infinite;
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

div.main {
    margin: calc(10px * var(--zoom-value));
}

div.main-overflow {
    overflow: auto;
    white-space: nowrap;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}

div.main-body-child {

}

div.main-pdf {
    padding-top: calc(10px * var(--zoom-value));
}

div.main-margin-bottom {
    margin: calc(10px * var(--zoom-value)) calc(10px * var(--zoom-value)) calc(-10px * var(--zoom-value)) calc(10px * var(--zoom-value));
}

div.chart-parent {
    height: calc(450px * var(--zoom-value));
    width: 100%;
}

div.main-body-child-for-charts {
    margin: calc(10px * var(--zoom-value));
}

div.padding-top-10-for-charts {
    padding-top: calc(10px * var(--zoom-value)) !important;
}

div.main-body-child-for-pdf {
    height: calc(100% - calc(48px * var(--zoom-value)));
    padding-top: calc(10px * var(--zoom-value));
}

div.padding-left-10-for-pdf {
    padding-left: calc(10px * var(--zoom-value)) !important;
}

.imgStatus {
    vertical-align: text-bottom;
    height: calc(20px * var(--zoom-value));
}

.imgFlag {
    width: calc(28px * var(--zoom-value));
    vertical-align: text-top;
    padding-right: calc(5px * var(--zoom-value));
    margin-top: calc(1px * var(--zoom-value));
}

.imgMeteo {
    margin-top: calc(5px * var(--zoom-value));
    margin-left: calc(5px * var(--zoom-value));
}

.imgLive {
    margin-left: calc(10px * var(--zoom-value));
    vertical-align: text-bottom;
    height: calc(20px * var(--zoom-value));
}

.blink {
    color: red;
    margin-right: 0.5rem;
    animation: blink 2s steps(5, start) infinite;
    -webkit-animation: blink 2s steps(5, start) infinite;
}

@keyframes blink {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink {
    to {
        visibility: hidden;
    }
}

.breadcrumb {
    padding-top: 0.3rem;
    padding-bottom: 0.25rem;
}

ol.breadcrumb {
    margin-bottom: 0px;
}

.deleted {
    text-decoration: line-through;
}

.tempoAssoluto {
    color: red;
    font-weight: bold;
}

.tempoPersonale {
    color: #ca912a;
    font-weight: bold;
}

.previsione {
    width: calc(32px * var(--zoom-value));
}

    .previsione span {
        background-color: red;
        color: white;
        padding: calc(3px * var(--zoom-value));
    }

.dot {
    height: calc(15px * var(--zoom-value));
    width: calc(15px * var(--zoom-value));
    background-color: #000;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-top: calc(-5px * var(--zoom-value));
}

.arrow-up {
    width: 0;
    height: 0;
    border-left: calc(15px * var(--zoom-value)) solid transparent;
    border-right: calc(15px * var(--zoom-value)) solid transparent;
    border-bottom: calc(15px * var(--zoom-value)) solid red;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: calc(15px * var(--zoom-value)) solid transparent;
    border-right: calc(15px * var(--zoom-value)) solid transparent;
    border-top: calc(15px * var(--zoom-value)) solid black;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: calc(60px * var(--zoom-value)) solid transparent;
    border-bottom: calc(60px * var(--zoom-value)) solid transparent;
    border-left: calc(60px * var(--zoom-value)) solid black;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: calc(10px * var(--zoom-value)) solid transparent;
    border-bottom: calc(10px * var(--zoom-value)) solid transparent;
    border-right: calc(10px * var(--zoom-value)) solid blue;
}

.cNero {
    color: black;
}

.cRosso {
    color: red;
}

.cVerde {
    color: green;
}

.cBlu {
    color: blue;
}

.cArancio {
    color: #9c6c00;
}

.cGiallo {
    color: yellow;
}

.animateUp {
    animation: animateToGreen 3s linear 0s;
    -webkit-animation: animateToGreen 3s linear 0s;
}

@keyframes animateToGreen {
    0% {
        background: transparent;
        color: black;
    }

    50% {
        background: #5cce5c;
        color: black;
    }

    100% {
        background: transparent;
        color: black;
    }
}

@-webkit-keyframes animateToGreen /* Safari and Chrome - necessary duplicate */
{
    0% {
        background: transparent;
        color: black;
    }

    50% {
        background: #5cce5c;
        color: black;
    }

    100% {
        background: transparent;
        color: black;
    }
}

.animateDown {
    animation: animateToRed 3s linear 1s;
    -webkit-animation: animateToRed 3s linear 1s;
}

@keyframes animateToRed {
    0% {
        background: transparent;
        color: black;
    }

    50% {
        background: #dc8181;
        color: black;
    }

    100% {
        background: transparent;
        color: black;
    }
}

@-webkit-keyframes animateToRed /* Safari and Chrome - necessary duplicate */
{
    0% {
        background: transparent;
        color: black;
    }

    50% {
        background: #dc8181;
        color: black;
    }

    100% {
        background: transparent;
        color: black;
    }
}

/*https://www.w3schools.com/w3css/4/w3.css*/
.animateFromBottom {
    position: relative;
    animation: animateFromBottom 0.4s;
}

@keyframes animateFromBottom {
    from {
        bottom: calc(-200px * var(--zoom-value));
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

.animateFromGreenToBlack {
    animation: animateFromGreenToBlack 5s;
}

@keyframes animateFromGreenToBlack {
    from {
        color: green;
    }

    to {
        color: black;
    }
}

.fixed-footer-note {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: calc(18px * var(--zoom-value));
    z-index: 2;
}

.fixed-footer-note-smartphone {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
}

.nota-padding {
    padding-top: 0.2rem;
    padding-bottom: 0.0rem;
}

.nota-tipo-0 {
    background: rgb(40, 40, 40);
}

.durata-sessione {
    font-size: calc(24px * var(--zoom-value));
}

.durata-sessione-label {
    font-size: calc(13px * var(--zoom-value));
}

.grigliaBordo {
    border-top: calc(3px * var(--zoom-value)) solid black;
    border-left: calc(3px * var(--zoom-value)) solid black;
    border-right: calc(3px * var(--zoom-value)) solid black;
}

.grigliaFilaSinistra {
    background: linear-gradient(to right, rgb(var(--color-rgb-theme-primary)), rgba(0, 0, 0, 0));
    color: white;
    padding-left: calc(10px * var(--zoom-value));
    text-align: left;
}

.grigliaFilaDestra {
    background: linear-gradient(to left, rgb(var(--color-rgb-theme-primary)), rgba(0, 0, 0, 0));
    color: white;
    padding-right: calc(10px * var(--zoom-value));
    text-align: right;
}

.tdButton {
    height: calc(22px * var(--zoom-value));
    vertical-align: bottom;
}

.cancel {
    text-decoration: line-through;
}

.dotClass {
    height: calc(10px * var(--zoom-value));
    width: calc(10px * var(--zoom-value));
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-top: calc(-2px * var(--zoom-value));
    border: calc(1px * var(--zoom-value)) solid black;
}

.margin-top-login-dialog {
    margin-top: 1rem;
}

/* Tooltip container */
.classeTooltip {
    position: relative;
    display: inline-block;
}

    /* Tooltip text */
    .classeTooltip .tooltiptext {
        visibility: hidden;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 0px calc(10px * var(--zoom-value));
        border-radius: calc(6px * var(--zoom-value));
        position: absolute;
        z-index: 1;
        left: calc(20px * var(--zoom-value));
    }

        .classeTooltip .tooltiptext::after {
            content: " ";
            position: absolute;
            top: 50%;
            /*right: 100%;*/ /* To the left of the tooltip */
            margin-top: calc(-5px * var(--zoom-value));
            border-width: calc(5px * var(--zoom-value));
            border-style: solid;
            border-color: transparent black transparent transparent;
        }

    .classeTooltip:hover .tooltiptext {
        visibility: visible;
    }

/*Tooltip Syncfusion graphs*/
.syncfusion-tooltip-table {
    width: 100%;
    background-color: black;
    color: #fff;
    font-size: calc(13px * var(--zoom-value));
    border-radius: calc(6px * var(--zoom-value));
}

.syncfusion-tooltip-table-th {
    text-align: center;
    padding-top: calc(5px * var(--zoom-value));
}

.syncfusion-tooltip-table-td-dot {
    padding-left: calc(10px * var(--zoom-value));
    padding-bottom: calc(5px * var(--zoom-value));
}

.syncfusion-tooltip-table-td-text {
    padding-left: calc(5px * var(--zoom-value));
    padding-right: calc(10px * var(--zoom-value));
    padding-bottom: calc(5px * var(--zoom-value));
}

/*percorso (breadcrumb) pagina web per smartphone e tablet*/
div.scrollmenu {
    background-color: #e9ecef;
    overflow: auto;
    white-space: nowrap;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}

    div.scrollmenu a {
        display: inline-block;
        text-align: left;
        margin-bottom: 0px;
    }

    div.scrollmenu label {
        display: inline-block;
        color: #6c757d;
        text-align: left;
        text-decoration: none;
        margin-bottom: 0px;
    }
/*menu a scorrimento button analisi dati per smartphone*/
div.scrollmenu-button {
    overflow: auto;
    white-space: nowrap;
}

.oggetto-accordion {
    box-shadow: 0px 0px calc(9px * var(--zoom-value)) 0px rgba(0, 0, 0, 0.3);
    background-color: darkgray;
    cursor: pointer;
    padding-top: 0.2rem;
    padding-bottom: 0.05rem;
    padding-left: calc(10px * var(--zoom-value));
    padding-right: calc(10px * var(--zoom-value));
    width: 100%;
    border-top: calc(1px * var(--zoom-value)) solid #dee2e6;
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: left;
    outline: none;
    font-size: 1rem;
    font-weight: var(--mdc-typography-subtitle2-font-weight, 500);
    color: #212529;
    transition: 0.4s;
}

    .oggetto-active {
        background-color: #ccc;
    }

.oggetto-accordion:after {
    font-family: 'Material Icons';
    content: 'expand_more';
    color: #212529;
    font-weight: bold;
    float: right;
    margin-left: calc(5px * var(--zoom-value));
}

.oggetto-active:after {
    font-family: 'Material Icons';
    content: 'expand_less';
}

.oggetto-panel {
    overflow: hidden;
}

.utente-esterno-form {
    margin: calc(10px * var(--zoom-value));
    box-shadow: 0px 0px calc(9px * var(--zoom-value)) 0px rgba(0, 0, 0, 0.3);
    background-color: #ccc;
    border: calc(1px * var(--zoom-value)) solid #dee2e6;
}

.utente-esterno-div {
    padding-left: calc(20px * var(--zoom-value));
    padding-bottom: calc(10px * var(--zoom-value));
}

.utente-esterno-input {
    width: 100%;
    max-width: calc(350px * var(--zoom-value));
}

iframe.border-custom {
    border: inset calc(2px * var(--zoom-value));
}

#chartWeather1, #chartWeather2, #chartWeather3 {
    height: 100% !important;
    width: 100% !important;
    font-size: 100% !important;
}

.container-fluid {
    padding-right: calc(15px * var(--zoom-value));
    padding-left: calc(15px * var(--zoom-value));
}

/*Proprietà oggetti MatBlazor dopo ridimensionamento schermo*/

/*MatAppBar Personalizzato*/

.mdc-top-app-bar__row {
    height: var(--top-bar-height);
}

.mdc-top-app-bar--fixed-adjust {
    padding-top: 0 !important;
}

.mdc-top-app-bar__section {
    padding: calc(8px * var(--zoom-value)) calc(12px * var(--zoom-value));
}

.mdc-top-app-bar__title {
    padding-left: calc(20px * var(--zoom-value));
}

/*MatButton Personalizzato*/

.mdc-button {
    padding: 0 calc(8px * var(--zoom-value)) 0 calc(8px * var(--zoom-value));
    min-width: calc(64px * var(--zoom-value));
    border-radius: var(--mdc-shape-small, calc(4px * var(--zoom-value)));
    height: calc(36px * var(--zoom-value));
}

    .mdc-button .mdc-button__ripple {
        border-radius: var(--mdc-shape-small, calc(4px * var(--zoom-value)));
    }

.mdc-button .mdc-button__icon {
    width: calc(18px * var(--zoom-value));
    height: calc(18px * var(--zoom-value));
    font-size: calc(18px * var(--zoom-value));
}

.mdc-button--raised, .mdc-button--unelevated {
    padding: 0 calc(16px * var(--zoom-value)) 0 calc(16px * var(--zoom-value));
}

.mdc-button--raised .mdc-button__icon, .mdc-button--unelevated .mdc-button__icon, .mdc-button--outlined .mdc-button__icon {
    margin-left: calc(-4px * var(--zoom-value));
    margin-right: calc(8px * var(--zoom-value));
}

.mdc-button.background-secondary {
    background-color: rgb(var(--color-rgb-theme-secondary));
}

.mdc-button.background-cancel {
    background-color: rgb(var(--color-rgb-theme-primary));
    color: rgb(var(--color-rgb-theme-text-primary));
}

/*.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before, .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after {
    --mdc-ripple-fg-size: 0px;
}*/

/*MatSlideToggle Personalizzato*/

.mdc-switch__track {
    width: calc(32px * var(--zoom-value));
    height: calc(14px * var(--zoom-value));
    border: calc(1px * var(--zoom-value)) solid transparent;
    border-radius: calc(7px * var(--zoom-value));
}

.mdc-switch__thumb {
    box-shadow: 0px calc(3px * var(--zoom-value)) calc(1px * var(--zoom-value)) calc(-2px * var(--zoom-value)) rgba(0, 0, 0, 0.2), 0px calc(2px * var(--zoom-value)) calc(2px * var(--zoom-value)) 0px rgba(0, 0, 0, 0.14), 0px calc(1px * var(--zoom-value)) calc(5px * var(--zoom-value)) 0px rgba(0, 0, 0, .12);
    width: calc(20px * var(--zoom-value));
    height: calc(20px * var(--zoom-value));
    border: calc(10px * var(--zoom-value)) solid;
}

.mdc-switch__thumb-underlay {
    left: calc(-18px * var(--zoom-value));
    top: calc(-17px * var(--zoom-value));
    width: calc(48px * var(--zoom-value));
    height: calc(48px * var(--zoom-value));
}

.mdc-switch--checked .mdc-switch__thumb-underlay {
    transform: translateX(calc(20px * var(--zoom-value)));
}

.mdc-switch__native-control {
    width: calc(68px * var(--zoom-value));
    height: calc(48px * var(--zoom-value));
}

.mat-switch + label {
    margin-left: calc(10px * var(--zoom-value));
    margin-bottom: 0px;
}

.mdc-switch__thumb-underlay.mdc-ripple-upgraded::before, .mdc-switch__thumb-underlay.mdc-ripple-upgraded::after {
    --mdc-ripple-fg-size: 0px;
}

/*MatCheckbox Personalizzato*/

.mdc-checkbox {
    flex: 0 0 calc(18px * var(--zoom-value));
    width: calc(18px * var(--zoom-value));
    height: calc(18px * var(--zoom-value));
    padding: calc(11px * var(--zoom-value));
}

    .mdc-checkbox .mdc-checkbox__native-control {
        width: calc(40px * var(--zoom-value));
        height: calc(40px * var(--zoom-value));
    }

    .mdc-checkbox .mdc-checkbox__background {
        top: calc(11px * var(--zoom-value));
        left: calc(11px * var(--zoom-value));
    }

.mdc-checkbox__background {
    width: calc(18px * var(--zoom-value));
    height: calc(18px * var(--zoom-value));
    border: calc(2px * var(--zoom-value)) solid currentColor;
    border-radius: calc(2px * var(--zoom-value));
}

.mdc-checkbox .mdc-checkbox__background::before {
    top: calc(-13px * var(--zoom-value));
    left: calc(-13px * var(--zoom-value));
    width: calc(40px * var(--zoom-value));
    height: calc(40px * var(--zoom-value));
}

.mdc-checkbox__checkmark-path {
    stroke-width: calc(3.12px * var(--zoom-value));
}

/*MatIconButton Personalizzato*/

.mdc-icon-button {
    font-size: calc(24px * var(--zoom-value));
    width: calc(48px * var(--zoom-value));
    height: calc(48px * var(--zoom-value));
    padding: calc(12px * var(--zoom-value));
}

.material-icons {
    font-size: calc(24px * var(--zoom-value));
}

.mdc-icon-button.mdc-ripple-upgraded::before, .mdc-icon-button.mdc-ripple-upgraded::after {
    --mdc-ripple-fg-size: 0px;
}

/*MatDrawer, MatNavMenu, MatNavSubMenu Personalizzato*/

.mat-drawer {
    width: var(--mat-drawer-custom-width, calc(256px * var(--zoom-value)))
}

.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--opening) {
    box-shadow: 0 calc(8px * var(--zoom-value)) calc(10px * var(--zoom-value)) calc(-5px * var(--zoom-value)) rgba(0,0,0,.2), 0 calc(16px * var(--zoom-value)) calc(24px * var(--zoom-value)) calc(2px * var(--zoom-value)) rgba(0,0,0,.14), 0 calc(6px * var(--zoom-value)) calc(30px * var(--zoom-value)) calc(5px * var(--zoom-value)) rgba(0,0,0,.12);
}

.mat-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
    margin-left: var(--mat-drawer-custom-width, calc(256px * var(--zoom-value)));
}

.height-fix {
    margin-top: var(--top-bar-height) !important;
    height: calc(100% - var(--top-bar-height)) !important;
}

.mdc-drawer .mdc-list-item:nth-child(1) {
    margin-top: calc(2px * var(--zoom-value));
}

.mdc-drawer .mdc-list-item {
    height: calc(calc(48px * var(--zoom-value)) - 2 * calc(4px * var(--zoom-value)));
    margin: calc(8px * var(--zoom-value)) calc(8px * var(--zoom-value));
    padding: 0 calc(8px * var(--zoom-value));
}

.mdc-drawer .mdc-list-item {
    border-radius: var(--mdc-shape-small, calc(4px * var(--zoom-value)));
}

.mdc-list-item.mdc-list-item--selected::before {
    border: calc(3px * var(--zoom-value)) double transparent;
}

.mdc-list-item--selected, .mdc-list-item--activated {
    color: var(--mdc-theme-secondary) !important;
    background-color: rgba(var(--color-rgb-theme-primary), 0.10);
}

.mat-accordion .mat-expansion-panel__summary .after {
    font-size: calc(24px * var(--zoom-value));
}

.mat-accordion .mdc-nav-menu .mat-expansion-panel__content {
    padding: 0 0 0 calc(13px * var(--zoom-value));
}

/*MatDialog Personalizzato*/

.mdc-dialog .mdc-dialog__surface {
    box-shadow: 0px calc(11px * var(--zoom-value)) calc(15px * var(--zoom-value)) calc(-7px * var(--zoom-value)) rgba(0, 0, 0, 0.2), 0px calc(24px * var(--zoom-value)) calc(38px * var(--zoom-value)) calc(3px * var(--zoom-value)) rgba(0, 0, 0, 0.14), 0px calc(9px * var(--zoom-value)) calc(46px * var(--zoom-value)) calc(8px * var(--zoom-value)) rgba(0, 0, 0, .12);
    border-radius: var(--mdc-shape-medium, calc(4px * var(--zoom-value)));
    max-height: calc(100% - calc(32px * var(--zoom-value)));
    min-width: calc(280px * var(--zoom-value));
}

.mdc-dialog__title {
    padding: 0 calc(24px * var(--zoom-value)) calc(9px * var(--zoom-value));
    border-bottom: calc(1px * var(--zoom-value)) solid transparent;
}

.mdc-dialog__title::before {
    height: calc(40px * var(--zoom-value));
}

.mdc-dialog .mdc-dialog__content {
    padding: calc(20px * var(--zoom-value)) calc(24px * var(--zoom-value)) calc(20px * var(--zoom-value)) calc(24px * var(--zoom-value));
}

.mdc-dialog__title + .mdc-dialog__content {
    padding-top: 0;
}

.mdc-text-field.mdc-text-field--with-leading-icon {
    padding-right: calc(16px * var(--zoom-value));
}

.mdc-text-field--filled {
    height: calc(56px * var(--zoom-value));
}

.mdc-text-field {
    border-top-left-radius: calc(4px * var(--zoom-value));
    border-top-right-radius: calc(4px * var(--zoom-value));
    padding: 0 calc(16px * var(--zoom-value));
}

.mdc-text-field--fullwidth {
    padding: 0;
    width: 100%;
}

.mdc-text-field--filled::before {
    height: calc(40px * var(--zoom-value));
}

.mdc-text-field__icon--leading {
    margin-left: calc(16px * var(--zoom-value));
    margin-right: calc(8px * var(--zoom-value));
}

.mdc-text-field__input {
    height: calc(28px * var(--zoom-value));
}

label.mdc-text-field--fullwidth-with-leading-icon:not(.mdc-text-field--textarea) > input.mdc-text-field__input {
    padding: calc(10px * var(--zoom-value)) calc(16px * var(--zoom-value)) calc(6px * var(--zoom-value)) 0 !important;
}

label.mdc-text-field.mdc-text-field--fullwidth:not(.mdc-text-field--textarea) > input.mdc-text-field__input {
    padding: calc(10px * var(--zoom-value)) calc(16px * var(--zoom-value)) calc(6px * var(--zoom-value));
}

.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label {
    max-width: calc(100% - calc(48px * var(--zoom-value)));
    left: calc(48px * var(--zoom-value));
}

.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label--float-above {
    max-width: calc(100% / 0.75 - calc(64px * var(--zoom-value)) / 0.75);
}

.mdc-text-field.mdc-text-field--fullwidth .mdc-floating-label.mdc-floating-label--float-above {
    transform: translateY(-120%) scale(0.75);
}

.mdc-floating-label--required::after {
    margin-left: calc(1px * var(--zoom-value));
}

.mdc-line-ripple::before {
    border-bottom-width: calc(1px * var(--zoom-value));
}

.mat-text-field.valid.modified .mdc-line-ripple::before, .mat-select.valid.modified .mdc-line-ripple::before {
    border-bottom: calc(1px * var(--zoom-value)) solid #10b510 !important;
}

.mdc-line-ripple::after {
    border-bottom-width: calc(2px * var(--zoom-value));
}

.mdc-dialog__actions {
    min-height: calc(52px * var(--zoom-value));
    padding: calc(8px * var(--zoom-value));
    border-top: calc(1px * var(--zoom-value)) solid transparent;
}

@media (min-width: 592px) {
    .mdc-dialog .mdc-dialog__surface {
        max-width: calc(560px * var(--zoom-value));
    }
}

/*MatToast Personalizzato*/

.mat-toast-bottom-right {
    right: calc(12px * var(--zoom-value));
    bottom: calc(12px * var(--zoom-value));
}

.mat-toast-container > div {
    margin: 0 0 calc(6px * var(--zoom-value));
    width: calc(300px * var(--zoom-value));
    -moz-border-radius: calc(3px * var(--zoom-value));
    -webkit-border-radius: calc(3px * var(--zoom-value));
    border-radius: calc(3px * var(--zoom-value));
    background-position: calc(15px * var(--zoom-value)) center;
    -moz-box-shadow: 0 0 calc(12px * var(--zoom-value)) #999;
    -webkit-box-shadow: 0 0 calc(12px * var(--zoom-value)) #999;
    box-shadow: 0 0 calc(12px * var(--zoom-value)) #999;
}

.mat-toast {
    padding: calc(14px * var(--zoom-value)) calc(16px * var(--zoom-value));
}

.mat-toast-progress {
    height: calc(4px * var(--zoom-value));
}

.mat-toast-icon {
    width: calc(34px * var(--zoom-value));
    font-size: calc(26px * var(--zoom-value));
}

/*Media Queries per valutare dimensioni schermo*/

@media screen and (pointer: coarse) and (orientation: portrait) and (min-height: 1px) and (max-height: 500px) {

    :root {
        --zoom-value: 0.5;
    }
}

@media screen and (pointer: coarse) and (orientation: portrait) and (min-height: 501px) and (max-height: 600px) {

    :root {
        --zoom-value: 0.6;
    }
}

@media screen and (pointer: coarse) and (orientation: portrait) and (min-height: 601px) and (max-height: 670px) {

    :root {
        --zoom-value: 0.7;
    }
}

@media screen and (pointer: coarse) and (orientation: portrait) and (min-height: 671px) and (max-height: 1023px) {

    :root {
        --zoom-value: 0.8;
    }
}

@media screen and (pointer: coarse) and (orientation: portrait) and (min-height: 1024px) {

    :root {
        --zoom-value: 0.85;
    }
}


@media screen and (pointer: coarse) and (orientation: landscape) and (min-width: 1px) and (max-width: 500px) {

    :root {
        --zoom-value: 0.5;
    }
}

@media screen and (pointer: coarse) and (orientation: landscape) and (min-width: 501px) and (max-width: 600px) {

    :root {
        --zoom-value: 0.6;
    }
}

@media screen and (pointer: coarse) and (orientation: landscape) and (min-width: 601px) and (max-width: 670px) {

    :root {
        --zoom-value: 0.7;
    }
}

@media screen and (pointer: coarse) and (orientation: landscape) and (min-width: 671px) and (max-width: 1023px) {

    :root {
        --zoom-value: 0.8;
    }
}

@media screen and (pointer: coarse) and (orientation: landscape) and (min-width: 1024px) {

    :root {
        --zoom-value: 0.85;
    }
}


@media screen and (pointer: fine) and (min-width: 1px) and (max-width: 1023px) {

    :root {
        --zoom-value: 0.5;
    }

    .oggetto-accordion:hover {
        background-color: #ccc;
    }
}

@media screen and (pointer: fine) and (min-width: 1024px) and (max-width: 1151px) {

    :root {
        --zoom-value: 0.6;
    }

    .oggetto-accordion:hover {
        background-color: #ccc;
    }
}

@media screen and (pointer: fine) and (min-width: 1152px) and (max-width: 1359px) {

    :root {
        --zoom-value: 0.7;
    }

    .oggetto-accordion:hover {
        background-color: #ccc;
    }
}

@media screen and (pointer: fine) and (min-width: 1360px) and (max-width: 1559px) {

    :root {
        --zoom-value: 0.8;
    }

    .oggetto-accordion:hover {
        background-color: #ccc;
    }
}

@media screen and (pointer: fine) and (min-width: 1600px) and (max-width: 1919px) {

    :root {
        --zoom-value: 0.9;
    }

    .oggetto-accordion:hover {
        background-color: #ccc;
    }
}

@media screen and (pointer: fine) and (min-width: 1920px) {

    :root {
        --zoom-value: 1.0;
    }

    .oggetto-accordion:hover {
        background-color: #ccc;
    }
}