:root {
	--font-color: black;
	--font-color-light: silver;
	--font-color-link: #58a6ff;
	--font-color-dark: white;
	--font-color-red: #ff5555;
	--font-color-blue: #5555ff;
	--font-color-green: #55ff55;
	--background-color: #f3f3f3;
	--background-color-bold: white;
	--background-color-action: #c0c0c066;
	--background-color-dark: black;
	--background-color-popup: #515e7b;
	--border-color: #999999;
	--border-color-dark: black;
	--border-color-normal: #d0d7deff;
	--border-color-light: #d0d7de88;
	--toggle-color: #cccccc;
	--toggle-color-active: #78cd78;
	--toogle-color-disable: #5555ff;
	

	--border-color-success: #d6e9c6;
	--border-color-info: #bce8f1;
	--border-color-warning: #faebcc;
	--border-color-danger: #ebccd1; 
	--border-color-primary: #337ab7;
	
	--background-color-success: #dff0d8;
	--background-color-info: #d9edf7;
	--background-color-warning: #fcf8e3;
	--background-color-danger: #f2dede;
	--background-color-primary: #337ab7;
	
	--fontawesome: 'Font Awesome 6 Free';
}

@media (prefers-color-scheme: dark) { 
	:root {
		--font-color: #e4e6eb;
		--font-color-light: gray;
		--font-color-link: #58a6ff;
		--font-color-dark: black;
		
		--background-color: #242526;
		--background-color-bold: #1e1e1e;
		--background-color-action: #353535;
		--background-color-dark: white;
		--background-color-popup: #515e7b;
		--background-color: black;
		
		--border-color: #aaaaaa;
		--border-color-dark: white;
		--border-color-normal: #717171;
		--border-color-light: #494c5088;
		--toggle-color: #555555;
	}
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; height:100%; }
body { font-family:"Noto Sans KR", sans-serif; height:100%; width:100%; margin:0; background:var(--background-color); color:var(--font-color); font-size:14px; -webkit-text-size-adjust: none; overflow:hidden; }

body.ios { position:fixed; height:100%; }

a, a:focus, a:active, a:hover, a:visited {
	color:var(--font-color-link);
	text-decoration: none;
	-webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none;
    outline: rgba(0, 0, 0, 0);
}

.desktop a:hover { text-decoration:underline; }

input, textarea, button, [contentEditable], button { border:1px solid var(--border-color-light); padding:6px 15px; border-radius:8px; flex-shrink:0; background:var(--background-color-bold); font-size:inherit; }
select { padding:5px; border-radius:8px; flex-shrink:0; background:var(--background-color-bold); border:1px solid var(--border-color-light); font-size:inherit; }

select:focus, button:focus, input:focus, textarea:focus, [contenteditable]:focus { 
	outline: 0;
	border:1px solid var(--border-color);
}

input[type=text], input[type=number], input[type=password] { width:100%; }
[type=number] { text-align:end; }
textarea { resize:none; width:100%; }

:focus-visible { outline:none; }

input[readonly] { background:var(--border-color-light); color:var(--font-color); }
input[disabled] { background:var(--border-color-light); color:var(--font-color); }
textarea[readonly] { background:var(--border-color-light); color:var(--font-color); }
textarea[disabled] { background:var(--border-color-light); color:var(--font-color); }

input.danger { background:var(--border-color-danger); border-color:var(--background-color-danger); box-shadow: none; }

@media (prefers-color-scheme: dark) { 
	input[readonly] { background:var(--border-color-light) !important; }
}

::-webkit-outer-spin-button { -webkit-appearance: none; display: none; }
::-webkit-inner-spin-button { -webkit-appearance: none; display: none; }
::-webkit-clear-button { -webkit-appearance: none; display: none; }
::-webkit-calendar-picker-indicator { filter:grayscale(100%); }
::-webkit-scrollbar { display: none; }

[type=datetime-local], [type=date], [type=time], [type=number], [type=text], [type=password], textarea { -moz-appearance: textfield; background-clip:padding-box; -webkit-appearance:none; -moz-appearance:none; appearance:none; }

.mobile [type=datetime-local]::before { content:"\f073"; font-family:fontAwesome; color:silver; padding-left:5px; }
.mobile [type=date]::before { content:"\f073"; font-family:fontAwesome; color:silver; padding-right:5px; }
.mobile [type=time]::before { content:"\f017"; font-family:fontAwesome; color:silver; padding-right:5px; }

