@charset "UTF-8";

*{
/*direction: rtl;*/
/*text-align:right;*/
/*font-family: 'ui-r' !important;*/
/*font-size: 12px;*/
}

/*------------------------------------------------------------------------------
basic and reset
------------------------------------------------------------------------------*/
:root {
	--color-text:rgb(0, 26, 63);
	--color-textSelected:rgb(5, 43, 97);
	--color-textLight: rgb(71, 97, 133);
	--color-textDisabled: rgb(97, 114, 140);
	--color-input-bg:rgb(236, 241, 249);
	--color-inputDisabled-bg:rgb(244, 248, 255);
	--color-highlight: rgb(234, 237, 246);
	--color-primary: #6232f9;
	--color-secondary: #9170ff;
	--color-secondaryAlpha: #9170ff0a;
	--color-success: rgb(52, 178, 136); /*#5bbc8f*/
	--color-successLight: rgba(52, 178, 136,0.5); /*#5bbc8f59*/
	--color-successAlpha: rgba(52, 178, 136,0.5); /*#5bbc8f59*/
	--color-successDark: #006644; /*#5bbc8f59*/
	--color-danger: rgb(235, 71, 99); /*#ff5656*/
	--color-dangerLight: rgba(235, 71, 99, 0.5); /*#ff565659*/
	--color-dangerAlpha: rgba(235, 71, 99, 0.5); /*#ff565659*/
	--color-dangerDark: #8f2436; /*#ff565659*/
	--color-warning: #f7af3e;
	--color-warningLight: #f7af3e59;
	--color-info: #5d9cec;
	--color-infoLight: #5d9cec59;
	--color-infoDark: #4988d8;
	--color-link:#039be5;
	--color-linkHover:#FF9800;
	--color-gold: #f7af3e;
	--color-white: #fff;
	--color-whiteAlpha: rgba(255,255,255,0.5);
	--color-black: #000;
	--color-gray: #a9a9af;
	--color-grayLight: #eaedf6;
	--color-dark: gray;
	--color-light: rgb(234, 237, 246);
	--color-lightAlpha: rgba(234, 237, 246, 0.5)  ;	
	--radius:4px;

	--footer-height: 52px;
}

@media screen and (min-width:768px) {
	::-webkit-scrollbar {width: 4px;height:4px;}
	::-webkit-scrollbar-track {background: #f1f1f1; margin: 5px 0px 5px 0px; border-radius: 10px;}
	::-webkit-scrollbar-thumb {background: var(--color-gray); border-radius: 10px;}
	::-webkit-scrollbar-thumb:hover {background: var(--color-dark); }
}
/*
@media screen and (max-width:767px) {
	::-webkit-scrollbar {
		all:unset !important;
		width: 2px !important;
		height: 2px !important;
	}
}
*/

* {
	-webkit-tap-highlight-color: transparent;
	/*-webkit-touch-callout: none;*/ /* iOS Safari error */
	/*-webkit-user-select: none;*/ /* Safari error */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

@media screen and (max-width:768px) {
	.scrollBar-hide-auto::-webkit-scrollbar {width: 0px;height:0px;}
}

*:focus {
	outline: none !important;
	box-shadow:none;
}

html {
	font-size:14px;
	color:var(--color-text);
}
@media screen and (max-width:767px) {
	html {font-size: 13px;}
}

html, body, form, fieldset, table, tr, td, img, div {
	font-family: 'ui-r' !important;
}

input, button, select, textarea, optgroup, option {
font-family: inherit !important;
font-size: inherit !important;
font-style: inherit !important;
font-weight: inherit !important;
}

html,body {
	direction: rtl;
	overflow-x: hidden;
	background-color: #6232f9;
}

a {
	text-decoration: none !important;
}
a:hover {
	color:#FF9800;
}
a:disabled {
	opacity: 0.5;
	color: var(--color-black);
}

p {
	line-height: 1.5;
	padding: 5px 0px;
}

b, strong {
	font-weight: bolder !important;
}

hr {
	margin: 0;
	border: none;
	border-top: 1px solid var(--color-grayLight);
}
.hr-soft {
	border:0;
	width:100%;
	margin:8px 0px;
	height:1px;
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(136,136,136,0.5) 50%, rgba(0,0,0,0) 100%);
}
.hr-dashed {
	margin: 10px 0;
	border: none;
	border-top: 1px dashed var(--color-gray);
	opacity: 0.6;
}
@media screen and (max-width:768px) {
	.hr-soft{
		margin:8px 0px 14px 0px;;
	}
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
-webkit-box-shadow: 0 0 0 30px white inset !important;
}

.user-select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.fontFarsi {
	font-family:"vazir-farsi" !important;
}

.link {
text-decoration: underline;
cursor: pointer;	
}

.link-i {
text-decoration: underline !important;
cursor: pointer !important;	
}

.header-title {
	font-size:1.2rem;
	font-weight:bold;
	margin: 5px 0 10px 0;
}
.header-title i {
	font-size:1.2rem;
}

div [onclick] {
	cursor: pointer;
}

input[type="text"],
input[type="password"],
textarea,
button,
.btn {
	border-radius: var(--radius);
}

.btn {
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: space-around;
	line-height: 1.3;
}
.btn:disabled {
	background-color: var(--color-light) !important;
	opacity:0.5 !important;
}
.btn.btn-small {
	font-size: 0.9rem !important;
	width:auto !important;
}
.btn i {
	margin:0px 5px;
	font-size: 1.2rem;
}
.btn.btn-small i {
	font-size: 0.9rem !important;
}
.btn.btn-block {
	display: block !important;
	width: 100%;
	margin: 0px 5px
}
.btn.btn-outline {
	border:1px solid var(--color-black);
	background-color: transparent !important;
	color:var(--color-black);
}
.btn.btn-outline:disabled {
	border:1px solid var(--color-grayLight) !important;
	color:var(--color-grayLight) !important;
}

/*btn link*/
.btn.btn-link {
	color:var(--color-link);
	background-color:transparent !important;
	text-decoration: none !important;
	cursor:pointer;
	box-shadow:none;
	text-shadow:none;
}
.btn.btn-link:hover {
	color:var(--color-linkHover);
	box-shadow:none;
	text-shadow:none;	
}
.btn.btn-link:disabled {
	opacity: 0.8;
	color: var(--color-dark);
	cursor:normal;
}

/*btn primary*/
.btn.btn-primary{
	background-color: var(--color-primary);
	color: var(--color-white);
}
.btn.btn-primary.btn-outline {
	border-color:var(--color-primary);
	background-color: var(--color-white);
	color: var(--color-primary) !important;
}
.btn.btn-primary.btn-border {
	border-color:var(--color-primary);
	background-color: var(--color-white);
	color: #666;
}

/*btn secondary*/
.btn.btn-secondary{
	background-color: var(--color-secondary);
	color: var(--color-white);
}
.btn.btn-secondary.btn-outline {
	border-color:var(--color-secondary);
	background-color: var(--color-white) !important;
	color: var(--color-secondary) !important;
}

.btn.btn-success {
	background-color: var(--color-success);
	color: var(--color-white);
}
.btn.btn-success.btn-outline {
	border-color:var(--color-success);
	background-color: var(--color-white) !important;
	color: var(--color-success) !important;
}

.btn.btn-info {
	background-color: var(--color-info);
	color: var(--color-white);
}
.btn.btn-info.btn-outline {
	border-color:var(--color-info);
	background-color: var(--color-white) !important;
	color: var(--color-info) !important;
}

.btn.btn-danger {
	background-color: var(--color-danger);
	color: var(--color-white);
}
.btn.btn-danger.btn-outline {
	border-color:var(--color-danger);
	background-color: var(--color-white) !important;
	color: var(--color-danger) !important;
}
@media screen and (max-width:768px) {
	.btn {
		justify-content: center;
	}
}

/*------------------------------------------------------------------------------
row
------------------------------------------------------------------------------*/
.row {
	margin-bottom:5px !important;
}
.row .col:first-child {
	padding-right: 0px;
}
.row .col:last-child {
	padding-left: 0px;
}
@media screen and (max-width:767px) {
	.row .col {
		padding:0px !important;
	}
	.row .col:first-child,
	.row .col:last-child {
		/*padding: 0.75rem 0.75rem !important;*/
		/*padding:0 0.4rem;*/
	}
}

/*------------------------------------------------------------------------------
border-auto
------------------------------------------------------------------------------*/
@media screen and (max-width:768px) {
	.bordered-auto {
		padding:10px;
		border:1px solid var(--color-grayLight);
		border-radius:3px;
	}
}

/*------------------------------------------------------------------------------
hide and show and ...
------------------------------------------------------------------------------*/
.hide {display:none}
.hide-i {display:none !important}
@media screen and (min-width:769px) {
	.show-auto, .d-block-auto {display:none;}
	.show-auto-i, .d-block-auto-i {display:none !important;}
	.d-inline-block-auto {display: none;}
	.d-inline-block-auto-i {display: none !important;}		
	.show-flex-auto {display:none;}
	.show-flex-auto-i {display:none !important;}	
}
@media screen and (max-width:768px) {
	.hide-auto {display: none !important;}
	/*.show-auto, .show-auto-i {display:inline-block !important;}*/
	.d-block-auto {display: block !important;}
	.d-block-auto-i {display: block !important;}
	.d-inline-block-auto {display: inline-block !important;}
	.d-inline-block-auto-i {display: inline-block !important;}	
	.show-flex-auto {display: flex;}	
	.show-flex-auto-i {display: flex !important;}	
}

/*---------------------------------------------------------------
   tabs-custom
---------------------------------------------------------------*/
.tabs-custom { 
	display: flex;
	align-items: center;
}
.tabs-custom button {
	border: 1px solid var(--color-primary);
	background-color: var(--color-white);
	color: var(--color-primary);
	border-radius: 25px;
	margin-left: 5px;
	padding: 5px 10px;
	min-width: 64px;
	transition: all 0.3s;
	white-space: nowrap;
}
.tabs-custom button:hover {
	background-color: var(--color-secondary);
	color:var(--color-white) !important;
}
.tabs-custom button.active {
	background-color: var(--color-primary);
	color:var(--color-white);
}

/*---------------------------------------------------------------
   .tabs-custom.tabs-custom-color2
---------------------------------------------------------------*/
.tabs-custom.tabs-custom-color2 {
	padding:10px 0;
}
.tabs-custom.tabs-custom-color2.bordered {
	border-bottom: 1px solid var(--color-light);
}
.tabs-custom.tabs-custom-color2 button {
	background-color: var(--color-grayLight);
	color: var(--color-dark);
	border-radius: 10px;
	border: none;
	min-width:unset;
}
.tabs-custom.tabs-custom-color2 button:hover {
	color: var(--color-secondary) !important;
}
.tabs-custom.tabs-custom-color2 button.active {
	background-color: var(--color-secondary);
	color: var(--color-white) !important;
}

/*---------------------------------------------------------------
   tabs-custom-coinSupport-category
---------------------------------------------------------------*/
.tabs-custom.coinSupport-category {
	padding:10px 0;
}
.tabs-custom.coinSupport-category button {
	background-color: var(--color-grayLight);
	color: var(--color-dark);
	border-radius: 10px;
	border: none;
	min-width:unset;
}
.tabs-custom.coinSupport-category button:hover {
	color: var(--color-secondary) !important;
}
.tabs-custom.coinSupport-category button.active {
	background-color: var(--color-secondary);
	color: var(--color-white) !important;
}

/*---------------------------------------------------------------
   tabs-custom-coinSupport
---------------------------------------------------------------*/
.tabs-custom.tabs-custom-coinSupport {
	margin-top:10px;
}
.tabs-custom.tabs-custom-coinSupport button {
	margin: 0 !important;
	border:none;
	border-bottom: none !important;
	border-top:1px solid #ddd !important;
	border-right:1px solid #ddd !important;
	border-radius: 0;
	box-shadow: none !important;
	color:var(--color-text);
	padding: 0 10px;
    min-width: unset;
}
.tabs-custom.tabs-custom-coinSupport button:first-child {
	border-right: 1px solid #ddd;
	border-radius: 0 10px 0 0;
}
.tabs-custom.tabs-custom-coinSupport button:last-child {
	border-left: 1px solid #ddd;
	border-radius: 10px 0 0 0;
}
.tabs-custom.tabs-custom-coinSupport button.active {
	background-color: var(--color-grayLight);
}
@media screen and (max-width:768px) {
	.tabs-custom.tabs-custom-coinSupport {
		justify-content: space-between;
	}
	.tabs-custom.tabs-custom-coinSupport button {
		padding:0px 2px;
		font-size:1rem;
		width:100%;
	}
}

/*------------------------------------------------------------------------------
status
------------------------------------------------------------------------------*/
.status {
	/*display:flex;*/
	display:inline-block;
	justify-content: center;
	align-items:center;
	text-align:center;
	padding: 5px 10px;
	border-radius: 5px;
}
.status.status-secondary {
	background-color: var(--color-secondary);
	color: #fff;
}
.status.status-danger {
	background-color: var(--color-danger);
	color: #fff;
}
.status.status-success {
	background-color: var(--color-success);
	color: #fff;
}
.status.status-warning {
	background-color: var(--color-warning);
	color: #fff;
}
.status.status-info {
	background-color: var(--color-info);
	color: #fff;
}
.status.status-gray {
	background-color: var(--color-gray);
	color: var(--color-black);
}
/*------------------------------------------------------------------------------
.radio
------------------------------------------------------------------------------*/
input[type='checkbox'].radio,
input[type='radio'].radio {
	display:inline-block;
position: relative;
	width: 16px;
	height: 16px;
	border-radius: 100%;
	margin: 0 3px;
	cursor: pointer;
	box-shadow: 1px 1px 3px #666;
	
	/* unchecked */
	border-color: #000;
border-width: 2px;
border-style: solid;
background-color: transparent !important;	
	
	opacity:1;
	outline:none !important;
	pointer-events: inherit !important;
-webkit-appearance: none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;	
-webkit-user-select: none  !important;
-moz-user-select: none  !important;
-ms-user-select: none  !important;
user-select: none  !important;
}

.radio:hover {
background-color: #ccc;
}

.radio:checked {
background-color: #000;
}
.radio:before, .radio:after {
	content:'' !important;
	position:relative !important;
	display: none !important;
}
.radio.radio-danger {
	border-color: var(--color-danger) !important;
}
.radio.radio-danger:checked {
	background-color: var(--color-danger) !important;
}

.radio.radio-success {
	border-color: var(--color-success) !important;
}
.radio.radio-success:checked {
	background-color: var(--color-success) !important;
}

.radio.radio-info {
	border-color: var(--color-info) !important;
}
.radio.radio-info:checked {
	background-color: var(--color-info) !important;
}

.radio.radio-warning {
	border-color: var(--color-warning) !important;
}
.radio.radio-warning:checked {
	background-color: var(--color-warning) !important;
}

/*------------------------------------------------------------------------------
fg
------------------------------------------------------------------------------*/
.fg-white {color: var(--color-white) !important;}
.fg-silver {color: var(--color-highlight) !important;}
.fg-light {color: var(--color-highlight) !important;}
.fg-success {color: var(--color-success) !important;}
.fg-danger {color: var(--color-danger) !important;}
.fg-danger-i {color: var(--color-danger) !important;}
.fg-warning {color: var(--color-warning) !important;}
.fg-info {color: var(--color-info) !important;}
.fg-primary {color: var(--color-primary) !important;}
.fg-secondary {color: var(--color-secondary) !important;}
.fg-gold {color: var(--color-gold) !important;}
.fg-gray {color: var(--color-gray) !important;}
.fg-grayLight {color: var(--color-grayLight) !important;}
.fg-dark {color: var(--color-dark) !important;}

/*------------------------------------------------------------------------------
bg
------------------------------------------------------------------------------*/
.bg-trans {background-color: transparent;}
.bg-trans-i {background-color: transparent !important;}
.bg-silver {background-color: var(--color-highlight);}
.bg-light {background-color: var(--color-light);}
.bg-lightAlpha {background-color: var(--color-lightAlpha);}
.bg-success {background-color: var(--color-success);}
.bg-successLight {background-color: var(--color-successLight);}
.bg-info {background-color: var(--color-info);}
.bg-infoLight {background-color: var(--color-infoLight);}
.bg-danger {background-color: var(--color-danger);}
.bg-dangerLight {background-color: var(--color-dangerLight);}
.bg-warning {background-color: var(--color-warning);}
.bg-warningLight {background-color: var(--color-warningLight);}
.bg-primary {background-color: var(--color-primary);}
.bg-secondary {background-color: var(--color-secondary);}
.bg-secondaryAlpha {background-color: var(--color-secondaryAlpha) !important;}
.bg-even {background-color: var(--color-highlight) !important;}
.bg-gray {background-color: var(--color-gray) !important;}
.bg-grayLight {background-color: var(--color-grayLight) !important;}
.bg-dark{background-color: var(--color-dark) !important;}
.bg-white{background-color: var(--color-white) !important;}

.bg-iamge {
	object-fit: cover;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media screen and (max-width:768px) {
	.bg-white-auto{background-color: var(--color-white) !important;}
	.bg-even-auto {background-color: var(--color-highlight) !important;}
}

/*------------------------------------------------------------------------------
placeholder align ...
------------------------------------------------------------------------------*/
/* webkit solution */
.ph-right::-webkit-input-placeholder{ text-align:right; }
/* mozilla solution */
.ph-right::-moz-placeholder.ph-right{ text-align:right; }

/*------------------------------------------------------------------------------
display and ...
------------------------------------------------------------------------------*/
.textInfo {
	direction:rtl;
	text-align: center;
	color:red;
	font-size: 1rem;
	margin:10px 0px;
}
.textInfo.danger {
	color:var(--color-danger);
}
.textInfo.success {
	color:var(--color-success);
}

/*------------------------------------------------------------------------------
display and ...
------------------------------------------------------------------------------*/
.d-block {display:block;}
.d-inlineBlock, .d-inline-block {display:inline-block;}
.d-flex {display:flex;}
.flex-work {
	display:flex;
	justify-content: space-between;
	align-items: center;
}
.flex-center {
	display:flex;
	justify-content: center;
	align-items: center;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-dir-column {flex-direction:column !important}
.flex-dir-row {flex-direction:row !important}
.justify-between {justify-content: space-between !important;}
.justify-center {justify-content: center !important;}
.justify-right {justify-content: right !important;}
.justify-left {justify-content: left !important;}
.align-items-center {align-items: center !important;}
.align-center {align-items: center !important;text-align:center;}
.align-left {align-items: left !important;text-align:left;}
.align-right {align-items: right !important;text-align:right;}
.align-justify {text-align: justify}
.align-justify-i {text-align: justify !important;}

.pos-absolute {position:absolute !important}
.pos-relative {position:relative !important}
.padding {padding:10px !important;}
.padding-5 {padding:5px !important;}
.scroll-x {overflow-x:auto;}
.scroll-y {overflow-y:auto;}

@media screen and (max-width:768px){
	.scroll-x-auto{overflow-x:auto;}	
	.scroll-y-auto{overflow-y:auto;}	
}
@media screen and (max-width:767px){
	.justify-between-auto {justify-content: space-between !important;}
	.justify-center-auto {justify-content: center !important;}
	.justify-right-auto {justify-content: right !important;}
	.justify-left-auto {justify-content: left !important;}	
	.flex-dir-column-auto {flex-direction:column !important}
	.flex-dir-row-auto {flex-direction:row !important}
}

/*------------------------------------------------------------------------------
w
------------------------------------------------------------------------------*/
.w-5 {width:5%}
.w-10 {width:10%}
.w-15 {width:15%}
.w-20 {width:20%}
.w-25 {width:25%}
.w-30 {width:30%}
.w-35 {width:35%}
.w-40 {width:40%}
.w-45 {width:45%}
.w-50 {width:50%}
.w-55 {width:55%}
.w-60 {width:60%}
.w-65 {width:65%}
.w-70 {width:70%}
.w-75 {width:75%}
.w-80 {width:80%}
.w-85 {width:85%}
.w-90 {width:90%}
.w-95 {width:95%}
.w-100 {width:100%}

@media screen and (max-width:768px) {
	.w-5-auto {width:5%}
	.w-10-auto {width:10%}
	.w-15-auto {width:15%}
	.w-20-auto {width:20%}
	.w-25-auto {width:25%}
	.w-30-auto {width:30%}
	.w-35-auto {width:35%}
	.w-40-auto {width:40%}
	.w-45-auto {width:45%}
	.w-50-auto {width:50%}
	.w-55-auto {width:55%}
	.w-60-auto {width:60%}
	.w-65-auto {width:65%}
	.w-70-auto {width:70%}
	.w-75-auto {width:75%}
	.w-80-auto {width:80%}
	.w-85-auto {width:85%}
	.w-90-auto {width:90%}
	.w-95-auto {width:95%}
	.w-100-auto {width:100%}
	.w-100-auto-i {width:100% !important;}
}
/*------------------------------------------------------------------------------
dir
------------------------------------------------------------------------------*/
.dir-rtl {direction:rtl !important}
.dir-ltr {direction:ltr !important}

/*------------------------------------------------------------------------------
box
------------------------------------------------------------------------------*/
.box {
	/*display:inline-block;*/
	position:relative;
	height:100%;
	width:100%;	
}
.box .box-inner {
	height:100%;
	width:100%;
	overflow-x:hidden;
	overflow-y:auto;
	padding:10px;
}
.box .box-inner header {
	padding:10px 0 0 0;
	font-size: 1.2rem;
	font-weight: bold;
}
.box-radius {
	border-radius: var(--radius);
}
.box-shadow {
	box-shadow: 0 0 5px #aaa;
}

/*------------------------------------------------------------------------------
panel
------------------------------------------------------------------------------*/
.panel {
	border: 1px solid #eee;
	overflow: hidden;
	margin-bottom: 5px;
}
.panel.panel-radius {
	border-radius: 10px !important;
}
.panel > .panel-titleBar {
	padding: 10px 10px;
	background-color: #eee;
	border-bottom: 1px solid #DCDCDC;
	font-size: 20px;
}
.panel > .panel-topBar,
.panel > .panel-bottomBar,
.panel > .panel-header,
.panel > .panel-footer {
	padding: 15px;
	background-color: #fff;
	/*border-bottom: 1px solid #F5F5F5;*/
}
.panel > .panel-header.vAlgn-c * {
	vertical-align: middle;
}
.panel > .panel-bottomBar,
.panel > .panel-footer {
	border-top: 1px solid #F5F5F5;
}
.panel > .panel-content,
.panel > .panel-body {
	padding: 25px;
	background-color: #fff;
	/*overflow-x: auto;*/

overflow-x: hidden;
}
/* panel default */
.panel.panel-default {
	border: 1px solid #DCDCDC;
	overflow: hidden;
}
.panel.panel-default > .panel-titleBar {
	height: 36px;
	line-height: 36px;
	padding: 5px;
	background-color: #eee;
	border-bottom: 1px solid #DCDCDC;
}
/* panel success */
.panel.panel-success {
	border: 1px solid #d9e9c9;
	overflow: hidden;
}
.panel.panel-success > .panel-titleBar {
	background-color: #d9e9c9;
	border-bottom: 1px solid #d9e9c9;
	color: #549217;
}
.panel.panel-success > .panel-header.bg-color,
.panel.panel-success > .panel-body.bg-color,
.panel.panel-success > .panel-footer.bg-color {
	background-color: #d9e9c9;
}
/* panel danger */
.panel.panel-danger {
	border: 1px solid #d0aeae;
	overflow: hidden;
}
.panel.panel-danger > .panel-titleBar {
	background-color: #e2bdbd;
	border-bottom: 1px solid #d0aeae;
	color: #8c6161;
}
/* panel warning */
.panel.panel-warning {
	border: 1px solid #eadab8;
	overflow: hidden;
}
.panel.panel-warning > .panel-titleBar {
	background-color: #e9dbbe;
	border-bottom: 1px solid #eadab8;
	color: #90794d;
}
/* panel info */
.panel.panel-info {
	border: 1px solid #d1ebf8;
	overflow: hidden;
}
.panel.panel-info > .panel-titleBar {
	background-color: #d1ebf8;
	border-bottom: 1px solid #d1ebf8;
	color: #497b95;
}
.panel.panel-info > .panel-header.bg-color,
.panel.panel-info > .panel-body.bg-color,
.panel.panel-info > .panel-footer.bg-color {
	background-color: #d1ebf8;
}
/* panel primary*/
.panel.panel-primary {
	border: 1px solid #0050ef;
	overflow: hidden;
}
/* panel shadow && glow */
.panel.panel-default.glow,
.panel.glow {
	box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5) !important;
}
.panel.panel-danger.glow {
	box-shadow: 0 0 25px 0 rgba(206, 53, 44, 0.5) !important;
}
.panel.panel-warning.glow {
	box-shadow: 0 0 25px 0 rgba(240, 163, 10, 0.5) !important;
}
.panel.panel-info.glow {
	box-shadow: 0 0 25px 0 rgba(0, 175, 240, 0.5) !important;
}
.panel.panel-success.glow {
	box-shadow: 0 0 25px 0 rgba(96, 169, 23, 0.5) !important;
}
.panel.panel-required.glow {
	box-shadow: 0 0 25px 0 rgba(27, 161, 226, 0.5) !important;
}
.panel.panel-default.shadow,
.panel.shadow {
	box-shadow: 2px 2px 25px 0 rgba(0, 0, 0, 0.5) !important;
}
.panel.panel-danger.shadow {
	box-shadow: 2px 2px 25px 0 rgba(206, 53, 44, 0.5) !important;
}
.panel.panel-warning.shadow {
	box-shadow: 2px 2px 25px 0 rgba(240, 163, 10, 0.5) !important;
}
.panel.panel-info.shadow {
	box-shadow: 2px 2px 25px 0 rgba(0, 175, 240, 0.5) !important;
}
.panel.panel-success.shadow {
	box-shadow: 2px 2px 25px 0 rgba(96, 169, 23, 0.5) !important;
}
.panel.panel-required.shadow {
	box-shadow: 2px 2px 25px 0 rgba(27, 161, 226, 0.5) !important;
}
@media screen and (max-width: 768px) {
	.panel > .panel-content,
	.panel > .panel-body {
		padding: 10px;
	}
}

/*------------------------------------------------------------------------------
chips-tools
------------------------------------------------------------------------------*/
.chips-tools {
	padding:10px 5px;
	display:flex;
	align-items: center; 
	justify-content: space-around;
	border-radius: var(--radius);
	background-color: var(--color-grayLight);
}
.chips-tools a {
	display:flex;
	font-size: 1rem !important;
	color: var(--color-text) !important;
	padding:0px 5px !important;
}

.chips-tools a i {
	font-weight: initial !important;
	font-size: 1rem !important;
	color: var(--color-text) !important;
}

/*------------------------------------------------------------------------------
toolsBox
------------------------------------------------------------------------------*/
.toolsBox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding:5px 0;
}
.toolsBox.bordered {
	border-bottom: 1px solid var(--color-light);
}
.toolsBox .toolsBox-group {
	display:flex;
	align-items: center;
}
.toolsBox .toolsBox-item {
	text-align:center;
	height:24px;
	padding:5px;
	margin:2px;
	font-size: 0.9rem !important;
	color:var(--color-dark);
	background-color: var(--color-lightAlpha);
	border-radius: 3px;
}
.toolsBox .toolsBox-item i {
	margin:0 5px;
	font-size: 0.9rem !important;
}

/*------------------------------------------------------------------------------
loading
------------------------------------------------------------------------------*/
.percentStatus.up:after{
	font-family:"Font Awesome 6 Pro";
	content:"\f106";
	font-size: 1rem;
	color: var(--color-success);
	text-align:center;
}
.percentStatus.down:before{
	font-family:"Font Awesome 6 Pro";
	content:"\f107";
	font-size: 1rem;
	color: var(--color-danger);
	text-align:center;
}
.percentStatus.up{
	font-size: 1rem;
	color: var(--color-success);
}
.percentStatus.down{
	font-size: 1rem;
	color: var(--color-danger);
}

/*------------------------------------------------------------------------------
loading
------------------------------------------------------------------------------*/
#layer_loading {
display: none;
position: fixed;
width:100%;
height:100%;
left:0px;
top:0px;
background-color: var(--color-black);
background-color: rgba(0,0,0,0.6);
}
#layer_loading div {
	padding: 20px;
	margin:100px auto;
	width:120px;
	height: 120px;
	border-radius: 50%;
	background-color: var(--color-white);
}

