.grid-row {
    display: grid;
    grid-template-columns: repeat(0, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 1px;
    grid-row-gap: 0px;
}

.row1 {
    grid-area: 1 / 1 / 2 / 2;
}

.row2 {
    grid-area: 1 / 2 / 2 / 3;
}

.row3 {
    grid-area: 1 / 3 / 2 / 4;
}


/***************grid-Col**********************************/
.co1 {
    grid-area: 1 / 1 / 2 / 2;
}

.co2 {
    grid-area: 2 / 1 / 3 / 2;
}

.co3 {
    grid-area: 3 / 1 / 4 / 2;
}

.co4 {
    grid-area: 4 / 1 / 5 / 2;
}


/***************grid-Col-Table**********************************/
.grid-col {
    max-width: 985px;
    margin: 0 auto;
    display: grid;
    gap: 0;
}

@media (min-width: 600px) {
    .grid-col {
        grid-template-columns: repeat(1, 1fr);
    }
}

.grid-col-detail {
    max-width: 700px;
    margin: 0 auto;
    display: grid;
    gap: 0;
}

@media (min-width: 600px) {
    .grid-col-detail {
        grid-template-columns: repeat(1, 1fr);
    }
}


.grid-col-vote {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    gap: 0;
}

@media (min-width: 600px) {
    .grid-col-vote {
        grid-template-columns: repeat(1, 1fr);
    }
}
/*กริดของมุก*/

.container3 {
    height: auto;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}

.grid-row-1 {
    display: grid;
    width: 100%;
    grid-template-columns: 100%;
    grid-template-rows: 60px;
    padding: 2px;
    gap: 5px;
    text-align: center;
    align-items: center;
}

.grid-row-1-1 {
    display: grid;
    width: 100%;
    grid-template-columns: 7% 15% 60% 18%;
    grid-template-rows: 60px;
    padding: 2px;
    gap: 5px;
    text-align: center;
    align-items: center;
}

.grid-row-2 {
    display: grid;
    width: 100%;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 60px;
    padding: 2px;
    gap: 5px;
    text-align: center;
    align-items: center;
}

.grid-col7 {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    gap: 2px;
}

@media (min-width: 200px) {
    .grid-col7 {
        grid-template-columns: repeat(1, 1fr);
    }
}

.grid-col1 {
    max-width: 1309px;
    margin: 0 auto;
    display: grid;
    gap: 2px;
}

@media (min-width: 200px) {
    .grid-col1 {
        grid-template-columns: repeat(6, 1fr);
        
        
    }
}

.grid-modal {
    max-width: 600px;
    margin: 0 auto;
    display: grid;
    gap: 2px;
}

@media (min-width: 200px) {
    .grid-modal {
        grid-template-columns: 20% 80%;
    }
}

.grid-col2 {
    /*max-width: 1394px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col2 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.grid-col10 {
    /*max-width: 1394px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col10 {
        grid-template-columns: 60% 25% 15%;
    }
}

.grid-col10-2 {
    /*max-width: 1394px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col10-2 {
        grid-template-columns: 55% 10% 35%;
    }
}

.grid-col10-3 {
    /*max-width: 1394px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col10-3 {
        grid-template-columns: 61% 5% 29% 5%;
    }
}

.grid-col11 {
    /*max-width: 1394px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col11 {
        grid-template-columns: 10% 40% 40% 10%;
    }
}

.grid-coll2 {
    /*max-width: 1412px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-coll2 {
        grid-template-columns: repeat(1, 1fr);
    }
}


.grid-col3 {
    max-width: 400px;
    margin: 0 auto;
    display: grid;
    height: 44px;
    width: 95%;
}

@media (min-width: 600px) {
    .grid-col3 {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 55px;
    }
}

.grid-col4 {
    /*max-width: 1400px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col4 {
        grid-template-columns: repeat(1, 1fr);
    }
}


.grid-col4-5 {
    max-width: 1030px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col4-5 {
        grid-template-columns: repeat(1, 1fr);
    }
}


.grid-col4-4 {
    max-width: 978px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col4-4 {
        grid-template-columns: repeat(1, 1fr);
    }
}


.grid-col5 {
    /*max-width: 1400px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col5 {
        grid-template-columns: 30% 34% 6% 6% 6%;
        grid-template-rows: 28px;
        gap: 2px;
    }
}

.grid-col6 {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    gap: 2px;
}

@media (min-width: 600px) {
    .grid-col6 {
        grid-template-columns: 25% 25% 25% 25%;
        gap : 2px;
    }
}


.grid-col8 {
    max-width: 1309px;
    margin: 0 auto;
    display: grid;
    gap: 2px;
}

@media (min-width: 200px) {
    .grid-col8 {
        grid-template-columns: repeat(5, 1fr);
    }
}

.grid-col9 {
    max-width: 1309px;
    margin: 0 auto;
    display: grid;
    gap: 2px;
}

@media (min-width: 200px) {
    .grid-col8 {
        grid-template-columns: 25%% 25% 25% 25%;
    }
}

.grid-col13 {
    /*max-width: 1400px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col13 {
        grid-template-columns: 30% 34% 6% 6% 6%;
        grid-template-rows: 28px;
        gap: 2px;
    }
}


.grid-col-1 {
    max-width: 200px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col-1 {
        grid-template-columns: 75% 25%;
    }
}

.grid-col-2 {
    /*max-width: 1200px;*/
    /*margin: 0 auto;*/
    display: grid;
   
}

@media (min-width: 600px) {
    .grid-col-2 {
        grid-template-columns: 18% 11% 14% 10% 14% 7% 12%;
    }
}

.grid-col-2-2 {
    /*max-width: 1200px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col-2-2 {
        grid-template-columns: 13% 16% 6% 17% 6% 12% 5% 9% 4%;
    }
}

.grid-col-2-3 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col-2-3 {
        grid-template-columns: 33% 7% 10% 15% 5%;
    }
}


.grid-col-3 {
    /*max-width: 1200px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col-3 {
        grid-template-columns: repeat(1, 1fr);
    }
}
.grid-col-4 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col-4 {
        grid-template-columns: 31% 13% 21% 19%  16%;
    }
}

.grid-col-5 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col-5 {
        grid-template-columns: 51% 14% 14% 19%;
    }
}

.grid-col-6 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 600px) {
    .grid-col-6 {
        grid-template-columns: 18% 11% 21% 14% 22% 9%;
    }
}

.grid-col-7 {
    max-width: 495px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 100px) {
    .grid-col-7 {
        grid-template-columns: 13% 14% 13% 14% 24% 15%;
        justify-content: center;
    }
}

.grid-col-7-2 {
    max-width: 495px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 100px) {
    .grid-col-7-2 {
        grid-template-columns: 13% 14% 13% 14% 13% 14% 24% 15%;
        justify-content: center;
    }
}

.grid-col-8 {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 100px) {
    .grid-col-8 {
        grid-template-columns: 15% 10% 15% 8% 12% 8% 10% 10%;
        justify-content: center;
    }
}

.grid-col-9 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 900px) {
    .grid-col-9 {
        grid-template-columns: 15% 12% 11% 12% 10% 11% 10% 6% 10%;
    }
}

.grid-col-9-2 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 900px) {
    .grid-col-9-2 {
        grid-template-columns: 13% 8% 8% 7% 8% 8% 11% 7% 10% 8% 6% 7%;
    }
}


.grid-col-10 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 500px) {
    .grid-col-10 {
        grid-template-columns: 12% 6% 12% 6% 10% 6% 8% 8% 23% 9%;
        
    }
}

.grid-col-10-full {
    max-width: auto;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 500px) {
    .grid-col-10-full {
       /* grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;*/
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

.grid-col-11 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 500px) {
    .grid-col-12 {
        grid-template-columns: repeat(1, 1fr);
    }
}


.grid-col-12 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 500px) {
    .grid-col-11 {
        grid-template-columns: 70% 30%;
    }
}


