@import url('https://fonts.googleapis.com/css2?family=DynaPuff&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
.auth{
    position: relative;
    width: 100%;  height: 100%;
    background: #fff;
    font-family: 'Itim', cursive;
}
.auth .box{
    position: absolute;
    top: 50%;  left: 50%;
    transform: translate(-50%,-50%);
    width: 40%;
}

.auth .box h1{
    font-family: 'DynaPuff', cursive;
    text-align: center;
    margin-bottom: 40px;
    color: #6c6c6c;
}
.auth .box input, .auth .box select{
    border: 1px solid #c1c1c1;
    border-radius: 14px;
    font-size: 18px;
    padding: 8px 14px;
    outline: none;
    width: calc(100% - 30px);
    margin-left: 30px;
    color: #5a5353;
}
.auth .box input::placeholder{
    color: #c1c1c1;
}
.auth .box label{
    margin-bottom: 7px;
    font-size: 20px;
}
.auth .box small{
    margin: 3px 30px;
    display: inline-block;
    color: red;
    font-size: 17px;
}
.auth .box button{
    display: inline-block;
    text-decoration: none;
    padding: 3px 20px;
    border-radius: 13px;
    color: #fff;
    border: none;
    outline: none;
    margin: 15px 0;
    background: #6c6c6c;
    font-size: 20px;
}
.auth .box a{
    text-decoration: none;
    margin-right: 17px;
    color: #262626;
    font-size: 17px;
}

/*** Begin Style of Message ***/
.auth .box .message{
    position: relative;
    background: #fff;
    box-shadow: 0 0 11px -3px rgba(0,0,0,.3);
    padding: 10px 26px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 25px;
}
.auth .box .message::before{
    content: '';
    position: absolute;
    top: 0;  left: 0;
    height: 100%; width: 11px;
}
.auth .box .message.success::before{
    background: #61a36c;
}
.auth .box .message.error::before{
    background: #da7979;
}
.auth .box .message .fa{
    vertical-align: top;
    color: #61a36c;
    border: 3px solid;
    font-size: 25px;
    padding: 7px;
    border-radius: 68%;
}
.auth .box .message.success .fa{
    color: #61a36c;
}
.auth .box .message.error .fa{
    color: #da7979;
}
.auth .box .message div{
    display: inline-block;
    margin-left: 20px;
    font-size: 21px;
    width: calc(100% - 70px);
}
.auth .box .message div span{
    font-size: 17px;
    color: #585858;
}
/*** End Style of Message ***/