/*---------------------------------------------------------------
input-text
---------------------------------------------------------------*/
.input-text {
	position:relative;
	display:flex;
	justify-content:space-between;
	align-items: center;
	text-align:center;
	flex-wrap:wrap;
}
.input-text.input-text-column {
	flex-direction:column;
	margin-bottom:20px;
}
.input-text .input-text-header {
	margin-bottom: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.input-text .input-text-footer {
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 10px;
	font-size: 0.8rem;
	opacity:0.8;
}
.input-text .input-text-footer * {
	margin: 0 2px;
}
.input-text input[type='text'],
.input-text textarea {
	/*width: 100%;
	border-radius: 5px;
	border: 1px solid #ddd;
	box-shadow: 1px 1px 3px #aaa;
	text-indent: 10px;
	background-color: var(--color-white);
	display: block;
	padding:0px 5px;
	margin: 0;
	font-size: 0.9rem !important;*/
	
	display: block;
	width: 100%;
	height: 40px;
	width: calc(100% - 26px);	
	border: 1px solid #ddd;
	border-radius: 5px;	
	text-indent: 10px;
	background-color: var(--color-white);
	margin: 0;
	font-size: 0.9rem !important;
}
.input-text.input-text-column input[type='text'],
.input-text.input-text-column textarea {
	min-height: 32px;
	padding:0px;
	width:100%;
}
.input-text textarea {
	width: 100%;
	min-height:180px;
	padding:10px 5px;
}
.input-text label {
	text-align: right;
	color: var(--color-black);
	max-width: 120px;
	margin: 0px 5px;
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.input-text.input-text-column label {
	display: block;
	text-align: right;
	width: 100%;
	max-width: unset;
	margin: 0px 0px 5px 0px;
	color:var(--color-dark);
}
.input-text .input-text-helper {
	width:100%;
	text-align: right;
	color: var(--color-dark);
	margin: 2px 0px;
	font-size: 0.8rem;
}
.input-text input[type='text']:focus {
	border: 1px solid var(--color-secondary);
	box-shadow: 1px 1px 3px #aaa;
}

/*---------------------------------------------------------------
input-text
---------------------------------------------------------------*/

.input-wrap {
	display: inline-flex;
	flex-direction: column;
	width:100%;
	margin: 0px 0px 16px;
}
.input-wrap .input-header {
	margin-bottom: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
	font-size: 0.9rem;
	color:var(--color-text);
}
.input-wrap .input-header label {
	font-size: 0.9rem;
	color:var(--color-text);
}
.input-wrap .input-header b {
	font-size: 1rem;
	color:var(--color-text);
}
.input-wrap .input-footer {
	margin-bottom: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 5px;
	font-size: 0.9rem;
	color:var(--color-text);
}
.input-wrap .input-body {
	box-sizing: border-box;
	cursor: text;
	display: flex;
	align-items: center;
	width: 100%;
	position: relative;
	border-radius: 8px;
	padding-left: 8px;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.75;
	background-color: var(--color-input-bg);
	overflow: hidden;	
}
.input-wrap .input-body input[type='text'],
.input-wrap .input-body input[type='password'],
.input-wrap .input-body input[type='number'],
.input-wrap .input-body input[type='mail']{
	letter-spacing: inherit;
	color: var(--color-text) !important;
	border: 0px !important;
	box-sizing: content-box;
	background: none;
	margin: 0px;
	-webkit-tap-highlight-color: transparent;
	box-shadow: none !important;
	display: block;
	min-width: 0px;
	width: 100%;
	height: 36px !important;
	padding: 0px 8px;
	text-align: inherit;	
}
.input-wrap .input-body input:active,
.input-wrap .input-body input:focus {
	border:none !important;
}
.input-wrap .input-body input:disabled {
	color: var(--color-textDisabled) !important;
}
.input-wrap .input-body .caption {
	display: flex;
    height: 0.01em;
    max-height: 2em;
    align-items: center;
    white-space: nowrap;
    margin-right: 8px;
    color: var(--color-textLight) !important;
}

.input-wrap .input-body .password-handle {
	position: relative;
	display: flex;
    height: 0.01em;
    max-height: 2em;
    align-items: center;
    white-space: nowrap;
    margin-right: 8px;
    color: var(--color-textLight) !important;
}

.input-wrap .input-body .password-handle.eye:before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
	height: 2px;
	background-color: var(--color-textLight);
	left: -1px;
	right: -1px;
}

.input-wrap .input-body:has( > input:focus ),
.input-wrap .input-body:has( > input:active ) {
	border-bottom: 2px solid var(--color-textLight);
}

.input-wrap .input-body:has( > input:disabled ) {
	border-bottom: none !important;
	background-color: var(--color-inputDisabled-bg);
}

/* active */
.input-wrap.input-active .input-body:has( > input ),
.input-wrap.input-active .input-body:has( > input ), 
.input-wrap .input-body:has( > input.active),
.input-wrap .input-body:has( > input.active) {
	border-bottom: 2px solid var(--color-textLight);
}

/* invalid */
.input-wrap.input-invalid .input-body:has( > input ),
.input-wrap.input-invalid .input-body:has( > input ), 
.input-wrap .input-body:has( > input.invalid),
.input-wrap .input-body:has( > input.invalid) {
	border-bottom: 2px solid var(--color-danger);
}
.input-wrap .input-body input.invalid {
	color:var(--color-danger) !important;
}

/* success */
.input-wrap.input-success .input-body:has( > input:focus ),
.input-wrap.input-success .input-body:has( > input:active ), 
.input-wrap .input-body:has( > input.success:focus),
.input-wrap .input-body:has( > input.success:active){
	border-bottom: 2px solid var(--color-success);
}
.input-wrap .input-body input.success {
	color:var(--color-success) !important;
}
/* danger */
.input-wrap.input-danger .input-body:has( > input:focus ),
.input-wrap.input-danger .input-body:has( > input:active ), 
.input-wrap .input-body:has( > input.danger:focus),
.input-wrap .input-body:has( > input.danger:active) {
	border-bottom: 2px solid var(--color-danger);
}
.input-wrap .input-body input.danger {
	color:var(--color-danger) !important;
}
/* info */
.input-wrap.input-info .input-body:has( > input:focus ),
.input-wrap.input-info .input-body:has( > input:active ), 
.input-wrap .input-body:has( > input.info:focus),
.input-wrap .input-body:has( > input.info:active) {
	border-bottom: 2px solid var(--color-info);
}
/* warning */
.input-wrap.input-warning .input-body:has( > input:focus ),
.input-wrap.input-warning .input-body:has( > input:active ), 
.input-wrap .input-body:has( > input.warning:focus),
.input-wrap .input-body:has( > input.warning:active) {
	border-bottom: 2px solid var(--color-warning);
}


.input-wrap select {
	display: block;
	min-width: 0px;
	width: 100%;
	height: 36px !important;
	padding: 0px 8px;	
    border-radius: 5px;
    background-color: var(--color-grayLight);
	border:none !important;
	outline: none !important;
	box-shadow: none !important;
	color: var(--color-text) !important;
}

/*---------------------------------------------------------------
input-text2
---------------------------------------------------------------*/
.input-text2 {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	flex-wrap: wrap;
}
.input-text2 input[type='text'] {
	width: 100%;
	height: 40px;
	width: calc(100% - 26px);	
	border: 1px solid #ddd;
	border-right: 1px solid var(--color-grayLight);
	text-indent: 10px;
	background-color: var(--color-white);
	display: block;
	margin: 0;
	font-size: 0.9rem !important;
	border-radius: 0 5px 5px 0;
}
.input-text2 label {
	text-align: right;
	color: var(--color-black);
	max-width: 120px;
	margin: 0px 5px;
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.input-text2 input[type='text']:focus {
	border: 1px solid var(--color-secondary);
	box-shadow: 1px 1px 3px #aaa;
}
.input-text2 span {
	height: 100%;
	width: 24px;
	height: 42px;
	vertical-align: middle;
	line-height: 42px;
	background-color: var(--color-grayLight);
	border-radius: 5px 0 0 5px;
	padding: 0px 5px;
	border: 1px solid #ddd;
	border-right: none;	
}

/*---------------------------------------------------------------
   ul list
---------------------------------------------------------------*/
ul.list {}
ul.list li {
	display: flex;
	align-items: center;
	direction: ltr;
	color: var(--color-dark);
	border:none;
	padding: 10px 0 10px 10px;
	line-height: 1.5;
	font-size: 1rem;
	transition: background-color 0.3s;
}
ul.list li:active,
ul.list li.acative, 
ul.list li.selected {
	background-color: #ebebeb  !important;
}
ul.list li:hover {
	background-color: #f1f1f1 !important;
}
ul.list.arrow li {
	position: relative;
	padding-right:32px;
}
ul.list.list-right.arrow li,
ul.list.list-rtl.arrow li {
	padding-left:32px;
}
ul.list.arrow li:before {
	content:"\f105";
	position: absolute;
	width:32px;
	top:50%;
	transform:translateY(-50%);
	right:0;
	color:var(--color-secondary);
	font-family: var(--fa-style-family,"Font Awesome 6 Pro");
	text-align: center;
}
ul.list.list-right.arrow li:before,
ul.list.list-rtl.arrow li:before {
	content:"\f104";
	position: absolute;
	width:32px;
	right:unset;
	left:0px;
	color:var(--color-secondary);
}
ul.list.list-bordered li {
	border-bottom: 1px solid var(--color-grayLight);
}
ul.list li span{
	color: var(--color-dark);
	white-space: break-spaces;
	font-size: 1rem;
}
ul.list li a {
	color: var(--color-text);
    white-space: break-spaces;
    font-size: 1rem;
    display: flex;
    width: 100%;
    align-items: center;	
	outline: none;
}
ul.list li i {
	margin: 0 10px 0 0;
	font-size: 1rem;
}
ul.list li img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    object-fit: cover;
	border-radius: 50%;
}
ul.list.list-right li img, 
ul.list.list-rtl li img {
	margin-right: inherit;
	margin-left: 10px;
}
ul.list.list-right {}

ul.list.list-right li,
ul.list.list-rtl li{
	padding: 10px 10px 10px 0;
	direction: rtl;
}
ul.list.list-right li i,
ul.list.list-rtl li i {
	margin: 0 0 0 10px;
}

/*---------------------------------------------------------------
list-info
---------------------------------------------------------------*/
ul.list-info {
	padding:10px;
	background-color:var(--color-grayLight);
	border-radius:10px;
}
ul.list-info li{
	font-size:0.9rem;
	color: var(--color-dark);
	padding:2px 5px;
	line-height: 1.5;
	text-align: justify;
}
ul.list-info li:before{
	content:'\f111';
	font-family:"Font Awesome 6 Pro";
	margin-left: 5px;
	font-size: 0.8rem;
	font-weight: bold;
}
ul.list-info li.title{
	font-size: 1rem;
	font-weight: bold;
}
ul.list-info li.title:before{
	content:'';
	margin-left: 0px;
	font-size: 0rem;
	font-weight: bold;
}
ul.list-info li.normal{
	font-size: 0.9rem;
	font-weight: normal;
}
ul.list-info li.normal:before{
	content:'';
	margin-left: 0px;
	font-size: 0rem;
}
ul.list-info.success {
	background-color: var(--color-success);
}
ul.list-info.success li {
	color: var(--color-white);
}

/*---------------------------------------------------------------
list-grid
---------------------------------------------------------------*/
ul.list-grid {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	border-bottom: 1px solid #ddd;
	margin-bottom: 5px;
}
ul.list-grid li {
	margin:5px 0;
	flex-basis: 25%;
	max-width: 25%;
}
ul.list-grid li.line {
	width:100% !important;
	margin:5px 0;
	height:1px;
	background-color: var(--color-grayLight);
	flex-basis: 100%;
	max-width: 100%;
}
ul.list-grid li.line + .line {
	display:none;
}
ul.list-grid li.header-title {
	width:100% !important;
	margin:10px 0;
	font-size:1rem;
	flex-basis: 100%;
	max-width: 100%;
}
ul.list-grid li.header-title i {
	font-size:1rem;
	margin-left: 5px;
}
ul.list-grid li a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding:5px;
	font-size: 0.8rem;
	color:var(--color-textLight);
}
ul.list-grid li span {
	text-align: center;
	color:var(--color-textLight);
}
ul.list-grid li a .icon {
	font-size: 1.6rem;
	margin-bottom: 5px;
	color:var(--color-text);
}
ul.list-grid li a .icon::before {
	color:var(--color-text);
	opacity:0.8;
}
ul.list-grid li a .icon::after {
	color:rgb(148 113 247);
	opacity:1;
}
ul.list-grid li a .counter {
	position: absolute;
	display: none; /*flex;*/
	flex-shrink: 0;
	min-width: 20px;
	height: 20px;
	top: -6px;
	right: calc(50% + 5px);
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	padding: 0px;
	border-radius: 50%;
	z-index: 1;
	background-color: #ffa800;
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	color: var(--color-white);
}
ul.list-grid li a .tag {
	position: absolute;
	display: inline-flex;
	flex-shrink: 0;
	width: fit-content;
	height: 16px;
	top: -6px;
	left: calc(50%);
	vertical-align: middle;
	align-items: center;
	white-space: nowrap;	
	padding-right: 3px;
	padding-left: 3px;
	border-radius: 4px;
	z-index: 1;
}
ul.list-grid li a .tag.tag-new {
	background-color: var(--color-danger);
	color: var(--color-white);
}
ul.list-grid li a .tag.tag-special {
	background-color: var(--color-warning);
	color: var(--color-white);
}
ul.list-grid li a .tag.tag-commingSoon {
	background-color: var(--color-success);
	color: var(--color-white);
}

