/*#region ---------------- base ---------------- */
body {
    background-repeat: no-repeat;
    background-attachment: fixed;
}

div.element {
    margin-top: 5px;
    margin-bottom: 5px;
}

div.title ~ div.element {
    padding-top: 2px;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
}

div.element > div.input-group img {
    width: 25px;
    height: 25px;
}

div.element > div.input-group > label.left {
    margin-right: auto;
    min-width: 85px;
    padding: 1px;
    font-size: 14px;
    text-align: left;
}

div.element > div.input-group {
    height: 25px;
    width: 100%;
    padding-left: 0;
}

/*#endregion base */

/*#region ---------------- input block ---------------- */
/*#region - refining range*/
/*range slider*/
div.element > div.input-group div.range-slider {
    width: 100%;
    margin-top: 6px;
    margin-left: 0px;
    margin-right: 5px;
}

div.element > div.input-group div.range-slider .ui-slider-range { 
    background: rgb(235, 147, 75);
}

div.element > div.input-group div.range-slider > div.ui-slider-handle {
    width: 25px;
    height: 25px;
    text-align: center;
    top: -7px;
    padding-top: 11px;
    line-height: 0px;
}

div.element > div.input-group div.range-slider > div.ui-slider-handle:active {
    background: rgb(243, 180, 122);
}
/*#endregion refining range*/
/*#region - price */
form.price > div.element > div.input-group > input {
    height: 25px;
    width: 100px;
    text-align: right;
    padding-right: 5px;
    border-radius: 3px;
}
/*#endregion price*/
/*#region - have need */
/*#region -- input */
form.need > div.element > div.input-group input {
    height: 25px;
    border-radius: 0px;
}

form.need > div.element > div.input-group > input.number {
    width: 50px;
    border:1px solid #ced4da;
    border-right: 0px;
    padding-right: 10px;
    text-align: right;
}

/*hide number step*/
form.need > div.element > div.input-group > input.number {
    -moz-appearance: textfield;
}
form.need > div.element > div.input-group > input.number::-webkit-inner-spin-button,
form.need > div.element > div.input-group > input.number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/*#endregion input */
/*#region -- total */
form.need > div.element > div.input-group div.total {
    height: 25px;
    width: 50px;
    background-color: #fff;
    border:1px solid #ced4da;
    border-left: 0px;
}

form.need > div.element > div.input-group div.total > label > span {
    margin-left: 5px;
    text-align: center;
}
/*#endregion total*/
/*#region -- btn */
div.input-group div.btn {
    background-color: #e0e2e6; 
    border: 1px solid #ced4da;
    outline: none;
} 

div.input-group div.btn:hover {
    background-color: #aeb1b3ec;
}

div.input-group div.btn-xs {
    width: 25px;
    height: 25px;
    padding : 0;
    line-height: 23px;
    text-align: center;
}

div.input-group div.clear {
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    padding-left: 3px;
}

div.input-group div.limit {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    padding-right: 3px;
}
/*#endregion btn*/

/*#endregion have need */

/*#endregion input block */

/*#region ---------------- result ---------------- */
footer form[class *= col] {
    padding-left: 0;
    padding-right: 0;
    margin-top: 1px;
    margin-bottom: 1px;
}

/*#region - charts*/
#OutputCharts {
    width: 100%;
    height: 390px;
}
/*#endregion charts*/
/*#region - details table*/
table {
    text-align: right;
}

table img {
    width: 25px;
    height: 25px;
}
/*#region -- 水平 */
table tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}

table thead tr {
    text-align: center;
}

table thead tr {
    border-bottom: 1px solid gray;
    font-weight: bold;
}

table tbody tr:hover {
    background-color: whitesmoke;
    color: orange;
    font-weight: bold;
}

/*#endregion 水平*/
/*#region -- 垂直 */
table td[class = ""],
table td[class *= need] {
    text-align: center;
    padding-right: 0px;
}

table th,
table td {
    border-right: 1px solid gray;
}

table [class *= need],
table .market {
    border-right: 1px solid rgba(0, 0, 0, 0);
}

table [class *= cost] {
    padding-right: 5px;
}

table th#col1 {
    width: 4%;
}

table th#col2,
table th#col3 {
    width: 21%;
}

table th#col4 {
    width: 16%;
}

table th#col5,
table th#col6 {
    width: 19%;
}

/*#endregion 垂直 */

/*#endregion details table*/

/*#endregion result */

@media screen and (max-width: 767px) {
    /*range slider*/
    div.element > div.input-group div.range-slider {
        margin-left: 5px;
    }

    /*Output table*/
    table [class = costEquipment],
    table [class = costConsumables] {
        display: none;
    }

    table th,
    table td {
        border: 0px;
    }

    table th#col2,
    table th#col3 {
        width: 7%;
    }
}