/* cyrillic-ext */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  src: url(../node_modules/@fontsource/fira-sans-condensed/files/fira-sans-condensed-cyrillic-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  src: url(../node_modules/@fontsource/fira-sans-condensed/files/fira-sans-condensed-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  src: url(../node_modules/@fontsource/fira-sans-condensed/files/fira-sans-condensed-greek-ext-400-normal.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  src: url(../node_modules/@fontsource/fira-sans-condensed/files/fira-sans-condensed-greek-400-normal.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  src: url(../node_modules/@fontsource/fira-sans-condensed/files/fira-sans-condensed-vietnamese-400-normal.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  src: url(../node_modules/@fontsource/fira-sans-condensed/files/fira-sans-condensed-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  src: url(../node_modules/@fontsource/fira-sans-condensed/files/fira-sans-condensed-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
 CSS for the main interaction
*/
.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabLabel {
  user-select: none;
}
.tabLabelLink {
  user-select: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6),
.tabset > input:nth-child(13):checked ~ .tab-panels > .tab-panel:nth-child(7),
.tabset > input:nth-child(15):checked ~ .tab-panels > .tab-panel:nth-child(8),
.tabset > input:nth-child(17):checked ~ .tab-panels > .tab-panel:nth-child(9) {
  display: block;
}

/*
 Styling
*/
body {
  font: 14px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
  color: #333;
  user-select: none;
  font-weight: 300;
}

input[type=submit] {
  height: 23px;
}

.tabset > label {
  position: relative;
  display: inline-block;
  padding: 5px 7px 10px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 600;
}

.tabset > label::after {
  content: "";
  position: absolute;
  left: 7px;
  bottom: 6px;
  width: -webkit-fill-available;
  margin-right: 14px;
  height: 3px;
  background: #8d8d8d;
}

.tabset > label:hover,
.tabset > input:focus + label {
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: #06c;
}

.tabset > input:checked + label {
  border-color: #ccc;
}

.tab-panel {
  padding: 4px 0;
  border-top: 1px solid #ccc;
  white-space: normal;
}

.optimizer-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

.constraints-panel {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.tab {
  height: 94%;
}

.gearPreviewButton {
  width: 140px;
  cursor: pointer;
  margin-bottom: 1px;
  margin-left: 1px;
  margin-right: 10px;
}
.controlsPanel {
  width: 149px;
}

.importerButton {
  width: 200px;
  cursor: pointer;
  margin-bottom: 1px;
  margin-left: 1px;
  margin-right: 5px;
}

.importer-section {
  padding-top: 10px;
  white-space: nowrap;
}

.importerWrapper {
  display: flex;
  flex-direction: column;
}

.optimization-results-panel {
  flex-grow: 2;
  min-height: 340px;
  height: 100%;
  display: flex;
}

#myGrid {
  height: 100%;
  flex-grow: 2;
  min-width: 1150px;
}

.optionsShortSelector > .ms-choice {
  height: 23px;
  font-size: 13px;
}

.gearActionButtonSmaller {
  width: 100%;
  cursor: pointer;
  margin-right: 5px;
  height: 19px;
  margin-bottom: 3px;
}
.optimizer-equipped-section {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  min-height: 225px;
  margin-top: 2px;
  margin-bottom: 14px;
}

.optimizerActionButtons {
  /*flex-grow: 1;*/
  display: flex;
  flex-direction: column;

    align-self: flex-end;
    padding-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
}
.optimizerActionButtonsRow {
  display: flex;
  flex-direction: row;
}

label {
  display: inline;
  vertical-align: middle;
}
input {
  vertical-align: middle;
}

.constraints-panel-col {
  padding: 5px 5px 5px 5px;
  width: 200px;
  flex-grow: 1;
  line-height: 14px;
}

.constraints-panel-col-small {
  padding: 5px 8px 5px 8px;
  width: 150px;
  flex-grow: 0;
  flex-shrink: 0;
  line-height: 14px;
}


.constraints-panel-col-med {
  padding: 5px 4px 4px 4px;
  width: 210px;
  flex-grow: 0;
  flex-shrink: 0;
  line-height: 14px;
}

.constraints-left-panel {
  min-width: 130px;
  width: 150px;
}

.gear-preview-panel {
  display: flex;
  flex-direction: row;
  font-size: 12px;
}

.gear-preview-col {
  display: flex;
  flex-direction: column;
}

#buttonSpace {
  width: 20px;
  height: 4px;
  display: inline-block;
}

.gear-preview-row {
  padding: 12px 12px 5px;
  font-size: 13px;
  width: 180px;
  height: 230px;
  border: 1px solid var(--inactive-color);
  margin-right: 10px;
  border-radius: 7px;
}

.tab {
  display: flex;
  flex-direction: row;
}
.ag-body-horizontal-scroll {
  min-height: 5px !important;
  max-height: 5px !important;
  height: 5px !important;
}
.ag-body-horizontal-scroll-viewport {
  min-height: 5px !important;
  max-height: 5px !important;
  height: 5px !important;
}
.ag-body-horizontal-scroll-container {
  min-height: 5px !important;
  max-height: 5px !important;
  height: 5px !important;
}
.ag-cell {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center;
}
/*
 Demo purposes only
*/

#ocr-test-input-url {
  width: 500px;
}

#exportOutputText {
  width: 75%;
  height: 70px;
}
#loadFromGameExportOutputText {
  width: 75%;
  height: 70px;
}

#example-table .tabulator-row {

}

.tabulator-col {
  font-size: 10px;
}

.tabulator-arrow {
  display: none !important;
}

.tabulator-col-title {
  white-space: nowrap !important;
  overflow: visible !important;
}

#heroes-equipped-section {
  display: flex;
  flex-direction: row;
  min-height: 250px;
  margin-bottom: 8px
}

.heroes-equipped-item {
  width: 150px;
  padding: 10px 15px;
}

.optimizer-number-input {
  height: 15px;
  /*min-width: 50px;
  max-width: 60px;*/
  width: 50px;
  margin-bottom: 2px;
}

.inputStatLabel {
  font-size:12px;
  display: inline-block;
  width: 40px;
  text-align: center;
  white-space: nowrap;
}

.sliderLabel {
  font-size:12px;
  display: inline-block;
  width: 35px;
  padding-top: 3px;
}

.sliderInput {
  width: 30px;
  text-align: center;
  /*margin-right: 5px;*/
  margin-bottom: 1px;
}

.sliderContainer {
  display: inline-block;
  flex-grow: 100;
  padding-left: 10px;
  padding-bottom: 3px;
}

.sliderRow {
  display: flex;
  padding-right: 5px;
  height: 21px;
}

.gearTypeImg {
  width: 33px;
  height: 33px;
      /*border: solid 1px red;*/
      border-radius: 8px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.itemDisplayHeader {
  display: flex;
  flex-direction: row;
  height:30px;
  justify-content: space-between;
}

.itemDisplayHeaderData {
  display: flex;
  flex-direction: column;
  width: 44px;
  line-height: 16px;
  padding-right: 0px;
}

.itemDisplayHeaderDataTop {
    text-align: center;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    font-size: 14px;
    line-height: 17px;
}

.itemDisplayGearRank {
  font-weight: 700;
}

.itemDisplayEquippedHero {
  /*width: 45px;*/
  height: 45px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.itemDisplayMainStat {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-top: solid 1px;
  border-bottom: solid 1px;
  margin-top: 12px;
  padding-top: 5px;
  padding-bottom: 4px;
  /* height: 16px; */
  font-size: 13px;
  font-weight: 600;
}
.itemDisplaySubstats {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  padding-top: 2px;
  padding-bottom: 4px;
  height: 110px;
}
.itemDisplaySubstat {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  line-height: 22px;
}

.itemDisplayFooter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.vertical {
  border-left: 1px solid #e8e8e8;
  height: 90%;
  margin-top: 15px;
  border-color: #2d313600 !important;
}

.shortVertical {
  border-left: 1px solid #e8e8e8;
  height: 65%;
  margin-top: 15px;
}

.horizontalSpace {
  height: 3px;
}

.horizontalLine {
  min-height: 0px;
  border-top: 1px solid #d2d2d2;
  margin-top: 4px;
  margin-bottom: 3px;
}

.horizontalLineWithMoreSpace {
  min-height: 0px;
  border-top: 1px solid #d2d2d2;
  margin-top: 20px;
  margin-bottom: 20px;
}

.itemDisplayFooterSet {
  margin-top: 3px;
  /*margin-right: 14px;*/
  height: 30px;
}
.itemDisplaySetImg {
  /*width: 25px;*/
    height: 28px;
}
.itemDisplayEditImg {
  height: 23px;
  opacity: 0.7;
  cursor: pointer;
  padding: 0px 3px;
}
.itemDisplayLockImg {
  height: 21px;
  opacity: 0.75;
  cursor: pointer;
  padding-left: 3px;
}
.itemDisplayLockImgTransparent {
  height: 21px;
  opacity: 0.5;
  cursor: pointer;
  padding-left: 3px;
}
.itemDisplaySetType {
  font-size: 13px;
  font-weight: 600;
  padding-left: 7px;
  margin-top: auto;
  margin-bottom: auto;
}
.ag-theme-balham .ag-header-cell, .ag-theme-balham .ag-header-group-cell {
  padding-left: 2px;
  padding-right: 2px;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.ag-header-cell {
  padding-top: 2px !important;
}
.ag-header-cell:after {
  top: 5% !important;
}

.ag-header-cell-label {
    align-items: baseline !important;
}

.ag-icon {
    line-height: 14px !important;
    font-weight: 400 !important;
}

.ag-header-row .ag-header-row-column {
    height: 24px !important;
}

.ag-header {
      height: 24px !important;
    min-height: 24px !important;
}

.ag-theme-balham .ag-paging-panel {
  height: 24px !important;
}

.ag-header-label-icon {
  margin-left: -3px !important;
}
.ag-paging-button {
  opacity: 1 !important;
  position: unset !important;
}
.ag-header-cell-text {
  overflow: initial;
  text-overflow: initial;
  min-width: unset !important;
}
.ag-header-cell-label, .ag-header-group-cell-label {
  justify-content: space-around;
  text-overflow: clip;
  width: 40px;
}
.ag-theme-balham .ag-icon {
  font-size: 14px;
  font-weight: 800;
}
.ag-cell-value {
  font-weight: 400;
  text-align: center;
  font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
  font-size: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ag-theme-balham .ag-overlay-loading-wrapper {
  background-color: var(--ag-modal-overlay-background-color,hsla(0,0%,100%,.05));
}

.optgroup {
  font-weight: bold;
  text-decoration: underline;
}

.gear-preview-panel-wrapper {
  display:flex;
  flex-direction: column;
}

.gearPreviewActions {
  padding-left: 40px
}

.image {
  width: 40px;
  height: 40px;
}

.onImage {
  opacity: 1 !important;
}

.offImage {
  opacity: 0.5 !important;
}

.imageLabel {
  display: none !important;
}
.pretty.p-toggle .state.p-on {
  background: gray !important;
  border-radius: 10%;
}

.inputSetFilterSelect {
  min-width: 200px;
  width: 100%;
  user-select: none;
    padding: 1px;
    height: 26px;
}

.inputGearFilterSelect {
  min-width: 200px;
  width: 100%;
  user-select: none;
    padding: 1px;
    height: 26px;
}

.ms-choice>div.icon-close:before {
  font-size: 24px;
  font-weight: 900;
}

/* Disable arrows on number inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.optimizerSetIcon {
  height: 29px;
  vertical-align: middle;
}
.shrinkSets {
  height: 26px;
  vertical-align: middle;
}
.optimizerStarIcon {
  height: 18px;
  vertical-align: middle;
}

.heroIcon {
  height: 50px;
}

.editGearFormRow {
  display: flex;
  flex-direction: row;
  margin-top: 5px;
  margin-bottom: 5px;
}

.editGearFormHalf {
  width: 50%;
}
.editGearFormVertical {
  border-left: 1px solid #e8e8e8;
  height: 400px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 40px;
  margin-right: 40px;
}
.editGearFormVerticalShort {
  border-left: 1px solid #e8e8e8;
  height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 40px;
  margin-right: 40px;
}
.editGearFormVerticalMed {
  border-left: 1px solid #e8e8e8;
  height: 300px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 40px;
  margin-right: 40px;
}
.editGearStatLabel {
  width: 140px;
  text-align: left;
  margin-top: auto;
  margin-bottom: auto;
}
.editSkillLabel {
  width: 200px;
  text-align: left;
  margin-top: auto;
  margin-bottom: auto;
}

.editSkillSelect {
  height: 100%;
  text-align: left;
  padding-left: 4px !important;
  width: 80px !important;
  margin-top: auto;
  margin-bottom: auto;
}

.editEeStatLabel {
  width: 200px;
  text-align: left;
  margin-top: auto;
  margin-bottom: auto;
}

.editGearStatSelect {
  width: 235px;
  /*border: 1px solid black;*/
  text-align: left;
  margin-right: 5px;
}

.editGearStatNumber {
  width: 80px;
}

.draggableColumnLabel {
  height: 45px;
  margin-top: auto;
  margin-bottom: auto;
  line-height: 45px;
}

/*https://stackoverflow.com/questions/50862009/how-to-disable-selection-of-cells-in-ag-grid*/

/*.ag-cell-focus,.ag-cell-no-focus{
  border:none !important;
}*/
/* This CSS is to not apply the border for the column having 'no-border' class */
/*.no-border.ag-cell:focus{
  border:none !important;
  outline: none;
}
*/
.ag-floating-top {
  border-bottom: solid #828282 2px !important
}

.valuePadding {
  border: 1px inset #ccc;
  font-size: 15px;
  height: 100%;
}
.valuePadding input {
  border: none;
  padding: 0px;
  outline: none;
  height: 20px;
}
.blankFormSpace {
  width: 40px;
}
.smallBlankFormSpace {
  width: 10px;
}

.input-holder {
  border: 1px solid black;
  display: inline-block;
}
.input-holder > input {
  border: 0;
  margin: 0;
  padding: 0;
  outline:none;
}

.input-holder-percent {
  border: 1px solid black;
  display: inline-block;
}
.input-holder-percent > input {
  border: 0;
  margin: 0;
  padding: 0;
  outline:none;
}
.input-holder-percent:after {
  content: '%';
}
.bonusStatInput {
  height: 100%;
  text-align: left;
  padding-left: 4px !important;
  width: 80px !important;
}
.bonusStatSelect {
  /*2 px extra for border */
  width: 102px;
  border: 1px solid black;
}
.bonusStatInputPercent {
  height: 100%;
  text-align: left;
  padding-left: 4px !important;
  width: 55px !important;
}

.gridLeftPanel {
  width: 165px;
}

.gridRightPanel {
  width: 275px;
  display: flex;
  flex-direction: row;
}
.panelLabel {
  line-height: 15px;
  display:flex;
  flex-direction: row;
}

.ms-drop ul>li {
    line-height: 24px;
    padding: 0px 8px;
}

.ms-drop ul>li.hide-radio label {
    padding: 0px 8px;
}
#stat-priority-panel {
    min-width: 220px;
}
.constraints-right-panel {
  width: 210px;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  /*position: relative;*/
  justify-content: space-between;
  flex-direction: column;
}
.inputHeroImage {
  /*padding-top: 5px;*/
  /*width: 100px;*/
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
  top: 0px;
  right: -35px;
}
.inputArtifactImage {
  padding-top: 5px;
  /*width: 100px;*/
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  top: 0px;
  width: 45px;
  left: 0px;
}
.inputImprintImage {
  padding-top: 5px;
  /*width: 100px;*/
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  top: 0px;
  height: 25px;
  width: auto;
  left: 0px;
  margin-top: 65px;
}
.inputHeroImageContainer {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: right;
    align-items: center;
}
.checkbox {
    width: 18px;
    height: 18px;
}
.leftRightText {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 20px;
}
.leftRightTextContent {
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
    font-size: 1em;
    font-weight: 400;
}
.heroesTabButtonRow {
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.tooltipImageLeft {
  height: 14px;
  margin-top: auto;
  margin-bottom: 4px;
  margin-right: 7px;
  opacity: 0.5;
}
.tooltipImageRight {
  height: 14px;
  margin-top: auto;
  margin-bottom: 4px;
  margin-left: 7px;
  opacity: 0.5;
}
.itemPreviewCheckbox {
  height: 18px;
  width: 18px;
  cursor: pointer;
}
.itemDisplayFooterIconContainer {
  display: flex;
  align-items: center;
}
.optimizer-checkbox {
  cursor: pointer;
  margin-bottom: 1px;
}
.gearActionButton {
  width: 102px;
  cursor: pointer;
  margin-right: 5px;
}
#buildsSelector {
  width: 167px;
}
.ag-watermark {
  display:none !important;
}
.ag-theme-balham .ag-row:not(.ag-row-first) {
  border: none;
}
.ag-theme-balham .ag-row-odd {
  background-color: #f7f7f7
}

.ag-theme-balham .ag-row-hover {
  background-color: #daf1ff
}
.ag-theme-balham .ag-row-selected {
  background-color: #b7e4ff
}















body.dark-theme {
  color: #eee;
  background: #121212;
}
body.dark-theme a {
  color: #809fff;
}
body.dark-theme input {
  background: #616161;
  border-color: #7d7d7d;
}
.ms-choice.dark-theme {
  background: #616161;
  border-color: #7d7d7d;
}
.ms-parent.dark-theme {
  background: #616161;
  border-color: #7d7d7d;
}
.vertical.dark-theme {
  border-left: 1px solid #696969;
}
.gearPreviewButton.dark-theme  {
  background: #616161;
  border-color: #7d7d7d;
}
.rangeslider__fill__bg.dark-theme  {
  background: #616161;
  border-color: #7d7d7d;
}
.rangeslider__handle.dark-theme {
  border: solid 2px #000000;
}
.gearTabWeaponButton {
  width: 36px;
  height: 36px;
}
.gearTabFilters {
  height: 370px;
  margin-left: 10px
}
.gearTabIcon {
  display: block;
  min-width: 3px;
  min-height: 3px;
  width: 30px;
  height: 30px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 6px;
  top: 4px;
  left: 2px;
}
.gearTabModifyIcon {
  min-width: 3px;
  min-height: 3px;
  width: 45px;
  height: 45px;
  margin-top: -2px;
  margin-bottom: 0px;
}
.gearTabIconSet {
  display: block;
  min-width: 26px !important;
  width: 26px !important;
  height: 26px !important;
  position: relative;
  top: 1px;
  left: -2px;
}
.gearTabLongButton {
  width: 135px;
  min-width: 135px;
  height: 40px;
}
.gearTabMediumButton {
  width: 100px;
  min-width: 100px;
  height: 40px;
}
.gearTabSquareButton {
  width: 42px;
  min-width: 42px;
  height: 42px;
  margin-right: 3px;
}
.gearTabSquareButtonSet {
    width: 38px;
    min-width: 38px;
    height: 38px;
    margin-right: 2px;
}
.gearTabButton {
  /* Table/Selection B */
  height: 100%;
  background: #F8F8F8;
  border-radius: 5px;
  margin-right: 3px;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  min-width: 42px;
  height: 42px;
  border: solid 1px #ececec;
}
.gearTabButtonSet {
    /* Table/Selection B */
    height: 100%;
    background: #F8F8F8;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    cursor: pointer;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border: solid 1px #ececec;
}
.clearAllFilterButton:active {
  background: #E1F4FF;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25);
}
.clearSubstatsFilterButton:active {
  background: #E1F4FF;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25);
}
.gearTabButtonSelected {
  background: #E1F4FF; /* #b7e4ff */
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25);
  border: 1px solid #FFFFFF00;
}
.gearTabGearFilterIconsRow {
  display: flex;
  flex-direction: row;
}
.gearTabGearFilter {
  min-width: 290px;
  width: 290px;
}
.gearTabSetFilter {
  width: 750px;
}
.gearTabSetFilterIconsRow {
  display: flex;
  flex-direction: row;
}
.gearTabGearSetFiltersRow {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}
.gearTabOtherFiltersRow {
  width: 900px;
  display: flex;
  flex-direction: row;
}
.gearTabMainStatFilter {
  width: 300px;
  margin-right: 20px;
}
.gearTabSubstatFilter {
  width: 300px;
  margin-right: 35px;
}
.gearTabFilterLongRow {
  margin-bottom: 6px;
  display: flex;
  flex-direction: row;
}
.gearTabButtonLabel {
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: 3px;
  font-family: Fira Sans Condensed;
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 0.4px;
  color: #6B6B6B;
}
.gearTabShortButton {
  width: 50px;
  min-width: 50px;
  height: 40px;
}
.shortLabel {
  margin-left: auto;
}
.gearTabLevelFilter {
  width: 80px;
  min-width: 80px;
  margin-right: 10px;
}
.gearTabEnhanceFilter {
  width: 130px;
  min-width: 130px;
  margin-right: 10px;
}
.gearTabDuplicateFilter {
  width: 145px;
  min-width: 145px;
  margin-right: 30px;
}
.gearTabModifyFilter {
  width: 145px;
  min-width: 145px;
  margin-right: 10px;
}
.gearTabHorizontalSpace {
  width: 40px;
  height: 1px;
}
.gearTabFilterLabel {
  display: inline-block;
  cursor: pointer;
}
.reforgeSwitch {
  min-width: 180px;
  display: inline-block;
  float: right;
  margin-left: auto;
  display: flex;
  flex-direction: row;
}
.reforgeSwitchLabel {
  margin-right: 5px;
}
.switch {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
}
.switch-input {
  display: none;
}
.switch-label {
  display: block;
  width: 48px;
  height: 24px;
  text-indent: -150%;
  clip: rect(0 0 0 0);
  color: transparent;
  user-select: none;
}
.switch-label::before,
.switch-label::after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}
.switch-label::before {
  width: 100%;
  height: 100%;
  background-color: #dedede;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}
.switch-label::after {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}
.switch-input:checked + .switch-label::before {
  background-color: #78c5f5;
}
.switch-input:checked + .switch-label::after {
  left: 24px;
}



.heroesTabTopButtonRowLeft {
  height: 20px;
  display:inline-block;
  margin-right: auto;
}

.heroesTabTopButtonRowRight {
  height: 30px;
  display:inline-block;
  margin-right: 25px;
}
.heroTabButton {
  /*width: 32px;*/
  /*min-width: 32px;*/
  height: 32px;
}
.gearTabTopPanelLabel {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
.gearTabTopPanelLabelLeft {
  display:flex;
  flex-direction: row;
}
.selectedCountLabel {
  display: inline-block;
  width: 100px;
  text-align: right;
  position:absolute;
  right: 75px;
}
.selectedCount {
  display: inline-block;
  width: 70px;
  text-align: right;
}
#substatPriorityLabel {
  cursor: pointer;
}
#substatPriorityLabel:hover:after{
  cursor: pointer;
}
#statsLabel {
  cursor: pointer;
}
#statsLabel:hover:after {
  cursor: pointer;
  content: attr(data-content);
}
#ratingsLabel {
  cursor: pointer;
}
#ratingsLabel:hover:after {
  cursor: pointer;
  content: attr(data-content);
}
#forceLabel {
  cursor: pointer;
}
#forceLabel:hover:after {
  cursor: pointer;
  content: attr(data-content);
}
#optionsLabel {
  cursor: pointer;
}
#optionsLabel:hover:after {
  cursor: pointer;
  content: attr(data-content);
}
/*#accessorySetsLabel {
  cursor: pointer;
}
#accessorySetsLabel:hover:after {
  cursor: pointer;
  content: attr(data-content);
}*/

