table {
            border-collapse: collapse;
            text-align: center;
            width: 100%;
            margin-top: 10px;
        }

        .no_boder {
            border: none;
            outline: none;
            padding: 0px;
            width: 100%;
            height: 100%;
            background-color: inherit;
        }

        th,
        td {
            border: 1px solid black;
            text-align: center;
        }

        #rarity_probability_0 {
            background-color: lightgray;
        }

        #rarity_table {
            width: auto;
        }

        .rarity_probability {
            width: 130px;
        }

        .rarity_name,
        .rarity_probability {
            background-color: #CBE5FF;
        }

        .rarity_name_input,
        .rarity_probability_input {
            text-align: right;
        }


        .item_number_header {
            width: 40px;
        }

        .item_rarity_header {
            width: 85px;
        }

        .item_probability_header {
            width: 70px;
        }

        .item_name_header {
            text-align: right;
        }

        .item_rarity,
        .item_name {
            background-color: #CBE5FF;
        }

        .item_probability {
            text-align: right;
        }

        .item_name_input {
            text-align: right;
        }

        .gacha_button {
            padding: 9px 0px 9px !important;
        }


        .result_number_header {
            width: 40px;
        }

        .result_rarity_header {
            width: 85px;
        }


        .result_name_header {
            text-align: right;
        }

        .result_count_header {
            width: 60px;
        }

        .result_item_name,
        .result_count {
            text-align: right;
        }

        /* input.probability_input {
            width: calc(100% - 20px);
        } */


        #gacha_name,
        #user_name {
            text-align: right;
            font-size: 14px;

        }

        #tweet_button {
            text-align: center;
        }


        .rarity_probability_input {
            width: calc(100% - 25px);
        }


        /* .border_top_bold {
            border-top-width: 3px;
        } */

        .border_bottom_bold {
            border-bottom-width: 3px;
        }

        .history_record_header {
            border-width: 3px;
        }


        .history_name_header{
            font-size: 18px;
            border-width: 3px 3px 1px 1px;
            background-color: #CBE5FF;
        }

        .history_user_number_header {
            border-width: 3px 1px 3px 3px;
            width: 50px;
        }

        .history_number_header {
            border-bottom-width: 3px;
            width: 40px;
        }

        .history_rarity_header{
            border-bottom-width: 3px;
            width: 85px;
        }

        .history_item_header{
            border-bottom-width: 3px;
            text-align: right;
        }

        .history_count_header {
            border-bottom-width: 3px;
            border-right-width: 3px;
            width: 60px;

        }

        .history_user_number {
            border-width: 3px 1px 3px 3px;
            cursor: pointer;
        }

        .history_user_number:hover {
            background-color: #FF0000;
        }

        .total_history_user_number {
            border-width: 3px 1px 3px 3px;
        }

        .history_user_name {
            background-color: #CBE5FF;
            border-top-width: 3px;
            border-right-width: 3px;
            font-size: 18px;
        }

        .history_user_name_input {
            height: 100%;
            font-size: 18px;
            text-align: center;
        }

        .history_rarity {
            text-align: right;

        }

        .history_item_name{
            text-align: right;
        }


        .history_count {
            border-right-width: 3px;
            text-align: right;
        }

        .input_default {
            display: grid;
            grid-template-columns: repeat(auto-fill, min(100px, 25vw));
            margin-bottom: 10px;
            align-items: center;
        }

        .input_default_area {
            grid-column: span 4;
            display: grid;
            grid-template-columns: repeat(4, min(100px, 25vw));
            align-items: center;
        }

        .input_default_area>label {
            grid-column: span 2;
        }


        #delete_gacha_button,
        #delete_history_button {
            background-color: red;
            padding: 5px 20px 5px;
        }

        #history_name_position_div {
            grid-column: 3 / span 2;
        }

        #history_name_select_div {
            position: absolute;
            z-index: 5;
            border: 2px solid black;
            width: 200px;
            box-sizing: border-box;
        }

        .history_name_option_div {
            width: auto;
            height: 21px;
            text-align: right;
            background-color: #FFFFFF;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .history_name_option_div:hover {
            background-color: blueviolet;
            color: #FFFFFF;
        }