@charset "utf-8";
/*------------------------------------------------------------------------- FONTS 
*/
@font-face {
    font-family: 'wssc';
    src: url('font/wssc-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'wssc';
    src: url('font/wssc-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'wssc';
    src: url('font/wssc-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'wssc';
    src: url('font/wssc-black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

/*------------------------------------------------------------------------- RESET 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	outline: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
:focus {
	outline: 0;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*------------------------------------------------------------------------- CORE STYLES
*/
html {
	height: 100%;
}
body {
	display: flex;
	flex-flow: column nowrap;
	min-height: 100%;
}
body.stop-transitions * {
  transition: none !important;
}
#app {
	font-family: 'wssc', serif;
	background: linear-gradient(0deg, rgba(179,191,199,1) 0%, rgba(202,220,232,1) 100%);
	color: #111;
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	position: relative;
	height: 100%;
	width: 100%;
	flex: 1;
}
a {
	text-decoration: none;
}
sup {
	vertical-align: super;
	font-size: 70%;
}
p {
	line-height: 1.5em;
	font-size: 15px;
	margin: 0 0 20px;
	position: relative;
}
ul {
	margin: 10px 0 20px 15px;
	list-style: disc;
}
ul li {
	margin: 0 0 10px;
	line-height: 1.5em;
	font-size: 18px;
}
ol {
	margin: 10px 0 20px 15px;
	list-style: decimal;
}
ol li {
	padding: 0 0 0 22px;
	margin: 0 0 10px;
	line-height: 1.5em;
	font-size: 18px;	
}
.image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.image-wrapper a {
	display: block;
	width: 100%;
	height: 100%;
}
.mCSB_dragger_bar {
	background-color: #817192 !important;
}

/*------------------------------------------------------------------------- DEFAULT LAYOUT BEHAVIOURS
*/
.wrapper {
	position: relative;
	width: 100%;
	background: transparent;
}
.container {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	position: relative;	
}
.row {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
	position: relative;
	width: 100%;
	padding: 0 0 20px;
}
.column {
	flex: 1;
	padding: 0;
}

@media (max-width: 767px)
{
	.column {
		flex: auto;
		width: auto;
		padding: 0;
	}
	.row {
		padding: 0 20px;
	}
}

/*------------------------------------------------------------------------- PAGE AREA  
*/
#page {
	height: auto;
	position: relative;
	margin: 0;
	flex: 1;
	z-index: 1;
	padding: 0;
}
#contentContainer {
	position: relative;
	padding: 20px;
	margin-bottom:100px;
}

/*------------------------------------------------------------------------- MAIN NAVIGATION SIDEBAR  
*/
nav {
	width: 240px;
	height: auto;
	background: #817192;
	border-right: 1px solid #4d4458;
	box-shadow: 10px 0px 0px 0px rgba(0,0,0,0.1);
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	transition: 0.2s ease-out all;
	overflow: hidden;
	position: relative;
	z-index: 3;
	opacity: 1;
	min-width: 180px;
	flex: 0 1 auto;
	padding: 0 0 10px;
}
#app.navHide nav {
	transform: translateX(-100%) scaleX(0%);
	flex: 0 1 0;
	opacity: 0;
	min-width: 0;
}
#navHomeLink h1 {
	width: 240px;
	max-width: 100%;
	height: 80px;
	background: url(../images/semi-circle.svg) center top / 100% auto no-repeat;
	padding-top: 10px;
}
#navHomeLink h1 a {
	display: block;
	width: 80%;
	max-width: 180px;
	height: 24px;
	background: url(../images/wssc-nav-header-logo.svg) center top / 100% auto no-repeat;
	margin: 0 auto;
	text-indent: -9999px;
}
#navUser {
	padding: 20px;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}
