.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-red {
    color: red;
}

.vertical-top {
    vertical-align: top;
}

.mb-0 {
    margin-bottom: 0em !important;
}

.mb-0_5 {
    margin-bottom: 0.5em !important;
}

.mb-1 {
    margin-bottom: 1em;
}

.mt-0 {
    margin-top: 0em !important;
}

.ml-0_5 {
    margin-left: 0.5em;
}

.mr-0_5 {
    margin-right: 0.5em;
}

.mt-auto {
    margin-top: auto;
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

.p-0 {
    padding: 0 !important;
}

.height-8em {
    height: 8em;
}

.width-20px {
    width: 20px !important;
}

.width-200px {
    width: 200px !important;
}

.width-15pc {
    width: 15% !important;
}

.width-100pc {
    width: 100% !important;
}

.width-fit {
    width: fit-content;
}

.border-1 {
    border: 1px solid;
}

.border-bottom-1 {
    border-bottom: 1px solid;
}

.d-inline-block {
    display: inline-block;
}

.d-none {
    display: none;
}

.d-none_ {
    display: none !important;
}

.d-block {
    display: block;
}

.d-float {
    display: float;
}

.d-flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-wrap-wrap {
    flex-wrap: wrap;
}

.justify-content-center { 
    justify-content: center;
}

.justify-content-space-around {
    justify-content: space-around;
}


.f-left {
    float: left;
}

.f-right {
    float: right;
}

.fz-0 {
    font-size: 0;
}

.fz-0_5rem {
    font-size: 0.5rem;
}

.fz-0_75rem {
    font-size: 0.75rem;
}

.fz-2rem {
    font-size: 2rem;
}

.fw-bold {
    font-weight: bold;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.resize-none {
    resize: none;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}

.position-sticky {
    position: sticky;
}

.table-layout-fixed {
    table-layout: fixed;
}

.background-color-ccffcc {
    background-color: #ccffcc;
}

.user-select-none {
    user-select: none;
}

/* タブ関係 */
/* タブコンテンツ全体 */
.tab-all {
    /*display: box;*/
}

/* タブ選択ボタンエリア */
.tab-area {
    display: flex;
}

/* タブ選択ボタン */
.tab-name {
    text-align: center;
    cursor: pointer;
    padding: 1em 2em;
    border: 1px solid;
}

/* 各タブの中身 */
.tab-content {
    border: 1px solid;
    display: none;
}

/* アクティブなタブ選択ボタン */
.tab-active {
    display: block;
}

/* アクティブなタブの中身 */
.tab-table-active {
    display: block;
}

/* 選択タブ */
.job-select, .savedata-select {
    display: inline-block;
    width: 150px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
    border: solid 1px;
    font-size: 16px;
}

/* 経験値計算テーブルへの追加ボタン  */
td[name="addbutton"] {
    text-align: center;
}

/* valorantエージェント抽選結果表示*/
.max-width-1590px {
    max-width: 1590px;
}

.agent-area {
    position: absolute;
    width: 294px;
    height: 494px;
    top: 0;
    left: 0;
    background-color: white;
    opacity: 0.15;
    margin: auto;
}

#player-namearea {
    position: absolute;
    width: 1540px;
    top: 150px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#player-name1, #player-name2, #player-name3, #player-name4, #player-name5 {
    position: absolute;
    width: 300px;
    color: white;
}

#agent-imgarea {
    position: absolute;
    width: 1540px;
    height: 500px;
    top: 250px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#agent1, #agent2, #agent3, #agent4, #agent5 {
    position: absolute;
    top: 0;
    border: solid 3px;
    border-color: white;
    width: 300px;
    height: 500px;
}

#player-name1, #agent1 {
    left: 0;
}

#player-name2, #agent2 {
    left: 310px;
}

#player-name3, #agent3 {
    left: 620px;
}

#player-name4, #agent4 {
    left: 930px;
}

#player-name5, #agent5 {
    left: 1240px;
}

.agent-img {
    position: absolute;
    width: 294px;
    height: 494px;
    top: 0;
    left: 0;
    margin: auto;
}

#setTime {
    position: absolute;
    top: 1em;
    right: 1em;
    color: white;
}

.table-p-0 > tbody > tr > td, th {
    font-size: small;
    padding: 0em;
}

/* クラフター素材管理 */
#recipe-dialog {
    max-width: 800px;
    max-height: 90%;
    width: 90%;
    padding: 20px;
    margin: auto;
}

#recipe-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

#recipeTable {
    margin: 0 auto;
}

#recipe-close-btn-area {
    position: sticky;
    bottom: 0px;
    text-align: center;
    padding: 20px;
}

#recipe-close-btn {
    position: absolute;
    top: 20px;
}

#recipe-detail-dialog {
    padding: 10px;
    margin: auto;
}

#recipe-detail-dialog > p {
    margin: 0px;
}