/*---------------------------------------------------------------
alert
---------------------------------------------------------------*/
.alert {
	display: flex;
	align-items: center;
	justify-content : space-between;
	padding:10px;
	margin-bottom: 0.5rem;
	background-color: var(--color-white);
	color: var(--color-black);
	border-radius: 10px;
}
.alert i {
	font-size: 1.5rem;
	padding: 0 0 0 10px ;
}
.alert div {
	padding: 0px 5px;
	width: calc(100%);
	text-align: justify;
}
.alert div span {
	font-size:0.9rem;
}
.alert div .title {
	font-size: 1.1rem !important;
	font-weight: bold !important;
	padding: 0;
	margin: 0 0 0.5rem 0;
}
.alert a {
	padding: 10px;
	background-color: #ddd;
	color: var(--color-black);
	border-radius: 10px;
	text-align: center;
	cursor: pointer;
	font-size: 0.9rem;
	min-width: 150px;
}

.alert.alert-danger {
	color: #cd4646 !important;
	background-color: #fad8d8;
}
.alert.alert-danger a {
	background-color: #cd4646;
	color: #fff;
}
.alert.alert-danger .title {
	color: #cd4646 !important;
}

.alert.alert-warning {
	color: #c37400 !important;
	background-color: #fde6c4;
}
.alert.alert-warning a {
	background-color: #c37400;
	color: var(--color-white);
}
.alert.alert-warning .title {
	color: #c37400 !important;
}

.alert.alert-info {
	color: var(--color-infoDark) !important;
	background-color: var(--color-infoLight);
}
.alert.alert-info a {
	background-color: var(--color-infoDark);
	color: var(--color-white);
}
.alert.alert-info .title {
	color: var(--color-infoDark); !important;
}


@media screen and (max-width:767px) {
	.alert{
		flex-wrap: wrap;
	}
	.alert i {
		width: 32px;
	}
	.alert div {
		width: calc(100% - 32px);
	}
	.alert div span {
		line-height: 1.3;
	}
	.alert a {
		margin: 10px auto 0 auto;
	}
}

/*---------------------------------------------------------------
progress
---------------------------------------------------------------*/
.progress {
	position:relative;
	display:inline-block;
	width: 100%;
	height:auto;
	min-height:4px;
	background-color: #ddd;
text-align: right;
color: white;
border-radius:5px;
}
.progress.progress-opacity {
	opacity:0.5;
}
.progress .progress-inner {
	position:absolute;
	width: 0%; 
	height:100%;
	left:0;
	top:0;
	display:flex;
	justify-content: center;
	align-items:center;	
	background-color: #4CAF50;
	transition: all 0.5s;
}
.progress .progress-title{
	position: absolute;
	top: 0px;
	bottom: 0px;
left:50%;
transform:translateX(-50%);	
	display: flex;
	align-items: center;	
	text-align: center;
	font-size: 0.8rem;
	color: #fff;
}
.progress.progress-right {
transform: rotate(180deg);
	transform: rotate(-180deg);
}
.progress.progress-right .progress-title{
transform: rotate(180deg);
}
/*-----*/
.progress.progress-bg {
	position: absolute;
	width:100%;
	height:100%;
	left: 0;
	top: 0;
	margin:0;
	background-color: transparent;
	opacity: 0.5;
}
/*-----*/
.progress.danger .progress-inner {
	background-color: var(--color-danger) !important;
}
.progress.success  .progress-inner{
	background-color: var(--color-success) !important;
}
.progress.primary  .progress-inner{
	background-color: var(--color-primary) !important;
}
/*---------------------------------------------------------------
card
---------------------------------------------------------------*/
.listTow {
	display:flex;
	justify-content:space-between;
	align-items:center;
	height:32px;
	background-color: var(--color-white);
	padding:0px 10px;
	font-size:0.9rem;	
}
.listTow:nth-child(odd) {
	background-color:var(--color-highlight);
}
.listTow li {
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:50%;
	padding:0px 5px;
	font-size: 0.8rem;
}

/*---------------------------------------------------------------
card
---------------------------------------------------------------*/
.card, 
.card-auto-remove {
	margin: 0 0 0.5rem 0;
	background-color: rgb(255, 255, 255);
	border-radius: var(--radius);
	border: 2px solid rgb(235, 236, 240);
	box-shadow: none !important;
}
@media screen and (max-width:768px) {
	.card.card-auto-remove,
	.card-auto-remove {
		margin: inherit !important;
		background-color:inherit;
		border:none  !important;
		border-radius: 0 !important;
		
	}
	.card.card-auto,
	.card-auto {
		margin: 0 0 0.5rem 0 !important;
		background-color: rgb(255, 255, 255) !important;
		border-radius: var(--radius) !important;
		border: 2px solid rgb(235, 236, 240) !important;
		box-shadow: none !important;
	}	
}

/*---------------------------------------------------------------
card-product
---------------------------------------------------------------*/
.card-product{
	padding:5px;
	margin:0;
	width: 100%;
	height: 120px;
}
.card-product .card-product-inner{
	position:relative;
	height:100%;
}
.card-product .card-product-inner .header{
	display:flex;
	justify-content:space-between;
	align-items: flex-start;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:50%;
	padding:10px;
}
.card-product .card-product-inner .header .title{
	display:flex;
	height:32px;
	align-items:center;	
	font-size:1rem;
	font-weight:bold;
	color: var(--color-black);
	padding:0;
	margin:0;	
}
.card-product .card-product-inner .header .price{
	display:flex;
	height:32px;
	align-items:center;
	font-size:0.9rem;
	color:#888;
	direction: ltr;
}
.card-product .card-product-inner .header .icon{
	display:flex;
	height:32px;
	align-items:center;	
	width:32px;
	height:32px;
}
.card-product .card-product-inner .footer{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	position:absolute;
	top:50%;
	left:0;
	right:0;
	bottom:0;
	padding:10px;
}
.card-product .card-product-inner .footer .status{
	font-size: 1rem;
	text-align:right;
}
.card-product .card-product-inner .footer .status span {
	padding: 0px 2px;
}
.card-product .card-product-inner .footer .status span:first-child.up:after{
	font-family:"Font Awesome 6 Pro";
	content:"\f106";
	font-size: 1rem;
	color: var(--color-success);
	text-align:center;
}
.card-product .card-product-inner .footer .status span:first-child.down:before{
	font-family:"Font Awesome 6 Pro";
	content:"\f107";
	font-size: 1rem;
	color: var(--color-danger);
	text-align:center;
}
.card-product .card-product-inner .footer .status span:last-child.up{
	font-size: 1rem;
	color: var(--color-success);
}
.card-product .card-product-inner .footer .status span:last-child.down{
	font-size: 1rem;
	color: var(--color-danger);
}
.card-product .card-product-inner .footer .price{
	font-family: "vazir-farsi" !important;
	font-size: 1.1rem;
	font-weight:bold;
	text-align:left;
	color:#333;
	padding:0;
	margin:0;
}
.card-product .card-product-inner .footer .price .type{
	font-size: 1rem;
	font-weight: normal;
	padding: 0px 2px;
}
.card-product .card-product-inner .footer .price2{
	font-family: inherit;
}

/*---------------------------------------------------------------
card-tariff
---------------------------------------------------------------*/
.layer-tariff {
display:flex;
justify-content:space-between;
align-items:center;
overflow-x: auto;
height: 150px;	
}
.card-tariff{
	padding:5px;
	margin:0;
	width: 100%;
}
.card-tariff .card-tariff-inner{
	position:relative;
	height:100%;
	background-color: var(--color-white);
}
.card-tariff .card-tariff-inner .header{
	position: absolute;
	height: 38px;
	top: -19px;
	left: 5px;
	right: 5px;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background-color: var(--color-grayLight);
	color: var(--color-secondary);
	border-radius: 10px;
	padding: 5px;
	box-shadow: 0px 0px 3px #aaa;
}
.card-tariff.active .card-tariff-inner ,
.card-tariff.active .card-tariff-inner .header{
	border:1px solid var(--color-primary);
}
.card-tariff .card-tariff-inner .body{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: 28px;
}
.card-tariff .card-tariff-inner .body .price{
	color: var(--color-dark);
	font-size: 0.8rem;
	font-weight:bold;
	padding: 10px 0;
}
.card-tariff .card-tariff-inner .body img{
	min-height: 36px;
	max-height: 44px;
}
@media screen and (max-width:768px) {
	.layer-tariff {
		overflow-x: auto;
		height: 150px;
		width: calc(100% + 20px);
		margin-right: -10px;		
		-ms-overflow-style: none !important;  /* Internet Explorer 10+ */
		scrollbar-width: none !important;  /* Firefox */		
	}
	.layer-tariff::-webkit-scrollbar {
		display:none !important;
	}
	.card-tariff .card-tariff-inner {
		width: 30vw;
	}
}

/*---------------------------------------------------------------
card-product
---------------------------------------------------------------*/
.card-product .card-product-inner .header .title{
	display:flex;
	height:32px;
	align-items:center;	
	font-size:1rem;
	font-weight:bold;
	color: var(--color-black);
	padding:0;
	margin:0;	
}
.card-product .card-product-inner .header .price{
	display:flex;
	height:32px;
	align-items:center;
	font-size:0.9rem;
	color:#888;
	direction: ltr;
}
.card-product .card-product-inner .header .icon{
	display:flex;
	height:32px;
	align-items:center;	
	width:32px;
	height:32px;
}
.card-product .card-product-inner .footer{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	position:absolute;
	top:50%;
	left:0;
	right:0;
	bottom:0;
	padding:10px;
}
.card-product .card-product-inner .footer .status{
	font-size: 1rem;
	text-align:right;
}
.card-product .card-product-inner .footer .status span {
	padding: 0px 2px;
}
.card-product .card-product-inner .footer .status span:first-child.up:after{
	font-family:"Font Awesome 6 Pro";
	/* content:"\f106"; */
	content:"\f0d8"; 
	font-size: 1rem;
	color: var(--color-success);
	text-align:center;
	font-weight: 600;
}
.card-product .card-product-inner .footer .status span:first-child.down:before{
	font-family:"Font Awesome 6 Pro";
	/* content:"\f107"; */
	content:"\f0d7";
	font-size: 1rem;
	color: var(--color-danger);
	text-align:center;
	font-weight: 600;
}
.card-product .card-product-inner .footer .status span:last-child.up{
	font-size: 1rem;
	color: var(--color-success);
}
.card-product .card-product-inner .footer .status span:last-child.down{
	font-size: 1rem;
	color: var(--color-danger);
}
.card-product .card-product-inner .footer .price{
	font-family: "vazir-farsi" !important;
	font-size: 1.1rem;
	font-weight:bold;
	text-align:left;
	color:#333;
	padding:0;
	margin:0;
}
.card-product .card-product-inner .footer .price .type{
	font-size: 1rem;
	font-weight: normal;
	padding: 0px 2px;
}
.card-product .card-product-inner .footer .price2{
	font-family: inherit;
}
@media screen and (max-width:767px) {
	.card-product .card-product-inner .footer .status{
		display: flex;
		justify-content: center;
		/* flex-direction: column; */
		padding: 0;
	}
}

