:root{
    --header-mob            : #1f242b;
    --modal-content         : #141e28;
    --header-modal          : #192330;
    --grid                  : #1d242f;
}

p{
    text-align: center;
}

input[type=radio]{
    display: none; 
}

@media (max-width: 920px) {
  input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background: none;
    position: relative;
    padding-right: 0;
  }

  /* remove ícone no Chrome Android */
  input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }
}

.row-radio-mobile{
    height:55px !important;
    width:30px;
    margin:0;
    padding-top:5px;
    padding-bottom:5px;
}

.row-radio-mobile label{
    border:1px solid var(--input-web); 
    padding-top:18px !important;
    padding-bottom:18px !important;
}

.cell-radio-mobile{
    display: flex;
    align-items: end;
    text-align: center;;
    width: 100%;
    font-size:15px;
}

.cell-radio-mobile label{
    width: 100%;   
    padding-top:25px;
    padding-bottom:25px;
    margin-right:0;
    cursor: pointer;
    transition: background-color 0.5s, color 0.5s;
    border-right:1px solid var(--input-web); 
    color:#6b6969;
    user-select: none; 
}

.cell-radio-mobile label:has(input[type="radio"]:checked) {
    border-right:1px solid var(--input-web); 
    background-color: var(--input-web);
    background-color: #262f3d;
    color: var(--light);

}

/* custom radio button */

.custom-radio-group {
    display: flex;
    border: 2px solid #1c2a3b;
    border-radius: 12px;
    overflow: hidden; 
    height: 35px;
    width: 100%; 
    max-width: 600px; 
    font-size:13px;
}

.custom-radio {
    flex: 1; /* cada item ocupa o mesmo espaço */
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-radio input {
    display: none;
}

.custom-radio span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #1c2a3b;
    background: #1f242b; 
    transition: all 0.3s ease;
    cursor: pointer;
}

.custom-radio:last-child span {
  border-right: none; /* remove borda do último */
}

.custom-radio input:checked + span {
  background: linear-gradient(135deg, #0e2f5c, #0d47a1);
  color: #fff;
  box-shadow: inset 0 0 10px rgba(33, 150, 243, 0.5);
}





.hidden {
  display: none !important;;
}

.visible {
  display: block; /* ou flex/grid, dependendo do layout */
}

/* INICIO LISTA DE MENU PARA TELA CALC IR + OPERAÇÕES + PAINEIS */

.menu-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* duas colunas */
  gap: 15px;
  border-radius: 5px;
  padding:15px;
  margin-top: 50px;
}

.menu-list button{
    background-color: #1d293a;;
    border:1px solid  var(--header);
    color:var(--color);
    width: 100%; 
    height: 100%;
    padding-top:20px;
    padding-bottom:20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 7.5px;
    font-size: 12px;
} 

.menu-list button i{
  font-size: 26px;
  margin-bottom:7px;
}

/* FIM LISTA DE MENU PARA TELA CALC IR + OPERAÇÕES + PAINEIS */

/* HEADER REFERENTE AO PAINEL MOBILE + CALENDARIO + VOLTAR */

