@font-face {
   font-family: "Myriad-Pro";
   src: url('../font/MyriadPro-Regular.woff') format("woff");
   font-weight: normal;
   font-style: normal;
}

p {
   margin-bottom: 0px;
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
   color: #fff;
   text-decoration: none;
}

.table {
   --bs-table-color-type: initial;
   --bs-table-bg-type: initial;
   --bs-table-color-state: initial;
   --bs-table-bg-state: initial;
   --bs-table-color: initial;
   --bs-table-bg: initial;
   --bs-table-border-color: initial;
   --bs-table-accent-bg: initial;
   --bs-table-striped-color: initial;
   --bs-table-striped-bg: initial;
   --bs-table-active-color:initial;
   --bs-table-active-bg: initial;
   --bs-table-hover-color:initial;
   --bs-table-hover-bg: initial;
   width: 100%;
   margin-bottom: 1rem;
   vertical-align: top;
   border-color: var(--bs-table-border-color);
}

.popup {
   width: 400px;
   min-height: 200px;
   position: absolute;
   overflow: hidden;
   background: var(--color1);
   display: none;
   z-index: 99;
   color: white;
   font-size: 14px;
   box-shadow: 3px 3px 13px #0c0c0c;
   border-radius: 10px;
}

/* Garantir que popups sem bodyclick_hide sejam visíveis */
.popup:not(.bodyclick_hide) {
   display: block !important;
}

/* Centralizar popup add_tab especificamente */
#add_tab {
   position: fixed !important;
   top: 55% !important; /* Movido um pouco para baixo (de 50% para 45%) */
   left: 50% !important;
   transform: translate(-50%, -50%) !important;
   margin: 0 !important;
   z-index: 1000 !important;
}

/* Garantir que dropdown de saldo funcione corretamente */
.balance_list:not(.bodyclick_hide) {
   display: block !important;
   position: absolute !important;
   z-index: 1000 !important;
   opacity: 1 !important;
   visibility: visible !important;
}

/* Forçar visibilidade quando não tem bodyclick_hide */
.balance_list:not(.bodyclick_hide) {
   opacity: 1 !important;
   visibility: visible !important;
}

/* Garantir que bodyclick_hide funcione corretamente */
.balance_list.bodyclick_hide {
   display: none !important;
   opacity: 0 !important;
   visibility: hidden !important;
}

.popup .text {
   padding: 20px;
   line-height: 25px;
   font-size: 15px;
}



.popup .title {
   width: 100%;
   background: #000;
   color: white;
   font-size: 15px;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;
   position: relative;
}

.popup .close {
   position: absolute;
   right: 15px;
   top: 10px;
   background-color: #b5b5b6;
   -webkit-mask-image: url('../img/account/close.svg');
   mask-image: url('../img/account/close.svg');
   width: 16px;
   height: 16px;
   cursor: pointer;
}

.popup .close:hover {
   background-color: white;
}


.popup .item {
   float: left;
   width: 25%;
   /* margin-left:5%; */
   padding-top: 16px;
   padding-bottom: 10px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
}


.popup .item2 {
   /* float:left;
   width:70%;
   padding-top:10px;
   padding-bottom:10px; */

}


.popup .w1 {
   width: 30px;
   height: 30px;
   border-radius: 3px;
   background: #8e9098;
}

.popup .w2 {
   width: 14px;
   height: 30px;
   border-radius: 3px;
   background: #8e9098;
   float: left;
   margin-right: 2px;
}

.popup .w3 {
   width: 30px;
   height: 14px;
   border-radius: 3px;
   background: #8e9098;
   margin-bottom: 2px;
}


.popup .w4 {
   width: 30px;
   height: 14px;
   border-radius: 3px;
   background: #8e9098;
   margin-bottom: 2px;
}

.popup .w5 {
   width: 14px;
   height: 14px;
   border-radius: 3px;
   background: #8e9098;
   margin-right: 2px;
   float: left;
}

.popup .w6 {
   width: 14px;
   height: 14px;
   border-radius: 3px;
   background: #8e9098;
   margin-right: 2px;
   margin-bottom: 2px;
   float: left;
}


.popup .w_ico {
   cursor: pointer;
   width: 34px;
   overflow: hidden;
}

.popup .w_ico:hover div,
.popup .active div {
   background: white;
}



.popup .lines {
   clear: both;
   width: 100%;
   border-bottom: 1px solid var(--bg);
}


.popup_center {
   margin: 0;
   margin-top: 50px;
   position: absolute;
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;
   ;
}


.curreny_table {
   width: 550px !important;
}

.curreny_table .category {
   width: 25%;
   /* float:left;
  min-height:200px; */
   background: var(--color1);
}


.curreny_table .category .item {
   border-bottom: 1px solid var(--bg);
   padding: 10px;
   width: 100%;
   cursor: pointer;
}

.curreny_table .category .item:hover {
   background: var(--bg);
}

.curreny_table .category .item_count {
   /* float:right;
  margin: 1px 14px 0 0; */
   color: white;
   font-size: 10px;
   background: var(--bg);
   border-radius: 25px;
   padding: 3px 6px 3px 6px;

}

.curreny_table .category .item_ico {
   float: left;
   width: 22px;
   height: 22px;
}

.curreny_table .category .ico_top {
   background: url('../img/account/ico_top.svg') no-repeat;
}

.curreny_table .category .ico_options {
   background: url('../img/account/ico_options.svg?1') no-repeat;
}

.curreny_table .category .ico_crypto {
   background: url('../img/account/ico_crypto.svg?1') no-repeat;
}

.curreny_table .category .ico_stocks {
   background: url('../img/account/ico_stocks.svg?2') no-repeat;
}


.curreny_table .category .ico_forex {
   background: url('../img/account/ico_forex.svg') no-repeat;
}

.curreny_table .category .ico_index {
   background: url('../img/account/ico_index.svg?1') no-repeat;
}

.curreny_table .category .ico_comm {
   background: url('../img/account/ico_comm.svg') no-repeat;
}


.curreny_table .category .ico_fav {
   background: url('../img/account/ico_fav.svg') no-repeat;

}






.curreny_table .category .item_name {
   float: left;
   color: white;
   font-size: 13px;
   margin: 1px 0 0 9px;
}




.curreny_table .currency {
   /* wid/at:left; */
   height: 500px;
   overflow-y: auto;
   overflow-x: hidden;
   background: var(--bg);
   margin-left: 2%;
}


.curreny_table .currency_top {
   width: 200px;
   background: var(--bg);
   margin-top: 20px;
   float: left;
   margin-left: 25px;
   border-radius: 14px;
   border: 1px solid var(--bg);
}

.curreny_table .currency_top:hover {
   border: 1px solid #707A95;
}

.curreny_table .currency_top .curr {
   display: table;
   margin: 0 auto;
   margin-top: 10px;
}

.curreny_table .currency_top .sparkline {
   height: 40px;
   padding-top: 10px;
}

.curreny_table .currency_top .curr .curr_img {
   display: block;
   float: left;
}


.curreny_table .currency_top .item_closed {
   height: 40px;
   padding-top: 10px;
   color: rgb(98, 105, 134);
   text-align: center;
}


.curreny_table .currency_top .curr .curr_name {
   float: left;
   margin: 4px 0 0 10px;
}

.curreny_table .currency_top .curr_param {
   margin: 15px 0 0 0;
   height: 22px;
   font-size: 11px;
}

.curreny_table .currency_top .price {
   float: left;
   margin: 0 0 0 10px;
}

.curreny_table .currency_top .profit {
   float: right;
   margin: 0 10px 0 0;
   color: rgb(4, 193, 4);
}


.curreny_table .currency .item_ico {
   float: left;
   position: relative;
   width: 50px;
   height: 32px;
   margin-top: 3px;
}

.curreny_table .currency .item_name {
   /* width:20%;
  float: left; */
}


.curreny_table .currency .item_curr {
   font-size: 13px;
}


.curreny_table .currency .item_index {
   font-size: 10px;
   margin-top: 3px;
   color: #707c96;
}

.curreny_table .currency .sparkline {
   width: 30%;
   float: left;
   color: white;
   margin: 5px 0 0 9px;
   font-size: 10px;
}


.curreny_table .currency .item_profit {
   /* width:20%; */
   /* float: left; */
   color: white;
   /* margin: 5px 0 0 9px; */
}

.curreny_table .currency .item_text {
   width: 20%;
   float: left;
   color: white;
   margin: 5px 0 0 9px;
}


.curreny_table .currency .item_fav {
   float: left;
   background: url('../img/account/fav.png') 0 5px no-repeat;
   width: 20px;
   height: 22px;
   margin-top: 2px;
   cursor: pointer;
}

.curreny_table .currency .item_fav:hover,
.curreny_table .currency .active {
   background: url('../img/account/fav.png') 0 -47px no-repeat;
}



.curreny_table .currency .item {
   border-bottom: 1px solid var(--color1);
   padding: 10px;
   width: calc(100% - 20px);
}

.curreny_table .currency .item:hover {
   background: var(--color1);
}


.curreny_table .currency .closed {
   opacity: 0.5;
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
   -moz-opacity: 0.5;
   -khtml-opacity: 0.5;
}

.curreny_table .currency .closed:hover {
   background: none;
}



.fl_left {
   float: left;
}

.mr_right {
   margin-right: 20px;
}


.loader {
   position: fixed;
   z-index: 99;
   background: var(--bg);
   width: 100%;
   height: 1500px;
   overflow: hidden;
}

.loader>.loading {
   position: fixed;
   display: block;
   left: 50%;
   top: 50%;
   margin-left: -40px;
   margin-top: -60px;
}

.loader .circle {

   border: 3px solid #363e4d;
   border-radius: 50%;
   border-top: 3px solid white;
   width: 60px;
   height: 60px;
   -webkit-animation: spin 2s linear infinite;
   /* Safari */
   animation: spin 2s linear infinite;
}

.loader .load {

   /* border: 3px solid #363e4d;
   border-radius: 50%;
   border-top: 3px solid white; */
   width: 60px;
   height: 60px;
   /* -webkit-animation: spin 2s linear infinite; /* Safari */
   /* animation: spin 2s linear infinite; */
}

.loader .loadtext {
   font-size: 12px;
   position: fixed;
   display: block;
   color: white;
   width: 100px;
   left: 50%;
   top: 58%;
   margin-left: -60px;
   text-align: center;
}



/* Safari */
@-webkit-keyframes spin {
   0% {
      -webkit-transform: rotate(0deg);
   }

   100% {
      -webkit-transform: rotate(360deg);
   }
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}







.menu {
   /* float: left; */
   /* margin-top: 11px; */
   /* margin-left: 10px; */
   position: relative;
   z-index: 30;
}


.menu .ico {
   cursor: pointer;
   background-color: #b5b5b6;
   -webkit-mask-image: url('../img/account/menu.svg');
   mask-image: url('../img/account/menu.svg');
   width: 32px;
   height: 32px;
   float: left;
}


.menu .title {
   float: left;
   margin: 6px 0 0 8px;
}



.menu .name {
   cursor: pointer;
   height: 30px;
   color: #b5b5b6;
   font-size: 15px;
}

.menu:hover .ico {
   background-color: white;
}

.menu:hover .name {
   color: white;
}


.menu .slider_menu {
   position: fixed;
   width: 177px;
   top: 60px;
   right: 11px;
   z-index: 91;
   background: #0e172a;
   display: none;
   font-size: 16px;
   padding: 4px;
   background: #040c11;
   zoom: 1;
   border-radius: 4px;
   box-shadow: 3px 3px 13px #0c0c0c;
}

.icon-menu {
   width: 25px;
   margin-right: 15px;
}

.menu .slider_menu A {
   /* display: block; */
   text-decoration: none;
   /* padding-top: 90px; */
   width: 150px;
   min-height: 40px;
   margin: 4px;
   /* float: left; */
   color: #9b9fa8;
   cursor: pointer;
   background-color: var(--color1);
   position: relative;
   padding: 5px 10px;
   border-radius: 4px;
}

.menu .slider_menu span {
   /* display: table;
   max-width: 50px;
   margin: 0 auto;
   text-align:center; */
}

.menu .slider_menu A:hover {
   background-color: #373737;
   color: #fff;
}

