.services-container {
  border: 1px solid $light-grey;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.transportation-cards-container {
  margin-top: 15px;
  .transportation {
    &.disabled {
      .panel {
        border-color: $light-grey;
        overflow: hidden;
        .panel-heading {
          background-color: #dfdfdf;
          color: $base-grey;
          @include shadow(1);
          .ion-circle--white {
            background: $base-grey;
            color: #FCFCFC;
          }
        }
        .panel-body {
          label {
            color: $dark-grey;
          }
          .transportation-icons-wrapper {
            .disabled {
              opacity: 1;
            }
          }
        }
      }
    }
    .panel-transportation {
      min-height: 365px;
      border: 1px solid $light-grey;
      .panel-body {
        border: 0;
      }
      hr.mini {
        margin-top: 10px;
        margin-bottom: 5px;
      }
      .transportation-elements {
        border-bottom: 1px solid #ddd;
        &:nth-child(3) {
          border-bottom: 0;
        }
      }
      .transportation-icons-wrapper {
        display: flex;
        justify-content: space-around;
        align-items: start;
        .btn {
          background-color: transparent;
          padding: 0 5px;
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: space-around;
          &:focus {
            outline: none;
          }
          &:active {
            box-shadow: none;
            color: $medium-blue;
            transition: .3s color ease-in;
          }
          &:hover {
            border-color: transparent;
          }
          &.active {
            box-shadow: none;
            &:before {
              border: 2px solid $base-blue;
              border-radius: 50%;
              padding: 0;
              color: $base-blue;
            }
          }
          &.disabled {
            border: none;
            color: #a6a6a6;
            &:before {
              color: #a6a6a6;
            }
          }
          &:before {
            display: inline-block;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            text-rendering: auto;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: greyscale;
            color: $base-blue;
            height: 44px;
            width: 44px;
          }
          &.btn-flight {
            &:before {
              font-family: "Ionicons";
              content: "\f214";
              font-size: 2em;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          &.btn-train {
            &:before {
              font-family: "Ionicons";
              content: "\f3b4";
              font-size: 2em;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          &.btn-flight-train {
            &:before {
              font-family: "CostaOTO";
              content: "\e93c";
              font-size: 2em;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          &.btn-flight-bus {
            &:before {
              font-family: "CostaOTO";
              content: "\e944";
              font-size: 2em;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          &.btn-bus {
            &:before {
              font-family: "Ionicons";
              content: "\f36d";
              font-size: 2em;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
      .form-transportation {
        margin-bottom: 0;
      }
      .btn-group-ios {
        width: 100%;
        .btn-primary-trasparent {
          width: 50%;
          &:first-child {
            border-right: 0;
          }
        }
      }
    }
    &.transportation-mandatory {
      > .panel {
        border-bottom: 5px solid $base-yellow;
      }
      .ion-asterisk {
        font-size: 1.5em;
        margin-top: -2px;
      }
      .transportation-icons-wrapper {
        .btn {
          transition: background .5s ease-out;
          &.active {
            box-shadow: none;
            &:before {
              border: 2px solid $base-blue;
              background-color: $base-yellow;
              border-radius: 50%;
              padding: 12px 16px;
              color: $base-blue;
              transition: background .5s ease-in;
            }
          }
        }
      }
    }
  }
}