@font-face {
  font-family: chakraBold;
  src: url(css/ChakraPetch-Bold.ttf);
}
@font-face {
  font-family: chakraReg;
  src: url(css/ChakraPetch-Regular.ttf);
}  
.lg-backdrop, .lg-outer {
  z-index: 1060 !important; /* higher than modal (1050) */
}
 body, .navbar {
      background-color:rgb(199 228 208); 
      margin: 0;
      padding: 0;
      font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .compMenu i{
    font-size:smaller;
    color:rgb(80, 78, 78);
  }
  select{ 
	 color: black;
  }
  

  .top-right {
    font-size: 16px;
    color: grey;
    margin:8px;
    position:absolute;
    position: absolute;
    bottom: 8px;
    right: 12px;

  }

  .carousel-control-next,.carousel-control-prev {
    opacity: 1;
    color: red;
  }
  .compSelected, .topSelected{
    font-weight:800;
    font-size:28px;
    color:black;
    text-overflow:ellipsis;
    max-width:80%;
    white-space: nowrap;
    text-align:center;
  }
  
  .main {
      margin: 126px auto 0px;
      border-radius: 0 0 8px 8px ;
      padding-bottom: 44px;
      background-color: #fff;
      box-shadow: 0px -2px 8px rgba(0,0,0,.5)!important;
      padding-left:8px;
      padding-right:8px;
  }

  @media (max-width: 769px) {
   .mainxxx {
     padding-right: 11px;
   }
 }
 
  .topGun {
    border-radius: 36px 36px 0 0;
    background-color: white;
    text-align:left;
    border-bottom: 1px solid #5957587d;
    box-shadow: 0px -2px 8px rgba(0,0,0,.5)!important
  }
  .marquee{
    
    border: 1px solid #5957587d;
    box-shadow: 0px 2px 8px rgba(0,0,0,.5)!important;
    background-color:white;

  }
  .outMsg{
    width:100%;
    white-space: nowrap;
    overflow: ellipsis;
    font-family: monospace;

  }
    .taskmain {
      margin: 0px auto 80px;
      padding: 40px 24px 100px;
      background-color: #fff;
      border-radius: 1em;
      overflow: hidden;
  }
  .find-pane {
  border: 1px solid #d0d0d0;
  background: #ffffff;
  border-radius: 6px;
  padding: 1.5rem;

  /* Crisp shadows, sharp falloff */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 6px 12px rgba(0, 0, 0, 0.16),
    0 16px 24px rgba(0, 0, 0, 0.1);

  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top:0 !important;
}
.modal-content:focus,
.modal-content:focus-visible,
.modal:focus,
.modal:focus-visible,
.modal-dialog:focus,
.modal-dialog:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
.modal-content {
  border: none !important;
}
	.menu-Top {
		position:fixed;
		top:0px;
		z-index:999;
		background-color:white;

	}
	.oG {
		font-weight: bold;
		font-style: italic;
		font-size:24px;
	}
	.left-stack{
		display:block;
		text-align:center;
		vertical-align:top;
		font-size:24px;
		font-weight:bold;
	}
	.oC {
		padding-left: 15px;
	}
  .linkBlock{
    display:inline-block;
    margin-right: 60px;

  }

  .cInp{
	  display:inline;
	  font-size:24px !important;
  }
  .vscomp-ele {
	  max-width:800px !important;
  }
  .nav-tabs .nav-link.active, .nav-tabs .nav-item.show, .nav-link {
    border-color: black;
	border-width: 2px 2px 0px 2px;
	border-bottom:0px !important;

  }
 .nav{
  flex-wrap: nowrap;
 }
  table,th{
    text-align: center;
    border:4px solid black;
    font-weight: 400;
    margin: auto;
    
    table-layout: fixed; 
    width: 100%:
  }
  td{
    border: 1px solid black;
    padding: 2px 8px;
  }
  

  .nav-tabs {
	  border-bottom:0px;
  }
  .nav-tabs .nav-linkx {
	  border-bottom:3px solid black !important;
  }
  .nav-link {
      color:black;
      padding: 0.5rem 0.24rem
  }
  .quickSel {
    padding:0.5rem 0.1rem;
    min-width: 108px;
    max-width: 132px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
    text-align:center;
  }
	  .tabbable .nav-tabs {
	   overflow-x: auto;
	   overflow-y:hidden;
	   flex-wrap: nowrap;
	}
	.tabbable .nav-tabs .nav-link {
	  white-space: nowrap;
	}
  input[type=checkbox] {
      transform: scale(1.3);
      margin: 4px 3px 0px 2px;
  }
  input[type=radio] {
      transform: scale(1.5);
      margin: 0px 4px;
  }
  .carou{
    width:100%;
    overflow-x:scroll;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    
  }
  .centerCards{
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content: center;
  }
	.subcat {

		border:1px;
		margin:8px;
	}
    .rafTab {
         padding-left:8px;
         padding-right:8px;
         font-size:16px;
    }
    .rafTabW, .rafTabW.nav-link.active {
        color:white;
        background:#888787; /* Red */
    }
    .rafTab1, .rafTab1.nav-link.active {
        color:white;
        background:#ef4545; /* Red */
    }
    .rafTab2, .rafTab2.nav-link.active{
        color:white;
        background:#63c72f; /* Greeeeen */
    }
    .rafTab3, .rafTab3.nav-link.active {
        color:white;
        background:#358eea; /* Bluuuuu */
    }
    .rafTab4, .rafTab4.nav-link.active {
        color:white;
        background:#f5bf27;/*#ffc107 Yelllowishhhh */
    }
    .rafTab5, .rafTab5.nav-link.active {
        color:white;
        background:#8751a2; /*#ffc107 Yelllowishhhh */
    }
	.footLink {
		color:white;
		margin-right:8px;
  }
  .footLink:hover {
      color: #0056b3;
      text-decoration: underline;
	}
    .rafTab6, .rafTab6.nav-link.active {
        color:white;
        background:#9f8f7b; /*#ffc107 Yelllowishhhh */
    }
  h1{
      font-weight: 700;
  }
  h4{
    font-weight: 600;
    font-size: 24px;
  }
  
  .superbold{
      font-weight: 900;
  }
  .miniT{
	  font-size:12px;
	  font-weight: 600;
  }

  .chkd {
	  text-decoration: line-through;

  }
  /* STICKY TOP MENUS */
	.fixedElement {
		background-color:white;
		position:static;
		top:0;
		width:100%;
		z-index:100;
	}

    a {
      font-weight:700;
      /*text-decoration:underline;*/
    }
    
    a:hover {
      /*background-color: lightgreen*/;
    }

    xa:active {
      background-color: hotpink;
    }

  .blockie {
    display:inline-block;
    margin-right:10px;

  }
  hr {
      margin:3px;
  }
  .center {
    position: absolute;
    width: 400px;
    height:400px;
    top: 50%;
    left: 50%;
    margin-left: -200px; /* margin is -0.5 * dimension */
    margin-top: -200px;
  }​
  .dep-button {
      display: inline;
  }
  .ibutton, .tbutton, .sButton{
      background-color: #9ee9ff;
      color: black;
      padding: 2px 6px;
      font-size: 10px;
      font-weight: bold;
	  margin-left: 3px;
  }
    .inudge{
      background-color: #ff9941;
      color: black;
      padding: 2px 6px;
      font-size: 10px;
      font-weight: bold;

  }
   .isnooze{
      background-color: #f36c83;
      color: black;
      padding: 2px 6px;
      font-size: 10px;
      font-weight: bold;
	  margin-left: 3px;
  }

  .Gbutton {
      background-color: green;
      color: black;
      padding: 2px 6px;
      font-size: 10px;
      font-weight: bold;
  }
  .Rbutton {
      background-color: red;
      color: black;
      padding: 2px 6px;
      font-size: 10px;
      font-weight: bold;
  }

  .pnk{
    background-color:#ffcfbc;
    
  }
  .redx{
      color:red !important;
  }
  .purp{
    color:#910785;
}
  .dkblu{
    color:#041458;
  }
  .dgrn{
    color:#2a8309;
  }
  .lgrn{
    color:#6ce625;
  }
  .orn{
    color:#ff7e0b;
  }
  .xsm{
    font-size: smaller;
  }
  .sCrd{
    border:1px solid black;
    padding: 0px;
  }
  .trnk{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    padding-left: 0.8rem; /* 8px */
    padding-right: 0.8rem; /* 8px */
  }

  .reddie {
      background-color: rgb(190, 58, 58);
      color: white;
      padding: 8px 8px;
      font-size: 14px;
      font-weight: bold;
  }
  .bluey {
      background-color:#289ed6;
      color: white;
      padding: 8px 8px;
      font-size: 14px;
      font-weight: bold;
  }
    .greenie {
      background-color: green;
      color: white;
      padding: 8px 8px;
      font-size: 14px;
      font-weight: bold;
  }
  .rongey {
      background-color:#ca701d ;
      color: white;
      padding: 8px 8px;
      font-size: 14px;
      font-weight: bold;
  }  
  .pillTog{
    height:30px;
    min-width:75px;
    border-radius: 30px;
    color:black;
    background-color: rgb(203, 197, 197);
    margin: auto 4px auto 4px;
    
  }
  .pillTog[value="1"]{
    color:white;
    background-color:darkblue;
  }
  h3 {
      color: red
  }
  .logo {
      height: 44px;
      width:auto;
      padding: 0px;
      margin: 0 auto;
      text-align:center;
  }
  .tfield {
    border:1px solid black;
  }
  img {
      max-width: 100%;
      max-height: 100%;
      
  }
  .ccPics {
      width: 288px;
      height: 288px;
  }


  .eCbtn[value="1"], .fCbtn[value="1"] {
    font-size: 27px;
  }
  .hyde,.eCbtn[value="0"]{
    display:none;
  }
  .struk[value="0"]{
    text-decoration: line-through;
  }

  .trans{
    opacity: 0.4;
  }
  label {
	  margin-bottom: 0px;
  }
  .upFileDiv {
    border:2px solid grey;
    border-style: dashed;
    padding: 8px;
  }
  .footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color:#405356;
      color: white;
      text-align: center;
  }

 .numbPad {
     font-size: 20px;
    /*width: 100px;*/
 }
