.settings-form {margin-top: 4vh;}
.submit-upload {
    position:relative;text-align: center;
    padding: 1.5vh 0;background-color: var(--c-blue);
    font-size: 2.5vh;font-family: 'Minecraft Ten';
    text-shadow: none;color: var(--c-dgray);cursor: pointer;
    display: none;
}
.error-line {
    display:block;font-size: 2vh;color: #e75151;
    text-align: center;
}
.upload-form {
    display:grid;position:relative;
    width:100%;grid-template-columns: 44% 54%;
    column-gap: 2%;row-gap: 2vh;
}
.upload-form form {position:relative;display: inline-grid;width: 100%;}
.banner-input, .pack-file, .pack-download, .pack-gallery {
    position:relative;display:block;z-index: 3;
    width: 100%;height: 35vh;
}
.creator-file {height: 35vh;}
.small-bip {height: 28vh !important;}
#files-form {align-items: start;}
.pack-file {height: 12vh;margin-bottom: 3vh;}
.over-banner, .over-pack-file {
    position:absolute;top:0;left:0;width:100%;pointer-events: none;
    height:100%;background-color: var(--c-gray);z-index: 5;
    text-align: center;color: var(--c-white);
    font-family: 'Minecraft Ten';font-size: 2.5vh;

    display: flex;justify-content: center;align-items: center;
    flex-direction: column;
}
.over-banner {background-size:cover;background-position:center;}
.over-banner::before, .over-pack-file::before {
    position:absolute;content: "";top:2vh;left:2vh;pointer-events: none;
    width: calc(100% - 4vh - 4px);height:calc(100% - 4vh - 4px);
    border: dashed 2px var(--c-blue);
}
.accepted-file::before {border: dashed 2px #489e55 !important;}
.gallery-files .accepted-file::before {border: dashed 2px #489e55 !important;}
.gallery-files .over-pack-file::before {border: dashed 2px var(--c-dgray) !important;}
.over-pack-file::before {
    top:1vh;left:1vh;pointer-events: none;
    width: calc(100% - 2vh - 4px);height:calc(100% - 2vh - 4px);
}
.over-banner img {display:block;height: 35%;}
.select-banner-t {display: block;position:relative;}
.over-in-text {
    position: relative;text-align: center;font-family: Segoe;font-weight:bold;font-size: 1.25vw;
    line-height: 1.25vw;pointer-events: none;
}
.small-specification {display:block;font-size: 1vw;font-family: Segoe;}
.pack-download, .pack-gallery {
    width:100%;height: 12vh;display:block;cursor: pointer;
}
.shaded-banner {
    text-shadow: 0 0 3px black;margin-top: 2vh;
    position:relative;display:block;
}
.pfp-file {display: inline-block;width:35vh;height: 35vh;}
.pfp-file .over-in-text {font-size: 1vw;line-height: 1vw;}
.pfp-file input {width: 35vh;height:35vh;}
.small-specification {font-size: 0.75vw;font-weight: normal;}

.input-field {position:relative;}
.input-title {
    position:relative;display:block;color: var(--c-white);
    font-size: 1vw;font-family: Segoe;font-weight:bold;margin-bottom: 0.5vw;
    line-height: 1vw;
}
.pack-name, .pack-resolution {display: inline-block;vertical-align: top;position:relative;}
.pack-name {width: 65%; margin-right: 5%;}
.pack-resolution {width: 30%;}
.input-field input, select, textarea {padding: 1vw 1vw;width: calc(100% - 2vw);}
textarea {resize: none;}
.full-input input {width: 100% !important;}
select {padding: calc(1vw - 1px) 1vw;width: 100% !important;}
input {border-bottom: solid 2px transparent;}
.activatedinput:valid {border-bottom: solid 2px var(--c-blue);}
.activatedinput:invalid {border-bottom: solid 2px #e75151;}

.input-explain {
    position:relative;display: inline-block;vertical-align: top;
    width: calc(90% - 3vw);margin-right: 10%;color: var(--c-white);
}
.input-explanation {font-size: 0.85vw;}
.input-checked {margin-top: 4vh;}

.select-version {margin-top: 1vw;}
.game-select {
    height: 17.5vh;width: calc(47.5% - 6px);display: inline-block;vertical-align: top;
    background-size:100% auto;background-position: center;color: var(--c-white);
    text-align: center;position: relative;cursor: pointer;
    border: solid 3px gray;
    transition: background-size 0.2s ease-in-out;
}
.game-select::before {
    position:absolute;top:0;left:0;width:100%;height:100%;
    background-color: rgba(50,50,50,0.8);content: "";
}
.mc-java {margin-right: 5%;}
.selected-game {
    border: solid 3px var(--c-blue);color: var(--c-blue);
}
.mc-java {background-image: url(../assets/sprites/java.png);}
.mc-bedrock {background-image: url(../assets/sprites/bedrock.png);}

.game-middle {
    text-align: center;position:absolute;z-index: 5;
    display: flex;justify-content: center;align-items: center;
    flex-direction: column;top:0;left:0;width:100%;height:100%;
}
.game-title {
    color: var(--c-white);position:relative;display:block;
    font-family: 'Minecraft Ten';font-size: 2.5vh;transition: all 0.2s ease-in-out;
}

.game-select:hover {background-size: 110%;}
.game-select:hover .game-title {text-shadow: -3px 3px 0px var(--c-blue);}

.over-button-gallery {
    position:absolute;top:0;left:0;width:100%;pointer-events: none;
    background-color: var(--c-blue);color: var(--c-white);text-align: center;
    padding: 0.7vw 0 0.9vw 0;font-size: 1vw;line-height:1vw;
}
.over-button-gallery::before {
    position:absolute;content: "";top:0.25vw;left:0.25vw;width:calc(100% - 0.75vw);height:calc(100% - 0.75vw);
    border: 2px dashed var(--c-white);
}
.input-checkin {
    text-align: right;display: inline-block;vertical-align: top;
    width: 3vw;position:relative;
}
.input-checkin input {width: 3vw;}
input[type="checkbox"] {
    top:0;left:0;position:absolute;width: 3vw;cursor: pointer;
    padding: 0 !important;margin: 0 !important;height: 3vw;
    background-color: var(--c-blue);border: none;outline: none;
}
input[type="checkbox"]::before {
    background-color: var(--c-blue);
    content: "";position:absolute;top: 0;left: 0;width: 3vw;height: 3vw;
    background-image: url(../assets/sprites/unchecked.png);background-size: 100%;
    background-position: center;background-repeat: no-repeat;
}
input[type="checkbox"]:checked::before {
    content: "";display: block;position: absolute;width: 3vw;height: 3vw;
    top: 0;left: 0;background-color:var(--c-blue);
}
input[type="checkbox"]:checked::after {
    content: "";position:absolute;top: 0;left: 0;width: 3vw;height: 3vw;
    background-image: url(../assets/sprites/checked.png);background-size: 100%;
    background-position: center;background-repeat: no-repeat;
}
.priv-pub[type="checkbox"]::before {
    background-color: #e75151;
    background-image: url(../assets/sprites/private.png);
}
.priv-pub[type="checkbox"]:checked::after {
    background-color:var(--c-blue);
    background-image: url(../assets/sprites/public.png);
}

.text-area {width: 100%;resize: none;}
.input-field h4 {margin-bottom: 0.5vw;}


.banner-selection {
    position:relative;display:inline-block;width: calc(95% - 35vh);margin-left: 5%;vertical-align: top;
}
.banner-selection h4 {margin-bottom: 2vh;}
.split-or {margin: 3vh 0 !important;}
.color-radio {
    display: inline-block;margin-right: 1vh;vertical-align: middle;
    border: solid 3px var(--c-dgray);outline: solid 2px var(--c-dgray);
    height: 5vh;width: 5vh;position:relative;transition: all 0.2s ease-in-out;
}
.color-radio input {
    display:block;width:100%;height:100%;
    padding: 0;margin: 0;cursor: pointer;
}
.color-over {display:block;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events: none;}
.purple-radio .color-over {background-color: #734b6d;}
.darkblue-radio .color-over {background-color: #004e92;}
.blue-radio .color-over {background-color: var(--c-blue);}
.green-radio .color-over {background-color: #a8e063;}
.yellow-radio .color-over {background-color: #d6ae7b;}
.orange-radio .color-over {background-color: #feb47b;}
.red-radio .color-over {background-color: #f45c43;}

.selected-radio {border: solid 3px var(--c-dgray);outline: solid 2px var(--c-blue);}


.action-box {
    position:absolute;display:flex;top:0;left:0;width:100%;height:100%;
    background-color: var(--c-blue);text-align: center;justify-content: center;
    align-items: center;
}
.action-box form {
    padding: 2vw 4vw;background-color: var(--c-dgray);
    height:auto;text-align: left;max-width: 90%;min-width: 35%;
}
.spacedh {margin: 1vw 0 2vw 0;line-height: 1.5;}
.action-box form input {width:100% !important;}


input[type="file"] {padding: 0;}


.over-pack-file {background-size: cover;background-position:center;}
.pfpselected .over-in-text {opacity: 0;}
.left-form-text {text-align: left !important;}


@media (max-width: 980px) and (orientation: portrait) {
    .input-title {font-size: 4vw;line-height: 1.2;margin-bottom: 1vw;}
    .game-select {
        display:block;margin: 0;width:calc(100% - 6px);height: 30vw;
        margin-bottom: 2vw;background-size: cover;
    }
    .select-version {margin-top: 8vw;}
    .settings-form {text-align: center;}
    .banner-selection {
        position:relative;display:block;width: 100%;margin-left: 0%;margin-bottom: 1vh;
    }
    .color-radio {margin-bottom: 1vh;}
    .over-in-text {font-size: 4vw !important;line-height: 1 !important;}
    .small-specification {font-size: 3vw !important;line-height: 1 !important;}

    .user-settings .side-links {background-color: var(--c-gray);padding: 2vw 3vw;margin: 0 1vw 0 0 !important;}
    .social-input, .profile-input {padding: 3.5vw 3vw !important;}

    .pack-name, .pack-resolution {display: block;width:100%;margin-left: 0 !important;margin-right: 0 !important;}
    .pack-name input, .pack-resolution select {width: 100% !important;font-size: 4vw;padding: 2vw 2vw;}
    .input-field input, select {width: 100% !important;font-size: 4vw;padding: 2vw 2vw;}
    .pack-resolution select {padding: 2vw 2vw calc(2vw + 1px) 2vw;}
    .game-title {font-size: 5vw;}
    .game-selected-jav, .game-selected-bed {font-size: 3vw;}
    .pop-over input, .pop-over select, .over-select {
        border: solid 1px var(--c-dgray) !important;background-color: var(--c-dgray) !important;
    }
    .pop-over input[type="submit"] {background-color: var(--c-blue) !important;}
    select option {font-size: 2vw;}

    .input-field h4 {margin-bottom: 2vw;}


    .input-checkin {width: 8vw;}
    .input-explain {width: calc(90% - 8vw - 2px);}
    .input-checkin input {width: 8vw;}
    input[type="checkbox"] {width: 8vw;height: 8vw;}
    input[type="checkbox"]::before {width: 8vw;height: 8vw;}
    input[type="checkbox"]:checked::before {width: 8vw;height: 8vw;}
    input[type="checkbox"]:checked::after {width: 8vw;height: 8vw;}
}