@charset "UTF-8";
.showSwip {
    display: none !important
}
ul.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: flex;
}

    ul.tabs li {
        background: none;
        color: #FFF;
        display: inline-block;
        cursor: pointer;
        background: #464646;
        padding: 8px 16px;
        flex-grow: 1;
        -webkit-flex-grow: 1;
        text-align: center;
    }

        ul.tabs li img {
            display: block
        }

        ul.tabs li:first-child {
            margin-right: 8px;
        }

        ul.tabs li.current {
            color: #181B1D;
            background: #43fee1;
        }

.tab-content {
    display: none;
    padding: 16px 0;
}

    .tab-content.current {
        display: inherit;
    }

.scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

ul.tabssc {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: inline-flex;
}

    ul.tabssc li {
        background: #f6f7fa;
        color: #333;
        cursor: pointer;
        padding: 21px 36px;
        text-align: center;
        outline: 1px solid #dadada;
        border-top: 1px solid #dadada;
        border-bottom: 1px solid #dadada;
    }

        ul.tabssc li:hover {
            background: #eaebef;
        }

        ul.tabssc li.currentsc {
            color: #a23825;
            background: #FFF;
            box-shadow: inset 0 2px 0 #f05451;
            border-bottom: 1px solid #fff;
        }

        ul.tabssc li img {
            display: block
        }

.tab-currentsc {
    display: none;
    background: #fff;
    padding: 16px
}

.tab-contentsc {
    display: none;
    background: #fff;
    padding: 16px
}

    .tab-contentsc.currentsc {
        display: inherit;
    }

.scInfo {
    display: flex;
    align-items: center;
    margin-top: 16px;
    background: #f6f7fa;
}

.showSwip {
    width: 100%;
    padding: 6px 12px;
    text-align: center;
    font-size: smaller;
    position: relative;
    border-bottom: 1px solid #efefef;
    position: relative;
}

    .showSwip:before {
        content: "\f053";
        font-family: feather;
        color: #adadad;
        font-size: inherit;
        left: 8px;
        top: 8px;
        position: absolute;
        padding: 5px;
    }

    .showSwip:after {
        content: "\f054";
        font-family: feather;
        color: #adadad;
        font-size: inherit;
        right: 8px;
        top: 8px;
        position: absolute;
        padding: 5px;
    }

.metricTab {
    border: 1px solid #dedede;
    display: inline-block;
    border-radius: 3px;
    margin-bottom: 16px;
    background: #f6f7fa;
}

    .metricTab a {
        padding: 12px 21px;
        display: inline-block;
        cursor: pointer;
        color: #888888;
    }

        .metricTab a:first-child {
            border-right: 1px solid #efefef
        }

.guide div {
    margin-top: 18px;
}

    .guide div i {
        background: #000;
        border-radius: 6px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        display: inline-block;
        text-align: center;
        font-size: 10px;
        color: #fff;
        font-style: normal;
        vertical-align: middle;
    }

    .guide div strong, .guide div p {
        display: inline;
        line-height: 100%;
        padding-left: 9px;
    }

.tabActive {
    display: inline !important
}

.metricTab a.tabActive {
    background: #fff;
    color: #000000;
}

    .metricTab a.tabActive:before {
        content: "\e116";
        margin-right: 8px;
        color: #f05451;
        font-family: feather;
    }

.metricContent {
    display: none;
}

.sc table, #SizingGuide table {
    text-align: justify;
    border-collapse: collapse;
    width: 100%;
    padding: 0 !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.sc th, .sc tr, .sc td, #SizingGuide th, #SizingGuide tr, #SizingGuide td {
    padding: 10px 16px;
    margin: 0;
    color: #666;
    font-size: small;
    border: 1px solid #e6e7f1;
    background: #fff
}

.sc tbody tr:nth-of-type(odd) td, #SizingGuide tbody tr:nth-of-type(odd) td {
    background-color: #f6f7fa;
}

.sc th, #SizingGuide th {
    color: #222;
    text-align: left;
    font-weight: bold;
    font-size: larger;
    line-height: 200%;
}

.sc table tr:last-of-type td, #SizingGuide table tr:last-of-type td {
    border-bottom: none
}

.sc table tr td:first-of-type, #SizingGuide table tr td:first-of-type {
    font-weight: bold;
    border: aliceblue;
}

.scInfo {
    text-align: left;
    padding: 8px
}

    .scInfo > strong {
        border-bottom: 1px solid #999;
        padding: 12px;
        display: block;
        width: 100%;
        text-align: center
    }

    .scInfo > div {
        padding: 8px
    }

        .scInfo > div > img {
            width: 100%;
            height: auto;
        }

        .scInfo > div > strong {
            padding: 16px 0;
            display: block
        }

@media screen and (max-width: 767px) {
    .scInfo {
        flex-wrap: wrap
    }

    .sc th, .sc tr, .sc td {
        padding: 5px 8px !important;
        font-size: smaller;
        text-align: left;
    }
}