/*---------------------------------------------------------------
searchBox
---------------------------------------------------------------*/
.searchBox {
	position: relative;
	display: flex !important;
	align-items: center;
	width: 220px;
	height: 100%;
	margin: 0px 10px;
}
.searchBox.main {
	width: 270px;
}
.searchBox .searchBox-inner {
	position: relative;
	width: 100%;
	height: 32px;
	border-radius: 5px;
	/* box-shadow: 0px 0px 3px #aaa; */
	overflow: hidden;
	/* background-color: #f6f8fb; */
	background-color: #eaeaea;
	border: 1px solid #ccc;
}
.searchBox .searchBox-inner button {
	float:right;
	width:36px;
	height:32px;
	line-height:32px;
	text-align:center;
	cursor: pointer;
	border:none;
	outline:none;
	box-shadow:none;
	border-left:1px solid #ddd;
	border-radius:0px;
	background-color:transparent;
}
.searchBox .searchBox-inner button:before {
	width:36px;
	height:32px;
	line-height:32px;
	text-align:center;
	color:#aaa;
	font-family:"Font Awesome 6 Pro";
	font-size:1.3rem;
	content:"\f002";
}
.searchBox .searchBox-inner input {
	float: left;
	width: calc(100% - 36px);
	height: 32px;
	line-height: 32px;
	text-align: center;
	content: 'fff';
	cursor: pointer;
	border: none;
	outline: none;
	box-shadow: none;
	text-indent: 5px;
	margin: 0;
	padding: 0;
	text-align: right;
	font-size: 0.8rem;
	background-color:transparent;
}
.searchBox .searchBox-result {
	position:fixed;
	left:0px;
	bottom:0px;
	background-color: var(--color-white);
	border-radius: 0 0 5px 5px;
	box-shadow: 0px 2px 5px #aaa;
	overflow-x:hidden;
	overflow-y:auto;
	transition: height 0.5s;
}
.searchBox .searchBox-result.show {
	transition: height 0.5s;
	height: 300px;
}
.searchBox .searchBox-result.hide {
	transition: height 0.5s;
	height: 0px;
}
@media screen and (max-width:768px) {
	.searchBox.main {
		position: fixed;
		width: 100%;
		left:0px;
		right:0px;
		top:64px;
		bottom:0px;
		display:flex;
		flex-direction: column;
		margin: 0;		
		background-color: var(--color-white);
		z-index: 2;
	}
	.searchBox.main .searchBox-inner {
		position: relative;
		width: 100%;
		height: 32px;
		border-radius: 0px;
		overflow: hidden;
		background-color: transparent;
		border: none;
		border-bottom: 1px solid var(--color-grayLight);
	}	
	.searchBox.main .searchBox-result {
		display: block;
		position: absolute;
		left: 0px !important;
		right: 0px;
		top: 32px !important;
		bottom: 0px;
		width: inherit !important;
		height: inherit;
		padding-bottom: calc(64px + 32px + var(--footer-height));
	}
	.searchBox.min {
		width:36px;
		transition: width 0.2s;
	}
	.searchBox.min .searchBox-inner {
		background-color: transparent;
		border: none;	
		transition: all 0.1s;
	}	
	.searchBox.min:hover {
		width: 220px;	
	}
	.searchBox.min:hover .searchBox-inner {
		background-color: #eaeaea;
		border: 1px solid #ccc;	
	}		
}

/*---------------------------------------------------------------
searchBox-main
---------------------------------------------------------------*/
.searchBox-main {
	position: relative;
	display: flex !important;
	align-items: center;
	width: 270px;
	height: 100%;
	margin: 0px 10px;
}
.searchBox-main .searchBox-form {
	position: relative;
	width: 100%;
	height: 32px;
	border-radius: 5px;
	overflow: hidden;
	background-color: #eaeaea;
	border: 1px solid #ccc;
}
.searchBox-main .searchBox-form button {
	float:right;
	width:36px;
	height:32px;
	line-height:32px;
	text-align:center;
	cursor: pointer;
	border:none;
	outline:none;
	box-shadow:none;
	border-left:1px solid #ddd;
	border-radius:0px;
	background-color:transparent;
}
.searchBox-main .searchBox-form button:before {
	width:36px;
	height:32px;
	line-height:32px;
	text-align:center;
	color:#aaa;
	font-family:"Font Awesome 6 Pro";
	font-size:1.3rem;
	content:"\f002";
}
.searchBox-main .searchBox-form input {
	float: left;
	width: calc(100% - 36px);
	height: 32px;
	line-height: 32px;
	text-align: center;
	content: 'fff';
	cursor: pointer;
	border: none;
	outline: none;
	box-shadow: none;
	text-indent: 5px;
	margin: 0;
	padding: 0;
	text-align: right;
	font-size: 0.8rem;
	background-color:transparent;
}
.searchBox-main .searchBox-backdrop {
	display: none;
	position: fixed;
	left:0;
	right:0;
	top:0;
	bottom: 0;
	z-index: 1;
	background-color: transparent;
}
.searchBox-main .searchBox-result {
	position:fixed;
	left:0px;
	top:0px;
	bottom:0px;
	padding-bottom: 36px;
	background-color: var(--color-white);
	border-radius: 0 0 5px 5px;
	box-shadow: 0px 2px 5px #aaa;
	overflow:hidden;
	z-index: 2;
	transition: height 0.3s;
	/* hide */
	height: 0px;
	padding-bottom: 0;	
}
.searchBox-main.show .searchBox-backdrop {
	display: block;
}
.searchBox-main.hide .searchBox-backdrop {
	display: none;
}
.searchBox-main.show .searchBox-result {
	height: 300px;
	padding-bottom: 36px;
}
.searchBox-main.hide .searchBox-result {
	height: 0px;
	padding-bottom: 0;
}
.searchBox-main .searchBox-result .searchBox-result-header {
	height:42px;
	width:100%;
	padding:0 10px;
}
.searchBox-main .searchBox-result .searchBox-result-content {
	height:100%;
	width:100%;
	padding:0;
	overflow-x:hidden;
	overflow-y: auto;
}
@media screen and (max-width:768px) {
	.searchBox-main {
		position: fixed;
		width: 100%;
		left:0px;
		right:0px;
		top:64px;
		bottom:0px;
		display:flex;
		flex-direction: column;
		margin: 0;		
		background-color: var(--color-white);
		z-index: 2;
	}
	.searchBox-main .searchBox-inner {
		position: relative;
		width: 100%;
		height: 32px;
		border-radius: 0px;
		overflow: hidden;
		background-color: transparent;
		border: none;
		border-bottom: 1px solid var(--color-grayLight);
	}	
	.searchBox-main .searchBox-result {
		display: block;
		position: absolute;
		left: 0px !important;
		right: 0px;
		top: 32px !important;
		bottom: 0px;
		width: inherit !important;
		height: unset !important;
		padding-bottom: calc(64px + 32px + var(--footer-height)) !important;
	}
	.searchBox-min {
		width:36px;
		transition: width 0.2s;
	}
	.searchBox-min .searchBox-inner {
		background-color: transparent;
		border: none;	
		transition: all 0.1s;
	}	
	.searchBox-min:hover {
		width: 220px;	
	}
	.searchBox-min:hover .searchBox-inner {
		background-color: #eaeaea;
		border: 1px solid #ccc;	
	}
	.searchBox-main.show .searchBox-backdrop {
		display: none !important;
	}		
}

/* --------------------------------------------------------------
coinInfo
-----------------------------------------------------------------*/
.coinInfo {
	display:flex;
	align-items:center;
	height:100%;
}
.coinInfo .icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0px 5px 0px 5px;
}
.coinInfo .title-en {
	font-size:0.8rem;
	display:block;
	color:#a9a9af !important;
	text-align:right;
	margin: 5px 0px;
	line-height:1;
}
.coinInfo .title-farsi {
	font-size: 0.9rem;
	font-weight: bold;
	color: var(--color-black);
	margin: 5px 0px;
	line-height:1;
	text-wrap: nowrap;
}

/* --------------------------------------------------------------
page-wizard
-----------------------------------------------------------------*/
.page-wizard {
	position:relative;
display:flex;
	justify-content:space-between;
	align-items:center;
}
.page-wizard:before {
	content: '';
	height: 1px;
	border: none;
	padding: 0;
	margin: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50%);
	transform: translateY(calc(-50%));
	background-color: var( --color-dark);
	box-shadow: 0 0 3px #aaa;
	margin-top: -14px;
}
.page-wizard .page-wizard-item {
	position:relative;
	width:48px;
	height:48px;
	line-height:48px;
	text-align: center;
	border:1px solid var(--color-dark);
	border-radius: 100%;
	background-color: var(--color-white);
	color: var(--color-dark);
	box-shadow: 0 0 3px #aaa;
	font-size:0.9rem;
	cursor: pointer;
	margin-bottom: 32px;
}
.page-wizard .page-wizard-item.success:before{
	content: '\f00c';
	position: absolute;
	right: 0px;
	font-family: "Font Awesome 6 Pro";
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--color-success);
	top: -20px;	
}
.page-wizard .page-wizard-item.warning:before{
	content: '\f071';
	position: absolute;
	right: 0px;
	font-family: "Font Awesome 6 Pro";
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--color-warning);
	top: -20px;	
}
.page-wizard .page-wizard-item.danger:before{
	content: '\f05a';
	position: absolute;
	right: 0px;
	font-family: "Font Awesome 6 Pro";
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--color-danger);
	top: -20px;	
}

.page-wizard .page-wizard-item i {
	font-size: 1.3rem;
}
.page-wizard .page-wizard-item span {
	position: absolute;
	width: 120px;
	bottom: -100%;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	font-weight: bold;
}
.page-wizard .page-wizard-item.active {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.page-wizard-contents {
	display: none;
}
.page-wizard-contents.active {
	display: block;
}
/*---------------------------------------------------------------
box sellBuy
---------------------------------------------------------------*/
#layer_boxSellBuy .box-inner-header {
	display:flex;
	justify-content:space-between;
	align-items:center;
	height:46px;
	background-color:var(--color-white);
	padding:0px 10px;
	font-size:0.9rem;
}
#layer_boxSellBuy div:last-child {
	font-weight:bold;
	text-align: center;
}

#layer_boxSellBuy .title {
	display:flex;
	align-items:center;
}
#layer_boxSellBuy .title .icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0px 10px 0px 5px;
}
#layer_boxSellBuy .title .title-en {
	font-size:0.8rem;
	display:block;
	color:#a9a9af !important;
	text-align:right;
	margin: 5px 0px;
}
#layer_boxSellBuy .title .title-farsi {
	font-size: 0.9rem;
	font-weight: bold;
	color: var(--color-black);
	margin: 5px 0px;
}
#layer_boxSellBuy .box-inner-status {
	display:flex;
	justify-content:space-between;
	align-items:center;
	height:32px;
	background-color: var(--color-highlight);
	padding:0px 10px;
	font-size:0.9rem;	
}
#layer_boxSellBuy .box-inner-status:nth-child(odd) {
	background-color: var(--color-white) !important;
}
#layer_boxSellBuy .box-inner-status.show-auto{
	display:none;
}
#layer_boxSellBuy .box-inner-status .item {
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:100%;
	padding:0px 5px;
}
#layer_boxSellBuy .box-inner-status .item span {
	font-size: 0.8rem;
	font-weight: normal;
}
#layer_boxSellBuy .box-inner-status .item span:last-child {
	font-weight:bold;
	white-space: nowrap;
}
@media screen and (max-width:768px) {
	#layer_boxSellBuy .box-inner-status.show-flex-auto,
	#layer_boxSellBuy .box-inner-status.show-auto{
		display:flex;
		position:fixed;
		height:36px;
		left:0px;
		right:0px;
		bottom:0px;
		z-index: 2;
		border-top: 1px solid var(--color-grayLight);
	}	
}

/*---------------------------------------------------------------
container
---------------------------------------------------------------*/
.container {
	width: 95% !important;
	max-width: inherit;
}
@media screen and (max-width:768px) { /* tablet */
	.container.container-auto {
		width: 100% !important;
	}
}
@media screen and (max-width:425px) { /* larg mobile */
	.container.container-auto {
		width: 100% !important;
		padding-left: 0px;
		padding-right: 0px;
	}
}
/*---------------------------------------------------------------
nav
---------------------------------------------------------------*/
nav a, nav ul a {
	transition: background-color .3s;
	font-size: 1rem;
	color: var(--color-textLight);
	display: block;
	padding: 0 15px;
	cursor: pointer;
}
nav a:hover , nav ul a:hover {
	color: var(--color-black);
}

/*---------------------------------------------------------------
navbarr
---------------------------------------------------------------*/
nav.navbar {
	position: fixed;
	left: 0px;
	right: 0px; /*60px*/
	width: inherit;
	height: 64px;
	line-height: 64px;
	padding: 0px 60px 0px 20px;
	background-color: #eff2f7;
	z-index: 1000;
}
nav.navbar.danger:before {
	content: '';
    box-shadow: 0 -3px 8px 1.1px var(--color-danger);
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
}

nav.navbar .navbar-title {
	font-size: 2.1rem;
	padding: 0 15px;
}

nav.navbar .navbar-profile {}
nav.navbar .navbar-profile img {
	width: 42px;
	height: 42px;
	margin:0px 5px;
	border-radius: 100%;
	background-color: var(--color-white);
	box-shadow: 0px 0px 3px #aaa;
}
nav.navbar .navbar-profile .counter {
	display: inline-block;
	position:absolute;
	height:16px;
	min-width:32px;
	right:5px;
	top:5px;
	line-height: normal;
	text-align: center;
	border-radius: 15px;;
	background-color: var(--color-infoLight);
	color:var(--color-white);
	font-size: 0.8rem;
}

nav.navbar .navbar-search {
	position: relative;
	display: flex !important;
	align-items: center;	
	width: 220px;
	height: 100%;
	margin:0px 10px;
}
nav.navbar .navbar-search .navbar-search-inner {
	position:relative;
	width:100%;
	height:32px;
	border-radius:5px;
	overflow: hidden;
	background-color: #eaeaea;
	border: 1px solid #ccc;
}
nav.navbar .navbar-search .navbar-search-inner button {
	float:right;
	width:36px;
	height:32px;
	line-height:32px;
	text-align:center;
	cursor: pointer;
	border:none;
	outline:none;
	box-shadow:none;
	border-left:1px solid #ddd;
	border-radius:0px;
	background-color:transparent;
}
nav.navbar .navbar-search .navbar-search-inner button:before {
	width:36px;
	height:32px;
	line-height:32px;
	text-align:center;
	color:#aaa;
	font-family:"Font Awesome 6 Pro";
	font-size:1.3rem;
	content:"\f002";
}
nav.navbar .navbar-search .navbar-search-inner input {
	float: left;
	width: calc(100% - 36px);
	height: 32px;
	line-height: 32px;
	text-align: center;
	content: 'fff';
	cursor: pointer;
	border: none;
	outline: none;
	box-shadow: none;
	text-indent: 5px;
	margin: 0;
	padding: 0;
	text-align: right;
	font-size: 0.8rem;
	background-color:transparent;
}

nav.navbar i {
	line-height: inherit;
	display: inherit;
}
nav.navbar i.newStatus:after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	top: 20%;
	right: 8px;
	background-color: #ffa800;
	border: 2px solid var(--color-white);
	border-radius: 100%;
}

nav.navbar a {
position: relative;
transition: color .2s;
}
nav.navbar a span .label {
	display:flex;
	align-items:strech;
}
nav.navbar .sidenav-trigger {
	margin: 0;
}
nav.navbar .navbar-desktop {
	display: inherit;
}
nav.navbar .navbar-device {
	display: none;
}
@media screen and (max-width:768px) {
	nav.navbar {	
		width: 100%;
		right: 0px;
		padding: 0 5px;
	}
	nav.navbar .nav-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	nav.navbar a {
		position: relative;
		height:100%;
		padding: 0 10px !important;
		font-size: 1rem;
	}
	nav.navbar a.dropdown-trigger .label {
		margin: 0;
		position: absolute;
		bottom: 0;
		height: 24px;
		line-height: 24px;	
	}
	nav.navbar a i {
		height:100%;
		font-size: 1.8em;
		display: flex !important;
		align-items: center;
	}		
	nav.navbar .navbar-desktop {
		display:none !important;
	}
	nav.navbar .navbar-device {
		display: inherit;
	}
	nav.navbar i.newStatus:after {
		top: 15%;
	}	
}