#navUser p {
	color: #fff;
	font-size: 15px;
	margin: 0;
	letter-spacing: -1px;
	line-height: 1.2em;
}
#navUser #navUserName {
	font-weight: bold;
}
#navUser #userImage {
	width: 60px;
	height: 60px;
	border: 2px solid #fff;
	border-radius: 30px;
	overflow: hidden;
	margin-right: 10px;
}
#navUser #userImage img {
	width: 100%;
}
#navLinks {
	width: 100%;
	flex: 1;
}
#navLinks ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(0,0,0,0.4);
	border-bottom: 1px solid rgba(255,255,255,0.4);	
}
#navLinks li {
	border-bottom: 1px solid rgba(0,0,0,0.4);
	border-top: 1px solid rgba(255,255,255,0.4);
	margin: 0;
	padding: 0;
}
#navLinks a {
	display: block;
	width: 100%;
	height: 50px;
	transition: 0.2s linear all;
	font-weight: 900;
	font-size: 15px;
	color: #fff;
	line-height: 50px;
	letter-spacing: -1px;
	padding: 0 10px 0 50px;
	position: relative;
}
#navLinks a.selected {
	background: #73648e url(../images/arrow-right.svg) right 20px center / 16px no-repeat;
}
#navLinks a.hasSubMenu {
	background: url(../images/arrow-down.svg) right 20px center / 16px no-repeat;
}
#navLinks a.activeSubMenu {
	background: #73648e url(../images/icons/close-blue.svg) right 20px center / 16px no-repeat;	
}
#navLinks a:hover {
	background-color: #73648e;
}
#navLinks a.activeSubMenu:hover {
	background-image: url(../images/icons/cross.svg);
}
#navLinks .navSubMenu {
	border: 0;
	max-height: 0;
	overflow: hidden;
	background: #8d7f9d;
	transition: all 0.5s linear;
}
#navLinks .navSubMenu.selected {
	max-height: 400px;
}
#navLinks .navSubMenu a {
	padding: 0 10px 0 70px;
}
#navLinks ul a::before {
	content: '';
	display: block;
	width: 28px;
	height: 28px;
	background: transparent center center / 100% no-repeat;
	position: absolute;
	left: 5px;
	top: 11px;
}
#navLinks .navSubMenu a::before {
	left: 25px;
}
#navLinks #btnDashboard::before		{	background-image: url(../images/icons/dashboard.svg);	}
#navLinks #btnAddWebSite::before	{	background-image: url(../images/icons/add-website.svg);	}
#navLinks #btnSupport::before 		{	background-image: url(../images/icons/support.svg);	}
#navLinks #btnBilling::before 		{	background-image: url(../images/icons/account.svg);	}
#navLinks #btnScans::before 		{	background-image: url(../images/icons/scan.svg);	}
#navLinks #btnReports::before 		{	background-image: url(../images/icons/reports.svg);	}
#navLinks #btnLogOut::before 		{	background-image: url(../images/icons/log-out.svg);	}
#navLinks #btnProfile::before 		{	background-image: url(../images/icons/profile.svg);	}
#navLinks #btnSettings::before 		{	background-image: url(../images/icons/settings.svg); }
#navLinks #btnAwaitingScans::before {	background-image: url(../images/icons/clock.svg); }
#navLinks #btnScanHistory::before 	{	background-image: url(../images/icons/calendar.svg); }
#navLinks #btnHideMenu::before 		{	background-image: url(../images/icons/menu-alt.svg); }
#navLinks #btnCompactView::before 	{	background-image: url(../images/icons/compact-view.svg); }
#app.compactView #navLinks #btnCompactView::before 	{	background-image: url(../images/icons/standard-view.svg); }
	
#navFooter {
	width: 100%;
	padding: 20px 30px;
}
#navFooter a {
	background: url(../images/c3-software-logo.svg) left center / 50px no-repeat;
	height: 50px;
	width: 90%;
	max-width: 165px;
	margin: 0 auto 10px;
	line-height: 1.2em;
	padding: 10px 0 0 60px;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	display: block;
	transition: 0.2s linear all;
}
#navFooter h3 {
	background: url(../images/wssc-nav-footer-logo.svg) center center / 100% no-repeat;
	width: 80%;
	max-width: 180px;
	height: 25px;
	text-indent: -9999px;
	margin: 0 auto 10px;
}

@media (max-width:767px)
{
	nav {
		width: 180px;
	}
	#navLinks a {
		padding: 0 10px;
		font-size: 13px;
		height: 45px;
		line-height: 45px;
	}
	#navLinks a::before {
		opacity: 0;
	}
	#navLinks .navSubMenu a {
		padding: 0 10px 0 20px;
	}
	#navFooter a {
		background-position: center top;
		padding: 60px 0 0;
		margin-bottom: 0;
		text-align: center;
		font-size: 12px;
		height: 100px;
	}
	#navUser {
		flex-flow: column nowrap;
	}
	#navUser p {
		text-align: center;
	}
	#navUser #userImage {
		margin: 0 auto 5px;
	}
}

@media (max-width: 640px)
{
	#app.navHide nav {
		opacity: 0;
		height: 0;
		transition: opacity 0.5s linear, height 0.25s linear;
		transform: none;
	}
	nav {
		width: 100vw;
		position: fixed;
		top: 135px;
		left: 0px;
		height: calc(100% - 140px);
		opacity: 1;
		transform: none;
		flex: 1;
		transition: opacity 0.25s linear, height 0.25s linear;
	}
	#app.mobileNav.topBarFixed.navHide	nav {
		top: 100px;
	}
	#navHomeLink {
		height: 0;
		overflow: hidden;
	}
	#navLinks a {
		padding: 0 10px 0 50px;
		font-size: 15px;
		height: 50px;
		line-height: 50px;
	}
	#navLinks a::before {
		opacity: 1;
	}
	#navLinks .navSubMenu a {
		padding: 0 10px 0 70px;
	}
	#navLinks ul.navSubMenu li:last-of-type {
		display: block;
	}
	#navLinks {
		order: 1;
	}
	#navUser {
		order: 2;
	}
	#navFooter {
		order: 3;
	}
}

/*------------------------------------------------------------------------- BASKET PROFILE  
*/
#topBar {
	position: sticky;
	top: 0;
	text-align: center;
	padding: 5px 10px;
	background: rgba(255,255,255,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.4);
	height: 60px;
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
	z-index: 999;
	transition: 0.2s linear all;
}
#app.navHide:not(.mobileNav) #topBar {
	background: rgba(255,255,255,0.2) url(../images/wssc-logo-square.svg) 10px center / auto 80% no-repeat;
}
#app.topBarFixed:not(.mobileNav) #topBar,
#app.topBarFixed.mobileNav.navHide #topBar {
	background-color: #c2ccd2;
	box-shadow: 0px 10px 0px -5px rgba(0,0,0,0.2);
}
#app.topBarFixed:not(.navHide) #topBar {
	left: 0;
}
#topBar .topBarBtn {
	display: flex;
	align-items: center;
	width: 140px;
	height: 40px;
	background: #fff 5px center / 30px no-repeat;
	transition: 0.2s linear all;
	color: #000;
    font-weight: 900;
    font-size: 14px;	
	text-align: left;
	padding: 2px 0 0 40px;
	letter-spacing: -0.05em;
	border-radius: 5px;
	border: 2px solid #000;
	margin: 0 5px;
	text-transform: lowercase;
	line-height: 0.9em;
}
#topBar .topBarBtn:first-of-type {
	margin-left: 0;
}
#topBar .topBarBtn:last-of-type {
	margin-right: 0;
}
#topBar .topBarBtn:hover {
	color: #fff;
	background-color: #73648e;
}
#topBar #btnBasket {
	background-image: url(../images/icons/basket.svg);
}
#topBar #btnTopUp {
	background-image: url(../images/icons/account.svg);
}
#topBar #btnMenu {
	background-image: url(../images/icons/cross-blue.svg);
	transform: translateY(-100px);
	background-size: 20px auto;
	opacity: 0;
	display: none;
}
#topBar #btnMenu:hover {
	background-image: url(../images/icons/cross.svg);
}

