* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    font-family: 'Montserrat';
    transition: .1s all;
}

body {
    width: 100vw;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    user-select: none;
    font-family: 'Montserrat';
    color: white;
    transition: .2s all;
}

.bg {
    width: 100%;
    height: 100%;
    background-image: url(./img/spawnselector-bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    opacity: 0;
    z-index: 999;
    display: none;
}

.server-logo {
    width: 14%;
    height: 10%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 1% auto;
}


.spawn-area-boxes {
    width: 100%;
    height: 27%;
    margin-top: 28%;
    /* align-items: center; */
    text-align: center;
    position: relative;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: center;
    z-index: 999;
}

.spawn-area-boxes::-webkit-scrollbar {
    width: 19px;
    height: .5vh;
    background-color: #141414c2;

}

.spawn-area-boxes::-webkit-scrollbar-track {
    background-color: #141414;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.spawn-area-boxes::-webkit-scrollbar-thumb {
    background-color: rgb(243 243 243);
    border-radius: 15px;
    outline: none;
}

.box {
    width: 10%;
    height: 64%;
    text-align: center;
    align-items: center;
    justify-content: center;
    /* background: rebeccapurple; */
    margin-left: 1%;
    float: left;
    position: relative;
    /* flex-direction: row; */
    flex-shrink: 0;
    -ms-flex-direction: row;
    bottom: -33%;
    z-index: 999;


}

.inbox-area-infoside {
    width: 100%;
    height: 100%;
    /* opacity: 0; */
    width: 12rem;
    height: 18rem;
    border-radius: 15px;
    top: 8rem;
    position: relative;
    /* display: none; */
    border: 1px solid rgba(255, 255, 255, 0.384);
    background: linear-gradient(186deg, rgba(24, 24, 24, 0.76), #0000002b);
    /* background-image: url(./img/nonhover.png); */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: .1s all;
}


.inbox-area-infoside:hover {
    top: -4rem;
    /* background-image: url(./img/hoveredbox.png); */
    /* background-size: contain; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
}

.inbox-area-infoside-areaimg {
    /* background-image: linear-gradient(270deg, #184d38b2 0%, rgba(0, 255, 192, 0) 100%), url(https://cdn.discordapp.com/attachments/1078392502249345024/1120064067554521310/unreal_engine_1200x675_25052022002301.jpg); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 10.6rem;
    height: 8rem;
    margin: 7% auto 2% 5%;
    border-radius: 16px;
    float: left;
}


.inbox-area-infoside-areaname {
    text-align: center;
    width: 10rem;
    height: 13%;
    font-family: 'Montserrat';
    font-weight: 500;
    font-style: italic;
    margin-left: 8%;
    margin-top: 2%;
}

.inbox-area-infoside-arealabel {
    font-family: 'Montserrat';
    font-weight: 100;
    font-size: 1vh;
    opacity: 0.8;
    width: 9rem;
    height: 17rem;
    margin-left: 9%;
    overflow: hidden;
    text-align: center;
    margin-top: 9rem;
}


.inbox-area {
    position: relative;
    background: #2a2929bf;
    padding: 16px;
    border-radius: 15px;
    border: 1px solid #ffffff61;
    margin: -2% auto 0px;
    width: 17%;
    height: 29%;
    transition: .1s all;
    color: white;
}

.inbox-area:hover {
    width: 64%;
    scale: 1.1;
    border: 1px solid #12faa1;
    background: linear-gradient(54deg, #CCFF3C 7%, rgba(0, 255, 192, 1) 86%);
    color: black;
    cursor: pointer;
    box-shadow: -7px 1px 24px 6px #CCFF3C;


}

.spawnbox {
    border-radius: 5px;
    margin: 1rem auto;
    text-align: center;
    width: 16%;
    height: 9%;
    padding: 30px;
    background: #CCFF3C;
    background: linear-gradient(54deg, #CCFF3C 7%, #D5FB50 86%);
    font-size: 3vh;
    font-weight: 800;
    /* box-shadow: -7px 1px 24px -2px #CCFF3C; */
    transition: .1s all;
    color: white;
}

.spawnbox:hover {
    color: black;
    box-shadow: -7px 1px 24px 6px #CCFF3C;
    scale: 1.2;
    cursor: pointer;
}


.newlocationCreate {
    display: none;
    border: 1px solid white;
    background-color: transparent;
    position: absolute;
    border-radius: 12px;
    text-align: center;
    font-size: 29px;
    transition: .2s all;
    margin: 1.6rem 56rem;
    width: 5rem;
    font-size: 6vh;
    height: 5rem;
    transform: rotate(43deg);
    /* padding: 1px; */
}

.newlocationCreate:hover {
    background: rgb(200, 255, 0);
    scale: 1.2;
    box-shadow: 2px 3px 19px 3px rgb(255, 194, 24);
    color: black;
}

.newlocationCreateText {
    transform: rotate(317deg);
}



.box-editbutton {
    background-color: #1b1b1b6e;
    border: 1px solid rgba(255, 255, 255, 0.705);
    text-align: center;
    width: 9%;
    height: 5%;
    font-size: 1.7vh;
    font-weight: 800;
    /* box-shadow: rgb(248 251 36) -7px 1px 24px -2px; */
    color: white;
    padding: 14px;
    /* background: linear-gradient(54deg, rgb(255 153 0) 7%, rgb(255 224 0) 86%); */
    transition: all 0.1s ease 0s;
    position: absolute;
    top: 0;
    margin: 51.7% auto 26px 34.2%;
    border-radius: 6px;
    display: none;
}

.box-editbutton:hover {
    color: black;
    background: linear-gradient(54deg, rgb(255 153 0) 7%, rgb(255 224 0) 86%);
    box-shadow: -7px 1px 24px 6px rgb(255 224 0);
    border: 1px solid rgb(229, 255, 0);

    scale: 1.2;
    cursor: pointer;
}

.box-deletebutton {
    background-color: #1b1b1b6e;
    border: 1px solid rgba(255, 255, 255, 0.705);
    text-align: center;
    width: 9%;
    height: 5%;
    font-size: 1.7vh;
    font-weight: 800;
    /* box-shadow: rgb(175 22 22) -7px 1px 24px -2px; */
    color: white;
    margin: 26px auto;
    padding: 14px;
    transition: all 0.1s ease 0s;
    position: absolute;
    top: 0;
    margin: 51.7% auto 26px 54.2%;
    border-radius: 6px;
    display: none;
}

.box-deletebutton:hover {
    color: black;
    box-shadow: -7px 1px 24px 6px rgb(255 0 0);
    background: linear-gradient(54deg, rgb(133 24 6) 7%, rgb(255 0 0) 86%);
    border: 1px solid rgb(255 0 0);

    scale: 1.2;
    cursor: pointer;
}


.info-card {
    /* transform: rotate3d(-5, -4, 0, 7deg); */
    /* scale: 0.7; */
    transform: perspective(400px) rotateY(350deg);
    background-image: url(./img/info-screen-card-bg.png);
    height: 52%;
    width: 28%;
    position: absolute;
    /* background-color: rgba(255, 0, 0, 0.557); */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: .2s all;
    text-align: center;
    justify-content: center;
    opacity: 0;

}

.info-card-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 80%;
    height: 34%;
    align-items: center;
    justify-content: center;
    margin: 2% auto;
    border-radius: 8px;
}

.info-card-locname {
    text-align: left;
    width: 49%;
    margin-left: 10%;
    font-weight: 900;
    font-size: 2vh;
    margin-top: -1%;
}

.info-card-loclabel {
    font-size: 1vh;
    color: white;
    opacity: 0.7;
    font-weight: 200;
    text-align: left;
    margin-left: 10%;
    max-height: 7%;
    height: 8%;
    width: 26.8rem;
}

.info-card-player {
    font-size: 1.2vh;
    text-align: right;
    left: 1;
    margin-right: 1%;
    opacity: 0.6;
    font-weight: 200;
    font-style: italic;
}

/* INPUT CREATING SIDE */


.input-wrapper {
    position: absolute;
    width: 30rem;
    background: rgba(255, 117, 117, 0);
    height: 34rem;
    margin: 10rem 44rem;
    top: 0%;
    z-index: 199999;
}


.input-answer-side {
    background: #191b24d9;
    width: 25rem;
    height: 13rem;
    border-radius: 12px;
    padding: 15px;
    margin: 9rem auto;
}

.input-answer-side-header {
    text-align: center;
    font-size: 1.5vh;
    font-weight: 500;
    height: 5rem;
    margin-top: 2rem;
}

.input-creating-side {
    background: #161414e6;
    width: 28rem;
    height: 36rem;
    /* overflow: hidden; */
    overflow-x: scroll;
    border-radius: 12px;
    display: none;
}

.input-creating-side::-webkit-scrollbar {
    width: 9px;
    height: .5vh;
}

.input-creating-side::-webkit-scrollbar-track {
    /* background-color: #65a594; */
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.input-creating-side::-webkit-scrollbar-thumb {
    background-color: rgb(243 243 243);
    border-radius: 15px;
    outline: none;
}


.input-creating-box {
    padding: 15px;
    width: 27rem;
    height: 8rem;
}


.input-creating-box-header {
    width: 22rem;
    font-weight: 500;
    font-style: italic;
    font-size: 1.6vh;
}

.input-creating-box-label {
    font-size: 1vh;
    opacity: 0.5;
    height: 1.7rem;
}

.input-creating-inputside {
    padding: 16px;
    width: 21rem;
    height: 3rem;
    outline: none;
    border: 1px solid;
    border-radius: 4px;
    font-family: 'Montserrat';
}

.input-creating-select-box {
    width: 4rem;
    height: 3rem;
    background: #424242fa;
    font-size: 1vh;
    text-align: center;
    border-radius: 8px;
    padding: 4px;
    float: right;
    top: 0rem;
    position: relative;
}

.input-answer-accept {
    width: 10rem;
    padding: 13px;
    background: #0bcf0b;
    color: black;
    text-align: center;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 2px 3px 19px 3px;
    float: left;
    transition: .1s all;

}

.input-answer-accept:hover {
    background: #00ff00;
    color: white;
    box-shadow: 2px 3px 19px 3px #00ff00;
    scale: 1.2;
}

.input-answer-decline {
    width: 10rem;
    padding: 13px;
    background: #cf0b38;
    color: black;
    text-align: center;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 2px 3px 19px 3px;
    float: inline-end;
    transition: .1s all;
}

.input-answer-decline:hover {
    background: #ff003c;
    color: white;
    box-shadow: 2px 3px 19px 3px #ff003c;
    scale: 1.2;
}