#planificador {
  background: #e7e7e7;
  color: #555;
  font-size: 0.9em;
}

#planificador .header {
  background: #7eb63d;
  padding: 8px 0px 0px 0px;
}

#planificador .header .icon {
  width: 30px;
  height: auto;
  margin: 0px 8px 8px 8px;
}

#planificador .header .title {
  font-weight: bold;
  font-size: 1.5em;
  color: #2e393d;
}

#planificador .form-wrapper {
  margin: 5px;
}

#planificador form {
  margin: 0px;
}

#planificador .span4 {
  width: 100%;
  margin-bottom: 5px;
}

#planificador .span3 {
  width: 75%;
  margin-bottom: 5px;
}

#planificador .span1 {
  width: 20%;
  margin-bottom: 5px;
}


#planificador .span4,
#planificador .span3,
#planificador .span1 {
  margin-left: 0px;
}

#planificador label {
  margin-left: 5px !important;
}

#planificador .btn {
  background: #c7d200;
  border: 1px solid #fff;
  border-radius: 5px;
  text-transform: none;
  color: #fff;
  float: right;
  margin: 0px 0px 5px 0px;
  width: 50%;
}

#planificador .btn:hover {
  background: #2e393d;
}

@media (min-width: 768px ) and (max-width: 899px) {
  #planificador .header .icon {
    width: 25px;
    height: auto;
    margin: 5px 10px 5px 5px;
  }

  #planificador .header .title {
    font-weight: bold;
    font-size: 1em;
    color: #2e393d;
  }

}

@media (min-width: 900px) and (max-width: 979px) {
  #planificador .header .icon {
    width: 25px;
    height: auto;
    margin: 5px 10px 5px 5px;
  }

  #planificador .header .title {
    font-weight: bold;
    font-size: 1em;
    color: #2e393d;
  }
}

@media (min-width: 980px ) and (max-width: 1199px)
{

  #planificador .header .icon {
    width: 35px;
    height: auto;
    margin: 5px 10px 5px 5px;
  }

  #planificador .header .title {
    font-weight: bold;
    font-size: 1.1em;
    color: #2e393d;
  }
}