@charset "UTF-8";

/*
-----------------------------------------
GLOBAL STYLES START----------------------
-----------------------------------------
*/

/*Fonts*/
h1,h2,h3,h4,h5{
	font-weight: 700!important;
}


/*header styles*/
.navbar{
	
	background-color: #59328a!important;
}

@media (min-width: 768px){
	
	.navbar{
		height: 100px;
	}
	
	.navbar .navbar-brand{

		top: 2.5em;
	}
	
}

.navbar-nav .nav-link.active{
	font-weight: bold!important;
}

.navbar-nav .nav-item .nav-link{
		padding: 15px!important;
	}

.navbar .navbar-brand{
position: relative;

}

.navbar .navbar-brand img{
height: 175px;
}

@media (max-width: 767px){
	.navbar-nav .nav-item .nav-link{
		text-align: center;
		border-bottom: 1px solid #fff;
	}
	
	.navbar-nav .nav-item:last-child .nav-link{
		
		border-bottom: 0;
	}
	
	.navbar .navbar-brand img{
		height: 125px;
	}
}

.navbar .navbar-toggler:focus,
.navbar.navbar-toggler:hover {
    background-color: transparent;
}

.navbar .navbar-toggler {
    border: none;
}

.navbar-toggler .icon-bar{
	display: block;
  background-color: #fff;
  height: 3px;
  width: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  left: 0;
  opacity: 1;
  transition: all 0.35s ease-out;
  transform-origin: center left;
}

