html, body {
font-family: 'Inter' !important;
background-color: var(--background-color);
color: var(--text-color);
font-weight: 400;
overflow: hidden;
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('font/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 300;
src: url('font/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDDxHOej.woff2') format('woff2');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: lrt;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
/* For WebKit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
width: 8px; /* Width of the scrollbar */
}
.transparent-glass {
margin: 0 auto;
background: transparent !important;
box-shadow: none !important;
border-bottom: unset !important;
}
:root {
--faded-bg: rgba(255,255,255,0.1);
--border-color: rgba(255,255,255,0.2);
--radius: 8px;
--gradient: linear-gradient(135deg, color(display-p3 .5725490196 .4156862745 1 / 1) 0%, color(display-p3 1 .4666666667 .6901960784 / 1) 50%, color(display-p3 1 .7019607843 .4039215686 / 1) 100%);
--gradient: linear-gradient(135deg, color(display-p3 .5725490196 .4156862745 1 / 1) 0%, color(display-p3 1 .4666666667 .6901960784 / 1) 50%, color(display-p3 1 .7019607843 .4039215686 / 1) 100%);
--gradient: linear-gradient(-135deg, #7054d9 0%, #5670c0 30%, #3abbb3 100%);
}
.direction-button {
font-family: phosphorIcon;
font-size: 50px;
width: 70px;
height: 70px;
color: #ff77b0; /* Make the text color transparent */
position: relative;
background: #05051e;
border-radius: 50%;
text-align: center;
line-height: 68px;
box-shadow: 2px 2px 10px rgba(255,255,255,.4);
cursor: pointer;
margin: 30px auto;
}
.direction-button::before {
content: '';
z-index: -1;
position: absolute;
height: 72px;
width: 72px;
left: -1px;
top: -1px;
border-radius: 50%;
background: linear-gradient(135deg, color(display-p3 .5725490196 .4156862745 1 / 1) 0%, color(display-p3 1 .4666666667 .6901960784 / 1) 50%, color(display-p3 1 .7019607843 .4039215686 / 1) 100%);
}
@keyframes raise {
100% {
transform: scale(10.2)
}
}
.top-bar-icon {
height: 50px;
width: 60px;
margin: 0;
cursor: pointer;
position: relative;
text-align: center;
padding: 5px !important;
height: fit-content;
overflow: hidden;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255,0.1);
transition: all .2s ease-in;
background: linear-gradient(45deg, #926aff20, #28C89620);
box-shadow: 0 4px 15px rgba(146, 106, 255, 0.1);
}
.top-bar-icon:hover {
background: var(--gradient);
transform: translateY(-2px);
box-shadow: 1px 1px 5px rgba(255,255,255,0.2);
}
.top-bar-icon .material-symbols-outlined {
font-size: 25px;
/*width: 35px;*/
/*font-family: phosphorIcon !important;*/
line-height: 1;
text-align: center;
margin: 0;
}
.top-bar-icon p {
font-size: 10px !important;
margin: 0;
text-align: center;
}
.accordion-expansion-icon {
font-family: phosphorIcon;
font-size: 25px;
margin: 0;
cursor: pointer;
width: 25px;
position: relative;
text-align: center;
line-height: 25px;
padding: 5px 0;
}
.accordion-expansion-icon::selection {
background: none; /* Remove background color */
color: inherit; /* Inherit the text color */
}
.area-arrow {
font-family: phosphorIcon;
font-size: 35px;
margin: 30px auto !important;
cursor: pointer;
width: 40px !important;
height: 40px;
position: relative;
text-align: center;
color: #92ff67;
border-radius: 50%;
border: 1px solid #92ff67;
font-weight: 100;
display: flex;
justify-content: center;
align-items: center;
}
.area-arrow::selection {
background: none; /* Remove background color */
color: inherit; /* Inherit the text color */
}
.notification-badge {
position: absolute;
top: 0;
right: -10px;
height: 15px;
width: 15px;
border-radius: 50%;
color: #fff;
font-size: 15px;
line-height: 13px;
background-image: linear-gradient(135deg, color(display-p3 .5725490196 .4156862745 1 / 1) 0%, color(display-p3 1 .4666666667 .6901960784 / 1) 50%, color(display-p3 1 .7019607843 .4039215686 / 1) 100%);
transition: transform .2s cubic-bezier(.6,.6,0,1), margin-top .2s cubic-bezier(.6,.6,0,1);
background-size: 200% 200%;
}
.top-row {
/*padding-bottom: 20px !important;*/
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255,0.1); /* Track background color */
}
::-webkit-scrollbar-thumb {
background-color: #bb86fc; /* Color of the scrollbar thumb */
border-radius: 1px; /* Rounded corners for the thumb */
border: 1px solid #bb86fc; /* Adds padding around the thumb */
}
::-webkit-scrollbar-thumb:hover {
background-color: #ff77b0; /* Darker color on hover */
}
h1 {
font-weight: 300;
}
.nav-icon {
font-family: phosphorIcon;
font-size: 22px;
margin-right: 10px;
}
.nav-item a.active {
background: linear-gradient(180deg,rgba(226,232,255,0) 0%,rgba(226,232,255,.12) 100%) !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.success-button {
padding: 10px 20px;
color: #fff;
border-radius: 8px;
background: var(--bs-success) !important;
transition: transform .2s cubic-bezier(.6,.6,0,1), margin-top .2s cubic-bezier(.6,.6,0,1);
border: none;
}
.error-button-outline {
padding: 10px 20px;
background: transparent;
border-radius: 8px;
color: var(--bs-danger) !important;
border: 1px solid var(--bs-danger) !important;
transition: transform .2s cubic-bezier(.6,.6,0,1), margin-top .2s cubic-bezier(.6,.6,0,1);
border: none;
}
@font-face {
font-family: 'phosphorIcon';
src: url('font/phosphorregularnew.ttf') format('truetype');
}
@font-face {
font-family: 'Product Sans';
src: url('font/productsans-thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Product Sans';
src: url('font/productsans-lightitalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Product Sans';
src: url('font/productsans-regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Product Sans';
src: url('font/productsans-medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Product Sans';
src: url('font/productsans-bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Product Sans';
src: url('font/productsans-black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Inter';
src: url('font/inter.ttf') format('truetype');
font-style: normal;
}
.gradient-text {
color: transparent; /* Make the text color transparent */
position: relative;
border-radius: 8px;
background-image: var(--gradient); /* Make the gradient repeat */
background-clip: text; /* Use the background as the text color */
-webkit-background-clip: text; /* For WebKit browsers */
background-size: 150% 300%; /* Increase the background size for a smoother effect */
animation: gradient-move 15s infinite linear; /* Adjust animation duration */
font-weight: 500;
filter: drop-shadow(2px 2px 2px rgba(255,255,255,0.2));
}
a.gradient-text {
font-weight: 200;
}
a.gradient-text:hover {
text-decoration: none;
color: inherit;
}
.header-action {
background: linear-gradient(180deg,rgba(226,232,255,0) 0%,rgba(226,232,255,.12) 100%);
padding: 8px 16px;
position: relative;
border-radius: 8px;
z-index: 1;
color: #fff;
border: 1px solid rgba(255,255,255, 0.01);
border-bottom: 1px solid rgba(255,255,255, 0.2);
}
.header-action.small {
max-height: 50%;
line-height: 0;
padding: 10px;
margin: 5px 0;
}
.header-action:hover {
background: linear-gradient(180deg,rgba(226,232,255,0.12) 0%,rgba(226,232,255,.12) 100%);
}
.header-action {
background: linear-gradient(180deg,rgba(226,232,255,0) 0%,rgba(226,232,255,.12) 100%);
padding: 8px 16px;
position: relative;
border-radius: 8px;
z-index: 1;
color: #fff;
border: 1px solid rgba(255,255,255, 0.01);
border-bottom: 1px solid rgba(255,255,255, 0.2);
}
.header-action:hover {
color: #fff;
}
@media (max-width: 640px) {
.glass {
display: none !important;
}
}
@keyframes gradient-move {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.button-container-borders {
position: relative;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 1px;
overflow: hidden; /* Ensure the pseudo-element doesn't overflow */
}
.button-container-borders-two {
position: relative;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 1px;
overflow: hidden; /* Ensure the pseudo-element doesn't overflow */
}
.button-secondary {
background: transparent;
border: none;
color: #fff;
padding: 10px 0;
font-weight: 400;
display: block;
text-align: center;
text-decoration: none;
}
.button-secondary:hover {
color: rgba(255,255,255,0.6);
}
/*.gradient-button {
padding: 5px 20px;
color: #fff;
border-radius: 5px;
background-image: var(--gradient);*/
/*background-image: linear-gradient(135deg, color(display-p3 .5725490196 .4156862745 1 / 1) 0%, color(display-p3 1 .4666666667 .6901960784 / 1) 50%, color(display-p3 1 .7019607843 .4039215686 / 1) 100%);*/
/*transition: transform .2s cubic-bezier(.6,.6,0,1), margin-top .2s cubic-bezier(.6,.6,0,1);
border: none;
}
.gradient-button:hover {
color: #fff;
background-position: 100% 50% !important;*/ /* Move the gradient on hover */
/*}
.gradient-button-outline {
padding: 5px 10px;
color: #fff;
border-radius: 8px;
background: #090923;
border: none;
position: relative;
border-radius: 5px;
font-weight: 200;
}
.gradient-button-outline:hover::before {
content: '';
position: absolute;
margin: 0 auto;
bottom: 0px;
left: 0;
height: 100%;
width: 100%;
filter: blur(5px);*/
/*background-image: linear-gradient(135deg, #926aff 0%, #ff77b0 50%, #ffb367 100%) !important;*/
/*background-image: linear-gradient(135deg, color(display-p3 .5725490196 .4156862745 1 / 1) 0%, color(display-p3 1 .4666666667 .6901960784 / 1) 50%, color(display-p3 1 .7019607843 .4039215686 / 1) 100%);*/
/*background-image: var(--gradient);
transition: transform .2s cubic-bezier(.6,.6,0,1), margin-top .2s cubic-bezier(.6,.6,0,1);
z-index: -1;
border-radius: 5px;
}
.gradient-button-outline:after {
content: '';
position: absolute;
left: -1px;
top: -1px;
height: calc(100% + 2px);
width: calc(100% + 2px);*/
/*background-image: linear-gradient(135deg, #926aff 0%, #ff77b0 50%, #ffb367 100%) !important;*/
/*background-image: linear-gradient(135deg, color(display-p3 .5725490196 .4156862745 1 / 1) 0%, color(display-p3 1 .4666666667 .6901960784 / 1) 50%, color(display-p3 1 .7019607843 .4039215686 / 1) 100%);*/
/*background-image: var(--gradient);
transition: transform .2s cubic-bezier(.6,.6,0,1), margin-top .2s cubic-bezier(.6,.6,0,1);
z-index: -1;
border-radius: 5px;
}
.gradient-button-outline:hover {
color: #fff;
background-position: 100% 50% !important;*/ /* Move the gradient on hover */
.gradient-button {
padding: 8px 20px;
color: #fff;
border-radius: 6px;
background-image: linear-gradient(135deg, #3a5fcd 0%, #5670c0 50%, #3abbb3 100%);
background-size: 200% auto;
position: relative;
transition: all 0.3s ease;
border: none;
font-weight: 500;
letter-spacing: 0.5px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 0 6px rgba(58, 95, 205, 0.6), 0 0 12px rgba(58, 112, 192, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.4);
}
/* Neon glow hover effect */
.gradient-button:hover {
color: #fff;
background-position: right center;
transform: translateY(-2px);
box-shadow: 0 0 10px rgba(58, 95, 205, 0.8), 0 0 20px rgba(58, 112, 192, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.6);
}
/* Add light effect within the button */
.gradient-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent );
transition: left 0.7s ease;
z-index: 1;
}
.gradient-button:hover::before {
left: 100%;
}
/* Add top edge neon light */
.gradient-button::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent );
opacity: 0;
transition: opacity 0.3s ease;
}
.gradient-button:hover::after {
opacity: 1;
}
/* Make sure text stays above effects */
.gradient-button span,
.gradient-button i {
position: relative;
z-index: 2;
}
/* Active state */
.gradient-button:active {
transform: translateY(0);
box-shadow: 0 0 8px rgba(58, 95, 205, 0.7), 0 0 16px rgba(58, 112, 192, 0.3), inset 0 0 2px rgba(255, 255, 255, 0.2);
}
@keyframes pulse {
0% {
box-shadow: 0 0 6px rgba(58, 95, 205, 0.6), 0 0 12px rgba(58, 112, 192, 0.3);
}
50% {
box-shadow: 0 0 10px rgba(58, 95, 205, 0.8), 0 0 20px rgba(58, 112, 192, 0.5);
}
100% {
box-shadow: 0 0 6px rgba(58, 95, 205, 0.6), 0 0 12px rgba(58, 112, 192, 0.3);
}
}
.gradient-button-outline {
padding: 8px 16px;
color: #fff;
border-radius: 6px;
background: rgba(9, 9, 35, 0.5);
position: relative;
font-weight: 400;
letter-spacing: 0.5px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
overflow: hidden;
z-index: 1;
}
/* Create the neon border glow effect */
.gradient-button-outline::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, #3a5fcd 0%, #5670c0 50%, #3abbb3 100%);
padding: 2px;
border-radius: 6px;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask-composite: xor;
z-index: -1;
transition: all 0.3s ease;
box-shadow: 0 0 8px rgba(86, 112, 192, 0.4), 0 0 16px rgba(58, 95, 205, 0.2);
}
/* Add subtle inner glow */
.gradient-button-outline::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(86, 112, 192, 0.8), transparent );
opacity: 0.5;
}
/* Ensure content stays above effects */
.gradient-button-outline span,
.gradient-button-outline i {
position: relative;
z-index: 2;
}
/* Hover state with enhanced glow */
.gradient-button-outline:hover {
color: #ffffff;
transform: translateY(-2px);
background-color: rgba(20, 30, 60, 0.8);
}
.gradient-button-outline:hover::before {
opacity: 1;
box-shadow: 0 0 10px rgba(86, 112, 192, 0.7), 0 0 20px rgba(58, 95, 205, 0.4);
}
/* Light sweep effect on hover */
.gradient-button-outline:hover::after {
animation: glow-sweep 1.5s ease-in-out infinite alternate;
}
/* Active state */
.gradient-button-outline:active {
transform: translateY(0);
}
/* Small variant for the "Whats this?" buttons */
.gradient-button-outline.small {
padding: 6px 12px;
font-size: 0.9em;
min-width: fit-content;
}
/* Animation for the light sweep effect */
@keyframes glow-sweep {
0% {
opacity: 0.2;
transform: translateX(-100%);
}
100% {
opacity: 0.8;
transform: translateX(100%);
}
}
.hero-background {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%);
width: 1000px;
display: flex;
justify-content: center;
z-index: -1;
}
.hero-background-circles, .hero-background-circle-lights {
width: 100%;
position: absolute;
top: 0;
}
.hero-background-circle {
border-radius: 50%;
position: absolute;
width: 100%;
height: 1000px; /* Adjust height as needed */
top: 0;
background-color: #05051e;
}
.hero-background-circle:before,
.hero-background-circle:after {
content: "";
border-radius: inherit;
position: absolute;
width: 100%;
height: 100%;
}
.hero-background-circle:before {
background: linear-gradient(to top, transparent 70%, rgba(255, 255, 255, 0.05) 100%);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask-composite: xor;
padding: 1px;
pointer-events: none;
}
.hero-background-circle:after {
background: linear-gradient(to top, transparent 90%, rgba(255, 255, 255, 0.05) 100%);
}
.hero-background-circle-lights img {
position: absolute;
top: 0;
left: 0;
width: 500px; /* Adjust to control the light effect size */
height: 500px; /* Adjust to control the light effect size */
filter: blur(20px); /* Adds a blur to make it look like light */
opacity: 0.8; /* Adjust opacity for a softer effect */
z-index: -1; /* Ensures it stays behind the main content */
animation: move-around 20s infinite linear; /* Moves the light effect */
}
/* Animation to move the light around the circle */
@keyframes move-around {
0% {
transform: translate(10%, 0%);
}
25% {
transform: translate(50%, -20%);
}
50% {
transform: translate(98%, 0%);
}
75% {
transform: translate(50%, -20%);
}
100% {
transform: translate(10%, 0%);
}
}
/* Dark Theme */
.dark {
--background-color: color(display-p3 .0196078431 .0196078431 .1176470588 / 1);
--background-color: #080719;
--background-color-opacity: color(display-p3 .0196078431 .0196078431 .1176470588 / 0.4);
--text-color: #ffffff;
--primary-color: #bb86fc;
}
/* Additional Themes */
.light {
--background-color: #fff;
--text-color: #333333;
--primary-color: #6200ea;
}
.glass {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, .01) !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
transition: opacity .45s cubic-bezier(.6,.6,0,1) !important;
z-index: 0;
border: none !important;
}
.filter-card {
width: 100%;
height: 50px;
content: "";
position: relative;
background: #000;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
transition: opacity .45s cubic-bezier(.6,.6,0,1) !important;
z-index: 0;
border: none !important;
border-radius: 5px;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
cursor: pointer;
display: flex;
padding: 5px;
align-items: center;
backdrop-filter: blur(15px);
}
.filter-card-spacer {
width: 2px;
height: 50%;
margin: 0 10px;
flex-grow: 1
}
.filter-card-label {
font-size: 10px;
transform: rotate(-90deg);
color: rgba(255,255,255,0.4);
text-transform: uppercase;
}
.filter-card-item.word {
font-size: 15px;
margin: 0 10px !important;
align-self: center;
justify-self: center;
color: rgba(255,255,255,0.6);
font-family: 'Product Sans' !important;
}
.filter-card-item {
font-family: phosphorIcon;
font-size: 22px;
color: rgba(255,255,255,0.6);
max-height: fit-content;
margin: 0 5px
}
.filter-card-item.active {
color: transparent; /* Make the text color transparent */
position: relative;
border-radius: 8px;
background-image: var(--gradient); /* Make the gradient repeat */
background-clip: text; /* Use the background as the text color */
-webkit-background-clip: text; /* For WebKit browsers */
background-size: 300% 300%; /* Increase the background size for a smoother effect */
animation: gradient-move 15s infinite linear; /* Adjust animation duration */
font-weight: 500;
color: rgba(255,255,255,0.4);
}
.filter-card-item.active:after {
content: "";
position: absolute;
bottom: -2px;
filter: blur(10px);
height: 8px;
width: 80%;
left: 10%;
background: rgba(255,255,255,0.4);
}
.glass-card {
/*overflow: hidden;*/
width: 100%;
height: 100%;
content: "";
position: relative;
background: rgba(0,0,0,0.2) !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
transition: opacity .45s cubic-bezier(.6,.6,0,1) !important;
z-index: 0;
border: none !important;
border-radius: 10px;
/*border-bottom: 1px solid rgba(255,255,255,0.1) !important;*/
cursor: pointer;
border-bottom: 2px solid #5670c0a7 !important;
border-left: 1px solid #5670c058 !important;
border-right: 1px solid #5670c058 !important;
border-top: 1px solid #5670c058 !important;
/*box-shadow: 0 0px 2px rgba(255,255,255,0.1), 0 -12px 20px #e2e8ff1f inset;*/
display: flex;
flex-direction: column;
z-index: 2 !important;
/*box-shadow: 2px 2px 15px rgba(255, 255, 255, 0.1);*/
opacity: 1;
backdrop-filter: blur(25px) !important;
overflow: hidden;
/*box-shadow: inset 0px 15px 15px -15px #a1b8ff, inset 0px 25px 25px #a1b8ff9f*/
}
.glass-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(to right, rgba(30, 85, 255, 0.1), rgba(0, 174, 255, 0.8) 20%, rgba(65, 105, 225, 1) 50%, rgba(0, 174, 255, 0.8) 80%, rgba(30, 85, 255, 0.1));
box-shadow: 0 0 5px rgba(30, 144, 255, 0.8), 0 0 10px rgba(0, 174, 255, 0.5), 0 0 20px rgba(65, 105, 225, 0.4);
opacity: 1;
z-index: 3;
}
/* Add holographic glow effect above header */
.glass-card::after {
content: '';
background: linear-gradient(90deg, transparent 5%, rgba(32, 120, 255, 0.3) 20%, rgba(65, 170, 255, 0.6) 50%, rgba(32, 120, 255, 0.3) 80%, transparent 95%);
position: absolute;
top: -25px;
left: -10%;
width: 120%;
height: 45px;
filter: blur(8px);
border-radius: 50%;
opacity: 0.6;
z-index: 0;
animation: neonPulse 4s infinite alternate;
}
/*.glass-card::after {
content: '';
height: calc(100% + 2px);
width: 100%;
background: var(--gradient-color);
position: absolute;
z-index: -2;
background-size: 300% 300%;*/ /* Increase the background size for a smoother effect */
/*animation: gradient-move 5s infinite linear;*/ /* Adjust animation duration */
/*box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.1);*/
/*border-radius: 5px
}*/
/* .glass-card::before {
content: '';
height: 100%;
width: 100%;
background: #080823;
position: absolute;
z-index: -1;
left: 0;
top: .5px;
box-shadow: -2px -2px 5px rgba(255, 255, 255, 0.05);
border-radius: 4px
}*/
.glass-card-header {
display: flex;
justify-content: space-between;
padding: 10px;
background: rgba(226, 232, 255, .05);
overflow: hidden;
}
.glass-card-header h6 {
margin: 0;
font-weight: 900;
font-size: 20px
}
.glass-card-body {
padding: 10px;
padding-top: 20px;
flex: 1;
}
.glass-card-body .description, .glass-card-footer .description {
font-weight: 300;
max-width: 800px;
max-height: fit-content;
overflow: hidden;
white-space: nowrap; /* Ensure text is on one line */
text-overflow: ellipsis; /* Apply ellipsis */
}
.glass-card-footer {
display: flex;
justify-content: end;
align-content: center;
align-items: center;
padding: 10px;
gap: 10px;
border-top: 1px solid rgba(255,255,255,0.1);
justify-self: end;
margin-top: 20px;
}
.glass-card-footer p, .glass-card-footer span {
margin: 0;
}
.glass-modal {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, .01) !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(25px) grayscale(0.7) !important;
transition: opacity .45s cubic-bezier(.6,.6,0,1) !important;
z-index: 999999;
border: none !important;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
}
.glass-modal-content {
max-width: 1000px;
max-width: 90vw;
}
/* .glass:before {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, .01);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
transition: opacity .45s cubic-bezier(.6,.6,0,1);
z-index: 0;
}*/
a, .btn-link {
color: #006bb7;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding: 1.1rem 0;
max-height: calc(100vh - 56px) !important;
overflow: hidden;
overflow-y: auto !important;
}
@media (max-width: 640px) {
.content {
padding-top: 1.1rem;
max-height: 100vh !important;
overflow: hidden;
overflow-y: auto !important;
}
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NzAyNi44OTYzIDE3OCAxIDExLjQ4NjUgMjI0LjcxIDAgOC4xMDUgMTEuMzIzNyAzLjcwMyA2LjQ1NjM0MS43Mzk3IDAgOC4xMDUgMTEuMzIzNiAxMTQuNjYzNyAzLjcwMiA2LjQ1NjM0Ny40MjYwMi43OTIgMCA4LjEwNSA4LjYzMyA5LjAwNiA2LjQ1NjM0NS43OTUgMCA4LjEwNSAxMS4zMjMzIDguNjMzNiA5LjAwNiA2LjQ1NjM0NS43OTQgMCA4LjEwNSAxMS4zMjMzIDkuMDA2IDguNjMzNiA5LjM2MjI2Ljc3MiAwLjg5NyA2LjQ1NjM0Ny43MTIgMCA4LjEwNSAxMS4zMjMzIDkuMDA3IDguNjMzNiA5LjY0NzUgMi5hbmc6ZmlyZXIpOyIgZmlsbD0iI0ZGRTUwMCIgZmlsbC1ydWxlPSJldmVub2tkIi8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.sidebar[b-fxeq9bnkn3] {
background-image: none !important;
background: rgba(255, 255,255,0.1);
}
.flex-fullpage {
display: flex;
flex-direction: column;
height: 90vh;
overflow: auto;
width: 100%;
align-items: center;
justify-content: center;
overflow-x: clip;
}
.flex-fullpage-close {
position: absolute;
top: 20px;
right: 20px;
z-index: 999;
color: #fff;
text-decoration: none;
font-size: 18px;
cursor: pointer;
}
.flex-fullpage-close:hover {
text-decoration: none;
color: rgba(255,255,255,0.7);
}
/*.hirelense-input {
width: 100%;
height: 50px;
background: linear-gradient(180deg,rgba(226,232,255,0) 0%,rgba(226,232,255,.12) 100%);
padding: 8px 16px;
position: relative;
border-radius: 8px;
z-index: 1;
color: #fff;
border: 1px solid rgba(255,255,255, 0.01);
border-bottom: 1px solid rgba(255,255,255, 0.2);
}*/
.hirelense-input {
width: 100%;
/*height: 50px;*/
background: rgba(226,232,255,0.05);
padding: 8px 16px;
position: relative;
border-radius: 8px;
z-index: 1;
color: #fff;
border: none !important;
border-bottom: none !important;
box-shadow: none;
font-size: 20px;
outline: none;
font-weight: 100;
}
select.hirelense-input {
width: 100%;
/*height: 50px;*/
background: #fff;
padding: 8px 16px;
position: relative;
border-radius: 8px;
z-index: 1;
color: var(--background-color);
border: none !important;
border-bottom: none !important;
box-shadow: none;
font-size: 20px;
outline: none;
font-weight: 200;
}
.selection-card {
background: linear-gradient(180deg,rgba(226,232,255,0) 0%,rgba(226,232,255,.12) 100%);
padding: 8px 16px;
position: relative;
border-radius: 8px;
z-index: 1;
color: #fff;
border: 1px solid rgba(255,255,255, 0.01);
border-bottom: 1px solid rgba(255,255,255, 0.2);
cursor: pointer;
}
.selection-card-header {
text-align: center;
font-size: 20px;
font-weight: 300;
}
.selection-card-image {
font-family: phosphorIcon;
font-size: 60px;
color: #fff; /* Make the text color transparent */
position: relative;
font-weight: 500;
text-align: center;
}
.selection-card-body {
text-align: center;
}
.selection-card.active {
background: var(--gradient) !important;
}
.button-container-borders:before, .button-container-borders:before {
content: '';
z-index: -1;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
position: absolute;
width: 99999px;
height: 99999px;
background-repeat: no-repeat;
background-position: 0 0;
/*border color, change middle color*/
background-image: conic-gradient(rgba(255,255,255,0), rgba(255,255,255,.7) 25%, rgba(0,0,0,0) 25%);
/* change speed here */
animation: rotate 4s linear infinite;
}
.button-container-borders:after {
content: '';
position: absolute;
z-index: -1;
/* border width */
left: 5px;
top: 5px;
/* double the px from the border width left */
width: calc(100% - 10px);
height: calc(100% - 10px);
/*bg color*/
background: #292a2e;
/*box border radius*/
border-radius: 7px;
}
@keyframes rotate {
100% {
transform: translate(-50%, -50%) rotate(1turn);
}
}
/*.button-container-borders-two:before, .button-container-borders-two:before {
content: '';
z-index: -1;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
position: absolute;
width: 99999px;
height: 99999px;
background-repeat: no-repeat;
background-position: 0 0;*/
/*border color, change middle color*/
/*background-image: conic-gradient(rgba(255,255,255,0), rgba(255,255,255,.7) 25%, rgba(0,0,0,0) 25%);*/
/* change speed here */
/*animation: rotate 4s linear infinite;
}
.button-container-borders-two:after {
content: '';
position: absolute;
z-index: -1;*/
/* border width */
/*left: 5px;
top: 5;*/
/* double the px from the border width left */
/*width: calc(100% - 10px);
height: calc(100% - 10px);*/
/*bg color*/
/*background: #292a2e;*/
/*box border radius*/
/*border-radius: 7px;
}*/
.media-controls {
}
.media-button {
position: relative;
font-family: 'phosphorIcon';
height: 80px;
width: 80px;
background: #926aff;
margin: 0 auto;
border-radius: 45px 45px 45px 26px;
font-size: 45px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
box-shadow: 0 0 5px rgba(255,255,255,.7);
text-shadow: 0 0 5px rgba(255,255,255,0.7);
}
.media-button.play {
}
.media-button.play:after {
font-family: 'Product Sans' !important;
position: absolute;
content: "Preview voice";
top: 3px;
left: 25px;
font-size: 10px;
min-width: max-content;
background-image: linear-gradient(50deg, #926aff 50%, #ff77b0, #ffb367 ) !important;
border-radius: 10px;
padding: 0 10px;
}
.inline-play {
font-family: 'phosphorIcon';
margin: 0;
margin-right: 10px;
color: #ff77b0;
}
.inline-play.bad {
color: var(--bs-danger);
}
.clickable {
padding: 5px 10px !important;
margin: 5px 0;
/*border-left: 1px solid #ff77b0;*/
}
.clickable:hover {
background: rgba(255,255,255,0.2) !important;
}
.application-entry-description {
font-weight: 100;
max-width: 100%;
overflow: hidden;
display: -webkit-box; /* Establish a flexible box container */
-webkit-box-orient: vertical; /* Set the orientation to vertical */
-webkit-line-clamp: 4; /* Limit the text to 3 lines */
line-clamp: 4; /* Standard property for non-WebKit browsers */
text-overflow: ellipsis; /* Apply ellipsis */
margin: 5px 0;
}
.application-entry-description-no-truncate {
font-weight: 100;
max-width: 100%;
overflow: hidden;
margin: 5px 0;
font-size: 18px;
}
.interview {
height: 100vh;
width: 100vw;
}
.interview-body {
height: 100%;
width: 100%;
display: flex;
gap: 10px;
align-content: center;
align-items: center;
justify-content: center;
}
.interview-container {
height: 100%;
width: 100%;
max-height: 800px;
max-width: 800px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 3px;
background: #646464;
}
.orb {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.orb .avatar {
background: linear-gradient(135deg, #926aff, #ff77b0, #ffb367, #926aff);
border-radius: 50%;
height: 80px;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.orb .name {
}
.orb .avatar h1 {
margin: 0;
font-size: 50px;
}
.orb .name p {
margin: 20px 0;
font-weight: 200;
text-align: center;
width: 100%;
}
.interview-modal {
position: fixed;
z-index: 999999;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
display: flex;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(5px);
justify-content: center;
align-items: center;
}
.interview-modal-body {
display: flex;
align-items: center;
flex-direction: column;
}
.ranking-block {
width: 30px;
max-width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 30px;
background: rgba(255,255,255,0.2);
border-radius: 10px;
font-size: 20px;
margin-right: 10px !important;
position: relative;
/*box-shadow: 2px 2px 8px rgba(255,255,255,0.3);*/
}
.experience-time-block {
width: 50px;
max-width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 40px;
background: #ff77b0;
border-radius: 50%;
font-size: 30px;
margin-right: 10px !important;
position: relative;
box-shadow: 2px 2px 8px rgba(255,255,255,0.3);
}
.reference-initial-block {
width: 50px;
max-width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 50px;
background: #926aff;
border-radius: 50%;
font-size: 30px;
margin-right: 10px !important;
position: relative;
box-shadow: 2px 2px 8px rgba(255,255,255,0.3);
}
.experience-time-block::after {
content: 'years';
position: absolute;
font-size: 10px;
bottom: -6px;
left: 0;
width: 100%;
font-weight: 100;
}
.background-items {
content: '';
/*background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .01));*/
;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -2;
filter: blur(10px);
opacity: 1;
}
.background-shape {
position: absolute;
/*background-image: linear-gradient(135deg, #926aff, #ff77b0, #ffb367, #926aff);*/
/*background-image: linear-gradient(-135deg, #5670c0 30%, #3abbb3 100%);*/
background-image: radial-gradient( circle, #0b1e58 100%, transparent 100%);
height: var(--height);
width: var(--width);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
left: var(--left);
top: var(--top);
opacity: 1 !important;
animation: flow 60s infinite ease-in-out alternate;
will-change: transform;
filter: none !important;
overflow: hidden;
border-right: 1px solid #5670c0;
}
/*.background-shape::before {
content: '';
background: #99dff7;*/
/*background: #fff;*/
/*position: absolute;
top: 0px;
left: 10%;
width: 80%;
height: 30px;*/
/*filter: blur(2px);*/
/*border-radius: 100vh;
}
.background-shape::after {
content: '';
background: #6ab1e4;
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 55px;
filter: blur(25px);
border-radius: 100vh;
}*/
@keyframes flow {
0% {
transform: rotate(var(--rotation)) translate(0, 0);
}
25% {
transform: rotate(var(--rotation)) translate(230px, -250px);
}
50% {
transform: rotate(var(--rotation)) translate(-240px, 280px);
}
75% {
transform: rotate(var(--rotation)) translate(150px, -130px);
}
100% {
transform: rotate(var(--rotation)) translate(0, 0);
}
}
@keyframes drift {
0% {
transform: rotate(var(--rotation)) scale(1) translate(0, 0);
}
50% {
transform: rotate(var(--rotation)) scale(1.2) translate(20px, -20px);
}
100% {
transform: rotate(var(--rotation)) scale(1) translate(0, 0);
}
}
input[type="date"], input[type="time"] {
padding-left: 48px;
}
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator {
color: #fff;
filter: invert(100%) drop-shadow(0 0 2px #ff77b098) drop-shadow(0 0 3px #926aff98) drop-shadow(0 0 3px #ffb36798);
font-size: 35px;
margin: 0;
cursor: pointer;
position: absolute;
left: 2px;
top: 5px;
}
input[type="date"]::-ms-clear, input[type="time"]::-ms-clear {
color: #fff;
filter: invert(100%) drop-shadow(0 0 5px#ff77b0);
font-size: 25px;
margin: 0;
}
input, textarea {
box-shadow: 0 0 5px #926aff63;
}
.donut-chart {
position: relative;
width: 130px;
height: 130px;
border-radius: 50%;
background: var(--percentage);
margin: 0 auto;
margin-bottom: 20px;
}
.donut-chart::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 90%;
height: 90%;
background-color: var(--bg, #050520);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.donut-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
font-weight: bold;
text-align: center;
}
.donut-label {
margin-top: 10px;
text-align: center;
font-size: 14px;
color: #fff;
}
.inbox-main {
display: flex;
width: 100%;
height: 100%;
gap: 20px;
height: calc(100vh - 100px);
}
.inbox-chats {
width: 450px;
height: calc(100vh - 100px);
overflow: hidden;
overflow-y: auto;
}
.inbox-chat {
border-bottom: 1px solid rgba(255,255,255,0.2);
height: 70px;
display: flex;
align-items: center;
width: 100%;
gap: 10px;
padding: 10px;
}
.inbox-chat.active {
background: rgba(255,255,255,0.4)
}
.inbox-chat img {
border-radius: 5px;
height: 40px;
width: 40px;
}
.inbox-messages {
width: 100%;
height: calc(100vh - 160px);
flex-direction: column-reverse;
}
.inbox-message {
padding: 20px;
margin: 10px 20px;
width: 80%;
}
.inbox-message.in {
padding: 20px;
background-image: var(--gradient);
border-radius: 5px 5px 0px 5px;
opacity: 0.9;
}
.inbox-message.out {
padding: 20px;
background: rgba(255,255,255,0.2);
align-self: end !important;
border-radius: 5px 5px 5px 0px;
}
.send-user {
/*margin: 0;*/
font-size: 12px;
}
.sent-time {
margin: 0;
text-align: right;
font-size: 12px;
}
.inbox-input {
align-self: start;
display: flex;
margin-top: 10px;
}
.inbox-input textarea {
width: 90%;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.inbox-input button {
width: 10%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.mud-alert-filled-info {
color: var(--mud-palette-info-text);
font-weight: 500;
background-color: #ff77b0;
}
.custom-dropdown {
position: relative;
display: block;
background: linear-gradient(180deg, rgba(226, 232, 255, 0) 0%, rgba(226, 232, 255, .12) 100%);
margin-top: 10px;
}
.dropdown-header {
color: #fff;
padding: 8px 16px;
border-top: 1px solid #ff77b05c !important;
border-left: 1px solid #ff77b05c !important;
border-bottom: 1px solid #ffb36771 !important;
border-right: 1px solid #ffb36771 !important;
box-shadow: 0 0 5px #926aff63;
cursor: pointer;
user-select: none;
border-radius: 8px;
min-height: 45px;
line-height: 30px;
}
.dropdown-arrow {
float: right;
}
.dropdown-list {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
width: 100%;
border: 1px solid #ccc;
list-style: none;
padding: 0;
margin: 0;
background: #050520;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.dropdown-item {
color: #fff;
padding: 10px;
cursor: pointer;
}
.dropdown-item:hover {
background-color: #eee; /* Your preferred hover color */
}
.pill-container {
border: solid 1px rgba(255,255,255,0.4);
background: rgba(255,255,255,0.1);
border-radius: 10px;
padding: 10px;
margin-bottom: 30px;
gap: 10px;
}
.pill {
max-width: fit-content;
margin-left: 10px;
}
.ordering-change {
text-align: center;
font-family: phosphorIcon;
font-weight: 900;
font-size: 25px;
padding: 0 10px;
margin: 0;
width: 40px;
}
.ordering-change.up {
}
.ordering-change.down {
}
.voice-recorder-container {
}
.recording-button {
background-image: linear-gradient(135deg, color(display-p3 .5725490196 .4156862745 1 / 1) 0%, color(display-p3 1 .4666666667 .6901960784 / 1) 50%, color(display-p3 1 .7019607843 .4039215686 / 1) 100%);
height: 100px;
width: 100px;
border-radius: 100vh;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 2px 2px 8px #ff77b098, 0px 0px 8px #ffb36771;
border-radius: 10px;
transition: border-radius 1s ease;
}
.recording-button.active {
background-image: linear-gradient(135deg, #ff7777 0%,#ff77b0 50%, #ff7777 100%);
border-radius: 100vh;
}
.recording-button p {
margin: 0;
}
.recording-button p::selection {
background-color: transparent; /* Change the highlight color to yellow */
color: #fff; /* Change the text color to black */
}
#waveform {
max-width: 800px;
margin: 0 auto;
position: relative;
margin-bottom: 60px !important;
margin-top: 60px;
}
#waveform button {
z-index: 99999;
position: absolute;
/*left: calc(50% - 40px);
top: calc(50% - 20px);*/
top: 0;
left: 0;
height: 100%;
width: 100%;
font-size: 40px;
font-family: phosphorIcon;
background: rgba(0,0,0,0.1);
/*backdrop-filter: blur(1px);*/
border-radius: 5px;
text-shadow: 0 0 5px rgba(0,0,0,1);
border-radius: 5px;
/*box-shadow: 0 0 8px rgba(0,0,0,1);*/
}
.voices {
display: flex;
gap: 20px;
align-items: center;
justify-content: center;
margin: 20px 0;
margin-top: 50px !important;
}
.voice-orb {
height: 140px;
width: 140px;
text-align: center;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
background-image: linear-gradient(135deg, color(display-p3 .5725490196 .4156862745 1 / 1) 0%, color(display-p3 1 .4666666667 .6901960784 / 1) 50%, color(display-p3 1 .7019607843 .4039215686 / 1) 100%);
border-radius: 100vh;
filter: grayscale(1) blur(1px);
opacity: 0.6;
cursor: pointer;
}
.voice-orb.active {
filter: none;
opacity: 1 !important;
transform: scale(1.1)
}
.voice-orb p {
margin: 0;
text-shadow: 0 0 8px rgba(0,0,0,0.4);
}
input::placeholder, textarea::placeholder {
color: rgba(255,255,255,0.4); /* Change to your desired color */
opacity: 1; /* Ensures full color visibility */
font-weight: 200;
}
/* For better browser compatibility */
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: gray;
}
input::-ms-input-placeholder { /* Microsoft Edge */
color: gray;
}
.leaflet-tooltip {
position: absolute;
padding: 6px;
padding-right: 10px !important;
background-color: #000 !important;
border: 1px solid #ff77b0 !important;
border-radius: 30px !important;
color: #fff !important;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
display: flex;
align-content: center;
align-items: center;
}
.leaflet-tooltip .header {
display: flex;
}
.leaflet-tooltip img {
width: 40px !important;
height: 40px !important;
display: inline-block;
border-radius: 50%;
background-position: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
object-fit: cover;
border: 1px solid rgba(0,0,0, 0.1) !important;
}
.leaflet-tooltip h6 {
margin: 0;
font-weight: 100 !important;
font-size: 18px;
display: inline-block;
margin-left: 10px;
line-height: 0;
}
.leaflet-tooltip p {
/*margin: 0;*/
font-weight: 800;
}
.leaflet-tooltip::before, .leaflet-tooltip::after {
border-left-color: inherit;
}
.leaflet-interactive {
stroke: #ff77b0 !important;
fill: #ff77b0 !important;
/*min-height: 100vh !important;*/
overflow: visible;
}
.landing-map {
position: relative;
overflow: hidden;
overflow-x: visible !important;
opacity: 0.9;
height: 100%;
width: 100%;
}
.map-filters-left {
width: 270px;
border: 1px solid rgba(255,255,255, 0.2);
border-top-left-radius: var(--radius);
border-bottom-left-radius: var(--radius);
box-shadow: 5px 0 8px rgba(0,0,0,0.8);
z-index: 99;
overflow: hidden;
background: rgba(255,255,255, 0.03);
transition: all 0.5s;
position: absolute;
top: 0;
background: var(--background-color);
height: 100%;
}
.map-filters-right {
width: 270px;
border: 1px solid rgba(255,255,255, 0.2);
border-top-right-radius: var(--radius);
border-bottom-right-radius: var(--radius);
box-shadow: -5px 0 8px rgba(0,0,0,0.8);
z-index: 99999;
overflow: auto;
background: var(--background-color);
transition: all 0.5s;
position: absolute;
top: 0;
right: 0px;
height: 100%;
}
.map-filters-header {
padding: 10px;
background: var(--faded-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.map-filters-header button {
height: 30px;
}
.map-filters-results {
padding: 10px;
}
.or-text {
color: #fff !important;
font-weight: 100;
margin: 30px !important;
}
.map-filters-results-item {
border: 1px solid var(--border-color);
padding: 10px;
border-radius: var(--radius);
}
.map-filters-results-item label {
font-weight: 600;
}
.map-filters-results-item p {
font-weight: 200;
}
.map-filters-header p {
margin: 0;
}
.map-container {
margin-top: 0px !important;
display: flex;
min-width: 100% !important;
overflow: hidden !important;
}
.leaflet-tile-container img {
filter: hue-rotate(200deg);
}
.place-item {
display: flex;
gap: 5px;
cursor: pointer;
padding: 10px;
align-items: center;
border-radius: 5px;
border: 1px solid var(--border-color);
margin-bottom: 5px;
}
.place-item p {
margin: 0;
}
.place-item:hover {
background: var(--border-color);
}
.loading-data {
position: absolute;
width: 100%;
height: 100%;
content: '';
z-index: 9999;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
backdrop-filter: var(--background-color);
background: rgba(0,0,0,0.4);
font-size: 30px;
}
.map-filter {
z-index: 9999 !important;
width: 100%;
gap: 10px;
display: flex;
cursor: pointer;
}
.map-filter-item {
display: flex;
flex: 1;
justify-items: center;
justify-content: center;
background: linear-gradient(180deg,rgba(226,232,255,0) 0%,rgba(226,232,255,.12) 100%);
border: 1px solid rgba(255,255,255,0.4);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 5px;
height: 40px;
align-items: center;
cursor: pointer;
}
.map-filter-item:hover {
background: var(--border-color) !important;
}
#face-detection-canvas-candidate {
border: none !important;
}
h3 {
font-size: calc(1.3rem + .6vw) !important;
font-weight: inherit !important;
}
h2 {
font-size: calc(1.6rem + .6vw) !important;
font-weight: inherit !important;
}
h1 {
font-size: calc(2rem + .6vw) !important;
font-weight: inherit !important;
}
.weight-100 {
font-weight: 100 !important;
}
.weight-200 {
font-weight: 200 !important;
}
.weight-300 {
font-weight: 300 !important;
}
.weight-400 {
font-weight: 400 !important;
}
.weight-500 {
font-weight: 500 !important;
}
.weight-600 {
font-weight: 600 !important;
}
.weight-700 {
font-weight: 700 !important;
}
.weight-800 {
font-weight: 800 !important;
}
.weight-900 {
font-weight: 900 !important;
}
.salary-input-group {
display: flex;
align-items: center;
width: 100%;
}
.currency-symbol {
background-color: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.1);
border-right: none;
border-radius: 5px 0 0 5px;
padding: 10px 16px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
min-width: 50px;
text-align: center;
}
.salary-input-group .hirelense-input {
border-radius: 0 5px 5px 0;
flex-grow: 1;
margin: 0;
}
.grayed-out td {
opacity: 0.6 !important;
border-bottom: 1px solid rgba(255, 255, 255,0.2) !important;
}
.grayed-out-two td {
opacity: 0.4 !important;
border-bottom: 1px solid rgba(255, 255, 255,0.1) !important;
}
.kicked-number {
background: rgba(231, 76, 60, 0.5);
color: #fff !important;
display: block;
max-width: fit-content;
padding: 0 5px;
border-radius: 5px;
border: 1px solid rgba(231, 76, 60, 0.5);
}
.action-buttons {
border-bottom: none !important;
}
article {
padding-left: 0 !important;
padding-right: 0 !important;
}
.dashboard-container {
padding: 2rem;
background: transparent !important;
min-height: 100vh;
}
/* Welcome Section for modern pages */
.welcome-section {
position: relative;
text-align: center;
padding: 0rem 0;
margin-bottom: 2rem;
margin-top: 0px;
}
.welcome-title {
font-weight: 100 !important;
font-size: clamp(3rem, 4vw, 3.2rem) !important;
margin-bottom: 0.5rem;
color: #fff;
}
.welcome-accent {
font-weight: 300 !important;
background: linear-gradient(45deg, #926aff, #50A0F0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ai-insights {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
color: rgba(255, 255, 255, 0.8);
font-size: 1.1rem;
}
/* Applications Section Styles */
.applications-overview,
.applications-section {
margin-bottom: 3rem;
}
.section-title {
color: #fff;
font-weight: 300;
font-size: 2rem;
margin-bottom: 2rem;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(45deg, #926aff, #28C896);
border-radius: 2px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.stat-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 10px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
gap: 10px;
align-content: center;
align-items: center;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.2);
}
.stat-card.primary {
border-left: 4px solid #926aff;
}
.stat-card.secondary {
border-left: 4px solid #50A0F0;
}
.stat-card.accent {
border-left: 4px solid #ff77b0;
}
.stat-card.success {
border-left: 4px solid #28C896;
}
.stat-card.orange {
border-left: 4px solid #ef8f2f;
}
.stat-card.info {
border-left: 4px solid #3b82f6;
}
.stat-icon {
position: relative;
min-width: 60px;
min-height: 60px;
max-width: 60px;
max-height: 60px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
background: linear-gradient(45deg, rgba(146, 106, 255, 0.2), rgba(40, 200, 150, 0.2));
}
.stat-icon .material-symbols-outlined {
font-size: 2rem;
color: #28C896;
}
.icon-glow {
position: absolute;
width: 100%;
height: 100%;
border-radius: 15px;
background: linear-gradient(45deg, #926aff, #28C896);
opacity: 0.3;
filter: blur(10px);
animation: iconGlow 3s ease-in-out infinite alternate;
}
@keyframes iconGlow {
0% {
opacity: 0.2;
transform: scale(0.9);
}
100% {
opacity: 0.4;
transform: scale(1.1);
}
}
.stat-label {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.stat-value {
color: #fff;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
background: linear-gradient(45deg, #926aff, #28C896);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-trend {
display: flex;
align-items: center;
align-self: end;
gap: 0.3rem;
font-size: 0.85rem;
}
.stat-trend.positive {
color: #28C896;
}
.stat-trend.neutral {
color: rgba(255, 255, 255, 0.7);
}
/* Application Cards */
.applications-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
gap: 2rem;
}
.application-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 0;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
display: flex;
flex-direction: column;
}
.application-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.2);
}
.application-card.ready {
border-left: 4px solid #50A0F0;
}
.application-card.in-progress {
border-left: 4px solid #ff77b0;
}
.application-card.completed {
border-left: 4px solid #28C896;
}
.application-card-header {
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.application-info h3.application-title {
color: #fff;
margin: 0 0 0.5rem 0;
font-size: 1.5rem;
font-weight: 500;
}
.application-type {
color: rgba(255, 255, 255, 0.8);
margin: 0 0 0.25rem 0;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.application-company {
color: rgba(255, 255, 255, 0.6);
margin: 0;
font-size: 0.85rem;
}
.application-status {
position: relative !important;
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
gap: 30px;
z-index: 2;
}
.overall-score {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.score-circle {
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: rgba(255, 255, 255, 0.1);
border: 3px solid;
}
.score-circle.high-score {
border-color: #28c896;
background: rgba(40, 200, 150, 0.1);
}
.score-circle.medium-score {
border-color: #50a0f0;
background: rgba(80, 160, 240, 0.1);
}
.score-circle.low-score {
border-color: #ff6b6b;
background: rgba(255, 107, 107, 0.1);
}
.score-number {
font-size: 20px;
font-weight: 700;
color: white;
}
.score-percent {
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}
.score-label {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
text-align: center;
}
/*.status-indicator {
width: 50px;
height: 50px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
filter: grayscale(1);
background: linear-gradient(45deg, rgba(80, 160, 240, 0.2), rgba(80, 160, 240, 0.4));
border: 2px solid #50A0F0;
}*/
/* .status-indicator:nth-of-type(1).active {
filter: grayscale(0);
background: linear-gradient(45deg, rgba(40, 200, 150, 0.2), rgba(40, 200, 150, 0.4));
border: 2px solid #28C896;
}
.status-indicator:nth-of-type(2).active {
filter: grayscale(0);
background: linear-gradient(45deg, rgba(40, 200, 150, 0.2), rgba(40, 200, 150, 0.4));
border: 2px solid #28C896;
}
.status-indicator:nth-of-type(3).active {
filter: grayscale(0);
background: linear-gradient(45deg, rgba(40, 200, 150, 0.2), rgba(40, 200, 150, 0.4));
border: 2px solid #28C896;
}*/
/* .status-indicator:not(:last-child)::after {
position: absolute !important;
content: '';
height: 2px;
width: 32px;
right: -52px;
background-color: rgba(255,255,255,0.3);
z-index: -1 !important;
background: linear-gradient(45deg, rgba(40, 200, 150, 0.2), rgba(40, 200, 150, 0.4));
}
*/
.status-indicator.ready {
background: linear-gradient(45deg, rgba(80, 160, 240, 0.2), rgba(80, 160, 240, 0.4));
border: 2px solid #50A0F0;
}
.status-indicator.in-progress {
background: linear-gradient(45deg, rgba(255, 119, 176, 0.2), rgba(255, 119, 176, 0.4));
border: 2px solid #ff77b0;
}
.status-indicator.completed {
background: linear-gradient(45deg, rgba(40, 200, 150, 0.2), rgba(40, 200, 150, 0.4));
border: 2px solid #28C896;
}
.status-indicator .material-symbols-outlined {
font-size: 1.5rem;
color: #28C896 !important;
}
.status-text {
position: absolute;
top: -20px;
color: rgba(255, 255, 255, 0.4);
font-size: 10px;
font-weight: 500;
}
.application-card-body {
padding: 0 2rem 1rem;
flex: 1;
}
.application-stats {
display: flex;
flex-direction: column;
gap: 1rem;
}
.stat-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.stat-item .material-symbols-outlined {
font-size: 1.2rem;
color: #926aff;
}
.expander-icon {
display: flex;
justify-content: center;
border-radius: 5px;
margin: 10px 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s;
}
.expander-icon:hover {
background: rgba(146, 106, 255, 0.2);
}
.expander-icon .material-symbols-outlined {
transition: transform 0.1s;
}
.expander-icon .material-symbols-outlined.up {
transform: rotate(0deg);
font-size: 40px !important;
}
.expander-icon .material-symbols-outlined.down {
transform: rotate(180deg);
font-size: 40px !important;
}
.application-card-footer {
padding: 1.5rem;
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: auto;
}
.action-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 10px;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
}
.action-btn.primary {
background: linear-gradient(45deg, #926aff, #50A0F0);
box-shadow: 0 4px 12px rgba(146, 106, 255, 0.3);
}
.action-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(146, 106, 255, 0.4);
}
.action-btn.secondary {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.action-btn.secondary:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
.completion-message {
display: flex;
align-items: center;
gap: 0.5rem;
color: #28C896;
font-size: 0.9rem;
font-weight: 500;
}
.empty-state {
text-align: center;
padding: 4rem 2rem;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
margin: 2rem 0;
}
.empty-state-icon .material-symbols-outlined {
font-size: 4rem;
color: rgba(255, 255, 255, 0.5);
}
.empty-state h3 {
color: #fff;
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: 300;
}
.empty-state p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 2rem;
font-size: 1.1rem;
}
/* chart styles */
@keyframes slidein {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chart-container {
margin: 2rem 0;
animation: slidein 0.7s ease-out forwards;
}
.chart-title {
color: #fff;
font-size: 1.5rem;
margin-bottom: 1rem;
position: relative;
}
.chart-title::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background: linear-gradient(90deg, #926aff, #50A0F0);
border-radius: 2px;
}
.chart {
width: 100%;
height: 400px;
border-radius: 10px;
overflow: hidden;
position: relative;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* end of chart styles */
/* Tooltip styles */
.custom-tooltip {
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 10px;
font-size: 0.875rem;
pointer-events: none;
position: absolute;
z-index: 10;
white-space: nowrap;
transform: translate(-50%, -100%);
/* Add a smooth transition for opacity */
transition: opacity 0.3s ease;
opacity: 0;
}
.custom-tooltip.show {
opacity: 1;
}
/* Candidate Management Modal Styles */
.candidate-management-modal {
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
width: 90%;
max-width: 800px;
max-height: 90vh;
display: flex;
flex-direction: column;
animation: modalSlideIn 0.3s ease-out;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: scale(0.9) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.candidate-management-modal .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(135deg, rgba(146, 106, 255, 0.1), rgba(146, 106, 255, 0.05));
}
.candidate-management-modal .modal-title {
display: flex;
align-items: center;
gap: 0.75rem;
}
.candidate-management-modal .modal-title .material-symbols-outlined {
font-size: 1.5rem;
color: #926aff;
}
.candidate-management-modal .modal-title h3 {
margin: 0;
color: #fff;
font-size: 1.25rem;
font-weight: 600;
}
.candidate-management-modal .modal-close {
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 8px;
padding: 0.5rem;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 0.3s ease;
}
.candidate-management-modal .modal-close:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.candidate-management-modal .modal-content {
flex: 1;
padding: 1.5rem 2rem;
overflow-y: auto;
max-height: calc(90vh - 140px);
}
.candidate-management-modal .loading-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 2rem;
text-align: center;
color: #fff;
}
.candidate-management-modal .loading-section .spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #926aff;
animation: spin 1s ease-in-out infinite;
margin-bottom: 1rem;
}
.candidate-management-modal .candidates-section {
display: flex;
flex-direction: column;
gap: 1rem;
}
.candidate-management-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.25rem;
transition: all 0.3s ease;
}
.candidate-management-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(146, 106, 255, 0.3);
}
.candidate-management-card.promoted {
border-color: #28C896;
background: rgba(40, 200, 150, 0.1);
}
.candidate-management-card.can-promote {
border-color: rgba(255, 193, 7, 0.4);
}
.candidate-management-modal .candidate-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.candidate-management-modal .candidate-avatar {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, #926aff, #6b46c1);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 1.1rem;
flex-shrink: 0;
}
.candidate-management-modal .candidate-info {
flex: 1;
min-width: 0;
}
.candidate-management-modal .candidate-name {
color: #fff;
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0.25rem;
}
.candidate-management-modal .candidate-status {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.candidate-management-modal .candidate-score {
text-align: center;
min-width: 80px;
}
.candidate-management-modal .candidate-score .score-value {
display: block;
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.25rem;
padding: 0.25rem 0.5rem;
border-radius: 8px;
}
.candidate-management-modal .candidate-score .score-label {
color: rgba(255, 255, 255, 0.6);
font-size: 0.8rem;
}
.candidate-management-modal .candidate-details {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
}
.candidate-management-modal .score-breakdown {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.candidate-management-modal .score-item {
background: rgba(255, 255, 255, 0.05);
padding: 0.5rem 0.75rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.candidate-management-modal .score-item span {
color: rgba(255, 255, 255, 0.8);
font-size: 0.85rem;
}
.candidate-management-modal .candidate-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.candidate-management-modal .promote-btn {
display: flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #28C896, #059669);
border: none;
border-radius: 8px;
color: white;
padding: 0.6rem 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.candidate-management-modal .promote-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #059669, #047857);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(40, 200, 150, 0.3);
}
.candidate-management-modal .promote-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.candidate-management-modal .promote-btn .material-symbols-outlined {
font-size: 1.1rem;
}
.candidate-management-modal .promotion-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
}
.candidate-management-modal .promotion-indicator.promoted {
background: rgba(40, 200, 150, 0.2);
color: #28C896;
border: 1px solid rgba(40, 200, 150, 0.3);
}
.candidate-management-modal .promotion-indicator .material-symbols-outlined {
font-size: 1.1rem;
}
.candidate-management-modal .promotion-summary {
margin-top: 1.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.candidate-management-modal .promotion-limit {
color: #fff;
font-weight: 500;
margin-bottom: 0.5rem;
}
.candidate-management-modal .limit-reached {
display: flex;
align-items: center;
gap: 0.5rem;
color: #f59e0b;
font-size: 0.9rem;
}
.candidate-management-modal .limit-reached .material-symbols-outlined {
font-size: 1rem;
}
.candidate-management-modal .empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 3rem 2rem;
color: rgba(255, 255, 255, 0.6);
}
.candidate-management-modal .empty-state .material-symbols-outlined {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.5;
}
.candidate-management-modal .empty-state h4 {
color: #fff;
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.candidate-management-modal .empty-state p {
margin: 0;
font-size: 0.95rem;
line-height: 1.4;
}
.candidate-management-modal .modal-footer {
display: flex;
justify-content: flex-end;
gap: 1rem;
padding: 1.5rem 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.02);
}
.candidate-management-modal .btn-secondary,
.candidate-management-modal .btn-primary {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.95rem;
}
.candidate-management-modal .btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.candidate-management-modal .btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.candidate-management-modal .btn-primary {
background: linear-gradient(135deg, #926aff, #6b46c1);
color: white;
}
.candidate-management-modal .btn-primary:hover:not(:disabled) {
background: linear-gradient(135deg, #7c3aed, #5b21b6);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(146, 106, 255, 0.3);
}
.candidate-management-modal .btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
/* Score Color Classes for Modal */
.candidate-management-modal .score-value.high-score {
background: linear-gradient(135deg, #28C896, #059669);
box-shadow: 0 2px 6px rgba(40, 200, 150, 0.3);
color: white;
}
.candidate-management-modal .score-value.medium-score {
background: linear-gradient(135deg, #f59e0b, #d97706);
box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
color: white;
}
.candidate-management-modal .score-value.low-score {
background: linear-gradient(135deg, #ef4444, #dc2626);
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
color: white;
}
/* Responsive Design for Modal */
@media (max-width: 768px) {
.candidate-management-modal {
width: 95%;
max-height: 95vh;
margin: 1rem;
}
.candidate-management-modal .modal-content {
padding: 1rem;
}
.candidate-management-modal .modal-header,
.candidate-management-modal .modal-footer {
padding: 1rem;
}
.candidate-management-modal .candidate-header {
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
}
.candidate-management-modal .candidate-details {
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
}
.candidate-management-modal .score-breakdown {
align-self: stretch;
justify-content: space-around;
}
.candidate-management-modal .candidate-actions {
align-self: stretch;
justify-content: center;
}
}
@media (max-width: 480px) {
.candidate-management-modal {
width: 100%;
max-height: 100vh;
margin: 0;
border-radius: 0;
}
.candidate-management-modal .modal-title h3 {
font-size: 1.1rem;
}
.candidate-management-modal .score-breakdown {
flex-direction: column;
gap: 0.5rem;
}
}
/* Google Maps Container Styles */
.google-map-container {
width: 100%;
height: 400px;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2);
background: #f5f5f5;
}
/* Search Input Container */
.search-input-container {
position: relative;
display: flex;
align-items: center;
}
.search-input-container .search-input {
width: 100% !important;
padding-right: 40px;
}
.search-input-icon {
position: absolute;
right: 10px;
pointer-events: none;
color: rgba(255, 255, 255, 0.6);
}
/* Google Places Autocomplete Styling */
gmp-place-autocomplete {
width: 100% !important;
background: rgba(226, 232, 255, 0.05) !important;
border-radius: 8px !important;
border: none !important;
color: #fff !important;
font-size: 20px !important;
font-weight: 100 !important;
outline: none !important;
box-shadow: 0 0 5px #926aff63 !important;
padding: 8px 16px !important;
}
gmp-place-autocomplete::part(textbox) {
background: transparent !important;
border: none !important;
color: #fff !important;
font-size: 20px !important;
font-weight: 100 !important;
outline: none !important;
}
/* Ensure Google Places dropdown is visible */
.pac-container {
background-color: #090923 !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
z-index: 9999 !important;
}
.pac-item {
background-color: transparent !important;
color: #fff !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
padding: 8px 12px !important;
}
.pac-item:hover {
background-color: rgba(146, 106, 255, 0.2) !important;
}
.pac-item-selected {
background-color: rgba(146, 106, 255, 0.3) !important;
}
.pac-matched {
color: #926aff !important;
font-weight: 500 !important;
}
/* Map container within modal */
.map-container {
margin: 20px 0;
position: relative;
}
/* Search hint text */
.search-hint {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
margin: 5px 0 0 0;
font-style: italic;
}
.material-symbols-outlined.edit {
position: absolute;
bottom: -45px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.4);
box-shadow: 1px 1px 3px rgba(0,0,0,1);
padding: 5px;
transition: all 0.1s;
color: rgba(255,255,255,0.4) !important;
}
.material-symbols-outlined.edit::before {
content: '';
height: 10px;
width: 2px;
background: rgba(255,255,255,0.4);
position: absolute;
left: 16px;
top: -10px;
}
.material-symbols-outlined.edit:hover {
/*transform: translateY(-5px) scale(1.02);*/
box-shadow: 1px 1px 10px rgba(0,0,0,1);
}
/* Premium Theme Selection Modal Styles */
.theme-selection-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(15px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
animation: fadeIn 0.4s ease-out;
}
.theme-selection-container {
background: rgba(8, 7, 25, 0.98);
border: 2px solid rgba(146, 106, 255, 0.4);
border-radius: 24px;
backdrop-filter: blur(30px);
max-width: 950px;
width: 90vw;
max-height: 95vh !important;
overflow-y: hidden;
animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(146, 106, 255, 0.1) inset, 0 0 80px rgba(146, 106, 255, 0.3);
}
.theme-selection-content {
padding: 0;
}
.theme-options {
max-height: calc(90vh - 250px);
overflow: hidden;
overflow-y: auto;
}
.theme-selection-content .modal-header {
background: linear-gradient(135deg, rgba(146, 106, 255, 0.15), rgba(80, 160, 240, 0.15));
border-bottom: 2px solid rgba(146, 106, 255, 0.3);
border-radius: 24px 24px 0 0;
padding: 32px;
margin: 0;
display: flex;
align-items: center;
gap: 24px;
}
.modal-header-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #926aff, #50a0f0);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 32px;
box-shadow: 0 8px 20px rgba(146, 106, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
animation: float 3s ease-in-out infinite;
}
.modal-header-text {
flex: 1;
}
.modal-header-text h2 {
color: white;
font-size: 28px;
font-weight: 700;
margin: 0 0 8px 0;
background: linear-gradient(135deg, #926aff, #50a0f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.modal-header-text p {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
margin: 0;
font-weight: 400;
}
.theme-selection-content .modal-close {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.theme-selection-content .modal-close:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
color: white;
transform: scale(1.05) rotate(90deg);
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}
.theme-options {
padding: 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.theme-option {
background: rgba(255, 255, 255, 0.06);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 18px 28px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.theme-option::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #926aff, #50a0f0);
opacity: 0;
transition: opacity 0.4s ease;
}
.theme-option:hover {
border-color: rgba(146, 106, 255, 0.5);
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(146, 106, 255, 0.3), 0 0 0 1px rgba(146, 106, 255, 0.2) inset;
background: rgba(255, 255, 255, 0.08);
}
.theme-option:hover::before {
opacity: 1;
}
.theme-option.selected {
border-color: #926aff;
background: rgba(146, 106, 255, 0.12);
transform: translateY(-4px);
box-shadow: 0 15px 30px rgba(146, 106, 255, 0.4), 0 0 0 2px rgba(146, 106, 255, 0.3) inset;
}
.theme-option.selected::before {
opacity: 1;
height: 6px;
}
.theme-preview {
height: 90px;
border-radius: 16px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.theme-option:hover .theme-preview {
transform: scale(1.02);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.theme-preview.dark {
background: linear-gradient(135deg, #1a1a2e, #16213e);
}
.theme-preview.light {
background: linear-gradient(135deg, #f8f9fa, #ffffff);
}
.preview-header {
height: 32px;
background: rgba(146, 106, 255, 0.4);
margin: 12px;
border-radius: 8px;
animation: pulse 2s ease-in-out infinite;
}
.theme-preview.light .preview-header {
background: rgba(80, 160, 240, 0.3);
}
.preview-content {
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.preview-bar {
height: 14px;
background: rgba(255, 255, 255, 0.25);
border-radius: 7px;
width: 75%;
animation: shimmer 2s ease-in-out infinite;
}
.theme-preview.light .preview-bar {
background: rgba(0, 0, 0, 0.12);
}
.preview-text {
height: 8px;
background: rgba(255, 255, 255, 0.18);
border-radius: 4px;
width: 90%;
animation: shimmer 2s ease-in-out infinite 0.3s;
}
.theme-preview.light .preview-text {
background: rgba(0, 0, 0, 0.08);
}
.preview-chart {
height: 24px;
background: linear-gradient(90deg, #926aff, #50a0f0);
border-radius: 6px;
width: 65%;
opacity: 0.9;
animation: shimmer 2s ease-in-out infinite 0.6s;
}
.theme-info {
text-align: center;
}
.theme-info h3 {
color: white;
font-size: 22px;
font-weight: 700;
margin: 0 0 12px 0;
letter-spacing: -0.02em;
}
.theme-info p {
color: rgba(255, 255, 255, 0.75);
font-size: 15px;
margin: 0 0 16px 0;
line-height: 1.5;
font-weight: 400;
}
.theme-benefits {
display: flex;
flex-direction: column;
gap: 6px;
}
.theme-benefits span {
color: rgba(255, 255, 255, 0.65);
font-size: 13px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.theme-benefits span::before {
content: '✓';
color: #28c896;
font-weight: 600;
font-size: 14px;
}
.theme-selector {
position: absolute;
top: 20px;
right: 20px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: rgba(255, 255, 255, 0.6);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
}
.theme-option.selected .theme-selector {
background: #926aff;
color: white;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(146, 106, 255, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.2) inset;
}
.modal-actions {
padding: 40px;
border-top: 2px solid rgba(146, 106, 255, 0.2);
display: flex;
gap: 20px;
justify-content: center;
background: linear-gradient(135deg, rgba(146, 106, 255, 0.05), rgba(80, 160, 240, 0.05));
}
.success-button {
background: linear-gradient(135deg, #28c896, #26d0ce);
color: white;
border: none;
padding: 16px 40px;
border-radius: 14px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 12px;
min-width: 240px;
justify-content: center;
position: relative;
overflow: hidden;
box-shadow: 0 8px 20px rgba(40, 200, 150, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.success-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.success-button:hover:not(:disabled)::before {
left: 100%;
}
.success-button:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(40, 200, 150, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
.success-button:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
box-shadow: 0 4px 12px rgba(40, 200, 150, 0.2);
}
.cancel-button {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
border: 2px solid rgba(255, 255, 255, 0.2);
padding: 16px 32px;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 12px;
min-width: 160px;
justify-content: center;
backdrop-filter: blur(10px);
}
.cancel-button:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.4);
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
}
.cancel-button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.button-spinner {
width: 22px;
height: 22px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top: 3px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(40px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-6px);
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.4;
}
50% {
opacity: 0.8;
}
}
@keyframes shimmer {
0%, 100% {
opacity: 0.4;
}
50% {
opacity: 0.7;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.reports-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: 1fr;
}
.filter-section {
flex-direction: column;
align-items: stretch;
}
.filter-group {
width: 100%;
}
.filter-select {
min-width: unset;
}
.report-header {
flex-direction: column;
gap: 16px;
}
.overall-score {
align-self: flex-end;
}
.detailed-report-modal {
width: 95vw;
margin: 20px;
}
.theme-selection-container {
width: 95vw;
margin: 20px;
max-height: 95vh;
}
.theme-options {
grid-template-columns: 1fr;
padding: 24px;
gap: 20px;
}
.modal-actions {
flex-direction: column-reverse;
padding: 24px;
gap: 16px;
}
.success-button,
.cancel-button {
width: 100%;
min-width: unset;
}
.modal-header-icon {
width: 60px;
height: 60px;
font-size: 28px;
}
.modal-header-text h2 {
font-size: 24px;
}
.modal-header-text p {
font-size: 14px;
}
}
.radio-option span {
margin-left: 20px;
}
.textarea-container{
width: 100%;
}
.textarea-container textarea {
width: 100%;
min-height: 150px;
border-radius: 8px;
padding: 5px;
color: #fff;
background: rgba(255,255,255,0.05);
border: 2px solid rgba(255,255,255,0.2);
box-shadow: none;
}