/*!*****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/styles/reset.scss ***!
  \*****************************************************************************************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*!****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/styles/char-sheet-stats.scss ***!
  \****************************************************************************************************************/


#str {
    width:  40px;
    height: 40px;
    margin-top: 50px;
    -webkit-appearance: none;
    text-align: center;
    border-radius: 10px;
}

#dex {
    width: 40px;
    height: 40px;
    margin-top: 20px;
    -webkit-appearance: none;
    text-align: center;
    border-radius: 10px;
}

#con {
    width: 40px;
    height: 40px;
    margin-top: 50px;
    -webkit-appearance: none;
    text-align: center;
    border-radius: 10px;
}

#int {
    width: 40px;
    height: 40px;
    margin-top: 15px;
    -webkit-appearance: none;
    text-align: center;
    border-radius: 10px;
}

#wis {
    width: 40px;
    height: 40px;
    margin-top: 15px;
    -webkit-appearance: none;
    text-align: center;
    border-radius: 10px;
}

#cha {
    width: 40px;
    height: 40px;
    margin-top: 15px;
    -webkit-appearance: none;
    text-align: center;
    border-radius: 10px;
}

.str_mod {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
}

.dex_mod {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
}


.con_mod {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
}

.int_mod {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
}

.wis_mod {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
}

.cha_mod {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
}



#character-sheet-stats {
    display: grid;
    grid-auto-rows: 1fr;
    width: 100%;
    background-color: rgba(251, 247, 245, 0.89);
    border-radius: 10px;    
}

.character-sheet-survival-stats {
    display: flex;
    flex-direction: column;
    margin: 35px;
    border-radius: 10px;
    border: 3px solid black;
    flex-grow: 3;
    justify-content: center;
    background-color: rgba(251, 247, 245, 0.89);
    align-items: center;
    padding: 15px;
}

.character-health-armor {
    display: grid;
    grid-template-columns: auto auto;
    width: 100%;
    gap: 20px;
    place-items: center;
    padding-top: 50px;
}

#hp-label {
    margin-right: 10px;
}

#hp {
    height: 50px;
    text-align: center;
}

#temp-hp-label {
    margin-right: 25px;
}

#temp-hp {
    height: 50px;
    text-align: center;
}

#ac-label {
    margin-right: 37px;
}

#ac {
    height: 50px;
    text-align: center;
}

#hit-dice-label {
    margin-right: 25px;
}

#hit-dice {
    height: 65px;
    width: 100px;
    border: 2px solid black;
}



.character-misc-stats {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
}

#character-speed {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
}

#initiative-button {
    font-size: 32px;
    height: 75px;
    width: 100px;
}

#initiative_input {
    text-align: center;
}

#speed_input {
    text-align: center;
}

#perception_input {
    text-align: center;
}

#proficiency_input {
    text-align: center;
}

#character-initiative {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
}

#character-perception {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
}

#character-proficiency {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
}

.character-items {
    display: flex;
    justify-content: space-evenly;
    flex-grow: 1;
    width: 100%;
}

#equip-list li {
    margin: 15px;
}

#inventory-list li {
    margin: 15px;
}

#character-equipment {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    border: 2px solid black;
    border-radius: 10px;
    flex-grow: 1;
    margin-right: 5px;

}

#equipment-input {
    display: flex;
    justify-content: center;
}

#equipment-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#character-inventory {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: space-evenly;
    align-items: center;
    border: 2px solid black;
    border-radius: 10px;
    flex-grow: 1;
    margin-left: 5px;
}


#character-attributes-section-str {
    display: flex;
    flex-grow: 1;
    border-bottom: 2px solid black;
}


#character-strength {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;

}


#strength-skills {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-grow: 2;
    padding-left: 10px;
    padding-top: 10px;
}

#strength-skills label {
    display: inline-block;
    width: 150px;
}

#character-attributes-section-dex {
    display: flex;
    border-bottom: 2px solid black;
}

#character-dexterity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

#dexterity-skills {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-grow: 2;
    padding-left: 10px;
    padding-top: 10px;
}

#dexterity-skills label {
    display: inline-block;
    width: 150px;
}


#character-attributes-section-con {
    display: flex;
    flex-grow: 1;
    border-bottom: 2px solid black;
}


#character-constitution {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

#constitution-skills {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-grow: 2;
    align-items: center;
    padding-left: 10px;
    padding-top: 10px;
}

#constitution-skills label {
    display: inline-block;
    width: 150px;
}



#character-attributes-section-int {
    display: flex;
    flex-grow: 1;
    border-bottom: 2px solid black;
}



#character-intelligence {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

#intelligence-skills {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-grow: 2;
    align-items: center;
    padding-left: 10px;
    padding-top: 10px;
}

#intelligence-skills label {
    display: inline-block;
    width: 150px;
}



#character-attributes-section-wis {
    display: flex;
    flex-grow: 1;
    border-bottom: 2px solid black;
}


#character-wisdom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    align-items: center;
}

#wisdom-skills {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-grow: 2;
    padding-left: 10px;
    padding-top: 10px;
}

