badgecontainer {
    /* width: 60px; */
    /* height: 80px; */
    /* padding: 2px; */
    display: grid;
}
badge {
    display: grid;
    grid-template-rows: 4% 30% 30% 30% 5% 15%;
    grid-template-columns: 5% 30% 30% 30% 5%;
    position: relative;
}

badge img {
    width: 100%;
}

badge .badgeImg {
    /* position: absolute; */
    /* left: 50%; */
    /* top: 50%; */
    /* transform: translate(-50%,-50%); */
    /* border: solid 3px transparent; */
    /* border-radius: 10px; */
    grid-row: 2 / 5;
    grid-column: 2 / 5;
    align-self: center;
    justify-self: center;
}
badge[frameType="VS"] .badgeImg {
    border: solid 3px #eead51;
    border-radius: 15%;
}
badge[frameType="AR"] .badgeImg {
    border: solid 3px #955ac9;
}
badge[frameType="AL"] .badgeImg {
    border: solid 3px #ecdd87;
}
badge[frameType="WM"] .badgeImg {
    border: solid 3px #ff4242;
}

badge[frameType="VS"][frameBackground="YES"] .badgeImg {
    background-image: linear-gradient(#0174ea, #0154a9);
}
badge[frameType="AR"][frameBackground="YES"] .badgeImg {
    background-image: linear-gradient(#d0d0f8, #a9a9fd);
}
badge[frameType="AL"][frameBackground="YES"] .badgeImg {
    background-image: radial-gradient(#f5f6f9, #7376d7);
}
badge[frameType="WM"][frameBackground="YES"] .badgeImg {
    background-image: radial-gradient(#ffa4a4, #ffc4c4);
}

badge .cornerImg {
    grid-row: 1 / 3;
    grid-column: 4 / 6;
    /* position: absolute; */
    /* zoom: .5; */
    /* right: 0; */
    /* top: 0; */
}

badge badgeLabel {
    /* position: absolute; */
    /* bottom: -15%; */
    /* left: 50%; */
    /* transform: translate(-52.5%, 0); */
    grid-row: 5 / 6;
    grid-column: 1 / 6;
    align-self: center;
    justify-self: center;
    vertical-align: middle;
    text-align: center;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

badge[frameType="VS"] badgeLabel {
    width: 60%;
    font-size: medium;
    font-weight: bold;
    text-align: center;
    color: #0154aa;
    text-shadow: 1pt 1pt #ffe691;
    text-shadow: -1pt -1pt #ffe691;
    text-shadow: -1pt 1pt #ffe691;
    text-shadow: 1pt -1pt #ffe691;
    background: #eead51;
    border-radius: 4pt;
    border: solid 1.5px #0154aa;
    box-shadow: 1px 1px #0154aa;
    padding-top: 2pt;
    /* text-wrap: nowrap; */
    /* text-overflow: ellipsis; */
    /* overflow: hidden; */
}

badge[frameType="AR"] badgeLabel {
    width: 60%;
    font-size: medium;
    font-weight: bold;
    text-align: center;
    color: #8f56c0;
    text-shadow: 1pt 1pt #ffe691;
    text-shadow: -1pt -1pt #ffe691;
    text-shadow: -1pt 1pt #ffe691;
    text-shadow: 1pt -1pt #ffe691;
    background: #fed535;
    border-radius: 4pt;
    border: solid 1.5px #8f56c0;
    box-shadow: 1px 1px #8f56c0;
    padding-top: 2pt;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

badge[frameType="AL"] badgeLabel {
    width: 60%;
    font-size: medium;
    font-weight: bold;
    text-align: center;
    color: #ecdd87;
    text-shadow: 1pt 1pt #8f56c0;
    text-shadow: -1pt -1pt #8f56c0;
    text-shadow: -1pt 1pt #8f56c0;
    text-shadow: 1pt -1pt #8f56c0;
    background: #7376d7;
    border-radius: 4pt;
    border: solid 1.5px #ecdd87;
    box-shadow: 1px 1px #b6a649;
    padding-top: 2pt;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

badge[frameType="WM"] badgeLabel {
    width: 70%;
    font-size: small;
    font-weight: bold;
    text-align: center;
    color: white;
    text-shadow: .5pt .5pt #ffabab;
    text-shadow: -.5pt -.5pt #ffabab;
    text-shadow: -.5pt .5pt #ffabab;
    text-shadow: .5pt -.5pt #ffabab;
    background: #ff4242;
    border-radius: 4pt;
    border: solid 1.5px #ff4242;
    box-shadow: .5px .5px white;
    padding-top: 2pt;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

badge:hover .badgeImg {
    grid-row: 1 / 6;
    grid-column: 1 / 6;
}
badge:active .badgeImg {
    grid-row: 2 / 5;
    grid-column: 2 / 5;
}

badgeLabel:empty {
    visibility: hidden;
}

badgeContainer[spaceAfter="YES"] {
    margin-right: 12px;
}

titlename {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    border-right: solid;
}