/* Base display */

*{
	font-family: 'Montserrat', sans-serif;
}

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

.title-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.color-none {
    background-color: var(--rarity-none);
}

.item-border {
	border: solid 1px var(--zone-border-color);
	border-radius: 5px;
}

.padding-base {
	padding: 5px;
}

.flex-gear {
    flex: 1;
}

.data-item-data-line-title.item-border + .data-item-data-line-craft.item-border, .data-item-data-line-title.item-border + .data-item-data-line-offline.item-border {
	border-top: none;
}

.data-category + .data-category {
	margin-top: 10px;
}

.data-category {
	display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 5px;
    white-space: nowrap;
    padding: 5px;
    background: var(--zone-background);
    width: 100%;
    box-sizing: border-box;
}

.data-category-stuff {
    grid-template-columns: auto auto auto;
}

.data-category-column {
	display: flex;
	flex-direction: column;
    gap: 5px;
    white-space: nowrap;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
}

.with-background {
	background: var(--zone-background);
}

.data-category-title {
	display: block;
    width: 100%;
}

.data-category-group {
	margin-top: 10px;
	display: flex;
	flex-direction: row;
	gap : 10px;
	width: 100%;
}

@media (max-width: 767px) {
	.data-category-group {
		flex-wrap: wrap;
	}
}

.data-category-group .data-category {
	margin-top: 0;
}

.data-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 222px), 1fr));
	gap: 10px 5px;
	white-space: nowrap;
	padding: 2px;
	text-align: center;
}

