/* Casino games */
@import url("style-games.css?v=21");


/* General */

/* Sidebar Menu (Left Fixed) */
.sidebar {
    width: 300px; /* Default width */
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #333;
    color: white;
    padding: 20px;
	padding-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*! z-index: 99; */
    transition: left 0.3s ease;
}

.sidebar ul {
    list-style-type: none;
}

.sidebar ul li {
    margin-bottom: 4px;
}

.sidebar ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    display: block;
    padding: 10px;
    border-radius: 4px;
}

/* Close Button for Sidebar on Mobile */
.sidebar .close-btn {
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
	font-size: 20px;
}

.sidebar .close-btn:hover {
    background-color: #575757;
}

/* Main Content Area */
.main-content {
    margin-left: 300px; /* Space for the fixed sidebar */
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

h1 {
    margin-bottom: 20px;
}

/* Button Styling */
button {
    padding: 10px 15px;
    font-size: 16px;
    /*margin-top: 20px;*/
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

/* Dynamic Content */
#dynamicContent {
    margin-top: 20px;
    padding: 15px;
    background-color: #f4f4f4;
    border-radius: 4px;
}

p {
	margin: 15px 0;
}

/* Responsive Design: Adjustments for mobile screens */
@media (max-width: 768px) {
    /* For tablets and smaller screens, the sidebar becomes collapsible or hidden */
    .sidebar {
        width: 250px;
        position: absolute;
        z-index: 1000;
        height: 100%;
        top: 0;
        left: -250px; /* Initially hidden */
        transition: left 0.3s ease;
    }

    .sidebar.open {
        left: 0; /* Show the sidebar */
    }

    .main-content {
        margin-left: 0; /* Remove space for the sidebar */
        padding-left: 20px;
    }

    /* Add a button to toggle the sidebar visibility on mobile */
    .menu-toggle {
        display: block;
        position: absolute;
        top: 10px;
        left: 20px;
        background-color: #333;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        z-index: 1100;
		font-size: 20px;
    }

    .menu-toggle:hover {
        background-color: #575757;
    }

    /* Padding to prevent the text from overlapping with the button */
    .main-content {
        padding-top: 60px; /* Ensure there's space for the menu toggle button */
    }
}

/* Hide the menu toggle button on desktop */

.menu-toggle {
    display: none; /* Hidden by default */
}

.sidebar .close-btn {
	display: none;
}

/* Show the menu toggle button only on smaller screens */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Display button on mobile screens */
    }
	
	.sidebar .close-btn {
		display: block;
	}
}

input.gameSearch {
	display: block;
	padding: 5px 5px;
	width: 100%;
	font-size: 13pt;
}

.divSpecialties {
	margin: 8px 0;
}

.divSpecialties .title {
	font-weight: bold;
	padding: 3px 6px;
}

.divSpecialties .category span {
	float: right;
	margin-left: 10px;
}

.divSpecialties .category {
	cursor: pointer;
	padding: 3px 6px;
}

.divSpecialties .category:hover {
	background-color: black;
}

.divProviders {
	margin: 8px 0;
}

.divProviders .title {
	font-weight: bold;
	padding: 3px 6px;
}

.divProviders .provider span {
	float: right;
	margin-left: 10px;
}

.divProviders .provider {
	cursor: pointer;
	padding: 3px 6px;
}

.divProviders .provider:hover {
	background-color: black;
}

.divCategories {
	margin: 8px 0;
}

.divCategories .title {
	font-weight: bold;
	padding: 3px 6px;
}

.divCategories .category span {
	float: right;
	margin-left: 10px;
}

.divCategories .category {
	cursor: pointer;
	padding: 3px 6px;
}

.divCategories .category:hover {
	background-color: black;
}

.mainCategory {
	margin-bottom: 15px;
	overflow: auto;
}

.mainCategory .title {
	display: none;
}

.mainCategory .category span{
	display: none;
}

.mainCategory .category {
	float: left;
	margin-right: 8px;
	cursor: pointer;
}

.divGameListing .listing {
	display: flex;
	flex-wrap: wrap;
}

.gameContainer {
	display: block;
	width: 170px;
	height: 300px;
	border: 1px solid grey;
	margin-right: 10px;
	margin-bottom: 10px;
}

.gameContainer .image {
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: end;
	flex-direction: column;
	text-align: center;
	position: relative;
}

