.hide {
		display: none;
	}

	.test {
		display: none;
	}

	#question-container {
		width: 80%;
	}


	#signInModal {
		background: #060818;
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: -10000;
		
		
	}

	
	.center {
		text-align: center;
		margin: auto;
		width: 100%;

	}

	.middle {
		position: absolute;
		top: 40%;
	}

	.white {
		background: white!important;
	}

	.responses {
		width: 140px;
	}

	button.auditButton {
		min-width: 100%;
	}

	.quarter {
		width: 25%;
		vertical-align: top;
	}

	.third {
		vertical-align: top;
		width: 35%;
		margin: 0 10px 0 0;
	}

	.issue-text {
		margin: 0 0 10px 0;
	}

	.padl40 {
		padding-left: 40px;
	}

	.flexBetween {
		display: flex;
		justify-content: space-between;
	}

	#hacker-list li {
		width: 49%;
		min-width: 320px;
	}

	.component-card_4 {
		width: 97%!important;
	}

	.question-row {
		width: 60%;
    	display: flex;
	}

	.issue-text-block {
		width: 70%;
		margin: 0 10px 0 0;
	}

  	
	  
	img.actions  {
		margin: 0 10px 0 0;
	}

	img.actions:hover {
		opacity: .8;
		position: relative;
		top: 0px;
	}

	img.actions:active {
		opacity: .7;
		position: relative;
		top: 1px;
	}


	.screenshotItem{
		display: inline-block;
		margin: 5px;
		height: 70px;
		width: 70px;
		opacity: .7;
		border: solid 1px grey;
	}

	.screenshot-display {
		position: absolute;
		bottom: 20px;
	}


  	
  	.half{
  		width: 48%;

  	}

  	.tleft {
  		text-align:left;
  	}

  	.left {
  		display: inline-block;
  	}

  	.right {
  		display: inline-block;
  	}

  	.responses .button {
		  border: none;
		  outline: none;
		  padding: 5px 5px;
		  background-color: #f1f1f1;
		  cursor: pointer;
		  font-size: 16px;
	}

	/* Style the active class, and buttons on mouse-over */
	button.active {
		background: #3B3F5C!important;
		color: white;
	}

	button.always.active {
		background: #8BBE41!important;
	}

	button.mostly.active {
	background: #2095F1!important;
	}

	button.sometimes.active {
	background: #E19F3F !important;
	}

	button.no.active {
	background: #E65159 !important;
	}		

	.responses .button:hover {
	  background-color: #666;
	  color: white;
	}

	div#actions {
		display: flex;
		position: absolute;
		bottom: 25px;
	}

	.issueStats {
		line-height: 1.3em;
		color: darkgrey;
	}

	body {
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		 -khtml-user-select: none; /* Konqueror HTML */
		   -moz-user-select: none; /* Old versions of Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none; /* Non-prefixed version, currently
									  supported by Chrome, Edge, Opera and Firefox */
	}

	h4 {
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		 -khtml-user-select: none; /* Konqueror HTML */
		   -moz-user-select: none; /* Old versions of Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none; /* Non-prefixed version, currently
									  supported by Chrome, Edge, Opera and Firefox */
	}

	.col-xl-12.col-md-12.col-sm-12.col-12 {
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		 -khtml-user-select: none; /* Konqueror HTML */
		   -moz-user-select: none; /* Old versions of Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none; /* Non-prefixed version, currently
									  supported by Chrome, Edge, Opera and Firefox */
	}

	.widget-heading {
		border-bottom: 2px dotted lightgrey;
	}

	ul.list {
		list-style-type: none;
		padding-left: 10px;
		display: flex;
		flex-wrap: wrap;
	}


	a.QLink {
		width: 310px;
		overflow: hidden;
		height: 20px;
		display: inline-block;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.component-card_4 .user-info {
		padding: 24px 8px 24px 0px;
		width: 80%;
	}
	
	.transparent {
		background: transparent;
	}

	.border-bottom-light {
		border-bottom: 1px solid lightgrey;
    	width: 98%;
    	margin: auto;
	}

	.addSlideButton {
		margin-top: 20px;
	}

	.pink {
		background-color: #FF3366;
		border: none;
		color: white;
	}

	.posBottom {
		position: absolute;
		bottom: 30px;
	}

	.posRight {
		position: absolute;
		right: 20px;
		
	}

	a.issueLink {
		background: #5A57E2;
		padding: 2px 13px;
		border-radius: 45px;
		color: white;
		font-weight: bold;
	}

	#spinnerHolder {
		position: relative;
    	top: 60%;
		right: 45%;
		
	}

	.gallery {		
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
	

	.imageHolder {
		position: relative;
	}

	.imageHolder .delete {
		position: absolute;
		top: 0px;
		right: 0px;
		border-radius: 10px;
		border: 1px solid white;
		background: grey;
		height: 15px;
		width: 15px;
		color: white;
		text-align: center;
		line-height: 1;
		font-size: 9pt;
	}

	.gallery img {
		margin: 2px;
		width: 90px;
		height: 60px;
		object-fit: scale-down;
		border: 1px solid #F1F2F3;
		background: #F1F2F3;
	}

	.issue-meta{
		margin: 0 0 0 15px;
		color: lightgray;
	}

	.delete {
		cursor: pointer;
	}

	.delete:hover {
		background: lightgrey;
		top: -1px;
	}

	.delete:active {
		background: lightgrey;
		top: 1px;
	}


	.drop-area.box {
        border: 2px dashed #ccc;
        border-radius: 20px;
        
        font-family: sans-serif;
        margin: 0px auto;
        padding: 20px;
        }
        .drop-area.highlight {
        border-color: purple;
        }
        p {
        margin-top: 0;
        }
        .my-form {
        margin-bottom: 10px;
        }
        #gallery {
        margin-top: 10px;
        }
        #gallery img {
        width: 150px;
        margin-bottom: 10px;
        margin-right: 10px;
        vertical-align: middle;
        }
        .button {
        display: inline-block;
        padding: 10px;
        background: #ccc;
        cursor: pointer;
        border-radius: 5px;
        border: 1px solid #ccc;
        }
        .button:hover {
        background: #ddd;
        }
        #fileElem {
        display: none;
        }
		
		.mySelector {
			height: 41px;
    		border-radius: 5px;
    		border-color: #d1d1d1;
    		padding: 0 10px;
			color: inherit;
			width: 220px;
		}

		.component-card_4 .gallery {
			margin: 20px 0 40px;
			max-width: 380px;
		}

		.imageHolder:hover {
			cursor: pointer;
			opacity: .5;
		}

		.issue-stats {
			display: none;
		}

		.dbuttonholder .btn {
			top: 20px;
		}

		.theme-brand {
			opacity:1;
		}

		#selectedNav {
			background: #e5e5e5;
			border-left: 1px solid #7651f7;
			font-weight: bolder;
		}

		#logoImage {
			width: 200px;
			height: 38px;
			border-radius: 5px;
			margin: 10px 0 10px 0;
			background-image: url(/assets/img/auditPilot.png);
			background-repeat: no-repeat;
			background-size: 200px 38px;
		}
		
		.sidebar-theme {
			background-color: #051E34!important;
			border: 0;
		}

		#sidebar .theme-brand {
			background: transparent;
			border: 0;
		}

		#sidebar ul.menu-categories li.menu > .dropdown-toggle {
			color: white;
		}

		.shadow-bottom {
			display: none;
		}

		#empty-illustration {
			
			margin: auto;
			text-align: center;
		}



		.table > thead > tr > th {
			color: #051E34;
		}

		div#load_screen {
			background: #100d2b!important;
		}


		/* Audit cards */

		.auditCard {
			width: 300px;
			border: 1px solid lightgrey;
			margin: 10px;
			border-radius: 30px;
			padding: 20px;
			height: 250px;
			background: white;
			box-shadow: 0 3px 10px rgb(0 0 0 / 10%);
			position: relative;
		}

		.cardBtns div {
			margin: 0 10px 0 0;
		}

		.cardBtns {
			display: flex;
			position: absolute;
			bottom: 20px;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 250px;
		}

		.auditCardHeading {
			font-weight: bolder;
		}

		.zmargin {
			margin: 0;
		}

		.logoHolder {
			background: #F1F2F3;
			border-radius: 100px;
			width: 60px;
			height: 60px;
			overflow: hidden;
			position: absolute;
			right: 22px;
			border: 1px solid #e5e5e5;
			/*background-image: url(http://localhost:5000/assets/img/auditPilot.png);*/
			background-position: center;
			background-size: 50px;
			background-repeat: no-repeat;
		}

		img.reportLogo {
			object-fit: scale-down;
			width: 60px;
			height: 60px;
		}


		.drop-area .logoHolder {

			margin: 2px;
			width: 90px;
			height: 60px;
			object-fit: cover;
			border: 1px solid #F1F2F3;
			background: #EAEBEC;
			background-position: center;
			background-size: 90px;
			background-repeat: no-repeat;

		}



		/* Flex */

		.flex-wrap {
			display: flex;
    		flex-wrap: wrap;
			justify-content: space-between;

		}

		.flex-wrap-left {
			display: flex;
    		justify-content: left;
			flex-wrap: wrap;

		}

		.flex-grow-one {
			flex-grow: 1;
			padding: 10px;
			flex-basis: 170px;
			width: 100%;
		}

		.flex-grow-two {
			flex-grow: 2;
			padding: 10px;
			flex-basis: 200px;
		}

		.flex-grow-three {
			flex-grow: 3;
			padding: 10px;
		}

		.flex-grow-four {
			flex-grow: 4;
			padding: 10px;
			flex-basis: 200px;
		}

		.answer-store {
			display: flex;
			justify-content: flex-end;
			position: relative;
			top: -30px;
		}

		.answer-store .icon-container {
			padding: 3px;
			height: 3px;
		}

		.icon-container:hover svg {
			stroke: #7207B7;
		}


		/*  Media Queries  */

		@media only screen and (max-width: 1200px){

			#question-container {
				width: 100%;
			}

			

			.image-item {
				order: 3;
			}

			.text-item {
				order: 2;
			}

			.answer-item {
				order: 1;
			}

			.dbuttonholder .btn {
				top: -20px;
				left: 14px;
				height: 25px;
				width: 93%;
				padding: 0;
				border-radius: 0;
				margin: auto;
			}

			
			

		}

			.footer-section {
				display: none;
			}
		


		/* Animation */

		svg#freepik_stories-file-searching:not(.animated) .animable {
			opacity: 0;
		}
		
		svg#freepik_stories-file-searching.animated #freepik--background-complete--inject-15 {
			animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) slideRight;
			animation-delay: 0s;
		}
		
		svg#freepik_stories-file-searching.animated #freepik--Floor--inject-15 {
			animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) slideUp;
			animation-delay: 0s;
		}
		
		svg#freepik_stories-file-searching.animated #freepik--Shadow--inject-15 {
			animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) lightSpeedLeft;
			animation-delay: 0s;
		}
		
		svg#freepik_stories-file-searching.animated #freepik--Plant--inject-15 {
			animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) zoomIn;
			animation-delay: 0s;
		}
		
		svg#freepik_stories-file-searching.animated #freepik--character-2--inject-15 {
			animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) lightSpeedRight;
			animation-delay: 0s;
		}
		
		svg#freepik_stories-file-searching.animated #freepik--Lines--inject-15 {
			animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) slideUp;
			animation-delay: 0s;
		}
		
		svg#freepik_stories-file-searching.animated #freepik--Folder--inject-15 {
			animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) zoomOut;
			animation-delay: 0s;
		}
		
		svg#freepik_stories-file-searching.animated #freepik--character-1--inject-15 {
			animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) slideLeft;
			animation-delay: 0s;
		}
		
		svg#freepik_stories-file-searching.animated #freepik--speech-bubble--inject-15 {
			animation: 1s 1 forwards cubic-bezier(.36, -0.01, .5, 1.38) slideLeft;
			animation-delay: 0s;
		}
		
		@keyframes slideRight {
			0% {
				opacity: 0;
				transform: translateX(30px);
			}
			100% {
				opacity: 1;
				transform: translateX(0);
			}
		}
		
		@keyframes slideUp {
			0% {
				opacity: 0;
				transform: translateY(30px);
			}
			100% {
				opacity: 1;
				transform: inherit;
			}
		}
		
		@keyframes lightSpeedLeft {
			from {
				transform: translate3d(-50%, 0, 0) skewX(20deg);
				opacity: 0;
			}
			60% {
				transform: skewX(-10deg);
				opacity: 1;
			}
			80% {
				transform: skewX(2deg);
			}
			to {
				opacity: 1;
				transform: translate3d(0, 0, 0);
			}
		}
		
		@keyframes zoomIn {
			0% {
				opacity: 0;
				transform: scale(0.5);
			}
			100% {
				opacity: 1;
				transform: scale(1);
			}
		}
		
		@keyframes lightSpeedRight {
			from {
				transform: translate3d(50%, 0, 0) skewX(-20deg);
				opacity: 0;
			}
			60% {
				transform: skewX(10deg);
				opacity: 1;
			}
			80% {
				transform: skewX(-2deg);
			}
			to {
				opacity: 1;
				transform: translate3d(0, 0, 0);
			}
		}
		
		@keyframes zoomOut {
			0% {
				opacity: 0;
				transform: scale(1.5);
			}
			100% {
				opacity: 1;
				transform: scale(1);
			}
		}
		
		@keyframes slideLeft {
			0% {
				opacity: 0;
				transform: translateX(-30px);
			}
			100% {
				opacity: 1;
				transform: translateX(0);
			}
		}