/****** general ******/
body {
  background-color: white !important;
}

.global-messages {
  position:fixed;
  top: 6px;
  left: 23%;
  width: 54%;
  padding-top: 7px;
  padding-bottom: 9px;
  z-index: 999908;
}

h1 {
  .buttons {
    padding-left: 100px;
    font-size: 23px;
    i:hover {
      color: orange;
      cursor: pointer;
    }
  }
}

h2 {
  padding-top: 10px;
  padding-bottom: 8px;
  font-weight: bold;
  font-size: 26px;
}

.table {
  &.table-overflow-elipsis {
    td, th {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 350px;
    }
  }
  .no-entries {
    font-style: italic;
  }
  .deemphasized td {
    color: #BBB;
  }
  .expand-on-click {
    cursor: pointer;
  }
  .primary-title {
    min-width: 246px;
    float: left;
  }
  .secondary-title {
    font-weight: normal;
    padding-left: 20px;
  }
}

select:-moz-focusring { // Remove outline from select box in FF: http://stackoverflow.com/a/18853002/1218058
    color: transparent;
    text-shadow: 0 0 0 #000;
}

// Disable Bootstrap progress bar animations
.progress .progress-bar {
  transition: none;
}

/****** copied from Bootstrap dataTables ******/
table.table-bordered {
  thead th, thead td {
    border-left-width: 0;
    border-top-width: 0;
  }
  tbody th, tbody td {
    border-left-width: 0;
    border-bottom-width: 0;
  }
  tfoot th, tfoot td {
    border-left-width: 0;
    border-bottom-width: 0;
  }
  th:last-child, td:last-child {
    border-right-width: 0;
  }
}

/****** loading page ******/
.loading {
  text-align: center;

  .loading-icon {
    font-size: 100px;
  }
  .loading-message {
    font-size: 30px;
  }
}

/****** banner ******/
@banner-color: #76AB1E;

.banner-container {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  top: 25px;
  &:after {
    content: "";
    display: block;
    width: 10px;
    height: 5px;
    background-color: darken(@banner-color, 5%);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
  }
  &:before {
    content: "";
    display: block;
    height: 10px;
    width: 5px;
    background-color: darken(@banner-color, 5%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }

  .banner {
    width: 200px;
    padding: 15px;
    background-color: @banner-color;
    color: #fff;
    text-align: center;
    transform: rotate(-45deg) translate(-28%, -35%);
    box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
    text-transform: uppercase;
    text-shadow: 0 2px 2px rgba(0,0,0,0.4);
  }
}

/***********************************************/
/************ quiz-specific styling ************/
/***********************************************/

/****** SbAdmin overrides ******/
#page-wrapper {
  margin: 0; // Remove left sidebar
  padding: 0;
}

.navbar-static-top {
  li {
    a.selected {
      background-color: #337ab7;
      color: white;
    }
    .with-tooltip {
      .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        top: 38px;
        left: -18px;

        &.tooltiptext-align-right {
          left: -80px;
        }
      }

      &:hover .tooltiptext {
        visibility: visible;
      }
    }
  }
}

/****** Global layout ******/
.synced-timer-bar {
  .progress {
    margin: 0;
    height: 25px;
    .synced-timer-bar-label {
      font-size: 18px;
      padding-left: 10px;
      padding-top: 3px;
      text-align: left;
      white-space: nowrap;
      i.seen {
        color: black;
      }
    }
    .progress-bar-info {
      .synced-timer-bar-label {
        color: black;
        i.unseen {
          color: white;
        }
      }
    }
  }
}

#content-wrapper {
  display: flex;

  #left-content-wrapper:not(:empty) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 300px;

    padding: 20px 10px 0px 10px;

    ul.teams-list {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 370px;

      li {
        margin-bottom: 30px;
        border: 2px solid #008;
        border-radius: 13px;
        padding: 10px;

        .name {
          font-weight: bold;
          font-size: 30px;
          text-align: center;

          .first-player {
            color: gold;
          }

          .gamepad-icon {
            &.pressed {
              color: black;
            }
            &:not(.pressed) {
              color: #BBB;
            }
          }
        }
        .score {
          font-weight: bold;
          font-size: 50px;
          text-align: center;
        }
        .submission {
          font-size: 23px;
          text-align: center;

          span.correct {
            color: green;
          }
          span.incorrect {
            color: red;
            text-decoration: line-through;
          }
          i.correct {
            color: lightgreen;
          }
          i.incorrect {
            color: red;
          }
          .btn-group {
            margin-right: 10px;
          }
        }
      }

      &.teams-list-small, &.teams-list-smaller {
        li {
          .name {
            font-size: 30px;
            display:inline-block;
            padding-right: 15px;
          }
          .score {
            font-size: 30px;
            display:inline-block;
          }
          .submission {
            text-align: left;
          }
        }
      }

      &.teams-list-smaller {
        li {
          margin-bottom: 10px;
          .name {
            font-size: 20px;
          }
          .score {
            font-size: 20px;
          }
          .submission {
            font-size: 15px;
          }
        }
      }
      &.teams-list-smallerer {
        width: 500px;
        li {
          width: 240px;
          margin-right: 10px;
        }
        li:nth-child(odd) {
          float: left;
          clear: both;
        }
        li:nth-child(even) {
          float: right;
          clear: right;
        }
      }
    }
  }
  #right-content-wrapper {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;

    padding: 20px 10px 0px 40px;
  }
}