.data-items-flex {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.data-item-name, .data-item-data-line-title {
	display: flex;
	align-items: center;
    justify-content: center;
	word-wrap: break-word;
	padding: 0 2px;
}

.data-title, .data-item, .data-items-tab {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.data-items-tab {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	min-width: 250px;
}

.data-items-line {
	display: flex;
	flex-direction: row;
	gap: 5px;
	padding: 8px;
	justify-content: space-between;
}

.data-items-tab-cat-title {
	padding: 5px;
	white-space: break-spaces;
}

.data-item-datas {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
}

.data-item-data-line-offline, .data-item-data-line-craft {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
}

.data-item-data-line-crafting {
	display: grid;
	grid-template-columns: auto auto;
	padding: 0px 20px;
	gap: 5px;
}

.data-item-data-line-crafting-title {
	justify-self: start;
}

.data-item-data-line-crafting-amount {
	justify-self: end;
}

.data-item-data-line-gear-item {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 0px 20px;
	gap: 10px;
    align-items: center;
}

.data-item-data-line-values {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 2px;
	align-items: center;
}

.data-item-data-line-item-element {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.item-centered {
	display: flex;
	align-items: center;
    justify-content: center;
}

.data-title {
	min-width: 80px;
	align-items: center;
    justify-content: center;
}

.data-title > div {
	white-space: break-spaces;
	text-align: center;
}

.data-title > .view-table-switch {
  white-space: unset;
}

.main-data {
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
	flex-wrap: wrap;
}

.main-title {
	padding:15px;
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	margin: 0;
}

h1.main-title {
	font-size: 2rem;
}

.main-info {
	margin-top: 20px;
}

.wrapper .title{
	padding: 30px 20px;
	text-align: center;
	font-weight: 700;
}

.wrapper .tabs_wrap{
	padding: 20px;
	border-bottom: none;
}

.wrapper .tabs_wrap ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	border-radius: 15px;
	overflow: hidden;
	border: 1px solid var(--zone-border-color);
}

.wrapper .tabs_wrap ul > li{
	flex: 1 0 10%;
}

@media ( max-width: 768px) {
  .wrapper .tabs_wrap ul > li{
    flex-basis: 26%;
  }
}

@media ( max-width: 544px) {
  .wrapper .tabs_wrap ul > li{
    flex-basis: 34%;
  }
}

@media ( max-width: 320px) {
  .wrapper .tabs_wrap ul > li{
    flex-basis: 51%;
  }
}

.wrapper .tabs_wrap ul li{
	list-style: none;
	width: 135px;
    text-align: center;
    background: var(--inactive-tab-background);
    padding: 13px 15px;
	cursor: pointer;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--inactive-tab-text);
	font-weight: 600;
}

.wrapper .tabs_wrap ul li.active{
	background: var(--button-tab-background);
	color: var(--button-tab-text);
}

.wrapper .tabs_wrap ul li:hover {
	background: var(--button-tab-background-hover);
	color: var(--button-tab-text-hover);
}

.tab_item_wrap {
	display: none;
	border-bottom:none;
	padding: 15px;
}

.tab_item_wrap.active {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-bottom: solid 1px var(--zone-border-color);
}

.wrapper .container .item_wrap:hover{
	background: var(--inactive-tab-background);
}

.tab_item_wrap.active + .tab_item_wrap.active {
	border-top: none;
}

.wrapper .container .item{
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

.hidden {
	display: none;
}

.one-line {
	min-width: max-content;
}

.no-wrap {
	flex-wrap: nowrap;
}

.full-flex {
	flex: 1;
}

.wrap-text {
	word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
}

.align-start {
	justify-content: flex-start;
}

.title-alone {
	margin-top: 10px;
	width: 100%;
	margin-bottom: 5px;
	padding: 5px;
	box-sizing: border-box;
}

.title-with-input {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.bold-title {
	font-weight: 600;
}

.char-pic {
  max-height: 40px;
}

.title-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

.title-flex.pet-tab-category {
	flex-direction: column;
}

.width-total {
	width: 100%
}

.no-gap {
	gap: 0;
}

.secondary-title {
	padding: 15px;
}

.auto-width {
	width: auto;
}

.full-size {
	width: 90%;
	min-height: 50px;
  max-height: 400px;
  overflow: auto;
}

.controlled-input.import-data {
  width: 90%;
}

.flex-duo {
	justify-content: space-evenly;
}

.flex-duo .data-item-data-line {
	flex: 40%;
	max-width: 40%;
}

.item-title {
	grid-column: span 2;
}

/* input fields */

input, textarea {
	background: var(--input-background);
	color: var(--input-text-color);
}

button, .button {
	cursor: pointer;
}

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

.button {
    background: var(--button-tab-background);
    border: none;
    color: var(--button-tab-text);
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
    width: 200px;
}
  
.character-gear {
  max-width: fit-content;
}

.character-title {
  margin-top: 0;
  border-bottom: solid 1px var(--zone-border-color);
  justify-content: space-around;
}

.character-title .character-name  {
  align-self: center;
}

#characters-box {
  margin-bottom: 300px;
}

.data-title > .ascension-info {
  white-space: normal;
  padding: 10px;
}

/* loading spinner */

.spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lds-roller {
  /* change color here */
  color: #1c4c5b
}
.lds-roller,
.lds-roller div,
.lds-roller div:after {
  box-sizing: border-box;
}
.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7.2px;
  height: 7.2px;
  border-radius: 50%;
  background: currentColor;
  margin: -3.6px 0 0 -3.6px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 62.62742px;
  left: 62.62742px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 67.71281px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 70.90963px;
  left: 48.28221px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 70.90963px;
  left: 31.71779px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 67.71281px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 62.62742px;
  left: 17.37258px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12.28719px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

div.dt-container .dt-input {
  background-color: var(--dropdown-background);
  color: var(--dropdown-color);
}

div.dt-container {
  width: 100%;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--toggle-off-background);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background: var(--body-background);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background: var(--toggle-on-background);
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px var(--button-tab-background);
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/* Select */
select {
    /* Reset Select */
    appearance: none;
    outline: 10px red;
    border: 0;
    box-shadow: none;
    /* Personalize */
    flex: 1;
    padding: 0 1em;
    color: var(--dropdown-color);
    background-color: var(--dropdown-background);
    background-image: none;
    cursor: pointer;
  }
  /* Remove IE arrow */
  select::-ms-expand {
    display: none;
  }
  /* Custom Select wrapper */
  .select_box {
    position: relative;
    display: flex;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    overflow: hidden;
  }
  .select_box.small-select_box {
    width: 200px;
    height: 23px;
  }

  /* Arrow */
  .select_box::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    padding: 1em;
    color: var(--dropdown-arrow-color);
    background-color: var(--dropdown-arrow-background);
    transition: .25s all ease;
    pointer-events: none;
  }
  .select_box.small-select_box::after {
    padding: 0.2em;
  }

  /* Transition */
  .select_box:hover::after {
    color: var(--dropdown-color);
  }
  select:focus {
      outline:none;
  }

  .value-control {
    width: 23px;
    height: 23px;
    margin: 0 8px;
    background: var(--input-background);
    border: 2px solid var(--input-border);
    border-radius: 5px;
    color: var(--input-text-color);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
  }

  .controlled-input {
    margin: 0;
    height: 15px;
    width: 80px;
    border: 2px solid var(--input-border);
    border-radius: 5px;
    padding: 2px 8px;
    text-align: center;
    font-size: 14px;
    background: var(--input-background);
    color: var(--input-text-color);
  }
  
  .controlled-input::-webkit-outer-spin-button,
  .controlled-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  .controlled-input {
    -moz-appearance: textfield;
  }
  
  .input-with-control {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
  }

  input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: var(--input-checkbox-background);
    /* Not removed via appearance */
    margin: auto;
  
    font: inherit;
    color: var(--input-checkbox-color);
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid var(--input-checkbox-border);
    border-radius: 0.15em;
    transform: translateY(-0.075em);
  
    display: grid;
    place-content: center;
  }
  
  input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--input-checkbox-color);
    /* Windows High Contrast Mode */
    background-color: CanvasText;
  }
  
  input[type="checkbox"]:checked::before {
    transform: scale(1);
  }
  
  .inline-checkbox {
      border-top: solid 1px var(--zone-border-color);
      padding-top: 5px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      justify-content: center;
  }
  
  .inline-checkbox input[type="checkbox"] {
      margin: 0;
  }
  
  input[type="radio"] {
      appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border: 1px solid var(--input-radio-border);
      border-radius: 50%;
      margin-right: 10px;
      background-color: var(--input-radio-background);
      position: relative;
      top: 6px;
  }
  
  input[type="radio"]:checked::before {
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      background-color: var(--input-radio-color);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  input[type=range] {
    height: 21px;
    -webkit-appearance: none;
    margin: 0;
    width: 100%;
    background: transparent;
  }
  input[type=range]:focus {
    outline: none;
  }
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: var(--slider-background);
    border-radius: 15px;
    border: none;
  }
  input[type=range]::-webkit-slider-thumb {
    border: none;
    height: 15px;
    width: 5px;
    border-radius: 15px;
    background: var(--slider-mark);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: var(--slider-background);
  }
  input[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: var(--slider-background);
    border-radius: 15px;
    border: none;
  }
  input[type=range]::-moz-range-thumb {
    border: 0px solid var(--slider-mark);
    height: 15px;
    width: 5px;
    border-radius: 15px;
    background: var(--slider-mark);
    cursor: pointer;
  }
  input[type=range]::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }
  input[type=range]::-ms-fill-lower {
    background: var(--slider-background);
    border: none;
    border-radius: 30px;
  }
  input[type=range]::-ms-fill-upper {
    background: var(--slider-background);
    border: none;
    border-radius: 30px;
  }
  input[type=range]::-ms-thumb {
    margin-top: 1px;
    border: 0px solid var(--slider-mark);
    height: 15px;
    width: 5px;
    border-radius: 15px;
    background: var(--slider-mark);
    cursor: pointer;
  }
  input[type=range]:focus::-ms-fill-lower {
    background: var(--slider-background);
  }
  input[type=range]:focus::-ms-fill-upper {
    background: var(--slider-background);
  }


  .small-button, .medium-input {
    max-height: 30px;
    max-width: 100px;
    padding: 5px 10px;
}

