/*   New Jun/26  Search input area */

.search_field_wrapper {
    display: inline-block;
    position: relative;
    width: 70%;
    --btn-size: 60px;          /* change this one value to resize everything */
    --icon-size: 36px;
    --icon-left-gap: 5px;
    --btn-right-gap: 5px;
}

#search_icon_left {
    position: absolute;
    left: var(--icon-left-gap);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size);
    height: var(--icon-size);
    pointer-events: none;
    z-index: 1;
}

#search_submit_btn {
    position: absolute;
    right: var(--btn-right-gap);
    top: 50%;
    transform: translateY(-50%);
    width: var(--btn-size);
    height: var(--btn-size);
    border: none;
    border-radius: 8px;
    background: white;
    cursor: default;
    padding: 4px;
    z-index: 1;
    transition: background 0.2s ease;
}

#search_submit_btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

#search_submit_btn.active {
    background: navy;
    cursor: pointer;
}

#search_submit_btn.active img {
    filter: brightness(0) invert(1);
}

#search_submit_btn.active:hover {
    background: #cc0000;
    cursor: pointer;
}

#search_field_ai {
    display: inline-block;
    width: 100%;
    font-size: 2rem;

    /* left padding = icon gap + icon size + a little breathing room */
    padding-left: calc(var(--icon-left-gap) + var(--icon-size) + 8px);
    /* right padding = btn gap + btn size + a little breathing room */
    padding-right: calc(var(--btn-right-gap) + var(--btn-size) + 8px);

    /*    (70px height - 32px line-height) / 2 = 14px -  height is actual value of height   */
    padding-top: 19px;
    padding-bottom: 19px;

	  height: 70px;

    color: black;
    border: 2px solid #00bfff;
    border-radius: 10px;
    font-family: dosis_med;
    background: #fafafa;

    resize: none;
    line-height: 2rem;
    overflow-y: hidden;


    box-sizing: border-box;
    vertical-align: top;
}

#search_field_ai:hover {
    border: 2px solid #3399FF;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

#search_field_ai:focus { 
    outline: none;
    border: 2px solid #3399FF;
    box-shadow: 0px 0px 8px #3399FF;
    -moz-box-shadow: 0px 0px 8px #3399FF;
    -webkit-box-shadow: 0px 0px 8px #3399FF;
}


#search_field_ai::placeholder {
  opacity: 0.25; /* Values between 0 and 1; lower is lighter */
}


@media only screen and (min-device-width: 300px) and (max-device-width: 480px) {


	 /*   Jun 26 for new search filed area */

 	.search_field_wrapper {
        width: 90%;
        --btn-size: 44px;
        --icon-size: 26px;
        --icon-left-gap: 5px;
        --btn-right-gap: 5px;
    }

    #search_field_ai {
        font-size: 1.4rem;
        height: 50px;
        padding-top: 11px;      /* (50px - 28px line-height) / 2 */
        padding-bottom: 11px;
        padding-left: calc(5px + 26px + 8px);   /* = 39px */
        padding-right: calc(5px + 44px + 8px);  /* = 57px */
    }


}