@charset "utf-8";

/* nav */

.nav {
	position: sticky; 
	top: 0px; 
	z-index:5;
}
.nav_border {
	position: sticky;
    top: 54px;
    z-index: 1;
	height: 3px;
}
.nav_body {
	display:flex; 
	justify-content:space-between; 
	position: relative;
	padding: 0 6px 0 0;
}
#nav_body_item_left, #nav_body_item_right {
	display:flex; 
	align-items: center;
}

#nav_logo {
	background-size: 122px 21px; 
	height: 21px; 
	width: 122px;
	margin: 0 8px 0 12px;
	display: block;
}

#nav_logo_adaptive {
	background-size: 21px 21px; 
	height: 21px; 
	width: 21px;
	margin: 0 8px 0 12px;
	display: none;
}

.theme_Light * {
	.nav_background {
		background:#fff;
	}
	.nav_border_background {
		background: #eef0f5;
	}
	#nav_logo {
		background-image: url('https://qutrade.io/images/logo/new.png'); 
	}
	#nav_logo_adaptive {
		background-image: url('https://qutrade.io/images/logo/3new.png'); 
	}
}

.theme_Dark * {
	.nav_background {
		background:#1f3749;
	}
	.nav_border_background {
		background: #152836;
	}
	#nav_logo {
		background-image: url('https://qutrade.io/images/logo/1.png'); 
	}
	#nav_logo_adaptive {
		background-image: url('https://qutrade.io/images/logo/3new.png'); 
	}
}

/*section*/

.nav_section:hover .nav_sections {
	display:block;
}

.nav_section_name {
	padding: 0 10px;
	height: 54px;
	display: flex;
	align-items: center;
	transition:0.1s;
	cursor:pointer;
	position:relative;
	font-family: sans-serif;
    letter-spacing: 1px;
}
.top_icon_direct {
	height: 19px;
	transition:0.25s;
	padding-right: 2px;
}
.nav_sections {
	display:none;
	position:absolute;
	top:54px;
	padding:22px 0 22px; 
	margin-left:-14px; 
	border-radius: 0 0 15px 15px; 
	width: max-content;
	z-index: -1;
	transition:0.25s;
}
.nav_scroll {
	max-height: calc(100vh - 144px); 
	overflow-y: scroll; 
	overflow-x: hidden; 
	margin-right: 9px;
	padding: 0 9px 0 22px;
	display:flex;
	flex-wrap: wrap;
}
.nav_item {
	display:block; 
	padding: 17px 22px; 
	border-radius: 8px; 
	transition:0.1s;
	min-width: max-content;
}
.nav_title {
	font-size:14px;
	font-weight: 500;
}
.nav_desc {
	font-size: 12px;
}

.theme_Light * {
	.nav_section:hover {
		color: #E88100;
	}
	.nav_sections { 
		border-top: 3px #eef0f5 solid; 
		background:#FFF;
		box-shadow: 0px 0 8px 4px #cdcdcd8f;
	}
	.nav_item { 
		color: #ffffffd6;
		border: 1px #ffffff00 solid;
	}
	.nav_item:hover {
		background: #ebebeb73;
		border: 1px #eef0f5 solid;
	}
	.nav_scroll::-webkit-scrollbar-thumb {
		background-color: #eef0f5;
	}
	.nav_section:hover .top_icon_direct {
		transform: rotate(-180deg);
	}
	.nav_title {
		color: #000;
		transition:0.2s;
	}
	.nav_item:hover .nav_title {
		color: #E88100;
	}
	.nav_desc {
		line-height: 18px; 
		color: #00000075;
	}
}

.theme_Dark * {
	.nav_section:hover {
		color: #febc58;
	}
	.nav_sections { 
		border-top: 3px #152836 solid; 
		background:#1f3749;
		box-shadow: 0px 0 8px 4px #1616168f;
	}
	.nav_item { 
		color: #ffffffd6;
		border: 1px #ffffff00 solid;
	}
	.nav_item:hover {
		background: #152836;
        border: 1px #2f4559 solid;
	}
	.nav_scroll::-webkit-scrollbar-thumb {
		background-color: #eef0f5;
	}
	.nav_section:hover .top_icon_direct {
		transform: rotate(-180deg);
	}
	.nav_title {
		color: #dfe2ecd9;
		transition:0.2s;
	}
	.nav_item:hover .nav_title {
		color: #febc58;
	}
	.nav_desc {
		line-height: 18px; 
		color: #d2e4fb87;
	}

}