#topBar #btnScan {
	background-image: url(../images/icons/scan.svg);
}
#topBar #btnReportBuilder {
	background-image: url(../images/icons/reports.svg);
}
#topBar .item-count {
	display: block;
	position: relative;
	right: 10px;
}

#app.navHide #topBar #btnMenu,
#app.mobileNav #topBar #btnMenu {
	transform: translateY(0);
	opacity: 1;	
	display: grid;
}
#app.navHide #topBar #btnMenu {
	background-image: url(../images/icons/menu-alt.svg);	
	background-size: 30px auto;
}

@media (max-width: 640px)
{
	#topBar {
		background-color: #817192;
		height: 140px;
		padding: 70px 0 20px 0;
		box-shadow: 0px 10px 0px -5px rgba(0,0,0,0.2);
		border-bottom: 1px solid rgba(0,0,0,0.4);
		justify-content: center;
	}
	#app.mobileNav.navHide.topBarFixed #topBar {
		padding-top: 55px;
		height: 100px;
	}
	#topBar::before {
		content: '';
		position: absolute;
		display: block;
		left: 0;
		right: 0;
		top: 0;
		margin: 0 auto;
		background: url(../images/semi-circle.svg) center top / auto 90% no-repeat;
		width: 100%;
		height: 100%;
		opacity: 10%;
		pointer-events: none;
		z-index: 0;
	}
	#topBar::after {
		content: '';
		position: absolute;
		top: 20px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 90%;
		height: 50px;
		max-width: 280px;
		background: transparent url(../images/wssc-nav-footer-logo.svg) center top / 100% auto no-repeat;
		pointer-events: none;
		transition: 0.2s linear all;
	}
	#app.mobileNav.navHide.topBarFixed #topBar::after {
		background: url(../images/wssc-nav-header-logo.svg) center top / 65% auto no-repeat;
		height: 30px;
		top: 15px;
	}
	#topBar .topBarBtn {
		color: #fff;
		margin: 0 10px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 2px solid rgba(255,255,255,0.1);
		text-indent: -9999px;
		background-position: center center;
		background-color: transparent;
	} 
	#topBar .topBarBtn:hover {
		background-color: rgba(0,0,0,0.1);
		border-color: rgba(255,255,255,0.75);
		color: #fff;
	}
}

/* TopBar Balance Section */
.topBar-left {
	font-weight: bold;
	margin-left: 10px;
	font-size: 16px;
}

/* Button Container */
.topBar-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

@media (min-width: 640px) {
	/* Optional: Make sure #topBar has space-between layout */
	#topBar {
		justify-content: space-between;
	}
}

@media (max-width: 640px) {
	.topBar-left {
		display: none;
	}
}
/*------------------------------------------------------------------------- CARDS BREADCRUMB 
*/
#breadcrumb {
	padding: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	margin: 0 auto 10px;
	gap: 20px;
}
#breadcrumb form {
	flex: 0 1 auto;
	padding: 0 10px;
}
#breadcrumb #breadcrumbLinks {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;	
	align-items: center;
	flex: 1 0 auto;
}
#breadcrumb #breadcrumbLinks li {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;	
	margin: 0;
	padding: 0;
	position: relative;
}
#breadcrumb #breadcrumbLinks li a.breadcrumbLink {
	font-weight: bold;		
	font-size: 15px;
	color: #333;
	transition: 0.2s linear all;
	padding: 0 5px;
	line-height: 40px;
	border: 1px solid transparent;
	border-radius: 5px;
	padding: 0 10px;
	display: block;
}
	#breadcrumb #breadcrumbLinks li span.breadcrumbLink {
		font-weight: bold;
		font-size: 15px;
		color: #333;
		transition: 0.2s linear all;
		padding: 0 5px;
		line-height: 40px;
		border: 1px solid transparent;
		border-radius: 5px;
		padding: 0 10px;
		display: block;
	}
#breadcrumb #breadcrumbLinks li a.breadcrumbLink:hover {
	color: #000;
	background-color: rgba(129,113,146,0.2);
}
#breadcrumb #breadcrumbLinks li:first-of-type a.breadcrumbMenuBtn {
	background: url(../images/icons/dashboard.svg) center center / 16px no-repeat;
}
	#breadcrumb #breadcrumbLinks li span.breadcrumbMenuBtn {
		position: relative;
		width: 30px;
		height: 40px;
		position: relative;
		display: block;
		text-indent: -9999px;
		background: url(../images/arrow-right.svg) center center / 16px no-repeat;
		transition: 0.2s linear all;
		border-radius: 5px;
	}
