@charset "utf-8";
/*********** Fonts & Text Styling ************/
@font-face {
  font-family: resultBlock;
  src: url('https://golf.jobcop-dev.co.uk/assets/fonts/SSportsG-Medium.ttf');
}
@font-face {
  font-family: breakingNews;
  src: url('https://golf.jobcop-dev.co.uk/assets/fonts/SSportsD-Medium.ttf');
}
h1.breaking {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:48px;
	font-weight:bold;
}
.circle-container {
  /* Create the 300px circle */
  width: 300px;
  height: 300px;
  background-color:transparent;
  border-radius: 50%;
  
  /* Flexbox handles the perfect center alignment */
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically */
  
  /* Keeps the circle centered on your page */
  margin: 0 auto; 
}
.circle-container img {
  /* Set the image to 75% of the 300px (approx 225px) */
  width: 75%;
  height: 75%;
  
  /* Ensures the square image stays square and centered */
  /*object-fit: contain; */
}
.jcdark {
	color:#002542;
}
.jclight {
	color:#0CB6DC;
}
.jcwhite {
	color:#FFFFFF;
}
.jcblack {
	color:#000000;
}
.shad_l {
	text-shadow: 1px 1px #0CB6CD;
}
.shad_d {
	text-shadow: 1px 1px #002542;
}
.shad_w {
	text-shadow: 1px 1px #FFFFFF;
}
.jcbold {
	font-weight:bold;
}


h2.text-binfo, h5.text-binfo {
	/*color:#04526D;*/
	color:#002542;
	text-shadow: 1px 1px #0CB6CD;
}
h2.text-btitle, h4.text-binfo, table > th{
	color:#FFFFFF;
	text-shadow: 1px 1px #000;
}
h3.text-binfo {
	/*color:#04526D;*/
	color:#0CB6CD;
	text-shadow: 1px 1px #000;
}
.white {
	color:#FFF;
}
/*********** End Fonts & Text ************/
/*********** PAGE ELEMENTS  ************/
.table_custom { 
	--bs-table-bg: transparent !important; 
}
#data_table table  {
  text-align: left;
  position: relative;
  border-collapse: collapse; 
}
#data_table th{
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
}
.group_logo {
	width:300px;
	height:200px;
}
.custom_back {
	background-image: linear-gradient(315deg, #006 0%, #0FF 35%, #0FF 65%, #006 100%); 
}
.nav_clearance {
	margin-top:75px;
}
.scroller{
	height:550px;
	border:solid 1px #CCCCCC;
	overflow-y:scroll;
}

/*********** End Page Divs  ************/
/*********** FORM STYLING **************/
.datepicker {
	z-index:99999999 !important;
}
select {
	/* styling */
	background-color:transparent;
	border: none;
	border-bottom:1px solid #CCC;
	display: inline-block;
	font: inherit;
	line-height: 1.5em;
	padding: 0.5em 0em 0.5em 0em;
	/* reset */
	margin: 0;      
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
}
select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-repeat: no-repeat;
}
select.minimal:focus {
  background-image:
    linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, green 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}
