/* open-sans-300 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('/fonts/open-sans-v17-latin-300.eot'); /* IE9 Compat Modes */ src: local('Open Sans Light'), local('OpenSans-Light'), url('/fonts/open-sans-v17-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v17-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v17-latin-300.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v17-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v17-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-300italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url('/fonts/open-sans-v17-latin-300italic.eot'); /* IE9 Compat Modes */ src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url('/fonts/open-sans-v17-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v17-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v17-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v17-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v17-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('/fonts/open-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v17-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('/fonts/open-sans-v17-latin-italic.eot'); /* IE9 Compat Modes */ src: local('Open Sans Italic'), local('OpenSans-Italic'), url('/fonts/open-sans-v17-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v17-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v17-latin-italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v17-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v17-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-600 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('/fonts/open-sans-v17-latin-600.eot'); /* IE9 Compat Modes */ src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url('/fonts/open-sans-v17-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v17-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v17-latin-600.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v17-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v17-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-600italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: url('/fonts/open-sans-v17-latin-600italic.eot'); /* IE9 Compat Modes */ src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'), url('/fonts/open-sans-v17-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v17-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v17-latin-600italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v17-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v17-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('/fonts/open-sans-v17-latin-700.eot'); /* IE9 Compat Modes */ src: local('Open Sans Bold'), local('OpenSans-Bold'), url('/fonts/open-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v17-latin-700.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v17-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('/fonts/open-sans-v17-latin-700italic.eot'); /* IE9 Compat Modes */ src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('/fonts/open-sans-v17-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v17-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v17-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v17-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v17-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-800 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('/fonts/open-sans-v17-latin-800.eot'); /* IE9 Compat Modes */ src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url('/fonts/open-sans-v17-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v17-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v17-latin-800.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v17-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v17-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-800italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: url('/fonts/open-sans-v17-latin-800italic.eot'); /* IE9 Compat Modes */ src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'), url('/fonts/open-sans-v17-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v17-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v17-latin-800italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v17-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v17-latin-800italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } html { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; } body { width: 100%; margin: 0px; padding: 0px; min-height: 100%; } #header-row { background-color: white; } #header-row img { height: 34px; } #header-row h1 { font-weight: 300; } #result { white-space: pre; } body { overflow-x: hidden; } .card-icon { font-size: 14rem; } #loading-view .card-icon { font-size: 8rem; } @keyframes spin { 100% { transform: rotate(360deg); } } .fa-spinner.spin-animation { animation: spin 4s linear infinite; } .animate-opacity { transition: opacity 0.5s ease-in; } /* https://tobiasahlin.com/spinkit/ * MIT Licensed */ .sk-folding-cube { margin: 40px auto; width: 80px; height: 80px; position: relative; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #333; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } .sk-folding-cube .sk-cube1:before { background-color: #3bbecc; } .sk-folding-cube .sk-cube2:before { background-color: #a1ce08; } .sk-folding-cube .sk-cube3:before { background-color: #fcb807; } .sk-folding-cube .sk-cube4:before { background-color: #f6572c; } #sampling-circle { display: flex; align-items: center; justify-content: center; } video { max-width: 100%; max-height: 50%; } .sampling-circle { animation: spin 4s linear infinite; margin: 0 auto; width: 200px; height: 200px; border-radius: 50%; border: 22px solid transparent; background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat; background-image: linear-gradient(white, white), linear-gradient(0deg, #3bbecc 120%, #3bbecc 100%), linear-gradient(90deg, #a1ce08 120%, #a1ce08 100%), linear-gradient(180deg, #fcb807 120%, #fcb807 100%), linear-gradient(270deg, #f6572c 120%, #f6572c 100%); background-position: center center, left top, right top, left bottom, right bottom; background-origin: content-box, border-box, border-box, border-box, border-box; background-clip: content-box, border-box, border-box, border-box, border-box; } .sampling-circle.no-spin { animation: none; } .sampling-seconds-left { font-weight: 300; font-size: 1.8rem; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; height: 2.9rem; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #permission-view .fa-mobile { position: relative; } #permission-view .fa-mobile > i { position: absolute; right: -2rem; bottom: -2rem; font-size: 5rem; } #build-progress { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; } #inferencing-in-progress table { table-layout: fixed; } #inferencing-in-progress th, #inferencing-in-progress td { overflow: hidden; text-overflow: ellipsis; } #inferencing-in-progress tbody tr { background-color: white; transition: background-color ease-out 1.5s; } #inferencing-in-progress tbody tr.active { background-color: #bcf1fb; } .badge-camera { text-transform: none; } .capture-camera-inner { height: 100%; display: inline-block; position: relative; height: 100%; object-fit: contain; } .bounding-box-label { color: white; color: white; padding: 0.2rem 0.6rem; display: inline-block; position: absolute; font-size: 0.875rem; right: -3px; bottom: 100%; white-space: nowrap; cursor: default; } /* notify */ .alert-notify { display: flex !important; width: calc(100% - 30px); max-width: 600px; padding-right: 80px; color: rgba(255, 255, 255, .85); box-shadow: 0 3px 10px rgba(0, 0, 0, .15); } .alert-notify:hover { z-index: 1081 !important; } .alert-notify:not(.alert-info):not(.alert-success):not(.alert-warning):not(.alert-danger) { background-color: rgba(0, 0, 0, .95); } .alert-notify:not(.alert-info):not(.alert-success):not(.alert-warning):not(.alert-danger) .alert-notify-close { color: #ffd600; } .alert-notify:not(.alert-info):not(.alert-success):not(.alert-warning):not(.alert-danger) .alert-notify-close:hover { opacity: .8; } .alert-notify .alert-icon.ni { position: relative; top: 4px; } .alert-notify .alert-title { font-size: 1rem; font-weight: 600; display: block; } .alert-notify .close { top: 1rem !important; right: 1.5rem !important; transform: translateY(0); } /* end notify */ /* animate.css */ /*! * animate.css -https://daneden.github.io/animate.css/ * Version - 3.7.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2019 Daniel Eden */ @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translateZ(0); transform: translateZ(0) } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); animation-timing-function: cubic-bezier(.755, .05, .855, .06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } 70% { -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); animation-timing-function: cubic-bezier(.755, .05, .855, .06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0) } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0) } } @keyframes bounce { 0%, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translateZ(0); transform: translateZ(0) } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); animation-timing-function: cubic-bezier(.755, .05, .855, .06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } 70% { -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); animation-timing-function: cubic-bezier(.755, .05, .855, .06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0) } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0) } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom } @-webkit-keyframes flash { 0%, 50%, to { opacity: 1 } 25%, 75% { opacity: 0 } } @keyframes flash { 0%, 50%, to { opacity: 1 } 25%, 75% { opacity: 0 } } .flash { -webkit-animation-name: flash; animation-name: flash } @-webkit-keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } .pulse { -webkit-animation-name: pulse; animation-name: pulse } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 30% { -webkit-transform: scale3d(1.25, .75, 1); transform: scale3d(1.25, .75, 1) } 40% { -webkit-transform: scale3d(.75, 1.25, 1); transform: scale3d(.75, 1.25, 1) } 50% { -webkit-transform: scale3d(1.15, .85, 1); transform: scale3d(1.15, .85, 1) } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1) } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 30% { -webkit-transform: scale3d(1.25, .75, 1); transform: scale3d(1.25, .75, 1) } 40% { -webkit-transform: scale3d(.75, 1.25, 1); transform: scale3d(.75, 1.25, 1) } 50% { -webkit-transform: scale3d(1.15, .85, 1); transform: scale3d(1.15, .85, 1) } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1) } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand } @-webkit-keyframes shake { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } } @keyframes shake { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } } .shake { -webkit-animation-name: shake; animation-name: shake } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); transform: translateX(0) } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg); transform: scale3d(.9, .9, .9) rotate(-3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg); transform: scale3d(.9, .9, .9) rotate(-3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } .tada { -webkit-animation-name: tada; animation-name: tada } @-webkit-keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg) } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg) } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg) } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg) } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg) } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg) } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg) } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg) } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .wobble { -webkit-animation-name: wobble; animation-name: wobble } @-webkit-keyframes jello { 0%, 11.1%, to { -webkit-transform: translateZ(0); transform: translateZ(0) } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(.390625deg) skewY(.390625deg); transform: skewX(.390625deg) skewY(.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } @keyframes jello { 0%, 11.1%, to { -webkit-transform: translateZ(0); transform: translateZ(0) } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(.390625deg) skewY(.390625deg); transform: skewX(.390625deg) skewY(.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center } @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1) } 14% { -webkit-transform: scale(1.3); transform: scale(1.3) } 28% { -webkit-transform: scale(1); transform: scale(1) } 42% { -webkit-transform: scale(1.3); transform: scale(1.3) } 70% { -webkit-transform: scale(1); transform: scale(1) } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1) } 14% { -webkit-transform: scale(1.3); transform: scale(1.3) } 28% { -webkit-transform: scale(1); transform: scale(1) } 42% { -webkit-transform: scale(1.3); transform: scale(1.3) } 70% { -webkit-transform: scale(1); transform: scale(1) } } .heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97) } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97) } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1) } } .bounceIn { -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-animation-name: bounceIn; animation-name: bounceIn } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0) } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0) } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0) } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0) } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } } .bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-animation-name: bounceOut; animation-name: bounceOut } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0) } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0) } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0) } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0) } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp } @-webkit-keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig } @-webkit-keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut } @-webkit-keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } @keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } @keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } @keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } @-webkit-keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } @keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } @-webkit-keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } @keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg); transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @keyframes flip { 0% { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg); transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } .flipOutX { -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } .flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1 } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0 } } @keyframes lightSpeedOut { 0% { opacity: 1 } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0 } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0 } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0 } } .hinge { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: hinge; animation-name: hinge } @-webkit-keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(.1) rotate(30deg); transform: scale(.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(.1) rotate(30deg); transform: scale(.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } .jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn } @-webkit-keyframes rollOut { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg) } } @keyframes rollOut { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg) } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } 50% { opacity: 1 } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } 50% { opacity: 1 } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp } @-webkit-keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } to { opacity: 0 } } @keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } to { opacity: 0 } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); animation-timing-function: cubic-bezier(.55, .055, .675, .19) } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } @keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .animated.delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s } .animated.delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s } .animated.delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s } .animated.delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s } .animated.delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s } .animated.fast { -webkit-animation-duration: .8s; animation-duration: .8s } .animated.faster { -webkit-animation-duration: .5s; animation-duration: .5s } .animated.slow { -webkit-animation-duration: 2s; animation-duration: 2s } .animated.slower { -webkit-animation-duration: 3s; animation-duration: 3s } @media (prefers-reduced-motion:reduce), (print) { .animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important } } /* end animate.css */ #config-body { min-width: 500px; padding: 1rem; margin-bottom: -1rem; } html:not(.swal2-shown) .modal { overflow-y: auto; } .swal2-popup .swal2-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .swal2-container { z-index: 10001; } .paginatable table { table-layout: fixed; } .paginatable table thead tr { display: table-row !important; } .paginatable table[data-page="1"] tr { display: none; } .paginatable table[data-page="1"] tr.table-page-1 { display: table-row; } .acquisition-table .table th:first-child, .acquisition-table .table td:first-child { display: none; } #acquisition-table-container-big .acquisition-table .table th.aq-th-id, #acquisition-table-container-big .acquisition-table .table td.data-samples-table-row-id { padding-left: 1.7rem !important; } #acquisition-table-container-small .acquisition-table .table th.aq-th-sample-name, #acquisition-table-container-small .acquisition-table .table td.data-samples-table-row-name { padding-left: 1.7rem !important; } .acquisition-table.show-checkboxes .table th:first-child, .acquisition-table.show-checkboxes .table td:first-child { display: table-cell; } #acquisition-table-container-big .acquisition-table.show-checkboxes .table th.aq-th-id, #acquisition-table-container-big .acquisition-table.show-checkboxes .table td.data-samples-table-row-id { padding-left: 0.5rem !important; } #acquisition-table-container-small .acquisition-table.show-checkboxes .table th.aq-th-sample-name, #acquisition-table-container-small .acquisition-table.show-checkboxes .table td.data-samples-table-row-name { padding-left: 0.5rem !important; } .data-samples-table-row-id-row { display: none; } #acquisition-table-container-big .data-samples-table-row-id-row { display: block; } .acquisition-table .table th, .acquisition-table .table td { padding-top: 0.5rem; padding-bottom: 0.5rem; } .acquisition-table-grid .data-samples-table-row { position: relative; } .acquisition-table-grid .data-samples-table-row.table-info { background-color: white; } .acquisition-table-grid .data-samples-table-row-wrapper { border: solid 1px rgba(0, 0, 0, 0.05); border-radius: 0.5rem; padding: 0.75rem; height: 100%; margin-bottom: -0.5rem; position: relative; } .acquisition-table-grid .data-samples-table-row.table-info .data-samples-table-row-wrapper { border: solid 2px #5E72E4; margin: -1px; /* offset the changed border size */ margin-bottom: calc(-0.5rem - 1px); } .acquisition-table .disabled-badge { background-color: rgb(244, 245, 246); position: relative; top: -1px; margin-left: 0.25rem; margin-bottom: -0.5rem; /* ensure the badge doesn't have any height in the DOM */ } .acquisition-table-grid .disabled .data-samples-table-row-wrapper, .acquisition-table-grid .disabled .data-samples-table-row-filename { color: #8898aa; } .acquisition-table-grid #select-all-row, .acquisition-table-grid .data-samples-table-row-checkbox { display: none; } .acquisition-table-grid.show-checkboxes #select-all-row { display: block; } .acquisition-table-grid.show-checkboxes .data-samples-table-row-checkbox { display: inline-block; } .acquisition-table-grid #select-all-row { padding-top: 0; padding-bottom: 0; margin-bottom: 0.25rem; } .data-samples-table-row-preview { border-radius: 6px; margin-bottom: 0.5rem; } .data-samples-table-row-preview:has(video) { text-align: center; } .data-samples-table-row-preview video { width: 100%; } .data-samples-table-row-preview img, .data-samples-table-row-preview audio, .data-samples-table-row-preview .data-samples-table-row-chart-body { max-width: 100%; } .data-samples-table-row-preview .data-samples-table-row-chart-body { padding: 4px 8px; } .data-samples-table-row-audio-row { margin: 0.25rem 0; } .data-samples-table-row-image-proposed-changes-body { text-align: center; margin-bottom: 0.5rem; } .data-samples-table-row-preview .data-samples-table-row-image-body { text-align: center; } .data-samples-table-row-audio-row audio { display: block; height: 30px; max-width: 100%; border-radius: 6px; } .data-samples-table-row-preview .chart { height: 100px; } .data-samples-table-row-preview .acquisition-image-body-inner > img { background: var(--lighter); } .data-samples-table-row-preview .acquisition-image-body-inner > img[data-loaded="1"] { background: none; } .data-samples-table-row-preview .bounding-box-container { z-index: 1; } .data-samples-table-row-preview .data-samples-table-row-table-body { max-height: 180px; overflow-y: auto; border-radius: 6px; } .table-compact.table th, .table-compact.table td { padding-top: 0.5rem; padding-bottom: 0.5rem; } .acquisition-table-grid .data-samples-table-row-actions { position: absolute; right: 0.75rem; top: 0.5rem; z-index: 99; } /* ensure both hamburger menu and any bounding boxes are both fully visible */ .acquisition-table-grid .inline-edit-bb .data-samples-table-row-actions { right: 0rem; top: 0.25rem; } .acquisition-table-grid .inline-edit-bb .data-samples-table-row-preview { margin-top: 1.5rem; } .acquisition-table-grid .data-samples-table-row-actions .btn[aria-expanded="false"] { display: none; } .acquisition-table-grid .data-samples-table-row-checkbox label { margin-right: 0.25rem; margin-bottom: 0; } .acquisition-table-grid .data-samples-table-row:hover .data-samples-table-row-actions .btn { display: block; } .acquisition-table-grid .data-samples-table-row-filename { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; margin-bottom: 0.5rem; color: #525f7f; } .data-samples-table-row-metadata-wrapper { margin-bottom: 0.5rem; } .data-samples-table-row-metadata-wrapper:not(:has(> div)) { display: none; } .acquisition-table-grid .data-samples-table-row-metadata-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px; } .data-samples-table-row-metadata-title { font-size: 0.625rem; text-transform: uppercase; } .data-samples-table-row-metadata-value { font-size: 0.75rem; } .acquisition-table-grid .data-samples-table-row { padding-bottom: 0.25rem; margin-bottom: 0.5rem; } .acquisition-table-grid[data-grid-column-count="12"] .data-samples-table-row { flex: 0 0 8.333333%; max-width: 8.333333%; } .acquisition-table-grid[data-grid-column-count="11"] .data-samples-table-row { flex: 0 0 9.0909%; max-width: 9.0909%; } .acquisition-table-grid[data-grid-column-count="10"] .data-samples-table-row { flex: 0 0 10%; max-width: 10%; } .acquisition-table-grid[data-grid-column-count="9"] .data-samples-table-row { flex: 0 0 11.111%; max-width: 11.111%; } .acquisition-table-grid[data-grid-column-count="8"] .data-samples-table-row { flex: 0 0 12.5%; max-width: 12.5%; } .acquisition-table-grid[data-grid-column-count="7"] .data-samples-table-row { flex: 0 0 14.285%; max-width: 14.285%; } .acquisition-table-grid[data-grid-column-count="6"] .data-samples-table-row { flex: 0 0 16.666667%; max-width: 16.666667%; } .acquisition-table-grid[data-grid-column-count="5"] .data-samples-table-row { flex: 0 0 20%; max-width: 20%; } .acquisition-table-grid[data-grid-column-count="4"] .data-samples-table-row { flex: 0 0 25%; max-width: 25%; } .acquisition-table-grid[data-grid-column-count="3"] .data-samples-table-row { flex: 0 0 33.333333%; max-width: 33.333333%; } .acquisition-table-grid[data-grid-column-count="2"] .data-samples-table-row { flex: 0 0 50%; max-width: 50%; } .acquisition-table-grid[data-grid-column-count="1"] .data-samples-table-row { flex: 0 0 100%; max-width: 100%; } .acquisition-table-grid #results-table { padding-top: 0.5rem; padding-bottom: 0.25rem; } .acquisition-table-grid .data-samples-table-body { padding: 0 0.5rem; } .acquisition-table-grid .data-samples-table-row { padding-left: 0.375rem; padding-right: 0.375rem; } .acquisition-image-body { height: 200px; text-align: center; padding-top: 0; } .acquisition-page .acquisition-image-body, .acquisition-page .acquisition-video-body { max-height: 400px; height: auto; } .acquisition-page .acquisition-image-body-inner > img, .acquisition-page .acquisition-video-body-inner > video { max-height: calc(400px - 1.5rem); } .data-samples-table-row-preview .acquisition-image-body-inner > img, .data-samples-table-row-preview .acquisition-video-body-inner > video { max-height: max(400px, calc(100vh - 150px)); } .acquisition-table-body { max-height: 362px; overflow-y: auto; margin-bottom: 0.5rem; } .acquisition-table-body .table { border-collapse: separate; border-spacing: 0; } .acquisition-table-body thead th { position: sticky; top: 0; z-index: 10; } .acquisition-video-body { height: 300px; text-align: center; display: none; padding-top: 0; } .acquisition-page .acquisition-video-body { height: 400px; } .acquisition-image-body .acquisition-image-body-inner, .acquisition-video-body .acquisition-video-body-inner { height: 100%; display: inline-block; } .acquisition-image-body img, .acquisition-video-body video { height: 100%; } .acquisition-image-body-inner { position: relative; display: inline-block; } .acquisition-image-body-inner img, .acquisition-video-body-inner video { max-width: 100%; object-fit: contain; object-position: top; } .data-samples-table-row-image-body .acquisition-image-body-inner img { height: auto; } .crosshair-h { width: 100%; height: 2px; margin-top: -1px; left: 0; top: 0; } .crosshair-v { height: 100%; width: 2px; margin-left: -1px; left: 0; top: 0; } .crosshair { position: absolute; background-color: transparent; border: solid 1px rgba(255, 255, 255, 0.8); border-style: dashed; pointer-events: none; } .crosshair-label { position: absolute; background: rgba(255, 255, 255, 0.9); border-radius: 3px; font-size: 0.75rem; margin-top: -12px; padding: 2px 4px; right: 4px; pointer-events: none; } .acquisition-image-body-inner .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); pointer-events: none; /* Cutout */ mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .acquisition-image-body-inner .no-objects-found-msg { position: absolute; top: 0; left: 0; width: 100%; background-color: #f5365c; /* bg-red */ color: white; padding: 0.5rem 0; } .topnavbar .avatar { width: 32px; height: 32px; } .avatar { background-size: cover; user-select: none; overflow: hidden; white-space: nowrap; } .data-samples-table-row-preview .acquisition-image-body-inner img { background: var(--lighter); } .job-runner-output { box-sizing: content-box; font-size: 0.75rem; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .job-runner-output:not(:has(> .xterm)) { white-space: preserve; } /* get rid of the padding here, because we set the padding on .xterm so the scrollbars behave like they did before we added xterm */ .card-body.job-runner-output:has(> .xterm), .modal-body.job-runner-output:has(> .xterm) { overflow-y: hidden; padding: 0; } .card-body.job-runner-output .xterm, .modal-body.job-runner-output > .xterm { /* top/bottom to 1rem, looks better for some reason, left to 1.5rem, that's the same as the normal padding for modal/card, right to 1rem, as the scrollbar takes 0.5rem too (so total is 1.5rem) */ padding: 1rem 1rem 1rem 1.5rem; height: 100%; } .xterm .xterm-viewport { overflow-y: auto; } #stdout-output { height: 400px; } .form-control, .focused .form-control, .form-control:focus { color: rgb(82, 95, 127); } .text-code { padding: 1px 3px; background: #F8F9FE; border: solid 1px #ddd; border-radius: 6px; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }