:root {
  --ancho-timeline: 6rem;
  --before-width: 2rem;
  --before-right: 7.2rem;
  --after-width: 2rem;
  --after-left: 7rem;
}
.timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}
.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}

@media (min-width:768px) {
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #3b82f6;
        width: var(--after-width);
        position: absolute;
        left: var(--after-left);
        top: .3125rem
    }
    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #3b82f6;
        width: var(--before-width);
        position: absolute;
        right: var(--before-right);
        top: .3125rem
    }
}

.timeline-steps .timeline-content {
    width: var(--ancho-timeline);
    text-align: center
}

.timeline-steps .timeline-content .inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3b82f6
}

.timeline-steps .timeline-content .inner-circle:before {
    content: "";
    background-color: #3b82f6;
    display: inline-block;
    height: 2rem;
    width: 2rem;
    min-width: 2rem;
    border-radius: 4rem;
    opacity: .5
}


.rojo_timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}
.rojo_timeline-steps .rojo_timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}

@media (min-width:768px) {
    .rojo_timeline-steps .rojo_timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #DC110C;
        width: var(--after-width);
        position: absolute;
        left: var(--after-left);
        top: .3125rem
    }
    .rojo_timeline-steps .rojo_timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #DC110C;
        width: var(--before-width);
        position: absolute;
        right: var(--before-right);
        top: .3125rem
    }
}

.rojo_timeline-steps .rojo_timeline-content {
    width: var(--ancho-timeline);
    text-align: center
}

.rojo_timeline-steps .rojo_timeline-content .rojo_inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #DC110C
}

.rojo_timeline-steps .rojo_timeline-content .rojo_inner-circle:before {
    content: "";
    background-color: #DC110C;
    display: inline-block;
    height: 2rem;
    width: 2rem;
    min-width: 2rem;
    border-radius: 4rem;
    opacity: .5
}


.rojo2_timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}
.rojo2_timeline-steps .rojo2_timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}

@media (min-width:768px) {
    .rojo2_timeline-steps .rojo2_timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #F9400F;
        width: var(--after-width);
        position: absolute;
        left: var(--after-left);
        top: .3125rem
    }
    .rojo2_timeline-steps .rojo2_timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #F9400F;
        width: var(--before-width);
        position: absolute;
        right: var(--before-right);
        top: .3125rem
    }
}

.rojo2_timeline-steps .rojo2_timeline-content {
    width: var(--ancho-timeline);
    text-align: center
}

.rojo2_timeline-steps .rojo2_timeline-content .rojo2_inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #F9400F
}

.rojo2_timeline-steps .rojo2_timeline-content .rojo2_inner-circle:before {
    content: "";
    background-color: #F9400F;
    display: inline-block;
    height: 2rem;
    width: 2rem;
    min-width: 2rem;
    border-radius: 4rem;
    opacity: .5
}

.naranja_timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}
.naranja_timeline-steps .naranja_timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}

@media (min-width:768px) {
    .naranja_timeline-steps .naranja_timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #F98F10;
        width: var(--after-width);
        position: absolute;
        left: var(--after-left);
        top: .3125rem
    }
    .naranja_timeline-steps .naranja_timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #F98F10;
        width: var(--before-width);
        position: absolute;
        right: var(--before-right);
        top: .3125rem
    }
}

.naranja_timeline-steps .naranja_timeline-content {
    width: var(--ancho-timeline);
    text-align: center
}

.naranja_timeline-steps .naranja_timeline-content .naranja_inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #F98F10
}

.naranja_timeline-steps .naranja_timeline-content .naranja_inner-circle:before {
    content: "";
    background-color: #F98F10;
    display: inline-block;
    height: 2rem;
    width: 2rem;
    min-width: 2rem;
    border-radius: 4rem;
    opacity: .5
}

.morado_timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}
.morado_timeline-steps .morado_timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}

@media (min-width:768px) {
    .morado_timeline-steps .morado_timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #7620FF;
        width: var(--after-width);
        position: absolute;
        left: var(--after-left);
        top: .3125rem
    }
    .morado_timeline-steps .morado_timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #7620FF;
        width: var(--before-width);
        position: absolute;
        right: var(--before-right);
        top: .3125rem
    }
}

