.poll{
    /* border: 0.5px solid #d1d1d1; */
    border-radius: 5px;
    padding: 10px;
}

.view-top-content{
    font-size: 20px;
    text-align: left;
    margin-bottom: 20px;

}

.list_option{
    text-align: left;
    font-size: 17px;
    width: 100%;
}

.btn-opt{
    width: 100%;
    padding: 10px;
    text-align: left;
    border: 0.5px solid #d1d1d1;
    border-radius: 5px;
    /* color: #434343; */
    font-weight: normal;
    min-height: 50px;
    height: fit-content;
    margin-bottom: 10px;
}

.btn-opt:hover {
    background-color: #3888EA;
    color: white;
}

.msg{
    width:100%;
    padding:0.5rem;
    margin-top:10px;
    text-align:center;
    font-weight:600;
    margin-bottom: 15px;
    font-size: 15px;
    border-radius: 5px;

}

.msg-error{
    display: none;
    background-color:rgb(254 202 202);
    color:rgb(185 28 28);
}

.msg-success{
    display: none;
    text-align:left;
    background-color: rgb(187 247 208);
    color:rgb(21 128 61);

    display:grid;
    column-gap: 3%;
    grid-template-columns: auto 45px;
    grid-template-rows: auto;
    grid-template-areas:
        'success_msg_text participant'
    ;
}

.success_msg_text{
    grid-area: success_msg_text;
}

.participant{
    grid-area: participant;
    float: right;
    display: none;
}

.msg-poll-active{
    display: none;
    background-color: #c1d9f7;
    color:#0c6fe7;
}

.result-container{
    display: none;
    text-align: left;
    font-size: 17px;
}

.bar{
    border: 0.5px solid #d1d1d1;
    border-radius: 5px;
    font-weight: normal;
    min-height: 50px;
    height: fit-content;
    margin-bottom: 10px;

    display: grid;

}

.percen-bar, .text-inside{
    grid-area: 1 / 1;
}

.text-inside{
    padding: 10px;
    display:grid;
    column-gap: 3%;
    grid-template-columns: auto 40px;
    grid-template-rows: auto;
    grid-template-areas:
        'opt_text percen_text'
    ;
}


.percen-bar{
    border: 0.5px solid #d1d1d1;
    border-radius: 5px;
    /* background-color: #3888EA; */
}

.opt_text{
    grid-area: opt_text;
    text-align: left;
}

.percen_text{
    grid-area: percen_text;
}

@media only screen and (max-width: 599px){
    .view-top-content{
        font-size: 1.2em;
    }
    
    .list_option{
        font-size: 1em;
    }

    .btn-submit{
        font-size: 1em;
    }

    .result-container{
        font-size: 1em;
    }

    .percen-bar .percen-bar-0 .btn-opt{
        height: 40px;
    }
}