@font-face {
  font-family: PublicSans;
  src: url("/third_party/publicsans/fonts/otf/PublicSans-Regular.otf") format("opentype");
}

a.skip-link,
a.skip-link:link,
a.skip-link:visited {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: #333333;
  color: #F0F0F0;
  text-decoration: none;
}

a.skip-link:focus,
a.skip-link:hover,
a.skip-link:active {
  left: 10%;
  transform: none;
  top: 10px;
  color: #FFFFFF;
}

a,
a:link,
a:visited {
  color: #5050C0;
}

a:hover,
a:active {
  color: #202070;
}

dialog {
  max-width: 670px;
  z-index: 1;
  font-size: 14px;
}

dialog h2 {
  margin-top: 0;
  padding-top: 5px;
  margin-bottom: 0;
  padding-bottom: 5px;
  font-size: 18px;
}

dialog label {
  font-weight: bold;
}

dialog .dialog-buttons {
  padding-top: 15px;
  margin-top: 10px;
  border-top: 1px solid #C0C0C0;
}

dialog .form-group {
  margin-bottom: 15px;
}

dialog .form-group input {
  font-size: 13px;
}

dialog .form-group input.long {
  width: 90%;
}

dialog .form-group input.short {
  width: 100px;
}

dialog .instructions {
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #C0C0C0;
  font-size: 12px;
}

dialog .checkbox-list .future {
  display: none;
}

dialog .contents .instructions {
  border-bottom: 1px dotted #C0C0C0;
  margin-top: 10px;
}

footer {
  margin-bottom: 20px;
}

html {
  background-color: #F9F9F9;
  font-family: PublicSans;
  font-size: 15px;
}

header {
  margin-bottom: 40px;
}

main {
  background-color: white;
  padding: 15px;
  border: 1px solid #C0C0C0;
  border-radius: 10px;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

option[disabled] {
  color: #555555;
}

select option[disabled] {
  background-color: #F0F0F0;
}

#code-editor .error-display {
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
  border: 1px solid #77eec6;
  background-color: #7fffd4;
  display: none;
}

#code-editor .inner {
  height: 650px;
  overflow: auto;
  border: 1px solid #C0C0C0;
  border-radius: 2px;
}

#editor-tabs {
  margin-bottom: 10px;
}

#loading {
  background-color: white;
  font-size: 15px;
  text-align: left;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #E0E0E0;
}

#loading h2 {
  font-size: 25px;
}

#loading img {
  height: 20px;
}

#continue-buttons-panel {
  display: none;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px dotted #C0C0C0;
  margin-bottom: 10px;
}

#initial-loading-indicator {
  font-size: 20px;
  padding-top: 20px;
}

#main-holder {
  display: none;
}

#results {
  display: none;
  position: relative;
}

#results .running-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: none;
}

#results .running-indicator .running-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#results .running-indicator .running-overlay img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

#results .running-indicator .running-overlay .running-message {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

#results .running-indicator .running-overlay progress {
  width: 300px;
  height: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
  background-color: #F0F0F0;
}

#results .running-indicator .running-overlay progress::-webkit-progress-bar {
  background-color: #F0F0F0;
  border-radius: 5px;
}

#results .running-indicator .running-overlay progress::-webkit-progress-value {
  background-color: #A0A0C0;
  border-radius: 5px;
  transition: width 0.5s ease;
}

#results .running-indicator .running-overlay progress::-moz-progress-bar {
  background-color: #A0A0C0;
  border-radius: 5px;
}

#results .error-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: none;
}

#results .error-indicator .error-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#results .error-indicator .error-overlay .error-message {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10px;
}

#results .error-indicator .error-overlay .error-details {
  font-size: 16px;
  color: #555555;
  max-width: 400px;
  line-height: 1.4;
}

#results .buttons-panel {
  text-align: center;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px dotted #C0C0C0;
}

#results .center-chart {
  width: 100%;
  min-height: 100px;
}

