@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

:root {
	--main-color : #098EFA;
	--alt-color : #9FD5FD;
	--dark-purple : #2A2A4C;
	--color-danger : #BC2343;
}

* {
	box-sizing : border-box;
}

body {
	margin : 0px;
	padding : 0px;
	display : flex;
	position : relative;
	font-family : 'Nunito Sans', 'tahoma', sans-serif;
	-webkit-font-smoothing: antialiased;
	background : url(/assets/img/bg.svg);
	font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
	color : #202020;
}

body.dark {
	background : url(/assets/img/bg_dark.svg);
	color : #FFF;
}

body.dark.grad {
	height : 100%;
	background : url(/assets/img/bg_dark.svg), var(--dark-purple);
	background-blend-mode : multiply;
}

/*************************************************wrappers**********************************************/
.wrapper {
	margin : 0px;
	padding : 5px;
}

.wrapper:not(.f-transient) {
	display : flex;
	flex-wrap : wrap;
}

@media screen and (max-width: 767px) {
	.wrapper.f-transient {
		display : block;
	}
}

@media screen and (min-width: 768px) {
	.wrapper.f-transient {
		display : flex;
		flex-wrap : wrap;
	}
}

.wrapper.block {
	display : block;
}

.wrapper.fcenter {
	justify-content : center;
	align-items : center;
	align-content : center;
}

.wrapper.fstart {
	justify-content : flex-start;
	align-items : flex-start;
	align-content : flex-start;
}

.wrapper.fctop {
	justify-content : center;
	align-items : flex-start;
	align-content : flex-start;
}

.wrapper.fltop {
	justify-content : flex-start;
	align-items : flex-start;
	align-content : flex-start;
}

.wrapper.flcenter {
	justify-content : flex-start;
	align-items : center;
	align-content : center;
}

.wrapper.row {
	width : 100%;
	padding : 5px 10px;
	flex-wrap : nowrap;
}

.wrapper.padless,
.wrapper.input.padless,
.wrapper.row.padless {
	padding : 0px;
}

.wrapper.row.xpadless {
	padding-left : 0px;
	padding-right : 0px;
}

.wrapper.row.ypadless {
	padding-top : 0px;
	padding-bottom : 0px;
}
	
.wrapper.row.unbreakable {
	flex-wrap : nowrap;
}

.wrapper.wrappable,
.wrapper.row.wrappable {
    flex-wrap : wrap;
}

@media screen and (max-width: 1000px) {
	.wrapper.row.ypadless,
	.wrapper.row {
		width : 100%;
		flex-wrap : wrap;
	}
	
	.wrapper.tab .wrapper.row,
	.wrapper.row.xpadless,
	.wrapper.row.padless {
		width : 100%;
	}
	
	.wrapper.row.unbreakable {
		flex-wrap : nowrap;
	}
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
	.wrapper.grid.list .wrapper.card .wrapper.row {
		flex-wrap : nowrap;
	}
}

.wrapper.col {
	align-items : flex-start;
	align-content : flex-start;
}

.wrapper.full-xy,
.wrapper.fheight {
	height : 100%;
}

.wrapper.full-xy,
.wrapper.full,
.wrapper.col.full {
	width : 100%;
}

.wrapper.lg,
.wrapper.col.lg {
	width : 70%;
}

.wrapper.tlg,
.wrapper.col.tlg {
	width : 66.6666666666666%;
}

.wrapper.md,
.wrapper.col.md {
	width : 50%;
}

.wrapper.tsm,
.wrapper.col.tsm {
	width : 33.33333333333%;
}

.wrapper.sm,
.wrapper.col.sm {
	width : 30%;
}

.wrapper.xsm,
.wrapper.col.xsm {
	width : 15%;
}

