:root {
	--accent: #1d2900;
	/* Colors */
	--color00: #f2f2f2;
	--color01: #fefefe;
	--color02: #292c34; /* Gray */
	--color03: #27ae60; /* Green */
	--colorBG01: #050505;
	--colorBG02: #121025;

	/* Overlays */
	--overlay: rgba(0, 40, 70, 0.65);
	--gradient01: -webkit-linear-gradient(
		left,
		rgba(38, 43, 50, 1) 0%,
		rgba(38, 43, 50, 0.4) 80%,
		rgba(33, 35, 38, 1) 100%
	);
	--gradient02: -moz-linear-gradient(
		left,
		rgba(38, 43, 50, 1) 0%,
		rgba(38, 43, 50, 0.4) 80%,
		rgba(38, 43, 50, 1) 100%
	);
}

/* NO Scrollbar */
::-webkit-scrollbar {
	display: none;
	scroll-behavior: smooth;
}

/*  Sizes   */
.fullheight {
	height: 100vh;
	min-height: 100%;
}
.ct120 {
	position: relative;
	width: 120%;
}
.ct100 {
	position: relative;
	width: 100%;
}
.ct80 {
	position: relative;
	width: 80%;
}
.ct75 {
	position: relative;
	width: 75%;
}
.ct70 {
	position: relative;
	width: 70%;
}
.ct65 {
	position: relative;
	width: 65%;
}
.ct60 {
	position: relative;
	width: 60%;
}
.ct55 {
	position: relative;
	width: 55%;
}
.ct50 {
	position: relative;
	width: 50%;
}
.ct48 {
	position: relative;
	width: 48%;
}
.ct45 {
	position: relative;
	width: 45%;
}
.ct40 {
	position: relative;
	width: 40%;
}
.ct38 {
	position: relative;
	width: 38%;
}
.ct35 {
	position: relative;
	width: 35%;
}
.ct32 {
	position: relative;
	width: 32%;
}
.ct30 {
	position: relative;
	width: 30%;
}
.ct28 {
	position: relative;
	width: 28%;
}
.ct25 {
	position: relative;
	width: 25%;
}
.ct20 {
	position: relative;
	width: 20%;
}

.ctBoxed {
	position: relative;
	width: 100%;
}
.ctBoxed > .container {
	position: relative;
	width: 100%;
	clear: both;
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
}

/*  Heights   */
.h360px {
	height: 360px !important;
}
.h420px {
	height: 420px !important;
}
.h500px {
	height: 500px !important;
}

/*  Boxes   */
.top-boxed {
	position: relative;
	box-shadow: 0 8px 8px 6px rgba(0, 0, 0, 0.1);
	margin-top: -80px;
	background: #fff;
	margin-bottom: 80px;
}

.boxed-150-tb {
	padding: 150px 0;
	box-sizing: border-box;
}
.boxed-150-t {
	padding: 150px 0 0 0;
	box-sizing: border-box;
}
.boxed-150-b {
	padding: 0 0 150px 0;
	box-sizing: border-box;
}

.boxed-trbl {
	padding: 100px 14%;
	box-sizing: border-box;
}
.boxed-r {
	padding: 0 14% 0 0;
	box-sizing: border-box;
}
.boxed-l {
	padding: 0 0 0 14%;
	box-sizing: border-box;
}
.boxed-rl {
	padding: 0 14%;
	box-sizing: border-box;
}

.boxed-100-tb {
	padding: 100px 0;
	box-sizing: border-box;
}
.boxed-100-t {
	padding: 100px 0 0 0;
	box-sizing: border-box;
}
.boxed-100-b {
	padding: 0 0 100px 0;
	box-sizing: border-box;
}

/*  Padding-Flex  */
.padding-2-trbl {
	padding: 2%;
	box-sizing: border-box;
}
.padding-2-tb {
	padding: 2% 0;
	box-sizing: border-box;
}
.padding-2-t {
	padding: 2% 0 0 0;
	box-sizing: border-box;
}
.padding-2-r {
	padding: 0 2% 0 0;
	box-sizing: border-box;
}
.padding-2-l {
	padding: 0 0 0 2%;
	box-sizing: border-box;
}
.padding-2-rl {
	padding: 0 2%;
	box-sizing: border-box;
}

