/*
.newteam{width:50%;}

.createnewgame .currentcharacter{float:left;width:100px;}
			.createnewgame .currentcharacter + .currentcharacter{margin-left:10px}
			.createnewgame .currentcharacter img{width:30px}





			.newteambutton .createdifferentteambutton {
			    width: 100%;
			    padding: 2px;
			    font-size: 16px;
			    border-radius: 5px;
			}

			.createform .submitcreatenewgame {
			    width: 100%;
			    padding: 40px 15px;
			    font-size: 16px;
			    border-radius: 5px;
			    margin-top: 5px;
			    font-weight: bold;
			}

*/
.homepage{display: flex;flex-direction: row;gap:30px;}
.newteam{background-color:#001c44;}
.currentteam{color: #fff;font-size: 10px;display:flex;flex-direction: row;gap:2px;}
.currentteam .character{flex:1;background-color: #0558b6;border: 2px solid #fff;border-radius: 5px;padding: 5px 10px;text-align: center;display:flex;flex-direction: column;justify-content: center;align-content: center}
.currentteam .character img{height: 28px;float: left;}
.currentteam .characterclass{margin-bottom: 5px;letter-spacing: 0.07em;font-weight: bold;}
.currentteam .charactername{font-weight: bold;margin-top: 12px;font-size: 12px;}

.availableteams{width:450px;background-color:#001c44;}
.availableteams .availableteamsection{padding:10px 10px;}
.availableteam .characterinfo{display:flex;flex-direction: row;}

.newcharacters{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;padding:30px}

.newcharacterwrapper{position:relative;width:290px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:18px;min-height:250px;background:radial-gradient(ellipse at center,#233654 0%,#172846 35%,#0f1d37 65%,#081223 100%);border:3px solid #2f8cff;border-radius:10px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.45);transition:.20s;}
.newcharacterwrapper.classfighter{border-color:#df2300;}
.newcharacterwrapper.classthief{border-color:#af7f00;}
.newcharacterwrapper.classblackbelt{border-color:#3bb2ed;}
.newcharacterwrapper.classredmage{border-color:#f73513}
.newcharacterwrapper.classwhitemage{border-color:#eeeeee;}
.newcharacterwrapper.classblackmage{border-color:#333333;}

.newcharacterwrapper:hover{transform:translateY(-3px);border-color:#6ab7ff;box-shadow:0 12px 28px rgba(0,0,0,.55);}



.newcharacterclassimage{position:relative;display:flex;align-items:center;justify-content:center;flex:1;width:100%;margin:5px 0 12px;flex-direction: column;}

/*
.newcharacterclassimage::after{content:"";position:absolute;bottom:10px;width:100px;height:18px;background:rgba(0,0,0,.35);border-radius:50%;filter:blur(3px);}
.newcharacterclassimage::after{content:"";position:absolute;bottom:16px;width:64px;height:5px;background:rgba(0,0,0,.22);border-radius:50%;}
*/
.newcharacterclassimage::after{content:"";position:absolute;bottom:12px;width:100px;height:14px;background:radial-gradient(ellipse at center,#00000088 0%,#00000055 55%,transparent 100%);}

.newcharacterclassimage img{position:relative;image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));z-index:2;}

.newcharactername{width:100%;margin-top:10px;}

.ffname{width:100%;box-sizing:border-box;padding:10px;background:#09101b;color:#fff;font-size:22px;font-weight:bold;text-align:center;text-transform:uppercase;letter-spacing:1px;border:2px solid #334f72;border-radius:6px;outline:none;transition:.15s;}
.ffname{
    width:100%;
    box-sizing:border-box;
    padding:10px;
    background:#09101b;color:#fff;
    
    font-size:22px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:2px;
    border:2px solid #8caad1;
    border-radius:5px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(0,0,0,.25);
    outline:none;
    transition:.15s;
}
.ffname:hover{border-color:#69bcff;}

.ffname:focus{border-color:#8fd8ff;box-shadow:0 0 12px rgba(80,170,255,.45);}

.newcharacterwrapper.red{border-color:#dd4d4d;}

.newcharacterwrapper.red:hover{border-color:#ff7373;}

.newcharacterwrapper.white{border-color:#d8d8d8;}

.newcharacterwrapper.white:hover{border-color:#ffffff;}

.newcharacterwrapper.black{border-color:#3e83df;}

.newcharacterwrapper.black:hover{border-color:#67b1ff;}

.newcharacterwrapper.thief{border-color:#2f8cff;}

.newcharacterwrapper.fighter{border-color:#ff6d52;}

.newcharacterwrapper.monk{border-color:#d7b531;}

.newcharacterwrapper.redmage{border-color:#ff5050;}

.newcharacterwrapper.whitemage{border-color:#e5e5e5;}

.newcharacterwrapper.blackmage{border-color:#55a4ff;}

/*
.newteam button{padding:12px 28px;background:linear-gradient(to bottom,#2d90ff 0%,#1d6cd0 60%,#1357ae 100%);color:#fff;font-size:16px;font-weight:bold;text-transform:uppercase;border:2px solid #8dd1ff;border-radius:8px;cursor:pointer;transition:.15s;}

.newteam button:hover{background:linear-gradient(to bottom,#53a8ff 0%,#2b7fe2 60%,#1b67ca 100%);transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.35);}
*/
input[type=button]{width:50%;margin:0px auto;padding:8px 18px;background:linear-gradient(to bottom,#52adff 0%,#2f84dd 50%,#195fb7 100%);color:#fff;font-weight:bold;border:2px solid #a8d7ff;border-radius:6px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 3px 8px rgba(0,0,0,.35);transition:.15s;}
.btnnewcombo{text-transform: uppercase;display:block;}

.newteamsections{display:flex;flex-direction: row;gap:10px;}
.newteamsection1{padding-bottom:20px;}
.newteamsection2{padding-right:20px;}

.fffile{margin:18px 0;}

.fffile label{display:flex;margin-bottom:0px;color:#dce9ff;font-size:10px;text-shadow:0 1px 2px rgba(0,0,0,.6);}

.fffile-control{display:flex;align-items:center;height:52px;background:linear-gradient(to bottom,#0f1b2c 0%,#08111d 100%);border:2px solid #3d4d66;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 12px rgba(0,0,0,.35);overflow:hidden;transition:.15s;}
.fffile-control:hover{border-color:#5f8cc7;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 6px 16px rgba(0,0,0,.45);}

label.fffile-button{font-size:10px;display:flex;align-items:center;justify-content:center;gap:12px;width:132px;height:100%;background:linear-gradient(to bottom,#27364b 0%,#1a2434 100%);border-right:2px solid #3e516d;color:#ffffff;font-weight:bold;letter-spacing:1px;text-transform:uppercase;cursor:pointer;user-select:none;transition:.15s;}
label.fffile-button:hover{background:linear-gradient(to bottom,#42556f 0%,#28384e 100%);}
label.fffile-button:active{background:linear-gradient(to bottom,#1b2738 0%,#121b28 100%);}
label.fffile-button img{width:18px;image-rendering:pixelated;image-rendering:crisp-edges;}


.fffilename{flex:1;padding:0 18px;color:#9ea9bb;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:145px;}
.fffile input[type=file]{display:none;}



.newteamsection2{padding:0px 36px;border-left:2px dotted #333}

label.label{font-size:12px;}
.fffile-controls{display:flex;flex-direction: column;gap:20px;}
.fffile-controls{font-size:16px;}

.newcharacterchangeclass{position:absolute;top:40%;left:0;right:0;transform:translateY(-50%);pointer-events:none;}

.newcharacterchange{position:absolute;pointer-events:auto;}

.newcharacterchangeclassprev{left:8px;}

.newcharacterchangeclassnext{right:8px;}

.newcharacterchange a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:linear-gradient(to bottom,#183968,#081a36);color:#fff;text-decoration:none;font-size:22px;font-weight:bold;text-shadow:1px 1px 2px #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 10px rgba(0,0,0,.4);transition:all .15s ease;}

.newcharacterchange a:hover{background:linear-gradient(to bottom,#2c5ca1,#10305f);border-color:#4ea4ff;box-shadow:0 0 12px rgba(78,164,255,.5);transform:scale(1.1);}

.newcharacterchange a:active{transform:scale(.95);}