.header-column {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-column-middle {
    flex-grow: 1;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    margin-top:8px;    
}

.header {
    background-color: var(--header-mob);
    width: 100%;
    height: 60px; 
    display: flex;
    position: fixed;
    color: white;
    align-items: center;
    justify-content: center;
    letter-spacing: 1.0px;
    font-weight: bold;
    top: 0;
    font-size: 18px;
}

.header-container {
    display: flex;
    width: 100%;
}

.header-date {
    font-size: 10px;
    color: var(--light);
    margin-top: 0px; /* Espaço entre "Custódia" e "Jan/2025" */
    margin-top:0px;
}

.header-column-first, .header-column-last {
    width: 50px;
    cursor:pointer;
    margin-top:2px;
}

/* FIM HEADER REFERENTE AO PAINEL MOBILE + CALENDARIO + VOLTAR */

.no-margin{
    margin-top:0 !important;
}

.footer-fixed-mobile {
    /* background-color: var(--menu); */
    background-color: #131a20;
    border-top:3px solid var(--menu);
	position: fixed;
	bottom: 0px; /* sobrepoem menubottom propositalmente, ou 65px caso queira deixar */
	width: 100%;
    height: 140px;
	z-index: 9999;
	display: flex;
	flex-direction: column; 
	align-items: center; 
	gap: 10px;

}

.footer-fixed-mobile button {
	width: calc(100% - 50px); /* 15px de margem em cada lado */
	height: 45px;
}

.footer-fixed-mobile button:first-child {
	margin-top:15px !important;
}


/* header para botões no topo do body */

.button-itens-row {
    position: fixed;
    top: 60px; /* ou outro valor, se quiser abaixo de um header */
    left: 0;
    right: 0;
    z-index: 999;
    height: 52px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-top: 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.button-itens-row::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.button-itens-wrapper {
    display: inline-flex;
    gap: 10px;
    /* justify-content: center; */
    min-width: 100%;
    margin-left: 8px;
}

.button-itens-wrapper div{
    padding-right:7.5px;
    padding-left:7.5px;
    min-width:105px;
    width:100px;
} 

.button-itens-wrapper button{
    width:120px;
    padding: 10px 16px;
}

/* GRID EM LISTA USANDO PARA PAINEL OPERAÇÕES */

.row-list{
    display: grid;
    grid-template-columns: repeat(4, 1fr) 20px;
    background-color: var(--menu); 
    margin:15px;
    margin-bottom:0;
    border-radius: 5px;
    height:60px;
    text-align: center;
    font-size:14px;
    white-space: nowrap;
}

.row-list.medium{
    grid-template-columns: repeat(3, 1fr) 100px;
    height:70px !important;
    padding-right: 20px;
}

.row-list.large{
    grid-template-columns: repeat(3, 1fr) 100px;
    height:90px !important;
    padding-right: 20px;
     margin:15px;
}

.row-list.biglarge{
    grid-template-columns: repeat(6, 1fr) 20px;
    height:90px !important;
    margin-right: 300px !important;
    min-width: 130%;
    border-right:15px solid #131a20;
}

.row-list.info{
    grid-template-columns: repeat(5, 1fr) auto;
    margin-left:20px;margin-right:20px;
    height:30px;
    font-size:12px;
    text-align: center;
    align-content: center;
    overflow: auto;
}

.row-list.info div{
    margin-left:15px;
    margin-right:15px;
}

.row-list:first-child{
    margin-top:0;
}

.row-list.totals{
    font-weight: bold !important;
    margin-top:20px !important;
    font-size:12px !important;
    color:white;
}

.cell-list{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.cell-list:last-child{
    margin-right:10px;
    cursor:pointer;
}

.row-list-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    margin: 15px;
    margin-bottom: 0;
    border-radius: 5px;
    height: 20px;
}

.cell-multi-list {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Espaço entre as linhas */
    font-size: 15px;
    margin-top: 10px;
}

.cell-multi-list .line {
    display: flex;
    justify-content: center;
    gap: 8px; /* Espaço entre os itens da linha */
}

.cell-multi-list:first-child .line {
    justify-content: space-between;
    margin-left:20px;
}

/* .cell-multi-list:last-child .line { */
.cell-multi-list .line {
    justify-content: end;
   
}

.cell-multi-list .line.head {
    font-size:10px;margin-top:-5px;margin-bottom:2.5px
}

.cell-multi-list .line.head.totals {
    font-size:11px;margin-top:-3px;margin-bottom:2.5px
}


/* Linha que passa por trás */

.row-list-header::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #444;
    top: 50%;
    left: 0;
    z-index: 0;
}

/* GRID PARA CONTA CORRENTE */

/* Envolve o bloco inteiro em um wrapper para aplicar borda externa */
.current-block-wrapper {
    background-color: #1d242f;
    background-color: #1e252b;
    border-radius: 7.5px;
    overflow: hidden;
    margin: 0 15px;
    margin-top:20px;
    padding:10px;
}

/* Cada linha com grid */
.current-row-list {
    display: grid;
    white-space: nowrap;
}

.current-row-list.title div{
    color:var(--color);
}

.current-row-list.row-3 {
    
    grid-template-columns: repeat(3, 1fr);
}
.current-row-list.row-3 :first-child {
    text-align: left;
}

.current-row-list.row-3 :nth-child(2) {
    text-align: center;
}
.current-row-list.row-3 :last-child {
    text-align: right;
}

.current-row-list.row-4 {
    grid-template-columns: repeat(4, 1fr);
}

.current-row-list.row-4 :nth-child(2) ,.current-row-list.row-4 :nth-child(3) {
    text-align: left;
}

.current-row-list.row-4 :last-child {
    text-align: right;
}

/* Células */
.current-cell-list {
    color: #fff;
    padding: 8px;
    font-size: 14px;
    /* text-align: center; */
    border-radius: 0; /* remove arredondamento */
}



.header-label {
    background-color: rgba(15, 15, 15, 0.7);
    padding:  7px;
    font-size: 12px;
    color: var(--light);
    z-index: 0; 
    border-radius: 4px;
}

.badge{
    padding:5px 10px;
    border-radius: 5px;
    font-size: 14px;
    width: 200px;
    min-width:200px;
}

.badge-min{
    padding:5px;
    padding-left: 7.5px;
    padding-right: 7.5px;
    border-radius: 2.5px;
    font-size: 14px;
    width: 200px;
    min-width:200px;
}

.badge-min-sell{
    background-color: #102a4e;
    color:#81aae2;
}

.badge-ticket{
    font-size:18px;
    font-weight: bold;
    color:rgb(218, 209, 209);
}

.badge-type-normal{
    color:goldenrod;
}

.badge-type-daytrade{
    color:greenyellow;
}

.badge-sell{
    background-color: #102a4e;
    color:#81aae2;
    padding-left: 27px;
    padding-right: 27px;
}

.badge-sell-outline{
    padding:5px;
    padding-left:7.5px;
    padding-right:7.5px;
    border:2px solid #153869;
    color: #81aae2;
    border-radius: 5px;
    font-size:13px;
}

.badge-buy{
    background-color: #153c2e;
    color: #84dab9;
}

.badge-buy-outline{
    padding:5px;
    padding-left:7.5px;
    padding-right:7.5px;
    border:2px solid #153c2e;
    color: #84dab9;
    border-radius: 5px;
    font-size:13px;
}

.badge-daytrade{
    background-color:#644503;
    color: goldenrod; 
}

.badge-daytrade-outline{
    padding:5px;
    padding-left:7px;
    padding-right:7px;
    border:2px solid #795403;
    color: goldenrod; 
    border-radius: 5px;
    font-size:13px;
}

.badge-earnings{
    background-color: #52709b;
    color:#9ebfe2;
}

@media screen and (max-width: 920px) { /* mobile*/
    .painel-chat {
        height: calc(100vh - 65px ) !important;
        margin:0;
        width:100%;
    }
}


/* FILTRO MODAL */

/* Fundo escurecido opcional */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Torna visível o fundo */
.modal-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Modal deslizando do rodapé */

.filter-modal {
	position: fixed;
	bottom: 0;
	left: 0;
	width: calc(100% - 40px);
	max-height: 50vh;
	background: var(--menu);
	z-index: 9999;
	border-radius: 25px 25px 0 0;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
	color: #fff;
	padding: 20px;
	transition: transform 0.3s ease;
	transform: translateY(100%);
	touch-action: none; /* bloqueia gestos nativos */
}

.filter-modal.visible {
	transform: translateY(0);
}


/* Ativa o modal */
.filter-modal.visible {
    height: 50vh;
    opacity: 1;
    visibility: visible;
}

/* Barra de arraste no topo */
.filter-modal .drag-handle {
    width: 50px;
    height: 6px;
    background-color: #ccc;
    border-radius: 3px;
    margin: 0 auto 10px auto;
    cursor: grab;
    transition: background-color 0.3s;
}

.filter-modal .drag-handle:active {
    cursor: grabbing;
    background-color: #aaa;
}

.drag-handle {
    position: relative;
    width: 100%;
    height: 20px; /* altura visível */
    background: #ccc;
    border-radius: 10px;
    margin: 0 auto;
}

/* Aumenta a área de toque sem mudar o visual */
.drag-handle::before {
    content: "";
    position: absolute;
    top: -20px; /* 20px acima do elemento */
    left: 0;
    width: 100%;
    height: 60px; /* área de toque */
    background: transparent;
}

.filter-body {
    max-height: 50vh; /* ou altura que preferir */
    overflow-y: auto;
    padding-right: 8px; /* evita scroll colado na borda */
}


.filter-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.filter-form-cell {
    flex: 1 1 100%; 
    display: flex;
    flex-direction: column;
    overflow: visible;
    margin-left:10px;
    margin-right:10px;
    margin-top:0px;
}

.filter-form-cell input, .filter-form-cell select{
    width: 100%;
    height:50px !important;
    margin-right:10px;
    /* border: 1px solid #444; */
    background-color: #131a20 !important;
    color: var(--color);
    font-size: 16px !important;
}

.filter-form-cell select{
    width: calc(100% + 5px);
    height:45px;
}

.filter-form-cell input:focus, .filter-form-cell select:focus{
    outline:none;
    border: 1px solid #1a54a6;
    box-shadow: 0 0 0 4px rgba(26, 84, 166, 0.3);
    background-color: #111a23;
}

.filter-form-label {
    text-align: left;
    font-size: 14px;
    color: var(--color);
    margin-bottom: 5px;
    letter-spacing: 1.5px;
   
}

/* CSS PARA ADICIONAR X NOS INPUT FILTER */

.input-clear-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-clear-wrapper input {
    width: 100%;
    padding-right: 28px;
    box-sizing: border-box;
}

.clear-btn {
    right:5px;  
    position: absolute;
    font-family: Arial Black;
    background:  transparent  !important;
    color: #1a54a6 !important; 
    border: 2px solid var(--light);
    border: 1.5px solid #1a54a6;
    box-shadow: 0 0 0 3px rgba(26, 84, 166, 0.3);

    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 18px;
    font-weight: bold;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    opacity: 0.8;
    padding: 0;
    top: 30px;
    transition: background 0.2s, opacity 0.2s;
    border-radius: 50px !important;
}

.clear-btn-right {
	right: 17.5px;
    top:15px;
}

.clear-btn-left {
	left: 20px;
    top:15px;
}

.clear-btn:hover {
    background: #666;
    opacity: 1;
}

.range-date {
    display: flex;
    width: 100%;
    align-items: center;
}

.range-date input[type="date"],.range-date input[type="number"] {
    flex: 1 1 0;
    font-size: 14px !important;
    padding: 2.5px 12px;
    padding-left: 22px;
    padding-right: 22px;
    background-color: #131a20 !important;
    z-index: 100;
    border: none;
    color: var(--color);
    margin: 0;
}

.range-date span {
    flex: 0 0 auto;
    font-size: 13px;
    min-width: 30px;
    padding: 0px 12px;
    color: var(--color);
    background-color: #131a20;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: none;
    margin: 0;
}

/* RANGE DA QUANTIDADE */

.cell-form.cell-quantity {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cell-form.cell-quantity .qty-input {
    width: 100px;
    text-align: center;
}

.cell-range {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-range div {
    background-color: #262f3d;
    color:var(--light);
    padding:11px;
    z-index:0;
    font-weight: bold;
    font-size:20px;
    padding-left: 20px;
    padding-right: 20px;
    border:1px solid #2a323a;
}


.cell-range input {
    width:50% !important;
    z-index:1;
}

.cell-range .clear-btn-left {
    left: 90px;
    top:10px;
    z-index:2;
}

.cell-range-number{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:7px;
   
    
}

.cell-range-number div{
    display:flex;
    border:1px solid #576574;
    width:65px;
    height:30px;
    text-align: center;
    align-items: center;
    justify-content: center;
    color:#576574; 
    border-radius: 5px;;
}

/* FORMULARIOS DE INCLUIR/ALTERAR */

.body-mobile{
    margin-top:60px;
    height:calc(100dvh - 65px - 50px - 10px);
    /* height:calc(100vh - 65px - 50px - 50px); */
    overflow: auto;
}

.body-mobile.has-footer { 
    height:calc(100vh - 60px - 142px - 18px);
}

.body-mobile.has-header { 
    margin-top: 120px; 
    height:calc(100vh - 65px - 60px - 52px - 15px);
}

.body-mobile input{
    width:100%;
    height:47.5px;
    background-color: #111a23;
    font-size:18px;
    color:var(--color); 
}

.body-mobile select{
    height:47.5px;
    background-color: #111a23;
    width: calc(100% );
    padding-right: 10px;
    padding-left: 10px;
    font-size:18px;
}

.body-mobile input[type=NUMBER]{
    text-align: right !important;
    font-size:16px;
}

.body-mobile input[type=DATE]{
    font-size:16px
}

.body-mobile input:focus, .body-mobile select:focus{
    outline:none;
    border: 1px solid #1a54a6;
    box-shadow: 0 0 0 4px rgba(26, 84, 166, 0.3);
    background-color: #111a23;
}

.row-form{
    display: grid;
    grid-template-columns: 30% 65%;
    height:56px; 
    width: calc(100% - 40px);
    font-size:14px;
    background-color: var(--row-form);
    margin-left:20px;
    margin-right:20px;
}

.row-form:first-child{
    padding-top:15px;
    margin-top:25px;
    border-radius:8px 8px 0px 0;
}

.row-form:last-child{
    margin-bottom:15px;
    border-radius:0px 0px 8px 8px !important; 
}

.cell-form{
    display: flex;
    justify-content: center;
    flex-direction: column;
    color:white; 
    color:var(--color);
    align-items: end; 
    padding: 10px;

}

.cell-form:first-child{
    align-items: baseline;  
    margin-left:15px
}

.cell-search span{
   position: relative;
   top:8px;
}

.cell-search div{
    /* background-color: #111a23; */
    position: relative;
    left: 50px;
    top: -10px;
    padding-left: 10px;
    padding-right: 10px;
    
}

.cell-search i{
    font-size: 22px;
}

.item-grid{
    margin:15px;
    padding:15px;
    background-color: #1d242f;
    border-radius: 5px;
    text-align: center;
}


@media screen and (max-width: 920px) {
    .row-form{
        height:70px; 
        font-size:14px;
        margin-left:20px;
        margin-right:20px;
        width: calc(100% - 40px);
        background-color: transparent;
        background-color: var(--grid);
        letter-spacing: 1.25px;
    }
    .row-form:last-child{
        padding-bottom:20px !important;
        height: 40px;
        border-radius:0px 0px 8px 8px !important; 
    }

    .row-form input{
        width:calc(100% - 20px);
        padding-right: 10px;
        padding-left:10px; 
    }

}

/* INICIO CUSTOMIZAÇÕES DE BOTÕES */

.footer-fixed-mobile-2 {
    background-color: #131a20;
    border-top: 3px solid var(--menu);
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    z-index: 9999;
    display: flex;
}

.footer-fixed-mobile-2 button {
    width: 70%;
    height: 45px;
    margin-top: 20px !important;
    position: relative; /* necessário para o ícone se posicionar dentro */
    text-align: center;  /* centraliza o texto */
    font-size: 16px;
}

.footer-fixed-mobile-2 button:first-child {
    margin-left:20px;
    margin-right:20px;
}

.footer-fixed-mobile-2 button:last-child {
    margin-right:20px;
}

.footer-fixed-mobile-2 button i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    pointer-events: none;
}


.painel-mobile button{
    text-align: center;
    margin-top:7.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; 
    background-color: var(--header); 
    color: var(--color); 
    border-radius: 4px;
    transition: background-color 0.3s;
}

.btn-mobile{
    font-size:16px;
    letter-spacing: 1.5px;
 
}

.btn-mobile-primary{
    border:2px solid #17478a;  
    background-color: #102a4e !important; 
    color:#5d96e6 !important;  
}

/* .btn-mobile-primary:hover{
    background-color:#1868aa !important; 
} */

.btn-mobile-neutral{
    border:2px solid #263141 ; 
    background-color:#232e41 !important; 
}

.btn-mobile-neutral:hover{
    background-color:#28354b  !important; 
}

.btn-mobile-outline{
    border:2px solid #2f3a4b ; 
    background-color:transparent !important; 
    color:#556275   !important;
}

.btn-mobile-outline:hover{
    background-color:#28354b  !important; 
 }

.btn-mobile-light{
    background-color:#81cfff !important;
    border:2px solid #81cfff ;
    color:#111a23 !important;
}

.btn-mobile-outline-light{

    border:2px solid #81cfff ;
    color:#81cfff  !important;
}

.btn-mobile-danger{
    /* color:#311616 */
    border: 2px solid #832727;
    background-color: #442121 !important;
    color:#df9d9d;
    
}

/* FIM FORMULÁRIOS */
/* INICIO MODAL */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(255, 255, 255, 0.15); 
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
 
.modal-mobile{
    display: flex; 
    flex-direction: column; 
    width: 400px;
    height: 100%;  
    background-color: #131a20;
    background-color: var(--modal-content); 
    z-index: 9999;
    max-height: 490px;  
}

.modal button{
    width: calc(100% - 10px);
    opacity: 1;
}

.modal-mobile select{
    height:35px;
    width:calc(100% - 5px);  
    border:0; 
    color:var(--color);
    background-color: rgba(255,255,255,0.05);
    margin-top:10px;
    margin-bottom:10px;
}

@media screen and (max-width: 920px) {
    .modal {
        align-items: center;
    }

    .modal-content { 
        width: 90%; 
        height:80%;  
    }
    .modal-mobile{
      width: 375px; 
    }

}

.modal-mobile-header, .modal-mobile-footer {
    height: 50px; 
    flex-shrink: 0;
    display: flex; 
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.modal-mobile-header{
    background-color: var(--header-modal);
    color:vaR(--color);
    font-weight: bold;
    font-size:14px;
    letter-spacing: 1.0px;
    position: relative;
}
 
.modal-mobile-body {
    flex: 1; 
    overflow-y: auto;  
    align-items: center;
}

.modal-mobile-footer{
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
}

/* FIM MODAL */
/* INICIO CALENDÁRIO */

.months-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(4, 50px); 
    gap: 10px; 
    padding: 5px; 
    margin: 0 auto;
    margin: 15px;
    gap: 15px; 
}
 
.months-grid div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--button);
    color: #ffffff; 
    font-size: 14px;
    border-radius: 5px; 
}

