.steps-list#invoice-tool {
    max-width: 90%;
    margin: 0 auto;
    background-image: url(../images/invoice-step-bg.png);
    background-position: calc(100% - 30px) center;
    background-repeat: no-repeat;
    background-size: 300px;
}
.steps-list #step-1 {
    overflow: hidden;
    vertical-align: middle;
}

.steps-list h2 {font-weight: bold}
.steps-list #step-1 * {float: left;}
.steps-list #step-1 h2 {padding: 5px 0 0 0;width: 300px;}
.steps-list #step-1 .invoice-type-choices {width: calc(100% - 300px);}
.steps-list #step-1 .invoice-type-choices > .custom-radio {margin: 0 10px 0 0}

.steps-list .step-item{margin-top: 10px}
.step-item .step-inputs{padding-left:0;list-style:none}
.step-item .step-inputs li{margin: 5px 0}
.step-inputs .input-desc{
    font-size: 19px;
    width: 300px;
    float: left;
    padding-top: 5px
}
.step-inputs input,
.step-inputs select
 {
    color: #000;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border: 2px solid #253131;
    border-radius: 50px;
    cursor: pointer;
    text-align: center;
    background-color: #f2dd80;
    min-width: 300px
}
.step-inputs select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none
}

.step-inputs input:focus{outline:none}
.step-item .step-inputs li:nth-child(even) input,
.step-item .step-inputs li:nth-child(even) select{background-color: rgb(219, 149, 95)}

#main-invoice-info-steps .input-desc{width:400px}

.invoice-preview{margin: 40px 0}
.invoice-preview .inside-container{overflow-x:auto}
.invoice-preview .inside-container .img-container{position:relative;width:fit-content;margin:0 auto}
.invoice-preview .inside-container::-webkit-scrollbar{height:5px}
.invoice-preview .inside-container::-webkit-scrollbar-thumb{background:#E97132}
.invoice-preview img{display:block;margin:0 auto}

/* invoice text setting */
.invoice-text{position:absolute;z-index:10;color:#E97132;font-weight:bold}
#two-section-invoice .tax-apply-check{bottom:58px;left:365px}
#two-section-invoice .tax-apply-check.zero-rate{left:525px}
#two-section-invoice .tax-apply-check.free-rate{left:685px}
#two-section-invoice .invoice-month{top:74px;left:630px;font-size:18px}
#two-section-invoice .invoice-month-numeric{top:103px;left:665px;font-size:18px}
#two-section-invoice .invoice-date-numeric{top:103px;left:735px;font-size:18px}
#two-section-invoice .invoice-single-item-price{top:243px;right:380px;font-size:20px}
#two-section-invoice .invoice-single-item-price-bottom{bottom:125px;right:380px;font-size:20px}

#two-section-invoice .invoice-single-item-price-upper{bottom:88px;overflow:hidden;left:170px;font-size:19px}
#two-section-invoice .invoice-single-item-price-upper .price{float:left;width:60px;margin-right:3px}
#two-section-invoice .invoice-single-item-price-upper .hundred-million{}
#two-section-invoice .invoice-single-item-price-upper .ten-million{}
#two-section-invoice .invoice-single-item-price-upper .one-million{}
#two-section-invoice .invoice-single-item-price-upper .hundred-thousand-million{}
#two-section-invoice .invoice-single-item-price-upper .ten-thousand{}
#two-section-invoice .invoice-single-item-price-upper .thousand{}
#two-section-invoice .invoice-single-item-price-upper .hundred{}
#two-section-invoice .invoice-single-item-price-upper .ten{}
#two-section-invoice .invoice-single-item-price-upper .unit{}

/* invoice-three-section text setting */
#three-section-invoice .tax-apply-check{bottom:150px;left:305px}
#three-section-invoice .tax-apply-check.zero-rate{left:400px}
#three-section-invoice .tax-apply-check.free-rate{left:485px}
#three-section-invoice .invoice-month{top:73px;left:565px;font-size:18px}
#three-section-invoice .invoice-month-numeric{top:142px;left:695px;font-size:18px}
#three-section-invoice .invoice-date-numeric{top:142px;left:770px;font-size:18px}
#three-section-invoice .invoice-single-item-price{top:248px;right:350px;font-size:20px}
#three-section-invoice .invoice-single-item-price-bottom{bottom:115px;right:350px;font-size:20px}
#three-section-invoice .company-name{
    top: 100px;
    left: 180px;
    font-size: 20px;
}
#three-section-invoice .company-business-id {
    font-size: 20px;
    top: 140px;
    left: 195px;
    letter-spacing: 25px;
}

#three-section-invoice .invoice-single-item-price-upper{bottom:73px;overflow:hidden;left:175px;font-size:19px}
#three-section-invoice .invoice-single-item-price-upper .price{float:left;width:59px;margin-right:3px}

#two-section-invoice .default-item{top:244px;left:50px}
#three-section-invoice .default-item{top:248px;left:70px}
#three-section-invoice .inovice-tax-total{right:350px;bottom:156px;font-size:18px}
#three-section-invoice .sale-price-subtotal{right:350px;bottom:200px;font-size:18px}
@media screen and (max-width:1200px) {
    .steps-list#invoice-tool {
        background-position:right center;
        background-size: 200px
    }
}

@media screen and (max-width:830px) {
    .steps-list#invoice-tool{background-position:right top;background-size:150px}
    .steps-list #step-1{margin-bottom:15px}
    .steps-list #step-1 * {float:none}
    .steps-list #step-1 .invoice-type-choices{width:100%;margin-top:10px}

    #main-invoice-info-steps .input-desc{width:300px}
}

@media screen and (max-width:720px) {
    .tool-title{font-size:3.5rem}
    #step-2 .step-inputs .input-desc{width:200px}
    #step-2 .step-inputs input{width:calc(100% - 250px)}
    #step-3 .step-inputs .input-desc{float:none}
    #step-3 .step-inputs input,
    #step-3 .step-inputs select{display:block;margin-top:5px;width:100%}
    .tool-tutorial{max-width:100%}
}

@media screen and (max-width:660px) {
    .steps-list#invoice-tool{background-image:none}
    .tool-title{font-size:2.5rem}
}

@media screen and (max-width:500px) {
    .steps-list #step-1 .invoice-type-choices > .custom-radio{margin:0 0 10px 0}
    .steps-list #step-1 *{width:100%}
}