/* TO EDIT*/

   /* Top Bar Settings*/
   .top-bar{
    background-image: linear-gradient(to top, #060000 0%, #2c5a8c 80%, #2c5a8c 100%);

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

    /* Color */
    background-color: white;

    /* 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;
    height: 100%;
    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, #131a2f 0%, #36487a 80%, #36487a 100%);

      

    /* Display Settings*/
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    padding-left: 15px;

    /* Size */
    width: 150px;
    height: 40px;

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

    transform: skewX(-5deg);

    user-select: none;

    text-transform: uppercase;
  }

  .win-line-display, .free-spins-display{
     background-image: linear-gradient(to top, #06111f 0%, #0b479a 80%, #0b479a 100%);

   
    /* Display Settings */
    justify-content: flex-start;
    display: flex;
    border-radius: 10px;
    align-items: center;
    padding-left: 10px;
    gap: 10px;
    text-transform: uppercase;

    /* Size */
    width: 150px;
    height: 40px;

   
    /* Misc */
    /* 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/"); */
    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: 130px;
    height: 360px;

    /* Misc */
  }

  .door{
    mask-image: none;
  }

  .doors{
    background-image: url("/games/majestic-lucky-8/image/game-board/22_MajesticLucky_8_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: 750px;
    height: 420px;
  }

  /* Bottom Bar Settings */

  .bottom-bar {
      background-image: linear-gradient(to top, #020201 0%, #333333 80%, #333333 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(44, 90, 140, 0.9); /* Set a transparent border initially */
    box-shadow: 0px 0px 20px rgba(44, 90, 140, 0.9); /* Glow effect */
    
    margin: 1rem 0 2rem 0;
    margin-top: 0;
    gap: 15px;
  }

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

    /* Color */
     background-image: linear-gradient(to top, #06111f 0%, #0b479a 80%, #0b479a 100%);
   
    /* Size */
    width: 110px;
    height: 50px;

    /* Misc */
    border-radius: 25px;
    border: 2px solid rgba(11, 71, 154, 0.85);
    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, #020201 0%, #333333 80%, #333333 100%);
    
    /* Display Settings */
    display: flex;
    justify-content: space-between;
    align-items: center;
   
    /* Size */
    width: 200px;
    height: 40px;

    /* Fonts */
    text-transform: uppercase;

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

    transform: skewX(-5deg);
    user-select: none;
  }

  .minus-button, .plus-button, .max-bet, .speed-mode, .auto-spin{
     background-image: linear-gradient(to top, #06111f 0%, #0b479a 80%, #0b479a 100%);
    
    /* Size */
    width: 45px;
    height: 45px;
    
    margin: 0px;
    
    /* Fonts Properties */
    text-transform: uppercase;
    
    /* Misc */
    border-radius: 10px;
    border: 2px solid rgba(11, 71, 154, 0.85);

   
    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;
    align-items: center;

    /* Size */
    height: 100%;
  }
  
  .win-display, .credits-display{
    background-image: linear-gradient(to top, #020201 0%, #333333 80%, #333333 100%);

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

    /* Size */
    width: 150px;
    height: 40px;

    /* Fonts */
    text-transform: uppercase;

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


    transform: skewX(-5deg);
    user-select: none;
  }

  .payline-amount {
    color: #0b479a;
  }

  .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);
  }