compiled.scss

@charset "utf-8";

//  Create a compiled.SCSS file for all sub-themes
//  which imports the respective parent theme's compiled.scss
//  in the cascade AND extends it. This way we ALWAYS have an UP-TO-DATE compiled.CSS imported
//  which includes all finc styles plus all subsequent customizations.
//  [I.e.: finc's compiled.scss imports bootstrap3/scss/compiled.scss and
//  the house-specific branches such as fid_adlr then import finc/scss/compiled.scss
// 0. NOTE TO DEVELOPERS
//    Do NOT EDIT compiled.CSS -- all CSS files should be generated from SCSS files
// 1. KEY VARIABLES and MIXINS
//    Define or re-define KEY VARIABLES and MIXINS in this file (see 1.1 ff below) OR import your own
@import 'customVariables';
@import 'customMixins';
// 1.1 FONTS
// ++ USE EITHER
// ++ ++ font-size: ($font-size-base * 1.5)
// ++ OR
// ++ ++ use the em-calculator function, like so: font-size: em(14)
// 1.2 DO NOT define site-specific colours in finc's SCSS files
//    - this must be done in your site-specific themes
// 2. For Media queries use:
//    Extra small screen / phone: '$screen-xs-max' (=767px);
//    Small screen / tablet: '$screen-sm-min' (=768px);
//    Medium screen / desktop: '$screen-md-min' (=992px) and
//    Large screen / wide desktop: '$screen-lg-min' (=1200px);
//    The MAXimum ranges are defined as the next higher element minus 1px, so:
//    '$screen-xs-max' = $screen-sm-min - 1 etc
//    you can use '$screen-xs-max', '$screen-sm-max' and '$screen-md-max'
// 3. Import finc's compiled.scss to have the variables and mixins defined above applied to it
@import '../../fid/scss/compiled';
@import "lightbox";

// 4. Customize further -- pls. comment and explain
//    PLEASE ORGANIZE YOUR CSS ACCORDING TO THIS GENERAL RULE - keep exceptions to a minimum
//    *, html, body
//    h1, h2, h3, h4, h5, h6,
//    p,
//    address, blockquote, pre,
//    ul, ol, li, dl, dt, dd,
//    table, caption, tr, th, td,
//    form, fieldset, legend, label, select, input, textarea,
//    div,
//    img,
//    a,
//    strong, em, abbr, q, cite, code, kbd, var,
//    span,
//    #id,
//    .class
//    Frequently used classes
//    Custom areas of the theme

//    IDs and classes come last and should (if possible) be ordered according
//    to their appearance on the page, e.g. header, breadcrumbs, main ...

//    Please sort selectors alphabetically, like so
//    .foo {
//       border: 1px solid red;
//       margin-left: 1em;
//       padding: 0 ($grid-gutter-width / 2);
//       width: auto;
//    }
//

// HTML

// BODY
body {
  background-color: $white;
  // set default font to OPEN SANS
  font-family: $font-family-sans-serif;
  // give central position
  margin: 0 auto;
  // Make sure, outer container doesn't spill over max designed content width
  max-width: $max-designed-body-width;

  overflow: hidden;
}

// HEADINGS
h1,
h2,
h3,
h4,
h5 {
  color: $black;
  // set headings to UBUNTU MONO
  font-family: $font-family-monospace;
}

// ++ h1
h1 {
  font-size: em(63px);
  font-weight: 700;
  letter-spacing: em(4.2px);
  line-height: em(69px);
}

// ++ h2
h2 {
  font-size: em(25px);
  font-weight: 700;
  letter-spacing: em(2.87px);
  line-height: em(20px);

  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
    font-size: em(30px);
    line-height: em(25px);
  }

  @media (min-width: $screen-lg-min) {
    font-size: em(30px);
    line-height: em(30px);
  }
}

// ++ h3
h3 {
  font-size: em($font-size-title);
  font-weight: 700;
  line-height: em($font-size-title);

  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
    font-size: em(28px);
    line-height: em(28px);
  }

  @media (min-width: $screen-lg-min) {
    font-size: em(32px);
    line-height: em(30px);
  }

  .title-toolbar & {
    font-size: $font-size-title;
  }

  .sub {
    font-size: $font-size-title-sub;
    line-height: 1.35em;
  }
}

// ++ h4
h4 {
  font-size: em(24px);
  font-weight: 700;
  letter-spacing: em(1px);
  text-transform: uppercase;
}

// ++ h5
h5 {
  font-size: em(18px);
  font-weight: 700;
  letter-spacing: em(2px);
  text-transform: uppercase;
}

// HEADINGS - END

// Paragraphs
// ++ p {}
// Paragraphs - END

// LISTS
// ++ ul,
ul {
  list-style-type: none;
  padding-left: 0;

  li {
    color: $asphalt;

    .openurls & {
      a {
        color: $asphalt;

        &:hover {
          color: #00359b;
        }
      }
    }
  }
}

// ++ ol {}
// ++ li {}
// ++ dl {}
// ++ dt {}
// ++ dd {}
// LISTS - END

// TABLES
table {
  border: 0;
  margin-top: 20px;
  width: 100%;
}

// ++ caption {}
// ++ tr {}
// ++ th {}
// ++ td {}
// TABLES - END

// FORMS
// ++ Fieldsets
// ++ Legend elements
// ++ label {}
// ++ input {}
// ++ Select {}
select {
  height: 60px;
  min-width: 100px;
}

// ++ textarea {}
input,
textarea {
  //border-color: $silver;
  //border-radius: 5px;
}

form input:invalid, form textarea:invalid {
  margin-right: 0;
}

// FIXME -- ggf. UEBERFLUESSIGE HELPER-Klassen ENTFERNEN -- auch phtml-Templates prüfen
.hidden-lg-only {
  @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
    display: none !important;
  }
}
.hidden-sm-lg {
  @media (min-width: $screen-sm-min) and (max-width: $screen-lg-max) {
    display: none !important;
  }
}
.hidden-xl {
  @media (min-width: $screen-xl-min) {
    display: none !important;
  }
}

.margin-btm-xl {
  margin-bottom: 85px;
}

// FORMS - END

// IMAGES
// img {}
// IMAGES - END

// LINKS
a {
  color: $black;
  outline: none;
  text-decoration: none;

  &:focus {
    outline: none;
  }

  &:hover {
    text-decoration: none;
  }
}

// LINKS - END

// TEXT DECORATION
// strong {}
// em {}
// TEXT DECORATION - END

// Sizing
.flex-box-20 {
  flex-basis: $pagination-flexbox-basis-20-percent;
}

