.detail-page { &__header { position: fixed; width: 100%; top: 0; left: 0; background-color: white; z-index: 50; .header { display: flex; align-items: center; display: flex; align-items: center; padding-top: 30px; padding-bottom: 20px; &__logo { max-width: 105px; } &__login { width: 160px; margin-left: 0 !important; } } .login { &__select { width: 100%; } } } &__tab-content { width: 750px; margin-right: auto; margin-left: auto; padding-right: 8px; padding-bottom: 60px; } &__nav { border-bottom: 1px solid #f2f2e6; display: flex; justify-content: center; padding-bottom: 0; ul { width: 600px; margin-right: auto; margin-left: auto; list-style: none; display: flex; align-items: center; padding: 8px; padding-bottom: 0; } li { &:not(:last-child) { margin-left: 30px; } &.active { a { color: #3f43bc; } a::before { opacity: 1; } } } a { display: flex; padding-bottom: 14px; color: #a7a098; position: relative; &::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; border-radius: 3px 3px 0px 0px; background: #3f43bc; transition: all 0.2s linear; opacity: 0; } &:hover { color: #3f43bc; } } } &__filters { position: fixed; right: 0; z-index: 10; top: 200px; background-color: white; border-left: 1px solid #f2f2e6; .scrollbar { width: 300px; padding-right: 60px; padding-left: 24px; height: calc(100dvh - 200px); } .os-scrollbar-vertical { left: 0 !important; right: unset; padding: 0; width: 1px; } .os-scrollbar-handle { background-color: #d9d2c8 !important; } } }