/****************************************
*           Global style
/****************************************/

:root{
    --main-color: #E21D24;
    --border-color: #eae9e9;
    --secondary-color: #E21D24 ;
    --dark-color: #272e40;
    --base-font: "Roboto";
    --heading-font: "Roboto";
}

button{
    padding: 0;
}

img{
    max-width: 100%;
}
a {
    color: var(--dark-color);
}
a:hover{
    text-decoration: none;
     color: var(--main-color);
}
ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
p{
    line-height: 1.7;
}
body {
    font-family: var(--base-font);
    font-size: 14px;
    color: var(--dark-color);
    transition: all 0.3s ease-in-out;
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family: Roboto;
    font-weight: 500;
}

.container--mini{
  max-width: 960px;
}

.u-m-b-30{margin-bottom: 30px}
.u-m-b-20{margin-bottom: 20px}
.u-m-b-25{margin-bottom: 25px}
.u-m-b-30{margin-bottom: 30px}
.u-m-b-60{margin-bottom: 60px}

.u-m-t-5{margin-top: 5px}
.u-m-t-10{margin-top: 10px}
.u-m-t-20{margin-top: 20px}
.u-m-t-25{margin-top: 25px}
.u-m-t-30{margin-top: 30px}
.u-m-t-40{margin-top: 40px}
.u-m-t-50{margin-top: 50px}
.u-m-t-60{margin-top: 60px}

.u-m-l-10{
  margin-left: 10px;
}
.u-m-l-20{
  margin-left: 20px;
}
.u-m-l-25{
  margin-left: 25px;
}

.u-m-r-15{
  margin-right: 15px;
}
.u-p-t-20{padding-top: 20px}
.u-p-t-30{padding-top: 30px}
.u-p-t-60{padding-top: 60px}
.u-p-t-70{padding-top: 70px}
.u-p-t-80{padding-top: 80px}
.u-p-t-100{padding-top: 100px}
.u-p-t-90{padding-top: 90px}
.u-p-t-100{padding-top: 100px}
.u-p-t-110{padding-top: 110px}



.u-p-t-10{
  padding-top: 10px;
}

.u-p-b-30{padding-bottom: 30px}
.u-p-b-40{padding-bottom: 40px}
.u-p-b-50{padding-bottom: 50px}
.u-p-b-60{padding-bottom: 60px}


.u-relative{
  position: relative;
}
.u-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;
}

