/* Bootstrap Icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

.bi-arrow-bar-up {
    font-size: 1.1rem;
    font-weight: 800;
    color: #31c943; /* Verde oscuro profesional */
}

.bi-arrow-bar-down {
    font-size: 1.1rem;
    font-weight: 800;
    color: #e98940; /* Rojo sobrio */
}

.bi-currency-bitcoin {
    font-size: 1.5rem;
    color: #ffc107; /* Dorado elegante */
}

.container-fluid {
    max-width: 100%;
}

/* Body Styles */
body {
    color: #c6c6c6; /* Texto en gris oscuro */
    background-color: #1f2124; /* Fondo claro y limpio */
}
table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    vertical-align: middle;
}

table#resumenTable {
    overflow-x: auto;
}
th, td {
    text-align: center;
    border: 1px solid #647b89; /* Bordes suaves y elegantes */
}
td.binance {
    border-left: 4px solid #e2b007; /* Línea izq sólida en amarillo dorado */
    color: #e2b007;
}
td.bitget {
    border-left: 4px solid #007bff; /* Azul corporativo */
    color: #007bff;
}
td.quantfury {
    border-left: 4px solid #17a2b8; /* Azul corporativo */
    color: #17a2b8;
}
td.totales {
    border-left: 4px solid #698088cb; /* Azul corporativo */
}
.table {
    box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.4);
}
/* Forms */
.btn {
    box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    font-weight: 500;
}
/* Color de fondo que identifica a los Exchanges */
.binance {
    background-color: transparent; /* Fondo transparente */
    color: #e3e3e3;
    font-weight: 600;
    text-align: center;
}
.bitget {
    background-color: transparent; /* Fondo transparente */
    color: #ffffff;
    font-weight: 600;
    text-align: center;
}
.quantfury {
    background-color: transparent; /* Fondo transparente */
    color: #ffffff;
    font-weight: 600;
    text-align: center;
}
.btc_price {
    background-color: #212529; /* Negro elegante */
    color: #ffc107;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

/****** Details Section *********/
.header {
    background-color: #245776; /* Azul corporativo */
    color: white;
}
.sub-header {
    background-color: #2d2d2d; /* Gris profesional */
    font-weight: 700;
    color: white;
}
td.long {
    border-left: 12px solid #30c853;
    color: #30c853;
    font-weight: 700;
}
td.short {
    border-left: 12px solid #dc9435;
    color: #dc9435;
    font-weight: 700;
}
.entry-header {
    background-color: #e9ecef; /* Gris claro elegante */
    text-align: center;
}
.sl-projection {
    background-color: #f8d7da;
    color: #721c24; /* Rojo alerta */
}
.tp-projection {
    background-color: #d4edda;
    color: #155724; /* Verde éxito */
}
.table-bordered td, .table-bordered th {
    border: 1px solid #3f4b57;
}
.vertical-header-table th {
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
}
.vertical-header-table td {
    text-align: center;
}
.highlight-row td {
    font-weight: bold;
    background-color: #f1f3f5; /* Fondo gris claro */
}
.badge-info {
    font-size: 18px;
    color: #0056b3; /* Azul serio */
}

/*  Colores de texto según direccion de la operacion */
.long {
    color: #31c943; /* Verde éxito */
}
.short {
    color: #e98940; /* Rojo pérdida */
}

/*  Colores de texto según PnL */
.profit {
    color: #31c943; /* Verde éxito */
}
.loss {
    color: #e98940; /* Rojo pérdida */
}

/* Información en pantalla */
.info {
    background-color: #f8f9fa;
    color: #495057; /* Gris elegante */
}

/* Resumen de Ordenes */
.resumen {
    font-weight: 500;
    font-size: 16px;
    color: #e3e3e3; /* Texto oscuro serio */
}

.price_update_time {
    font-weight: 600;
    font-size: 14px;
    color: #b0b0b0; /* Gris neutro */
}

/*  Progress Bars  */
.progress-bar {
    -webkit-appearance: none;
    appearance: none;
    background: #377cc6; /* Azul corporativo */
}

/* Estilo para Margen y Volumen, colores. */
.margen_totals_dashboard {
    font-weight: 400;
    font-size: 1rem;
    color: #b094ff; /* Gris neutro */
}
.volume_totals_dashboard {
    font-weight: 400;
    font-size: 1rem;
    color: #5acdfe; /* Gris neutro */
}

/** Estilo de Sub y Sobre rayado para profit y loss */
.subrayado {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: rgb(8, 187, 8);
  }
  
.sobrerayado {
    text-decoration: overline;
    text-decoration-thickness: 2px;
    text-decoration-color: rgb(197, 134, 7);
}

/** Estilos de Sesiones de Mercado */
.market-table th, .market-table td {
    padding: 4px;
    font-size: 1rem;
    border: 1px solid #647b89; /* Bordes suaves y elegantes */
    /* white-space: nowrap; */
  }

.bg-sesiones-asia {
    background-color: #657c87bd;
}

.bg-sesiones-londres {
    background-color: #50639f9a;
}

.bg-sesiones-ny {
    background-color: #755bb888;
}

.hour-block {
    background-color: #343434;
    border: 1px solid #647b89; /* Bordes suaves y elegantes */
    color: white;
}

.hour-block.active {
    background-color: rgba(229, 224, 117, 0.829) !important;
    color: black !important;
    font-weight: bold;
}

.compact {
    margin-bottom: 0;
}

/* Estadisticas */
#pnlChart {
    background-color: #121212;
    border-radius: 6px;
    padding: 10px;
}

#volumenChart {
    background-color: #121212;
    border-radius: 6px;
    padding: 10px;
}

/* ***  CSS STYLES FOR CHECKBOXES ON THE DASHBOARD  *** */
.custom-checkbox-container {
  display: block;
  position: relative;
  padding-left: 15px; /* Adjust as needed for spacing */
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.hidden-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox (the black background) */
.checkmark {
  /* position: absolute; */
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  /* background-color: black;  Black background */
  /* border: 1px solid #555; Optional: subtle border */
}

/* On hover, add a slightly lighter background color */
.custom-checkbox-container:hover .hidden-checkbox ~ .checkmark {
  background-color: #333;
}

/* When the checkbox is checked, add a green background */
.custom-checkbox-container .hidden-checkbox:checked ~ .checkmark {
  background-color: black; /* Keep black background when checked */
}

/* Create the checkmark (green) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.custom-checkbox-container .hidden-checkbox:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark */
.custom-checkbox-container .checkmark:after {
  left: 15px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid green; /* Green checkmark */
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Left Side Mini-Dashboard Styles */
#in_loss, #in_profit, #check_pnl {
    font-size: 22px;
    font-weight: bold;
    vertical-align: middle;
}

/* Master Dashboard styles */
.picked_row {
    color: black; /* Sets the font color to black */
    background-color: #4397b8; /* Sets the background color to a medium purple (Blue Violet) */
    font-size: 22px;
    font-weight: bold;
    vertical-align: middle;
}

/* Notifica cuando el % de pnl es menor a 10% */
.alert_td {
  background-color: #ff9d0a82; /* Light orange for warning */
  color: #3f1905; /* Darker orange for text */
  font-weight: bold;
}