/******Icons*******/
@font-face {
	font-family: 'rix';
	src:  url('assets/icons/rix.eot?nzem3l');
	src:  url('assets/icons/rix.eot?nzem3l#iefix') format('embedded-opentype'),
	  url('assets/icons/rix.ttf?nzem3l') format('truetype'),
	  url('assets/icons/rix.woff?nzem3l') format('woff'),
	  url('assets/icons/rix.svg?nzem3l#rix') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
  }

i {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'rix' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
  .icon-q2:before {
	content: "\e930";
	color: #fff;
  }
  .icon-key:before {
	content: "\e931";
	color: #fff;
  }
  .icon-Eye:before {
	content: "\e900";
  }
  .icon-Eyeslash:before {
	content: "\e901";
  }
  .icon-Folder:before {
	content: "\e902";
  }
  .icon-Gallery:before {
	content: "\e903";
  }
  .icon-Group:before {
	content: "\e904";
  }
  .icon-Home:before {
	content: "\e905";
  }
  .icon-Link:before {
	content: "\e906";
  }
  .icon-Link2:before {
	content: "\e907";
  }
  .icon-Link3:before {
	content: "\e908";
  }
  .icon-Login:before {
	content: "\e909";
  }
  .icon-Login2:before {
	content: "\e90a";
  }
  .icon-Mark:before {
	content: "\e90b";
  }
  .icon-Note:before {
	content: "\e90c";
  }
  .icon-Note2:before {
	content: "\e90d";
  }
  .icon-Note3:before {
	content: "\e90e";
  }
  .icon-Pen:before {
	content: "\e90f";
  }
  .icon-Pin:before {
	content: "\e910";
  }
  .icon-Question:before {
	content: "\e911";
  }
  .icon-Scan:before {
	content: "\e912";
  }
  .icon-Search:before {
	content: "\e913";
  }
  .icon-Select:before {
	content: "\e914";
  }
  .icon-Size:before {
	content: "\e915";
  }
  .icon-Spark:before {
	content: "\e916";
  }
  .icon-Surprise:before {
	content: "\e917";
  }
  .icon-Taj:before {
	content: "\e918";
  }
  .icon-Trash:before {
	content: "\e919";
  }
  .icon-Unlink:before {
	content: "\e91a";
  }
  .icon-Upload:before {
	content: "\e91b";
  }
  .icon-User:before {
	content: "\e91c";
  }
  .icon-Zoom:before {
	content: "\e91d";
  }
  .icon-Adduser:before {
	content: "\e91e";
  }
  .icon-Back:before {
	content: "\e91f";
  }
  .icon-Bookmark:before {
	content: "\e920";
  }
  .icon-Bookmark2:before {
	content: "\e921";
  }
  .icon-Calender:before {
	content: "\e922";
  }
  .icon-Camera:before {
	content: "\e923";
  }
  .icon-Chart:before {
	content: "\e924";
  }
  .icon-Check:before {
	content: "\e925";
  }
  .icon-Check2:before {
	content: "\e926";
  }
  .icon-Close:before {
	content: "\e927";
  }
  .icon-Close2:before {
	content: "\e928";
  }
  .icon-Close3:before {
	content: "\e929";
  }
  .icon-Copy:before {
	content: "\e92a";
  }
  .icon-Copyright:before {
	content: "\e92b";
  }
  .icon-Direction:before {
	content: "\e92c";
  }
  .icon-Direction2:before {
	content: "\e92d";
  }
  .icon-Direction3:before {
	content: "\e92e";
  }
  .icon-Download:before {
	content: "\e92f";
  }
/*********Fonts**********/
@font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Extralight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Extrabold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: 'Aber Mono'; src: url('assets/fonts/Aber-Mono-Light.woff2') format('woff2'), url('assets/fonts/Aber-Mono-Light.woff') format('woff'), url('assets/fonts/Aber-Mono-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aber Mono'; src: url('assets/fonts/Aber-Mono-Regular.woff2') format('woff2'), url('assets/fonts/Aber-Mono-Regular.woff') format('woff'), url('assets/fonts/Aber-Mono-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aber Mono'; src: url('assets/fonts/Aber-Mono-Bold.woff2') format('woff2'),  url('assets/fonts/Aber-Mono-Bold.woff') format('woff'),  url('assets/fonts/Aber-Mono-Bold.otf') format('opentype');    font-weight: 700; font-style: normal; font-display: swap; }

:root{
	--base-color: #C5FF4A;
	--base-color2: #85DB67;
	--Neutral-neutral-100: #BEBEC1;
	--Neutral-neutral-50: #EAEAEB;
	--Neutral-neutral-300: #737379;
	--Neutral-neutral-600: #2A2A32;
	--Neutral-neutral-800: #19191E;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
	transition: all .3s;
}
a:hover{
	color:var(--base-color);
}
p,h1,h2,h3,h4,h5,h6{margin: 0;padding: 0;}
html, body {
	font-family: 'Switzer';
    background: #131317 !important;
	font-weight: 400;
	direction: ltr;
	text-align: left;
	background: var(--bg-color);
	max-width: 100vw;
}
.main-btn {
	color: var(--Neutral-neutral-900, #131317);
	text-align: center;
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	background: #fff !important;
	border: none;
	width: 100%;
	display: block;
	padding: 12px 24px;
	transition: all .3s;
}
.main-btn:hover {
	background: #BEBEC1 !important;
	color: #000 !important;
}

.panel-btn {
	display: flex;
	height: 32px;
	padding: 4px 12px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: linear-gradient(180deg, #242426 0%, #202022 100%);
	box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.20);
	color: var(--White-Light, #FFF);
	text-align: center;
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	cursor: pointer;
}
.panel-btn:hover {
	color: #000;
	background: var(--base-color);
}
.panel-btn:hover i,.panel-btn:hover i::before{
	color: #000 !important;
}
.panel-btn i {
	font-size: 17px;
	vertical-align: middle;
}

/*Global Styles*/
.custom-table {
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;
  }
  
  .custom-table caption {
	font-size: 1.5em;
	margin: .5em 0 .75em;
  }
  .custom-table th,
  .custom-table td {
	padding: .625em;
	text-align: center;
  }
  
  .custom-table th {
	font-size: 14px;
	letter-spacing: .1em;
}

.custom-table {
	border: 1px solid #ccc;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;
	color: var(--White-Light, #FFF);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	border-radius: 8px;
	border: 1px solid var(--Neutral-neutral-700, #212127);
}
thead tr th {
	border-bottom: 1px solid var(--Neutral-neutral-700, #212127);
	background: var(--Neutral-neutral-800, #19191E);
	color: var(--Neutral-neutral-300, #737379);
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.28px;
	padding: 13px 20px !important;
}
td {
	padding: 13px 20px !important;
	border: none !important;
}
.rix-devider-dashed {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-weight: 500;
	align-items: center;
	width: 100%;
	color: var(--Neutral-neutral-50, #EAEAEB);
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
.rix-devider-dashed > div {
	width: 100%;
	height: 0px;
	border: 1px solid #2A2A32;
	flex: 1;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.xai-tab-btn { margin: 5px; padding: 5px 10px; }
.xai-tab-content { display: none; }
.xai-tab-content.xai-active { display: block; }
.xai-item { display: none; }
.xai-item.xai-show { display: block; }
/*---------------Start iktooltip style--------------------*/
[iktooltip] {
	position: relative;
	}
	[iktooltip]::before,
	[iktooltip]::after {
	text-transform: none;
	font-size: .9em;
	line-height: 1;
	user-select: none;
	pointer-events: none;
	position: absolute;
	display: none;
	opacity: 0;
	}
	[iktooltip]::before {
	content: '';
	border: 5px solid transparent;
	z-index: 1001;
	}
	[iktooltip]::after {
		content: attr(iktooltip);
		min-width: 20em;
		max-width: 25em;
		/* white-space: nowrap; */
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 1ch 1.5ch;
		border-radius: 0;
		box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
		background: #333;
		color: #fff;
		z-index: 1000;
		color: var(--Neutrals-8, #FCFCFD) !important;
		text-align: center !important;
		font-family: Switzer !important;
		font-size: 12px !important;
		font-style: normal !important;
		font-weight: 400 !important;
		line-height: 20px !important;
		background: var(--Neutrals-1, #141416) !important;
		letter-spacing: 0 !important;
	}
	
	[iktooltip]:hover::before,
	[iktooltip]:hover::after {
	display: block;
	}
	
	/* don't show empty iktooltips */
	[iktooltip='']::before,
	[iktooltip='']::after {
	display: none !important;
	}
	
	/* FLOW: UP */
	[iktooltip]:not([flow])::before,
	[iktooltip][flow^="up"]::before {
	bottom: 100%;
	border-bottom-width: 0;
	border-top-color: #141416;
	}
	[iktooltip]:not([flow])::after,
	[iktooltip][flow^="up"]::after {
	bottom: calc(100% + 5px);
	}
	[iktooltip]:not([flow])::before,
	[iktooltip]:not([flow])::after,
	[iktooltip][flow^="up"]::before,
	[iktooltip][flow^="up"]::after {
	left: 50%;
	transform: translate(-50%, -.5em);
	}
	
	/* FLOW: DOWN */
	[iktooltip][flow^="down"]::before {
	top: 100%;
	border-top-width: 0;
	border-bottom-color: #141416;
	}
	[iktooltip][flow^="down"]::after {
	top: calc(100% + 5px);
	}
	[iktooltip][flow^="down"]::before,
	[iktooltip][flow^="down"]::after {
	left: 50%;
	transform: translate(-50%, .5em);
	}
	
	/* FLOW: LEFT */
	[iktooltip][flow^="left"]::before {
	top: 50%;
	border-right-width: 0;
	border-left-color: #141416;
	left: calc(0em - 5px);
	transform: translate(-.5em, -50%);
	}
	[iktooltip][flow^="left"]::after {
	top: 50%;
	right: calc(100% + 5px);
	transform: translate(-.5em, -50%);
	}
	
	/* FLOW: RIGHT */
	[iktooltip][flow^="right"]::before {
	top: 50%;
	border-left-width: 0;
	border-right-color: #141416;
	right: calc(0em - 5px);
	transform: translate(.5em, -50%);
	}
	[iktooltip][flow^="right"]::after {
	top: 50%;
	left: calc(100% + 5px);
	transform: translate(.5em, -50%);
	}
	
	@keyframes iktooltips-vert {
	to {
	opacity: .9;
	transform: translate(-50%, 0);
	}
	}
	@keyframes iktooltips-horz {
	to {
	opacity: .9;
	transform: translate(0, -50%);
	}
	}
	[iktooltip]:not([flow]):hover::before,
	[iktooltip]:not([flow]):hover::after,
	[iktooltip][flow^="up"]:hover::before,
	[iktooltip][flow^="up"]:hover::after,
	[iktooltip][flow^="down"]:hover::before,
	[iktooltip][flow^="down"]:hover::after {
	animation: iktooltips-vert 300ms ease-out forwards;
	}
	[iktooltip][flow^="left"]:hover::before,
	[iktooltip][flow^="left"]:hover::after,
	[iktooltip][flow^="right"]:hover::before,
	[iktooltip][flow^="right"]:hover::after {
	animation: iktooltips-horz 300ms ease-out forwards;
	}
	
	/*---------------New Tooltip Inner Content Support (All Directions)--------------------*/

[iktooltip] .ik-tooltip-content {
	display: none;
	position: absolute;
	min-width: 20em;
	max-width: 25em;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 1ch 1.5ch;
	border-radius: 0;
	box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
	background: var(--Neutrals-1, #141416) !important;
	color: var(--Neutrals-8, #FCFCFD) !important;
	text-align: center !important;
	font-family: Switzer !important;
	font-size: 12px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 20px !important;
	letter-spacing: 0 !important;
	white-space: normal;
	z-index: 1000;
  }
    [iktooltip]:not([flow]) .ik-tooltip-content,
  [iktooltip][flow^="up"] .ik-tooltip-content {
	bottom: calc(100% + 5px);
	left: 50%;
	transform: translate(-50%, -.5em);
  }
  
  [iktooltip][flow^="down"] .ik-tooltip-content {
	top: calc(100% + 5px);
	left: 50%;
	transform: translate(-50%, .5em);
  }
  
  [iktooltip][flow^="left"] .ik-tooltip-content {
	top: 50%;
	right: calc(100% + 5px);
	transform: translate(-.5em, -50%);
	text-align: left;
  }
  
  [iktooltip][flow^="right"] .ik-tooltip-content {
	top: 50%;
	left: calc(100% + 5px);
	transform: translate(.5em, -50%);
	text-align: left;
  }
  
  [iktooltip]:hover .ik-tooltip-content {
	display: block;
	animation: iktooltips-vert 300ms ease-out forwards;
	opacity: .9;
  }
  
  .ik-highlight {
	color: var(--base-color);
	font-weight: 600;
	white-space: nowrap;
  }
  
	/*---------------End iktooltip style--------------------*/
	.ikmodal {
            visibility: hidden;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.5);
            opacity: 0;
            transition: opacity 0.5s ease, visibility 0s 0.5s; 
        }
.ikmodal-content {
	background-color: #fff;
	margin: 15% auto;
	max-width: 500px;
	text-align: left;
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.5s ease, transform 0.5s ease;
	border: 1px solid var(--Neutral-neutral-700, #212127);
	background: var(--Neutral-neutral-900, #131317);
	display: flex;
	/* width: 500px; */
	padding: 24px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 48px;
	width: 90%;
}
        .ikmodal-close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .ikmodal-close:hover,
        .ikmodal-close:focus {
            color: #000;
            text-decoration: none;
        }
        .ikmodal.show {
            visibility: visible;
            opacity: 1;
            transition: opacity 0.5s ease;
        }
        .ikmodal-content.show {
            opacity: 1;
            transform: scale(1);
        }
		.ikmodal-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			color: var(--White-Light, #FFF);
			font-family: Switzer;
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: 150%;
			letter-spacing: -0.36px;
		}
		.ikmodal-title h3 {
			font-size: 18px;
		}
		.ikmodal-inner {
			width: 100%;
			text-align: left;
		}


		select {
			color: var(--Neutral-neutral-400, #58585F);
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			letter-spacing: -0.28px;
			background: none;
			border: none;
			width: 100%;
			display: block;
		}


.form-input-container select option:checked {
    background-color: var(--base-color);
    color: #000;
}

.form-input-container select option:hover {
    background-color: var(--base-color2);
}
/*login page style*/
.LoginPage {
	background: url('assets/images/bg-login.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 100vh;
	width: 100%;
}
.login-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	width: 100% !important;
	justify-content: center;
}
.login-box {
	display: flex;
	flex-direction: column;
	background: rgba(0, 0, 0, 0.60);
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(17px);
	justify-content: center;
	align-items: center;
	min-height: 40vh;
	width: 100%;
	padding: 80px;
}
.login-box-top {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-bottom: 30px;
}
.login-box-top img {
	margin-bottom: 25px;
}
.login-box-top p {
	color: var(--Neutral-neutral-100, #BEBEC1);
	text-align: center;
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.28px;
}
.login-box-top h2 {
	color: var(--Neutral-neutral-50, #EAEAEB);
	font-family: "Aber Mono";
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
	letter-spacing: -0.96px;
	text-transform: uppercase;
}
.login-box-top h2 b {
	color: var(--base-color);
}
.form-input-container {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	margin-bottom: 12px;
	position: relative;
}
.login-container form {
	width: 100%;
}
.form-input-container > div input {
	width: 100%;
}
.form-input-container > div {
	border: 1px solid var(--Neutral-neutral-600, #2A2A32);
	background: var(--Neutral-neutral-800, #19191E);
	width: 100%;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.form-input-container > div input {
	background: none;
	border: none;
	color: var(--White-Light, #FFF);
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	outline: none;
}
.form-input-container i {
	color: #fff;
}
.toggle-password {
	position: absolute;
	bottom: 14px;
	right: 14px;
	font-size: 16px;
	color: #A1A1A3 !important;
	cursor: pointer;
}
.form-input-container > label {
	color: var(--Neutral-neutral-300, #737379);
	font-family: 'Switzer';
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
}
.form-check-label {
	color: var(--Neutral-neutral-300, #737379);
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	cursor: pointer;
}
.form-check-input {
	--bs-form-check-bg: none !important;
	margin-top: 6px;
	border: var(--bs-border-width) solid #fff;
	margin-right: 5px;
	cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--base-color2) !important;
    border-color: var(--base-color2) !important;
}
.Forgot-password-label {
	color: var(--White-Light, #FFF);
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	line-height: 24px;
}
.login-btn {
	margin: 18px auto;
	background: #C5FF4A !important;
}
.login-btn:hover {
	background: #85DB67 !important;
}
.Back-btn{
	background: none !important;color: #fff ;border: 1px solid #fff;
}
.login-box-other-login {
	display: flex;
	gap: 20px;
	width: 100%;
	margin: 18px auto;
}
.login-box-bottom > p {
	color: var(--Neutral-neutral-300, #737379);
	text-align: center;
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin: 20px auto;
}
.login-box-bottom > p > a {
	color: #fff;
	cursor: pointer;
}
.login-box-bottom > div{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.login-box-bottom > div > p {
	color: var(--Neutral-neutral-300, #737379);
	text-align: center;
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
.login-box-bottom > div > p a {
	color: var(--Neutral-neutral-300, #737379);
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.28px;
}
.login-box-bottom {
	width: 100%;
}
.login-box-bottom a {
	transition: all .3s;
}
.login-box-bottom a:hover {
	color:var(--base-color);
}
.btn-social svg {
	vertical-align: text-bottom;
	margin-right: 4px;
}
.login-message{
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.12px;
	margin-top: -7px;
}
.login-message-error {
	color: var(--Error-error-500, #BC1828);
}
.input-error {
	border: 1px solid #BC1828 !important;
}
.help {
	margin-left: 2px;
	cursor: pointer;
	vertical-align: text-bottom;
}
/***Panel***/
.Panel {
	background: #131317 !important;
	width: 100%;
	display: flex;
	min-height: 100vh;
}
.panel-left {
	width: 280px;
	height: 100vh;
	padding: 24px;
	border-right: 1px solid #19191E;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: all .3s;
	position: fixed;
	left: 0;
	background: #131317 !important;
}

.sidebar-user-info {
	display: flex;
	align-items: center;
	gap: 12px;
}
.sidebar-user-info img {
	width: 38px;
	height: 38px;
	border-radius: 100%;
}
.sidebar-user-info p {
	color: var(--White-Light, #FFF);
	font-family: "Switzer";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.32px;
}
.sidebar-user-info span {
	color: var(--Neutral-neutral-200, #9F9FA3);
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.12px;
}
.sidebar-user-info > div {
	display: flex;
	flex-direction: column;
}
.sidebar-menu {
	padding: 0;
	margin-top: 32px;
}
.sidebar-menu a {
	padding: 4px 12px;
	color: var(--Neutral-neutral-200, #9F9FA3);
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	width: 100%;
	height: 38px !important;
	display: block;
	line-height: 32px !important;
}
.sidebar-menu a i {
	font-size: 16px;
	margin-right: 8px;
}
.sidebar-menu li.active a {
	background: var(--base-color);
	box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.20);
	color: var(--Neutral-neutral-900, #131317);
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	color: #000 !important;
}
.sidebar-menu li:hover a {
	color: var(--base-color);
}
.sidebar-menu a svg {
	height: 20px;
	width: 20px;
	font-size: ;
	margin-right: 8px;
	vertical-align: middle;
}

.sidebar-menu a svg path {
	stroke:#9F9FA3;
}
.sidebar-menu li:hover a svg path{
	stroke: var(--base-color);
}
.sidebar-menu li.active a svg path{
 stroke:#000;
}

.scan-container {
	border: 1.5px solid rgba(255, 255, 255, 0.09);
	background: #1E1E23;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
	padding: 16px;
}
.scan-header {
	margin-bottom: 12px;
	color: var(--White-Light, #FFF);
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.scan-header span {
	color: var(--White-Light, #FFF);
	text-align: center;
	font-family: "Switzer";
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
}
.scan-progress {
	margin-bottom: 8px;
}
.scan-count {
	margin-bottom: 8px;
	color: var(--Neutral-neutral-200, #9F9FA3);
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
.scan-count span {
	color: var(--White-Light, #FFF);
	text-align: center;
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
.progress-bar {
	height: 8px;
	background-color: #D9D9D9;
	border-radius: 50px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	width: 50%;
	background-color: #4CAF50;
	border-radius: 3px;
}
.upgrade-btn {
	width: 100%;
	background: var(--Neutral-neutral-900, #131317);
	color: var(--White-Light, #FFF);
	text-align: center;
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	padding: 10px 15px;
	border: 1px solid #B4B4B430;
	background: var(--Neutral-neutral-900, #131317);
	border-bottom: none;
	transition: all .3s;
	margin-top: 12px;
}
.upgrade-btn i {
	font-size: 20px;
	vertical-align: middle;
}

.upgrade-btn:hover {
	background-color:var(--base-color);
	color: #000;
}
.fill-green{background: linear-gradient(to right, #38592F, #578847);}
.fill-red{background: var(--Error-error-500, #BC1828);}


.panel-top {
	display: flex;
	width: 100%;
	padding: 20px 25px;
	justify-content: space-between;
	align-items: center;
	gap: 9px;
	border-bottom: 1px solid var(--Neutral-neutral-800, #19191E);
	border-left: 1px solid var(--Neutral-neutral-800, #19191E);
	background: var(--Neutral-neutral-900, #131317);
}
.panel-right {
	width: 100%;
	padding-left: 280px;
}
.panel-top-right {
	display: flex;
	gap: 12px;
}
.menu-toggle ,.close-mobile-menu {
	display: none !important;
}
.empty-state {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(100vh - 78px);
}

.panel-content {
	padding: 24px 14px;
}
.image-item {
	position: relative;
	overflow: hidden;
	transition: all .1s;
	margin-bottom: 16px;
}
.image-item figure {
	margin: 0;
	width: 100%;
	height: 100%;
}
.image-item figure img {
	width: 100%;
}
.upload-progress {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 70%;
	/* background: #fff; */
	padding: 14px;
	min-height: 30%;
	/* background: #85DB6780; */
	background: linear-gradient(0deg, rgb(107, 162, 88) 25%, rgba(101, 159, 81, 0.48) 66%, rgba(0, 0, 0, 0.09) 94%);
	backdrop-filter: blur(1px);
	transition: all .3s;
}
.upload-progress > span {
	position: absolute;
	bottom: 12px;
	left: 14px;
	color: #fff;
	font-family: "Switzer";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}
.upload-progress > b {
	text-align: right;
	direction: ;
	display: block;
	color: #fff;
	text-align: right;
	font-family: "Switzer";
	font-size: 77px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	transition: all .3s;
}
.uploading-badge {
    font-family: Arial, sans-serif;
    color: #333;
    font-size: 14px;
}
.dots {
	display: inline-block;
	font-size: 20px;
}
.dots span {
    display: inline-block;
}

.dots span:nth-child(1) {
	animation: fadeInOut .5s infinite; 
    animation-delay: 0.5s;
}

.dots span:nth-child(2) {
    animation: fadeInOut 1.5s infinite; 
    animation-delay: 0.5s;
}

.dots span:nth-child(3) {
    animation: fadeInOut 1s infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.image-item-top {
	position: absolute;
	top: 0;
	width: 100%;
	padding: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.image-item-options {
	display: flex;
	gap: 12px;
	font-size: 18px;
	align-items: center;
	justify-content: space-between;
	transition: all .3s;
	transform: translateX(65px);
}
.image-item-options > div {
	cursor: pointer;
}
.image-item-options i {
	color: #fff;
}
.menu-item-options {
	position: absolute;
	border-radius: 8px;
	opacity: 0.95;
	background: var(--Neutral-neutral-700, #212127);
	backdrop-filter: blur(117px);
	padding: 12px;
	flex-direction: column !important;
	gap: 12px;
	right: 0px;
	color: #fff;
	color: var(--White-Light, #FFF);
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	justify-content: space-between;
	min-width: 150px;
	top: 40px;
}
.menu-item-options span i {
	/* vertical-align: middle; */
	margin-right: 8px;
	font-size: 14px;
}
.menu-item-options span:hover , .menu-item-options span:hover i , .menu-item-options:hover svg {
	color: var(--base-color);
}
.image-item-bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px;
	color: #000;
	font-family: "Switzer";
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.48px;
	background: var(--base-color);
	transform: translateY(65px);
	transition: all .3s;
}
.image-item-bottom-right span {
	color: #000;
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
.image-item-bottom-right i {
	vertical-align: sub;
	font-size: 18px;
	margin-left: 5px;
}
.image-item-bottom-right {
	color: #000;
	line-height: normal;
}
.image-item-bottom-right:hover i {
	color: #000;
}
.image-item:hover {
	outline: 2px solid var(--base-color);
}
.image-item:hover .image-item-bottom {
	transform: translateY(0px);
}
.image-item:hover .image-item-options {
	transform: translateX(0px);
}
.image-item:not(:hover) .menu-item-options {
    display: none !important;
}
.dashboard-title {
	color: #FFF;
	font-family: "Switzer";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.32px;
	margin-bottom: 12px;
}

.custom-gap{height: 26px;}

.ImageScanDetails-top > h2 {
	color: var(--White-Light, #FFF);
	font-family: "Switzer";
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.36px;
	margin-bottom: 16px;
}
.General-Details > figure {
	margin: 0;
}
.General-Details > figure > img {
	width: 160px;
	height: 160px;
	border-radius: 5px;
}
.General-Details > div > h3 {
	color: #FFF;
	font-family: "Switzer";
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	margin-bottom: 16px;
}
.General-Details {
	display: flex;
	gap: 16px;
	align-items: center;
}
.General-Details p {
	margin-bottom: 16px;
	color: var(--Neutral-neutral-300, #737379);
font-family: "Switzer";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
}

.AI-Detection-Models-box {
	border: 1px solid var(--Neutral-neutral-700, #212127);
	margin: 16px 0;
}

.AI-Detection-Models-box .row1 ,.AI-Detection-Models-box .row2{
	padding: 16px;
}
.AI-Detection-Models-box-title > h3 {
	color: var(--White-Light, #FFF);
	font-family: "Switzer";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.32px;
}
.AI-Detection-Models-box-title > p {
	color: var(--Neutral-neutral-300, #737379);
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.12px;
}
.AI-Models-Boxs > div {
	border: 1px solid var(--Neutral-neutral-700, #212127);
	background: var(--Neutral-neutral-800, #19191E);
}
.AI-Models-Boxs {
	margin-top: 20px;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}
.row2 > p {
	color: var(--White-Light, #FFF);
	font-family: "Switzer";
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.4px;
}
.row2 > span {
	color: var(--Green-Color, #8DEA69);
text-align: center;
/* Medium/Type@32 */
font-family: "Switzer";
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 48px */
letter-spacing: -0.64px;
}
.row2 {
	border-top: 1px solid var(--Neutral-neutral-700, #212127);
	background: var(--Neutral-neutral-900, #131317);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.AI-Models-Box-top > div span {
	color: var(--White-Light, #FFF);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: -0.32px;
	text-transform: uppercase;
	font-family: "Aeonik Mono";
}
.AI-Models-Box-top > div b {
	color: var(--White-Light, #FFF);
	font-family: "Aeonik Mono";
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: -0.48px;
}
.AI-Models-Box-top > div {
	display: flex;
	flex-direction: column;
}
.AI-Models-Boxs > div {
	padding: 12px;
	display: flex;
	flex-flow: column;
	gap: 20px;
	width: 100%;
}
.AI-Models-Box-bottom > span {
	color: var(--Neutral-neutral-300, #737379);
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.28px;
}
.AI-Models-Box-bottom > p {
	color: var(--Green-Color, #8DEA69);
	font-family: "Switzer";
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.4px;
}
.AI-Models-Box-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.Camera-Detailes-Boxs {
	display: flex;
	justify-content: flex-start;
	gap: 12px;
	margin-top: 20px;
	flex-wrap: wrap;
}
.Camera-Detailes-Boxs > div {
	padding: 12px;
	display: flex;
	flex-flow: column;
	gap: 20px;
	width: 100%;
	border: 1px solid var(--Neutral-neutral-700, #212127);
	background: var(--Neutral-neutral-800, #19191E);
	flex: 0 0 19%;
	box-sizing: border-box;
	width: 100%;
}
.Camera-Detailes-Box-top > div {
	display: flex;
	width: 24px;
	height: 24px;
	padding: 4px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	aspect-ratio: 1/1;
	border-radius: 4px;
	background: linear-gradient(180deg, #737377 0%, #414144 100%);
	box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.08) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.40) inset;
	color: #fff;
}
.Camera-Detailes-Box-top > div i {
	font-size: 11px;
}
.Camera-Detailes-Box-bottom > span {
	color: var(--White-Light, #FFF);
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.28px;
}
.Camera-Detailes-Box-bottom > p {
	color: var(--Neutral-neutral-300, #737379);
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.12px;
	margin-top: 4px;
}

.panel-content-top {
	margin: 0 0 20px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.panel-content-top h2 {
	color: #FFF;
	font-family: "Aber Mono";
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 110%;
	letter-spacing: -1px;
	text-transform: uppercase;
}
.Processing{
	color:#365AF9 ;
}
.Unpaid{
	color:#FF9900 ;
}
.Failed{
	color:#BC1828 ;
}
.Success{
	color:#8DEA69 ;
}
td[data-label="Action"] div i {
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: linear-gradient(180deg, #242426 0%, #202022 100%);
	box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.20);
	padding: 5px;
	color: #737379;
	cursor: pointer;
	transition: all .3s;
}
td[data-label="Action"] div i:hover {
	color: #fff;
}
td[data-label="Action"] div {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 8px;
}
.rix-plan-box {
	border: 1px solid var(--Neutral-neutral-600, #2A2A32);
	display: flex;
	padding: 30px 22px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 14px 0;
}
.rix-plan-box-top,.rix-plan-box-bottom div{
	gap: 8px;
	display: flex;
	flex-direction: column;
}
.rix-plan-box-bottom,.rix-plan-box-top {
	width: 100%;
}
.rix-plan-box-top div b {
	color: var(--White-Light, #FFF);
	font-family: "Switzer";
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}
.rix-plan-box-top div span {
	color: var(--Neutral-neutral-400, #58585F);
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
.rix-plan-box-top div span {
	color: var(--White-Light, #FFF);
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin: 0 8px;
	align-self: ;
	vertical-align: text-top;
}
.rix-plan-box-bottom div p {
	color: var(--Stroke-stroke-600, #CFCFD0);
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
.rix-plan-box-bottom div p b, .rix-plan-box-bottom div p span {
	color: var(--Stroke-stroke-600, #CFCFD0);
	font-family: "Switzer";
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.rix-plan-box-bottom a {
	border: 1px solid var(--White-Light, #FFF);
	color: var(--White-Light, #FFF);
text-align: center;
font-family: "Switzer";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
	display: flex;
	height: 39.02px;
	padding: 12.415px 12.375px 12.415px 12.528px;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	width: 100% !important;
	display: block;
	transition: all .3s;
}
.rix-plan-box-top p {
	color: var(--Neutral-neutral-400, #58585F);
	font-family: "Switzer";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
.rix-plan-box-bottom {
	margin-top: 12px;
}
.current {
	border: 1px solid var(--Neutral-neutral-400, #58585F) !important;
	color: #58585F !important;
}
.rix-plan-box-creator {
	background: linear-gradient(126deg, rgba(133, 219, 103, 0.23) -0.07%, rgba(0, 0, 0, 0.12) 98.5%);
	box-shadow: 0 8px 24.6px 0px rgba(133, 219, 103, 0.10);
}
.rix-plan-box-creator a {
	background: var(--Green-Color, #8DEA69);
	color: #000 !important;
	border: none;
}
.rix-plan-box:hover a {
	color: var(--base-color);
	border-color: var(--base-color);
}
td[data-label="User"] img {
	width: 24px;
	height: 24px;
	border-radius: 100px;
	margin-right: 8px;
}
.History-table th, .History-table td {
	text-align: left !important;
}



.seed-photo-pricing {
	width: 100%;
	max-width: 1200px;
	background: #131317;
	margin: 45px 0;
}
.seed-photo-pricing .table-container {
	overflow-x: auto;
	width: 100%;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 5px !important;
}
.seed-photo-pricing table {
	width: 100%;
	border-collapse: collapse;
	min-width: 700px;
	border: 1px solid var(--Neutral-neutral-700, #212127);
}
.seed-photo-pricing th, 
.seed-photo-pricing td {
	padding: 16px 14px;
	text-align: center;
	border-bottom: 1px solid #e2e8f0;
	color: var(--White-Light, #FFF);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.28px;
}
.seed-photo-pricing th {
	background-color: #4a6cf7;
	color: white;
	font-weight: 600;
	position: sticky;
	top: 0;
	white-space: nowrap;
	border-bottom: 1px solid var(--Neutral-neutral-700, #212127);
	background: var(--Neutral-neutral-800, #19191E);
}
.seed-photo-pricing th:first-child, .seed-photo-pricing td:first-child {
	position: sticky;
	left: 0;
	background-color: #131317;
	text-align: left;
	font-weight: 600;
	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
	z-index: 1;
	min-width: 200px;
	color: var(--White-Light, #FFF);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.28px;
}
.seed-photo-pricing thead th:first-child {
	background-color: #2d3748;
	z-index: 2;
	border-bottom: 1px solid var(--Neutral-neutral-700, #212127);
	background: var(--Neutral-neutral-800, #19191E);
	color: var(--Neutral-neutral-300, #737379);
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.28px;
}
@media (max-width: 768px) {
	.seed-photo-pricing th, 
	.seed-photo-pricing td {
		padding: 14px 10px;
		font-size: 0.9rem;
	}
	.seed-photo-pricing th:first-child,
	.seed-photo-pricing td:first-child {
		min-width: 160px;
	}
	.header h1 {
		font-size: 1.8rem;
	}
	.header p {
		font-size: 1rem;
	}
	.seed-photo-pricing table {
	min-width: 575px;
}
}
.note {
	margin-top: 20px;
	text-align: center;
	font-size: 1rem;
	color: #4a5568;
	max-width: 800px;
}
.mobile-scroll-hint {
	display: none;
	align-items: center;
	justify-content: center;
	margin-top: 15px;
	color: #4a6cf7;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.8);
	padding: 10px 15px;
	border-radius: 25px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.mobile-scroll-hint i {
	margin-right: 8px;
	animation: bounce 2s infinite;
}
.seed-photo-pricing i {
	font-family: rix;
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateX(0);}
	40% {transform: translateX(-10px);}
	60% {transform: translateX(-5px);}
}
@media (max-width: 800px) {
	.mobile-scroll-hint {
		display: flex;
	}
}
.seed-photo-pricing .table-container::-webkit-scrollbar {
	height: 8px;
}
.seed-photo-pricing .table-container::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}
.seed-photo-pricing .table-container::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 4px;
}
.seed-photo-pricing .table-container::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}
.seed-photo-pricing thead th {
	color: var(--Neutral-neutral-300, #737379);
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.28px;
}
.seed-photo-pricing i {
	margin-right: 8px;
}
.seed-photo-pricing  .icon-Close2 {
	width: 20px;
	height: 20px;
	font-size: 20px;
	color: #58585F;
}
.seed-photo-pricing .icon-Check {
	width: 20px;
	height: 20px;
	font-size: 12px;
}
.plans-period {
	display: flex;
	align-items: center;
	margin: 45px 0;
	gap: 0;
}
.plans-period button {
	all: unset;
	color: #FFF;
	text-align: center;
	font-family: "Switzer";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	border: 1px solid #484848;
	display: flex;
	padding: 15px 21.68px 15px 21.65px;
	justify-content: center;
	align-items: center;
	width: 130px;
	transition: all .3s;
	cursor: pointer !important;
}
.plans-period button.active {
	color: #000;
	background: #fff;
	cursor: pointer !important;

}

.btn-disabled {
	background: #737379 !important;
	cursor: no-drop;
}
.btn-disabled:hover {
	background: #737379 !important;
	cursor: no-drop;
}


















/***********art3lab style***********/
.dashoard-top-right {
	color: #FFF;
	font-family: "Aber Mono";
	font-size: 20px;
	font-style: normal;
	font-weight: 300;
	line-height: 110%;
	letter-spacing: -1px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 30px;
	justify-content: end;
}
.dashoard-top-right > div {
	display: flex;
	flex-direction: column;
	align-items: start;
}
.left-detailes > span {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}
.left-detailes > span > b {
	vertical-align: middle;
	line-height: 0;
}
.right-detailes {
	color: var(--Primary-Base, #C5FF4A);
	font-family: "Aber Mono";
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 110%;
	letter-spacing: -1px;
	text-transform: uppercase;
}
.right-detailes span > b {
	color: var(--Secondary-200, #475569);
	font-family: "Aber Mono";
	font-size: 20px;
	font-style: normal;
	font-weight: 300;
	line-height: 110%;
	letter-spacing: -1px;
	text-transform: uppercase;
}
.panel-heading1 h2 {
	color: #FFF;
	font-family: "Aber Mono";
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 110%;
	text-transform: uppercase;
}
.badge-counter {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}
.badge-counter-item {
	border: 1px solid var(--Neutral-neutral-700, #212127);
	display: flex;
	padding: 14px 13px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
	flex: 1 0 0;
}

.badge-counter-item span {
	color: #FFF;
	font-family: "Aber Mono";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	letter-spacing: -1px;
	text-transform: uppercase;
}
.badge-counter-item b {
	color: #FFF;
	font-family: "Aber Mono";
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 110%;
	letter-spacing: -1px;
	text-transform: uppercase;
}
.achievements-counter {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: start;
	flex-wrap: wrap;
}
.achievements-item {
	border: 1px solid var(--Neutral-neutral-700, #212127);
	background: #1A1A1A;
	display: flex;
	padding: 16px 13px;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	min-height: 240px;
	box-sizing: border-box;
	flex: 0 0 calc((100% - 64px) / 5);
	box-sizing: border-box;
}
.bottom-detailes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: 24px;
}
.achievements-item figure {
	margin: 0 auto;
}
.achievements-item img {
	display: block;
	text-align: center;
	margin: 0 auto;
	width: 100%;
}
.achievements-item span {
	color: var(--Secondary-50, #F1F5F9);
	font-family: "Aber Mono";
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 110%;
	text-transform: uppercase;
}
.vote-item {
	border: 1px solid var(--Neutral-neutral-700, #212127);
	display: flex;
	min-height: 293px;
	padding: 20px;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16px;
}
.vote-item-top > h3 {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: "Aber Mono";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: uppercase;
}
.vote-item-users img {
	border-radius: 78.826px;
	width: 25.565px;
	height: 24.957px;
}
.vote-item-users {
	display: flex;
	align-items: flex-start;
	gap: -10.957px !important;
}
.vote-item-users img {
	margin: 0 -3px;
}
.vote-item-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.vote-item-content {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: capitalize;
}
.vote-item-bottom {
	width: 100%;
}
.vote-time {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: capitalize;
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.vote-time b {
	color: var(--Neutral-neutral-200, #9F9FA3);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: capitalize;
}
.vote-btns span {
	color: var(--Primary-Base, #C5FF4A);
	font-family: "Aber Mono";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: uppercase;
}
.vote-item-top > h3 b {
	color: var(--Neutral-neutral-300, #737379);
	font-family: "Aber Mono";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: uppercase;
}
.vote-progress {
	height: 8px;
	align-self: stretch;
	border-radius: 10px;
	background: var(--Neutral-neutral-200, #9F9FA3);
	position: relative;
	margin: 14px 0 24px 0;
}
.vote-progress-percent {
	position: absolute;
	height: 8px;
	border-radius: 10px;
	background: var(--Primary-Base, #C5FF4A);
}
.vote-btns {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.vote-btns button, .vote-btns a {
	width: auto;
	margin: 0;
}
.ended .vote-progress-percent {
	background: #233300;
	width: 100% !important;
}
.panel-heading1 a {
	color: #FFF;
	font-family: "Aber Mono";
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 110%;
	letter-spacing: -1px;
	text-transform: uppercase;
	transition: all .3s;
}
.panel-heading1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.panel-heading1 a:hover {
	color: var(--base-color);
}
.display-mobile{display: none;}
.display-desktop{display: flex;}
.panel-btn span {
	color: var(--base-color);
}
.panel-btn:hover svg path {
	stroke: #000;
}
.panel-btn:hover span {
	color: #000;
}
td[data-label="Invited at"] {
	color: var(--Neutral-neutral-200, #9F9FA3);
	text-align: center;
	accent-color: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.24px;
}


.invite-box {
	background: var(--Neutral-neutral-800, #19191E);
	display: flex;
	padding: 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	align-self: stretch;
}
.invite-container {
	border: 1px solid var(--Neutral-neutral-700, #212127);
	background: var(--Neutral-neutral-900, #131317);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
	display: flex;
	height: 48px;
	padding: 13px 12px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}
.tags-input {
	display: flex;
	flex-wrap: wrap;
	border: none !important;
	color: var(--Neutral-neutral-400, #58585F);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.12px;
	width: 80%;
}
.tags-input ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	gap: 5px;
}
.tags-input li {
	color: var(--White-Light, #FFF);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.12px;
	border-radius: 4px;
	background: var(--Neutral-neutral-700, #212127);
	display: flex;
	height: 22px;
	padding: 2px 6px;
	justify-content: center;
	align-items: center;
	gap: 4px;
}
.tags-input li span {
	margin-right: 5px;
}
.tags-input li button {
	background: none;
	border: none;
	color: #737379;
	cursor: pointer;
	font-size: 20px;
	line-height: 0;
}
.tags-input input {
	border: none;
	background: transparent;
	flex: 1;
	min-width: 200px;
	color: #fff;
	outline: none;
}
.tags-input input::placeholder {
	color: #aaa;
	color: var(--Neutral-neutral-400, #58585F);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.12px;
}
#type-select {
	margin-left: 10px;
	color: var(--Neutral-neutral-200, #9F9FA3);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.28px;
	width: 100px;
	cursor: pointer;
}
#invite-btn {
	margin-left: 10px;
	cursor: pointer;
	display: flex;
	height: 32px;
	padding: 4px 12px;
	align-items: center;
	gap: 8px;
	background: var(--Primary-Base, #C5FF4A);
	box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.20);
	color: var(--Neutral-neutral-900, #131317);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.28px;
	border: none;
}
#email-input {
	padding: 0 0 0 10px;
}
.tags-input svg {
	margin-right: 10px;
}
#invite-form {
	display: none;
}
.invite-right {
	width: 20%;
	display: flex;
	align-items: center;
	justify-content: end;
}
.copy-container {
	display: flex;
	height: 48px;
	padding: 12px 16px;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
	align-self: stretch;
	border: 1px solid var(--Neutral-neutral-600, #2A2A32);
	background: var(--Neutral-neutral-800, #19191E);
	position: relative;
	color: var(--White-Light, #FFF);
	text-overflow: ellipsis;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.28px;
	margin-top: 24px;
	flex: 1;
}
.copy-container input {
	background: none;
	box-shadow: none;
	outline: none;
	border: none;
	overflow: hidden;
	color: var(--White-Light, #FFF);
	text-overflow: ellipsis;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.28px;
	width: 90%;
}
.copy-container label {
	color: var(--Neutral-neutral-300, #737379);
	accent-color: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.12px;
	position: absolute;
	top: -24px;
	left: 0;
}
.copy-container i {
	color: #9F9FA3;
	cursor: pointer;
}
.invite-links {
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.Ranking-box {
	border: 1px solid var(--Neutral-neutral-400, #58585F);
	display: flex;
	padding: 20px;
	align-items: flex-start;
	gap: 34px;
	align-self: stretch;
	flex-direction: column;
	margin: 0 0 26px 0;
}
.Ranking-box-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	align-self: stretch;
}
.Ranking-box-top span {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: "Aber Mono";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: uppercase;
}
.My-Ranking-box .Ranking-box-bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	align-self: stretch;
	flex-direction: row !important;
	width: 100%;
}
.Ranking-box-bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	align-self: stretch;
	width: 100%;
	flex-direction: column !important;
	gap: 34px;
}

.userinfo img {
	border-radius: 48px;
	width: 48px;
	height: 48px;
}
.userinfo {
	display: flex;
	align-items: center;
	gap: 8px;
}
.userinfo p {
	color: var(--Neutral-neutral-400, #58585F);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	text-transform: capitalize;
}
.userinfo span {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: Switzer;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	text-transform: capitalize;
}
.RightPoints span {
	color: var(--Primary-Base, #C5FF4A);
	font-family: "Aber Mono";
	font-size: 30px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: capitalize;
}
.JoinDate span {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: "Aber Mono";
	font-size: 30px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: capitalize;
}
.timeinfo-detailes p {
	color: var(--Neutral-neutral-400, #58585F);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: capitalize;
}
.timeinfo-detailes {
	display: flex;
	align-items: center;
	gap: 34px;
}
.RightPoints ,.JoinDate{
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.My-Join-box-sec {
	border-bottom: 1px solid var(--Neutral-neutral-700, #212127);
}
.My-Join-box {
	display: flex;
	padding: 30px 14px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}
.My-Join-box-userinfo img {
	border-radius: 101.111px;
	display: flex;
	width: 91px;
	height: 91px;
	align-items: flex-start;
	gap: 80.889px;
}
.My-Join-box-userinfo span {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: Switzer;
	font-size: 30px;
	font-style: normal;
	font-weight: 500;
	line-height: 140%;
	text-transform: capitalize;
}
.My-Join-box-userinfo p {
	color: var(--Neutral-neutral-400, #58585F);
	font-family: Switzer;
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	text-transform: capitalize;
}
.My-Join-box-userinfo {
	display: flex;
	gap: 15px;
	align-items: center;
}
.My-Join-box-JoinDate  {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: "Aber Mono";
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
	text-transform: capitalize;
}
.My-Join-box-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.Mark-btn {
	width: auto;
}
.Notification-box-info p {
	color: var(--Neutral-neutral-300, #737379);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.12px;
}
.Notification-box-info span {
	color: var(--Neutral-neutral-100, #BEBEC1);
	font-family: Switzer;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.32px;
}
.Notification-box-info img {
	border-radius: 38px;
	width: 38px;
	height: 38px;
}
.Notification-box-info {
	display: flex;
	gap: 12px;
	align-items: center;
}
.Notification-box-info .svg-icon {
	width: 38px;
	height: 38px;
	background: #000;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Notifications li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 24px 0;
}
.date {
	color: var(--White-Light, #FFF);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.12px;
}
.Notification-box-right {
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 12px;
}
.status {
	border-radius: 10px;
	background: var(--Primary-Base, #C5FF4A);
	width: 9px;
	height: 9px;
	display: flex;
}





.profile-box {
	border: 1px solid var(--Neutral-neutral-700, #212127);
	display: flex;
	padding: 16px;
	flex-direction: column;
	align-items: start;
	gap: 16px;
	align-self: stretch;
}
.profile-box-row {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	padding: 0 0 24px 0;
	border-bottom: 1px solid #212127;
	gap: 0;
	cursor: pointer;
	transition: all .3s;
}
.profile-box-row:hover {
	background: #212127;
	padding: 0 12px 24px 12px;
	border: none;
}
.profile-box-row:last-child{
	border-bottom:none;
	padding:0;
}
.profile-box-row-left span {
	color: var(--White-Light, #FFF);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.28px;
}
.profile-box-row-left p {
	color: var(--Neutral-neutral-200, #9F9FA3);
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.12px;
}
.profile-box-row-right img {
	width: 38px;
	height: 38px;
	border-radius: 38px;
}
.profile-box-row-right span {
	color: var(--White-Light, #FFF);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.28px;
}
.logout-btn {
	background: #D45656 !important;
	color: #fff !important;
}
.logout-btn i {
	vertical-align: middle;
	margin-right: 8px;
}
.EditName-btns button {
	width: auto;
}
.EditName-btns {
	display: flex;
	align-items: center;
	margin-top: 38px;
	gap: 12px;
	justify-content: end;
}
.Logout-span {
	color: var(--Neutral-neutral-200, #9F9FA3);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.12px;
	position: absolute;
	top: 60px;
}
.profile-img img {
	border-radius: 75px;
	width: 75px;
	height: 75px;
}
.profile-img {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 20px;
}
.profile-img span {
	color: var(--White-Light, #FFF);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.28px;
}
.profile-img a {
	display: flex;
	width: 79px;
	height: 32px;
	padding: 4px 14px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: linear-gradient(180deg, #242426 0%, #202022 100%);
	box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.20);
	color: #fff;
	color: var(--White-Light, #FFF);
	text-align: center;
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.28px;
	flex-direction: row;
	gap: 12px;
	cursor: pointer;
}







#xai-tab-buttons {
	border: 1px solid var(--Neutral-neutral-600, #2A2A32);
	display: flex;
	padding: 4px;
	align-items: flex-start;
	width: fit-content;
	margin: 0 0 24px 0;
}
.xai-tab-btn {
	display: flex;
	padding: 10px 20px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	background: none;
	border: none;
	color: #fff;
	color: #FFF;
text-align: center;
font-family: Switzer;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 21px; /* 175% */
}

.xai-tab-btn.xai-active {
	background: #fff;
	color: #000;
}
.votes-blur-bg {
	background: rgba(19, 19, 23, 0.60);
	backdrop-filter: blur(7px);
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 1;
	
}
.votes-blur {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	max-width: 450px;
	z-index: 2;
}
.votes-blur-timer {
	border: 2px solid var(--Neutral-neutral-600, #2A2A32);
	background: #000;
	padding: 10px;
}

.votes-blur-p {
	color: var(--White-Light, #FFF);
	text-align: center;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.28px;
	margin-top: 20px;
}
.vote-content h3 {
	color: var(--Neutral-neutral-50, #EAEAEB);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
}
.vote-content p, .vote-content li {
	color: var(--Neutral-neutral-200, #9F9FA3);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
}
.vote-content ul li {
	list-style: disc;
}
.vote-content ul {
	padding-left: 14px;
}
.vote-content-gap {
	height: 20px;
}
.vote-single-thumbnail img {
	width: 100%;
}
.vote-single-title {
	margin: 24px 0;
}
.opiniion-box {
	border: 1px solid var(--Neutral-neutral-700, #212127);
	display: flex;
	padding: 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 34px;
	flex: 1 0 0;
	align-self: stretch;
	margin: 24px 0;
}
.vote-single-title a {
	border-radius: 4px;
	background: var(--Primary-Base, #C5FF4A);
	color: var(--Secondary-Base, #100F17);
	font-family: "Aber Mono";
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: -1px;
	text-transform: uppercase;
	display: inline-block;
	accent-color: flex;
	width: auto;
	height: 24px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	vertical-align: text-bottom;
	text-align: center;
	margin-left: 7px;
	padding: 5px;
}
.vote-single-title a:hover {
	background: var(--base-color2);
	color: var(--Secondary-Base, #100F17);
}
.opiniion-box h3 {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: "Aber Mono";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: uppercase;
}
.vote-single-item-box {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: "Aber Mono";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: uppercase;
	display: flex;
	width: 100%;
	padding: 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 34px;
	border: 1px solid var(--Neutral-neutral-700, #212127);
	margin: 24px 0;
}
.like-dislike {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 130px;
	gap: 50px;
}
.opiniion-box textarea {
	color: var(--Neutral-neutral-300, #737379);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: capitalize;
	border: 1px solid var(--Neutral-neutral-700, #212127);
	display: flex;
	padding: 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 34px;
	flex: 1 0 0;
	align-self: stretch;
	background: none;
}
.opiniion-box-btn {
	background: var(--base-color) !important;
	width: auto !important;
}
.opiniion-box-btn:hover {
	background: var(--base-color2) !important;
}
.like-dislike svg path {
	stroke: #737379;
	cursor: pointer;
	transition: all .3s;
}
.like-dislike svg {
	cursor: pointer;
}
.like-dislike svg:hover path {
	stroke: #fff;
}
.like-active path {
	fill: #C5FF4A !important;
	stroke: #C5FF4A !important;
}
.dislike-active path {
	fill: #F4462C !important;
	stroke: #F4462C !important;
}

.Statistics {
	display: flex;
	width: 100%;
	padding: 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 34px;
	border: 1px solid var(--Neutral-neutral-700, #212127);
}
.stage h3 {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: "Aber Mono";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: uppercase;
}
.stage-statistics > span {
	color: var(--Neutral-neutral-300, #737379);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: capitalize;
	margin-bottom: 12px !important;
	display: block;
}
.stage-statistics > div > div span {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: Switzer;
	font-size: 17.203px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: capitalize;
}
.stage-statistics > div {
	display: flex;
	gap: 20px;
	align-items: center;
}
.stage {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.stage-statistics2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.stage.stage2 {
	border-top: 1px solid #2A2A32;
	padding-top: 34px;
}
.stage h3 b {
	color: var(--Neutral-neutral-400, #58585F);
	font-family: "Aber Mono";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: uppercase;
}


.comments-box {
	display: flex;
	width: 100%;
	padding: 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 34px;
	border: 1px solid var(--Neutral-neutral-700, #212127);
}
.comments-box > h3 {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: "Aber Mono";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: uppercase;
}
.comment-info span {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: Switzer;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	text-transform: capitalize;
}
.comment-info-left img {
	border-radius: 30px;
	display: flex;
	width: 27px;
	height: 27px;
	align-items: flex-start;
	gap: 24px;
}
.comment-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.comment-info-left ,.comment-info-right{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.comments-box li p {
	color: var(--Neutral-neutral-200, #9F9FA3);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	text-transform: capitalize;
	margin-top: 12px;
}
.comments-box li {
	margin-bottom: 30px;
}
.load-more {
	color: var(--Greyscale-50, #F9F9F9);
	font-family: Switzer;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	cursor: pointer;
}
.load-more:hover svg path {
	fill:var(--base-color) !important;
	stroke:var(--base-color) !important;
}






/*step progress*/
.custom-nav {
    margin-top: 40px;
}
.custom-pull-right {
    float: right;
}
/* Stepper CSS */
.custom-arrow-steps .custom-step {
	font-size: 14px;
	text-align: center;
	color: #b2b1b1;
	cursor: default;
	margin: 0 0px;
	padding: 6px 2px 10px 26px;
	min-width: 75px;
	float: left;
	position: relative;
	background-color: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: background-color 0.2s ease;
	/* border: 1px solid #949494; */
	/* border-left: none !important; */
}
.custom-arrow-steps .custom-step {
	font-size: 12px;
	text-align: center;
	color: #b2b1b1;
	cursor: default;
	color: var(--Neutrals-8, #FCFCFD);
	text-align: center;
	font-family: Switzer;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}
.custom-arrow-steps .custom-step:after,
.custom-arrow-steps .custom-step:before {
    content: " ";
    position: absolute;
    top: 0;
    right: -17px;
    width: 0;
    height: 0;
    border-top: 19px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #d9e3f7 pitiful: none;
    z-index: 2;
    transition: border-color 0.2s ease;
}
.custom-arrow-steps .custom-step::before {
	right: auto;
	left: 0;
	border-left: 17px solid none;
	z-index: 0;
}
.custom-arrow-steps .custom-step:first-child:before {
    border: none;
}
.custom-arrow-steps .custom-step:first-child {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.custom-arrow-steps .custom-step span {
    position: relative;
}
.custom-arrow-steps .custom-step.custom-done span:before {
    opacity: 1;
    -webkit-transition: opacity 0.3s ease 0.5s;
    -moz-transition: opacity 0.3s ease 0.5s;
    -ms-transition: opacity 0.3s ease 0.5s;
    transition: opacity 0.3s ease 0.5s;
}
.custom-arrow-steps .custom-step.custom-current {
    color: #000;
    background-color: var(--base-color);
}
.custom-arrow-steps .custom-step.custom-current::after {
	border-left: 17px solid var(--base-color);
}
.custom-step:first-child {
	padding-left: 0;
}
.custom-step:last-child {
	padding-right: 15px;
}
.custom-arrow-steps.custom-clearfix {
	border: 1px solid var(--Neutral-neutral-600, #2A2A32);
	width: 100%;
	display: flex;
	justify-content: space-between;
}









.social-share li a {
	border: 1px solid var(--Neutral-neutral-600, #2A2A32);
	background: var(--Neutral-neutral-800, #19191E);
	padding: 8px 12px;
	margin: 12px 0px;
	color: var(--Neutral-neutral-100, #BEBEC1);
	font-family: Switzer;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.32px;
	display: block;
	display: flex;
	align-items: center;
	gap: 8px;
}
.social-share li a:hover {
	background: var(--base-color);
	color: #000;
}
.copy-container-icons {
	display: flex;
	gap: 20px;
	align-items: center;
}
.social-share li a:hover svg path {
	stroke: #000;
	color: #000;
}






.account-steps-container {
	border: 1px solid var(--Neutral-neutral-600, #2A2A32);
	background: var(--Neutral-neutral-800, #19191E);
	padding: 13px 0px 10px 0;
	z-index: 0;
	position: relative;
	margin: 25px auto 40px auto;
}
.multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before {
  /* content: counter(stepNum); */
  font-family: inherit;
  font-weight: 700; }
.multi-steps > li.is-active ~ li::after, .multi-steps > li.is-active::after {
	background-color: #58585F;
}
.multi-steps {
  display: table;
  table-layout: fixed;
  width: 100%; }
.multi-steps > li {
	/* counter-increment: stepNum; */
	text-align: center;
	display: table-cell;
	position: relative;
	color: #C5FF4A;
	color: var(--Neutral-neutral-300, #737379);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.12px;
	vertical-align: middle;
}
.multi-steps > li::before {
	content: '\f00c';
	content: '\2713;';
	content: '\10003';
	content: '\10004';
	content: '\2713';
	display: block;
	margin: 0 auto 4px;
	background-color: #C5FF4A;
	width: 20px;
	height: 20px;
	line-height: 14px;
	text-align: center;
	font-weight: bold;
	border-style: solid;
	border-color: #C5FF4A;
	color: #100F17 !important;
}
.multi-steps > li::after {
	content: '';
	height: 1px;
	width: 100%;
	background-color: #C5FF4A;
	position: absolute;
	top: 9px;
	left: 50%;
	z-index: -1;
}
    .multi-steps > li:last-child:after {
      display: none; }
.multi-steps > li.is-active::before {
	content: '';
	background-color: #100F17;
	border-color: #C5FF4A;
}
    .multi-steps > li.is-active ~ li {
      color: #808080; }
.multi-steps > li.is-active ~ li::before {
	content: '';
	background-color: #100F17;
	border-color: #58585F;
}
.is-active {
	color: #fff !important;
}
/***** ADD MOBILE ONLY CSS HERE  *****/
@media only screen and (max-width: 48em) {
	/*art3lab style*/
	.badge-counter {
		flex-wrap: wrap;
		gap: 0;
	}
	.badge-counter-item,.achievements-item {
		width: 50%;
		flex: unset;
	}
	.achievements-counter {
		flex-wrap: wrap;
		gap: 12px;
	}
	.achievements-item {
		min-height: 120px;
		width: 48%;
	}
	.bottom-detailes {
		justify-content: center;
	}
	.achievements-item img {
		max-width: 80px;
		height: 70px !important;
	}
	.achievements-item span {
		font-size: 12px;
	}
	.bottom-detailes b {
		display: none;
	}
	.dashoard-top-right {
		gap: 5px;
		justify-content: space-between;
	}
	.right-detailes,.left-detailes ,.right-detailes span > b {
		font-size: 17px;
	}
	.display-mobile{display: flex;}
	.display-desktop{display: none;}
	.panel-content-top h2 {
		font-size: 24px !important;
	}
	.invite-container {
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		height: auto;
	}
	.tags-input {
		width: 100%;
	}
	.invite-right {
		width: 100%;
	}
	.tags-input input {
		min-width: 0;
	}
	#email-input {
		padding: 0 0 0 0px;
	}
	.tags-input ul {
		margin: 0 5px 0 0;
	}
	.invite-links {
		flex-direction: column;
	}
	.My-Ranking-box .Ranking-box-bottom {
		flex-direction: column !important;
	}
	.My-Join-box-userinfo img {
		width: 54px;
		height: 54px;
	}
	.My-Join-box-userinfo span {
		font-size: 18px;
	}
	.My-Join-box-userinfo p {
		font-size: 14px;
	}
	.My-Join-box-JoinDate {
		font-size: 14px;
	}
	.Notification-box-info {
		width: 75%;
	}
	.Notification-box-info .svg-icon {
		flex: 0 0 auto;
	}
	.Notifications-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
	.Mark-btn {
		width: 100%;
	}
#xai-tab-buttons {
	width: 100%;
}
#xai-tab-buttons {
	justify-content: space-between;
}
.xai-tab-btn {
	padding: 10px;
	gap: 5px;
}
.vote-single-title a {
	margin: 14px 0;
}











	.login-box {
		padding: 24px;
	}
	.login-box-top h2 {
		font-size: 26px;
	}
	.login-box-bottom > div {
		display: none;
	}
	.panel-right {
		width: 100%;
		padding-left: 0;
	}
	#menu {
		display: none;
	}
	.menu-toggle ,.close-mobile-menu {
		display: block !important;
		cursor:  pointer !important;
	}

	.panel-left {
		transition: all 0.3s ease-out;
		opacity: 0;
		transform: translateX(-100%);
		display: none;
	}
	.panel-left.menu-open {
			display: flex;
			opacity: 1;
			transform: translateX(0px);
			position: absolute;
			z-index: 1;
			background: rgb(19, 19, 23);
		}

	.close-mobile-menu {
		right: 18px;
		position: absolute;
		color: #fff;
		font-size: 22px;
		cursor: pointer;
	}
	.image-item-bottom {
		font-size: 16px;
		text-wrap: nowrap;
	}
	.image-item-bottom-right span {
		font-size: 12px;
	}
	.image-item-bottom-right i {
		font-size: 14px;
		margin-left: 2px;
	}
	.image-item-top {
		padding: 8px;
	}
	.image-item-bottom {
		padding: 8px;
	}
	.menu-item-options {
		padding: 10px;
		gap: 12px;
		font-size: 12px;
		min-width: 130px;
		top: 35px;
	}
	.upload-progress > b {
		font-size: 30px;
	}
	.upload-progress > span {
		bottom: 10px;
		left: 12px;
		font-size: 12px;
	}
	.Camera-Detailes-Boxs > div {
		flex: 1 0 47%;
	}
	.General-Details > figure > img {
		width: 130px;
		height: 130px;
	}
	.General-Details > div > h3 {
		font-size: 18px;
	}
	.General-Details p {
		margin-bottom: 14px;
		font-size: 12px;
	}
	.AI-Models-Boxs {
		flex-wrap: wrap;
	}
	.AI-Models-Boxs > div {
		flex: 1 0 47%;
	}
	.AI-Models-Box-bottom > span {
		font-size: 12px;
	}
	.AI-Models-Box-bottom {
		display: flex;
		align-items: start;
		justify-content: space-between;
		flex-direction: column;
	}
	.Camera-Detailes-Boxs > div {
		justify-content: space-between;
	}

	.custom-table {
    border: 0;
  }

  .custom-table caption {
    font-size: 1.3em;
  }

  .custom-table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .custom-table tr {
	border-bottom: 3px solid #ddd;
	display: block;
	margin-bottom: 20px;
	border: 1px solid var(--Neutral-neutral-700, #212127);
	background: #131317;
}

  .custom-table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }
  .custom-table td:nth-child(2n) {
	background: var(--Neutral-neutral-800, #19191E);
}
  .custom-table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
	color: var(--Neutral-neutral-300, #737379);

/* Regular/Type@14 */
font-family: "Switzer";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
letter-spacing: -0.28px;
  }

  .custom-table td:last-child {
    border-bottom: 0;
  }
  td[data-label="Action"] div {
	justify-content: right;
}
.History-table th, .History-table td {
	text-align: right !important;
}
.rix-plan-box {
	padding: 20px 14px;
	gap: 5px;
	margin: 0 0 24px 0;
}
.rix-plan-box-top div b {
	font-size: 17px;
}
.rix-plan-box-top p {
	font-size: 9px;
}
.rix-plan-box-bottom div p b, .rix-plan-box-bottom div p span {
	font-size: 17px;
}
.plans-period button {
	width: 50%;
}
.Logout-span {
	top: 80px;
}
.custom-arrow-steps .custom-step {
	padding: 6px 0px 10px 15px;
	min-width: 60px;
}
.custom-arrow-steps .custom-step {
	font-size: 10px;
}
.copy-container input {
	width: 78%;
}
}
input:-webkit-autofill {
    -webkit-box-shadow: var(--Neutral-neutral-800, #19191E) !important; 
    -webkit-text-fill-color: var(--White-Light, #FFF) !important; 
    transition: background-color 5000s ease-in-out 0s; 
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: var(--Neutral-neutral-800, #19191E) !important;
    -webkit-text-fill-color: var(--White-Light, #FFF) !important;
}
.grayscale {
  filter: grayscale(100%);
}