Breadcrumb fixes for database view.

Breadcrumb fixes for database view.

/*  Licensed under the Apache License, Version 2.0 (the "License"); you may not
 *  use this file except in compliance with the License. You may obtain a copy of
 *  the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 *  License for the specific language governing permissions and limitations under
 *  the License.
 */

/*!
 *
 * Fauxton less style files
 *
 */
@import "variables.less";
@import "bootstrap/bootstrap.less";
@import "bootstrap/mixins.less";
@import "prettyprint.less";
@import "pagination.less";
@import "icons.less";

/**
 * HTML-wide overrides
 **/

*, *:before, *:after {
  .box-sizing(border-box);
}

body {
  font-size: 16px;
  line-height:1.3;
  padding-bottom: 0px;
  color: #333;
  padding-top: 90px;
  background-color: @sidebarBG;
}

h2,h3,h4 {font-weight: 600;}

a {
  .transition(all .25s linear);
}

a,
a:visited,
a:active {
  color: @linkColor;
}

a:hover {
  color: @linkColorHover;
}

input[type=text],
input[type=password] {
  .border-radius(0);
  padding: 12px;
  border: 1px solid #ccc;
  height: auto;
  font-size: 16px;
  margin-top: 0;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="file"],
input[type="checkbox"],
input[type="radio"],
select {
  margin: 0 0 1em 0;
}

/* bootstrap overrides */
.page-header {
  border-bottom: 1px solid #E3E3E3;
  margin-bottom: 10px;
  h3 {
    text-transform: capitalize;
    margin-bottom: 0;
  }
}

.nav-tabs > li {
  margin-right: 2px;
  > a {
    cursor: pointer;
    color: #333;
    border-color: #eeeeee #eeeeee #dddddd;
    text-decoration: none;
    background-color: #eeeeee;
    border-radius: 0;
    border-left: none;
    border-right: none;
    &:hover,
    &:focus {
      background-color: @linkColor;
      border-top: 1px solid @linkColor;
      color: white;
    }
  }
}

.well {
  select {
    margin: 0;
  }
  .controls-group {
    &:first-child,
    &:last-child {
      margin-top: 24px;
    }
    margin-bottom: 8px;
  }
  .controls-row {
    margin-bottom: 8px;
  }
  .row-fluid {
    margin: 0;
  }
  .row-fluid .row-fluid:last-child .well-item {
    border: none;
  }
  .well-item {
    color: #666;
    font-size: 12px;
    border-bottom: 1px solid #e5e5e5;
    padding: 8px 4px;
    strong {
        font-size: 16px;
    }
  }
}

/*TABLE STYLES*/
table.table {
  table-layout: fixed;
}
table tr td{
  word-wrap: break-word;
  &.select {
    width: 20px;
  }
}
thead {
  border-bottom: 2px solid @brandPrimary;
}
tbody {
  padding-top: 10px;
}
.table-condensed td {
  padding: 18px 5px;
}
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th
{
  background-color: #F7F7F7;
}

/*form elements and buttons*/
.btn-group {
  > .btn + .dropdown-toggle,
  > .btn:first-child,
  > .btn:last-child,
  > .dropdown-toggle {
    .border-radius(0);
    background-image: none;
    text-shadow: none;
  }
}

.btn {
  .box-shadow(none);
  .border-radius(@baseBorderRadius);
  background-image: none;
  text-shadow: none;
  background-repeat: no-repeat;
  padding: 10px;
  margin-top: 0px;
  .icon {
    margin-right: 0.2em;
  }
  &.btn-small {
    padding: 5px 10px;
    .icon {
      margin-right: 0;
      font-size: inherit;
    }
  }
  &.btn-mini {
    padding: 3px 8px;
    .icon {
      margin-right: 0;
      font-size: inherit;
    }
  }
}
.btn-primary {
  background: @brandPrimary;
}

.btn-primary a:visited {
  color: #fff;
}

.form-actions {
  background: none;
  border: none;
}

.input-append,
.input-prepend {
  .add-on {
    font-size: 18px;
    padding: 14px 5px 30px;
  }
  .btn .icon {
    font-size: 16px;
    margin-right: 0;
  }
}

.row-fluid .input-append [class*="span"],
.input-prepend input[class*="span"] {
  width: auto;
}

.form-inline {
  input[type=password],
  input[type=text] {
    width: auto;
  }
}
.checkbox {
  label {
    display: inline-block;
    padding-left:25px;
  }
}

label {
  margin-right: 15px;
  padding-left:0;
  display: block;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  &.inline {
    display: inline-block;
  }
}
.help-block {
  font-size: 12px;
}

a.help-link:hover {
  text-decoration: none;
}

input[type=text].error {
  border: red 1px solid;
}

/**
 * Fauxton-specific Bootstrap additions
 **/
table.databases {
  clear: both;
}
.nav-tabs > li > a .fonticon:before {
  margin-right: 6px;
  font-size: 16px;
}

/* application specific stuff */
#main > footer {
  .box-shadow(-7px 0 15px -6px #000);
  border-left: 1px solid #999;
  position: fixed;
  bottom: 0;
  font-size: 10px;
  margin-left: @navWidth;
  padding: 5px 10px;
  background-color: #F2F2F2;
  width: 100%;
  .closeMenu & {
    margin-left: @collapsedNavWidth;
  }
}

/* ajax loader */
.loader {
  background: url('../img/loader.gif') center center no-repeat;
  min-height:  100px;
}

#global-notifications {
  position: fixed;
  top: 0px;
  display: block;
  z-index: 100000;
  left: @navWidth;
  .closeMenu & {
    left: @collapsedNavWidth;
  }
  width: 100%;
}

/*container where the layout is injected*/
#app-container{
  padding: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  > .row-fluid {
    height: 100%;
  }
  &.loader{
    min-height: 400px;
    > *{
      display: none;
    }
  }
}

@media screen and ( max-height: 600px ){
 #primary-navbar{
     overflow-y: scroll;
 }
}

@media screen and ( min-height: 600px ){
 #primary-navbar{
     overflow-y: hidden;
 }
}

/* Fixed side navigation */
#primary-navbar {
  height: 100%;
  position: fixed;
  width: @navWidth;
  top: 0;
  bottom: 0;
  background-color: @primaryNav;
  .js-version {
    color: #fff;
    font-size: 10px;
    padding-left: 10px;
  }
  .closeMenu & {
    .js-version {
      display: none;
    }
  }
  #footer-links{
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  #user-create-admin{
    font-size: 12px
  }
  .navbar {
     .burger{
        .transition(all @transitionSpeed @transitionEaseType);
        padding: 22px 0 0 18px;
        position: fixed;
        z-index: 100;
        width: 64px;
        top: 0;
        background-color: @primaryNav;
        width: @navWidth;
        div{
          .transition(all @transitionSpeed @transitionEaseType);
          height: 4px;
          width: 24px;
          .border-radius(2);
          background-color: @navBG;
          margin: 2px 0px;
        }
        &:hover div{
          background-color: @navBGHover;
        }
      }
      .bottom-container {
       height: 110px;
       position: fixed;
       bottom: 0;
       width: 220px;
       background: #3a2c2b;
       .brand {
         .box-sizing(content-box);
         .hide-text;
         .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985);
         margin: 10px 0 0 0;
         width: 200px;
         height: 40px;
         padding: 10px;
         float: none;
         background: #3a2c2b;
         .icon {
           .box-sizing(content-box);
           background: url(../img/couchdb-site.png) no-repeat 0 0;
           display: block;
           height: 100%;
           width: 100%;
         }
         .closeMenu & {
           .icon {
              background: url(../img/minilogo.png) no-repeat 0 0;
            }
            width: 45px;
          }
       }
       #footer-nav-links {
       li {
       a {
         font-size: 12px;
         color: @linkColor;
         padding: 12px;
         text-shadow: none;
       }
       &.active, &:hover{
             a {
               text-decoration: underline;
             }
           }
     }
       }
    }
    nav {
      margin-top: 64px;
      .nav{
        margin: 0;
        li{
          .transition(all @transitionSpeed @transitionEaseType);
          padding: 0;
          font-size: 16px;
          letter-spacing: 1px;
          line-height: 23px;
          width: @navWidth;
          font-weight: normal;
          font-family: helvetica;
          .box-sizing(border-box);
          background-color: @navBG;
          border-bottom:  1px solid @primaryNav;
          min-height: 48px;
          &.active, &:hover{
            a{
              .box-shadow(none);
            }
            background-color: @navBGHover;
          }
          &:hover .fonticon:before{
            color: @white;
          }
          &.active .fonticon:before,
          &:hover .fonticon:before,
          {
            text-shadow: @boxShadow;
            color: @NavIconActive;
          }
          a{
            padding: 12px 25px 12px 60px;
            background-color: transparent;
            color: #fff;
            text-shadow: @textShadowOff;
            &.closeMenu{
              color: transparent;
            }
            .fonticon {
              position: relative;
              &:before {
                position: absolute;
                top: -5px;
                left: -41px;
                font-size: 24px;
                color: @NavIcon;
                text-shadow: @boxShadowOff;
              }
            }
            .closeMenu &{
              color: transparent;
            }
          }
        }
      }
      ul#footer-nav-links{
        li{
          background-color: @primaryNav;
          border-top: 1px solid @linkColor;
          border-bottom: none;
          font-size: 12px;
          padding: 12px;
          min-height: 44px;
          &.active, &:hover{
            background-color: @navBGHover;
            border-top: 1px solid @linkColor;
            a{
              color: white;
            }
          }
          a{
            color: @linkColor;
          }
        }

      }
      ul#bottom-nav-links{
        margin-top: 0;
        padding-bottom: 70px;
        li{
          min-height: 55px;
          background-color: @bottomNav;
          &.active{
            background-color:@navBGHover;
          }
          &:hover{
            background-color: @navBGHover;
          }
          a{
            &.fonticon {
              position: relative;
              &:before {
                top: -5px;
                left: -40px;
                font-size: 22px;
              }
            }
          }
        }
      }
    }
  }
}