select:-moz-focusing {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

/************************************************************/
/*CAROUSEL                                                  */
/************************************************************/

/****************** FADE TRANSITION ************************/
.carousel-item.active.carousel-item-start, 
.carousel-item.active.carousel-item-end {
  opacity: 0;
  transition: opacity 0.3s ease-out !important; /* Half the speed of the block */
}

/* 2. Ensure the incoming slide stays hidden until the block covers it */
.carousel-item-next, 
.carousel-item-prev {
  opacity: 0;
}

/* 3. Make the incoming slide appear (fade in) as the block dissolves */
.carousel-item-next.carousel-item-start, 
.carousel-item-prev.carousel-item-end {
  opacity: 1;
  transition: opacity 0.5s ease-in 0.7s !important; /* Delay until block is centered */
}

/* Optional: Speed up the base Bootstrap transition to prevent overlap issues */
.carousel-item {
  transition: transform 0.6s ease-in-out; 
}
/* 1. Positioning the Block */
.carousel-overlay-block {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /*background-color: #007bff;  Your solid color */
  background-image: linear-gradient(90deg, #006 0%, #0FF 100%);
  z-index: 10;
  pointer-events: none;
  opacity: 0; /* Hidden by default */
}
/****************** END FADE  ************************/
/****************** FLY TRANSITION  ************************/
/* 2. Fly-in from Right (Even Slides) */
@keyframes flyInRightReveal {
  0% { transform: translateX(100%); opacity: 1; }
  40% { transform: translateX(0%); opacity: 1; }
  70% { transform: translateX(0%); opacity: 1; }
  100% { transform: translateX(0%); opacity: 0; }
}

/* 3. Fly-in from Left (Odd Slides) */
@keyframes flyInLeftReveal {
  0% { transform: translateX(-100%); opacity: 1; }
  40% { transform: translateX(0%); opacity: 1; }
  70% { transform: translateX(0%); opacity: 1; }
  100% { transform: translateX(0%); opacity: 0; }
}
.animate-right {
	animation: flyInRightReveal 0.5s forwards;
}
.animate-left {
	animation: flyInLeftReveal 0.5s forwards;
}
/****************** END FLY  ************************/
/****************** GROW TRANSITION **************************/
#checkBoard {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    transition: width 0.8s ease, height 0.8s ease;
    border: none;
    z-index: 9999;
	overflow: hidden;
}

#checkBoard.grow {
    width: 100%;
    height: 100%;
}
/************* End Grow *****************/
/****************** RESULTS SLIDES ************************/
#maincarousel {
	z-index:99 !important;
}
.redback {
	background-image: linear-gradient(120deg, #C00 0%, #f00 50%, #E32844 100%);
}
.yellowback {
	background-image: linear-gradient(120deg, #FC0 0%, #FC0 50%, #FF0 100%);
}
.tableback {
	background-image: linear-gradient(165deg, #003083 0%, #006abc 75%, #09F 100%);
}
.redradialback {
	background-image: linear-gradient(180deg, #f00 0%, #900 45%, #900 55%, #f00 100%);
}
.lblueback {
	background-image: linear-gradient(165deg, #039 0%, #06C 50%, #39F 100%);
}
.breakingnewsback {	
	background: radial-gradient(#FFF, #FFC107);
}
/****************** END RESULTS SLIDES ************************/
/****************** WELCOME SLIDES ************************/
/*
.sun-sunrise {
  background: radial-gradient(
    circle farthest-corner at 0% 100%, 
    #002542 0%,                        
    #0cb6cd 20%,                       
    transparent 50%                    
  );
  background-color: #FFF;           
  min-height: 100vh;
}
*/

.sun-sunrise {
	background-image:url(../../../images/jobcop/presentation.png);
	background-repeat:no-repeat;
	background-size:cover;
}




.slide_block {
	font-family:resultBlock;
}
.slide_block_small {
	font-size:6px;
	font-family:resultBlock;
}
/****************** END WELCOME SLIDES ************************/

.newFrame {
	background-color:#FFC;
}
/************** Black/Yellow Scrolling bar *******************/
/*.marquee {
    width: 80%;
	line-height: 37px;
	background-color: black;
	color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    animation: marquee 80s linear infinite;
}

@keyframes marquee {
	from{transform:translateX(100%);}
    to{transform:translateX(-375%) ;}
}
/************* End Black/Yellow Scrolling *****************/

.marquee-container {
  overflow: hidden; /* Hides the text outside the box */
  white-space: nowrap;
  display: flex;
  line-height: 40px;
}

.marquee-content {
  display: flex;
  width: max-content;
  animation: scroll 20s linear infinite; /* Adjust time for speed */
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Moves exactly one set of text */
  }
}

.events-container {
  overflow: hidden; /* Hides the text outside the box */
  white-space: nowrap;
  display: flex;
  line-height: 40px;
  background-color:#000000;
}
.events-content {
  display: flex;
}


.bogie {
	background-image:url(https://golf.jobcop-dev.co.uk/images/scores/bogey.png);
	background-repeat:no-repeat;
	background-position: left 3px top 3px;
  	background-size: calc(100% - 6px) calc(100% - 6px);
}
.dbogie {
	background-image:url(https://golf.jobcop-dev.co.uk/images/scores/dbogey.png);
	background-repeat:no-repeat;	
	background-position: left 3px top 3px;
  	background-size: calc(100% - 6px) calc(100% - 6px);
}
.birdie {
	background-image:url(https://golf.jobcop-dev.co.uk/images/scores/birdie.png);
	background-repeat:no-repeat;	
	background-position: left 3px top 3px;
  	background-size: calc(100% - 6px) calc(100% - 6px);
}
.eagle {
	background-image:url(https://golf.jobcop-dev.co.uk/images/scores/eagle.png);
	background-repeat:no-repeat;	
	background-position: left 3px top 3px;
  	background-size: calc(100% - 6px) calc(100% - 6px);
}
input.scoring {
	text-align:center;
	border:none;
	background-color:transparent;
}
input.ttl {
	font-weight:bold;
	font-size:larger;
}



/* 1. Lock the stage */
.centered-carousel .carousel-item {
    height: 65vh !important;
    position: relative; /* Needed for the absolute image */
    overflow: hidden;
    background-color: transparent !important;
}

/* 2. Force the active slide to exist as a full-size block */
.centered-carousel .carousel-item.active {
    display: block !important; /* Switch from flex to block to test height inheritance */
    height: 65vh !important;
}

/* 3. The "Absolute Force" Image Styling */
.centered-carousel .carousel-item img {
    /* Set the exact physical height based on the parent's vh */
    /* 90% of 65vh is 58.5vh */
    max-height: 52vh !important; 
    
    width: auto !important; /* Keep the aspect ratio perfect */
    
    /* Absolute Positioning ensures the image ignores all other div logic */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* The 'Perfect Center' formula */
    
    /* Remove all Bootstrap constraints 
    max-height: none !important;
    max-width: none !important;*/
}


















/***************************************************************************
*                         Responsive Setting                               *
***************************************************************************/
/* small devices (tablets, 576px and up) sm */
@media (min-width: 576px) and (max-width: 767px){
	
}

/* Medium devices (tablets, 768px and up) md */
@media (min-width: 768px) and (max-width: 991px){
	
}

/* Large devices (desktops, 992px and up) lg */
@media (min-width: 992px) and (max-width: 1199px){
	
	
}
/* X-Large devices (large desktops, 1200px and up) xl */
@media (min-width: 1200px) and (max-width: 1399px){
	
}

/* XX-Large devices (larger desktops, 1400px and up) xxl */
@media (min-width: 1400px) {
	
}