@import url("https://fonts.googleapis.com/css?family=Muli:700");

 .sec_seguimiento {
	 font-family: "Muli", sans-serif;
	 padding: 0 10px;
	 margin: 0;
	 display: flex;
	 position: relative;
     color: #000;
     margin-bottom: 10px;
     
}
 .sec_seguimiento .toggle_line {
	 transform: scale(0.8);
	 position: absolute;
	 bottom: 30px;
	 display: flex;
	 align-items: center;
	 justify-content: space-around;
	 max-width: 140px;
}
 .sec_seguimiento .toggle_line span {
	 margin: 0 0.5rem;
}
 .sec_seguimiento .toggle_line input[type="checkbox"] {
	 height: 0;
	 width: 0;
	 visibility: hidden;
}
 .sec_seguimiento .toggle_line input[type="checkbox"]:checked + label_line {
	 background: #13cb8f;
}
 .sec_seguimiento .toggle_line input[type="checkbox"]:checked + label_line:after {
	 left: calc(100% - 2px);
	 transform: translateX(-100%);
}
 .sec_seguimiento .toggle_line label_line {
	 cursor: pointer;
	 width: 75px;
	 height: 34px;
	 background: #d2d3d8;
	 display: block;
	 border-radius: 40px;
	 position: relative;
}
 .sec_seguimiento .toggle_line label_line:after {
	 content: "";
	 position: absolute;
	 top: 2px;
	 left: 2px;
	 width: 30px;
	 height: 30px;
	 background: #fff;
	 border-radius: 40px;
	 transition: 0.3s;
}
 .sec_seguimiento .main-container {
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 transition: all 200ms ease;
	 background:  #f0f0f0;
	 height: 220px;
	 max-width: 750px;
	 flex-grow: 1;
	 border-radius: 5px;
	 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.14);
}
 .sec_seguimiento .main-container .steps-container {
	 padding: 40px;
	 position: relative;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}
 .sec_seguimiento .main-container .steps-container .step {
	 z-index: 1;
	 position: relative;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 transition: all 200ms ease;
	 flex-grow: 0;
	 height: 15px;
	 width: 15px;
	 border: 4px solid #9799a3;
	 border-radius: 50%;
}
 .sec_seguimiento .main-container .steps-container .step .preloader, .sec_seguimiento .main-container .steps-container .step svg {
	 display: none;
}
 .sec_seguimiento .main-container .steps-container .step.completed {
	 width: 18px;
	 height: 18px;
	 background: #fff;
	 border: none;
}
 .sec_seguimiento .main-container .steps-container .step.completed svg {
	 transition: all 200ms ease;
	 display: block;
	 height: 10px;
	 width: 10px;
	 fill: #5c6174;
}
 .sec_seguimiento .main-container .steps-container .step.in-progress {
	 width: 18px;
	 height: 18px;
	 background: #13cb8f;
	 border: none;
}
 .sec_seguimiento .main-container .steps-container .step.in-progress .preloader {
	 display: block;
	 height: 10px;
	 width: 10px;
	 border: 2px solid #fff;
	 border-radius: 50%;
	 border-left-color: transparent;
	 animation-name: spin;
	 animation-duration: 2000ms;
	 animation-iteration-count: infinite;
	 animation-timing-function: linear;
}
 .sec_seguimiento .main-container .steps-container .step .label_line {
     text-align: center;
	 position: absolute;
	 top: 30px;
	 filter: none;
	 z-index: 2000;
	 color: #9799a3;
	 transition: all 200ms ease;
	 font-weight: 700;
}
 .sec_seguimiento .main-container .steps-container .step .label_line.completed {
	 color: #000;
}
 .sec_seguimiento .main-container .steps-container .step .label_line.loading {
	 color: #13cb8f;
}
 .sec_seguimiento .main-container .steps-container .step .icon {
	 font-size: 40px;
	 position: absolute;
	 top: -60px;
	 color: #9799a3;
	 transition: color 200ms ease;
}
 .sec_seguimiento .main-container .steps-container .step .icon.completed {
	 color: #fff;
}
 .sec_seguimiento .main-container .steps-container .step .icon.in-progress {
	 color: #13cb8f;
}
 .sec_seguimiento .main-container .steps-container .linetime {
	 transition: all 200ms ease;
	 height: 2px;
	 flex-grow: 1;
	 max-width: 120px;
	 background: #9799a3;
}
 .sec_seguimiento .main-container .steps-container .linetime.completed {
	 background: #000;
}
 .sec_seguimiento .main-container .steps-container .linetime.next-step-uncomplete {
	 background: linear-gradient(to right, #fff, #9799a3);
}
 .sec_seguimiento .main-container .steps-container .linetime.next-step-in-progress {
	 background: linear-gradient(to right, #fff, #13cb8f);
}
 .sec_seguimiento .main-container .steps-container .linetime.prev-step-in-progress {
	 background: linear-gradient(to right, #13cb8f, #9799a3);
}
 @keyframes spin {
	 from {
		 transform: rotate(0deg);
	}
	 to {
		 transform: rotate(360deg);
	}
}
.step{
  cursor: pointer;
}