
*{
    padding: 0px;
    margin: 0px;
    font-family: 'Poppins';
    outline: none;
}
a, a:hover{
    color: #000;
    text-decoration: none;
}
body{
    font-family: 'Poppins';
    background: rgb(42,63,205);
background: radial-gradient(circle, rgba(42,63,205,1) 29%, rgba(13,26,108,1) 100%);
}
ul{
    padding: 0px;
    margin: 0px;
}
.padding-items{
   
padding-right: 15px;
   
position: relative;
   
padding-left: 180px;
}
.depart-name{
    position: absolute;
    left: -12px;
    text-align: center;
    width: 170px;
}
.img-station{
    max-width: 100%;
}
.depart-name h3{
    position: absolute;
    bottom: 30px;
    left: 18px;
    text-align: center;
    color: #fff;
    /* font-size: 20px; */
}
.big-items{
    padding: 15px;
    border-radius: 20px;
    color: #fff;
    text-align: center;
    width: 100%;
    margin-bottom: 5px;
    position: relative;
}
.start-item{
    background-color: #0D1A6C;
    border: 4px solid #F6B21B;
}
.run-item{
    background-color: #0D1A6C;
    border: 4px solid #41E211;
}

.end-item{
    background-color: #6C0D0D;
    border: 4px solid #FF0000;
}


.timer {
    font-size: 20px;
    font-weight: bold;margin:0 auto;
  }
  .start-item .timer{ 
    color: #F6B21B;
  }
  .run-item .timer{ 
    color: #41E211;
  }

  .end-item .timer{ 
    color: #FF0000;
  }

.img-container{
    height: 132px;
    display: grid;
    align-items: center;
    align-content: center;
}
.img-container img{
    max-height: 132px;
    margin: 0 auto;
}
.big-img{
    max-width: 100%;
 
}
.big-items h3{
    font-size: 20px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    font-weight: bold;
    height: 23px;
}
.big-items h6{
    font-size: 20px;
    text-transform: uppercase;
    margin-top: 10px;
}

.li-items {
    display: flex;
    flex-wrap: wrap;
}
.li-items li{
    width: 20%;
    padding:5px ;
    text-align: center;
    list-style: none;
    flex: 0 0 auto;
}


  
  #controls {
    margin:0 auto;
  }
  
  #controls button {
    font-size:24px;
  }
  .progress-item{
    background-color: #1E8900;
    border-radius: 20px;
    height: 20px;
    display: none;

  }
 
  .progress-item .progress-bar{
    background-color: #41E211;
  }
.btn-start{
    background-color:#F6B21B ;
    color: #fff;
    border-radius: 20px;
    border: none;
    outline: none;
    width: 100%;
    font-weight: bold;
    display: block;
    height: 20px;
    font-size: 14px;
    display: none;
}
.btn-end{
    background-color:#FF0000 ;
    color: #fff;
    border-radius: 20px;
    border: none;
    outline: none;
    width: 100%;
    display: block;
    height: 20px;
    display: none;

}
.btn-reload{
    background-color: #41e211;
    border-radius: 10px 0px 5px 0px;
    padding: 3px;
    position: absolute;
    font-size: 14px;
    left: 0px;
    top: 0px;
    display: none;
    cursor: pointer;
}
.run-item .btn-reload{
    display: inline-block;
}
.start-item .btn-start{
   display: block;
}
.run-item .progress-item{
    display: flex;
}

.end-item .btn-end{
    display: block;
}

.container-h3{
    padding-right: 73px;
    text-align: left;
    position: relative;
}
.container-h3 h3{
    height: 30px;
    line-height: 20px;
    margin-bottom: 11px;
    margin-top: -6px;
}
.img-Hor{
    position: absolute;
    right: -10px;
    top: 0px;
    width: 78px;
}

.line-item{
    height: 5px;background-color: #F6B21B;
    border-radius: 60px;
    margin: 10px 0px;
}
.logo-item{
    margin-bottom: 15px;
}