:root {
  --cds-light-grey:#EBEBE9;
  --cds-medium-grey:#D4D4D2;
  --cds-dark-grey:#262626;
  --cds-red:#E4002B;
  --cds-ruby:#CE0058;
  --cds-orange-red:#FA4616;
  --cds-orange:#FF8200;
  --cds-gold:#FFB81C;
  --cds-lime:#93DA49;
  --cds-green:#00A376;
  --cds-teal:#2CCCD3;
  --cds-cobalt:#147BD1;

  --page-color-bg:#434343;
  --page-color-fg:white;
  --page-color-fg-alt:lightgrey;
  --button-color-bg:#0078D7;
  --button-color-fg:white;
  --button-disabled-color-fg:#999;
  --button-disabled-color-bg:#656565;
  --link-color:#1BBFC8;

  --table-header-bg:#727272;
  --table-cell-bg:#525252;
  --table-cell-bg-alt:#656565;

  --checkbox-checked:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20'%3E%3Cpath d='m8.229 14.729-4.187-4.208 1.729-1.729 2.458 2.437 6-5.979L15.958 7Z'/%3E%3C/svg%3E");
  --checkbox-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20'%3E%3Cpath style='stroke:%23000;stroke-width:2' d='m5 5 10 10m0-10L5 15'/%3E%3C/svg%3E");
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='white' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3CclipPath id='clip-Web_1920_1'%3E%3Crect width='16' height='16'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Web_1920_1' data-name='Web 1920 – 1' clip-path='url(%23clip-Web_1920_1)'%3E%3Cg id='Rectangle_1' data-name='Rectangle 1' fill='none' stroke='%23707070' stroke-width='0.5' opacity='0'%3E%3Crect width='16' height='16' stroke='none'/%3E%3Crect x='0.25' y='0.25' width='15.5' height='15.5' fill='none'/%3E%3C/g%3E%3Cpath id='Polygon_4' data-name='Polygon 4' d='M4.5,0,9,6H0Z' transform='translate(12.5 11) rotate(180)'/%3E%3C/g%3E%3C/svg%3E");;

  --dialog-header-bg:black;
  --text-area-bg:black;

  --scroll-track-bg:#151515;
  --scroll-thumb-bg:#7A7A7A;
  --scroll-hover-bg:#8A8A8A;

  --line-separator-color:#8C8C8C;
  --input-border-color:#6d6d6d;
  --input-border-color-alt:#232323;

  --placeholder-input:#7a7a7a;

  --collapse-header-bg:#7a7a7a;

  --font-size:12px;

  --m37-indicator-error:#FF6666;
  --m37-indicator-warn:#FFFF66;
  --m37-indicator-ok:#44DD44;
  --m37-indicator-info:var(--page-color-fg-alt);
  --m37-indicator-abort:var(--page-color-fg-alt);
  --m37-indicator-notify:var(--cds-orange);

  --m37-indicator-icon-warn:url("/res/xicons/dark/warning.svg");
  --m37-indicator-icon-err:url("/res/xicons/dark/error.svg");
  --m37-icon-arrow-right:url("/res/xicons/dark/iconArrowRight.svg");
  --m37-icon-arrow-down:url("/res/xicons/dark/iconArrowDown.svg");
}

/*Special styling for outside the Orcad X CEF browser*/
.non-embedded-browser {
  --font-size:14px;
}

