.headerBox {
	display: flex;
	align-items: center;
    min-height: 160px;
}

.heaContainer {
    width: 100%;
    display: flex;
    padding: 0px 30px;
}

.hctNew1, .hctNew2, .hctNew3 {
    flex: 1;
	/* height: 124px; */
    min-height: 124px;
    margin: 0px 10px;
    padding: 20px;
	background-color: RGBA(24, 39, 68, 1);
	color: white;
  border-radius: 3px;
  cursor: pointer;
}

.heaContainer .hctLabel {
	height: 14px;
	min-height: 14px;
    position: relative;
    display: flex;
}

.heaContainer .hctValue {
	margin-top: 26px;
	min-height: 24px;
	line-height: 36px;
	position: relative;
}

.textRig {
	text-align: right;
    opacity: 0.8;
    line-height: 14px;
    font-size: 0.7vw;
    position: absolute;
    right: 0px;
}

.linkRig {
    flex: 1;
	text-align: right;
    opacity: 0.8;
    line-height: 14px;
    font-size: 0.7vw;
    line-height: 60px;
    float: right;
}

.linkRig a{
	font-size: 12px;
    font-family: HelveticaNeue-Bold;
    font-weight: bold;
    color: rgba(45,113,250,1);
	background:rgba(219, 220, 224, 0.6);
	border-radius:12px;
    padding: 5px 15px;
}

.linkRig a:hover{
    color: #fff;
    background: rgba(45,113,250,1);
    text-decoration: none;
}

#tableContainer {
    width: 100%;
    display: table;
    height: 600px;
    padding: 20px 20px;
    background-color: RGBA(242, 244, 249, 1);
}

#tableContainer .subContainerLeftImg {
    width: 4px;
    vertical-align: baseline;
    position: relative;
    top: -1px;
}

.home_tableBox {
    flex: 1;
    height: 100%;
    background-color: RGB(255, 255, 255);
    font-size: 14px;
    font-family: HelveticaNeue;
    font-weight: 400;
    color: rgba(67, 73, 80, 1);
    line-height: 25px;
    margin: 0px 10px;
    width: 40vw;
}

.subContainerTitle {
    height: 60px;
    line-height: 60px;
    margin: 0px 20px;
    border-bottom: 1px solid rgba(28, 17, 56, 0.1);
}

#tableRow1, #tableRow2, #tableRow3 {
    width: 100%;
    height: 600px;
    display: flex;
    margin-bottom: 10px;
    margin-top: 10px;
    justify-content: center;
}

#tableRow3 {
  height: 560px;
  justify-content: space-around;
  flex-direction: column;
  margin-top: 0;
}

.osm_card {
  flex: 1;
  height: 100%;
  margin: 0 10px;
  justify-content: space-between;
}

.card_bg {
  color: #fff;
  margin: 0 10px;
  height: 100%;
  padding: 30px 8px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.osm_card_icon {
  width: 1rem;
  border-bottom: 1px solid #fff;
}

.osm_card_text {
  font-size: 16px;
  font-weight: 600;
}

.osm_card_text_link {
  display: flex;
  align-items: center;
}

.osm_card_text_link a img {
  margin-left: 6px;
}

.osm_card_drop {
  padding-top: 20px;
  border: none;
  background: none;
}

.osm_card_drop_con {
  position: relative;
  width: 654px;
  background: #0D2042;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
}

.osm_card_drop_con::after {
  position: absolute;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #0D2042;
  content: " ";
  display: block;
  height: 0;
  top: -8px;
  left: 22px;
}

.osm_card2_drop_title {
  font-size: 16px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #3CCAF5;
  margin-bottom: 20px;
}

.osm_card2_drop_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.osm_card2_drop_list li {
  margin-right: 4px;
  margin-bottom: 4px;
  width: 152px;
  height: 40px;
  border-radius: 4px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  background: #192B4C;
  flex-wrap: wrap;
}

.osm_card2_drop_list li:hover {
  background: rgba(37, 117, 155, 0.5);
}

.osm_card2_drop_list li a {
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}

.osm_card2_drop_list li a:hover {
  text-decoration: none;
  background: none;
}

.osm_card2_drop_item img {
  margin-right: 4px;
}

.osm_card2_drop_list li:nth-child(4n) {
  margin-right: 0;
}

.osm_card_data {
  font-size: 26px;
}

.osm_card1 {
  margin-left: 0px;
  background: url(/img/card1.png) no-repeat 0px -70px;
  background-color: #0C73B3;
}
.osm_card2 {
  background: url(/img/card2.png) no-repeat 0px -70px;
  background-color: #3CCAF5;
}
.osm_card3 {
  background: url(/img/card3.png) no-repeat 0px -70px;
  background-color: #55BC59;
}
.osm_card4 {
  background: url(/img/card4.png) no-repeat 0px -70px;
  background-color: #F38055;
}
.osm_card5 {
  margin-right: 0;
  background: url(/img/card5.png) no-repeat 0px -70px;
  background-color: #8B35F3;
}
.osm_card6 {
  margin-right: 0;
  background: url(/img/card6.png) no-repeat 0px -70px;
  background-color: #B93446;
}

.layoutStyle {
  display: flex;
  width: 100%;
  justify-content: center;
}
/* .anim-1 {
	transform: translateX(100px) translateY(0);
	transition: transform .8s, opacity .8s
}
.anim-2 {
	transform: translateX(100px) translateY(0);
	transition: transform 1s, opacity 1s
}
.anim-show {
	transform: translateX(0) translateY(0);
	opacity: 1
} */

.two_sel {
  background-image: -moz-linear-gradient( 120deg, rgb(5,215,246) 0%, rgb(74,150,255) 100%);
  background-image: -webkit-linear-gradient( 120deg, rgb(5,215,246) 0%, rgb(74,150,255) 100%);
  background-image: -ms-linear-gradient( 120deg, rgb(5,215,246) 0%, rgb(74,150,255) 100%);
}

.home_subTable {
    width: 100%;
    height: 100%;
}

#EarningCurveGraph {
    width: 90%;
    height: 500px;
    margin: auto;
    padding: 0;
}