/*

  FIXED HEADER, DASHBOARD & BREADCRUMBS:

  one_pane.html
  two_pane.html
  with_sidebar.html
  with_tabs.html
  with_tabs_sidebar.html
*/
#dashboard {
  .left-shadow-border;
  position: absolute;
  left: @navWidth;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  background-color: @sidebarBG;
  min-width: 600px;
  height: 100%;
  .closeMenu &{
    left: @collapsedNavWidth;
  }
  &.one-pane{
    min-width: 800px;
    margin-top: 0;
    overflow-x: hidden;
  }
  &.two-pane{
    margin-top: 0;
    overflow-x: hidden;
  }
}

.with-sidebar.content-area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.row-fluid.content-area{
  background-color: @background;
}

.fixed-header{
  background-color: @breadcrumbBG;
  position: fixed;
  top: 0;
  right: 0;
  left: @navWidth;
  .closeMenu & {
    left: @collapsedNavWidth;
  }
  //border-bottom: 5px solid @breadcrumbBorder;
  .box-shadow(0 4px 6px -2px #808080);
  z-index: 100;
  .one-pane & {
    position: relative;
    border: none;
    .box-shadow(none);
    left: auto;
  }
}

/*SIDEBAR TEMPLATE STYLES*/
.topmenu-defaults {
  height: 70px;
  padding: 12px 10px 0;
  .box-sizing(border-box);
}

.dashboard-upper-menu{
  right: 0;
  left: @sidebarWidth+@navWidth;
  position: fixed;
  z-index: 11;
  display: block;
  .topmenu-defaults;
  background-color: #CBCBCB;
  .closeMenu & {
    left: @sidebarWidth+@collapsedNavWidth;
  }
}

#dashboard-lower-content{
  padding: 20px;
  background-color: #F1F1F1;
}

#dashboard-upper-content{
  .tab-content {
    padding-top: 70px;
  }
  .well{
    padding: 20px;
    .border-radius(0);
    .box-shadow(none);
  }
}

.sidenav {
  padding: 0;
  header {
    width: @sidebarWidth;
    border-bottom: 1px solid #d3d7db;
  }
  .nav-list{
    .divider {
      border: none;
    }
    > li > a:hover,
    > li > a:focus{
      background-color: @linkColorHover;
      color: #fff;
    }
    li.active > a {
      color: @linkColorHover;
    }
    > li > a{
      color: @linkColor;
      padding: 10px 13px 10px 24px;
      border-bottom: 1px solid #d3d7db;
      span{
        margin-right: 8px;
        width: 14px;
        display: inline-block;
        text-align: center;
      }
    }
    a{
      display: block;
      padding: 10px 5px 5px 15px;
      color: @subListGray;
      .divider {
        background: none;
        color: #ccc;
        padding: 0 2px;
      }
    }
    .nav-header{
      padding: 0px;
      text-shadow: none;
      color: #333333;
      & > span:hover {
        color: @linkColor;
      }
    }
  }
}

#sidebar-content {
  position: absolute;
  top: 60px;
  width: @sidebarWidth;
  left: 0;
  background-color: @secondarySidebar;
  > div.inner {
    display: block;
  }
}

/*ONE PANEL TEMPLATE ONLY STYLES  AKA _all_dbs */

.result-tools{
  border-bottom: 1px solid #999999;
  padding: 5px 0;
  border-bottom: 1px solid #999999;
  padding: 10px 0;
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

#db-views-tabs-nav{
  position: fixed;
  z-index: 12;
  margin-top: 19px;
  margin-bottom: 0;
  /*background-color: #f4f4f4;*/
  padding: 0 20px;
}

.db-views-smaller {
  max-width: 500px;
}

/** table row selector thing **/
.select{
  > a{
    display: block;
    padding: 5px 15px 5px 5px;
    border: 1px solid #989898;
    position: relative;
    background-color: #FFFFFF;
    color: #666666;
    &:after {
      content: '';
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 7px solid #989898;
      position: absolute;
      right: 9px;
      top: 12px;
    }
    &:before{
      content: '';
      border-left:  1px solid #989898;
      height: 30px;
      position: absolute;
      right: 30px;
      top: 0;
    }
  }
}

.custom-inputs{

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

  .checkbox label:before {
    border-radius: 3px;
  }

  .controls > .radio:first-child, .controls > .checkbox:first-child {
    padding-top: 15px;
  }

  .radio.inline, .checkbox.inline {
    display: inline-block;
    padding-top: 15px;
    margin-bottom: 12px;
    vertical-align: middle;
  }

  input[type=checkbox]:checked + label:before {
    /*content: "\2713"; */
    content: "\00d7";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 16px;
    background-color: @linkColor;
    color: white;
    text-align: center;
    line-height: 15px;
  }

  label:before {
    content: "";
    display: inline-block;

    width: 16px;
    height: 16px;

    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
  }

  .radio label:before {
    border-radius: 8px;
  }

  input[type=radio]:checked + label:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
  }

  label.drop-down{
    &:before{
    display: none;
    }
  }
}

form.view-query-update, form.view-query-save {
  max-width: 100%;
}

/*documents and databases */
.view.show{
  color: @fontGrey;
}

div.spinner {
  position: absolute;
  left: 50%;
  top: 50%;
}

#api-navbar{
  > div{
    > .api-url-btn {
      padding:10px;
    }
  }
}

.api-url-btn {
  .icon {
    font-size: 11px;
  }
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}
.api-url-btn:hover {
  background: none;
}
.api-navbar {
  padding: 5px 20px;
  .input-append.input-prepend {
    margin-bottom: 0px;
    .copying {
      background-color: #999;
      transition: background-color 5ms linear;
    }
    .input-xxlarge {
      .border-radius(5px 0 0 5px);
      border: none;
      padding: 9px;
      -moz-transition: background-color 100ms linear;
      -webkit-transition: background-color 100ms linear;
      transition: background-color 100ms linear;
    }
    .btn{
      background-color: @navBG;
      color: #fff;
      margin-left: -1px;
      padding: 10px 10px 8px;
      border: none;
      line-height: 1.5em;
      .border-radius(5px);
      &:hover{
        background-color: #cbcbcb;
      }
    }
    .copy-url {
      .border-radius(0 5px 5px 0);
    }
    .copying {
      background-color: #999;
    }
    .zeroclipboard-is-hover {
      background-color: #cbcbcb;
    }
    .icon-question-sign,
    .icon {
      font-size: 17.5px;
    }

    .icon {
      vertical-align: bottom;
    }

    .icon-question-sign {
      position: fixed;
      margin-left: 3px;
    }
  }
}

.js-filter-form {
  .help-block {
    padding: 5px 0 5px 0;
  }
  .icon {
    font-size: 16px;
  }
}

.js-filter {
  ul {
    margin-left: 0px;
  }
  li {
    list-style-type: none;
  }
}

div.add-dropdown {
  position: absolute;
  top: 2px;
  right: 0px;
  .dropdown-menu{
    left: -110px;
    padding-bottom: 0;
    width: 148px;
    min-width: 0;
    top: 38px;
    .box-shadow(@boxShadow);
      &.arrow:before{
        right: 4px;
      }
      a {
        background-color: #202326;
        color: rgba(255, 255, 255, 0.8);
        &:hover{
          background-color: @navBG;
          color: white;
        }
      }
    li a {
      padding: 10px 15px 10px 12px;
    }
  }
  .dropdown-toggle{
    border-top: none !important;
    text-decoration: none;
  }
  > a {
    border-bottom: none;
    text-decoration: none;
    font-size: 16px;
  }
}

//----templates//

/*
---------------------------------------------------
  REUSEABLE SHADOW BORDER
---------------------------------------------------
*/

.left-shadow-border{
  border-left: 1px solid #999;
  .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
}

.bottom-shadow-border{
  border-bottom: 1px solid #999;
  .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
}

#right-content,
#dashboard-lower-content{
  .view {
    //background-color:#A8A1A1;
  }
}

#dashboard-content{
  padding-left: 15px;
  padding-top: 20px;

  &.row-fluid,
  &.window-resizeable{
    /*remove gutter without rewriting variable*/
    margin-left: 0px;
  }
  .one-pane &{
    //margin-top:60px;
    padding-bottom:25px;
  }
  .with-sidebar &{
    .left-shadow-border;
    border-right: 1px solid #999;
    width: auto;
    padding: 0px;
    bottom: 0px;
    top: 60px;
    position: fixed;
    overflow-x: hidden;
    overflow-y: auto;
    left: @sidebarWidth+@navWidth;
    right: 0;
    .box-sizing(border-box);
    .closeMenu & {
      left: @sidebarWidth+@collapsedNavWidth;
    }
  }
  > div.inner {
    display: block;
  }
}

#global-notifications{
  .with-sidebar & {
    left: @sidebarWidth+@navWidth;
    .closeMenu & {
      left: @sidebarWidth+@collapsedNavWidth;
    }
  }
}

#right-content{
  .two-pane &{
    .view {
      padding: 0 20px 40px;
    }
    border-left: 1px solid #999;
    .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
  }
}

//---header--//
.left-shadow-border{
  border-left: 1px solid #999;
  .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
}

.bottom-shadow-border{
  border-bottom: 1px solid #999;
  .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
}

.fixed-header{
  height: 60px;
  background-color: @breadcrumbBG;
  position: fixed;
  top: 0;
  right: 0;
  left: @navWidth;
  .closeMenu & {
    left: @collapsedNavWidth;
  }
  z-index: 100;
  .two-pane & {
    border: none;
  }
  .two-pane &,
  .with-sidebar & {
    #api-navbar{
      > div {
        .bottom-shadow-border;
        height: 60px;
      }
      .left-shadow-border;
    }
    #breadcrumbs{
      .bottom-shadow-border;
    }
  }
  .one-pane & {
    .bottom-shadow-border;
    left: auto;
  }
  /* these styles are for the new header*/
  > div {
    display:inline-block;
    vertical-align: top;
  }
}