.grid-col-13 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 900px) {
    .grid-col-13 {
        grid-template-columns:10% 20% 20% 20% 20% 10%;
    }
}

.grid-col-14 {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 900px) {
    .grid-col-14 {
        grid-template-columns: 16% 6% 18% 8% 6% 22% 23%;
    }
}

/*/****grid-column*******************************************************************************/

.grid-column1 {
    grid-column: 1;
}

.grid-column2 {
    grid-column: 2;
}

.grid-column3 {
    grid-column: 3;
}

.grid-column4 {
    grid-column: 4;
}

.grid-column5 {
    grid-column: 5;
}

.grid-column6 {
    grid-column: 6;
}

.grid-column7 {
    grid-column: 7;
}

.grid-column8 {
    grid-column: 8;
}

.grid-column9 {
    grid-column: 9;
}

.grid-column10 {
    grid-column: 10;
}


/***************grid-Col-row **********************************/

.grid-Col-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.grid-col-row-2-2 {
    display: grid;
    grid-template-columns: 49% 12% 11% 14% 13%;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.Col-row-1 {
    grid-area: 1 / 1 / 2 / 2;
}

.Col-row-2 {
    grid-area: 1 / 2 / 2 / 3;
}

.Col-row-3 {
    grid-area: 1 / 3 / 2 / 4;
}

.Col-row-4 {
    grid-area: 1 / 4 / 2 / 5;
}

.Col-row-5 {
    grid-area: 1 / 5 / 2 / 6;
}




/*
************************************************ Dasgboard *************************************/

.dash-grid {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

@media (min-width: 600px) {
    .dash-grid {
        grid-template-columns: 5% 65% 25% 5%;
    }
}



/****************************************** Index **************************************************/


.grid-index {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    padding: 1px;
    gap: 1px;
}

@media (min-width: 900px) {
    .grid-index{
        grid-template-columns: repeat(1, 1fr);
        /*grid-template-rows: auto;*/
    }
}


.grid-index-1 {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    padding: 1px;
    gap: 1px;
}

@media (min-width: 900px) {
    .grid-index-1 {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 210px;
    }
}



.Hgrid-row-3 {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    padding: 1px;
    gap: 1px;
}

@media (min-width: 900px) {
    .Hgrid-row-3 {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 46px;
    }
}




.menu {
    background-color: dodgerblue;
    color: white;
    padding: 1rem;
    height: 4rem;
}

bodyitem {
    padding: 1rem;
}



/********************************************* New grid ***********************************/
.card {
    /*background-color: dodgerblue;*/
    color: white;
    padding: 0.5rem;
    height: 15rem;
}

@media (min-width: 350px) {
    .card {
        height: 10rem;
        gap: 0rem;
    }
}


@media (min-width: 600px) {
    .card {
        height: 8rem;
        gap: 0rem;
    }
}

@media (min-width: 900px) {
    .card {
        height: 10rem;
        gap: 0rem;
    }
}




.cards {
    /*max-width: 1200px;*/
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}
@media (min-width: 320px) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 0rem;
    }
}