#results .center-chart-holder bottom-chart-title {
  margin-top: 5px;
  margin-bottom: 20px;
}

#results .center-chart-holder top-chart-title {
  margin-top: 20px;
  margin-bottom: 10px;
}

#results .dimensions {
  margin-top: 10px;
}

#results .dimensions .dimension {
  border: 1px solid #C0C0C0;
  border-radius: 2px;
  padding: 3px;
}

#results .dimensions .dimension.inactive {
  background-color: #F5F5F5;
  color: #333;
}

#results .dimensions .dimension .axis {
  border-top: 1px dotted #C0C0C0;
  font-size: 12px;
  display: grid;
  grid-template-columns: 30% 40% 30%;
  margin-left: 21px;
}

#results .dimensions .dimension .axis .left-tick {
  text-align: left;
}

#results .dimensions .dimension .axis .units-tick-parent {
  text-align: center;
}

#results .dimensions .dimension .axis .right-tick {
  text-align: right;
}

#results .dimensions .dimension .list {
  height: 200px;
  overflow-y: auto;
  font-size: 12px;
}

#results .dimensions .dimension .list .list-line-holder {
  margin-bottom: 5px;
  margin-left: 21px;
}

#results .dimensions .dimension .list .list-line {
  height: 1px;
}

#results .dimensions .dimension .title {
  text-align: center;
  border-bottom: 1px dotted #C0C0C0;
}

#results .scorecards {
  display: grid;
  grid-template-columns: 32% 2% 32% 2% 32%;
  margin-bottom: 10px;
}

#results .scorecards .scorecard {
  border: 1px solid #C0C0C0;
  border-radius: 2px;
  padding: 3px;
  text-align: center;
}

#results .scorecards .scorecard.inactive {
  background-color: #F5F5F5;
  color: #333;
}

#results .scorecards .scorecard .sel select {
  width: 100px;
}

#results .scorecards .scorecard.inactive .sel select {
  background-color: #F8F8F8;
}

#results .scorecards .scorecard .label {
  border-bottom: 1px dotted #C0C0C0;
}

#results .scorecards .scorecard .submetric {
  padding-bottom: 2px;
  padding-top: 2px;
}

#results .scorecards .scorecard .value {
  font-size: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}

#update-loading-indicator {
  display: none;
  text-align: center;
  margin: 20px 0;
}

.advanced-link-pane {
  margin-top: 10px;
  border-top: 1px dotted #C0C0C0;
  padding-top: 10px;
  text-align: center;
}

.beta-warning {
  background-color: #595959;
  color: white;
  padding: 7px;
  border-radius: 2px;
  border: 1px solid black;
}

.beta-warning a,
.beta-warning a:link,
.beta-warning a:visited {
  color: white;
}

.beta-warning a:hover,
.beta-warning a:active {
  color: white;
}

.bold-buttons {
  padding-top: 10px;
  padding-bottom: 10px;
}

.bold-buttons a.primary,
.bold-buttons a.primary:link,
.bold-buttons a.primary:visited {
  background-color: #7070C0;
  color: white;
  border-radius: 10px;
  padding: 7px;
  text-decoration: none;
}

.bold-buttons a.primary:focus,
.bold-buttons a.primary:hover,
.bold-buttons a.primary:active {
  background-color: #5050C0;
}

.bold-buttons a.destructive,
.bold-buttons a.destructive:link,
.bold-buttons a.destructive:visited {
  background-color: #C07070;
  color: white;
  border-radius: 10px;
  padding: 7px;
  text-decoration: none;
}

.bold-buttons a.destructive:focus,
.bold-buttons a.destructive:hover,
.bold-buttons a.destructive:active {
  background-color: #C05050;
}

.bold-buttons a.secondary,
.bold-buttons a.secondary:link,
.bold-buttons a.secondary:visited {
  border: 1px solid #7070C0;
  color: #7070C0;
  border-radius: 10px;
  padding: 7px;
  text-decoration: none;
}

