/* **************************************************************** */
.input-box-0001 {
    position: relative;
}
.input-box-0001 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-normal, 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-0001 input[type=text]:focus::placeholder{
    color: transparent;
}

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

.input-box-0001 input[type=text]:focus,
.input-box-0001 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0001-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-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);
    pointer-events: none;
}
/* **************************************************************** */
.input-box-0002 {
    position: relative;
}

.input-box-0002 input[type=text] {  
    border: var(--border-normal, 2px solid rgb(207, 240, 23));  
    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;
}

.input-box-0002 input[type=text].has-value,
.input-box-0002 input[type=text]:focus {
    color: var(--text-color-under, rgba(240, 164, 23, 1));       
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0002-placeholder {
    position: absolute;
    background-color: transparent;
    font-size: var(--placeholder-font-size-normal, 12px);
    color: var(--placeholder-normal-text-color, rgba(82, 63, 63, 1));
    top: var(--position-normal-top, 10px);
    left: var(--position-normal-left, 10px);
    padding: var(--placeholder-box-padding-normal, 2px 8px);
    pointer-events: none;
}

.input-box-0002 input[type=text]:focus ~ .input-box-0002-placeholder,
.input-box-0002 input[type=text].has-value ~ .input-box-0002-placeholder {
    font-size: var(--placeholder-font-size-focus, 10px);
    background-color: var(--bg-placeholder-color, rgba(240, 164, 23, 1));
    color: var(--placeholder-focus-text-color, rgba(240, 164, 23, 1));
    border: var(--border-placeholder, 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: var(--position-focus-top, -18px);
    left: var(--position-focus-left, 10px);
    padding: var(--placeholder-box-padding-focus, 2px 8px);
}

.input-box-0002-count {
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 1px 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);
    pointer-events: none;
}
/* **************************************************************** */
.input-box-0003 {
    position: relative;
}

.input-box-0003 input[type=text] {
    border: var(--border-normal, 2px solid rgb(207, 240, 23));  
    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;
}

.input-box-0003 input[type=text].has-value,
.input-box-0003 input[type=text]:focus {
    color: var(--text-color-under, rgba(240, 164, 23, 1));       
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0003-span-box {
    position: absolute;
    width: 100%;
    top: var(--position-placeholder-box-normal-top, 0px);
    left: var(--position-placeholder-box-normal-left, 0px);
}

.input-box-0003-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: var(--position-icon-box-top, 0px);
    left: var(--position-icon-box-left, 8px);
    color: var(--icon-color, rgba(82, 63, 63, 1));
    border-right: var(--vertical-line, 1px solid rgb(207, 240, 23));
    opacity: 1;
    pointer-events: none;
}

.input-box-0003 input[type=text].has-value ~ .input-box-0003-span-box .input-box-0003-icon,
.input-box-0003 input[type=text]:focus ~ .input-box-0003-span-box .input-box-0003-icon {
    opacity: 0;
}

.input-box-0003-placeholder {
    position: absolute;
    background-color: transparent;
    color: var(--placeholder-normal-text-color, rgba(82, 63, 63, 1));
    font-size: var(--placeholder-font-size-normal, 12px);
    top: var(--position-normal-top, 10px);
    left: var(--position-normal-left, 50px);
    padding: var(--placeholder-box-padding-normal, 2px 8px);
    pointer-events: none;
}

.input-box-0003 input[type=text]:focus ~ .input-box-0003-span-box .input-box-0003-placeholder,
.input-box-0003 input[type=text].has-value ~ .input-box-0003-span-box .input-box-0003-placeholder {
    width: var(--placeholder-box-width, 120px);
    font-size: var(--placeholder-font-size-focus, 10px);
    background-color: var(--bg-placeholder-color, rgba(240, 164, 23, 1));
    color: var(--placeholder-focus-text-color, rgba(240, 164, 23, 1));
    border: var(--border-placeholder, 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);
    padding: var(--placeholder-box-padding-focus, 2px 8px);
}

.input-box-0003 input[type=text].has-value ~ .input-box-0003-span-box,
.input-box-0003 input[type=text]:focus ~ .input-box-0003-span-box,
.input-box-0003 input[type=text]:focus ~ .input-box-0003-span-box .input-box-0003-placeholder,
.input-box-0003 input[type=text].has-value ~ .input-box-0003-span-box .input-box-0003-placeholder,
.input-box-0003 input[type=text].has-value ~ .input-box-0003-span-box .input-box-0003-icon,
.input-box-0003 input[type=text]:focus ~ .input-box-0003-span-box .input-box-0003-icon {
    top: var(--position-placeholder-box-focus-top, -10px);
    left: var(--position-placeholder-box-focus-left, -5px);
}

.input-box-0003-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 1px 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);
    pointer-events: none;
}
/* **************************************************************** */
.input-box-0004 {
    position: relative;
}

