﻿
.options_metric_question .item {
    -webkit-justify-content: flex-start;
    -webkit-align-items: center;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0.15vw;
    margin-bottom: 0.15vw;
    padding-left: 1vw;
    line-height: 100%;
}
    .options_metric_question .item:before {
        content: '';
        display: inline-block;
        width: 0.5vw;
        border: 1px solid #1a2e61;
        vertical-align: middle;
        margin-right: 0.5vw;
    }
    .options_metric_question .item.notused {
        color: #828282;
        opacity: 0.8;
    }
/*table*/
#tbl-cov-1, #tbl-cov-2 {
    display: none;
    position: absolute;
    background-color: white;
    z-index: 100;
}
#chart table {
    position: relative;
    width: 100%;
    height: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 6px;
    font-size: 90%;
}
@media (max-width: 1400px) {
    #chart table {
        border-spacing: 4px;
        font-size: 95%;
    }
}

#chart thead th {
    position: relative;
    z-index: 70;
}
#chart th, #chart td {
    position: relative;
    border: none;
    border-radius: 4px;
    padding: 0.5vw;
    vertical-align: middle;
    text-align: center;
    background-color: #f5ede2;
}
#chart th {
    cursor: pointer;
    padding: 0.7vw 0.5vw 0.7vw 0.5vw;
    min-width: 5%;
    max-width: 10%;
    background-color: #0d54ff;
    color: white;
}
#chart th::after {
    display: none;
    content: '';
    position: absolute;
    top: 0px;
    right: 0.4vw;
    height: 100%;
    width: 0.8vw;
    margin-top: -0.1vw;
    background-image: url(../Graphics/dd-arr-d-w.svg?180625-1);
    background-position: right center;
    background-size: 0.8vw auto;
    background-repeat: no-repeat;
}
    #chart th.asc, #chart th.desc {
        background-color: #f44e1a;
        padding: 0.7vw 1.5vw 0.7vw 1.5vw;
    }
    #chart th.desc::after {
        display: block;
    }
    #chart th.asc::after {
        display: block;
        -webkit-transform: rotate(180deg);
        -webkit-transform-origin: 50% 50%;
        transform: rotate(180deg);
        transform-origin: 50% 50%;
    }
#chart th:first-of-type {
    cursor: default;
    background-color: transparent;
}
#chart th:first-of-type:after {
    display: none;
}
    #chart th.label {
        min-width: 10%;
        max-width: 20%;
    }
#chart td.sort {
    background-color: #f44e1a;
    color: #ffffff;
}
#chart td.label {
    z-index: 70;
    position: relative;
    text-align: left;
}

#chart-dognut {
    position: absolute;
    top: 0px;
    left: 30%;
    height: 100%;
    width: 40%;
}
#chart .x-dognut {
    position: absolute;
    top: 0px;
    left: 72%;
    height: 100%;
    width: auto;
}
    #chart .x-dognut table {
        width: 100%;
        height: 100%;
        border-collapse: collapse;
        border-spacing: 0px;
        font-size: 102%;
    }
    #chart .x-dognut td {
        padding: 0px;
        border-radius: 0px;
        background-color: transparent;
        text-align: left;
        vertical-align: middle;
    }
        #chart .x-dognut td .icon {
            display: inline-block;
            width: 1.1vw;
            height: 1.1vw;
            border-radius: 4px;
            background-color: #0d54ff;
            vertical-align: middle;
            /*margin-top: -2px;*/
        }
            #chart .x-dognut td.x {
                text-align: center;
                padding-left: 0.7vw;
            }
                #chart .x-dognut td.x span {
                    display: inline-block;
                    vertical-align: middle;
                }

@media (max-aspect-ratio: 1.8) {
    #chart .x-dognut {
        left: 80%;
    }
}
