/* CSS Document */
.badge0 {
    position: absolute;
    bottom: 10px; /* Position at the bottom */
    right: 5px; /* Adjust as needed */
    background-color: #ff2800; /* Background color for the badge */
    color: white; /* Text color */
    border-radius: 50%; /* Make it a circle */
    padding: 2px 6px; /* Adjust padding for size */
    font-size: 12px; /* Font size */
    line-height: 1; /* Line height */
	font-weight: bold;
}



.badge2 {
	position: relative;
    top: -30px; /* Moves the badge up by 20px */
    left: 6px; /* Adjust as needed to position horizontally */
    background-color: #ff2800; /* Background color for the badge */
    color: white; /* Text color */
    border-radius: 50%; /* Make it a circle */
    padding: 1px 5px; /* Adjust padding for size */
    font-size: 1.5vw; /* Font size */
    line-height: 1; /* Line height */
	z-index: 1000; /* Ensures the badge is on top of other elements */
}

#menu_dropdown_notification{
	left:-95px; 
	background-color:rgba(255, 255, 255, 0.9);
	width:321px !important;
}

.notification_cards:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
	background-color:rgba(228, 237, 247, 1);
}

.notification_cards_old:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
	background-color:rgba(189, 211, 235, 1);
}


#menu_dropdown{
	left:-130px !important;
	background-color:rgba(255, 255, 255, 0.8);
	width:408px !important;
}
@media (max-width: 991px) {
	#menu_dropdown {
        left:0px !important;
		background-color:rgba(255, 255, 255, 0.8);
    }
	#menu_dropdown_notification{
		left:0px !important;
		background-color:rgba(255, 255, 255, 0.8);
	}
}


.nav-tabs .nav-link.active {
  background-color: #f0f0f0;
  /*border-bottom: 3px solid #007bff;*/
  color: #ff2800;
}

.nav-tabs .nav-link {
  color: #555;
  transition: background-color 0.3s ease;
}
/*
.menu_bell {
    position: absolute;
	display:block;
    top: 75px;
    right: 2px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    width: 270px;
    height:300px;
    z-index: 1000;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	padding:8px;
}

.menu_bell::after {
    content: '';
    position: absolute;
    top: -1px; 
    right: 200px;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.8);
    border-top: 0;
    margin-left: -20px;
    margin-top: -20px;

}
*/
/* Buttons */
.btn-white-red, .btn-white-red:visited {
	/*background-color:#999999 !important;*/
	background-color: transparent !important;
	color:#fff !important;
	border-style:none !important;
}

.btn-white-red:hover{
	color:#ff2800 !important;
}

.btn-white-red:active{
	color:#fff !important;
}






.btn-red-black, .btn-red-black:visited {
	/*background-color:#999999 !important;*/
	background-color: transparent !important;
	color:#ff2800 !important;
	border-style:none !important;
}

.btn-red-black:hover{
	color:#000 !important;
}

.btn-red-black:active{
	color:#ff2800 !important;
}

.btn-black-red, .btn-black-red:visited {
	/*background-color:#999999 !important;*/
	background-color: transparent !important;
	color:#000 !important;
	border-style:none !important;
}

.btn-black-red:hover{
	color:#ff2800 !important;
}

.btn-black-red:active{
	color:#000 !important;
}


.btn-over-gold, .btn-over-gold:visited {
	/*background-color:#999999 !important;*/
	background-color: transparent !important;
	color:#EFBF04 !important;
	border-style:none !important;
}

.btn-over-gold:hover{
	color:#ff2800 !important;
}

.btn-over-gold:active{
	color:#EFBF04 !important;
}

.btn-over-red, .btn-over-red:visited {
	/*background-color:#999999 !important;*/
	background-color: transparent !important;
	color:#ff2800 !important;
	border-style:none !important;
}

.btn-over-red:hover{
	color:#212529 !important;
	/*color:#0D6EFD !important;*/
	
}

.btn-over-red:active{
	color:#ff2800 !important;
}

.btn-over-gray, .btn-over-gray:visited {
	/*background-color:#999999 !important;*/
	background-color: transparent !important;


	color:#EDF2F4 !important;
	border-style:none !important;
}

.btn-over-gray:hover{
	color:#ff2800 !important;
}

.btn-over-gray:active{
	color:#EDF2F4 !important;
}

.btn-over-black, .btn-over-black:visited {
	background-color:#212529 !important;
	color:#EDF2F4 !important;
	border-style:none !important;
}

.btn-over-black:hover{
	color:#ff2800 !important;
}

.btn-over-black:active{
	color:#EDF2F4 !important;
}


.btn-boxprime, .btn-boxprime:visited {
    background-color: #009Fb7 !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #009Fb7 !important;
	border-radius: 5px;
	color:#ffffff !important;
}

