.SearchMain { height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; max-width: 300px; } @media (max-width: 768px) { .SearchMain { max-width: unset; } } .SearchMainInside { width: 100%; padding: 10px; display: flex; flex-direction: row; justify-content: end; align-items: center; background: linear-gradient(to top right, #262626, #292929, #262626); border-radius: 15px; box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); } .SearchMainInsideWrapper { display: grid; grid-template-columns: 1.65fr 0.35fr; justify-content: end; align-items: center; height: 100%; position: relative; overflow: hidden; border-radius: 10px; background: rgba(0,0,0,0.1); width: 100%; grid-gap: 0; } .SMIWInput { outline: unset; border: unset; height: 100%; width: 100%; padding: 10px; background: rgba(0,0,0,0); overflow: hidden; border-radius: 10px 0 0 10px; color: rgba(255,255,255,0.75); box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1); } .SMIWInput:focus { background: rgba(0,0,0,0.05); } .btnMain.SMIWButton { transition: ease 0.4s; color: rgba(255,255,255,0.15); border: unset; outline: unset; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(255,255,255,0); border-radius: 0; border-left: solid 1px rgba(255,255,255,0.05); height: 100%; padding: 10px; } .btnMain.SMIWButton:focus { transition: ease 0.4s; color: rgba(255,255,255,0.5); border: unset; outline: unset; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(to top right, #2f2f2f, #303030, #2f2f2f); border-radius: 0; border-left: solid 1px rgba(255,255,255,0); box-shadow: 0 0 8px 0 rgba(0,0,0,0.25); } .SMIWInput:focus + .SMIWButton { background: rgba(0,0,0,0.05); background: linear-gradient(to top right, #2f2f2f, #303030, #2f2f2f); } .SearchMainWrapper { display: flex; flex-direction: row; justify-content: end; } @media (max-width: 768px) { .SearchMainWrapper { flex-direction: column; grid-gap: 15px; } }