/* The Popup (background) */

.kapsc_pop_btn{
	display: flex;
	width: 40%;
	font-weight: 600;
}
.kapsc_pop_btn img{
	width: 25%;
	text-align: center;
	margin-right: 10px;
}
.single_add_to_cart_button{
	margin-bottom: 20px;
}
.kapsc-popup-overlay{
	z-index: 999999;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	padding: 35px;
/*     background: #000000bd; */
border: 0;
bottom: 0;
/*     overflow-y: hidden; */
}
.popuptext {
	background-color: white;
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out; 
	-webkit-box-shadow: 0 0 18px 0 rgb(50 50 50 / 32%);
	box-shadow: 0 0 18px 0 rgb(50 50 50 / 32%);
	z-index: 9999999;
	padding: 25px 25px;
	position: absolute;
	background-color: grey;
	height: 70%;
	width: 70%;
	left: 50%;
	display: none;
	border-radius: 5px;
	box-sizing: border-box;
	text-align: left;
	overflow-y: scroll;
}


/* Popup Content */

.popup-content {

	width: 100%;

	box-sizing: border-box;

	font-size: 20px;

    text-align: center;


}



/* The Close Button */

.close {

	color: #aaaaaa;

	font-size: 28px;

	font-weight: bold;

	position: absolute;

	right: 13px;

	top: 0;

}



.close:hover,

.close:focus {

	color: #000;

	text-decoration: none;

	cursor: pointer;

}



.kapsc_field_length {

	width: 40%;

}

button.popup {

	color: darkgray;
	margin-bottom: 1%;

}
.kapsc-popup-overlay{
	max-width: 100%;
	min-width: 1%;
	min-height: 1%;
	max-height: 100%;
	top: 50%;
	position: fixed;
	box-sizing: border-box;
	overflow: auto!important;
	padding: 30px;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideIn {
	from {

		opacity: 0;
		transform: translateY(-100%);
	}
	to {

		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes zoomIn {
	from {

		opacity: 0;
		transform: scale(0);
	}
	to {

		opacity: 1;
		transform: scale(1);
	}
}

.kapsc_hid_OL.animate-fade .popuptext {
	animation: fadeIn 0.5s;
}

.kapsc_hid_OL.animate-slide .popuptext{
	animation: slideIn 0.5s;
}

.kapsc_hid_OL.animate-zoom .popuptext {
	animation: zoomIn 0.5s;
}
/* Animation for left */
@keyframes moveLeft {
	0% { transform: translateX(-50%); }
	50% { transform: translateX(-40%); }
	100% { transform: translateX(-50%); }
}

/* Animation for right */
@keyframes moveRight {
	0% { transform: translateX(-50%); }
	50% { transform: translateX(-60%); }
	100% { transform: translateX(-50%); }
}

/* Animation for center */
@keyframes moveCenter {
	0% { opacity: 0; }
	50% { transform: translateX(-50%); }
	100% { opacity: 1; }

}

.kapsc_hid_OL.animate-left .popuptext{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1000; /* Adjust the z-index as necessary */
	width: 50%!important;
	 /* Adjust the width as necessary */
	overflow-y: auto; /* Enable vertical scrolling if content exceeds view*/
}
.kapsc_hid_OL.animate-right .popuptext {
	right: 0;
	position: fixed;
	left: 50%;
	top: 0;
	bottom: 0;
	z-index: 1000; /* Adjust the z-index as necessary */
	width: 50%!important;
	/* Adjust the width as necessary */
	overflow-y: auto;
}
.kapsc_hid_OL.animate-center .popuptext{
 position: fixed;
	top: 50%;
	right: 50%!important;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;

}
@media screen and (max-width: 480px) {
    .popuptext{
    width : 98% !important;
}
    .popup-content{
    font-size: 10px !important;
}
.popup-content p{
    font-size: 14px !important;
}
.popup-content li{
    font-size: 14px !important;
}
}
@media only screen and (max-width: 768px) {
    .popuptext{
    width : 98% !important;
}
.popup-content{
    font-size: 10px !important;
}
.popup-content p{
    font-size: 14px !important;
}
.popup-content li{
    font-size: 14px !important;
}
}


@media screen and (max-width: 600px) {

	.responsive {

		overflow-x: auto;

	}

	table {

		width: 100% !important;

	}

	.alignright{

		margin-left: initial !important;

	}

	.popup-content {

		width: 100% !important;
	}

	.kapsc_pop_btn{

	width: 50% !important;
}.kapsc_hid_OL.animate-right .popuptext{
	width: 100%!important;
} 
.popuptext{
    width : 98% !important;
}
.popup-content{
    font-size: 10px !important;
}
.popup-content p{
    font-size: 14px !important;
}
.popup-content li{
    font-size: 14px !important;
}
}

div.responsive table thead th {

	background-color: white;

}