html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

ul,
li {
	float: left;
	display: inline;
}

h1,
h2,
h3,
h4,
h5 {
	font-weight: normal;
}

i,
em {
	font-style: normal;
}

button,
select {
	border: none;
	margin: 0;
	padding: 0;
	background: transparent;
}

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/*	Finish RESET	*/

body {
	margin: 0;
	color: var(--color-black);
	font-size: 14px;
	font-family: var(--font-primary);
	line-height: 20px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	background-color: var(--color-light);
}

*::-moz-selection {
	background: rgba(0, 0, 0, 0.2);
}

*::selection {
	background: rgba(0, 0, 0, 0.2);
}

a {
	color: var(--color-dark);
	text-decoration: none;
}

a:hover {
	color: var(--color-purple);
	text-decoration: none;
}

:root {
	--color-black: #000;
	--color-dark: #131726;
	--color-dark-light: #85B1E9;
	--color-orange: #F75C14;
	--color-red: #DC0D15;
	--color-purple: #1F2666;
	--color-blue: #00B9F7;
	--color-yellow: #FFA217;
	--color-pink: #FF44B8;
	--color-green: #1CBB8C;
	--color-grey: #6C757D;
	--color-grey-light: #BBB;
	--color-light: #F2F4F7;
	--font-primary: 'Inter', 'Arial';
	--input-background-color: #FFF;
	--input-border-color: #5A6F8F;
	--input-border-color-inline: #FFF;
	--input-border-color-checked: #1CBB8C;
	--input-background-color-checked: #1CBB8C;
	--input-border-color-inline-checked: #1CBB8C;
	--input-border-color-disabled: #bfbfbf;
	--input-background-color-disabled: #efefef;
	--input-border-color-inline-disabled: #bfbfbf;
	--input-border-color-hover: #1CBB8C;
	--input-background-color-hover: #FFF;
	--input-border-color-inline-hover: #bfbfbf;
	--input-border-color-focus: #1CBB8C;
}

/* Reset Css */
input,
select,
textarea,
input[type='checkbox'],
input[type='radio'] {
	border: none;
	position: relative;
	-webkit-appearance: none;
	margin: 0px;
	padding: 0px;
}

input:focus,
select:focus,
textarea:focus,
input[type='checkbox']:focus,
input[type='radio']:focus {
	outline: 0;
}

input[type='submit'],
button {
	border: none;
	position: relative;
	-webkit-appearance: none;
	margin: 0px;
	padding: 0px;
	outline: 0;
}

/* Customization checkbox & radio */
input[type='checkbox'],
input[type='radio'] {
	width: 18px;
	height: 18px;
	line-height: 18px;
	min-width: 1px !important;
	margin: 1px 6px -1px 0;
	padding: 0;
}

input[type='checkbox']::before,
input[type='radio']::before {
	display: block;
	position: absolute;
	content: "";
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	background-color: var(--input-background-color);
	transition: background-color 500ms, border-color 500ms;
}

input[type='checkbox']::after,
input[type='radio']::after {
	display: block;
	position: absolute;
	content: "";
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: background-color 500ms, border-color 250ms;
}

/* Customization checbox */
input[type='checkbox']::before {
	border-radius: 4px;
	border: solid 1px;
	border-color: var(--input-border-color);
}

input[type='checkbox']::after {
	border: solid;
	border-color: var(--input-border-color-inline);
	border-width: 0 2px 2px 0;
	width: 5px;
	height: 10px;
	left: 7px;
	bottom: 5px;
}

input[type='checkbox']:not(:checked)::before {
	border-color: var(--input-border-color);
}

input[type='checkbox']:not(:checked)::after {
	border-color: var(--input-border-color-inline);
}

input[type='checkbox']:checked:not(:disabled)::before {
	border-color: var(--input-border-color-checked);
	background-color: var(--input-background-color-checked);
}

input[type='checkbox']:read-only::before,
input[type='checkbox']:-moz-read-only::before {
	border-color: var(--input-border-color-inline-checked);
}

input[type='checkbox']:disabled::before {
	border-color: var(--input-border-color-disabled);
	background-color: var(--input-background-color-disabled);
}

input[type='checkbox']:disabled::after {
	border-color: var(--input-border-color-inline-disabled);
}

input[type='checkbox']:checked:not(:disabled):focus::before,
input[type='checkbox']:not(:checked):not(:disabled):focus::before {
	border-color: var(--input-border-color-hover);
}

input[type='checkbox']:not(:checked):not(:disabled):hover::before {
	border-color: var(--input-border-color-hover);
	background-color: var(--input-background-color-hover);
}

input[type='checkbox']:not(:checked):not(:disabled):hover:not(:checked)::after {
	border-color: var(--input-border-color-inline-hover);
}

/* Customization radio */
input[type='radio']::before {
	border-radius: 50%;
	border: solid 1px;
}

input[type='radio']::after {
	border: solid;
	border-color: var(--input-border-color-inline-checked);
	border-width: 5px;
	border-radius: 50%;
	width: 0px;
	height: 0px;
	left: 4px;
	bottom: 4px;
}

input[type='radio']:not(:checked)::before {
	border-color: var(--input-border-color);
}

input[type='radio']:not(:checked)::after {
	border-color: var(--input-border-color-inline);
}

input[type='radio']:checked:not(:disabled)::before {
	border-color: var(--input-border-color-checked);
	background-color: var(--input-background-color);
}

input[type='radio']:read-only::before,
input[type='checkbox']:-moz-read-only::before {
	border-color: var(--input-border-color-inline-checked);
}

input[type='radio']:disabled::before {}

input[type='radio']:disabled::after {
	border-color: var(--input-border-color-inline-disabled);
}

input[type='radio']:checked:not(:disabled):focus::before,
input[type='radio']:not(:checked):not(:disabled):focus::before {
	border-color: var(--input-border-color-hover);
}

input[type='radio']:not(:checked):not(:disabled):hover::before {
	border-color: var(--input-border-color-hover);
	background-color: var(--input-background-color);
}

input[type='radio']:not(:checked):not(:disabled):hover:not(:checked)::after {
	border-color: var(--input-border-color-inline-hover);
}

input,
textarea,
select {
	float: left;
	font-size: 13px;
	font-family: var(--font-primary), Arial;
	color: var(--color-black);
	border-radius: 0;
}

button {
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	border-radius: 0;
	font-family: var(--font-primary), Arial;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-black);
}

select {
	color: var(--color-black);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

option {
	color: var(--color-black);
}

.input {
	width: 100%;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--color-grey-light);
	transition: all 0.5s;
	background-color: #FFF;
	border-radius: 12px;
	box-shadow: 3px 3px 0 #FFF;
}

.input:focus {
	border-color: var(--color-green);
}

input[type="date"] {
	text-align: left !important;
	text-align-last: left !important;
	direction: ltr;
}

input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
}

input[type="date"]::-webkit-datetime-edit {
	text-align: left;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
	text-align: left;
}

.select {
	padding-right: 29px;
	background: #FFF url(../images/arrow-select.png) no-repeat right center;
	background-size: auto 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-weight: 500;
	line-height: 38px;
}

textarea.input {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

.button {
	float: none;
	height: 40px;
	display: flex;
	align-items: center;
	padding: 0 15px 0 20px;
	cursor: pointer;
	position: relative;
	color: #FFF;
	background-color: var(--color-purple);
	transition: all 0.5s;
	border-radius: 12px;
	overflow: hidden;
	text-align: left;
	line-height: 40px;
	box-shadow: 3px 3px 0 #FFF;
}

.button:hover {
	background-color: var(--color-dark) !important;
}

.button i {
	float: right;
	padding-left: 10px;
	margin-left: auto;
	margin-right: -8px;
	font-size: 24px;
	text-align: center;
	line-height: 40px;
}

a.button {
	color: #FFF;
	font-weight: 600;
	font-size: 14px;
	line-height: 50px;
}

.dashboard-body {
	float: left;
	width: 100%;
	padding: 0px 70px 60px 330px;
	position: relative;
	transition: all 0.5s;
}

.dashboard-body::before {
	content: "";
	position: fixed;
	top: 80px;
	bottom: 0;
	right: 0;
	width: 20px;
	background-color: #FFF;
	pointer-events: none;
	z-index: 9999;
}

.wrap {
	float: left;
	width: 100%;
	min-height: 10px;
	position: relative;
}

.tac {
	text-align: center;
}

.fl {
	float: left !important;
}

.fr {
	float: right !important;
}

.fn {
	float: none !important;
}

.w100 {
	float: left;
	width: 100% !important;
}

.w50 {
	float: left;
	width: 50%;
}

.w-auto {
	width: auto !important;
}

.mt50 {
	margin-top: 50px;
}

.mt40 {
	margin-top: 40px;
}

.mt30 {
	margin-top: 30px;
}

.mt25 {
	margin-top: 25px;
}

.mt20 {
	margin-top: 20px;
}

.mt15 {
	margin-top: 15px;
}

.mt10 {
	margin-top: 10px;
}

.mt5 {
	margin-top: 5px;
}

.mb50 {
	margin-bottom: 50px;
}

.mb40 {
	margin-bottom: 40px;
}

.mb30 {
	margin-bottom: 30px;
}

.mb25 {
	margin-bottom: 25px;
}

.mb20 {
	margin-bottom: 20px;
}

.mb15 {
	margin-bottom: 15px;
}

.mb10 {
	margin-bottom: 10px;
}

.mb5 {
	margin-bottom: 5px;
}

.ml20 {
	margin-left: 20px;
}

.ml10 {
	margin-left: 10px;
}

.mr20 {
	margin-right: 20px;
}

.mr10 {
	margin-right: 10px;
}

/*	Start TOP	*/

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9990;
}

.header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 80px;
	right: 0;
	height: 80px;
	background-color: #FFF;
}

.scroll .header::before,
.scroll-mobile .header::before {
	box-shadow: 0 0 15px rgba(31, 38, 102, 0.07);
}

.header::after,
.dashboard-body::after {
	content: "";
	position: absolute;
	top: 80px;
	left: 280px;
	width: 16px;
	height: 16px;
	background: url(../images/header-corner.png) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

.dashboard-body::after {
	position: fixed;
	left: auto;
	right: 20px;
	transform: scaleX(-1);
	z-index: 9999;
}

.header {
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
}

.logo {
	position: absolute;
	top: 20px;
	left: 30px;
	width: 220px;
	padding-bottom: 20px;
	z-index: 9000;
}

.logo::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--color-orange);
	opacity: 0.1;
}

.logo a {
	float: left;
	position: relative;
}

.logo a img {
	float: left;
	height: 40px;
}

.logo a img.logo-mobile {
	display: none;
}

.header-menu-wrap {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 280px;
	padding-top: 33px;
	background-color: #FFF;
	border-radius: 20px 0 0 0;
	z-index: 200;
}

