// GN Styles
@import "../lib/style/font-awesome/less/font-awesome.less";
@import "gn_bootstrap.less";

@import (less) "../lib/ol.css";
@import (less) "../lib/angular.ext/hotkeys/hotkeys.min.css";
@import "../lib/bootstrap.ext/tagsinput/bootstrap-tagsinput.less";
// import the css files as less files so they are included in the final output of wro4j
@import "../lib/bootstrap.ext/datepicker/datepicker.less";
@import (less) "../lib/style/datetimepicker.css";
@import "gn_doc.less";
@import "gn_icons.less";

@import "ellipsis.less";

@fa-version: '4.3.0';
@fa-font-path: '../catalog/lib/style/font-awesome/fonts';


div[gn-transfer-ownership] * .list-group {
  max-height: 45em;
  overflow-y: auto;
}

.gn-pager {
  .pagination {
    margin: 0;
  }
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}
// help button
[data-gn-need-help] {
  margin-top: 10px;
}
.panel-heading {
  [data-gn-need-help] {
    margin-top: 0;
  }
}


/* An update to 3.2 could provide responsive class
  for block or inline layout.
  http://getbootstrap.com/css/#responsive-utilities

  Display button label in top tool bar using inline mode.
 */
.gn-top-bar {
    border-radius: 0px;
    padding: 0 20px;
    .navbar-collapse {
 //       padding-right: 5px;
    }
  .visible-lg {
    display: none !important;
  }
  @media (min-width: 1200px) {
    .visible-lg {
      display: inline !important;
    }
  }
  @media (max-width: 767px) {
    .hidden-xs {
      display: none !important;
    }
  }
  .gn-account {
    a {
    }
  }
}

.gn-sub-bar {
  background-color: #fff;
  padding: 10px 0;
  margin-bottom: 10px;
  border: 1px solid #e7e7e7;
  border-top: 0;
  z-index: 5;
}
[ng-app="gn_editor"] {
  .gn-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 52px;
  }
  .gn-sub-bar {
    position: fixed;
    top: 52px;
    left: 20px;
    right: 20px;
  }
  .gn-editor-board {
    padding-top: 120px;
  }
  .gn-editor-container, .gn-batch-editor, #gn-directory-container,
  #gn-new-metadata-container, #gn-import-container {
    padding-top: 70px;
  }
}

a {
  word-wrap: break-word;
}
.gn-break {
  word-wrap: break-word;
  word-break: break-word;
}


/**
 * Nav bar title may be longer than default
 */
.navbar-brand {
  max-width: 280px;
}

[ng\:cloak],
[ng-cloak],
.ng-cloak{
  display:none !important;
}

[gn-img-modal], [data-gn-img-modal] {
  cursor: pointer;

}
.gn-img-modal {
  width: 95vw;

  img {
    width: 100%
  }
  .gn-img-background {
    background-image: linear-gradient(to bottom,transparent,rgba(0,0,0,0.74));
    bottom: 0;
    height: 60px;
    position: absolute;
    width: 100%;
  }
  .gn-img-thumbnail-caption {
    line-height: 24px;
    max-height: 48px;
    overflow: hidden;
    margin-bottom: 4px;
    width: 100%;
    font-size: 150%;
  }
}
.gn-btn-modal-img {
  position: absolute;
  top: -1.2em;
  right: -1.2em;
}

/**
 * Required when displaying long text like
 * exception report. Eg. catalog health check.
 */
.list-group-item-text{
  word-break:break-word;
}


.gn-sidebar .nav .nav > li > a{
  padding-top:3px;
  padding-bottom:3px;
  padding-left:30px;
  font-size:90%;
}

.gn-info{
  position:fixed;
  z-index:9999;
  top:5px;
  left:5px;
}

/**
 * Logo in nav bar can't be big
 */
.gn-logo {
  max-height: 28px;
  margin: -8px 0px;
}

.gn-logo-lg {
  width: 160px !important;
}

/**
 * Properly break stack trace error.
 */
.gn-stack,
.gn-code{
  white-space:normal;
}

