@import url('https://fonts.googleapis.com/css?family=Muli|Oswald&display=swap');

/*reset*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

/*html, body, div, span, applet, object, iframe,*/
/*h1, h2, h3, h4, h5, h6, p, blockquote, pre,*/
/*a, abbr, acronym, address, big, cite, code,*/
/*del, dfn, em, img, ins, kbd, q, s, samp,*/
/*small, strike, strong, sub, sup, tt, var,*/
/*b, u, i, center,*/
/*dl, dt, dd, ol, ul, li,*/
/*fieldset, form, label, legend,*/
/*table, caption, tbody, tfoot, thead, tr, th, td,*/
/*article, aside, canvas, details, embed,*/
/*figure, figcaption, footer, header, hgroup,*/
/*menu, nav, output, ruby, section, summary,*/
/*time, mark, audio, video {*/
/*	margin: 0;*/
/*	padding: 0;*/
/*	border: 0;*/
/*	font-size: 100%;*/
/*	font: inherit;*/
/*	vertical-align: baseline;*/
/*}*/
/*!* HTML5 display-role reset for older browsers *!*/
/*article, aside, details, figcaption, figure,*/
/*footer, header, hgroup, menu, nav, section {*/
/*	display: block;*/
/*}*/
/*body {*/
/*	line-height: 1;*/
/*}*/
/*ol, ul {*/
/*	list-style: none;*/
/*}*/
/*blockquote, q {*/
/*	quotes: none;*/
/*}*/
/*blockquote:before, blockquote:after,*/
/*q:before, q:after {*/
/*	content: '';*/
/*	content: none;*/
/*}*/
/*table {*/
/*	border-collapse: collapse;*/
/*	border-spacing: 0;*/
/*}*/

/*reset*/

.main-title {
    font-size: 26px;
    color: #0f0f0f;
    margin-top: 10px;
    margin-bottom: 0;
}

.main-div {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
    width: 50%;
}

.county {
    stroke: black;
    fill: none;
}

.county-bounds:hover {
    fill: #5c5b5b;
    cursor: pointer;

}

.county-add-div {
    horiz-align: center;
    /*margin: 0 25px 25px 125px;*/
}

#line-div {
    /*margin-top: 170px;*/
    margin-left: auto;
    margin-right: auto;
    /*min-height: 850px;*/
    /*min-width: 40vw;*/
}

.line-title {
    font-size: 24px;
}

html {
    /*height: 100%;*/
    font-family: 'Muli', sans-serif;
    /*min-height: 100%;*/
    /*min-width: 100%;*/
}

.grid line {
    stroke: grey;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}

.grid path {
    stroke-width: 0;
}

div .totals {
    margin-top: 0;
    padding: 5px;
}

body {
    margin-top: 0;
    background: rgb(222, 162, 39);
    /*background: linear-gradient(146deg, rgba(222, 162, 39, 1) 0%, rgba(175, 40, 40, 1) 100%);*/
    background: linear-gradient(to right bottom, rgba(222, 162, 39, 1), rgba(175, 40, 40, 1));
    background: -webkit-linear-gradient(to right bottom, rgba(222, 162, 39, 1), rgba(175, 40, 40, 1));
    background: -moz-linear-gradient(to right bottom, rgba(222, 162, 39, 1), rgba(175, 40, 40, 1));
    /*background-repeat: no-repeat;*/
    /*background-size: contain;*/
    display: grid;
    grid-template-rows: calc(10vh * 1vw) calc(55vh * 1vw) calc(10vh * 1vw);
    padding: 5px;
    /*height: 100%;*/
}

.header {
    background: #f1f1f1;
    border-radius: 10px 10px 0 0;
    min-height: 0;
    /*display: grid;*/
    /*grid-template-rows: [title] 15% [cases] 5% [deaths] 10% [date] 10% [gap] 50% [foot] 7% ;*/
    /*grid-template-rows: auto;*/
    /*grid-template-rows: auto;*/
    /*padding-bottom: 5px;*/
    border: darkgray 1px solid;
    text-align: center;
    /*min-width: 500px;*/
}

