@charset "UTF-8";

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

/*------------------------------------------------------------------------------
   basic and reset
------------------------------------------------------------------------------*/
:root {
	--color-highlight: #eaedf6;
	--color-primary: #6232f9;
	--color-secondary: #9170ff;
	--color-secondaryAlpha: #9170ff0a;
	--color-success: #5bbc8f;
	--color-successLight: #5bbc8f59;
	--color-danger: #ff5656;
	--color-dangerLight: #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-black: #000;
	--color-gray: #a9a9af;
	--color-grayLight: #eaedf6;
	--color-dark: gray;
	--radius:4px;
}

@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;
}
@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;	
}

div [onclick] {
	cursor: pointer;
}

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

/* password */
.input-field {
	position:relative;
}
.input-field input.password-view {
	direction:ltr;
	text-align: left;
	padding-left: 3rem !important;
}
.input-field input.password-view + label{
	padding-left:3rem;
}
.input-field .prefix ~ input.password-view {
	width: calc(100% - 6rem);
}
.input-field .password-handle {
	position:absolute;
	width:24px;
	height:24px;
	left:0px;
    top: 0px;
    height: 3rem;	
	display: flex;
    align-items: center;
    justify-content: center;		
	cursor: pointer;
}

.input-field .password-handle:before {
	content:"\f06e";
	font-family:"Font Awesome 6 Pro";
	font-size: 0.9rem;
	color: #666;
}
.input-field .password-handle.eye:before {
	content:"\f070";
}
.input-field .prefix ~ .password-handle {
	left: 0px;
}

.btn {
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: space-around;
	line-height: 1.3;
}
.btn.btn-small {
	font-size: 0.9rem !important;
	width:auto !important;
}
.btn i {
	margin:0px 5px;
	font-size: 1.2rem;
}
.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;
}

/*------------------------------------------------------------------------------
   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: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 ...
------------------------------------------------------------------------------*/
@media screen and (min-width:769px) {
	.show-auto, .d-block-auto {display:none;}
	.show-auto-i, .d-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;}
	.show-flex-auto {display: flex;}	
	.show-flex-auto-i {display: flex !important;}	
}

/*------------------------------------------------------------------------------
   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-silver {background-color: var(--color-highlight);}
.bg-light {background-color: var(--color-highlight);}
.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;}
.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;}	
}

/*------------------------------------------------------------------------------
   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 {
	margin-bottom: 36px;
	font-size: 0.9rem;
	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: 0.9rem !important;
	color: var(--color-secondary) !important;
	padding:0px 5px !important;
}

.chips-tools a i {
	font-weight: initial !important;
	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-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;	
}

/*---------------------------------------------------------------
   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);
}

/*---------------------------------------------------------------
   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;
	}
}

/*---------------------------------------------------------------
   slider
---------------------------------------------------------------*/
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: transparent !important;
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 10px !important;
  background: var(--color-secondary);
  border: none;
  border-radius:10px !important;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 12px !important;
  height: 20px !important;
  border-radius: 0 !important; 
  background: var(--color-primary) !important;
  cursor: pointer !important;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 0;
  background: #4CAF50;
  cursor: pointer;
}

/*---------------------------------------------------------------
   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 !important;
		position: absolute;
		left: 0px !important;
		right: 0px;
		top: 32px !important;
		bottom: 0px;
		width: inherit !important;
		height: inherit;
	}
}

/* --------------------------------------------------------------
   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;
}

/* --------------------------------------------------------------
   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-white);
	padding:0px 10px;
	font-size:0.9rem;	
}
#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:50%;
	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: #bbbbca;
	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 .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 {
		height:100%;
		padding: 0 10px;
		font-size: 1rem;
	}
	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: 45% !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 .input-field label:not(.label-icon).active {
  -webkit-transform: translateY(-5px) scale(0.9) !important;
          transform: translateY(-5px) scale(0.9) !important;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}
/*aside.buySell*/
.buySell-content .buySell-content-card.form .buySell-content-card-inner .main input{
	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;	
}
/*aside.buySell*/
.buySell-content-card.buy.form button {
	background-color: var(--color-success);
	color: var(--color-white);
	border-radius: 5px;
	font-weight:bold;
}
/*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 {
		display:flex;
		justify-content: space-between;
		align-items: center;
	}
	.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;
}
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 {
	color: #666;
	font-size:1.2rem;
	font-weight:bold;
	margin: 5px 0 10px 0;
}
main .main-inner header i {
	color: #666;
	font-size:1.2rem;
	font-weight:inherit;
}
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;
	}
	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 56px 5px;
		border-radius:0.01px;
	}
    main .main-inner .content {
       padding: 10px 0px !important;
	}
    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:56px;
	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:56px;
	cursor:pointer;
	font-size: 0.9rem !important;
	color: #444;
	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-dark);
	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: 85%;
	height: 85%;				
	top: -18px;
	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: 1rem;
	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: 100%;
}
.tradingview-widget-container div:first-child {
	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;
	width:50%;
	justify-content: flex-start;
}
.dashboard .dashboard-toolsBar .toolsLast {
	display:flex;
	width:50%;
	justify-content: flex-end;
}
	
	
/* 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;
	color:var(--color-dark);
	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: 61px;
		padding-bottom: 56px;	
		margin-top: 10px;
	}
	.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: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding: 10px;
		border-bottom: 1px solid #eee;		
	}	
	.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;
	}	
}

/* --------------------------------------------------------------------------
   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: space-between;
	border:1px solid var(--color-grayLight);
	border-radius: var(--radius);
	padding:10px !important;
}
.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;
	}
	.dropdown.dropdown-autoShorten .dropdown-title {
		display:none !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;
}

.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 .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 .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%;
		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;
	}		
}

/* --------------------------------------------------------------------------
   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;
}
@media screen and (max-width:768px) {
	.mainMenu .mainMenu-menu {
		width:220px;
		padding:5px;
	}
}

/* --------------------------------------------------------------------------
   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;
}

@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 var(--color-grayLight);
		border-radius: var(--radius);
		overflow:hidden;
	}
	.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;
		align-items: center;
		flex-direction: column;		
		padding: 15px 5px;
		width: 100%;
		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
------------------------------------------------------------------------------*/
.portfolio-item {
	position: relative;
	display:flex;
	flex-direction: column;
	padding:0 10px 10px 20px;
	margin-bottom: 5px;
	background-color: #eee;
	border-radius: 15px;
	overflow: hidden;
}
.portfolio-item::before{
	content:'';
    content: '\f104';
    font-family: "Font Awesome 6 Pro";	
	position:absolute;
	width:20px;
	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: 10px;
}
.portfolio-item .body img {
	width: 42px;
    height: 42px;
    background-color: #fff;
    padding: 5px;
    border-radius: 50%;
}
.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%;
  }