textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
outline:0px !important;
-webkit-appearance:none;
}
.container-demo-form * {
box-sizing: border-box;
}
.container-demo-form .nav a {
text-decoration: none;
outline: none;
}
.container-demo-form .has-error .invalid-feedback {
display: block;
}
.container-demo-form .has-error label {
color: #dc3545;
}
.container-demo-form .has-error input,
.container-demo-form .has-error select {
border-color: #dc3545 !important;
}
.container-demo-form .has-error button {
cursor: pointer;
}
.container-demo-form .demo-form-error {
display: none;
border: 1px solid #dc3545;
color: #dc3545;
background: #ffeff0;
text-align: center;
padding: 30px;
margin-bottom: 30px;
}
.container-demo-form .demo-form-error.show {
display: block;
}
.demo-form-result {
width: 500px;
margin: 20px auto;
background: #fdedda;
padding: 20px;
line-height: 200%;
} .container-demo-form .card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box; border-radius: .25rem;
}
.container-demo-form .card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
text-align: center; }
.container-demo-form .card-footer {
padding: .75rem 1.25rem;
background-color: rgba(0,0,0,.03);
border-top: 1px solid rgba(0,0,0,.125);
border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
}
.container-demo-form .card-body {
flex: 1 1 auto;
}
.container-demo-form .nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 1.5rem;
list-style: none;
border-bottom: 1px solid #ddd;
justify-content: center;
list-style-type: none;
}
.container-demo-form .nav-item {
margin-bottom: -1px;
}
.container-demo-form .nav-link {
display: block;
padding: .5rem 1rem;
border: 1px solid transparent;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
}
.container-demo-form .nav-link.active {
color: #495057;
background-color: #fff;
border-color: #ddd #ddd #fff;
}
.container-demo-form .nav-link img {
vertical-align: middle;
border-style: none;
}
.container-demo-form .form-group {
margin-bottom: 1rem;
}
.container-demo-form .row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
@media (max-width: 767px) {
.container-demo-form .row {
display: block;
flex-wrap: no-wrap;
margin-right: -15px;
margin-left: -15px;
}
}
.container-demo-form .col-form-label {
margin-bottom: 0;
line-height: 40px;
font-weight: bold;
}
.container-demo-form .col-md-2 {
flex: 0 0 20%;
max-width: 20%;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.container-demo-form .col-md-10 {
flex: 0 0 80%;
max-width: 80%;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (max-width: 767px) {
.container-demo-form .col-md-2 {
flex: 0 0 100%;
max-width: 100%;
}
.container-demo-form .col-md-10 {
flex: 0 0 100%;
max-width: 100%;
}
}
.container-demo-form .invalid-feedback {
display: none;
margin-top: .25rem;
font-size: .875rem;
color: #dc3545;
}
.container-demo-form .form-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-image: none;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.container-demo-form input[type=text].form-control,
.container-demo-form input[type=email].form-control {
-webkit-backface-visibility: hidden;
background: #f5f5f5;
border: solid 1px #ccc;
box-sizing: border-box;
outline: none;
padding: 0 0.66rem;
line-height: 40px;
-webkit-appearance: none;
outline-offset: 0;
border-radius: 5px;
}
.container-demo-form select.form-control {
display: inline-block;
max-width: 100%;
height: calc(2.25rem + 2px);
padding: 0 1.75rem 0 .75rem;
line-height: 40px;
color: #495057;
vertical-align: middle;
background:#f5f5f5 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
background-size: 8px 10px;
border: 1px solid #ced4da;
border-radius: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.container-demo-form .btn {
display: inline-block;
font-weight: bold;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: none;
padding: 15px 25px ;
font-size: 20px;
border-radius: 5px;
transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
color: #fff;
background-color: #43bb50;
cursor: pointer;
}
.container-demo-form .btn:hover {
background-color: #66d972;
}