.header-menu-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 30px;
	background: url(../images/lines.png) no-repeat left bottom / 100% auto;
	pointer-events: none;
	opacity: 0.2;
}

.header-date {
	position: absolute;
	top: -28px;
	left: 330px;
	font-weight: 500;
	color: #FFF;
	white-space: nowrap;
	pointer-events: none;
	z-index: 100;
}

.header-spacer {
	float: left;
	width: 100%;
	height: 1px;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: var(--color-orange);
	opacity: 0.1;
}

.header-menu {
	float: left;
	width: 100%;
	position: relative;
}

.header-menu>ul {
	width: 100%;
	padding-left: 30px;
}

.header-menu>ul>li {
	width: 100%;
	padding-bottom: 4px;
	position: relative;
}

.header-menu>ul>li:last-child {
	padding-bottom: 0;
}

.header-menu>ul>li:hover {
	z-index: 10;
}

.header-menu>ul>li>a {
	float: left;
	width: 100%;
	position: relative;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-purple);
	display: flex;
	align-items: center;
	transition: all 0.4s;
}

.header-menu>ul>li>a.active {
	color: var(--color-orange);
}

.header-menu>ul>li>a.active::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 5px;
	background-color: var(--color-orange);
	border-radius: 5px 0 0 5px;
}

.header-menu>ul>li>a picture {
	float: left;
	position: relative;
	text-align: center;
	transition: all 0.3s;
}

.header-menu>ul>li>a picture i {
	float: left;
	width: 36px;
	font-size: 24px;
	line-height: 34px;
	border: 1px solid rgba(31, 38, 102, 0.1);
	border-radius: 12px;
	transition: all 0.4s;
}

.header-menu>ul>li>a:hover picture i {
	color: #FFF;
	background-color: var(--color-purple);
}

.header-menu>ul>li>a.active picture i {
	color: #FFF;
	background-color: var(--color-orange);
}

.header-menu>ul>li>a small {
	float: left;
	flex: 1;
	padding-left: 15px;
}

.header-menu>ul>li>a span {
	float: right;
	padding: 0 4px;
	margin-right: -9px;
	font-size: 10px;
	font-weight: 600;
	background-color: var(--color-yellow);
	border-radius: 6px;
}

.header-menu-sub {
	display: none;
	position: absolute;
	top: 0;
	left: 220px;
	width: 240px;
	padding: 15px;
	background-color: #FFF;
	box-shadow: 0 8px 25px rgba(31, 38, 102, 0.13);
	text-align: left;
	border-radius: 10px;
}

.header-menu-sub::before {
	content: "";
	border-right: 5px solid transparent;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	height: 0;
	top: 15px;
	left: -5px;
	position: absolute;
	width: 0;
	border-right-color: #FFF;
}

.header-menu-sub a {
	float: left;
	width: 100%;
	padding: 10px 5px 10px 15px;
	position: relative;
	font-size: 15px;
	font-weight: 500;
	display: flex;
	align-items: center;
	transition: all 0.3s;
	border-radius: 6px;
}

.header-menu-sub a:hover {
	background-color: var(--color-light);
}

.header-menu-sub a i {
	float: right;
	margin-left: auto;
	font-size: 20px;
}

.header-right {
	float: right;
	width: calc(100% - 300px);
	padding: 10px;
	margin: 20px 20px 0 0;
	position: relative;
	z-index: 80;
	background-color: var(--color-orange);
	border-radius: 16px;
}

.header-box {
	position: absolute;
	right: -10px;
	top: 44px;
	background-color: #FFF;
	box-shadow: 5px 5px 0 #FFF;
	z-index: 100;
	border-radius: 12px;
	border: 1px solid var(--color-dark);
	display: none;
}

.header-box::before,
.header-box::after {
	content: "";
	border-bottom: 4px solid transparent;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	top: -4px;
	right: 19px;
	position: absolute;
	width: 0;
	border-bottom-color: var(--color-dark);
}

.header-box::after {
	top: -3px;
	border-bottom-color: #FFF;
}

.header-icon {
	float: left;
	width: 40px;
	height: 40px;
	position: relative;
	cursor: pointer;
	border-radius: 20px;
	transition: all 0.5s;
}

.header-icon span {
	position: relative;
	z-index: 10;
}

.header-account {
	float: right;
	position: relative;
}

.header-account-icon {
	width: auto;
	background-color: transparent !important;
}

.header-account-icon section {
	float: left;
	height: 40px;
	position: relative;
	border-radius: 20px;
	display: flex;
	align-items: center;
	z-index: 10;
}

.header-account-icon section::after {
	content: "";
	float: right;
	width: 11px;
	height: 32px;
	margin: 0 12px 0 4px;
	background: url(../images/arrow-white-down.png) no-repeat center / 100% auto;
}

.header-account-icon picture {
	float: left;
	width: 40px;
	height: 40px;
	position: relative;
	border-radius: 50%;
	font-weight: 700;
	color: var(--color-black);
	text-align: center;
	line-height: 40px;
	background-color: #FFF;
	z-index: 100;
	aspect-ratio: 1/1;
	overflow: hidden;
}

.header-account-icon small {
	float: left;
	max-width: 160px;
	margin-left: 10px;
	margin-right: 5px;
	position: relative;
	font-weight: 500;
	color: #FFF;
	white-space: nowrap;
	overflow: hidden;
}

.header-account-icon picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.header-account-content {
	width: 280px;
	right: 0;
}

.header-account-content ul {
	width: 100%;
	padding: 15px;
}

.header-account-content li {
	width: 100%;
}

.header-account-content li a {
	float: left;
	width: 100%;
	padding: 10px 15px;
	position: relative;
	font-size: 15px;
	font-weight: 500;
	border-radius: 6px;
	display: flex;
	align-items: center;
	transition: all 0.5s;
}

.header-account-content li a:hover {
	background-color: var(--color-light);
}

.header-account-content li a i {
	float: right;
	margin-left: auto;
	margin-right: -5px;
	font-size: 24px;
}

.header-notify,
.header-support {
	float: right;
	margin: 0 20px;
	position: relative;
}

.header-support {
	margin: 0;
}

.header-support .header-box {
	right: -10px;
}

.header-notify-icon {
	color: #FFF;
}

.header-notify-icon i {
	float: left;
	width: 100%;
	font-size: 28px;
	text-align: center;
	line-height: 40px;
}

.header-notify-icon.new small {
	position: absolute;
	top: 3px;
	right: 8px;
	width: 12px;
	height: 12px;
	border: 2px solid var(--color-orange);
	background-color: #FFF;
	border-radius: 50%;
	z-index: 10;
	transition: all 0.5s;
}

.header-notify-content {
	width: 400px;
	padding: 15px;
	background-color: #FFF;
}

.header-notify-content ul {
	width: 100%;
	max-height: 300px;
	margin-top: 10px;
	overflow-y: auto;
}

.header-notify-content li {
	width: 100%;
	padding: 0 15px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.header-notify-content li:last-child {
	border-bottom: none;
}

.header-notify-content li:hover {
	background-color: var(--color-light);
}

.header-notify-item {
	float: left;
	width: 100%;
	padding: 15px 0;
	position: relative;
	transition: all 0.3s;
	/* font-size:15px; */
}

.header-notify-item i {
	float: left;
	height: 23px;
	padding: 0 12px;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 600;
	line-height: 24px;
	background-color: var(--color-grey-light);
	border-radius: 8px;
	color: #FFF;
}

.header-notify-item span {
	float: left;
	width: 100%;
}

.header-content-title {
	float: left;
	width: 100%;
	padding: 9px 14px;
	font-weight: 700;
	color: var(--color-dark);
	letter-spacing: 1px;
	text-align: center;
	border-radius: 20px;
	border: 1px solid rgba(31, 38, 102, 0.1);
}

.header-content-bottom {
	float: left;
	width: 100%;
	text-align: center;
	overflow: hidden;
}

.header-content-bottom a {
	float: left;
	width: 100%;
	padding: 9px 15px;
	font-weight: 700;
	font-size: 11px;
	color: #666;
	letter-spacing: 1px;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	transition: all 0.3s;
}

.header-content-bottom a:hover {
	border-color: var(--color-dark);
}

.menu-trigger-active {
	background-color: var(--color-dark);
	color: #FFF;
}

.menu-trigger-active i {
	color: #FFF;
}

.header-notify-icon.new.menu-trigger-active small {
	border-color: var(--color-dark);
}

.header-account-icon.menu-trigger-active picture {
	background-color: var(--color-dark);
}

.copyright {
	position: fixed;
	left: 30px;
	bottom: 20px;
	white-space: nowrap;
}

.copyright img {
	float: left;
	height: 20px;
	margin-right: 20px;
}

.copyright small {
	float: left;
	font-size: 11px;
	opacity: 0.7;
}

/*	Finish TOP	*/

.controls {
	height: 100%;
}

.slick-prev,
.slick-next {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	text-indent: -9999px;
	cursor: pointer;
	z-index: 1000;
	transition: all 0.2s ease;
	background: #FFF url(../images/arrow-left.png) no-repeat center / auto 20px;
	border-radius: 50%;
	box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}

.slick-prev {
	left: 0;
}

.slick-next {
	right: 0;
	background-image: url(../images/arrow-right.png);
}

.slick-prev:hover,
.slick-next:hover {
	opacity: 1;
}

ul.slick-dots {
	position: absolute;
	text-align: center;
	right: 0;
	left: 0;
	bottom: 0;
	padding: 25px 0;
	z-index: 1000;
}

ul.slick-dots li {
	float: none;
	height: 5px;
	margin: 0 5px;
	display: inline-block;
}

ul.slick-dots li button {
	float: left;
	width: 16px;
	height: 5px;
	cursor: pointer;
	background-color: var(--color-black);
	transition: all 0.3s;
	position: relative;
	text-indent: -9999px;
	opacity: 0.5;
	border-radius: 3px;
}

ul.slick-dots li button:hover {
	opacity: 0.6;
}

ul.slick-dots li.slick-active button {
	width: 30px;
	opacity: 1;
}

.vertical-out {
	width: 100%;
	height: 100%;
	display: table;
}

.vertical-in {
	width: 100%;
	display: table-cell;
	vertical-align: middle;
}

/*	Finish SLIDER	*/

.mask,
.mask-top {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 700;
}

.mask-top {
	top: 0;
	bottom: auto;
}

.mask>img,
.mask-top>img {
	float: left;
	width: 100%;
}

/*	Start FOOTER	*/

.btn-back {
	display: none;
}

/*	Start CONTENT	*/

.shadow {
	box-shadow: 3px 3px 0 #FFF;
}

.border-top {
	box-shadow: 0 -1px 0 rgba(31, 38, 102, 0.06);
}

.page-title-wrap {
	float: left;
	width: 100%;
	padding-top: 30px;
	padding-bottom: 20px;
	position: relative;
	display: flex;
	align-items: center;
}


.page-title-wrap.in {
	margin-top: -25px;
}

.page-title {
	float: left;
	padding: 8px 0 8px 24px;
	position: relative;
	flex: 1;
	font-size: 20px;
	font-weight: 600;
	color: var(--color-purple);
	letter-spacing: -0.25px;
	line-height: 24px;
	display: flex;
	align-items: center;
}

.page-title::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 5px;
	background-color: var(--color-purple);
	border-radius: 0 5px 5px 0;
	opacity: 0.15;
}

