/* Title */
.sms-title
{
	margin-top: 20px;
	margin-bottom: 20px;
}

/* Left direction */
#wrapper .sms-dir-left
{
	direction: ltr;
	text-align: left;
}

/* Form */
.sms-form {}

/* Fieldset */
.sms-fieldset
{
	margin: 0;
	padding: 0;
	border: 0; 
}

/* Field */
.sms-field { margin-bottom: 20px; }
.sms-field:last-child { margin-bottom: 0; }

/* Input */
.sms-field input
{
	padding: 0 10px;
	font-size: 1em;
	line-height: 34px;
	color: #000;
	background-color: #fff;
	border: 0;
	border-bottom: 2px solid #eee;
	border-radius: 0;
	outline: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.sms-field input:focus
{
	color: #000;
	border-color: var(--theme-color);
}

.sms-field.change input:invalid { border-color: #f44336; }

/* Label */
.sms-field label
{
	font-size: 1em;
	line-height: 30px;
	color: #666;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

[dir="rtl"] .sms-field label { padding-right: 10px; }
[dir="ltr"] .sms-field label { padding-left: 10px; }
.sms-field label span { font-size: 1.15em; }
[dir="rtl"] .sms-field label span { margin-left: 5px; }
[dir="ltr"] .sms-field label span { margin-right: 5px; }
.sms-field.valid label { color: #000; }
.sms-field.valid label span { color: var(--theme-color); }

/* Buttons */
#wrapper .sms-buttons { margin-top: 40px; }

#wrapper .sms-btn
{
	width: auto;
	padding-right: 20px;
	padding-left: 20px;
	font-size: 1em;
	line-height: 36px;
	color: var(--theme-color);
	background-color: #fff;
	border: 2px solid var(--theme-color);
	border-radius: 8px;
}

#wrapper .sms-btn:not([disabled]):first-child
{
	color: #fff;
	background-color: var(--theme-color);
}

#wrapper .sms-btn[disabled]
{
	color: #888;
	background-color: #d5d5d5;
	border-color: #d5d5d5;
}

[dir="rtl"] #wrapper .sms-btn { margin-right: 10px; }
[dir="ltr"] #wrapper .sms-btn { margin-left: 10px; }
[dir="rtl"] #wrapper .sms-btn:first-child { margin-right: 0; }
[dir="ltr"] #wrapper .sms-btn:first-child { margin-left: 0; }

#wrapper .sms-btn:not([disabled]):hover
{
	color: var(--theme-light-color);
	border-color: var(--theme-light-color);
}

#wrapper .sms-btn:not([disabled]):first-child:hover
{
	color: #fff;
	background-color: var(--theme-light-color);
}

@media (min-width: 48em)
{
	#wrapper .sms-container
	{
		width: 750px;
		margin-right: calc(50% - 375px);
		margin-left: calc(50% - 375px);
	}

	.sms-field input
	{
		width: calc(100% - 120px);
		font-size: 1.2em;
		line-height: 38px;
		border-width: 2px;
	}

	.sms-field label
	{
		width: 120px;
		line-height: 40px;
		border-bottom: 2px solid #eee;
	}

	.sms-field input:focus ~ label
	{
		color: #000;
		border-color: var(--theme-color);
	}

	.sms-field input:focus ~ label span { color: var(--theme-color); }

	.sms-field.change input:invalid ~ label
	{
		color: #000;
		border-color: #f44336;
	}

	.sms-field.change input:invalid ~ label span { color: #f44336; }
}