/*
 * Additions to the legacy GWT Material styles (/app/css/*): what the GWT client set as inline styles
 * (not allowed by the CSP) and the widgets that were rendered by gwt-material JS.
 */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- header / nav (inline styles of MaterialNavBar) --- */
header { position: relative; z-index: 999; }
header nav { z-index: 999; }
nav .button-collapse { cursor: pointer; font-size: 2.7em; width: 64px; }
nav .button-collapse i { font-size: inherit; }
nav ul a, nav .locale-dropdown { cursor: pointer; }
nav .brand-logo div { width: 100%; height: 100%; }
nav.search-nav { position: absolute; top: 0; left: 0; right: 0; }
nav.search-nav .input-field { position: relative; height: 100%; margin: 0; }
nav.search-nav input[type=search] {
  height: 64px; margin: 0; border: 0; box-shadow: none; color: #444;
  font-size: 1.2rem; padding-left: 4rem; width: calc(100% - 8rem); box-sizing: content-box;
}
nav.search-nav label { position: absolute; left: 0; top: 0; transform: none; z-index: 1; }
nav.search-nav label i, nav.search-nav .search-close { color: #444; line-height: 64px; height: 64px; }
nav.search-nav label i { margin-left: 1rem; }
nav.search-nav .search-close { position: absolute; right: 1rem; top: 0; cursor: pointer; }
nav.search-nav .search-result {
  position: absolute; left: 0; right: 0; top: 64px; background: #fff; max-height: 70vh; overflow-y: auto;
}
nav.search-nav .search-result a {
  display: flex; align-items: center; height: 66px; line-height: 66px; padding: 0 1.5rem; color: #212121;
  font-size: 14px; font-weight: 500; border-bottom: 1px solid #eee;
}
nav.search-nav .search-result a i { color: #747473; margin-right: 3rem; height: 66px; line-height: 66px; }
nav.search-nav .search-result a:hover, nav.search-nav .search-result a.selected { background-color: #f5f5f5; }
@media only screen and (max-width: 600px) {
  nav.search-nav input[type=search], nav.search-nav label i, nav.search-nav .search-close { height: 56px; line-height: 56px; }
  nav.search-nav .search-result { top: 56px; }
}

/* --- side nav (right drawer) --- */
.side-nav.right-aligned { right: 0; left: auto; width: 280px; transform: translateX(105%); transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1); }
.side-nav.right-aligned.open { transform: translateX(0); }
.side-nav a { cursor: pointer; }
.side-nav li.divider { height: 1px; margin: 0; background-color: #e0e0e0; }
.sidenav-overlay {
  position: fixed; top: 0; left: 0; right: 0; height: 120vh; background-color: rgba(0, 0, 0, 0.5);
  z-index: 997; opacity: 0; transition: opacity 0.3s;
}
.sidenav-overlay.open { opacity: 1; }
@media only screen and (min-width: 993px) {
  .side-nav.right-aligned, .sidenav-overlay { display: none; }
}

/* --- dropdowns (MaterialDropDown) --- */
.dropdown-content { min-width: 100px; max-height: 70vh; overflow-y: auto; z-index: 1000; }
.dropdown-content.open { display: block; opacity: 1; }
/* opened menus are moved to <body>; they must be above the header (z-index 999) and the side nav */
/* (materialize sets 995 on .dropdown-content with a more specific selector) */
body > ul.dropdown-content.open { z-index: 1003 !important; }
.dropdown-content li > a, .dropdown-content li > span { white-space: nowrap; }
#services-list ~ .dropdown-content li > a, body > .dropdown-content li > a { color: #e63357; }
.galery .dropdown-content li > a, #galery-tabs-more li > a { color: #747473; }

/* --- tooltips (MaterialTooltip) --- */
.material-tooltip { pointer-events: none; z-index: 2000; max-width: 400px; }
.material-tooltip .backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 2px; transform: none; opacity: 1;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.35), 0 2px 10px 0 rgba(0, 0, 0, 0.2); }
.material-tooltip span { position: relative; z-index: 1; font-weight: 500; }
.material-tooltip.open { display: block; visibility: visible; opacity: 1; }

/* --- waves (Materialize Waves) --- */
.waves-effect { position: relative; overflow: hidden; }
.waves-ripple {
  position: absolute; border-radius: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  opacity: 0; background: rgba(0, 0, 0, 0.2); pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease-out; transform: scale(0);
}
.waves-light .waves-ripple { background-color: rgba(255, 255, 255, 0.45); }

/* --- sections --- */
#main, .content.main-screen { height: calc(100vh - 64px - 84px); }
@media only screen and (max-width: 601px) { #main { height: calc(100vh - 56px - 84px); } }
#services .services-title h1 { margin-bottom: 0.5rem; }
#services-list a.service { cursor: pointer; }
.light-title { font-weight: 300; }
#catalog .light-title { margin-top: 0; }
.scroll-panel > a { cursor: pointer; user-select: none; }
/* references autoscroll: sub-pixel part of the position (see pycha.js), no transition (legacy .scroll-panel a
   has transition: 0.4s, which would make the movement lag and stutter) */
#references-panel .scroll-panel-container > a {
  transform: translate3d(var(--ref-shift, 0px), 0, 0); transition: none; will-change: transform;
}

/* scrollfire: sections fade in when they come into view (MaterialScrollfire + animate.css FADEIN 800 ms) */
.js .scrollfire { visibility: hidden; }
.js .scrollfire.animated { visibility: visible; animation-duration: 800ms; }

/* --- gallery --- */
.galery .scroll-panel { position: relative; }
.galery .scroll-panel .tabs { overflow-x: auto; overflow-y: hidden; }
.galery .scroll-panel .tabs-more {
  position: absolute; right: 0; top: 0; height: 36px; width: 36px; justify-content: center; color: #747473;
  background-color: #f0f0f0; border-left: 1px solid #747473; z-index: 1;
}
.galery .scroll-panel.all-tabs-fit .tabs-more { display: none; }
.galery .scroll-panel.all-tabs-fit .tabs.scroll-panel-container { width: 100%; }
.galery .scroll-panel .tabs-more:hover { color: whitesmoke; background-color: #747473; }
.galery .scroll-panel .tabs-more i.material-icons { font-size: 2rem; }
.galery .tabs .tab a { cursor: pointer; }
.galery .tabs .tab a.active { color: whitesmoke; background-color: #747473; }
.galery .dropdown-content li > a > i { margin: 0; width: 0; }
.galery .empty-state.galery-empty { position: relative; min-height: 300px; }
.galery .empty-state.galery-empty i.large { margin-top: 60px; }
.galery .col-sizer { width: 8.3333%; }
.galery .masonry.js-masonry { position: relative; }
.galery .masonry.js-masonry > .galery-card { position: absolute; margin-left: 0; transition: top 0.4s, left 0.4s; }
.galery .masonry .col-sizer { display: none; }
.galery .cards { transition: none; }
.galery .cards.fade-out { animation: fadeOut 400ms both; }
.galery .cards.fade-in { animation: fadeIn 800ms both; }
.galery a { display: block; }
.galery .image { position: relative; cursor: zoom-in; }
.galery .image .card-title { margin: 0; }
.galery .scroll-panel .tabs.scroll-panel-container { width: calc(100% - 36px); }
.galery .card.current-folder .close .close-link { color: whitesmoke; text-align: center; width: 100%; display: block; }
.galery .card .card-image img.activator { display: block; width: 100%; }

/* --- lightbox (Materialize materialbox) --- */
#lightbox-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #292929; z-index: 1000;
  opacity: 0; transition: opacity 0.4s;
}
#lightbox-overlay.open { opacity: 1; }
.lightbox-image {
  position: fixed; z-index: 1001; cursor: zoom-out; box-shadow: none;
  transition: top 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), left 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
    width 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), height 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lightbox-caption {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002; color: #fff; text-align: center;
  padding: 0 15%; height: 50px; line-height: 50px; opacity: 0; transition: opacity 0.4s;
  text-shadow: 0 0 10px black;
}
.lightbox-caption.open { opacity: 1; }

/* --- map --- */
.map iframe { border: 0; width: 100%; height: 100%; display: block; }

/* --- footer (inline styles of the GWT footer) --- */
footer .footer-title { font-weight: 300; margin-top: 60px; }
footer .col > div > p { margin: 0; }
footer .footer-buttons { margin-top: 20px; }
footer .footer-action { margin-top: 20px; }
footer .material-label { display: block; }
footer .material-label .material-label, footer span.inline span { display: inline; }
footer .btn img.responsive-img { height: 20px; width: auto; }

/* --- scroll top --- */
.btn-floating.scrolltop { position: fixed; }
.scrolltop.hidden { visibility: hidden; }

/* --- other pages --- */
.page-section { padding: 2rem 0 4rem; min-height: calc(100vh - 64px - 300px); }
.page-section .error-icon { color: #e63357; margin-top: 2rem; }