#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: black;
    display: block;
    opacity: .65;
    filter: alpha(opacity=75);
    width: 100%;
    height: 100%;
}

    #modal-overlay #loader {
        margin: 0 auto;
        margin-top: 20%;
        border: 12px solid #f3f3f3; /* Light grey */
        border-top: 12px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 2s linear infinite;
    }

.loading-text {
    width: 300px;
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 150px);
    text-align: center;
    color: white;
    font-size: 2em;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.abhelpscreen {
    width: 522px;
    height: 236px;
    background: url(/img/assessments/abhelp.png) no-repeat 0 0;
    padding: 0;
    margin: 0 auto;
}

.alphalist {
    width: 45%;
    /* float: left; */
    display: inline-block;
    min-height: 200px;
    clear: both;
    margin-bottom: 10px;
    border: 1px solid gray;
    padding: 20px 10px;
    margin-top: 0px;
    margin-left: 10px;
    margin-right: 10px;
}

    .alphalist button {
        width: 90% !important;
        margin: 0 auto !important;
        margin-bottom: 10px !important;
    }



#practiceanswer {
    width: 120px !important;
}

#practiceanswerq {
    width: 90px !important;
}

.orContainer {
    margin: 0 auto;
    width: auto;
    display: inline-block;
}

.dldlbb,.dldlbw,.dldlwb,.dldlww,
.dlulbb,.dlulbw,.dlulwb,.dlulww,
.dldrbb,.dldrbw,.dldrwb,.dldrww,
.dlurbb,.dlurbw,.dlurwb,.dlurww,
.uldlbb,.uldlbw,.uldlwb,.uldlww,
.ululbb,.ululbw,.ululwb,.ululww,
.uldrbb,.uldrbw,.uldrwb,.uldrww,
.ulurbb,.ulurbw,.ulurwb,.ulurww,
.drdlbb,.drdlbw,.drdlwb,.drdlww,
.drulbb,.drulbw,.drulwb,.drulww,
.drdrbb,.drdrbw,.drdrwb,.drdrww,
.drurbb,.drurbw,.drurwb,.drurww,
.urdlbb,.urdlbw,.urdlwb,.urdlww,
.urulbb,.urulbw,.urulwb,.urulww,
.urdrbb,.urdrbw,.urdrwb,.urdrww,
.ururbb,.ururbw,.ururwb,.ururww
{
    width: 32% !important;
    height: 100px;
    margin-bottom: 5px !important;
}

    /*dldlbb*/
    .dldlbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dldlbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dldlbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dldlbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    /*dldlbw*/
    .dldlbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dldlbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dldlbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dldlbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    /*dldlwb*/
    .dldlwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dldlwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dldlwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dldlwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    /*dldlww*/
    .dldlww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dldlww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dldlww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dldlww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    /*dldrbb*/
    .dldrbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dldrbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dldrbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dldrbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*dldrbw*/
    .dldrbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dldrbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dldrbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dldrbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*dldrwb*/
    .dldrwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dldrwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dldrwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dldrwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    /*dldrww*/
    .dldrww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dldrww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dldrww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dldrww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*dlulbb*/
    .dlulbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dlulbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dlulbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dlulbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*dlulbw*/
    .dlulbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dlulbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dlulbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dlulbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*dlulwb*/
    .dlulwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dlulwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dlulwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dlulwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*dlulww*/
    .dlulww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dlulww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dlulww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dlulww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*dlurbb*/
    .dlurbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dlurbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dlurbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dlurbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*dlurbw*/
    .dlurbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dlurbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dlurbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dlurbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*dlurwb*/
    .dlurwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dlurwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .dlurwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dlurwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*dlurww*/
    .dlurww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dlurww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .dlurww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .dlurww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    /*uldlbb*/
    .uldlbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .uldlbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .uldlbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .uldlbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*uldlbw*/
    .uldlbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .uldlbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .uldlbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .uldlbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*uldlwb*/
    .uldlwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .uldlwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .uldlwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .uldlwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*uldlww*/
    .uldlww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .uldlww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .uldlww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .uldlww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*ululbb*/
    .ululbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .ululbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .ululbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .ululbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*ululbw*/
    .ululbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .ululbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .ululbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .ululbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*ululwb*/
    .ululwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .ululwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .ululwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .ululwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*ululww*/
    .ululww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .ululww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .ululww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .ululww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    /*uldrbb*/
    .uldrbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .uldrbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .uldrbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .uldrbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*uldrbw*/
    .uldrbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .uldrbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .uldrbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .uldrbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*uldrwb*/
    .uldrwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .uldrwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .uldrwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .uldrwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*uldrww*/
    .uldrww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .uldrww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .uldrww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .uldrww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    /*ulurbb*/
    .ulurbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .ulurbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .ulurbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .ulurbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*ulurbw*/
    .ulurbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .ulurbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .ulurbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .ulurbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*ulurwb*/
    .ulurwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .ulurwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .ulurwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .ulurwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*ulurww*/
    .ulurww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .ulurww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .ulurww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .ulurww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    /*drdlbb*/
    .drdlbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drdlbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drdlbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drdlbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drdlbw*/
    .drdlbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drdlbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drdlbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drdlbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drdlwb*/
    .drdlwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drdlwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drdlwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drdlwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drdlww*/
    .drdlww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drdlww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drdlww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drdlww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drulbb*/
    .drulbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drulbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drulbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drulbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drulbw*/
    .drulbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drulbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drulbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drulbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drulwb*/
    .drulwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drulwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drulwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drulwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drulww*/
    .drulww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drulww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drulww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drulww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drdrbb*/
    .drdrbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drdrbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drdrbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drdrbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drdrbw*/
    .drdrbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drdrbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drdrbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drdrbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drdrwb*/
    .drdrwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drdrwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drdrwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drdrwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drdrww*/
    .drdrww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drdrww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drdrww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drdrww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drurbb*/
    .drurbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drurbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drurbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drurbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drurbw*/
    .drurbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drurbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drurbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drurbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drurwb*/
    .drurwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drurwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .drurwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drurwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*drurww*/
    .drurww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drurww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .drurww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .drurww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*urdlbb*/
    .urdlbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .urdlbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .urdlbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .urdlbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*urdlbw*/
    .urdlbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .urdlbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .urdlbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .urdlbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*urdlwb*/
    .urdlwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .urdlwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .urdlwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .urdlwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*urdlww*/
    .urdlww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .urdlww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .urdlww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .urdlww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dl-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*urulbb*/
    .urulbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .urulbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .urulbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .urulbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*urulbw*/
    .urulbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .urulbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .urulbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .urulbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*urulwb*/
    .urulwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .urulwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .urulwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .urulwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*urulww*/
    .urulww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .urulww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .urulww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .urulww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ul-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*urdrbb*/
    .urdrbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .urdrbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .urdrbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .urdrbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*urdrbw*/
    .urdrbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .urdrbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .urdrbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .urdrbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*urdrwb*/
    .urdrwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .urdrwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .urdrwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .urdrwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*urdrww*/
    .urdrww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .urdrww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .urdrww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .urdrww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/dr-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*ururbb*/
    .ururbb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .ururbb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .ururbb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .ururbb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*ururbw*/
    .ururbw .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .ururbw .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .ururbw .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .ururbw .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*ururwb*/
    .ururwb .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .ururwb .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #999;
    }

    .ururwb .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .ururwb .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-black-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }
    /*ururww*/
    .ururww .top {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .ururww .bottom {
        width: 85px !important;
        height: 40px !important;
        background-color: #ccc;
    }

    .ururww .top .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }

    .ururww .bottom .arrow {
        float: left;
        width: 24px;
        height: 24px;
        background: url(/img/assessments/ur-white-arrow.png) no-repeat 0 0;
        margin: 8px 30.5px 8px 30.5px;
    }


