@import "tailwindcss";

@theme {
    /* Primary */
    --color-avvera-primary-white: #FFFFFF;
    --color-avvera-primary-sand: #FFF9F5;
    --color-avvera-primary-pink: #F9EEF3;
    --color-avvera-primary-darkpink: #F3DDE7;
    --color-avvera-primary-purple: #D3337E;
    --color-avvera-primary-deeppurple: #971D51;
    --color-avvera-primary-violet: #AB5998;
    /* Grey */
    --color-avvera-grey-20: #F7F7F7;
    --color-avvera-grey-40: #D8DEE8;
    --color-avvera-grey-60: #A9B4C5;
    --color-avvera-grey-70-opacity: rgba(61, 77, 101, 0.6);
    --color-avvera-grey-90: #536889;
    --color-avvera-grey-100: #3D4D65;
    /* Status */
    --color-avvera-status-green: #00824E;
    --color-avvera-status-green-opacity: #E6F3ED;
    --color-avvera-status-orange: #D77F00;
    --color-avvera-status-orange-opacity: #FBF2E6;
    --color-avvera-status-red: #F7323D;
    --color-avvera-status-red-opacity: #FEEBEC;
    --color-avvera-status-grey: #60728E;
    --color-avvera-status-grey-opacity: #EFF1F4;
    --color-avvera-status-blue: #4570AF;
    --color-avvera-status-blue-opacity: #EDF1F8;
    /* Border Radius */
    --border-radius-5xl: 40px;
    /* Box Shadow */
    --shadow-avvera-grey: 0px 4px 12px 0px rgba(61, 77, 101, 0.20);
    --shadow-avvera-purple: 0px 4px 12px 0px rgba(211, 51, 126, 0.20);
    --shadow-avvera-sand: 0px 2px 32px 4px rgba(248, 224, 209, 0.60);
}

@layer base {
    html {
        font-family: "Poppins", sans-serif;
        color: var(--color-avvera-grey-100, #3D4D65);
        font-size: 14px;
    }
}
#app {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 320px;
    padding: 20px;
    width: 100%;
}


.app-in-row {
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.margine-rigth-12 {
    margin-right: 12px;
}
.app-in-row-no-margin {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.oggetti-in-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.margine-bot-4 {
    margin-bottom: 4px;
}

.margine-top-bot-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.margine-top-bot-12 {
    margin-top: 12px;
    margin-bottom: 12px;
}

.oggetti-in-row-margin-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*height: 84px;*/
    margin-top: 20px;
}

.specialisti-icon {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.specialisti-title {
    font-weight: 700;
    font-size: 14px;
    color: #34405A;
    flex: 1;
}

.specialisti-arrow {
    display: flex;
    align-items: center;
    margin-left: 12px;
}

.titolo-home {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary-purple, #D3337E);
}

#LaMiaRichiesta {
    font-size: 20px;
    font-weight: 400;
}

#NumeroRichiesta {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-primary-purple, #D3337E);
}
#NumeroRichiestaNero {
    font-size: 12px;
    font-weight: 400;
}

#ImportoMutuo {
    font-size: 40px;
    font-weight: 700;
    font-weight: bold;
}

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

.margine-top-32 {
    margin-top: 32px;
}

.margine-bot-20 {
    margin-bottom: 20px;
}

.margine-bot-16 {
    margin-bottom: 16px;
}

.main-layout-container {
    height: calc(100vh - 41px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-top: 40px;
    margin-left: 15.83px;
    margin-right: 16.17px;
    /*    justify-content: center;
    align-items: center;*/
}

/* Da 744px a 1279px */
@media (min-width: 744px) and (max-width: 1279px) {
    .main-layout-container {
        margin-top: 40px;
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* Da 1280px a 1919px */
@media (min-width: 1280px) and (max-width: 1919px) {
    .main-layout-container {
        margin-top: 40px;
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* Da 1920px in su */
@media (min-width: 1920px) {
    .main-layout-container {
        margin-top: 40.5px;
        margin-left: 448px;
        margin-right: 448px;
    }
}

.content {
    flex: 1 1 auto; /* Occupa tutto lo spazio disponibile */
    display: flex;
    flex-direction: column;
}

.max-large {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.max-large-login {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* margin-top: 20px;*/
}


/* Da 744px a 1279px */
@media (min-width: 744px) and (max-width: 1279px) {
    .max-large {
        max-width: 100%;
    }

    .max-large-login {
        max-width: 324px;
        margin-top: 20px;
    }
}

/* Da 1280px a 1919px */
@media (min-width: 1280px) and (max-width: 1919px) {
    .max-large {
        max-width: 610px;
    }

    .max-large-login {
        max-width: 382px;
        margin-top: 20px;
    }
}

/* Da 1920px in su */
@media (min-width: 1920px) {
    .max-large {
        max-width: 678px;
    }

    .max-large-login {
        max-width: 484px;
        margin-top: 65px;
    }
}

.card-100 {
    width: 100%;
    min-width: auto;
}

.label {
    display: flex;
/*    width: 311px;
*/    height: 44px;
    min-height: 28px;
    align-items: center;
    gap: var(--spacing-spacing-15, 6px);
    flex-shrink: 0;
}

#DettaglioRichiesta {
    font-weight: bold;
    font-size: 18px;
    font-weight: 700;
}

.list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-spacing, 0);
    align-self: stretch;
}

.list-item {
    display: flex;
    padding: var(--spacing-spacing-5, 20px) var(--spacing-spacing, 0);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-spacing-25, 12px);
    align-self: stretch;
}

.item {
    display: flex;
    align-items: center;
    gap: var(--spacing-spacing-25, 12px);
    align-self: stretch;
}

.item-icon {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
}

.item-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}

.item-button {
    display: flex;
    width: 44px;
    height: 44px;
    padding: var(--spacing-spacing-25, 12px) var(--spacing-spacing-5, 20px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-spacing-2, 8px);
}

.list-item-basic {
    display: flex;
    padding: var(--spacing-spacing-25, 12px) 0 var(--spacing-spacing-4, 16px) 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-spacing-1, 4px);
    align-self: stretch;
}

