﻿/*OPTIONS (left)*/
#options {
    margin: 1.5vw 1vw 1.5vw 1vw;
    padding: 1vw;
    color: white;
    background-color: #f44e1a;
    border-radius: 1vw;
    font-family: 'TelstraBody';
    font-weight: 500;
    font-size: 100%;
}
    #options .block {
        display: none;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    #options.disabled {
        opacity: 0.2
    }
    #options.disabled .block {
        display: block;
    }
#tips-icon {
    display: block;
    margin-top: 0px;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    color: white;
    font-size: 100%;
}
    #tips-icon div {
        cursor: pointer;
        display: -webkit-flex;
        -webkit-align-items: center;
        -webkit-justify-content: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 1.6vw;
        margin-bottom: 0.5vw;
        color: #f44e1a;
        background-color: #ffffff;
        border: 2px solid #ffffff;
        font-size: 90%;
        font-weight: 700;
        transition: all linear 100ms;
    }
        #tips-icon div:hover {
            /*color: #ffffff;
            background-color: transparent;*/
            opacity: 0.5;
        }
        #tips-icon div.open {
            /*color: #ffffff;
            background-color: transparent;*/
            opacity: 0.5;
        }
#tipsHtml, #notesHtml {
    display: none;
}
#citation {
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: row;
    align-content: center;
    position: absolute;
    top: 1%;
    height: 12%;
    box-sizing: border-box;
    left: 52%;
    right: 20%;
    border-radius: 1vw;
    padding: 0px 0.5vw 0px 0.5vw;
    text-align: left;
    font-style: italic;
    background-color: #ffffff;
    color: #000000;
    font-size: 86%;
    line-height: 115%;
}
    #citation img {
        display: none;
    }
    #citation p {
        /*margin: 0px 0px 0.6vw 0px;*/
    }
        #citation p.title {
            font-size: 150%;
            font-style: normal;
            line-height: 110%;
        }

/*title*/
#options-title {
    position: relative;
    width: 100%;
    margin-bottom: 7%;
    color: white;
    font-weight: 700;
    font-family: 'TelstraDisplay';
    font-size: 120%;
    line-height: 100%;
}

/*razmak*/
/*#options .razmak {
    height: 8%;
}*/

/*btn*/
#options .btn {
    position: relative; /*edit*/
    width: auto; /*edit*/
    height: 1.6vw; /*edit*/
    margin-bottom: 0px;
    font-weight: 500;
}
    #options .btn.active .switch {
        background-color: transparent;
        color: white;
    }
/*btn-2*/
#options .btn-2 {
    position: relative; /*edit*/
    width: 100%; /*edit*/
    height: 1.6vw; /*edit*/
    margin-bottom: 0.6vw;
}

/*btn-3*/
#options .btn-3 {
    position: relative; /*edit*/
    width: 100%; /*edit*/
    height: 1.6vw; /*edit*/
    margin-bottom: 0.6vw;
}

/*dropdown*/
#options .dropdown {
    position: relative; /*edit*/
    height: 1.6vw; /*edit*/
    margin-bottom: 0.6vw;
    color: white; /*edit*/
    font-family: 'TelstraBody';
    font-weight: 500;
    border-width: 2px;
}
    #options .dropdown:hover {
        border-color: rgba(255, 255, 255, 0.7);
    }
        #options .dropdown:hover .text, #options .dropdown:hover .arrow {
            opacity: 0.7;
        }
    #options .dropdown .text {
        left: 5%; /*edit*/
        width: 80%; /*edit*/
        font-weight: 500;
    }
    #options .dropdown .arrow {
        right: 5%; /*edit*/
        width: 10%; /*edit*/
        background-image: url(../Graphics/dd-arr-c.svg?211025-1-1150621-1); /*edit*/
        background-size: 76% auto; /*edit*/
    }
    #options .dropdown .list {
        background-color: #ffffff; /*edit*/
        /*min-height: 120px;*/
    }
    #options .dropdown .list {
        width: calc(100% + 2px);
        margin-left: -1px;
        top: calc(100% + 1px);
        font-weight: 500;
    }


    #options .dropdown .list {
        border: 2px solid #f44e1a;
    }
#options_cut .list {
    padding: 1vw 0.5vw 1vw 0.5vw;
}
#options .dropdown .list .head {
    padding: 8% 1% 4% 2%;
    color: #f44e1a;
    font-weight: bold;
}

    #options .dropdown .list .head:first-child {
        padding: 0% 1% 4% 2%;
    }
#options .bubble {
    opacity: 0;
    position: absolute;
    top: 10px;
    left: 0px;
    width: 1.2vw;
    height: auto;
    border: none;
    transform: rotate(-90deg);
    transform-origin: left bottom;
    z-index: 202;
}


#options_benchmark.dropdown {
    margin-top: 0.6vw;
    margin-bottom: 0px;
}