@import '../colors.less';
@import '../variables.less';
@import '../mixins.less';

div.dec{
  h4{
    font-size: 22px;
  }
}
div.dec-simple-active{
  margin-bottom: 20px;
  padding-left: 0px;
  padding-right: 0px;
  div.dec{
    padding-left: 0px;
    padding-right: 0px;
    button{
      .custom-button(180px, 70px, 3px solid @dec,  @dec);
      margin: 5px;

    }
  }
  div.simple{
    padding-left: 10px;
    padding-right: 0px;
    button{
      .custom-button(180px, 70px, 3px solid @simple,  @simple);
      margin: 5px;

    }
    .center-block{
      margin-right: 0px;
    }
  }
  div.active{
    padding-left: 0px;
    padding-right: 0px;
    button{
      .custom-button(180px, 70px, 3px solid @active,  @active);
      margin: 5px;

    }
  }
}

// div.help-3rd-person{
//   // margin-bottom: 20px;
//   padding-left: 0px;
//   padding-right: 0px;
// }

div.tf-tc{

  img{
    width: 100px;
    height: auto;
    margin-top: 50px;
  }

  div.tf{
    button{
      .circular-button(@btn-tf,@btn-background, 140px, 3px, 42px);
      margin-left:0px;
    }
  }

  div.tc{
    button{
      .circular-button(@btn-tc,@btn-background, 140px, 3px, 42px);
      margin-right:0px;
    }
  }

}

div.help{
  padding-left: 0px;
  padding-right: 0px;
  button{
    .custom-button(100%, 60px, 3px solid @help,  @help);
    border-color: @help;
    color: @help;
    background: @btn-background;
  }
}

div.third-person{
  padding-left: 0px;
  padding-right: 0px;
  button{
    .custom-button(100%, 50px, 3px solid @third-person,  @third-person);
    border-color: @third-person;
    color: @third-person;
    background: @btn-background;
  }
}




div.solution{
  padding-top: 20px;
  span.solution-heading{
    color: darken(@success-color, 20%);
  }
  hr.underline{
    border-top: 2px solid darken(@success-color, 20%);
  }
  span{
    font-weight: @font-weight-sm;
    font-size: 25px;
    letter-spacing: 1px;
  }
  .span-1{
    color: @span-1;
  }
  .span-2{
    color: @span-2;
  }
  .span-3{
    color: @span-3;
  }
  .span-4{
    color: @span-4;
  }
  .span-5{
    color: @span-5;
  }
}

.question-heading{
  display: inline-block;
  border-bottom: 2px solid @base-color;
}


.lc-group{
  h4.set-name{
    font-weight: 600;
    color: @nice-black;
  }
  .english-pattern-question{
    margin-bottom: -47px;
  }
  .html-text-prev-next{
    // position: absolute;
    // bottom: 0;
  }
  .prev-next{
    margin-bottom: 10px;
    .btn-info{
      background: @text-color;
      color: @base-color;
      border-color: @base-color;
      height: 40px;
      border-radius: 50%;
      &:focus, &:active{
        color: @base-color;
        background: @text-color;
        border-color: @base-color;
        outline: none;
      }
    }
  }

  .learning-cards{
    .well{
      padding: 5px;
    }
  }

  div.main-container{
    position: relative;
    // top: -20px;
  }
    div.help-3rd-person{
      // margin-bottom: 20px;
      padding-left: 0px;
      padding-right: 0px;
    }
    div.dec{
      h4{
        font-size: 20px;
        margin-top: 0px;
        margin-bottom: 0px;
      }
    }
    div.dec-simple-active{
      padding-left: 0px;
      padding-right: 0px;
      div.dec{
        padding-left: 0px;
        padding-right: 0px;
        padding: 7px;
        button{
          .custom-button(130px, 50px, 3px solid @dec,  @dec);
          margin: 5px;
        }
      }
      div.simple{
        padding-left: 0px;
        padding-right: 0px;
        button{
          .custom-button(130px, 50px, 3px solid @simple,  @simple);
          margin: 5px;
        }
        .center-block{
          margin-right: 0px;
        }
      }
      div.active{
        padding-left: 0px;
        padding-right: 0px;
        padding: 7px;
        button{
          .custom-button(130px, 50px, 3px solid @active,  @active);
          margin: 5px;
        }
      }
    }
    .help{
      padding: 5px;
      button{
        .custom-button(100%, 70px, 3px solid @help,  @help) !important;
        border-color: @help !important;
        color: @help !important;
        background: @btn-background !important;
      }
    }

    .third-person{
      button{
        .custom-button(100%, 50px, 3px solid @third-person,  @third-person) !important;
        border-color: @third-person !important;
        color: @third-person !important;
        background: @btn-background !important;
      }
    }
    // .options-group{
    //   width: 50%;
    // }

  button.inactive-gray{
    color: #E0E0E0;
  }


  .solution{
    // padding-top: 20px;
    span.solution-heading{
      color: darken(@success-color, 20%);
    }
    hr.underline{
      border-top: 2px solid darken(@success-color, 20%);
    }
    span{
      font-weight: @font-weight-sm;
      font-size: 25px;
      letter-spacing: 1px;
    }
    .span-1{
      color: @span-1;
    }
    .span-2{
      color: @span-2;
    }
    .span-3{
      color: @span-3;
    }
    .span-4{
      color: @span-4;
    }
    .span-5{
      color: @span-5;
    }
  }

}


div.third-person button.inactive-gray{
  border-color: #E0E0E0 !important;
  &:hover{
    border-color: #E0E0E0 !important;
  }
}

div.help button.inactive-gray{
   border-color: #E0E0E0 !important;
  &:hover{
    border-color: #E0E0E0 !important;
  }
}
