@media screen and(min-width:@mobile-device) {
    .options-container {
        padding: @padding-general;
        background-color: @bgColor;
        .shadow();
        .border-normal();
        margin: @margin-general;
        margin-top: 6.8rem;
        .font-normal();

        .title {
            font-size: 2rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            span {
                font-size: 1.3rem;
                color: @tipTextColor;
            }

            .right {
                display: flex;
                font-size: 1.5rem;
                align-items: flex-end;
                color: @linkColor;

                p {
                    cursor: pointer;
                    margin: 0 1rem;
                }
            }
        }

        .form {
            display: flex;
            flex-direction: column;
            font-size: 1.5rem;
            margin: @margin-general 0;

            .pannel {
                padding: 0 1rem;
                display: flex;
                flex-direction: column;
            }

            .form-item {
                display: flex;
                margin: 1rem 0;
                justify-content: space-between;
                flex-wrap: wrap;

                .label {
                    width: 20rem;
                    flex-shrink: 0;
                }

                .background {
                    flex-shrink: 0;
                    flex-grow: 1;
                    min-width: 30rem;
                    height: 20rem;
                }
            }

            .demo {
                display: flex;
                margin: 1rem;
                flex-direction: column;
                align-self: center;
                .border-normal();
                background-color: @bgColor;
                color: @textColor;
                padding: 1rem;
                width: 60vw;
                cursor: pointer;

                &:hover {
                    background-color: @hoverColor;
                    color: @hoverTextColor;
                }

                &.active {
                    background-color: @activeColor;
                    color: @hoverTextColor;
                }

                &:active {
                    background-color: @activeColor;
                    color: @hoverTextColor;
                }

                .very-big {
                    font-size: @very-big-text;
                }

                .big {
                    font-size: @big-text;
                }

                .mid {
                    font-size: @mid-text;
                }

                .small {
                    font-size: @small-text;
                }

                .very-small {
                    font-size: @very-samll-text;
                }
            }
        }

        .tip {
            color: @tipTextColor;
        }
    }
}

@media screen and(min-width:@smallpc-device) {
    .options-container {
        margin-top: @margin-general;

        .form {
            .demo {
                width: 40rem;
            }
        }
    }

}