/* navigation search */

.nav_search_body {
	position: sticky;
    margin: 34px 4px 6px 40px;
    overflow: hidden;
    padding: 0 4px 2px 0;
	border-radius: 0;
	background: none;
}
.nav_search_pair {
	padding: 6px 10px;
	width: calc(100% - 40px);
	outline: none;
	border: none;
	font-size: 14px;
	font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana, sans-serif;
	letter-spacing: 0.5px;
	background: inherit;
}
.top_nav_search_pair_scroll {
	display: flex; 
	justify-content: space-between; 
	margin: 0 0 0 40px; 
	width: 250px;
}
.pair_item {
	font-size: 12px;
	display: flex;
	align-items: center;
	margin: 0 8px 0 0;
	border-radius: 5px;
	transition: 0.1s;
	height: 24px;
}
.pair_markets_item, .pair_markets_item_active {
	padding: 0 8px 0 12px;
	transition:0.1s;
	cursor:pointer;
	text-align:right;
	height: 24px;
	display: flex;
    align-items: center;
}

.theme_Light * {
	.nav_search_pair {
		color: #000;
	}
	.pair_markets_item, .pair_markets_item_active {
		color: #ccc;
	}
	.pair_markets_item:hover, .pair_markets_item_active, #nav_no_search_pairs{
		color: #000
	}
	.nav_search_body {
		border-bottom: 2px #e6eaef solid;
	}
	.nav_search_pair::placeholder {
		color: #ccc;
	}
	.top_nav_search_pair_scroll::-webkit-scrollbar-thumb {
		background-color: #e6eaef;
	}
	.pair_item:hover {
		background: #eef0f5;
	}
	.pair_item:hover .pair_asset_1 {
		color: #E88100;
	}
}

.theme_Dark * {
	.nav_search_pair {
		color: #fff;
	}
	.pair_markets_item, .pair_markets_item_active {
		color: #ffffff66;
	}
	.pair_markets_item:hover, .pair_markets_item_active, #nav_no_search_pairs{
		color: #dfe2ecd9
	}
	.nav_search_body {
		border-bottom: 2px #395269 solid;
	}
	.nav_search_pair::placeholder {
		color: #ccc;
	}
	.top_nav_search_pair_scroll::-webkit-scrollbar-thumb {
		background-color: #395269;
	}
	.pair_item:hover {
		background: #364f65;
	}
	.pair_item:hover .pair_asset_1 {
		color: #febc58;
	}
}

/* nav icons */

.nav_icon {
	height: 54px;
	width:40px;
	display: flex;
	align-items: center;
	transition:0.1s;
	cursor:pointer;
	justify-content: center;
}
.nav_icon_data {
	padding:22px 0 25px 0; 
	right:0; 
	border-radius: 0 0 15px 15px; 
	font-size:14px;
	display: none;
	position:absolute;
	top:54px;
	z-index: -1;
}
.nav_icon:hover .nav_icon_data {
	display:block;
}
.nav_icon_scroll {
	max-height: calc(100vh - 144px); 
	overflow-x: hidden; 
	padding: 0 35px;
	cursor: text;
}

.nav_link {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    margin: 0px -10px;
    border-radius: 5px;
	transition:0.1s;
	cursor:pointer;
}


.notice {
	padding: 0px 5px 1px 4px;
    border-radius: 3px;
	transition:0.1s;
	cursor:pointer;
}

