.logo{font-weight:700}@media screen and (max-width: 600px){.logo{font-size:1.6rem}}@media screen and (min-width: 600px){.logo{font-size:2rem}}footer{width:100%;border-top:2px solid var(--color-primary-main);background-color:var(--color-background-1);padding-top:2rem;padding-bottom:2rem;min-height:2rem;display:flex;align-items:center;justify-content:center}.footer-content{width:80%;max-width:var(--max-width);display:flex}.footer-main-section{display:flex;flex-direction:column}.footer-main-section>p{color:var(--color-text-main)}.footer-links-section{display:flex;flex-direction:column;gap:8px}.footer-links-section>span:first-child{margin-bottom:.5rem;color:var(--color-primary-light);font-weight:400;text-transform:uppercase}.footer-links-section>a{color:var(--color-text-main)}@media screen and (max-width: 600px){.footer-content{flex-direction:column;align-items:center;gap:2.5rem}.footer-main-section,.footer-links-section{max-width:75%;align-items:center}.footer-main-section>p{text-align:center}}@media screen and (min-width: 600px){.footer-content{flex-direction:row;justify-content:space-between}.footer-main-section{max-width:20vw}}header{height:var(--height-header);background-color:var(--color-background-1);border-bottom:1px solid var(--color-primary-light);width:100%;display:flex;justify-content:center;align-items:center}.header-content{width:80%;max-width:var(--max-width);display:flex;justify-content:space-between;align-items:center}.header-right-container{display:flex;align-items:center;gap:16px}@media screen and (max-width: 600px){.header-content{width:100%;padding:0 1rem;max-width:var(--max-width);display:flex;justify-content:space-between;align-items:center}}@media screen and (min-width: 600px) and (max-width: 1500px){.header-content{width:100%;max-width:100%;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:center}}@media screen and (min-width: 1500px){.header-content{max-width:var(--max-width);display:flex;justify-content:space-between;align-items:center}}.breadcrumbs-bar{width:100%;height:var(--height-breadcrumbs);background-color:var(--color-background-3);border-bottom:1px solid var(--color-primary-light);display:flex;justify-content:center;align-items:center}.breadcrumbs-bar>div{display:flex;align-items:center;gap:16px}.breadcrumbs-bar>div>*{color:var(--color-text-main)}@media screen and (max-width: 600px){.breadcrumbs-bar>div{width:100%;padding:0 1.5rem}}@media screen and (min-width: 600px) and (max-width: 1500px){.breadcrumbs-bar>div{width:100%;padding:0 1.5rem}}@media screen and (min-width: 1500px){.breadcrumbs-bar>div{width:80%;max-width:var(--max-width)}}.project-bar{background-color:var(--color-background-1);width:100%;display:flex;align-items:center;justify-content:center;padding:.5rem;color:var(--color-text-main);z-index:2}@media screen and (max-width: 600px){.project-bar{border-top:1px solid var(--color-primary-light);position:fixed;bottom:0;left:0;height:var(--height-project-bar)}.project-bar-section-mobile{width:100%;display:flex;align-items:center;justify-content:center}.project-bar-content-desktop,.project-bar-section-desktop{display:none}}@media screen and (min-width: 600px){.project-bar{border-bottom:1px solid var(--color-primary-light);position:sticky;top:0;box-shadow:var(--box-shadow-1)}.project-bar-section-mobile{display:none}.project-bar-section-desktop{padding:.5rem 0;background-color:var(--color-background-1);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:space-between}.project-bar-section-desktop>div{display:flex;flex-direction:column;justify-content:space-between;gap:8px}.project-bar-section-desktop>div:last-child{flex-direction:column;align-items:flex-end}}@media screen and (min-width: 600px) and (max-width: 1500px){.project-bar-content-desktop{width:100%;display:flex;padding:0 1rem;flex-direction:column}}@media screen and (min-width: 1500px){.project-bar-content-desktop{width:80%;max-width:var(--max-width);display:flex;flex-direction:column}}.ToggleGroup>.ToggleGroupItem:first-child{border-radius:4px 0 0 4px}.ToggleGroup>.ToggleGroupItem:last-child{border-radius:0 4px 4px 0}.ToggleGroupItem{cursor:pointer;background-color:var(--color-background-15);color:var(--color-text-light);padding:.35rem .55rem}.ToggleGroupItem-selected{background-color:var(--color-background-1);color:var(--color-text-main)}.section-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.5rem 0 1rem}.section-header>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px}.collapsible-content{margin-bottom:1rem}.section-header-title{font-size:var(--fontsize-large);font-weight:600;color:var(--color-text-main)}@media screen and (max-width: 600px){.section-header-controls-desktop{display:none}.section-header-controls-mobile{display:flex;align-items:center;flex-direction:row-reverse;gap:8px;padding:0 0 1rem}}@media screen and (min-width: 600px){.section-header-controls-mobile{display:none}.section-header-controls-desktop{display:flex;align-items:center;gap:8px}}.button{cursor:pointer;padding:.6rem .85rem;border-radius:var(--border-radius);border:0;font-weight:500}.button>div{display:flex;align-items:center;gap:4px}.button>div>svg{width:18px}.button:hover{filter:brightness(85%)}.button-primary{background-color:var(--color-primary-main);color:var(--color-primary-contrast)}.button-secondary{background-color:var(--color-primary-light);color:var(--color-primary-contrast)}.button-outline{border:1px solid var(--color-text-main);color:var(--color-text-main);background-color:transparent}.button-ghost{background-color:transparent;color:var(--color-text-main)}.button-icon{padding:0;cursor:pointer;color:var(--color-text-subtle);line-height:0}.button-icon:hover{transform:scale(1.05);color:var(--color-text-main);filter:brightness(100%)}.button-tagged{background-color:var(--color-secondary-main);color:var(--color-secondary-contrast);font-size:16px}.button-untagged{border:1px dashed var(--color-secondary-main);color:var(--color-secondary-main);font-size:16px}main{flex-grow:1}@media screen and (max-width: 600px){main{width:100%;padding:0 1rem;min-height:600px}}@media screen and (min-width: 600px) and (max-width: 1500px){main{width:100%}}@media screen and (min-width: 1500px){main{width:80%;margin:auto;max-width:var(--max-width)}}.spacer{width:100%;display:block}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;width:100%}@media screen and (max-width: 600px){.grid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}}@media screen and (min-width: 600px){.grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}}.grid-element{display:flex;border:1px solid var(--color-primary-light);background-color:var(--color-background-1);width:100%;min-height:120px;border-radius:var(--border-radius);cursor:pointer;padding:12px;align-items:center;flex-direction:column;justify-content:space-between;position:relative;box-shadow:#0000 0 0,#0000 0 0,#0000001a 0 1px 3px,#0000001a 0 1px 2px -1px}.grid-element:hover{filter:var(--hover-brightness)}.grid-element-top-row{width:100%;display:flex;align-items:center;justify-content:space-between}.grid-element-top-row-left-section{display:flex;align-items:flex-start;flex-direction:row;align-items:center;gap:.5rem;height:100%;color:var(--color-text-main)}.grid-element-top-row-right-section{height:100%}.grid-element-meta-section{display:flex;align-items:flex-start;justify-content:space-between;font-size:var(--fontsize-small);color:var(--color-text-light)}.grid-element-title{text-align:left;width:fit-content;color:var(--color-text-main);font-size:16px;font-weight:500;margin-bottom:1rem}@media screen and (min-width: 600px){font-size: 18px}.grid-element-bottom-row{display:flex;width:100%;align-items:center;flex-direction:row-reverse;gap:8px}.TooltipContent{background-color:var(--color-background-1);padding:.35rem;border-radius:var(--border-radius);border:1px solid var(--color-primary-light);z-index:100;color:var(--color-text-subtle)!important;font-weight:100}.SwitchRoot{width:38px;height:23px;background-color:var(--color-background-4);border-radius:9999px;cursor:pointer;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0)}.SwitchRoot[data-state=checked]{background-color:var(--color-primary-light)}.SwitchThumb{display:block;width:19px;height:19px;background-color:#fff;border-radius:9999px;transition:transform .1s;transform:translate(2px);will-change:transform}.SwitchThumb[data-state=checked]{transform:translate(17px)}.SwitchLabelLeft{font-size:12px;color:var(--color-text-main);min-width:37px;text-align:right}.SwitchLabelRight{font-size:12px;color:var(--color-text-main);min-width:0px;text-align:left}.capacityBarContainer{display:flex;flex-direction:row!important;align-items:center;gap:8px}.progressRoot{position:relative;overflow:hidden;background:var(--color-background-2);border-radius:99999px;width:100%;min-width:150px;height:20px;flex-shrink:0}.progressIndicator{background-color:var(--color-secondary-light);width:100%;height:100%;transition:transform .66s cubic-bezier(.65,0,.35,1);border-right:2px solid var(--color-background-1)}.currentIndicator{position:absolute;top:0;right:0;bottom:0;background-color:var(--color-secondary-main)}.percentageText{text-align:right;font-size:12px;color:var(--color-text-main);font-weight:400;font-style:italic;z-index:10000}.percentageTextLight{text-align:right;font-size:11px;font-weight:100;color:var(--color-secondary-light)}.percetageTextSmallBrackets{font-size:11px}.capacityBarPercentages{display:flex;flex-direction:column;align-items:center;gap:1px}.form-element-container{display:flex;flex-direction:column;gap:4px;width:100%}.form-element-label{color:var(--color-text-main);font-weight:600}.checkbox-label{padding-left:.5rem}.form-element-error{color:var(--color-text-main);padding-left:.5rem;font-weight:100;font-style:italic}.text-input{background-color:var(--color-background-2);color:var(--color-text-main);border:0;padding:.5rem;border-radius:var(--border-radius)}.text-area{background-color:var(--color-background-2);color:var(--color-text-main);border:0;padding:.5rem;border-radius:var(--border-radius);width:100%;resize:vertical}.CheckboxRoot{background-color:var(--color-background-2);width:32px;height:32px;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;box-shadow:none;cursor:pointer}.CheckboxIndicator{color:var(--color-text-main)}.SelectTrigger{display:inline-flex;align-items:center;justify-content:space-between;border-radius:var(--border-radius);padding:0 15px;height:35px;gap:5px;background-color:var(--color-background-2);color:var(--color-text-main);cursor:pointer}.SelectTrigger:hover{filter:brightness(.95)}.SelectTrigger[data-placeholder]{color:var(--violet-9)}.SelectIcon{color:Var(--color-text-main)}.SelectContent{overflow:hidden;background-color:var(--color-background-1);border-radius:6px;box-shadow:0 10px 38px -10px #16171859,0 10px 20px -15px #16171833;cursor:pointer}.SelectViewport{padding:5px;top:0;z-index:5}.SelectItem{color:var(--color-text-main);border-radius:3px;display:flex;align-items:center;height:25px;padding:0 35px 0 25px;position:relative;-webkit-user-select:none;user-select:none;z-index:1000}.SelectItem[data-disabled]{color:var(--mauve-8);pointer-events:none}.SelectItem[data-highlighted]{filter:brightness(.8)}.SelectLabel{padding:0 25px;font-size:12px;line-height:25px;color:red}.SelectSeparator{height:1px;background-color:var(--violet-6);margin:5px}.SelectItemIndicator{position:absolute;left:0;width:25px;display:inline-flex;align-items:center;justify-content:center}.SelectScrollButton{display:flex;align-items:center;justify-content:center;height:25px;background-color:var(--color-background-2);color:var(--color-text-main);cursor:default}button,fieldset,input{all:unset}.scrollViewport{max-height:60vh}.DialogOverlay{background-color:#0009;position:fixed;top:0;right:0;bottom:0;left:0;animation:overlayShow .15s cubic-bezier(.16,1,.3,1);z-index:3}.DialogContent:focus{outline:none}.DialogTitle{margin:0;font-weight:500;color:var(--mauve-12);font-size:17px}.DialogDescription{margin:10px 0 20px;color:var(--color-text-subtle);font-family:var(--font-sans-serif);font-size:15px;line-height:1.5}.IconButton{font-family:inherit;border-radius:100%;height:25px;width:25px;display:inline-flex;align-items:center;justify-content:center;color:var(--violet-11);position:absolute;top:22px;right:22px;cursor:pointer}.IconButton:hover{background-color:var(--violet-4)}.IconButton:focus{box-shadow:0 0 0 2px var(--violet-7)}@keyframes overlayShow{0%{opacity:0}to{opacity:1}}@keyframes contentShow{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.DialogContent{background-color:var(--color-background-1);color:var(--color-text-main)}@media screen and (max-width: 600px){.DialogContent{border-radius:var(--border-radius) var(--border-radius) 0 0;box-shadow:#0e121659 0 10px 38px -10px,#0e121633 0 10px 20px -15px;position:fixed;bottom:0;left:0;width:100vw;padding:25px;z-index:4}}@media screen and (min-width: 600px){.DialogContent{border-radius:var(--border-radius);box-shadow:#0e121659 0 10px 38px -10px,#0e121633 0 10px 20px -15px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;max-width:450px;max-height:85vh;padding:25px;animation:contentShow .15s cubic-bezier(.16,1,.3,1);z-index:4}}.loading-spinner{border:1px solid black;border-right-color:transparent;border-top:1px solid black;border-radius:50%;animation:.75s linear infinite spinner}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.folder-nav-bar{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:8px;color:var(--color-text-subtle);position:sticky;top:10px;z-index:2;border-bottom:1px solid var(--color-primary-main);overflow:hidden}.folder-nav-bar>span{font-size:16px;color:var(--color-text-subtle);cursor:pointer;flex-shrink:0}.folder-nav-bar>span:hover{color:var(--color-text-main);text-decoration:underline}@media screen and (max-width: 600px){.folder-nav-bar{position:sticky;top:10px;z-index:2}}@media screen and (min-width: 600px){.folder-nav-bar{position:relative}}.blank-space{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;border:1px dashed var(--color-primary-dark);border-radius:var(--border-radius);color:var(--color-text-subtle);text-align:center;min-height:400px}.blank-space-message{font-size:var(--fontsize-large);font-weight:100;margin-bottom:1rem}.blank-space .button{margin-top:1rem}.info-box{display:flex;align-items:center;padding:12px;background-color:var(--color-background-2);border-radius:8px;box-shadow:0 2px 4px #0000001a}.info-icon{margin-right:12px;color:var(--color-primary)}.info-text{font-size:14px;color:var(--color-text-main);line-height:1.4}.passcode-container{color:red;display:flex;flex-direction:row!important;align-items:center;justify-content:center!important;width:100%;flex-shrink:0;height:40px}.passcode-container-disabled{opacity:.5}.passcode-segment{display:flex;height:100%;gap:4px}.passcode-slot{color:var(--color-text-main);background-color:var(--color-background-3);border-radius:var(--border-radius);height:100%;width:34px;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:600}.fake-dash-container{display:flex;align-items:center;justify-content:center!important;width:30px}.fake-dash{width:11px;height:2px;background-color:var(--color-text-main)}.fake-caret-container{display:flex;align-items:center;justify-content:center!important}.fake-caret{width:2px;height:18px;background-color:var(--color-text-main);animation:blink 1s step-end infinite}@keyframes blink{0%,100% {opacity: 1;} 50% {opacity: 0;} @media screen and (max-width: 600px) {.viewer-docs-section {display: flex; flex-direction: column; margin-top: 1rem;}} @media screen and (min-width: 600px) {.viewer-docs-section {display: grid; grid-template-columns: 300px 1fr; margin: auto; margin-top: 1rem; padding: 1rem;}} * {box-sizing: border-box; font-family: var(--font-sans-serif); font-size: 14px;} :root { --font-mono: "Roboto Mono", monospace; --font-sans-serif: "Poppins", sans-serif; --font-serif: serif; --fontsize-small: 12px; --fontsize-medium: 14px; --fontsize-large: 21px; --height-header: 55px; --height-project-bar: 71px; --height-breadcrumbs: 27px; --border-radius: 8px; --hover-brightness: brightness(.97); } .light-mode { --color-primary-main: #0008d6; --color-primary-light: #9498ff; --color-primary-dark: #00046a; --color-primary-contrast: #ffffff; --color-secondary-main: #007bff; --color-secondary-light: #007bff; --color-secondary-dark: #007bff; --color-secondary-contrast: #ffffff; --color-text-main: #373737; --color-text-subtle: #656363; --color-text-light: #979797; --color-background-1: white; --color-background-2: #f0f0f0; --color-background-3: #eaebff; --color-background-4: #d6d6d6; --color-background-15: #fafafa; --box-shadow-1: 0px 6px 15px -3px rgba(0, 0, 0, .1); } .dark-mode { --color-primary-main: #4d4e91; --color-primary-light: #22244a; --color-primary-dark: #4d52ff; --color-primary-contrast: #dfdfdf; --color-secondary-main: #5d6d96; --color-secondary-light: #4b4d71; --color-secondary-dark: #4d52ff; --color-secondary-contrast: #000000; --color-text-main: #c7c7c7; --color-text-subtle: #a6a6a6; --color-text-light: #636363; --color-background-1: #181818; --color-background-2: #1d1d1d; --color-background-3: #262844; --color-background-4: #3a3a3a; --color-background-15: #1a1a1a; --box-shadow-1: 0px 6px 15px -3px rgba(0, 0, 0, .3); } html,body {margin: 0; padding: 0; background-color: var(--color-background-2);} a {text-decoration: none;} button {all: unset;} #root {min-height: 100vh; display: flex; flex-direction: column;} div {user-select: none;} button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;} .loading-animation-bg {background-image: repeating-linear-gradient(-45deg,var(--color-background-2),var(--color-background-2) 1rem,var(--color-background-15) 1rem,var(--color-background-15) 2rem); background-size: 200% 200%; animation: barberpole 10s linear infinite;} .loading-animation-primary {background-image: repeating-linear-gradient(-45deg,var(--color-primary-main),var(--color-primary-main) 1rem,var(--color-primary-light) 1rem,var(--color-primary-light) 2rem); background-size: 200% 200%; animation: barberpole 10s linear infinite;} .loading-animation-secondary {background-image: repeating-linear-gradient(-45deg,var(--color-secondary-main),var(--color-secondary-main) 1rem,var(--color-secondary-light) 1rem,var(--color-secondary-light) 2rem); background-size: 200% 200%; animation: barberpole 10s linear infinite;} p {line-height: 1.35;} @keyframes barberpole {100% {background-position: 100% 100%;}} :root { --max-width: 900px; }}