/*
Copyright 2019 LiveSite authors

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 64px;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 32px;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.no-decoration {
  text-decoration: none !important;
  color: inherit !important;
}

/* Workaround bootstrap-material-design color issue */
.switch > label {
  color: inherit !important;
}

/*******************************************************************************
 *
 *  Standard standings
 *
 */

.standings-section {
  position: relative;
}

.standings-section.sticky-heading {
  position: sticky;
  top: 3.5rem; /* the (computed) height of .navbar */
  z-index: 10000;
  background: #fafafa; /* The same color as bootstrap's body background. */
}

.standard-standings {
  line-height: 1.3;
}

.standard-standings .team-row {
  position: relative;
  display: flex;
  border-bottom: 1px solid #ddd;
  transition: background-color 1s linear;
}

.standings-section:last-child .team-row:last-child {
  border-bottom: 1px solid #ddd;
}

.standard-standings .team-row.legend {
  font-weight: bold;
  border-bottom: 1px solid #888;
}

.standard-standings .team-row.footer {
  font-size: 0.8rem;
  border-top: 1px solid #888;
}

.standard-standings .team-row.sticky {
  background-color: #bdbdbd;
}

.standard-standings .team-row.new-solved {
  background-color: #ffd600;
}

.standard-standings .team-row .team-left {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  display: flex;
}

.standard-standings .team-row .team-right {
  flex: 1 0 auto;
  width: 0;
  min-width: 0;
  display: flex;
}

.standard-standings .team-row .team-col {
  display: flex;
  align-items: center;
  margin: 4px 2px;
  position: relative;
}

.standard-standings .team-row .team-mark {
  flex: 0 0 auto;
  width: 20px;
  padding: 6px 2px 4px;
  justify-content: center;
  text-align: center;
  user-select: none;
}

.standard-standings .team-row .team-mark .fa-thumbtack {
  color: #bdbdbd;
  cursor: pointer;
}

.standard-standings .team-row .team-mark .fa-thumbtack.pinned {
  color: #f44336;
}

.standard-standings .team-row .team-rank {
  flex: 0 0 auto;
  width: 32px;
  justify-content: center;
  text-align: center;
}

.standard-standings .team-row .team-score {
  flex: 0 0 auto;
  width: 56px;
  justify-content: center;
  text-align: center;
}

.standard-standings .team-row .team-name {
  flex: 0 0 auto;
  width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.standard-standings .team-row .team-problems {
  flex: 1 1 auto;
  width: 0;
  display: flex;
}

.standard-standings .team-row .team-problems .team-problem {
  flex: 1 0 auto;
  width: 0;
  justify-content: center;
  text-align: center;
}

.standard-standings .team-row .team-problems .team-problem .team-problem-flag {
  position: absolute;
  display: inline-block;
}

.standard-standings .team-name .team-generic-col-content {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.standard-standings .team-name .university-container {
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.standard-standings .team-name .university-container .university-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.standard-standings .team-name .university-container .university-rank {
  font-size: 80%;
  flex-grow: 0;
  margin-left: 0.3em;
}

@media (min-width: 768px) and (max-width: 991px) {
  .standard-standings {
    font-size: 0.8rem;
  }
  .standard-standings .team-row .team-name {
    width: 180px;
  }
}

@media (max-width: 767px) {
  .standard-standings {
    font-size: 0.8rem;
  }
  .standard-standings .team-row .team-col {
    margin: 4px 1px;
  }
  .standard-standings .team-row .team-mark {
    width: 1rem;
  }
  .standard-standings .team-row .team-rank {
    width: 1.4rem;
  }
  .standard-standings .team-row .team-score {
    width: 1.4rem;
  }
  .standard-standings .team-row .team-name {
    flex: 1 1 auto;
  }
  .standard-standings .team-row .team-problems {
    flex: 0 0 auto;
    width: 180px;
  }
  .standard-standings .team-row .team-problem .team-colored-col-fg {
    display: none;
  }
  .standard-standings .team-row.footer {
    display: none;
  }
}

@media (max-width: 420px) {
  .standard-standings .team-row .team-problems {
    width: 120px;
  }
}

.events .event-animation-enter {
  opacity: 0;
}

.events .card {
  margin-bottom: 1px;
  font-size: inherit;
  background-color: rgba(245, 245, 245, 0.9);
  flex: 0 0 auto;
  transition: background-color 1s linear;
}

@media (max-width: 767px) {
  .events {
    display: none !important;
  }
}

@keyframes event-slidein {
  from {
    transform: translate(360px, 0);
  }
  to {
    transform: translate(0, 0);
  }
}

.events .card {
  animation: event-slidein 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.events .card .card-body {
  padding: 2px;
}

.events * {
  user-select: none;
}

.events .event-animation-enter.event-animation-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.events .event-animation-leave {
  opacity: 1;
}

.events .event-animation-leave.event-animation-leave-active {
  opacity: 0;
  transition: opacity 300ms ease-in;
}

.events .bg-pending {
  animation: none;
}

/*******************************************************************************
 *
 *  Standard standings (reveal)
 *
 */

.standard-standings .reveal-row {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1000000;
  pointer-events: none;
}

.standard-standings .reveal-row.animate-table-active {
  transition: transform 0.5s ease !important;
}

.standard-standings .reveal-row .team-row {
  opacity: 0;
}

.standard-standings .reveal-row .reveal-marker {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 0 5px red;
}

/*******************************************************************************
 *
 *  Standings common
 *
 */

.animate-table-active {
  transition: transform 3s ease !important;
}

@keyframes pending-blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.bg-solved {
  background-color: #64dd17;
}

.bg-pending {
  background-color: #ffd600;
  animation: pending-blink 1s ease 0s infinite alternate-reverse none running;
}

.bg-rejected {
  background-color: #ff5252;
}

.bg-unattempted {
  background-color: inherit;
}

.team-colored-col-fg {
  position: relative;
  color: #000 !important;
}

.team-colored-col-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/*******************************************************************************
 *
 *  Team info
 *
 */

.teaminfo .team-photo {
  width: 100%;
  height: auto;
  margin-bottom: 24px;
}

.teaminfo .profile {
  overflow: hidden;
  margin-top: 12px;
  margin-bottom: 12px;
}

.teaminfo .profile-icon {
  width: 80px;
  height: 80px;
  float: left;
}

.teaminfo .profile-data {
  margin-left: 100px;
}

.teaminfo .profile-data > p {
  margin-bottom: 4px;
}

.teaminfo .profile-name {
  font-size: 18px;
  font-weight: bold;
  overflow: hidden;
  vertical-align: bottom;
}