body.grid, body.history, .bg-grid {
    background:#222222;    
    background-image: url(/images/bg_dots.png), -webkit-linear-gradient(to top, #2c3e50, #222222);
    background-image: url(/images/bg_dots.png), linear-gradient(to top, #2c3e50, #222222);
    background-position: 0;
    background-repeat: no-repeat;
    min-height: 100vh;
}

body.grid.skirmishtrue, body.history.skirmishtrue {
    background:#240b36;    
    background-image: url(/images/bg_dots.png), -webkit-linear-gradient(to top, #c31432, #240b36, #222222);
    background-image: url(/images/bg_dots.png), linear-gradient(to top, #c31432, #240b36, #222222);
    background-position: 0;
    background-repeat: no-repeat;
    min-height: 100vh;
    
    /*background: #bdc3c7;
    background: url(/images/bg_dots.png), -webkit-linear-gradient(to right, #2c3e50, #bdc3c7); 
    background: url(/images/bg_dots.png), linear-gradient(to right, #2c3e50, #bdc3c7); 

    background: #304352; 
    background: url(/images/bg_dots.png),-webkit-linear-gradient(to right, #2c3e50, #304352);
    background: url(/images/bg_dots.png),linear-gradient(to right, #2c3e50, #304352); 
    */

    

}

body.grid.skirmishfalse main, body.history.skirmishfalse main {
    padding-top:0 !important;
}

body.grid.skirmishfalse main:before, body.history.skirmishfalse main:before {
    content: 'G R I D  G A M E';
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    width: 100%;
    display: block;
    height: 48px;
    padding-top: 6px;
    color:#454343;
}

body.grid.skirmishtrue .next-game {
    background-position: right top !important;
}


body.grid.skirmishtrue:before, body.history.skirmishtrue:before {
    content: 'S K I R M I S H';
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    width: 100%;
    display: block;
    height:23px;
    padding-top:5px;
    color:#454343;
}

/*
body.grid, body.history {
    background: #000;  
    background-image: url(/images/bg_shop.jpg);
    background-repeat: repeat-x;
}


body.socials {
    background: #000;  
    background-image: url(/images/bg_wall.jpg);
    background-repeat: repeat-x;
}

body.shop, body.collection {
    background: #000;  
    background-image: url(/images/bg_socials.jpg);
    background-repeat: repeat-x;
}
*/

div.first-body {
    min-height:1000px;
}

.bg-grid {
    background-position-y:inherit;
    background-size: contain;
    background-repeat: repeat !important;
}


@media (max-width: 768px) {
    body {
        background:#222222;
    }
    div.bg-card {
        background-image: none!important;
    }

    body.grid, body.history,body.shop, body.collection, body.socials {
        background-image: none;
    }

}

span[data-toggle="tooltip"] {
    cursor: pointer;
}

@media (min-width: 768px){
    .ml-md--1, .mx-md--1 {
        margin-left: -0.5rem !important;
    }


}

@media (min-width: 992px){

    .mw350 {
        max-width:350px
    }


    .mw370 {
        max-width:370px
    }
    
    .mw500 {
        max-width:500px
    }    

}

.bg-standard {
    background:#313131;
}

.bg-black {
    background:#000;
}

.bg-tv {
    background:url('/images/bg_tv.svg');
}

div.tv-border {
    background:url('/images/bg_tv.svg');
    padding:10px 5px;
    background-size: cover;
  }

span.crown {
width:16px;
height:13px;
display: inline-block;
}

span.crown::after {
 position: absolute;
 content:' ';
 background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMC8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvVFIvMjAwMS9SRUMtU1ZHLTIwMDEwOTA0L0RURC9zdmcxMC5kdGQnPjxzdmcgIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBpZD0iTGF5ZXJfMSIgdmVyc2lvbj0iMS4wIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoICBmaWxsPSJncmV5IiBzdHJva2U9ImdyZXkiIGQ9Ik01LjQsMTguM0w0LDEwbDUsMmwzLTZsMyw2bDUtMmwtMS40LDguM2MtMC4yLDEtMSwxLjctMiwxLjdsLTkuMywwQzYuNCwyMCw1LjUsMTkuMyw1LjQsMTguM3oiLz48Y2lyY2xlIGZpbGw9ImdyZXkiIHN0cm9rZT0iZ3JleSIgY3g9IjEyIiBjeT0iNiIgcj0iMiIvPjxjaXJjbGUgIGZpbGw9ImdyZXkiIHN0cm9rZT0iZ3JleSIgY3g9IjIwIiBjeT0iMTAiIHI9IjIiLz48Y2lyY2xlICBmaWxsPSJncmV5IiBzdHJva2U9ImdyZXkiIGN4PSI0IiBjeT0iMTAiIHI9IjIiLz48L3N2Zz4=');
 width:16px;
 height:16px;
}

h4:not(.std):not(.modal-title) {
    margin-bottom:1.5rem;
    padding:10px 0 5px 0 !important;
    font-size:1.3rem!important;
    color: #FF9507;
}

h5.date {
background-color:#000;
color:#fff;
display:inline-block;
}

h2.card-headline, .gold-header {
    color:#FF9507;
    font-weight: 100;
}

h2.card-headline b {
    font-weight: 900;
}

.badge-headline {
    font-weight: 100;
    color:#ccc !important;
}

.badge-headline b {
    font-weight: 900;
    color:#fff !important;
}

.opaque {
    opacity: .8;
}

.opaquer {
    opacity: .6;
}

.card-header-shop {
    font-size: 1.5rem!important;
    padding: 2rem;
    background-image: url(/images/bg_footer_2.jpg);    
}

.header-faction-collection {
    background-image: url(/images/bg_fire_overlay.jpg);    
}

.img-avatar {
    border-radius:50%;
    max-width:48px;
}

.discord-card {
border-radius:20%;
}

.bg-hover-light:hover .bg-white, .bg-hover-light:hover {
    background-color:#f7f7f7 !important;
}

div.actions {
    border: 3px dashed #e18039;
    padding:10px;
    display:inline-block;
}

div.actions::before {
    content:"";
    width:40px;
    height:0px;
    border-top:2px dashed #e18039;
    position: absolute;
    margin-top: 15px;
    left: -40px;
}

div.waypoint {
    margin-top:10px;
    background-color: #9a2607;
    padding:5px;
    display: inline-block;
    width:100px;
    text-align: center;
}

div.waypoint::before {
    content:"";
    width:40px;
    height:0px;
    border-top:2px dashed #9a2607;
    position: absolute;
    margin-top: 15px;
    left: -40px;
}

div.waypoint::after {
    content:"";
    width:200px;
    height:0px;
    border-top:2px dashed #9a2607;
    position: absolute;
    margin-top: 15px;
    left: 100px;
}


div.actions.black {
    border: 3px dashed #ccc !important;
}

div.actions.black::before {
    border-top:2px dashed #ccc !important;
}



div.bg-girl-right {
background-image:url(/images/bg-girl-right.png);
background-repeat: no-repeat;
background-position-x: right;
background-size: contain;
}

div.bg-scavenger-card {
    background-image:url(/images/bg-scavenger-card.jpg);
    background-repeat: no-repeat;
    background-position-x: right;    
    background-size: contain;
}

div.bg-reaper-card {
    background-image:url(/images/bg-reaper-card.jpg);
    background-repeat: no-repeat;
    background-position-x: right;    
    background-size: contain;
}

div.bg-land-card {
    background-image:url(/images/bg-land-card.jpg);
    background-repeat: no-repeat;
    background-position-x: right;    
    background-size: contain;
}

div.bg-footer-dark {
    background-image:url(/images/bg_footer_2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

div.bg-cards {
    background-image:url(/images/bg_fire_overlay.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius:15px;
}

div.bg-wall {
    background-image:url(/images/bg_footer_2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}


table.grid tr td {
    width:100px;
    height:100px;
    vertical-align: middle;
    text-align: center;
    padding:0;
}

div.table-scores-container {
    float:left;
    width:400px;
    margin-right:10px;
}

div#table-holder, div.table_holder {
    overflow:hidden;
}

.button-container .button {
    display: inline-block;
    width: 24px;
    height: 24px;
    font-size: 18px;
    line-height: 19px;
    border: 1px solid;
    border-radius: 5px;
    text-align: center;
    background: white;
}

.button-container .button a {
    color: #000 !important;
    text-decoration: none !important;
}

a.text-dark:hover {
    text-decoration: none !important;
}

table.grid-scores tr td {
    width:100px;
    height:100px;
    padding:0;
}

table.grid-scores tr td.moveable {
    border:3px dotted #a85038;
}

table.grid-scores tr td.last_sq {
    box-shadow:inset 0px 0px 0px 3px #a85038;
}


table.grid-scores tr td > span:nth-child(1) {
    display:block;
    text-align: center;
    color: #999;
}

table.grid-scores tr td > span:nth-child(2) {
    display:block;
    text-align: center;
    color: #999;
    font-size:9px;
}

table.grid-scores tr td > span.moves {
    display:block;
    padding:4px;
}

span.mini_move {
    border:1px solid #000;
    border-radius:2px;
    padding:2px 4px 2px 4px;
    font-size:10px;
    display: inline-block;
    margin-bottom:2px;
    width:24px;
    height:24px;
    text-align: center;
    border-top:5px solid #666;
    vertical-align: bottom;
}

span[class*=attacks-]::before {
    position: absolute;
    border-radius: 3px;
    height: 12px;
    width: 9px;
    background-color: #666;
    color: white;
    margin-top: -11px;
    margin-left: 8px;
    line-height: 13px;
    font-size: 9px; 
}

span.attacks-0::before {
    content:"0";
    background-color: red;
    color:white;
}

span.attacks-6::before {
    content:"6";
}

span.attacks-5::before {
    content:"5";
}

span.attacks-4::before {
    content:"4";
}

span.attacks-3::before {
    content:"3";
}

span.attacks-2::before {
    content:"2";
}

span.attacks-1::before {
    content:"1";
}


span.mini_move.attack {
    border-top:5px solid red;
}

span.mini_move.scavenge {
    border-top:5px solid green;
}

span.mini_move.bomb {
    border-top:5px solid rgb(219, 219, 3);
}
span.mini_move.evade {
    border-top:5px solid rgb(79, 11, 161);
}
span.mini_move.unknown {
    background-color:transparent;
    border:1px solid #000;
}

span.mini_move.unknown.avatar {
    border:none;
}

span.mini_move.can_bomb {
    background-color:transparent;
    border:1px solid #a51333 !important;
}


table.grid tr td span.location small {
    position: relative;
    display: block;
    margin-top: -50px;
    color: #999;
    padding-bottom: 15px;
    margin-left: -5px;
}

table.grid tr td span.points {
    padding-top:10px;
    text-align:center;
}

table.grid tr td span {
    margin-left:-10px;
}

tr.divider td {
    border-top:1px  solid #f7f7f7;
}

.links a {
    color: #e4e4e4;
    padding: 10px 25px;
    font-weight: 600;
    text-decoration: none;
}

a:not(.nav-link):not(.dropdown-item):not(.text-dark):not(.text-twitter) {
    color: #e4e4e4 !important;
}

a.link {
    color: #f7f7f7 !important;
    text-decoration: underline !important;
}

.text-twitter {
    color:rgb(0, 111, 214);
}

a:hover {
    color: inherit !important;
}

.dropdown-item {
    color: rgba(255, 255, 255, 0.6) !important;
}

.dropdown-item.active {
    color: rgba(255, 255, 255, 1) !important;
}

.alert-info a.link {
    color:#1b4f72 !important;
}

.bootstrap-autocomplete a {
    cursor: pointer;
}

ul.col3 {
        columns: 3;
        -webkit-columns: 3;
        -moz-columns: 3;
}

ul.h5 li {
   font-size: 1.25rem;
}

div.move {
border:1px solid #444;
border-radius:5px;
}

span.has_desc::after {
    /*position: absolute;
    content:"";
    background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyNCIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEwMjguNCkiPjxwYXRoIGQ9Im0yMiAxMmExMCAxMCAwIDEgMSAtMjAgMCAxMCAxMCAwIDEgMSAyMCAweiIgZmlsbD0iIzI5ODBiOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxMDI5LjQpIi8+PHBhdGggZD0ibTIyIDEyYTEwIDEwIDAgMSAxIC0yMCAwIDEwIDEwIDAgMSAxIDIwIDB6IiBmaWxsPSIjMzQ5OGRiIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEwMjguNCkiLz48cGF0aCBkPSJtMTEgMTAzNS40djJoMnYtMmgtMnptLTEgNC0xIDFoMnY2aC0ydjFoMSA0IDF2LTFoLTJ2LTdoLTN6IiBmaWxsPSIjMjk4MGI5Ii8+PHBhdGggZD0ibTExIDZ2Mmgydi0yaC0yem0tMSA0bC0xIDFoMnY2aC0ydjFoMSA0IDF2LTFoLTJ2LTdoLTN6IiBmaWxsPSIjZWNmMGYxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEwMjguNCkiLz48L2c+PC9zdmc+');
    background-size: cover;
    width:11px;
    height:11px;
    margin-left:2px;*/
}

b.played {
    border:1px solid #444;
    border-radius:5px;
    padding:2px;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #fff;
    background-color: #303030;
}

ul.nav-tabs.active-parent {
    border-bottom:2px solid #383838;
}

ul.nav-tabs.active-parent .nav-link.active {
    background-color: #383838;
}

.tabbable .nav-tabs {
    overflow-x: auto;
    overflow-y:hidden;
    flex-wrap: nowrap;
 }
 .tabbable .nav-tabs .nav-link {
   white-space: nowrap;
 }

 .scroller {
    text-align: center;
    cursor: pointer;
    display: none;
    white-space: no-wrap;
    vertical-align: middle;
    padding: 0;
    margin-right: -15px;
    margin-top: 4px;
  }

 .card-header-tabs {
    margin-bottom: -0.78rem;
 }

 .card-header {
    font-size:1rem;
 }


 .card-header-smaller {
    font-size:1rem;
 }

.toast-header .nav-tabs .nav-link.active, .toast-header .nav-tabs .nav-item.show .nav-link {
    color: #fff;
    background-color: #444;
}

.shop-item-header {
    color: #fff;
    background-color: #444;
}

.stick-to-bottom {
    position: absolute;
    bottom:20px;
    left:50%;
    transform: translateX(-50%);
}

a.nav-link, a.nav-link:hover {
    color: #fff;
}

.toast {
    border: 1px solid rgba(0, 0, 0, 0.4) !important;
    max-width: 100% !important;
opacity: 1 !important;
}

.shop-toast {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.card.toast {
    flex-basis: auto!important;
}

.card .card {
    border: 1px solid rgba(0, 0, 0, 0.4);
    /*box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 10%);*/
    padding-top: 0px !important;
}

div.border-top {
    border-top: 1px solid rgba(0, 0, 0, 0.4);
}

form {
    border: 1px solid #444;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
}

.nav-link {
    padding: 0.5rem 1rem;
}

ul{
    margin-left:10px;
  }

  .flex-grow {
    flex-grow: 1
  }

div.twitter-tweet-rendered {
    margin:0!important;
}

div.hover-container {
    overflow: hidden;
}

img.scale-hover {
    transition: .4s;
  }

img.scale-hover:hover {
    transform: scale(1.1);
}

div.click-for-info {
    width:20px;
    height:16px;
    margin-top: -15px;
    background-repeat: no-repeat;
    background-position: right;
    position: relative;
    cursor: pointer;
    font-size:9px;
    text-align: right;
    text-decoration: underline;
    background-color: #222222;
    opacity: 0.7;
    float: right;
}

.form-control:focus {
    font-weight: normal!important;
}

div.wallet-item-container {
    min-height:200px;
}

div.alert-warning a.link {
    color: #7e5109 !important;
    text-decoration: underline !important;
}

span.bio_scroller {
    display: block;
    max-height:100px;
    overflow-y: auto;
    width:100%;
}

img.grid-avatar {
    width:100px;
    height:100px;
}

img.welcome-avatar {
    max-width:350px;
}

  .socials .twitter-card img {
      max-width: 100%;;
  }

  ul.nav-tabs.active-parent {
      border-bottom: 2px solid #383838;
  }

.btn-modal {
    position: relative;
    margin-top: -100px;
    margin-right: 10px;
}

.btn-secondary:hover {
    background-color: #1c1c1c!important;
}

div.user-avatar-1:before, div.user-avatar-vault:before {
    content: 'Minted';
    width: 88%;
    height: 95%;
    background-color: #666;
    position: absolute;
    opacity: 0.8;
    /* padding: 10px; */
    top: 5%;
    padding-top: 90%;
    padding-left: 65%;
    font-size: 10px;
    text-transform: uppercase;
    cursor: pointer;
}

div.user-avatar-vault:before {
    content: 'Vault';
    opacity: 0.8;
}

/*
table td.selected.box1 {
    border-top:2px solid #a6a6a6 !important;
    border-left:2px solid #a6a6a6 !important;
}

table td.selected.box2 {
    border-top:2px solid #a6a6a6 !important;
}

table td.selected.box3 {
    border-top:2px solid #a6a6a6 !important;
    border-right:2px solid #a6a6a6 !important;
}

table td.selected.box4 {
    border-left:2px solid #a6a6a6 !important;
}

table td.selected.box6 {
    border-right:2px solid #a6a6a6 !important;
}

table td.selected.box7 {
    border-bottom:2px solid #a6a6a6 !important;
    border-left:2px solid #a6a6a6 !important;
}

table td.selected.box8 {
    border-bottom:2px solid #a6a6a6 !important;
}

table td.selected.box9 {
    border-bottom:2px solid #a6a6a6 !important;
    border-right:2px solid #a6a6a6 !important;
}
*/

table td.selected.box1 {
    border-top:2px solid #a6a6a6 !important;
    border-left:2px solid #a6a6a6 !important;
}

table td.selected.box2 {
    border-top:2px solid #a6a6a6 !important;
}

table td.selected.box3 {
    border-top:2px solid #a6a6a6 !important;
   /* border-right:2px solid #a6a6a6 !important;*/
}

table td.selected.box4, table td.selected.box5 {
    border-top:2px solid #a6a6a6 !important;
}

table td.selected.box6 {
    border-top:2px solid #a6a6a6 !important;
    border-right:2px solid #a6a6a6 !important;
}

table td.selected.box7 {
    border-left:2px solid #a6a6a6 !important;
}

table td.selected.box12 {
    border-right:2px solid #a6a6a6 !important;
}


table td.selected.box13 {
    border-left:2px solid #a6a6a6 !important;
    border-bottom:2px solid #a6a6a6 !important;
}

table td.selected.box14,table td.selected.box15, table td.selected.box16, table td.selected.box17 {
    border-bottom:2px solid #a6a6a6 !important;
}

table td.selected.box18 {
    border-right:2px solid #a6a6a6 !important;
    border-bottom:2px solid #a6a6a6 !important;
}



.tooltip.show {
    opacity: 1;
}

span.local_time small {
    opacity:0.8;
}

span.local_time small::before {
    content:'[';
} 

span.local_time small::after {
    content:']';
} 

.dynamic_display {
    display:none;
}

/* Image Upload */

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.upload {
    opacity: 0;
}

.upload-label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.upload-image {
    cursor:pointer;
}

.upload-image-area.hover {
    border:4px dotted #ccc;
}

.select-label {
    position: absolute;
    float: right;
    right: 5px;
    bottom: 5px;
}

.upload-label span {
    display: flex;
    overflow: hidden;
    width: 260px;
    height:30px;
}


.image-area {
    border: 2px dashed rgba(255, 255, 255, 0.7);
    padding: 1rem;
    position: relative;
}

.image-area::before {
    content: 'Uploaded image result';
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    z-index: 1;
}

.image-area img {
    z-index: 2;
    position: relative;
}

#iframeEmbed {
    min-height:100vh;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #222;
    z-index: 99;
}

.jagged-bottom-test {
    position:relative;
  }
  .jagged-bottom-test:after {
    background:#303030;
    content:"";
    height:2vw;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin-top: -3px;
    clip-path:polygon(
     5% 0,  7.5% 100%, 
     10% 0,12.5% 100%,15% 0, 17.5% 100%, 
     20% 0,22.5% 100%,25% 0, 27.5% 100%, 
     30% 0,32.5% 100%,35% 0, 37.5% 100%, 
     40% 0,42.5% 100%,45% 0, 47.5% 100%, 
     50% 0,52.5% 100%,55% 0, 57.5% 100%, 
     60% 0,62.5% 100%,65% 0, 67.5% 100%, 
     70% 0,72.5% 100%,75% 0, 77.5% 100%, 
     80% 0,82.5% 100%,85% 0, 87.5% 100%, 
     90% 0,92.5% 100%,95% 0, 100% 0);
  }

  ul.dropdown-sized {
      max-height:280px;
      overflow-y:scroll;
  }

  
.hero {
    width: 100%;
    height: 100vh;
    background-size: cover;
  }

  .video-background-holder {
    position: relative;
    background-color: black;
    height: calc(100vh - 72px);
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
  }
  
  .video-background-holder video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  
  .video-background-content {
    position: relative;
    z-index: 2;
  }
  
  .video-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.3;
    z-index: 1;
  }

  .subscribe .subscribe-form {
    max-width: 300px;
    margin-top: 10px;
    background: #fff;
    padding: 6px 10px;
    position: relative;
    border-radius: 50px;
    text-align: left;
}

.subscribe .subscribe-form input[type=email] {
    border: 0;
    padding: 4px 8px;
    width: calc(100% - 100px);
}

.subscribe .subscribe-form input[type=submit] {
    position: absolute;
    top: 0;
    right: -2px;
    bottom: 0;
    border: 0;
    background: none;
    font-size: 16px;
    padding: 0 20px;
    background: #24b7a4;
    background: linear-gradient(81.02deg, #a85038 -23.47%, #f98e3c 45.52%, #f9ab3e 114.8%);
    color: #fff;
    transition: 0.3s;
    border-radius: 50px;
    box-shadow: 0px 2px 15px rgb(0 0 0 / 10%);
}

.avatar-info {
    all: unset;
    background: hsl(230deg 11.63% 8.43%);
    border: 1px solid hsl(230deg 11.63% 17%);
    padding: 12px 12px;
    border-radius: 12px;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 180px;
    gap: 12px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    line-height: normal;
    -webkit-animation: animation-plwpox 300ms ease;
    animation: animation-plwpox 300ms ease;
}

.badge-black {
    background-color:#000;
}

.hp_badge {
    position: absolute;
    margin-left:-5px;
}

.mysync {
    outline: 2px solid orange;  
}

div.user-panel {
    /*width:200px;
    height:300px;*/
}

div.user-panel .tooltip-inner {
    min-width: 210px; /* the minimum width */
    text-align: left;
}

div.user-panel .tooltip-inner span.overflow {
    width:145px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height:20px;
    vertical-align: top;
}

div.user-panel .tooltip-inner span.flow {
    font-style: italic;
}

div.user-panel .tooltip-inner span.label {
    font-style: italic;
    display: inline-block;
    margin-right:5px;
    width:40px;
    height:20px;
    color:#ccc;
    vertical-align: top;
}

.hp_ellipsis {
    display:inline-block;
    max-width:145px;
    overflow:hidden;
    text-overflow:ellipsis;
}

form.card-element {
    background-color: #444;
}

form.card-element .btn-secondary {
    background-color: #555;
    border-color: #555;
}

[data-toggle="tooltip"] {
    cursor: pointer;
}



/* The .image-container class needs to be applied to a div wrapped around the image you want to apply this filter to */

/* The .image-container class needs to be applied to a div wrapped around the image you want to apply this filter to */
.image-container {
    display: inline-block;
    position: relative;
    line-height: 0;
    background: #ffffff;
  }
  .image-container::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
    background: #ff0000;
    opacity: 0.13;
  }
  .image-container > img {
    -webkit-filter:   contrast(97%) grayscale(0%) hue-rotate(330deg) invert(0%) opacity(100%) saturate(111%) sepia(0%);
            filter:   contrast(97%) grayscale(0%) hue-rotate(330deg) invert(0%) opacity(100%) saturate(111%) sepia(0%);
    mix-blend-mode: none;
  }
  
 span.dicon {
    width:16px;
    height:16px;
    background-image: url("/images/discord_button.png");
    display: inline-block;
    background-size: cover;
    vertical-align: text-bottom;
    margin-right: 2px;
 }

 small.hcog {
    display: inline-block;
    position: absolute;
    margin-top: 20px;
    margin-left: -2px;
 }