                                 

@define bracketBorderColor: #121e31;
@define bracketFill: #112130c0;

.TournamentMenu
{
	width: 100%;
	height: 100%;
	flow-children: right;
	opacity: 1;

	transform: translatex( 0px );

	transition-property:  opacity, blur, transform;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.TournamentMenu--Hide
{
	opacity: 0;
	transform: translatex( 200px );

	transition-property:  opacity, blur, transform;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.TournamentMenu--FlowDown
{
    flow-children: down;
}

.PickemDiagram--Hide
{
	opacity: 0;
    blur: fastgaussian( 4, 4, 5 );
    
	transform: translateX( 200px );
	
	transition-property:  position, clip, opacity, blur, transform;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

                                                  
                                                  
                                                  

.lowerOpacity
{
    opacity: 0.5;
}

#background-color
{
    background-color: rgb(42, 59, 78);
    opacity: 0.8;
    width: 100%;
    height: 100%;
}

.pickem-playoff-text
{
                                   
                          
    width: 100%;
    height: 220px;
}

#pickem-playoff-description
{
    height: 250px;
    width: 600px;
    margin: 20px;
}

#trophy
{
    width: 900px;
    height: 200px;
                                 
    box-shadow: #0000006b 0px 0px 8px 0px;
}

#background-image
{
    width: 100%;
    height: 100%;
    opacity: 1;
    background-repeat: no-repeat;
}

#points-panel
{
    width: 1380px;
    horizontal-align: center;
}

#playoff-lock
{
    padding: 10px;
}

#locked-playoffs
{
    width: 800px;
}

#trophy-status
{
    width: 500px;
    height: 100%;
}

#right-side
{
    width: 260px;
    height: 200px;
}

#get-items-panel
{
    width: 400px;
    height: 100%;
}

#items-button
{
    margin-top: 28px;
}

#left
{
    padding: 15px;
}

#right
{
    padding: 15px;
}

#pickem-right-panel
{
    width: 1000px;
}

#icon-panel
{
    margin-top: 15px;
    margin-left: 15px;
    width: 53px;
    height: 200px;
    
}

#info-icon
{
    width: 30px;
    height: 30px;
    padding-right: 0px;
}

#info
{
    padding-right: 0px;
}

#champion-icon 
{
    height: 90px;
    width: 90px;
}
.timer-icon
{
    width: 40px;
    height: 40px;
    margin-left: 160px;
}
.icons
{
    height: 53px;
    width: 53px;
}
.icons__stickers
{
    height: 53px;
    width: 76px;
}

.icons--pickemDiagramOld
{
    height: 40px;
    width: 40px;
}

.icon-space
{
    height:15px;
}

.mainmenu-navbar-space
{
    height: 65px;
    width: 100%;
}

.trophy-bg
{
    width: 100%;
    height: 100%;
    background-color:black;
    opacity: .5;
    padding: 20px;
}

.green-background
{
    width: 100%;
    height: 100%;
    background-color:rgb(34, 94, 34);
    opacity: .5;
    padding: 20px;
}

.top-bottom-padding
{
    padding: 12px, 0px, 12px, 0px;
}

.top-bottom-padding__small
{
    padding: 5px, 0px, 5px, 0px;
}

.padding
{
    padding: 8px;
}

.padding--small
{
    padding: 5px;
}


.padding-left
{
    padding-left: 39px;
}

.padding-left-large
{
    padding-left: 53px;
}

.fontSize-ssm
{
    font-size: 14px;
}

.fontSize-sssm
{
    font-size: 13.5px;
}

.fit-children-width 
{
    width: fit-children;
}

.text-align-center
{
    text-align: center;
}

.points-text-box
{
    width: 350px;
    height: 20px;
    text-align: center;
    color: rgb(25, 49, 95);
}
                          
.pickem-diagram-container
{
    height: fill-parent-flow(1);
}

.pickem-diagram-container__width-xs
{
    width: fill-parent-flow(0.5);
}

.pickem-diagram-container__width-s
{
    width: fill-parent-flow(1);
}

.pickem-diagram-container__width-m
{
    width: fill-parent-flow(3);
}
.pickem-diagram-container__width-l
{
    width: fill-parent-flow(9);
}

.pickem-diagram-container__width-xl
{
    width: fill-parent-flow(16);
}

.pickem-diagram__pickem
{
    height: 600px;
}

.spacePickemDiagram
{
    height: 55px;
}

                                                      
                                                      
                                                      
.pickemTeamBox
{
    width: 270px;
    height: 55px;
    horizontal-align: right;
}

.pickemBoxStyle
{
    width: 290px;
}

.pickem-diagram
{
    margin-bottom: 10px;
    width: fit-children;
    height: 1000px;
    horizontal-align: center;
}

.pickem-diagram__points
{
    height: fit-children;
    margin-right: 50px;
    margin-left: 440px;
}

.team-box
{
    height: 45px;
    width: 240px;
    padding-left: 45px;
    background-color: bracketFill;
    border: 2px solid bracketBorderColor;
}

                   

.bracket
{
    width: 60px;
    border-color: bracketBorderColor;
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-right: 2px solid;
    vertical-align: center;

}

.bracket-1
{
    height: 81px;
}

.bracket-2
{
    height: 168px;
}

.bracket-3
{
    height: 324px;
}

.line
{
    width: 50px;
    border-top: 2px solid bracketBorderColor;
    vertical-align: center;
}


                                                      
                                                      
                                                      


.teamPickemBox
{
                                      
    background-color: #112130c0;
    border: 2px solid bracketBorderColor;
    width: fit-children;
    height: fit-children;
    flow-children: down;
    vertical-align: center;
}

.pickemIndividualTeam__TeamPickem
{
    width: 230px;
}

.matchPickIcon
{
    width: 50px;
    height: 45px;
    border: 2px solid bracketBorderColor;
    background-color: bracketFill;
    vertical-align: center;
}

.horizontalScroll
{
    overflow: scroll squish;
}
.disableText
{
    color: rgb(119, 119, 119);
}
.disableTeam
{
    wash-color: disabledColor;
    saturation: 0.8;
    opacity: .8;

}

.line--teamPickem
{
    width: 20px;
}

                 
.bracketSpace
{
    width: 20px;
    padding: 20px;
}

.bracket2--teamPickem
{
    height: 153px;
    width: 10px;
    margin: 0px;
}

.bracket3--teamPickem
{
    height: 304px;
    width: 10px;
    margin: 0px;
}

                                                    
                                                    
                                                    
#score
{
    font-size: 90px;
    color:rgba(255, 255, 255, 0.164);
}
.group-stage-box
{
    width: 150px;
    height: 150px;
    background-color: bracketFill;
    border: 2px solid #121e31;
    margin: 5px 20px 5px 20px;
}

.sticker
{
    width: 180px;
    height: 110px;
    horizontal-align: center;
    vertical-align: center;

}

.center-box
{
    width: 100%;
    border-top: 2px solid bracketBorderColor;
    border-bottom: 2px solid bracketBorderColor;
    height: 250px;
    margin-right: 80px;
    margin-left: 80px;
    padding: 10px;
}

.middle-box
{
    width: 50%;
    height: 100%;
    border-right: 2px solid rgb(54, 66, 88);

}
#JsPickEmPlayoffs, #JsPickEmGroup
{
    padding: 0px;
}

                                                    
                                                    
                                                    

.date-box
{
    width: 70px;
    height: 70px;
    horizontal-align: center;
    vertical-align: top;
    margin: 1px;
    background-color: rgb(56, 98, 146);
    opacity: 0.8;
}

.circle
{   
    height: 160px;
    width: 160px;
    border-radius: 50%;
    border: 2px solid rgb(23, 37, 63);
    background-color:rgba(85, 80, 100, 0.548);
    margin: 30px;
    margin-top: 10px;
    overflow: clip;
}

.circle Image
{   
    height: 180px;
    width: 180px;
    border: 0px;
    margin:0px;
    border-radius: 0%;
    transform: translate3d(-10px, -5px, 0px);
}

.stats-boxes
{
    horizontal-align: center;
    background-color: rgb(53, 53, 53);
    opacity: 0.6;
    margin: 1px;
    width: 180px;
    height: 30px;
}

.stats-boxes__smaller
{
    width: 100px;
}

.margin-s
{
    margin: 5px;
}

.stats-boxes__Wide
{
    height: 45px;
}

.fit-children
{
    width: 300px;
    height: fit-children;
}

.fit-children-heightandwidth
{
    width: fit-children;
    height: fit-children;
}

.content-fantasy-team
{
    width: fit-children;
    horizontal-align: center;
    vertical-align: top;
    flow-children: right;
    height:fit-children;
    margin-top: 30px;
}

.fantasy-team__stats-table
{
    height:fill-parent-flow(1);
}