.edubin-search-box {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 85%);
z-index: 999;
display: none;
}
.edubin-closebtn {
position: absolute;
top: 50px;
right: 50px;
cursor: pointer;
width: 30px;
height: 25px;
}
.edubin-closebtn span {
width: 30px;
height: 2px;
background-color: #fff;
position: relative;
display: block;
}
.edubin-closebtn span:nth-of-type(1) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 11px;
}
.edubin-closebtn span:nth-of-type(2) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 9px;
}
.edubin-search-box .edubin-search-form input {
width: 40%;
height: 54px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #fff;
border: 2px solid #07294d;
color: #07294d;
padding-left: 20px;
border-radius: 100px!important;
}
.edubin-search-box .edubin-search-form button {
position: absolute;
top: 50%;
height: 50px;
width: 80px;
left: 70%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 0;
border: 0;
background-color: var(--edubin-primary-color);
color: #fff;
cursor: pointer;
font-size: 22px;
border-bottom-right-radius: 100px;
border-top-right-radius: 100px;
line-height: 0;
}
@media (max-width:567px) {
.edubin-search-box .edubin-search-form input {
width: 70%;
}
.edubin-search-box .edubin-search-form button {
left: 77%;
}
}
.edubin-search-box-wrap {
font-size: 20px;
}
.edubin-search-box-wrap input:focus {
outline: none;
}
.edubin-search-box-wrap .btn-search {
background: transparent;
padding: 0;
}
.edubin-search-box-wrap svg {
width: 20px;
margin-top: 8px;
} .edubin-search-sty-wraple-1 {
position: relative;
}
.edubin-search-sty-wraple-1 input {
border: 1px solid #ccc;
width: 100%;
border-radius: 22px !important;
transition: all .3s ease-in-out;
height: 45px;
color: #999999;
font-size: 14px;
padding: 0 78px 0 20px !important;
}
.edubin-search-sty-wraple-1 input:focus {
width: 100%; }
.edubin-search-sty-wraple-1 input:focus~button.btn-search {
background: var(--edubin-primary-color);
color: #fff;
border-radius: 100px;
}
.edubin-search-sty-wraple-1 input:focus~button.btn-reset {
right: -22px;
}
.edubin-search-sty-wraple-1 button {
transition: all .3s ease-in-out;
border: none;
height: 100%;
position: absolute;
right: 0;
top: 50%;
width: 70px;
transform: translateY(-50%);
padding: 0;
}
.edubin-search-sty-wraple-1 button.btn-search {
font-size: 20px;
background: var(--edubin-primary-color);
border-radius: 0 100px 100px 0;
color: #fff;
transition: all .3s ease-in-out;
} .edubin-search-sty-wraple-3 {
position: relative;
}
.edubin-search-sty-wraple-3 input {
border: 1px solid #ccc;
width: 100%;
border-radius: 5px;
transition: all .3s ease-in-out;
height: 45px;
color: #999999;
font-size: 14px;
padding: 0 78px 0 20px;
}
.edubin-search-sty-wraple-3 input:focus {
width: 100%;
border: 1px solid var(--edubin-primary-color);
}
.edubin-search-sty-wraple-3 input:focus~button {
width: 36px;
}
.edubin-search-sty-wraple-3 input:focus~button.btn-search {
background: var(--edubin-primary-color);
color: #fff;
border-radius: 20px;
}
.edubin-search-sty-wraple-3 input:focus~button.btn-reset {
right: -22px;
}
.edubin-search-sty-wraple-3 button {
transition: all .3s ease-in-out;
border: none;
height: 36px;
position: absolute;
right: 4px;
top: 50%;
width: 70px;
transform: translateY(-50%);
padding: 0;
}
.edubin-search-sty-wraple-3 button.btn-search {
transition: all .3s ease-in-out;
border: none;
height: 36px;
position: absolute;
right: 4px;
top: 50%;
width: 50px;
transform: translateY(-50%);
padding: 0;
color: var(--edubin-primary-color);
transition: all .3s ease-in-out;
} .edu-header-search-field {
margin: 0 20px;
line-height: 1;
}
.edu-header-search-field .inner {
border: 1px solid #e5e5e5;
border-radius: 4px;
}
header:not(.edubin-header-sticky-active) .edu-header-search-field.bg-white .inner {
background: var(--edubin-color-white);
border: none;
}
.edu-header-search-field .inner input {
height: 50px;
border: none;
line-height: 1;
font-size: 15px;
color: var(--edubin-heading-color);
font-weight: 400;
padding: 0 0 0 20px;
font-family: var(--edubin-font-primary);
max-width: 173px;
}
@media only screen and (max-width: 1550px) {
.edu-header-search-field .inner input {
max-width: 150px;
}
}
.edu-header-search-field .inner .submit-button {
border: none;
background-color: transparent;
font-size: 18px;
color: var(--edubin-heading-color);
padding: 0 20px;
-webkit-transition: var(--edubin-transition);
transition: var(--edubin-transition);
top: 4px;
position: relative;
}