/* Optional google maps: Makes the sample page fill the window. */
html, body {
    font-size: 14px;
    height: 100%;
    margin: 0;
    padding: 0;
}

/*********************************/
/*BS overrides*/
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #8781CA;
    background-color: #8781CA;
}

.gm-ui-hover-effect {
    outline: none;
}

/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
    height: 100%;
}
/* move google logo upwards*/
/* https://stackoverflow.com/questions/34276266/move-google-maps-logo-above-custom-interface-on-bottom-javascript*/
#map div div a[target=_blank] div {
  margin-bottom: 60px;
}

/*********************************/
.gm-ui-hover-effect {
    top: 0 !important;
    right: 0 !important;
}

.gm-style {
    font-family: sans-serif;
}

.gm-style-iw {
    width: 21.5rem;
}

.gm-style-iw-d {
    overflow: auto !important;
}

.info-window-title {
    cursor: pointer;
    color: #6299EB;
    font-size: 0.875rem;
}

.info-window-hr {
    border-top: 1px solid #6299EB;
}

.info-window .popup-small-grey-text {
    font-size: 0.625rem;
    color: #909090;
    font-family: sans-serif;
}

.info-window-btn {
    margin: 0 !important;
    padding: 0.313rem 0.625rem !important;
}

.info-window-btn:nth-last-child(1) {
    margin-left: 0.625rem !important;
}

.info-window-btn .i-button-text {
    color: #6299EB !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
}

/**************************************/
.svg-icon {
    width: 15px;
    height: 15px;
    margin: 2px;
}

.black-filter {
    -webkit-filter: brightness(0%);
    filter: brightness(0%);
}

/***************************************/
.map-legend-wrapper {
    position: absolute;
    top: 2%;
    left: 1%;
    display: block;
    background: #FFFFFF 0 0 no-repeat padding-box;
    box-shadow: 0 0 10px #3B42D94F;
    border-radius: 3%;
    min-width: 245px;
    min-height: 140px;
    z-index: 1;
    padding: 0.5rem;
    transition: left 0.2s ease-in;
}

.map-legend-wrapper.map-legend-mapper-moved {
    left: calc(1% + 340px);
    transition: left 0.2s ease-out;
}

.map-legend-item {
    cursor: pointer;
}

.map-legend-item .total-per-status {
    color: #909090;
}

.border-color-blue {
    border-bottom-color: #6299EB !important;
}

.legend-title {
    text-align: left;
    font-family: sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #6299EB;
    opacity: 1;
}

.legend-circle {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.legend-circle.green-circle {
    background-color: #00D20E;
}

.legend-circle.yellow-circle {
    background-color: #FFC300;
}

.legend-circle.red-circle {
    background-color: #FF0000;
}

.legend-circle.grey-circle {
    background-color: #707070;
}

.legend-circle .legend-text {
    text-align: left;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #000000;
    opacity: 1;
}

/******************************/
.map-event-container-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    background: #FFFFFF 0 0 no-repeat padding-box;
    box-shadow: 0 0 10px #3B42D94F;
    border-radius: 0 5px 0 0;
    width: 340px;
    height: 98%;
    z-index: 1;
    font-family: sans-serif;
    color: #435061;
    transition: height 0.25s ease-in;
    padding-top: 5px;
}

.map-event-container-wrapper.map-event-container-wrapper-hidden {
    height: 40px;
    transition: height 0.25s ease-out;
}

.event-container-open-marker {
    background: transparent;
    height: 20px;
    width: 100%;
    position: absolute;
    top: -8px;
}

.event-container-open-marker > div {
    cursor: pointer;
    border-radius: 25px 25px 0px 0px;
    background: #FFFFFF;
    color: #6299eb;
    height: 20px;
    width: 25px;
    line-height: 15px;
    margin: auto;
    vertical-align: top;
    text-align: center;
}

.map-events-title {
    cursor: pointer;
    text-align: center;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 0.875rem;
    letter-spacing: 0;
    color: #6299EB;
    opacity: 1;
}

.border-color-blue {
    border-bottom-color: #6299EB !important;
}

.event-content-wrapper {
    height: calc(100% - 40px);
    overflow: hidden;
}

.event-content-wrapper .criteria-checkbox-wrapper {
    margin: auto;
}

.event-content-wrapper .map-events-container {
    height: calc(100% - 50px);
    overflow-y: scroll;
}

@media (max-width: 768px) {
    .map-event-container-wrapper {
        width: 100%;
    }
}

/************************************************/
.map-event-container {
    position: relative;
    border-top: 1px solid #EBEBEB;
    display: block;
    background: #FFFFFF 0 0 no-repeat padding-box;
    width: 100%;
    z-index: 1;
    padding: 0.5rem;
    cursor: pointer;
}

.map-event-container:hover {
    background-color: #F2F2F2;
}

.status {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
}

.red-status {
    border-left: 8px solid #F53D35;
}

.orange-status {
    border-left: 8px solid #FFC300;
}

.map-events-title {
    text-align: center;
    font-family: sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 0.875rem;
    letter-spacing: 0;
    color: #6299EB;
    opacity: 1;
}

.alarm-info-container {
    display: flex;
    font-family: sans-serif;
    font-size: 0.875rem;
    color: #909090;
}

.alarm-info-container .alarm-info-item {
    height: 20px;
    margin: 5px;
    line-height: 20px;
    vertical-align: middle;
}

.alarm-info-container .alarm-info-item:hover {
    text-decoration: underline;
}

/* custom styles for events dropdown */
.br-border {
    border: 1px solid #EBEBEB;
}

.text-body {
    color: #212529 !important;
}

.br-border.dropdown-toggle::after {
    display: none !important;
}

.dropdown-toggle:focus {
    outline: none;
    box-shadow: none;
}

.events-dropdown-menu.dropdown-menu {
    box-shadow: 0px 3px 6px #D6D6D6;
}