#dragNdrop input[type="file"] {
	display: none;
}

#file-drag {
	border: 2px dashed #555;
	border-radius: 7px;
	color: #555;
	cursor: pointer;
	display: block;
	font-weight: bold;
	margin: 1em 0;
	padding: 3em;
	text-align: center;
	transition: background 0.3s, color 0.3s;
}

#file-drag:hover {
	background: #ddd;
}

#file-drag:hover,
#file-drag.hover {
	border-color: #3070A5;
	border-style: solid;
	box-shadow: inset 0 3px 4px #888;
	color: #3070A5;
}

#file-progress {
	display: none;
	margin: 1em auto;
	width: 100%;
}

#file-upload-btn {
	margin: auto;
}

#file-upload-btn:hover {
	background: #4499c9;
}

#file-upload-form {
	margin: auto;
	width: 100%;
}

progress {
	appearance: none;
	background: #eee;
	border: none;
	border-radius: 3px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
	height: 30px;
}

progress[value]::-webkit-progress-value {
	background:
		-webkit-linear-gradient(-45deg,
			transparent 33%,
			rgba(0, 0, 0, .2) 33%,
			rgba(0, 0, 0, .2) 66%,
			transparent 66%),
		-webkit-linear-gradient(right,
			#005f95,
			#07294d);
	background:
		linear-gradient(-45deg,
			transparent 33%,
			rgba(0, 0, 0, .2) 33%,
			rgba(0, 0, 0, .2) 66%,
			transparent 66%),
		linear-gradient(right,
			#005f95,
			#07294d);
	background-size: 60px 30px, 100% 100%, 100% 100%;
	border-radius: 3px;
}

progress[value]::-moz-progress-bar {
	background:
		-moz-linear-gradient(-45deg,
			transparent 33%,
			rgba(0, 0, 0, .2) 33%,
			rgba(0, 0, 0, .2) 66%,
			transparent 66%),
		-moz-linear-gradient(right,
			#005f95,
			#07294d);
	background:
		linear-gradient(-45deg,
			transparent 33%,
			rgba(0, 0, 0, .2) 33%,
			rgba(0, 0, 0, .2) 66%,
			transparent 66%),
		linear-gradient(right,
			#005f95,
			#07294d);
	background-size: 60px 30px, 100% 100%, 100% 100%;
	border-radius: 3px;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.gap-10 {
    gap: 10px;
}

.dropdown-menu.show {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	padding: 2px !important;
	right: 57px !important;
	top: 45px;
}

.card-body .questions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.card-body .questions .qbox .question-drop {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 5px;
	border-radius: 5px;
}

.qbox .question-drop span {
	font-size: 12px;
}

#usagesmetrix {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-sidebar .nav-link p,
.nav-sidebar .nav-link i {
	color: black;
}

.nav-sidebar .nav-link.active p,
.nav-sidebar .nav-link.active i {
	color: rgb(255, 255, 255);
}

.nav-sidebar>.nav-item>.nav-link:hover {
	background: #6f42c121;
}

.table-fix {
	max-height: 350px;
	min-height: 350px;
	overflow-y: scroll;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__display {
    color: black !important;
    padding-left: 10px !important;
}
.select2-selection{
	height: 35px!important;
}
.expired {
    background: #c72b2b;
    color: white !important;
    border-radius: 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
	color: black !important;
	padding-left: 10px !important;
}
/* Universal CSS */

body{
	color: #222;
    font-family: Poppins, sans-serif;
}
ul, ol{
	padding-left: 0px!important;
}
.go-login{
	color: white !important;
	font-size: 16px;
	line-height: 1.5;	
}
.nav-link-nav{
	color: rgba(0, 0, 0, .6);
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0;
    font-size: .875rem;
    font-weight: 600;
    transition: color .2s;
}
.navbar-nav{
	grid-column-gap: 20px;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
}
.gap-10{
	gap: 10px;
}
.dash_card-text{
	font-size: 20px !important;
	font-weight: 600!important;
	color: white!important;
	margin-top: 10px!important;
}
/* Admin Login & Login start from here*/

.login-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	position: relative;
}

.login-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(135deg, rgba(220, 53, 69, 0.8), rgba(255, 99, 132, 0.7)), url('https://images.unsplash.com/photo-1519389950473-47ba0277781c') center/cover no-repeat;
	color: white;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.login-form {
	width: 100%;
	max-width: 400px;
	z-index: 1;
}

.circle {
	position: absolute;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #dc3545;
	opacity: 0.15;
	z-index: 0;
}

.circle1 {
	top: 50px;
	right: 60px;
}

.circle2 {
	bottom: 70px;
	left: 40px;
}

.circle3 {
	bottom: 140px;
	right: 113px;
	position: absolute;
	width: 95px;
	height: 95px;
	border-radius: 50%;
	background-color: #dc3545;
	opacity: 0.15;
	z-index: 0;
}

@media (max-width: 767.98px) {
	.login-left {
		display: none;
	}
	.login-right{
		display: none;
	}
}

.login-right {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(135deg, rgba(220, 53, 69, 0.8), rgba(255, 99, 132, 0.7)), url('https://images.unsplash.com/photo-1519389950473-47ba0277781c') center/cover no-repeat;
	color: white;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/* ends here */

/* welcome/home page */

/* 

            .animated-bg {
              position: relative;
              overflow: hidden;
              min-height: 100vh;
            }
            .hero {
              position: relative;
              padding: 6rem 1rem;
              text-align: center;
              color: white;
            }
            /* .hero::before {
              content: "";
              position: absolute;
              top: 0; left: 0;
              width: 100%; height: 100%;
              /* background: linear-gradient(-45deg, #5e8aff, #82cfff, #6c8cd5, #476ef0); */
/* background: linear-gradient(to right, #0e86ff, #f64555);
              background-size: 400% 400%;
              animation: moveGradient 15s ease infinite;
              z-index: -1;
              opacity: 0.9;
              filter: blur(40px);
            }
            @keyframes moveGradient {
              0% { background-position: 0% 50%; }
              50% { background-position: 100% 50%; }
              100% { background-position: 0% 50%; }
            } */
.hero {
	position: relative;
	overflow: hidden;
}

/* First gradient background */
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	top: 0%;
	left: 50%;
	width: 40%;
	height: 50%;
	transform: translate(-50%, -50%);
	background-size: 100% 70%;
	opacity: 0.7;
	filter: blur(50px);
	border-radius: 50%;
	z-index: -1;
}

/* Gradient 1 */
.hero::before {
	/* background: linear-gradient(to right, #0e86ff, #330867); */
	background: linear-gradient(#0e86ff);
	animation: rotateOval1 9s linear infinite;
}

/* Gradient 2 */
.hero::after {
	background: linear-gradient(#ef7680);
	/* background: linear-gradient(to right, #30cfd0, #330867); */
	animation: rotateOval2 6s linear infinite reverse;
}

@keyframes rotateOval1 {
	0% {
		transform: translate(0%, 100%) rotate(0deg) translateX(-600px) translateY(0px) rotate(0deg);
	}

	100% {
		transform: translate(100%, 0%) rotate(360deg) translateX(100px) translateY(100px) rotate(-360deg);
	}
}

@keyframes rotateOval2 {
	0% {
		transform: translate(0%, 100%) rotate(0deg) translateX(-600px) translateY(80px) rotate(0deg);
	}

	100% {
		transform: translate(140%, 0%) rotate(360deg)translateX(700px) translateY(850px) rotate(-360deg);
	}
}

.trusted-logos img {
	max-height: 50px;
	margin: 0 15px;
}

.step-number {
	font-size: 2rem;
	font-weight: bold;
	color: #f64555;
	;
}

.review {
	background: #f1f3f5;
	padding: 1.5rem;
	border-radius: 0.5rem;
}

.hero_content-wrapper {
	display: flex;
	flex-direction: column;
}

.hero-text-wrapper {
	display: flex;
	flex-direction: column;
	width: 44ch;

}

.hero_icon-wrapper svg {
	height: 50px;
	width: 50px;
	fill: #ff717d;
}

.hero .cld-btn {
	background-color: #f64555;
	color: #fff;
	font-weight: 700;
	font-size: 1.5rem;
	padding: 1rem 2rem;
	text-transform: uppercase;
}
.hero_icon-wrapper{
	justify-content: space-between;
    margin-top: 1.5rem;
    display: flex;
	width: 80%;
}
.hero .hero-wrapper {
	justify-content: space-between;
	align-items: flex-end;
	display: flex;
}

.hero .hero_image-wrapper {
	max-width: 50%;
	padding-bottom: 30px;
}

.hero_image-wrapper img {
	width: 100%;
	display: inline-block;
}

.space-creation {
	padding-top: 2rem;
	width: 100%;
}

.hero_text-wrapper h1 {
	font-size: 64px;
	font-family: Sora Variablefont Wght, sans-serif;
	font-weight: 700;
    line-height: 1.25;
}

.hero_content-wrapper {
	flex-direction: column;
	align-items: flex-start;
	margin-top: 55px;
	padding-bottom: 72px;
	display: flex;
}

.hero_span {
	background-image: linear-gradient(to right, #f64555, #0e86ff);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

.hero_button-wrapper {
	display: flex;
	align-items: center;
	flex-direction: column;
}



/* glow on hover */
.glow-on-hover {
   
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 50rem;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 800% 0; }
}
/* trusted section starts here */
.trusted{
	background-color: rgba(0, 0, 0, .75);
    padding-bottom: 2.5rem;
}
.cloud_wrapper{
	background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(255, 255, 255, .05));
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 32px;
}
.free_wrapper {
    
    grid-row-gap: 1rem;
    flex-direction: column;
    margin-bottom: 2.25rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
	color: #fff;
}
.free_wrapper h2{
	text-transform: capitalize;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Sora Variablefont Wght, sans-serif;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.25;
}
.free_wrapper p{
	max-width: 60ch;
	margin-left: auto;
    margin-right: auto;
	font-size: 20px;
	font-family: Poppins, sans-serif;
}
.padding-small{
	padding-top: 3rem;
    padding-bottom: 3rem;
}
.btn-try{
	border: 1px solid #0e86ff;
	background: #0e86ff !important;
	padding: 5px 15px !important;
	font-size: 24px !important;
    font-weight: 600 !important;
	color: #fff !important;
	text-transform: uppercase;
}
.how_title-wrapper {
    text-align: center;
    margin-bottom: 16px;
    position: relative;
}
.text-decorated{
	background-image: linear-gradient(270deg,  #0e86ff, #f64555);
    opacity: .15;
    text-transform: uppercase;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-family: Sora Variablefont Wght, sans-serif;
    font-size: 12rem;
    font-weight: 800;
    line-height: 1.2;
    display: inline-block;
}
.decorated-title {
    position: absolute;
    top: auto;
    bottom: 36px;
    left: 0%;
    right: 0%;
	margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #222222;
	font-family: Sora Variablefont Wght, sans-serif;
    font-size: 3rem;
}
/* faq section starts from here */
.faq_section{
	padding-top: 3rem;
	padding-bottom: 4rem;
}
.faq_title-wrapper{
	text-align: center;
    margin-bottom: 30px;
    position: relative;
}
.accordion-button:not(.collapsed){
	background-image: linear-gradient(to right, rgba(246, 69, 85, .15), rgba(14, 134, 255, .15));
	background-color: transparent!important;
}
.accordion-button{
	--bs-accordion-btn-focus-box-shadow: none;
}
/* footer section starts here */
.section_footer{
	background-image: linear-gradient(to right, #f64555, #0e86ff);
    overflow: hidden;
}
.padding-global{
	padding: 0rem 2.5rem;
}
.footer_links-column h5{
	color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Poppins, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
}
.footer_links-column{
	grid-row-gap: .5rem;
    flex-direction: column;
    display: flex
;
}
.footer_links-wrapper{
	grid-column-gap: 32px;
    grid-row-gap: 32px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: grid;
	color: #fff;
}
.footer_links{
	color: #fff;
    letter-spacing: 1px;
    text-transform: capitalize;
    padding: .25rem 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none;
    transition: box-shadow .2s;
    display: inline-block;
}
.footer_bottom-wrapper
{
	width: 100%;
	text-align: center;
    position: relative;
}
.footer_social-wrapper{
	display: flex;
	height: 48px;
    grid-column-gap: 12px;
    flex: 1;
    align-items: center;
    
}
.section_footer .social_button{
	background-color: rgba(0, 0, 0, .15);
    border-radius: 100vw;
    padding: 6px;
    transition: padding .3s;
    display: flex;
}
.social_button-wrap svg{
	fill: white;
	width: 36px;
	height: 36px;
}
.text-decorated.white {
    opacity: .1;
    cursor: default;
    background-color: #fff;
    background-image: none;
    line-height: 1;
    display: inline-block;
	text-transform: uppercase;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-family: Sora Variablefont Wght, sans-serif;
    font-size: 10rem;
    font-weight: 800;
}

/* ========== Footer css ends here ============ */

/* ========= right side nav options css ========== */
.left_side-nav {
	display: none;
	position: absolute;
	background: white;
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
	padding: 1rem;
	z-index: 1000;
	right: 0;
  }
  
  .left_sidebar-open:hover .left_side-nav {
	display: block;
  }
  .left_sidebar-p{
	visibility: visible!important;
	-webkit-animation-name: none!important;
    animation-name: none!important;
	margin-left: 0!important;
  }

  /* ====== ends here ======= */

  /* =============== dashboard card ================ */

  .dash_card{
	justify-content: space-evenly;
	color: white!important;
	align-items: center;
  }
  .dash_card svg{
	width: 50px;
  }
  .dash_card p{
	font-size: 35px;
	font-weight: 600;
  }
  .user_dash_card-text{
	font-size: 20px !important;
	font-weight: normal!important;
	color: white!important;
	margin-top: 10px!important;
  }
  .user_dash_card{
    color: white !important;
    align-items: center;
  }
  .user_dash_card svg{
	width: 50px;
  }
  .user_dash_card p{
	font-size: 35px;
	font-weight: 600;
	margin-left: auto;
  }
/* =========== dashboard select arrow css =========== */

  .select2-container--default .select2-selection--multiple{
	background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    padding-right: 24px;
  }
  .select2-hidden-accessible{
	background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    padding-right: 24px;
  }
/* ============ end dashboard select arrow css ==============  */

/*============  validity clock icon ==========*/
  .show_validity {
	display: none;
	position: absolute;
	background: white;
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
	z-index: 1000;
	right: 10px;
  }
  
  .show_validity-open:hover .show_validity {
	display: block;
  }
  /* clock icon ends here */

  /* slect option css [overlapping scss is here] */
  .select2-container--default .select2-search--inline .select2-search__field{
	font-size: 14px!important;
	line-height: 20px;
  }
  .select2-container--default .select2-search--inline .select2-search__field:focus{
	border: none!important;
  }

  /*  */
  .table th, .table td {
    border-top: none!important;
  }
  .table tr{
	border-top: 1px solid #dee2e6;
  }
  .table tr:first-child{
	border-top: none;
  }

  /* PDF Format CSS By which charts do not break start's here */

  .avoid-break {
	page-break-inside: avoid;
	break-inside: avoid; /* for better support */
}

.a4-wrapper {
	/* width: 210mm; */
	min-height: 297mm;
	/* padding: 20mm; */
	background: white;
	/* margin: auto; */
}

/* For charts/images inside */
.chart-container {
	page-break-inside: avoid;
	break-inside: avoid;
	margin-bottom: 20px;
}
/* Ends Here */

/* strip color (card header) */
.strip-bg{
	background-color: #969696;
}