@charset "utf-8";

.bds-drvcmd-note {
    margin-top: -10px;
    padding-top: 0px;
}


.bds-card-img128 {
    width: 128px;
    height: 128px;
}

bds-topmost {
    z-index: 999999 !important;
}

.bds-bg-primary {
    background: rgba(0,0,205, .26);
}

.bds-bg-secondary {
    background: rgba( 192,192,192, .26);
}

.bds-bg-success {
    background: rgba(173,255,47, .26);
}

.bds-bg-danger {
    background: rgba(165,42,42, .26);
}

.bds-bg-warning {
    background: rgba(240,230,140, .26);
}

.bds-bg-info {
    background: rgba(64,224,208, .26);
}

.bds-bg-light {
    background: rgba(255,250,250, .26);
    background: #f8f9fa;
}

.bds-bg-dark {
    background: rgba(105,105,105, .26);
    background: #343a40;
}

.bds-bg-white {
    background: rgba(255,255,255, .26);
}

.bds-bg-transparent {
    background: transparent;
}



.holderCircle {
    width: 220px;
    height: 220px;
    border-radius: 100%;
    margin: 6px auto;
    position: relative;
}

    .holderCircle::after {
        content: attr(data-roomname);
        width: 220px;
        height: 220px;
        border-radius: 100%;
        border: 1px solid #fca72b;
        position: absolute;
        top: 0;
    }