/* Personality Assessment Graph 
------------------------------------------------ */
#clickbox {
    width: 720px;
    margin-top: 40px !important;
    margin-left: 5%;
    margin-right: 5%;
    height: 360px;
    cursor: pointer
}

.pie_chart {
    position: absolute;
    width: 720px;
    height: 360px;
    border-radius: 360px 360px 0px 0px;
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
    border: 1px solid #f2f2f2;
    /*background-color: #973fbc;*/
    overflow: hidden;
    background: url(/img/pers_arc_st.png) no-repeat 0 0;
}

.pie_chart_wsp {
    position: absolute;
    width: 720px;
    height: 360px;
    border-radius: 360px 360px 0px 0px;
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
    border: 1px solid #f2f2f2;
    overflow: hidden;
    background: url(/img/pers_arc_st.png) no-repeat 0 0;
}

.pie_chart_5buttons {
    position: absolute;
    width: 720px;
    height: 360px;
    border-radius: 360px 360px 0px 0px;
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
    border: 1px solid #f2f2f2;
    overflow: hidden;
    background: url(/img/pers_arc_5buttons.png) no-repeat 0 0;
}

.pie_chart_ar {
    position: absolute;
    width: 720px;
    height: 360px;
    border-radius: 360px 360px 0px 0px;
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
    border: 1px solid #f2f2f2;
    /*background-color: #973fbc;*/
    overflow: hidden;
    background: url(/img/pers_arc_ar.png) no-repeat 0 0;
}