.gearTabBottomPanel {
  display: flex;
  flex-direction: row;
  height: 400px;
}
.gearTabPreview {
  min-width: 210px;
  padding: 30px;
  padding-right: 5px;
  padding-left: 5px;
}
.optionsExcludeGearFrom {
  width: 150px;
}

.toggleRow {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.toggleRowSpace {
  height: 1px;
  width: 10px;
}
.switch {
  margin-right: 10px
}
.switchText {
  margin-top: auto;
  margin-bottom: auto;
}
.settingsNumber {
  height: 18px;
  width: 80px;
  margin-right: 10px
}

.statPreviewContainer {
  display:flex;
  flex-direction: column;
}
.statPreviewRow {
  height: 25px;
  font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
  font-size: 1em;
  font-weight: 400;
}
.statPreviewImg {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.statPreviewBefore {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  width: 45px;
}
.statPreviewArrow {
  display: inline-block;
  vertical-align: middle;
  text-align: right;
  width: 15px;
  padding-left: 3px;
  padding-right: 3px;
}
.statPreviewAfter {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  width: 40px;
}
.statPreviewDiff {
  display: inline-block;
  vertical-align: middle;
  text-align: right;
  width: 60px;
}
.setPreviewBefore {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  min-width: 77px;
}
.setPreviewAfter {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  width: 100px;
}
.setPreviewArrow {
  display: inline-block;
  vertical-align: middle;
  text-align: right;
  width: 15px;
  padding-left: 0px;
  padding-right: 0px;
}
.statPreviewDiff.up {
    color: #00BE9B;
    /*color: #00adff; blue*/
}
.statPreviewDiff.down {
    color: #dc391e;
}
.addHeroesSelector {
  width: 170px;
  display: inline-block;
}
.previewSet {
  height: 25px;
  vertical-align: middle;
}
.gearGridContainer {
  flex-grow: 2;
  min-height: 350px;
  display: flex;
  resize: vertical;
  overflow: hidden;
}
#gear-grid {
  width: 100%;
}
.gearSectionContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 95%;
}
.heroesSectionContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
.heroesTableContainer {
  min-height: 360px;
  height: 360px;
  flex-grow: 1;
  margin-top: 6px;
  resize: vertical;
  overflow: hidden;
}
.buildsTableContainer {
  min-height: 163px;
  height: 163px;
  flex-grow: 0.2;
  resize: vertical;
  overflow: hidden;
}
#heroes-table {
  height: 100%;
  width: 100%;
}
.itemDisplayMaterial {
  height: 34px;
  padding-right: 12px;
}

