@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

:root {
    --input-padding-x: 1.5rem;
    --input-padding-y: .75rem;
}

body {
    overflow: scroll;
    background: url("~/imgs/talent1.png");
    background-size: cover;
    font-weight: 500;
    height: 100vh;
    color: #515A5A;
    font-family: 'Roboto', sans-serif;
    cursor:pointer;
}

h5 {
    font-size: 30px;
}
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

/* fallback for old browsers */
/*.gradient-custom-3 {*/
    /*fallback for old browsers */
    /*background: #84fab0;*/
    /* Chrome 10-25, Safari 5.1-6 */
 /*   background: -webkit-linear-gradient(to right,#54BAB9, rgba(143, 211, 244, 0.5));*/
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /*background: linear-gradient(to right, #54BAB9, rgba(118, 215, 196, 0.5));*/
  /*  background: linear-gradient(to left, #54BAB9,#f0f8ff );*/
/*}*/


.forgot-pass {
    text-align: center;
    font-weight:600;
}
    .forgot-pass a:hover {
        color: #54BAB9;
        
    }

.card {
   
    width: 400px;
    left: 20%;
    height: fit-content;
    padding-bottom: 2%;
    align-content: center;
    justify-content: center;
    align-items: center;
    /*background-color: #f0f8ff6e;*/
    background: transparent;
    border-color: #54BAB9;
    margin-bottom: 12%;
    margin-top: 8%;
    /* border-style:hidden;*/
}
.cardhead {
    width: 100%;
    text-align: center;
    justify-content: center;
    border-radius: 5px;
    margin-top: 10px;
}

    .cardhead img {
        border-radius: 40px;
        width: 75px;
        height: 75px;
    }

    .cardhead h6 {
        width: 100%;
        color: #515A5A;
        margin-top: 5px;
        font-size: 25px;
    }

.card-signin {
    border: 0;
    border-radius: 1rem;
    
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

    .card-signin .card-title {
        margin-bottom: 2rem;
        font-weight: 300;
        font-size: 1.5rem;
    }

    .card-signin .card-body {
        padding: 1rem;

    }

.form-signin {
    width: 100%;
}

    .form-signin .btn {
        border-radius: 10px;
        letter-spacing: .1rem;
        font-weight: bold;
       
        transition: all 0.2s;
        color: #515A5A;
        margin-left:5.8em;
       
    }

        .form-signin .btn:hover {
            background-color: #515A5A;
            color: #54BAB9;
        }

        .form-label-group {
            position: relative;
            margin-bottom: 1rem;
        }

            .form-label-group input {
                height: fit-content;
                border-left: solid 2rem;
                padding:10px;
            }



    .form-label-group > input,
    .form-label-group > label {
        padding: var(--input-padding-y) var(--input-padding-x);
        
    }

    .form-label-group > label {
        position: absolute;
        align-content: start;
        top: 0;
        margin-left:5px;
        left: 0;
        display: block;
        width: 10% !important;
        margin-bottom: 0;
        /* Override default `<label>` margin */
        /*line-height: 1;*/
        padding:6px 0px 3px 3px;
        color: #515A5A;
        transition: all .2s ease-in-out;
        font-size: 15px;
    }

        .form-label-group > label i {
            padding-right: 10px;
        }

   /* .form-label-group input::-webkit-input-placeholder {
        color: transparent;
    }

    .form-label-group input:-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group input:-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group input::-moz-placeholder {
        color: transparent;
    }

    .form-label-group input::placeholder {
        color: transparent;
    }*/

    /*.form-label-group input:not(:placeholder-shown) {
        padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
        padding-bottom: calc(var(--input-padding-y) / 3);
       
    }
*/
        .form-label-group input:not(:placeholder-shown) ~ label {
            padding-top: calc(var(--input-padding-y) / 3);
            padding-bottom: calc(var(--input-padding-y) / 3);
            font-size: 15px;
         
            height: 25px;

        }

.submit {
    /* background: linear-gradient(to right, #54BAB9, rgba(153, 226, 47, 0.5));*/
    background: #54BAB9;
    color: #515A5A;
    font-size: 100%;
    width: 40%;
    height: 40px;
    margin-top:2em;
}

.btn-google {
    background: conic-gradient (from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: large;
    border: 2px solid #4285f4;
    border-radius: 100px;
    height: 25px;
    text-align: center;
    align-content: center;
}

.btn-facebook {
    color: #3B5998;
    background-color: none;
    border-radius: 100px;
    border: 2px solid #3B5998;
    font-size: large;
    height: 25px;
    text-align: center;
    /*   padding-bottom: 1%;*/
    align-content: center;
}

a {
    color: #515A5A;
}
/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
    .form-label-group > label {
        display: none;
    }

    .form-label-group input::-ms-input-placeholder {
        color: black;
    }
}

/* Fallback for IE
-------------------------------------------------- */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .form-label-group > label {
        display: none;
    }

    .form-label-group input:-ms-input-placeholder {
        color: #777;
    }
}

@media (max-width: 991px) {


    .card-holder {
        grid-template-columns: 1fr 6fr 1fr;
    }

    .card {
        padding: 20px;
    }
}

.form-label-group input {
    height: 2rem;
    width: 100%;
    background: transparent;
    border-color: #54BAB9;
}

.form-grp {
    padding: 0 20px;
}



.p-5 {
    padding: 1rem !important;
}

.captcha {
    margin: 15px 0px;
}

    .captcha .preview {
        color: #555;
        width: 100%;
        text-align: center;
        height: 25px;
        line-height: 25px;
        letter-spacing: 8px;
        border: 1px dashed #888;
        font-family: "monospace";
    }

        .captcha .preview span {
            display: inline-block;
            user-select: none;
        }

    .captcha .captcha-form {
        display: flex;
    }

        .captcha .captcha-form input {
            width: 100%;
            padding: 8px;
            height: 35px;
            border: 1px solid #54BAB9;

        }
            .captcha .captcha-form input:hover {
                border: 1px solid #54BAB9;
            }
            .captcha .captcha-form .captcha-refresh {
                width: 40px;
                border: none;
                outline: none;
                background: #515A5A;
                color: #54BAB9;
                cursor: pointer;
            }

@media (max-width: 1200px) {
    .card {
        margin-top: 10%;
        left: 15%;
        margin-bottom: 53px;
        height: max-content;
    }
}

@media (max-width: 768px) {
    .card {
        margin-top: 5%;
        left: 10%;
        margin-bottom: 30px;
        height: max-content;
        width: 80%; /* Adjust width as needed */
    }
}

@media (max-width: 540px) {
    .card {
        margin-top: 0;
        left: 5%;
        margin-bottom: 20px;
        height: max-content;
        width: 90%; /* Adjust width as needed */
    }
}

@media (max-width: 450px) {
    .card {
        margin-top: 10%;
        left: 5%;
        margin-bottom: 20px;
        height: max-content;
        width: 90%; /* Adjust width as needed */
    }
}



.form-signin p a{
    color: #515A5A;
    font-size:15px;
    font-weight:600;
}
    .form-signin p a:hover {
        color: #54BAB9;
    }



#label1 {
     width: 10% !important;
}