.capFont {
    font-size: 19px;
    font-family: HelveticaNeue-Bold;
    font-weight: bold;
    color: rgba(63, 69, 76, 1);
    line-height: 25px;
}

.btnContainer {
  float: right;
}

.btnChart {
  font-family: HelveticaNeue-Bold;
  font-size: 12px;
  color: rgba(45,113,250,1);
  background:rgba(219, 220, 224, 0.6);
  height: 26px;
  line-height: 26px;
  display: inline-block;
  text-align: center;
  border-radius: 13px;
  cursor: pointer;
  padding: 0px 20px;
  opacity: 0.8;
}

.btnChart:hover {
    color: #fff;
    background:rgba(45,113,250,1);
}

.btnChartSelected {
  font-family: HelveticaNeue;
  font-size: 12px;
  color: #fff;
  background:rgba(45,113,250,1);
  height: 26px;
  line-height: 26px;
  display: inline-block;
  text-align: center;
  border-radius: 13px;
  cursor: pointer;
  padding: 0px 20px;
  opacity: 0.8;
}

.contFont {
    font-size: 14px;
}

#tableRow2, #tableRow3 tr {
    width: 100%;
}

.headLabelIcon {
    width: 12px;
    height: 14px;
}

.hctNew1 .headLabelIcon {
    width: 18px;
    height: 10px;
    margin-top: 2px;
}

.headValueIcon {
    width: 10px;
    height: 7px;
    margin-right: 10px;
}

.headArrowIcon {
    width: 6px;
    height: 20px;
}

.validatorIcon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.osmTable_tr > .osmIdentity {
  font-size: 12px!important;
}

.validatorName {
    color: #65778D;
}

.validatorName:hover {
    color: #337ab7;
}

.headLabelFont {
    height: 14px;
    /* font-size: 18px; */
    font-size: 1vw;
    font-family: HelveticaNeue-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 15px;
    vertical-align: bottom;
    margin-left: 10px;
}

.headValueFont {
    height: 24px;
    /* font-size: 36px; */
    font-size: 2vw;
    font-family: HelveticaNeue-Light;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    vertical-align: bottom;
}

.headValueFontRight {
    height: 24px;
    /* font-size: 36px; */
    font-size: 2vw;
    font-family: HelveticaNeue-Light;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    vertical-align: bottom;
    float: right;
}

#Blocks>table {
    width: 100%;
}

#Blocks>table>tr :nth-child(even) {
    background-color: RGBA(245, 246, 250, 1);
}

.trHashText {
    font-size: 14px;
    font-family: HelveticaNeue-Medium;
    font-weight: 500;
    color: rgba(18, 203, 170, 1);
    line-height: 13px;
}

.fromToText {
    font-size: 12px;
    font-family: HelveticaNeue-Bold;
    font-weight: bold;
    color: rgba(10, 103, 231, 1);
    line-height: 13px;
}

.txtRgt {
    text-align: right;
}

.validatorTable {
    height: calc(100% - 80px);
    text-align: center;
    padding: 0px 20px;
}

.validatorTable_head {
    width: 100%;
    height: 50px;
    display: flex;
    line-height: 50px;
    font-weight: bold;
}