.input-box-0004 input[type=text] {
    border: var(--border-normal, 2px solid rgb(207, 240, 23));  
    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;
}

.input-box-0004 input[type=text].has-value,
.input-box-0004 input[type=text]:focus {
    color: var(--text-color-under, rgba(240, 164, 23, 1));       
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0004-span-box {
    position: absolute;
    width: 100%;
    top: var(--position-placeholder-box-normal-top, 0px);
    left: var(--position-placeholder-box-normal-left, 0px);
}

.input-box-0004-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: var(--position-icon-box-top, 0px);
    left: var(--position-icon-box-left, 8px);
    color: var(--icon-color, rgba(82, 63, 63, 1));
    border-right: var(--vertical-line, 1px solid rgb(207, 240, 23));
    opacity: 1;
    pointer-events: none;
}

.input-box-0004 input[type=text].has-value ~ .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 {
    opacity: 0;
}

.input-box-0004-placeholder {
    position: absolute;
    background-color: transparent;
    font-size: var(--placeholder-font-size-normal, 12px);
    color: var(--placeholder-normal-text-color, rgba(82, 63, 63, 1));
    top: var(--position-normal-top, 10px);
    left: var(--position-normal-left, 50px);
    padding: var(--placeholder-box-padding-normal, 2px 8px);
    pointer-events: none;
}

.input-box-0004 input[type=text]:focus ~ .input-box-0004-span-box .input-box-0004-placeholder,
.input-box-0004 input[type=text].has-value ~ .input-box-0004-span-box .input-box-0004-placeholder {
    font-size: var(--placeholder-font-size-focus, 12px);
    width: var(--placeholder-box-width, 120px);
    background-color: var(--bg-placeholder-color, rgba(240, 164, 23, 1));
    color: var(--placeholder-focus-text-color, rgba(240, 164, 23, 1));
    border: var(--border-placeholder, 2px solid rgba(240, 164, 23, 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);
    padding: var(--placeholder-box-padding-focus, 2px 8px);
}

.input-box-0004 input[type=text].has-value ~ .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].has-value ~ .input-box-0004-span-box .input-box-0004-placeholder,
.input-box-0004 input[type=text].has-value ~ .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: var(--position-placeholder-box-focus-top, -10px);
    left: var(--position-placeholder-box-focus-left, -5px);
}

.input-box-0004-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 1px 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);
    pointer-events: none;
}
/* **************************************************************** */
.input-box-0005 {
    position: relative;
}

.input-box-0005 input[type=text] {  
    border: none;
    border-bottom: var(--border-normal, 2px solid rgb(207, 240, 23)); 
    outline: none;
}

.input-box-0005 input[type=text].has-value,
.input-box-0005 input[type=text]:focus {
    color: var(--text-color-under, rgba(240, 164, 23, 1));       
    border: none;
    border-bottom: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0005-placeholder {
    position: absolute;
    background-color: transparent;
    font-size: var(--placeholder-font-size-normal, 12px);
    color: var(--placeholder-normal-text-color, rgba(82, 63, 63, 1));
    top: var(--position-normal-top, 10px);
    left: var(--position-normal-left, 10px);
    padding: var(--placeholder-box-padding-normal, 2px 8px);
    pointer-events: none;
}

.input-box-0005 input[type=text]:focus ~ .input-box-0005-placeholder,
.input-box-0005 input[type=text].has-value ~ .input-box-0005-placeholder {
    font-size: var(--placeholder-font-size-focus, 12px);
    background-color: var(--bg-placeholder-color, rgba(240, 164, 23, 1));
    color: var(--placeholder-focus-text-color, rgba(240, 164, 23, 1));
    border: var(--border-placeholder, 2px solid rgba(240, 164, 23, 1));
    border-bottom: none;
    top: var(--position-focus-top, -18px);
    left: var(--position-focus-left, 10px);
    padding: var(--placeholder-box-padding-focus, 2px 8px);
}

.input-box-0005-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1));
    pointer-events: none;
}
/* **************************************************************** */
.input-box-0006 {
    position: relative;
}

