/*! Marx v4.1.1 - The classless CSS reset (perfect for Communists) | MIT License | https://github.com/mblode/marx */*,:after,:before{background-repeat:no-repeat;box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}:where(:root){cursor:default;line-height:1.5;overflow-wrap:break-word;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(body){margin:0}:where(h1){font-size:2em;margin:.67em 0}:where(dl,ol,ul) :where(dl,ol,ul){margin:0}:where(hr){color:inherit;height:0}:where(nav) :where(ol,ul){list-style-type:none;padding:0}:where(nav li):before{content:"\200B";float:left}:where(pre){font-family:monospace;font-size:1em;overflow:auto}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace;font-size:1em}:where(small){font-size:80%}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}:where(iframe){border-style:none}:where(svg:not([fill])){fill:currentColor}:where(table){border-collapse:collapse;border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button,[type=button i],[type=reset i],[type=submit i]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){margin:0;resize:vertical}:where([type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(details>summary:first-of-type){display:list-item}:where([aria-busy=true i]){cursor:progress}:where([aria-disabled=true i],[disabled]){cursor:not-allowed}:where([aria-hidden=false i][hidden]){display:initial}:where([aria-hidden=false i][hidden]:not(:focus)){clip:rect(0,0,0,0);position:absolute}:root{--br:4px;--xs-pad:4px;--sm-pad:8px;--md-pad:16px;--lg-pad:20px;--xlg-pad:40px;--sm-breakpoint:400px;--lg-breakpoint:768px;--primary-400:#60a5fa;--primary:#3b82f6;--primary-600:#2563eb;--accent:#64ffda;--red:#f43f5e;--red-600:#dc2626;--yellow:#eab308;--grey:#f7f7f9;--white:#fff;--black:#000;--text:rgba(0,0,0,.8);--secondary:rgba(0,0,0,.54);--disabled:rgba(0,0,0,.38);--dividers:rgba(0,0,0,.12);--link-color:var(--primary);--link-hover-color:var(--primary-600);--sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--serif:Georgia,Times,"Times New Roman",serif;--monospace:Menlo,Monaco,Consolas,"Courier New",monospace;--font-family:var(--sans-serif);--font-size-base:16px;--font-size-xs:8px;--font-size-sm:14px;--font-size-h1:40px;--font-size-h2:32px;--font-size-h3:28px;--font-size-h4:24px;--font-size-h5:20px;--font-size-h6:16px;--line-height-base:1.5;--border:1px solid var(--dividers)}article,aside,details,footer,header,main,section,summary{margin:0 auto;margin-bottom:var(--md-pad);width:100%}main{display:block;margin:0 auto;max-width:var(--lg-breakpoint);padding:0 var(--md-pad) var(--md-pad)}footer{border-top:var(--border);padding:var(--md-pad) 0;text-align:center}footer p{margin-bottom:0}hr{border:0;border-top:var(--border);box-sizing:content-box;display:block;height:0;margin-bottom:var(--md-pad);margin-top:var(--md-pad);overflow:visible;width:100%}img{height:auto;max-width:100%;vertical-align:baseline}@media screen and (max-width:var(--sm-breakpoint )){article,aside,section{clear:both;display:block;max-width:100%}img{margin-right:var(--md-pad)}}embed,iframe,video{border:0}progress{background-repeat:repeat}body{color:var(--text);font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-base)}p{margin:0;margin-bottom:var(--md-pad)}h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;font-weight:500;line-height:1.2}h1{font-size:var(--font-size-h1)}h1,h2{margin:var(--lg-pad) 0 var(--md-pad)}h2{font-size:var(--font-size-h2)}h3{font-size:var(--font-size-h3)}h3,h4{margin:var(--md-pad) 0 var(--xs-pad)}h4{font-size:var(--font-size-h4)}h5{font-size:var(--font-size-h5)}h5,h6{margin:var(--md-pad) 0 var(--xs-pad)}h6{font-size:var(--font-size-h6)}small{color:var(--secondary);vertical-align:bottom}pre{background-color:var(--grey);display:block;margin:var(--md-pad) 0;overflow-wrap:break-word;padding:var(--md-pad);white-space:pre-wrap}code,pre{color:var(--text);font-family:var(--monospace);font-size:var(--font-size-base)}code{line-height:inherit;margin:0;padding:0;vertical-align:baseline;word-break:break-all;word-wrap:break-word}a{background-color:transparent;color:var(--link-color);text-decoration:none}a:focus,a:hover{color:var(--link-hover-color);text-decoration:underline}dl{margin-bottom:var(--md-pad)}dd{margin-left:var(--xlg-pad)}ol,ul{margin-bottom:var(--sm-pad);padding-left:var(--xlg-pad);vertical-align:baseline}blockquote{border-left:2px solid var(--text);font-style:italic;margin:var(--md-pad) 0;padding-left:var(--md-pad)}blockquote,figcaption{font-family:var(--serif)}u{text-decoration:underline}s{text-decoration:line-through}sup{vertical-align:super}sub,sup{font-size:var(--font-size-sm)}sub{vertical-align:sub}mark{background-color:var(--yellow)}input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{background:var(--white);background-clip:padding-box;border:var(--border);border-radius:var(--br);color:var(--text);display:block;font-family:var(--sans-serif);font-size:1rem;line-height:1.5;padding:var(--sm-pad) var(--md-pad);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%;word-break:normal}input[type=color]{background-color:var(--white);display:inline-block;vertical-align:middle}input:not([type]),input[type=color]{border:var(--border);border-radius:var(--br)}input:not([type]){-webkit-appearance:none;background:var(--white);background-clip:padding-box;color:var(--text);display:block;line-height:1.5;padding:var(--sm-pad) var(--md-pad);text-align:left;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%;word-break:normal}input:not([type]):focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{background-color:var(--white);border-color:var(--primary-400);box-shadow:0 0 0 .2rem rgba(59,130,246,.5);outline:0}input[type=checkbox]:focus,input[type=file]:focus,input[type=radio]:focus{outline:1px thin var(--dividers)}input:not([type])[disabled],input[type=color][disabled],input[type=date][disabled],input[type=datetime-local][disabled],input[type=datetime][disabled],input[type=email][disabled],input[type=month][disabled],input[type=number][disabled],input[type=password][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=text][disabled],input[type=time][disabled],input[type=url][disabled],input[type=week][disabled],select[disabled],textarea[disabled]{background-color:var(--dividers);color:var(--secondary);cursor:not-allowed;opacity:1}input[readonly],select[readonly],textarea[readonly]{border-color:var(--dividers);color:var(--secondary)}input:focus:invalid,select:focus:invalid,textarea:focus:invalid{border-color:var(--red-600);color:var(--red)}input[type=checkbox]:focus:invalid:focus,input[type=file]:focus:invalid:focus,input[type=radio]:focus:invalid:focus{outline-color:var(--red)}select{border:var(--border);vertical-align:sub}select:not([size]):not([multiple]){height:calc(2.25rem + 2px)}select[multiple]{height:auto}label{display:inline-block;line-height:2}fieldset{border:0;margin:0}fieldset,legend{padding:var(--sm-pad) 0}legend{border-bottom:var(--border);color:var(--text);display:block;margin-bottom:var(--sm-pad);width:100%}textarea{overflow:auto;resize:vertical}input[type=checkbox],input[type=radio]{box-sizing:border-box;display:inline;padding:0}button,input[type=button],input[type=reset],input[type=submit]{background-color:var(--primary);border:1px solid transparent;border-radius:var(--br);color:var(--white);display:inline-block;font-size:1rem;font-weight:400;line-height:1.5;padding:var(--sm-pad) var(--md-pad);text-align:center;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{padding:0}button:hover,button:not(:disabled):active,input[type=button]:hover,input[type=button]:not(:disabled):active,input[type=reset]:hover,input[type=reset]:not(:disabled):active,input[type=submit]:hover,input[type=submit]:not(:disabled):active{background-color:var(--primary-600);border-color:var(--primary-600);color:var(--white)}button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:0 0 0 .2rem rgba(59,130,246,.5);outline:0}button:disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled{background-color:var(--primary);border-color:var(--primary);color:var(--white);cursor:not-allowed;opacity:.65}table{border-top:var(--border);margin-bottom:var(--md-pad)}caption{padding:var(--sm-pad) 0}thead th{border:0;border-bottom:2px solid var(--dividers);text-align:left}tr{margin-bottom:var(--sm-pad)}td,th{border-bottom:var(--border);padding:var(--md-pad);vertical-align:inherit}tfoot tr{text-align:left}tfoot td{color:var(--secondary);font-size:var(--font-size-xs);font-style:italic;padding:var(--md-pad) var(--xs-pad)}
#spinnerContainer{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
}

.spinner {
    width: 30px;
    height: 30px;
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    -webkit-animation: sk-rotate 2.0s infinite linear;
    animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
    width: 60%;
    height: 60%;
    display: inline-block;
    position: absolute;
    top: 0;
    background-color: #FFF;
    border-radius: 100%;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
    top: auto;
    bottom: 0;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate {
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes sk-rotate {
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg)
    }
}

@-webkit-keyframes sk-bounce {
    0%, 100% {
        -webkit-transform: scale(0.0)
    }
    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bounce {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}


#loadingTitle{
    font-family: 'Arial';
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 2px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    /* padding-right: 20px; */
    position: relative;
    top:-10px;
}

#spinner2ndContainer{
    position: relative;
    left: -20px;
}
/******************************************************************************
     * Basic elements
******************************************************************************/

body, html {
	width: 100%;
	height: 100%;
	color: white;
	background: rgb(40, 40, 40);
	font-family: 'Arial';
}

input:focus {
	box-shadow: none !important;
}

button {
	cursor: pointer;
}


/******************************************************************************
	 * Containers		
******************************************************************************/


#container {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

#diagram, #legenda {
	position: absolute;
	display: block;
}

