.st_semaforo {
    padding: 5px;
    vertical-align: middle;
}

.st_process {
    width: 25px;
    height: 25px;
    border-radius: 50px;
    background-color: blueviolet;
    margin: 0px auto;
}


.folMov {
    display: block;
}

.folDesktop {
    display: none;
}

/*@media screen and (min-width: 1024px) {
    .folMov {
        display: none;
    }

    .folDesktop {
        display: block;
    }
}*/

.folMov .list-group-item {
    position: relative; /* Para posicionar el ícono 'info' */
    border-left: 3px solid #004085; /* Borde izquierdo azul */
    border-radius: 0; /* Sin bordes redondeados */
    padding-left: 20px; /* Espaciado interior izquierdo */
    margin-bottom: 10px; /* Espacio entre elementos */
    background-color: #f8f9fa; /* Fondo claro de cada elemento */
}

    .folMov .list-group-item h5 {
        font-size: 1rem; /* Tamaño del título */
        color: #007bff; /* Color azul para el número */
    }

    .folMov .list-group-item p {
        font-size: 0.8rem; /* Tamaño del subtítulo */
        color: #495057; /* Color gris para el texto */
    }

    .folMov .list-group-item small {
        font-size: 1.5rem; /* Tamaño del ícono '>' */
        color: #6c757d; /* Color gris para el ícono */
    }

    /*.folMov .list-group-item::before {
        content: ' ';*/ /* Ícono redondo a la izquierda */
        /*position: absolute;
        left: -12px;*/ /* Posición relativa al borde izquierdo del elemento */
        /*top: calc(50% - 10px);*/ /* Centrado verticalmente */
        /*width: 20px;*/ /* Tamaño del círculo */
        /*height: 20px;
        background-color: #007bff;*/ /* Color de fondo azul */
        /*border-radius: 50%;*/ /* Redondo */
    /*}*/

    .folMov .list-group-item h5 {
        font-size: 1rem; /* Tamaño del título */
        color: #007bff; /* Color azul para el número */
    }

    .folMov .list-group-item p {
        font-size: 0.8rem; /* Tamaño del subtítulo */
        color: #495057; /* Color gris para el texto */
    }

    .folMov .list-group-item.sm-cd-ic::before {
        content: ' '; /* Ícono redondo a la izquierda */
        position: absolute;
        left: -12px; /* Posición relativa al borde izquierdo del elemento */
        top: calc(50% - 10px); /* Centrado verticalmente */
        width: 20px; /* Tamaño del círculo */
        height: 20px;
        background-color: #A4ABE5; /* Color de fondo azul */
        border-radius: 50%; /* Redondo */
    }

    .folMov .list-group-item.sm-ct-ic::before {
        content: ' '; /* Ícono redondo a la izquierda */
        position: absolute;
        left: -12px; /* Posición relativa al borde izquierdo del elemento */
        top: calc(50% - 10px); /* Centrado verticalmente */
        width: 20px; /* Tamaño del círculo */
        height: 20px;
        background-color: #6D76E5; /* Color de fondo azul */
        border-radius: 50%; /* Redondo */
    }

    .folMov .list-group-item.sm-pend-ic::before {
        content: ' '; /* Ícono redondo a la izquierda */
        position: absolute;
        left: -12px; /* Posición relativa al borde izquierdo del elemento */
        top: calc(50% - 10px); /* Centrado verticalmente */
        width: 20px; /* Tamaño del círculo */
        height: 20px;
        background-color: red; /* Color de fondo azul */
        border-radius: 50%; /* Redondo */
    }

    .folMov .list-group-item.sm-rec-ic::before {
        content: ' '; /* Ícono redondo a la izquierda */
        position: absolute;
        left: -12px; /* Posición relativa al borde izquierdo del elemento */
        top: calc(50% - 10px); /* Centrado verticalmente */
        width: 20px; /* Tamaño del círculo */
        height: 20px;
        background-color: #E6070E; /* Color de fondo azul */
        border-radius: 50%; /* Redondo */
    }
    .folMov .list-group-item.sm-mc-ic::before {
        content: ' '; /* Ícono redondo a la izquierda */
        position: absolute;
        left: -12px; /* Posición relativa al borde izquierdo del elemento */
        top: calc(50% - 10px); /* Centrado verticalmente */
        width: 20px; /* Tamaño del círculo */
        height: 20px;
        background-color: #8007E6; /* Color de fondo azul */
        border-radius: 50%; /* Redondo */
    }
    .folMov .list-group-item.sm-vl-ic::before {
        content: ' '; /* Ícono redondo a la izquierda */
        position: absolute;
        left: -12px; /* Posición relativa al borde izquierdo del elemento */
        top: calc(50% - 10px); /* Centrado verticalmente */
        width: 20px; /* Tamaño del círculo */
        height: 20px;
        background-color: #C907E6; /* Color de fondo azul */
        border-radius: 50%; /* Redondo */
    }
    .folMov .list-group-item.sm-cr-ic::before {
        content: ' '; /* Ícono redondo a la izquierda */
        position: absolute;
        left: -12px; /* Posición relativa al borde izquierdo del elemento */
        top: calc(50% - 10px); /* Centrado verticalmente */
        width: 20px; /* Tamaño del círculo */
        height: 20px;
        background-color: #6D76E5; /* Color de fondo azul */
        border-radius: 50%; /* Redondo */
    }

    .folMovs .list-group-item {
        position: relative; /* Para posicionar el ícono 'info' */
        /*border-left: 3px solid #004085;*/ /* Borde izquierdo azul */
        border-radius: 0; /* Sin bordes redondeados */
        padding-left: 20px; /* Espaciado interior izquierdo */
        margin-bottom: 10px; /* Espacio entre elementos */
        background-color: #f8f9fa; /* Fondo claro de cada elemento */
    }

    .folMovs .list-group-item.sm-cr-ic.pendientes::before {
        content: ' '; /* Ícono redondo a la izquierda */
        position: absolute;
        left: -12px; /* Posición relativa al borde izquierdo del elemento */
        top: calc(50% - 10px); /* Centrado verticalmente */
        width: 20px; /* Tamaño del círculo */
        height: 20px;
        background-color: #E50695; /* Color de fondo azul */
        border-radius: 50%; /* Redondo */
    }
    .folMovs .list-group-item.sm-cr-ic.rechazados::before {
        content: ' '; /* Ícono redondo a la izquierda */
        position: absolute;
        left: -12px; /* Posición relativa al borde izquierdo del elemento */
        top: calc(50% - 10px); /* Centrado verticalmente */
        width: 20px; /* Tamaño del círculo */
        height: 20px;
        background-color: #E6070E; /* Color de fondo azul */
        border-radius: 50%; /* Redondo */
    }
    .folMovs .list-group-item.sm-cr-ic.mcontrol::before {
        content: ' '; /* Ícono redondo a la izquierda */
        position: absolute;
        left: -12px; /* Posición relativa al borde izquierdo del elemento */
        top: calc(50% - 10px); /* Centrado verticalmente */
        width: 20px; /* Tamaño del círculo */
        height: 20px;
        background-color: #8007E6; /* Color de fondo azul */
        border-radius: 50%; /* Redondo */
    }
    .folMovs .list-group-item.sm-cr-ic.validaciones::before {
        content: ' '; /* Ícono redondo a la izquierda */
        position: absolute;
        left: -12px; /* Posición relativa al borde izquierdo del elemento */
        top: calc(50% - 10px); /* Centrado verticalmente */
        width: 20px; /* Tamaño del círculo */
        height: 20px;
        background-color: #C907E6; /* Color de fondo azul */
        border-radius: 50%; /* Redondo */
    }
    .folMovs .list-group-item.sm-cr-ic.cerrados::before {
        content: ' '; /* Ícono redondo a la izquierda */
        position: absolute;
        left: -12px; /* Posición relativa al borde izquierdo del elemento */
        top: calc(50% - 10px); /* Centrado verticalmente */
        width: 20px; /* Tamaño del círculo */
        height: 20px;
        background-color: #6D76E5; /* Color de fondo azul */
        border-radius: 50%; /* Redondo */
    }
    .folMovs .list-group-item.sm-cr-ic.cancelados::before {
        content: ' '; /* Ícono redondo a la izquierda */
        position: absolute;
        left: -12px; /* Posición relativa al borde izquierdo del elemento */
        top: calc(50% - 10px); /* Centrado verticalmente */
        width: 20px; /* Tamaño del círculo */
        height: 20px;
        background-color: #A4ABE5; /* Color de fondo azul */
        border-radius: 50%; /* Redondo */
    }

/*('Pendientes', 'sm-pend-ic', 'sm-pend-lb'),
('Rechazos', 'sm-rec-ic', 'sm-rec-lb'),
('MControl', 'sm-mc-ic', 'sm-mc-lb'),
('Validaciones', 'sm-vl-ic', 'sm-vl-lb'),
('Cortes', 'sm-ct-ic', 'sm-ct-lb'),
('Cerrados', 'sm-cr-ic', 'sm-cr-lb'),
('Cancelados', 'sm-cd-ic', 'sm-cd-lb')*/