.flex-box-40 {
  flex-basis: calc(2 * #{$pagination-flexbox-basis-20-percent});
}

.flex-box-60 {
  flex-basis: calc(3 * #{$pagination-flexbox-basis-20-percent});
}

.flex-box-80 {
  flex-basis: calc(4 * #{$pagination-flexbox-basis-20-percent});
}

.flex-column-default {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
}

.flex-column-reverse {
  display: -webkit-flex;
  -webkit-flex-direction: column-reverse;
  display: flex;
  flex-direction: column-reverse;
}

// Sizing - END


// CLASSES (Elements that are used in several places)
// ++ HELPER Classes
.large-text {
  font-size: em(24px);
  line-height: em(45px);
  &.light {
    color: $asphalt;
  }
}

.small-text {
  color: $asphalt;
  font-size: em(16px);
}

// FIXME: Check for more elegant way to apply colors
// FIXME -- UEBERFLUESSIGE HELPER-Klassen ENTFERNEN -- auch phtml-Templates prüfen -- die meisten Farben sollten korrekt ueber BS definierbar sein (primary, secondary ...) -- siehe customVariables.scss
.error-color {
  color: $brand-danger;
}

.highlighter-color {
  color: $violet;
}

.primary {
  color: $azure;
}

.secondary {
  color: $seafoam;
}

.warning-color {
  color: $amber;
}

.white {
  color: $white;
}

// ++ HELPER Classes - END

// ++ ALERTS
.alert-danger {
  background: $amber;
  border: $amber;
  color: $black;
  &:hover {
    color: $black;
  }
}

.alert-info, .savedLists.alert.alert-info, .alert-success {
  border: 3px solid $asphalt-dark;
  border-radius: 0;
  color: $state-info-text;
  &:hover,
  &:focus {
    color: $state-info-text;
  }
  a {
    color: $state-info-text;
  }
}
// ++ ALERTS - END

// ++ BUTTONS
.btn-lg {
  @include large-btn;

  &:hover,
  &:focus {
    outline: none;
  }
}

.btn-default:hover, .btn-default:focus, .search-filter-toggle:focus, .search-filter-toggle:hover {
  background-color: $white;
  border-color: $iron;
  outline: none;
}

.btn-primary {
  @include primary-btn;
}

.btn-link {
  @include main-link;
}

.btn-getitbox {
  @include result-list-btn-getitbox;
  padding: 17px;
}

// ++ BUTTONS - END

// ICONS
.icon {
  min-width: 30px;
  vertical-align: bottom;

  @media screen and (max-width: $screen-md-max) {
    font-size: $font-size-h3;
    font-weight: 500;
    min-width: 35px;
  }

  .btn-primary {
    float: right;
    font-size: calc(#{$font-size-base} * 1.5);
  }
}

// ICONS - END

// ++ BRANDING (branding for origin source ids / specific facets and mega_collections etc.)
// see SID103 in finc compiled.scss
.branding {
  color: transparent;
  display: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  margin-left: .5em;
  margin-top: 4px;
  vertical-align: middle;

  &.SID48 {
    // #16177 adapt the postioning of the WISO logo
    margin-top: 13px;
  }

  &.SID51 {
    // #16177 adapt the path to get the new releases logo
    // background: url('../../fid_adlr/images/branding/new-item-vub3.png') 0 0 no-repeat;
    background: $midnight-light;
    color: $azure;
    display: inline-block;
  }

  &.SID76 {
    // #16177 adapt the path to get the "adlr ebooks" logo
    // FIXME set correct logo
    background: $midnight-light;
    color: $azure;
    display: inline-block;
  }

  &.SID78 {
    // #16177 adapt the path to get the IZI database logo
    background: url('../../fid_adlr/images/branding/izi-database.png') 0 0 no-repeat;
    background-size: 100%;
    display: inline-block;
    height: em(40px);
    margin-top: 12px;
    width: em(150px);
  }

  &.SID103 {
    // #16177 adapt the path to get the Margaret-Herrick-Library logo
    background: url('../../fid_adlr/images/branding/herrick-library.png') 0 0 no-repeat;
    background-size: 100%;
    display: inline-block;
    height: 27px;
    margin-top: 7px;
    width: 230px;
  }

  &.facet-free {
    // #16177 adapt the path to get the Open Access logo
    // background: url('../../fid_adlr/images/branding/open-access-logo.svg') 0 0 no-repeat;
    background: $midnight-light;
    color: $azure;
    display: inline-block;
  }

  &.collection-verbundkatalog-film {
    // #16177 adapt the path to get the verbundkatalog film logo
    // background: url('../../fid_adlr/images/branding/verbundkatalog-film.png') 0 0 no-repeat;
    background: $midnight-light;
    color: $azure;
    display: inline-block;
  }
}
// ++ BRANDING - END

// ++ DROPDOWNS
.dropdown-menu {
  @include basic-dropdown-menu;
}

.dropdown-menu-parent {
  // needed for nested dropdown - hack for js of bootstrap 3
  @extend .dropdown-menu;

  @media screen and (max-width: $screen-xs-max) {
    width: 100%;
    // FIXME; Pruefen, ob form-control einfach aus dem phtml-Template entfernt werden könnte
    .searchForm,
    .searchForm .form-control {
      max-width: $screen-md-max;
      width: 100%;
    }
  }
}

// ++ DROPDOWNS - END

// ++ MODALS
// ++ MODALS - END

// PAGE ELEMENTS (Top --> Down) ++
// ++ HEADER
// ++++ Header width reset.
header {
  background-position: right top;
  background-repeat: no-repeat;

  &.collapse:not(.in),
  &.collapsing {
    display: block;
  }

  @media screen and (max-width: $screen-xs-max) {
    margin-bottom: $content-bottom-padding;
  }

  @media screen and (max-width: $screen-md-max) {
    &.collapse:not(.in),
    &.collapsing {
      min-height: $navbar-header-height;
    }
  }

  @media screen and (min-width: $screen-lg-min) {
    background-image: url('../images/header-bg-lg.png');
  }
}

header,
.navbar,
.breadcrumbs {
  background-color: transparent;
  border: 0;
  // FIXME: REMOVE, when 15639 has been merged to finc
  width: auto;

  // override finc display block
  // Fixme: Bitte in den "allgemeinen" Block verschieben, also, wo body, dropdown usw. definiert werden
  .collapse.in {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-box;
    display: inline-flex;
  }
  .collapsing, &.collapsing {
    transition-duration: $transition-duration !important;
    transition: unset  !important;
  }
}

.menubar {
  @include noselect;
  box-sizing: border-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: -webkit-box;
  display: inline-flex;
  justify-content: flex-end;
  padding-right: 10px;
  width: 100%;
  z-index: z-index(menubar, 0);

  @media screen and (max-width: $screen-xs-max) {
    padding-right: 0;
  }

  @media screen and (max-width: $screen-md-max) {
    background: $white;
  }

  // ++++++  disable transitions for menu
  .collapsed,
  &.collapsed {
    transition: none !important;
    transition-delay: $transition-delay !important;
    transition-duration: $transition-duration !important;
  }

  .collapsing,
  &.collapsing {
    background: transparent;
    height: auto !important;
    transition: none !important;
    transition-delay: $transition-delay !important;
    transition-duration: $transition-duration !important;
  }

  .collapse,
  &.collapse {
    transition: none !important;
    transition-delay: $transition-delay !important;
    transition-duration: $transition-duration !important;
  }

  .collapse.in,
  &.collapse.in {
    transition: none !important;
    transition-delay: $transition-delay !important;
    transition-duration: $transition-duration !important;
  }

  .fill-flex {
    flex-grow: 2;
    flex-shrink: 1;
  }
}

#language-dropdown {
  .dropdown-menu {
    @include basic-dropdown-menu;
    left: 10px;
    min-width: 100px;

    @media (max-width: $mobile-navigation-menu-breakpoint) {
      @include shift-main-menu-entries-to-navigation-overlay;
    }

    @media (max-width: $screen-xs-max) {
      top: calc(#{$navbar-header-height} + 7 * #{$line-height-submenu} + #{$content-top-padding});
    }

    @media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
      left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
      top: calc(#{$navbar-header-height} + 8 * #{$line-height-submenu} + 9 * #{$navbar-default-padding});
      .btn {
        font-size: calc(#{$font-size-menu-sm} - 15px);
      }
    }

    @media screen and (max-width: $screen-xs-max) and (orientation: landscape) {
      left: 375px;
      top: calc(#{$navbar-header-height} + 10px);
    }

    @media screen and (min-width: $screen-sm-min) and (max-width: $mobile-navigation-menu-breakpoint) and (orientation: landscape) {
      left: 750px;
      top: calc(#{$navbar-header-height} + 2 * #{$navbar-default-padding} + 15px);
    }

    @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
      border: 2px solid $asphalt;
      left: 0;
      letter-spacing: 2.87px;
      top: 64px;
    }

    li > a {
      line-height: $line-height-submenu;
      padding: 3px 5px;
      text-align: left;

      &:hover {
        background: initial;
      }

      @media (max-width: $mobile-navigation-menu-breakpoint) {
        padding: 0;
      }

      @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
        font-family: $font-family-monospace;
        font-size: $font-size-menu-lg;
        padding: 0 $navbar-extended-padding;
      }
    }
  }
}

.menubar #register-menu .navbar-header-link {
  @media (max-width: $mobile-navigation-menu-breakpoint) {
    @include shift-main-menu-entries-to-navigation-overlay;
  }

  @media (max-width: $screen-xs-max) {
    top: calc(#{$navbar-header-height} + 8 * #{$line-height-submenu} + #{$content-top-padding});
  }

  @media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
    font-size: calc(#{$font-size-menu-sm} - 15px);
    left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
    top: calc(#{$navbar-header-height} + 9 * #{$line-height-submenu} + 10 * #{$navbar-default-padding});
  }

  @media screen and (max-width: $screen-xs-max) and (orientation: landscape) {
    left: 375px;
    top: calc(2 * #{$navbar-header-height} - 25px);
  }

  @media screen and (min-width: $screen-sm-min) and (max-width: $mobile-navigation-menu-breakpoint) and (orientation: landscape) {
    left: 750px;
    top: calc(#{$navbar-header-height} + 5 * #{$navbar-default-padding} + 5px);
  }
}

.header-menu-collapse {
  @extend .navbar-header;

  @media (min-width: $screen-lg-min) {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-box;
    display: inline-flex;

    &.collapse.in {
      &#submenu {
        position: absolute;
        z-index: z-index(navigation-overlay, 0);
      }
      .submenu-collapse-wrapper {
        position: absolute;
        top: $navbar-header-height-home-sm;
      }
    }
  }

  &.collapse:not(.in) {
    .submenu-collapse-wrapper {
      background: $white;
      height: 0;
      padding: 0;
      visibility: hidden;
      width: 0;
    }
  }

  &.collapse.in,
  &.collapsing {
    .submenu-collapse-wrapper {
      @include navigation-overlay;
      @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
        position: absolute;
      }
    }
  }
}

//// Define header navbar on mobile
.header-menu-collapse.collapsing {
  padding: 0;

  .submenu-collapse-wrapper {
    @media (max-width: $screen-sm-max) {
      background-color: $white;
      padding: 0;
    }
  }
}

//// Display different icons after open or close of submenues
header.collapse.in .menubar .text-close,
.dropdown.sbox-dd:not(.open) .text-close,
.language:not(.open) .icon.icon-chevron-up {
  display: none;
}

header.collapse:not(.in) .menubar .text-open,
header.collapsing .text-open,
.dropdown.sbox-dd.open .text-open,
.language.open .icon.icon-chevron-down {
  display: none;
}

#submenuToggler {
  @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
    min-width: 125px;
  }
}

.navbar-header {
  flex-shrink: 0;

  // position of navbar-brand Logo on top left
  .navbar-brand {
    border: 0;
    left: 0;
    outline: none;
    position: absolute;
    top: 31px; // Fixme: mglst Variable nutzen
    z-index: z-index(navbar-brand, 1);
  }

  @media screen and (max-width: $screen-md-max) {
    background-color: $white;
    height: $navbar-header-height;
    padding: 30px 0 20px;

    .navbar-toggle {
      color: $brand-primary;
      // for middle-alignment
      padding: 0;
    }

    &:not(.collapse) {
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: -webkit-box;
      display: inline-flex;
    }
  }
}

.navbar-header-link {
  @extend .navbar-toggle;
  display: inherit;
  margin-right: 0;
  z-index: z-index(navbar-header-link, 0);

  @media screen and (min-width: $screen-lg-min) {
    @include default-navbar-link-font;
  }
}

// ++++ Banner, Logo and home link
.banner {
  width: 100%;
  z-index: z-index(banner, 0);

  @media screen and (max-width: $screen-xs-max) {
    margin-left: 0;
    margin-right: 0;
  }

  &.container {
    padding-left: 0;
    padding-right: 0;

    @media screen and (min-width: $screen-lg-min) {
      border-radius: 0;
      padding-left: $navbar-default-padding;
      padding-top: $navbar-default-padding;
    }

    // Menu toggler position
    .navbar-toggle {
      margin-right: em(5px);
      padding-left: em(10px);
      @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
        padding-left: em(25px);
      }
      @media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
        padding-left: em(10px);
      }
      @media screen and (min-width: $screen-xl-min) {
        margin-right: em(6px);
        padding-left: em(3px);
      }
    }
  }
}

.navbar-brand {
  // DEFINE BG IMAGE
  // $screen-xs-max = 767px
  // Fallback image IE & Co
  background: url('../images/logo.png') no-repeat;
  // SVG (modern browsers), linear-gradient used to pick out browsers that support SVG
  background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
  background-size: contain;
  color: transparent;
  margin-left: calc(#{$navbar-margin-left} - 10px);
  max-width: $logo-max-width;
  min-height: em(56px); // FIX for Safari + Android Stock Browser
  min-width: 180px; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
  z-index: z-index(navbar-brand, 0);

  // 768px and up
  @media screen and (min-width: $screen-sm-min) {
    // Fallback image IE & Co
    background: url('../images/logo.png') no-repeat;
    // SVG (modern browsers), linear-gradient used to pick out browsers that support SVG
    background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
    background-size: contain;
    display: inline-block !important; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
    margin-left: $navbar-margin-left;
  }

  // 992px and up
  @media screen and (min-width: $screen-lg-min) {
    // Fallback image IE & Co
    background: url('../images/logo.png') no-repeat;
    // SVG (modern browsers), linear-gradient used to pick out browsers that support SVG
    background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
    display: inline-block !important; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
    min-width: em(266px) !important; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
  }

  // hide home link for non-visually impaired to show logo only
  a,
  &:hover,
  &:focus {
    color: transparent;
  }
}
// ++++ Logo and home link - END

// ++++++ basic default (non start page)
// Fixme: Ueberlegen, ob es klüger wäre, die Startseite als "Ausnahme" zu nehmen. Also den body standardmäßig für alle Seiten zu definieren und nur die Startseite dann extra zu stylen
body:not(.template-name-home) {
  header {
    @media screen and (max-width: $screen-md-max) {
      margin-bottom: calc(#{$navbar-header-height} + #{$search-input-height-fixed} + 35px);
    }

    .headline, .home-links {
      display: none;
    }

    @media screen and (min-width: $screen-lg-min) {
      background-image: url('../images/header-bg-lg-mirror-stretched.png');
      background-position: 100% 70%;
      height: $default-header-height-lg; // needed for background image effect
    }

    // ++++++  Navbar in affix mode
    .navbar.affix:not(.search) {
      border: 0;

      @media screen and (min-width: $screen-lg-min) {
        @include default-background-lg;
        height: em($navbar-header-height-affix-lg);
      }
    }
    // ++++++  Navbar in affix mode - END

    .navbar.affix-top {
      position: fixed;
    }

    .search {
      // always use fixed search on default sites
      @include fixed-navbar-search;

      &.affix-top {
        @media screen and (min-width: $screen-lg-min) {
          position: relative;
        }

        .searchbox {
          @media screen and (min-width: $screen-sm-min) {
            background: $azure;
          }

          @media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-min + 50px){
            background: transparent;
          }

          @media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max){
            height: 120px;
            width: $search-form-width-affix-lg;
          }

          @media screen and (min-width: $screen-xl-min) {
            height: 120px;
            max-width: $search-form-width-max;
            width: $search-form-width-xl;
          }
        }
      }
    }

    // search (box) and elements in affix mode - END
  }
}
// ++++++ basic default - END

// ++++ Start Page
// FIXME: Bitte prüfen, ob es wirklich so komplex sein muss
.template-name-home {
  .main {
    @include default-background;

    @media screen and (max-width: $screen-xs-max) {
      background-image: url('../images/header-bg-xs.png');
      background-position: 100% 0px;
      background-size: auto;
    }

    @media screen and (min-width: $screen-sm-min) {
      background-image: url('../images/header-bg-sm.png');
      background-position: 100% #{$navbar-header-height-home-sm};
      min-height: em($navbar-header-height-home-sm);
    }

    @media screen and (min-width: $screen-md-min) {
      background-image: url('../images/header-bg-md.png');
    }

    @media screen and (min-width: $screen-lg-min) {
      background-image: url('../images/header-bg-lg.png'),
      url('../images/background-shape-left.svg'),
      url('../images/background-shape-right.svg');
      background-position: 100% -#{$navbar-header-height-home-sm},
      center left,
      bottom right;
      background-repeat: no-repeat;
    }
  }
  header {
    .affix-top {
      position: relative; // ignore affix header on start page
      .menubar {
        padding-right: 10px;

        @media screen and (max-width: $screen-xs-max) {
          padding-right: 0;
        }

        @media screen and (max-width: $screen-md-max) {
          background: $white;
          position: fixed; // but not for mobile devices
        }
      }
    }
    .affix {
      position: relative; // ignore affix header on start page
      .menubar {
        @media screen and (max-width: $screen-md-max) {
          background: $white;
          position: fixed; // but not for mobile devices
        }
      }
    }
    @media screen and (min-width: $screen-lg-min) {
      .container.navbar {
        padding-right: em(20px);
      }
    }
  }
  .home-text {
    border: 0;
    color: $brand-secondary;

    .home-links {
      display: block;
      position: relative;
      top: calc(#{$home-text-box-height-lg} - 25px);
    }

    &.container {
      padding-left: 0;

      @media screen and (max-width: $screen-xs-max) {
        // Add correct data for font-size, letter-spacing, lineheight, texttransform
        @include default-headings-font(26px, 1.7px, 36px, none);
        height: $home-text-box-height-xs;
        margin-left: 0;
        max-width: calc(#{$screen-xs-max} / 2);
        padding-bottom: $home-text-bottom-padding-xs;
        padding-top: $home-text-top-padding-xs;
        .home-links {
          display: none;
        }
      }

      @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
        // $font-size, $letter-spacing, $lineheight, $texttransform
        @include default-headings-font(40px, 3.27px, 50px, none);
        height: $home-text-box-height-sm;
        margin-bottom: 70px;
        margin-left: $home-text-left-margin-sm;
        margin-top: calc(#{$navbar-header-height} + 30px);
        padding-bottom: $home-text-bottom-padding-sm;
        padding-left: 0;
        padding-right: 0;
        padding-top: $home-text-top-padding-sm;
        text-align: left;
        width: 85%;

        .home-links {
          display: none;
        }
      }

      @media screen and (min-width: $screen-lg-min) {
        // $font-size, $letter-spacing, $lineheight, $texttransform
        @include default-headings-font(63px, 4.27px, 69px, none);
        height: $home-text-box-height-lg;
        margin-top: $navbar-header-height;
        padding-bottom: $home-text-bottom-padding-lg;
        padding-top: $home-text-top-padding-lg;
        text-align: right;

        .headline {
          padding-left: 170px;
          padding-right: 30px;
        }
      }

      @media screen and (min-width: $screen-xl-min) {
        margin-left: $home-text-left-margin-xl;
        .headline {
          padding-left: 200px;
        }
      }
    }
  }

  .search.container.navbar {
    position: absolute;
    @media screen and (max-width: $screen-xs-max) {
      // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
      @include searchbox-toggler-and-content-styles(none, block, false, false, 'mobile');
      padding-right: 0;
      top: $home-text-box-height-xs;
      width: 100%;
    }

    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
      @include searchbox-toggler-and-content-styles(none, none, true, false, 'desktop');
      top: $home-text-box-height-sm;
      width: 100%;
    }

    @media screen and (min-width: $screen-lg-min) {
      // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
      @include searchbox-toggler-and-content-styles(none, none, true, false, 'desktop');
      top: calc(#{$home-text-box-height-lg} - 100px); // -100px for links only on lg sreens
    }
  }
}
// ++++ Start Page - END

// ++++ SEARCH BOX

// FIXME WORKAROUND: MUSS AM ENDE UMBENANNT WERDEN
.search-wrapper.container {
  // background: #def7fa !important;
  background: transparent;
  padding: 0;
  position: fixed;
  top: 0;

  // center on screen for displays 1200px to 1600px (this is where icons switch to icons + text)
  @media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
    left: 0;
    margin: 0 auto; // center the box on smaller than very large screens
    right: 0;
    width: $seachbox-width-lg; // width is required to center the box!
  }

  @media screen and (min-width: $screen-lg-wrapper-min) {
    max-width: 1284px;
    min-width: 1170px;
  }
}

.template-name-home .search-wrapper.container {
  position: relative;
}

.search.container {
  background-color: transparent;
  border: 0;
  padding-top: 0;
  z-index: z-index(search, 0);

  @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
    padding-left: $search-padding-sm-md;
    padding-right: $search-padding-sm-md;
  }

  &.collapse.in {
    display: inherit;
  }

  &.collapsing {
    display: none;
    transition: none !important;
  }

  .sbox-dd-menu {
    background-color: transparent;
    border: 0;
    margin-top: 0;
    z-index: z-index(sbox-dd-menu, 0);
    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      width: $search-panel-width-xs-md;
    }
  }

  .searchbox {
    // Outer Box
    background-color: $brand-primary;
    height: em($search-form-height-xs);
    padding: 30px 20px;

    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      height: em($search-form-height-sm);
      max-width: unset;
      padding: 35px 20px 55px 50px;
      width: $search-form-width-sm;
    }

    @media screen and (min-width: $screen-lg-min) {
      height: em($search-form-height-lg);
      padding: 55px 20px 55px 50px;
      width: $search-form-width-home-lg;
    }

    @media screen and (min-width: $screen-xl-min) {
      //padding: 55px 20px 55px 50px;
      //width: $search-form-width-home-xl;
    }
    // Outer Box - END
  }

  .searchForm {
    display: inline-block;
    ul.dropdown-menu-parent > li {
      width: 100%;
    }

    @media screen and (max-width: $screen-xs-max) {
      .navbar-left {
        margin-bottom: 0;
      }
      label {
        font: $font-family-sans-serif;
        min-width: 90%;
        padding: .25em .5em;
        vertical-align: middle;
      }
    }

    @media screen and (max-width: $screen-md-max) {
      width: $search-panel-width-xs-md;
    }
  }
}