.gameContainer .image .gameFav {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 25px;
	border: none;
	background: none;
	cursor: pointer;
	opacity: 0.6;
	margin: 0 0;
	padding: 5px 5px;
	font-family: monospace;
}

.gameContainer .image .gameFavUnchecked {
	color: grey;
}

.gameContainer .image .gameFavChecked {
	color: red;
}

.gameContainer .image .gameFav:hover {
	opacity: 1.0;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.gameContainer .image button {
	margin: 10px 5px; 
}

.gameContainer .image .brand {
	width: 100%;
	background-color: rgba(0, 0, 0, .6);
	color: white;
	padding: 3px 5px;
	font-size: 10pt;
}

.gameContainer .name {
	display: flex;
	align-items: center;
	padding: 5px 5px;
	height: 50px;
	justify-content: center;
	font-size: 10pt;
}

.gameOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.gameOverlay .gameInfo {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: white;
	color: black;
	border: none;
	width: 100%;
	height: 45px;
	font-size: 20px;
}

.gameOverlay .gameInfo div{
	float: left;
}

.gameOverlay .gameInfo .gameFav {
	font-size: 35px;
	border: none;
	background: none;
	cursor: pointer;
	opacity: 0.6;
	margin: 0 0;
	padding: 5px 5px;
	font-family: monospace;
}

.gameOverlay .gameInfo .gameFavUnchecked {
	color: grey;
}

.gameOverlay .gameInfo .gameFavChecked {
	color: red;
}

.gameOverlay .gameInfo .gameFav:hover {
	opacity: 1.0;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.ifGame {
	height: 100%;
	width: 100%;
	border: none;
	padding: 45px 0 0 0!important;
}

.gameCloseBtn {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: red;
	color: white;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 20px;
	cursor: pointer;
	z-index: 10000;
}

.spinner {
    border: 4px solid transparent;
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Center the spinner */
    z-index: 1001;  /* Make sure the spinner is above the iframe */
}

/* Keyframe animation for spinning */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* End General */

/* Styles */

::-webkit-scrollbar {
  width: 12px; 
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #43505a; 
}

::-webkit-scrollbar-thumb {
  background-color: #050505;
  border-radius: 6px; 
  border: 2px solid #43505a; 
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555; 
}

* {
  scrollbar-width: thin; /* opciones: auto | thin | none */
  scrollbar-color: #1d242a #43505a; /* thumb color y track color */
}


/* Animations */

@keyframes fadeInEffect {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

/* End */

.main .container, #main .container{
   width: 100%;
   padding: 0;
   margin: 0;
   box-shadow: none;
   border-radius: 0;
   background: none;
}

.menu-toggle{
    position: sticky;
    background: #FEB903;
    color: #000;
    top: 150px;
    z-index: 99;
    padding: 5px 13px;
    margin: 0 0 -58px 0;
}

#main .menu-toggle{
    top: 120px
}

.sidebar{
    background: #000;
    padding: 2%;
    position: fixed;
    top: 100px;
    left: -80%; /* Initially hidden */
    width: 80%;
    max-width: 300px;
    height: 90%;
}

    .main .sidebar{/* sidebar classy */
        top: 50px;
    }


    #jgator_menu{
        overflow-y: auto;
        font-size: 15px;
    }

    #jgator_main{
        font-size: 15px;
    }

    .sidebar .close-btn{
        background: #FEB903;
        color: #000;
        top: 16px;
        right: -12px;
    }

    /* Icons */

    /* Category Icons */

    #cate-live:before, #cate-fish:before, #cate-crash:before, #cate-table:before, #cate-slot:before, #cate-slot:before, #cate-vpoker:before, #cate-other:before, #cate-unknown:before, #cate-instant:before,
    #must-play-baccarat:before, #must-play-blackjack:before, #must-play-roulette:before, #must-play-dice:before, #must-play-special_jade:before,
    .playerDetails:before, .favorites:before, .featured:before,
    #prov-cala:before, #prov-kaga:before, #prov-rbl:before, #prov-vig:before, #prov-betsoft:before, #prov-sso:before, #prov-amt:before{
        content: '';
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        margin: 0 8px 0 0;
    }

        /* Jade's Fortune */

        #must-play-special_jade{
            font-size: 17px;
            font-weight: bold;
        }

        /* Live Casino */

        #cate-live:before{
            background: url(images/icons/live-dealer.svg?v=1) no-repeat center;
            background-size: 100%;
        }

        /* Slots */

        #cate-slot:before{
            background: url(images/icons/slots.svg) no-repeat center;
            background-size: 100%;
        }

        /* Table games */

        #cate-table:before{
            background: url(images/icons/table-games.svg) no-repeat center;
            background-size: 100%;
        }

        /* Fishing */

        #cate-fish:before{
            background: url(images/icons/fishing-shooting.svg) no-repeat center;
            background-size: 100%;
        }

        /* Crash */

        #cate-crash:before{
            background: url(images/icons/crash.svg?v=1) no-repeat center top;
            background-size: 100%;
        }

        /* Account */

        .playerDetails:before{
            background: url(images/icons/profile.svg) no-repeat center top;
            background-size: 100%;
        }

        /* Video poker */

        #cate-vpoker:before{
            background: url(images/icons/video-poker.svg?v=2) no-repeat center top;
            background-size: 100%;
        }

        /* */

        #cate-other:before{
            background: url(images/icons/profile.svg) no-repeat center top;
            background-size: 100%;
        }

        #cate-instant:before{
            background: url(images/icons/instant.svg?v=2) no-repeat center top;
            background-size: 100%;
        }

        /* */

        #cate-unknown:before{
            background: url(images/icons/profile.svg) no-repeat center top;
            background-size: 100%;
        }

        /* */

        #must-play-baccarat:before{
            background: url(images/icons/baccarat.svg?v=1) no-repeat center top;
            background-size: 100%;
        }
        
        #must-play-blackjack:before{
            background: url(images/icons/blackjack.svg?v=2) no-repeat center top;
            background-size: 100%;
        }
        
        #must-play-roulette:before{
            background: url(images/icons/roulette.svg?v=1) no-repeat center top;
            background-size: 100%;
        }
        
        #must-play-dice:before{
            background: url(images/icons/dice.svg?v=1) no-repeat center top;
            background-size: 100%;
        }

        #cate-other:before{
            background: url(images/icons/others.svg) no-repeat center top;
            background-size: 100%;
        }
        
        #cate-unknown:before{
            background: url(images/icons/released.svg) no-repeat center top;
            background-size: 100%;
        }

        .favorites:before{
            background: url(images/icons/favorites.svg) no-repeat center top;
            background-size: 100%;
        }
        
        .featured:before{
            background: url(images/icons/featured.svg) no-repeat center top;
            background-size: 100%;
        }

        /**/

        #prov-cala:before{
            background: url(images/providers-logo/mancala-logo.svg) no-repeat center top;
            background-size: 100%;
        }
        
        #prov-kaga:before{
            background: url(images/providers-logo/kaga-logo.svg?v=1) no-repeat center top;
            background-size: 100%;
        }
        
        #prov-rbl:before{
            background: url(images/providers-logo/rebel-logo.svg?v=1) no-repeat center top;
            background-size: 100%;
        }
        
        #prov-vig:before{
            background: url(images/providers-logo/vegas_live-logo.svg?v=1) no-repeat center top;
            background-size: 100%;
        }
        
        #prov-betsoft:before{
            background: url(images/providers-logo/betsoft-logo.svg) no-repeat center top;
            background-size: 100%;
        }
        
        #prov-sso:before{
            background: url(images/providers-logo/bgaming-logo.svg) no-repeat center top;
            background-size: 100%;
        }

        #prov-amt:before, #must-play-special_jade:before{
            background: url(images/providers-logo/jades-fortune.svg) no-repeat center top;
            background-size: 100%;
            margin: -5px 8px 0 0;
        }

        
    .playerDetails{
        margin: 0 0 20px 0;
        display: none;
    }

        .username{
            color: #FEB903;
            font-weight: bold;
            text-transform: uppercase;
        }

        .demoMode{
            margin: 10px 0;
            color: #FFF;
            background: #000;
            padding: 10px;
        }

        .gameSearch{
            background: #333 url('images/icons/magnifying-glass-solid.svg') no-repeat;
            background-position: 10px center;
            background-size: 16px 16px;
            color: #FFF;
            border: 1px solid #CCC;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            margin: 20px 0;
            padding: 5px 5px 5px 37px !important;
            border-radius: 30px;
        }

        .gameSearch::placeholder {
            color: #FFF;
            opacity: 0.5;
        }

    ul.menuGeneral li{
       border-bottom: 1px solid #333
    }

    .sidebar .title, .playerDetails{
      background: #222;
      padding: 10px 20px;
      margin: 10px 0;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }

    .sidebar .listing > div{
      padding: 10px 2%;
      color: #CCC;
      transition: transform .2s, padding-left .3s;
    }

      .sidebar .listing > div:hover{
        color: #FEB903;
        padding-left: 4%;
      }

      .sidebar ul li a{
        display: inline-block;
        transition: transform .2s, padding-left .3s;
      }

        .sidebar ul li a:hover{
            color: #FEB903;
            padding-left: 4%;
        }
            