.validatorTable_head>div:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.validatorTable_body {
    width: 100%;
    height: calc(100% - 80px);
}

.validatorTable_tr {
    height: 45px;
    display: flex;
    line-height: 45px;
    color: rgba(101, 119, 141, 1);
}

.validatorTable_tr:nth-child(odd) {
    background-color: rgba(242, 243, 248, 0.76);
}

.validatorTable_tr:nth-of-type(1) div:first-child {
    font-family: HelveticaNeue-Bold;
    font-weight: bold;
    font-size: 18px;
    color: rgba(255, 108, 10, 1);
}

.validatorTable_tr:nth-of-type(2) div:first-child {
    font-size: 18px;
    font-family: HelveticaNeue-Bold;
    font-weight: bold;
    color: rgba(238, 179, 1, 1);
}

.validatorTable_tr:nth-of-type(3) div:first-child {
    font-size: 18px;
    font-family: HelveticaNeue-Bold;
    font-weight: bold;
    color: rgba(16, 157, 255, 1);
}

.validatorTable_head>div,
.validatorTable_tr>div {
    display: inline-block;
}

.validatorTable_head>div:nth-of-type(1),
.validatorTable_head>div:nth-of-type(4),
.validatorTable_tr>div:nth-of-type(1),
.validatorTable_tr>div:nth-of-type(4) {
    flex: 1;
}

.osmTable_head>div:nth-of-type(4),
.osmTable_tr>div:nth-of-type(4) {
    flex: 2;
}

.osmTable_head>div:nth-of-type(3),
.osmTable_tr>div:nth-of-type(3) {
    flex: 2;
}


.validatorTable_head>div:nth-of-type(3),
.validatorTable_tr>div:nth-of-type(3) {
    flex: 2;
}

.validatorTable_head>div:nth-of-type(2) {
    flex: 4;
    text-align: left;
}

.validatorTable_tr>div:nth-of-type(2) {
    flex: 4;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#LatestTrans {
    margin: 0px 10px;
}

.latestTransTable {
    height: calc(100% - 80px);
    text-align: left;
    padding: 10px 20px;
}

.latestTransTable_head {
    height: 50px;
    display: flex;
    line-height: 50px;
    font-weight: bold;
    background: rgba(245, 246, 250, 1);
    padding: 0px 10px;
}

.latestTransTable_head>div:first-child {
    /* width: 150px; */
    flex: 1;
    font-size: 16px;
    font-family: HelveticaNeue-Bold;
    font-weight: bold;
    color: rgba(101, 119, 141, 1);
}

.latestTransTable_head>div:last-child {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 30vw;
    margin-left: 20px;
}

.latestTransTable_head>div:last-child a {
    font-size: 14px;
    font-family: HelveticaNeue-Medium;
    font-weight: 500;
    color: rgba(18, 203, 170, 1);
}

.latestTransTable_body {
    height: calc(100% - 80px);
    display: flex;
    padding: 10px 10px 20px 10px;
}

.latestTransTable_body .from p,
.latestTransTable_body .to p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.latestTransTable_body .from p:nth-of-type(1) span,
.latestTransTable_body .to p:nth-of-type(1) span {
    font-size: 14px;
    font-family: HelveticaNeue-Bold;
    font-weight: bold;
    color: rgba(101, 119, 141, 1);
}

.latestTransTable_body .from p:nth-of-type(2) span a,
.latestTransTable_body .to p:nth-of-type(2) span a {
    font-size: 12px;
    font-family: HelveticaNeue-Medium;
    font-weight: 500;
    color: rgba(10, 103, 231, 0.6);
}

.latestTransTable_body .from p:nth-of-type(3) span {
    font-size: 14px;
    font-family: HelveticaNeue-Bold;
    color: rgba(63, 69, 76, 1);
}

.latestTransTable_body .to p:nth-of-type(3) {
    text-align: right;
}

.latestTransTable_body .to p:nth-of-type(3) span {
    font-size: 12px;
    font-family: HelveticaNeue-Medium;
    font-weight: 500;
    color: rgba(205, 210, 222, 1);
}

.latestTransTable_body .valueFont {
    font-family: HelveticaNeue!important;
    font-size: 12px!important;
}

.latestTransTable_body .from,
.latestTransTable_body .to {
    /* flex: 1; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.latestTransTable_body .to {
    text-align: right;
}

.latestTransTable_body>div:nth-of-type(2) {
    /* width: 100px; */
    flex: 1;
}

.toIcon {
    display: flex;
    align-content: space-around;
    flex-flow: row wrap;
    justify-content: space-around;
}

.toIcon img {
    width: 32px;
    height: 32px;
}

