Header widget area transparency and mobile widget

Hi. so I am trying to put search widget on side bar but here’s the things that I would want to change.

look at my website https://www.hanjstar.com/en/most-important-korean-verbs-with-sentence/

1. I want this on top of everything (image or video hides this widget)
2. I want this to be non-transparent (I can see text through this widget)
3. I want this search box to be on center
4. widget does appear on mobile. (widget only appears in main page, probably hiding on my post page?)

This is the CSS that I am currently using for ajax search pro plugin but I have no idea.

#ajaxsearchprowidget-1,#ajaxsearchprowidget-2,#ajaxsearchprowidget-3,#ajaxsearchprowidget-4,#ajaxsearchprowidget-5,#ajaxsearchprowidget-6,#ajaxsearchprowidget-7,#ajaxsearchprowidget-8 {
min-width: 80% !important;
}

@media (max-width: 480px) {
#ajaxsearchprowidget-1,#ajaxsearchprowidget-2,#ajaxsearchprowidget-3,#ajaxsearchprowidget-4,#ajaxsearchprowidget-5,#ajaxsearchprowidget-6,#ajaxsearchprowidget-7,#ajaxsearchprowidget-8 {
min-width: 50% !important;
}
}

.AjaxSearchProWidget {
min-width: 100% !important;
}

@media (max-width: 480px) {
.AjaxSearchProWidget {
min-width: 50% !important;
}
}

.asp_m_1,.asp_m_2,.asp_m_3,.asp_m_4,.asp_m_5,.asp_m_6,.asp_m_7,.asp_m_8,.asp_m_9 {
width: inherit !important;
max-width: 800px !important;
}

Currently this is what I am

Thanks!