.page-title::after {
	content: "";
	float: right;
	flex: 1;
	height: 1px;
	margin: 0 20px;
	background-color: var(--color-purple);
	opacity: 0.07;
}

.page-title-cta {
	float: right;
	margin-left: auto;
}

.page-title-cta>a {
	float: left;
	padding: 5px 3px 5px 13px;
	display: flex;
	background-color: rgba(31, 38, 102, 0.05);
	border-radius: 8px;
}

.page-title-cta>a:hover {
	background-color: var(--color-dark);
	color: #FFF;
}

.page-title-cta>a i {
	float: right;
	padding-left: 2px;
	font-size: 20px;
}

.page-title-back {
	display: none;
}

.page-title-input-wrap {
	float: left;
	position: relative;
}

.page-title-input {
	float: left;
	position: relative;
}

.page-title-input-wrap .page-title-input {
	margin-right: 15px;
}

.page-title-input-wrap .page-title-input:last-child {
	margin-right: 0;
}

.page-title-input>i {
	position: absolute;
	top: 0;
	right: 9px;
	pointer-events: none;
	font-size: 24px;
	line-height: 44px;
}

.page-title-in {
	position: relative;
}

.page-title .function-links {
	width: auto;
}

.medium-title {
	float: left;
	width: 100%;
	padding: 30px 0 20px 0;
	position: relative;
	font-size: 30px;
	font-weight: 500;
	line-height: 30px;
	color: var(--color-black);
	z-index: 30;
}

.page-text {
	float: left;
	width: 100%;
	font-size: 15px;
	color: var(--color-grey);
	line-height: 24px;
}

.inner-40 {
	margin: 0 -40px;
}

.inner-30 {
	margin: 0 -30px;
}

.inner-20 {
	margin: 0 -20px;
}

.inner-15 {
	margin: 0 -15px;
}

.inner-10 {
	margin: 0 -10px;
}

.inner-8 {
	margin: 0 -8px;
}

.inner-6 {
	margin: 0 -6px;
}

.inner-5 {
	margin: 0 -5px;
}

.top-150 {
	padding-top: 150px;
}

.top-100 {
	padding-top: 100px;
}

.top-50 {
	padding-top: 50px;
}

.bottom-150 {
	padding-bottom: 150px;
}

.bottom-100 {
	padding-bottom: 100px;
}

.bottom-50 {
	padding-bottom: 50px;
}

.welcome-hero {
	float: left;
	width: 100%;
	margin-bottom: 30px;
	position: relative;
	display: flex;
	align-items: center;
}

.welcome-hero-left {
	float: left;
	flex: 1;
	display: flex;
	align-items: center;
}

.welcome-hero-left section {
	float: left;
	margin-right: 24px;
}

.welcome-hero-left section .input {
	height: 40px;
	line-height: 38px;
	color: #FFF;
	background: var(--color-pink);
	border-color: rgba(0, 0, 0, 0.3);
	font-weight: 700;
}

.welcome-hero-left section .input option {
	background-color: var(--color-pink);
	color: #FFF;
	border-radius: 8px;
}

.welcome-hero-left::after {
	content: "";
	float: right;
	flex: 1;
	height: 2px;
	margin-left: auto;
	margin-right: 24px;
	background: rgba(31, 38, 102, 0.06);
}

.welcome-hero-right {
	float: right;
	margin-left: auto;
}

.welcome-hero-right.absolute {
	position: absolute;
	z-index: 1000;
	top: 15px;
	right: 15px;
}

.welcome-hero-right section {
	float: left;
	margin-right: 10px;
}

.welcome-hero-right section:last-child {
	float: left;
	margin-right: 0;
}

.welcome-hero-right section .input {
	height: 40px;
	line-height: 38px;
}

.welcome-boxes {
	float: left;
	width: 100%;
	position: relative;
	display: flex;
	flex-flow: row wrap;
}

.welcome-box-item {
	float: left;
	width: calc(50% - 15px);
	margin-bottom: 30px;
	position: relative;
}

.welcome-box-item .box {
	height: 100%;
}

.welcome-boxes .welcome-box-item:nth-child(even) {
	float: right;
	margin-left: auto;
}

.payment-list {
	float: left;
	width: 100%;
	position: relative;
}

.payment-list>ul {
	width: 100%;
}

.payment-list>ul>li {
	width: 100%;
	min-height: 68px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(31, 38, 102, 0.07);
}

.payment-list>ul>li:last-child {
	margin-bottom: 0;
}

.payment-line {
	float: left;
	width: 100%;
	padding-left: 70px;
	position: relative;
}

.payment-line>i {
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	font-size: 32px;
	line-height: 48px;
	text-align: center;
	color: #FFF;
	background-color: var(--color-green);
	border-radius: 50%;
}

.payment-line.canceled>i {
	background-color: var(--color-red);
}

.payment-line>strong {
	float: left;
	width: 100%;
	font-size: 15px;
	font-weight: 600;
}

.payment-line>section,
.payment-line>article {
	float: left;
	width: 100%;
	display: flex;
	align-items: center;
}

.payment-line>section {
	margin-top: 6px;
	margin-bottom: 6px;
}

.payment-line>section span,
.payment-line>article span {
	float: left;
}

.payment-line>section small,
.payment-line>article small {
	float: right;
	margin-left: auto;
}

.payment-line>article span strong,
.payment-line>article small {
	font-weight: 600;
	color: var(--color-green);
}

.payment-line.canceled>article span strong,
.payment-line.canceled>article small {
	color: var(--color-red);
}

.payment-line>article span strong {
	font-size: 15px;
}

.pro-stats {
	float: left;
	width: 100%;
	position: relative;
}

.pro-stats>ul {
	width: calc(100% + 24px);
	margin-left: -12px;
	display: flex;
	flex-flow: row wrap;
}

.pro-stats>ul>li {
	width: 25%;
	padding: 0 12px;
	margin-bottom: 24px;
}

.stat-item {
	float: left;
	width: 100%;
	height: 100%;
	padding: 23px;
	position: relative;
	background-color: #FFF;
	border-radius: 16px;
	border: 1px solid var(--color-grey-light);
	transition: all 0.5s;
	display: flex;
	flex-direction: column;
}

.stat-item:hover {
	border-color: var(--color-purple);
}

.stat-item picture {
	float: left;
	width: 100%;
	display: flex;
	align-items: center;
}

.stat-item picture small {
	float: left;
	flex: 1;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-grey);
	display: flex;
	align-items: center;
}

.stat-item picture small::after {
	content: "";
	float: right;
	height: 1px;
	flex: 1;
	margin: 0 15px;
	background-color: var(--color-purple);
	opacity: 0.07;
}

.stat-item picture i {
	float: right;
	width: 40px;
	margin-left: auto;
	position: relative;
	font-size: 28px;
	color: var(--color-orange);
	line-height: 40px;
	text-align: center;
	border-radius: 12px;
	background-color: rgba(247, 92, 20, 0.07);
}

.stat-item section {
	float: left;
	width: 100%;
	padding: 20px 0 29px 0;
	color: var(--color-grey);
}

.stat-item section strong {
	font-size: 30px;
	font-weight: 600;
	color: var(--color-purple);
	line-height: 30px;
}

.stat-item article {
	float: left;
	width: 100%;
	margin-top: auto;
	padding-top: 15px;
	margin-bottom: -4px;
	font-size: 13px;
	color: var(--color-grey);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-top: 1px solid rgba(31, 38, 102, 0.07);
}

.table-responsive {
	float: left;
	width: 100%;
	border-radius: 6px;
	-webkit-overflow-scrolling: touch;
	overflow: hidden;
	overflow-x: auto;
}

.table-responsive table {
	width: 100%;
	font-size: 14px;
}

.table-responsive table tr:hover {
	background-color: rgba(31, 38, 102, 0.06) !important;
}

.table-responsive table td,
.table-responsive table th {
	padding: 12px;
	border-bottom: 1px solid rgba(31, 38, 102, 0.1);
	vertical-align: middle;
}

.table-responsive.add table td:not(:last-child),
.table-responsive.add table th:not(:last-child) {
	padding-right: 0;
}

.table-responsive table th {
	text-align: left;
	background-color: var(--color-grey);
	color: #FFF;
	border-color: rgba(0, 0, 0, 0.3);
}

.table-installment table th {
	background-color: #FFF;
	color: var(--color-dark);
	border-bottom: 2px solid var(--color-dark);
}

.table-responsive table tr.light-green td {
	background-color: #DBF5F4;
}

.table-operation table {
	font-size: 13px;
	font-weight: 500;
	line-height: 16px;
}

.table-operation table tr:nth-child(even) {
	background-color: rgba(31, 38, 102, 0.03);
}

.table-operation table th {
	white-space: nowrap;
}

.table-operation table th,
.table-operation table td {
	border-right: 1px solid rgba(31, 38, 102, 0.1);
}

.table-operation table th:last-child,
.table-operation table td:last-child {
	border-right: 0;
}

.table-installment table tr:hover {
	background-color: #FFF !important;
}

.table-installment table td {
	padding: 12px 6px !important;
}

.installment-forwarding table td .select {
	min-width: 80px;
}

.table-percentage table td .input {
	float: none;
	display: inline-block;
}

.bank-logo {
	height: 40px;
}

#logoPreview {
	float: left;
	width: 100%;
	position: relative;
}

#logoImage {
	float: left;
	width: 100%;
	max-width: 240px;
	padding: 7px;
	border: 1px solid var(--color-grey-light);
	position: relative;
	margin-top: 20px;
	display: none;
	background-color: #FFF;
	border-radius: 8px;
}

.status {
	display: inline-block;
	min-width: 26px;
	height: 26px;
	padding: 2px 7px;
	border: 1px solid var(--color-grey-light);
	font-size: 12px;
	font-weight: 600;
	color: var(--color-grey-light);
	line-height: 20px;
	text-align: center;
	border-radius: 8px;
}

.status.fixed {
	width: 100px;
}