/*---------------------------------------------------------------
navsideDes, for desktop
---------------------------------------------------------------*/
aside.navsideDesk {
	position: fixed;
	top: 0px;
	right: 0px;
	width: 60px;
	height: 100%;	
box-shadow: none;
	background-color: #6232f9;
	border-top-left-radius: 20px;
	z-index:1001;
}
aside.navsideDesk .navside-title {
	padding: 0 10px;
	height: 64px;
	line-height: 64px;
	font-size: 24px;
	text-align: center;
	box-sizing: content-box;
	color: var(--color-white);
}
aside.navsideDesk .navside-title img.logo{
border-radius: 100%;
border: 2px solid #fff;	
}
aside.navsideDesk .collection {
	border:none;
	margin-top: 55px;
}
aside.navsideDesk .collection .collection-item {
	background-color: transparent;
	color:var(--color-white);
	font-size:0.8rem;
	border:none;
	outline:none;
	padding:10px 10px;
}
aside.navsideDesk .collection .collection-item:hover {
	background-color: var(--color-secondary);
}
aside.navsideDesk .collection .collection-item.active {
	background-color: #e8ecf7;
	color: var(--color-black);
	margin-right: 5px;
	border-top: none;
	border-radius: 0px 10px 10px 0px;
}
/*tabMod*/
aside.navsideDesk .collection .collection-item.collection-item-tabMod {
	background-color:var(--color-secondary);
	border-radius: 0px 10px 10px 0px;
	margin-right: 10px;
padding: 10px 10px;
font-size: 0.9rem;
	overflow:visible;
}
aside.navsideDesk .collection .collection-item.collection-item-tabMod:before, 
aside.navsideDesk .collection .collection-item.collection-item-tabMod:after {
	position: absolute;
	content: "";
	width: 10px;
	height: 10px;
	left: 0;
	bottom: 100%;	
	background-color: var(--color-secondary)!important;
}
aside.navsideDesk .collection .collection-item.collection-item-tabMod:after {
	bottom:inherit;
	top:100%;
}

aside.navsideDesk .collection .collection-item.collection-item-tabMod.active {
	background-color: #e8ecf7;
	color: var(--color-black);
	z-index:2;
}
aside.navsideDesk .collection .collection-item.collection-item-tabMod.active:before, 
aside.navsideDesk .collection .collection-item.collection-item-tabMod.active:after {
	background-color: #e8ecf7 !important;
}
aside.navsideDesk .collection .collection-item.collection-item-tabMod span {
display: inline-block;
writing-mode: vertical-rl;
}
aside.navsideDesk .collection .collection-item.collection-item-tabMod span:before,
aside.navsideDesk .collection .collection-item.collection-item-tabMod span:after {
	position: absolute;
	content: "";
	width: 10px;
	height: 10px;
	left: 0;
	bottom: 100%;	
background: var(--color-secondary);
border-radius: 0px 0px 0px 50px;
	z-index:1;
}
aside.navsideDesk .collection .collection-item.collection-item-tabMod span:after {
	bottom:inherit;
	top:100%;
border-radius: 50px 0px 0px 0px;	
}
aside.navsideDesk .collection .collection-item.collection-item-tabMod:first-child span:before,
aside.navsideDesk .collection .collection-item.collection-item-tabMod.active:first-child span:before{
	background: var(--color-primary) !important;
}
aside.navsideDesk .collection .collection-item.collection-item-tabMod:last-child span:after,
aside.navsideDesk .collection .collection-item.collection-item-tabMod.active:last-child span:after{
	background: var(--color-primary) !important;
}
aside.navsideDesk .collection .collection-item.collection-item-tabMod.active span:before {
	background: var(--color-secondary);
}
aside.navsideDesk .collection .collection-item.collection-item-tabMod.active span:after {
	background: var(--color-secondary);
}
aside.navsideDesk .collection .collection-item.collection-item-tabMod span i {
display: inline-block;
font-size: 1rem;
	margin-top: 5px;
	transform: rotateZ(90deg);
}
aside.navsideDesk .collection .collection-item.collection-item-tabMod span i:before {
display: inline-block;
}
	
aside.navsideDesk .collection .collection-item i {
	display: block;
	font-size: 1.4rem;
}
@media screen and (max-width: 768px) {
	aside.navsideDesk {
		display: none;
	}
}

/*---------------------------------------------------------------
navsideDiv, for device
---------------------------------------------------------------*/
aside.navsideDiv {
display: none;
	z-index:1001;
}
aside.navsideDiv .sidenav  {
box-shadow: none;
	background-color: #eee;
	width: 300px;
}
aside.navsideDiv .navside-title {
	padding: 0 10px;
	height: 64px;
	line-height: 64px;
	font-size: 24px;
	text-align: center;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	box-sizing: content-box;
}
aside.navsideDiv .logo-container i {
	line-height: inherit;
}
@media screen and (max-width: 768px) {
	aside.navsideDes {
		display: fixed;
	}
}


/*---------------------------------------------------------------
main
---------------------------------------------------------------*/
aside.buySell {
	position:fixed;
	left:0px;
	width:0px;
	top:64px;
	bottom:0px;
	padding:10px 0 0 5px;
	margin:0px;
	z-index:999;
	transition: all 0.3s;
	opacity:0;
}
aside.buySell.vCollapse {
	width:260px;
	opacity:1;
}
aside.buySell .buySell-topBar {
	display:flex;
	justify-content: space-between;
	align-items: center;
	width:100%;
	height:30px;
	direction:ltr;
}
aside.buySell .buySell-topBar .right{
	color: var(--color-white);
	float: inherit !important;
	text-align: right;
}
aside.buySell .buySell-topBar .right a{
	color: var(--color-white);
	margin: 0 3px;
}

aside.buySell .buySell-topBar .left{
	display: flex;
	float: inherit !important;
}
aside.buySell .buySell-topBar .left span{
	display:inline-block;
	width:16px;
	height:16px;
	border-radius:100%;
	margin: 0 3px;
	cursor:pointer;
	box-shadow: 1px 1px 3px #666;
}
aside.buySell .buySell-topBar .left span:active{
	opacity:0.4;
}
aside.buySell .buySell-topBar .left span.active {
	border-width: 2px;
	border-style: solid;
	background-color:transparent !important;
}
aside.buySell .buySell-topBar .left span.sell { background-color: var(--color-danger);border-color:var(--color-danger); }
aside.buySell .buySell-topBar .left span.buy { background-color: var(--color-success);border-color:var(--color-success); }
aside.buySell .buySell-topBar .left span.warning { background-color: var(--color-warning);border-color:var(--color-warning); }
aside.buySell .buySell-topBar .left span.other { background-color: var(--color-secondary);border-color:var(--color-secondary); }

aside.buySell .buySell-content {
	height:calc(100% - 30px);
	padding: 5px 0px 0px 5px;
	overflow-y:auto;
}
aside.buySell .buySell-content .buySell-content-card {
	position: relative;
	padding:0px;
	border-radius: var(--radius);
	margin-bottom: 5px;
	overflow:hidden;
}

aside.buySell .buySell-content .buySell-content-card:before {
	position: absolute;
	width: 16px;
	height: 16px;
	line-height: 24px;
	font-family: "Font Awesome 6 Pro";
	content: '\f00c';
	left: 6px;
	top: 6px;
	color: var(--color-success);
}
aside.buySell .buySell-content .buySell-content-card.finished:after {
	position: absolute;
	width: 16px;
	height: 16px;
	line-height: 24px;
	font-family: "Font Awesome 6 Pro";
	content: '\f00c';
	left: 7px;
	top: 8px;
	color: var(--color-info);
}

aside.buySell .buySell-content .buySell-content-card.sell {
	border-left:7px solid var(--color-danger);
}
aside.buySell .buySell-content .buySell-content-card.buy {
	border-left:7px solid var(--color-success);
}
aside.buySell .buySell-content .buySell-content-card.finished {
	border-right:7px solid var(--color-info);
}
aside.buySell .buySell-content .buySell-content-card.finished.makoos {
	border-right:7px solid var(--color-secondary);
}
aside.buySell .buySell-content .buySell-content-card.temp {
	border-right:7px solid var(--color-warning);
}
aside.buySell .buySell-content .buySell-content-card .buySell-content-card-inner {
	background-color: var(--color-white);
	display:flex;
	flex-wrap: wrap;
	padding:8px;
	width:100%;
	height:110px;
}
#div_modal_coinBuySellForm {
	max-height: 80% !important;
}
/*aside.buySell .buySell-content*/
.buySell-content-card .buySell-content-card-inner .header {
	display:flex;
	justify-content:space-between;
	align-items: center;
	width:100%;
height: 24px;
}
/*aside.buySell .buySell-content*/
.buySell-content-card .buySell-content-card-inner .header .title {

}
/*aside.buySell .buySell-content*/
.buySell-content-card .buySell-content-card-inner .header .title .icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 0px;
}
/*aside.buySell .buySell-content*/
.buySell-content-card .buySell-content-card-inner .header .title span {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: bold;
	color: var(--color-black);
}
aside.buySell .buySell-content .buySell-content-card .buySell-content-card-inner .header .tools {
display:flex;
	justify-content:space-between;
	direction:ltr;
	padding-left:18px;
}
aside.buySell .buySell-content .buySell-content-card .buySell-content-card-inner .header .tools a {
	font-size:0.8rem;
	color: var(--color-gray);
	margin: 0 6px;
}
aside.buySell .buySell-content .buySell-content-card .buySell-content-card-inner .main {
	width:100%;
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;
	align-items: center;
	padding-top: 5px;
}
aside.buySell .buySell-content .buySell-content-card .buySell-content-card-inner .main .value {
	width: 50%;
	text-align:right;
	font-size:0.9rem;
	font-weight:bold;
	color: #666;
}
aside.buySell .buySell-content .buySell-content-card .buySell-content-card-inner .main .percent {
	width: 50%;
	text-align:left;
	font-size:0.9rem;
	font-weight:bold;
	color: #666;
	direction: ltr;
}
aside.buySell .buySell-content .buySell-content-card .buySell-content-card-inner .main .progress {
	background-color: #d7dbe5;
	height:2px;
	padding:0;
	margin:0;
}
aside.buySell .buySell-content .buySell-content-card .buySell-content-card-inner .main .progress .determinate {
	background-color: var(--color-secondary);
}

aside.buySell .buySell-content .buySell-content-card .buySell-content-card-inner .footer {
	width:100%;
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;
	align-items: center;
	padding-top: 5px;
}
aside.buySell .buySell-content .buySell-content-card .buySell-content-card-inner .footer .price {
	width: 65%;
	text-align:right;
	font-size:0.9rem;
	font-weight:bold;
	font-family:"Vazir-farsi";
}
aside.buySell .buySell-content .buySell-content-card.buy .price {
	color: var(--color-success);
}
aside.buySell .buySell-content .buySell-content-card.sell .price {
	color: var(--color-danger);
}
aside.buySell .buySell-content .buySell-content-card.finished .price {
	color: var(--color-info);
}
aside.buySell .buySell-content .buySell-content-card .buySell-content-card-inner .footer .date {
	width: 35%;
	text-align:left;
	font-size:0.9rem;
	color: var(--color-gray);
	text-align:center;
	direction: ltr;
}

/* form */
/*aside.buySell .buySell-content*/
.buySell-content-card.form .buySell-content-card-inner {
	height: inherit;
}
/*aside.buySell .buySell-content*/
.buySell-content-card.form .buySell-content-card-inner .main .input-field{
	margin-top:10px;
	margin-bottom:5px;
}
/*aside.buySell .buySell-content*/
.buySell-content-card.form .buySell-content-card-inner .main .input-field label{
	font-size: 0.9rem;
}
/*aside.buySell*/
.buySell-content .buySell-content-card.form .buySell-content-card-inner .main input[type='text'],
.buySell-content .buySell-content-card.form .buySell-content-card-inner .main input[type='number'] {
	font-size:0.9rem !important;
	height:32px;
	color: var(--color-dark);
	/*font-family: 'vazir-farsi' !important;*/
}

/*aside.buySell*/
.buySell-content-card.form .buySell-content-card-inner .footer table{
	width: 100%;
}
/*aside.buySell*/
.buySell-content-card.form .buySell-content-card-inner .footer table tr{
	border:none;
}
/*aside.buySell*/
.buySell-content-card.form .buySell-content-card-inner .footer table tr td:first-child{
	text-align: right;
}
/*aside.buySell*/
.buySell-content-card.form .buySell-content-card-inner .footer table tr td:last-child{
	font-family: 'vazir-farsi' !important;
	font-weight:bold !important;
}
/*aside.buySell*/
.buySell-content-card.form .buySell-content-card-inner .footer table tr td{
	font-size: 0.8rem;
	color: var(--color-gray);
	padding: 0px;
	height: 26px;
	min-height: 26px;	
}
/*aside.buySell*/
.buySell-content-card.sell.form button {
	background-color: var(--color-danger);
	color: var(--color-white);
	border-radius: 5px;
    font-weight: bold !important;
    height: 42px;
}
/*aside.buySell*/
.buySell-content-card.buy.form button {
	background-color: var(--color-success);
	color: var(--color-white);
	border-radius: 5px;
    font-weight: bold !important;
    height: 42px;
}
/*aside.buySell*/
.buySell-content .buySell-content-card.form:before{
	content:'' !important;
	display:none;
}
/*aside.buySell*/
.buySell-content .buySell-content-card.form .buySell-content-card-inner .header .tools{
	padding-left:0px !important;
}

@media screen and (max-width:768px) {
	.buySell-content-card.form button {
		margin: 3px 0px;	
	}	
	.buySell-content-card.form .buySell-content-card-inner .main {}
	.buySell-content-card.form .buySell-content-card-inner .main .input-field:first-child {
		margin-left:10px;
	}	
	.buySell-content-card.form .buySell-content-card-inner .main .input-field:last-child {
		margin-right:10px;
	}	
	.buySell-content-card.form .buySell-content-card-inner .footer table tr td{
		font-size: 1rem;
		color: var(--color-dark);
		text-shadow: none;
	}	
}

/*---------------------------------------------------------------
main
---------------------------------------------------------------*/
main {
	position:fixed;
	left:0px;
	right: 60px;
	top:64px;
	bottom:0px;
	padding: 15px;
	z-index:999;
	transition: left 0.3s;
}
main .main-inner {
	position: absolute;
	top: 10px;
	bottom: 10px;
	right: 0px;
	left: 10px;
	padding: 15px;
	/* background-color: #e8ecf7; */ /* old */
	background-color: #FAFBFC;
	border-radius: 10px;	
	overflow: hidden auto;
}
main .main-inner .breadcrumbs{
	position: relative;
	display: block;
	padding: 10px;
	font-size: 1rem;	
	margin: 0 0 10px 0;
	display: none; /* temp */
}
main .main-inner .breadcrumbs li{
	display: inline-block;
	font-size: 0.9rem;
}
main .main-inner .breadcrumbs li:after {
	content:'/';
	padding: 0 5px;
	color: #888;
}
main .main-inner .breadcrumbs li:last-child:after {
	content:'';
}
main .main-inner .breadcrumbs li a{
	color: #888;
	cursor: pointer;
}
main .main-inner .breadcrumbs.active li a{
	color: #333;
	cursor: inherit;
}

main .main-inner .content {
	padding: 10px;
}

main .main-inner header {
	font-size:1.2rem;
	font-weight:bold;
	margin: 5px 0 10px 0;
}
main .main-inner header i {
	font-size:1.2rem;
}
main.vCollapse {
	left:260px;
}
main .handle-vCollapse {
	position: absolute;
	width: 18px;
	height:32px;
	line-height: 32px;
	left:5px;
	top: 50%;
	text-align: center;
	transform:translateY(-50%);
	border-radius: 5px;
	cursor: pointer;
	font-size: 1rem;
	color: var(--color-primary);
	background-color:#ccc;
	z-index: 2;
}
main .handle-vCollapse:before {
	content:'\f105';
	font-family: 'Font Awesome 6 Pro';
}
main.vCollapse .handle-vCollapse:before {
	content:'\f104';
	font-family: 'Font Awesome 6 Pro';
}

@media screen and (max-width:768px) {
	main {	
		width: 100%;
		right: 0px;
		/*padding-bottom: var(--footer-height);*/
	}

	main section {
		padding-bottom: var(--footer-height) !important;
	}

	main.vCollapse {
		right: inherit;
	}	
	main .handle-vCollapse {
	left: -3px;
	}
	main .main-inner header {
		margin: 10px 0 !important;
	}	
}

@media screen and (max-width:767px) {
	main .main-inner {	
		left:0;
		right:0;
		top:0;
		bottom:0;
		padding:10px 5px 0 5px;
		border-radius:0.01px;
	}
	main .main-inner .content {
		padding: 10px 0px;
	}
	main .handle-vCollapse {
		display: none;
	}	
	
}

/*---------------------------------------------------------------
app-perloade
---------------------------------------------------------------*/
page-perloade,
app-perloade{
	position: fixed;
	display:none;
	left:0;
	top:56px; /* app-header height */
	width:100vw;
	height:calc(100vh - 52px); /* app-footer height */
	background-color: #eee;
	z-index: 100003;
}
/*---------------------------------------------------------------
footer
---------------------------------------------------------------*/
.app-footer {
	position: fixed;
	display: none;
	height: 52px;
	width: 100%;
	left: 0px;
	bottom: 0px;
	padding: 7px 15px;
	background-color: #fff;
	box-shadow: 0px -2px 15px #00000015;
	/* border-radius: 25px 25px 0 0; */
	border-top: 1px solid #ddd;
	z-index: 100002;
	transition: all 0.5s;
}
.app-footer ul{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;	
	height: 100%;
	line-height:1;
}
.app-footer ul li{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	border:none;
	padding:0;
	font-size: 0.9rem !important;
	color: #444;
	transform: scale(1);
	transition: opacity,transform 0.3s;
}
.app-footer ul li i {
	font-size: 1.2rem;
	color: var(--color-dark);
	margin-bottom: 5px;
}
.app-footer ul li span,
.app-footer ul li a,
.app-footer ul li a:visited,
.app-footer ul li a:link {
	font-size: 0.9rem;
	color: var(--color-dark);
}
.app-footer ul li:active {
	opacity: 0.7;
	transform: scale(1.2);
}
.app-footer ul li.active,
.app-footer ul li.active i,
.app-footer ul li.active span,
.app-footer ul li.active a,
.app-footer ul li.active a:visited,
.app-footer ul li.active a:link {
	color: var(--color-primary);
}
.app-footer ul li .counter {
	position: absolute;
	top: -5px;
	right: -9px;
	background-color: var(--color-primaryAlpha);
	color: #000;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	border-radius: 50%;
	font-size: 0.8rem;	
}
.app-footer .search-box {
	position:fixed;
height: 60px;
	left:0px;
	right:0px;
	top:inherit;
bottom: -100%;
	padding: 0 1rem;
	background-color: #fff;
	color:#000;
	z-index:1;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;	
}
.app-footer .search-box .search-input {
width: calc(100% - 59px);
padding-right : 5px !important;
background-color:#fff;
}
.app-footer .search-box .close-btn {
width: 54px;
height: 59px;
line-height: 59px;
float: right;
font-size: 1.5em;
background-color:#fff;
}
.app-footer .search-box.active {
bottom: 0;
}
@media screen and (max-width:768px) {
	.app-footer {
		display:block;
	}
}

