* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3 {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #f2f2f2;
  display: block;
}

body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  top: 0;
  left: 0;
  padding: 0;
  background: #fff url(../img/background.jpg)center no-repeat;
  background-size: 100% 100%;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

html,
body {
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 5px;
  background-color: #F3F3F3;
  height: 5px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #5B54FF ;
  width: 5px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: #F3F3F3;
}


.header {
  width: 100%;
  height: auto;
}
.header_container{
  width: 100%;
  padding-left: 50px;
  padding-right: 50px;
}
.header_items {
  display: flex;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 50px;
}
.header_item {
  margin-left: auto;
}
.header_item:first-child{
  margin-left: 0px;
}
.header_item_navs {
  width: auto;
  height: auto;
  border-radius: 15.361px;
border: 0.768px solid #FFF;
background: rgba(255, 255, 255, 0.60);
}
.header_item_navs_items {
  display: flex;
  align-items: center;
  padding: 16px 43px;
  list-style: none;
}
.header_item_navs_item {
  margin-right: 35px;
}
.header_item_navs_item:last-child{
  margin-right: 0px;
}
.header_item_navs_item a{
  color: #8987A1;
  font-family: "Inter", sans-serif;
  font-size: 12.289px;
  font-style: normal;
  font-weight: 400;
  cursor: pointer;
  transition: all .5s;
  line-height: 150%; /* 18.433px */
}

.header_item_navs_item_active a{
  color: #252432;
font-weight: 700;
}

.header_item_navs_item a:hover{
  opacity: .5;
}

.header_item_logo {
  display: flex;
  align-items: center;
  color: #000;
font-family: "Inter", sans-serif;
font-size: 21px;
font-style: normal;
font-weight: 700;
line-height: normal;
cursor: pointer;
transition: all .5s;
}
.header_item_logo img{
  vertical-align: middle;
  margin-right: 9.34px;
}
.header_item_logo:hover{
  opacity: .5;
}
.header_item_button {
outline: none;
border: none;
cursor: pointer;
transition: all .5s;
color: #FFF;
font-family: "Inter", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
padding: 16px 23px;
border-radius: 50px;
background: #5B54FF;
}

.header_item_button:hover{
  opacity: .5;
}