[overflow] { overflow:auto; }
[overflow=x] { overflow-y:hidden; }
[overflow=y] { overflow-x:hidden; }

@media ( hover:none ) {
	[overflow] { -webkit-overflow-scrolling:touch; }
}

label.toggle { flex:0 0; display:inline-flex; gap:.2em; align-items:center; line-height:1; font-weight:normal; 	-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space:nowrap; margin:-5px padding:5px; }

label.toggle + label.toggle { /*margin-left:1em;*/ }
label.toggle [type=checkbox] { display:none; }

label.toggle [type=checkbox].slide + span { position:relative; height:1.2em; width:2em; border:2px solid var(--toggle-color); border-radius:.6em; background:var(--toggle-color); font-size:1.2em; }
label.toggle [type=checkbox].slide + span:before { transition:all .2s; content:''; display:block; position:absolute; height:calc(1.2em - 4px); width:calc(1.2em - 4px); border-radius:50%; background:white; left:0; }
label.toggle [type=checkbox].slide:checked + span { border:2px solid var(--toggle-color-active); background:var(--toggle-color-active); }
label.toggle [type=checkbox].slide:disabled + span { opacity:.4; }
label.toggle [type=checkbox].slide:checked + span:before { left:.8em; }

label.toggle [type=checkbox].lock + span { width:1.875em; text-align:center; }
label.toggle [type=checkbox].lock + span:before { font-family:var(--fontawesome); content:'\f3c1'; font-weight:900; font-size:1.5em; color:var(--toggle-color); }
label.toggle [type=checkbox].lock:checked + span:before { content:'\f023'; color:var(--toggle-color-active); }
label.toggle [type=checkbox][disabled].lock + span:before { opacity:.4; }

label.toggle [type=checkbox]:not(.slide):not(.lock) + span:before { font-family:var(--fontawesome); content:'\f0c8'; font-weight:400; font-size:1.5em; color:var(--toggle-color); }
label.toggle [type=checkbox]:not(.slide):not(.lock):checked + span:before { content:'\f14a'; color:var(--toggle-color-active); }
label.toggle [type=checkbox][disabled]:not(.slide):not(.lock) + span:before { opacity:.4; }

label.toggle [type=radio] { display:none; }
label.toggle [type=radio] + span:after { font-family:var(--fontawesome); content:'\f111'; font-weight:400; font-size:1.2em; color:var(--toggle-color); }
label.toggle [type=radio]:checked + span:after { content:'\f192'; color:var(--toggle-color-active); }
label.toggle [type=radio][disabled] + span:after { opacity:.4; }
label.toggle [type=radio]:checked.toggle + span:after { content:'\f058'; }

.dropdown-menu-center { right: auto; left: 50%; -webkit-transform: translate(-50%, 0); }

.popup { position:absolute; top:0; left:0; }
.popup > div { z-index:1040; position:fixed; width:100%; top:0; left:0; display:flex; justify-content:center; }
.popup.top > div { width:100%; align-items:center }
.popup.center > div { height:100%; align-items:center }
.popup.overlay > div { height:100%; width:100%; }
.popup.left > div { height:100%; width:100%; }

.popup .popup-back { z-index:1040; position:fixed; top:0; left:0; display:flex; justify-content:center; align-items:center; height:100vh; width:100vw; font-size:3em; transition:opacity .3s; }

/*
.popup:nth-of-type(2) .popup-back { background:var(--background-color-popup); opacity:.5; }
.popup:last-of-type:not(.overlay) .popup-back { background:var(--background-color-popup); opacity:.5; }
*/

.popup:nth-last-child(-n+2) .popup-back { background:var(--background-color-popup); opacity:.5; }

		
/* body.mobile .popup.overlay .popup-back { display:none; } */

.popup .popup-body { color:var(--font-color); background:var(--background-color); position:absolute; width:100%; max-height:calc(100vh - 40px); /* overflow:hidden; */ }

.popup.top .popup-body { left:calc(var(--left) + 10px); width:calc(100vw - var(--left) - 20px); }
.popup.bottom .popup-body { left:calc(var(--left) + 10px); width:calc(100vw - var(--left) - 20px); width:fit-content; }
.popup.center .popup-body { max-width:calc(100vw - var(--left) - 20px); margin-left:var(--left); }


.popup-body.move, .popup-body.drag { transition:none !important; }
.popup-body.move [overflow], .popup-body.drag [overflow] { overflow:hidden !important; }