div.gn-scroll-spy {
  position: fixed;
  bottom: 0%;
  right: 0px;
  opacity: 0.8;
  font-size: 80%;
  width: 150px;
  z-index: 999;
  max-height: 99vh;
  overflow: auto;
  background-color: @panel-bg;
  border-top-left-radius: @panel-border-radius;
  border-top: 1px solid @panel-default-border;
  border-left: 1px solid @panel-default-border;

  button {
    .pull-right();
  }
  ul {
    opacity: 1;
    li {
      a {
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 1px;
      padding-bottom: 1px;
      }
      ul {
        li {
          a {
            padding-top: 1px;
            padding-bottom: 1px;
            padding-left: 15px;
            font-size: 90%;
          }
        }
        li.active > a {
            font-weight: bold;
        }
      }
    }
    li.active > a {
      font-weight: bold;
      color: @brand-primary;
      background-color: @navbar-default-brand-hover-bg;
    }
  }
}

.dropdown-menu {
  li {
    cursor: pointer !important;
  }
  li.disabled {
    cursor: not-allowed !important;
  }
  li.disabled {
    a {
      pointer-events: none;
    }
  }
}

.gn-popup {
  display: none;
  overflow: hidden;
  min-width: 200px;
  max-width: 600px;
  min-height: 100px;
  max-height: ~"calc(100% - 89px)";
  z-index: 2000;

  .gn-share-grid {
    width: 100%;
    height: 75%;
    overflow-x: hidden;
    overflow-y: auto;

    table {
      /* The col section define column width */
      table-layout: fixed;

      th, td {
        font-size: 70%;
      }
      /* Group name often contains long upper case value */
      td {
        word-break: break-all;
      }
    }
  }
}

.onlinesrc-popup, .gn-modal-lg {
  max-width: none;
  max-height: none;
  display: none;
  .modal-content {
    width: 90vw;
    max-height: 90vh;
    .modal-body {
      max-height: 76vh;
      overflow: auto;
      min-height: 500px;
      .gn-modal-content {
        // height of modal body - 2 * padding - height of button(s)
        max-height: calc(~"76vh - 30px - 30px");
        overflow: auto;
      }
    }
  }
  .modal-dialog {
    margin: 10px 5vw;

    .list-group-item {
      word-wrap: break-word;
    }
  }
}
.gn-save-invalid-modal {
  max-width: none;
  max-height: none;
}
img.thumb-small {
  max-width: 100%;
  max-height: 80px;
  min-height: 40px;
}
.gn-list-thumb {
  position: relative;
  margin: 2px;
  width: 32%;
  height: 92px;
  a.onlinesrc-remove {
    position: absolute;
    z-index: 99;
    top: 0px;
    right: 0px;
  }
  a.onlinesrc-edit {
    position: absolute;
    z-index: 99;
    top: 0px;
    right: 20px;
  }
  a {
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  }
}
.gn-layers-grid-container {
  overflow:auto;
  max-height:200px;
  font-size: small;

  tr.success {
    td {
      font-weight: bold;
    }
  }
}
.gn-layers-grid-container tr {
  cursor: pointer;
}
.gn-layers-grid-container .table > thead > tr > td.active tr.active > td {
  color: red;
  background-color: #428bca;
}

/* typeahead styles */

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}


.tt-menu {
  width: 422px;
  margin-top: 4px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
  /* Limit typeahead height to a percentage of the
     viewport height in order to not have to scroll
     too much when the autocompletion list is long.
     User should be able to see the full list on the
     screen and then use the scrollbar in the menu. */
  overflow: auto;
  max-height: 70vh;
  width: inherit;
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 1em;
  line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #428bca;

}

.tt-suggestion p {
  margin: 0;
}


.tt-hint {
  color: #999;
  width: 100% !important;
  border: none !important;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #428bca;
  cursor: pointer;
}

.bootstrap-tagsinput {
  width: 100%;
}
/* No border for typeahead in tagsinput */
.bootstrap-tagsinput .tt-input {
  width: 100% !important;
  border: none !important;
}

span.twitter-typeahead {
  display: block !important;
}

.row {
    margin: auto 0px;
}

@gn-popup-max-height: 400px;

