@font-face{
font-family:'BPG Arial Caps';src:url(assets/fonts/bpg-arial-caps-webfont.eot);src:url(assets/fonts/bpg-arial-caps-webfont.eot?#iefix) format('embedded-opentype'),url(assets/fonts/bpg-arial-caps-webfont.woff2) format('woff2'),url(assets/fonts/bpg-arial-caps-webfont.woff) format('woff'),url(assets/fonts/bpg-arial-caps-webfont.ttf) format('truetype'),url(assets/fonts/bpg-arial-caps-webfont.svg#bpg_arial_capsregular) format('svg')
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
	}
	
	  .geofont {
  font-family: 'BPG Arial Caps', sans-serif;
  }
  
  .greentxt {
	color:#007000;
}
	
        body{
  background-color: #f4f0ce;
  background-attachment: fixed;
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  background-position: 50% 40%;
  background-image: url("assets/images/regbackimg.png");
            margin:0;
			    background-size: contain;
    background-position-x: left;
        }
		
		 #loading-overlay {
            position: absolute;  /* dzvel loading fixed;  */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #2D57D6; /* dzvel loading  #f4f0ce;  */
            display: flex;
            justify-content: flex-start;    /* dzvel loading center;  */
            align-items: center;
            flex-direction: column; /* Added to center text below the image */
            z-index: 9999; /* Ensure it's above other elements */
        }

        #loading-image {
            width: 300px; /* Adjust as needed */
			/* margin-top: 100px; */
			z-index:9999;
			top: 30%;
            position: fixed;
        }
		
		.centered-footerimage {
			
	/*position: fixed;  top: 55%; */
	
    max-width: 650px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    
		}
		
		@media screen and (max-width: 468px){
       .centered-footerimage {
        max-width: 100%;
        }
		}
		
		#loading-text {
            margin-top: 10px; /* Adjust as needed */
        }
		

        .welcomehead {
            text-align: center; /* Center the image horizontally */
        }

      /*  .welcomehead img {
            width: 100%;
            max-width: 700px;
            height: auto;
            max-height: 400px;
            display: block;
            margin: 0 auto;
            border-radius:20px;
        }  */

        .regform{
            
            padding:15px;
            width: 100%;
            text-align: center;
            
        }
        

        /* Styles for input fields */
.reginput {
    width: 100%; /* Adjust width as needed */
	max-width: 500px;
    padding: 10px; /* Add padding */
    margin-bottom: 20px; /* Add space between input fields */
    border: 1px solid #ccc; /* Add border */
    border-radius: 8px; /* Add border radius */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
    -webkit-border-radius: 8px; /* Webkit prefix for border-radius */
    -webkit-box-sizing: border-box; /* Webkit prefix for box-sizing */
}