.popup.overlay .popup-body { left:100vw; transition:left .3s; height:100%; width:calc(100% - var(--left)); max-height:initial; max-width:initial; padding:15px; }
.popup.left .popup-body { left:-100vw; transition:left .3s; height:100vh; width:initial; padding:0; max-width:calc(100vw - 50px); }
.popup.fullscreen .popup-body { opacity:0; transition:opacity .3s; height:100vh; width:100vw; max-height:initial; max-width:initial; padding:15px; }
.popup.center .popup-body { transition:opacity .1s; position:initial; width:initial; border-radius:15px; padding:20px; box-shadow:0 0 4px var(--border-color); }
.popup.bottom .popup-body { transition:bottom .3s; bottom:-200vh; border-radius:15px 15px 0 0; padding:20px; right:auto; left:calc(50% + var(--left)/2); transform:translate(-50%,0); }
.popup.bottom.right .popup-body { right:20px; left:auto; transform:none; }
.popup.top .popup-body { margin-top:10px; transition:top .3s; top:-100vh; border-radius:8px; padding:20px;  right:auto; left:50%; transform:translate(-50%,0); }

:is(.popup.primary, .popup.info, .popup.success, .popup.warning, .popup.danger) .popup-body { font-size:1.2em; padding:15px; text-align:center; display:flex; gap:10px; align-items:center; justify-content:center; word-break:break-all; }

@media (max-width:320px) { 
	.popup.overlay .popup-body { padding:5px; }
	.popup.top .popup-body { padding:10px; }
	.popup.bottom .popup-body { padding:10px; }
	.popup.center .popup-body { padding:10px; }
}

