/* input(284,49): run-time error CSS1046: Expect comma, found '0'
input(284,53): run-time error CSS1046: Expect comma, found '/'
input(285,41): run-time error CSS1046: Expect comma, found '0'
input(285,45): run-time error CSS1046: Expect comma, found '/'
input(299,44): run-time error CSS1046: Expect comma, found '0'
input(299,48): run-time error CSS1046: Expect comma, found '/'
input(300,36): run-time error CSS1046: Expect comma, found '0'
input(300,40): run-time error CSS1046: Expect comma, found '/' */
/* VARIABLES */
:root {
	--gradient: linear-gradient(to left, #BA00A4, #63DDCE);
	--half-gradient: linear-gradient(to right, #BA00A4, #63DDCE);

	--primary: #BA00A4;
	--secondary: #431E84;
	--dark: #1F1F1F;
	--light: #FFFFFF;
	--light-blue: #63DDCE;
	--blue: #5DB4CF;
	--lavender: #826CBE;
	--purple: #98099B;
	--grey: #F1F1F1;
	--dark-grey: #575756;
	--unauth-bg: #D4BCFF;
	--auth-bg: #FAF9F8;

	--primary-font: 'Cormorant Garamond', serif;
	--secondary-font: 'Montserrat', sans-serif;
}

/* BODY / MAIN */
body,
html {
	margin: 0;
	padding: 0;
}
body {
	background-color: var(--auth-bg);
	font-family: var(--secondary-font);
	color: var(--dark);
}
body.noscroll {
	overflow: hidden;
}
.underlay {
	background-color: var(--unauth-bg);
}
.main {
	position: relative;
	z-index: 2;
}
.pre-auth {
	animation: .6s ease-out 0s 1 slideUp;
}

/* FONTS */
.primary-font {
	font-family: var(--primary-font) !important;
}
.secondary-font {
	font-family: var(--secondary-font) !important;
}

/* BACKGROUND COLOURS */
.primary-bg {
	background-color: var(--primary) !important;
}
.secondary-bg {
	background-color: var(--secondary) !important;
}
.dark-bg {
	background-color: var(--dark) !important;
}
.light-bg {
	background-color: var(--light) !important;
}
.light-blue-bg {
	background-color: var(--light-blue) !important;
}
.blue-bg {
	background-color: var(--blue) !important;
}
.lavender-bg {
	background-color: var(--lavender) !important;
}
.purple-bg {
	background-color: var(--purple) !important;
}
.grey-bg {
	background-color: var(--grey) !important;
}
.dark-grey-bg {
	background-color: var(--dark-grey) !important;
}

/* COLOURS */
.primary {
	color: var(--primary) !important;
}
.secondary {
	color: var(--secondary) !important;
}
.dark {
	color: var(--dark) !important;
}
.light {
	color: var(--light) !important;
}
.light-blue {
	color: var(--light-blue) !important;
}
.blue {
	color: var(--blue) !important;
}
.lavender {
	color: var(--lavender) !important;
}
.purple {
	color: var(--purple) !important;
}
.grey {
	color: var(--grey) !important;
}
.dark-grey {
	color: var(--dark-grey) !important;
}

/* SIDEBAR */
.sidebar {
	width: 260px;
	min-width: 260px;
	max-width: 260px;
}
.open-sidebar {
	z-index: 1040;
}
.offcanvas.sidebar {
    background-color: var(--auth-bg);
}

/* TYPOGRAPHY */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
	font-family: var(--primary-font);
	color: var(--secondary);
}

/* GRADIENT */
.gradient-bg {
	background: var(--gradient);
	background-size: 100%;
	color: var(--light);
	transition: .3s;
}
.gradient-bg:hover {
	background-size: 140%;
}

/* LOGO */
.main-logo,
.mobile-logo {
	transition: .3s;
	animation: .6s ease-out 0s 1 slideDownRight;
	z-index: 99;
}
.main-logo:focus,
.main-logo:hover,
.main-logo:active,
.mobile-logo:focus,
.mobile-logo:hover,
.mobile-logo:active {
	opacity: .6;
}

/* FORM */
.form-group {
	display: flex;
	flex-direction: column;
}
.form-group > * {
	border: none;
	box-shadow: none !important;
}
.form-group .form-label {
	transform: translateY(0px);
	transition: .3s;
	order: -1;
	z-index: 0;
}
.form-group input:focus + .form-label,
.form-group select:focus + .form-label {
	transform: translateY(-5px) !important;
}
.form-group input,
.form-group select,
.input-group-text {
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid var(--light) !important;
	z-index: 1;
}
.input-group-text {
	z-index: 99;
	border: none !important;
}
.toggle-password {
	cursor: pointer;
}
.form-check-input[type="checkbox"]:disabled {
	background-color: var(--dark);
	opacity: 0.2;
}

.form-control.disabled {
	background-color: #ccc !important;
	pointer-events: none;
}

input:-webkit-autofill::first-line,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 9999s;
	-webkit-text-fill-color: var(--dark) !important;
	font-family: var(--secondary-font);
	color: var(--dark);
}