/* START dark mode toggle */

.donateIcon {
  cursor: pointer;
  height: 30px;
  border-radius: 6px;
  margin-right: 20px;
}
.badgeIcon {
  cursor: pointer;
  height: 60px;
  border-radius: 6px;
}
.darkModeToggleContainer {
  display: flex;
  background: var(--color-secondary);
  flex-direction: column;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  position: absolute;
  top: 12px;
  right: 15px;
}
.darkModeToggleContainer h1 {
  color: var(--font-color);
  font-family: sans-serif;
}
.darkModeToggleContainer button {
  color: var(--font-color);
  background: var(--color-primary);
  padding: 10px 20px;
  border: 0;
  border-radius: 5px;
}
.coffeeContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  position: absolute;
  top: 7px;
  right: 80px;
}
.coffeeContainerImage {
    height: 32px;
    cursor: pointer;
}

/* The switch - the box around the slider */
.darkSwitch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 20px;
}

/* Hide default HTML checkbox */
.darkSwitch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.darkSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.darkSlider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: 0px;
  bottom: 4px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  box-shadow: 0 0px 15px #2020203d;
  background: white url('../assets/sunny.png');
  /*background: white url('https://i.ibb.co/FxzBYR9/night.png');*/
  background-repeat: no-repeat;
  background-position: center;
}