// ++++ SEARCH TABS
// FIXME: Bitte default definieren und dann nur template-name-home als Sonderfall
// FIXME: nav-tabs-/nav-tabs-open-Definitionen sortieren, auflösen und zuordnen
.nav-tabs {
  border-bottom: 0;
}

.template-name-home {
  .nav-tabs {
    border-bottom: 0;
    margin-bottom: 30px;

    @media screen and (max-width: $screen-xs-max) {
      // parameter $is_collapsed, $is_mobile
      @include search-filter-styles(false, true);

      &.open {
        // parameter $is_collapsed, $is_mobile
        @include search-filter-styles(true, true);
      }
    }

    @media screen and (min-width: $screen-sm-min) {
      // parameter $is_collapsed, $is_mobile
      @include search-filter-styles(false, false);
    }
  }
}

body:not(.template-name-home) {
  // FIXME: vereinheitlichen
  .nav-tabs {
    border-bottom: 0;
    margin-bottom: 30px;
  }

  @media screen and (max-width: $screen-xs-max) {
    .nav-tabs.open { // note difference to sm - show tabs as select
      // parameter $is_collapsed, $is_mobile
      @include search-filter-styles(true, true);
    }
  }

  @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      .nav-tabs { // note difference to xs - always show expanded options as tabs
        // parameter $is_collapsed, $is_mobile
        @include search-filter-styles(false, false);
    }
  }

  @media screen and (min-width: $screen-lg-min) {
    .nav-tabs.open { // note difference to sm - show tabs as select
      // parameter $is_collapsed, $is_mobile
      @include search-filter-styles(true, false);
    }
  }
}
// ++++ SEARCH TABS - END

