.react-daterange-picker {
    display: inline-flex;
    position: relative
}

.react-daterange-picker,
.react-daterange-picker *,
.react-daterange-picker *:before,
.react-daterange-picker *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.react-daterange-picker--disabled {
    background-color: #f0f0f0;
    color: #6d6d6d
}

.react-daterange-picker__wrapper {
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    align-items: center;
    border: thin solid gray
}

.react-daterange-picker__inputGroup {
    min-width: calc((4px * 3) + .54em * 8 + .217em * 2);
    height: 100%;
    flex-grow: 1;
    padding: 0 2px;
    box-sizing: content-box
}

.react-daterange-picker__inputGroup__divider {
    padding: 1px 0;
    white-space: pre
}

.react-daterange-picker__inputGroup__divider,
.react-daterange-picker__inputGroup__leadingZero {
    display: inline-block
}

.react-daterange-picker__inputGroup__input {
    min-width: .54em;
    height: 100%;
    position: relative;
    padding: 0 1px;
    border: 0;
    background: none;
    color: currentColor;
    font: inherit;
    box-sizing: content-box;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

.react-daterange-picker__inputGroup__input::-webkit-outer-spin-button,
.react-daterange-picker__inputGroup__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

.react-daterange-picker__inputGroup__input:invalid {
    background: rgba(255, 0, 0, .1)
}

.react-daterange-picker__inputGroup__input--hasLeadingZero {
    margin-left: -.54em;
    padding-left: calc(1px + .54em)
}

.react-daterange-picker__button {
    border: 0;
    background: transparent;
    padding: 4px 6px
}

.react-daterange-picker__button:enabled {
    cursor: pointer
}

.react-daterange-picker__button:enabled:hover .react-daterange-picker__button__icon,
.react-daterange-picker__button:enabled:focus .react-daterange-picker__button__icon {
    stroke: #0078d7
}

.react-daterange-picker__button:disabled .react-daterange-picker__button__icon {
    stroke: #6d6d6d
}

.react-daterange-picker__button svg {
    display: inherit
}

.react-daterange-picker__calendar {
    width: 350px;
    max-width: 100vw;
    z-index: 1
}

.react-daterange-picker__calendar--closed {
    display: none
}

.react-daterange-picker__calendar .react-calendar {
    border-width: thin
}

.react-calendar {
    width: 350px;
    max-width: 100%;
    background: white;
    border: 1px solid #a0a096;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.125em
}

.react-calendar--doubleView {
    width: 700px
}

.react-calendar--doubleView .react-calendar__viewContainer {
    display: flex;
    margin: -.5em
}

.react-calendar--doubleView .react-calendar__viewContainer>* {
    width: 50%;
    margin: .5em
}

.react-calendar,
.react-calendar *,
.react-calendar *:before,
.react-calendar *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.react-calendar button {
    margin: 0;
    border: 0;
    outline: none
}

.react-calendar button:enabled:hover {
    cursor: pointer
}

.react-calendar__navigation {
    display: flex;
    height: 44px;
    margin-bottom: 1em
}

.react-calendar__navigation button {
    min-width: 44px;
    background: none
}

.react-calendar__navigation button:disabled {
    background-color: #f0f0f0
}

.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
    background-color: #e6e6e6
}

.react-calendar__month-view__weekdays {
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .75em
}

.react-calendar__month-view__weekdays__weekday {
    padding: .5em
}

.react-calendar__month-view__weekNumbers .react-calendar__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75em;
    font-weight: 700
}

.react-calendar__month-view__days__day--weekend {
    color: #d10000
}

.react-calendar__month-view__days__day--neighboringMonth {
    color: #757575
}

.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
    padding: 2em .5em
}

.react-calendar__tile {
    max-width: 100%;
    padding: 10px 6.6667px;
    background: none;
    text-align: center;
    line-height: 16px
}

.react-calendar__tile:disabled {
    background-color: #f0f0f0
}

.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
    background-color: #e6e6e6
}

.react-calendar__tile--now {
    background: #ffff76
}

.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
    background: #ffffa9
}

