@media (max-device-width: 600px) {
    .draggable-content {
        width: 400px;
        padding: 0.5em;
        border-radius: 5px;
        display: flex;
        align-items: center;
        touch-action: none;
    }
}

@media (min-device-width: 600px) {
    .draggable-content {
        width: 200px;
        padding: 0.5em;
        border-radius: 5px;
        display: flex;
        align-items: center;
        touch-action: none;
    }

}

.sort-drag-drop-category-box {
    min-height: 5em;
    /* background-color: rgba(255, 255, 255, 0.85); */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2 0px;
    /* margin: 2px; */
    width: 100%;
}

.word-match_text {
    height: max-content;
    width: max-content;
    padding: 5px;
    margin: 0.1em;
    border: 2px solid black;
    border-radius: 5px;
    background-color: white;
    display: flex;
    align-items: center;
    touch-action: none;
}

@media (max-device-width: 600px) {
    .word-match_text img {
        width: 40vw;
        margin: 0;
        padding: 0;
    }
}

.sort-drag-drop-category {
    background-color: #dadafa;
    display: inline;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px black;
    border-top-style: hidden;
    border-bottom-style: hidden;
    border-left-style: solid;
    border-right-style: solid;
}

.word-match_dropArea {
    background-color: #90c0ff;
    border: 1px solid;
}

.word-match_ohjeet {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border: 2px solid black;
    border-bottom: none;
    min-height: 3.5em;
}

.word-match_image_holder {
    height: fit-content;
    position: relative;
    border: 2px solid black;
    borderTopLeftRadius: 5px;
    borderTopRightRadius: 5px;
}

.word-match_vastaus_alue {
    background-color: rgb(224, 224, 224);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 2px solid black;
    border-top: none;
    flex-wrap: wrap;
    min-height: 3.5em;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
    /* Safari fallback only */
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
}

#feedback_box {
    width: 90%;
    height: 20%;
    position: relative;
}