.main { width: 100%; height: 100%; padding: 4% 8%; } .wrapper { width: 100%; height: 100%; } .header { text-align: right; display: flex; justify-content: end; width: 100%; height: 8%; &__listBtn { display: flex; justify-content: space-between; width: 20%; } } .content { margin-top: 3%; height: 85%; width: 100%; display: flex; justify-content: space-between; &__listQuestion { height: 100%; width: 25%; &__list { height: 100%; width: 100%; &__item { height: 12.5%; width: 100%; display: flex; align-items: center; padding: 0 5px; cursor: pointer; &:hover { background-color: rgba(230, 230, 230, 0.6); } span { display: block; font-size: 15px; font-family: "Montserrat", sans-serif; } } &__item:not(:last-child) { border-bottom: 1px solid rgb(220, 220, 220); } } } &__newForm { box-shadow: 0 0 5px 1px rgb(220, 220, 220); height: 100%; width: 75%; &__title { padding: 1%; width: 100%; height: 10%; h3 { font-size: 20px; font-family: "Montserrat", sans-serif; color: rgb(80, 80, 80); } } &__list { overflow-y: auto; width: 100%; height: 90%; &::-webkit-scrollbar { width: 7px; } &::-webkit-scrollbar-thumb { background-color: rgb(200, 200, 200); } &__item { padding: 1%; width: 100%; height: 25%; border-bottom: 1px solid rgb(220, 220, 220); display: flex; justify-content: space-between; align-items: center; &:hover { background-color: rgba(230, 230, 230, 0.6); cursor: pointer; } &__answer { width: 90%; span { display: block; } span:first-child { font-size: 15px; font-family: "Montserrat", sans-serif; color: rgb(80, 80, 80); } span:last-child { font-size: 12px; font-family: "Montserrat", sans-serif; color: rgb(180, 180, 180); } } &__btn { width: 10%; display: flex; justify-content: space-around; align-items: center; i { display: block; } i:first-child:hover { color: rgb(42, 64, 187); } i:last-child:hover { color: rgb(199, 73, 73); } } } } } }