/* Text, Password */
input[type="text"], input[type="password"] {
	width: 100%;
	background-color: rgba(116,116,128,.18);
	height: 40px;
	font-size: 17px;
	padding: 0 12px;
	border-radius: 6px;
	color: #fff;
	border: 1px solid transparent;
}

input.readonly { color: rgba(235,235,245,.3) !important; cursor: not-allowed; }

/* Textarea */

textarea {
	width: 100%;
	height: 100px;
	border-radius: 8px;
	background-color: rgba(116,116,128,.18);
	border: 1px solid transparent;
	padding: 12px;
	font-size: 17px;
	color: #fff;
}



/* Placeholder */

input[type="text"]::placeholder, input[type="password"]::placeholder, textarea::placeholder { color: rgba(235,235,245,.3); }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-color: rgba(84,84,88,.65); }




/* Submit */

input[type="submit"] {
	background-color: #0A84FF;
	color: #fff;
	height: 44px;
	border-radius: 6px;
	font-size: 17px;
	font-weight: 600;
	width: 180px;
	cursor: pointer;
}



/* Checkbox */

input.cb[type="checkbox"] { display: none; }
input.cb[type="checkbox"] + label { color: rgba(235,235,245,.3); cursor: pointer; align-self: center; display: flex; }
input.cb[type="checkbox"] + label i { font-size: 22px; margin: 0 2px 0 0; }
input.cb[type="checkbox"]:checked + label { color: #0A84FF; }



/* Select */
select {
	font-size: 17px;
	color: #fff;
	width: 100%;
	background-color: rgba(116,116,128,.18);
	border: 1px solid transparent;
	height: 40px;
	border-radius: 6px;
	padding: 0 12px;
}

select option[value="1"] { background: rgba(235,235,245,.3); }




/* Comment Post */

input.cp[type="text"] {
	height: inherit;
	background-color: transparent;
	border-width: 0 0 .5px 0;
	border-color: rgba(235,235,245,.18);
	font-size: 28px;
	color: rgba(235,235,245,.6);
	margin-bottom: 15px;
	font-weight: 700;
	border-radius: 0;
	padding: 0 0 5px 0;
}

input.cp[type="text"]:focus { border-color: #fff; }



/* Switch */
input.sw[type="checkbox"] + label { width: 70px; height: 36px; background-color: rgba(120,120,128,.36); border-radius: 100px; position: relative; cursor: pointer; }
input.sw[type="checkbox"] + label u { position: absolute; width: 26px; height: 26px; background-color: #fff; border-radius: 100%; left: 5px; top: 5px; }
input.sw[type="checkbox"]:checked + label { background-color: #32D74B; }
input.sw[type="checkbox"]:checked + label u { left: 39px; }



/* Option Button */
input.op[type="button"] {
	width: 88px;
	background-color: rgba(116,116,128,.18);
	height: 40px;
	font-size: 15px;
	font-weight: 600;
	padding: 0 12px;
	border-radius: 6px;
	color: #0A84FF;
	cursor: pointer;
}




/* Radio Button */
input[type="radio"] + label { display: flex; height: 36px; padding: 5px 5px 0 5px; background-color: rgba(116,116,128,.18); color: rgba(235,235,245,.6); cursor: pointer; font-size: 15px; font-weight: 600; border-radius: 6px; margin-right: 3px; border: 1.5px solid transparent; }
input[type="radio"]:checked + label { color: #0A84FF; border-color: #0A84FF; background-color: transparent; color: #0A84FF;  }