* {
    padding: 0;
    margin: 0;
    hyphens: auto;
}
body {
    background-color: var(--c-primary) ;
    color: var(--c-tertiary);
}
main {
    padding: 20px;
}

::selection {
    /* background-color: #121212;
    color: #cccccc; */
    background-color: var(--c-secondary);
    color: var(--c-primary);
}
::-moz-selection {
    background-color: var(--c-secondary);
    color: var(--c-primary);
}

.row {
    padding-top: 20px;
    /* padding-bottom: 80px; */
}
.rowb {
    padding-bottom: 80px;
}

h1 { font-weight: 200; }
h2 { font-weight: 400; }
h3 { font-weight: 400; }
h4 { font-weight: 400; }
h5 { font-weight: 300; }
h6 { font-weight: 400; }

/* 
    Sitemap
    =======

    1. Home
        1.1 coronaInfoBox
        1.2 Accordion

*/

.coronaInfoBox {
    background-color: #fff;
    text-align: center;
    margin: 0 auto;
    border: 1px solid #33333333;
    border-radius: 5px;
}
.coronaInfoInnerHeader,
.coronaInfoInnerFooter {
    padding: 10px;
}
@media screen and (min-width: 1001px) {
    .coronaInfoBox {
        width: 50%;
    }
    .coronaInfoInnerBody {
        padding: 40px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }
}
@media screen and (max-width: 1000px) {
    .coronaInfoBox {
        width: 100%;
    }
    .coronaInfoInnerBody {
        padding: 40px;
        display: grid;
        grid-template-rows: auto;
        gap: 5px;
    }
}
.coronaInfoInnerItem {
    border: 1px solid #33333333;
    border-radius: 5px;
    transition: .1s;
}
.coronaInfoInnerItem:hover {
    background-color: #33333322;
}
.coronaInfoInnerItem span {
    font-size: 50px;
    font-weight: 200;
}
.coronaInfoInnerItem span.currentValueItem {
    font-size: 50px;
    font-weight: 200;
}
.coronaInfoInnerItem span.nameItem {
    font-size: 16px;
    font-weight: 400;
}
.coronaInfoBox hr {
    margin: 0;
}

/* ------- */
@media screen and (max-width: 991px) {
    .onlydesktop {
        display: none;
    }
}

/* 
=====
    1.2 - Accordion
=====
*/

.accordion-div {
    padding: 15px 15px;
}
.accordion-title {
    text-align: left;
    margin-bottom: 20px;
    /* font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; */
}
.accordion {
    background-color: #fff;
    color: #444444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 20px;
    /* font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; */
    font-weight: 300;
    transition: .4s;
}
.accordion:hover, .accordion:active {
    background-color: #cccccc;
}
.accordion-panel {
    padding: 18px 18px;
    display: none;
    background-color: #ffffff;
    overflow: hidden;
    /* font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; */
}
.accordion-section-field {
    padding-bottom: 20px;
}
button.accordion:after {
    content: '\002B';
    color: #777777;
    font-weight: 900;
    float: right;
    margin-left: 5px;
}
button.accordion.active:after {
    content: '\2212';
}

/* 
==========
    1.3 - Chart
==========
*/
.chart-last5days-box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
}

/* 
==========
    1.3 - Chart
==========
*/
.currentRules-box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
}

@keyframes iconspin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* icon-spin */
.icon-spin {
    animation-name: iconspin;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    /* animation-direction: normal;
    animation-play-state: running; */
    /* animation: iconSpin infinite normal .2s ; */
}

.load-icon-spin #lastUpdatedField,
.load-icon-spin #currentIncidenceField,
.load-icon-spin #casesPer100kField,
.load-icon-spin #recoveredAllField,
.load-icon-spin #currentRulesField {
    display: block;
}