/* RadTabStrip structural + "Default" skin CSS, ported VERBATIM from the real values fetched
   directly from Telerik.Web.UI.WebResource.axd on the live legacy site (a real, reachable 200 --
   not a compiled-resource dead end, confirmed by fetching it). The border/selected-state
   graphics are the real sprite image too (downloaded to
   wwwroot/css/images/telerik/tabstrip-sprite.png), positioned via the real background-position
   values below -- not approximated colors. Telerik itself is still dropped (no RadTabStrip JS,
   no client-side behavior), but the CSS chrome is the genuine original, not a stand-in.

   One deliberate deviation, per explicit developer instruction: real Telerik's own overflow
   behavior for too many tabs is a horizontal-scroll-with-arrows widget (.rtsScroll/.rtsPrevArrow/
   .rtsNextArrow in the real CSS, not ported here) -- a tab scrolled off-screen is effectively
   hidden. That's treated as a legacy UX quirk to fix, not replicate (matches the plan's own
   "known legacy bugs -- fix, not replicate" rule): flex-wrap here instead, so an overflowing tab
   wraps to a new line and stays visible/clickable rather than disappearing behind a scroll. */

.RadTabStrip, .RadTabStripVertical {
    margin: 0;
    padding: 0;
    min-height: 0;
}

.RadTabStrip .rtsLevel {
    min-height: 0;
    overflow: hidden;
    width: 100%;
    clear: both;
    position: relative;
    padding-top: 1px;
}

.RadTabStrip .rtsLevel1 {
    padding-top: 0;
}

.RadTabStrip .rtsUL {
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 0;
    display: flex;
    flex-wrap: wrap; /* real Telerik: float:left + horizontal-scroll-on-overflow; see note above */
    overflow: hidden;
}

.RadTabStrip .rtsLI {
    margin: 0;
    padding: 0;
    min-height: 0;
    list-style: none;
    overflow: hidden;
    flex: 0 0 auto;
}

.RadTabStrip .rtsLink {
    padding-left: 9px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    display: block;
    text-align: center;
}

.RadTabStrip .rtsOut {
    padding-right: 9px;
    display: block;
}

.RadTabStrip .rtsIn {
    padding: 0 5px;
    display: block;
}

.RadTabStrip .rtsTxt {
    display: inline-block;
}

.RadTabStrip .rtsLevel1 .rtsTxt {
    padding: 0 5px;
}

.RadTabStrip_Default {
    color: #333;
    font: 12px "Segoe UI", Arial, Helvetica, sans-serif;
    line-height: 26px;
}

.RadTabStrip_Default .rtsLI,
.RadTabStrip_Default .rtsLink {
    color: #000;
    font: 12px/26px "Segoe UI", Arial, sans-serif;
}

.RadTabStripTop_Default .rtsLevel {
    background-color: transparent;
}

.RadTabStripTop_Default .rtsLevel .rtsLink,
.RadTabStripTop_Default .rtsLevel .rtsOut {
    background-image: url('/css/images/telerik/tabstrip-sprite.png');
    background-repeat: repeat-x;
}

.RadTabStripTop_Default .rtsLink { background-position: 0 -52px; }
.RadTabStripTop_Default .rtsFirst .rtsLink { background-position: 0 0; }
.RadTabStripTop_Default .rtsOut { background-position: 100% -52px; }
.RadTabStripTop_Default .rtsLast .rtsOut { background-position: 100% 0; }
.RadTabStripTop_Default .rtsLI .rtsSelected { background-position: 0 -26px; }
.RadTabStripTop_Default .rtsSelected .rtsOut { background-position: 100% -78px; }
.RadTabStripTop_Default .rtsLI .rtsAfter { background-position: 0 -78px; }
.RadTabStripTop_Default .rtsLast .rtsSelected .rtsOut { background-position: 100% -26px; }

/* Overrides a real legacy quirk in mobile.css (.RadTabStrip .rtsLevel { width: 1350px
   !important; } and .rtsLevel1 .rtsTxt { padding: 0 .9375em !important; } inside its 320-768px
   breakpoint) that forces the tab strip wider than its container at narrow viewports -- part of
   how the real native horizontal-scroll-with-arrows overflow behavior gets triggered. Same
   "fix, not replicate" call as above: keep the real padding/sizing at all widths instead. */
@media only screen and (min-width: 320px) and (max-width: 768px) {
    .RadTabStrip .rtsLevel {
        width: auto !important;
    }
    .RadTabStrip .rtsLevel1 .rtsTxt {
        padding: 0 5px !important;
    }
}