.popup.primary .popup-body { background:#337ab7; color:#ffffff; border-color:#337ab7; }
.popup.info .popup-body { background:#d9edf7; color:#31708f; border-color:#d6e9c6; }
.popup.success .popup-body { background:#dff0d8; color:#3c763d; border-color:#d6e9c6; }
.popup.warning .popup-body { background:#fcf8e3; color:#8a6d3b; border-color:#faebcc; }
.popup.danger .popup-body { background:#f2dede; color:#a94442; border-color: #ebccd1; }

.popup.primary.icon .popup-body:before { content:"\f0f3"; font-family:var(--fontawesome); font-size:1.4em; }
.popup.info.icon .popup-body:before { content:"\f05a"; font-weight:900; font-family:var(--fontawesome); font-size:1.4em; }
.popup.success.icon .popup-body:before { content:"\f058"; font-family:"FontAwesome"; font-size:1.4em; }
.popup.warning.icon .popup-body:before { content:"\f06a"; font-weight:900; font-family:var(--fontawesome); font-size:1.4em; }
.popup.danger.icon .popup-body:before { content:"\f05e"; font-weight:900; font-family:var(--fontawesome); font-size:1.4em; }

.popup.confirm .popup-body { padding:16px 32px; border-radius:20px; display:flex; flex-direction:column; gap:15px; max-width:calc(100vw - 30px); word-break:keep-all; }
.popup.confirm .popup-body > :first-child { font-size:1.2em; }
.popup.confirm .popup-body > :last-child { display:flex; gap:10px; justify-content:center; }

.popup.confirm button:first-child:after { content:var(--cancel); }
.popup.confirm button:last-child:after { content:var(--confirm); }

.popup.alert .popup-body { padding:20px 40px; border-radius:20px; display:flex; flex-direction:column; gap:15px; max-width:calc(100vw - 30px); }
.popup.alert .popup-body > :first-child { font-size:1.2em; }
.popup.alert .popup-body > :last-child { display:flex; gap:10px; justify-content:center; }
.popup.alert button:after { content:var(--confirm); }

.popup .top { flex-shrink:0; display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; justify-content:space-between; }
.popup .top [close]:empty { display:flex; gap:5px; align-items:center; font-size:1.2em; padding:10px; margin:-10px; }

.popup .top [close]:empty:before { content:"\f053"; font-family:'fontAwesome'; } 
.popup .top [close]:empty:after { content:"이전"; } 

.popup + .popup .top [home]:empty { display:flex; gap:5px; align-items:center; font-size:1.2em; padding:10px; margin:-10px; }
.popup + .popup .top [home]:empty:before { content:"\f015"; font-family:'fontAwesome'; } 

.popup.overlay .popup-body > div { display:flex; flex-direction:column; gap:10px; height:100%; }
.popup:not(.overlay) .top [close]:empty:before { content:"\f00d"; } 
.popup:not(.overlay) .top [close]:empty:after { content:""; }
.desktop .popup:not(.overlay) .top [close]:empty:after { content:"ESC"; opacity:.4; }

.popup .top > :nth-child(2) { font-size:1.4em; justify-self:center; }
.popup .top > :nth-child(3) { justify-self:end; }

.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

:root {
	--confirm : "확인";
	--cancel  : "취소";

	--left: 0px;
	--left-padding: -25vw;
}	

.sect { border-radius:8px; background:var(--background-color-bold); flex-shrink:0; position:relative; }
.sect > * { display:flex; justify-content:space-between; transition:background .3s; align-items:stretch; }
.sect > :first-child:last-child { height:100%; }
.sect > *:first-child { border-radius:8px 8px 0 0; }
.sect > *:last-child { border-radius:0 0 8px 8px; }
.sect > * > * { padding:10px 16px 10px 0; align-content:center; }
.sect > * > :first-child { margin-left:16px; }
.sect > * > :nth-last-child(2) { flex-grow:1; }
.sect > * > :first-child:last-child { flex-grow:1; }
.sect > * .fa-chevron-right:last-child:before { opacity:.4; }

.sect > * > .icon { flex:0 0; }
.sect > :nth-last-child(n+2) > :not(.icon) { border-bottom:1px solid var(--border-color-light); }

.sect .sect { padding:0; }

.popup:nth-last-of-type(n+2) .sect > *.focus { position:relative; }
.popup:nth-last-of-type(n+2) .sect > *.focus:after { content:' '; position:absolute; width:100%; height:100%; background:var(--border-color-dark); opacity:.2; }

.base:nth-last-of-type(n+2) .sect > *.focus { position:relative; }
.base:nth-last-of-type(n+2) .sect > *.focus:after { content:' '; position:absolute; width:100%; height:100%; background:var(--border-color-dark); opacity:.2; }

.sect.union { padding:10px 0; }
.sect.union > * > * { border:0 !important; }
.sect.union .divider { margin-left:16px; border-bottom:1px solid var(--border-color-light); }
.sect.union .divider:last-child { display:none; }
.sect.union .divider + .divider { display:none; }

.sect.union hr { margin-left:16px; width:calc(100% - 16px); border:0; border-bottom:1px solid var(--border-color-light); padding:0 !important; }
.sect.union hr:last-child { display:none; }
.sect.union hr + hr { display:none; }

.sect.compress > * > * { padding:5px 16px 5px 0; }

.mobile .sect:not(.drag) :not(input,textarea) {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.gray { color:gray; }

.dropdown-menu { background:var(--background-color); opacity:.9; border:1px solid var(--border-color-light); box-shadow:inset 0 0 4px var(--border-color); border-radius:8px; padding:4px; }
.dropdown-menu li a { background:transparent; color:var(--font-color); padding:8px 20px; }
.dropdown-menu li.active a { background:var(--background-color-bold); color:var(--font-color); }
.dropdown-menu li.active:hover a { background:var(--background-color-bold); color:var(--font-color);  }
.dropdown-menu li:hover a { background:var(--background-color-bold); color:var(--font-color); }

.vscroll { 
	--c : 2;
	--l : 5px;
	--g : 10px;
	--w : calc( (100% - var(--l) * 2 - var(--g) * (var(--c) + 1)) / var(--c) );
}

@media (max-width:300px) { .vscroll { --c : 1; } }
@media (min-width:500px) { .vscroll { --c : 3; } }
@media (min-width:700px) { .vscroll { --c : 4; } }
@media (min-width:900px) { .vscroll { --c : 5; } }

.vscroll { display:flex; gap:var(--g); scroll-padding:calc( var(--g) + var(--l) ); scroll-snap-type: x mandatory; scroll-snap-stop:always; }
.vscroll > * { scroll-snap-align:start; flex-shrink:0; width:var(--w); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; position:relative; }

.vscroll > :first-child { width:calc( var(--w) + var(--g) + var(--l) ); padding-left:calc( var(--g) + var(--l) ); }
.vscroll > :last-child { width:calc( var(--w) + var(--g) + var(--l) ); padding-right:calc( var(--g) + var(--l) ); }
.vscroll > :first-child:last-child { width:calc( var(--w) + var(--g) + var(--l) ); padding-right:0; }

.vscroll > * > div:nth-child(1) { position:relative; height:var(--w); width:var(--w); display:flex; align-items:center; justify-content:center; }


debug { max-height:50vh; position:fixed; right:0; bottom:0; padding:5px; width:calc(100% - var(--left)); z-index:10000000; max-width:500px; font-family:monospace; overflow:auto; display:flex; flex-direction:column; align-items:end; }
debug:empty { display:none; }
debug > * { padding:2px 4px; text-align:right; background:rgba( 0, 0, 0, 0.5 ); color:white; font-size:8pt; word-break:break-all; }

@media (prefers-color-scheme: dark) { 
	debug > * { background:rgba( 255,255,255,0.5 ); }
}

.dropdown { position: relative; display: inline-block; white-space:nowrap; }

.dropdown .content { 
	display: none;
	border-radius:4px;
	position: absolute;
	background-color: var(--background-color-bold);
	min-width: initial; 
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	margin: 2px 0;
}

@media (prefers-color-scheme: dark) { 
	.dropdown .content { box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2); }
}

.dropdown [toggle] { user-select:none; }

.dropdown [toggle].caret:after { content:"\f0d7"; font-weight:900; font-family:var(--fontawesome); margin-left:4px; }
.dropdown.open [toggle].caret:after { content:"\f0d8"; font-family:var(--fontawesome); }
.dropdown.up [toggle].caret:after { content:"\f0d8"; font-weight:900; font-family:var(--fontawesome); }
.dropdown.up.open [toggle].caret:after { content:"\f0d7"; font-family:var(--fontawesome); }

.dropdown .fa[toggle]:before { padding:10px; margin:-10px; }
.dropdown.open .fa-caret-down:before { content:"\f0d8"; }
.dropdown.open .content { display: block; top:100%; }
.dropdown.up .content { top: auto; bottom: 100%; }
.dropdown.right .content { right: 0; left: auto; }
.dropdown.center .content { right:auto; left:50%; transform:translate(-50%,0); }

.dropdown .content label { display:block; padding:4px 20px 0 20px; font-weight:bold; }
.dropdown .content a { color: var(--font-color) !important; padding: 8px 20px; text-decoration: none; display: block; white-space:nowrap; position:relative; }
.dropdown .content a:hover { position:relative; }
.dropdown .content hr { border-top:1px solid var(--border-color); opacity:.2; }

.dropdown .content > .active:before { content:' '; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--border-color-dark); opacity:.05; }
.dropdown .content > a:hover:before { content:' '; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--border-color-dark); opacity:.2; }


.tree { position:relative; }
.tree * { white-space:nowrap; }
.tree .node { position:absolute; display:none; z-index:10; background:var(--background-color-bold); color:var(--font-color); padding:8px 25px; border-radius:4px; border:1px solid var(--border-color-light); cursor:pointer; }
.tree.right .node { right:0; }
.tree .node .node { position:relative; padding:0 0 0 25px; border:0; }
.tree [toggle] { display:flex; align-items:center; }
.tree .tree [toggle]:after { content:"\f0d7"; font-family:fontAwesome; padding-left:10px; display:block; }
.tree .tree [toggle][open]:after { content:"\f0d8"; }


.flip { perspective: 1000px; }
.flip .inner { position: relative; width: 100%; height: 100%; transition: transform .3s; transform-style: preserve-3d; }
.flip .inner > * { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip.on .inner, .flip .back { transform: rotateY(180deg); }
.flip.vertical.on .inner, .flip.vertical .back { transform: rotateX(180deg); }

.hidden { display:none !important; }

	
.rect { display:flex; flex-direction:column; background:var(--background-color-bold); border-radius:8px; padding: 10px 0; }
.rect > * { padding:10px 20px; }

/*.rect > :empty { display:none; }*/
.rect > .line { border-top:1px solid var(--border-color-light); padding-left:0 !important; margin-left:20px; }
.rect > hr { display:block; padding:0; /*margin-left:20px; width:calc(100% - 20px);*/ width:100%; border:0; border-top:1px solid var(--border-color-light); padding:0px !important; }
.rect hr + hr { display:none; }
.rect hr:first-child { display:none; }
.rect hr:last-child { display:none; }

.rect.compress { padding:5px 0; }
.rect.compress > * { padding:5px 10px; }

.input-group { display:flex; }
.input-group > * { padding:6px 15px; border:1px solid var(--border-color-light); align-self:stretch; display:flex; align-items:center; user-select:none; }
.input-group > :nth-child(n+2):nth-last-child(n+2) { border-radius:0; }
.input-group > :first-child:not(:last-child) { border-radius:8px 0 0 8px; }
.input-group > :last-child:not(:first-child) { border-radius:0 8px 8px 0; }
.input-group > :nth-child(n+2) { margin-left:-1px; }
.input-group > :focus { z-index:1; }
.input-group > span { background:var(--border-color-light); white-space:nowrap; }
.input-group > div { background:var(--border-color-bold); }
.input-group input { flex:1 1; width:100%; }
.input-group textarea { flex:1 1; }
.input-group select { appearance:none; padding:0 10px; }

button { font-size:14px; padding:6px 15px; border-color:rgb(204,204,204); color:var(--font-color); border-radius:8px; user-select:none; }

@media (prefers-color-scheme: dark) { 
	button { border-color:var(--border-color-light); }
}

button:hover { box-shadow: inset 0 1px 1px rgba(204,204,204,.075), 0 0 2px rgb(204,204,204); }
button:focus { outline: 0; box-shadow: inset 0 1px 1px rgba(204,204,204,.075), 0 0 4px rgb(204,204,204); }

button.primary { border-color:rgb(13,110,253); }
button.success { border-color:rgb(25,135,84); }
button.warning { border-color:rgb(255,193,7); }
button.danger { border-color:rgb(220,53,69); }

button.primary:hover { box-shadow: inset 0 1px 1px rgba(13,110,253,.075), 0 0 2px rgb(13,110,253); }
button.success:hover { box-shadow: inset 0 1px 1px rgba(25,135,84,.075), 0 0 2px rgb(25,135,84); }
button.warning:hover { box-shadow: inset 0 1px 1px rgba(255,193,7,.075), 0 0 3px rgb(255,193,7); }
button.danger:hover { box-shadow: inset 0 1px 1px rgba(220,53,69,.075), 0 0 3px rgb(220,53,69); }

button.primary:focus { box-shadow: inset 0 1px 1px rgba(13,110,253,.075), 0 0 4px rgb(13,110,255); }
button.success:focus { box-shadow: inset 0 1px 1px rgba(25,135,84,.075), 0 0 4px rgb(25,135,84); }
button.warning:focus { box-shadow: inset 0 1px 1px rgba(255,193,7,.075), 0 0 4px rgb(255,193,7); }
button.danger:focus { box-shadow: inset 0 1px 1px rgba(220,53,69,.075), 0 0 4px rgb(220,53,69); }

button.fill { background:rgb(204,204,204); color:white; box-shadow:none !important; }
button.primary.fill { background:rgb(13,110,253); }
button.success.fill { background:rgb(25,135,84); }
button.warning.fill { background:rgb(255,193,7); }
button.danger.fill { background:rgb(220,53,69); }

button:disabled { opacity:.53; box-shadow:none !important; }

.btn-group { display:flex; }
.btn-group button:nth-child(n+2):nth-last-child(n+2) { border-radius:0; }
.btn-group button:first-child:not(:last-child) { border-radius:8px 0 0 8px; }
.btn-group button:last-child:not(:first-child) { border-radius:0 8px 8px 0; }
.btn-group button:nth-child(n+2) { margin-left:-1px; }
.btn-group button:focus { z-index:1; }

span.info { width:fit-content; white-space:nowrap; border:1px solid var(--border-color); border-radius:4px; font-size:.8em; padding:1px 6px; display:flex; align-items:center; gap:4px; }
span.info:empty { display:none; }
span.info.red { border-color:#ff5555; }
span.info.red.fill { background:#ff5555; }
span.info.blue { border-color:#5555ff; }
span.info.blue.fill { background:#5555ff; }
span.info.green { border-color:#55ff55; }
span.info.green.fill { background:#55ff55; }
span.info.fill { background:var(--border-color); color:white; }

span.info span:empty { display:none; }
span.info span { padding:1px 6px; margin: -1px -6px -1px 0; background:var(--border-color); color:white; }
span.info.red span { background:#ff5555; }
span.info.blue span { background:#5555ff; }

.tooltip { position:fixed; width:fit-content; z-index:10;; }
.tooltip .body { background:var(--background-color-dark); color:var(--font-color-dark); padding:2px 10px; border:1px solid var(--border-color-light); border-radius:4px; font-size:.9em; }

.flex-c { display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.popup-body > .flex-c { height:100%; }