@font-face {
    font-family: 'MazzardHSemiBold';
    src: url('/areas/proshares/assets/fonts/MazzardH-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'MazzardHBold';
    src: url('/areas/proshares/assets/fonts/MazzardH-Bold.otf') format('opentype');
    /* IE9 Compat Modes */
}

@font-face {
    font-family: 'MazzardHRegular';
    src: url('/areas/proshares/assets/fonts/MazzardH-Regular.ttf') format('truetype');
    /* IE9 Compat Modes */
}

body {
    margin: 0;
}

.ghraph-exposures {
    padding: 6rem 0;
    background-color: #f5f7fa;
}

    .ghraph-exposures .ghraph-tabs {
        display: none;
    }

    .ghraph-exposures .ghraph-desc {
        margin-top: 3rem;
        margin-bottom: 0;
        font-family: 'MazzardHRegular';
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
    }

        .ghraph-exposures .ghraph-desc span {
            font-family: 'MazzardHBold';
        }

    .ghraph-exposures .chart .header {
        font-family: 'MazzardHSemiBold';
        border-bottom: 22px solid #56345b;
        padding-bottom: 10px;
        font-size: 75px;
        font-weight: 600;
        line-height: 1.03;
        letter-spacing: -0.3px;
        color: #1d2639;
        margin-top: 0;
        margin-bottom: 3rem;
    }

    .ghraph-exposures .chart .title {
        font-family: 'MazzardHSemiBold';
        margin-top: 0;
        font-size: 34px;
        font-weight: 600;
        line-height: 1.06;
        letter-spacing: -0.3px;
        color: #1d2639;
        margin-bottom: 0;
    }

    .ghraph-exposures .mark-value {
        font-family: 'MazzardHRegular';
        font-size: 16px;
        margin-left: 60%;
    }

    .ghraph-exposures .chart .selector-button {
        font-family: 'MazzardHSemiBold';
        color: #3756df;
        background: none;
        border: none;
        cursor: pointer;
    }

table.table-sortable {
    margin-bottom: 0;
    width: 100%;
    border-collapse: collapse;
}

    table.table-sortable > tbody > tr > td,
    table.table-sortable > thead > tr > th {
        color: #1d2632;
        width: 80%;
        text-transform: capitalize;
        font-family: 'MazzardHBold';
        font-size: 16px;
        line-height: 24px;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    table.table-sortable > thead > tr > th {
        padding-bottom: 0.5rem;
        border-top: none;
    }

    table.table-sortable > tbody > tr > td {
        padding-top: 1rem;
        padding-bottom: 1.25rem;
    }

    table.table-sortable thead tr:first-child {
        border-bottom: 3px solid #1d2639;
    }

    table.table-sortable thead tr th:last-child,
    table.table-sortable tbody tr td:last-child {
        text-align: right;
        width: 15%;
    }

.ghraph-exposures .chart-box {
    height: 100%;
}

.table-sortable th {
    cursor: pointer;
}

    .table-sortable th:first-child {
        text-align: left;
    }

    .table-sortable th::after {
        content: '\25be';
    }

.table-sortable .th-sort-asc::after {
    content: '\25b4';
}

.table-sortable .th-sort-desc::after {
    content: '\25be';
}

.table-sortable .th-sort-asc::after,
.table-sortable .th-sort-desc::after {
    margin-left: 5px;
}

.table-sortable tbody tr {
    border-bottom: 1px solid #dadada;
}

.ghraph-exposures .ghaph-tabs {
    margin-bottom: 2rem;
}

.ghraph-tabs-select {
    position: relative;
    display: none;
}

    .ghraph-tabs-select:after {
        content: '\25be';
        position: absolute;
        right: 4%;
        font-size: 25px;
        top: 50%;
        transform: translateY(-50%);
    }

    .ghraph-tabs-select.show:after {
        content: '\25b4';
    }

.ghraph-exposures .ghaph-tabs button {
    outline: none;
    padding-left: 0;
    padding-right: 0;
    color: #74788d;
    font-family: 'MazzardHSemiBold';
    font-size: 16px;
    line-height: 24px;
    border: none;
    background-color: transparent;
    border-bottom: 4px solid transparent;
    position: relative;
    /*margin-bottom: 1.5rem;*/
}

    .ghraph-exposures .ghaph-tabs button:last-child:after {
        background: transparent;
    }

    .ghraph-exposures .ghaph-tabs button.ghraph-tabs-active, .ghraph-exposures .ghaph-tabs button span:hover {
        color: #323232;
    }

    .ghraph-exposures .ghaph-tabs button span {
        cursor: pointer;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        font-weight: 600;
        padding-top: 0.75rem;
        padding-bottom: 1rem;
    }

@media screen and (min-width: 769px) {
    .ghraph-exposures .ghaph-tabs button:after {
        content: '';
        width: 2px;
        top: 5px;
        bottom: 0;
        height: 70%;
        background-color: #74788d;
        position: absolute;
    }

    .ghraph-exposures .ghaph-tabs button span {
        position: relative;
    }

        .ghraph-exposures .ghaph-tabs button span:after {
            content: '';
            position: absolute;
            background-color: transparent;
            width: 100%;
            height: 4px;
            bottom: 0;
            left: 0;
            transition: background-color 0.3s ease;
        }

        .ghraph-exposures .ghaph-tabs button span:hover:after {
            background-color: #1081f2;
        }

    .ghraph-exposures .ghaph-tabs button.ghraph-tabs-active span:after {
        background-color: #1081f2;
    }
}

@media screen and (max-width: 1200px) {
    .ghraph-exposures {
        padding-top: 4rem;
    }
}

@media screen and (max-width: 768px) {
    .ghraph-exposures {
        padding-top: 3rem;
        padding-bottom: 1.5rem;
    }

    table.table-sortable > tbody > tr > td {
        padding-top: 1.25rem;
        padding-bottom: 0.25rem;
    }

    table.table-sortable > thead > tr > th {
        padding-top: 0;
        padding-bottom: 0;
    }

    .ghraph-exposures .chart .header {
        margin-bottom: 1.5rem;
    }

    .ghraph-exposures .table-container,
    .ghraph-exposures .ghraph-tabs {
        display: block;
    }

    .tabs-container {
        position: relative;
    }

    .mark-value,
    .ghaph-tabs,
    .table-container .col-graph {
        display: none;
    }

    .ghraph-exposures .ghraph-tabs-select {
        display: block;
        width: 100%;
        background-color: transparent;
        border: 1px solid #c9d6df;
        text-align: left;
        padding: 1rem;
        font-family: 'MazzardHSemiBold';
        font-size: 14px;
    }

    .ghraph-exposures .ghaph-tabs.show {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        background-color: #f5f7fa;
        border: 1px solid #c9d6df;
        z-index: 10;
    }

    .ghraph-exposures .ghaph-tabs button {
        display: block;
        width: 100%;
        padding: 0;
    }

        .ghraph-exposures .ghaph-tabs button span {
            width: 100%;
            padding: 0;
            display: block;
            border-right: none;
        }

    .table-container {
        margin-top: 1rem;
    }

    .ghraph-exposures .ghaph-tabs button {
        text-align: left;
        padding: 1rem;
    }

    .ghraph-exposures .table-container .col-md-6:last-child {
        display: none;
    }

    .ghraph-exposures .ghraph-desc {
        margin-top: 1.5rem;
        padding: 0 1.25rem;
    }

    .ghraph-exposures .ghaph-tabs button.ghraph-tabs-active {
        color: #323232;
        border-bottom: 4px solid #1081f2;
    }
}

@media screen and (max-width: 480px) {
    .ghraph-exposures .chart .header {
        padding-bottom: 8px;
        font-size: 44px;
        margin-bottom: 32px;
    }

    .ghraph-exposures .chart .right-col {
        float: left;
        margin-bottom: 8px;
    }
}