/******************************************************************************
     * Diagram		
******************************************************************************/

#diagram {
	width: 100%;
	height: 100%;
	top: 0;
	right: calc(220px - 17px);
	bottom: 0;
	left: 0;
	overflow-y: scroll;
}

/******************************************************************************
     * Legenda		
******************************************************************************/

#legenda {
	width: 180px;
	height: 180px;
	bottom: 0;
	left: 0;
}

/******************************************************************************
     * Logo corner (bottom left)
******************************************************************************/

#logo-corner {
	position: fixed;
	top: 16px;
	left: 16px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

#logo {
	background-color: transparent;
	background-image: url(6ef6b06150bac9fa9198.svg);
	background-size: 200px;
	width: 200px;
	height: 36px;
	background-position: left center;
	background-repeat: no-repeat;
	display: block;
}

#title {
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 3px;
	color: rgba(255,255,255,0.4);
	white-space: nowrap;
}


/******************************************************************************
     * fps counter
******************************************************************************/

#fps {
	display: inline-block;
	position: relative;
	width: 50px;
}

#fps * {
	border: 0 !important;
	background-color: transparent !important;
	line-height: 40px !important;
	height: 40px !important;
	font-size: 10px !important;
	padding: 0 !important;
	position: relative !important;
	text-shadow: none !important;
	top: 0 !important;
	left: 0 !important;
	text-align: left !important;
}