#breadcrumb #breadcrumbLinks li a.breadcrumbMenuBtn {
	position: relative;
	width: 30px;
	height: 40px;
	position: relative;
	display: block;	
	text-indent: -9999px;
	background: url(../images/arrow-right.svg) center center / 16px no-repeat;
	transition: 0.2s linear all;
	border-radius: 5px;
}
#breadcrumb #breadcrumbLinks li a.breadcrumbMenuBtn:hover {
	background-color: rgba(129,113,146,0.4);
}
#breadcrumb #breadcrumbLinks li a.breadcrumbMenuBtn.active {
	border-radius: 5px 5px 0 0;
	background: #817192 url(../images/icons/close-blue.svg) center center / 16px no-repeat;
}
#breadcrumb #breadcrumbLinks li a.breadcrumbMenuBtn.active:hover {
	background-image: url(../images/icons/close.svg);
}
#breadcrumb .breadcrumbMenu {
	position: absolute;
	left: 0;
	top: 40px;
	background: #817192; 
	z-index: 99;
	list-style: none;
	margin: 0;
	padding: 0;
	opacity: 0;
	transition: 0.3s linear ease-out;
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);	
	box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
}
#breadcrumb .breadcrumbMenu.active {
	opacity: 1;
	clip-path: polygon(0 0, 110% 0, 110% 110%, 0% 110%);
}
#breadcrumb .breadcrumbMenu li {
	margin: 0;
	line-height: normal;
	position: relative;
}
#breadcrumb .breadcrumbMenu li {
	border-bottom: 1px solid rgba(0,0,0,0.4);
	border-top: 1px solid rgba(255,255,255,0.4);
}
#breadcrumb .breadcrumbMenu li a {
	padding: 0 20px;
	color: #f8f8f8;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -0.05em;
	display: block;
	width: 100%;
	transition: 0.2s linear all;
	height: 30px; 
	line-height: 30px;
	white-space: nowrap;
	overflow: hidden;
}
#breadcrumb .breadcrumbMenu li a:hover {
	background: #73648e;
}
#breadcrumb form {
	position: relative;
}
#sortCardsBy {
	border: 2px solid #333;
	width: 100%;
	height: 40px;
	border-radius: 5px;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: -0.05em;
	color: #333;
	padding: 0 30px 0 10px;
	-webkit-appearance: none;
	background: #fff url(../images/arrow-down.svg) 95% center / 16px no-repeat;
	transition: 0.2s linear all;
}
#sortCardsBy * {
	font-weight: normal;	
}
#sortCardsBy:hover {
	cursor: pointer;
	background-position: 95% 70%;
	border-color: #73648e;
}

@media (max-width: 767px)
{
	#breadcrumb {
		display: block;
		margin-bottom: 0;
	}
	#breadcrumb #breadcrumbLinks {
		flex-flow: column nowrap;
		align-items: flex-start;
		margin-bottom: 20px;
	}
	#breadcrumb #breadcrumbLinks li {
		width: 100%;
	}
	#breadcrumb #breadcrumbLinks li a.breadcrumbLink {
		line-height: 30px;
		flex: 1;
	}	
	#breadcrumb #breadcrumbLinks li a.breadcrumbMenuBtn {
		height: 30px;
		width: 20px;
		background-size: 12px auto;
	}
	#breadcrumb .breadcrumbMenu {
		top: 30px;
	}
}

/*------------------------------------------------------------------------- CARDS AREA 
*/
#cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(304px, 1fr)); /* Auto-fill with min/max range */
	gap: 10px;
	padding: 0;
	grid-auto-flow: dense;
	justify-content: center;
	margin-bottom: 40px;
}
#cards .card {
	width: 100%;
	max-width: 360px;
	min-width: 304px;
	margin: 0;
	border-radius: 10px;
	border: 2px solid rgba(0,0,0,0.3);
	background: #F9F9F9;
	position: relative;
	transition: 0.2s linear all;
	height: auto;
	display: flex;
	flex-flow: column nowrap;
}
#cards .card::after {
	content: '';
	width: 100%;
	height: 100%;
	border: 2px solid #e3e3e3;
	border-radius: 10px;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}
#cards .card .cardLink {
	display: block;
	width: 100%;
	height: calc(100% - 50px);
}
#cards .card:hover {
	border-color: #ff3dc0
}
#cards .cardImage {
	border-radius: 7.5px;
	overflow: hidden;
	width: calc(100% - 20px);
	height: 200px;
	margin: 10px auto;
}
#cards .cardImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
#cards .cardType {
	position: absolute;
	right: 10px;
	top: 10px;
	overflow: hidden;
	background: #fff url(../images/icons/card-root.svg) center center / 80% auto no-repeat;
	border: 2px solid #000;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	text-indent: -9999px;
	display: block;
}
#app.compactView #cards .cardType {
	width: 30px;
	height: 30px;
	right: 5px;
	top: 5px;
}
#cards .cardType.folder {
	background-image: url(../images/icons/folder.svg);
}
#cards .cardType.webpage {
	background-image: url(../images/icons/page.svg);
}
#cards .cardTitle {
	font-weight: 900;
	font-size: 15px;
	color: #1F1976;
	margin: 0;
	padding: 5px 10px;
	letter-spacing: -0.05em;
}

