﻿/* From Uiverse.io by Maximinodotpy */

.InpMobileContent {
    border: 2px solid white;
    border-radius: 10px;
    padding: 5px !important;
    font-family: IRANSans;
    font-size: large;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 350px;
    outline: none;
}

.InpMobileContent input {
    font-size: large;
    background-color: transparent !important;
    border: none;
    font-family: IRANSans;
    width: 100%;
    color: white !important;
}


.InpMobileContent input:-webkit-autofill,
.InpMobileContent input:-webkit-autofill:focus {
    color: white !important;
    background-color: transparent !important;
    -webkit-text-fill-color: white !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.InpMobileContent input:focus {
    outline: none;
    border: none;
}




.textbox {
    padding:10px 10px 10px 10px;
    font-size: 100%;
    outline: none;
    border: 2px solid rgb(200, 200, 200);
    background-color: transparent;
    border-radius: 10px;
    width: 100%;
    color: white;
    text-align:center;
    
}

.textbox::placeholder{
    color:lightsteelblue;
}


.QTextBox {
    padding: 10px 10px 10px 10px;
    font-size: 100%;
    outline: none;
    border: 2px solid rgb(200, 200, 200);
    background-color: transparent;
    border-radius: 10px;
    width: 100%;
    color: white;
    text-align: center;
}




.inputGroup {
    

    margin: 1em 0 1em 0;
    max-width: 190px;
    position: relative;
}
    .inputGroup input {
        font-size: 100%;
        padding: 0.8em;
        outline: none;
        border: 2px solid rgb(200, 200, 200);
        background-color:transparent;
      
        border-radius: 10px;
        width: 100%;
        color:white;
    }

    .inputGroup label {
        display:flex;
        position: absolute; /* موقعیت مطلق برای فرزند */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* انتقال مرکز عنصر به مرکز والد */
      
        padding: 10px;
        text-align: center;
        transition: all 0.6s ease;
        

    }

    .inputGroup :is(input:focus, input:valid) ~ label {
       
        transform: translateY(-15px) scale(.9);
        
        left: 140px;
        top: -15px;
       
        margin: 0em;
        margin-left: 0em;
        padding: 0.4em;
        color:white;
    }

    .inputGroup :is(input:focus, input:valid) {
        border-color: green;
    }
