@import "Bootstrap/variables";
@import "Bootstrap/mixins";
@import "Bootstrap/type";
@import "font";
@import "form";
@import "menu";
@import "Backgrid/backgrid";
@import "prefixer";
@import "icons";
@import "checkbox-button";
@import "spinner";
@import "legend";
@import "../Shared/Styles/clickable";
@import "../Shared/Styles/card";
@import "../Rename/rename";

.progress.episode-progress {
  width         : 125px;
  position      : relative;
  margin-bottom : 2px;

  .progressbar-back-text, .progressbar-front-text {
    font-size   : 11.844px;
    font-weight : bold;
    text-align  : center;
    cursor      : default;
  }

  .progressbar-back-text {
    position : absolute;
    width    : 100%;
    height   : 100%;
  }

  .progressbar-front-text {
    display : block;
    width   : 125px;
  }

  .bar {
    position : absolute;
    overflow : hidden;
  }
}

.page-toolbar {
  margin-top    : 10px;
  margin-bottom : 30px;

  .toolbar-group {
    display: inline-block;
  }

  .sorting-buttons {
    li {
      a {
        span {
          display: inline-block;
          width: 110px;
        }
      }
    }
  }
}

.page-container {
  min-height : 500px;
}

#scroll-up {
  .clickable;

  &:hover {
    text-decoration : none;
    .opacity         (0.4);
  }

  .opacity   (0.2);
  position  : fixed;
  bottom    : 50px;
  right     : 50px;
  display   : none;
  font-size : 56px;
  color     : white;
}

.control-panel-visible {
  #scroll-up {
    bottom: 100px;
  }
}

.label-large {
  padding   : 4px 6px;
  font-size : 16px;
}

th {
  &.sortable {
    &:hover {
      background : @tableBackgroundHover;
    }
    .clickable();

  }
}

a, .btn {
  i {
    cursor : pointer;
  }
}

.label-white {
  color            : black;
  background-color : white;
}

body {
  background-color : #1c1c1c;
  background-image : url('../Content/Images/pattern.png');
  margin-bottom    : 100px;
  p {
    font-size : 0.9em;
  }
}

.footer {
  font-size       : 13px;
  font-weight     : lighter;
  padding-top     : 0px;
  padding-bottom  : 20px;
  color           : #999999;
  margin          : 0;
  text-decoration : none;

  a {
    color           : #999999;
    text-decoration : underline;
  }

  p {
    margin-bottom : 0px;
  }

  #footer-region {
    .text-center();
    position : relative;
    width    : 256px;
    margin   : 50px auto 0px auto;
    display  : block;
  }
}

.started #page {
  .card(#aaaaaa);
  width      : 1210px;
  min-width  : 1210px;
  margin     : auto;
  margin-top : -70px;
  padding    : 20px 0px;
  .header {
    padding-bottom : 10px;
    margin-bottom  : 20px;
    border-bottom  : 1px solid #eeeeee;
  }
}

.backdrop #page {
  background-color : transparent;
  box-shadow       : none;
}

.validation-errors {
  i {
    padding-right : 5px;
  }
}

.status-primary {
  color : @linkColor;
}

.status-success {
  color : @successText;
}

.status-warning {
  color : @warningText;
}

.status-danger {
  color : @errorText;
}

.form-inline {
  div {
    display : inline-block;
  }
}

.error {
  .formFieldState(@errorText, @errorText, @errorBackground);
}

#errors{
  display : none;
}

.mono-space {
  font-family: "ubuntu mono"
}

.file-path {
  .mono-space();
}

.control-panel {
  .card(#333333);

  color: #f5f5f5;
  background-color: #333333;
  margin: 0px;
  margin-bottom: -100px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 55px;
  opacity: 0;
}