/****** Team controller view ******/
.team-controller-view {
  .choose-other-team {
    margin-bottom: 30px;
  }
  .team-name {
    font-size: 21px;
    font-weight: bold;
  }
  .question {
    font-size: 17px;
    padding-bottom: 14px;
  }

  .the-one-button {
    width: 94%;
    max-width: 400px;
    height: 300px;
    font-size: 40px;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .multiple-choice-answer-buttons, .order-items-answer-buttons {
    list-style: none;
    padding-left: 0px;

    li {
      font-size: 17px;
      padding-bottom: 10px;

      .btn {
        width: 100%;
        max-width: 400px;
        text-align: left;
        white-space: normal !important;
        word-wrap: break-word !important;

        &.correct {
          background-color: green;
        }
        &.incorrect {
          background-color: red;
          text-decoration: line-through;
        }

        .choice-arrow {
          padding-right: 10px;
        }
      }
    }

    &.order-items-answer-buttons {
      padding-top: 20px;
      touch-action: none;
      -webkit-user-select: none;
      li {
        .draggable-button {
          color: #333;
          border: 1px solid #ccc;
          border-radius: 3px;
          padding: 3px 10px;

          width: 100%;
          max-width: 400px;
          text-align: left;
          white-space: normal !important;
          word-wrap: break-word !important;

          &.disabled {
            color: #ccc;
            border-color: #ccc;
            cursor: not-allowed;
          }
          .fa-arrows-v {
            padding-right: 10px;
          }
        }
      }
    }
  }

  .free-text-answer-form {
    input {
      width: 90%;
      max-width: 500px;
    }
    .btn {
      margin-bottom: 20px;
    }
    .you-submitted {
      font-size: 17px;
      .correct {
        color: green;
      }
      .incorrect {
        color: red;
        text-decoration: line-through;
      }
    }
  }

  .multiple-answers-form {
    input {
      width: 90%;
      max-width: 500px;
      margin-bottom: 14px;
    }
    .btn {
      margin-bottom: 20px;
    }
    .you-submitted {
      font-size: 17px;
      .correct {
        color: green;
      }
      .incorrect {
        color: red;
        text-decoration: line-through;
      }
    }
  }
}

/****** Shared quiz-view / master-view ******/
.quiz-view, .master-view {
  .round-wrapper {
    .round-title, .round-metadata, .round-help {
      text-align: center;
      font-weight: bold;
      color: #006;
    }
    .round-title {
      font-size: 70px;
    }
    .round-metadata {
      font-size: 40px;
    }
    .round-help {
      padding-top: 40px;
      font-size: 30px;
      color: black;
      font-style: italic;
    }
  }
  .question-wrapper {
    text-align: center;
    .admin-only-data, .admin-only-data li {
      color: #DDD !important;
    }
    .question {
      padding-top: 5px;
      font-size: 45px;
      font-weight: bold;

      .label {
        font-size: 20px;
        vertical-align: middle;
      }
    }
    .question-detail {
      font-size: 30px;
    }
    .verbal-question {
      font-size: 35px;
    }
    .verbal-answer {
      font-size: 35px;
      color: green;
      font-weight: bold;
    }
    .textual-question {
      font-size: 35px;
    }
    .points-metadata {
      font-size: 24px;
      font-style: italic;
    }
    audio {
      width: 100%;
      max-width: 900px;
    }
    .submissions-without-choices {
      padding-top: 25px;
      font-size: 35px;
      &:before {
        content: "x";
        color: white;
      }
    }
    .maybe-obfuscated-answer-wrapper {
      padding-top: 25px;
      font-size: 23px;
      .maybe-obfuscated-answer {
        color: black;
        padding-left: 30px;
        padding-right: 30px;
        &.obfuscated {
          background-color: black;
        }
      }
    }
    .answer {
      padding-top: 25px;
      font-size: 40px;
      color: green;
    }
    .answer-detail {
      font-size: 30px;
      color: green;
    }
    .master-notes {
      font-size: 30px;
    }
    ul.multiple-answers-submissions {
      overflow: hidden;
      list-style: none;

      padding: 0;
      margin: 0;

      li.team-box {
        width: 47%;

        border: 2px solid #008;
        border-radius: 13px;

        margin-bottom: 30px;
        margin-right: 10px;
        padding: 10px;
        text-align: left;

        &:nth-child(odd) {
          float: left;
          clear: both;
        }
        &:nth-child(even) {
          float: right;
          clear: right;
        }

        .name {
          font-weight: bold;
          font-size: 20px;
        }
        ul {
          padding-left: 25px;

          li {
            .btn-group {
              padding-right: 10px;
            }

            span.correct {
              color: green;
            }
            span.incorrect {
              color: red;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }
    .image-and-choices-row {
      padding-top: 25px;
      display: flex;
      justify-content: center;
      text-align: center;

      .image-holder {
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 300px;

        padding-right: 50x;
        width: 500px;
        &.small {
          max-width: 1000px;
        }
        &.large {
          max-width: 1480px;
        }
        &.admin-only-data {
          img {
            opacity: 0.3;
          }
        }
        img {
          max-width: 100%;

          &.enlarged {
            position: absolute;
            top: 25px;
            left: 0;
            right: 0;
            margin: auto;
            height: 880px;
            object-fit: contain;
            background-color: white;
            z-index: 999901;
          }
          &:not(.enlarged) {
            &.indicate-enlarged {
              border: 5px double;
            }

            &.small {
              max-height: 330px;
            }
            &.large {
              max-height: 540px;
            }
          }
        }
      }
      .video-holder {
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 300px;

        padding-right: 50x;
        width: 500px;
        max-width: 1300px;

        video {
          max-width: 100%;
        }
        &.enlarged video {
          position: absolute;
          top: 25px;
          left: 0;
          right: 0;
          margin: auto;
          height: 880px;
          object-fit: contain;
          background-color: white;
          z-index: 999901;
        }
        .video-help-placeholder {
          max-width: 100%;
          padding: 30px 13px;

          text-align: center;
          vertical-align: middle;

          color: white;
          background-color: black;
          font-size: 30px;
          overflow: hidden;

        }
        &.admin-only-data .video-help-placeholder {
          opacity: 0.2;
        }
        &.indicate-enlarged .video-help-placeholder {
          border: 5px double;
        }
      }

      .choices-holder {
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: auto;
        max-width: 1400px;

        &.including-image-or-video {
          text-align: left;
          max-width: 70%;
          padding-left: 20px;
        }

        .choices, .answers, .sub-questions {
          font-size: 35px;
          display: inline-block;
          text-align: left;
          list-style: none;
          padding-left: 0;

          .choice-arrow {
            padding-right: 25px;
          }
        }

        .choices {
          .correct {
            color: green;
            font-weight: bold;
          }
          .incorrect {
            color: red;
            text-decoration: line-through;
          }
        }
        .sub-questions, .answers {
          .points-info {
            font-size: 24px;
            font-style: italic;
          }
          .sub-answer {
            padding-bottom: 13px;
            padding-left: 81px;
            font-size: 35px;
            color: green;
          }
        }
      }
    }
}

/****** quiz-settings-panels ******/
.quiz-settings-panels {
  .general-quiz-settings {
    .single-quiz-setting {
      padding-bottom: 10px;
    }
  }

  .import-backup-panel {
    form {
      display: flex;
      input {
        flex: 2;
        font-size: 9px;
      }
      button {
        margin-left: 10px;
      }
    }
  }

  .table-teams {
    form {
      display: flex;
      input {
        flex: 2;
        border: none;
      }
      input.value-has-changed {
        color: blue;
      }
      button {
        margin-left: 10px;
      }
    }
  }
}


/****** master-view only ******/
.master-view {
  .quiz-navigation-buttons {
    text-align: center;
    padding-bottom: 10px;
  }

  .keyboard-shortcuts-help table {
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
  }
}

/****** table-gamepads ******/
.table-gamepads {
  table-layout: fixed;
  td {
    i {
      font-size: 25px;
      padding-right: 20px;
    }
  }
}

/****** SubmissionsSummaryTable ******/
.submissions-summary {
  td, th {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 160px;
    white-space: nowrap;
  }

  @media screen and (min-width: 450px) and (max-width: 767px) {
    max-width: 400px;
  }
  @media screen and (min-width: 400px) and (max-width: 450px) {
    max-width: 350px;
  }
  @media screen and (max-width: 400px) {
    max-width: 300px;
  }
}
