@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
@font-face{
	src: url('../fonts/century-gothic/CenturyGothic.ttf');
	font-family: 'CenturyGothic';
}
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	/*font-family: 'Open Sans', sans-serif;*/
	font-family: 'CenturyGothic';
}
:root{
	--primary: #66c4cc;
	--secondary: #a2d9e0;
	--light: #ffffff;
	--alt: rgba(103,197,205,0.2);
	--dark: #000000;
	--dark-alt: #333;
	--red: #e66767;
	--red-alt: rgba(214, 48, 49, 0.1);
	--orange: #f5cd79;
	--orange-alt: rgba(255, 165, 2, 0.1);
	--green: #00cec9;
	--green-alt: rgba(0, 184, 148, 0.1);
}
header, footer, section{
	width: 100%;
}
/*body{
	background: var(--primary);
}*/
.text-gradient{
	background: -webkit-linear-gradient( 106.4deg,  var(--primary),
     var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-l{
	width: 100%;
	padding: 0.7rem 0px;
	border-radius: 4px;
	outline: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	position: relative;
	transition: 0.4s;
}
.btn-m{
	padding: 0.7rem 1.2rem;
	border-radius: 4px;
	outline: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	position: relative;
	font-size: 14px;
}
.btn-m:hover, .btn-l:hover{
	transform: scale(0.95);
}
.btn-primary{
	background: var(--primary);
	color: var(--light);
}
.btn-gradient{
	background: -webkit-linear-gradient( 0deg,  var(--primary),
     var(--secondary));
	color: var(--light);
}
.btn-secondary{
	background: var(--secondary);
	color: var(--light);
}
.btn-dark{
	background: var(--dark);
	color: var(--light);
	/*border: 2px solid var(--dark-alt);*/
}
.btn-red{
	background: var(--red);
	color: var(--light);
}
.btn-green{
	background: var(--green);
	color: var(--light);
}
.pass-eye{
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
}
.bg-primary{
	background: var(--primary);
}
.bg-gradient{
	background: linear-gradient(-90deg,  var(--primary),
     var(--secondary));
}
.border-primary{
	border-color: var(--primary);
}
.border-secondary{
	border-color: var(--secondary);
}
.text-primary{
	color: var(--primary);
}

.topbar .avatar{
	position: relative;
}
.topbar .avatar img{
	position: relative;
	z-index: 3;
}
.topbar .avatar:before{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 106%;
	height: 106%;
	border-radius: 50%;
	background: #C6FFDD;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #eb4d4b, #f6e58d, #6ab04c);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #eb4d4b, #f6e58d, #6ab04c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
animation: ring-anim 22s linear infinite;
}
@keyframes ring-anim{
	from{
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to{
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.login-cont{
	background: linear-gradient(90deg, rgba(102,196,204,0.9), rgba(164,217,224,0.9)), url('../images/login2.jpg') center center no-repeat;
	background-size: cover;
}

.side-nav ion-icon{
	transform: translateY(2px);
}
.dropdown-nav ul{
	transition: 0.6s;
}
.nav-link{
	transition: 0.6s;
	border-radius: 100px 0px 0px 100px;
	position: relative;
}
.nav-link span.curve{
	display: none;
}
.nav-link.active span.curve{
	display: block;
}
.nav-link.active span.curve:nth-child(1) {
	position: absolute;
	top: -4px;
	left: 0;
	height: 4px;
	width: 100%;
	background: var(--light);
}
.nav-link.active span.curve:nth-child(1):before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--primary);
	border-bottom-right-radius: 100px;
}
.nav-link.active span.curve:nth-child(2) {
	position: absolute;
	bottom: -4px;
	left: 0;
	height: 4px;
	width: 100%;
	background: var(--light);
}
.nav-link.active span.curve:nth-child(2):before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--primary);
	border-top-right-radius: 100px;
}
.nav-link.active{
	background: var(--light);
	color: var(--primary);
}
.nav-link:hover, .dropdown-nav.active .dropdown-nav-link{
	background: rgba(255, 255, 255, 0.1);
	color: var(--light);
}
.bg-alt{
	background: var(--alt);
}
#obj-container{
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	overflow-y: scroll;
}
#obj-container::-webkit-scrollbar-track
{
	-webkit-box-shadow: none;
	border-radius: 2px;
	background-color: #fff;
}

#obj-container::-webkit-scrollbar
{
	width: 4px;
	background-color: #fff;
}

#obj-container::-webkit-scrollbar-thumb
{
	border-radius: 2px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: var(--alt);
}
.status-approved{
	background: var(--green);
	color: var(--light);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 14px;
}
.status-pending{
	background: var(--orange);
	color: var(--light);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 14px;
}
.btn-cancel, .status-rejected, .status-canceled{
	background: var(--red);
	color: var(--light);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 14px;
}
.btn-cancel-2{
	background: var(--red);
	color: var(--light);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 14px;
}

/* notification */
.notification{
	position: fixed;
	top: 3rem;
	left: 50%;
	transform: translateX(-50%);
	transition: 1s;
	opacity: 0;
	z-index: -10;
}
.notification.active{
	opacity: 1;
	z-index: 10;
}

.setting-img-del{
	position: absolute;
	right: -5px;
	bottom: -5px;
}

/* medias */
@media only screen and (max-width: 992px){
	.sidebar-cont{
		position: absolute;
		top: 0;
		left: 0;
	}
	.side-nav{
		position: fixed;
		top: 0;
		left: -70%;
		background: linear-gradient(45deg, var(--primary), var(--secondary));
		z-index: 10;
		width: 60%;
		transition: 1s;
		overflow: scroll!important;
	}
	.side-nav.active{
		left: 0%;
		z-index: 10;
		box-shadow: 30px 30px 500px rgba(0, 0, 0, 0.6);
	}
	.nav-link{
		border-radius: 0px;
	}
	.close-navigation {
		position: absolute;
		top: 1rem;
		right: 1rem;
	}
}
@media only screen and (max-width: 600px){
	.side-nav{
		left: -90%;
		width: 80%;
	}
	#obj-container{
		position: relative;
	}
	.nav-link.active span.curve:nth-child(1), .nav-link.active span.curve:nth-child(1):before,
	.nav-link.active span.curve:nth-child(2), .nav-link.active span.curve:nth-child(2):before {
		display: none;
	}
}


@-webkit-keyframes bounce-in-fwd {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(0.84);
            transform: scale(0.84);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-fwd {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(0.84);
            transform: scale(0.84);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}