/*---------------------------------------------------------------
footer
---------------------------------------------------------------*/
.app-footer-2 {
	display:none;
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	height:var(--footer-height);
	z-index: 100002;
}
.app-footer-2 ul {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;	
	margin:0;
	padding:0 10px;
	height:100%;
}
.app-footer-2 ul li {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	height:100%;
	min-width: var(--footer-height);
	cursor:pointer;
	font-size: 0.9rem !important;
	color: var(--color-textSelected);
	background-color:transparent;
	opacity:1;
	transition: opacity 0.3s;
}
.app-footer-2 ul li.active {
	opacity:0;
}
.app-footer-2 ul li i {
	font-size: 1.2rem;
	color: var(--color-textSelected);
	margin-bottom: 5px;
}
.app-footer ul li .title{
	font-size: 0.9rem;
	color: var(--color-dark);
	white-space: nowrap;
}
.app-footer-2 ul .border {
	position:absolute;
	height:100%;
	border-radius:25px 25px 0 0;
	left:0;
	bottom:0;
	opacity:0;
	background-color:transparent;
	transition: transform 0.3s;
}
.app-footer-2 ul .border .icon {
	position: absolute;
	width: 80%;
	height: 80%;				
	top: -12px;
	left: 50%;
	transform: translateX(-50%);			
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--color-white);
	background-color: var(--color-secondary);
	box-shadow: 0px 0px 4px rgb(0 0 0 / 40%);
	color: var(--color-primary);
}
.app-footer-2 ul .border .icon i {
	color: var(--color-white);
	margin:0;
	opacity:1;
	transition: opacity 0.2s;	
}
.app-footer-2 ul .border .title {
	position: absolute;
	width: 100%;
	bottom: 4px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	z-index: 1;
	font-size: 0.9rem;
	font-weight: bold;
	white-space: nowrap;
}			
.app-footer-2 ul .border .footer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% + 5px);
	height: 100%;
	position: relative;
	overflow: hidden;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -9px;
	border-radius: 15px 15px 0 0;
}
.app-footer-2 ul .border .footer:before{
	content: '';
	position: absolute;
	bottom: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 1px solid rgb(0 0 0 / 6%);
	box-shadow: 0px 64px 0px 64px #fff;
}			
.app-footer-2 ul .left {	
	display:block;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	min-width:inherit !important;
	width:100%;
	background-color:#fff;
	border-radius: 0 25px 0 0;
	box-shadow: -1px 1px 4px rgb(0 0 0 / 60%);
	z-index:-1;
	transition: transform 0.3s;
}	
.app-footer-2 ul .right {	
	display:block;
	position:absolute;
	left:0;
	top:0px;
	bottom:0px;
	min-width:inherit !important;
	background-color:#fff;
	border-radius: 25px 0 0 0;
	box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
	z-index:-1;
	transition: transform 0.3s;
}
@media screen and (max-width:768px) {
	.app-footer-2 {
		display:block;
	}
}

/*---------------------------------------------------------------
tradingview
---------------------------------------------------------------*/
.tradingview-widget-container {
	height: 560px;
}
.tradingview-widget-container div:first-child {
	height: 100% !important;
}
.box-tv-ht header {
	position: absolute;
    width: 100%;
	background-color:#fff !important;
	z-index: 2;
}
.box-tv-ht .content {
	height: 310px;
	left:0;
	right:0;
    overflow: hidden;
    position: absolute;
	top: -26px;
    z-index: 1;
}
@media screen and (max-width:768px) {
	.tradingview-widget-container {
		height: 100%;
	}
}

/* --------------------------------------------------------------------------
dashboard page
-----------------------------------------------------------------------------*/
.dashboard {}
.dashboard .dashboard-content {
	display:flex;
	align-items: flex-start;
}
.dashboard .dashboard-content .sideRight {
	padding:5px;
}
.dashboard .dashboard-content .sideRight .sideRight-inner {
width:100%;
	height:100%;
	padding:10px; 
	overflow: auto;
}
.dashboard .dashboard-content .sideLeft {
	padding:5px 5px 0px 5px;
}
.dashboard .dashboard-content .sideLeft .sideLeft-inner {
width:100%;
	height:100%;
}

.dashboard .dashboard-toolsBar {
	display:flex;
	justify-content: space-between;
	width:100%;
}
.dashboard .dashboard-toolsBar .toolsFirst {
	display:flex;
	justify-content: flex-start;
}
.dashboard .dashboard-toolsBar .toolsLast {
	display:flex;
	justify-content: flex-end;
}
.dashboard .dashboard-toolsBar .tab-bar {
	width:100%;
}	
.dashboard .dashboard-toolsBar .tab-bar button {
	display:none;
}
.dashboard .dashboard-toolsBar .tab-bar .tab {
	-webkit-box-flex: unset;
    -webkit-flex-grow: unset;
    -ms-flex-positive: unset;
    flex-grow: unset;
}	
	
/* cardAssets */

.dashboard .cardAssets {
	padding: 0px;
}
.dashboard .cardAssets.cardAssets-desktop {
	display:block
}
.dashboard .cardAssets.cardAssets-device{
	display:none
}	
.dashboard .cardAssets .cardAssets-inner {
	/*height:180px;*/
	max-height:180px;
	width:100%;
	padding: 15px;
	margin-top: 30px;
	border-radius: var(--radius);
	background-color: #45de82;
}
.dashboard .cardAssets .cardAssets-inner .header {
	display:flex;
	justify-content:space-between;
	align-items: flex-start;
	width: 100%;
	color:var(--color-white);
	font-size: 1.2rem;
}
.dashboard .cardAssets .cardAssets-inner .header i {
	font-size: 1.8rem;
	cursor:pointer;
}
.dashboard .cardAssets .cardAssets-inner .main {
	display:flex;
	justify-content:center;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	height:40%;
}
.dashboard .cardAssets .cardAssets-inner .main .price {
	display:block;
	width:100%;
	color:var(--color-white);
	font-size: 1.7rem;
	font-weight:bold;
	text-align:center;
}
.dashboard .cardAssets .cardAssets-inner .main .price-secondary {
	display:block;
	width:100%;
	color:var(--color-light);
	font-size: 1.3rem;
	font-weight:normal;
	text-align:center;
	margin: 5px 0;
}
.dashboard .cardAssets .cardAssets-inner .main .price .price-type {
	display:block;
	color:var(--color-white);
	font-family: inherit;
	font-size: 1rem;
	margin-top:5px;
}
.dashboard .cardAssets .cardAssets-inner .main .price-2 {
	display:block;
	width: 100%;
	margin-top: 5px;
	color:var(--color-white);
	font-family: "vazir-farsi" !important;
	font-size: 1rem;
	font-weight:normal;
	text-align:center;
}
.dashboard .cardAssets .cardAssets-inner .footer {
	text-align:right;
	font-family:"vazir-farsi" !important;
	font-size: 1rem;
	padding-top:10px;
}
.dashboard .cardAssets .cardAssets-inner .footer .up {
	color: var(--color-white);
	font-family:'vazir-farsi' !important;
	text-align:center;
	line-height: 1.3;
}
.dashboard .cardAssets .cardAssets-inner .footer .up:after {
	font-family:"Font Awesome 6 Pro";
	/*content:"\f062";*/
	font-size: 1rem;
	color: var(--color-white);
	text-align:center;
}
.dashboard .cardAssets .cardAssets-inner .footer .down {
	color: yellow;
	font-family:'vazir-farsi' !important;
	font-size: 0.9rem;
	text-align:center;
}
.dashboard .cardAssets .cardAssets-inner .footer .down:after {
	display:none;
	font-family:"Font Awesome 6 Pro";
	content:"\f063";
	font-size: 1rem;
	color: var(--color-danger);
	text-align:center;
}

/* cardAssets */

.dashboard .listTrading {
	height: calc(100% - 180px);
	padding: 0px;
}
.dashboard .listTrading .header {
	margin: 10px 5px;
}
.dashboard .listTrading .listTrading-inner {
	width: 100%;
	border-radius: var(--radius);
}

@media screen and (max-width:768px) {
	.dashboard .dashboard-content {
		flex-direction:column;
	}	
	.dashboard .dashboard-toolsBar {
		flex-direction: column-reverse;
	}
	.dashboard .dashboard-toolsBar .toolsFirst,
	.dashboard .dashboard-toolsBar .toolsLast{
		width: 100%;
		margin-bottom:10px;
		padding-bottom: 10px;
		justify-content: space-between !important;
		border-bottom: 1px solid var(--color-grayLight);		
	}

	.dashboard .cardAssets.cardAssets-desktop {
		display:none
	}
	.dashboard .cardAssets.cardAssets-device{
		display:block
	}
	.dashboard .cardAssets {
		width:100%;
		margin-bottom:5px;
	}
	.dashboard .cardAssets .cardAssets-inner {
		/*height:150px;*/
		padding:10px;
		margin-top: 0px;
	}
	.dashboard .cardAssets .cardAssets-inner .footer {
		margin-top: -3px;
	}	
}

/* --------------------------------------------------------------------------
portfolio page
-----------------------------------------------------------------------------*/
.portfolio {
	height:100%;
}
.portfolio .portfolio-content {
	position:relative;
	height:100%;
	padding:0 5px !important;
}
.portfolio .portfolio-content .sideTop {
	overflow-x: auto;
	overflow-y: hidden;
	max-height: 560px;
	/*width:100%;*/
}
.portfolio .portfolio-content .sideTop .sideTop-content {
	overflow-y:hidden;
}
.portfolio .portfolio-content .sideTop .sideTop-statusBar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0px;	
	font-size: 0.9rem;
	background-color: var(--color-white);
	padding: 0px 0 0 0;
	min-height: 36px;
}
.portfolio .portfolio-content .sideTop .sideTop-statusBar li span:first-child {
	font-weight:bold;
	font-size: 1rem;
}

.portfolio .portfolio-content .sideBottom {
	width: 100%;
}

/* box styles */

/* transactionFactor */
.portfolio .transactionFactor {
	direction:ltr;
	font-size: 0.9rem;
}
.portfolio .transactionFactor .transactionFactor-level {
	position:relative;
}
.portfolio .transactionFactor .transactionFactor-level .transactionFactor-level-location {
	position: absolute;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #666;
	top: 12px;
	left: 50%;
	transform:translateX(-50%);
}
.portfolio #layer_orderFinished_info24h {
	font-size: 0.9rem;
}
@media screen and (max-width:768px) {
	.portfolio {
		padding-bottom: 42px;
	}	
	.portfolio .portfolio-content {
		/*overflow-y:auto;*/
	}
	.portfolio .portfolio-content .sideTop {
		max-height: inherit;
		padding-top: 0px;
		padding-bottom: calc(var(--footer-height));	/* status.height + footer.height */
	}
	.portfolio .portfolio-content .sideBottom {
		flex-direction: column;
		width:inherit;
		left:5px;
		right: 5px;	
		/* ------ */
		display:none !important;	
	}		
	.portfolio .portfolio-content .sideBottom .box {
		width:100%;
		height:inherit;
		padding: 0px 0px 5px 0px !important;
	}
	.portfolio .portfolio-content .sideTop .sideTop-statusBar {
		position: fixed; /* absolute; */
		bottom: 10px;
		left: 0;
		right: 0;
		padding: 10px;
		padding-bottom: var(--footer-height);
		border-top: 1px solid #eee;		
		border-bottom: 1px solid #eee;	
		background-color: var(--color-grayLight);
	}	
	.portfolio .portfolio-content .sideTop .sideTop-statusBar li {
		text-align:center;
		direction:ltr;
	}	
	.portfolio .portfolio-content .sideTop .sideTop-statusBar li span {
		font-weight:bold;
		font-size: 1rem;
	}	
	.portfolio .tradeChart-content .card {
		border:0 !important;
		padding:0 !important;
		margin:0 !important;
		box-shadow: none !important;
		height:0;
	}
}

/* --------------------------------------------------------------------------
supportList
-----------------------------------------------------------------------------*/
.supportList {
	padding:10px 0px;
	min-height:200px;
}
.supportList th,
.supportList td {
	text-align:center;
}

.supportList .supportList-paging {
	height:46px;
	width:50%;
	margin:0 auto;
	display:flex;
	justify-content: center;
	align-items:center;
	padding:5px 10px;
	background-color: var(--color-white);
}

.supportList .supportList-paging li a{
	display: flex;
	align-items: center;
	justify-content: center;	
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: var(--color-gray);	
	cursor:pointer;
}
.supportList .supportList-paging li.active{
	border: 2px solid;
	border-radius: 100%;
	color: var(--color-secondary);
}
.supportList .supportList-pagingInfo{
	height: 46px;
	width: 50%;
	margin: 0 auto;
	font-weight: normal;
	font-size: 1rem;
	margin-top: 8px;
	text-align: center;
	color: var(--color-gray);
}
@media screen and (max-width: 768px) {
	.supportList {
		padding: 0px 0px;
	}	
	.supportList .supportList-paging {
		width: 100%;
	}
	.supportList .supportList-paging li a {
		width:18px;
		height:18px;
	}
	.supportList .supportList-pagingInfo {
		width:100%;
		display: none;
	}
}

/* --------------------------------------------------------------------------
myDropdown
-----------------------------------------------------------------------------*/
/* Style The Dropdown Button */
.myDropdown-btn {
	background-color: #4CAF50;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.myDropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.myDropdown-content {
	/*display: none;*/
	opacity:0;
	z-index:-1;
	transform:scale(1,1) perspective(500px) translate3d(0, -10px, 1px);
	
	position: absolute;
	left:0;
	background-color: #fff;
	min-width: 160px;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
	
	transition: opacity,transform 0.2s;
}

/* Links inside the dropdown */
.myDropdown-content a {
	display: flex;
	align-items:right;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
}
.myDropdown-content a i {
	margin:0 5px;
	color:var(--color-dark);
}