#cards .cardAlerts {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	padding: 10px 5px;
	align-items: stretch;
	gap: 5px;
}
#cards .cardAlert {
	border-radius: 5px;
	height: 36px;
	max-width: 175px;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	padding: 0 10px 0 35px;
	display: grid;
	align-items: center;
	flex: 1 0 auto;
}
#cards .cardAlert.issuesDetected  {
	background: #ff0000 url(../images/icons/error.svg) 5px center / 28px no-repeat;
}
#cards .cardAlert.scanDate  {
	background: #817192 url(../images/icons/calendar.svg) 5px center / 28px no-repeat;
}
#cards .cardAlert.noIssues {
	background: #6292c0 url(../images/icons/trophy.svg) 5px center / 28px no-repeat;
}
#cards .cardButtons {
	display: flex;
	flex-flow: row nowrap;
}
#cards .cardButtons a {
	display: block;
	transition: 0.2s linear all;
	overflow: hidden;
}
#cards .cardButtons .cardButtonOpen {
	background: #705492 url(../images/icons/explore.svg) 5px center / 30px no-repeat;
	height: 50px;
	border-radius: 0 0 0 8px;
	width: 80%;
	color: #fff;
	font-size: 14px;
	letter-spacing: -0.05em;
	line-height: 50px;
	padding-left: 40px;
}
#cards .cardButtons .cardButtonOpen strong {
	font-weight: 900;
}
#cards .cardButtons .cardButtonAdd {
	height: 50px;
	border-radius: 0 0 8px 0;
	width: 20%;
	background: #817192 url(../images/icons/add.svg) center center / 20px no-repeat;
	text-indent: -9999px;
}
#cards .cardButtons a.cardButtonAdd:hover {
	background-color: #333;
	background-size: auto 24px;
}
#cards .cardButtons a.cardButtonOpen:hover {
	background-color: #312540;
}
	/* Disabled state */
	#cards .cardButtons .cardButtonAdd.disabled {
		background: #ccc url(../images/icons/add.svg) center center / 20px no-repeat;
		cursor: not-allowed;
		opacity: 0.6;
	}

	/* Remove hover effect when disabled */
	#cards .cardButtons a.cardButtonAdd.disabled:hover {
		background: #ccc url(../images/icons/add.svg) center center / 20px no-repeat;
		background-size: 20px auto;
	}

@media (max-width: 540px)
{
	#cards {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
	#app:not(.compactView) #cards .card {
		min-width: 200px;
	}
}
@media (max-width: 480px)
{
	#cards {
		display: block
	}
	#cards .card {
		min-width: 100%;
		margin: 0 auto 10px;
	}
}


/*------------------------------------------------------------------------- CARDS AREA (COMPACT VIEW)
*/
#app.compactView #cards {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
#app.compactView #cards .card {
	max-width: 240px;
	min-width: 160px;
}
#app.compactView #cards .cardImage {
	display: none;
}
#app.compactView #cards .cardTitle {
	padding-top: 20px;
}

/*------------------------------------------------------------------------- CARDS AREA (VIDEO)
*/
#supportVideos {
	position: relative;
	width: 100%;
	overflow: auto;
	height: 310px;
	transition: height 0.2s linear, opacity 0.2s linear;
}
#cards.videos {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Auto-fill with min/max range */
	margin-bottom: 0;
}
#cards.videos .card.video {
	max-width: 300px;
	min-width: 300px;
	min-height: 290px;
	background-color: #6292c0;
	padding: 10px;
	margin-bottom: 10px;
}
#cards.videos .card.video a {
	display: block;
	width: 100%;
	height: 100%;
}
#cards.videos .card.video .videoImage {
	height: 160px;
	margin: 0 0 10px;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}
#cards.videos .card.video .videoImage img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: scale-down;
}
#cards.videos .card.video h4 {
	color: #fff;
	font-size: 17px;
	font-weight: 900;
	letter-spacing: -1px;
	margin: 0 0 15px;
}
#cards.videos .card.video .description {

}
#cards.videos .card.video .description > p {
	margin: 0;
	font-size: 14px;
	color: #fff;
	line-height: 1.1em;
}



/*------------------------------------------------------------------------- ADD NEW WEB SITE BUTTON
*/
.actionButton {
	position: relative;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}
.actionButton a {
	width: 100%;
	max-width: 300px;
	height: 75px;
	font-size: 20px;
	font-weight: 900;
	text-transform: lowercase;
	letter-spacing: -0.08em;
	line-height: 0.75em;
	transition: 0.2s linear all;
	display: block;
	margin: 0 auto;
	text-align: left;
	padding: 22px 0 0 20px;
	color: #333;
	position: relative;
}
.actionButton a:hover {
	color: #fff;
}

/*------------------------------------------------------------------------- ADD NEW WEB SITE BUTTON
*/
.addNewSite a {
	background: url(../images/add-new-web-site.svg) center center / 100% 100% no-repeat;
}
.addNewSite a:hover {
	background-image: url(../images/add-new-web-site-hover.svg);
}

/*------------------------------------------------------------------------- Create Scan Button
*/
.createScan a {
	background: url(../images/add-new-web-site.svg) center center / 100% 100% no-repeat;
}
.createScan a:hover {
	background-image: url(../images/add-new-web-site-hover.svg);
}


