.profile { width: 100%; margin: 0 auto; max-width: 450px; } .myrow { display: flex; @media (max-width: 600px) { flex-flow: column; } } .qualifica { border: solid 2px #4198ef; border-radius: 1rem; padding: 5px; } .text-bacheca { margin: 10px; border: solid 2px #4198ef; border-radius: 1rem; padding: 10px; } .note-bacheca { border: solid 2px #C10015; border-radius: 1rem; padding: 10px; } .img { margin-left: auto; margin-right: auto; max-height: 500px; max-width: 350px; @media (max-width: 500px) { max-height: 500px; max-width: 400px; } } $graytext: #555; .cal { color: black; font-size: 1rem; font-weight: 400; line-height: 1.25rem; letter-spacing: 0.03333em; &__title { color: white; font-weight: 700; font-size: 1rem; padding-bottom: 10px; } &__details { color: black; } &__hours { color: blue; &-title { color: $graytext; } &-content { font-weight: 400; } } &__where { margin-top: 5px; color: blue; &-title { color: $graytext; } &-content { color: darkblue !important; } } &__when { margin-top: 5px; color: blue; &-title { color: $graytext; } &-content { color: darkblue !important; ; } } &__teacher { margin-top: 5px; &-title { color: $graytext; } &-content { color: darkblue !important; ; } } &__quota { margin-top: 5px; &-title { color: $graytext; } &-content {} } &__img { width: 100px; height: 100px; padding: 10px; } } .badge-favbook { font-weight: bold; } .buttonsfav{ display: flex; } .buttonsfav_left{ } .on-left { margin-right: 8px !important; } .container_butt{ display: flex; justify-content: space-between; } .expand-fade-enter-active, .expand-fade-leave-active { transition: height 0.3s ease, opacity 0.3s ease; /* Aggiunge transizioni per height e opacity */ } .expand-fade-enter, .expand-fade-leave-to { height: 0; /* Imposta l'altezza a 0 per l'uscita */ opacity: 0; /* Rende invisibile durante l'uscita */ } .height-transition { transition: height 0.3s ease-in-out; } .well-positioned-dialog { width: 50vw; /* Imposta la larghezza al 50% della vista */ height: auto; /* Puoi regolare l'altezza come preferisci */ margin-left: auto; /* Allinea il dialogo a destra */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Aggiunge una leggera ombra */ } .riempi { width: 100%; }