forms.css

/* 
* EasUI | A simple & lovely responsive CSS framework.
* ----------------------------------------------------------
* https://github.com/interwebstars/EASUI
* ----------------------------------------------------------
*
* Made by : Interwebstars (https://github.com/interwebstars)
* Licensed under MIT
* 
* forms.css
*/
input,textarea,select{
  appearance:none;
  border:0;
  outline:0;
  background:transparent;
}
input.focus:focus, textarea.focus:focus{box-shadow:0 0 .2em #27ae60;
border:.2em solid #2ecc71}
input[type="text"]:disabled,textarea:disabled{
  border:.2em solid #e74c3c;
  opacity:.6;
  cursor:not-allowed;
}
input[type=text],textarea{
border:.2em solid #2c3e50;
border-radius:.090em;
margin:.2em auto;
padding:.2em; 
}
.input-icon{
border:.2em solid #2c3e50;
border-radius:.090em;
margin:.2em auto;
  display:inline-block;
  overflow:hidden;
  
  height: 1.788em;
  
  width: 217.5px;
  word-spacing: 0px;
  writing-mode: lr-tb;
}
.input-icon i{
  position:absolute;
  z-index:2;
  font-style:normal;
  width:1em;
  margin:.05em -.35em; 
  font-size:1.2em;
  line-height:0;
  padding:.6em;
  color:#2c3e50;
  float:left; 
}

.input-icon input{
  border:0;
  background:transparent;
  padding:0;
  line-height:1.6;
  margin:0;
  margin:auto 1.8em;
}
/*plain*/
input.plain.focus:focus,textarea.plain.focus:focus{
  box-shadow:inset 0 0 .15em #2c3e50;
  background:#2ecc71}
input[type="text"].plain:disabled,textarea.plain:disabled,input[type=button]:disabled{
  background:#e74c3c !important;
}
input[type=text].plain, textarea.plain{
 background: #2c3e50;
border-radius:.090em;   
margin:.2em auto;
padding:.2em;  
  color:#fff;
} 
input.plain::-webkit-input-placeholder{color:#fff} 
/* Radio */
input[type=radio],input[type=checkbox]{
  border:.2em solid #2c3e50;
  padding:.15em;
  border-radius:100%;
  cursor:pointer}
input[type=radio]:disabled,input[type=checkbox]:disabled,input[type=button]:disabled{
  border-color:#e74c3c !important;
  opacity:.6; 
  cursor:not-allowed;
}
input[type=radio]:before,input[type=checkbox]:before{
  content:'';
  display:block;
  padding:.40em .4em;
  border-radius:100%;
  margin:.1em;
  width:.1em;
  height:.1em;
  background:#fff ;
}
input[type=radio]:disabled:before,input[type=checkbox]:disabled:before{
  background:#fff !important}
input[type=radio]:checked:disabled:before,input[type=checkbox]:checked:disabled:before{
  background:#e74c3c !important}

textarea{min-height:5em;}
/*
=== plain ===*/

input[type=radio].plain:checked,
input[type=checkbox].plain:checked{
  background:#2c3e50;
}/**/
input[type=radio]:checked:before,input[type=checkbox]:checked:before{
  background:#2c3e50;}

input[type=checkbox], input[type=checkbox]:before{
border-radius:.09em}



/* SELECT */
select{
padding: 0.5em;
line-height: 1.2em;
width: 100%;
cursor:pointer;
-webkit-appearance: none;
-webkit-border-radius: 0.05em;

border:.2em solid #2c3e50;
background: #FBFBFB url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNDhGMjNEMzIyOUYxMUUzQUVBREJDMjBGMEYwOTMzRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNDhGMjNENDIyOUYxMUUzQUVBREJDMjBGMEYwOTMzRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMxRkY2OUNFMjI5NTExRTNBRUFEQkMyMEYwRjA5MzNGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM0OEYyM0QyMjI5RjExRTNBRUFEQkMyMEYwRjA5MzNGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5zU/0wAAAldJREFUeNrsV72PElEQfwvLNwSNG0I00FHQmBjBRFuI5BqTIzEi/g18FfS2HAUJBlqkQGK1yFU0SKHR0kBlA1R8hQTCNwKHM+gmSkAflz2uuUkmu3nv7fxm3pv5zVtmvV6T6xAJuSa5AT6asLQLJ5PJL08lErJarUgmk3lgMBhuOZ3OjzguJKlOp6MziB/Q6Hg8JqPRiCwWCzKdTuUOh+PMZDKlK5UKh/PL5XKjtPaoF87n843hZrNJYrHYKfh8jurz+fw4jw5dCTAaxme5XDZzHJcVgJVKJV8oFB7ijnQ6HWp7ByUXnDMbjUZfdrtdrTA2m81w7EW73VZixKJnNcuyhOf5x7lc7tH2XKlUsiaTyWcKhUJ84EajwUUikVfD4VC+PYeRptPp57VazSI6cCqVOgHw21BCw10KJbaOx+Onotex1Wr9BNn8VSqVXuxZwlyAiA4MUsPMRvLYJ+CU+Mz1Vw3+Y43owNVqlQwGgw1lHpWraSK+KmAD1jJEvBcZyoqBR0dU4H6/f5JIJJ4CSezMLuBy1uVyfYPXM1G7U71ev2uxWN4KHL2tGo2GLxaL90XnarPZ3AgEAu9UKtVOQg6Hw7zdbq+QyyTN//oxbLfc7Xa/3o7WZrO96fV6OlpbB0XMMAzR6/U//H5/VqvVzoRxmUy2DoVC79Vq9fAA4qIHRtbCqI1G4/dgMPhBGPd6vV88Hs/n3zcTIvpWt1qtze0DtptA79Xg9kJzyEJLvIe3E3QKldYeQ0sIfzZ55OR8Pv8EutUdOPNzPAZBwBm6o7v5hTmW/BRgAKPdnn4/u5SAAAAAAElFTkSuQmCC)no-repeat right center; 
color: #444; 
    -webkit-appearance: searchfield;

}

/* Select plain */
select.plain{
background:#2c3e50 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNDhGMjNENzIyOUYxMUUzQUVBREJDMjBGMEYwOTMzRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNDhGMjNEODIyOUYxMUUzQUVBREJDMjBGMEYwOTMzRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM0OEYyM0Q1MjI5RjExRTNBRUFEQkMyMEYwRjA5MzNGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM0OEYyM0Q2MjI5RjExRTNBRUFEQkMyMEYwRjA5MzNGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+DtLeAAAAAmJJREFUeNpi/P//P8NAACaGAQKjFtMNsBCrkJubG0z/+/ePgZmZmSE6Otrw1atXAnv27NkPEmdkZATLf/r0iTgDQamaGMzFxQW2nIWFhYGDg4MNaGHXo0ePFuro6IiAzAE5BoSJNY9ohWxsbGCDJSQkGAoKCgKBYptBeNKkSXngoAM6iCYWgwwGAV1dXbnXr18vh1n8/fv39W5ubsagEBEVFSXaPJISF9BwltLS0kgREREemBgw2EFi4eLi4hwwx1E1Vf/584chMDDQMiAgwAxdzsHBQTMrK8vv58+f1LdYSkpKpLy8PJqXl5cNI2sAfRofHx+qqKioSvXslJiY6Am0XBCYhT5jNQgI8vLyAoHMLmLMYyS2kggODlYEZieWv3///sNlFhMT07/Fixffo6qPgeA+KysrOMvgAkBHUb/kApVMMIxPDdUtVlJSYuDj4wMXmXQtq4nxMa0sFgPlZaCPcaZGYMIGueoVVS0WEBDwzM7OdgMWElhTEDs7O8vOnTsvUD07KSgoSO3evbtNVVVVGJv8169f//j6+tbv27fvElVLLmAV+GzixInLgJXCH2zy3d3d60+fPn2Z6EgmpT7m5+dnW7t2bQOsZoJhoIWTgVHBS4p5TKQ48OPHj7+A9e/yL1++/ICJ//79+39/f//Kb9++fQaWXNSvJEClFqgF8uLFi5sTJkzYCBNftmzZ8RUrVhwFyXNycjJQPaiB9S249QEMbgYxMTFuUPC+fPlyub29vTSodQKKChAm1jyiUzXIR8hlsp+fnxWwthJet27dZmQzgI5hoGp2Gm3QUwoAAgwAMaIPwuBOgb8AAAAASUVORK5CYII=)no-repeat right center;
color:#fff}


  input[type="range"] {
  -webkit-appearance: none !important;
  width: 100%;
  height: 15px;
  border: 1px solid rgba(0,0,0,.4);
  border-radius: 10px;
  margin:.8em auto;
  float:left;
  transition: all 0.3s ease;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 20px;
  height: 20px;
  background-color: rgba(0,0,0,.6);
  border-radius: 30px;
  box-shadow: 0px 0px 3px rgba(0,0,0,.4);
  transition: all 0.5s ease;
  cursor:pointer; 
}
input[type="range"]::-webkit-slider-thumb:hover {
  background-color:rgba(0,0,0,.8);
}


/*themes*/

input[type=text][data-theme="base"],textarea[data-theme="base"]{
border:.2em solid #1abc9c;
}
.input-icon[data-theme="base"]{
border:.2em solid #1abc9c;

}
.input-icon[data-theme="base"] i{
  color:#1abc9c;
}  
input.plain[data-theme="base"], textarea.plain[data-theme="base"]{
 background: #1abc9c;

}
/* Radio */
/*green*/
input[type=text][data-theme="green"],textarea[data-theme="green"]{
border:.2em solid #2ecc71;
}
.input-icon[data-theme="green"]{
border:.2em solid #2ecc71;

}
.input-icon[data-theme="green"] i{
  color:#2ecc71;
}  
input.plain[data-theme="green"], textarea.plain[data-theme="green"]{
 background: #2ecc71;

}
/* Radio */
input[type=radio][data-theme="green"],input[type=checkbox][data-theme="green"]{
  border:.2em solid #2ecc71;
}
input[type=radio].plain[data-theme="green"]:checked,
input[type=checkbox].plain[data-theme="green"]:checked{
  background:#2ecc71;
}
input[type=radio][data-theme="green"].plain,
input[type=checkbox][data-theme="green"].plain{background:#2ecc71} 

input[type=radio][data-theme="green"].plain:checked,
input[type=checkbox][data-theme="green"].plain:disabled:checked:before{background:#2ecc71}

input[type=radio][data-theme="green"].plain:disabled,
input[type=checkbox][data-theme="green"].plain:disabled{background:#e74c3c} 

input[type=radio][data-theme="green"].plain:disabled:checked,
input[type=checkbox][data-theme="green"].plain:disabled:checked:before{background:#e74c3c}
 

/**/
input[type=radio][data-theme="green"]:before,input[type=checkbox][data-theme="green"]:before{
  background:#fff;}
input[type=radio][data-theme="green"]:checked:before,input[type=checkbox][data-theme="green"]:checked:before{
  background:#2ecc71;}
select[data-theme="green"]{
border:.2em solid #2ecc71;
}
/* Select plain */
select[data-theme="green"].plain{
background-color:#2ecc71;
}
.btn[data-theme="green"]{
background:#2ecc71
}
/*base*/
input[type=text][data-theme="base"],textarea[data-theme="base"]{
border:.2em solid #1abc9c;
}
.input-icon[data-theme="base"]{
border:.2em solid #1abc9c;

}
.input-icon[data-theme="base"] i{
  color:#1abc9c;
}  
input.plain[data-theme="base"], textarea.plain[data-theme="base"]{
 background:#1abc9c;

}
input[type=radio][data-theme="base"],input[type=checkbox][data-theme="base"]{
  border:.2em solid #1abc9c;
}
input[type=radio].plain[data-theme="base"]:checked,
input[type=checkbox].plain[data-theme="base"]:checked{
  background:#1abc9c;
}/**/
input[type=radio][data-theme="base"]:before,input[type=checkbox][data-theme="base"]:before{
  background:#fff;}
input[type=radio][data-theme="base"]:checked:before,input[type=checkbox][data-theme="base"]:checked:before{
  background:#1abc9c;} 
select[data-theme="base"]{
border:.2em solid #1abc9c;
}
input[type=radio][data-theme="base"].plain:disabled,
input[type=checkbox][data-theme="base"].plain:disabled{background:#e74c3c} 

input[type=radio][data-theme="base"].plain:disabled:checked,
input[type=checkbox][data-theme="base"].plain:disabled:checked:before{background:#e74c3c}
/* Select plain */
select[data-theme="base"].plain{
background-color:#1abc9c;
}
.btn[data-theme="base"]{
background:#1abc9c
}
/*blue*/
input[type=text][data-theme="blue"],textarea[data-theme="blue"]{
border:.2em solid #3498db;
}
.input-icon[data-theme="blue"]{
border:.2em solid #3498db;

}
.input-icon[data-theme="blue"] i{
  color:#3498db;
}  
input.plain[data-theme="blue"], textarea.plain[data-theme="blue"]{
 background: #3498db;
 
}
input[type=radio][data-theme="blue"],input[type=checkbox][data-theme="blue"]{
  border:.2em solid #3498db; 
}
input[type=radio].plain[data-theme="blue"]:checked,
input[type=checkbox].plain[data-theme="blue"]:checked{
  background:#3498db;
}
input[type=radio][data-theme="blue"]:before,input[type=checkbox][data-theme="blue"]:before{
  background:#fff;}
input[type=radio][data-theme="blue"]:checked:before,input[type=checkbox][data-theme="blue"]:checked:before{
  background:#3498db;}
input[type=radio][data-theme="blue"].plain:disabled,
input[type=checkbox][data-theme="blue"].plain:disabled{background:#e74c3c} 

input[type=radio][data-theme="blue"].plain:disabled:checked,
input[type=checkbox][data-theme="blue"].plain:disabled:checked:before{background:#e74c3c}
select[data-theme="blue"]{
border:.2em solid #3498db;
}
select[data-theme="blue"].plain{
background-color:#3498db;
}
.btn[data-theme="blue"]{
background:#3498db
}
/*red*/
input[type=text][data-theme="red"],textarea[data-theme="red"]{
border:.2em solid #e74c3c;
}
.input-icon[data-theme="red"]{
border:.2em solid #e74c3c;

}
.input-icon[data-theme="red"] i{
  color:#e74c3c;
}  
input.plain[data-theme="red"], textarea.plain[data-theme="red"]{
 background: #e74c3c;
 
}
input[type=radio][data-theme="red"],input[type=checkbox][data-theme="red"]{
  border:.2em solid #e74c3c; 
}
input[type=radio].plain[data-theme="red"]:checked,
input[type=checkbox].plain[data-theme="red"]:checked{
  background:#e74c3c;
}
input[type=radio][data-theme="red"]:before,input[type=checkbox][data-theme="red"]:before{
  background:#fff;}
input[type=radio][data-theme="red"]:checked:before,input[type=checkbox][data-theme="red"]:checked:before{
  background:#e74c3c;}
input[type=radio][data-theme="red"].plain:disabled,
input[type=checkbox][data-theme="red"].plain:disabled{background:#e74c3c} 

input[type=radio][data-theme="red"].plain:disabled:checked,
input[type=checkbox][data-theme="red"].plain:disabled:checked:before{background:#e74c3c}
select[data-theme="red"]{
border:.2em solid #e74c3c;
}
select[data-theme="red"].plain{
background-color:#e74c3c;
}
.btn[data-theme="red"]{
background:#e74c3c
}
/*orange*/
input[type=text][data-theme="orange"],textarea[data-theme="orange"]{
border:.2em solid #e67e22;
}
.input-icon[data-theme="orange"]{
border:.2em solid #e67e22;

}
.input-icon[data-theme="orange"] i{
  color:#e67e22;
}  
input.plain[data-theme="orange"], textarea.plain[data-theme="orange"]{
 background: #e67e22;
 
}
input[type=radio][data-theme="orange"],input[type=checkbox][data-theme="orange"]{
  border:.2em solid #e67e22; 
}
input[type=radio].plain[data-theme="orange"]:checked,
input[type=checkbox].plain[data-theme="orange"]:checked{
  background:#e67e22;
}
input[type=radio][data-theme="orange"]:before,input[type=checkbox][data-theme="orange"]:before{
  background:#fff;}
input[type=radio][data-theme="orange"]:checked:before,input[type=checkbox][data-theme="orange"]:checked:before{
  background:#e67e22;}
input[type=radio][data-theme="orange"].plain:disabled,
input[type=checkbox][data-theme="orange"].plain:disabled{background:#e74c3c} 

input[type=radio][data-theme="orange"].plain:disabled:checked,
input[type=checkbox][data-theme="orange"].plain:disabled:checked:before{background:#e74c3c}
select[data-theme="orange"]{
border:.2em solid #e67e22;
}
select[data-theme="orange"].plain{
background-color:#e67e22;
}
.btn[data-theme="orange"]{
background:#e67e22
}

/*yellow*/
input[type=text][data-theme="yellow"],textarea[data-theme="yellow"]{
border:.2em solid #f1c40f;
}
.input-icon[data-theme="yellow"]{
border:.2em solid #f1c40f;

}
.input-icon[data-theme="yellow"] i{
  color:#f1c40f;
}  
input.plain[data-theme="yellow"], textarea.plain[data-theme="yellow"]{
 background: #f1c40f;
 
}
input[type=radio][data-theme="yellow"],input[type=checkbox][data-theme="yellow"]{
  border:.2em solid #f1c40f; 
}
input[type=radio].plain[data-theme="yellow"]:checked,
input[type=checkbox].plain[data-theme="yellow"]:checked{
  background:#f1c40f;
}
input[type=radio][data-theme="yellow"]:before,input[type=checkbox][data-theme="yellow"]:before{
  background:#fff;}
input[type=radio][data-theme="yellow"]:checked:before,input[type=checkbox][data-theme="yellow"]:checked:before{
  background:#f1c40f;}
input[type=radio][data-theme="yellow"].plain:disabled,
input[type=checkbox][data-theme="yellow"].plain:disabled{background:#e74c3c} 

input[type=radio][data-theme="yellow"].plain:disabled:checked,
input[type=checkbox][data-theme="yellow"].plain:disabled:checked:before{background:#e74c3c}   
select[data-theme="yellow"]{
border:.2em solid #f1c40f;
}
select[data-theme="yellow"].plain{
background-color:#f1c40f;
}
.btn[data-theme="yellow"]{
background:#f1c40f
}
/**/
/*purple*/
input[type=text][data-theme="purple"],textarea[data-theme="purple"]{
border:.2em solid #9b59b6;
}
.input-icon[data-theme="purple"]{
border:.2em solid #9b59b6;

}
.input-icon[data-theme="purple"] i{
  color:#9b59b6;
}  
input.plain[data-theme="purple"], textarea.plain[data-theme="purple"]{
 background: #9b59b6;
 
}
input[type=radio][data-theme="purple"],input[type=checkbox][data-theme="purple"]{
  border:.2em solid #9b59b6; 
}
input[type=radio].plain[data-theme="purple"]:checked,
input[type=checkbox].plain[data-theme="purple"]:checked{
  background:#9b59b6;
}
input[type=radio][data-theme="purple"]:before,input[type=checkbox][data-theme="purple"]:before{
  background:#fff;}
input[type=radio][data-theme="purple"]:checked:before,input[type=checkbox][data-theme="purple"]:checked:before{
  background:#9b59b6;}
input[type=radio][data-theme="purple"].plain:disabled,
input[type=checkbox][data-theme="purple"].plain:disabled{background:#e74c3c} 

input[type=radio][data-theme="purple"].plain:disabled:checked,
input[type=checkbox][data-theme="purple"].plain:disabled:checked:before{background:#e74c3c}   
select[data-theme="purple"]{
border:.2em solid #9b59b6;
}
select[data-theme="purple"].plain{
background-color:#9b59b6;
}
.btn[data-theme="purple"]{
background:#9b59b6
}
/*black*/
input[type=text][data-theme="black"],textarea[data-theme="black"]{
border:.2em solid #34495e;
}
.input-icon[data-theme="black"]{
border:.2em solid #34495e;

}
.input-icon[data-theme="black"] i{
  color:#34495e;
}  
input.plain[data-theme="black"], textarea.plain[data-theme="black"]{
 background: #34495e;
 
}
input[type=radio][data-theme="black"],input[type=checkbox][data-theme="black"]{
  border:.2em solid #34495e; 
}
input[type=radio].plain[data-theme="black"]:checked,
input[type=checkbox].plain[data-theme="black"]:checked{
  background:#34495e;
}
input[type=radio][data-theme="black"]:before,input[type=checkbox][data-theme="black"]:before{
  background:#fff;}
input[type=radio][data-theme="black"]:checked:before,input[type=checkbox][data-theme="black"]:checked:before{
  background:#34495e;}
input[type=radio][data-theme="black"].plain:disabled,
input[type=checkbox][data-theme="black"].plain:disabled{background:#e74c3c} 

input[type=radio][data-theme="black"].plain:disabled:checked,
input[type=checkbox][data-theme="black"].plain:disabled:checked:before{background:#e74c3c}   
select[data-theme="black"]{
border:.2em solid #34495e;
}
select[data-theme="black"].plain{
background-color:#34495e;
}
.btn[data-theme="black"]{
background:#34495e
}

/*grey*/
input[type=text][data-theme="grey"],textarea[data-theme="grey"]{
border:.2em solid #95a5a6;
}
.input-icon[data-theme="grey"]{
border:.2em solid #95a5a6;

}
.input-icon[data-theme="grey"] i{
  color:#95a5a6;
}  
input.plain[data-theme="grey"], textarea.plain[data-theme="grey"]{
 background: #95a5a6;
 
}
input[type=radio][data-theme="grey"],input[type=checkbox][data-theme="grey"]{
  border:.2em solid #95a5a6; 
}
input[type=radio].plain[data-theme="grey"]:checked,
input[type=checkbox].plain[data-theme="grey"]:checked{
  background:#95a5a6;
}
input[type=radio][data-theme="grey"]:before,input[type=checkbox][data-theme="grey"]:before{
  background:#fff;}
input[type=radio][data-theme="grey"]:checked:before,input[type=checkbox][data-theme="grey"]:checked:before{
  background:#95a5a6;}
input[type=radio][data-theme="grey"].plain:disabled,
input[type=checkbox][data-theme="grey"].plain:disabled{background:#e74c3c} 

input[type=radio][data-theme="grey"].plain:disabled:checked,
input[type=checkbox][data-theme="grey"].plain:disabled:checked:before{background:#e74c3c}   
select[data-theme="grey"]{
border:.2em solid #95a5a6;
} 
select[data-theme="grey"].plain{
background-color:#95a5a6;
}
.btn[data-theme="grey"]{
background:#95a5a6
}
/*light*/
input[type=text][data-theme="light"],textarea[data-theme="light"]{
border:.2em solid #bdc3c7;
}
.input-icon[data-theme="light"]{
border:.2em solid #bdc3c7;

}
.input-icon[data-theme="light"] i{
  color:#bdc3c7;
}  
input.plain[data-theme="light"], textarea.plain[data-theme="light"]{
 background: #bdc3c7;
 
}
input[type=radio][data-theme="light"],input[type=checkbox][data-theme="light"]{
  border:.2em solid #bdc3c7; 
}
input[type=radio].plain[data-theme="light"]:checked,
input[type=checkbox].plain[data-theme="light"]:checked{
  background:#bdc3c7;
}
input[type=radio][data-theme="light"]:before,input[type=checkbox][data-theme="light"]:before{
  background:#fff;}
input[type=radio][data-theme="light"]:checked:before,input[type=checkbox][data-theme="light"]:checked:before{
  background:#bdc3c7;}
input[type=radio][data-theme="light"].plain:disabled,
input[type=checkbox][data-theme="light"].plain:disabled{background:#e74c3c} 

input[type=radio][data-theme="light"].plain:disabled:checked,
input[type=checkbox][data-theme="light"].plain:disabled:checked:before{background:#e74c3c}  
select[data-theme="light"]{
border:.2em solid #bdc3c7;
}
select[data-theme="light"].plain{
background-color:#bdc3c7; 
}
.btn[data-theme="light"]{
background:#bdc3c7
}
/**/






input[type="range"][data-theme="base"]{
    background-color: #16a085;    
  border:1px solid #1abc9c;
} 

input[type="range"][data-theme="base"]::-webkit-slider-thumb {
  background-color: #1abc9c;
}

/*Blue */
input[type="range"][data-theme="blue"]{
    background-color: #2980b9; 
  border:1px solid #3498db;
}

input[type="range"][data-theme="blue"]::-webkit-slider-thumb {
  background-color: #3498db;
}

/* Red */
input[type="range"][data-theme="red"]{
    background-color: #c0392b;   
  border:1px solid #e74c3c;
}

input[type="range"][data-theme="red"]::-webkit-slider-thumb {
  background-color: #e74c3c;
}
/* Green */
input[type="range"][data-theme="green"]{
    background-color: #27ae60;   
  border:1px solid #2ecc71;
}

input[type="range"][data-theme="green"]::-webkit-slider-thumb {
  background-color: #2ecc71;
}

/* Orange */
input[type="range"][data-theme="orange"]{
    background-color: #d35400;   
  border:1px solid #e67e22;
}

input[type="range"][data-theme="orange"]::-webkit-slider-thumb {
  background-color: #e67e22; 
}

/* Yellow */
input[type="range"][data-theme="yellow"]{
    background-color: #f39c12;   
  border:1px solid #f1c40f;
}

input[type="range"][data-theme="yellow"]::-webkit-slider-thumb {
  background-color: #f1c40f; 
}
/* Purple */
input[type="range"][data-theme="purple"]{
    background-color:#8e44ad;   
  border:1px solid #9b59b6;
}

input[type="range"][data-theme="purple"]::-webkit-slider-thumb {
  background-color: #9b59b6; 
}
/* Black */
input[type="range"][data-theme="black"]{
    background-color: #2c3e50;   
  border:1px solid #34495e;
}

input[type="range"][data-theme="black"]::-webkit-slider-thumb {
  background-color: #34495e; 
}

/* Grey */
input[type="range"][data-theme="grey"]{
    background-color:#7f8c8d;   
  border:1px solid #95a5a6;
}

input[type="range"][data-theme="grey"]::-webkit-slider-thumb {
  background-color: #95a5a6; 
}

/* Light */
input[type="range"][data-theme="light"]{ 
    background-color:#bdc3c7;   
  border:1px solid #ecf0f1;
}

input[type="range"][data-theme="light"]::-webkit-slider-thumb {
  background-color: #ecf0f1; 
}