/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 09.08.2024, 17:03:35
    Author     : robert
*/
.main-container {
    margin: auto;
    width: fit-content;
}
.main-container > h1 {
    text-align: center;
    color: #fffbff;
    text-shadow: 1px 1px #bd8fff;
}

.team {
    max-width: 755px;
}
.team > p {
    margin: 5px 15px;
    font-size: 20px;
    border: none;
    border-bottom: 3px solid #bd8fff;
    border-radius: 10px;
    background: #fffbff;
    color: #8462b2;
    padding: 10px 20px;
}

.frontrow, .backrow {
    display: inline-flex;
    margin: 0px 10px;
}
.teamslot {
    position: relative;
    width: 235px;
    height: 281px;
    margin: 5px;
}
.fighter-container {
    border: 2px solid transparent;
    width: 202px;
    height: 277px;
}
.fighter-container > img {
    height: inherit;
    margin: -2px 0px 0px -2px;
}
.rank-container {
    border: 2px solid transparent;
    position: absolute;
    width: 198px;
    height: 85px;
    bottom: -2px;
}
.rank-container > img {
    margin: 9px auto 0px;
    display: block;
}
.weapon-container {
    border: 2px solid transparent;
    position: absolute;
    left: 193px;
    height: 40px;
    width: 40px;
}
.weapon-tier1-container {
    top: 11px;
}
.weapon-tier2-container {
    top: 46px;
}
.weapon-tier3-container {
    top: 83px;
}
.weapon-container > img {
    margin: auto;
    display: grid;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 30px;
    z-index: -1;
}
.dragon-container {
    border: 2px solid transparent;
    position: absolute;
    left: 180px;
    height: 65px;
    width: 65px;
}
.dragon1-container {
    top: 130px;
}
.dragon2-container {    
    top: 190px;
}
.dragon-container > img {
    margin: auto;
    display: grid;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 65px;
    z-index: -1;
}

.fighter-container:hover,
.fighter-container-hover,
.rank-container:hover, 
.rank-container-hover,
.weapon-container:hover,
.weapon-container-hover,
.dragon-container:hover,
.dragon-container-hover {
    border: 2px solid rgb(189, 143, 255);
    border-radius: 0px 5px 5px 5px;
}
.weapon-container:hover,
.weapon-container-hover {
    border-radius: 0px 0px 5px 5px;
}
.fighter-container:hover:before,
.fighter-container-hover:before,
.rank-container:hover:before, 
.rank-container-hover:before,
.weapon-container:hover:before,
.weapon-container-hover:before,
.dragon-container:hover:before,
.dragon-container-hover:before {
    position: absolute;
    background: rgb(189, 143, 255);
    margin: -16px 0px 0px -2px;
    padding: 0px 5px;
    font-size: 13px;
    border-radius: 5px 5px 0px 0px;
}
.fighter-container:hover:before,
.fighter-container-hover:before {
    content: "Fighter";
}

.rank-container:hover:before,
.rank-container-hover:before {
    content: "Rank";
}
.weapon-container:hover:before,
.weapon-container-hover:before {
    content: "Weapon";
    border-radius: 5px 5px 5px 0px;
}
.dragon-container:hover:before,
.dragon-container-hover:before {
    content: "Dragon";
}


.background-image {
    position: relative;
    z-index: -1;
}
.absolute-background {
    position: absolute;
    z-index: -2;
}
.weapon-background {
    border: 1px solid white;
    border-bottom: 3px solid #bd8fff;
    border-radius: 5px;
    background: #fffbff;
    width: 43px;
    height: 107px;
    left: 188px;
    top: 15px;
}
.dragon-background {
    border: 1px solid white;
    border-bottom: 3px solid #bd8fff;
    border-radius: 5px;
    background: #fffbff;
    width: 40px;
    height: 99px;
    left: 191px;
    top: 145px;
}
.placeholder {
    height: 10px;
    width: 10px;
    border: 0px solid transparent;
    border-radius: 10px;
    background: rgb(189, 143, 255);
    position: absolute;
    left: 208px;
    z-index: -1;
    opacity: 0.5;
    font-size: 10px;
    padding: 2px 3px;
}
.weapon1-placeholder {
    top: 28px;
    padding: 2px;
}
.weapon2-placeholder {
    top: 63px;
    padding: 2px;
}
.weapon3-placeholder {
    top: 98px;
    padding: 2px;
}
.dragon1-placeholder {
    top: 160px;
    width: 8px;
}
.dragon2-placeholder {
    top: 218px;
    width: 8px;
}


.description-text {
    resize: none;
    margin: 10px 15px;
    padding: 10px 20px;
    width: calc(100% - 72px);
    height: 100px;
    background: black;
    color: #fffbff;
    border: 1px solid #fffbff;
    border-radius: 5px;
    font-family: "Arial";
}
.information {
    font-size: 12px;
    margin-left: 10px;
}

.fighter-container, 
.weapon-container, 
.rank-container, 
.dragon-container,
input[type=button] {
    cursor: pointer;
}

.description-p, .save-p {
    margin-top: 20px !important;
}

#save-button {
    font-size: 14px;
}