/*
  similar to its container .App(); this can be:
  - a COL containing ROWS (on mobile);
  - a ROW containing COLS (on other resolution);
*/
.AppController{
  text-align: center;
  background-color: @appController-color;


  .COL();
  .ROWS();
  width: @appController-width;


  @media @onlyScreen and @smallmobile, @mobile  {
    .ROW();
    .COLS();
    width: auto;
    height: @appController-height;
  }





  box-shadow: inset -4px 0px 20px rgba(0,0,0,0.8);
  @media @onlyScreen and @smallmobile, @mobile  {
    box-shadow: 0px 0px 12px 3px;
  }

  /*
    section colors for 1st,2nd,3rd and 4th sections
    the others will be in @standard-section-bgColor
  */

  .AppControllerButton{
    color: @standard-section-bgColor;
  }
  .AppControllerButton:nth-child(1) {
    color: @first-section-bgColor;
  }

  .AppControllerButton:nth-child(2) {
    color: @second-section-bgColor;
  }

  .AppControllerButton:nth-child(3) {
    color: @third-section-bgColor;
  }

  .AppControllerButton:nth-child(4) {
    color: @forth-section-bgColor;
  }

  .AppControllerButton:hover {
    background-color: rgba(0,0,0,0.25);
    cursor: pointer;
  }


  .AppControllerButton{
    .AppControllerButton();
  }

}