body.modal-open{
    overflow-y:auto;
}
.content{
    color:white;
    padding: 0rem 2rem;
    width:100%;
    display:flex;
    flex-wrap: wrap;
}

.homePanel{
    background-color: #2a323d;
    border: 1px solid black;
    box-shadow: 5px 5px 5px black;
    border-radius: 1em;
    padding: 0em 1em;    
    margin-bottom: 1rem;    
}

.homeBanner{
    min-width: 100%;
    background-color: #2a323d;
}
.personalPanel{
    display:flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 100%;
    padding:0em 0.1em 1em 0.1em;
}
.homeInnerPanel:last-of-type{
flex-grow:1;
}

.homePanel h1{
    text-align: center;
}

.homeInnerPanel{
    background-color: #20262e;
    box-shadow: 2px 2px 2px black;
    white-space: nowrap;
    min-width:10%;
    border: 1px solid black;
    border-radius: 1em;
    margin:0.5em .5em 0.5em .5em;
    padding: 0.5em 1em 1em 1em;
}

.raidPanel{
display:flex;
}
.raidPanel table{
    width:100%;
}
.raid-table td a{
    color:white;
}
.raid-table-col-raid_name,
.raid-table-col-raid_status,
.raid-table-col-raid_start,
.raid-table-col-raid_era,
.raid-table-col-raid_leader{
    width: 1ch;
    text-align: center;
}
.raid-table td{
    padding:0em 1em;
}
.raid-table-col-raid_target{
    padding-left: 1em !important;
    text-align: left;
}


.raid-table th.table-title{
    border-top-style: hidden;
    border-left-style: hidden;
    border-right-style: hidden;
}

.homeCharacters{
    display:flex;
    width:100%;
    flex-wrap: wrap;
    justify-content:flex-start;
    padding-bottom: 1.5em;
    
}
.characterSubPanel{
    display:flex;
    justify-content: center;
    align-items: center;
    margin:0em 1em 1em 1em;
    border-radius: 1em;
    background-color: #20262e;
    min-width: 225px;
    max-width: 25%;    
    box-shadow: 2px 2px 2px black;
    padding:0.5em;
}
.table-responsive{
    display:flex;
    justify-content: center;
    width:100%;
}

.charater-table{    
    width:90%;
}

.characterSubPanel td{
    flex-grow: 1;
    min-width:11ch;
    text-align: center;
}
.characterSubPanel.newCharacter{
    max-width:220px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space:initial;
}
.characterSubPanel:hover{
    box-shadow: 10px 10px 10px black;
}
.characterSubPanel.newCharacter H1{
    font-size: 100px;
}

.modal {
    z-index: 1000;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
}
.modalBox {
    color:white;
    border-radius: 1em;
    border: 2px solid black;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #2a323d;
    padding-bottom: 1em;
}

.modalTitleBar{
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    display:flex;
    justify-content: center;
    border-bottom: 2px solid black;
}


.modalTitle{
    text-align: center;
    font-size: 1.5em;
}
.modalTitleClose{
    border-left: 1px solid black;
    width: 2em;
    font-weight: bold;
    text-align: center;
    background-color:grey;
}
.item-select{
    width:25ch;
    text-align: left;
}
input{
    width:25ch;
    padding-left: 0.2em;
}
option{
    padding-left: 0.5em;
    text-align:left;
}
.form-group{
    display: flex;
    margin: 0em 1em;
    padding: 0.125em 0em;
    width:100%;
}
.form-buttons{
    width:100%;
    padding: 1em 1em 0em 1em;
    display:flex;
    justify-content: space-between;    
}

.form-buttons button{
    width: 40%;
    height: 2em;
}

.characterModalBox{
    width: 600px;
    min-height:800px;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.characterModalContent{
    display:flex;
    flex-direction:column;
    flex-grow: 1;
    padding: 0em 1em;    
}
.modalCharacterDetails{
    flex-grow: 2;
    display:flex;
}
.modalCharacterDetailsRight{
    flex-grow:1;
    display:flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right:0%;    
}
.modalCharacterDetailsRight .table-responsive{
    justify-content: right;
}
.modalCharaterTable td{
    border:2px solid lightgray;
    min-width: 10ch;
    padding-right: 1em;
}
.modalCharaterTable td:first-child{
    text-align: left;
}

.modalItemHistory{
    margin-top:0.5em;
    flex-grow: 3.8;
    display:flex;
    justify-content: center;
    border: 1px solid white;
}

.modalRaidHistory{
    margin-top:0.5em;
    flex-grow: 3.8;
    display:flex;
    justify-content: center;
    border: 1px solid white;
}
.characterModalButtons{
    margin-top:0.5em;
    flex-grow: 0.1;
    display:flex;
    justify-content: space-between;
    padding: 1em;
    
}
.characterModalButtons button{
    width:20%;
    min-width:10ch;
}
.raidModalBox{
    width: 600px;
    min-height:800px;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}
.raidModalContent{
    display:flex;
    flex-direction:column;
    flex-grow: 1;
    padding: 0em 1em;    
}
.raidModalUpper{
    flex-grow: 1;
    display:flex;
    border: 1px solid white;
}
.raidModalLower{
    flex-grow: 2;
    display:flex;
    border: 1px solid white;
}
.raid-signup{
    width:100%;
}
.raid-signup-col-0,
.raid-signup-col-1,
.raid-signup-col-3,
.raid-signup-col-4{
    width:25%;
}

.error-box{
    display:flex;
    align-items: center;
    padding: 0em 1em;
    max-width:38ch;
    min-height:1em;    
}
.error-message{
    display:flex;
    font-size: large;
    white-space: pre-wrap;
    color:white;
}
.modalContent{
    padding-top: 1em;
}
.label{    
    padding-right: 1ch;
    text-align: right;
    width:15ch;
}

@media only screen and (max-width: 900px) {
    .content{
        padding: 0rem 0.75rem;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .homePanel{
        min-width: 100%;
    }
   .homeCharacters{
    justify-content: space-around;
   } 
   .characterSubPanel{
    width:100%;
    display: flex;
    justify-content: center;
   }
   .raid-table-col-raid_status,
   .raid-table-col-raid_start,
   .raid-table-col-raid_era,
   .raid-table-col-raid_leader{
    display:none;
   }

.characterModalBox{
    flex-grow: 1;
    min-height:100%;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

body.modal-open{
    overflow-y:auto;
    overscroll-behavior: contain;
}

.characterSubPanel{
    max-width: 100%;
}

}