.list-item-basic-title {
    align-self: stretch;
    color: var(--color-grey-90, #536889);
    /* Label/large */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.list-item-basic-value {
    display: flex;
/*    height: 26px;
*/    align-items: center;
    gap: 4px;
    align-self: stretch;
}

.header-stepper-back-mobile {
    display: flex;
    height: 80px;
    padding: var(--spacing-spacing-5, 20px) var(--spacing-spacing-4, 16px);
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.lista-elementi {
    display: flex;
    width: 100%;
    padding: var(--spacing-spacing-25, 12px) var(--spacing-spacing, 0);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-spacing-1, 4px);
}
.lista-elementi-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-spacing-25, 12px);
    align-self: stretch;
}
.lista-elementi-centro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-spacing-2, 8px);
    flex: 1 0 0;
}
.lista-elementi-basic {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    align-self: stretch;
    overflow: hidden;
    color: var(--color-grey-90, #536889);
    text-overflow: ellipsis;
    /* Label/medium */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
}
.lista-elementi-basic-sub {
    display: flex;
    align-items: center;
    gap: var(--spacing-spacing-2, 8px);
}
.lista-elementi-basic-sub-testo {
    color: var(--color-grey-90, #536889);
    /* Label/medium */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
}
.lista-elementi-basic-sub-label {
    color: var(--color-grey-100, #3D4D65);
    /* Table/Table-regular */
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 153.846% */
    display: flex;
    align-items: center;
    gap: var(--spacing-spacing-1, 4px);
}

.lista-elementi-basic-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-spacing-1, 4px);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    align-self: stretch;
    overflow: hidden;
    color: var(--color-grey-100, #3D4D65);
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
}


.list-link {
    display: inline-flex;
    padding: var(--spacing-spacing-5, 20px) var(--spacing-spacing, 0);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-spacing-25, 12px);
    width: 100%;
}
.list-link-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-spacing-25, 12px);
    width: 100%;
}

.list-link-icon {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.list-link-button {
    display: flex;
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-spacing-2, 8px);
    flex-shrink: 0;
}
.list-link-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}
.list-link-text-label {
    color: var(--color-grey-100, #3D4D65);
    /* Label/large-bold */
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
}
.list-link-text-sub-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    align-self: stretch;
    overflow: hidden;
    color: var(--color-grey-90, #536889);
    text-overflow: ellipsis;
    /* Label/medium */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
}

.list-link-text-sub-label-a-capo {
    /*display: -webkit-box;*/
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    align-self: stretch;
    color: var(--color-grey-90, #536889);
    text-overflow: ellipsis;
    /* Label/medium */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
}

.modal-contenuto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-spacing-25, 12px);
    align-self: stretch;
}
.modal-contenuto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-spacing-25, 12px);
    align-self: stretch;
}
.modal-contenuto-titolo {
    color: var(--color-grey-100, #3D4D65);
    /* Headlines/H5-bold */
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 133.333% */
    margin-top: 12px;
    margin-bottom: 12px;
}
.modal-contenuto-testo {
    align-self: stretch;
    color: var(--color-grey-100, #3D4D65);
    /* Paragraph/small */
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.icon-primary {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    fill: var(--color-primary-purple, #D3337E);
}

.card-from-bottom {
    position: absolute;
    width: fit-content;
    bottom: 0px;
}

body.body-background-color {
    background-color: var(--color-avvera-primary-sand, #FFF9F5);
}
.background-color-white {
    background-color: #fff !important;
}

.visualizza-piccolo-schermo {
    visibility: hidden;
    display: none;
}
.visualizza-medio-piccolo-schermo {
    visibility: hidden;
    display: none;
}
.visualizza-medio-grande-schermo {
    visibility: hidden;
    display: none;
}
.visualizza-grande-schermo {
    visibility: hidden;
    display: none;
}


/* Da 744px a 1279px */
@media (max-width: 743px) {
    .visualizza-piccolo-schermo {
        visibility: visible;
        display: block;
    }
}

/* Da 744px a 1279px */
@media (min-width: 744px) and (max-width: 1279px) {
    .visualizza-medio-piccolo-schermo {
        visibility: visible;
        display: block;
    }
}

/* Da 1280px a 1919px */
@media (min-width: 1280px) and (max-width: 1919px) {
    .visualizza-medio-grande-schermo {
        visibility: visible;
        display: block;
    }
}

/* Da 1920px in su */
@media (min-width: 1920px) {
    .visualizza-grande-schermo {
        visibility: visible;
        display: block;
    }

}

@media (max-width: 200px) {    
    .app-in-row {
        flex-direction: column;
    }
    .oggetti-in-row-margin-top {
        flex-direction: column;
    }
    .oggetti-in-row {
        flex-direction: column;
    }
    .list-link-row {
        flex-direction: column;
    }
}
@media (max-width: 743px) {
    .truncate-tooltip {
        display: inline-block;
        max-width: 150px; /* Puoi modificare la larghezza */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.visually-hidden {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}