.tCard {
  margin: 0px;
  padding: 1px;
  height: 100%;
  overflow:hidden;
  box-shadow: 0px 1px 2px rgba(0,0,0,.2)!important;
  border: 1px solid #d4bfa4!important;
  position: relative;   /* new */

}
.bot-right {
  font-size: 12px;
  color: grey;
  position: absolute;
  bottom: 4px;    /* positive value keeps it inside */
  right: 6px;
  margin: 0;      /* don’t let margin fight positioning */
}
.tContent {
  overflow-y: auto;
  max-height:320px;
}

 .tCardDDD {
  margin:2px;
  padding:2px;
  height:100%;
  box-shadow: 1px 4px 9px rgba(0,0,0,.5)!important;
  border: 2px solid #071a2d!important;
}
.tRow1 {
  display:block;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tR{
 display: flex;
 justify-content: flex-end;
 white-space:nowrap;
}
label, .dropdown-item,.quickSel {
  font-family: chakraBold;
  
}
.modal-title{
  font-family: chakraBold;
}
.modal-header{
  background-color:#adbcc1;
}
.modal-content{
  border-radius: 0.6rem;
}
.tL-Fill{
  flex-grow:1;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right:4px;
}
.liveTime{
  font-family: chakraBold;
  font-size: 26px;
  color: #61896e;
}
.flatList{
  background-color: #c3c9d4;
  border-style: solid;
  border-width: 1px;
  padding-top: 0px;
}
.subGroup{
  border-bottom: 1px dashed;
  background-color: transparent;
}
.sticky {
  position: sticky;
  top: 126px;
  z-index: 999;
  }
.subSticky {
  position: sticky;
  top: 146px;
  z-index: 998;
  background-color: white;
  }
  
.fL0{
  background-color: #a1d2d4;;
}
.fL1{
  background-color: #d5e9ea;
}
.iDat{
  margin:auto;
  text-align:left;
  line-height:50px;
  padding:0;
  vertical-align: bottom;
}
.bigNumb {
  color:navy;
  font-size:22px;
  font-weight: 550;
  font-family: chakraBold;
  display:inline-block;
  margin: auto;  
  text-align: left;
  vertical-align: top;
  line-height:32px;  
}
.bigGreen {
  color:#297c20;
  font-size:22px;
  font-weight: 550;
  font-family: chakraBold;
  display:inline-block;
  margin: auto;  
  text-align: right;
  vertical-align: top;
  line-height:32px; 
  white-space: nowrap; 
}
/*
border-bottom: 4px dashed;
*/

/* Switch Left Right
==========================*/

.switch {
	position: relative;
	display: block;
	vertical-align: top;
	width: 100px;
	height: 30px;
	padding: 3px;
	margin: 0 10px 10px 0;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
	border-radius: 18px;
	box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	box-sizing:content-box;
}
.switch-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	box-sizing:content-box;
}
.switch-label {
	position: relative;
	display: block;
	height: inherit;
	font-size: 10px;
	text-transform: uppercase;
	background: #eceeef;
	border-radius: inherit;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
	box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
	position: absolute;
	top: 50%;
	margin-top: -.5em;
	line-height: 1;
	-webkit-transition: inherit;
	-moz-transition: inherit;
	-o-transition: inherit;
	transition: inherit;
	box-sizing:content-box;
}
.switch-label:before {
	content: attr(data-off);
	right: 11px;
	color: #aaaaaa;
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
	content: attr(data-on);
	left: 11px;
	color: #FFFFFF;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
	opacity: 0;
}
.switch-input:checked ~ .switch-label {
	background: #E1B42B;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
	opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
	opacity: 1;
}
.switch-handle {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 28px;
	height: 28px;
	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
	border-radius: 100%;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -6px;
	width: 12px;
	height: 12px;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
	border-radius: 6px;
	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
	left: 74px;
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
	-moz-transition: All 0.3s ease;
	-o-transition: All 0.3s ease;
}
.btn-check{
  position: absolute;
  clip: rect(0,0,0,0);
  pointer-events: none;
}
.btn-check:not(:checked) + label{
  background-color:grey;
}
.xTxt{
  font-family: Tahoma;
  font-size:28px;
  color: rgb(132 14 14);
}
.xLine{
  height:2px;
  box-shadow:0px 5px 10px rgba(0, 0, 0, 0.5);
  background-color:#6d0b0b;
}
div.button-like {
  width: 100%; /* Adjust as needed */
  padding: 15px 20px;
  margin-bottom: 10px;
  background: linear-gradient(145deg, #ffffff, #e0e0e0); /* Subtle gradient for 3D effect */
  border: 2px solid ; /* Outline */
  border-radius: 25px; /* Fully rounded edges */
  box-shadow: 
    4px 4px 8px rgba(222, 144, 144, 0.8), /* Shadow for depth */
    inset -2px -2px 5px rgba(255, 255, 255, 0.7), /* Highlight for 3D effect */
    inset 2px 2px 5px rgba(0, 0, 0, 0.1); /* Inner shadow for press effect */
  color: #333; /* Text color */
  font-size: 18px; /* Adjust font size */
  font-weight: bold; /* Bold text for button look */
  text-align: center; /* Center the text */
  line-height: 1.5;
  cursor: pointer; /* Pointer cursor for interactivity */
  transition: all 0.2s ease-in-out; /* Smooth transition for hover effects */
}

div.button-like:hover {
    background: linear-gradient(145deg, #e0e0e0, #ffffff); /* Reverse gradient for hover effect */
    box-shadow: 
      6px 6px 12px rgba(0, 0, 0, 0.6), 
      inset -2px -2px 6px rgba(255, 255, 255, 0.8),
      inset 2px 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px); /* Slight lift on hover */
  }
  
  div.button-like:active {
    background: linear-gradient(145deg, #d9d9d9, #c2c2c2); /* Darker gradient for pressed effect */
    box-shadow: 
      inset 6px 6px 12px rgba(0, 0, 0, 0.3), /* More pronounced inner shadow */
      inset -4px -4px 8px rgba(255, 255, 255, 0.5); /* Adjusted highlight */
    transform: translateY(2px); /* Simulate the sinking in effect */
  }

  #customMenu {
    backdrop-filter: blur(6px);
    background-color: rgba(255,255,255,0.85);
    border-radius: 0.5rem;
    overflow: hidden;
  }
  #customMenu li:hover {
    background-color: #f8f9fa;
    cursor: pointer;
  }
  