// ++++ SEARCH BOX - END

// ++++++ Search input field
input.searchForm_lookfor {
  // overwrite border definitions input[type="text"]
  @include result-list-border($white);
  color: $white;

  &::placeholder,
  &:placeholder-shown {
    color: $white;
  }

  @include default-border-radius;
  background-color: transparent;
  height: $search-input-height-fixed;

  @media screen and (max-width: $screen-xs-max) {
    padding-right: em(60px);
  }

  @media screen and (min-width: $screen-sm-min) {
    height: $search-input-height-sm;
    padding-right: em(45px);
    width: $search-input-width-sm;
  }

  @media screen and (min-width: $screen-lg-min) {
    height: $search-input-height-lg;
    width: $search-input-width-lg;
  }

  // Fixme: Ueberlegen, ob es sinnvoll ist, form-control zu entfernen
  &.form-control {
    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
      max-width: unset;
      width: $search-input-width-sm;
    }

    @media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max) {
      max-width: unset;
      width: $search-input-width-md;
    }

    @media screen and (min-width: $screen-lg-min) {
      max-width: $search-input-width-lg;
      width: $search-input-width-lg;
    }
  }
}

// ++++++ Search input field - END

// ++++++ Quick filter
#quickfilter-dd {
  color: $white;

  .quickfilter.open & {
    background: transparent;
  }
}

