/* body {
    background-image: url("../images/bg_sms.png");
    min-height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
} */

#bg {
    /* background-image: url("../images/background.jpg"); */
    /* background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh; */
    /* responsive height */
}


.centered {
    position: fixed;
    top: 40%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

/* input Focus */
.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #000000;
    outline: 0;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.card_bg {
    /* border: 4px solid black; */
    padding: 60px;
    background: #0000009e;
    background-clip: padding-box;
    border-radius: 15px;
    /* box-shadow: rgb(38 57 77) 0px 20px 30px -10px;*/
}


/* text color gradian */
.text-color-gradian {
    background: -webkit-linear-gradient(#10a9a2, #1999aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*Change text in autofill textbox*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


/* ICON UFOND Login */
@media only screen and (max-width: 768px) {

    /* For mobile phones: */
    #icon_ufond_login {
        width: 50% !important;
    }

    .centered {
        top: 48%;
    }

    .card_bg {
        padding: 15px;
    }
}


@media only screen and (max-width: 500px) {

    /* For mobile phones: */
    .centered {
        width: 95% !important;
    }

}


/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(245, 245, 245);
}


/* Input Design */
.form__group {
    position: relative;
    padding: 15px 0 0;
    margin-top: 10px;
    /* width: 50%; */
}

.form__field {
    width: 100%;
    border: 0;
    border-bottom: 2px solid #9b9b9b;
    outline: 0;
    font-size: 1.3rem;
    color: #fff;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.2s;
}

.form__field::placeholder {
    color: transparent;
}

.form__field:placeholder-shown~.form__label {
    font-size: 1.3rem;
    cursor: text;
    top: 20px;
}

.form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 1rem;
    color: #9b9b9b;
}

.form__field:focus {
    padding-bottom: 6px;
    /* font-weight: 700; */
    border-width: 3px;
    border-image: linear-gradient(to right, #11998e, #38ef7d);
    border-image-slice: 1;
}

.form__field:focus~.form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 1rem;
    color: #11998e;
    font-weight: 700;
}

/* reset input */
.form__field:required,
.form__field:invalid {
    box-shadow: none;
}