.data-table {
    border-top: 3px solid #102d1e;
    border-bottom: 2px solid #102d1e !important;
}
ol > li, ul > li {
    font-family: sukhumvit;
    font-size: 16px;
}

.bg-confirmed {
    background-color: #fde1cd;
}
.bg-deaths {
    background-color: #fbd2ce;
}
.bg-recovered {
    background-color: #d7f0e6;
}
.bg-percent-confirmed {
    background-color: #fccaa8;
}
.bg-percent-deaths {
    background-color: #f8b0a9;
}
.bg-percent-recovered {
    background-color: #b9e4d3;
}

.total-data, .percentage-data {
    transition: opacity 5s ease-in-out;
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
    opacity: 1;
}
.data-invisible {
    display: none;
    transition: all 5s ease-in-out;
    -webkit-transition: all 5s ease-in-out;
    -moz-transition: all 5s ease-in-out;
    -ms-transition: all 5s ease-in-out;
    -o-transition: all 5s ease-in-out;
    opacity: 0;
}
.data-visible {
    display: block;
    transition: all 5s ease-in-out;
    -webkit-transition: all 5s ease-in-out;
    -moz-transition: all 5s ease-in-out;
    -ms-transition: all 5s ease-in-out;
    -o-transition: all 5s ease-in-out;
    opacity: 1;
}

.tr-active, .tr-active > td {
    background-color: #f0fbf7 !important;
} {
    background-color: #f0fbf7 !important;
}
.data-table, .data-table th, .data-table td {
    font-family: sukhumvit;
}
.data-table td {
    font-size: 1em;
    padding: 5px 10px !important;
}
.data-table th {
    font-size: 1.1em;
    background-color: #27956f1c;
    color: #102d1e;
    border-bottom: 1px solid #102d1e;
    padding: 15px 5px !important;
}
.datagraph-header {
    font-family: sukhumvit;
    font-size: 1.2em;
    line-height: 1.7;
    height: 2.5em;
}
.panel-piegraph {
    border: 1px solid #EFEFEF;
    border-top: 3px solid #102d1e;
    border-bottom: 2px solid #102d1e;
}
.panel-heading {
    font-family: sukhumvit;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 2.5;
    height: 3.5em;
    background-color: #27956f1c;
    color: #102d1e;
    border-bottom: 1px solid #102d1e;
}
tspan {
    font-family: sukhumvit;
    font-size: 0.8em;
}
.panel-body {
    font-size: 1em;
}
.map-world {
    height: 650px;
    background: #386664 url("https://s3-ap-southeast-1.amazonaws.com/thaipbs-coronavirus/coronavirus/wp-content/uploads/2020/03/16184417/banner_2.jpg") center center no-repeat;
    background-size: cover;
    padding: 0px;
}
.bg-highlight {
    background-color: #102d1e;
    padding: 10px;
    margin: 0px;
    border: 1px solid #7f7f7f;
}
.vc_row-has-fill>.vc_column_container>.vc_column-inner {
    padding-top: 0px;
}
.confirm {
    color: #98dedb;
    font-size: 2em;
    position: absolute;
    top: 40%;
    right: 28%;
}
.recovered {
    color: #98dedb;
    font-size: 2em;
    position: absolute;
    top: 54%;
    right: 28%;
}
.deaths {
    color: #98dedb;
    font-size: 2em;
    position: absolute;
    top: 68%;
    right: 28%;
}
.last_update {
    color: #a5bda5;
}
.box1_lastupdate {
    position: absolute;
    bottom: 3%;
    font-size: 1em;
    font-family: sukhumvit;
    left: 50%;
    transform: translateX(-50%);
    width: -webkit-fill-available;
}
.box2_lastupdate {
    position: absolute;
    bottom: 3%;
    font-size: 1em;
    font-family: sukhumvit;
    left: 50%;
    transform: translateX(-50%);
    width: -webkit-fill-available;
}
.box3_lastupdate {
    position: absolute;
    bottom: 3%;
    font-size: 1em;
    font-family: sukhumvit;
    left: 50%;
    transform: translateX(-50%);
    width: -webkit-fill-available;
}


