@charset "utf-8";

.stickyBtn{
	background-color: white;
	position: fixed;
	left: 0%;
	top: 35%;
	color: black;
	writing-mode: vertical-rl;
	text-orientation: upright;
	width: 24px;
	padding-right: 2px;
	padding-left: 2px;
	padding-top: 10px;
	padding-bottom: 10px;
	z-index: 2;
}

.stickyBtn:hover{
	background-color:black ;
	color:white;
}

.stickyBtn a{
	color: black;
	text-decoration: none;
}

.stickyBtn a:hover{
	color: white;
	text-decoration: none;
}

.headerscores{
	display: display: block;;
  	/*flex-direction: row;*/
  	z-index: 5;
	overflow: scroll;
	height: 110px;
}

.scorecarousel{
	position: relative;
  	width: fit-content;
  margin: auto;
  direction: ltr;
  box-sizing: border-box;
  border-collapse: collapse;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100px;
  /*background-color: yellow;*/
  z-index: 1;
	overflow-x: scroll;
  	overflow-y: hidden;
}

.scorecarousel .carouselitem{
	display: flex;
  	position: relative;
  	padding: 0;
  	margin: 0;
  	vertical-align: top;
  	white-space: normal;
  	line-height: 10px;
	font-size: .8em;
	background-image: radial-gradient(circle at 30% 107%, #e0fbfc 0%, #c2dfe3 5%, #9db4c0 45%,#5c6b73 60%,#253237 90%);
	min-width: 250px;
	max-height: 100px;
	flex-direction: column;
}

.carouselitem .Completed{
	background-color: lightgray;
	border: 2px;
	border-style: groove;	
	font-size:.8em;
	border-radius: 5px;
}

.carouselitem .Upcoming{
	background-color: lightblue;
	border: 2px;
	font-size:.8em;
	border-radius: 5px;
  	border-style: groove;
}

.carouselitem .Progress{
	background-color: lightgreen;
	border: 2px;
	font-size:.8em;
	border-radius: 5px;
  	border-style: groove;
}

.carouselitem .scores{
	display: flex;
}
	
.carouselitem .goals{
	font-size:.95em;
	font-weight: bold;
}

.carouselitem .shots{
	font-size:.75em;
}

.carouselitem:hover{
	background-color:black;
	color:white;
	background-image:black;
	border-color: white;
	border: 5px;
	border-style: doubled;
}

.carouselitem:active{
	background-color:black;
	color:white;
	background-image:black;
	border-color: white;
	border: 5px;
	border-style: doubled;
}

.carouselitem:focus{
	background-color:black;
	color:white;
	background-image:black;
	border-color: white;
	border: 5px;
	border-style: doubled;
}

.clickzone2-nobutton{
  	cursor: url("/images/click.png") 15 15, move;	
}

.bodywrapper{
	/*display: flex;
  	flex-direction: row;*/
}

.teamssection{
	width: 100%;
}

.fantasysection{
	/*width: 35%;*/
	width: 100%;
}

.fantasysection .title{
	background-color: yellow;
  	position: fixed;
  	right: 0%;
  	top: 26%;
  	color: black;
  	writing-mode: vertical-rl;
  	text-orientation: upright;
  	width: 24px;
  	padding-right: 2px;
  	padding-left: 2px;
  	padding-top: 10px;
  	padding-bottom: 10px;
  	z-index: 2;
}

.teamscontent{
	text-align: center;
}

.teamsbreakdown{
	display: flex;
  	flex-direction: row;
  	text-align: center;
	border-top-left-radius: 5px;
  	border-top-right-radius: 5px;
	border: 2px solid;
}

.teamsbreakdown .teamlogo{
	padding-left: 15px;
  	padding-right: 15px;
	width: 20%;
}

.teamsbreakdown .teamlogo img{ 
	max-height: 70px;
  	padding-top: 10px;
  	padding-bottom: 10px;
}

.teamsbreakdown .teamname{
	padding-left: 15px;
  	padding-top: 35px;
  	padding-bottom: 15px;
  	padding-right: 15px;
	width: 20%;
}

.teamsbreakdown .teamrecod{
	padding-left: 15px;
  	padding-top: 35px;
  	padding-bottom: 15px;
  	padding-right: 15px;
	width: 20%;
}

.teamsbreakdown .teammore{
	padding-left: 15px;
  	padding-top: 35px;
  	padding-bottom: 15px;
  	padding-right: 15px;
	width: 20%;
}

.arrow-up-left {
  border-bottom: 15px solid transparent;
  border-left: 15px solid;
  border-top: 0 solid transparent;
}

.arrow-down-right {
  border-bottom: 0 solid transparent;
  border-right: 15px solid black;
  border-top: 15px solid transparent;
}

.tournament-list{
	border: 2px solid ;
  	border-bottom-left-radius: 5px;
  	border-bottom-right-radius: 5px;
	display: flex;
  	flex-direction: column;
  	text-align: center;
}

.tournament{
	display: flex;
  	flex-direction: row;
	padding-top: 15px;
  	padding-bottom: 15px;
}

.tournament div{
	width:25%
}

.tournament .clickzone{
	max-height: 20px;
}

/*SECTION DEDICATED TO THE TENANT COLOR DEFINITION*/
/*
.team1{
	background-color: white;
  	color: rgb(41, 40, 55);
  	border: 2px solid rgb(41, 40, 55);
}

.tournament-list-team1{
	border-color: rgb(41, 40, 55);
  	background-color: rgb(117, 174, 215);
  	color: rgb(41, 40, 55);	
}

.team17{
	background-color: purple;
  	color: yellow;
  	border: 2px solid aqua;
}

.tournament-list-team17{
	border-color: purple;
  	background-color: aqua;
  	color: purple;	
}

.team31{
	background-color: white;
  	color: rgb(28, 42, 87);
  	border: 2px solid rgb(166, 28, 54);
}

.tournament-list-team31{
	border-color: rgb(166, 28, 54);
  	background-color: white;
  	color: rgb(28, 42, 87);	
}

*/
/*END OF THE SECTION DEDICATED TO THE TENANT COLOR DEFINITION*/

.detailstournament{
	max-height: 340px;
  	overflow-y: scroll;
  	background-color: white;
  	color: black;
}

.notvisible{
	display:none;
}

.visibleflex{
	display:flex;
}

.OverallSeasonNumbers {
	flex-direction: row;
  	align-items: center;
  	text-align: center;
}

.OverallSeasonNumbers .stats{
	padding-left: 15px;
  	padding-right: 10px;
}

.OverallSeasonNumbers .stats table{
	border: 1px ridge black;
	font-size: .8em;
}

.OverallSeasonNumbers .image{
	padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  padding-bottom: 5px;
}

.OverallSeasonNumbers .image img{
	max-width: 400px;
}

.ShotsbyIceRinkRegion {
	text-align: center;
  	display: block;
	max-height: 360px;
}

.PenaltiesImage .image img{
	text-align: center;
  	display: block;
	max-height: 360px;
}

.ShotsbyIceRinkRegion .image img{
	max-width: 450px;
}

.ShotsbyNetRegion{
	text-align: center;
}

.ShotsbyNetRegion .image img{
	max-width: 450px;
}

.ShotsbyNetRegion .image2 img{
	max-width: 450px;
}

.ScoreList{
	overflow-x: scroll;
	background-image: radial-gradient(circle at 30% 107%, #e0fbfc 0%, #c2dfe3 5%, #9db4c0 45%,#5c6b73 60%,#253237 90%);
	width: fit-content;
}

.ScoreList .scoreitem{
	display: contents;
	width: fit-content;
}

.contactus{
	text-align: center;
	width: 95%;
  	margin-left: 10px;
}

.contactus form{
	/*background: white;*/
  	padding: 3em;
  	/*height: 320px;*/
  	border-radius: 20px;
  	border-left: 1px solid white;
  	border-top: 1px solid white;
  	backdrop-filter: blur(10px);
  	box-shadow: 20px 20px 40px -6px rgba(0,0,0,0.2);
  	text-align: center;
  	position: relative;
  	transition: all 0.2s ease-in-out;
}

.contactus label{
	color:black;
	font-weight: bold;
}

#labelcomment{
	display: block;
}
	
.contactus input{
	background: transparent;
    max-width: 200px;
	width: 85%
    padding: 1em;
    margin-bottom: 2em;
    border: none;
    border-left: 1px solid white;
    border-top: 1px solid white;
    border-radius: 5000px;
    backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgba(0,0,0,0.2);
    color: #fff;
    /*font-family: Montserrat, sans-serif;*/
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.contactus textarea{
	background: transparent;
    max-width: 260px;
	width: 85%
    padding: 1em;
    margin-bottom: 2em;
    border: none;
    border-left: 1px solid white;
    border-top: 1px solid white;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgba(0,0,0,0.2);
    color: #fff;
    /*font-family: Montserrat, sans-serif;*/
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.contactus input:focus{
	background: -webkit-linear-gradient(right, #000000, #0c1821, #1b2a41, #324a5f);
}
.contactus textarea:focus{
	background: -webkit-linear-gradient(right, #000000, #0c1821, #1b2a41, #324a5f);
}

.contactus button{
	background: transparent;
    padding: 1em;
    margin-bottom: 2em;
    border: none;
    border-left: 1px solid white;
    border-top: 1px solid white;
    border-radius: 5000px;
    backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgba(0,0,0,0.2);
    color: #fff;
    /*font-family: Montserrat, sans-serif;*/
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	margin-top: 10px;
    width: 150px;
    font-size: 1rem;
	cursor: url("/images/click.png") 15 15, move;
}

.contactus button:focus, .contactus button:hover, .contactus button:active{
	background: -webkit-linear-gradient(right, #000000, #0c1821, #1b2a41, #324a5f);
}

@media screen and (max-width: 600px) {
	/* THIS IS THE DEFINITION FOR MOBILE DEVICES */
	.bodywrapper{
		display: inline;
	}
	
	.teamssection{
		width:100%;
	}
	
	.fantasysection {
  		width: 100%;
	}
	
	.contactus{
		display:block;
	}
	
	.teamsbreakdown .teamname {	
		padding-top: 15px;
	}
	
	.detailstournament{
		overflow-x: clip;
	}
	
	.OverallSeasonNumbers {
		flex-direction: column;
	}
	
	.ShotsbyNetRegion{
		flex-direction: column;
	}
	
	.ScoreList{
		display: flex;
    	flex-direction: row;
		width: auto;
	}
	.ScoreList .scoreitem{
		display: unset;
	}
}