/* LINKS */
.form-link {
	font-family: var(--secondary-font);
	color: var(--primary);
	transition: .3s;
}
.form-link:focus,
.form-link:hover,
.form-link:active {
	color: var(--secondary);
}

/* BUTTONS */
.btn {
	text-transform: uppercase;
}
.btn:hover,
.btn:focus,
.btn:active {
	color: var(--light);
}

/* BACKGROUND IMAGE OVERLAYS */
.bg-img {
	width: 100%;
	height: 100vh;
	bottom: 0;
	right: 0;
	z-index: 1;
	position: fixed;
	overflow: hidden;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 100%;
}
.chart-bg-img {
	background-image: url('/images/chart.png?v=ojNQEwJrdtQbXXwFlTALyfkIfY0');
	animation: .6s ease-out 0s 1 slideUpLeft;
}



.table-responsive {
	min-height: 120px;
}
thead,
th {
	background-color: var(--grey) !important;
	font-weight: normal;
}



.list-group-item {
    background-color: transparent;
    border: 1px solid var(--auth-bg) !important;
    transition: .3s
}
.list-group-item.focus,
.list-group-item:hover,
.list-group-item.active {
    background-color: var(--grey);
    -webkit-box-shadow: inset 0px 0px 8px rgb(0 0 0 / 15%);
    box-shadow: inset 0px 0px 8px rgb(0 0 0 / 15%);
    border: 1px solid rgba(0,0,0,.125) !important;
}
.list-group-item a,
.list-group-item a:focus,
.list-group-item a:hover {
    color: var(--dark);
    text-decoration: none;
}

.nav-icons .icon,
.action-button {
	transition: .3s;
    background-color: var(--light);
    -webkit-box-shadow: 2px 2px 10px rgb(0 0 0 / 15%);
    box-shadow: 2px 2px 10px rgb(0 0 0 / 15%);
	cursor: pointer;
}
.nav-icons .icon:focus,
.nav-icons .icon:hover,
.nav-icons .icon:active,
.action-button:focus,
.action-button:hover,
.action-button:active {
	opacity: .6;
}
.list-group-item .icon {
    display: inline;
}

.nav-icons,
.view-title {
	width: 100%;
}


.form-card {
	width: 100%;
	background-color: var(--grey);
}
.main-content .form {
	width: 100%;
	max-width: 800px;
}

@media screen and (min-width: 1200px)
{
	.view-title {
		width: auto;
		flex: 1;
	}
}

@media screen and (min-width: 576px) {
	.nav-icons {
		width: auto;
	}
	.main-nav-wrapper.collapse {
		display: flex;
	}
}

.nav-icons .icon,
.list-group-item .icon,
.action-button {
    width: 35px;
    height: 35px;
}


.list-group-item svg,
.list-group-item.focus svg,
.list-group-item:hover svg,
.list-group-item.active svg,
.nav-icons svg,
.action-button svg,
.button-icon,
td a svg,
td .dropdown svg {
    transition: .3s;
    width: 20px;
    height: 20px;
	cursor: pointer;
}
.button-icon {
	color: var(--light);
}


td a svg,
td .dropdown svg {
    width: 15px;
    height: 15px;
}


.dropdown-item.active,
.dropdown-item:active {
	color: var(--dark);
    background-color: var(--grey);
}





.main-content {
	animation: .6s ease-out 0s 1 slideUp;
}
.navbar {
	animation: .6s ease-out 0s 1 slideDown;
}





.form-check-input:checked,
td a.btn {
	background-color: var(--primary);
    border: none;
}





.col.main-area {
    width: calc(100% - 24px);
    margin: 0 0 0 auto;
}

@media screen and (min-width: 992px) {
	.col.main-area {
		flex: 0 0 calc(100vw - 260px);
		width: calc(100% - 260px);
		margin-left: auto;
	}
}

/* ANIMATIONS */
@keyframes slideUpLeft {
	0% {
		transform: translate(100px, 100px);
		opacity: .6;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes slideUp {
	0% {
		transform: translateY(100px);
		opacity: .6;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes slideDown {
	0% {
		transform: translateY(-100px);
		opacity: .6;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes slideDownRight {
	0% {
		transform: translate(-20px, -40px);
		opacity: .6;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}