input:checked + .darkSlider {
  background-color: #444444;
}

input:focus + .darkSlider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .darkSlider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
  /*background: white url('https://i.ibb.co/7JfqXxB/sunny.png');*/
  background: #ddbeff url(../assets/night2.png);
  background-repeat: no-repeat;
  background-position: center;
}

/* Rounded sliders */
.darkSlider.round {
  border-radius: 34px;
}

.darkSlider.round:before {
  border-radius: 50%;
}

/* END dark mode toggle */

.itemDisplaySubstatValueAndConversion {
  display: flex;
}
.substatConvertedImage {
  height: 20px;
  width: 20px;
  margin-left: 5px;
  margin-top: auto;
  margin-bottom: auto;
}
.languageToggle {
  margin-left: 5px;
  margin-right: 5px;
}
.rangeslider {
  height: 18px !important;
}
.ag-row {
      border-bottom-style: unset !important;
}
.swal2-success-circular-line-left {
  display: none;
}
.swal2-success-circular-line-right {
  display: none;
}
.swal2-success-fix {
  display: none;
}

.swal2-actions {
  z-index: 0 !important;
}
.groupContainer {
  display: flex;
  flex-direction: row;
}
.groupColumn {
  width: 160px;
  margin-right: 15px;
}
.list-group-item {
  cursor: move;
  cursor: -webkit-grabbing;
  background-color: var(--inactive-color);
  color: var(--font-color);
  border-radius: 1rem;
  border-radius: 5px;
  margin-top: 5px;
  height: 30px;
  text-align: left;
  padding-left: 6px;
  line-height: 30px;
}
.dragOrderList {
  font-size: 14px;
  border: 1px solid;
  border-radius: 10px;
  padding-top: 2px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 6px;
  background: var(--input-color);
  min-height: 430px;
  width: 120px;
}
.draggableMovableContainer {
  height: 380px;
}