.bold-buttons a.secondary:focus,
.bold-buttons a.secondary:hover,
.bold-buttons a.secondary:active {
  color: white;
  background-color: #5050C0;
}

.buttons-panel {
  margin-top: 20px;
}

.buttons-panel #loading {
  display: none;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px dotted #C0C0C0;
}

.buttons-panel a.primary,
.buttons-panel a.primary:link,
.buttons-panel a.primary:visited {
  background-color: #7070C0;
  color: white;
  border-radius: 10px;
  padding: 7px;
  text-decoration: none;
}

.buttons-panel a.primary:focus,
.buttons-panel a.primary:hover,
.buttons-panel a.primary:active {
  background-color: #5050C0;
}

.buttons-panel a.secondary,
.buttons-panel a.secondary:link,
.buttons-panel a.secondary:visited {
  background-color: #E0E0E0;
  color: black;
  border-radius: 10px;
  padding: 7px;
  text-decoration: none;
}

.buttons-panel a.secondary:focus,
.buttons-panel a.secondary:hover,
.buttons-panel a.secondary:active {
  background-color: #909090;
  color: white;
}

.configure-custom-link {
  font-size: 0.85em;
  color: #555;
  text-decoration: underline;
  margin-top: 4px;
  display: inline-block;
}

.configure-custom-link:hover {
  color: #333;
  text-decoration: underline;
}

.dialog-list {
  height: 270px;
  overflow-y: auto;
}

.dialog-list.small {
  height: 150px;
}

.dialog-sub-buttons {
  text-align: center;
}

.item-list {
  list-style: none;
  padding-left: 0;
}

.item-list li {
  border-bottom: 1px dotted #C0C0C0;
}

.item-list .list-buttons {
  float: right;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  padding-top: 2px;
}

.not-available-contents {
  display: none;
}

.options-panel {
  font-size: 12px;
  text-align: center;
  margin-top: 20px;
  padding-top: 9px;
  border-top: 1px dotted #C0C0C0;
}

.policy-sim-list label {
  font-weight: normal;
}

.scope-reminder,
.scope-reminder a,
.scope-reminder a:link,
.scope-reminder a:visited {
  color: #707070 !important;
}

.scope-reminder a,
.scope-reminder a:hover,
.scope-reminder a:active {
  color: #7070A0 !important;
}

.scope-reminder.detached {
  text-align: center;
  padding-top: 10px;
  font-size: 12px;
}

/* Thanks https://codepen.io/code-boxx/pen/RwxbpOz */
/* MIT License */

/* (A) BASICS - HIDE DEFAULT + SHOW CUSTOM ARROW */
.sel.long {
  width: 250px;
}

.sel.mid {
  width: 130px;
}

.sel.short {
  width: 50px;
}

.sel select {
  appearance: none;
}

.sel::after {
  content: ">";
}

/* (B) DIMENSIONS */
/* (B1) WRAPPER - OPTIONAL */

/* (B2) "EXPAND" SELECT BOX */
.sel {
  display: inline-block;
}

.sel select {
  padding: 5px;
  color: #333;
  border: 1px solid #cfcfcf;
  padding-right: 25px;
  background-color: white;
}

.sel.long select {
  width: 250px;
}

.sel.mid select {
  width: 130px;
}

.sel.short select {
  width: 50px;
}

/* (C) POSITION CUSTOM ARROW */
/* (C1) REQUIRED FOR ABSOLUTE POSITION BELOW */
.sel {
  position: relative;
}