.nav_info {
	padding: 25px 34px;
	margin: 0 -35px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav_avatar {
	border-radius: 5px;
	margin-right:15px;
}

.nav_line {
	height: 1px;
    margin: 20px -35px;
}

.theme_Light * {
	.nav_icon {
		color: #94a1ad;
	}
	.nav_icon:hover {
		color: #E88100;
	}
	.nav_icon_data {
		border-top: 1px #dbdcde solid; 
		background: #fff;
		box-shadow: 0px 0 8px 4px #cdcdcd8f;
	}
	.nav_icon_scroll::-webkit-scrollbar-thumb {
		background-color: #eef0f5;
	}
	.nav_link:hover {
		background: #eef0f5;
	}
	.notice:hover {
		background: #94a1ad;
		color: #fff;
	}
	.nav_info {
		background: linear-gradient(89deg, #eef0f5, transparent);
	}
	.nav_avatar {
		box-shadow: 0px 0 4px 2px #cdcdcd99;
	}
	
	.nav_line {
		background: #dbdcde;
	}
}

.theme_Dark * {
	.nav_icon {
		color: #94a1ad;
	}
	.nav_icon:hover {
		color: #febc58;
	}
	.nav_icon_data {
		border-top: 1px #395269 solid;
        background: #1f3749;
        box-shadow: 0px 0 8px 4px #1616168f;
	}
	.nav_icon_scroll::-webkit-scrollbar-thumb {
		background-color: #eef0f5;
	}
	.nav_link:hover {
		background: #364f65;
	}
	.notice:hover {
		background: #94a1ad;
		color: #fff;
	}
	.nav_info {
		background: linear-gradient(90deg, #152836, #1f3749);
	}
	.nav_avatar {
		box-shadow: 0px 0 4px 2px #cdcdcd99;
	}
	
	.nav_line {
		background: #465d73;
	}
}

/* nav vip */

.nav_vip {
    width: max-content;
    margin-top: 5px;
    display: flex;
    align-items: center;
}

.nav_vip_number {
	padding: 2px 4px 2px 7px;
	border-radius: 3px;
	letter-spacing: 2px;
	font-weight: 500;
	text-align: center;
	transition:0.1s;
}
.nav_vip_levels {
	display:flex;
	margin-left:5px
}

.nav_vip_level, .nav_vip_level_green {
	height:9px; 
	width:3px; 
	margin-left:3px
}

.theme_Light * {
	.nav_vip_number {
		background: #94a1ad;
		color: #fff;
	}
	.nav_vip_number:hover {
		background: #2a9b7e;
		color: #fff;
	}
	.nav_vip_level {
		background:#dbdcde; 
	}
	.nav_vip_level_green {
		background:#00db31; 
	}
}

.theme_Dark * {
	.nav_vip_number {
		background: #465d73;
		color: #ffffffb3;
	}
	.nav_vip_number:hover {
		background: #2a9b7e;
		color: #ffffffb3;
	}
	.nav_vip_level {
		background:#465d73; 
	}
	.nav_vip_level_green {
		background:#37c99e; 
	}
}

/* footer */

.footer {
	position: sticky; 
	bottom: 0px; 
	z-index:5;
}

.footer_border {
	position: sticky;
    bottom: 38px;
    z-index: 1;
    height: 3px;
}

.footer_body {
	display:flex; 
	align-items: center; 
	justify-content: space-evenly; 
	padding: 0 10px 0 20px; 
	font-size:12px;
}

#wss_indicator {
	margin-right: 10px;
	height: 18px;
}

.footer_item {
	padding: 0 10px;
    height: 38px;
    display: flex;
    align-items: center;
	font-size: 12px;
    font-family: sans-serif;
    letter-spacing: 1px;
	transition:0.25s;
	cursor:pointer;
}
.footer_direct {
	height: 18px; 
	transform: rotate(-180deg); 
	padding-left: 2px;
	transition:0.25s;
}

.footer_icon {
    opacity: 0.5;
    margin-right: 5px;
	transition:0.25s;
}
.footer_item:hover .footer_icon {
	opacity: 1;
}

.footer_data {
	padding: 20px 0 18px;
    margin-left: -10px;
    bottom: 38px;
    border-radius: 15px 15px 0 0;
    z-index: -1;
    width: fit-content;
    display: none;
    position: absolute;
    font-size: 12px;
}
.footer_item:hover .footer_data {
	display: block;
}

.footer_item_scroll {
	max-height: calc(100vh - 84px); 
	overflow-y: scroll; 
	overflow-x: hidden; 
	margin-right: 4px; 
	padding: 0 22px 0 30px;
}

.footer_link {
    padding: 8px 8px 6px 8px;
    margin: 0 -8px;
    border-radius: 5px;
	transition:0.1s;
	cursor:pointer;
}

.theme_Light * {
	.footer_background {
		background:#fff;
	}
	.footer_border_background {
		background: #eef0f5;
	}
	.footer_item:hover {
		color:#E88100;
	}
	.footer_item:hover .footer_direct {
		transform: rotate(0deg); 
	}
	.footer_data {
		border-bottom: 3px #eef0f5 solid;
		box-shadow: 0px 0 8px 4px #cdcdcd8f;
		background: #FFF;
	}
	.footer_item_scroll::-webkit-scrollbar-thumb {
		background-color: #eef0f5;
	}
	.footer_link:hover {
		background: #eef0f5;
	}
}

.theme_Dark * {
	.footer_background {
		background:#1f3749;
	}
	.footer_border_background {
		background: #152836;
	}
	.footer_item:hover {
		color:#e3aa63;
	}
	.footer_item:hover .footer_direct {
		transform: rotate(0deg); 
	}
	.footer_data {
		border-bottom: 3px #152836 solid;
        box-shadow: 0px 0 8px 4px #1616168f;
        background: #1f3749;
	}
	.footer_item_scroll::-webkit-scrollbar-thumb {
		background-color: #eef0f5;
	}
	.footer_link:hover {
		background: #364f65;
	}
}

/* media */

#notifications_adaptive, #nav_adaptive, #nav_logo_adaptive, #footer_adaptive, #user_login_adaptive {
	display:none;
}

.chat_off * {
	@media (max-width: 945px) {
		#notifications_adaptive, #nav_adaptive {
			display:flex;
		}
		#notifications_list, #show_assets {
			display:none;
		}
	}
	@media (max-width: 900px) {
		.nav_section {
			display:none;
		}
		#notifications_adaptive {
			display:none;
		}
		#notifications_list {
			display:flex;
		}
	}
	@media (max-width: 590px) {
		#notifications_adaptive {
			display:flex;
		}
		#notifications_list {
			display:none;
		}
	}
	@media (max-width: 500px) {
		#user_login_adaptive {
			display:flex;
		}
		#user_login {
			display:none;
		}
	}
	@media (max-width: 400px) {
		#nav_body_item_left {
			display:none;
		}
		#nav_body_item_right {
			justify-content: space-evenly;
			width: -webkit-fill-available;
		}
		#nav_logo_adaptive {
			display: block;
		}
	}
	@media (max-width: 950px) {
		#footer_adaptive {
			display: flex
		}
		.footer_item_desc {
			display:none
		}
	}
	@media (max-width: 850px) {
		.footer_nav {
			display:none
		}
		.footer_item_desc {
			display:flex
		}
	}
	@media (max-width: 500px) {
		.footer_item_desc {
			display:none
		}
	}
}