#wisdom-skills label {
    display: inline-block;
    width: 150px;
}



#character-attributes-section-cha {
    display: flex;
    flex-grow: 1;
}


#character-charisma {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    align-items: center;
}

#charisma-skills {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-grow: 2;
    padding-left: 10px;
    padding-top: 10px;
}

#charisma-skills label {
    display: inline-block;
    width: 150px;
}


/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/styles/char-sheet-header.scss ***!
  \*****************************************************************************************************************/
/* character test */
#character-sheet-header {
    display: flex;
    justify-content: space-evenly;
    flex-basis: auto;
    margin: 35px;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    border: 2px solid black;
    background-color: rgba(251, 247, 245, 0.89);
    
}

#character-name {
    display: inline-flex;
    flex-grow: 1;
}

#character-name-box {
    display: inline-flex;
    justify-content: center;
    flex-grow: 1;
    text-align: center;
    font-size: 36px;
    background: rgba(204, 204, 204, 0);
    outline: none !important;
    border: none;
    text-decoration: underline;
}

.character-details {
    display: inline-flex;
    justify-content: space-evenly;
    flex-grow: 3;
}

#nav-links {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    flex-grow: 1;
}

#character-details-section-1 {
    display: block;
    width: 50%;
}


#character-details-section-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
}


#class {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50%;
    justify-content: space-evenly;
}

#state {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-evenly;
    height: 50%;
}

#idle-section {
display: inline-flex;
}

#idle-radio {
    margin-left: 10px;
}

#battle-section {
    display: inline-flex;
}

#battle-radio {
    margin-left: 10px;
}

#death-section {
    display: inline-flex;
    }
    
#death-radio {
    margin-left: 10px;
}


#warrior-section {
    display: inline-flex;
    }
    
#warrior-radio {
    margin-left: 10px;
}

#thief-section {
    display: inline-flex;
}

#thief-radio {
    margin-left: 10px;
}

#mage-section {
    display: inline-flex;
    }
    
#mage-radio {
    margin-left: 10px;
}

#archer-section {
    display: inline-flex;
    }
    
#archer-radio {
    margin-left: 10px;
}

#race {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50%;
    justify-content: space-evenly;
}

#background-select {
    margin-left: 15px;
    font-family: dnd;
    font-size: 24px;
    border-radius: 5px;
}


#dwarf-text {
    display: none;
}

#human-text {
    display: none;
}

#elf-text {
    display: none;
}

#half-orc-text {
    display: none;
}

#tiefling-text {
    display: none;
}

#ailment {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}




/*!*******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/styles/char-attacks-spells.scss ***!
  \*******************************************************************************************************************/
.character-sheet-model-and-attacks {
    display: flex;
    border: 1px solid red;
    flex-direction: column;
    margin: 35px;
    border-radius: 10px;
    border: 3px solid black;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    background-color: rgba(251, 247, 245, 0.89);
    justify-content: space-evenly;
    padding-bottom: 15px;
}

#model-canvas {
    width: 600px;
    height: 600px;
    margin: 25px;
    margin-top: 35px;
    border: 10px solid black;
    border-radius: 10px;
}

#character-canvas {
    display: flex;
    width: 100%;
    justify-content: center;
}

#character-attacks-and-spells {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 600px;
    justify-content: space-evenly;
    border: 1px solid black;
    border-radius: 10px;
    border: 3px solid black;
}

#attack-spell-list {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

#attack-spell-list li {
    margin: 10px;
}

#attack-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
}
/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/index.scss ***!
  \*************************************************************************************************************************************/
@font-face {
  font-family: dnd;
  src: url("../assets/dnd_font.TTF");
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  margin: 10px;
  background-color: white;
  background-image: url("../assets/grid.jpg");
  background-size: cover;
  background-position: center;
  font-family: dnd;
  font-size: 30px;
}

input {
  font-family: dnd;
  font-size: 24px;
  border: 2px solid black;
  border-radius: 5px;
}

select {
  border: 2px solid black;
}

button {
  border: none;
  background: none;
  font-family: dnd;
  font-size: 20px;
  font-weight: bold;
}

#character-sheet-body {
  display: flex;
  width: 100%;
}

#header-container {
  display: flex;
  height: 100px;
  width: 90%;
  margin: 35px;
  border-radius: 25px;
  flex-grow: 1;
}

#stat-container {
  display: flex;
  border: 2px solid black;
  margin: 35px;
  justify-content: space-evenly;
  border-radius: 10px;
  flex-grow: 2;
}

.tooltip {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 400px;
  overflow-y: auto;
  background: rgb(233, 233, 233);
  color: black;
  padding: 10px 20px;
  margin: 20px;
  border: 1px solid black;
  z-index: 9001;
  border-radius: 15px;
}

.tooltip-toggle {
  position: absolute;
  top: 0;
  right: 0;
}

.tooltip::-webkit-scrollbar {
  display: none;
}

#hold {
  display: none;
}

.ui-helper-hidden-accessible {
  display: none !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: #6693bc !important;
  font-weight: bold !important;
  color: #ffffff !important;
}

.ui-autocomplete {
  background-color: inherit;
}