* { margin: 0; padding: 0; font-family: "Open Sans"; } body, html, canvas { overflow: hidden; height: 100%; } body, html { background: #111; touch-action: none; } a { text-decoration: none; color: #0099EE; display: inline-block; } input[type=text] { padding: 4px 10px; font-size: 15px; border-radius: 3px; border: none; min-width: 120px; background: #ddd; } .no-highlight { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /** * Browser messages **/ #error-placeholder { display: flex; flex-direction: column; flex: 1; z-index: 3; } noscript { display: block; width: 100%; } .browser-message { display: block; text-align: center; position: fixed; top: 80px; z-index: 5; background: #c62d1e; color: #fff; padding: 12px 17px; font-size: 17px; } #iphone-acknowledgement { background: #003e76; border: none; padding: 10px 40px; display: block; margin: 10px auto 0; color: white; font-size: 14px; font-weight: 600; cursor: pointer; } .filler { -webkit-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); height: 100%; position: fixed; left: 0; top: 80px; z-index: 4; width: 100%; opacity: 0.5; background-color: white; } /** * Canvases **/ #canvas-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } #canvas-target { position: absolute; top: -60px; right: -90px; bottom: -90px; left: -90px; } #lod-canvas { position: absolute; top: 60px; left: 100px; z-index: 1; background: #000; max-height: 90%; } #character-canvas { position: absolute; top: 60px; left: 100px; z-index: 1; } #pixplot-canvas { height: 100%; width: 100%; } #pixplot-canvas.pan { cursor: grab; } #pixplot-canvas.pan:active { cursor: grabbing; } #pixplot-canvas.select { cursor: crosshair; } #stats { position: absolute; top: 60px; left: 106px; width: 80px; } /** * Header **/ #header { height: 80px; width: 100%; position: fixed; top: 0; box-shadow: 2px 1px 2px rgba(39, 39, 39, 0.2); } #header:hover { cursor: pointer; } #header, #logo { background: #003e76; position: relative; z-index: 6; } #logo { width: 40px; padding: 10px; height: 40px; display: none; } .tagline { color: #ffff; font-size: 30px; padding: 18px 25px; font-weight: 500; font-family: "Lato"; letter-spacing: 0.025em; display: inline-block; vertical-align: top; height: 100%; box-sizing: border-box; background: inherit; position: relative; } @media (max-width: 335px) { #header #logo { display: none; } #header .app-name { width: 100%; text-align: center; padding: 18px 0; } } /** * Header Controls **/ #header-controls { display: inline-block; position: absolute; right: 20px; top: 0; padding: 8px 0; min-width: 280px; transition: opacity 0.5s; text-align: right; white-space: nowrap; /* 100% - header-controls.padding - header.width */ max-height: calc(100vh - 30px - 80px); } /* Header-controls for phones */ @media only screen and (max-width: 950px) { #header-controls { position: fixed; left: 0; top: 80px; padding: 15px 15px; width: 100%; text-align: left; white-space: initial; background-color: #003e76; z-index: 5; color: white; overflow-y: auto; display: none; touch-action: pan-y; } #header-controls > * { width: calc(100% - 70px); } #header-controls > div { padding: 10px 10px; margin: 10px 10px; } .setting-label { margin-bottom: 10px; } .setting > #filters { width: calc(100% - 25px); } .setting > #filters > .select2 { width: 100% !important; /* Override select2 important */ } .setting { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; background-color: #0050EE; } .setting > span { display: block; } #header-filler { -webkit-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); height: 100%; position: fixed; left: 0; top: 110px; z-index: 4; width: 100%; opacity: 0.5; background-color: white; display: none; } #header-show-results { border: solid 1px white; cursor: pointer; display: none; text-align: center; } #header-button, #header-button > img { top: 8px; right: -5px; position: absolute; padding: 5px; width: 40px; height: calc(100% - 25px); margin-right: 10px; } #result-count { font-size: 14px; } #zero-result-warning { width: 230px; font-size: 14px; } } @media only screen and (min-width: 951px) { #header-button, #header-filler, span.setting-label, #header-show-results { display: none !important; /* Override settings collapsed */ } .setting { display: inline-block; vertical-align: top; top: 2px; } } @media only screen and (max-width: 1300px) { .tagline { font-size: 15px; padding-top: 30px; } #tooltip { display: none; } } @media only screen and (max-width: 430px) { .tagline { font-size: 15px; padding-top: 20px; margin-right: 70px; } #result-count { width: 100px; text-align: center; } } @media only screen and (max-width: 320px) { .tagline { font-size: 13px; } } /** * Filters **/ #filters { vertical-align: top; position: relative; top: 0; display: inline-block; margin: 0 10px; } .select2 { width: 250px !important; text-align: left; } .select2-selection { height: 65px; font-size: 16px; overflow-y: auto; overflow-x: hidden; } .select2-selection__choice__remove { display: inline-block; } .select2-selection__rendered { white-space: normal; } .select2-selection__choice__display { color: #000; } /** * Range slider **/ input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; border-radius: 10px; background: #c3c3c3; outline: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: #eee; cursor: pointer; border-radius: 14px; } input[type=range]::-moz-range-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: #eee; cursor: pointer; border-radius: 14px; } input[type=range]::-ms-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: #eee; cursor: pointer; border-radius: 14px; } /** * Dual range slider **/ #date-slider { height: 7px; width: 150px; display: inline-block; vertical-align: top; position: relative; top: 38px; margin-left: 15px; margin-right: 5px; } @media only screen and (max-width: 950px) { #date-slider { top: 25px; margin-bottom: 28px; margin-left: 25px; width: calc(100% - 50px); } } #date-slider .noUi-connect { background: #eab755; } #date-slider .noUi-handle { background: #eee; box-shadow: none; width: 18px; height: 18px; border-radius: 16px; right: -8px; border: 1px solid #888; } #date-slider .noUi-handle::before, #date-slider .noUi-handle::after { display: none; } #date-slider .noUi-tooltip { font-size: 14px; padding: 0; margin-bottom: 3px; border: 1px solid transparent; background: transparent; color: #ffff; } /** * Icons **/ #icons { display: inline-block; vertical-align: top; margin-top: 17px; } #icons img { height: 30px; margin: 0 8px; opacity: 0.3; cursor: pointer; vertical-align: top; } #icons img.active { opacity: 1; } #layout-date, #layout-categorical { display: none; } #layout-alphabetic { display: none; } /** * Jitter **/ #jitter-container { position: absolute; top: 103px; right: 20px; z-index: 1; background: #444; font-size: 12px; padding: 5px; border-radius: 3px; color: #dedede; font-family: courier; text-transform: uppercase; transition: opacity 0.5s; opacity: 0; display: none; } #jitter-container.visible { opacity: 1; } #jitter-container.disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } #jitter-container, #jitter-container * { cursor: pointer; } #jitter-container input { position: relative; top: 2px; } /** * Nav **/ nav { position: absolute; z-index: 1; top: 20px; left: 0; bottom: 0; width: 106px; height: auto; box-sizing: border-box; padding: 60px 0 0; background: rgba(17, 17, 17, 0.95); box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.7); transition: opacity 0.5s; color: #ddd; opacity: 1; cursor: default; overflow: hidden; touch-action: pan-x pan-y; } #nav-inner { height: 100%; max-height: 100%; overflow-x: hidden; overflow-y: auto; padding-right: 30px; background: #ffff; transition: opacity 0.5s; box-sizing: content-box; width: 100%; touch-action: pan-y; } nav.disabled #nav-inner { opacity: 0.3; cursor: not-allowed; pointer-events: none; } nav h2 { font-size: 0.9em; line-height: 1.05em; text-align: center; margin: 15px 0 7px; text-transform: uppercase; font-weight: 400; } /** * Tooltip **/ #tooltip { background: lightgray; z-index: 100; padding: 3px 8px; font-size: 12px; white-space: nowrap; border-radius: 3px; color: #333; opacity: 0.97; } #tooltip::after { content: ""; position: absolute; top: -4px; width: 8px; height: 8px; margin-left: -4px; background: inherit; right: 15px; transform: rotate(45deg); z-index: -1; } #result-count { position: absolute; top: 95px; right: 10px; padding: 5px; z-index: 2; background: #003e76; color: white; font-size: 20px; cursor: pointer; } #zero-result-warning { position: relative; top: 200px; margin: 0 auto; padding: 10px; z-index: 2; max-width: 80%; background: #003e76; color: white; font-size: 20px; text-align: center; width: 340px; } /** * Multi-image Selection **/ #selection-icons { position: absolute; bottom: 10px; right: 12px; display: inline-block; width: 40px; padding: 0 5px; background: #003e76; border-radius: 4px; } #selection-icons img { display: block; padding: 7px; background: white; border-radius: 6px; max-width: 100%; box-sizing: border-box; margin: 5px 0; opacity: 0.4; cursor: pointer; } #selection-icons img.active { opacity: 1; } #selection-icons img:hover { background: #eab755; opacity: 1; } #select-tooltip { position: absolute; left: -168px; z-index: 1; color: #fff; bottom: 0px; width: 126px; font-size: 12px; padding: 13px; border: 1px solid #717171; display: none; border-radius: 3px; } #select-tooltip::before { content: ""; width: 10px; height: 10px; transform: rotate(45deg); position: absolute; right: -6px; bottom: 111px; border-right: 1px solid #717171; border-top: 1px solid #717171; } #select-tooltip, #select-tooltip::before { background: #222; } #select-tooltip-heading { font-weight: 800; } #select-tooltip p { line-height: 1.4em; margin: 5px 0; } #select-tooltip-button { display: inline-block; border: 2px solid #0099EE; padding: 3px 20px; margin-top: 4px; border-radius: 3px; color: #0099EE; font-weight: 800; cursor: pointer; } #select-tooltip-button:hover { background: #0099EE; color: #222; } #hotspots { width: 75px; padding: 0 15px; } .hotspot { padding: 6px 0; display: inline-block; text-align: center; width: 75px; font-size: 13px; position: relative; transition: opacity 0.3s; } .hotspot-image { width: 100%; cursor: pointer; display: block; } .hotspot-bar-container { height: 5px; background: #444; margin: 4px 0; } .hotspot-bar-inner { transition: width 1s; background: #eab755; height: 100%; width: 0; } .hotspot .hotspot-label { cursor: text; color: #444; } .hotspot-action { position: absolute; top: 1px; width: 12px; height: 12px; vertical-align: top; box-shadow: 0px 0px 3px #000; cursor: pointer; padding: 1px; font-size: 8px; line-height: 12px; border-radius: 2px; } .hotspot .remove-hotspot-x { left: -7px; background: #9c1717; color: #eee; } .hotspot .remove-hotspot-x:hover { background: firebrick; } .hotspot .drag-hotspot, .hotspot .refresh-hotspot { background: #444; } .hotspot .drag-hotspot { right: -7px; background: #4c4c4c; color: #fff; font-size: 11px; line-height: 12px; cursor: grab; } .hotspot .drag-hotspot:hover, .hotspot .refresh-hotspot:hover { background: #666; } .hotspot.dragging, .hotspot.dragging .drag-hotspot { cursor: grabbing; } .hotspot .refresh-hotspot { position: absolute; right: -7px; top: 20px; width: 10px; height: 10px; padding: 2px; } /** * Hotspot actions **/ #hotspot-actions { position: absolute; left: 115px; bottom: 10px; width: 130px; display: none; } #create-hotspot { color: #ccc; border: 2px solid #ccc; display: none; margin-top: 8px; } #create-hotspot:hover { background: #ccc; color: #000; } #save-hotspots { white-space: nowrap; background: #eab755; color: #000; border: 2px solid #eab755; display: none; } /** * New hotspot button in hotspot column **/ #new-hotspot { height: 90px; text-align: center; font-size: 45px; line-height: 90px; cursor: pointer; margin-top: 7px; font-weight: 100; color: #dcdcdc; position: relative; } #new-hotspot::after { content: "+"; } #new-hotspot div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #ababab; z-index: 0; margin: 1px; opacity: 0.2; } #new-hotspot:hover { outline-color: #eab755; color: #fff; } .marching-ants { background-size: 6px 1px, 6px 1px, 1px 6px, 1px 6px; background-position: 0 0, 0 100%, 0 0, 100% 0; background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; -webkit-animation: marching-ants 3s; animation: marching-ants 3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-play-state: running; animation-play-state: running; background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #e5e5e5), color-stop(50%, #222)), -webkit-gradient(linear, left top, right top, color-stop(50%, #e5e5e5), color-stop(50%, #222)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, #e5e5e5), color-stop(50%, #222)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, #e5e5e5), color-stop(50%, #222)); background-image: linear-gradient(to right, #e5e5e5 50%, #222 50%), linear-gradient(to right, #e5e5e5 50%, #222 50%), linear-gradient(to bottom, #e5e5e5 50%, #222 50%), linear-gradient(to bottom, #e5e5e5 50%, #222 50%); color: #fff; } @-webkit-keyframes marching-ants { 0% { background-position: 0 0, 0 100%, 0 0, 100% 0; } 100% { background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px; } } @keyframes marching-ants { 0% { background-position: 0 0, 0 100%, 0 0, 100% 0; } 100% { background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px; } } /** * New hotspot button in the plot **/ #new-hotspot-icon { position: absolute; top: 0; left: 0; font-size: 10px; color: #fff; background: #333; padding: 4px 8px; text-align: center; border: 1px solid #444; transition: transform 0.3s; border-radius: 3px; cursor: pointer; } #hotspot-toggle { padding-top: 1px; padding-bottom: 1px; background-color: #342a26; color: #ffff; cursor: pointer; margin-left: 6px; width: 94px; } .hotspot-button { width: 106px; text-align: center; } /** * Loader **/ #loader-scene { position: absolute; display: flex; flex-direction: column; top: 80px; right: 0; bottom: 0; left: 0; color: #fff; padding: 0 40px; transition: transform 1s; z-index: 3; background: #000; max-height: 100%; width: 100%; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; justify-content: center; touch-action: pan-y; } @media only screen and (max-width: 400px) and (max-height: 700px) { #loader-scene { justify-content: flex-start; height: calc(100% - 80px); overflow-y: scroll; } #loader-scene #enter-button { min-height: 39px; } } @media only screen and (min-width: 400px) and (max-width: 700px), only screen and (max-height: 700px) { #loader-scene { justify-content: normal; overflow-y: scroll; } #loader-scene #enter-button { min-height: 39px; margin-bottom: 80px; } } #loader-scene.hidden { transform: translateY(-100%); } #loader-text { margin: 10px -50px; text-align: center; } #loader-scene > #loader-scene-filler { height: 10px; } .welcome { max-width: 700px; margin: 1em auto 0; } #footer { width: 100%; background-color: #000; color: #fff; text-align: center; } @media only screen and (min-width: 400px) { #footer { position: fixed; right: 0; left: 0; bottom: 0; } } @media only screen and (max-width: 400px) and (max-height: 700px) { #footer { display: inline-flex; } } .footer-text { font-size: 15px; margin: 20px; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } @keyframes exit { 0% { transform: translateX(0); animation-iteration-count: 1; } 1% { transform: translateX(500vw); animation-iteration-count: 1; } } /** * Loader icon **/ .loader-container { max-width: 70px; margin: 30px auto; text-align: center; } .loader-icon { width: 70px; height: 70px; } .block { position: relative; height: 20px; width: 20px; display: inline-block; background: #ffff; transition: all 0.8s; animation: rot 5s linear infinite; animation-fill-mode: forwards; } .block:nth-child(1) { animation-delay: 3s; } .block:nth-child(2) { animation-delay: 1.5s; animation: rot 15s linear infinite; } .block:nth-child(3) { animation-delay: 2s; } .block:nth-child(4) { animation-delay: 0.2s; } .block:nth-child(5) { animation-delay: 4s; } .block:nth-child(6) { animation-delay: 2s; animation: rot 7s linear infinite; } .block:nth-child(7) { animation-delay: 0.4s; } .block:nth-child(8) { animation-delay: 1.5s; animation: rot 6s linear infinite; } .block:nth-child(9) { animation-delay: 25s; animation: rot 8s linear infinite; } @keyframes rot { 0% { transform: none; } 20% { transform: rotateZ(-90deg) rotateY(180deg); } 40% { background: chocolate; transform: none; } 60% { background: white; } 80% { background: cornflowerblue; } 90% { transform: none; background: #222; } } /** * Enter button **/ button { border: none; background: #003e76; padding: 10px 40px; display: block; margin: 0 auto; color: white; font-size: 14px; font-weight: 600; opacity: 0.4; transition: opacity 0.3s; cursor: pointer; } button.active { opacity: 1; } /** * Shared modal styles **/ /** * Shared modal css (both image grid & specific image) */ .modal-content { height: 100%; width: 100%; display: flex; flex-direction: column; position: relative; overflow-y: auto; } .modal-x, .modal-lasso-x, .modal-info-x { color: #ffff; position: absolute; top: 10px; right: 10px; font-size: 26px; cursor: pointer; padding: 0 8px; background-color: #003e76; z-index: 1; } @media only screen and (max-width: 600px) { .modal-x, .modal-lasso-x, .modal-info-x { opacity: 0.7; } } .modal-top, .modal-lasso-top { padding: 20px 10%; flex: 1; box-sizing: border-box; flex-direction: column; justify-content: center; display: flex; align-items: center; height: auto; min-height: 300px; } @media only screen and (max-width: 600px) { .modal-top, .modal-lasso-top { object-fit: contain; padding: 0 0; } } .modal-top h2, .modal-lasso-top h2 { font-weight: 100; color: #666; text-align: center; font-size: 25px; } .modal-top p, .modal-lasso-top p { font-size: 14px; margin: 10px 0 20px; text-align: center; } .modal-top-content { padding: 40px; background: #eee; box-sizing: border-box; touch-action: pan-y; } /** * Specific image */ .image-shown { box-sizing: border-box; padding: 0; object-fit: contain; max-height: 100%; max-width: 100%; } .ba-slider { display: flex; flex-direction: column; flex: 1; justify-content: center; } .modal-bottom { background: #eee; padding: 20px 10%; font-size: 12px; box-sizing: border-box; height: 115px; touch-action: pan-y; } @media only screen and (max-width: 600px) { .modal-bottom { padding: 20px 10px; } } .modal-bottom-content { font-size: 14px; line-height: 18px; display: flex; flex-direction: row; justify-content: space-between; } @media (max-width: 1000px) { .modal-bottom-content { flex-direction: column; } } #selected-image-target { position: absolute; top: 80px; right: 0; bottom: 0; left: 0; background: rgba(17, 17, 17, 0.98); z-index: 5; display: none; } #selected-image-target .modal-content { justify-content: center; } #selected-image-target .modal-top-content { background: transparent; height: 100%; position: relative; padding: 10px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } @media only screen and (max-width: 600px) { #selected-image-target .modal-top-content { position: relative; } } .image-caret { position: absolute; height: 50px; background-color: #003e76; top: 50%; margin-top: -35px; cursor: pointer; z-index: 1; padding: 10px 0; } @media only screen and (max-width: 600px) { .image-caret { position: relative; opacity: 0.7; } } @media only screen and (min-width: 601px) and (max-width: 1000px) { .image-caret { position: absolute; opacity: 0.7; } } #caret-left { left: -5vh; } @media only screen and (max-width: 600px) { #caret-left { position: absolute; left: 0; } } #caret-right { right: -5vh; transform: rotate(180deg); } @media only screen and (max-width: 600px) { #caret-right { position: absolute; right: 0; } } /** * Table with metadata **/ #selected-image-meta { text-align: left; color: #555; height: auto; overflow: auto; z-index: 1; } .modal-text-left { flex: 0.5; display: inline-block; padding-right: 50px; box-sizing: border-box; } @media (max-width: 1000px) { .modal-text-left { width: 100%; } } #selected-image-table-header { margin-bottom: 10px; margin-left: 16px; } .selected-image-table { font-weight: 400; font-size: 13px; min-width: 270px; } @media only screen and (max-width: 600px) { .selected-image-table { font-size: 12px; } } .selected-image-table td { padding: 0 15px; } #selected-image-table-link { color: #0050EE; } .modal-text-right { flex: 0.5; display: inline-block; vertical-align: top; } @media (max-width: 1000px) { .modal-text-right { margin-left: 17px; margin-top: 20px; width: 88%; } } #meta-category-container-header { margin-bottom: 10px; margin-left: 2px; } #meta-category-container { margin: 0 -2px 10px; } .meta-category { display: inline-block; padding: 4px 6px; margin: 2px; background: #d3d3d3; color: #777; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; } @media only screen and (max-width: 600px) { .meta-category { font-size: 12px; } } .meta-category-none { font-weight: 400; font-size: 13px; margin-left: 5px; } #colorization-toggle img { margin-right: 15px; width: 40px; } /** * Grid view of images **/ #selected-images-modal { position: absolute; top: 80px; left: 0; right: 0; bottom: 0; z-index: 2; background: #111; overflow: auto; display: none; touch-action: pan-x pan-y; } #selected-images-grid { display: flex; flex-wrap: wrap; } @media only screen and (max-width: 600px) { #selected-images-grid { justify-content: center; } } #selected-images-target { max-height: 100%; overflow: auto; } .selected-image { width: 90px; height: 90px; margin: 9px; display: flex; justify-content: center; align-items: center; position: relative; border: 0.125em solid #707070; background-size: cover; background: #222 no-repeat center top; padding: 0.125px; box-sizing: border-box; cursor: pointer; } /** * Info modal */ #modal-info { position: absolute; top: 80px; left: 0; right: 0; bottom: 0; z-index: 2; overflow: auto; display: none; touch-action: pan-x pan-y; background: #111; } #modal-info .modal-info-top { background-color: rgba(0, 0, 0, 0.7); } #modal-info .modal-top-content { display: flex; flex-direction: column; text-align: left; overflow-y: scroll; } #modal-info p { margin-top: 1em; } .modal-info-top-content { background: transparent; height: 100%; position: relative; padding: 10px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } @media only screen and (max-width: 600px) { .modal-info-top-content { position: relative; } } .modal-info-top { padding: 20px 10%; flex: 1; box-sizing: border-box; flex-direction: column; justify-content: center; display: flex; align-items: center; height: auto; } @media only screen and (max-width: 600px) { .modal-info-top { object-fit: contain; padding: 0 0; } } .info-modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } .info-modal-close:hover, .info-modal-close:focus { color: #000; text-decoration: none; cursor: pointer; } #intro-tour-button { background: #003e76; margin-left: 0; opacity: 1; } @media only screen and (max-width: 600px) { #intro-tour-button { width: 100%; min-height: 39px; } } #selected-images-x { position: absolute; top: 5px; right: 8px; color: #ccc; font-size: 17px; cursor: pointer; } #count-target { color: #0099EE; font-weight: 800; text-align: center; font-size: 20px; } #view-selected-container { display: none; position: absolute; bottom: 10px; right: 70px; z-index: 1; } #view-selected { background: #222; border: 2px solid #0099EE; color: #0099EE; text-align: center; padding: 1px 0; border-radius: 3px; } #view-selected:hover { background: #0099EE; color: #222; } #selected-images-count { color: #fff; font-size: 10px; white-space: nowrap; padding: 10px; background: #222; border-radius: 3px; text-align: center; margin-bottom: 5px; border: 1px solid #717171; } #survicate-box .sv__survey.sv__minimized.sv__position-center { left: 120px; right: unset !important; } @media only screen and (max-width: 568px) { #survicate-box .sv__survey.sv__minimized.sv__position-center { display: none !important; } } #survicate-box button { opacity: 1; } /** * Fix intro tour */ #header.driver-fix-stacking { z-index: 6 !important; } div#driver-highlighted-element-stage, div#driver-page-overlay { background: transparent !important; outline: 5000px solid rgba(0, 0, 0, 0.6); } @media only screen and (max-width: 400px) { div#driver-popover-item { min-width: unset !important; } } div#driver-popover-item button { opacity: unset; } .first-step-popover-class { position: fixed !important; top: 50% !important; } #canvas-container.driver-highlighted-element { z-index: unset !important; } #canvas-target.driver-highlighted-element { z-index: unset !important; }