@media (min-width: 600px) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 0rem;
    }
}

@media (min-width: 900px) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 0rem;
    }
}

/********************************************* Grid for Election result page ***********************************/

.card2 {
    /*background-color: dodgerblue;*/
    color: white;
    padding: 0.5rem;
    height: 15rem;
}

@media (min-width: 350px) {
    .card2 {
        height: 10rem;
        gap: 0rem;
    }
}


@media (min-width: 600px) {
    .card2 {
        height: 8rem;
        gap: 0rem;
    }
}

@media (min-width: 100px) {
    .card2 {
        height: 30rem;
        gap: 0rem;
    }
}




.cards2 {
    max-width: 1430px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

@media (min-width: 320px) {
    .cards2 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}


@media (min-width: 600px) {
    .cards2 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}

@media (min-width: 900px) {
    .cards2 {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows : auto;
        gap: 2rem;
    }
}
@media (min-width: 1430px) {
    .cards2 {
        grid-template-columns: 5fr 2fr;
        gap: 0rem;
    }
}


.grid-detail {
    max-width: 600px;
    margin: 0 auto;
    display: grid;
    gap: 2px;
}

@media (min-width: 200px) {
    .grid-detail {
        grid-template-columns: repeat(1, 1fr);
    }
}



.merge1-2 {
    grid-column: 1 / 3;
}


.cards3 {
    /*max-width: 1430px;*/
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

@media (min-width: 320px) {
    .cards3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0rem;
    }
}


@media (min-width: 980px) {
    .cards3 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows : auto;
        gap: 0rem;
    }
}