#quickfilter-dd,
.search-button {
  &:hover,
  &:focus {
    color: $white;
    outline: none;
    text-decoration: underline;
  }
}

// ++++++ Quick filter - END

.searchForm .list-unstyled {
  > li {
    // ++++++ Standard Search Button
    &.find-button {
      @media screen and (max-width: $screen-xs-max) {
        float: none;
      }

      @media screen and (min-width: $screen-sm-min) {
        margin-left: 15px;
      }
    }

    .find-label {
      color: $black;
      display: inherit; // show find text as default, but not at fixed-navbar-search
    }

    // ++++++ Standard Search Button - END

    &.quickfilter {
      // gear within search input
      height: $search-input-height-fixed;
      margin-left: -3em;
      padding-top: 12px;
      position: absolute;

      @media screen and (max-width: $screen-xs-max) {
        height: $search-input-height-fixed;
        right: calc(100% - #{$search-input-width-affix-xs} - 18%);
      }

      @media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
        right: calc(100% - #{$search-input-width-affix-sm});
      }

      @media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max) {
        right: calc(100% - #{$search-input-width-affix-md});
      }

      @media screen and (min-width: $screen-lg-min) {
        height: $search-input-height-default;
        padding-top: $search-filter-padding-top;
      }

      li {
        border: $default-border solid $white;
        border-radius: 2px;
      }

      .btn-transparent {
        border: 1px solid transparent;

        &:active,
        &:focus,
        &:hover {
          background: transparent;
          border: 1px solid transparent;
          box-shadow: none;
          color: $seafoam;
          outline: none;
        }
      }

      .dropdown-menu {
        // parameter $type: collapsed for default / full for start page
        @include basic-dropdown-menu;
        // parameter $is_collapsed, $is_mobile
        @include search-filter-styles(true, false); // gear within search text input
        left: -200px;
        padding: 5px;
        top: 60px;

        #searchFormKeepFilters {
          cursor: pointer;
          height: 35px;
          user-select: none;
          white-space: nowrap;
          width: max-content;
        }
      }
    }
  }

  @media screen and (min-width: $screen-sm-min) {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-box;
    display: flex;
  }
}

// fix bug of clicking twice in quickfilter for mobile
.dropdown-backdrop {
  display: none;
}

// Set font size for input field
.searchForm_lookfor {
  @media screen and (max-width: $screen-md-max) {
    font-size: 16px;
  }
}

// ********************************************************

// header
// ********************************************************

// ++++ SEARCH BOX - END

// ++ HEADER - END

// ++ SEARCH-RESULTS PAGE


.offcanvas-right .close-offcanvas::before {
  content: none;
}

.container .sidebar.right {
  @media screen and (max-width: $screen-xs-max) {
    padding: 10px;
    select {
      max-width: none;
    }
  }
  @media screen and (min-width: $screen-sm-min) {
    padding-left: 20px;
  }
  select {
    @include result-list-border($black);
    background-color: $white;
    height: $search-input-height-fixed;
    width: 100%;
  }
  .btn-link {
    color: $black;
  }
  #filter-header {
    background-color: $midnight-medium;
    font-family: $font-family-monospace;
    font-size: $font-size-h3;
    font-weight: 700;
    line-height: em(35px);
    padding: 12px;
  }
}

.search-header {
  margin-bottom: 5em;
  margin-top: 2em;
  width: $search-panel-width-xs-md;

  .search-stats {
    padding-bottom: 3em;
    @media screen and (max-width: $screen-md-min) {
      padding-bottom: 0;
    }
  }

  .search-controls a  {
    @include main-link;
    padding: 0.75em 0;
    color: black;
    text-decoration: none;
  }
}

.offcanvas-toggler {
  float: none;

  .search-filter-toggle {
    @include result-list-border($black);
    background-color: $white;
    font-family: $font-family-monospace;
    font-size: $font-size-base;
    font-weight: 700;
    height: $search-input-height-fixed;
    line-height: em(40px);
    text-transform: uppercase;
    width: 100%;

    &::after {
      content: none;
    }

    &:hover {
      background-color: $white;
    }

    i {
      margin: 5px;
    }
  }

  .btn-primary {
    color: $black;
  }
}

.search-controls {
  font-family: $font-family-monospace;

  &.hidden-lg {
    form {
      min-width: 100%;
    }
    select {
      font-size: calc(#{$font-size-base} * .9);
      font-weight: 600;
      text-transform: uppercase;
    }
  }

  select {
    @include result-list-border($black);
    background-color: $white;
    font-family: $font-family-sans-serif;
    max-width: unset;
    padding-right: 20px;

    &.hidden-xs {
      font-weight: 600;
    }
  }

  label {
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-top: -2em;
    position: absolute;
    text-transform: uppercase;
  }

  .limit {
    @media screen and (min-width: $screen-sm-min) {
      margin-right: 30px;
    }

    @media screen and (min-width: $screen-lg-min) {
      margin-right: 50px;
    }

    label {
      padding-top: 6px;
    }

    select {
      min-width: 10em;
    }
  }

  .sort {
    select {
      max-width: unset;
    }
  }
}

.mailsave {
  span {
    margin-left: 0.8em;

    @media screen and (min-width: $screen-sm-min) {
      margin-left: 0.3em;
      position: relative;
      top: 15px;
    }

    @media screen and (min-width: $screen-lg-min) {
      margin-left: 0.5em;
    }
  }
}

.result {
  border-bottom: 3px solid $midnight-medium;

  .format {
    background-color: $white;
    color: $asphalt;
    padding-left: 0;
  }

  @media screen and (max-width: $screen-xs-max) {
    a {
      text-decoration: none;
    }
  }

  .title {
    font-family: $font-family-monospace;
    font-size: 22px;
    font-weight: 700;

    &.getFull {
      line-height: 1.35em;
    }
  }

  @media screen and (min-width: $screen-sm-min) {
    &:first-of-type {
      border-top: 3px solid $midnight-medium;
    }
  }

  .record-icon {
    padding-right: 30px;
  }
}

.result-getitbox {
  margin-top: 3em;
}

.result-body {
  color: $asphalt;
  @media screen and (min-width: $screen-xl-min) {
    width: 80%;
  }
  .result-formats {
    padding-top: 1rem;
  }
}

.title-toolbar > .result-body {

  @media screen and (max-width: $screen-xs-max) {
    padding-top: 20px;
  }

  @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
    width: 85%;
  }

  @media screen and (min-width: $screen-lg-min) {
    width: 90%;
  }
}

.result-links {

  .save-record, #toolbar-menu {
    color: $violet;
  }

  // #16706 dont show loaded favorites in result list
  .savedLists.loaded {
    display: none;
  }

  // move favorites and other icons to the right
  text-align: right;

  @media screen and (min-width: $screen-xl-min) {
      width: 20%;
  }
}

