html,
.toastui-editor-contents {
  font-family:
    "Ubuntu variable",
    "Ubuntu",
    -apple-system,
    "Segoe UI",
    "Roboto",
    "Oxygen",
    "Cantarell",
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif !important;
  font-size: 1rem;
}

.question-holder {
  grid-template-columns: auto 1fr;
  display: grid;
  align-items: center;
}

.question-viewer .question-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 6px;
  padding: 5px 5px 0;
}

.question-holder .centered {
  padding: 5px;
}

.question-holder .toastui-editor-contents {
  font-size: 1.1rem;
  font-weight: 400;
}

input:not([type="submit"]),
select {
  border-radius: 3px 3px 0 0 !important;
  outline: 0 !important;
}
select {
  margin-bottom: 0;
}
label {
  margin-bottom: 0;
}

.is-shallow {
  padding: 0 25px;
}
.mdviewer-div {
  position: relative;
  padding: 10px;
}
.mdviewer-div .editIcon {
  position: absolute;
  top: 15px;
  z-index: 99;
  right: 15px;
}
.test-viewer .question-viewer {
  border-radius: 3px;
  border-bottom: 4px solid #b7b7b7;
  padding: 0;
}
.test-viewer .option-grid {
  display: grid;
  grid-template-columns: 50% 50%;
}

.test-viewer .option-grid .single-option {
  display: grid;
  border: 1px solid #d1d1d1;
  padding-left: 10px;
  border-radius: 3px;
  margin: 5px;
  /* grid-template-columns: 20px calc(100% - 20px); */
  grid-template-columns: 30px 1fr 40px;
}

.test-viewer .option-grid .single-option .centered {
  align-content: center;
}

.test-viewer .option-grid .single-option .centered span {
  font-weight: 600;
  padding: 6px;
  border: 1px solid;
}

.test-viewer .option-grid .single-option .centered span.option-score {
  padding: 2px 6px;
  border: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: #666;
  text-align: right;
}

.test-viewer .option-grid .single-option.is-correct {
  background: #cce6d0;
}

.test-viewer .question-viewer .stats-viewer {
  grid-template-columns: 100px 300px;
  display: grid;
  padding: 18px 0px;
}

.test-viewer .question-viewer .stats-viewer .section {
  display: flex;
}

.test-viewer .question-viewer .stats-viewer .section .label {
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
  align-self: center;
}

.test-viewer hr {
  margin-top: 40px;
  background: #e2e2e2;
}

.p-chip--information .p-chip__lead {
  font-variant-caps: normal;
}

p {
  padding-top: 0 !important;
  max-width: unset;
}

.login-button {
  width: 100%;
  border-radius: 7px;
  height: 45px;
  font-weight: 600;
}

.p-button--brand {
  background-color: #de3439;
  border-color: #de3439;
  color: #fff;
}

.p-button--brand:hover {
  background-color: #d9214e;
  border-color: #d9214e;
}

.action-holder {
  grid-template-columns: auto 1fr auto;
  display: grid;
  grid-gap: 25px;
}
.action-holder .save-button {
  align-content: flex-end;
}

.nav-holder {
  grid-template-columns: auto 0.5fr auto 1fr;
  display: grid;
  grid-gap: 30px;
  border-bottom: 1px solid #e2e2e2;
  padding: 25px 0 0px;
  margin-bottom: 30px;
  background: #fff;
  position: sticky !important;
  top: 0px;
  z-index: 9;
}
.nav-holder img {
  width: 120px;
}
.nav-holder form {
  margin-top: 2px;
}

.approve-btn {
  position: absolute;
  right: 30px;
}

.p-button--warning {
  background-color: #e15803;
  border-color: #e15803;
  color: #fff;
}
.p-button--warning:hover {
  background-color: #c74e02;
  border-color: #c74e02;
}

.p-button--information {
  background-color: #24598f;
  border-color: #24598f;
  color: #fff;
}
.p-button--information:hover {
  background-color: #134475;
  border-color: #134475;
}

.p-button--default {
  background-color: #e15803;
  border-color: #e15803;
  color: #fff;
}

.p-status-label--caution,
.p-label--caution {
  background-color: #cc7900;
  color: #ffffff;
}

.status-holder {
  display: inline-block;
  vertical-align: text-top;
  margin-left: 10px;
}

/* minimal design */
.p-card, .p-notification--information {
  border: 0;
}
.p-notification--information::before {
  background-color: unset;
}
/* minimal design end */

/* compare tool */
.nav-holder.compare-tool {
  grid-template-columns: auto 1fr auto;
}
.nav-holder.compare-tool input {
  max-width: 300px;
}
.compare-tool.grid {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr;
  grid-gap: 100px;
}
/* compact inline filter form */
.filter-form--compact {
  align-items: flex-end;
  gap: 0.5rem;
}
.filter-form--compact > div {
  margin-bottom: 0;
}
.filter-form--compact label {
  margin-bottom: 0.1rem;
  font-size: 0.75rem;
  line-height: 1.2;
}
.filter-form--compact select,
.filter-form--compact button,
.filter-form--compact .p-button,
.filter-form--compact .p-button--positive {
  margin-bottom: 0;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  min-height: auto;
  height: auto;
  font-size: 0.8rem;
}
.filter-form--compact .p-checkbox {
  margin-top: 0;
}
.filter-form--compact h3 {
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* keep Approve on the compact filter row, pinned right */
.filter-form--compact .approve-field {
  margin-left: auto;
}
.filter-form--compact .approve-btn {
  position: static;
  right: auto;
}

/* nav-bar actions: download buttons grouped on the left, Logout on the right.
   pinned to the last grid column so it stays right even when the optional
   APPROVED status cell isn't rendered */
.nav-actions {
  grid-column: -2 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.nav-actions__left {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}