html, body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

table.clarification-by-code {
  border: 2px solid #000;
}
table.clarification-by-code thead th {
  text-align: center;
  background-color: #5F55C1;
  color: #FFF;
  border-color: #000;
}
table.clarification-by-code tbody .unlikely {
  background-color: #FFF;
}
table.clarification-by-code tbody .somewhat-likely {
  background-color: #c2bebe;
}
table.clarification-by-code tbody .likely {
  background-color: #afa8a8;
}
table.clarification-by-code tbody .very-likely {
  background-color: #969191;
}
table.clarification-by-code tbody th {
  text-align: center;
  border-color: #000;
}
table.clarification-by-code tbody td {
  border-color: #000;
  padding: 0;
  text-align: center;
}
table.clarification-by-code tbody td div {
  display: flex;
  padding: 5px;
  align-content: stretch;
  justify-content: center;
}
table.clarification-by-code tbody td div.extra-pad {
  padding: 30px 5px;
}

.card-viewer {
  display: block;
}
.card-viewer .card-viewer-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 98vh;
}
.card-viewer .card-viewer-container .card-viewer-image {
  transition-duration: 0.5s;
  transition-property: transform;
}
.card-viewer .card-viewer-container .card-rotate {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.card-viewer .card-viewer-container .card-rotate.left {
  padding-right: 30px;
}
.card-viewer .card-viewer-container .card-rotate.right {
  padding-left: 30px;
}
.card-viewer .card-viewer-container .card-rotate span {
  font-size: 24px;
}
.card-viewer .card-viewer-container .card-rotate img {
  opacity: 0.5;
  width: 50px;
}
.card-viewer .card-viewer-container .card-rotate:hover span {
  color: #5F55C1;
}
.card-viewer .card-viewer-container .card-nav {
  display: flex;
  align-items: end;
}
.card-viewer .card-viewer-container .card-nav span {
  font-size: 24px;
  padding: 10px;
  color: #FFF;
  display: inline-block;
}
.card-viewer .card-viewer-container .card-nav:not(.disabled) {
  cursor: pointer;
}
.card-viewer .card-viewer-container .card-nav:not(.disabled):hover span {
  color: #5F55C1;
}

.assessment-steps {
  padding: 10px 0;
  background-color: #5F55C1;
  color: #FFF;
  margin-bottom: 15px;
}
.assessment-steps ul {
  margin-bottom: 0;
}
.assessment-steps ul li.list-inline-item {
  margin-right: 25px;
}
.assessment-steps ul li.list-inline-item.active {
  font-weight: bold;
}
.assessment-steps ul li.list-inline-item.active::before {
  content: "> ";
}
.assessment-steps ul li.list-inline-item .linkable {
  color: #FFF;
}

em {
  color: #0049fb;
}

.linkable {
  color: #5F55C1;
  cursor: pointer;
}
.linkable:hover {
  text-decoration: underline;
}

.interactive {
  cursor: pointer;
}

.quote {
  color: #0049fb;
}

.warning-text {
  color: #c00101;
  font-size: 18px;
  font-weight: bold;
}

a.btn.btn-primary, button.btn.btn-primary {
  background-color: #5F55C1;
  border-color: #5F55C1;
}

.logo {
  width: 150px;
}

.loading {
  height: 50vh;
}

.info-container {
  border: 1px solid #000;
}

.important-link-container {
  background-color: #d9edf7;
  padding: 3px;
}

.response-status-bar div {
  padding: 10px;
}
.response-status-bar div.show-instructions {
  cursor: pointer;
  border-color: #5F55C1;
  color: #5F55C1;
}
.response-status-bar div.response-number {
  border: 1px solid #000;
  height: 70px;
}
.response-status-bar div.response-number.warning {
  border-color: #c00101;
  background-color: #c00101;
  color: #FFF;
}
.response-status-bar div div {
  border: none;
  padding: 0;
}

.show-bar {
  margin-bottom: 15px;
}
.show-bar ul {
  background-color: #c2bebe;
  margin: 10px 0;
  padding: 10px 20px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-items: center;
}
.show-bar ul li {
  margin-right: 25px;
}
.show-bar ul li:last-child {
  margin-right: 0;
}
.show-bar ul li.list-inline-item {
  margin-right: 25px;
  padding: 5px 0;
}
.show-bar ul li.list-inline-item:last-child {
  margin-right: 0;
}

textarea.assessment-input {
  height: 300px;
}

.card-viewer-error {
  display: none;
}
@media screen and (max-width: 1299px) {
  .card-viewer-error {
    display: block;
  }
}

.speaking-container {
  width: 70%;
}
.speaking-container .speaking {
  display: flex;
  align-items: center;
  height: 50px;
  overflow-y: auto;
  background-color: #81e98d;
  padding: 0 20px;
  border-radius: 10px;
}
.speaking-container .speaking.participant {
  background-color: #6dc9e4;
}

.mediabar {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 15px 0;
}
.mediabar span {
  margin-right: 10px;
}
.mediabar span:last-child {
  margin-right: 0;
}
.mediabar span.record {
  justify-self: end;
  display: inline-block;
}
.mediabar span.record.inactive {
  color: #ff0000;
  cursor: pointer;
}
.mediabar span.record.active {
  color: rgba(255, 0, 0, 0.25);
  cursor: default;
}
.mediabar span.pause {
  justify-self: end;
  display: inline-block;
}
.mediabar span.pause.active {
  color: #000;
  cursor: pointer;
}
.mediabar span.pause.inactive {
  color: rgba(0, 0, 0, 0.25);
  cursor: default;
}

.blazored-modal.instructions {
  height: 75vh;
  width: 80%;
  overflow-y: auto;
}

.instruction-section h4 {
  text-align: center;
}

.calibration .controls select {
  padding: 10px;
  width: 300px;
  margin-bottom: 20px;
}
.calibration .controls .slider {
  width: 100%;
  margin-bottom: 20px;
}
.calibration .calibrationObjectContainer {
  margin-bottom: 20px;
}
.calibration .calibrationObjectContainer .calibrationObject {
  background-color: #00297d;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
}
.calibration .calibrationObjectContainer .calibrationObject.roundedObject {
  border-radius: 5%;
}

ul.link-buttons {
  list-style: none;
  padding: 0;
  margin-top: -5px;
}
ul.link-buttons li {
  display: block;
}
ul.link-buttons li span {
  display: inline-block;
  width: 30px;
  text-align: center;
  padding: 5px;
}
ul.link-buttons li span.link-button {
  cursor: pointer;
}
ul.link-buttons li span.link-button.active {
  background-color: #5F55C1;
  color: #FFF;
}
ul.link-buttons li span.link-button.inactive:hover {
  background-color: #c2bebe;
  color: #FFF;
}

body ul.transcript {
  list-style: none;
  padding-left: 0;
}
.annotation-container {
  margin: 50px 0;
}
.annotation-container .annotation.right {
  transform: rotate(90deg);
  margin-bottom: 100px;
}
.annotation-container .annotation.left {
  transform: rotate(-90deg);
  margin-bottom: 100px;
}
.annotation-container .annotation.down {
  transform: rotate(180deg);
}

.setup-wizard p {
  margin-bottom: 1em;
}
.setup-wizard em {
  color: #0049fb;
}
.setup-wizard dd span {
  color: #0049fb;
}
.setup-wizard .rz-steps ul.content {
  list-style: disc;
  padding-inline-start: 40px;
}

table.code-frequency td:first-child {
  width: 200px;
  font-weight: bold;
}

table.response-table {
  width: 100%;
  border: 1px solid #000;
}
table.response-table td {
  width: 20%;
  padding: 5px;
}
table.response-table td.head {
  font-weight: bold;
  border: 1px solid #000;
  text-align: center;
  color: #fff;
  background-color: #807baf;
}
table.response-table td.response {
  background-color: #d9edf7;
}
table.response-table td.response button {
  width: 25%;
  border-radius: 20px;
  margin-right: 5px;
}
table.response-table td.response button.current {
  background-color: #807baf;
  color: #FFF;
}
table.response-table td.response button:last-child {
  margin-right: 0;
}