* {
   box-sizing: border-box;
}

body {
   background: #e6f4f3;
   font-family: 'Roboto', sans-serif;
}

.ui-form {
   max-width: 400px;
   padding: 80px 30px 30px;
   margin: 50px auto 30px;
   background: white;
}

.ui-form h3 {
   position: relative;
   z-index: 5;
   margin: 0 0 60px;
   text-align: center;
   color: #4a90e2;
   font-size: 30px;
   font-weight: normal;
}

.ui-form h3:before {
   content: "";
   position: absolute;
   z-index: -1;
   left: 60px;
   top: -30px;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background: #fee8e4;
}

.ui-form h3:after {
   content: "";
   position: absolute;
   z-index: -1;
   right: 50px;
   top: -40px;
   width: 0;
   height: 0;
   border-left: 55px solid transparent;
   border-right: 55px solid transparent;
   border-bottom: 90px solid #ffe3b5;
}

.form-row {
   position: relative;
   margin-bottom: 45px;
}

.form-row input {
   display: block;
   width: 100%;
   padding: 0 10px;
   line-height: 40px;
   font-family: 'Roboto', sans-serif;
   background: none;
   border-width: 0x;
   border: 1px solid #4a90e2;
   transition: all 0.2s ease;
   z-index: 5;
   
}

.form-row label {
   position: absolute;
   left: 13px;
   color: #9d959d;
   font-size: 20px;
   font-weight: 200;
   transform: translateY(0px);
   transition: all 0.2s ease;
   z-index: 1;
}

.form-row input:focus {
   outline: 0;
   border-color: #f93fff;
}

.form-row input:focus+label,
.form-row input:valid+label {
   transform: translateY(-60px);
   margin-left: -14px;
   font-size: 14px;
   font-weight: 400;
   outline: 0;
   border-color: #afd4ff;
   color: #4a90e2;
}

.ui-form input[type="button"] {
   width: 100%;
   padding: 0;
   line-height: 42px;
   background: #4a90e2;
   border-width: 0;
   color: white;
   font-size: 16px;
}

.ui-form p {
   margin: 0;
   padding-top: 10px;
}
.Dow{
   position: absolute; 
   display: none;
   top: 0px;
   left:0px;
   width: 100%;
   height: 100%; 
}
.smoke{
   position: absolute; 
   top: 0px;
   left:0px;
   width: 100%;
   height: 100%; 
   z-index: 50;
   background: gray;
   opacity: .4;
}
.loading {
   max-width: 130px;
   max-height: 130px;
   z-index: 60;   
   margin: 0;
   position: absolute;               
   top: 350px;
   left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

}
