@charset "utf-8";
/* CSS Document */

	input:optional {
      border-color: gray;
    }
    input:required:valid {
      border-color: forestgreen;
    }
    input:invalid {
      border-color: palevioletred;
    }
	input:required:focus:valid {
      background: url("https://assets.digitalocean.com/labs/icons/hand-thumbs-up.svg") no-repeat 95% 50% forestgreen;
      background-size: 25px;
	  color: white;
    }
    input:focus:invalid {
      background: url("https://assets.digitalocean.com/labs/icons/exclamation-triangle-fill.svg") no-repeat 95% 50% palevioletred;
      background-size: 25px;
	  color: white;
    }
		
	select:optional {
      border-color: gray;
    }
    select:required:valid {
      border-color: forestgreen;
    }
    select:invalid {
      border-color: palevioletred;
    }
	select:required:focus:valid {
      background: url("https://assets.digitalocean.com/labs/icons/hand-thumbs-up.svg") no-repeat 95% 50% forestgreen;
      background-size: 25px;
	  color: white;
    }
    select:focus:invalid {
      background: url("https://assets.digitalocean.com/labs/icons/exclamation-triangle-fill.svg") no-repeat 95% 50% palevioletred;
      background-size: 25px;
	  color: white;
    }

	textarea:optional {
      border-color: gray;
    }
    textarea:required:valid {
      border-color: forestgreen;
    }
    textarea:invalid {
      border-color: palevioletred;
    }
	textarea:required:focus:valid {
      background: url("https://assets.digitalocean.com/labs/icons/hand-thumbs-up.svg") no-repeat 95% 50% forestgreen;
      background-size: 25px;
	  color: white;
    }
    textarea:focus:invalid {
      background: url("https://assets.digitalocean.com/labs/icons/exclamation-triangle-fill.svg") no-repeat 95% 50% palevioletred;
      background-size: 25px;
	  color: white;
    }
	
	input[type="checkbox"]:checked:optional {
      border-color: gray;
    }
    input[type="checkbox"]:required:valid {
      border-color: forestgreen;
    }
    input[type="checkbox"]:invalid {
      border-color: palevioletred;
    }
	input[type="checkbox"]:required:focus:valid {
      background: green;
	  color: white;
    }
    input[type="checkbox"]:focus:invalid {
      background: palevioletred;
	  color: white;
    }

	input[type="radio"]:optional {
      border-color: gray;
    }
    input[type="radio"]:required:valid {
      border-color: forestgreen;
    }
    input[type="radio"]:invalid {
      border-color: palevioletred;
    }
	input[type="radio"]:required:focus:valid {
      background: forestgreen;
	  color: white;
    }
    input[type="radio"]:focus:invalid {
      background: palevioletred;
	  color: white;
    }