/* Change color of dropdown links on hover */
.myDropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.myDropdown:hover .myDropdown-content {
	/*display: block;*/
	opacity:1;
	transform:scale(1,1) perspective(500px) translate3d(0px, 0px, 1px);
	z-index:1;	
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.myDropdown:hover .dropbtn {
	background-color: #3e8e41;
}

/*------------------------------------------------------------------------------
.dropdown
------------------------------------------------------------------------------*/
.dropdown {
	position: relative !important;
	display: inline-block !important;
	cursor:pointer !important;
	padding: 0 15px 0 10px;
}
.dropdown.dropdown-btn {
	display:flex !important;
	align-items: center;
	justify-content: center;
	border:none;
	background-color: var(--color-white);
	border: 1px solid var(--color-grayLight);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	padding:10px !important;
	transition: all 0.3s;
}
.dropdown.dropdown-btn:hover {
	transform: scale(1.15);
}
.dropdown.dropdown-btn .dropdown-title {
	padding:0 !important;
	margin:0 !important;
}
.dropdown.dropdown-btn .dropdown-title i {
	padding: 0 !important;
	margin: 0 !important;
}
.dropdown.dropdown-btn:before {
	display:none;
}
.dropdown.dropdown-right {
padding: 0 10px;
}
.dropdown .dropdown-title {
	width: auto  !important;
	display:inline-block;
	margin-right: 5px;
	padding: 0 5px 0 0;
	color: var(--color-dark);
}
.dropdown .dropdown-title i {
	margin-right: 5px;
	margin-left: inherit;
	line-height: inherit;
}
.dropdown i {
	width: auto !important;
	display:inline-block;
}
.dropdown .dropdown-counter {
	position:absolute;
	font-size: 0.8rem;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	background-color: var(--color-warning);
	border-radius: 50%;
	border-radius: 50%;
	left: -5px;
	top: 8px;
}
.dropdown.dropdown-right .dropdown-counter {
	left: unset;
	right: 7px;
}
.dropdown:before {
	position:absolute;
	font-family:fontAwesome, 'Font Awesome 6 Pro';
	content:'\f107';
	right:5px;
	top: 50%;
	transform: translateY(-50%);	
	transition: all 0.5s;
}
.dropdown.dropdown-show:before {
	/*content: '\f106' !important;*/
	transform: rotate(180deg) translateY(50%);
}
.dropdown.dropdown-right .dropdown-title {
	direction:rtl;
	margin-left: 5px;
	margin-right: unset;
	padding: 0 0 0 5px;	
}
.dropdown.dropdown-right .dropdown-title i {
	margin-left: 5px;
	margin-right: inherit;
}
.dropdown.dropdown-right:before {
	left:5px !important;
	right:inherit;
}
.dropdown .dropdown-content {
	position:fixed;
	display:none;
	left: 0;
	right: unset;
	top: 100%;
	/*min-width: 180px;*/
	text-align: left !important;	
	background-color: #fff;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
	border: none;
	z-index: 1;
	transition: opacity 0.5s;
} 
.dropdown.dropdown-show .dropdown-content{
	display:block !important;
}
.dropdown .dropdown-content hr , .dropdown .dropdown-content-auto hr {
	margin-top: 0px;
	margin-bottom: 0px;
}
.dropdown.dropdown-right .dropdown-content {
	right: 0;
	left:unset;
	text-align: right !important;
	direction: rtl;
}

.dropdown .dropdown-content a {
	color: var(--color-dark) !important;
	height:46px !important;
	line-height: 46px !important;
	padding: 0 10px !important;
	text-decoration: none;
	text-shadow:none;
	text-align:right !important;
	display: block !important;
	/*pointer-events: none;*/
}
.dropdown .dropdown-content a[disabled] { 
	color: var(--color-gray) !important;
	cursor:default;
}
.dropdown .dropdown-content .dropdown-content-center a{
text-align:center !important;
}
.dropdown .dropdown-content .dropdown-content-left a {
text-align:left !important;
}
.dropdown .dropdown-content .dropdown-content-right a {
text-align:right !important;
}

/*bordered*/
.dropdown.dropdown-bordered .dropdown-content a{
border-bottom:1px solid #f1f1f1 !important;
}
.dropdown.dropdown-bordered .dropdown-content a:last-child {
border-bottom:none !important;
}

.dropdown .dropdown-content a i {
display: inline-block !important;
	margin-right : 10px;
	margin-left : 0px;
	color: #888;
	font-size: inherit;	
}
.dropdown.dropdown-right .dropdown-content a i {
	margin-left : 10px;
	margin-right : 0px;
	color: #888;
	width: auto;
}
.dropdown .dropdown-content a:hover {
	background-color: #f1f1f1 !important
}

/*.dropdown:hover > .dropdown-content {
visibility: visible;
opacity: 1;
}*/

/* item counter label*/
.dropdown > .dropdown-content > a .dropdown-item-counter , .dropdown > .dropdown-content-auto > a .dropdown-item-counter {
display: block;
margin: 0;
white-space: nowrap;
}
.dropdown > .dropdown-content > a .dropdown-item-counter,
.dropdown > .dropdown-content-auto > a .dropdown-item-counter {
	font-weight: normal;
	font-weight: normal;
	font-size: .7rem;
	display: inline-block;
	vertical-align: middle;
	right: 5px;
	background-color: rgba(0,0,0,0.1);
	border-radius: 100%;
	min-width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	top: 50%;
	transform: translateY(50%);
	float: right;
	margin: 0 0 0 10px;
}
.dropdown.dropdown-right > .dropdown-content > a .dropdown-item-counter,
.dropdown.dropdown-right > .dropdown-content-auto > a .dropdown-item-counter {
	left: 5px;
	right:inherit;
	float: left;
	margin: 0 10px 0 0;
}
@media screen and (max-width:768px) {
	/*.dropdown:hover > .dropdown-content-auto {
		visibility: visible;
		opacity: 1;
		width:100%;
	}*/
	.dropdown:hover > .dropdown-content-l-auto {
		left:0px;
		right:inherit;   
	} 
	.dropdown:hover > .dropdown-content-r-auto {
		right:0px;
		left:inherit;   
	}
	.dropdown.dropdown-show .dropdown-content.dropdown-content-full {
		left:0 !important;
		right:0 !important;
		bottom:0 !important;
		overflow-y:auto;
	}
	.dropdown.dropdown-autoShorten.dropdown-btn {
		display: inline-block !important;
		min-width:42px;
		background-color: transparent;
	}
	.dropdown.dropdown-autoShorten .dropdown-title {
		/*display:none !important;*/
		color: var(--color-text) !important;
	}
	.dropdown.dropdown-autoShorten .dropdown-title i {
		color: var(--color-text) !important;
	}	
	.dropdown.dropdown-autoShorten:before{
		position:unset;
		font-family:fontAwesome, 'Font Awesome 6 Pro';
		content:'\f141';
	}	
}

/*------------------------------------------------------------------------------
.collapse or .collapsible
------------------------------------------------------------------------------*/
.collapse {
	list-style-type:none;
}
.collapse, .collapse > * {
	margin: unset;
	padding: unset;
	box-shadow: unset;
	background: unset;
}
.collapse > li {
	list-style-type:none;
}
.collapse .collapse-header {
	position:relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width:100%;
	padding:10px;
	cursor:pointer;
}
.collapse .collapse-body {
	overflow: hidden;
	width:100%;
	transition: height 0.3s;
}
.collapse.collapse-show .collapse-body{}
.collapse.collapse-status .collapse-header:before {
	position: absolute;
	font-family: fontAwesome, 'Font Awesome 6 Pro';
	content: '\f107';
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.5s;
}
.collapse.collapse-show.collapse-status .collapse-header:before {
	transform: rotate(180deg) translateY(50%);
}

@media screen and (max-width:768px) {
	
}

/* --------------------------------------------------------------------------
logReg page
-----------------------------------------------------------------------------*/
.bg {
background-color:#e2e2e2;
background-size:cover;
background-position:center;
width: 100%;
height: 100%;
position: fixed;
left:0px;
z-index:-1;
transition: all 0.3s;
}
.logReg {
	display: flex;
	position: inherit;
	width: 60%;
	margin: 100px auto;
	transform: none;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	overflow: hidden;
	z-index:1;
	transition: all 0.5s;
}

/* style new */
.logReg.w-100 {
	width:450px;
}
.logReg.w-100::before {

}
.logReg.w100::after {
	
}
.logReg.logReg-register {}
.logReg.logReg-register .logReg-after {
	width: 100%;
	height: 200px;
}
.logReg:hover {
background-color: rgba(255,255,255,0.7);
}
.logReg button{
/*min-width: 120px;*/
width: 100%;
}
.logReg .logReg-form {
	width:50%;
	height:100%;
	background-color: var(--color-white);
	padding: 15px 35px 15px 35px;
}
.logReg.w-100 .logReg-form {
	width:100%;
	height:100%;
	background-color: var(--color-white);
	padding: 15px 35px 15px 35px;
}
.logReg .logReg-form .logReg-form-header {
margin-bottom:15px;
}
.logReg .logReg-form .logReg-form-footer {
margin-top: 64px;
}
.logReg .logReg-splash {
	position: relative;
	width: 50%;
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;
	background-color: #201956;
}
.logReg.w-100 .logReg-splash {
	display:none;
}
.logReg .logReg-splash .header {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.logReg .logReg-splash .title {
	margin-top: 20px;
	font-size: 4rem;
	font-weight: bold;
	padding: 10px 25px;
	color: #fff;
}
.logReg .logReg-splash .comment {
	margin-top:35px;
	font-size:2rem;
	padding:10px 25px;
	color:#fff;
	text-shadow: 0px 0px 5px #000;
	line-height: 1.5;
}
.logReg .logReg-splash button {
	margin-top: 35px;
	font-size: 1rem !important;
	font-weight: bold !important;
	padding: 12px;
	background-color: #fff;
	color: var(--color-primary);
	border-radius: 25px;
	border: none;
	outline: none;
	max-width: 200px;
}
.logReg .logReg-splash .login-logo {
	position:absolute;
	max-width: 160px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);  
}

.logReg .titleBar {
position:absolute;
left:0px;
right:0px;
top:-6px;
height:52px;
line-height:52px;
background-color:#F7941D;
color:var(--color-white);
text-align:center;
font-size : 18px;
border-radius: 10px 10px 0px 0px;
}
.logReg h2 {
color:#FF0000;
font-size: 20px;
direction: rtl;
}
.logReg h1 {
color:var(--color-black);
font-size: 25px;
direction: rtl;
text-align:center;
text-shadow: 0px 0px 1px #aaa;
}
.logReg hr {
border:none;
border-bottom: 1px solid #EEE;
border-color: rgba(0,0,0,0.1);
}
.logReg #btn_login {
position: absolute;
right: 10px;
bottom: 10px;
background-color:#F7941D;
}
.logReg #btn_refresh {
cursor: pointer;
}
.logReg #spn_info {
direction:rtl;
text-align: right;
color:red;
font-size: 1rem;
}
.logReg #spn_info.danger {
	color:var(--color-danger);
}
.logReg #spn_info.success {
	color:var(--color-success);
}
@media screen and (max-width:768px){
	.bg {
	background-color:#fff;
	}	
	.logReg {
		position: relative;
		width: 100% !important;
		height:100%;
		left:0px;
		top:0px;
		border-radius:0px;
		background-color:rgba(255,255,255,0.7);
		margin: 0 0;		
	}
	.logReg button{
		min-width: inherit;
		width: 100%;
	}	
	.logReg .titleBar {
		border-radius:0px;
	}
	.logReg .logReg-form {
		width:100%;
	}	
	.logReg .logReg-splash {
		display:none;
	}
	.logReg .logReg-form .logReg-form-footer {
		margin-top: 15px;
	}		
}

/* --------------------------------------------------------------------------
   logReg2 page
-----------------------------------------------------------------------------*/
.logReg2 {
	position: fixed;
	width: 100vw;
	height: 100vh;
	overflow-y: auto;
	background-color: rgba(145,112,255,1);
	background: linear-gradient(45deg, var(--color-secondary) 0%, var(--color-primary), var(--color-secondary));
	background-size: 400% 400%;
	animation: anim-logReg2-gradient 10s infinite;
}

.logReg2 .logReg-inner {
	position: absolute;
	width: 500px;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	padding: 15px;
	overflow: hidden;
	z-index: 1;
	transition: all 0.5s;
}

.logReg2 .logReg-inner .logReg-inner-form {
	display: flex;
	flex-direction: column;	
	width: 100%;
	text-align: center;
	padding: 15px 35px 36px 35px;
	background-color: var(--color-white);
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);	
}

.logReg2 .logReg-inner .logReg-inner-form h5 {
	font-size: 1rem;
}

.logReg2 .logReg-inner .logReg-inner-form .status {
	border-radius: 4px;
	display: inline-flex;
	vertical-align: middle;
	align-items: center;
	width: fit-content;
	flex-shrink: 0;
	white-space: nowrap;
	background-color: #E5FAF3;
	color: #34B288;
	height: 24px;
	padding-right: 8px;
	padding-left: 8px;
	cursor: pointer;
	font-size: 0.9rem;
}

.logReg2 .logReg-shape1 {
	position: fixed;
	width:320px;
	height:320px;
	left:-160px;
	top:0;
	background-color: rgba(255,255,255, 0.3);
	border-radius: 15px;
	transform: rotate(65deg);
	z-index: 1;
	animation: anim-logReg2-shape1 6s reverse infinite;
}

.logReg2 .logReg-shape2 {
	position: fixed;
	width: 320px;
	height: 360px;
	right: -160px;
	bottom: 0px;
	background-color: rgba(0,0,0, 0.2);
	border-radius: 15px;
	transform: rotate(330deg);
	z-index: 1;
	animation: anim-logReg2-shape2 15s infinite;
}

.logReg2 .logReg-shape3 {
	position: fixed;
	width:320px;
	height:320px;
	right: 260px;
	top: -190px;
	background-color: rgba(255,255,255, 0.1);
	border-radius: 15px;
	transform: rotate(65deg);
	z-index: 1;
}

.logReg2 .logReg-inner button{
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary) 51%, var(--color-primary)) var(--x, 0)/ 200%;
	
	width: 100%;
	border-radius: 25px;
	transition: all 0.5s ease;
}
.logReg2 .logReg-inner button:hover {
	--x: 100%;
}
.logReg2 .logReg-inner .logReg-header {
   margin-bottom:15px;
}
.logReg2 .logReg-inner .logReg-footer {
   margin-top: 36px;
}
.logReg2 h2 {
   color:#FF0000;
   font-size: 20px;
   direction: rtl;
}
.logReg2 h1 {
   color:var(--color-black);
   font-size: 25px;
   direction: rtl;
   text-align:center;
   text-shadow: 0px 0px 1px #aaa;
}
.logReg2 hr {
   border:none;
   border-bottom: 1px solid #EEE;
   border-color: rgba(0,0,0,0.1);
}
.logReg2 #btn_refresh {
   cursor: pointer;
}
.logReg2 #spn_info {
   direction:rtl;
   text-align: right;
   color:red;
   font-size: 1rem;
}
.logReg2 #spn_info.danger {
	color:var(--color-danger);
}
.logReg2 #spn_info.success {
	color:var(--color-success);
}
@media screen and (max-width:426px){
	.logReg2 .logReg-inner {
		width:100%;
		top:0;
		left:0;
		transform: unset;
	}
	.logReg2 .logReg-inner .logReg-inner-form .status  {
		margin-top:10px;
	}	
}

@keyframes anim-logReg2-gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes anim-logReg2-shape1 {
	0% {
		transform: rotate(65deg);
		opacity:1;
	}
	50% {
		transform: rotate(70deg);
		opacity:0.3;
	}
	100% {
		transform: rotate(65deg);
		opacity:1;
	}	
}

@keyframes anim-logReg2-shape2 {
	0% {
		transform: rotate(330deg);
	}

	50% {
		transform: rotate(320deg);
	}	

	100% {
		transform: rotate(330deg);
	}	
}

/* --------------------------------------------------------------------------
mainMenu
-----------------------------------------------------------------------------*/
.mainMenu {
position: fixed;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
z-index:	1001;
}
.mainMenu .mainMenu-bg {
	position:absolute;
	left: 0px;
	right: 220px;
	top:0px;
	bottom:0px;
}
.mainMenu .mainMenu-menu {
	position: absolute;
	width: 290px;
	right:-290px;
	top:0px;
	bottom:0px;
	background-color: var(--color-grayLight);
	box-shadow: 0 0 5px #aaa;
	padding:25px 65px 5px 5px;	
	overflow-y:auto;
	transition:right 0.2s;
}
.mainMenu.mainMenu-show {
	/*display:block;*/
}
.mainMenu.mainMenu-show .mainMenu-menu{
	right: 0px;
}
.mainMenu.mainMenu-hide {
	/*display:none;*/
}
.mainMenu.mainMenu-hide .mainMenu-menu{
	right: -290px;
}
.mainMenu ul.mtree a {
	color:inherit !important;
}
@media screen and (max-width:768px) {
	.mainMenu .mainMenu-menu {
		width:220px;
		padding:5px;
		padding-bottom: var(--footer-height);
	}
}

/* --------------------------------------------------------------------------
profile
-----------------------------------------------------------------------------*/
.profile {
	display: flex;
	justify-content: space-between;
	width:100%;
	height:100%;
	padding: 25px;
}
.profile .profile-right {
	position:relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 25%;
	border-radius: 15px;
	background-color: #fff;
	box-shadow: 0 0 5px #aaa;
	padding: 25px;
}
.profile .profile-right .image {
	position:relative;
	width:120px;
	height:120px;
	border-radius:100%;
	background-position:center;
	background-size:cover;
	box-shadow: 0 0 5px #aaa;
}
.profile .profile-right .image .edit {
position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom: -18px;
	width:36px;
	height:36px;
	text-align:center;
	line-height:36px;
	background-color: #fff;
	color:var(--color-secondary);
	box-shadow: 0 0 5px #aaa;
	border-radius:100%;
	cursor: pointer;
	font-size:0.9rem;
}
.profile .profile-right .exit {
position:absolute;
	width:95%;
	bottom:5px;
}
.profile .profile-left {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items:center;
	width: calc(73%);
	border-radius: 15px;
	background-color: #fff;
	box-shadow: 0 0 5px #aaa;
	padding: 25px;
}
.profile .profile-left .profile-view {
	display:block;
}
.profile .profile-left .profile-view table {
	width:100%;
	padding:0;
	margin:0;
	border:none;
}
.profile .profile-left .profile-view table tr {
	border-bottom:1px solid var(--color-gray);
}
.profile .profile-left .profile-view table tr:last-child{
	border-bottom:none;
}
.profile .profile-left .profile-view table td,
.profile .profile-left .profile-view table th{
	height:36px;
	vertical-align:middle;
	text-align:right;
	font-size:1rem;
	font-weight: bold;
}
.profile .profile-left .profile-view table th {
	color:var(--color-gray);
	/*width: 120px;*/
}
.profile .profile-left .profile-view table td {
	color:var(--color-black);
	width:220px;
}
.profile .profile-left .profile-view table tr td:last-child {
	width: auto;
	text-align: left;
}
.profile .profile-left .profile-view table tr td:last-child button {
	float:left;
	font-size: 1rem !important;
	font-weight: normal !important;
}
.profile .profile-left .profile-edit{
	display: none;
}
.profile .profile-left .profile-view p,
.profile .profile-left .profile-edit p{
	text-align: right;
	font-size: 1rem;
	color: var(--color-gray);
	margin: 15px 0;
}
.profile .profile-left .profile-edit .form{
	max-width: 50%;
	margin:0 auto;	
text-align:center;
	padding: 35;
}
.profile .profile-left .profile-edit .button{
position:absolute;
	display: flex;
	left:50%;
	bottom: 5px;
	transform: translateX(-50%);
}
.profile .profile-left .profile-edit .button button{
margin: 0px 5px;
}
.profile .profile-left .profile-edit .form table tr,
.profile .profile-left .profile-edit .form table td{
	border:none;
	padding: 0px;
}

@media screen and (max-width:768px) {
	.profile {
		flex-direction: column;
		padding: 0px;
	}	
	.profile .profile-right {
		width:100%;
		margin: 0 0 5px 0;
	}
	.profile .profile-left {
		width: 100%;
		margin: 0 0 5px 0;
		display: block;
		padding: 0px;
	}
.profile .profile-left .profile-edit .form {
		max-width: 100%;
		padding: 15px;
	}
.profile .profile-left .profile-view table td {
		width: 140px;
		font-size : 0.9rem;
	}	
.profile .profile-left .profile-view table th {
		font-size : 0.9rem;
	}		
}