.status.normal {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.status.ok {
	border-color: var(--color-green);
	color: var(--color-green);
}

.status.pending {
	border-color: var(--color-yellow);
	color: var(--color-yellow);
}

.status.cancel {
	border-color: var(--color-red);
	color: var(--color-red);
}

.table-func {
	float: right;
	position: relative;
	text-align: center;
	display: flex;
}

.table-func a {
	float: left;
	margin-right: 5px;
	position: relative;
	border-radius: 8px;
	color: #FFF;
	background-color: var(--color-grey);
	transition: all 0.5s;
}

.table-func a:last-child {
	margin-right: 0;
}

.table-func a:hover {
	background-color: var(--color-dark) !important;
	color: #FFF !important;
}

.table-func a i {
	float: left;
	width: 30px;
	font-size: 20px;
	line-height: 30px;
}

.table-label {
	display: inline-block;
	white-space: nowrap;
}

.table-label label {
	float: left;
}

.table-label input,
.table-label span {
	display: inline-block;
}

.tooltip-text {
	visibility: hidden;
	background-color: var(--color-black);
	font-size: 11px;
	font-weight: 500;
	line-height: 16px;
	color: #FFF;
	text-align: center;
	padding: 4px 10px;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: all 0.25s, opacity 0.3s;
	white-space: nowrap;
	pointer-events: none;
}

.tooltip-text::before {
	content: "";
	border-top: 4px solid transparent;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	height: 0;
	bottom: -4px;
	left: calc(50% - 6px);
	position: absolute;
	width: 0;
	border-top-color: var(--color-black);
}

.table-func a:hover .tooltip-text,
.function-links li a:hover .tooltip-text {
	visibility: visible;
	opacity: 1;
	bottom: 120%;
}

.tooltip-text.left {
	left: auto;
	bottom: auto;
	top: 50%;
	right: calc(100% + 5px);
	transform: translateY(-50%) translateX(-8px);
}

.tooltip-text.left::before {
	transform: rotate(-90deg);
	left: calc(100% - 4px);
	bottom: 10px;
}

.table-func a:hover .tooltip-text.left {
	bottom: auto;
	transform: translateY(-50%) translateX(0);
}

.tooltip-text.right {
	bottom: auto;
	top: 50%;
	left: calc(100% + 5px);
	transform: translateY(-50%) translateX(8px);
}

.tooltip-text.right::before {
	transform: rotate(90deg);
	left: -8px;
	bottom: 10px;
}

.table-func a:hover .tooltip-text.right {
	bottom: auto;
	transform: translateY(-50%) translateX(0);
}

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

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

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

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

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

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

.bg-light {
	background-color: var(--color-light) !important;
	color: var(--color-dark) !important;
}

/*	Start LOGIN + SIGN UP	*/

.page-login-out {
	float: left;
	width: 100%;
	height: 100vh;
	position: relative;
	background-color: #FFF;
	z-index: 10;
}

.page-login-sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-dark);
	background-size: cover;
	overflow: hidden;
}

.page-login-support {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 120px 40px 40px 40px;
	display: flex;
	align-items: center;
	background: linear-gradient(180deg, rgba(31, 38, 102, 0.0), rgba(31, 38, 102, 0.9));
}

.page-login-support small {
	float: left;
	font-size: 15px;
	color: #FFF;
}

.page-login-support em {
	float: left;
	flex: 1px;
	height: 1px;
	margin-left: 30px;
	background-color: rgba(255, 255, 255, 0.08);
}

.page-login-support a {
	float: left;
	margin-left: 30px;
	color: #FFF;
	display: flex;
	align-items: center;
}

.page-login-support a:hover {
	text-decoration: underline;
}

.page-login-support a i {
	float: left;
	margin-right: 7px;
	font-size: 24px;
	line-height: 20px;
}

.page-login-wrap {
	width: 100%;
	max-width: 640px;
	height: 100%;
	padding-top: 40px;
	padding-bottom: 100px;
	margin: 0 auto;
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
}

.page-login-wrap .in {
	float: left;
	width: 100%;
	padding: 48px;
	display: flex;
	flex-direction: column;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 24px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 2px solid #FFF;
}

.page-login {
	float: left;
	width: 100%;
	padding-top: 40px;
	margin-top: auto;
	margin-bottom: auto;
	position: relative;
	z-index: 20;
}

.page-login .page-text {
	margin-top: 17px;
	margin-bottom: 24px;
	color: var(--color-dark);
}

.login-form {
	float: left;
	width: 100%;
}

.login-form>section {
	float: left;
	width: 100%;
	margin-bottom: 20px;
	position: relative;
}

.login-form>section:last-child {
	margin-bottom: 0;
}

.login-form>section span {
	position: absolute;
	top: 14px;
	left: 12px;
	padding: 0 8px;
	font-size: 15px;
	color: var(--color-grey);
	z-index: 10;
	pointer-events: none;
	opacity: 0.5;
	border-radius: 6px;
	transition: all 0.4s;
}

.login-form>section .input:focus~span {
	opacity: 1;
	top: -10px;
	background-color: #FFF;
	font-size: 12px;
}

.login-form>section>i {
	position: absolute;
	top: 0;
	right: 16px;
	font-size: 24px;
	color: rgba(31, 38, 102, 0.25);
	line-height: 50px;
	z-index: 10;
	pointer-events: none;
	transition: all 0.4s;
}

.login-form>section .input:focus~i {
	font-size: 18px;
	color: var(--color-dark);
}

.login-form>section .input {
	width: 100%;
	height: 50px;
	padding-left: 20px;
	border-radius: 12px;
	border-color: var(--color-grey);
}

.login-form>section .input:focus {
	padding-top: 0;
}

.login-form>section .button {
	width: 100%;
	height: 50px;
	padding-left: 24px;
}

.login-form>section .button:hover {
	background: linear-gradient(-90deg, var(--color-dark), var(--color-dark));
}

.login-form>section label a {
	float: left;
	margin: -5px 0 5px 20px;
	position: relative;
	font-size: 15px;
	font-weight: 500;
}

.login-form>section label a:hover {
	text-decoration: underline;
}

.page-login-logo {
	float: left;
	width: 100%;
	text-align: center;
	overflow: hidden;
}

.page-login-logo picture,
.page-login-copyright small {
	position: relative;
	display: inline-block;
}

.page-login-logo picture img {
	float: left;
	height: 40px;
}

.page-login-copyright {
	float: left;
	width: 100%;
	color: var(--color-grey);
	text-align: center;
	overflow: hidden;
}

.page-login-copyright small::before,
.page-login-copyright small::after {
	content: "";
	position: absolute;
	top: calc(50%);
	left: -345px;
	width: 320px;
	height: 1px;
	background-color: rgba(31, 38, 102, 0.1);
}

.page-login-logo picture::after,
.page-login-copyright small::after {
	left: auto;
	right: -345px;
}

/*	Start LIGHTBOX	*/

.fancybox-content {
	width: 800px;
	max-width: 80%;
	max-height: 80%;
	margin: 0;
}

.my-fancy {
	display: none;
	padding: 30px !important;
	border-radius: 8px;
}

.my-fancy-wrap {
	width: 100%;
	max-width: 800px;
	max-height: 600px;
	overflow: hidden;
	overflow-y: auto;
}

.my-fancy-wrap::-webkit-scrollbar {
	width: 5px;
}

.my-fancy-wrap::-webkit-scrollbar-track {
	background: #EEEEEE;
}

.my-fancy-wrap::-webkit-scrollbar-thumb {
	background-color: #555;
}

.my-fancy-wrap {
	scrollbar-color: #FFF #EEEEEE;
	scrollbar-width: thin;
}

.fancy-title {
	float: left;
	width: 100%;
	padding: 0 20px;
	margin-bottom: 15px;
	position: relative;
	color: var(--color-dark);
	text-align: center;
}

.fancy-title::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background-color: rgba(31, 38, 102, 0.1);
}

.fancy-title strong {
	display: inline-block;
	padding: 0 15px;
	position: relative;
	font-weight: 700;
	letter-spacing: 1px;
	background-color: #FFF;
}

.fancy-text {
	float: left;
	width: 100%;
	font-size: 17px;
	line-height: 26px;
	text-align: center;
}

.fancy-form {
	float: left;
	width: 100%;
}

.fancy-form .item {
	float: left;
	width: 50%;
	padding: 0 10px;
	margin-bottom: 20px;
}

.fancy-form .item:last-child {
	margin-bottom: 0;
}

.fancy-form .item-2 {
	width: calc(50% - 10px);
}

.fancy-form .item-2 label {
	float: left;
	width: 100%;
	padding: 9px;
	border: 1px solid #999;
	border-radius: 4px;
	font-weight: 600;
}

.fancy-form .item a {
	font-weight: 600;
	text-decoration: underline;
}

.fancybox-content .function-links {
	width: 100%;
	margin-bottom: 0;
	display: flex;
	justify-content: center;
}

.fancybox-content .function-links li {
	margin: 0 5px;
}

.spacer {
	float: left;
	width: 100%;
	height: 1px;
	margin: 20px 0;
	background-color: rgba(31, 38, 102, 0.1);
}

/*	Start CONTACT	*/

.accordion {
	float: left;
	width: 100%;
}

.accordion-section {
	float: left;
	width: 100%;
}

.accordion-section-title {
	float: left;
	width: 100%;
	padding: 20px 35px 20px 20px;
	margin-bottom: 15px;
	position: relative;
	font-size: 17px;
	font-weight: 500;
	line-height: 24px;
	z-index: 10;
	border-radius: 16px;
}

.accordion-section-title:hover {
	color: var(--color-black);
}

.accordion-section-title.active {
	border-color: var(--color-purple) !important;
	color: var(--color-purple) !important;
}

.accordion-section-title::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 14px;
	width: 14px;
	background: url(../images/arrow-down.png) no-repeat center / 100% auto;
	transition: all 0.5s;
}

.accordion-section-title.active::after {
	transform: rotate(180deg);
}

.accordion-section-title section {
	float: left;
}

.accordion-section-content {
	float: left;
	width: 100%;
	padding-left: 20px;
	margin-bottom: 40px;
	position: relative;
	display: none;
}

.accordion-section-text {
	float: left;
	width: 100%;
	font-size: 15px;
	color: var(--color-grey);
	line-height: 30px;
}

.form-wrap {
	float: left;
	width: 100%;
	max-width: 1080px;
}

.form-invoice .form-wrap {
	max-width: initial;
}

.form-item {
	float: left;
	width: 50%;
	padding: 0 10px 19px 10px;
	position: relative;
	z-index: 10;
}

.form-item.fi-3 {
	width: 33.33334%;
}

.form-item:nth-last-child(-n+2):not(.w100),
.form-item:last-child {
	padding-bottom: 0;
}

.form-item-title {
	float: left;
	width: 100%;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
}

.form-item-title>em {
	font-size: 13px;
	font-weight: 400;
	color: var(--color-grey);
}

.form-item>label {
	float: left;
	width: 100%;
}

.form-item>section {
	float: left;
	width: 100%;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: -10px;
}

.form-item-info {
	float: left;
	width: 100%;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 500;
	color: #666;
}