.result:nth-of-type(2n) {
  background-color: transparent;
}

// ++ FACETTES, SIDEBAR

.sidebar {
  hyphens: auto; // avoid ugly linebreaks with overlong words
  // set colors for selected filters in sidebar
  .active-filters,
  .facet-group {
    .facet {
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      -ms-hyphens: auto;
      -o-hyphens: auto;
      hyphens: auto;
      word-break: break-all; // fallback for hyphens: auto (Chrome on Desktop and bug on Mozilla for capitalized words)

      &:hover {
        background-color: transparent;
      }

      &.all-filters {
        border-bottom: 2px solid $violet;
      }

      .date-fields {
        label {
          font-family: $font-family-monospace;
          font-weight: 700;
          text-transform: uppercase;
        }
      }

      .exclude {
        padding-left: 0;
      }

      .text{
        display: -webkit-inline-flex;
        display: -ms-inline-flexbox;
        display: -webkit-box;
        display: flex;
        -ms-word-break: break-word;
        word-break: break-word;

        & > span {
          display: inline-block;
        }
      }
    }

    .title {
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: -webkit-box;
      -ms-word-break: break-word;
      word-break: break-word;
    }
  }

  .active-filters {
    @include result-list-border($violet !important);
    margin-top: 1em;
    .facet {
      background-color: transparent;
      color: $violet;
    }
  }
  .btn-default {
    font-family: $font-family-monospace;
    font-weight: 700;
    text-transform: uppercase;
    &:hover {
      border-color: $iron;
    }
  }
  .facet-group {
    @include accordeon(false);
  }

  // MyResearch Sidebar Menu - START
  .myresearch-menu {
    border: 0;

    a {
      @include main-link;
      border: 3px solid $midnight-medium;
      color: $azure;
      display: flex;
      margin-bottom: 1rem;

      &:active,
      &:hover,
      &:focus {
        color: $azure;
      }
    }

    a:not(:last-of-type) {
      border-bottom: 3px solid $midnight-medium;
    }

    a:last-child {
      margin-bottom: 0;
    }

    a:hover {
      background-color: transparent;
      outline: none;
    }

    a.active {
      border: 3px solid $azure;
      background-color: transparent;
    }

    .icon {
      vertical-align: -5%;
      min-width: 30px;

      @media screen and (max-width: $screen-md-max) {
        font-size: inherit;
        font-weight: 400;
      }
    }

    .badge,
    a.active .badge {
      background-color: $asphalt;
      font-size: 0.82em;
      height: min-content;
      padding: 3px 7px;
    }

    .list-link {
      width: 100%;
    }

  }

  //// Offcanvas is used to widths of 767px ($screen-xs-max)
  // Sidebar Menu - END
}

.facet-loading-overlay-label{
  background-color:transparent;
  color:#fff;
  padding:1px .5rem;
}

@media only screen and (max-width: $screen-sm-max) {

  .offcanvas-right .sidebar {
    background: $white;
    height: 100%;
    position: fixed;
    overflow-y: auto;
    padding: 1rem;
    right: -80vw;
    top: 0;
    transition: left .5s, right .5s;
    width: 80vw;
  }

  .offcanvas.active.offcanvas-right .sidebar {
    right: 0;
  }
}

.exclude i {
  color: $black;

  &:hover,
  &:link,
  &:active,
  &:focus,
  &:visited {
    color: $black;
  }
}

// DATE-RANGE slider
.slider-container {
  margin-bottom: 1.5em;
  padding-right: ($content-l-r-padding / 2);

  .slider-handle,
  .slider-handle.round {
    border-radius: 100%;
  }

  .slider-track {
    background-color: $midnight-medium;
  }

  .slider-selection {
    background-color: $azure;
  }
}

// add thick border to date range inputs
#publishDateSortFilter {
  input.form-control {
    background-color: $white;
    @include result-list-border($black);
  }

  .btn-default {
    background-color: $amber;
    margin-top: $content-top-padding;
    min-width: 98px;
  }
}
// DATE-RANGE slider - END
// ++ FACETTES, SIDEBAR - END
// ++ SEARCH-RESULTS PAGE - END

// FIXME: Bitte verschieben: Vom Allgemeinen zum Spezifischen; Am Besten direkt unter "breadcrumbs", daran die Sonderformen anschließen: Startseite, Search Results, Record View ...

// ++ GENERAL CONTENT PAGE
.main {
  padding-bottom: 20px;
  padding-top: 20px;

  .container,
  .footer {
    background: transparent;
    max-width: 1284px;
    border: 0;
  }

  &.collapsing {
    height: 0;
    min-height: 0;
    transition: none !important;
  }

  .record  {
    .mainbody {
      padding-bottom: 2em;
      padding-right: 0;
      padding-top: 2em;
      width: 100%;

      @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
        padding-bottom: 4em;
      }

      @media screen and (min-width: $screen-lg-min) {
        padding-bottom: 4em;
        padding-right: 0;
        padding-top: 6em;
      }

      .media-body {
        overflow: visible;
        padding-bottom: 3em;

        @media screen and (max-width: $screen-xs-max) {
          padding-top: 3em;
        }

        @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
          padding-top: 6em;
        }
      }

      > a {
        font-family: $font-family-monospace;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        &:active,
        &:focus,
        &:hover {
          color: inherit;
          text-decoration: none;
        }
      }
    }

    .media {
      overflow: visible;
      padding-bottom: 2em;

      @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
        padding-bottom: 4em;
        padding-left: 0;
        padding-right: 0;
      }

      @media screen and (min-width: $screen-lg-min) {
        padding-bottom: 7em;
      }
    }

    .media-left {
      display: inline-block;
      padding-left: 15px;

      @media screen and (max-width: $screen-md-max) {
        position: absolute; /* FIXME: better solution to switch order between div title elements ? */
      }

      @media screen and (min-width: $screen-md-min) and (max-width: $screen-lg-min) {
        position: absolute;
        padding-top: em(20px);
      }

      @media screen and (min-width: $screen-lg-min) {
        display: table-cell;
      }
    }

    .media-right-details {
      @media screen and (min-width: $screen-md-min) and (max-width: $screen-lg-min) {
        position: relative;
        top: -6em;
      }
    }

    .record-tabs {
      @media screen and (max-width: $screen-md-max) {
        padding-left: 0;
      }
    }
  }

  .record div[id^="side-panel-"] {
    margin-left: 15px;
    margin-right: 15px;
    @media screen and (min-width: $screen-lg-min) {
      width: 68%;
    }
  }

  @media screen and (min-width: $screen-lg-min) {
    background-image: url('../images/background-shape-left.svg'),
    url('../images/background-shape-right.svg');
    background-position: center left,
    bottom right;
    background-repeat: no-repeat;
  }

  .licenses > li > a::before {
    content: '\e913';
    font-family: icomoon, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    padding-right: 5px;
  }

  .dbis_content {
    ul > li {
      list-style: none;
      span {
        padding-right: 0.5em;
      }
    }

    span[class^="dbis-list-accessinfo-access_"]::after {
      content: '\e913';
      font-family: icomoon, sans-serif;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
      line-height: 1;
      padding-left: 10px;
    }
  }

  .dbis_description {
    @include accordeon(false);
    p {
      margin: 1em;
    }
    .title {
      -webkit-appearance: button;
      background-color: transparent;
      border: 0;
      border-right-width: 1px;
      color: $azure;
      display: block;
      font-family: $font-family-monospace;
      font-weight: 700;
      line-height: 1.5rem;
      padding: .75em 1em;
      text-align: inherit;
      text-transform: uppercase;
      width: 100%;
      &::after {
        float: right;
      }
    }
  }

  .container {
    border: 0;

    @media screen and (min-width: $screen-lg-min) {
      min-width: $main-content-container-min-width-lg;
      .mainbody {
        padding-right: 80px;
      }
    }

    @media screen and (min-width: $screen-xl-min) {
      max-width: $main-content-container-max-width-xl;
      width: 70%;
    }

    .mainbody {
      @media screen and (max-width: $screen-xs-max) {
        width: 100%;
      }
    }
  }
}
// ++ GENERAL CONTENT PAGE - END

