.GUI-align-center {
	
	align-items: center;
	
}

.GUI-container {
	
	margin-bottom: 2vw;
	padding: 2vw;
	background-color: rgb(255, 255, 255, 0.9);
	
}

.GUI-dashboard {
	
	display: flex;
	flex-direction: row;
	
	height: 100%;
	
	background-color: rgb(var(--ColorBG), 0.8);
	
	
}

.GUI-dashboard-navigation {
	
	display: flex;
	flex-direction: column;
	
	margin-bottom: 100%;
	
}

.GUI-dashboard-navigation > div {
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	padding: 10px;
	
	color: rgb(var(--ColorMid));
	background-color: rgb(var(--ColorBG));
	
}

.GUI-dashboard-navigation > div > i {
	
	font-size: var(--SizeHeading);
	
}

.GUI-dashboard-navigation > div > span {
	
	font-size: var(--SizeSmall);
	
}

.GUI-dashboard-navigation-active {
	
	box-shadow: inset 0px 0px 6px -1px rgb(var(--ColorAccentBright));
	
}

.GUI-dashboard-whiteboard {
	
	width: 100%;
	
	padding: 10px;
	
}

.GUI-flex-between {
	
	justify-content: space-between;
	
}

.GUI-flex-column {
	
	display: flex;
	flex-direction: column;
	
}

.GUI-flex-evenly {
	
	justify-content: space-evenly;
	
}

.GUI-flex-row {
	
	display: flex;
	flex-direction: row;
	
}

.GUI-flex-grid {
	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	
}

.GUI-flex-grid > .col {
	
	flex: 1;
	flex-basis: 0px;
	
}

.GUI-hide {
	
	display: none !important;
	
}

.GUI-input-glass {
	
	padding: 10px;
	border: 0;
	text-decoration: none;
	border-radius: 15px;
	color: rgb(var(--ColorText));
	background-color: rgb(var(--ColorAccentBright), 0.8);
	border: 1px solid rgb(255,255,255,0.1);
	backdrop-filter: blur(30px);
	font-size: 14px;
	letter-spacing: 2px;
	
}

.GUI-input-glass:active,
.GUI-input-glass:hover {
	
	background-color: rgb(var(--ColorAccentBright), 1);
	
}

.GUI-max {
	
	width: 100%;
	
}

.GUI-warning {
	
	display: flex;
	flex-direction: row;
	flex-wrap: no-wrap;
	align-items: center;
	
	margin-bottom: 1vw;
	padding: 2vw;
	
	font-weight: bold;
	font-size: var(--SizeStandard);
	
	background-color: rgb(var(--ColorBG));
	box-shadow: 0px 0px 10px 0.1vh rgb(var(--ColorWarn));
	
}

.GUI-warning i {
	
	padding: 2vw;
	
}

.GUI-table {
	
	width: 100%;
	
	display: table;
	
	padding: 10px;
	
}

.GUI-table-heading {
	
	display: table-cell;
	
	padding: 0.5vw;
	
	font-weight: bold;
	
	color: rgb(var(--ColorTextInvert));
	background-color: rgb(var(--ColorAccentDark));
	
}

.GUI-table-row {
	
	display: table-row;
	
}

.GUI-table-row:nth-child(even) {
	
	background-color: rgb(var(--ColorBG));
	
}

.GUI-table-row:nth-child(odd) {
	
	color: rgb(var(--ColorTextInvert));
	background-color: rgb(var(--ColorAccentBright));
	
}

.GUI-table-cell {
	
	display: table-cell;
	
	padding: 1vw;
	
}

.GUI-textarea {
	
	min-height: 15vh;
	
}

.GUI-wrap {
	
	flex-wrap: wrap;
	
}

.GUI-nowrap {
	
	flex-wrap: nowrap;
	
}

/* Phone and Mobile Tables */
@media (max-width: 800px) {
    
	.GUI-table {
        
		display: flex;
		flex-direction: column;
    
	}
	
	.GUI-table-heading {
		
		display: none;
		
	}
	
	.GUI-table-row {
		
		display: flex;
		flex-direction: row;
		
		justify-content: space-between;
		align-items: center;
		
	}
	
    .GUI-table-cell {
    
		display: inline-block;
    
	}
	
}

/*Error Pages*/
.GUI-error-page {
	
	display: flex;
	flex-direction: row;
	flex-wrap: no-wrap;
	justify-content: center;
	align-items: center;
	
	margin: 1vw;
	padding: 20px;
	
	color: rgb(var(--ColorMid));
	background-color: rgb(var(--ColorBG), 0.9);
	
	border-radius: 20px;
	box-shadow: 0px 0px 6px 1px rgb(var(--ColorWarn));
	
}

.GUI-error-page img {
	
	max-width: 20vw;
	max-height: 20vw;
	
	padding: 10px;
	
}

/* GUI Form */
.GUI-form-invalid {
	
	border: 1px solid rgb(var(--ColorError)) !important;
	
}

/* GUI Processing */
.GUI-processing {
	
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: rgb(var(--ColorAccentBright));
    background-color: rgb(0, 0, 0, 0.75);
	
}

.GUI-processing > i {
	
	padding: 10px;
	
    animation-name: spin, glow-foreground;
    animation-duration: 2s;
	animation-timing-function: linear; 
    animation-iteration-count: infinite;
	
	color: rgb(var(--ColorHighlight));
	
}