/*==================================
    FORM
==================================*/

	input, textarea, select{
	  
	  border: 1px solid #aaa;
	  border-radius: 0;
	  box-shadow: none;
	  outline: 0;

	  color: #444647;
	  background: none;
	  font-weight: 400;
	  font-size: 15.5px;

	  margin: 5px 0 10px 0;
	  padding: 12px 5% 10px 5%;

	  letter-spacing: 1.1px;
	  line-height: 18px;

	  cursor: pointer;

	}

	textarea, select {
	  width: 100%;
	}

	select{
	    -moz-appearance: window;
	    -webkit-appearance: none;
	}

	input[type=text]:focus,
	input[type=email]:focus,
	input[type="number"]:focus, 
	input[type="url"]:focus, 
	input[type="search"]:focus, 
	input[type="tel"]:focus, 
	input[type="password"]:focus, 
	input[type="date"]:focus, 
	input[type="color"]:focus, 
	select:focus,
	textarea:focus {
	    outline: 0;
	    border: 1px solid #4481eb;
	    box-shadow: 0 0 8px 0 #4481eb;
	    transition: all .3s ease;
	}

	input[type=radio] {
		border: 1px solid #4481eb;
	}

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

	.input__arrowdown {
	   width: 100%;
	   background-image: url(../../images/icons/arrows_down.svg);
	   background-repeat: no-repeat;
	   background-size: 21px 21px;
	   background-position: 95% center;
	   background-color: #fff;
	   border-radius: 4px;
	}

	.input__text {
	   width: 100%;
	   background-image: url(../../images/icons/software_pencil.svg);
	   background-repeat: no-repeat;
	   background-size: 17px 17px;
	   background-position: 95% center;
	}

	.input__code {
	   width: 100%;
	   background-image: url(../../images/icons/ecommerce_ticket.svg
	);
	   background-repeat: no-repeat;
	   background-size: 17px 17px;
	   background-position: 95% center;
	}

	.input__email {
	   width: 100%;
	   background-image: url(../../images/icons/basic_mail.svg);
	   background-repeat: no-repeat;
	   background-size: 17px 17px;
	   background-position: 95% center;
	}

	.input__order {
	   width: 100%;
	   background-image: url(../../images/icons/basic_todo_txt.svg);
	   background-repeat: no-repeat;
	   background-size: 17px 17px;
	   background-position: 95% center;
	}

	.input__mobile {
	   width: 100%;
	   background-image: url(../../images/icons/basic_smartphone.svg);
	   background-repeat: no-repeat;
	   background-size: 17px 17px;
	   background-position: 95% center;
	}

	.input__textarea {
	   width: 100%;
	   background-image: url(../../images/icons/basic_message_multiple.svg);
	   background-repeat: no-repeat;
	   background-size: 17px 17px;
	   background-position: 95% 13% ;
	}


	/*----------------------------------------------
        INPUT RADIO CUSTOM
    ----------------------------------------------*/

	/* The container */
	.radio-container {
	    display: block;
	    position: relative;
	    padding-left: 29px;
	    margin: 5px 0;
	    cursor: pointer;
	    font-size: 16px;
	    -webkit-user-select: none;
	       -moz-user-select: none;
	        -ms-user-select: none;
	            user-select: none;
	}

	/* Hide the browser's default radio button */
	.radio-container input {
	    position: absolute;
	    opacity: 0;
	    cursor: pointer;
	}

	/* Create a custom radio button */
	.checkmark {
	    position: absolute;
	    top: 0;
	    left: 0;
	    height: 18px;
	    width: 18px;
	    background-color: #ddd;
	    border-radius: 50%;
	    margin-top: 7px;
	}

	/* On mouse-over, add a grey background color */
	.radio-container:hover input ~ .checkmark {
	    background-color: #ccc;
	}

	/* When the radio button is checked, add a blue background */
	.radio-container input:checked ~ .checkmark {
	    background-color: #4481eb;
	}

	/* Create the indicator (the dot/circle - hidden when not checked) */
	.checkmark:after {
	    content: "";
	    position: absolute;
	    display: none;
	}

	/* Show the indicator (dot/circle) when checked */
	.radio-container input:checked ~ .checkmark:after {
	    display: block;
	}

	/* Style the indicator (dot/circle) */
	.radio-container .checkmark:after {
		top: 4px;
		left: 4px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: white;
	}

/*==================================================*/
	.form-group:hover .timeline-title {
		color: black;
	}
/*==================================================*/


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

	/* Customize the label (the container) */
	.checkbox-container {
	  display: block;
	  position: relative;
	  padding-left: 25px;
	  margin-bottom: 8px;
	  cursor: pointer;
	  font-size: 14px;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}

	/* Hide the browser's default checkbox */
	.checkbox-container input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	}

	/* Create a custom checkbox */
	.box-checkmark {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 18px;
	  width: 18px;
	  background-color: #fff;
	  border: 1px #4481eb solid;

	}

	/* On mouse-over, add a grey background color */
	.checkbox-container:hover input ~ .box-checkmark {
	  background-color: #fff;
	}

	/* When the checkbox is checked, add a blue background */
	.checkbox-container input:checked ~ .box-checkmark {
	  background-color: #4481eb;
	}

	.checkbox-container p {
		margin-bottom: 12px !important;
		color: #343434;
		font-size: 14.5px;
		letter-spacing: 0;
	}

	/* Create the checkmark/indicator (hidden when not checked) */
	.box-checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;
	}

	/* Show the checkmark when checked */
	.checkbox-container input:checked ~ .box-checkmark:after {
	  display: block;
	}

	/* Style the checkmark/indicator */
	.checkbox-container .box-checkmark:after {
	  left: 4.5px;
	  top: 1px;
	  width: 7px;
	  height: 12px;
	  border: solid white;
	  border-width: 0 3px 3px 0;
	  -webkit-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  transform: rotate(45deg);
	}