// ++ DETAILS/RECORD VIEW PAGE
// FIXME: Table definitions bitte in den ganz allgemeinen Teil, wo auf Forms usw. definiert werden, Schachtelung weitgehend unnötig
.table {
  border: 0;
  & tr {
    border-bottom: 3px solid $midnight-medium;
    @media screen and (min-width: $screen-lg-min) {
      &:first-of-type {
        border-top: 3px solid $midnight-medium;
      }
    }
  }
  & > tbody {
    & > tr {
      & > td {
        color: $asphalt;
      }
      & > th, & > td {
        font-weight: normal;
        padding: 20px;
      }
      &:nth-of-type(2n+1) {
        background-color: transparent;
      }
    }
  }
}
.tab-content {
  border: 0;

  & > .active {
    background-color: transparent;
  }

  // FIXME: Bitte als Sonderfall unter Table definieren , also
  // FIXME: .table {
  // FIXME:    .tab-pane & {
  // FIXME:      color: $black; usw.
  .tab-pane {
    a {
      color: $black;
    }

    .table {
      tr {
        border-bottom: 2px solid $midnight-medium;

        @media screen and (min-width: $screen-lg-min) {
          &:first-of-type {
            border-top: 0;
          }
        }
        color: $black;
        & > th, & > td {
          padding: 4px;
        }
      }
    }
  }
}

.toolbar-menu {
  position: relative;

  .dropdown-menu {
    margin-left: -140px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

.title-toolbar {
  @media screen and (max-width: $screen-xs-max) {
    display: flex;
    flex-direction: column-reverse;
  }

  & > .toolbar-details {
    padding-top: 12px;

    @media screen and (max-width: $screen-xs-max) {
      display: inline-flex;
      flex-direction: row-reverse;
      position: relative;
      top: -2.5em;
    }

    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      display: inline-flex;
      flex-direction: row-reverse;
      position: absolute;
      top: em(-100px);
      width: 15%;
    }

    @media screen and (min-width: $screen-lg-min) {
      width: 10%;
    }

    // FIXME: SCHACHTELUNG NOETIG?
    & > .toolbar-menu {
      display: inline;
      @media screen and (min-width: $screen-lg-min) {
        display: block;
        padding-top: em(20px);
      }
    }
  }

  .favorite {
    display: inline-block;
    padding-left: 1em;
  }
}

// FIXME: Bitte nach oben in den allgemeinen Teil bei UL als Sonderfall definieren
.worldcat .openurls {
  ul {
    padding-left: 1em;
  }
}

// FIXME: IST DER div NOETIG?
div[id^="side-panel-"] {
  @include accordeon(false);
}

// FIXME: IST DER div NOETIG?
div[id^="get-it-links"] {
  @include accordeon('get-it');
}

// FIXME: IST DER div NOETIG?
div[class$="-tab"] {

  .media-body {
    display: inline;

    strong {
      color: $asphalt;
    }
  }
}

.record-tabs.detailview-box-yellow {
  padding-left: 0;
}

.container .sidebar.right.record {
  padding-left: 0;
}

.getitbox {
  @media screen and (min-width: $screen-lg-min) {
    position: absolute;
  }
  .getitbox-getit {
    background-color: $midnight;
    margin-bottom: 2em;
    padding: 12px;

    @media screen and (max-width: $screen-xs-max) {
      margin-top: 2em;
    }

    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
      margin-top: 5em;
    }

    button:focus {
      outline: none;
    }
    h4 {
      color: $white;
    }
  }
  .getitbox-notices {
    @include result-list-border($midnight-medium);
    padding: 12px;
    word-break: break-word;
  }
  #side-collapse-links-data {
    margin-left: $get-it-link-offset-left;
    padding: 12px;
    a {
      color: $white;
      display: inline-flex;
      word-break: break-word;
      word-wrap: break-word;
      &:active,
      &:focus,
      &:hover {
        color: $white;
        text-decoration: none;
      }
    }
    .icon {
      display: inline;
      margin-left: -$get-it-link-offset-left;
      padding-right: 5px;
      padding-top: 3px;
      vertical-align: unset;

      @media screen and (max-width: $screen-md-max) {
        font-size: $font-size-base;
      }
    }
  }

  .pda-button {
    background: transparent;
    border-radius: 2px;
    font-family: $font-family-monospace;
    letter-spacing: 1.5px;
    padding-left: 8px;
    padding-right: 8px;
    text-transform: uppercase;
    white-space: normal;
    width: 99%;
    &.part-order {
      border: 3px solid $white;
      color: $white;
    }
    &.full-order {
      border: 3px solid $amber;
      color: $amber;
      margin-bottom: 2em;
      & + .pda-part-text {
        margin-top: -2em;
      }
    }
    &:hover,
    &:focus {
      background: transparent;
    }
  }
  .pda-part-text {
    color: $white;
    font-size: smaller;
    margin-bottom: 2em;
    text-align: center;
    width: 100%;
  }

  #get-it-links-amber {
    @include result-list-border($amber);
    border-radius: 2px;

    button {
      background-color: $amber;
      color: $midnight;
      letter-spacing: 2px;
      padding-left: $get-it-button-offset-left;
      word-break: break-word;
    }
  }
  #get-it-links-azure {
    @include result-list-border($azure);

    button {
      background-color: $azure;
      border-radius: 2px;
      color: $white;
      letter-spacing: 2px;
      padding-left: $get-it-button-offset-left;
      word-break: break-word;
    }
  }
}

.record #side-collapse-Details {
  word-break: break-word;
  th {
    min-width: 170px;
    text-align: left;
  }
}
// ++ DETAILS/RECORD VIEW - END

// ++ ADVANCED SEARCH
// ++ ADVANCED SEARCH - END

//
// Pagination (multiple pages)
// --------------------------------------------------
// FIXME: KOMPLEXITÄT NOETIG?
.pagination {
  display: flex;
  font-family: $font-family-monospace;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;

  > li {
    display: inline; // Remove list-style and block-level defaults

    > a,
    > span {
      border: 0;
      color: $black;
      float: left; // Collapse white-space
      text-decoration: none;

      &:hover,
      &:focus {
        background: transparent;
        color: inherit;
        z-index: 2;
      }
    }
  }

  > .active > a,
  > .active > span {
    &,
    &:hover,
    &:focus {
      background-color: transparent;
      border: 0;
      color: $black;
      cursor: default;
      //margin-top: 22px;
      z-index: 3;
    }
  }

  > .last > a {
    //margin-top: 22px;
  }

  > .disabled {
    > span,
    > span:hover,
    > span:focus,
    > a,
    > a:hover,
    > a:focus {

    }
  }

  .page-curr {
    margin-top: 25px;
  }

  .page-next {
    display: flex;
    flex-direction: row-reverse;

    .icon {
      font-size: 30px;
    }

    > a {
      margin-top: 15px;
    }
  }

  .page-prev {
    margin-top: 10px;

    .icon {
      font-size: 40px;
    }
  }
}
// Pagination (multiple pages) - END
// PAGE ELEMENTS (Top --> Down) - END

