﻿@charset "UTF-8";


/* -------------------------------------------------------------- */
/*  02. Layout Components
----------------------------------------------------------------- */

/* ---------------------------------- */
/* Forms Reset & Styles
------------------------------------- */
input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
	height: 48px;
	line-height: 48px;
	padding: 0 20px;
	outline: none;
	font-size: 16px;
	color: #808080;
	margin: 0 0 16px 0;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	display: block;
	background-color: #fff;
	font-weight: 500;
	opacity: 1;
	border-radius: 4px;
	border: none;
	box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.12);
}

select {
	padding: 15px 18px;
	cursor: pointer;
}

input {
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
	color: #808080;
	transition: box-shadow 0.2s !important;
	opacity: 1;
	border: none;
	box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.12);
}

input:-webkit-autofill:focus,
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
    -webkit-text-fill-color: #808080 !important;
}

/* With Border */
input.with-border,
input[type="text"].with-border,
input[type="password"].with-border,
input[type="email"].with-border,
input[type="number"].with-border,
textarea.with-border,
select.with-border {
	border: 1px solid #e0e0e0;
	box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.05);
}
input.with-border:focus,
input[type="text"].with-border:focus,
input[type="password"].with-border:focus,
input[type="email"].with-border:focus,
input[type="number"].with-border:focus,
textarea.with-border:focus {
	border: 1px solid #e0e0e0;
	box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.08);
}

input[type="submit"] {
	border: none;
	padding: 11px 18px;
	width: auto;
}

input[type="checkbox"] { display: inline; }

input[type="radio"] {
	width: 15px;
	height: 15px;
	cursor: pointer;
	box-shadow: none;
}


/* Input Placeholder Color */
::placeholder {
	color: #808080;
	opacity: 1;
}

textarea {
	height: auto;
	line-height: 27px;
	padding: 20px;
	min-height: 130px;
	transition: none !important;
	min-width: 100%;
}

label,
legend {
	display: block;
	font-weight: bold;
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 8px;
}


label span,
legend span {
	font-weight: normal;
	font-size: 14px;
	color: #444;
}

fieldset {
	padding: 0;
	border: none;
}

button {
	border: none;
	margin: 0;
	padding: 0;
	width: auto;
	overflow: visible;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: normal;
	cursor: pointer;
}

a { color: #66676b;
	 /* transition: 0.3s;  */
	}
a, button { outline: none !important; }
a:focus,
a:hover { text-decoration: none; color: #333;}
img { max-width: 100%; }


/* -------------------------------------------------------------- */
/*  04. User Interface Elements
----------------------------------------------------------------- */

/* ---------------------------------- */
/* Buttons
------------------------------------- */

button { vertical-align: middle; }

span.button,
button.button,
input[type="button"],
input[type="submit"],
a.button {
	background-color: #040828;
	top: 0;
	padding: 10px 20px;
	line-height: 24px;
	color: black;
	position: relative;
	font-size: 16px;
	font-weight: 500;
	display: inline-block;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	overflow: hidden;
	border: none;
	border-radius: 4px;
    box-shadow: 0 4px 12px rgba(102,103,107,0.15);
}


.button.full-width {
	max-width: 100%;
	width: 100%;
	text-align: center;
	display: block;
}



/* ---------------------------------- */
/* Button with sliding icon
------------------------------------- */
.button-sliding-icon { text-align: center; }
.button-sliding-icon i {
	opacity: 0;
	max-width: 0;
	transition: 0.25s;
	display: inline-block;
	transform: translateX(-20px);
}

.button-sliding-icon:hover i {
	max-width: 20px;
	opacity: 1;
	transform: translateX(0);
}


/* For buttons */
.button.button-sliding-icon {
	padding-left: 20px;
	padding-right: 10px;
}

.button.button-sliding-icon:hover {
	padding-right: 20px;
}

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

.button.button-sliding-icon:hover i {
	max-width: 20px;
	opacity: 1;
	transform: translateX(0);
}