#builder-data{
    overflow: scroll;
}
.builder-bot{
    background-color:  var(--colorB);
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
}

.builder-mon{
    position: relative;
    margin: auto;
    display: flex;
    width: calc(50% - 4px);
}
@media (orientation: portrait) {
    .builder-mon{
        width: fit-content;
    }
}
.builder-placeholder{
    border-radius: 10px;
    border-style: dotted;
    border-width: 2px;
    width: calc(50% - 4px - 1em);
    margin: auto;
}
.builder-placeholder:hover{
    cursor: pointer;
    background-color: var(--selHover);
}
.trainers-pokemon-builder{
    width: unset;
}
.builder-mon-delete{
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
    color: black;
    display: none;
}

#builder-editor{
    display: flex;
    font-size: 1.7vmax;
}
#builder-editor > div{
    margin: auto;
    flex-grow: 1;
}
.builder-editor-left{
    height: 100%;
    display: flex;
    text-align: center;
}
.builder-editor-left *{
    margin: auto;
}
.builder-editor-specie{
    max-width: 6em;
    height: 1em;
}
.builder-editor-sprite{
    /*height: calc(100% - 1em); this is if there the name of the specie*/
    width: 6em;
}
.builder-overlay-abis-inns{
    display: flex;
}
.builder-overlay-abis-desc{
    height: fit-content;
    background-color: var(--colorC);
}
.builder-editor-abilities, .builder-overlay-abilities, .builder-overlay-innates{
    display: flex;
    flex-grow: 1;
    text-align: left;
    flex-direction: column;
    margin: auto;
    background-color: var(--colorA);
}
.builder-overlay-abilities, .builder-overlay-innates{
    height: 6em;
}
.builder-editor-ability, .builder-overlay-ability, .builder-overlay-innate{
    width: 6em;
    margin: auto;
}
.builder-overlay-ability:hover{
    background-color: var(--selHover);
}
.builder-editor-mid{
    display: flex;
    flex-direction: column;
}
.builder-editor-move{
    width: 100%;
    margin: auto;
}
.builder-editor-right{
    width: 10em;
}
.builder-overlay-list{
    font-size: 1em;
}
.builder-editor-statsrow{
    display: flex;
}
.builder-editor-statsrow > div{
    margin: auto;
}
.builder-tools{
    display: flex;
    flex-direction: column;
    width: 100%;
}
#builder-screenshot, #builder-import{
    display: flex;
    min-height: 3em;
}
.builder-screen-window{
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--background);
    font-size: 1.8vmax;
}
#builder-def-cov{
    min-height: 3em;
}
.builder-type-row{
    display: flex;
    flex-wrap: wrap;
}
.builder-type-col{
    display: flex;
    flex-direction: column;
    width: calc(100% / 10);
}
.builder-type-col>*{
    text-align: center;
}
.builder-type{
    padding: 0.2em;
}
.builder-type:hover{
    filter: hue-rotate(90deg)
}
.builder-nb-weakness{
    border: solid 1px;
    border-left: 0;
    border-right: 0;
}
.overlay-stats-row{
    display: flex;
    text-align: center;
}
.overlay-stats-column{
    display: flex;
    flex-direction: column;
}
.overlay-stats-label{
    font-size: 1.5em;
}
.overlay-stats-edit{ 
    font-size: 1em;
    flex-grow: 1;
    width: 3em;
    text-align: center;
}

@media (orientation: landscape) {
    .builder-editor-left{
        flex-direction: row;
    }
    .builder-editor-left{
        width: 12em;
    }
    .builder-editor-mid{
        width: 6em;
    }
}

@media (orientation: portrait) {
    .builder-editor-left{
        flex-direction: column;
        font-size: 0.7em;
    }
    .builder-editor-left{
        width: 6.5em;
    }
    .builder-editor-mid{
        width: 8em;
    }
}

.showdown-block{
    width: 70vw;
    height: 70vh;
    background-color: var(--colorC);
}
.showdown-block, .showdown-left, .showdown-right{
    display: flex;
}
.showdown-left, .showdown-right{
    flex-direction: column;
    width: 50%;
}
.showdown-top{
    height: 1em;
    width: 100%;
    display: flex;
}

