:root {
  --primary-color: #25b091;
  --secondary-color: #00c29d;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.form-group{position: relative;    margin: 10px 0px;}
.group_time select{min-width: 120px; border-color:var(--primary-color)}
.group_time .points{justify-content: center; background-color: var(--primary-color); padding: 5px; color: white; font-weight: 600; border-radius: 20px;}
.group_time label{margin: 0 10px;}

.error{
  position: absolute;
    background: #ff6b6b;
    padding: 1px 20px;
    border-radius: 20px;
    color: white;
    font-weight: 400;
    font-size: .9rem;
    left: 0;
    top: -20px;
}
#resultados{margin-bottom: 30px;}
#calculadora,
#resultados,
#kmakm,
#cada5min,
.hour{animation: fadein .4s linear;}
.advice{border:1px solid var(--primary-color);padding:10px 15px;border-radius:20px;margin-top:10px;text-align:center;color: white;text-transform: uppercase;font-weight:bold;background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));}
.advice p{margin: 0;}
.title{font-family: 'Orbitron';font-size: 1.6rem;color: var(--primary-color);margin: 0;text-transform: uppercase;}
.group_radios{position: relative;}
.group_radios label input{opacity: 0; position: absolute; z-index: -999;}
.group_radios label{border: 3px solid transparent;padding:10px 30px;transition:.4s all;margin: 10px 5px;}
.group_radios label{text-align:center; font-weight:bold;}

.group_radios label:hover,
.group_radios label:focus,
.group_radios label.active{border: 3px solid var(--primary-color);transform:scale(1.02) translateY(-5px) skewX(-10deg);color: var(--primary-color);background: white;}

.group_time input{border: 1px solid var(--primary-color);}

.ruta{font-size: 2rem;color:white;text-align: center !important; font-family: 'Orbitron';padding: 20px;transform: skewX(-10deg);min-width: 125px;}
.ruta span{transform: skewX(10deg);display: flex;}
.ruta.k6{background-color: #ADE394;}
.ruta.k11{background-color: #00C19D;}
.ruta.k21{background-color: #007EB4;}

.group_radios.modo label{background-color: white;color: #c2c2c2;border: 2px solid #cecece;transform: skewX(-10deg)}
.group_radios.modo label:hover,
.group_radios.modo label:focus,
.group_radios.modo label.active{background-color: white;transform: scale(1.02) translateY(-5px) skewX(-10deg);color: var(--primary-color);border: 2px solid var(--primary-color);}

#btn_calcular{  transition: .4s all;  font-family: "Orbitron", Sans-serif;font-size: 1.5rem;font-weight: 600;text-transform: uppercase;fill: #FFFFFF;color: #FFFFFF;background-image: linear-gradient(-90deg, var(--e-global-color-primary) 0%, var(--e-global-color-03bf959) 100%);}
#btn_calcular:hover{transform: scale(1.02);}

.dt-column-title{text-align: center; color: var(--primary-color);}
table td, table th{    border: 1px solid transparent;line-height: 1.5;padding: 15px;vertical-align: top;}

#table_cada5min_wrapper,
#table_kmakm_wrapper{border-radius: 20px;border: 3px solid var(--primary-color);padding: 20px;overflow-x: auto;margin-top: 20px;}
table.dataTable{width: 100%;}
table.dataTable td{    text-align: center !important;color: #00374E;font-weight: 400;}
tbody, td, tfoot, th, thead, tr{    border-color: transparent !important;border-style: solid;border-width: 0px;}

#resultados .btn-group .btn{border-radius: 40px;border: 1px solid #188ab6;padding: 4px 10px;}
#resultados .btn-group .btn.active{border-radius: 40px;background-color: #188ab6;color: white;}

@media (max-width: 640px) {

  .group_radios{flex-wrap: wrap;}
  .ruta{font-size: 1.3rem;    min-width: 95px;}
  .group_radios label{padding: 10px 20px;}
  .title{font-size: 1.4rem;}
  .group_time select{ min-width: 90px;}
}