/*
CS: 2C1846

BACKGROUND COLORS
#B4A5F3 (purple light light)
#3C1AC7 (purple dark light)
#170F1F (purple dark dark)
#F3ABA5 (red)
*/

:root {
	/* COLORS VARS */
		/* SUPER DARK */
		--sdarkbg-1: #001010;  /* dark green */
		--sdarkbg-2: #2F3F4F;  /* dark blue */
		--sdarkbg-3: #3F2F4F;  /* dark purple */
		
		/* DARK */
		--darkbg-1: #AD0000;  /* red */
		--darkbg-2: #00420C;  /* green */
		--darkbg-3: #400034;  /* blue */
		--darkbg-4: #001542;  /* mauve */
		
		

		/* LIGHT */
		--lightbg-1: #A5D0F3; /* blue */
		--lightbg-2: #F3DEA5; /* beige */
		--lightbg-3: #F3E6A5; /* yellow */
		--lightbg-4: #A5F3BF; /* green */
		--lightbg-5: #F3ABA5; /* red/peach */
		--lightbg-6: #A266EA; /* purple */
		
		
		/* GREY */
		--grey-ll: #ededed;
		--grey-l: #ddd;
		--grey: #aaa;
		--grey-d: #999;
		--grey-dd: #666;
		--grey-ddd: #333;
		--grey-dddd: #222;
		
		/* SLATE */
		--slate-blue: #2C4B79;  
		--slate-purple: #2C1846;  
		
		/* BASE FONT SIZE */
		--base-font-size: 1rem;		/* now, you can do math with this in the future, if needed. */
		
}




@charset "UTF-8";

html {
  font-size: clamp(10px, 4.1vw, 28px);
}
/* Additional breakpoint for very large screens */
@media (min-width: 1400px) {
html {
  font-size: 24px;
  }
}
body {
	font-family: Helvetica, sans-serif, "Segoe UI Emoji", "Apple Color Emoji", "Arial Unicode MS", roboto;
      /* font-family: Helvetica, sans-serif, roboto; */
	  /* font-size: 4.2vw; */
      margin: 0;
      padding: 0;
      display: flex;
	  background-color: #000000;
	  color: #ededed;
      flex-direction: column; /* To stack header and content */
	   //align-items: left;  /* Centers items horizontally */
	   //justify-content: space-between;    /* Distributes items evenly vertically */
    }	
	
