.field,
.grid-header {
    display: grid;
    grid-template-columns: auto 1fr 110px 162px 110px;
    grid-column-gap: 10px;
    min-height: 35px;
}

.damage-sources,
.fields-container,
.conclusion-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 5px;
}

.attack-bonus-container {
    text-align: end;
    min-height: 35px;;
}

.breakpoint-label {
    text-align: end;
}

.header > span,
.breakpoint-disable-feat-label {
    font-size: 25px;
}

.breakpoint-disable-feat-label {
    font-weight: bold;
}

.crit-system-container {
    text-align: center;
    min-height: 35px;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 10px;
}

.attack-bonus-container label,
.armor-class-container label,
.attack-type-label {
    margin: auto 10px;
}

.min-crit-value-label,
.crit-system-label {
    margin: auto 0;
}

.attack-bonus-container div {
    display: grid;
    grid-template-columns: 1fr auto auto;
    min-height: 35px;
}

.armor-class-container div {
    display: grid;
    grid-template-columns: auto auto 1fr;
    min-height: 35px;
}

.crit-system-selector {
    margin: 0 auto 0 0;
}

.advantage {
    color: #2e8b57;
    transform: rotate(180deg);
}

.disadvantage {
    color: #a9203e;
}

.ac-ab-container,
.crit-settings-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    margin: auto;
}

.ac-ab-container > span {
    margin: auto;
}

.settings-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    margin: 5px 0;
}

.field-buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
}

.dice-damage-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-column-gap: 10px;
}

.dice-damage-container span {
    margin: auto;
}input {
    text-align: center;
}

.header-buttons-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 10px;
}

.add-button-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 10px;
}

.flat-damage-container {
    display: grid;
    grid-template-columns: 1fr;
}

.avg-damage-container,
.avg-crit-damage-container,
.hit-chance-container,
.non-crit-chance-container,
.crit-chance-container,
.expectation-damage-container,
.conclusion-header {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) 66px 11px 66px;
    grid-row-gap: 5px;
    grid-column-gap: 10px;
    margin: 0 32%;
    font-size: 16px;
}

.avg-damage-container,
.avg-crit-damage-container,
.hit-chance-container,
.non-crit-chance-container,
.expectation-damage-container {
    border-bottom: solid;
    border-bottom-width: 1px;
    border-bottom-color: lightslategray;
}

.breakpoint-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 5px;
    grid-column-gap: 10px;
}

.breakpoint-container > span,
.breakpoint-disable-feat-label {
    text-align: center;
}

.expectation-damage-container > span {
    margin: auto;
}

.hit-chance-no-feat-description-label,
.non-crit-chance-no-feat-description-label,
.crit-chance-no-feat-description-label,
.avg-crit-damage-no-feat-output,
.avg-damage-no-feat-output,
.expectation-damage-no-feat-output {
    margin: 0 0 0 auto;
}sup i {
    font-size: 10px;
    margin: auto;
    padding: 0;
}

.expectation-damage-label,
.avg-damage-label,
.avg-crit-damage-label,
.non-crit-chance-label,
.crit-chance-label,
.hit-chance-label {
    text-align: center;
}

.can-crit-explanation,
.chances-explanation,
.without-ss-label {
    text-align: end;
}

.can-crit-explanation,
.chances-explanation,
.breakpoint-container > span {
    font-size: 14px;
}hr {
    width: 100%;
}label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}i {
    padding: 0px 5px;
    margin: auto;
    width: 20px;
    text-align: center;
}

.selector-with-icon-container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column-gap: 10px;
}

.selector-with-icon-container > i {
    padding: 0px;
}

.selector-with-icon-container select,
.crit-system-selector {
    text-align: center;
}

body,
button,
input,
select {
    font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 20px;
    font-weight: 400;
}

.wrapper {
    width: 80%;
    min-width: 670px;
    max-width: 1080px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f5f2cf, #f3f1db);
    margin: 24px auto 0px auto;
    padding: 12px;
}

.grid-header > label {
    margin-top: auto;
    align-self: center;
    text-align: center;
    font-weight: bold;
}

.foother {
    font-size: 14px;
}

.winner {
    font-weight: bold;
}

button i {
    pointer-events: none;
}

.attack-type-container {
    display: grid;
    grid-template-columns: auto auto;
}

@supports (scrollbar-width: thin) {
  * {
    scrollbar-width:thin
  }
}