@import url('/ui/wckd-ui.css');
@import url('/ui/wckd-ui-components.css');

.sidebar.sidebar{
grid-template-columns: 268px 1fr;
grid-template-areas:
  "sidebar header"
  "sidebar main"
  "footer footer";
}
aside .head, 
header .head{height:48px;}

.feather-corners .head.sticky{
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

.sticky-adjustment-01{top: 67px;}

.logout{
    position: fixed;
    bottom: var(--size-s);
    left: var(--size-s);
    width: 260px;
    border-top: 1px solid var(--border-color);
}

.connect-the-dots{margin:8px;padding:0;position:relative}
.connect-the-dots .flex{justify-content: space-between;}
.connect-the-dots > div {
font-size: var(--font-size-s);
line-height: var(--line-height);
list-style: none;
margin:0;
border-left: 2px solid var(--background-color-light);
padding:var(--size-s) var(--size-m);
position: relative;
transition: transform 0.2s ease, background-color 0.3s ease;	
}

.connect-the-dots > div:before {
content: "";
width: 14px;
height: 14px;
position: absolute;
background: var(--background-color-light);
border-radius: 90px;
left: -8px;
top: 11px;
background-image: radial-gradient(50% 100% at 50% 100%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
}
.connect-the-dots > div:hover {background: var(--background-color-light);border-radius: var(--feather);}
.connect-the-dots button.outline{height: 34px;height: 34px}

/* overwrites */
.wckd-menu li > a{font-size: var(--font-size-s);justify-content: initial;border-radius: var(--feather);}
.wckd-menu li.active > a{background-color: var(--background-color);}

.faded :hover > a, .faded .active > a{opacity: 1}
.faded a{opacity: 0.7}

.tabs-toolbar > ol {
padding: var(--size-xs);
margin: var(--size-s);
grid-gap: var(--size-s);
background-color: var(--background-color-dark);
border-radius: var(--feather);
width: fit-content;
}
.wckd-tabs .tabs-toggle, .tabs-toolbar .tabs-toggle{
background: none;
font-size: var(--font-size-s);
padding: var(--size-xs) var(--size-s) !important;
margin: 0;
border-radius: var(--feather) !important;
line-height: 1;
align-items: center;display: flex;
grid-gap:4px;
}

.tag {font-size: var(--font-size-xs);line-height: 1;vertical-align: middle;padding: 2px 4px;border-radius: 90px;border: 1px solid var(--border-color);background-color: var(--background-color-light);color: var(--font-color);font-weight: normal;line-height: 1;display: block;width: fit-content;margin-top: 4px}
.status-color-blue{background-color: var(--blue)}
.status-color-green{background-color: var(--green)}
.status-color-red{background-color: var(--red)}
.status-color-purple{background-color: var(--purple)}

@keyframes shimmer {
  0% {background-position: 0% center;}
  50% {background-position: 100% center;}
  100% {background-position: 0% center;}
}
.shimmer-border a {border: 1px solid transparent;background-clip: padding-box;}
.shimmer-border a::before {content: '';position: absolute;z-index: -1;border-radius: var(--feather);top: -1px; bottom: -1px; left: -1px; right: -1px;background: linear-gradient(45deg, rgba(31,34,39,1) 45%, white 50%, rgba(31,34,39,1) 55%);background-size: 300% 300%;animation: shimmerMove 5s linear infinite;filter: blur(2px);}

@keyframes shimmerMove {
0%   { background-position: 125% 125%; opacity: 1;}
100% { background-position: 0% 0%;	opacity: 0;}
}

/* Glow effect */
.glow {background-image: radial-gradient(50% 100% at 50% 100%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);border: 1px solid rgba(255, 255, 255, 0.1);}
.w-mark svg{width:34px;height: 34px}
.highlight {background-color: rgba(255, 105, 180, 0.2);}
/* Gradient background */
.gradient {position: absolute;width: 100%;height: 200px;background: linear-gradient(to top, #24292E, transparent);pointer-events: none;z-index: 1;bottom: 0;}
/* Checkmarks list */
ul.checkmarks {list-style: none;padding-left: 0;}
ul.checkmarks li {display: flex;}
ul.checkmarks li::before {content: "✔";margin-right: var(--size-s);}
ul.checkmarks strong {display: block;}
/* Size and line break */
.size-s.linebreak {display: block;margin: var(--size-s);}
/* Star wrapper */
#stars-wrapper {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;z-index: -1;pointer-events: none;perspective: 800px;}
.star {position: absolute;background-color: white;}

/* Zoom effect */
.wckd-section-zoom {display: flex;justify-content: center;align-items: center;overflow: hidden;margin: 0 auto;}
/* Animation effects */
.animate.in-view > img {animation: zoomIn 10s;}
.animate.fade-in {opacity: 0;}
.animate.in-view.fade-in {animation: fade_In 1.5s forwards;}
@keyframes fade_In {
from {opacity: 0;transform: translateY(20px);}
to {opacity: 1;transform: translateY(0);}}

/* Delayed fade-in animations */
.animate.in-view.fade-in.delay-1 { animation-delay: 0.25s; }
.animate.in-view.fade-in.delay-2 { animation-delay: 0.5s; }
.animate.in-view.fade-in.delay-3 { animation-delay: 1s; }
.animate.in-view.fade-in.delay-4 { animation-delay: 1.5s; }

button.plate {background: none;position: absolute;height: 54px;width: 54px;right: 0px;border: none;}
.plate svg{position: absolute;height: 60px;width: 60px;left: -5px;top: -9px;max-width:initial;max-height:initial}
.plate .burger{filter: url(#eat-hamburger)}
.plate .x{opacity: 0;transform: scale(0);transition: transform 400ms}
.plate.active .x{opacity: 1;transform: scale(0.7);transition: transform 400ms 350ms}
.plate .line{fill: none;stroke: var(--font-color);stroke-width: 6px;stroke-linecap: round;stroke-linejoin: round;transform-origin: 50%;transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms, transform 500ms 200ms}
.plate .x .line{stroke-width: 4px;stroke: var(--font-color)}
.plate .active .line{transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms}
.plate .line1{stroke-dasharray: 21 185.62753295898438;transition-delay: 0}
.plate .line2{stroke-dasharray: 21 178.6514129638672;transition-delay: 30ms}
.plate .line3{stroke-dasharray: 21 197.92425537109375;transition-delay: 60ms}
.plate .line4{stroke-dasharray: 21 190.6597137451172;transition-delay: 90ms}
.plate .line5{stroke-dasharray: 21 208.52874755859375;transition-delay: 120ms}
.plate .line6{stroke-dasharray: 21 186.59703063964844;transition-delay: 150ms}
.active.plate .line1{stroke-dasharray: 5 185.62753295898438;stroke-dashoffset: -141px}
.active.plate .line2{stroke-dasharray: 5 178.6514129638672;stroke-dashoffset: -137px}
.active.plate .line3{stroke-dasharray: 5 197.92425537109375;stroke-dashoffset: -176px}
.active.plate .line4{stroke-dasharray: 5 190.6597137451172;stroke-dashoffset: -159px}
.active.plate .line5{stroke-dasharray: 5 208.52874755859375;stroke-dashoffset: -139px}
.active.plate .line6{stroke-dasharray: 5 186.59703063964844;stroke-dashoffset: -176px}
.active.plate .x{transition: transform 400ms 250ms}
.desktop-only{display:flex}
.mobile-only{display:none!important}
.hamburger-btn{display: none}

header .button{white-space: nowrap;}


@media (max-width: 780px) {	
.scale-down-for-mobile{transform: scale(0.8)}
header.pad{padding: 0;}
header > .flex{border-radius: 0;}
.menu-container{width: 100%;align-self: normal;}
.menu-container .wckd-menu{display: none;}
.hamburger-btn{display: block;}
.menu-container.active .wckd-menu {
display: block;
top: 58px;
position: fixed;
width: 100%;
left: 0;
right: 0;
text-align: center;
background: var(--background-color);
}
}