.settingsMain { width: 100%; display: grid; grid-template-columns: 0.4fr 1.6fr; position: relative; grid-gap: 25px; } .settingsMainSec { width: 100%; display: flex; flex-direction: column; grid-gap: 25px; } .settingsMainSecInside { width: 100%; background: white; padding: 15px; border-radius: 5px; box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); display: flex; flex-direction: column; grid-gap: 15px; } .settingsMainSecInside.settingsMainSecInsideLeft { position: sticky; top: 15px; } .settingsMainSecInside.settingsMainSecInsideRight { } .btnMain.settingsMainSecInsideLeftBtn { transition: ease 0.3s; background: rgba(76,130,163,0); color: #434343; font-weight: 600; opacity: 0.75; justify-content: start; grid-gap: 10px; } .btnMain.settingsMainSecInsideLeftBtn:hover { transition: ease 0.3s; opacity: 0.85; grid-gap: 15px; } .btnMain.settingsMainSecInsideLeftBtn.settingsMainSecInsideLeftBtnActive { transition: ease 0.3s; background: rgb(76,130,163); color: #ffffff; } .settingsMainSecInsideRightSec { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; } .settingsMainSecInsideRightSecPic { display: flex; flex-direction: row; } .settingsMainSecInsideRightSecPicInside { position: relative; width: 75px; height: 75px; background: rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: center; align-items: center; border: solid 3px #79a1ba; border-radius: 100px; overflow: hidden; } .settingsMainSecInsideRightSecPicInsideImg { width: 100%; height: 100%; object-fit: contain; } .settingsMainSecInsideRightSecPicInsideUpload > input { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; opacity: 0; cursor: pointer; } .settingsMainSecInsideRightSecPicInsideUpload > * { cursor: pointer; } .settingsMainSecInsideRightSecPicInsideUpload { transition: ease 0.3s; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; background: rgba(0,0,0,0.25); backdrop-filter: blur(1px); display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; font-size: 24px; cursor: pointer; opacity: 0; z-index: 1; } .settingsMainSecInsideRightSecPicInsideUpload:hover { transition: ease 0.3s; background: rgba(0,0,0,0.25); backdrop-filter: blur(1px); opacity: 1; } .btnMain.settingsMainSecInsideRightSecBtn { max-width: 300px; align-self: center; width: 100%; } .btnMain.settingsMainSecInsideRightSecBtnAlt { align-self: end; }