.react-calendar__tile--hasActive {
    background: #76baff
}

.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
    background: #a9d4ff
}

.react-calendar__tile--active {
    background: #006edc;
    color: #fff
}

.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
    background: #1087ff
}

.react-calendar--selectRange .react-calendar__tile--hover {
    background-color: #e6e6e6
}

:root {
    --map-tiles-filter: brightness(.6) invert(1) contrast(3) hue-rotate(200deg) saturate(.3) brightness(.7)
}

.dashboard__ap__container {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px
}

.dashboad_ap_sidebar {
    grid-area: 1 / 1 / 2 / 2;
    border-left: 1px solid #e1e1e1;
    padding: 30px
}

.dashboad_ap_content {
    grid-area: 1 / 2 / 2 / 6
}

@media (max-width: 1130px) {
    .dashboard__ap__container {
        grid-template-columns: 1fr
    }

    .dashboad_ap_sidebar {
        display: none
    }

    .dashboard_ap_content {
        grid-area: 1 / 1 / 2 / 2
    }
}


.dasboard__ap__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 30px
}

.dashboard__ap__title {
    font-size: 25px;
    font-weight: 500;
    padding: 0;
    margin: 0
}

.dashboard__ap__subtitle {
    font-size: 13px;
    color: #6d6d6d;
    padding-top: 5px
}

.dashboard__ap__action__title {
    font-size: 13px;
    font-weight: 500;
    margin-right: 5px
}

.dashboard__ap__action__container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center
}

.dashboard_ap_action_icon {
    border-radius: 52px;
    width: 26px;
    height: 26px;
    background-color: #f3f2f2
}

.dashboard_ap_object_container {
    padding: 10px 20px
}

.objects__list__container {
    display: flex;
    flex-direction: row;
    justify-content: stretch
}

.objects__list__container>* {
    flex-basis: 100%;
    border: 1px solid #f3f2f2;
    padding-left: 20px;
    padding-bottom: 15px;
    margin-right: 10px;
    border-radius: 5px;
    color: #fff
}

.objects__list__item__subtitle {
    color: #f3f2f2cf;
    margin: 0
}

.icon__list__container {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #ffffff4d;
    margin-right: 20px
}

.item-1 {
    background-color: #4273b3
}

.item-2 {
    background-color: #fda700
}

.item-3 {
    background-color: #9e3db2
}

.objects__list__items_container {
    display: flex;
    flex-direction: row;
    align-items: center
}

.objects__list__item__type {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 3px
}

.objects__list__item__subtitle {
    font-size: 15px
}

.stat__object__container {
    display: flex;
    flex-direction: column
}

.objects_list_item_stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 5px
}

.objects_list_item_stat>* {
    margin-right: 20px
}

.objects_list_item_stat_all {
    font-size: 20px
}

.objects_list_item_stat_in,
.objects_list_item_stat_out {
    display: flex;
    flex-direction: row;
    align-items: center
}

.objects_list_item_stat_in p,
.objects_list_item_stat_out p {
    margin-left: 5px
}

.chart_stat_container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 35px
}

.choice_chart_container {
    padding-left: 20px;
    padding-right: 35px;
    display: flex;
    flex-direction: row
}

.choice_chart_container>:nth-child(1) {
    margin-right: 14px
}

.choice_chart_container>* {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #888;
    cursor: pointer
}

.choice_chart_container div.active {
    font-weight: 700;
    color: #000
}

.chart_stat_content {
    grid-area: 1 / 1 / 2 / 5
}

.activities_stat_content {
    grid-area: 1 / 5 / 2 / 6
}

.activity_received_count {
    text-align: center;
    background-color: #55d64a;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px
}

.activity_send_count {
    text-align: center;
    background-color: #fda700;
    color: #fff;
    padding: 20px;
    border-radius: 5px;

}
.activity_send_count h3 {
    margin-bottom: 3px;
    font-weight: 200;
    font-size: 18px!important;
    text-transform: capitalize;

}

.activity_received_count h3 {
    margin-bottom: 3px;
    font-weight: 200;
    font-size: 18px!important;
    text-transform: capitalize;

}

