.amsler__wheel--4 {
    width: 300px;
    height: 300px;
    position: relative;
    margin: auto;
}

    .amsler__wheel--4 ul {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;
        height: 100%;
        position: relative;
        border: 3px solid #b0bec5;
        border-radius: 50%;
        overflow: hidden;
        box-sizing: border-box;
    }

        .amsler__wheel--4 ul li {
            position: absolute;
            width: 50%;
            height: 50%;
            box-sizing: border-box;
            border: 2px solid #b0bec5;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 600;
            background: #fff;
            color: #fff;
            transition: .25s;
        }

            /* Top Left */
            .amsler__wheel--4 ul li:nth-child(1) {
                left: 0;
                top: 0;
                border-radius: 100% 0 0 0;
            }

            /* Top Right */
            .amsler__wheel--4 ul li:nth-child(2) {
                right: 0;
                top: 0;
                border-radius: 0 100% 0 0;
            }

            /* Bottom Right */
            .amsler__wheel--4 ul li:nth-child(3) {
                right: 0;
                bottom: 0;
                border-radius: 0 0 100% 0;
            }

            /* Bottom Left */
            .amsler__wheel--4 ul li:nth-child(4) {
                left: 0;
                bottom: 0;
                border-radius: 0 0 0 100%;
            }

            /* Active */
            .amsler__wheel--4 ul li.active,
            .amsler__wheel--4 ul li:hover {
                background: #2d2d2d;
                color: #333;
            }

    /* Center Circle */
    .amsler__wheel--4 > a {
        position: absolute;
        width: 48px;
        height: 48px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        background: #FFF;
        border: 2px solid #b0bec5;
        z-index: 10;
    }

        .amsler__wheel--4 > a.active,
        .amsler__wheel--4 > a:hover {
            background: #2d2d2d;
        }

/*8 Field circle*/
.amsler__wheel--8 {
    width: 300px;
    height: 300px;
    margin: auto;
    position: relative;
}

    .amsler__wheel--8 ul {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        list-style: none;
        position: relative;
        border: 3px solid #B0BEC5;
        border-radius: 50%;
        overflow: hidden;
        box-sizing: border-box;
    }

        .amsler__wheel--8 ul li {
            position: absolute;
            width: 150px;
            height: 150px;
            left: 50%;
            top: 50%;
            margin-left: -75px;
            margin-top: -150px;
            transform-origin: 50% 100%;
            cursor: pointer;
            clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
            background: url('../../img/New-Consultation/traingle-shape.svg') no-repeat center;
            background-size: 100% 106%;
        }

            .amsler__wheel--8 ul li.active,
            .amsler__wheel--8 ul li:hover {
                background-image: url('../../img/New-Consultation/triangle-shape-active.svg') !important;
            }

    .amsler__wheel--8 li:nth-child(1) {
        transform: rotate(0deg);
    }

    .amsler__wheel--8 li:nth-child(2) {
        transform: rotate(45deg);
    }

    .amsler__wheel--8 li:nth-child(3) {
        transform: rotate(90deg);
    }

    .amsler__wheel--8 li:nth-child(4) {
        transform: rotate(135deg);
    }

    .amsler__wheel--8 li:nth-child(5) {
        transform: rotate(180deg);
    }

    .amsler__wheel--8 li:nth-child(6) {
        transform: rotate(225deg);
    }

    .amsler__wheel--8 li:nth-child(7) {
        transform: rotate(270deg);
    }

    .amsler__wheel--8 li:nth-child(8) {
        transform: rotate(315deg);
    }

    .amsler__wheel--8 > a {
        position: absolute;
        width: 46px;
        height: 46px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        border: 2px solid #B0BEC5;
        background: #fff;
        z-index: 100;
    }

        .amsler__wheel--8 > a.active,
        .amsler__wheel--8 > a:hover {
            background: #2d2d2d;
        }