.chat_on * {
	@media (max-width: calc(945px + 335px)) {
		#notifications_adaptive, #nav_adaptive {
			display:flex;
		}
		#notifications_list, #show_assets {
			display:none;
		}
	}
	@media (max-width: calc(900px + 335px)) {
		.nav_section {
			display:none;
		}
		#notifications_adaptive {
			display:none;
		}
		#notifications_list {
			display:flex;
		}
	}
	@media (max-width: calc(590px + 335px)) {
		#notifications_adaptive {
			display:flex;
		}
		#notifications_list {
			display:none;
		}
	}
	@media (max-width: calc(500px + 335px)) {
		#user_login_adaptive {
			display:flex;
		}
		#user_login {
			display:none;
		}
	}
	@media (max-width: calc(400px + 335px)) {
		#nav_body_item_left {
			display:none;
		}
		#nav_body_item_right {
			justify-content: space-evenly;
			width: -webkit-fill-available;
		}
		#nav_logo_adaptive {
			display: block;
		}
	}
	@media (max-width: calc(950px + 335px)) {
		#footer_adaptive {
			display: flex
		}
		.footer_item_desc {
			display:none
		}
	}
	@media (max-width: calc(850px + 335px)) {
		.footer_nav {
			display:none
		}
		.footer_item_desc {
			display:flex
		}
	}
	@media (max-width: calc(500px + 335px)) {
		.footer_item_desc {
			display:none
		}
	}
}




.nav_sub_title {
	padding: 6px 0 12px 0;
    margin-bottom: 6px;
}
.theme_Light * {
	.nav_sub_title {
		border-bottom: 2px #e6eaef solid;
		color: #ccc;
	}
}
.theme_Dark * {
	.nav_sub_title {
		border-bottom: 2px #465d73 solid;
		color: #a3abc3d9;
	}
}