#api-navbar{
  height: 60px;
  position: absolute;
  /* these styles are for the new header*/
  .right-header{
  }
}

/* only specify the sidebar width when there’s a sidebar */
.with-sidebar #breadcrumbs {
  width: @sidebarWidth;
}

#breadcrumbs {
  height: 60px;

  /* these styles are for the new header*/
  .header-left{
    > div{
      display:inline-block;
    }
    .breadcrumb {
      li:first-child{
        border-right: 1px solid #ccc;
      }
    }
  }
  .breadcrumb {
    margin-bottom: 0;
    background-color: transparent;
    padding: 0;
    li {
      padding: 20px 10px;
      height: 60px;
      &:first-child {
        font-size: 24px;
        .with-sidebar &,
        .two-pane & {
          padding:20px 10px;
          font-size: 19px;
          float: left;
        }
        a {
	        float: left;
        }
      }
      color: @breadcrumbText;
      font-size: 24px;
      text-shadow: none;
      &.active{
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 259px;
        white-space: nowrap;
      }
      &.divider {
        font-size: 14px;
        color: #ccc;
        padding: 20px 0px;
        width: 10px;
      }
      a{
        text-decoration: none;
        color: @breadcrumbText;
      }
    }
    .fonticon-right-open {
	    position: absolute;

	    &.divider {
		    padding: 23px 0;
	    }
	    +li {
		    text-overflow: inherit;
		    overflow: auto;
		    width: auto;
		    margin-left: 14px;
	    }
    }
  }
}

.header-left{
  position: relative;
  #header-dropdown-menu {
    position: absolute;
    right: 5px;
    top: 0;
    .dropdown-toggle {
      color: #666666;
    }
    a {
      padding: 10px;
      text-decoration: none;
    }
    .dropdown {
      border-left: 1px solid #ccc;
      padding: 20px 0px;
    }
    .dropdown-menu {
      left: -115px;
      top: 48px;
    }
  }
}

.tray {
  display: none;
  .border-radius(5px);
  position: absolute;
  right: 5px;
  top: 55px;
  z-index: 11;
  background-color: #333;
  color: #fff;
  margin: 0;
   .add-on {
    font-size: 16px;
    background: none;
    padding: 0px;
    margin: 10px 0;
    border: none;
    display: block;
    text-align: left;
    color: #fff;
    text-shadow: none;
    height: auto;
    line-height: 1em;
  }
}
.tray:before {
  content: '';
  position: absolute;
  top: -25px;
  border-color: transparent transparent #333 transparent;
  border-style: solid;
  border-width: 15px;
  width: 0;
  height: 0;
}

.fixed-header,
.header-right {
  > .btn {
    padding: 0;
    margin: 0;
  }
  > .button,
  > .button a,
  .api-url-btn > button,
  .btn-primary {
    color: #666;
    font-size: 13px;
    line-height: 3em;
  }
}

.header-right {
  .well {
    padding: 0;
    margin: 0;
  }
  .searchbox-container {
    position: relative;
    right: inherit;
    input[type="text"] {
      .border-radius(5px);
      font-size: 13px;
      padding: 8px 35px 8px 10px;
      width: 275px;
    }
    .btn-primary {
      background: none repeat scroll 0% 0% transparent;
      border: none;
      position: absolute;
      right: 12px;
      top: 0px;
      height:60px;
      z-index: 2;
      color: #999;
      .icon-search{
        position: absolute;
        top: 20px;
        right: 15px;
      }
    }
  }
  > div {
    float: right;
    height: 60px;
    border-left: 1px solid #ccc;
    margin: 0;
    padding: 10px 15px;
    line-height: 40px;
  }
  > div:last-child {
    border-left: none;
  }
}
.api-navbar:before {
  right: 25px;
}

#jump-to-doc{
  .btn-primary {
    .icon-search{
      position: absolute;
      top: 20px;
      right: 15px;
    }
  }
}

//----footer--///
footer.pagination-footer {
  z-index: 1;
  min-width: 600px;
  position:fixed;
  background-color:#fff;
  bottom:0;
  height: 50px;
  border-top:1px solid #ccc;
  margin-left: -15px;
  .pagination{
    .box-shadow(none);
    position: absolute;
    right:0;
    top: 0;
    margin:0px;
    height: 50px;
    border-left: 1px solid #ccc;
    li {
      display: inline-block;
      a {
        padding: 15px 10px 15px 15px;
        border: none;
      }
    }
  }
}

footer.index-pagination {
  margin-left: -20px;
}

#item-numbers{
  p {
    margin: 20px;
    font-size: 14px;
  }
}

div#per-page {
  position: absolute;
  right: 86px;
  top: 2px;
  #select-per-page {
    margin-top: 10px;
  }
}

/*  Licensed under the Apache License, Version 2.0 (the "License"); you may not
 *  use this file except in compliance with the License. You may obtain a copy of
 *  the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 *  License for the specific language governing permissions and limitations under
 *  the License.
 */

/*!
 *
 * Fauxton less style files
 *
 */
@import "variables.less";
@import "bootstrap/bootstrap.less";
@import "bootstrap/mixins.less";
@import "prettyprint.less";
@import "pagination.less";
@import "icons.less";

/**
 * HTML-wide overrides
 **/

*, *:before, *:after {
  .box-sizing(border-box);
}

body {
  font-size: 16px;
  line-height:1.3;
  padding-bottom: 0px;
  color: #333;
  padding-top: 90px;
  background-color: @sidebarBG;
}

h2,h3,h4 {font-weight: 600;}

a {
  .transition(all .25s linear);
}

a,
a:visited,
a:active {
  color: @linkColor;
}

a:hover {
  color: @linkColorHover;
}

input[type=text],
input[type=password] {
  .border-radius(0);
  padding: 12px;
  border: 1px solid #ccc;
  height: auto;
  font-size: 16px;
  margin-top: 0;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="file"],
input[type="checkbox"],
input[type="radio"],
select {
  margin: 0 0 1em 0;
}

/* bootstrap overrides */
.page-header {
  border-bottom: 1px solid #E3E3E3;
  margin-bottom: 10px;
  h3 {
    text-transform: capitalize;
    margin-bottom: 0;
  }
}

.nav-tabs > li {
  margin-right: 2px;
  > a {
    cursor: pointer;
    color: #333;
    border-color: #eeeeee #eeeeee #dddddd;
    text-decoration: none;
    background-color: #eeeeee;
    border-radius: 0;
    border-left: none;
    border-right: none;
    &:hover,
    &:focus {
      background-color: @linkColor;
      border-top: 1px solid @linkColor;
      color: white;
    }
  }
}

.well {
  select {
    margin: 0;
  }
  .controls-group {
    &:first-child,
    &:last-child {
      margin-top: 24px;
    }
    margin-bottom: 8px;
  }
  .controls-row {
    margin-bottom: 8px;
  }
  .row-fluid {
    margin: 0;
  }
  .row-fluid .row-fluid:last-child .well-item {
    border: none;
  }
  .well-item {
    color: #666;
    font-size: 12px;
    border-bottom: 1px solid #e5e5e5;
    padding: 8px 4px;
    strong {
        font-size: 16px;
    }
  }
}

/*TABLE STYLES*/
table.table {
  table-layout: fixed;
}
table tr td{
  word-wrap: break-word;
  &.select {
    width: 20px;
  }
}
thead {
  border-bottom: 2px solid @brandPrimary;
}
tbody {
  padding-top: 10px;
}
.table-condensed td {
  padding: 18px 5px;
}
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th
{
  background-color: #F7F7F7;
}

/*form elements and buttons*/
.btn-group {
  > .btn + .dropdown-toggle,
  > .btn:first-child,
  > .btn:last-child,
  > .dropdown-toggle {
    .border-radius(0);
    background-image: none;
    text-shadow: none;
  }
}

.btn {
  .box-shadow(none);
  .border-radius(@baseBorderRadius);
  background-image: none;
  text-shadow: none;
  background-repeat: no-repeat;
  padding: 10px;
  margin-top: 0px;
  .icon {
    margin-right: 0.2em;
  }
  &.btn-small {
    padding: 5px 10px;
    .icon {
      margin-right: 0;
      font-size: inherit;
    }
  }
  &.btn-mini {
    padding: 3px 8px;
    .icon {
      margin-right: 0;
      font-size: inherit;
    }
  }
}
.btn-primary {
  background: @brandPrimary;
}

.btn-primary a:visited {
  color: #fff;
}

.form-actions {
  background: none;
  border: none;
}

.input-append,
.input-prepend {
  .add-on {
    font-size: 18px;
    padding: 14px 5px 30px;
  }
  .btn .icon {
    font-size: 16px;
    margin-right: 0;
  }
}

.row-fluid .input-append [class*="span"],
.input-prepend input[class*="span"] {
  width: auto;
}

.form-inline {
  input[type=password],
  input[type=text] {
    width: auto;
  }
}
.checkbox {
  label {
    display: inline-block;
    padding-left:25px;
  }
}

label {
  margin-right: 15px;
  padding-left:0;
  display: block;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  &.inline {
    display: inline-block;
  }
}
.help-block {
  font-size: 12px;
}

a.help-link:hover {
  text-decoration: none;
}

input[type=text].error {
  border: red 1px solid;
}

/**
 * Fauxton-specific Bootstrap additions
 **/
table.databases {
  clear: both;
}
.nav-tabs > li > a .fonticon:before {
  margin-right: 6px;
  font-size: 16px;
}

/* application specific stuff */
#main > footer {
  .box-shadow(-7px 0 15px -6px #000);
  border-left: 1px solid #999;
  position: fixed;
  bottom: 0;
  font-size: 10px;
  margin-left: @navWidth;
  padding: 5px 10px;
  background-color: #F2F2F2;
  width: 100%;
  .closeMenu & {
    margin-left: @collapsedNavWidth;
  }
}