.input-holder + .small-button {
    margin-left: 5px;
}

/* affichage grille items */
.data-item-data-grid {
    display: flex;
    flex-direction: column-reverse;
    padding: 10px;
}

.data-items-grid > .flex-gear {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.data-item-tier {
    display: flex;
    flex-direction: row;
    padding: 5px;
    gap: 5px;
    justify-content: center;
}

.item-svg {
    width: 65px;
    height: 65px;
}

.image-wm {
  width: unset;
  height: 55px;
}

.data-items-grid {
    align-items: stretch;
}

.data-item-data-line-values > span {
  text-align: center;
}

.data-item-container {
  display: flex;
  flex-direction: row;
}

.title-double {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.radio-image {
  border: 2px solid transparent;
  cursor: pointer;
}

.radio-image.selected {
  outline: 2px solid var(--input-checkbox-color);
  outline-offset: 2px;
}

.vertical-control {
  flex-direction: column;
}

.vertical-control .value-control {
  border: none;
  margin: 0;
}

.no-border {
  border: none;
}

.vertical-control .controlled-input {
  border: none;
  width: 14px;
}

.data-item-data-grid-gears {
  flex-direction: column-reverse;
}

/* select as image */

.custom-select-container {
    position: relative;
    display: inline-block;
}

#select-image {
    cursor: pointer;
}

.custom-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    border: 2px solid var(--input-border);
    color: var(--input-text-color);
    font-size: 14px;
    background-color: var(--zone-background);
    z-index: 1000;
    padding: 0;
}

.custom-options .data-item-tier {
  padding: 0;
  gap: 0;
}

.custom-options.show {
    display: block;
}

.option {
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.option:hover {
    background-color: var(--input-background);
}

.filter-group {
  gap: 20px;
  align-items: center;
  justify-content: end;
}

.view-table-switch {
  display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 15px;
	gap: 10px;
}

/* Rarity colors */
.color-none {
    background-color: var(--zone-background);
}

.border-color-none {
  border: 1px solid var(--zone-background);
}

.color-common {
    background-color: var(--rarity-common);
}

.border-color-common {
  border: 1px solid var(--rarity-common);
}

.color-uncommon {
    background-color: var(--rarity-uncommon);
}

.border-color-uncommon {
  border: 1px solid var(--rarity-uncommon);
}

.color-rare {
    background-color: var(--rarity-rare);
}

.border-color-rare {
  border: 1px solid var(--rarity-rare);
}

.color-epic {
  background-color: var(--rarity-epic);
}

.border-color-epic {
  border: 1px solid var(--rarity-epic);
}

.color-legendary {
    background-color: var(--rarity-legendary);
}

.border-color-legendary {
  border: 1px solid var(--rarity-legendary);
}

.color-mythic {
    background-color: var(--rarity-mythic);
}

.border-color-mythic {
  border: 1px solid var(--rarity-mythic);
}

.color-titan {
    background-color: var(--rarity-titan);
}

.border-color-titan {
  border: 1px solid var(--rarity-titan);
}