.jumlah {
    display: none;
}

.btn-light:hover {
    color: #000;
    background-color: #ECA13D !important;
    border-color: #ECA13D !important;
}

.btn-light {
    color: #fff;
    background-color: #191818 !important;
    border-color: #191818 !important;
    opacity: .8;
}

.dist_btn button {
    display: block;
    overflow: hidden;
    color: black;
    /* font-size: 18px; */
    /* margin: 8px 8px 0px 10px; */
    z-index: 2;
}

.dist_btn i:hover {
    color: blue;
}

#chartdiv {
    width: 100%;
    height: 700px;
}

.map_legend {
    text-align: justify;
}

.map-legend td {
    font-size: 0.7vw;
    font-weight: bold;
    color: #000;
}

.map-legend span {
    display: flex;
    /* float: left; */
    height: 20px;
    width: 30px;
    margin-right: 5px;
    border: 1px solid #999;
    position: inherit !important;
}

#fifthlegend {
    margin-top: -20px !important;
}

.performance-legend table {
    font-size: 0.9vw;
    font-weight: bold;
    text-align: justify;
}

.dist_btn {
    min-height: 2vh !important;
}

.date-select label {
    color: black;
    font-size: 18px;
}

#display_district {
    margin-left: -5%;
}

#report-date {
    color: black;
}

#milldiv td.sorting_1 {
    width: 20%;
}

#datadisplay th {
    background-color: #50AF99;
    color: rgb(255, 255, 255);
}

#datadisplay tr:hover {
    background-color: #f0d35498;
}

#oerModal .modal-header {
    background-color: #44b198 !important;
    /* background-image: url('img/oil-oer.jpg') !important; */
}

#oerModal .modal-title {
    color: white !important;
    font-size: 25px !important;
}

#oerModal .page-item.active .page-link {
    background-color: #50AF99 !important;
    border-color: #44b198 !important;
}

#oerModal .page-link:hover {
    color: rgb(79, 79, 79);
}

.opac {
    background-color: rgba(255, 153, 51, 0.3);
}

.performance-legend td {
    color: black;
}

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ration: 1) {
    .container {
        max-width: 100% !important;
    }
    .card {
        color: rgb(35, 35, 35);
        min-height: 20vh !important;
        min-width: 30vh !important;
        max-width: 30vh !important;
        opacity: .8;
    }
}

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ration: 1) {
    .container {
        max-width: 100% !important;
    }
    .card {
        color: rgb(35, 35, 35);
        min-height: 20vh !important;
        min-width: 30vh !important;
        max-width: 30vh !important;
        opacity: .8;
    }
}


/*----iphone 6/7/8----*/

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    .container {
        max-width: 100% !important;
    }
    .card {
        color: rgb(35, 35, 35);
        min-height: 20vh !important;
        min-width: 30vh !important;
        max-width: 30vh !important;
        opacity: .8;
    }
    .btn-light,
    .map-legend,
    .performance-legend {
        display: none;
    }
    #map {
        width: 100%;
    }
    #year-select,
    #month-select {
        font-size: 12px;
        width: 50%;
    }
    .date-select label {
        font-size: 10px;
    }
    #report-date {
        display: none;
    }
    #mobile {
        height: 10px;
        width: 90%;
    }
    .fas.fa-expand {
        display: none;
    }
}


/*-----iphone 6+/7+/8+-----*/

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 2) {
    .container {
        max-width: 100% !important;
    }
    .card {
        color: rgb(35, 35, 35);
        min-height: 20vh !important;
        min-width: 30vh !important;
        max-width: 30vh !important;
        opacity: .8;
    }
    .btn-light,
    .map-legend,
    .performance-legend {
        display: none;
    }
    #map {
        width: 100%;
    }
    #year-select,
    #month-select {
        font-size: 13px;
        width: 90%;
    }
    #report-date {
        display: none;
    }
    #mobile {
        height: 10px;
        width: 90%;
    }
    .fas.fa-expand {
        display: none;
    }
    element {
        font-size: 12px;
        color: red;
    }
}


/*----iphone 5/5s/5se-----*/

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    .container {
        max-width: 100% !important;
    }
    .card {
        color: rgb(35, 35, 35);
        min-height: 20vh !important;
        min-width: 30vh !important;
        max-width: 30vh !important;
        opacity: .8;
    }
    .btn-light,
    .map-legend,
    .performance-legend {
        display: none;
    }
    #page-title {
        font-size: 15px;
    }
    #map {
        width: 100%;
    }
    #year-select,
    #month-select {
        font-size: 10px;
        width: 90%;
    }
    #label-month,
    #label-year {
        font-size: 10px;
    }
    #report-date {
        display: none;
    }
    #mobile {
        height: 10px;
        width: 90%;
    }
    .fas.fa-expand {
        display: none;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    .btn-light,
    .map-legend,
    .performance-legend {
        display: none;
    }
    #map {
        width: 100%;
    }
    #year-select,
    #month-select {
        font-size: 10px;
        width: 70%;
    }
    .date-select label {
        font-size: 10px;
    }
    .date-select {
        margin-left: 20px;
    }
    #report-date {
        display: none;
    }
    #mobile {
        height: 10px;
        width: 90%;
    }
    .fas.fa-expand {
        display: none;
    }
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 2) {
    .btn-light,
    .map-legend,
    .performance-legend {
        display: none;
    }
    #map {
        width: 100%;
    }
    #year-select,
    #month-select {
        font-size: 10px;
        width: 70%;
    }
    .date-select label {
        font-size: 10px;
    }
    .date-select {
        margin-left: 30px;
    }
    #report-date {
        display: none;
    }
    #mobile {
        height: 10px;
        width: 90%;
    }
    .fas.fa-expand {
        display: none;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .btn-light,
    .map-legend,
    .performance-legend {
        display: none;
    }
    #map {
        width: 100%;
    }
    #year-select,
    #month-select {
        font-size: 10px;
        width: 70%;
    }
    .date-select label {
        font-size: 10px;
    }
    .date-select {
        margin-left: 150px;
    }
    #report-date {
        display: none;
    }
    .fas.fa-expand {
        display: none;
    }
    #mobile {
        height: 10px;
        width: 90%;
    }
    .fas.fa-expand {
        display: none;
    }
}

@media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 2) {
    .btn-light,
    .map-legend,
    .performance-legend {
        display: none;
    }
    #map {
        width: 100%;
    }
    #year-select,
    #month-select {
        font-size: 10px;
        width: 70%;
    }
    .date-select label {
        font-size: 10px;
    }
    .date-select {
        margin-left: 20px;
    }
    #report-date {
        display: none;
    }
    #mobile {
        height: 10px;
        width: 90%;
    }
    .fas.fa-expand {
        display: none;
    }
}