.swatchHolder {
    list-style-type: none;
    text-align: center;
    display: inline-block;
    padding: 0;
    color: black;
	background:#d3d3d3;
	margin-bottom:0;
}

@media only screen and (max-width: 991px) {
    .swatchHolder {
        height: 25vh;
    	overflow-y: scroll;
    }
}

.swatchHolder .colorHolder {
	position: sticky;
	height: 35px;
    top: 0;
    width: 100%;
    line-height: 100%;
    content: 'Chosen Color';
    padding: 10px 0px;
    margin: 0px auto 15px auto;
    cursor: pointer;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

 .swatchHolder li:not(.colorHolder) {
    height: 25px;
    width: 25px;
    margin: 2px;
    display: inline-block;
    cursor: pointer;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

#coloring-onl #ActivityDIV svg {
	height: 100%;
    max-height: 100%;
    width: auto;
	max-width: 100%;
    background-color: black;
}

#coloring-onl #ActivityDIV svg g {
    fill: #FFF !important;
}

#coloring-onl,#coloring-onl:hover,#coloring-onl li,#coloring-onl li:hover{
	cursor: url('/wp-content/plugins/coloringonline/assets/images/pencil_75.webp') 8 119, auto;
}

.swatchHolder::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.swatchHolder::-webkit-scrollbar
{
	width: 7px;
	background-color: #F5F5F5;
}

.swatchHolder::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes expand {
    from {min-width: 50px}
    to {min-width: 350px}
}

@keyframes expand {
    from {min-width: 50px}
    to {min-width: 350px}
}
@-webkit-keyframes stay {
    from {min-width: 350px}
    to {min-width: 350px}
}

@keyframes stay {
    from {min-width: 350px}
    to {min-width: 350px}
}
@-webkit-keyframes shrink {
    from {min-width: 350px;}
    to {min-width: 50px;}
}

@keyframes shrink {
    from {min-width: 350px;}
    to {min-width: 50px;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 60px; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 60px; opacity: 0;}
}

/* Modified from: https://github.com/mukulkant/Star-rating-using-pure-css */

.loading{
		display: none;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* Translucent background */
		background: rgba(0, 0, 0, 0.8);
}

#loading-icon{
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
}