@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

img {
    max-width: 100%;
}

a,
a:link,
a:hover,
a:visited {
    color: inherit;
    text-decoration: none;
}

body {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    line-height: 1.7;
    background: #303035;
    color: #eef;
    overflow-x: hidden;
}

#app {
    display: flex;
    width: 100%;
    height: 100vh;
}

#left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 100vh;
    overflow: hidden;
    background: #101011;
}

#main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#data {
    width:100%;
    height:calc(100vh - 60px);
    overflow: auto;
}

#data-table {
    border-spacing: none;
    border-collapse: collapse;
}

#data-table td,
#data-table th {
    border: 1px solid #38383d;
    padding: 5px 15px;
    color: #52c55e;
    text-align: left;
}

#data-table td {
    border: 1px solid #38383d;
    padding: 5px 15px;
    color: #97d6ef;
}

#info {
    padding: 5px 15px;
    color: #89a;
    font-size: 12px;
    font-style: italic;
}

#filters {
    display: flex;
    align-items: center;
    background:#202025;
    padding: 15px;
    height: 60px;
}

#filters input,
#filters select {
    background: #29292f;
    border: 1px solid #38383d;
    border-radius: 4px;
    padding: 5px;
    color: #eef;
    margin-left: 15px;
}

#dev input,
#last-num input {
    width: 35px;
    text-align: center;
}

#limit input,
#val input, 
#card input {
    width: 80px;
}

#reg,
#limit,
#last-num,
#val,
#card {
    margin-left: 15px;
}

#table,
#chart,
#map {
    display: flex;
    cursor: pointer;
    line-height: 1;
    height:28px;
}

#table a,
#chart a,
#map a {
    line-height: 1;
    height:28px;
}

#table img,
#chart img,
#map img {
    height: 28px;
}

#table {
    margin-top: 0px;
}

#chart {
    margin-top: 15px;
}

#map {
    margin-top: 20px;
}

#excel {
    cursor:pointer;
    color:#52c55e;
}

#dist{
    margin-top:50px;
}

.leaflet-popup-content-wrapper{
    background:#29292f;
    width: 400px;
    min-height: 100px;
    color:#fff;
    padding:15px;
}

.leaflet-popup-content {
    width:100% !important;
}

.popup-name {
    font-size: 26px !important;
    font-weight: 900;
}

.popup-time {
    font-size:11px !important;
    font-style: italic;
}

.popup-type {
    font-size:14px !important;
    margin-top:10px;
}

.popup-dist {
    font-size:14px !important;
}

.popup-temp {
    font-size:14px !important;
}

#updateBtn{
    position:absolute;
    bottom:15px;
    right:15px;
    width:80px;
    cursor: pointer;
}