@import url('https://fonts.googleapis.com/css2?family=Oswald&family=Poppins:wght@300&family=Roboto&display=swap');

body {
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: black;
	background-color: #F0F2F5;
	/* font-weight:600; */
	/* overflow: scroll!important; */
	overflow-x:hidden;
}
:root {
	--Poppins: 'Poppins', sans-serif;
	--font-size: 14px;
	--color:#000;
	--heading-size: 16px;
	--btn-text-size: 14px;
	--background-color: linear-gradient(280.75deg, #0078D4 0%, #9692FF 94.81%);
	--btn-text-color: #fff;
	--border-radius: 0.75rem;
}

.card {
	border-radius: var(--border-radius);
}

.button-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 10px;
}

/* .button-container .btn{
	margin: 2px;
    flex:2; 
    max-width: 100px; 
} */

.nav-wrapper {
	background-color: #fff;
}

.nav-wrapper i {
	color: black;
}

.logo-image {
	position: absolute;
	top: -40%;
	width: 8%;
}

nav ul a:hover {
	background-color: transparent !important;
	border-bottom: 1px solid rgb(109, 109, 211);
}

.active {
	background-color: white !important;
}

.dropdown-trigger {
	margin-right: 3px;
}

.dropdown-content {
	top: 100% !important;
	left: 82% !important;
	width: 260px !important;
}

#center-menu {
	position: absolute;
	left: 40%;
	display: flex;
	gap: 20%
}

.button-container {
	display: inline-block;
	justify-content: space-around;
	/* Adjust alignment as needed */
	align-items: center;
	margin: 20px 20px;
}

.btn {
	text-transform: none;
}

.nav-wrapper {
	padding: 1px;
	border: 1px solid #c4bdbd;
	border-radius: 5px;
	/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

li:hover {
	background-color: transparent !important;
}

img.background {
	position:fixed;
	left: 0px;
	top: 0px;
	z-index: -1;
	width: 100%;
	height: 100vh;
	min-height: 500px; 
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	-webkit-filter: blur(10px);
	/* Safari 6.0 - 9.0 */
	filter: blur(10px);
}

.modal,.modal-footer{
	background-color:white!important;
}


.input-field input[type="search"] {
	border: none;
	border-bottom: 1px solid #ccc;
	box-shadow: none;
	margin: 0;
	height: auto;
	padding: 0;
	font-size: 16px;
	line-height: 1.5;
	background: none;
	border-radius: 0;
}

.label-icon {
	color: #444;
}

.material-icons {
	color: #ccc;
}

.input-field input[type="search"]:focus {
	border-bottom: 1px solid #0078D4;
	box-shadow: 0 1px 0 0 #0078D4;
}

.segment-img {
	width: 50%;
}

#modal1,
#modal3 {
	width: 98vw;
	height: 100vh;
	border-radius: 5px;
}

.collapsible {
	box-shadow: none;
	border-bottom: none;
	width: 14vw;
	background-color: transparent!important;
}

.collapsible-body {
	padding: 10px !important;
}


/* Project page style */
#project-drop {
	color: black;
	position: absolute;
	top: 0%;
	text-decoration: none;
	left: 10vw;
	border: none;
	background-color: transparent;
	cursor: pointer;
	/* padding:5px 10px; */
	transition: 0.8s ease;
}

#project-drop:hover {
	background-color: rgb(224, 224, 224);
	border-radius: 5px;
}

.drop {
	position: absolute;
	left: 10% !important;
}

.person,.fa-globe {
	color: white;
	background-color:#8766FF;
	box-shadow: 0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(0,188,212,.4)!important;
	padding: 14px 14px;
	font-size: 24px;
	border-radius: 0.75rem;
	position: relative;
	top: -20px;
	/* left: -12px; */
}
.chart {
	color: white;
	background-image: linear-gradient(195deg,#49a3f1,#1a73e8);
	box-shadow: 0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(0,188,212,.4)!important;
	padding: 14px 14px;
	font-size: 24px;
	border-radius: 0.75rem;
	position: relative;
	top: -20px;
	left:-10px;
}

.graphs{
	width: 100%; 
	min-height:240px;
}

#user_graph{
	/* width:600px!important;
	height:250px; */
	display:none;
}

