.input-box-0001 input[type=text]{
    width: 300px;
    padding: 5px 5px 5px 10px;
    color: rgb(182, 63, 63);
    background-color:rgb(255, 255, 255);
    border: 2px solid rgb(182, 63, 63);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    outline: none;
    box-shadow: -5px -5px 15px rgba(64, 75, 78, 0.2)
    , 5px 5px 15px rgba(0, 0, 0, 0.9)
    , inset -5px -5px 15px rgba(64, 75, 78, 0.2)
    , inset 5px 5px 15px rgba(0, 0, 0, 0.9);
}

.input-box-0001 input[type=text]:focus::placeholder{
    color: transparent;
}

.input-box-0001 input[type=text]::placeholder{
    color: rgb(82, 63, 63);
    transition: color 0.5s ease;
}

.input-box-0001 input[type=text]:focus{
    color: rgb(240, 164, 23);
    border: 2px solid rgb(240, 164, 23);
}

/* ********************************************************* */
.input-box-0002 {
    position: relative;
}

.input-box-0002 input[type=text] {
    width: 300px;
    padding: 10px 5px 5px 10px;
    background-color: rgba(240, 247, 250, 1);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    border: 2px solid rgba(182, 63, 63, 1);
    box-shadow: -5px -5px 15px rgba(64, 75, 78, 0.2)
    , 5px 5px 15px rgba(0, 0, 0, 0.9)
    , inset -5px -5px 15px rgba(64, 75, 78, 0.2)
    , inset 5px 5px 15px rgba(0, 0, 0, 0.9);
    outline: none;
    transition: 0.5s ease-in-out;
}

