/* Primary Styles */
:-moz-focusring {
    color: black;
    outline: 0px;
}

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    background-color: transparent;
}

table {
    border-collapse: collapse;
    display: table;
    box-sizing: border-box;
    border-spacing: 2px;
    border-color: grey;
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

td {
    display: table-cell;
    vertical-align: inherit;
}

.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

*, :after, :before {
    box-sizing: border-box;
}

.focuscatalog {
    background-color: rgba(0,0,0,.15);
    border-radius: 4px;
    border: none;
    outline: none;
}

.form-control:focus {
    color: #495057!important;
    background-color: #fff!important;
    border-color: #ff8080!important;
    outline: 0!important;
    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0,.25)!important;
}

.grey {
    color: grey;
    text-decoration: none;
}

.red-a {
    color: #dc3545!important;
    text-decoration: none!important;
    background-color: transparent!important;
}

.red-a:hover {
    color: #c82333!important;
    text-decoration: underline!important;
}

.red-a-nounder {
    color: #dc3545!important;
    text-decoration: none!important;
}

.green-a-nounder {
    color: #28a745!important;
    text-decoration: none!important;
}

.blue-a-nounder {
    color: #3f7dfa!important;
    text-decoration: none!important;
}

.yellow-a-nounder {
    color: #fae13f!important;
    text-decoration: none!important;
}

.purple-a-nounder {
    color: #933ffa!important;
    text-decoration: none!important;
}

.black-a-nounder {
    color: black!important;
    text-decoration: none!important;
}

.grey-hov {
    color: grey!important;
}

.grey-hov:hover {
    color: #dc3545!important;
}

.cyan-a-nounder {
    color: #03f8fc!important;
    text-decoration: none!important;
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff!important;
    text-decoration: none!important;
    background-color: #dc3545!important;
}

.btn-link {
    font-weight: 400!important;
    color: #dc3545!important;
    text-decoration: none!important;
}

.btn.focus, .btn:focus {
    outline: 0!important;
    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0,.25)!important;
}

.card-header {
    padding: 0px!important;
    margin-bottom: 0!important;
    background-color: rgba(0,0,0,.03)!important;
    border-bottom: 1px solid rgba(0,0,0,.125)!important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff!important;
    background-color: #dc3545!important;
}

.marg-bot-30 {
    margin-bottom: 30px!important;
}

.marg-bot-15 {
    margin-bottom: 15px!important;
}

.marg-auto {
    margin: auto!important;
}

.custom-file-input:focus~.custom-file-label {
    border-color: #ff8080!important;
    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0,.25)!important;
}

.avatar-asset-card {
    width: 9rem;
    height: 9rem;
}

.txt-shadow-offset {
    text-shadow: 2px 2px 2px rgba(37, 37, 37, 0.74)!important;
}

.inline-block {
    display: inline-block!important;
    float: left!important;
}

.inline-flex {
    display: inline-flex!important;
}

.crop {
    overflow: hidden!important;
    white-space: nowrap!important;
    text-overflow: ellipsis!important;
    width: 124px!important;
}

.catalog-card-crop {
    overflow: hidden!important;
    white-space: nowrap!important;
    text-overflow: ellipsis!important;
    width: 100px!important;
}

.ml-4-5 {
    margin-left: 1.6rem!important;
}

.loading-rotate {
    animation: rotation 1s infinite linear;
}

@keyframes rotation {
    0% {
        transform: rotate(360deg);
    }
    20% {
        transform: rotate(260deg);
    }
    40% {
        transform: rotate(1deg);
    }
}
/* Game Page */
.game-card {
    width: 60%;
    margin: 0 auto;
    border: 1px solid #ced4da;
    background-color: #fff;
    color: black;
    text-decoration: none;
    border-radius: .25rem;
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 14px;
    /*margin-left: 2px;
    margin-right: 2px;*/
    margin-bottom: 4px;
}

@media (min-width: 992px) {
    .game-card {
        width: 9.1rem;
        border: 1px solid #ced4da;
        background-color: #fff;
        color: black;
        text-decoration: none;
        border-radius: .25rem;
        display: inline-flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        font-size: 14px;
        margin-left: 2px;
        margin-right: 2px;
        margin-bottom: 4px;
        transition: ease-out .15s;
    }
}

.game-card a {
    text-decoration: none;
    color: grey;
}

.game-card a:hover {
    text-decoration: none;
}