rect{
	/* fill:transparent!important; */
	stroke: transparent!important;
}
.piecharts{
	width: 100%; 
	min-height:200px;
}
.fa-globe {
	color: white;
	background-color:#8766FF;
	box-shadow: 0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(0,188,212,.4)!important;
	padding: 14px 14px;
	font-size: 24px;
	border-radius: 0.75rem;
	position: relative;
	top: -20px;
	/* left:16px; */
}
.link {
	color: white;
	background-color:#8766FF;
	box-shadow: 0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(0,188,212,.4)!important;
	padding: 14px 14px;
	font-size: 24px;
	border-radius: 0.75rem;
	position: relative;
	top: -20px;
	/* left:16px; */
}
.live_userGraph {
	left:-18px;
}

.user_heading,.realtimeActive_user_heading,.Popular_pages,.javascript_heading,.pack_heading{
	font-size:18px;
	color:var(--color);
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight:600;
	margin-top:16px;
}

.ip-text,.onwork_integration_script{
	font-size:16px;
	color:var(--color);
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight:550;
}

.realtimeActive_user_heading{
	font-size:16px;
	color:var(--color);
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	/* font-weight:600; */
	margin-top:6px;
}
.Unique_user,.returing_user{
	font-size:16px;
	color:var(--color);
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight:600;
	margin-top:6px;
	text-align: center;
}

.user_details{
	color:#34476C;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 16px;
	font-weight:500;
}
.live_user_value,td{
	color:#34476C;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 16px;
	font-weight:500;
	/* text-align: center; */
}
.user_number{
	color:#34476C;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 22px;
	margin-top:-18px;
	/* font-weight:500; */
}

.arrow_upward{
	vertical-align: middle;
	color:green;
	font-size:14px;
	margin-top:-26px;
}
.arrow_downward{
	vertical-align: middle;
	color:red;
	font-size:14px;
	margin-top:-20px;
}
td,a{
	color:#34476C;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size:16px;
	/* font-weight:500; */
}
.Unique_user_value,.returing_user_value{
	color:#34476C;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 16px;
	font-weight:500;
	text-align: center;
}

.flag{
	width:20px;
	vertical-align: middle;
}

.tabs{
	margin-bottom: 10px;
	background:transparent;
    /* box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18); */
}

.active{
	background-color:transparent!important;
    /* box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.tabs .tab a{
	color:#000;
	text-transform: none;
}

.tabs .tab a:hover, .tabs .tab a.active{
	color:#000;
}

.tabs .indicator{
	background-image: linear-gradient(195deg,#49a3f1,#1a73e8);
}
.Tabs .tab a{
	color:#000;
	text-transform: none;
}

.Tabs .tab a:hover, .Tabs .tab a.active{
	color:#000;
	border-bottom: 2px solid #1a73e8;
	padding:0px 50px;
}

.Tabs .indicator{
	background-image: linear-gradient(195deg,#49a3f1,#1a73e8);
}
.Ref-tabs .tab a{
	color:#000;
	text-transform: none;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	FONT-WEIGHT:600;
}

.Ref-tabs .tab a:hover, .Ref-tabs .tab a.active{
	color:#000;
	border-bottom: 2px solid #1a73e8;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	padding:0px 50px;
}

.Ref-tabs .indicator{
	background-image: linear-gradient(195deg,#49a3f1,#1a73e8);
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


::-webkit-scrollbar {
	width: 6px;

}

::-webkit-scrollbar-track {
	background-color: #fff;
	border-radius: 2px;
}

::-webkit-scrollbar-thumb {
	background-color: #e6d6d6;
	border-radius: 3px;
}

#greeting{
	font-size:16px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight:600;
}

/* JS ERROR */
.error{
	color:red;
	margin-bottom:20px;
	margin-top:1px;
}

.js_error{
	color:#000;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 14px;
}

/* pie chart small circle */
.chrome,.pc,.linux,.country1{
	color:#0078D4;
}
.chromeMobile,.mobile,.OSwindow,.country2{
	color:red;
}

.Firefox,.window,.IOS,.country3{
	color:#FF9900;
}

.Safari,.tablet,.country4{
	color:green;
}
.other{
	color:#990099;
}

/*  */

/* profile */

.pic-holder {
	text-align: center;
	position: relative;
	border-radius: 50%;
	width: 150px;
	height: 150px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
  }
  
  .pic-holder .pic {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
  }
  
  .pic-holder .upload-file-block,
  .pic-holder .upload-loader {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(90, 92, 105, 0.7);
	color: #f8f9fc;
	font-size: 12px;
	font-weight: 600;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
  }
  
  .pic-holder .upload-file-block {
	cursor: pointer;
  }
  
  .pic-holder:hover .upload-file-block,
  .uploadProfileInput:focus ~ .upload-file-block {
	opacity: 1;
  }
  
  .pic-holder.uploadInProgress .upload-file-block {
	display: none;
  }
  
  .pic-holder.uploadInProgress .upload-loader {
	opacity: 1;
  }
  
  /* Snackbar css */
  .snackbar {
	visibility: hidden;
	min-width: 250px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 2px;
	padding: 16px;
	position: fixed;
	z-index: 1;
	left: 50%;
	bottom: 30px;
	font-size: 14px;
	transform: translateX(-50%);
  }
  
  .snackbar.show {
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }
  
  @-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;
	}
  }
  /*  */

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

	#greeting{
		text-align: center!important;
		font-size:16px;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-weight:600;
	}

	#btn-120m{
		margin-top:10px;
	}


	.person{
		left:0px!important;
	}
	
	.chart {
		color: white;
		background-image: linear-gradient(195deg,#49a3f1,#1a73e8);
		box-shadow: 0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(0,188,212,.4)!important;
		padding: 14px 14px;
		font-size: 24px;
		border-radius: 0.75rem;
		position: relative;
		top: -20px;
		left:-228px;
	}

	.user,.Country{
		margin-bottom: 20px;
	}

	.Return_user,.bounce_user{
		margin-top:20px;
	}
	.live_user_details,.channel,.map,.popular_page,.IntegrationScript,.time_format,.billing,.Transaction,.heatmaps,.users,.pageview,.recording{
		margin-top:20px;
	}

	.invoice{
		margin-top:-6px;
	}

	.timeformat{
		background:white!important;
		/* box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px); */
		border-radius: 10px;
		border: 1px solid rgba(255, 255, 255, 0.18);
		margin-left:0px;
		margin-top:22px;
		width:130px !important;
		padding: 0px 4px !important;
		color: #00367B!important;
	}
  }
