#unity-container { position: absolute; width: 100%; height: 100%; display: none; }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: url('../../../Build/WebGL_s.jpg') }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 235px; height: 200px; background: url('../../Pirates_Load_Logo.png') no-repeat center; background-size: contain; }
#unity-progress-bar-empty { width: 141px; height: 18px; margin: 0 auto; background: url('../../progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('../../progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('../../webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('../../fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

::placeholder {
    color: grey!important;
    opacity: 1; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Edge 12 -18 */
    color: grey!important;
  }

.form-control {
    color: black!important;
    background-color: white!important;
}

.popup-container {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(3, 18, 27, 0.5); /* Black with opacity */
  }
  
  /* Pop-up content */
  .popup-content {
    position: relative;
    background-color: #03121B;
    color: #F5DEB3;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 500px; /* Maximum width of the pop-up */
    box-shadow: 0 10px 5px rgba(3, 18, 27, 0.3);
    border-radius: 10px;
  }
  
  .popup-content h3 {
    padding: 0px 5px 5px 0px;
    box-shadow: 0 10px 0px rgba(245, 222, 179, 0.048);
  }
  
  /* Close button */
  .close-button {
    position:relative;
    top: 10px;
    left: 240px;
    color: #F5DEB3;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .close-button:hover,
  .close-button:focus {
    color: #F5DEB3;
    text-decoration: none;
    cursor: pointer;
  }
  
  .popup-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Space between content and button */
  }
  
  .popup-footer button {
    background-color: #03121B;
    color: #F5DEB3;
    border: none;
    font-size: 25px;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 20px; /* Add margin to the top for spacing */
  }
  
  .popup-footer button:hover{
    background-color: #f5f5f5;
    color: #030303;
    box-shadow: 0 5px 1px rgba(245, 222, 179, 0.5);
  }
  
  #guiContainer, #offscreenIndicatorContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    pointer-events: none; }
  
  .pixiContainer:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease-in; }
  
  .offscreenIndicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    opacity: 0;
    background-image: url("../icons/offscreenIndicator.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 30px;
    transition: opacity 0.3s ease-in; }
  
  #tryAgain, #goHomeOnSink, #reconnect, #buyShip, #nameInput, #accountField, #halloffame, #shipCount, #etlogo, #numberShips, #menu, #copyright, #submenu {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1050; }
  
  #hoftitle {
    font-size: 25px;
    text-align: left; }
  
  #hoftitleS {
    font-size: 29px; }
  
  #playerEntry {
    color: green; }
  
  .gtEntry {
    color: #fc41fc; }
  
  #qgtEntry {
    color: #41c7fc; }
  
  #playerRank {
    font-size: 20px; }
  
  #etlogoS {
    top: 120px;
    left: 50%;
    height: 364px;
    width: 300px; }
  
  #etlogo {
    opacity: 1;
    left: 50%;
    top: 45%; }
  
  #menu {
    top: 0px;
    opacity: 0;
    height: 85px;
    width: 100%;
    background-color: black;
    color: white; }
  
  #halloffame {
    top: 110px;
    color: white;
    opacity: 1;
    left: 50%;
    text-align: center;
    height: 220px;
    width: 100%;
    text-shadow: 1px 1px black; }
  
  #numberShips {
    top: 77%;
    color: white;
    opacity: 1; }
  
  li {
    list-style-type: none; }
  
  #accountField {
    top: 24px;
    color: white;
    opacity: 1;
    left: 50%;
    text-align: right;
    width: 80%;
    pointer-events: all; }
  
  #accountInfo {
    text-align: center;
    overflow-y: auto; }
  
  #nftsInfo {
    text-align: center;
    overflow-y: auto; }
  
  #pirateName {
    font-size: 40px; }
  
  #gtprizes {
    background-image: url("../images/JOIN BATTLE_BUTTON1.png"); }
  
  #boardHeading {
    text-align: center; }
  
  #nameInput {
    pointer-events: all;
    opacity: 0;
    top: 85%;
    left: 50%;
    border-radius: 25px;
    height: 35px;
    width: 200px;
    padding-left: 10px;
    z-index: 1; }
  
  #shipCount {
    pointer-events: all;
    opacity: 1;
    top: 63%;
    color: white; }
  
  #buyShip {
    pointer-events: all;
    opacity: 1;
    top: 48%; }
  
  #copyright {
    opacity: 1;
    top: 99%;
    color: white;
    height: 50px;
    font-size: 12px;
    text-align: center; }
  
  #submenu {
    opacity: 1;
    top: 89%;
    color: white;
    height: 50px;
    pointer-events: all;
    text-decoration: none;
    background-color: transparent;
    text-shadow: 1px 1px black;
    font-size: 23px;
    text-align: center; }
  
  #goHomeOnSink {
    top: 60%; }
  
  a.linkHelp:link {
    text-decoration: underline;
    pointer-events: all; }
  
  a.linkHelp:visited {
    text-decoration: underline;
    pointer-events: all; }
  
  a.linkHelp:hover {
    text-decoration: underline;
    pointer-events: all; }
  
  a:link {
    color: white;
    background-color: transparent;
    text-decoration: none; }
  
  a:visited {
    color: white;
    background-color: transparent;
    text-decoration: none; }
  
  a:active {
    color: white;
    background-color: transparent;
    text-decoration: none; }
  
  #logoSmall {
    text-align: center; }
  
  .modal-content {
    background-color: #03121b;
    color: wheat; }
  
  .sbutton {
    position: relative;
    background-color: rgba(104, 178, 248, 0.2);
    padding: 0.2rem 1.8rem 0.1rem 1.8rem;
    margin: 2rem auto;
    font-size: 1.2rem;
    transition: all 0.5s ease-out;
    margin-right: 1.5rem;
    border: 0;
    color: white;
    outline: none;
    white-space: nowrap;
    width: 190px; }
    .sbutton:before {
      content: "";
      position: absolute;
      z-index: 10;
      left: -3rem;
      top: -2.6rem;
      width: 6rem;
      height: 7.5rem;
      background-image: url(../images/cta_glow_left.png);
      background-repeat: no-repeat;
      background-position: top;
      background-size: contain;
      pointer-events: none; }
    .sbutton:after {
      content: "";
      position: absolute;
      z-index: 10;
      right: -3rem;
      top: -2.6rem;
      width: 6rem;
      height: 7.5rem;
      background-image: url(../images/cta_glow_left.png);
      background-repeat: no-repeat;
      background-position: top;
      background-size: contain;
      transform: scaleX(-1);
      pointer-events: none; }
    .sbutton a {
      width: 100%;
      padding: 0.2rem 0.5rem;
      color: #fff;
      transition: all 0.1s ease-in; }
    .sbutton:hover {
      background: rgba(104, 178, 248, 0.4); }
      .sbutton:hover a {
        padding: 0.2rem 0.8rem; }
  
  .lostGame #tryAgain, .lostGame #goHomeOnSink {
    opacity: 1;
    pointer-events: all; }
  
  .tutorial .keysContainer:before, .tutorial .keysContainer:after {
    opacity: 1; }
  
  .hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 20rem;
    font-size: 12px;
    padding: 1rem;
    color: #fff;
    font-family: arial, sans-serif;
    opacity: 0;
    z-index: 1050;
    transition: all 0.5s ease-in; }
  
  .score {
    position: absolute;
    top: 20px;
    right: 0;
    width: 20rem;
    height: 5rem;
    font-size: 12px;
    padding: 1rem;
    color: #fff;
    font-family: arial, sans-serif;
    opacity: 0;
    transition: all 0.5s ease-in; }
    .score:before {
      content: "Straight Kills";
      position: absolute;
      top: -1.2rem;
      left: 1rem;
      font-size: 14px;
      font-weight: bold;
      opacity: 0.4; }
    .score .line {
      position: absolute;
      top: 0;
      left: 1rem;
      transition: all 0.2s ease-in;
      transform: translateY(0);
      opacity: 0.3; }
    .score .line.you {
      color: #efff00;
      opacity: 0.4; }
  
  .keysContainer {
    z-index: 10050;
    pointer-events: none;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%); }
    .keysContainer:before, .keysContainer:after {
      content: "";
      display: inline-block;
      opacity: 0;
      transition: all 0.5s ease-in; }
    .keysContainer:before {
      margin-right: 3rem; }
  
  .touch .keysContainer {
    display: none !important; }
  
  .fireButton {
    /*pointer-events: none;*/
    opacity: 0;
    transition: all 0.5s ease-in;
    background: #fff;
    width: 3rem;
    height: 3rem;
    position: absolute;
    bottom: 4.5rem;
    left: 90%;
    transform: translateX(-50%);
    border: 3px solid #ff2f95;
    border-radius: 5rem;
    z-index: 10052; }
    .fireButton:before {
      content: "FIRE";
      position: absolute;
      color: #ff2f95;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%); }
  
  .opacity_none {
    opacity: 0 !important;
    pointer-events: none; }
  
  .opacity_half {
    opacity: 0.6 !important;
    pointer-events: all; }
  
  .pc .keysContainer:after {
    width: 103px;
    height: 91px;
    background-image: url("../images/pc_keys.png");
    z-index: 10050; }
  
  .pc .keysContainer:before {
    width: 175px;
    height: 55px;
    background-image: url("../images/pc_space.png");
    z-index: 10050; }
  
  .mac .keysContainer:after {
    width: 119px;
    height: 64px;
    background-image: url("../images/mac_keys.png");
    z-index: 10050; }
  
  .mac .keysContainer:before {
    width: 193px;
    height: 64px;
    background-image: url("../images/mac_space.png");
    z-index: 10050; }
  
  body.gameActive .hud {
    opacity: 0.3; }
  
  body.gameActive .score {
    opacity: 1; }
  
  body.gameActive .offscreenIndicator {
    opacity: 0.8; }
  
  body.gameActive.touch .fireButton {
    opacity: 0.6;
    pointer-events: all; }
  
  .disconnected #reconnect {
    opacity: 1;
    pointer-events: all; }
  
  .disconnected #tryAgain, .disconnected #joinGame, .disconnected #goHomeOnSink {
    opacity: 0;
    pointer-events: none; }
  
  #snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #03121b;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1050;
    left: 50%;
    top: 30px;
    font-size: 17px;
    opacity: 0.8; }
  
  #snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s; }
  
  @-webkit-keyframes fadein {
    from {
      top: 0;
      opacity: 0; }
    to {
      top: 30px;
      opacity: 0.8; } }
  
  @keyframes fadein {
    from {
      top: 0;
      opacity: 0; }
    to {
      top: 30px;
      opacity: 0.8; } }
  
  @-webkit-keyframes fadeout {
    from {
      top: 30px;
      opacity: 0.8; }
    to {
      top: 0;
      opacity: 0; } }
  
  @keyframes fadeout {
    from {
      top: 30px;
      opacity: 0.8; }
    to {
      top: 0;
      opacity: 0; } }
  
  /*Downloaded from https://www.codeseek.co/flamekuchen/floating-discord-button-Wdmayr */
  .floating-btn {
    color: white;
    background: #7289da;
    border-color: #7289da;
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 2.0rem;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 4.2rem 4.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: width 0.5s ease; }
  
  .floating-btn .expanded {
    opacity: 0;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 18px;
    transition: opacity 0.25s ease; }
  
  .floating-btn:hover {
    width: 26rem; }
  
  .floating-btn:hover .icon {
    opacity: 0; }
  
  .floating-btn:hover .expanded {
    opacity: 1; }
  
  .floating-btn .fa-discord {
    padding-top: .4rem; }
  
  .modal {
    top: 10vh !important; }
    .modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6, .modal .h1, .modal .h2, .modal .h3, .modal .h4, .modal .h5, .modal .h6 {
      color: inherit; }
  
  .MuiInputBase-input {
    z-index: 10; }
  
  .spinner-outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    /*dim the background*/ }
  
  .spinner {
    position: absolute;
    left: 47.5%;
    top: 45%;
    height: 60px;
    width: 60px;
    margin: 0px auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left: 6px solid rgba(0, 174, 239, 0.15);
    border-right: 6px solid rgba(0, 174, 239, 0.15);
    border-bottom: 6px solid rgba(0, 174, 239, 0.15);
    border-top: 6px solid rgba(250, 250, 17, 0.8);
    border-radius: 100%; }
  
  .spinner-msg {
    color: #fafa11;
    font-weight: bold;
    padding-top: 100px; }
  
  @-webkit-keyframes rotation {
    from {
      -webkit-transform: rotate(0deg); }
    to {
      -webkit-transform: rotate(359deg); } }
  
  @-moz-keyframes rotation {
    from {
      -moz-transform: rotate(0deg); }
    to {
      -moz-transform: rotate(359deg); } }
  
  @-o-keyframes rotation {
    from {
      -o-transform: rotate(0deg); }
    to {
      -o-transform: rotate(359deg); } }
  
  @keyframes rotation {
    from {
      transform: rotate(0deg); }
    to {
      transform: rotate(359deg); } }
  
  .warning_msg {
    color: #fff;
    background-color: red;
    padding: 2px;
    display: block; }
  
  .btn-switch-network {
    border: 2px solid #fff !important; }
  
  .btn-switch-network:hover {
    font-weight: bold !important; }
  
  .btn-primary {
    min-width: 180px; }
  
  h2.nfts_header {
    font-size: 1.4rem; }
  
  /* .mobileKeys {
      position: fixed;
      top:50vh;
      left: 50%;
      display: grid;
      min-width: 128px;
      min-height: 128px;
      z-index:10051;
    }
  
  .game_keys {
      display: block;
    width: 32px;
    height: 32px;
  }*/
  .mobile-keys-container {
    position: absolute;
    bottom: 4.2rem;
    display: grid;
    z-index: 10051;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    align-items: center; }
    .mobile-keys-container .mobile-keys {
      /*margin: 0 auto;*/
      display: grid;
      grid-template-rows: 50px 50px;
      grid-template-columns: 50px 50px 50px; }
      .mobile-keys-container .mobile-keys .game_keys {
        padding: 10px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center; }
      .mobile-keys-container .mobile-keys .game_keys:focus {
        border: none;
        outline: none; }
      .mobile-keys-container .mobile-keys .up_key {
        width: 32px;
        height: 32px;
        background-position: center;
        background-repeat: no-repeat; }
      .mobile-keys-container .mobile-keys .up_key.up_on {
        background-image: url("../images/up_on.png"); }
      .mobile-keys-container .mobile-keys .up_key.up_off {
        background-image: url("../images/up.png"); }
      .mobile-keys-container .mobile-keys .left_key {
        background-image: url("../images/left.png");
        width: 32px;
        height: 32px;
        background-position: center;
        background-repeat: no-repeat; }
      .mobile-keys-container .mobile-keys .right_key {
        background-image: url("../images/right.png");
        width: 32px;
        height: 32px;
        background-position: center;
        background-repeat: no-repeat; }
  
  .noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                    supported by Chrome, Edge, Opera and Firefox */ }
  
  .noselect:focus {
    border: none;
    outline: none; }
  
  .warmup_countdown {
    margin: 0 auto;
    width: 100%;
    position: absolute;
    top: 48%;
    color: white;
    font-size: 23px;
    font-weight: bold;
    text-align: center;
    z-index: 10051; }
  
  .hidden_div {
    visibility: hidden; }
  
  .visible_div {
    visibility: visible; }
  
  .piratesHelp {
    /*margin-left: 5px;*/
    float: left;
    height: 125px;
    width: 120px;
    margin-right: 5px; }
  
  .main_tutorial_container {
    width: 100%;
    height: auto;
    padding: 1%; }
  
  /*where the text goes*/
  .div_tutorial_container {
    display: flex;
    flex-direction: row; }
    .div_tutorial_container .tutorial_step {
      text-align: left;
      padding-left: 5px; }
  
  @media only screen and (max-width: 380px) {
    .tutorialClose {
      white-space: normal; } }
  
  .video_intro {
    min-width: 280px;
    min-height: 250px;
    margin: 0 auto;
    text-align: center;
    color: #fff; }
    .video_intro .iframe_intro {
      width: 100%;
      min-height: 250px;
      border: none; }
  
  .introVideoModalCloseBtn, .tutorialNext, .tutorialPrevious {
    background-color: #fff;
    color: #000; }
  
  .invisible {
    display: none; }
  
  .main_blue_back {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background-image: url("../clouds1.png");
    background-repeat: repeat; }
  
  #audio-status {
    z-index: 5000;
    width: 32px;
    height: 32px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px; }
    #audio-status.pause-sound {
      background-image: url("../images/pause-sound.png"); }
    #audio-status.play-sound {
      background-image: url("../images/play-sound.png"); }
  
  .my_nfts {
    display: contents; }
  
  .nfts_list_ul, .nfts_list_ul_details {
    display: flex;
    flex-wrap: wrap; }
  
  /*.nfts_list_ul_details  {
    padding-left: 0;
  }*/
  .nfts_list, .nfts_list_details {
    display: flex;
    width: 100%;
    margin: 0 auto;
    flex-direction: column; }
  
  .nfts_list {
    margin-top: 5px; }
  
  /* 4 items per row on nfts list*/
  .nfts_list, .nft_property {
    text-align: center;
    flex: 0 0 32%; }
  
  .nft_property {
    background-color: #fff;
    color: #000;
    border: 2px solid #000;
    border-radius: 5px;
    height: 48px; }
  
  /*center img*/
  .nfts_list img {
    margin: 0 auto !important; }
  
  .nfts_list_details {
    border: none; }
  
  .img64thumb {
    width: 64px !important;
    max-width: 64px;
    height: auto; }
  
  .img96thumb {
    width: 96px !important;
    max-width: 96px;
    height: auto; }
  
  .img400thumb {
    width: 400px !important;
    height: auto;
    margin: 0 auto; }
  
  .nfts_list img:hover {
    cursor: pointer; }
  
  #nftModal {
    top: 0vh !important; }
  
  body.modal-open {
    overflow: hidden; }