.main {
}
.main_rect_sections{
  width: auto;
  height: auto;
  display: flex;
  align-items: flex-start;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.main_rect {
  width: 393px;
  height: auto;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: linear-gradient(122deg, #FFF 0%, #F6F9FF 96.81%), #FFF;
}
.main_rect_content {
  padding: 30px;
}
.main_rect_tittle {
  color: #000;
font-family: "Inter", sans-serif;
font-size: 21px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.main_rect_items {
  display: grid;
  grid-template-columns: calc(50% - 25px) 50%;
  grid-column-gap: 25px;
  align-items: center;
  margin-top: 30px;
  position: relative;
}
.main_rect_item_left {
  width: 154px;
  height: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #FFF;
}
.main_rect_item_center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
border-radius: 100%;
position: absolute;
left: calc(50% - 25px);
    top: 30px;
z-index: 1;
}
.main_rect_item_right {
  width: 154px;
  height: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #FFF;
margin-left: auto;
}
.main_rect_item_left_content,
.main_rect_item_right_content {
  padding: 20px;
}
.main_rect_item_left_tittle,
.main_rect_item_right_tittle {
  color: #000;
font-family: "Inter", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.main_rect_item_left_coin,
.main_rect_item_right_coin{
  display: flex;
  align-items: flex-start;
  margin-top: 16px;
  cursor: pointer;
}
.main_rect_item_left_coin_icon,
.main_rect_item_right_coin_icon {
  width: 32px;
height: 32px;
border-radius: 100px;
object-fit: cover;
}

.main_rect_item_left_coin_texts,
.main_rect_item_right_coin_texts {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}
.main_rect_item_left_coin_teg,
.main_rect_item_right_coin_teg {
  color: #000;
font-family: "Inter", sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.main_rect_item_left_coin_tittle,
.main_rect_item_right_coin_tittle {
 margin-top: 3px;
 color: #858585;
font-family: "Inter", sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
}


.main_rect_send_rects {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
}
.main_rect_send_rect {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #FFF;
margin-bottom: 25px;
}
.main_rect_send_rect:last-child{
  margin-bottom: 0px;
}
.main_rect_send_rect_content {
  padding: 20px;
}
.main_rect_send_rect_tittle {
  color: #000;
font-family: "Inter", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.main_rect_send_rect_items {
  display: flex;
  align-items: center;
  margin-top: 16px;
}
.main_rect_send_rect_item_icon {
  width: 32px;
height: 32px;
border-radius: 100%;
object-fit: cover;
margin-right: 10px;
}
.main_rect_send_rect_item_input {
  outline: none;
  color: #000;
font-family: "Inter", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
background: transparent;
width: 100%;
border: none;
}
.main_rect_send_rect_item_input::placeholder{
  color: #858585;
}
.main_rect_send_rect_button {
margin-top: 25px;
outline: none;
border: none;
cursor: pointer;
transition: all .5s;
color: #FFF;
font-family: "Inter", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
padding-top: 16px;
padding-bottom: 16px;
width: 100%;
border-radius: 50px;
background: #5B54FF;
}

.main_rect_send_rect_button:hover{
  opacity: .5;
}





.main_rect_right {
  width: 393px;
  height: auto;
  border-radius: 20px;
  background: #FCFDFF;
margin-left: 30px;
display: none;
}
.main_rect_right_content {
  padding: 30px;
}
.main_rect_right_blocks {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}
.main_rect_right_block {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #FFF;
cursor: pointer;
transition: all .5s;
}
.main_rect_right_block:hover{
  opacity: .5;
}
.main_rect_right_block_active{
  border: 1px solid #5B54FF;
  background: rgba(91, 84, 255, 0.05);
}
.main_rect_right_block_active .main_rect_right_block_tittle{
  background: #5B54FF;
border: 1px solid #5B54FF;
color: #fff;
}
.main_rect_right_block_active:hover{
  opacity: 1;
}
.main_rect_right_block_content {
  padding: 20px;
  display: flex;
  align-items: center;
}
.main_rect_right_block_tittle {
  color: #000;
font-family: "Inter", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
padding: 5px 10px;
border-radius: 500px;
border: 1px solid rgba(0, 0, 0, 0.15);
background: #FFF;
}
.main_rect_right_block_fee {
  margin-left: 15px;
  display: flex;
  align-items: center;
  color: #000;
font-family: "Inter", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.main_rect_right_block_fee img{
  vertical-align: middle;
  margin-right: 7px;
}
.main_rect_right_block_time {
  color: #000;
font-family: "Inter", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
display: flex;
align-items: center;
margin-left: 9px;
}

.main_rect_right_block_time img{
  vertical-align: middle;
  margin-right: 4px;
}

















.select_chain_rect {
  width: 393px;
  height: auto;
  border-radius: 20px;
  background: #FFF;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.select_chain_rect_content {
  padding: 30px;
  padding-top: 32px;
}
.select_chain_rect_up {

  position: relative;
}
.select_chain_rect_up_back {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 2;
  cursor: pointer;
  transition: all .5s;
}
.select_chain_rect_up_back:hover{
  opacity: .5;
}
.select_chain_rect_up_tittle {
  color: #000;
text-align: center;
font-family: "Inter", sans-serif;
font-size: 21px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.select_chain_rect_coins {
  display: grid;
  grid-template-columns: calc(25% - 9px) calc(25% - 9px) calc(25% - 9px) 25%;
  grid-row-gap: 10px;
  grid-column-gap: 9px;
  margin-top: 30px;
}
.select_chain_rect_coin {
  width: 100%;
  height: 56px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.05);
cursor: pointer;
transition: all .5s;
}
.select_chain_rect_coin:hover{
  border: 1px solid #000;
  background: rgba(0, 0, 0, 0.05);
}
.select_chain_rect_coin_content {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.select_chain_rect_coin_icon {
  width: 32px;
height: 32px;
object-fit: cover;
border-radius: 100%;
}









.select_token_rect {
  width: 393px;
  height: auto;
  border-radius: 20px;
  background: #FFF;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.select_token_rect_content {
  padding: 30px;
  padding-top: 32px;
}
.select_token_rect_up {
  position: relative;
}
.select_token_rect_back {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 2;
  cursor: pointer;
  transition: all .5s;
}
.select_token_rect_back:hover{
  opacity: .5;
}
.select_token_rect_tittle {
  color: #000;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 21px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.select_token_rect_search {
  width: 100%;
  height: auto;
  margin-top: 30px;
  padding: 11px;
  outline: none;
  border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.05);
background: rgba(0, 0, 0, 0.05) url(../img/select_token_search.svg)left no-repeat;
color: #000;
font-family: "Inter", sans-serif;
font-size: 16px;
padding-left: 50px;
font-style: normal;
font-weight: 500;
line-height: normal;
background-position-x: 11px;

}
.select_token_rect_search::placeholder{
  color: rgba(96, 96, 96, 0.27);

}
.select_token_rect_coins {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  height: 380px;
  overflow-y: auto;
}
.select_token_rect_coin {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all .5s;
}
.select_token_rect_coin:hover{
  opacity: .5;
}
.select_token_rect_coin:last-child{
  margin-bottom: 0px;
}
.select_token_rect_coin_icon {
  display: flex;
  align-items: center;
  width: 32px;
height: 32px;
object-fit: cover;
border-radius: 100%;
}
.select_token_rect_coin_avatar{
  width: 32px;
height: 32px;
object-fit: cover;
border-radius: 100%;
color: rgb(250, 245, 255);
background-color: rgb(201, 200, 204);
}
.select_token_rect_coin_avatar p{
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: rgb(250, 245, 255);
}
.select_token_rect_coin_texts {
  margin-left: 8px;
}
.select_token_rect_coin_teg {
  color: #000;
font-family: "Inter", sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.select_token_rect_coin_chain {
  margin-top: 3px;
  color: #858585;
font-family: "Inter", sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
}








.select_token_rect_coins {
  display: none; /* Скрываем все элементы по умолчанию */
}


@media (max-height:813px){
  .main_rect_sections{
    position: static;
    justify-content: center;
    padding-bottom: 50px;
  }
}

@media (max-height:600px){
  .select_chain_rect{
    position: static;
    display: block;
    margin: 0 auto;
    padding-bottom: 50px;
  }
}

@media (max-height:800px){
  .select_token_rect{
    position: static;
    display: block;
    margin: 0 auto;
    padding-bottom: 50px;
  }
}

@media (min-width:320px) and (max-width:380px){
  .main_rect{
    width: 300px;
  }
  .header_item:nth-child(2){
    display: none;
  }
  .main_rect_content{
    padding: 15px;
  }
  .main_rect_item_left_content, .main_rect_item_right_content{
    padding: 10px;
  }
  .main_rect_item_right,
  .main_rect_item_left{
    width: 100%;
  }
  .main_rect_items {
    grid-template-columns: calc(50% - 12.5px) calc(50% - 12.5px);
}
.main_rect_item_center{
  top: 20px;
}
.select_chain_rect{
  width: 300px;
}
.select_token_rect{
  width: 300px;
}
.header_container{
  padding-left: 20px;
  padding-right: 20px;
}
.header_item_button{
  font-size: 14px;
  padding: 10px 24px;
  white-space: nowrap;
}
.header_item_logo img{
  height: 20px;
}
.header_item_logo{
  font-size: 16px;
}

.main_rect_sections{
  flex-direction: column;
  align-items: center;
}
.main_rect_right{
  width: 300px;
  margin-top: 30px;
  margin-left: 0px;
}
.main_rect_right_content {
  padding: 15px;
}
.main_rect_right_block_content{
  padding: 10px;
}
.main_rect_right_block_tittle{
  font-size: 12px;
}
body{
  background-size: auto 100%;
}
}




@media (min-width:381px) and (max-width:450px){
  .main_rect{
    width: 360px;
  }

  .header_item:nth-child(2){
    display: none;
  }
  .main_rect_item_right,
  .main_rect_item_left{
    width: 100%;
  }
  .main_rect_items {
    grid-template-columns: calc(50% - 12.5px) calc(50% - 12.5px);
}
.main_rect_item_center{
  left: calc(50% - 18px);
  top: 30px;
}
.select_chain_rect{
  width: 360px;
}
.select_token_rect{
  width: 360px;
}
.header_container{
  padding-left: 20px;
  padding-right: 20px;
}


.main_rect_sections{
  flex-direction: column;
  align-items: center;
}
.main_rect_right{
  width: 360px;
  margin-top: 30px;
  margin-left: 0px;
}

body{
  background-size: auto 100%;
}
}




@media (min-width:451px) and (max-width:850px){
 
  .header_item:nth-child(2){
    display: none;
  }
.main_rect_sections{
  flex-direction: column;
  align-items: center;
}
.main_rect_right{
  margin-top: 30px;
  margin-left: 0px;
}
body{
  background-size: 100% 100%;
}
}


@media (min-width:1921px){
  body{
    background-size: 100% 100%;
  }
}