*{
    box-sizing: border-box;
}


body {
    margin          : 0;
    overflow        : hidden;
    display         : flex;
    justify-content : center;
    align-items     : center;
    color           : #555;
    background-color: #ecf0f3;

}

.loging-from {
    position: relative;
    width: 300px;
    min-height: 490px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    border-radius: 35px;
    background-color: #ecf0f3;
    box-shadow: 10px 10px 10px rgb(179, 176, 176), -8px -8px 10px white;
}

.logo {
    width          : 300px;
    text-align     : center;
    justify-content: center;
    padding        : 20px;
    border-radius  : 22px;
}

.logo::before{
    background-image: url(images/a.jpg);
    opacity         : .5;
}

/* img {
    height       : 100px;
    width        : 100px;
    border-radius: 50%;
    margin       : 0px auto;
    box-shadow   : 0px 0px 2px #5f5f5f,
    0px 0px 0px 5px #ecf0f3,
    5px 5px 10px #a7aaaf,
    -8px -8px 15px #ffffff;
} */

img {
    height: 65px;
    width : 200px;
}

.title {
    text-align    : center;
    color         : #434645;
    font-family   : 'Lobster', cursive;
    font-size     : 29px;
    padding-top   : 10px;
    letter-spacing: 1.2px;
}

.sub-titel {
    text-align    : center;
    font-size     : 15px;
    padding-top   : 17px;
    letter-spacing: 3px;
    color         : #434645;
    font-weight   : 800;
}

.fields {
    padding: 0px 5px 10px 5px;
    width  : 100%;
}

.fields input {
    border    : none;
    outline   : none;
    background: none;
    color     : #555;
    padding   : 15px 10px 15px 5px;
    color     : rgb(53, 49, 49);
}

::placeholder {
    color      : rgb(61, 59, 59);
    opacity    : .5;                   /* Firefox */
    font-size  : 16px;
    transform  : 0.5s;
    font-weight: bold;
    font-style : normal;
    font-family: 'Alata', sans-serif;
}

.username, .password {
    margin-top: 20px;
    border-radius: 20px;
    box-shadow   : inset 5px 5px 5px rgb(156, 152, 152),
    inset -5px -5px 5px white ;
}

.fields svg {
    height         : 18px;
    text-align     : left;
    justify-content: start;
    margin         : 0 3px -2px 3px;
    opacity        : 0.6;
}

.signin-button {
    outline         : none;
    border          : none;
    cursor          : pointer;
    width           : 100%;
    height          : 50px;
    font-size       : 15px;
    border-radius   : 25px;
    font-family     : "Lato",              sans-serif;
    background-color: #696486;
    box-shadow      : 6px 6px 8px #818386, -6px -6px 8px white;
    color           : #fff;
    transition      : .5s linear;
    font-weight     : 700;
    letter-spacing  : 0.97px;
    margin-top      : 20px;
}

.signin-button:hover {
    background: #99899c;
}

.signin-button:active {
    background: #4a9764;
}

.link {
    padding-top: 20px;
    text-align : center;

}

.link a {
    text-decoration: none;
    color          : #434645;
    font-family    : sans-serif;
    font-weight    : bold;
    font-size      : 15px;
    letter-spacing : 0.87px;
}

.validation-error {
    margin   : 0px;
    color    : rgba(255, 0, 0, 0.651);
    font-size: 13px;
}

.card {
    width: 300px;
    margin: 18px auto;
    background-color: #ecf0f3;
    box-shadow: 10px 10px 10px rgb(179, 176, 176), -8px -8px 10px white;
    padding: 20px;
    border-radius: 35px;
}

.box {
    display: table;
    table-layout: fixed;
    border-spacing: 0;
    width: 100%;
}

.b-b {
    border-bottom: 1px solid #696486 !important
}
.strong {
    font-weight: bold !important;
}
.p10 {
    padding: 10px;
}
.text-center {
    text-align: center !important;
}