#refresh {
    background-color: #27ae60;
    width: 100%;
    text-align: center;
    color: #ecf0f1;
    font-family: Source Sans Pro, Helvetica, sans-serif;
    font-size: 20px;
    font-style: bold;
    font-weight: 850;
}


.container {
    display: flex;

    /* Misc */
    height: 100vh;    
}


.resizer[data-direction='horizontal'] {
    background-color: #27ae60;
    cursor: ew-resize;
    height: 100%;
    width: 10px;
}
.resizer[data-direction='vertical'] {
    background-color: #27ae60;
    cursor: ns-resize;
    height: 2px;
    width: 100%;
}
.container__left {
    /* Initially, the left takes 1/4 width */
    width: 25%;

    /* Misc */
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;

}
.container__right {
    /* Take the remaining width */
    flex: 1;

    /* Misc */
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height:100%;

}
.container__top {
    /* Initial height */
    height: 12rem;

    /* Misc */
    align-items: center;
    display: flex;
    justify-content: center;

}
.container__bottom {
    /* Take the remaining height */
    flex: 1;

    /* Misc */
    align-items: center;
    display: flex;
    justify-content: center;
}