#scOptions {
  position:relative;
  height:100%;
  width:100%;
  background: $c-grey4;
  //@include perspective(2000);
  overflow:hidden;
  > * {
    position:absolute;
    overflow:hidden;
    width:100%;
    left:0;
    @include box-sizing(border-box);
  }
}

.scOptions_area {
  top:0; bottom:0;
  background: $c-grey2;
  > * {
    position:absolute;
    //overflow:hidden;
    left:0; right:0;
    @include box-sizing(border-box);
  }
  @include rotateY(0);
  @include opacity(1);
  &.ng-leave,
  &.ng-enter {
    display:block!important;
  }
  &.ng-leave {
    @include apply-origin(100% 0, false);
    @include transition(all 0.35s ease-in-out);
  }
  &.ng-enter {
    @include apply-origin(0 0, false);
    @include transition(all 0.35s ease-in-out);
  }

  &.ng-leave.ng-leave-active {
    @include rotateY(-100deg);
    //@include opacity(0);
  }
  &.ng-enter {
    @include rotateY(100deg);
    //@include opacity(0);
  }
  &.ng-enter.ng-enter-active {
    @include rotateY(0);
    @include opacity(1);
  }
}
.scOptions_head {
  height:40px;
  top:0;
}
.scOptions_title {
  height:80px;
  top:40px;
  background:$c-grey4;
  > * {
    display:block;
    width:100%;
    height:100%;
    font-size:26px;
    color:$c-darkgrey;
    font-weight:600;
    @include box-sizing(border-box);
  }
  > button {
    @extend %resetButton;
    position:relative;
    padding:0 15px;
    line-height:40px;
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    > span {
      display:inline-block;
      color:$c-darkred;
      position:absolute;
      height:14px;
      line-height:14px;
      font-size:10px;
      font-weight:bold;
      top:10px;
      left:17px;
      @include opacity(0);
      @include transition(all 0.1s ease-out);
    }
    &:hover {
      > span {
        @include opacity(1);
      }
    }
  }
  > input {
    padding:0 15px;
    line-height:40px;
    border:0;
    background:transparent;
  }
}

.scOptions_viewport {
  top:120px;
  bottom:0;
  overflow:hidden;
}

.scOptions_content {
  margin:10px;
  display:block;
}

.scOptions_group {
  margin-bottom:35px;
  color:$c-darkgrey;
  > * {
    overflow:hidden;
  }
  > div:first-child {
    font-size:22px;
    line-height:36px;
    color:$c-darkred;
    padding-left:5px;
    margin-top:20px;
    margin-bottom:15px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  label {
    display:block;
    margin-top:15px;
    padding-left:5px;
    line-height:32px;
    font-size:14px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .noLabel {
    margin-top:15px;
  }
  .subgroup {
    margin-bottom:15px;
  }
  .inputNumber {
    width:100%;
    overflow:hidden;
    > .inputNumber_sliderArea {
      float:left;
      width:65%;
    }
    > .inputNumber_inputArea {
      float:right;
      width:30%;
    }
  }
  .inputColor {
    width:100%;
    overflow:hidden;
    > input {
      &.isDark {
        color: $c-white;
      }
    }
  }
  .inputRange {
    width:100%;
    overflow:hidden;
    > .inputRange_sliderArea {
      float:left;
      width:60%;
    }
    > .inputRange_input1Area {
      float:left;
      width:15%;
      margin-left:5%;
    }
    > .inputRange_input2Area {
      float:left;
      width:15%;
      margin-left:5%;
    }
  }
  .helperButtons {
    width:100%;
    overflow:hidden;
    > button {
      @extend %resetButton;
      display:block;
      float:left;
      padding:5px 10px;
      background:$c-grey3;
      border:1px solid $c-grey2;
      color:$c-grey5;
      @include transition(all 0.15s ease-in-out);
      &:hover {
        color:$c-grey4;
        background:$c-grey5;
        border:1px solid $c-grey5;
      }
    }
    &.helperButtons3 {
      > button {
        width:30%;
        &:first-child {
          margin-right:5%;
        }
        &:last-child {
          float:right;
        }
      }
    }
  }
  input[type=text], select {
    display:block;
    @include box-sizing(border-box);
    width:100%;
    height:40px;
    line-height:32px;
    font-size:14px;
    padding:3px 5px;
    background:$c-grey4;
    border:1px solid $c-grey3;
    outline:none;
    color:$c-darkgrey;
  }
  select {
    option {
      &:hover {
        background:$c-red;
        color:$c-white;
      }
    }
  }
}

@media screen and (max-width: 1400px){
.scOptions_title {
  > * {
    font-size:22px;
  }
  > button {
    > span {
      height:14px;
      line-height:14px;
      font-size:10px;
      top:10px;
      left:17px;
    }
  }
}
}

@media screen and (max-width: 1150px){
.scOptions_title {
  > * {
    font-size:18px;
  }
}
}