.game-card span p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 4px;
}

.game-card a img {
    width: 100%;
}

.game-container {
    padding: 15px;
}

.game-search-input {
    max-width: 400px;
}

.game-primary-container {
    /*height: 770px;
    max-height: 770px;*/
}

.game-page-btn-group {
    margin-right: 0rem;
}

.game-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.game-card:hover {
    box-shadow: 0px 3px 5px -1px rgba(143,143,143,0.68);
}

.game-container ul li {
    width: 100%;
    float: left;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 992px) {
    .game-container ul li {
        width: auto;
        float: left;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: 1.2px;
    }
}

.game-container ul li p {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: grey;
}

.game-container ul li:last-of-type {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 992px) {
    .game-page-btn-group {
        margin-right: 2rem;
    }
}

.game-card a img {
    width: 100%;
    max-width: 25rem;
    height: 182px;
}

@media (min-width: 992px) {
    .game-card a img {
        width: 100%;
        max-width: 150px;
        height: 84px;
    }
}

.game-thumb {
    width: 100%;
    max-width: 758px;
    height: 180px;
}

@media (min-width: 992px) {
    .game-thumb {
        width: 100%;
        max-width: 758px;
        height: 432px;
    }
}

.game-card-index {
    width: 100%;
    border: 1px solid #ced4da;
    background-color: #fff;
    color: black;
    text-decoration: none;
    border-radius: .25rem;
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

@media (min-width: 992px) {
    .game-card-index {
        width: 181px;
        border: 1px solid #ced4da;
        background-color: #fff;
        color: black;
        text-decoration: none;
        border-radius: .25rem;
        display: inline-flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        font-size: 14px;
        margin-left: 2px;
        margin-right: 2px;
        margin-bottom: 4px;
    }
}

.game-card-index a {
    text-decoration: none;
    color: grey;
}

.game-card-index a:hover {
    text-decoration: none;
}

.game-card-index span p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 4px;
}

.game-card-index a img {
    width: 100%;
    max-width: 25rem;
}

@media (min-width: 992px) {
    .game-card-index a img {
        width: 100%;
        max-width: 200px;
        height: 100px;
    }
}

.game-container-index {
    padding: 15px;
}

.game-container-index ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.game-container-index ul li {
    width: 100%;
    float: left;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 992px) {
    .game-container-index ul li {
        width: auto;
        float: left;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: 1.2px;
    }
}

.game-container-index ul li p {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: grey;
}