@media only screen and (min-width:600px) and (max-width:900px) {
	.chart {
		color: white;
		background-image: linear-gradient(195deg,#49a3f1,#1a73e8);
		box-shadow: 0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(0,188,212,.4)!important;
		padding: 14px 14px;
		font-size: 24px;
		border-radius: 0.75rem;
		position: relative;
		top: -20px;
		left:-228px;
	}

	.channel{
		margin-top:20px;
	}
	.live_user_details{
		margin-top:20px;
	}

	.user,.Country,.recording{
		margin-bottom: 20px;
	}

	#browser{
		margin-top:0px!important;
	}
  }

  /* Billing Details */
  .heading {
	border-radius: 0.5rem;
	/* background-image: linear-gradient(195deg, #42424a, #191919); */
	padding: 10px 0px 14px 0px;
	color:#000;
	font-weight: 600;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	text-align: center;

}

.card {
	border-radius: 0.75rem;
}

.current_Plan_Heading {
	font-size: 22px;
	text-align: center;
	color: #1C3B71;
	font-size: 600;
}

.current_Plan_subheading {
	font-size: 12px;
	text-align: center;
	color: #1C3B71;
	font-size: 700;
}

.UpgradePlan {
	background-color: #1C3B71;
	color: white;
	font-size: 12px;
	border-radius: 6px;
	padding: 8px 10px;
	font-weight: 600;
	border: none;
	margin-top: 2px;
}

.saveDetail {
	background-color: #1C3B71;
	color: white;
	font-size: 12px;
	border-radius: 6px;
	padding: 8px 10px;
	font-weight: 600;
	border: none;
	/* margin-top:10px; */
}

.cancelDetail {
	background-color: #1C3B71;
	color: white;
	font-size: 12px;
	border-radius: 6px;
	padding: 8px 10px;
	font-weight: 600;
	border: none;
	/* margin-top:2px; */
}


/* .fa-eye-slash,
.fa-eye {
	color: white;
	background-color:#8766FF;
	padding: 14px 14px;
	font-size: 24px;
	border-radius: 0.75rem;
	position: relative;
	top: -20px;
	left:10px;
} */

.lastpayment,
.nextpayment,
.current_Plan_Heading {
	font-size: 16px;
	font-weight: 600;
	color: #000;
	text-align: right;
}

.pay,
.check_your_plan_details,
.current_Plan_subheading,
.feature {
	text-align: right;
	font-size: 13px;
	font-weight: 600;
	color: #344767;
}

#cardDetails {
	background-image: linear-gradient(195deg, #42424a, #191919);
}

.cardNumber {
	color: white;
	padding: 10px 20px;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: 6px;
	position: relative;
	top: -20px;
	margin:6px;
}

