html {
    overflow-y: scroll;
    overflow-x: hidden;
}

@media only screen and (max-width: 920px) {
    #tool_div {
        flex-direction: column !important;
        gap: 10px;
    }
}

.table_challenges td {
    padding: 1px 10px;
}

.table_challenges thead tr td {
    font-weight: bold;
}

.table_challenges th {
    padding: 1px 10px;
    cursor: pointer;
}

.table_challenges td.less_pad {
    padding: 1px 1px !important;
}

.table_challenges th.less_pad {
    padding: 1px 1px !important;
}

.table_challenges td label {
    display: block;
}

.challenge_tr {
    color: white;
    opacity: 0.3;
    transition: opacity 0.3s, color 0.3s;
}

.challenge_tr.selected {
    color: yellow !important;
}

.challenge_tr.checked {
    opacity: 1.0 !important;
}

#btn_optimize_selection {
    text-align: center;
}

#champions_pool {
    margin: 0px auto;
    display: flex;
    width: 100%;
    align-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    user-select: none;
    min-height: 770px;
}

.champion {
    position: relative;
    width: 1px;
}

.champion_img {
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    opacity: 0.3;
    transition: opacity 0.3s, border 0.3s, transform 0.5s ease-in-out;
}

.champion_img:hover {
    cursor: pointer;
}

.champion_img.selected {
    border: 3px solid yellow !important;
}

.champion_img.checked {
    opacity: 0.85 !important;
}

.champion_role {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background-color: rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.challenge_selection_img {
    width: 21px;
    height: 21px;
}

.mastery_level {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 1em;
    font-weight: bold;
    margin: 3px 3px;
    opacity: 0.8;
    pointer-events: none;
    padding: 0px 6px;
    background-color: #22222296;
    border-radius: 50% 0 0 0;
}

.mastery_level_10 {
    background-color: #992E5E;
}

.mastery_level_9 {
    background-color: #99692E;
}

.mastery_level_8 {
    background-color: #7E2E99;
}

.mastery_level_7 {
    background-color: #2E4399;
}

.mastery_level_6 {
    background-color: #2E9939;
}

.mastery_level_5 {
    background-color: #2E6099;
}

.selection {
    text-align: center;
    min-width: 200px;
}

.selection_champion {
    border: 2px solid yellow !important;
    height: 38px;
}