@charset "UTF-8";
* {
  box-sizing: border-box;
  color: white;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

h1 {
  font-size: 20px;
}

input:focus, textarea:focus {
  outline: none;
}

input[type=checkbox] {
  accent-color: red;
}

input[type=radio] {
  accent-color: red;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: white;
}

::-webkit-scrollbar-thumb {
  background: gray;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(58, 58, 58);
}

body {
  background-color: black;
  background-image: url("/imgs/backgroundRed.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
body input:hover {
  border-color: white;
}

#footer {
  display: none;
}

#header, #footer {
  position: relative;
  z-index: 10;
}
#header #navigationBar, #footer #navigationBar {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  text-align: center;
  background-color: black;
}
#header #navigationBar .headerImgDiv, #footer #navigationBar .headerImgDiv {
  width: 100%;
  border: solid 1px gray;
  padding: 7px;
  cursor: pointer;
}
#header #navigationBar .headerImgDiv .headerImgs, #footer #navigationBar .headerImgDiv .headerImgs {
  opacity: 50%;
  width: 35px;
}
#header #navigationBar .headerImgDiv:hover .headerImgs, #footer #navigationBar .headerImgDiv:hover .headerImgs {
  opacity: 100%;
  border-color: white;
}
#header #hamburguerMenuDiv, #footer #hamburguerMenuDiv {
  display: grid;
  grid-template-columns: auto auto auto;
  -moz-column-gap: 15px;
       column-gap: 15px;
  justify-content: right;
  padding: 20px;
  margin: 60px 80px 0 0;
}
#header #hamburguerMenuDiv #headerTitle, #footer #hamburguerMenuDiv #headerTitle {
  display: none;
}
#header #hamburguerMenuDiv #hamburguerMenuBtns #hamburguerMenu, #footer #hamburguerMenuDiv #hamburguerMenuBtns #hamburguerMenu {
  display: none;
}
#header #hamburguerMenuDiv #hamburguerMenuBtns #xHamburguerMenu, #footer #hamburguerMenuDiv #hamburguerMenuBtns #xHamburguerMenu {
  display: none;
}
#header #hamburguerMenuDiv #saveLoadDelBtns, #footer #hamburguerMenuDiv #saveLoadDelBtns {
  display: flex;
  gap: 10px;
}
#header #hamburguerMenuDiv #saveLoadDelBtns .saveLoadDelBtn, #footer #hamburguerMenuDiv #saveLoadDelBtns .saveLoadDelBtn {
  display: flex;
  background-color: black;
  padding: 5px 5px;
  align-items: center;
  cursor: pointer;
  width: 60px;
  border-color: gray;
}
#header #hamburguerMenuDiv #saveLoadDelBtns .saveLoadDelBtn .saveLoadDelImg, #footer #hamburguerMenuDiv #saveLoadDelBtns .saveLoadDelBtn .saveLoadDelImg {
  width: 40px;
  margin: auto;
}
#header #hamburguerMenuDiv #saveLoadDelBtns .saveLoadDelBtn:hover, #footer #hamburguerMenuDiv #saveLoadDelBtns .saveLoadDelBtn:hover {
  border-color: white;
}

.modal {
  display: none;
  position: fixed;
  z-index: 99; /* Em cima de outros elementos */
  left: 0;
  top: 0;
  width: 100%; /* Largura total */
  height: 100%; /* Altura total */
  overflow: auto; /* Ativa rolagem se necessário */
  background-color: rgb(0, 0, 0); /* Cor de fundo */
  background-color: rgba(0, 0, 0, 0.4); /* Fundo escuro com opacidade */
}

.modal-content {
  background-color: #000000;
  position: fixed; /* Fixa o modal no centro da tela */
  top: 54%; /* Posiciona o topo do modal a 50% da altura da tela */
  left: 50%; /* Posiciona o lado esquerdo do modal a 50% da largura da tela */
  transform: translate(-50%, -50%); /* Move o modal para centralizar exatamente no meio */
  padding: 20px;
  border: 2px solid gray;
  max-width: 500px;
  min-width: 500px;
  max-height: 90vh; /* Limita a altura do modal a 90% da altura da janela */
  overflow-y: auto; /* Habilita rolagem vertical se o conteúdo ultrapassar o tamanho */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-content .modalHeader {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
}
.modal-content .modalHeader #closeModal {
  float: none;
  font-size: 25px !important;
}
.modal-content #itemDescription {
  word-wrap: break-word; /* Faz a quebra de linha entre palavras */
  word-break: break-all;
  -webkit-hyphens: auto;
          hyphens: auto; /* Hifeniza as palavras longas, se necessário */
  overflow-y: scroll; /* Adiciona scroll vertical */
  height: 250px;
  max-height: 250px;
  font-size: 13px;
  border: 2px solid gray !important;
}
.modal-content #itemDescription p, .modal-content #itemDescription div {
  font-size: 13px;
}
.modal-content #itemDescription:focus {
  outline: none;
}
.modal-content .itemInfoDiv {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  gap: 10px;
}
.modal-content .itemInfoDiv div {
  max-width: 150px;
}
.modal-content .itemInfoDiv div input {
  width: 100%;
}
.modal-content h2 {
  font-size: 20px;
}
.modal-content input, .modal-content #saveItem {
  background-color: black;
  overflow-y: auto;
}
.modal-content input {
  padding: 5px;
}
.modal-content #saveItem {
  font-size: 16px;
  width: 100%;
  height: 40px;
  cursor: pointer;
}
.modal-content #saveItem:hover {
  background-color: white;
  color: black;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

/* Estilo da tabela */
#itemTable {
  word-wrap: break-word; /* Faz a quebra de linha entre palavras */
  word-break: break-all;
  -webkit-hyphens: auto;
          hyphens: auto; /* Hifeniza as palavras longas, se necessário */
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: rgb(22, 22, 22); /* Fundo preto */
  color: white; /* Letras brancas */
  table-layout: auto;
  /* Estilo para linha em modo de exclusão */
}
#itemTable th, #itemTable td {
  text-align: center;
  border: 1px solid #ddd; /* Pode ser ajustado para uma cor que contraste melhor */
}
#itemTable th {
  height: 45px;
  font-size: 16px;
  background-color: #000000; /* Cor mais escura para o cabeçalho */
}
#itemTable td {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 13px;
  max-height: 50px; /* Limita a altura máxima */
}
#itemTable td.tdDesc {
  max-width: 300px;
}
#itemTable .highlightDefault {
  background-color: rgb(255, 255, 255); /* Cor de fundo ao passar o mouse */ /* Cor do texto */
  cursor: pointer;
}
#itemTable .highlightDefault td {
  color: black;
  border: 1px solid rgb(0, 0, 0);
}
#itemTable .highlight {
  background-color: red; /* Cor de fundo ao passar o mouse */
  color: white; /* Cor do texto */
  cursor: pointer;
}
#itemTable .highlightEdit {
  background-color: #70ff78; /* Cor de fundo ao passar o mouse */
  color: black; /* Cor do texto */
  cursor: pointer;
}

