/* -------------------------------- */
/* Header  / Sidebar Menu 
/* -------------------------------- */
.header{
	width: 100%;
	position: fixed;
	padding: 10px 0;
	background: #fff;
	z-index: 100;
	transition: all 0.3s;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 10px -10px;
	height: 88px;	

	.custom-container{ width: 98%;}

	&.scrolled{
		padding: 5px 0; transition: all 0.3s; height: 78px;	
		.wrapper .logo img{height:60px; transition: all 0.3s;}
		.wrapper .welcome-action li.welcome .profile-pic{height:46px; width: 46px; transition: all 0.3s;}
	}

	&.active{
		width: -webkit-fill-available;
    transition: 0.4s;
    .wrapper{ transition: 0.4s;}
	}
	
	.wrapper{
		display: flex; flex-direction: row; justify-content: space-between; align-items: center;
		transition: 0.4s; padding-left: 0px; width: -webkit-fill-available;
		.logo{
			width: auto;
			display: flex;
			img{
				height: 64px;
				width: auto;
			}
		}
		
		.welcome-action{
			display: flex;
			column-gap: 1rem;
			li{
				display: inline-flex;
				&.welcome{
					display: flex; column-gap: 1rem; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap;
					.profile-pic{
						width: 56px; height: 56px; display: flex; padding: 3px; border:1px solid #ccc; border-radius: 100%; overflow: hidden; background: #fff;
						img{width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 100%;}
					}
				}
				&.action{ display: flex; column-gap: 1rem; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end;
					img{ width:24px; height:auto; filter: brightness(0) saturate(100%) invert(13%) sepia(19%) saturate(17%) hue-rotate(330deg) brightness(95%) contrast(89%);}
					a:hover{ transition: all 0.3s; 
						img{transition: all 0.3s; filter: brightness(0) saturate(100%) invert(32%) sepia(89%) saturate(963%) hue-rotate(167deg) brightness(99%) contrast(101%);}
					}
				}

				&.button {
					align-items: center;
					a{
						display: flex;
						position: relative;
						color: $color-white ;
						background: $color-primary;
						padding: .8rem 1.4rem;
						column-gap:5px;
						font-size: 1rem;
						font-weight: $f-w-thin;
						border-radius:30px;
						font-family: $font-dm-sans;
						border: none; 
						transition: all 0.3s;
						text-align: center; 
						align-items: center;
						justify-content: center;
						height: fit-content;
						&:hover {    
						  background: $color-black;
						  color: $color-white !important ;
						}
					}
				}
				
			}			
		}		
	}
}