/* ajax loader */
.loader {
  background: url('../img/loader.gif') center center no-repeat;
  min-height:  100px;
}

#global-notifications {
  position: fixed;
  top: 0px;
  display: block;
  z-index: 100000;
  left: @navWidth;
  .closeMenu & {
    left: @collapsedNavWidth;
  }
  width: 100%;
}

/*container where the layout is injected*/
#app-container{
  padding: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  > .row-fluid {
    height: 100%;
  }
  &.loader{
    min-height: 400px;
    > *{
      display: none;
    }
  }
}

@media screen and ( max-height: 600px ){
 #primary-navbar{
     overflow-y: scroll;
 }
}

@media screen and ( min-height: 600px ){
 #primary-navbar{
     overflow-y: hidden;
 }
}

/* Fixed side navigation */
#primary-navbar {
  height: 100%;
  position: fixed;
  width: @navWidth;
  top: 0;
  bottom: 0;
  background-color: @primaryNav;
  .js-version {
    color: #fff;
    font-size: 10px;
    padding-left: 10px;
  }
  .closeMenu & {
    .js-version {
      display: none;
    }
  }
  #footer-links{
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  #user-create-admin{
    font-size: 12px
  }
  .navbar {
     .burger{
        .transition(all @transitionSpeed @transitionEaseType);
        padding: 22px 0 0 18px;
        position: fixed;
        z-index: 100;
        width: 64px;
        top: 0;
        background-color: @primaryNav;
        width: @navWidth;
        div{
          .transition(all @transitionSpeed @transitionEaseType);
          height: 4px;
          width: 24px;
          .border-radius(2);
          background-color: @navBG;
          margin: 2px 0px;
        }
        &:hover div{
          background-color: @navBGHover;
        }
      }
      .bottom-container {
       height: 110px;
       position: fixed;
       bottom: 0;
       width: 220px;
       background: #3a2c2b;
       .brand {
         .box-sizing(content-box);
         .hide-text;
         .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985);
         margin: 10px 0 0 0;
         width: 200px;
         height: 40px;
         padding: 10px;
         float: none;
         background: #3a2c2b;
         .icon {
           .box-sizing(content-box);
           background: url(../img/couchdb-site.png) no-repeat 0 0;
           display: block;
           height: 100%;
           width: 100%;
         }
         .closeMenu & {
           .icon {
              background: url(../img/minilogo.png) no-repeat 0 0;
            }
            width: 45px;
          }
       }
       #footer-nav-links {
       li {
       a {
         font-size: 12px;
         color: @linkColor;
         padding: 12px;
         text-shadow: none;
       }
       &.active, &:hover{
             a {
               text-decoration: underline;
             }
           }
     }
       }
    }
    nav {
      margin-top: 64px;
      .nav{
        margin: 0;
        li{
          .transition(all @transitionSpeed @transitionEaseType);
          padding: 0;
          font-size: 16px;
          letter-spacing: 1px;
          line-height: 23px;
          width: @navWidth;
          font-weight: normal;
          font-family: helvetica;
          .box-sizing(border-box);
          background-color: @navBG;
          border-bottom:  1px solid @primaryNav;
          min-height: 48px;
          &.active, &:hover{
            a{
              .box-shadow(none);
            }
            background-color: @navBGHover;
          }
          &:hover .fonticon:before{
            color: @white;
          }
          &.active .fonticon:before,
          &:hover .fonticon:before,
          {
            text-shadow: @boxShadow;
            color: @NavIconActive;
          }
          a{
            padding: 12px 25px 12px 60px;
            background-color: transparent;
            color: #fff;
            text-shadow: @textShadowOff;
            &.closeMenu{
              color: transparent;
            }
            .fonticon {
              position: relative;
              &:before {
                position: absolute;
                top: -5px;
                left: -41px;
                font-size: 24px;
                color: @NavIcon;
                text-shadow: @boxShadowOff;
              }
            }
            .closeMenu &{
              color: transparent;
            }
          }
        }
      }
      ul#footer-nav-links{
        li{
          background-color: @primaryNav;
          border-top: 1px solid @linkColor;
          border-bottom: none;
          font-size: 12px;
          padding: 12px;
          min-height: 44px;
          &.active, &:hover{
            background-color: @navBGHover;
            border-top: 1px solid @linkColor;
            a{
              color: white;
            }
          }
          a{
            color: @linkColor;
          }
        }

      }
      ul#bottom-nav-links{
        margin-top: 0;
        padding-bottom: 70px;
        li{
          min-height: 55px;
          background-color: @bottomNav;
          &.active{
            background-color:@navBGHover;
          }
          &:hover{
            background-color: @navBGHover;
          }
          a{
            &.fonticon {
              position: relative;
              &:before {
                top: -5px;
                left: -40px;
                font-size: 22px;
              }
            }
          }
        }
      }
    }
  }
}

/*

  FIXED HEADER, DASHBOARD & BREADCRUMBS:

  one_pane.html
  two_pane.html
  with_sidebar.html
  with_tabs.html
  with_tabs_sidebar.html
*/
#dashboard {
  .left-shadow-border;
  position: absolute;
  left: @navWidth;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  background-color: @sidebarBG;
  min-width: 600px;
  height: 100%;
  .closeMenu &{
    left: @collapsedNavWidth;
  }
  &.one-pane{
    min-width: 800px;
    margin-top: 0;
    overflow-x: hidden;
  }
  &.two-pane{
    margin-top: 0;
    overflow-x: hidden;
  }
}

.with-sidebar.content-area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.row-fluid.content-area{
  background-color: @background;
}

.fixed-header{
  background-color: @breadcrumbBG;
  position: fixed;
  top: 0;
  right: 0;
  left: @navWidth;
  .closeMenu & {
    left: @collapsedNavWidth;
  }
  //border-bottom: 5px solid @breadcrumbBorder;
  .box-shadow(0 4px 6px -2px #808080);
  z-index: 100;
  .one-pane & {
    position: relative;
    border: none;
    .box-shadow(none);
    left: auto;
  }
}

/*SIDEBAR TEMPLATE STYLES*/
.topmenu-defaults {
  height: 70px;
  padding: 12px 10px 0;
  .box-sizing(border-box);
}

.dashboard-upper-menu{
  right: 0;
  left: @sidebarWidth+@navWidth;
  position: fixed;
  z-index: 11;
  display: block;
  .topmenu-defaults;
  background-color: #CBCBCB;
  .closeMenu & {
    left: @sidebarWidth+@collapsedNavWidth;
  }
}

#dashboard-lower-content{
  padding: 20px;
  background-color: #F1F1F1;
}

#dashboard-upper-content{
  .tab-content {
    padding-top: 70px;
  }
  .well{
    padding: 20px;
    .border-radius(0);
    .box-shadow(none);
  }
}

.sidenav {
  padding: 0;
  header {
    width: @sidebarWidth;
    border-bottom: 1px solid #d3d7db;
  }
  .nav-list{
    .divider {
      border: none;
    }
    > li > a:hover,
    > li > a:focus{
      background-color: @linkColorHover;
      color: #fff;
    }
    li.active > a {
      color: @linkColorHover;
    }
    > li > a{
      color: @linkColor;
      padding: 10px 13px 10px 24px;
      border-bottom: 1px solid #d3d7db;
      span{
        margin-right: 8px;
        width: 14px;
        display: inline-block;
        text-align: center;
      }
    }
    a{
      display: block;
      padding: 10px 5px 5px 15px;
      color: @subListGray;
      .divider {
        background: none;
        color: #ccc;
        padding: 0 2px;
      }
    }
    .nav-header{
      padding: 0px;
      text-shadow: none;
      color: #333333;
      & > span:hover {
        color: @linkColor;
      }
    }
  }
}

#sidebar-content {
  position: absolute;
  top: 60px;
  width: @sidebarWidth;
  left: 0;
  background-color: @secondarySidebar;
  > div.inner {
    display: block;
  }
}

/*ONE PANEL TEMPLATE ONLY STYLES  AKA _all_dbs */

.result-tools{
  border-bottom: 1px solid #999999;
  padding: 5px 0;
  border-bottom: 1px solid #999999;
  padding: 10px 0;
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

#db-views-tabs-nav{
  position: fixed;
  z-index: 12;
  margin-top: 19px;
  margin-bottom: 0;
  /*background-color: #f4f4f4;*/
  padding: 0 20px;
}

.db-views-smaller {
  max-width: 500px;
}

/** table row selector thing **/
.select{
  > a{
    display: block;
    padding: 5px 15px 5px 5px;
    border: 1px solid #989898;
    position: relative;
    background-color: #FFFFFF;
    color: #666666;
    &:after {
      content: '';
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 7px solid #989898;
      position: absolute;
      right: 9px;
      top: 12px;
    }
    &:before{
      content: '';
      border-left:  1px solid #989898;
      height: 30px;
      position: absolute;
      right: 30px;
      top: 0;
    }
  }
}

.custom-inputs{

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

  .checkbox label:before {
    border-radius: 3px;
  }

  .controls > .radio:first-child, .controls > .checkbox:first-child {
    padding-top: 15px;
  }

  .radio.inline, .checkbox.inline {
    display: inline-block;
    padding-top: 15px;
    margin-bottom: 12px;
    vertical-align: middle;
  }

  input[type=checkbox]:checked + label:before {
    /*content: "\2713"; */
    content: "\00d7";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 16px;
    background-color: @linkColor;
    color: white;
    text-align: center;
    line-height: 15px;
  }

  label:before {
    content: "";
    display: inline-block;

    width: 16px;
    height: 16px;

    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
  }

  .radio label:before {
    border-radius: 8px;
  }

  input[type=radio]:checked + label:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
  }

  label.drop-down{
    &:before{
    display: none;
    }
  }
}

form.view-query-update, form.view-query-save {
  max-width: 100%;
}

/*documents and databases */
.view.show{
  color: @fontGrey;
}