@media (min-width: 1430px) {
    .cards3 {
        grid-template-columns: repeat(6, 1fr);
        gap: 0rem;
        grid-template-rows: 10rem;
    }
}





/***************************** Grid for table menu *******************************/
.card5 {
    /*background-color: dodgerblue;*/
    color: white;
    padding: 0.5rem;
    height: 15rem;
}

@media (min-width: 350px) {
    .card5 {
        height: 10rem;
        gap: 0rem;
    }
}


@media (min-width: 600px) {
    .card5 {
        height: 8rem;
        gap: 0rem;
    }
}

@media (min-width: 900px) {
    .card5 {
        height: 30rem;
        gap: 0rem;
    }
}



.cards5 {
    /*max-width: 1400px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 350px) {
    .cards5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0rem;
    }
}


@media (min-width: 900px) {
    .cards5 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}

@media (min-width: 1400px) {
    .cards5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0rem;
    }
}

/***************************** Grid for table menu 2 *******************************/



.card6 {
    /*background-color: dodgerblue;*/
    color: white;
    padding: 0.5rem;
    height: 15rem;
}

@media (min-width: 350px) {
    .card6 {
        height: 10rem;
        gap: 0rem;
    }
}


@media (min-width: 600px) {
    .card6 {
        height: 8rem;
        gap: 0rem;
    }
}

@media (min-width: 900px) {
    .card6 {
        height: 30rem;
        gap: 0rem;
    }
}



.cards6 {
    /*max-width: 1400px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 350px) {
    .cards6 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}


@media (min-width: 900px) {
    .cards6 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}

@media (min-width: 1400px) {
    .cards6 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}


/***************************** Grid for table menu 3 *******************************/

.card8 {
    /*background-color: dodgerblue;*/
    color: white;
    padding: 0.5rem;
    height: 15rem;
}

@media (min-width: 350px) {
    .card8 {
        height: 10rem;
        gap: 0rem;
    }
}


@media (min-width: 600px) {
    .card8 {
        height: 8rem;
        gap: 0rem;
    }
}

@media (min-width: 900px) {
    .card8 {
        height: 30rem;
        gap: 0rem;
    }
}

.cards8 {
    /*max-width: 1400px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 350px) {
    .cards8 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}


@media (min-width: 900px) {
    .cards8 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}

@media (min-width: 1400px) {
    .cards8 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}

.card7 {
    /*background-color: dodgerblue;*/
    color: white;
    padding: 0.5rem;
    height: 15rem;
}

@media (min-width: 350px) {
    .card7 {
        height: 10rem;
        gap: 0rem;
    }
}


@media (min-width: 600px) {
    .card7 {
        height: 8rem;
        gap: 0rem;
    }
}

@media (min-width: 900px) {
    .card7 {
        height: 30rem;
        gap: 0rem;
    }
}



.cards7 {
    /*max-width: 1400px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 350px) {
    .cards7 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0rem;
    }
}


@media (min-width: 900px) {
    .cards7 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}

@media (min-width: 1400px) {
    .cards7 {
        grid-template-columns:  45% 55%;
        gap: 0rem;
    }
}

.cards10 {
    /*max-width: 1400px;*/
    margin: 0 auto;
    display: grid;
}

@media (min-width: 350px) {
    .cards10{
        grid-template-columns: repeat(3, 1fr);
        gap: 0rem;
    }
}


@media (min-width: 900px) {
    .cards10 {
        grid-template-columns: repeat(3, 1fr);
        gap: 0rem;
    }
}

@media (min-width: 1400px) {
    .cards10 {
        grid-template-columns: repeat(3, 1fr);
        gap: 0rem;
    }
}


/***************************** Grid for  Election Result*******************************/
.card5 {
    /*background-color: dodgerblue;*/
    color: white;
    padding: 0.5rem;
    height: 15rem;
}
.card10 {
    /*background-color: dodgerblue;*/
    color: white;
    padding: 0.5rem;
    height: 8rem;
}

@media (min-width: 350px) {
    .card9 {
        height: 8rem;
        gap: 0rem;
    }
}


@media (min-width: 600px) {
    .card9 {
        height: 8rem;
        gap: 0rem;
    }
}

@media (min-width: 900px) {
    .card9 {
        height: 8rem;
        gap: 0rem;
    }
}



.cards9 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 350px) {
    .cards9 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}


@media (min-width: 900px) {
    .cards9 {
        grid-template-columns: repeat(3, 1fr);
        gap: 0rem;
    }
}

@media (min-width: 1200px) {
    .cards9 {
        grid-template-columns: repeat(3, 1fr);
        gap: 4rem;
    }
}




/************* for modal **************************/



.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    border-radius: 20px 20px 20px 20px
}

