@font-face {
	font-family: 'Inter';
	src: url('/static/fonts/Inter-VariableFont_opsz,wght.ttf');
}

:root {
	--size: 20px;
	--spacer-bigger: var(--size);
	--spacer-small: calc(var(--size) / 2);
	--spacer-mini: calc(var(--size) / 4);
	--header: var(--size);
	--white: #FFFFFF;
	--default-color: #00B2FF;
	--fontsize: calc(var(--size) * 0.7);
	--maxwidth: 32vw;
	--maxheight: calc(var(--size) * 15);
}

* {
	box-sizing: border-box;
}

html {
	/* Flex  */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	/* Flex  */
	border: 0px;
	height: auto;
	margin: 0px;
	padding: 0px;
}

body {
	/* Flex  */
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	justify-content: flex-start;
	align-items: stretch;
	/* Flex  */
	background: radial-gradient(51.16% 51.16% at 50% 48.84%, #0C0C0C 0%, #171717 100%);
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #0C0C0C;
	border: 0px;
	font-family: 'Inter' !important;
	height: inherit;
	margin: 0px;
	padding: 0px;
}

main {
	/* Flex  */
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	/* Flex  */
	border: 0px;
	margin: 0px;
	padding: var(--spacer-small);
}

header {
	/* Flex  */
	display: flex;
	flex-direction: row;
	flex: 0 1 var(--header);
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	/* Flex  */
	border: 0px;
	margin: 0px 0px 0px var(--spacer-small);
	padding: 0px;
}

aside {
	/* Flex  */
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	/* Flex  */
	background-color: rgba(0, 0, 0, 0.8);
	border: 0px;
	color: var(--white);
	height: 100vh;
	left: 0px;
	margin: 0px;
	padding: 2vw;
	position: fixed;
	top: 0px;
	width: 100%;
}

.header-logo {
	object-fit: contain;
	height: calc(var(--header) * 2.25);
	width: auto;
}

.header-title {
	border-left: 1px solid var(--white);
	color: var(--default-color);
	text-shadow: 0px 0px 5px var(--default-color);
	font-size: var(--fontsize);
	font-style: normal;
	font-weight: 300;
	line-height: normal;
	margin-left: 1vw;
	padding-left: 1vw;
}

.header-logout {
	color: var(--default-color);
	font-size: var(--fontsize);
	font-style: normal;
	font-weight: 300;
	line-height: normal;
	margin: 0vh 0vw;
}


.header-left {
	/* Flex  */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	/* Flex  */
}

.containers {
	/* Flex  */
	display: flex;
	flex-direction: row;
	flex: 1 0 auto;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	/* Flex  */
	border: 0px;
	margin: 0px;
	padding: 0px;
}

.container {
	/* Flex  */
	display: flex;
	flex-direction: column;
	flex: 0 1 calc(var(--maxwidth) - var(--spacer-bigger));
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	/* Flex  */
	border-radius: var(--size);
	background-color: #131313;
	box-shadow: 0px 0px calc(var(--size) / 2) 0px var(--default-color);
	height: var(--maxheight);
	margin: var(--spacer-small);
	max-height: var(--maxheight);
	overflow-y: hidden;
	padding: var(--spacer-small);
}

.container-head {
	/* Flex  */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	/* Flex  */
	border-top-left-radius: var(--spacer-bigger);
	border-top-right-radius: var(--spacer-bigger);
	color: var(--white);
	font-family: 'Inter';
	font-size: var(--fontsize);
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px var(--spacer-small) var(--spacer-small) var(--spacer-small);
}

.container-head-indicator {
	background-color: white;
	border-radius: calc(var(--size) / 2);
	display: inline-block;
	height: var(--size);
	margin-right: var(--size);
	width: var(--size);
}

.container-body {
	/* Flex  */
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	/* Flex  */
	border-bottom-left-radius: var(--spacer-small);
	border-bottom-right-radius: var(--spacer-small);
	color: var(--white);
	padding: var(--spacer-small);
}

.container-message {
	/* Flex  */
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	/* Flex  */
	color: #FCFCFC !important;
	font-family: 'Inter';
	font-size: calc(var(--fontsize) * 0.875);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin-bottom: var(--spacer-small);
}

.container-message-head {
	/* Flex  */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	/* Flex  */
}

.container-message-head-actions > i {
	margin-left: var(--spacer-small);
}

.container-message-body {
	margin-top: var(--spacer-mini);
	text-align: left;
}

/*@keyframes pulse {
    0% {
        background-color: black;
    }
    50% {
        background-color: red;
    }
    100% {
        background-color: black;
    }
}

.pulse-background {
    animation: pulse 1s forwards;
}*/