:root {
    --input-color: #e0e0e0;
    --inactive-color: #cacaca;
    --bg-color: #ffffff;

/*
    --bg-color: #212529;
    --font-color: #e2e2e2;
    --border-color: #2D3136;
    --accent-red: #F84C48;
    --outline-color: #f84b4860;
    --btn-color: #2D3136;
    --accent-green: #00BE9B;
    --scrollbar-grey: #5a5a5a;
    --link-blue: #1e90ff;*/
}

/* Collapse */
/* Style the button that is used to open and close the collapsible content */

.collapsible {
  background-color: #e0e0e0;
  color: #333;
  cursor: pointer;
  padding: 20px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-bottom: 10px;
  outline: none !important;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #cacaca;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  /*background-color: #f1f1f1;*/
}
.thankYouContainer {
  width: 646px;
}
#aboutTab {
  padding-left: 10px;
}
#settingsTab {
  padding-left: 10px;
}
#heroLibraryTab {
  padding-left: 10px;
}
#gwMetaTab {
  padding-left: 10px;
}
.newFeatures {
  text-align: left;
  line-height: 28px;
}
.awn-toast.awn-toast-warning {
    color: #8e4b00 !important;
}
.subModCheckbox {
  margin-left: 20px;
}
.editGearCycle {
  margin-left: 16px;
  height: 20px;
}

