$normal: 400;
$medium: 500;
$bold:   700;

$black: #000;
$green: #66bb6a;
$purple: #3f51b5;
$white: #fff;
$blue: #2196f3;
$red: #f44336;
$yellow: #faebcc;
$red-alt: #861514;

@import 'foundation';
@import 'mixins';
@import 'angular-mighty-datepicker';
@import 'scrollbars';
@import 'handsontable.full';
@import 'fullcalendar.min';
@import 'dropzone';
@import 'jquery.datepick';
@import 'smoothness.datepick';

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');

// @import 'classic';
// @import 'classic.date';
// @import 'classic.time';

@import 'default';
@import 'default.date';
// @import 'default.time';
//@import 'rtl';

#calendar {
  margin: 25px auto;
  max-height: 635px;
  max-width: 960px;
}

.fc-scroller.fc-day-grid-container {
  height: 100% !important;
  max-height: 635px !important;
}

.fc-row.fc-week{
  max-height: 75px !important;
}

.animate-show,
.animate-hide {
  transition: all 250ms linear;
}

.animate-show.ng-hide-remove,
.animate-hide.ng-hide-add.ng-hide-add-active {
  display: block;
  opacity: 0;
}

.animate-hide.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  display: block;
  opacity: 1;
}

.material-icons {
  vertical-align: middle;
}

