.slidecontainer {
    text-align: center;
}

.slider {
    width: 10%;
}

.text-box {
    padding: 7px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    width: 14%; 
}

.legend { list-style: none; }
.legend li { padding-bottom : 1.5vw; width: 20vw; }
.legend span { border: 0.1vw solid black; float: left; border-radius: 50%;}
.legend .grey { background-color: grey; }
.legend .green { background-color: #a4c652; }
.legend .black { background-color: black; }

.button-input {
    border-radius: 50vw;
    background-color: #288ec8;
    border: none;
    color: white;
    padding: 1%;
    margin-left: 1%;
    margin-right: 1%;
    padding-bottom: 1%;
    padding-top: 1%;
    padding-left: 2%;
    padding-right: 2%;
}

.button-input:hover {
    background-color:gray;
    cursor:pointer;
}

.comment-box {
    position: relative;
    padding: 1vw;
    width: 30vw;
    text-align: center;
}

.instruction-box {
    position: relative;
    width: 100%;
    transition: width 0.2s ease-out;
    border: 0.1vw solid grey;
    z-index : 10;
}

.collapsible {
    background-color: Transparent;
    color: "grey";
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-weight: bold;
    padding-top: 1%;
    padding-bottom: 1%;
}

.collapsible::-moz-focus-inner {
    border: 0;
}

.active, .collapsible:hover {
    background-color: "white";
}

/*The unicode \25BE is for ▾ (Dropdown arrow) */
.collapsible:after {
    content: "\25BE";
    color: "grey";
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\25B4";
}

.content {
    padding: 0 1.8vw;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: "white";
}