*{
    -webkit-user-select: none; user-select: none;
}

body {
    margin:0; padding:0;
    font-family: Sans-Serif; background-color: silver;
    text-align: center;
    font-size: 2.5vh;
}

#mainDiv{
    max-width: 750px;
    margin: 0 auto;
    font-size: 2.5vh;
    background-color: silver;
    color:red;
    /*border:1px solid black;*/
    padding-left:5%;
    padding-right:5%;
    padding-bottom:5%;
    text-align:center;
    display:flex;
    flex-direction: column;
    align-items: center;
}
#mainDiv button{
    height:50px;
    font-weight: bold;
    margin: 5px;
    border-color: grey;
}
#mainDiv #view-saved-battles-btn{
    font-size: 0.75rem;
    font-weight: bold;
    margin: 5px;
    border-color: grey;
    color:silver;
    background-color: darkred;
    height:25px;
}
#info-form{
    display:grid;
}

h1,h2,h3{
    color:darkred;
    background-color:darkgray;
}

#responseDiv{
    /* color:silver; */
    max-width:750px;
    margin: 0 auto;
}
#responseDiv button{
    font-size: 0.75rem;
    font-weight: bold;
    margin: 5px;
    border-color: grey;
    color:silver;
    background-color: darkred;
}

.scrollable{
    overflow-y:auto;
    max-height:90vh; 
}

#saved-battles-div{
    display:flex;
    flex-direction: column;
    background-color: #AAA9AD;
    font-size:2vh;
    color:darkred;
}
#saved-battles-div, #saved-battles-div p{
    margin:2px;
    font-weight: bold;
    
}
#saved-battles-div img{
    height:2vh;
    float:right;
}
.saved-battle{
    display:grid;
    grid-template-columns: 9fr 1fr;
    border:1px solid grey;
    justify-items: center;
    align-items: center;
}
.selected-battle{
    background-color:cadetblue;
    color:crimson;
}

.info-div{
    border:1px solid grey;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

#locationImg{
    max-width: 50px;
    max-height: 50px;
}

#lord-divs{
    display:grid;
    grid-template-columns: 10fr 1fr 10fr;
    grid-template-rows: auto;
    
}

#lord-att{
   border:1px solid grey;
}

#lord-def{
    border:1px solid grey;
}
#switch{
    justify-self: center;
    align-self: center;
    padding:0px 10px 0px 10px;
    width:50px;
    height:50px;
}
.army-divs{
    display:grid;
    grid-template-columns: 10fr 1fr 10fr;
    grid-template-rows: auto;
    justify-items: center;
}
.army-divs p{
    margin:0;
}
input, label, button, select, p{
    font-size:1.5vh;
    /*font-size: 0.5em;*/
}

button{
    color:darkred;
    background-color: darkgrey;
}

.checkbox{
    transform: scale(1.25);
}
.movement-settings-p{
    display:flex;
    justify-content: space-evenly;
    align-items: center;
}

#troop-stats-div{
    font-size:0.75rem;
    max-width: calc(min(500px, 50vw));
    color:darkred;
    background-color:darkgrey;
    border: 1px solid grey;
    margin-bottom:2em;
    display:grid;
    justify-items: center;
    justify-self: center;
    padding:5px;
}
#troop-stats-div img{
    width: 75%;
    max-width: 100px;
    height: auto;
    border: 2px solid darkred;
}
#troop-stats-div p{
    font-size: 0.75rem;;
}


.grid-item-1{
    grid-area: Image;
}
.grid-item-2{
    grid-area: Label;
}
.grid-item-3{
    grid-area: Input;
}
.grid-container{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "Image Image Label Label Label Label"
    "Image Image Input Input Input Input";
    border: 1px solid grey;
}

.army-btn{
    max-width:100%;
    font-size: 0.75rem;
    /* height:50px; */
}
.army-btn-div{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}
.pool-btn-div{
    display:grid;
}
#army-att{
    display:flex;
    flex-direction: column;
    border:1px solid grey;
    align-content: space-between;
}
#army-def{
    border:1px solid grey;
    align-content: space-between;
}

.pools-divs-container{
    display:flex;
    flex-direction: column;
}

.poolsDiv{
    border:1px solid grey;
}

.pool-div{
    border:1px solid grey;
    display:grid;
    grid-template-columns: 7fr 3fr;
    grid-template-rows: auto;
    margin:5px;
}
.pool-div h4{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.pool-div button{
    padding:0;
    color:red;
    font-weight:bolder;
}

.troop-select-div{
    display:grid;
    grid-template-columns: 3fr 0.5fr 3fr 0.5fr;
    grid-template-rows:auto;
}

#army-shortcuts-div{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    border:1px solid grey;
}

.clickableDiv{
    border:1px solid grey;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
    color:darkred;
    align-self: center;
    align-items: center;
    justify-content: center;
    background-color: #AAA9AD;
    display:grid;
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: auto;
}
.clickableDiv img{
    max-width: 100px;
    max-height: fit-content;
}
.clickableDiv p{
    font-size: 2rem;
    font-weight: bold;
    margin:0;
    justify-self: center;
}

.clickableDiv:active {
    color:firebrick;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.6);
}

/*contains the stack-breakdown in output, above report*/
.stack-container{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}
.stack-container p, ul{
    margin:0;
    gap:5px;
}
.stack-breakdown-div{
    padding:10px;
    margin:0;
}
.stack-breakdown-div p{
    margin-top:0;
}

#responseDiv .defStackBreakdownBtn{
    background-color: #003000;
}
#responseDiv .attStackBreakdownBtn{
    background-color: #300000;
}

#downloadReportDiv{
    background-color: silver;
    display: flex;
    grid-template-columns: 1fr 1fr;
    justify-content: space-around;
    align-items: center;
}

.hide{
    display:none !important;
}