html {
  --wht100: rgb(255, 255, 255);
  --wht200: rgb(245, 245, 245);
  --wht300: rgb(235, 235, 235);
  --wht400: rgb(225, 225, 225);
  --wht500: rgb(215, 215, 215);

  --lightblk: rgb(70, 70, 70);
  --blk: rgb(30, 30, 30);

  /* SEE HEADER.PHP FOR ACCENT GENERATION */
  --accenta: 0;
  --accentb: 0;
  --accentc: 0;
  --accent: rgb(var(--accenta), var(--accentb), var(--accentc));
  --accentdark: rgb(
    calc(var(--accenta) - 20),
    calc(var(--accentb) - 20),
    calc(var(--accentc) - 20)
  );
  --accentlight: rgb(
    calc(var(--accenta) + 20),
    calc(var(--accentb) + 20),
    calc(var(--accentc) + 20)
  );
  --accent5: rgba(var(--accenta), var(--accentb), var(--accentc), 0.05);

  --br: 5px;
}

*,
*:before,
*:after {
  margin: 0;
  box-sizing: border-box;
}

body {
  margin: 0 !important;
  background: var(--wht200);
  font-family: "Geist", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.logo {
  width: 180px;
  height: 45px;
  mix-blend-mode: multiply !important;
}

.nav {
  background: var(--wht200);
  width: 100%;
  padding: 0px 20px;
  z-index: 999;
}

.site-footer {
	position: relative;
}

.eyebrow {
  color: var(--lightblk);
  font-weight: 500;
}

label {
  font-weight: 600;
  font-size: 14px;
  margin-top: 10px;
}

h1 {
  font-weight: 700;
  font-size: 54px;
  line-height: 1.1;
}

h2 {
  font-weight: 700;
  font-size: 42px;
  line-height: 1.1;
}
h3 {
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
}
h4 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
}
h5 {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
}

.p-big {
	font-size: 20px;
}

p {
	opacity: .7;
}

button {
  border: none;
  outline: none;
}

a {
  color: var(--accent);
  font-weight: 600;
}

.button {
  font-size: 14px;
  font-weight: 500;
  background: var(--accent);
  color: var(--wht100);
  border-radius: var(--br);
  padding: 15px 20px;
  border: 0px solid var(--accent);
  line-height: 1;
  min-height: 45px;
  text-decoration: none !important;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex !important;
  gap: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  min-width: 100px;
}



.button:after {
	content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjk5OTQgMS43NUwxLjAyNDQxIDExLjcyNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0wLjUgMS43NUgxMVYxMi4yNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPg==");
transform: scale(.8) translatey(1px);
}

.copy-btn {
	background: #ffffff12;
}
.copy-btn:after {
	content: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12.2689%2012.2694H16.192V1.80789H5.73047V5.73097%22%20stroke%3D%22white%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M12.2701%205.73071H1.80859V16.1923H12.2701V5.73071Z%22%20stroke%3D%22white%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
}

.button.secondary {
  background: var(--wht500);
  color: var(--blk);
}


.button.secondary:after {
	content: '';
	display: none;
}

.hide {
  display: none !important;
}
.nav-contain {
  width: 96%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  border-bottom: 1px solid var(--wht500);
}

.nav-menu {
  display: flex;
  gap: 40px;
  align-items: center;
}
.nav-link {
	color: var(--blk);
	text-decoration: none;
	font-weight: 400;
}

.contain {
  width: 90%;
  max-width: 1340px;
  margin: 0 auto;
}

.logo a,
.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 0;
}

.score-table {
  text-align: left;
  width: 100%;
  font-size: 16px;
  overflow: auto;
}
.score-table tbody tr td {
	padding: 16px;
}

.score-table tbody tr td:nth-of-type(1) {
	font-weight: 600;
}

.score-table thead th {
  padding: 12px;
}

table {
  border-spacing: 0px;
  border: 1px solid var(--wht400);
  border-radius: var(--br);
  overflow: clip !important;
  max-width: 100%;
}
.score-table thead {
  background-color: var(--blk);
  color: var(--wht100);
  font-weight: 400 !important;
}

.score-table thead th {
  font-weight: 500;
}
.score-table tbody tr:nth-child(even) {
  background-color: var(--wht300);
}

.table-overflow {
  overflow: auto !important;
}

.table-container {
  margin-bottom: 2em;
  width: 100%;
  overflow: hidden;
}

.table-controls {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  margin: 15px 0px;
  margin-bottom: 30px;
}