.months-grid-active{
    border:1px solid #1f6bd8; 
    background-color: #112c53 !important; 
}

.close-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 22px;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.close-icon:hover {
    opacity: 1;
}

/* FIM CALENDÁRIO */

.cards-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* duas colunas */
    grid-template-rows: repeat(9, 2fr); /* duas colunas */
    gap: 20px 10px; 
    border-radius: 5px;
    padding:15px;
    margin-top: 60px;
    color:var(--color);
}

.cards-list-item {
    background-color: #1c2a3b;
    border-radius: 6px;
    border-left: 7px solid #0e2f5c;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    text-align: center;
    height: auto; 
}

.cards-list-item label {
    font-weight: bold;
    margin-bottom: 10px;
}

.cards-values {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    flex: 1;
    font-size:14px;
}





/* ANIMAÇÕES*/

 
/* here we customize the transition, these are the shared styles for the old and new view*/      

::view-transition-new(root),
::view-transition-old(root) {
    animation-duration: 300ms;
    animation-timing-function: ease-out;
    animation-direction: normal;
}

/* old view slides out to the left */
::view-transition-old(root) {
  animation-name: slide-out;
}

/* new view slides in from the right */
::view-transition-new(root) {
    animation-name: slide-in;
    mix-blend-mode: normal;
}