.input-box-0006 input[type=text] {  
    border: none;
    border-bottom: var(--border-normal, 2px solid rgb(207, 240, 23)); 
    outline: none;
}

.input-box-0006 input[type=text].has-value,
.input-box-0006 input[type=text]:focus {   
    color: var(--text-color-under, rgb(207, 240, 23));
    border: none;
    border-bottom: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0006-placeholder {
    position: absolute;
    background-color: transparent;
    color: var(--placeholder-normal-text-color, rgba(82, 63, 63, 1));
    font-size: var(--placeholder-font-size-normal, 12px);
    top: var(--position-normal-top, 10px);
    left: var(--position-normal-left, 10px);
    padding: var(--placeholder-box-padding-normal, 2px 8px);
    pointer-events: none;
}

.input-box-0006 input[type=text]:focus ~ .input-box-0006-placeholder,
.input-box-0006 input[type=text].has-value ~ .input-box-0006-placeholder {
    background-color: var(--bg-placeholder-color, rgba(240, 164, 23, 1));
    color: var(--placeholder-focus-text-color, rgba(240, 164, 23, 1));
    font-size: var(--placeholder-font-size-focus, 10px);
    border: var(--border-placeholder, 2px solid rgba(240, 164, 23, 1));
    top: var(--position-focus-top, -18px);
    left: var(--position-focus-left, 10px);
    padding: var(--placeholder-box-padding-focus, 2px 8px);
}

.input-box-0006-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1));
    pointer-events: none;
}
/* **************************************************************** */
.input-box-0007 {
    position: relative;
}

.input-box-0007 input[type=text] {  
    border: none;
    border-bottom: var(--border-normal, 2px solid rgb(207, 240, 23)); 
    outline: none;
}

.input-box-0007 input[type=text].has-value,
.input-box-0007 input[type=text]:focus {   
    color: var(--text-color-under, rgb(207, 240, 23));
    border: none;
    border-bottom: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0007-placeholder {
    position: absolute;
    background-color: transparent;
    color: var(--placeholder-normal-text-color, rgba(82, 63, 63, 1));
    font-size: var(--placeholder-font-size-normal, 12px);
    top: var(--position-normal-top, 10px);
    left: var(--position-normal-left, 10px);
    padding: var(--placeholder-box-padding-normal, 2px 8px);
    pointer-events: none;
    border-bottom: none;
}

.input-box-0007 input[type=text]:focus ~ .input-box-0007-placeholder,
.input-box-0007 input[type=text].has-value ~ .input-box-0007-placeholder {
    background-color: var(--bg-placeholder-color, rgba(240, 164, 23, 1));
    color: var(--placeholder-focus-text-color, rgba(240, 164, 23, 1));
    font-size: var(--placeholder-font-size-focus, 10px);
    border: var(--border-placeholder, 2px solid rgba(240, 164, 23, 1));
    top: var(--position-focus-top, -18px);
    left: var(--position-focus-left, 10px);
    padding: var(--placeholder-box-padding-focus, 2px 8px);
}

.input-box-0007-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1));
    pointer-events: none;
}
/* **************************************************************** */
.input-box-0008 {
    position: relative;
}
.input-box-0008 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: none;
    border-bottom: var(--border-normal, 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-0008 input[type=text]:focus::placeholder{
    color: transparent;
}

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

.input-box-0008 input[type=text]:focus,
.input-box-0008 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: none;
    border-bottom: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0008-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: none;
    border-bottom: var(--box-count-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);
    pointer-events: none;
}
/* **************************************************************** */
.input-box-0009 {
    position: relative;
}
.input-box-0009 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: none;
}

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

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

.input-box-0009 input[type=text]:focus,
.input-box-0009 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0009-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    pointer-events: none;
}
/* **************************************************************** */
.input-box-0010 {
    position: relative;
}
.input-box-0010 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, 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-0010 input[type=text]:focus::placeholder{
    color: transparent;
    transition: var(--transition-time, 0.5s ease-in-out);
}

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

.input-box-0010 input[type=text]:focus,
.input-box-0010 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0010-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-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);
    pointer-events: none;
}
/* **************************************************************** */
.input-box-0011 {
    position: relative;
}
.input-box-0011 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: none;
}

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

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