.sort-controls {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.sort-btn {
  padding: 12px 15px;
  border: 1px solid var(--wht500);
  background: var(--wht300);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.sort-btn:hover {
  background: #f5f5f5;
}

.sort-btn.active {
  background: var(--accent5);
  border-color: var(--accent);
}

@media (max-width: 768px) {
  .table-controls {
    flex-direction: row;
	flex-wrap: wrap;
    align-items: start;
  }

  .search-box input {
    width: 100%;
  }

  .sort-controls {
    justify-content: center;
  }
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
  padding: 10px;
  border: 1px solid var(--wht500);
  border-radius: var(--br);
  font-size: 16px;
  min-height: 45px;
  box-sizing: border-box;
  color: var(--blk);
  background: var(--wht100);
  transition: all 200ms ease;
}


data-coloris {
  min-width: 100% !important;
}
.clr-field {
  width: 100%;
  border-radius: var(--br);
  overflow: hidden;
}
.clr-field input {
  width: 100%;
}

.clr-field button {
	width: 50px;
}
::placeholder {
  color: #00000048;
}

input:focus {
  background: var(--accent5);
  border: 1px solid var(--accent) !important;
  outline: none !important;
}


/* BG CIRCLE CSS */

.bg-circle {
  width: clamp(800px, 105vw, 2400px);
  height: clamp(800px, 105vw, 2400px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.circle:nth-of-type(1) {
  --size: 100;
  --opacity: 40;
  animation: spin 160s linear infinite;
}
.circle:nth-of-type(2) {
  --size: 80;
  --opacity: 25;
  animation: spin 80s linear infinite reverse;
}
.circle:nth-of-type(3) {
  --size: 60;
  --opacity: 15;
  animation: spin 120s linear infinite;
}
.circle:nth-of-type(4) {
  --size: 40;
  --opacity: 10;
}
.circle:nth-of-type(5) {
  --size: 20;
  --opacity: 8;
}

.circle:nth-of-type(1):after,
.circle:nth-of-type(2):before,
.circle:nth-of-type(2):after,
.circle:nth-of-type(3):after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: #211e1d;
  right: -8px;
  top: calc(50% - 8px);
  border-radius: 500vw;
  border: 1px solid var(--accent);
  box-sizing: border-box;
}

.circle:nth-of-type(2):before {
  left: -8px;
  right: unset;
}
.circle:nth-of-type(1):after {
  top: unset;
  bottom: -8px;
  right: calc(50% - 8px);
}

.circle {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, calc(var(--opacity) * 0.01));
  border-radius: 500vw;
  width: calc(var(--size) * 1%);
  height: calc(var(--size) * 1%);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359.99deg);
  }
}


.dash-cta {
	padding: 30px;
	background: var(--blk);
	color: var(--wht100);
	border-radius: 10px;
	margin-bottom: 20px;
}

.share-link-wrapper {
	display: flex;
	gap: 20px;
	flex-direction: row;
	align-items: center;
	width: 100%;
	justify-content: space-between;
}

.share-link-wrapper div {
	display: flex;
	flex-direction: column;
	gap: 5px;
}


.copy-link-container [type="text"] {
	display: none;
}


  
  .share-link-wrapper p {
	font-weight: 600;
	font-size: 16px;
  }





  .auth-left-middle {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
	margin: auto 0;
}

.auth-right {
	color: rgba(255, 255, 255, .7);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px 80px;
	gap: 50px;
	position: relative;
}

.auth-right-top {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 520px;
	margin-top: 30px;
}
.auth-right-bottom {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.auth-testimonial {
	background: rgba(255, 255, 255, .05);
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--br);
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 700px;
	backdrop-filter: blur(10px);
	font-size: 18px;
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.two-col-input {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.two-col-input div {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#toggle-login {
	background: none !important;
	padding: 0px !important;
	opacity: .6 !important;
	text-decoration: underline !important;
	font-size: 14px;
}




.logo-upload {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.upload-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	background-color: #f5f5f5;
	border: 2px dashed #ddd;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.upload-label:hover {
	background-color: #eee;
	border-color: #ccc;
}

.upload-label svg {
	width: 20px;
	height: 20px;
	color: #666;
}

.upload-label span {
	font-size: 14px;
	color: #666;
}

.file-input {
	display: none;
}

.file-name {
	font-size: 12px;
	color: #666;
	margin-left: 4px;
}

[disabled] {
	opacity: .5;
	pointer-events: none;
}



@media screen and (max-width: 600px) {
	.two-col-input {

		grid-template-columns: 1fr;
gap: 0px;
	}
}