infect-frontend
Version:
infect fronend
2,018 lines • 54.2 kB
CSS
[type='range'] {
-webkit-appearance: none;
margin: 5px 0;
width: 100%; }
[type='range']:focus {
outline: 0; }
[type='range']::-webkit-slider-runnable-track {
cursor: pointer;
height: 2px;
transition: all .2s ease;
width: 100%;
box-shadow: 0px 0px 0px black, 0 0 0px #0d0d0d;
background: #eceff1;
border: 0px solid #929292;
border-radius: 5px; }
[type='range']::-webkit-slider-thumb {
box-shadow: 0px 0px 0px black, 0 0 0px #0d0d0d;
background: #cbe162;
border: 0px solid #eceff1;
border-radius: 5px;
cursor: pointer;
height: 10px;
width: 10px;
-webkit-appearance: none;
margin-top: -4px; }
[type='range']::-moz-range-track {
cursor: pointer;
height: 2px;
transition: all .2s ease;
width: 100%;
box-shadow: 0px 0px 0px black, 0 0 0px #0d0d0d;
background: #eceff1;
border: 0px solid #929292;
border-radius: 5px; }
[type='range']::-moz-range-thumb {
box-shadow: 0px 0px 0px black, 0 0 0px #0d0d0d;
background: #cbe162;
border: 0px solid #eceff1;
border-radius: 5px;
cursor: pointer;
height: 10px;
width: 10px; }
[type='range']::-ms-track {
cursor: pointer;
height: 2px;
transition: all .2s ease;
width: 100%;
background: transparent;
border-color: transparent;
border-width: 5px 0;
color: transparent; }
[type='range']::-ms-fill-lower {
box-shadow: 0px 0px 0px black, 0 0 0px #0d0d0d;
background: #dde3e6;
border: 0px solid #929292;
border-radius: 10px; }
[type='range']::-ms-fill-upper {
box-shadow: 0px 0px 0px black, 0 0 0px #0d0d0d;
background: #eceff1;
border: 0px solid #929292;
border-radius: 10px; }
[type='range']::-ms-thumb {
box-shadow: 0px 0px 0px black, 0 0 0px #0d0d0d;
background: #cbe162;
border: 0px solid #eceff1;
border-radius: 5px;
cursor: pointer;
height: 10px;
width: 10px;
margin-top: 0; }
.introjs-overlay {
position: absolute;
box-sizing: content-box;
z-index: 999999;
background-color: #000;
opacity: 0;
background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(0, 0, 0, 0.9)));
background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
background: radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1)";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
.introjs-fixParent {
z-index: auto !important;
opacity: 1.0 !important;
/*-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;*/ }
.introjs-showElement,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
z-index: 9999999 !important; }
.introjs-disableInteraction {
z-index: 99999999 !important;
position: absolute;
background-color: white;
opacity: 0;
filter: alpha(opacity=0); }
.introjs-relativePosition,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
position: relative; }
.introjs-helperLayer {
box-sizing: content-box;
position: absolute;
z-index: 9999998;
background-color: #FFF;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #777;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 4px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
.introjs-tooltipReferenceLayer {
box-sizing: content-box;
position: absolute;
visibility: hidden;
z-index: 100000000;
background-color: transparent;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
.introjs-helperLayer *,
.introjs-helperLayer *:before,
.introjs-helperLayer *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box; }
.introjs-helperNumberLayer {
box-sizing: content-box;
position: absolute;
visibility: visible;
top: -16px;
left: -16px;
z-index: 9999999999 !important;
padding: 2px;
font-family: Arial, verdana, tahoma;
font-size: 13px;
font-weight: bold;
color: white;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
background: #ff3019;
/* Old browsers */
background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%);
/* Chrome10+,Safari5.1+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404));
/* Chrome,Safari4+ */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
/* FF3.6+ */
background: -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%);
/* IE10+ */
background: -o-linear-gradient(top, #ff3019 0%, #cf0404 100%);
/* Opera 11.10+ */
background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%);
/* W3C */
width: 20px;
height: 20px;
line-height: 20px;
border: 3px solid white;
border-radius: 50%;
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0)";
/* IE6-9 */
filter: "progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000)";
/* IE10 text shadows */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); }
.introjs-arrow {
border: 5px solid transparent;
content: '';
position: absolute; }
.introjs-arrow.top {
top: -10px;
border-bottom-color: white; }
.introjs-arrow.top-right {
top: -10px;
right: 10px;
border-bottom-color: white; }
.introjs-arrow.top-middle {
top: -10px;
left: 50%;
margin-left: -5px;
border-bottom-color: white; }
.introjs-arrow.right {
right: -10px;
top: 10px;
border-left-color: white; }
.introjs-arrow.right-bottom {
bottom: 10px;
right: -10px;
border-left-color: white; }
.introjs-arrow.bottom {
bottom: -10px;
border-top-color: white; }
.introjs-arrow.bottom-right {
bottom: -10px;
right: 10px;
border-top-color: white; }
.introjs-arrow.bottom-middle {
bottom: -10px;
left: 50%;
margin-left: -5px;
border-top-color: white; }
.introjs-arrow.left {
left: -10px;
top: 10px;
border-right-color: white; }
.introjs-arrow.left-bottom {
left: -10px;
bottom: 10px;
border-right-color: white; }
.introjs-tooltip {
box-sizing: content-box;
position: absolute;
visibility: visible;
padding: 10px;
background-color: white;
min-width: 200px;
max-width: 300px;
border-radius: 3px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
-webkit-transition: opacity 0.1s ease-out;
-moz-transition: opacity 0.1s ease-out;
-ms-transition: opacity 0.1s ease-out;
-o-transition: opacity 0.1s ease-out;
transition: opacity 0.1s ease-out; }
.introjs-tooltipbuttons {
text-align: right;
white-space: nowrap; }
/*
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
Changed by Afshin Mehrabani
*/
.introjs-button {
box-sizing: content-box;
position: relative;
overflow: visible;
display: inline-block;
padding: 0.3em 0.8em;
border: 1px solid #d4d4d4;
margin: 0;
text-decoration: none;
color: #333;
white-space: nowrap;
cursor: pointer;
outline: none;
/*background-color: #ececec;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
background-image: -o-linear-gradient(#f4f4f4, #ececec);
background-image: linear-gradient(#f4f4f4, #ececec);*/
-webkit-background-clip: padding;
-moz-background-clip: padding;
-o-background-clip: padding-box;
/*background-clip: padding-box;*/
/* commented out due to Opera 11.10 bug */
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
/* IE hacks */
zoom: 1;
*display: inline;
margin-top: 10px; }
.introjs-button:hover {
text-decoration: none; }
.introjs-button:focus,
.introjs-button:active {
/*background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4));
background-image: -moz-linear-gradient(#ececec, #f4f4f4);
background-image: -o-linear-gradient(#ececec, #f4f4f4);
background-image: linear-gradient(#ececec, #f4f4f4);*/ }
/* overrides extra padding on button elements in Firefox */
.introjs-button::-moz-focus-inner {
padding: 0;
border: 0; }
.introjs-skipbutton {
box-sizing: content-box;
margin-right: 5px;
color: #7a7a7a; }
.introjs-prevbutton {
-webkit-border-radius: 0.2em 0 0 0.2em;
-moz-border-radius: 0.2em 0 0 0.2em;
border-radius: 0.2em 0 0 0.2em;
border-right: none; }
.introjs-prevbutton.introjs-fullbutton {
border: 1px solid #d4d4d4;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em; }
.introjs-nextbutton {
-webkit-border-radius: 0 0.2em 0.2em 0;
-moz-border-radius: 0 0.2em 0.2em 0;
border-radius: 0 0.2em 0.2em 0; }
.introjs-nextbutton.introjs-fullbutton {
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em; }
.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
color: #9a9a9a;
border-color: #d4d4d4;
box-shadow: none;
cursor: default;
background-color: #f4f4f4;
background-image: none;
text-decoration: none; }
.introjs-hidden {
display: none; }
.introjs-bullets {
text-align: center; }
.introjs-bullets ul {
box-sizing: content-box;
clear: both;
margin: 15px auto 0;
padding: 0;
display: inline-block; }
.introjs-bullets ul li {
box-sizing: content-box;
list-style: none;
float: left;
margin: 0 2px; }
.introjs-bullets ul li a {
box-sizing: content-box;
display: block;
width: 6px;
height: 6px;
background: #ccc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-decoration: none;
cursor: pointer; }
.introjs-bullets ul li a:hover {
background: #999; }
.introjs-bullets ul li a.active {
background: #999; }
.introjs-progress {
box-sizing: content-box;
overflow: hidden;
height: 10px;
margin: 10px 0 5px 0;
border-radius: 4px;
background-color: #ecf0f1; }
.introjs-progressbar {
box-sizing: content-box;
float: left;
width: 0%;
height: 100%;
font-size: 10px;
line-height: 10px;
text-align: center;
background-color: #08c; }
.introjsFloatingElement {
position: absolute;
height: 0;
width: 0;
left: 50%;
top: 50%; }
.introjs-fixedTooltip {
position: fixed; }
.introjs-hint {
box-sizing: content-box;
position: absolute;
background: transparent;
width: 20px;
height: 15px;
cursor: pointer; }
.introjs-hint:focus {
border: 0;
outline: 0; }
.introjs-hidehint {
display: none; }
.introjs-fixedhint {
position: fixed; }
.introjs-hint:hover > .introjs-hint-pulse {
border: 5px solid rgba(60, 60, 60, 0.57); }
.introjs-hint-pulse {
box-sizing: content-box;
width: 10px;
height: 10px;
border: 5px solid rgba(60, 60, 60, 0.27);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: rgba(136, 136, 136, 0.24);
z-index: 10;
position: absolute;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out; }
.introjs-hint-no-anim .introjs-hint-dot {
-webkit-animation: none;
-moz-animation: none;
animation: none; }
.introjs-hint-dot {
box-sizing: content-box;
border: 10px solid rgba(146, 146, 146, 0.36);
background: transparent;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
height: 50px;
width: 50px;
-webkit-animation: introjspulse 3s ease-out;
-moz-animation: introjspulse 3s ease-out;
animation: introjspulse 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
top: -25px;
left: -25px;
z-index: 1;
opacity: 0; }
@-webkit-keyframes introjspulse {
0% {
-webkit-transform: scale(0);
opacity: 0.0; }
25% {
-webkit-transform: scale(0);
opacity: 0.1; }
50% {
-webkit-transform: scale(0.1);
opacity: 0.3; }
75% {
-webkit-transform: scale(0.5);
opacity: 0.5; }
100% {
-webkit-transform: scale(1);
opacity: 0.0; } }
@-moz-keyframes introjspulse {
0% {
-moz-transform: scale(0);
opacity: 0.0; }
25% {
-moz-transform: scale(0);
opacity: 0.1; }
50% {
-moz-transform: scale(0.1);
opacity: 0.3; }
75% {
-moz-transform: scale(0.5);
opacity: 0.5; }
100% {
-moz-transform: scale(1);
opacity: 0.0; } }
@keyframes introjspulse {
0% {
transform: scale(0);
opacity: 0.0; }
25% {
transform: scale(0);
opacity: 0.1; }
50% {
transform: scale(0.1);
opacity: 0.3; }
75% {
transform: scale(0.5);
opacity: 0.5; }
100% {
transform: scale(1);
opacity: 0.0; } }
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-ms-touch-action: none !important;
text-rendering: optimizeLegibility;
font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1"; }
body {
position: fixed;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
-webkit-overflow-scrolling: touch;
font-family: "acumin-pro", "Helvetica Neue", Arial;
line-height: 1.65;
color: #000;
background-color: #fff;
font-size: 18px; }
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit; }
input:active, input:focus,
button:active,
button:focus,
select:active,
select:focus,
textarea:active,
textarea:focus {
outline: none; }
button {
background: none;
cursor: pointer; }
a {
color: #BCD93A;
text-decoration: none; }
a:hover {
color: #D2E67A;
text-decoration: none;
outline: none; }
a:focus, a:active {
color: inherit;
text-decoration: none;
outline: none; }
::-webkit-scrollbar {
background-color: transparent;
width: 5px;
height: 5px; }
::-webkit-scrollbar-track-piece {
background-color: transparent; }
::-webkit-scrollbar-thumb {
background-color: rgba(153, 153, 153, 0.5);
border-radius: 10px; }
::-webkit-scrollbar-corner {
/* 6 */ }
::-webkit-resizer {
/* 7 */ }
address {
font-style: normal; }
.image {
display: block; }
.image--fluid {
width: 100%; }
.container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
height: 100%; }
.container__side-navigation {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 210px;
min-width: 210px; }
.container__main {
height: 100%;
width: calc(100vw - 210px); }
.main {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.main__header {
flex: auto;
border-bottom: solid 1px #d3d2cd; }
.main__disclaimer {
flex: auto; }
.main__matrix {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: auto;
height: 100%;
overflow: auto;
margin-top: 20px;
padding-left: 20px; }
.gray {
color: #a3a3a3 !important; }
.white {
color: #fff !important; }
.margin-top {
margin-top: 10px !important; }
.top-navigation {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
min-height: 70px; }
.top-navigation__active-filters,
.top-navigation selectedfiltersList {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.top-navigation__slider {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 250px;
min-height: inherit; }
.top-navigation__info {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0;
z-index: 400;
width: 50px;
padding-right: 20px; }
.top-navigation__info strong {
font-size: 13px;
color: black; }
.top-navigation .info {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center; }
.side-navigation {
z-index: 200;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #363636; }
.side-navigation__header {
background-color: #363636; }
.side-navigation__filters {
max-height: calc(100vh - 185px);
overflow-y: auto; }
.header__logo {
height: 70px; }
.logo {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: left;
-ms-flex-pack: left;
-webkit-justify-content: left;
-moz-justify-content: left;
justify-content: left;
padding-left: 20px;
align-items: center;
background-color: #616161; }
.logo a {
z-index: 5;
height: 50px; }
.logo a img {
height: 100%; }
.divider {
height: 1px;
border: 0;
border-top: 1px solid #575757; }
.divider--lead {
margin: 0; }
.slider {
font-size: 11pt;
text-align: center; }
.slider__range {
padding: 0; }
.slider__label {
margin: 0;
padding-top: 15px; }
.slider__container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
align-items: center; }
.slider__container__before {
margin-right: 5px; }
.slider__container__range {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.slider__container__after {
margin-left: 5px; }
.filters__menu {
margin-bottom: 10px; }
.filters__search {
position: relative; }
.filter:last-child {
padding-bottom: calc(100vh - (70px + 128px + 288px)); }
.groups {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: center; }
.group {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
padding: 0 20px;
color: #fff; }
.group h1 {
font-size: 15px;
margin: 0; }
.group h2 {
font-size: 13px;
margin: 0;
font-weight: normal; }
.group h3 {
font-size: 11px;
margin: 0; }
.group__list {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
-webkit-justify-content: space-evenly;
-moz-justify-content: space-evenly;
justify-content: space-evenly;
margin: 0;
padding: 0;
list-style-type: none; }
.group__list--vertical {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.group__list-item {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0;
margin-right: 5px; }
.group--vertical {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
.group--space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between; }
.group--left-aligned {
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
justify-content: flex-start; }
.group--lead {
padding-top: 20px;
height: 70px; }
.group--black-font {
color: #000; }
.group--padding {
padding-top: 20px;
padding-bottom: 20px; }
.list-item {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
.list-item--checkbox, .list-item--radio {
font-size: 11pt; }
.list-item:hover .label--rounded {
border-top-left-radius: 5px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 5px; }
.list-item:hover .button {
right: 0;
transition: right 100ms linear;
-webkit-transition: right 100ms linear;
-moz-transition: right 100ms linear; }
.label {
line-height: 1.3;
font-size: 14px;
margin: 0; }
.label--rounded {
padding: 3px 5px;
background-color: #d7d5c4;
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
z-index: 2; }
.label--small {
font-size: 12px; }
.label--smaller {
font-size: 10px; }
.label--large {
font-size: 16px; }
.label--larger {
font-size: 18px; }
.label--bold {
font-weight: bold; }
.label--thin {
font-weight: 300; }
.label--nomargin {
margin: 0; }
.label--gray {
color: #787677; }
.input {
margin: 5px 0 10px 0;
padding: 5px; }
.list-item--checkbox, .list-item--radio {
margin-left: 20px; }
.list-item--checkbox input[type="checkbox"],
.list-item--checkbox input[type="radio"],
.list-item--radio input[type="checkbox"],
.list-item--radio input[type="radio"] {
display: none; }
.list-item--checkbox .side-label,
.list-item--radio .side-label {
position: relative;
cursor: pointer;
color: #fff;
transition: color 100ms linear;
-webkit-transition: color 100ms linear;
-moz-transition: color 100ms linear; }
.list-item--checkbox .side-label::before, .list-item--checkbox .side-label::after,
.list-item--radio .side-label::before,
.list-item--radio .side-label::after {
content: '';
position: absolute;
top: 6px;
left: -20px; }
.list-item--checkbox .side-label::before {
display: block;
width: 10px;
height: 10px;
border: 1px solid;
border-color: #fff;
transition: border-color 100ms linear;
-webkit-transition: border-color 100ms linear;
-moz-transition: border-color 100ms linear; }
.list-item--checkbox .side-label::after {
width: 6px;
height: 6px;
margin: 3px;
background-color: none;
transition: background-color 100ms linear;
-webkit-transition: background-color 100ms linear;
-moz-transition: background-color 100ms linear; }
.list-item--checkbox input:checked + .side-label::after {
background-color: #cbe264; }
.list-item--checkbox input:hover + .side-label, .list-item--checkbox input:hover + .side-label::before, .list-item--checkbox input:checked + .side-label, .list-item--checkbox input:checked + .side-label::before {
color: #cbe264;
border-color: #cbe264; }
.list-item--radio .side-label::after {
top: 4px;
width: 12px;
height: 12px;
border: 1px solid;
border-color: #fff;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear; }
.list-item--radio .side-label::before {
z-index: 2;
top: 4px;
width: 6px;
height: 6px;
margin: 4px;
background-color: #363636;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: background-color 100ms linear;
-webkit-transition: background-color 100ms linear;
-moz-transition: background-color 100ms linear; }
.list-item--radio input:checked + .side-label::after {
background-color: #cbe264; }
.list-item--radio input:checked + .side-label::before {
background-color: #363636; }
.list-item--radio input:hover + .side-label, .list-item--radio input:hover + .side-label::after, .list-item--radio input:checked + .side-label, .list-item--radio input:checked + .side-label::after {
color: #cbe264;
border-color: #cbe264; }
.button {
border: none;
color: #000;
font-weight: 600; }
.button span {
position: relative;
top: -2px; }
.button--label {
position: relative;
min-height: 38px;
margin: 0;
padding: 0 20px;
background-color: #c5c3b2;
font-weight: bold;
border-top-left-radius: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 0; }
@media (pointer: fine) {
.button--label {
padding: 0 8px; } }
.button--label:hover {
background-color: #d60000;
color: #fff; }
@media only screen and (hover-interaction: hover) {
.button--label {
padding: 0 10px !important; } }
.button--clearall {
height: 38px;
background-color: #c5c3b2;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
width: 38px;
font-weight: bold; }
.button--clearall:hover {
background-color: #d60000;
color: #fff; }
.button--info {
position: relative;
transition: background-color color 100ms linear;
-webkit-transition: background-color color 100ms linear;
-moz-transition: background-color color 100ms linear;
background-color: #363636;
color: #fff;
width: 36px;
height: 36px;
font-weight: bold;
border-radius: 18px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px; }
.button--info:hover {
background-color: #616161; }
.button--info-active {
background-color: white;
color: black; }
.button--info-active:hover {
background-color: lightgrey; }
.button--guide {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px 15px;
color: #fff;
background-color: #578ffa;
transition: background-color 100ms linear;
-webkit-transition: background-color 100ms linear;
-moz-transition: background-color 100ms linear; }
.button--guide:hover {
background-color: #4e79c7; }
.button--icon--active:after {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: -10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #cbe264; }
.button--icon {
position: relative;
width: 26px;
height: 26px;
background-repeat: no-repeat;
background-position: center;
margin-right: 10px;
padding: 0; }
.button--icon svg {
fill: white;
height: inherit;
width: inherit;
transition: fill 100ms linear;
-webkit-transition: fill 100ms linear;
-moz-transition: fill 100ms linear; }
.button--icon svg:hover {
fill: #cbe264; }
.button--icon--active svg {
fill: #cbe264; }
.button--icon--active:after {
left: 7px; }
.button--icon--population {
width: 22px; }
.button--icon--population:after {
left: 5px; }
.button--icon--bacteria {
width: 30px; }
.button--icon--bacteria:after {
left: 9px; }
.select {
width: 170px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(/dist/img/arrow_dropdown.png) no-repeat 95% center;
transition: background 100ms linear;
-webkit-transition: background 100ms linear;
-moz-transition: background 100ms linear;
margin: 3px 0;
padding: 2px 9px;
border: 1px solid #fff;
transition: border 100ms linear;
-webkit-transition: border 100ms linear;
-moz-transition: border 100ms linear;
border-radius: 3px;
color: #fff;
transition: color 100ms linear;
-webkit-transition: color 100ms linear;
-moz-transition: color 100ms linear;
font-size: 13px; }
.select option {
color: #fff !important;
background-color: #363636; }
.select option:hover {
color: #cbe264; }
.select:hover {
border: 1px solid #cbe264;
color: #cbe264;
background: url(/dist/img/arrow_dropdown_green.png) no-repeat 95% center; }
.select::-ms-expand {
display: none;
/* hide the default arrow in ie10 and ie11 */ }
matrix,
matrixheader {
display: block; }
.resistanceMatrix {
/*
* Only display transitions and custom visibility style when and after the first
* filter is set
*/
/**
* Resistance Detail (Hover)
*/ }
.resistanceMatrix .-with-transitions {
/**
* General modifers used for antibiotics, bacteria, substanceClasses and resistances
* (animations/transition)
*/ }
.resistanceMatrix .-with-transitions .-was-visible-is-visible {
transition: transform calc(1 * 0.3s) ease-in-out 0.2s; }
.resistanceMatrix .-with-transitions .-was-hidden-is-visible {
transition: opacity calc(1 * 0.2s) ease-in-out calc(1 * 0.3s); }
.resistanceMatrix .-with-transitions .-was-visible-is-hidden {
transition: opacity calc(1 * 0.2s) ease-in-out; }
.resistanceMatrix .-with-transitions .-was-hidden-is-hidden,
.resistanceMatrix .-with-transitions .-was-visible-is-hidden {
opacity: 0;
pointer-events: none; }
.resistanceMatrix__overlay {
position: fixed;
width: 100%;
height: 100%;
top: 70px;
left: 210px;
background-color: #616161;
transition: opacity 100ms linear;
-webkit-transition: opacity 100ms linear;
-moz-transition: opacity 100ms linear;
opacity: 0;
z-index: -1;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center; }
.resistanceMatrix__overlay img {
margin: 0 calc(50% - 150px);
width: 150px;
pointer-events: none; }
.resistanceMatrix__overlay--active {
opacity: 0.8;
z-index: 200; }
.resistanceMatrix__body, .resistanceMatrix__header {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
max-width: 2200px;
/* or circles are too large */
min-width: 1500px;
/* or circles are smaller than the font */
width: 100%;
font-size: 11pt;
font-family: "acumin-pro-condensed"; }
.resistanceMatrix__body {
position: relative; }
.resistanceMatrix__header {
z-index: 100;
position: fixed; }
.resistanceMatrix__bacteriumLabelText {
text-anchor: end;
font-style: italic; }
.resistanceMatrix__resistance {
cursor: none; }
.resistanceMatrix__antibioticLabelText, .resistanceMatrix__bacteriumLabelText {
transition: fill 0.2s; }
.resistanceMatrix__antibioticLabelText.highlight, .resistanceMatrix__bacteriumLabelText.highlight {
text-decoration: underline; }
.resistanceMatrix__substanceClassLabel {
cursor: pointer; }
.resistanceMatrix__substanceClassLabel:hover text {
fill: #fff; }
.resistanceMatrix__substanceClassLabel:hover rect {
fill: #363636; }
.resistanceMatrix__resistanceDetail {
transition: transform 0.2s;
pointer-events: none; }
.resistanceMatrix__resistanceDetailValueText {
font-size: 18pt; }
.resistanceMatrix__resistanceDetailValuePercentSign {
font-size: 11pt; }
.resistanceMatrix__resistanceDetailCircleShadow {
fill: #000;
opacity: 0.4; }
.overlay {
position: fixed;
display: none;
right: 0;
bottom: 0;
top: 0;
left: 0;
z-index: -1;
overflow: auto;
background-color: #616161;
opacity: 0;
transition: opacity 100ms linear;
-webkit-transition: opacity 100ms linear;
-moz-transition: opacity 100ms linear; }
.overlay--open {
z-index: 300;
opacity: 1;
display: block; }
.overlay__menu {
display: none; }
@media only screen and (min-width: 800px) {
.overlay__menu {
display: block;
position: fixed;
right: 35px;
top: 100px;
z-index: 200; } }
.overlay__menu .menu {
list-style: none; }
.overlay__menu .menu-item {
padding: 5px 0;
text-align: right; }
.overlay__menu .menu-item a {
position: relative;
color: white; }
.overlay__menu .menu-item a:hover, .overlay__menu .menu-item a:active {
transition: font-weight 100ms linear;
-webkit-transition: font-weight 100ms linear;
-moz-transition: font-weight 100ms linear;
font-weight: 600; }
.overlay__container {
position: relative;
width: 80%;
max-width: 600px;
padding: 70px 0 200px 0;
margin: auto;
color: white; }
@media only screen and (min-width: 800px) {
.overlay__container {
width: 40%; } }
.overlay h1 {
margin-top: 1.3em; }
.overlay__paragraph--footnote {
font-size: 0.8em; }
.overlay .adresses {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between; }
.overlay .adresses address {
-webkit-flex-basis: 40%;
-moz-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
margin-bottom: 5%; }
.overlay .image--fullwidth {
display: block;
width: 100%; }
.overlay .guide {
margin: 40px 0;
font-weight: 600; }
.overlay__image-wrapper {
background-color: #fff; }
.overlay__image-wrapper--step1 {
padding: 20px 40px; }
@media only screen and (min-width: 480px) {
.overlay__image-wrapper--step1 {
padding: 40px 80px; } }
@media only screen and (min-width: 736px) {
.overlay__image-wrapper--step1 {
padding: 60px 120px; } }
@media only screen and (min-width: 800px) {
.overlay__image-wrapper--step1 {
padding: 20px 40px; } }
@media only screen and (min-width: 980px) {
.overlay__image-wrapper--step1 {
padding: 40px 80px; } }
@media only screen and (min-width: 1280px) {
.overlay__image-wrapper--step1 {
padding: 80px 140px; } }
.overlay__image-wrapper--step2 {
padding: 20px 40px; }
@media only screen and (min-width: 480px) {
.overlay__image-wrapper--step2 {
padding: 40px 80px; } }
@media only screen and (min-width: 736px) {
.overlay__image-wrapper--step2 {
padding: 60px 120px; } }
@media only screen and (min-width: 800px) {
.overlay__image-wrapper--step2 {
padding: 20px 40px; } }
@media only screen and (min-width: 980px) {
.overlay__image-wrapper--step2 {
padding: 40px 80px; } }
@media only screen and (min-width: 1280px) {
.overlay__image-wrapper--step2 {
padding: 80px 140px; } }
.overlay__image-wrapper--step3 {
padding: 20px 40px; }
@media only screen and (min-width: 480px) {
.overlay__image-wrapper--step3 {
padding: 40px 80px; } }
@media only screen and (min-width: 736px) {
.overlay__image-wrapper--step3 {
padding: 60px 120px; } }
@media only screen and (min-width: 800px) {
.overlay__image-wrapper--step3 {
padding: 20px 40px; } }
@media only screen and (min-width: 980px) {
.overlay__image-wrapper--step3 {
padding: 40px 80px; } }
@media only screen and (min-width: 1280px) {
.overlay__image-wrapper--step3 {
padding: 80px 140px; } }
.search {
position: absolute;
display: block;
left: -210px;
transition: left 100ms linear;
-webkit-transition: left 100ms linear;
-moz-transition: left 100ms linear;
top: 90px;
z-index: 99;
padding: 0;
width: 210px;
height: 100vw;
background-color: #363636;
/*&__clear {
position: absolute;
right: 0;
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
&:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: absolute;
background-color: $navigation-background--lighter;
z-index:1;
right: 25px;
top: -5px;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: white;
font-weight: normal;
font-size: 10px;
cursor: pointer;
}
}*/ }
.search--visible {
left: 0; }
.search__input {
line-height: 20px;
margin-bottom: 30px;
font-size: 11pt;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
decoration: none;
border: 0;
/*&:not(:valid) + .search__clear {
display: none;
}*/ }
.search-wrapper {
position: relative; }
.result {
position: relative;
padding: 10px 30px;
margin: 0;
background-color: #d7d5c4; }
.result__item {
white-space: wrap;
text-overflow: ellipsis;
width: 150px;
display: block;
overflow: hidden; }
.result__checkmark {
display: block;
position: absolute;
left: 10px;
width: 15px;
height: 40px;
top: calc(50% - 20px);
background: url(/dist/img/checkmark--grey.svg) no-repeat center center; }
.result--active {
background-color: #fff; }
.result:hover {
background-color: #fff;
cursor: pointer; }
.result:hover .result__checkmark {
background: url(/dist/img/checkmark.svg) no-repeat center center; }
disclaimer {
position: relative;
z-index: 1; }
.disclaimer {
position: relative;
box-sizing: border-box;
padding: 8px 16px;
background-color: #eee;
color: #000;
font-size: 16px; }
.disclaimer__paragraph {
margin: 0; }
.disclaimer__paragraph:after {
content: "";
display: table;
clear: both; }
.disclaimer__text {
margin-right: 20px; }
.disclaimer__text--guide-info {
/*display: none;
@include min-screen('1000px') {
display: inline;
}*/ }
.disclaimer__button-container {
display: inline-block;
margin-right: 10px; }
.disclaimer__button-container--guide {
/*display: none;
@include min-screen('1000px') {
display: inline-block;
}*/ }
.disclaimer__button-container--close {
float: right;
position: relative; }
.disclaimer__button {
color: black !important;
cursor: pointer; }
.disclaimer__link {
color: inherit;
text-decoration: underline;
cursor: pointer; }
.disclaimer__link:focus, .disclaimer__link:hover {
color: inherit; }
.disclaimer__link--disclaimer {
font-weight: 800; }
.introjs-hint {
z-index: 250; }
.introjs-hint-dot {
border-color: #578ffa; }
.introjs-hint-pulse {
background-color: #578ffa; }
.introjs-tooltip {
background-color: #fff; }
@media only screen and (max-width: 736px) {
.introjs-tooltip {
position: fixed;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: auto; } }
@media only screen and (min-width: 736px) {
.introjs-tooltip {
width: auto;
display: block;
min-width: 480px;
font-size: 16px;
line-height: 1.35; } }
@media only screen and (min-width: 736px) {
.introjs-tooltip__layout {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex; } }
@media only screen and (min-width: 736px) {
.introjs-tooltip__layout--row {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between; } }
.introjs-tooltip__layout--row > p {
-webkit-hyphens: auto;
-khtml-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto; }
@media only screen and (min-width: 736px) {
.introjs-tooltip__layout--row > p {
-webkit-box-flex: 0;
-webkit-flex: 0 0 45%;
-moz-box-flex: 0;
-moz-flex: 0 0 45%;
-ms-flex: 0 0 45%;
flex: 0 0 45%; } }
@media only screen and (min-width: 736px) {
.introjs-tooltip__layout--row > div {
-webkit-box-flex: 0;
-webkit-flex: 0 0 45%;
-moz-box-flex: 0;
-moz-flex: 0 0 45%;
-ms-flex: 0 0 45%;
flex: 0 0 45%; } }
@media only screen and (min-width: 736px) {
.introjs-tooltip__layout--column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; } }
.introjs-tooltip__layout--column > p {
-webkit-hyphens: auto;
-khtml-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto; }
@media only screen and (min-width: 736px) {
.introjs-tooltip__layout--column > p {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-moz-box-flex: 1;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto; } }
@media only screen and (min-width: 736px) {
.introjs-tooltip__layout--column > div {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-moz-box-flex: 1;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto; } }
.introjs-tooltiptext {
padding: 25px;
/*@include flexbox();
@include flex-wrap(wrap);*/ }
@media only screen and (min-width: 736px) {
.introjs-tooltiptext {
height: auto; } }
.introjs-tooltiptext p {
margin-top: 30px;
margin-bottom: 0; }
@media only screen and (min-width: 736px) {
.introjs-tooltiptext p {
margin-top: 0; } }
.introjs-tooltiptext .list {
padding-left: 25px; }
.introjs-tooltiptext .list--guided-tour-filter-list-menu {
padding-left: 0;
list-style: none;
margin-bottom: 0; }
.introjs-tooltiptext .list__item {
position: relative;
padding-left: 10px;
margin-bottom: 10px; }
.introjs-tooltiptext .list__item--guided-tour-filter-list-menu {
padding-left: 30px; }
.introjs-tooltiptext .list__icon--guided-tour {
position: absolute;
left: 0;
top: 0;
width: 21px;
fill: #cbe264; }
.introjs-tooltiptext .list__icon--guided-tour-mostUsed {
height: 20px;
top: 3px; }
.introjs-tooltiptext .list__icon--guided-tour-antibiotics {
height: 8px;
top: 10px; }
.introjs-tooltiptext .list__icon--guided-tour-bacteria {
height: 20px;
top: 3px; }
.introjs-tooltiptext .list__icon--guided-tour-population {
height: 15px;
top: 8px; }
.introjs-tooltipbuttons {
position: fixed;
bottom: 0;
width: calc(100% - 50px);
background-color: #fff;
border-top: 1px solid #ccc;
padding: 10px 25px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: none;
flex-wrap: nowrap; }
@media only screen and (min-width: 736px) {
.introjs-tooltipbuttons {
position: static;
bottom: auto;
padding: 0;
width: auto;
border: none; } }
@media only screen and (min-width: 736px) {
.introjs-bullets {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 25%);
-moz-transform: translate(-50%, 25%);
-ms-transform: translate(-50%, 25%);
transform: translate(-50%, 25%); } }
.introjs-button {
/*position: fixed;
top: 10px;
right: 25px;*/
font-size: 16px;
font-weight: 600;
color: #fff;
text-shadow: none;
background-color: #578ffa;
background-image: none;
padding: 5px 15px;
border: 0;
border-radius: 4px;
transition: background-color 100ms ease-in-out;
-webkit-transition: background-color 100ms ease-in-out;
-moz-transition: background-color 100ms ease-in-out; }
@media only screen and (min-width: 736px) {
.introjs-button {
/*position: static;
top: auto;
right: auto;
float: right;*/ } }
.introjs-button:hover {
background-color: #4e79c7;
background-image: none !important;
color: #fff; }
.introjs-button:active, .introjs-button:focus {
color: #fff; }
.introjs-button.introjs-disabled {
width: 0;
opacity: 0;
visibility: hidden;
padding: 0;
margin-right: 0; }
.introjs-skipbutton {
background-color: transparent;
font-weight: normal;
margin-right: 0;
color: #000; }
.introjs-skipbutton:hover {
color: #000;
background: none;
text-decoration: underline; }
.introjs-prevbutton {
margin-left: auto; }
.introjs-nextbutton {
margin-left: 5px;
/*&:hover {
background-color: blue;
}*/ }
.introjs-donebutton {
background-color: #578ffa;
background-image: none;
padding: 5px 15px;
order: 3;
font-weight: bold; }
.introjs-donebutton:hover {
background-color: #4e79c7;
background-image: none !important;
color: #fff;
text-decoration: none; }
.introjs-donebutton:active, .introjs-donebutton:focus {
color: #fff; }
.introjs-arrow {
display: none !important; }
@media only screen and (min-width: 736px) {
.introjs-arrow {
display: block !important; } }
@media only screen and (min-width: 736px) {
.introjs-arrow.top {
top: -10px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #fff;
border-left-color: transparent; } }
@media only screen and (min-width: 736px) {
.introjs-arrow.left {
left: -10px;
top: 10px;
border-top-color: transparent;
border-right-color: #fff;
border-bottom-color: transparent;
border-left-color: transparent; } }
.tour-image-wrapper {
/*margin: auto;
padding: 25px 0 0 0;*/ }
.tour-image-wrapper img {
display: block;
margin: auto; }
@media only screen and (max-width: 736px) {
.tour-image-wrapper--step1 img {
margin-top: 25px;
max-width: 300px; } }
.tour-image-wrapper--step2 {
padding: 25px 0 0 0; }
@media only screen and (min-width: 480px) {
.tour-image-wrapper--step2 img {
max-width: 360px; } }
@media only screen and (min-width: 736px) {
.tour-image-wrapper--step2 img {
max-width: 200px; } }
@media only screen and (min-width: 980px) {
.tour-image-wrapper--step2 img {
max-width: 180px; } }
@media only screen and (max-width: 736px) {
.tour-image-wrapper--step3 img {
margin-top: 25px;
max-width: 300px; } }
.tour-image-wrapper--small-devices-only {
display: block; }
@media only screen and (min-width: 736px) {
.tour-image-wrapper--small-devices-only {
display: none; } }
.tour-image-wrapper--substance-classes {
padding: 30px 0; }
.tour-image-wrapper--filters {
padding: 30px 0;
max-width: 300px;
margin: auto; }
.tour-image-wrapper--search-filters {
padding: 30px 0;
max-width: 300px;
margin: auto; }
.tour-image-wrapper--filter-list-menu {
padding: 30px 0;
max-width: 300px;
margin: auto; }
.notification-container {
position: fixed;
top: calc(50vh + 70px - 150px);
right: -350px;
width: 350px;
opacity: 0;
transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex; }
.notification-container--active {
opacity: 1;
right: 0;
transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear; }
.notification-container .notification__error-icon {
width: 15%;
background-color: #ff4827;
border-top-left-radius: 9px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 9px;
-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 9px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center; }
.notification-container .notification__message {
height: 100%;
width: 100%;
background-color: lightgrey; }
.notification-container .notification__link {
cursor: pointer;
text-align: center; }
.notification-container .notification__link img {
width: 70%; }
.notification-container .message {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 10px 30px; }
.notification-container .message h2 {
margin: 0;
font-size: 20px;
color: #a52604; }
.notification-container .message p {
font-size: 16px; }
/*# sourceMappingURL=main.faca3146833c50700da9.css.map*/