.navbar-toggler span:nth-child(1) {
	transform: translate(0%, 0%) rotate(0deg);
  }
  
  .navbar-toggler span:nth-child(2) {
	opacity: 1;
  }
  
  .navbar-toggler span:nth-child(3) {
	transform: translate(0%, 0%) rotate(0deg);
  }
  
  .navbar-toggler span:nth-child(1) {
	margin-top: 0.3em;
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(1) {
	transform: translate(15%, -33%) rotate(45deg);
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(2) {
	opacity: 0;
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(3) {
	transform: translate(15%, 33%) rotate(-45deg);
  }


/*scroll to top button styles*/
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 65px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #59328a; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 50%; /* Rounded corners */
  font-size: 0; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

#myBtn .material-symbols-outlined{
	font-size: 30px;
}


/*footer styles*/
.footer{
	background-color: #59328a;
	color: #fff;
}

.footer p{
	margin: 0;
}


/*
-----------------------------------------
GLOBAL STYLES END----------------------
-----------------------------------------
*/




/*
-----------------------------------------
HOME PAGE STYLES START----------------------
-----------------------------------------
*/

/*home-banner styles*/
.home-banner{
	width: 100%;
	background-color: rgba(255,255,255,.8);
	height: auto;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-blend-mode: overlay;
}

@media (max-width: 767px){
.home-banner{
	height: auto;
}
}


/*latest-results styles*/
.latest-results .score-results{
	display: flex;
	justify-content: space-between;
}

@media (max-width: 767px){
	
	.latest-results .score-results{
		padding: 30px;
	}
	
	.score-results .final-score{
		display: none!important;
	}
	
	.score-results-mobile .final-score-mobile{
	display: flex;
	width: 250px;
	margin: auto;
	justify-content: center;
	align-items: center;
	}
	
	.final-score-mobile .whiskeyjack-final-score-mobile{
	width: 75px;
	height: 75px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #59328a;
	color: white;
	}
	
	.final-score-mobile .whiskeyjack-final-score-mobile h3{
	margin: 0;
}

.final-score-mobile .visitor-final-score-mobile{
	width: 75px;
	height: 75px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: grey;
	color: white;
}

.final-score-mobile .visitor-final-score-mobile h3{
	margin: 0;
}
	
}

@media (max-width: 450px){
	.latest-results .score-results{
		padding: 15px;
	}

	.final-score-mobile .whiskeyjack-final-score-mobile{
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #59328a;
	color: white;
	}

	.final-score-mobile .visitor-final-score-mobile{
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: grey;
	color: white;
}
}

@media (min-width: 768px){
	
.final-score-mobile{
	display: none!important;
}
	
}

@media (max-width: 450px){
	.score-results h4{
		font-size: 16px;
	}
}

.latest-results .score-results .whiskeyjack-side{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.latest-results .score-results .visitor-side{
	display: flex;
	flex-direction: column;
	align-items: center;
}


.score-results .final-score{
	display: flex;
	width: 250px;
	margin: auto;
	justify-content: space-between;
	align-items: center;
}

.final-score .whiskeyjack-final-score{
	width: 75px;
	height: 75px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #59328a;
	color: white;
}

.final-score .whiskeyjack-final-score h3{
	margin: 0;
}

.final-score .visitor-final-score{
	width: 75px;
	height: 75px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: grey;
	color: white;
}

.final-score .visitor-final-score h3{
	margin: 0;
}

.latest-results .score-results img{
	width: 150px;
}

@media (max-width: 450px){
	.latest-results .score-results img{
	width: 100px;
}
}

.game-goals{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.game-goals .first-period{
	text-align: center;
}

.game-goals .first-period ul{
	list-style: none;
	padding-left: 0;
}

.game-goals .second-period{
	text-align: center;
}

.game-goals .second-period ul{
	list-style: none;
	padding-left: 0;
}

.game-goals .third-period{
	text-align: center;
}

.game-goals .third-period ul{
	list-style: none;
	padding-left: 0;
}



/*upcoming-games styles*/
.upcoming-games{
	background-color: #59328a;
}

.upcoming-games h2{
	color: #fff;
}

.upcoming-games .card-body .team-logos{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.upcoming-games .card-body .whiskeyjacks-logo{
	display: flex;
	justify-content: center;
}

.upcoming-games .card-body .visitor-logo{
	display: flex;
	justify-content: center;
}

.upcoming-games .card-body .whiskeyjacks-logo img{
	width: 150px;
	padding-right: 15px;
}

.upcoming-games .card-body .visitor-logo img{
	width: 150px;
	padding-left: 15px;
}

@media (max-width: 1199px){
	.upcoming-games .card-body .whiskeyjacks-logo img{
	width: 125px;
}

.upcoming-games .card-body .visitor-logo img{
	width: 125px;
}
}

@media (max-width: 991px){
	.upcoming-games .card-body .whiskeyjacks-logo img{
	width: 75px;
}

.upcoming-games .card-body .visitor-logo img{
	width: 75px;
}
}

@media (max-width: 767px){
	.upcoming-games .card-body .whiskeyjacks-logo img{
	width: 175px;
}

.upcoming-games .card-body .visitor-logo img{
	width: 175px;
}
}

@media (max-width: 450px){
	.upcoming-games .card-body .whiskeyjacks-logo img{
	width: 125px;
}

.upcoming-games .card-body .visitor-logo img{
	width: 125px;
}
}



/*leaderboards styles*/
.leaderboards .top-five{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.top-five .top-five-players{
	display: flex;
	flex-direction: column;
	flex: auto;
	
}

.top-five .top-five-teams{
	display: flex;
	flex: auto;
	
}

.top-five-teams .table thead{
	height: auto;
	background-color: #59328a;
	color: #fff;
	vertical-align: middle;
	
}

.top-five-teams .table thead th{
	text-align: center;
	
}

.top-five-teams .table th{
	padding: 15px;
	vertical-align: middle;
	
	
}

.top-five-teams .table td{
	text-align: center;
	vertical-align: middle;
	
}


.top-five-teams .table tbody .wj-wrapper{
	background-color: #59328a;
}

.top-five-teams .table tbody .wj-wrapper th{
	color: #ffffff;
	
}

.top-five-teams .table tbody .wj-wrapper td{
	color: #ffffff;
	font-weight: bolder;
	
}

@media (max-width: 767px){
	
	.top-five{
		flex-direction: column!important;
	}
	
	.top-five .top-five-teams{
		margin-left: 0!important;
		margin-top: 3rem!important;
	}
	
	.top-five .top-five-players{
		margin-right: 0!important;
		
	}
	
}

.leaderboards .material-symbols-outlined{
	vertical-align: middle;
	background-color: #59328a;
	color: #fff;
	border-radius: 50%;
}

.leaderboards .progress .progress-bar{
	background-color: #148498;
}

/*
-----------------------------------------
HOME PAGE STYLES END----------------------
-----------------------------------------
*/





/*
-----------------------------------------
SCHEDULE PAGE STYLES START----------------------
-----------------------------------------
*/

.schedule-banner{
	width: 100%;
	background-color: #eee;
	height: 350px;
	display: flex;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgba(89,50,138,.9);
	background-blend-mode: multiply;
	flex-direction: column;
}

.schedule-banner h1{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
}

.schedule-banner p{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
}

@media (max-width: 767px){
	
	.schedule-banner{
		height: 200px;
	}
	
	.schedule-banner h1{
	
	margin: 0;
	}

	.schedule-banner p{
		margin: 0;
	}
	
}


.schedule-table{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}


.schedule-table .table thead{
	height: 100px;
	background-color: #59328a;
	color: #fff;
	vertical-align: middle;
	
}

.schedule-table .table thead th{
	text-align: center;
	
}

.schedule-table .table th{
	padding: 15px;
	vertical-align: middle;
	text-align: center;
	
	
}

.schedule-table .table td{
	text-align: center;
	vertical-align: middle;
	
}


.schedule-table .table .team-logo img{
	width: 150px;
	
}

#schedule tbody tr .child .dtr-details{
	text-align: left;
}


/*
-----------------------------------------
SCHEDULE PAGE STYLES END----------------------
-----------------------------------------
*/



/*
-----------------------------------------
STANDINGS PAGE STYLES START----------------------
-----------------------------------------
*/

.standings-banner{
	width: 100%;
	background-color: #eee;
	height: 350px;
	display: flex;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgba(89,50,138,.9);
	background-blend-mode: multiply;
	flex-direction: column;
}

.standings-banner h1{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
}

.standings-banner p{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
}

#standings tr th{
	text-align: center;
}

#standings tbody tr .d-flex{
	justify-content: flex-start;
}

#standings tbody tr td{
	text-align: center;
}

@media (max-width: 767px){
	
	.standings-banner{
		height: 200px;
	}
	
	.standings-banner h1{
	
	margin: 0;
	}

	.standings-banner p{
		margin: 0;
	}
	
}

#seasonSelect {
	max-width: 150px;
	margin: 0 auto;
	padding: 10px;
	font-size: 1.1rem;
	border-radius: 6px;
	border: 1px solid #ced4da;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	background-color: #fff;
  }

  .select-label {
	font-size: 1.25rem;
	font-weight: 500;
	margin-bottom: 10px;
	display: block;
  }

  #seasonSelect option{
	text-align: center;
  }