[gn-popup] {
  display: none;
  min-width: 200px;
  max-width: 600px;
  min-height: 100px;
  max-height: ~"calc(100% - 89px)";
  z-index: 2000;

  @media (max-width: @screen-tablet) {
    z-index: 1500;
    left: 2%;
    right: 2%;
    top: 2%;
    bottom: 2%;
    max-height: none;
    max-width: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  @media (max-width: @screen-phone) {
    position: fixed !important;
    overflow: hidden;
  }
}

.gn-popup-content {
  overflow: auto;
  max-width: inherit;
  max-height: ~"calc(100% - 149px)";
  font-size: 12px;
  @media (max-width: @screen-phone) {
    width: 100%;
    height: auto;
    max-height: none;
    position: absolute;
    top: 36px;
    bottom: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    table {
      width: 100% !important;
      td {
        vertical-align: top;
      }
    }
  }
}
.fileupload-buttonbar .btn, .fileupload-buttonbar .toggle {
  margin-bottom: 5px;
}
.fileinput-button {
  position: relative;
  overflow: hidden;
}
.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  font-size: 200px;
  direction: ltr;
  cursor: pointer;
}
input[type=file] {
  display: block;
}

/* alerts */
.gn-alerts {
  position: absolute;
  top: 1em;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  text-align: center;
  z-index: 1000;
}

.gn-recordtype-n:before { content: @fa-var-file-text }
.gn-recordtype-s:before { content: @fa-var-bookmark }
.gn-recordtype-y:before { content: @fa-var-file-o }
.gn-recordtype-t:before { content: @fa-var-bookmark-o }

[data-gn-slide-toggle] {
  padding-left: 20px;
  cursor: pointer;
}
[data-gn-slide-toggle]:before {
  content: "\f0d7";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  position: absolute;
  margin-left: -14px;
  font-size: 16px;
}
[data-gn-slide-toggle].collapsed:before {
  content: "\f0da"
}
legend[data-gn-slide-toggle] {
  border: none;
  color: #333333;
}
legend[data-gn-slide-toggle]:before {
  margin-top: 3px;
}

i.fa-times.delete {
  vertical-align: top;
}
i.fa-times.delete:hover {
    color:  #a94442;
}


.gn-search-page {
  .gn-status {
    border: 2px solid darken(@brand-info, 5%);
    position: absolute;
    top: 95px;
    left: 2px;
    border-radius: 6px;
    padding: 2px;
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
    color: @brand-info;
    font-weight: bold;
    font-size: 80%;
    background-color: rgba(255, 255, 255 , 0.7);
  }
  .gn-status-mdview {
    font-size: 110%;
    position: relative;
    float: right;
    top: -52px;
    margin-right: -20px;
  }
  /* Decide here which status should be displayed
  or not and with which colors */
  .gn-status-completed {
    border-color: darken(@brand-success, 5%);
    color: @brand-success;
  }
  .gn-status-historicalArchive {
    border-color: darken(@brand-warning, 5%);
    color: @brand-warning;
  }
  .gn-status-obsolete {
    border-color: darken(@brand-danger, 5%);
    color: @brand-danger;
  }
}

// Language specific layout
html[lang=eng] {
  .gn-scale,
  [data-facet=denominators] span.gn-facet-label,
  .gn-facet-denominators span.gn-facet-label {
    &:before {
      content: "1/";
    }
  }
}
html[lang=fre] {
  .gn-scale,
  [data-facet=denominators] span.gn-facet-label,
  .gn-facet-denominators span.gn-facet-label {
    &:before {
      content: "1:";
    }
  }
}

.checkbox.disabled label, .radio.disabled label, fieldset[disabled] .checkbox label, fieldset[disabled] .radio label {
  cursor: not-allowed;
  color: #d3d3d3;
}

button, .btn, .btn:active, a {
  &:focus {
    outline: none;
  }
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 4px;
}

.gn-bbox-input {
  input {
    width: 6em;
    display: inline-block;
  }
  [class^='col-'] {
    text-align: center;
  }
  [ngeo-btn-group] {
    padding:0;
  }
  .form-group {
    margin-bottom: 10px;
  }
}

.popover {
  height: auto;
  border-radius: 2px;
  font-size: 12px;
  .popover-content {
    display: table-cell;
    vertical-align: middle;
    ul {
      margin: 0;
      list-style: none;
      padding: 0;
    }
    li {
      font-size: 12px;
      padding: 2px 5px;
      border-left: none;
      border-right: none;
      border-radius: 0;
      &:first-child { border-top: none; }
      &:last-child { border-bottom: none; }
      input[type="range"] {
        display: block;
        width: 100px;
      }
    }
  }
  &.popover-dropdown-2 .popover-content {
    height: 8em;
  }
  &.popover-dropdown-3 .popover-content {
    height: 10.5em;
  }
  &.popover-dropdown-4 .popover-content {
    height: 13em;
  }
  &.popover-dropdown-5 .popover-content {
    height: 15.5em;
  }
  .popover-content > .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 1em;
  }
  .btn-group .dropdown-menu {
    margin-top: 0;
  }
}