div.spinner {
  position: absolute;
  left: 50%;
  top: 50%;
}

#api-navbar{
  > div{
    > .api-url-btn {
      padding:10px;
    }
  }
}

.api-url-btn {
  .icon {
    font-size: 11px;
  }
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}
.api-url-btn:hover {
  background: none;
}
.api-navbar {
  padding: 5px 20px;
  .input-append.input-prepend {
    margin-bottom: 0px;
    .copying {
      background-color: #999;
      transition: background-color 5ms linear;
    }
    .input-xxlarge {
      .border-radius(5px 0 0 5px);
      border: none;
      padding: 9px;
      -moz-transition: background-color 100ms linear;
      -webkit-transition: background-color 100ms linear;
      transition: background-color 100ms linear;
    }
    .btn{
      background-color: @navBG;
      color: #fff;
      margin-left: -1px;
      padding: 10px 10px 8px;
      border: none;
      line-height: 1.5em;
      .border-radius(5px);
      &:hover{
        background-color: #cbcbcb;
      }
    }
    .copy-url {
      .border-radius(0 5px 5px 0);
    }
    .copying {
      background-color: #999;
    }
    .zeroclipboard-is-hover {
      background-color: #cbcbcb;
    }
    .icon-question-sign,
    .icon {
      font-size: 17.5px;
    }

    .icon {
      vertical-align: bottom;
    }

    .icon-question-sign {
      position: fixed;
      margin-left: 3px;
    }
  }
}

.js-filter-form {
  .help-block {
    padding: 5px 0 5px 0;
  }
  .icon {
    font-size: 16px;
  }
}

.js-filter {
  ul {
    margin-left: 0px;
  }
  li {
    list-style-type: none;
  }
}

div.add-dropdown {
  position: absolute;
  top: 2px;
  right: 0px;
  .dropdown-menu{
    left: -110px;
    padding-bottom: 0;
    width: 148px;
    min-width: 0;
    top: 38px;
    .box-shadow(@boxShadow);
      &.arrow:before{
        right: 4px;
      }
      a {
        background-color: #202326;
        color: rgba(255, 255, 255, 0.8);
        &:hover{
          background-color: @navBG;
          color: white;
        }
      }
    li a {
      padding: 10px 15px 10px 12px;
    }
  }
  .dropdown-toggle{
    border-top: none !important;
    text-decoration: none;
  }
  > a {
    border-bottom: none;
    text-decoration: none;
    font-size: 16px;
  }
}

//----templates//

/*
---------------------------------------------------
  REUSEABLE SHADOW BORDER
---------------------------------------------------
*/

.left-shadow-border{
  border-left: 1px solid #999;
  .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
}

.bottom-shadow-border{
  border-bottom: 1px solid #999;
  .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
}

#right-content,
#dashboard-lower-content{
  .view {
    //background-color:#A8A1A1;
  }
}

#dashboard-content{
  padding-left: 15px;
  padding-top: 20px;

  &.row-fluid,
  &.window-resizeable{
    /*remove gutter without rewriting variable*/
    margin-left: 0px;
  }
  .one-pane &{
    //margin-top:60px;
    padding-bottom:25px;
  }
  .with-sidebar &{
    .left-shadow-border;
    border-right: 1px solid #999;
    width: auto;
    padding: 0px;
    bottom: 0px;
    top: 60px;
    position: fixed;
    overflow-x: hidden;
    overflow-y: auto;
    left: @sidebarWidth+@navWidth;
    right: 0;
    .box-sizing(border-box);
    .closeMenu & {
      left: @sidebarWidth+@collapsedNavWidth;
    }
  }
  > div.inner {
    display: block;
  }
}

#global-notifications{
  .with-sidebar & {
    left: @sidebarWidth+@navWidth;
    .closeMenu & {
      left: @sidebarWidth+@collapsedNavWidth;
    }
  }
}

#right-content{
  .two-pane &{
    .view {
      padding: 0 20px 40px;
    }
    border-left: 1px solid #999;
    .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
  }
}

//---header--//
.left-shadow-border{
  border-left: 1px solid #999;
  .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
}

.bottom-shadow-border{
  border-bottom: 1px solid #999;
  .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
}

.fixed-header{
  height: 60px;
  background-color: @breadcrumbBG;
  position: fixed;
  top: 0;
  right: 0;
  left: @navWidth;
  .closeMenu & {
    left: @collapsedNavWidth;
  }
  z-index: 100;
  .two-pane & {
    border: none;
  }
  .two-pane &,
  .with-sidebar & {
    #api-navbar{
      > div {
        .bottom-shadow-border;
        height: 60px;
      }
      .left-shadow-border;
    }
    #breadcrumbs{
      .bottom-shadow-border;
    }
  }
  .one-pane & {
    .bottom-shadow-border;
    left: auto;
  }
  /* these styles are for the new header*/
  > div {
    display:inline-block;
    vertical-align: top;
  }
}

#api-navbar{
  height: 60px;
  position: absolute;
  /* these styles are for the new header*/
  .right-header{
  }
}

/* only specify the sidebar width when there’s a sidebar */
.with-sidebar #breadcrumbs {
  width: @sidebarWidth;
}

#breadcrumbs {
  height: 60px;

  /* these styles are for the new header*/
  .header-left{
    > div{
      display:inline-block;
    }
    .breadcrumb {
      li:first-child{
        border-right: 1px solid #ccc;
      }
    }
  }
  .breadcrumb {
    margin-bottom: 0;
    background-color: transparent;
    padding: 0;
    li {
      padding: 20px 10px;
      height: 60px;
      &:first-child {
        font-size: 24px;
        .with-sidebar &,
        .two-pane & {
          padding:20px 10px;
          font-size: 19px;
          float: left;
        }
      }
      color: @breadcrumbText;
      font-size: 24px;
      text-shadow: none;
      &.active{
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 259px;
        white-space: nowrap;
      }
      &.divider {
        font-size: 14px;
        color: #ccc;
        padding: 20px 0px;
        width: 10px;
      }
      a{
        text-decoration: none;
        color: @breadcrumbText;
      }
    }
  }
}

.header-left{
  position: relative;
  #header-dropdown-menu {
    position: absolute;
    right: 5px;
    top: 0;
    .dropdown-toggle {
      color: #666666;
    }
    a {
      padding: 10px;
      text-decoration: none;
    }
    .dropdown {
      border-left: 1px solid #ccc;
      padding: 20px 0px;
    }
    .dropdown-menu {
      left: -115px;
      top: 48px;
    }
  }
}

.tray {
  display: none;
  .border-radius(5px);
  position: absolute;
  right: 5px;
  top: 55px;
  z-index: 11;
  background-color: #333;
  color: #fff;
  margin: 0;
   .add-on {
    font-size: 16px;
    background: none;
    padding: 0px;
    margin: 10px 0;
    border: none;
    display: block;
    text-align: left;
    color: #fff;
    text-shadow: none;
    height: auto;
    line-height: 1em;
  }
}
.tray:before {
  content: '';
  position: absolute;
  top: -25px;
  border-color: transparent transparent #333 transparent;
  border-style: solid;
  border-width: 15px;
  width: 0;
  height: 0;
}

.fixed-header,
.header-right {
  > .btn {
    padding: 0;
    margin: 0;
  }
  > .button,
  > .button a,
  .api-url-btn > button,
  .btn-primary {
    color: #666;
    font-size: 13px;
    line-height: 3em;
  }
}

.header-right {
  .well {
    padding: 0;
    margin: 0;
  }
  .searchbox-container {
    position: relative;
    right: inherit;
    input[type="text"] {
      .border-radius(5px);
      font-size: 13px;
      padding: 8px 35px 8px 10px;
      width: 275px;
    }
    .btn-primary {
      background: none repeat scroll 0% 0% transparent;
      border: none;
      position: absolute;
      right: 12px;
      top: 0px;
      height:60px;
      z-index: 2;
      color: #999;
      .icon-search{
        position: absolute;
        top: 20px;
        right: 15px;
      }
    }
  }
  > div {
    float: right;
    height: 60px;
    border-left: 1px solid #ccc;
    margin: 0;
    padding: 10px 15px;
    line-height: 40px;
  }
  > div:last-child {
    border-left: none;
  }
}
.api-navbar:before {
  right: 25px;
}

#jump-to-doc{
  .btn-primary {
    .icon-search{
      position: absolute;
      top: 20px;
      right: 15px;
    }
  }
}

//----footer--///
footer.pagination-footer {
  z-index: 1;
  min-width: 600px;
  position:fixed;
  background-color:#fff;
  bottom:0;
  height: 50px;
  border-top:1px solid #ccc;
  margin-left: -15px;
  .pagination{
    .box-shadow(none);
    position: absolute;
    right:0;
    top: 0;
    margin:0px;
    height: 50px;
    border-left: 1px solid #ccc;
    li {
      display: inline-block;
      a {
        padding: 15px 10px 15px 15px;
        border: none;
      }
    }
  }
}

footer.index-pagination {
  margin-left: -20px;
}

#item-numbers{
  p {
    margin: 20px;
    font-size: 14px;
  }
}

div#per-page {
  position: absolute;
  right: 86px;
  top: 2px;
  #select-per-page {
    margin-top: 10px;
  }
}


fix alignment #4

fix alignment #4

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/VoiSmart/Rocket.Chat.git/'


Delete animated.less

Delete animated.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/JimiPedros/JimiPedros.github.io.git/'


on mobile general section titles are aligned left

@import "variables.less";

.view-details-associations .section,  .view-details-informations, #document-informations, .name-icon,
.view-details-associations .associated-documents {
  .flex();
  flex-flow: wrap row;
}