.btn-boxprime:hover{
	background-color: #005F6F !important;
	color:#ffffff !important;
}

.btn-boxprime:active{
	background-color: #005F6F !important;
	border-style: solid !important;
	border-width: medium !important;
	border-color: #009Fb7 !important;
	color:#ffffff !important;
}

.btn-boxwarning, .btn-boxwarning:visited {
    background-color: #f13110 !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #c8270e !important;
	border-radius: 5px;
	color:#ffffff !important;
}

.btn-boxwarning:hover{
	background-color: #c8270e !important;
	color:#ffffff !important;  
}

.btn-boxwarning:active{
	background-color: #c8270ef !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #f13110f8 !important;
	color:#ffffff !important;
}

.btn-boxblue, .btn-boxblue:visited {
    background-color: #202fb3 !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #0720f0 !important;
	border-radius: 5px;
	color:#ffffff !important;
}

.btn-boxblue:hover{
	background-color: #29327d !important;
	color:#ffffff !important;  
}

.btn-boxblue:active{
	background-color: #202fb3 !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #0720f0 !important;
	color:#ffffff !important;
}


.btn-secondary, .btn-secondary:visited {

	border-radius: 24px;
}

/* NAV BAR BUTTONS */
.btn-navtopright, .btn-navtopright:visited {
    background-color: #212529 !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #212529 !important;
	border-radius: 50%;
	color:#FFF !important;
	
}

.btn-navtopright:hover{
	background-color: #212529 !important;
	color:#FFF !important;  
}

.btn-navtopright:active{
	background-color: #212529 !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #212529 !important;
	color:#FFF !important;
}
/* NAV BAR BUTTONS */


.btn-cap, .btn-cap:visited {
    background-color: #202fb3 !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #0720f0 !important;
	border-radius: 24px;
	color:#ffffff !important;
}

.btn-cap:hover{
	background-color: #29327d !important;
	color:#ffffff !important;  
}

.btn-cap:active{
	background-color: #202fb3 !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #0720f0 !important;
	color:#ffffff !important;
}

.btn-pale, .btn-pale:visited {
    background-color: #fff !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #212529 !important;
	border-radius: 24px;
	color:#212529 !important;
}

.btn-pale:hover{
	background-color: #EDF2F4 !important;
	color:#212529 !important;  
}

.btn-pale:active{
	background-color: #ffffff !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #212529 !important;
	color:#212529 !important;
}

.btn-paleball, .btn-paleball:visited {
    background-color: #fff !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #212529 !important;
	border-radius: 50%;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:8px;
	padding-right:8px;
	color:#212529 !important;
}

.btn-paleball:hover{
	background-color: #EDF2F4 !important;
	color:#212529 !important;  
}

.btn-paleball:active{
	background-color: #ffffff !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #212529 !important;
	color:#212529 !important;
}

.btn-act, .btn-act:visited {
    background-color: #F28123 !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #FCA15E !important;
	border-radius: 24px;
	color:#ffff !important;
}

.btn-act:hover{
	background-color: #8D4A03 !important;
	color:#ffff !important;  
}

.btn-act:active{
	background-color: #F28123 !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #FCA15E !important;
	color:#ffff !important;
}

.btn-primary, .btn-primary:visited {
    background-color: #009Fb7 !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #009Fb7 !important;
	border-radius: 24px;
}

.btn-primary:hover{
	background-color: #005F6F !important;
}

.btn-primary:active{
	background-color: #005F6F !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #009Fb7 !important;
}


