@import “variables”; @import “fonts”; @import “normalize”;

.rwpt-toolbar {

margin-top: 40px;

}

rack-webprofiler-bar {

position: fixed;
height: auto;
left: 0;
bottom: 0;
font-family: $fonts;
// Specify the container font-size, to prevent a global stylesheet side-effect.
font-size: 16px;

@include normalize;

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-osx-font-smooth: grayscale;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

&.rack-webprofiler--long {
  width: 100%;
  background-color: $profiler_bar_background;
}
.rack-webprofiler__wrapper {
  display: table;
}
.rack-webprofiler__item {
  display: table-cell;
  position: relative;
  background-color: $profiler_bar_background;

  a,
  .rack-webprofiler__item-content {
    // Position is important here, because .details will base itself on it!
    position: relative;
    display: block;
    height: 40px;
    padding: 10px;
    box-sizing: border-box;
    line-height: 20px;
    border-top: 1px $profiler_bar_border solid;
    border-right: 1px $profiler_bar_border solid;
  }
}
.rack-webprofiler__item:hover {
  background-color: $profiler_bar__item_hover;
}
.rack-webprofiler__item:hover .details {
  display: block;
}
.rack-webprofiler__item i.icn {
  float: left;
  height: 20px;
  margin-right: 5px;
  img {
    display: block;
    height: 100%;
    width: auto;
  }
}
.rack-webprofiler__item--close {
  width: 45px;
  text-align: center;
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer;
}
.rack-webprofiler__item--close i.icn {
  padding: 0px;
}
.rack-webprofiler__item__label,
.rack-webprofiler__item__value {
  font-weight: 600;
  font-size: 14px;
  color: $light_grey;
}
.rack-webprofiler__item__value {
  float: left;
  line-height: 20px;
  color: $tiny_grey;
  vertical-align: middle;
}
.rack-webprofiler__item__status-color {
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0;
  right: 0;
  bottom: 0;
  &.success {
    background-color: $success_color;
  }
  &.warning {
    background-color: $warning_color;
  }
  &.danger {
    background-color: $danger_color;
  }
}

.details {
  display: none;
  width: auto;
  position: absolute;
  top: -1px;
  left: -1px;
  transform: translate3d(0, -100%, 0);
  background: $dark_blue_hover;

  .wrapper {
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid $dark_blue_light;
    border-bottom: 0;
  }

  dl {
    dt {
      float: left;
      clear: left;
      width: $profiler_bar__item_details_label_width;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 600;
      color: $light_grey;
    }
    dd {
      margin-left: $profiler_bar__item_details_label_width;
      font-weight: 400;
      color: $tiny_grey;
    }
    dt,
    dd {
      text-align: left;
      white-space: nowrap;
    }
  }
}

}

/*#rack-webprofiler {

position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;

background-color: #1c1f33;
color: #f3fcf0;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 14px;

}

rack-webprofiler .rack-webprofiler_collectors {

height: 40px;

}

rack-webprofiler .rack-webprofiler_collectors > .rack-webprofiler_collector {

float: left;
padding: 0 10px;
border: 1px solid #282f4c;
height: 38px;
line-height: 40px;

}

rack-webprofiler .rack-webprofiler_collectors .rack-webprofiler_collector img {

width: 20px;
height: 20px;
position: relative;
top: 4px;

} rack-webprofiler .rack-webprofiler_collectors .rack-webprofiler_collector.error, rack-webprofiler .rack-webprofiler_collectors .rack-webprofiler_collector.success {

height: 35px;
border-bottom-style: solid;
border-bottom-width: 4px;

} rack-webprofiler .rack-webprofiler_collectors .rack-webprofiler_collector.error {

border-bottom-color: #ff2851;

} rack-webprofiler .rack-webprofiler_collectors .rack-webprofiler_collector.success {

border-bottom-color: #44db5e;

}*/