/*------------------------------------------------------------------------- WSSC TABLES
*/
.wssc-table {
	width: 100%;
	box-sizing: border-box;
	border-radius: 10px;
	background: #f9f9f9;
	margin: 20px auto;
	position: relative;
	box-shadow: 0px 0px 0px 2px #e3e3e3, 0px 0px 0px 3px rgba(0,0,0,0.3), 0px 15px 8px -12px rgba(0,0,0,0.4);
	overflow: hidden;
}
.wssc-table th {
	background:				#817192;
	color:					#fff;
	font-weight: bold;
	font-size: 14px !important;
	text-align:				left;
	padding:				10px;
	text-transform: uppercase;
	letter-spacing:			-0.05em;
}
.wssc-table th:not(:first-of-type) {
	border-left: 1px solid rgba(255,255,255,0.3);
}
.wssc-table thead tr:nth-of-type(2) th {
	background: #bdbbbf!important; 
	color:#fff;
}
.wssc-table tr {
	transition: background 0.2s linear, box-shadow 0.2s linear;
	position: relative;
}
.wssc-table tr:hover {
	box-shadow: 0px 0px 15px 0 rgba(0,0,0,0.15);
	background: rgba(255,255,255,1);
}
.wssc-table td {
	padding:				10px;
	border-left:			1px solid rgba(0,0,0,0.15);
	border-bottom:			1px solid #e3e3e3;
}
.wssc-table td.table-column-heading {
	background:				rgba(98,146,192,0.1);
	font-weight: bold;
	letter-spacing:			-0.05em;
	border-bottom-color:	#fff;
	width: 80%;
	transition:				all 0.2s linear;
	word-break: break-all;
}
.wssc-table tr:hover td.table-column-heading {
	color:					#523e6b;
}
.wssc-table td.table-column-button {
	width:					140px;
}
.wssc-table td.table-column-button button {
	width: 					120px;
	display: 				block;
    height: 				30px;
    background: 			#fff;
    transition: 			0.2s linear all;
    color: 					#000;
    font-weight: bold;
    font-size: 				14px;
    text-align: 			center;
    padding: 				0;
    letter-spacing: 		-0.05em;
    border-radius: 			7px;
    border: 				2px solid #000;
    margin: 				0;
    text-transform: 		lowercase;
    position: 				relative;
}
.wssc-table td.table-column-button button:hover {
	cursor:					pointer;
	color:					#fff;
	background:				#523e6b;
}

/*------------------------------------------------------------------------- WSSC FOLDING TABLES FOR MOBILE 
*/
@media (max-width: 767px)
{	
	.wssc-table, 
	.wssc-table thead, 
	.wssc-table tbody, 
	.wssc-table th, 
	.wssc-table td, 
	.wssc-table tr {
		display: block;
	}
	.wssc-table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.wssc-table td {
		padding: 10px 10px 10px 110px;
	}
	.wssc-table tbody td {
		border: 			none;
		border-bottom: 		1px solid #e3e3e3;
		position: 			relative;
		padding:			10px 10px 10px 110px;
		width:				auto !important;		
	}	
	.wssc-table tbody td::before {
		position: 			absolute;
		left:				0;
		top:				0;
		width: 				90px;
		height:				100%;
		white-space: 		nowrap;
		content: 			attr(data-label);
		background:			rgba(129,113,146,0.5);
		color:				#fff;
		display:			grid;
		align-items:		center;
		padding:			10px;
		font-weight: bold;
		letter-spacing:		-0.05em;
		font-size:			13px;
	}
	.wssc-table td.table-column-button {
		padding:			10px;  
		text-align:			center;
	}
	.wssc-table td.table-column-button::before {	
		display:			none;
	}	
	.wssc-table td.table-column-button button {
		margin: 			0 auto;
	}
	.wssc-table tfoot td {
		padding: 10px;
	}
}

/*------------------------------------------------------------------------- POP-UP DIALOG BOXES
*/
#popUps {
	display: 				grid;
	content:				'';
	position:				absolute;
	left:					0;
	right:					0;
	top:					0;
	bottom:					0;
	width:					100vw;
	height:					100vh;
	background:				rgba(0,0,0,0.4);
	opacity:				1;
	z-index:				9999;
	transition: 			opacity 0.3s linear, z-index 0s linear 0s;
	cursor: 				not-allowed;
}
#popUps.hide {
	opacity:				0;
	z-index:				0;
	transition: 			z-index 0s linear 0.3s, opacity 0.3s linear;
}
#popUps * {
	cursor: 				default;
}
#popUps a {
	cursor: 				pointer;
}
.modalPopUp {
	position:				relative;
	margin:					auto;
	border-radius:			10px;
	border:					2px solid #E3E3E3;
	background:				#fff;
	z-index:				99999;
	width:					calc(100% - 40px);
	padding:				20px;
	box-shadow: 			10px 10px 0px 0px rgba(0,0,0,0.1);
	overflow:				hidden;
	opacity:				1;
}
.modalPopUp.transparent
{
	background-color:transparent!important;
	border-radius:			unset;
	border:					unset;
	box-shadow: 			unset;
}
.modalPopUp.hide {
	opacity:				0;
	height:					0;
	overflow:				hidden;
	position:				absolute;
}
.modalPopUp a.popUpClose {
	width:					40px;
	height:					40px;
	background:				transparent url(../images/close-dialog.svg) center center / 100% no-repeat;
	text-indent:			-9999px;
	position:				absolute;
	top:					0;
	right:					-10px;
	transition:				0.2s linear all;
}
.modalPopUp a.popUpClose:hover {
	filter: 				invert(42%) sepia(28%) saturate(465%) hue-rotate(220deg) brightness(92%) contrast(92%);
	transform: 				rotate(-90deg);
}
.modalPopUp h1.logo {
	text-indent:			-9999px;
	max-width:				280px;
	width:					100%;
	height:					40px;
	background:				url(../images/wssc-nav-header-logo.svg) left top / 100% no-repeat;
	margin:					10px 0 0;
}
.modalPopUp h2 {
	color:					#1f1976;
	font-size:				40px;
	font-weight: 900;
	margin:					0 0 20px;
	letter-spacing:			-0.1em;
}
.modalPopUp h3 {
	font-size:				18px;
	font-weight: bold;
	color:					#333;
	margin:					0 0 20px;
	letter-spacing:			-0.05em;
	line-height:			1.2em;
}
.modalPopUp p {
	font-size:				16px;
	color:					#333;
}
.modalPopUp ul.buttonSet {
	list-style:				none;
	padding:				0;
	margin:					10px 0 20px;
}
.modalPopUp ul.buttonSet li {
	margin:					15px 0;
}
.modalPopUp .modalButton {
	display:				grid;
	align-items:			center;
	max-width:				270px;
	height:					40px;
	background:				#fff 5px center / 30px no-repeat;
	transition:				0.2s linear all;
	color: 					#000;
    font-weight: 900;
    font-size: 				16px;	
	text-align:				left;
	padding:				0 0 0 30px;
	letter-spacing:			-0.1em;
	border-radius:			10px;
	border:					2px solid #000;
	margin:					0 5px;
	text-transform:			lowercase;
	position:				relative;
}
.modalPopUp .modalButton::before {
	content:				'';
	width:					50px;
	height:					50px;
	display:				block;
	position:				absolute;
	left:					-20px;
	top:					-10px;
	background:				transparent center center / 100% auto no-repeat;
}
.modalPopUp .modalButton:hover {
	background:				#523e6b;
	color:					#fff;
}