.pie_chart_af {
    position: absolute;
    width: 720px;
    height: 360px;
    border-radius: 360px 360px 0px 0px;
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
    border: 1px solid #f2f2f2;
    /*background-color: #973fbc;*/
    overflow: hidden;
    background: url(/img/pers_arc_st.png) no-repeat 0 0;
}

.pie_chart_en-GB {
    position: absolute;
    width: 720px;
    height: 360px;
    border-radius: 360px 360px 0px 0px;
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
    border: 1px solid #f2f2f2;
    /*background-color: #973fbc;*/
    overflow: hidden;
    background: url(/img/pers_arc_st.png) no-repeat 0 0;
}

#pie_container_wsp {
    height: 449px;
}

#pie_container {
    width: 720px;
    height: 449px;
}

.pie {
    position: absolute;
    width: 720px;
    height: 720px;
    -moz-border-radius: 360px;
    -webkit-border-radius: 360px;
    -o-border-radius: 360px;
    border-radius: 360px;
    clip: rect(0px, 360px, 720px, 0px);
}

.hold {
    position: absolute;
    width: 720px;
    height: 720px;
    -moz-border-radius: 360px;
    -webkit-border-radius: 360px;
    -o-border-radius: 360px;
    border-radius: 360px;
    clip: rect(0px, 720px, 720px, 360px);
}

.pietext {
    color: #333333;
    font-size: 24px;
    font-family: "droid sans";
    width: 720px;
    z-index: 0;
}

#slice1 {
    z-index: 999;
}

    #slice1 .pie {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -o-transform: rotate(30deg);
        transform: rotate(30deg);
        /*background: -webkit-gradient(radial, left top, right top, color-stop(0.0, #A665C1), color-stop(1.0, #B87ED0));
    background:-moz-radial-gradient(top, #A665C1 0%, #B87ED0 100%); 
    background:-moz-radial-gradient(top, #A665C1 0%, #B87ED0 100%); 
    background:-webkit-gradient(radial, left top, left bottom, color-stop(0%,#A665C1), color-stop(100%,#B87ED0)); 
    background:-webkit-radial-gradient(top, #A665C1 0%,#B87ED0 100%); 
    background:-webkit-radial-gradient(top, #A665C1 0%, #B87ED0 100%); 
    background:-o-radial-gradient(top, #A665C1 0%,#B87ED0 100%); 
    background:-ms-radial-gradient(top, #A665C1 0%,#B87ED0 100%);
    background:radial-gradient(top, #A665C1 0%,#B87ED0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A665C1', endColorstr='#B87ED0');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#A665C1', endColorstr='#B87ED0')";  */
    }


    #slice1 a:hover {
        background: url(/img/pers_arc.png) no-repeat 0 -360px;
    }