#main {
  margin: 0 100px 20px 100px;
}
#main .editableArea:empty::before, #main #editableArea:empty::before {
  content: attr(data-placeholder);
  color: gray;
}
#main #section1 #charInfos {
  display: flex;
}
#main #section1 #charInfos #imgDiv {
  display: grid;
}
#main #section1 #charInfos #imgDiv #imgLabel {
  background-color: black;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid gray;
}
#main #section1 #charInfos #imgDiv #imgLabel #imgSelectBtnFake {
  font-size: 16px;
}
#main #section1 #charInfos #imgDiv #imgLabel:hover {
  background-color: white;
}
#main #section1 #charInfos #imgDiv #imgLabel:hover #imgSelectBtnFake {
  color: black;
}
#main #section1 #charInfos #imgDiv #charImg {
  background-color: black;
  width: 25em;
  height: 22.5em;
  border: solid 1px gray;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 20% 10%;
     object-position: 20% 10%;
}
#main #section1 #charInfos #imgDiv #perInfoBtn {
  display: none;
}
#main #section1 #charInfos #imgDiv #perInfoBtn, #main #section1 #charInfos #imgDiv #perInfoBtnFake {
  background-color: black;
  width: 100%;
  font-weight: bold;
  font-size: 16px;
}
#main #section1 #charInfos #imgDiv #perInfoBtn:hover, #main #section1 #charInfos #imgDiv #perInfoBtnFake:hover {
  background-color: white;
  color: black;
  cursor: pointer;
}
#main #section1 #charInfos input {
  background-color: black;
}
#main #section1 #charInfos #infoInput {
  background-color: black;
  border: solid 1px gray;
  padding: 10px;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  -moz-column-gap: 30px;
       column-gap: 30px;
}
#main #section1 #charInfos #infoInput .infoInputDiv {
  display: grid;
  align-items: center;
  padding: 10px;
}
#main #section1 #charInfos #infoInput .infoInputDiv span {
  font-size: 17px;
  font-weight: bold;
}
#main #section1 #charInfos #infoInput .infoInputDiv input {
  background-color: black;
  height: 100%;
  padding: 10px;
  font-size: 17px;
}
#main #section2 {
  margin-top: 25px;
}
#main #section2 h1 {
  margin-bottom: 10px;
}
#main #section2 #charInfos2 {
  display: grid;
  grid-template-columns: auto auto;
  -moz-column-gap: 10px;
       column-gap: 10px;
  width: 100%;
}
#main #section2 #charInfos2 #textAreasDiv1 {
  display: grid;
  row-gap: 15px;
}
#main #section2 #charInfos2 #textAreasDiv1 #backgroundArea {
  background-color: black;
  width: 100%;
  height: auto;
  resize: vertical;
  min-height: 300px;
  font-size: 18px;
  padding: 10px;
}
#main #section2 #charInfos2 #textAreasDiv1 #textAreasDiv3 {
  display: grid;
  grid-template-columns: auto auto;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
