.c-form {
	$self: &;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
	row-gap: 25px;

	&__group {
		&.is-full {
			grid-column: 1 / 3;
		}

		&.is-actions {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		&.has-error {
			#{$self}__label,
			#{$self}__field,
			#{$self}__select:before,
			#{$self}__select > select,
			#{$self}__group-append {
				color: #ff6565;
			}

			#{$self}__field,
			#{$self}__group-append,
			#{$self}__select > select {
				border-color: #ff6565;
				background-color: rgba(#ff6565, 0.15);
			}
		}
	}

	&__label {
		display: block;
		margin-bottom: 4px;
		font-size: 14px;
		font-weight: 300;
		color: $color-black;
	}

	&__field {
		width: 100%;
		padding: 14px 16px;
		border: solid 1px $color-black;
		border-radius: 2px;
		background-color: transparent;
		font-size: 16px;
		line-height: 1;
		color: $color-black;
	}

	&__select {
		@include select;

		> select {
			padding: 14px 8px;
			font-size: 16px;
			background-color: transparent;

			&:disabled {
				border-color: #ccc;
			}
		}
	}

	&__message-error {
		margin-top: 5px;
		font-size: 12px;
		color: #ff6565;
	}

	textarea {
		min-height: 120px;
	}

    #bloco-radios {
        display: none;
        // height: 30px;
    }

    &__radio {
        &__item {
			display: flex;
			align-items: center;

			&:not(:first-child) {
				margin-left: 25px;
			}
		}

        &__input {
			position: relative;
			flex-shrink: 0;
			display: inline-block;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			border: 1px solid #1D1E1C;
			background: transparent;
			cursor: pointer;
			outline: none;

			&:checked {
				&:before {
					position: absolute;
					content: '';
					width: 8px;
					height: 8px;
					border-radius: 50%;
					background: #1D1E1C;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}

		&__label {
			font-size: 16px;
			line-height: 1;
			color: #1D1E1C;
			margin-left: 5px;
		}
    }

	@include media-breakpoint-down(sm) {
		grid-template-columns: 1fr;

		&__group {
			&.is-full {
				grid-column: 1;
			}

			&.is-actions {
				display: flex;
				flex-direction: column;

				> * + * {
					margin-top: 25px;
				}
			}

            &.--name {
                order: 1;
            }

            &.--mail {
                order: 2;
            }

            &.--subject {
                order: 3;
            }

            &.--radios {
                order: 4;
            }

            &.--telephone {
                order: 5;
            }

            &.--enterprise {
                order: 6;
            }

            &.--position {
                order: 7;
            }

            &.--state {
                order: 8;
            }

            &.--city {
                order: 9;
            }

            &.--message {
                order: 10;
            }

            &.--send {
                order: 11;
            }
		}
	}
}