/* class "back-transition" is added to the html element 
 * to customize the back transition 
 * new view
 */
.back-transition::view-transition-new(root) {
    animation-name: slide-out-reverse;
}

/* customized back transition for old view */
.back-transition::view-transition-old(root) {
    animation-name: slide-in-reverse;
    mix-blend-mode: normal;
    z-index: 1;
}

@keyframes slide-out {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-20%);
    }
}

@keyframes slide-out-reverse {
    from {
        transform: translateX(-20%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slide-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slide-in-reverse {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}  


/* ================= TRANSIÇÃO SCALE ================= */

.scale-transition::view-transition-new(root),
.scale-transition::view-transition-old(root) {
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
    animation-fill-mode: both;
}

.scale-transition::view-transition-old(root) {
    animation-name: scale-out;
}

.scale-transition::view-transition-new(root) {
    animation-name: scale-in;
}

/* ================= KEYFRAMES ================= */

/* Slide padrão */
@keyframes slide-out {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-20%);
    }
}

@keyframes slide-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Slide reverso */
@keyframes slide-out-reverse {
    from {
        transform: translateX(-20%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slide-in-reverse {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* Scale */
@keyframes scale-out {
    from {
        opacity: 1;
        transform: scale(0.9);
    }
    to {
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* CUSTOMIZAÇÕES ALINHAMENTO TABLES */

 @media (max-width: 920px) {
     
     .table-data th,.table-data td{
         text-align: right;
         height:35px;
         font-size:14px;
    }
        
    .table-data th{
        font-size:14px;
        /* background-color: #29364d; */
        height:40px;
    }

    .table-data th:nth-child(1),.table-data td:nth-child(1){
        text-align: left;
    }

} 

.year-row-list{
    display: grid;
    grid-template-columns: 36% 36% 30%;
    gap: 0px;
    align-items: center; 
    margin: 4px 0;
}

.year-cell-list {
    padding: 6px 6px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.year-cell-list:nth-child(2){
    text-align: center;
}

.year-cell-list:last-child{
    text-align: right;
    margin-right:10px;
}

/* HISTORY */

.history-row-list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0px;
    align-items: center; 
    margin: 4px 0;
}

.history-row-list.row-2 {
    grid-template-columns: 1fr 1fr;
}

.history-row-list.row-4 {
    grid-template-columns: 1fr 1fr 1fr 5px;
}

.history-row-list.row-4 .history-cell-list:nth-child(3){
    text-align:right;
    margin-right:10px;
}

.history-row-list.line{
    border-top:1px solid #CBD2D529;
    margin-top:10px;
    padding-top: 10px;
}

.history-cell-list{
    font-size:14px;
    text-align: center;
}

.history-cell-list i {
   position: relative;
   top: 10px;
} 

.history-cell-list:first-child{
    text-align: left;
    margin-left:15px;
}

.history-cell-list:last-child{
    text-align: right;
    margin-right:15px;
}

.history-cell-list.ticket{
    color:#fff; 
    font-weight: bold;
    font-size:18px
}

.history-cell-list.title{
font-size:12px;
}

.transactions-row-list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    align-items: center; 
    margin: 15px;
}

.transactions-cell-list{
    font-size:14px;
    text-align: center;
    background-color: #1e252b;
    border-radius: 5px;
    padding:10px;
    white-space: nowrap;
}

.transactions-cell-list.title{
    color: white;
    font-weight: bold;
    font-size:14px;
}



.bdi-row-list {
    display: grid;
    grid-template-columns: 65px 1fr 1fr 70px; /* ajuste conforme o espaço desejado */
    gap: 4px;
    align-items: center;
    margin: 4px 0;
}

.bdi-cell-list {
    padding: 4px 6px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.bdi-cell-list:nth-child(3),
.bdi-cell-list:nth-child(4) {
    text-align: right;
}


#table-current-mobile th:nth-child(2),
#table-current-mobile td:nth-child(2),
#table-current-mobile th:nth-child(3),
#table-current-mobile td:nth-child(3){
    text-align: left;
}

#table-custody-mobile th:nth-child(2),
#table-custody-mobile td:nth-child(2){
    text-align: center;
}

#table-paineis-mobile-cards-swingtrade td, #table-paineis-mobile-cards-swingtrade th ,
#table-paineis-mobile-cards-daytrade   td, #table-paineis-mobile-cards-daytrade th ,
#table-paineis-mobile-cards-earnings   td, #table-paineis-mobile-cards-earnings th {
   padding-right: 10px;
}

#table-paineis-mobile-cards-swingtrade td:first-child, #table-paineis-mobile-cards-swingtrade th:first-child ,
#table-paineis-mobile-cards-daytrade   td:first-child, #table-paineis-mobile-cards-daytrade th:first-child ,
#table-paineis-mobile-cards-earnings   td:first-child, #table-paineis-mobile-cards-earnings th:first-child {
  padding-left: 10px;
}

#table-paineis-mobile-cards-swingtrade td:last-child, #table-paineis-mobile-cards-swingtrade th:last-child ,
#table-paineis-mobile-cards-daytrade td:last-child, #table-paineis-mobile-cards-daytrade th:last-child ,
#table-paineis-mobile-cards-earnings td:last-child, #table-paineis-mobile-cards-earnings th:last-child {
  padding-right: 10px;
}

#table-paineis-mobile-cards-swingtrade td:nth-child(2), #table-paineis-mobile-cards-swingtrade th:nth-child(2) ,
#table-paineis-mobile-cards-daytrade td:nth-child(2), #table-paineis-mobile-cards-daytrade th:nth-child(2) ,
#table-paineis-mobile-cards-earnings td:nth-child(2), #table-paineis-mobile-cards-earnings th:nth-child(2) {
   text-align: left;
}


/* Estilo para a primeira coluna */
.row-fixed th:nth-child(1),.row-fixed td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: inherit; /* herdará do tr */
}