.block-spacer {
	float: left;
	width: 100%;
	position: relative;
	text-align: center;
	overflow: hidden;
}

.block-spacer small {
	position: relative;
	display: inline-block;
	color: var(--color-grey);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.5px;
}

.block-spacer.copyright small {
	font-weight: 400;
}

.block-spacer small::before,
.block-spacer small::after {
	content: "";
	position: absolute;
	top: calc(50%);
	left: -1335px;
	width: 1320px;
	height: 1px;
	background-color: rgba(31, 38, 102, 0.1);
}

.block-spacer small::after {
	left: auto;
	right: -1335px;
}

.contact-info {
	float: left;
	width: 100%;
	position: relative;
}

.contact-info section {
	float: left;
	width: 100%;
	padding-left: 48px;
	padding-bottom: 25px;
	margin-bottom: 30px;
	position: relative;
	border-bottom: 1px solid rgba(31, 38, 102, 0.07);
}

.contact-info section:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.contact-info section picture {
	position: absolute;
	top: 0;
	left: 0;
}

.contact-info section picture i {
	float: left;
	font-size: 28px;
	color: var(--color-grey-light);
}

.contact-info section strong {
	float: left;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-grey);
	letter-spacing: 1px;
}

.contact-info section small {
	float: left;
	width: 100%;
	font-size: 17px;
	line-height: 30px;
}

.table-add-row {
	float: left;
	width: 100%;
	margin-top: 20px;
}

.row-cta {
	float: left;
}

.row-summary {
	float: right;
	width: 100%;
	max-width: 400px;
}

.row-summary>ul {
	width: 100%;
}

.row-summary>ul>li {
	width: 100%;
	padding: 5px 15px;
	margin-bottom: 2px;
	background-color: var(--color-light);
	border-radius: 6px;
}

.row-summary>ul>li:last-child {
	font-size: 17px;
	color: var(--color-red);
	line-height: 24px;
}

.row-summary>ul>li small {
	float: left;
}

.row-summary>ul>li strong {
	float: right;
}

.video-list {
	float: left;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.video-list ul {
	width: calc(100% + 30px);
	margin-left: -15px;
	display: flex;
	flex-flow: row wrap;
}

.video-list li {
	width: 33.33334%;
	padding: 0 15px;
	margin-bottom: 50px;
}

.video-list li a {
	float: left;
	width: 100%;
	height: 100%;
	position: relative;
	transition: all 0.5s;
	display: flex;
	flex-direction: column;
	flex: 1 1;
}

.video-list li a:hover {
	border-color: var(--color-dark);
}

.video-list li a picture {
	float: left;
	width: 100%;
	position: relative;
	aspect-ratio: 3/2;
	border-radius: 16px;
	overflow: hidden;
	background-color: #FFF;
}

.video-list li a picture::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: 1px solid rgba(31, 38, 102, 0.2);
	border-radius: 16px;
	transition: all 0.5s;
}

.video-list li a:hover picture::after {
	border-color: var(--color-purple);
}

.video-list li a picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	transition: all 1s;
}

.video-list li a:hover picture img {
	transform: scale(1.1, 1.1);
}

.video-list li a strong {
	float: left;
	width: 100%;
	padding: 17px 0 13px 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
}

.video-list li a section {
	float: left;
	width: 100%;
	margin-top: auto;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--color-grey);
	display: flex;
	align-items: center;
}

.video-list li a section small {
	float: left;
}

.video-list li a section small i {
	float: right;
	margin-left: 5px;
	font-size: 20px;
	transition: all 0.5s;
}

.video-list li a:hover section small i {
	color: var(--color-dark);
}

.video-list li a section small:last-child {
	float: right;
	margin-left: auto;
}

/*	Start CART ACTIONS	*/

.tab {
	float: left;
	width: 100%;
	padding-bottom: 20px;
}

.tab ul {
	width: 100%;
}

.tab li {
	padding-right: 15px;
}

.tab li:last-child {
	padding-right: 0;
}

.tab li a {
	float: left;
	width: 100%;
	padding: 0 20px;
	font-weight: 600;
	color: #007BFF;
	border: 1px solid #007BFF;
	background-color: #FFF;
	border-radius: 8px;
	position: relative;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.04);
}

.tab li a:hover {
	border-color: var(--color-black);
	color: var(--color-black);
}

.tab li a.selected {
	color: #FFF;
	background-color: #007BFF;
	border-color: #007BFF;
}

.tab li a.selected::before {
	content: "";
	border-top: 4px solid transparent;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	bottom: -5px;
	left: 50%;
	position: absolute;
	width: 0;
	margin-left: -10px;
	border-top-color: #007BFF;
}

.tab li a section {
	display: inline-block;
	padding: 11px 0 12px 0;
}

.tab li a section img {
	float: left;
	height: 20px;
	padding: 2px 0;
	margin-right: 7px;
}

.tab li a.selected section img {
	filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(220deg) brightness(1000%) contrast(100%);
}

.nav-opened {
	overflow: hidden;
}

.box {
	float: left;
	width: 100%;
	position: relative;
	background-color: #FFF;
	border-radius: 12px;
}

.box.shadow {
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.box.none {
	background-color: transparent;
}

.box-title {
	float: left;
	width: 100%;
	padding: 20px 25px;
	position: relative;
	color: var(--color-purple);
	box-shadow: inset 0 -1px 0 rgba(31, 38, 102, 0.08);
}

.box-title.flexed {
	display: flex;
	align-items: center;
}

.box-title.flexed .page-title-cta {
	margin-right: -8px;
}

.box-title strong {
	float: left;
	width: 100%;
	font-size: 18px;
	font-weight: 600;
}

.box-title.flexed strong {
	flex: 1;
	width: auto;
}

.box-title small {
	float: left;
	width: 100%;
	margin: 2px 0 -2px 0;
	color: var(--color-grey);
}

.box-content {
	float: left;
	width: 100%;
	padding: 24px;
	position: relative;
	box-shadow: inset 0 -1px 0 rgba(31, 38, 102, 0.08);
}

.box-content:last-child {
	box-shadow: none;
}

.function-box {
	float: left;
	width: 100%;
	position: relative;
}

.function-box-slim,
.cart-wrap-slim {
	margin-top: 0 !important;
}

.function-links {
	width: 100%;
	margin-bottom: -10px;
	position: relative;
}

.function-box .function-links {
	width: auto;
}

.function-links-centered {
	text-align: center;
}

.function-links ul {
	float: none;
	display: inline-block;
}

.function-links li {
	margin: 0 10px 10px 0;
}

.function-links li:last-child {
	margin-right: 0;
}

.function-links li a {
	float: left;
	height: 40px;
	padding: 0 8px 0 12px;
	font-weight: 600;
	border-radius: 12px;
	background-color: #FFF;
	display: flex;
	align-items: center;
}

.function-links li a:hover {
	background-color: var(--color-dark) !important;
	color: #FFF !important;
}

.function-links li a>span {
	float: left;
	padding: 0 7px;
}

.function-links li a>img {
	float: right;
	height: 38px;
	padding: 11px 0;
}

.function-links li a>i {
	float: right;
	margin-left: auto;
	font-size: 24px;
	text-align: center;
}

.function-search {
	width: 200px;
	position: relative;
}

.function-search .input {
	height: 40px;
	padding: 0 12px;
	line-height: 40px;
}

.function-search button {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 40px;
}

.function-search button:hover {
	background-size: 14px;
}

.function-search button i {
	float: left;
	width: 100%;
	font-size: 20px;
	line-height: 40px;
}

.function-search button:hover i {
	font-size: 22px;
}

.function-filter {
	float: left;
	margin-left: 20px;
}

.function-filter:first-child {
	margin-left: 0;
}

.function-filter>section {
	float: left;
	padding-right: 10px;
}

.function-filter.fixed>section {
	max-width: 140px;
}

.info-messages {
	float: left;
	width: 100%;
	margin-top: 25px;
	margin-bottom: -10px;
	position: relative;
	line-height: 40px;
}

.info-messages span {
	float: left;
	margin: 0 10px 10px 0;
}

.info-messages section {
	float: left;
	height: 40px;
	padding: 0 20px;
	margin: 0 10px 10px 0;
	font-weight: 600;
	line-height: 40px;
	border-radius: 20px;
}

.fs-13 {
	font-size: 13px;
}

.fs-15 {
	font-size: 15px;
	line-height: 120%;
}

.fs-20 {
	font-size: 20px;
	line-height: 120%;
}

.fs-24 {
	font-size: 24px;
	line-height: 120%;
}

.fs-32 {
	font-size: 32px;
	line-height: 120%;
}

.fs-40 {
	font-size: 40px;
	line-height: 120%;
}

.fw-500 {
	font-weight: 500;
}

.fw-600 {
	font-weight: 600;
}

.fw-700 {
	font-weight: 700;
}

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

.text-green {
	color: var(--color-green) !important;
}

.text-red {
	color: var(--color-red) !important;
}

.text-yellow {
	color: var(--color-yellow) !important;
}

.text-purple {
	color: var(--color-purple) !important;
}

.text-blue {
	color: var(--color-blue) !important;
}

.text-dark {
	color: var(--color-dark) !important;
}

.text-grey {
	color: var(--color-grey) !important;
}

.btn-green {
	background-color: var(--color-green) !important;
	color: #FFF !important;
}

.btn-red {
	background-color: var(--color-red) !important;
	color: #FFF !important;
}

.btn-orange {
	background-color: var(--color-orange) !important;
	color: #FFF !important;
}

.btn-yellow {
	background-color: var(--color-yellow) !important;
	color: #FFF !important;
}

.btn-blue {
	background-color: var(--color-blue) !important;
	color: #FFF !important;
}

.btn-dark {
	background-color: var(--color-dark) !important;
	color: #FFF !important;
}

.btn {
	height: 30px;
	display: inline-block;
	padding: 0 15px;
	position: relative;
	background-color: #BBB;
	font-size: 11px;
	font-weight: 600;
	color: #FFF;
	line-height: 30px;
	white-space: nowrap;
	border-radius: 15px;
	transition: all 0.2s;
}

.btn:hover {
	background-color: var(--color-dark) !important;
	color: #FFF !important;
}

.btn img {
	float: left;
	height: 30px;
	padding: 8px 0;
	margin-right: 7px;
	filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(220deg) brightness(1000%) contrast(100%);
}

.btn-small {
	padding: 0 8px;
}

.btn-small img {
	margin-right: 0;
}

.alert-wrap {
	float: left;
	width: 100%;
	color: var(--color-black);
}

.alert {
	float: left;
	width: 100%;
	padding: 14px 19px 14px 52px;
	margin-bottom: 15px;
	position: relative;
	background-color: #FFF;
	font-size: 15px;
	line-height: 24px;
	border: 1px solid var(--color-grey-light);
	border-radius: 12px;
}

.alert-wrap .alert:last-child {
	margin-bottom: 0;
}

.alert-icon {
	position: absolute;
	top: 12px;
	left: 12px;
	bottom: 9px;
	font-size: 28px;
	color: var(--color-grey-light);
}

.alert a {
	font-weight: 600;
	text-decoration: underline;
}

.alert a:hover {
	text-decoration: none;
}

.alert b,
.alert strong {
	font-weight: 600;
}

.alert-success {
	background-color: #ecf5ee;
	border-color: var(--color-green);
}

.alert-success .alert-icon {
	color: var(--color-green);
}

.alert-warning {
	background-color: #fffbef;
	border-color: var(--color-yellow);
}

.alert-warning .alert-icon {
	color: var(--color-yellow);
}

.alert-info {
	background-color: #f2f9fb;
	border-color: var(--color-blue);
}

.alert-info .alert-icon {
	color: var(--color-blue);
}

.alert-danger {
	background-color: #f9f1f2;
	border-color: var(--color-red);
}

.alert-danger .alert-icon {
	color: var(--color-red);
}

.alert p {
	margin-bottom: 20px;
}

.alert p:last-child {
	margin-bottom: 0;
}

.alert b,
.alert strong,
.alert h2,
.alert h3,
.alert h4,
.alert h5 {
	font-weight: 600;
}

.alert ul,
.alert ol {
	float: none;
	padding-bottom: 20px;
	display: flex;
	flex-flow: row wrap;
}

.alert ul:last-child,
.alert ol:last-child {
	padding-bottom: 0;
}

.alert ol {
	padding-left: 20px;
	padding-bottom: 20px;
	display: inline-block;
}

.alert ul li {
	width: 100%;
	padding-left: 20px;
	margin-bottom: 10px;
	position: relative;
}

.alert ul li:nth-child(even) {
	float: right;
	margin-left: auto;
}

.alert ul li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 8px;
	height: 8px;
	background-color: var(--color-black);
	border-radius: 50%;
}