.input-box-0011 input[type=text]:focus,
.input-box-0011 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0011-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    pointer-events: none;
}
/* **************************************************************** */
.input-box-0012 {
    position: relative;
}
.input-box-0012 input[type=text] {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: none;
    box-shadow: var(--input-box-shadow-normal, 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: var(--rotation-scale-normal-text-box, scale(1) rotate(0deg));
}
.input-box-0012 input[type=text]:hover {
    box-shadow: var(--input-box-shadow-focus, 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: var(--rotation-scale-focus-text-box, scale(1.05) rotate(1deg));
}

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

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

.input-box-0012 input[type=text]:focus,
.input-box-0012 input[type=text].has-value {
    box-shadow: var(--input-box-shadow-focus, 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);
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
    transform: var(--rotation-scale-focus-text-box, scale(1.05) rotate(1deg));
}

.input-box-0012-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    box-shadow: var(--box-count-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);
    pointer-events: none;
    transform:  var(--character-box-count-rotation-scale-normal, scale(1.00) rotate(0deg));
    transition: var(--transition-time, 0.5s ease-in-out);
}

.input-box-0012 input[type=text]:focus ~ .input-box-0012-count,
.input-box-0012 input[type=text].has-value ~ .input-box-0012-count {
    transform:  var(--character-box-count-rotation-scale-focus, scale(1.05) rotate(2deg));
    transition: var(--transition-time, 0.5s ease-in-out);
}

.input-box-0012 input[type=text]:hover ~ .input-box-0012-count {
    transform:  var(--character-box-count-rotation-scale-focus, scale(1.05) rotate(2deg));
    transition: var(--transition-time, 0.5s ease-in-out);
}
/* **************************************************************** */
.input-box-0013 {
    position: relative;
}
.input-box-0013 input[type=text] {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: none;
    box-shadow: var(--input-box-shadow-normal, 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: var(--rotation-scale-normal-text-box, rotate(0deg));
}

.input-box-0013 input[type=text]:focus::placeholder{
    color: transparent;
    transition: var(--transition-time, 0.5s ease-in-out);
}

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

.input-box-0013 input[type=text]:focus,
.input-box-0013 input[type=text].has-value {
    box-shadow: var(--input-box-shadow-focus, 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);
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0013-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    box-shadow: var(--box-count-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);
    pointer-events: none;
    transform:  var(--character-box-count-rotation-normal, rotate(0deg));
    transition: var(--transition-time, 0.5s ease-in-out);
}
/* **************************************************************** */                
.input-box-0014 {
    position: relative;
    border: var(--background-box-border, 2px solid rgba(240, 164, 23, 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;
    border: var(--border-normal, 2px solid rgba(240, 164, 23, 1));
    font-weight: 600;
    top: var(--input-box-position-top, -10px);
    left: var(--input-box-position-left, 10px);
    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]:focus,
.input-box-0014 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

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

.input-box-0014-count {
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 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;
    transform:  var(--character-box-count-rotation-normal, rotate(0deg));
    transition: var(--transition-time, 0.5s ease-in-out);
}
/* **************************************************************** */
.input-box-0015 {
    position: relative;
}

.input-box-0015 input[type=text] {
    position: relative;
    border: var(--border-normal, 2px solid rgba(240, 164, 23, 1));
    font-weight: 600;
    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);
    transform: var(--rotation-text-box, rotate(0deg));
}
      
.input-box-0015 input[type=text]:focus,
.input-box-0015 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

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

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

.input-box-0015-count {
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 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;
    transition: var(--transition-time, 0.5s ease-in-out);
    z-index: 3;
    transform: var(--character-box-count-rotation, rotate(0deg));
}

.input-box-0015-dotted {
    position: absolute;
    border: var(--background-box-border, 2px dotted rgba(255, 255, 255, 1));
    top: var(--input-box-position-top, -4px);
    left: var(--input-box-position-left, 4px);
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    transform: var(--rotation-text-box, rotate(0deg));
}
/* **************************************************************** */
.input-box-0016 {
    position: relative;
    background-color: transparent;
}

.input-box-0016 input[type=text] {
    position: relative;
    border: var(--border-normal, 2px solid rgba(240, 164, 23, 1));
    font-weight: 600;
    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-0016 input[type=text]:focus,
.input-box-0016 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

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

.input-box-0016-count {
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-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);
    pointer-events: none;
    transform:  var(--character-box-count-rotation-normal, rotate(0deg));
    transition: var(--transition-time, 0.5s ease-in-out);
}
/* **************************************************************** */
.input-box-0017 {
    position: relative;
}

.input-box-0017 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: none;
}

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

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

.input-box-0017 input[type=text]:focus,
.input-box-0017 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0017-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    pointer-events: none;
}
/* **************************************************************** */
.input-box-0018 {
    position: relative;
}

.input-box-0018 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: none;
}

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

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

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