#yaaa {
    background: -webkit-gradient(radial, left top, right top, color-stop(0.0, #333333), color-stop(1.0, #666666));
    background: -moz-radial-gradient(top, #333333 0%, #666666 100%); /* FF3.6+ */
    background: -moz-radial-gradient(top, #333333 0%, #666666 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#666666)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(top, #333333 0%,#666666 100%); /* Chrome10+,Safari5.1+ */
    background: -webkit-radial-gradient(top, #333333 0%, #666666 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(top, #333333 0%,#666666 100%); /* Opera11.10+ */
    background: -ms-radial-gradient(top, #333333 0%,#666666 100%); /* IE10+ */
    background: radial-gradient(top, #333333 0%,#666666 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#666666');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#666666')";
    cursor: pointer;
    box-shadow: 0 1px 2px #fff, /*bottom external highlight*/
    0 -1px 1px #666, /*top external shadow*/
    inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
    inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
}


#slice2 {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
    z-index: 9999;
}

    #slice2 .pie {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -o-transform: rotate(30deg);
        transform: rotate(30deg);
        /*background: -webkit-gradient(radial, left top, right top, color-stop(0.0, #CA96DF), color-stop(1.0, #D6ABE8));
    background:-moz-radial-gradient(top, #CA96DF 0%, #D6ABE8 100%); 
    background:-moz-radial-gradient(top, #CA96DF 0%, #D6ABE8 100%); 
    background:-webkit-gradient(radial, left top, left bottom, color-stop(0%,#CA96DF), color-stop(100%,#D6ABE8)); 
    background:-webkit-radial-gradient(top, #CA96DF 0%,#D6ABE8 100%); 
    background:-webkit-radial-gradient(top, #CA96DF 0%, #D6ABE8 100%); 
    background:-o-radial-gradient(top, #CA96DF 0%,#D6ABE8 100%); 
    background:-ms-radial-gradient(top, #CA96DF 0%,#D6ABE8 100%);
    background:radial-gradient(top, #CA96DF 0%,#D6ABE8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CA96DF', endColorstr='#D6ABE8');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#CA96DF', endColorstr='#D6ABE8')";  */
    }

#slice3 {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
    z-index: 88888;
}

    #slice3 .pie {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -o-transform: rotate(30deg);
        transform: rotate(30deg);
        /* background: -webkit-gradient(radial, left top, right top, color-stop(0.0, #E1C3ED), color-stop(1.0, #F0DEF8));
    background:-moz-radial-gradient(top, #E1C3ED 0%, #F0DEF8 100%); 
    background:-moz-radial-gradient(top, #E1C3ED 0%, #F0DEF8 100%); 
    background:-webkit-gradient(radial, left top, left bottom, color-stop(0%,#E1C3ED), color-stop(100%,#F0DEF8)); 
    background:-webkit-radial-gradient(top, #E1C3ED 0%,#F0DEF8 100%); 
    background:-webkit-radial-gradient(top, #E1C3ED 0%, #F0DEF8 100%); 
    background:-o-radial-gradient(top, #E1C3ED 0%,#F0DEF8 100%); 
    background:-ms-radial-gradient(top, #E1C3ED 0%,#F0DEF8 100%);
    background:radial-gradient(top, #E1C3ED 0%,#F0DEF8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E1C3ED', endColorstr='#F0DEF8');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E1C3ED', endColorstr='#F0DEF8')";  */
    }


#slice4 {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}

    #slice4 .pie {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -o-transform: rotate(30deg);
        transform: rotate(30deg);
        /*background: -webkit-gradient(radial, left top, right top, color-stop(0.0, #431257), color-stop(1.0, #541E6A));
    background:-moz-radial-gradient(top, #431257 0%, #541E6A 100%); 
    background:-moz-radial-gradient(top, #431257 0%, #541E6A 100%); 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#431257), color-stop(100%,#541E6A)); 
    background:-webkit-radial-gradient(top, #431257 0%,#541E6A 100%); 
    background:-webkit-radial-gradient(top, #431257 0%, #541E6A 100%); 
    background:-o-radial-gradient(top, #431257 0%,#541E6A 100%); 
    background:-ms-radial-gradient(top, #431257 0%,#541E6A 100%);
    background:radial-gradient(top, #431257 0%,#541E6A 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#431257', endColorstr='#541E6A');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#431257', endColorstr='#541E6A')";*/
    }


#slice5 {
    -webkit-transform: rotate(300deg);
    -moz-transform: rotate(300deg);
    -o-transform: rotate(300deg);
    transform: rotate(300deg);
}

    #slice5 .pie {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -o-transform: rotate(30deg);
        transform: rotate(30deg);
        /*background: -webkit-gradient(radial, left top, right top, color-stop(0.0, #631683), color-stop(1.0, #752995));
    background:-moz-radial-gradient(top, #631683 0%, #752995 100%); 
    background:-moz-radial-gradient(top, #631683 0%, #752995 100%); 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#631683), color-stop(100%,#752995)); 
    background:-webkit-radial-gradient(top, #631683 0%,#752995 100%); 
    background:-webkit-radial-gradient(top, #631683 0%, #752995 100%); 
    background:-o-radial-gradient(top, #631683 0%,#752995 100%); 
    background:-ms-radial-gradient(top, #631683 0%,#752995 100%);
    background:radial-gradient(top, #631683 0%,#752995 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#631683', endColorstr='#752995');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#631683', endColorstr='#752995')";  */
    }


#slice6 {
    -webkit-transform: rotate(330deg);
    -moz-transform: rotate(330deg);
    -o-transform: rotate(330deg);
    transform: rotate(330deg);
}

    #slice6 .pie {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -o-transform: rotate(30deg);
        transform: rotate(30deg);
        /*background: -webkit-gradient(radial, left top, right top, color-stop(0.0, #883FA7), color-stop(1.0, #9852B5));
    background:-moz-radial-gradient(top, #883FA7 0%, #9852B5 100%); 
    background:-moz-radial-gradient(top, #883FA7 0%, #9852B5 100%); 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#883FA7), color-stop(100%,#9852B5)); 
    background:-webkit-radial-gradient(top, #883FA7 0%,#9852B5 100%); 
    background:-webkit-radial-gradient(top, #883FA7 0%, #9852B5 100%); 
    background:-o-radial-gradient(top, #883FA7 0%,#9852B5 100%); 
    background:-ms-radial-gradient(top, #883FA7 0%,#9852B5 100%);
    background:radial-gradient(top, #883FA7 0%,#9852B5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#883FA7', endColorstr='#9852B5');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#883FA7', endColorstr='#9852B5')"; */
    }

.modal-body {
    max-height: calc(100vh - 212px);
    overflow-y: auto;
}


.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #6500ad;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 1.3s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.m-content {
    margin-bottom: 10%
}