body
{
    background-color:#fafafa;
    color:lightgray;
    height:100vh;
    display: flex;
}
h6{
  color: #333;
}

.main-wrapper{
    margin: 0 auto;
    width: 95%;
}

#container
{
    margin-left:auto;
    margin-right:auto;
    height: max-content;
}


#input-top
{
    text-align:center;
}

#inputs
{
    margin-left: auto;
    margin-right: auto;
    /* width:300px; */
    padding:15px;
    /* background-color:#444444; */
    font-size:15px;
    /* border-radius:10px; */
    /* float:left; */
}


#inputs input[type=text]
{
    font-size:15px;
    text-align:center;
    background-color:#fff;
    border:none;
}


textarea{
    font-size: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: none;
}


#results-area
{
    resize:none;
    border: 1px solid #d5d5d5;
    background-color:#f3f3f3;
    border-radius:5px;
}

.input-button
{
    margin-top:5px;
    width:100px;
    display:inline-block;
}

.input-button-2
{
    margin-top:5px;
    width:120px;
}

#results
{
    margin: 0 auto;
    float:left;
    text-align:center;
    align-items: center;
}
#draw
{
    align-items: start;
    width: 100%;
    margin: 7px 0 7px;
}
#draw .bar{
    background-color: #dadada;
    display: inline-flex;
    align-items: start;
    justify-content: flex-start;
    margin-bottom: 5px;
    width: 100%;
    padding: 4px;
}

#draw .bar span{
    background-color: #ff6565;
    border: 1px solid #933737;
    color: #222222;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}



.addBtn{
  display: flex;
  align-items: center;
  justify-content: center;
}