.dotCircle {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    z-index: 20;
}

    .dotCircle .itemDot {
        padding-top: 18px;
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        background: #ddd;
        color: #fff;
        border-radius: 100%;
        text-align: center;
        line-height: 20px;
        font-size: 8px;
        z-index: 3;
        cursor: pointer;
    }

        .dotCircle .itemDot::after {
            content: attr(title);
            width: 31px;
            height: 31px;
            position: absolute;
            border-radius: 100%;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 2;
            border: 3px solid #fff;
            color: white;
            font-weight: 800;
            text-shadow: 0 1px #000000, 1px 0 #000000, -1px 0 #000000, 0 -1px #000000;
            -webkit-text-stroke: 0 1px #000000, 1px 0 #000000, -1px 0 red, 0 -1px #000000
        }

        .dotCircle .itemDot::before {
            content: "";
            width: 32px;
            height: 32px;
            position: absolute;
            border-radius: 100%;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 2;
            border: 3px solid;
        }


    .dotCircle .itemDot_01 {
        background: #ffb048;
    }

        .dotCircle .itemDot_01::after {
        }

        .dotCircle .itemDot_01::before {
            border-color: #ffb048
        }


    .dotCircle .itemDot_02 {
        background: #28a9e0;
    }

        .dotCircle .itemDot_02::after {
        }

        .dotCircle .itemDot_02::before {
            border-color: #28a9e0;
        }

    .dotCircle .itemDot_03 {
        background: #89c445;
    }

        .dotCircle .itemDot_03::after {
        }

        .dotCircle .itemDot_03::before {
            border-color: #89c445;
        }

    .dotCircle .itemDot_04 {
        background: #fca72b;
    }

        .dotCircle .itemDot_04::after {
        }

        .dotCircle .itemDot_04::before {
            border-color: #fca72b;
        }

    .dotCircle .itemDot_05 {
        background: #3dbea0;
    }

        .dotCircle .itemDot_05::after {
        }

        .dotCircle .itemDot_05::before {
            border-color: #3dbea0;
        }


    .dotCircle .itemDot_06 {
        background: #aa229d;
    }

        .dotCircle .itemDot_06::after {
        }

        .dotCircle .itemDot_06::before {
            border-color: #aa229d;
        }

    .dotCircle .itemDot_07 {
        background: #e06410;
    }

        .dotCircle .itemDot_07::after {
        }

        .dotCircle .itemDot_07::before {
            border-color: #e06410;
        }

    .dotCircle .itemDot_08 {
        background: #1362b7;
    }

        .dotCircle .itemDot_08::after {
        }

        .dotCircle .itemDot_08::before {
            border-color: #1362b7;
        }

    .dotCircle .itemDot_09 {
        background: #e52c47;
    }

        .dotCircle .itemDot_09::after {
        }

        .dotCircle .itemDot_09::before {
            border-color: #e52c47;
        }

    .dotCircle .itemDot_10 {
        background: #fe4491;
    }

        .dotCircle .itemDot_10::after {
        }

        .dotCircle .itemDot_10::before {
            border-color: #fe4491;
        }

    .dotCircle .itemDot_11 {
        background: #ffb048;
    }

        .dotCircle .itemDot_11::after {
        }

        .dotCircle .itemDot_11::before {
            border-color: #ffb048
        }


    .dotCircle .itemDot_12 {
        background: #28a9e0;
    }

        .dotCircle .itemDot_12::after {
        }

        .dotCircle .itemDot_12::before {
            border-color: #28a9e0;
        }

    .dotCircle .itemDot_13 {
        background: #89c445;
    }

        .dotCircle .itemDot_13::after {
        }

        .dotCircle .itemDot_13::before {
            border-color: #89c445;
        }

    .dotCircle .itemDot_14 {
        background: #fca72b;
    }

        .dotCircle .itemDot_14::after {
        }

        .dotCircle .itemDot_14::before {
            border-color: #fca72b;
        }

    .dotCircle .itemDot_15 {
        background: #3dbea0;
    }

        .dotCircle .itemDot_15::after {
        }

        .dotCircle .itemDot_15::before {
            border-color: #3dbea0;
        }


    .dotCircle .itemDot_16 {
        background: #aa229d;
    }

        .dotCircle .itemDot_16::after {
        }

        .dotCircle .itemDot_16::before {
            border-color: #aa229d;
        }

    .dotCircle .itemDot_17 {
        background: #e06410;
    }

        .dotCircle .itemDot_17::after {
        }

        .dotCircle .itemDot_17::before {
            border-color: #e06410;
        }

    .dotCircle .itemDot_18 {
        background: #1362b7;
    }

        .dotCircle .itemDot_18::after {
        }

        .dotCircle .itemDot_18::before {
            border-color: #1362b7;
        }

    .dotCircle .itemDot_19 {
        background: #e52c47;
    }

        .dotCircle .itemDot_19::after {
        }

        .dotCircle .itemDot_19::before {
            border-color: #e52c47;
        }

    .dotCircle .itemDot_20 {
        background: #fe4491;
    }

        .dotCircle .itemDot_20::after {
        }

        .dotCircle .itemDot_20::before {
            border-color: #fe4491;
        }

    .dotCircle .itemDot_21 {
        background: #ffb048;
    }

        .dotCircle .itemDot_21::after {
        }

        .dotCircle .itemDot_21::before {
            border-color: #ffb048
        }


    .dotCircle .itemDot_22 {
        background: #28a9e0;
    }

        .dotCircle .itemDot_22::after {
        }

        .dotCircle .itemDot_22::before {
            border-color: #28a9e0;
        }

    .dotCircle .itemDot_23 {
        background: #89c445;
    }

        .dotCircle .itemDot_23::after {
        }

        .dotCircle .itemDot_23::before {
            border-color: #89c445;
        }

    .dotCircle .itemDot_24 {
        background: #fca72b;
    }

        .dotCircle .itemDot_24::after {
        }

        .dotCircle .itemDot_24::before {
            border-color: #fca72b;
        }

    .dotCircle .itemDot_25 {
        background: #3dbea0;
    }

        .dotCircle .itemDot_25::after {
        }

        .dotCircle .itemDot_25::before {
            border-color: #3dbea0;
        }


    .dotCircle .itemDot_26 {
        background: #aa229d;
    }

        .dotCircle .itemDot_26::after {
        }

        .dotCircle .itemDot_26::before {
            border-color: #aa229d;
        }

    .dotCircle .itemDot_27 {
        background: #e06410;
    }

        .dotCircle .itemDot_27::after {
        }

        .dotCircle .itemDot_27::before {
            border-color: #e06410;
        }

    .dotCircle .itemDot_28 {
        background: #1362b7;
    }

        .dotCircle .itemDot_28::after {
        }

        .dotCircle .itemDot_28::before {
            border-color: #1362b7;
        }

    .dotCircle .itemDot_29 {
        background: #e52c47;
    }

        .dotCircle .itemDot_29::after {
        }

        .dotCircle .itemDot_29::before {
            border-color: #e52c47;
        }

    .dotCircle .itemDot_20 {
        background: #fe4491;
    }

    .dotCircle .itemDot_30::after {
    }

    .dotCircle .itemDot_30::before {
        border-color: #fe4491;
    }



    .dotCircle .itemDot.active {
        background: #ffb048;
        color: #fff;
        transition: 0.5s;
        padding-top: 6px;
        padding-left: 4px;
        display: block;
        width: 60px;
        height: 60px;
        position: absolute;
        border-radius: 100%;
        text-align: center;
        line-height: 70px;
        font-size: 16px;
        z-index: 3;
        cursor: pointer;
    }

        .dotCircle .itemDot.active::after {
            width: 60px;
            height: 60px;
            border: 3px solid #e52c47;
            box-shadow: 0px 0px 35px 1px #2b152e;
        }

        .dotCircle .itemDot.active::before {
            width: 62px;
            height: 62px;
            position: absolute;
            border-radius: 100%;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 2;
            border: 3px solid #e52c47;
        }

    .dotCircle .itemDot .forActive {
        width: 28px;
        height: 28px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
    }

        .dotCircle .itemDot .forActive::after {
            content: '';
            width: 8px;
            height: 8px;
            border: 5px solid #fe4491;
            bottom: -25px;
            left: -24px;
            filter: blur(1px);
            position: absolute;
            border-radius: 100%;
            z-index: 3;
        }

        .dotCircle .itemDot .forActive::before {
            content: '';
            width: 9px;
            height: 9px;
            filter: blur(5px);
            top: -25px;
            position: absolute;
            transform: rotate(-45deg);
            border: 8px solid #e52c47;
            right: -28px;
            z-index: 3;
        }


    .dotCircle .itemDot.active .forActive {
        display: block;
    }


    .dotCircle .itemDot:hover {
        background: #34495e;
        color: #fff;
        transition: 0.5s;
    }

        .dotCircle .itemDot:hover::before {
            border-color: #34495e;
        }