.row-fixed th:nth-child(1){
    background-color: #1f242b;
    z-index: 3;
}

.row-fixed tr:nth-child(even){
  background-color: #313941;
}

.row-fixed tr:nth-child(odd) {
  background-color: #242b33;
}

#grid-custody, #grid-profitday,#grid-profitmonth, #grid-profityear, #grid-history{
    padding-bottom:65px;
} 

#chart-profitday, #chart-profitmonth, #chart-profityear, #chart-history-details, #chart-history, #chart-transactions{
  width: 100%;
  height: 60vh;
  min-height: 400px;
} 

#chart-custody, #chart-custody-2, #chart-custody-3, #chart-custody-web, #chart-profitday-web, #chart-profitmonth-web,#chart-profityear-web, #chart-history-web {
  width: 100%;
  height: 65vh;
  min-height: 400px;
} 

#chart-custody-web{
    margin-top:30px;
}
#chart-profitday-web,#chart-profitmonth-web {
    margin-top:20px;
}

.home-chart-quotes, .home-chart-earnings, .home-chart-options{
   margin-top:-10px;
   width: 100%;
   height: 32dvh;
   
}


/* HOME */


    

.search {
    display: flex;
    align-items: center;
    height: 60px;
    background: #1f242b;
}

.search input{
    width:calc(90% - 6px - 40px);
    height:calc(100% - 10px - 20px);
    background: #1f242b;
    text-transform: uppercase;
    letter-spacing: 1.75px;
    font-weight: bold;
    font-size:16px;
    padding:10px;
    color:white;
}

