/* ********** */
/* HTML STUFF */
/* ********** */

body {
    background: #07070f;
    font-family: "Share Tech Mono", monospace;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px);
}

h1, h2, h3, h4, h5 {
    font-family: "Press Start 2P", monospace;
}

/* *************** */
/* BOOTSTRAP STUFF */
/* *************** */


.form-control, .form-control:focus {
    background: rgb(28, 16, 16);
    border: 1px solid rgba(255, 40, 40, 0.2);
    color: rgb(255, 224, 224);
    outline: none;
    font-family: "Exo 2", sans-serif;
    border-radius: 0;
    height: 50px;
}

.form-control::placeholder {
    color: rgba(255, 224, 224, 0.4);
}

.btn-login, .btn-login:hover {
    color: black;
    background: rgb(255, 40, 40, 0.9);
    border: 0px;
    border-radius: 0;
    height: 50px;
}

.form-group {
    color: rgb(170, 102, 102);
    font-family: "Share Tech Mono", monospace;
    text-align: left;
}


/* ************ */
/* CUSTOM STUFF */
/* ************ */

.bg-custom {
    background: rgb(17, 8, 8);
    box-shadow: rgba(255, 40, 40, 0.07) 0px 0px 50px;
    border: 1px solid rgba(255, 40, 40, 0.18);
    color: white;
}

.btn-logout {
    color: rgb(170, 102, 102);
    font-weight: bold;
}

.btn-custom,
.btn-custom:hover,
.btn-custom-no-disable.disabled,
.btn-custom-no-disable:active,
.btn-custom-no-disable:disabled,
.btn-custom-no-disable:hover,
.btn-custom-no-disable:focus-visible {
    border: 1px solid rgba(255, 40, 40, .7) !important;
    border-radius: 0 !important;
    background: rgba(255, 40, 40, .1) !important;
    color: rgb(255, 40, 40) !important;
    opacity: 1 !important;
}


.btn-custom-md {
    height: 42px;
}

.btn-custom-lg {
    height: 48px;
}

/*
.btn-custom:hover {
    background: rgba(255, 40, 40, .3);
    border-radius: 0;
    border: 1px solid rgba(255, 40, 40, .7);
}*/

.btn-custom-secondary,
.btn-custom-secondary:hover {
    border: 1px solid rgba(255, 40, 40, .7);
    border-radius: 0;
    height: 48px;
    color: white !important;
    background: rgba(255, 40, 40, .7);
}
/*
    color: rgba(255, 40, 40, .9);
    border: 1px solid rgba(255, 40, 40, .7);
    border-radius: 0;
    height: 48px;
}
*/

.btn-google,
.btn-google:active,
.btn-google:hover,
.btn-google:target,
.btn-google:focus,
.btn-google:focus-visible
{
    width: 100%;
    background: white !important;
    color: black !important;
    font-family: "Exo 2", sans-serif !important;
    height: 48px;
    padding-top: 10px;
}

.form-custom {
    height: 42px;
    border: 1px solid rgba(255, 40, 40, .7);
}

.border-custom {
    border-color: rgba(255, 40, 40, 0.25) !important;
}

.initial {
    color: rgb(170, 102, 102);
    margin-top: 1px !important;
}

.initial h1 {
    font-weight: bold;
    color: rgba(255, 40, 40, .9);
    font-size: 24px;
    text-transform: uppercase;
}

.initial h4 {
    font-size: 14px;
    text-transform: uppercase;
}

.initial h5 {
    font-size: 14px;
    text-transform: uppercase;
}

.initial a {
    color: rgba(255, 40, 40, 0.7);
}

.initial-title h1 {
    color: rgba(255, 40, 40, 0.8) !important;
}

.initial-subtitle i {
    color: rgba(255, 40, 40, 0.9);
}

.initial-content {
    border: 1px solid rgba(255, 40, 40, 0.30);
    background: rgb(17, 8, 8);
    box-shadow: rgba(255, 40, 40, 0.07) 0px 0px 50px;
}

.initial-content-login {
    border: 1px solid rgba(255, 40, 40, 0.30);
    background: rgb(17, 8, 8);
    box-shadow: rgba(255, 40, 40, 0.07) 0px 0px 50px;
    width: 90% !important;
}

.initial-content h4 {
    color: rgb(255, 224, 224);
}

.initial-content p {
    font-size: 14px !important;
}

.player-box {
    border: 1px solid rgba(255, 40, 40, 0.45);
    background: rgb(37, 18, 18);
    box-shadow: rgba(255, 40, 40, 0.07) 0px 0px 50px;
}

.player-box h4 {
    color: rgb(255, 224, 224);
}

.player-1 {
    color: rgb(231, 76, 60);
    font-weight: bold;
    text-transform: uppercase;
}

.btn-player-1 {
    background: rgb(231, 76, 60);
    border: 0px;
    font-weight: bold;
    color: white;
    border-radius: 10px !important;
    height: 48px;
}

.btn-player-1:disabled {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid gray;
    font-weight: normal;
}

.player-2 {
    color: rgb(41, 128, 185);
    font-weight: bold;
    text-transform: uppercase;
}

.btn-player-2 {
    background: rgb(41, 128, 185);
    border: 0px;
    font-weight: bold;
    color: white;
    border-radius: 10px !important;
    height: 48px;
}

.btn-player-2:disabled {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid gray;
    font-weight: normal;
}

.initial-credits {
    color: rgb(255, 204, 0) !important;
}

.navbar-custom {
    color: rgb(255, 40, 40);
    height: 96px;
}

.navbar-custom img {
    height: 48px;
}

.navbar-custom a, .navbar-custom a:hover {
    color: rgb(255, 40, 40) !important;
}