.input-box-0018 input[type=text]:focus,
.input-box-0018 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}
                        
.input-box-0018-count-main {
    position: absolute;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    background-color: transparent;
    pointer-events: none;
    z-index: 3;
}

.input-box-0018-count{
    position: relative;
    justify-content: center;
    text-align: center;
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    pointer-events: none;
}

.input-box-0018-bottom-count {
    position: absolute;
    bottom: -3px;
    left: -5px;
    width: 70px;
    background: rgb(106, 113, 129);
    height: 3px;
    border-radius: 5px;
}
/* **************************************************************** */
.input-box-0019 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--border-normal, none);
}

.input-box-0019 input[type=text]{
    background-color: transparent;
    border: none;
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    width: 100%;
    font-weight: 600;
    outline: none;
}

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

.input-box-0019 input[type=text]::placeholder{
    color: var(--placeholder-text-color, rgba(82, 63, 63, 1));
}
              
.input-box-0019-box-top {
   position: absolute;
   top: 10px;
   left: 0px;
   width: 100%;
   height: 3px;
   border-radius: 3px;
}

.input-box-0019-box-bottom {
   position: absolute;
   bottom: 10px;
   left: 0px;
   width: 100%;
   height: 3px;
   border-radius: 3px;
}

.input-box-0019-box-left {
   position: absolute;
   top: 0px;
   left: 10px;
   width: 3px;
   height: 100%;
   border-radius: 3px;
}

.input-box-0019-box-right {
   position: absolute;
   top: 0px;
   right: 10px;
   width: 3px;
   height: 100%;
   border-radius: 3px;
}

.input-box-0019:hover .input-box-0019-box-top {
   top: 5px;
}

.input-box-0019:hover .input-box-0019-box-bottom {
   bottom: 5px;
}

.input-box-0019:hover .input-box-0019-box-left {
   left: 5px;
}

.input-box-0019:hover .input-box-0019-box-right {
   right: 5px;
}      

.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;
}

.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;
}

.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;
}

.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;
}    
                        
.input-box-0019-count-main {
    position: absolute;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    background-color: transparent;
    pointer-events: none;
    z-index: 3;
}

.input-box-0019-count{
    position: relative;
    justify-content: center;
    text-align: center;
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    pointer-events: none;
}
              
.input-box-0019-box-count-top {
   position: absolute;
   top: 3px;
   left: 0px;
   width: 100%;
   height: 1px;
}

.input-box-0019-box-count-bottom {
   position: absolute;
   bottom: 3px;
   left: 0px;
   width: 100%;
   height: 1px;
}

.input-box-0019-box-count-left {
   position: absolute;
   top: 0px;
   left: 3px;
   width: 1px;
   height: 100%;
}

.input-box-0019-box-count-right {
   position: absolute;
   top: 0px;
   right: 3px;
   width: 1px;
   height: 100%;
}

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

.input-box-0020 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: none;
    transform: perspective(500px) rotateX(15deg);
}

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

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

.input-box-0020 input[type=text]:focus,
.input-box-0020 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0020-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    pointer-events: none;
    transform: perspective(50px) rotateX(15deg);
}
/* **************************************************************** */
.input-box-0021 {
    position: relative;
}

.input-box-0021 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: none;
    background-image: radial-gradient(76% 151% at 52% -52%, rgba(255, 255, 255, 0.23) 0%, transparent 100%);
    box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
}

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

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

.input-box-0021 input[type=text]:focus,
.input-box-0021 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
    filter: brightness(1.3);
}

.input-box-0021-count {
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    pointer-events: none;
    background-image: radial-gradient(76% 151% at 52% -52%, rgba(255, 255, 255, 0.23) 0%, transparent 100%);
    box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
}
                    
.input-box-0021 input[type=text]:focus ~ .input-box-0021-count,
.input-box-0021 input[type=text].has-value ~ .input-box-0021-count {
    filter: brightness(1.3);
}
/* **************************************************************** */
.input-box-0022 {
    position: relative;
}

.input-box-0022 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: none;
}

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

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

.input-box-0022 input[type=text]:focus,
.input-box-0022 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
    filter: brightness(1.1);
}

.input-box-0022-count {
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    pointer-events: none;
}
                    