.search input:focus{
    background-color: #111a23;
}

.search input::placeholder {
    text-transform: none; /* Placeholder em minúsculas */
    font-size:15px;
    letter-spacing:1.0px;
    color:#4C5153;
}

.search span{
    width:10%;
    text-align: center;
    padding:10px; 
}

@media (min-width: 920px) {
    .search {
        margin-top:25px;    
        border: 3px solid #262f3d;
        height: 55px;
    }

    .search span {
        width: 5% ;
    }

    .search input {
        width: calc(95% - 6px - 40px);
    }

}

#home-ticker-earnings-table th:nth-child(2),
#home-ticker-earnings-table td:nth-child(2),
#table-home-splits th:nth-child(2),
#table-home-splits td:nth-child(2){
    text-align: left;
}

#home-ticker-options-table th:first-child,
#home-ticker-options-table td:first-child{
    padding-left:7.5px;
}

#home-ticker-options-table td:last-child{
    padding-right:2.5px;
}

#home-ticker-options-table th,
#home-ticker-options-table td{
    text-align: center;
}

#home-ticker-options-table th:first-child,
#home-ticker-options-table td:first-child{
    text-align: left;
}

#home-ticker-option-table th:first-child,
#home-ticker-option-table td:first-child{
    padding-left:10px;
} 