.btn-primary-sq, .btn-primary-sq:visited {
    color: #fff; /* White text */
	background-color: #009Fb7; /* Blue background */
	border-color: #009Fb7; /* Blue border */
	padding: 0.375rem 0.75rem; /* Standard padding */
	border-radius: 0.25rem; /* Slightly rounded corners */
	font-family: sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary-sq:hover{
	background-color: #005F6F !important;
	color: #fff !important; 
}

.btn-primary-sq:active{
	background-color: #005F6F !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #009Fb7 !important;
	color: #fff !important;
}
/*
.btn-warning, .btn-warning:active, .btn-warning:visited {
    background-color: #F28123 !important;
	color:white; 
	border-radius: 24px;
	
}

.btn-warning:hover{
	background-color: #8D4A03 !important;
	color:white !important;
}

.btn-warning:active{
	background-color: #8D4A03 !important;
	color:white !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #F28123 !important;
}
*/

.btn-warning-s, .btn-warning-s:active, .btn-warning-s:visited {
    background-color: #f13110 !important;
	color:white; 
	border-radius: 5px;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #c8270e !important;
}


.btn-warning-s:hover{
	background-color: #c8270e !important;
	color:white !important;
}


.btn-warning-s:active{
	background-color: #c8270ef !important;
	color:white !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #f13110f8 !important;
}


.btn-warning, .btn-warning:active, .btn-warning:visited {
    background-color: #f13110 !important;
	color:white; 
	border-radius: 24px;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #c8270e !important;
}


.btn-warning:hover{
	background-color: #c8270e !important;
	color:white !important;
}


.btn-warning:active{
	background-color: #c8270ef !important;
	color:white !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #f13110f8 !important;
}



.btn-light, .btn-light:visited {
    background-color: #fff !important;
	border-radius: 24px;
	color:#ff2800 ;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #ff2800 !important;
}

.btn-light:hover{
	background-color: #ccc !important;
	color:#f13110 ;
}

.btn-light:active{
	background-color: #fff !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #666 !important;
	color:#f13110 ;
	
}

.btn-night, .btn-light:visited {
    background-color: #666 !important;
	border-radius: 24px;
	color:#fff ;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #ccc !important;
}

.btn-night:hover{
	background-color: #333 !important;
	color:#fff ;
}

.btn-night:active{
	background-color: #666 !important;
	border-style: solid !important;
	border-width: thin !important;
	border-color: #ccc !important;
	color:#fff ;
	
}

.unread_badge{
	position:relative;
	color:white;
	font-weight:bold;
	background-color:red;
	border-radius: 50%;
	width:20px;
	display:block;
	padding:3px;
	text-align:center;
	font-size:10px;
	top:-33px;
	left:-8px;
	
}



/* TIP TOOL CSS 
THIS WAS FIRST USED ON THE VIEW create_edit_team.php
If you need to know how to utilise it go there.
*/
.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-icon {
  background-color: #ff2800;/*#0078D4;*/
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-weight: bold;
  font-family: sans-serif;
  margin-left:15px;
  font-size:14px;
  margin-top: -5px;
}

.tooltip-text {
  visibility: hidden;
  width: 250px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 5px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}



.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.tooltip-container-wide {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-icon-wide {
  background-color: #ff2800;/*#0078D4;*/
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-weight: bold;
  font-family: sans-serif;
  margin-left:15px;
  font-size:14px;
  margin-top: -5px;
}

.tooltip-text-wide {
  visibility: hidden;
  width: 450px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 5px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 100%;
  transform: translateX(.1%);
  opacity: 0;
  transition: opacity 0.3s;
}


.tooltip-container-wide:hover .tooltip-text-wide {
  visibility: visible;
  opacity: 1;
}


/* WHO LIKES THIS - TOOLTIP SYSTEM */

/* 1. The Parent Container */
.like-link-wrapper {
    position: relative;
    display: inline-block;
    font-size: 10px;
    cursor: pointer;
}

.like-count-link {
    text-decoration: none;
    color: #fff;
}

/* 2. The Tooltip (Shared Base Styles) */
.who-likes-tooltip {
    visibility: hidden; /* Hide by default */
    opacity: 0;         /* Hide by default */
    position: absolute;
    right: 0;           /* Anchors the right edge to the link */
    background-color: #212529;
    color: #e9ecef;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
    font-size: 12px;
    transition: opacity 0.2s ease; /* Optional: smooth fade */
	text-align: left;
}

/* 3. The Arrow (Shared Base Styles) */
.who-likes-tooltip::after {
    content: "";
    position: absolute;
    right: 10px;        /* Moves arrow to the right side of the box */
    border-width: 5px;
    border-style: solid;
}

/* 4. Directional Logic: POSTS (Pushes DOWN) */
.who-likes-tooltip.is-post {
    top: 130%;          /* Sits below the link */
    bottom: auto;
}

.who-likes-tooltip.is-post::after {
    bottom: 100%;       /* Arrow on top of tooltip */
    top: auto;
    border-color: transparent transparent #333 transparent; /* Points UP */
}

/* 5. Directional Logic: COMMENTS (Pushes UP) */
.who-likes-tooltip.is-comment {
    bottom: 130%;       /* Sits above the link */
    top: auto;
}

.who-likes-tooltip.is-comment::after {
    top: 100%;          /* Arrow on bottom of tooltip */
    bottom: auto;
    border-color: #333 transparent transparent transparent; /* Points DOWN */
}

/* 6. Hover Trigger */
.like-link-wrapper:hover .who-likes-tooltip {
    visibility: visible;
    opacity: 1;
}

/* 7. List Styling inside Tooltip */
.who-likes-tooltip ul {
    list-style: none;
    margin: 5px 0 0 0;
    padding: 0;
    text-align: left;
}

.who-likes-tooltip li {
    font-size: 11px;
    border-top: 1px solid #555;
    padding: 2px 0;
	
}
/* END WHO LIKES THIS */

/* END Buttons */