@import "color";

$sidebar-width: 250px;
$sidebar-collapsed-width: 50px;

.nav-pills > li > a {
  border-radius: 0;
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: $sidebar-width;
  width: $sidebar-width;
  height: 100%;
  margin-left: -$sidebar-width;
  overflow-y: scroll;
  background: $quaternary;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  // To remove the sidebar background image, comment out the next two lines
  background-image: url("/static/images/sidebar-bg.jpg");
  background-size: cover;
}

#sidebar-wrapper ul li a {
  span.fa-stack {
    min-width: $sidebar-collapsed-width;
    padding: 0 10px;
  }
  select {
    width: 70%;
  }
  input {
    width: 70%;
  }
  button {
    width: 70%;
    font-weight: bold !important;
  }
}

#page-content-wrapper {
  padding: 20px;
  position: relative;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.xyz {
  min-width: 360px;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: $sidebar-width;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: 2px;
}

.sidebar-nav li {
  line-height: 40px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #fff;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-left: $senary 4px solid;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

#wrapper {
  padding-left: $sidebar-width;
}

#wrapper.collapsed #sidebar-wrapper {
  width: $sidebar-collapsed-width;
}

#wrapper.collapsed #sidebar-wrapper:hover {
  width: $sidebar-width;
}

#wrapper.collapsed #page-content-wrapper {
  position: relative;
  margin-right: 0;
  margin-left: -200px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: auto;
}

.form-control {
  color: $quaternary;
  background-color: $senary;
  border: 1px solid $tertiary;
  border-radius: 5px;
  -webkit-transition: border-color ease-in-out 0.15s,
    box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

#date-picker {
  margin-top: 2px;
  margin-left: 4px;
  margin-right: 4px;
  margin-bottom: 0px;
}

.datepicker.datepicker-dropdown.dropdown-menu {
  background-color: $senary;
  border: 1px solid $secondary;
  color: $quaternary;
  z-index: 1040 !important;
}

.datepicker-days > table > tfoot > tr > th.today {
  background-color: $secondary;
  border: 1px solid $tertiary;
  border-radius: 4px;
}

.datepicker-days > table > tfoot > tr > th.today:hover {
  background-color: $quinary;
}

.datepicker-days > table > tfoot > tr > th.clear {
  background-color: $secondary;
  border: 1px solid $tertiary;
  border-radius: 4px;
}

.datepicker-days > table > tfoot > tr > th.clear:hover {
  background-color: $quinary;
}

/* Remove focus outline and background for select and option */
.no-focus:focus {
  background-color: $senary;
  color: $quaternary;
}

.no-focus option:focus {
  background-color: $senary;
  color: $quaternary;
}
