/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : Jul 15, 2025, 5:04:46 p.m.
    Author     : Peter
*/
#to-battle-sim-link{
    margin-bottom: 20px;
}
a{
    text-decoration: none;
}
#home-monster-img img{
    width:100px;
    height:100px;
}

#button-to-main{
    flex-direction:row;
}
.button-cont{
    
}
#monsters{
    width:90%;
    padding-left:5%;
}
#monster-list, #passives-list, #marks-list, #atkTypes-list, #materials-list, #families-list, #blueprints-list, #equipment-list, #items-list, #boosts-list, #ailments-list{
    display:flex;
    flex-wrap:wrap;
}
#attack-list{
    display:flex;
}
.monster-icon-cont, .attack-icon-cont, .passives-icon-cont, .marks-icon-cont, .materials-icon-cont, .families-icon-cont, .atkTypes-icon-cont, .blueprints-icon-cont, .equipment-icon-cont, .eq-buttons-icon-cont, .items-icon-cont, .boosts-icon-cont, .ailments-icon-cont{
    display:flex;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid black;
    padding:5px;
    user-select: none;
    margin: 5px;
    font-family: Courier;
    justify-content: center;
}
.attack-name, .monster-name{
    text-align:center;
}
.attacks-type-name, .monsters-family-name{
    width:100px;
    padding:5px;
    user-select: none;
    margin: 5px;
    font-family: Courier;
    justify-content: center;
    align-self: center;
}
.attacks-type-cont, .attacks-type-list, .monsters-family-cont, .monsters-family-list{
    display:flex;
}
.attacks-type-cont, .monsters-family-cont{
    border-bottom: 1px solid black;
}
.attacks-type-list, .monsters-family-list{
    
    flex-wrap: wrap;
}
.monster-icon-cont:hover, .attack-icon-cont:hover, .passives-icon-cont:hover, .ranks-icon-cont:hover, .materials-icon-cont:hover, .atkTypes-icon-cont:hover, .blueprints-icon-cont:hover, .equipment-icon-cont:hover, .items-icon-cont:hover, .boosts-icon-cont:hover, .ailments-icon-cont:hover{
    background-color: palevioletred;
}
.small-icon:hover{
    background-color: palevioletred;
}
.attack{
    font-family: Courier;
}
.monster{
    font-family: Courier;
    border: 2px solid black;
    border-radius: 10px;
    padding:5px;
    margin:5px;
}
.equipment:not(.sorted-category-content){
    font-family: Courier;
}
.passive{
    font-family: Courier;
}
.rank{
    font-family: Courier;
}
.material{
    font-family: Courier;
}
.monster-img{
    width: 150px;
    height: 150px;
    cursor: pointer;
}
.monster-img-icon{
    width: 75px;
    height: 75px;
    cursor: pointer;
}
.monster-img img{
    width:100%;
    height:100%;
}
.monster-img:hover{
    background-color: tan;
}
.monster-name{
    font-family: Courier;
}
.data-name{
    width: 200px;   
}
.stat-total-name{
    border: 1px solid black;
    border-radius: 4px;
    user-select: none;
    background-color: darkorange;
}

.summary{
    width: 300px;
    height: 80px;
}
.cost-sell{
    display:flex;
    justify-content: center;
}
.cost-sell .category{
    flex-grow: 2;
}
.row{
    display: inline-flex;
    border-bottom: 2px dotted grey;
    padding:10px;
    width:98%;
}
.monster-fifth-row{
    border: none;
}
.passive{
    display:flex;
    flex-direction: row;
}
.passive-top{
    display:flex;
    align-items: center;
}
.passive-input{
    width:134px;
}
.category{
    display: flex;
    flex-direction: column;
    padding: 5px;
}
.category-text{
    padding: 10px;
    background: #EDDD53;
    background: linear-gradient(90deg, rgba(237, 221, 83, 1) 0%, rgba(237, 221, 83, 1) 2%, rgba(230, 216, 128, 1) 4%, rgba(215, 236, 247, 1) 10%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: Courier;
}
.category-text .add-button{
    align-self: flex-end;
}
.category-content{
    display:inline-flex;
    flex-wrap: wrap;
    padding:5px;
    background: beige;
    align-content: center;
}
.category-content div{
  margin: 4px;
}
.column{
    flex-direction: column;
}
.centered-text{
    text-align: center;
}
.options-list{
    flex-direction: column;
}
.options-list div{
    margin:5px;
}
.category div{
    margin-bottom:5px;
}
.button{
    display: flex;
    justify-content: center;
    align-items: center;
    height:25px;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid black;
    padding:5px;
    user-select: none;
    text-align:center;
    background-color: white;
    font-family: Courier;
}
#button-to-main{
    background-color: mistyrose;
}
#button-to-main:hover{
    background-color: rosybrown;
    
}
.add-new-button{
    background-color: mistyrose;
}
.add-button{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid black;
    padding:5px;
    user-select: none;
}

.remove-button{
    display: flex;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    border-radius: 2px;
    font-size: 14px;
}

.save-button:hover{
    background-color: palevioletred;
}
.delete-button:hover{
    background-color: palevioletred;
}
.return-button:hover{
    background-color: palevioletred;
}
.add-button:hover{
    background-color: palevioletred;
}
.remove-button:hover{
    background-color: palevioletred;
}
.hover-button:hover{
    background-color: palevioletred;
}
.toggle-button{
    display: flex;
    justify-content: center;
    align-items: center;
    height:25px;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid black;
    padding:5px;
    user-select: none;
    text-align:center;
}
.selected {
    background-color:#D7ECF7;
}
input{
    width:100px;
}
.flex-row{
    display:flex;
    flex-direction: row;
    justify-content: end;
}
.sgmod-level-cont{
    border: 1px solid black;
}
.sgmod-title, .sgmod-stats{
    width:100%;
    text-align: center;
}
.balanced-status-title{
    font-family: math;
}
.stat-balanced-status-text{
    font-weight: bold;
    padding:5px;
}
.balanced{
    background-color: green;
    color: white;
    border-radius: 10px;
}
.imbalanced{
    background-color: red;
    color: white;
}
.thin-box{
    width: 100px;
}