#enhanceTabPreview {
  width: 200px;
  margin-left: 50px;
}
.enhanceChart {
  width: 270px;
  height:  290px;
  margin-left: 30px;
  padding-top: 10px;
}

.enhanceContainer {
  display: flex;
  flex-direction: row;
  height: 270px;
}

.bars {
  width: 1000px;
  height:  60px;
}

.radarChart {
  margin-left: 50px;
  width: 400px;
  height:  250px;
}

.gsChart {
  width: 820px;
  height:  300px;
}

.enhanceSecondRow {
  display: flex;
  flex-direction: row;
  height: 260px;
}
.enhanceThirdRow {
  display: flex;
  flex-direction: row;
  height: 200px;
}
.stats {
  min-width:  150px;
  display: flex;
  flex-direction: row;
}
#statsRight {
  min-width:  30px;
}
#statsLeft {
  margin-left: 10px;
  min-width:  200px;
}
.barsContainer {
  margin-top: 30px;
  margin-left: 70px;
}
#detectorStatus {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 60px;
}
#startCompanion {
  margin-left: 60px;
}
#statusSymbol{
  width: 25px;
  height: 25px;
  background-color: red;
  border: 1px;
  border-radius: 25px;
}
#statusText {
    line-height: 26px;
    margin-left: 10px;
}