/* Main Content */

.gameOverlay .gameInfo{
    background-color: #1d242a;
    color: #FFF;
    display: flex;
    align-items: center;
}

    .gameInfo div{
        margin: 0 10px;
    }

.gameCloseBtn{
    padding: 9px;
    display: flex;
    align-items: center;
}

.main-content{
    overflow: clip;
    width: 95%;
    padding: 2%;
    margin: 0 auto;
}

    .main-content h1{
        display: none;
    }

    /* Casino Games */

    /* Game */

    /* Filter Type */

    .mainCategory{
        background: #303B44;
        margin-bottom: 15px;
        position: sticky;
        top: 131px;
        z-index: 1;
        padding: 10px 0 10px 17%;
    }

        #main .mainCategory{
            top: 95px;
        }

        .mainCategory .listing{
            width: 100%;
            border-radius: 30px;
            padding: 10px;
            display: flex;
            overflow-x: auto;
            flex-wrap: nowrap;
            box-sizing: border-box;
        }

            .mainCategory .listing div.category{
                padding: 8px 16px;
                border: 1px solid #CCC;
                border-radius: 30px;
                margin: 0 5px;
                transition: transform .2s; /* Animation */
                display: flex;
                /*white-space: nowrap !important;*/
                flex: 0 0 auto;
                font-size: .9em;
            }

                .mainCategory .listing div.category:hover{
                    background: #222a33;
                    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                }


    /* Game Item */

    .gameContainer{
        transition: transform .2s; /* Animation */
        border: 0;
        opacity: 0;
        animation: fadeInEffect .5s ease-in forwards;
        position: relative;
        margin: 1%;
        height: 290px;
    }

        .gameContainer:hover  {
            transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        }

        .gameContainer .name{
            background: #303B44;
        }

        .gameContainer .image{
            background-size: 100%!important;
            height: 240px;
        }

        .gameContainer .launchDiv{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            animation: fadeInEffect .3s ease-in forwards;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

            .gameContainer .launchDiv:after{
                content: '';
                background-color: rgba(0, 0, 0, 0.5);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
            }

        .gameContainer .image .gameFav, .gameContainer .image .brand{
            z-index: 2;
        }

            .gameContainer .image .gameFav{
                opacity: 1;
            }

        .gameContainer .image .brand{
            background: #000;
        }

        .gameContainer .image .gameFavUnchecked{
            color: #FEB903;
        }

        .gameContainer:hover .launchDiv, .gameContainer:active .launchDiv, .gameContainer:focus .launchDiv{
            display: block;
            transition: transform .2s;
        }

            .gameContainer:hover{
                font-weight: bold;
                /*color: #FFF;*/
            }

            .gameContainer .image button{
                font-size: .9em;
                transition: transform .2s;
            }

                .btnPlay{
                    background: #FEB903;
                    color: #000;
                    width: 70%;
                    margin: 45% 5px 0 5px !important;
                }

                    .btnPlay:hover{
                        transform: scale(1.1);
                        background: #FFF;
                        color: 000;
                    }

                    .btnPlay:disabled{
                        background-color: rgba(254, 185, 3, .7);
                        opacity: .7;
                        cursor: auto;
                        color: #664a00;
                    }

                .btnDemo{
                    border: 1px solid #FFF;
                    background: none;
                    width: 70%;
                }

                    .btnDemo:hover{
                        background: none;
                        transform: scale(1.1);
                    }

    .divGameListing .title{
        margin: 20px 0;
        font-weight: 600;
    }

    .divGameListing .listing{
        justify-content: space-around
    }

    /* Providers */

    .brand-kaga{
        background: url(images/providers-logo/ka-gaming.jpg) no-repeat center top #FFF;
        background-size: 100%;
    }

    .brand-vig{
        background: url(images/providers-logo/vegas-live.jpg) no-repeat center top #FFF;
        background-size: 100%;
    }

    .brand-rbl{
        background: url(images/providers-logo/rebel.jpg) no-repeat center top #FFF;
        background-size: 100%;
    }

    .brand-betsoft{
        background: url(images/providers-logo/betsoft.jpg) no-repeat center top #FFF;
        background-size: 100%;
    }

    .brand-cala{
        background: url(images/providers-logo/mancala.jpg) no-repeat center top #FFF;
        background-size: 100%;
    }

    .brand-sso{
        background: url(images/providers-logo/bgaming.jpg) no-repeat center top #FFF;
        background-size: 100%;
    } 

    .brand-amt{
        background: url(images/providers-logo/jades-fortune-thumb.jpg) no-repeat center top #FFF;
        background-size: 100%;
    }
    

    /* End Providers */

    .footer{
        display: none;
    }


 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    


}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    
     header, .header{
				position: sticky;
				top: 0;
			 z-index: 999;
		}

    /* Casino Games */

    .mainCategory{
        padding: 10px 0;
        top: 85px;
    }

        .mainCategory .listing div.category{
                margin: 0 8px;
                font-size: 1em;
            }

    /* Main content */
    
    .main-content{
        width: 67%;
        /*! margin: 0 0 0 29%; */
    }

    .sidebar{
        width: 29%;
        left: 0;
        overflow-y: auto;
        top: 120px;
			  position: sticky
    }

        #jgator_menu{
            overflow-y:visible
        }

    .divGameListing .listing{
        justify-content: start
    }
    
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    
    /* Main content */
    
    .main-content{
        width: 70%;
        /*! margin: 0 0 0 26%; */
        padding: 0 2% 20px 2%;
    }
    
        .main .mainCategory{
            top: 104px;
        }

    .sidebar{
        width: 26%;
        left: 0;
        top: 100px;
        height: 800px;
    }
    
        .main .sidebar{ /* classic */
            top: 104px;
            height: 89%;
        }

    .divGameListing .listing{
        justify-content: start
    }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {


    /* Main content */

    .main-content{
        width: 50%;
        /*! margin: 0 0 0 21%; */
    }
    
        .main  .main-content{
            width: 79%
        }

        .mainCategory{
            padding: 40px 0 10px 0;
        }

    .sidebar{
        width: 20%;
        max-width: none;
    }

} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1300px) {

    

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1400px) {



}

