@import 'styles_config';

.programs_pnl_content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

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

  width: 190px;

  border: $LAYER2_BORDER;
  background: $LAYER2_BG;
  color: $LAYER2_FG;
  text-decoration: none;

  margin: 4px;

  &:hover {
    background: $COL_COMPLEXHOVER_BG;
    color: $COL_COMPLEXHOVER_FG;
    border: 1px solid $COL_COMPLEXHOVER_BRD;

    .programs_pnl_center { color: $COL_COMPLEXHOVER_FG; }
    .programs_pnl_bottom { background: $COL_COMPLEXHOVER_BG; border-top: 1px solid $COL_COMPLEXHOVER_BRD; }
    .programs_pnl_img img { filter: grayscale(100%); }
  }
}

.programs_pnl_img {
  display:flex;
  flex-direction: column;
  justify-content: flex-start;

  margin: 4px;
}

.programs_pnl_img img {
  width: 100%;
  height: auto;
}

.programs_pnl_center {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  text-align: center;

  color: $LAYER2_FG;
  font-weight: bolder;
  font-size: 15pt;

  flex-grow: 1;

  margin: 0 2px;
}

.programs_pnl_bottom {
  background: $LAYER2_HEADER_BG;
  border-top: 1px solid transparent;

  display: flex;
  flex-direction: row;
}

.programs_pnl_bottom_1, .programs_pnl_bottom_2 {
  flex-grow: 1;
  text-align: center;

  display:flex;
  flex-direction: column;
}

.programs_pnl_bottom_sub_top {
  color: $LAYER2_FG_LIGHT;
}

.programs_pnl_bottom_sub_bot {
  color: $LAYER2_FG;
  font-weight: bolder;
}

@include rdmedia_range(0,1) {

  .programs_pnl_entry {
    width: 100%;
  }

  .programs_pnl_bottom_sub_top {
    margin-left:  4px;
    margin-right: 6px;
  }

  .programs_pnl_bottom_1, .programs_pnl_bottom_2 {
    flex-direction: row;
  }

}