.animated.infinite, .animated1s.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.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 { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.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 { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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 { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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 swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } .shake { -webkit-animation-name: shake; animation-name: shake; } @keyframes shake { 10%, 90% { -webkit-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); } 20%, 80% { -webkit-transform: translate3d(2px, 0, 0); transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { -webkit-transform: translate3d(-4px, 0, 0); transform: translate3d(-4px, 0, 0); } 40%, 60% { -webkit-transform: translate3d(4px, 0, 0); transform: translate3d(4px, 0, 0); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 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(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 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(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.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: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.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: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.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: none; transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.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: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { 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: none; transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { 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: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.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(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.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(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -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; } .bounceOutDown:before { -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 { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { -webkit-transform: translate3d(0, 250%, 0); transform: translate3d(0, 250%, 0); } to { -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 250%, 0); transform: translate3d(0, 250%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); -webkit-animation-delay: 250ms; animation-delay: 250ms; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { 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 { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -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 { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -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 { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -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 { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -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); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -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); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { 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 { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 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: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 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: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 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: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 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: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 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-name: hinge; animation-name: hinge; } @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.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(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.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(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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 { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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 { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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 { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes shrink { from { overflow: hidden; } to { visibility: hidden; height: 0; } } @keyframes shrink { from { overflow: hidden; } to { visibility: hidden; height: 0; } } .animated.shrink { -webkit-animation-name: shrink; animation-name: shrink; } .fade-wait-leave { opacity: 1; } .fade-wait-leave.fade-wait-leave-active { opacity: 0; transition: opacity 0.4s ease-in; } .fade-wait-enter { opacity: 0; } .fade-wait-enter.fade-wait-enter-active { opacity: 1; transition: opacity 0.4s ease-in 0.6s; } .fade-wait-height { transition: height 0.6s ease-in-out; } .cross-fade-leave { opacity: 1; } .cross-fade-leave.cross-fade-leave-active { opacity: 0; transition: opacity 1s ease-in-out; } .cross-fade-enter { opacity: 0; } .cross-fade-enter.cross-fade-enter-active { opacity: 1; transition: opacity 1s ease-in-out; } .cross-fade-height { transition: height 0.5s ease-in-out; } :root { --background-color: white; } .night { --background-color: #333; } html, body { margin: 0; padding: 0; font-size: 10px; min-height: 100vh; } html { font-size: 10px; } body { position: relative; font-size: 14px; font-family: "IBM Plex Sans", sans-serif; color: var(--color-text); max-width: 100%; overflow-x: hidden; } #__blaze-root { min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-family: "IBM Plex Sans", sans-serif; color: var(--color-text); margin-top: 0; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: var(--color-text); } h1 { margin-bottom: 1.5rem; } h1.bigger { font-size: 4.5rem; } @media (min-width: 769px) { h1 { margin-bottom: 2rem; } } @media (min-width: 1025px) { h1 { margin-bottom: 2.5rem; } } a { text-decoration: none; color: #00a8c5; } .night a { color: #00a8c5; } a:hover, a:active, a:focus { text-decoration: none; color: #00a8c5; outline: none; } .night a:hover, .night a:active, .night a:focus { color: #00a8c5; } svg.icon { fill: currentColor; } * { box-sizing: border-box; } i, em { font-variation-settings: "slnt" 10deg; } b, strong { font-variation-settings: "wght" 600; } .help-block { font-size: 1.2rem; } .validation-error { color: #f32121; } .hide-shrink { height: 0; transition: height 500ms cubic-bezier(0.895, 0.03, 0.685, 0.22); margin-top: 0; } .shrink { transition: height 500ms cubic-bezier(0.895, 0.03, 0.685, 0.22); } .pointer { cursor: pointer; } .has-success { color: #16ea95; border-color: #16ea95; } .has-success .form-control, .has-success .form-control:focus, .has-success .help-block { color: var(--color-text); border-color: #16ea95; } .night .has-success .form-control, .night .has-success .form-control:focus, .night .has-success .help-block { color: #bababa; border-color: #63862c; } .has-success .form-control-feedback { color: #12ca80; } .night .has-success .form-control-feedback { color: #63862c; } .has-error { color: #ff775f; border-color: #ff775f; } .night .has-error { color: #d32600; border-color: #d32600; } .has-error .form-control, .has-error .form-control:focus, .has-error .help-block, .has-error .form-control:valid { color: #ff775f; border-color: #ff775f; } .night .has-error .form-control, .night .has-error .form-control:focus, .night .has-error .help-block, .night .has-error .form-control:valid { color: #d32600; border-color: #d32600; } .has-error .form-control-feedback { color: #ff593b; } .night .has-error .form-control-feedback { color: #d32600; } .log-input-group { display: -ms-grid; display: grid; -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; } .btn:disabled { background-color: transparent !important; border-color: #bababa !important; color: #bababa !important; } .btn:disabled:hover { border-color: #bababa !important; color: #bababa !important; } .btn.btn-refresh { color: #00aee6; font-size: 16px; margin: 0px; padding: 7px; } .btn.btn-refresh:hover { background-color: inherit; color: black; } .btn.btn-condensed { margin: 0; } .btn.btn-danger { background: #d9534f; color: white; } .btn.btn-danger:hover { background-color: #e27c79; } .btn.btn-danger.btn-outline { background-color: transparent; color: #d9534f; } .btn.btn-danger.btn-outline:hover { background-color: #d9534f; color: white; } .btn.btn-warning { background-color: #f0ad4e; color: #335149; } .btn.btn-warning:hover { background-color: #f4c37d; } .btn.btn-warning.btn-outline { background-color: transparent; color: #f0ad4e; } .btn.btn-warning.btn-outline:hover { background-color: #f0ad4e; color: white; } .btn.btn-info { background-color: var(--color-primary); color: #ffffff; } .btn.btn-info:hover { background-color: var(--klappir-blue-60); } .btn.btn-info.btn-outline { background-color: transparent; color: var(--color-primary); } .btn.btn-info.btn-outline:hover { background-color: var(--color-primary); color: white; } .btn.btn-success { background-color: #16ea95; color: #ffffff; } .btn.btn-success:hover { background-color: #45eeaa; } .btn.btn-success.btn-outline { background-color: transparent; color: #16ea95; } .btn.btn-success.btn-outline:hover { background-color: #16ea95; color: white; } .italic { font-style: italic; } [class^="icon-"]::before, [class*=" icon-"]::before { min-width: 1em; width: auto; } .icon--big-circled { position: relative; left: 50%; width: 22.4rem; margin-bottom: 2rem; border: 5px solid; border-radius: 10000px; color: #16ea95; font-size: 15rem; text-align: center; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .night .icon--big-circled { color: #63862c; } .icon--big { font-size: 15rem; color: #16ea95; } .night .icon--big { color: #63862c; } .center { text-align: center; } [data-action] { cursor: pointer; } tr[data-action], .viewRecord, .tr-striped { transition: all 150ms; color: #444; } .night tr[data-action], .night .viewRecord, .night .tr-striped { color: #aaa; } tr[data-action]:hover, .viewRecord:hover, .tr-striped:hover { background: #f4f4f4; } tr[data-action] a:only-child, .viewRecord a:only-child, .tr-striped a:only-child { display: block; width: 100%; height: 100%; } .btn-seethrough { background: none; border: none; box-shadow: 0px 0px 0px !important; padding: 3px; } .btn-seethrough:hover { color: #9999ee !important; } .bg-video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: no-repeat; background-size: cover; } .flexy { display: -webkit-flex; display: -ms-flexbox; display: flex; } ul.flexy { display: -webkit-flex; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; width: 100%; } ul.flexy li { padding: 10px; } .flexy-rows { -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flexy-columns { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flexy-fill { -webkit-flex: 1 1 100% !important; -ms-flex: 1 1 100% !important; flex: 1 1 100% !important; } .edited { text-decoration: line-through; opacity: 0.8; } .small-caps { text-transform: lowercase; font-variant-caps: all-small-caps; font-size: 1.4em; } .show-on-hover-row { opacity: 0; visibility: hidden; transition: opacity 150ms; } tr:hover .show-on-hover-row { opacity: 1; visibility: visible; } .p1 { padding: 1rem; } .m0a { margin: 0 auto; } .d-bl { display: block; } .ribbon { width: 150px; height: 150px; overflow: hidden; position: absolute; } .ribbon::before, .ribbon::after { position: absolute; content: ""; display: block; border: 5px solid #0087b3; } .ribbon span { position: absolute; display: block; width: 225px; padding: 15px 0; background-color: #00aee6; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); color: #fff; font: 700 18px/1 Lato, sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); text-transform: uppercase; } .ribbon-top-left { top: -10px; left: -10px; } .ribbon-top-left::before, .ribbon-top-left::after { border-top-color: transparent; border-left-color: transparent; } .ribbon-top-left::before { top: 0; right: 0; } .ribbon-top-left::after { bottom: 0; left: 0; } .ribbon-top-left span { right: -21px; top: 33px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .ribbon-top-right { top: -10px; right: -10px; } .ribbon-top-right::before, .ribbon-top-right::after { border-top-color: transparent; border-right-color: transparent; } .ribbon-top-right::before { top: 0; left: 0; } .ribbon-top-right::after { bottom: 0; right: 0; } .ribbon-top-right span { left: -21px; top: 33px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .ribbon-bottom-left { bottom: -10px; left: -10px; } .ribbon-bottom-left::before, .ribbon-bottom-left::after { border-bottom-color: transparent; border-left-color: transparent; } .ribbon-bottom-left::before { bottom: 0; right: 0; } .ribbon-bottom-left::after { top: 0; left: 0; } .ribbon-bottom-left span { right: -25px; bottom: 30px; -webkit-transform: rotate(225deg); transform: rotate(225deg); } .ribbon-bottom-right { bottom: -10px; right: -10px; } .ribbon-bottom-right::before, .ribbon-bottom-right::after { border-bottom-color: transparent; border-right-color: transparent; } .ribbon-bottom-right::before { bottom: 0; left: 0; } .ribbon-bottom-right::after { top: 0; right: 0; } .ribbon-bottom-right span { left: -25px; bottom: 30px; -webkit-transform: rotate(-225deg); transform: rotate(-225deg); } .btn { color: var(--color-text); background: transparent; border-radius: 5px; padding: 6px 15px; transition: all 150ms; margin: 0 1.5rem 1.5rem; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; } @media (min-width: 769px) { .btn { margin: 0 2rem 2rem; } } @media (min-width: 1025px) { .btn { margin: 0 2.5rem 2.5rem; } } .night .btn { color: #e6e6e6; } .night .btn:hover { background-color: #333; } .btn:hover { background-color: #eee; } .btn:active { box-shadow: none; } .btn + .btn { margin-left: 0; } .btn.btn-primary { background: linear-gradient(180deg, #00a3b4 0%, #0091a0 100%); color: #d9f6f9; border-color: #007c89; -webkit-transition: all 200ms; box-shadow: 0; position: relative; z-index: 100; transition: all 150ms; } .btn.btn-primary:after { border-radius: inherit; background-image: linear-gradient(to bottom, #00a9ba 0%, #008c9b 100%); content: ""; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -100; transition: opacity 150ms; } .btn.btn-primary:hover:after { opacity: 1; } .btn.btn-primary:focus { outline: none; } .btn.btn-primary:active:after { opacity: 0; } .btn.btn-primary:hover { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3); } .btn.btn-secondary { background: linear-gradient(180deg, #bede4f 0%, #a4d53a 100%); color: #51711f; border-color: #8bbc3f; position: relative; z-index: 100; transition: all 150ms; } .btn.btn-secondary:after { border-radius: inherit; background-image: linear-gradient(to bottom, #c1e151 0%, #9fcf38 100%); content: ""; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -100; transition: opacity 150ms; } .btn.btn-secondary:hover:after { opacity: 1; } .btn.btn-secondary:focus { outline: none; } .btn.btn-secondary:active:after { opacity: 0; } .btn.btn-secondary:hover { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3); } .btn.btn-default { color: #007281; background: #fafafa; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 5px; padding: 6px 15px; position: relative; z-index: 100; transition: all 150ms; } .btn.btn-default:after { border-radius: inherit; background-image: linear-gradient(to bottom, #fff 0%, #f6f6f6 100%); content: ""; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -100; transition: opacity 150ms; } .btn.btn-default:hover:after { opacity: 1; } .btn.btn-default:focus { outline: none; } .btn.btn-default:active:after { opacity: 0; } .btn.btn-default:hover { color: inherit; border-color: rgba(0, 0, 0, 0.25); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15); } .night .btn.btn-default { background: #333; color: #bababa; } .btn.btn-default.disabled { background: #d6d6d6; } .btn.btn-md { padding-left: 1.8rem; padding-right: 1.8rem; font-size: 1.8rem; } .btn.btn-lg, .btn-group-lg > .btn { padding-left: 2rem; padding-right: 2rem; } .btn.disabled, .btn[disabled], fieldset[disabled] .btn, .btn.disabled:hover, .btn[disabled]:hover, fieldset[disabled] .btn:hover { opacity: 0.8; box-shadow: none; color: #767676; } .btn.disabled:hover:after, .btn[disabled]:hover:after, fieldset[disabled] .btn:hover:after, .btn.disabled:hover:hover:after, .btn[disabled]:hover:hover:after, fieldset[disabled] .btn:hover:hover:after { opacity: 0; } [data-balloon] { position: relative; } [data-balloon]:after { filter: alpha(opactiy=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; pointer-events: none; transition: all 0.18s ease-out 0.18s; background: rgba(17, 17, 17, 0.9); border-radius: 4px; color: #fff; content: attr(data-balloon); font-size: 12px; padding: 0.5em 1em; position: absolute; white-space: nowrap; z-index: 100; } [data-balloon]:before { background: no-repeat url('data:image/svg+xml;utf8,'); background-size: 100% auto; width: 18px; height: 6px; filter: alpha(opactiy=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; pointer-events: none; transition: all 0.18s ease-out 0.18s; content: ""; position: absolute; z-index: 100; } [data-balloon]:hover:not([data-balloon-show="false"]):before, [data-balloon]:hover:not([data-balloon-show="false"]):after, [data-balloon][data-balloon-show="true"]:before, [data-balloon][data-balloon-show="true"]:after, [data-balloon]:focus:not([data-balloon-show="false"]):before, [data-balloon]:focus:not([data-balloon-show="false"]):after, input:hover ~ [data-balloon]:not([data-balloon-show="false"]):before, input:hover ~ [data-balloon]:not([data-balloon-show="false"]):after, input:focus ~ [data-balloon]:not([data-balloon-show="false"]):before, input:focus ~ [data-balloon]:not([data-balloon-show="false"]):after, textarea:hover ~ [data-balloon]:not([data-balloon-show="false"]):before, textarea:hover ~ [data-balloon]:not([data-balloon-show="false"]):after, textarea:focus ~ [data-balloon]:not([data-balloon-show="false"]):before, textarea:focus ~ [data-balloon]:not([data-balloon-show="false"]):after { filter: alpha(opactiy=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; pointer-events: auto; } [data-balloon][data-balloon-break]:after { white-space: normal; } [data-balloon][data-balloon-pos="up"]:after { bottom: 100%; left: 50%; margin-bottom: 11px; -webkit-transform: translate3d(-50%, 10px, 0); transform: translate3d(-50%, 10px, 0); -webkit-transform-origin: top; transform-origin: top; } [data-balloon][data-balloon-pos="up"]:before { bottom: 100%; left: 50%; margin-bottom: 5px; -webkit-transform: translate3d(-50%, 10px, 0); transform: translate3d(-50%, 10px, 0); -webkit-transform-origin: top; transform-origin: top; box-shadow: inset 0 -1px 2px 0 red; } [data-balloon][data-balloon-pos="up"]:hover:after, [data-balloon][data-balloon-pos="up"]:focus:after, input:hover ~ [data-balloon][data-balloon-pos="up"]:after, input:focus ~ [data-balloon][data-balloon-pos="up"]:after, textarea:hover ~ [data-balloon][data-balloon-pos="up"]:after, textarea:focus ~ [data-balloon][data-balloon-pos="up"]:after { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } [data-balloon][data-balloon-pos="up"]:hover:before, [data-balloon][data-balloon-pos="up"]:focus:before, input:hover ~ [data-balloon][data-balloon-pos="up"]:before, input:focus ~ [data-balloon][data-balloon-pos="up"]:before, textarea:hover ~ [data-balloon][data-balloon-pos="up"]:before, textarea:focus ~ [data-balloon][data-balloon-pos="up"]:before { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } [data-balloon][data-balloon-pos="down"]:after { left: 50%; margin-top: 11px; top: 100%; -webkit-transform: translate3d(-50%, -10px, 0); transform: translate3d(-50%, -10px, 0); } [data-balloon][data-balloon-pos="down"]:before { background: no-repeat url('data:image/svg+xml;utf8,'); background-size: 100% auto; width: 18px; height: 6px; left: 50%; margin-top: 5px; top: 100%; -webkit-transform: translate3d(-50%, -10px, 0); transform: translate3d(-50%, -10px, 0); } [data-balloon][data-balloon-pos="down"]:hover:after, [data-balloon][data-balloon-pos="down"]:focus:after, input:hover ~ [data-balloon][data-balloon-pos="down"]:after, input:focus ~ [data-balloon][data-balloon-pos="down"]:after, textarea:hover ~ [data-balloon][data-balloon-pos="down"]:after, textarea:focus ~ [data-balloon][data-balloon-pos="down"]:after { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } [data-balloon][data-balloon-pos="down"]:hover:before, [data-balloon][data-balloon-pos="down"]:focus:before, input:hover ~ [data-balloon][data-balloon-pos="down"]:before, input:focus ~ [data-balloon][data-balloon-pos="down"]:before, textarea:hover ~ [data-balloon][data-balloon-pos="down"]:before, textarea:focus ~ [data-balloon][data-balloon-pos="down"]:before { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } [data-balloon][data-balloon-pos="left"]:after { margin-right: 11px; right: 100%; top: 50%; -webkit-transform: translate3d(10px, -50%, 0); transform: translate3d(10px, -50%, 0); } [data-balloon][data-balloon-pos="left"]:before { background: no-repeat url('data:image/svg+xml;utf8,'); background-size: 100% auto; width: 6px; height: 18px; margin-right: 5px; right: 100%; top: 50%; -webkit-transform: translate3d(10px, -50%, 0); transform: translate3d(10px, -50%, 0); } [data-balloon][data-balloon-pos="left"]:hover:not([data-balloon-show="false"]):after, [data-balloon][data-balloon-pos="left"][data-balloon-show="true"]:after, [data-balloon][data-balloon-pos="left"]:focus:not([data-balloon-show="false"]):after, input:hover ~ [data-balloon][data-balloon-pos="left"]:not([data-balloon-show="false"]):after, input:focus ~ [data-balloon][data-balloon-pos="left"]:not([data-balloon-show="false"]):after, textarea:hover ~ [data-balloon][data-balloon-pos="left"]:not([data-balloon-show="false"]):after, textarea:focus ~ [data-balloon][data-balloon-pos="left"]:not([data-balloon-show="false"]):after { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } [data-balloon][data-balloon-pos="left"]:hover:not([data-balloon-show="false"]):before, [data-balloon][data-balloon-pos="left"][data-balloon-show="true"]:before, [data-balloon][data-balloon-pos="left"]:focus:not([data-balloon-show="false"]):before, input:hover ~ [data-balloon][data-balloon-pos="left"]:not([data-balloon-show="false"]):before, input:focus ~ [data-balloon][data-balloon-pos="left"]:not([data-balloon-show="false"]):before, textarea:hover ~ [data-balloon][data-balloon-pos="left"]:not([data-balloon-show="false"]):before, textarea:focus ~ [data-balloon][data-balloon-pos="left"]:not([data-balloon-show="false"]):before { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } [data-balloon][data-balloon-pos="right"]:after { left: 100%; margin-left: 11px; top: 50%; -webkit-transform: translate3d(-10px, -50%, 0); transform: translate3d(-10px, -50%, 0); } [data-balloon][data-balloon-pos="right"]:before { background: no-repeat url('data:image/svg+xml;utf8,'); background-size: 100% auto; width: 6px; height: 18px; left: 100%; margin-left: 5px; top: 50%; -webkit-transform: translate3d(-10px, -50%, 0); transform: translate3d(-10px, -50%, 0); } [data-balloon][data-balloon-pos="right"]:hover:not([data-balloon-show="false"]):after, [data-balloon][data-balloon-pos="right"][data-balloon-show="true"]:after, [data-balloon][data-balloon-pos="right"]:focus:not([data-balloon-show="false"]):after, input:hover ~ [data-balloon][data-balloon-pos="right"]:not([data-balloon-show="false"]):after, input:focus ~ [data-balloon][data-balloon-pos="right"]:not([data-balloon-show="false"]):after, textarea:hover ~ [data-balloon][data-balloon-pos="right"]:not([data-balloon-show="false"]):after, textarea:focus ~ [data-balloon][data-balloon-pos="right"]:not([data-balloon-show="false"]):after { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } [data-balloon][data-balloon-pos="right"]:hover:not([data-balloon-show="false"]):before, [data-balloon][data-balloon-pos="right"][data-balloon-show="true"]:before, [data-balloon][data-balloon-pos="right"]:focus:not([data-balloon-show="false"]):before, input:hover ~ [data-balloon][data-balloon-pos="right"]:not([data-balloon-show="false"]):before, input:focus ~ [data-balloon][data-balloon-pos="right"]:not([data-balloon-show="false"]):before, textarea:hover ~ [data-balloon][data-balloon-pos="right"]:not([data-balloon-show="false"]):before, textarea:focus ~ [data-balloon][data-balloon-pos="right"]:not([data-balloon-show="false"]):before { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } [data-balloon][data-balloon-length="small"]:after { white-space: normal; width: 80px; } [data-balloon][data-balloon-length="medium"]:before { white-space: normal; width: 150px; } [data-balloon][data-balloon-length="large"]:after { white-space: normal; width: 260px; } [data-balloon][data-balloon-length="xlarge"]:after { white-space: normal; width: 380px; } @media screen and (max-width: 768px) { [data-balloon][data-balloon-length="xlarge"]:after { white-space: normal; width: 90vw; } } [data-balloon][data-balloon-length="fit"]:after { white-space: normal; width: 100%; } .steps-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .steps-step { width: 11rem; text-align: center; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .steps-number { width: 5.5rem; max-width: 90%; height: 5.5rem; margin: 0 auto 0.5rem; background: #ccc; border-radius: 50%; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); color: #999; font-size: 2rem; line-height: 5.5rem; transition: all 200ms ease; } .night .steps-number { background: #444; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.8); } @media (min-width: 601px) { .steps-number { width: 7.5rem; height: 7.5rem; line-height: 7.5rem; font-size: 2.5rem; } } .steps-text { font-size: 1.3rem; color: #999; transition: color 200ms ease; } .night .steps-text { color: #bababa; } @media (min-width: 601px) { .steps-text { font-size: 1.8rem; } } .steps-active > .steps-number { background: #00aee6; color: white; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.45); transition: all 200ms ease; } .night .steps-active > .steps-number { background: #009cac; color: black; box-shadow: 0 2px 5px 0 black; } .steps-active > .steps-text { color: #333; } .night .steps-active > .steps-text { color: white; } .goesToNextStep, .goesToPrevStep { cursor: pointer; } .toggle { position: relative; display: -ms-grid; display: grid; justify-self: center; font-size: 15px; border: solid thin white; border-radius: 20px; -ms-grid-columns: (1fr) [2]; grid-template-columns: repeat(2, 1fr); width: 160px; background: #ccc; box-shadow: 0px 0px 4px inset #666; padding: 1px; height: 25px !important; transition-duration: 300ms; text-align: center; color: white; } .toggle .toggle_button { border: solid thin #89f; border-radius: 20px; background: #fff; color: #777; position: absolute; width: 77px; height: 21px !important; margin: 1px; cursor: pointer; transition-duration: 300ms; } .toggle .toggle_button:hover { border: solid 2px #5fce5f; } .toggle.toggle_state_right .toggle_button { right: 0px; } .toggle.toggle_state_left { background-color: #26d426; } .toggle.toggle_state_left .toggle_button { left: 0px; } .toggle.toggle_state_left .toggle_button:hover { border: solid 2px #d42626; } .toggle .toggle_left_text { grid-column: 1/2; } .toggle .toggle_right_text { grid-column: 2/2; } .input-slider { height: 29px; -webkit-appearance: none; margin: 10px 0; width: 100%; } .input-slider:focus { outline: none; } .input-slider::-webkit-slider-runnable-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #ffffff; background: #25b82f; border-radius: 25px; border: 1px solid #8899ff; } .input-slider::-webkit-slider-thumb { box-shadow: 0px 0px 1px #8899ff; border: 2px solid #8899ff; height: 21px; width: 40px; border-radius: 12px; background: #ffffff; cursor: pointer; -webkit-appearance: none; margin-top: -9.5px; } .input-slider:focus::-webkit-slider-runnable-track { background: #25b82f; } .input-slider::-moz-range-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #ffffff; background: #25b82f; border-radius: 25px; border: 1px solid #8899ff; } .input-slider::-moz-range-thumb { box-shadow: 0px 0px 1px #8899ff; border: 2px solid #8899ff; height: 21px; width: 40px; border-radius: 12px; background: #ffffff; cursor: pointer; } .input-slider::-ms-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; color: transparent; } .input-slider::-ms-fill-lower { background: #25b82f; border: 1px solid #8899ff; border-radius: 50px; box-shadow: 0px 0px 0px #ffffff; } .input-slider::-ms-fill-upper { background: #25b82f; border: 1px solid #8899ff; border-radius: 50px; box-shadow: 0px 0px 0px #ffffff; } .input-slider::-ms-thumb { margin-top: 1px; box-shadow: 0px 0px 1px #8899ff; border: 2px solid #8899ff; height: 21px; width: 40px; border-radius: 12px; background: #ffffff; cursor: pointer; } .input-slider:focus::-ms-fill-lower { background: #25b82f; } .input-slider:focus::-ms-fill-upper { background: #25b82f; } .snackbar { display: -ms-grid; display: grid; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: fixed; bottom: 0px; left: 80px; right: 0px; background: #444; color: white; padding: 40px 10px; font-size: 1.4em; height: 90px; z-index: 900; transition: all 1s; transition-timing-function: ease-in-out; } .snackbar.closing { bottom: -140px; } .snackbar a { color: white; text-decoration: underline; } .snackbar .close-button { position: absolute; top: 50%; left: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.5em; } .passwordReset { position: absolute; width: 50rem; max-width: 100vw; height: 100vh; margin: 0 auto; padding: 5rem; left: 0; right: 0; font-size: 1.6rem; border-radius: 5px; background: rgba(0, 174, 230, 0.85); color: #fff; text-align: center; } @media (min-width: 601px) { .passwordReset { top: 10%; height: auto; } } .passwordReset .passwordReset-content { position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 40rem; } .passwordReset .passwordReset-content h2 { margin-bottom: 30px; } .passwordReset .passwordReset-content a { margin-top: 20px; display: block; color: #fff; } .passwordReset .passwordReset-content #password_reset_form { margin-top: 20px; } .passwordReset .passwordReset-content #password_reset_form .float-label-control input::-webkit-input-placeholder { color: #fff; } .passwordReset .passwordReset-content #password_reset_form .float-label-control input::-moz-placeholder { color: #fff; } .passwordReset .passwordReset-content #password_reset_form .float-label-control input:-ms-input-placeholder { color: #fff; } .passwordReset .passwordReset-content #password_reset_form legend { color: #fff; } .passwordReset .passwordReset-content #password_reset_form input { border-color: white; color: white; } .passwordReset .passwordReset-content button.btn.btn-default { width: 100%; margin: 0; background-color: white; color: #00aee6; } .passwordReset .passwordReset-content button.btn.btn-default.btn-outline { background-color: transparent; color: #00aee6; } .passwordReset .passwordReset-content button.btn.btn-default.btn-outline:hover { background-color: #00aee6; color: white; } .passwordReset .passwordReset-content button.btn.btn-default:hover { color: #00aee6; } .settings_wrapper .submit-group { position: relative; } #data_backup #fileListWrapper { margin-top: 20px; margin-bottom: 10px; } #data_backup #fileListWrapper .backupList li { padding: 5px; font-size: 1.4em; } #data_backup #fileListWrapper h3 { border-bottom: solid thin #ccc; } #data_backup #fileDownload button { margin: 0px; } .language-settings li { cursor: pointer; text-align: center; } .language-settings svg { opacity: 0.2; transition: all 150ms; } .language-settings svg:hover { opacity: 1; } .language-settings .active { font-family: "IBM Plex Sans", sans-serif; font-weight: 700; font-variation-settings: "wght" 700; } .language-settings .active svg { opacity: 1; } #reminders .daily { max-width: 100px; } #reminders .weekly { max-width: 220px; } #reminders .bilge { margin-bottom: 20px; } #reminders #save_button input { margin: 0px; } .settings a h2 { padding-bottom: 20px; margin-bottom: 20px; } .settings a.collapsed h2 { border-bottom: solid thin #ddd; } .settings .collapse { padding-bottom: 20px; margin-bottom: 20px; border-bottom: solid thin #ccc; } .settings_section ~ div { padding-left: 35px; } #slider-wrapper { padding: 10px 20px; border-radius: 10px; box-shadow: 0px 0px 10px -1px #ccc; margin: 10px 0px; } #recordbook_settings > div { display: -ms-grid; display: grid; -ms-grid-columns: (1fr) [12]; grid-template-columns: repeat(12, 1fr); -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; row-gap: 15px; } @media (max-width: 1024px) { #recordbook_settings > div { -ms-grid-columns: (1fr) [6]; grid-template-columns: repeat(6, 1fr); margin-bottom: 18px; } } @media (max-width: 768px) { #recordbook_settings > div { -ms-grid-columns: (1fr) [4]; grid-template-columns: repeat(4, 1fr); margin-bottom: 170px; } } @media (max-width: 600px) { #recordbook_settings > div { -ms-grid-columns: (1fr) [2]; grid-template-columns: repeat(2, 1fr); } } #recordbook_settings > div .record-block { -ms-grid-column: span 2; grid-column: span 2; height: 17rem; font-size: 3.5rem; color: #fff; border-radius: 4px; } #recordbook_settings > div .record-block .record-block_unsigned { font-size: 1.6rem; color: red; } #recordbook_settings > div .record-block div { display: -ms-grid; display: grid; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 100%; -webkit-align-content: space-evenly; -ms-flex-line-pack: space-evenly; align-content: space-evenly; } #recordbook_settings > div .record-block div i { line-height: 0; } #recordbook_settings > div .record-block div * { text-align: center; } #recordbook_settings > div .record-block div span { font-size: 2.5rem; font-family: "IBM Plex Sans", sans-serif; } .root { background-color: white; color: var(--color-text); height: 100%; min-height: 100vh; overflow: auto; transition: color, background, border-color 300ms, 300ms, 300ms; } .night .root { background-color: #333; color: #bababa; } header > div { background: #f2f2f2; transition: color, background, border-color 300ms, 300ms, 300ms; color: #7f7b99; } .night header > div { background: #222; border-color: #000; color: #a8a6b5; } header > div a { color: #335149; } header > div a:hover { color: black; } header > div a:active, header > div a:focus { color: #335149; text-decoration: none; } .night header > div a { color: #bababa; } .night header > div a:hover, .night header > div a:focus { color: #eee; } header > div { position: absolute; top: 0; left: 0; right: 0; height: 5rem; background: transparent; color: #335149; padding: 0.75rem 1.5rem; z-index: 600; } .night header > div { background: transparent; border: none; } header > div .header-right { position: fixed; top: 0px; right: 20px; transition: top 300ms ease-in-out; z-index: 200; display: -ms-grid; display: grid; grid-gap: 30px; -ms-grid-columns: auto auto; grid-template-columns: auto auto; padding: 15px 30px; background-color: #f2f2f2; color: #444; font-size: 1.5rem; box-shadow: 0px 5px 4px -2px rgba(0, 0, 0, 0.4); border: 1px solid #bbb; border-top: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } header > div .header-right.nav-up { top: -60px; } header > div .header-right .header_asset-name { display: -ms-grid; display: grid; -ms-grid-columns: auto auto; grid-template-columns: auto auto; grid-gap: 5px; } .night header > div .header-right { background-color: #272727; box-shadow: none; border: solid thin #aaa; border-top: none; color: #fff; } @media (max-width: 1023px) { header > div .header-right { display: none; } } @media (max-width: 599px) { header > div a { display: none; } header > div div > small { font-size: 14px; } } @media (max-width: 768px) { header > div { padding: 0.3rem 2.5rem; } } @media (min-width: 769px) { header > div { font-size: 3rem; line-height: 29px; height: 6rem; left: 8.1rem; padding-left: 0px; } } @media (min-width: 1025px) { header > div { height: 6rem; } } header > div a { color: white; } header > div img { max-height: 100%; width: 187px; } header > div .alternative { width: auto; } header > div .pull-right { float: right; clear: left; font-size: 2.5rem; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .offline { background-color: #ccc !important; } .navBadge, .navbadge:focus, .navbadge:active { position: absolute; top: 2px; right: -12px; width: 25px !important; height: 25px; font-size: 12px; line-height: 20px; border-radius: 100%; background: #18c72a; overflow: hidden; box-shadow: 0px 4px 15px -2px #444; color: #fff !important; } .night .navBadge, .night .navbadge:focus, .night .navbadge:active { background: #7cb720; color: #335149; } .navBadge .navBadge_value, .navbadge:focus .navBadge_value, .navbadge:active .navBadge_value { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .hide { display: none; } #onlineStatus { position: relative; width: 20px; height: 20px; display: inline-block; } #onlineStatus #onlineStatus_signal { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 20px; } #dashboard_container { height: 90vh; } #dashboard_container #events_history_length { background-color: #f8f8f8; border-radius: 4px; padding: 15px; } #dashboard_container #dash-row3 { height: 100%; } #dashboard_container #dash-row1-col2 { height: 100%; } #dashboard_container #dash-row1-col2 #dash-row3 { height: 100%; } #dashboard_container #dash-row1-col2 #dash-row3 #dash-row3-col1 { height: 100%; overflow-y: auto; } #dashboard_container .event-icn .event-delete { fill: #ff775f; } #dashboard_container .event-icn .event-new { fill: #16ea95; } #dashboard_container .icon-bookmark, #dashboard_container .icon-hourglass { fill: #335149; } .widget { height: 98%; } .widget li { margin-bottom: 8px; } .widget .widget-item { border: solid thin #dfdfdf; box-shadow: 0px 4px 8px -2px #afafaf; padding: 10px; } .widget-card { height: 95%; } .login { position: absolute; width: 50rem; max-width: 100vw; height: auto; margin: 0 auto; padding: 4rem; left: 50%; top: 50%; font-size: 2rem; border-radius: 5px; background: rgba(0, 174, 230, 0.85); color: #fff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (min-width: 601px) { .login { height: auto; } } .login .login-logo, .login ._logoFix { display: block; height: 200px; width: 75%; margin: 0 auto 4rem; background-repeat: no-repeat; text-align: center; } @media (min-width: 601px) { .login .login-logo, .login ._logoFix { height: 280px; max-width: 75%; } } .login .login-logo .login-logo, .login ._logoFix .login-logo { max-width: 100%; max-height: 100%; margin: 0 auto; } .login legend { font-size: 1.7rem; } .login button.btn.btn-default { min-width: 33%; max-width: 50%; background-color: white; color: #00aee6; } .login button.btn.btn-default.btn-outline { background-color: transparent; color: #00aee6; } .login button.btn.btn-default.btn-outline:hover { background-color: #00aee6; color: white; } .login button.btn.btn-default:hover { color: #00aee6; } .login #login_form .float-label-control input::-webkit-input-placeholder { color: #fff; } .login #login_form .float-label-control input::-moz-placeholder { color: #fff; } .login #login_form .float-label-control input:-ms-input-placeholder { color: #fff; } .login #login_form .float-label-control label, .login #login_form .float-label-control legend { color: #fff; } .login #login_form legend { color: #fff; } .login #login_form input { border-color: white; color: white; } .login-container { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: url(external/static.ark.technology/ark/img/backgrounds/CargoVslBadWeather.JPG) center center; background-size: cover; z-index: -1; } .login-container.logCentral { background: url(external/static.klappir.io/img/backgrounds/oneocean.jpg) center center; background-size: cover; } .logCentral.login { background: rgba(22, 33, 35, 0.64); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); box-shadow: var(--box-shadow-long); } .logCentral.login .login-logo { margin-bottom: 2rem; } .login-container.localhost { background: url(external/static.ark.technology/ark/img/backgrounds/CargoVslBadWeather.JPG) center center; background-size: cover; } .logCentral-logos { display: -webkit-flex; display: -ms-flexbox; display: flex; clear: both; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .powered-by-klappir { width: 190px; } .chartco-logo { width: 130px; } .logCentral-logos { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-top: 5rem; } .login.logCentral button.btn.btn-default { color: #445d64; } a#resetPassword { color: rgba(255, 255, 255, 0.7); font-size: 15px; padding-left: 10px; } a#resetPassword:hover { color: white; text-decoration: underline; } .login-footer { position: absolute; bottom: 0; font-size: 12px; width: 100%; } .login-footer p { display: inline-block; float: right; background: rgba(255, 255, 255, 0.4); opacity: 0.9; border-top-left-radius: 5px; margin: 0; padding: 5px; } .login-footer a { color: #335149; text-decoration: underline; } .login-footer a:hover, .login-footer a:active, .login-footer a:focus { color: black; text-decoration: underline; } .login-footer svg { margin-bottom: -2px; } .card-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 769px) { .card-wrap { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } } .card-wrap .card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-width: 30rem; padding: 0.5rem; border-radius: 4px; box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.5); margin: 0 1.5rem 1.5rem 0; background: #00aee6; } .night .card-wrap .card { background: #0087b3; } @media (min-width: 769px) { .card-wrap .card { margin: 0 2rem 2rem 0; } } .card-head { margin: 0.2rem 0; text-transform: uppercase; display: -webkit-flex; display: -ms-flexbox; display: flex; } .card-head h3 { margin: 0; padding: 0.5rem; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; font-size: 1rem; font-family: "IBM Plex Sans", sans-serif; } .card-head a { font-size: 1.5rem; color: #dddddd; } .night .card-head a { color: #bababa; } .card-head [class^="icon-"] { padding: 0.5rem; } .card-head > *:first-child { padding-left: 1rem; } .card-head > *:last-child { padding-right: 1rem; } .card-main { padding: 1rem; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; background: white; border-radius: 2px; height: 35rem; max-height: 80vh; overflow-y: auto; transition: background, color 300ms, 300ms; } .night .card-main { background: #333; } .card-main h4 { text-align: center; font-size: 1.6rem; margin: 5px 0 12px; font-family: "IBM Plex Sans", sans-serif; } .card-list { margin: 0 -1rem 10px; padding: 0; list-style: none; font-size: 1.5rem; font-family: "IBM Plex Sans", sans-serif; font-weight: 700; font-variation-settings: "wght" 700; transition: background, color 300ms, 300ms; } .card-list li { background: #f2f2f2; position: relative; transition: background, color 300ms, 300ms; } .night .card-list li { background: #222; } .card-list li a { display: block; padding: 1.2rem; color: #335149; } .night .card-list li a { color: #bababa; } .card-list li .progress-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #bbb; } .card-list li .progress-wrap .progress-bar { background: #0087b3; } .card-footer { min-height: 0rem; } nav a:focus { outline: none; color: #3c8ddc; } nav a::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -35px 0 0 -35px; width: 70px; height: 70px; border-radius: 50%; opacity: 0; pointer-events: none; } nav a::after { background: rgba(111, 148, 182, 0.1); } .cbutton--effect-boris.cbutton--click::after { -webkit-animation: anim-effect-boris 0.3s forwards; animation: anim-effect-boris 0.3s forwards; } @-webkit-keyframes anim-effect-boris { 0% { -webkit-transform: scale3d(0.3, 0.3, 1); transform: scale3d(0.3, 0.3, 1); } 25%, 50% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1); } } @keyframes anim-effect-boris { 0% { -webkit-transform: scale3d(0.3, 0.3, 1); transform: scale3d(0.3, 0.3, 1); } 25%, 50% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1); } } .navSpacer { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .ark-modal-bg { position: fixed; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; z-index: 1000; background: rgba(0, 0, 0, 0.5); cursor: pointer; } .night .ark-modal-bg { background: rgba(0, 0, 0, 0.75); } .ark-modal { width: 900px; max-width: 90vw; margin: 3vh auto; height: 200px; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; background: white; border: #222222; border-radius: 0.5rem; box-shadow: 0 10px 12px 5px rgba(0, 0, 0, 0.5); cursor: auto; } .night .ark-modal { background: #222; border-color: #000; } .ark-modal h1, .ark-modal h2, .ark-modal h3, .ark-modal h4, .ark-modal h5, .ark-modal h6 { text-align: center; border-bottom: none; } .ark-modal p { font-size: 1.5rem; } .ark-modal-big { height: 94vh; } @media (max-width: 768px) { .ark-modal-big { height: 86vh; } } @media (max-width: 1024px) { .ark-modal-big { height: 86vh; } } .ark-modal-small { height: 47vh; } .ark-modal-x { position: absolute; right: -2rem; top: -2rem; font-size: 2.5rem; color: #fff; transition: color 200ms; z-index: 2; border-radius: 50px; background-color: orangered; padding: 10px; box-shadow: 0px 0px 4px #000; } .ark-modal-x:hover { color: #333; } .ark-modal-xtra-wide { width: 90% !important; } .ark-modal-wide { width: 1200px !important; } .ark-modal-narrow { width: 65rem; } .ark-modal-header { padding-top: 2rem; box-sizing: content-box; } .ark-modal-body { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; overflow: auto; padding: 1rem 4rem 0; } iframe.ark-modal-body { padding: 0; } .ark-modal-footer { padding: 1.5rem; text-align: right; min-height: 80px; } @media (min-width: 769px) { .ark-modal-footer { padding: 2rem; } } @media (min-width: 1025px) { .ark-modal-footer { padding: 2.5rem; } } .ark-modal-footer .btn, .ark-modal-footer .btn.btn-lg, .ark-modal-footer .btn-group-lg > .btn { margin: 0 0 0 1.5rem; } @media (min-width: 769px) { .ark-modal-footer .btn, .ark-modal-footer .btn.btn-lg, .ark-modal-footer .btn-group-lg > .btn { margin: 0 0 0 2rem; } } @media (min-width: 1025px) { .ark-modal-footer .btn, .ark-modal-footer .btn.btn-lg, .ark-modal-footer .btn-group-lg > .btn { margin: 0 0 0 2.5rem; } } .pinButton { display: -ms-grid; display: grid; -ms-grid-columns: 68px 35px; grid-template-columns: 68px 35px; -ms-grid-rows: 30px; grid-template-rows: 30px; border: solid thin #009900; background: linear-gradient(to bottom, #d8eb97 0%, #daeeaf 100%); color: #51711f; border-radius: 4px; cursor: pointer; width: 103px; overflow: hidden; font-size: 1.4rem; height: 33px; } form:invalid .pinButton { background: linear-gradient(to bottom, #e2e2e2 0%, #eeeeee 100%); cursor: not-allowed; } form:invalid .pinButton:hover { box-shadow: none; } .pinButton.valid { background-color: linear-gradient(to bottom, #c2e24e 0%, #b0d981 100%); background-image: linear-gradient(to bottom, #c2e24e 0%, #9dce37 100%); } .pinButton.error { background: linear-gradient(to bottom, #f0b7b2 0%, #ecaca7 100%); } .pinButton.pending { background: linear-gradient(to bottom, #d8eb97 0%, #daeeaf 100%); } .pinButton-contentWrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; justify-self: center; } .pinButton-locked { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; color: #51711f; width: 4rem; text-align: center; border: none; outline: none; padding: 2px; margin: 1px; } .pinButton-inputWrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .pinButton-input { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; background-color: transparent; color: #51711f; width: 4rem; text-align: center; border: none; outline: none; padding: 2px; margin: 1px; } .pinButton-statusIcon { display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; width: 100%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } .pinButton-statusIcon::before { position: absolute; top: -5px; right: -5px; bottom: -10px; left: -1px; content: ""; display: block; background: rgba(0, 0, 0, 0.09); -webkit-transform: rotate(20deg); transform: rotate(20deg); border-left: 1px solid; z-index: 1; } .reactModal-overlay_float { -ms-grid-rows: 1fr 1fr 1fr !important; grid-template-rows: 1fr 1fr 1fr !important; } .reactModal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 40, 0.14); z-index: 1000; display: -ms-grid; display: grid; -ms-grid-columns: minmax(1vw, 30vw) auto minmax(1vw, 30vw); grid-template-columns: minmax(1vw, 30vw) auto minmax(1vw, 30vw); -ms-grid-rows: 1vh 98vh 2vh; grid-template-rows: 1vh 98vh 2vh; } .night .reactModal-overlay { background: rgba(0, 0, 0, 0.75); } .reactModal-overlay .reactModal-modal { display: -ms-grid; display: grid; -ms-grid-rows: minmax(70px, max-content) 1fr 100px; grid-template-rows: minmax(70px, max-content) 1fr 100px; max-height: 100vh; -ms-grid-column: 2; grid-column: 2; -ms-grid-row: 2; grid-row: 2; font-size: 1.2rem; background-color: #fff; line-height: normal; border-radius: 4px; box-shadow: 0px 2px 5px #999, 0px 10px 10px -5px #888; } .night .reactModal-overlay .reactModal-modal { background: #222; border-color: #000; box-shadow: 0px 0px 5px #999, 0px 0px 10px 0px #888; } .reactModal-overlay .reactModal-modal .reactModal-header { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; -ms-grid-row-align: center; align-items: center; -ms-grid-column-align: center; justify-items: center; } .reactModal-overlay .reactModal-modal .reactModal-header_spread { grid-column: 1 / 4; grid-gap: 10px; -webkit-align-items: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -ms-grid-column-align: center; justify-items: center; } .reactModal-overlay .reactModal-modal .reactModal-body { margin: 20px; overflow-y: auto; } .reactModal-overlay .reactModal-modal .reactModal-content { margin: 20px 40px; overflow-y: auto; } .reactModal-overlay .reactModal-modal .reactModal-content_nopadding { margin: 0px; overflow-y: auto; } .reactModal-overlay .reactModal-modal .reactModal-footer { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; } .reactModal-overlay .reactModal-modal .reactModal-footer .reactModal-footerLeft { -ms-grid-column: 1; grid-column: 1; -webkit-justify-content: start; -ms-flex-pack: start; justify-content: start; justify-self: start; -webkit-align-content: end; -ms-flex-line-pack: end; align-content: end; -webkit-align-self: end; -ms-flex-item-align: end; align-self: end; padding-left: 40px; } .reactModal-overlay .reactModal-modal .reactModal-footer .reactModal-footerLeft button { margin: 0px; } .reactModal-overlay .reactModal-modal .reactModal-footer .reactModal-footerRight { -ms-grid-column: 2; grid-column: 2; -webkit-justify-content: end; -ms-flex-pack: end; justify-content: end; justify-self: end; -webkit-align-content: end; -ms-flex-line-pack: end; align-content: end; -webkit-align-self: end; -ms-flex-item-align: end; align-self: end; padding-right: 40px; } .reactModal-overlay .reactModal-modal .reactModal-footer .reactModal-footerRight button { margin: 0px; } .ark-table > tfoot .btn { margin: 0; } .ark-table-item-count { font-size: 1.6rem; } .logbook { margin-top: -6.5rem; padding-top: 6.5rem; } @media (min-width: 600px) { .logbook { padding-right: 27rem; margin-top: -8rem; padding-top: 8rem; } } @media (min-width: 769px) { .logbook { font-size: 1.2em; } } @media (min-width: 1025px) { .logbook { padding-right: 42.5rem; margin-top: -8.5rem; padding-top: 8.5rem; } } .log-title { position: relative; margin: 0 0 1.5rem; clear: both; } @media (min-width: 769px) { .log-title { margin: 0 0 2rem; font-size: 3rem; } } @media (min-width: 1025px) { .log-title { margin: 0 0 2.5rem; } } .log-title a { color: #00aee6; display: block; } .log-title a:focus { outline: none; } .night .log-title { border-color: #009cac; } .night .log-title a { color: #009cac; } .log-title .remove-log { height: 30px; margin-top: 0.5rem; padding: 0.5rem 1rem 0.5rem 0.5rem; font-size: 1.3rem; opacity: 0.1; transition: opacity 200ms ease; } .log-title:hover .collapse-arrow, .log-title:hover .remove-log { opacity: 0.8; } .logbook-side { position: fixed; width: 25rem; height: 90%; overflow: auto; right: 0; overflow-y: auto; max-height: 90vh; } @media (max-width: 599px) { .logbook-side { display: none; } } @media (min-width: 1025px) { .logbook-side { width: 40rem; } } .logbook-side h3 { margin-top: 0; } .logbook-side ul { margin: 0; padding: 0; list-style: none; font-size: 1.6rem; } .logbook-side ul li { transition: all 200ms ease; } .logbook-side ul .active { font-family: "IBM Plex Sans", sans-serif; font-weight: 700; font-variation-settings: "wght" 700; margin-left: -1.5rem; } .log { max-width: 84rem; clear: both; } .log form { clear: both; padding: 0; } @media (min-width: 600px) { .log form { padding: 0; } } legend { margin-bottom: 0.5rem; border: none; color: var(--color-text); transition: color 300ms; font-size: 1.3rem; } .night legend { color: #bababa; } @media (min-width: 769px) { legend { font-size: 1.8rem; } } .remove-log { padding-left: 2rem; padding-right: 2rem; } input[type="checkbox"] + label svg { width: 2rem; margin: 0 0.5rem; float: left; } input[type="checkbox"] + label svg rect { stroke: #afafaf; fill: rgba(255, 255, 255, 0.9); } input[type="checkbox"] + label svg .checkmark, input[type="checkbox"] + label svg .indeterminate { fill: #00aee6; -webkit-transform: scale(0.66, 0.66); transform: scale(0.66, 0.66); -webkit-transform-origin: center; transform-origin: center; transition: all 200ms; opacity: 0; } input[type="checkbox"]:checked + label .checkmark, input[type="checkbox"]:indeterminate label .indeterminate { -webkit-transform: scale(1, 1); transform: scale(1, 1); transition: all 200ms; opacity: 1; } .log [data-balloon] { color: #ccc; font-size: calc(0.65rem + 0.7em); } .log [data-balloon]:after { font-family: "IBM Plex Sans", sans-serif; } .submit-group { position: absolute; bottom: 0px; left: 0px; right: 0px; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; padding: 0px 20px; height: 80px; border-top: solid thin #ccc; } .submit-group button { margin: 0px; } .submit-group .submit-group_left { display: -webkit-flex; display: -ms-flexbox; display: flex; justify-self: start; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .submit-group .submit-group_left button { margin-right: 10px; } .submit-group .submit-group_right { display: -webkit-flex; display: -ms-flexbox; display: flex; justify-self: end; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .submit-group .submit-group_right button { margin-left: 10px; } .log-end-notes { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 1rem; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; } .log-end-notes h4 { margin-right: 1rem; } .float-label-control.log-input-group, .float-label-control { position: relative; margin-bottom: 5px; padding-top: 1.2rem; } @media (min-width: 769px) { .float-label-control.log-input-group, .float-label-control { padding-top: 1.8rem; } } .float-label-control.log-input-group ::-webkit-input-placeholder, .float-label-control ::-webkit-input-placeholder { color: #878787; font-family: "IBM Plex Sans", sans-serif; } .float-label-control.log-input-group :-moz-placeholder, .float-label-control :-moz-placeholder { color: #878787; font-family: "IBM Plex Sans", sans-serif; } .float-label-control.log-input-group ::-moz-placeholder, .float-label-control ::-moz-placeholder { color: #878787; font-family: "IBM Plex Sans", sans-serif; } .float-label-control.log-input-group :-ms-input-placeholder, .float-label-control :-ms-input-placeholder { color: #878787; font-family: "IBM Plex Sans", sans-serif; } .float-label-control.log-input-group input:-webkit-autofill, .float-label-control.log-input-group textarea:-webkit-autofill, .float-label-control.log-input-group select:-webkit-autofill, .float-label-control input:-webkit-autofill, .float-label-control textarea:-webkit-autofill, .float-label-control select:-webkit-autofill { border-top-left-radius: 5px; border-top-right-radius: 5px; } .float-label-control.log-input-group input:-webkit-autofill ~ .form-control-feedback, .float-label-control.log-input-group textarea:-webkit-autofill ~ .form-control-feedback, .float-label-control.log-input-group select:-webkit-autofill ~ .form-control-feedback, .float-label-control input:-webkit-autofill ~ .form-control-feedback, .float-label-control textarea:-webkit-autofill ~ .form-control-feedback, .float-label-control select:-webkit-autofill ~ .form-control-feedback { right: 0; } .float-label-control.log-input-group input, .float-label-control.log-input-group textarea, .float-label-control.log-input-group.has-error input, .float-label-control.log-input-group.has-error textarea, .float-label-control.log-input-group.has-warning input, .float-label-control.log-input-group.has-warning textarea, .float-label-control.log-input-group.has-success input, .float-label-control.log-input-group.has-success textarea, .float-label-control input, .float-label-control textarea, .float-label-control.has-error input, .float-label-control.has-error textarea, .float-label-control.has-warning input, .float-label-control.has-warning textarea, .float-label-control.has-success input, .float-label-control.has-success textarea { font-size: 1em; font-family: "IBM Plex Sans", sans-serif; font-weight: 100; box-shadow: none; -webkit-box-shadow: none; } .float-label-control.log-input-group input.empty, .float-label-control.log-input-group textarea.empty, .float-label-control.log-input-group.has-error input.empty, .float-label-control.log-input-group.has-error textarea.empty, .float-label-control.log-input-group.has-warning input.empty, .float-label-control.log-input-group.has-warning textarea.empty, .float-label-control.log-input-group.has-success input.empty, .float-label-control.log-input-group.has-success textarea.empty, .float-label-control input.empty, .float-label-control textarea.empty, .float-label-control.has-error input.empty, .float-label-control.has-error textarea.empty, .float-label-control.has-warning input.empty, .float-label-control.has-warning textarea.empty, .float-label-control.has-success input.empty, .float-label-control.has-success textarea.empty { font-family: "IBM Plex Sans", sans-serif; } .float-label-control.log-input-group input:focus, .float-label-control.log-input-group textarea:focus, .float-label-control.log-input-group.has-error input:focus, .float-label-control.log-input-group.has-error textarea:focus, .float-label-control.log-input-group.has-warning input:focus, .float-label-control.log-input-group.has-warning textarea:focus, .float-label-control.log-input-group.has-success input:focus, .float-label-control.log-input-group.has-success textarea:focus, .float-label-control input:focus, .float-label-control textarea:focus, .float-label-control.has-error input:focus, .float-label-control.has-error textarea:focus, .float-label-control.has-warning input:focus, .float-label-control.has-warning textarea:focus, .float-label-control.has-success input:focus, .float-label-control.has-success textarea:focus { box-shadow: none; -webkit-box-shadow: none; border-bottom-width: 3px; padding-bottom: 1px; } .float-label-control.log-input-group textarea:focus, .float-label-control textarea:focus { padding-bottom: 4px; } .float-label-control.log-input-group input, .float-label-control.log-input-group textarea, .float-label-control input, .float-label-control textarea { display: block; width: 100%; padding: 0.1em 0.5em 2px 0.5em; margin: 0; color: var(--color-text); outline: none; background: none; border: none; border-radius: 0; border-bottom: 1px solid var(--color-text); } .float-label-control.log-input-group input:focus, .float-label-control.log-input-group textarea:focus, .float-label-control input:focus, .float-label-control textarea:focus { border-color: #00aee6; } .night .float-label-control.log-input-group input, .night .float-label-control.log-input-group textarea, .night .float-label-control input, .night .float-label-control textarea { color: #bababa; border-color: #bababa; } .night .float-label-control.log-input-group input:focus, .night .float-label-control.log-input-group textarea:focus, .night .float-label-control input:focus, .night .float-label-control textarea:focus { border-color: #009cac; } .float-label-control.log-input-group input, .float-label-control input { height: 3.4rem; } @media (min-width: 769px) { .float-label-control.log-input-group input, .float-label-control input { height: 3.8rem; } } .float-label-control.log-input-group textarea, .float-label-control textarea { padding: 0.1em 0 5px 0.5em; border-left-width: 1px !important; } .float-label-control.log-input-group label, .float-label-control label { position: absolute; font-weight: normal; font-variation-settings: "wght" 400; top: 0; left: 0.58em; color: #878787; font-size: 1.3rem; z-index: -1; -webkit-animation: float-labels 300ms none ease-out; animation: float-labels 300ms none ease-out; animation-play-state: running !important; -webkit-animation-play-state: running !important; } .night .float-label-control.log-input-group label, .night .float-label-control label { color: #bababa; } @media (min-width: 769px) { .float-label-control.log-input-group label, .float-label-control label { font-size: 1.57rem; } } .float-label-control.log-input-group input.empty ~ label, .float-label-control.log-input-group textarea.empty ~ label, .float-label-control input.empty ~ label, .float-label-control textarea.empty ~ label { top: 1.7em; font-size: 1.4rem; color: transparent; animation: none; -webkit-animation: none; } @media (min-width: 769px) { .float-label-control.log-input-group input.empty ~ label, .float-label-control.log-input-group textarea.empty ~ label, .float-label-control input.empty ~ label, .float-label-control textarea.empty ~ label { font-size: 1.57rem; } } .float-label-control.log-input-group input:not(.empty) ~ label, .float-label-control.log-input-group textarea:not(.empty) ~ label, .float-label-control input:not(.empty) ~ label, .float-label-control textarea:not(.empty) ~ label { z-index: 1; } .float-label-control.log-input-group input:not(.empty):focus ~ label, .float-label-control.log-input-group textarea:not(.empty):focus ~ label, .float-label-control input:not(.empty):focus ~ label, .float-label-control textarea:not(.empty):focus ~ label { color: #878787; } .float-label-control.log-input-group.label-bottom label, .float-label-control.label-bottom label { -webkit-animation: float-labels-bottom 300ms none ease-out; animation: float-labels-bottom 300ms none ease-out; } .float-label-control.log-input-group.label-bottom input:not(.empty) ~ label, .float-label-control.log-input-group.label-bottom textarea:not(.empty) ~ label, .float-label-control.label-bottom input:not(.empty) ~ label, .float-label-control.label-bottom textarea:not(.empty) ~ label { top: 3em; } .float-label-control.log-input-group .form-control-feedback, .float-label-control .form-control-feedback { padding-top: 1rem; right: -7px; } @media (min-width: 769px) { .float-label-control.log-input-group .form-control-feedback, .float-label-control .form-control-feedback { padding-top: 1.9rem; } } .float-label-control.log-input-group select.form-control ~ label, .float-label-control select.form-control ~ label { z-index: 1; } .form-control:not(.empty):valid { border-color: #16ea95; } .night .form-control:not(.empty):valid { border-color: #63862c; } .form-control:not(.empty):invalid { border-color: #ff775f; } .night .form-control:not(.empty):invalid { border-color: #d32600; } label + .icon-form-validation:before { color: #ccc; transition: color 200ms; } .form-control[readonly]:not([type="hidden"]) ~ label + .icon-form-validation:before { content: "\e923"; } .form-control[required]:not([type="hidden"]) ~ label + .icon-form-validation:before { content: "\e924"; } .form-control[disabled]:not([type="hidden"]) ~ label + .icon-form-validation:before { content: "\e897"; } .form-control:not(.empty):valid ~ label + .icon-form-validation:before { content: "\e81c"; color: #16ea95; } .night .form-control:not(.empty):valid ~ label + .icon-form-validation:before { color: #63862c; } .form-control:not(.empty):invalid ~ label + .icon-form-validation:before { content: "\e863"; color: #ff775f; } .night .form-control:not(.empty):invalid ~ label + .icon-form-validation:before { color: #d32600; } .form-group .form-control[readonly], .form-group .form-control[disabled], fieldset[disabled] .form-group .form-control { background-color: transparent; } @keyframes float-labels { 0% { opacity: 1; color: #aaa; top: 0.9em; font-size: 1.4rem; } 20% { font-size: 1.4rem; opacity: 0; } 30% { top: 0.9em; } 50% { opacity: 0; font-size: 1.57rem; } 100% { top: 0; opacity: 1; } } @-webkit-keyframes float-labels { 0% { opacity: 1; color: #aaa; top: 0.9em; font-size: 1.4rem; } 20% { font-size: 1.4rem; opacity: 0; } 30% { top: 0.9em; } 50% { opacity: 0; font-size: 1.3rem; } 100% { top: 0; opacity: 1; } } @keyframes float-labels-bottom { 0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.4rem; } 20% { font-size: 1.4rem; opacity: 0; } 30% { top: 0.1em; } 50% { opacity: 0; font-size: 1.3rem; } 100% { top: 3em; opacity: 1; } } @-webkit-keyframes float-labels-bottom { 0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.4rem; } 20% { font-size: 1.4rem; opacity: 0; } 30% { top: 0.1em; } 50% { opacity: 0; font-size: 1.3rem; } 100% { top: 3em; opacity: 1; } } @media (min-width: 769px) { @keyframes float-labels { 0% { opacity: 1; color: #aaa; top: 0.9em; font-size: 2rem; } 20% { font-size: 2rem; opacity: 0; } 30% { top: 0.9em; } 50% { opacity: 0; font-size: 1.57rem; } 100% { top: 0; opacity: 1; } } @-webkit-keyframes float-labels { 0% { opacity: 1; color: #aaa; top: 0.9em; font-size: 2rem; } 20% { font-size: 2rem; opacity: 0; } 30% { top: 0.9em; } 50% { opacity: 0; font-size: 1.57rem; } 100% { top: 0; opacity: 1; } } @keyframes float-labels-bottom { 0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 2rem; } 20% { font-size: 2rem; opacity: 0; } 30% { top: 0.1em; } 50% { opacity: 0; font-size: 1.57rem; } 100% { top: 3em; opacity: 1; } } @-webkit-keyframes float-labels-bottom { 0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 2rem; } 20% { font-size: 2rem; opacity: 0; } 30% { top: 0.1em; } 50% { opacity: 0; font-size: 1.57rem; } 100% { top: 3em; opacity: 1; } } } .formGroup { margin: 2rem 0 4rem 0; } .formGroup > legend { font-size: 2.5rem; font-family: "IBM Plex Sans", sans-serif; } input[type="number"], input[type="date"], input[type="time"] { -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-outer-spin-button, input[type="time"]::-webkit-inner-spin-button, input[type="time"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] ::-webkit-clear-button, input[type="date"] ::-webkit-clear-button, input[type="time"] ::-webkit-clear-button { display: none; -webkit-appearance: none; } input[type="date"]::-webkit-calendar-picker-indicator { -webkit-appearance: none; display: none; } input[type="number"]:not(.empty) { text-align: right; padding-right: 21px; padding-left: 0; } input[type="number"] ~ .help-block { text-align: right; } input:placeholder-shown { text-align: left; } input { background-color: transparent; color: var(--color-text); border-color: #00aee6; transition: color 300ms, border-color 300ms; min-width: 70px; } .night input { color: #bababa; border-color: #009cac; } .float-label-control.log-input-group textarea, .float-label-control textarea { border-left: 1px solid #ccc; } .form-previous-stats { border: 2px dashed #ccc; margin: 0 auto 4rem; padding: 2rem; width: 60%; } .form-previous-stats-title { margin: -3.5rem 0 4.5rem; height: 0; text-align: center; } .form-previous-stats-title span { background: #fff; padding: 1rem; } .form-previous-stats-list { width: 100%; margin: 0; padding: 0; list-style: none; } .form-previous-stats-list td { width: 50%; padding: 0 5px 5px 0; } .form-previous-log-title td { font-size: 1.6rem; font-family: "IBM Plex Sans", sans-serif; font-weight: 700; font-variation-settings: "wght" 700; text-align: center; } .form-previous-stats-label { text-align: right; } .form-previous-stats-links { margin-bottom: 0; font-size: 1.1rem; color: #999; text-align: right; } .form-row { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; margin-left: -0.75rem; margin-right: -0.75rem; } @media (min-width: 769px) { .form-row { margin-left: -1rem; margin-right: -1rem; } } @media (min-width: 1025px) { .form-row { margin-left: -1.25rem; margin-right: -1.25rem; } } .form-row-item { -webkit-flex: 1 1 0; -ms-flex: 1 1 0; flex: 1 1 0; margin-left: 0.75rem; margin-right: 0.75rem; } @media (min-width: 769px) { .form-row-item { margin-left: 1rem; margin-right: 1rem; } } @media (min-width: 1025px) { .form-row-item { margin-left: 1.25rem; margin-right: 1.25rem; } } .form-row-item-no-grow { -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; } .select2-container_deprecated.select2 { border: none; font-family: "IBM Plex Sans", sans-serif; font-weight: 700; font-variation-settings: "wght" 700; font-size: 1.1em; } .select2-container_deprecated .select2-selection, .select2-container_deprecated .select2-selection--single { padding: 0.1em 0em 1px 0em; height: 3.4rem; background: none; border: none; border-radius: 0; border-bottom: 1px solid #335149; transition: color 300ms, border-color 300ms; } .night .select2-container_deprecated .select2-selection, .night .select2-container_deprecated .select2-selection--single { border-color: #bababa; color: #bababa; } @media (min-width: 769px) { .select2-container_deprecated .select2-selection, .select2-container_deprecated .select2-selection--single { height: 3.8rem; line-height: 3.6rem; } } .select2-container_deprecated .select2-selection .select2-selection__rendered, .select2-container_deprecated .select2-selection--single .select2-selection__rendered { color: #333; transition: color 300ms, border-color 300ms; } .night .select2-container_deprecated .select2-selection .select2-selection__rendered, .night .select2-container_deprecated .select2-selection--single .select2-selection__rendered { border-color: #bababa; color: #bababa; } .select2-container_deprecated .select2-selection .select2-selection__arrow, .select2-container_deprecated .select2-selection .select2-selection__rendered, .select2-container_deprecated .select2-selection--single .select2-selection__arrow, .select2-container_deprecated .select2-selection--single .select2-selection__rendered { height: 28px; } @media (min-width: 769px) { .select2-container_deprecated .select2-selection .select2-selection__arrow, .select2-container_deprecated .select2-selection .select2-selection__rendered, .select2-container_deprecated .select2-selection--single .select2-selection__arrow, .select2-container_deprecated .select2-selection--single .select2-selection__rendered { height: 3rem; line-height: 3.2rem; } } .select2-container_deprecated .select2-selection:focus, .select2-container_deprecated .select2-selection--single:focus { outline: none; border-bottom-width: 2px; border-color: #00aee6; } .night .select2-container_deprecated .select2-selection:focus, .night .select2-container_deprecated .select2-selection--single:focus { border-color: #009cac; } .select2-container_deprecated .select2-dropdown { background-color: white; color: #333; } .night .select2-container_deprecated .select2-dropdown { background-color: #333; color: #bababa; } .select2-container_deprecated .select2-dropdown .select2-results__option[aria-selected="true"] { background-color: #bababa; } .night .select2-container_deprecated .select2-dropdown .select2-results__option[aria-selected="true"] { background-color: #58504a; } .select2-container_deprecated .select2-dropdown .select2-results__option.select2-results__option--highlighted { background-color: #00aee6; } .night .select2-container_deprecated .select2-dropdown .select2-results__option.select2-results__option--highlighted { background-color: #009cac; } .select2-container_deprecated .select2-dropdown.select2-dropdown--above { border-bottom: 1px solid #aaa; } .pinsubmit { position: relative; display: inline-block; padding: 0; background: linear-gradient(to bottom, #d0fbea 0%, #73f2bf 100%); width: 11rem; float: right; border: 1px solid #13d386; border-radius: 3px; transition: all 150ms; z-index: 100; } .pinsubmit.center { display: table; float: none; margin: 0 auto; } .pinsubmit:before { border-radius: inherit; background-image: linear-gradient(to bottom, #c2e24e 0%, #9dce37 100%); content: ""; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -100; transition: opacity 150ms; } .pinsubmit:hover { box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25); } .pinsubmit:hover:before { opacity: 1; } .pinsubmit:hover:active { box-shadow: none; } .pinsubmit.error { background: linear-gradient(to bottom, #f0b7b2 0%, #ecaca7 100%); border-color: #c00; } .pinsubmit.error:before { background-image: linear-gradient(to bottom, #f0b5b2 0%, #db9e99 100%); } .pinsubmit.disconnected { background: #bababa; border-color: #a1a1a1; } .pinsubmit input.form-control, .pinsubmit button.form-control { border: 0; margin: 0; background: none; border-radius: 0; transition: background 150ms; text-align: left; font-family: "IBM Plex Sans", sans-serif; color: #51711f; box-shadow: none; } .pinsubmit input.form-control:not([type="submit"]):focus, .pinsubmit input.form-control:active, .pinsubmit button.form-control:not([type="submit"]):focus, .pinsubmit button.form-control:active { box-shadow: none; background: rgba(255, 255, 255, 0.7); } .pinsubmit input.form-control:not([type="submit"]):focus::-moz-placeholder, .pinsubmit input.form-control:active::-moz-placeholder, .pinsubmit button.form-control:not([type="submit"]):focus::-moz-placeholder, .pinsubmit button.form-control:active::-moz-placeholder { color: transparent; } .pinsubmit input.form-control:disabled, form:invalid .pinsubmit input.form-control, .pinsubmit button.form-control:disabled, form:invalid .pinsubmit button.form-control { cursor: not-allowed; border-color: #ccc; } .pinsubmit input.form-control.input-lg, .pinsubmit .input-group-lg > input.form-control, .pinsubmit .input-group-lg > .input-group-btn > input.form-control.btn, .pinsubmit button.form-control.input-lg, .pinsubmit .input-group-lg > button.form-control, .pinsubmit .input-group-lg > .input-group-btn > button.form-control.btn { padding-top: 8px; padding-bottom: 8px; height: 40px; } .pinsubmit input.form-control::-moz-placeholder, .pinsubmit button.form-control::-moz-placeholder { color: #51711f; font-family: "IBM Plex Sans", sans-serif; } .pinsubmit.error input.form-control { color: #a70000; } .pinsubmit.error input.form-control::-moz-placeholder, .pinsubmit.error input.form-control::-webkit-input-placeholder, .pinsubmit.error input.form-control:-ms-input-placeholder { color: #a70000; } .pinsubmit.error button.form-control { color: #a70000; } .pinsubmit label { display: none; } .pinsubmit > .form-control-feedback { color: #5d8321; z-index: 2; padding-left: 1rem; overflow: hidden; box-sizing: content-box; } .pinsubmit > .form-control-feedback:before { content: ""; display: block; position: absolute; top: -3rem; right: -2rem; bottom: -3rem; left: 1rem; background: rgba(0, 0, 0, 0.05); border-left: 1px solid; -webkit-transform: rotate(20deg); transform: rotate(20deg); z-index: -1; } .pinsubmit > .form-control-feedback > div { border: none; background: none; margin-bottom: -100%; } .pinsubmit > .form-control-feedback > div:before { z-index: 3; } .pinsubmit.error .form-control-feedback { color: #a70000; } .pinsubmit.error .form-control-feedback:before { border-left: 1px solid #c00; background: rgba(153, 0, 0, 0.5); } .pinsubmit.small { height: 2.8rem; } .pinsubmit.small .form-control, .pinsubmit.small .form-control-feedback { padding-top: 0; height: 2.6rem; line-height: 2.8rem; } .pinsubmit.wide { width: 17rem; } .pinsubmit.secondary { border-color: #00aee6; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(243, 243, 243, 0.75) 100% ); } .pinsubmit.secondary:before { background: linear-gradient(to bottom, #fdfdfd 0%, rgba(237, 237, 237, 0.75) 100%); } .pinsubmit.secondary .form-control, .pinsubmit.secondary .form-control-feedback { color: #007281; } .pinsubmit.secondary .form-control-feedback:before { border-color: #00aee6; } form:invalid .pinsubmit { background: linear-gradient(to bottom, #d8eb97 0%, #daeeaf 100%); } form:invalid .pinsubmit:hover { box-shadow: none; } .pinsubmit > .form-control.input-lg ~ .form-control-feedback, .input-group-lg.pinsubmit > .form-control ~ .form-control-feedback, .input-group-lg > .input-group-btn.pinsubmit > .form-control.btn ~ .form-control-feedback { width: 40px; height: 40px; line-height: 40px; } .locked { color: purple; } .vut-e-line { position: relative; padding-right: 6rem; min-height: 5rem; } .vut-e-btn { position: absolute; right: 0; bottom: 15px; text-align: center; background: none; } .vut-e-rm { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; width: 35px; } .vut-e-rm button { background: none; } .vut-e-rmm { padding: 17px !important; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; } .vut-e-line { position: relative; padding-right: 6rem; min-height: 5rem; display: inline-block; } .vut-e-line .btn, .vut-e-rm .btn { margin: 0; padding: 0.4rem; color: #00aee6; border-radius: 0; } .vut-e-line .btn:hover, .vut-e-rm .btn:hover { background: none; color: #333; cursor: pointer; } .vut-e-line .btn:focus, .vut-e-rm .btn:focus { outline: 0; border-bottom: 2px solid #00aee6; } .vut-e-rm { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; width: 3.5rem; } .vut-e-rm .btn { padding: 1.5rem 0.4rem 2rem; } .btn-form-refresh { margin: 2rem 0 0; } .input-container { margin: 1em 0; max-width: 300px; background-color: #ededed; border: 1px solid #dfdfdf; border-radius: 5px; } .input-container h3 { text-align: left; } input[type="file"] { display: none; } .file-info { font-size: 0.9em; } .browse-btn { background: #03a595; color: #fff; min-height: 35px; padding: 10px; border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .browse-btn:hover { background: #4ec0b4; } .voyageList { display: -ms-grid; display: grid; grid-gap: 8px; margin-bottom: 50px; } .voyageList .problem_err { background-color: rgba(255, 0, 0, 0.1); } .voyageList .problem_warn { background-color: rgba(255, 255, 0, 0.1); } .voyageList .problem_err:hover { background-color: rgba(255, 0, 0, 0.1) !important; } .voyageList .problem_warn:hover { background-color: rgba(255, 255, 0, 0.1) !important; } .voyageItem { cursor: pointer; display: -ms-grid; display: grid; -ms-grid-columns: 250px auto 150px; grid-template-columns: 250px auto 150px; -ms-grid-rows: auto; grid-template-rows: auto; grid-template-areas: "ref snapshot report" "details details details" "problems problems problems"; -ms-grid-row-align: center; align-items: center; border-radius: 3px; padding: 10px; box-shadow: 0px 0px 0px 1px #ccc; transition: box-shadow 300ms linear, height 300ms linear; } .voyageItem .voyageDetails { grid-area: details; border-top: solid 3px #00aee6; margin-top: 10px; padding-top: 20px; height: 0px; display: none; } .voyageItem .voyageDetails .noPointer { cursor: default; } .voyageItem .voyageProblems { font-style: italic; grid-area: details; padding: 5px 0px; } .voyageItem:hover { box-shadow: 0px 0px 0px 1px #ccc, 0px 0px 20px -2px #b0c4de; } .voyageItem.troubledVoyage { background-color: rgba(255, 0, 0, 0.1); } .voyageItem.inView { box-shadow: 0px 0px 0px 1px #ccc, 0px 0px 25px 6px #b0c4de; background: transparent !important; height: auto; padding: 20px; } .voyageItem.inView .voyageDetails { display: block; height: auto; min-height: 100px; max-height: 600px; overflow-y: auto; } .voyagePlaceholder { height: 10px; border-radius: 10px; background-color: #eee; } .voyageItem span { grid-area: ref; font-size: 22px; margin-right: 30px; } .voyageSnapshot { grid-area: snapshot; display: -ms-grid; display: grid; -ms-grid-columns: (minmax(auto, 15px)) [auto-fit]; grid-template-columns: repeat(auto-fit, minmax(auto, 15px)); grid-gap: 5px; -ms-grid-column-align: center; justify-items: center; } .voyageItem button { grid-area: report; } .log_warnings { box-shadow: 0px 6px 0px -1px #9a8af1; } .log_errors { box-shadow: 0px 6px 0px -1px red; } .openRow { border-bottom: solid 2px #9683ff; } .overview-content { padding-top: 20px; } .overview-table { overflow: auto; height: 489px; border-radius: 3px; padding: 10px; margin-bottom: 10px; } .btn-group2 * { margin: 0px; border-radius: 2px; } .btn-group2 button { color: white !important; } .btn-group2 span { color: #000; } .night .btn-group2 span { color: #fff; } .status_queued { background: #fcffe2; color: #aaa; font-style: italic; } .night .status_queued { background-color: #626353; } .status_amended { background: #f1f1f1; color: #aaa; font-style: italic; } .night .status_amended { background-color: #585858; } .status_deleted { background: #f1f1f1; color: #aaa; font-style: italic; } .night .status_deleted { background-color: #5d3e3e; } .status_verified { background-color: rgba(39, 0, 255, 0.06); } .night .nav-tabs > li.active > a, .night .nav-tabs > li.active > a:hover, .night .nav-tabs > li.active > a:focus { background-color: #333333; color: #fff; } .logbook-main.message { position: relative; height: 400px; } .logbook-main.message div { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; color: #bababa; } .logbook-main.message .large-icon { font-size: 10rem; } #logs-recent .records_menu { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #logs-recent .records_menu .record_label { font-size: 1.8rem; display: inline-block; padding: 0.75rem 0 0.75rem 0.75rem; } @media (min-width: 769px) { #logs-recent .records_menu .record_label { padding: 1rem 0 1rem 1rem; } } @media (min-width: 1025px) { #logs-recent .records_menu .record_label { padding: 1.25rem 0 1.25rem 1.25rem; } } #logs-recent .records_menu .record_label p { margin: 0; } #logs-recent .records_menu .record_actions { display: inline-block; margin: 0 1.5rem; min-width: 108px; } @media (min-width: 769px) { #logs-recent .records_menu .record_actions { margin: 0 2rem; } } @media (min-width: 1025px) { #logs-recent .records_menu .record_actions { margin: 0 2.5rem; } } #logs-recent .records_menu .record_actions .small { color: #bababa; } #logs-recent .records_menu .record_actions .btn { margin: 0; } #logs-recent .records_menu:hover { cursor: default; background-color: #efefef; } .logbook .deleted, .logbook .edited { color: #aa3333; } .logbook .deleted label, .logbook .edited label { text-decoration: line-through; } .logbook .alert { color: #aa3333; } @keyframes pc-dimmer { 0% { background-color: transparent; } 100% { background-color: rgba(0, 0, 0, 0.4); } } @-webkit-keyframes pc-dimmer { 0% { background-color: transparent; } 100% { background-color: rgba(0, 0, 0, 0.4); } } .pc-container { border-radius: 4px; background: #fcfcfc !important; } .pc-container div { margin-bottom: 20px; } .pc-container .pc-button { border: none !important; border-radius: 4px !important; color: #fff !important; height: 40px !important; width: 100px !important; } .pc-container .pc-button:last-child { margin-left: 10px !important; } .pc-button-cancel { background: #16ea95 !important; } .pc-button-success { background: #ff775f !important; } .records-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; list-style: none; margin: 0; padding: 0; margin-top: 20px; margin-bottom: 12px; transition: all 300ms; } @media (min-width: 769px) { .records-wrap { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } } .records-item { margin: 0 1.5rem 1.5rem 0; transition: margin-bottom 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86); } .records-item.record-book-open { position: relative; margin-bottom: 109rem; } @media (min-width: 1101px) { .records-item.record-book-open { margin-bottom: 75rem; } } @media (min-width: 769px) { .records-item { margin: 0 2rem 2rem 0; } } @media (min-width: 1025px) { .records-item { margin: 0 2.5rem 2.5rem 0; } } .records-card-wrap { position: relative; width: 25rem; height: 28rem; background: white; border: 1px solid #bbb; border-radius: 5px; cursor: pointer; transition: all 300ms; z-index: 20; } @media (min-width: 769px) { .records-card-wrap { width: 25rem; height: 28rem; } } @media (min-width: 1025px) { .records-card-wrap { width: 25rem; height: 28rem; } } .records-card-wrap:hover, .record-book-open .records-card-wrap { box-shadow: 0 2px 11px 0 #b8b8b8; -webkit-transform: scale(1.03); transform: scale(1.03); } .night .records-card-wrap:hover, .night .record-book-open .records-card-wrap { box-shadow: 0 2px 11px 0 #000; } .night .records-card-wrap { background: #222; border-color: #000; } .records-icon { height: 17rem; background: linear-gradient(135deg, #db69a3 0%, #c81b74 100%); text-align: center; font-size: 8rem; line-height: 17rem; color: #fff; border-top-left-radius: 4px; border-top-right-radius: 4px; } .night .records-icon { color: black; } .record-block.MARPOL, .records-icon.MARPOL { background: #00aee6; background-image: url(external/static.klappir.io/img/logo/ACE-Comply-pattern.svg); } .night .record-block.MARPOL, .night .records-icon.MARPOL { background-image: url(external/static.klappir.io/img/logo/ACE-Comply-pattern.svg), linear-gradient(135deg, #00a99d 0%, #00726a 100%); } .record-block.OPERATIONAL, .records-icon.OPERATIONAL { background: #ffc200; background-image: url(external/static.klappir.io/img/logo/ACE-Advance-pattern.svg); } .night .record-block.OPERATIONAL, .night .records-icon.OPERATIONAL { background-image: url(external/static.klappir.io/img/logo/ACE-Advance-pattern.svg), linear-gradient(135deg, #f36f21 0%, #9e4e20 100%); } .records-text { padding: 0.7rem; color: var(--color-text); text-align: center; font-size: 2.5rem; font-family: "IBM Plex Sans", sans-serif; margin: 0; } .night .records-text { color: #bababa; } .records-sign-now { display: block; float: left; height: 25%; width: 50%; padding: 0.5rem; color: #878787; font-size: 1.3rem; line-height: 1em; text-align: center; transition: color 200ms; } .records-sign-now span { font-size: 2.8rem; line-height: 1em; display: block; color: #6e6e6e; transition: color 200ms; } .records-sign-now:hover { color: #335149; } .records-sign-now:hover span { color: #335149; } .records-sign-now:focus { color: black; outline: none; } .records-sign-now:focus span { color: black; } .night .records-sign-now { color: #bababa; } .night .records-sign-now:hover { color: lightgray; } .night .records-sign-now:hover span { color: lightgray; } .night .records-sign-now:focus { color: white; } .night .records-sign-now:focus span { color: white; } .records-sign-urgent { color: #ff0000; } .records-sign-urgent span { color: #ff0000; } .record-drawer { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; position: absolute; top: 29.5rem; height: 0; width: 100vw; overflow-x: hidden; margin-left: -5rem; padding: 1.5rem; background: white; border: 1px solid #888; box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.5); opacity: 0; transition: color 300ms, border 300ms, background 300ms, height 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86) 50ms, opacity 200ms; } .night .record-drawer { border-color: #000; background: #222; } .record-drawer > * { -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; } .record-drawer.visible { height: 105rem; opacity: 1; } @media (min-width: 1101px) { .record-drawer.visible { height: 70rem; } .record-drawer > * { -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1; } } @media (min-width: 769px) { .record-drawer { top: 30rem; padding: 2rem 2rem 2rem 10rem; } } @media (min-width: 1025px) { .record-drawer { top: 30.5rem; padding: 2.5rem 2.5rem 2.5rem 10.5rem; } } @media (min-width: 1101px) { .record-drawer-info { -webkit-flex: 0 0 300px; -ms-flex: 0 0 300px; flex: 0 0 300px; } } @media (min-width: 1501px) { .record-drawer-info { -webkit-flex: 0 0 300px; -ms-flex: 0 0 300px; flex: 0 0 300px; } } .record-drawer-header { font-size: 2.2em; max-width: none; margin-bottom: 0.5rem; width: 250px; } .record-drawer-version { font-style: italic; margin-bottom: 1.5rem; } @media (min-width: 769px) { .record-drawer-version { margin-bottom: 2rem; } } @media (min-width: 1025px) { .record-drawer-version { margin-bottom: 2.5rem; } } .record-drawer-ship-info { margin-bottom: 3rem; max-width: none; } @media (min-width: 769px) { .record-drawer-ship-info { margin-bottom: 4rem; } } @media (min-width: 1025px) { .record-drawer-ship-info { margin-bottom: 5rem; } } .record-drawer-ship-info > h3, .record-drawer-ship-info > h4, .record-drawer-ship-info > p { display: inline; margin-right: 1rem; line-height: 2rem; } .record-drawer-ship-info > h3, .record-drawer-ship-info > h4 { font-size: 1.8rem; } .record-drawer-ship-info > p { line-height: 3rem; } .record-drawer-records .panel-collapse { overflow-y: auto; } @media (min-width: 769px) { .record-drawer-records .panel-collapse { max-height: 89rem; } } @media (min-width: 1025px) { .record-drawer-records .panel-collapse { max-height: 54rem; } } div.record-drawer-arrow { position: absolute; height: 2.2rem; width: 2.2rem; top: 28.4rem; left: 11.4rem; z-index: 10; overflow: hidden; transition: -webkit-transform 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86) 100ms; transition: transform 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86) 100ms; transition: transform 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86) 100ms, -webkit-transform 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86) 100ms; -webkit-transform: rotate(45deg) scale(0); transform: rotate(45deg) scale(0); } @media (min-width: 769px) { div.record-drawer-arrow { height: 2.8rem; width: 2.8rem; top: 28.6rem; left: 11.1rem; } } @media (min-width: 1025px) { div.record-drawer-arrow { height: 3.2rem; width: 3.2rem; top: 28.9rem; left: 10.9rem; } } div.record-drawer-arrow > div { height: 97px; width: 97px; background: white; border: 1px solid #888; box-shadow: inset 0 0 14px 0 rgba(0, 0, 0, 0.5); transition: all 300ms; } .night div.record-drawer-arrow > div { border-color: #000; background: #222; } .records-new-log-select { padding-left: 0; margin-bottom: 3rem; } @media (min-width: 769px) { .records-new-log-select { margin-bottom: 4rem; } } @media (min-width: 1025px) { .records-new-log-select { margin-bottom: 5rem; } } .records-new-log-select li { list-style: none; font-size: 2rem; padding: 1.5rem 1.5rem 1.5rem 3.5rem; text-indent: -2rem; transition: all 150ms ease; } .records-new-log-select li:hover { box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3); background: #f2f2f2; color: #000; } .night .records-new-log-select li:hover { background: #161616; color: white; } .disabled_cursor { cursor: not-allowed; } .document_library .documentTable { margin-top: 10px; } .document_library .active { background-color: #16ea95 !important; } .attachment_group { display: inline-block; border: solid thin #bababa; box-shadow: 0px 0px 2px #bababa; border-radius: 4px; padding: 1px 2px; } .night .well { background-color: #444; border-color: #111; } .night hr { border-color: #666; } .night .table > thead > tr > th, .night .table > thead > tr > td, .night .table > tbody > tr > th, .night .table > tbody > tr > td, .night .table > tfoot > tr > th, .night .table > tfoot > tr > td { border-color: #333; } .record-drawer-records .panel { background-color: rgba(1, 1, 1, 0) !important; } .night .panel { border: 0px; } .night .panel-heading { background-color: #333; } .night .panel-default > .panel-heading + .panel-collapse > .panel-body { border: 0px; } .record-drawer-info > * * { text-align: left; } .record-drawer-info #actions { margin-left: -25px; } .record-drawer-info > * { text-align: left; } #extra_headers > th { border: solid thin #ddd; } #extra_headers ~ tr th { border: solid thin #ddd; } .openRecord { cursor: pointer; } .table.center th { text-align: center; } .table.center td { text-align: center; } .table .record-is-open { font-family: "IBM Plex Sans", sans-serif; font-weight: 700; font-variation-settings: "wght" 700; } .table .record-is-open + tr > td { border-top: none; } .sign-step { text-align: left; padding-top: 1rem; background: inherit; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-row-align: center; align-items: center; } .sign-step form { display: -ms-grid; display: grid; -ms-grid-columns: auto max-content; grid-template-columns: auto max-content; grid-gap: 10px; } .sign-step button { margin-top: 1rem; } .sign-step .pinsubmit { margin-top: 1rem; margin-left: 1rem; display: inline-table; } .sign-step .signName { width: 30%; display: inline-block; margin: 0; } .sign-step .float-label-control { padding-top: 1rem; } .ark-modal-body .loading_dialog { color: #bababa; position: absolute; left: 50%; top: 50%; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ark-modal-body .loading_dialog span { font-size: 4rem; } .ark-modal-body .loading_dialog .icon--big { color: #bababa; } .ark-modal tr.edited { color: #afafaf; } .ark-modal tr.edited { color: #afafaf; text-decoration: line-through; position: relative; } .qrmodal #wrapper { position: absolute; top: 40%; left: 50%; -webkit-transform: translate(-50%, -40%); transform: translate(-50%, -40%); text-align: center; } .qrmodal #path { border: solid thin #16ea95; box-shadow: 0px 0px 4px #16ea95; border-radius: 4px; padding: 5px; margin-top: 10px; color: #0087b3; } .qrmodal #path .documentUrl { width: 100%; border: none; } .qrmodal p { margin-top: 10px; } .root_with_navs { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow-y: auto; overflow-x: hidden; background-color: white; color: var(--color-text); transition: color, background, border-color 300ms, 300ms, 300ms; } .night .root_with_navs { background-color: #333; color: #bababa; } .root_with_navs nav { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 8rem; border-right: 1px solid #bbb; border-top: none; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.27); } .root_with_navs nav div { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .root_with_navs .subNav { width: 220px; padding: 2rem; background: #e6e6e6; border-right: 1px solid #bbb; } .night .root_with_navs .subNav { background: #222; border-color: #000; color: #a8a6b5; } .root_with_navs .main { -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 4rem; height: 100%; width: 100%; overflow: hidden; overflow-y: auto; } .root_with_navs .header-right { position: absolute; right: 20px; z-index: 200; -ms-grid-row: 1; grid-row: 1; -ms-grid-column: 3; grid-column: 3; display: -ms-grid; display: grid; -ms-grid-columns: auto auto; grid-template-columns: auto auto; grid-gap: 30px; justify-self: end; -ms-grid-row-align: center; align-items: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; background: #eee; padding: 20px 30px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; box-shadow: 0px 8px 4px -6px #6e6e6e; border: 1px solid #bbb; border-top: none; font-size: 1.5rem; } .night .root_with_navs .header-right { background-color: #272727; box-shadow: none; border: solid thin #aaa; border-top: none; color: #fff; } @media print { .root_with_navs { position: static; overflow-y: initial; overflow-x: initial; display: block; } .root_with_navs .main { padding: 0; height: auto; width: auto; overflow: initial; overflow-y: initial; } .root_with_navs nav { display: none; } .subNav { display: none; } } .logForm_modal-overlay { position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; background: var(--color_overlay-tint); -webkit-backdrop-filter: blur(1.1px); backdrop-filter: blur(1.1px); z-index: 1000; } .logForm_modal { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; flex-direction: column; -ms-flex-direction: column; width: 900px; max-width: 90vw; margin: 3vh auto; height: 94vh; overflow-y: auto; overflow-x: hidden; background: white; padding: 30px; border-radius: 9px; box-shadow: 0 10px 12px 5px rgba(0, 0, 0, 0.5); } .night .logForm_modal { background: #222; border-color: #000; box-shadow: 0 10px 12px 5px rgba(0, 0, 0, 0.2); } .logForm_modal.logForm_modal-expanded { height: 95vh; } .logsModal_header { text-align: center; margin-bottom: 20px; } .logsModal_buttons { position: relative; margin-top: 20px; margin-left: auto; } .logsModal_collapsed { height: 0px; display: none; transition: all 200ms ease; } .logsModal_expanded { height: auto; max-height: 1000px; transition: all 200ms ease; } .activeUsersHeader { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-row-align: center; align-items: center; grid-auto-flow: column; } .activeUsers_closeButton { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .fixed-layout { table-layout: fixed; } .recordBook-table th { font-weight: normal; font-variation-settings: "wght" 400; } .recordBook-cell p { margin: 0; } .recordBook-cell-date, .recordBook-cell-item, .recordBook-cell-code, .recordBook-cell-amend, .recordBook-cell-delete, .recordBook-cell-edit, .recordBook-cell-attachments { text-align: center; } .recordBook-cell-date { white-space: nowrap; } .recordBook-row .recordBook-cell.recordBook-cell-spacer { border-top: none; border-bottom: none; } .recordBook-row-inactive { color: var(--color_inactive); font-weight: bold; } .recordBook-row-amended { color: var(--color_amended); text-decoration: line-through; } .recordBook-row-amendedBy { text-align: right; font-style: italic; text-decoration: none; } .recordBook-row-signature .recordBook-cell-operation { text-align: right; font-style: italic; } @media print { html, body { size: A4; width: 210mm; height: 297mm; } html .landscape, body .landscape { size: A4 landscape; width: 297mm; } .header-right, .d-print-none { display: none !important; } } @media screen { .root_with_navs.hard-copy-layout, .hard-copy-layout { background: #777; } .hard-copy-wrap { background: white; margin: 0 auto 5mm; width: 210mm; padding: 10mm 15mm; border-radius: 1mm; box-shadow: 0px 3mm 2mm #333; } .hard-copy-layout .react_panel-floating { box-shadow: 0px 2px 4px -1px #333; } .landscape { padding: 10mm 5mm; } } .eorb-small { font-size: 12px; } .eorb-page-header { display: -ms-grid; display: grid; -ms-grid-columns: 1fr max-content; grid-template-columns: 1fr max-content; } .eorb-rb-title { display: -ms-grid; display: grid; -ms-grid-rows: min-content min-content; grid-template-rows: min-content min-content; } .eorb-rb-title h1 { font-size: 35px; font-weight: 900; font-variation-settings: "wght" 900; font-variant-caps: all-small-caps; line-height: 0.8; letter-spacing: 1px; } .eorb-machinery { margin-bottom: 0; font-size: 12px; } .eorb-ship-info { display: -ms-grid; display: grid; -ms-grid-columns: min-content 1fr; grid-template-columns: min-content 1fr; -ms-grid-row-align: center; align-items: center; justify-self: end; } .eorb-ship-info dt { font-weight: normal; font-variation-settings: "wght" 400; text-align: right; font-size: 14px; margin-right: 10px; font-variant-caps: all-petite-caps; line-height: 1; } .eorb-ship-info dd { font-size: 14px; } .hard-copy-page { -webkit-column-break-after: page; page-break-after: page; break-after: page; width: 100%; } .eorb-page-footer { display: -ms-grid; display: grid; -ms-grid-columns: 80px 1fr minmax(300px, 40%); grid-template-columns: 80px 1fr minmax(300px, 40%); -ms-grid-row-align: end; align-items: end; gap: 32px; font-size: 10px; margin-top: 20px; } .hard-copy-legal p { margin-bottom: 0.5em; } .hard-copy-legal p:last-of-type { margin-bottom: 0; } .hard-copy-verification-signature { font-size: 18px; margin: 0; line-height: 1.2; } .hard-copy-verification-date { display: block; font-size: 14px; line-height: calc(18px * 1.2); white-space: nowrap; float: right; } .hard-copy-verification-rank { font-style: italic; font-size: 12px; border-top: 1px solid #999; clear: both; } .hard-copy-print-date { margin-bottom: 0; text-align: right; } .hard-copy-print { -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: end; display: -ms-grid; display: grid; -ms-grid-columns: 200px 80px; grid-template-columns: 200px 80px; padding: 4px; -ms-grid-column-align: end; justify-items: end; -webkit-justify-content: end; -ms-flex-pack: end; justify-content: end; -webkit-align-content: end; -ms-flex-line-pack: end; align-content: end; -ms-grid-row-align: center; align-items: center; } .hard-copy-print-items { -webkit-align-self: start; -ms-flex-item-align: start; align-self: start; } .record-book-section { margin-bottom: 40px; } .record-book-section-header { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; fill: "IBM Plex Sans", sans-serif; position: -webkit-sticky; position: sticky; top: -40px; z-index: 10; padding: 0px 0px 20px; background: white; background: linear-gradient( 180deg, var(--background-color) 0%, var(--background-color) 87%, transparent 100% ); transition: 300ms ease-in-out; padding: 10px 0px; } .night .record-book-section-header { background: #333; background: linear-gradient( 180deg, var(--background-color) 0%, var(--background-color) 77%, transparent 100% ); } .record-book-section-header:hover { color: #00aee6; fill: #00aee6; } .record-book-section-header .btn { margin: 0; } .center { text-align: center; } .no-records { font-style: italic; font-size: 12px; }