#mapid {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.container-mapa {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

html,
body {
    height: 100%;
}

#container-notificaciones {
    position: absolute;
    width: 25%;
    top: 0;
    left: 0;
    padding: 10px;
}

.custom-div-icon {
    background-color: transparent;
    border: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-div-icon.camion-container-icon {
    width: 30px;
    height: 30px;
    z-index: 1000;
}

.custom-div-icon .outer-icon {
    font-family: "Material Symbols Outlined";
    font-size: 10px;
    font-variation-settings:
        "FILL" 1,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}

.custom-div-icon .outer-icon-big {
    font-family: "Material Symbols Outlined";
    font-size: 36px;
    font-variation-settings:
        "FILL" 1,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}

.custom-div-icon .outer-icon-medium {
    font-family: "Material Symbols Outlined";
    font-size: 20px;
    font-variation-settings:
        "FILL" 1,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}

.notificacion-container-icon .inner-icon {
    font-size: 10px;
    margin-bottom: 4px;
}

.custom-div-icon .outer-patch {
    font-family: "Material Symbols Outlined";
    font-size: 20px;
    position: absolute;
    font-variation-settings:
        "FILL" 1,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}

.custom-div-icon .inner-icon {
    font-family: "Material Symbols Outlined";
    font-size: 8px;
    position: absolute;
    font-variation-settings:
        "FILL" 0,
        "wght" 200,
        "GRAD" 0,
        "opsz" 24;
}

.custom-div-icon.camion-container-icon .inner-icon {
    font-size: 16px;
    margin-top: -5px;
}

.custom-div-icon.cliente-container-icon .inner-icon {
    font-size: 8px;
    font-variation-settings:
        "FILL" 1,
        "wght" 200,
        "GRAD" 0,
        "opsz" 24;
}

.custom-div-icon.cliente-container-icon .outer-icon {
    font-size: 8px;
}

.custom-div-icon.cliente-container-icon.estado-venta-realizada .inner-icon {
    font-variation-settings:
        "FILL" 1,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}

.custom-div-icon.punto-container-icon .outer-icon {
    font-family: "Material Symbols Outlined";
    font-size: 8px;
    font-variation-settings:
        "FILL" 1,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}

.leaflet-popup-content-wrapper {
    background-color: white;
    color: black;
    font-size: 15px;
    font-weight: 400;
    font-family: "Archivo", sans-serif;
}

.leaflet-popup-content-wrapper h1 {
    font-size: 23px;
    font-weight: 600;
}

.leaflet-popup-content-wrapper h2 {
    font-size: 18px;
    font-weight: 600;
}

.leaflet-popup-content-wrapper p {
    margin: 8px 0;
}

/* first p */
.leaflet-popup-content-wrapper p:first-of-type {
    margin-top: 18px;
}

.leaflet-popup-content-wrapper .link {
    margin-top: 18px;
}

.leaflet-popup-content .custom-div-icon .inner-icon {
    font-size: 22px;
    position: relative;
    display: inline;
}

.leaflet-popup-content .custom-div-icon {
    position: relative;
    display: inline;
}

.header-map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: white;
    padding: 10px;
    display: block;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.color-red {
    color: red;
}
.color-orange {
    color: orange;
}
.color-green {
    color: green;
}
.color-blue {
    color: blue;
}
.color-purple {
    color: purple;
}
.color-darkred {
    color: #8b0000; /* Código hexadecimal para darkred */
}
.color-darkblue {
    color: #00008b; /* Código hexadecimal para darkblue */
}
.color-darkgreen {
    color: #006400; /* Código hexadecimal para darkgreen */
}
.color-darkpurple {
    color: #800080; /* Código hexadecimal aproximado para darkpurple */
}
.color-cadetblue {
    color: #5f9ea0; /* Código hexadecimal para cadetblue */
}
.color-lightred {
    color: #ffb6c1; /* Código hexadecimal aproximado para lightred */
}
.color-beige {
    color: beige;
}
.color-lightgreen {
    color: lightgreen;
}
.color-lightblue {
    color: lightblue;
}
.color-pink {
    color: pink;
}
.color-palered {
    color: #ffa07a; /* Código hexadecimal aproximado para palered */
}
.color-white {
    color: white;
}
.color-lightgray {
    color: lightgray;
}
.color-gray {
    color: gray;
}
.color-black {
    color: black;
}

.color-red-light {
    color: #ff9999; /* Un rojo más claro */
}

.color-orange-light {
    color: #ffd699; /* Un naranja más claro */
}

.color-green-light {
    color: #99ff99; /* Un verde más claro */
}

.color-blue-light {
    color: #99ccff; /* Un azul más claro */
}

.color-purple-light {
    color: #d699ff; /* Un púrpura más claro */
}

.color-darkred-light {
    color: #cc6666; /* Un darkred más claro */
}

.color-darkblue-light {
    color: #6666cc; /* Un darkblue más claro */
}

.color-darkgreen-light {
    color: #66cc66; /* Un darkgreen más claro */
}

.color-darkpurple-light {
    color: #d0acd1; /* Un darkpurple más claro */
}

.color-cadetblue-light {
    color: #a0ced9; /* Un cadetblue más claro */
}

.color-lightred-light {
    color: #ffdde1; /* Un lightred más claro */
}

.color-beige-light {
    color: #fff5e1; /* Un beige más claro */
}

.color-lightgreen-light {
    color: #ccffcc; /* Un lightgreen más claro */
}

.color-lightblue-light {
    color: #cce5ff; /* Un lightblue más claro */
}

.color-pink-light {
    color: #ffcce5; /* Un pink más claro */
}

.color-palered-light {
    color: #ffd6b3; /* Un palered más claro */
}

.color-white-light {
    color: #ffffff; /* El blanco no tiene variante más clara */
}

.color-lightgray-light {
    color: #e0e0e0; /* Un lightgray más claro */
}

.color-gray-light {
    color: #b3b3b3; /* Un gray más claro */
}

.color-black-light {
    color: #666666; /* Un black más claro */
}

.color-magenta {
    color: magenta;
}

.messages {
    z-index: 1000;
    position: absolute;
    margin-left: 100px;
}