/*------------------------------------------------------------------------------
.tbl-box
------------------------------------------------------------------------------*/
@media screen and (max-width:768px) {
	.tbl-box {
		
	}
	.tbl-box table {
		width: 100%;
		margin-bottom: 25px;
		border: 1px solid red;
		border-radius: var(--radius);
		overflow: hidden;
		box-shadow: 0 0 2px rgba(0,0,0,0.4);
	}
	.tbl-box table:nth-child(even) {
		/*background-color: var(--color-light);*/
	}
	.tbl-box table tbody {
		width:100%;
	}
	.tbl-box table tbody tr {
		
	}
	.tbl-box table tbody th {
		vertical-align: middle;
		text-align: right;
		padding: 0px 10px;
		border-bottom: 1px solid var(--color-light);
		border-left: 1px solid var(--color-grayLight);
		background-color: var(--color-grayLight); 
	}
	
	.tbl-box table tbody td {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 5px;
		width: 100%;
		min-height: 32px;
		vertical-align: middle; 
		text-align: center;
		border-bottom: 1px solid var(--color-light);
	}
	.tbl-box table tbody td .btn {
		display: flex;
		flex-direction: column;
		padding-top: 5px;
		padding-bottom: 5px;
		font-size:0.9rem !important;
	}
	.tbl-box table tbody td .btn i {
		font-size:0.9rem !important;
	}	
	.tbl-box table tbody tr:nth-child(odd) th ,
	.tbl-box table tbody tr:nth-child(odd) td {
		/*background-color: var(--color-light);*/
	}
}	
	
/*------------------------------------------------------------------------------
hover
------------------------------------------------------------------------------*/
.hover-zoom-in {
	transform:scale(1,1);
	transition:transform 0.5s;
}
.hover-zoom-in:hover {
	transform:scale(1.5,1.5);
}	
	
/*------------------------------------------------------------------------------
switch-button
------------------------------------------------------------------------------*/

.btn-toggle {
	display: inline-block;
	padding: 3px;
	position: relative;
	text-align: center;
	transition: background 600ms ease, color 600ms ease;
	border-radius: 0 15px 15px 0;
	border: 1px solid var(--color-secondary);
	width: 46px;
}
.btn-toggle:last-child {
	border-radius: 15px 0 0 15px;
}

input[type=radio].toggle {
display: none;
}
input[type=radio].toggle + label {
cursor: pointer;
}
input[type=radio].toggle + label:hover {
background: none;
color: #1a1a1a;
}
input[type=radio].toggle + label:after {
	/*
	background: #1a1a1a;
	content: "";
	height: 100%;
	position: absolute;
	top: 0;
	transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
	width: 100%;
	z-index: -1;
	*/
}
input[type=radio].toggle.toggle-left + label {
border-right: 0;
}
input[type=radio].toggle.toggle-left + label:after {
/*left: 100%;*/
}
input[type=radio].toggle.toggle-right + label {
margin-left: 0px;
}
input[type=radio].toggle.toggle-right + label:after {
/*left: -100%;*/
}
input[type=radio].toggle:checked + label {
	cursor: default;
	color: #fff;
	transition: color 200ms;
	background-color: var(--color-secondary);
}
input[type=radio].toggle:checked + label:after {
/*left: 0;*/
}

/*------------------------------------------------------------------------------
portfolio
------------------------------------------------------------------------------*/
.sort,
.sort-up,
.sort-down {
	position: relative;
	padding-right:5px;
}
.sort::before,
.sort-up::before,
.sort-down::before{
	position: absolute;
	margin-right:-12px;
	top:50%;
	transform: translateY(-50%);
	font-family: "Font Awesome", "Font Awesome 6 Pro";
	font-size: 0.8rem;
	color:var(--color-dark);
}
.sort::before {
	content:'\f0dc';
	opacity:0.5;
}
.sort-up::before {
	content:'\f0d8';
}
.sort-down::before {
	content:'\f0d7';
}

/*------------------------------------------------------------------------------
portfolio
------------------------------------------------------------------------------*/
.portfolio-box {}
.portfolio-box .header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	/*width:calc(100% - 20px);*/
	padding: 10px 0 10px 20px;
	border-bottom: 1px solid var(--color-grayLight);
	width:100%;
}
.portfolio-box .header .item,
.portfolio-box .header div {
	position: relative;
	color:var(--color-dark);
	font-weight: bold;
	text-align: center;
}

.portfolio-item {
	position: relative;
	display:flex;
	flex-direction: column;
	padding:10px 0px 10px 20px;
	margin-bottom: 0px;
	border-bottom: 1px solid var(--color-grayLight);
	border-radius: 0px;
	overflow: hidden;
}
.portfolio-item::before{
	content:'';
	content: '\f104';
	font-family: "Font Awesome 6 Pro";	
	position:absolute;
	width:10px;
	height:100%;
	left:0;
	top:0;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-dark);
}
.portfolio-item .header {
	display:flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom:10px;
	border-bottom: 1px dashed #ddd;
}
.portfolio-item .body{
	display:flex;
	align-items: center;
	justify-content: space-between;	
	margin-bottom: 0px;
}
.portfolio-item .body img {
	width: 32px;
	background-color: #fff;
	padding: 1px;
	border-radius: 0;
}
.portfolio-item .body .img_::before {
	content: '';
	position: absolute;
	background-color: rgba(255,255,255,0.4);
	height: 150%;
	width: 120px;
	left: -80px;
	top: 50%;
	transform: translateY(-50%) rotate(24deg);
	z-index: 0;
}
.portfolio-item .body .item{
	display:flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.5;
	font-size: 0.9rem;
}
.portfolio-item .body .item.highlight{
	padding: 5px 15px;
	border-radius: 8px;
	/*background-color: #ddd;*/
}
.portfolio-item .body .item b {
	font-size: 1.2rem;
}
.portfolio-item .footer{
	display:flex;
	align-items: center;
	justify-content: space-around;	
	border-top: 1px dashed #ddd;
	padding-top: 10px;
}	
.portfolio-item .footer .item{
	display:flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.5;
	font-size: 0.9rem;
}
@media screen and (max-width:768px) {
	.portfolio-item {
		
	}
}


/*---------------------------------------------------------------
skeleton
---------------------------------------------------------------*/
.skeleton {
	animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
	0% {
		background-color: hsl(200, 20%, 80%);
	}
	100% {
		background-color: hsl(200, 20%, 95%);
	}
}

.skeleton-text {
	width: 100%;
	height: 0.7rem;
	margin-bottom: 0.5rem;
	border-radius: 0.25rem;
}

.skeleton-text__body {
	width: 75%;
}

.skeleton-footer {
	width: 30%;
}

/*---------------------------------------------------------------
trade orderQueue
---------------------------------------------------------------*/
.orderQueue-buySellForm-container {
	display: flex;
	align-items: stretch;
}

/*---------------------------------------------------------------
trade orderQueue
---------------------------------------------------------------*/
.orderQueue {
	width:100%;
}
.orderQueue .orderQueue-header {
	display: none;
	align-items: center;
}
.orderQueue .orderQueue-header button {
	box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    background-color: transparent;
    outline: 0px;
    border: 0px;
    margin: 0px;
	padding:0;
    border-radius: 0px;
	opacity:0.4;
}
.orderQueue .orderQueue-header button svg {
	width:20px;
}
.orderQueue .orderQueue-header button.active {
	opacity:1;
}
.orderQueue .orderQueue-header button.buy {
	color:var(--color-success);
}
.orderQueue .orderQueue-header button.sell {
	color:var(--color-danger);
}
.orderQueue .orderQueue-tables {
	display: flex;
	flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
	width:100%;
}
.orderQueue .orderQueue-tables table {
	width:100%;
}
.orderQueue .orderQueue-tables table tr {
	background-color: var(--color-white) !important;
}
.orderQueue .orderQueue-tables table td {
	width:100%;
	font-weight: normal !important;
}
.orderQueue .orderQueue-tables .buy,
.orderQueue .orderQueue-tables .sell {
	width:50%;
}
.orderQueue .orderQueue-tables .buy table td {
	flex-direction: row-reverse;
}
.orderQueue .orderQueue-tables .buy .progress .progress-inner {
	background-color: var(--color-successAlpha) !important;		
}
.orderQueue .orderQueue-tables .sell .progress .progress-inner {
	background-color: var(--color-dangerAlpha) !important;		
}
.orderQueue .orderQueue-tables .buy table td .price {
	color:var(--color-successDark) !important;
}
.orderQueue .orderQueue-tables .sell table td .price {
	color:var(--color-dangerDark) !important;
}
.orderQueue .orderQueue-price {
	display: none;
	align-items:center;
	justify-content: space-between;
	width:100%;
	padding: 10px 0px;
	border-top: 1px solid rgb(236, 241, 249);
	border-bottom: 1px solid rgb(236, 241, 249);
	border-right-color: rgb(236, 241, 249);
	border-left-color: rgb(236, 241, 249);		
}
.orderQueue .trend {
	display: none;
}
@media screen and (max-width:768px) {
	.orderQueue {
		width:45%;
	}
	.orderQueue .orderQueue-header {
		display: flex;
	}
	.orderQueue .orderQueue-tables {
		flex-direction:column-reverse; /* v reverse */
		padding-right: 10px; /* for scroll */
		max-height: 465px;
		overflow-y: auto;
	}
	.orderQueue .orderQueue-tables .buy,
	.orderQueue .orderQueue-tables .sell {
		width:100% !important;
	}
	.orderQueue .orderQueue-tables .sell table tbody tr:nth-child(1) {
		/*display:none !important;*/
	}	
	.orderQueue .orderQueue-tables .buy table tbody tr:nth-child(8) {
		/*display:none !important;*/
	}
	.orderQueue .orderQueue-tables .buy table td {
		flex-direction: row !important;
	}
	.orderQueue .orderQueue-tables table thead th span {
		direction: rtl;
	}
	.orderQueue .orderQueue-tables .buy table:first-child thead { /*reverse*/
		display:none;
	}

	/* view-both */
	.orderQueue .orderQueue-tables.view-both .buy table:first-child thead {
		display:none;
	}
	.orderQueue .orderQueue-tables.view-both .buy,
	.orderQueue .orderQueue-tables.view-both .cell {
		display:block;
	}

	/* view-buy */
	.orderQueue .orderQueue-tables.view-buy .buy thead {
		display:table-header-group !important;
	}
	.orderQueue .orderQueue-tables.view-buy .buy {
		display: block;
	}
	.orderQueue .orderQueue-tables.view-buy .sell {
		display: none;
	}

	/* view-sell */
	.orderQueue .orderQueue-tables.view-sell .sell thead {
		display:table-header-group;
	}
	.orderQueue .orderQueue-tables.view-sell .buy {
		display: none;
	}
	.orderQueue .orderQueue-tables.view-sell .sell {
		display: block;
	}	

	.orderQueue .orderQueue-tables .user-count {
		display:none !important;
	}	
	.orderQueue .orderQueue-tables .progress {
		border-radius:0;
		left:inherit;
		right:0;
		transform: rotate(0deg) !important;
	}
	.orderQueue .orderQueue-tables .progress .progress-inner {
		left:inherit;
		right:0;		
	}
	.orderQueue .transactionFactor {
		display:none;
	}
	.orderQueue #layer_orderFinished_info24h {
		display: none;
	}
	.orderQueue .trend {
		display: block;
	}
	.orderQueue .orderQueue-price {
		display:flex;
	}
}

/*---------------------------------------------------------------
trade buySellForm
---------------------------------------------------------------*/
.buySellForm {
	position: relative;
	display:none;
	direction:rtl;
}
@media screen and (max-width:768px) {
	.buySellForm {
		display:block;
		width:55%;
		padding-left: 10px;
	}
	.buySellForm .buySell-content-card .buySell-content-card-inner .header ,
	.buySellForm .buySell-content-card .buySell-content-card-inner .header + hr {
		display: none !important;
	}
	.buySellForm .tabs-header {
		padding:0 !important;
		overflow: hidden !important;
	}
	.buySellForm .tabs-header label {
		transform: skewX(-14deg) scale(1.05);
		box-shadow: none !important;
		width:calc(50%);
		height:36px;
		border-radius: 0 !important;
		border:none !important;
		transition: none;
	}
	.buySellForm .tabs-header label span {
		transform: skewX(14deg);
	}
	.buySellForm .tabs-header input[type=radio]:checked + .tab.tab-success {
		background-color: var(--color-success) !important;
		color: #fff !important;
		border-left: 1px solid;
		border-right: 1px solid;
		box-shadow:10px 1px 1px var(--color-success) !important
	}	
	.buySellForm .tabs-header input[type=radio]:checked + .tab.tab-danger {
		background-color: var(--color-danger) !important;
		color: #fff !important;
		border-left: 1px solid;
		border-right: 1px solid;
		box-shadow:-10px 1px 1px var(--color-danger) !important		
	}

	.buySellForm .footer .btn {
		position: absolute;
		bottom: 0px;
		margin: 0;
		left: 10px;
		width: calc(100% - 10px);		
	}
}

/*---------------------------------------------------------------
   slider systemNews-owlCarousel
---------------------------------------------------------------*/
.systemNews-owlCarousel-wrap {
	display: "none"; /* flex */
	align-items: center;
	justify-content: space-between;
	height:36px;
	margin:10px 0;
	background-color: var(--color-grayLight);
	direction: ltr;
}
.systemNews-owlCarousel-wrap *{
	height:100%;
}
.systemNews-owlCarousel-wrap .icon {
	width:32px;
	height:32px;
	padding:5px;
}
.systemNews-owlCarousel-wrap .icon svg {
	fill:var(--color-gray);
}
.systemNews-owlCarousel-wrap .owl-carousel {
	width:calc(100% - 32px);
}
.systemNews-owlCarousel-wrap .owl-carousel a{
	display: flex;
    align-items: center;
    justify-content: flex-end;	
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	color:var(--color-gray);
	padding:0 5px;
	width:100%;
	background-color: var(--color-grayLight);
}
@media screen and (max-width:768px) {
	.systemNews-owlCarousel-wrap {
		display:flex;
	}
}

/*---------------------------------------------------------------
   slider systemNews-swiper
---------------------------------------------------------------*/
.systemNews-swiper-wrap {
	display: none; /* flex */
	align-items: center;
	justify-content: space-between;
	height:36px;
	margin:10px 0;
	background-color: var(--color-grayLight);
	direction: ltr;
}
.systemNews-swiper-wrap *{
	height:100%;
}
.systemNews-swiper-wrap .icon {
	width:32px;
	height:32px;
	padding:5px;
}
.systemNews-swiper-wrap .icon svg {
	fill:var(--color-gray);
}
.systemNews-swiper-wrap .swiper {
	width:calc(100% - 32px);
}
.systemNews-swiper-wrap .swiper a{
	display: flex;
    align-items: center;
    justify-content: flex-end;	
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	color:var(--color-text);
	width:100%;
	background-color: var(--color-grayLight);
	font-size: 0.9rem;
}
.systemNews-swiper-wrap .swiper a i {
	padding:0 5px;
}
@media screen and (max-width:768px) {
	.systemNews-swiper-wrap {
		display:flex;
	}
}

/*---------------------------------------------------------------
   systemNews
---------------------------------------------------------------*/
.systemNews-content p{
	white-space:break-spaces;
}

/*---------------------------------------------------------------
   slider
---------------------------------------------------------------*/
.slider-wrap {
    padding:0;
    overflow:hidden;
    border:none !important;
}
.slider {
	height:250px;
	padding: 0px;
	box-shadow: none;
	border-radius: 5px;
	overflow: hidden;
}
.slider.slider-w100 {
	width:100%;
	padding:0px;
}
.slider .owl-carousel {
	height:100%;
	overflow:hidden;
	border-radius:0px;
} 
.slider.slider-w100 .owl-carousel {
	border-radius:0px;
}
.slider.owl-stage-outer {height:100%;}
.slider.owl-carousel .owl-stage-outer {height:100%;} 
.slider.owl-carousel .owl-stage {height:100%;}
.slider.owl-carousel .owl-item {height:100%;}
.slider .item {
	width:100%;
	height:100%;
	background-position:center;
	background-size:cover;
}
.slider .item img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.slider .slider-content {
	position: absolute;
	right: 10%;
	top: 50%;
	transform: translateY(-50%);
}
.slider .slider-title {
	display: block;
	color: #fff;
	font-size: 4rem;
	font-weight:bold;
	text-align: right;
	text-shadow: 0px 0px 3px rgba(0,0,0,0.6);
	margin-bottom:5px;
}
.slider .slider-description {
	display: block;
	margin-bottom:5px;
	color: #fff;
	font-size: 1rem;
	text-align: right;
	text-shadow: 0px 0px 3px rgba(0,0,0,0.6);
}
.slider .slider-button {
	display: inline-block;
	color: #fff;
	background-color: #444;
	font-size: 0.9em;
	margin-top: 0.9em;
    height: 32px;
    line-height: 32px;
}

@media screen and (max-width:768px){
	.slider {
		height:160px;
		margin:0 !important;
	}	
	.slider .view-slider-content {
		right: 10px;
		left: 10px;
		top: 10px;
		bottom: 10px;
		text-align: center;
		transform: inherit;
	}	
	.slider .slider-title {
		font-size: 1.3em;
		text-align:center;
	}
	.slider .slider-description {
		font-size: 0.8em;
		text-align:center;
	}
	.slider div {
      text-align:center;
	}
	.slider.owl-theme .owl-nav {
	    left:-22px;
	    right:-22px;
	}
}
@media screen and (max-width:767px) {

}