@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
body {
    position: relative;
    padding: 1.5rem;
    padding-top: 0;
    padding-left: 1rem;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    background: #f6f6f6;
    transition: .5s;
}
h6{
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}
.hidden{
    display: none;
}
.grid-content{
    padding: 0;
}
.grid-content .tab-menu .nav-tabs{
    margin: 0 0 20px;
}
.grid-content .tab-menu .nav-item{
    margin-right: 30px;
}
.grid-content .tab-menu .nav-item:last-child{
    margin-right: 0;
}
.grid-content .tab-menu .nav-item .nav-link{
    font-size: 18px;
    font-weight: 700;
    color: #54657e;
    opacity: .5;
    cursor: pointer;
    padding: 5px  0;
    text-transform: uppercase;
}
.grid-content .tab-menu .nav-item .nav-link:hover,
.grid-content .tab-menu .nav-item .nav-link.active{
    border:1px solid transparent;
    border-bottom: 3px solid #1662ae;
    background: transparent;
    color: #1662ae;
    opacity: 1;
}

.grid-content .filter .form-row{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
}
.grid-content .filter .form-row .group {
    width: 200px;
    margin: 0;
    font-size: 14px;
    margin: 5px 5px;
}
.grid-content .filter .form-row .group.search{
    width: 105px;
    margin-right: 0;
}
.grid-content .filter .form-row .group.search .btn{
    margin-top: 23px;
}
.grid-content .filter button {
    font-size: 14px;
    height: 38px;
    padding:6px 15px
}
.grid-content label{
    font-weight: 600;
    color: #303030;
    margin-bottom: 2px;
    width: 100%;
}
.grid-content .form-control{
    font-size: 14px;
    height: 38px ;
    border: 1px solid #dbdbdb !important;
    padding: 0.375rem 0.375rem;
}
.grid-content .form-control:focus{
    box-shadow: 0 0 0 0 rgb(13 110 253 / 25%);
}
.grid-content .btn.btn-primary{
    background-color: #1662ae;
    border-color:  #1662ae;
    font-weight: 500;
    font-size: 14px;
}
.grid-content .title {
    font-weight: 700;
    font-size: 18px;
    color: #1662ae;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.card-item {
    background-color: #fff;
    box-shadow: 1px 0 2px 1px rgb(0 0 0 / 5%);
    padding: 20px;
    margin-bottom: 16px;
}
canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.humidity,
.temperature{
    width: 350px;
    margin: 0 auto;
}
.num-wind{
    font-size: 70px;
    font-weight: 700;
}
.fs-20{
    font-size: 20px;
}
.range{
    padding: 1px 15px;
}
.range-1{
    background: #29B95C;
}
.range-2{
    background: #A9D08E;
}
.range-3{
    background: #FCE4D6;
}
.range-4{
    background: #FFE699;
}
.range-5{
    background: #F4B084;
}
.range-6{
    background: #FF7474;
}
.range-7{
    background: #FF0000;
}

.range2-1{
    background: #29B95C;
}
.range2-2{
    background: #FCE4D6;
}
.range2-3{
    background: #FF7474;
}
.range2-4{
    background: #F6C3FF;
}
.range2-5{
    background: #FF0000;
}