.padding-3-trbl {
	padding: 3%;
	box-sizing: border-box;
}
.padding-3-tb {
	padding: 3% 0;
	box-sizing: border-box;
}
.padding-3-t {
	padding: 3% 0 0 0;
	box-sizing: border-box;
}
.padding-3-r {
	padding: 0 3% 0 0;
	box-sizing: border-box;
}
.padding-3-l {
	padding: 0 0 0 3%;
	box-sizing: border-box;
}
.padding-3-rl {
	padding: 0 3%;
	box-sizing: border-box;
}

.padding-4-trbl {
	padding: 4%;
	box-sizing: border-box;
}
.padding-4-tb {
	padding: 4% 0;
	box-sizing: border-box;
}
.padding-4-r {
	padding: 0 4% 0 0;
	box-sizing: border-box;
}
.padding-4-l {
	padding: 0 0 0 4%;
	box-sizing: border-box;
}
.padding-4-rl {
	padding: 0 4%;
	box-sizing: border-box;
}

.padding-6-trbl {
	padding: 6%;
	box-sizing: border-box;
}
.padding-6-tb {
	padding: 6% 0;
	box-sizing: border-box;
}
.padding-6-r {
	padding: 0 6% 0 0;
	box-sizing: border-box;
}
.padding-6-l {
	padding: 0 0 0 6%;
	box-sizing: border-box;
}
.padding-6-rl {
	padding: 0 6%;
	box-sizing: border-box;
}

.padding-8-trbl {
	padding: 8%;
	box-sizing: border-box;
}
.padding-8-tb {
	padding: 8% 0;
	box-sizing: border-box;
}
.padding-8-r {
	padding: 0 8% 0 0;
	box-sizing: border-box;
}
.padding-8-l {
	padding: 0 0 0 8%;
	box-sizing: border-box;
}
.padding-8-rl {
	padding: 0 8%;
	box-sizing: border-box;
}

/*  Margin  */
.margin-10px-trbl {
	margin: 10px;
}
.margin-10px-r {
	margin: 0 10px 0 0;
}
.margin-10px-l {
	margin: 0 0 0 10px;
}
.margin-10px-tb {
	margin: 10px 0;
}
.margin-10px-b {
	margin: 0 0 10px;
}
.margin-10px-rl {
	margin: 0 10px;
}

.margin-20px-trbl {
	margin: 20px;
}
.margin-20px-r {
	margin: 0 20px 0 0;
}
.margin-20px-l {
	margin: 0 0 0 20px;
}
.margin-20px-tb {
	margin: 20px 0;
}
.margin-20px-t {
	margin: 20px 0 0 0;
}
.margin-20px-b {
	margin: 0 0 20px;
}
.margin-20px-rl {
	margin: 0 20px;
}

.margin-40px-trbl {
	margin: 40px;
}
.margin-40px-r {
	margin: 0 40px 0 0;
}
.margin-40px-l {
	margin: 0 0 0 40px;
}
.margin-40px-tb {
	margin: 40px 0;
}
.margin-40px-t {
	margin: 40px 0 0 0;
}
.margin-40px-b {
	margin: 0 0 40px;
}
.margin-40px-rl {
	margin: 0 40px;
}

.margin-60px-trbl {
	margin: 60px;
}
.margin-60px-r {
	margin: 0 60px 0 0;
}
.margin-60px-l {
	margin: 0 0 0 60px;
}
.margin-60px-tb {
	margin: 60px 0;
}
.margin-60px-b {
	margin: 0 0 160px;
}
.margin-60px-rl {
	margin: 0 60px;
}

.margin-80px-trbl {
	margin: 80px;
}
.margin-80px-r {
	margin: 0 80px 0 0;
}
.margin-80px-l {
	margin: 0 0 0 80px;
}
.margin-80px-tb {
	margin: 80px 0;
}
.margin-80px-b {
	margin: 0 0 80px;
}
.margin-80px-rl {
	margin: 0 80px;
}

.margin-100px-trbl {
	margin: 100px;
}
.margin-100px-r {
	margin: 0 100px 0 0;
}
.margin-100px-l {
	margin: 0 0 0 100px;
}
.margin-100px-tb {
	margin: 100px 0;
}
.margin-100px-b {
	margin: 0 0 100px;
}
.margin-100px-rl {
	margin: 0 100px;
}

