@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,300&display=swap');

:root {
	--color-dark:  #574476;
	--color-accent: #1dc9b7;
	--color-d0:  rgba(163, 140, 198, 0.2);
	--color-d1:  rgba(163, 140, 198, 0.7);
	--color-light:  #FAF8FB;
	--color-light2:  #d3cddd;
	--color-mid: #A38CC6;
	--color-a1:  #fd3995;
	--color-a2:  #39a1f4;
	--color-a3:  #f5a623;
	--color-main:  #5D5D5D;
	--color-grey:  #B4B4B4;
	--color-d1:  #4F3D69;
	--color-d2:  #484979;

	--color-green: #32ab13;
	--color-red: #ff3030;
}
html, body {
	width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Sofia Sans Condensed', sans-serif !important;
	font-size: 16px;
	font-weight: normal !important;
	color: var(--color-main);
}
body {
	overflow-y: scroll;
	min-height: 100%;
}
body.noscroll {
	overflow-y: hidden;
}

* {
	box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
	user-select: none;
	position: relative;
}
h1 {
	margin:  0;
	font-weight: 700;
	font-size: 28px;
}
h1 i {
	color:  var(--color-grey);
	margin-right: 10px;
}
h3 {
	font-weight: 600;
}
a {
	text-decoration: none;
}
button {
	cursor: pointer;
}
#loader {
	background: rgba(0,0,0,0.85);
	border-radius: 15px;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999999;
	left: 50%;
	bottom: 0px;
	width:  100vw;
	height: 100vh;
	transform: translate(-50%, 110%);
}
#loader.active {
	transform: translate(-50%, 0%);
}
.grecaptcha-badge{
	visibility: collapse !important;  
}
input[type="submit"]:disabled {
	filter: grayscale(100%);
	transition: all 0.2 ease-out;
}

/**** lineup ******/
#wrapper {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	width:  100%;
	min-height: 100vh;
}
#left {
	width:  300px;
	background: linear-gradient(90deg,  var(--color-d1) 0, var(--color-d2) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	z-index: 2;
}
#main {
	width:  calc(100% - 300px);
	background: var(--color-light);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	position: relative;
	z-index: 1;
}
.header {
	height: 70px;
	padding: 10px 40px;
	width:  100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#left .header {
	color:  #fff;
}
#main .header {
	background:  #fff;
	box-shadow: 0 0 20px var(--color-d0);
	justify-content: space-between;
}

#logo {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color:  #fff;
}
#logo svg {
	width:  32px;
	height: 32px;
	margin-right:  5px;
	fill: #fff;
}
#copy {
	position: absolute;
	bottom:  0;
	height: 50px;
	color:  #fff;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	background: rgba(0,0,0,0.1);
	width: 100%;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
#copy a {
	padding:  0 5px;
	color:  #fff;
}
#l-user {
	background: url('/images/lbg.jpg') 50% 50% / cover no-repeat;
	width: 100%;
	aspect-ratio: 2;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor:  pointer;
}
#l-user:after {
	content: '\f078';
	font-family: "ForkAwesome";
	position: absolute;
	left:  50%;
	top:  0;
	transform: translate(-50%,-50%);
	background: rgba(0,0,0,0.3);
	border-radius:  50%;
	width:  28px;
	height: 28px;
	display: flex;
	padding: 5px;
	align-items: flex-end;
	justify-content: center;
	color:  #fff;
	font-size: 10px;
	font-weight: 100;
	transition: all 0.2s ease;
}
#l-user:hover:after {
	transform: translate(-50%,-45%);
	background:  rgba(255,255,255,1);
	color: var(--color-mid);
	transition: all 0.2s ease;
}
.l-user {
	display: flex;
	align-items: center;
	justify-content: center;
	padding:  10px 40px;
}
.l-user-img {
	width: 50px;
	height:  50px;
	border-radius: 50%;
	overflow: hidden;
	margin-right:  10px;
}
.l-user-img img {
	width: 100%;
}
.l-user-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	color: #fff;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	font-weight: 600;
}
.l-user-text span {
	font-weight: 400;
}

#mmenu {
	border: 1px solid var(--color-grey);
	color: var(--color-grey);
	border-radius: 4px;
	font-size: 18px;
	padding:  7px 20px;
	background:  #fff;
	margin-right: 30px;
}
.h-left {
	color: var(--color-grey);
}
.h-right {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.hr-btn {
	border: 0;
	background: transparent;
	width: 40px;
	margin:  0 10px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color:  var(--color-mid);
}
#hr-user {
	width: 34px;
	height:  34px;
	border-radius: 50%;
	overflow: hidden;
	margin-left:  10px;
}
#hr-user img {
	width:  100%;
}

