/*Icones Lucide https://lucide.dev/ */
.Icones-MainMenu {
    color: hsl(0, 0%, 80%);
    /* Change the color */
    width: 19px;
    /* Set the width */
    height: 19px;
    /* Set the height */
    stroke-width: 1.5px;
    /* Adjust the stroke width */
}

.Icones-KPICheck {
    color: #BDBDBD;
    /* Change the color */
    width: 15px;
    /* Set the width */
    height: 15px;
    /* Set the height */
    stroke-width: 1px;
    /* Adjust the stroke width */
    margin-left: 10px;
}

.Icones-Opcoes {
    /* Change the color */
    width: 16px;
    /* Set the width */
    height: 15px;
    /* Set the height */
    stroke-width: 2.5px;
    /* Adjust the stroke width */
}

.Icones-Header {
    color: hsla(0, 0%, 10%, 0.1);
    /* Change the color */
    width: 40px;
    /* Set the width */
    height: 40px;
    /* Set the height */
    stroke-width: 1.5px;
    /* Adjust the stroke width */
    margin-right: 10px;
}

.os-indicador {
    position: absolute;
    top: 0%;
    /* right: 0%; */
    /* left: 90%; */
    bottom: 60%;
    height: 22px;
    width: 22px;
    background-color: brown;
    border: 0px solid rgb(51, 51, 51);
    border-radius: 50%;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    margin-left: 7px;
    text-align: center;
    color: #fff;
    font-size: small;
}

.btn-close-white {
    color: #fff;
    opacity: 0.9;
}

.crux-view-simples {}

.crux-view-simples .card-1 {
    box-shadow: none !important;
}

.crux-view-simples .rounded {
    border-radius: 0px !important;
}

.crux-view-simples .bg-light {
    background-color: #fff !important;
}

.crux-view-simples .border {
    border: none !important;
}

.crux-view-simples .fw-bold {
    font-weight: 500 !important;
}

.controle-map {
    background-color: white;
    border: 2px solid gray;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
}

/* Crux Endereços */
.crux-endereco {
    font-size: 13px;
}

.crux-cidade {
    font-size: 12px;
}

.crux-icone1 {
    color: hsl(0, 0%, 80%);
    /* Change the color */
    width: 20px;
    /* Set the width */
    height: 20px;
    /* Set the height */
    stroke-width: 1.5px;
    /* Adjust the stroke width */
}

.crux-icone-bg-marcador {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22currentColor%22%20class%3D%22size-6%22%3E%0A%20%20%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M15%2010.5a3%203%200%201%201-6%200%203%203%200%200%201%206%200Z%22%20%2F%3E%0A%20%20%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M19.5%2010.5c0%207.142-7.5%2011.25-7.5%2011.25S4.5%2017.642%204.5%2010.5a7.5%207.5%200%201%201%2015%200Z%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.crux-icone-coletas {
    /* max-width: 22px; */
    max-height: 22px;
}

/* Crux Timeline */
:root {
    --c-grey-100: #f4f6f8;
    --c-grey-200: #e3e3e3;
    --c-grey-300: #b2b2b2;
    --c-grey-400: #7b7b7b;
    --c-grey-500: #3d3d3d;
    --c-blue-500: #688afd;
}

.crux-timeline {}

.crux-timeline a {
    color: inherit;
}

.crux-timeline img {
    display: block;
    max-width: 100%;
}


.crux-timeline .timeline {
    width: 85%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    padding: 32px 0 32px 32px;
    border-left: 2px solid var(--c-grey-200);
    font-size: 1.125rem;
}

.crux-timeline .timeline-item {
    display: flex;
    gap: 24px;

    &+* {
        margin-top: 24px;
    }

    &+.extra-space {
        margin-top: 48px;
    }
}

.crux-timeline .timeline-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: -52px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0 0 6px #fff;

    svg {
        width: 20px;
        height: 20px;
    }

    &.faded-icon {
        background-color: var(--c-grey-100);
        color: var(--c-grey-400);
    }

    &.filled-icon {
        background-color: var(--bs-success);
        color: #fff;
    }
}

.crux-timeline .timeline-item-description {
    display: flex;
    padding-top: 6px;
    gap: 8px;
    color: var(--c-grey-400);
    font-size: 13px;

    img {
        flex-shrink: 0;
    }

    a {
        color: var(--c-grey-500);
        font-weight: 500;
        text-decoration: none;

        &:hover,
        &:focus {
            outline: 0;
            color: var(--c-blue-500);
        }
    }
}

.crux-timeline .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    width: 40px;
    height: 40px;

    &.small {
        width: 28px;
        height: 28px;
    }

    img {
        object-fit: cover;
    }
}

