/* Color mode properties */
:root {
  --main-background-color: #fff;
  --main-border-color: #e1e1e1;
  --main-text-color: #222;
  --main-link-color: #1EAEDB;
  --main-link-hover-color: #0FA0CE;
  --button-color: #555;
  --button-border-color: #bbb;
  --button-focus-color: #333;
  --button-focus-border-color: #888;
  --button-primary-color: #fff;
  --button-primary-bg-color: #33C3F0;
  --button-primary-focus-color: #fff;
  --button-primary-focus-bg-color: #1EAEDB;
  --input-bg-color: #fff;
  --input-border-color: #d1d1d1;
  --input-focus-border-color: #33C3F0;
  --navbar-link-color: #222;
  --navbar-name-color: #aaa;
  --navbar-active-color: #33C3F0;
  --esg-header-color: #c0c0c0; 
  --theme-switch-bg-color: #b4d7ff; 
  --theme-switch-color: #fff1a2; 
  --theme-switch-offset: 0px; }

[data-theme="dark"] { /* Dark mode colors */
  --main-background-color: #000;
  --main-border-color: #525252;
  --main-text-color: #b8b8b8;
  --main-link-color: #c0900d; /* Less blue, less bright */
  --main-link-hover-color: #a37b0c;
  --button-color: #eee;
  --button-border-color: #bbb;
  --button-focus-color: #333;
  --button-focus-border-color: #888;
  --button-primary-color: #eee;
  --button-primary-bg-color: #000;
  --button-primary-border-color: #c0900d;
  --button-primary-focus-color: #eee;
  --button-primary-focus-bg-color: #000;
  --button-primary-focus-border-color: #a37b0c;
  --input-bg-color: #000;
  --input-border-color: #626262;
  --input-focus-border-color: #c0900d;
  --navbar-link-color: #b8b8b8;
  --navbar-name-color: #656565;
  --navbar-active-color: #c0900d;
  --esg-header-color: #444; 
  --theme-switch-bg-color: #150572; 
  --theme-switch-color: #cbcbcb;
  --theme-switch-offset: 26px; }

/* Overriding Skeleton colors with property-based colors */

body {
  color: var(--main-text-color); 
  background-color: var(--main-background-color)}

a {
  color: var(--main-link-color); }

a:hover {
  color: var(--main-link-hover-color); }

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  color: var(--button-color);
  border: 1px solid var(--button-border-color); }

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: var(--button-focus-color);
  border-color: var(--button-focus-border-color); }

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: var(--button-primary-color);
  background-color: var(--button-primary-bg-color);
  border-color: var(--button-primary-border-color); }

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: var(--button-primary-color);
  background-color: var(--button-primary-focus-bg-color);
  border-color: var(--button-primary-focus-border-color); }

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  background-color: var(--input-bg-color);
  border: 1px solid var(--input-border-color); }

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid var(--input-focus-border-color); }

th,
td {
  border-bottom: 1px solid var(--main-border-color); }

hr {
  border-top: 1px solid var(--main-border-color); }
  

/* Default displays for dynamic content */
.navbar {
  display: none; }

.mobile-nav {
  display: none; }

.minimized-nav-svg-container {
  display: none; }

.long-esg {
  display: none; }
  
/* Larger than phone */
@media (min-width: 550px) {
  .header {
    margin-top: 18rem; }
  .docs-section {
    padding: 6rem 0; }
}

/* Title */
@media (min-width: 1000px) {
  .long-esg {
    display: block; }
  .short-esg {
    display: none; }
}    

/* Navbar */
@media (min-width: 700px) {
  .navbar {
    border-top-width: 0; }
  .navbar,
  .navbar-spacer {
    display: block;
    width: 100%;
    height: 6.5rem;
    background: var(--main-background-color);
    z-index: 99;
    border-top: 1px solid var(--main-border-color);
    border-bottom: 1px solid var(--main-border-color); }
  .navbar-spacer {
    display: none; }
  .navbar > .container {
    width: 100%; }
  .navbar-list {
    list-style: none;
    margin-bottom: 0; }
  .navbar-item {
    position: relative;
    float: left;
    margin-bottom: 0; }
  .navbar-item-right {
    position: relative;
    float: right;
    margin-bottom: 0; }
  .navbar-link {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2rem;
    margin-right: 35px;
    text-decoration: none;
    line-height: 6.5rem;
    color: var(--navbar-link-color); }
  .navbar-name {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2rem;
    margin-right: 35px;
    text-decoration: none;
    line-height: 6.5rem;
    color: var(--navbar-name-color); }
  .navbar-link.active {
    color: var(--navbar-active-color); }
  .has-docked-nav .navbar {
    position: fixed;
    top: 0;
    left: 0; }
  .has-docked-nav .navbar-spacer {
    display: block; }
  /* Re-overiding the width 100% declaration to match size of % based container */
  .has-docked-nav .navbar > .container {
    width: 80%; }
  .mobile-nav-wrapper {
    display: none; }
}

