@import 'mdi/css/materialdesignicons.min.css';

form[class*='slyth-'] .sly-input > input { border: 0; outline: 0; width: 100%; padding: 15px 20px; }

.sly-input {  }

form.slyth-transparent .sly-field { padding:12px 0; }
form.slyth-transparent .sly-field .sly-label { text-transform: uppercase; }
form.slyth-transparent .sly-field .sly-input { margin-top: 10px; }
form.slyth-transparent .sly-input > input { background-color: transparent; color:white; border:2px solid rgba(255, 255, 255, 0.5); }
form.slyth-transparent .sly-input > input::placeholder { color:rgba(255, 255, 255, 0.6); }

/* lightgray theme */

form.slyth-lightgay .sly-input { padding:12px; }

form.slyth-lightgay .sly-input > input {
    background-color: #EAECE6;
    color: #333;
    border-radius: 10px;
    width: 100%;
    font-size: 0.9em;
    font-family: inherit;
}
form.slyth-lightgay .sly-checkbox:before { color: #EAECE6; }
form.slyth-lightgay .sly-checkbox.checked:before { color: gray; }

/* specific inputs */

.sly-checkbox { position: relative;}
.sly-checkbox > * { display: inline-block; vertical-align: middle; }
.sly-checkbox > input[type='checkbox'] { display:none; }
.sly-checkbox:before {
    content: "\F12E"; color: #eee; position: absolute; left: -5px; display: inline-block;
    font: normal normal normal 24px/1 "Material Design Icons";
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased; font-size:2em;
}
.sly-checkbox.checked:before { content: "\F132"; color:#e1231f; }
.sly-checkbox > span {
    font-size:0.8em;
    cursor:pointer; margin-left: 50px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}