/* ------------------ flex ------------------ */
.flex{display:flex}
.inline-flex{display:inline-flex}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}
.justify-end{justify-content:end}
.justify-right{justify-content:right}
.items-center{align-items:center}
.flex-nowrap {flex-wrap: nowrap;}
.flex-wrap {flex-wrap: wrap;}
.flex-1 {flex: 1 1 0%}
.flex-column { flex-direction: column}
/* ------------------ color ------------------ */
.primary-color{color:var(--lay-color-primary);}
.warning-color{color:var(--lay-color-warning);}
.green-color{color:#52c41a;}
.delete-color{color:#A08E7A;}
/* ------------------ padding,margin ------------------ */
.p-4{padding:4px}
.px-4{padding-right:4px;padding-left:4px}
.py-4{padding-bottom:4px}
.pt-4,.py-4{padding-top:4px}
.pb-4{padding-bottom:4px}
.pl-4{padding-left:4px}
.pr-4{padding-right:4px}
.p-8{padding:8px}
.px-8{padding-right:8px;padding-left:8px}
.py-8{padding-bottom:8px}
.pt-8,.py-8{padding-top:8px}
.pb-8{padding-bottom:8px}
.pl-8{padding-left:8px}
.pr-8{padding-right:8px}
.p-12{padding:12px}
.px-12{padding-right:12px;padding-left:12px}
.py-12{padding-bottom:12px}
.pt-12,.py-12{padding-top:12px}
.pb-12{padding-bottom:12px}
.pl-12{padding-left:12px}
.pr-12{padding-right:12px}
.p-16{padding:16px}
.px-16{padding-right:16px;padding-left:16px}
.py-16{padding-bottom:16px}
.pt-16,.py-16{padding-top:16px}
.pb-16{padding-bottom:16px}
.pl-16{padding-left:16px}
.pr-16{padding-right:16px}
.p-20{padding:20px}
.px-20{padding-right:20px;padding-left:20px}
.py-20{padding-bottom:20px}
.pt-20,.py-20{padding-top:20px}
.pb-20{padding-bottom:20px}
.pl-20{padding-left:20px}
.pr-20{padding-right:20px}
.p-24{padding:24px}
.px-24{padding-right:24px;padding-left:24px}
.py-24{padding-bottom:24px}
.pt-24,.py-24{padding-top:24px}
.pb-24{padding-bottom:24px}
.pl-24{padding-left:24px}
.pr-24{padding-right:24px}
.p-28{padding:28px}
.px-28{padding-right:28px;padding-left:28px}
.py-28{padding-bottom:28px}
.pt-28,.py-28{padding-top:28px}
.pb-28{padding-bottom:28px}
.pl-28{padding-left:28px}
.pr-28{padding-right:28px}
.p-32{padding:32px}
.px-32{padding-right:32px;padding-left:32px}
.py-32{padding-bottom:32px}
.pt-30{padding-top:30px}
.pt-32,.py-32{padding-top:32px}
.pb-32{padding-bottom:32px}
.pl-32{padding-left:32px}
.pr-32{padding-right:32px}
.p-36{padding:36px}
.px-36{padding-right:36px;padding-left:36px}
.py-36{padding-bottom:36px}
.pt-36,.py-36{padding-top:36px}
.pb-30{padding-bottom:30px}
.pb-36{padding-bottom:36px}
.pl-36{padding-left:36px}
.pr-36{padding-right:36px}
.p-40{padding:40px}
.px-40{padding-right:40px;padding-left:40px}
.py-40{padding-bottom:40px}
.pt-40,.py-40{padding-top:40px}
.pb-40{padding-bottom:40px}
.pl-40{padding-left:40px}
.pr-40{padding-right:40px}
.p-44{padding:44px}
.px-44{padding-right:44px;padding-left:44px}
.py-44{padding-bottom:44px}
.pt-44,.py-44{padding-top:44px}
.pb-44{padding-bottom:44px}
.pl-44{padding-left:44px}
.pr-44{padding-right:44px}
.p-48{padding:48px}
.px-48{padding-right:48px;padding-left:48px}
.py-48{padding-bottom:48px}
.pt-48,.py-48{padding-top:48px}
.pb-48{padding-bottom:48px}
.pl-48{padding-left:48px}
.pr-48{padding-right:48px}
.pr-50{padding-right:50px}
.p-52{padding:52px}
.px-52{padding-right:52px;padding-left:52px}
.py-52{padding-bottom:52px}
.pt-52,.py-52{padding-top:52px}
.pb-52{padding-bottom:52px}
.pl-52{padding-left:52px}
.pr-52{padding-right:52px}
.p-56{padding:56px}
.px-56{padding-right:56px;padding-left:56px}
.py-56{padding-bottom:56px}
.pt-56,.py-56{padding-top:56px}
.pb-56{padding-bottom:56px}
.pl-56{padding-left:56px}
.pr-56{padding-right:56px}
.p-60{padding:60px}
.px-60{padding-right:60px;padding-left:60px}
.py-60{padding-bottom:60px}
.pt-60,.py-60{padding-top:60px}
.pb-60{padding-bottom:60px}
.pl-60{padding-left:60px}
.pr-60{padding-right:60px}
.m-0{margin:0 !important;}
.m-4{margin:4px}
.mx-4{margin-right:4px;margin-left:4px}
.my-4{margin-bottom:4px}
.mt-4,.my-4{margin-top:4px}
.mt-6{margin-top:6px}
.mb-4{margin-bottom:4px}
.ml-4{margin-left:4px}
.mr-4{margin-right:4px}
.m-8{margin:8px}
.mx-8{margin-right:8px;margin-left:8px}
.my-8{margin-bottom:8px}
.mt-8,.my-8{margin-top:8px}
.mb-8{margin-bottom:8px}
.ml-7{margin-left:7px}
.ml-8{margin-left:8px}
.mr-8{margin-right:8px}
.mr-10{margin-right:10px}
.m-12{margin:12px}
.mx-12{margin-right:12px;margin-left:12px}
.my-12{margin-bottom:12px}
.mt-12,.my-12{margin-top:12px}
.mb-10{margin-bottom:10px}
.mb-12{margin-bottom:12px}
.ml-12{margin-left:12px}
.mr-12{margin-right:12px}
.m-16{margin:16px}
.mx-16{margin-right:16px;margin-left:16px}
.my-16{margin-bottom:16px}
.mt-16,.my-16{margin-top:16px}
.mb-16{margin-bottom:16px}
.ml-16{margin-left:16px}
.mr-16{margin-right:16px}
.m-20{margin:20px}
.mx-20{margin-right:20px;margin-left:20px}
.my-20{margin-bottom:20px}
.mt-20,.my-20{margin-top:20px}
.mb-20{margin-bottom:20px}
.ml-20{margin-left:20px}
.mr-20{margin-right:20px !important;}
.m-24{margin:24px}
.mx-24{margin-right:24px;margin-left:24px}
.my-24{margin-bottom:24px}
.mt-24,.my-24{margin-top:24px}
.mb-24{margin-bottom:24px}
.ml-24{margin-left:24px}
.mr-24{margin-right:24px}
.m-28{margin:28px}
.mx-28{margin-right:28px;margin-left:28px}
.my-28{margin-bottom:28px}
.mt-28,.my-28{margin-top:28px}
.mb-28{margin-bottom:28px}
.ml-28{margin-left:28px}
.mr-28{margin-right:28px}
.mr-30 {margin-right:30px}
.m-32{margin:32px}
.mx-32{margin-right:32px;margin-left:32px}
.my-32{margin-bottom:32px}
.mt-32,.my-32{margin-top:32px}
.mb-32{margin-bottom:32px}
.ml-32{margin-left:32px}
.mr-32{margin-right:32px}
.m-36{margin:36px}
.mx-36{margin-right:36px;margin-left:36px}
.my-36{margin-bottom:36px}
.mt-36,.my-36{margin-top:36px}
.mb-36{margin-bottom:36px}
.ml-36{margin-left:36px}
.mr-36{margin-right:36px}
.m-40{margin:40px}
.mx-40{margin-right:40px;margin-left:40px}
.my-40{margin-bottom:40px}
.mt-40,.my-40{margin-top:40px}
.mb-40{margin-bottom:40px}
.ml-40{margin-left:40px}
.mr-40{margin-right:40px}
.m-44{margin:44px}
.mx-44{margin-right:44px;margin-left:44px}
.my-44{margin-bottom:44px}
.mt-44,.my-44{margin-top:44px}
.mb-44{margin-bottom:44px}
.ml-44{margin-left:44px}
.mr-44{margin-right:44px}
.m-48{margin:48px}
.mx-48{margin-right:48px;margin-left:48px}
.my-48{margin-bottom:48px}
.mt-48,.my-48{margin-top:48px}
.mb-48{margin-bottom:48px}
.ml-48{margin-left:48px}
.ml-50{margin-left:50px}
.mr-48{margin-right:48px}
.m-52{margin:52px}
.mx-52{margin-right:52px;margin-left:52px}
.my-52{margin-bottom:52px}
.mt-52,.my-52{margin-top:52px}
.mb-52{margin-bottom:52px}
.ml-52{margin-left:52px}
.mr-52{margin-right:52px}
.m-56{margin:56px}
.mx-56{margin-right:56px;margin-left:56px}
.my-56{margin-bottom:56px}
.mt-56,.my-56{margin-top:56px}
.mb-56{margin-bottom:56px}
.ml-56{margin-left:56px}
.mr-56{margin-right:56px}
.m-60{margin:60px}
.mx-60{margin-right:60px;margin-left:60px}
.my-60{margin-bottom:60px}
.mt-60,.my-60{margin-top:60px}
.mb-60{margin-bottom:60px}
.ml-60{margin-left:60px}
.mr-60{margin-right:60px}
.m-auto, .m-a{margin-left:auto; margin-right: auto;}
.mr-5{margin-right: 5px;}
.mt-10{margin-top: 10px;}
.mr-30{margin-right: 30px;}
.mr-50{margin-right: 50px;}
.mt-15{margin-top: 15px;}
.mt-30{margin-top: 30px;}
.mb-5{margin-bottom: 5px;}
.mb-30{margin-bottom: 30px;}
.mb-50{margin-bottom: 50px;}
.mb-80{margin-bottom: 80px;}
.ml-10{margin-left: 10px;}
.p-10{padding: 10px;}
.p-0{padding: 0 !important;}
.py-30{padding-top:30px;padding-bottom:30px}
.px-80 {padding-left: 80px; padding-right: 80px}
/* ------------------ width ------------------ */
.w-10 { width: 10px !important; }
.w-20 { width: 20px !important; }
.w-30 { width: 30px !important; }
.w-32 { width: 32px !important; }
.w-40 { width: 40px !important; }
.w-50 { width: 50px !important; }
.w-60 { width: 60px !important; }
.w-70 { width: 70px !important; }
.w-80 { width: 80px !important; }
.w-84 { width: 84px !important; }
.w-90 { width: 90px !important; }
.w-100 { width: 100px !important; }
.w-110 { width: 110px !important; }
.w-120 { width: 120px !important; }
.w-130 { width: 130px !important; }
.w-140 { width: 140px !important; }
.w-150 { width: 150px !important; }
.w-160 { width: 160px !important; }
.w-170 { width: 170px !important; }
.w-180 { width: 180px !important; }
.w-190 { width: 190px !important; }
.w-200 { width: 200px !important; }
.w-210 { width: 210px !important; }
.w-220 { width: 220px !important; }
.w-230 { width: 230px !important; }
.w-240 { width: 240px !important; }
.w-250 { width: 250px !important; }
.w-260 { width: 260px !important; }
.w-270 { width: 270px !important; }
.w-280 { width: 280px !important; }
.w-290 { width: 290px !important; }
.w-310 { width: 310px !important; }
.w-320 { width: 320px !important; }
.w-300 { width: 300px !important; }
.w-390 { width: 390px !important; }
.w-400 { width: 400px !important; }
.w-416 { width: 416px !important; }
.w-420 { width: 420px !important; }
.w-436 { width: 436px !important; }
.w-full { width: 100% !important; }
.w-50\% { width: 50% !important;}

/* ------------------ min-width ------------------ */
.min-w-40 {min-width: 40px !important;}
.min-w-160   {min-width: 160px;}
/* ------------------ max-width ------------------ */
.max-w-100{max-width:100px;}
.max-w-200{max-width:200px;}
.max-w-300{max-width:300px;}
.max-w-400{max-width:400px;}
.max-w-500{max-width:500px;}
.max-w-560{max-width:560px;}
.max-w-600{max-width:600px;}
.max-w-700{max-width:700px;}
.max-w-800{max-width:800px;}
.max-w-900{max-width:900px;}
.max-w-1000{max-width:1000px;}


/* ------------------ height ------------------ */
.h-32 { height: 32px !important; }
.h-36 { height: 36px !important; }
.h-40 { height: 40px !important; }
.h-full { height: 100% !important; }

/* ------------------ font ------------------ */
.text-12{font-size:12px}
.text-13{font-size:13px}
.text-14{font-size:14px}
.text-16{font-size:16px}
.text-18{font-size:18px}
.text-20{font-size:16px}
.text-24{font-size:24px}
.text-28{font-size:28px}
.text-32{font-size:32px}
.text-36{font-size:36px}
.text-44{font-size:44px}
.font-bold{font-weight:700}
.font-400 { font-weight: 400;}
.font-500 { font-weight: 500;}
.font-600 {font-weight: 600;}
.font-700 {font-weight: 700;}
.font-900 {font-weight: 900;}
.float-left, .fl { float: left;}
.float-right, .fr {float: right;}

/* ------------------ text ------------------ */
.text-main{color: var(--lay-color-primary);}
.text-link{color: var(--lay-color-primary);}
.text-primary {color: var(--lay-color-text-primary);}
.text-regular {color: var(--lay-color-text-regular);}
.text-secondary {color: var(--lay-color-text-secondary);}
.text-success {color: var(--lay-color-success);}
.text-danger {color: var(--lay-color-danger);}
.text-warning {color: var(--lay-color-warning);}
.text-normal {color: var(--lay-color-normal);}
.text-disabled {color: var(--lay-color-text-disabled);}
.text-iconfont {color: var(--lay-color-gray-9);}
.text-white {color: white;}
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-nowrap {text-wrap: nowrap;}
/* ------------------ display ------------------ */
.hidden {display: none;}

.inline-block { display: inline-block;}
.flex-inline {display: inline-flex;}

/* ------------------ interactive  ------------------ */
.cursor-pointer {cursor: pointer;}

/* ------------------ border & background  ------------------ */
.bg-white {background-color: white;}
.bg-gray {background-color: #F8F8F8;}
.bg-page {background-color: var(--lay-color-bg-page);}

.border {border-width: 1px;}
.border-r {border-right-width: 1px;}
.border-l {border-left-width: 1px;}
.border-t {border-top-width: 1px;}
.border-b {border-bottom-width: 1px;}
.border-style-solid {border-style: solid;}
.border-r-style-solid {border-right-style: solid;}
.border-l-style-solid {border-left-style: solid;}
.border-t-style-solid {border-top-style: solid;}
.border-b-style-solid {border-bottom-style: solid;}
.border-color {border-color: var(--lay-color-border);}
.border-r-color {border-right-color: var(--lay-color-border);}
.border-l-color {border-left-color: var(--lay-color-border);}
.border-t-color {border-top-color: var(--lay-color-border);}
.border-b-color {border-bottom-color: var(--lay-color-border);}
.border-none {border-style: none;}
.border-t-none {border-top-style: none;}
.border-r-none {border-right-style: none;}
.border-b-none {border-bottom-style: none;}
.border-l-none {border-left-style: none;}
.line-height-normal {line-height: 1.5;}
.line-height-loose {line-height: 2;}
.line-height-none {line-height: 1;}
.line-height-30 {line-height: 30px;}
.line-height-32 {line-height: 32px;}
.line-height-36 {line-height: 36px;}
.line-height-40 {line-height: 40px;}
.vertical-top {vertical-align: top;}
.vertical-middle{vertical-align: middle;}
.border-rd4 {border-radius: 4px}
.border-rd6 {border-radius: 6px}
.border-rd8 {border-radius: 8px}
.relative { position: relative}
.absolute { position: absolute}
.white-space-normal { white-space: normal;}
.white-space-nowrap { white-space: nowrap;}

.btn-bg{
    width: 140px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    background-color: var(--lay-color-primary);
    color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: white;
}
.btn-bg:hover{
    color: #fff;
    background-color: var(--lay-color-primary-hover);
}
.cancel-btn-bg{
    width: 140px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #555;
    margin-left: 15px;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: transparent;
}
.cancel-btn-bg:hover{
    color: #555;
    background-color: #fafafa;
}
.tradeAccount{
    width: 360px;
}