html {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: Roboto Slab, Helvetica, sans-serif;
}

button:focus {
	outline: 0;
}

button:hover {
	cursor: pointer;
}

.main-container { 
	height: 100%;
	display: flex;
	flex-flow: column;
}

header {
	flex: 0 1 auto;
	position: relative;
	z-index: 2;
}

#debug-panel {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 30%;
	background: rgba(0,0,0, .5);
	font-family: Consolas;
	font-size: 10px;
	z-index: 9;
	color: white;
	padding: 16px;
	display: none;
}

#content-container {
	flex: 1 1 auto;
	height: 100%;
}
body {
	overflow-y: hidden;
	overflow-x: hidden;
	position: relative;
	word-wrap: break-word;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

.header-container {
	height: 120px;
	background: rgb(0,148,255);
	background: linear-gradient(90deg, rgba(0,148,255,1) 0%, rgba(0,121,202,1) 100%);
	-webkit-box-shadow: 0px 0px 59px -24px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 59px -24px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 59px -24px rgba(0,0,0,0.75);
	display: flex;
	flex-flow: row;
	border-bottom-left-radius: 1337% 120px;
}

button {
	font-family: 'Roboto';
	font-weight: 400;
}

.logout-icon, .profile-icon {
	height: 16px;
	width: 16px;
	float: left;
	background-repeat: no-repeat;
	position: relative;
	top: 4px;
}

.profile-image-container {
	padding: 0 16px;
}

#profile-details-container {
	width: 100%;
	padding: 16px 0;
}

