//Radio button
.mars-radio {
  label {
    font-weight: 400;
    padding: 5px 5px 0 5px;
    input[type="radio"] {
      display: none;
    }
    input[type="radio"]:checked + .color > i {
      opacity: .55;
    }
    input[type="radio"]:disabled + .color {
      opacity: .5;
    }
  }

  input[type="radio"] + .color > i {
    opacity: 0;
    transition: all .3s ease-in;
  }
  &.active,
  &:hover {
    @include linear-gradient(#ebebeb, #d1d1d1);
  }

  .active label input[type="radio"] + .color > i {
    opacity: .55;
  }

  /*need to override this to get different colors for radio*/
  .color {
    &.blue {
      background: blue;
    }
    &.red {
      background: red;
    }
    &.purple {
      background: purple;
    }

    /* more color */
    &.shamrock { background-color: color('shamrock'); }
    &.chetwodeBlue { background-color: color('chetwode-blue'); }
    &.gold { background-color: color('gold'); }
    &.mediumOrchid { background-color: color('medium-orchid'); }
    &.sunsetOrange { background-color: color('sunset-orange'); }
    &.summerSky { background-color: color('summer-sky'); }
    &.bermudaGrey { background-color: color('bermuda-grey'); }
    &.mauvelous { background-color: color('mauvelous'); }
    &.darkOrange { background-color: color('dark-orange'); }
    &.bermuda { background-color: color('bermuda'); }
    &.fuego { background-color: color('fuego'); }
    &.tomato { background-color: color('tomato'); }
    &.neonBlue { background-color: color('neon-blue'); }
    &.neonPink { background-color: color('neon-pink'); }
    &.brightGreen { background-color: color('bright-green'); }
    &.ruby { background-color: color('ruby'); }
    &.safetyOrange { background-color: color('safety-orange'); }
    &.olivine { background-color: color('olivine'); }
    &.sky { background-color: color('sky'); }
    &.bilobaFlower { background-color: color('biloba-flower'); }
    &.monaLisa { background-color: color('monaLisa'); }
  }

  .color {
    position: relative;
    display: block;
    background: #DDDDDD;
    border-radius: 100%;
    width: 16px;
    height: 16px;
    line-height: 26px;
    float: left;
    margin: 2px 5px 0 0;

    i {
      position: absolute;
      font-size: .8em;
      line-height: 0;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 6px;
      height: 6px;
      display: block;
      border-radius: 100%;
      background: #000;
      opacity: .55;
    }
  }
}

//Custom Checkbox
.mars-checkbox {
  padding: 5px 0px 5px 24px;
  cursor: pointer;
  font-weight: normal;
  position: relative;
  input {
    position: absolute;
    opacity: 0;
    display: none;
  }
  input[type="checkbox"]:disabled ~ .checkmark {
    background-color: #e4e4e4;
  }
  &:hover input ~ .checkmark {
    background-color: $c-white;
  }
  input:checked ~ .checkmark {
    background-color: $c-white;
  }
  input:checked ~ .checkmark:after {
    display: block;
  }
  .checkmark {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    background: white;

    height: 18px;
    width: 18px;

    border: 1px solid #4ca354;
    &:after {
      content: "";
      position: absolute;
      display: none;
      left: 6px;
      top: 2px;
      width: 5px;
      height: 10px;
      border: solid #4ca354;
      border-width: 0 2px 2px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  }
  > small {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    float: left;
  }
}

.mars-checkbox-action {
  padding: 5px 0px 5px 30px;
  .checkmark {
    height: 24px !important;
    width: 24px;
    display: block;
    background: url(../images/chi-unchecked-checkbox.svg) no-repeat center center;
    -webkit-background-size: 24px auto !important;
    background-size: 24px auto !important;
    border: none;
    &:after {
      display: none !important;
    }
  }
  input:checked ~ .checkmark {
    background: url(../images/chi-checked-checkbox.svg) no-repeat center center;
    -webkit-background-size: 24px auto !important;
    background-size: 24px auto !important;
  }
}

//style for input disabled.
input[type="text"]:disabled, input[type="password"]:disabled {
  background: #f5f5f5 !important;
}

.mars-select {
  select {
    height: 26px;
    border-radius: 0;
    background-color: $c-white;
    border: 1px solid $c-border;
    cursor: pointer;
    display: none;
  }
  .multiselect-native-select {
    position: relative;
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 0;
    background: none !important;
    .btn-group {
      display: block;
      .multiselect,
      .dropdown-toggle,
      .btn,
      .btn-default {
        font-family: $base-font;
        font-size: $medium !important;
        font-weight: normal;
        color: $c-black2;
        background-color: $c-white;
        border: 1px solid $c-border;
        line-height: inherit !important;
        height: 26px;
        width: 100% !important;
        padding: 0 !important;
        display: block;
        text-align: left;
        -webkit-box-shadow: none;
        box-shadow: none;
        cursor: pointer;
        @include border-radius(0);
        .multiselect-selected-text {
          display: block;
          height: 100%;
          padding: 2px 15px 0 10px !important;
          text-align: left;
          width: 100%;
          @include text-with-ellipsis();
        }
        .caret {
          position: absolute;
          right: 10px;
          top: 10px;
        }

      }
      &.open {
        .dropdown-toggle {
          background-color: $c-white;
        }
      }
    }

  }
  .multiselect-container {
    top: 26px;
    width: 100%;
    @include border-radius(0px);
    li {
      padding: 0;
      label {
        padding: 0 15px 0 10px !important;
        // height: 22px; /* new change */
        // line-height: 22px; /* new change */
        margin-right: 0;
        display: block;
        color: $c-black2;
        &.radio > input[type=radio] {
          display: none !important;
        }
        input[type=checkbox] {
          display: none !important;
        }
      }
      // .caret { display: none; } /* new change  */
      &.multiselect-all {
        label {
          padding: 0 15px 0 10px !important;
          font-weight: normal;
          font-family: $base-font-semibold;
        }
      }
      &.multiselect-filter {
        .input-group {
          padding: 0;
          margin: 0;
          width: 100%;
        }
        .input-group-addon,
        .input-group-btn {
          display: none;
        }
      }

      a { background: none !important; }
      &.active {
        a { background: none !important; }
        label {
          background: url(../images/chi-tic.svg) no-repeat 98% center !important;
          -webkit-background-size: 12px auto !important;
          background-size: 12px auto !important;
        }
      }

      //disabled options should show up disabled
      &.disabled {
        display: block !important;
      }
      a,.active { background-color: $c-white !important; text-decoration: none !important; }
      &.multiselect-all label,
      &.multiselect-group label { font-weight: normal; font-family: $base-font-semibold; }
    }
  }
  &.form-group {
    // width: 200px; /* new change */
    &:after {
      content: '';
      display: table;
      clear: both;
    }
    &.form-optgroup {
      li {
        label {
          padding: 0 15px 0 20px !important;
        }
        &.multiselect-group {
          label {
            padding: 0 15px 0 10px !important;
            b {
              font-weight: normal;
              font-family: $base-font-semibold;
            }
          }
        }
        &.multiselect-all label {
          padding: 0 15px 0 10px !important;
        }
      }
    }
  }
}
.marsGrid, .mars-container {
  td.celledit input[type=text] {
    text-align: center !important;
  }
}
/* updated fb-forecast */
.mars-select {
  &.setError{
    .multiselect {
      border : 2px solid #f05352 !important;
    }
  }
  .multiselect-container {
    max-height: 100px;
    overflow: auto;
    width: 100%!important;
  }
  .caret {
    right: 5px !important;
    border-top: 6px solid color('black') !important;
    border-right: 3px solid transparent !important;
    border-left: 3px solid transparent !important;
  }
}

textarea[name="richText"]{
  width:550px;
}