#modalOverlay {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    padding: 5%;
    overflow-y: auto;
}

#modalContent {
    margin: auto;
    background-color: white;
    width: 50%;
    max-width: 700px;
    padding: 15px;
    border-radius: 5px;
}

/* Contents of Custom Stat */

.custom-stat-container {
    border: 1px solid black;
    display: flex;
    flex-direction: row;
}

.list-container {
    border: 1px solid gray;
    text-align: center;
    margin-top: 35px;
    background-color: lightgray;
}

#listHeader {
    font-size: small;
    padding: 2px 0;
}

#subStatList {
    height: 150px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    scroll-behavior: smooth;
    background-color: white;
}

#subStatList::-webkit-scrollbar {
    width: 5px;
}

#subStatList::-webkit-scrollbar-track {
    display: none;
}

#subStatList::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 5px;
}

#subStatList::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

#subStatList::-webkit-scrollbar-button {
    display: none;
}

#subStatList li.selected {
    background-color: rgb(50, 123, 218);
    color: white;
}

#subStatList li {
    cursor: pointer;
    font-weight: bold;
    text-align: left;
    user-select: none;
}

#subStatList li::before {
    content: none;
}

.substat-label-checkbox-part {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkbox-part {
    display: flex;
    flex-direction: row;
    column-gap: 6px;
    align-self: center;
    font-size: smaller;
    padding: 4px 8px;
    background-color: white;
}

/* The Close Button */

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;

    margin-left: 100%;
    margin-bottom: 10px;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.content-col-1,
.content-col-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgb(187, 187, 187);
    padding: 10px;
    width: 50%;
}

.content-col-1 .modal-header,
.content-col-2 .modal-header {
    display: block;
}

.content-col-1 .modal-combo-box,
.content-col-1 .list-container {
    width: 100%;
}

.slots {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.slots .slot-1,
.slots .slot-2,
.slots .slot-3,
.slots .slot-4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.row-btns {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.row-btns .row-btn1,
.row-btns .row-btn2 {
    display: flex;
    justify-content: space-between;
}

.row-btns .row-btn1 button,
.row-btns .row-btn2 button {
    width: 48%;
}

#cboValue1,
#cboValue2,
#cboValue3,
#cboValue4 {
    width: 50%;
}

.disabled {
    pointer-events: none;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Media Queries */

@media only screen and (min-width: 1113px) {
    #modalContent {
        width: 90vw;
    }
}

@media only screen and (max-width: 1113px) {
    #modalContent {
        width: 80vw;
    }
}

@media only screen and (max-width: 760px) {
    #modalOverlay {
        overflow-y: scroll;
    }

    #modalContent {
        width: 70vw;
    }

    #modalContent button,
    #modalContent select {
        height: 38px;
    }

    .content-col-1,
    .content-col-2 {
        width: 100%;
    }

    .modal-combo-box,
    .list-container {
        width: 100%;
    }

    .list-container ul {
        padding-inline-start: 0;
    }

    .custom-stat-container {
        flex-wrap: wrap;
    }

    #cboValue1,
    #cboValue2,
    #cboValue3,
    #cboValue4 {
        width: 40%;
    }
}

@media only screen and (max-width: 630px) {
    #modalContent {
        width: 75vw;
    }
}

@media only screen and (max-width: 576px) {
    #modalContent {
        width: 90vw;
    }
}