body {font-family:"Inter", sans-serif;background-color:var(--bg);color:var(--fg);margin:0}
header {padding:6px;border-radius:var(--radius)}
header .float-right {margin:0 10px 0 0}
header .logo {padding:5px 10px 5px 10px;font-weight:900;border:1px solid var(--secondary);border-radius:var(--radius);font-size:24px;display:inline-block;margin-right:10px}
header .logo:hover {background-color:var(--secondaryg);border:1px solid var(--border);box-shadow:var(--shadow)}
header .logo a {text-decoration:none}
header nav {border-radius:var(--radius);border:1px solid var(--secondary);padding:6px 8px 6px 8px;cursor:pointer}
header nav:hover {background-color:var(--secondary);box-shadow:var(--shadow);border-color:var(--border)}
nav {display:inline-block;position:relative}
nav .popout {border:1px solid var(--border);background-color:Var(--secondary-bg);border-radius:var(--radius);display:none;padding:8px;position:absolute}
nav .popout div {transition:all 100ms;border:1px solid var(--secondary-bg);display:block;white-space:nowrap;padding:4px 8px 4px 8px;cursor:pointer;border-radius:calc(var(--radius) - 2px)}
nav .popout div:hover {cursor:pointer;background-color:var(--bg);box-shadow:var(--shadow)}
input, textarea {transition:all 100ms;resize:none;font-family:"Inter", sans-serif;border-radius:var(--radius);font-size:calc(var(--fs));border:1px solid var(--border);background-color:var(--secondary-bg);color:var(--fg);padding:8px 10px 8px 10px;width:calc(100% - 21px)}
input:hover, textarea:hover {border-color:var(--secondary-border)}
input:focus, textarea:focus {outline:0;border-color:var(--secondary-border);box-shadow:var(--shadow)}
input[type=range] {-webkit-appearance:none;width:calc(100% - 10px);padding:0;height:10px;background:var(--secondary-bg);border:1px solid var(--border);outline:none;border-radius:var(--radius);-webkit-transition:.2s;transition:opacity .2s}
input[type=range]::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;cursor:pointer;box-shadow:var(--shadow);width:38px;height:25px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border)}
input[type=range]::-moz-range-thumb {-webkit-appearance:none;appearance:none;cursor:pointer;box-shadow:var(--shadow);width:35px;height:30px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border)}
input[type="checkbox"] {display:none}
input[type="checkbox"].ios-switch {cursor:pointer;position:absolute;margin:8px 0 0 16px}
input[type="checkbox"].ios-switch + label {position:relative;padding:0 0 0 70px;line-height:24px;font-weight:normal;margin-top:0;margin-bottom:0}
input[type="checkbox"].ios-switch + label:before {content:"";cursor:pointer;position:absolute;display:block;left:0;top:0;width:52px;height:16px;margin-top:3px;border-radius:16px;background:var(--bg);border:1px solid var(--border);-webkit-transition:all 0.3s;transition:all 0.3s}
input[type="checkbox"].ios-switch + label:before:hover {box-shadow:var(--shadow)}
input[type="checkbox"].ios-switch + label:after {content:"";cursor:pointer;position:absolute;display:block;left:0;top:0;width:34px;height:22px;border-radius:12px;background:var(--secondary-bg);border:1px solid var(--border);-webkit-transition:all 0.3s;transition:all 0.3s}
input[type="checkbox"].ios-switch + label:hover:after {box-shadow:var(--shadow)}
input[type="checkbox"].ios-switch:checked + label:after {margin-left:20px}
input[type="checkbox"].ios-switch:checked + label:before {background:#1EB533}
input.undecorated, textarea.undecorated {background-color:rgba(0,0,0,0);border:0;width:300px;border-radius:0}
input.undecorated:focus, textarea.undecorated:focus {box-shadow:none}
input.large {font-size:calc(var(--fs) + 8px)}
button {font-family:"Inter", sans-serif;border-radius:var(--radius);font-size:calc(var(--fs));transition:all 100ms;border:1px solid var(--border);background-color:var(--bg);color:var(--fg);cursor:pointer !important;padding:6px 16px 6px 16px}
button:hover {background-color:var(--secondary-bg)}
button.primary {background-color:var(--fg);color:var(--bg)}
button.primary svg {filter:invert(100%)}
button a {text-decoration:none;color:inherit}
button:hover a {text-decoration:1px underline solid var(--border)}
button.secondary {border:1px solid var(--border);background-color:rgba(0,0,0,0)}
button.secondary:hover {box-shadow:var(--shadow);border-color:var(--secondary-border);background-color:var(--transparent-bg)}
button.secondary svg {color:var(--fg);width:25px;height:25px;display:block}
button.plain {border:1px solid rgba(0,0,0,0);padding:5px;background-color:rgba(0,0,0,0)}
button.plain:hover {background-color:var(--secondary-bg);border:1px solid var(--border);box-shadow:var(--shadow)}
button.plain svg {color:var(--fg);width:25px;height:25px;display:block}
button.undecorated {border:1px solid rgba(0,0,0,0);padding:5px;background-color:rgba(0,0,0,0);color:var(--fg)}
button.undecorated:hover {text-decoration:underline;background-color:rgba(0,0,0,0)}
button.styleless {transition:all 100ms;border:1px solid var(--bg) !important;margin:5px 0 5px 5px;padding:6px 8px 3px 6px !important;background-color:rgba(0,0,0,0) !important}
button.styleless:hover {border:1px solid var(--border) !important;transform:scale(1)}
button.tiny {padding:5px;font-size:calc(var(--fs) - 2px);border:1px solid var(--border);background-color:rgba(0,0,0,0)}
button.tiny:hover {box-shadow:var(--shadow);background-color:var(--bg)}
button.fat {padding:11px 24px 11px 24px}
h1, h2, h3, h4, h5, h6 {padding:0;margin:0}
label {font-weight:700;font-size:calc(var(--fs) + 2px);display:block;cursor:pointer}
a {transition:all 100ms;color:var(--fg);text-decoration:1px solid underline var(--border)}
a:hover {text-decoration:1px solid underline var(--fg)}
section .block {transition:all 100ms;position:relative;border-radius:var(--radius);padding:10px;display:inline-block;min-height:300px;margin:10px;border:1px solid var(--border)}
section .block:hover {background-color:var(--secondary-bg)}
section h4 {margin:0;padding:0;font-size:20px;text-transform:uppercase}
blockquote {font-family:"Open Sans", sans-serif;font-weight:normal;font-size:calc(var(--fs) + 4);line-height:28px;margin:0;padding:10px 0 10px 0}
li {list-style:none}
footer {margin-top:50px;opacity:0.8}
.brick .float-right {margin-top:10px}
.no-wrap {white-space:nowrap}
.label {text-transform:uppercase;display:inline-block;background-color:var(--border);color:var(--bg);padding:4px 8px 6px 8px;opacity:0.6;border-radius:var(--radius)}
.block .label {float:right}
.block .bottomed {position:absolute;bottom:12px;width:100%}
.tab {text-transform:uppercase;border-radius:var(--radius);background-color:var(--border);color:var(--bg);border:1px solid var(--border); margin-top:50px;padding:8px 12px 8px 12px;display:inline-block}
.invert {filter:invert(100%)}
.center-form {padding:20px;border-top:1px solid var(--border)}
.center-form button {width:calc(100%)}
.minimal {width:50%;display:block}
.bigger {width:90%;display:block}
.clickable {cursor:pointer !important;transition:all 100ms}
.clickable:hover {transform:scale(1.05)}
.smaller {font-size:calc(var(--fs) - 4px)}
.form {border-top:1px solid var(--border);border-left:1px solid var(--border);border-right:1px solid var(--border)}
.form label {padding:4px 4px 4px 8px;text-transform:uppercase;text-align:left}
.form input {border:0;border-left:1px solid var(--border)}
.form input:focus {background-color:var(--secondary-border)}
.form .row-header {font-weight:bold}
.form .row {border-bottom:1px solid var(--border)}
.fill {width:100% !important;display:block}
.tabbed button.focused {box-shadow:var(--shadow);opacity:1;color:var(--primary)}
.tab-holder {margin-bottom:15px}
.tab-holder .glass-card {display:none}
.table .table-row {display:grid;border-bottom:1px solid var(--border);grid-template-columns:repeat(auto-fit, minmax(75px, 1fr))}
.table .table-row:last-of-type {border-bottom:0}
.table .table-row .cell {padding:10px;border:1px solid var(--secondary-bg);cursor:pointer;white-space:nowrap;text-overline-style:ellipsis;border-radius:var(--radius);overflow:hidden}
.table .table-row .cell:hover {border:1px solid var(--secondary-border)}
.table .table-header {}
.table .table-header .cell {font-weight:bold}
.line-loader {width:100px;height:14px;border-radius:var(--radius);background-color:var(--secondary-bg);position:relative;overflow:hidden;border:1px solid var(--border)}
.line-loader-bar {width:40px;height:100%;position:absolute;top:0;left:0;background-color:var(--primary);border-radius:var(--radius);animation:slide 0.69s infinite linear}
@keyframes slide { 0%   {left:0} 50%  {left:calc(100% - 20px)} 100% {left:0}}
.controller {display:grid;grid-template-columns:200px 1fr;column-gap:15px;padding:0 15px 0 15px;min-height:calc(100vh - 80px)}

.masonry {
    column-count:3;
    column-gap:2rem;
    padding:10px 18px 10px 10px;
}
.note-tile {
    break-inside:avoid;
    margin-bottom:1rem;
    display:inline-block;
    width:100%;
    max-height:400px;
}

.grid {
    padding:0 15px 0 15px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-auto-rows:auto;
    gap:4px;
    align-items:start;
    /*min-height:calc(100vh - 80px)*/
}

/*CALENDAR*/
.grid7 {display:grid;grid-template-columns:repeat(7, 1fr);grid-template-rows:auto;gap:2px}
.grid7 div {height:95px;margin-top:0}

/*MAPS*/
#map {margin:0 !important}

.gridded {display:grid;grid-template-columns:repeat(3, 1fr);justify-content:center;text-align:center;width:100%}
.gridded .box {text-align:center}
.spacers {grid-gap:10px}
.split {display:grid;grid-template-columns:repeat(2, 1fr);grid-column-gap:10px;width:100%}
.split .align-right {text-align:right;grid-column-start:end}
.glass-card {position:relative;padding:10px 15px 15px 15px;border:1px solid var(--border);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,0.1);overflow:hidden;background-color:var(--secondary-bg)}
.dot {border-radius:50%;width:8px;height:8px;float:left;margin:calc(var(--fs) / 3) 8px 0 4px}
.box {transition:all 100ms;padding:10px;cursor:pointer}
.box:hover {backdrop-filter:blur(var(--blur));box-shadow:0 8px 28px rgba(0,0,0,0.1)}
.box label {padding:0;margin:0}
.box blockquote {padding:0;margin:0}
@keyframes flowIn {from {opacity:0;transform:translateY(-30px) scale(0.8)} to {opacity:1;transform:translateY(0)  scale(1)}}
.animate-in {opacity:0;animation:flowIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards var(--delay, 0s)}
.animate-in-delayed {opacity:0;animation:flowIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.2s}
.magnify-hover:hover {transition:all 100ms;transform:scale(1.05) !important}
.faded {opacity:0.75}
.faded:hover {opacity:1.0}
.marginalized {margin:0 -5px 0 5px}
#live-time {font-weight:bold;padding:8px 10px 8px 10px}
.interface-icon {width:28px;height:28px;border-radius:var(--radius);padding:4px;cursor:pointer;border:1px solid var(--bg)}
.interface-icon:hover {box-shadow:var(--shadow);border:1px solid var(--border)}
.notif {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer !important}
.notif img {float:left;width:40px;height:40px;padding:4px 0 4px 0;margin-right:10px;border-radius:50%}
.notif blockquote {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon {width:40px;height:40px;margin:0 !important}
.margined-icon {width:40px;height:40px;margin-right:10px}
.small-icon {width:20px;height:20px}
.user-icon {width:42px;height:42px;margin-right:12px}
.med-user-icon {width:52px;height:52px}
.round {border-radius:50%}
.far-bottom {bottom:10px}
.far-top {top:10px}
.bold {font-weight:bold}
.guttered {margin-right:calc(var(--gutter) * 2.5);margin-left:calc(var(--gutter) * 2.5)}
.height {height:calc(95% - var(--padding) - 20px)}
.presentable {margin:0 0 50px 0;display:grid;grid-template-columns:310px 1fr}
.flex {display:flex;flex-direction:column}
.flow {height:50vh}
.center {text-align:center;justify-content:center}
.vertical-center {vertical-align:middle}
.center-center {position:absolute;top:42%;left:50%;transform:translate(-50%, -50%)}
.center h2 {margin:25px 0 5px 0}
.align-left {text-align:left !important}
.align-right {text-align:right !important}
.shadowed {box-shadow:0 8px 28px rgba(0,0,0,0.1) !important}
.hover-shadowed:hover {transition:all 100ms;box-shadow:var(--shadow) !important}
.secondary-bg {background-color:var(--secondary-bg)}
.radius {border-radius:var(--radius) !important}
.inner-radius {border-radius:calc(var(--radius) - 4px) !important}
.bordered {border:1px solid var(--border)}
.secondary-bordered {border:1px solid var(--secondary-border)}
.plain-bordered {border:1px solid var(--secondary-bg)}

.list {overflow:hidden}
.list:hover {overflow:visible}
.list .box {border:1px solid rgba(0,0,0,0);border-radius:0;z-index:1}
.list .line {border-bottom:1px dotted var(--secondary-border) !important;border-bottom-left-radius:0;border-bottom-right-radius:0}
.list .line:last-of-type {border-bottom:none}
.list .box:hover {transform:scale(1.05);background-color:var(--bg);border-bottom:1px solid var(--secondary-bg);border-radius:var(--radius)}
.hover-border {border:1px solid var(--secondary-bg)}
.hover-background {background-color:var(--secondary-bg)}
.list .hover-border:hover, .hover-border:hover {border:1px solid var(--secondary-border);z-index:4}
.list .box .indicator {transition:all 100ms;opacity:0;margin:-2px 20px 0 0;float:right;position:relative}
.list .box:hover .indicator {transition:all 100ms;opacity:0.8}
.list-item {display:grid;grid-template-columns:50px 1fr}
.indicator span,
.indicator::before,
.indicator::after {content:'';position:absolute;width:15px;height:2px;background:var(--fg);border-radius:6px;transform-origin:left center;transition:transform 0.3s ease, top 0.3s ease, opacity 0.3s ease}
.indicator span {top:13px}
.indicator::before {top:1px;width:12px;left:0;transform:rotate(45deg) translateX(6px);margin-left:4px}
.indicator::after {top:25px;width:12px;left:0;transform:rotate(-45deg) translateX(6px);margin-left:4px}
.indicator.active span {opacity:0;transform:scaleX(0)}
.indicator.active {margin-top:10px}
.indicator.active::before {top:7px;width:16px;transform:rotate(45deg) translateX(0)}
.indicator.active::after {top:18px;width:16px;transform:rotate(-45deg) translateX(0)}
.no-deco {text-decoration:none !important}
#cover {position:fixed;display:none;width:100%;height:100%;background-color:rgba(0,0,0,0);backdrop-filter:blur(var(--blur));z-index:42067}
.dialogue {border:1px solid var(--border);border-radius:var(--radius);position:fixed;left:50%;top:15%;width:450px;margin-left:-225px;background-color:var(--secondary-bg);z-index:42069}

/*TODO REMOVE*/
.sub-item {display:none}
.sub-item .tiny {padding:5px 8px 5px 8px}
.code {margin:0}
.code[contenteditable="true"]:focus {outline:0}
.status-indicator {z-index:25;font-size:calc(var(--fs) - 4px);cursor:pointer;position:fixed;opacity:0.8;left:50%;top:5px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 12px;backdrop-filter:blur(var(--blur));margin:5px 0 0 -61px;border:1px solid var(--border);transition:border-color 0.3s ease}
.status-indicator:hover {box-shadow:var(--shadow)}
.status-indicator .status-dot {width:10px;height:10px;border-radius:50%;background-color:var(--green);transition:background-color 0.3s ease, transform 0.3s ease}
.status-indicator.status-connected .status-dot {background-color:var(--green)}
.status-indicator.status-connecting .status-dot {background-color:var(--orange);animation:statusPulse 1s infinite ease-in-out}
.status-indicator.status-disconnected .status-dot {background-color:var(--red)}
.status-toast-container {position:fixed;top:50px;right:16px;display:flex;flex-direction:column;gap:10px;z-index:1000}
.status-toast {padding:8px 12px;border-radius:var(--radius);border:1px solid var(--border);background-color:var(--bg);box-shadow:var(--shadow);opacity:0;transform:translateY(-6px);transition:opacity 0.3s ease, transform 0.3s ease}
.status-toast.show {opacity:1;transform:translateY(0)}
.status-toast.fade-out {opacity:0;transform:translateY(-6px)}
.status-toast.status-connected {border-color:var(--green);background-color:var(--green);color:white}
.status-toast.status-connecting {border-color:var(--orange);background-color:var(--orange);color:white}
.status-toast.status-disconnected {border-color:var(--red);background-color:var(--red);color:white}
.secondary-tile {transition:all 125ms;border-radius:var(--radius);cursor:pointer}
.secondary-tile:hover {background-color:var(--secondary-bg);border-radius:var(--radius) !important}
.secondary-tile .expose, .expose {visibility:hidden;margin:0}
.secondary-tile:hover .expose {visibility:visible}
@keyframes statusPulse {0% {transform:scale(1)}50% {transform:scale(1.2)}100% {transform:scale(1)}}
.text-red, .text-hover-red:hover {color:var(--red) !important;stroke:var(--red) !important}
.text-orange {color:var(--orange) !important;stroke:var(--orange) !important}
.text-yellow {color:var(--yellow) !important;stroke:var(--yellow) !important}
.text-green {color:var(--green) !important;stroke:var(--green) !important}
.text-blue {color:var(--blue) !important;stroke:var(--blue) !important}
.text-indigo {color:var(--indigo) !important}
.text-violet {color:var(--violet) !important}
.text-pink {color:var(--pink) !important}
.text-foreground {color:var(--fg) !important;stroke:var(--fg) !important}
.text-secondary {color:var(--secondary-fg) !important;stroke:var(--secondary-fg) !important}
hr {border-top:1px dotted var(--border);margin-top:10px}
.colors {display:flex;border-radius:var(--radius);overflow:hidden;margin-top:10px}
.color-option {transition:all 100ms;min-width:8px;flex:1;height:30px;cursor:pointer;clear:both;margin:0;display:inline-block;padding:0;border:0;gap:0}
.color-option .color-name {display:none;color:white;font-size:12px;padding-top:8px;text-shadow:var(--shadow);text-align:center}
.color-option:hover {flex:6;z-index:420}
.color-option:hover .color-name {display:block}
.number-picker {white-space:nowrap;overflow-x:auto}
.number-picker .number {transition:all 100ms;padding:10px;display:inline-block;font-size:var(--font-size);color:#808080;cursor:pointer}
.number-picker .number:hover, .number-picker .selected-number {transform:scale(2);color:var(--primary)}
@media only screen and (max-width:900px) {
   .grid {display:block}
   .glass-card {display:block}
}