.input-box-0022 input[type=text]:focus ~ .input-box-0022-count,
.input-box-0022 input[type=text].has-value ~ .input-box-0022-count {
    filter: brightness(1.1);
}
/* **************************************************************** */
.input-box-0023 {
    position: relative;
}

.input-box-0023 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: 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);
}

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

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

.input-box-0023 input[type=text]:focus,
.input-box-0023 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
    filter: brightness(1.3);
}

.input-box-0023-count {
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    pointer-events: none;
    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);
}
                    
.input-box-0023 input[type=text]:focus ~ .input-box-0023-count,
.input-box-0023 input[type=text].has-value ~ .input-box-0023-count {
    filter: brightness(1.3);
}
/* **************************************************************** */
.input-box-0024 {
    position: relative;
}

.input-box-0024 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: 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);
}

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

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

.input-box-0024 input[type=text]:focus,
.input-box-0024 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
    filter: var(--brightness-text-box, brightness(1.3));
}

.input-box-0024-count {
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    pointer-events: none;
    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);
}
                    
.input-box-0024 input[type=text]:focus ~ .input-box-0024-count,
.input-box-0024 input[type=text].has-value ~ .input-box-0024-count {
    filter: var(--character-count-box-brightness, brightness(1.3));
}
/* **************************************************************** */
.input-box-0025 {
    position: relative;
}
.input-box-0025 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, 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{
    color: transparent;
    transition: var(--transition-time, 0.5s ease-in-out);
}

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

.input-box-0025 input[type=text]:focus,
.input-box-0025 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0025-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-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);
    pointer-events: none;
}
/* **************************************************************** */
.input-box-0026 {
    position: relative;
}
.input-box-0026 input[type=text] {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: none;
    box-shadow: var(--input-box-shadow-normal, 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: var(--rotation-scale-normal-text-box, scale(1) rotate(0deg));
}
.input-box-0026 input[type=text]:hover {
    box-shadow: var(--input-box-shadow-focus, 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: var(--rotation-scale-focus-text-box, scale(1.05) rotate(1deg));
}

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

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

.input-box-0026 input[type=text]:focus,
.input-box-0026 input[type=text].has-value {
    box-shadow: var(--input-box-shadow-focus, 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);
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
    transform: var(--rotation-scale-focus-text-box, scale(1.05) rotate(1deg));
}

.input-box-0026-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    box-shadow: var(--box-count-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);
    pointer-events: none;
    transform:  var(--character-box-count-rotation-scale-normal, scale(1.00) rotate(0deg));
    transition: var(--transition-time, 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:  var(--character-box-count-rotation-scale-focus, scale(1.05) rotate(2deg));
    transition: var(--transition-time, 0.5s ease-in-out);
}

.input-box-0026 input[type=text]:hover ~ .input-box-0026-count {
    transform:  var(--character-box-count-rotation-scale-focus, scale(1.05) rotate(2deg));
    transition: var(--transition-time, 0.5s ease-in-out);
}
/* **************************************************************** */
.input-box-0027 {
    position: relative;
}

.input-box-0027 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: 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);
}

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

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

.input-box-0027 input[type=text]:focus,
.input-box-0027 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
    filter: var(--brightness-text-box, brightness(1.3));
}

.input-box-0027-count {
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    pointer-events: none;
    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);
}
                    
.input-box-0027 input[type=text]:focus ~ .input-box-0027-count,
.input-box-0027 input[type=text].has-value ~ .input-box-0027-count {
    filter: var(--character-count-box-brightness, brightness(1.3));
}
/* **************************************************************** */
.input-box-0028 {
    position: relative;
}

.input-box-0028 input[type=text]{
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    font-weight: 600;
    border: var(--border-normal, none);
    outline: none;
    transform: perspective(500px) rotateX(15deg);
}

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

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

.input-box-0028 input[type=text]:focus,
.input-box-0028 input[type=text].has-value {
    color: var(--text-color-under, rgba(240, 164, 23, 1));
    border: var(--border-focus, 2px solid rgba(240, 164, 23, 1));
}

.input-box-0028-count{
    position: absolute;
    justify-content: center;
    align-items: center;
    top: var(--position-count-box-top, -10px);
    right: var(--position-count-box-right, 10px);
    padding: var(--box-count-padding, 0px 10px);
    border: var(--box-count-border, 2px solid rgba(240, 164, 23, 1)); 
    pointer-events: none;
    transform: perspective(50px) rotateX(15deg);
}
/* **************************************************************** */