.sc-header { min-height: 75px; border-top-left-radius: 9px; border-top-right-radius: 9px; padding: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); position: relative; box-sizing: border-box; display: flex; } .sc-header--img { border-radius: 50%; align-self: center; padding: 10px; max-width: 32px; max-height: 32px; box-sizing: content-box; } .sc-header--title { align-self: center; padding: 10px; flex: 1; user-select: none; font-size: 20px; } .sc-header--title.enabled { cursor: pointer; border-radius: 5px; } .sc-header--title.enabled:hover { box-shadow: 0px 2px 5px rgba(0.2, 0.2, 0.5, 0.1); } .sc-header--close-button { width: 36px; height: 36px; align-self: center; margin-right: 10px; box-sizing: border-box; cursor: pointer; border-radius: 100%; margin-left: auto; } .sc-header--close-button:hover { box-shadow: 0px 2px 5px rgba(0.2, 0.2, 0.5, 0.1); } .sc-header--close-button svg { width: 100%; height: 100%; padding: 5px; box-sizing: border-box; fill: #FFF; } @media (max-width: 450px) { .sc-header { border-radius: 0px; } }