:root {
     --input-padding-x: .75rem;
     --input-padding-y: .75rem;
}
 .list-devapi, .list-devapi a {
     color: #53504f;
}
 .list-devapi a:hover {
     text-decoration: none;
}
 .list-devapi:hover i {
     color: #3c763d;
}
 * {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}
 html, body {
     height: 100%;
     background: #eeecec;
     background: url(data:image/svg+xml;
     base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlZWVjZWMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYTdhMTlmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
     background: -moz-radial-gradient(center,ellipse cover,#eeecec 0%,#a7a19f 100%);
     background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,#eeecec),color-stop(100%,#a7a19f));
     background: -webkit-radial-gradient(center,ellipse cover,#eeecec 0%,#a7a19f 100%);
     background: -o-radial-gradient(center,ellipse cover,#eeecec 0%,#a7a19f 100%);
     background: -ms-radial-gradient(center,ellipse cover,#eeecec 0%,#a7a19f 100%);
     background: radial-gradient(ellipse at center,#eeecec 0%,#a7a19f 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeecec',endColorstr='#a7a19f',GradientType=1);
}
 body {
     display: -ms-flexbox;
     display: -webkit-box;
     display: flex;
     -ms-flex-align: center;
     -ms-flex-pack: center;
     -webkit-box-align: center;
     align-items: center;
     -webkit-box-pack: center;
     justify-content: center;
     padding-top: 40px;
     padding-bottom: 40px;
     background-color: #f5f5f5;
}
 .text-devapi {
     color: #53504f;
}
 .soften {
     height: 1px;
     background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0));
     background-image: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0));
     background-image: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0));
     background-image: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0));
     border: 0;
}
 .form-control:focus{
     border-color:#f0ad4e;
     outline:0;
     box-shadow:0 0 0 .2rem rgba(240, 173, 78, 0.25) 
}
 .form-signin {
     width: 100%;
     max-width: 420px;
     padding: 15px;
     margin: 0 auto;
}
 .form-label-group {
     position: relative;
     margin-bottom: 1rem;
}
 .form-label-group > input, .form-label-group > label {
     padding: var(--input-padding-y) var(--input-padding-x);
}
 .form-label-group > label {
     position: absolute;
     top: 0;
     left: 0;
     display: block;
     width: 100%;
     margin-bottom: 0;
    /* Override default `<label>` margin */
     line-height: 1.5;
     color: #495057;
     border: 1px solid transparent;
     border-radius: .25rem;
     transition: all .1s ease-in-out;
}
 .form-label-group input::-webkit-input-placeholder {
     color: transparent;
}
 .form-label-group input:-ms-input-placeholder {
     color: transparent;
}
 .form-label-group input::-ms-input-placeholder {
     color: transparent;
}
 .form-label-group input::-moz-placeholder {
     color: transparent;
}
 .form-label-group input::placeholder {
     color: transparent;
}
 .form-label-group input:not(:placeholder-shown) {
     padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
     padding-bottom: calc(var(--input-padding-y) / 3);
}
 .form-label-group input:not(:placeholder-shown) ~ label {
     padding-top: calc(var(--input-padding-y) / 3);
     padding-bottom: calc(var(--input-padding-y) / 3);
     font-size: 12px;
     color: #777;
}