@layer base {

  
*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Typography */
html { font-size: 100%; }

body {
  font-size: var(--text-default-size);
  font-family: var(--text-default-font);
  font-weight: var(--text-default-weight);
  color: var(--i-text-base-secondary);
  line-height: var(--text-default-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  display: block;
  margin-top: 1em;
  margin-right: 0;
  margin-bottom: 0.3em;
  margin-left: 0;
  padding: 0;
  text-wrap: pretty;
  color: var(--i-text-base-primary);
  font-family: var(--heading-default-font);
  font-weight: var(--heading-default-weight);
  line-height: var(--heading-default-line-height);
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }

h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child {
  margin-top: 0;
}

p {
  font-weight: var(--text-default-weight);
  color: var(--i-text-base-secondary);
  font-family: inherit;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1em;
  margin-left: 0;
  padding: 0;
  text-wrap: pretty;
  font-size: var(--text-default-size, 16px);
  line-height: var(--text-default-line-height);
}

i, em { font-style: italic; }
b, strong { font-weight: 700; }

a { color: var(--link-color); }
:where(a):hover { color: var(--link-hover-color); }
:where(a):active { color: var(--link-active-color); }
:where(a):visited { color: var(--link-visited-color); }

ul, ol {
  margin-top: 0;
  margin-bottom: var(--size-md);
  padding-left: var(--size-sm);
  list-style-position: inside;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: var(--size-sm);
  padding-left: 0;
}

li:last-child {
  margin-bottom: 0;
}

li > ul,
li > ol {
   margin-bottom: 0;
   margin-top: var(--size-sm);
}


code {
  font-family: var(--font-stack-mono-code);
  font-weight: 500;
}

hr {
  height: 1px;
  border: 0;
  border-top: 1px solid var(--line-color);
  padding: 0;
  margin: var(--sizing-lg, 40px) 0;
}

/* Media */
img,
video {
  display: block;
  width: 100%;
  height: auto;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
    height: var(--input-height);
    max-width: 100%;
    background-color: var(--input-bg-color);
    border: solid var(--input-border-width) var(--input-border-color);
    border-radius: var(--input-border-radius);
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    color: var(--input-text-color);
    padding-left: var(--input-horizontal-padding);
    padding-right: var(--input-horizontal-padding);
}

select {
    appearance: none;
    height: var(--input-height);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTAgNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEgMWw0IDQgNC00Ii8+PC9zdmc+');
    background-repeat: no-repeat;
    background-position: right var(--input-horizontal-padding) center;
    padding-right: calc(var(--input-horizontal-padding) * 3);
    padding-left: var(--input-horizontal-padding);
    background-color: var(--input-bg-color);
    border: solid var(--input-border-width) var(--input-border-color);
    border-radius: var(--input-border-radius);
    color: var(--input-text-color);
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    max-width: 100%;
}

textarea {
    min-height: var(--input-height);
    line-height: 1.5;
    padding: 10px var(--input-horizontal-padding);
    background-color: var(--input-bg-color);
    border: solid var(--input-border-width) var(--input-border-color);
    border-radius: var(--input-border-radius);
    color: var(--input-text-color);
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    max-width: 100%;
}

input::placeholder,
select::placeholder,
textarea::placeholder {
    color: var(--input-placeholder-color);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--input-focus-color);
    box-shadow: 0 0 0 var(--input-focus-ring-width) var(--input-focus-color);
}

label {
    display: block;
    color: var(--input-label-color);
    font-size: var(--input-font-size);
    font-weight: 500;
    margin: 0 0 3px 0;
}

:is(button,[type="button"],[type="submit"], .button){
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: var(--input-height);
    padding: 0 calc(var(--input-height) / 2);
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border-radius: var(--input-border-radius);
    cursor: pointer;
    box-shadow: none;

    --btn-bg-color: var(--button-primary-bg-color);
    --btn-text-color: var(--button-primary-text-color);
    --btn-border: var(--button-primary-border);

    background-color: var(--btn-bg-color);
    color: var(--btn-text-color);
    border: var(--btn-border);
}

:is(:disabled,[aria-disabled="true"]) {
    opacity:.45;
    cursor:not-allowed;
    filter:grayscale(.2);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--table-bg-color);
    color: var(--table-text-color);
    table-layout: auto;
    font-size: var(--table-font-size);
    font-weight: var(--table-font-weight);
    font-family: var(--table-font-family);
}
  
th, td {
    padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal);
    border-bottom: solid 1px var(--table-border-color);
    text-align: left;
}
  
th {
    background-color: var(--table-header-bg-color);
    font-weight: var(--table-header-font-weight);
    color: var(--table-header-text-color);
    font-size: var(--table-header-font-size);
    text-transform: uppercase;
}

}