:root {
    --color-bg-main: #101010;
    --color-bg-main-tl: #1c1c1c;
    --color-bg-main-br: #1a1a1a;

    --color-bg-1: #15123d;
    --color-bg-2: #182a4b;
    --color-bg-3: #1a3358;
    --color-bg-4: #1c3b66;
    --color-bg-5: #1f4473;
    --color-bg-6: #214c81;
    --color-bg-7: #24558e;
    --color-bg-8: #275d9c;
    --color-bg-9: #2a719f;
    --color-bg-10: #3283b3;
    --color-bg-11: #3a95c5;
    --color-bg-12: #42a7d7;
    --color-bg-13: #4ab9e8;
    --color-bg-14: #4bc1ec;

    --color-bg-rt-6: #814121;
    --color-bg-rt-9: #9f2a2a;

	--color-bg-dark: #0e1621;
	--color-bg-bright: #f5f5f5;
	--color-bg-green: #1d321d;
    --color-bg-green-tl: #203620;
    --color-bg-green-br: #182918;
	--color-bg-red: #4a1d1d;
    --color-bg-red-tl: #532121;
    --color-bg-red-br: #421a1a;
	--color-bg-gray: #222222;
    --color-bg-gray-tl: #242424;
    --color-bg-gray-br: #202020;
	--color-bg-blue: #144060;
    --color-bg-chain: #66005c;
	--color-tx-bright: #f5f5f5;
	--color-tx-chain: #ff00af;
	--color-tx-violett: #534696;
	--color-tx-gray: #666666;
	--color-tx-red: #e42220;
	--color-tx-green: #68b42e;
    --color-tx-darkgreen: #406e1d;
	--color-tx-blue: #2880c0;
    --color-tx-yellow: #c0b628;
    --color-tx-orange: #c07128;

    --color-tx-main: #2880c0;
    --color-tx-main-bright: #f5f5f5;
    --color-tx-9: #0e1621;

	--size-tx-normal: 0.9rem;
	--line-tx-normal: 1.2rem;
	--size-tx-small: 0.65rem;
	--line-tx-small: 1rem;
	--size-tx-xsmall: 0.6rem;
	--line-tx-xsmall: 0.75rem;
	--size-tx-big: 1.1rem;
	--line-tx-big: 1.4rem;
	--size-tx-big2: 1.6rem;
    --line-tx-big2: 1.8rem;

    --color-ln-main: #2f2f2f;
    --color-ln-main-tl: #2f2f2f;
    --color-ln-main-br: #1c1c1c;

    --color-ln-chain: #ff00af;
    --color-ln-blue: #2880c0;

    --color-ln-off-tl: #3f3f3f;
    --color-ln-off-br: #2f2f2f;


}

body {
	background: var(--color-bg-main);
	color: var(--color-tx-main);
	Font-family: 'Verdana';
	font-size: var(--size-tx-normal);
	line-height: var(--line-tx-normal);
	margin: 0em;
}

.container {
    display: flex;
    width: 100%-10px;
    flex-direction: column;
    min-height: 400px;
    margin: 5px;
    padding: 5px;



}

.row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
    width: 100%;
}

