* {
    box-sizing: border-box;
}

.MaterialSelect .Caption,
.MaterialInput .Caption {
    font-weight: bold;
}

.header {
    padding-top: 20px; 
    width: 100%;
    height:10%;
    margin-top: 20px;
    color: #77671c;
    position: relative;
}

    .header h1 {
        margin: 0;
        padding: 0;
        float: left;
    }

    .header a {
        background-color: #77671c;
        height: 35px;
        float: right;
        position: relative;
        right: 0px;
        top: 3px;
        padding: 6px;
        border-radius: 4px;
        cursor: pointer;
    }

        .header a:hover {
            box-shadow: 0 0 4px #77671c;
        }

.wrapper {
    width: 700px;
    height: 500px;
    margin: 50px auto;
    background-color: #f7fafc;
    padding-left: 50px;
    padding-right: 50px;
}

    .wrapper .inputs-side {
        width: 600px;
        height: 250px;
        position: absolute;
        margin-top: 0px;
    }

        .wrapper .inputs-side .left {
            width: 50%;
            height: inherit;
            float: left;
        }

        .wrapper .inputs-side .right {
            width: 50%;
            height: inherit;
            float: right;
        }

            .wrapper .inputs-side .right .input-element {
                float: right;
            }

        .wrapper .inputs-side .input-element {
            margin-top: 40px;
            width: 295px;
        }

        .wrapper .inputs-side .insurance-cost {
            margin-top: 30px;
            font-weight: bold;
        }

            .wrapper .inputs-side .insurance-cost .amount {
                color: #009fe2;
                padding-left: 10px;
            }

        .wrapper .inputs-side .input-element.min-point-for-discount {
            margin-top: 25px;
            font-weight: bold;
            height: 50px;
        }

            .wrapper .inputs-side .input-element.min-point-for-discount * {
                cursor: pointer;
            }

        .wrapper .inputs-side .checkbox {
            width: 20px;
            height: 20px;
            margin: 0;
            padding: 0;
            position: relative;
            top: 5px;
        }

            .wrapper .inputs-side .checkbox.single {
                top: 30px;
            }

        .wrapper .inputs-side label.exceeds-limit-point {
            position: relative;
            top: 0;
        }

            .wrapper .inputs-side label.exceeds-limit-point.single {
                top: 25px;
            }

    .wrapper .seperator-line {
        border: none;
        border-top: 2px solid #babbbc;
        outline: 0;
        width: 600px;
        position: relative;
        top: 210px;
    }

    .wrapper .outputs-side {
        width: 600px;
        height: 250px;
        position: absolute;
        top: 370px;
    }

        .wrapper .outputs-side .outputs-wrapper {
            width: 300px;
            height: 250px;
            float: right;
        }

            .wrapper .outputs-side .outputs-wrapper .item {
                width: 50%;
                height: 25px;
                font-weight: bold;
            }

                .wrapper .outputs-side .outputs-wrapper .item.left {
                    float: left;
                    text-align: left;
                }

                .wrapper .outputs-side .outputs-wrapper .item.right {
                    float: right;
                    text-align: right;
                    color: #009fe2;
                }

                .wrapper > .header > h1 {
                    font-size: 24px;
                } 