.morado_timeline-steps .morado_timeline-content {
    width: var(--ancho-timeline);
    text-align: center
}

.morado_timeline-steps .morado_timeline-content .morado_inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #7620FF
}

.morado_timeline-steps .morado_timeline-content .morado_inner-circle:before {
    content: "";
    background-color: #7620FF;
    display: inline-block;
    height: 2rem;
    width: 2rem;
    min-width: 2rem;
    border-radius: 4rem;
    opacity: .5
}

.gris_inner-circle {
	background-color: #ccc !important;	
}
.gris_inner-circle:before {
	background-color: #ccc !important;	
}
.gris_timeline-step:before {
	border-top: .25rem dotted #ccc !important;
}
.gris_timeline-step:after {
	border-top: .25rem dotted #ccc !important;
}
.rojo_Inactivo_1:before {
	border-top: .25rem dotted #DC110C !important;
}
.rojo2_Inactivo_1:before {
	border-top: .25rem dotted #F9400F !important;
}
.naranja_Inactivo_1:before {
	border-top: .25rem dotted #F98F10 !important;
}
.morado_Inactivo_1:before {
	border-top: .25rem dotted #7620FF !important;
}
.inner-circle-solo {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3b82f6
}
.inner-circle-solo:before {
    content: "";
    background-color: inherit;
    display: inline-block;
    height: 2rem;
    width: 2rem;
    min-width: 2rem;
    border-radius: 4rem;
    opacity: .5
}
.rayita {
	    content: "";
        display: block;
        width: 100%;
        position: absolute;
        top: 9px;
}
.rayitaV {
    width: 2px;
    border-left: 1px solid #3C3C3C;
    height: calc(100% - 14px);
    position: absolute;
    text-align: center;
    margin: 0px auto;
    left: calc(50% - 8px);
    top: 32px;
}

.inner-circle-solo-v {
    border-radius: 20px;
    height: 15px;
    width: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3b82f6;
	border: 1px solid #F98F10;
}

   .parent{
     max-height: calc(100vh - 200px);
     overflow-x: scroll;
     float:left;
   }
   .child{

     float:left;
     font-size:15px;
     font-family:arial;
     cursor: pointer;

   }
   .my_bb{background-color: black;}
   .my_table{
     min-width:100%;
     /* background-color: black; */
     color:white;
   }
   .my_table>*>*>*{
     padding: 10px;
     white-space: nowrap;
     height: inherit;
   }
   .my_table>*>*>th{
     /* border: 1px solid #525252; */
   }
   .my_table>*>*>td{
     /* border-top: 1px solid #525252; */
   }
   .my_table>*>tr{height: 0px;}
   .my_table>*>*>th{text-transform: uppercase;}
   .pm-0{
     padding-right: 0px !important;
     padding-left: 0px !important;
   }
   /* .my_overflow{
     overflow: auto;
     height: calc(100vh - 250px);
   } */
   .my_text_overflow{
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     width: 300px;
   }
   .my_text_overflow:hover{white-space: normal !important;}
   .progress {
     height: 20px !important;
     background-color: #f0f0ff2e !important;
     border-radius: 6px !important;
   }
   .progress-bar{height: 20px !important;}


   .my_container_div{
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .border_x{
     border-left: 1px solid #525252 ;
     border-right: 1px solid #525252 ;
   }
   .border_l{
     border-left: 1px solid #525252 ;
   }
   @media (min-width: 600px) {
     .my_fixed{
       padding: 0px;
       position: sticky;
       background-color: #000000;
       border-left: none !important;
       border-right: none !important;
     }
     .my_container_div {
       /* border-left: 1px solid #525252; */
       /* border-right: 1px solid #525252; */
       padding: 10px;
       height: 100%;
     }
   }
   .div_category{
     /* border-left: 1px solid #525252; */
     /* border-right: 1px solid #525252; */
     padding: 10px;
     height: 100%;
     color: black;
     /* background-color: #313131 !important; */
   }
 *::-webkit-scrollbar {
     width: 5px;
     height: 8px;
     transition: .3s background;
 }

 ::-webkit-scrollbar-thumb {
     background: #a9a9a9;
 }