/*------------------------------------------------
INPUT
------------------------------------------------*/

input {
	width: 100%;
	padding: 6px;
    border: 0;
    border-bottom: 1px solid #9e9e9e;
	background-color: transparent;
}

input:focus {
	outline: 0;
	border-bottom: 1px solid #9e9e9e;
    transition: 0.6s all ease;
}

/*------------------------------------------------
SELECT
------------------------------------------------*/

/*the container must be positioned relative:*/
.customised-select {
  position: relative;
}

.customised-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: transparent;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 15px;
  right: 8px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #000 transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #000 transparent;
  top: 9px;
}

/*style the items (options), including the selected item:*/
.select-selected {
  padding: 6px 26px 6px 6px;
  border-bottom: 1px solid #9e9e9e;
  cursor: pointer;
  user-select: none;
}

.select-items div {
  color: #000;
  padding: 6px 8px;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #fff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
  -webkit-box-shadow : 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .select-items .same-as-selected {
  color: #fff;
  background-color: #A649E9;
}

/*------------------------------------------------
SWITCH
------------------------------------------------*/

.switch {
  position: relative;
  margin: 16px auto;
  height: 34px;
  width: 150px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 17px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 75px;
  line-height: 34px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.switch-label:active {
  font-weight: bold;
}
.switch-label-off {
  padding-left: 2px;
}
.switch-label-on {
  padding-right: 2px;
}
.switch-input {
  display: none;
}
.switch-input:checked + .switch-label {
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 75px;
}
.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  width: 73px;
  height: 30px;
  background: #A649E9;
  border-radius: 17px;
  background-image: -webkit-linear-gradient(top, #bf76f5, #A649E9);
  background-image: -moz-linear-gradient(top, #bf76f5, #A649E9);
  background-image: -o-linear-gradient(top, #bf76f5, #A649E9);
  background-image: linear-gradient(to bottom, #bf76f5, #A649E9);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}

/*------------------------------------------------
BUTTON
------------------------------------------------*/

.button {
	display: block;
	margin: 16px auto;
	background: #A649E9;
	box-shadow: 0 3px 2px 0 rgba(0,0,0,0.1);
	border: 0;
	border-radius: 5px;
	padding: 8px 12px;
	color: #fff;
	text-transform: uppercase;
	transition: background .3s, transform .3s, box-shadow .3s;
	will-change: transform;
	cursor: pointer;
}
.button:not(:disabled):hover {
	box-shadow: 0 4px 17px rgba(0,0,0,0.2);
	transform: translate3d(0, -2px, 0);
}
.button:active {
	box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
	transform: translate3d(0, 1px, 0);
}
.button:focus {
	outline: 0;
}
.button:disabled {
	opacity: .85;
}

/*------------------------------------------------
CHECKBOX
------------------------------------------------*/

.custom-input-checkbox label {
  display: inline-block;
  position: relative;
  margin: 0;
  padding-left: 22px;
  cursor: pointer;
  font-size: 0.75rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.custom-input-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.custom-input-checkbox .checkmark {
  position: absolute;
  margin: 0;
  top: 1px;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #eee;
}
.custom-input-checkbox label:hover input ~ .checkmark {
  background-color: #ccc;
}
.custom-input-checkbox label input:checked ~ .checkmark {
  background-color: #A649E9;
}
.custom-input-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.custom-input-checkbox input:checked ~ .checkmark:after {
  display: block;
}
.custom-input-checkbox .checkmark:after {
  left: 5px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*------------------------------------------------
Form validation
------------------------------------------------*/

.invalid-input, .invalid-input:focus {
	border-color: #dc3545;
}
.validation-error {
	margin-top: .25rem;
	width: 100%;
	font-size: 0.75rem;
	color: #dc3545;
}
.validation-error.success {
	color: #28a745;
}

/*------------------------------------------------
floating label
------------------------------------------------*/

.floating-label {
	position: relative;
	margin-top: 2.5rem;
}
.floating-label:first-child {
	margin-top: 1.5rem;
}
.floating-label label {
	position: absolute;
	top: 6px;
	left: 5px;
	color: #999;
	cursor: text;
	transition: all .15s ease-in-out 0s;
}
.floating-label input:focus ~ label, .floating-label input:not(:placeholder-shown) ~ label {
	top: -1.5rem;
	left: 0;
	color: inherit;
	cursor: default;
}
.floating-label ::-webkit-input-placeholder {
	opacity: 0;
}