.leaflet-container:focus,
.leaflet-container:focus-visible {
    outline: none;
}

.map {
    display: flex;
    flex-flow: row;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 84vh;

    .map-map {
        flex-grow: 1;
        width: 75%;
        height: 100%;
        transition: width 0.3s linear;

        &.w-full {
            width: 100%;
        }

        .map-device-label, .map-vehicle-label, .map-refuel-label, .map-trip-label {
            width: fit-content;
            text-align: center;
            background-color: #1a508b;
            color: white;
            font-weight: bold;

            &:after {
                content: '';
                display: block;
                position: absolute;
                left: 50%;
                top: 100%;
                width: 0;
                height: 0;
                margin-top: -1px;
                margin-left: -10px;
                border-top: 10px solid #1a508b;
                border-right: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-left: 10px solid transparent;
            }
        }

        .map-trip-label {
            &.map-trip-label-start {
                background-color: #3771c8;

                &:after {
                    border-top: 10px solid #3771c8;
                }
            }

            &.map-trip-label-finish {
                background-color: green;

                &:after {
                    border-top: 10px solid green;
                }
            }
        }
    }

    .map-map-render {
        height: 100%;
    }

    .map-list {
        width: 25%;
        height: 100%;
        overflow: auto;
        transition: width 0.3s linear;
        position: relative;

        &.map-list-large {
            width: 60%;
        }

        table {
            width: 100%;

            thead {
                > tr {
                    > th {
                        padding: 0.25rem;
                    }
                }
            }

            tbody {
                > tr {
                    &.selected {
                        background-color: #a3ea9a;

                        > td {
                            background: none;
                        }
                    }

                    > td {
                        padding: 0.25rem;
                    }
                }
            }
        }
    }

    &.map-list-hidden {
        .map-map {
            width: 97%;
        }

        .map-list {
            width: 3%;
            overflow: hidden;

            .map-list-toggle {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                margin: 0;
                border: 0;
                background: white;
                border-radius: 0;
                padding-top: 1rem;
            }
        }
    }

    @media (max-width: 768px) {
        display: block;
        height: auto;

        .map-map {
            width: 100% !important;
            height: 70vh;
        }

        .map-list {
            width: 100% !important;
            overflow: auto !important;
            height: 70vh;
        }

        .map-list-toggle {
            display: none;
        }
    }
}

.map-fence, .map-polygon, .map-point, .map-heat {
    width: 100%;
    height: 85vh;
}
