opt-cc/static/src/app/statistic/war/war-list/war-list.component.scss

.list-header {
  border-bottom: 1px solid #dadada;
  border-right: 1px solid #dadada;
  border-left: 4px solid transparent;
  padding: 25px;
  font-size: 16px;
  text-transform: uppercase;
  color: #333333;
  cursor: pointer;
}

.list-header:hover, .selected {
  background: linear-gradient(80deg, white 0%, #e7e7e7 120%);
}

.list-header-battles {
  border-bottom: 1px solid #dadada;
  border-right: 1px solid #dadada;
  border-left: 4px solid transparent;
  padding: 25px;
  font-size: 16px;
  text-transform: uppercase;
  color: #333333;
  border-bottom: 1px solid #f1f1f1;
}

.mat-icon {
  color: #666666;
  vertical-align: middle;
  margin-right: 5px;
}

.select-indicator-container {
  display: none;
  position: relative;
}

.select-indicator {
  width: 29px;
  height: 29px;
  position: absolute;
  left: calc(100% + 11px);
  background: -moz-linear-gradient(45deg, white 50%, transparent 50%);
  background: -webkit-linear-gradient(45deg, white 50%, transparent 50%);
  background: linear-gradient(45deg, white 50%, transparent 50%);
  box-shadow: inset 8px -6px 5px -7px #a5a5a5;
  cursor: default;
  border-left: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.battle-list {
  max-height: calc(100vh - 353px);
  padding-left: 5px;
  margin-left: 10%;
  overflow-y: auto;
  overflow-x: hidden;
  direction: rtl;
}

.battle-list * {
  direction: ltr;
}

.selected > div.select-indicator-container {
  display: block !important;
}

.war-list-header {
  margin: auto;
  padding: 15px 5px 5px;
  border-right: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
}

.war-list-header > button {
  background: white;
  font-weight: 700;
  color: #3e3e3e;
  margin: 0 10px 10px 10px;
  width: 95%;
}

.fill-vertical-border {
  position: fixed;
  border-right: 1px solid #dadada;
  height: 100vh;
  top: 0;
  left: calc(20% - 1px);
  z-index: -1;

  &.collapsed {
    left: 0;
  }

  @media all and (max-width: 959px) {
    display: none;
  }
}

.war-select-small {
  background: #424242;
  height: 3em;
  color: #9d9d9d;
  text-align: center;

  .select-menu-text {
    font-size: 16px;
  }
}

:host /deep/ div.mat-list-item-content {
  height: 100%;
  padding: 10px;
  cursor: pointer;
}


/* Table Scrollbar BEGIN */

.battle-list::-webkit-scrollbar {
  width: 12px;
}

.battle-list::-webkit-scrollbar-track {
  border-left: 1px solid #f1f1f1;
}

.battle-list::-webkit-scrollbar-thumb {
  background: rgb(234, 234, 234);
}

/* Table Scrollbar END */

.collapsed {
  width: 70px;
}