From 97746e69624e2cddf43f18d42040ada62beaf0e1 Mon Sep 17 00:00:00 2001 From: Build Bot Date: Thu, 26 Oct 2023 16:10:18 +0000 Subject: [PATCH] Automatic css build --- styles.css | 4043 +--------------------------------------------------- 1 file changed, 2 insertions(+), 4041 deletions(-) diff --git a/styles.css b/styles.css index cf8e960..8ca966d 100755 --- a/styles.css +++ b/styles.css @@ -1,4041 +1,2 @@ -html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, nav, section, iframe, label { - margin: 0; - padding: 0; } - -a, img, button { - outline: none; } - -a { - color: inherit; - text-decoration: none; } - -h1, h2, h3, h4, h5, h6 { - font-weight: 300; } - -ul { - list-style: none; } - -th { - font-weight: 300; } - -input, select, textarea, .textarea, button { - box-sizing: border-box; - box-shadow: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0; } - input:focus, select:focus, textarea:focus, .textarea:focus, button:focus { - outline: none; } - -input[type=checkbox] { - margin-right: 5px; } - -button::-moz-focus-inner { - border: 0; } - -table { - border-collapse: separate; - border-spacing: 0; } - -i { - font-style: normal; } - -.clear { - clear: both; } - -pre { - font-family: var(--font-family); - background: #f4f4f4; - border: 1px solid #ddd; - padding: 1rem; - overflow-x: auto; - counter-reset: line; - width: 100%; - box-sizing: border-box; - white-space: pre-wrap; } - pre span { - display: block; } - pre span:before { - counter-increment: line; - content: counter(line); - display: inline-block; - border-right: 1px solid #ddd; - padding: 0 .5em; - margin-right: .5em; - color: #888; - width: 30px; } - -iframe { - padding: 0; - margin: 0; - border: none; - width: 100%; } - -.clean { - margin: 0; - padding: 0; - border: none; - outline: 0; - vertical-align: top; } - -.clean:focus { - outline: 0; } - -.rp { - position: relative; } - -.ap { - position: absolute; } - -.lf { - float: left; } - -.rf { - float: right; } - -.op { - margin: 0 auto; } - -.rT { - text-align: right; } - -.lT { - text-align: left; } - -.cT { - text-align: center; } - -.f-w { - width: 100%; - max-width: none; } - -.f-h { - height: 100%; - max-height: none; } - -.vT { - vertical-align: top; } - -.vB { - vertical-align: bottom; } - -.vM { - vertical-align: middle; } - -.n-wrap { - white-space: nowrap; } - -.p, -.max, .min, .close, .cancel, .filter, .ok, .search, .abort, .sort { - cursor: pointer; } - -.vC { - display: table-cell; - vertical-align: middle; - white-space: nowrap; } - -.vh { - display: none !important; } - -.x-overflow { - overflow-x: auto; } - -.nobreak, .nowrap { - white-space: nowrap; } - -.center { - margin: 0 auto; } - -.centerText { - text-align: center; } - -.rightText { - text-align: right; } - -.floatLeft { - float: left; } - -.floatRight { - float: right; } - -.pAlignTable { - display: table; - width: 100%; } - -.vCenterTable { - display: table-cell; - vertical-align: middle; } - -.h-overflow { - overflow-x: auto; } - -.overflowfix { - overflow: auto; } - -.hidden { - display: none !important; } - -/*! - * animate.css -http://daneden.me/animate - * Version - 3.5.1 - * Licensed under the MIT license - http://opensource.org/licenses/MIT - * - * Copyright (c) 2016 Daniel Eden - */ -.animated { - animation-duration: 0.5s; - animation-fill-mode: both; } - -.animated.infinite { - animation-iteration-count: infinite; } - -.animated.hinge { - animation-duration: 2s; } - -.animated.medium-duration { - animation-duration: 2s; } - -.animated.flipOutX, -.animated.flipOutY, -.animated.bounceIn, -.animated.bounceOut { - animation-duration: .75s; } - -@keyframes bounce { - from, 20%, 53%, 80%, to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transform: translate3d(0, 0, 0); } - 40%, 43% { - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transform: translate3d(0, -30px, 0); } - 70% { - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transform: translate3d(0, -15px, 0); } - 90% { - transform: translate3d(0, -4px, 0); } } - -.bounce { - animation-name: bounce; - transform-origin: center bottom; } - -@keyframes flash { - from, 50%, to { - opacity: 1; } - 25%, 75% { - opacity: 0; } } - -.flash { - animation-name: flash; } - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@keyframes pulse { - from { - transform: scale3d(1, 1, 1); } - 50% { - transform: scale3d(1.05, 1.05, 1.05); } - to { - transform: scale3d(1, 1, 1); } } - -.pulse { - animation-name: pulse; } - -@keyframes heartBeat { - 0% { - transform: scale(1); } - 14% { - transform: scale(1.3); } - 28% { - transform: scale(1); } - 42% { - transform: scale(1.3); } - 70% { - transform: scale(1); } } - -.heartBeat { - animation-name: heartBeat; - animation-duration: calc(var(--animate-duration) * 1.3); - animation-timing-function: ease-in-out; } - -@keyframes rubberBand { - from { - transform: scale3d(1, 1, 1); } - 30% { - transform: scale3d(1.25, 0.75, 1); } - 40% { - transform: scale3d(0.75, 1.25, 1); } - 50% { - transform: scale3d(1.15, 0.85, 1); } - 65% { - transform: scale3d(0.95, 1.05, 1); } - 75% { - transform: scale3d(1.05, 0.95, 1); } - to { - transform: scale3d(1, 1, 1); } } - -.rubberBand { - animation-name: rubberBand; } - -@keyframes shake { - from, to { - transform: translate3d(0, 0, 0); } - 10%, 30%, 50%, 70%, 90% { - transform: translate3d(-10px, 0, 0); } - 20%, 40%, 60%, 80% { - transform: translate3d(10px, 0, 0); } } - -.shake { - animation-name: shake; } - -@keyframes headShake { - 0% { - transform: translateX(0); } - 6.5% { - transform: translateX(-6px) rotateY(-9deg); } - 18.5% { - transform: translateX(5px) rotateY(7deg); } - 31.5% { - transform: translateX(-3px) rotateY(-5deg); } - 43.5% { - transform: translateX(2px) rotateY(3deg); } - 50% { - transform: translateX(0); } } - -.headShake { - animation-timing-function: ease-in-out; - animation-name: headShake; } - -@keyframes swing { - 20% { - transform: rotate3d(0, 0, 1, 15deg); } - 40% { - transform: rotate3d(0, 0, 1, -10deg); } - 60% { - transform: rotate3d(0, 0, 1, 5deg); } - 80% { - transform: rotate3d(0, 0, 1, -5deg); } - to { - transform: rotate3d(0, 0, 1, 0deg); } } - -.swing { - transform-origin: top center; - animation-name: swing; } - -@keyframes tada { - from { - transform: scale3d(1, 1, 1); } - 10%, 20% { - transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } - 30%, 50%, 70%, 90% { - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } - 40%, 60%, 80% { - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } - to { - transform: scale3d(1, 1, 1); } } - -.tada { - animation-name: tada; } - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@keyframes wobble { - from { - transform: none; } - 15% { - transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } - 30% { - transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } - 45% { - transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } - 60% { - transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } - 75% { - transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } - to { - transform: none; } } - -.wobble { - animation-name: wobble; } - -@keyframes jello { - from, 11.1%, to { - transform: none; } - 22.2% { - transform: skewX(-12.5deg) skewY(-12.5deg); } - 33.3% { - transform: skewX(6.25deg) skewY(6.25deg); } - 44.4% { - transform: skewX(-3.125deg) skewY(-3.125deg); } - 55.5% { - transform: skewX(1.5625deg) skewY(1.5625deg); } - 66.6% { - transform: skewX(-0.78125deg) skewY(-0.78125deg); } - 77.7% { - transform: skewX(0.39062deg) skewY(0.39062deg); } - 88.8% { - transform: skewX(-0.19531deg) skewY(-0.19531deg); } } - -.jello { - animation-name: jello; - transform-origin: center; } - -@keyframes bounceIn { - from, 20%, 40%, 60%, 80%, to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 0% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); } - 20% { - transform: scale3d(1.1, 1.1, 1.1); } - 40% { - transform: scale3d(0.9, 0.9, 0.9); } - 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); } - 80% { - transform: scale3d(0.97, 0.97, 0.97); } - to { - opacity: 1; - transform: scale3d(1, 1, 1); } } - -.bounceIn { - animation-name: bounceIn; } - -@keyframes bounceInDown { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 0% { - opacity: 0; - transform: translate3d(0, -3000px, 0); } - 60% { - opacity: 1; - transform: translate3d(0, 25px, 0); } - 75% { - transform: translate3d(0, -10px, 0); } - 90% { - transform: translate3d(0, 5px, 0); } - to { - transform: none; } } - -.bounceInDown { - animation-name: bounceInDown; } - -@keyframes bounceInLeft { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 0% { - opacity: 0; - transform: translate3d(-3000px, 0, 0); } - 60% { - opacity: 1; - transform: translate3d(25px, 0, 0); } - 75% { - transform: translate3d(-10px, 0, 0); } - 90% { - transform: translate3d(5px, 0, 0); } - to { - transform: none; } } - -.bounceInLeft { - animation-name: bounceInLeft; } - -@keyframes bounceInRight { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - from { - opacity: 0; - transform: translate3d(3000px, 0, 0); } - 60% { - opacity: 1; - transform: translate3d(-25px, 0, 0); } - 75% { - transform: translate3d(10px, 0, 0); } - 90% { - transform: translate3d(-5px, 0, 0); } - to { - transform: none; } } - -.bounceInRight { - animation-name: bounceInRight; } - -@keyframes bounceInUp { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - from { - opacity: 0; - transform: translate3d(0, 3000px, 0); } - 60% { - opacity: 1; - transform: translate3d(0, -20px, 0); } - 75% { - transform: translate3d(0, 10px, 0); } - 90% { - transform: translate3d(0, -5px, 0); } - to { - transform: translate3d(0, 0, 0); } } - -.bounceInUp { - animation-name: bounceInUp; } - -@keyframes bounceOut { - 20% { - transform: scale3d(0.9, 0.9, 0.9); } - 50%, 55% { - opacity: 1; - transform: scale3d(1.1, 1.1, 1.1); } - to { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); } } - -.bounceOut { - animation-name: bounceOut; } - -@keyframes bounceOutDown { - 20% { - transform: translate3d(0, 10px, 0); } - 40%, 45% { - opacity: 1; - transform: translate3d(0, -20px, 0); } - to { - opacity: 0; - transform: translate3d(0, 2000px, 0); } } - -.bounceOutDown { - animation-name: bounceOutDown; } - -@keyframes bounceOutLeft { - 20% { - opacity: 1; - transform: translate3d(20px, 0, 0); } - to { - opacity: 0; - transform: translate3d(-2000px, 0, 0); } } - -.bounceOutLeft { - animation-name: bounceOutLeft; } - -@keyframes bounceOutRight { - 20% { - opacity: 1; - transform: translate3d(-20px, 0, 0); } - to { - opacity: 0; - transform: translate3d(2000px, 0, 0); } } - -.bounceOutRight { - animation-name: bounceOutRight; } - -@keyframes bounceOutUp { - 20% { - transform: translate3d(0, -10px, 0); } - 40%, 45% { - opacity: 1; - transform: translate3d(0, 20px, 0); } - to { - opacity: 0; - transform: translate3d(0, -2000px, 0); } } - -.bounceOutUp { - animation-name: bounceOutUp; } - -@keyframes fadeIn { - from { - opacity: 0; } - to { - opacity: 1; } } - -.fadeIn { - animation-name: fadeIn; } - -@keyframes fadeInDown { - from { - opacity: 0; - transform: translate3d(0, -100%, 0); } - to { - opacity: 1; - transform: none; } } - -.fadeInDown { - animation-name: fadeInDown; } - -@keyframes fadeInDownBig { - from { - opacity: 0; - transform: translate3d(0, -2000px, 0); } - to { - opacity: 1; - transform: none; } } - -.fadeInDownBig { - animation-name: fadeInDownBig; } - -@keyframes fadeInLeft { - from { - opacity: 0; - transform: translate3d(-100%, 0, 0); } - to { - opacity: 1; - transform: none; } } - -.fadeInLeft { - animation-name: fadeInLeft; } - -@keyframes fadeInLeftBig { - from { - opacity: 0; - transform: translate3d(-2000px, 0, 0); } - to { - opacity: 1; - transform: none; } } - -.fadeInLeftBig { - animation-name: fadeInLeftBig; } - -@keyframes fadeInRight { - from { - opacity: 0; - transform: translate3d(100%, 0, 0); } - to { - opacity: 1; - transform: none; } } - -.fadeInRight { - animation-name: fadeInRight; } - -@keyframes fadeInRightBig { - from { - opacity: 0; - transform: translate3d(2000px, 0, 0); } - to { - opacity: 1; - transform: none; } } - -.fadeInRightBig { - animation-name: fadeInRightBig; } - -@keyframes fadeInUp { - from { - opacity: 0; - transform: translate3d(0, 100%, 0); } - to { - opacity: 1; - transform: none; } } - -.fadeInUp { - animation-name: fadeInUp; } - -@keyframes fadeInUpBig { - from { - opacity: 0; - transform: translate3d(0, 2000px, 0); } - to { - opacity: 1; - transform: none; } } - -.fadeInUpBig { - animation-name: fadeInUpBig; } - -@keyframes fadeOut { - from { - opacity: 1; } - to { - opacity: 0; } } - -.fadeOut { - animation-name: fadeOut; } - -@keyframes fadeOutDown { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(0, 100%, 0); } } - -.fadeOutDown { - animation-name: fadeOutDown; } - -@keyframes fadeOutDownBig { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(0, 2000px, 0); } } - -.fadeOutDownBig { - animation-name: fadeOutDownBig; } - -@keyframes fadeOutLeft { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(-100%, 0, 0); } } - -.fadeOutLeft { - animation-name: fadeOutLeft; } - -@keyframes fadeOutLeftBig { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(-2000px, 0, 0); } } - -.fadeOutLeftBig { - animation-name: fadeOutLeftBig; } - -@keyframes fadeOutRight { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(100%, 0, 0); } } - -.fadeOutRight { - animation-name: fadeOutRight; } - -@keyframes fadeOutRightBig { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(2000px, 0, 0); } } - -.fadeOutRightBig { - animation-name: fadeOutRightBig; } - -@keyframes fadeOutUp { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(0, -100%, 0); } } - -.fadeOutUp { - animation-name: fadeOutUp; } - -@keyframes fadeOutUpBig { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(0, -2000px, 0); } } - -.fadeOutUpBig { - animation-name: fadeOutUpBig; } - -@keyframes flip { - from { - transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - animation-timing-function: ease-out; } - 40% { - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); - animation-timing-function: ease-out; } - 50% { - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); - animation-timing-function: ease-in; } - 80% { - transform: perspective(400px) scale3d(0.95, 0.95, 0.95); - animation-timing-function: ease-in; } - to { - transform: perspective(400px); - animation-timing-function: ease-in; } } - -.animated.flip { - backface-visibility: visible; - animation-name: flip; } - -@keyframes flipInX { - from { - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - animation-timing-function: ease-in; - opacity: 0; } - 40% { - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - animation-timing-function: ease-in; } - 60% { - transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - opacity: 1; } - 80% { - transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } - to { - transform: perspective(400px); } } - -.flipInX { - backface-visibility: visible !important; - animation-name: flipInX; } - -@keyframes flipInY { - from { - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - animation-timing-function: ease-in; - opacity: 0; } - 40% { - transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - animation-timing-function: ease-in; } - 60% { - transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - opacity: 1; } - 80% { - transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } - to { - transform: perspective(400px); } } - -.flipInY { - backface-visibility: visible !important; - animation-name: flipInY; } - -@keyframes flipOutX { - from { - transform: perspective(400px); } - 30% { - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - opacity: 1; } - to { - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - opacity: 0; } } - -.flipOutX { - animation-name: flipOutX; - backface-visibility: visible !important; } - -@keyframes flipOutY { - from { - transform: perspective(400px); } - 30% { - transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - opacity: 1; } - to { - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - opacity: 0; } } - -.flipOutY { - backface-visibility: visible !important; - animation-name: flipOutY; } - -@keyframes lightSpeedIn { - from { - transform: translate3d(100%, 0, 0) skewX(-30deg); - opacity: 0; } - 60% { - transform: skewX(20deg); - opacity: 1; } - 80% { - transform: skewX(-5deg); - opacity: 1; } - to { - transform: none; - opacity: 1; } } - -.lightSpeedIn { - animation-name: lightSpeedIn; - animation-timing-function: ease-out; } - -@keyframes lightSpeedOut { - from { - opacity: 1; } - to { - transform: translate3d(100%, 0, 0) skewX(30deg); - opacity: 0; } } - -.lightSpeedOut { - animation-name: lightSpeedOut; - animation-timing-function: ease-in; } - -@keyframes rotateIn { - from { - transform-origin: center; - transform: rotate3d(0, 0, 1, -200deg); - opacity: 0; } - to { - transform-origin: center; - transform: none; - opacity: 1; } } - -.rotateIn { - animation-name: rotateIn; } - -@keyframes rotateInDownLeft { - from { - transform-origin: left bottom; - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } - to { - transform-origin: left bottom; - transform: none; - opacity: 1; } } - -.rotateInDownLeft { - animation-name: rotateInDownLeft; } - -@keyframes rotateInDownRight { - from { - transform-origin: right bottom; - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } - to { - transform-origin: right bottom; - transform: none; - opacity: 1; } } - -.rotateInDownRight { - animation-name: rotateInDownRight; } - -@keyframes rotateInUpLeft { - from { - transform-origin: left bottom; - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } - to { - transform-origin: left bottom; - transform: none; - opacity: 1; } } - -.rotateInUpLeft { - animation-name: rotateInUpLeft; } - -@keyframes rotateInUpRight { - from { - transform-origin: right bottom; - transform: rotate3d(0, 0, 1, -90deg); - opacity: 0; } - to { - transform-origin: right bottom; - transform: none; - opacity: 1; } } - -.rotateInUpRight { - animation-name: rotateInUpRight; } - -@keyframes rotateOut { - from { - transform-origin: center; - opacity: 1; } - to { - transform-origin: center; - transform: rotate3d(0, 0, 1, 200deg); - opacity: 0; } } - -.rotateOut { - animation-name: rotateOut; } - -@keyframes rotateOutDownLeft { - from { - transform-origin: left bottom; - opacity: 1; } - to { - transform-origin: left bottom; - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } } - -.rotateOutDownLeft { - animation-name: rotateOutDownLeft; } - -@keyframes rotateOutDownRight { - from { - transform-origin: right bottom; - opacity: 1; } - to { - transform-origin: right bottom; - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } } - -.rotateOutDownRight { - animation-name: rotateOutDownRight; } - -@keyframes rotateOutUpLeft { - from { - transform-origin: left bottom; - opacity: 1; } - to { - transform-origin: left bottom; - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } } - -.rotateOutUpLeft { - animation-name: rotateOutUpLeft; } - -@keyframes rotateOutUpRight { - from { - transform-origin: right bottom; - opacity: 1; } - to { - transform-origin: right bottom; - transform: rotate3d(0, 0, 1, 90deg); - opacity: 0; } } - -.rotateOutUpRight { - animation-name: rotateOutUpRight; } - -@keyframes hinge { - 0% { - transform-origin: top left; - animation-timing-function: ease-in-out; } - 20%, 60% { - transform: rotate3d(0, 0, 1, 80deg); - transform-origin: top left; - animation-timing-function: ease-in-out; } - 40%, 80% { - transform: rotate3d(0, 0, 1, 60deg); - transform-origin: top left; - animation-timing-function: ease-in-out; - opacity: 1; } - to { - transform: translate3d(0, 700px, 0); - opacity: 0; } } - -.hinge { - animation-name: hinge; } - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@keyframes rollIn { - from { - opacity: 0; - transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } - to { - opacity: 1; - transform: none; } } - -.rollIn { - animation-name: rollIn; } - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@keyframes rollOut { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } - -.rollOut { - animation-name: rollOut; } - -@keyframes zoomIn { - from { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); } - 50% { - opacity: 1; } } - -.zoomIn { - animation-name: zoomIn; } - -@keyframes zoomInDown { - from { - opacity: 0; - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - 60% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomInDown { - animation-name: zoomInDown; } - -@keyframes zoomInLeft { - from { - opacity: 0; - transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - 60% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomInLeft { - animation-name: zoomInLeft; } - -@keyframes zoomInRight { - from { - opacity: 0; - transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - 60% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomInRight { - animation-name: zoomInRight; } - -@keyframes zoomInUp { - from { - opacity: 0; - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - 60% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomInUp { - animation-name: zoomInUp; } - -@keyframes zoomOut { - from { - opacity: 1; } - 50% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); } - to { - opacity: 0; } } - -.zoomOut { - animation-name: zoomOut; } - -@keyframes zoomOutDown { - 40% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - to { - opacity: 0; - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - transform-origin: center bottom; - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomOutDown { - animation-name: zoomOutDown; } - -@keyframes zoomOutLeft { - 40% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } - to { - opacity: 0; - transform: scale(0.1) translate3d(-2000px, 0, 0); - transform-origin: left center; } } - -.zoomOutLeft { - animation-name: zoomOutLeft; } - -@keyframes zoomOutRight { - 40% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } - to { - opacity: 0; - transform: scale(0.1) translate3d(2000px, 0, 0); - transform-origin: right center; } } - -.zoomOutRight { - animation-name: zoomOutRight; } - -@keyframes zoomOutUp { - 40% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - to { - opacity: 0; - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - transform-origin: center bottom; - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - -.zoomOutUp { - animation-name: zoomOutUp; } - -@keyframes slideInDown { - from { - transform: translate3d(0, -100%, 0); - visibility: visible; } - to { - transform: translate3d(0, 0, 0); } } - -.slideInDown { - animation-name: slideInDown; } - -@keyframes slideInLeft { - from { - transform: translate3d(-100%, 0, 0); - visibility: visible; } - to { - transform: translate3d(0, 0, 0); } } - -.slideInLeft { - animation-name: slideInLeft; } - -@keyframes slideInRight { - from { - transform: translate3d(100%, 0, 0); - visibility: visible; } - to { - transform: translate3d(0, 0, 0); } } - -.slideInRight { - animation-name: slideInRight; } - -@keyframes slideInUp { - from { - transform: translate3d(0, 100%, 0); - visibility: visible; } - to { - transform: translate3d(0, 0, 0); } } - -.slideInUp { - animation-name: slideInUp; } - -@keyframes slideOutDown { - from { - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - transform: translate3d(0, 100%, 0); } } - -.slideOutDown { - animation-name: slideOutDown; } - -@keyframes slideOutLeft { - from { - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - transform: translate3d(-100%, 0, 0); } } - -.slideOutLeft { - animation-name: slideOutLeft; } - -@keyframes slideOutRight { - from { - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - transform: translate3d(100%, 0, 0); } } - -.slideOutRight { - animation-name: slideOutRight; } - -@keyframes slideOutUp { - from { - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - transform: translate3d(0, -100%, 0); } } - -.slideOutUp { - animation-name: slideOutUp; } - -.greenFade { - animation-name: greenFade; } - -@keyframes greenFade { - from { - background: transparent; } - to { - background: #81e27d; } } - -.redFade { - animation-name: redFade; } - -@keyframes redFade { - from { - background: transparent; } - to { - background: #ee5649; } } - -.redCircleFade { - animation-name: redCircleFade; } - -@keyframes redCircleFade { - 0% { - background: transparent; } - 50% { - background: #ee5649; } - 100% { - background: transparent; } } - -.greenCircleFade, .greenCircleFade td { - animation-name: greenCircleFade; } - -@keyframes greenCircleFade { - 0% { - background: transparent; } - 50% { - background: #81e27d; } - 100% { - background: transparent; } } - -.container-fluid, -.container { - box-sizing: border-box; } - -.row { - box-sizing: border-box; - display: flex; - flex: 0 1 auto; - flex-direction: row; - flex-wrap: wrap; } - -.col-simple { - flex-direction: column; } - -.row-simple { - flex-direction: row; } - -.col-simple, .row-simple { - display: flex; - flex: 1; - flex-grow: 1; } - .col-simple .row, .row-simple .row { - flex: 1 1 auto; - flex-direction: column; } - .col-simple .col-xs-12, .row-simple .col-xs-12 { - flex-basis: 0; } - -.fill-all { - flex: 1 1 auto; } - -.col { - box-sizing: border-box; - display: flex; - flex: 1 0 auto; - flex-direction: column; - flex-wrap: wrap; - margin-bottom: var(--gutter-compensation, -0.5rem); - margin-left: var(--gutter-compensation, -0.5rem); } - -.xs-col-table, -.md-col-table, -.lg-col-table { - display: none; } - -.xs-hidden, -.sm-hidden, -.md-hidden, -.lg-hidden { - display: none; } - -.col-xs-0 { - box-sizing: border-box; - flex-grow: 0; - padding-right: 1rem; } - -.plain-grid { - padding: 0 !important; } - -.row.reverse { - flex-direction: row-reverse; } - -.col.reverse { - flex-direction: column-reverse; } - -.col-xs, -.col-xs-1, -.col-xs-2, -.col-xs-3, -.col-xs-4, -.col-xs-5, -.col-xs-6, -.col-xs-7, -.col-xs-8, -.col-xs-9, -.col-xs-10, -.col-xs-11, -.col-xs-12 { - box-sizing: border-box; - padding-right: 1rem; } - -.col-xs { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; } - -.col-xs-1 { - flex-basis: 8.333%; - max-width: 8.333%; } - -.col-xs-2 { - flex-basis: 16.667%; - max-width: 16.667%; } - -.col-xs-3 { - flex-basis: 25%; - max-width: 25%; } - -.col-xs-4 { - flex-basis: 33.333%; - max-width: 33.333%; } - -.col-xs-5 { - flex-basis: 41.667%; - max-width: 41.667%; } - -.col-xs-6 { - flex-basis: 50%; - max-width: 50%; } - -.col-xs-7 { - flex-basis: 58.333%; - max-width: 58.333%; } - -.col-xs-8 { - flex-basis: 66.667%; - max-width: 66.667%; } - -.col-xs-9 { - flex-basis: 75%; - max-width: 75%; } - -.col-xs-10 { - flex-basis: 83.333%; - max-width: 83.333%; } - -.col-xs-11 { - flex-basis: 91.667%; - max-width: 91.667%; } - -.col-xs-12 { - flex-basis: 100%; - max-width: 100%; } - -.col-xs-offset-1 { - margin-left: 8.333%; } - -.col-xs-offset-2 { - margin-left: 16.667%; } - -.col-xs-offset-3 { - margin-left: 25%; } - -.col-xs-offset-4 { - margin-left: 33.333%; } - -.col-xs-offset-5 { - margin-left: 41.667%; } - -.col-xs-offset-6 { - margin-left: 50%; } - -.col-xs-offset-7 { - margin-left: 58.333%; } - -.col-xs-offset-8 { - margin-left: 66.667%; } - -.col-xs-offset-9 { - margin-left: 75%; } - -.col-xs-offset-10 { - margin-left: 83.333%; } - -.col-xs-offset-11 { - margin-left: 91.667%; } - -.start-xs { - justify-content: flex-start; - text-align: start; } - -.center-xs { - justify-content: center; - text-align: center; } - -.right-xs { - margin-left: auto !important; } - -.end-xs { - justify-content: flex-end; - margin-left: auto; } - -.top-xs { - align-items: flex-start; } - -.middle-xs { - align-items: center; } - -.bottom-xs { - align-items: flex-end; } - -.around-xs { - justify-content: space-around; } - -.between-xs { - justify-content: space-between; } - -.first-xs { - order: -1; } - -.last-xs { - order: 1; } - -@media only screen and (min-width: 48em) { - .sm-hidden { - display: block; } - .container { - width: 46rem; } - .xs-col-table { - display: inherit; } - .col-sm, - .col-sm-1, - .col-sm-2, - .col-sm-3, - .col-sm-4, - .col-sm-5, - .col-sm-6, - .col-sm-7, - .col-sm-8, - .col-sm-9, - .col-sm-10, - .col-sm-11, - .col-sm-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 1rem; } - .col-sm { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; } - .col-sm-1 { - flex-basis: 8.333%; - max-width: 8.333%; } - .col-sm-2 { - flex-basis: 16.667%; - max-width: 16.667%; } - .col-sm-3 { - flex-basis: 25%; - max-width: 25%; } - .col-sm-4 { - flex-basis: 33.333%; - max-width: 33.333%; } - .col-sm-5 { - flex-basis: 41.667%; - max-width: 41.667%; } - .col-sm-6 { - flex-basis: 50%; - max-width: 50%; } - .col-sm-7 { - flex-basis: 58.333%; - max-width: 58.333%; } - .col-sm-8 { - flex-basis: 66.667%; - max-width: 66.667%; } - .col-sm-9 { - flex-basis: 75%; - max-width: 75%; } - .col-sm-10 { - flex-basis: 83.333%; - max-width: 83.333%; } - .col-sm-11 { - flex-basis: 91.667%; - max-width: 91.667%; } - .col-sm-12 { - flex-basis: 100%; - max-width: 100%; } - .col-sm-offset-1 { - margin-left: 8.333%; } - .col-sm-offset-2 { - margin-left: 16.667%; } - .col-sm-offset-3 { - margin-left: 25%; } - .col-sm-offset-4 { - margin-left: 33.333%; } - .col-sm-offset-5 { - margin-left: 41.667%; } - .col-sm-offset-6 { - margin-left: 50%; } - .col-sm-offset-7 { - margin-left: 58.333%; } - .col-sm-offset-8 { - margin-left: 66.667%; } - .col-sm-offset-9 { - margin-left: 75%; } - .col-sm-offset-10 { - margin-left: 83.333%; } - .col-sm-offset-11 { - margin-left: 91.667%; } - .start-sm { - justify-content: flex-start; - text-align: start; } - .center-sm { - justify-content: center; - text-align: center; } - .end-sm { - justify-content: flex-end; - text-align: end; } - .top-sm { - align-items: flex-start; } - .middle-sm { - align-items: center; } - .bottom-sm { - align-items: flex-end; } - .around-sm { - justify-content: space-around; } - .between-sm { - justify-content: space-between; } - .first-sm { - order: -1; } - .last-sm { - order: 1; } } - -@media only screen and (min-width: 62em) { - .col-simple .row { - flex-direction: row; } - .col-simple .col-xs-12 { - flex-basis: 100%; } - .md-hidden { - display: block; } - .container { - width: 61rem; } - .md-col-table { - display: inherit; } - .col-md, - .col-md-1, - .col-md-2, - .col-md-3, - .col-md-4, - .col-md-5, - .col-md-6, - .col-md-7, - .col-md-8, - .col-md-9, - .col-md-10, - .col-md-11, - .col-md-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 1rem; } - .col-md { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; } - .col-md-1 { - flex-basis: 8.333%; - max-width: 8.333%; } - .col-md-2 { - flex-basis: 16.667%; - max-width: 16.667%; } - .col-md-3 { - flex-basis: 25%; - max-width: 25%; } - .col-md-4 { - flex-basis: 33.333%; - max-width: 33.333%; } - .col-md-5 { - flex-basis: 41.667%; - max-width: 41.667%; } - .col-md-6 { - flex-basis: 50%; - max-width: 50%; } - .col-md-7 { - flex-basis: 58.333%; - max-width: 58.333%; } - .col-md-8 { - flex-basis: 66.667%; - max-width: 66.667%; } - .col-md-9 { - flex-basis: 75%; - max-width: 75%; } - .col-md-10 { - flex-basis: 83.333%; - max-width: 83.333%; } - .col-md-11 { - flex-basis: 91.667%; - max-width: 91.667%; } - .col-md-12 { - flex-basis: 100%; - max-width: 100%; } - .col-md-offset-1 { - margin-left: 8.333%; } - .col-md-offset-2 { - margin-left: 16.667%; } - .col-md-offset-3 { - margin-left: 25%; } - .col-md-offset-4 { - margin-left: 33.333%; } - .col-md-offset-5 { - margin-left: 41.667%; } - .col-md-offset-6 { - margin-left: 50%; } - .col-md-offset-7 { - margin-left: 58.333%; } - .col-md-offset-8 { - margin-left: 66.667%; } - .col-md-offset-9 { - margin-left: 75%; } - .col-md-offset-10 { - margin-left: 83.333%; } - .col-md-offset-11 { - margin-left: 91.667%; } - .start-md { - justify-content: flex-start; - text-align: start; } - .center-md { - justify-content: center; - text-align: center; } - .end-md { - justify-content: flex-end; - text-align: end; } - .top-md { - align-items: flex-start; } - .middle-md { - align-items: center; } - .bottom-md { - align-items: flex-end; } - .around-md { - justify-content: space-around; } - .between-md { - justify-content: space-between; } - .first-md { - order: -1; } - .last-md { - order: 1; } } - -@media only screen and (min-width: 75em) { - .lg-hidden { - display: block; } - .container { - width: 71rem; } - .lg-col-table { - display: inherit; } - .col-lg, - .col-lg-1, - .col-lg-2, - .col-lg-3, - .col-lg-4, - .col-lg-5, - .col-lg-6, - .col-lg-7, - .col-lg-8, - .col-lg-9, - .col-lg-10, - .col-lg-11, - .col-lg-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 1rem; } - .col-lg { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; } - .col-lg-1 { - flex-basis: 8.333%; - max-width: 8.333%; } - .col-lg-2 { - flex-basis: 16.667%; - max-width: 16.667%; } - .col-lg-3 { - flex-basis: 25%; - max-width: 25%; } - .col-lg-4 { - flex-basis: 33.333%; - max-width: 33.333%; } - .col-lg-5 { - flex-basis: 41.667%; - max-width: 41.667%; } - .col-lg-6 { - flex-basis: 50%; - max-width: 50%; } - .col-lg-7 { - flex-basis: 58.333%; - max-width: 58.333%; } - .col-lg-8 { - flex-basis: 66.667%; - max-width: 66.667%; } - .col-lg-9 { - flex-basis: 75%; - max-width: 75%; } - .col-lg-10 { - flex-basis: 83.333%; - max-width: 83.333%; } - .col-lg-11 { - flex-basis: 91.667%; - max-width: 91.667%; } - .col-lg-12 { - flex-basis: 100%; - max-width: 100%; } - .col-lg-offset-1 { - margin-left: 8.333%; } - .col-lg-offset-2 { - margin-left: 16.667%; } - .col-lg-offset-3 { - margin-left: 25%; } - .col-lg-offset-4 { - margin-left: 33.333%; } - .col-lg-offset-5 { - margin-left: 41.667%; } - .col-lg-offset-6 { - margin-left: 50%; } - .col-lg-offset-7 { - margin-left: 58.333%; } - .col-lg-offset-8 { - margin-left: 66.667%; } - .col-lg-offset-9 { - margin-left: 75%; } - .col-lg-offset-10 { - margin-left: 83.333%; } - .col-lg-offset-11 { - margin-left: 91.667%; } - .start-lg { - justify-content: flex-start; - text-align: start; } - .center-lg { - justify-content: center; - text-align: center; } - .end-lg { - justify-content: flex-end; - text-align: end; } - .top-lg { - align-items: flex-start; } - .middle-lg { - align-items: center; } - .bottom-lg { - align-items: flex-end; } - .around-lg { - justify-content: space-around; } - .between-lg { - justify-content: space-between; } - .first-lg { - order: -1; } - .last-lg { - order: 1; } } - -.portlet-body > article { - padding: 0; } - -article { - background: #fff; - padding: 10px; - margin: 0; - font-size: .9rem; - color: #000; - line-height: 2rem; - white-space: normal; } - article del, article ins, article mark { - padding: 3px; - text-decoration: none; } - article .tag { - margin: 0.1rem; } - article del { - background: #ff9e9e; } - article ins { - background: #b0f3b0; } - article mark { - background: #f9ffa1; } - article h1, article h2, article h3, article h4, article h5, article h6 { - font-weight: 300; } - article h1 { - font-size: 1.4rem; } - article h2 { - font-size: 1.3rem; } - article h3 { - font-size: 1.1rem; } - article h4, article h5, article h6 { - font-size: 1rem; } - article strong { - font-weight: 500; } - article pre { - margin: 1rem 0 1rem 0; - border: 1px solid #ddd; - border-left: 3px solid #25acff; - background: #f4f4f4; - line-height: 1.2rem; - font-size: .8rem; } - article pre code { - background: none; - color: #000; } - article blockquote { - color: #fff; - background: #25acff; - border: 1px solid #0480ce; - padding: 1rem; - border-radius: 5px; - margin: 1.5rem; } - article blockquote p:last-child { - margin-bottom: 0; } - article blockquote code { - color: inherit; - background: inherit; } - article blockquote a { - color: inherit; } - article code { - font-family: var(--font-family); - font-size: 0.8rem; - color: #23222d; - background: #f4f4f4; - border-radius: 3px; } - article a { - color: var(--link-color); - border-bottom: 1px dotted var(--link-color); } - article a:hover { - border-bottom: none; } - article p { - line-height: 1.5em; } - article ol, article ul { - list-style-position: outside; - margin: 0.5rem 0 0.5rem 3rem; - line-height: 1rem; } - article ul { - list-style: disc; } - article li { - margin: 0.3rem 0 0.3rem 0; - line-height: 1.5em; } - article img { - display: block; - margin: 0 auto; - max-width: 100%; - max-height: 100%; } - article table { - border-collapse: collapse; - border: 1px solid var(--box-border); - margin: 0 auto; - margin-bottom: 1rem; - min-width: 90%; } - article table th, article table td { - padding: 5px; - border: 1px solid var(--box-border); } - article table th { - background: var(--table-head-background); } - article table tr:nth-child(2n) td { - background: var(--table-row-background); } - -.ipt-wrap { - display: table; - vertical-align: top; - box-sizing: border-box; } - .ipt-wrap .ipt-first { - width: 100%; - display: table-cell; - vertical-align: inherit; } - .ipt-wrap .ipt-second { - padding-left: 5px; - display: table-cell; - vertical-align: inherit; } - -.flex-line { - display: flex; - flex-direction: row; } - .flex-line div { - flex: 1; } - .flex-line div:nth-child(n+1) { - padding-left: 5px; } - -div.sticky, section.sticky { - position: sticky; - top: 1rem; } - -.inline { - display: inline; } - -.form-group { - display: flex; - flex-direction: row; - flex-wrap: wrap; } - .form-group > *:not(label) { - flex: 0 1 auto; } - .form-group + * { - margin-top: .75rem; } - .form-group label { - font-size: .9rem; - flex: 0 0 100%; - display: inline-flex; - align-items: center; } - .form-group label > i { - margin-right: .5rem; } - .form-group span.checkbox + span.checkbox { - margin-left: 1.5rem; } - .form-group .input-control { - flex: 1; - display: flex; - flex-direction: row; - flex-wrap: wrap; } - .form-group .input-control + .input-control { - margin-left: 1rem; } - .form-group textarea, .form-group .contenteditable { - height: 8rem; } - -* + .form-group { - margin-top: .75rem; } - -@media (max-width: 768px) { - .form-group { - flex-direction: column; } } - -.wf-100 { - width: 100%; } - -.wf-80 { - width: 80%; } - -.wf-20 { - width: 20%; } - -.wf-66 { - width: 66.66%; } - -.wf-50 { - width: 50%; } - -.wf-33 { - width: 33.33%; } - -.wf-25 { - width: 25%; } - -.wf-75 { - width: 75%; } - -.spacer { - padding: 5px; } - -.resizable { - resize: both; - overflow: auto; } - -*[draggable] { - cursor: move; } - -.oms-drag-placeholder, .oms-drag-placeholder td { - border: 2px dashed rgba(0, 0, 0, 0.5) !important; } - -p { - margin: 0 0 10px 0; - line-height: 1.4em; } - p span { - margin: 0; - padding: 0; } - p + p { - margin-top: 5px; } - -.blurry-text { - text-shadow: 0 0 .9rem #000; - color: transparent; } - -.white-3d { - color: #fff; - font-weight: bold; - font-family: sans-serif; - text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15); } - -.rainbow { - background: linear-gradient(90deg, #ab6bff, #9ad5f9 15%, #575df0 35%, #ab6bff 50%, #9ad5f9 65%, #575df0 85%, #ab6bff); - background-size: 200% 100%; - animation: rainbow-gradient 3.5s linear infinite; - backface-visibility: hidden; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; } - -@keyframes rainbow-gradient { - 0% { - background-position: 0; } - 100% { - background-position: -100%; } - 0% { - background-position: 0; } - 100% { - background-position: -100%; } } - -.tooltip { - cursor: pointer; - color: var(--box-highlight); - font-size: .9rem; } - .tooltip:hover, .tooltip:active, .tooltip:focus { - position: relative; } - .tooltip:hover:after, .tooltip:hover:before, .tooltip:active:after, .tooltip:active:before, .tooltip:focus:after, .tooltip:focus:before { - font-size: .9rem; - display: block; - position: absolute; - white-space: nowrap; - bottom: 100%; - margin-bottom: 5px; - padding: 7px; - border-radius: 3px; - background-color: #474747; - color: #fff; - content: attr(data-tooltip); - text-align: center; - transform: translate(-50%, 0); } - -.spinner-1 { - width: 40px; - height: 40px; - background-color: #333; - margin: 50px auto; - -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; - animation: sk-rotateplane 1.2s infinite ease-in-out; } - -@-webkit-keyframes sk-rotateplane { - 0% { - -webkit-transform: perspective(120px); } - 50% { - -webkit-transform: perspective(120px) rotateY(180deg); } - 100% { - -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } - -@keyframes sk-rotateplane { - 0% { - transform: perspective(120px) rotateX(0deg) rotateY(0deg); - -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } - 50% { - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } - 100% { - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } - -.spinner-2 { - text-align: center; } - .spinner-2 > div { - width: 18px; - height: 18px; - background-color: #333; - border-radius: 100%; - display: inline-block; - -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; - animation: sk-bouncedelay 1.4s infinite ease-in-out both; } - .spinner-2 .bounce1 { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; } - .spinner-2 .bounce2 { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; } - -@-webkit-keyframes sk-bouncedelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); } - 40% { - -webkit-transform: scale(1); } } - -@keyframes sk-bouncedelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } - -.spinner-3 { - width: 40px; - height: 40px; - margin: 50px auto; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; - animation: sk-scaleout 1.0s infinite ease-in-out; } - -@-webkit-keyframes sk-scaleout { - 0% { - -webkit-transform: scale(0); } - 100% { - -webkit-transform: scale(1); - opacity: 0; } } - -@keyframes sk-scaleout { - 0% { - -webkit-transform: scale(0); - transform: scale(0); } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 0; } } - -canvas { - background: #fff; - user-select: none; } - canvas.chart { - width: 100%; } - -form li { - margin: 5px 0 5px 0; } - -form td { - white-space: nowrap; - padding-bottom: 5px; } - form td textarea + i { - vertical-align: top; } - -form label { - font-size: .9rem; - color: black; } - -form i + i { - margin-left: 3px; } - -form .layout td + td { - padding-left: 5px; } - -form .list { - font-size: 1rem; } - form .list td { - white-space: nowrap; - padding: 3px 5px 3px 5px; } - -.infoIcon { - width: var(--badge-size); - text-align: center; - vertical-align: middle; - position: relative; - cursor: pointer; } - .infoIcon span { - font-size: .55rem; - display: block; - position: absolute; - right: -.55rem; - top: -.45rem; - width: .9rem; - height: var(--badge-size); - line-height: var(--badge-size); - border-radius: 50%; - text-align: center; - padding: .15rem; - color: var(--badge-color); - background: var(--badge-background); } - -img.frame-1 { - padding: 1rem; - background: #fff; - border: 1px solid var(--box-border); - box-sizing: border-box; - width: 100%; } - -img.frame-2 { - border: 1px solid var(--box-border); - background: #fff; - box-sizing: border-box; - width: 100%; } - -img.rounded { - border-radius: 50%; - background: #fff; } - -img.bordered { - border: 1px solid var(--box-border); } - -.image-comparison { - margin-left: 3rem; - position: relative; - display: inline-block; - line-height: 0; - overflow: auto; } - .image-comparison img { - user-select: none; } - .image-comparison > div { - position: absolute; - width: 50%; - max-width: 100%; - overflow: hidden; - resize: horizontal; - border-right: 1px solid #000; } - .image-comparison > div:before { - content: ''; - display: block; - width: 13px; - height: 13px; - overflow: hidden; - position: absolute; - resize: horizontal; - right: 0; - bottom: 0; - background-clip: content-box; - background: linear-gradient(-45deg, red 50%, transparent 0); } - -.gallery { - max-width: 80%; - margin: 0 auto; - position: relative; } - .gallery input + .enlarged { - display: none; } - .gallery input:checked + .enlarged { - display: block; } - .gallery .enlarged { - position: absolute; - top: 0; - left: 0; } - .gallery .enlarged img { - max-width: 100%; - max-height: 100%; - object-fit: contain; } - .gallery input { - display: none; } - .gallery input + img { - display: none; } - .gallery input:checked + img { - display: block; - margin: 0 auto; - max-width: 100%; - max-height: 100%; - width: auto; - height: auto; } - .gallery .thumbs img { - width: 100px; - height: 100px; - margin: .3rem; - border: 1px solid #ccc; } - .gallery label { - cursor: pointer; } - -.map-small .map, .olMapViewport { - width: 100%; - height: 100%; - min-height: 250px; - position: relative; } - .map-small .map .olControlAttribution, .olMapViewport .olControlAttribution { - position: absolute; - bottom: 0; - right: 0; - background: #fff; - padding: 2px; - font-size: .8rem; } - .map-small .map .olButton, .olMapViewport .olButton { - color: #fff; } - -input, select, textarea, .textarea, option { - font-family: var(--font-family); - font-weight: 300; } - -input[type=checkbox] ~ .checked-visibility { - display: none; } - -input[type=checkbox]:checked ~ .checked-visibility { - display: inline-block; } - -input[type=checkbox] ~ .checked-visibility-alt { - display: inline-block; } - -input[type=checkbox]:checked ~ .checked-visibility-alt { - display: none; } - -input, select, textarea, .textarea { - border: 1px solid var(--input-border); } - input.undecorated, select.undecorated, textarea.undecorated, .textarea.undecorated { - padding: 0; - border: none; - background: transparent; - resize: none; } - input:active.undecorated, input:focus.undecorated, select:active.undecorated, select:focus.undecorated, textarea:active.undecorated, textarea:focus.undecorated, .textarea:active.undecorated, .textarea:focus.undecorated { - appearance: none; - outline: none; - border-style: none; } - -progress { - height: 20px; - width: 100%; - min-width: 150px; } - -.textarea, -.tag-input, -textarea, -select, -input[type="password"], -input[type="text"], -input[type="datetime"], -input[type="email"], -input[type="date"], -input[type="number"], -input[type="datetime-local"] { - box-sizing: border-box; - color: var(--input-color); - background: var(--input-background); - width: 100%; - min-width: 70px; - max-width: 100%; - font-size: .9rem; - border: 1px solid var(--input-border); - transition: background 0.3s, border 0.3s; } - .textarea:focus, .textarea .active, .textarea:active, - .tag-input:focus, - .tag-input .active, - .tag-input:active, - textarea:focus, - textarea .active, - textarea:active, - select:focus, - select .active, - select:active, - input[type="password"]:focus, - input[type="password"] .active, - input[type="password"]:active, - input[type="text"]:focus, - input[type="text"] .active, - input[type="text"]:active, - input[type="datetime"]:focus, - input[type="datetime"] .active, - input[type="datetime"]:active, - input[type="email"]:focus, - input[type="email"] .active, - input[type="email"]:active, - input[type="date"]:focus, - input[type="date"] .active, - input[type="date"]:active, - input[type="number"]:focus, - input[type="number"] .active, - input[type="number"]:active, - input[type="datetime-local"]:focus, - input[type="datetime-local"] .active, - input[type="datetime-local"]:active { - border-color: var(--input-background-active); - border: 1px solid var(--input-border-active); - color: var(--input-color-active); } - .textarea:disabled, .textarea:readonly, - .tag-input:disabled, - .tag-input:readonly, - textarea:disabled, - textarea:readonly, - select:disabled, - select:readonly, - input[type="password"]:disabled, - input[type="password"]:readonly, - input[type="text"]:disabled, - input[type="text"]:readonly, - input[type="datetime"]:disabled, - input[type="datetime"]:readonly, - input[type="email"]:disabled, - input[type="email"]:readonly, - input[type="date"]:disabled, - input[type="date"]:readonly, - input[type="number"]:disabled, - input[type="number"]:readonly, - input[type="datetime-local"]:disabled, - input[type="datetime-local"]:readonly { - cursor: not-allowed; - background: #efefef; } - -.textarea, -.tag-input, -textarea, -select:not([multiple]), -input[type="password"], -input[type="text"], -input[type="datetime"], -input[type="email"], -input[type="date"], -input[type="number"], -input[type="datetime-local"] { - height: 30px; - padding-left: .5rem; } - -.inputWithIcon { - position: relative; } - .inputWithIcon .frontIcon, .inputWithIcon .endIcon { - color: var(--input-icon-color); - font-size: 1rem; - position: absolute; - padding: .5rem; - font-weight: 200; } - .inputWithIcon .frontIcon { - left: 0; - top: 0; } - .inputWithIcon .endIcon { - right: 0; - top: 0; } - .inputWithIcon .frontIcon + input[type="text"], .inputWithIcon .frontIcon + input[type="password"] { - padding-left: 2.5rem; } - .inputWithIcon input[type=text]:active, .inputWithIcon input[type=text]:focus, - .inputWithIcon input[type=password]:active, .inputWithIcon input[type=password]:focus { - border: 1px solid var(--input-border-active); - color: var(--text-on-background-color); } - .inputWithIcon input[type=text]:active ~ .frontIcon, .inputWithIcon input[type=text]:focus ~ .frontIcon, - .inputWithIcon input[type=password]:active ~ .frontIcon, .inputWithIcon input[type=password]:focus ~ .frontIcon, - .inputWithIcon input[type=text]:active ~ .endIcon, .inputWithIcon input[type=text]:focus ~ .endIcon, - .inputWithIcon input[type=password]:active ~ .endIcon, .inputWithIcon input[type=password]:focus ~ .endIcon { - color: var(--input-icon-color-active); } - .inputWithIcon input[type=text] ~ .endIcon, .inputWithIcon input[type=text] ~ .endIcon, - .inputWithIcon input[type=password] ~ .endIcon, .inputWithIcon input[type=password] ~ .endIcon { - cursor: pointer; } - -.inputWrapper { - display: inline-flex; - flex-direction: row; } - .inputWrapper .textWrapper + input[type=submit], .inputWrapper .textWrapper + input[type=button], .inputWrapper .textWrapper + button { - margin: 0; - padding: 0; - flex: 0; - height: auto; - box-shadow: none; } - .inputWrapper .textWrapper { - flex: 1; - position: relative; } - .inputWrapper .textWrapper i + input { - padding-left: 2rem; } - .inputWrapper .textWrapper .frontIcon, .inputWrapper .textWrapper .endIcon { - color: var(--input-icon-color); - font-size: 1.1rem; - font-weight: 200; - position: absolute; - top: 0; - padding: .25rem .6rem .6rem .4rem; } - .inputWrapper .textWrapper .frontIcon { - left: 0; - font-size: 1.5rem; } - .inputWrapper .textWrapper .endIcon { - right: 0; - font-size: 1.5rem; } - .inputWrapper .textWrapper input[type=text]:active, .inputWrapper .textWrapper input[type=text]:focus, - .inputWrapper .textWrapper input[type=password]:active, .inputWrapper .textWrapper input[type=password]:focus { - border: 1px solid var(--input-border-active); } - .inputWrapper .textWrapper input[type=text]:active ~ .frontIcon, .inputWrapper .textWrapper input[type=text]:focus ~ .frontIcon, - .inputWrapper .textWrapper input[type=password]:active ~ .frontIcon, .inputWrapper .textWrapper input[type=password]:focus ~ .frontIcon, - .inputWrapper .textWrapper input[type=text]:active ~ .endIcon, .inputWrapper .textWrapper input[type=text]:focus ~ .endIcon, - .inputWrapper .textWrapper input[type=password]:active ~ .endIcon, .inputWrapper .textWrapper input[type=password]:focus ~ .endIcon { - color: var(--input-icon-color-active); } - .inputWrapper .textWrapper input[type=text] ~ .endIcon, .inputWrapper .textWrapper input[type=text] ~ .endIcon, - .inputWrapper .textWrapper input[type=password] ~ .endIcon, .inputWrapper .textWrapper input[type=password] ~ .endIcon { - cursor: pointer; } - -.advancedInput, .clickPopup { - /* position: relative; uncomment! otherwise the drop down inside would not be able to overflow and add a scroll bar to the container which is not desired in this case! */ } - -.clickPopup > input { - display: none; } - -.clickPopup label + input { - display: none; } - -.clickPopup .more-functions { - padding: 0 1rem 0 1rem; } - -.clickPopup .popup { - box-sizing: border-box; - padding: .5rem 1rem .5rem 1rem; - background: #fff; - box-shadow: 0 0 3px 1px rgba(72, 71, 114, 0.3); - right: 0; } - .clickPopup .popup ul { - width: 100%; } - .clickPopup .popup > ul { - display: flex; - flex-direction: column; } - .clickPopup .popup > ul > li { - display: flex; - align-items: center; - margin: .5rem 0 .5rem 0; - white-space: nowrap; } - .clickPopup .popup .button { - margin-right: 1rem; } - .clickPopup .popup span { - flex-grow: 1; } - .clickPopup .popup input[type="checkbox"] { - display: none; } - .clickPopup .popup input[type="checkbox"]:checked + ul .expand { - transition: all .3s ease; - display: inherit; - transform: rotateZ(90deg); } - .clickPopup .popup input[type="checkbox"]:checked + ul > li:nth-child(n+2) { - display: inherit; } - .clickPopup .popup input + ul .expand { - font-size: .9rem; - transition: all .3s ease; - transform: rotateZ(0deg); } - .clickPopup .popup input + ul > li:nth-child(n+2) { - display: none; } - .clickPopup .popup label { - display: flex; - align-items: center; - cursor: pointer; } - .clickPopup .popup > li { - display: block; } - .clickPopup .popup > li a { - display: block; - /* - &:hover, &:focus { - } - */ } - .clickPopup .popup i { - flex-grow: 0; } - -input ~ .popup { - position: absolute; - /* All other options e.g. static, relative resize the container which is bad */ - display: none; - z-index: 3; } - -/* In the past we also used input:focus ~ .popup this is a problem because clicking on something e.g. close button will not close the popup since it is still focused. */ -input:checked ~ .popup, input ~ .popup.active { - display: inline-block; } - -select { - cursor: pointer; - padding: 0 7px 0 7px; - /* overwrites input padding: 7px. don't know why i have to do this! */ } - -option { - line-height: 1rem; } - -input[type="file"] { - border: 1px solid var(--input-border-active); - width: 100%; - max-width: 100%; - color: var(--input-color); - padding: 10px; - box-sizing: border-box; } - -input::placeholder { - font-family: 'FontAwesome', serif; - color: var(--input-icon-color); - opacity: 0.5; } - -textarea:invalid, input:invalid { - transition: all 0.5s !important; - border-color: #f00 !important; } - textarea:invalid ~ i.ok, input:invalid ~ i.ok { - display: none !important; } - textarea:invalid ~ i.error, input:invalid ~ i.error { - display: inline-block !important; } - -input:valid ~ i.ok { - display: inline-block !important; } - -input:valid ~ i.error { - display: none !important; } - -textarea, .textarea { - overflow: auto; - resize: both; - box-sizing: border-box; - padding: .3rem .3rem .3rem .5rem; } - -label.radio, label.checkbox { - display: inline-flex; - align-items: center; - user-select: none; - cursor: pointer; } - label.radio input, label.checkbox input { - margin: 0; - opacity: 0; - cursor: pointer; } - label.radio input:checked ~ .checkmark, label.checkbox input:checked ~ .checkmark { - background-color: var(--button-colored-background); } - label.radio input:required ~ .checkmark, label.radio input:disabled ~ .checkmark, label.radio input:readonly ~ .checkmark, label.checkbox input:required ~ .checkmark, label.checkbox input:disabled ~ .checkmark, label.checkbox input:readonly ~ .checkmark { - background-color: #adadad; } - label.radio input:checked ~ .checkmark:after, label.checkbox input:checked ~ .checkmark:after { - display: block; } - label.radio .checkmark, label.checkbox .checkmark { - position: relative; - height: 15px; - width: 15px; - margin-right: 5px; - background-color: #eee; - border: 1px solid var(--input-border-active); } - label.radio .checkmark:after, label.checkbox .checkmark:after { - content: ""; - position: absolute; - display: none; } - label.radio:hover input ~ .checkmark, label.checkbox:hover input ~ .checkmark { - cursor: pointer; } - -label.radio .checkmark { - border-radius: 50%; } - label.radio .checkmark:after { - top: 5px; - left: 5px; - width: 5px; - height: 5px; - border-radius: 50%; - background: #fff; } - -label.checkbox .checkmark:after { - top: 2px; - left: 4px; - width: 4px; - height: 6px; - border: solid white; - border-width: 0 3px 3px 0; - transform: rotate(45deg); } - -input[type="range"] { - border: none; - width: 100%; - min-width: 150px; - height: 5px; - background: var(--button-colored-background); - cursor: pointer; } - -.input { - width: 100%; - min-width: 120px; - display: flex; - flex-direction: row; - flex-wrap: nowrap; } - .input button { - box-sizing: border-box; - display: inline-block; - background: var(--button-colored-background); - height: 30px; - font-size: 1rem; - min-width: 40px; - border-left: solid 1px var(--input-border); - border-top: solid 1px var(--input-border); - border-bottom: solid 1px var(--input-border); - border-right: none; - padding: 0; - position: relative; - vertical-align: middle; - flex-grow: 0; - flex-shrink: 0; } - .input button:hover, .input button:focus { - background: var(--button-colored-background-hover); } - .input button.inactive { - background: #ccc; - cursor: default; } - .input button.inactive:hover, .input button.inactive:focus { - background: #ccc; } - .input input { - box-sizing: border-box; - position: relative; - vertical-align: middle; - flex-grow: 1; - flex-shrink: 1; } - -select.plain { - width: auto; - margin: 0; - padding: 0; - border: none; - outline: none; - display: inline-block; - appearance: none; - cursor: pointer; - box-shadow: none; } - -.dropdown { - cursor: pointer; - display: inline-block; - width: 100%; - border: 1px solid #000; - position: relative; - box-shadow: none; - outline: 0; - margin: 0; - font-family: inherit; - font-size: .9rem; - user-select: none; } - .dropdown:hover { - background: #f00; } - .dropdown label { - cursor: pointer; - user-select: none; } - .dropdown .dropdown-closed { - display: flex; - height: 100%; - align-items: center; } - .dropdown .dropdown-closed label { - display: none; } - .dropdown .dropdown-closed input { - display: none; } - .dropdown .dropdown-closed input:checked + label { - display: flex; - align-items: center; } - .dropdown .dropdown-container { - display: none; - z-index: 2; } - .dropdown .dropdown-container label { - padding: .5rem; } - .dropdown > input { - display: none; } - .dropdown > input:checked + .dropdown-container { - display: block; - background: #fff; - border: 1px solid #000; - position: absolute; } - .dropdown > input:checked + .dropdown-container label { - display: flex; - align-items: center; } - .dropdown > input:checked + .dropdown-container label:hover { - background: #f00; } - -.ac-container { - text-align: left; - border: 1px solid #c9c9c9; } - .ac-container > input { - display: none; } - .ac-container > input:checked + label { - background: var(--button-colored-background); - color: var(--text-on-background-color-2); } - .ac-container > input:checked + label + section { - display: inherit; } - .ac-container > input:checked + label:hover { - background: var(--button-colored-background-hover); } - .ac-container > input + label + section { - display: none; } - .ac-container label { - display: block; - padding: 1rem 1rem; - position: relative; - z-index: 20; - margin-top: -1px; - cursor: pointer; - color: #000; - font-size: 1rem; - background: var(--box-border); } - .ac-container label:hover { - color: var(--text-on-background-color-2); - background: var(--button-colored-background-hover); } - .ac-container > section { - background: #fff; - overflow: hidden; - height: auto; - position: relative; - z-index: 10; - padding: 1rem; } - -.more-container > label { - width: 100%; - display: flex; - flex-direction: row; - border-bottom: 1px solid var(--box-border); - cursor: pointer; - color: var(--link-color); - user-select: none; } - .more-container > label .expand { - transition: all .3s ease; - transform: rotateZ(0deg); } - .more-container > label span { - flex-grow: 1; } - .more-container > label i { - flex-grow: 0; } - -.more-container > input { - display: none; } - -.more-container > input:checked + label { - border-bottom: none; - margin-bottom: 1rem; } - .more-container > input:checked + label .expand { - transition: all .3s ease; - transform: rotateZ(90deg); } - -.more-container > input:checked ~ div { - display: block; } - -.more-container > div { - display: none; } - -.log-msg { - padding: 1rem; - margin: 1rem; } - -.log-msg-status-ok { - background: #aaffad; - border: 1px solid #81e27d; - color: #459442; } - -.log-msg-status-warning { - background: #f8ffa8; - border: 1px solid #d6d949; - color: #94972f; } - -.log-msg-status-error { - background: #ff7d79; - border: 1px solid #ee5649; - color: #a5302a; } - -.log-msg-status-info { - background: #b6d2ff; - border: 1px solid #85b0ee; - color: #4865a5; } - -.slider { - overflow-x: auto; - white-space: nowrap; } - .slider ul { - display: inline; } - -@keyframes slidy { - 0% { - left: 0%; } - 20% { - left: 0%; } - 25% { - left: -100%; } - 45% { - left: -100%; } - 50% { - left: -200%; } - 70% { - left: -200%; } - 75% { - left: -300%; } - 95% { - left: -300%; } - 100% { - left: -400%; } } - -div.slider-1 { - overflow: hidden; } - div.slider-1 figure { - position: relative; - width: 500%; - margin: 0; - left: 0; - text-align: left; - font-size: 0; - animation: 30s slidy infinite; } - div.slider-1 figure img { - width: 20%; - float: left; } - -.slider-2 { - width: 100%; - position: relative; - text-align: center; } - .slider-2 > img { - width: 100%; - position: absolute; - left: 0; - top: 0; - transition: all 0.5s; } - .slider-2 input { - display: none; } - .slider-2 input:checked + label { - border-color: #666; - opacity: 1; } - .slider-2 input:checked + label + img { - opacity: 1; - transform: scale(1); } - .slider-2 input ~ img { - opacity: 0; - transform: scale(0.9); } - .slider-2 label { - display: inline-block; - margin-top: calc(50% + 15px); - margin-left: 15px; - border: 3px solid #999; - cursor: pointer; - opacity: 0.6; } - .slider-2 label img { - display: block; } - -.slider-3 { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; } - .slider-3 .icon-cards { - position: relative; - width: 60vw; - height: 40vw; - max-width: 380px; - max-height: 250px; - margin: 0; - perspective: 1000px; } - .slider-3 .icon-cards-content { - position: absolute; - width: 100%; - height: 100%; - transform-style: preserve-3d; - transform: translateZ(-30vw) rotateY(0); - animation: carousel 30s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards; } - .slider-3 .icon-cards-item { - position: absolute; - top: 0; - left: 0; - max-width: 380px; - max-height: 250px; } - .slider-3 .icon-cards-item:nth-child(1) { - transform: rotateY(0) translateZ(35vw); } - .slider-3 .icon-cards-item:nth-child(2) { - transform: rotateY(120deg) translateZ(35vw); } - .slider-3 .icon-cards-item:nth-child(3) { - transform: rotateY(240deg) translateZ(35vw); } - .slider-3 .icon-cards img { - width: 100%; } - -@keyframes carousel { - 0%, 17.5% { - transform: translateZ(-35vw) rotateY(0); } - 27.5%, 45% { - transform: translateZ(-35vw) rotateY(-120deg); } - 55%, 72.5% { - transform: translateZ(-35vw) rotateY(-240deg); } - 82.5%, 100% { - transform: translateZ(-35vw) rotateY(-360deg); } } - -pre { - border: 1px solid var(--box-border); - background: #ccc; - padding: 1rem; - box-sizing: border-box; } - -blockquote { - border: 1px solid var(--box-border); - background: #ccc; - padding: 1rem; - box-sizing: border-box; } - -.crumbs-1, .crumbs-2 { - list-style: none; - overflow: hidden; - font-size: 1rem; - user-select: none; } - .crumbs-1 li, .crumbs-2 li { - background: #fff; - border-left: 1px solid var(--box-border); - border-top: 1px solid var(--box-border); - border-bottom: 1px solid var(--box-border); - padding: 0 10px 0 20px; - height: 2.5rem; - position: relative; - display: block; - float: left; - display: inline-flex; - align-items: center; - cursor: pointer; } - .crumbs-1 li:after, .crumbs-1 li:before, .crumbs-2 li:after, .crumbs-2 li:before { - content: " "; - display: block; - width: 0; - height: 0; - border-top: 20px solid transparent; - border-bottom: 20px solid transparent; - border-left: 14px solid #fff; - position: absolute; - top: 50%; - margin-top: -20px; - left: 100%; } - .crumbs-1 li:after, .crumbs-2 li:after { - z-index: 1; } - .crumbs-1 li:before, .crumbs-2 li:before { - border-left-color: var(--box-border); - margin-left: 1px; - z-index: 1; } - .crumbs-1 li.active:after, .crumbs-1 li:hover:after, .crumbs-2 li.active:after, .crumbs-2 li:hover:after { - color: var(--text-on-background-color-2); } - .crumbs-1 li.active:after, .crumbs-2 li.active:after { - border-left: 14px solid var(--button-colored-background); } - .crumbs-1 li:hover:after, .crumbs-2 li:hover:after { - border-left: 14px solid var(--button-colored-background-hover); } - .crumbs-1 .active, .crumbs-2 .active { - cursor: default; - background: var(--button-colored-background); } - .crumbs-1 .active, .crumbs-1 li:hover, .crumbs-2 .active, .crumbs-2 li:hover { - color: var(--text-on-background-color-2); } - .crumbs-1 li:hover, .crumbs-2 li:hover { - background: var(--button-colored-background-hover); } - -.crumbs-1 li:not(:last-child):after, .crumbs-1 li:before { - content: " "; - display: block; - width: 0; - height: 0; - border-top: 20px solid transparent; - border-bottom: 20px solid transparent; - border-left: 14px solid #fff; - position: absolute; - top: 50%; - margin-top: -20px; - left: 100%; } - -.crumbs-1 li.active:not(:last-child):after, .crumbs-1 li:hover:not(:last-child):after { - color: var(--text-on-background-color-2); } - -.crumbs-1 li.active:not(:last-child):after { - border-left: 14px solid var(--button-colored-background); } - -.crumbs-1 li:hover:not(:last-child):after { - border-left: 14px solid var(--button-colored-background-hover); } - -.crumbs-1 :last-child:before { - border: none; } - -.btn, .link { - cursor: pointer; - user-select: none; } - -button, input[type="submit"], input[type="reset"], input[type="button"], label.button, a.button { - cursor: pointer; - display: inline-flex; - min-width: 70px; - background: var(--button-colored-background); - color: var(--text-on-background-color-2); - padding: 0 1rem 0 1rem; - flex-grow: 0; - height: 30px; - border: 1px solid var(--box-border); - box-shadow: none; - justify-content: center; - align-items: center; - outline: 0; - font-family: inherit; - font-size: .9rem; - user-select: none; - font-weight: 100; } - button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, label.button::-moz-focus-inner, a.button::-moz-focus-inner { - border: 0; } - button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, label.button:hover, a.button:hover { - background: var(--button-colored-background-hover); - color: var(--text-on-background-color-2); } - -button.save, .button.save, input[type="submit"].save { - color: rgba(0, 0, 0, 0.75); - background: var(--button-colored-background); } - button.save:hover, button.save:focus, .button.save:hover, .button.save:focus, input[type="submit"].save:hover, input[type="submit"].save:focus { - background: var(--button-colored-background); } - -button.save, .button.save, input[type="submit"].save { - color: rgba(0, 0, 0, 0.75); - background: #8fff79; } - button.save:hover, button.save:focus, .button.save:hover, .button.save:focus, input[type="submit"].save:hover, input[type="submit"].save:focus { - background: #a1ffa1; } - -button.cancel, .button.cancel, input[type="submit"].cancel { - background: #ee5649; } - button.cancel:hover, button.cancel:focus, .button.cancel:hover, .button.cancel:focus, input[type="submit"].cancel:hover, input[type="submit"].cancel:focus { - background: #ff7d79; } - -button.close, .button.close, input[type="submit"].close, input[type="reset"].close { - color: rgba(0, 0, 0, 0.75); - background: #fffc3e; } - button.close:hover, button.close:focus, .button.close:hover, .button.close:focus, input[type="submit"].close:hover, input[type="submit"].close:focus, input[type="reset"].close:hover, input[type="reset"].close:focus { - background: #fffd7b; } - -button.disabled, .button.disabled, input[type="submit"].disabled { - color: rgba(0, 0, 0, 0.5); - background: #e1e1e1; - cursor: not-allowed; } - button.disabled:hover, button.disabled:focus, .button.disabled:hover, .button.disabled:focus, input[type="submit"].disabled:hover, input[type="submit"].disabled:focus { - background: #e1e1e1; } - -.link.default { - color: var(--button-colored-background); } - -.link.save { - color: #8fff79; } - -.link.cancel { - color: #ee5649; } - -.link.close { - color: #fffc3e; } - -.link.disabled { - color: #e1e1e1; } - -i.favorite { - color: #ffd700; - text-shadow: 0 0 1px #000; } - -.unseen { - font-weight: bold; } - -[data-href] { - cursor: pointer; } - -.portlet-body a:not(.button), a.content, a .content { - color: var(--link-color); - border-bottom: 1px dotted var(--link-color); } - .portlet-body a:not(.button):hover, a.content:hover, a .content:hover { - border-bottom: 1px dotted transparent; } - -ul.boxed { - background: #fff; - padding: 5px; - border: 1px solid var(--box-border); } - ul.boxed li { - margin: 5px 0 5px 0; } - ul.boxed li:first-child { - margin-top: 0; } - ul.boxed li:last-child { - margin-bottom: 0; } - -ul.h-list li { - display: inline-block; - margin: 5px 10px 5px 10px; } - -ul.foldable { - list-style-type: none; - margin: 0; - padding: 0; } - ul.foldable input[type="checkbox"] { - display: none; } - ul.foldable .caret { - cursor: pointer; - user-select: none; } - ul.foldable .caret::before { - content: "\25B6"; - color: black; - display: inline-block; - margin-right: 6px; } - ul.foldable .nested { - display: none; } - ul.foldable input[type="checkbox"]:checked ~ .nested { - display: block; } - ul.foldable input[type="checkbox"]:checked ~ .caret::before { - transform: rotate(90deg); } - ul.foldable ul { - list-style-type: none; } - -body > nav { - width: 250px; - overflow-y: auto; - font-size: 0.8em; - background: var(--nav-category-background); - color: rgba(255, 255, 255, 0.8); - flex-shrink: 0; - display: flex; - flex-direction: column; - user-select: none; } - -#nav-side-outer { - overflow-y: auto; - height: 100%; - user-select: none; - scrollbar-color: var(--button-colored-background) var(--nav-category-background); - scrollbar-width: thin; } - #nav-side-outer::-webkit-scrollbar { - width: 7px; } - #nav-side-outer::-webkit-scrollbar-thumb { - background: var(--button-colored-background); } - #nav-side-outer::-webkit-scrollbar-track { - background: var(--nav-category-background); } - -#nav-side-inner { - flex: 0; - display: flex; - flex-flow: column; - box-sizing: border-box; - border-top: 1px solid #4b5055; } - #nav-side-inner span { - flex-grow: 1; } - #nav-side-inner input { - display: none; } - #nav-side-inner input:checked + ul .expand { - transition: all .3s ease; - display: inherit; - transform: rotateZ(90deg); } - #nav-side-inner input:checked + ul > li:nth-child(n+2) { - display: inherit; } - #nav-side-inner input + ul .expand { - transition: all .3s ease; - transform: rotateZ(0deg); } - #nav-side-inner input + ul > li:nth-child(n+2) { - display: none; } - #nav-side-inner label { - display: flex; - align-items: center; - padding: .5rem 1rem .5rem 1rem; - cursor: pointer; } - #nav-side-inner > li { - display: block; } - #nav-side-inner > li a { - display: block; - padding: .5rem 1rem .5rem 1rem; - border-left: 3px solid transparent; } - #nav-side-inner > li a:hover, #nav-side-inner > li a:focus { - background: var(--nav-sub-background-hover); - border-left: 3px solid var(--nav-sub-background-highlight); } - #nav-side-inner > li li:not(:first-child) { - background: var(--nav-sub-background); } - #nav-side-inner > li li a:hover, #nav-side-inner > li li a.active, #nav-side-inner > li li a:focus { - background: var(--nav-category-background-hover); } - #nav-side-inner > li li:first-child { - border-bottom: 1px solid #212628; } - #nav-side-inner > li li:first-child { - border-top: 1px solid #4b5055; } - #nav-side-inner > li:first-child li:first-child { - border-top: none; } - #nav-side-inner i { - flex-grow: 0; } - #nav-side-inner i + span { - margin-left: 5px; } - -.nav-trigger { - position: absolute; } - .nav-trigger:checked + nav { - width: 0%; } - -.nav-top { - user-select: none; - margin-top: 1rem; - display: block; } - .nav-top > li > a { - border: 1px solid var(--box-border); - margin-right: .5rem; - display: inline-block; - padding: 10px 10px; } - .nav-top li { - display: inline-block; } - .nav-top li a { - background: #fff; - position: relative; - cursor: pointer; } - .nav-top li a:hover, .nav-top li a.active, .nav-top li a:focus { - background: var(--nav-content-hover); - color: var(--text-on-background-color-2); } - .nav-top li a:hover > ul, .nav-top li a.active > ul, .nav-top li a:focus > ul { - display: block; - opacity: 1; - visibility: visible; } - .nav-top li a > ul { - padding: 0; - z-index: 5; - position: absolute; - top: 36px; - left: 0; - width: 150px; - display: none; - opacity: 0; - visibility: hidden; } - .nav-top li a > ul li { - display: block; - color: #000; - padding: 7px; } - .nav-top li a > ul li:hover, .nav-top li a > ul li:focus { - color: #252525; - background: var(--nav-content-hover); } - -#nav-trigger { - display: none; } - -@media only screen and (max-width: 800px) { - #nav-trigger:not(:checked) + nav { - width: 0%; } - #nav-trigger:checked + nav { - width: auto; - min-width: 250px; } } - -@media only screen and (max-width: 500px) { - #nav-trigger:checked + nav { - width: 100%; } - #nav-trigger:checked ~ main { - display: none; } } - -.pagination li { - display: inline-block; } - .pagination li + li { - margin-left: .5rem; } - -.pagination a { - display: inline-block; - border-radius: 3px; - background: #ccc; - padding: 5px 10px 5px 10px; } - -.pagination .active, .pagination a:hover, .pagination a:active { - color: #000; - background: #fff; } - -.meter { - height: 15px; - /* Can be anything */ - position: relative; - background: none !important; } - .meter > span { - display: block; - height: 100%; - border-radius: 3px; - background-color: #2bc253; - background-image: linear-gradient(to left top, color-stop(0, #2bc253), color-stop(1, #54f054)); - position: relative; - overflow: hidden; } - .meter.orange > span { - background-color: #f1a165; - background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a)); - background-image: -webkit-linear-gradient(#f1a165, #f36d0a); } - .meter.blue > span { - background-color: #96c2f1; - background-image: -moz-linear-gradient(top, #96c2f1, #4394f3); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96c2f1), color-stop(1, #4394f3)); - background-image: -webkit-linear-gradient(#96c2f1, #4394f3); } - .meter.red > span { - background-color: #f0a3a3; - background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323)); - background-image: -webkit-linear-gradient(#f0a3a3, #f42323); } - -.meter > span:after, .animate > span > span { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - z-index: 1; - -webkit-background-size: 50px 50px; - -moz-background-size: 50px 50px; - -webkit-animation: move 4s linear infinite; - overflow: hidden; } - -.animate > span:after { - display: none; } - -@-webkit-keyframes move { - 0% { - background-position: 0 0; } - 100% { - background-position: 50px 50px; } } - -.noanimation > span > span, .noanimation > span:after { - -webkit-animation: none; } - -.nostripes > span > span, .nostripes > span:after { - -webkit-animation: none; - background-image: none; } - -.timeline { - list-style: none; - margin: 0 0 30px 120px; - padding-left: 30px; - border-left: 3px solid #eaeaea; } - .timeline li { - margin: 0; - position: relative; } - .timeline p { - margin: 0 0 15px; } - -.timeline-date { - margin-top: -18px; - top: 50%; - left: -150px; - font-size: 0.95em; - line-height: 20px; - position: absolute; - padding: 5px 10px 5px 10px; - border: 1px solid #ccc; } - -.timeline-circle { - margin-top: -10px; - top: 50%; - left: -40px; - width: 10px; - height: 10px; - background: tomato; - border: 3px solid #eaeaea; - border-radius: 50%; - display: block; - position: absolute; } - -.timeline-circle-start { - margin-top: 0; - top: 0; - left: -45px; - width: 20px; - height: 20px; - background: #fff; - border: 3px solid #eaeaea; - border-radius: 50%; - display: block; - position: absolute; } - -.timeline-circle-end { - margin-top: 0; - top: 100%; - left: -45px; - width: 20px; - height: 20px; - background: #fff; - border: 3px solid #eaeaea; - border-radius: 50%; - display: block; - position: absolute; } - -.timeline-content { - padding: 50px 20px 0; - border-radius: 0.5em; - position: relative; } - -.timeline-content p { - text-align: justify; } - -.timeline label { - font-size: 1.3em; - position: absolute; - z-index: 90; - top: 20px; } - -.timeline-radio { - display: none; } - -.timeline-break { - display: none; } - -.progress-radial { - margin-right: 20px; - position: relative; - width: 70px; - height: 70px; - border-radius: 50%; - background-color: tomato; } - .progress-radial .overlay { - position: absolute; - width: 60px; - height: 60px; - background-color: #fff; - border-radius: 50%; - margin-left: 5px; - margin-top: 5px; - text-align: center; - line-height: 60px; - font-size: 9px; } - -.emptyPage { - width: 80%; - font-size: 15rem; - margin: 0 auto; - margin: 5rem; - padding: 3rem; - text-align: center; - border: 5px solid rgba(92, 2, 2, 0.1); } - .emptyPage:before { - font-family: 'Material Symbols Outlined', serif; - content: 'question_mark'; - color: rgba(0, 0, 0, 0.1); } - -.box { - box-sizing: border-box; - margin-top: 1rem; - overflow-x: auto; } - .box .inner { - box-sizing: border-box; - padding: 10px; } - -.box-container { - display: inline-block; } - -section.box { - background: #fff; - border: 1px solid var(--box-border); } - -section header > h1 { - margin: 10px 10px 0 10px; - padding-bottom: 5px; - font-size: 1.1em; - border-bottom: 1px solid #e1e1e1; } - -section > h2 { - box-sizing: border-box; - font-size: 1.2em; - margin-bottom: 5px; } - -.pagebreak { - display: none; } - -@media print { - .pagebreak { - page-break-after: always; - display: block; } } - -.tabview .tab-links { - color: #000; - padding: 5px 0 0 0; } - .tabview .tab-links label { - font-size: 0.9em; - user-select: none; - cursor: pointer; - border: 1px solid var(--button-colored-background); - white-space: nowrap; } - .tabview .tab-links label:hover, .tabview .tab-links label:focus { - color: var(--text-on-background-color-2); - background: var(--button-colored-background-hover); - border: 1px solid var(--button-colored-background-hover); - outline: none; } - .tabview .tab-links .active label:hover, .tabview .tab-links .active label:focus { - color: var(--text-on-background-color-2); - background: var(--button-colored-background-hover); - border: 1px solid var(--button-colored-background-hover); - outline: none; } - .tabview .tab-links .active label { - cursor: default; } - .tabview .tab-links li { - display: inline-block; } - -.tabview .tab-content { - display: flex; - flex: 1; } - .tabview .tab-content > input { - display: none; } - .tabview .tab-content > input + div { - display: none; } - .tabview .tab-content > input:checked + div { - display: flex; - flex: 1; - flex-direction: column; } - -.tabview .tab { - max-width: 100%; } - -.tabview.right > .box { - order: 2; } - -.tab-1 .tab-links { - margin: 0 0 10px 1px; } - .tab-1 .tab-links label { - padding: 5px; - background: none; - overflow: auto; - background: #fff; } - .tab-1 .tab-links .active, .tab-1 .tab-links .active label { - color: var(--text-on-background-color-2); - background: var(--button-colored-background); } - .tab-1 .tab-links li { - margin: 0 5px 0 0; } - -.tab-1 .tab { - max-width: 100%; } - -.tab-1 .tab-content { - box-sizing: border-box; - border: 1px solid var(--button-colored-background); - background: #fff; - padding: 10px; } - -.tab-1.left, .tab-1.right { - display: flex; } - .tab-1.left .tab-links, .tab-1.right .tab-links { - margin: 0; - border: none; } - .tab-1.left .tab-links li, .tab-1.right .tab-links li { - display: block; - margin-bottom: 20px; } - .tab-1.left .tab-links .active label, .tab-1.right .tab-links .active label { - border: 1px solid var(--box-border); } - .tab-1.left .tab-content, .tab-1.right .tab-content { - width: 100%; } - -.tab-2 { - display: flex; - flex: 1; - flex-direction: column; } - .tab-2 .tab { - max-width: 100%; } - .tab-2 .tab-links label { - padding: 5px 10px 5px 10px; } - .tab-2 .tab-links li { - margin: 0 5px 15px 0; } - .tab-2 .tab-links .active a, .tab-2 .tab-links .active label { - color: var(--text-on-background-color-2); - background: var(--button-colored-background); } - .tab-2.left, .tab-2.right { - flex-direction: row; } - .tab-2.left .tab-links, .tab-2.right .tab-links { - margin: 0; - border: none; } - .tab-2.left .tab-links li, .tab-2.right .tab-links li { - display: block; - margin-bottom: 20px; } - .tab-2.left .tab-links .active label, .tab-2.right .tab-links .active label { - border: 1px solid var(--box-border); } - .tab-2.left .tab-content, .tab-2.right .tab-content { - width: 100%; } - -.order-up, .order-down, .remove-form, .update-form, .save-form, .form-action { - color: var(--button-colored-background); } - -table.fixed { - table-layout: fixed; } - -table input[type=radio]:checked + i { - color: var(--button-colored-background); } - -table input[type=checkbox]:checked + label i { - color: var(--button-colored-background); } - -table .order-up, table .order-down { - cursor: pointer; } - -table .sort-asc, table .sort-desc, table .filter { - padding: 0; - cursor: pointer; } - -table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc { - display: none; } - -table.default.sticky { - position: relative; } - table.default.sticky thead th, table.default.sticky thead td { - background: var(--table-head-background); - position: sticky; - top: 0; - z-index: 2; } - table.default.sticky thead th > *, table.default.sticky thead td > * { - vertical-align: middle; } - -table.default { - width: 100%; - max-width: 100%; - font-size: 0.9em; - box-sizing: border-box; - overflow-x: auto; } - table.default caption { - font-size: 1.5rem; - font-weight: 400; - border-bottom: 1px solid var(--box-border); - background: var(--table-caption-background); - padding: .5rem; - text-align: left; - height: 2.5rem; } - table.default caption i { - font-size: .8rem; } - table.default td { - padding: 3px 10px 3px 10px; - white-space: nowrap; } - table.default tbody td, table.default tbody th { - border-bottom: 1px solid #ebedf2; } - table.default tbody tr { - height: 2.5rem; } - table.default tbody tr:nth-of-type(2n) { - background: var(--table-row-background); } - table.default tbody tr:nth-of-type(2n+1) { - background: var(--table-row-background-alt); } - table.default tbody tr:hover td, table.default tbody tr:focus td { - background: var(--table-row-background-hover); } - table.default tbody tr:last-child td, table.default tbody tr:last-child th { - border: none; } - table.default tbody tr:focus, table.default tbody tr:hover { - outline: none; - transform: scale(1); - box-shadow: 0 0 5px var(--box-border); } - table.default tbody th { - background: var(--table-head-background); } - table.default tbody a { - display: inline-flex; - align-items: center; } - table.default tbody a i { - margin-right: .5rem; } - table.default thead { - background: var(--table-head-background); } - table.default thead tr { - height: 2.5rem; } - table.default thead td { - border-bottom: 1px solid #ebedf2; } - table.default thead input[type=radio] { - display: none; } - table.default thead input[type=radio]:checked + label { - color: var(--box-highlight); } - table.default .empty { - text-align: center; - color: #d8d8d8; } - table.default tfoot { - border: none; } - table.default tfoot label { - float: left; } - table.default tfoot select { - width: auto; - float: right; - margin: 0; - min-width: 0px; } - table.default tfoot td { - text-align: center; - padding-top: 10px; } - -table.list th { - text-align: left; - padding: 2px 0 2px 0; } - -table.list td { - padding: 2px 5px 2px 5px; } - -thead input[type=radio] { - padding: 0; - margin: 0; - display: none; } - -thead i.fa { - color: #888; } - -thead label, thead span { - display: inline-flex; - align-items: center; } - thead label > a, thead span > a { - display: inline-flex; - align-items: center; } - -.fixed-1 td:nth-child(1) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-2 td:nth-child(2) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-3 td:nth-child(3) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-4 td:nth-child(4) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-5 td:nth-child(5) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-6 td:nth-child(6) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-7 td:nth-child(7) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-8 td:nth-child(8) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-9 td:nth-child(9) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-10 td:nth-child(10) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -@media screen and (max-width: 600px) { - table.table { - display: table; - width: 100%; } - table.table thead { - display: none; } - table.table tbody tr { - height: auto; - display: block; - margin-bottom: .625em; } - table.table tbody td { - display: flex; - font-size: .8rem; - height: 2rem; - line-height: 2rem; - text-overflow: ellipsis; - overflow: hidden; - max-width: 100%; } - table.table tbody td:before { - content: attr(data-label); - margin-right: 10px; - font-weight: bold; } - table.table tfoot { - display: none; } } - -span.tag { - cursor: pointer; - border-radius: 4px; - padding: 4px 6px 4px 6px; - font-size: .8rem; - color: var(--text-on-background-color-2); - background: var(--button-colored-background); - display: inline-flex; - align-items: center; - user-select: none; } - span.tag i { - color: var(--text-on-background-color-2); - margin-right: .5rem; } - -.tag.ok { - background: #aaffad; - border: 1px solid #81e27d; - color: #459442; } - -.tag.warning { - background: #f8ffa8; - border: 1px solid #d6d949; - color: #94972f; } - -.tag.error { - background: #ff7d79; - border: 1px solid #ee5649; - color: #a5302a; } - -.tag.info { - background: #b6d2ff; - border: 1px solid #85b0ee; - color: #4865a5; } - -/* It's supposed to look like a tree diagram */ -.tree, .tree ul, .tree li { - list-style: none; - padding: 0; - position: relative; } - -.tree { - display: table; - text-align: center; } - .tree .tree { - border-top: 1px solid #666; } - .tree .box { - margin: 0; - padding: 1rem; - border: 0; } - .tree ul { - width: 100%; - display: table; } - .tree ul:not(.tree) li:before { - border: 1px solid #666; } - .tree li { - display: table-cell; - padding: .5em 0; - vertical-align: top; } - .tree li:before { - content: ""; - left: 0; - position: absolute; - right: 0; - top: 0; } - .tree li:first-child:before { - left: 50%; } - .tree li:last-child:before { - right: 50%; } - .tree li > span { - text-align: left; - border: solid .1em #666; - display: inline-block; - margin: 0 .2em .5em; - position: relative; } - .tree ul:not(.tree):before, .tree span:before { - border: solid 1px #666; - content: ""; - height: .45em; - left: 50%; - position: absolute; } - .tree ul:before { - top: -.5rem; } - .tree span:before { - top: -.5rem; } - .tree > li:before, .tree > li:after, - .tree > li > span:before { - border: none; } - -.portlet { - border: 1px solid var(--box-border); - box-sizing: border-box; - margin-top: 1rem; } - .portlet .portlet-head { - background: #fff; - border-bottom: 1px solid #ebedf2; - padding: .7rem 1rem .7rem 1rem; - font-weight: 300; - display: flex; } - .portlet .portlet-head > span { - display: inline-flex; - align-items: center; } - .portlet .portlet-head > span > a { - display: inherit; } - .portlet .portlet-head form { - margin-left: 1rem; } - .portlet .portlet-foot { - background: #fff; - border-top: 1px solid #ebedf2; - padding: .7rem 1rem .7rem 1rem; - box-sizing: border-box; - display: flex; - flex-wrap: wrap; - column-gap: .5rem; } - .portlet .portlet-body > h2 { - border-bottom: 1px solid #ebedf2; } - .portlet .portlet-separator { - border-bottom: 1px solid #ebedf2; } - .portlet.highlight-1 { - background: var(--color-red); - color: #fff; } - .portlet.highlight-1 .portlet-body, .portlet.highlight-1 .portlet-head { - background: var(--color-red); - border: 0; } - .portlet.highlight-2 { - background: var(--color-green); - color: #fff; } - .portlet.highlight-2 .portlet-body, .portlet.highlight-2 .portlet-head { - background: var(--color-green); - border: 0; } - .portlet.highlight-3 { - background: var(--color-blue); - color: #fff; } - .portlet.highlight-3 .portlet-body, .portlet.highlight-3 .portlet-head { - background: var(--color-blue); - border: 0; } - .portlet.highlight-4 { - background: var(--color-yellow); - color: #000; } - .portlet.highlight-4 .portlet-body, .portlet.highlight-4 .portlet-head { - background: var(--color-yellow); - border: 0; } - .portlet.highlight-5 { - background: var(--color-purple); - color: #fff; } - .portlet.highlight-5 .portlet-body, .portlet.highlight-5 .portlet-head { - background: var(--color-purple); - border: 0; } - .portlet.highlight-6 { - background: var(--color-pink); - color: #fff; } - .portlet.highlight-6 .portlet-body, .portlet.highlight-6 .portlet-head { - background: var(--color-pink); - border: 0; } - .portlet.highlight-7 { - background: var(--color-orange); - color: #fff; } - .portlet.highlight-7 .portlet-body, .portlet.highlight-7 .portlet-head { - background: var(--color-orange); - border: 0; } - -.plain-portlet { - box-sizing: border-box; - margin-top: 1rem; - overflow-x: auto; } - -.portlet-body { - background: #fff; - padding: 1rem; } - -.context-menu { - position: absolute; - background: #fff; - border: 1px solid #ccc; - z-index: 1000; } - .context-menu label { - padding: .5rem; - width: 100%; - box-sizing: border-box; } - .context-menu label:hover { - background: var(--table-row-background-hover); } - -code[contenteditable], .contenteditable { - display: block; - outline: none; - white-space: pre-wrap; } - -#cookie_consent_checkbox { - display: none; } - #cookie_consent_checkbox:checked #cookieConsentForm { - display: none; } - #cookie_consent_checkbox:not(:checked) + #cookieConsentForm { - display: flex; } - -#cookieConsentForm { - position: fixed; - width: 100%; - height: 100%; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - background: rgba(0, 0, 0, 0.5); - font-weight: 100; } - #cookieConsentForm input[type=radio] { - display: none; } - #cookieConsentForm #cookieConsentForm_simple label, #cookieConsentForm .button, #cookieConsentForm input[type=submit], - #cookieConsentForm #cookieConsentForm_cutomize label, #cookieConsentForm .button, #cookieConsentForm input[type=submit] { - margin: 0; } - #cookieConsentForm .secondary { - background: none; - border: 2px solid var(--button-background); - color: var(--button-background) !important; } - #cookieConsentForm .consent_element { - margin-top: 1rem; } - #cookieConsentForm form { - background: #fff; - border: 1px solid var(--box-border); - display: inline-block; - padding: 1rem; - border-radius: 3px; } - -#cookieConsentForm_defaultbuttons, -#cookieConsentForm_customizedbuttons { - display: flex; - flex-direction: row; - gap: 10px; - margin-top: 1rem; } - -#cookieConsentForm_simple + div, #cookieConsentForm_cutomize + div { - display: none; } - -#cookieConsentForm_simple:checked + div, #cookieConsentForm_cutomize:checked + div { - display: block; } +Rendering Complete, saving .css file... +Wrote CSS to /home/runner/work/cssOMS/cssOMS/styles.scss