/*common styling*/
	:root{
		--window-height: 400px;
	  	--height-top-bar: 60px;
	  	--teammates-theme-color: #08bf7d;
	  	--secondary-light-color: #F0F2F5;
	  	--masonry-grid-width: 320px;
	  	--masonry-grid-item-width: 100px;
	  	--hosted-view-selected-state: rgba(45, 136, 255, 0.1);
	  	--secondary-button-background: #E4E6EB;
	}

	/*media query root*/
		@media screen and (max-width: 320px){
		  	:root{
				--masonry-grid-item-width: calc( var(--masonry-grid-width));
			}
			.hide-on-small-device{
				display: none;
			}
		}
		@media screen and (min-width: 321px) and (max-width: 480px){
		  	:root{
				--masonry-grid-item-width: calc( var(--masonry-grid-width) );
			}
		}
		@media screen and (min-width: 481px) and (max-width: 768px){
		  	:root{
				--masonry-grid-item-width: calc( (var(--masonry-grid-width) - 5px)/2);
			}
		}
		@media screen and (min-width: 769px) and (max-width: 1024px){
		  	:root{
				--masonry-grid-item-width: calc( (var(--masonry-grid-width) - 5px)/2);
			}
		}
		@media screen and (min-width: 1025px) and (max-width: 1200px){
		  	:root{
				--masonry-grid-item-width: calc( (var(--masonry-grid-width) - 10px)/2);
			}
		}
		@media screen and (min-width: 1201px){
		  	:root{
				--masonry-grid-item-width: calc( (var(--masonry-grid-width) - 10px)/2);
			}
		}
	/*media query root*/

	.height-full{
		height: 100% !important;
	}
	.flex-sp-bt{
		display:flex;
		justify-content:space-between;
	}
	.flex-start{
		display:flex;
		justify-content:flex-start;
	}
	.flex-end{
		display:flex;
		justify-content:flex-end;
	}
	.cntr{
		align-items: center;
		justify-content:center;
		display: flex;
	}
	.cntr-y{
		align-items: center;
		display: flex;
	}
	.bg-white{
		background-color: #fff;
	}
	.bg-black{
		background-color: #000;
	}
	.bg-secondary-light{
		background-color: var(--secondary-light-color);
	}
	.bg-secondary-btn{
		background-color: var(--secondary-button-background);
	}
	.overflow-y-auto{
		overflow-y: auto;
	}
	.overflow-y-scroll{
		overflow-y: scroll;
	}
	.btn-success.light:not(:hover){
		background: #08bf7d;
	}
	.truncatebyline{
	  	overflow: hidden;
	  	text-overflow: ellipsis;
	  	display: -webkit-box;
	  	-webkit-box-orient: vertical;
	  	word-break: break-all;
	}
	.truncatebyline.by1{
	  	-webkit-line-clamp: 1;
	}
	.truncatebyline.by2{
	  	-webkit-line-clamp: 2;
	}
	.truncatebyline.by3{
	  	-webkit-line-clamp: 3;
	}
	.text-fcapitalize::first-letter{
		text-transform: capitalize !important;
	}
	.cursor-pointer{
		cursor: pointer;
	}
	.h-wbkt{
    	height: -webkit-fill-available;
	}
	.h-100{
		height: 100%;
	}
	.w-wbkt{
		width: -webkit-fill-available;
	}
	.shadow{
		box-shadow: 0px 3px 10px rgb(0 0 0 / 12%);
    	transition: 0.5s;
	}
	.shadow-border-all{
		box-shadow: -1px 1px 1px rgb(0 0 0 / 12%), 1px -1px 1px rgb(0 0 0 / 12%);;
    	transition: 0.5s;
	}
	.shadow-over-all{
		box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 40px, rgba(0, 0, 0, 0.2) -2px -2px 40px;
	}
	.hover-bg-light:hover{
		background-color: rgba(0, 0, 0, 0.05);
	}
	.mirror-ns1{
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);
    }
    .object-fit-cover{
    	object-fit: cover;
    }
    .object-css-center{
    	position: absolute;
	    margin: 0;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
    }
    .object-css-center-2 {
	    position: relative;
	    margin: 0; 
	    top: -50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	}
    .swal2-popup{
      	font-size: 12px !important;
      	font-family: font-family: 'Poppins', sans-serif;
      	font-weight: 400;
    }

	/*dropdown*/
		.dropdown-jhggf5dsatrg{
			inset: 2px 18px auto auto !important;
			box-shadow: 2px 2px 40px rgb(0 0 0 / 20%),-2px -2px 40px rgb(0 0 0 / 20%);
			border:none;
			min-width: 20rem;
			border-radius: 10px 0px 10px 10px;
		}
		.dropdown-jhggf5dsatrg.min-w-sm{
			min-width: 10rem !important;
		}
		.dropdown-jhggf5dsatrg.min-w-lg{
			min-width: 15rem !important;
		}
		.dropdown-jhggf5dsatrg.min-w-xl{
			min-width: 24rem !important;
		}
		.dropdown-jhggf5dsatrg li{
			border-bottom:1px solid rgba(0,0,0,0.05);
		}
		.dropdown-jhggf5dsatrg button{
			padding: 0.8rem 1rem;
		}
		.dropdown-jhggf5dsatrg .tale-jhgfd{
			position:absolute;
			color:#fff;
			top:-16px;
			right:-7px;
			font-size:30px;
			transform: rotate(29deg);
			z-index: -1;
		}
	/*dropdown*/

	/*font sizes*/
		.fs-9p{ font-size: 9px;}
		.fs-10p{ font-size: 10px;}
		.fs-11p{ font-size: 11px;}
		.fs-12p{ font-size: 12px;}
		.fs-13p{ font-size: 13px;}
		.fs-14p{ font-size: 14px;}
		.fs-15p{ font-size: 15px;}
		.fs-16p{ font-size: 16px;}
		.fs-17p{ font-size: 17px;}
		.fs-18p{ font-size: 18px;}
		.fs-19p{ font-size: 19px;}
		.fs-20p{ font-size: 20px;}
		.fs-21p{ font-size: 21px;}
		.fs-22p{ font-size: 22px;}
		.fs-23p{ font-size: 23px;}
		.fs-24p{ font-size: 24px;}
	/*font sizes*/

	/*width*/
		.mw-100r{ max-width:100%; }
		.w-10p{ width: 10px; }
		.w-20p{ width: 20px; }
		.w-30p{ width: 30px; }
		.w-40p{ width: 40px; }
		.w-50p{ width: 50px; }
		.w-60p{ width: 60px; }
		.w-70p{ width: 70px; }
		.w-80p{ width: 80px; }
		.w-90p{ width: 90px; }
		.w-100p{ width: 100px; }
	/*width*/


	/*height*/
		.mh-100r{ max-height:100%; }
		.h-10p{ height: 10px; }
		.h-20p{ height: 20px; }
		.h-30p{ height: 30px; }
		.h-40p{ height: 40px; }
		.h-50p{ height: 50px; }
		.h-60p{ height: 60px; }
		.h-70p{ height: 70px; }
		.h-80p{ height: 80px; }
		.h-90p{ height: 90px; }
		.h-100p{ height: 100px; }
	/*height*/

	/*round*/
		.rounded-4{ border-radius: 0.4rem; }
		.rounded-5{ border-radius: 0.5rem; }
		.rounded-6{ border-radius: 0.6rem; }
		.rounded-7{ border-radius: 0.7rem; }
		.rounded-8{ border-radius: 0.8rem; }
		.rounded-9{ border-radius: 0.9rem; }
	/*round*/


	.active[data-active-effect="bgc"]{
		background-color: var(--hosted-view-selected-state) !important;
	}
	[data-hover-effect="bgc"]:not(.active):hover{
		background-color: rgba(0,0,0,0.03);
		transition: 0.2s;
	}
/*common styling*/