.question-wrapper {    
    font-size: 23px;
    line-height: 1.5em;
    font-weight: 100;
    cursor: pointer;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
}

.question-wrapper:hover i.arrow-right {
    border: solid #1382cf;
    border-width: 0 3px 3px 0; 
    display: inline-block; 
    padding: 3px; 
    direction: ltr;
}

.question-wrapper:hover {
    background-image: linear-gradient(90deg, #1382cf 0%, #1382cf 8px, transparent 8px, transparent 100%);    
    background-color: white;
}

@media(min-width: 768px) {
    .question-wrapper { 
        height: 90px;
    }
    .three-rows-question {
        height: 130px !important;
    }
    .question-wrapper .col-sm-11 {
        display: table;
        height: 100%;
    }
    .question-wrapper span {
        display: table-cell;
        vertical-align: middle;
    }

}

@media(max-width: 768px) {
    i.arrow-right{
        display: none;
    }
    .arrow-wrapper {
        display: none;
    }
}

.answer-wrapper {
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    background-color: white;
    border-bottom: solid 0.5px #6f6d6d;
    font-size: 23px;
}

.collapse-on {
    background-image : linear-gradient(90deg, #1382cf 0%, #1382cf 8px, transparent 8px, transparent 100%);
    background-color : white;
    border-bottom : none;
}

.collapse-off {
    background-color: #e6e6e7;
    border-bottom: solid 0.5px #6f6d6d;
}


i.arrow-right {
    padding: 10px;
    border: solid black;
    border-width: 0 3px 3px 0; 
    display: inline-block; 
    padding: 3px;
    margin-top: 10px;
    transform: rotate(-45deg);
    position: relative;
    top: 17px;

}

i.arrow-right-animation {
    animation-name: turn-arrow-right;
    animation-duration: 0.5s;
}

i.arrow-down {
    border: solid #1382cf;
    border-width: 0 3px 3px 0; 
    display: inline-block; 
    padding: 3px;
    margin-top: 10px;
    transform: rotate(45deg);
    position: relative;
    top: 14px;
}

i.arrow-down-animation {
    animation-name: turn-arrow-down;
    animation-duration: 1s;
}

@keyframes turn-arrow-down{
  from {transform: rotate(-45deg);}
  to {transform: rotate(45deg);}
}

@keyframes turn-arrow-right{
  from {transform: rotate(45deg);}
  to {transform: rotate(-45deg);}
}