@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body{
    background-color: #ffffff;
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    font-family: 'Poppins', sans-serif!important;
    background: url(bodybg.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
  margin-left: 10px !important;
}

a.navbar-brand {
  background: url(/FINANCE.png);
  background-size: contain;
  background-position: center;
  width: 170px;
  margin-top: 15px;
  margin-bottom: 5px;
}

.policy_agreement1{
  color: #ff3131;
}

h5{
  font-size: 2em !important;
}

.terms_policy span,.terms_policy a{
  color: #A7A7A7 !important;
  font-weight: 400;
  font-size: 1em;
  padding-left: 15px;
}

input, .popup input{
  border: 1px solid grey;
  color: #000;
}

.foto_string{
  display: flex;
  align-items: center;
  border-bottom: 1px solid grey;
  padding: 10px;
}
.foto_string a{
  width: 100%;    
}
.foto_string i{
  color: #E53E3E !important;
}

input#searchInput {
  max-width: 250px;
  width: 100%;
}

/* 
.window_info table {
  width: 100%;
  border-collapse: collapse;
}

.window_info th,
.window_info td {
  padding: 10px;
}
 */

.actions_table_btn{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

 .chng{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
 }


.main_wrap{
    max-width: 1440px !important;
    margin: 15px auto;
    padding: 10px;
}

.v_center{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.mob_padd input{
  color: #000;
}

.col-md-2.mob_padd{
  padding: 0;
}

.navbar-brand>img{
  width: 120px;
}

.navbar .nav>li>a{
  margin: 5px auto;
  border-radius: 10px;
  color: #fff;
  transition: 0.5s;
}


.navbar .nav>li>a:focus,.navbar .nav>li>a:hover,.navbar a.nav-link.active {
  background-color: rgba(123,88,206, 0.2);
  color: #ff3131!important;
}



.navbar-nav.ms-auto {
    display: flex;
}

.block_center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 70px);
  height: auto;
}

span.invalid-feedback{
  color: crimson;
}

input[type="file"] {
  display: none !important;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

.forgot_pass{
  flex-direction: column;
}

.login_first_form{
    background: #fff;
    margin:0 auto;
    padding: 35px;
    border-radius: 15px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
}

.reg_first_form{
    background: #fff;
    width: 100%;
    max-width: 620px;
    margin:0 auto;
    padding: 25px;
    border-radius: 15px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
}


.dec_first_form{
 padding: 0;
}


input[type='radio']:checked:after {
  background-color: #ffa500 !important;
}

.dec_first_form label, .dec_first_form input{
  font-weight: 400;
}

.dec_first_form input{
  box-sizing: border-box;
  padding: 15px;
  border-radius: 15px;
  background: #fff;
}

.dec_column{
  display: flex;
    align-items: flex-end;
}

.login_first_form .card{
    width: 100%;
}

.login_first_form #email,.login_first_form #password{
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 10px;
    background: #fff;
    margin: 10px auto;
}

.reg_first_form #name,.reg_first_form #last_name,.reg_first_form #phone_number,.reg_first_form #email,.reg_first_form #password,.reg_first_form #password-confirm{
    width: 100%;
}


.reg_first_form input{
    box-sizing: border-box;
    padding: 15px;
    border-radius: 15px;
    background: #fff;
    margin: 10px auto;
}

.item{
  display: block;
  position: relative;
}


/* 
.item input{
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 24px;
  background: none;
  padding-left: 20px;
} */

.item:after{
  content: attr(data-title);
  position: absolute;
  top: -100px;
  left: 40px;
  width: 300px;
  background: #9747FF;
  border-radius: 15px;
  padding: 15px 20px;
  opacity: 0;
  transform: translateY(-20px);
  transition:0.34s linear;
  color: #fff;
  box-shadow:0 5px 12px #ccc;
  pointer-events: none;
}

.item:hover:after{
  opacity: 1;
  transform: translateY(0);  
}

/* 
.num_block{
  display: grid;
    margin-top: 10px;
} */

.iti--separate-dial-code .iti__selected-flag {
  border-radius: 14px 0 0 13px;
}

.login_form_span_grey{
    color: #898989;
}

.login_form_2colums{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.login_form_2colums a,.v_center a{
    color: black;
    text-decoration: underline;
}

.label_black {
        color: #000 !important;
    }

.btn {
    border: 1px solid black;
    padding: 12px 40px !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition-duration: 0.4s;
    border-radius: 10px;
    margin: 10px auto;
    width: 100%;
}
  
.fix_btn{
  max-width: 140px;
}
 .login_form_button .btn{
    margin: 10px auto;
    width: 100%;
    border: none;
}

.btn:hover {
    background-color: #ff3131bd; 
    color: white;
}

.white_btn{
    background-color: white;
    color: black;
}

.grey_btn{
    background-color: #ff3131;
    color: white;
}

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4%;
    margin-top: 40px;
}

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