input.ng-invalid {
  border-color: #a94442;
}

.gn-input-clear {
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translate(0, -50%);
  cursor: pointer;
  opacity: 0.4;

  &:hover {
    opacity: 1;
  }
}

/* Highlight updated checkboxes in sharing form */
.gn-sharing-batch {
  input.ng-dirty:after {
    content: "*";
    padding-left: 12px;
  }
}

[data-rating] {
  color: #ffa500;
}

[data-gn-saved-selections-panel] {
  fieldset legend {
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 1px;
    padding-top: 10px;
  }

  ul {
    margin: 2px;
    li {
      font-size: 13px;
      border: none;
      padding: 2px 0px;
    }
  }
}

.gn-multilingual-field {
  .nav > li > a {
    padding: 2px 5px;
    font-size: 11px;
    margin-top: 2px;
  }
  .label {
    line-height: 2;
    font-size: 11px;
  }
  .no-data a {
    color: @gray-light;
  }
}


.navbar {
  margin-bottom: 14px;
  .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 50px;
    font-size: 16px;
  }

  // handle hover dropdowns for editor and admin menu (only if not on mobile)
  @media (min-width: @screen-sm-min) {
    li.dropdown-hover {
      & > .dropdown-toggle {
        position: relative;
        &:after {
          font-family: FontAwesome;
          content: "\f0d7";
          position: absolute;
          bottom: -5px;
          left: 50%;
          transform: translate(-50%, 0);
          font-size: 0.9em;
        }
      }
      &.open:not(.active) > .dropdown-toggle {
        background: none;
      }
      ul {
        display: none;
      }
      &:hover ul, & > a:focus + ul, & > a:active + ul {
        display: block;
      }
    }
  }

  .gn-user-info {
    display: inline-block;
    vertical-align: middle;
    margin: -6px 0px;
    line-height: 1em;
    .gn-user-role {
      text-transform: uppercase;
      opacity: 0.7;
      font-size: 0.8em;
    }
  }
}
.navbar-form {
  border:none;
  margin: 8px 0px;
}

// styles for login popup in the navbar
.signin-dropdown {
  .dropdown-menu {
    border-color: #e7e7e7;
    .navbar-form {
      .input-group {
        .form-control {
          min-width: 110px;
        }
      }
    }
  }
}

// general purpose layout helpers
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }
.spacer, .flex-spacer {
  flex-grow: 0; flex-shrink: 0;
  min-width: 0.7em; min-height: 0.7em;
}
.flex-grow { flex-grow: 1; }
.flex-no-grow { flex-grow: 0; }
.flex-shrink { flex-shrink: 1; }
.flex-no-shrink, .fa { flex-shrink: 0; }
.flex-row, .flex-col, .flex-row-r, .flex-col-r {
  display: flex !important;
  align-items: baseline;
}
.flex-col { flex-direction: column; }
.flex-col-r { flex-direction: column-reverse; }
.flex-row { flex-direction: row; }
.flex-row-r { flex-direction: row-reverse; }
.flex-start { justify-content: flex-start; }
.flex-end { justify-content: flex-end; }
.flex-center { justify-content: center; }
.flex-align-center { align-items: center; }
.flex-align-end { align-items: flex-end; }
.flex-align-start { align-items: flex-start; }
.flex-align-stretch { align-items: stretch; }
.text-wrap { white-space: normal; }
.text-nowrap, .text-no-wrap { white-space: nowrap; }
.text-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.width-100 { width: 100%; } .width-75 { width: 75%; } .width-50 { width: 50%; }
.width-25 { width: 25%; } .width-33 { width: 33%; } .width-66 { width: 66%; }


html {
  // As a side-effect of setting the @viewport in bootstrap,
  // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
  // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
  // thus making it hard to click on stuff near the right edge of the page.
  // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
  // See https://github.com/twbs/bootstrap/issues/18543
  // TODO Remove this if Bootstrap version is >= 4.0.0
  -ms-overflow-style: scrollbar;
}