#menu, .submenu {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
	width:  100%;
	list-style: none;
	margin:  0;
	padding:  0;
	position: relative;
}
.menu-item {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.menu-item > a, .submenu-item > a {
	color:  var(--color-light2);
	width: 100%;
	height: 50px;
	padding: 0 40px;
	border-left:  3px solid transparent;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: row;
	position: relative;
	font-size: 18px;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	transition: all 0.2s ease;
}
.menu-item.exp > a:after {
	position: absolute;
	right:  40px;
	top:  50%;
	transform:  translate(-50%,-50%) rotate(0deg);
	content: '\f078';
	font-family: "ForkAwesome";
	font-size: 8px;
	color: var(--color-mid);
	transition: all 0.2s ease;
}
.menu-item.exp.expanded > a:after {
	transform:  translate(-50%,-50%) rotate(180deg);
	transition: all 0.2s ease;
}
.menu-item.active > a {
	border-left:  3px solid var(--color-mid);
	color:  #fff;
	background:  rgba(255,255,255,0.1);
}
.menu-item > a:hover {
	background:  rgba(255,255,255,0.1);
	color:  #fff;
	transition: all 0.2s ease;
}
.menu-item i {
	font-size: 22px;
	margin-right:  20px;
	width:  20px;
	text-align: center;
	color:  var(--color-mid) !important;
}
.menu-item.sep {
	text-transform: uppercase;
	color:  var(--color-mid);
	font-size: 14px;
	align-items: flex-start;
	padding: 15px 40px 5px;
}
.submenu {
	transform: scale(1,0);
	background:  rgba(0,0,0,0.1);
	transform-origin: 50% 0;
	max-height: 0;
	transition: all 0.2s ease;
}
.menu-item.expanded .submenu {
	transform: scale(1,1);
	max-height: unset;
	transition: all 0.2s ease;
}
.submenu:after {
	position: absolute;
	z-index: 1;
	content: "";
	height:  100%;
	width:  2px;
	background: var(--color-d0);
	left:  52px;
	top:  0;
}
.submenu-item {
	width:  100%;
	position: relative;
}
.submenu-item:before {
	content: "";
	position: absolute;
	left:  53px;
	width:  2px;
	height: 2px;
	top:  50%;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	background:  var(--color-mid);
	border:  2px solid var(--color-mid);
	transform: translate(-50%, -50%);
	border-radius:  50%;
}
.submenu-item.active:before {
	border:  2px solid var(--color-mid);
	background: #fff;
}
.submenu-item > a {
	padding: 0 40px 0 80px;
	height:  40px;
	color: var(--color-mid);
}
/*.submenu-item > a:after {
	content: '\f0a9';
	font-family: "ForkAwesome";
	font-size: 12px;
	position: absolute;
	left:  10px;
	top:  50%;
	opacity: 0;
	transform: translate(0, -50%);
	transition: all 0.2s ease;
}*/
.submenu-item.active a {
	color: #fff;
}
/*.submenu-item:hover a:after {
	opacity: 1;
	left:  20px;
	transition: all 0.2s ease;
}*/


#content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding:  0 40px;
}
#c-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	width: 100%;
	height: 60px;
}
#breadcrumbs {

}
.bcr-item {
	color:  var(--color-mid);
}
.bcr-item i {
	margin-right: 5px;
}
#c-mid {
	width:  100%;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#c-main {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.container {
	width:  100%;
	border:  1px solid var(--color-d0);
	box-shadow: 0 0 10px var(--color-d0);
	border-radius: 4px;
	background:  #fff;
	margin-bottom:  30px;
}
.c-heading {
	padding: 0 20px;
	border-bottom:  1px solid var(--color-d0);
	height: 50px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	font-weight: 500;
}
.c-content {
	padding:  20px;
	min-height: 50px;
}
.split {
	width:  100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
}
.split .container {
	width:  calc(50% - 15px);
}
.controls {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.ctrl-btn {
	border:  0;
	color: var(--color-grey);
	background: transparent;
	width:  30px;
	height: 30px;
	font-size: 18px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.opt {
	width:  15px;
	margin-right: -10px;
	margin-left:  10px;
}
.dot-btn {
	border-radius:  50%;
	width:  16px;
	height: 16px;
	margin:  0 3px;
}
.c0 {
	background:  var(--color-accent) !important;
}
.c1 {
	background:  var(--color-a1) !important;
}
.c2 {
	background:  var(--color-a2) !important;
}
.c3 {
	background:  var(--color-a3) !important;
}