body {
    margin: unset;
    font-family: sans-serif;
    letter-spacing: .02em;
}

/* Nav Bar (starts) */
#navbar {
    text-align: center;
    padding: 10px 0 5px 0;
    color: #212121;
    border-bottom: 1px solid gray;
}

#n-title {
    font-size: 28px;
    font-weight: 700;
}

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
    z-index: 100;
    background-color: white;
    border-bottom: 1px solid gray !important;
} 

/* Nav Bar (ends) */

/* Language Dropdown (starts) */
#screen-l-d {
    position: relative;
    float: right;
    padding-right: 10px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 700;
    margin: calc((28px - 16px)/2) 0;
}

.dropdown-content {
    padding: 10px 0px;
    min-width: 100px;
    text-overflow: ellipsis;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 600;
    z-index: 1;
    position: absolute;
    background-color: white;
    top: 35px;
    right: 10px;
    display: none;
    border: 2px solid darkgray;
    border-radius: 7px;
    color: #494949;
}

.dc-item {
    padding: 5px 10px;
    cursor: pointer;
    text-overflow: ellipsis;
}

.dc-item:hover {
    background-color: #f2f2f2;
}

/* Language Dropdown (ends) */

#main-content {
    margin: 20px;
}

/* Section1 (starts) */
#section-1 {
    display: flex;
    margin-bottom: 20px;
}

#confirmed,
#active,
#recovered,
#deceased {
    flex: 1;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}

#confirmed {
    color: #ff073a;
    background-color: rgb(255, 230, 235);
    margin-right: 5px;
}

#active {
    color: #007bff;
    background-color: rgb(239, 247, 255);
    margin-right: 5px;
}

#recovered {
    color: #28a745;
    background-color: rgb(228, 244, 232);
    margin-right: 5px;
}

#deceased {
    color: #6c757d;
    background-color: rgb(246, 246, 247);
}

#c-header,
#a-header,
#r-header,
#d-header {
    margin-bottom: 10px;
}

#c-header .title,
#a-header .title,
#r-header .title,
#d-header .title {
    font-size: 16px;
    font-weight: 700;
}

#c-content .t_count,
#a-content .t_count,
#r-content .t_count,
#d-content .t_count {
    font-size: 22px;
    font-weight: 700;
    display: block;
}

#c-content .i_count,
#a-content .i_count,
#r-content .i_count,
#d-content .i_count {
    font-size: 14px;
    font-weight: 700;
    display: block;
}

/* Section1 (ends) */

/* Section2 (starts) */
#section-2 {
    margin-bottom: 20px;
}

#perc-info-0 {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
}

#perc-info-1 {
    margin-bottom: 10px;
    display: none;
}

#perc-info-2 {
    /* margin-bottom: 20px; */
    display: none;
}

#active-rate,
#recovery-rate,
#mortality-rate,
#avg-growth-rate {
    padding: 10px;
    border-radius: 7px;
    flex: 1;
}

#active-rate {
    background-color: rgb(239, 247, 255);
    margin-right: 5px;
    font-weight: 700;
}

#active-rate div:nth-child(1) {
    font-size: 14px;
    color: #017cff;
    margin-bottom: 5px;
}

#active-rate div:nth-child(2) {
    font-size: 18px;
    color: #017cff;
    margin-bottom: 10px;
}

#active-rate div:nth-child(3) {
    font-size: 13px;
    color: #017cff;
}

#recovery-rate {
    background-color: rgb(228, 244, 232);
    font-weight: 700;
    margin-right: 5px;
}

#recovery-rate div:nth-child(1) {
    font-size: 14px;
    color: #29a746;
    margin-bottom: 5px;
}

#recovery-rate div:nth-child(2) {
    font-size: 18px;
    color: #29a746;
    margin-bottom: 10px;
}

#recovery-rate div:nth-child(3) {
    font-size: 13px;
    color: #29a746;
}

#mortality-rate {
    background-color: rgb(246, 246, 247);
    margin-right: 5px;
    font-weight: 700;
}


#mortality-rate div:nth-child(1) {
    font-size: 14px;
    color: #6d767e;
    margin-bottom: 5px;
}

#mortality-rate div:nth-child(2) {
    font-size: 18px;
    color: #6d767e;
    margin-bottom: 10px;
}

#mortality-rate div:nth-child(3) {
    font-size: 13px;
    color: #6d767e;
}

#avg-growth-rate {
    background-color: #f8f2ed;
    font-weight: 700;
}

#avg-growth-rate div:nth-child(1) {
    font-size: 14px;
    color: #b88448;
    margin-bottom: 5px;
}

#avg-growth-rate div:nth-child(2) {
    font-size: 18px;
    color: #b88448;
}

#avg-growth-rate div:nth-child(3) {
    font-size: 12px;
    color: #b88448;
    margin-bottom: 10px;
}