.view-details-title {
  margin-top: 60px;
  margin-bottom: 5px;

  @media @phone {
    margin-top: 55px;
    margin-bottom: 0;
  }
  @media @tablet {
    margin-top: 50px;
  }
  &.image {
    margin-bottom: 30px;
  }
  .outing-date {
    font-size: 2.2em;
    color: darkgray;
    text-align: center;
    @media @phone {
      font-size: 1.5em;
    }
  }
  >h1 {
    .flex();
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 80%;
    text-align: center;
    transition: 0.4s;
    margin-top: -5px;
    font-size: 2.5em;

    @media @phone {
      font-size: 2em;
      margin: 10px 0 5px 10px;
    }
    @media @tablet {
      font-size: 2em;
      line-height: 35px;
    }

    &.routes {
      .flex();
      align-items: center;
      justify-content: center;
      width: 99%;
      .title {
        max-width: 70%;
        margin-right: 10px;
        @media @phone {
          max-width: none;
        }
      }
      .icons-header {
        font-size: 1.5em;
        margin-right: 10px;
        @media @phone {
          margin-right: 5px;
        }
      }
    }

    .waypoint-type {
      margin-right: 10px;
      font-size: 1.3em;
      color: @C2C-orange;
    }
    .badge {
      font-size: 0.5em;
      margin-right: 10px;
      margin-left: 10px;
      padding-bottom: 6px;
      margin-top: 5px;
      cursor: pointer;

      a {
        color: white;
        cursor: pointer;
        text-decoration: none;
      }

      @media @phone {
        display: none;
      }

      .glyphicon {
        color: white;
      }
      &.route {
        background-color: @brand-info;
      }
      &.waypoint {
        background-color: @bright-green;
      }
    }
  }
  .icons-header {
    margin-right: 30px;
    .flex();
    flex-flow: wrap row;
    justify-content: center;
    font-size: 4em;
    .route-activity, .waypoint-type {
      color: @C2C-orange;
    }
    @media @big {
      font-size: 4.5em;
    }
    @media @phone {
      font-size: 2em;
      margin-right: 5px;
    }
  }
}

.view-details-not-authorised {
  height: 100px;
  padding-top: 15px;
  margin-top: 10px;
  width: 100% !important;
}

.view-details-section {
  display: inline-block;
  margin-left: 3%;
  width: 91%;
  padding-bottom: 200px;
  font-size: .9em;

  @media @phone {
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  @media @big {
    margin-left: 4%;
    width: 89%;
  }
  &.images, &.articles, &.books {
    margin-top: 0;
  }

  .view-details-photos {
    width: 90% !important;
    margin-right: 5%;
    padding: 10px 0 10px 0;
    height: 170px;
    @media @phone {
      width: 88% !important;
      margin-right: 6%;
    }
    .photos {
      img {
        height: 150px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-left: 5px;
        margin-right: 5px;
      }
      app-slide-info {
        display: none;
      }
    }
    .slick-prev, .slick-next {
      width: 40px;
      height: 100%;
      &:before {
        font-size: 30px;
        color: @C2C-orange;
      }
    }
    .slick-prev {
      left: -40px;
      @media @phone {
        left: -35px;
      }
    }
    .slick-next {
      right: -40px;
      @media @phone {
        right: -35px;
      }
    }
  }
  .view-details-description, .view-details-other,  .view-details-info, .view-details-associations, .view-details-photos,
  .view-details-comments, .view-details-not-authorised {
    padding-left: 0;
    padding-right: 0;
    background: white;
    margin-bottom: 10px;
    border-radius: 5px;
    float: right;
    border: 1px solid #eee;

    @media @phone {
      border-width: 2px;
    }

    @media @big {
      width: 71.5%;
      margin-left: 2.5%;
    }

    h2 {
      text-align: left;
    }
    .heading {
      margin-top: 0;
    }
    .lead {
      width: 100%;
      word-break: break-word;
      float: left;
      padding: 15px 20px;
      margin-bottom: 0;
      font-size: 1.2em;

      @media (max-width: @screen-xs-max) {
        padding: 10px;
      }
    }
    .conditions-levels {
      font-size: .9em;
      @media @phone {
        display: none;
      }
      .condition {
        overflow: hidden;
        background-color: #f8f8f8;
        margin-bottom: 30px;
        border-radius: 5px;
        border: 1px solid #acacac;

        .key {
          background-color: #7a979b;
          color: white !important;
          padding: 3px 10px;
        }
        .val {
          padding-left: 10px;
        }
        .snow:first-of-type {
          width: 50%;
          float: left;
        }
      }
      th, .key {
        line-height: 16px;
        color: #8D8D8D;
        font-variant: small-caps;
      }
    }
  }

  .view-details-associations {
    background: white;
    width: 100%;
    border: 1px solid #eee;

    @media @big {
      section article {
        min-width:  48%;
        margin-left: 0.5%;
        margin-right: 0.5%;
        flex-grow: 1;
      }
    }
    .add-outing {
      float: right;
      background: #CACACA;
      margin-bottom: 10px;
      padding: .5%;
      color: white;
      border-radius: 5px;
      font-variant: small-caps;
    }
    .show-more {
      float: right;
      margin-bottom: 5px;
    }

    .outings {
      .heading {
        background-color: gray;
      }
    }

    .heading {
      margin-top: 1%;
      border-color: #eee;
      font-size: 1.1em;
    }

    .associated-documents {
      max-height: 600px;
      overflow-y: auto;
      margin-bottom: 5px;
      padding-left: 10px;

      .list-item {
        margin-right: .5%;
        margin-left: .5%;
      }
    }
  }

  .view-details-informations {
    background-color: white;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0;
    margin-bottom: 20px;

    @media (max-width: 1400px) {
      width: 100%;
    }
    @media @big {
      width: 26%;
    }
    .value, .value-title {
      font-size: 1em;
    }
    .rating-block {
      float: left;
      margin-right: 6px;
      .flex();
      label {
        margin: 0;
        color: @bright-green;
      }
    }
    .route-activity {
      font-size: 2.5em;
      color: @bright-green;
    }

    #document-informations {
      overflow: hidden;
      width: 100%;
      @media @phone {
        display: block;
        border: 2px solid @C2C-orange;
      }
    }
    >.heading {
      margin-top:0;

      .glyphicon {
        font-size: .8em;
      }
    }
    .glyphicon-sort-by-attributes{
      transform: rotateZ(180deg);
    }
    .glyphicon {
      font-size: 2.5em;
      @media @phone {
        font-size: 1em;
      }
    }
    .glyphicon-duplicate {
      color: @bright-green;
      @media @desktop {
        margin-left: 10px;
      }
      @media @phone {
        font-size: 2em;
      }
      /*red strike through*/
      &:after {
        content: "";
        border-top: 3px solid #ea3636;
        position: absolute;
        left: -25%;
        top: 50%;
        width: 150%;
      }
    }
    a.creative-commons {
      font-size: 1em;
      &:hover, &:focus {
        text-decoration: none;
      }
    }

    .icon-glacier {
      font-size: 3.3em;
      color: @C2C-orange;
    }

    .detail-text {
      width: 80%;
      margin: auto;
      text-align: left;
      line-height: 17px;
      font-size: 1.1em;

      @media @phone {
        width: 200%;
        font-size: 1em;
      }
      @media @tablet {
        font-size: 1em;
      }
      ul {
        padding-left: 15px;
        width: 90%;
        li {
          margin-bottom: 5px;
        }
      }
      >p, >article {
        margin-top: 3px;
        margin-bottom: 3px;
      }
      &.ratings .value {
        cursor: pointer;
        transition: .2s;
        &:hover {
          color: gold;
          transition: .2s;
        }
      }
    }

    .name-icon-value {
      .flex();
      padding: 0;
      flex-grow: 1;
      min-height: 80px;
      background-color: white;
      border-bottom: 1px solid #dfd6c5;
      transition: 0.3s;

      @media @big {
        min-width: 100%;
        min-height: 0;
        height: auto;
      }

      @media (max-width : @screen-sm-max) {
        min-width:  50%;
        padding: 0;
      }
      @media @phone {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        cursor: pointer;
        &:not(:first-of-type) {
          border-top: 1px solid #dfd6c5;
        }
      }
      .activities {
        font-size: 1.1em;
      }
      .icon-user {
        color: @C2C-orange;
      }

      &.location {
        display: none;
        @media @phone {
          .flex();
        }
        .areas {
          @media (min-width: @phone-max) {
            display: none;
          }
        }
      }
      &.maps {
        order: 10;
      }
    }

    #orientation-svg {
      height: 110px;
      width: auto;
      margin-left: 10%;
    }

    .accordion {
      padding: 5px;
      @media (min-width: @phone-max) {
        display: block !important;
      }
      @media @phone {
        padding-top: 1%;
      }
      @media @tablet {
        font-size: 14px;
      }
      ul {
        margin: 0;
      }
    }
    h4 {
      display: none;
      width: 100%;
      text-align: center;

      span {
        margin-right: 5px;
        transition: 0.3s;
      }
      @media @phone {
        display: block;
        font-size: 1em;
        margin-left: 10px;
        text-align: left;
      }
    }

    .name-icon {
      width: 67px;
      text-align: center;
      transition: 0.3s;
      justify-content: center;
      align-items: center;
      align-content: center;
      margin: 5px 3px 5px 10px;

      @media @phone {
        display: none;
      }
      .icon-user {
        font-size: 3em;
      }
      p {
        font-weight: bold;
        font-variant: small-caps;
      }
    }
    .coordinates-table {
      width: 180px;
      td {
        text-align: center;
        vertical-align: middle;
        padding: 1%;
      }
    }
  }
  .view-details-comments {
    @media @big {
      width: 100%;
    }

    #discourse-comments {
      text-align: center;
      padding: 20px;

      .no-thread {
        display: inline-block;
        background: #CACACA;
        padding: .5%;
        color: white;
        border-radius: 5px;
        font-variant: small-caps;
      }
    }
  }
  .area-associations {
    padding: 10px 10px 20px 10px;
    [class^="icon-"] {
      font-size: 2em;
      color: @C2C-orange
    }
  }
} /*.view-details-section*/