.u-flex--wrap {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

.u-flex--content-center {
    -webkit-box-pack: center;
       -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
}

.u-flex--content-between {
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
            justify-content: space-between;
}

.u-flex--content-start {
    -webkit-box-pack: start;
       -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
            justify-content: flex-start;
}

.u-flex--content-end {
    -webkit-box-pack: end;
       -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
            justify-content: flex-end;
}

.u-flex--item-center {
    -webkit-align-items: center;
            align-items: center; 
    -webkit-box-align: center;
       -moz-box-align: center;
    -ms-flex-align: center;
}

.clear::before,.clear::after,
section::before,section::after  {
    display: block;
    clear: both;
    content: "";
}
.img-block{
  width: 100%;
  display: block;
}




/*login screen*/
.page-wrap{
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
.login__page{
  background-color: #000000;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  padding: 0 15px;
}
.login__box{
  max-width: 380px;
  margin: 0 auto;
  background: #fff;
  padding: 40px 20px;
  position: relative;
  border-radius: 6px;
}
.box__title img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}
.box__title {
    position: absolute;
    color: #fff;
    left: 13px;
    top: 0;
    height: 34px;
    width: 147px;
    justify-content: center;
    align-items: center;
    display: flex;
    padding-right: 12px;
    border-radius: 8px 0 0;
    transform: translateY(-100%);
    text-transform: uppercase;
}
.form-input{
  position: relative;
}
.form-input label img {
    width: 20px;
}
.form-input label {
    position: absolute;
    margin: 0;
    top: 7px;
    left: 12px;
}
.form-input input::placeholder{
  color: #989899;
  font-style: italic;
}
.form-input input{
  border: 1px solid #303030;
  width: 100%;
  height: 44px;
  border-radius: 3px;
  padding-left: 45px;
  background: #f5f7f8;
}
.form-input input:focus{
  border: 1px solid #fd4b4b;
}
.form-submit button{
  background: #3897f0;
  color: #fff;
  border-radius: 3px;
  display: block;
  padding: 15px 12px;
  width: 100%;
  border: 0;
}


/*tab page*/
.tab__page{
    background-color: #000000;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  padding-bottom: 30px;
}
.tab-content-wrap{
  padding: 0 15px;
}
.tab-buttons ul{
  background: #fff;
  border-bottom: 0;
  display: flex;
}
.tab-buttons ul li{
  flex: 1;
  text-align: center;
}
.nav-tabs .nav-link {
    border: 0;
    padding: 12px 0;
    text-transform: uppercase;
    font-size: 13px;
}
.nav-tabs .nav-link.active{
  background: #fd4b4b;
  border-radius: 5px;
  color: #fff;
}
.nav-tabs li:first-child .nav-link.active{
  border-radius: 0 5px 5px 0;
}
.nav-tabs li:last-child .nav-link.active{
  border-radius: 5px 0 0 5px;
}

.profile-box{
  background: #fff;
  margin-top: 80px;
  border-radius: 5px;

}
.profile-box figure{
  width: 100px;
  display: block;
  margin: 0 auto;
  transform: translateY(-50%);
  margin-bottom: -40px;
}
.profile-box figure img{}
.profile-text{
  text-align: center;
}
.profile-text h4{
  font-weight: 300;
  color: #3b3b3b;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 1
}
.profile-text p{
  margin-bottom: 15px;
}
.profile-meta{
  background: #3ec1ff;
  border-radius: 0 0 5px 5px;
  padding: 5px 0;
}
.profile-meta div{
  flex: 1;
}
.profile-meta .left{
  border-right: 1px solid rgba(255,255,255,.35);
}
.profile-meta p{
  margin-bottom: 0;
  text-align: center;
  color: #fff;
  font-size: 26px;
  font-weight: 300;
}
.profile-meta p span{
  font-size: 15px;
}
.profile-meta .right{}

.tab-box{
  background: #fff;
  border-radius: 5px;
  position: relative;
}
.tab-box ul{
  padding: 0 7px;
}
.tab-box li{
  padding: 10px 12px;
  align-items: center;
  border-bottom: 1px solid #ddd;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}
.tab-box li a{
  width: 100%;
}
.tab-box li .left .ico{
  margin-right: 12px;
}
.tab-box li .left img{
  width: 21px;
}
.tab-box li .left h5{
  margin-bottom: 0;
  font-weight: 400;
  font-size: 16px;
}
.tab-box li .left{
  display: flex;
  align-items: center;
}
.tab-box li .right .arrow{}
.tab-box li .right .arrow img{
  width: 8px;
}
.tab-box li .right{
  display: flex;
  align-items: center;
}
.tab-box li .right .coin-d{
  background: #ddd;
  border-radius: 50px;
  padding: 3px 15px;
  display: flex;
  align-items: center;
  width: 92px;
}
.tab-box li .right .coin-d span{
  font-weight: 400;
  padding-left: 5px;
  font-size: 16px;
}
.tab-box li .right .coin-d img{
  width: 24px;
}

.btn-plus{
  margin-right: 10px;
}
.btn-plus img{
  width: 16px;
}
.notice{
  background: #fff;
  padding: 40px 20px 20px;
  position: relative;
  border-radius: 5px;
}
.notice p{
  margin-bottom: 0;
}
.notice__title {
    position: absolute;
    color: #fff;
    left: 18px;
    top: 20px;
    height: 34px;
    width: 126px;
    justify-content: center;
    align-items: center;
    display: flex;
    padding-right: 12px;
    border-radius: 8px 0 0;
    transform: translateY(-100%);
    text-transform: uppercase;
}
.notice__title img{}
.notice__title span {
    position: absolute;
    left: 38px;
}