.text-upper {
  text-transform: uppercase;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-danger {
  color: $red;
}

.text-success {
  color: $green;
}

.text-primary {
  color: $blue;
}

.row {
  max-width: none;
}

.map {
  min-height: 600px;
}

.overlayed {
  overflow: hidden;
}

.btn {
  background: darken($white, 5%);
  border: 1px darken($white, 15%) solid;
  border-radius: .2em;
  display: inline-block;
  height: 2.2em;
  line-height: 2.2;
  margin: 0;
  min-width: 5.5em;
  padding: 0 1em;
  text-align: center;

  &:hover {
    border-color: darken($white, 25%);
  }

  i {
    color: lighten($black, 40%);
    font-size: 18px;
  }

  &.blue {
    background: $blue;
    border-color: darken($blue, 5%);
    border-top-color: darken($blue, 10%);
    color: $white;
  }

  &.green {
    background: $green;
    border-color: darken($green, 5%);
    border-top-color: darken($green, 10%);
    color: $white;
  }

  &.medium {
    font-size: 1.6em;
  }

  &.large {
    font-size: 2em;
  }
}

html,
body {
  min-height: 100vh;
}

body {
  background: darken($white, 7%);
  color: lighten($black, 20%);
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: $normal;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  flex: 1;
  flex-direction: column;
}

strong {
  font-weight: $bold;
}

b {
  font-weight: $medium;
}

header {
  background: $purple;
  color: $white;
  font-weight: $medium;
  padding: 1.2em 1em;
  text-transform: uppercase;

  select {
    background: $purple;
    border: 0;
    border-bottom: 1px $white solid;
    color: $white;
    display: inline-block;
    margin: 0 1em 0 0;
  }
}

h1 {
  font-size: 1.5em;
  font-weight: $medium;
}

h2 {
  font-size: 1.2em;
  font-weight: $medium;
}

a {
  color: inherit;
  display: inline-block;
  text-decoration: none;
}

.control {
  padding: .5em 0;

  &.radios {
    display: inline-block;
    padding: .5em 0 1.5em;
    text-align: left;
  }
}

input,
textarea,
select {
  background: darken($white, 7%);
  border: 1px darken($white, 20%) solid;
  border-radius: 0;
  font-size: 13px;
  font-weight: normal;
  height: 32px;
  padding: 0 .5em;

  &:focus {
    border-bottom-color: $blue;
    outline: none;
  }
}

.form,
.form-popup,
.form-comment {
  padding: 2em;

  h2 {
    border-bottom: 1px lighten($black, 60%) solid;
  }

  label {
    color: darken($white, 60%);
  }

  input,
  textarea,
  select {
    background: $white;
    border: 0;
    border-bottom: 1px darken($white, 15%) solid;
    border-radius: 0;
    color: $black;
    transition: all .25s linear;
    width: 100%;

    &.date {
      width: auto;
    }

    &:focus {
      border-bottom-color: $green;
      box-shadow: 0 1px 0 $green;
      outline: none;
    }
  }

  .decorated-checkbox,
  .decorated-radio {
    height: auto;
    width: auto;
  }

  textarea {
    height: auto;
  }

  .control {
    padding: 1em 0;
  }

  button {
    background: $green;
    border-radius: 999px;
    color: $white;
    font-size: 1.2em;
    height: 2.8em;
    line-height: 2.8;
    margin: 1.4em 0 0;
    padding: 0 2em;
    text-align: center;
    text-transform: uppercase;

    &:focus {
      outline: none;
    }
  }
}

.form-popup {
  padding: 1em;
}
.form-comment {
  padding: 0em;
}

figure {
  margin: 0;
}

.header {
  background: $white;
  border-bottom: 1px darken($white, 20%) solid;
  padding: 1.5em 2em 1.5em 1em;

  a {
    font-size: .85em;
    font-weight: $medium;
    margin: 0 1em;
    text-align: center;
    text-transform: uppercase;

    .material-icons {
      color: $blue;
      margin: 0 0 .2em;
    }

    .danger {
      color: $red;
    }
  }
}

.breacrumb {
  background: $white;
  border-bottom: 1px darken($white, 25%) solid;
  box-shadow: 0 1px 1px 0 transparentize($black, .8);
  color: darken($white, 40%);
  padding: .8em 2em .8em 1em;

  a {
    color: lighten($black, 20%);
  }

  &::before {
    color: lighten($black, 20%);
    content: 'home';
    float: left;
    font-family: 'Material Icons';
    margin: 0 .5em 0 0;
  }
}

.container {
  background: $white;
  border: 1px darken($white, 20%) solid;
  border-radius: 0 0 5px 5px;
  border-top: 1px transparent solid;
  box-shadow: 0 0 2px 0 transparentize($black, .9);
  margin: 2em 1.5em;
}

.table-container {
  min-height: 40em;
  overflow: auto;
}

.ng-table {
  max-width: 100%;
  width: 100%;

  th,
  td {
    padding: 1em 1.2em;
  }

  th {
    border-bottom: 1px darken($white, 30%) solid;
    font-weight: $medium;
    text-align: left;

    &:last-child {
      width: 1%;
    }
  }

  td {
    border-top: 1px darken($white, 13%) solid;
    vertical-align: middle;

    &:last-child {
      white-space: nowrap;
    }
  }

  .filter-cell {
    select,
    input {
      max-width: 150px;
      width: auto;
    }
  }

  a {
    margin: 0 1em;
  }

  .material-icons {
    font-size: 18px;
  }
}

.filter {
  white-space: nowrap;

  > div {
    display: inline-block;
  }

  .filter-cell:first-child span::after {
    content: '-';
    display: inline-block;
    margin: 0 .4em 0 .2em;
  }
}

.date-range-picker-container {
  cursor: pointer;
  position: relative;

  &.displayed {
    .date-range-picker {
      @include transform(scale(1));
    }

    span {
      color: $black;
    }
  }

  span {
    color: lighten($black, 65%);
    font-weight: $medium;
    text-transform: uppercase;
  }

  .has-content {
    color: $purple;
  }

  .material-icons {
    vertical-align: top;
  }

  .date-range-picker {
    @include transform(scale(0));
    @include transform-origin(100% 0);
    background: $white;
    box-shadow: 0 2px 4px 0 transparentize($black, .8), 0 2px 8px 0 transparentize($black, .95);
    left: -436px;
    padding: 1em 0;
    position: absolute;
    text-align: center;
    top: 0;
    transition: all .3s ease;
    white-space: nowrap;
    width: 430px;
    z-index: 1000;
  }

  button {
    margin: 0 1em;
  }
}

.drop {
  cursor: pointer;
  position: relative;

  &:hover {
    ul {
      @include transform(scale(1));
    }
  }

  ul {
    @include transform(scale(0));
    @include transform-origin(0 0);
    background: $white;
    box-shadow: 0 2px 4px 0 transparentize($black, .8), 0 2px 8px 0 transparentize($black, .95);
    left: 0;
    max-height: 640px;
    overflow: auto;
    padding: 0;
    position: absolute;
    text-align: left;
    top: 1.3em;
    transition: all .3s ease;
    z-index: 999;
  }

  li {
    display: block;
    width: 100%;
  }

  a {
    box-sizing: border-box;
    display: inline-block;
    padding: 1em 2em;
    white-space: pre;
    width: 100%;

    &:hover {
      background: darken($white, 10%);
    }
  }
}

.menu {
  a {
    color: lighten($black, 25%);
    font-weight: $medium;
    white-space: nowrap;

    &:hover {
      color: $black;
    }
  }

  ul {
    left: .2em;
    top: .6em;
  }

  i {
    font-size: 1.2em;
    margin: 0 .5em 0 0;
  }

  > i {
    font-size: 2em;
  }
}

.actions {
  padding: 1em;

  * {
    display: inline-block;
    vertical-align: middle;
  }

  input {
    margin: 0 2em 0 0;

    &::after {
      line-height: 1.42;
    }
  }

  .btn {
    border-right-width: 0;
    float: left;
    height: 2.4em;
    max-width: 6em;

    &:first-child {
      border-radius: .3em 0 0 .3em;
    }

    &:last-child {
      border-radius: 0 .3em .3em 0;
      border-right-width: 1px;
    }
  }
}

.overlay {
  background: transparentize($black, .2);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 10;

  &.initializing {
    display: none;
  }
}

.close {
  font-size: 1em;
  position: fixed;
  right: .2em;
  top: .2em;

  .material-icons {
    font-size: 3em;
  }
}

.scolled-container {
  margin: 2em 0 0;
  max-height: 75vh;
  overflow: auto;
}

.popup {
  background: $white;
  left: 50%;
  margin: 0 auto;
  max-width: 640px;
  padding: 2em 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;

  label {
    display: block;
  }

  .cancel {
    position: absolute;
    right: .5em;
    top: .5em;

    i {
      font-size: 3em;
    }
  }
}

.radio {
  cursor: pointer;

  input {
    vertical-align: middle;
  }
}

.total-entries {
  color: darken($green, 15%);
  display: inline-block;
  margin: 0 0 0 1em;
  text-transform: uppercase;
}

.decorated-checkbox,
input.decorated-radio {
  height: auto;
  visibility: hidden;
  width: auto;

  &::after {
    color: darken($white, 15%);
    cursor: pointer;
    font-family: 'Material Icons';
    font-size: 1.8em;
    line-height: 1;
    visibility: visible;
  }

  &.requesting {
    &::after,
    &:checked::after {
      background: image-url('rolling.svg') center center no-repeat;
      content: '';
      display: inline-block;
      height: 32px;
      line-height: 1;
      width: 18px;
    }
  }

  &.star {
    &::after {
      content: 'star_border';
    }

    &:checked::after {
      color: $blue;
      content: 'star';
    }
  }

  &.check {
    &::after {
      content: 'check';
    }

    &:checked::after {
      color: $blue;
    }
  }
}

.decorated-checkbox {
  &.box {
    &::after {
      content: 'check_box_outline_blank';
    }

    &:checked::after {
      color: lighten($black, 60%);
      content: 'check_box';
    }

    &:indeterminate::after {
      color: lighten($black, 60%);
      content: 'indeterminate_check_box';
    }
  }
}

input.decorated-radio {
  &.box {
    &::after {
      content: 'radio_button_unchecked';
    }

    &:checked::after {
      color: lighten($black, 60%);
      content: 'radio_button_checked';
    }
  }
}

label.decorated-radio {
  margin: 0 1em 0 .7em;
}

.field_with_errors {
  display: inline-block;
}

@-moz-document url-prefix() {
  .decorated-checkbox {
    visibility: visible;
  }
}

.sortable {
  span {
    cursor: pointer;
    white-space: nowrap;

    &::after {
      color: darken($white, 35%);
      content: 'code';
      display: inline-block;
      font-family: 'Material Icons';
      font-size: 1.1em;
      line-height: 1.1em;
      margin: 0 0 0 .4em;
      transform: rotate(90deg);
      vertical-align: middle;
    }
  }

  &.sort-desc span,
  &.sort-asc span {
    &::after {
      color: $black;
      font-size: 1.4em;
      transform: none;
    }
  }

  &.sort-desc span {
    &::after {
      content: 'keyboard_arrow_down';
    }
  }

  &.sort-asc span {
    &::after {
      content: 'keyboard_arrow_up';
    }
  }
}

.pagination {
  text-align: center;

  li {
    display: inline-block;
  }

  .active {
    a {
      background: $blue;
      color: $white;
    }
  }

  .disabled {
    a {
      color: darken($white, 30%);
    }
  }

  a {
    background: darken($white, 10%);
    display: inline-block;
    height: 2.2em;
    line-height: 2.2;
    margin: 0 .2em;
    padding: 0 1em;
  }
}

.visibility-controls {
  padding: 0 1em;
  text-align: right;

  input {
    display: none;
  }

  label {
    display: inline-block;
    margin: 0 .2em;

    &:first-child,
    &:nth-child(2) {
      display: none;
    }
  }

  span {
    background: darken($white, 10%);
    border-radius: .3em;
    color: darken($white, 30%);
    cursor: pointer;
    display: block;
    height: 2.2em;
    line-height: 2.2;
    margin: .6em 0 0;
    padding: 0 .8em;
  }

  :checked + span {
    background: $blue;
    box-shadow: inset 0 2px 5px 0 transparentize($black, .8);
    color: $white;
  }
}

.toast {
  background: $yellow;
  border: 1px darken($yellow, 30%) solid;
  border-radius: .2em;
  color: darken($yellow, 70%);
  font-size: 1.3em;
  left: 50%;
  padding: .4em 1.2em;
  position: absolute;
  top: 80px;
  transform: translateX(-50%);
}

.alert {
  font-size: 1.1em;
  margin: 1em;
  padding: .6em 1em;
  text-align: center;
  text-transform: uppercase;

  &.success {
    background: transparentize($green, .2);
    border: 1px $green solid;
    color: $white;
  }

  &.error {
    background: transparentize($red, .3);
    border: 1px transparentize($red, .25) solid;
    color: $white;
  }

  a {
    color: darken($blue, 20%);
    font-size: .9em;
    font-weight: $medium;
    margin: 0 0 0 .5em;
    text-decoration: underline;
  }

  .material-icons {
    font-size: 1.1em;
    vertical-align: -4%;
  }
}

.clear-filters {
  color: darken($yellow, 45%);
  display: inline-block;
  text-transform: uppercase;

  .material-icons {
    vertical-align: top;
  }
}

.versions {
  padding: .5em 2em;

  ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    padding: 1em 0;
  }

  small {
    color: lighten($black, 60%);
    font-size: 1em;
  }

  .empty {
    color: lighten($black, 60%);
    padding: .5em 1em 1.5em;
    text-align: center;
  }

  i {
    margin: 0 .5em 0 0;
  }

  .create {
    color: $green;
  }

  .update {
    color: $blue;
  }

  .rename {
    color: darken($yellow, 45%);
  }
}