.alert ol li {
	width: 100%;
	margin-bottom: 15px;
	display: list-item;
	list-style: decimal;
}

.alert ul li:last-child,
.article-content ol li:last-child {
	margin-bottom: 0;
}

.alert ol li::marker {
	font-weight: 700;
}

.alert .flexed {
	display: flex;
	align-items: center;
}

.alert .flexed .narrow {
	float: left;
	margin-right: 15px;
}

.alert .flexed .wide {
	float: left;
	flex: 1;
}

.upload {
	float: left;
	width: 100%;
	height: 44px;
	position: relative;
}

.upload section {
	float: left;
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--color-grey-light);
	font-weight: 500;
	line-height: 42px;
	background-color: #FFF;
	border-radius: 8px;
}

.upload:hover section {
	border-color: var(--color-green);
}

.upload section i {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 9px;
	font-size: 24px;
	line-height: 44px;
	opacity: 0.5;
}

.upload:hover section i {
	opacity: 1;
}

.upload input {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	opacity: 0 !important;
	overflow: hidden !important;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	cursor: pointer;
}

.search-filter-wrap {
	float: left;
	position: relative;
	display: flex;
	align-items: center;
}

.search-filter-wrap.end {
	align-items: end;
}

.search-filter {
	float: left;
	flex: 1;
	display: flex;
	align-items: center;
}

.search-filter-wrap.end .search-filter {
	align-items: end;
}

.search-filter section {
	float: left;
	padding-right: 15px;
	flex: 1;
	flex-basis: 10%;
}

.search-filter.f14 .input {
	font-size: 13px;
}

.search-filter-cta {
	float: right;
	margin-left: auto;
}

.add-sale-info {
	max-width: 480px;
	margin-bottom: 10px;
}

.add-sale-item {
	float: left;
	width: 100%;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}

.add-sale-item-title {
	float: left;
	width: 120px;
	font-weight: 600;
}

.add-sale-item-input {
	float: left;
	flex: 1;
}

.product-list {
	float: left;
	width: 100%;
	margin-top: 10px;
	position: relative;
}

.product-list>ul {
	width: calc(100% + 24px);
	margin-left: -12px;
	display: flex;
	flex-flow: row wrap;
}

.product-list>ul>li {
	width: 25%;
	padding: 0 12px;
	margin-bottom: 24px;
}

.product-item {
	float: left;
	width: 100%;
	height: 100%;
	padding: 19px;
	position: relative;
	background-color: #FFF;
	border: 1px solid var(--color-grey-light);
	border-radius: 16px;
	transition: all 0.5s;
	display: flex;
	flex-direction: column;
}

.product-item:hover {
	border-color: var(--color-purple);
}

.product-item picture {
	float: left;
	width: 100%;
	margin-bottom: 20px;
	position: relative;
	aspect-ratio: 3/2;
	overflow: hidden;
	background-color: var(--color-light);
	border-radius: 8px;
}

.product-item picture::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url(../images/logo-icon.png) no-repeat center / 44% auto;
	opacity: 0.3;
	filter: grayscale(100%);
}

.product-item picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: relative;
}

.product-item section {
	float: left;
	width: 100%;
	padding-bottom: 25px;
	position: relative;
}

.product-item section strong {
	float: left;
	width: 100%;
	margin-bottom: 10px;
	font-weight: 600;
}

.product-item section small {
	float: left;
	width: 100%;
	font-size: 13px;
	color: var(--color-grey);
}

.product-item-cta {
	float: left;
	width: 100%;
	margin-top: auto;
	position: relative;
}

.product-item-price {
	float: left;
	width: 100%;
	margin-top: -5px;
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 600;
}

.item-free .product-item-cta .button {
	pointer-events: none;
	opacity: 0.4;
	filter: grayscale(100%);
}

/*	Start PAGINATION	*/

.pages {
	float: left;
	width: 100%;
	position: relative;
	font-weight: 600;
	font-size: 13px;
	line-height: 44px;
	text-align: center;
	display: flex;
	justify-content: center;
}

.pages li {
	padding: 0 5px;
}

.pages li a {
	float: left;
	min-width: 44px;
	padding: 0 10px;
	font-weight: 600;
	color: #666;
	transition: all 0.5s;
	background-color: #FFF;
	border-radius: 12px;
}

.pages li a:hover {
	background-color: #FFF;
}

.pages li a.current {
	color: #FFF;
	background-color: var(--color-orange);
}

.cookies-wrap {
	position: fixed;
	right: 20px;
	bottom: 20px;
	left: 20px;
	z-index: 7950;
	text-align: center;
}

.cookies {
	float: left;
	width: 100%;
	padding: 24px 29px;
	position: relative;
	background-color: rgba(255, 255, 255, 0.94);
	color: #333;
	border-radius: 5px;
	border: 1px solid var(--color-black);
	box-shadow: 7px 7px 0 rgb(0 0 0 / 7%);
}

.cookies::before {
	content: "";
	position: absolute;
	right: 15px;
	top: 15px;
	left: 15px;
	bottom: 0;
	background: url(../images/icon-cookies.png) no-repeat 0 top / 60px auto;
	opacity: 0.1;
}

.cookies section {
	float: left;
	width: 100%;
	position: relative;
}

.cookies section strong {
	display: block;
	font-size: 15px;
}

.cookies section article {
	display: block;
}

.cookies section article a {
	font-weight: 600;
	text-decoration: underline;
}

.cookies-close {
	position: absolute;
	top: -17px;
	right: 10px;
	width: 32px;
	height: 32px;
}

.cookies-close span {
	float: left;
	width: 100%;
	height: 100%;
	position: relative;
	border-radius: 50%;
	text-indent: -9999px;
	background: #E51E2C url(../images/icon-close.png) no-repeat center / 10px;
	cursor: pointer;
	border: 2px solid #FFF;
}

.cookies-close span:hover {
	background-size: 12px;
	background-color: var(--color-black);
}

/*	DASHBOARD	*/

.quick-menu {
	float: left;
	width: 100%;
	position: relative;
}

.quick-menu ul {
	width: calc(100% + 24px);
	margin-left: -12px;
	display: flex;
	flex-flow: row wrap;
}

.quick-menu li {
	width: 20%;
	padding: 0 12px;
	margin-bottom: 24px;
}

.quick-menu.dual li {
	width: 50%;
}

.quick-menu li a {
	float: left;
	width: 100%;
	height: 100%;
	padding: 23px;
	position: relative;
	border: 1px solid rgba(0, 0, 0, 0.1);
	background-color: var(--color-orange);
	border-radius: 16px;
	transition: all 0.5s;
	color: #FFF;
}

.quick-menu li a:hover {
	background-color: var(--color-purple);
}

.quick-menu li a picture {
	float: left;
	text-align: center;
}

.quick-menu li a picture i {
	float: left;
	width: 40px;
	font-size: 28px;
	line-height: 40px;
	border-radius: 12px;
	background-color: #FFF;
	color: var(--color-orange);
	transition: all 0.5s;
}

.quick-menu li a:hover picture i {
	background-color: var(--color-dark);
	color: #FFF;
}

.quick-menu li a small {
	float: right;
	margin-left: auto;
	font-size: 20px;
	line-height: 40px;
	opacity: 0.5;
	transition: 0.5s;
}

.quick-menu li a:hover>small {
	opacity: 1;
}

.quick-menu li a strong {
	float: left;
	width: 100%;
	margin: 10px 0px 0px 0px;
	font-weight: 600;
	font-size: 15px;
}

.nav-icon,
.sidebar-icon {
	display: none;
}

.cursor-pointer {
	cursor: pointer;
}

.right-block {
	float: right;
	width: calc(100% - 240px);
	position: relative;
}

.btn-switch {
	width: 48px;
	height: 24px;
	padding: 2px;
	position: relative;
	background-color: #D0D4DA;
	border-radius: 8px;
	text-indent: -9999px;
}

.btn-switch::before {
	content: "";
	float: left;
	width: 20px;
	height: 20px;
	background-color: #FFF;
	border-radius: 50%;
	transition: all 0.4s;
}

.switch-on {
	background-color: #1CBB8C;
}

.switch-on::before {
	float: right !important;
}

.switch-btn-wrap small {
	float: left;
	margin-left: 10px;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
}

.switch-btn {
	float: left;
	width: 44px;
	height: 24px;
	position: relative;
}

.switch-btn input {
	opacity: 0;
	width: 0;
	height: 0;
}

.switch-btn-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #D0D4DA;
	transition: 0.4s;
	border-radius: 24px;
}

.switch-btn-slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 2px;
	bottom: 2px;
	background-color: #FFF;
	transition: 0.4s;
	border-radius: 50%;
}

input:checked+.switch-btn-slider {
	background-color: #1CBB8C;
}

input:checked+.switch-btn-slider:before {
	transform: translateX(20px);
}

.agreement-text {
	float: left;
	width: 100%;
}