.visibleName,
.visibleExpires {
	font-size: 16px;
	color: white;
}

.cardHolderDetails {
	display: flex;
	justify-content: space-between;
	padding: 0px 20px;
	position: relative;
	top: -40px;

}

.cardHolderName {
	font-size: 14px;
	color: rgb(180, 172, 172);
	font-weight: 600;
}

.personName,
.hiddenName {
	font-size: 16px;
	font-weight: 600;
	color: white;
}

.cardExpriesDetails {
	font-size: 14px;
	color: rgb(180, 172, 172);
	font-weight: 600;
}

.ExpriesDate,
.hiddenExpires,
.ExpiresDate {
	font-size: 16px;
	font-weight: 600;
	color: white;
}

.cardImage {
	width: 80px;
	height: 60px;
}

.payment-heading,
.billingName,
.companyDetails {
	font-size: 16px;
	font-weight: 600;
	color: #344767;
	text-align: left;
}

.companyDetails {
	font-size: 16px;
	font-weight: 600;
	color: #344767;
	text-align: left;
}

.Primary-heading,
.secondary-heading {
	color: #344767;
	font-size: 18px;
	font-weight: 600;
	text-align: left;
}

.Primary-card,
.secondary-card {
	display: flex;
	justify-content: space-between;
	border: 1px solid #00000020;
	padding: 0px 10px;
	padding-top: 10px;
	border-radius: 6px;
}

.cardNo {
	vertical-align: middle;
	font-size: 16px;
	font-weight: 600;
	color: #344767;
	position: relative;
	top: -8px;
}

.mastercard {
	width: 48px;
	height: 40px;
}

.cardheading {
	font-size: 16px;
	font-weight: 600;
	color: #344767
}

.billingName,.companyDetails {
	color: #000;
}

.invoice-date,
.download-pdf{
	font-size: 16px;
	font-weight: 600;
	color: #344767;
}

.invoice-payment {
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}
.invoice-payment .invoice-pending,
.invoice-pay {
	text-align: center;
}

.invoice-no,
.next_due_date,
.paid_date {
	font-size: 12px;
	font-weight: 400;
	color: #7b809a;
}

.invoice-pending {
	color: red;
	text-align: center;
}

.invoice-pay {
	color: green;
	text-align: center;
}

.password {
	margin-left: 10px;
	/* background-color: orange; */
	width: 100% !important;
	/* top: 5px !important; */
	padding: 0px 4px !important;
}

.hoveringBGeffect {
	background-color: white;
	padding: 0px 20px 0px 10px;
}

.input-field>label {
	color: #00000050;
}

.input-field>label:not(.label-icon).active {
	color: #00367B !important
}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
	border-bottom: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 2px solid #00367B;
	transition-duration: 50ms !important;
}

input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
	border: 1px solid #00000020;
	border-radius: 10px;
}

input.invalid:not([type]),
input.invalid:not([type]):focus,
input.invalid[type=text]:not(.browser-default),
input.invalid[type=text]:not(.browser-default):focus,
input.invalid[type=password]:not(.browser-default),
input.invalid[type=password]:not(.browser-default):focus,
input.invalid[type=email]:not(.browser-default),
input.invalid[type=email]:not(.browser-default):focus,
input.invalid[type=url]:not(.browser-default),
input.invalid[type=url]:not(.browser-default):focus,
input.invalid[type=time]:not(.browser-default),
input.invalid[type=time]:not(.browser-default):focus,
input.invalid[type=date]:not(.browser-default),
input.invalid[type=date]:not(.browser-default):focus,
input.invalid[type=datetime]:not(.browser-default),
input.invalid[type=datetime]:not(.browser-default):focus,
input.invalid[type=datetime-local]:not(.browser-default),
input.invalid[type=datetime-local]:not(.browser-default):focus,
input.invalid[type=tel]:not(.browser-default),
input.invalid[type=tel]:not(.browser-default):focus,
input.invalid[type=number]:not(.browser-default),
input.invalid[type=number]:not(.browser-default):focus,
input.invalid[type=search]:not(.browser-default),
input.invalid[type=search]:not(.browser-default):focus,
textarea.materialize-textarea.invalid,
textarea.materialize-textarea.invalid:focus,
.select-wrapper.invalid>input.select-dropdown,
.select-wrapper.invalid>input.select-dropdown:focus {
	border-bottom: 1px solid #00000020;
	-webkit-box-shadow: none;
	box-shadow: none;
}