.colorPickerText {
  margin-top: auto;
  margin-bottom: auto;
  cursor: pointer;
}

.colorPickerText:hover:after {
  cursor: pointer;
  content: attr(data-content);
}

.selectorSetImage {
  height: 26px;
  margin-right: 4px;
  margin-left: -2px;
}
.selectorSetText {
  height: 26px;
}
.selectorSetContainer {
  display: flex;
  flex-direction: row;
}
.importerRadioLabel {
  margin-right: 20px;
}

.multiInfoPanel {
  padding: 5px 8px 5px 8px;
  width: 142px;
  flex-grow: 0;
  flex-shrink: 0;
  line-height: 14px;
  margin-right: 5px;
  border-radius: 7px;
}

.multiTopRow {
  display: flex;
  flex-direction: row;
  height: 310px;
}

.multiGrid {
  min-width: 1200px;
  flex-grow: 1;
  margin-right: 15px;
}

.editFiltersDialog {
  display: flex;
  flex-direction: row;
  text-align: left;
  font-size: 14px;
}
/*
.ag-theme-balham .ag-ltr .ag-cell-range-single-cell, .ag-theme-balham .ag-ltr .ag-cell-range-single-cell.ag-cell-range-handle, .ag-theme-balham .ag-ltr .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected), .ag-theme-balham .ag-ltr .ag-has-focus .ag-cell-focus:not(.ag-cell-range-selected), .ag-theme-balham .ag-ltr .ag-has-focus .ag-full-width-row.ag-row-focus .ag-cell-wrapper.ag-row-group, .ag-theme-balham .ag-rtl .ag-cell-range-single-cell, .ag-theme-balham .ag-rtl .ag-cell-range-single-cell.ag-cell-range-handle, .ag-theme-balham .ag-rtl .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected), .ag-theme-balham .ag-rtl .ag-has-focus .ag-cell-focus:not(.ag-cell-range-selected), .ag-theme-balham .ag-rtl .ag-has-focus .ag-full-width-row.ag-row-focus .ag-cell-wrapper.ag-row-group {
  border: 1px solid transparent;
}

.ag-theme-balham .ag-cell, .ag-theme-balham .ag-full-width-row .ag-cell-wrapper.ag-row-group {
  border: none !important;
}*/