.home-header{
    top:0;
    display: grid;
    height: 60px;
    grid-template-columns: 70px 1fr 70px;
    background-color: var(--header-mob);
    font-size:20px;
    position: fixed;
    width: 100%;
}

.home-header div{
    display:flex;
    align-items: center;
    justify-content: center;
    color:white;
}

.home-header div:first-child{
    margin-right:15px;
}

.home-header div:nth-child(2){
    font-weight: bold;
}

.home-header div:last-child{
    white-space: nowrap;
    display:grid;
    text-align: right;
    margin-right:20px;
}

.home-header div:last-child label{
    margin-top:8px;
    font-weight: bold;
    font-size:18px;
}

.home-header div:last-child span{
     margin-top:-10px; 
    font-size:12px; 
}

.home-chart-range{
    margin:115px 25px 0 25px;
    height:35px;
    padding:10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap:10px;
    font-size:14px;
}

.home-chart-range div{
    border-radius: 5px;;
    border:1px solid #262f3d;
}

.home-chart-range div{ 
    display:flex;
    align-items: center;
    justify-content: center;
}

.home-chart-range div.active{ 
    border:1px solid #1f6bd8; 
    background-color: #112c53;
    color:#5d96e6;
}

.home-table{
    position: fixed;
    height:41dvh;
    overflow-y: auto;
    width: 100%;
    z-index: 9999;
    min-height: 41dvh;
} 