#avg-growth-rate div:nth-child(4) {
    font-size: 13px;
    color: #b88448;
}

/* Section2 (ends) */

/* Section3 (starts) */

#section-3{
    margin-bottom: 20px;
}

#dcg-confirmed,
#dcg-active,
#dcg-recovered {
    margin-bottom: 10px;
    height: auto;
    width: auto;
}

#dcg-deceased{
    height: auto;
    width: auto;
}
/* Section3 (ends) */

/* Graph Filter Section (starts) */
#graphFilters {
    margin-bottom: 10px;
}

#graphFilters div:nth-child(1) {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
}

#g-filter {
    display: flex;
}

#g-district-filter {
    cursor: pointer;
}

#g-district-filter select {
    height: 35px;
    font-size: 16px;
    cursor: pointer;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-family: sans-serif;
    font-weight: 700;
    padding: 0 0 0 5px;
}

#g-district-filter select option {
    font-size: 14px;
    font-family: sans-serif;
}

#g-date-filter {
    background-color: #fdfbfb;
    color: black;
    margin-left: 10px;
    display: flex;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-weight: 700;
}

#g-date-filter span {
    padding: 5px;
    cursor: pointer;
}

#g-date-filter span:nth-child(1) {
    border-right: 1px solid #ccc;
}

#g-date-filter span:nth-child(2) {
    border-right: 1px solid #ccc;
}

.active-df {
    background-color: #55f776;
    color: #212121;
}

/* Graph Filter Section (ends) */

/* Section4 (starts) */

#s4-header{
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

#section-4{
    margin-bottom: 20px;
}

#dataTableContainer {
    font-size: initial;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: unset;
}

thead th {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd !important;
}

tbody td {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd !important;
}

thead th:first-child {
    border-left: 1px solid #ddd;
}

tbody td:first-child {
    border-left: 1px solid #ddd;
}

.dataTables_wrapper .dataTables_filter input {
    margin-bottom: 10px !important;
    padding: 3px 5px 3px 7px;
    border: 2px solid #ccc;
    border-radius: 5px;
}

/* Section4 (ends) */

/* Footer (starts) */
#footer {
    background-color: #212121;
    font-weight: 600;
    padding: 10px 0 10px 0;
}

#footer #source {
    width: 220px;
    padding: 10px;
    margin: 0 auto;
    background-color: #dcdcdc;
    color: #212121;
    border-radius: 5px;
}

#footer #contact-info {
    margin-top: 10px;
    color: #dcdcdc;
    display: flow-root;
    padding: 0 15px 0 0;
}

#footer #contact-info div:nth-child(1){
    float: right;
    font-size: 14px;
}

#footer #contact-info div:nth-child(1):hover{
    text-decoration: underline;
}

#footer #source div:nth-child(1){
    font-size: 16px;
}

#footer #source div:nth-child(2){
    font-size: 14px;
}

#footer #source div:nth-child(2) img {
    vertical-align: middle;
    margin-right: 5px;
}

#footer #source div:nth-child(2):hover {
    text-decoration: underline;
}

#developer-info {
    padding: 10px;
    /* min-width: 100px; */
    /* text-overflow: ellipsis; */
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 600;
    z-index: 1;
    position: absolute;
    background-color: white;
    bottom: 100px;
    /* margin: 100px auto; */
    /* right: 10px; */
    display: none;
    border: 2px solid darkgray;
    border-radius: 5px;
    color: #494949;
}

/* Footer (ends) */

/* Media Quries (starts) */

@media (max-width: 800px) {

    #dataTableContainer {
        font-size: 14px !important;
    }

    #c-header .title,
    #a-header .title,
    #r-header .title,
    #d-header .title {
        font-size: 14px;
    }

    #c-content .t_count,
    #a-content .t_count,
    #r-content .t_count,
    #d-content .t_count {
        font-size: 20px;
    }

    #c-content .i_count,
    #a-content .i_count,
    #r-content .i_count,
    #d-content .i_count {
        font-size: 12px;
    }

    #g-district-filter select {
        font-size: 14px;
        height: 33px;
    }
    
    #g-date-filter {
        font-size: 14px;
    }

}

@media (max-width: 650px) {

    #n-title {
        font-size: 24px;
    }

    #screen-l-d {
        font-size: 14px;
        margin: calc((24px - 14px)/2) 0;
    }

    .dropdown-content{
        top: 25px;
    }

    #confirmed,
    #active,
    #recovered,
    #deceased {
        padding: 5px;
        word-break: break-all;
    }

    #main-content {
        margin: 10px !important;
    }

    #dataTableContainer {
        font-size: 12px !important;
    }

    #c-header .title,
    #a-header .title,
    #r-header .title,
    #d-header .title {
        font-size: 12px;
    }

    #c-content .t_count,
    #a-content .t_count,
    #r-content .t_count,
    #d-content .t_count {
        font-size: 18px;
    }

    #c-content .i_count,
    #a-content .i_count,
    #r-content .i_count,
    #d-content .i_count {
        font-size: 10px;
    }

    .dataTables_wrapper .dataTables_filter input {
        float: right !important;
    }

    #perc-info-0 {
        display: none !important;
    }

    #perc-info-1 {
        display: flex !important;
    }

    #perc-info-2 {
        display: flex !important;
    }

    #recovery-rate {
        margin-right: unset !important;
    }

}

