body {
    background-color: white;
}

div {
    border-radius: 1em;
}

#toolBar, #sideBar {
    background-color: lightgray;
    margin: 20px;
    padding: 10px;
    text-align: center;
}

#toolbar, #sideBar, input {
    margin: 5px 5px 5px 0px;
}

input {
    padding: 4px;
}

#sidebar input {
    width: 80%;
}

#sideBar {
    margin: 20px;
    display: block;
    float: left;
    width: 12%;
}

#sideBar input {
    width: 80%;
    overflow-wrap: anywhere;
    white-space: normal;
}

#holder {
    margin-left: 20px;
    padding: 0px;
    text-align: center;
    float: right;
    width: 76%;
}


#loadDeckDiv {
    background-color: lightgray;
    position: fixed;
    top:30px;
    left:30px;
    width: 40%;
    height: 85%;
    padding: 30px;

    border-style: solid;
    visibility: hidden;
}

#closeDeckDiv {
    float: right;
}

#loadDeckContent {
    overflow-y: scroll;
    height: 80%;
    background-color: grey;
    border-style: groove;
    padding: 5px 20px 5px 20px;
}

#editingButtons {
    overflow-x: hidden;
}

.inputer {
    display: inline;
    white-space: nowrap;
}

.monster {
    margin: 5px;
    border-style: solid;
    display: inline-block;
    width: 20%;
    padding: 10px;
    font-weight: bolder;
}

.cardIcon {
    float: left;
}

.close {
    background-color: red;
    float: right;
}

.GoOn {
    text-align: left;
}

.GoOn, .AC {
    display: inline-block;
    padding-right: 10%;
}

.name, .AC, .GoOn {
    margin: 5px;
}

.name {
    clear:right;
}

#selected {
    background-color:crimson;
}

#swapLbl {
    display: inline-block;
}

#toolBar div {
    display:inline;
}

#toolBar input {
    width: 100px;
}


.effectIcon {
    width: 40px;
    height: 40px;
    border-style: groove;
    image-rendering: pixelated;
}

#statusSelect {
    position: sticky;
    display: none;
}

.fileName {
    border-style: solid;
    background-color: lightgray;
    margin: 5px;
    padding: 15px;
}

.deleteBtn {
    /*border-style: solid;*/
    display: inline-block;
}

/*v small screens*/
@media (max-width: 530px) {
    #toolBar div {
        display:block;
    }
    #swapLbl {
        display:block;
    }
    .monster {
        margin:20px;
        width:70%;
    }
    #loadDeckDiv {
        width:90%;
    }
}

/*small screens*/
@media (max-width: 1050px) {
    #sideBar {
        display: block;
        width: auto;
        float: none;
    }

    #holder {
        width: auto;
        float: none;
        clear: left;
    }

    #loadDeckDiv {
        width:60%;
    }
}