@media screen and (min-width: 920px) {
    .home-table{
        display: contents;
    }
}


.home-table.large{
    height:50dvh;
    min-height:50dvh;
}

.home-table.large table{
    min-height: 48vh;
}

.home-body{
    margin-top:55px;
    height: calc(100dvh - 65px - 60px - 57px);
    overflow-y: auto;
}

.home-body h2{
    font-size:22px;
    text-align: center;
    margin-top: 0;
}

.home-cards-list {
    display: flex;
    flex-wrap: nowrap;           
    gap: 20px 10px;
    border-radius: 5px;
    padding: 15px;
    padding-top: 5px; 
    color: var(--color);
    overflow-x: auto;             
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; /* Firefox */
}

.home-cards-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.home-cards-list-item {
    background-color: #1c2a3b;
    border-radius: 6px;
    border-left: 7px solid #0e2f5c;
    padding: 10px 0 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    text-align: center;
    height: auto; 
    flex: 0 0 calc((100% / 3) - 14px); 

}



.home-cards-list-item label {
    font-weight: bold;
    margin-bottom: 5px;
    font-size:13px;
}

.home-cards-list-item span {
    font-size:12px;
}

.home-cards-list-item.tsd span {
    font-size:18px;
    font-weight: bold;
}

.home-cards-list-item.ind span {
    font-size:13px;
    font-weight: normal;
}

.home-cards-prices-list{
    height:7dvh;
    display: flex;
    flex-wrap: nowrap;           
    gap: 20px 10px;
    border-radius: 5px;
    padding: 10px;
    padding-top:0px;
    color: var(--color);
    overflow-x: auto;             
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; /* Firefox */
}

.home-cards-prices-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.home-cards-prices-item {
    background-color: #1c2a3b;
    border-radius: 6px;
    border-left: 7px solid #0e2f5c;
    padding: 5px 0 5px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    text-align: center;
    height: auto; 
    flex: 0 0 calc((100% / 4) - 5px); 

}

@media screen and (min-width: 920px) {
    .home-cards-prices-list {
        scrollbar-width: auto;
        margin-top: 20px;
        margin-bottom: 25px;
    }

    .home-cards-prices-item {
        flex: 0 0 calc((100% / 11) - 16px) !important; 
    }
}

.home-cards-prices-item.high {
    border-left: 7px solid var(--positive);
}

.home-cards-prices-item.low {
    border-left: 7px solid var(--negative);
}

.home-cards-prices-item label{
    margin-top:2.5px;
    font-size:13px;
    font-weight: bold;
}
.home-cards-prices-item span{
    font-size:12px;
}

.home-expiration-range{
    margin:120px 0px 0 10px;
    padding:10px;
    height:4dvh;
    display: flex;
    flex-wrap: nowrap;           
    gap: 20px 10px;
    border-radius: 5px;
    padding: 10px;
    padding-top:0px;
    color: var(--color);
    overflow-x: auto;             
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; /* Firefox */
    font-size:12px;

}

.home-expiration-range div{
    border-radius: 5px;
    border:1px solid #262f3d;
    flex: 0 0 calc((100% / 5) - 10px); 
    
}

.home-expiration-range div{ 
    display:flex;
    align-items: center;
    justify-content: center;
}

.home-expiration-range div.active{ 
    border:1px solid #1f6bd8; 
    background-color: #112c53;
    color:#5d96e6;
}



.table-fixed-header {
    border-collapse: collapse; /* ou keep collapse mas veja spacing */
    border-spacing: 0;
}

.table-fixed-header thead th {
    position: sticky;
    top: 0;
    z-index: 5000;  
    padding-top:2.5px;
    padding-bottom:2.5px;
}