/*------------------------------------------------------------------------- START-UP WELCOME MODAL
*/
.welcomePopUp {
	max-width: 800px;
	width: calc(100% - 40px) !important;
	background: #fff url(../images/pop-up-bg-circle.svg) -40% center / 50% auto no-repeat;
	padding-left: 0;
}
.welcomePopUp .row {
	padding: 0;
	flex-flow: row nowrap;
}
.welcomePopUp .column:first-of-type {
	background:				url(../images/super-wssc-welcome.svg) right 20px center / auto 260px no-repeat;
	flex: 					1 1 40%;
}
.welcomePopUp .column {
	display:				flex;
	flex-flow: 				column nowrap;
	justify-content: 		center;
	flex: 					1 1 60%;
	padding:				40px 20px 40px 0;
}
.welcomePopUp #startAddSite::before {
	background-image:		url(../images/icons/add-website.svg);
	width:					60px;
	left:					-30px;
	top:					-5px;
}
.welcomePopUp #startScan::before {
	background-image:		url(../images/icons/scan.svg);
}
.welcomePopUp #startReports::before {
	background-image:		url(../images/icons/reports.svg);
}
.welcomePopUp #startHelpVideo::before {
	background-image:		url(../images/icons/video.svg);
}
.welcomePopUp h3 {
	max-width: 				280px;
}
.welcomePopUp h2 {
	font-size:				60px;
}

@media (max-width: 767px)
{

}

@media (max-width: 480px)
{
	.welcomePopUp {
		padding-left: 20px;
	}
	.welcomePopUp h1 {
		max-width: 			calc(100% - 80px);
	}
	.welcomePopUp .column:first-of-type {
		display:			none;
	}
	.welcomePopUp .column {
		padding: 			30px 0 30px 30px;
	}
}

/*------------------------------------------------------------------------- ADD ITEM MODAL
*/
#addItemPopUp ul.buttonSet {
	display:				flex;
	flex-flow:				row nowrap;
	gap:					10px;
	justify-content:		center;
	align-items:			center;
	margin:					0;
}
#addItemPopUp ul.buttonSet li.two {
	flex:					1 0 50%;
}
	#addItemPopUp ul.buttonSet li.three {
		flex: 1 0 33%;
	}
	#addItemPopUp ul.buttonSet li.four {
		flex: 1 0 25%;
	}


#addItemPopUp ul.buttonSet li a {
	width:					100%;
	text-transform:			none;
}
#addItemPopUp #buttonNo::before {
	background-image:		url(../images/icons/close.svg);
}
#addItemPopUp #buttonYes::before {
	background-image:		url(../images/icons/tick.svg);
}
#addItemPopUp #buttonExplore::before {
	background-image: url(../images/icons/explore.svg);
}
#addItemPopUp .modalButton {
	padding-left:			50px;
	font-size:				20px;
}
#addItemPopUp .modalButton::before {
	content:				'';
	width:					30px;
	height:					30px;
	display:				block;
	position:				absolute;
	left:					5px;
	top:					3px;
	background:				transparent center center / 100% auto no-repeat;
}




/* Page analysis */
div.page table {
	width: 100%;
	page-break-inside: avoid;
	margin: 0 0 10px;
	border-radius: 3px;
	border-bottom: 1px solid #eee;
}

	div.page table tr:first-child td:first-child {
		border-top-left-radius: 3px;
	}

div.page table td:first-of-type {
	background: #a595a0 no-repeat calc(100% - 5px) center / 16px;
	color: #fff;
	font-weight: 900;
	width: 25%;
	border-bottom: 1px solid #fff;
	text-transform: uppercase;
	font-size: 12pt;
	vertical-align: middle;
}

div.page table td {
	padding: 8px 10px;
	border-bottom: 1px solid #eee;
	background: #fafafa;
	font-size: 12pt;
	line-height: 1.2em;
}


/* Instructions */

@keyframes bounceWithRotation {
	0%, 20%, 50%, 80%, 100% {
		transform: rotate(var(--rotate-angle)) translateY(0);
	}

	40% {
		transform: rotate(var(--rotate-angle)) translateY(-15px);
	}

	60% {
		transform: rotate(var(--rotate-angle)) translateY(-10px);
	}
}