#main #section2 #charInfos2 #textAreasDiv1 #textAreasDiv3 .infoTextarea {
  background-color: black;
  resize: vertical;
  width: 100%;
  min-height: 100px;
  font-size: 16px;
  padding: 10px;
}
#main #section2 #charInfos2 #textAreasDiv2 {
  display: grid;
  row-gap: 15px;
  width: 100%;
}
#main #section2 #charInfos2 #textAreasDiv2 .infoTextarea {
  background-color: black;
  resize: vertical;
  min-height: 100px;
  font-size: 16px;
  padding: 10px;
}
#main #section3 {
  display: none;
  gap: 15px;
}
#main #section3 .statusSpan {
  font-size: 17px;
  font-weight: bold;
}
#main #section3 .statusSpan2 {
  text-align: center;
}
#main #section3 #statusDiv {
  display: flex;
  gap: 15px;
}
#main #section3 #statusDiv #barsDiv {
  display: grid;
  gap: 35px;
  width: 50%;
  background-color: black;
  border: solid 1px gray;
  padding: 10px;
  align-items: center;
}
#main #section3 #statusDiv #barsDiv #lifeStatus .changeBarStatusDiv, #main #section3 #statusDiv #barsDiv #sanityStatus .changeBarStatusDiv, #main #section3 #statusDiv #barsDiv #energyStatus .changeBarStatusDiv {
  display: flex;
  gap: 10px;
}
#main #section3 #statusDiv #barsDiv #lifeStatus .changeBarStatusDiv .changeStatusBtn, #main #section3 #statusDiv #barsDiv #sanityStatus .changeBarStatusDiv .changeStatusBtn, #main #section3 #statusDiv #barsDiv #energyStatus .changeBarStatusDiv .changeStatusBtn {
  background-color: black;
  font-weight: bold;
  align-items: center;
  cursor: pointer;
  width: 50px;
  border-color: gray;
}
#main #section3 #statusDiv #barsDiv #lifeStatus .changeBarStatusDiv .changeStatusBtn:hover, #main #section3 #statusDiv #barsDiv #sanityStatus .changeBarStatusDiv .changeStatusBtn:hover, #main #section3 #statusDiv #barsDiv #energyStatus .changeBarStatusDiv .changeStatusBtn:hover {
  border-color: white;
}
#main #section3 #statusDiv #barsDiv #lifeStatus #energyPointsLimitInput, #main #section3 #statusDiv #barsDiv #sanityStatus #energyPointsLimitInput, #main #section3 #statusDiv #barsDiv #energyStatus #energyPointsLimitInput {
  background-color: black;
  color: white;
  text-align: center;
  font-size: 15px;
  width: 80px;
  font-weight: bold;
}
#main #section3 #statusDiv #barsDiv #lifeStatus .statusCheckDiv, #main #section3 #statusDiv #barsDiv #lifeStatus .lifeChecks, #main #section3 #statusDiv #barsDiv #sanityStatus .statusCheckDiv, #main #section3 #statusDiv #barsDiv #sanityStatus .lifeChecks, #main #section3 #statusDiv #barsDiv #energyStatus .statusCheckDiv, #main #section3 #statusDiv #barsDiv #energyStatus .lifeChecks {
  display: flex;
  align-items: center;
  gap: 5px;
}
#main #section3 #statusDiv #barsDiv #lifeStatus .statusCheckDiv #checkSpans2, #main #section3 #statusDiv #barsDiv #lifeStatus .lifeChecks #checkSpans2, #main #section3 #statusDiv #barsDiv #sanityStatus .statusCheckDiv #checkSpans2, #main #section3 #statusDiv #barsDiv #sanityStatus .lifeChecks #checkSpans2, #main #section3 #statusDiv #barsDiv #energyStatus .statusCheckDiv #checkSpans2, #main #section3 #statusDiv #barsDiv #energyStatus .lifeChecks #checkSpans2 {
  display: block;
}
#main #section3 #statusDiv #barsDiv #lifeStatus .statusCheckDiv #checkSpans3, #main #section3 #statusDiv #barsDiv #lifeStatus .lifeChecks #checkSpans3, #main #section3 #statusDiv #barsDiv #sanityStatus .statusCheckDiv #checkSpans3, #main #section3 #statusDiv #barsDiv #sanityStatus .lifeChecks #checkSpans3, #main #section3 #statusDiv #barsDiv #energyStatus .statusCheckDiv #checkSpans3, #main #section3 #statusDiv #barsDiv #energyStatus .lifeChecks #checkSpans3 {
  display: none;
}
#main #section3 #statusDiv #barsDiv #lifeStatus .statusCheckDiv .statusChecks, #main #section3 #statusDiv #barsDiv #lifeStatus .lifeChecks .statusChecks, #main #section3 #statusDiv #barsDiv #sanityStatus .statusCheckDiv .statusChecks, #main #section3 #statusDiv #barsDiv #sanityStatus .lifeChecks .statusChecks, #main #section3 #statusDiv #barsDiv #energyStatus .statusCheckDiv .statusChecks, #main #section3 #statusDiv #barsDiv #energyStatus .lifeChecks .statusChecks {
  width: 15px;
  height: 15px;
}
#main #section3 #statusDiv #barsDiv #lifeStatus #exhaustSelect, #main #section3 #statusDiv #barsDiv #sanityStatus #exhaustSelect, #main #section3 #statusDiv #barsDiv #energyStatus #exhaustSelect {
  background-color: black;
  color: white;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  width: 60px;
}
#main #section3 #statusDiv #barsDiv #lifeStatus #exhaustSelect:hover, #main #section3 #statusDiv #barsDiv #sanityStatus #exhaustSelect:hover, #main #section3 #statusDiv #barsDiv #energyStatus #exhaustSelect:hover {
  border-color: white;
}
#main #section3 #statusDiv #barsDiv #lifeStatus #lifeBarDiv, #main #section3 #statusDiv #barsDiv #lifeStatus #sanityBarDiv, #main #section3 #statusDiv #barsDiv #lifeStatus #energyBarDiv, #main #section3 #statusDiv #barsDiv #sanityStatus #lifeBarDiv, #main #section3 #statusDiv #barsDiv #sanityStatus #sanityBarDiv, #main #section3 #statusDiv #barsDiv #sanityStatus #energyBarDiv, #main #section3 #statusDiv #barsDiv #energyStatus #lifeBarDiv, #main #section3 #statusDiv #barsDiv #energyStatus #sanityBarDiv, #main #section3 #statusDiv #barsDiv #energyStatus #energyBarDiv {
  display: flex;
  width: 100%;
  background-color: gray;
}
#main #section3 #statusDiv #barsDiv #lifeStatus #lifeBarDiv #lifeBar, #main #section3 #statusDiv #barsDiv #lifeStatus #sanityBarDiv #lifeBar, #main #section3 #statusDiv #barsDiv #lifeStatus #energyBarDiv #lifeBar, #main #section3 #statusDiv #barsDiv #sanityStatus #lifeBarDiv #lifeBar, #main #section3 #statusDiv #barsDiv #sanityStatus #sanityBarDiv #lifeBar, #main #section3 #statusDiv #barsDiv #sanityStatus #energyBarDiv #lifeBar, #main #section3 #statusDiv #barsDiv #energyStatus #lifeBarDiv #lifeBar, #main #section3 #statusDiv #barsDiv #energyStatus #sanityBarDiv #lifeBar, #main #section3 #statusDiv #barsDiv #energyStatus #energyBarDiv #lifeBar {
  background-color: red;
}
#main #section3 #statusDiv #barsDiv #lifeStatus #lifeBarDiv #sanityBar, #main #section3 #statusDiv #barsDiv #lifeStatus #sanityBarDiv #sanityBar, #main #section3 #statusDiv #barsDiv #lifeStatus #energyBarDiv #sanityBar, #main #section3 #statusDiv #barsDiv #sanityStatus #lifeBarDiv #sanityBar, #main #section3 #statusDiv #barsDiv #sanityStatus #sanityBarDiv #sanityBar, #main #section3 #statusDiv #barsDiv #sanityStatus #energyBarDiv #sanityBar, #main #section3 #statusDiv #barsDiv #energyStatus #lifeBarDiv #sanityBar, #main #section3 #statusDiv #barsDiv #energyStatus #sanityBarDiv #sanityBar, #main #section3 #statusDiv #barsDiv #energyStatus #energyBarDiv #sanityBar {
  background-color: purple;
}
#main #section3 #statusDiv #barsDiv #lifeStatus #lifeBarDiv #energyBar, #main #section3 #statusDiv #barsDiv #lifeStatus #sanityBarDiv #energyBar, #main #section3 #statusDiv #barsDiv #lifeStatus #energyBarDiv #energyBar, #main #section3 #statusDiv #barsDiv #sanityStatus #lifeBarDiv #energyBar, #main #section3 #statusDiv #barsDiv #sanityStatus #sanityBarDiv #energyBar, #main #section3 #statusDiv #barsDiv #sanityStatus #energyBarDiv #energyBar, #main #section3 #statusDiv #barsDiv #energyStatus #lifeBarDiv #energyBar, #main #section3 #statusDiv #barsDiv #energyStatus #sanityBarDiv #energyBar, #main #section3 #statusDiv #barsDiv #energyStatus #energyBarDiv #energyBar {
  background-color: blue;
}
#main #section3 #statusDiv #barsDiv #lifeStatus #lifeCheckDiv, #main #section3 #statusDiv #barsDiv #lifeStatus #sanityCheckDiv, #main #section3 #statusDiv #barsDiv #lifeStatus #energyCheckDiv, #main #section3 #statusDiv #barsDiv #sanityStatus #lifeCheckDiv, #main #section3 #statusDiv #barsDiv #sanityStatus #sanityCheckDiv, #main #section3 #statusDiv #barsDiv #sanityStatus #energyCheckDiv, #main #section3 #statusDiv #barsDiv #energyStatus #lifeCheckDiv, #main #section3 #statusDiv #barsDiv #energyStatus #sanityCheckDiv, #main #section3 #statusDiv #barsDiv #energyStatus #energyCheckDiv {
  display: flex;
  gap: 15px;
}
#main #section3 #statusDiv #barsDiv #lifeStatus .barDiv, #main #section3 #statusDiv #barsDiv #sanityStatus .barDiv, #main #section3 #statusDiv #barsDiv #energyStatus .barDiv {
  position: relative;
  display: grid;
  gap: 5px;
  height: 30px;
}
#main #section3 #statusDiv #barsDiv #lifeStatus .barDiv .bar, #main #section3 #statusDiv #barsDiv #sanityStatus .barDiv .bar, #main #section3 #statusDiv #barsDiv #energyStatus .barDiv .bar {
  padding: 3px;
  width: 100%;
  transition: width 2s;
  z-index: 1;
}
#main #section3 #statusDiv #barsDiv #lifeStatus .barDiv .statusText, #main #section3 #statusDiv #barsDiv #sanityStatus .barDiv .statusText, #main #section3 #statusDiv #barsDiv #energyStatus .barDiv .statusText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: white;
}
#main #section3 #statusDiv #barsDiv #lifeStatus .barDiv:hover, #main #section3 #statusDiv #barsDiv #sanityStatus .barDiv:hover, #main #section3 #statusDiv #barsDiv #energyStatus .barDiv:hover {
  border-color: white;
}
#main #section3 #statusDiv #bodyStatus {
  display: grid;
  gap: 5px;
  background-color: black;
  border: solid 1px gray;
  padding: 10px;
  width: 50%;
}
#main #section3 #statusDiv #bodyStatus input {
  background-color: black;
  color: white;
  text-align: center;
  font-size: 23px;
  width: 100%;
}
#main #section3 #statusDiv #bodyStatus #protectionDiv {
  display: grid;
  gap: 20px;
}
#main #section3 #statusDiv #bodyStatus #protectionDiv #velDiv #velocity {
  width: 100%;
}
#main #section3 #statusDiv #bodyStatus #protectionDiv #defType {
  display: flex;
  align-items: center;
  gap: 10px;
}
#main #section3 #statusDiv #bodyStatus #protectionDiv #protectionType {
  display: flex;
  grid-auto-columns: auto auto auto;
  align-items: center;
  gap: 10px;
}
#main #section3 #statusDiv #bodyStatus #protectionDiv #protectionType #armorWeight {
  font-size: 18px;
  background-color: black;
  color: white;
  text-align: center;
  cursor: pointer;
}
#main #section3 #statusDiv #bodyStatus #protectionDiv #protectionType #armorWeight:hover {
  border-color: white;
}
#main #section3 #statusDiv #bodyStatus #protectionDiv #dmgReductDiv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#main #section3 #statusDiv #bodyStatus #protectionDiv #dmgReductDiv .statusSubDiv {
  width: 100%;
}
#main #section3 #attackAndTraining {
  display: flex;
  -moz-column-gap: 15px;
       column-gap: 15px;
}
#main #section3 #attackAndTraining span {
  font-size: 17px;
  font-weight: bold;
}
#main #section3 #attackAndTraining #textAreasDiv4, #main #section3 #attackAndTraining #textAreasDiv5 {
  display: grid;
  width: 100%;
}
#main #section3 #attackAndTraining #textAreasDiv4 .infoTextarea, #main #section3 #attackAndTraining #textAreasDiv5 .infoTextarea {
  background-color: black;
  resize: none;
  min-height: 200px;
  font-size: 16px;
  padding: 10px;
}
#main #section3 #skillsDiv {
  display: grid;
  grid-auto-columns: auto auto;
  gap: 10px;
}
#main #section3 #skillsDiv .attSkillInput {
  color: purple !important;
}
#main #section3 #skillsDiv .powerAttSkillInput {
  width: 142.16px;
  color: yellow !important;
}
#main #section3 #skillsDiv .attSkillInput, #main #section3 #skillsDiv .attInput {
  background-color: black;
  color: yellow;
  text-align: center;
  font-size: 23px;
  width: 100%;
  font-weight: bold;
}
#main #section3 #skillsDiv .attSkillInput:hover, #main #section3 #skillsDiv .attInput:hover {
  border-color: white;
}
#main #section3 #skillsDiv .attSkillMainSpan {
  text-align: center;
  font-size: 17px;
  font-weight: bold;
}
#main #section3 #skillsDiv #atributes {
  display: grid;
  gap: 15px;
  background-color: black;
  border: solid 1px gray;
  padding: 10px;
}
#main #section3 #skillsDiv #atributes #atributesInputDiv {
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 10px;
}
#main #section3 #skillsDiv #atributes #atributesInputDiv .attModGrid {
  display: flex;
}
#main #section3 #skillsDiv #atributes #atributesInputDiv .attModGrid .attInput {
  text-align: center;
  font-size: 23px;
  width: 100%;
}
#main #section3 #skillsDiv #atributes #atributesInputDiv .attSkillInput {
  text-align: center;
  width: 150px;
}
#main #section3 #skillsDiv #skills {
  display: grid;
  row-gap: 15px;
  width: 100%;
  background-color: black;
  border: solid 1px gray;
  padding: 10px;
  /*#profBonusDiv {
      display: grid;
      grid-template-columns: auto;
      gap: 20px;

      #profBonusGrid {
          display: grid;
          grid-template-columns: auto auto;
          gap: 10px;

          .attSkillInput {
              font-size: 23px;
          }
      }
  }*/
}
#main #section3 #skillsDiv #skills #skillsGridDiv {
  display: grid;
  gap: 10px;
  grid-template-columns: auto auto auto auto;
}
#main #section3 #skillsDiv #skills #skillsGridDiv .skillsGrid {
  /*.profModalGrid {
      display: grid;

      .profModalDiv {
          display: none;
          gap: 10px;
          position: absolute;
          background-color: white;
          z-index: 10;
          border: solid 1px gray;
          padding: 5px;

          .profModalSpan {
              color: black;
          }

          input {
              width: 15px;
              height: 15px;
          }
      }
  }*/
}
#main #section3 #skillsDiv #skills #skillsGridDiv .skillsGrid .openSkillStatus {
  color: yellow;
  font-size: 16px;
  cursor: pointer !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: bold;
}
#main #section3 #skillsDiv #skills #skillsGridDiv .skillsGrid .dtSpanan {
  height: 120px !important;
}
#main #section3 #skillsDiv #skills #skillsGridDiv .skillsGrid .dtSpanan #dtRadioDiv {
  height: 100px;
}
#main #section3 #skillsDiv #skills #skillsGridDiv .skillsGrid .spanan {
  display: none;
  background-color: white;
  border: 2px solid gray;
  color: black;
  border-top: 0;
  padding: 7px 7px 0 7px;
  position: absolute;
  width: 180px;
  height: 165px;
}
#main #section3 #skillsDiv #skills #skillsGridDiv .skillsGrid .spanan .radioDiv {
  display: grid;
  -moz-column-gap: 10px;
       column-gap: 10px;
  justify-content: center;
  height: 150px;
}
#main #section3 #skillsDiv #skills #skillsGridDiv .skillsGrid .spanan .radioDiv .skillBonusDiv {
  display: flex;
  gap: 10px;
}
#main #section3 #skillsDiv #skills #skillsGridDiv .skillsGrid .spanan .radioDiv .skillBonusDiv .skillBonus {
  width: 40px;
  text-align: center;
  color: black;
  font-size: 17px;
}
#main #section3 #skillsDiv #skills #skillsGridDiv .skillsGrid .spanan .radioDiv span {
  color: black;
}
#main #section4 {
  display: none;
  gap: 15px;
}
#main #section4 #editContentBtn {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
  margin-bottom: 35px;
}
#main #section4 #editContentBtn .editBtnDiv {
  display: flex;
  align-items: center;
}
#main #section4 #editContentBtn .editBtnDiv .xBtn {
  display: none;
  border-color: white;
}
#main #section4 #editContentBtn .editBtnDiv .editBtn {
  opacity: 50%;
  border-color: gray;
}
#main #section4 #editContentBtn .editBtnDiv .editBtn, #main #section4 #editContentBtn .editBtnDiv .xBtn {
  background-color: black;
  cursor: pointer;
  width: 100px;
}
#main #section4 #editContentBtn .editBtnDiv .editBtn .imgBtn, #main #section4 #editContentBtn .editBtnDiv .xBtn .imgBtn {
  margin: auto;
  width: 60px;
  padding: 5px;
}
#main #section4 #editContentBtn .editBtnDiv .editBtn:hover, #main #section4 #editContentBtn .editBtnDiv .xBtn:hover {
  opacity: 100%;
  border-color: white;
}
#main #section4 #editContent {
  display: block;
}
#main #section4 #editContent #passiveAb, #main #section4 #editContent #activeAb, #main #section4 #editContent #spellsDiv, #main #section4 #editContent #weaponsDiv {
  display: none;
  width: 100%;
}
#main #section4 #editContent .editOpts {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
  justify-content: left;
  -moz-column-gap: 10px;
       column-gap: 10px;
  background-color: black;
  width: 100%;
  padding: 5px;
  border: 1px solid gray;
  border-bottom: 0;
}
#main #section4 #editContent .editOpts .fontStyle {
  background-color: rgba(0, 0, 0, 0);
  color: white;
  width: 30px;
  font-size: 18px;
  cursor: pointer;
  outline: none;
}
#main #section4 #editContent .editOpts .fontStyle:hover {
  border-color: white;
}
#main #section4 #editContent .editOpts .inputStyle {
  background-color: rgba(0, 0, 0, 0);
  color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}
