.kbg-header{
    .search-form {

        position: relative;

        input[type=text],
        input[type=search] {
            height: 44px;
            width: 334px;
            font-size: 1.4rem;
            font-weight: normal;
            letter-spacing: 0.5px;
            @extend %animation-main;
            background-color: #FFF;
            border: none;
            color:var(--color-txt);

            &::-webkit-input-placeholder { /* Edge */
                color:var(--color-txt-025);
                font-size: 14px;
            }
              
            &::-ms-input-placeholder { /* Internet Explorer 10-11 */
                color:var(--color-txt-025);
                font-size: 14px;
            }
              
            &::placeholder {
                color:var(--color-txt-025);
                font-size: 14px;
            }
        }

        button[type="submit"]{
            position: absolute;
            font-size: 0;
            border: none;
            height: 100%;
            width: 50px;
            padding: 0;
            right: 0;
            top: 0;
            background-color: transparent;
            color: var(--color-txt);
            @extend %animation-main;

            &::after {
                content: '\e906';
                font-family: 'knowledgeguru-font';
                font-size: 2.8rem;
            }

            &:hover{
                color: var(--color-main);
            }
        }
    }
}



.kbg-single-subheader{
    .search-form {
            input[type=text],
            input[type=search] {
                background-color:  var(--color-txt-015);
                border: 1px solid var(--color-txt-025);
                color:var(--color-header-middle-txt);

                &::-webkit-input-placeholder { /* Edge */
                    color:var(--color-header-middle-txt);
                    opacity: .75;
                    font-size: 14px;
                }
                
                &::-ms-input-placeholder { /* Internet Explorer 10-11 */
                    color:var(--color-header-middle-txt);
                    opacity: .75;
                    font-size: 14px;
                }
                
                &::placeholder {
                    color:var(--color-header-middle-txt);
                    opacity: .75;
                    font-size: 14px;
                }

                &:focus,
                &:active{
                    border: 1px solid var(--color-txt-025) !important;   
                    button[type="submit"]{
                        color: var(--color-header-middle-txt); 
                        opacity: 1;
                    }
                }
            }
            .cssload-speeding-wheel{
                border: 1px solid #FFF;
                border-left-color: transparent;
                border-right-color: transparent;
            }    
            button[type="submit"]{
                color: var(--color-header-middle-txt);
                opacity: .75;
                
                &:hover{
                    color: var(--color-header-middle-txt);
                    opacity: 1;
                }  

            } 

        }
}