.menu .slider_menu .ico0 {
   background: #202738 url('../img/ico0.png') 50px 30px no-repeat;
}


.menu .slider_menu .ico1 {
   background: #202738 url('../img/ico1.png') 50px 30px no-repeat;
}

.menu .slider_menu .ico2 {
   background: #202738 url('../img/ico2.png') 50px 30px no-repeat;
   ;
}

.menu .slider_menu .ico3 {
   background: #202738 url('../img/ico3.png') 50px 30px no-repeat;
}

.menu .slider_menu .ico4 {
   background: #202738 url('../img/ico4.png') 50px 30px no-repeat;
}

.menu .slider_menu .ico5 {
   background: #202738 url('../img/ico5.png') 50px 30px no-repeat;
}

.menu .slider_menu .ico6 {
   background: #202738 url('../img/ico6.png') 50px 30px no-repeat;
}

.menu .slider_menu .ico7 {
   background: #202738 url('../img/ico7.png') 50px 30px no-repeat;
}

.menu .slider_menu .ico8 {
   background: #202738 url('../img/ico8.png') 50px 30px no-repeat;
}

.menu .slider_menu .ico9 {
   background: #202738 url('../img/ico9.png') 50px 30px no-repeat;
}

.menu .slider_menu .ico10 {
   background: #202738 url('../img/ico10.png') 50px 30px no-repeat;
}

.menu .slider_menu .ico11 {
   background: #202738 url('../img/ico11.png') 50px 30px no-repeat;
}

.menu .slider_menu .ico12 {
   background: #202738 url('../img/ico12.png') 50px 30px no-repeat;
}


.window_type {
   cursor: pointer;
   /* background-color: #b5b5b6; */
   /* -webkit-mask-image: url('../img/account/window_type.svg');
  mask-image: url('../img/account/window_type.svg') ; */
   /* width:32px;
  height: 32px;
  float:left; */
   /* margin: 11px 0 0 30px; */
}

.add_tab {
   /* cursor: pointer;
  background-color: #b5b5b6;
  -webkit-mask-image: url('../img/account/add.svg');
  mask-image: url('../img/account/add.svg') ;
  width:32px;
  height: 32px; */
   /* float:left;
   margin: 11px 0 0 10px; */
}




::-webkit-scrollbar {
   width: 3px;
   height: 3px;
   background-color: black;
}

::-webkit-scrollbar-thumb {
   width: 3px;
   background-color: var(--color1);
   border-radius: 5px;
}


.page::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}




* {
   margin: 0;
   padding: 0;
}

img {
   border: 0;
}

.clear {
   clear: both;
}

.clear_mob {
   float: left;
}