.logo_img{
    max-width: 65px;
    /* filter: grayscale(1); */
    padding: 5px;
    width: 35px;
    height: 35px;
}

.main_menu_login{
    margin: 0 5px;
    padding: 0 10px;
    color: black;
    text-decoration: underline;
}

.guest_block {
    position: fixed;
    height: 60vh;
    background: url(/bg_image.svg);
    background-size: cover;
    width: 96%;
    border-radius: 10px;
    top: 0;
    z-index: -1;
    margin: 35px auto;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
}

.login_page{
    display: flex;
    align-items: center;
    flex-direction: column;
    min-height: calc(100vh - 70px);
    text-align: center;
    justify-content: center;
}

.main_screen{
    width: 100%;
    color: whitesmoke;
}

.main_screen p{
  max-width:420px;
  margin:0 auto;
  padding: 20px;
}

.log_first_block {
  display: flex;
  justify-content: space-between;
  width: 50%;
}

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

.remember_me_block p {
    margin: 10px;
}

.switch {
    position: relative;
    display: inline-block;
  }
  .switch-input {
    display: none;
  }
  .switch-label {
    display: block;
    width: 32px;
    height: 16px;
    /* text-indent: -150%; */
    clip: rect(0 0 0 0);
    color: transparent;
    user-select: none;
  }
  .switch-label::before,
  .switch-label::after {
    content: "";
    display: block;
    position: absolute;
    cursor: pointer;
  }
  .switch-label::before {
    width: 100%;
    height: 100%;
    background-color: #dedede;
    border-radius: 9999em;
    -webkit-transition: background-color 0.25s ease;
    transition: background-color 0.25s ease;
  }
  .switch-label::after {
    top: 3px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
    -webkit-transition: left 0.25s ease;
    transition: left 0.25s ease;
  }
  .switch-input:checked + .switch-label::before {
    background-color: #636363;
  }
  .switch-input:checked + .switch-label::after {
    left: 13px;
  }



.window_info{
    /* background-color:#fff; */
    color: #fff;
    margin: 10px auto;
    border-radius: 10px;
    padding: 20px;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
}
.window_headlines{
    padding-left: 15px;
}

