.admin-box {
display: flex;
flex-direction: column;
background-color: rgb(183, 131, 89);
border-style: dashed;
margin: 10px;
padding: 20px;

}

.customizeFormDiv {
    position: static;
    margin: auto;
    /* z-index: 500; */
    border-radius: 5px;
    box-sizing: border-box;
    width: 35vw;
    max-height: 80vh;
    overflow-y: auto;
    /* left: 34vw; */
    padding: 0vw 0.5vw;
    background-image: linear-gradient(to bottom right, rgb(20, 32, 61), rgb(69, 44, 110));
    color: white;
    min-width: 270px;
}

.customizeFormInputGroup {
    padding: 0.3vw;
    display: flex;
    flex-direction: column;
    background-color: rgb(129, 100, 176);
    margin: 5px 0px;
}

.customizeFormSubmit {
    margin: 0.3vw 0vw;
    font-size: large;
    background-color: #8C92AC;
    color: #31333b;
}

.customizeFormSelect {
    background-color: rgb(111, 85, 151);
    border: none;
    box-sizing: border-box;
    padding: 0.3vw;
    color: white;
}

.customizeFormInput {
    background-color: rgb(111, 85, 151);
    padding: 0.3vw;
}

.customizeFormCheckbox {
    background-color: red;
}

.adminBlocker {
    background-color: rgba(29, 29, 29, 0.185);
    display: flex;
    position: fixed;
    z-index: 499;
    min-width: 100%;
    min-height: 100%;
}

.adminFormCancel {
    padding: 12px 14px;
    background-color: rgb(230, 92, 92);
    font-weight: bolder;
    position: fixed;
    z-index: 500;
    left: 70vw;
    top: 15vw;
    border-radius: 20px;
}
.adminFormCancel:hover {
    background-color: rgb(230, 126, 126);
}

@media (max-width: 650px) {

    .adminFormCancel {
        left: 80vw;
    }
}

#admin-records {
    display: flex;
    justify-content: center;
    padding: 0.5vw;
}
#admin-records > button {
    box-sizing: border-box;
    border: 3px solid black;
    padding: 0.5vw 1vw;
    font-weight: bolder;
    transition: color 0.5s, background-color 0.5s;
    background-color:rgb(51, 68, 183);
    color: rgb(167, 183, 236);
}
#admin-records > button:hover {
    background-color: rgb(157, 55, 55);
    color: rgb(229, 157, 157);
}

#masterButton {
    border-radius: 47%;
    filter: opacity(50%) hue-rotate(30deg);
    width: 10vw;
    min-width: 85px;
    max-width: 100px;
    position: fixed;
    bottom: 1vh;
    left: 80px;
    z-index: 99;
}

.userSearchArea {
    width: 100%;
    height: 100px;
    font-size: 85%;
    background-color: white;
    color: black;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow-y: auto;
}
.userRecord {
    white-space: nowrap;
}
.userRecord:hover {
    background-color: rgb(255, 200, 200);
    cursor: pointer;
}
li.adminUser:hover {
    background-color: rgb(200, 255, 200);
}

/* Separate admin components that are being styled to fit new customizable components */
/* NOTE: 
It has just occurred to me that since all admin components have only number IDs,
each digit must be "escaped" using the "\3#" format. This is used to escape numbers in
CSS selectors. Sorry for this, but remember, life is pain anyways... \_('_')_/ 
*/
#\31\30\34 {
    max-width: 1155px;
}

p#\31\30\35 {
    overflow: auto;
}
#\31\30\38 {
    /* border: 0.1vw solid red; */
    height: 655px;
    width: 950px;
}

#\33\31\35 {
    width: 100%;
}

@media (max-width: 990px) {
    #\31\30\38 {
        /* border: 0.1vw solid red; */
        height: 450px;
        width: 620px;
    }
}

@media (max-width: 750px) {
    #\31\30\38 {
        /* border: 0.1vw solid red; */
        height: 340px;
        width: 455px;
    }
    #\31\30\38 + nav {
        /* border: 0.1vw solid red; */
        height: 340px;
        width: 150px;
    }
}

@media (max-width: 500px) {

    p#\31\30\35 {
        font-size: 50%;
    }

    #\31\30\38 {
        /* border: 0.1vw solid red; */
        height: 235px;
        width: 310px;
    }

    #\31\31\30 {
        font-size: 50%;
    }

    #\31\30\31 {
        font-size: 90%;
    }
    #\32\39\35 {
        font-size: 90%;
    }
    #\33\39\35 {
        font-size: 90%;
    }
    #\34\30\31 {
        font-size: 90%;
    }

    #\31\39\30 {
        font-size: 90%;
    }

    #\31\39\35 {
        font-size: 90%;
    }

    #\33\31\30 {
        font-size: 1rem;
    }

    #\34\30\35 {
        font-size: 80%;
    }
    #\34\31\30 {
        font-size: 80%;
    }

    .home-window {
        width: 98%;
        height: 230px;
    }

    #hoverwindow {
        min-height: 180px;
    }
}