.profile-name {
	height: 32px;
	font-size: 24px;
	color: #ffffff;
	font-weight: 700;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile-email {
	height: 24px;
	font-size: 16px;
	font-weight: 100;
	color: #ffffff;
	margin-top: 0;
	margin-left: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#profile-image {
	height: 128px;
	width: 128px;
	background: #e7e7e7;
	border-radius: 48px;
	position: relative;
	top: 16px;
	-webkit-box-shadow: 0px 0px 59px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 59px rgba(0,0,0,0.25);
	box-shadow: 0px 0px 59px rgba(0,0,0,0.25);
	background-size: contain;
}

.profile-image-placeholder {
	text-align: center;
	margin: 0 auto;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
	height: 64px;
	width: 64px;

	background-repeat: no-repeat;
}

.loading-container {
	text-align: center;
	height: 100%;
}

.loading-icon, .loading-icon-white {
	position: relative;
	margin: 0 auto;
	height: 24px;
	width: 24px;
	top: calc(50% - 12px);
	background-repeat: no-repeat;
	animation-name: spin;
	animation-duration: 1000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.license-information-icon {
	height: 32px;
	width: 32px;
	background-repeat: no-repeat;
	float: left;
	margin-left: -4px;
}



footer {
	flex: 0 1 auto;
	height: 128px;
	text-align: center;
}

.upgrade-icon {
	height: 24px;
	width: 24px;
	background-repeat: no-repeat;
	float: left;
	position: relative;
	top: 4px;
}

.license-information-text-box {
	padding: 0 32px;
	line-height: 32px;
	font-weight: 300;
	margin-top: 48px;
	margin-bottom: 32px;
	font-family: Roboto;
}


.profile-details-content {
	height: 56px;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: grid;
	padding: 16px 0;
}

.profile-buttons {

}

.profile-button:hover, .upgrade-button:hover {
	-webkit-box-shadow: 0px 5px 16px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 5px 16px rgba(0,0,0,0.5);
	box-shadow: 0px 5px 16px rgba(0,0,0,0.5);
	background: #5fa62a;
}

.logout-button:hover {
	-webkit-box-shadow: 0px 5px 16px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 5px 16px rgba(0,0,0,0.5);
	box-shadow: 0px 5px 16px rgba(0,0,0,0.5);
	background: #5f6c71;
}

.logout-button {
	transition: 250ms all;
	background: #7e8b91;
	color: #ffffff;
	padding: 4px 16px;
	border: none;
	border-radius: 64px;
	-webkit-box-shadow: 0px 5px 16pxrgba(0,0,0,0.25);
	-moz-box-shadow: 0px 5px 16px rgba(0,0,0,0.25);
	box-shadow: 0px 5px 16px rgba(0,0,0,0.25);
	line-height: 24px;
	white-space: nowrap;
	font-size: 12px;
}


.upgrade-button {
	transition: 250ms all;
    background: #7ac244;
    color: #ffffff;
    padding: 8px 24px;
    border: none;
    border-radius: 64px;
    -webkit-box-shadow: 0px 5px 16px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 5px 16px rgba(0,0,0,0.25);
    box-shadow: 0px 5px 16px rgba(0,0,0,0.25);
    line-height: 32px;
    white-space: nowrap;
    font-size: 16px;
}

.profile-button {
transition: 250ms all;
    background: #7ac244;
    color: #ffffff;
	padding: 4px 16px;
    border: none;
    border-radius: 64px;
    margin-right: 8px;
    -webkit-box-shadow: 0px 5px 16px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 5px 16px rgba(0,0,0,0.25);
    box-shadow: 0px 5px 16px rgba(0,0,0,0.25);
    line-height: 24px;
    white-space: nowrap;
    font-size: 12px;
}

.button-text {
	width: fit-content;
	margin: 0;
	float: right;
	margin-left: 4px;
	transition: 250ms all;
	min-width: 48px;
}

@media screen and (max-width: 400px) {
	.button-text {
		width: 0px;
		opacity: 0;
		margin-left: 0;
		min-width: 0;
 	}
}

.license-info-field-container {
	padding: 0 32px;
	font-weight: 300;
	margin-top: 16px;
	font-family: Roboto;
	line-height: 24px;
}

.info-value-indicator {
	float: right;
	font-weight: 400;
}

.license-info-explanation {
	font-weight: 300;
	font-size: 12px;
	padding: 8px 32px 8px 16px;
	margin-left: 42px;
	margin-top: 16px;
	border-left: 1px solid #47525d;
	font-family: Roboto;
}

.circle-outer {
    padding: 3px;
    float: left;
    border: 1px solid #47525d;
    border-radius: 100%;
    margin-right: 8px;
    position: relative;
    top: 4px;
    margin-left: 4px;
}

.circle-inner {
	padding: 4px;
    background: #7ac244;
    border-radius: 100%;
}

.float-left {
	float: left;
}

.please-login, .not-allowed {
	padding: 32px;
    height: 100%;
    margin: 0 auto;
    top: 100%;
    position: relative;
    text-align: center;
	transform: translateY(-50%);
	font-size: 12px;
	font-weight: 300;
}

@keyframes spin { 
	from { 
		transform: rotate(0deg); 
	} to { 
		transform: rotate(360deg); 
	}
}



/* Here are the SVG's and their data (Large boys) */

.profile-icon {
	background-image: url("data:image/svg+xml,%3Csvg shape-rendering='geometricPrecision' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background:new 0 0 200 200;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:18;stroke-miterlimit:10;%7D .st1%7Bfill:none;stroke:%2323FFFFFF;stroke-width:18;stroke-linecap:round;stroke-miterlimit:10;%7D .st2%7Bfill:none;stroke:%23FFFFFF;stroke-width:20;stroke-linecap:round;stroke-miterlimit:10;%7D .st3%7Bfill:none;stroke:%23FFFFFF;stroke-width:20;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st3' d='M49.4,159.4l0-1.5c0-17.5,14.3-31.7,31.8-31.7l37.7,0.1c17.5,0,31.7,14.3,31.7,31.8l0,1.5'/%3E%3Ccircle class='st3' cx='98.3' cy='72.5' r='32'/%3E%3C/g%3E%3C/svg%3E");
}

.logout-icon {
	background-image: url("data:image/svg+xml,%3Csvg shape-rendering='geometricPrecision' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 199 199' style='enable-background:new 0 0 199 199;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:18;stroke-miterlimit:10;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:18;stroke-linecap:round;stroke-miterlimit:10;%7D .st2%7Bfill:none;stroke:%23FFFFFF;stroke-width:20;stroke-linecap:round;stroke-miterlimit:10;%7D .st3%7Bfill:none;stroke:%23FFFFFF;stroke-width:20;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Cpath fill='white' class='st1' d='M118.8,165.7H70.2c-14,0-25.4-10.5-25.4-23.4V56.7c0-12.9,11.4-23.4,25.4-23.4h48.7'/%3E%3Cg%3E%3Cline class='st1' x1='81.8' y1='99.5' x2='148.3' y2='99.5'/%3E%3Cline class='st1' x1='154.2' y1='99.5' x2='136.5' y2='81.8'/%3E%3Cline class='st1' x1='136.5' y1='117.2' x2='154.2' y2='99.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.profile-image-placeholder {
	background-image: url("data:image/svg+xml,%3Csvg shape-rendering='geometricPrecision' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background:new 0 0 200 200;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%2347525D;stroke-width:8;stroke-miterlimit:10;%7D .st1%7Bfill:none;stroke:%2347525D;stroke-width:8;stroke-linecap:round;stroke-miterlimit:10;%7D .st2%7Bfill:none;stroke:%2347525D;stroke-width:10;stroke-linecap:round;stroke-miterlimit:10;%7D .st3%7Bfill:none;stroke:%2347525D;stroke-width:10;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st3' d='M49.4,159.4l0-1.5c0-17.5,14.3-31.7,31.8-31.7l37.7,0.1c17.5,0,31.7,14.3,31.7,31.8l0,1.5'/%3E%3Ccircle class='st3' cx='98.3' cy='72.5' r='32'/%3E%3C/g%3E%3C/svg%3E");
}

.upgrade-icon {
	background-image: url("data:image/svg+xml,%3Csvg shape-rendering='geometricPrecision' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background:new 0 0 200 200;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:20;stroke-linecap:round;stroke-miterlimit:10;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:20;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Cg%3E%3Cline class='st0' x1='64.5' y1='102.5' x2='135.5' y2='102.5'/%3E%3Cline class='st0' x1='100' y1='138' x2='100' y2='67'/%3E%3C/g%3E%3Ccircle class='st1' cx='100' cy='102.5' r='65.5'/%3E%3C/g%3E%3C/svg%3E");
}

.license-information-icon {
	background-image: url("data:image/svg+xml,%3Csvg shape-rendering='geometricPrecision' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background:new 0 0 200 200;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%2347525D;stroke-width:8;stroke-miterlimit:10;%7D .st1%7Bfill:none;stroke:%2347525D;stroke-width:8;stroke-linecap:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cpath class='st0' d='M137.5,161.5h-75c-6.6,0-12-5.4-12-12v-99c0-6.6,5.4-12,12-12h75c6.6,0,12,5.4,12,12v99 C149.5,156.1,144.1,161.5,137.5,161.5z'/%3E%3Cg%3E%3Cline class='st1' x1='69.5' y1='71.5' x2='130.5' y2='71.5'/%3E%3Cline class='st1' x1='69.5' y1='109.5' x2='130.5' y2='109.5'/%3E%3Cline class='st1' x1='69.5' y1='128.5' x2='130.5' y2='128.5'/%3E%3Cline class='st1' x1='69.5' y1='90.5' x2='130.5' y2='90.5'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.loading-icon {
	background-image: url("data:image/svg+xml,%3Csvg shape-rendering='geometricPrecision' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' focusable='false' width='1.5em' height='1.5em' style='-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);' preserveAspectRatio='xMidYMid meet' viewBox='0 0 1728 1728'%3E%3Cpath d='M1728 864q0 176-68.5 336t-184 275.5t-275.5 184t-336 68.5t-336-68.5t-275.5-184t-184-275.5T0 864q0-213 97-398.5T362 160T736 9v228q-221 45-366.5 221T224 864q0 130 51 248.5t136.5 204t204 136.5t248.5 51t248.5-51t204-136.5t136.5-204t51-248.5q0-230-145.5-406T992 237V9q206 31 374 151t265 305.5t97 398.5z' fill='%23626262'/%3E%3C/svg%3E");
}

.loading-icon-white {
	background-image: url("data:image/svg+xml,%3Csvg shape-rendering='geometricPrecision' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' focusable='false' width='1.5em' height='1.5em' style='-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);' preserveAspectRatio='xMidYMid meet' viewBox='0 0 1728 1728'%3E%3Cpath d='M1728 864q0 176-68.5 336t-184 275.5t-275.5 184t-336 68.5t-336-68.5t-275.5-184t-184-275.5T0 864q0-213 97-398.5T362 160T736 9v228q-221 45-366.5 221T224 864q0 130 51 248.5t136.5 204t204 136.5t248.5 51t248.5-51t204-136.5t136.5-204t51-248.5q0-230-145.5-406T992 237V9q206 31 374 151t265 305.5t97 398.5z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

body {
	/* SVG as background */
	background-image: url("data:image/svg+xml,%3Csvg fill='%23f7f7f9' height='1080' width='1920' preserveAspectRatio='none slice' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080 '%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Etest%3C/title%3E%3Cpath d='M2.75,1103.75V2.75H1929.5v1101Zm1148.53-494c-4.44,62-26.58,116.1-66.88,161.79-63.67,72.17-144.68,103.38-240.72,96.11V1015.8c162.09,5.29,288-59.53,382.82-188.07,2.52,3.09,4.69,5.45,6.54,8a422.1,422.1,0,0,0,142.23,127c58.21,32.1,120.57,50.32,187.29,53.09,10.2.42,14-2.85,16.12-12.83,6.19-29.26,13.62-58.25,20.64-87.33,3.77-15.59,7.67-31.15,11.37-46.13-21.63-1-41.42-.13-60.62-3.1-74.83-11.55-136.43-46.68-183.39-106.6-31.08-39.66-48.66-85-56.35-134.44-1.63-10.47-.63-17.2,13.57-20.63,88.51-21.43,163.94-65.15,224.66-134.07,45.23-51.34,77-109.64,93.89-175.5,8.2-32,11.44-65.27,17.32-100.3C1608.32,210.65,1560.7,225,1513.3,240c-3.39,1.07-6.58,6.56-7.67,10.58-18,66.86-51.2,123.36-108.26,164.81-69.46,50.46-146.28,66.92-229.4,48.4-61.38-13.68-113.15-45.14-153.53-94.6-41.07-50.29-63-107.38-64.79-172.2-.29-10.36,0-20.73,0-30.76H796C787.75,387.5,941.48,571.49,1151.28,609.77ZM1373.5,236.5c3.93-80.58-66.7-145.52-138.85-148.95C1140.74,83.09,1081,162,1078.3,228c-3.71,90.91,73,152.88,141.6,155.4C1309.15,386.63,1377.46,309.71,1373.5,236.5Z' transform='translate(-2.75 -2.75)'/%3E%3Cpath class='cls-1' d='M1151.28,609.77C941.48,571.49,787.75,387.5,796,166.25H949.61c0,10-.25,20.4,0,30.76,1.82,64.82,23.72,121.91,64.79,172.2,40.38,49.46,92.15,80.92,153.53,94.6,83.12,18.52,159.94,2.06,229.4-48.4,57.06-41.45,90.23-98,108.26-164.81,1.09-4,4.28-9.51,7.67-10.58,47.4-15,95-29.37,146.47-45.08-5.88,35-9.12,68.3-17.32,100.3-16.88,65.86-48.66,124.16-93.89,175.5-60.72,68.92-136.15,112.64-224.66,134.07-14.2,3.43-15.2,10.16-13.57,20.63,7.69,49.42,25.27,94.78,56.35,134.44,47,59.92,108.56,95,183.39,106.6,19.2,3,39,2.1,60.62,3.1-3.7,15-7.6,30.54-11.37,46.13-7,29.08-14.45,58.07-20.64,87.33-2.12,10-5.92,13.25-16.12,12.83-66.72-2.77-129.08-21-187.29-53.09a422.1,422.1,0,0,1-142.23-127c-1.85-2.6-4-5-6.54-8-94.81,128.54-220.73,193.36-382.82,188.07V867.67c96,7.27,177.05-23.94,240.72-96.11C1124.7,725.87,1146.84,671.79,1151.28,609.77Z' transform='translate(-2.75 -2.75)'/%3E%3Cpath class='cls-1' d='M1373.5,236.5c4,73.21-64.35,150.13-153.6,146.86-68.56-2.52-145.31-64.49-141.6-155.4C1081,162,1140.74,83.09,1234.65,87.55,1306.8,91,1377.43,155.92,1373.5,236.5Z' transform='translate(-2.75 -2.75)'/%3E%3C/svg%3E");
}