@media (max-width: 500px) {

    #n-title {
        font-size: 20px;
    }

    #screen-l-d {
        font-size: 12px;
        margin: calc((20px - 12px)/2) 0;
    }

    .dropdown-content{
        top: 20px
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 150px !important;
    }

    #g-filter{
        display: block;
    }

    #g-district-filter{
        display: flex;
        margin-bottom: 10px;
    }

    #g-district-filter select {
        font-size: 12px;
        width: 170x;
        height: 30px;
    }
    
    #g-date-filter {
        /* display: flex; */
        font-size: 12px;
        margin-left: unset;
        width: max-content;
    }
}

@media (max-width: 400px) {

    #active-rate div:nth-child(1) {
        font-size: 13px !important;
    }

    #active-rate div:nth-child(2) {
        font-size: 18px !important;
    }

    #active-rate div:nth-child(3) {
        font-size: 12px !important;
    }

    #recovery-rate div:nth-child(1) {
        font-size: 13px !important;
    }

    #recovery-rate div:nth-child(2) {
        font-size: 18px !important;
    }

    #recovery-rate div:nth-child(3) {
        font-size: 12px !important;
    }

    #mortality-rate div:nth-child(1) {
        font-size: 13px !important;
    }

    #mortality-rate div:nth-child(2) {
        font-size: 18px !important;
    }

    #mortality-rate div:nth-child(3) {
        font-size: 12px !important;
    }

    #avg-growth-rate div:nth-child(1) {
        font-size: 13px !important;
    }

    #avg-growth-rate div:nth-child(2) {
        font-size: 18px !important;
    }

    #avg-growth-rate div:nth-child(3) {
        font-size: 11px !important;
    }

    #avg-growth-rate div:nth-child(4) {
        font-size: 12px !important;
    }

}

@media (max-width: 200px) {

    #confirmed,
    #active,
    #recovered,
    #deceased {
        padding: 5px;
        word-break: break-all;
    }

    #dataTableContainer {
        font-size: 12px !important;
    }

    #c-header .title,
    #a-header .title,
    #r-header .title,
    #d-header .title {
        font-size: 12px;
    }

    #c-content .t_count,
    #a-content .t_count,
    #r-content .t_count,
    #d-content .t_count {
        font-size: 18px;
    }

    #c-content .i_count,
    #a-content .i_count,
    #r-content .i_count,
    #d-content .i_count {
        font-size: 10px;
    }

    .dataTables_wrapper .dataTables_filter input {
        float: right !important;
    }

    /* #active-rate div:nth-child(1){
        font-size: 13px;
    } */

    #active-rate div:nth-child(2) {
        font-size: 16px;
    }

    #active-rate div:nth-child(3) {
        font-size: 12px;
        color: #017cff;
    }

    #recovery-rate {
        background-color: rgb(228, 244, 232);
        font-weight: 700;
        /* margin-right: 5px; */
    }

    #recovery-rate div:nth-child(1) {
        font-size: 14px;
        color: #29a746;
        margin-bottom: 5px;
    }

    #recovery-rate div:nth-child(2) {
        font-size: 18px;
        color: #29a746;
        margin-bottom: 10px;
    }

    #recovery-rate div:nth-child(3) {
        font-size: 13px;
        color: #29a746;
    }

    #mortality-rate {
        background-color: rgb(246, 246, 247);
        margin-right: 5px;
        font-weight: 700;
    }


    #mortality-rate div:nth-child(1) {
        font-size: 14px;
        color: #6d767e;
        margin-bottom: 5px;
    }

    #mortality-rate div:nth-child(2) {
        font-size: 18px;
        color: #6d767e;
        margin-bottom: 10px;
    }

    #mortality-rate div:nth-child(3) {
        font-size: 13px;
        color: #6d767e;
    }

    #avg-growth-rate {
        background-color: #f8f2ed;
        font-weight: 700;
    }

    #avg-growth-rate div:nth-child(1) {
        font-size: 14px;
        color: #b88448;
        margin-bottom: 5px;
    }

    #avg-growth-rate div:nth-child(2) {
        font-size: 18px;
        color: #b88448;
    }

    #avg-growth-rate div:nth-child(3) {
        font-size: 12px;
        color: #b88448;
        margin-bottom: 10px;
    }

    #avg-growth-rate div:nth-child(4) {
        font-size: 13px;
        color: #b88448;
    }
}

/* Media Quries (ends) */