/*
-----------------------------------------
STANDINGS PAGE STYLES END----------------------
-----------------------------------------
*/


/*
-----------------------------------------
STATS PAGE STYLES START----------------------
-----------------------------------------
*/

.stats-banner{
	width: 100%;
	background-color: #eee;
	height: 350px;
	display: flex;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgba(89,50,138,.9);
	background-blend-mode: multiply;
	flex-direction: column;
}

.stats-banner h1{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
}

.stats-banner p{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
}

@media (max-width: 767px){
	
	.stats-banner{
		height: 200px;
	}
	
	.stats-banner h1{
	
	margin: 0;
	}

	.stats-banner p{
		margin: 0;
	}
	
}

#stats tr th{
	text-align: center;
}

#stats tbody tr .d-flex{
	justify-content: flex-start;
}

#stats tbody tr td{
	text-align: center;
}

#stats-goalie tr th{
	text-align: center;
}

#stats-goalie tbody tr .d-flex{
	justify-content: flex-start;
}

#stats-goalie tbody tr td{
	text-align: center;
}

/*
-----------------------------------------
STATS PAGE STYLES END----------------------
-----------------------------------------
*/




/*
-----------------------------------------
PLAYERS PAGE STYLES START----------------------
-----------------------------------------
*/

.players-banner{
	width: 100%;
	background-color: #eee;
	height: 350px;
	display: flex;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgba(89,50,138,.9);
	background-blend-mode: multiply;
	flex-direction: column;
}

