﻿/* PLACEHOLDER */
::-webkit-input-placeholder     {color:#bdbdbd;}
::-moz-placeholder              {color:#bdbdbd; opacity:1;}
:-ms-input-placeholder          {color:#bdbdbd;}
:-moz-placeholder               {color:#bdbdbd; opacity:1;}

/* CUSTOM CHECKBOX */
.container {display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.container input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkmark {position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee;}
.container:hover input ~ .checkmark {background-color: #ccc;}
.container input:checked ~ .checkmark {background-color: #2196F3;}
.checkmark:after {content: ""; position: absolute; display: none;}
.container input:checked ~ .checkmark:after {display: block;}
.container .checkmark:after {left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

/* RADIO RADIO */
.container.radio-container	.checkmark 			{border-radius: 25px;}
.container.radio-container .checkmark:after		{border:none; width: 11px; height: 11px; left: 50%; margin-left: -5.5px; top:50%; margin-top: -5.5px; border-radius: 5px; background-color: #ffffff}

/* FRONT END 

Checkbox

<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

Radio
<label class="container radio-container">One
  <input type="radio" checked="checked" id="radioOne" name="radioGroup">
  <span class="checkmark"></span>
</label>
<label class="container radio-container">Two
  <input type="radio" id="radioTwo" name="radioGroup">
  <span class="checkmark"></span>
</label>

*/

/* CUSTOM SELECT */
.select-css 			{display: block; font-size: 14px; line-height: 1.3; padding: .6em 1.4em .5em .8em; width: 100%;  max-width: 100%; box-sizing: border-box; margin: 0; border-radius: 5px; -moz-appearance: none; -webkit-appearance: none;   appearance: none;
						background-color: #eee; background-image: url(/_assets/select-arrow.png); background-repeat: no-repeat, repeat; background-position: right 1em top 50%, 0 0; background-size: 22px auto;}

.select-css::-ms-expand {display: none;}
.select-css:focus 		{border-color: #aaa;}
.select-css option 		{font-weight:normal;}



