myprojectpackageprav/dist/esm/src/layouts/header/header.css

My package in npm

.header {
    position: sticky;
    top: 0;
    z-index: 9998;
    background-color: #fff;
    width: 100%;
}

.header .container {
    z-index: 1024;
    position: relative;
}

.workFlow {
    max-width: calc(100% - 280px);
}

.header .container .logo {
    box-shadow: none;
}

.header .popup {
    width: 370px;
}

.side-menus .header,
.side-menus .mainwrapper .header .logo {
    display: none;
}

.mainwrapper .header {
    display: none;
}

.side-menus .mainwrapper .header {
    display: block;
    min-height: 64px;
}

.side-menus .mainwrapper .header .container {
    min-height: 64px;
    max-width: 100%;
}
@media (max-width:480px) {
.header .popup {
    left: auto !important;
    right: 4px;
    max-width: calc(100% - 50px);
}
}