#copySuccessMessage {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 999;
}
.wallet_copy_deposit{
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.verifi_status {
  border-radius: 5px;
  padding: 10px;
  height: 100%;
  font-size: 1em;
  font-weight: 400;
}
.header_betwen{
  display: flex;
    justify-content: space-between;
    align-items: center;
}

.green-text{
  background: #2FBD6A33;
  color: #2FBD6A; 
 }

.yellow-text{
background: #F1AE0133;
color: #F1AE01; 
}

.red-text{
 background: #E53E3E33;
 color: #E53E3E; 
}

.green-text-status{
  color: #2FBD6A; 
 }

.yellow-text-status{
color: #F1AE01; 
}

.blue-text-status{
  color: #2142c4; 
}

.yellow-text-status::after{
  display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f110";
    margin-left: 5px;
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}

.red-text-status{
 color: #E53E3E; 
}

.balance_usd_user{
    display: flex;
    justify-content: space-between;
}

.balance_btc_user{
   position: relative;
    width: 100%;
    max-width: 500px; /* Максимальная ширина для десктопа */
    aspect-ratio: 1.587 / 1; /* Соотношение сторон банковской карты */
    border-radius: 16px;
    padding: 20px;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 auto;
    overflow: hidden;
}

.violet_card{
  background: url(/3.svg);
  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.black_card{
  min-height: 12rem;
  background: url(/5.svg);
  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card_number_block{
  width: 100%;
}

.balance_btc_user_balance{
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.total_balance_p{
  font-size: 1.5em;
  margin-bottom: 50px;
  text-align: right;
}

.total_balance_p span{
  font-size: 1.5em;
  font-weight: 600;
}


.nav-tabs {
  border-bottom: none!important;
  display: flex;
  justify-content: space-between;
}

.nav-tabs>li>a{
/* background-color:#fff; */
border: none !important;
color: #fff !important;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
  background-color: transparent!important;
  border: none !important;
  color: #ff3131 !important;
}

.tab-content form, .transction_cr form{
  display: flex;
  flex-direction: column;
}

.tab-content form label,.tab-content form button,.transction_cr form label,.transction_cr form button{
  /* margin-top: 10px; */
  font-weight: 200;
}
.tab-content,.transction_cr{
  font-weight: 200;
}

form input, form select , .popup input{
  border-radius: 10px;
  padding: 10px;
  color: #000;
}

.test{
  margin: 0 auto;
}

/* 
  ************************************* */

  table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
  }
   
  thead th:nth-child(1) {
    width: 10%;
  }

 button {
  background: none;
  outline: none;
  border: none;
}

i,.violet{
  color: #ff3131;
}

i.fa-solid.fa-shield {
  color: inherit;
}
.popup_open {
  display: none;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
}

.popup {
  display: none;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.popup h4, .popup label{
  font-weight: 400;
}

.popup input{
  width: 100%;
}
  /* 
  .table_limit{
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

   */


  thead th:nth-child(1) {
    width: 7%;
  }
/*  
  thead th:nth-child(2) {
    width: 22%;
  }
  
  thead th:nth-child(3) {
    width: 20%;
  }
  
  thead th:nth-child(4) {
    width: 30%;
  }
  
  thead th:nth-child(5) {
    width: 10%;
  }

  thead th:nth-child(6) {
    width: 10%;
  }

  thead th:last-child {
    width: 4%;
  } */

  th, td {
    padding: 10px 20px!important;
    text-align: left; 
    overflow: hidden;
    white-space: nowrap !important;
  }

  tbody tr{
    border-bottom: 1px solid #f4f4f4; 
  }

  td a {
    color: #ff3131;
  }

  
  .user_edit_form1 label{
  margin: 5px 10px 5px 0;
  color: #898989;
  font-weight: 300;

}

  .user_edit_form1 input, .user_edit_form1 select, .user_edit_form label{
    box-sizing: border-box;
    margin: 5px auto !important;
    border: none;
    padding: 4px 6px;
  }

  .user_edit_form1 input:focus-visible{
    border-bottom: 1px dotted red;
    outline: none;
    margin-left: 10px!important;
    margin-right: 10px!important;
  }

  .user_edit_form1 input{
    width: 100%;
    border: 1px solid;
  }



  .user_edit_form input, .user_edit_form select{
    width: 100%;
    box-sizing: border-box;
    margin: 5px auto;
    padding: 4px 6px;
  }
  .user_edit_form label{
    display: inline-block;
  }

  .user_edit_form span {
    margin: 5px auto;
    max-width: 16em;
    width: 100%;  
  }

  .btnform{
    text-align: center;
  }

  .btn[disabled]{
    display: none;
  }


  .edit_string{
    display: flex;
    align-items: center;
    border-bottom: 1px solid black;
    margin-top: 10px;
    padding: 10px;
  }

  .edit_string p{
    margin: 0;
    width: 100%;
  }

  .navbar-toggle .icon-bar{
    background: #ff3131;
  }


  .useBalanceButton{
    color: #ff3131;
  }


  .main-button1 {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 1.7em;
    height: 1.7em;
    background-color: #fff;
    color: #fff;
    border: 3px solid #9747FF;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    font-size: 2.3em;
    animation:scaling 3s infinite;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  /* Стили для раскрывающихся элементов */
  .expanded-menu {
    display: none;
    position: fixed;
    bottom: 70px;
    right: 20px;
  }

  .expanded-button {
    width: 40px;
    height: 40px;
    font-size: 2em;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    margin-bottom: 10px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }


  @keyframes scaling {
    0%  { transform: scale(1);}
    50%{ transform: scale(1.1);}
    100%{ transform: scale(1);}
  }

  @-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  .profile_grid{
    display: flex;
  }
  .column_2{
    flex:50%;
  }

    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
    
    }

  
    @media only screen and (min-width : 768px) {

      .card_number_block{
        margin-top: 50px;
      }
    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
      .mob_padd{
        padding: 0 !important;
      }

      .log_first_block {
        display: flex;
        flex-direction: column;
      }

      .main_wrap{
        margin: 0;
      }

      .window_info th {
        display: none; /* Скрываем заголовок таблицы на мобильных устройствах */
    }
    
    .title_cell_td{
      display: block !important;
      color: #fff;
      font-weight: 600;
    }

    .window_info tr {
      display: block;
      margin: 10px 1px;
      border-radius: 10px;
      -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);
      -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);
      box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);
      border: none;
    }

    .window_info td {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        text-align: left;
        border: none !important;
    }
  
    .copy_table_td {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
  
    .copy_button {
        cursor: pointer;
    }

    .popup, .popup_open{
      color: #000;
      display: none;
      padding: 20px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      width: 100%;
      max-width: 300px;
      text-align: center;
    }

    

    .fix_btn{
      max-width: 100%;
      box-sizing: border-box;
      max-width: 230px;
    }

    a.navbar-brand {
      margin-top: 0;
      margin-bottom: 0;
    }

    .nav-tabs>li>a{
      padding: 5px !important;
    }

    .dec_column{
    flex-direction: column;
    }

    .profile_grid{
      flex-direction: column;
    }
  

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
      .main_screen h1,.main_screen p{
        text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
      }

      .total_balance_p{
        margin-bottom: 35px;
      }

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

      .main_screen h1,.main_screen p{
        text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
      }

      .header{
        margin-top: 35px;
      }
      .total_balance_p{
        margin-bottom: 0;
      }

    }