.reginputselect{
	
		-webkit-appearance: none; /* Remove default iOS styling */
    -moz-appearance: none; /* Remove default Firefox styling */
	    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6"><polygon points="6 0 0 6 12 6"/></svg>'); /* Add custom arrow icon */
    background-repeat: no-repeat; /* Prevent arrow icon from repeating */
    background-position: right 10px center; /* Position arrow icon */
}
        
        .notif{
           margin: 0 auto; /* Center the image horizontally */
            width: 300px; /* Adjust width as needed */
            padding: 15px; /* Add padding */
            margin-bottom: 20px; /* Add space between input fields */
            border: 1px solid #ccc; /* Add border */
            border-radius: 5px; /* Add border radius */
            box-sizing: border-box; /* Ensure padding and border are included in the width */
            color:white;
            background-color:#A92100;
            text-align: left;
        }

        /* Style for submit button */
        .submitbtn {
            width: 150px; /* Adjust width as needed */
            padding: 10px; /* Add padding */
            background-color: #990832; /* Green background color */
            color: white; /* White text color */
            border: none; /* Remove border */
            border-radius: 5px; /* Add border radius */
            cursor: pointer; /* Add cursor pointer */
        }

        /* Style for submit button on hover */
        .submitbtn:hover {
            background-color: #45a049; /* Darker green background color */
        }
        
        .smsbtn{
            padding: 10px; /* Add padding */
            background-color: #990832; /* Green background color */
            color: white; /* White text color */
            border: none; /* Remove border */
            border-radius: 7px; /* Add border radius */
            cursor: pointer; /* Add cursor pointer */
        }
		
		
	 .welcomeform{
            text-align: center;
            padding:30px;
            background-color: rgba(11, 174, 71, 0.6);
            display:block;
            max-width:700px;
            
        }
		
		
		 .welcometextare{
           margin: 0 auto; /* Center the image horizontally */
            max-width: 600px; /* Adjust width as needed */
			width:100%;
            min-height:120px;
            padding: 12px; /* Add padding */
            margin-bottom: 20px; /* Add space between input fields */
            border: 2px solid white; /* Add border */
            border-radius: 10px; /* Add border radius */
            box-sizing: border-box; /* Ensure padding and border are included in the width */
            color:black;
            text-align: left;
			background:white;
        }
		
		
		
			 .textareaform{
            text-align: center;
            padding:30px;
            border-radius:0px 0px 20px 20px;
            display:block;
            margin: 0 auto;
            max-width:1000px;
            
        }
		
		
		 .rulesarea{
           margin: 0 auto; /* Center the image horizontally */
           /* max-width: 500px;  Adjust width as needed */
			/* width:90%; */
            min-height:200px;
            padding: 12px; /* Add padding */
            margin-bottom: 20px; /* Add space between input fields */
            border: 2px solid white; /* Add border */
            border-radius: 10px; /* Add border radius */
            box-sizing: border-box; /* Ensure padding and border are included in the width */
            color:white;
            text-align: left;
        }
		
		
.stadiumpage-image2 {
width: 100%;
    height: 208px;
    position: fixed;
    margin-top: 54px;
    z-index: 1;
    background-image: url(assets/images/stadiumheadweb.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}
		
			@media only screen and (max-width: 768px) {
		.stadiumpage-image2 {
		   background-image: url(assets/images/stadiumhead.png);
		   margin-top: 64px;
		   
		 }
		}	
		
		
		@media only screen and (max-width: 1256px) {
		 .rulesarea{
		    width: 90%;
		 }
		}
		
		
		.text-sm{
			
			font-size:12px;
		}
		
		button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

        /* Style for forgot password link */
        .forgot-password {
            color: gray; /* Change the color as needed */
            //text-decoration: none; /* Remove default underline */
            font-size: 14px; /* Adjust font size */
            display: block; /* Make it a block element */
            margin-top: -15px; /* Add space from the password input field */
			text-align: right;
        }

        /* Media query for smaller screens */
        @media only screen and (max-width: 600px) {
            .reginput {
                width: 100%; /* Make the input fields full width on smaller screens */
            }
			
			.regform {
              display: block;
            }
			
            .notif {
                width: 100%; /* Make the input fields full width on smaller screens */
            }
			
			.welcometextare {
                width: 100%; /* Make the input fields full width on smaller screens */
				font-size:12px;
            }
        }
		
		
		
		
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 200px;
  background: #820024;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 99999;
  
  
}
.nav,
.nav .nav-links {
  display: flex;
  align-items: center;
}
.nav {
  justify-content: space-between;
}

.nav .logo {
  font-size: 22px;
  font-weight: 500;
}
.nav .nav-links {
  column-gap: 20px;
  list-style: none;
  font-size: 14px;
}
.nav .nav-links a {
  transition: all 0.2s linear;
}
.nav.openSearch .nav-links a {
  opacity: 0;
  pointer-events: none;
}
.nav .search-icon {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.nav .search-box {
  position: absolute;
  right: 250px;
  height: 45px;
  max-width: 555px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s linear;
}
.nav.openSearch .search-box {
  opacity: 1;
  pointer-events: auto;
}
.search-box .search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  left: 15px;
  color: #4a98f7;
  transform: translateY(-50%);
}
.search-box{    /* aq amovakeli .search-box input{ */
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 6px;
  background-color: #fff;
  padding: 0 15px 0 45px;
  text-align: center;
          height: auto;
        padding: 5px;
}

