/**
 * INPUT
 **/

[class*="input__"] > * {
  display: block;
  font-size: 14px;
}

[class*="input__"] input:not([type="checkbox"]) {
  width: 100%;
  padding: 1px;
  text-indent: 1em;
  line-height: 3em;
  color: rgb(105, 119, 151);
  border: 1px solid rgba(157,171,203,0.45);
  border-radius: 3px;
  background: rgba(255,255,255,0.99);
  box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.09);
  -webkit-appearence: caps-lock-indicator;
}

[class*="input__"] label,
[class*="input__"] label > * {
  font-size: 14px;
  line-height: 2.5em;
}

[class*="input__"] label {
    color: rgb(138,152,184);
}

[class*="input__"][class*="--error"] input {
  border: 1px solid rgb(229,120,140);
}

[class*="input__"] input:focus {
  outline: none;
  outline-style: none;
  border: 2px solid rgb(95,171,241);
  box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.09),
              0 0 2px rgb(95,171,241);
  padding: 0px;
}

[class*="input__"] {
  margin-bottom: 1em;
}

/**
 * LINK
 **/

.link {
  font-size: 14px;
  color: rgb(95,171,241);
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.link:focus {
  outline: none;
  outline-style: none;
  text-decoration: underline;
}

/**
 * BUTTON
 **/

.btn {
  background: rgba(95,171,241, 1);
  border-radius: 40px;
  font-size: 14px;
  color: #FEFEFE;
  padding: 12px 30px 12px 30px;
  border: none;
}

.btn:hover {
  cursor: pointer;
}

.btn:focus {
  outline: none;
  outline-style: none;
  background: #4E8FCA;
}

.btn:active {
  background: rgba(95,171,241, 0.8);
}

/**
 * CARD
 **/
.card {
  background: #FFFFFF;
  border: 1px solid rgba(157,171,203,0.45);
  box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.12);
  border-radius: 4px;
  padding: 40px 30px;
  flex-basis: auto;
}


/**
 * TOOLTIP
 **/

.tooltip {
  position: absolute;
}

.tooltip {
  background: #FFFFFF;
  border: 1px solid rgba(157,171,203,0.45);
  box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.12);
  border-radius: 5px;
  margin-left: 15px;
  z-index: 9999;
}

.tooltip:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
}

.tooltip:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: white;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  top: 50%;
  left: 0;
  z-index: -2;
  border: 1px solid rgba(157,171,203,0.45);
}

.tooltip__span {
  font-size: 14px;
  line-height: 3em;
  padding: 1em;
  color: rgb(138,152,184);
}

/**
 * SWITCH
 */
.input__switch {
  position: relative;
	background: #5FABF1;
	border-radius: 25px;
	height: 25px;
	width: 60px;
}

.input__switch input:checked ~ .input__switch__toggle {
	left: 35px;
}

.input__switch__toggle {
	background: #FFFFFF;
	border-radius: 50%;
  margin: 0;
	height: 25px;
  width: 25px;
	left: 0px;
	top: 0px;
  border: 1px solid #9DABCB;
  position: absolute;
	transition: left .2s ease;

	z-index: 1;
}

.input__switch label {
	color: #fff;
	font-size: 12px;
	font-weight: 300;
	line-height: 25px;
	text-transform: uppercase;
	transition: opacity .2s ease;
}

.input__switch label:nth-of-type(1) {
	position: absolute;
  right: 5px;
}

.input__switch label:nth-of-type(2) {
	position: absolute;
  left: 10px;
}

.input__switch input {
  cursor: pointer;
	height: 25px;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 60px;
	z-index: 2;
}

.input__switch input:checked ~ label:nth-of-type(1),
.input__switch input:not(:checked) ~ label:nth-of-type(2) {
  opacity: 0;
}
.input__switch input:not(:checked) ~ label:nth-of-type(1),
.input__switch input:checked ~ label:nth-of-type(2) {
  opacity: 1;
}

/**
 * NOTIFICATION
 */
.notification {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(95,171,241, 1);
  line-height: 3em;
  color: #FFFFFF;
  text-align: center;
}

.notification--error {
  background: #F37777;
}

.notification--warn {
  background: rgb(241, 206, 95);
}