modal-form {
    height: auto;
    display: grid;
    background: #f8f8ff;
    border: 0px solid #c1c1c1;
    margin: 0rem auto 0 auto;
    max-width: 95%;
    align-items: center;
}



.modal-footer {
    padding: 2px 16px;
    background-color: #143b65;
    height: 4rem;
    border-radius: 0px 0px 10px 10px;
    justify-content: center;
}

.modal-header {
    padding: 5px;
    background-color: #143b65;
    /*height: 4rem;*/
    justify-content: center;
    border-radius: 10px 10px 0px 0px;
}

.modal-input {
    display: block;
    width: 75%;
    margin-top: 10px;
    border-radius: 5px;
    font-family: sans-serif;
    border: 1px solid #9c9c9c;
    height: 35px;
    padding:5px;
}

modal-input {
    padding: 0.7em;
    margin-bottom: 0.5rem;
}

    modal-input:focus {
        outline: 3px solid gold;
        border-color:red;
    }


@media (min-width: 400px) {
    modal-form {
        grid-template-columns: 8rem 1fr;
        grid-gap: 3px;
    }

    modal-label {
        text-align: right;
        grid-column: 1 / 2;
    }

    modal-input,
    modal-button {
        grid-column: 2 / 3;
    }
}

.modal-body {
    padding: 19px 5px;
}



/*////////////////////////////////////////////////////////////*/
.grid-col {
    max-width: 100vw;
    margin: 0 auto;
    display: grid;
    gap: 0;
}

@media (min-width: 600px) {
    .grid-col {
        grid-template-columns: repeat(1, 1fr);
    }
}

.grid-col-box {
    max-width: 30vw;
    margin: 0 auto;
    display: grid;
    gap: 0;
}

@media (min-width: 600px) {
    .grid-col-box {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 350px) {
    .grid-col-box {
        grid-template-columns: repeat(1, 1fr);
    }
}





.cards9 {
    max-width: 35rem;
    margin: 0 auto;
    display: grid;
}

@media (min-width: 350px) {
    .cards9 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}


@media (min-width: 900px) {
    .cards9 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}

@media (min-width: 1400px) {
    .cards9 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
}


.card9 {
    height: auto;
    /*background-color: dodgerblue;*/
    padding: 0.5rem;
}

@media (min-width: 350px) {
    .card9 {
        height: auto;
        gap: 0rem;
    }
}


@media (min-width: 600px) {
    .card9 {
        height: auto;
        gap: 0rem;
    }
}

@media (min-width: 900px) {
    .card9 {
        height: auto;
        gap: 0rem;
    }
}









/*
 * PROGRESS BAR
 */





span {
    /*font-weight: 500;*/
    color: #777;
    font-size: 12px;
    padding: 3px
}

.info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

/*span {
    font-weight: 500;
    color: #777;
    font-size: 12px;
    padding:3px
}
*/

.bar {
    margin-top: 10px;
    width: 80%;
    height: 7px;
    border-radius: 45px;
    background-color: #4d94fe3d;
    overflow: hidden;
}

.progress {
    width: 0%;
    height: 100%;
    background-color: #4d94fe;
    position: relative;
    border-radius: 45px;
    transition: 220ms;
}