.row-content {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
    width: 3600px;
    margin: 5px auto;
    padding: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.bg-main-off {
    background: linear-gradient(to bottom right, var(--color-bg-main-tl),var(--color-bg-main-br)) padding-box,linear-gradient(to bottom right,var(--color-ln-main-tl),var(--color-ln-main-br)) border-box;
    border-radius: 20px;
    border: 2px solid transparent;
}

.bg-main-on {
    background: linear-gradient(to bottom right, var(--color-bg-main-tl),var(--color-bg-main-br)) padding-box,linear-gradient(to bottom right,var(--color-ln-chain),var(--color-ln-blue)) border-box;
    border-radius: 20px;
    border: 2px solid transparent;
}

.bg-gray-off {
    background: linear-gradient(to bottom right, var(--color-bg-gray-tl),var(--color-bg-gray-br)) padding-box,linear-gradient(to bottom right,var(--color-ln-off-tl),var(--color-ln-off-br)) border-box;
    border-radius: 10px;
    border: 2px solid transparent;
}

.bg-green-off {
    background: linear-gradient(to bottom right, var(--color-bg-green-tl),var(--color-bg-green-br)) padding-box,linear-gradient(to bottom right,var(--color-ln-off-tl),var(--color-ln-off-br)) border-box;
    border-radius: 10px;
    border: 2px solid transparent;
}

.bg-red-off {
    background: linear-gradient(to bottom right, var(--color-bg-red-tl),var(--color-bg-red-br)) padding-box,linear-gradient(to bottom right,var(--color-ln-off-tl),var(--color-ln-off-br)) border-box;
    border-radius: 10px;
    border: 2px solid transparent;
}

.bg-colored-on {
    background: linear-gradient(to bottom right, var(--color-bg-chain),var(--color-bg-blue)) padding-box,linear-gradient(to bottom right,var(--color-ln-chain),var(--color-ln-blue)) border-box;
    border-radius: 10px;
    border: 2px solid transparent;
}


.bg-1 {
	background: var(--color-bg-1);
}

.bg-2 {
	background: var(--color-bg-2);
}

.bg-3 {
	background: var(--color-bg-3);
}

.bg-gray {
	background: var(--color-bg-gray);
}

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

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

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

.tx-main {
	color: var(--color-tx-main);
}

.tx-main-bright {
	color: var(--color-tx-main-bright);
}

.tx-chain {
	color: var(--color-tx-chain);
}

.tx-gray {
	color: var(--color-tx-gray);
}

.tx-green {
	color: var(--color-tx-green);
}

.tx-big {
    font-size: var(--size-tx-big);
    line-height: var(--line-tx-big);
}

.tx-big2 {
    font-size: var(--size-tx-big2);
    line-height: var(--line-tx-big2);
}

.tx-small {
    font-size: var(--size-tx-small);
    line-height: var(--line-tx-small);
}

.tx-right {
    text-align: right;
}

.tx-center {
    text-align: center;
}

.box {
    display: block;
    width: 100%;
    min-height: 15px;
    margin: 3px;
    padding: 3px;
}

.box200 {
    display: block;
    width: 184px;
    min-height: 100px;
    margin: 3px;
    padding: 3px;
}

.box400 {
    display: block;
    width: 384px;
    min-height: 15px;
    margin: 3px auto;
    padding: 3px;
}

.box500 {
    display: block;
    width: 484px;
    min-height: 15px;
    margin: 3px auto;
    padding: 3px;
}

.box800 {
    display: block;
    width: 784px;
    min-height: 15px;
    margin: 3px auto;
    padding: 3px;
}

.svgq40 {
    display: block;
    width: 40px;
    height: 40px;
}

.svgw40 {
    display: block;
    width: 40px;
    height: 100%;
}

.svgr {
    float: right;
}

.svgtx-main {
    fill: var(--color-tx-main);
}

.svgtx-main-bright {
    fill: var(--color-tx-main-bright);
    stroke: #22252b;
    stroke-width: 4;
    paint-order: stroke fill;
}

.svgtx-gray {
    fill: var(--color-tx-gray);
}

.svgtx-green {
    fill: var(--color-tx-green);
}

.svgtx-darkgreen {
    fill: var(--color-tx-darkgreen);
}

.svgtx-red {
    fill: var(--color-tx-red);
}

.svgtx-chain {
    fill: var(--color-tx-chain);
}
.svgtxt-dia-bright {
	fill: var(--color-tx-bright);
	font-size: var(--size-tx-small);
}
.svgtxt-dia-chain {
	fill: var(--color-tx-chain);
	font-size: var(--size-tx-small);
}
.svgtxt-dia-violett {
	fill: var(--color-tx-violett);
	font-size: var(--size-tx-small);
}
.svgtxt-dia-gray {
	fill: var(--color-tx-gray);
	font-size: var(--size-tx-small);
}

.borderline {
    fill: none;
    stroke: var(--color-bg-7);
    stroke-width: 30
}

.grayline {
    fill: none;
    stroke: var(--color-tx-gray);
    stroke-width: 1
}

.greenline {
    fill: none;
    stroke: var(--color-tx-green);
    stroke-width: 1
}

.redline {
    fill: none;
    stroke: var(--color-tx-red);
    stroke-width: 1
}

.blueline {
    fill: none;
    stroke: var(--color-tx-blue);
    stroke-width: 1
}


.datatable {
    width: 100%;
}

.datatable tr:nth-child(4n+1) {
    background-color: var(--color-bg-8);
}

.datatable tr:nth-child(4n+2) {
    background-color: var(--color-bg-4)
}

.datatable tr:nth-child(4n+3) {
    background-color: var(--color-bg-6);
}

.datatable tr:nth-child(4n) {
    background-color: var(--color-bg-2);
}

.oracletable {
    width: 100%;
    border-collapse: collapse;
    border: none;
}

.oracletable td{
    border: none;
    padding: 0;
    text-align: center; 
}

.inputtable {
    width: 100%;
}

.inputfield {
	background: var(--color-bg-bright);
	width: 95%;
}

.table100 {
    width: 100%;
}

table td.token {
    width: 55px;
}

table td.oracle {
    width: 140px;
}

table td.symbol {
    width: 8px;
}

table td.ptc {
    width: 25px;
}

a {
    text-decoration: none;
}

@media screen and (max-width: 3680px) {
	.row-content {
        width: 3200px;
    }
}

@media screen and (max-width: 3280px) {
	.row-content {
        width: 2800px;
    }
}

@media screen and (max-width: 2880px) {
	.row-content {
        width: 2400px;
    }
}

@media screen and (max-width: 2480px) {
	.row-content {
        width: 2000px;
    }
}

@media screen and (max-width: 2080px) {
	.row-content {
        width: 1600px;
    }
}

@media screen and (max-width: 1680px) {
	.row-content {
        width: 1200px;
    }
}

@media screen and (max-width: 1280px) {
	.row-content {
        width: 800px;
    }
}

@media screen and (max-width: 880px) {
	.row-content {
        width: 100%;
    }

    .tx-s-center {
        text-align: center;
    }

    .box200 {
        margin: 0px;
    }

    .box400 {
        width: 100%;
    }

    .box500 {
        width: 100%;
    }

    .box800 {
        width: 100%;
    }
}