body {
    background: #fff;
    font-family: verdana;
    color: #737373;
    letter-spacing: -1px;
}

.menu {
    position: absolute;
    left: 241px;
    top: 68px;
    width: 220px;
    height: 470px;
}

.text {
    position: absolute;
    font-size: 18px;
    font-weight: bold;
	letter-spacing: -1.5px;
}

.text1 {
    position: absolute;
    font-size: 14px;
    top: 20px;
    height: 20px;
    border-bottom: 1px solid #737373;
}

.text2 {
    position: absolute;
    font-size: 14px;
    top: 354px;
    height: 19px;
    border-bottom: 1px solid #737373;
    width: 170px;
}

.text3 {
    color: #b8b8b8;
    font-size: 12px;
    width: 156px;
    position: absolute;
    padding: 4px;
	top: 2px;
    left: -2px;
}

ul {
    position: absolute;
    top: 32px;
    left: -40px;
    font-size: 12px;
    letter-spacing: -1px;
}

ul li {
    list-style: decimal-leading-zero;
    padding-top: 4px;
    list-style: none;
    cursor: pointer;
}

.play,
.pause,
.next,
.pre {
    cursor: pointer;
}


/* //.number{font-weight:bold;} */

.block {
    position: absolute;
    top: 380px;
    background: grey;
    height: 83px;
    width: 165px;
    border: 1px solid #666666;
    left: 2px;
}

.Grid {
    position: absolute;
    width: 551px;
    height: 465px;
    left: 462px;
    top: 65px;
    right: 257px;
    bottom: 558px;
    border: 1px solid #666666;
    background-size: 10px 10px;
    background-image: linear-gradient(to right, #a3a3a3 1px, transparent 0.5px), linear-gradient(to bottom, #a3a3a3 1px, transparent 0.5px);
    background-color: #999999;
}

.bubble {
    width: 15px;
    height: 15px;
    border-radius: 8px;
    background-color: #a6a6a6;
    position: fixed;
}

.patch {
    position: absolute;
    width: 150px;
    height: 20px;
    background: #cccccc;
    left: 3px;
    top: 38px;
	font-size: 13px;
    color: #a6a6a6;
}

.pre1 {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 10px solid #fff;
    position: absolute;
	left: 4px;
    top: 64px;
}

.pre2 {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 10px solid #fff;
    position: absolute;
    left: 15px;
    top: 64px;
}

.pause {
    position: absolute;
    width: 10px;
    height: 10px;
    left: 33px;
    top: 63px;
    background: #fff;
}

.play {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #fff;
    position: absolute;
    left: 53px;
    top: 64px;
}

.next1 {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #fff;
    position: absolute;
    left: 72px;
    top: 64px;
}

.next2 {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #fff;
    position: absolute;
    left: 84px;
    top: 64px;
}

.bottom_patch {
    position: absolute;
    height: 25px;
    width: 549px;
    border: 1px solid #626262;
    top: 439px;
}

.displayNumber {
    position: absolute;
    width: 25px;
    background: grey;
    height: 24px;
    left: -1px;
    border-right: 1px solid #626262;
}

.name {
    position: absolute;
    width: 345px;
    background: #cccccc;
    height: 25px;
    left: 25px;
    border: 1px solid #626262;
    top: -1px;
}

.curr_time {
    position: absolute;
    width: 86px;
    background: grey;
    height: 25px;
    left: 372px;
    border-left: 1px solid #626262;
    color: #cccccc;
    font-size: 10px;
    line-height: 19px;
    padding-left: 4px;
}
.name .number{    color: #797979;
					font-size: 11.5px;
					left: 10px;
					letter-spacing: -1px;
					position: absolute;
					top: 5px;}

.name .number b{	position: absolute;
					color: #cccccc;
					left: -30px;}
			
.curr_date {
   position: absolute;
    width: 83px;
    background: grey;
    height: 25px;
    left: 463px;
    border-left: 1px solid #626262;
    color: #fff;
    color: #cccccc;
    font-size: 10px;
    line-height: 19px;
    padding-left: 4px;
}

#ball1 {
    top: 138px;
    left: 531px;
}

#ball2 {
    top: 148px;
    left: 561px;
}

#ball3 {
    top: 168px;
    left: 541px;
}

#ball4 {
    top: 158px;
    left: 571px;
}

#ball5 {
    top: 178px;
    left: 561px;
}

#ball6 {
    top: 278px;
    left: 591px;
}

#ball7 {
    top: 128px;
    left: 521px;
}

#ball8 {
    top: 188px;
    left: 551px;
}

#ball9 {
    top: 168px;
    left: 531px;
}

#ball10 {
    top: 168px;
    left: 531px;
}

#ball11 {
    top: 168px;
    left: 531px;
}

#ball12 {
    top: 168px;
    left: 531px;
}

#ball13 {
    top: 168px;
    left: 531px;
}
#ball14 {
    top: 166px;
    left: 536px;
}
#ball15 {
    top: 166px;
    left: 530px;
}
#ball16 {
    top: 106px;
    left: 436px;
}


/* Container */

#container {
    position: absolute;
    width: 550px;
    height: 440px;
}


/* Balls */

.ballall {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: #cccccc;
    z-index: 99;
}

.ballall:hover .divlable {
    display: block;
}

.divlable {
    position: absolute;
    background: #cccccca1;
    left: 11px;
    top: -5px;
    border: 1px solid #737373;
    padding: 0 5px;
    font-size: 12px;
    display: none;
    white-space: nowrap;
}

.circle-ripple {
    /* background-color: #35ffc3;
    width: 1em;
    height: 1em;
    border-radius: 50%; */
    -webkit-animation: ripple 0.7s linear infinite;
    animation: ripple 0.7s linear infinite;
}

@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(226, 226, 226, 0.3), 0 0 0 0.2em rgba(226, 226, 226, 0.3), 0 0 0 0.6em rgba(226, 226, 226, 0.3), 0 0 0 1em rgba(226, 226, 226, 0.3);
    }
    100% {
        box-shadow: 0 0 0 0.2em rgba(226, 226, 226, 0.3), 0 0 0 0.6em rgba(226, 226, 226, 0.3), 0 0 0 1em rgba(226, 226, 226, 0.3), 0 0 0 2em rgba(226, 226, 226, 0.3);
    }
}

.showlable {
    display: block !important;
}