/* レシピ編集 */
#recipe-add-dialog, #recipe-update-dialog {
    max-width: 800px;
    max-height: 90%;
    width: 90%;
    padding: 20px;
    margin: auto;
}

#recipe-add-dialog::backdrop, #recipe-update-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

#recipe-add-btn-area, #recipe-edit-btn-area {
    position: sticky;
    bottom: 0px;
    text-align: center;
    padding: 20px;
}

/* ポケモンワードル */
.wordle-char-default {
    width: 3rem;
    height: 3rem;
    margin: 0.25rem !important;
    text-align: center;
    line-height: 3rem;
    border: 2px solid;
    border-radius: 4px;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    border-color: rgb(0, 0, 0);
}

.wordle-char-gray {
    width: 3rem;
    height: 3rem;
    margin: 0.25rem !important;
    text-align: center;
    line-height: 3rem;
    border: 2px solid;
    border-radius: 4px;
    color: rgb(255, 255, 255);
    background-color: rgb(117, 117, 117);
    border-color: rgb(0, 0, 0);
}

.wordle-char-yellow {
    width: 3rem;
    height: 3rem;
    margin: 0.25rem !important;
    text-align: center;
    line-height: 3rem;
    border: 2px solid;
    border-radius: 4px;
    color: rgb(255, 255, 255);
    background-color: rgb(201, 180, 88);
    border-color: rgb(0, 0, 0);
}

.wordle-char-green {
    width: 3rem;
    height: 3rem;
    margin: 0.25rem !important;
    text-align: center;
    line-height: 3rem;
    border: 2px solid;
    border-radius: 4px;
    color: rgb(255, 255, 255);
    background-color: rgb(76, 175, 80);
    border-color: rgb(0, 0, 0);
}

.wordle-char-yellow-green {
    width: 3rem;
    height: 3rem;
    margin: 0.25rem !important;
    text-align: center;
    line-height: 3rem;
    border: 2px solid;
    border-radius: 4px;
    color: rgb(255, 255, 255);
    background: linear-gradient(75deg, #C9B458 0%, #C9B458 50%, #4CAF50 50%, #4CAF50 100%);
    border-color: rgb(0, 0, 0);
}

/* LoL-BAN-PICK */
#create-room-dialog, #join-room-dialog, #team-split-dialog, #team-split-result-dialog, #ban-pick-result-dialog {
    max-width: 800px;
    max-height: 90%;
    width: 90%;
    padding: 20px;
    margin: auto;
}

#ban-pick-dialog {
    max-width: 1200px;
    max-height: 90%;
    width: 90%;
    padding: 20px;
    margin: auto;
}

#create-room-dialog::backdrop, #join-room-odialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

#create-room-open-btn, #join-room-open-btn {
    display: block;
    width: 200px;
    height: 60px;
    margin: 20px auto 20px auto;
}

.member-list-blue, .team-split-member-list-blue {
    width: 200px;
    border: 1px solid;
    border-radius: 4px;
    border-color: black;
    margin: 20px;
    padding: 0.5rem;
    background-color: #D9E5FF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-list-red, .team-split-member-list-red {
    width: 200px;
    border: 1px solid;
    border-radius: 4px;
    border-color: black;
    margin: 20px;
    padding: 0.5rem;
    background-color: #FCC;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-list-white, .team-split-member-list-white {
    width: 200px;
    border: 1px solid;
    border-radius: 4px;
    border-color: black;
    margin: 20px;
    padding: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-list-gray, .team-split-member-list-gray {
    width: 200px;
    border: 1px solid;
    border-radius: 4px;
    border-color: black;
    margin: 20px;
    padding: 0.5rem;
    background-color: #D0CECE;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-move-text {
    color: blue;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}

#champion-list, #champion-ban-list {
    height: 400px;
    overflow: auto;
    justify-content: center;
}

.champion-name {
    font-size: 0.5rem;
    width: 79px;
    margin-bottom: 0em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.champion-img, .champion-img-list {
    width: 75px;
    height: 75px;
    max-width: 75px;
    margin: 2px;
    border: 2px solid;
    border-color: black;
    -webkit-user-drag: none;
}

.champion-img-small {
    width: 50px;
    height: 50px;
    max-width: 50px;
    margin: 2px;
    border: 2px solid;
    border-color: black;
    -webkit-user-drag: none;
}

.champion-img-list:hover {
    border: 2px solid;
    border-color: yellow;
}

input[name="champion-select"]:checked + label img {
    border-color: red;
}

input[name="champion-ban-select"]:checked + label img {
    border-color: red;
}

.ban-pick-member-list {
    display: flex;
    align-items: center;
    margin: 2px;
}

.ban-pick-member-list-name {
    font-size: 0.75rem;
    width: 150px;
    margin: 2px;
    padding: 0.5rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ban-img {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 2px;
    bottom: 0;
    left: 2px;
    right: 0;
    margin: auto;
    opacity: 0.75;
}

#champion-decision-btn, #champion-ban-decision-btn {
    width: 30%;
    height: 10%;
    margin: 2px;
}