/* ===== SubGroup metric summary ===== */
.sgSummary{
  display: inline-flex;
  vertical-align: middle;
  gap:.35rem .4rem;
  margin-top:.15rem;
  margin-left: .6rem;
}

.sgChip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.22rem .45rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.64);
  background:rgba(0,0,0,.03);
  font-size:.78rem;
  white-space:nowrap;
  max-width:100%;
  margin-left: .25rem;
}
.xl{
  font-size:22px;
  padding:.3rem .6rem;
}
.cPoint, .chSheet {
  cursor: pointer;
}
.xll{
  font-size:32px;
  padding:0rem .1rem;
}
.greyOut {
  filter: grayscale(1) brightness(0.7);
  opacity: 0.6;
}
.sgChip .k{
  opacity:.75;
  font-weight:600;
  letter-spacing:.02em;
}

.sgChip .v{
  font-weight:800;
}

/* statuses */
.sgChip.bad{
  border-color:rgba(220,53,69,.64);
  background:rgba(220,53,69,.07);
}
.sgChip.good{
  border-color:rgba(25,135,84,.64);
  background:rgba(25,135,84,.07);
}

/* tighten on phones */
@media (max-width:576px){
  .sgSummary{ gap:.3rem .3rem; }
  .sgChip{ font-size:.75rem; padding:.2rem .4rem; }
}

.logDat{
  margin-left:10px;
}
#celebration-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
}

#perfect-shift-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    z-index: 9999;
    font-family: 'Arial Black', sans-serif;
    font-size: 5rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    
    /* Gold Effect */
    background: linear-gradient(to bottom, #cfad49 0%, #fbedad 50%, #cfad49 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)) drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}

/* The Animation Trigger Class */
.animate-text {
    animation: goldFloat 3s ease-out forwards;
}

@keyframes goldFloat {
    0% { transform: translate(-50%, -40%) scale(0.8); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    80% { transform: translate(-50%, -55%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -60%) scale(1); opacity: 0; }
}
a.empFdBk {
    text-decoration: none;
    
    /* Font styling */
    font-family: chakraBold, Arial, sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    
    /* The "Snazzy" Gradient */
    background: linear-gradient(45deg, #030203, #0b3125);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Smooth transition for hover */
    transition: all 0.3s ease;
    display: inline-block;
}