#map-select-container {
    display:         flex;
    justify-content: space-between;
    flex-wrap:       wrap-reverse;
    gap:             10px;
    margin:          1em auto;
}

#products-label-select-all {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-end;
    margin-bottom:   0.25em;
}
#select-all-products {
    border:           solid 1px #3d4551 !important;
    color:            #3d4551 !important;
    background-color: #ffffff !important;
}
#select-all-products:not(.selected):hover {
    background-color: #c6cace !important;
}
#select-all-products.selected {
    color:            #dcdee0 !important;
    background-color: #3d4551 !important;
}

#products { width: 100%; }

#filters {
    display:         flex;
    justify-content: space-between;
    gap:             10px;
}

#product-filter #filters fieldset.filter-category {
    border:           none;
    background-color: transparent;
    padding:          0;
    margin:           0;
    flex:             0 1 auto;
}

#product-filter #filters fieldset.filter-category legend {
    font-size:        100%;
    position:         relative;
    top:              0;
    left:             0;
    background-color: transparent;
    color:           #1c1d1f;
    padding:          0;
    box-shadow:       none;
}

#date-select {
    display:         flex;
    justify-content: space-around;
    gap:             0.25em 0.5em;
    flex-wrap:       wrap;
}

#date-select > * {
    flex: 1 0 calc(50% - 0.5em);
}

#date-select label {
    text-align: right;
    display:    inline-block;
    width:      90px;
}

#date-select select,
#date-select #date {
    width: calc(100% - 95px);
}

#prj-note-link img {
    vertical-align: baseline;
}
#prj-info-popup {
    display:     none;
    position:    absolute;
    top:         1.75em;
    left:        0;
    max-width:   100%;
    white-space: normal;
    z-index:     1;
    background:  #fff;
    border:      1px solid #3d4551;
    box-shadow:
        0.3px 0.3px 0.2px rgba(0, 0, 0, 0.02),
        0.7px 0.7px 0.5px rgba(0, 0, 0, 0.028),
        1.3px 1.3px 1px rgba(0, 0, 0, 0.035),
        2.2px 2.2px 1.8px rgba(0, 0, 0, 0.042),
        4.2px 4.2px 3.3px rgba(0, 0, 0, 0.05),
        10px 10px 8px rgba(0, 0, 0, 0.07);
}
#prj-info-popup .btn-close {
    top:   0;
    right: 0;
}

#clear { margin-top: 0.25em; }

.jqdp { width: 170px; }

#missing-block-container {
    z-index: 2;
    height:  2em;
}

#missing-block {
    width:            100%;
    background-color: white;
    border:           #dcdee0 1px solid;
    padding:          0.5em 0.5em 0 0.5em;
}

#missing {
    display:        flex;
    flex-wrap:      wrap;
    gap:            2px 5px;
    overflow:       scroll;
    max-height:     2em;
    margin-top:     0.5em;
    padding-bottom: 0.5em;
}

#missing-block.expanded {
    box-shadow:
          2.8px   2.8px  2.2px rgba(0, 0, 0, 0.020),
          6.7px   6.7px  5.3px rgba(0, 0, 0, 0.028),
         12.5px  12.5px 10.0px rgba(0, 0, 0, 0.035),
         22.3px  22.3px 17.9px rgba(0, 0, 0, 0.042),
         41.8px  41.8px 33.4px rgba(0, 0, 0, 0.050),
        100.0px 100.0px 80.0px rgba(0, 0, 0, 0.070);
}

#missing-block.expanded #missing {
    max-height: none;
}

#toggle-missing {
    content:         "";
    cursor:          pointer;
    height:          20px;
    width:           20px;
    background-size: 20px 20px;
    color:           #000;
    opacity:         0.5;
}

#toggle-missing:hover { 
    opacity: 1;
}

#toggle-missing:not(.collapse-missing),
#toggle-missing.expand-missing {
    background-image: url(/monitoring-content/lib/bootstrap-icons-1.10.5/chevron-down.svg);
}
#toggle-missing.collapse-missing {
    background-image: url(/monitoring-content/lib/bootstrap-icons-1.10.5/chevron-up.svg);
}

#maps-container {
    display:         flex;
    flex-wrap:       wrap;
    gap:             6px;
    justify-content: space-evenly;
    align-items:     stretch;
}

#maps-container > .map-container {
    position:   relative;
    text-align: center;
    padding:    5px;
    max-width:  650px;
    min-height: 250px;
}

.loader-container,
#maps-container > * img:not([src$="loader.gif"]) {
    width: 100%;
}

.drag-sort,
.map-remove {
    z-index:  1;
    position: absolute;
}

.drag-sort {
    display: none;
    padding: 5px 10px;
    cursor:  grab;
    color:   #8d9297;
}
.drag-sort:hover,
.drag-sort:active {
    color: #000;
}
.drag-sort:active {
    cursor: grabbing;
}

.map-container .map-remove {
    top:   10px;
    right: 0;
}

.missing-container {
    padding:          0 5px;
    color:            #3d4551;
    text-decoration:  none;
    cursor:           default;
    position:         relative;
    border-radius:    5px;
    background-color: #f1f3f6;
    border:           #dcdee0 1px solid;
}

.missing-container:hover {
    color: #3d4551;
}

.map-container :active {
    cursor: grabbing;
}

#dateinstructions {
    top: 133%;
}

#timescale { text-align: right; }

@media (min-width: 992px) {
    #map-select-container > * {
        flex: 0 1 calc(50% - 10px);
    }

    #maps-container > * {
        flex: 1 0 calc(50% - 3px);
    }
}

@media (max-width: 1199px) {
    #map-select-container .filter-category .term-long {
        display: none;
    }
}

@media (max-width: 991px) {
    #map-select-container > *,
    #maps-container > * {
        width: 100%;
    }
}

@media (min-width: 768px) {
    #dateinstructions {
        left: 44px;
    }
}

@media (max-width: 767px) {
    #dateinstructions {
        left: 90px;
    }
}

@media (min-width: 576px) {
    #map-select-container .checkbox-label {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    #map-select-container #products{
        font-size: 18px;
    }

    #map-select-container .filter-category * {
        font-size: 14px;
    }
}