/* End Styles */


/* Custom Color */


/* New Casino Lobby */

.mainContent{
    color: #0e69be
}

.sidebar{
    background: #0e69be;
}

.gameSearch{
    background: #0054a2 url('https://cdn.jokergator.com/css/images/icons/magnifying-glass-solid.svg') no-repeat!important;
    background-size: 16px!important;
    background-position: 10px center!important;
}

.mainCategory{
    background: #FFF;
}

.sidebar .title, .playerDetails{
    background: #0054a2 !important;
}

.mainCategory .listing div.category{
    border: 1px solid #0e69be;
    color: #FFF !important;
    background: #0e69be;
}

.mainCategory .listing div.category:hover{
    background: #0054a2!important
}

.divGameListing .title{
    color:#0054a2
}

.sidebar .listing > div{
    color: #FFF!important;
}

.sidebar .listing > div:hover{
    background: #0054a2
}

.gameContainer .name{
    background: #FFF;
    color: #002a3f;
}

.gameContainer .image .brand{
    background: #0e69be;
}

::-webkit-scrollbar-track {
  background: #EAEAEA!important; 
}

::-webkit-scrollbar-thumb {
  background-color: #EAEAEA!important;
  border-radius: 6px; 
  border: 2px solid #0054a2!important; 
}

::-webkit-scrollbar-thumb:hover {
  background-color: #0054a2!important;; 
}

* {
  scrollbar-width: thin; /* opciones: auto | thin | none */
  scrollbar-color: #0054a2 #EAEAEA!important;; /* thumb color y track color */
}

@media only screen and (min-width: 992px) {
    
    .sidebar, .mainCategory{
        top: 131px !important;
    }
    
}

/* End New Casino Lobby */