.sidebar-nav-wrapper, .side-navbar{
	.nav{
		li{
			&.welcome{
				display: flex; column-gap: 1rem; justify-content: flex-start; align-items: center; flex-direction: row; flex-wrap: nowrap;
				border-bottom: 1px dashed #d7d8e1; padding-bottom: 1rem; margin-bottom: 1rem; color: $color-white;
				.profile-pic{
					width: 56px; height: 56px; display: flex; padding: 3px; border:1px solid #ccc; border-radius: 100%; overflow: hidden; background: #fff;
					img{width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 100%;}
				}
			}
			.action{
				display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; column-gap: 1.5rem;
				border-top: 1px dashed #d7d8e1; padding-top: 1rem; margin-top: 1rem; width: 100%;
				img{ width:24px; height:auto; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(102deg) brightness(106%) contrast(101%);}
				a:hover{ transition: all 0.3s; 
					img{transition: all 0.3s; }
				}
			}
			
		}		
	}
}
.sidebar-nav-wrapper, .side-navbar{ .nav li.welcome, .nav li .action{display: none;} }
.sidebar-nav-wrapper.active-nav { margin-left:0;}
.menu-wrapper-container.active { margin-left:300px;}
.side-navbar {
  width: 300px;
  height: 100%;
  position: fixed;
  margin-left: -300px;
  transition: 0.5s;
  display: block;
  z-index: 1000;
  // padding: 120px 0 0 3%;

  left: 0;    
	background: $color-primary;
	// top: 0;
	top: 88px;
	padding:1.5rem 1rem;
	box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;	

	&.scrolled{
		top:78px;
	}

  .nav{
  	display: flex;
  	flex-wrap: nowrap;
  	flex-direction: column;
  	li{
  		padding: .5rem 0;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    justify-content: flex-start;
	    align-items: center;
	    column-gap: 1rem;
	    background: transparent;
	    a{
	    	display: flex;
	    	flex-direction: row;
	    	flex-wrap: nowrap;
	    	justify-content: flex-start;
	    	align-items: center;
	    	column-gap: 1rem;
	    }
  		&:hover{
  			transition: all 0.3s;
  			.text-label{color: $color-white; font-weight: $f-w-medium; transition: all 0.3s;}
  			.icon {
  				background: #fff; transition: all 0.3s;
  				img{transition: all 0.3s; filter: brightness(0) saturate(100%) invert(32%) sepia(89%) saturate(963%) hue-rotate(167deg) brightness(99%) contrast(101%);}
  			}
  		}
  		.text-label{color: $color-white; font-weight: $f-w-regular; transition: all 0.3s;}
  		.icon{
  			width: 36px; height: 36px; background: #106a93; border-radius: 100%; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
  			display: flex; transition: all 0.3s; justify-content: center; align-items: center;
  			img{width: 18px; height: auto; filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(137deg) brightness(106%) contrast(101%);}
  		}
  	}
  }
}
.nav-link:active,.nav-link:focus,.nav-link:hover {  background-color: #ffffff26;}


/* -------------------------------- */
/* Login Page  
/* -------------------------------- */
.login-Wrapper{
	position: relative;
	padding: 88px 0 0 0; 
	.hamburger-menu{display: none;}

	.banner-sec{
		width: 100%;
		width: 100%;
		height: auto;
		min-height: 83vh;
		position: relative;    
		padding: 0; 
		display: flex;
		height: auto;
		justify-content: center;
		align-items: center;
		background: url(../images/bg.png) center no-repeat ;
  		background-size: cover; 
	  
		&::after{
		  content: "";
		  position: absolute;
		  width: 100%;
		  height: 100%;
		  display: block;
		  top: 0;
		  left: 0; 
		  // opacity: .4; 
		  opacity: .65; 
		  z-index: 10;
		  background: linear-gradient(
		    120deg, 
		    rgba(0, 0, 0, .94) 30%,   
		    rgba(245, 73, 39, 0) 100% 
		    );
		}

		.custom-container{
			width: 90%;
			padding: 4rem;
			backdrop-filter: blur(3px);
			background: rgba(0, 0, 0, .1);
			z-index:50;
			height: auto;
			min-height: 75vh;
		}
	  

	  	.banner-wrapper{
		    display: flex;
		    position: relative;
		    z-index: 110;
		    row-gap: 2rem;
		    justify-content: space-between;
		    flex-direction: row;
		    flex-wrap: nowrap;
		    background: transparent;

		    .left-wrap{
		    	display: inline-flex;
		    	max-width: 480px;

		    }
		    .right-wrap{
		    	display: flex;
	    	    width: 100%;
	    	    max-width: 450px;
	    	    justify-content: flex-end;
	    	    align-items: center;
	    	  &.register{
	    	  	max-width: 700px;
	    	  	.form-sec{
	    	  		max-width: 100%;
	    	  		.form-wrapper {
	    	  		    display: flex;
	    	  		    flex-direction: row;
	    	  		    flex-wrap: wrap;
	    	  		    row-gap: 1rem;
	    	  		}

	    	  		.hd{width: 100%}
	    	  		.form-group {
	    	  			&.row-half {
	    	  			    width: calc(50% - 1rem);
	    	  			}
	    	  		}
	    	  	}
	    	  }
		    }

		    .content-wrapper{
		      display: flex;
		      flex-direction: column;
		      flex-wrap: nowrap;
		      width: 95%;		      
		      row-gap: 1.5rem;
		      height: 100%;
		      justify-content: center;

		      .title{
		        position: relative;
		        text-align: left;
		        font-family: $font-dm-sans;
		        letter-spacing: 0;
		        // margin: 0 auto; display: block; 
		        font-weight: $f-w-bold;
		        font-size: 3.2rem;
		        text-transform: none;
		        word-break: break-word;
		        color: #fff;
		        z-index: 20;
		        width: 100%;
		        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
		      }

		      .sub-title{
		        position: relative;
		        text-align: left;
		        font-family: $font-dm-sans;
		        letter-spacing: 0;
		        // margin: 0 auto; display: block; 
		        font-weight: $f-w-bold;
		        font-size: 2.2rem !important;
		        text-transform: none;
		        word-break: break-word;
		        color: $color-white;
		        z-index: 20;
		        width: 100%;
		        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
		      }

		      .sub-para{
		        color: $color-white; 
		        z-index: 20; 
		        position: relative; 
		        font-size: 1.2rem !important; 	        
		        margin: 0;          
		        text-align: left;
		        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
		      }	      

		    }

		    .form-sec{
			    background: #ffffff;
			    padding: 2.5rem;
			    border-radius: 16px; 
			    max-width: 480px;
			    margin: auto; 
			    display: flex;
		        row-gap: 1.5rem;
		        flex-direction: column;
		        flex-wrap: nowrap;
		        align-items: center;
		        justify-content: flex-start;
		        width: 100%; 

		        .hd{
		        	display: flex; align-items: center; justify-content: center;
		        	span{
		        		font-size: 1.8rem; color: $color-black; text-align: center; 
		        		border-bottom: 2px solid $color-primary; padding-bottom:.2rem; margin-bottom:.5rem;
		        		font-weight: $f-w-bold; letter-spacing: -1%;
		        	}
		        }     

				h3{font-size: 1.5rem; text-align: center;}

				form{width: 100%;}

				.form-group{margin: 0; width: 100%}
				.btn, .modal-btn-wrapper,.form-btn-wrapper{width: 100%;}

				.form-wrapper{
					display: flex;
				    flex-direction: column;
				    flex-wrap: nowrap;
				     row-gap: 1rem;

				    .forgot, .sign-up{
				    	display: flex;
			    	    flex-direction: row;
			    	    align-items: center;
				    }

				    .forgot{
			    	    justify-content: flex-end;
			    	    a{color: $color-black;}
				    }

				    .sign-up{
			    	    justify-content: space-between; padding-top: .5rem; font-size: .8rem;
			    	    a{color: $color-primary; font-weight: $f-w-semi; font-size: 1.1rem; letter-spacing: -3%;}
				    }

				    .form-label{font-size: .8rem;}
				}

				h4{
				  font-size: 1.3rem;
				  color: #000;
				}
		    }
	  	}
	}
}

.banner-wrapper{
	border-radius: 16px;
	background: #fff;
	padding: 1rem;
	box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
	margin-top: 1rem;	
	width: 100%;    	
	.banner{
		border-radius: 16px;
    background: #fff;
    padding: 1.5rem;
    color: #fff;
    font-size: 1.2rem;
    background: linear-gradient(to right, #0080ba, #0090bc, #009daa, #00a687, #20ac5a);
    box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 1rem;
		img{width: 38px; height: auto; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(130deg) brightness(111%) contrast(101%);}
		&:hover{
			transition: all 0.5s;
			background: linear-gradient(to left, #0080ba, #0090bc, #009daa, #00a687, #20ac5a);
			box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
		}

		&.bg2{
			background: linear-gradient(to right, #d73a90, #c249ad, #a35ac5, #7769d6, #2d75df);
			&:hover{
				transition: all 0.5s;
				background: linear-gradient(to left, #d73a90, #c249ad, #a35ac5, #7769d6, #2d75df);
			}
		}
		
	}
	&.in-modal{
		background: transparent;
		padding:0;
		box-shadow: none;
		width: 100%;
		.banner{
			font-size:.96rem;
			border-radius: 8px;
			width: 100%;
			padding: 1rem;
			img{width: 30px;}
			span{font-size: 1.2rem}
		}
	}
}


/* -------------------------------- */
/* All pages Styles
/* -------------------------------- */
.page-main-wrapper{
	position: relative;
	z-index: 90;
	padding-top: 88px;
	transition: all 0.3s;
	background: #F3F9FF;
	height: auto;
	min-height: 91vh;
	.custom-container{
		width: calc(100% - 6rem);
	}

	&.scrolled{
		transition: all 0.3s;
		padding-top: 64px;
	}
}

.mainFlexWrapper {
  width: 100%;
  height: auto;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
  column-gap: 0;
  row-gap: 0;
  padding: 3rem 0;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.body-container{
	transition: 0.4s;
	padding: 2.5rem 3rem 3rem;
	background: #fff;
	border-radius:20px;
	box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
	width: -webkit-fill-available;
	position: relative;
	transition: 0.4s;

	.tab-content, .nav-tabs{width:100%; }

	.side-float-menu{
		position: absolute;
		background: #fff;				
		width: 40px;
		height: 40px;		
		border-radius: 20px ;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: 0.4s;
		img{width: 24px; height: auto;}
	}

	&.active {
		border-radius:20px;
		.side-float-menu{
			border-radius: 20px 0 0 20px;
			left: -80px;
			transition: 0.4s;
		}
	}

	.over-data{
		display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    column-gap: 1rem;

		li{
			display: flex;
   	 		justify-content: space-between;
    		align-items: center; 
    		font-size: .9rem;
    		column-gap: 5px;
    		.icon{display: flex;}
    		.id{color: $color-primary;}
    		span{line-height: 1; font-size: .9rem; font-weight:$f-w-medium;}
     	}
	}

	.over-wrap{
		display: flex;
    column-gap: 1rem;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
	}

	.profile-head{
		display: flex;
	    flex-direction: column;
	    flex-wrap: nowrap;
	    row-gap:.3rem;
	    padding-bottom: 1.5rem;
	}

	.profile-data{
		display: flex;
	    flex-direction: row;
	    column-gap: 1rem;
	    flex-wrap: nowrap;
	    align-items: center;
	    justify-content: space-between;

	    .left-wrap,.right-wrap{
	    	width: calc(50% - 0);
	    }

	    .left-wrap{
	    	display: flex;
	    	align-items: flex-start;
	    	flex-direction: column;
	    	flex-wrap: nowrap;
	    	column-gap: 1rem;
	    	row-gap: 1rem;

	    	.over-wrap{column-gap: 1.5rem;}
	    }
	    .right-wrap{
	    	display: flex;

	    	.orgnization-status-wrap{
	    		display: flex;
	    		flex-direction: row;
	    		flex-wrap: nowrap;
	    		align-items: center;
	    		padding: 0;
	    		column-gap: 1rem;
	    		// background-image: linear-gradient(to right top, #dff5f8, #feffff, #f8fafa, #fff);	    		
	    		border-radius: 16px ;

  		    .content-wrap, .icon-wrap{
		    		display: flex;
	  		    flex-direction: column;
	  		    flex-wrap: nowrap;
	  		    align-items: flex-end;
	  		    padding: .5rem;
	  		    row-gap: .6rem;
  		    }

  		    .content-wrap{}
  		    .icon-wrap{
  		    	background: rgba(255, 255, 255, .7);
  		    	border-radius: 100%;
  		    	width: 100px;
  		    	height: 100px;
  		    	display: flex;
  		    	flex-direction: row;
  		    	flex-wrap: nowrap;
  		    	justify-content: center;
  		    	align-items: center;  		    	
  		    	box-shadow: rgba(47,104,133, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
  		    	img{width: 48px; height: auto;     filter: brightness(0) saturate(100%) invert(30%) sepia(76%) saturate(1659%) hue-rotate(174deg) brightness(97%) contrast(102%);}
  		    }


  		    .hd{
  		    	display: flex;
  		    	flex-direction: row;
  		    	column-gap: .5rem;
  		    	flex-wrap: nowrap;
  		    	font-weight: $f-w-medium;
  		    	font-size: 1.1rem;
  		    	align-items: center;
  		    	color: #0080ba;
  		    	span{
  		    		font-weight: $f-w-regular;
  		    		font-size: .9rem;
  		    		color: $color-grey;
  		    	}
  		    }
  		    .status{
  		    	display: flex;
	    	    flex-direction: column;
	    	    column-gap: 1rem;
	    	    flex-wrap: nowrap;
	    	    align-items: flex-end;
	    	    row-gap: 1rem;
	    	    justify-content: center;
  		    	li{
  		    		font-weight: $f-w-medium;
  		    		font-size: .9rem;
  		    		color: $color-black;
  		    		display: flex;
  		    		display: flex;
  		    		    flex-direction: row;
  		    		    justify-content: center;
  		    		    align-items: center;
  		    		    column-gap: .5rem;
  		    		span{
  		    			font-weight: $f-w-regular;
  		    			font-size: .8rem;
  		    			color: $color-grey;
  		    		}
  		    		&.chip{
  		    			span, a{  		    				
	    				    padding: .4rem 1rem .4rem 2rem; 
	    				    border-radius: 30px;
	    				    position: relative;
	    				    font-size: .9rem;
	    				    display: flex;
	    				    &::before{
	    				    	width: 10px;
	    				    	height: 10px;
	    				    	content: "";
	    				    	position: absolute;
	    				    	left: 15px;
	    				    	border-radius: 30px;	    				    	
	    				    	top: calc(50% - 5px);
	    				    }

	    				    &.active{
	  		    				background: #d6fed8;
		    				    color: #34b534;
		    				    &::before{background: #34b534;}
	    				    }
	    				    &.inactive{
	  		    				background: #fed6d6;
	  		    				    color: #e73232;
		    				    &::before{background: #e73232;}
	    				    }
	    				    &.apply-new{
	  		    				background: linear-gradient(to right, #0080ba, #0090bc, #009daa, #00a687, #20ac5a);
	  		    				box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
		    				    color: #fff;
		    				     padding: .6rem 1.2rem;
		    				    &::before{display: none;}
	    				    }
  		    			}
  		    		}
  		    	}
  		    }
	    	}
	    }

		.name-head{
			display: flex;
		    width: 100px;
		    height: 100px;
		    // background: #EBF5FF;
		    // background: linear-gradient(to right top, #ebf5ff, #feffff, #f8fafa, #fff);
		    border-radius: 20px;
		    justify-content: center;
		    align-items: center;
		    font-size: 3rem;
		    span{
		    	background: linear-gradient(to left, #0080ba, #0090bc, #009daa, #00a687, #20ac5a);
		    	  -webkit-background-clip: text;
		    	  -webkit-text-fill-color: transparent;
		    }
		}
		.content-wrapper{
			display: flex;
			flex-direction: row;
			flex-direction: column;
   			flex-wrap: nowrap;
   			row-gap: .8rem;	

   			h3{font-size: 1.6rem; color: $color-dark;}		
		}
		.contact-list{
			display: flex;
		    flex-direction: row;
		    align-items: flex-start;
		    column-gap: 2rem;
		    flex-wrap: nowrap;
			li{
				display: flex;
	   	 		justify-content: space-between;
	    		align-items: center;
	    		column-gap: 5px;
	    		.icon{
	    			display: flex;
	    			// width: 40px;
	    			// height: 30px;
	    			align-items: center;
	    			justify-content: center;
	    			border-radius: 12px;
	    			img{width: 18px; height: auto}
	    		}	    		
	    		&.green{
	    			.icon{background: #ecfdf4;}
	    		}
	    		&.orange{
	    			.icon{background: #fffaf1;}
	    		}
	     	}
		}
	}

	.profile-description, .body-content-area-wrap{
		display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    row-gap: 1rem;
    padding: 2.5rem;
    background: linear-gradient(to right top, #ffffff, #ebf5ff, #feffff, #f8fafa, #fff);
    border-top: 1px solid #0080ba;
    align-items: center;
    justify-content: flex-start;

	    .head{
			display: flex;
		    flex-direction: row;
		    flex-wrap: nowrap;
		    column-gap: 1.5rem;
		    justify-content: space-between;
		    align-items: center;
		    width: 100%;
		    max-width: 1200px;
		    .title{
		    	font-size: 1.4rem;
		    	font-weight: $f-w-medium;
		    	color: $color-dark;
		    }
		    .icon{
		    	display: flex;
		    	width: 34px;
		    	height: 34px;
		    	align-items: center;
		    	justify-content: center;
		    	img{width: 18px; height: auto}
		    }
	    }

	    .details{
    		display: flex;
		    flex-direction: column;
		    flex-wrap: wrap;
		    row-gap: 1rem;
		    column-gap: 3rem;
		    align-items: flex-start;
		    justify-content: flex-start;

    	    li{
	    		display: inline-flex;
    		    flex-direction: row;
    		    flex-wrap: nowrap;
    		    column-gap: .3rem;
    		    row-gap: 1rem;
    		    width: auto;
    	    p,span{
	    	    	margin: 0;
    	    	    display: flex;
    	    	    align-items: center;
    	    	    flex-direction: row;
    	    	    flex-wrap: nowrap;
	    	    }
	    	    img{width: 18px; height: auto}
	    	    span{	    	    	
	    	    	color: $color-grey;  font-size: .9rem; position: relative;
	    	    	min-width: 160px;
	    	    	// padding:.3rem 1rem; 
	    	    	// background: #fff;
	    	    	// border-radius: 50px; 
	    	    	// box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;

	    	    	&::after{
	    	    		content: ":";
	    	    		position: absolute;
	    	    		display: inline-block;
	    	    		right: 0;
	    	    	}
	    	    }
	    	    p{ color: $color-black; font-weight: $f-w-medium; }
    	    }
	    }
	    
	}

	.body-content-area-wrap{
		.org-licence-cards{
			display: flex;
		  flex-direction: column;
		  row-gap: 1rem;
		  flex-wrap: nowrap;
		  width: 100%;

			li{
				display: flex;
				column-gap: 2rem;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				width: 100%;
				justify-content: space-between;
				background: #fff;
			    padding: 1.5rem;
			    border-radius: .9rem;
			    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
			    border: 1px solid $border-color;

			    .chip{
			    	color: $color-primary;
			    	background: #EBF5FF;
			    	border-radius: 30px;
			    	padding: .4rem 1rem;
			    	text-align: center;
			    	line-height: 1.1;
			    }

				.content-wrap{
					display: flex;
				    flex-direction: row;
				    column-gap: 2rem;
				    flex-wrap: nowrap;
				    align-items: center;
				    width: 80%;
				    max-width: 100%;
				    justify-content: space-between;
				    
				    .item-des{
				    	display: flex;
			    	    flex-direction: row;
			    	    column-gap: 1rem;
			    	    flex-wrap: nowrap;
			    	    align-items: center;
				    	.icon{ 
				    		width: 40px; 
				    		height: auto;
				    		display: flex;
				    		img{ 
				    			width: 40px; height: auto;
				    			filter: brightness(0) saturate(100%) invert(30%) sepia(76%) saturate(1659%) hue-rotate(174deg) brightness(97%) contrast(102%);
				    		}
				    	}
				    	.text-wrap{
				    		display: flex;
			    		    flex-direction: column;
			    		    row-gap: 2px;
				    		.item-title{
				    			font-size: 1.1rem;
				    			color: $color-black;
				    		}
				    		.date-wrap{
				    			display: flex;
			    			    flex-direction: row;
			    			    column-gap: 5px;
			    			    align-items: center;
			    			    span{font-size: .8rem;}
				    			.label{font-weight: $f-w-regular;}
				    			.value{ color: $color-dark; font-weight: $f-w-medium;}
				    		}
				    	}
				    }				    
				}

				
			}
		}

		.event-list-cards{
			display: flex;
		    flex-direction: column;
		    row-gap: 1rem;
		    column-gap: 1rem;
		    flex-wrap: nowrap;
		    width: 100%;

			li{
				display: flex;
				column-gap: 2rem;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				width: 100%;
				justify-content: space-between;
				background: #fff;
			    padding: 1.5rem;
			    border-radius: 1.1rem;
			    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
			    // box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px;
			    // border: 1px solid #e3f2ff;

			    .chip{
			    	color: $color-primary;
			    	background: #EBF5FF;
			    	border-radius: 30px;
			    	padding: .4rem 1rem;
			    	text-align: center;
			    	line-height: 1.1;
			    }

				.content-wrap{
					display: flex;
				    flex-direction: row;
				    column-gap: 2rem;
				    flex-wrap: nowrap;
				    align-items: flex-end;
				    width: 100%;
				    justify-content: space-between;
				    
				    .item-des{
				    	display: flex;
			    	    flex-direction: row;
			    	    column-gap: 1rem;
			    	    flex-wrap: nowrap;
			    	    align-items: flex-start;
				    	.icon{ 
				    		width: 40px; 
				    		height: auto;
				    		display: flex;
				    		img{ 
				    			width: 40px; height: auto;
				    		}
				    	}
				    	.text-wrap{
				    		display: flex;
			    		    flex-direction: column;
			    		    row-gap: 15px;
				    		.item-title{
				    			font-size: 1.1rem;
				    			color: $color-black;
				    			font-weight: $f-w-semi;
				    		}
				    		.date-wrap{
				    			display: flex;
			    			    flex-direction: row;
			    			    column-gap: 2rem;
			    			    align-items: center;
			    			    // background: rgba(150, 150, 150, .1);
			    			    // background: linear-gradient(to right top,#ffffff, #ebf5ff, #feffff, #f8fafa, #fff);
			    			    padding: .3rem 0;
			    			    border-radius:0;
			    			    li{
			    			    	box-shadow: none;
			    			    	border: none;
			    			    	padding: 0;
			    			    	background: transparent;
			    			    	column-gap: 5px;
			    			    	width: auto;
			    			    	min-width: 150px;
			    			    }
			    			    span{font-size: .8rem;}
				    			.label{font-weight: $f-w-regular; color: $color-primary; background: linear-gradient(to right top,#ffffff, #ebf5ff, #feffff, #f8fafa, #fff); padding:3px 6px;}
				    			.value{ color: $color-dark; font-size: .85rem; font-weight: $f-w-semi;}
				    		}

	    			    .detail-item{
	    			    	display: flex;
	    		    	    flex-direction: row;
	    		    	    flex-wrap: wrap;
	    		    	    align-items: flex-start;
	    		    	    row-gap:10px;
	    		    	    column-gap:2rem;
	    		    	    width: 100%;
	    			    	li{
	    			    		display: inline-flex;
  			    		    width: fit-content;
  			    		    flex-direction: column;
  			    		    row-gap: 2px;
  			    		    padding: 0;
  			    		    background: transparent;
  			    		    box-shadow: none;
  			    		    border: none;
  			    		    align-items: flex-start;
  			    		    justify-content: flex-start;
	    			    	}
	    			    	.label{ font-size: .8rem; display:inline-block; width: fit-content; }
	    			    	.value{font-weight: $f-w-medium; color: $color-black; display:inline-block; width: fit-content;}
	    			    		.subline{ 
	    			    			color: #787878;
	    			    	    font-size: .8rem;
	    			    	    margin: 0;
	    			    	    text-align: left;
	    			    	    display: inline-flex;
	    			    	    flex-direction: row;
	    			    	    flex-wrap: nowrap;
	    			    	    align-items: center;
  			    	        column-gap: 10px;
  			    	        text-transform: capitalize;
  			    	        justify-content: flex-start;
	    			    	    .price {
	    			    	    	font-size: .85rem; font-weight: $f-w-semi; color: $color-secondary; margin: 0;
	    			    	    	span{ color: #787878;  font-size: .8rem; font-weight: $f-w-regular;} 
	    			    	    }
	    			    		}
	    			    }
				    	}
				    }
				    
				}

				
			}


		}

	    .action-wrap{
	    	display: flex;
	        flex-direction: row;
	        column-gap: 1rem;
	        flex-wrap: nowrap;
	        align-items: center;
	        .btn-wrap{
        		display: flex;
        	    flex-direction: row;
        	    column-gap: 1rem;
        	    flex-wrap: nowrap;
        	    align-items: center;
	        }
	    	a,button{
	    		display: flex;
	    	    color: #000;
	    	    flex-direction: row;
	    	    flex-wrap: nowrap;
	    	    align-items: center;
	    	    column-gap: 5px;
	    		color: $color-black;
	    		font-weight: $f-w-medium;
	    		font-size: .96rem;
	    		img{ width: 18px; height: auto;}
	    	}
	    }

		.status-chip{
			padding: .3rem 1rem;
			border-radius: 30px;
			font-size: .9rem;
			&.pending{
				color: #FD9002;
				background: rgba(253,144,2,.1);
				border: 1px solid rgba(253,144,2,.2);
			}

			&.approved{
				color: #19C661;
				background: rgba(25,198,97,.1);
				border: 1px solid rgba(25,198,97,.2);
			}

			&.completed{
				color: #82656A;
				background: rgba(130,101,106,.1);
				border: 1px solid rgba(130,101,106,.2);
			}
		}

		.item-status{
			&.pending{
				.img-status img{filter: brightness(0) saturate(100%) invert(66%) sepia(48%) saturate(4483%) hue-rotate(360deg) brightness(103%) contrast(103%);}
			}

			&.approved{
				.img-status img{filter: brightness(0) saturate(100%) invert(59%) sepia(95%) saturate(461%) hue-rotate(89deg) brightness(89%) contrast(82%);}
			}

			&.completed{
				.img-status img{filter: brightness(0) saturate(100%) invert(45%) sepia(5%) saturate(1672%) hue-rotate(300deg) brightness(91%) contrast(89%);}
				.item-title{color: $color-grey !important; font-weight: $f-w-medium;}
			}			
		}


		

		.event-doc-list{
			display: flex;
		    flex-direction: column;
		    row-gap: 1rem;
		    flex-wrap: nowrap;
		    width: 100%;
	    	background: #fff;
	        padding: 1.5rem;
	        border-radius: .9rem;
	        box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
	        border: 1px solid $border-color;

			li{
				display: flex;
				column-gap: 2rem;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				width: 100%;
				justify-content: space-between;
				padding-bottom: 1rem;
				border-bottom: 1px solid $border-color;
				&:last-child{border:none;}
							    	    

				.content-wrap{
					display: flex;
				    flex-direction: row;
				    column-gap: 2rem;
				    flex-wrap: nowrap;
				    align-items: center;
				    width: 100%;
				    justify-content: space-between;
				    
				    .item-des{
				    	display: flex;
			    	    flex-direction: row;
			    	    column-gap: 1rem;
			    	    flex-wrap: nowrap;
			    	    align-items: center;
				    	.icon{ 
				    		width: auto;
			    		    height: auto;
			    		    display: flex;
			    		    background: rgba(0, 128, 186, 0.1);
			    		    border-radius: 30px;
			    		    padding:6px 12px;
			    		    justify-content: center;
			    		    align-items: center;
				    		img{ 
				    			width: 22px; height: auto;
				    		}
				    	}
				    	.item-title{
			    			font-size: 1rem;
			    			color: $color-black;
			    			font-weight: $f-w-semi;
			    		}				    	
				    }				    
				}				
			}
		}
	}
}

.payment-area-wrapper{
	width: 100%;
	max-width: 1200px;
	.nav-tabs{
		margin: 1rem 0 0 0;
		.nav-link{
			padding: 1rem 1.2rem;
	    border: none;
	    background: none;
	    border-bottom: 2px solid transparent;
	    font-weight: $f-w-regular;
	    color: $color-grey;
	    &.active{
	    	border-bottom: 2px solid $color-primary;
	    	color: $color-black;
	    	 font-weight: $f-w-semi;
	    }
		}
	}
	.tab-content{
		margin:0;
		padding: 2rem;
		background: #fff;

    .detail-item{
    	display: flex;
  	    flex-direction: row;
  	    flex-wrap: wrap;
  	    align-items: flex-start;
  	    row-gap:1rem;
  	    width: 100%;
  	    padding-bottom: 1.5rem;
    	li{
    		display: flex;
    		width: calc(100% / 2 - 2rem);
    		flex-direction: column;
    		row-gap:5px;
    	}
    	.label{ font-size: .8rem; color: $color-primary;}
    	.value{font-weight: $f-w-medium; color: $color-black;}
    }
	}

	.purchase-section {
		position: relative;
		overflow: visible;
		padding:2rem;
		background:#fff;
		justify-content: center;
		border-radius: 16px 0 0 16px;		
	}
	.card-mockup {
		position: relative;
		margin: 2em auto 1.5em auto;
		width: 94%;
		padding: 1.2em;
		border-radius: 0.6em;
		background: #72a2f7;
		color: #fff;
		box-shadow: 0 0.5em 1em 0.125em rgba(0, 0, 0, 0.1);		
	}

  .detail-item{
  	display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	    align-items: flex-start;
	    row-gap:2rem;
  	li{
  		display: flex;
  		width: calc(100% / 2 - 2rem);
  		flex-direction: column;
  		row-gap:5px;
  	}
  	.label{ font-size: .96rem; color: $color-primary;}
  	.value{font-weight: $f-w-semi; color: $color-black; font-size: 1.1rem;}
  		.subline{ 
  			color: #787878;
  	    font-size: .8rem;
  	    margin: 0;
  	    text-align: left;
  	    display: inline-flex;
  	    flex-direction: column;
  	    flex-wrap: nowrap;
  	    align-items: flex-start;
  	    column-gap: 10px;
  	    text-transform: capitalize;
  	    justify-content: flex-start;
  	    .price {
  	    	font-size: .85rem; font-weight: $f-w-semi; color: $color-secondary; margin: 0;
  	    	span{ color: #787878;  font-size: .8rem; font-weight: $f-w-regular;} 
  	    }
  		}
  }


	.separation-line {	border-top: 1px dashed $border-color;	margin: 0 0.8em;}
	.coupon-wrapper{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		row-gap: 10px;
		border-bottom: 1px solid rgba(255, 255, 255, .6);
		margin-bottom: 1rem;
		padding-bottom: 1.5rem;
		
		.hd{text-align: left; margin: 0; color: rgba(255, 255, 255, .6);}
		.apply-coupon-code{
			display: flex;
	    flex-direction: row;
	    align-items: center;
	    column-gap: 5px;
			text-align: left; margin: 0; color: rgba(255, 255, 255, .5); font-size: .86rem; 
			img{width: 14px;}
		}
		.coupon-info{
			display: flex; 
			border: 2px dashed #fff;
			border-radius: 8px;
		}
		.coupon-txt-fld{
			background: transparent;			
			width: calc(100% - 150px);
			.form-control{
				background: transparent;
				display: inline-flex;
				color: #fff;
				min-height: 50px;
				font-size: 1.1rem;
				border: none;
				&::placeholder { color: #fff;}
			}
		}
		.coupon-btn{ 
			background: #fff; color: $color-primary; display: inline-flex;
			width: 150px;
			min-height: 50px;
			justify-content: center;
			align-items: center;
			font-size: 1.1rem;
			border-radius: 0 8px 8px 0;
			font-weight: $f-w-bold;
		}
	}
	.total-section {
		position: relative;
    overflow: hidden;
    padding: 2rem;
    background: linear-gradient(to top right, #165ebf, #49d4a9);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    row-gap: 1rem;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 0 16px 16px 0;

		.total-label {
			font-size: 1.2em;	font-weight: $f-w-regular; color:#fcf192;
		}

		.value{
			font-size: 2rem; font-weight: $f-w-bold; color:#fff;
			display: flex; flex-direction: row; justify-content: center; column-gap: .6rem;
			span{font-size: 1.1rem; font-weight: $f-w-regular; }
		}
		
	}	
	
	.row-div{
		display: flex;
    row-gap: 1.5rem;
    flex-direction: column;
    flex-wrap: nowrap;

		.custom-form{width: 100%;}

		.data-wrapper{
			width: 100%;			
		}
		.overview-head{
			width:100%;
			width: 100%;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    padding: 1rem;
	    background: linear-gradient(to top right, #0080ba, #49d483);
	    border-radius: 16px;
		}
	}
}

.payment-method{	
	.custom-form{width: 90%;}
	.main-back {
		background: #a2cdff !important;
		display: flex;
		position: absolute;
		width: 100%;
		height: 100vh;
		top: 0px;
		left: 0px;
	}	
	.card-data {
		& > div {	
			padding-bottom: 1.5em;
			&:first-child {	padding:1rem 0 .5rem 0;}
		}
	}
	.card-property-title {
		display: flex;
		flex-direction: column;
		flex: 1 1;
		margin-right: 0.5em;
		color: $color-dark;		
		span { color: $color-grey; font-size: .8rem;}
	}
	.card-property-value {	flex: 1 1;}
	.card-number {
		background: #fff;
		border: 1px solid $border-color;
		border-radius: .5rem;
		padding: 0 1em;
		min-height: 46px;
	}
	.card-number-field {
		* {
			line-height: 1;
			margin: 0;
			padding: 0;
		}
		input {
			width: 100%;
			height: 100%;
			padding: 0.5em 1rem;
			margin: 0 0.75em;
			border: none;
			color: #888888;
			background: transparent;
		}
	}
	.timer {
		span {
			background: #311b92;
			color: #ffffff;
			width: 1.2em;
			padding: 4px 0;
			display: inline-block;
			text-align: center;
			border-radius: 3px;
			& + span {
				margin-left: 2px;
			}
		}
		em {
			font-style: normal;
		}
	}
	.action {
		button {
			padding: 1.1em;
			width: fit-content;
			height: 100%;
			font-weight: 600;
			font-size: 1em;
			color: #ffffff;
			border: none;
			border-radius: 0.5em;
			transition: background-color 0.2s ease-in-out;
			&:hover {
				background: #2979ff;
			}
		}
	}
	.input-container {
		position: relative;
		display: flex;
		align-items: center;
		height: 3em;
		overflow: hidden;
		border: 1px solid $border-color;
		border-radius: .5rem;
		input {
			flex: 1 1;
			height: 100%;
			width: 100%;
			// text-align: center;
			min-height: 46px;
			padding: .6rem 1rem;
			border: 1px solid $border-color;
			background: #fff;
			font-weight: 600;
			&:focus {
				background: #fff;
				color: $color-dark;
			}
			&::placeholder { color:$color-grey;}
		}
		i {
			position: absolute;	right: 0.5em;	}
	}
	.input-container input,
	.input-container i {line-height: 1;	}
	.input-container input::-webkit-outer-spin-button,
	.input-container input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	
}

.calendar-approval-form{
  display:none;
  transition: all 0.3s;
  &.active{display: block;}
}

.calendar-approval-message{
  display:none;
  transition: all 0.3s;
  &.active{display: flex;}
}

.payment-message{display: flex;}

.payment-message, .calendar-approval-message{	
  flex-direction: column;
  flex-wrap: nowrap;
  row-gap: 1rem;
	.hd, p, .highlight{text-align: center; margin: 0;}
	.hd{color: $color-black; font-size: 1.2rem;}
	.highlight{ color: $color-primary;font-size: 1.2rem; }
	p{color: $color-grey;}
	.multi-btn-wrap{width: 100%; justify-content: center;}
}
.input-btn-wrapper{padding-top: 1rem;}



.event-calendar-wrapper{
	display: flex;
	width: 100%;
  background: #fff;
  padding: 2rem ;
  border-radius: 0;
  column-gap: 4rem;
      flex-direction: row;
    flex-wrap: nowrap;

  .calendar-wrapper{
  	display: inline-flex;
  	flex-direction: row;
  	flex-wrap: nowrap;
  	justify-content: center;
  	width: 100%;
  	// max-width: 1100px;

  	#calendar{
  		width: 100%;
  		font-family: $font-dm-sans;
  		color: $color-dark;

  		.fc-toolbar-title{font-size: 1.41rem;}
  		a{
  			color: $color-dark;
  			.fc-event-title, .fc-event-time{color: $color-white;}
  		}

  		.fc-event, .fc-event-dot {
  		  background: #17c1c3;
  		}

  		.fc-daygrid-dot-event.fc-event-mirror, .fc-daygrid-dot-event:hover {
  		    background: #0080ba;
  		}

  		.fc-daygrid-event-dot{border:6px solid rgba(0,0,0,.2)}
  	}
  }

  .fc-right{
  	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
  }

  .event-table-wrapper{
  	display: flex;
  	flex-direction: column;
  	flex-wrap: nowrap;
  	justify-content: flex-start; 
  	// padding: 0 1rem; 
  	row-gap: 1rem;
  	width: calc(60% - 2rem);	

  	.head{
  		.title{
  			font-size: 1.1rem;
  			min-height: 38px;
  			display: flex;
  			flex-direction: row;
  			align-items: center;
  		}
  	}
  }

  .event-add-wrap{
  	display: flex;
  	flex-direction: column;
  	flex-wrap: nowrap;
  	justify-content: flex-start; 
  	// padding: 0 1rem; 
  	row-gap: 1rem;
  	width: 40%;	

  	.head{
  		.title{
  			font-size: 1.2rem;
  			min-height: 38px;
  			display: flex;
  			flex-direction: row;
  			align-items: center;
  			color: $color-primary;
  			font-weight: $f-w-bold;
  		}
  	}

  	.event-list-cards{
			display: flex;
		    flex-direction: column;
		    row-gap: 1rem;
		    flex-wrap: nowrap;

		    .status-chip{
		    	padding: .2rem .7rem;
		    	border-radius: 30px;
		    	font-size: .8rem;
		    }

			li{
				display: flex;
		    column-gap: 2rem;
		    flex-direction: row;
		    flex-wrap: nowrap;
		    align-items: center;
		    width: 100%;
		    justify-content: space-between;
		    background: transparent;
		    padding: 1rem 0;
		    border-radius: 0;
		    box-shadow: none;
		    border: none;
		    border-top: 1px solid #E0E6EB;

			    .chip{
			    	color: $color-primary;
			    	background: #EBF5FF;
			    	border-radius: 30px;
			    	padding: .4rem 1rem;
			    	text-align: center;
			    	line-height: 1.1;
			    }

				.content-wrap{
					display: flex;
				    flex-direction: row;
				    column-gap: 2rem;
				    flex-wrap: nowrap;
				    align-items: flex-end;
				    width: 100%;
				    justify-content: space-between;
				    
				    .item-des{
				    	display: flex;
			    	    flex-direction: row;
			    	    column-gap: 1rem;
			    	    flex-wrap: nowrap;
			    	    align-items: flex-start;
				    	.icon{ 
				    		width: 28px; 
				    		height: auto;
				    		display: flex;
				    		img{ 
				    			width: 28px; height: auto;
				    		}
				    	}
				    	.text-wrap{
				    		display: flex;
			    		    flex-direction: column;
			    		    row-gap: 10px;
				    		.item-title{
				    			font-size: 1rem;
				    			color: $color-black;
				    			font-weight: $f-w-bold;
				    		}
				    		.date-wrap{
				    			display: flex;
			    			    flex-direction: row;
			    			    column-gap: 2rem;
			    			    row-gap: 2rem;
			    			    align-items: center;
			    			    background: transparent;
			    			    padding: 0;
			    			    border-radius:0 60px 60px 0;
			    			    li{
			    			    	box-shadow: none;
			    			    	border: none;
			    			    	padding: 0;
			    			    	background: transparent;
			    			    	column-gap: 5px;
			    			    	width: auto;
			    			    	min-width: 150px;
			    			    }
			    			    span{font-size: .74rem;}
				    			.label{font-weight:$f-w-regular; color: $color-primary;}
				    			.value{ font-weight: $f-w-medium; color: $color-black;}
				    		}
				    	}
				    }
				    
				}

				
			}
		}
  }  
}

#calendar-event {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
 	flex-wrap: nowrap;
  row-gap: 1rem;

  .fc-toolbar{
  	&.fc-header-toolbar {
    	margin-bottom: 0;
  	}
  	h2{ font-size: 1.2rem; color: $color-primary;}
  }

 

  .fc-button{
  	display: flex;
  	position: relative;
  	color: $color-white ;
  	background: $color-primary;
  	padding: .5rem 1rem ;
  	column-gap:5px;
  	font-size: .9rem;
  	font-weight: $f-w-thin;
  	@include border-radius(30px);
  	font-family: $font-dm-sans;
  	border: none; 
  	transition: all 0.3s;
  	text-align: center; 
  	align-items: center;
  	justify-content: center;
  	letter-spacing: -2.5%;
  	height: 38px;

  	&.fc-next-button, &.fc-prev-button{ background: #fff; color: #2464a4; padding: .5rem;}

  	&.fc-customButton-button {  	    
  	    display: flex;
  	    position: relative;
  	    color: $color-white ;
  	    background: url(../images/icon-add-event.svg) left 15px center no-repeat $color-secondary;
  	    background-size: 20px;
  	    padding: .5rem 1rem .5rem 2.6rem ;
  	    column-gap:5px;
  	    font-weight: $f-w-medium;  	    
  	}
  }
}

.fc-event {
    border: 1px solid #eee !important;
}

.fc-content {
    padding: 3px !important;
}

.fc-content .fc-title {
    display: block !important;
    overflow: hidden;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}



#delete-modal .modal-footer > .btn {
    border-radius: 3px !important; 
    padding: 0px 8px !important; 
}

.fc-scroller {
    overflow-y: hidden !important;
}

.context-menu {
  position: absolute;
  z-index: 1000;
  background-color: #fff;
  border: none;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
  padding: .5rem;

  ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;    

    li{
      display: flex;
      padding: .8rem 1.5rem .8rem;
      cursor: pointer;
      margin: 0 auto;
      transition: 0.10s;
      font-size: .9rem;
      line-height: 1;
      flex-direction: row;
      flex-wrap: nowrap;
      column-gap: .5rem;
      justify-content: flex-start;
      align-items: center;
      text-align: left;
      width: 100%;

      i{color: $color-black; font-size: 1.1rem;}

      &:hover {
	      color: #000;
	      background: #f3f9ff;

  		}
    }
	}
}

.fa,
.fas {
    font-size: 13px;
    margin-right: 4px;
} 

.main-event-step-wrapper{
	display: flex;
	row-gap: 2rem;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	width: 100%;
	max-width: 1200px;

	.event-details-head .detail-item li{width: calc(100% / 3 - 2rem) !important;}

	.doc-upload-row{ 
		max-width: 100%;
		.form-group {
			row-gap: 8px;
			input[type=file]::before{top: 40px;}
			input[type=file]::after{top: 42px;}
			
			.form-label{ font-size: 1rem;  color: $color-black; font-weight: $f-w-medium;}
		}
	}

	.hd-row{
		text-align: left;     
		font-size: 1.3rem;
		font-weight: $f-w-medium; 
		margin: 0 0 1rem 0;		
	}

	

	.progress-wrap{
	   position:relative;	   
	}

	.progress-line{
    height:6px;
    background:#ddd;
    border-radius:10px;
    display: none;
	}

	.progress-bar{
    height:2px;
    width:0%;
    background:#28a745;
    border-radius:10px;
    position: absolute;
    top: 50px;
    left: 0;
    transition: 0.4s;
    z-index: 10;
	}	

	.step-nav{
		display: flex;
    justify-content: flex-start;
    margin-top: 15px;
    column-gap: 2rem;
    flex-direction: row;
    flex-wrap: nowrap;
    z-index: 20;
    position: relative;
		li{
			font-size: 1rem;
	    z-index:3;
	    position:relative;
  		background: transparent;
      border-radius: 100%;
      width: 70px;
      height: 70px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      box-shadow: rgba(17, 17, 26, 0.01) 0px 4px 16px, rgba(17, 17, 26, 0.01) 0px 8px 32px;

      &.active{
        color: #fff;
    	  font-weight: $f-w-medium;
    	  font-size: 1.2rem;
    	  // background: rgba(255, 255, 255, 1);
    	  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    	  background: linear-gradient(to right, #0080ba, #20ac5a);
    	  
      }
		}  			
	}	

	.step-btn-wrapper{
		display: flex;
    row-gap: 1rem;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    column-gap: 5px;
    width: 100%;
    .stet-btn{
    	display: flex;
    	position: relative;
    	color: $color-white ;
    	background: linear-gradient(to right, #0080ba,  #20ac5a);
    	box-shadow: rgba(0, 0, 0, 0.15) 0px -50px 36px -28px inset;
    	padding: .6rem 1.5rem ;
    	column-gap:5px;
    	font-size: 1rem;
    	font-weight: $f-w-semi;
    	@include border-radius(30px);
    	font-family: $font-dm-sans;
    	border: none; 
    	transition: all 0.3s;
    	text-align: center; 
    	align-items: center;
    	justify-content: center;
    	letter-spacing: -2.5%;
    	img{width: 24px;}
    	min-height: 48px;

    	&.secondary{
    		background: $color-primary !important;
    		box-shadow: none;
    	}
    }
	}

	/* Content */
	.content-display{	
		display: flex;
    flex-direction: column;
    width: 100%;

	  li.wrapper{
	  	display:none;
	    list-style:none;
	    padding:3rem;
	    background:#fff;
	    border-radius:28px;
	    font-size:22px;
	    text-align:center;
	    width: 100%;
	    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
	    &.active{
	    	 display:block;
	    }
	  }

	  .row-full{width: 100%;}
		
		.sec-title{	width: 100%; padding: 1rem 0; text-align:left; font-size:1.2rem;	}

	}

	#events-chk-list{
	background: #f1f7ff;
	padding: 1rem;
	border-radius: 16px;	
		ul{
			background-color: #FFFFFF;
			width: 100%;
			height: auto;
			border-radius: 4px;
			
			margin: 0;
			li{
				list-style-type: none;
				border-bottom: solid 1px #F2F2F2;
				user-select: none;
				input[type="checkbox"]{
					display: inline-block;
					float: left;
					margin: 1.5rem 1rem 0 1rem;
					user-select: none;
				}
				input[type="checkbox"]+label{
					display: inline-block;
					float: left;
					border-left: solid 1px #D3E3FF;
					padding: 1rem 2rem;
					width: calc(100% - 54px);
					cursor: pointer;
					user-select: none;
				}
				input[type="checkbox"]:checked+label{
					font-weight: $f-w-semi;
					background-color: #F9F9F9;
				}

				label{
					font-size: 1.1rem;
					color: $color-black;
					text-align: left;
					font-weight: $f-w-medium;
	    		.date-wrap{
	    			display: flex;
    			  flex-direction: row;
    			  column-gap: 1rem;
    			  align-items: center;
    			  background: transparent;
    			    li{border-bottom: none;}
    			    span{font-size: .8rem;}
	    			.label{font-weight: $f-w-regular;}
	    			.value{ color: $color-dark; font-weight: $f-w-medium;}
	    		}
				}

				&:after{
					content: '';
					display: block;
					clear: both;
				}
			}	
			
		}	
		.black{	  color:black;}	
	}
	
}

.multiple-btn-wrapper{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	column-gap: 1rem;
	margin-bottom: 2rem;

	&.left{
		justify-content: flex-start;
		width: 100%;
	}
	&.right{
		justify-content: flex-end;
		width: 100%;
	}
	
}

.event-category{
	display: flex;  
  row-gap: 1rem;
  column-gap: 1rem;

  &.column-box{ flex-direction: row; flex-wrap: wrap; }
  &.column{ flex-direction: row; flex-wrap: nowrap; }
  &.row{ flex-direction: column; flex-wrap: nowrap;}

  &.main-category{
  	li{
  		width: calc(100% / 3 - 1rem); padding: 1.5rem; border: 1px dashed #d7ebf4; background: #f3fdff;
  		.theme-btn, a.theme-btn{background:#fff; img{filter: brightness(0) saturate(100%) invert(30%) sepia(76%) saturate(1659%) hue-rotate(174deg) brightness(97%) contrast(102%);}}
  		&:hover, &.select {
  			border: 2px dashed #6fb5d5;
  			background: #d2f5ff;
  			.theme-btn, a.theme-btn{
  				background: $color-secondary;
  				img{filter: brightness(0) saturate(100%) invert(100%) sepia(36%) saturate(457%) hue-rotate(215deg) brightness(117%) contrast(101%);}
  			}
  		}
  	}  	
  }
  &.sub-category{
  	row-gap: 0;
  	
  	li{
  		width: calc(100% / 1); border-bottom: 1px solid $border-color; padding: 1rem 1.5rem; background:#fff ;border-radius:0;

  		.title-wrap .headline{color: $color-black;}
  		.title-wrap .subline{    align-items: center; flex-direction: row;}

  		&:last-child{border:none;}
  		.data-wrap figure{
  			width: 60px; min-width:60px; height: 60px; background:#fff;
  			img{
  				width:32px; 
  				// filter: brightness(0) saturate(100%) invert(100%) sepia(36%) saturate(457%) hue-rotate(215deg) brightness(117%) contrast(101%);
  			}
  		}
  		.theme-btn, a.theme-btn{background:$color-secondary; }
  		&:hover, &.select { 
  			background: linear-gradient(to right top, #ebf5ff, #feffff, #f8fafa, #fff); 		
  			
  			.title-wrap .headline{color: $color-black;}
  			.data-wrap figure{
  				background:$color-primary;
  				img{filter: brightness(0) saturate(100%) invert(100%) sepia(36%) saturate(457%) hue-rotate(215deg) brightness(117%) contrast(101%);	}
  			}
  			
  		}
  	}  	
  }

	li{
    
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    // background: linear-gradient(to right top, #dff5f8, #feffff, #f8fafa, #dff5f8);
    transition: 0.4s;     

    .data-wrap{
    	display: inline-flex;
    	column-gap: 1rem;
    	flex-direction: row;
    	flex-wrap: nowrap;
    	align-items: center;
    	figure{
    		background: rgba(255, 255, 255, .65);
    		border-radius: 100%;
    		width: 70px;
    		min-width: 70px;
    		height: 70px;
    		display: flex;
    		flex-direction: row;
    		flex-wrap: nowrap;
    		justify-content: center;
    		align-items: center;
    		box-shadow: rgba(17, 17, 26, 0.03) 0px 4px 16px, rgba(17, 17, 26, 0.03) 0px 8px 32px;
    		img{
    			width: 36px; height: auto;     
    			// filter: brightness(0) saturate(100%) invert(30%) sepia(76%) saturate(1659%) hue-rotate(174deg) brightness(97%) contrast(102%);
    		}
    	}
    }

    &:hover{
    	.theme-btn, a.theme-btn{
    		background: $color-primary;
    	}
    	.data-wrap figure{box-shadow: rgba(17, 17, 26, 0.03) 0px 4px 16px, rgba(17, 17, 26, 0.03) 0px 8px 32px; background: rgba(255, 255, 255, 1);}
    }
    .btn-wrap{
    	display: inline-flex;
    	column-gap: .5rem;
    }
	}

	.title-wrap{
		display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    row-gap: .5rem;
		.headline{ color: $color-black;	 margin: 0; text-align: left; font-size: 1.1rem;}
		.subline{ 
			color: #787878;
	    font-size: .94rem;
	    margin: 0;
	    text-align: left;
	    display: inline-flex;
	    flex-direction: column;
	    flex-wrap: nowrap;
	    align-items: flex-start;
	    column-gap: 10px;
	    text-transform: capitalize;
	    .price {
	    	font-size: 1.1rem; font-weight: $f-w-semi; color: $color-secondary; margin: 0;
	    	span{ color: #787878;  font-size: .94rem; font-weight: $f-w-regular;} 
	    }
		}
	}

	.theme-btn, a.theme-btn{
		background:#3484a8;
		font-size: .9rem;
		img{
			width: 20px;
		}
	}
}

.mainWrapper .modal-dialog {
	width: 100%;
 	max-width: 800px;


 	.modal-header{padding: 0;}

 	.modal-content-area-wrapper{
 		display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    row-gap: 1.5rem;
 		.common-form-wrapper{
 			background: #f6fbff;
 			width: 100%;
 			padding: 1.5rem;


 			.row-half {
 			    width: calc(50% - 1rem);
 			}
 			.row-full {
 			    width: 100%;
 			}
 		}
 	}

 	.modal-content{
 		padding: 2rem; row-gap:1rem;
 		.modal-title{color: $color-dark; font-size: 1.5rem;}
 	}
}


// ---------Radio yes|no Div ---------------

.yes-no-radio-wrapper{
	#yesWrapper,
	#noWrapper{
    display:none;
    padding: 2rem;
    border-radius: 20px;
    width: 100%;
    background:#fff;	    
	}	
}


.event-permit-request-wrapper{
	width: 100%;
	max-width: 1000px;
	border-radius: 16px;
	// box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
	// background: #fff;
	// padding: 2rem;

	.multiple-btn-wrapper{
		&.right{}
	}

	.head{
		margin-bottom: 1rem;
	}
}


.add-multiple-event-wrap{
	background:rgba(0, 0, 0,.02);
	padding: 2rem;
	border-radius: 16px;

	.round-form-wrap{
		
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		flex-wrap: nowrap;
		column-gap: 10px;
		width: 100%;
	}

	 .multiple-btn-wrapper{margin: 0;}
	
	margin: 2rem 0;
	.event-display-wrap{
		display: flex;
    list-style: none;    
    padding:0 ;
    // border-radius: 16px;
    // background: #fff;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: .5rem;



		li.list-item{
			display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    align-items: flex-start;
	    justify-content: space-between;
	    width: 100%;
	    padding: 1.5rem;
	    background: #fff;
	    border-radius: 16px;
	    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 20px;

	    
			ul.date{
				display: flex;
				width: 100%;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				column-gap: 1rem;
				border-left: 5px solid #4387ac;
				    border-radius: 10px;
				    padding-left: 1rem;
				li{
					display: flex;
					font-size: .9rem;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: flex-start;
					align-items: center;
					width: fit-content;
					column-gap:10px;
					border-right: 2px solid #CCDCCC;
					padding-right: 1.5rem;
					&:last-child{border: none; padding-right: 0;}
					span{
						color: #0c98d2;
						font-weight:$f-w-medium;
						// background: #edfdff;
						// border-radius: 16px;
						// padding: .2rem 1rem;
						font-size: .9rem;
					}
				}
			}
			.content-wrap{
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				align-items: flex-start;
				row-gap: 10px;
				width: 100%;
			}
			.title{
				font-size: 1.1rem;
				color: $color-black;
				font-weight: $f-w-semi;
			}
			.location{
				margin: 0;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				color:$color-dark;
				column-gap:10px;
				img{width: 18px;}
			}
		}
	}
}


.filter-wrpper{
	display: flex;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  column-gap: 10px;
}

.filter-search-btn {
    height: 100%;
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 0 20px;
}

.event-table-wrapper{
	padding: 2rem 0;
	.event-table{	
		border-radius: 5px;
		border-collapse: separate;
		  border-spacing: 0 2px;
		.date{}
		.wrap{
			display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    align-items: center;
	    column-gap: 10px;
	    font-size: .88rem;
	    img{width: 16px;}
		}

		a{color: $color-primary; background: #fff; border: 1px solid $color-primary; font-weight: $f-w-medium; padding: .5rem 1rem;}
		thead{
			tr{
				&:nth-of-type(odd){
					th{background: #0080ba !important;}
				}				
			}
		}
		th{
			font-size: .94rem;
			font-weight: $f-w-semi;
			padding:1rem .6rem;
			line-height: 1;
			border-left:1px solid rgba(255,255,255,.3);
			&:first-child{
				border-radius: 5px 0 0 5px;	
				overflow: hidden;
				border: none;
			}

			&:last-child{
				border-radius: 0 5px 5px 0;	
				overflow: hidden;
				border: none;
				text-align: right;
			}
		}
		td{
			font-size: .9rem;
			color: $color-grey;
			padding: .8rem .6rem;
			line-height: 1;
			border-left:1px solid rgba(0,0,0,.1);
			&:first-child{
				border-radius: 5px 0 0 5px;	
				overflow: hidden;
				border: none;
			}

			&:last-child{
				border-radius: 0 5px 5px 0;	
				overflow: hidden;
				border: none;
				text-align: right;
			}			

		}

		tr{
			margin-top: 1px;
			td{background: transparent !important;}		
			&:nth-of-type(even){
				background: rgba(255,255,255,.3);
			}

			&:nth-of-type(odd){
				background: rgba(255,255,255,1);
			}

			&:hover{
				background: #daedff !important;
				a{color: $color-white; background:$color-primary; border: 1px solid $color-primary; font-weight: $f-w-medium;}
			}


		}
	}
}


.step-content {
    display: none;
}

.step-content.active {
    display: block;
}

.event-table-data-wrapper{width: 100%;}

.overwrite-full-width{
	width: 100% !important;
	max-width: 100% !important;
}

.common-card-wrapper{
	display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}

.nav-tabs {
	border: none;
	background: transparent;
	&.event-calendar{
		.nav-link{
			font-size: 1.1rem; border: none; border-bottom: none; color: $color-grey; background: transparent; border-radius: 16px; padding: .8rem 2rem;
			&.active{ border-bottom: none; color: $color-primary;  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;}
		}
	}
	.nav-link{
		font-size: 1.1rem; border: none; border-bottom: 2px solid transparent; color: $color-grey;
		&.active{ border-bottom: 2px solid $color-primary; color: $color-black;}
	}
}

.event-details-head{
	background:linear-gradient(to top right, #0080ba, #49d483);
  padding:1rem;
  border-radius: 28px;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
  // box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;

  .inner-wrapper{
		display: flex;
	  flex-direction: row;
		align-items: flex-start;
	  column-gap: 2rem;
	  flex-wrap: nowrap;
		background: linear-gradient(to bottom, #ffffff,  #f8fafa);
	  padding: 2rem;
	  border-radius: .9rem;
	  box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
	  border: 1px solid $border-color;
	  width: 100%;
  }

  .title{
  	font-size: 1.4rem;
  	font-weight: $f-w-semi;
  	color: $color-dark;
  }

  .wrapper{
  	row-gap: 1rem;
	  display: flex;
	  flex-direction: column;
	  flex-wrap: nowrap;
	  padding-bottom: .5rem;
	  width: 100%;

	  .head{max-width: 100%;}
  }

  .icon-head{
  	background: linear-gradient(to right top, #ffffff, #ebf5ff, #feffff, #f8fafa, #fff);
  	border-radius: 20px;
  	padding: 15px 20px;
  	img{
  		width: 40px; height: auto; 
  		filter: brightness(0) saturate(100%) invert(30%) sepia(76%) saturate(1659%) hue-rotate(174deg) brightness(97%) contrast(102%);
  	}
  }

  .detail-item{
  	display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	    align-items: flex-start;
	    row-gap:1.5rem;
  	li{
  		display: flex;
  		width: calc(50% / 2 - 2rem);
  		flex-direction: column;
  		row-gap:5px;
  	}
  	.label{ font-size: .86rem; color: $color-primary;}
  	.value{font-weight: $f-w-semi; color: $color-black;}
  		.subline{ 
  			color: #787878;
  	    font-size: .8rem;
  	    margin: 0;
  	    text-align: left;
  	    display: inline-flex;
  	    flex-direction: column;
  	    flex-wrap: nowrap;
  	    align-items: flex-start;
  	    column-gap: 10px;
  	    text-transform: capitalize;
  	    justify-content: flex-start;
  	    .price {
  	    	font-size: .85rem; font-weight: $f-w-semi; color: $color-secondary; margin: 0;
  	    	span{ color: #787878;  font-size: .8rem; font-weight: $f-w-regular;} 
  	    }
  		}
  }
}