/* ==== */
/* FORM */
/* ==== */

	input, button, select, textarea {
		box-sizing: border-box;
	}

	input:focus, button:focus, textarea:focus, select:focus, a:focus {
		outline: none !important;
	}

	input::-moz-focus-inner{
		border: 0;
	}

	/* Base text */

	input[type="text"], input[type="password"], select {
		outline: none;
	}

	input::placeholder, textarea::placeholder {
		color: rgba(0, 0, 0, 0.4);
	}

	/* Select*/

	select::-ms-expand {
		display: none;
	}

	select {
		-webkit-appearance: none;
		-moz-appearance: none;
	}

	/* Buttons */

	input[type="button"].ws, input[type="submit"].ws, button.ws, a.button.ws {
		box-sizing: border-box;
		cursor: pointer;
		-webkit-transition: all 100ms linear;
		-ms-transition: all 100ms linear;
		transition: all 100ms linear;
		outline: none;
	}

	button.icon i {
		margin-right: 5px;
	}

	a.button.ws {
		display: inline-block;
	}

	/* Checkbox */

	label.checkbox {
		display: block;
		position: relative;
		padding-left: 20px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	label.checkbox input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

	label.checkbox .checkmark {
		position: absolute;
		top: 3px;
		left: 0;
		height: 12px;
		width: 12px;
	}

	label.checkbox .checkmark i {
		display: none;
		font-size: 8px !important;
		width: 100%;
		height: 100%;
		line-height: 13px;
		text-align: center;
	}

	label.checkbox input:checked ~ .checkmark i {
		display: block !important;
	}

	div.checkbox span.error {
		padding-left: 25px;
	}

	/* Color */

	label.checkbox > i.color {
		margin-top: 2px;
		float: left;
		height: 13px;
		width: 20px;
		margin-right: 8px;		
	}

	/* Radio */

	label.radio {
		height: 15px;
		display: block;
		position: relative;
		padding-left: 23px;
		margin-bottom: 5px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	label.radio input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

	label.radio .radio {
		position: absolute;
		top: 3px;
		left: 0;
		height: 12px;
		width: 12px;
		border-radius: 100%;
		-webkit-transition: all 100ms linear;
		-ms-transition: all 100ms linear;
		transition: all 100ms linear;		
	}

/* =========== */
/* INPUT GROUP */
/* =========== */

	div.input-group {
		position: relative;
	}

	div.input-group label {
		position: absolute;
		color: #808080;
		pointer-events: none;
		transform-origin: 0 40px;
		margin-left: 20px;
		transform: scale(0.9) translateY(105%);
		transition: transform 0.2s linear;
	}

	div.input-group label.animate-label {
		transform: scale(0.75) translateY(0%);
		transition: transform 0.2s linear;
		color: #999999;
	}

	div.input-group input {
		height: 56px;
		width: 100%;
		padding: 0 18px;
		padding-top: 15px;
	}

	div.input-group select {
		height: 56px;
		width: 100%;
		padding: 0 18px;
	}

	div.input-group i {
		display: none;
	}

	div.input-group input.error ~ i {
		display: block;
		position: absolute;
		top: 18px;
		right: 15px;
		width: 20px;
		height: 20px;
		line-height: 20px;
		font-size: 14px !important;
		text-align: center;
		color: red;
	}

	div.input-group input.error, div.input-group span.error ~ input, div.field.autocheck input.error {
		border: 1px solid red;
	}

	div.input-group span.error, div.checkbox span.error, div.field > div > span.error,
	#checkout > div.cart > div.content > div.coupon > span.error {
		display: block;
		clear: both;
		padding-top: 10px;
		color: red;
		font-size: 13px;
	}

	div.checkbox span.error {
		margin-top: -5px !important;
	}

	div.input-group input::placeholder {
		opacity: 0;
	}

	div.input-group input:focus::placeholder {
		opacity: 1;
	}

	div.input-group textarea {
		width: 100%;
		height: 120px;
	}

/* ========= */
/* USER FORM */
/* ========= */

	div.user_form {
		box-sizing: border-box;
		width: 600px;
		margin: 0 auto;
	}

	div.user_form > form > div.field, div.checkout_form > div.field {
		margin-bottom: 15px;
		overflow: hidden;
	}

	div.user_form > form > div.checkbox, div.checkout_form > div.checkbox {
		margin-bottom: 10px;
	}

	div.user_form > form > div.button, div.checkout_form > div.button, div.user_form a.button:not(.secondary) {
		margin-top: 20px;
		text-align: center;
	}

	div.user_form > form > div.button > button, div.user_form a.button:not(.secondary),
	#checkout > div.customer > div > div.form > div.button > button {
		height: 50px;
		line-height: 50px;
		padding: 0 20px;
	}

	div.user_form > form > p {
		text-align: center;
	}

	button.loading {
		opacity: 0.5;
		cursor: inherit;
	}

	button.loading > i {
		margin-right: 5px;
	}

	div.user_form > form > p.btn {
		margin-bottom: 0;
	}
	
	/*Type*/
	
	div.user_form > div.type {
		text-align: center;
		margin-bottom: 15px;
	}

	div.user_form > div.type > div.button {
		background-color: rgba(0, 0, 0, 0.04);
		height: 50px;
		border-radius: var(--border-radius);
		display: inline-flex;
	}

	div.user_form > div.type > div.button > div {
		float: left;
		height: 40px;
		line-height: 40px;
		border-radius: var(--border-radius);
		margin: 5px;
		padding: 0 20px;
		color: rgba(0, 0, 0, 0.4);
		font-weight: var(--font-semi-bold);
		cursor: pointer;
	}

	div.user_form > div.type > div.button > div:first-child {
		margin-right: 0;
	}

	div.user_form > div.type > div.button > div.active {
		background-color: #ffffff;
		color: var(--main-link-color-base);
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
	}

/* ======== */
/* Messages */
/* ======== */
	
	div.ws.msg {
		box-sizing: border-box;
	}

	div.ws.msg.icon {
		display: table;
		width: 100%;
	}

	div.ws.msg.icon > div.content {
		display: table-row;
	}

	div.ws.msg.icon > div.content > span {
		vertical-align: top;
		display: table-cell;
	}

	div.ws.msg.icon > div.content > span:first-child {
		width: 10px;
	}

	div.ws.msg.icon > div.content > span:last-child {
		padding-left: 5px;
	}

/* ===========*/
/* RESPONSIVE */
/* ===========*/

	@media (max-width: 1024px) {

		div.user_form {
			width: 100% !important;
		}

	}