/* Collapsible side panel (js/v2/collapsibleRail.js) */

/* The chevron sits on the 4px divider, so the divider must let it overflow. */
.splitter_panel.ts-rail-enabled > .vsplitter {
    overflow: visible;
}

/* Expanded, the chevron is the last item of the tab strip: a ghost button floated
   right, the same height as the tabs, so it reads as part of the strip. */
/* Written out to outrank Bootstrap's .nav-tabs > li { float: left }. */
.ts-rail-tabs > li.ts-rail-toggle-li {
    float: right;
    margin-left: 0;
}

/* Tighter tabs than Bootstrap's 15px: at 1366px the default 37% panel is ~490px, which
   the seven Authoring tabs fill on their own, so the chevron has to be paid for by the
   tabs. Only the sides change, so the row keeps its height. Inactive tabs have
   transparent borders, so dropping the 2px gap is invisible. The collapsed rules further
   down reset the padding and must stay after this one (same specificity).
   Stepped by window width so a wide screen keeps the normal size: at 1600px the panel
   is ~570px and 12px sides fit (~530px); from 1900px it is ~690px and Bootstrap's own
   size fits with the chevron (~590px). */
@media (max-width: 1599px) {
    .nav-tabs.ts-rail-tabs > li > a {
        margin-right: 0;
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (min-width: 1600px) and (max-width: 1899px) {
    .nav-tabs.ts-rail-tabs > li > a {
        margin-right: 0;
        padding-left: 12px;
        padding-right: 12px;
    }
}

.ts-rail-toggle-li > .ts-rail-toggle {
    display: block;
    margin: 0;
    padding: 10px 6px;
    line-height: 1.42857143;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    color: #8593a5;
    font-size: 12px; /* the tab anchors' size, so both come out the same height */
    cursor: pointer;
    transition: color 0.12s, background-color 0.12s;
}

.ts-rail-toggle-li > .ts-rail-toggle > .fa {
    font-size: 13px;
}

.ts-rail-toggle-li > .ts-rail-toggle:hover,
.ts-rail-toggle-li > .ts-rail-toggle:focus {
    color: #337ab7;
    background: #eef1f5;
    outline: none;
}

.ts-rail-collapsed .ts-rail-toggle-li {
    display: none;
}

/* Fallback for a layout with no tab strip: the button rides the divider. */
.splitter_panel > .vsplitter > .ts-rail-toggle {
    position: absolute;
    top: 8px;
    left: -9px;
    width: 22px;
    height: 44px;
    padding: 0;
    line-height: 42px;
    text-align: center;
    background: #fff;
    border: 1px solid #b9c2cf;
    border-radius: 5px;
    color: #4f5d70;
    font-size: 14px;
    cursor: pointer;
    z-index: 901;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

.splitter_panel > .vsplitter > .ts-rail-toggle:hover,
.splitter_panel > .vsplitter > .ts-rail-toggle:focus {
    color: #fff;
    background: #337ab7;
    border-color: #2e6da4;
    outline: none;
}

/* !important: sct-widgets-v2.css addresses the same nodes through #spliter-fh, which
   outranks any class this file could use. */
.ts-rail-hidden {
    display: none !important;
}

/* Bootstrap's a:focus draws the focus ring on mouse clicks too; the tabs of a rail
   panel already show which one is active. */
.ts-rail-tabs > li > a:focus {
    outline: none;
}

/* Icons only appear in the rail: expanded, the tab row already wraps and would not
   take one more thing per tab. Pointer events go to the anchor so ondrop keeps working. */
.ts-rail-icon {
    display: none;
    pointer-events: none;
}

/* While moving, the panel clips content that stays laid out at the expanded width. */
.ts-rail-moving > .left_panel {
    overflow: hidden;
}

/* ---- Collapsed ---------------------------------------------------------- */

.ts-rail-collapsed > .left_panel {
    overflow: hidden;
}

/* Head row of the rail: only exists while collapsed, and hosts the chevron as the
   first control, above the tab icons. */
.ts-rail-head {
    display: none;
}

.ts-rail-collapsed .ts-rail-head {
    display: block;
    border-bottom: 1px solid #e3e7ec;
}

.ts-rail-head > .ts-rail-toggle {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0;
    line-height: 40px;
    text-align: center;
    border: 0;
    border-radius: 0;
    background: #f8f9fb;
    color: #4f5d70;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.12s, background-color 0.12s;
}

.ts-rail-head > .ts-rail-toggle:hover,
.ts-rail-head > .ts-rail-toggle:focus {
    color: #fff;
    background: #337ab7;
    outline: none;
}

.ts-rail-collapsed .ts-rail-tabs {
    border-bottom: 0;
    margin: 0;
    padding-top: 6px;
}

.ts-rail-collapsed .ts-rail-tabs > li {
    float: none;
    margin: 0;
}

.ts-rail-collapsed .ts-rail-tabs > li > a,
.ts-rail-collapsed .ts-rail-tabs > li > a:hover,
.ts-rail-collapsed .ts-rail-tabs > li > a:focus {
    margin: 0;
    padding: 11px 0;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    text-align: center;
    font-size: 0;
    line-height: 0;
    color: #6b7a8d;
    background: transparent;
}

.ts-rail-collapsed .ts-rail-tabs > li > a:hover,
.ts-rail-collapsed .ts-rail-tabs > li > a:focus {
    background: #eef1f5;
    color: #333;
}

.ts-rail-collapsed .ts-rail-tabs > li.active > a,
.ts-rail-collapsed .ts-rail-tabs > li.active > a:hover,
.ts-rail-collapsed .ts-rail-tabs > li.active > a:focus {
    background: #fff;
    border-left-color: #337ab7;
    color: #337ab7;
}

.ts-rail-collapsed .ts-rail-tabs > li > a > * {
    display: none;
}

.ts-rail-collapsed .ts-rail-tabs > li > a > .ts-rail-icon {
    display: inline-block;
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    width: 100%;
}

.ts-rail-collapsed .ts-rail-tabs > li > a > .ts-rail-initials {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}