.injectedSummaryRow {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
}
.injectedSummaryComponent {
  width: 200px;
}
.multiSpace {
  height: 1px;
  display: block;
}
.multiOptimizerControlPanel {
  display: flex;
  flex-direction: row;
  margin-left: 8px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.inactiveColorBorder {
  border-color: var(--inactive-color);
}

.enhanceGuide {
  margin-left: 10px;
  margin-top: 10px;
}
.thankList {
              line-height: 1em;
}

.locatorTip {
  width: 113px;
  font-size: 12.5px;
  line-height: 17px;
}

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;700&display=swap');


/* Tabs */


.tabsWrapperBody {
  text-align: center;
/*  font-family: 'Jost', sans-serif;*/
/*  background-color: var(--bg-color);*/
}

.tabsWrapper {
/*  width: 700px;*/
  margin: auto;
/*  background-color: var(--inactive-color);*/
  border-radius: 10px;
/*  box-shadow: 0px 5px 15px rgba(0, 0, 0, .1);*/
}

.tabsButtonWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.tab-button {
  letter-spacing: 3px;
  border: none;
  padding: 10px;
  background-color: var(--inactive-color);
  color: var(--font-color);
  font-size: 18px;
  cursor: pointer;
  transition: 0.5s;
}

.tab-button:hover {
  background-color: var(--bg-color);
}

.tab-button.active {
  background-color: var(--bg-color);
}

.tabsContent {
  display: none;
  padding: 10px 20px;
  margin-top: 0px;

}

.tabsContent.active {
  display: block;
/*  background-color: var(--inactive-color);*/
}

.skillTypeSelect {
  width: 250px !important;
}