.view-details-map {
  height: 230px!important;
  margin-bottom: 15px;
  display: block;
  background-color: rgba(164, 164, 166, 0.24);

  @media @tablet {
    height: 200px !important;
  }
  @media @phone {
    height: 150px !important;
    margin-bottom: 0;
  }
  .map {
    height: 100%;
  }
}

.view-details-other {
  width: 100% !important;
  margin: 0 0 40px 0 !important;
}

.document-summary{
  color: #626262;
  border: 1px solid #D8D8D8;
  border-left: 0.5em solid @bright-green;
  padding: 5px 15px 5px 15px;
  background-color: rgba(168, 168, 168, 0.07);
  margin: 10px 0 10px 0;
  .shadow(0, 0, 2px, rgba(0,0,0,0.2));
  font-style: italic;

  label {
    font-style: normal;
  }
}

app-add-association {

  app-simple-search {
    margin-bottom: 20px;
    width: 346px;

    @media @phone {
      width: 100%;
    }
    @media @tablet {
      width: 100%;
    }
    .search {
      width: 100%;

    }
    .glyphicon-search {
      margin-top: 4px;
      font-size: 1.5em;
    }
    .tt-suggestion {
      border-radius: 0;
      padding: 5px !important;
    }
    p {
      margin: 0 !important;
    }
  }

}

.view-details-description, .view-details-other,  .view-details-info, .view-details-associations, .view-details-photos, .view-details-informations {
  will-change: height;
  ul li {
    list-style: none;
    &:before {
      /*Using a Bootstrap glyphicon as the bullet point*/
      content: "\e080";
      font-family: 'Glyphicons Halflings';
      font-size: 12px;
      float: left;
      margin-left: -17px;
      color: @brand-success;
    }
  }
  ul.types li {
    width: 50%;
    float: left;
  }
}

.scroll-top-btn {
  margin: 0 calc(~"50% - 40px") 100px calc(~"50% - 40px");
}
.view-details-wrapper {
  width:  100%;
  display: inline-block;
}

.location-static {
  min-height: 80px;
  max-width: 250px;
  padding: 10px;
  position: relative;
  float: right;
  z-index: 3;
  margin-bottom: -18%;
  top: 45px;
  background: #FFFB80; /*yellow*/
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  .shadow(2px, 2px, 10px, rgba(33,33,33,0.4) );

  @media @tablet {
    right: 30px;
    font-size: 1em;
    max-width: 200px;
  }
  @media @phone {
    display: none !important;
  }
  @media @big {
    font-size: 1.1em;
    right: 50px;
  }
  @media @desktop {
    right: 50px;
  }

  p {
    margin-top: 2px;
    margin-bottom: 0;
  }
  ul {
    list-style: none;
    padding: 0;
    text-align: center;
    li:hover {
      cursor: pointer;
    }
    a {
      color: #A55944;
    }
  }
}
.view-details-description {
  img.image {
    max-width: 100%;
  }
  @media @phone {
    min-height:  50px;
    margin-bottom: -200px;
  }
  h2 {
    margin-top: 10px;
  }

  [class^='embedded_'] {
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 15px;
    background-color: rgba(234, 234, 234, 0.37);
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    cursor: pointer;

    @media @phone {
      margin: 5px auto !important;
      max-width: 285px;
      float: none !important;

      figcaption {
        text-align: center;
        margin-left: 0;
        margin-top: 5px;
      }
      img {
        margin: auto !important;
      }
    }
    /*Big Image*/
    &.BI  {
      display: table-cell;
      max-width: none;
      margin-left: 10px;

      figcaption, img {
        max-width: 100% !important;
      }
    }
    app-slide-info {
      display: none;
    }
    figcaption {
      max-width: 240px;
      margin: 5px 10px -5px 10px;
      color: dimgray;
      font-size: 14px;
    }
    img {
      margin: auto auto 0 auto;
    }
  }

  .embedded_center {
    margin: 10px auto;
    display: table;
  }
  .embedded_left {
    float: left;
    clear: left;
    margin: 5px 25px 10px 0;
  }
  .embedded_right {
    float: right;
    clear: right;
    margin: 5px 0 10px 20px;
  }
  .embedded_inline {
    display: table;
    margin: 5px 20px 10px 10px;
  }

  .important_message, .warning_message {
    clear: both;
    display: inline-block;
    border-radius: 8px;
    margin: 0 0 5px 0;
    min-height: 25px;
    text-align: justify;
    vertical-align: middle;
    border-collapse: collapse;
    padding: 10px;

    span.glyphicon {
      margin-right: 10px;
    }
  }
  .important_message {
    border: 2px solid #f93;
  }
  .warning_message {
    background-color: #fcc9c8;

    span.glyphicon {
      color: white;
    }
  }
}
.show-phone.elevation {
  display: none;
  @media @phone {
    display: block;
  }
}

@import "variables.less";

.view-details-associations .section,  .view-details-informations, #document-informations, .name-icon,
.view-details-associations .associated-documents {
  .flex();
  flex-flow: wrap row;
}

.view-details-title {
  margin-top: 60px;
  margin-bottom: 5px;

  @media @phone {
    margin-top: 55px;
    margin-bottom: 0;
  }
  @media @tablet {
    margin-top: 50px;
  }
  &.image {
    margin-bottom: 30px;
  }
  .outing-date {
    font-size: 2.2em;
    color: darkgray;
    text-align: center;
    @media @phone {
      font-size: 1.5em;
    }
  }
  >h1 {
    .flex();
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 80%;
    text-align: center;
    transition: 0.4s;
    margin-top: -5px;
    font-size: 2.5em;

    @media @phone {
      font-size: 2em;
      margin: 10px 0 5px 10px;
    }
    @media @tablet {
      font-size: 2em;
      line-height: 35px;
    }

    &.routes {
      .flex();
      align-items: center;
      justify-content: center;
      width: 99%;
      .title {
        max-width: 70%;
        margin-right: 10px;
        @media @phone {
          max-width: none;
        }
      }
      .icons-header {
        font-size: 1.5em;
        margin-right: 10px;
        @media @phone {
          margin-right: 5px;
        }
      }
    }

    .waypoint-type {
      margin-right: 10px;
      font-size: 1.3em;
      color: @C2C-orange;
    }
    .badge {
      font-size: 0.5em;
      margin-right: 10px;
      margin-left: 10px;
      padding-bottom: 6px;
      margin-top: 5px;
      cursor: pointer;

      a {
        color: white;
        cursor: pointer;
        text-decoration: none;
      }

      @media @phone {
        display: none;
      }

      .glyphicon {
        color: white;
      }
      &.route {
        background-color: @brand-info;
      }
      &.waypoint {
        background-color: @bright-green;
      }
    }
  }
  .icons-header {
    margin-right: 30px;
    .flex();
    flex-flow: wrap row;
    justify-content: center;
    font-size: 4em;
    .route-activity, .waypoint-type {
      color: @C2C-orange;
    }
    @media @big {
      font-size: 4.5em;
    }
    @media @phone {
      font-size: 2em;
      margin-right: 5px;
    }
  }
}

.view-details-not-authorised {
  height: 100px;
  padding-top: 15px;
  margin-top: 10px;
  width: 100% !important;
}

