/* TO EDIT*/

   /* Top Bar Settings*/
   .top-bar{
     /* background-image: linear-gradient(to top, #c00f33 0%, #fd2439 80%, #fd2439 100%); */
     background-image: linear-gradient(to top, #166a8f 0%, #64beff 80%, #64beff 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, #166a8f 0%, #64beff 80%, #64beff 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, #c00f33 0%, #fd2439 80%, #fd2439 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("/games/cruising/image/game-board/8_Cruising_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: 140px;
    height: 355px;

    /* Misc */
    margin: 1ch;
  }

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

  .first-door{
    /* Background Image Settings */
    background-image: url("/games/cruising/image/game-board/8_Cruising_GameBoard_Side1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position: center bottom;
  }

  .last-door {
    /* Background Image Settings */
    background-image: url("/games/cruising/image/game-board/8_Cruising_GameBoard_Side2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position: center bottom;
  }

  /* Bottom Bar Settings */

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

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

    /* Color */
    background-image: linear-gradient(to top, #166a8f 0%, #64beff 80%, #64beff 100%);
   
    
    /* Size */
    width: 110px;
    height: 50px;

    /* 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, #c00f33 0%, #fd2439 80%, #fd2439 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, #166a8f 0%, #64beff 80%, #64beff 100%);
    
    /* Size */
    width: 45px;
    height: 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;
    align-items: center;

    /* Size */
    height: 100%;
  }
  
  .win-display, .credits-display{
     background-image: linear-gradient(to top, #c00f33 0%, #fd2439 80%, #fd2439 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: #fd2439;
  }

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