* {margin:0; padding:0;}

@font-face {
    font-family: 'MuseoSans500Regular';
    src: url('/4orce/template/fonts/museo-sans-500.eot');
    src: url('/4orce/template/fonts/museo-sans-500.eot?#iefix') format('embedded-opentype'),
         url('/4orce/template/fonts/museo-sans-500.woff') format('woff'),
         url('/4orce/template/fonts/museo-sans-500.ttf') format('truetype'),
         url('/4orce/template/fonts/museo-sans-500.svg#MuseoSans500Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'BarlowCondensed';
    src: url('/4orce/template/fonts/BarlowCondensed-SemiBoldItalic.eot');
    src: url('/4orce/template/fonts/BarlowCondensed-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
         url('/4orce/template/fonts/BarlowCondensed-SemiBoldItalic.woff') format('woff'),
         url('/4orce/template/fonts/BarlowCondensed-SemiBoldItalic') format('truetype');
    font-weight: normal;
    font-style: normal;

}

:root {
  --sporty-blue: #42c6ff;
  --sporty-blue-hover: #06a9f1;  
  --sporty-red: #e30613;
  --sporty-red-hover: #b90510;  
  --sporty-dark-red: #610910;
  --sporty-dark-red-hover: #37080d;
}

.sporty-blue { color: var(--sporty-blue); }
.sporty-red { color: var(--sporty-red); }
.sporty-dark-red { color: var(--sporty-dark-red); }

.bg-sporty-blue { background-color: var(--sporty-blue); }
.bg-sporty-red { background-color: var(--sporty-red); }
.bg-sporty-dark-red { background-color: var(--sporty-dark-red); }

/* CUSTOM BUTTONS */
.btn-sporty-red {
    background-color: var(--sporty-red);
    border-color: var(--sporty-red);
    color: #fff;
}

.btn-sporty-red:hover,
.btn-sporty-red:focus {
    background-color: var(--sporty-red-hover);
    border-color: var(--sporty-red-hover);
    color: #fff;
}

.btn-sporty-dark-red {
    background-color: var(--sporty-dark-red);
    border-color: var(--sporty-dark-red);
    color: #fff;
}

.btn-sporty-dark-red:hover,
.btn-sporty-dark-red:focus {
    background-color: var(--sporty-dark-red-hover);
    border-color: var(--sporty-dark-red-hover);
    color: #fff;
}

.btn-sporty-blue {
    background-color: var(--sporty-blue);
    border-color: var(--sporty-blue);
    color: #fff;
}

.btn-sporty-blue:hover,
.btn-sporty-blue:focus {
    background-color: var(--sporty-blue-hover);
    border-color: var(--sporty-blue-hover);
    color: #fff;
}

.btn-outline-sporty-blue {
  color: var(--sporty-blue);
  border: 1px solid var(--sporty-blue);
  background-color: transparent;
  transition: all 0.15s ease-in-out;
}

.btn-outline-sporty-blue:hover,
.btn-outline-sporty-blue:focus {
  color: #fff;
  background-color: var(--sporty-blue-hover);
  border-color: var(--sporty-blue-hover);
}

.btn-outline-sporty-red {
  color: var(--sporty-red);
  border: 1px solid var(--sporty-red);
  background-color: transparent;
  transition: all 0.15s ease-in-out;
}

.btn-outline-sporty-red:hover,
.btn-outline-sporty-red:focus {
  color: #fff;
  background-color: var(--sporty-red-hover);
  border-color: var(--sporty-red-hover);
}

/* General sporty nav style */
.sporty-nav {
  font-family: 'BarlowCondensed';
  font-size: 20px;
  color: var(--sporty-blue);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
  transform-origin: center;  
}

/* Icon spacing */
.sporty-nav i {
  margin-right: 0.5rem;
  transition: transform 0.2s ease;  
}

/* Hover */
.sporty-nav:hover,
.sporty-nav:focus {
  color: var(--sporty-blue-hover);
  text-decoration: none;
  transform: scale(1.05); /* Slight zoom */
  text-shadow: 0 0 5px rgba(66, 198, 255, 0.3); /* Soft glow */  
}

/* Active (current page) */
.sporty-nav.active {
  font-weight: bold;
  border-bottom: 2px solid var(--sporty-blue);
  color: var(--sporty-blue-hover);
}

/* sidebar */
.sporty-sidebar .nav-link {
  color: var(--sporty-blue);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  font-weight: 500;
  border-radius: 999px; /* pill shape */
  transition: all 0.2s ease;
  margin-bottom: 0.5rem; /* space between pills */
}

.sporty-sidebar .nav-link:hover {
  background-color: var(--sporty-blue-hover);
  color: #fff;
}

.sporty-sidebar .nav-link.active {
  background-color: var(--sporty-blue);
  color: #fff !important;
}


.sporty-sidebar .nav-link {
  border-radius: 999px;
}


/* CUSTOM BUTTONS */
.btn-sporty-red {
    background-color: var(--sporty-red);
    border-color: var(--sporty-red);
    color: #fff;
}

.btn-sporty-red:hover,
.btn-sporty-red:focus {
    background-color: var(--sporty-red-hover);
    border-color: var(--sporty-red-hover);
    color: #fff;
}

.btn-sporty-dark-red {
    background-color: var(--sporty-dark-red);
    border-color: var(--sporty-dark-red);
    color: #fff;
}

.btn-sporty-dark-red:hover,
.btn-sporty-dark-red:focus {
    background-color: var(--sporty-dark-red-hover);
    border-color: var(--sporty-dark-red-hover);
    color: #fff;
}

.btn-sporty-blue {
    background-color: var(--sporty-blue);
    border-color: var(--sporty-blue);
    color: #fff;
}

.btn-sporty-blue:hover,
.btn-sporty-blue:focus {
    background-color: var(--sporty-blue-hover);
    border-color: var(--sporty-blue-hover);
    color: #fff;
}

.btn-outline-sporty-blue {
  color: var(--sporty-blue);
  border: 1px solid var(--sporty-blue);
  background-color: transparent;
  transition: all 0.15s ease-in-out;
}

.btn-outline-sporty-blue:hover,
.btn-outline-sporty-blue:focus {
  color: #fff;
  background-color: var(--sporty-blue-hover);
  border-color: var(--sporty-blue-hover);
}

.btn-outline-sporty-red {
  color: var(--sporty-red);
  border: 1px solid var(--sporty-red);
  background-color: transparent;
  transition: all 0.15s ease-in-out;
}

.btn-outline-sporty-red:hover,
.btn-outline-sporty-red:focus {
  color: #fff;
  background-color: var(--sporty-red-hover);
  border-color: var(--sporty-red-hover);
}

.btn-fixed { min-width:150px; margin: 8px; text-align:center; padding: 10px 0; }

/* TABS */
/* Inactive tab link */
.nav-tabs .nav-link {
  color: var(--sporty-blue);
  font-weight: normal;
}

/* Active tab link */
.nav-tabs .nav-link.active {
  font-weight: bold;
}


body	{font-family: 'MuseoSans500Regular' !important;}
.sportyFont {font-family: 'BarlowCondensed' !important; }

a.icon		{color: #337ab7; }

.spacer	{clear:both}
.error {  position: relative; color:red; font-weight: bold; font-size: 150%; text-align:center; background-color: #dbc5c5; border: 1px solid #ccc; border-radius: 10px; margin: 10px 0; padding: 15px; }
.error a	{color: #FF9C00}
.warning {  position: relative; color:#f08400; font-weight: bold; text-align:center; background-color: #ffeeba; border: 1px solid #ccc; border-radius: 10px; margin: 10px 0; padding: 15px; }

.message {
	color: #FFFFFF;
	background-color: #0198ff;
	border-radius: 6px;
	padding: 10px 16px;
	margin-bottom: 10px;
	font-size: 18px;
	line-height: 1.3333333;
}

.rightAlign {width: 100%; text-align: right;}
.icon {vertical-align: middle; margin-left: 2px; margin-right: 5px;}
.icon-disabled {vertical-align: middle; margin-left: 2px; margin-right: 5px; color:#CCC;}
.adminTitle {display: block; float: left; width: 22px;}
.floatleft {float: left}
.floatright {float: right}

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

/* HEADER */
#header	{

	}

.left-column {
	border-right: 2px solid #d5d6d8;
	padding-left: 0 !important;
}

.no-gutters {
  padding-right:0 !important;
  padding-left:0 !important;
  margin-right:0 !important;
  margin-left:0 !important;
}

/* LOGIN SCREEN */
#login-container {
	width: 100%;
	min-height: 100%;
	background: url('/images/background.png') top center no-repeat;
	position: relative;
	color: #FFF;
}

#login-overlay {
    background-color: rgba(0, 0, 0, 0.32);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

a.white, a.white:visited, a.white:active, a.white:hover { 
	color:#FFF;
}

.height-100-percent {
	height: 100%;
}

/* LEFT MENU */
.left-menu-item {
	margin-bottom: 15px;
	font-weight: bold;
}

.left-menu-item a, .left-menu-item a:visited {
	color: #6c6c6e;
	text-decoration: none;
}

.left-menu-active a, .left-menu-item a:hover, .left-menu-item a:active, .left-menu-item a:focus {
	color: #42C6FF !important;
	text-decoration: none !important;
}

.left-menu-icon {
	display: inline-block;
	width: 40px;
}

#popup-content-wrapper {width: 100%;}
#popup-header-wrapper	{width:100%; background: url('/images/template/popupheader.gif') #7DA6DA;}

.padder	{padding:10px;}
.pad	{padding:15px 8px;}
.nopadder	{padding: 0px;}

#main-content { 
	min-height: 85%;
	background-color: #edeef0;
	}

#home-content { 
	min-height: 85%;
	background-color: #FFF;
	}

#home-content-header {
	height: 500px;
	background: url('/images/background.png') center -400px no-repeat;
	text-align:center;
	padding-top: 150px;
	border-radius: 1rem;
}

#home-content-header h1 {
	font-size: 70px;
	font-weight: bold;
}

.hover-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.15);
    background-color: var(--sporty-blue-hover); !important; /* darker sporty blue */
    cursor: pointer;
}


