.media {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: var(--radius-base);
    border: 1px solid var(--grey-03);
}

.media-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 2.5;
}

.media-body {
    display: flex;
    align-items: center;
    justify-content: start;
    flex: 7.5;
    padding: 0;
}

.media + .media {
    margin-top: 12px;
}

.media.media-draggable .media-body:before {
    content: "\eb41";
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 12px;
    font-size: 22px;
    font-family: 'icomoon' !important;
    line-height: 1;
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.media.media-draggable:hover {
    background-color: var(--grey-02) ;
    transition: .3s;
    transition-delay: .1s;
}

.media.media-draggable.ui-sortable-helper,
.media.media-draggable.ui-sortable-helper .wdk-text,
.media.media-draggable.ui-sortable-helper .btn-inline {
    background-color: var(--primary) !important;
    color: var(--white-01) !important;
    cursor: grabbing !important;
    cursor: -moz-grabbing !important;
    cursor: -webkit-grabbing !important;
}

.media.media-draggable.ui-sortable-helper .media-body:before {
    cursor: grabbing !important;
    cursor: -moz-grabbing !important;
    cursor: -webkit-grabbing !important;
}

.media-body .media-description {
    white-space: normal;
}

@media (max-width: 576px) {
    /* Question creation on Survey */
    .media.media-draggable {
        background-color: white;
        box-shadow: var(--box-shadow);
        border: none;
    }    
    .media.media-draggable .media-body:before {
        display: none;
    }
    .media.media-draggable strong.wdk-group .badge {
        align-self: self-start;
    }
    .media.media-draggable .media-body .badge.bg-secondary {
        white-space: pre-wrap;
        height: fit-content;
        text-align: left;
    }
}