@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/********************* MY CSS ********************/
		/********* BODY OVERLAY ***********/
		
		.overlay-loader{
		  position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;transition: 1s;display: none;
		}
		.span{
		  position: absolute;
		  transform: translate(-50%, 50%);
		  width: 70px; 
		  height: 70px;
		  border-radius: 10px;
		  background-color: white;
		  top: 35%;
		  border: 5px solid white;
		  z-index: 1;
		  animation: animar 2.5s linear infinite;
		  
		}
		.span:before{
			content : '';
		  position: absolute;
		  border-radius: 30px;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background: #eed274;
		  animation: animarbg 2.5s linear infinite;
		}

		@keyframes animar {
			0% {
				transform: translate(-50%, 50%) rotate(0deg);
			}
			25% {
				transform: translate(-50%, 50%) rotate(180deg);
			}
			50% {
				transform: translate(-50%, 50%) rotate(180deg);
			}
			75% {
				transform: translate(-50%, 50%) rotate(360deg);
			}
			100% {
				transform: translate(-50%, 50%) rotate(360deg);
			}
		}
		@keyframes animarbg {
			0% {
				height: 0;
			}
			25% {
				height: 0;
			}
			50% {
				height: 100%;
			}
			75% {
				height: 100%;
			}
			100% {
				height: 0;
			}
		}
		/********* BODY OVERLAY END ***********/
.hidd {
	display : none;
}
@media ( max-width : 768px ) {
			
		#snackbar {
			min-width: 100%;
			margin-left: 0px;
			background: rgb(0,0,0);
			background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255, 215, 0,1) 100%);
			color: #fff;
			text-align: center;
			border-radius: 2px;
			padding: 10px;
			position: fixed;
			opacity: 0.9;
			z-index: 1000;
			left: 0%;
			bottom: 0px;
			font-family: comic sans ms;
			font-size: 0.90em;
		}
		
		@-webkit-keyframes fadein {
			from {bottom: 0; opacity: 0;} 
			to {bottom: 0px; opacity: 1;}
		}

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

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

		@keyframes fadeout {
			from {bottom: 10px; opacity: 1;}
			to {bottom: 0; opacity: 0;}
		}
	}
	#snackbar {
		visibility: hidden;
		min-width: 250px;
		margin-left: -125px;
		background: rgb(0,0,0);
		background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255, 215, 0,1) 100%);
		color: #fff;
		text-align: center;
		border-radius: 2px;
		padding: 16px;
		position: fixed;
		z-index: 1000;
		left: 50%;
		bottom: 30px;
		font-size: 17px;
	}

	#snackbar.show {
		visibility: visible;
		-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
		animation: fadein 0.5s, fadeout 0.5s 2.5s;
	}
	@media (max-width : 768px) {
			
		#snackbar-long {
			min-width: 100%;
			margin-left: 50%;
			background: rgb(0,0,0);
			background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255, 215, 0,1) 100%);
			color: #fff;
			text-align: center;
			border-radius: 2px;
			padding: 10px;
			position: fixed;
			opacity: 0.9;
			z-index: 1000;
			left: 0%;
			bottom: 0px;
			font-family: comic sans ms;
			font-size: 0.90em;
		}
		
		@-webkit-keyframes fadein {
			from {bottom: 0; opacity: 0;} 
			to {bottom: 0px; opacity: 1;}
		}

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

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

		@keyframes fadeout {
			from {bottom: 10px; opacity: 1;}
			to {bottom: 0; opacity: 0;}
		}
	}
	#snackbar-long {
		visibility: hidden;
		min-width: 250px;
		margin-left: -20%;
		background: rgb(0,0,0);
		background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255, 215, 0,1) 100%);
		color: #fff;
		text-align: center;
		border-radius: 30px;
		padding: 16px;
		position: fixed;
		z-index: 1000;
		left: 50%;
		bottom: 30px;
		font-size: 17px;
	}

	#snackbar-long.show {
		visibility: visible;
		-webkit-animation: fadein 1.5s, fadeout 1.5s 10.5s;
		animation: fadein 1.5s, fadeout 1.5s 10.5s;
	}

	@media(min-width: 768px) {
		.visible-xs {
			display : none;
		}
	}

	@-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 fadeout {
		from {bottom: 30px; opacity: 1;} 
		to {bottom: 0; opacity: 0;}
	}

	@keyframes fadeout {
		from {bottom: 30px; opacity: 1;}
		to {bottom: 0; opacity: 0;}
	}	
	::-webkit-scrollbar-track
	{
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
		background-color: white;
	}

	::-webkit-scrollbar
	{
		width: 6px;
		background-color: #31d5c9;
	}

	::-webkit-scrollbar-thumb
	{
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-color: #be9744;
	}
		.ccursor {
			cursor: pointer;
		}
		
/********************* MY CSS END ********************/