.diff-container {
  padding: .5em 1.5em 1em;
  text-align: left;
}

.diff {
  overflow: auto;
  padding: .7em 0 .5em;

  ul {
    background: $white;
    display: table;
    font-size: 13px;
    list-style: none;
    margin: 0;
    overflow: auto;
    padding: 0;
    width: 100%;
  }

  del,
  ins {
    display: block;
    text-decoration: none;
  }

  li {
    display: table-row;
    height: 1em;
    margin: 0;
    padding: 0;

    &.ins {
      background: lighten($green, 34%);
      color: darken($green, 20%);
    }

    &.del {
      background: lighten($red, 37%);
      color: $red;
    }

    &.diff-comment {
      display: none;
    }

    &.diff-block-info {
      background: lighten($black, 50%);
    }

    &:hover {
      background: $yellow;
    }
  }

  del,
  ins,
  span {
    font-family: courier;
    white-space: pre-wrap;
  }

  del strong {
    background: darken($red, 10%);
  }

  ins strong {
    background: $green;
  }
}

.has-error {
  input,
  select,
  textarea {
    border-color: $red;
  }

  .help-block {
    color: darken($red, 30%);
    display: block;
    margin: .3em 0 0;
  }
}

// scss-lint:disable SelectorFormat
.mighty-picker__month-name,
.mighty-picker-calendar__weekday {
  font-weight: $bold;
  text-transform: uppercase;
}

