/********************************************************************************
	BASIC STYLES
*******************************************************************************/
* {
	box-sizing: border-box;
}

body, html{
	background-color: #1a1a1a;

    font-family: 'Noto Sans', sans-serif;
	font-size: 1.2vmin;
	font-weight: 500;
	color: #72767d;

	margin: 0px;
	padding: 0px;

	scrollbar-color: #e74c3c rgba(0,0,0,0);
	scrollbar-width: thin;
}

h1{
	color: #e74c3c;
}

::-webkit-scrollbar { width: 8px; height: 3px;}
::-webkit-scrollbar-button {  background-color: rgba(0,0,0,0); width: 0px; height: 0px;}
::-webkit-scrollbar-track {  background-color: rgba(0,0,0,0);}
::-webkit-scrollbar-track-piece { background-color: rgba(0,0,0,0);}
::-webkit-scrollbar-thumb { height: 50px; background-color: #e74c3c; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: rgba(0,0,0,0);}
::-webkit-resizer { background-color: rgba(0,0,0,0);}

::selection {background: #e74c3c; color: #f8f8f2;}
::-moz-selection {background: #e74c3c; color: #f8f8f2;}

input:invalid {
	box-shadow: none;
}
/*******************************************************************************
	SIDEBAR
*******************************************************************************/
#sidebar{
	background-color: #222222;
	height: 100vh;
	width: 25%;

	left: 0px;
	position: absolute;

	margin: 0px;
	padding: 1.8rem;
	overflow: auto;
}

#canvas{
	height: 100vh;
	width: 75%;

	right: 0px;
	position: absolute;

	margin: 0px;
	padding: 1.8rem;
	overflow: auto;
}

#canvas .canvas-spacer{
	height: 3.3rem;
	width: 100%;
}
/*******************************************************************************
	Sidebar - Output
********************************************************************************/
#output-cont{
	width: calc(25vw - 3.6rem);
	height: 66vh;
	padding: 1rem;

	border-radius: 0.5rem;
	background-color: #1a1a1a;

	position: absolute;
	bottom: 1.8rem;
}
/********************************
	Tabs
********************************/
.tabset{
	border-bottom: 1px solid transparent;
	border-color: #72767d;

	height: 4.5rem;
}

/*LMAO, this yeets the actual radio button OFF THE SCREEN*/
.tabset > input[type="radio"] {
	position: absolute;
	left: -200vw;
}

.tabset > label {
	position: relative;
	display: inline-block;

	padding: 1.2rem 1.2rem 2rem;
	border: 1px solid #1a1a1a00;

	cursor: pointer;
	font-weight: 600;
}

.tabset > label::after {
	content: "";
	position: absolute;
	left: 1.2rem;
	bottom: 0.8rem;
	width: 1.7rem;
	height: 0.3rem;
	background: #72767d;
}

.tabset > label:hover,
.tabset > input:focus + label {
	color: #e74c3c;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
	background: #e74c3c;
}

.tabset > input:checked + label {
	color: #e74c3c;

	background-color: #1a1a1a;

	border: 1px solid #72767d;
	border-bottom: none;
}
/********************************
	Code
********************************/
pre {
	position: relative;
	height: calc(66vh - 6.5rem);

	-moz-tab-size: 4;
	tab-size: 4;

	overflow: auto;
}

code.hljs {
	height: 100%;
	position: relative;
}
/*******************************************************************************
	Sidebar - Editable Fields
********************************************************************************
	Text Input
********************************/
.mat-input{
	position: relative;

	height: 3em;
	width: 100%;

	padding: 0;
	margin-top: 1.5em;
	border: none;
	box-shadow: none;

	font-family: 'Noto Sans', sans-serif;
	font-size: 1.25rem;

	color: #72767d;
}

.mat-input label{
	position: absolute;
	font-size: 1.4rem;

	top: 50%;
	left: 0.5em;
	transform: translateY(-50%);

	transition: top 100ms, font-size 100ms;
}

.mat-input input,
.mat-input select,
.mat-input textarea{
	position: absolute;

	height: 100%;
	width: 100%;
	padding: 0.5em;

	background-color: #0000;
	color: #ffffff;
	border: 0px;
	border-bottom: 1px solid #72767d;
	resize: none;

	font-family: 'Noto Sans', sans-serif;
	font-size: 1.4rem;

	transition: border 100ms;
}

.mat-input select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.mat-input.mat-select:after {
	content: '▼';
	font-size: 1.5rem;

	position: absolute;
	right: 1rem;
	top: 0.75rem;

	pointer-events: none;
}

.mat-input input:focus,
.mat-input select:focus,
.mat-input textarea:focus{
	border-bottom: 1px solid #e74c3c;
}

.mat-input input:focus ~ label,
.mat-input input:valid ~ label,
.mat-input select:focus ~ label,
.mat-input select:valid ~ label,
.mat-input textarea:focus ~ label,
.mat-input textarea:valid ~ label{
	font-size: 1rem;
	top: -10%;
}

.mat-input input:invalid,
.mat-input select:invalid,
.mat-input textarea:invalid{
	box-shadow: none;
}
/*******************************************************************************
	Canvas - Editable Fields
********************************************************************************/
#canvas .mat-input textarea{
	background-color: #222222;
	border-radius: 0.5rem 0.5rem 0 0;
}

.city-name-input{
	margin-bottom: 0.375em;
}
/********************************
	List
********************************/
#canvas ol{
	list-style: none;
	padding: 0;
	margin: 0;
}

#canvas li{
	display: flex;
	position: relative;

	height: 1.75em;
	width: 100%;
	padding: 0.375em;

	font-family: 'Noto Sans', sans-serif;
	font-size: 1.25rem;
	vertical-align: middle;

	color: #72767d;
	background-color: #34373c00;
	border-bottom: 1px solid #72767d21;

	transition: background-color 100ms;
}

#canvas li:hover, #canvas li.sortedghost{
	background-color: #e74c3cFF;
}

#canvas li .label{
	position: absolute;

	top: 50%;
	left: 0.5em;
	transform: translateY(-50%);
}
#canvas li span, #canvas li span{
	transition: background-color 150ms;
}
#canvas li:hover span, #canvas li.sortedghost span{
	color: #ffffff;
}

#canvas li .close{
	height: 1rem;
	width: 1rem;

	cursor: pointer;

	background-color: #e74c3c00;
	border-radius: 50%;
	color: #e74c3c;

	text-align: center;
	line-height: 1rem;
	font-size: 1rem;

	float: right;
	margin: auto;
	margin-right: 0;

	transition: background-color 150ms, color 150ms;
}

#canvas li .close:hover{
	color: #e74c3c;
	background-color: #ffffff;
}