#fps div div:first-child::before {
	content: "(FPS " !important;
}
#fps div div:first-child::after {
	content: ")" !important;
}

#fps div div:last-child {
	display: none !important;
}


/******************************************************************************
 * Sidebar (keyword filter)
******************************************************************************/

#sidebar {
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	width: 220px;
	background: rgba(22, 22, 22, 0.94);
	border-left: 1px solid rgba(255, 255, 255, 0.07);
	z-index: 100;
	display: flex;
	flex-direction: column;
}

#sidebar-content {
	padding: 24px 16px 20px;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

#sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

#sidebar-content h3 {
	font-size: 10px;
	letter-spacing: 3px;
	color: rgba(255, 255, 255, 0.4);
	margin: 0;
	font-weight: 600;
	text-transform: uppercase;
}

#kw-clear {
	background: none;
	border: none;
	color: #EB5D00;
	font-size: 11px;
	cursor: pointer;
	padding: 0;
}

#keyword-filter {
	width: 100%;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: white;
	padding: 6px 8px;
	font-size: 12px;
	margin-bottom: 10px;
	border-radius: 3px;
	box-sizing: border-box;
	outline: none;
}

#keyword-filter::placeholder {
	color: rgba(255, 255, 255, 0.25);
}

#keyword-list {
	list-style: none;
	padding: 0;
	margin: 0;
	overflow-y: auto;
	flex: 1;
}

#keyword-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
}

#keyword-list label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.65);
	cursor: pointer;
}

#keyword-list input[type="checkbox"] {
	cursor: pointer;
	accent-color: #EB5D00;
	flex-shrink: 0;
}

#keyword-list li.active label {
	color: #EB5D00;
}

li.kw-separator {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin: 6px 0;
	padding: 0;
}