input.valid:not([type]),
input.valid:not([type]):focus,
input.valid[type=text]:not(.browser-default),
input.valid[type=text]:not(.browser-default):focus,
input.valid[type=password]:not(.browser-default),
input.valid[type=password]:not(.browser-default):focus,
input.valid[type=email]:not(.browser-default),
input.valid[type=email]:not(.browser-default):focus,
input.valid[type=url]:not(.browser-default),
input.valid[type=url]:not(.browser-default):focus,
input.valid[type=time]:not(.browser-default),
input.valid[type=time]:not(.browser-default):focus,
input.valid[type=date]:not(.browser-default),
input.valid[type=date]:not(.browser-default):focus,
input.valid[type=datetime]:not(.browser-default),
input.valid[type=datetime]:not(.browser-default):focus,
input.valid[type=datetime-local]:not(.browser-default),
input.valid[type=datetime-local]:not(.browser-default):focus,
input.valid[type=tel]:not(.browser-default),
input.valid[type=tel]:not(.browser-default):focus,
input.valid[type=number]:not(.browser-default),
input.valid[type=number]:not(.browser-default):focus,
input.valid[type=search]:not(.browser-default),
input.valid[type=search]:not(.browser-default):focus,
textarea.materialize-textarea.valid,
textarea.materialize-textarea.valid:focus,
.select-wrapper.valid>input.select-dropdown {
	border-bottom: 1px solid #00000020;
	-webkit-box-shadow: 0 0 0 0 #00000020;
	box-shadow: 0 0 0 0 #00000020;
	border: 2px solid #00367B;
}

::-webkit-scrollbar {
	width: 6px;

}

::-webkit-scrollbar-track {
	background-color: #fff;
	border-radius: 2px;
}

::-webkit-scrollbar-thumb {
	background-color: #e6d6d6;
	border-radius: 3px;
}

.submit {
	background-color: #00367B;
}

.rounded {
	background-image: linear-gradient(195deg, #49a3f1, #1a73e8);
	font-weight: 400;
}

[type="checkbox"].filled-in:checked+span:not(.lever):after {
	top: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #00367B;
	background-color: #00367B;
	z-index: 0;
}

.table-Transaction {
	max-height:180px;
	/* Set the maximum height for the scroll */
	overflow-y: auto;
	/* Enable vertical scrolling */
}

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

	.heading {
		margin-top: 100px;
	}

	#cardDetails {
		height: auto;
	}

	.cardNumber {
		font-size: 16px;
	}


	.modal {
		overflow: none !important;
		height: 100vh !important;
		padding-top: 0px !important;
	}

	.download-pdf {
		text-align: center;
	}
}

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

	.cardNumber {
		font-size: 16px;
	}


	.modal {
		overflow: none !important;
		height: 100vh !important;
		padding-top: 0px !important;
	}

	.download-pdf {
		text-align: center;
	}

	.heading {
		margin-top: 100px;
	}
}

@media only screen and (min-width:700px) and (max-width:1000px) {

	.heading {
		margin-top: 100px;
	}

	.modal-trigger {
		vertical-align: middle;
	}

	#Invoice {
		margin-top: -18px !important;
	}

	video{
		width:640px!important;
	}
}

@media only screen and (min-width:1000px) and (max-width:1023px) {
	#cardDetails {
		height: 24vh !important;
	}

	.addNewCard {
		font-size: 6px;
		padding: 10px 7px;
	}
}

@media only screen and (min-width:1024px) and (max-width:1200px) {


	#Primarycard {
		width: 100% !important;
		;
	}

	#secondary {
		width: 100% !important;
	}

	.current_Plan_subheading {
		font-size: 10px;
	}

	.addNewCard {
		padding: 10px 4px !important;
	}
}

@media only screen and (min-width:1201px) and (max-width:1430px) {
	.addNewCard {
		font-size: 9px;
		padding: 8px 8px;
	}

	.current_Plan_subheading {
		font-size: 10px;
	}
}

.logo {
	width: 160px;
	position: absolute;
	margin: 0%;

}

/* plan details */
.plan_heading{
	text-align: center;
	font-family:roboto;
	font-weight:600;
	font-size: 40px;
	text-transform: uppercase; 
	color: #02021E;
}

.plan_title{
	text-align: center;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight:600;
}

.pricing_subheading{
	text-align: center;
	font-size:22px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight:600;
}

.pricing_list{
	text-align: center;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight:600;
}

/* @media only screen and (max-width:1500px){
	.row .col.l3{
		width:50%;
	}
}
@media only screen and (max-width:600px){
	.row .col.l3{
		width:100%;
	}
} */