.auth-bg{
	overflow: hidden;
	position: absolute;
	height: 100vh;
	width: 100vw;
	background-repeat: no-repeat;
	background-size: cover;
	background: linear-gradient(135deg, rgba(46,52,81,0.4) 0%, rgba(52,40,104,0.95) 100%);
	z-index: 0;
}

.auth-get-wrapper{
	overflow-x: hidden;
	height: 100vh;
	width: 100vw;
}

.auth-bg img{
	width: 100%;
}

.auth-over-bg{
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background: linear-gradient(135deg, rgba(46,52,81,0.4) 0%, rgba(52,40,104,0.95) 100%);
	z-index: 2;
}

.row-auth{
	height: 100vh;
}

.row-auth h3{
	font-size: 1.2rem;
}

.hr-top{
	position: absolute;
	height: 11rem;
	width: 0;
	padding: 0;
	left: 50%;
	transform: translateX(-50%);
	border-left: 1px solid  rgba(0,0,0,0.2);
}

.hr-top.invalid{
	border-left: 1px solid rgba(220, 53, 70, 0.5);
}

/* .auth-logo{
	width: 100%;
	display: flex;
	justify-content: center;
} */
.auth-logo img{
	width: 100%;
}

/*****************************************************************************************************************/

.auto-complete{
	overflow: hidden;
	position: absolute;
	display: block;
	background-color: #fff;
	height: auto;
	color: #212121;
	z-index: 99999999;
	border-radius: 0.25rem;
}
.auto-complete a{
	display: block;
	padding: 0.4rem 1rem;
	cursor: pointer;
	border-left: solid 1px #eaeaea;
	border-right: solid 1px #eaeaea;
}
.auto-complete a:first-child{
	border-top: solid 1px #eaeaea;
	border-radius: 0.25rem 0.25rem 0 0;
}
.auto-complete a:last-child{
	border-bottom: solid 1px #eaeaea;
	border-radius: 0 0 0.25rem 0.25rem;
}
.auto-complete a:only-child{
	border: solid 1px #eaeaea;
	border-radius: 0.25rem;
}
.auto-complete a:hover{
	background-color: #17a2b8;
	border-color: #17a2b8;
	color: #fff !important;
}

#a{
	padding-top: -1px;
	height: 14px;
	width: auto;
	color: #fff;
	text-align: center;
	transform: rotate(deg);
	cursor: pointer;
	transition: all .5s ease;
}

#a.b{
	transform: rotate(180deg);
	transition: all .5s ease;
}

table .theme-table{
	/* background-color: #272d36 !important; */
	background-color: rgb(57, 23, 74) !important;
}

table .theme-table th{
	color: #fff !important;
}

.dropdown-menu{
	width: auto;
}

.option-head{
	color: #fff;
	margin: .2rem auto;
	margin-left: .2rem;
}

.option-head{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.option-head p{
	margin-bottom: 0;
}

.wrapper .page-wrap .app-sidebar .sidebar-header .header-brand .logo-img{
	width: 100%;
}

/* ------------------------ LOADER ------------------------ */

/* body{
	overflow-x: hidden;
} */

.wrapper .header-top{
	position: sticky;
	background: rgb(87, 35, 100) !important;
}
.wrapper .page-wrap .main-content{
	margin-top: 0;
}
.app-sidebar .sidebar-header,
.app-sidebar .nav-lavel{
	background: rgb(57, 23, 74) !important;
}
.app-sidebar .sidebar-content{
	background: rgb(62, 45, 79) !important;
}
.app-sidebar .submenu-content{
	background: rgb(96, 74, 118) !important;
}

.bg-loader{
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: rgba(18, 1, 67, 0.4);
	margin: 0;
	padding: 0;
	z-index: 99999999999999;
	visibility: initial;
	opacity: 1;
	transition: all .3s ease;
	overflow: hidden;
}
.bg-loader.hide{
	display: none;
	visibility: hidden;
	opacity: 0;
	transition: all .3s ease;
}
.loader{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 2.5rem;
}
.loader svg{
	animation-name: loader;
	animation-duration: .8s;
	animation-iteration-count: infinite;
}
.loader .secondary{
	color: orange;
}
.loader .primary{
	color: blueviolet;
}

@keyframes loader {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.btn-theme {
	border: 0;
	/* background: linear-gradient(150deg, orange 15%, #ee3a5b 35%, blueviolet 94%); */
	background: linear-gradient(150deg, orange 12%, #ee3a5b 20%, blueviolet 40%,#ee3a5b 60%, orange 80%);
	background-size: 250% 250%;
	color: #fff;
	transition: all .3s ease;
}

.btn-theme:hover{
	/* background: linear-gradient(330deg, orange 15%, #ee3a5b 35%, blueviolet 94%); */
	animation-name: btn-ani;
	color: #fff;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	/* background-size: 250% 250%; */
}

/* .btn-theme::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-top: 100vh solid transparent; 
	border-left: 100vh solid #fff;
	opacity: 0.1; 
}

.btn-theme::after {
	content: ""; 
	position: absolute;
	bottom: 0; 
	right: 0; 
	border-top: 100vh solid transparent;
	border-right: 100vh solid #fff;
	opacity: 0.1;
} */

@keyframes btn-ani{
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
/*---------------------------*/
.img_can {
	color: #4c5667;
	font-weight: 600;
	width: 7rem;
	height: 7rem;
	line-height: 30px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	display: inline-block;
	background: #ced4da no-repeat center/cover;
	position: relative;
	vertical-align: bottom;
	font-size: .875rem;
	user-select: none;
}

.mayus{
	text-transform: uppercase;
}

/*---------------------------*/

#a{
	padding-top: -1px;
	height: 14px;
	width: auto;
	color: #fff;
	text-align: center;
	transform: rotate(0deg) translateY(-1px);
	cursor: pointer;
	transition: all .5s ease;
}

#a.b{
	transform: rotate(180deg) translateY(1px);
	transition: all .5s ease;
}

button.badge{
	border: 0;
	transition: all .5s ease;
}
button.badge:hover{
	filter: grayscale(0.2);
	transition: all .5s ease;
}

/* ############################################################# */

.a-block{
	display: inline-block;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #fff;
}

.a-block:hover{
	color: #fff;
}

.td-block-primary{
	background: #007bff;
}
.td-block-inverse{
	background: #6c757d;
}
.td-block-success{
	background: #26C281;
}
.theme-dashboard{
	background:#555555 !important;
}

.bg-success-alt { background-color: #C8FFCB !important;}

.bg-info-alt { background-color: #C6E6FF !important;}

.bg-warning-alt { background-color: #FFF7B7 !important; }

.bg-danger-alt { background-color: #F8D4D4 !important;}

.text-success-alt { color: #004602 !important;}

.text-info-alt { color: #00005E !important;}

.text-warning-alt { color: #382B00 !important;}

.text-danger-alt { color: #5B0000 !important;}

.bg-success-alt-dk { background-color: #00780F !important;}

.bg-info-alt-dk { background-color: #214FB7 !important;}

.bg-warning-alt-dk { background-color: #E3C727 !important; }

.bg-danger-alt-dk { background-color: #AA2F0E !important;}


/* ########################################## */

.card-selected {
	width: 100%;
	height: 100%;
	background: rgba(23, 163, 184, 0.5);
	position: absolute;
	border-radius: 0.25rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* CHECK ANIMATION */

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #fff;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: rgba(23, 163, 184, 0.5);
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #fff;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #fff;
  }
}

/* ############################################################################### */

.confirm{
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, .8);
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 999999999999999;
	overflow: hidden;
}