@charset "UTF-8";
    @import '~scss/_mixins';
    input,
    textarea,
    select,
    button {
        font-family: inherit;
    }

    input,
    textarea {
        background-color: transparent;
        outline: none;
        border: 0;
        color: #333;
    }

    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset;
    }

    input::-webkit-input-placeholder {
        color: #DCDCDC;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    textarea[disabled],
    input[disabled] {
        -webkit-text-fill-color: #BDBDBD;
        opacity: 1;
        color: #BDBDBD;
    }

    .lm-cells-item .lm-cells-item-body {
        overflow: visible;
    }

    select {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        border: 0 none;
        outline: 0 none;
    }

    .lm-input {
        @include flexbox;
        @include justify-content(space-between);
        @include align-items(center);
        width: 100%;
        position: relative;
        z-index: 1;
        input {
            width: 100%;
            font-size: 14px;
            line-height: 24px;
            position: relative;
        }
        input:focus:after {
            width: 100%;
            height: 1px;
            background-color: #FFF;
            align-self: flex-end;
        }
        //&-err {
        //    input {
        //        color: #E64C4C;
        //    }
        //}
    }

    .lm-validate {
        width: 100%;
        &-arrow {
            position: absolute;
            z-index: 2;
            width: 4px;
            height: 4px;
            bottom: -3px;
            right: 10px;
            border-left: 1px solid #fce5b8;
            border-top: 1px solid #fce5b8;
            transform: rotate(45deg);
            background-color: #fcf9ec;
        }
        &-hint {
            position: absolute;
            width: 100%;
            @include m-box-sizing(border-box);
            left: 0;
            padding: 0 14px;
            top: 39px;
            z-index: 1;
            &-msg {
                border: 1px solid #fce5b8;
                background-color: #fcf9ec;
                color: #ff8e33;
                font-size: 12px;
                text-align: center;
                line-height: 24px;
            }
            &.hidden {
                display: none;
            }
        }
    }

    .lm-textarea {
        width: 100%;
        @include justify-content(space-between);
        @include align-items(center);
        &-err textarea {
            color: #ff3c3c;
        }
        textarea {
            display: block;
            resize: none;
            width: 100%;
            min-height: 50px;
            line-height: 24px;
            font-size: 14px;
        }
        &-tip {
            width: 100%;
            @include flexbox;
            @include justify-content(flex-end);
            @include align-items(center);
            position: relative;
            z-index: 1;
            .lm-validate-arrow {
                right: 41px;
            }
        }
        &-counter {
            color: #B2B2B2;
            font-size: 12px;
            line-height: 16px;
            text-align: right;
        }
        &+.lm-validate-hint {
            top: 89px;
        }
    }

	.lm-radio{
		&-wrapper {
			@include flexbox;
			@include justify-content(center);
			@include align-items(center);
			position: relative;
			height: 24px;
			width: 24px;
			font-size: 14px;
			.lm-radio-content {
				display: inline-block;
				width: 14px;
				height: 14px;
				border: 1px solid #3886F6;
				@include m-border-radius(50%);
				vertical-align: middle;
				background-color: #fff;
			}
			.lm-radio-input:checked+.lm-radio-content,
			.lm-radio-input:checked:disabled+.lm-radio-content {
				border-color: #3886F6;
				background-color: #fff;
				&:before {
					position: absolute;
					content: "";
					width: 10px;
					height: 10px;
					top: 7px;
					left: 7px;
					background-color: #3886F6;
					border-radius: 50%;
				}
			}
			.lm-radio-input:disabled+.lm-radio-content {
				border-color: #E5E5EA;
				background-color: #E5E5EA;
			}
		}
		&-label {
			margin: 2.5px;
			margin-left: 0;
			font-size: 14px;
			width: 80px;
			height: 24px;
			&>* {
				pointer-events: none;
			}
			.lm-radio-content {
				background: #F8F8F8;
				border: 1px solid #F8F8F8;
				@include m-box-sizing(border-box);
				@include flexbox;
				@include justify-content(center);
				@include align-items(center);
				@include m-border-radius(15px);
				height: 100%;
				transition: background .35s ease-in-out, border-color .35s ease-in-out, color .35s ease-in-out;
			}
			.lm-radio-input:checked+.lm-radio-content,
			.lm-radio-input:checked:disabled+.lm-radio-content {
				color: #3886F6;
				background: #fff;
				border: 1px solid #3886F6;
				transition: background .35s ease-in-out, border-color .35s ease-in-out;
			}
			.lm-radio-input:disabled+.lm-radio-content {
				background: #F8F8F8;
				color: #999;
				border: 1px solid #999;
			}
		}
		&-input {
			position: absolute;
			left: -9999em;
		}
		&-content {
			display: inline-block;
			text-align: center;
			vertical-align: middle;
		}
	}

	.lm-checkbox {
        &-wrapper {
            @include flexbox;
            @include justify-content(center);
            @include align-items(center);
            position: relative;
            height: 24px;
            width: 24px;
            font-size: 14px;
            .lm-checkbox-content {
                display: inline-block;
                width: 14px;
                height: 14px;
                border: 1px solid #ccc;
				border-radius: 2px;
                vertical-align: middle;
                background-color: #fff;
                &:before {
					content: "";
					position: absolute;
					top: 4px;
					left: 2px;
					border-left: 3px solid #fff;
					border-bottom: 3px solid #fff;
					width: 17px;
					height: 10px;
					transform-origin: center;
					transform: rotate(-45deg) scale(0.5);
                }
                &:after {
                    position: absolute;
                    background-color: transparent;
                    content: '';
                    width: 14px;
                    height: 14px;
                    left: 5px;
                    top: 5px;
                    z-index: 999;
                }

            }
            .lm-checkbox-input:checked+.lm-checkbox-content,
            .lm-checkbox-input:checked:disabled+.lm-checkbox-content {
                border-color: #3886F6;
                background-color: #3886F6;
                &:after {
                    background-color: #3886F6;
                    transform: scaleX(0);
                    transform-origin: 100% 100%;
                    transition: transform .3s ease-in-out;
                }
            }
            .lm-checkbox-input:disabled+.lm-checkbox-content {
                border-color: #ccc;
                background-color: #ccc;
            }
        }
        &-label {
            margin: 2.5px;
            margin-left: 0;
            font-size: 14px;
            width: 80px;
            height: 24px;
            &>* {
                pointer-events: none;
            }
            .lm-checkbox-content {
                background: #F8F8F8;
                border: 1px solid #F8F8F8;
                @include m-box-sizing(border-box);
                @include flexbox;
                @include justify-content(center);
                @include align-items(center);
                @include m-border-radius(15px);
                height: 100%;
                 transition: background .35s ease-in-out, border-color .35s ease-in-out, color .35s ease-in-out;
            }
            .lm-checkbox-input:checked+.lm-checkbox-content,
            .lm-checkbox-input:checked:disabled+.lm-checkbox-content {
                color: #3886F6;
                background: #fff;
                border: 1px solid #3886F6;
                transition: background .35s ease-in-out, border-color .35s ease-in-out;
            }
            .lm-checkbox-input:disabled+.lm-checkbox-content {
                background: #F8F8F8;
                color: #999999;
                border: 1px solid #999999;
            }
        }
        &-input {
            position: absolute;
            left: -9999em;
        }
        &-content {
            display: inline-block;
            text-align: center;
            vertical-align: middle;
        }
    }

    .lm-select {
        display: block;
        color: #333;
        width: 100%;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        background: transparent;
        &-placeholder {
            color: #DCDCDC;
        }
        option {
            color: #333;
            &[disabled] {
                color: #bdbdbd;
            }
        }
    }

    .lm-switch {
        @include flexbox;
        @include align-items(center);
        height: 28px;
        width: 46px;
        @include m-box-sizing(border-box);
        &-input {
            height: 100%;
            width: 100%;
            position: relative;
            z-index: 1;
            display: block;
            border: 1px solid #DFDFDF;
            outline: 0 none;
            @include m-border-radius(14px);
            @include m-box-sizing(border-box);
            background-color: #DFDFDF;
            transition: background-color 0.1s, border 0.1s;
            appearance: none;
            &:before,
            &:after {
                content: "";
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;
                width: 44px;
                height: 26px;
                @include m-border-radius(13px);
            }
            &:before {
                background-color: #FFF;
                transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
            }
            &:after {
                width: 26px;
                background-color: #FFFFFF;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
                transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
            }
            &:checked,
            &:checked:disabled {
                border-color: #5891EF;
                background-color: #5891EF;
                &:before {
                    transform: scale(0);
                }
                &:after {
                    transform: translateX(18px);
                }
            }
            &:disabled {
                border-color: #E5E5EA;;
                background-color: #E5E5EA;;
                &:before {
                    background-color: #E5E5EA;;
                }
            }
        }
    }

    .lm-agreement-container {
        @include m-box-sizing(border-box);
        @include flexbox;
        @include justify-content(space-between);
        @include align-items(flex-start);
        padding: 20px 30px 0;
        font-size: 12px;
        color: #999;
        line-height: 16px;
        .left {
            @include m-box-sizing(border-box);
            padding-right: 9px;
            position: relative;
            z-index: 1;
            input {
                position: absolute;
                left: -9999em;
                z-index: 1;
            }
            .checkbox {
                @include m-box-sizing(border-box);
                @include flexbox;
                @include justify-content(center);
                @include align-items(center);
				margin-top: 1px;
				outline: 0 none transparent;
				background: #FFF;
				width: 12px;
				height: 12px;
                &:before {
                    position: absolute;
                    content: '';
                    width: 12px;
                    height: 7px;
                    display: inline-block;
                    border-bottom: 2px solid #fff;
                    border-left: 2px solid #fff;
                    transform: rotate(-45deg) scale(0.5);
                    top: 1px;
                    left: -1px;
                }
                &:after {
                    position: absolute;
                    background-color: transparent;
                    content: '';
                    width: 9px;
                    height: 9px;
                    left: 2px;
                    top: 2px;
                    z-index: 999;
                }

				i {
					width: 12px;
					height: 12px;
					@include m-r1b(#999, 6px);
				}
            }
            input:checked+.checkbox {
                border-color: #3886F6;
                background-color: #3886F6;
				border-radius: 2px;

                &:after {
                    background-color: #3886F6;
                    transform: scaleX(0);
                    transform-origin: 9px 9px;
                    transition: transform .3s ease-in-out;
                }

				i {
					display: none;
				}
			}
        }
        .right {
            @include flex(1);
            a {
                color: #333;
            }
        }
    }

    .lm-cells-item {
        .lm-cell-checkbox {
            width: auto;
            min-width: 60px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            @include flex(1);
            @include flexbox;
            @include justify-content(flex-end);
            @include align-self(center);
        }
    }

    .lm-autoclear {
        width: 24px;
        height: 24px;
        padding: 6px;
        @include m-box-sizing(border-box);
        &-icon {
            position: relative;
            z-index: 1;
            display: block;
            width: 12px;
            height: 12px;
            padding: 2px;
            overflow: hidden;
            background-color: #ccc;
            transform: rotate(-45deg);
            @include m-box-sizing(border-box);
            @include m-border-radius(50%);
            &:before,
            &:after {
                position: absolute;
                z-index: 1;
                content: "";
                width: 6px;
                height: 1px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: #fff;
            }
            &:after {
                height: 6px;
                width: 1px;
            }
        }
        //&-err {
        //    background-color: #E64C4C;
        //}
        .hidden {
            display: none;
        }
    }

    .lm-submit {
		padding: 20px 25px;
    }

	.lm-valid {
		&.err {
			.lm-cells-item:after {
				background-color: #E64C4C;
			}
		}
		&-hint {
			padding: 10px 25px;
			line-height: 12px;
			font-size: 12px;
			color: #E64C4C;
		}
	}