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-holder .centered {
  padding: 5px;
}

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

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 calc(100% - 30px);
}

.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.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;
}