#Blocks {
    margin: 0px 10px;
}

.blockTable{
    height: calc(100% - 80px);
    text-align: left;
    padding: 10px 20px;
}

.blockTable_item:nth-child(even) {
    background: rgba(242, 243, 248, 0.76);
}

.blockTable_item {
    display: flex;
    padding: 15px 12px;
}

.blockTable_item .left {
    flex: 2;
}

.blockTable_item .right {
    text-align: right;
    flex: 1;
}

.blockTable_item .left>div,
.blockTable_item .right>div {
    display: flex;
    overflow: hidden;
}

.blockTable_item .left p,
.blockTable_item .right p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28vw;
}

.blockTable_item .left>div p:last-child,
.blockTable_item .right>div p:last-child {
    line-height: 40px;
}

.blockTable_item .left>div p:first-child,
.blockTable_item .right>div p:first-child {
    flex: 1;
    line-height: 40px;
}

.blockTable_item .right > div > p:first-child span:first-child {
    color: #434950;
    font-size: 16px;
    line-height: 25px;
}

.blockTable_item .right > div > p:first-child span:last-child {
    color: #2D71FA;
    font-size: 16px;
    line-height: 25px;
}

.blockTable_item .left > p span:first-child,
.blockTable_item .right > p span:first-child {
    color: #434950;
    font-size: 14px;
    line-height: 25px;
}

.blockTable_item .left > p span:last-child,
.blockTable_item .right > p span:last-child {
    color: #65778D;
    font-size: 14px;
    line-height: 25px;
}

.blkBlueFont {
    font-size: 16px;
    font-family: HelveticaNeue-Medium;
    color: #434950;
    line-height: 25px;
}
.blkBlueFont + a {
    color: rgba(45, 113, 250, 1);
    font-size: 16px;
    line-height: 25px;
}
.fromNow {
    font-size:14px;
    font-family:HelveticaNeue;
    font-weight:400;
    color:rgba(205,210,222,1);
    line-height:25px;
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
    .headLabelFont {
        font-size: 14px;    
    }
}

@media screen and (max-width: 1024px) {
    .heaContainer {
        padding: 0px;
    }

    .mobileCard {
      height: 740px!important;
    }

    .osm_card {
      margin-bottom: 10px;
    }

    .osm_card1 {
      margin-left: 10px;
    }

    .osm_card5 {
      margin-right: 10px;
    }

    .osm_card6 {
      margin-right: 10px;
    }

    #tableRow1, #tableRow2, #tableRow3 {
        height: auto;
        flex-direction: column;
    }

    .layoutStyle {
      display: flex;
      width: 100%;
      justify-content: center;
      flex-direction: column;
    }

    .home_tableBox {
        width: auto;
        overflow-x: auto;
    }

    .subContainerTitle{
        min-width: 960px;
    }

    .home_subTable, #EarningCurveGraph {
        min-width: 1000px;
    }

    #tableRow1>div:nth-of-type(2), #tableRow2>div:nth-of-type(2), #tableRow3>div:nth-of-type(2) {
        margin-top: 20px;
    }

    #tableContainer {
        padding: 0px;
        margin-top: 20px
    }

    #tableRow1, #tableRow2, #tableRow3 {
        width: 96vw;
        margin: 10px auto;
    }

    .blockTable_item .left p, .blockTable_item .right p {
        max-width: none;
    }
    
    .latestTransTable_head>div:last-child {
        max-width: none;
    }
    
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .heaContainer {
        flex-flow: row wrap;
        padding: 0px;
    }
    
    .heaContainer>div:nth-of-type(1) {
        margin: 20px 1vw 2vw 3vw;
    }

    .heaContainer>div:nth-of-type(2) {
        margin: 20px 3vw 2vw 1vw;
    }

    .heaContainer>div:nth-of-type(3) {
        margin: 0px 1vw 20px 3vw;
    }

    .heaContainer>div:nth-of-type(4) {
        margin: 0px 3vw 20px 1vw;
    }

    .hctNew1, .hctNew2, .hctNew3 {
        min-width: 40vw;
    }

    .headLabelFont {
        font-size: 2vw;
    }
}

@media screen and (max-width: 767px) {
    .heaContainer {
        flex-flow: column wrap;
        padding: 10px 20px;
    }

    .hctNew1, .hctNew2, .hctNew3 {
        margin: 0px;
    }

    .heaContainer>div {
        margin: 10px 0px;
    }

    .headLabelFont {
        font-size: 6vw;
    }

    .textRig {
        font-size: 3vw;
    }

    .headValueFont {
        font-size: 4vw;
    }

    .headValueFontRight {
        font-size: 3vw;
    }
}