.one_country {
    color: #cfd5d2;
    font-size: 1.1em;
    position: absolute;
    top: 43%;
    left: 13%;
    font-family: sukhumvit;
}
.two_country {
    color: #cfd5d2;
    font-size: 1.1em;
    position: absolute;
    top: 58%;
    left: 13%;
    font-family: sukhumvit;
}
.three_country {
    color: #cfd5d2;
    font-size: 1.1em;
    position: absolute;
    top: 72%;
    left: 13%;
    font-family: sukhumvit;
}
.one_data {
    color: #98dedb;
    font-size: 2em;
    position: absolute;
    top: 40%;
    right: 38%;
    font-family: sukhumvit;
}
.two_data {
    color: #98dedb;
    font-size: 2em;
    position: absolute;
    top: 54%;
    right: 38%;
    font-family: sukhumvit;
}
.three_data {
    color: #98dedb;
    font-size: 2em;
    position: absolute;
    top: 69%;
    right: 38%;
    font-family: sukhumvit;
}
.one_total {
    color: #98dedb;
    font-size: 1.5em;
    position: absolute;
    top: 42%;
    left: 70%;
    font-family: sukhumvit;
}
.two_total {
    color: #98dedb;
    font-size: 1.5em;
    position: absolute;
    top: 57%;
    left: 70%;
    font-family: sukhumvit;
}
.three_total {
    color: #98dedb;
    font-size: 1.5em;
    position: absolute;
    top: 71%;
    left: 70%;
    font-family: sukhumvit;
}

/*  BOX 3  */
.thai-total {
    color: #98dedb;
    font-size: 1.5em;
    position: absolute;
    top: 41.5%;
    right: 33%;
    font-family: sukhumvit;
}
.thai-today {
    color: #ed1200;
    font-size: 1.5em;
    position: absolute;
    top: 41.5%;
    right: 15%;
    font-family: sukhumvit;
}
.thai-goback {
    color: #98dedb;
    font-size: 1.5em;
    position: absolute;
    top: 65%;
    right: 68%;
    font-family: sukhumvit;
}
.thai-treat {
    color: #98dedb;
    font-size: 1.5em;
    position: absolute;
    top: 65%;
    right: 38%;
    font-family: sukhumvit;
}
.thai-deaths {
    color: #98dedb;
    font-size: 1.5em;
    position: absolute;
    top: 65%;
    right: 12%;
    font-family: sukhumvit;
}

/*  BOX 4  */
a.btn-other {
    color: #98dedb;
    position: absolute;
    bottom: 17%;
    border: 1px solid #76907b;
    font-family: sukhumvit;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 30px;
    border-radius: 50px;
}
a:hover.btn-other {
    background-color: #98dedb;
}

.tx-content p, .tx-content div {
    font-family: sukhumvit_settext !important;
    font-size: 1.6em !important;
    line-height: 1.7em !important;
}
.pd-y-50 {
    padding-left: 10px;
    padding-right: 10px;
}
.slick-arrow.arrow-left {
    left: 0px;
}
.slick-arrow.arrow-right {
    right: 0px;
}
.content p, .content ol li, .content div {
    font-family: sukhumvit !important;
}
/*.mfp-iframe-holder .mfp-content {*/
/*    line-height: 0;*/
/*    width: 480px !important;*/
/*    max-width: 480px !important;*/
/*    height: 480px !important;*/
/*}*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 320px) {

}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .map-world {
        height: 250px;
    }
    .bg-highlight {
        padding: 30px;
    }
    .one_country {
        font-size: 1.1em;
        top: 43%;
        left: 15%;
    }
    .two_country {
        font-size: 1.1em;
        top: 57%;
        left: 15%;
    }
    .three_country {
        font-size: 1.1em;
        top: 71%;
        left: 15%;
    }
    .one_data {
        font-size: 1.5em;
        top: 41%;
        right: 37%;
    }
    .two_data {
        font-size: 1.5em;
        top: 55%;
        right: 37%;
    }
    .three_data {
        font-size: 1.5em;
        top: 69%;
        right: 37%;
    }
    .one_total {
        font-size: 1.2em;
        top: 43%;
        left: 69%;
    }
    .two_total {
        font-size: 1.2em;
        top: 57%;
        left: 69%;
    }
    .three_total {
        font-size: 1.2em;
        top: 71%;
        left: 69%;
    }
    .confirm {
        font-size: 1.5em;
        top: 41%;
        right: 28%;
    }
    .recovered {
        font-size: 1.5em;
        top: 54.6%;
        right: 28%;
    }
    .deaths {
        font-size: 1.5em;
        top: 68.5%;
        right: 28%;
    }
}




/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) {
    .map-world {height: 395px;}
    .confirm {font-size: 3em;top: 40%;right: 28%;}
    .recovered {
        font-size: 3em;
        top: 57%;
        right: 28%;
    }
    .deaths {
        font-size: 3em;
        top: 75%;
        right: 28%;
    }
    .box1_lastupdate {
        font-size: 1.9em;
    }
    .one_country {
        font-size: 2em;
        top: 42%;
        left: 10%;
    }
    .two_country {
        font-size: 2em;
        top: 59%;
        left: 10%;
    }
    .three_country {
        font-size: 2em;
        top: 77%;
        left: 10%;
    }
    .one_data {
        font-size: 3em;
        top: 40%;
        right: 38%;
    }
    .two_data {
        font-size: 3em;
        top: 57%;
        right: 38%;
    }
    .three_data {
        font-size: 3em;
        top: 75%;
        right: 38%;
    }
    .one_total {
        font-size: 2em;
        top: 43%;
        left: 74%;
    }
    .two_total {
        font-size: 2em;
        top: 58%;
        left: 74%;
    }
    .three_total {
        font-size: 2em;
        top: 77%;
        left: 74%;
    }
    .box2_lastupdate {
        font-size: 1.9em;
    }

    /*  BOX 3  */
    .thai-total {
        font-size: 3em;
        top: 40%;
        right: 39%;
    }
    .thai-today {
        font-size: 2em;
        top: 43%;
        right: 17%;
    }
    .thai-goback {
        font-size: 3em;
        top: 70%;
        right: 77%;
    }
    .thai-treat {
        font-size: 3em;
        top: 70%;
        right: 50%;
    }
    .thai-deaths {
        font-size: 3em;
        top: 70%;
        right: 24%;
    }
    .box3_lastupdate {
        font-size: 1.9em;
    }
}

