:root {
    --primary: #f12c87  !important;
    --primary-hover: #f12c87aa  !important;
    --primary-focus: #f12c8766  !important;            
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background:rgba(255,255,255,0); }
::-webkit-scrollbar-thumb { background-color: var(--code-background-color); }
html, body { height:100%; padding:0; margin:0; overflow:hidden; }
.logo { height:32px; }       
.buttongrid { grid-template-columns: 1fr 1fr 1fr; grid-gap:1em; } 
.buttongrid button { margin:0; text-align: left; }
.buttongrid button span { display:inline-block; background:#00000022; border-radius: .25em; padding-left:8px; padding-right:8px; border-top:1px solid #00000055; border-bottom:1px solid #ffffff55; vertical-align: middle; margin-right:8px; }
.contentgrid { display:grid; grid-template-rows: auto 1fr; height:100%; min-height: 0; }
.log article { margin:.25rem 0; padding:.5rem 1rem; }
.sites article { margin:.25rem 0; padding:.5rem 1rem; }
.sites article:hover { background: #1f2e39; cursor:pointer; }
.sites:empty:not(.loading) { position: relative; }
.sites:empty:not(.loading):after { content:"\edb3"; position: absolute; font-family: 'boxicons'; font-size:8em; top:50%; left:50%; transform:translate(-50%,-50%); color:#ffffff15; }
.scrollable { height:100%; min-height: 0; overflow-y:auto; overflow-x:hidden; }
main { display:grid; height:100%; grid-template-rows: auto 1fr; }
code { cursor:pointer; }
code i { color: var(--color); }
.mt-0 { margin-top:0; }
.mb-0 { margin-bottom:0; }      
.mt-1 { margin-top:1rem; }
.mb-1 { margin-bottom:1rem; }  
.mt-2 { margin-top:2rem; }
.mb-2 { margin-bottom:2rem; }  
.me-0 { margin-right:0; }
.pt-0 { padding-top:0; }
.pb-0 { padding-bottom:0; }        
.pt-1 { padding-top:1rem; }
.pb-1 { padding-bottom:1rem; }     
.pt-2 { padding-top:2rem; }
.pb-2 { padding-bottom:2rem; }     
.p-1 { padding:1rem; }
.p-2 { padding:2rem; }
.px-1 { padding-left: 1rem; padding-right: 1rem; }
.px-2 { padding-left: 2rem; padding-right: 2rem; }
.grid-1fr-auto { grid-template-columns: 1fr auto; grid-gap:1em; }

code[data-tooltip] { border-bottom:0; }

@media (prefers-color-scheme: dark) { 
    :root { --code-background-color: #ffffff11 !important; }
}   
@media (prefers-color-scheme: light) { 
    :root { --code-background-color: #00000008 !important; }
    .logo { filter:invert(1); } 
}

.loading { position: relative; }
.loading:before { content:''; position: absolute; width:100%; height:100%; background:#111920aa; z-index: 100; }
.loading:after { content:''; position: absolute; top: 50%; left: 50%; margin-top:-32px; margin-left:-32px; border-radius: 50%; width: 64px; height: 64px; padding:0; box-sizing: border-box; border: 3px solid rgba(0, 0, 0, 0.1); border-top: 3px solid #808080; animation: rotating 1.2s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86); }

/* Tabs */
.tabset { overflow:hidden; padding:2px; }
.tabset > input[type="radio"] { position: absolute; left: -200vw; }
.tabset .tab-panels { height: calc(100% - 50px); overflow: auto; margin-top:1em; }
.tabset .tab-panel { display: none; min-height:64px; height:100%; margin-bottom:0; padding:1em .25em; clear:both; animation: fadeIn 2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; }
.tabset .tab-panel.has-list { margin-bottom: -20px; }
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) { display: block; }
.tabset > label { display:block; position: relative; padding: 12px 24px; cursor: pointer; font-weight: 600; border-top-left-radius: .25em; border-top-right-radius: .25em; color:#ffffff88; margin-right:0; float:left; box-shadow: 0 2px #ffffff11; transition: color .1s ease-in, padding .1s ease-in; user-select: none; } 
.tabset > input + label>i { margin-right:10px; font-size: .8em; color:#1bc740; }
.tabset > label.disabled>i { color:#ffffff33; }
.tabset > label.add i { font-size: 1.1em; vertical-align: text-bottom; }
.tabset > label:nth-child(2) { box-shadow: 0 2px #ffffff11; }
.tabset > label:nth-child(2):after, .tabset > label.filler:after { content:''; position: absolute; width:100%; height:100%; top:0; left:0; }
.tabset > label.filler { position:relative; float:none; width: auto; overflow: hidden; box-shadow: 0 2px #ffffff11; }
.tabset > input:checked + label { box-shadow: 0 -2px #ffffff11, 2px 0 #ffffff11, -2px 0 #ffffff11; color:#fff; padding: 14px 24px 10px;}
.tabset > input:checked + label:after { display: none; }

@keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }
@keyframes fadeInDown { 0% { opacity:0; transform:translateY(-20px); } 100% { opacity:1; transform:translateY(0); } }
@keyframes fadeOutUp { 0% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-20px); } }
@keyframes rotating { 100% { transform: rotate(360deg); } }

/* Toast styles */
.toast_window { animation:fadeInDown .3s ease-in-out forwards; position:absolute; background: #000000aa; color:#fff; font-size:14px; font-weight:600; padding:16px 12px; text-align:center; z-index:99999; top:0; text-shadow: 0 1px 0 rgba(0,0,0,.5); width:auto; max-width:calc(100% - 32px); min-width:100px; border-bottom-left-radius: .75em; border-bottom-right-radius: .75em; padding-left:1.5em; padding-right:1.5em; display:flex; align-items: center; gap: 5px; }
.toast_window.onmywayout { animation:fadeOutUp .3s ease-in-out forwards; }
.toast_window i { font-size:24px; }
.toast_window.green { background:#6dc774; }
.toast_window a { color:#333; font-weight: 400; }