#wrapper {
    padding-top: 2%;
}

#cards {
    position: relative; 
    text-align: center;
}

.card {
    display: inline-block; 
    /* font-size: 1.5vw; */
    padding: 1.7%;
    margin: 0.05%;  
    color: white; 
    background-color: #288ec8; 
}

#legend-comment-wrapper {
    padding-top: 2%;
    height: 20vh;
}

.legend {
    float: left;
}

.red {
    background-color: #dc143c;
    border-radius: 0%;
    width: 3.2vw;
    margin-top: 2.8%;
    height: 0.35vw;
    border: 0vw solid grey;
}

.green {
    background-color: #a4c652;
    border-radius: 0%;
    width: 3.2vw;
    margin-top: 2.8%;
    height: 0.35vw;
    border: 0vw solid grey;
}

.black {
    background-color: black;
    border-radius: 0%;
    width: 3.2vw;
    margin-top: 2.8%;
    height: 0.35vw;
    border: 0vw solid grey;
}

.grey {
    background-color: grey;
    border-radius: 0%;
    width: 3.2vw;
    margin-top: 2.8%;
    height: 0.35vw;
    border: 0vw solid grey;
}

.blue {
    background-color: #288ec8;
    border-radius: 0%;
    width: 3.2vw;
    margin-top: 2.8%;
    height: 0.35vw;
    border: 0vw solid grey;
}

.legend { list-style: none; }
.legend li { padding-bottom : 1.5vw; width: 20vw; }
.legend span { border: 0vw solid black; float: left; border-radius: 0%;}


.comment-box {
    margin: auto;
}

.slidecontainer {
    padding-top: 0%;
    padding-bottom: 2%;
}

.input-box-container {
   text-align: center;
}

.buttons-wrapper {
    text-align: center;
    padding-top: 2%;
}

#question {
    /* font-size: 1.5vw; */
    text-align: justify;
    padding-bottom: 2%;
}

#type {
    padding-top: 12%;
}

p,span {
    /* font-size: 1.5vw; */
    text-align: center;
}