/* LOGIN SCREEN */
.login-wrapper {
    background: url('/images/background.png') center center / cover no-repeat;
    position: relative;
}


#formatList dd.dataSml {float: left; width: 50px; text-align:right; margin-right: 20px;}

.modal-title { font-weight: bold;}
.modal-xl { width: 1150px !important;}

.form-group { min-height: 35px; }

.sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
.sortable li { margin: 5px; padding: 3px; border: 1px solid grey; cursor: pointer;}
.sortable li i {padding-left: 5px; padding-right: 10px;}
.sortable li.active { background-color: #ccedd6;}
.sortable li.inactive { background-color: #edcccc;}

.tabList { float:left; width: 47%; border: 1px solid grey; border-radius: 7px; margin-right: 20px; margin-bottom: 20px; padding:10px;}

.sortableTabs { list-style-type: none; margin: 0; padding: 0; width: 100%; min-height: 20px;}
.sortableTabs li { margin: 5px; padding: 3px; border: 1px solid grey; cursor: pointer;}
.sortableTabs li i {padding-left: 5px; padding-right: 10px;}


/* Full-screen overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
	text-align: center;
    z-index: 1050;
}

/* Centered loading box */
.loading-box {
    width: 200px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Add spacing for the spinner */
.loading-box i {
    font-size: 2rem;
    margin-bottom: 10px;
}

/* Bootstrap Select searchable styling */
.bootstrap-select .dropdown-toggle {
    border: 1px solid #ced4da;          /* default Bootstrap border color */
    border-radius: 0.375rem;            /* default BS5 radius; adjust to 0.25rem for BS4 */
    background-color: #fff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075); /* optional: subtle inset shadow like form fields */
}

.bootstrap-select .dropdown-toggle:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

/* trophy mode columns */

    #list-data td.comp-col,
    #list-data th.comp-col {
        width: 500px;       /* Adjust to taste */
        max-width: 500px;
        white-space: nowrap;
    }

    #list-data td.action-col,
    #list-data th.action-col {
        width: 90px;
        text-align: center;
    }

    #list-data td.week-col,
    #list-data th.week-col {
        width: 350px;       /* your shorter date fits nicely here */
        white-space: nowrap;
    }

    /* Make the select behave nicely inside the cell */
    .comp-select {
        width: 100%;
        box-sizing: border-box;
    }