* {
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

:root {
    --color-marker: #D90022;
    --color-selected: black;
    --font-weight-bold: 700;
}

@supports (-webkit-touch-callout: none) {
    :root {
      --font-weight-bold: 900;
    }
}

strong {
    font-weight: var(--font-weight-bold);
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
  
body {
    margin: 0;
}

/*///////////*/
/*/// TOP ///*/
/*///////////*/

h1 {
    padding: 10px;
    margin: 0;
    background-color: black;
    color: white;
    text-align: center;
    font-size: 6.5vw;
    font-weight: var(--font-weight-bold);
}

#container-date {
    padding: 6px 0;
    text-align: center;
    background-color: gray;
    height: 38px;
}

/* don't display default arrow icon */
select, input {
    -webkit-appearance: none;
    -moz-appearance: none;
    color:black!important;
}

select {
    font-size: 18px;
    border-style: none;
    width: min(45%, 150px);
    height: 26px;
    border-radius: 5px;
    padding: 2px 0 1px 7px;
    /* arrow icon for dropdown */
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB3aWR0aD0iMTc5MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQwOCAxMDg4cTAgMjYtMTkgNDVsLTQ0OCA0NDhxLTE5IDE5LTQ1IDE5dC00NS0xOWwtNDQ4LTQ0OHEtMTktMTktMTktNDV0MTktNDUgNDUtMTloODk2cTI2IDAgNDUgMTl0MTkgNDV6Ii8+PC9zdmc+'),
        linear-gradient(to bottom, white 0%,white 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .3em top 30%, 0 0;
    background-size: .65em auto, 100%;
}

/* space between #date-type and #date-year */
#date-type {
    margin-right: 2.5px;
}

#date-custom {
    background-color : lightgray;
    padding: 6px 0;
    display: none;
    text-align: center;
}

input {
    padding: 3px 0 1px 7px;
    font-size: 18px;
    width: 150px;
    border-radius: 5px;
    border: none;
    background-color: white;
    /* calendar icon for data selection */
    background-image: url("data:image/svg+xml,%3Csvg class='bi bi-calendar' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1zm1-3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z'/%3E%3Cpath fill-rule='evenodd' d='M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-position: right .3em top 55%, 0 0;
    background-size: .65em auto, 100%;
}

/*///////////*/
/*/// MAP ///*/
/*///////////*/

#main {
    width: 100%; 
}

#map {
    height: 50vh;
    position: relative;
}

.leaflet-control-attribution {
    font-size: 10px!important;
}

.leaflet-data-marker path {
    fill: var(--color-marker);
}

.marker-selected path {
    fill: var(--color-selected);
}

/*//////////////////*/
/*/// SIDE PANEL ///*/
/*//////////////////*/

/* height of side panel set in index.js */
#side-panel {
    padding: 0 10px 10px;
    overflow: auto;
}

#side-panel-default > p {
    margin: 0;
    text-align: center;
    font-size: 18px;
}

#side-panel-default > p:first-child {
    margin-top: 10px;
}

iframe {
    display: none;
}

.incident {
    font-size: min(4.5vmin, 16px);
}

.incident_header {
    text-align: center;
    margin: 10px 0 5px;
    font-size: min(6vmin, 26px);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: var(--font-weight-bold);
}

.incident .datetime {
    text-align: center;
}

/* space between "shooting" and datetime in incident subheading*/
.incident .datetime .label {
    padding-right: 20px;
}

.incident hr {
    border: none;
    background-color: black;
    height: 1.5px;
}

.incident table {
    width: 100%!important;
}

.incident td {
    text-align: center;
    width: 50%!important;
}

.incident .td_left {
    padding: 0 2.5px 0 5px;
}

.incident td:not(.td_left) {
    padding: 0 5px 0 2.5px!important;
}

/*/////////////////////*/
/*/// LARGE SCREENS ///*/
/*/////////////////////*/

@media only screen and (min-width: 800px) and (min-aspect-ratio: 1/1) {
    h1 {
        height: 100px;
        font-size: 60px;
        line-height: 78px;
    }
    
    select, input {
        width: 150px;
    }

    /* minimum height of map and side panel are 364px */
    /* 139px is approx height of #top */
    #map, #side-panel {
        height: calc(100vh - 139px);
        min-height: 364px;
    }

    /* max width of side panel is 400px */
    #map {
        width: max(60%, calc(100% - 400px));
        float: left;
    }

    #side-panel {
        width: min(40%, 400px);
        position: relative;
    }

    iframe {
        display: unset;
        width: 100%;
        /* --vh calculated manually in index.html head, fixes issues on iOS */
        height: calc(var(--vh) * 50);
        min-height: 250px;
        position: relative;
        /* placeholder, top overriden by index.js */
        top: max(calc((100vh - 139px - 50vh - 64px)/2), calc((500px - 139px - 250px - 64px)/2));
        border-top: solid 2px gray;
        border-bottom: solid 2px gray;
        border-left: none;
        border-right: none;
    }

    .leaflet-control-attribution {
        font-size: 11px!important;
    }

    #side-panel-default > p, .incident {
        font-size: 15px;
    }

    .incident_header {
        font-size: 4vmin;
    }
}