/* #region GAME SELECTION MODULE */
#game_selection {
    width: fit-content; margin: 10px auto; font-size: 100%;
    & #game_selection_header, & .actions_item, & #game_selection_rules {padding: 4px 5px;}
    & .button {display: inline-block; border-radius: 5px;
            padding: 2px 5px; font-size: 90%; color: black; text-shadow: none; white-space: nowrap;}
    & .button_img {width: fit-content; height: fit-content; border-radius: 7px; padding: 2px;
        & img {display: block; width: 19px;}
    }
    /*header*/
    & #game_selection_header {
        display: flex; background: var(--col_bg2); box-shadow: 0 0 10px 2px var(--col_bg2);
        & #game_selection_header_left {display: flex; flex-wrap: wrap; align-items: center; flex: 1;}
        & #game_selected {margin: 2px 0px;}
        & #game_status {color: var(--col_font2); text-shadow: -1px -1px 0 black, -1px 1px 0 black, 1px -1px black, 1px 1px 0 black;}
        & #game_open_close {display: flex; align-items: center;
            & img {transform: rotate(180deg);transition: 0.4s; transition-property: rotate;
                &.rotate {rotate: 180deg;}}}

    }
    /*content*/
    & #JS_game_selection_content {
        background: var(--col_bg3); box-shadow: 0 0 10px 2px var(--col_bg3);
        max-height: 9000px; opacity: 100%; overflow: hidden; transition: max-height 3s, opacity 0.3s;
    }
    & #JS_game_selection_content.hide {max-height: 0px; opacity: 0%; transition: 0.3s;}
    & #game_selection_content_separation {
        height: 3px; border: none; margin: 3px 5px; background: var(--col_bg2); box-shadow: 0 0 3px var(--col_bg2); opacity: 0.5;
    }
    /*actions*/
    & #game_selection_actions {display: flex; justify-content: space-between;
        & .actions_item:not(:first-child) {display: flex; align-items: center;}
        & select {outline: none; margin-top: 3px;}
        & select, option:checked {background: var(--col_action);}
        & option {background-color: var(--col_action2);}
        & option.button {font-family: var(--font_main); font-size: 105%;}
    }
    /*rules*/
    & #game_selection_rules {
        & .JS_grayscale {filter: grayscale(1);}
        & input[type=number] {text-align: center;}
        & input[type=number]::-webkit-inner-spin-button {opacity:1;}
        & .button {margin: 4px 0px;}
        & .game_selection_parameter {display: flex; align-items: center; flex-wrap: wrap;
            & .game_selection_parameter_left {width: 135px; margin: 2px 0;} /*left elements*/
            & .game_selection_parameter_right {display: flex;/*right elements*/
                & .button_left {width: 110px;}
            }
        }
        & hr {height: 1px; background: var(--col_action2); border: none; box-shadow: 0 0 2px var(--col_action); opacity: 0.5;}
        & hr:last-of-type {background: var(--col_font); box-shadow: 0 0 2px var(--col_font); opacity: 0.2;}
    /* error */
    }
    & .error {color: red; font-weight: 700; text-shadow: -1px -1px 0 black, -1px 1px 0 black, 1px -1px black, 1px 1px 0 black;}
}
/* #endregion */