input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance:textfield;
}
/*------------------------------------------------
numbers input
------------------------------------------------- */
.numbersRow{
    width: 100%;
    height: 100%;
    padding: 5% 0 0 0;
    box-sizing: border-box;
}
.numbersRow li{
    display: flex;
    height: 15%;
}
.numbersNum{
    display: block;
    width: 30px;
    font-size: 2vh;
    text-align: center;
    padding: 3.5vh 0 0 0;
    line-height: 1;
    color: #999;
}
.numbersItemWrap{
    width: calc( 100% - 30px );
    display: table;
    border-spacing: 5px;
}
.numbersItem{
    display: table-cell;
    vertical-align: middle;
    height: auto;
    width:2.5%;
    border: 1px solid #ddd;
    background: #fff;
    box-sizing: border-box;
    text-align: center;
    font-size: 4.5vh;
    line-height: normal;
    margin: 0 0.2%;
}
.numbersItem.colored{
    background: #eaeaea;
    border: 1px solid #d6d6d6;
}

/*------------------------------------------------
numbers output
------------------------------------------------- */
.playBox.output{
    margin: 0 0 90px 0;
}
.numbersRow.output{
    padding: 0 0 0 0;
    display: flex;
    height: auto;
    margin:0 auto 30px;
}
.numbersRow.output li{
    display: block;
    height: 20%;
    width: 5%;
    text-align: center;
}
.numbersRow.output li .numbersNum{
    display: block;
    width: 100%;
    font-size: 1.5vh;
    text-align: center;
    padding: 0;
    line-height: 1;
    margin: 0 auto 10px;
    color: #999;
}
.numbersRow.output li .numbersItemInput{
    display: block;
    width: 95%;
    font-size: 5vh;
    text-align: center;
    padding: 0;
    line-height: 1;
    box-sizing: border-box;
    border: 1px solid #ddd;
}
.numbersRow.output li.colored .numbersItemInput{
    background: #eaeaea;
    border: 1px solid #d6d6d6;
}
.numbersRow.output li.colored input[type="number"]:focus,
.numbersRow.output li.colored input[type="text"]:focus {
    border: 1px solid #ddd;
    background-color: #e8d8d8;
}

/*------------------------------------------------
numbers check
------------------------------------------------- */
.check .playBox.numbersBox{
    margin-bottom: 90px;
}
.numbersRow.check {
    padding: 0 0 0 0;
}
.numbersRow.check li {
    height: 20%;
}
.numbersAnserWrap{
    display: table-cell;
    width: 2.5%;
}
.numbersRow.check .numbersNum {
    padding: 6vh 0 0 0;
}
.numbersAnserWrap .numbersItem{
    width: 100%;
    height: auto;
    display: block;
    font-size: 4vh;
    margin-bottom: 5px;
}
.numbersAnswer {
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    text-align: center;
    font-size: 4vh;
    line-height: normal;
    position: relative;
}


@media screen and (max-height: 600px){

/*------------------------------------------------
numbers input
------------------------------------------------- */
    .numbersRow {
        padding: 0% 0 0 0;
    }
    .numbersRow li {
        height: 18%;
    }
    .numbersItem {
        line-height: normal;
        font-size: 7vh;
    }

/*------------------------------------------------
numbers check
------------------------------------------------- */
    .check .playBox.numbersBox{
        height: auto;
        margin-bottom: 50px;
    }
    .numbersRow.check li {
        height: auto;
        margin-bottom: 10px;
    }
    .numbersNum {
        font-size: 16px;
    }
    .numbersAnserWrap .numbersItem {
        font-size: 16px;
    }
    .numbersAnswer {
        font-size: 16px;
    }

}

@media screen and (max-height: 450px){

/*------------------------------------------------
numbers input
------------------------------------------------- */
    .input .numbersBox {
        height: auto;
        margin: 30px 0 60px 0;
    }
    .numbersRow li {
        height: 55px;
    }
    .numbersItemWrap {
        border-spacing: 2px;
    }
    .numbersNum {
        font-size: 12px;
        padding: 9px 0 0 0;
    }
    .numbersItem {
        font-size: 16px;
    }
/*------------------------------------------------
numbers output
------------------------------------------------- */
    .numbersRow.output li .numbersNum {
        font-size: 8px;
        margin: 0 auto 5px;
        letter-spacing: -0.1em;
    }
    .numbersRow.output li .numbersItemInput {
        font-size: 16px;
    }
    .numbersRow.output {
        margin: 0 auto 10px;
    }
/*------------------------------------------------
numbers check
------------------------------------------------- */
    .check .numbersNum {
        font-size: 13px;
    }
    .numbersAnserWrap .numbersItem {
        font-size: 13px;
    }
    .numbersAnswer {
        font-size: 13px;
    }

}


@media screen and (max-height: 400px){
/*------------------------------------------------
numbers input
------------------------------------------------- */
    .numbersRow li {
        height: 35px;
    }

}

@media screen and (max-height: 320px){
    .play.input .inner {
        width: 98%;
    }
    .numbersItem {
        font-size: 8px;
    }
    .numbersRow li {
        height: 25px;
    }
    .input .numbersBox {
        margin: 40px 0 60px 0;
    }
    .numbersNum {
        font-size: 12px;
        padding: 4px 0 0 0;
    }
    .numbersItemWrap {
        /* width: 528px; */
    }
    .numbersItem {
        width: 2%;
    }
}

/*------------------------------------
firefox hack
------------------------------------ */
@-moz-document url-prefix(){
    .numbersRow.output li .numbersItemInput {
        line-height: normal;
    }
}