.custom-shape, .custom-shape:focus {
    width: 331px;
    height: 389px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    clip-path: url('#clip-shape');
    position: absolute;
    left: 8px;
    top: 8px;
}

.custom-shape.revert {
    background-color: #fff;
    background-size: 0;
    left: 0;
    right: -8px;
    clip-path: url('#clip-shape-revert');
}

.custom-shape .inner {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    overflow: auto;
    padding: 30px;
    position: absolute;
}

.custom-shape .inner h1 {
    text-align: left;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
    padding-left: 8px;
}

.custom-shape .inner p {
    color: #757575;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    margin: 0;
    padding: 0 8px
}

.tipContainer {
    position: relative;
    width: 331px;
    height: 389px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="324" height="382" viewBox="0 0 324 382" fill="none"><path d="M322.627 224.762C322.07 212.257 321.275 199.752 320.479 187.421C317.298 141.048 317.934 80.0858 304.811 40.4864C299.085 23.1183 289.7 19.992 280.792 16.171C240.151 -1.71816 197.203 0.192354 155.925 0.018673C131.19 -0.155008 106.535 0.887048 81.8799 2.97123C60.4059 4.88172 36.3073 1.75548 15.5492 14.6079C-5.4476 27.634 0.596932 81.1279 1.4718 116.906C2.90339 177.868 4.73265 238.831 6.88004 299.793C7.75491 324.629 11.652 375.344 27.161 375.518C64.9393 376.039 103.592 382.465 141.132 378.47C168.73 375.518 196.328 372.044 224.006 371.871C239.435 371.697 316.344 403.307 320.877 355.718C324.774 312.645 324.615 268.356 322.627 224.762Z" fill="%230098A9"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto
}

.tipContainerRevert {
    position: relative;
    width: 331px;
    height: 389px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="324" height="382" viewBox="0 0 324 382" fill="none"><path d="M1.3732 224.762C1.92993 212.257 2.72525 199.752 3.5206 187.421C6.7019 141.048 6.06567 80.0858 19.1886 40.4864C24.915 23.1183 34.3 19.992 43.2077 16.171C83.8491 -1.71816 126.797 0.192354 168.075 0.018673C192.81 -0.155008 217.465 0.887048 242.12 2.97123C263.594 4.88172 287.693 1.75548 308.451 14.6079C329.448 27.634 323.403 81.1279 322.528 116.906C321.097 177.868 319.267 238.831 317.12 299.793C316.245 324.629 312.348 375.344 296.839 375.518C259.061 376.039 220.408 382.465 182.868 378.47C155.27 375.518 127.672 372.044 99.9943 371.871C84.5649 371.697 7.65631 403.307 3.12292 355.718C-0.7742 312.645 -0.615143 268.356 1.3732 224.762Z" fill="%230098A9"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transition:all 0.20s ease-out;
    -moz-transition:all 0.20s ease-out;
    -o-transition:all 0.20s ease-out;
}

.tip-title {
    font-size: 20px;
    text-align: center;
    line-height: 150%;
    margin-top: 8px;
    color: #000;
}

svg {
    width: 0;
    height: 0;
}

.inner .contenuto {
    max-height: 97%;
    overflow-y: auto;
    background-color: #fff
}

/* Stilizzare la scrollbar */
.inner .contenuto::-webkit-scrollbar {
    width: 4px; /* Larghezza della scrollbar */
}

/* Stilizzare il track della scrollbar */
.inner .contenuto::-webkit-scrollbar-track {
    background: #f1f1f1; /* Colore di sfondo del track */
    border-radius: 10px; /* Raggio del bordo del track */
}

/* Stilizzare il thumb (maniglia) della scrollbar */
.inner .contenuto::-webkit-scrollbar-thumb {
    background: var(--primary_color); /* Colore della maniglia */
    border-radius: 10px; /* Raggio del bordo della maniglia */
}

/* Stilizzare la maniglia quando viene attivata (hover) */
.inner .contenuto::-webkit-scrollbar-thumb:hover {
    background: var(--secondary_color); /* Colore della maniglia quando è attivata */
}