/* #region CALCULATOR */

#calculator_banner { display: flex; align-items: center;
    width: fit-content; margin: 10px 0px; padding: 2px 15px; background: var(--col_bg);
    & input {
        width: 36px; color:var(--col_action_1); font-weight: 700; text-align: center;
        border: 2px solid var(--col_action_1); border-radius: 5px; outline: none;
    }
    & input::-webkit-inner-spin-button {opacity: 1;}
    & .JS_input_error {border: 2px solid red;}
    & #JS_roll_dice {
        display: flex; align-items: center; margin-left: 15px; 
        border: 0px; border-radius: 5px; padding: 2px 5px; color: white; background: var(--col_action_1);
        & img {width: 20px; height: 20px; margin-left: 5px; filter: brightness(0) invert(1)}
    }@media not all and (any-pointer: coarse) {
        & #JS_roll_dice:hover {background: var(--col_action_2);}
    }
    & #JS_roll_dice:active {background: var(--col_action_2);}
    & #JS_roll_dice.JS_roll_error {background: gray;}
}

#calculator_legend {
    display: flex; margin-bottom: 5px; font-style: italic;
    & #JS_calculator_alert_scroll {flex: 1; text-align: center; color: var(--col_action_1);}
}

#calculator {display: flex; margin-bottom: 5px; /* Spacing go top icon */
    & .cell {padding: 2px; text-align: center;}
    & .color_hero {color: darkgreen;}
    & .color_monster {color: darkred;}

    & #JS_calculator_column_left {width: fit-content;
        & #JS_calculator_header_left {border: 1px solid black;}
        & .JS_column_left_cell {display: flex; border: 1px solid black; border-top: 0px;
            & .atk_def {white-space: nowrap; padding: 0px 3px; border-right: 1px solid black;}
            & .hero_monster {white-space: nowrap; text-align: left; padding: 0px 3px;}
        }
    }

    & #JS_calculator_column_average {
        min-width: 35px;
        & #JS_calculator_header_average {border: 1px solid black; border-left: 0px;}
        & .JS_column_average_cell {border: 1px solid black; border-top: 0px; border-left: 0px;}
    }

    & #JS_calculator_column_right {overflow-x: auto;
        & .column_right_cell {min-width: 30px; width: 30px;/*2 properties to avoid overflow mess up*/}
        & #JS_calculator_header_right {display: flex;
            & .header_right_cell {border: 1px solid black; border-left: 0px;}
        }
        & .JS_column_right_row {display: flex;
            & .column_right_cell {border: 1px solid black; border-top: 0px; border-left: 0px;}
        }
    }

    & .new_row_blink {animation: new_row 0.5s;}
}
@keyframes new_row {
    0% {background: var(--col_action_1);}
    100% {background: none;}
}
/* #endregion */

/* #region DEFENSE */
#table_defense {
    width: fit-content; margin-top: 5px;
    & .color_monster {color: darkred;}
    & .color_hero {color: darkgreen;}
    & .defense_cell {display: flex; align-items: center; justify-content: center; min-width: 52px; padding: 5px 0px; border-left: 1px solid black;}
    & .defense_row {display: flex; border: 1px solid black; border-top: none;}
    & .defense_row:first-child {border-top: 1px solid black;}
    & .defense_avg {min-width: 34px;}
    & .defense_header {flex-direction: column; min-width: 60px; border-left: 0px;}
}
/* #endregion */

/* #region TRAPS */
#table_traps {
    & .traps_row {display: flex; width: fit-content; border: 1px solid black; border-top: none;}
    & .traps_row:first-child {border-top: 1px solid black;}
    & .traps_cell {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; padding: 5px 5px; border-left: 1px solid black;}
    & .traps_header {width: 176px; align-items: flex-start; border-left: 0px;}
    & .color_disarming {color: darkgreen;}
    & .color_explosion {color: darkred;}
    & .color_time {color: darkblue;}
    & .color_gold {color: yellow; text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;}
    & .text_light {font-weight: 100;}
}   
/* #endregion */