body {
   width: 100%;
   font-family: Myriad-Pro;
   position: relative;
   background: var(--bg);
   /* min-width: 1400px; */


   -moz-user-select: none;
   -o-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* Correções específicas para MacBook 13,6" - Resolução 2560x1664 */
@media screen and (width: 2560px) and (height: 1664px) {
   html {
      zoom: 0.5 !important;
      -webkit-zoom: 0.5 !important;
      -moz-transform: scale(0.5) !important;
      transform: scale(0.5) !important;
      -moz-transform-origin: 0 0 !important;
      transform-origin: 0 0 !important;
   }
   
   body {
      zoom: 1 !important;
      -webkit-zoom: 1 !important;
      -moz-transform: scale(1) !important;
      transform: scale(1) !important;
   }
   
   .head {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .main {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .center {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .right {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .left {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .lots {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .popup {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .window {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
}

/* Media query para resoluções similares ao MacBook */
@media screen and (min-width: 2400px) and (max-width: 2600px) and (min-height: 1500px) and (max-height: 1700px) {
   body {
      zoom: 0.55;
      -webkit-zoom: 0.55;
      -moz-transform: scale(0.55);
      transform: scale(0.55);
      -moz-transform-origin: 0 0;
      transform-origin: 0 0;
   }
   
   .head {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .main {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .center {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .right {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .left {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .lots {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .popup {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
   
   .window {
      zoom: 1;
      -webkit-zoom: 1;
      -moz-transform: scale(1);
      transform: scale(1);
   }
}

/* Correções adicionais para elementos que saem da tela no MacBook 13,6" */
@media screen and (width: 2560px) and (height: 1664px) {
   .popup {
      max-width: 90vw;
      max-height: 90vh;
      overflow: auto;
   }
   
   .window {
      max-width: 90vw;
      max-height: 90vh;
      overflow: auto;
   }
   
   .curreny_table {
      max-width: 90vw;
      max-height: 80vh;
      overflow: auto;
   }
   
   .lots_table {
      max-width: 100%;
      overflow-x: auto;
   }
   
   .tabs {
      max-width: 100%;
      overflow-x: auto;
   }
   
   .head_rightt {
      max-width: 100%;
      overflow: hidden;
   }
   
   /* Corrigir o main container */
   .main {
      height: calc(100vh - 74px) !important;
      overflow: hidden;
      margin: 0 !important;
      padding: 0 !important;
   }
   
   /* Container do centro da tela */
   .centroJal {
      width: calc(100% - 80px) !important;
      height: calc(100vh - 74px) !important;
      overflow: hidden;
   }
   
   /* Janela do gráfico */
   .chart_window {
      width: 100% !important;
      height: calc(100vh - 74px - 200px) !important; /* Altura total menos header e espaço para histórico */
      position: relative !important;
      display: flex !important;
      flex-direction: row !important;
   }
   
   .center {
      width: calc(100% - 300px) !important; /* Largura total menos painel direito */
      height: 100% !important;
      position: relative;
      margin-bottom: 0 !important;
      padding: 0 !important;
   }
   
   .right {
      width: 300px !important;
      height: 100% !important;
      position: relative;
      margin-bottom: 0 !important;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0 !important; /* Remover padding que causa desalinhamento */
      box-sizing: border-box !important;
   }
   
   /* Alinhar gráfico com o fim do histórico */
   .center iframe,
   .center #placeholder_1,
   .center #placeholder_2,
   .center .tradingview-widget-container,
   .center > div {
      width: 100% !important;
      height: 100% !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
   }
   
   /* Garantir que o histórico fique na posição correta */
   .lots {
      position: fixed !important;
      bottom: 0 !important;
      left: 85px !important; /* Alinhado com o menu lateral */
      right: 0 !important;
      width: calc(100% - 85px) !important;
      height: 200px !important; /* Altura aumentada para acomodar o histórico do addlot */
      z-index: 10 !important;
      margin-bottom: 0 !important;
   }
   
   /* Corrigir histórico do addlot para não passar da tela */
   #trading-history-expanded {
      max-height: 180px !important; /* Altura máxima para não passar da tela */
      overflow-y: auto !important;
      overflow-x: hidden !important;
   }
   
   #trading-history-expanded > div:last-child {
      max-height: 140px !important; /* Altura do conteúdo interno */
      overflow-y: auto !important;
   }
   
   /* Adicionar padding interno ao painel direito */
   .right > * {
      padding-left: 16px !important;
      padding-right: 16px !important;
   }
   
   /* Garantir que o conteúdo do painel direito tenha espaçamento adequado */
   .right .addlot_buttons,
   .right .sform,
   .right .form,
   .right .select,
   .right .button1,
   .right .button1b {
      margin-left: 16px !important;
      margin-right: 16px !important;
   }
   
   /* Garantir que não haja espaços vazios */
   body {
      margin: 0 !important;
      padding: 0 !important;
      overflow-x: hidden;
   }
   
   /* Corrigir qualquer elemento que possa estar causando espaços */
   .center .chart-container,
   .center .tradingview-widget-container__widget {
      height: 100% !important;
      width: 100% !important;
   }
}

/* Correções para resoluções similares */
@media screen and (min-width: 2400px) and (max-width: 2600px) and (min-height: 1500px) and (max-height: 1700px) {
   .popup {
      max-width: 90vw;
      max-height: 90vh;
      overflow: auto;
   }
   
   .window {
      max-width: 90vw;
      max-height: 90vh;
      overflow: auto;
   }
   
   .curreny_table {
      max-width: 90vw;
      max-height: 80vh;
      overflow: auto;
   }
   
   .lots_table {
      max-width: 100%;
      overflow-x: auto;
   }
   
   .tabs {
      max-width: 100%;
      overflow-x: auto;
   }
   
   .head_rightt {
      max-width: 100%;
      overflow: hidden;
   }
   
   .center {
      max-width: 100%;
      overflow: hidden;
      height: calc(100vh - 74px - 168px) !important; /* Altura total menos header e histórico */
      position: relative;
   }
   
   .right {
      max-width: 100%;
      overflow: hidden;
      padding: 0 !important; /* Remover padding que causa desalinhamento */
      box-sizing: border-box !important;
   }
   
   /* Alinhar gráfico com o fim do histórico */
   .center iframe,
   .center #placeholder_1,
   .center #placeholder_2,
   .center .tradingview-widget-container,
   .center > div {
      width: 100% !important;
      height: 100% !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
   }
   
   /* Garantir que o histórico fique na posição correta */
   .lots {
      position: fixed !important;
      bottom: 0 !important;
      left: 85px !important; /* Alinhado com o menu lateral */
      right: 0 !important;
      width: calc(100% - 85px) !important;
      height: 168px !important;
      z-index: 10 !important;
   }
}


.window {
   z-index: 91;
   width: 556px;
   min-height: 220px;
   position: fixed;
   top: 30%;
   left: 50%;
   margin-left: -250px;
   display: none;
}



.window_load {
   z-index: 91;
   width: 100px;
   height: 100px;
   position: fixed;
   top: 33%;
   left: 50%;
   margin-left: -50px;
   display: none;
}

.window .topname {
   width: 100%;
   font-size: 19px;
   color: black;
   text-align: center;
   background: #ffc500;
   padding-top: 18px;
   padding-bottom: 18px;
}

.window .container {
   width: 100%;
   min-height: 100px;
   background: white;
}

.window .text {
   padding: 20px 20px 0 20px;
   line-height: 24px;
}

.bgwindow {
   width: 100%;
   height: 2000px;
   background: black;
   opacity: 0.5;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 2;
   display: none;
}


.window .load {
   width: 60px;
   margin: 300px auto 0 auto;
   z-index: 3;
}


.window .bgline {
   background: #f0f0f0;
   width: 100%;
   height: 65px;
   margin: 31px 20px 0 0px;
}

.window .bgline .link {
   float: right;
   margin-top: 22px;
   margin-right: 40px;
   cursor: pointer;
   display: block;
}




.window .close {
   background: url(../img/close.png) no-repeat;
   width: 30px;
   height: 30px;
   display: block;
   position: absolute;
   right: 15px;
   top: 15px;
   cursor: pointer;
}


.window .close:hover {
   background-position: 0 -40px;
}


.head{
   width: 100%;
   padding: 0 20px;
   box-sizing: border-box;
  height: 74px;
  background: var(--color1);
  -moz-user-select: none; 
  -o-user-select:none; 
  -khtml-user-select: none; 
  -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
  border-bottom: 1px solid var(--borda);	
}


.head_left {
   width: 160px;
   /* float: left; */
}


.head_right {
   width: 400px;
   /* float: right; */
}


.head_rightt .userphoto {
   /* width:57px; */
   /* float: left; */
   /* margin-top:5px;
  margin-right:10px; */
}


.head_rightt .userphoto .photo img {
   position: relative;
   width: 40px;
   height: 40px;
   overflow: hidden;
   border-radius: 100px;
   cursor: pointer;
   border: 3px solid #9598a138;
}

.head_rightt .userphoto .arrow {
   /* float: right; */
   margin-top: 17px;
   width: 12px;
   height: 12px;
   background: url(../img/account/select_arrow.svg) no-repeat;

}

.userphoto:hover .photo img {
   border: 3px solid #9b9fa8;
}



.tabs {
   padding: 10px;
   white-space: nowrap;
   height: 67px;
   display: flex;
   align-items: center;
   gap: 8px;
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
   width: auto !important;
   max-width: 100%;
   flex-wrap: nowrap;
}

.tabs::-webkit-scrollbar {
   display: none;
}





.tabs .tab {
   width: 112px;
   min-width: 112px;
   max-width: 112px;
   padding: 10px;
   border: 1px solid #ffffff1f;
   border-radius: 3px;
   position: relative;
   cursor: pointer;
   display: inline-block;
   background: transparent;
   flex-shrink: 0;
   margin-left: 0 !important;
   margin-right: 0 !important;
}


.tabs .tab.active,
.tabs .tab:hover {
   background: #ffffff26;
   border-top: 1px solid transparent;
   border-right: 1px solid transparent;
   border-left: 1px solid transparent;
}

.tabs .tab.active {
   border-bottom: 3px solid #0faf59;
}

.tabs .tab.tabfocus {
   border-bottom: 3px solid #ffffff !important;
}


.tabs .tab .item_ico {
   max-width: 30px;
   float: left;
   margin-right: 7px;
}

.tabs .tab .item_name {
   color: #FFF;
   font-weight: bold;
   font-size: 13px;
   float: left;
}

.tabs .tab .item_name .categ {
   color: #ffffff75;
   font-size: 12px;
   font-weight: normal;
   display: block;
}



.tabs .tab .close_tab {
   color: #ffffff70;
   background: transparent;
   border: 0;
   position: absolute;
   margin: 0;
   padding: 0;
   top: 3px;
   left: 3px;
   width: 12px;
   height: 12px;
   cursor: pointer;
   font-size: 10px;
   line-height: 12px;
   text-align: center;
}

.tabs .tab .close_tab:before {
   content: "×";
   font-size: 12px;
   font-weight: bold;
}

.tabs .tab .close_tab:hover {
   color: #FFF;
}

.tabs .icon-item {
   cursor: pointer;
   background-color: #b5b5b6;
   -webkit-mask-image: url('../img/account/add.svg');
   mask-image: url('../img/account/add.svg');
   width: 32px;
   height: 32px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin: 0 10px;
   border-radius: 4px;
   transition: all 0.2s ease;
   -webkit-mask-size: 24px 24px;
   mask-size: 24px 24px;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
}

.tabs .icon-item:hover {
   background-color: #ffffff;
   transform: scale(1.1);
}

.tabs .icon-item:active {
   transform: scale(0.95);
   background-color: #0faf59;
}

/* Responsive tabs for smaller screens */
@media (max-width: 1200px) {
   .tabs .tab {
      width: 100px;
      min-width: 100px;
      max-width: 100px;
      padding: 8px;
   }
   
   .tabs .tab .item_name {
      font-size: 12px;
   }
   
   .tabs .tab .item_name .categ {
      font-size: 11px;
   }
}

@media (max-width: 768px) {
   .tabs {
      padding: 8px;
      height: 60px;
      gap: 6px;
   }
   
   .tabs .tab {
      width: 90px;
      min-width: 90px;
      max-width: 90px;
      padding: 6px;
   }
   
   .tabs .tab .item_ico {
      max-width: 24px;
      margin-right: 5px;
   }
   
   .tabs .tab .item_name {
      font-size: 11px;
   }
   
   .tabs .tab .item_name .categ {
      font-size: 10px;
   }
   
   .tabs .icon-item {
      width: 28px;
      height: 28px;
      margin: 0 6px;
   }
}



.head .logo {
   display: block;
   margin: 9px 20px 0 30px;
   float: left;
}


.head .line {
   width: 1px;
   height: 55px;
   float: left;
   margin: 0 10px 0 10px;
}



.head .user {
   padding-left: 30px;
   padding-top: 4px;
   color: white;
   font-size: bold 15px;
   text-decoration: none;
   height: 20px;
   background: url('../img/user.png') no-repeat;
   display: block;
   margin: 11px 20px 0 10px;
   float: right;
   color: #999999;
}



.head .user .name {
   float: left;
}

.head .user .arrow {
   float: left;
   display: block;
   width: 10px;
   height: 7px;
   background: url('../img/arrow1.png') no-repeat;
   margin: 5px 0 0 4px;
}


.head .user:hover .arrow {
   background-position: 0 -10px;
}



.head .balance {
   position: relative;
   text-decoration: none;
   z-index: 11;
   height: 50px;
   display: flex;
   align-items: center;
   padding: 8px 20px;
   background: transparent;
   border: none;
   border-radius: 12px;
   transition: all 0.3s ease;
   cursor: pointer;
}

.head .balance_account {
   /*float: left; */
   width: 60%;
   display: flex;
   align-items: center;
   flex-direction: row;
   width: 100%;
   justify-content: flex-start;
}



.head .balance_type {
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   opacity: 0.8;
   margin-top: -2px;
   transition: all 0.3s ease;
}

.head .balance:hover .balance_type {
   opacity: 1;
   transform: translateY(-1px);
}


.head .balance_current {
   position: relative;
   cursor: pointer;
   font-size: 22px;
   font-weight: 600;
   color: var(--verdeSaldo);
   text-shadow: 0 0 10px rgba(15, 175, 89, 0.3);
   transition: all 0.3s ease;
}

.head .balance:hover {
   transform: translateY(-2px);
}

.head .balance:hover .balance_current {
   text-shadow: 0 0 15px rgba(15, 175, 89, 0.5);
   transform: scale(1.02);
}

.head .blue {
   color: #ffa500;
   text-shadow: 0 0 10px rgba(255, 165, 0, 0.4);
}

.head .balance:hover .blue {
   text-shadow: 0 0 15px rgba(255, 165, 0, 0.6);
}



.head .arrow_balance_blue {
   position: absolute;
   right: -15px;
   top: 12px;
   background-color: #ffa500;
   -webkit-mask-image: url('../img/account/arrow_balance.svg?2');
   mask-image: url('../img/account/arrow_balance.svg?2');
   width: 10px;
   height: 6px;
}



.head .arrow_balance {
   position: absolute;
   right: -15px;
   top: 12px;
   background-color: var(--verdeSaldo);
   -webkit-mask-image: url('../img/account/arrow_balance.svg?2');
   mask-image: url('../img/account/arrow_balance.svg?2');
   width: 10px;
   height: 6px;

}


.head .balance_list {
   display: none;
   z-index: 30;
   position: absolute;
   right: 0;
   top: 65px;
   background: linear-gradient(135deg, rgba(0,0,0,0.95) 0%, rgba(20,20,20,0.98) 100%);
   width: 280px;
   color: #ffa500;
   font-size: 16px;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,0.1);
   backdrop-filter: blur(20px);
   box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);
   margin-top: -5px;
   animation: fadeInDown 0.3s ease-out;
}

@keyframes fadeInDown {
   from {
      opacity: 0;
      transform: translateY(-10px) scale(0.98);
   }
   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

/* Conta real - cor verde */
.head .balance_list .item:first-child .balance_type,
.head .balance_list .item:first-child .balance_type .name,
.head .balance_list .item:first-child .balance_type .bal,
.head .balance_list .balance_type_ico + .balance_type,
.head .balance_list .balance_type_ico + .balance_type .name,
.head .balance_list .balance_type_ico + .balance_type .bal {
   color: #0faf59 !important;
}

/* Conta demo - cor laranja (mantém padrão) */
.head .balance_list .item:nth-child(2) .balance_type,
.head .balance_list .item:nth-child(2) .balance_type .name,
.head .balance_list .item:nth-child(2) .balance_type .bal,
.head .balance_list .balance_type_ico_demo + .balance_type,
.head .balance_list .balance_type_ico_demo + .balance_type .name,
.head .balance_list .balance_type_ico_demo + .balance_type .bal {
   color: #ffa500 !important;
}

/* Estilo para o item de esconder/mostrar saldo */
#toggle_balance_visibility {
   border-top: 1px solid var(--color1);
   margin-top: 10px;
   padding-top: 10px;
}

#toggle_balance_visibility .balance_account {
   cursor: pointer;
   transition: background-color 0.2s ease;
}

#toggle_balance_visibility .balance_account:hover {
   background-color: var(--color1);
   border-radius: 4px;
   padding: 5px;
}




.head .balance_list .title {
   text-align: center;
   padding-top: 10px;

}


.head .balance_list .item {
   background: rgba(255,255,255,0.03);
   padding: 15px 20px;
   margin: 8px 12px;
   cursor: pointer;
   border-radius: 12px;
   border: 1px solid rgba(255,255,255,0.08);
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
}

.head .balance_list .item::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
   transition: left 0.5s ease;
}

.head .balance_list .item:hover {
   background: rgba(255,255,255,0.1);
   border-color: rgba(255,255,255,0.2);
   transform: translateX(5px);
}

.head .balance_list .item:hover::before {
   left: 100%;
}



.head .balance_list .balance_type_ico {
   background-color: var(--verde);
   -webkit-mask-image: url('../img/account/balance_type.svg?');
   mask-image: url('../img/account/balance_type.svg?');
   width: 32px;
   height: 32px;
   border-radius: 8px;
   transition: all 0.3s ease;
   position: relative;
}

.head .balance_list .item:hover .balance_type_ico {
   transform: scale(1.1) rotate(5deg);
   box-shadow: 0 4px 15px rgba(15, 175, 89, 0.3);
}


.head .balance_list .balance_type_ico_demo {
   background-color: #ffa500;
   -webkit-mask-image: url('../img/account/balance_type.svg?');
   mask-image: url('../img/account/balance_type.svg?');
   width: 32px;
   height: 32px;
   border-radius: 8px;
   transition: all 0.3s ease;
   position: relative;
}

.head .balance_list .item:hover .balance_type_ico_demo {
   transform: scale(1.1) rotate(-5deg);
   box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);
}

.head .balance_list .balance_type_ico_invest {
   background-color: #E6A200;
   -webkit-mask-image: url('../img/account/balance_type.svg?');
   mask-image: url('../img/account/balance_type.svg?');
   width: 24px;
   height: 24px;
   /* float: left;
    margin: 10px 7px 0 7px; */
}


.head .balance_list .balance_type_ico_partner {
   background-color: #B3B1B7;
   -webkit-mask-image: url('../img/account/balance_type.svg?');
   mask-image: url('../img/account/balance_type.svg?');
   width: 24px;
   height: 24px;
   /* float: left;
    margin: 10px 7px 0 7px; */
}


.head .balance_list .balance_type {
   float: left;
   margin: 4px 0 0 15px;
   flex-grow: 1;
}

.head .balance_list .balance_type .name {
   text-transform: uppercase;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.8px;
   opacity: 0.9;
   margin-bottom: 4px;
   transition: all 0.3s ease;
}

.head .balance_list .balance_type .bal {
   font-size: 18px;
   font-weight: 700;
   letter-spacing: 0.5px;
   transition: all 0.3s ease;
}

.head .balance_list .item:hover .balance_type .name {
   opacity: 1;
   transform: translateY(-1px);
}

.head .balance_list .item:hover .balance_type .bal {
   transform: translateY(-1px) scale(1.02);
}


.head .balance_list .balance_type_button {
   float: right;
   background: var(--verde);
   text-align: center;
   padding: 4px 14px 4px 14px;
   margin-top: 7px;
}




/* Botão moderno de depósito */
.h-btn {
  --padding-start: 8px;
  --padding-end: 12px;
  --background-color: #0faf59;
  --backgroud-color-hover: rgba(15, 175, 89, 0.8);
  --gradient: linear-gradient(135deg, #000000 0%, #0faf59 100%);
  --icon-color: #fff;
  --color: #fff;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(15, 175, 89, 0.2);
  padding: 0 var(--padding-end) 0 var(--padding-start);
  height: 56px;
  min-width: 140px;
  line-height: 1.2;
  white-space: nowrap;
  background-color: var(--background-color);
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}

.h-btn::after,
.h-btn::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 7px;
  width: 100%;
  height: 100%;
}

.h-btn::before {
  background: var(--gradient);
  z-index: 1;
}

.h-btn::after {
  background-color: var(--backgroud-color-hover);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
}

.h-btn svg {
  display: block;
  color: var(--icon-color);
  position: relative;
  z-index: 3;
}

.h-btn__start {
  position: relative;
  z-index: 3;
}

.h-btn__end {
  margin-left: 6px;
  position: relative;
  z-index: 3;
}

.h-btn__text {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--color);
}

.h-btn:focus,
.h-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 0 0 2px rgba(15, 175, 89, 0.4),
    0 8px 25px rgba(15, 175, 89, 0.4);
}

.h-btn:hover::after {
  opacity: 1;
}

.h-btn:active {
  transform: translateY(0);
}

.deposit-btn-wrap {
  display: flex;
  align-items: center;
}

/* Menu moderno do usuário */
.modern-menu-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  /* border: 1px solid rgba(255, 255, 255, 0.05); */
  transition: all 0.3s ease;
  text-decoration: none;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.modern-menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transition: left 0.5s ease;
}

.modern-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modern-menu-item:hover::before {
  left: 100%;
}

.modern-menu-item:hover .menu-icon svg {
  transform: scale(1.1) rotate(5deg);
  color: #0faf59;
}

.modern-menu-item:hover .menu-arrow svg {
  transform: translateX(4px);
}

.modern-menu-item .menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  margin-right: 12px;
}

.modern-menu-item .menu-icon svg {
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.modern-menu-item .menu-text {
  flex-grow: 1;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.modern-menu-item:hover .menu-text {
  color: #ffffff;
  font-weight: 600;
}

.modern-menu-item .menu-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 8px;
}

.modern-menu-item .menu-arrow svg {
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}

/* Estilo especial para o item de logout */
.logout-item {
  border-color: rgba(239, 68, 68, 0.2) !important;
}

.logout-item:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.logout-item:hover .menu-icon svg {
  color: #ef4444 !important;
}

.logout-item .menu-icon {
  background: rgba(239, 68, 68, 0.1);
}

/* Estilo especial para o item admin */
.admin-item {
  border-color: rgba(15, 175, 89, 0.2) !important;
}

.admin-item:hover {
  background: rgba(15, 175, 89, 0.1) !important;
  border-color: rgba(15, 175, 89, 0.3) !important;
}

.admin-item:hover .menu-icon svg {
  color: #0faf59 !important;
}

.admin-item .menu-icon {
  background: rgba(15, 175, 89, 0.1);
}

/* Melhorias no container do menu */
.slider_menu {
  background: rgba(0, 0, 0, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 8px 0 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  animation: slideDown 0.3s ease-out !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Remove estilos antigos dos itens de menu */
.slider_menu .rodar-up {
  display: none !important;
}

/* ===========================================
   PAINEL DE ATIVOS MODERNIZADO
   =========================================== */

/* Cabeçalho moderno */
.modern-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(15, 175, 89, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px 12px 0 0;
}

.title-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(15, 175, 89, 0.2);
  border-radius: 10px;
  color: #0faf59;
  transition: all 0.3s ease;
}

.title-icon svg {
  transition: all 0.3s ease;
}

.title-text {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.modern-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
}

.modern-close:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  transform: scale(1.1);
}

/* Categorias modernas */
.modern-category {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 24px;
  background: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow-x: auto;
  min-width: 100%;
}

.modern-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 140px;
  white-space: nowrap;
}

.modern-category-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s ease;
}

.modern-category-item:hover::before {
  left: 100%;
}

.modern-category-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(15, 175, 89, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.modern-category-item.selected {
  background: rgba(15, 175, 89, 0.15);
  border-color: rgba(15, 175, 89, 0.4);
  box-shadow: 0 4px 15px rgba(15, 175, 89, 0.2);
}

.category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.modern-category-item:hover .category-icon {
  background: rgba(15, 175, 89, 0.2);
  color: #0faf59;
  transform: scale(1.1) rotate(5deg);
}

.modern-category-item.selected .category-icon {
  background: rgba(15, 175, 89, 0.3);
  color: #0faf59;
}

.category-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  transition: all 0.3s ease;
  text-overflow: ellipsis;
  overflow: hidden;
}

.modern-category-item:hover .category-name {
  color: #ffffff;
  font-weight: 600;
}

.category-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #0faf59, #0faf59);
  border-radius: 2px 2px 0 0;
  transition: all 0.3s ease;
}

.modern-category-item.selected .category-indicator {
  width: 80%;
}

/* Lista de moedas moderna */
.modern-currency-list {
  background: rgba(0, 0, 0, 0.05);
}

.currency-header {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s ease;
}

.search-input {
  width: 100%;
  padding: 12px 12px 12px 44px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.3s ease;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(15, 175, 89, 0.5);
  box-shadow: 0 0 0 3px rgba(15, 175, 89, 0.1);
}

.search-input:focus + .search-icon {
  color: #0faf59;
}

/* Estilos para itens de ativo individuais (que são carregados dinamicamente) */
.currency .item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.currency .item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(15, 175, 89, 0.1), transparent);
  transition: left 0.5s ease;
}

