h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: Lato, sans-serif;
}

.auditBox {
  max-height: 350px;
  overflow-y: scroll;
  time {
    float: right;
    margin-right: 0.5em;
  }
}

#nav-home a {
  background-image: url('/images/conjur-logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  padding-left: 12em;
}

thead {
  border-bottom: #999999 thin solid;
}

th {
  text-transform: capitalize;
}

th, td {
  padding: 3pt 8pt;
}

caption {
  color: #6d6d6d;
  font-size: 1.6em;
  margin-bottom: 0.6em;
  letter-spacing: 0.2em;
  text-transform: lowercase;
}

.no-icon {
  background-image: none !important;
  background-size: 0 !important;
  background-position: default !important;
}

.group-icon(@size, @x-offset: 0.2em, @y-offset: 0.07em) {
  background-image: url('/images/icon-person.svg'), url('/images/icon-person.svg');
  background-repeat: no-repeat;
  background-size: @size;
  background-position: (-0.2 * @size + @x-offset) (-0.1 * @size + @y-offset), (0.2 * @size + @x-offset) (0.1 * @size + @y-offset);
}

.environment-icon(@size, @x-offset: 0.2em, @y-offset: 0.07em) {
  background-image: url('/images/icon-key.svg'), url('/images/icon-key.svg');
  background-repeat: no-repeat;
  background-size: @size;
  background-position: (-0.2 * @size + @x-offset) (-0.1 * @size + @y-offset), (0.2 * @size + @x-offset) (0.1 * @size + @y-offset);
}

.group h2, .groupsList tbody tr td.id {
  .group-icon(2em);
  padding-left: 2.5em;
}

.group h2 {
  padding: 0.5em 2.5em;
}

dl {
  font-size: 1.2em;
  margin: 2em 1em;
}

dd {
  /* top left bottom (I always forget that) */
  margin: 0.3em 1.4em 1em;
}

.group {
  ul {
    padding-left: 0em;
  }

  li {
    display: block;
  }
}

dl.propertyList {
  dt {
    display: inline;
    margin-left: 6px;
    font-size: 14px;
  }

  dd {
    display: inline;
    margin-left: 6px;
    font-size: 14px;
  }
}

.namespaceList {
  float: right;

  h2, div {
    font-size: 1em;
    display: inline;
    margin: 0.5em;
    color: #2d2d2d;
  }

  select {
    background: white;
    border: #ddd solid thin;
    border-radius: 0.5em;
    color: #2d2d2d;
  }
}

.role-link-padding {
  padding-left: 1.7em;
}

.role-link-icon(@icon, @size: 1.6em) {
  .role-link-padding;

  background-image: url(@icon);
  background-size: @size;
  background-repeat: no-repeat;
}

.variable.resource-link {
  .role-link-icon('/images/icon-variable.png', 0.8em);
}

.environment.resource-link {
  .role-link-icon('/images/icon-environment.png', 1.1em);
}

.environment-variables.resource-link {
  .role-link-icon('/images/icon-environment.png', 1.1em);
}

.host.role-link {
  .role-link-icon('/images/icon-client-pc.svg');
  background-position-y: -0.1em;
}

.user.role-link {
  .role-link-icon('/images/icon-person.svg');
  background-position-y: -0.2em;
}

.group.role-link {
  .role-link-padding;
  .group-icon(1.2em);
}

.auditBox {
  th.when {
      width: 129px;
  }
}

.search-button {
  margin-left: 0.5em;
}

.dashboard form.search, #searchResults form.search {
  margin: 0px auto;
  width: 300px;
}

.search-group {
  .panel-heading {
    a:after {
      font-family: 'Glyphicons Halflings';
      content: "\e114";
      float: right;
      color: grey;
    }
    
    a.collapsed:after {
      content: "\e080";
    }
  }
}

.search-results {
  .item {
    h4 {
      margin-bottom: 4px;  
    }
    
    .details {
      font-size: 12px;
    }
    
    .comment {
      font-size: 14px;
    }
  }
}

.searchResults .toc-item {
  display: inline-block;
  margin: 5px;
}

.searchResults h3 {
  margin: 5px 0 0 4px;
}

// Conjur color palette.
//
// Styleguide 2.0.
@turquoise: #00b49d;
@light-blue: #99b8c7;
@dark-blue: #49585f;

// Highlight color: a bright color to bring attention to changes and interaction possibilities.
//
// Styleguide 2.1.
@highlight-color: @turquoise;

// Content color: a basic content color.
//
// Styleguide 2.2.
@content-color: darken(@light-blue, 80%);

// Background color: a dark color to serve as ambient background.
//
// Styleguide 2.3.
@background-color: lighten(@dark-blue, 90%);

// Basic body settings.
//
// Styleguide 1.0.
body {
  font-family: Lato, sans-serif;
  background: @background-color;
  color: @content-color;
  font-size: 12pt;

  a {
    color: darken(@highlight-color, 5%);

    &:hover {
      color: darken(@highlight-color, 10%);
    }
  }

  h2 {
    letter-spacing: 0.1em;
    margin-top: 0;
    font-weight: 300;
  }

  h3 {
    margin: 2em 0 1em;
    letter-spacing: 0.01em;
    font-weight: 300;
  }

  dl {
    display: flex;
    position: relative;
    padding-top: 1.5em;

    dt {
      font-weight: 300;
    }

    dd {
      margin: 0 0 5px 0;
    }
  }
}

// Section describing permissions held by a particular role.
//
// .loading - Indicates that the section has not loaded yet.
//
// Styleguide 1.1.
section.permissions {
  &.loading {
    h3:after {
      content: ' — loading, please wait…';
      font-weight: 300;
    }
  }
}

// The topmost content container.
//
// Styleguide 1.2.
#content {
  margin: 0 3em;
}

// Search results.
//
// Styleguide 1.3.
.search-results {
  color: darken(@content-color, 30%);

  a {
    color: darken(@highlight-color, 50%);
  }
}

// Pacer: a loading progress and activity indicator.
//
// @pace-color - Color of the progress bar.
//
// Styleguide 3.
@pace-color: @highlight-color;

.pace-inactive {
  display: none;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  .pace-progress {
    background: @pace-color;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    height: 2px;

    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;
  }

  .pace-progress-inner {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px @pace-color, 0 0 5px @pace-color;
    opacity: 1.0;
    -webkit-transform: rotate(3deg) translate(0px, -4px);
    -moz-transform: rotate(3deg) translate(0px, -4px);
    -ms-transform: rotate(3deg) translate(0px, -4px);
    -o-transform: rotate(3deg) translate(0px, -4px);
    transform: rotate(3deg) translate(0px, -4px);
  }

  .pace-activity {
    background-image: url('/images/icon-service-dots.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    display: block;
    position: fixed;
    z-index: 2000;
    top: 5px;
    right: 5px;
    width: 70px;
    height: 70px;
    -webkit-animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
    -moz-animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
    -ms-animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
    -o-animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
    animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
  }
}

@-webkit-keyframes pace-pulse {
  0% { -webkit-transform: scale(1); }
  100% { -webkit-transform: scale(0.8); }
}

@keyframes pace-pulse {
  0% { transform: scale(1); }
  100% { transform: scale(0.8); }
}