/*.instruction-container {
	position:absolute;
}

	.instruction-container img.arrow {
		width: 50px;
		height: 50px;
		border: none;
		vertical-align: top;
		--rotate-angle: 0deg;*/ /* Default rotation */
		/*animation: bounceWithRotation 2s ease-in-out infinite;
		animation-delay: 3s;*/ /* Start after a short delay */
	/*}
		.instruction-container img.arrow:hover {
			animation: none;*/ /* Stop animation on hover */
		/*}*/

		/* Optional specific direction classes */
		/*.instruction-container img.arrow.left {
			--rotate-angle: 270deg;
		}

		.instruction-container img.arrow.up {
			--rotate-angle: 0deg;
		}

		.instruction-container img.arrow.right {
			--rotate-angle: 90deg;
		}

		.instruction-container img.arrow.down {
			--rotate-angle: 180deg;
		}
			

.instruction-content {
	position: relative;
	margin: auto;
	border-radius: 10px;
	border: 2px solid #E3E3E3;
	background: #fff;
	z-index: 99999;
	padding: 20px;
	box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	opacity: 1;
	display:inline-block;
}

.instruction-navigation button {
	margin: 5px;
}*/

/* driverjs formatting */
/*.driver-popover {
	position: absolute !important;
	inset: unset !important;
}
.driver-popover span {
	font-size: 12px;
	line-height: 12px;
}
*/

/*------------------------------------------------------------------------- PAGE TITLES
*/
h1.wssc {
	color: #1f1976;
	font-size: 32px;
	font-weight: 900;
	margin: 0 0 20px;
	letter-spacing: -0.1em;
}
h2.wssc {
	color: #1f1976;
	font-size: 24px;
	font-weight: 900;
	margin: 0 0 20px;
	letter-spacing: -0.1em;
}
h3.wssc {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	margin: 0 0 20px;
	letter-spacing: -0.05em;
	line-height: 1.2em;
}
h1.title-icon.wssc {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	margin-top: -10px;
}
.title-icon::before {
	content: '';
	display: block;
	width: 63px;
	height: 75px;
	/*width: 134px;
	height: 160px;*/
	position: relative;
	background: transparent center center / 100% no-repeat;
}
.title-icon.basket::before {
	background-image: url(../images/basket.svg);
}
.title-icon.scan-history::before {
	background-image: url(../images/scan-history.svg);
}
.title-icon.scan-queue::before {
	background-image: url(../images/scan-queue.svg);
}
.title-icon.settings::before {
	background-image: url(../images/settings.svg);
}
.title-icon.support::before {
	background-image: url(../images/support.svg);
}
.title-icon.reports::before {
	background-image: url(../images/reports.svg);
}
.title-icon.report-builder::before {
	background-image: url(../images/report-builder.svg);
}
.title-icon.profile::before {
	background-image: url(../images/profile.svg);
}
.title-icon.billing::before {
	background-image: url(../images/billing.svg);
}
.title-icon.pageanalysis::before {
	background-image: url(../images/scanned-page-analysis.svg);
}
@media (max-width: 640px)
{
	h1.title-icon.wssc {
		margin-top: 0;
	}
}
@media (max-width: 480px)
{
	h1.title-icon.wssc {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		gap: 0;
	}
}
/*------------------------------------------------------------------------- MESSAGE BOX
*/
.messageBox {
	position: relative;
	background: #fff 15px 15px / 40px no-repeat;
	border-radius: 10px;
	padding: 20px 20px 20px 70px;
	border: 2px solid rgba(0,0,0,0.3);
	box-shadow: 0px 15px 2px -10px rgba(0,0,0,0.1);
}
.messageBox.stop {
	background-image: url(../images/icons/stop-sign.svg);
}
.messageBox.wait {
	background-image: url(../images/icons/sand-timer.svg);
}
.messageBox.no-entry {
	background-image: url(../images/icons/no-entry.svg);
}
.messageBox p {
	font-size: 15px;
	margin: 0;
}
.messageBox h2 {
	font-size: 24px;
	margin: 0 0 10px;
}

@media (max-width: 480px) 
{
	.messageBox {
		padding: 20px;
		background-image: none !important;
	}
}

/*------------------------------------------------------------------------- BASKET PAGE
*/
.fieldset {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	padding: 10px;
	width: 100%;
	position: relative;
}
.fieldset input {
	flex: 1;
}
.fieldset button {
	flex: 0 0 80px;
}
.fieldset .rz-messages-error {
	background-color: #990000;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	top: -25px;
}
.fieldset .rz-messages-error::after {
	content: '';
	display: block;
	position: absolute;
	left: calc(50% - 5px);
	bottom: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 5px 0 5px;
	border-color: #990000 transparent transparent transparent;
}

@media (max-width: 800px)
{
	.fieldset input {
		flex: 1 0 100%;
		margin-bottom: 10px;
	}
}
}

/* preloader effect*/
.shimmer {
	width: 100%;
	height: 20px;
	background: linear-gradient(to right, #e0e0e0 10%, #c0c0c0 20%, #e0e0e0 30%);
	background-size: 300% 100%;
	animation: shimmer 2s infinite linear;
	border-radius: 4px;
	opacity: 0.5;
}

@keyframes shimmer {
	0% {
		background-position: -100% 0;
	}

	100% {
		background-position: 100% 0;
	}
}
/* end preloader effect*/