.nav-credits {
    background: rgba(255, 204, 0, 0.08);
    border: 1px solid rgba(255, 204, 0, 0.5);
}

.nav-credits a {
    color: rgb(255, 204, 0) !important;
    font-family: "Share Tech Mono", monospace !important;
}

.nav-profile {
    background: rgba(255, 40, 40, 0.1);
    border: 1px solid rgba(255, 40, 40, 0.2);
}

.nav-profile i {
    color: rgba(255, 40, 40, 0.8);
}

.nav-game {
    background: rgba(255, 40, 40, 0.1);
    border: 1px solid rgba(255, 40, 40, 0.2);
    color: rgba(255, 204, 0, 0.9);
}

.nav-nickname {
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 80px;
}

.card-custom {
    border-radius: 0 !important;
    border: 1px solid rgba(255, 40, 40, 0.18);
    background: rgb(17, 8, 8);
    box-shadow: rgba(255, 40, 40, 0.07) 0px 0px 50px;
    color: rgb(255, 224, 224);
}

.card-label {
    color: rgb(170, 102, 102) !important;
}

.card-credits {
    color: rgb(255, 204, 0) !important;
    font-family: "Share Tech Mono", monospace !important;
}

.card-price {
    font-family: "Exo 2", sans-serif;
    font-weight: bold;
}

.nav-profile {
    background: rgba(255, 40, 40, 0.1);
    border: 1px solid rgba(255, 40, 40, 0.2);
}

.nav-profile i {
    color: rgba(255, 40, 40, 0.8);
}

.nav-game {
    background: rgba(255, 40, 40, 0.1);
    border: 1px solid rgba(255, 40, 40, 0.2);
    color: rgba(255, 204, 0, 0.9);
}

.toast-container {
    z-index: 10;
}

.toasty {
    border-radius: 0;
    background: rgb(17, 8, 8);
    box-shadow: rgba(255, 40, 40, 0.3) 0px 0px 24px;
}

.toasty-success {
    border: 1px solid rgba(170, 102, 102, .8);
    color: rgba(170, 102, 102, .8);
}

.toasty-error {
    border: 1px solid red;
    color: red;
}

.toasty .button {
    color: red;
}

.custom-width-block {
  width: 100%;
}

  /* Switches to 50% width at the standard Bootstrap MD breakpoint */
@media (min-width: 1080px) {
    .custom-width-block {
        width: 1000px;
    }
}

.login-title {
    border-bottom: 1px solid rgba(255, 40, 40, 0.1);
}

.login-btn {
    width: 50%;
    border-bottom: rgb(170, 102, 102) !important;
}

.login-btn a {
    width: 50%;
    text-decoration: none !important;
}

.login-btn-active {
    border-bottom: 2px solid rgba(255, 40, 40, 0.8) !important;
    font-weight: bold !important;
}

.the-icons {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.the-icons-google {
    width: 18px;
    height: 18px;
    margin-top: -5px;
}

.the-icons-md {
    width: 36px;
    height: 36px;
}

.the-icons-lg {
    width: 48px;
    height: 48px;
}

.errorlist {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    margin-top: 5px;
}

.errorlist li {
    margin: 0px !important;
    padding: 0px !important;
}

.pix-amount {
    color: rgb(255, 224, 224);
}

#pix-code {
    border: 1px solid rgba(170, 102, 102, 0.5);
    background: rgba(170, 102, 102, 0.15);
    color: rgba(255, 255, 255, 0.5);
    font-size: 9px !important;
}

#pix-timer {
    color: rgb(255, 204, 0) !important;
    font-size: 2rem !important;
}

.dropdown-custom-primary a,
.dropdown-custom-primary a:hover,
.dropdown-custom-primary a:focus,
.dropdown-custom-primary a:target
{
    color: rgba(255, 40, 40, 0.7) !important;
    background: none;
}

.dropdown-custom:active,
.dropdown-custom:focus,
.dropdown-custom:focus-visible,
.dropdown-custom:focus-within,
.dropdown-custom:hover,
.dropdown-custom:target,
.dropdown-custom:visited,
.dropdown-custom
{
    border: 0 !important;
}

.dropdown-custom-primary
{
    border: 1px solid rgba(255, 40, 40, 0.30);
    background: rgb(17, 8, 8);
    box-shadow: rgba(255, 40, 40, 0.07) 0px 0px 50px;
    font-size: 12px !important;
}

.dropdown-divider-custom {
    border-top: 1px solid rgba(255, 40, 40, 0.30);
}

.dropdown-toggle.caret-off::after {
    display: none;
}

.link-button,
.link-button:active,
.link-button:focus,
.link-button:hover,
.link-button:target,
.link-button:visited
{
    background: none;
    border: none;
    color: rgba(255, 40, 40, 0.7);
    cursor: pointer;
    padding: 0;
    font: inherit;
}

.disabled-link {
    pointer-events: none;
    cursor: default;
}

.table-custom td,
.table-custom th {
    background: transparent;
    border-bottom: 1px solid rgba(255, 40, 40, 0.4);
    font-family: "Exo 2", sans-serif;
}

.table-custom th {
    color: rgba(255, 40, 40, 0.7);
}

.table-custom td {
    color: rgb(170, 102, 102);
}

.list-group-item-custom {
    background: transparent;
    color: rgba(255, 40, 40, 0.7);
    border: 1px solid rgba(255, 40, 40, 0.4);
    border-radius: 0 !important;
}

.list-group-item-custom p {
    font-family: "Exo 2", sans-serif;
    color: rgb(170, 102, 102);
}

.list-group-item-custom a {
    color: rgb(170, 102, 102);
}

.list-group-item-custom h5 {
    font-weight: bold;
}

#table-code {
    font-family: "Share Tech Mono", monospace !important;
    font-weight: bold;
}