/* input(158,2): run-time error CSS1035: Expected colon, found '{'
input(323,19): run-time error CSS1030: Expected identifier, found ':'
input(323,40): run-time error CSS1025: Expected comma or open brace, found ')'
input(396,49): run-time error CSS1046: Expect comma, found '0'
input(396,53): run-time error CSS1046: Expect comma, found '/'
input(397,41): run-time error CSS1046: Expect comma, found '0'
input(397,45): run-time error CSS1046: Expect comma, found '/'
input(411,44): run-time error CSS1046: Expect comma, found '0'
input(411,48): run-time error CSS1046: Expect comma, found '/'
input(412,36): run-time error CSS1046: Expect comma, found '0'
input(412,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-size: cover;
	background-repeat: no-repeat;
	background-image: url('/images/paper.jpg?v=ojNQEwJrdtQbXXwFlTALyfkIfY0');
}
.main {
	position: relative;
	z-index: 2;
}
.pre-auth {
	animation: .6s ease-out 0s 1 slideUp;
}
.main-logo img {
	max-width: 200px;
	max-height: 76px;
}

/* 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);
	font-weight: 400;
}

.main-dashboard .h6.text-muted {
	font-family: var(--primary-font);
	color: var(--dark);
}

.headline-statistic
{
	display: flex;
	flex-direction: column;
	font-weight: bold;
	h1
	{
		font-weight: bold;
		line-height: 0.9;
		font-size: 8rem;
		font-family: var(--secondary-font);
	}
	p
	{
		font-size: 1.25rem;
		
		color: var(--dark-grey);
	}
}

/* GRADIENT */
.gradient-bg {
	background: var(--gradient);
	background-size: 100%;
	color: var(--light);
	transition: .3s;
}
.gradient-bg:hover {
	background-size: 140%;
}

/* LOGO */
.main-logo {
	transition: .3s;
	animation: .6s ease-out 0s 1 slideDownRight;
	z-index: 99;
}
.main-logo:focus,
.main-logo:hover {
	opacity: .6;
}

/* 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:not([type=range]),
.form-group input[type=date],
.form-group select,
.input-group-text {
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid var(--light) !important;
	z-index: 1;
}
.form-group input[type=range] {
	accent-color: var(--primary);
}
.form-group input[type=range]::-webkit-slider-thumb {
	background: var(--primary);
}
.form-group input[type=range]::-moz-range-thumb {
	background: var(--primary);
}
.form-group input[type=range]::-ms-thumb {
	background: var(--primary);
}
.input-group-text {
	z-index: 99;
	border: none !important;
}
.toggle-password {
	cursor: pointer;
}

.form-check-input[type=radio]{
	height: 30px;
width: 30px;
}
.form-check-input:checked[type=radio] {
	background-image: none;
}
.form-check-input[type="checkbox"]:disabled {
	background-color: var(--dark);
	opacity: 0.2;
}
.form-control {
	font-family: var(--secondary-font);
}
textarea.form-control.answer-input {
	background: var(--grey);
    resize: none;
    min-height: 150px;
}

.form-check-input:focus,
.form-control:focus,
.form-control:focus + .input-group-text {
	border-color: var(--dark) !important;
	outline: none;
	box-shadow: none;
}

.custom-select {
	background-color: var(--primary);
	color: var(--light);
}
.form-check-input.answer-input:checked + label .fa-check {
	display: block !important;
}

.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);
}
.link-unstyled,
.link-unstyled:is(:link, :hover, :focus) {
	color: inherit;
	text-decoration: inherit;
	cursor: default;
}

/* BUTTONS */
.btn {
	text-transform: uppercase;
}
.btn:hover:not(.btn-outline-secondary),
.btn:focus:not(.btn-outline-secondary),
.btn:active:not(.btn-outline-secondary) {
	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%;
}
.ring-bg-img {
	background-image: url('/images/ring.png?v=ojNQEwJrdtQbXXwFlTALyfkIfY0');
	animation: .6s ease-out 0s 1 slideUpLeft;
}
.person-bg-img {
	animation: .6s ease-out 0s 1 slideUp;
}
.staff-1 {
	background-image: url('/images/staff-1.png?v=ojNQEwJrdtQbXXwFlTALyfkIfY0');
}
.staff-2 {
	background-image: url('/images/staff-2.png?v=ojNQEwJrdtQbXXwFlTALyfkIfY0');
}
.staff-3 {
	background-image: url('/images/staff-3.png?v=ojNQEwJrdtQbXXwFlTALyfkIfY0');
}
.staff-4 {
	background-image: url('/images/staff-4.png?v=ojNQEwJrdtQbXXwFlTALyfkIfY0');
}