@media screen and (max-width: 767px) {
	.wrapper.lg,
	.wrapper.md,
	.wrapper.sm,
	.wrapper.xsm,
	.wrapper.col {
		min-width : 100%;
		padding : 0px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
	.wrapper.lg,
	.wrapper.col.lg,
	.wrapper.tlg,
	.wrapper.col.tlg {
		width : calc(100% - 20px);
	}

	.wrapper.md,
	.wrapper.col.md {
		width : calc(100% - 20px);
	}
	
	.wrapper.tsm,
	.wrapper.col.tsm,
	.wrapper.sm,
	.wrapper.col.sm {
		width : calc(50% - 20px);
	}
	
	.wrapper.xsm,
	.wrapper.col.xsm {
		width : calc(25% - 20px);
	}
}

.wrapper.section.top {
	width : calc(100% - 60px);
	min-height : 100%;
	padding : 0px;
	position : absolute;
	left : 60px;
	top : 0px;
	background : url(/assets/img/bg.svg);
	background-size : cover;
}

@media screen and (max-width: 499px) {
	.wrapper.section.top {
		width : calc(100% - 40px);
		left : 40px;
	}
}

body.dark .wrapper.section.top {
	background : url(/assets/img/bg_dark.svg);
	background-size : cover;
}

.wrapper.section.subpage {
	width : 100%;
}

.wrapper.sidebar {
	width : 60px;
	height : 100%;
	padding : 0px;
	justify-content : center;
	align-items : flex-start;
	align-content : flex-start;
	position : fixed;
	left : 0px;
	top : 0px;
	background : linear-gradient(to bottom, var(--main-color), var(--alt-color));
}

@media screen and (max-width: 499px) {
	.wrapper.sidebar {
		width : 40px;
	}
}

body.dark .wrapper.sidebar {
	background : linear-gradient(to top, #121212, #2A2A5A, var(--main-color));
}

.wrapper.topbar {
	width : 100%;
	height : 80px;
	padding : 10px 20px;
	flex-wrap : nowrap;
	background : rgba(255, 255, 255, .402);
}

body.dark .wrapper.topbar {
	background : linear-gradient(to right, rgba(9, 142, 250, .4), rgba(42, 42, 90, .4), rgba(18, 18, 18, .4));
}

.wrapper.topbar:after {
	content : "";
	width : 100%;
	height : 2px;
	position : absolute;
	left : 0px;
	top : 80px;
	background : linear-gradient(to right, var(--main-color), var(--main-color), var(--main-color), #23BC43, #8023EB, #DCAF43, #23BC83);
}

body.dark .wrapper.topbar:after {
	background : linear-gradient(to right, var(--main-color), var(--main-color), var(--main-color), #23BC43, #8023EB, #DCAF43, #121212);
}

.wrapper.footer {
	width : 100%;
}

.wrapper.footer.top {
	margin : 30px 0px 0px;
	padding : 10px 20px;
	font-weight : 600;
}

.wrapper.form.fluid .wrapper.footer {
	width : 100%;
	margin : 20px 0px;
	padding : 10px 0px;
	border-top : 2px solid #AFAFAF;
}

.wrapper.form.fluid .wrapper.footer {
	border-top : 2px solid #4F4F4F;
}

.wrapper.form {
	background-color : #FFF;
}

body.dark .wrapper.form {
	background-color : #121212;
}

body.dark .wrapper.form ,
.wrapper.card .wrapper.form {
	background-color : transparent;
}

.wrapper.form.fluid {
	width : 500px;
	min-height : calc(100% - 80px);
	margin : 40px 100px;
	padding : 20px 40px;
	border : 1px solid #BBB;
	border-radius : 5px;
	background-color : rgba(200, 200, 200, .722);
}

@media screen and (max-width: 499px) {
	.wrapper.form.fluid {
		width : 450px;
		margin : 40px 20px;
	}
}

@media screen  and (min-width: 500px) and (max-width: 767px) {
	.wrapper.form.fluid {
		margin : 40px 60px;
	}
}

.wrapper.form.fluid.flow {
	margin : 0px;
}

body.dark .wrapper.form.fluid {
	border : 1px solid #232323;
	background-color : rgba(16, 16, 16, .3);
}

.wrapper.form.pop-top {
	position : absolute;
	top : 70px;
	animation : y-in-flip .4s linear 1;
}

.wrapper.popup-w .wrapper.form.pop-top {
	top : 0px;
	max-height : 100%;
	overflow : auto;
}

.wrapper.popup-w .wrapper.form.pop-top.auto {
    max-height : none;
}

.wrapper.form.subpage-form {
	width : 100%;
}

.wrapper.view .wrapper.form {
	width : calc(100% - 80px);
	height : calc(100% - 40px);
}

.wrapper.logo {
	width : 100%;
	height : 80px;
	padding : 20px 5px;
}

.wrapper.logo.floating {
	height : 120px;
}

.wrapper.dialog.lg  .wrapper.logo {
	height : 100px;
}

.wrapper.icon {
	width : 40px;
	height : 40px;
	justify-content : center;
	align-content : center;
	align-items : center;
	overflow : hidden;
	border-radius : 50%;
	border : 1px solid #ECECEC;
	background-color : transparent;
}

.wrapper.icon.sm {
	width : 20px;
	height : 20px;
}

.wrapper.icon.md {
	width : 80px;
	height : 80px;
	border-radius : 50%;
}

.wrapper.icon.lg {
	width : 100px;
	height : 100px;
	border-radius : 50%;
}

.label.snippet .wrapper.icon {
	border : none;
}

.wrapper.img {
	width : 100%;
	height : 100%;
	overflow : hidden;
	justify-content : center;
	align-content : center;
	align-items : center;
	background-color : transparent;
}

.wrapper.img.sm {
	width : 80px;
	height : 80px;
}

.wrapper.img.md {
	width : 120px;
	height : 120px;
}

.wrapper.img.lg {
	width : 220px;
	height : 220px;
}

.wrapper.img.xlg {
	width : 320px;
	height : 320px;
}

.wrapper.img.sm-sq {
	width : calc(100% - 20px);
	height : 280px;
	margin : 10px;
	border-radius : 10px;
	background-color : #7C7C7C;
}

@media screen and (max-width: 499px) {
	.wrapper.img {
		width : 100%;
		height : 100%;
		min-width : auto;
	}

	.wrapper.img.sm {
		width : 80px;
		height : 80px;
		min-width : auto;
	}

	.wrapper.img.md {
		width : 120px;
		height : 120px;
		min-width : auto;
	}

	.wrapper.img.lg {
		width : 220px;
		height : 220px;
		min-width : auto;
	}
	
	.wrapper.img.sm-sq {
		width : calc(100% - 20px);
		height : 280px;
		min-width : auto;
	}
	
	.wrapper.img.xlg {
		width : 180px;
		height : 180px;
	}
}

@media screen and (min-width: 500px) and (max-width: 767px) {
	.wrapper.img {
		width : 100%;
		height : 100%;
		min-width : auto;
	}

	.wrapper.img.sm {
		width : 80px;
		height : 80px;
		min-width : auto;
	}

	.wrapper.img.md {
		width : 120px;
		height : 120px;
		min-width : auto;
	}

	.wrapper.img.lg {
		width : 220px;
		height : 220px;
		min-width : auto;
	}
	
	.wrapper.img.sm-sq {
		width : calc(100% - 20px);
		height : 280px;
		min-width : auto;
	}
	
	.wrapper.img.xlg {
		width : 200px;
		height : 200px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
	.wrapper.icon {
		width : 40px;
		height : 40px;
	}

	.wrapper.icon.sm {
		width : 20px;
		height : 20px;
	}

	.wrapper.icon.md {
		width : 80px;
		height : 80px;
	}

	.wrapper.icon.lg {
		width : 100px;
		height : 100px;
	}

	.wrapper.img {
		width : 100%;
		height : 100%;
	}

	.wrapper.img.sm {
		width : 80px;
		height : 80px;
	}

	.wrapper.img.md {
		width : 120px;
		height : 120px;
	}

	.wrapper.img.lg {
		width : 220px;
		height : 220px;
	}

	.wrapper.img.xlg {
		width : 320px;
		height : 320px;
	}

}

body.dark .wrapper.img.sm-sq {
	background-color : #232323;
}

.wrapper.img.sm-sq.loaded {
	position :  relative;
}

.wrapper.img.rounded {
	border-radius : 50%;
}

.wrapper.caption {
	width : 100%;
	justify-content : flex-start;
	align-content : center;
	align-items : center;
}

.wrapper.tab .wrapper.caption.tab-title,
.wrapper.card .wrapper.caption:first-child {
	height : 40px;
	padding : 5px 15px;
	flex-wrap : nowrap;
	border-bottom : 1px solid var(--main-color);
	font-weight : 700;
}

.wrapper.tab .wrapper.caption.tab-title {
    height : 50px;
}

.wrapper.card .wrapper.caption.alt-tool:first-child {
    height : auto;
}

@media screen and (max-width: 767px) {
	.wrapper.card .wrapper.caption:first-child {
		height : auto;
		min-height : 40px;
	}
	
	.wrapper.col.tsm .wrapper.card .wrapper.caption:first-child,
	.wrapper.card.sm .wrapper.caption:first-child,
	.wrapper.card.vsm .wrapper.caption:first-child {
		flex-wrap : nowrap;
	}
	
	.wrapper.tab .wrapper.caption.tab-title {
		height : auto;
		min-height : 50px;
	}
}

.wrapper.tabs.alt .wrapper.tab .wrapper.caption.tab-title {
	border-bottom : 1px solid #DCDCDC;
}

body.dark .wrapper.tab .wrapper.caption.tab-title,
body.dark .wrapper.card .wrapper.caption:first-child {
	border-bottom : 1px solid #101010;
}

body.dark .wrapper.tabs.alt .wrapper.tab .wrapper.caption.tab-title {
	border-bottom : 1px solid #232323;
}

.wrapper.dialog.rabid .wrapper.caption {
	width : 40%;
}

.wrapper.card {
	margin : 5px 10px;
	padding : 0px 0px 15px;
	border : 1px solid var(--alt-color);
	border-radius : 5px;
	background : #EFEFEF;
}

body.dark .wrapper.card {
	background : #151515;
	border : 1px solid #101010;
}

.wrapper.card.padless {
	padding : 0px;
}

.wrapper.card.lg {
	width : 70%;
}

.wrapper.card.tlg {
	width : 66.66666666666%;
}

.wrapper.card.md {
	width : 50%;
}

.wrapper.card.sm {
	width : 30%;
}

.wrapper.card.tsm {
	width : 33.333333333%;
}

.wrapper.card.vsm {
	width : 25%;
}

.wrapper.card.full {
	width : 100%;
}

@media screen and (max-width: 767px) {
	.wrapper.card {
		min-width : calc(100% - 20px);
	}
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
	.wrapper.card.lg {
		width : calc(100% - 20px);
	}

	.wrapper.card.tlg {
		width : calc(100% - 20px);
	}

	.wrapper.card.md {
		width : calc(100% - 20px);
	}

	.wrapper.card.sm {
		width : calc(50% - 20px);
	}

	.wrapper.card.tsm {
		width : calc(50% - 20px);
	}

	.wrapper.card.vsm {
		width : calc(50% - 20px);
	}

}

.wrapper.card.f-card .f-info {
	transition : filter 2s linear;
}

.wrapper.card.f-card > *:not(.wrapper.caption:first-of-type),
.wrapper.card .f-info {
	filter : blur(15px);
}

.wrapper.card.fv-card > *:not(.wrapper.caption:first-of-type),
.wrapper.card .fv-info {
	filter : blur(0px);
}

.wrapper.c-body,
.wrapper.c-footer {
	width : 100%;
	justify-content : center;
}

.wrapper.c-footer {
	padding : 0px;
}

.wrapper.responsive {
	width : 100%;
	overflow : auto;
}

.wrapper.x-responsive {
	width : 100%;
	overflow-x : auto;
}

.wrapper.input {
	flex-wrap : nowrap;
	position : relative;
}

.wrapper.input.block {
	display : flex;
	flex-wrap : wrap;
}

.wrapper.input.full {
	justify-content : center;
}

.wrapper.input.full,
.wrapper.form .wrapper.footer .wrapper.input {
	width : 100%;
}

.wrapper.input.md {
	width : 50%;
}

.wrapper.caption .wrapper.input {
	height : 100%;
	padding : 0px 5px;
}

.wrapper.form.fluid .wrapper.input {
	margin : 4px 0px;
}

.wrapper.caption .wrapper.input.grid {
    flex-wrap : wrap;
    align-items : flex-start;
    align-content : flex-start;
}

.wrapper.caption .wrapper.input.f-transient.grid {
   display : flex;
}

.wrapper.img.sm-sq.loaded .wrapper.input {
	position : absolute;
	bottom : 0px;
	background-color : rgba(255, 255, 255, .6);
}

body.dark .wrapper.img.sm-sq.loaded .wrapper.input {
	background-color : rgba(13, 13, 13, .6);
}

@media screen and (max-width: 767px) {
	.wrapper.input.lg,
	.wrapper.input.md,
	.wrapper.input.sm {
		min-width : 100%;
	}
	
	.wrapper.caption.f-transient .wrapper.input {
		margin : 5px 0px;
		padding : 0px;
		position : static;
	}
	
	.wrapper.caption.tab-title .wrapper.input {
		height : auto;
	}
	
	.wrapper.grid.list .wrapper.card .wrapper.input {
		width : 100%;
	}
	
	.wrapper.page-card .wrapper.input {
	    flex-wrap : wrap;
	}
}

.wrapper.link {
	width : 100%;
}

.wrapper.tabs {
	width : 100%;
	padding : 0px;
	border : 1px solid #DCDCDC;
	border-radius : 5px;
	background-color : rgba(255, 255, 255, .6);
}

body.dark .wrapper.tabs {
	border : 1px solid #232323;
	background-color : rgba(13, 13, 13, .6);
}

.wrapper.tabs.inset {
	padding : 10px;
}

.wrapper.tabs.alt {
	flex-wrap : nowrap;
	align-content : flex-start;
	align-items : flex-start;
	border : none;
	background-color : transparent;
}

@media screen and (max-width: 499px) {
	.wrapper.tabs.alt {
		flex-wrap : wrap;
	}
}

body.dark .wrapper.tabs.alt {
	border : none;
	background-color : transparent;
}

.wrapper.tabs .wrapper.tabs-togglers {
	width : 100%;
	padding : 0px;
	border-radius : 5px 5px 0px 0px;
	background-color : #DFDFDF;
}

body.dark .wrapper.tabs .wrapper.tabs-togglers {
	background-color : #232323;
}

.wrapper.tabs.alt .wrapper.tabs-togglers {
	width : 25%;
	margin : 0px 15px;
	overflow : hidden;
	border : 1px solid #DCDCDC;
	border-radius : 5px;
	background-color : #EFEFEF;
}

@media screen and (max-width: 499px) {
	.wrapper.tabs:not(.alt) .wrapper.tabs-togglers {
		flex-wrap : nowrap;
	}
	
	.wrapper.tabs.alt .wrapper.tabs-togglers {
		min-width : calc(100% - 30px);
	}
}

@media screen and (min-width: 500px) and (max-width: 767px) {
	.wrapper.tabs:not(.alt) .wrapper.tabs-togglers {
		flex-wrap : nowrap;
	}
	
	.wrapper.tabs.alt .wrapper.tabs-togglers {
		width : 50px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
	.wrapper.tabs:not(.alt) .wrapper.tabs-togglers {
		flex-wrap : nowrap;
	}
	
	.wrapper.tabs.alt .wrapper.tabs-togglers {
		width : 60px;
	}
}

body.dark .wrapper.tabs.alt .wrapper.tabs-togglers {
	border : 1px solid var(--main-color);
	background-color : #151515;
}

.wrapper.tab {
	width : 100%;
	display : none;
}

.wrapper.tab.show {
	display : flex;
}

.wrapper.tabs.alt .wrapper.tab {
	width : 75%;
	margin : 0px 15px;
	border : 1px solid #DCDCDC;
	border-radius : 5px;
	background : rgba(256, 256, 256, .4);
}

@media screen and (max-width: 499px) {
	.wrapper.tabs.alt .wrapper.tab {
		min-width : calc(100% - 30px);
		margin : 10px 15px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
	.wrapper.tabs.alt .wrapper.tab {
		width : calc(100% - 120px);
	}
}

body.dark .wrapper.tabs.alt .wrapper.tab {
	border : 1px solid #232323;
	background-color : rgba(19, 19, 19, .7);
}

.wrapper.view {
	width : 100%;
	height : 100%;
	display : none;
	justify-content : center;
	align-items : center;
	align-content : center;
	position : fixed;
	top : 0px;
	left : 0px;
	z-index : 10;
	background-color : rgba(16, 16, 16, .3);
}

.wrapper.view.show {
	display : flex;
}

.wrapper.view.contained {
	position : absolute;
}

.wrapper.view.transparent {
	background-color : transparent;
}

.wrapper.dialog {
	justify-content : center;
	align-content : center;
	align-items : center;
	border : 1px solid #BBB;
	border-radius : 5px;
	background-color : rgba(250, 250, 250, .9);
}

body.dark .wrapper.dialog {
	border : 1px solid #232323;
	background-color : rgba(51, 51, 51, .9);
}

.wrapper.dialog.lg {
	width : 80%;
	min-height : 80%;
}

@media screen and (min-height: 700px) {
	.wrapper.dialog.lg {
		width : 90%;
		height : auto;
		min-height : auto;
	}
	
	.wrapper.dialog.lg .wrapper.sm {
		width : auto;
	}

}

.wrapper.dialog.sm {
	width : 30%;
}

.wrapper.dialog.error {
	position : relative;
	border : 1px solid #E01E38;
	background-color : rgba(51, 51, 51, 0.2);
}

body.dark .wrapper.dialog.error {
	border : 1px solid #E01E38;
}

.wrapper.dialog.success {
	position : relative;
	border : 1px solid #1EE038;
	background-color : rgba(51, 51, 51, 0.2);
}

body.dark .wrapper.dialog.success {
	border : 1px solid #1EE038;
}

.wrapper.dialog.report {
	flex-wrap : nowrap;
	justify-content : flex-start;
	background-color : #FFF;
}

body.dark .wrapper.dialog.report {
	background-color : #121212;
}

.wrapper.dialog.report .wrapper.icon {
	margin : 10px;
	border : none;
}

.wrapper.dialog.loader {
	flex-wrap : nowrap;
	background-color : #FFF;
}

.wrapper.popup-w {
	width : 100%;
	justify-content : center;
	position : relative;
	z-index : 10;
}

.wrapper.popup-w.fixed {
	height : 100%;
	position : fixed;
	top : 0;
	left : 0;
}

.wrapper.empty-records {
	width : 100%;
	height : 400px;
	flex-wrap : wrap;
	justify-content : center;
	align-content : center;
	align-items : center;
	background-color : rgba(51, 51, 51, 0.2);
}

body.dark .wrapper.empty-records {
	background-color : rgba(51, 51, 51, 0.7);
}

.wrapper.report.snippet {
	width : auto;
	min-width : 150px;
	height : 60px;
	padding : 5px;
	flex-wrap : nowrap;
	justify-content : flex-start;
	align-content : center;
	align-items : center;
	position : fixed;
	top : 50%;
	right : 2px;
	background-color : #FFF;
	border-radius : 3px;
	border : 1px solid #BBB;
	z-index : 8;
}

body.dark .wrapper.report.snippet {
	background-color : #2A2A2A;
	border : 1px solid #232323;
}

.wrapper.collapse {
	width : 100%;
	flex-wrap : wrap;
}

.wrapper.collapse .wrapper.header {
	width : 100%;
	padding : 0px;
	flex-wrap : nowrap;
	justify-content : flex-start;
	align-content : center;
	align-items : center;
}

.wrapper.collapse .wrapper.content {
	width : 100%;
	display : none;
	background-color : #DEDDDD;
}


.wrapper.collapse.show .wrapper.content {
	display : flex;
}

.wrapper.legal-notice {
	padding: 10px 40px;
	text-align: justify;
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
	.wrapper.row.title-container {
		flex-wrap : nowrap;
	}
}

.wrapper.floating-diag,
.wrapper.collapse {
	height : 0px;
	display : none;
	overflow : hidden;
	transition : height 2s ease-out;
}

.wrapper.floating-diag.show,
.wrapper.collapse.show {
	display : flex;
	height : auto;
}

.wrapper.floating-diag {
    width : auto;
    position : absolute;
    top : calc(100% + 3px);
    flex-wrap : wrap;
	border : 1px solid #BBB;
	border-radius : 5px;
	background-color : #FFF;
}

.wrapper.floating-diag.diag-sm {
    width : 320px;
}

.wrapper.caption .wrapper.floating-diag {
    right : 5px;
    left : auto;
}

body.dark .wrapper.floating-diag {
	border : 1px solid #232323;
	background-color : #121212;
}


/**********************************************iframes***************************************************/
.iframe {
	border : none;
	width : 100%;
}


/***********************************************forms********************************************************/

.wrapper.form form {
	width : 100%;
}

select.input,
textarea.input,
input:not([type='checkbox']):not([type='radio']).input {
	width : 220px;
	padding : 10px;
	outline : none;
	border : 1px solid var(--alt-color);
	font-family : 'Nunito Sans', 'tahoma', sans-serif;
	-webkit-font-smoothing: antialiased;
	font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
    font-size : 1rem;
	color : #202020;
	background-color : #FEFEFE;
	border-radius : 5px;
}

body.dark select.input,
body.dark textarea.input,
body.dark input:not([type='checkbox']):not([type='radio']).input {
	border : 1px solid #232323;
	background-color : #1A1A1A;
	color : inherit;
}

select.input.invalid,
body.dark select.input.invalid,
textarea.input.invalid,
body.dark textarea.input.invalid,
input:not([type='checkbox']):not([type='radio']).input.invalid,
body.dark input:not([type='checkbox']):not([type='radio']).input.invalid {
	border : 1px solid var(--color-danger);
}

.wrapper.form.fluid input.input {
	width : 100%;
	background-color : transparent;
}

.wrapper.form.fluid .wrapper.input input.input::placeholder,
.wrapper.form.fluid .wrapper.input select.input::placeholder,
.wrapper.form.fluid .wrapper.input textarea.input::placeholder {
    color : inherit;
    opacity : 1;
}

body.dark .wrapper.form.fluid input.input {
	border : 2px solid #8F8F8F;
	background-color : transparent;
}

body.dark textarea.input:disabled:read-only,
body.dark input.input:not([type='checkbox']):not([type='radio']):disabled:read-only,
textarea.input:disabled:read-only,
input.input:not([type='checkbox']):not([type='radio']):disabled:read-only {
    border : none;
    border-left : 2px solid #239C43;
    background-color : #FDFDFD;
}


body.dark textarea.input:disabled:read-only,
body.dark input.input:not([type='checkbox']):not([type='radio']):disabled:read-only {
    background-color : #1A1A1A;
}

.wrapper.caption select.input,
.wrapper.caption input.input {
	height : 100%;
	padding : 0px;
}

@media screen and (max-width: 767px) {
	.wrapper.caption.f-transient select.input,
    .wrapper.caption.f-transient input.input  {
		width : 100%;
		height : auto;
		padding : 10px;
		margin : 5px 0px;
	}
}

.wrapper.caption .wrapper.grid select.input,
.wrapper.caption .wrapper.grid input.input {
    width : calc(50% - 10px);
	height : 40px;
	padding : 0px;
	margin : 5px;
}

select.input.full,
textarea.input.full,
input:not([type='checkbox']):not([type='radio']).input.full {
	width : 100%;
}

select.input.lg,
textarea.input.lg,
input:not([type='checkbox']):not([type='radio']).input.lg {
	width : 75%;
}

select.input.md,
textarea.input.md,
input:not([type='checkbox']):not([type='radio']).input.lg {
	width : 50%;
}

select.input.sm,
textarea.input.sm,
input:not([type='checkbox']):not([type='radio']).input.sm {
	width : 25%;
}

.linked-input {
	display : none;
}

select.input.i-companion.left,
textarea.input.i-companion.left,
input:not([type='checkbox']):not([type='radio']).input.i-companion.left {
	padding-left : 25px;
} 

select.input.i-companion.right,
textarea.input.i-companion.right,
input:not([type='checkbox']):not([type='radio']).input.i-companion.right {
	padding-right : 45px;
} 

.button {
	padding : 5px 10px;
	border : none;
	text-align : center;
	border-radius : 5px;
	white-space : nowrap;
	font-family : 'Nunito Sans', 'tahoma', sans-serif;
	-webkit-font-smoothing: antialiased;
	font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
	cursor : pointer;
	background-color : var(--alt-color);
	color : inherit;
}

.button.disabled {
    cursor : default;
}

@media screen and (max-width: 767px) {
	.wrapper.input.block button.button {
		margin : 5px 0px;
	}
}

.button:hover {
	background-color : var(--main-color);
}

body.dark .button {
	background-color : #181818;
}

body.dark .button:hover {
	background-color : #121212;
}

body.dark button.submit,
button.submit {
	background-color : #23BC43;
}

body.dark button.submit:hover,
button.submit:hover {
	background-color : #239C43;
}

body.dark button.primary,
button.primary {
	background-color : var(--main-color);
}

body.dark button.primary:hover,
button.primary:hover {
	background-color : var(--main-color);
}

body.dark button.secondary,
button.secondary {
	background-color : var(--alt-color);
}

body.dark button.secondary:hover,
button.secondary:hover {
	background-color : var(--main-color);
}

body.dark button.purple,
button.purple {
	background-color : #8023EB;
}

body.dark button.purple:hover,
button.purple:hover {
	background-color : #5023CB;
}

body.dark button.light-purple,
button.light-purple {
	background-color : #A073FF;
}

body.dark button.light-purple:hover,
button.light-purple:hover {
	background-color : #8073DF;
}

body.dark button.danger,
button.danger {
	border : none;
	background-color : #BC2343;
	color : inherit;
}

body.dark button.danger:hover,
button.danger:hover {
	background-color : #9C2343;
}

body.dark button.gold,
button.gold {
	border : none;
	background-color : #DCAF43;
	color : inherit;
}

body.dark button.gold:hover,
button.gold:hover {
	background-color : #CC8F43;
}

body.dark button.black,
button.black {
	border : none;
	background-color : #242424;
	color : inherit;
}

body.dark button.black:hover,
button.black:hover {
	background-color : #171717;
}

body.dark .button.pseudo-input.file,
body.dark .button.white,
.button.white {
	border : none;
	background-color : #FFF;
	color : #202020;
}

body.dark .button.pseudo-input.file:hover,
body.dark .button.white:hover,
.button.white:hover {
	background-color : #D4D4D4;
}

body.dark .button.b-border,
.button.b-border {
	background-color : transparent;
	border : 2px solid #35D854;
	color : #35D854;
}

body.dark .button.b-border:hover,
.button.b-border:hover {
	background-color : transparent;
	border : 2px solid #35B854;
	color : #35B854;
}

body.dark button.b-border.danger,
button.b-border.danger {
	border-color : #BC2343;
	background-color : transparent;
	color : #BC2343;
}

body.dark button.b-border.danger:hover,
button.b-border.danger:hover {
	border-color : #9C2343;
	background-color : transparent;
	color : #9C2343;
}

body.dark button.b-border.gold,
button.b-border.gold {
	border-color : #DCAF43;
	background-color : transparent;
	color : #DCAF43;
}

body.dark button.b-border.gold:hover,
button.b-border.gold:hover {
	border-color : #CC8F43;
	background-color : transparent;
	color : #CC8F43;
}

body.dark .button.b-border.gray,
.button.b-border.gray
 {
	border-color : #EEE;
	background-color : transparent;
	color : #EEE;
}

body.dark .button.b-border.gray:hover,
.button.b-border.gray:hover
 {
	border-color : #CCC;
	background-color : transparent;
	color : #CCC;
}

body.dark .button.b-border.primary,
.button.b-border.primary
 {
	border-color : var(--main-color);
	background-color : transparent;
	color : var(--main-color);
}

body.dark .button.b-border.primary:hover,
.button.b-border.primary:hover
 {
	border-color : var(--main-color);
	background-color : transparent;
	color : var(--main-color);
}

body.dark button.b-border.secondary,
button.b-border.secondary {
	border-color : var(--alt-color);
	background-color : transparent;
	color : var(--alt-color);
}

body.dark button.b-border.secondary:hover,
button.b-border.secondary:hover {
	border-color : var(--main-color);
	background-color : transparent;
	color : var(--main-color);
}

body.dark button.b-border.purple,
button.b-border.purple {
	border-color : #8023EB;
	background-color : transparent;
	color : #8023EB;
}

body.dark button.b-border.purple:hover,
button.b-border.purple:hover {
	border-color : #5023CB;
	background-color : transparent;
	color : #5023CB;
}

body.dark button.b-border.light-purple,
button.b-border.purple {
	border-color : #A073FF;
	background-color : transparent;
	color : #A073FF;
}

body.dark button.b-border.light-purple:hover,
button.b-border.purple:hover {
	border-color : #8073DF;
	background-color : transparent;
	color : #8073DF;
}

body.dark .button.opaque,
.button.opaque {
	background-color : rgba(16, 16, 16, .2);
}

body.dark .button.transparent,
.button.transparent {
	background-color : transparent;
}

body.dark .button.transparent:hover,
.button.transparent:hover {
	background-color : transparent;
}

body.dark button.x:hover,
button.x:hover {
	color : #BC2343;
}

.button.pseudo-input.file {
	padding : 20px 30px;
}

.wrapper.form.fluid .button {
	padding : 15px;
}

.button.full {
	display : block;
	width : 100%;
	padding : 20px 10px;
}

.button.full.pmd {
	padding : 15px 10px;
}

.button.lg {
	padding : 20px 40px;
}

.button.m-lg {
	padding : 15px 40px;
}

.button.md {
	padding : 10px 30px;
}

.button.sm {
	padding : 5px 10px;
}

.button.psm {
	padding : 10px;
}

.button.zsm {
	padding : 0px;
}

button.button.p-companion {
	height : 20px;
	position : absolute;
	top : 6px;
	right : 6px;
	border-radius : 5px;
}

button.button.p-companion.simple {
	height : 40px;
}

body.dark button.button.p-companion,
button.button.p-companion {
	background-color : transparent;
}

.wrapper.form.fluid button.button.p-companion {
	height : 35px;
	top : 3px;
}

.wrapper.form.fluid.labelled button.button.p-companion {
	height : 35px;
	top : -2px;
}

button.button.p-companion.left {
	left : 6px;
	right : auto;
}

@media screen and (max-width: 767px) {
	.wrapper.form.fluid button.button.p-companion {
		margin : 0px;
	}

	.wrapper.form.fluid.labelled button.button.p-companion {
		margin : 0px;
	}
}

body.dark button.set:hover,
body.dark button.set,
body.dark button.button.pseudo-input.radio,
button.set:hover,
button.set,
button.button.pseudo-input.radio {
	background-color : transparent;
	color : inherit;
}

button.set.active,
button.button.pseudo-input.radio.active {
	background-color : #A073FF;
	color : #FFF;
}

body.dark button.set.active,
body.dark button.button.pseudo-input.radio.active {
	background-color : #A073FF;
	color : inherit;
}

.wrapper.input button.set:hover,
.wrapper.input button.set,
.wrapper.input button.button.pseudo-input.radio {
	width : 50%;
	border : 1px solid #A073FF;
	border-radius : 0px;
}

@media screen and (max-width: 1000px) {
	.wrapper.input button.set:hover span.text,
	.wrapper.input button.set  span.text,
	.wrapper.input button.button.pseudo-input.radio span.text {
		display : none;
	}
}

.wrapper.input button.set.active,
.wrapper.input button.button.pseudo-input.radio.active {
	color : #FFF;
}

body.dark .wrapper.input button.set,
body.dark .wrapper.input button.button.pseudo-input.radio {
	border : 1px solid #A073FF;
	color : #A073FF;
}

body.dark .wrapper.input button.set.active,
body.dark .wrapper.input button.button.pseudo-input.radio.active {
	color : inherit;
}

.wrapper.input button.set:first-of-type,
.wrapper.input button.button.pseudo-input.radio:first-of-type {
	border-right-color : transparent;
	border-radius : 5px 0px 0px 5px;
}

.wrapper.input button.set:last-of-type,
.wrapper.input button.button.pseudo-input.radio:last-of-type {
	border-left-color : transparent;
	border-radius : 0px 5px 5px 0px;
}

.wrapper.form.fluid .button.submit {
	position : relative;
	font-size : 1.01rem;
	background-color : #FFF;
	color : #202020;
}

body.dark .wrapper.form.fluid .button.submit {
	font-size : 1.01rem;
	background-color : #FFF;
	color : #202020;
}

.wrapper.form.fluid .button.submit:after,
body.dark .wrapper.form.fluid .button.submit:after {
	content : " ";
	width : 100%;
	height : 3px;
	display : block;
	position : absolute;
	left : 0px;
	bottom : 0px;
	border-radius : 0px 0px 5px 5px;
	background : linear-gradient(to right, #8023EB, var(--main-color), #A073FF, var(--alt-color));
}

.wrapper.tabs .wrapper.tabs-togglers .button.tab-view-toggler,
.wrapper.tabs .wrapper.tabs-togglers .button.tab-toggler {
	padding : 15px 20px;
	border-bottom : 3px solid transparent;
	border-radius : 5px 5px 0px 0px;
	font-size : .8rem;
	font-weight : 600;
	font-family : verdana, 'sans-serif';
}

@media screen and (max-width: 490px) {
	.wrapper.tabs:not(.alt) .wrapper.tabs-togglers .button.tab-toggler {
		width : 40px;
		padding : 15px 5px;
		border-left : 1px solid #C3C3C3;
		overflow : hidden;
		text-overflow : clip;
	}
	
	body.dark .wrapper.tabs:not(.alt) .wrapper.tabs-togglers .button.tab-toggler {
		border-left-color : #444;
	}
	
	.wrapper.tabs:not(.alt) .wrapper.tabs-togglers .button.tab-toggler.active {
		width : 100%;
		padding : 15px 20px;
		border-left : none;
		text-overflow : normal;
	}
}

@media screen and (min-width: 500px) and (max-width: 767px) {
	.wrapper.tabs:not(.alt) .wrapper.tabs-togglers .button.tab-toggler {
		width : 60px;
		padding : 15px 5px;
		border-left : 1px solid #C3C3C3;
		overflow : hidden;
		text-overflow : clip;
	}
	
	body.dark .wrapper.tabs:not(.alt) .wrapper.tabs-togglers .button.tab-toggler {
		border-left-color : #444;
	}
	
	.wrapper.tabs:not(.alt) .wrapper.tabs-togglers .button.tab-toggler.active {
		width : 100%;
		padding : 15px 20px;
		border-left : none;
		text-overflow : normal;
	}
	
	.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler {
		width : 100%;
		padding : 15px;
	}
	
	.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler .text {
		display : none;
	}
	
	.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler i {
		display : inline;
	}
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
	.wrapper.tabs:not(.alt) .wrapper.tabs-togglers .button.tab-toggler {
		width : 100px;
		padding : 15px 5px;
		border-left : 1px solid #C3C3C3;
		overflow : hidden;
		text-overflow : clip;
	}
	
	body.dark .wrapper.tabs:not(.alt) .wrapper.tabs-togglers .button.tab-toggler {
		border-left-color : #444;
	}
	
	.wrapper.tabs:not(.alt) .wrapper.tabs-togglers .button.tab-toggler.active {
		width : 100%;
		padding : 15px 20px;
		border-left : none;
		text-overflow : normal;
	}
	
	.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler .text,
	.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler .text {
		display : none;
	}
	
	.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler i,
	.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler i {
		display : inline;
	}
}

body.dark .wrapper.tabs .wrapper.tabs-togglers .button.tab-view-toggler,
body.dark .wrapper.tabs .wrapper.tabs-togglers .button.tab-toggler {
	background-color : transparent;
}

.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler {
	border-bottom : 1px solid #CCC;
	border-left : 4px solid transparent;
	text-align : left;
}

body.dark .wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler,
body.dark .wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler {
	border-bottom : 1px solid #101010;
	background-color : transparent;
}

.wrapper.tabs .wrapper.tabs-togglers .button.tab-toggler:hover,
.wrapper.tabs .wrapper.tabs-togglers .button.tab-toggler.active {
	border-color : #8023EB;
	background-color : rgba(44, 44, 44, .1);
	color : #8023CB;
}

body.dark .wrapper.tabs .wrapper.tabs-togglers .button.tab-toggler:hover,
body.dark .wrapper.tabs .wrapper.tabs-togglers .button.tab-toggler.active {
	border-color : #8023EB;
	background-color : #141414;
	color : #8023CB;
}

.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler:hover,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler.active,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler:hover,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler.active {
	background : linear-gradient(to right, var(--alt-color), #EFEFEF);
	color : inherit;
	border-radius : 0px;
	border-color : #CCC;
	border-left-color : #4565D8;
}

body.dark .wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler:hover,
body.dark .wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler.active,
body.dark .wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler:hover,
body.dark .wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler.active {
	background : linear-gradient(to right, #141414, #232323);
	color : inherit;
	border-radius : 0px;
	border-color : #101010;
	border-left-color : #4565D8;
}

.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler:last-child,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler:last-child:hover,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler.active:last-child,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler:last-child,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler:last-child:hover,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler.active:last-child {
	border-color : transparent;
}

.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler:last-child:hover,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler.active:last-child,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler:last-child:hover,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler.active:last-child {
	border-left-color : #4565D8;
}

.wrapper.card button.close {
	position : absolute;
	top : 5px;
	right : 5px;
}

.wrapper.subpage.card button.close {
	position : static;
}

body .button.pseudo-input.a-error,
body.dark .button.pseudo-input.a-error {
	border : 1px solid #BC2343;
	color : #BC2343;
}

button.toggler.fcard {
	background-color : transparent;
}

@media screen and (max-width: 767px) {
	.wrapper.grid.list .wrapper.card .button {
		width : 100%;
	}
	
	.wrapper.page-card .wrapper.input  button.button {
	    width : 100%;
	    margin : 5px 0px;
	}
}

/**********************************************lists*********************************************************/
.list {
	margin : 0px;
	padding : 0px;
	list-style-type : none;
}

.list.horizontal {
	display : flex;
	flex-wrap : nowrap;
}

.wrapper.sidebar .menu {
	width : 100%;
}

.wrapper.topbar .menu {
	height : 100%;
}

ul.list.dropdown {
	width : auto;
	height : auto;
	display : none;
	position : absolute;
	top : 100%;
	z-index : 7;
	overflow : hidden;
	border : 1px solid #DCDCDC;
	border-radius : 5px;
	background-color : #FFF;
}

ul.list.dropdown:hover {
	border : 1px solid var(--main-color);
}

body.dark ul.list.dropdown {
	border : none;
	background-color : var(--main-color);
}

ul.list.data{
	width : 100%;
}

li.dropdown:first-of-type:last-of-type ul.list.dropdown,
li.dropdown:first-of-type ul.list.dropdown {
	left : 0px;
	right : auto;
}

li.dropdown:last-of-type ul.list.dropdown {
	left : auto;
	right : 5px;
}

li.wrapper.dropdown:hover ul.list.dropdown {
	display : block;
}

.wrapper.topbar .menu.dropdown {
	height : auto;
}

li.wrapper.dropdown.notification-area ul.list.menu.dropdown {
    max-width : 380px;
    max-height : 420px;
    padding : 5px;
    overflow : hidden;
    overflow-y : auto;
    left : auto;
    right : 5px;
}

.list.horizontal li {
	display : inline;
}

.list.vertical li {
	display : block;
}

.wrapper.sidebar .menu li {
	width : 100%;
}

.wrapper.topbar .menu li {
	height : 100%;
}

li.wrapper.dropdown {
	position : relative;
}

ul.list.dropdown li {
	white-space : nowrap;
}

ul.list.data li {
	width : 100%;
	padding : 5px 0px;
	display : flex;
}

/**********************************************tables**********************************************************/
.table {
	width : 100%;
	border-collapse: collapse;
}

.table.left {
	text-align : left;
}

.table.stripes tr:nth-child(even) {
    background-color : #DCDCDC;
}

body.dark .table.stripes tr:nth-child(even) {
    background-color : #3C3C3C;
}

.table td, .table th {
	min-width : 80px;
}

.table td {
    max-width : 300px;
	padding : 10px 5px;
	overflow : hidden;
	white-space : nowrap;
	text-overflow : ellipsis;
}

.table td:first-child, .table td.action {
    overflow : visible;
}

.table td.sm, .table th.sm {
	max-width : 140px;
	overflow : hidden;
}

.table td.sm {
	text-align : justify;
}

.table td.md {
    max-width : 50%;
}

.table td.lg {
    max-width : 70%;
}

.table tr:hover td {
	word-wrap : break-word;
	word-break : break-all;
	white-space : normal;
}

.table tr:hover td.sm,
.table tr td.sm:hover {
	white-space : nowrap;
	text-overflow : ellipsis;
}

.table td.sm.tkeep, .table th.sm.tkeep {
	word-break : keep-all;
}

.table tbody tr td {
	border-radius : 5px;
}

.table tbody tr td {
	border-top : 1px solid #EFEFEF;
	border-bottom : 1px solid #EFEFEF;
}

.table tbody tr td:first-child {
	border-left : 1px solid #EFEFEF;
}

.table tbody tr td:last-child {
	border-right : 1px solid #EFEFEF;
}

body.dark .table tbody tr td {
	border-top : 1px solid #3C3C3C;
	border-bottom : 1px solid #3C3C3C;
}

body.dark .table tbody tr td:first-child {
	border-left : 1px solid #3C3C3C;
}

body.dark .table tbody tr td:last-child {
	border-right : 1px solid #3C3C3C;
}

/**********************************************links***********************************************************/
a {
	text-decoration : none;
	color : inherit;
}

body.dark a {
	color : #FFF;
}

.list.horizontal li a {
	display : inline-block;
}

.list.vertical li a {
	width : 100%;
	display : block;
}

.wrapper.sidebar .menu a {
	width : 100%;
	padding : 10px 0px;
	display : inline-flex;
	justify-content : center;
	align-items : center;
	align-content : center;
	font-size : 1.1rem;
}

.wrapper.topbar .menu a {
	height : 100%;
	padding : 0px 15px;
	display : inline-flex;
	justify-content : center;
	align-items : center;
	align-content : center;
}

.wrapper.topbar .menu a:hover {
	color : var(--main-color);
}

.wrapper.sidebar .menu a:hover {
	color : #FFF;
}

body.dark .wrapper.topbar .menu a:hover,
body.dark .wrapper.sidebar .menu a:hover {
	color : var(--alt-color);
}

.wrapper.topbar .menu a.wrapper.icon {
	display : flex;
	width : 40px;
	height : 40px;
}

.table .menu.dropdown a,
.wrapper.topbar .menu.dropdown a {
	padding : 10px;
	justify-content : flex-start;
	font-size : .9rem;
}

.table .menu.dropdown a:hover,
.wrapper.topbar .menu.dropdown a:hover {
	background-color : var(--main-color);
	color : #FFF;
	
} 

body.dark .table .menu.dropdown a:hover,
body.dark .wrapper.topbar .menu.dropdown a:hover {
	background-color : rgba(15, 15, 15, .3);
	color : #FFF;
} 

a.link {
	padding : 10px 5px;
	display : inline-block;
	white-space : nowrap;
	text-align : center;
}

.wrapper.topbar a.wrapper.icon:hover {
	border-color : var(--main-color);
}

a.link.full {
	width : 100%;
}

a.link.lg {
	width : 70%;
}

a.link.md {
	width : 50%;
}

a.link.sm {
	width : 30%;
}

.wrapper.form.fluid .wrapper.footer a.link:first-child {
	text-align : left;
}

.wrapper.form.fluid .wrapper.footer a.link:last-child {
	text-align : right;
}

@media screen and (max-width: 767px) {
    a.link.lg,
    a.link.md,
    a.link.sm {
        width : 100%;
    }
    
    a.link,
    .wrapper.form.fluid .wrapper.footer a.link:first-child,
    .wrapper.form.fluid .wrapper.footer a.link:last-child {
    	text-align : center;
    }
    
}

.toggler.dropdown {
	cursor : default;
}

li.wrapper.dropdown.notification-area ul.list.menu.dropdown a.option {
    width : auto;
    padding : 5px;
    font-size : .9rem;
}

li.wrapper.dropdown.notification-area ul.list.menu.dropdown a.option:hover {
    cursor : pointer;
    color : var(--alt-color);
}

ul.list a.list-data-card {
	width : 100%;
	padding : 5px;
	display : flex;
	align-content : center;
	align-items : center;
}

a.indexer {
	margin : 5px;
	padding : 5px 10px;
	cursor : default;
	border : 1px solid #BBB;
	border-radius : 5px;
}

body.dark a.indexer {
	border : 1px solid #232323;
}

body.dark body.dark a.indexer.current,
body.dark body.dark a.indexer:hover,
a.indexer.current,
a.indexer:hover {
	border : 1px solid #8023CB;
}

a.indexer.current {
	background-color : #8023CB;
	color : #FFF;
}

a.alter-button.sm {
	margin : 2px;
	padding : 5px 10px;
	border : 1px solid #8023CB;
	border-radius : 5px;
}

a.alter-button.lg {
	margin : 5px;
	padding : 10px 20px;
	border : 1px solid #8023CB;
	border-radius : 5px;
}

a.alter-button:hover {
	border : 1px solid #50039B;
}

a.ref-link:hover {
    text-decoration : underline;
	color : #8023CB;
}

a.icon-outliner {
    width : 40px;
    height : 40px;
    display : flex;
    justify-content : center;
    align-content : center;
    align-items : center;
    border : 1px solid #ECECEC;
    background-color : transparent;
}

a.icon-outliner.lg {
    width : 100px;
    height : 100px;
}

a.icon-outliner.rounded {
    border-radius : 50%;
}

body.dark a.icon-outliner {
    border : 1px solid #202020;
}

/****************************************************img&videos********************************************************/
img.icon {
	width : 80px;
	height : auto;
}

img.icon.sm {
	width : 40px;
	height : auto;
}

img.icon.md {
	width : 80px;
	height : auto;
}

img.icon.lg {
	width : 160px;
	height : auto;
}

.wrapper.icon img.icon {
	width : 140%;
	height : auto;
}

.wrapper.topbar .wrapper.icon img.icon {
	width : 80px;
	height : auto;
}

.wrapper.img img,
img.logo {
	width : 100%;
	height : auto;
}

.wrapper.form.fluid .wrapper.logo img.logo {
	width : auto;
	height : 60px;
}

a.icon-outliner.rounded img,
.wrapper.img.rounded img {
	width : auto;
	height : 120%;
}

.wrapper.img.rounded img.logo {
	width : 90%;
	height : auto;
}

.wrapper.dialog.lg img.logo,
.wrapper.logo.floating img.logo {
	width : auto;
	height : 100%;
}

.wrapper.dialog.lg .wrapper.logo.floating img.logo {
	width : auto;
	height : 80px;
	position : absolute;
	top : 0px;
	left : 0px;
}

.wrapper.report.snippet img.icon.sm {
	width : 20px;
	height : auto;
}

.wrapper.dialog.report img.icon {
	width : 60px;
	height : auto;
	margin : 10px;
}

.table img {
	margin : 5px;
}

svg {
	width : 100%;
}

svg.graph {
	height : 400px;
}

/****************************************************text**************************************************************/
i.fa.text-xslg {
	font-size : 8rem;
}

p.caption.text-xlg,
.text-xlg {
	font-size : 5rem;
}

p.caption.text-hlg,
.text-hlg {
	font-size : 3rem;
}

p.caption.text-slg,
.text-slg {
	font-size : 2rem;
}

p.caption.text-lg,
.text-lg {
	font-size : 1.5rem;
}

p.caption.text-md,
.text-md {
	font-size : 1.2rem;
}

p.caption.text-sznormal,
.text-sznormal {
    font-size : 1rem;
}

p.caption.text-sm,
.text-sm {
	font-size : .9rem;
}

p.caption.text-msm,
.text-msm {
	font-size : .83rem;
}

p.caption.text-vsm,
.text-vsm {
	font-size : .85rem;
}

p.caption.text-xsm,
.text-xsm {
	font-size : .6rem;
}

.text-strong {
	font-weight : 700;
}

.text-heavy {
	font-weight : 900;
}

.text-normal {
	font-weight : 400;
}

.text-lite {
	font-weight : 200;
}

.text-justify {
	text-align : justify;
}

.pinned-right {
	position : absolute;
	right : 5px;
}

.pinned-right {
	position : absolute;
	left : 5px;
}

p {
	margin : 0px;
	padding : 0px;
}

p.caption {
	width : 100%;
	font-size : .96rem;
}

p.caption.sm {
	font-size : .9rem;
}

p.caption.title {
	font-size : 1.45rem;
	font-weight : 700;
}

p.caption.subtitle {
	font-size : 1.2rem;
	font-weight : 700;
}

.wrapper.card p:not(.caption) {
	width : 100%;
	padding : 5px 10px;
}

.wrapper.empty-records p.caption {
	padding : 10px;
	text-align : center;
}

.wrapper.card .c-body p {
	text-align : center;
}

.wrapper.card p.footer {
	font-size : .85rem;
}

.wrapper.card p.content {
	font-size : 1.4rem;
}

.wrapper.card p.content.cardinal {
	width : auto;
	font-size : 1.4rem;
}

.wrapper.form.fluid .caption.title {
	padding : 10px 0px 20px;
}

p.caption.text-center,
.text-center {
	text-align : center;
}

.wrapper.report.snippet p.caption {
	white-space : nowrap;
	font-size : .9rem;
	margin-left : 5px;
}

label.warning-strip,
p.notice {
	width : 100%;
	padding : 5px 20px;
	border-radius : 5px;
	background-color : #FCFF43;
	color : #212121;
}

p.info-bits {
	width : 100%;
	display : flex;
	flex-wrap : wrap;
	word-wrap : break-word;
	word-break : break-all;
}

p.caption.cp-disclaimer {
	font-size : .85rem;
}

.wrapper.legal-notice p.caption {
	margin : 10px 0px;
}

label.icon {
	font-size : .9rem;
}

label.icon.lg {
	font-size : 2.2rem;
}

label.icon.sm {
	font-size : .85rem;
}

label.label.color-preset {
	display : inline-flex;
	justify-content : center;
	align-items : center;
	align-content : center;
	margin : 5px;
	font-size : .9rem;
}

.label.snippet {
	width : 100%;
	padding : 5px 10px;
	display : flex;
	justify-content : flex-start;
	align-items : center;
	align-content : center;
}

label.label.color-preset .preset {
	display : block;
	width : 20px;
	height : 20px;
	margin : 0px 5px;
	border : 1px solid #DCDCDC;
	border-radius : 50%;
}

body.dark label.label.color-preset .preset {
	border : 1px solid #101010;
}

.toggler.pseudo-input {
	display : flex;
	justify-content : flex-start;
	align-content : center;
	align-items : center;
	font-size : .95rem;
}

.toggler.pseudo-input i {
	padding : 0px 10px 0px 0px;
}

.toggler.pseudo-input.on i {
	color : #4565D8;
}

label.label.input {
	width : 100%;
	padding : 5px 0px;
	display : block;
	font-size : .9rem;
}

label.label.input.invalid {
	font-size : .85rem;
}

label.label.block {
	width : 100%;
	text-align : center;
	padding : 10px 0px;
}

label.label.file-caption {
	margin : 2px 5px;
	padding : 10px 15px;
	border : 1px solid #DCDCDC;
	border-left : 3px solid #4565D8;
	border-radius : 5px;
	font-size : .85rem;
	background-color : #FFF;
}

body.dark label.label.file-caption {
	background-color : #131313;
	border : 1px solid #232323;
	border-left : 3px solid #4565D8;
}

.label.full {
	width : 100%;
}

ul.list.data li span.caption {
	flex-grow : 5;
	font-weight : 700;
}

ul.list.data li span.content {
	flex-grow : 2;
	display : flex;
	justify-content : flex-end;
}

ul.list.data li span.content.left {
	justify-content : flex-start;
}

.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler i,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler i {
	width : 20px;
	font-size : 1.03rem;
}

.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler.active i,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-view-toggler:hover i,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler.active i,
.wrapper.tabs.alt .wrapper.tabs-togglers .button.tab-toggler:hover i {
	color : #4565D8;
}

.wrapper.topbar .menu a i {
	font-size : 1.2rem;
}

.wrapper.topbar .menu.dropdown a i {
	padding : 0px 5px 0px 0px;
	font-size : 1rem;
}

.wrapper.report.snippet i.fa-plus.error,
button.close i.fa-plus,
i.fa-plus.x {
	transform : rotate(45deg);
}

.wrapper.report.snippet i.error {
	font-size : 1.2rem;
	font-weight : 900;
	color : #BC2343;
}

.wrapper.report.snippet i.success {
	font-size : 1.2rem;
	font-weight : 900;
	color : #23BC43;
}

label.label.input.invalid i {
	padding : 10px;
}

li.wrapper.dropdown.notification-area ul.list.menu.dropdown i {
    margin : 0px 10px 0px 0px;
}

li.wrapper.dropdown.notification-area label.counter {
    width : 25px;
    height : 25px;;
    position : absolute;
    top : 2px;
    right : 2px;
    display :flex;
    justify-content : center;
    align-items : center;
    align-content : center;
    border-radius : 50%;
    font-size : .8rem;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    color : #222;
    background-color : #FFF;
}

li.wrapper.dropdown.notification-area ul.list.menu.dropdown label {
    width : calc(100% - 40px);
    display : inline-flex;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
}

span.content {
	margin : 0px 5px;
	white-space : nowrap;
	text-overflow : ellipsis;
	overflow : hidden;
}

span.status {
	display : inline-block;
	margin : 5px 0px;
	padding : 2px 5px;
	border : 1px solid var(--main-color);
	border-radius : 5px;
	font-size : .8rem;
}

body.dark span.status {
	border : 1px solid #232323;
}

span.info-bit {
	padding : 5px;
	white-space : nowrap;
}

span.info-bit:first-child {
	padding : 5px 5px 5px 0px;
}

span.info-bit:last-child {
	padding : 5px 0px 5px 5px;
}

.wrapper.legal-notice p.caption span.sub-title {
	margin : 5px 0px;
	display : block;
	font-weight : 700;
	text-indent : 20px;
}

.color-preview {
    display : inline-flex;
    width : 20px;
    height : 20px;
    margin : 3px 5px 0px;
    border-radius : 3px;
}

.table td.sm span.snippet, .table th.sm span.snippet {
    width : 150px;
    padding : 5px;
	position : absolute;
	display : none;
	z-index : 9;
	background-color : #FFF;
	border : 1px solid #DEDEDE;
	border-radius : 5px;
	text-align : justify;
	font-size : .7rem;
}

body.dark .table td.sm span.snippet, .table th.sm span.snippet {
	background-color : #333;
	border : 1px solid #2E2E2E;
}

.table td.sm:hover span.snippet, .table th.sm:hover span.snippet {
	display : block;
}

.text-nowrap {
    word-break : keep-all;
    white-space : nowrap;
}

.text-ellipsis {
    overflow : hidden;
    text-overflow : ellipsis;
}

@media screen and (max-width: 767px) {
	i.fa.text-xslg {
		font-size : 6rem;
	}

	p.caption.text-xlg,
	.text-xlg {
		font-size : 4rem;
	}

	p.caption.text-hlg,
	.text-hlg {
		font-size : 2.6rem;
	}

	p.caption.text-slg,
	.text-slg {
		font-size : 2rem;
	}

	p.caption.text-lg,
	.text-lg {
		font-size : 1.5rem;
	}

	p.caption.text-md,
	.text-md {
		font-size : 1rem;
	}
    
    p.caption.text-sznormal,
    .text-sznormal {
        font-size : 1rem;
    }

	p.caption.text-sm,
	.text-sm {
		font-size : .85rem;
	}

	p.caption.text-msm,
	.text-msm {
		font-size : .825rem;
	}

	p.caption.text-vsm,
	.text-vsm {
		font-size : .825rem;
	}

	p.caption.text-xsm,
	.text-xsm {
		font-size : .65rem;
	}

	.text-strong {
		font-weight : 700;
	}

	.text-heavy {
		font-weight : 900;
	}

	.text-normal {
		font-weight : 400;
	}

	.text-lite {
		font-weight : 300;
	}

	.text-justify {
		text-align : justify;
	}
	
	p.text-sline,
	.text-sline {
		white-space : nowrap;
	}

	.pinned-right {
		position : absolute;
		right : 5px;
	}

	.pinned-right {
		position : absolute;
		left : 5px;
	}
	
	p.caption {
		font-size : .85rem;
	}
	
	p.caption.sm {
		font-size : .7rem;
	}

	p.caption.title {
		font-size : 1.25rem;
	}

	p.caption.subtitle {
		font-size : 1rem;
		font-weight : 600;
	}

	.wrapper.card p:not(.caption) {
		width : 100%;
		padding : 5px 10px;
	}

	.wrapper.empty-records p.caption {
		padding : 10px;
		text-align : center;
	}

	.wrapper.card .c-body p {
		text-align : center;
	}

	.wrapper.card p.footer {
		font-size : .85rem;
	}

	.wrapper.card p.content {
		font-size : 1.4rem;
	}

	.wrapper.card p.content.cardinal {
		width : auto;
		font-size : 1.2rem;
	}

	.wrapper.card .wrapper.caption.f-transient p.caption {
		padding : 10px 0px;
	}
	
	.wrapper.tab .wrapper.caption.tab-title.f-transient p.caption {
		padding : 10px 0px;
	}
	
	.wrapper.title-container p.caption {
		text-align : center;
	}
	
	.wrapper.form.fluid .caption.title {
		padding : 10px 0px 20px;
	}

	p.caption.text-center,
	.text-center {
		text-align : center;
	}

	.wrapper.report.snippet p.caption {
		white-space : nowrap;
		font-size : .9rem;
		margin-left : 5px;
	}

	label.warning-strip,
	p.notice {
		width : 100%;
		padding : 5px 20px;
		border-radius : 5px;
		background-color : #FCFF43;
		color : #212121;
	}

	p.info-bits {
	}

	p.caption.cp-disclaimer {
		font-size : .8rem;
	}

	label.icon {
		font-size : .85rem;
	}

	label.icon.lg {
		font-size : 1.8rem;
	}

	label.icon.sm {
		font-size : .7rem;
	}

	label.label.color-preset {
		font-size : .9rem;
	}

	.label.snippet {
	}

	label.label.color-preset .preset {
	}

	.toggler.pseudo-input {
		font-size : .85rem;
	}

	label.label.input {
		font-size : .85rem;
	}

	label.label.input.invalid {
		font-size : .7rem;
	}

	label.label.block {
	}

	label.label.file-caption {
		font-size : 1rem;
	}
	
	label.text-vsm {
		font-size : .7rem;
	}

	.wrapper.topbar .menu a i {
		font-size : 1rem;
	}

	.wrapper.topbar .menu.dropdown a i {
		font-size : .95rem;
	}

	.wrapper.report.snippet i.error {
		font-size : 1rem;
	}

	.wrapper.report.snippet i.success {
		font-size : 1rem;
	}

	span.status {
		font-size : .7rem;
	}

}

.mlg {
	margin : 50px;
}

.mylg {
	margin-top : 50px;
	margin-bottom : 50px;
}

.mmd {
	margin : 25px;
}

.mymd {
	margin-top : 25px;
	margin-bottom : 25px;
}

.msm {
	margin : 10px;
}

.mysm {
	margin-top : 10px;
	margin-bottom : 10px;
}

.mxsm {
	margin : 5px;
}

.mxxsm {
	margin-left : 5px;
	margin-right : 5px;
}

.myxsm {
	margin-top : 5px;
	margin-bottom : 5px;
}

@media screen and (max-width: 767px) {
	.wrapper.dialog .mlg {
		margin : 20px;
	}
	
	.wrapper.dialog .mylg {
		margin-top : 20px;
		margin-bottom : 20px;
	}
}

.hide {
	display : none !important;
}

.invisible {
	visibility : hidden !important;
}

.c-gold {
	color : #DCAF43 !important;
}

.bg-gold {
	background-color : #DCAF43 !important;
}

.c-primary {
	color : var(--main-color) !important;
}

.bg-primary {
	background-color : var(--main-color) !important;
}

.c-secondary {
	color : var(--alt-color) !important;
}

.bg-secondary {
	background-color : var(--alt-color) !important;
}

.c-purple {
	color : #A073FF !important;
}

.bg-purple {
	background-color : #A073FF !important;
}

.c-danger,
.c-red {
	color : #BC2343 !important;
}

.bg-danger,
.bg-red {
	background-color : #BC2343 !important;
}

.c-success,
.c-green {
	color : #23BC43 !important;
}

.bg-success,
.bg-green {
	background-color : #23BC43 !important;
}

.c-white {
	color : #FFF !important;
}

.bg-white {
	background-color : #FFF !important;
}

.c-dark {
	color : #202020 !important;
}

.bg-dark {
	background-color : #202020 !important;
}

.c-gray {
	color : #B4B4B4 !important;
}

.bd-gray {
	border : 1px solid #DCDCDC;
}

.bg-main {
	background-color : #FFF;
}

body.dark .bg-main {
	background-color : #212121;
}

.prelative {
	position : relative;
}

.pabsolute {
    position : absolute;
}

.pstatic {
    position : static;
}

.pfixed {
    position : fixed;
}

.divider:before {
    content : "";
	width : 100%;
	height : 1px;
	background : var(--main-color);
}

.c-link {
    cursor : pointer;
    transition : color 1s linear;
}

.c-link.done {
    color : #23BC43 !important;
}

.c-pointer {
    cursor : pointer !important;
}

.c-default {
    cursor : default !important;
}

.scrollable,
.y-scrollable {
    overflow-y : auto !important;
}

.scrollable,
.x-scrollable {
    overflow-x : auto !important;
}

/******************************************animation*******************************************************/
@keyframes y-in-flip {
	from {transform : rotateX(90deg);}
	to {transform : rotateX(0deg);}
}