/* (C2) DEFAULT - ARROW ON RIGHT SIDE */
.sel::after {
  position: absolute;
  top: 48%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* (D) COSMETICS */
/* (D1) CUSTOM ARROW IS ESSENTIALLY TEXT! */
.sel::after {
  font-size: 13px;
  color: #aaa;
}

/* (D2) ROTATE ARROW ON HOVER */
.sel::after {
  transition: all 0.3s;
}

.sel:hover::after {
  transform: translateY(-50%) rotate(90deg);
  color: #ff1212;
}

.tos section.major {
  border-top: 1px solid #C0C0C0;
  padding-top: 10px;
  margin-top: 10px;
}

.tos section.minor {
  border-top: 1px dotted #C0C0C0;
  padding-top: 10px;
  margin-top: 10px;
}

.ui-editor-sections {
  display: grid;
  grid-template-columns: 48% 4% 48%;
}

.ui-editor-sections .ui-editor-section {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 5px;
  border: 1px solid #C0C0C0;
  border-radius: 3px;
}

.ui-editor-sections .ui-editor-section h3 {
  margin-top: 0px;
  padding-top: 5px;
  margin-bottom: 0px;
  padding-bottom: 5px;
  text-align: center;
}

.ui-editor-sections .ui-editor-section ul.item-list {
  height: 250px;
  overflow: auto;
  border-top: 1px solid #C0C0C0;
  border-bottom: 1px solid #C0C0C0;
  margin-top: 5px;
  margin-bottom: 5px;
}

.ui-editor-sections .ui-editor-section .add-link-pane {
  text-align: center;
}

.ui-editor-sections .ui-editor-section.inactive {
  background-color: #F5F5F5;
}

.ui-editor-sections .ui-editor-section.inactive .add-link-pane {
  display: none;
}

@media (max-width: 30em) {
  /* Auto-run checkbox on separate line for narrow screens */
  .code-buttons-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
      "run-btn"
      "auto-run"
      "loading";
    gap: 10px;
  }

  #available-panel {
    grid-area: run-btn;
    text-align: center;
  }

  #auto-run-panel {
    grid-area: auto-run;
    justify-self: center;
  }

  #loading {
    grid-area: loading;
  }
}

@media (max-width: 999px) {
  #results .scorecards .scorecard .sel {
    display: block;
  }

  #results .scorecards .scorecard .sel select {
    width: 100%;
  }

  #results .dimensions .dimension {
    margin-bottom: 10px;
  }

  #results {
    margin-top: 30px;
    border-top: 1px solid #C0C0C0;
  }
}

@media (min-width: 1000px) {
  #main {
    display: grid;
    grid-template-columns: 50% 50%;
  }

  #results .dimensions {
    display: grid;
    grid-template-columns: 32% 2% 32% 2% 32%;
    margin-top: 10px;
  }

  #editor {
    padding-right: 10px;
  }

  #results {
    padding-left: 10px;
  }
}

@media (min-width: 30em) {

  a[role="tab"],
  a:link[role="tab"],
  a:visited[role="tab"] {
    color: #5050C0;
  }

  a[role="tab"][aria-selected="true"],
  a:link[role="tab"][aria-selected="true"],
  a:visited[role="tab"][aria-selected="true"] {
    color: #202070;
    background-color: #F5F5F5;
  }

  /* Auto-run checkbox grid layout for wider screens */
  .code-buttons-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 
      "run-btn auto-run"
      "loading loading";
    gap: 10px;
    align-items: center;
    margin-top: 5px;
  }

  #available-panel {
    grid-area: run-btn;
  }

  #auto-run-panel {
    grid-area: auto-run;
    justify-self: end;
  }

  #loading {
    grid-area: loading;
  }
}
/* No results message styling */
.no-results-message {
  text-align: center;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #C0C0C0;
  border-radius: 3px;
  background-color: #F9F9F9;
}

.no-results-message p {
  margin: 0;
  color: #666;
}

/* Unified preferences styling for all preference checkboxes */
.check-preferences {
  margin: 10px 0;
}

.check-preferences label {
  display: block;
  margin: 5px 0;
  font-size: 14px;
  cursor: pointer;
}

.check-preferences input[type="checkbox"] {
  margin-right: 8px;
}

/* Override dialog label bold styling for checkbox lists */
dialog .checkbox-list label {
  font-weight: normal;
}

/* Hide up-to-date message by default in update dialog */
#up-to-date-message {
  display: none;
}