.input-box-0002 input[type=text]:valid,
.input-box-0002 input[type=text]:focus {
    color: rgba(240, 164, 23, 1);
    border: 2px solid rgba(240, 164, 23, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0002-placeholder {
    position: absolute;
    width: 120px;
    color: rgba(82, 63, 63, 1);
    background-color: transparent;
    border: none;
    top: 10px;
    left: 10px;
    padding: 2px 2px 2px 8px;
    font-size: 12px;
    transition: 0.5s ease-in-out;
    pointer-events: none;
}

.input-box-0002 input[type=text]:valid ~ .input-box-0002-placeholder,
.input-box-0002 input[type=text]:focus ~ .input-box-0002-placeholder {
    background-color: rgba(241, 241, 241, 1);
    color: rgba(240, 247, 250, 1);
    border: 2px solid rgba(240, 164, 23, 1);
    box-shadow: -5px -5px 15px rgba(64, 75, 78, 0.2)
    , 5px 5px 15px rgba(0, 0, 0, 0.9)
    , inset -5px -5px 15px rgba(64, 75, 78, 0.2)
    , inset 5px 5px 15px rgba(0, 0, 0, 0.9);
    top: -18px;
    left: 10px;
    padding: 2px 2px 2px 8px;
    border-radius: 5px 5px 5px 5px;
}
                
/* ********************************************************* */
.input-text-0003 {
    position: relative;
}
            
.input-text-0003 input[type=text] {
    width: 300px;
    padding: 10px 5px 5px 10px;
    background-color: rgba(240, 247, 250, 1);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    border: 2px solid rgba(182, 63, 63, 1);
    box-shadow: -5px -5px 15px rgba(64, 75, 78, 0.2)
    , 5px 5px 15px rgba(0, 0, 0, 0.9)
    , inset -5px -5px 15px rgba(64, 75, 78, 0.2)
    , inset 5px 5px 15px rgba(0, 0, 0, 0.9);
    outline: none;
    transition: 0.5s ease-in-out;
}

.input-text-0003 input[type=text]:valid,
.input-text-0003 input[type=text]:focus {
    color: rgba(240, 164, 23, 1);
    border: 2px solid rgba(240, 164, 23, 1);
    transition: 0.5s ease-in-out;
}

.input-text-0003-span-box {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    transition: 0.5s ease-in-out;
}

.input-text-0003-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 30px;
    top: 8px;
    left: 0px;
    font-size: 24px;
    color: rgba(82, 63, 63, 1);
    border-right: 2px solid rgba(182, 63, 63, 1);
    transition: 0.5s ease-in-out;
    opacity: 1;
    pointer-events: none;
}

.input-text-0003 input[type=text]:valid ~ .input-text-0003-span-box .input-text-0003-icon,
.input-text-0003 input[type=text]:focus ~ .input-text-0003-span-box .input-text-0003-icon {
    font-size: 0px;
    opacity: 0;
    transition: 0.5s ease-in-out;
}

.input-text-0003-placeholder {
    position: absolute;
    width: 120px;
    color: rgba(82, 63, 63, 1);
    font-size: 12px;
    top: 10px;
    left: 40px;
    padding: 2px 2px 2px 8px;
    border-radius: 5px 5px 5px 5px;
    transition: 0.5s ease-in-out;
    pointer-events: none;
}

.input-text-0003 input[type=text]:valid ~ .input-text-0003-span-box .input-text-0003-placeholder,
.input-text-0003 input[type=text]:focus ~ .input-text-0003-span-box .input-text-0003-placeholder {
    width: 120px;
    background-color: rgba(241, 241, 241, 1);
    color: rgba(240, 247, 250, 1);
    border: 2px solid rgba(240, 164, 23, 1);
    box-shadow: -5px -5px 15px rgba(64, 75, 78, 0.2)
    , 5px 5px 15px rgba(0, 0, 0, 0.9)
    , inset -5px -5px 15px rgba(64, 75, 78, 0.2)
    , inset 5px 5px 15px rgba(0, 0, 0, 0.9);
    font-size: 12px;
    padding: 2px 2px 2px 8px;
    border-radius: 5px 5px 5px 5px;
    transition: 0.5s ease-in-out;
} 

.input-text-0003 input[type=text]:valid ~ .input-text-0003-span-box,
.input-text-0003 input[type=text]:focus ~ .input-text-0003-span-box,
.input-text-0003 input[type=text]:focus ~ .input-text-0003-span-box .input-text-0003-placeholder,
.input-text-0003 input[type=text]:valid ~ .input-text-0003-span-box .input-text-0003-placeholder,
.input-text-0003 input[type=text]:valid ~ .input-text-0003-span-box .input-text-0003-icon,
.input-text-0003 input[type=text]:focus ~ .input-text-0003-span-box .input-text-0003-icon {
    top: -10px;
    left:  -5px;
    transition: 0.5s ease-in-out;
}
                
/* ********************************************************* */
.input-box-0004 {
    position: relative;
}
            
.input-box-0004 input[type=text] {
    width: 300px;
    padding: 10px 5px 5px 10px;
    background-color: rgba(240, 247, 250, 1);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    border: 2px solid rgba(0, 128, 157, 1);
    box-shadow: -5px -5px 15px rgba(64, 75, 78, 0.2)
    , 5px 5px 15px rgba(0, 0, 0, 0.9)
    , inset -5px -5px 15px rgba(64, 75, 78, 0.2)
    , inset 5px 5px 15px rgba(0, 0, 0, 0.9);
    outline: none;
    transition: 0.5s ease-in-out;
}

.input-box-0004 input[type=text]:valid,
.input-box-0004 input[type=text]:focus {
    color: rgba(10, 186, 181, 1);
    border: 2px solid rgba(10, 186, 181, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0004-span-box {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    transition: 0.5s ease-in-out;
}

.input-box-0004-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 30px;
    top: 8px;
    left: 0px;
    font-size: 24px;
    color: rgba(0, 128, 157, 1);
    border-right: 4px dotted rgba(0, 128, 157, 1);
    transition: 0.5s ease-in-out;
    opacity: 1;
    pointer-events: none;
}

.input-box-0004 input[type=text]:valid ~ .input-box-0004-span-box .input-box-0004-icon,
.input-box-0004 input[type=text]:focus ~ .input-box-0004-span-box .input-box-0004-icon {
    font-size: 0px;
    opacity: 0;
    transition: 0.5s ease-in-out;
}

.input-box-0004-placeholder {
    position: absolute;
    width: 120px;
    color: rgba(0, 128, 157, 1);
    font-size: 12px;
    top: 10px;
    left: 40px;
    padding: 2px 2px 2px 8px;
    border-radius: 0px 0px 0px 0px;
    transition: 0.5s ease-in-out;
    pointer-events: none;
}

.input-box-0004 input[type=text]:valid ~ .input-box-0004-span-box .input-box-0004-placeholder,
.input-box-0004 input[type=text]:focus ~ .input-box-0004-span-box .input-box-0004-placeholder {
    width: 120px;
    background-color: rgba(16, 16, 16, 1);
    color: rgba(240, 247, 250, 1);
    border: 2px solid rgba(10, 186, 181, 1);
    border-top: transparent;
    border-bottom: transparent;
    box-shadow: -5px -5px 15px rgba(64, 75, 78, 0.2)
    , 5px 5px 15px rgba(0, 0, 0, 0.9)
    , inset -5px -5px 15px rgba(64, 75, 78, 0.2)
    , inset 5px 5px 15px rgba(0, 0, 0, 0.9);
    font-size: 12px;
    padding: 2px 2px 2px 8px;
    border-radius: 0px 0px 0px 0px;
    transition: 0.5s ease-in-out;
} 

.input-box-0004 input[type=text]:valid ~ .input-box-0004-span-box,
.input-box-0004 input[type=text]:focus ~ .input-box-0004-span-box,
.input-box-0004 input[type=text]:focus ~ .input-box-0004-span-box .input-box-0004-placeholder,
.input-box-0004 input[type=text]:valid ~ .input-box-0004-span-box .input-box-0004-placeholder,
.input-box-0004 input[type=text]:valid ~ .input-box-0004-span-box .input-box-0004-icon,
.input-box-0004 input[type=text]:focus ~ .input-box-0004-span-box .input-box-0004-icon {
    top: -5px;
    left:  5px;
    transition: 0.5s ease-in-out;
}
                
/* ********************************************************* */
.input-box-0005 {
    position: relative;
}

.input-box-0005 input[type=text] {
    width: 300px;
    padding: 0px 5px 10px 10px;
    background-color: rgba(240, 247, 250, 1);
    border-radius: 8px 8px 0px 0px;
    font-size: 16px;
    border: none;
    border-bottom: 2px solid rgba(217, 22, 86, 1);
    outline: none;
    transition: 0.5s ease-in-out;
}

.input-box-0005 input[type=text]:valid,
.input-box-0005 input[type=text]:focus {
    color: rgba(217, 22, 86, 1);
    border: none;
    border-bottom: 2px solid rgba(238, 102, 166, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0005-placeholder {
    position: absolute;
    width: 120px;
    color: rgba(100, 13, 95, 1);
    background-color: transparent;
    border: none;
    top: 5px;
    left: 10px;
    padding: 2px 2px 2px 8px;
    font-size: 12px;
    transition: 0.5s ease-in-out;
    pointer-events: none;
}

.input-box-0005 input[type=text]:valid ~ .input-box-0005-placeholder,
.input-box-0005 input[type=text]:focus ~ .input-box-0005-placeholder {
    background-color: rgba(16, 16, 16, 1);
    color: rgba(240, 247, 250, 1);
    border: 2px solid rgba(238, 102, 166, 1);
    border-bottom: none;
    top: 22px;
    left: 10px;
    padding: 0px 0px 0px 8px;
    border-radius: 5px 5px 0px 0px;
    transition: 0.5s ease-in-out;
}
/* ********************************************************* */
.input-box-0006 {
    position: relative;
}

.input-box-0006 input[type=text] {
    width: 300px;
    padding: 0px 5px 0px 10px;
    background-color: rgba(248, 255, 219, 1);
    border-radius: 8px 8px 0px 0px;
    font-size: 16px;
    border: none;
    border-bottom: 3px double rgba(67, 0, 255, 1);
    outline: none;
    transition: 0.5s ease-in-out;
}

.input-box-0006 input[type=text]:valid,
.input-box-0006 input[type=text]:focus {
    color: rgba(0, 101, 248, 1);
    border: none;
    border-bottom: 3px double rgba(0, 202, 255, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0006-placeholder {
    position: absolute;
    width: 120px;
    color: rgba(67, 0, 255, 1);
    background-color: transparent;
    border: none;
    top: 0px;
    left: 10px;
    padding: 2px 2px 2px 8px;
    font-size: 12px;
    transition: 0.5s ease-in-out;
    pointer-events: none;
}

.input-box-0006 input[type=text]:valid ~ .input-box-0006-placeholder,
.input-box-0006 input[type=text]:focus ~ .input-box-0006-placeholder {
    background-color: rgba(16, 16, 16, 0);
    color: rgba(240, 247, 250, 1);
    border: none;
    font-size: 12px;
    border-bottom: none;
    top: -20px;
    left: 10px;
    padding: 0px 0px 0px 8px;
    border-radius: 0px 0px 0px 0px;
}                    
/* ********************************************************* */
.input-box-0007 {
    position: relative;
}

.input-box-0007 input[type=text] {
    width: 300px;
    padding: 5px 5px 5px 10px;
    background-color: rgba(240, 247, 250, 1);
    border-radius: 8px 8px 0px 0px;
    font-size: 16px;
    border: none;
    border-bottom: 2px solid rgba(217, 22, 86, 1);
    outline: none;
    transition: 0.5s ease-in-out;
}

.input-box-0007 input[type=text]:valid,
.input-box-0007 input[type=text]:focus {
    color: rgba(100, 13, 95, 1);
    border: none;
    border-bottom: 2px solid rgba(238, 102, 166, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0007-placeholder {
    position: absolute;
    width: 120px;
    color: rgba(100, 13, 95, 1);
    background-color: transparent;
    border: none;
    top: 5px;
    left: 10px;
    padding: 2px 2px 2px 8px;
    font-size: 12px;
    transition: 0.5s ease-in-out;
    pointer-events: none;
}

.input-box-0007 input[type=text]:valid ~ .input-box-0007-placeholder,
.input-box-0007 input[type=text]:focus ~ .input-box-0007-placeholder {
    background-color: rgba(16, 16, 16, 0);
    color: rgba(240, 247, 250, 1);
    border: none;
    top: -18px;
    left: 10px;
    padding: 0px 0px 0px 8px;
    font-size: 10px;
    border-radius: 0px 0px 0px 0px;
}

.input-box-0007-count {
    position: absolute;
    color: rgba(100, 13, 95, 1);
    top: -10px;
    right: 10px;
    font-size: 12px;
    background-color: rgba(240, 247, 250, 1);
    padding: 0px 10px 0px 10px;
    border-radius: 5px 5px 5px 5px;
    border: none;
    pointer-events: none;
}
                    
/* ********************************************************* */
.input-text-0008 {
    position: relative;
}

.input-text-0008 input[type=text] {
    width: 300px;
    padding: 5px 5px 5px 10px;
    color: rgba(82, 63, 63, 1);
    background-color: rgba(115, 196, 234, 1);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-bottom: 4px solid rgba(115, 196, 234, 1);
    outline: none;
    box-shadow: -5px -5px 15px rgba(64, 75, 78, 0.2)
    , 5px 5px 15px rgba(0, 0, 0, 0.9)
    , inset -5px -5px 15px rgba(64, 75, 78, 0.2)
    , inset 5px 5px 15px rgba(0, 0, 0, 0.9);
    transition: 0.5s ease-in-out;
}

.input-text-0008 input[type=text]:focus::placeholder,
.input-text-0008 input[type=text].has-value::placeholder {
    color: transparent;
}

.input-text-0008 input[type=text]::placeholder {
    color: rgba(82, 63, 63, 1);
}

.input-text-0008 input[type=text]:focus,
.input-text-0008 input[type=text].has-value {
    border: none;
    border-bottom: 4px solid rgba(115, 196, 234, 1);
}
/* ********************************************************* */
.input-text-0009 {
    position: relative;
}

.input-text-0009 input[type=text] {
    width: 300px;
    padding: 5px 5px 5px 10px;
    color: rgba(82, 63, 63, 1);
    background-image: linear-gradient(-180deg, rgba(255, 137, 214, 1) 0%, rgba(192, 31, 158, 1) 100%);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid rgba(110, 15, 155, 1);
    outline: none;
    box-shadow: 0 8px 6px 0 rgba(0, 0, 0, 0.2), 0 -3px 12px rgba(192, 31, 158, 1) inset, 0 5px 3px rgba(255 ,255, 255, 0.4) inset, 0 3px 4px 0 rgba(255, 137, 214, 1) inset;
}

.input-text-0009 input[type=text]:focus::placeholder,
.input-text-0009 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.5s ease-in-out;
}

.input-text-0009 input[type=text]::placeholder {
    color: rgba(82, 63, 63, 1);
    transition: 0.5s ease-in-out;
}

.input-text-0009 input[type=text]:focus,
.input-text-0009 input[type=text].has-value {
    border: 1px solid rgba(110, 15, 155, 1);
}                    
/* ********************************************************* */
.input-text-0010 {
    position: relative;
}

.input-text-0010 input[type=text] {
    width: 300px;
    padding: 5px 5px 5px 10px;
    color: rgba(82, 63, 63, 1);
    background-image: linear-gradient(135deg, rgba(169, 108, 254, 1) 0%, rgba(236, 113, 207, 1) 50%, rgba(255, 134, 153, 1) 75%, rgba(255, 168, 102, 1) 100%);
    border-radius: 3px 3px 3px 3px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    outline: none;
    box-shadow: -5px -5px 15px rgba(64, 75, 78, 0.2)
    , 5px 5px 15px rgba(0, 0, 0, 0.9)
    , inset -5px -5px 15px rgba(64, 75, 78, 0.2)
    , inset 5px 5px 15px rgba(0, 0, 0, 0.9);
}

.input-text-0010 input[type=text]:focus::placeholder,
.input-text-0010 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.5s ease-in-out;
}

.input-text-0010 input[type=text]::placeholder {
    color: rgba(82, 63, 63, 1);
    transition: 0.5s ease-in-out;
}

.input-text-0010 input[type=text]:focus,
.input-text-0010 input[type=text].has-value {
    border: none;
}                    
/* ********************************************************* */
.input-box-0011 {
    position: relative;
}

.input-box-0011 input[type=text] {
    width: 300px;
    padding: 5px 5px 5px 10px;
    color: rgba(157, 196, 254, 1);
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)), radial-gradient(90% 7% at 50% 8%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0) 50%), rgba(0, 83, 208, 1);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid rgba(157, 196, 254, 1);
    outline: none;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5),  0 -2px 0 2px rgba(0, 0, 0, 0.3), 0 2px 0 2px rgba(255, 255, 255, 0.3), -4px 0 4px rgba(0, 83, 208, 1) inset, 0 4px 4px rgba(255, 255, 255, 0.3) inset,  4px 0 4px rgba(255, 255, 255, 0.3) inset, 0 -4px 4px rgba(0, 83, 208, 1) inset;
}

.input-box-0011 input[type=text]:focus::placeholder,
.input-box-0011 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.5s ease-in-out;
}

.input-box-0011 input[type=text]::placeholder {
    color: rgba(157, 196, 254, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0011 input[type=text]:focus,
.input-box-0011 input[type=text].has-value {
    border: 1px solid rgba(157, 196, 254, 1);
}
                    
/* ********************************************************* */
.input-box-0012 {
    position: relative;
}

.input-box-0012 input[type=text] {
    width: 300px;
    padding: 5px 5px 5px 10px;
    color: rgba(0, 128, 0, 1);
    background: rgba(194, 251, 215, 1);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    outline: none;
    box-shadow: rgba(44, 187, 99, 0.2) 0 -25px 18px -14px inset,rgba(44, 187, 99, 0.15) 0 1px 2px,rgba(44, 187, 99, 0.15) 0 2px 4px,rgba(44, 187, 99, 0.15) 0 4px 8px,rgba(44, 187, 99, 0.15) 0 8px 16px,rgba(44, 187, 99, 0.15) 0 16px 32px;
    transform: scale(1) rotate(0deg);
    transition: 0.5s ease-in-out;
}

.input-box-0012 input[type=text]:hover {
    box-shadow: rgba(44, 187, 99, 0.35) 0 -25px 18px -14px inset,rgba(44, 187, 99, 0.25) 0 1px 2px,rgba(44, 187, 99, 0.25) 0 2px 4px,rgba(44, 187, 99, 0.25) 0 4px 8px,rgba(44, 187, 99, 0.25) 0 8px 16px,rgba(44, 187, 99, 0.25) 0 16px 32px;
    transform: scale(1.05) rotate(1deg);
    transition: 0.5s ease-in-out;
}

.input-box-0012 input[type=text]:focus::placeholder,
.input-box-0012 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.5s ease-in-out;
}

.input-box-0012 input[type=text]::placeholder {
    color: rgba(82, 63, 63, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0012 input[type=text]:focus,
.input-box-0012 input[type=text].has-value {
    border: none;
    box-shadow: rgba(44, 187, 99, 0.35) 0 -25px 18px -14px inset,rgba(44, 187, 99, 0.25) 0 1px 2px,rgba(44, 187, 99, 0.25) 0 2px 4px,rgba(44, 187, 99, 0.25) 0 4px 8px,rgba(44, 187, 99, 0.25) 0 8px 16px,rgba(44, 187, 99, 0.25) 0 16px 32px;
    transform:  scale(1.05) rotate(1deg);
    transition: 0.5s ease-in-out;
}
/* ********************************************************* */
.input-text-0013 {
    position: relative;
}

.input-text-0013 input[type=text] {
    width: 300px;
    padding: 5px 5px 5px 10px;
    color: rgba(0, 83, 128, 1);
    background: rgba(194, 230, 251, 1);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    font-weight: 600;
    border: 3px solid rgba(0, 83, 128, 1);
    outline: none;
    box-shadow: rgba(44, 118, 187, 0.2) 0 -25px 18px -14px inset,rgba(44, 118, 187, 0.15) 0 1px 2px,rgba(44, 118, 187, 0.15) 0 2px 4px,rgba(44, 118, 187, 0.15) 0 4px 8px,rgba(44, 118, 187, 0.15) 0 8px 16px,rgba(44, 118, 187, 0.15) 0 16px 32px;
    transform: rotate(3deg);
    transition: 0.5s ease-in-out;
}

.input-text-0013 input[type=text]:focus,
.input-text-0013 input[type=text].has-value {
    border: 3px solid rgba(0, 83, 128, 1);
    box-shadow: rgba(44, 118, 187, 0.35) 0 -25px 18px -14px inset,rgba(44, 118, 187, 0.25) 0 1px 2px,rgba(44, 118, 187, 0.25) 0 2px 4px,rgba(44, 118, 187, 0.25) 0 4px 8px,rgba(44, 118, 187, 0.25) 0 8px 16px,rgba(44, 118, 187, 0.25) 0 16px 32px;
    transition: 0.5s ease-in-out;
}

.input-text-0013 input[type=text]:focus::placeholder,
.input-text-0013 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.5s ease-in-out;
}

.input-text-0013 input[type=text]::placeholder {
    color: rgba(82, 63, 63, 1);
    transition: 0.5s ease-in-out;
}
/* ********************************************************* */
.input-box-0014 {
    position: relative;
    width: 300px;
    background-color: rgba(33, 33, 33, 1);
    border-radius: 5px 5px 5px 5px;
    border: 3px double rgba(0, 0, 0, 1);
    outline: none;
    box-shadow: -2px -2px 5px rgba(64, 75, 78, 0.2)
    , 2px 2px 5px rgba(0, 0, 0, 0.9)
    , inset -2px -2px 5px rgba(64, 75, 78, 0.2)
    , inset 2px 2px 5px rgba(0, 0, 0, 0.9);
}

.input-box-0014 input[type=text] {
    position: relative;
    width: 300px;
    padding: 5px 5px 5px 10px;
    color: rgba(0, 83, 128, 1);
    background: rgba(254, 160, 76, 1);
    border-radius: 5px 5px 5px 5px;
    font-size: 16px;
    top: 5px;
    left: 5px;
    font-weight: 600;
    border: 3px double rgba(0, 0, 0, 1);
    box-shadow: -2px -2px 5px rgba(64, 75, 78, 0.2)
                    , 2px 2px 5px rgba(0, 0, 0, 0.9)
                    , inset -2px -2px 5px rgba(64, 75, 78, 0.2)
                    , inset 2px 2px 5px rgba(0, 0, 0, 0.9);
    outline: none;
}

.input-box-0014 input[type=text]:focus::placeholder,
.input-box-0014 input[type=text].has-value::placeholder {
    color: transparent;
}

.input-box-0014 input[type=text]:focus,
.input-box-0014 input[type=text].has-value {
    border: 3px double rgba(0, 0, 0, 1);
}

.input-box-0014 input[type=text]::placeholder {
    color: rgba(82, 63, 63, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0014-count {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    color: rgba(0, 83, 128, 1); 
    top: -10px;
    right: 10px;
    font-size: 12px;
    background: rgba(254, 160, 76, 1);
    padding: 0px 10px 0px 10px;
    border-radius: 3px 3px 3px 3px;
    border: 3px double rgba(0, 0, 0, 1);
    box-shadow: -2px -2px 5px rgba(64, 75, 78, 0.2)
                    , 2px 2px 5px rgba(0, 0, 0, 0.9)
                    , inset -2px -2px 5px rgba(64, 75, 78, 0.2)
                    , inset 2px 2px 5px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}
/* ********************************************************* */
.input-box-0015 {
    position: relative;
}

.input-box-0015 input[type=text] {
    position: relative;
    width: 300px;
    padding: 5px 5px 5px 10px;
    color: rgba(0, 83, 128, 1);
    background: rgba(61, 209, 231, 1);
    border-radius: 5px 5px 5px 5px;
    font-size: 16px;
    font-weight: 600;
    border: 3px double rgba(0, 0, 0, 1);
    box-shadow: -2px -2px 5px rgba(64, 75, 78, 0.2)
                    , 2px 2px 5px rgba(0, 0, 0, 0.9)
                    , inset -2px -2px 5px rgba(64, 75, 78, 0.2)
                    , inset 2px 2px 5px rgba(0, 0, 0, 0.9);
    outline: none;
    transition: 0.5s ease-in-out;
    transform: rotate(0deg);
}

.input-box-0015 input[type=text]:focus,
.input-box-0015 input[type=text].has-value {
    border: 3px double rgba(0, 0, 0, 1);
}

.input-box-0015-dotted {
    position: absolute;
    border-radius: 5px 5px 5px 5px;
    border: 2px dotted rgba(241, 241, 241, 1);
    top: -4px;
    left: 4px;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    transform: rotate(0deg);
}

.input-box-0015 input[type=text]::placeholder {
    color: rgba(82, 63, 63, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0015 input[type=text]:focus::placeholder,
.input-box-0015 input[type=text].has-value::placeholder {
    color: transparent;
}

.input-box-0015-count {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    color: rgba(0, 83, 128, 1); 
    top: -10px;
    right: 10px;
    font-size: 12px;
    background: rgba(61, 209, 231, 1);
    padding: 0px 10px 0px 10px;
    border-radius: 3px 3px 3px 3px;
    border: 2px dotted rgba(241, 241, 241, 1);
    box-shadow: -2px -2px 5px rgba(64, 75, 78, 0.2)
                    , 2px 2px 5px rgba(0, 0, 0, 0.9)
                    , inset -2px -2px 5px rgba(64, 75, 78, 0.2)
                    , inset 2px 2px 5px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    z-index: 3;
    transform: rotate(0deg);
}
                    
/* ********************************************************* */
.input-box-0016 {
    position: relative;
    width: 300px;
    background-color: transparent;
    border-radius: 5px 5px 5px 5px;
    outline: none;
    box-shadow: rgba(203, 220, 241, 1) 4px 4px 0 0,rgba(1, 1, 1, 1) 4px 4px 0 1px;
}

.input-box-0016 input[type=text] {
    position: relative;
    width: 300px;
    padding: 5px 70px 5px 10px;
    color: rgba(0, 83, 128, 1);
    background: rgba(203, 220, 241, 1);
    border-radius: 5px 5px 5px 5px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid rgba(203, 220, 241, 1);
    box-shadow: -2px -2px 5px rgba(64, 75, 78, 0.2)
                    , 2px 2px 5px rgba(0, 0, 0, 0.9)
                    , inset -2px -2px 5px rgba(64, 75, 78, 0.2)
                    , inset 2px 2px 5px rgba(0, 0, 0, 0.9);
    outline: none;
}

.input-box-0016 input[type=text]:focus::placeholder,
.input-box-0016 input[type=text].has-value::placeholder {
    color: transparent;
}

.input-box-0016 input[type=text]:focus,
.input-box-0016 input[type=text].has-value {
    border: 1px solid rgba(241, 241, 241, 1);
}

.input-box-0016 input[type=text]::placeholder {
    color: rgba(82, 63, 63, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0016-count {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    color: rgba(0, 83, 128, 1); 
    top: 8px;
    right: 6px;
    font-size: 12px;
    background: rgba(203, 220, 241, 1);
    padding: 0px 10px 0px 10px;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid rgba(203, 220, 241, 1);
    box-shadow: -2px -2px 5px rgba(64, 75, 78, 0.2)
                    , 2px 2px 5px rgba(0, 0, 0, 0.9)
                    , inset -2px -2px 5px rgba(64, 75, 78, 0.2)
                    , inset 2px 2px 5px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}
/* ********************************************************* */
.input-box-0017 {
    position: relative;
}

.input-box-0017 input[type=text] {
    width: 300px;
    padding: 5px 5px 5px 10px;
    color: rgba(0, 83, 128, 1);
    background-color: rgba(241, 241, 241, 1);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid rgba(173, 207, 255, 1);
    box-shadow: inset 0 -12px 6px rgba(173, 207, 255, 1);
    outline: none;
}

.input-box-0017 input[type=text]:focus::placeholder,
.input-box-0017 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.5s ease-in-out;
}

.input-box-0017 input[type=text]::placeholder {
    color: rgba(82, 63, 63, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0017 input[type=text]:focus,
.input-box-0017 input[type=text].has-value {
    border: 1px solid rgba(173, 207, 255, 1);
}

.input-box-0017-count {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    color: rgba(0, 83, 128, 1); 
    top: -10px;
    right: 10px;
    font-size: 12px;
    background-color: rgba(241, 241, 241, 1);
    padding: 0px 10px 0px 10px;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(173, 207, 255, 1);
    box-shadow: inset 0 -6px 3px rgba(173, 207, 255, 1);
    pointer-events: none;
}
                    
/* ********************************************************* */
.input-box-0018 {
    position: relative;
}

.input-box-0018 input[type=text] {
    width: 300px;
    padding: 5px 5px 5px 10px;
    color: rgba(173, 216, 230, 1);
    background-color: rgba(40, 40, 45, 1);
    border-radius: 5px 5px 5px 5px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    outline: none;
    transition: 0.5s ease-in-out;
}

.input-box-0018 input[type=text]:focus,
.input-box-0018 input[type=text].has-value {
    border: none;
}

.input-box-0018-bottom {
    position: absolute;
    bottom: -8px;
    left: -5px;
    width: 310px;
    background-color: rgba(106, 113, 129, 1);
    height: 5px;
    border-radius: 5px;
}

.input-box-0018 input[type=text]::placeholder {
    color: rgba(173, 216, 230, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0018 input[type=text]:focus::placeholder,
.input-box-0018 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.5s ease-in-out;
}
                                      
/* ********************************************************* */
.input-box-0019 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 40px;
    background-color: rgba(40, 40, 45, 0);
    border-radius: 5px 5px 5px 5px;
    border: none;
}

.input-box-0019 input[type=text] {
    background-color: transparent;
    width: 100%;
    padding: 5px 20px 5px 20px;
    color: rgba(173, 216, 230, 1);
    font-size: 16px;
    font-weight: 600;
    border: none;
    outline: none;
    transition: 0.5s ease-in-out;
}

.input-box-0019 input[type=text]:focus,
.input-box-0019 input[type=text].has-value {
    border: none;
}

.input-box-0019 input[type=text]::placeholder {
    color: rgba(173, 216, 230, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0019 input[type=text]:focus::placeholder,
.input-box-0019 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.5s ease-in-out;
}
            
.input-box-0019-box-top {
    position: absolute;
    top: 10px;
    left: 0px;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: rgba(55, 59, 68, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0019-box-bottom {
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: rgba(55, 59, 68, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0019-box-left {
    position: absolute;
    top: 0px;
    left: 10px;
    width: 3px;
    height: 100%;
    border-radius: 3px;
    background-color: rgba(55, 59, 68, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0019-box-right {
    position: absolute;
    top: 0px;
    right: 10px;
    width: 3px;
    height: 100%;
    border-radius: 3px;
    background-color: rgba(55, 59, 68, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0019:hover .input-box-0019-box-top {
    top: 5px;
    transition: 0.5s ease-in-out;
}

.input-box-0019:hover .input-box-0019-box-bottom {
    bottom: 5px;
    transition: 0.5s ease-in-out;
}

.input-box-0019:hover .input-box-0019-box-left {
    left: 5px;
    transition: 0.5s ease-in-out;
}

.input-box-0019:hover .input-box-0019-box-right {
    right: 5px;
    transition: 0.5s ease-in-out;
}      

.input-box-0019  input[type=text]:focus ~ .input-box-0019-box-top,
.input-box-0019  input[type=text].has-value ~ .input-box-0019-box-top {
    top: 5px;
    transition: 0.5s ease-in-out;
}

.input-box-0019  input[type=text]:focus ~ .input-box-0019-box-bottom,
.input-box-0019  input[type=text].has-value ~ .input-box-0019-box-bottom {
    bottom: 5px;
    transition: 0.5s ease-in-out;
}

.input-box-0019  input[type=text]:focus ~ .input-box-0019-box-left,
.input-box-0019  input[type=text].has-value ~ .input-box-0019-box-left {
    left: 5px;
    transition: 0.5s ease-in-out;
}

.input-box-0019  input[type=text]:focus ~ .input-box-0019-box-right,
.input-box-0019  input[type=text].has-value ~ .input-box-0019-box-right {
    right: 5px;
    transition: 0.5s ease-in-out;
}     
/* ********************************************************* */
.input-text-0020 {
    position: relative;
}

.input-text-0020 input[type=text] {
    width: 300px;
    padding: 5px 10px 5px 10px;
    color: rgba(82, 63, 63, 1);
    background: linear-gradient(to bottom, rgba(167, 209, 41, 1) 0%, rgba(97, 111, 57, 1) 100%);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid rgba(97, 111, 57, 1);
    box-shadow: 0 6px 2px -1px rgba(50, 57, 29, 1);
    outline: none;
    transform: perspective(500px) rotateX(15deg);
}

.input-text-0020 input[type=text]:focus::placeholder,
.input-text-0020 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.01s ease-in-out;
}

.input-text-0020 input[type=text]::placeholder {
    color: rgba(82, 63, 63, 1);
    transition: 0.01s ease-in-out;
}

.input-text-0020 input[type=text]:focus,
.input-text-0020 input[type=text].has-value {
    border: 1px solid rgba(97, 111, 57, 1);
}

.input-text-0020-count {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    color: rgba(82, 63, 63, 1); 
    top: -14px;
    right: 10px;
    font-size: 12px;
    background: linear-gradient(to bottom, rgba(167, 209, 41, 1) 0%, rgba(97, 111, 57, 1) 100%);
    padding: 0px 10px 0px 10px;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(97, 111, 57, 1);
    box-shadow: 0 6px 2px -1px rgba(50, 57, 29, 1);
    pointer-events: none;
    transform: perspective(50px) rotateX(15deg);
}
/* ********************************************************* */
.input-text-0021 {
    position: relative;
}

.input-text-0021 input[type=text] {
    width: 300px;
    padding: 5px 70px 5px 10px;
    color: rgba(200, 170, 170, 1);
    background-color: rgba(17, 17, 17, 1);
    background-image: radial-gradient(76% 151% at 52% -52%, rgba(255, 255, 255, 0.23) 0%, transparent 100%);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
    outline: none;
}

.input-text-0021 input[type=text]:focus::placeholder,
.input-text-0021 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.01s ease-in-out;
}

.input-text-0021 input[type=text]::placeholder {
    color: rgba(200, 170, 170, 1);
    transition: 0.01s ease-in-out;
}

.input-text-0021 input[type=text]:focus,
.input-text-0021 input[type=text].has-value {
    border: none;
    filter: brightness(1.3);
}

.input-text-0021-count {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    color: rgba(200, 170, 170, 1); 
    top: 7px;
    right: 5px;
    font-size: 12px;
    background-color: rgba(17, 17, 17, 1);
    background-image: radial-gradient(76% 151% at 52% -52%, rgba(255, 255, 255, 0.23) 0%, transparent 100%);
    padding: 0px 10px 0px 10px;
    border-radius: 5px 5px 5px 5px;
    border: none;
    box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
    pointer-events: none;
}
                        
.input-text-0021 input[type=text]:focus ~ .input-text-0021-count,
.input-text-0021 input[type=text].has-value ~ .input-text-0021-count {
    filter: brightness(1.3);
}                    
/* ********************************************************* */
.input-text-0022 {
    position: relative;
}

.input-text-0022 input[type=text] {
    width: 300px;
    padding: 5px 10px 5px 10px;
    color: rgba(115, 236, 139, 1);
    background-color: rgba(21, 179, 146, 1);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    font-weight: 600;
    border: 4px solid rgba(115, 236, 139, 1);
    box-shadow: 0 0 4px 1px rgba(115, 236, 139, 1), 0 0 16px 4px rgba(84, 195, 146, 0.8), inset 0 0 6px 1px rgba(115, 236, 139, 1);
    outline: none;
}

.input-text-0022 input[type=text]:focus::placeholder,
.input-text-0022 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.01s ease-in-out;
}

.input-text-0022 input[type=text]::placeholder {
    color: rgba(115, 236, 139, 1);
    transition: 0.01s ease-in-out;
}

.input-text-0022 input[type=text]:focus,
.input-text-0022 input[type=text].has-value {
    border: 4px solid rgba(115, 236, 139, 1);
    filter: brightness(1.1);
}

.input-text-0022-count {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    color: rgba(115, 236, 139, 1); 
    top: -10px;
    right: 10px;
    font-size: 12px;
    background-color: rgba(21, 179, 146, 1);
    padding: 0px 10px 0px 10px;
    border-radius: 5px 5px 5px 5px;
    border: 2px solid rgba(115, 236, 139, 1);
    box-shadow: 0 0 4px 1px rgba(115, 236, 139, 1), 0 0 16px 4px rgba(84, 195, 146, 0.8), inset 0 0 6px 1px rgba(115, 236, 139, 1);
    pointer-events: none;
}
                        
.input-text-0022 input[type=text]:focus ~ .input-text-0022-count,
.input-text-0022 input[type=text].has-value ~ .input-text-0022-count {
    filter: brightness(1.1);
}                    
/* ********************************************************* */
.input-text-0023 {
    position: relative;
}

.input-text-0023 input[type=text] {
    width: 300px;
    padding: 5px 10px 5px 10px;
    color: rgba(241, 241, 241, 1);
    background-color: rgba(0, 0, 0, 1);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    box-shadow: inset 0 0px 5px 0px rgba(255, 255, 255, 0.15), inset 0px 3px 5px 0px rgba(255, 255, 255, 0.1), inset 0px 1px 3px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
    outline: none;
}

.input-text-0023 input[type=text]:focus::placeholder,
.input-text-0023 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.01s ease-in-out;
}

.input-text-0023 input[type=text]::placeholder {
    color: rgba(241, 241, 241, 1);
    transition: 0.01s ease-in-out;
}

.input-text-0023 input[type=text]:focus,
.input-text-0023 input[type=text].has-value {
    border: none;
    filter: brightness(1.3);
}        
/* ********************************************************* */

.input-text-0024 {
    width: 100%;
    padding: 10px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 8px 8px 8px 8px;
    border: none;
    outline: none;
    transition: all 150ms ease-in-out;
    color: rgba(255, 255, 255, 1);
    background-image: linear-gradient(0deg, rgb(65, 85, 139) 0%, rgba(41, 53, 86, 1) 50%, rgba(89, 131, 252, 1) 50%, rgba(89, 131, 252, 1) 100%);
}
.input-text-0024:focus::placeholder{
    color: transparent;
}
.input-text-0024::placeholder{
    color: rgba(255, 255, 255, 1);
    font-weight: 600;
    transition: color 0.5s ease;
}
.input-text-0024:focus{
    filter: brightness(1.1);
}
.span-text-0024{
    position: absolute;
    color: rgba(255, 255, 255, 1);
    left: 40px;
    top: 10px;
    font-weight: 600;
    transition: all 0.5s ease-in-out;
    pointer-events: none;
}
/* ********************************************************* */
.input-box-0025 {
    position: relative;
}

.input-box-0025 input[type=text] {
    width: 100%;
    padding: 5px 70px 5px 10px;
    color: rgba(0, 63, 63, 1);
    background-image: linear-gradient(-75deg, rgba(0, 108, 254, 1) 0%, rgba(236, 255, 207, 1) 50%, rgba(255, 134, 0, 1) 75%, rgba(255, 0, 102, 1) 100%);
    border-radius: 100px 25px 25px 100px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    outline: none;
    box-shadow: -5px -5px 15px rgba(64, 75, 78, 0.2)
    , 5px 5px 15px rgba(0, 0, 0, 0.9)
    , inset -5px -5px 15px rgba(64, 75, 78, 0.2)
    , inset 5px 5px 15px rgba(0, 0, 0, 0.9);
}

.input-box-0025 input[type=text]:focus::placeholder,
.input-box-0025 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.5s ease-in-out;
}

.input-box-0025 input[type=text]::placeholder {
    color: rgba(82, 206, 189, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0025 input[type=text]:focus,
.input-box-0025 input[type=text].has-value {
    border: none;
}

.input-box-0025-count {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    color: rgba(241, 241, 241, 1); 
    box-shadow: -5px -5px 15px rgba(64, 75, 78, 0.2)
    , 5px 5px 15px rgba(0, 0, 0, 0.9)
    , inset -5px -5px 15px rgba(64, 75, 78, 0.2)
    , inset 5px 5px 15px rgba(0, 0, 0, 0.9);
    top: 6px;
    right: 4px;
    font-size: 14px;
    background-image: linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(100, 255, 255, 1) 75%, rgba(0, 0, 255, 1) 100%);
    padding: 0px 5px 0px 5px;
    border-radius: 100px 30px 30px 100px;
    border: none;
    pointer-events: none;
}
/* ********************************************************* */
.input-box-0026 {
    position: relative;
}

.input-box-0026 input[type=text] {
    width: 300px;
    padding: 2px 20px 2px 20px;
    color: rgba(255, 128, 0, 1);
    background: rgba(194, 92, 215, 1);
    border-radius: 3px 3px 3px 3px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid rgba(255, 196, 254, 1);
    outline: none;
    box-shadow: rgba(44, 0, 99, 0.2) 0 -25px 18px -14px inset,rgba(44, 0, 99, 0.15) 0 1px 2px,rgba(44, 0, 99, 0.15) 0 2px 4px,rgba(44, 0, 99, 0.15) 0 4px 8px,rgba(44, 0, 99, 0.15) 0 8px 16px,rgba(44, 0, 99, 0.15) 0 16px 32px;
    transform:  scale(1.01) rotate(2deg);
    transition: 0.5s ease-in-out;
}

.input-box-0026 input[type=text]:hover {
    box-shadow: rgba(44, 0, 99, 0.35) 0 -25px 18px -14px inset,rgba(44, 0, 99, 0.25) 0 1px 2px,rgba(44, 0, 99, 0.25) 0 2px 4px,rgba(44, 0, 99, 0.25) 0 4px 8px,rgba(44, 0, 99, 0.25) 0 8px 16px,rgba(44, 0, 99, 0.25) 0 16px 32px;
    transform: scale(1.1) rotate(-2deg);
    transition: 0.5s ease-in-out;
}

.input-box-0026 input[type=text]:focus::placeholder,
.input-box-0026 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.5s ease-in-out;
}

.input-box-0026 input[type=text]::placeholder {
    color: rgba(0, 63, 255, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0026 input[type=text]:focus,
.input-box-0026 input[type=text].has-value {
    transform: scale(1.1) rotate(-2deg);
    box-shadow: rgba(44, 0, 99, 0.35) 0 -25px 18px -14px inset,rgba(44, 0, 99, 0.25) 0 1px 2px,rgba(44, 0, 99, 0.25) 0 2px 4px,rgba(44, 0, 99, 0.25) 0 4px 8px,rgba(44, 0, 99, 0.25) 0 8px 16px,rgba(44, 0, 99, 0.25) 0 16px 32px;
    border: 2px solid rgba(0, 196, 254, 1);
}

.input-box-0026-count {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    color: rgba(255, 128, 0, 1); 
    box-shadow: rgba(255, 255, 63, 0.2) 0 -25px 18px -14px inset,rgba(255, 255, 63, 0.15) 0 1px 2px,rgba(255, 255, 63, 0.15) 0 2px 4px,rgba(255, 255, 63, 0.15) 0 4px 8px,rgba(255, 255, 63, 0.15) 0 8px 16px,rgba(255, 255, 63, 0.15) 0 16px 32px;
    top: -19px;
    right: -5px;
    font-size: 14px;
    background: rgba(255, 255, 255, 1);
    padding: 0px 5px 0px 5px;
    border-radius: 3px 3px 3px 3px;
    border: 2px solid rgba(255, 71, 0, 1);
    pointer-events: none;
    transform:  scale(1.01) rotate(-12deg);
    transition: 0.5s ease-in-out;
}

.input-box-0026 input[type=text]:focus ~ .input-box-0026-count,
.input-box-0026 input[type=text].has-value ~ .input-box-0026-count {
    transform:  scale(1.1) rotate(4deg);
    transition: 0.5s ease-in-out;
}

.input-box-0026 input[type=text]:hover ~ .input-box-0026-count {
    transform:  scale(1.1) rotate(4deg);
    transition: 0.5s ease-in-out;
}
/* ********************************************************* */
.input-box-0027 {
    position: relative;
}

.input-box-0027 input[type=text] {
    width: 300px;
    padding: 0px 10px 0px 10px;
    color: rgba(0, 255, 241, 1);
    background-image: linear-gradient(0deg, rgba(65, 255, 139, 1) 0%, rgba(41, 0, 86, 1) 50%, rgba(255, 131, 252, 1) 50%, rgba(0, 131, 252, 1) 100%);
    border-radius: 40px 80px 40px 80px;
    font-size: 16px;
    font-weight: 600;
    border: 3px double rgba(97, 111, 57, 1);
    box-shadow: inset 0 0px 5px 0px rgba(255, 255, 255, 0.15), inset 0px 3px 5px 0px rgba(255, 255, 255, 0.1), inset 0px 1px 3px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
    outline: none;
}

.input-box-0027 input[type=text]:focus::placeholder,
.input-box-0027 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.5s ease-in-out;
}

.input-box-0027 input[type=text]::placeholder {
    color: rgba(0, 241, 255, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0027 input[type=text]:focus,
.input-box-0027 input[type=text].has-value {
    border: 3px double rgba(97, 0, 255, 1);
    filter: brightness(1.2);
}

.input-box-0027-count {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    color: rgba(0, 255, 241, 1); 
    top: -20px;
    right: 10px;
    font-size: 12px;
    background-image: linear-gradient(0deg, rgba(255, 85, 139, 1) 0%, rgba(41, 53, 255, 1) 50%, rgba(89, 0, 252, 1) 50%, rgba(89, 255, 0, 1) 100%);
    padding: 0px 10px 0px 10px;
    border-radius: 75px 25px 45px 35px;
    border: 4px double rgba(31, 0, 255, 1);
    box-shadow: inset 0 0px 3px 0px rgba(255, 255, 255, 0.15), inset 0px 2px 3px 0px rgba(255, 255, 255, 0.1), inset 0px 1px 2px 0px rgba(255, 255, 255, 0.4), inset 0px 1px 5px 0px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
                        
.input-box-0027 input[type=text]:focus ~ .input-box-0027-count,
.input-box-0027 input[type=text].has-value ~ .input-box-0027-count {
    filter: brightness(1.4);
}
/* ********************************************************* */
.input-box-0028 {
    position: relative;
}

.input-box-0028 input[type=text] {
    width: 300px;
    padding: 5px 10px 5px 10px;
    color: rgba(254, 254, 0, 1);
    background: linear-gradient(to bottom, rgba(167, 0, 41, 1) 0%, rgba(255, 111, 57, 1) 100%);
    border-radius: 100px 8px 8px 100px;
    font-size: 16px;
    font-weight: 600;
    border: 3px dashed rgba(255, 111, 57, 1);
    box-shadow: 0 6px 2px -1px rgba(161, 0, 29, 1);
    outline: none;
    transform: perspective(500px) rotateX(15deg);
}

.input-box-0028 input[type=text]:focus::placeholder,
.input-box-0028 input[type=text].has-value::placeholder {
    color: transparent;
    transition: 0.5s ease-in-out;
}

.input-box-0028 input[type=text]::placeholder {
    color: rgba(0, 255, 255, 1);
    transition: 0.5s ease-in-out;
}

.input-box-0028 input[type=text]:focus,
.input-box-0028 input[type=text].has-value {
    border: 3px dashed rgba(255, 188, 57, 1);
}

.input-box-0028-count {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    color: rgba(0, 255, 255, 1); 
    top: -15px;
    right: 10px;
    font-size: 12px;
    background: linear-gradient(to bottom, rgba(167, 209, 255, 1) 0%, rgba(0, 69, 255, 1) 100%);
    padding: 0px 10px 0px 10px;
    border-radius: 100px 5px 5px 100px;
    border: 3px double rgba(97, 111, 255, 1);
    box-shadow: 0 6px 2px -1px rgba(49, 0, 179, 1);
    pointer-events: none;
    transform: perspective(50px) rotateX(15deg);
}
/* ********************************************************* */