/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
@import url('https://use.fontawesome.com/releases/v5.12.1/css/all.css');

/* Variables */
:root {
	--primary-color: #8fefdc;
	--secondary-color: #AF78EA;
	--tertiary-color: #182255;
	--success-color: #7DD88B;
	--error-color: #FC6767;
	--warning-color: #fb8c00;
	--gray-color: #888;
	--border-radius: 15px;
}

/* Reset */
*, *:after, *:before { margin:0; padding:0; box-sizing:border-box; }
p {text-align: left;}
html, body { height:100%; color: #fff;}
body, select, textarea, input, button { font:15px/1.3 'Poppins', sans-serif; }
a { text-decoration:none; cursor:pointer; }
a:hover, a:active, a.active { text-decoration:white; }
:focus { outline:none; outline-offset:0; }
img { max-width:100%; }
input[type="checkbox"] { position:relative; top:1px; margin-right:5px; display: none;}
hr { margin:20px 0; height:1px; border:0; background:#eee; }
h1, h2, h3, h4, h5, h6 { font-weight:600; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--primary-color); border-radius:6px; }
[v-cloak] { display:none; }

/* Special */
.active, .loading, .empty, .full, .valid, .invalid, .disabled, .selected, .reverse, .checked, .focus, .readonly, .primary, .secondary, .success, .error, .warning {}

.layout { background: url(assets/images/background.jpg); height:100%; overflow:auto; min-width:320px; position:relative; z-index:1; }

.header { display:flex; padding:25px 30px; position:relative; }
	.header_logo {list-style:none; display:flex;}
		.header_logo li {padding:0 10px; line-height: 2; font-size: 22px;}
	.header_seperator { flex:1 0; }
	.header_nav { list-style:none; display:flex; padding:0 40px 0 80px; }
		.header_nav li { padding:0 30px; line-height: 3;}			
		.header_nav a { color:#fff; }
			.header_nav a.active {border-bottom-style: solid; border-color: var(--secondary-color);}
	.header_tools { display:flex; margin:-8px -5px; }
		.header_tools > * { margin:0 5px; }
	.header_settings { background:#353535; padding:7px 9px 4px 8px; }
		.header_settings.active { border-style: solid; border-width: 2px; border-color: var(--secondary-color); }
	.header_more { background:#353535; padding:11px 10px 3px; }
		.header_more.active { border-style: solid; border-width: 2px; border-color: var(--secondary-color); }
	.header_wallet { display:flex; background:#353535; border-radius:var(--border-radius); cursor:pointer; }
	.header_adr { background: #12163b; padding:10px; border-radius:var(--border-radius); }

.dropdown-more { z-index:100; list-style:none; position:absolute; top:90px; right:20px; background: #12163b; box-shadow:none; border-radius:20px; padding:15px 40px 15px 20px; animation:dropdown-nav_anim 0.2s ease; max-height:500px; overflow:auto; }
		@keyframes dropdown-nav_anim {0% { transform:translateY(-20px); opacity:0; } 100% { transform:translateY(0); opacity:1; } }
	.dropdown-more a { display:flex; align-items:center; color:#fff; padding:12px 0; font-size:16px; }
	.dropdown-more img { margin-right:15px; width:20px; }

.dropdown-settings { z-index:100; list-style:none; position:absolute; top:90px; right:20px; background: #12163b; box-shadow:none; border-radius:20px; padding:15px 40px 15px 20px; animation:dropdown-nav_anim 0.2s ease; max-height:500px; overflow:auto; }
	.dropdown-settings_title { font-weight:bold; padding:8px 0; }
	.dropdown-settings_name { padding:8px 0 12px; }
	.dropdown-settings_input { display:flex; margin:0 -5px 10px; align-items:center; }
		.dropdown-settings_input > * { margin: 0 5px; }

.logo {height: 40px; width: 40px;}	

.launch { padding:60px 0px 00px; background:none; }
	.launch_box {margin:0 auto; max-width:440px; color: #8feedc; font-size: 33px;}

.btn { color:#fff; background:#12163b; border:0px solid transparent; padding:9px 14px; justify-content:center; text-decoration:none; display:inline-flex; align-items:center; cursor:pointer; border-radius:var(--border-radius); transition:0.2s; }
	.btn.primary { background:linear-gradient(260deg, var(--primary-color) 0%, var(--secondary-color) 40.48%); color:#fff; }
	.btn.secondary { color:var(--primary-color); border:1px solid; border-radius: 7px;}
	.btn_empty { border-color:#2b3651; background:#2b3651; color:#fff; }
	.btn_claim { border-color: #fff; border: 1px solid #fff; margin-left: 10px; border-radius: 7px; }
	.btn[disabled] { cursor:not-allowed; }
	
.form { padding:40px 20px 80px; background:none; min-height:calc(100% - 75px); }
	.form_wrap { margin:0 auto; max-width:500px; border-radius:30px; background:#12163b;; box-shadow:0 -3px 5px rgba(0,0,0,0.03); }
	.form_swap { background:#2b3651; padding:33px; border-radius:30px; box-shadow: #3d4f68; border-style: solid; border-width: 4px; border-color: #3d4f68;}
	.form_nav { display: flex; list-style:none; margin:0 0 20px 0; padding:10px 0; align-items:center; justify-content:space-around; }
			.form_nav.active { display:flex; }
		.form_nav li { padding:0 10px; text-align:center; }
		.form_nav a { color:#000; font-size:24px; font-weight:500; color:#ADBCC7; }
			.form_nav a:hover { text-decoration:none; }
			.form_nav li.active a { color:var(--secondary-color); }
	.form_to { background:url(assets/icons/change_arrow.svg) no-repeat center; padding:30px 0; cursor:pointer; }
	.form_stake { background:url(assets/icons/plus.png) no-repeat center; padding:30px 0; cursor:pointer; }
	.form_submit { margin:20px 0 0; width:100%; padding:18px 0; font-size:19px; box-shadow:0px 4px 4px rgba(244, 77, 85, 0.3); }
		.form_submit_nm { margin:0; }
	.form_error { margin:20px 0 0; padding:18px 20px; font-size:19px; background:#121212; color:#888; text-align:center; border-radius:var(--border-radius); display:block; }
	.form_back { margin:0 0 20px 0; padding:10px 0; color:#000; font-size:24px; font-weight:500; color:var(--secondary-color); display:block; }
		.form_back:hover { text-decoration:none; }
		.form_back:before { content:""; background:url(assets/icons/arrow-down.svg); width:26px; height:15px; margin:0 20px 0 0; display:inline-block; transform: rotate(90deg); }
	.form_inf { padding:15px 45px; background: #12163b; border-radius: 30px; }

.inp { background:#2b3651; border:1px solid #12163b; color:#fff; border-radius:var(--border-radius); padding:8px 9px 9px;}

.inp-box { background:#12163b; border-radius:20px; padding:15px 20px; }
        .inp-box.empty { background:#12163b; }
    .inp-box_head { display:flex; }
    .inp-box_label { flex:1 0; font-size:13px; }
    .inp-box_balance { font-size:13px; }
    .inp-box_wrap { display:flex; padding:7px 0 0; align-items:center;}
    .inp-box_inp { color:#fff; flex:1 0; font-size:30px; font-weight:500; background:none; border:none; min-width:40px; overflow:hidden; text-overflow:ellipsis; }
	.inp-box_max { text-transform:uppercase; font-weight:100; color:var(--primary-color); background: transparent; font-size:14px; padding:2px 5px; border-radius:5px; border-color: var(--primary-color); cursor:pointer; margin-right:5px; }
    .inp-box_token { display:flex; align-items:center; cursor:pointer; border-radius:var(--border-radius); padding:7px 8px; white-space:nowrap; }
            .inp-box_token[disabled] { cursor:default; }
            .inp-box_token:hover { background:#2b3651; }
            .inp-box_token[disabled]:hover { background:none; }
            .inp-box_token.empty { background:#2b3651; box-shadow:0px 0px 5px rgba(186, 10, 115, 0.1); }
        .inp-box_token img { max-width:24px; max-height:24px; }
        .inp-box_token span { margin:0 0 0 8px; font-size:20px; }
            .inp-box_token.empty span { font-size:14px; }
        .inp-box_token:after { content:""; background:url(/assets/icons/arrow-down.svg); width:26px; height:16px; margin:0 0 0 20px; }
            .inp-box_token[disabled]:after { display:none; }

.seperator { margin:10px 0; height:1px; background:#fff; }
.liquiditylist { }
		.liquiditylist:not(:first-child) { margin-top:-20px; }
	.liquiditylist_title { font-weight:500; padding:20px 0 20px; }
	.liquiditylist_empty { margin:0 0 10px 0; border:2px solid #12163b; border-radius:var(--border-radius); padding:15px 0; text-align:center; color:#D6DDE3; }
	.liquiditylist_elements { flex-wrap:wrap; }
	.liquiditylist_element { margin:0 0 10px 0; border-radius:var(--border-radius); padding:0 15px; position:relative; }
		.liquiditylist_element.active .liquiditylist_body { height:auto; padding:5px 0 15px; }
	.liquiditylist_body { height:0; transition:0.2s; overflow:hidden; padding:0; }
	.liquiditylist_box:not(.active) { padding:10px; margin:0 0px 20px 0; border:2px solid var(--secondary-color); border-radius: 15px; }
	.liquiditylist_box.active { max-width:inherit; width:100%; margin:0 10px 10px 0; background: #12163b; border-radius: 30px; }
	.liquiditylist_box.active .liquiditylist_head:after { content:""; background:url(assets/icons/arrow-down.svg); width:26px; height:15px; margin:0 17px 0 30px; display:inline-block; transform: rotate(180deg); }
		.liquiditylist_box:not(.active) .liquiditylist_head { text-align:center; }
		.liquiditylist_box:not(.active) .liquiditylist_head:after { content:""; background:url(assets/icons/arrow-down.svg); width:26px; height:15px; margin:0 17px 0 30px; display:inline-block; transform: rotate(0deg); }
		.liquiditylist_box:not(.active) .liquiditylist_arrange { position:absolute; bottom:-8px; left:-8px; right:-8px; font-size:11px; }
	.liquiditylist_head { display:flex; align-items:center; padding:21px 0; cursor:pointer; position:relative; }
	.liquiditylist_icons { font-size:0; padding:3px 0; }
	.liquiditylist_name { font-size:17px; font-weight:500; padding:0 0 0 5px; }
	.liquiditylist_token { flex:0 0; margin-right:1px; width:22px; height:22px; }
	.liquiditylist_tool { color:#ADBCC7; font-weight:500; font-size:14px; flex: 1 0; text-align: right; }
	.liquiditylist_ver { color: #ADBCC7; border: 2px solid #fff;  margin:0px 7px 0; padding:2px 2px 0; text-align:right; }
	.liquiditylist_buttons { display:flex; }
	.liquiditylist_buttons > * { margin:0 10px; flex:1 0; padding:7px 15px; }
	.liquiditylist_toggle { border-radius: 30px; background: #12163b; padding: 20px 0px 20px; }
		.liquiditylist_toggle a { font-size:13px; padding:0 92px; color:#555; }
		.liquiditylist_toggle a:last-child { border-right: 0;}
		.liquiditylist_toggle a.active { color: #282f46; border-radius: 30px; padding: 20px 92px 20px; background: #92afff; }

.element {}	
	.element_body { transition:0.2s; }
	.element_parameters {  }

.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:#090f12bf; z-index:1000; overflow:auto; padding:0 25px; }
	.modal_wrap { max-width:480px; background:#1e2f3f; box-shadow:none; border-radius:30px; margin:50px auto; animation:modal__wrap_anim 0.3s ease; position:relative; border: 3px solid #638888; }
    	@keyframes modal__wrap_anim {0% { transform:translateY(-40px); opacity:0; } 100% { transform:translateY(0); opacity:1; } }
	.modal_cancel { position:absolute; top:35px; right:35px; background:url(/assets/icons/cancel.png); width:20px; height:20px; cursor:pointer; background-color: #fff; border-radius: 30px; }
    .modal_title { font-weight:400; font-size:20px; padding:28px 28px 0; color: #8ee0ce; }
	.modal_body { padding:15px 28px 28px; }

.source { list-style:none; }
		.source li {display:flex;border:1px solid #ddd;border-radius:var(--border-radius);padding:20px;align-items:center;margin:0 0 15px 0;transition:0.2s;cursor:pointer;}
			.source li:hover { border-color:var(--secondary-color); }
	.source_icon { max-height:32px; max-width:32px; }
	.source_name { padding:0 20px; flex:1 0; font-size:20px; }
	.source_status { color:var(--secondary-color); }

.initializing { text-align:center; }
	.initializing_icon { text-align:center; padding:20px 0; animation:initializing_icon_anim 2s infinite ease; }
    	@keyframes initializing_icon_anim {0% { transform:rotateZ(0); } 100% { transform:rotateZ(360deg); } }
	.initializing_title { font-size:18px; font-weight:500; padding:5px 0; }
	.initializing_subtitle { padding:5px 0; }

.select-token {}
	.select-token_filter { width:100%; }
	.select-token_head { align-items:center; text-align: center; justify-content:space-between; padding:15px 0; margin:10px 10px 10px; background:#12163b; border-radius: 30px; }
	.select-token_head-label { font-size:15px; }
	.select-token_sort { color:#ADBCC7; padding:0 20px 0 0; background:url(images/sort.svg) no-repeat right center; }
	.select-token_list { list-style:none; display: grid; grid-template-columns: auto auto auto; }
		.select-token_list li { display:flex; padding:15px 0; align-items:center; cursor:pointer; }
	.select-token_icon { max-height:28px; width:28px; margin-left: 10px;}
		.select-token_icon_l { max-height:36px; width:36px; }
	.select-token_name { padding:0 20px; flex:1 0; font-size:22px; font-weight: 500; }
	.select-token_group { padding:0 20px; flex:1 0; }
	.select-token_desc { font-size:18px; }
	.select-token_value { color:#888; font-size:13px; padding:3px 0 0; }
	.select-token_tools { margin:0 -3px; }
		.select-token_tools > * { margin:0 3px; }

.swap_table { background-color: #12163b; list-style:none; padding:5px 20px; border-radius:var(--border-radius); position:relative; }
	.swap_table li { display:flex; border-bottom:2px solid #fff; padding:15px 0; align-items:center; }
		.swap_table li:last-child { border:0; }
	.swap_table img { max-height:24px; max-width:24px; margin: 0px 12px 0px 0px; }
	.swap_table div { flex:1 0; font-size:21px; font-weight:500; }
	.swap_table span { color:#fff; font-size:21px; }


.checkmark { position: relative; margin: 0px 10px 0px 0px; top: 0; left: 0; height: 20px; width: 20px; background-color: var(--tertiary-color); border: 1px solid #fff;}
	.checkmark:after { content: ""; position: absolute; display: none; }
.parameters { margin:15px 0 0; padding:0 20px; }
.parameter { display:flex; padding:7px 0; align-items:center; }
	.parameter a { color: var(--primary-color); padding: 5px; text-decoration: underline 3px;}
	.parameter input { position: relative; opacity: 0; cursor: pointer; height: 0; width: 0; }
	.parameter input:checked ~ .checkmark:after { display: flex; }
	.parameter .checkmark:after { left:7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
	.parameter_title { font-weight:500; margin:10px 0; color: var(--primary-color); }
	.parameter_name { flex:1 0; }
	.parameter_value { font-weight:500; display:flex; align-items:center; }
		.parameter_value a { color:#fff; text-decoration:underline; }

.notificaitons { position:absolute; top:100px; left:40px; z-index:1001; max-width:320px; }
.notification { position:relative; margin:0 0 20px 0; background:#2a2a2a; color:#3a3a3a; box-shadow:none; border-radius:20px; padding:24px 54px 24px 54px; width:320px; overflow:hidden; }
		.notification:after { content:""; position:absolute; width:21px; height:20px; left:20px; top:23px; }
		.notification.error { color:var(--error-color); }
			.notification.error:after { width:27px; height:27px; left:15px; top:17px; }
		.notification.warning { color:var(--warning-color); }
			.notification.warning:after { width:24px; height:24px; left:20px; top:22px; animation:notice-rotation 3s linear infinite; }
		.notification.success { color:var(--success-color); }
			.notification.success:after { width:22px; height:22px; left:20px; top:22px; }
	.notification_close { position:absolute; top:25px; right:20px; width:20px; height:20px; cursor:pointer; }
	.notification_text { font-size:15px; font-weight:700; }
	.notification_footer { margin:20px -55px -30px; padding:10px 25px 17px; display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,0.05); }
	.notification_link { white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis; font-size:13px; color:#adbcc7; }
		.notification_link:before { content:""; width:14px; height:14px; display:inline-block; background-size:cover; margin:0 5px 0 0; position:relative; top:2px; }
	.notification_status { font-size:13px; display:inline-block; background:#e6e6e6; color:#a5a5a5; padding:5px 10px; border-radius:5px; font-weight:bold; }
		.notification.error .notification_status { background:#ffe6e6; color:var(--error-color); }
		.notification.warning .notification_status { background:#ffeec8; color:var(--warning-color); }
		.notification.success .notification_status { background:#d4f9db; color:var(--success-color); }
	@keyframes notification-rotation {0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }

@media (max-width:1200px) {
	.header_nav { display:none; }
	.form_nav { display:flex;}
}

@media (max-width:500px) {
	.layout { zoom:0.8; }
}