.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;
	}
}

.text-question{
	flex-direction: column;
}
.text-question label{
	margin-left: 1rem;
	margin-top: 0.5rem;
}

@media screen and (min-width: 576px) {
	.nav-icons {
		width: auto;
	}
	.main-nav-wrapper.collapse {
		display: flex;
	}
	.text-question{
		flex-direction: unset;
	}
}




.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;
}


.accordion-button,
.accordion-button:not(.collapsed) {
	color: var(--dark);
}
.accordion-button:not(.collapsed) {
	background: var(--grey);
}

.accordion-button:focus {
	box-shadow: none;
}



.progress {
	height: .3rem;
}
.progress-bar {
	background: var(--gradient);
}



.col.main-area {
    width: calc(100% - 24px);
    margin: 0 0 0 auto;
}

.answer-count {
	width: 30px;
	height: 30px;
}

.chart {
	max-height: 500px;
}

@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;
	}
}

@keyframes blink {
	0% {
		transform: scale(1);
		opacity: .25;
	}
	25% {
		transform: scale(1.2);
		opacity: 1;
	}
	50% {
		transform: scale(1);
		opacity: .25;
	}
	75% {
		transform: scale(1.2);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: .25;
	}
}
.blink {
	border-radius: 50%;
	width: 10px;
	height: 10px;
	opacity: .25;
	background-color: var(--light-blue);
	-webkit-animation: blink 2s infinite;
	-moz-animation: blink 2s infinite;
	-o-animation: blink 2s infinite;
	animation: blink 2s infinite;
}
.pips {
	width: 9.090909%;
}
.pip-indicators {
	width: 97%;
}
.answer-input-slider {
	width: 90%;
}



@media (max-height: 700px) {
	.survey-finished {
		margin-top: 150px;
	}
}

@media screen and (max-width: 550px) {
	.buttonQuestionContainer{
		width: 85%;
	}

	.advert-container {
		flex-wrap: wrap;
	}
}

.section-title {
	min-height: 38px;
}
.progress-top {
	min-height: 204px;
}


/* Scrollbar for Research Survey Intro/Finished pages */

.purple-scrollbar::-webkit-scrollbar {
width: 5px;
}


.purple-scrollbar::-webkit-scrollbar-track {
border-radius: 10px;
}


.purple-scrollbar::-webkit-scrollbar-thumb {
background:  #a437ae;
border-radius: 10px;
}

/* eNPS Chart */
.chart-container {
	position: relative;
	width: 100%;
  }

  .bar-chart {
	width: 100%;
	height: 20px;
	background: linear-gradient(to right, #FF2E2E, #FF7F7F, #90EE90, #00D100);
  }

  .arrow-indicator {
	position: absolute;
	top: 0;
	margin-top: 50px;
	left: calc(50% - 10px); /* Center arrow above the specific value */
	border: 10px solid transparent;
	border-bottom-color: #575756;
  }

  .arrow-value {
	position: absolute;
	top: 10pxpx; /* Adjust the distance below the arrow */
	color: var(--secondary);
	margin-left: -2px;
  }
  
  .chart-header {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	color: var(--secondary);
  }