.showdown-bot{
    width: 100%;
    flex-grow: 1;
    font-size: 0.8em;
    user-select: text;
    overflow-y: scroll;
    overflow-x: hidden;
    overflow-wrap: break-word;
}
textarea.showdown-bot{
    background-color: var(--colorD);
}
textarea, pre{
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: var(--colorB);
    color: var(--font-color);
    word-wrap: break-word;
}
.showdown-confirm{
    min-height: 3em;
}
@media (orientation: portrait) {
    .showdown-block{
        flex-direction: column;
    }
    .showdown-left, .showdown-right{
        width: 100%;
        height: 50%;
    }
}

.bi-btn-row{
    display: flex;
    min-height: 2em;
}
.bi-btn-row>div{
    width: 50%;
    height: 100%;
    display: flex;
}

.off-type{
    width: calc(100% / 6);
    text-align: center;
}

.builder-off-type{
    padding: 0.2em;
}
.builder-off-type-n-active{
    filter: invert(40%);
}
.builder-off-type-n-active:hover{
    filter: none;
}
.off-effective{
    box-sizing: border-box;
    border: 0.5vmax solid var(--positive);
}

.builder-type-strength-4{
    background-color: rgba(32, 187, 45, 0.85);
}
.builder-type-strength-3{
    background-color: rgba(131, 192, 51, 0.85);
}

.builder-type-strength-1{
    background-color: rgba(133, 69, 39, 0.85);
}
.builder-type-strength-0{
    background-color: rgba(75, 5, 5, 0.85);
}



#species-sets{
    flex-wrap: nowrap;
    border-top: solid 1px var(--headerBG);
    border-bottom: solid 1px var(--headerBG);
}

.species-sets-block{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 50%;
    height: 100%;
}

.species-sets-bot{
    display: flex;
}
.species-sets-selection{
    flex-grow: 1;
    display: flex;
    margin: auto;
    width: 100%;
    height: 2em;
}
.species-sets-selection > div{
    margin: auto;
    font-size: 1.1em;
    height: fit-content;
}
@media (orientation: portrait) {
    #species-sets{
        flex-direction: column;
    }
    .species-sets-block{
        height: 50%;
        width: 100%;
    }
    .species-sets-block:first-child{
        border-bottom: solid 1px var(--headerBG);
    }
}
@media (orientation: landscape) {
    .species-sets-block:first-child{
        border-right: solid 1px var(--headerBG);
    }
}

.species-sets-previous{
    margin: auto;
    margin-right: 0;
}
.species-sets-next{
    margin: auto;
    margin-left: 0;
}

.species-sets-mid{
    display: flex;
    flex-grow: 1;
    border-left: 0;
    height: fit-content;
    border-top: dashed 1px var(--font-color);
    border-bottom: dashed 1px var(--font-color);
}

.species-sets-delete{
    width: fit-content;
    position: absolute;
    background-color: red;
    top: 0;
    left: 0;
}
.species-sets-notes-btn{
    position: absolute;
    bottom: 0;
    right: 0;
}
.species-sets-notes{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}
.species-sets-notes-text{
    flex-grow: 1;
    resize: none;
    font-size: 0.75em;
}
.species-sets-mid-left{
    display: flex;
    flex-direction: column;
    width: 40%;
    border-right: dashed 1px var(--font-color);
}
.species-sets-mid-left > div{
    margin: auto;
}
.species-sets-mid-right{
    display: flex;
    flex-wrap: wrap;
    width: 60%;
}

.species-sets-stats{
    display: flex;
    border-bottom: dashed 1px var(--font-color);
}
.species-sets-stats > div{
    margin: 0.4em auto;
}
.species-sets-data{
    display: flex;
    flex-direction: column;
    position: relative;
    flex-grow: 1;
}

.species-sets-placeholder{
    margin: auto;  
}
.species-sets-top{
    position: relative;
    height: 2em;
    display: flex;
}
.species-sets-name{
    height: 100%;
    min-width: 4em;
    background-color: var(--colorD);
    margin: auto;
}


/* PICKERS */

.move-picker-parent{
    background-color: var(--colorD);
    display: flex;
    flex-direction: column;
}
.move-picker-input{
    margin: auto;
}
.move-picker-datablock{
    display: flex;
    width: 23em;
    height: 6em;
    background-color: var(--colorE);
    margin: 0;
}
.move-picker-similars{
    display: flex;
    flex-wrap: wrap;
    width: 23em;
    height: 4.5em;
    background-color: var(--colorC);
    overflow-y: scroll;
}
.move-picker-selectable{
    width: 50%;
    display: flex;
    cursor: pointer;
}
.move-picker-selectable:hover{
    background-color: var(--colorB);
}