.dot {
	display: block; display: inline-block; position: relative;
	width: 10px; height: 10px;
	@include border-radius( 15px );
	border: solid 1px $main-border-color;
}


.number_dot, .number-dot, .nmbr_dot, .nmbr-dot {
	display: inline-block;
	height: 40px; width: 40px;
	line-height: 36px;
	text-align: center;
	@include border-radius( 100px );
	@include box-shadow (inset 0 1px 1px 0 rgba(51,102,153,0.4));
	text-shadow: 0 2px rgba(51,102,153,0.4);
	border: solid 2px #fff;
	color: #fff;
	background-color: $pink;
	font-size: 22px;
	font-weight: 800;
	margin: 0 auto $general-vertical-spacing-half;
	
	

	
	&.sm {
	    height: 24px;
	    line-height: 20px;
	    width: 24px;
	    border: solid 1px #fff;
	    font-size: 18px;
	    margin: 0 5px 0 0;
	}
	
	&.dot-xs {
	    height: 20px; width: 20px;
	    line-height: 18px;
	    border-width: 1px;
	    font-size: 14px;
	}
	&.dot-sm {
	    height: 30px; width: 30px;
	    line-height: 26px;
	    border-width: 1px;
	    font-size: 18px;
	}
	
	&.dot-lg {
	    height: 60px; width: 60px;
	    line-height: 54px;
	    border-width: 3px;
	    font-size: 34px;
	}
	&.dot-xl {
	    height: 92px; width: 92px;
	    line-height: 82px;
	    border-width: 5px;
	    font-size: 40px;
	}
	
	&.dot-xxl {
	    height: 120px; width: 120px;
	    line-height: 108px;
	    border-width: 5px;
	    font-size: 80px;
	}
	
}


.dot, .number_dot, .number-dot, .nmbr_dot, .nmbr-dot {
    @each $current-color in $colorClasses {
	    &.dot-#{$current-color} {
	        background-color:   map-get($appColorz, btn-#{$current-color}-bg);
    	    color:              map-get($appColorz, btn-#{$current-color}-color);
    	    border-color:       map-get($appColorz, btn-#{$current-color}-border);
	    }
	}
}