// +++++ Home Page - START
.home.container {
  margin-bottom: 100px;
  margin-top: 0;

  @media screen and (min-width: $screen-md-min) {
    margin-top: 100px;
  }

  h1, h3 {
    color: $azure;
    @media screen and (max-width: $screen-xs-max) {
      font-size: 26px;
      letter-spacing: 1.7px;
      line-height: 50px;
      padding-bottom: 10px;
    }

    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      letter-spacing: 1.7px;
      line-height: 50px;
      padding-bottom: 10px;
    }
  }

  h1 {
    @media screen and (max-width: $screen-sm-max) {
      font-size: $font-size-menu-sm;
    }
  }

  h3 {
    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      font-size: 34px;
    }
    line-height: 34px;
  }

  .black {
    color: $black;
  }

  .blog {
    a {
      font-family: $font-family-sans-serif;
      font-size: $font-size-large;
      text-decoration: underline;
    }
    h2 {
      font-size: $font-size-menu-lg;
      line-height: 50px;
      padding-bottom: 30px;
      @media screen and (max-width: $screen-md-max) {
        font-size: 30px;
      }
    }
  }

  .box {
    border: 8px solid $seafoam;
    box-sizing: border-box;
    margin-top: 30px;
    padding: 30px;
  }

  .circle-outline {
    background: $white;
    border: 8px solid $azure;
    border-radius: 50%;
    color: $azure;
    display: table-cell;
    height: 75px;
    text-align: center;
    vertical-align: middle;
    width: 75px;
  }

  .databases, .new-items {
    a {
      font-family: $font-family-monospace;
      letter-spacing: 2px;
      i {
        font-size: 25px;
      }
      span {
        // font-family: $font-family-monospace;
        font-size: $font-size-base;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
      }
    }
    span {
      font-size: $font-size-base;
    }
    &.box {
      margin-bottom: 43px;
      margin-left: 40px;
      @media screen and (max-width: $screen-sm-max) {
        margin-left: 0;
        margin-top: 70px;
      }
    }
  }

  .info {
    font-family: $font-family-sans-serif;
    font-size: $font-size-large;
    line-height: 45px;
    @media screen and (max-width: $screen-sm-max) {
      font-size: $font-size-base;
      margin-top: 50px;
    }
  }

  .services {
    h3 {
      font-size: 30px;
      line-height: 30px;
      margin-left: $home-services-sub-headline-offset;
      .icon-check-circle {
        margin-left: calc(-#{$home-services-sub-headline-offset});
      }
      @media screen and (max-width: $screen-md-max) {
        font-size: 26px;
        letter-spacing: normal;
      }
    }

    @media screen and (min-width: $screen-md-max) {
      padding-left: 80px;
    }

    .icon-check-circle {
      font-size: 30px;
      @media screen and (max-width: $screen-md-max) {
        font-size: 26px;
      }
    }

    > div {
      margin-top: 40px;
      @media screen and (max-width: $screen-sm-max) {
        margin-bottom: 60px;
      }
    }
    .item {
      color: $asphalt;
      font-family: $font-family-sans-serif;
      line-height: 34px;
      margin-left: $home-services-sub-headline-offset;
      margin-top: 25px;
      @media screen and (max-width: $screen-sm-max) {
        font-size: 20px;
        margin-right: 50px;
        margin-top: 0;
      }
    }
    .headline {
      margin-left: 20px;
      @media screen and (max-width: $screen-sm-max) {
        margin-left: 13px;
        margin-top: 2px;
      }
    }
  }

  .no-padding-l {
    padding-left: 0;
  }

  .no-padding-sm-l {
    @media screen and (max-width: $screen-sm-max) {
      padding-left: 0;
    }
  }

  .no-padding-r {
    padding-right: 0;
  }

  .no-padding-sm-r {
    @media screen and (max-width: $screen-sm-max) {
      padding-right: 0;
    }
  }
}
// +++++ Home Page - END

// +++++ Footer - START
// styling follows mobile first principles

/* #16385 display sidebar / sidefacets for sm like xs */
.mainbody {
  @media (min-width:$screen-sm-min) and (max-width:$screen-sm-max) {
    width: 100%;
  }
}

.offcanvas.active.offcanvas-right {
  @media (min-width:$screen-sm-min) and (max-width:$screen-sm-max) {
    margin-left: -80vw;
    margin-right: 80vw;
  }
}

.offcanvas .close-offcanvas {
  @media (min-width:$screen-sm-min) and (max-width:$screen-sm-max) {
    display: block;
  }
}
/* #16385 display sidebar / sidefacets for sm like xs - END */

.main footer,
footer {
  // general footer styles
  all: inherit;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('../images/footer-dummy-background.png');
  color: $white;

  a:hover,
  a:link,
  a:active,
  a:focus,
  a:visited {
    color: $white;
  }

  #footer-links {
    font-family: $font-family-monospace;
    font-size: em(18px);
    font-weight: 700;
    letter-spacing: em(2px);
    line-height: em(42px);
    text-transform: uppercase;
  }

  #footer-links ul {
    list-style: none;
    padding-left: 0;
  }

  #footer-contact-wrapper {
    background-color: $azure;
    color: $white;
  }

  #footer-contact div:first-child {
    font-family: $font-family-monospace;
    font-size: em(20px);
    font-weight: 700;
    letter-spacing: em(0.8px);
    line-height: em(20px);
  }

  #footer-contact div:nth-child(2) {
    font-family: $font-family-sans-serif;
    font-size: em(18px);
    line-height: em(33px);
  }

  #footer-contact .form {
    color: $white;
    font-family: $font-family-sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: none;

    .icon {
      font-size: em(20px);
      min-width: 25px;
    }
  }

  .footer-indent {
    color: $white;
    margin: 40px 5px 25px;

    @media (max-width: $screen-sm-max) {
      padding-top: 10px;
    }
  }

  .logo-footer {
    height: 45px;
  }

  @media (min-width: $screen-sm-min) {

    .logo-footer.finc {
      margin-top: -3px;
    }

    .logo-footer.vufind {
      margin-top: 25px;
    }
  }

  #footer-logos {
    font-family: $font-family-sans-serif;
    font-size: em(14px);
    line-height: em(19px);
  }

  #footer-head {
    line-height: em(19px);
  }

  #footer-copyright {
    font-family: $font-family-sans-serif;
    font-size: em(16px);
    line-height: em(22px);
  }

  // Small devices Tablets (<768px)
  // FIXME: bei max-width wenn mgl. immer einen der vorgegebenen ...-max-Breakpoints nehmen
  @media (max-width: $screen-xs-max) {
    background-position-y: 60px;

    #footer-contact {
      margin-left: 20px;
      margin-right: 20px;
    }

    #footer-contact-wrapper {
      padding: 35px 15px 20px;
    }
  }

  // Small devices Tablets (≥768px) .col-sm-
  @media (min-width: $screen-sm-min) {
    background-size: calc(100%/2 + #{$container-sm}/4) 100%;

    #footer-links {
      margin-top: 50px;
    }

    #footer-contact-wrapper {
      margin-right: 25px;
      margin-top: 50px;
      padding: 35px;
    }
  }

  // Medium devices Desktops (≥992px) .col-md-
  @media (min-width: $screen-md-min) {
    background-size: calc(100%/2 + #{$container-md}/4) 100%;
    #footer-links {
      font-size: em(24px);
      letter-spacing: em(1px);
      line-height: em(42px);
    }
    #footer-contact div:first-child {
      font-size: em(30px);
      font-weight: 700;
      line-height: em(34px);
    }
    #footer-contact-wrapper {
      margin-right: -15px;
    }
  }

  // Large devices Desktops (≥1200px) .col-lg-
  @media (min-width: $screen-lg-min) {
    background-size: calc(100%/2 + #{$container-lg}/4);
  }
}
// +++++ Footer - END

#user-update-form [name=job_title] + p {
  padding: 15px;
}

// Boss-Module
.boss-networknotice {
  @include result-list-border($black);
  padding: 12px;
}

#main-navigation {
  max-width: $max-designed-body-width;
}

// Contact / Feedback
.feedback-content .form-group {
  label[data-required="true"][for]::after {
    content: ' *';
  }
  textarea {
    min-height: em(200px);
  }
}

@import 'customForms';

#hierarchyTree .jstree-clicked {
  background-color: lighten($brand-primary,30%);
  padding-left: .5em;
  margin-left: -.5em;
}

.table-responsive {
  @media screen and (max-width: $screen-xs-max) {
    border: 0;
  }
}