/* Mobile navbar */
@media (max-width: 700px) {
  .mobile-nav-wrapper {
    display: block; }
  .mobile-nav {
    border-top-width: 0;
    width: 100%;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 99;
    background: var(--main-background-color);  
    border-top: 1px solid var(--main-border-color);
    border-bottom: 1px solid var(--main-border-color); 
    padding-bottom: 10px;
    display: none; }
  .mobile-nav > .container {
    width: 100%; }
  .mobile-nav #mobile-nav-links {
    margin-top: 3rem; }
  .mobile-nav .opened-nav-svg-container {
    display: flex;
    justify-content: center; }
  .opened-nav-svg {
    padding: 10px; }
  .mobile-nav table {
    margin-bottom: 0;
    width: 100%; }
  .mobile-nav td {
    padding: 0.5rem 0;
    border: 0; }
  .nav-td-left {
    text-align: left; }
  .nav-td-right {
    text-align: right; }
  .nav-link {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2rem;
    text-decoration: none;
    color: var(--navbar-link-color); }
  .nav-name {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2rem;
    text-decoration: none;
    color: var(--navbar-name-color); }
  .nav-link.active {
    color: var(--navbar-active-color); }
  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0; }
  .mobile-nav > .container {
    width: 80%; }
  .minimized-nav-svg-container {
    width: 100%;
    position: fixed;
    bottom: 10px;
    left: 0;
    display: flex;
    justify-content: center; 
    pointer-events: none; }
  .minimized-nav-svg {
    z-index: 100;
    background: var(--main-background-color);
    padding: 10px;
    border: 1px solid var(--main-border-color); 
    pointer-events: all; }
  rect {
    fill: var(--main-text-color)}
}

/* Title text */
.esg-header {
  color: var(--esg-header-color);
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 5rem;
  letter-spacing: -.1rem;
  font-weight: bolder; 
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1"; }

.caps-header {
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: .2rem;
  font-weight: 600; }


/* Day/night theme switch */
.theme-switch-wrapper {
  display: inline-block;
  align-items: center;
  margin-left: auto; }
  
.theme-switch-wrapper .theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px; }

.theme-switch-wrapper .theme-switch input {
  display:none; }

.theme-switch-wrapper  .slider {
  background-color: var(--theme-switch-bg-color);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .1s; }

.theme-switch-wrapper .slider:before {
  background-color: #bbb;
  bottom: 3px;
  content: "";
  height: 26px;
  left: 3px;
  position: absolute;
  transition: .1s;
  width: 26px; }

.theme-switch-wrapper .slider::before {
  background-color: var(--theme-switch-color); }

.theme-switch-wrapper input:checked + .slider {
  background-color: var(--theme-switch-bg-color); }

.theme-switch-wrapper input:checked + .slider::before {
  background-color: var(--theme-switch-color);
  transform: translateX(var(--theme-switch-offset)); }

.theme-switch-wrapper .slider.round {
  border-radius: 34px;
  border: solid 1px;
  border-color: var(--main-border-color); }

.theme-switch-wrapper .slider.round::before {
  border-radius: 50%; }


.top-bordered {
  border-top: 1px solid var(--main-border-color); }


/* Table sticky columns */
.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto; 
  overflow-y: auto; 
  max-height: 70vh; }

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  background-color: var(--main-background-color); }

.first-col-120 {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  left: 0px; }

.first-col-60 {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  left: 0px; }

thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: var(--main-background-color); }

thead .first-col-60, thead .first-col-120 {
  z-index: 1; }
  

/* Flask */
.flash {
  margin-bottom: 2rem; 
  border-bottom: 1px solid var(--main-border-color); }

.content {
  margin-bottom: 20rem; }