::placeholder{color:var(--secondary);opacity:1}
:-ms-input-placeholder,
::-ms-input-placeholder{color:var(--secondary)}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:active,
select:-webkit-autofill:focus,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:active,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover{-webkit-text-fill-color:var(--input-color);box-shadow:0 0 0 1000px var(--input-background) inset;transition:background-color 5000s ease-in-out 0s;background:var(--input-background); color: var(--primary)}

input:-webkit-autofill::first-line{font-size:var(--input-fs);font-family:var(--font-family);color:var(--input-color)}
input::-webkit-search-cancel-button{-webkit-appearance:none}
select:focus{outline:0}

input[type=color]{appearance:none;border:none;width:var(--input-height);height:var(--input-height)}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:none}

input[type="date"]::-webkit-calendar-picker-indicator{filter: invert(.4);}

input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Firefox */
/* input[type=number] {-moz-appearance: textfield;} */

.input-field{border-radius: inherit}
.input-icon{display:flex;flex-wrap:wrap;width:100%;border-radius:inherit}

/* Label */
.input-field label{display: inline-block;order:0;font-size:12px;margin-bottom:.4rem;cursor: pointer; color: var(--main);}
.input-field label.inline{display:inline-block;vertical-align:middle;user-select:none;margin-bottom:0;margin-top:-2px}

/* Basic */
.input-file,
.input-field input,
.input-field select,
.input-field textarea,
.input-field .textarea{width:100%;order:3;color:var(--input-color);font-size:var(--input-fs);font-weight: var(--input-fw);height:var(--input-height);border:var(--input-border);padding-left:var(--input-padding);padding-right:var(--input-padding);background-color:var(--input-background);border-radius:inherit;transition: border-color .2s; line-height: 24px;}

/* input */
.input-field input[type=color]{padding:.9rem}
.input-field input[type=range]{padding:0}

/* file */
.input-field label.input-file{position: relative; display: flex; justify-content:space-between; align-items: center; align-content: center; margin-bottom: 0; color: var(--input-color); fill: var(--input-color); overflow: hidden;}

/* .input-file input[type=file]{height: auto;border: 0; padding: 0;}
.input-file input[type=file]::-webkit-file-upload-button{cursor:pointer;border:0;border-radius:inherit;background-color: var(--main); color: var(--main-contrast); padding: .25rem .5rem;transition: background-color .2s;}
.input-file input[type=file]::-webkit-file-upload-button:hover{background-color: var(--main-dark);} */
.input-field input[type=file]{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; opacity: 0;cursor: pointer;}
.input-field span{font-weight: var(--input-fw); font-size: var(--input-fs); overflow: hidden; white-space: nowrap; max-width: calc(100% - 40px);  text-overflow: ellipsis;}
.input-file svg{height: 19px; display: block;}

/* textarea */
.input-field textarea,
.input-field .textarea{height:auto;min-height:92px;max-width:100%;min-width:100%;padding:var(--input-padding)}
.input-field .textarea{overflow:auto}
.input-field .textarea:empty:before{content:attr(placeholder);color:var(--secondary);pointer-events:none;display: block;}

.input-field select{text-overflow: ellipsis; appearance: none; -moz-appearance: none; -webkit-appearance: none; background-image: url(angle-select.svg); padding-right: calc(var(--input-padding) + 13px); background-repeat: no-repeat; background-position:calc(100% - var(--input-padding)) center; background-size: 17px auto;}

.input-field .placeholder{display: none; align-items: center; position: absolute; right: 0; top: 0; height: var(--input-height); padding-right: var(--input-padding); line-height: 15px; color: var(--input-color); font-size: 11px; font-weight: 400; padding-top: 2px;}
.input-field input:placeholder-shown ~ .placeholder, .input-field textarea:placeholder-shown ~ .placeholder{display: flex;}


/* Button */
.input-field button{position: relative; border-radius:20px;min-height:var(--input-height);font-size:calc(var(--input-fs));padding-left:var(--input-padding);padding-right:var(--input-padding); min-width: 184px; line-height: 19px;}

.input-field .loader{position: absolute; border-radius: inherit; top: 0; left: 0; width: 100%; height: 100%; background-color: inherit; padding-top: 1px; opacity: .9;}
.input-field .loader::after{content: ""; border: 3px solid #fff; border-left-color: transparent; border-right-color: transparent; border-radius: 50%; width: 14px; height: 14px;  -webkit-animation: spin_loader .5s linear infinite;  animation: spin_loader .5s linear infinite;}

@keyframes spin_loader{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* input icons */
.input-icon input,
.input-icon select{width:auto; flex: 1; padding-left: 0;border-radius:inherit;border-left: none;border-top-left-radius: 0;border-bottom-left-radius: 0}

.input-icon label.icon{display:flex;justify-content:center;align-items:center;border:var(--input-border);border-right:none;border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0; width: var(--input-height); height:var(--input-height);text-align:center;user-select:none;fill: var(--secondary);}
.input-icon label.icon svg{height: var(--input-fs)}


/* Checkbox Radio e Switch */ 
.input-checkbox,.input-radio,.input-switch{position:relative;display:inline-block;vertical-align:middle;border-radius:inherit}

.input-checkbox input,.input-radio input,.input-switch input{visibility:hidden;opacity:0;position:absolute;width:1px;height:1px;z-index:-1}

.input-checkbox label,.input-radio label,.input-switch label{position:relative;display:flex;justify-content:center;align-items:center;width:20px;height:20px;background-color:var(--light);border:var(--input-border);z-index:2;transition:background-color .2s;cursor:pointer;user-select:none;vertical-align:baseline;border-radius:inherit}

.input-checkbox label::after{content:'';position:absolute;top:2px;left:6px;display:block;transform:rotate(45deg);width:6px;height:12px;box-sizing:border-box;border-bottom:3px solid var(--main-contrast);border-right:3px solid var(--main-contrast);visibility:hidden;opacity:0;transition:visibility .2s,opacity .2s}

/* Radio */
.input-radio label{border-radius:50%;border:4px solid var(--main);background-color:var(--light)}
.input-radio label::after{content:'';display: block; width: 6px; height: 6px; border-radius: 50%; background-color:var(--main); z-index: 1; visibility: hidden; opacity: 0;transition:visibility .2s,opacity .2s}

/* Checked */
.input-checkbox input:checked ~ label{background-color: var(--main)}
.input-checkbox input:checked ~ label::after,.input-radio input:checked ~ label::after{visibility:visible;opacity:1}

/* Interruptor */
.input-switch{width:36px;height:20px;border-radius:2rem;background-color:var(--light);z-index:2;user-select:none}

.input-switch label{justify-content: flex-start;padding-left: 3px;width: 100%; height: 100%;transition:background-color .2s, padding-left .2s}

.input-switch label::after{content:""; background-color:var(--medium);border-radius:50%;display:block;width:12px;height:12px;transition:background-color .2s}

.input-switch input:checked ~ label{background-color:var(--main); padding-left: 19px}
.input-switch input:checked ~ label:after{background-color:var(--main-contrast)}

/* focus */
.input-field input:not([type=range]):focus,
.input-field select:focus,
.input-field textarea:focus{border-color:var(--main)}

.input-icon input:focus ~ label.icon,
.input-icon select:focus ~ label.icon{border-color:var(--main);color:var(--main);fill: var(--main);}

.input-file input[type=file]:focus{box-shadow: none}

/* disable */
.input-field input:disabled,
.input-field select:disabled,
.input-field textarea:disabled{color: var(--main-dark);}