.header > * {
    margin-top: 5px;
    margin-bottom: 5px;
}

.totals {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
}

.options-div {
    display: grid;
    grid-template-columns: 20% 24% 20% 20% 15%;
    margin-bottom: 10px;
}

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

    main {
        display: grid;
        grid-template-columns: 40% 60%;
        padding-bottom: 10px;
        padding-left: 10px;
    }

    body {
        grid-template-rows: 18% 65% 15% 15%;
        /*height: 100%;*/
    }

    /*.header {*/
    /*    min-height: 25%;*/
    /*}*/

    #line-div {
        margin-top: 45px;
        min-height: 0;
    }

}

@media only screen and (min-width: 1700px) {
    .main-div {
        padding-left: 150px;
    }
}
#date-grid button {
    border-radius: 50%;
    border: 1px solid black;
    background: #3578ff;
    color: white;
    height: 35px;
    width: 35px;
    margin-left: 10px;
}

img {
    height: 25px;
    width: 30px;
}

#date-grid button[disabled=disabled], #date-grid button:disabled,
#progress-btn[disabled=disabled], #progress-btn:disabled {
    background: #a5a5a5;
    color: black;
}

#progress-btn {
    background: #3578ff;
    color: white;
    border: 1px solid black;
    border-radius: 15px;
    height: 30px;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    font-size: 12px;
}

#date-grid {
    /*text-align: center;*/
    /*float: top;*/
    align-items: center;
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /*min-width: 600px;*/
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 25%;
}

#current-date {
    min-width: 150px;
}

#date-grid h2 {
    margin: 0 20px 0 25px;
}

#date-grid div {
    justify-content: center;
    display: grid;
    grid-template-columns: 50% 50%;
}

#slider-type-ticks {
    padding: 5px;
}


/*.legend {*/
/*    background: #e9e9e9;*/
/*    border-radius: 10px 0 0 10px;*/
/*    padding: 1em;*/
/*    border: darkgray 1px solid;*/
/*}*/

aside div {
    /*padding: .5em;*/
}

.tick text {
    font-size: 11px;
    fill: black;
}

.parameter-value text {
    font-size: 13px;
}

main {
    background: #f8f8f8;
    /*border-radius: 0 0 10px 10px;*/
    /*padding: 0.5em;*/
    border: darkgray 1px solid;
    display: grid;
    grid-template-rows: calc(30vh * 1vw) calc(20vh * 1vw);
}

.bottom {
    background: #f8f8f8;
    border-radius: 0 0 10px 10px;
    padding: 1em 1em 1em 0;
    /*display: grid;*/
    /*grid-template-rows: auto;*/
    border: darkgray 1px solid;
}

.bottom div {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

option {
    font-family: 'Muli', sans-serif;
}

.main-div {
    /*float: left;*/
    margin-left: auto;
    margin-right: auto;
    min-width: 40vw;
}

.label-year {
    position: fixed;
    margin-left: 50px;
    font-weight: bold;

}

.d3-tip {
    line-height: 1;
    font-weight: bold;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 2px;
    pointer-events: none;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    position: absolute;
    pointer-events: none;
}

/* Northward tooltips */
.d3-tip.n:after {
    content: "\25BC";
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
    text-align: center;
}

/* Eastward tooltips */
.d3-tip.e:after {
    content: "\25C0";
    margin: -4px 0 0 0;
    top: 50%;
    left: -8px;
}

/* Southward tooltips */
.d3-tip.s:after {
    content: "\25B2";
    margin: 0 0 1px 0;
    top: -8px;
    left: 0;
    text-align: center;
}

/* Westward tooltips */
.d3-tip.w:after {
    content: "\25B6";
    margin: -4px 0 0 -1px;
    top: 50%;
    left: 100%;
}