@media (min-width: 768px) {

    .navbar-collapse.collapse {
        display: inline !important;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .map-world {
        height: 450px;
    }
    .confirm {
        font-size: 2em;
        top: 39%;
        right: 28%;
    }
    .recovered {
        font-size: 2em;
        top: 55%;
        right: 28%;
    }
    .deaths {
        font-size: 2em;
        top: 72%;
        right: 28%;
    }
    .box1_lastupdate {
        font-size: 1em;
    }

    /* BOX 2  */
    .one_country {
        font-size: 1.2em;
        top: 42%;
        left: 10%;
    }
    .two_country {
        font-size: 1.2em;
        top: 58%;
        left: 10%;
    }
    .three_country {
        font-size: 1.2em;
        top: 75%;
        left: 10%;
    }
    .one_data {
        font-size: 2em;
        top: 39%;
        right: 38%;
    }
    .two_data {
        font-size: 2em;
        top: 56%;
        right: 38%;
    }
    .three_data {
        font-size: 2em;
        top: 73%;
        right: 38%;
    }
    .one_total {
        font-size: 1.4em;
        top: 42%;
        left: 74%;
    }
    .two_total {
        font-size: 1.4em;
        top: 59%;
        left: 74%;
    }
    .three_total {
        font-size: 1.4em;
        top: 76%;
        left: 74%;
    }
    .box2_lastupdate {
        font-size: 1.2em;
    }

    /*  BOX 3  */
    .thai-total {
        font-size: 2em;
        top: 39.6%;
        right: 31%;
    }
    .thai-today {
        font-size: 1.8em;
        top: 41%;
        right: 9%;
    }
    .thai-goback {
        font-size: 2em;
        top: 68%;
        right: 69%;
    }
    .thai-treat {
        font-size: 2em;
        top: 68%;
        right: 36%;
    }
    .thai-deaths {
        font-size: 2em;
        top: 68%;
        right: 6%;
    }
    .box3_lastupdate {
        font-size: 1.2em;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .pd-y-50 {
        padding-left: 50px;
        padding-right: 50px;
    }
    .confirm {
        font-size: 1.3em;
        top: 39%;
        right: 28%;
    }
    .recovered {
        font-size: 1.3em;
        top: 55%;
        right: 28%;
    }
    .deaths {
        font-size: 1.3em;
        top: 72%;
        right: 28%;
    }
    .box1_lastupdate {
        font-size: 1em;
        left: 48%;
    }

    /* BOX 2  */
    .one_country {
        font-size: 0.9em;
        top: 42%;
        left: 11%;
    }
    .two_country {
        font-size: 0.9em;
        top: 57%;
        left: 11%;
    }
    .three_country {
        font-size: 0.9em;
        top: 75%;
        left: 11%;
    }
    .one_data {
        font-size: 1.3em;
        top: 39%;
        right: 36%;
    }
    .two_data {
        font-size: 1.3em;
        top: 55%;
        right: 36%;
    }
    .three_data {
        font-size: 1.3em;
        top: 73%;
        right: 36%;
    }
    .one_total {
        font-size: 1em;
        top: 41%;
        left: 73%;
    }
    .two_total {
        font-size: 1em;
        top: 57%;
        left: 73%;
    }
    .three_total {
        font-size: 1em;
        top: 75%;
        left: 73%;
    }
    .box2_lastupdate {
        font-size: 1em;
    }


    /*  BOX 3  */
    .thai-total {
        font-size: 1.3em;
        top: 40%;
        right: 31%;
    }
    .thai-today {
        font-size: 1.3em;
        top: 40%;
        right: 10%;
    }
    .thai-goback {
        font-size: 1.3em;
        top: 66%;
        right: 68%;
    }
    .thai-treat {
        font-size: 1.3em;
        top: 66%;
        right: 35%;
    }
    .thai-deaths {
        font-size: 1.3em;
        top: 66%;
        right: 7%;
    }
    .box3_lastupdate {
        font-size: 1em;
    }
    a.btn-other {
        bottom: 12%;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .confirm {
        font-size: 1.5em;
        top: 39%;
        right: 28%;
    }
    .recovered {
        font-size: 1.5em;
        top: 56%;
        right: 28%;
    }
    .deaths {
        font-size: 1.5em;
        top: 72%;
        right: 28%;
    }
    .box1_lastupdate {
        font-size: 1em;
    }

    /* BOX 2  */
    .one_country {
        font-size: 1em;
        top: 42%;
        left: 12%;
    }
    .two_country {
        font-size: 1em;
        top: 58%;
        left: 12%;
    }
    .three_country {
        font-size: 1em;
        top: 75%;
        left: 12%;
    }
    .one_data {
        font-size: 1.5em;
        top: 39%;
        right: 38%;
    }
    .two_data {
        font-size: 1.5em;
        top: 55%;
        right: 38%;
    }
    .three_data {
        font-size: 1.5em;
        top: 72%;
        right: 38%;
    }
    .one_total {
        font-size: 1em;
        top: 42%;
        left: 73%;
    }
    .two_total {
        font-size: 1em;
        top: 59%;
        left: 73%;
    }
    .three_total {
        font-size: 1em;
        top: 76%;
        left: 73%;
    }
    .box2_lastupdate {
        font-size: 1em;
    }


    /*  BOX 3  */
    .thai-total {
        font-size: 1.5em;
        top: 40%;
        right: 31%;
    }
    .thai-today {
        font-size: 1.5em;
        top: 40%;
        right: 14%;
    }
    .thai-goback {
        font-size: 1.5em;
        top: 67%;
        right: 70%;
    }
    .thai-treat {
        font-size: 1.5em;
        top: 67%;
        right: 37%;
    }
    .thai-deaths {
        font-size: 1.5em;
        top: 67%;
        right: 9%;
    }
    .box3_lastupdate {
        font-size: 1em;
    }
    a.btn-other {
        bottom: 17%;
    }

}

@media only screen and (min-width: 1440px) {

    .confirm {
        font-size: 1.8em;
        top: 39%;
        right: 28%;
    }
    .recovered {
        font-size: 1.8em;
        top: 56%;
        right: 28%;
    }
    .deaths {
        font-size: 1.8em;
        top: 72%;
        right: 28%;
    }
    .box1_lastupdate {
        font-size: 1em;
    }

    /* BOX 2  */
    .one_country {
        font-size: 1.2em;
        top: 42%;
        left: 10%;
    }
    .two_country {
        font-size: 1.2em;
        top: 57%;
        left: 10%;
    }
    .three_country {
        font-size: 1.2em;
        top: 74%;
        left: 10%;
    }
    .one_data {
        font-size: 1.8em;
        top: 39%;
        right: 35%;
    }
    .two_data {
        font-size: 1.8em;
        top: 55%;
        right: 35%;
    }
    .three_data {
        font-size: 1.8em;
        top: 72%;
        right: 35%;
    }
    .one_total {
        font-size: 1.2em;
        top: 42%;
        left: 72%;
    }
    .two_total {
        font-size: 1.3em;
        top: 57%;
        left: 73%;
    }
    .three_total {
        font-size: 1.3em;
        top: 75%;
        left: 73%;
    }
    .box2_lastupdate {
        font-size: 1em;
    }


    /*  BOX 3  */
    .thai-total {
        font-size: 1.4em;
        top: 41%;
        right: 32%;
    }
    .thai-today {
        font-size: 1.4em;
        top: 41%;
        right: 34px;
    }
    .thai-goback {
        font-size: 1.6em;
        top: 70%;
        right: 69%;
    }
    .thai-treat {
        font-size: 1.6em;
        top: 70%;
        right: 35%;
    }
    .thai-deaths {
        font-size: 1.6em;
        top: 70%;
        right: 6%;
    }
    .box3_lastupdate {
        font-size: 1em;
    }

}

@media only screen and (min-width: 1800px) {
    .map-world {
        height: 650px;
    }
    .confirm {
        font-size: 2.5em;
        top: 39%;
        right: 28%;
    }
    .recovered {
        font-size: 2.5em;
        top: 56%;
        right: 28%;
    }
    .deaths {
        font-size: 2.5em;
        top: 73%;
        right: 28%;
    }
    .box1_lastupdate {
        font-size: 1.4em;
    }

    /* BOX 2  */
    .one_country {
        font-size: 1.4em;
        top: 42%;
        left: 10%;
    }
    .two_country {
        font-size: 1.4em;
        top: 58%;
        left: 10%;
    }
    .three_country {
        font-size: 1.4em;
        top: 75%;
        left: 10%;
    }
    .one_data {
        font-size: 2.5em;
        top: 38%;
        right: 35%;
    }
    .two_data {
        font-size: 2.5em;
        top: 55%;
        right: 35%;
    }
    .three_data {
        font-size: 2.5em;
        top: 71%;
        right: 35%;
    }
    .one_total {
        font-size: 1.6em;
        top: 42%;
        left: 73%;
    }
    .two_total {
        font-size: 1.6em;
        top: 58%;
        left: 73%;
    }
    .three_total {
        font-size: 1.6em;
        top: 75%;
        left: 73%;
    }
    .box2_lastupdate {
        font-size: 1.4em;
    }

    /*  BOX 3  */
    .thai-total {
        font-size: 2em;
        top: 40%;
        right: 30%;
    }
    .thai-today {
        font-size: 1.6em;
        top: 42%;
        right: 13%;
    }
    .thai-goback {
        font-size: 2.5em;
        top: 68%;
        right: 69%;
    }
    .thai-treat {
        font-size: 2.5em;
        top: 68%;
        right: 36%;
    }
    .thai-deaths {
        font-size: 2.5em;
        top: 68%;
        right: 8%;
    }
    .box3_lastupdate {
        font-size: 1.4em;
    }

}

@media only screen and (min-width: 2500px) {
    a.btn-other {
        font-size: 2em;
    }
    .map-world {
        height: 950px;
    }
    .confirm {
        font-size: 3.5em;
        top: 39%;
        right: 28%;
    }
    .recovered {
        font-size: 3.5em;
        top: 56%;
        right: 28%;
    }
    .deaths {
        font-size: 3.5em;
        top: 73%;
        right: 28%;
    }
    .box1_lastupdate {
        font-size: 2em;
    }

    /* BOX 2  */
    .one_country {
        font-size: 2em;
        top: 42%;
        left: 9%;
    }
    .two_country {
        font-size: 2em;
        top: 59%;
        left: 9%;
    }
    .three_country {
        font-size: 2em;
        top: 76%;
        left: 9%;
    }
    .one_data {
        font-size: 3.5em;
        top: 38%;
        right: 38%;
    }
    .two_data {
        font-size: 3.5em;
        top: 56%;
        right: 38%;
    }
    .three_data {
        font-size: 3.5em;
        top: 72%;
        right: 38%;
    }
    .one_total {
        font-size: 2.5em;
        top: 41%;
        left: 73%;
    }
    .two_total {
        font-size: 2.5em;
        top: 59%;
        left: 73%;
    }
    .three_total {
        font-size: 2.5em;
        top: 75%;
        left: 73%;
    }
    .box2_lastupdate {
        font-size: 2em;
    }

    /*  BOX 3  */
    .thai-total {
        font-size: 3.5em;
        top: 38.5%;
        right: 30%;
    }
    .thai-today {
        font-size: 3.5em;
        top: 38.5%;
        right: 7%;
    }
    .thai-goback {
        font-size: 3.5em;
        top: 69%;
        right: 69%;
    }
    .thai-treat {
        font-size: 3.5em;
        top: 69%;
        right: 34%;
    }
    .thai-deaths {
        font-size: 3.5em;
        top: 69%;
        right: 5%;
    }
    .box3_lastupdate {
        font-size: 2em;
    }

}