.tabsMain { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; } .tabsMainTop { display: flex; flex-direction: row; grid-gap: 10px; flex-wrap: wrap; } .tabsMainMid { width: 100%; display: flex; flex-direction: column; /*padding: 10px 0 0 0;*/ /*border-top: solid 1px rgba(0,0,0,0.1);*/ /*margin-top: 10px;*/ } .tabsMainTopElement { transition: ease 0.3s; display: flex; flex-direction: row; grid-gap: 5px; justify-content: center; align-items: center; text-align: center; padding: 10px 20px; border-radius: 6px; background: rgba(255,255,255,0); color: rgba(0,0,0,0.5); font-weight: 600; cursor: pointer; border: solid 1px rgba(0,0,0,0.1); flex-grow: 1; } .tabsMainTopElement:hover { background: rgb(255,255,255); color: rgba(0,0,0,0.65); border: solid 1px rgba(0,0,0,0); box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); } .tabsMainTopElementText { } .tabsMainTopElement.tabsMainTopElementActive { color: rgba(0,0,0,0.75); background: white; box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); border: solid 1px rgba(0,0,0,0); } .tabsMainMidElement { width: 100%; display: none; } .tabsMainMidElement.tabsMainMidElementActive { display: flex; flex-direction: column; grid-gap: 0px; background: white; border-radius: 8px; padding: 15px; grid-gap: 15px; box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); } .tabsMainTopElement.tabsMainTopElementAlt { } .tabsMainTopElement.tabsMainTopElementAlt:hover { border: solid 1px #ff9900; color: #ff9900; } .tabsMainTopElement.tabsMainTopElementAlt.tabsMainTopElementActive.tabsMainTopElementActiveAlt { background: #ff9900; color: white; } .tabsMainTopElement.tabsMainTopElementAlt.tabsMainTopElementActive.tabsMainTopElementActiveAlt > img { filter: brightness(1) contrast(100%); } .tabsMainMidElementDivider { width: 100%; height: 1px; background: rgba(0,0,0,0.1); } .tabsMainMidElementDividerWrapper { display: flex; flex-direction: row; grid-gap: 15px; white-space: nowrap; color: rgba(0,0,0,0.35); align-items: center; font-weight: 700; font-size: 14px; }