.players-banner h1{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
}

.players-banner p{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
}

@media (max-width: 767px){
	
	.players-banner{
		height: 200px;
	}
	
	.players-banner h1{
	
	margin: 0;
	}

	.players-banner p{
		margin: 0;
	}
	
}

.forwards .lineups .first-line{
	display: flex;
	
	@media (max-width: 767px){
		flex-direction: column;
	}
}

.forwards .lineups .first-line img{
	width: 33.3%;
	margin: auto;
	display: block;
}

.forwards .lineups .first-line .player-name{
	text-align: center;
}

.forwards .lineups .first-line .player-position{
	text-align: center;
}

.forwards .lineups .second-line{
	display: flex;
	
	@media (max-width: 767px){
		flex-direction: column;
	}
}

.forwards .lineups .second-line img{
	width: 33.3%;
	margin: auto;
	display: block;
}

.forwards .lineups .second-line .player-name{
	text-align: center;
}

.forwards .lineups .second-line .player-position{
	text-align: center;
}

.forwards .lineups .third-line{
	display: flex;
	
	@media (max-width: 767px){
		flex-direction: column;
	}
}

.forwards .lineups .third-line img{
	width: 33.3%;
	margin: auto;
	display: block;
}

.forwards .lineups .third-line .player-name{
	text-align: center;
}

.forwards .lineups .third-line .player-position{
	text-align: center;
}

.forwards .lineups .player-name a{
	color: #59328a;
}

.defense .lineups .player-name a{
	color: #59328a;
}

.defense .lineups .first-line{
	display: flex;
	
	@media (max-width: 767px){
		flex-direction: column;
	}
}

.defense .lineups .first-line img{
	width: 33.3%;
	margin: auto;
	display: block;
}

.defense .lineups .first-line .player-name{
	text-align: center;
}

.defense .lineups .first-line .player-position{
	text-align: center;
}

.defense .lineups .second-line{
	display: flex;
	
	@media (max-width: 767px){
		flex-direction: column;
	}
}

.defense .lineups .second-line img{
	width: 33.3%;
	margin: auto;
	display: block;
}

.defense .lineups .second-line .player-name{
	text-align: center;
}

.defense .lineups .second-line .player-position{
	text-align: center;
}

.goalies .lineups .player-name a{
	color: #59328a;
}

.goalies .lineups .first-line{
	display: flex;
	justify-content: center;
	
	@media (max-width: 767px){
		flex-direction: column;
	}
}

.goalies .lineups .first-line img{
	width: 33.3%;
	margin: auto;
	display: block;
}

.goalies .lineups .first-line .player-name{
	text-align: center;
}

.goalies .lineups .first-line .player-position{
	text-align: center;
}



/*
-----------------------------------------
PLAYERS PAGE STYLES END----------------------
-----------------------------------------
*/


/*
-----------------------------------------
PLAYERS PROFILES STYLES START----------------------
-----------------------------------------
*/

.player-profile-info .container{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: -8em;
}

.player-profile-info .profile-photo{
	width: 200px;
	height: 200px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: auto;
	background-color: #eee;
	border-radius: 50%;
	border: 10px solid #148498;
}

.player-profile-info .player-position{
	color: #59328a;
}


#seasonTypeSelect {
	max-width: 200px;
	margin: 0 auto;
	padding: 10px;
	font-size: 1.1rem;
	border-radius: 6px;
	border: 1px solid #ced4da;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	background-color: #fff;
  }

  .select-label {
	font-size: 1.25rem;
	font-weight: 500;
	margin-bottom: 10px;
	display: block;
  }

  #seasonTypeSelect option{
	text-align: center;
  }


/*
-----------------------------------------
PLAYERS PROFILES STYLES END----------------------
-----------------------------------------
*/