HTML
xxxxxxxxxx1
<!---->2
<section draggable="false" class="overflow-hidden pt-0" data-v-271253ee="">3
<section class="background-radial-gradient overflow-hidden">4
<style>5
.background-radial-gradient {6
background-color: hsl(218, 41%, 15%);7
background-image: radial-gradient(650px circle at 0% 0%, hsl(218, 41%, 35%) 15%, hsl(218, 41%, 30%) 35%, hsl(218, 41%, 20%) 75%, hsl(218, 41%, 19%) 80%, transparent 100%), radial-gradient(1250px circle at 100% 100%, hsl(218, 41%, 45%) 15%, hsl(218, 41%, 30%) 35%, hsl(218, 41%, 20%) 75%, hsl(218, 41%, 19%) 80%, transparent 100%);8
}9
10
.bg-glass {11
background-color: hsla(0, 0%, 100%, 0.9) !important;12
backdrop-filter: saturate(200%) blur(25px);13
}14
</style>15
<div class="container px-4 py-5 px-md-5 text-center text-lg-start">16
<div class="row gx-lg-5 align-items-center mb-5">17
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5 mb-lg-0" style="z-index: 10">18
<h1 class="my-5 display-3 fw-bold ls-tight" style="color: hsl(218, 81%, 95%)"> <span>The19
best offer</span> <br> <span style="color: hsl(218, 81%, 75%)">for your20
business</span> </h1>21
<p class="mb-4 opacity-70" style="color: hsl(218, 81%, 85%)">Lorem ipsum dolor, sit amet22
consectetur adipisicing elit. Temporibus, expedita iusto veniam atque, magni tempora23
mollitia dolorum consequatur nulla, neque debitis eos reprehenderit quasi ab ipsum24
nisi dolorem modi. Quos?</p>25
</div>26
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5 mb-lg-0">27
<div class="card bg-glass">28
<form class="shadow-custom card"29
action="signup.php"30
method="POST"31
>32
<div class="card-body">33
<div class="text-black-50 p-5">34
<!-- Name input -->35
<div class="form-outline md-form md-bg">36
<div class="">37
<i class="fa fa-user prefix my-fa-user-icon"></i>38
<input type="text" id="form15" class="form-control" />39
<label40
data-error="Napaka!"41
data-success="Pravilno"42
class="form-label"43
for="form12"44
>Ime: <span class="text-danger pr-1">* </span></label45
>46
</div>47
</div>48
<!-- Email input -->49
<div class="form-outline md-form md-bg">50
<div class="">51
<i class="fa fa-envelope prefix my-fa-envelope-icon"></i>52
<input type="email" id="form13" class="form-control" />53
<label54
data-error="Napaka!"55
data-success="Pravilno"56
class="form-label"57
for="form12"58
>Email: <span class="text-danger pr-1">* </span></label59
>60
</div>61
</div>62
<p class="grey-text text-end">63
<span class="text-danger pr-1">* </span>=Zahtevano64
</p>65
<!-- Recaptcha -->66
<div67
class="g-recaptcha mt-4"68
data-sitekey="6LesYV8UAAAAAFemD2towAKqCciQfNSTwsq9wcvY"69
></div>70
<!-- Checkbox -->71
<div class="form-check d-flex justify-content-center mt-5">72
<input73
class="form-check-input"74
type="checkbox"75
value=""76
id="form5Example4"77
unchecked78
/>79
<label class="form-check-label" for="form5Example4">80
Se strinjam s splošnimi pogoji poslovanja in politiko81
varovanja osebnih podatkov!82
</label>83
</div>84
<!-- Submit button -->85
<div class="d-flex justify-content-center">86
<button type="submit" class="btn btn-primary mx-auto mt-5">87
Pošlji <i class="fa-solid fa-paper-plane ps-1"></i>88
</button>89
</div>90
</div>91
</form>92
</div>93
</div>94
</div>95
</div>96
</div>97
</section>98
</section>99
<!---->CSS
xxxxxxxxxx1
.form-label {2
margin-left: 30px !important;3
}4
textarea {5
background-color: transparent !important;6
}7
input{8
background-color: transparent !important;9
}10
.card .md-form label {11
font-weight: 300; }12
13
.md-form.input-group label {14
top: 0;15
margin-bottom: 0; }16
17
.md-form.input-group .input-group-text {18
background-color: #e0e0e0; }19
.md-form.input-group .input-group-text.md-addon {20
font-weight: 500;21
background-color: transparent;22
border: none; }23
24
.md-form.input-group .form-control {25
padding: 0.375rem 0.75rem;26
margin: 0; }27
28
.md-form {29
position: relative;30
margin-top: 1.5rem;31
margin-bottom: 1.5rem; }32
.md-form input:not([type]),33
.md-form input[type="text"]:not(.browser-default),34
.md-form input[type="password"]:not(.browser-default),35
.md-form input[type="email"]:not(.browser-default),36
.md-form input[type="url"]:not(.browser-default),37
.md-form input[type="time"]:not(.browser-default),38
.md-form input[type="date"]:not(.browser-default),39
.md-form input[type="datetime"]:not(.browser-default),40
.md-form input[type="datetime-local"]:not(.browser-default),41
.md-form input[type="tel"]:not(.browser-default),42
.md-form input[type="number"]:not(.browser-default),43
.md-form input[type="search"]:not(.browser-default),44
.md-form input[type="phone"]:not(.browser-default),45
.md-form input[type="search-md"],46
.md-form textarea.md-textarea {47
box-sizing: content-box;48
background-color: transparent;49
border: none;50
border-bottom: 1px solid #ced4da;51
border-radius: 0;52
outline: none;53
box-shadow: none;54
-webkit-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;55
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }56
.md-form input:not([type]):focus:not([readonly]),57
.md-form input[type="text"]:not(.browser-default):focus:not([readonly]),58
.md-form input[type="password"]:not(.browser-default):focus:not([readonly]),59
.md-form input[type="email"]:not(.browser-default):focus:not([readonly]),60
.md-form input[type="url"]:not(.browser-default):focus:not([readonly]),61
.md-form input[type="time"]:not(.browser-default):focus:not([readonly]),62
.md-form input[type="date"]:not(.browser-default):focus:not([readonly]),63
.md-form input[type="datetime"]:not(.browser-default):focus:not([readonly]),64
.md-form input[type="datetime-local"]:not(.browser-default):focus:not([readonly]),65
.md-form input[type="tel"]:not(.browser-default):focus:not([readonly]),66
.md-form input[type="number"]:not(.browser-default):focus:not([readonly]),67
.md-form input[type="search"]:not(.browser-default):focus:not([readonly]),68
.md-form input[type="phone"]:not(.browser-default):focus:not([readonly]),69
.md-form input[type="search-md"]:focus:not([readonly]),70
.md-form textarea.md-textarea:focus:not([readonly]) {71
border-bottom: 1px solid #4285f4;72
box-shadow: 0 1px 0 0 #4285f4; }73
.md-form input:not([type]):focus:not([readonly]) + label,74
.md-form input[type="text"]:not(.browser-default):focus:not([readonly]) + label,75
.md-form input[type="password"]:not(.browser-default):focus:not([readonly]) + label,76
.md-form input[type="email"]:not(.browser-default):focus:not([readonly]) + label,77
.md-form input[type="url"]:not(.browser-default):focus:not([readonly]) + label,78
.md-form input[type="time"]:not(.browser-default):focus:not([readonly]) + label,79
.md-form input[type="date"]:not(.browser-default):focus:not([readonly]) + label,80
.md-form input[type="datetime"]:not(.browser-default):focus:not([readonly]) + label,81
.md-form input[type="datetime-local"]:not(.browser-default):focus:not([readonly]) + label,82
.md-form input[type="tel"]:not(.browser-default):focus:not([readonly]) + label,83
.md-form input[type="number"]:not(.browser-default):focus:not([readonly]) + label,84
.md-form input[type="search"]:not(.browser-default):focus:not([readonly]) + label,85
.md-form input[type="phone"]:not(.browser-default):focus:not([readonly]) + label,86
.md-form input[type="search-md"]:focus:not([readonly]) + label,87
.md-form textarea.md-textarea:focus:not([readonly]) + label {88
color: #4285f4; }89
.md-form input:not([type]) + label::after,90
.md-form input[type="text"]:not(.browser-default) + label::after,91
.md-form input[type="password"]:not(.browser-default) + label::after,92
.md-form input[type="email"]:not(.browser-default) + label::after,93
.md-form input[type="url"]:not(.browser-default) + label::after,94
.md-form input[type="time"]:not(.browser-default) + label::after,95
.md-form input[type="date"]:not(.browser-default) + label::after,96
.md-form input[type="datetime"]:not(.browser-default) + label::after,97
.md-form input[type="datetime-local"]:not(.browser-default) + label::after,98
.md-form input[type="tel"]:not(.browser-default) + label::after,99
.md-form input[type="number"]:not(.browser-default) + label::after,100
.md-form input[type="search"]:not(.browser-default) + label::after,101
.md-form input[type="phone"]:not(.browser-default) + label::after,102
.md-form input[type="search-md"] + label::after,103
.md-form textarea.md-textarea + label::after {104
position: absolute;105
top: 65px;106
display: block;107
content: "";108
opacity: 0;109
-webkit-transition: 0.2s opacity ease-out, 0.2s color ease-out;110
transition: 0.2s opacity ease-out, 0.2s color ease-out; }111
.md-form input:not([type]).valid, .md-form input:not([type]):focus.valid,112
.md-form input[type="text"]:not(.browser-default).valid,113
.md-form input[type="text"]:not(.browser-default):focus.valid,114
.md-form input[type="password"]:not(.browser-default).valid,115
.md-form input[type="password"]:not(.browser-default):focus.valid,116
.md-form input[type="email"]:not(.browser-default).valid,117
.md-form input[type="email"]:not(.browser-default):focus.valid,118
.md-form input[type="url"]:not(.browser-default).valid,119
.md-form input[type="url"]:not(.browser-default):focus.valid,120
.md-form input[type="time"]:not(.browser-default).valid,121
.md-form input[type="time"]:not(.browser-default):focus.valid,122
.md-form input[type="date"]:not(.browser-default).valid,123
.md-form input[type="date"]:not(.browser-default):focus.valid,124
.md-form input[type="datetime"]:not(.browser-default).valid,125
.md-form input[type="datetime"]:not(.browser-default):focus.valid,126
.md-form input[type="datetime-local"]:not(.browser-default).valid,127
.md-form input[type="datetime-local"]:not(.browser-default):focus.valid,128
.md-form input[type="tel"]:not(.browser-default).valid,129
.md-form input[type="tel"]:not(.browser-default):focus.valid,130
.md-form input[type="number"]:not(.browser-default).valid,131
.md-form input[type="number"]:not(.browser-default):focus.valid,132
.md-form input[type="search"]:not(.browser-default).valid,133
.md-form input[type="search"]:not(.browser-default):focus.valid,134
.md-form input[type="phone"]:not(.browser-default).valid,135
.md-form input[type="phone"]:not(.browser-default):focus.valid,136
.md-form input[type="search-md"].valid,137
.md-form input[type="search-md"]:focus.valid,138
.md-form textarea.md-textarea.valid,139
.md-form textarea.md-textarea:focus.valid {140
border-bottom: 1px solid #00c851;141
box-shadow: 0 1px 0 0 #00c851; }142
.md-form input:not([type]).valid + label:after,143
.md-form input:not([type]):focus.valid + label:after,144
.md-form input[type="text"]:not(.browser-default).valid + label:after,145
.md-form input[type="text"]:not(.browser-default):focus.valid + label:after,146
.md-form input[type="password"]:not(.browser-default).valid + label:after,147
.md-form input[type="password"]:not(.browser-default):focus.valid + label:after,148
.md-form input[type="email"]:not(.browser-default).valid + label:after,149
.md-form input[type="email"]:not(.browser-default):focus.valid + label:after,150
.md-form input[type="url"]:not(.browser-default).valid + label:after,151
.md-form input[type="url"]:not(.browser-default):focus.valid + label:after,152
.md-form input[type="time"]:not(.browser-default).valid + label:after,153
.md-form input[type="time"]:not(.browser-default):focus.valid + label:after,154
.md-form input[type="date"]:not(.browser-default).valid + label:after,155
.md-form input[type="date"]:not(.browser-default):focus.valid + label:after,156
.md-form input[type="datetime"]:not(.browser-default).valid + label:after,157
.md-form input[type="datetime"]:not(.browser-default):focus.valid + label:after,158
.md-form input[type="datetime-local"]:not(.browser-default).valid + label:after,159
.md-form input[type="datetime-local"]:not(.browser-default):focus.valid + label:after,160
.md-form input[type="tel"]:not(.browser-default).valid + label:after,161
.md-form input[type="tel"]:not(.browser-default):focus.valid + label:after,162
.md-form input[type="number"]:not(.browser-default).valid + label:after,163
.md-form input[type="number"]:not(.browser-default):focus.valid + label:after,164
.md-form input[type="search"]:not(.browser-default).valid + label:after,165
.md-form input[type="search"]:not(.browser-default):focus.valid + label:after,166
.md-form input[type="phone"]:not(.browser-default).valid + label:after,167
.md-form input[type="phone"]:not(.browser-default):focus.valid + label:after,168
.md-form input[type="search-md"].valid + label:after,169
.md-form input[type="search-md"]:focus.valid + label:after,170
.md-form textarea.md-textarea.valid + label:after,171
.md-form textarea.md-textarea:focus.valid + label:after {172
color: #00c851;173
content: attr(data-success);174
opacity: 1; }175
.md-form input:not([type]).invalid, .md-form input:not([type]):focus.invalid,176
.md-form input[type="text"]:not(.browser-default).invalid,177
.md-form input[type="text"]:not(.browser-default):focus.invalid,178
.md-form input[type="password"]:not(.browser-default).invalid,179
.md-form input[type="password"]:not(.browser-default):focus.invalid,180
.md-form input[type="email"]:not(.browser-default).invalid,181
.md-form input[type="email"]:not(.browser-default):focus.invalid,182
.md-form input[type="url"]:not(.browser-default).invalid,183
.md-form input[type="url"]:not(.browser-default):focus.invalid,184
.md-form input[type="time"]:not(.browser-default).invalid,185
.md-form input[type="time"]:not(.browser-default):focus.invalid,186
.md-form input[type="date"]:not(.browser-default).invalid,187
.md-form input[type="date"]:not(.browser-default):focus.invalid,188
.md-form input[type="datetime"]:not(.browser-default).invalid,189
.md-form input[type="datetime"]:not(.browser-default):focus.invalid,190
.md-form input[type="datetime-local"]:not(.browser-default).invalid,191
.md-form input[type="datetime-local"]:not(.browser-default):focus.invalid,192
.md-form input[type="tel"]:not(.browser-default).invalid,193
.md-form input[type="tel"]:not(.browser-default):focus.invalid,194
.md-form input[type="number"]:not(.browser-default).invalid,195
.md-form input[type="number"]:not(.browser-default):focus.invalid,196
.md-form input[type="search"]:not(.browser-default).invalid,197
.md-form input[type="search"]:not(.browser-default):focus.invalid,198
.md-form input[type="phone"]:not(.browser-default).invalid,199
.md-form input[type="phone"]:not(.browser-default):focus.invalid,200
.md-form input[type="search-md"].invalid,201
.md-form input[type="search-md"]:focus.invalid,202
.md-form textarea.md-textarea.invalid,203
.md-form textarea.md-textarea:focus.invalid {204
border-bottom: 1px solid #f44336;205
box-shadow: 0 1px 0 0 #f44336; }206
.md-form input:not([type]).invalid + label:after,207
.md-form input:not([type]):focus.invalid + label:after,208
.md-form input[type="text"]:not(.browser-default).invalid + label:after,209
.md-form input[type="text"]:not(.browser-default):focus.invalid + label:after,210
.md-form input[type="password"]:not(.browser-default).invalid + label:after,211
.md-form input[type="password"]:not(.browser-default):focus.invalid + label:after,212
.md-form input[type="email"]:not(.browser-default).invalid + label:after,213
.md-form input[type="email"]:not(.browser-default):focus.invalid + label:after,214
.md-form input[type="url"]:not(.browser-default).invalid + label:after,215
.md-form input[type="url"]:not(.browser-default):focus.invalid + label:after,216
.md-form input[type="time"]:not(.browser-default).invalid + label:after,217
.md-form input[type="time"]:not(.browser-default):focus.invalid + label:after,218
.md-form input[type="date"]:not(.browser-default).invalid + label:after,219
.md-form input[type="date"]:not(.browser-default):focus.invalid + label:after,220
.md-form input[type="datetime"]:not(.browser-default).invalid + label:after,221
.md-form input[type="datetime"]:not(.browser-default):focus.invalid + label:after,222
.md-form input[type="datetime-local"]:not(.browser-default).invalid + label:after,223
.md-form input[type="datetime-local"]:not(.browser-default):focus.invalid + label:after,224
.md-form input[type="tel"]:not(.browser-default).invalid + label:after,225
.md-form input[type="tel"]:not(.browser-default):focus.invalid + label:after,226
.md-form input[type="number"]:not(.browser-default).invalid + label:after,227
.md-form input[type="number"]:not(.browser-default):focus.invalid + label:after,228
.md-form input[type="search"]:not(.browser-default).invalid + label:after,229
.md-form input[type="search"]:not(.browser-default):focus.invalid + label:after,230
.md-form input[type="phone"]:not(.browser-default).invalid + label:after,231
.md-form input[type="phone"]:not(.browser-default):focus.invalid + label:after,232
.md-form input[type="search-md"].invalid + label:after,233
.md-form input[type="search-md"]:focus.invalid + label:after,234
.md-form textarea.md-textarea.invalid + label:after,235
.md-form textarea.md-textarea:focus.invalid + label:after {236
color: #f44336;237
content: attr(data-error);238
opacity: 1; }239
.md-form input:not([type]).form-control.valid + label:after,240
.md-form input:not([type]).form-control:focus.valid + label:after,241
.md-form input[type="text"]:not(.browser-default).form-control.valid + label:after,242
.md-form input[type="text"]:not(.browser-default).form-control:focus.valid + label:after,243
.md-form input[type="password"]:not(.browser-default).form-control.valid + label:after,244
.md-form input[type="password"]:not(.browser-default).form-control:focus.valid + label:after,245
.md-form input[type="email"]:not(.browser-default).form-control.valid + label:after,246
.md-form input[type="email"]:not(.browser-default).form-control:focus.valid + label:after,247
.md-form input[type="url"]:not(.browser-default).form-control.valid + label:after,248
.md-form input[type="url"]:not(.browser-default).form-control:focus.valid + label:after,249
.md-form input[type="time"]:not(.browser-default).form-control.valid + label:after,250
.md-form input[type="time"]:not(.browser-default).form-control:focus.valid + label:after,251
.md-form input[type="date"]:not(.browser-default).form-control.valid + label:after,252
.md-form input[type="date"]:not(.browser-default).form-control:focus.valid + label:after,253
.md-form input[type="datetime"]:not(.browser-default).form-control.valid + label:after,254
.md-form input[type="datetime"]:not(.browser-default).form-control:focus.valid + label:after,255
.md-form input[type="datetime-local"]:not(.browser-default).form-control.valid + label:after,256
.md-form input[type="datetime-local"]:not(.browser-default).form-control:focus.valid + label:after,257
.md-form input[type="tel"]:not(.browser-default).form-control.valid + label:after,258
.md-form input[type="tel"]:not(.browser-default).form-control:focus.valid + label:after,259
.md-form input[type="number"]:not(.browser-default).form-control.valid + label:after,260
.md-form input[type="number"]:not(.browser-default).form-control:focus.valid + label:after,261
.md-form input[type="search"]:not(.browser-default).form-control.valid + label:after,262
.md-form input[type="search"]:not(.browser-default).form-control:focus.valid + label:after,263
.md-form input[type="phone"]:not(.browser-default).form-control.valid + label:after,264
.md-form input[type="phone"]:not(.browser-default).form-control:focus.valid + label:after,265
.md-form input[type="search-md"].form-control.valid + label:after,266
.md-form input[type="search-md"].form-control:focus.valid + label:after,267
.md-form textarea.md-textarea.form-control.valid + label:after,268
.md-form textarea.md-textarea.form-control:focus.valid + label:after {269
top: 4.1rem; }270
.md-form input:not([type]).form-control.invalid + label:after,271
.md-form input:not([type]).form-control:focus.invalid + label:after,272
.md-form input[type="text"]:not(.browser-default).form-control.invalid + label:after,273
.md-form input[type="text"]:not(.browser-default).form-control:focus.invalid + label:after,274
.md-form input[type="password"]:not(.browser-default).form-control.invalid + label:after,275
.md-form input[type="password"]:not(.browser-default).form-control:focus.invalid + label:after,276
.md-form input[type="email"]:not(.browser-default).form-control.invalid + label:after,277
.md-form input[type="email"]:not(.browser-default).form-control:focus.invalid + label:after,278
.md-form input[type="url"]:not(.browser-default).form-control.invalid + label:after,279
.md-form input[type="url"]:not(.browser-default).form-control:focus.invalid + label:after,280
.md-form input[type="time"]:not(.browser-default).form-control.invalid + label:after,281
.md-form input[type="time"]:not(.browser-default).form-control:focus.invalid + label:after,282
.md-form input[type="date"]:not(.browser-default).form-control.invalid + label:after,283
.md-form input[type="date"]:not(.browser-default).form-control:focus.invalid + label:after,284
.md-form input[type="datetime"]:not(.browser-default).form-control.invalid + label:after,285
.md-form input[type="datetime"]:not(.browser-default).form-control:focus.invalid + label:after,286
.md-form input[type="datetime-local"]:not(.browser-default).form-control.invalid + label:after,287
.md-form input[type="datetime-local"]:not(.browser-default).form-control:focus.invalid + label:after,288
.md-form input[type="tel"]:not(.browser-default).form-control.invalid + label:after,289
.md-form input[type="tel"]:not(.browser-default).form-control:focus.invalid + label:after,290
.md-form input[type="number"]:not(.browser-default).form-control.invalid + label:after,291
.md-form input[type="number"]:not(.browser-default).form-control:focus.invalid + label:after,292
.md-form input[type="search"]:not(.browser-default).form-control.invalid + label:after,293
.md-form input[type="search"]:not(.browser-default).form-control:focus.invalid + label:after,294
.md-form input[type="phone"]:not(.browser-default).form-control.invalid + label:after,295
.md-form input[type="phone"]:not(.browser-default).form-control:focus.invalid + label:after,296
.md-form input[type="search-md"].form-control.invalid + label:after,297
.md-form input[type="search-md"].form-control:focus.invalid + label:after,298
.md-form textarea.md-textarea.form-control.invalid + label:after,299
.md-form textarea.md-textarea.form-control:focus.invalid + label:after {300
top: 4rem; }301
.md-form > input[type="date"]:not(.browser-default) {302
color: transparent; }303
.md-form > input[type="date"]:not(.browser-default) + label {304
-webkit-transform-origin: 0 0;305
transform-origin: 0 0; }306
.md-form > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,307
.md-form > input[type="time"]:not(.browser-default) + label {308
font-size: .8rem;309
-webkit-transform: translateY(-25px);310
transform: translateY(-25px);311
-webkit-transform-origin: 0 0;312
transform-origin: 0 0; }313
.md-form .was-validated input[type="text"]:valid + label {314
color: #00c851 !important; }315
.md-form .was-validated input[type="text"]:invalid + label {316
color: #f44336 !important; }317
.md-form .was-validated .form-control:valid:focus {318
box-shadow: 0 1px 0 0 #00c851 !important; }319
.md-form .was-validated .form-control:valid {320
border-color: #00c851 !important; }321
.md-form .was-validated .form-control:invalid:focus {322
box-shadow: 0 1px 0 0 #f44336 !important; }323
.md-form .was-validated .form-control:invalid {324
border-color: #f44336 !important; }325
.md-form .form-control {326
height: auto;327
padding: 0.6rem 0 0.4rem 0;328
margin: 0 0 0.5rem 0;329
background-color: transparent;330
border-radius: 0; }331
.md-form .form-control:focus {332
box-shadow: none; }333
.md-form .form-control:disabled, .md-form .form-control[readonly] {334
background-color: transparent;335
border-bottom: 1px solid #bdbdbd; }336
.md-form .form-control.is-valid {337
border-color: #00c851; }338
.md-form .form-control.is-valid:focus {339
border-color: #00c851 !important;340
box-shadow: 0 1px 0 0 #00c851 !important; }341
.md-form .form-control.is-invalid {342
border-color: #f44336; }343
.md-form .form-control.is-invalid:focus {344
border-color: #f44336 !important;345
box-shadow: 0 1px 0 0 #f44336 !important; }346
.md-form .form-control.is-valid, .md-form .form-control.is-invalid {347
background-position: center right !important; }348
.md-form .validate {349
margin-bottom: 2.5rem; }350
.md-form label {351
font-size: 1rem; }352
.md-form label.active {353
font-size: 1rem; }354
.md-form .prefix {355
top: 0.25rem;356
font-size: 1.75rem; }357
.md-form .prefix ~ input,358
.md-form .prefix ~ textarea {359
width: calc(100% - 2.5rem);360
margin-left: 2.5rem; }361
.md-form .prefix ~ label {362
margin-left: 2.5rem; }363
.md-form .prefix ~ .form-text {364
margin-left: 2.6rem; }365
.md-form label {366
position: absolute;367
top: 0;368
left: 0;369
font-size: 1rem;370
color: #757575;371
cursor: text;372
-webkit-transition: color .2s ease-out, -webkit-transform .2s ease-out;373
transition: color .2s ease-out, -webkit-transform .2s ease-out;374
transition: transform .2s ease-out, color .2s ease-out;375
transition: transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out;376
-webkit-transform: translateY(12px);377
transform: translateY(12px);378
-webkit-transform-origin: 0% 100%;379
transform-origin: 0% 100%; }380
.md-form label.active {381
-webkit-transform: translateY(-14px) scale(0.8);382
transform: translateY(-14px) scale(0.8); }383
.md-form .prefix {384
position: absolute;385
-webkit-transition: color 0.2s;386
transition: color 0.2s; }387
.md-form .prefix.active {388
color: #4285f4; }389
.md-form.form-lg .validate {390
margin-bottom: 2.8rem; }391
.md-form.form-lg label {392
font-size: 1.25rem; }393
.md-form.form-lg label.active {394
font-size: 1.15rem; }395
.md-form.form-lg .prefix {396
top: 0.4rem;397
font-size: 2rem; }398
.md-form.form-lg .prefix ~ input,399
.md-form.form-lg .prefix ~ textarea {400
width: calc(100% - 3rem);401
margin-left: 3rem; }402
.md-form.form-lg .prefix ~ label {403
margin-left: 3rem; }404
.md-form.form-lg .prefix ~ .form-text {405
margin-left: 3.1rem; }406
.md-form.form-sm .validate {407
margin-bottom: 2.3rem; }408
.md-form.form-sm label {409
font-size: 0.875rem; }410
.md-form.form-sm label.active {411
font-size: 0.95rem; }412
.md-form.form-sm .prefix {413
top: 0.35rem;414
font-size: 1.5rem; }415
.md-form.form-sm .prefix ~ input,416
.md-form.form-sm .prefix ~ textarea {417
width: calc(100% - 2rem);418
margin-left: 2rem; }419
.md-form.form-sm .prefix ~ label {420
margin-left: 2rem; }421
.md-form.form-sm .prefix ~ .form-text {422
margin-left: 2rem; }423
.md-form textarea.md-textarea {424
padding: 0;425
overflow-y: hidden; }426
.md-form textarea.md-textarea + label {427
top: -0.6rem; }428
.md-form textarea.md-textarea-auto {429
padding: 0;430
padding-top: 1.5rem; }431
.md-form textarea.md-textarea-auto + label {432
top: 0; }433
.md-form.md-outline {434
position: relative;435
margin-top: 1.5rem;436
margin-bottom: 1.5rem; }437
.md-form.md-outline input[type="text"],438
.md-form.md-outline input[type="password"],439
.md-form.md-outline input[type="email"],440
.md-form.md-outline input[type="url"],441
.md-form.md-outline input[type="time"],442
.md-form.md-outline input[type="date"],443
.md-form.md-outline input[type="datetime-local"],444
.md-form.md-outline input[type="tel"],445
.md-form.md-outline input[type="number"],446
.md-form.md-outline input[type="search-md"],447
.md-form.md-outline input[type="search"],448
.md-form.md-outline textarea.md-textarea {449
box-sizing: border-box;450
background-color: transparent;451
border: 1px solid #dadce0;452
border-radius: 4px;453
outline: none;454
box-shadow: none;455
-webkit-transition: all .3s;456
transition: all .3s; }457
.md-form.md-outline input[type="text"]:focus:not([readonly]),458
.md-form.md-outline input[type="password"]:focus:not([readonly]),459
.md-form.md-outline input[type="email"]:focus:not([readonly]),460
.md-form.md-outline input[type="url"]:focus:not([readonly]),461
.md-form.md-outline input[type="time"]:focus:not([readonly]),462
.md-form.md-outline input[type="date"]:focus:not([readonly]),463
.md-form.md-outline input[type="datetime-local"]:focus:not([readonly]),464
.md-form.md-outline input[type="tel"]:focus:not([readonly]),465
.md-form.md-outline input[type="number"]:focus:not([readonly]),466
.md-form.md-outline input[type="search-md"]:focus:not([readonly]),467
.md-form.md-outline input[type="search"]:focus:not([readonly]),468
.md-form.md-outline textarea.md-textarea:focus:not([readonly]) {469
border-color: #4285f4;470
box-shadow: inset 0 0 0 1px #4285f4; }471
.md-form.md-outline input[type="text"]:focus:not([readonly]) + label,472
.md-form.md-outline input[type="password"]:focus:not([readonly]) + label,473
.md-form.md-outline input[type="email"]:focus:not([readonly]) + label,474
.md-form.md-outline input[type="url"]:focus:not([readonly]) + label,475
.md-form.md-outline input[type="time"]:focus:not([readonly]) + label,476
.md-form.md-outline input[type="date"]:focus:not([readonly]) + label,477
.md-form.md-outline input[type="datetime-local"]:focus:not([readonly]) + label,478
.md-form.md-outline input[type="tel"]:focus:not([readonly]) + label,479
.md-form.md-outline input[type="number"]:focus:not([readonly]) + label,480
.md-form.md-outline input[type="search-md"]:focus:not([readonly]) + label,481
.md-form.md-outline input[type="search"]:focus:not([readonly]) + label,482
.md-form.md-outline textarea.md-textarea:focus:not([readonly]) + label {483
color: #4285f4; }484
.md-form.md-outline input[type="text"].valid, .md-form.md-outline input[type="text"]:focus.valid,485
.md-form.md-outline input[type="password"].valid,486
.md-form.md-outline input[type="password"]:focus.valid,487
.md-form.md-outline input[type="email"].valid,488
.md-form.md-outline input[type="email"]:focus.valid,489
.md-form.md-outline input[type="url"].valid,490
.md-form.md-outline input[type="url"]:focus.valid,491
.md-form.md-outline input[type="time"].valid,492
.md-form.md-outline input[type="time"]:focus.valid,493
.md-form.md-outline input[type="date"].valid,494
.md-form.md-outline input[type="date"]:focus.valid,495
.md-form.md-outline input[type="datetime-local"].valid,496
.md-form.md-outline input[type="datetime-local"]:focus.valid,497
.md-form.md-outline input[type="tel"].valid,498
.md-form.md-outline input[type="tel"]:focus.valid,499
.md-form.md-outline input[type="number"].valid,500
.md-form.md-outline input[type="number"]:focus.valid,501
.md-form.md-outline input[type="search-md"].valid,502
.md-form.md-outline input[type="search-md"]:focus.valid,503
.md-form.md-outline input[type="search"].valid,504
.md-form.md-outline input[type="search"]:focus.valid,505
.md-form.md-outline textarea.md-textarea.valid,506
.md-form.md-outline textarea.md-textarea:focus.valid {507
border-color: #00c851;508
box-shadow: inset 0 0 0 1px #00c851; }509
.md-form.md-outline input[type="text"]:focus:not([readonly]).valid + label,510
.md-form.md-outline input[type="text"].valid + label:after,511
.md-form.md-outline input[type="text"]:focus.valid + label:after,512
.md-form.md-outline input[type="password"]:focus:not([readonly]).valid + label,513
.md-form.md-outline input[type="password"].valid + label:after,514
.md-form.md-outline input[type="password"]:focus.valid + label:after,515
.md-form.md-outline input[type="email"]:focus:not([readonly]).valid + label,516
.md-form.md-outline input[type="email"].valid + label:after,517
.md-form.md-outline input[type="email"]:focus.valid + label:after,518
.md-form.md-outline input[type="url"]:focus:not([readonly]).valid + label,519
.md-form.md-outline input[type="url"].valid + label:after,520
.md-form.md-outline input[type="url"]:focus.valid + label:after,521
.md-form.md-outline input[type="time"]:focus:not([readonly]).valid + label,522
.md-form.md-outline input[type="time"].valid + label:after,523
.md-form.md-outline input[type="time"]:focus.valid + label:after,524
.md-form.md-outline input[type="date"]:focus:not([readonly]).valid + label,525
.md-form.md-outline input[type="date"].valid + label:after,526
.md-form.md-outline input[type="date"]:focus.valid + label:after,527
.md-form.md-outline input[type="datetime-local"]:focus:not([readonly]).valid + label,528
.md-form.md-outline input[type="datetime-local"].valid + label:after,529
.md-form.md-outline input[type="datetime-local"]:focus.valid + label:after,530
.md-form.md-outline input[type="tel"]:focus:not([readonly]).valid + label,531
.md-form.md-outline input[type="tel"].valid + label:after,532
.md-form.md-outline input[type="tel"]:focus.valid + label:after,533
.md-form.md-outline input[type="number"]:focus:not([readonly]).valid + label,534
.md-form.md-outline input[type="number"].valid + label:after,535
.md-form.md-outline input[type="number"]:focus.valid + label:after,536
.md-form.md-outline input[type="search-md"]:focus:not([readonly]).valid + label,537
.md-form.md-outline input[type="search-md"].valid + label:after,538
.md-form.md-outline input[type="search-md"]:focus.valid + label:after,539
.md-form.md-outline input[type="search"]:focus:not([readonly]).valid + label,540
.md-form.md-outline input[type="search"].valid + label:after,541
.md-form.md-outline input[type="search"]:focus.valid + label:after,542
.md-form.md-outline textarea.md-textarea:focus:not([readonly]).valid + label,543
.md-form.md-outline textarea.md-textarea.valid + label:after,544
.md-form.md-outline textarea.md-textarea:focus.valid + label:after {545
color: #00c851;546
content: attr(data-success);547
opacity: 1; }548
.md-form.md-outline input[type="text"].invalid, .md-form.md-outline input[type="text"]:focus.invalid,549
.md-form.md-outline input[type="password"].invalid,550
.md-form.md-outline input[type="password"]:focus.invalid,551
.md-form.md-outline input[type="email"].invalid,552
.md-form.md-outline input[type="email"]:focus.invalid,553
.md-form.md-outline input[type="url"].invalid,554
.md-form.md-outline input[type="url"]:focus.invalid,555
.md-form.md-outline input[type="time"].invalid,556
.md-form.md-outline input[type="time"]:focus.invalid,557
.md-form.md-outline input[type="date"].invalid,558
.md-form.md-outline input[type="date"]:focus.invalid,559
.md-form.md-outline input[type="datetime-local"].invalid,560
.md-form.md-outline input[type="datetime-local"]:focus.invalid,561
.md-form.md-outline input[type="tel"].invalid,562
.md-form.md-outline input[type="tel"]:focus.invalid,563
.md-form.md-outline input[type="number"].invalid,564
.md-form.md-outline input[type="number"]:focus.invalid,565
.md-form.md-outline input[type="search-md"].invalid,566
.md-form.md-outline input[type="search-md"]:focus.invalid,567
.md-form.md-outline input[type="search"].invalid,568
.md-form.md-outline input[type="search"]:focus.invalid,569
.md-form.md-outline textarea.md-textarea.invalid,570
.md-form.md-outline textarea.md-textarea:focus.invalid {571
border-color: #f44336;572
box-shadow: inset 0 0 0 1px #f44336; }573
.md-form.md-outline input[type="text"]:focus:not([readonly]).invalid + label,574
.md-form.md-outline input[type="text"].invalid + label:after,575
.md-form.md-outline input[type="text"]:focus.invalid + label:after,576
.md-form.md-outline input[type="password"]:focus:not([readonly]).invalid + label,577
.md-form.md-outline input[type="password"].invalid + label:after,578
.md-form.md-outline input[type="password"]:focus.invalid + label:after,579
.md-form.md-outline input[type="email"]:focus:not([readonly]).invalid + label,580
.md-form.md-outline input[type="email"].invalid + label:after,581
.md-form.md-outline input[type="email"]:focus.invalid + label:after,582
.md-form.md-outline input[type="url"]:focus:not([readonly]).invalid + label,583
.md-form.md-outline input[type="url"].invalid + label:after,584
.md-form.md-outline input[type="url"]:focus.invalid + label:after,585
.md-form.md-outline input[type="time"]:focus:not([readonly]).invalid + label,586
.md-form.md-outline input[type="time"].invalid + label:after,587
.md-form.md-outline input[type="time"]:focus.invalid + label:after,588
.md-form.md-outline input[type="date"]:focus:not([readonly]).invalid + label,589
.md-form.md-outline input[type="date"].invalid + label:after,590
.md-form.md-outline input[type="date"]:focus.invalid + label:after,591
.md-form.md-outline input[type="datetime-local"]:focus:not([readonly]).invalid + label,592
.md-form.md-outline input[type="datetime-local"].invalid + label:after,593
.md-form.md-outline input[type="datetime-local"]:focus.invalid + label:after,594
.md-form.md-outline input[type="tel"]:focus:not([readonly]).invalid + label,595
.md-form.md-outline input[type="tel"].invalid + label:after,596
.md-form.md-outline input[type="tel"]:focus.invalid + label:after,597
.md-form.md-outline input[type="number"]:focus:not([readonly]).invalid + label,598
.md-form.md-outline input[type="number"].invalid + label:after,599
.md-form.md-outline input[type="number"]:focus.invalid + label:after,600
.md-form.md-outline input[type="search-md"]:focus:not([readonly]).invalid + label,601
.md-form.md-outline input[type="search-md"].invalid + label:after,602
.md-form.md-outline input[type="search-md"]:focus.invalid + label:after,603
.md-form.md-outline input[type="search"]:focus:not([readonly]).invalid + label,604
.md-form.md-outline input[type="search"].invalid + label:after,605
.md-form.md-outline input[type="search"]:focus.invalid + label:after,606
.md-form.md-outline textarea.md-textarea:focus:not([readonly]).invalid + label,607
.md-form.md-outline textarea.md-textarea.invalid + label:after,608
.md-form.md-outline textarea.md-textarea:focus.invalid + label:after {609
color: #f44336;610
content: attr(data-error);611
opacity: 1; }612
.md-form.md-outline input[type="text"].form-control.valid + label:after,613
.md-form.md-outline input[type="text"].form-control:focus.valid + label:after,614
.md-form.md-outline input[type="password"].form-control.valid + label:after,615
.md-form.md-outline input[type="password"].form-control:focus.valid + label:after,616
.md-form.md-outline input[type="email"].form-control.valid + label:after,617
.md-form.md-outline input[type="email"].form-control:focus.valid + label:after,618
.md-form.md-outline input[type="url"].form-control.valid + label:after,619
.md-form.md-outline input[type="url"].form-control:focus.valid + label:after,620
.md-form.md-outline input[type="time"].form-control.valid + label:after,621
.md-form.md-outline input[type="time"].form-control:focus.valid + label:after,622
.md-form.md-outline input[type="date"].form-control.valid + label:after,623
.md-form.md-outline input[type="date"].form-control:focus.valid + label:after,624
.md-form.md-outline input[type="datetime-local"].form-control.valid + label:after,625
.md-form.md-outline input[type="datetime-local"].form-control:focus.valid + label:after,626
.md-form.md-outline input[type="tel"].form-control.valid + label:after,627
.md-form.md-outline input[type="tel"].form-control:focus.valid + label:after,628
.md-form.md-outline input[type="number"].form-control.valid + label:after,629
.md-form.md-outline input[type="number"].form-control:focus.valid + label:after,630
.md-form.md-outline input[type="search-md"].form-control.valid + label:after,631
.md-form.md-outline input[type="search-md"].form-control:focus.valid + label:after,632
.md-form.md-outline input[type="search"].form-control.valid + label:after,633
.md-form.md-outline input[type="search"].form-control:focus.valid + label:after,634
.md-form.md-outline textarea.md-textarea.form-control.valid + label:after,635
.md-form.md-outline textarea.md-textarea.form-control:focus.valid + label:after {636
position: absolute;637
top: 4rem;638
left: 0; }639
.md-form.md-outline input[type="text"].form-control.invalid + label:after,640
.md-form.md-outline input[type="text"].form-control:focus.invalid + label:after,641
.md-form.md-outline input[type="password"].form-control.invalid + label:after,642
.md-form.md-outline input[type="password"].form-control:focus.invalid + label:after,643
.md-form.md-outline input[type="email"].form-control.invalid + label:after,644
.md-form.md-outline input[type="email"].form-control:focus.invalid + label:after,645
.md-form.md-outline input[type="url"].form-control.invalid + label:after,646
.md-form.md-outline input[type="url"].form-control:focus.invalid + label:after,647
.md-form.md-outline input[type="time"].form-control.invalid + label:after,648
.md-form.md-outline input[type="time"].form-control:focus.invalid + label:after,649
.md-form.md-outline input[type="date"].form-control.invalid + label:after,650
.md-form.md-outline input[type="date"].form-control:focus.invalid + label:after,651
.md-form.md-outline input[type="datetime-local"].form-control.invalid + label:after,652
.md-form.md-outline input[type="datetime-local"].form-control:focus.invalid + label:after,653
.md-form.md-outline input[type="tel"].form-control.invalid + label:after,654
.md-form.md-outline input[type="tel"].form-control:focus.invalid + label:after,655
.md-form.md-outline input[type="number"].form-control.invalid + label:after,656
.md-form.md-outline input[type="number"].form-control:focus.invalid + label:after,657
.md-form.md-outline input[type="search-md"].form-control.invalid + label:after,658
.md-form.md-outline input[type="search-md"].form-control:focus.invalid + label:after,659
.md-form.md-outline input[type="search"].form-control.invalid + label:after,660
.md-form.md-outline input[type="search"].form-control:focus.invalid + label:after,661
.md-form.md-outline textarea.md-textarea.form-control.invalid + label:after,662
.md-form.md-outline textarea.md-textarea.form-control:focus.invalid + label:after {663
position: absolute;664
top: 4rem;665
left: 0; }666
.md-form.md-outline > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,667
.md-form.md-outline > input[type="time"]:not(.browser-default) + label {668
left: 8px;669
padding-right: 5px;670
padding-left: 5px;671
font-size: 1rem;672
font-weight: 500;673
background: #fff;674
-webkit-transform: translateY(-9px) scale(0.8);675
transform: translateY(-9px) scale(0.8);676
-webkit-transform-origin: 0 0;677
transform-origin: 0 0; }678
.md-form.md-outline > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label.active,679
.md-form.md-outline > input[type="time"]:not(.browser-default) + label.active {680
-webkit-transform: translateY(-9px) scale(0.8);681
transform: translateY(-9px) scale(0.8);682
-webkit-transform-origin: 0 0;683
transform-origin: 0 0; }684
685
@-webkit-keyframes autofill {686
to {687
color: #495057;688
background: transparent; } }689
690
@keyframes autofill {691
to {692
color: #495057;693
background: transparent; } }694
.md-form.md-outline input:-webkit-autofill {695
-webkit-animation-name: autofill;696
animation-name: autofill;697
-webkit-animation-fill-mode: both;698
animation-fill-mode: both; }699
.md-form.md-outline .form-control {700
padding: .375rem .75rem; }701
.md-form.md-outline label {702
position: absolute;703
top: 0;704
left: 0;705
padding-left: 10px;706
font-size: 1rem;707
color: #757575;708
cursor: text;709
-webkit-transition: color .2s ease-out, -webkit-transform .2s ease-out;710
transition: color .2s ease-out, -webkit-transform .2s ease-out;711
transition: transform .2s ease-out, color .2s ease-out;712
transition: transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out;713
-webkit-transform: translateY(9px);714
transform: translateY(9px);715
-webkit-transform-origin: 0% 100%;716
transform-origin: 0% 100%; }717
.md-form.md-outline label.active {718
left: 8px;719
padding-right: 5px;720
padding-left: 5px;721
font-weight: 500;722
background: #fff;723
-webkit-transform: translateY(-13px) scale(0.8);724
transform: translateY(-13px) scale(0.8); }725
.md-form.md-outline.form-lg .form-control.form-control-lg {726
padding: .5rem .725rem; }727
.md-form.md-outline.form-lg label {728
font-size: 1.25rem;729
-webkit-transform: translateY(10px);730
transform: translateY(10px); }731
.md-form.md-outline.form-lg label.active {732
font-size: 1.1rem;733
-webkit-transform: translateY(-14px) scale(0.8);734
transform: translateY(-14px) scale(0.8); }735
.md-form.md-outline.form-lg .prefix {736
top: .65rem;737
font-size: 25px; }738
.md-form.md-outline.form-lg .prefix ~ input,739
.md-form.md-outline.form-lg .prefix ~ textarea {740
width: calc(100% - 2.2rem);741
margin-left: 2.2rem; }742
.md-form.md-outline.form-lg .prefix ~ label {743
margin-left: 2.2rem; }744
.md-form.md-outline.form-lg .prefix ~ .form-text {745
margin-left: 2.3rem; }746
.md-form.md-outline.form-sm .form-control.form-control-sm {747
padding: .25rem .625rem; }748
.md-form.md-outline.form-sm label {749
font-size: .8rem;750
-webkit-transform: translateY(8px);751
transform: translateY(8px); }752
.md-form.md-outline.form-sm label.active {753
font-size: .85rem;754
-webkit-transform: translateY(-12px) scale(0.8);755
transform: translateY(-12px) scale(0.8); }756
.md-form.md-outline.form-sm .prefix {757
top: .5rem;758
font-size: 15px; }759
.md-form.md-outline.form-sm .prefix ~ input,760
.md-form.md-outline.form-sm .prefix ~ textarea {761
width: calc(100% - 1.6rem);762
margin-left: 1.6rem; }763
.md-form.md-outline.form-sm .prefix ~ label {764
margin-left: 1.6rem; }765
.md-form.md-outline.form-sm .prefix ~ .form-text {766
margin-left: 1.7rem; }767
.md-form.md-outline .prefix {768
position: absolute;769
top: .6rem;770
font-size: 20px;771
-webkit-transition: color .2s;772
transition: color .2s; }773
.md-form.md-outline .prefix:focus {774
color: #4285f4; }775
.md-form.md-outline .prefix ~ input,776
.md-form.md-outline .prefix ~ textarea {777
width: calc(100% - 2rem);778
margin-left: 2rem; }779
.md-form.md-outline .prefix ~ label {780
margin-left: 2rem; }781
.md-form.md-outline .prefix ~ .form-text {782
margin-left: 2.1rem; }783
.md-form.md-outline .character-counter {784
margin-top: -.5rem; }785
.md-form.md-bg input[type="text"],786
.md-form.md-bg input[type="password"],787
.md-form.md-bg input[type="email"],788
.md-form.md-bg input[type="url"],789
.md-form.md-bg input[type="time"],790
.md-form.md-bg input[type="date"],791
.md-form.md-bg input[type="datetime-local"],792
.md-form.md-bg input[type="tel"],793
.md-form.md-bg input[type="number"],794
.md-form.md-bg input[type="search-md"],795
.md-form.md-bg input[type="search"],796
.md-form.md-bg textarea.md-textarea {797
box-sizing: border-box;798
padding: 10px 5px;799
background: #f5f5f5 no-repeat;800
background-image: -webkit-gradient(linear, left top, left bottom, from(#4285f4), to(#4285f4)), -webkit-gradient(linear, left top, left bottom, from(#ced4da), to(#ced4da));801
background-image: linear-gradient(to bottom, #4285f4, #4285f4), linear-gradient(to bottom, #ced4da, #ced4da);802
background-position: 50% 100%, 50% 100%;803
background-size: 0 2px, 100% 1px;804
border: 0;805
border-top-left-radius: .3rem;806
border-top-right-radius: .3rem;807
-webkit-transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);808
transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); }809
.md-form.md-bg input[type="text"]:focus:not([readonly]),810
.md-form.md-bg input[type="password"]:focus:not([readonly]),811
.md-form.md-bg input[type="email"]:focus:not([readonly]),812
.md-form.md-bg input[type="url"]:focus:not([readonly]),813
.md-form.md-bg input[type="time"]:focus:not([readonly]),814
.md-form.md-bg input[type="date"]:focus:not([readonly]),815
.md-form.md-bg input[type="datetime-local"]:focus:not([readonly]),816
.md-form.md-bg input[type="tel"]:focus:not([readonly]),817
.md-form.md-bg input[type="number"]:focus:not([readonly]),818
.md-form.md-bg input[type="search-md"]:focus:not([readonly]),819
.md-form.md-bg input[type="search"]:focus:not([readonly]),820
.md-form.md-bg textarea.md-textarea:focus:not([readonly]) {821
border-bottom: none;822
box-shadow: none; }823
.md-form.md-bg input[type="text"]:focus,824
.md-form.md-bg input[type="password"]:focus,825
.md-form.md-bg input[type="email"]:focus,826
.md-form.md-bg input[type="url"]:focus,827
.md-form.md-bg input[type="time"]:focus,828
.md-form.md-bg input[type="date"]:focus,829
.md-form.md-bg input[type="datetime-local"]:focus,830
.md-form.md-bg input[type="tel"]:focus,831
.md-form.md-bg input[type="number"]:focus,832
.md-form.md-bg input[type="search-md"]:focus,833
.md-form.md-bg input[type="search"]:focus,834
.md-form.md-bg textarea.md-textarea:focus {835
background-color: #dcdcdc;836
background-size: 100% 2px, 100% 1px;837
outline: none; }838
.md-form.md-bg > input[type="date"]:not(.browser-default) {839
color: transparent; }840
.md-form.md-bg > input[type="date"]:not(.browser-default) + label {841
-webkit-transform-origin: 0 0;842
transform-origin: 0 0; }843
.md-form.md-bg > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,844
.md-form.md-bg > input[type="time"]:not(.browser-default) + label {845
font-size: .8rem;846
-webkit-transform: translateY(-12px);847
transform: translateY(-12px);848
-webkit-transform-origin: 0 0;849
transform-origin: 0 0; }850
.md-form.md-bg .form-control {851
padding: 1.1rem .7rem .4rem !important; }852
.md-form.md-bg label {853
top: 0;854
padding-left: .7rem;855
font-size: 1rem;856
-webkit-transition: color .2s ease-out, -webkit-transform .2s ease-out;857
transition: color .2s ease-out, -webkit-transform .2s ease-out;858
transition: transform .2s ease-out, color .2s ease-out;859
transition: transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out;860
-webkit-transform: translateY(13px);861
transform: translateY(13px);862
-webkit-transform-origin: 0% 100%;863
transform-origin: 0% 100%; }864
.md-form.md-bg label.active {865
padding-left: .75rem;866
font-weight: 500;867
-webkit-transform: translateY(-3px) scale(0.8);868
transform: translateY(-3px) scale(0.8); }869
.md-form.md-bg.form-lg label {870
-webkit-transform: translateY(16px);871
transform: translateY(16px); }872
.md-form.md-bg.form-lg label.active {873
-webkit-transform: translateY(-4px) scale(0.8);874
transform: translateY(-4px) scale(0.8); }875
.md-form.md-bg.form-sm label {876
-webkit-transform: translateY(11px);877
transform: translateY(11px); }878
.md-form.md-bg.form-sm label.active {879
-webkit-transform: translateY(-2px) scale(0.8);880
transform: translateY(-2px) scale(0.8); }881
882
.md-form .form-control.is-invalid,883
.was-validated .md-form .form-control:invalid {884
padding-right: 0; }885
886
.md-form .form-control.is-valid,887
.was-validated .md-form .form-control:valid {888
padding-right: 0; }889
890
.needs-validation .md-form label {891
left: .3rem; }892
893
.custom-file-input:lang(es) ~ .custom-file-label::after {894
content: "Elegir"; }895
896
.custom-file-input:lang(pl-pl) ~ .custom-file-label::after {897
content: "Wybierz"; }898
899
.custom-file-input:lang(fr) ~ .custom-file-label::after {900
content: "Choisir"; }901
902
.custom-file-input:lang(in) ~ .custom-file-label::after {903
content: "Pilih"; }904
905
.custom-file-input:lang(zh) ~ .custom-file-label::after {906
content: "選擇"; }907
908
.custom-file-input:lang(de) ~ .custom-file-label::after {909
content: "Wählen"; }910
911
.custom-file-input:lang(ru) ~ .custom-file-label::after {912
content: "Выбрать"; }913
914
.md-form > label {915
max-width: 100%;916
white-space: nowrap;917
overflow: hidden;918
text-overflow: ellipsis; }919
920
.md-form .form-control {921
box-sizing: border-box !important; }922
923
.md-form .input-prefix {924
position: absolute;925
top: 50%;926
-webkit-transform: translateY(-50%);927
transform: translateY(-50%);928
-webkit-transition: color 0.2s;929
transition: color 0.2s;930
color: rgba(0, 0, 0, 0.87);931
pointer-events: none; }932
.md-form .input-prefix.active {933
color: #4285f4; }934
935
.md-form.input-with-pre-icon label {936
left: 36px;937
right: initial; }938
939
.md-form.input-with-pre-icon .input-prefix {940
left: 16px;941
right: initial; }942
943
.md-form.input-with-pre-icon .form-control {944
padding-left: 2.7rem !important; }945
946
.md-form.input-with-post-icon .input-prefix {947
right: 16px;948
left: initial; }949
950
.md-form.input-with-post-icon .form-control {951
padding-right: 2.7rem !important; }952
953
.md-form.input-with-post-icon.input-with-pre-icon .input-prefix {954
right: 16px;955
left: initial; }956
957
.md-form.input-with-post-icon.input-with-pre-icon .input-prefix:first-of-type {958
left: 16px;959
right: initial; }960
961
.md-form.input-with-post-icon.input-with-pre-icon .form-control {962
padding-left: 2.5rem !important;963
padding-right: 2.5rem !important; }964
965
.form-header {966
padding: 1rem;967
margin-top: -3.13rem;968
margin-bottom: 3rem;969
color: #fff;970
text-align: center;971
border-radius: 0.125rem;972
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }973
974
.form-check-input:not(:checked),975
.form-check-input:checked {976
position: absolute;977
pointer-events: none;978
opacity: 0; }979
980
.form-check-input[type="radio"]:not(:checked) + label,981
.form-check-input[type="radio"]:checked + label,982
label.btn input[type="radio"]:not(:checked) + label,983
label.btn input[type="radio"]:checked + label {984
position: relative;985
display: inline-block;986
height: 1.5625rem;987
padding-left: 35px;988
line-height: 1.5625rem;989
cursor: pointer;990
-webkit-user-select: none;991
-moz-user-select: none;992
-ms-user-select: none;993
user-select: none;994
-webkit-transition: 0.28s ease;995
transition: 0.28s ease; }996
997
.form-check-input[type="radio"] + label:before,998
.form-check-input[type="radio"] + label:after,999
label.btn input[type="radio"] + label:before,1000
label.btn input[type="radio"] + label:after {1001
position: absolute;1002
top: 0;1003
left: 0;1004
z-index: 0;1005
width: 16px;1006
height: 16px;1007
margin: 4px;1008
content: "";1009
-webkit-transition: 0.28s ease;1010
transition: 0.28s ease; }1011
1012
.form-check-input[type="radio"]:not(:checked) + label:before,1013
.form-check-input[type="radio"]:not(:checked) + label:after,1014
.form-check-input[type="radio"]:checked + label:before,1015
.form-check-input[type="radio"]:checked + label:after,1016
.form-check-input[type="radio"].with-gap:checked + label:before,1017
.form-check-input[type="radio"].with-gap:checked + label:after,1018
label.btn input[type="radio"]:not(:checked) + label:before,1019
label.btn input[type="radio"]:not(:checked) + label:after,1020
label.btn input[type="radio"]:checked + label:before,1021
label.btn input[type="radio"]:checked + label:after,1022
label.btn input[type="radio"].with-gap:checked + label:before,1023
label.btn input[type="radio"].with-gap:checked + label:after {1024
border-radius: 50%; }1025
1026
.form-check-input[type="radio"]:not(:checked) + label:before,1027
.form-check-input[type="radio"]:not(:checked) + label:after,1028
label.btn input[type="radio"]:not(:checked) + label:before,1029
label.btn input[type="radio"]:not(:checked) + label:after {1030
border: 2px solid #5a5a5a; }1031
1032
.form-check-input[type="radio"]:not(:checked) + label:after,1033
label.btn input[type="radio"]:not(:checked) + label:after {1034
-webkit-transform: scale(0);1035
transform: scale(0); }1036
1037
.form-check-input[type="radio"]:checked + label:before,1038
label.btn input[type="radio"]:checked + label:before {1039
border: 2px solid transparent; }1040
1041
.form-check-input[type="radio"]:checked + label:after,1042
.form-check-input[type="radio"].with-gap:checked + label:before,1043
.form-check-input[type="radio"].with-gap:checked + label:after,1044
label.btn input[type="radio"]:checked + label:after,1045
label.btn input[type="radio"].with-gap:checked + label:before,1046
label.btn input[type="radio"].with-gap:checked + label:after {1047
border: 2px solid #4285f4; }1048
1049
.form-check-input[type="radio"]:checked + label:after,1050
.form-check-input[type="radio"].with-gap:checked + label:after,1051
label.btn input[type="radio"]:checked + label:after,1052
label.btn input[type="radio"].with-gap:checked + label:after {1053
background-color: #4285f4; }1054
1055
.form-check-input[type="radio"]:checked + label:after,1056
label.btn input[type="radio"]:checked + label:after {1057
-webkit-transform: scale(1.02);1058
transform: scale(1.02); }1059
1060
.form-check-input[type="radio"].with-gap:checked + label:after,1061
label.btn input[type="radio"].with-gap:checked + label:after {1062
-webkit-transform: scale(0.5);1063
transform: scale(0.5); }1064
1065
.form-check-input[type="radio"].with-gap:disabled:checked + label:before,1066
label.btn input[type="radio"].with-gap:disabled:checked + label:before {1067
border: 2px solid rgba(0, 0, 0, 0.46); }1068
1069
.form-check-input[type="radio"].with-gap:disabled:checked + label:after,1070
label.btn input[type="radio"].with-gap:disabled:checked + label:after {1071
background-color: rgba(0, 0, 0, 0.46);1072
border: none; }1073
1074
.form-check-input[type="radio"]:disabled:not(:checked) + label:before,1075
.form-check-input[type="radio"]:disabled:checked + label:before,1076
label.btn input[type="radio"]:disabled:not(:checked) + label:before,1077
label.btn input[type="radio"]:disabled:checked + label:before {1078
background-color: transparent;1079
border-color: rgba(0, 0, 0, 0.46); }1080
1081
.form-check-input[type="radio"]:disabled + span,1082
label.btn input[type="radio"]:disabled + span {1083
color: rgba(0, 0, 0, 0.46); }1084
1085
.form-check-input[type="radio"]:disabled:not(:checked) + span:before,1086
label.btn input[type="radio"]:disabled:not(:checked) + span:before {1087
border-color: rgba(0, 0, 0, 0.46); }1088
1089
.form-check-input[type="radio"]:disabled:checked + span:after,1090
label.btn input[type="radio"]:disabled:checked + span:after {1091
background-color: rgba(0, 0, 0, 0.46);1092
border-color: #bdbdbd; }1093
1094
.form-check-input[type="radio"]:checked + label:after .disabled-material,1095
label.btn input[type="radio"]:checked + label:after .disabled-material {1096
background-color: rgba(66, 133, 244, 0.2); }1097
1098
.md-disabled::after {1099
background-color: rgba(66, 133, 244, 0.5) !important;1100
border-color: rgba(66, 133, 244, 0.2) !important; }1101
1102
.md-disabled::before {1103
border-color: rgba(66, 133, 244, 0.25) !important; }1104
1105
/* Remove default checkbox */1106
[type="checkbox"]:not(:checked),1107
[type="checkbox"]:checked {1108
position: absolute;1109
pointer-events: none;1110
opacity: 0; }1111
1112
.form-check-input[type="checkbox"] + label,1113
label.btn input[type="checkbox"] + label {1114
position: relative;1115
display: inline-block;1116
height: 1.5625rem;1117
padding-left: 35px;1118
line-height: 1.5625rem;1119
cursor: pointer;1120
-webkit-user-select: none;1121
-moz-user-select: none;1122
-ms-user-select: none;1123
user-select: none; }1124
.form-check-input[type="checkbox"] + label.form-check-label-left,1125
label.btn input[type="checkbox"] + label.form-check-label-left {1126
padding: 0 35px 0 0 !important; }1127
.form-check-input[type="checkbox"] + label.form-check-label-left:before,1128
label.btn input[type="checkbox"] + label.form-check-label-left:before {1129
right: 0;1130
left: 100% !important;1131
-webkit-transform: translateX(-100%);1132
transform: translateX(-100%); }1133
1134
.form-check-input[type="checkbox"] + label:before,1135
.form-check-input[type="checkbox"]:not(.filled-in) + label:after,1136
label.btn input[type="checkbox"] + label:before,1137
label.btn input[type="checkbox"]:not(.filled-in) + label:after {1138
position: absolute;1139
top: 0;1140
left: 0;1141
z-index: 0;1142
width: 18px;1143
height: 18px;1144
margin-top: 3px;1145
content: "";1146
border: 2px solid #8a8a8a;1147
border-radius: 1px;1148
-webkit-transition: 0.2s;1149
transition: 0.2s; }1150
1151
.form-check-input[type="checkbox"]:not(.filled-in) + label:after,1152
label.btn input[type="checkbox"]:not(.filled-in) + label:after {1153
border: 0;1154
-webkit-transform: scale(0);1155
transform: scale(0); }1156
1157
.form-check-input[type="checkbox"]:not(:checked):disabled + label:before,1158
label.btn input[type="checkbox"]:not(:checked):disabled + label:before {1159
background-color: #bdbdbd;1160
border: none; }1161
1162
.form-check-input[type="checkbox"]:checked + label:before,1163
label.btn input[type="checkbox"]:checked + label:before {1164
top: -4px;1165
left: -5px;1166
width: 12px;1167
height: 1.375rem;1168
border-top: 2px solid transparent;1169
border-right: 2px solid #4285f4;1170
border-bottom: 2px solid #4285f4;1171
border-left: 2px solid transparent;1172
-webkit-transform: rotate(40deg);1173
transform: rotate(40deg);1174
-webkit-transform-origin: 100% 100%;1175
transform-origin: 100% 100%;1176
-webkit-backface-visibility: hidden;1177
backface-visibility: hidden; }1178
1179
.form-check-input[type="checkbox"]:checked + label.form-check-label-left:before,1180
label.btn input[type="checkbox"]:checked + label.form-check-label-left:before {1181
-webkit-transform: translateX(0) rotateZ(40deg);1182
transform: translateX(0) rotateZ(40deg);1183
-webkit-transform-origin: 0 0;1184
transform-origin: 0 0; }1185
1186
.form-check-input[type="checkbox"]:checked:disabled + label:before,1187
label.btn input[type="checkbox"]:checked:disabled + label:before {1188
border-right: 2px solid #bdbdbd;1189
border-bottom: 2px solid #bdbdbd; }1190
1191
.form-check-input[type="checkbox"]:indeterminate + label:before,1192
label.btn input[type="checkbox"]:indeterminate + label:before {1193
top: -11px;1194
left: -12px;1195
width: 10px;1196
height: 1.375rem;1197
border-top: none;1198
border-right: 2px solid #4285f4;1199
border-bottom: none;1200
border-left: none;1201
-webkit-transform: rotate(90deg);1202
transform: rotate(90deg);1203
-webkit-transform-origin: 100% 100%;1204
transform-origin: 100% 100%;1205
-webkit-backface-visibility: hidden;1206
backface-visibility: hidden; }1207
1208
.form-check-input[type="checkbox"]:indeterminate + label.form-check-label-left:before,1209
label.btn input[type="checkbox"]:indeterminate + label.form-check-label-left:before {1210
top: 0;1211
-webkit-transform-origin: 0 0;1212
transform-origin: 0 0; }1213
1214
.form-check-input[type="checkbox"]:indeterminate:disabled + label:before,1215
label.btn input[type="checkbox"]:indeterminate:disabled + label:before {1216
background-color: transparent;1217
border-right: 2px solid rgba(0, 0, 0, 0.46); }1218
1219
.form-check-input[type="checkbox"].filled-in + label:after,1220
label.btn input[type="checkbox"].filled-in + label:after {1221
border-radius: 0.125rem; }1222
1223
.form-check-input[type="checkbox"].filled-in + label:before,1224
.form-check-input[type="checkbox"].filled-in + label:after,1225
label.btn input[type="checkbox"].filled-in + label:before,1226
label.btn input[type="checkbox"].filled-in + label:after {1227
position: absolute;1228
left: 0;1229
z-index: 1;1230
content: "";1231
/* .1s delay is for check animation */1232
-webkit-transition: border 0.25s, background-color 0.25s, width 0.2s 0.1s, height 0.2s 0.1s, top 0.2s 0.1s, left 0.2s 0.1s;1233
transition: border 0.25s, background-color 0.25s, width 0.2s 0.1s, height 0.2s 0.1s, top 0.2s 0.1s, left 0.2s 0.1s; }1234
1235
.form-check-input[type="checkbox"].filled-in:not(:checked) + label:before,1236
label.btn input[type="checkbox"].filled-in:not(:checked) + label:before {1237
top: 10px;1238
left: 6px;1239
width: 0;1240
height: 0;1241
border: 3px solid transparent;1242
-webkit-transform: rotateZ(37deg);1243
transform: rotateZ(37deg);1244
-webkit-transform-origin: 100% 100%;1245
transform-origin: 100% 100%; }1246
1247
.form-check-input[type="checkbox"].filled-in:not(:checked) + label:after,1248
label.btn input[type="checkbox"].filled-in:not(:checked) + label:after {1249
top: 0;1250
z-index: 0;1251
width: 20px;1252
height: 20px;1253
background-color: transparent;1254
border: 2px solid #5a5a5a; }1255
1256
.form-check-input[type="checkbox"].filled-in:checked + label:before,1257
label.btn input[type="checkbox"].filled-in:checked + label:before {1258
top: 0;1259
left: 1px;1260
width: 8px;1261
height: 13px;1262
border-top: 2px solid transparent;1263
border-right: 2px solid #fff;1264
border-bottom: 2px solid #fff;1265
border-left: 2px solid transparent;1266
-webkit-transform: rotateZ(37deg);1267
transform: rotateZ(37deg);1268
-webkit-transform-origin: 100% 100%;1269
transform-origin: 100% 100%; }1270
1271
.form-check-input[type="checkbox"].filled-in:checked + label:after,1272
label.btn input[type="checkbox"].filled-in:checked + label:after {1273
top: 0;1274
z-index: 0;1275
width: 20px;1276
height: 20px;1277
background-color: #a6c;1278
border: 2px solid #a6c; }1279
1280
.form-check-input[type="checkbox"].filled-in.filled-in-danger:checked + label:after,1281
label.btn input[type="checkbox"].filled-in.filled-in-danger:checked + label:after {1282
background-color: #f44336;1283
border-color: #f44336; }1284
1285
.form-check-input[type="checkbox"]:disabled:not(:checked) + label:before,1286
label.btn input[type="checkbox"]:disabled:not(:checked) + label:before {1287
background-color: #bdbdbd;1288
border-color: #bdbdbd; }1289
1290
.form-check-input[type="checkbox"]:disabled:not(:checked) + label:after,1291
label.btn input[type="checkbox"]:disabled:not(:checked) + label:after {1292
background-color: #bdbdbd;1293
border-color: #bdbdbd; }1294
1295
.form-check-input[type="checkbox"]:disabled:checked + label:before,1296
label.btn input[type="checkbox"]:disabled:checked + label:before {1297
background-color: transparent; }1298
1299
.form-check-input[type="checkbox"]:disabled:checked + label:after,1300
label.btn input[type="checkbox"]:disabled:checked + label:after {1301
background-color: #bdbdbd;1302
border-color: #bdbdbd; }1303
1304
.colorful-select .dropdown-content {1305
padding: 0.5rem; }1306
.colorful-select .dropdown-content li.active span {1307
color: #fff !important;1308
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }1309
.colorful-select .dropdown-content li.active span [type="checkbox"]:checked + label:before {1310
border-color: transparent #fff #fff transparent; }1311
.colorful-select .dropdown-content li a:hover,1312
.colorful-select .dropdown-content li span:hover {1313
color: #fff !important;1314
border-radius: 0.125rem;1315
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);1316
-webkit-transition: 0.15s;1317
transition: 0.15s; }1318
.colorful-select .dropdown-content li a:hover [type="checkbox"] + label:before,1319
.colorful-select .dropdown-content li span:hover [type="checkbox"] + label:before {1320
border-color: #fff; }1321
.colorful-select .dropdown-content li a:hover [type="checkbox"]:checked + label:before,1322
.colorful-select .dropdown-content li span:hover [type="checkbox"]:checked + label:before {1323
border-color: transparent #fff #fff transparent; }1324
.colorful-select .dropdown-content li.disabled.active span, .colorful-select .dropdown-content li:disabled.active span, .colorful-select .dropdown-content li.optgroup.active span {1325
color: rgba(0, 0, 0, 0.3) !important;1326
cursor: default;1327
border-bottom-color: rgba(0, 0, 0, 0.3);1328
box-shadow: none; }1329
.colorful-select .dropdown-content li.disabled a:hover,1330
.colorful-select .dropdown-content li.disabled span:hover, .colorful-select .dropdown-content li:disabled a:hover,1331
.colorful-select .dropdown-content li:disabled span:hover, .colorful-select .dropdown-content li.optgroup a:hover,1332
.colorful-select .dropdown-content li.optgroup span:hover {1333
color: rgba(0, 0, 0, 0.3) !important;1334
cursor: default;1335
background-color: #fff !important;1336
border-bottom-color: rgba(0, 0, 0, 0.3);1337
box-shadow: none; }1338
.colorful-select .dropdown-content li.disabled label, .colorful-select .dropdown-content li:disabled label, .colorful-select .dropdown-content li.optgroup label {1339
cursor: default; }1340
1341
.select-wrapper .select-dropdown {1342
-webkit-user-select: none;1343
-moz-user-select: none;1344
-ms-user-select: none;1345
user-select: none; }1346
1347
.select-label {1348
position: absolute; }1349
1350
.select-wrapper {1351
position: relative; }1352
.select-wrapper:not(.md-outline) .select-dropdown:focus {1353
border-bottom: 1px solid #4285f4;1354
box-shadow: 0 1px 0 0 #4285f4; }1355
.select-wrapper.active span.caret,1356
.select-wrapper.active label.mdb-main-label {1357
color: #007bff; }1358
.select-wrapper.active + label {1359
color: #007bff; }1360
.select-wrapper input.select-dropdown {1361
position: relative;1362
z-index: 2;1363
display: block;1364
width: 100%;1365
height: 40px;1366
padding: 0;1367
margin: 0 0 0.94rem 0;1368
font-size: 1rem;1369
line-height: 2.9rem;1370
text-overflow: ellipsis;1371
cursor: pointer;1372
background-color: transparent;1373
border: none;1374
border-bottom: 1px solid #ced4da;1375
outline: none; }1376
.select-wrapper input.select-dropdown:disabled {1377
color: rgba(0, 0, 0, 0.3);1378
cursor: default;1379
border-bottom-color: rgba(0, 0, 0, 0.2); }1380
.select-wrapper input.select-dropdown .selected,1381
.select-wrapper input.select-dropdown li:focus {1382
background-color: rgba(0, 0, 0, 0.15); }1383
.select-wrapper input.select-dropdown li.active {1384
background: transparent; }1385
.select-wrapper input.select-dropdown .fas,1386
.select-wrapper input.select-dropdown .fab,1387
.select-wrapper input.select-dropdown .far {1388
color: inherit; }1389
.select-wrapper input.active {1390
border-bottom: 1px solid #4285f4;1391
box-shadow: 0 1px 0 0 #4285f4; }1392
.select-wrapper .search-wrap {1393
display: block;1394
padding: 1rem 0 0;1395
margin: 0 0.7rem; }1396
.select-wrapper .search-wrap .md-form {1397
margin-top: 0;1398
margin-bottom: 1rem; }1399
.select-wrapper .search-wrap .md-form input {1400
padding-bottom: 0.4rem;1401
margin-bottom: 0;1402
border: none;1403
border-bottom: 1px solid #ced4da;1404
border-radius: 0; }1405
.select-wrapper .search-wrap .md-form input:focus {1406
box-shadow: none !important;1407
box-shadow: 0 1px 0 0 #4285f4 !important; }1408
.select-wrapper span.caret {1409
position: absolute;1410
top: .8rem;1411
right: 0;1412
font-size: 0.63rem;1413
color: #495057; }1414
.select-wrapper span.caret.disabled {1415
color: rgba(0, 0, 0, 0.3); }1416
.select-wrapper + label {1417
position: absolute;1418
top: 2.125rem;1419
font-weight: 300;1420
color: #757575;1421
-webkit-transition: 0.2s ease-out;1422
transition: 0.2s ease-out; }1423
.select-wrapper + label.active {1424
top: 1.5rem;1425
left: 15px;1426
font-size: .8rem;1427
-webkit-transform: translateY(-14px);1428
transform: translateY(-14px); }1429
.select-wrapper + label.active-check {1430
color: #4285f4; }1431
.select-wrapper + label.mdb-main-label {1432
z-index: 1; }1433
.select-wrapper + label.disabled {1434
color: rgba(0, 0, 0, 0.3); }1435
.select-wrapper > label.mdb-main-label {1436
position: absolute;1437
top: 0;1438
left: 0;1439
font-weight: 300;1440
color: #757575;1441
-webkit-transition: .2s ease-out;1442
transition: .2s ease-out;1443
text-overflow: ellipsis;1444
white-space: nowrap;1445
overflow: hidden;1446
width: 100%;1447
z-index: 1; }1448
.select-wrapper > label.mdb-main-label.active {1449
top: 0;1450
left: 0;1451
font-size: .8rem;1452
-webkit-transform: translateY(-14px);1453
transform: translateY(-14px); }1454
.select-wrapper > label.mdb-main-label.disabled {1455
color: rgba(0, 0, 0, 0.3); }1456
.select-wrapper.dropdown-primary > label.mdb-main-label.active {1457
color: #4285f4; }1458
.select-wrapper.dropdown-danger > label.mdb-main-label.active {1459
color: #c00; }1460
.select-wrapper.dropdown-default > label.mdb-main-label.active {1461
color: #2bbbad; }1462
.select-wrapper.dropdown-secondary > label.mdb-main-label.active {1463
color: #a6c; }1464
.select-wrapper.dropdown-success > label.mdb-main-label.active {1465
color: #00c851; }1466
.select-wrapper.dropdown-info > label.mdb-main-label.active {1467
color: #33b5e5; }1468
.select-wrapper.dropdown-warning > label.mdb-main-label.active {1469
color: #fb3; }1470
.select-wrapper.dropdown-ins > label.mdb-main-label.active {1471
color: #2e5e86; }1472
.select-wrapper.dropdown-dark > label.mdb-main-label.active {1473
color: #2e2e2e; }1474
.select-wrapper i {1475
color: rgba(0, 0, 0, 0.3); }1476
.select-wrapper ul {1477
padding-left: 0;1478
list-style-type: none; }1479
.select-wrapper.md-form > ul li label {1480
top: 0;1481
font-size: .9rem;1482
color: #4285f4;1483
-webkit-transform: none;1484
transform: none; }1485
.select-wrapper.md-form > ul li.select-toggle-all label {1486
padding-left: 38px; }1487
.select-wrapper.md-form.colorful-select > ul li.select-toggle-all:hover label {1488
color: #fff; }1489
.select-wrapper.md-form.md-outline span.caret {1490
padding-right: .75rem;1491
padding-left: .75rem; }1492
.select-wrapper.md-form.md-outline span.caret.active {1493
color: #4285f4 !important; }1494
.select-wrapper.md-form.md-outline .dropdown-content {1495
top: 2.7rem !important; }1496
.select-wrapper.md-form.md-outline input.select-dropdown {1497
padding: .375rem .75rem;1498
color: #495057; }1499
.select-wrapper.md-form.md-outline input.select-dropdown:focus {1500
border-color: #4285f4;1501
box-shadow: inset 0 0 0 1px #4285f4; }1502
.select-wrapper.md-form.md-outline + label {1503
position: absolute;1504
top: .5em !important;1505
left: 23px;1506
z-index: 2 !important;1507
padding-right: 5px;1508
padding-left: 5px;1509
font-size: 13px;1510
font-weight: 500;1511
background: #fff;1512
-webkit-transform: translateY(40%);1513
transform: translateY(40%); }1514
.select-wrapper.md-form.md-outline + label.active {1515
color: #4285f4; }1516
.select-wrapper .select-add-option {1517
position: absolute;1518
top: 1.5rem;1519
right: 1rem;1520
display: none;1521
color: #4285f4;1522
cursor: pointer; }1523
.select-wrapper ~ .invalid-feedback,1524
.select-wrapper ~ .valid-feedback {1525
margin-top: -1rem; }1526
JS
xxxxxxxxxx1
document.querySelectorAll('.form-outline').forEach((form)=>{2
const input = form.querySelector('.form-control')3
const icon = form.querySelector('i')4
input.addEventListener('focusin',()=>{5
icon.classList.add('active') 6
})7
input.addEventListener('focusout',()=>{8
icon.classList.remove('active')9
})10
}) Console errors: 0