.nav .navOpenBtn,
.nav .navCloseBtn {
  display: none;
}

.nav-bottom-text,
.nav-userinfo{
	display:none;
}

  .calllogo,
  .fblogo {
    display: flex;
    align-items: center;
    gap: 4px; /* Adjust the gap between image and text */
    font-size:11px;
  }


.maincontent{
  margin: 0 auto; /* This centers the div horizontally */
  max-width: 1000px; /* Limits the maximum width of the content */
  margin-top: 150px;  /* IOS ze gadavakete */
}

.centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flow-root;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 0px; /* Adjust margin as needed  DZVEEEL LOADINGZE 65px*/
}

.centered-image {
  /*box-shadow:0px -30px 20px 6px black;    DZVEL LOADINGZE */
  max-width: 650px; /* Ensure the image doesn't exceed its container */
  width: 100%;
}

.centered-image2 {
  /*box-shadow:0px -30px 20px 6px black;    DZVEL LOADINGZE */
  max-width: 650px; /* Ensure the image doesn't exceed its container */
  width: 100%;
  position:fixed;
  margin-top: 45px;
  z-index:1;
}


#ballbtn{
	border:none;
}

	.centered-footer-image2 {
    width: 100%;  /*  100 vw */
    height: 25vh;
    position: absolute;
    /* margin-top: -140px; */
    z-index: 1;
    background-image: url(assets/images/colorbannerfooter2web.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

@media only screen and (max-width: 768px) {
		.centered-footer-image2 {
		   background-image: url(assets/images/colorbannerfooter2.png);
		 }
	}	

.mainstadiums{
text-align: center;
}

.stadium{
text-align: center;
}

.stshadow{
		/*box-shadow:0px -2px 20px 1px black;*/
}

.mainstadiums img{
	width:240px;
	max-width:47%;
}

.stadium img{
	width:240px;
	max-width:47%;
}

/* responsive */
@media screen and (max-width: 1160px) {
  .nav {
    padding: 15px 100px;
  }
  .nav .search-box {
    right: 150px;
  }
}


@media screen and (max-width: 950px) {
  .nav {
    padding: 15px 50px;
  }
  .nav .search-box {
    right: 100px;
    max-width: 400px;
  }
  
}

@media screen and (max-width: 468px) {
  .centered-image {
  max-width: 100%; /* Ensure the image doesn't exceed its container */
   }
}

@media screen and (max-width: 1256px) {
  .nav .navOpenBtn,
  .nav .navCloseBtn {
    display: block;
  }
  .nav {
    padding: 15px 20px;
  }
  .nav .nav-links {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    max-width: 310px;
    width: 100%;
    padding:16px;
    padding-top: 50px;
    row-gap: 14px;
    flex-direction: column;
    background-color: #9C0737;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    transition: all 0.4s ease;
    z-index: 100;
	border-radius: 0px 20px 20px 0px; 
   align-items: start;
   list-style: inside;
   color:white;
   font-size:14px;
  }
  
  .nav-username, .nav-lastname{
	  font-size:12px;
  }
  
  .nav.openNav .nav-links {
    left: 0;
  }
  .nav .navOpenBtn {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  .nav .navCloseBtn {
    position: absolute;
    top: 17px;
    right: 17px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  .nav .search-box {
    top: calc(100% + 10px);
    max-width: calc(100% - 20px);
    right: 50%;
    transform: translateX(50%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
    .nav-bottom-text {
	display:block;
    position: absolute;
    bottom: 20px; /* Adjust as needed */
    left: 20px; /* Adjust as needed */
    color: #fff;
    font-size: 14px;
  }
.nav-userinfo {
  background-color: #820024;
  padding: 8px;
  width: 100%;
  border-radius: 10px;
  margin: 0px;
  display: flex;
  align-items: center;
  gap: 10px; /* Adjust the gap between image and text */
}

.nav-userinfo .nav-lastname {
  display: inline; /* Assuming you want to display the last name inline */
}

.nav-userinfo .nav-logout {
  margin-left: auto; /* Pushes the logout button to the right */
  background-color: #9C0737;
  padding:8px;
  border-radius:10px;
  font-size:10px;
}

.nav-logout {
	width:80px;
}
  
}


.loading-dots {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  margin: 0 5px;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}


a {
  color: #fff; /* Default link color */
  text-decoration: none; /* Removes default underline */
}

/* Hover styles */
a:hover {
  color: #0056b3; /* Change color on hover */
  text-decoration: underline; /* Add underline on hover */
}

/* Visited link styles */
a:visited {
  color: #fff; /* Change color for visited links */
}

/* Active link styles (when clicked) */
a:active {
  color: #0056b3; /* Change color when link is active (clicked) */
}


        .table {
            max-width: 400px;
            width:90%;
            border-radius: 10px;
            background-color: white;
            display: table;
            border-collapse: collapse;
        }


        .table-row {
            display: flex; /* Use flexbox for rows */
			border:1px solid #DCDBD9;
            overflow: hidden; /* Hide overflow from children */
            margin-bottom: 5px; /* Add some space between rows */
            background-color: #F3F2EE;
        }
		
        .table-fixrow {
            border-radius: 10px 10px 0px 0px; /* Set border-radius to table rows */
			margin-left: 0px;
            margin-right: 0px;
        }
		
		.table-nofixrow {
		    border-radius: 10px; /* Set border-radius to table rows */
			margin-left: 1px;
            margin-right: 1px;
		}
        .table-cell {
            padding: 6px;
            text-align: left;
        }

        .center-cell {
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            
        }

        /* Set specific width for first and last cells */
        .table-row > div:first-child .table-cell,
        .table-row > div:last-child .table-cell {
            flex-grow: 0; /* Prevent the cell from growing */
            width: 50px;
        }

        .table-row > div:not(:first-child):not(:last-child) .table-cell {
            flex-grow: 1; /* Allow other cells to grow */
        }

        /* Header row styling */
        .header .table-cell {
            font-weight: bold;
            background-color: #CCCCCE;
        }

        /* Responsive styling */
        @media (max-width: 600px) {
            .table-cell {
                padding: 5px;
            }
        }
		
		.table-title{
		background:#F2D048;
		border-radius: 10px 10px 0px 0px;
		padding:8px;
		margin-bottom:-6px;
		font-weight:bold;
		font-size:14px;
		
		}
		
		
.modal-fornotif {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent background */
  display: none;
  justify-content: center;
  align-items: center;
  z-index:9999999999999991;
}

.modaltxtnotif {
  background-color: #fff;
  padding: 20px;
  max-width: 400px;
  font-weight: 600;
  border-radius: 5px;
  position: relative; /* Position relative to allow absolute positioning of close button */
}

.close-modaltxtnotif {
    position: absolute;
    top: 3px;
    width: 16px;
    right: 4px;
    cursor: pointer;
    font-weight: 800;
    background: none;
    border: 1px solid red;
    border-radius: 50%;
    font-size: 11px;
    color: red;
}

.modaltxtnotif-content {
  /* Add any specific styles for modal content */
}



/* play php */


/* Default styles */
.stadium {
    width: 600px;
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
	border-radius:5px;
    /* margin: 50px auto;  */
}

.topboards{
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    /* height: 73vh; */
    flex-wrap: wrap;
    align-content: space-between;
    flex-direction: row;
	max-width: 900px;
	

}


@media screen and (max-width: 976px){
	.stadium {
    width: 400px;
    height: 600px;
}

.topboards{
    display: block;
    justify-content: center;
}

}

.myplayers{
    width: 34px;
    height: 34px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* position: absolute; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
	transform: translateX(0%);
	}

.player {
    width: 40px;
    height: 40px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; /* Center the background image */
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px; /* Adjust font size as needed */
    font-weight:bold;
	text-align: center; /* Center the text */
	transform: translateX(-50%);
}

.player-number {
    position: relative;
    z-index: 1;
}

.ball {
    width: 150px;
    height: 150px;
    background-image: url('assets/images/ball.png');
    border-radius: 50%;
    position: absolute;
        background-size: cover;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.ball-text {
    color: white; /* You can adjust the color as needed */
    font-size: 20px; /* You can adjust the font size as needed */
    font-weight: bold; /* You can adjust the font weight as needed */
	transform: rotate(347deg) translateY(-20px) translateX(10px);
    background: #DD3E25;
    border-radius: 5px;
    font-size: 14px;
    padding: 0px;
	min-width:20px;
}

/* Media query for smaller screens */
@media only screen and (max-width: 768px) {
    .stadium {
        width: 400px;
        height: 600px;
    }
    .player{
        width: 40px;
        height: 40px;
    }
    
        .ball {
        width: 140px;
        height: 140px;
    }
}

/* Media query for even smaller screens */
@media only screen and (max-width: 480px) {
    .stadium {
        width: 300px;
        height: 450px;
    }
    .player{
        width: 35px;
        height: 35px;
    }
    
        .ball {
        width: 110px;
        height: 110px;
    }
}

@keyframes rotateAnimation {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.rotate {
    animation: rotateAnimation 1s infinite linear;
}

.wiggle {
	
	 animation: wiggleEffect 2s linear infinite;
}

@keyframes wiggleEffect {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

.player-name {
    font-size: 10px; /* Adjust the font size */
    margin-top: 5px; /* Adjust the distance between the player's image and the text */
	position:absolute;
	top:32px;
    background-color: #7E041A;
    color: white;
    padding: 3px;
    border-radius: 5px;
}


   .pulse {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        border-radius: 50%;
        animation: pulse 2s infinite; /* Apply the pulse animation */
    }

    /* Animation keyframes */
    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.2);
        }
        100% {
            transform: scale(1);
        }
    }
	
	
		.profileclick {
  display: flex;
  justify-content: center;
  align-items: center;
}

.userinfoweb {
  text-align: left;
}


.profileusername {
  font-size: 12px; /* Adjust size as needed */
  font-weight: bold;
  color:white;
}

.profilelastname {
  font-size: 10px; /* Adjust size as needed */
    color:white;
}
.profileicon {
  display: none;
}

  .profileclickdropdown {
position: absolute;
    top: 0;
    height: 94px;
    /* right: 196px; */
    background-color: #f9f9f9;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    padding: 10px;
    display: none;
    width: 185px;
	color:white;
    background: #9d032e;
    border-radius: 0px 0px 20px 20px;
    box-shadow: 0px 1px 11px 0px #2b2828;
  }
	
	
	
	.menuicon {
		display:none;
	}
	
	@media (max-width: 1256px) {
		
     .menuicon {
		display:inline;
	  }
	  
	 .profileclick {
        display: none;
     }
	 .profileicon{
		 display:inline;
	 }

}



.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
    font-size: 0.80em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
    padding:10px;
    border-radius:10px;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: green;
}

.inputfile + label {
	cursor: pointer; /* "hand" cursor */
}

.inputfile:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}




#loadingIndicator {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

#loadingIndicator .spinner {
border: 4px solid rgb(243 247 247 / 81%);
    border-left-color: #df0f0f;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    background: #3b1e1e9e;
    animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}



.choosebutt {
    background: #8C0021;
    -webkit-background: #8C0021; /* Adding webkit prefix for background color */
    color: white;
    padding: 10px;
    -webkit-padding: 10px; /* Adding webkit prefix for padding */
    border-radius: 8px;
    border: none;
    -webkit-border: none; /* Adding webkit prefix for border */
    cursor: pointer;
}
	
	.modaltxtnotif-content {
    font-size: 14px;
}