#main #section4 #editContent .editOpts .inputStyle option {
  background-color: black;
}
#main #section4 #editContent .editOpts .inputStyle:hover {
  border-color: white;
}
#main #section4 #editContent .editOpts .inputStyle:hover option {
  background-color: black;
}
#main #section4 #editContent .editOpts .colorSfontColorstyle {
  height: 21.5px;
  width: 20px;
}
#main #section4 #editContent .editOpts .fontColor:hover {
  border-color: white;
}
#main #section4 #editContent .editOpts .fontStyleEditor {
  padding: 0;
  width: 1.6em;
  height: 1.45em;
}
#main #section4 #editContent .editOpts .fontStyleEditor .editorImgs {
  width: 1.2em;
  padding: 0;
}
#main #section4 #editContent .editOpts .fontStyleEditor .editorList .editorAlign {
  height: 1.15em;
}
#main #section4 #editContent .editableArea {
  overflow: hidden !important;
  word-wrap: break-word;
  word-break: break-all;
  border: solid 1px gray;
  background-color: black;
  min-height: 587px;
  height: 100%;
  width: 100%;
  padding: 10px;
}
#main #section5 {
  display: none;
  -moz-column-gap: 10px;
       column-gap: 10px;
  width: 100%;
}
#main #section5 #editContent1 {
  display: grid;
  gap: 25px;
}
#main #section5 #editContent1 .bpDiv {
  display: flex;
  gap: 5px;
  /* Botões */
}
#main #section5 #editContent1 .bpDiv #delete-btn, #main #section5 #editContent1 .bpDiv #edit-btn, #main #section5 #editContent1 .bpDiv #openModal {
  color: rgb(255, 255, 255);
  width: 125px;
  font-size: 13px;
  border: none;
  width: 50px;
  cursor: pointer;
}
#main #section5 #editContent1 .bpDiv #delete-btn {
  background-color: red;
}
#main #section5 #editContent1 .bpDiv #edit-btn {
  background-color: #45a049;
}
#main #section5 #editContent1 .bpDiv #delete-btn:hover {
  background-color: rgb(255, 77, 77);
}
#main #section5 #editContent1 .bpDiv #edit-btn:hover {
  background-color: #70ff78;
}
#main #section5 #editContent1 .bpDiv #openModal {
  background-color: black;
  border: 2px solid gray;
}
#main #section5 #editContent1 .bpDiv #openModal:hover {
  background-color: rgb(16, 16, 16);
}
#main #section5 #editContent1 #wealth {
  display: grid;
}
#main #section5 #editContent1 #wealth div {
  display: flex;
  justify-content: space-evenly;
  gap: 15px;
}
#main #section5 #editContent1 #wealth div .wealthInput, #main #section5 #editContent1 #wealth div .weightInput {
  text-align: center;
  font-size: 20px;
  background-color: black;
  padding: 5px;
  width: 100%;
}
#main #section5 #editContent1 #weight {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
#main #section5 #editContent1 #weight .weightDiv {
  position: relative;
  width: 100%;
}
#main #section5 #editContent1 #weight .weightDiv .weightInput {
  text-align: center;
  font-size: 20px;
  background-color: black;
  padding: 5px;
  width: 100%;
}
#main #section5 #editContent1 #weight .weightDiv .backpackTypeSelect {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 10px;
}
#main #section5 #editContent1 #weight .weightDiv .backpackTypeSelect .openSkillStatus {
  color: yellow;
  font-size: 16px;
  cursor: pointer !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: bold;
}
#main #section5 #editContent1 #weight .weightDiv .backpackTypeSelect .spanan {
  display: none;
  background-color: white;
  border: 2px solid gray;
  color: black;
  border-top: 0;
  padding: 7px 7px 0 7px;
  position: absolute;
  top: 30px;
}
#main #section5 #editContent1 #weight .weightDiv .backpackTypeSelect .spanan .radioDiv {
  display: grid;
  -moz-column-gap: 10px;
       column-gap: 10px;
  justify-content: center;
}
#main #section5 #editContent1 #weight .weightDiv .backpackTypeSelect .spanan .radioDiv span {
  color: black;
}
#main #section5 #editContent1 .editOpts, #main #section5 #editContent2 .editOpts {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
  justify-content: left;
  -moz-column-gap: 10px;
       column-gap: 10px;
  background-color: black;
  width: 100%;
  padding: 5px;
  border: 1px solid gray;
  border-bottom: 0;
}
#main #section5 #editContent1 .editOpts .fontStyle, #main #section5 #editContent2 .editOpts .fontStyle {
  background-color: rgba(0, 0, 0, 0);
  color: white;
  width: 30px;
  font-size: 18px;
  cursor: pointer;
  outline: none;
}
#main #section5 #editContent1 .editOpts .fontStyle:hover, #main #section5 #editContent2 .editOpts .fontStyle:hover {
  border-color: white;
}
#main #section5 #editContent1 .editOpts .inputStyle, #main #section5 #editContent2 .editOpts .inputStyle {
  background-color: rgba(0, 0, 0, 0);
  color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}