a:link 		{ color: inherit; text-decoration: none; }
a:visited	{ color: inherit; text-decoration: none; }
a:hover 	{ color: #00ff55; text-decoration: none; }
a:active 	{ color: inherit; text-decoration: none; }
a:focus		{ color: #00ff55; background-color: #000; padding: 1px; border: 1px solid #00ff55; }
a:anchor	{ margin-top: 300px; }
h1  { color: #00ff55; font-size: 2.1rem; font-weight: bold; text-shadow: 2px 2px 2px #666; font-family: Helvetica, sans-serif, Lato, Montserrat; 
			margin-bottom: 0.33rem; }  /* this last part should probably go, just messing around to see how it comes across for now */
h2  { color: #dedede; font-size: 1.65rem; font-weight: bold; font-family: Helvetica, sans-serif, Verdana, Tahoma; margin-bottom: 0.65rem; 
	margin-top: 1.65rem; line-height: 1.65rem; }
h3  { color: #ededed; font-size: 1.3rem; font-weight: bold; font-family: Helvetica, sans-serif, Verdana, Tahoma;  margin-bottom: 0.3rem; 
	margin-top: 0.3rem; } 
h4  { color: #ddd; font-size: 1.2rem; font-weight: bold; font-family: Helvetica, sans-serif, Verdana, Tahoma; }  
h5  { color: #F3E6A5; font-size: 1rem; font-weight: bold; display: inline; font-family: Helvetica, sans-serif, Verdana, Tahoma; }  
h6  { color: var(--grey-d); font-size: 0.9rem; display: inline; font-family: Helvetica, sans-serif, Verdana, Tahoma; } 
pre { color: #aaa; font-size: 1rem; font-weight: bold; font-family: Helvetica, sans-serif, Verdana, Tahoma; white-space: pre-wrap; } 	

::placeholder {
  color: #888;
}

.color-lblue { color: #a5d0f3; font-weight: bold; }
.boldblack { font-size: 1.1rem; color: #000; font-weight: bold; }

.functional_headings { 
	background-image: linear-gradient(to right, hsl(285, 100%, 25%), hsl(270, 75%, 10%));
	font-size: 1rem; 
	color: #ccc; 
	padding: 0.1rem; 
	border-radius: 0.3rem;
	border: 0.1rem solid #666; 
	//border-bottom: 0.1rem solid #666;
}
.utils {
	background-image: linear-gradient(to right, hsl(240, 30%, 6%), hsl(270, 15%, 5%));
	font-size: 1rem; 
	color: #ccc; 
	padding: 1rem; 
	border: 0.1rem; solid #00ff55;
}

input[type=text]       { font-size: 1.1rem; color: #111; background: #F3DEA5; border: 1px solid #333; -webkit-border-radius: 0.3rem; border-radius: 0.3rem; }
input[type=text]:focus { border-color:#333; background: #A5F3BF; }
input[type=search]       { font-size: 1.1rem; color: #111; background: #F3DEA5; border: 1px solid #333; -webkit-border-radius: 0.3rem; border-radius: 0.3rem; }
input[type=search]:focus { border-color:#333; background: #A5F3BF; }
input[type=password]   { font-size: 1.1rem; color: #111;	background: #f3dea5; border: 1px solid #731212; -webkit-border-radius: 0.2rem; border-radius: 0.2rem; }
input[type=submit]     { font-size: 1.1rem; font-weight: bold; background:#a5d0f3; border: 1px solid #111; cursor:pointer; -webkit-border-radius: 0.2rem; border-radius: 0.2rem;  display: inline; }
textarea   			{ font-size: 1.1rem; color: #111; background: #f3dea5; border: 1px solid #731212; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; overflow: auto; }

select {
  appearance: base-select; /* Enable modern customization */
  background-color: #f3dea5;
  border: 0.1rem solid #731212;
  padding: 0.3rem 0.3rem;
  font-size: 1rem;
  color: #111;
  border-radius: 0.3rem;
  -webkit-border-radius: 4px; border-radius: 4px;  }
}

select::picker {
  background-color: #666;
  border: 0.1rem solid #eee;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
}

select option {
  padding: 4rem 6rem;
  /* Add styles for individual options */
}



/* format radio buttons */
.radio-group { display: flex; flex-wrap: wrap; gap: 1rem; }
.radio-group input[type="radio"] { display: none; }
.radio-group label { padding: 10px 20px; border: 2px solid #ccc; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; }
.radio-group input[type="radio"]:checked + label { color: #111; border-color: #000; background-color: #A5F3BF; }
.radio-group input[type="radio"]:disabled + label { color: #333; border-color: #aaa; background-color: #f0f0f0; cursor: not-allowed; opacity: 0.6; }

/* format radio buttons - ALT */
.radio-group_2 { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; border: 0.1rem solid var(--grey-ll); border-radius: 0.6rem; background-color: #000; }   /* background-color: var(-grey); */
.radio-group_2 input[type="radio"] { display: none; }
.radio-group_2 label { font-size: 0.9rem; padding: 0.2rem 0.2rem; border-radius: 0.4rem; cursor: pointer; transition: all 0.6s ease; }
.radio-group_2 input[type="radio"]:checked + label { color: var(--grey-ll); border: 0.1rem solid var(--grey); background-color: #5A0078; }
.radio-group_2 input[type="radio"]:disabled + label { color: #333;  background-color: #f0f0f0; cursor: not-allowed; opacity: 0.6;  }


/* toggle switches (scoped to checkbox containers) */
.toggle-switch { position: relative; display: inline-block; }   /* Add this wrapper class */
.toggle-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch label { cursor: pointer; width: 1.8rem; height: 0.9rem; background: grey; display: inline-block; border-radius: 1rem; position: relative; transition: background 0.3s; }
.toggle-switch label::after { content: ''; position: absolute; top: 0.05rem; left: 0.05rem; width: 0.9rem; height: 0.9rem; background: #fff; border-radius: 50%; transition: 0.3s; }
.toggle-switch input[type="checkbox"]:checked + label { background: green; }
.toggle-switch input[type="checkbox"]:checked + label::after { left: calc(100% - 0.05rem); transform: translateX(-100%); }
.toggle-switch label:active::after { width: 1.3rem; }

/*table row backgrounds */
table {  border-radius: 0.3rem; width: 100%; overflow-x: auto;  }  /* consider eliminating the border at some point.  border: 0.1rem solid #666; */
tr:nth-of-type(even) { background-color: #203040; }
tr:hover { background-color: #111; }
th { background-color: #101020;	color: #a5d0f3;	border-bottom: 2px solid #111; padding: 0.3rem; vertical-align: bottom; }
td { border-bottom: 1px solid #888; vertical-align: middle; padding: 0.15rem;  }
/* caption { background-color: #101020; border-top: thick double #a5d0f3; font-size: 0.9rem; color: #ccc; padding: 0.3rem; border-top-left-radius: 1.3rem; border-top-right-radius: 1.3rem; } */
caption {  /* default, purple */
	background-image: linear-gradient(to right, hsl(285, 100%, 25%), hsl(270, 75%, 10%));
	font-size: 1rem; 
	color: #ccc; 
	padding: 0.3rem; 
	border-top-left-radius: 0.3rem; 
	border-top-right-radius: 0.3rem; 
	border-top: 0.1rem solid #666; 
	text-align: left;
}

th.rotate > div {
  display: flex;
  justify-content: center;      /* centers text vertically in the th */
  align-items: center;          /* centers text horizontally in the th */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  /* height: 100%; */
  /* width: 100%; */
  padding: 0;
  margin: 0;
  transform: rotate(180deg);
}

.tr_add_highlight {   /* FOR FUTURE USE, FOR TABLE ROW ADDITIONS.  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */
  background-color: #A5F3BF; /* Soft green flash */
  transition: background-color 1s ease;
}


/* Special table styles */
table.alt-1 {
  border: 0;
  background-color: 001010;
  text-align: center;
  margin-top: -1.3rem;
  margin-bottom: 1.3rem;
  font-size: 0.9rem;
}
table.alt-1 th {
  border-bottom: 0;
  color: ededed;
  padding: 0.1rem;
  background-color: #2030340;
  font-weight: normal;
}	
table.alt-1 td {
  border: 0;
  color: ededed;
  padding: 0.1rem;
  background-color: #001010;
}


table.alt-2 {
  text-align: left;
  font-size: 0.9rem;
}
table.alt-2 th {
  padding: 0.1rem;
  font-weight: normal;
}	
table.alt-2 td {
  padding: 0.1rem;
}


/* light bg tables */
table.light-1 {
  border: 0;
  background-color: var(--grey-ll);
  font-size: 0.9rem;
}
table.light-1 th {
  border-bottom: 0;
  color: var(--grey-ll);
  padding: 0.2rem;
  background-color: var(--grey-ddd);
  font-weight: normal;
  vertical-align: middle;
}	
table.light-1 td {
  border: 0;
  color: var(--grey-ddd);
  padding: 0.2rem;
  background-color: var(--grey);
  vertical-align: top;
}
table.light-1 input[type=text] { 
  font-size: 0.9rem;
}
table.light-1 select { 
  font-size: 0.9rem;
}
table.light-1 button { 
  font-size: 0.9rem;
}


/* Global Button Styles */
button {	
  background-image: linear-gradient(to bottom, #a5d0f3, #95d0f3, #75d0f3, #55d0f3, #35d0f3);
  color: #111;
  border: none;
  border-radius: 0.5rem;
  padding: 0.2rem 0.6rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 2px 2px 2px #000;
  
}
/* Hover State */
button:hover {
  background-color: #0056b3; /* Darker blue on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
}
/* Active State (When Clicked) */
button:active {
  background-color: #003f7f; /* Even darker blue when clicked */
}
/* Disabled State */
button:disabled {
  background-color: #d6d6d6; /* Light gray for disabled buttons */
  color: #a1a1a1; /* Gray text for disabled buttons */
  cursor: not-allowed; /* Show "not allowed" cursor */
}
/* Processing State (Optional Custom Attribute) */
button[aria-busy="true"] {
  background-color: #ffc107; /* Yellow for processing state */
  color: black;
  cursor: wait; /* Show wait cursor */
}
button[aria-busy="true"]::after {
  content: " Processing..."; /* Add text after the button label */
}

.button_add { background-color: var(--lightbg-4); color: #111; font-weight: bold; width: fit-content; }
.button_move { background-color: #000; border: 0.2rem solid #fff; border-radius: 0.8rem; padding: 0.2rem; text-align: center; }	
	
hr { border: 0.1rem solid #203040; width: 98%; margin-left: auto; margin-right: auto; }

hr.suits {
  border: none;
  height: 0;
  text-align: center;
  overflow: visible;
}
hr.suits::before {
  content: "\2660\A0\2665\A0\2666\A0\2663";
  font-size: 2rem; 
  color: var(--grey);
  display: inline-block; /* Change from block to inline-block */
  line-height: 1; /* Prevents extra space above/below */
  margin-top: 0rem;
}

.highlight {
  background-color: #FFF2CC; /* Or any other color */
  color: #111;
}







summary {
	padding: 0.2rem;
	background-color: #001A33;  /* was commented out */
	border: 0.1rem solid #333;
	/* border-bottom: 0.1rem solid #666; */
	border-radius: 1rem;   /* was 0.3 */
	color: #ddd;  /* was commented out */
	margin-bottom: 0.2rem;
	padding: 0.2rem;
}	
details {
  interpolate-size: allow-keywords;  
  &::details-content {
    transition:
      block-size 0.5s,
      content-visibility 1s allow-discrete;
    overflow: hidden;
    block-size: 0;     /* Or also:  height:0; */
  }  
  &[open]::details-content {
    block-size: auto;  /* Or also:  height:auto; */
	//border: 0.1rem solid #000;
	padding: 0.6rem;
	//background-color: #001A33;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
  }
}	



/* Alternate styling with custom class */
details.list_1 {
  interpolate-size: allow-keywords;  
  &::details-content {
    transition:
      block-size 0.5s,
      content-visibility 1s allow-discrete;
    overflow: hidden;
    block-size: 0;     /* Or also:  height:0; */
  }  
  &[open]::details-content {
    block-size: auto;  /* Or also:  height:auto; */
	padding: 0.6rem;
	width: 98%;
  }
}

details.list_1 summary {
	list-style: none;
	background-color: #001A33;  
	border: 0.15rem solid #000;
	border-radius: 1.1rem;   /* was 0.3 */
	color: var(--grey-ll);  
	margin-bottom: 0.3rem;
	padding: 0.3rem;
	box-shadow: 0.1rem 0.1rem 0.1rem rgba(200, 200, 200, 0.1); 
}



/* Alternate styling with custom class */
summary.list_2 {
	background-color: var(--grey-l); 
	font-size: 1rem;
	font-weight: bold;
	color: #111;  
	border: 0.1rem solid #333;
	border-radius: 0.3rem 0.3rem 0rem 0rem;  
	padding: 0.2rem;
	width: 88%;  //fit-content
}
details.list_2 {
  interpolate-size: allow-keywords;  
  &::details-content {
    transition:
      block-size 0.5s,
      content-visibility 1s allow-discrete;
    overflow: auto;
    block-size: 0;     /* Or also:  height:0; */
  }  
  &[open]::details-content {
	border-radius: 0rem 0.3rem 0.3rem 0.3rem;  
    block-size: auto;  /* Or also:  height:auto; */
	padding: 0.2rem;
	width: 98%;
	background-color: var(--grey-l); 
	font-size: 1rem;
	color: #111;
	margin-left: 0.05rem;
	/* margin-top: -0.3rem; */
  }
}



.div_game_border_parent {
  display: flex;
  width: 98%;
  border: 0.2rem solid var(--grey-ll);
  margin-top: -0.3rem;
  border-radius: 0rem 0.3rem 0.3rem 0.3rem;  
}
.div_game_border_child {
  width: 1rem;
  flex-shrink: 0;
  background-color: var(--grey-ll);
  background-repeat: repeat-y;
  background-position: center;
  background-size: contain;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  overflow: hidden;	
}
/* Use an inline SVG as the background pattern */
.div_game_border_child[data-game]:before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background-image: var(--game-svg);
}



.button_pulsate {
    /* Initial state */
	background-color: #000; border: 0.2rem solid #fff; border-radius: 0.8rem; padding: 0.2rem; text-align: center; 
    /* Apply the animation */
    animation: border-pulse 0.3s infinite alternate;
}

@keyframes border-pulse {
    0% {
        border: 0.2rem solid #000;
    }
    0% {
        border: 0.2rem solid #888;
    }	
    100% {
        border: 0.2rem solid #fff;        
    }
}




.table_player_curr_status { 
	background-color: #1c1c1c;
	position: relative;
	margin-top: 0.0rem;
	cursor: pointer;
	height: auto;
	color: #ededed;
	width: 100%;
}
.player_search_results { 
	background-color: #ddd;
	position: absolute;
	margin-top: 0.3rem;
	//display: none;
	cursor: pointer;
	width: 98%;
	height: auto;
	color: #111;
	line-height: 1.5;
	z-index: 999;
}
.player_search_items { 
	display: flex; /* Make the container a flex container */
	align-items: center; /* Vertically center the items within the container */	
	font-size: 1.3rem;
}
		
.event_mgmt {
	background-color: var(--grey-ddd); 
	border-radius: 0.3rem;
	padding: 0.3rem;
	width: fit-content;
}	
	
.header_main {
      position: fixed; /* Fixes the header position */
      top: 0; /* Places the header at the top */
      width: 100%; /* Makes the header span the full width */
	  max-width: 1300px;
	  height: 1.4rem; 
      background-color: #333; /* Example background color */
	  border-bottom: 0.2rem solid #00ff55;
	  font-size: 1.2rem;
      color: #eee; /* Example text color */
      padding: 0.6rem; /* Example padding */
      z-index: 999; /* Ensures the header is above other content */
      display: flex;
      justify-content: space-between; /* Aligns items */
      align-items: center;
}
.content {
		margin-top: 0rem; 
		padding: 0.6rem;
		background-color: #001010;
		color: #ededed;
		vertical-align: top;
		max-width: 1300px;
		//display: flex;
		justify-content: left;
		//align-items: flex-start;
		//flex-direction: row;
		//flex-wrap: wrap;
		
}
.profile-icon {
      cursor: pointer;
      margin-right: 1.5rem; /* Creates space between the menu icon and the right edge */
	  height: 1.5rem;
}
.profile {
      position: fixed;
      top: 2.8rem;
      right: 0rem;
      width: 22rem; /* Width of the menu */
      height: 100%;
	  padding: 0.8rem;
	  background: linear-gradient(to bottom, #2F3F4F, #3F2F4F, #333); 
	  border-left: 0.2rem solid #5500FF;  
	  line-height: 1.5;
	  color: #ededed; 
      transition: transform 0.3s ease-in-out; /* Animation for sliding effect */
      transform: translateY(-100%); /* Initially hidden off-screen */
      z-index: 980; /* Below the header but above the content */
}
.profile.open {
      transform: translateY(0); /* Slides the menu into view */
}
.profile.close {
      transform: translateY(-100%); /* Slides the menu out of view */
}



.menu {
  list-style: none;
  list-style-type: none;
  padding: 0;
}
.menu-icon {
      cursor: pointer;
      margin-right: 1.5rem; /* Creates space between the menu icon and the right edge */
	  font-size: 1.5rem;
}
.menu {
      position: fixed;
      top: 2.8rem;
      right: 0;
      width: 20rem; /* Width of the menu */
      height: 100%;
	  padding: 0.8rem;
	  background: url("images/bg_menu_5.jpg");
	  border-left: 0.2rem solid #00ff55;	  
	  line-height: 1.5;
	  color: #ededed; 
      transition: transform 0.3s ease-in-out; /* Animation for sliding effect */
      transform: translateX(100%); /* Initially hidden off-screen */
      z-index: 990; /* Below the header but above the content */
}
.menu a {
  text-decoration: none;  /* Remove underlines from links in the menu */
  font-weight: normal;
  font-size: 1.1rem;
  transition: color 0.3s ease-in-out;
}
.menu a:hover {
  color: #00ff55; /* Change to highlight color */
}
.menu.open {
      transform: translateX(0); /* Slides the menu into view */
}
.menu.close {
      transform: translateX(100%); /* Slides the menu out of view */
}
.hmenu {
  list-style: none;
  list-style-type: none;
  padding: 0;
}
.hmenu-item {
  position: relative;
  border-bottom: 1px solid #333;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
  //text-shadow: 0 0 0.3rem black;
}
.hmenu-heading {
  cursor: pointer;
}
.hmenu-arrow {
  font-size:1.5rem; 
  color: #ededed; display: 
  inline-block;
  transition: 0.3s ease-in-out;
  //text-shadow: 0 0 0.2rem black;
}
.hmenu-links {
  list-style-type: none;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  top: 100%;
  left: 0;
  //transition: max-height 0.3s ease-in-out, visibility 0s linear 0.3s;
  transition: max-height 0.5s ease-in-out;
  color: #ededed;
  //text-shadow: 0 0 0.6rem black;
  font-weight: bold;
  //margin: 10px;
}
.hmenu-item.active .hmenu-links {
  max-height: 200px; /* Adjust according to your content */
  visibility: visible;
  transition: max-height 0.3s ease-in-out;
}
.hmenu-item.active .hmenu-arrow {
  color: #00ff55;
  rotate: 90deg;
  transition: 0.3s ease-in-out; 
  text-shadow: 0 0 0.2rem white;
}


.container {
      margin: auto;
	  border: 1px solid #ededed;
	  border-radius: 0.4rem;
	  padding: 1rem;
	  max-width: 400px;  /* change to 600px once testing is done. */
	  min-width: 200px;
	  background-color: #2F3F4F; 
	  /* background: linear-gradient(to right, rgba(30,90,90,.5), rgba(30,90,90,.2) 20%, rgba(30,90,90,.4) 50%, rgba(30,90,90,.2) 80%, rgba(30,90,90,.3) 100%);  //love this bg, but need to change everything else first. */
	  
}

.vo_orders {
      margin: auto;
	  border: 1px solid #ccc;
	  border-radius: 8px;
	  padding: 8px;
	  max-width: 300px;
	  min-width: 200px;
	  background-color: #101020; 	  
}


.custom_alert_box {
	  position: fixed; /* Fixes the notify box position */
	  margin-bottom: 2.6rem;
      bottom: 1rem; /* Places the notify div at the bottom */
      width: 96%; /* Makes the header span the full width */
	  height: auto; 
      background-color: #00ff55;    /* linear-gradient(#00ff55, #A5F3BF, #ddd, #A5F3BF, #00ff55); */
	  border-top: thick double #000; /* border-top-left-radius: 1.3rem; border-top-right-radius: 1.3rem; */
	  border-bottom: thick double #000;
	  font-size: 1.2rem;
      color: #000;
	  padding: 0.8rem;
	  transition: transform 0.5s ease-in-out; /* Animation for sliding effect */
      transform: translateY(100%); /* Initially hidden off-screen */
      z-index: 997; /* Ensures Notify is above other content */
      display: flex;
}
.custom_alert_box.open {
      transform: translateY(0); /* Slides the menu into view */
}
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(0.1rem); 
  -webkit-backdrop-filter: blur(0.1rem);
  z-index: 1000;
}
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  color: #000;
  padding: 2rem;
  border: 0.2rem solid #000;
  border-radius: 0.6rem;
}

.dialog-div-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(0.1rem); 
  -webkit-backdrop-filter: blur(0.1rem);
  z-index: 999;
}
.dialog-div-content {
  position: absolute;
  width: 75vw;
  max-height: 80vh;
  overflow: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(150, 150, 150, 0.80); 
  color: #000;
  padding: 2rem;
  border: 0.2rem solid #000;
  border-radius: 0.6rem;
}
.dialog_header {
	display: flex; 
	align-items: center; 
	background: linear-gradient(to bottom, #a5d0f3, #3A97E4);
	border: 0.15rem solid #000;
	border-radius: 0.6rem;
	font-weight: bold;
	/* box-shadow: 0.2rem 0.3rem 0.3rem rgba(0, 0, 0, 0.3); */
}	


.table_entry {
	display: flex; 
	align-items: center; 
	gap: 1rem;
	width: 100%;
	padding: 0;
	background: linear-gradient(to right, var(--lightbg-6), var(--lightbg-1));
	border: 0.15rem solid #000;
	border-radius: 0.6rem;
	/* box-shadow: 0.2rem 0.3rem 0.3rem rgba(0, 0, 0, 0.3); */
}




.footer_main {
  position: fixed; /* Keeps the footer fixed at the bottom */
  bottom: 0; /* Aligns it to the bottom of the viewport */
  width: 100%; /* Spans full width */
  height: 3.6rem; /* Adjusted height for better visibility */
  background-image: linear-gradient(to bottom, #555, #444, #333, #222, #222); 
  background-color: #333;
  border-top: 2px solid #000;
  color: white; /* Text color */
  display: flex; /* Flexbox for layout */
  justify-content: space-around; /* Even spacing between items */
  align-items: center; /* Centers items vertically */
  z-index: 999; /* Ensures it stays above other content */
}

.footer_link {
  text-decoration: none; /* Removes underline from links */
  color: inherit; /* Ensures link text inherits footer color */
  flex: 1; /* Ensures equal space for all links/containers */
}

.footer_link:hover {
  background-color: #444; /* Adds hover effect for better interactivity */
}

.footer_container {
  flex: 1; /* Ensures equal space for each container */
  text-align: center; /* Centers text and images inside each container */
  border-right: 1px solid #111;
  color: #ededed;
}

.footer_container img {
  display: block; /* Ensures proper spacing below images */
  margin: auto;
}

.footer_container span {
  font-size: 1rem; /* Adjusted text size for better fit */
}	



.box_vip_status {
	font-size: 1.1rem; color: #ccc; border: 0.2rem solid #aaa; background-color: #000; padding: 0.5rem; border-radius: 0.4rem; 
}
.box_info_bg_green {
		top: 0.3rem; 
		left: 5rem;
		width: 6rem;
		display: block;
		position: relative;		
		padding: 0.1rem;
		background-color: #2c4b79;
		font-weight: bold;
		color: #ededed;	
		border: 0.15rem solid #ddd;
		text-align: center;
		text-shadow: 2px 2px 2px #111;
		z-index: 997;
}
.box_menu_bg_green {
		margin-top: 0rem; 
		padding: 0.4rem;
		background-color: #001010;
		color: #ededed;	
}
.box_menu_bg_blue {
		margin-top: 0rem; 
		padding: 0.3rem;
		border-radius: 0.3rem;
		background-color: #2F3F4F;
		color: #ededed;	
}
.box_bg_beige {
		margin-top: 0rem; 
		padding: 0.4rem;
		border-radius: 0.2rem;
		background-color: #F3DEA5;
		color: #111;	
}
.connection-indicator {		
		padding: 0.3rem;
		background-color: #ccc;
		color: #111;	
		border: 2px solid #000;
		border-radius: 2rem;
		font-size: 1rem;
		padding: 0.3rem;
}		
.header_welcome_banner {
    width: 98%;  /* Adjust as needed */
    height: 1.2rem; /* Adjust as needed */
    background: linear-gradient(45deg, #001010 42%, #333 42%);
	padding: 0.3rem; 
	margin-top: 2.8rem;
}
.icon_close_window {
	border: 0.1rem solid #666;
	border-radius: 0.3rem;
	background-color: #000;
	color: red;
	font-weight: bold;
	text-align: right;
	padding: 0.1rem 0.3rem 0.1rem 0.3rem; 
}	


/* timers */
.timer { }
.timer-completed { }

/* awesome points format */
.ap	{
	color: #A5D0F3;
	padding-right: 0.2rem;
	text-shadow: 2px 2px 2px #000;
}	
.ap::before {
  content: "\2728";  /* Sparkles emoji */
  font-family: "Segoe UI Emoji", "Apple Color Emoji", system-ui;
}
/* tournament points format */
.tp	{
	color: #00ff55;
	padding-right: 0.2rem;
	text-shadow: 2px 2px 2px #000;
}	
.tp::before {
  content: "\2605";  /* Star emoji */
  font-family: "Segoe UI Emoji", "Apple Color Emoji", system-ui;
  padding-right: 0.2rem;
}
/* chip format */
.ch	{
	color: #ccc;
	padding-right: 0.2rem;
	text-shadow: 2px 2px 2px #000;
}	
.ch::before {
  content: "\2742";  /* Chip emoji (circle) */
  font-family: "Segoe UI Emoji", "Apple Color Emoji", system-ui;
  padding-right: 0.2rem;
}




.button_game_signin { background-image: linear-gradient(to bottom, #00ff55, #00dd55, #00bb55, #009955, #006655); border-radius: 0.5rem; color: #111; display: inline; align-items: center; padding: 0.6rem; }
.button_game_signout { background-image: linear-gradient(to bottom, #ff004d, #dd004d, #bb004d, #aa004d, #88004d); border-radius: 0.5rem; color: #eee; display: inline; align-items: center; padding: 0.6rem; text-shadow: 1px 1px 1px #000; }