.activity_received_count h3>span,
.activity_send_count h3>span {
    font-weight: 700;
    text-transform: capitalize;
}

.activity_received_total,
.activity_send_total {
    font-size: 45px
}

.activity_count_container {
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around
}
.filter_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 35px;
}

.date_range_filter_container {
    grid-area: 1 / 1 / 2 / 3;
    display: flex;
    flex-direction: row;
    align-items: center
}

.date_range_filter_container h3 {
    padding: 0;
    margin:0;
    margin-right: 10px;
    font-weight: 200;
    font-size: 18px;
    text-transform: capitalize;
}

.criteria_filter_container {
    grid-area: 1 / 3 / 2 / 6;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center
}

.criteria_filter_container>div {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center
}

.criteria_filter_container>div>p {
    margin: 0;
    padding: 0;
    margin-left: 10px;
    font-size: 15px;

}

.criteria_filter_container select {
    background-color: #f5f5f5;
    border: none !important;
    margin-left: 15px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px !important
}

.criteria_filter_container select:focus,
.criteria_filter_container select:focus-visible {
    border: none !important
}

.map_container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    padding: 20px 35px 50px 20px;
    height: 500px
}

.map_content {
    grid-area: 1 / 1 / 2 / 5
}

.map_stat_content {
    grid-area: 1 / 5 / 2 / 6
}

.usage_container {
    text-align: center;
    background-color: #000;
    color: #fff;
    padding: 20px;
    border-radius: 5px
}

.usage_container h3 {
    margin-bottom: 3px
}

.usage_count_container {
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around
}

.usage_total {
    font-size: 45px
}

.usage_container h3 {
    font-weight: 200;
    font-size: 18px;
    text-transform: capitalize;
    margin-bottom: 3px
}

.usage_container h3>span {
    font-weight: 700
}

.usage_map_header {
    padding: 30px 35px 10px 20px
}

.usage_map_header h3 {
    color: #000;
    font-weight: 700
}

.menu_container {
    margin-top: 50px
}

.menu li {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 15px;
    cursor: pointer
}

.menu_item a {
    color: #888
}

.menu_item a.active {
    font-weight: 700;
    color: #000
}

.menu_item img {
    margin-right: 5px
}

@media screen and (max-width: 837px) {
    #content-view-admin{
        padding-left:0!important;
    }
    .dashboard__ap__container {
        display: block
    }
    .filter_container{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2,1fr);
    }
    .date_range_filter_container,.map_content{
        grid-area: 1;
        grid-row: 2;
        flex-direction: column;
        grid-column-gap: 0;
    }
    .criteria_filter_container,.map_stat_content {
        grid-area: 1;
        grid-row: 1;
        flex-direction: column;
    }
    .map_stat_content{
        margin-bottom: 20px;
    }
    .dashboad_ap_sidebar,
    .dashboad_ap_content {
        grid-area: unset;
        padding: 15px
    }

    .dasboard__ap__header {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        text-align: center;
    }

    .dashboard__ap__action__container {
        width: 100%;
        justify-content: center;
    }

    .dashboard__ap__action__title {
        padding: 0;
        margin: 0;
        margin-right: 5px;

    }

    .objects__list__container {
        flex-direction: column;
        justify-content: flex-start
    }
    .objects__list__items_container{
        margin-bottom: 10px;
    }
    .chart_stat_container,
    .map_container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2,1fr);
        padding-right: 15px
    }
    .chart_stat_content{
        grid-row: 1;
        grid-area: auto;
    }
    .activities_stat_content{
        grid-row: 2;
        grid-area: auto;
    }
    .usage_map_header{
        text-align: center;
    }

}

.map-tiles {
    filter: var(--map-tiles-filter, none)
}

.leaflet-container {
    width: 100%;
    height: 100%
}

.log_container {
    padding-left: 20px;
    padding-right: 35px
}

.dashboard__ap__container th,
.dashboard__ap__container td {
    padding: 8px;
    text-align: left;
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px
}

.dashboard__ap__container .thead-dark {
    background-color: #000;
    color: #fff;
    margin-top: 30px
}