.game-container-index ul li:last-of-type {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
/* Catalog Page */
.catalog-itemstypea a {
    color: rgba(220,53,69);
    text-decoration: none;
    outline: none;
}

.catalog-itemtypea a:focus {
    color: rgba(220,53,69,.6);
    text-decoration: none;
    outline: none;
}

.catalog-itemstypea a:hover {
    color: rgba(220,53,69,.6);
    text-decoration: none;
}

.catalog-itemstypea a p {
    padding-top: 10px;
    padding-bottom: 10px;
    /*padding-left: 20px;*/
    text-align: center;
    margin: 1px!important;
    transition: ease-out .05s;
    outline: none;
}

.catalog-itemstypea a p:hover {
    background-color: rgba(0,0,0,.15);;
    border-radius: 4px;
    border: none;
    outline: none;
}

.catalog-itemstypea a p:focus {
    background-color: rgba(0,0,0,.15);;
    border-radius: 4px;
    border: none;
    outline: none;
}

.catalog-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.catalog-container ul li {
    width: 100%;
    float: left;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 992px) {
    .catalog-container ul li {
        width: auto;
        float: left;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: 1.2px;
    }
}

.catalog-container ul li p {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: grey;
}

.catalog-container ul li:last-of-type {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.catalog-card {
    width: 100%;
    text-align: center;
    /*border-top: 1px solid #ced4da;*/
    /*border-bottom: 1px solid #ced4da;*/
    border-radius: .25rem;
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    transition: ease-out .15s;
}

@media (min-width: 992px) {
    .catalog-card {
        width: 11.8rem;
        height: 13.8rem;
        margin: 2px;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: .25rem;
        display: inline-flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        transition: ease-out .15s;
        background-color: rgba(0,0,0,.02);
    }
}

.catalog-card:hover .catalog-card-img {
    -webkit-transition: ease-out .1s;
    /*box-shadow: 0px 3px 5px -1px rgba(143,143,143,0.68);*/
    box-shadow: inset 0px 0px 20px rgba(0,0,0,.2);
}

.catalog-card a p img {
    max-width: 1rem;
}

.catalog-card-img {
    min-width: 11.58rem;
    background-color: rgba(0,0,0,.15);
}

@media (min-width: 992px) {
    .catalog-card a img {
        max-width: -webkit-fill-available;
    }
}

.catalog-card p {
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 14px;
    color: grey;
    padding: 3px;
    margin: 3px;
}

.catalog-card a {
    text-decoration: none;
}

.catalog-card a:hover {
    text-decoration: none;
}

.catalog-currency-icon {
    max-width: 1.4rem!important;
    margin-left: 8rem!important;
}

@media (min-width: 992px) {
    .catalog-currency-icon {
        margin-left: 3rem!important;
    }
}

.catalog-currency-container {
    width: 100%;
}

.catalog-select-container {
    
}

@media (min-width: 992px) {
    .catalog-select-container {
        margin-left: 13rem!important;
    }
}
/* Friends Page */
.friends-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.friends-container ul li {
    float: left;
    width: 8.3rem;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.friends-container ul li p {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.friends-container ul li:last-of-type {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.no-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.friends-avatar-front {
    width: 8.3rem;
}

.a-nostyle {
    color: black;
    text-decoration: none;
}

.a-nostyle:hover {
    color: black;
    text-decoration: none;
}

/* UL/LI Styles */
.ul-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.ul-container ul li {
    float: left;
    width: 100%;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 992px) {
    .ul-container ul li {
        float: left;
        width: 10.3rem;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

.ul-container ul li p {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.ul-container ul li:last-of-type {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.profile-icon {
    width: 9.7rem;
}

/* Inventory Styles */
.inventory-ul-container {
    
}

.inventory-ul-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.inventory-ul-container ul li {
    float: left;
    width: 100%;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 992px) {
    .inventory-ul-container ul li {
        float: left;
        width: 12.97rem;
        padding: 10px;
        margin: 3px;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        border: 1px solid #ced4da;
        border-radius: .25rem;
    }
}

.inventory-ul-container ul li p {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.inventory-ul-container ul li:last-of-type {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.inventory-item-name {
    font-size: 16px!important;
}

.padding-6px {
    padding: 6px;
}

/* Friend Request's */
.friend-requests-padding li {
    padding: 12px;
}

.friend-requests-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.friend-requests-container ul li {
    float: left;
    width: 100%;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    margin-bottom: 10px;
    padding: 16px;
}

@media (min-width: 992px) {
    .friend-requests-container ul li {
        float: left;
        width: 9.8rem;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        margin: 10px;
        padding: 16px;
    }
}

.friend-requests-container ul li p {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.friend-requests-container ul li:last-of-type {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.fr-notification {
    background-color: #dc3545;
    border-radius: 3px;
    padding-right: .28rem;
    padding-left: .28rem;
    color: white;
}

/* Avatar Page */
.avatar-items-container li {
    padding: 12px;
}

.avatar-items-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.avatar-items-container ul li {
    float: left;
    width: 100%;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    margin-bottom: 10px;
    padding: 16px;
}

@media (min-width: 992px) {
    .avatar-items-container ul li {
        float: left;
        width: 9.8rem;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        margin: 2px;
        padding: 6px;
        color: gray;
    }
}

.avatar-items-container ul li p {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.avatar-items-container ul li:last-of-type {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.avatar-item-img {
    width: 7rem;
}

/* Body Colors */
.bodyc-container {
    height: 240px;
    width: 194px;
    text-align: center;
    margin: 0px auto;
    position: relative;
}

.bodyc-part {
    position: absolute;
    cursor: pointer;
    border: 1px solid grey;
    border-radius: 6px;
    transition: ease-out .2s;
    -moz-transition: ease-out .2s;
    -webkit-transition: ease-out .2s;
}

.bodyc-part:hover {
    border-radius: 0;
    box-shadow: 0px 2px 1px -1px rgba(143,143,143,0.68);
}

.bodyc-head {
    left: 72px;
    top: 0px;
    width: 44px;
    height: 44px;
}

.bodyc-larm {
    left: 0px;
    top: 52px;
    height: 88px;
    width: 40px;
}

.bodyc-torso {
    left: 48px;
    top: 52px;
    height: 88px;
    width: 88px;
}

.bodyc-rarm {
    left: 144px;
    top: 52px;
    height: 88px;
    width: 40px;
}

.bodyc-lleg {
    left: 48px;
    top: 146px;
    height: 88px;
    width: 40px;
}

.bodyc-rleg {
    left: 96px;
    top: 146px;
    height: 88px;
    width: 40px;
}





/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 7rem;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

@media (min-width: 992px) {
    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 10.1rem;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
    }
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Caption text */
.game-text {
  color: grey;
  font-size: 15px;
  padding: 8px 12px;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active-game {
  background-color: #717171;
}

/* Fading animation */
.gamepanel-fade {
  -webkit-animation-name: gamepanel-fade;
  -webkit-animation-duration: 1.5s;
  animation-name: gamepanel-fade;
  animation-duration: 1s;
  opacity: 1!important;
}

@-webkit-keyframes gamepanel-fade {
  from {opacity: .5}
  to {opacity: 1}
}

@keyframes gamepanel-fade {
  from {opacity: .5}
  to {opacity: 1}
}
/* Users Page */
.users-container li {
    padding: 12px;
}

.users-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.users-container ul li {
    float: left;
    width: 100%;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    margin-bottom: 10px;
    padding: 16px;
}

@media (min-width: 992px) {
    .users-container ul li {
        float: left;
        width: 9.2rem;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        margin: 2px;
        padding: 6px;
        color: gray;
    }
}

.users-container ul li p {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.users-container ul li:last-of-type {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Player Colors */
.color-container {
    max-width: 424px!important;
}

.color-palette {
    position: relative;
}

.color-palette li {
    padding: 0;
}

.color-palette ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.color-palette ul li {
    float: left;
    width: auto;
    display: inline-block;
    margin: 2px;
    padding: 0;
}

.color-palette ul li div {
    width: 40px;
    height: 40px;
    border: 1px solid grey;
    border-radius: 0;
    transition: ease-out .2s;
    -moz-transition: ease-out .2s;
    -webkit-transition: ease-out .2s;
}

.color-palette ul li div:hover {
    border-radius: 6px;
    box-shadow: 0px 2px 1px -1px rgba(143,143,143,0.68);
    cursor: pointer;
}

.greytext {
    font-size:14px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    color:grey;
}

.a-nounderline:hover {
    text-decoration: none;
    color: grey;
}
/* Inventory Styles */
.inventory-container {
    
}

.inventory-container li {
    padding: 12px;
}

.inventory-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.inventory-container ul li {
    float: left;
    width: 100%;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    margin-bottom: 10px;
    padding: 16px;
}

@media (min-width: 992px) {
    .inventory-container ul li {
        float: left;
        width: 13rem;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        margin: 2px;
        padding: 6px;
        color: gray;
    }
}

.inventory-container ul li p {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.inventory-container ul li:last-of-type {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.hide {
    display: none;
}
/* Group Styles */
.group-user-card {
    width: 100%;
}

@media (min-width: 992px) {
    .group-user-card {
        width: 11.7rem;
    }
}

.offline-profile {
    color: black!important;
}
/* Mod Panel Styles */
.mod-ul-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.mod-ul-container ul li {
    float: left;
    width: 100%;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 992px) {
    .mod-ul-container ul li {
        float: left;
        width: 10.8rem;
        margin: 2px;
        display: inline-block;
    }
}
/* Currently Wearing Modal Styles */
.cwearingmodal-ul-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.cwearingmodal-ul-container ul li {
    float: left;
    width: 100%;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 992px) {
    .cwearingmodal-ul-container ul li {
        float: left;
        width: 10.7rem;
        margin: 2px;
        display: inline-block;
    }
}

/* Footer Styles */
.footer {
    background-color: #fff;
    margin-bottom: 2rem;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    /*align-items: center;*/
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.studio-place-card {
    width: 25rem;
    text-align: center;
    margin: 0 auto;
    /*border-top: 1px solid #ced4da;*/
    border: 1px solid rgba(0,0,0,.355);
    background-color: rgba(0,0,0,.055);
    margin-bottom: .3rem;
    border-radius: .25rem;
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    transition: ease-out .15s;
}

@media (min-width: 992px) {
    .studio-place-card {
        width: 9.5rem;
        margin: 2px;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: .25rem;
        display: inline-flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        transition: ease-out .15s;
        background-color: rgba(0,0,0,.02);
    }
}

.studio-place-card a p img {
    max-width: 1rem;
}

.studio-place-card-img {
    min-width: 100%;
}

@media (min-width: 992px) {
    .studio-place-card-img {
        width: 100%;
        max-width: 150px;
        height: 84px;
    }
}

@media (min-width: 992px) {
    .studio-place-card a img {
        max-width: -webkit-fill-available;
    }
}

.studio-place-card p {
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 14px;
    color: grey;
    padding: 3px;
    margin: 3px;
}

.studio-place-card a {
    text-decoration: none;
}

.studio-place-card a:hover {
    text-decoration: none;
}

.mygroup-pane-mob {
    text-align: center;
}

@media (min-width: 992px) {
    .mygroup-pane-mob {
        text-align: left;
    }
}

.group-post-text {
    text-align: center;
}

@media (min-width: 992px) {
    .group-post-text {
        text-align: right;
    }
}

.mobile-center {
    text-align: center;
}

@media (min-width: 992px) {
    .mobile-center {
        text-align: left;
    }
}

.selected-my-group {
	border: 1px solid #dc3545!important;
	pointer-events: none!important;
}

.mouse-hover {
	cursor: pointer;
}

.group-approval-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.group-approval-container ul li {
    width: 100%;
    float: left;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.group-approval-container ul li p {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 992px) {
    .group-approval-container ul li {
        width: 10.9rem;
        float: left;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: 1.2px;
    }
}

.dropdown-custom {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    cursor: default!important;
    text-align: left!important;
}

.bootstrap-toggle-dropdown {
	width: 15.8rem;
	padding: .4rem!important;
	border: none;
	border-radius: 0;
	cursor: pointer!important;
}

@media (min-width: 992px) {
    .bootstrap-toggle-dropdown {
        width: 14.245rem!important;
    }
}

.bootstrap-toggle-dropdown:hover {
	background-color: #dc3545;
	color: white;
}

.bootstrap-dropdown-parent {
    border: 1px solid #ced4da!important;
}

.gaytempfix {
    width: 100%!important;
}

@media (min-width: 992px) {
    .gaytempfix {
        width: 15.1rem!important;
    }
}

.profile-badges ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.profile-badges ul li {
    width: 100%;
    float: left;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.profile-badges ul li p {
    font-size: 14px;
    margin: 0px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 992px) {
    .profile-badges ul li {
        width: 10.95rem;
        float: left;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: 1.2px;
    }
}

.profile-groups ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.profile-groups ul li {
    width: 100%;
    float: left;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.profile-groups ul li p {
    font-size: 14px;
    margin: 0px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 992px) {
    .profile-groups ul li {
        width: 10.95rem;
        float: left;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: 1.2px;
    }
}

.pers-servbox ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.pers-servbox ul li {
    width: 100%;
    display: inline-block;
}

.pers-servbox ul li p {
    font-size: 14px;
    margin: 0px;
}

@media (min-width: 992px) {
    .pers-servbox ul li {
        width: 12.1rem;
        display: inline-block;
        margin: 1.2px;
    }
}

.pbstempcontainer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.pbstempcard:hover {
    box-shadow: 0px 3px 5px -1px rgba(143,143,143,0.68);
}

.pbstempcontainer ul li {
    width: 100%;
    float: left;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 992px) {
    .pbstempcontainer ul li {
        width: auto;
        float: left;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: 1.2px;
    }
}

.pbstempcontainer ul li p {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: grey;
}

.pbstempcontainer ul li:last-of-type {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.pbstempcard {
    margin: 0 auto;
    border: 1px solid #ced4da;
    background-color: #fff;
    color: black;
    text-decoration: none;
    border-radius: .25rem;
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 14px;
    /*margin-left: 2px;
    margin-right: 2px;*/
    margin-bottom: 4px;
}

@media (min-width: 992px) {
    .pbstempcard {
        width: 11.8rem;
        border: 1px solid #ced4da;
        background-color: #fff;
        color: black;
        text-decoration: none;
        border-radius: .25rem;
        display: inline-flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        font-size: 14px;
        margin-left: 2px;
        margin-right: 2px;
        margin-bottom: 4px;
        transition: ease-out .15s;
    }
}

.pbstempcard a {
    text-decoration: none;
    color: grey;
}

.pbstempcard a:hover {
    text-decoration: none;
}

.pbstempcard span p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 4px;
}

.pbstempcard a img {
    width: 100%;
    max-width: 25rem;
    height: 182px;
}

@media (min-width: 992px) {
    .pbstempcard a img {
        width: 100%;
        height: 100px;
    }
}

.converpbsopcontainer {
    cursor: pointer;
}

.converpbsopcontainer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.converpbsopcard:hover {
    box-shadow: 0px 3px 5px -1px rgba(143,143,143,0.68);
}

.converpbsopcontainer ul li {
    width: 100%;
    float: left;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 992px) {
    .converpbsopcontainer ul li {
        width: auto;
        float: left;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: 1.2px;
    }
}

.converpbsopcontainer ul li p {
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: grey;
}

.converpbsopcontainer ul li:last-of-type {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.converpbsopcard {
    margin: 0 auto;
    border: 1px solid #ced4da;
    background-color: #fff;
    color: black;
    text-decoration: none;
    border-radius: .25rem;
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 14px;
    /*margin-left: 2px;
    margin-right: 2px;*/
    margin-bottom: 4px;
}

@media (min-width: 992px) {
    .converpbsopcard {
        width: 14.1rem;
        border: 1px solid #ced4da;
        background-color: #fff;
        color: black;
        text-decoration: none;
        border-radius: .25rem;
        display: inline-flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        font-size: 14px;
        margin-left: 2px;
        margin-right: 2px;
        margin-bottom: 4px;
        transition: ease-out .15s;
    }
}

.converpbsopcard a {
    text-decoration: none;
    color: grey;
}

.converpbsopcard a:hover {
    text-decoration: none;
}

.converpbsopcard span p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 4px;
}

.converpbsopcard a img {
    width: 100%;
    height: 182px;
}

@media (min-width: 992px) {
    .converpbsopcard a img {
        width: 100%;
        height: 110px;
    }
}

.studio-upload-card {
    width: 25rem;
    text-align: center;
    margin: 0 auto;
    /*border-top: 1px solid #ced4da;*/
    border: 1px solid rgba(0,0,0,.355);
    background-color: rgba(0,0,0,.055);
    margin-bottom: .3rem;
    border-radius: .25rem;
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    transition: ease-out .15s;
}

@media (min-width: 992px) {
    .studio-upload-card {
        width: 9.5rem;
        margin: 2px;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: .25rem;
        display: inline-flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        -moz-transition: ease-out .15s;
        -webkit-transition: ease-out .15s;
        -o-transition: ease-out .15s;
        transition: ease-out .15s;
        background-color: rgba(0,0,0,.02);
    }
}

.studio-upload-card:hover {
    box-shadow: 0px 3px 5px -1px rgba(143,143,143,0.50);
}

.studio-upload-card a p img {
    max-width: 1rem;
}

.studio-upload-card-img {
    min-width: 100%;
}

@media (min-width: 992px) {
    .studio-upload-card-img {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .studio-upload-card a img {
        max-width: -webkit-fill-available;
    }
}

.studio-upload-card p {
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 14px;
    color: grey;
    padding: 3px;
    margin: 3px;
}

.studio-upload-card a {
    text-decoration: none;
}

.studio-upload-card a:hover {
    text-decoration: none;
}


.toolbox-btn {
    background-color: white!important;
    padding:1px;
    border: 1px solid rgb(165, 165, 165);
}

.toolbox-btn:hover {
    background-color: rgb(225, 255, 252)!important;
    padding:1px;
    border: 1px solid rgb(165, 165, 165);
}

.toolbox-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.toolbox-container ul li {
    width: 49.8%;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.studio-tooblox-card {
    width: 100%;
    text-align: center;
    /*border-top: 1px solid #ced4da;*/
    border: 1px solid rgba(0,0,0,.355);
    background-color: rgba(0,0,0,.055);
    margin-bottom: .3rem;
    border-radius: .25rem;
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    transition: ease-out .15s;
}

.studio-tooblox-card:hover {
    box-shadow: 0px 3px 5px -1px rgba(143,143,143,0.50);
}

.studio-tooblox-card a p img {
    max-width: 1rem;
}

.studio-tooblox-card-img {
    min-width: 100%;
}

@media (min-width: 992px) {
    .studio-tooblox-card-img {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .studio-tooblox-card a img {
        max-width: -webkit-fill-available;
    }
}

.studio-tooblox-card p {
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 14px;
    color: grey;
    padding: 3px;
    margin: 3px;
}

.studio-tooblox-card a {
    text-decoration: none;
}

.studio-tooblox-card a:hover {
    text-decoration: none;
}