html {
    scroll-behavior: smooth;
}

body { padding:0px; margin:0px; }

.logo { display:flex; }

.logo-text-box { display: flex;
    flex-direction: column;
    justify-content: center;
font-family:Montserrat;font-size:16px;
	}

.logo-text {  padding-top:2px;  line-height: 0.9;
font-family:Montserrat;font-size:30px;display:flex;align-items: center;justify-content: center; }

.logo-text-manager { font-weight:700;padding-left:0px;letter-spacing: 3px;font-size:20px; }

.soccer-field { 

    transform: scale(0.6);

position:relative;width:100px;height:100px;border-radius:18px;
background: linear-gradient(0deg, #5de374 0%, #00c085 100%);
display:flex;align-items: center;justify-content: center;

 }
 
.soccer-field-before {

position:relative;
width:75px;
height:50px;
box-sizing: border-box;
border:4px solid white;
display:flex;align-items: center;
} 

.soccer-field-center {
position:absolute;
width:4px;
height:50px;
background-color:white;
display:flex;align-items: center;justify-content: center;
} 

.soccer-field-center::before {
position:absolute;
content:'';
display:block;
width:20px;
height:20px;
box-sizing: border-box;
border:4px solid white;
border-radius:50%;

}

.penalty-area-left {
position:absolute;
width:16px;
height:25px;
box-sizing: border-box;
border:4px solid white;
left:-4px;
} 
.penalty-area-right {
position:absolute;
width:16px;
height:25px;
box-sizing: border-box;
border:4px solid white;
right:-4px;
}

.tooltip { cursor:hand;cursor:pointer; }

  .tooltip-window { width:max-content;
  z-index:100;position:absolute;background-color:rgba(57,72,105,0.6);text-align:center;font-family: Barlow Condensed;
  font-size:20px;color:white;top:85px;display:none;padding:10px;text-shadow: 1px 1px 2px black;border-radius:5px; }
.twt { top:35px; }
.tooltip:hover .tooltip-window { display:block; }
.tooltip:hover img { -webkit-filter: drop-shadow(0px 0px 20px rgba(255,255,255,0.8));
  filter: drop-shadow(0px 0px 20px  rgba(255,255,255,0.8)); }


.game-menu { 
	height:100px;
	display:flex;
	justify-content: space-between; 
	background: linear-gradient(0deg, #3f4350 0%, #212531 100%);
	color:white;
}

.game-menu-box {
	text-transform: uppercase;line-height: 1.6;float:right;height:100%;display:flex;align-items:center;font-family:Barlow Condensed;box-sizing: border-box;
}

.game-menu-line {
	height:100px;width:1px;background-color:#212531;	
}

.game-menu-button {	
	height:100px;width:60px;border-left:1px solid #5e616b;display:flex;align-items:center;justify-content: center;flex-direction: column;
}

.game-menu-icon {
	height:35px;filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
}
.game-logout {
	height:100px;width:60px;border-left:1px solid #5e616b;display:flex;align-items:center;justify-content: center;	
}
.game-button-text {
	text-shadow: 1px 1px black;font-weight:600;	
}
.game-logout-menu {
	color:white;font-size:22px;font-weight:600;letter-spacing: 1px;text-decoration:none;		
}
.game-menu-a {
	margin-right:30px;color:white;font-size:18px;font-weight:600;letter-spacing: 1px;text-decoration:none;	
}

.game-menu-active { color:#5de374 !important; }

.previous-match-cnt { position:relative;display:none;z-index:100; }
.p-cnt { position:relative;display:none;z-index:100; }
.p-cnt-block { display:block; }
.p-bg { 
justify-content: center;
    align-items: center;
display:flex;top:0px;left:0px;position:fixed;width:100vw;height:100vh;background-color:rgba(255,255,255,0.6);z-index:100; }
.p-box { padding:40px;box-sizing: border-box;display:flex;justify-content: center;
    align-items: center;position:relative;width:100%;max-width:800px;background-color:white;filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5)); }
.p-x { transition: all 0.5s; position:absolute;right:10px;top:10px;cursor:hand;cursor:pointer;font-family: Montserrat;font-size: 25px;
    font-weight: 600;color:rgba(0,0,0,0.5); }
	
.p-x:hover { color:rgba(0,0,0,1); }	
	
.p-title { font-family: Barlow Condensed;font-size: 30px;
    font-weight: 600;
    letter-spacing: 1px;text-transform: uppercase;margin-bottom:20px; }	

button img { margin-right:5px; }
	
	input[type=submit],input[type=button],button {

width:100%;
border:none;
border-radius:0px;
background: linear-gradient(0deg, #5de374 0%, #00c085 100%);
line-height: 1;
    font-family: Barlow Condensed;
    letter-spacing: 1px;
font-size: 30px;
    color: white;
    font-weight: 600;
text-transform: uppercase;	
margin-bottom:10px;
height:40px;
cursor:hand;cursor:pointer;display: flex;
    justify-content: center;
    align-items: center;text-shadow: 1px 1px black;
}

.alert-input-no { background: linear-gradient(0deg, #fb6054 0%, #e77373 100%); } 

input[type=submit]:hover,input[type=button]:hover,button:hover {
background: linear-gradient(0deg, #5de374 0%, #00c085 50%);	
	
}

.alert-input-no:hover { background: linear-gradient(0deg, #fb6054 0%, #e77373 50%); } 


.custom-select {
  max-width: 200px;
  position: relative;margin-bottom:10px;
}

.custom-select select {
  appearance: none;
  width: 100%;
  font-family: Barlow Condensed;
    letter-spacing: 1px;
    text-transform: uppercase;
  font-size: 20px;
  font-weight:500;
  padding: 0.675em 2em 0.675em 1em;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  color: #000;
  cursor: pointer;
}

.custom-select::before,
.custom-select::after {
  --size: 0.3rem;
  content: "";
  position: absolute;
  right: 1rem;
  pointer-events: none;
}

.custom-select::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid black;
  top: 40%;
}

.custom-select::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid black;
  top: 55%;
}