@import 'styles_config';

.euler_pnl_base {
  display: inline-flex;
  flex-direction: column;

  border: 1px solid #AAA;
  border-radius: 5px 5px 0 0;
  margin: 15px;
}

.euler_pnl_header {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 4px;
  background: #AAA;
}

.euler_pnl_header a {
  color: #222;
  text-decoration: none;


  font-family: $FONT_HEADER;
  font-size: 22px;
  font-weight: 900;
}

.euler_pnl_header a:hover {
  text-decoration: underline;
}

.euler_pnl_content {
  display: flex;
  flex-direction: column;

  background: #DDD;

  padding: 6px;
}

.euler_pnl_row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

@media (max-width: 850px) { .euler_pnl_row { flex-direction: column; } }

.euler_pnl_row2 {
  display: flex;
  flex-direction: row;
}

.euler_pnl_cell {
  width: 24px;
  height: 24px;
  font-size: 11px;

  margin: 3px;

  border: 1px solid #333;

  display: flex;
  align-items: center;
  justify-content: center;
}

.euler_pnl_cell:hover {
  box-shadow: 0 0 4px #000000;
}

.euler_pnl_cell a {
  color: black;
  text-decoration: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.euler_pnl_cell a:hover {
  color: black;
  text-decoration: none;
}

.euler_pnl_cell a:visited {
  color: black;
  text-decoration: none;
}

.euler_pnl_celltime_perfect { background: #98C398; }
.euler_pnl_celltime_good    { background: #B9D89B; }
.euler_pnl_celltime_ok      { background: #D8D898; }
.euler_pnl_celltime_bad     { background: #D8B298; }
.euler_pnl_celltime_fail    { background: #D89D9D; }
.euler_pnl_cell_notexist    { background: #CCCCCC; }