.margin-120px-trbl {
	margin: 120px;
}
.margin-120px-r {
	margin: 0 120px 0 0;
}
.margin-120px-l {
	margin: 0 0 0 120px;
}
.margin-120px-tb {
	margin: 120px 0;
}
.margin-120px-b {
	margin: 0 0 120px;
}
.margin-120px-rl {
	margin: 0 120px;
}

/*  FlexBox    */
.ease {
	transition: all 0.4s ease;
}
.clfx {
	box-sizing: border-box;
}
.flex {
	display: flex;
}
.flex_wrap {
	flex-wrap: wrap;
}
.flex_nowrap {
	flex-wrap: nowrap;
}
.flex_col {
	flex-flow: column wrap;
	flex-direction: column;
}
.flex_row {
	flex-flow: row wrap;
	flex-direction: row;
}
.flex_col_rev {
	flex-flow: column-reverse wrap;
	flex-direction: column-reverse;
}
.flex_row_rev {
	flex-flow: row-reverse wrap;
	flex-direction: row-reverse;
}

.ai-start {
	align-items: flex-start;
}
.ai-end {
	align-items: flex-end;
}
.ac-start {
	align-content: flex-start;
}
.ac-end {
	align-content: flex-end;
}

.ai-mid {
	align-items: center;
}
.ac-mid {
	align-content: center;
}

.jc-start {
	justify-content: flex-start;
}
.jc-end {
	justify-content: flex-end;
}

.f_center_std {
	justify-content: center;
}
.f_center_mid {
	justify-content: center;
	align-items: center;
}
.f_between_std {
	justify-content: space-between;
}
.f_between_mid {
	justify-content: space-between;
	align-items: center;
}

/*  Gaps    */
.g12 {
	gap: 12px;
}
.g20 {
	gap: 20px;
}
.g24 {
	gap: 24px;
}

.nolinkstyle {
	text-decoration: none;
	cursor: pointer;
}
.hide {
	opacity: 0;
	display: none;
}
.hidden {
	display: none;
}
label {
	user-select: none !important;
}

/*  Text-Content    */
.title {
	position: relative;
	width: 100%;
	margin-bottom: 35px;
	user-select: none;
	overflow: hidden;
}
.title h2 {
	font-weight: 800;
}
.text {
	margin-bottom: 35px;
}

/*  Text-Align    */
.text-j {
	text-align: justify;
}
.text-c {
	text-align: center;
}
.text-r {
	text-align: right;
}
.text-l {
	text-align: left;
}

.oh {
	overflow: hidden;
}
.ox {
	overflow-x: scroll;
}
.oy {
	overflow-y: scroll;
}

.sticky {
	position: sticky;
	top: 0;
}

/* Notifications */

.note {
	position: fixed;
	top: 0;
	left: 4%;
	right: 0;
	padding: 20px 8em;
	box-sizing: border-box;
	border-radius: 0 0 5px 5px;
	z-index: 98;
	transition: all 0.5s ease;
}
.note-inline {
	position: relative;
	padding: 20px 8em;
	box-sizing: border-box;
	border-radius: 0 0 5px 5px;
}
.not-yellow {
	color: #977308;
	background-color: #fff3cd;
	border-color: #ffeeba;
}
.not-green {
	color: #195828;
	background-color: #d4edda;
	border-color: #c3e6cb;
}
.not-blue {
	color: #0e525e;
	background-color: #d1ecf1;
	border-color: #bee5eb;
}
.not-red {
	color: #831520;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

/*  Toast    */
.noteWrap {
	position: fixed;
	bottom: 120px;
	right: 40px;
	max-width: 400px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	z-index: 99;
}

.toast {
	position: relative;
	width: 20rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
	border-radius: 0.25rem;
	user-select: none;
	padding: 1rem;
	box-sizing: border-box;
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0.25rem 0;
	background: #48bb78;
	color: #fff;
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.toast.success {
	background: #48bb78;
	color: #fff;
}
.toast.error {
	background: #f56565;
	color: #fff;
}
.toast.info {
	background: #4299e1;
	color: #fff;
}
.toast.warning {
	background: #ed8936;
	color: #fff;
}