/* TO EDIT*/

   /* Top Bar Settings*/
   .top-bar{
    background-image: linear-gradient(to top, rgb(23, 31, 53) 0%, rgb(85, 110, 177) 80%, #556eb1 100%);

    /* Size */
    height: 60px;
    width: 100%;

    /* Display Settings */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Misc */
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    gap: 5px;
  }

  .jackpot-container{
    gap: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mega-jackpot-display, .major-jackpot-display, .minor-jackpot-display, .mini-jackpot-display{
    background-image: linear-gradient(to top, rgb(23, 31, 53) 0%, rgb(85, 110, 177) 80%, rgb(85, 110, 177) 100%);

    /* Display Settings */
    justify-content: flex-start;
    display: flex;
    align-items: center;

    /* Size */
    width: 150px;
    height: 40px;
    /* min-width: 80px; */
   
    /* Misc */
    border-radius: 10px;
    padding-left: 10px;
    gap: 10px;
    text-transform: uppercase;

    /* border: 2px solid rgba(143, 144, 146, 0.25); */
    box-shadow: var(--button-shadow-default);

    user-select: none;

    transform: skewX(-5deg);
  }

  .win-line-display, .free-spins-display{
    background-image: linear-gradient(to top, rgb(234, 87, 50) 0%, rgb(255, 180, 0) 80%, #ffb400 100%);
   
    /* Display Settings */
    justify-content: flex-start;
    display: flex;
    align-items: center;

    /* Size */
    width: 150px;
    height: 40px;
    min-width: 110px;
   
    /* Misc */
    border-radius: 10px;
    padding-left: 10px;
    gap: 10px;
    text-transform: uppercase;

    /* border: 2px solid rgba(143, 144, 146, 0.25); */
    box-shadow: var(--button-shadow-default);

    user-select: none;

    transform: skewX(-5deg);

  }

  /* Game play*/

  .door-bg{
    /* Background Image Settings */
    /* background-image: url("../../Images/Slots/GameBoard/5_FreeWally_GameBoard.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position: center bottom; */

    /* Display Settings */
    display: flex;
    justify-content: center;
    align-items: center;
    background-clip: border-box;

    /* Size */
    width: 135px;
    height: 350px;

    /* Misc */
  }

  /* .door{
    mask-image: none;
  } */

  .doors{
    background-image: url("/games/free-wally/image/game-board/5_FreeWally_GameBoard_Background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
    background-clip: border-box;

    width: 830px;
    height: 430px;

    gap: 15px;
  }

  /* Bottom Bar Settings */

  .bottom-bar {
    background-image: linear-gradient(to top, rgb(23, 31, 53) 0%, rgb(85, 110, 177) 80%, rgb(85, 110, 177) 100%);

    /* Display Settings */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Size */
    height: 70px;
    width: 80%;
    
    /* Color */
    background-color: white;
    border-radius: 15px;
    
    /* Misc */
    border: 3px solid rgba(85, 110, 177, 0.9);; /* Set a transparent border initially */
    box-shadow: 0px 0px 20px rgba(85, 110, 177, 0.9); /* Glow effect */
    
    margin: 0rem 0 2rem 0;
    gap: 15px;
  }

  .spin-button{
    /* Display Settings */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Color */
    background-image: linear-gradient(to top, rgb(234, 87, 50) 0%, rgb(255, 180, 0) 80%, rgb(255, 180, 0) 100%);
   
    /* Size */
    width: 110px;
    height: 50px;
    min-width: 80px;

    /* Misc */
    border-radius: 25px;
    border: 2px solid rgba(143, 144, 146, 0.25);
    box-shadow: var(--button-shadow-default);

    /* Font */
    font-size: 25px;

    user-select: none;

    transition: all .55s ease;
  }

  .total-bet{
    background-image: linear-gradient(to top, rgb(23, 31, 53) 0%, rgb(85, 110, 177) 80%, rgb(85, 110, 177) 100%);
    
   /* Display Settings */
   display: flex;
   justify-content: space-between;
   align-items: center;
  
    /* Size */
    width: 200px;
    height: 40px;
    min-width: 160px;

    /* Fonts */
    text-transform: uppercase;

    /* Misc */
    border-radius: 10px;
    box-shadow: var(--button-shadow-default);
    border: 1px solid rgba(143, 144, 146, 0.5);

    user-select: none;
  }

  .minus-button, .plus-button, .max-bet, .speed-mode, .auto-spin{
    background-image: linear-gradient(to top, rgb(234, 87, 50) 0%, rgb(255, 180, 0) 80%, rgb(255, 180, 0) 100%);
    
    /* Size */
    width: 45px;
    height: 45px;
    min-width: 45px;
    margin: 0px;
    
    /* Fonts Properties */
    text-transform: uppercase;
    
    /* Misc */
    border-radius: 10px;
    border: 2px solid rgba(143, 144, 146, 0.5);
    box-shadow: var(--button-shadow-default);
    
    cursor: pointer;
    user-select: none;

    

    transition: all .55s ease;

  }

  .spin-button:active:not([disabled]),button:hover:not([disabled]) {
    box-shadow: var(--button-shadow-hover);
  }
  
  .spin-button:active:not([disabled]),button:active:not([disabled]) {
    box-shadow: var(--button-shadow-active);
  }
  
  .max-bet, .speed-mode, .auto-spin{
    transform: skewX(-5deg);
  }


  /* General Misc Settings */

  .total-bet-value-holder{
   /* Dislplay Settings */
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

   /* Size */
   height: 100%;

   padding: 5px;
  }
  
  .win-display, .credits-display{
    background-image: linear-gradient(to top, rgb(23, 31, 53) 0%, rgb(85, 110, 177) 80%, rgb(85, 110, 177) 100%);

   /* Dislplay Settings */
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

   /* Size */
   width: 150px;
   height: 40px;
   min-width: 80px;

   /* Fonts */
   text-transform: uppercase;
   
    /* Misc */
    border-radius: 10px;
    padding: 5px;
    /* gap: 10px; */
    text-transform: uppercase;

    /* border: 2px solid rgba(143, 144, 146, 0.25); */
    box-shadow: var(--button-shadow-default);

    transform: skewX(-5deg);

    user-select: none;
  }

  .payline-amount {
    color: #ffb400;
  }
  
  .auto-spin.active {
    box-shadow: var(--button-shadow-hover);
  }

  .speed-mode.active {
    box-shadow: var(--button-shadow-hover);
  }

  .winning-box {
    box-shadow: var(--button-shadow-hover);
  }