// css grid layout uses the Bootstrap v3.0 css grid

/*
 * Adding this .container override to fix the little sliver of gray on the left side
 * of the page. This might cause issues elsewhere, but for now it's a temporary fix.
 *
 * The media queries were added to fix the issue seen with fixed headers due to .container being overridden.
 * They can be removed if the .container override is removed.
*/

.container {
  padding-left: 15px;
  padding-right: 0;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

/* *** */

.container-fluid {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

.uif-cssGridGroup .input-group {
  width: 100%;
}

.uif-cssGridGroup .input-group .input-group-btn, .uif-cssGridGroup .input-group .input-group-addon {
  width: 1px;
}

.uif-cssGridGroup .form-control {
  width: 100%;
}

.uif-cssGridGroup textarea.form-control {
  width: 100%;
  height: inherit;
}

.uif-cssGridGroup > [class*="col-"] {
  padding-bottom: 5px;
}

.uif-cssGridGroup > [class*="col-"] .uif-cssGridGroup > [class*="col-"] {
  padding-bottom: 0px;
}

.uif-cssGridLabelCol {
  padding-top: .5em;
}

.uif-cssGridGroup .input-group-addon {
  width: 1%;
}

.uif-cssGridGroup-fixed {max-width: 800px}

/** Custom classes for css grid - do not remove, it will break functionality **/

.xs-float-right {
  float: right;
}

.xs-clear-left {
  clear: left;
}

@media (min-width: @screen-sm) {
  .sm-float-right {
    float: right;
  }

  [class*='col-sm-'] {
    clear: none;
  }

  .sm-clear-left {
    clear: left;
  }
}

@media (min-width: @screen-md) {
  .md-float-right {
    float: right;
  }

  [class*='col-md-'] {
    clear: none;
  }

  .md-clear-left {
    clear: left;
  }

  .md-normal-width > [class*='col-'] .form-control {
    width: inherit;
  }
}

@media (min-width: @screen-lg) {
  .lg-float-right {
    float: right;
  }

  [class*='col-lg-'] {
    clear: none;
  }

  .lg-clear-left {
    clear: left;
  }
}

/** Optional additional classes to control input sizes at different screen sizes, use these on controls.
 This can be used as a starting point example to add project specific sizes, if needed.**/

.xs-3em {
  width: 3.5em !important;
}

.xs-5em {
  width: 5em !important;
}

.xs-10em {
  width: 10em !important;
}

.xs-15em {
  width: 15em !important;
}

.xs-20em {
  width: 20em !important;
}

.xs-30em {
  width: 30em !important;
}

.xs-10p {
  width: 10% !important;
}

.xs-25p {
  width: 25% !important;
}

.xs-50p {
  width: 50% !important;
}

.xs-75p {
  width: 75% !important;
}

@media (min-width: @screen-sm-min) {
  .sm-3em {
    width: 3.5em !important;
  }

  .sm-5em {
    width: 5em !important;
  }

  .sm-10em {
    width: 10em !important;
  }

  .sm-15em {
    width: 15em !important;
  }

  .sm-20em {
    width: 20em !important;
  }

  .sm-30em {
    width: 30em !important;
  }

  .sm-10p {
    width: 10% !important;
  }

  .sm-25p {
    width: 25% !important;
  }

  .sm-50p {
    width: 50% !important;
  }

  .sm-75p {
    width: 75% !important;
  }
}

@media (min-width: @screen-md-min) {
  .md-3em {
    width: 3.5em !important;
  }

  .md-5em {
    width: 5em !important;
  }

  .md-10em {
    width: 10em !important;
  }

  .md-15em {
    width: 15em !important;
  }

  .md-20em {
    width: 20em !important;
  }

  .md-30em {
    width: 30em !important;
  }

  .md-10p {
    width: 10% !important;
  }

  .md-25p {
    width: 25% !important;
  }

  .md-50p {
    width: 50% !important;
  }

  .md-75p {
    width: 75% !important;
  }
}

@media (min-width: @screen-lg-min) {
  .lg-3em {
    width: 3.5em !important;
  }

  .lg-5em {
    width: 5em !important;
  }

  .lg-10em {
    width: 10em !important;
  }

  .lg-15em {
    width: 15em !important;
  }

  .lg-20em {
    width: 20em !important;
  }

  .lg-30em {
    width: 30em !important;
  }

  .lg-10p {
    width: 10% !important;
  }

  .lg-25p {
    width: 25% !important;
  }

  .lg-50p {
    width: 50% !important;
  }

  .lg-75p {
    width: 75% !important;
  }
}
