From 9e55ba80007bfc5f3685f85f403d6a31c82c4dae Mon Sep 17 00:00:00 2001 From: Dennis Eichhorn Date: Fri, 20 Oct 2023 13:08:56 +0000 Subject: [PATCH] icon fixes, loading optimizations --- input.scss | 53 +- nav.scss | 6 +- section.scss | 6 +- styles.css | 3989 +------------------------------------------------- 4 files changed, 54 insertions(+), 4000 deletions(-) diff --git a/input.scss b/input.scss index 6862360..e2809ec 100755 --- a/input.scss +++ b/input.scss @@ -30,7 +30,6 @@ input, select, textarea, .textarea { } &:active.undecorated, &:focus.undecorated { - -webkit-appearance: none; appearance: none; outline: none; border-style: none; @@ -91,6 +90,50 @@ input[type="datetime-local"] { padding-left: .5rem; } +.inputWithIcon { + position: relative; + + .frontIcon, .endIcon { + color: var(--input-icon-color); + font-size: 1rem; + position: absolute; + padding: .5rem; + font-weight: 200; + } + + .frontIcon { + left: 0; + top: 0; + } + + .endIcon { + right: 0; + top: 0; + } + + .frontIcon + input[type="text"], .frontIcon + input[type="password"] { + padding-left: 2.5rem; + } + + input[type=text]:active, input[type=text]:focus, + input[type=password]:active, input[type=password]:focus { + border: 1px solid var(--input-border-active); + color: var(--text-on-background-color); + } + + input[type=text]:active~.frontIcon, input[type=text]:focus~.frontIcon, + input[type=password]:active~.frontIcon, input[type=password]:focus~.frontIcon, + input[type=text]:active~.endIcon, input[type=text]:focus~.endIcon, + input[type=password]:active~.endIcon, input[type=password]:focus~.endIcon { + color: var(--input-icon-color-active); + } + + input[type=text]~.endIcon, input[type=text]~.endIcon, + input[type=password]~.endIcon, input[type=password]~.endIcon { + cursor: pointer; + } +} + .inputWrapper { display: inline-flex; flex-direction: row; @@ -114,6 +157,7 @@ input[type="datetime-local"] { .frontIcon, .endIcon { color: var(--input-icon-color); font-size: 1.1rem; + font-weight: 200; position: absolute; top: 0; padding: .25rem .6rem .6rem .4rem; @@ -319,9 +363,6 @@ textarea, .textarea { label.radio, label.checkbox { display: inline-flex; align-items: center; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; cursor: pointer; @@ -388,8 +429,6 @@ label { height: 6px; border: solid white; border-width: 0 3px 3px 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); transform: rotate(45deg); } } @@ -461,8 +500,6 @@ select.plain { border: none; outline: none; display: inline-block; - -webkit-appearance: none; - -moz-appearance: none; appearance: none; cursor: pointer; box-shadow: none; diff --git a/nav.scss b/nav.scss index c25ab15..29d39da 100755 --- a/nav.scss +++ b/nav.scss @@ -62,7 +62,6 @@ body > nav { input + ul { .expand { transition: all .3s ease; - margin-left: 1rem; transform: rotateZ(0deg); } @@ -121,8 +120,11 @@ body > nav { } i { - margin-right: 5px; flex-grow: 0; + + &+span { + margin-left: 5px; + } } } diff --git a/section.scss b/section.scss index 4390b86..7047aa1 100755 --- a/section.scss +++ b/section.scss @@ -6,11 +6,11 @@ margin: 5rem; padding: 3rem; text-align: center; - border: 1rem solid rgba(0, 0, 0, 0.1); + border: 5px solid rgba(92, 2, 2, 0.1); &:before { - font-family: 'FontAwesome', serif; - content: '\f03a'; + font-family: 'Material Symbols Outlined', serif; + content: 'question_mark'; color: rgba(0, 0, 0, 0.1); } } diff --git a/styles.css b/styles.css index 8e2a46a..6392a44 100755 --- a/styles.css +++ b/styles.css @@ -1,3992 +1,7 @@ -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; } - -/*! +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.390625deg) skewY(0.390625deg); } - 88.8% { - transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } -.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 { - -webkit-appearance: none; - 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; } - -.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; - 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; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; } - label.radio input, label.checkbox input { - margin: 0; - opacity: 0; - cursor: pointer; } - label.radio input:not(:required):checked ~ .checkmark, label.checkbox input:not(:required):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; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - 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; - -webkit-appearance: none; - -moz-appearance: none; - 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; - margin-left: 1rem; - 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 { - margin-right: 5px; - flex-grow: 0; } - -.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: 1rem solid rgba(0, 0, 0, 0.1); } - .emptyPage:before { - font-family: 'FontAwesome', serif; - content: '\f03a'; - 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-block; - 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; } + */.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}@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}@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.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}.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}@keyframes rollIn{from{opacity:0;transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@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:#000}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}.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}.clickPopup .popup i{flex-grow:0}input ~ .popup{position:absolute;display:none;z-index:3}input:checked ~ .popup,input ~ .popup.active{display:inline-block}select{cursor:pointer;padding:0 7px 0 7px}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:not(:required):checked ~ .checkmark,label.checkbox input:not(:required):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;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-block;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}.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}