.crux-timeline .comment {
    margin-top: 12px;
    color: var(--c-grey-500);
    border: 1px solid var(--c-grey-200);
    box-shadow: 0 4px 4px 0 var(--c-grey-100);
    border-radius: 6px;
    padding: 16px;
    font-size: 0.9rem;
}

.crux-timeline .comment p {
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}

.crux-timeline .comment img {
    width: 75px;
    height: 75px;
    display: inline-block;
}

/* Pagina WEBGIS */
#crux-filtro {
    position: absolute;
    top: 20px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.81);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    /* Adiciona z-index para sobrepor ao mapa */
}

#map-gis {
    width: 100%;
    /* 100% da largura da viewport */
    height: 75vh;
    /* 100% da altura da viewport */
}

.label-circle {
    width: 20px;
    /* Diâmetro do círculo */
    height: 20px;
    /* Diâmetro do círculo */
    background-color: blue;
    /* Cor do círculo */
    border-radius: 50%;
    /* Torna o elemento redondo */
    margin-right: 8px;
    /* Espaço entre o círculo e o texto */
}

.crux-btn-alerta {
    background-color: transparent;
    border-color: transparent;
}

.crux-btn-alerta:hover {
    background-color: transparent;
    border-color: transparent;
}

.crux-gray-400 {
    color: #BDBDBD;
}

.crux-gray-500 {
    color: #9E9E9E;
}

.crux-gray-600 {
    color: #757575;
}

.crux-gray-700 {
    color: #616161;
}

.crux-gray-800 {
    color: #424242;
}

.crux-gray-900 {
    color: #212121;
}

.crux-fs-09 {
    font-size: 0.9rem;
}

.crux-fs-08 {
    font-size: 0.8rem;
}

.crux-fs-07 {
    font-size: 0.7rem;
}

.crux-fs-06 {
    font-size: 0.6rem;
}

.crux-fs-05 {
    font-size: 0.5rem;
}

.crux-placa {
    width: 100%;
    height: 50px;
    background-color: #fff;
    opacity: 0.9;
    border: 2px solid #BDBDBD;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); */
    font-family: 'Arial', sans-serif;
    position: relative;
}

.crux-placa .topo {
    position: absolute;
    top: 3px;
    font-size: 8px;
    font-weight: bold;
    color: black;
}

.crux-placa .caracteres {
    font-size: 12px;
    color: blue;
    font-weight: bold;
    letter-spacing: 6px;
}

.crux-placa .rodape {
    position: absolute;
    bottom: 2px;
    font-size: 8px;
    color: black;
}

.crux-combustivel .fuel-gauge {
    position: relative;
    width: 90%;
    height: 20px;
    background: #E0E0E0;
    border-radius: 20px;
    overflow: hidden;
    border: 1.5px solid #BDBDBD;
    margin-bottom: 10px;
}

.crux-combustivel .fuel-ticks {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

.crux-combustivel .tick {
    width: 2px;
    height: 20px;
    background: #EEEEEE;
}

.crux-combustivel .fuel-level-low {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, #E57373, #E57373);
    border-radius: 20px 0 0 20px;
    transition: width 0.5s ease-in-out;
    z-index: 0;
}

.crux-combustivel .fuel-level {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, #E57373, #81C784);
    border-radius: 20px 0 0 20px;
    transition: width 0.5s ease-in-out;
    z-index: 0;
}


.user-avatar {
    position: relative;
    width: 35px;
    /* Tamanho da foto do usuário */
    height: 35px;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Faz a imagem ficar redonda */
}

.online-indicator {
    position: absolute;
    bottom: 0;
    right: -5px;
    width: 15px;
    /* Tamanho do círculo indicador */
    height: 15px;
    background-color: green;
    /* Cor do indicador online */
    border-radius: 50%;
    /* Faz o indicador ficar redondo */
    border: 2px solid white;
    /* Borda branca ao redor do indicador */
}

.parado-indicator {
    position: absolute;
    bottom: 0;
    right: -5px;
    width: 15px;
    /* Tamanho do círculo indicador */
    height: 15px;
    background-color: #B71C1C;
    /* Cor do indicador online */
    border-radius: 20%;
    /* Faz o indicador ficar redondo */
    border: 2px solid white;
    /* Borda branca ao redor do indicador */
}

.crux-bg-coleta {
    color: #fff;
    background-color: #e54304;
}

.crux-bg-entrega {
    color: #fff;
    background-color: #4A148C;
}

.Icones-Legenda {
    color: #fff;
    stroke-width: 1.3px;
    width: 16px;
    height: 16px;
}

.Icones-Legenda2 {
    color: #fff;
    stroke-width: 2.5px;
    width: 16px;
    height: 16px;
    margin-left: 2px;
}

.crux-info-ult-ocorrencias {
    
}

.crux-info-ult-ocorrencias .nav-link {
    font-size: 0.8rem;
}

/* Background Video Login */
#backgroundVideo {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translate(-50%, -50%);
}