:root {
    /* Social Media */
    --yt-color: #FF0000;
    --x-com-color: #000;
    --twitch-color: #9147ff
}

/* Social Media */
.text-yt {
    color: var(--yt-color);
    text-decoration: underline;
    text-decoration-color: var(--yt-color) !important;
}

.text-x-com, .text-tiktok, .text-twitter {
    color: var(--x-com-color);
    text-decoration: underline;
    text-decoration-color: var(--x-com-color) !important;
}

.text-twitch {
    color: var(--twitch-color);
    text-decoration: underline;
    text-decoration-color: var(--twitch-color) !important;
}

/* Payments */
.dana-logo-filter {
    filter: invert(46%) sepia(69%) saturate(5780%) hue-rotate(186deg) brightness(106%) contrast(88%);
}

.linkaja-logo-fitler {
    width: 36px;
    float: right;
}

.qris-logo-fitler {
    width: 136px;
    float: right;
}

.va-logo-fitler {
    width: 100px;
    float: right;
}

.list-group > .active {
    color: #000 !important;
    border-radius: 0 !important;
    background-color: var(--bs-list-group-bg) !important;
    border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color) !important;
    border-left: 5px solid var(--primary-color) !important;
}

/* Generic */
body {
    background-image: url("assets/food.png");
}

.col-avatar {
    z-index: 1;
    max-width: 150px !important;
}

.img-logo {
    max-height: 52px;
    width: auto;
}

.img-avatar {
    border-radius: 50%;
    max-width: 150px;
    margin-top: -100px;
    border: 3.7px solid #fff;
}

.col-avatar {
    z-index: 1;
    max-width: 150px !important;
}

.img-logo {
    max-height: 52px;
    width: auto;
}

.img-avatar {
    border-radius: 50%;
    max-width: 150px;
    margin-top: -100px;
    border: 3.7px solid #fff;
}

.img-cover {
    position: absolute;
    height: auto;
    width: auto;
    min-height: 100%;
    min-width: 100%;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 1;
}

.img-payment-logo {
    width: 12rem;
    height: auto;
    max-height: 127px;
    max-width: 128px;
}

.row-cover {
    column-gap: 20px;
}

.modal-content {
    border-radius: 0;
}

.cover-container {
    position: relative;
    overflow: hidden;
    height: 200px;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

#tab-content > .active {
    border-left: 1px solid rgba(0, 0, 0, 0.25) !important;
    border-bottom: 5px solid var(--primary-color) !important;
}

#tab-content > .list-group-item {
    border-radius: 0 !important;
}

#form-support, #form-gift {
    border-top: 0 !important;
}