@media (prefers-color-scheme:light) {
  .non-embedded-browser {
    --page-color-fg:#000000;
    --page-color-fg-alt:grey;
    --page-color-bg:#ffffff;
    --table-header-bg:#a0a0a0;
    --table-cell-bg:#dedbde;
    --table-cell-bg-alt:#bdbdbd;

    --button-disabled-color-fg:#4a4a4a;
    --button-disabled-color-bg:#9a9a9a;
    --link-color:#000080;

    --dialog-header-bg:#d5d5d5;
    --text-area-bg:#eaeaea;

    --checkbox-checked:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' height='20' width='20'%3E%3Cpath d='m8.229 14.729-4.187-4.208 1.729-1.729 2.458 2.437 6-5.979L15.958 7Z'/%3E%3C/svg%3E");
    --checkbox-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20'%3E%3Cpath style='stroke:%23FFF;stroke-width:2' d='m5 5 10 10m0-10L5 15'/%3E%3C/svg%3E");
    --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3CclipPath id='clip-Web_1920_1'%3E%3Crect width='16' height='16'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Web_1920_1' data-name='Web 1920 – 1' clip-path='url(%23clip-Web_1920_1)'%3E%3Cg id='Rectangle_1' data-name='Rectangle 1' fill='none' stroke='%23707070' stroke-width='0.5' opacity='0'%3E%3Crect width='16' height='16' stroke='none'/%3E%3Crect x='0.25' y='0.25' width='15.5' height='15.5' fill='none'/%3E%3C/g%3E%3Cpath id='Polygon_4' data-name='Polygon 4' d='M4.5,0,9,6H0Z' transform='translate(12.5 11) rotate(180)'/%3E%3C/g%3E%3C/svg%3E");

    --scroll-track-bg:#eaeaea;
    --scroll-thumb-bg:#7a7a7a;
    --scroll-hover-bg:#656565;

    --input-border-color:#929292;
    --input-border-color-alt:#dcdcdc;
    --placeholder-input:#858585;
    --input-disable-bg:#3B3B3B;

    --collapse-header-bg:#cdcdcd;

    --m37-indicator-error:#EE0000;
    --m37-indicator-warn:#888800;
    --m37-indicator-ok:#008800;
    --m37-indicator-info:#0078D7;
    --m37-indicator-abort:var(--page-color-fg-alt);
    --m37-icon-arrow-right:url("/res/xicons/light/iconArrowRight.svg");
    --m37-icon-arrow-down:url("/res/xicons/light/iconArrowDown.svg");
  }
}

.light-mode {
  --page-color-fg:#000000;
  --page-color-fg-alt:grey;
  --page-color-bg:#ffffff;
  --table-header-bg:#a0a0a0;
  --table-cell-bg:#dedbde;
  --table-cell-bg-alt:#bdbdbd;

  --button-disabled-color-fg:#4a4a4a;
  --button-disabled-color-bg:#9a9a9a;

  --dialog-header-bg:#d5d5d5;
  --text-area-bg:#eaeaea;

  --checkbox-checked:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' height='20' width='20'%3E%3Cpath d='m8.229 14.729-4.187-4.208 1.729-1.729 2.458 2.437 6-5.979L15.958 7Z'/%3E%3C/svg%3E");
  --checkbox-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20'%3E%3Cpath style='stroke:%23FFF;stroke-width:2' d='m5 5 10 10m0-10L5 15'/%3E%3C/svg%3E");
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3CclipPath id='clip-Web_1920_1'%3E%3Crect width='16' height='16'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Web_1920_1' data-name='Web 1920 – 1' clip-path='url(%23clip-Web_1920_1)'%3E%3Cg id='Rectangle_1' data-name='Rectangle 1' fill='none' stroke='%23707070' stroke-width='0.5' opacity='0'%3E%3Crect width='16' height='16' stroke='none'/%3E%3Crect x='0.25' y='0.25' width='15.5' height='15.5' fill='none'/%3E%3C/g%3E%3Cpath id='Polygon_4' data-name='Polygon 4' d='M4.5,0,9,6H0Z' transform='translate(12.5 11) rotate(180)'/%3E%3C/g%3E%3C/svg%3E");
  --button-color-bg:#0078D7;
  --button-color-fg:white;
  --link-color:#000080;

  --scroll-track-bg:#eaeaea;
  --scroll-thumb-bg:#7a7a7a;
  --scroll-hover-bg:#656565;

  --input-border-color:#929292;
  --input-border-color-alt:#dcdcdc;
  --placeholder-input:#858585;
  --input-disable-bg:#c4c4c4;

  --collapse-header-bg:#cdcdcd;

  --m37-indicator-error:#EE0000;
  --m37-indicator-warn:#AAAA00;
  --m37-indicator-ok:#008800;
  --m37-indicator-info:#0078D7;
  --m37-indicator-abort:var(--page-color-fg-alt);

  --m37-indicator-icon-warn:url("/res/xicons/light/warning.svg");
  --m37-indicator-icon-err:url("/res/xicons/light/error.svg");
}

/* Styles for custom scrollbar*/

/* Firefox */
* {
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb-bg) var(--scroll-track-bg);
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width:8px;
  height:8px;
}

::-webkit-scrollbar-thumb {
  background:var(--scroll-thumb-bg);
}

::-webkit-scrollbar-thumb:hover {
  background:var(--scroll-hover-bg);
}

::-webkit-scrollbar-thumb:active {
  background:#dedede;
}

::-webkit-scrollbar-corner {
  background:rgb(0, 0, 0, 0.5);
}

/* Default styles for elements */

button,
input[type="text"],
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button,
select {
  font-family:"Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:var(--font-size);
}