.agreement-text-content {
	float: left;
	width: 100%;
	height: 144px;
	padding-right: 10px;
	line-height: 24px;
	overflow-y: auto;
}

.agreement-text-content::-webkit-scrollbar {
	width: 6px;
	border-radius: 6px;
}

.agreement-text-content::-webkit-scrollbar-track {
	background: #DDD;
	border-radius: 6px;
}

.agreement-text-content::-webkit-scrollbar-thumb {
	background-color: #555555;
	border: 2px solid #555555;
	border-radius: 6px;
}

.agreement-text-content {
	scrollbar-color: #555555 #555555;
	scrollbar-width: thin;
	border-radius: 6px;
}


.block-two {
	width: calc(50% - 15px);
}

.tal {
	text-align: left !important;
}

.tac {
	text-align: center !important;
}

.tar {
	text-align: right !important;
}


.splash-wrap {
	width: 390px;
	height: 100vh;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

.splash {
	float: left;
	width: 390px;
	height: 844px;
	background-color: #FFF;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.splash-top {
	float: left;
	width: 100%;
	margin: auto 0;
}

.splash-top img {
	height: 40px;
	display: inline-block;
}

.splash-bottom {
	float: left;
	width: 100%;
}

.splash-bottom img {
	float: left;
	width: 100%;
}

.purchase-filter-wrap {
	float: left;
	width: 100%;
}

.purchase-filter {
	float: left;
	width: calc(100% + 20px);
	margin-left: -10px;
	position: relative;
	display: flex;
	flex-flow: row wrap;
}

.purchase-filter-item {
	float: left;
	width: 33.33334%;
	padding: 0 10px;
	margin-bottom: 20px;
}

.purchase-filter-item article {
	float: left;
	width: 100%;
	padding-bottom: 5px;
	font-weight: 600;
	color: var(--color-dark);
}

.purchase-filter-item section {
	float: left;
	width: 100%;
	position: relative;
}

.purchase-filter-item section .input {
	font-size: 13px;
}

.bank-info {
	float: left;
	width: 100%;
	margin-top: 30px;
	position: relative;
}

.bank-info>ul {
	width: calc(100% + 60px);
	margin-left: -30px;
	display: flex;
	flex-flow: row wrap;
}

.bank-info>ul>li {
	width: 50%;
	padding: 0 30px;
	margin-bottom: 40px;
}

.bank-info-item {
	float: left;
	width: 100%;
	display: flex;
	align-items: start;
}

.bank-info-item picture {
	float: left;
	width: 140px;
	padding: 4px;
	border: 1px solid var(--color-grey-light);
	border-radius: 12px;
	background-color: #FFF;
}

.bank-info-item picture img {
	float: left;
	width: 100%;
}

.bank-info-item section {
	float: left;
	flex: 1;
	padding-left: 30px;
}

.bank-info-item section article {
	float: left;
	width: 100%;
	padding-top: 8px;
	font-size: 15px;
	line-height: 24px;
}

.installment label {
	float: left;
	width: 100%;
	position: relative;
}

.installment label:last-child {
	margin-bottom: 0;
}

.installment label section {
	float: left;
	width: 100%;
	height: 80px;
	padding-left: 42px;
	padding-right: 9px;
	position: relative;
	border: 1px solid var(--color-grey-light);
	background-color: #FFF;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 16px;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

.installment label section::before {
	content: "";
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: 42px;
	width: 1px;
	background-color: rgba(31, 38, 102, 0.15);
}

.installment label input {
	position: absolute;
	left: 14px;
	top: calc(50% - 10px);
	z-index: 10;
}

.installment label input[type="radio"]:checked+section {
	color: var(--color-green);
	border-color: var(--color-green);
	background-color: #DBF5F4;
}

.link-collection {
	float: left;
	width: 100%;
	margin-top: 30px;
	margin-bottom: 20px;
	position: relative;
	display: none;
}

.link-collection section {
	float: left;
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
}

.link-collection section .icon {
	float: left;
	font-size: 80px;
	color: var(--color-green);
}

.link-share {
	text-decoration: underline;
	word-break: break-word;
	white-space: normal;
	overflow-wrap: break-word;
}

.link-collection {
	display: none;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.link-collection.show {
	display: block;
	opacity: 1;
}

.form-item.fi-4 {
	width: 25%;
}


@media only screen and (max-width:1640px) {

	.dashboard-body {
		padding-left: 320px;
		padding-right: 50px;
	}

	.header-account-content ul {
		padding: 10px;
	}

	.header-account-content li a {
		padding: 8px 12px;
	}

	.header-date {
		left: 320px;
	}

	.box-title {
		padding: 15px 20px;
	}

	.box-content {
		padding: 20px;
	}

	.product-list>ul>li {
		width: 33.33334%;
	}

	.page-login .page-text {
		margin-bottom: 24px;
	}

}


@media only screen and (max-width:1320px) {

	.dashboard-body {
		padding: 0 40px 30px 290px;
	}

	.dashboard-body::before {
		width: 15px;
	}

	.dashboard-body::after {
		right: 15px;
		width: 12px;
		height: 12px;
	}

	.logo {
		left: 24px;
		width: 212px;
	}

	.header::after {
		left: 260px;
		width: 12px;
		height: 12px;
	}

	.header-right {
		width: calc(100% - 275px);
		margin-right: 15px;
		border-radius: 12px;
	}

	.header-menu-wrap {
		width: 260px;
		border-radius: 14px 0 0 0;
	}

	.header-menu>ul {
		padding-left: 24px;
	}

	.header-date {
		left: 290px;
	}

	.copyright {
		position: fixed;
		left: 24px;
		bottom: 18px;
	}

	.header-mobile {
		display: block;
	}

	.header-notify-content {
		width: 320px;
	}

	.stat-item {
		padding: 19px;
	}

	.stat-item section {
		padding: 10px 0 19px 0;
	}

	.stat-item article {
		padding-top: 10px;
	}

	.table-responsive table,
	input,
	textarea,
	select {
		font-size: 13px;
	}

	.status {
		min-width: 26px;
		font-size: 12px;
	}

	.table-responsive table td,
	.table-responsive table th {
		padding: 10px;
	}

	.box.slim {
		padding: 10px;
	}

	.welcome-box-item {
		width: 100%;
	}

	.bank-info>ul>li {
		width: 100%;
	}

	.bank-info-item section {
		padding-left: 20px;
	}

	.fixed-col {
		position: sticky;
		left: 0;
		z-index: 10;
		background-color: #FFF;
	}

	.table-operation table tr:nth-child(even) td.fixed-col {
		background-color: var(--color-light);
	}
	
	.function-filter {
		width: 100%;
		padding-bottom: 3px;
		margin-left: 0;
		margin-bottom: 17px;
		white-space: nowrap;
		overflow: hidden;
		overflow-x: auto;
	}

	.function-filter:last-child {
		margin-bottom: -3px;
	}

	.function-filter>section {
		float: none;
		display: inline-block;
	}

	.function-filter>section:last-child {
		padding-right: 0;
	}
	
	.function-search {
		width: 100%;
		margin-bottom: 20px;
	}

	.function-search:last-child {
		margin-bottom: 0;
	}

	.function-links {
		float: left !important;
		width: 100% !important;
		height: 50px;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
	}

	.function-links ul {
		float: none;
		display: block;
	}

	.function-links li {
		float: none;
		display: inline-block;
		margin: 0 8px 0 0;
	}

	.function-links ul:has(> li:only-child)>li,
	.function-links ul:has(> li:only-child)>li a {
		width: 100%;
	}

	.search-filter section {
		flex-basis: 33.33334%;
	}

}


@media only screen and (max-width:1200px) {

	.pro-stats>ul>li {
		width: 50%;
	}

	.stat-item section span {
		font-size: 12px;
	}

	.quick-menu li {
		width: 33.33334%;
	}

	.block-two {
		width: 100%;
	}

	.block-two.fr {
		margin-top: 30px;
	}

	.search-filter-wrap {
		display: block;
	}

	.search-filter {
		width: calc(100% + 10px);
		flex-flow: row wrap;
	}

	.search-filter section {
		float: left;
		padding-right: 10px;
		padding-bottom: 10px;
	}

	.search-filter-cta {
		width: 100%;
	}

	.video-list li {
		width: 50%;
	}

	.installment label section {
		padding-left: 32px;
	}

	.installment label input {
		left: 10px;
	}

	.installment label section::before {
		display: none;
	}

	.dashboard-body *::-webkit-scrollbar {
		display: none;
	}

	.dashboard-body * {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.dashboard-body {
		min-height: calc(100vh - 70px);
		padding: 0px 25px 30px 25px;
		border-radius: 8px 8px 0 0;
		background-color: var(--color-light);
	}

	.dashboard-body::before,
	.dashboard-body::after,
	.header::after,
	.logo::after {
		display: none;
	}

	.header {
		background-color: #FFF;
	}

	.header::before {
		height: auto;
		left: 0;
		bottom: 0;
		box-shadow: 0 0 15px rgba(31, 38, 102, 0.05);
	}

	.header-spacer.copyright,
	.header-date,
	.tooltip-text {
		display: none;
	}

	.logo {
		float: left;
		width: auto;
		padding-bottom: 0;
		position: relative;
		top: auto;
		left: auto;
	}

	.logo a {
		padding: 15px 0;
	}

	.header-right {
		width: auto;
		margin-top: 5px;
		margin-right: 5px;
		background-color: transparent;
	}

	.menu-trigger-active::before {
		opacity: 1;
	}

	.header-account-icon picture {
		background-color: var(--color-light);
	}

	.header-account-content li a {
		padding: 10px 15px;
		font-size: 15px;
	}

	.header-box {
		border-color: var(--color-black);
	}

	.header-box::before {
		border-bottom-color: var(--color-black);
	}

	.header-notify-icon {
		color: var(--color-purple);
	}

	.header-notify-icon.new small {
		border-color: #FFF;
		background-color: var(--color-orange);
	}

	.header-account-icon section::after {
		background-image: url(../images/arrow-down.png);
	}

	.header-account-icon small {
		color: var(--color-purple);
	}

	.nav-icon {
		float: left;
		width: 64px;
		height: 70px;
		margin-left: 6px;
		position: relative;
		cursor: pointer;
		display: block;
		text-indent: -9999px;
		z-index: 1200;
	}

	.nav-icon span {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 32px;
		height: 2px;
		margin: -1px 0 0 -16px;
		transition: all 0.5s;
	}

	.nav-icon span::before {
		content: "";
		position: absolute;
		top: -6px;
		left: 0;
		right: 0;
		height: 2px;
		background-color: var(--color-dark);
		transition: all 0.5s;
	}

	.nav-icon span::after {
		content: "";
		position: absolute;
		bottom: -6px;
		left: 0;
		right: 6px;
		height: 2px;
		background-color: var(--color-dark);
		transition: all 0.5s;
	}

	.nav-icon-close span {
		background-color: transparent;
	}

	.nav-icon-close span::before {
		-webkit-transform: rotate(-135deg);
		-moz-transform: rotate(-135deg);
		-o-transform: rotate(-135deg);
		-ms-transform: rotate(-135deg);
		transform: rotate(-135deg);
		top: 0;
		background-color: var(--color-grey-light);
	}

	.nav-icon-close span::after {
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		-o-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		transform: rotate(135deg);
		bottom: 0;
		right: 0;
		background-color: var(--color-grey-light);
	}

	.nav-icon-close::before {
		content: "";
		border-bottom: 4px solid transparent;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		height: 0;
		position: absolute;
		width: 0;
		left: 50%;
		bottom: 0;
		margin-left: -10px;
		border-bottom-color: var(--color-light);
	}

	.header-menu-wrap {
		position: fixed;
		top: 70px;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: calc(100vh - 70px);
		padding: 25px 0 105px 0;
		display: none;
		background-color: var(--color-light);
		z-index: 8870;
		overflow: hidden;
		overflow-y: auto;
		border-radius: 0;
	}

	.header-menu-scroll {
		height: auto;
		overflow: auto;
	}

	.header-menu>ul {
		padding-left: 25px;
		padding-right: 25px;
	}

	.header-menu>ul>li.nav-multi::before {
		content: "";
		position: absolute;
		top: 0;
		right: 15px;
		width: 12px;
		height: 48px;
		background: url(../images/arrow-down.png) no-repeat center / 100% auto;
		z-index: 10;
		pointer-events: none;
	}

	.header-menu>ul>li>a {
		width: 100%;
		padding: 4px;
		font-size: 17px;
	}

	.header-menu-sub {
		float: left;
		width: 100%;
		margin-top: 7px;
		margin-bottom: 15px;
		position: relative;
		top: auto;
		left: auto;
		font-size: 15px;
	}

	.header-menu-sub::before {
		border-bottom: 4px solid transparent;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 0;
		top: -4px;
		left: 24px;
		border-bottom-color: #FFF;
	}

	.header-menu-sub a {
		font-size: 15px;
	}

	.copyright {
		display: none;
	}

	.welcome-hero {
		margin-bottom: 20px;
	}

	.stat-item {
		margin: 0 !important;
	}

	.table-responsive {
		overflow: hidden;
		overflow-x: auto;
	}

	.table-flat {
		overflow: visible !important;
	}

	.table-responsive table td,
	.table-responsive table th {
		white-space: nowrap;
	}

	.table-operation table td,
	.table-flat table td,
	.table-flat table th {
		white-space: normal;
	}

	.border-top {
		box-shadow: none;
	}

	.function-search {
		width: 100%;
		margin-bottom: 20px;
	}

	.function-search:last-child {
		margin-bottom: 0;
	}

	.function-links {
		float: left !important;
		width: 100% !important;
		height: 50px;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
	}

	.function-links ul {
		float: none;
		display: block;
	}

	.function-links li {
		float: none;
		display: inline-block;
		margin: 0 8px 0 0;
	}

	.function-links ul:has(> li:only-child)>li,
	.function-links ul:has(> li:only-child)>li a {
		width: 100%;
	}

	.search-filter section {
		flex-basis: 33.33334%;
	}

	.pro-stats>ul,
	.quick-menu ul {
		width: calc(100% + 20px);
		margin-left: -10px;
	}

	.pro-stats>ul>li,
	.quick-menu li {
		padding: 0 10px;
		margin-bottom: 15px;
	}

	.page-title-wrap.in {
		margin-top: -25px;
	}

	.page-title-input-wrap {
		width: 100%;
	}

	.box.slim {
		padding: 2px;
	}

	.page-title-back {
		float: left;
		display: block;
		margin-right: 18px;
	}

	.page-title-back a {
		float: left;
		text-align: center;
	}

	.page-title-back a i {
		float: left;
		width: 32px;
		font-size: 24px;
		line-height: 32px;
		background-color: #FFF;
		border-radius: 8px;
	}

	.function-filter {
		width: 100%;
		padding-bottom: 3px;
		margin-left: 0;
		margin-bottom: 17px;
		white-space: nowrap;
		overflow: hidden;
		overflow-x: auto;
	}

	.function-filter:last-child {
		margin-bottom: -3px;
	}

	.function-filter>section {
		float: none;
		display: inline-block;
	}

	.function-filter>section:last-child {
		padding-right: 0;
	}

	.page-title {
		padding: 4px 0 4px 18px;
		line-height: 24px;
	}

	.page-title::before {
		width: 3px;
		border-radius: 5px;
	}

	.function-filter.fixed>section {
		max-width: initial;
	}

}





@media only screen and (max-width:1023px) {

	.page-login-out {
		height: auto;
		min-height: 100vh;
	}

	.page-login-wrap {
		height: auto;
		padding-bottom: 40px;
	}

	.page-login-sidebar,
	.page-login-support {
		float: left;
		width: 100%;
		position: static;
		background: none !important;
	}

	.page-login-support {
		padding: 30px;
	}

	.page-login-support em,
	.page-login-support a {
		display: none;
	}

	.page-login-support small {
		width: 100%;
		font-size: 13px;
		text-align: center;
		color: var(--color-grey);
	}

	.product-list>ul>li {
		width: 50%;
	}

}


@media only screen and (max-width:767px) {

	.header-notify {
		margin: 0 10px;
	}

	.header-account-icon small,
	.header-account-icon section::after,
	.page-title::after {
		display: none;
	}

	.quick-menu li {
		width: 100%;
	}

	.quick-menu li a {
		padding:13px;
	}
	
	.quick-menu li a strong {
		font-size: 15px;
		margin: 0px 0px 0px 14px;
		width: 70%;
	}

	.form-item-title {
		font-size: 14px;
	}

	.page-title-wrap {
		display: block;
	}

	.page-title-wrap.in {
		display: flex;
	}

	.page-title-cta {
		width: 100%;
		padding-left: 0;
		margin-top: 16px;
	}

	.page-title-input-wrap {
		width: calc(100% + 10px);
		margin-left: -5px;
		display: flex;
	}

	.page-title-input-wrap .page-title-input {
		flex: 1;
		flex-basis: calc(33.33334% - 10px);
		margin: 0 5px !important;
	}

	.box-title.flexed {
		display: block;
	}

	.box-title.flexed strong {
		width: 100%;
	}

	.box-title.flexed .page-title-cta {
		margin-right: 0;
		margin-top: 12px;
	}

	.hide-mobile {
		display: none;
	}

	.btn-back {
		display: block;
		position: fixed;
		z-index: 9900;
		left: 0;
		top: calc(50% + 15px);
		text-align: center;
		color: #FFF;
		background-color: var(--color-pink);
		border-radius: 0 8px 8px 0;
	}

	.btn-back i {
		float: left;
		width: 40px;
		font-size: 24px;
		line-height: 40px;
	}

	.welcome-hero-right {
		float: left;
		width: 100%;
		display: flex;
	}

	.welcome-hero-right section {
		flex: 1;
		flex-basis: calc(50% - 60px);
	}

	.welcome-hero-right section:last-child {
		flex-basis: 120px;
	}

	.welcome-hero-right section .page-title-input,
	.welcome-hero-right section .button {
		width: 100% !important;
	}

}



@media only screen and (max-width:640px) {

	.form-item,
	.form-item.fi-3,
	.row-cta,
	.video-list li,
	.form-item .button {
		width: 100%;
	}

	.row-summary {
		max-width: initial;
		margin-top: 20px;
	}

	.page-login-wrap {
		float: left;
		max-width: initial;
	}

	.my-fancy {
		padding: 25px !important;
	}

	.purchase-filter-item,
	.form-item.fi-4 {
		width: 50%;
	}

	.search-filter section {
		padding-bottom: 20px;
	}

	.form-item:nth-last-child(2) {
		padding-bottom: 19px !important;
	}

	.page-login-wrap .in {
		padding: 32px;
		border: 0;
	}

}



@media only screen and (max-width:540px) {

	.logo {
		/* margin-left: 4px; */
		position: absolute;
		margin-left: calc(50% - 75px);
	}

	.logo a img {
		padding: 4px 0;
	}

	.header-account,
	.header-notify,
	.header-support {
		position: static;
	}

	.header-notify {
		margin: 0 10px 0 5px;
	}

	.header-box {
		top: 56px;
		right: 10px !important;
		width: calc(100vw - 30px) !important;
	}

	.header-box::before,
	.header-box::after {
		right: 9px;
	}

	.header-notify-content::before,
	.header-notify-content::after {
		right: 59px;
	}

	.header-support .header-box::before,
	.header-support .header-box::after {
		right: 104px;
	}

	.welcome-hero-left section,
	.welcome-hero-left::after {
		margin-right: 12px;
	}

	.pro-stats>ul>li {
		width: 100%;
	}

	.payment-line>section,
	.payment-line>article {
		display: block;
	}

	.payment-line>section span,
	.payment-line>article span,
	.payment-line>section small,
	.payment-line>article small,
	.product-list>ul>li,
	.purchase-filter-item {
		width: 100%;
	}

	.search-filter section {
		flex-basis: 50%;
	}

	.bank-info-item {
		display: block;
	}

	.bank-info-item section {
		width: 100%;
		padding-left: 0;
		padding-top: 15px;
	}

	.purchase-filter-item:last-child {
		margin-bottom: 0;
	}

	.welcome-hero-right {
		display: block;
	}

	.welcome-hero-right section {
		width: calc(50% - 8px);
		margin-right: 0;
	}

	.welcome-hero-right section:nth-child(2) {
		float: right;
	}

	.welcome-hero-right section:last-child {
		width: 100%;
		margin-top: 16px;
	}

}



@media only screen and (max-width:440px) {

	.product-list {
		margin-top: 0;
	}

}



@media only screen and (max-width:374px) {

	.logo a {
		padding: 13px 3px;
	}

	.logo a img {
		display: none;
	}

	.logo a img.logo-mobile {
		height: 44px;
		padding: 2px 0;
		display: block !important;
	}

}

@media only screen and (max-width: 430px) {

	.from-app .dashboard-body {
		padding-top: 150px;
	}

	.from-app .header-menu-wrap {
		top: 127px;
		height: calc(100vh - 127px);
	}

}


@media (min-width: 391px) and (max-width: 393px) {}


@media only screen and (max-width:390px) {

	.from-app .dashboard-body {
		padding-top: 140px;
	}

	.from-app .header-menu-wrap {
		top: 117px;
		height: calc(100vh - 117px);
	}

}

.header-menu-wrap {
	top: calc(69px + env(safe-area-inset-top));
	height: calc(100vh - (69px + env(safe-area-inset-top)));
}

.dashboard-body {
	margin-top: calc(72px + env(safe-area-inset-top));
}