#main #section5 #editContent1 .editOpts .inputStyle option, #main #section5 #editContent2 .editOpts .inputStyle option {
  background-color: black;
}
#main #section5 #editContent1 .editOpts .inputStyle:hover, #main #section5 #editContent2 .editOpts .inputStyle:hover {
  border-color: white;
}
#main #section5 #editContent1 .editOpts .inputStyle:hover option, #main #section5 #editContent2 .editOpts .inputStyle:hover option {
  background-color: black;
}
#main #section5 #editContent1 .editOpts .colorSfontColorstyle, #main #section5 #editContent2 .editOpts .colorSfontColorstyle {
  height: 21.5px;
  width: 20px;
}
#main #section5 #editContent1 .editOpts .fontColor:hover, #main #section5 #editContent2 .editOpts .fontColor:hover {
  border-color: white;
}
#main #section5 #editContent1 .editOpts .fontStyleEditor, #main #section5 #editContent2 .editOpts .fontStyleEditor {
  padding: 0;
  width: 1.6em;
  height: 1.45em;
}
#main #section5 #editContent1 .editOpts .fontStyleEditor .editorImgs, #main #section5 #editContent2 .editOpts .fontStyleEditor .editorImgs {
  width: 1.2em;
  padding: 0;
}
#main #section5 #editContent1 .editOpts .fontStyleEditor .editorList .editorAlign, #main #section5 #editContent2 .editOpts .fontStyleEditor .editorList .editorAlign {
  height: 1.15em;
}
#main #section5 #editContent1 #editableArea1, #main #section5 #editContent2 #editableArea1 {
  min-height: 497px;
}
#main #section5 #editContent1 #editableArea2, #main #section5 #editContent2 #editableArea2 {
  min-height: 676px;
}
#main #section5 #editContent1 .editableArea, #main #section5 #editContent2 .editableArea {
  word-wrap: break-word;
  word-break: break-all;
  border: solid 1px gray;
  background-color: black;
  padding: 10px;
}
#main #section6 {
  display: none;
  width: 100%;
}
#main #section6 .editOpts {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
  justify-content: left;
  -moz-column-gap: 10px;
       column-gap: 10px;
  background-color: black;
  width: 100%;
  padding: 5px;
  border: 1px solid gray;
  border-bottom: 0;
}
#main #section6 .editOpts .fontStyle {
  background-color: rgba(0, 0, 0, 0);
  color: white;
  width: 30px;
  font-size: 18px;
  cursor: pointer;
  outline: none;
}
#main #section6 .editOpts .fontStyle:hover {
  border-color: white;
}
#main #section6 .editOpts .inputStyle {
  background-color: rgba(0, 0, 0, 0);
  color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}