.currency .item:hover::before {
  left: 100%;
}

.currency .item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(4px);
}

.currency .item_ico {
  margin-right: 12px;
}

.currency .item_img {
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.currency .item:hover .item_img {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(15, 175, 89, 0.3);
}

.currency .item_curr {
  font-weight: 600;
  color: #ffffff;
  font-size: 14px;
}

.currency .item_profit {
  margin-left: auto;
  background: linear-gradient(135deg, #0faf59, #0d8a47);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(15, 175, 89, 0.3);
}

.currency .item_fav {
  margin-left: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.currency .item_fav:hover {
  transform: scale(1.2);
}

/* Largura aumentada do painel de ativos */
.popup.curreny_table {
  width: 90% !important;
  max-width: 800px !important;
  min-width: 600px !important;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
  .popup.curreny_table {
    width: 95% !important;
    min-width: 320px !important;
  }
  
  .modern-category {
    padding: 16px 12px;
    gap: 6px;
  }
  
  .modern-category-item {
    min-width: 100px;
    padding: 12px 8px;
  }
  
  .category-name {
    font-size: 12px;
  }
}






.head .user:hover {
   background-position: 0 -74px;
   color: white;
}


.janela_menu_left {
   width: 300px;
   height: 100%;
   /* box-shadow: 3px 0px 5px #0c0c0c; */
   z-index: 8;
   position: absolute;
   background: var(--bg);
   left: 85;
   transition: 0.5s cubic-bezier(.36, -0.01, 0, .77);
   color: #9b9fa8;
}

.menu_opc_left {
   padding: 15px;
   height: -webkit-fill-available;
   overflow-y: auto;
}

.janela_menu_left.closed {
   margin-left: -400px;
}


.left {
   width: 85px;
   height: 100%;
   background: var(--color1);
   /* box-shadow: 3px 0px 5px #0c0c0c; */
   z-index: 9;
}


.left_menu {
   color: #9b9fa8;
   font-size: 11px;
   cursor: pointer;
   text-align: center;
   margin: 5px;
   padding: 10px;
}

.left_menu:hover {
   background-color: var(--bg);
   border-radius: 7px;
   color: #fff;
}

.left_menu_ativo {
   background-color: var(--bg) !important;
   border-radius: 7px !important;
   color: #fff !important;
}



.left A {
   display: block;
   border-bottom: 1px solid #d1d9de;
   color: #999999;
   padding: 20px 10px 10px 50px;
   cursor: pointer;
   min-height: 23px;
   text-decoration: none;
   font-size: 14px;
}

.left A SPAN {
   display: block;
   margin-left: 10px;
   margin-top: -2px;
}


.left A:hover {
   color: white;
}

.left .turn {
   background: url('../img/turn.png') 20px 20px no-repeat;
}

.left .turn:hover {
   background-position: 20px -23px;
}

.left .exit {
   background: url('../img/exit.png') 17px 15px no-repeat;
}

.left .exit:hover {
   background-position: 17px -60px;
}

.left .binar {
   background: url('../img/binar.png') 19px 17px no-repeat;

}

.left .binar:hover {
   background-position: 19px -58px;
}



.left .user {
   background: url('../img/user.png') 18px 15px no-repeat;
}

.left .user:hover {
   background-position: 18px -61px;
}


.left .pay {
   background: url('../img/payment.png') 19px 15px no-repeat;
}

.left .pay:hover {
   background-position: 19px -61px;
}

.left .mail {
   background: url('../img/mail.png') 18px 17px no-repeat;
}

.left .mail:hover {
   background-position: 18px -64px;
}


.left .history {
   background: url('../img/history.png') 18px 15px no-repeat;
}

.left .history:hover {
   background-position: 18px -60px;
}

.left .history2 {
   background: url('../img/history2.png') 18px 15px no-repeat;
}

.left .history2:hover {
   background-position: 18px -60px;
}

.left .pay2 {
   background: url('../img/payment2.png') 17px 15px no-repeat;
}

.left .pay2:hover {
   background-position: 17px -59px;
}


.left .partners {
   background: url('../img/partners.png') 15px 15px no-repeat;
}

.left .partners:hover {
   background-position: 15px -60px;
}

.alert {
   display: none;
   position: absolute;
   right: 45%;
   top: 30px;
   color: white;
   font-size: 12px;
   z-index: 55;
   background: black;
   border-radius: 5px;
   padding: 10px 10px 10px 10px;
}



.center {
   position: relative;
   background: var(--bg);
   width: calc(100% - 140px);
   background-image: url('https://fluxcode.lat/chartiq/images/default_chart_bg.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}



.center .counters {
   position: absolute;
   left: 50%;
   margin-left: -200px;
   width: 400px;
   height: 80px;
   margin-top: 35px;
}

.center .counter {
   float: left;
   width: 200px;
}

.center .counter .name {
   font-size: 17px;
   text-align: center;

}

.center .counter .value {
   font-size: 25px;
   text-align: center;

}

.center .counter .value2 {
   font-size: 20px;
   color: red;
   margin-top: 3px;
   text-align: center;
}


.center .currency A {
   color: #0084ff;
   text-decoration: none;
   float: left;
   display: block;
   margin: 9px 20px 0 10px;
   font-size: 14px;
   padding: 12px;
}

.center .currency A.selected {
   background: #0084ff;
   color: white;
   border-radius: 3px;
}


.right {
   width: 300px;
   height: 100%;
   /* float: right; */
   background: var(--bg);
   color: white;
   /* overflow: hidden; */
   padding: 0 16px;
   zoom: 0.75

}




.right .input_block {
   font-size: 18px;
   display: block;
   /* margin: 20px 0px 0px 0px; */
   float: left;
   position: relative;
   margin-bottom: 5px;
}




.sform {
   position: relative;
   width: 90%;
   height: 44px;
   border: 1px solid var(--form-border);
   border-radius: 8px;
   margin: 10px 0 0 0;
}

.sform .name {
   position: absolute;
   left: 25px;
   top: -17px;
   background: var(--bg);
   padding: 5px 12px 5px 12px;
   font-size: 14px;
   color: #9b9fa8;
}

.sform .search_ico {
   width: 14px;
   height: 14px;
   position: absolute;
   left: 14px;
   top: 14px;
   background: url('../img/account/search.svg') 0px 0px no-repeat;
}

.sform INPUT {
   background: var(--bg);
   border: 0;
   margin: 7px 0 0 5px;
   display: block;
   color: white;
   width: 94%;
   height: 32px;
   padding-left: 15px;
   font-size: 15px;
}


.sform INPUT:focus {
   outline: none;
}


.form,
select {
   margin: 0;
   position: relative;
   border: 1px solid var(--color1);
   background: var(--bg);
   padding: 9px;
   font-size: 13px;
   display: block;
   width: 250px;
   /* float: left; */
   color: white;
   border-radius: 4px;
}


.form:focus,
select:focus {
   border: 1px solid var(--verde);
   outline: none;
}









.form2 {
   width: 120px;
   height: 34px;
}


.form2 INPUT {
   background: var(--color1);
   border: 0;
   margin: 0 0 0 27px;
   display: block;
   color: white;
   width: 80px;
   height: 32px;
   /* padding-left: 5px; */
   font-size: 14px;

}



.form2 INPUT:focus {
   outline: none;
}


.form3 {
   width: 120px;
   height: 34px;
   background: var(--color1) url(../img/account/option.png) 8px 7px no-repeat;
}


.form3 INPUT {
   background: var(--color1);
   border: 0;
   margin: 7px 0 0 27px;
   display: block;
   color: white;
   width: 80px;
   height: 32px;
   padding-left: 5px;
   font-size: 14px;
   -moz-user-select: -moz-none;
   -o-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

.form3 INPUT:focus {
   outline: none;
}



.right .name {
   font-size: 11px;
   display: block;
   float: left;
   color: white;
   margin-left: 0px !important;
}

.right .click {
   text-decoration: none;
   font-size: 14px;
   margin: 0 0 0 20px;
}


.right .percent {
   /* margin: 9px 20px 0px 0px;  */
    text-decoration: none;
    font-size: 16px;
    /* color: #3ac45d;
}

.right .profit_block {
   /* float: left; */
}

.right .profit {
   /* margin: 1px 20px 0px 0px !important; */
   text-decoration: none;
   /* font-size:  20px  !important; */
   color: var(--verde);
}


.right .addlot_buttons {
   clear: both;
   padding-top: 20px;
}

.right .down {
   /*background:  url('../img/icodown.png')  no-repeat;
	color: white;
    font-size:   18px;
	width: 70px;
	height: 56px;
	padding: 31px 0 0 50px;
	margin: 5px 0 0 0px;*/
   cursor: pointer;
}

.right .down:hover {
   /* background-position: 0 -112px; */
}


.right .up {
   /* background:  url('../img/icoup.png')  no-repeat;
	color: white;
    font-size:   18px;
	width: 70px;
	height: 56px;
	padding: 31px 0 0 50px;
	margin: 10px 0 0 0px; */
   cursor: pointer;
}

.right .up:hover {
   /* background-position: 0 -112px; */
}

.right .help {
   background: url('../img/help.png') no-repeat;
   width: 20px;
   height: 20px;
   float: left;
   display: block;
   margin-left: 5px;
   cursor: pointer;
}

.divDep {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: 20px;
   margin-top: 25px;
}

.div60 {
   width: 60%;
}

.div40 {
   width: 40%;
}



.button1 {
   border-radius: 4px;
   padding: 10px 0;
   color: black;
   font-size: bold 16px;
   text-decoration: none;
   margin-bottom: 10px;
   background: var(--verde);
   cursor: pointer;
   text-align: center;
   width: 100%;
   border: none;
}


.button1:hover {
   background: #1fedab;
}

.button1b {
   border-radius: 4px;
   padding: 10px 0;
   color: black;
   font-size: bold 16px;
   text-decoration: none;
   margin-bottom: 10px;
   background: var(--vermelho);
   cursor: pointer;
   text-align: center;
   width: 100%;
   border: none;
}


.button1b:hover {
   background: #e1828a;
}



.button2 {
   border-radius: 50px;
   -moz-border-radius: 50px;
   -webkit-border-radius: 50px;
   -khtml-border-radius: 50px;
   border-radius: 50px;
   padding: 12px 35px 12px 35px;
   float: left;
   display: table;
   background: var(--verde);
   color: black;
   font-size: 15px;
   text-decoration: none;
   margin: 10px 20px 0 20px;
   border: 2px solid var(--verde);
   cursor: pointer;
}


.button3 {
   border-radius: 8px;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   -khtml-border-radius: 8px;
   border-radius: 8px;
   padding: 7px 10px 7px 10px;
   float: left;
   display: table;
   color: white;
   font-size: 14px;
   text-decoration: none;
   margin: 26px 20px 0 20px;
   border: 2px solid var(--verde);
   cursor: pointer;
}




.transform {
   filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
   -ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
   -moz-transform: rotate(270deg) translate(-200px, 31px);
   -moz-transform-origin: 0% 0%;
   -webkit-transform: rotate(270deg) translate(-200px, 31px);
   -webkit-transform-origin: 0% 0%;
   -o-transform: rotate(270deg) translate(-200px, 0px);
   -o-transform-origin: 0% 0%;
   -ms-transform: rotate(270deg) translate(-200px, 0px);
   -ms-transform-origin: 0% 0%;
   transform: rotate(270deg) translate (-200px, 0px);
   transform-origin: 0% 0%;
   zoom: 1;
   -webkit-transform: rotate(270deg);
   transform: rotate(270deg);
   position: absolute;
   bottom: 100px;
   color: white;
   font-size: 11px Arial;
   font-size: smaller;
   color: white;
}








.td1 {
   width: 170px;
   float: left;
   text-align: right;
   margin-right: 8px;
   margin-top: 37px;
   color: white;
   font-size: 13px;


}

.td2 {
   width: 276px;
   float: left;
   margin-top: 25px;

}

.td2 .desc {
   color: #D1D1D1;
   margin-top: 6px;
   font-size: 10px;
}


.td3 {
   color: white;
   width: 276px;
   float: left;
   margin-top: 37px;
}

.td3 A {
   color: white;

}

.mess,
.mess2 {
   display: none;
   padding: 8px 25px 9px 25px;
   border-radius: 8px;
   border: 1px solid #fe7e7e;
   color: white;
   font-size: 13px;
   margin: 0 auto;
   margin-top: 2px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -khtml-border-radius: 4px;
}


.ok {
   border: 1px solid #00D051;
}


.mess A {
   color: white;
}


.mess_lot {
   /* wi/dth:116px; */
   /* margin-left:20px; */
   margin-top: 10px;
   display: none;
   padding-top: 8px;
   padding-bottom: 8px;
   text-align: center;
   border-radius: 8px;
   border: 1px solid #fe7e7e;
   color: white;
   font-size: 13px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -khtml-border-radius: 4px;
}


.link {
   color: white;
   float: right;
   margin: 44px 40px 0 0;
}

.link:hover {
   color: white;
}




.no_mob {
   display: block;
}

.in_mob {
   display: none;
}



.account {
   width: 100%;
   float: left;
   position: relative;
   font-size: 13px;
   overflow: hidden;
}


.account .account_inner {
   width: 900;
   margin: 20px auto;
   /* min-width: 900px; */
   color: #777;
}


.account .text {
   color: white;
   margin-top: 30px;

}



.menu2 {
   width: 100%;
   background: var(--color1);
   height: 40px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -khtml-border-radius: 4px;
   margin-top: 10px;

}

.menu2 A {
   float: left;
   display: table;
   color: white;
   text-decoration: none;
   padding: 10px 10px 10px 10px;
   width: 150px;
   text-align: center;
   font-size: 14px;
   border-right: 1px solid var(--bg);
   cursor: pointer;
}

.menu2 .selected {
   background: var(--bg);
   color: #fff;

}

.menu2 A:hover {
   background: var(--bg);
   color: #fff;
}

.forms_center {
   width: 600px;
   margin: 1px auto;
}


.forms {
   /* width: 500px;
  min-height: 200px; */
   background: var(--color1);
   /* -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius:6px; */
   border-radius: 6px;
   padding: 20px;
   color: #777;
}


.hide {
   opacity: 0;
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
   -moz-opacity: 0;
   -khtml-opacity: 0;
   zoom: 1;
}

.apagar {
   display: none !important;
}


.agree {
   margin-top: 0px;
   margin-left: 160px;
}


.agree INPUT {
   display: block;
   float: left;
   margin-top: 3px;

}

.agree .agree_text {
   float: left;
   display: block;
   margin-left: 9px;
   color: #7c7b7b;
}

.bselect {
   width: 120px;
   height: 34px;
   background: var(--color1) url(../img/account/forex.png) 8px 8px no-repeat;
}





.select {
   position: relative;
   border: 1px solid var(--color1);
   background: var(--bg);
   display: block;
   width: 248px;
   float: left;
   color: white;
   overflow: hidden;
   border-radius: 4px;
}



.select2 {
   margin-top: 10px;
   position: relative;
   background: var(--color1) url(../img/select2.png);
   font-size: 13px;
   display: block;
   width: 90px;
   height: 32px;
   float: left;
   color: white;
   cursor: pointer;
   padding-left: 30px;
}



.select2 .value {
   padding-left: 8px;
   width: 60px;
   padding-top: 7px;
   position: absolute;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 13px;
}

.select2 select option {
   background: var(--color1);
   color: white;
   border: 0;
   font-size: 13px;
}


.select2 select {
   position: relative;
   z-index: 15;
   cursor: pointer;
   opacity: 0;
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
   -moz-opacity: 0;
   -khtml-opacity: 0;
   zoom: 1;
   width: 120px;
   height: 35px;
   line-height: 30px;
   margin-left: -30px;
}


.button {
   border: 0;
   display: block;
   padding: 10px 50px 10px 50px;
   color: white;
   background: #35aa47;
   cursor: pointer;
}


.table {
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
   margin-top: 20px;

}


.table td {
   padding: 13px;
   font-size: 13px;
   border-bottom: 2px solid #373737;
   color: white;
}

.table tr:hover td {
   background: #212839;
}


.table .thead td {
   font-size: 14px;
   background: var(--color1) !important;
   color: white;
}

.table .thead2 td {
   font-size: 14px;
   background: var(--color1) !important;
   color: white;
}




.profit_up {
   display: inline-flex;
   padding: 1px 15px 1px 15px;
   border-radius: 4px;
   background: #1A7E28;
}

.profit_down {
   display: inline-flex;
   padding: 1px 15px 1px 15px;
   border-radius: 4px;
   background: #A41A1D;
}


.item_grey {
   display: inline-flex;
   padding: 1px 15px 1px 15px;
   border-radius: 4px;
   background: #676e81;
}



.filter {
   margin: 5px 0 0 0;
   color: white;
}


.pages {
   display: table;
   margin-top: 40px;
   padding-bottom: 10px;
}


.pages A {
   color: white;
   text-decoration: none;
   padding: 5px 9px 5px 9px;
   font-size: 14px;
   margin-right: 8px;
   border-radius: 8px;
   cursor: pointer;
   background-color: #373737;
}

.pages A:hover,
.pages .selected {
   text-decoration: none;
   padding: 5px 9px 5px 9px;
   background: var(--verde);
   color: black;
   font-size: bold 14px;
}



.textarea {
   width: 98%;
   padding-top: 30px;

}

.textarea textarea {
   position: relative;
   border: 1px solid var(--color1);
   ;
   background: #0e172a;
   padding: 9px;
   font-size: 13px;
   display: block;
   width: 90%;
   float: left;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -khtml-border-radius: 4px;
   color: white;
   min-height: 100px;
   max-width: 100%;
}

.textarea textarea:focus {
   border: 1px solid #a5a5a5;
   outline: none;
}






.topinterface {
   position: absolute;
   left: 5px;
   top: 11px;
}


.topinterfaceferramentas {
   position: absolute;
   left: 14px;
    bottom: 77px;

}




.currency_select {
   position: relative;
   display: table;
   color: white;
   font-size: 17px;
   cursor: pointer;
   margin-left: 10px;
}

.currency_select .icon {
   display: block;
   float: left;
   margin-top: 4px;
   position: relative;
   shape-rendering: crispEdges;
}

.currency_select .type {
   font-size: 11px;
}

.currency_select .name1 {
   float: left;
   color: white;
   text-decoration: none;
   margin: 0px 0 0 7px;
}

.currency_select .arrow {
   float: left;
   width: 10px;
   height: 10px;
   background: url(../img/arrow2.png) no-repeat;
   margin: 11px 0 0 16px;
}

.index {
   float: left;
   color: white;
   font-size: 17px;
   padding: 7px 20px 9px 48px;
   margin: 2px 0 0 3px;
   background: url(../img/index.png) 15px 8px no-repeat;
}


.currency_select .options {
   position: absolute;
   z-index: 10;
   width: 740px;
   background: #020b1e;
   left: 0px;
   top: 40px;
   z-index: 16;
   display: none;
   cursor: default;
   padding-bottom: 10px;
}


.currency_select .options_currency {
   float: left;
   width: 150px;
   margin-right: 20px;
   white-space: nowrap;
}


.currency_select .options A {
   display: block;
   text-decoration: none;
   white-space: nowrap;

}


.currency_select .options A:hover .name {
   color: #ff7700;
   cursor: pointer;
}

.currency_select .options .selected {
   color: #ff7700;
}



.currency_select .options SPAN {
   display: block;
}


.currency_select .options .category {
   width: 180px;
   float: left;
}

.currency_select .options .category .cname {
   color: white;
   padding: 10px 0px 8px 20px;
   margin-top: 4px;
   font-size: 14px;
}



.currency_select .options .name {
   float: left;
   width: 50px;
   color: white;
   font-size: 14px;
   padding: 6px 0px 6px 40px;
   cursor: pointer;
   text-decoration: none;
}

.currency_select .options .percent {
   float: right;
   width: 15px;
   color: #eb0f3d;
   font-size: 14px;
   padding: 6px;
   cursor: pointer;
   text-decoration: none;
}



.verify {
   padding: 20px 20px 10px 20px;
   color: white;
}



.investing {
   display: block;
   position: absolute;
   left: 30px;
   bottom: 80px;
   width: 120px;
   height: 30px;
   background: url(../img/investing.png) no-repeat;
}



.helpblock {
   width: 500px;
   color: #e7e7e7;
   padding-top: 45px;
}


.helpblock A {
   color: #e7e7e7;
}

.loader {
   position: fixed;
   z-index: 99;
   background: var(--bg);
   width: 100%;
   height: 1500px;
   overflow: hidden;
}

.loader div {
   position: fixed;
   display: block;
   left: 50%;
   top: 50%;
   margin-left: -40px;
   margin-top: -60px;
}

.loader .circle {

   border: 3px solid #363e4d;
   border-radius: 50%;
   border-top: 3px solid white;
   width: 60px;
   height: 60px;
   -webkit-animation: spin 2s linear infinite;
   /* Safari */
   animation: spin 2s linear infinite;
}

.loader .loadtext {
   font-size: 12px;
   position: fixed;
   display: block;
   color: white;
   width: 100px;
   left: 50%;
   top: 58%;
   margin-left: -60px;
   text-align: center;
}



/* Safari */
@-webkit-keyframes spin {
   0% {
      -webkit-transform: rotate(0deg);
   }

   100% {
      -webkit-transform: rotate(360deg);
   }
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}







.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: calc(100% - 20px);
   height: 38px;
   overflow: hidden;
   background: black;
   font-size: 12px;
   color: white;
   z-index: 16;
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: space-between;
   padding: 0 10px;
}


.footer .time {
   /* margin: 11px  20px 0 20px; */
   font-size: 12px;
   color: white;
   /* float: left; */
   text-transform: uppercase;
}

.footer .fullscreen {
   /* float: right; */
   width: 18px;
   height: 18px;
   /* margin: 8px 40px 0 40px; */
   background: url('../img/account/fullscreen.svg?1') 0px 0px no-repeat;
   cursor: pointer;
   opacity: 0.8;
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.8);
   -moz-opacity: 0.8;
   -khtml-opacity: 0.8;
}

.footer .fullscreen:hover {
   opacity: 1;
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
   -moz-opacity: 1;
   -khtml-opacity: 1;
}


.footer .sound {
   /* float: right; */
   width: 20px;
   height: 18px;
   /* margin: 10px 0 0 0; */
   background: url('../img/account/sound.svg?') 0px 0px no-repeat;
   cursor: pointer;
   opacity: 0.8;
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.8);
   -moz-opacity: 0.8;
   -khtml-opacity: 0.8;
}

.footer .sound:hover {
   opacity: 1;
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
   -moz-opacity: 1;
   -khtml-opacity: 1;
}

.footer .off {
   width: 12px;
   margin-right: 8px;
}


.footer .chat_open {
   /* margin: 5px  20px 0 20px;*/
   padding: 4px 8px 4px 8px;
   border-radius: 8px;
   min-width: 100px;
   font-size: 12px;
   text-align: center;
   color: white;
   /* float: left; */
   background: #257EC0 url('../img/account/chat.svg?3') 5px 2px no-repeat;
   cursor: pointer;
}


.paytype {
   width: 140px;
   height: 70px;
   border-radius: 8px;
   margin-left: 20px;
   margin-top: 20px;
   cursor: pointer;
   float: left;
}

.paytype:hover,
.paytype_checked {
   -webkit-box-shadow: 0 0 15px #ffffff;
   -moz-box-shadow: 0 0 15px #ffffff;
   -ms-box-shadow: 0 0 15px #ffffff;
   box-shadow: 0 0 15px #ffffff;
}

.amount_minus,
.time_minus {
   margin: 2px 0 0 0px;
   float: left;
   width: 59px;
   height: 20px;
   background: var(--color1);
   position: relative;
   cursor: pointer;
}

.amount_minus_ico {
   position: absolute;
   left: 25px;
   top: 8px;
   width: 10px;
   height: 3px;
   background: #9b9fa8;
}

.amount_plus,
.time_plus {
   margin: 2px 0 0 2px;
   float: left;
   width: 59px;
   height: 20px;
   background: var(--color1);
   position: relative;
   cursor: pointer;

}

.amount_plus,
.time_plus, .amount_minus,
.time_minus {
   background: var(--borda);
}

.amount_plus:hover,
.time_plus:hover, .amount_minus:hover,
.time_minus:hover {
   background: var(--verde);
}

.amount_minus_ico {
   position: absolute;
   left: 22px;
   top: 8px;
   width: 11px;
   height: 3px;
   background: #9b9fa8;
}

.amount_plus_ico {
   position: absolute;
   left: 26px;
   top: 4px;
   width: 3px;
   height: 11px;
   background: #9b9fa8;
}

.selects {
   width: 120px;
   margin-top: 5px;
   font-size: 14px;
   position: relative;
}

.selects .selects_label {
   padding: 10px;
   background: var(--color1);
   cursor: pointer;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
}


.selects .selects_icon {
   /* margin:0 0 0 8px; */
   width: 20px;
   height: 20px;
   /* float: left; */
   background: url(../img/account/option.png) no-repeat;
}

.selects .selects_icon2 {
   margin: 0 0 0 8px;
   width: 20px;
   height: 20px;
   float: left;
   background: url(../img/account/leverage.svg) no-repeat;
}


.selects .selects_text {
   /* width:65px;
	 float: left;
	  margin:0 0 0 4px; */
}


.selects .selects_arrow {
   /* margin:7px 8px 0 0; */
   width: 11px;
   height: 12px;
   /* float: left; */
   background: url(../img/account/select_arrow.svg) no-repeat;
}


.selects_list {
   display: none;
   position: absolute;
   top: 0px;
   right: 125px;
   width: 100%;
   min-height: 50px;
   overflow: hidden;
   overflow-y: auto;
   background: var(--color1);
   box-shadow: 3px 3px 13px #0c0c0c;
   border-radius: 4px;
   z-index: 55;
   max-height: 180px;
}



.selects_list .item {
   cursor: pointer;
   display: flex;
   flex-direction: row;
   padding: 5px;
   justify-content: space-around;
   gap: 5px;
}


.selects_list .item:hover {
   background: var(--bg);
   border-radius: 4px;
}



.stoplos_block {
   width: 120px;
   height: 30px;
   background: var(--color1);
   margin-top: 5px;
}

.cancel {
   display: block;
   background-color: var(--verde);
   -webkit-mask-image: url('../img/account/cancel.svg');
   mask-image: url('../img/account/cancel.svg');
   width: 20px;
   height: 20px;
   cursor: pointer;
   zoom: 1;
}

.copy {
   display: block;
   background-color: var(--verde);
   -webkit-mask-image: url('../img/account/copy.svg');
   mask-image: url('../img/account/copy.svg');
   width: 20px;
   height: 20px;
   cursor: pointer;
}


.support {
   width: 97%;
   overflow-y: auto;
   max-width: 700px;
   margin-top: 20px;

}


.invest_tarif {
   width: 25%;
   float: left;
   margin-right: 5%;
}



.alertmessage {
   position: absolute;
   left: 20px;
   bottom: 100px;
   background: var(--bg);
   border-radius: 8px;
   z-index: 12;
   width: 190px;
   padding: 8px 14px 8px 14px;
   border: 1px solid #080e1a;
}



.alertmessage .icon {
   display: block;
   float: left;
   margin-top: 4px;
   position: relative;
   z-index: 3;
}

.alertmessage .profitinfo {
   float: left;
   margin-left: 15px;
}


.alertmessage .profitinfo .n1 {
   font-size: 14px;
   color: white;
   text-decoration: none;
   float: left;
}





.alertmessage .profitinfo .n2 {
   font-size: 16px;
   margin-top: 3px;
   color: #5DE871;
}

.alertmessage .profitinfo .red {
   color: #EC4949;
}

.main {
   position: relative;
   width: 100%;
   transition: 0.5s cubic-bezier(.36, -0.01, 0, .77);
   height: calc(100% - 96px);
}


.chart_window {
   position: absolute;
   left: 0;
   top: 0;
   transition: 0.5s cubic-bezier(.36, -0.01, 0, .77);
}



.iconbar {
   /* position: relative;
   float: left;
   margin: 10px 0 0 0px; */
}

.iconbar .icon {
   cursor: pointer;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    background-color: #2E3645;
    border-radius: 10px;
}



.iconbar .icon:hover {
   border: 1px solid white;
}


.iconbar .icon_candle {
   background: url('../img/account/candle.svg') 5px 4px no-repeat;

}


.iconbar .icon_timeframe {
   position: relative;
}

.iconbar .icon_timeresol {
   position: relative;
}


.iconbar .icon_text {
   width: 100%;
   text-align: center;
   color: white;
   font-size: 12px;
   /* margin-top: 4px; */
}


.iconbar .icon_clean {
   background: url('../img/account/clean.svg') 7px 6px no-repeat;
}

.iconbar .icon_pan {
   background: url('../img/account/pan.svg') 3px 5px no-repeat;
}

.iconbar .icon_indicator {
   background: url('../img/account/indicator.svg') 2px 3px no-repeat;

}

.iconbar .icon {
   background-color: var(--color1);
}


.indic_item .indic_ico {
   float: left;
}



.indic_item .indic_name {
   float: left;
   cursor: pointer;
}

.indic_item:hover {
   background: var(--bg);
}

.indic_item .indic_settings {
   width: 14px;
   height: 14px;
   float: right;
   background: url('../img/account/indic_settings.svg') 0 0 no-repeat;
   cursor: pointer;
   margin: 3px 15px 0 0;
   opacity: 0.7;
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
}

.indic_item .indic_settings:hover {
   opacity: 1;
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
   -moz-opacity: 1;
   -khtml-opacity: 1;
}


.indic_item .indic_del {
   width: 14px;
   height: 14px;
   float: right;
   background: url('../img/account/indic_del.svg') 0 0 no-repeat;
   cursor: pointer;
   margin: 3px 15px 0 0;
   opacity: 0.7;
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
}


.indic_item .indic_del:hover {
   opacity: 1;
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
   -moz-opacity: 1;
   -khtml-opacity: 1;
}


.iconbar_window {
   width: 400px;
   min-height: 200px;
   position: absolute;
   left: 43px;
   top: 0px;
   overflow: hidden;
   background: var(--color1);
   display: none;
   z-index: 99;
   color: white;
   font-size: 13px;
   border-radius: 10px;
   box-shadow: 3px 3px 13px #0c0c0c;
}

.iconbar_window .tleft {
   width: 160px;
   float: left;
   margin-right: 20px;
}


.iconbar_window .items {
   padding: 10px;
}

.iconbar_window .item {
   border-bottom: 1px solid var(--bg);
   padding: 10px;
   cursor: pointer;
}


.iconbar_window .selected {
   background: var(--bg);
}





.iconbar_window .title {
   width: 100%;
   background: var(--bg);
   color: white;
   font-size: 15px;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;
   position: relative;
}

.iconbar_window .close {
   position: absolute;
   right: 15px;
   top: 10px;
   background-color: #b5b5b6;
   -webkit-mask-image: url('../img/account/close.svg');
   mask-image: url('../img/account/close.svg');
   width: 16px;
   height: 16px;
   cursor: pointer;
}

.iconbar_window .close:hover {
   background-color: white;
}


.iconbar_window .title {
   width: 100%;
   background: #000;
   color: white;
   font-size: 15px;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;
   position: relative;
}



.iconbar_window .category {
   width: 35%;
   float: left;
   min-height: 200px;
   background: var(--color1);
}


.iconbar_window .category .item {
   border-bottom: 1px solid var(--bg);
   padding: 10px 0 10px 0;
   width: 100%;
   cursor: pointer;
}

.iconbar_window .category .item:hover {
   background: #282e3b !important;
}

.category>.selected {
   background-color: #282e3b !important;
}


.iconbar_window .category .item_ico {
   float: left;
   width: 22px;
   height: 22px;
   margin-left: 20px;
}


.iconbar_window .category .liner {
   background: url('../img/account/indicator.svg') 0 0px no-repeat;

}

.iconbar_window .category .bars {
   background: url('../img/account/bars.svg') 0 0px no-repeat;

}

.iconbar_window .category .ha {
   background: url('../img/account/ha.svg') 0 0px no-repeat;

}

.iconbar_window .category .candle {
   background: url('../img/account/candle.svg') 0 0px no-repeat;

}


.iconbar_window .category .item_name {
   float: left;
   font-size: 13px;
   color: white;
   margin: 1px 0 0 9px;
}

.iconbar_window .chart_settings {
   float: right;
   margin-top: 10px;
   width: 60%;
}

.iconbar_window .text {
   font-size: 13px;
   color: #a5a5a5;
   margin-bottom: 10px;
}


.iconbar_window .img {
   cursor: pointer;
   float: left;
   width: 101px;
   height: 58px;
   margin-bottom: 10px;
   margin-right: 10px;
   border: 1px solid transparent;
   border-radius: 3px;
}

.iconbar_window .img:hover {
   border: 1px solid #9da39d;
}

.iconbar_window .chart_img1 {
   background: url('../img/account/chart1.png') 0 0px no-repeat;
}

.iconbar_window .chart_img2 {
   background: url('../img/account/chart2.png') 0 0px no-repeat;
}

.iconbar .fx {
   display: none;
}


.indicators .added {
   float: left;
   margin-left: 20px;
   width: 22px;
   height: 20px;
   border-radius: 100px;
   color: black;
   background: #D9D9D9;
   overflow: hidden;
   padding: 0;
   text-align: center;
   font-weight: bold;
   padding-top: 2px;
}

.indicators .popular {
   background: url('../img/account/popular.svg?1') 0 0px no-repeat;
}

.indicators .indicators_list {
   float: right;
   width: 60%;
   height: 210px;
   overflow-y: auto;
}



.indicators .indicators_list .indic_item {
   border-bottom: 1px solid var(--bg);
   padding: 12px;
}






.select_colors {
   position: relative;
   width: 100px;
   cursor: pointer;
   background: var(--bg);
   border-radius: 3px;
}


.select_colors .val {
   float: left;
   width: 24px;
   height: 24px;
   border-radius: 3px;
   background: red;
   margin: 10px 0 10px 20px;
}

.select_colors .arrow {
   float: left;
   width: 15px;
   height: 15px;
   background: url(../img/account/select_arrow.svg) no-repeat;
   margin: 17px 0 0 15px;
}


.chart_settings .chartcolor {
   float: left;
   margin-right: 10px;
}

.select_colors .list {
   display: none;
   position: absolute;
   left: 0px;
   bottom: 40px;
   width: 255px;
   height: 160px;
   background: var(--bg);
}



.select_colors .list .color {
   float: left;
   width: 24px;
   height: 24px;
   border-radius: 3px;
   background: red;
   margin: 10px;
}




.select_line {
   position: relative;
   width: 100px;
   cursor: pointer;
   background: var(--bg);
   border-radius: 3px;
   height: 44px;
}


.select_line .val {
   float: left;
   width: 11px;
   height: 4px;
   border-radius: 3px;
   background: red;
   margin: 10px 0 10px 20px;
}

.select_line .arrow {
   float: right;
   width: 15px;
   height: 15px;
   background: url(../img/account/select_arrow.svg) no-repeat;
   margin: 17px 10px 0 0;
}


.submenu {
   float: left;
   width: 280px;
   background: var(--bg);
   border-radius: 8px;
   margin-top: 40px;
   margin-right: 40px;
   padding: 10px;
}

.submenu .item {
   font-size: 15px;
   color: white;
   padding: 20px;
   text-align: center;
   border-bottom: 1px solid var(--color1);
   margin: 5px 5px 5px 5px;
   border-radius: 8px;
   cursor: pointer;
}

.submenu .item:hover {
   background: var(--verde);
}

.submenu .selected {
   background: #257EC0 !important;
   font-size: 15px;
   color: black;
}

.submenu .last {
   border: 0;
}


.page {
   display: none;
   position: absolute;
   top: 58px;
   width: 100%;
   height: calc(100% - 96px);
   background: var(--bg);
   z-index: 15;
   overflow-y: auto;
}



.page .page_center {
   padding: 16px;
   width: calc(100% - 32px);
   margin: 0 auto;
}


.deposit {
   width: 100%;
}

.deposit .title {
   float: left;
   font-size: 22px;
   color: white;
   margin: 40px 0 40px 0;
}

.waits {
   width: 100px;
   height: 100px;
   float: left;
   background: url(../img/account/waits.svg) no-repeat;
   margin: 40px 0px 0px 20px;
}

.text_waits {
   width: 340px;
   float: left;
   margin: 30px 0px 0px 20px;
}

.text_waits .tname {
   font-size: 20px;
   color: white;
}


.account .close {
   float: right;
   cursor: pointer;
   margin-top: 6px;
}

.account .close:hover {
   opacity: 0.6;
}


.account H2 {
   display: block;
   color: white;
   font-size: 35px;
   display: block;
   float: left;
}


.account H3 {
   display: table;
   color: white;
   font-size: 19px;
   margin: 0 auto;
   padding-top: 20px;
}


.account .title {
   margin-top: 60px;
}



.deposit .close {
   margin-top: 30px;
}





.deposit .search {
   width: 50%;
   margin-top: 30px;
}



.deposit .paysystems {
   width: 100%;
   margin-top: 30px;
}


.deposit .paysystems .category {
   color: white;
   padding-left: 40px;
   height: 25px;
   padding-top: 2px;
   margin-top: 10px;
}

.deposit .paysystems .card {
   background: url(../img/account/card.svg) no-repeat;
}

.deposit .paysystems .wallet {
   background: url(../img/account/wallet.svg) no-repeat;
}

.deposit .paysystems .crypto {
   background: url(../img/account/crypto.svg) no-repeat;
}

.deposit .paysystems .item {
   width: 200px;
   height: 50px;
   display: inline-block;
   border: 1px solid #454A56;
   border-radius: 8px;
   padding: 10px;
   margin: 10px 10px 0 0;
   cursor: pointer;
}

.deposit .paysystems .item:hover {
   border-color: var(--verde);
}

.deposit .paysystems .item .img {
   width: 100px;
   float: left;
}

.deposit .paysystems .item .name {
   display: flex;
   justify-content: center;
   align-content: center;
   flex-direction: column;
   width: 100px;
   float: left;
   color: white;
   font-size: 12px;
   height: 50px;
}

.deposit .steps {
   font-size: 14px;
   color: white;
   margin-bottom: 20px;
}


.deposit .steps .step {
   float: left;
   padding-right: 20px;
}

.deposit .steps .step span {
   background: var(--color1);
   padding: 5px 10px 5px 10px;
   border-radius: 40px;
   color: #777;
   font-weight: bold;
}

.deposit .steps .active SPAN {
   background: var(--verde);
   color: black
}

.deposit .steps .line {
   width: 150px;
   float: left;
   border-bottom: 1px solid #7777;
   margin-top: 10px;
   margin-right: 20px;

}




.lots {
   border-top: 3px solid black;
   position: fixed;
   /* height: 168px; */
   /* height: 60px; */
   /* width: 100%; */
   width: calc(100% - 80px);
   font-size: 12px;
   color: white;
   background: var(--bg);
   transform: translateY(0px);
   transition: 0.5s cubic-bezier(.36, -0.01, 0, .77);
}

.lotsFechado {
   transform: translateY(0px);
}



.lots_table {
   /* width:  calc(50% - 3px);
	float: left;
	border-left: 1px solidvar(--bg); */
   width: 100%;
}


.lots_table .table_top {
   width: 100%;
   height: 28px;
   overflow: hidden;
   position: relative;
   background: var(--bg);
   padding-top: 2px;
}

.resize {
   float: right;
   width: 24px;
   height: 24px;
   background: url('../img/account/resize.svg') 0px 0px no-repeat;
   margin-right: 5px;
   margin-top: 4px;
   cursor: n-resize;
}

.sethide {
   float: right;
   width: 24px;
   height: 24px;
   background: url('../img/account/hide.svg') 0px 0px no-repeat;
   margin-right: 20px;
   margin-top: 4px;
   cursor: pointer;
}


.top_name {
   margin: 0px;
   padding: 7px 10px;
   cursor: pointer;
}

.top_name:hover {
   background: var(--color1);
}

.table_top>.selected {
   background: var(--color1);
}


.lots_table .top_name {
   float: left;
   display: table;
   min-width: 150px;
   position: relative;
   background: var(--color1);
   color: white;
   padding: 6px 6px 6px 22px;
}


.lots_table .table_top .lots_open_profit {
   float: right;
   display: table;
   min-width: 150px;
   margin: 5px 20px 0 5px;
   text-align: right;

}

.lots_table .table_head {
   width: 100%;
   height: 30px;
   background: var(--color1);
   display: flex;
   align-items: center;
   justify-content: space-around;
   /* flex-direction: row; */
   text-align: center;
}

.lots_table .table_list {
   overflow-y: auto;
   height: auto;
}

.lots_table .table_head .item {
   color: #A4A7B2;
   /* margin:6px 0 0 20px;
    display: inline-flex;
	width:11%;
	overflow:hidden; */
   width: 11%;
}


.lots_table .table_str {
   width: 100%;
   border-top: 1px solid var(--color1);
   background: var(--bg);
   padding: 5px 0px;
   display: flex;
   align-items: center;
   justify-content: space-around;
   height: 20px;
}


.lots_table .table_str .item {
   color: #fff;
   /* padding: 2px 0 0 20px; */
   display: inline-flex;
   width: 11%;
   /* overflow: hidden; */
   white-space: nowrap;
   align-items: center;
   /* text-align: center; */
   font-size: 10px;
   justify-content: center;

}

.lots_table .table_str .currency {
   display: inline-flex;
   margin-left: 4px;
   /* margin-top:7px; */
}

.lots_table .table_str .currency_ico {
   /* display: inline-flex; */
   position: relative;
   width: 18px;
   height: 18px;
}

.lots_table .table_str .currency_ico img {
   display: block;
   position: absolute;
   left: 0px;
   /* top:6px; */
}




.lots_table .item .lot_up {
   display: inline-flex;
   padding: 1px 10px 1px 22px;
   border-radius: 4px;
   background: #3f45584a url(../img/account/up.svg) 3px 4px no-repeat;

}

.lots_table .item .lot_down {
   display: inline-flex;
   padding: 1px 10px 1px 22px;
   border-radius: 4px;
   background: #3f45584a url('../img/account/down.svg') 3px 4px no-repeat;
}

.lots_table .item .profit_up {
   display: inline-flex;
   padding: 1px 5px 1px 5px;
   border-radius: 4px;
   background: #1a7e284f;
}

.lots_table .item .profit_down {
   display: inline-flex;
   padding: 1px 5px 1px 5px;
   border-radius: 4px;
   background: #a41a1d52;
}

.lots_table .item .close_lot {
   display: inline-flex;
   padding: 1px 15px 1px 22px;
   border-radius: 4px;
   background: #3F4558 url('../img/account/lot_close.svg') 8px 6px no-repeat;
   cursor: pointer;
}



.chat {
   position: fixed;
   width: 320px;
   height: 600px;
   left: 20px;
   bottom: 40px;
   background-color: #232530;
   border-radius: 4px;
   border: 1px solid #53597E;
   overflow: hidden;
   z-index: 55;
}


.switch {
   float: left;
   width: 48px;
   height: 24px;
   background-color: #3E4664;
   border-radius: 100px;
   cursor: pointer;
   margin: 10px 0 0 4px;
}


.switch .c {
   display: block;
   width: 18px;
   height: 18px;
   border-radius: 100px;
   background-color: black;
   margin: 3px 0 0 4px;
}







@media (max-height: 700px) {

   .right .name,
   .right .help {
      display: none !important;
   }

   .right .input_block {
      margin-top: 0;
   }

}



.pushable {
   position: relative;
   border: none;
   background: transparent;
   padding: 0;
   cursor: pointer;
   outline-offset: 4px;
   transition: filter 250ms;
   width: 100%;
}

.shadow {
   /* position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 5px;
   background: hsl(0deg 0% 0% / 54%);
   will-change: transform;
   transform: translateY(2px);
   transition:
     transform
     600ms
     cubic-bezier(.3, .7, .4, 1); */
}

.edgeup {
   /* position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 5px;
   background: linear-gradient(to left, #0b493e 0%, #094339 8%, #094339 92%, #0b493e 100%); */
}

.edgedown {
   /* position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 5px;
   background: linear-gradient(to left, #6d161d 0%, #71141c 8%, #71141c 92%, #6d161d 100%); */
}



.frontdown {
  display: block;
  position: relative;
  /* padding: 0.75rem 2.625rem; */
  height: 6.25rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  color: white;
  background: var(--vermelho);
  will-change: transform;
  transform: translateY(-0.25rem);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1) 200ms;
}


.frontup {
  display: block;
  position: relative;
  /* padding: 0.75rem 2.625rem; 123 */
  height: 6.25rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  color: white;
  background: #0faf59;
  will-change: transform;
  transform: translateY(-0.25rem);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1) 200ms;
}


.pushable:hover {
   filter: brightness(110%);
}

.pushable:hover .frontup {
   transform: translateY(-6px);
   transition:
      transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.pushable:active .frontup {
   transform: translateY(-2px);
   transition: transform 34ms;
}

.pushable:hover .frontdown {
   transform: translateY(-6px);
   transition:
      transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.pushable:active .frontdown {
   transform: translateY(-2px);
   transition: transform 34ms;
}

.pushable:hover .shadow {
   transform: translateY(4px);
   transition:
      transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.pushable:active .shadow {
   transform: translateY(1px);
   transition: transform 34ms;
}

.pushable:focus:not(:focus-visible) {
   outline: none;
}




.iconHover:hover {
   color: #fff !important;
   transform: scale(1.2);
}



.rodar-down img {
   transition: transform .1s ease-in-out;
}

.rodar-down:hover img {
   transform: rotate(10deg);
}

.rodar-up img {
   transition: transform .1s ease-in-out;
}

.rodar-up:hover img {
   transform: rotate(-10deg);
}

.rodar-icon-up iconify-icon {
   transition: transform .1s ease-in-out;
}

.rodar-icon-up:hover iconify-icon {
   transform: rotate(-10deg);
}


.cor_tempo {
   font-size: 14px;
   color: var(--verde);
   font-weight: bold;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 5px;
}

.mudar_cor_tempo {
   color: #f00;
}

.mudar_cor_botao {
   cursor: no-drop !important;
   background: #333333 !important;
}

.botDep {
   background: var(--bg);
   width: 25%;
   color: #777;
   padding: 5px;
   border-radius: 4px;
   text-align: center;
   cursor: pointer;
}

.botDep:hover {
   color: #fff;
}

.divDepCel {
   display: none !important;
}

.fecharJanelas {
   font-size: 30px;
   position: absolute;
   right: 10px;
   top: 15px;
   color: #777;
   cursor: pointer;
}


.celular {
   display: none !important;
}

.linhaVerif {
   border-left: 1px dashed #373737;
   padding: 0 0 20px 20px;
   position: relative;
   margin: 0px 0px 0px 15px;
}

.disabled {
   opacity: 0.6;
   cursor: not-allowed;
}

.formsOutro {
   background: var(--color1);
   border-radius: 6px;
   padding: 10px;
   color: #777;
   margin-bottom: 10px;
}

.pagina {
   width: 700px;
   margin: 0 auto;
}

.linhaflex {
   display: flex;
   justify-content: center;
   align-items: stretch;
   flex-direction: row;
   gap: 10px;
   margin: 20px 0;
}

.afibalanco {
   display: flex;
   flex-direction: row;
   gap: 10px;
   width: 50%;
}

.afiBalancoTotal {
   display: flex;
   flex-direction: column;
   row-gap: 10px;
   width: 150px;
}

.afiProxPag {
   border-left: 1px dashed #777;
   padding-left: 15px;
   display: flex;
   flex-direction: column;
   row-gap: 2px;
}

.password-toggle-icon {
   position: absolute;
   top: 19px;
   right: 5px;
   transform: translateY(-50%);
   cursor: pointer;
   color: #fff;
   font-size: 30px;
}

.afiLink {
   display: flex;
   flex-direction: column;
   row-gap: 10px;
   width: 50%;
}

.afiQuadrosTitulo {
   display: flex;
   flex-direction: row;
   gap: 10px;
   font-size: 20px;
   align-items: center;
   justify-content: center;
}

.afiQuadros {
   display: flex;
   flex-direction: column;
   row-gap: 5px;
   text-align: center;
   width: 25%;
}

::-webkit-calendar-picker-indicator {
   filter: invert(1);
}

input[type=number]::-webkit-inner-spin-button {
   -webkit-appearance: none;

}

input[type=number] {
   -moz-appearance: textfield;
   appearance: textfield;

}

.topo_janela_menu {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   flex-direction: row;
}


/* RANKING */
.titulo_rank {
   display: flex;
   justify-content: space-between;
   background: var(--color1);
   font-size: 10px;
   font-weight: bold;
   padding: 5px 10px;
   border-radius: 4px;
   margin-bottom: 10px;
}

.item_rank {
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: space-between;
   font-size: 12px;
   font-weight: bold;
   padding: 5px 10px;
   margin-bottom: 10px;
}

.item_rank:hover {
   background: #ffffff08;
   border-radius: 4px;
}

.item_rank_left {
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: space-between;
   gap: 10px;
}

.item_rank_1 {
   background: #ffff00 !important;
   border-radius: 4px;
   width: 15px;
   color: var(--bg) !important;
   font-size: 13px;
   height: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 15px;
}

.item_rank_2 {
   background: #e7e7e7 !important;
   border-radius: 4px;
   width: 15px;
   color: var(--bg) !important;
   font-size: 13px;
   height: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 15px;
}

.item_rank_3 {
   background: #d9b103 !important;
   border-radius: 4px;
   width: 15px;
   color: var(--bg) !important;
   font-size: 13px;
   height: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 15px;
}

.item_rank_x {
   /* background: #d9b103; */
   border-radius: 4px;
   width: 15px;
   /* color: var(--bg); */
   font-size: 13px;
   height: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.item_rank_img {
   width: 35px;
   height: 35px;
   border-radius: 100%;
   border: 2px solid var(--color1);
}

/* RANKING */

/* COPY */
.list_copy_users {
   display: flex;
   justify-content: space-between;
   height: 50px;
   align-items: center;
   font-size: 14px;
   padding: 0px 10px;
   border-bottom: 1px solid var(--color1);
   cursor: help;
   color: #fff;
}

.list_copy_users_meus {
   display: flex;
   justify-content: space-between;
   height: 50px;
   align-items: center;
   font-size: 14px;
   padding: 0px 10px;
   border-bottom: 1px solid var(--color1);
   color: #fff;
}

.list_copy_users:hover, .list_copy_users_meus:hover {
   background: var(--color1);
}

.search_copy_users {
   height: 30px;
    border-radius: 5px;
    padding: 5px 10px;
    background: var(--bg);
    color: #777;
    border: 1px solid #777;
    margin-right: 10px;
}

.list_user_copy_detalhes {
   display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 4px solid #777;
    background: var(--color1);
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    margin-top: 10px;
    font-size: 14px;
}
/* COPY */

/* .fade-in {
   animation: fadeIn 1s;
}

.fade-out {
   animation: fadeOut 1s;
}


@keyframes fadeIn {
   0% { opacity: 0; }
   100% { opacity: 1; }
 }

 @keyframes fadeOut {
   0% { opacity: 1; }
   100% { opacity: 0; }
 } */

 .but-icon-copy {
   font-size: 22px;
    margin: 0px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .but-copy-vermelho {
   font-size: 13px;
    padding: 5px;
    margin: 0px;
    width: 100px;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    background: var(--vermelho);
    text-align: center;
    border: none;
 }

 .but-copy-amarelo {
   font-size: 13px;
    padding: 5px;
    margin: 0px;
    width: 100px;
    border-radius: 4px;
    color: #000;
    text-decoration: none;
    background: #f2d236;
    text-align: center;
    border: none;
 }

 .aguardando-copy {
   background: #f2d236;
    color: #000;
    font-size: 10px;
    padding: 0px 5px;
    border-radius: 5px;
 }

 .rejeitado-copy {
   background: var(--vermelho);
    color: #fff;
    font-size: 10px;
    padding: 0px 5px;
    border-radius: 5px;
 }

/* Estilos para o Histórico de Trading Moderno */
.trading-history-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
}

.trading-history-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(117, 0, 254, 0.05), rgba(0, 166, 103, 0.05));
    pointer-events: none;
    z-index: 0;
}

.trading-history-container > * {
    position: relative;
    z-index: 1;
}

.trading-history-container .history-tab {
    position: relative;
    overflow: hidden;
}

.trading-history-container .history-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.trading-history-container .history-tab:hover::before {
    opacity: 1;
}

.trading-history-container .history-tab.active::before {
    background: linear-gradient(135deg, rgba(117, 0, 254, 0.2), rgba(117, 0, 254, 0.1));
    opacity: 1;
}

.operation-card {
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
}

.operation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.operation-card:hover::before {
    opacity: 1;
}

.operation-card.win::before {
    background: linear-gradient(135deg, rgba(0, 166, 103, 0.2), transparent);
}

.operation-card.loss::before {
    background: linear-gradient(135deg, rgba(255, 2, 92, 0.2), transparent);
}

.operation-card.pending::before {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.2), transparent);
}

/* Melhorar a aparência dos ícones */
.operation-asset img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Efeitos de glow para elementos importantes */
.operation-result.win {
    text-shadow: 0 0 8px rgba(0, 166, 103, 0.5);
}

.operation-result.loss {
    text-shadow: 0 0 8px rgba(255, 2, 92, 0.5);
}

.operation-result.pending {
    text-shadow: 0 0 8px rgba(255, 165, 0, 0.5);
}

/* Animação para o timer circular */
.timer-progress {
    filter: drop-shadow(0 0 4px rgba(255, 165, 0, 0.6));
}

/* Melhorar o footer de estatísticas */
.trading-history-footer .stat-item {
    transition: all 0.3s ease;
}

.trading-history-footer .stat-item:hover {
    transform: translateY(-1px);
}

/* Responsividade aprimorada */
@media (max-width: 768px) {
    .trading-history-container {
        margin-top: 15px;
        border-radius: 8px;
    }
    
    .trading-history-header {
        padding: 0;
    }
    
    .history-tab {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
    
    .operation-card {
        margin: 6px 8px;
        padding: 8px;
    }
    
    .operation-asset {
        font-size: 12px;
    }
    
    .operation-asset img {
        width: 18px;
        height: 18px;
    }
    
    .operation-timer {
        width: 28px;
        height: 28px;
    }
    
    .timer-svg {
        width: 28px;
        height: 28px;
    }
    
    .timer-text {
        font-size: 7px;
    }
}

/* Integração com o tema escuro do sistema */
.trading-history-container {
    color: var(--text-color, #ffffff);
}

.operation-card {
    border-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

.operation-direction.up {
    background: rgba(var(--success-rgb, 0, 166, 103), 0.2);
    color: var(--success, #00a667);
}

.operation-direction.down {
    background: rgba(var(--danger-rgb, 255, 2, 92), 0.2);
    color: var(--danger, #ff025c);
}

/* Melhorar a harmonia com os botões existentes */
.addlot_buttons + .trading-history-container {
    border-top: 2px solid rgba(117, 0, 254, 0.3);
}

/* Efeito de pulsação para operações próximas do fim */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.operation-card.pending .timer-text {
    animation: pulse 2s infinite;
}

/* Melhorar o contraste do texto */
.operation-time,
.operation-prices {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Efeito de destaque para novas operações */
@keyframes highlight {
    0% { 
        background: rgba(117, 0, 254, 0.3);
        transform: scale(1.02);
    }
    100% { 
        background: transparent;
        transform: scale(1);
    }
}

.operation-card.new {
    animation: highlight 1s ease-out;
}