.view-details-section {
  display: inline-block;
  margin-left: 3%;
  width: 91%;
  padding-bottom: 200px;
  font-size: .9em;

  @media @phone {
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  @media @big {
    margin-left: 4%;
    width: 89%;
  }
  &.images, &.articles, &.books {
    margin-top: 0;
  }

  .view-details-photos {
    width: 90% !important;
    margin-right: 5%;
    padding: 10px 0 10px 0;
    height: 170px;
    @media @phone {
      width: 88% !important;
      margin-right: 6%;
    }
    .photos {
      img {
        height: 150px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-left: 5px;
        margin-right: 5px;
      }
      app-slide-info {
        display: none;
      }
    }
    .slick-prev, .slick-next {
      width: 40px;
      height: 100%;
      &:before {
        font-size: 30px;
        color: @C2C-orange;
      }
    }
    .slick-prev {
      left: -40px;
      @media @phone {
        left: -35px;
      }
    }
    .slick-next {
      right: -40px;
      @media @phone {
        right: -35px;
      }
    }
  }
  .view-details-description, .view-details-other,  .view-details-info, .view-details-associations, .view-details-photos,
  .view-details-comments, .view-details-not-authorised {
    padding-left: 0;
    padding-right: 0;
    background: white;
    margin-bottom: 10px;
    border-radius: 5px;
    float: right;
    border: 1px solid #eee;

    @media @phone {
      border-width: 2px;
    }

    @media @big {
      width: 71.5%;
      margin-left: 2.5%;
    }

    h2 {
      text-align: left;
    }
    .heading {
      margin-top: 0;
    }
    .lead {
      width: 100%;
      word-break: break-word;
      float: left;
      padding: 15px 20px;
      margin-bottom: 0;
      font-size: 1.2em;

      @media (max-width: @screen-xs-max) {
        padding: 10px;
      }
    }
    .conditions-levels {
      font-size: .9em;
      @media @phone {
        display: none;
      }
      .condition {
        overflow: hidden;
        background-color: #f8f8f8;
        margin-bottom: 30px;
        border-radius: 5px;
        border: 1px solid #acacac;

        .key {
          background-color: #7a979b;
          color: white !important;
          padding: 3px 10px;
        }
        .val {
          padding-left: 10px;
        }
        .snow:first-of-type {
          width: 50%;
          float: left;
        }
      }
      th, .key {
        line-height: 16px;
        color: #8D8D8D;
        font-variant: small-caps;
      }
    }
  }

  .view-details-associations {
    background: white;
    width: 100%;
    border: 1px solid #eee;

    @media @big {
      section article {
        min-width:  48%;
        margin-left: 0.5%;
        margin-right: 0.5%;
        flex-grow: 1;
      }
    }
    .add-outing {
      float: right;
      background: #CACACA;
      margin-bottom: 10px;
      padding: .5%;
      color: white;
      border-radius: 5px;
      font-variant: small-caps;
    }
    .show-more {
      float: right;
      margin-bottom: 5px;
    }

    .outings {
      .heading {
        background-color: gray;
      }
    }

    .heading {
      margin-top: 1%;
      border-color: #eee;
      font-size: 1.1em;
    }

    .associated-documents {
      max-height: 600px;
      overflow-y: auto;
      margin-bottom: 5px;
      padding-left: 10px;

      .list-item {
        margin-right: .5%;
        margin-left: .5%;
      }
    }
  }

  .view-details-informations {
    background-color: white;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0;
    margin-bottom: 20px;

    @media (max-width: 1400px) {
      width: 100%;
    }
    @media @big {
      width: 26%;
    }
    .value, .value-title {
      font-size: 1em;
    }
    .rating-block {
      float: left;
      margin-right: 6px;
      .flex();
      label {
        margin: 0;
        color: @bright-green;
      }
    }
    .route-activity {
      font-size: 2.5em;
      color: @bright-green;
    }

    #document-informations {
      overflow: hidden;
      width: 100%;
      @media @phone {
        display: block;
        border: 2px solid @C2C-orange;
      }
    }
    >.heading {
      margin-top:0;

      .glyphicon {
        font-size: .8em;
      }
    }
    .glyphicon-sort-by-attributes{
      transform: rotateZ(180deg);
    }
    .glyphicon {
      font-size: 2.5em;
      @media @phone {
        font-size: 1em;
      }
    }
    .glyphicon-duplicate {
      color: @bright-green;
      @media @desktop {
        margin-left: 10px;
      }
      @media @phone {
        font-size: 2em;
      }
      /*red strike through*/
      &:after {
        content: "";
        border-top: 3px solid #ea3636;
        position: absolute;
        left: -25%;
        top: 50%;
        width: 150%;
      }
    }
    a.creative-commons {
      font-size: 1em;
      &:hover, &:focus {
        text-decoration: none;
      }
    }

    .icon-glacier {
      font-size: 3.3em;
      color: @C2C-orange;
    }

    .detail-text {
      width: 80%;
      margin: auto;
      text-align: left;
      line-height: 17px;
      font-size: 1.1em;

      @media @phone {
        width: 200%;
        font-size: 1em;
      }
      @media @tablet {
        font-size: 1em;
      }
      ul {
        padding-left: 15px;
        width: 90%;
        li {
          margin-bottom: 5px;
        }
      }
      >p, >article {
        margin-top: 3px;
        margin-bottom: 3px;
      }
      &.ratings .value {
        cursor: pointer;
        transition: .2s;
        &:hover {
          color: gold;
          transition: .2s;
        }
      }
    }

    .name-icon-value {
      .flex();
      padding: 0;
      flex-grow: 1;
      min-height: 80px;
      background-color: white;
      border-bottom: 1px solid #dfd6c5;
      transition: 0.3s;

      @media @big {
        min-width: 100%;
        min-height: 0;
        height: auto;
      }

      @media (max-width : @screen-sm-max) {
        min-width:  50%;
        padding: 0;
      }
      @media @phone {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        cursor: pointer;
        &:not(:first-of-type) {
          border-top: 1px solid #dfd6c5;
        }
      }
      .activities {
        font-size: 1.1em;
      }
      .icon-user {
        color: @C2C-orange;
      }

      &.location {
        display: none;
        @media @phone {
          .flex();
        }
        .areas {
          @media (min-width: @phone-max) {
            display: none;
          }
        }
      }
      &.maps {
        order: 10;
      }
    }

    #orientation-svg {
      height: 110px;
      width: auto;
      margin-left: 10%;
    }

    .accordion {
      padding: 5px;
      @media (min-width: @phone-max) {
        display: block !important;
      }
      @media @phone {
        padding-top: 1%;
      }
      @media @tablet {
        font-size: 14px;
      }
      ul {
        margin: 0;
      }
    }
    h4 {
      display: none;
      width: 100%;
      text-align: center;

      span {
        margin-right: 5px;
        transition: 0.3s;
      }
      @media @phone {
        display: block;
        font-size: 1em;
        margin-left: 10px;
      }
    }

    .name-icon {
      width: 67px;
      text-align: center;
      transition: 0.3s;
      justify-content: center;
      align-items: center;
      align-content: center;
      margin: 5px 3px 5px 10px;

      @media @phone {
        display: none;
      }
      .icon-user {
        font-size: 3em;
      }
      p {
        font-weight: bold;
        font-variant: small-caps;
      }
    }
    .coordinates-table {
      width: 180px;
      td {
        text-align: center;
        vertical-align: middle;
        padding: 1%;
      }
    }
  }
  .view-details-comments {
    @media @big {
      width: 100%;
    }

    #discourse-comments {
      text-align: center;
      padding: 20px;

      .no-thread {
        display: inline-block;
        background: #CACACA;
        padding: .5%;
        color: white;
        border-radius: 5px;
        font-variant: small-caps;
      }
    }
  }
  .area-associations {
    padding: 10px 10px 20px 10px;
    [class^="icon-"] {
      font-size: 2em;
      color: @C2C-orange
    }
  }
} /*.view-details-section*/

.view-details-map {
  height: 230px!important;
  margin-bottom: 15px;
  display: block;
  background-color: rgba(164, 164, 166, 0.24);

  @media @tablet {
    height: 200px !important;
  }
  @media @phone {
    height: 150px !important;
    margin-bottom: 0;
  }
  .map {
    height: 100%;
  }
}

.view-details-other {
  width: 100% !important;
  margin: 0 0 40px 0 !important;
}

.document-summary{
  color: #626262;
  border: 1px solid #D8D8D8;
  border-left: 0.5em solid @bright-green;
  padding: 5px 15px 5px 15px;
  background-color: rgba(168, 168, 168, 0.07);
  margin: 10px 0 10px 0;
  .shadow(0, 0, 2px, rgba(0,0,0,0.2));
  font-style: italic;

  label {
    font-style: normal;
  }
}

app-add-association {

  app-simple-search {
    margin-bottom: 20px;
    width: 346px;

    @media @phone {
      width: 100%;
    }
    @media @tablet {
      width: 100%;
    }
    .search {
      width: 100%;

    }
    .glyphicon-search {
      margin-top: 4px;
      font-size: 1.5em;
    }
    .tt-suggestion {
      border-radius: 0;
      padding: 5px !important;
    }
    p {
      margin: 0 !important;
    }
  }

}

.view-details-description, .view-details-other,  .view-details-info, .view-details-associations, .view-details-photos, .view-details-informations {
  will-change: height;
  ul li {
    list-style: none;
    &:before {
      /*Using a Bootstrap glyphicon as the bullet point*/
      content: "\e080";
      font-family: 'Glyphicons Halflings';
      font-size: 12px;
      float: left;
      margin-left: -17px;
      color: @brand-success;
    }
  }
  ul.types li {
    width: 50%;
    float: left;
  }
}

.scroll-top-btn {
  margin: 0 calc(~"50% - 40px") 100px calc(~"50% - 40px");
}
.view-details-wrapper {
  width:  100%;
  display: inline-block;
}

.location-static {
  min-height: 80px;
  max-width: 250px;
  padding: 10px;
  position: relative;
  float: right;
  z-index: 3;
  margin-bottom: -18%;
  top: 45px;
  background: #FFFB80; /*yellow*/
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  .shadow(2px, 2px, 10px, rgba(33,33,33,0.4) );

  @media @tablet {
    right: 30px;
    font-size: 1em;
    max-width: 200px;
  }
  @media @phone {
    display: none !important;
  }
  @media @big {
    font-size: 1.1em;
    right: 50px;
  }
  @media @desktop {
    right: 50px;
  }

  p {
    margin-top: 2px;
    margin-bottom: 0;
  }
  ul {
    list-style: none;
    padding: 0;
    text-align: center;
    li:hover {
      cursor: pointer;
    }
    a {
      color: #A55944;
    }
  }
}
.view-details-description {
  img.image {
    max-width: 100%;
  }
  @media @phone {
    min-height:  50px;
    margin-bottom: -200px;
  }
  h2 {
    margin-top: 10px;
  }

  [class^='embedded_'] {
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 15px;
    background-color: rgba(234, 234, 234, 0.37);
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    cursor: pointer;

    @media @phone {
      margin: 5px auto !important;
      max-width: 285px;
      float: none !important;

      figcaption {
        text-align: center;
        margin-left: 0;
        margin-top: 5px;
      }
      img {
        margin: auto !important;
      }
    }
    /*Big Image*/
    &.BI  {
      display: table-cell;
      max-width: none;
      margin-left: 10px;

      figcaption, img {
        max-width: 100% !important;
      }
    }
    app-slide-info {
      display: none;
    }
    figcaption {
      max-width: 240px;
      margin: 5px 10px -5px 10px;
      color: dimgray;
      font-size: 14px;
    }
    img {
      margin: auto auto 0 auto;
    }
  }

  .embedded_center {
    margin: 10px auto;
    display: table;
  }
  .embedded_left {
    float: left;
    clear: left;
    margin: 5px 25px 10px 0;
  }
  .embedded_right {
    float: right;
    clear: right;
    margin: 5px 0 10px 20px;
  }
  .embedded_inline {
    display: table;
    margin: 5px 20px 10px 10px;
  }

  .important_message, .warning_message {
    clear: both;
    display: inline-block;
    border-radius: 8px;
    margin: 0 0 5px 0;
    min-height: 25px;
    text-align: justify;
    vertical-align: middle;
    border-collapse: collapse;
    padding: 10px;

    span.glyphicon {
      margin-right: 10px;
    }
  }
  .important_message {
    border: 2px solid #f93;
  }
  .warning_message {
    background-color: #fcc9c8;

    span.glyphicon {
      color: white;
    }
  }
}
.show-phone.elevation {
  display: none;
  @media @phone {
    display: block;
  }
}