button {
  background-color:var(--button-color-bg);
  color:var(--button-color-fg);
  border:none;
  border-radius:2px;
  cursor:pointer;
}

button:disabled {
  background-color:var(--button-disabled-color-bg);
  color:var(--button-disabled-color-fg);
  cursor:default;
}


input[type="text"] {
  background-color:var(--page-color-bg);
  border:var(--input-border-color) 1px solid;
  color:var(--page-color-fg);
}

input::placeholder {
  color:var(--placeholder-input);
}

input[type='checkbox'] {
  -moz-appearance:initial;
}

input[type='checkbox']:after {
  line-height:1em;
  content:'';
  display:inline-block;
  width:10px;
  height:10px;
  border:2px solid #0077CC;
  background:var(--page-color-bg);
}

input[type='checkbox']:checked:after {
  display:grid;
  justify-content:center;
  align-content:center;
  width:10px;
  height:10px;
  background:#0077CC;
  font-weight:bold;
  content:var(--checkbox-checked);
  color:#151515;
  border:2px solid #0077CC;
  overflow:hidden;
}

input[type='checkbox']:disabled:after {
  border-color:var(--input-border-color);
  color:var(--input-disable-bg);
}

input[type='checkbox']:disabled + label {
  color:gray;
}

input[type='radio']:disabled + label {
  color:gray;
}

/*Unused indeterminate checkbox, could be useful later*/
/*input[type='checkbox'].selectAll:indeterminate:after {*/
/*    display: grid;*/
/*    justify-content: center;*/
/*    align-content: center;*/
/*    width: 10px;*/
/*    height: 10px;*/
/*    font-weight: bold;*/
/*    !*option 1: small filled box*!*/
/*    !*content: url("data:image/svg+xml,%3Csvg%0Axmlns='http://www.w3.org/2000/svg' height='20' width='20'%3E%3Crect fill='%230077CC' x='7' y='7' width='6' height='6'%3E%3C/rect%3E%3C/svg%3E");*!*/
/*    !*option 2: indeterminate dash*!*/
/*    content: url("data:image/svg+xml,%3Csvg%0Axmlns='http://www.w3.org/2000/svg' height='20' width='20'%3E%3Crect fill='black' x='6' y='9' width='8' height='2'%3E%3C/rect%3E%3C/svg%3E");*/
/*    background: #0077CC;*/
/*}*/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0;
}

input[type=number] {
  -moz-appearance:textfield;
}

select {
  color:var(--page-color-fg);
  font-size:inherit;

  background:var(--page-color-bg);
}

select:not([multiple]) {
  -moz-appearance:none;
  -webkit-appearance:none;
  appearance:none;

  background-repeat:no-repeat;
  background-size:1.5em auto;
  background-position:right center;
  padding:0.1em 2.5em 0.1em 0.1em;

  background-image:var(--select-arrow);
}

select option {
  background-color:var(--page-color-bg);
  color:var(--page-color-fg);
}

table.selectTable,
table.checkBoxTable {
  font-size:var(--font-size);
  border-collapse:separate;
  border-spacing:0;
}

table.selectTable > thead > tr,
table.checkBoxTable > thead > tr {
  background:var(--table-header-bg);
  color:white;
}

table.selectTable td,
table.checkBoxTable td.checkBoxDiv {
  text-align:center;
}

table.selectTable tbody tr,
table.checkBoxTable tbody tr {
  color:var(--page-color-fg);
}

table.selectTable tbody tr:nth-child(even),
table.checkBoxTable tbody tr:nth-child(odd) {
  background-color:var(--table-cell-bg);
}

table.selectTable tbody tr:nth-child(even),
table.checkBoxTable tbody tr:nth-child(even) {
  background-color:var(--table-cell-bg-alt);
}

table.checkBoxTable tbody tr:hover,
table.checkBoxTable tbody td.hover {
  background:rgba(0, 0, 0, 0.5);
}


table.selectTable th,
table.selectTable td,
table.checkBoxTable th,
table.checkBoxTable td {
  font-weight:normal;
  border:1px solid var(--page-color-bg);
}

table.checkBoxTable th,
table.checkBoxTable td {
  font-weight:normal;
  padding:4px;
  border:1px solid var(--page-color-bg);
}

div.resizeDragBar {
  flex:0 0 5px;
  background-color:var(--line-separator-color);
  cursor:ns-resize;
}

div.dialogTitle {
  background: var(--collapse-header-bg);
  color: var(--page-color-fg);
  font-weight:bold;
  padding:4px;
  user-select: none;
}