.contentCircle {
    width: 176px;
    height: 176px;
    border-radius: 100%;
    background: url(../Image/bgcircle.png) no-repeat;
    color: #fff;
    position: relative;
    top: 22px;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0px 0px 35px 1px #2b152e;
    margin: auto;
}

    .contentCircle .CirItem {
        border-radius: 100%;
        color: #fff;
        position: absolute;
        text-align: center;
        bottom: 0;
        left: 0;
        opacity: 0;
        transform: scale(0);
        transition: 0.5s;
        font-weight: bold;
        font-size: 13px;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        margin: auto;
        padding-top: 60px;
        background: #00000054;
    }

.CirItem.active {
    z-index: 1;
    opacity: 1;
    transform: scale(1);
    transition: 0.5s;
}


.contentCircle .CirItem_01 {
    background: rgba(255, 176, 72, 0.83);
}

    .contentCircle .CirItem_01::after,
    .contentCircle .CirItem_02::after,
    .contentCircle .CirItem_03::after,
    .contentCircle .CirItem_04::after,
    .contentCircle .CirItem_05::after,
    .contentCircle .CirItem_06::after,
    .contentCircle .CirItem_07::after,
    .contentCircle .CirItem_08::after,
    .contentCircle .CirItem_09::after,
    .contentCircle .CirItem_10::after,
    .contentCircle .CirItem_11::after,
    .contentCircle .CirItem_12::after,
    .contentCircle .CirItem_13::after,
    .contentCircle .CirItem_14::after,
    .contentCircle .CirItem_15::after,
    .contentCircle .CirItem_16::after,
    .contentCircle .CirItem_17::after,
    .contentCircle .CirItem_18::after,
    .contentCircle .CirItem_19::after,
    .contentCircle .CirItem_20::after,
    .contentCircle .CirItem_21::after,
    .contentCircle .CirItem_22::after,
    .contentCircle .CirItem_23::after,
    .contentCircle .CirItem_24::after,
    .contentCircle .CirItem_25::after,
    .contentCircle .CirItem_26::after,
    .contentCircle .CirItem_27::after,
    .contentCircle .CirItem_28::after,
    .contentCircle .CirItem_29::after,
    .contentCircle .CirItem_30::after {
        content: '';
        width: 50%;
        height: 100%;
        border-bottom-left-radius: 220px;
        border-top-left-radius: 220px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        background: rgba(0, 0, 0, 0.33);
    }

