body{
    --secondary-10:#fff;
    --secondary-50:#CCC;
    --secondary-100:#7A7A81;
    --secondary-200:#434355;
    --secondary-300:#393947;
    --secondary-400:#30303D;
    --secondary-500:#262631;
    --secondary-600:#1E1E29;

    --primary-50:#32c560;
    --primary-100:#32c560;
    --primary-100\:20:rgba(50, 197, 96);

    --border-radius:15px;
    --border-radius-sm:10px;

    --animation:.5s;

    background-color: var(--secondary-600);
    font-family: 'Poppins', sans-serif;
    color:var(--secondary-50);
    font-size: 1em;
}
img::selection{
    background-color:transparent;
    pointer-events: none;
}
*::selection{
    background-color:rgba(67, 67, 85, 0.7);
    color:var(--primary-50);
}
a,a:hover{
    color:var(--secondary-50);
    text-decoration: none;
}
h2{
    font-size:2.5em;
    font-weight: bold;
    color:var(--secondary-10);
}
.button{
    color:var(--primary-50);
    font-weight: 600;
    text-decoration: none;
    display:inline-block;
    padding:9px 15px;
    background-color:transparent;
    border-radius:var(--border-radius-sm);
    position: relative;
    cursor: pointer;
    transition: var(--animation);
    overflow: hidden;
}
.button:hover{
    color:var(--primary-100);
}
.button-primary{
    z-index:1;
    color:var(--primary-100);
    border:3px solid var(--primary-100);
}
.button-primary:hover,
.button-primary:focus,
.button-primary:active,
.button-primary.active{
    color:var(--secondary-10);
    background-color: var(--primary-100\:20);
}
.button-secondary{
    z-index:1;
    color:var(--secondary-50);
    border:3px solid var(--secondary-200);
}
.button-secondary:hover,
.button-secondary:focus,
.button-secondary:active,
.button-secondary.active{
    color:var(--secondary-10);
    background-color:var(--secondary-400);
    border:3px solid var(--secondary-100);
}
.top-bar{
    margin-bottom:5px;
    text-align: center; 
    background-color: var(--primary-100);
    color:var(--secondary-600);
    outline:5px solid rgba(25, 139, 89, 0.8);
    padding:10px 0px;
    position: sticky;
    top:0;
    z-index:99;
}
.top-bar a{
    text-decoration: none;
    font-weight: 600;
    color:var(--secondary-500);
}
.top-bar a:hover{
    text-decoration: none;
    font-weight: 600;
    color:var(--secondary-600);
}
nav{
    width: 100%;
    padding:10px 0px;
    font-size: .9em !important;
}
.floating{
    z-index:98;
    position: absolute;
}
nav > div{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
nav .logo img{
    height: 28px;
}
nav .nav-list{
    list-style-type: none;
    display: flex;
    align-items: center;
    margin:0;
    padding:0;
    column-gap:30px;
}
nav .nav-list .nav-item a{
    color:var(--secondary-10);
    display: flex;
    column-gap:10px;
    align-items: center;
    text-decoration: none;
    padding:10px;
}
nav span.cartitems {
    background-color: var(--secondary-100);
    color: black;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: .8em;
}
nav .nav-list .nav-item .nav-button{
    padding:9px 25px;
}
nav .logo button{
    display: none;
    background-color: var(--secondary-300);
    color:var(--primary-100);
    border:none;
    padding:10px 15px;
    border-radius: var(--border-radius-sm);
}
@media (max-width:965px){
    nav .logo{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    nav.navbar-collapsed .logo button::after{
        width: 100vh;
        height: 100vh;
        position: fixed;
        top:0;
        left:0;
        content: '';
        background-color: var(--secondary-200);
        opacity: .3;
    }
    nav .logo button{
        display: block;
    }
    nav > div{
        flex-direction: column;
    }
    nav .nav-collapse{
        height: calc(100vh - 40px);
        display: none;
        overflow: hidden;
        width: 50%;
        min-width: 300px;
        background-color:var(--secondary-300);
        padding:20px;
        transition: .3s;
        position: fixed;
        top:55px;
        left:0;
        z-index:99;
    }
    nav.navbar-collapsed .nav-collapse{
        display: block;
        animation: slideIn .3s;
    }
    @keyframes slideIn {
        0%{
            left:-100%;
        }
        100%{
            left:0;
        }
    }
    nav .nav-list{
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    nav .nav-list .nav-item{
        width: 100%;
    }
    nav .nav-list .nav-button{
        text-align: center;
    }
}
main{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top:100px;
    padding-bottom:calc(8vw + 150px);
    background-image: url('../images/header-image.webp');
    background-position: bottom center;
    background-size:cover;
    background-repeat: no-repeat;
    position: relative;
    z-index:1;
}
footer{
    background-color: var(--secondary-500);
    padding-top: 50px;
}
footer p{
    max-width: 300px;
}
footer b{
    color:var(--secondary-10);
    padding-bottom:5px;
    display: block;
}
footer ul{
    list-style-type: none;
    padding:0;
    margin:0;
    display: flex;
    flex-direction: column;
    row-gap:5px;
}
footer ul a{
    color:var(--secondary-50);
    text-decoration: none;
}
footer ul a:hover{
    color:var(--secondary-10);
    text-decoration: underline;
}
footer .footer-bottom{
    margin-top:50px;
    display: flex;
    align-items:center;
    justify-content: space-between;
    padding:10px 0px;
    border-top:1px solid var(--secondary-300);
}
footer .footer-bottom .socials{
    display: flex;
    align-items: center;
    column-gap:10px;
}
footer .footer-bottom .socials a{
    color:var(--secondary-50);
    font-size: 1.1em;
    background-color:var(--secondary-300);
    width:35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
}
footer .footer-bottom span{
    color:var(--secondary-100);
}
main::after{
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    position: absolute;
    content: '';
    background-image: linear-gradient(rgba(23, 23, 32, 0.75), #1E1E29);
    z-index:-1;
}
main h1{
    max-width: 700px;
    margin-left:auto;
    margin-right:auto;
    font-size:4em;
    line-height: 1.1;
    font-weight: bold;
    color:var(--secondary-10);
    text-align: center;
}
main h1 span{
    color:var(--primary-100);
}
main p{
    max-width: 520px;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
}
.prices{
    position: relative;
    margin-top:calc(-8vw - 150px);
    z-index:2;
    margin-bottom:100px;
}
 .price-card{
    position: relative;
    background-color:var(--secondary-500);
    border-radius:var(--border-radius);
    margin-bottom:25px;
}
.price-card.recommended{
    box-shadow: 0 0 0 2px var(--primary-100);
}
.price-card.recommended::after{
    font-size:.9em;
    font-weight: 600;
    content:'RECOMMENDED';
    position: absolute;
    top:0px;
    right:0px;
    padding:2px 10px 5px;
    background-color:var(--primary-100);
    color:black;
    border-bottom-left-radius:10px;
    border-top-right-radius:10px
}
 .price-card .price-header{
    padding:25px;
    display: flex;
    align-items: center;
    column-gap:20px;
}
 .price-card .price-header img{
    border-radius:10px;
    height: 64px;
}
 .price-card .price-header p{
    color:var(--secondary-10);
    font-weight: 700;
    margin-bottom:0;
    font-size:1.8em;
    line-height: 1;
}
.price-card .price-header p span{
    font-size: 1rem !important;
    font-weight: normal;
    color: var(--secondary-100);
}
.price-card .price-body{
    padding-left:25px;
    padding-right:25px;
    text-align: center;
}
.price-card .price-body span{
    font-weight: bold;
    display: flex;
    align-items: center;
    column-gap:10px;
    justify-content: center;
}
.price-card .price-body p{
    margin-top:.5rem;
    font-size:.9em;
}
 .price-card .price-body ul{
    list-style-type: none;
    padding:0;
}
 .price-card .price-body li{
    padding:3px 0px;
    display: flex;
    align-items: center;
    column-gap:10px;
}
.price-card .price-body li i{
   color:var(--secondary-100);
}
 .price-card .price-footer{
    padding:15px 25px 20px;
    border-radius: var(--border-radius);
    background-color:var(--secondary-400);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
 .price-card .price-footer > div > span{
    font-size:.9em;
    color:var(--secondary-100);
}
 .price-card .price-footer .price{
    display: flex;
    align-items: center;
    column-gap:5px;
}
 .price-card .price-footer .price p{
    color:var(--secondary-10);
    font-weight: 700;
    margin-bottom:0;
    font-size:1.1em;
    line-height: 1;
}
.price-card .price-footer .button{
    overflow:visible;
    padding: 9px 10px;
}
 .price-card .price-footer .button .select-location{
    display: none;
    position: absolute;
    bottom:110%;
    right:0px;
    max-width: 200%;
    min-width: 150%;
    text-align: left;
    background-color: rgba(67, 67, 85, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color:var(--secondary-10);
    flex-direction: column;
    border-radius:var(--border-radius-sm);
    padding:5px;
}
 .price-card .price-footer .button:focus .select-location{
    display: flex;
    animation: fadeIn .3s;
}
@keyframes fadeIn{
    0%{
        opacity: 0;
        bottom:120%;
    }
    100%{
        opacity: 1;
        bottom:110%;
    }
}
 .price-card .price-footer .button .select-location a, .price-card .price-footer .button .select-location span{
    color:var(--secondary-10);
    text-decoration: none;
    padding:10px 15px;
    display: block;
    transition: color .3s;
}
.price-card .price-footer .button .select-location a:hover, .price-card .price-footer .button .select-location span:hover {
    background-color: rgba(67, 67, 85, 1);
    border-radius: var(--border-radius-sm);
}
.selector{
    position: relative;
    margin-bottom:-400px;
    z-index:2;
}
.cave{
    height: 600px;
    position: relative;
    background-image: url('../images/cave.webp');
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    z-index:1;
}
.cave::after{
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    position: absolute;
    content: '';
    background-image: linear-gradient(#1E1E29, rgba(23, 23, 32, 0.75), #1E1E29);
    z-index:-1;
}
.selector .chat-box{
    background-color: var(--secondary-400);
    padding:25px 30px;
    border-radius:var(--border-radius);
    width: calc(100% - 50px);
    position: relative;
}
.selector .chat-box::after{
    content:'';
    width: 120px;
    height: 100%;
    left:calc(100% - 40px);
    top:-5px;
    position: absolute;
    background-image: url('../images/chatbox.svg');
    background-size:100%;
    background-repeat: no-repeat;
    background-position: center;
}
.selector .guide{
    background-color: rgba(0, 183, 255, 0.5);
    padding:25px 30px;
    position: relative;
    border-radius:var(--border-radius);
}
.selector .guide .guide-box{
    display: flex;
    flex-direction: column;
    background-color:var(--secondary-500);
    height: 100%;
    border-radius:var(--border-radius);
    padding:25px 30px;
}
.selector .guide .guide-box h2{
    font-size:1.5em;
    font-weight: bold;
    color:var(--secondary-10);
}
.selector .guide .guide-box .slider-container{
    margin-bottom:10px;
    width: 100%;
}
.selector .guide .guide-box .slider-container label{
    width: 100%;
    font-weight: bold;
}
.selector .guide .guide-box .slider-container input{
    -webkit-appearance: none;
    width: 100%;
    height: 9px;
    border-radius:2px;
    background-color:#363647;
}
.selector .guide .guide-box .slider-container input::-webkit-slider-thumb{
    -webkit-appearance: none;
    background-color:#363647;
    border:5px solid var(--primary-100);
    width: 21px;
    height: 21px;
    border-radius:2px;
    position: relative;
}
.selector .guide .guide-box .slider-container input::-moz-range-progress{
    -moz-appearance: none;
    background-color:var(--primary-100);
}
.selector .guide .guide-box .slider-container .options{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.selector .guide .guide-box .slider-container .options span{
    max-width: 30px;
    width: 100%;
    text-align: center;
    font-size:.8em;
}
.selector .guide .guide-box p:last-of-type{
    color:var(--secondary-100);
    font-size:.9em;
}
.selector .guide .guide-box a{
    color:var(--secondary-50);
}
.selector .guide .price-card{
    display: none;
    flex-direction: column;
    margin-bottom:0px;
    height: 100%;
}
.selector .guide .price-card .price-footer{
    margin-top:auto;
}
.speed-test{
    margin-bottom: 50px;
}
.speed-test .speed-banner{
    width: 100%;
}
.speed-test .speed-box{
    width: 100%;
    margin-bottom:40px;
    max-width: 320px;
    background-color:var(--secondary-400);
    padding:25px 30px;
    border-radius:var(--border-radius);
    min-height: 123px;
}
.speed-test .speed-box img{
    width: 84px;
    border-radius: 10px;
}
.speed-test .speed-box h4{
    font-size:1em;
    color:var(--secondary-10);
    font-weight: 600;
    margin-bottom:0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.speed-test .speed-box h4 i{
    padding: 6px 8px;
    font-size: .8em;
    cursor: pointer;
    color: var(--primary-100);
    background-color: var(--secondary-300);
    border-radius: 5px;
}
.speed-test .speed-box h2{
    color:var(--primary-100);
    margin-bottom:0;
    font-weight: 700;
}
.speed-test .speed-box h2 span{
    opacity: .5;
}

.speed-test .speed-box .ping-results {
    font-size: 20px;
    color: var(--primary-100);
}

.warden{
    height: 700px;
    position: relative;
    background-image: url('../images/warden.webp');
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    z-index:1;
}
.warden::after{
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    position: absolute;
    content: '';
    background-image: linear-gradient(#1E1E29, rgba(23, 23, 32, 0.75), #1E1E29);
    z-index:-1;
}
.features{
    margin-top:-500px;
    position: relative;
    z-index:1;
}
.features .features-container{
    background-color: rgba(0, 183, 255, 0.5);
    padding:25px 30px;
    position: relative;
    border-radius:var(--border-radius);
}
.features .features-container .feature-box{
    position: relative;
    overflow:hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color:var(--secondary-500);
    height: 100%;
    border-radius:var(--border-radius);
    padding:35px 40px;
}
.features .features-container .feature-box h4{
    color:var(--secondary-10);
    font-weight: 700;
}
.features .features-container .feature-box#versions img{
    width: 150%;
    margin-top:20px;
    left:-25%;
    margin-bottom:-100px;
    position: relative;
}
.features .features-container .feature-box#plugins img{
    width: calc(100% + 150px);
    margin-bottom:-50px;
    position: relative;
}
.features .features-container .feature-box#players img{
    width: calc(100%);
    margin-bottom:-50px;
    position: relative;
}
.features .features-container .feature-box#mods .img-container{
    position: relative;
    width: 100%;
}
.features .features-container .feature-box#mods img{
    width: 100%;
    bottom:-100px;
    position: absolute;
}
.features .features-container .feature-box#panel .img-container{
    display: flex;
    align-items:flex-start;
    column-gap:20px;
    width: 100%;
    margin-bottom:-200px;
    position: relative;
}
.features .features-container .feature-box#panel .img-container img{
    width: 100%;
    border-radius:var(--border-radius-sm);
}
.features .features-container .feature-box#panel ul{
    padding:0;
    width: 50%;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    row-gap:15px;
}
.features .features-container .feature-box#panel ul li{
    display: flex;
    align-items: center;
    column-gap:10px;
}
.blogs{
    margin-top:100px;
}
.blogs .blog-card{
    margin-bottom:20px;
    padding:25px 30px;
    border-radius:var(--border-radius);
    background-color:var(--secondary-500);
}
.blogs .blog-card .banner{
    width: 100%;
    background:var(--secondary-300);
    aspect-ratio: 5 / 3;
    border-radius:var(--border-radius);
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
}
.blogs .blog-card a{
    margin-top:20px;
    color:var(--secondary-10);
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    column-gap:10px;
    transition: .3s;
}
.blogs .blog-card a i{
    color:var(--primary-100);
}
.blogs .blog-card a:hover{
    column-gap:5px;
}
.reviews{
    background-image: url('../images/bedrock.webp');
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top:100px;
    position: relative;
    z-index:1;
}
.reviews::after{
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    position: absolute;
    content: '';
    background-image: linear-gradient(#1E1E29, rgba(23, 23, 32, 0.75));
    z-index:-1;
}
.reviews .review-container{
    margin-top:50px;
    max-height: 600px;
    overflow: hidden;
    position: relative;
}
.reviews .review-container::after{
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    position: absolute;
    content: '';
    pointer-events: none;
    background-image: linear-gradient(rgba(23, 23, 32, 0), rgba(23, 23, 32, 1));
}
.reviews .review-box{
    margin-bottom:20px;
    padding:25px 30px;
    border-radius:var(--border-radius);
    background-color:var(--secondary-500);
}
.reviews .review-box .header{
    display: flex;
    align-items: center;
    margin-bottom:10px;
    column-gap:10px;
}
.reviews .review-box .header img{
    max-width: 64px;
    border-radius:var(--border-radius-sm);
}
.reviews .review-box .header b{
    color:var(--secondary-10);
    display: block;
}
.reviews .review-box .header i{
    color:var(--primary-100);
}
.reviews .review-box .header i.gray{
    color:var(--secondary-100);
}
.reviews .review-box p{
    margin-bottom:0;
}
@media (max-width:965px){
    .selector .chat-box{
        width: 100%;
        margin-bottom:50px;
    }
    .selector .chat-box::after{
        display: none;
    }
    .selector .guide .guide-container{
        margin-bottom:20px;
    }
    .speed-test .speed-box{
        width: 100%;
        max-width: 100%;
    }
    .features .features-container .feature-box{
        margin-bottom:20px;
        height: auto;
    }
    .features .features-container .feature-box#mods img{
        position: relative;
        bottom:0px;
    }
    footer b{
        margin-top:20px;
    }
}
.auth-link{
    color:var(--secondary-100);
}
.auth-link a{
    color:var(--secondary-50)
}
.price-card .price-footer .button .select-location:hover {
    display: block;
}

.blog-container{
    max-width:800px;
    padding-top:150px;
    margin-left:auto;
    margin-right:auto;
}
.blog-container h1{
    color:white;
    font-weight: bold;
}
.blog-container h2{
    font-size:2em;
}
.blog-container img{
    width: 100%;
    border-radius:var(--border-radius);
}
.all-verions {
    padding-bottom: 100px;
    background-image: linear-gradient(var(--secondary-600), var(--secondary-500));
    margin-bottom: 100px;
}
.all-verions img{
    width: 100%;
}
.package-name {
    display: flex;
    align-items:center;
    column-gap:20px;
}
.package-name .plan-logo{
    display:none;
}
.package-name .real-logo{
    width:72px;
    border-radius:var(--border-radius-sm)
}
.package-name br:first-of-type{
    display:none;
}
.kbcontainer {
    background-color: var(--primary-100\:20);
    padding-top: 100px;
    padding-bottom: 50px;
}
.kbcategories .kbcat{
    display: flex;
    width: 100%;
    text-decoration: none;
    background-color: var(--secondary-500);
    border-radius: var(--border-radius);
    padding: 25px 30px;
    column-gap:20px;
    align-items: center;
    margin-top:20px;
}
.kbcategories .kbcat span{
    display:block;
}
.kbcategories .kbcat b{
    background-color: var(--secondary-200);
    padding: 3px 7px;
    border-radius: 5px;
}
.kbcategories .kbcat img{
    aspect-ratio: 1 / 1;
    width: 100px;
}
.kbarticle,
.kbarticles{
    display: flex;
    width: 100%;
    text-decoration: none;
    background-color: var(--secondary-500);
    border-radius: var(--border-radius-sm);
    padding: 15px 20px;
    column-gap:10px;
    justify-content: space-between;
    align-items: center;
    margin-top:20px;
}
.kbarticles{
    flex-direction: column;
    align-items: flex-start;
}
.kbarticles p{
    margin:0;
}
.kb-top{
    background-color: var(--secondary-400);
    padding-top:15px;
    padding-bottom:15px;
}
.kb-top > div{
    display: flex;
    align-items: center;
    column-gap:5vw;
}
.kb-top a{
    color:var(--secondary-10);
    font-weight: 600;
    display: flex;
    align-items: center;
    column-gap:10px;
    text-decoration: none;
}
.kb-top span{
    background-color: var(--secondary-200);
    padding: 3px 7px;
    border-radius: 5px;
    font-weight: bold;
    color:var(--secondary-10);
}
.article-text img{
    max-width: 100%;
}
.article-text p span[style="background-color: #ffcc99;"] > *,
.article-text p span[style="background-color: #99ccff;"] > *,
.article-text p span[style="background-color: #ff0000;"] > *,
.article-text p span[style="background-color: #333333;"] > *{
    color: var(--secondary-600) !important;
    background-color:transparent !important;
}
.article-text p span[style="background-color: #ffcc99;"]{
    width: 100%;
    display: block;
    color: var(--secondary-600);
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 5px;
    border-left: 5px solid orange;
    background-color: #ffcc99 !important;
}
.article-text p span[style="background-color: #99ccff;"]{
    width: 100%;
    display: block;
    color: var(--secondary-600);
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 5px;
    border-left: 5px solid #0080ff;
    background-color: #99ccff !important;
}
.article-text p span[style="background-color: #ff0000;"]{
    width: 100%;
    display: block;
    color: var(--secondary-600);
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 5px;
    border-left: 5px solid #ff0000;
    background-color: #ffb9b9 !important;
}
.article-text p span[style="background-color: #333333;"]{
    padding: 3px 5px;
    background-color: var(--secondary-200) !important;
    font-family: monospace;
    border-radius: 2px;
}
.article-text blockquote::after {
    content: '';
    width: 5px;
    height: 100%;
    background-color: var(--secondary-50);
    position: absolute;
    top: 0;
    left: 0;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
.article-text blockquote {
    padding-top:5px;
    padding-bottom:5px;
    padding-left:20px;
    position: relative;

}
.article-text blockquote *{
    margin:0;

}
.usefull {
    background-color: var(--secondary-500);
    border-radius: var(--border-radius-sm);
    padding: 10px;
    column-gap:15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.usefull button.btn.btn-lg.btn-link {
    background-color: var(--secondary-400);
    color: var(--secondary-50);
    text-decoration: none;
    font-size: .9em;
}
.usefull form {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 15px;
}
.related-bar {
    position: sticky;
    top: 75px;
    background-color: var(--secondary-500);
    display: flex;
    flex-direction: column;
    padding: 25px 30px;
    border-radius: var(--border-radius);
    row-gap: 10px;
}
.related-bar a{
    text-decoration:none;
}
.related-bar span{
    color:var(--secondary-10);
    margin-top:10px;
    font-weight: bold;
}
.upgrade-header{
    display:flex;
    align-items: center;
    column-gap:15px;
}
.upgrade-header br:first-of-type{
    display: none;
}
.upgrade-header img{
    width: 64px;
    border-radius:var(--border-radius-sm);
}
.upgrade-header .plan-logo{
    display: none;
}
.upgrade-card{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
span[data-hover]{
    position: relative;
    padding-top: 5px;
    display: inline-block;
    font-weight: normal;
    color:var(--secondary-100); 
}
span[data-hover]::after{ 
    display: none;
    content:attr(data-hover);
    font-weight: normal;
    position: absolute;
    bottom: 50%;
    text-align: center;
    min-width: 200px;
    left: 50%;
    transform: translate(-50%, -5px);
    z-index: 10;
    padding: 15px 20px;
    border-radius: var(--border-radius-sm);
    background-color: var(--secondary-200);
    color:var(--secondary-10);
}
span[data-hover]:hover::after{
    display: block;
    bottom: 100%;
    transition: .5s;
}
.ticket-chat{
    max-height: 500px;
    padding-right: 10px;
    padding-top:20px; 
    overflow-x: clip;
    overflow-y:scroll;
}
.chat-container{
    position: relative;
}
.ticket-chat::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.ticket-chat::-webkit-scrollbar-track {
  background: var(--secondary-400);
  border-radius:10px;
}
.ticket-chat::-webkit-scrollbar-thumb {
  background: var(--secondary-300);
  border-radius:10px;
}
.ticket-chat::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-200);
}
.ticket-chat p{
    margin:0;
}
.markdown-editor-style{
    margin-top:20px;
    cursor: text;
    width: 100%;
    background-color: var(--secondary-400);
    border:none;
    padding:15px 20px;
    border-radius:var(--border-radius-sm);
    color:var(--secondary-10);
    outline:none;
    outline:0px solid transparent;
    transition: outline .2s;
}
.markdown-editor-style textarea{
    background-color:transparent;
    width: 100%;
    border: none;
    color: var(--secondary-50);
    outline: none;
}
.markdown-editor-style textarea::placeholder{
    color: var(--secondary-50);
}
.markdown-editor-style .md-header{
    align-items: center;
    column-gap: 11px;
}
.markdown-editor-style .md-header button{
    color:var(--secondary-50) !important;
}
.markdown-editor-style .md-footer,
.markdown-editor-style .md-fullscreen-controls{
    display: none;
}
.table {
    --bs-table-color:var(--secondary-50);
    --bs-table-striped-color:var(--secondary-50);
}
.stock-alert {
    background-color: #5be68a45;
    color: #bafbcc;
    display:flex;
    align-items:center;
    column-gap:10px;
    font-size:.9em;
    padding:10px 15px;
    border-radius:10px;
    margin-bottom:10px;
}
.price-card .price-footer .button .select-location a.nostock {
    text-decoration: line-through;
    pointer-events: none;
    opacity: .7;
}