#phrase {
    width: 100%;background-color: rgba(1, 174, 188, 0.7);position: absolute;bottom: 0;margin: 0px;padding-top: 20px;padding-left:0px;border-bottom-left-radius: 1rem;
}

.phrase > h2 {
    font-family: 'Catamaran', sans-serif;bottom: 0;color:black;font-size: 1.25rem;padding-left: 30px;
}

.phrase > p {
    padding-left: 30px;color: white;font-family: 'Catamaran', sans-serif;font-size: 0.75rem;
}

.login-form {
    width: 100%;background-color: white;height: 80%;margin: 0px;vertical-align: center;position: relative;padding: 4rem;
}

.login-form > h1 {
    font-size: 2rem;color: rgb(30,155,215);font-family: 'Catamaran', sans-serif;font-weight: bold;margin-top: 50px;border-bottom: 5px solid rgb(30,155,215);padding-bottom: 10px;text-align:center;
}

.form-error {
    font-size: 16px;padding-left: 15px;padding: 10px;margin-top: 50px;margin-bottom: 30px;color: red;background-color: #ffdadd;border-radius: 0.357rem;
}

.form-info {
    font-size: 1rem;margin-top: 1rem;margin-bottom: 1.5rem;
}

.form-element {
    margin-bottom: 2rem;
}

.form-element > p {
    font-size: 0.75rem;color :rgb(30,155,215); font-weight: bold;font-family: 'Catamaran', sans-serif;margin-bottom: 0.25rem;
}

.form-element > input {
    background-color: white;font-size: 0.75rem;color :rgb(30,155,215); font-weight: bold;font-family: 'Poppins', sans-serif;
    border: 1px solid #d8d6de;
    padding: 10px;width: 100%;
    border-radius: 0.357rem;
}

.input:hover {
    border: 1px solid #7367f0!important;
    box-shadow: 0 3px 10px 0 rgba(34,41,47,.1)!important;
}

.input:focus {
    border: 1px solid #7367f0!important;
    box-shadow: 0 3px 10px 0 rgba(34,41,47,.1)!important;
    outline: -webkit-focus-ring-color auto 0px;
}

.form-button {
    background: linear-gradient(118deg,rgb(130,63,145),rgba(30,155,215,.7));
    color: white;
    border-radius: 0.48rem;
    font-size: 1rem;
    max-height: 39px;
    padding:0.5rem;
    border:none;
    width: 100%;
}

.form-button:hover {
    box-shadow: 0 3px 10px 0 rgba(43, 55, 65, 0.4);
    cursor:pointer;
}
.form-button:focus {
    box-shadow: 0 3px 10px 0 rgba(43, 55, 65, 0.4);
    cursor:pointer;
    outline: -webkit-focus-ring-color auto 0px;
}



.bg-gray {
    min-height: 100%;
    min-height: 100vh;
    background-color:#f5f3f3;
    display: flex;align-items: center;flex-direction: column;justify-content: center;width: 100%; padding: 5rem;
}


.form-box-content {
    -webkit-border-radius: 1rem 1rem 1rem 1rem;
    border-radius: 1rem 1rem 1rem 1rem;
    padding: 0;
    width: 80%;
    max-width: 80%;
    position: relative;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    background-color:white;
    min-height: 100%;
    height: 100%;
}

.img-box {
    background-image: url('../styles/img/welcoming/welcoming_1.jpg');position:relative;background-repeat: no-repeat;background-size: cover;z-index: 1;vertical-align: bottom;padding: 0px;border-top-left-radius:1rem;border-bottom-left-radius: 1rem;
}

.dark-box {
    width: 100%;position: absolute;bottom: 0;background-color: rgba(1, 174, 188, 0.7);margin: 0px;padding-top: 20px;padding-left:0px;border-bottom-left-radius: 1rem;
}

.dark-box h2 {
    color:black;
    font-family: 'Catamaran',sans-serif;
}