/*!

Custom

*/

html, body {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.bg-gray-100 {
    background-color: #f9f9f9;
}
.bg-gray-200 {
    background-color: #c0c0c0;
}

.olga {
    border: solid 1px red;
}

.myAside {
    background-color: #f9f9f9;
    width: 180px;
}

.text-xl {
    font-size: 20px;
}
 .mt-40 {
     margin-top: 40px;
 }

/* icon menu */

.myIconMenu:hover,
.myIconMenu.is-active {
    background: #ffffff;
    border-radius: 8px;
}

.myIconBox {
    background: #ffffff;
    border-radius: 8px;
}

.myIconSvg {
    fill: #696969;
}

.myIconBox:hover,
.myIconBox.is-active {
    background-image: linear-gradient(310deg, #7928ca, #ff0080);
}

.myIconSvg:hover,
.myIconSvg.is-active {
    fill: #ffffff;
}

.bg-chart-kp {
    background-image: linear-gradient(to bottom right, #3a4069 0%, #1b1f33 70%, #0f1220 100% );
}

.auth-hero__main {
    position: relative;
}

/* Questo wrapper centra */
.auth-hero__content {
    display: rid;
    place-items: center; /* centro orizzontale + verticale */
    min-height: 100vh; /* così il contenuto può stare al centro pagina */
    padding: 0 18px 80px; /* spazio sotto */
}

.auth-hero__inner {
    background-image: url("/img/sfondo-01.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* oppure cover */
    border-radius: 10px;
    height: 360px;
    align-content: center;
}

/* Card sospesa: meglio con translate invece di margin-top */
.auth-card {
    max-width: 300px;
    margin: 0 auto;
    margin-top: 20px;
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.18);
    border: 1px solid rgba(17, 24, 39, 0.06);
}

.auth-hero__headline {
    max-width: 300px;
    margin: 0 auto;
    margin-top: 100px;
    text-align: center;
    color: white;
}

@media (max-width: 640px) {
    .auth-card {
        transform: translateY(70px);
    }
}

/* base */
.auth-input-custom {
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    width: 100%;
    background-color: #fff;
    height: 30px;
    margin-top: 30px;
}

    /* Chrome / Edge / Safari: override autofill */
    .auth-input-custom:-webkit-autofill,
    .auth-input-custom:-webkit-autofill:hover,
    .auth-input-custom:-webkit-autofill:focus,
    .auth-input-custom:-webkit-autofill:active {
        -webkit-text-fill-color: #111827; /* colore testo */
        -webkit-box-shadow: 0 0 0 1000px #fff inset; /* forza sfondo bianco */
        box-shadow: 0 0 0 1000px #fff inset; /* fallback */
        transition: background-color 9999s ease-in-out 0s; /* evita “flash” giallo */
    }

    /* Firefox */
    .auth-input-custom:-moz-autofill {
        box-shadow: 0 0 0 1000px #fff inset;
        -moz-text-fill-color: #111827;
    }
.auth-title {
    text-align: center;
    font-size: 20px;
}

.auth-input-custom::placeholder {
    color: #c0c0c0; /* scegli il colore */
    opacity: 1; /* importante: alcuni browser abbassano l'opacità di default */
}
.auth-link {
    margin-top: 30px;
    color: #000;
}

.auth-btn {
    border-radius: 4px;
    width: 100%;
    background-image: linear-gradient(to bottom right, #3a4069 0%, #1b1f33 70%, #0f1220 100% );
    height: 30px;
    margin-top: 30px;
    color: white;
}
.auth-row {
    margin-top: 30px;
}
button {
    border: 0;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.mr-8 {
    margin-right: 8px;
}
.ml-8 {
    margin-left: 8px;
}

.ml-40 {
    margin-left: 40px;
}
.mt-8 {
    margin-top: 8px;
}

table.my-table {
    border-collapse: collapse;
    width: 100%;
}

    table.my-table th,
    table.my-table td {
        border: 1px solid #f5f5f5;
    }

.p-8 {
    padding: 8px;
}
.mt-4 {
    margin-top: 4px;
}

.input-custom {
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    width: 100%;
    background-color: #fff;
    height: 30px;
    margin-top: 10px;
}

/* Chrome / Edge / Safari: override autofill */
.input-custom:-webkit-autofill,
.input-custom:-webkit-autofill:hover,
.input-custom:-webkit-autofill:focus,
.input-custom:-webkit-autofill:active {
    -webkit-text-fill-color: #111827; /* colore testo */
    -webkit-box-shadow: 0 0 0 1000px #fff inset; /* forza sfondo bianco */
    box-shadow: 0 0 0 1000px #fff inset; /* fallback */
    transition: background-color 9999s ease-in-out 0s; /* evita “flash” giallo */
}

/* Firefox */
.input-custom:-moz-autofill {
    box-shadow: 0 0 0 1000px #fff inset;
    -moz-text-fill-color: #111827;
}


.mt-20 {
    margin-top: 20px;
}

.my-btn {
    border-radius: 8px;
    background-image: linear-gradient(to bottom right, #3a4069 0%, #1b1f33 70%, #0f1220 100% );
    color: white;
}

.my-thead {
    background-image: linear-gradient(to bottom right, #3a4069 0%, #1b1f33 70%, #0f1220 100% );
    color: white;
}