.contentCircle .CirItem_02 {
    background: rgba(40, 169, 224, 0.83);
}

.contentCircle .CirItem_03 {
    background: rgba(137, 196, 69, 0.83);
}

.contentCircle .CirItem_04 {
    background: rgba(252, 167, 43, 0.83);
}

.contentCircle .CirItem_05 {
    background: rgba(61, 190, 160, 0.83);
}

.contentCircle .CirItem_06 {
    background: rgba(170, 34, 157, 0.83);
}

.contentCircle .CirItem_07 {
    background: rgba(224, 100, 16, 0.83);
}

.contentCircle .CirItem_08 {
    background: rgba(19, 98, 183, 0.83);
}

.contentCircle .CirItem_09 {
    background: rgba(229, 44, 71, 0.83);
}

.contentCircle .CirItem_10 {
    background: rgba(254, 68, 145, 0.83);
}

.contentCircle .CirItem_11 {
    background: rgba(255, 176, 72, 0.83);
}

.contentCircle .CirItem_12 {
    background: rgba(40, 169, 224, 0.83);
}

.contentCircle .CirItem_13 {
    background: rgba(137, 196, 69, 0.83);
}

.contentCircle .CirItem_14 {
    background: rgba(252, 167, 43, 0.83);
}

.contentCircle .CirItem_15 {
    background: rgba(61, 190, 160, 0.83);
}

.contentCircle .CirItem_16 {
    background: rgba(170, 34, 157, 0.83);
}

.contentCircle .CirItem_17 {
    background: rgba(224, 100, 16, 0.83);
}

.contentCircle .CirItem_18 {
    background: rgba(19, 98, 183, 0.83);
}

.contentCircle .CirItem_19 {
    background: rgba(229, 44, 71, 0.83);
}

.contentCircle .CirItem_20 {
    background: rgba(254, 68, 145, 0.83);
}


.contentCircle .CirItem_21 {
    background: rgba(255, 176, 72, 0.83);
}

.contentCircle .CirItem_22 {
    background: rgba(40, 169, 224, 0.83);
}

.contentCircle .CirItem_23 {
    background: rgba(137, 196, 69, 0.83);
}

.contentCircle .CirItem_24 {
    background: rgba(252, 167, 43, 0.83);
}

.contentCircle .CirItem_25 {
    background: rgba(61, 190, 160, 0.83);
}

.contentCircle .CirItem_26 {
    background: rgba(170, 34, 157, 0.83);
}

.contentCircle .CirItem_27 {
    background: rgba(224, 100, 16, 0.83);
}

.contentCircle .CirItem_28 {
    background: rgba(19, 98, 183, 0.83);
}

.contentCircle .CirItem_29 {
    background: rgba(229, 44, 71, 0.83);
}

.contentCircle .CirItem_30 {
    background: rgba(254, 68, 145, 0.83);
}


@media only screen and (min-width: 300px) and (max-width: 599px) {
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
}

@media only screen and (min-width: 1220px) {
}