.mighty-picker-calendar__day-wrapper {
  font-weight: $normal;
}

.mighty-picker__wrapper {
  button {
    &:focus {
      color: $blue;
      outline: none;
    }
  }
}

.add-nested,
.remove-nested {
  margin: 0 0 3em;
  text-align: right;

  a {
    font-size: .9em;
    font-weight: $bold;
    text-transform: uppercase;
  }

  i {
    width: 1em;
  }
}

.remove-nested {
  color: $red;
}

.add-nested {
  color: $blue;
}

.htCheckboxRendererInput {
  height: auto;
}

.htCore td {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-container {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.grid {
  display: block;
  flex: 1;
  max-width: 100%;
  overflow: hidden;
}

.grid-actions {
  background: $white;
  border-top: 1px lighten($black, 85%) solid;
  padding: 1em;
}

.grid-overlay {
  background: transparentize($black, .2);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 999;
}

.grid-message {
  color: $white;
  font-size: 2em;
  left: 50%;
  line-height: 1.2;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75%;

  small {
    display: block;
    font-style: italic;
    line-height: 1.3;
    margin: 1em auto 2em;
    max-width: 80%;
  }
}

.checkbox-inline {
  cursor: pointer;
  display: inline-block;
  font-weight: normal;
  line-height: 1.2;
  margin: 0 0 2em;
  padding-left: 20px;
  vertical-align: middle;

  input {
    line-height: 0;
    margin: 0 1em 0 0;
  }
}

.home.index {
  h1 {
    margin: 3em 0 0;
    text-align: center;
  }
}

.login {
  background: $purple;
  padding-top: 40px;

  h1 {
    color: $white;
  }
}

.action-buttons {
  width: 180px;
}

.alert-message {
  color: $red-alt;
  font-size: 1.2rem;
  margin-top: 20px;
  padding: 5px 10px;
}

.grid-filters {
  .material-icons {
    margin: 0 0 .1em;
  }

  input,
  select {
    max-width: 100%;
  }
}

label.required:after{content:"*"}

.m-l-15 {
  margin-left: 15px;
}

.m-r-15 {
  margin-right: 15px;
}

.m-b-0 {
  margin-bottom: 0;
}

@media print, screen and (min-width: 40em) {
  .reveal, .reveal.tiny, .reveal.small, .reveal.large {
    right: auto;
    left: auto;
    margin: 0 auto; } }

body.is-reveal-open {
  overflow: hidden; }

html.is-reveal-open,
html.is-reveal-open body {
  min-height: 100%;
  overflow: hidden;
  position: fixed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.reveal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1005;
  display: none;
  background-color: rgba(10, 10, 10, 0.45);
  overflow-y: scroll; }

.reveal {
  z-index: 1006;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: none;
  padding: 1rem;
  border: 1px solid #cacaca;
  border-radius: 0;
  background-color: #fefefe;
  position: relative;
  top: 100px;
  margin-right: auto;
  margin-left: auto;
  overflow-y: auto; }
  [data-whatinput='mouse'] .reveal {
    outline: 0; }
  @media print, screen and (min-width: 40em) {
    .reveal {
      min-height: 0; } }
  .reveal .column {
    min-width: 0; }
  .reveal > :last-child {
    margin-bottom: 0; }
  @media print, screen and (min-width: 40em) {
    .reveal {
      width: 600px;
      max-width: 75rem; } }
  .reveal.collapse {
    padding: 0; }
  @media print, screen and (min-width: 40em) {
    .reveal.tiny {
      width: 30%;
      max-width: 75rem; } }
  @media print, screen and (min-width: 40em) {
    .reveal.small {
      width: 50%;
      max-width: 75rem; } }
  @media print, screen and (min-width: 40em) {
    .reveal.large {
      width: 90%;
      max-width: 75rem; } }
  .reveal.full {
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100vh;
    min-height: 100vh;
    margin-left: 0;
    border: 0;
    border-radius: 0; }
  @media screen and (max-width: 39.9375em) {
    .reveal {
      top: 0;
      left: 0;
      width: 100%;
      max-width: none;
      height: 100%;
      height: 100vh;
      min-height: 100vh;
      margin-left: 0;
      border: 0;
      border-radius: 0; } }
  .reveal.without-overlay {
    position: fixed; }

span.has-error {
  color: #ff216e;
  font-size: .9em;
}

.select2-container {
  width: 100%;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
  border: 0 !important;
  border-bottom: 1px solid #d9d9d9 !important;
}

.management-date {
  background: #333;
  border-bottom: 4px solid #000;
  text-align: center;
  padding: .9em;
  margin: 1em;
  strong {
    line-height: 1em;
    font-size: 30px;
    display: block;
    color: white;
  }
  small{
    color: white;
    font-weight: normal;
  }
}

.management-info {
  padding: 1em 1em 1em 0;
  p {
    margin: 0 0 .9em;
  }
  hr {
    margin: 1.5em 0;
    border: 0;
    border-top: 1px dashed #ededed;
  }
  .form {
    padding: 0;
  }
}

@media print, screen and (max-width: 40em) {
  .management-date {
    margin: 0;
  }
  .management-info {
    padding: 2em;
  }
  .asset-link {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 260px;
  }
}


.chart {
  padding: .5em 2em 1.5em;
}

ol.list-attempts {
  margin-left: 1em;
  padding: 0;
  font-weight: bolder;
}

.faketh{
  font-weight: 700 !important;
  //text-align: left;
}

.expedients_table {
  margin: 0px 0px 50px 0px !important;
  // border: 1px solid gray;
  .faketh{
    font-weight: 500;
    text-align: left;
  }
}

.table-container-o{
  //overflow: inherit;
}

.table-striped > tbody > tr:nth-child(odd) > td.strip {
    //background-color: #000 !important;
}

.table-striped > tbody > tr:nth-child(even) > td.strip {
    background-color: #e3e3e3 !important;
}

.half{
  width: 49%;
}

.picker__button--today, .picker__button--clear, .picker__button--close{
  //background-color: white !important;
  font-size: .8em !important;
}

.scroll{
  overflow-x: scroll !important;
}

.radiog{
  width: auto !important;
  height: auto !important;
}

.w100{
  width: 100% !important;
}

.no_margin{
  margin: 0 !important;
}

.closed-date {
  background: #ff8000;
  border-bottom: 4px solid #000;
  text-align: center;
  padding: .9em;
  margin: 1em;
  color: #000;
  strong {
    line-height: 1em;
    font-size: 30px;
    display: block;
  }
  small{
    font-weight: normal;
  }
}

.closed-info{
  .form{
    padding: 0;
    padding-right: 0.7em;
  }

  h2{
    font-weight: 700 !important;
  }

  strong{
    font-weight: 700 !important;
  }
}

.ng-table td {
  vertical-align: top;
}

.tabs {
  display: flex;

  &:hover a {
    border-bottom: 2px darken($white, 10%) solid;
  }

  a {
    border-bottom: 2px darken($white, 10%) solid;
    flex: 1;
    font-weight: $medium;
    padding: 1em;
    text-align: center;
    text-transform: uppercase;
    transition: all .2s linear;

    &:hover {
      border-bottom: 2px $blue solid;
    }
  }

  .active {
    border-bottom: 2px $blue solid;
  }
}



// Correct datepicker select css
select.datepick-month-year {
  border: none;
  border-radius: 0;
  padding: 0;
  width: auto;
  background: #e0e0e0;
  font-size: 1em;
}

#datepicker-filter {
  margin-bottom: 1em;
  clear: both;
  content: "";
  display: table;

  input[type=radio] {
    display: none;
  }

  .button {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    cursor: pointer;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;
    font-weight: normal;
    line-height: normal;
    margin: 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.88889rem;
    background-color: #dbdfe4;
    border-color: #5e708c;
    color: #5e708c;
    transition: background-color 300ms ease-out;
    float: left;
  }

  .button:first-child {
    border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
  }

  .button:last-child {
    border-width: 1px;
    border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
  }

  .button.active {
    background: #3f51b5;
    color: #ffffff;
  }
}

.datepick-month td .datepick-selected {
  background-color: #3f51b5;
  color: #ffffff;
}

.datepick-ctrl .datepick-cmd:hover {
	background-color: #1f56b8;
}

.datepick-ctrl {
  background: #3f51b5;
  a { color: #ffffff; }
}

.datepick {
  width: 15em !important;
}

.wauto {
  width: auto !important;
}