#main #section6 .editOpts .inputStyle option {
  background-color: black;
}
#main #section6 .editOpts .inputStyle:hover {
  border-color: white;
}
#main #section6 .editOpts .inputStyle:hover option {
  background-color: black;
}
#main #section6 .editOpts .colorSfontColorstyle {
  height: 21.5px;
  width: 20px;
}
#main #section6 .editOpts .fontColor:hover {
  border-color: white;
}
#main #section6 .editOpts .fontStyleEditor {
  padding: 0;
  width: 1.6em;
  height: 1.45em;
}
#main #section6 .editOpts .fontStyleEditor .editorImgs {
  width: 1.2em;
  padding: 0;
}
#main #section6 .editOpts .fontStyleEditor .editorList .editorAlign {
  height: 1.15em;
}
#main #section6 #editableArea {
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  border: solid 1px gray;
  background-color: black;
  padding: 10px;
  width: 100%;
  min-height: 587px;
  height: 100%;
}

@media only screen and (max-width: 1450px) {
  #header #navigationBar .headerImgDiv .headerImgs {
    width: 40px;
  }
  #header #hamburguerMenuDiv {
    margin: 85px 0 0 0;
    justify-content: space-between;
  }
  #main {
    margin: 0 30px 30px 30px;
  }
  #main #section1 #charInfos #imgDiv #imgLabel #imgSelectBtnFake {
    font-size: 16px;
  }
  #main #section5 {
    display: none;
    grid-template-columns: auto;
    gap: 20px;
  }
}
@media only screen and (max-width: 1340px) {
  #main #section4 #editContent {
    grid-template-columns: auto auto;
    gap: 15px;
  }
}
@media only screen and (max-width: 1100px) {
  #header #hamburguerMenuDiv {
    justify-content: center;
  }
  #main #section1 #charInfos {
    display: grid;
  }
  #main #section1 #charInfos #imgDiv {
    display: grid;
    margin: auto;
  }
  #main #section1 #charInfos #imgDiv #perInfoBtn {
    display: block;
  }
  #main #section1 #charInfos #imgDiv #perInfoBtnFake {
    display: none;
  }
  #main #section1 #charInfos #infoInput {
    display: none;
  }
  #main #section3 {
    /*#skillsDiv {

        #atributes {

            #atributesInputDiv {

                .attModGrid {

                    .attInput {
                        width: 70px;
                    }
                }
            }
        }
    }*/
  }
  #main #section3 #statusDiv #barsDiv {
    width: 70%;
  }
  #main #section3 #statusDiv #bodyStatus {
    width: 40%;
  }
  #main #section4 {
    display: none;
    grid-template-columns: auto;
    gap: 15px;
  }
  #main #section4 #editContent {
    grid-template-columns: auto;
    gap: 15px;
  }
  #main #section5 #editContent1 .editOpts, #main #section5 #editContent2 .editOpts {
    display: flex;
    justify-content: left;
  }
  #main #section5 #editContent1 .editableArea, #main #section5 #editContent2 .editableArea {
    resize: none;
    font-size: 17px;
  }
}
@media only screen and (max-width: 915px) {
  #main .editOpts .fontColor {
    display: none;
  }
  #main .editOpts .unorderedList {
    display: none;
  }
  #main #section3 #statusDiv {
    display: block;
  }
  #main #section3 #statusDiv #barsDiv {
    width: 100%;
  }
  #main #section3 #statusDiv #bodyStatus {
    width: 100%;
  }
  #main #section3 #skillsDiv {
    display: block;
  }
  #main #section3 #skillsDiv #atributes #atributesInputDiv {
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    row-gap: 15px;
    /*.attModGrid {
        gap: 10px;

        .attInput {
            width: 70px;
        }
    }*/
  }
}
@media only screen and (max-width: 850px) {
  #main #section4 #editContent .editableArea {
    resize: none;
    font-size: 17px;
    min-height: 483px;
  }
}
@media only screen and (max-width: 760px) {
  #header #navigationBar {
    display: none;
  }
  #header #hamburguerMenuDiv {
    height: 70px;
    align-items: center;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: left;
    background-color: black;
    gap: 25px;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom: 1px solid gray;
  }
  #header #hamburguerMenuDiv #headerTitle {
    display: block;
    font-size: 30px;
  }
  #header #hamburguerMenuDiv #saveLoadDelBtns {
    display: none;
    margin: 0;
  }
  #header #hamburguerMenuDiv #saveLoadDelBtns .saveLoadDelBtn .saveLoadDelImg {
    width: 30px;
  }
  #header #hamburguerMenuDiv #hamburguerMenuBtns {
    margin: 0 0 0 10px;
  }
  #header #hamburguerMenuDiv #hamburguerMenuBtns .hamburguer {
    width: 30px;
  }
  #header #hamburguerMenuDiv #hamburguerMenuBtns #hamburguerMenu {
    display: block;
  }
  #header #hamburguerMenuDiv #hamburguerMenuBtns #xHamburguerMenu {
    width: 30px;
    height: 27px;
    display: none;
  }
  #main {
    margin-top: 95px;
    margin-bottom: 105px;
  }
  #main #section1 #charInfos #imgDiv {
    display: grid;
    width: 100%;
  }
  #main #section1 #charInfos #imgDiv #charImg {
    -o-object-position: 50%;
       object-position: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    max-height: 30em;
    border: solid 1px gray;
  }
  #main #section1 #charInfos #imgDiv #perInfoBtnFake {
    display: none;
  }
  #main #section1 #charInfos #imgDiv #perInfoBtn {
    display: block;
  }
  #main #section1 #charInfos #infoInput {
    display: none;
    grid-template-columns: auto;
    gap: 5px;
  }
  #main #section1 #charInfos #infoInput .infoInputDiv span {
    font-size: 18px;
  }
  #main #section1 #charInfos #infoInput .infoInputDiv input {
    font-size: 18px;
    width: 100%;
  }
  #main #section2 #charInfos2 {
    display: grid;
    grid-template-columns: auto;
    row-gap: 10px;
  }
  #main #section2 #charInfos2 #textAreasDiv1 {
    display: grid;
    row-gap: 10px;
  }
  #main #section2 #charInfos2 #textAreasDiv1 #backgroundArea {
    min-height: 250px;
    font-size: 18px;
    resize: none;
  }
  #main #section2 #charInfos2 #textAreasDiv1 #textAreasDiv3 {
    display: grid;
    grid-template-columns: auto;
    row-gap: 10px;
  }
  #main #section2 #charInfos2 #textAreasDiv1 #textAreasDiv3 .infoTextarea {
    resize: none;
    min-height: 120px;
    font-size: 17px;
  }
  #main #section2 #charInfos2 #textAreasDiv2 {
    display: grid;
    row-gap: 10px;
  }
  #main #section2 #charInfos2 #textAreasDiv2 .infoTextarea {
    resize: none;
    min-height: 120px;
    font-size: 17px;
  }
  #main #section3 #skillsDiv #atributes #atributesInputDiv {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  #main #section3 #attackAndTraining {
    display: grid;
    row-gap: 15px;
  }
  #main #section4 #editContentBtn {
    gap: 30px;
  }
  #main #section4 #editContentBtn .editBtnDiv .editBtn, #main #section4 #editContentBtn .editBtnDiv .xBtn {
    width: 80px;
  }
  #main #section4 #editContentBtn .editBtnDiv .editBtn .imgBtn, #main #section4 #editContentBtn .editBtnDiv .xBtn .imgBtn {
    width: 50px;
    padding: 5px;
  }
  #main #section4 #editContent {
    gap: 20px;
  }
  #main #section4 #editContent .editOpts {
    display: flex;
    justify-content: left;
  }
  #main #section4 #editContent .editableArea {
    resize: none;
    font-size: 17px;
    min-height: 587px;
  }
  #main #section5 .modal-content {
    height: 550px;
    width: 500px;
    top: 49%;
  }
  #main #section5 #itemTable td.tdDesc, #main #section5 #itemTable th#thDesc {
    display: none;
  }
  #main #section6 .editOpts {
    display: flex;
    justify-content: left;
  }
  #main #section6 #editableArea {
    resize: none;
    font-size: 17px;
  }
  #footer {
    display: block;
    margin-top: 80px;
  }
  #footer #bottomNavigationBar {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    text-align: center;
    background-color: black;
  }
  #footer #bottomNavigationBar .headerImgDiv {
    width: 100%;
    padding: 18px;
    cursor: pointer;
    border-top: 1px solid gray;
  }
  #footer #bottomNavigationBar .headerImgDiv .headerImgs {
    opacity: 50%;
    width: 40px;
  }
  #footer #bottomNavigationBar .headerImgDiv:hover .headerImgs {
    opacity: 100%;
  }
}
@media only screen and (max-width: 670px) {
  #main #section3 #statusDiv {
    display: block;
  }
  #main #section3 #statusDiv #barsDiv {
    width: 100%;
  }
  #main #section3 #statusDiv #bodyStatus {
    width: 100%;
  }
  #main #section3 #statusDiv #bodyStatus #protectionDiv #protectionType #armorWeight {
    font-size: 16px;
  }
  #main #section3 #skillsDiv #atributes {
    gap: 20px;
  }
  #main #section3 #skillsDiv #atributes #atributesInputDiv {
    grid-template-columns: auto auto auto;
  }
  #main #section3 #skillsDiv #atributes #atributesInputDiv .attModGrid {
    display: grid;
    gap: 0;
  }
  #main #section3 #skillsDiv #atributes #atributesInputDiv .attModGrid .attInput {
    width: 100%;
  }
  #main #section3 #skillsDiv #skills {
    /*#profBonusDiv {
        display: grid;
        grid-template-columns: auto;
        gap: 5px;

        #profBonusGrid {
            display: flex;
            gap: 5px;
        }

        #passiveBonus {
            display: none;
        }
    }*/
  }
  #main #section3 #skillsDiv #skills #skillsGridDiv {
    display: grid;
    gap: 10px;
    grid-template-columns: auto auto auto;
    /*.skillsGrid {

        .profModalGrid {
            display: grid;

            .profModalDiv {
                display: none;
                gap: 10px;
                position: absolute;
                background-color: white;
                z-index: 10;
                border: solid 1px gray;
                padding: 5px;

                .profModalSpan {
                    color: black;
                }

                input {
                    width: 15px;
                    height: 15px;
                }
            }
        }
    }*/
  }
}
@media only screen and (max-width: 615px) {
  #main #section3 #statusDiv #barsDiv .statusCheckDiv .checkSpans, #main #section3 #statusDiv #barsDiv .lifeChecks .checkSpans {
    font-size: 17px;
  }
  #main #section3 #statusDiv #barsDiv .statusCheckDiv #checkSpan2, #main #section3 #statusDiv #barsDiv .statusCheckDiv #checkSpans3, #main #section3 #statusDiv #barsDiv .lifeChecks #checkSpan2, #main #section3 #statusDiv #barsDiv .lifeChecks #checkSpans3 {
    font-size: 17px;
  }
  #main #section3 #statusDiv #barsDiv #sanityStatus #sanityCheckDiv {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 12px;
  }
  #main #section3 #statusDiv #barsDiv #lifeStatus #lifeCheckDiv {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 12px;
  }
  #main #section3 #statusDiv #barsDiv #lifeStatus #lifeCheckDiv .lifeChecks #exhaustSelect {
    font-size: 16px;
  }
}
@media only screen and (max-width: 590px) {
  button, label {
    font-size: 13px !important;
  }
  input[type=checkbox] {
    width: 13px !important;
  }
  select {
    font-size: 12px !important;
  }
  input, p {
    font-size: 15px !important;
  }
  #energyPointsLimitInput {
    font-size: 12px !important;
    width: 50px !important;
  }
  span {
    font-size: 14px !important;
  }
  textarea {
    font-size: 13px !important;
  }
  h1, h2 {
    font-size: 16px !important;
  }
  .editableArea {
    font-size: 13px !important;
  }
  table th {
    font-size: 14px !important;
    height: 35px !important;
  }
  table td {
    font-size: 13px !important;
  }
  #main #section1, #main #section2, #main #section3, #main #section4, #main #section5, #main #section6 {
    max-width: 100%;
    width: 100%;
  }
  #main #section1, #main #section3 {
    margin-top: 70px;
  }
  #main #section4, #main #section5, #main #section6 {
    margin-top: 90px;
  }
  #main #section3 #statusDiv #barsDiv #lifeStatus .barDiv .bar, #main #section3 #statusDiv #barsDiv #sanityStatus .barDiv .bar, #main #section3 #statusDiv #barsDiv #energyStatus .barDiv .bar {
    font-size: 18px;
  }
  #main #section3 #statusDiv #barsDiv #lifeStatus .statusCheckDiv #checkSpans2, #main #section3 #statusDiv #barsDiv #sanityStatus .statusCheckDiv #checkSpans2, #main #section3 #statusDiv #barsDiv #energyStatus .statusCheckDiv #checkSpans2 {
    display: none;
  }
  #main #section3 #statusDiv #barsDiv #lifeStatus .statusCheckDiv #checkSpans3, #main #section3 #statusDiv #barsDiv #sanityStatus .statusCheckDiv #checkSpans3, #main #section3 #statusDiv #barsDiv #energyStatus .statusCheckDiv #checkSpans3 {
    display: block;
  }
  #main #section3 #statusDiv #bodyStatus #protectionDiv #protectionType #armorWeight {
    font-size: 18px;
  }
  #main #section3 #skillsDiv #atributes #atributesInputDiv {
    grid-template-columns: auto auto;
  }
  #main #section3 #skillsDiv #atributes #atributesInputDiv div .attSkillSpan {
    font-size: 17px;
  }
  #main #section3 #skillsDiv #atributes #atributesInputDiv .attModGrid {
    display: grid;
    gap: 0;
  }
  #main #section3 #skillsDiv #atributes #atributesInputDiv .attModGrid .attInput {
    width: 100%;
  }
  #main #section3 #skillsDiv #skills {
    gap: 20px;
  }
  #main #section3 #skillsDiv #skills #skillsGridDiv {
    grid-template-columns: auto auto;
  }
  #main #section3 #skillsDiv #skills #skillsGridDiv .skillsGrid {
    /*.profModalGrid {
        display: grid;

        .profModalDiv {
            display: none;
            gap: 10px;
            position: absolute;
            background-color: white;
            z-index: 10;
            border: solid 1px gray;
            padding: 5px;

            .profModalSpan {
                color: black;
            }

            input {
                width: 15px;
                height: 15px;
            }
        }
    }*/
  }
  #main #section3 #skillsDiv #skills #skillsGridDiv .skillsGrid .spanan {
    font-size: 17px;
  }
  #main #section4 #editContentBtn .editBtnDiv .editBtn, #main #section4 #editContentBtn .editBtnDiv .xBtn {
    width: 75px;
  }
  #main #section4 #editContentBtn .editBtnDiv .editBtn .imgBtn, #main #section4 #editContentBtn .editBtnDiv .xBtn .imgBtn {
    width: 45px;
    padding: 2px;
  }
  #main #section5 .weightDiv .backpackTypeSelect .spanan .radioDiv {
    display: grid;
    -moz-column-gap: 10px;
         column-gap: 10px;
    justify-content: center;
  }
  #main #section5 .weightDiv .backpackTypeSelect .spanan .radioDiv span {
    color: black;
  }
  #main #section6 .editOpts #myColor7 {
    display: block !important;
  }
  #main #section6 .editOpts .editTextBtn {
    display: none;
  }
}
@media only screen and (max-width: 500px) {
  #main {
    margin-left: 1px;
    margin-right: 1px;
  }
  #main #section5 .modal-content {
    height: 100%;
    max-height: 500px;
    min-width: 370px;
    width: 100%;
  }
  #main #section5 #itemTable .itemInfoDiv {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    gap: 10px;
  }
  #main #section5 #itemTable .itemInfoDiv div {
    max-width: 150px;
  }
  #main #section5 #itemTable .itemInfoDiv div input {
    width: 100%;
  }
}/*# sourceMappingURL=styles.css.map */