@import url(https://fonts.googleapis.com/css?family=Poppins:200,400,500,600,700);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans&display=swap);
@import url(https://fonts.googleapis.com/css?family=Teko:200,400,500,600,700);

.nui-wrapper {
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}



pre {
    counter-reset: line-numbering;
    background: #2c3e50;
    padding: 12px 0 14px;
    color: #ecf0f1;
    line-height: 140%
}

.popup-thing {
    background: #282c34;
    border-radius: 10px;
    width: 500px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff
}

*,
:after,
:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Manrope, sans-serif
}

:root {
    --black: #000;
    --black-40: rgba(0, 0, 0, .4);
    --black2-20: rgba(2, 2, 2, .2);
    --black2-40: rgba(2, 2, 2, .4);
    --black2-50: rgba(2, 2, 2, .5);
    --black2-60: rgba(2, 2, 2, .6);
    --black2-80: rgba(2, 2, 2, .8);
    --black14-85: hsla(0, 0%, 5%, .85);
    --noir-85: hsla(0, 0%, 8%, .851);
    --grey: #7f7f7f;
    --global-main-color: #FF1D8D;
    --orange: #c96e06;
    --light-orange: #b27935;
    --green: #358e75;
    --green2: #2bad6e;
    --green-40: rgba(43, 173, 110, .4);
    --red: #c33131;
    --red-40: rgba(195, 49, 49, .4);
    --blue: #3974c8;
    --blue-40: #3975c83f;
    --dark-blue: rgba(61, 112, 184, .6);
    --dark-blue2: rgba(12, 56, 119, .6);
    --white: #fff;
    --white-80: hsla(0, 0%, 100%, .8);
    --white-70: hsla(0, 0%, 100%, .7);
    --white-50: hsla(0, 0%, 100%, .5);
    --white-30: hsla(0, 0%, 100%, .3);
    --degrade-violet: linear-gradient(360deg, rgba(83, 18, 127, .15), rgba(2, 2, 2, 0) 100%, rgba(2, 2, 2, 0) 0);
    --degrade-violet-housebuilding: linear-gradient(90deg, rgba(83, 18, 127, .36), rgba(2, 2, 2, .36), rgba(83, 18, 127, .31));
    --font-family: "Poppins";
    --font-family-bold: "Poppins-Bold";
    --font-family-medium: "Poppins-Medium";
    --font-family-regular: "Poppins-Regular";
    --box-drink-clr: rgba(2, 20, 36, .75);
    --box-icn-drink-clr: rgba(0, 117, 255, .1);
    --drink-clr1: #0075ff;
    --drink-clr2: #004c83;
    --box-eat-clr: rgba(24, 15, 7, .75);
    --box-icn-eat-clr: rgba(255, 136, 0, .1);
    --eat-clr1: #ffa800;
    --eat-clr2: #834f00
}

.prompt-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    color: var(--white);
    font-family: var(--font-family)
}

.prompt-container .prompt-contain {
    min-width: 302px;
    min-height: 182px;
    background-color: var(--black2-40);
    border-radius: .5vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    --box-shadow: 0 0 5px var(--black2-60)
}

.prompt-container .prompt-contain .desc {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    margin-top: 10px;
    margin-bottom: 15px
}

.prompt-container .prompt-contain h1 {
    margin-top: 34px;
    font-weight: 500;
    font-size: 22px;
    line-height: 33px;
    font-weight: 700
}

.prompt-container .prompt-contain b {
    color: var(--white)
}

.prompt-container .prompt-contain .buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 13.47px;
    gap: 13.47px;
    margin-bottom: 24px
}

.prompt-container .prompt-contain .buttons .btn {
    color: #fff;
    min-width: 115px;
    padding: 0 15px;
    height: 35px;
    --border-radius: 2px;
    border: none;
    text-align: center;
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: 15.6711px;
    line-height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s;
    border-radius: .5vh
}

.prompt-container .prompt-contain .buttons .btn:hover {
    filter: brightness(.8);
    transition: filter .3s
}

.prompt-container .prompt-contain .buttons .btn b {
    font-size: 12.6711px;
    color: var(--white);
    margin-left: -15px
}

.prompt-container .prompt-contain .buttons .refuse {
    background-color: var(--red)
}

.prompt-container .prompt-contain .buttons .accept {
    color: var(--white);
    background-color: var(--green)
}

svg {
    position: relative;
    left: -15px;
    top: auto;
    height: 50%;
    width: 50%
}

#inputTextArea {
    width: 75%;
    min-height: 30px;
    border: none;
    font-size: 16px;
    border-radius: .5vh;
    padding: 5px;
    color: var(--white);
    background: var(--black2-40);
    font-family: Manrope, sans-serif;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    resize: none;
    margin-bottom: 20px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block
}

#inputTextArea:focus {
    outline: none;
    background: var(--black2-60);
    box-shadow: 0 0 5px var(--black2-80)
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.alert-notification {
    position: absolute;
    top: 1.5%;
    left: 50%;
    width: 35vh;
    height: 7vh;
    color: #fff;
    font-size: 1.4vh;
    background-color: var(--black2-40);
    border-radius: .5vh;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5vh;
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.alert-notification.show {
    display: flex;
    opacity: 1;
    animation: bounceTDown .5s ease-in-out forwards
}

.alert-notification.hide {
    animation: byebyeUp .5s ease-in-out forwards;
    opacity: 0;
    transition: opacity .5s ease-in-out
}

.alert-notification .title {
    font-size: 1.5vh;
    font-weight: 700;
    border-bottom: 2px solid var(--global-main-color);
    border-radius: 2px
}

@keyframes bounceTDown {
    0% {
        transform: translate(-50%, -100%);
        opacity: 0
    }

    to {
        transform: translate(-50%);
        opacity: 1
    }
}

@keyframes byebyeUp {
    0% {
        transform: translate(-50%);
        opacity: 1
    }

    to {
        transform: translate(-50%, -100%);
        opacity: 0
    }
}

.notification-container {
    position: absolute;
    bottom: 18.5%;
    left: 1%;
    transition: all .5s;
    font-family: var(--font-family);
    color: #fff;
    padding: 10px;
    z-index: 1000;
    margin-bottom: 5px
}

.notification-container .notification-list .notif {
    animation: bounceT .75s ease-in-out;
    width: 270px;
    display: none;
    flex-direction: column;
    background-color: var(--black2-40);
    border-radius: 5px;
    text-align: left
}

.notification-container .notification-list .notif .header-container {
    width: 100%;
    height: 7vh
}

.notification-container .notification-list .notif .header-container .header {
    opacity: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 5px 5px 0 0;
    background-color: var(--black2-40)
}

.notification-container .notification-list .notif .notification-bottom {
    padding: 1vh
}

.notification-container .notification-list .notif .notification-bottom .notification-titles {
    display: flex;
    align-items: center;
    margin-bottom: 1.2vh
}

.notification-container .notification-list .notif .notification-bottom .notification-titles .icon-container {
    height: 5.5vh;
    width: 5.5vh;
    margin-right: 1vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.icon {
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
    background-color: var(--black2-40)
}

.notification-container .notification-list .notif .notification-bottom .notification-titles .icon-container .icon {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: var(--black2-40)
}

.notification-container .notification-list .notif .notification-bottom .notification-titles .info {
    display: flex;
    flex-direction: column
}

.notification-container .notification-list .notif .notification-bottom .notification-titles .info .title {
    font-size: 1.45vh;
    font-weight: 700;
    font-family: var(--font-family)
}

.notification-container .notification-list .notif .notification-bottom .notification-titles .info .subtitle {
    font-family: var(--font-family);
    font-size: 1.4vh;
    color: hsla(0, 0%, 100%, .5)
}

.notification-container .notification-list .notif .notification-bottom .notification-content {
    font-size: 1.3vh;
    font-family: var(--font-family);
    margin-bottom: 5px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    display: block;
    white-space: normal;
    max-height: 100px
}

.notification-container .notification-list .notif .notification-bottom .notification-content img {
    width: 4vh;
    height: auto
}

.notification-container .notification-list .notif .progress-back {
    background-color: var(--black2-40);
    width: 100%;
    height: .25vh;
    border-radius: 0 0 5px 5px
}

.notification-container .notification-list .notif .progress-back .progress-bar {
    background-color: var(--global-main-color);
    height: 100%;
    width: 100%;
    border-radius: 5px;
    transition: width 0s
}

.notification-container .notification-list .byebyenotif {
    animation: byebye .5s ease-in-out forwards
}

@keyframes bounceT {
    0% {
        transform: translateX(-100%);
        opacity: 0
    }

    60% {
        transform: translateX(10px);
        opacity: 1
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes byebye {
    0% {
        transform: translateX(0);
        opacity: 1
    }

    to {
        transform: translateX(-100%);
        opacity: 0
    }
}

.s {
    color: #fff
}

.u {
    color: #17191daa
}

.r {
    color: #c9302f
}

.g,
.r {
    font-size: 1.45vh
}

.g {
    color: #5fa05d
}

.b {
    color: #0fb3da
}

.b,
.y {
    font-size: 1.3vh
}

.y {
    color: #c0a24b
}

.o {
    color: #fb8936
}

.o,
.p {
    font-size: 1.3vh
}

.p {
    color: #b19bd9
}

.h {
    font-weight: 700;
    font-size: 1.3vh
}

#infors {
    position: absolute;
    top: 34px;
    right: 20px;
    width: 235px
}

.infor {
    position: relative;
    width: 235px;
    height: 32px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .247));
    border-radius: .5vh
}

.infor:after {
    content: "";
    position: absolute;
    right: -2;
    top: 50%;
    width: 4px;
    height: 20px;
    background-color: #2073c0;
    transform: translateY(-50%);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px
}

.infor-server {
    position: relative;
    width: 200px;
    height: 48px;
    margin-bottom: 7px;
    margin-left: 35px;
    background-color: var(--black2-40);
    color: #fff;
    font-size: 14px;
    border-radius: .5vh
}

.infor-server:after {
    content: "";
    position: absolute;
    right: -2px;
    top: 50%;
    width: 4px;
    height: 30px;
    background-color: #2073c0;
    transform: translateY(-50%);
    border-radius: .5vh
}

.linetop {
    position: absolute;
    right: 0;
    top: 10px;
    width: 2px;
    height: 20px;
    font-weight: 900
}

* {
    padding: 0;
    margin: 0
}

.container-server {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
    align-items: center;
    text-align: center
}

.g1 {
    grid-area: 1/1/2/4
}

.g1,
.g2 {
    display: table
}

.g2 {
    grid-area: 1/4/2/7
}

.g3 {
    grid-area: 2/1/3/7;
    text-align: left
}

.g3,
.g4 {
    display: table
}

.g4 {
    grid-area: 1/7/3/8
}

.g4 img {
    width: 40px;
    margin-right: 5px
}

.g1 .badge,
.g2 .badge {
    margin-right: 5px;
    width: 16px
}

.g1-content,
.g2-content,
.g3-content,
.g4-content {
    margin-top: 1px
}

.imagegroup {
    right: 170px
}

.imagegroup,
.imageplayer {
    position: absolute;
    top: -5px;
    height: 15px;
    width: 15px
}

.imageplayer {
    right: 85px
}

.logo {
    position: absolute;
    right: 5px;
    top: -5px;
    width: 60px;
    height: 40px
}

.discordgg {
    right: 84px;
    bottom: -9px;
    font-weight: 500;
    font-size: 10px;
    color: #fff;
    text-shadow: 0 .0925925926vh 0 rgba(0, 0, 0, .67)
}

.discordgg,
.server {
    position: absolute;
    letter-spacing: .2px
}

.server {
    right: 70px;
    bottom: -1px;
    font-family: var(--font-family);
    font-weight: 500px;
    font-size: 19px;
    color: #2073c0;
    text-shadow: 0 .0925925926vh 4px rgba(0, 0, 0, .67)
}

.countgg {
    position: absolute;
    right: 145px;
    top: -4px;
    align-content: flex-start
}

#HelpNotify {
    top: 34px;
    position: absolute;
    bottom: 18.5%;
    left: 1%;
    transition: all .5s;
    font-family: var(--font-family);
    padding: 10px;
    z-index: 1000;
    margin-bottom: 5px
}

.HelpNotify-server {
    position: relative;
    width: auto;
    height: 34px;
    margin-left: 35px;
    background-color: var(--black2-40);
    border-radius: 0 5px 5px 0;
    justify-content: center;
    align-items: center
}

.HelpNotify-server:after {
    content: "";
    position: absolute;
    left: -2px;
    top: 50%;
    width: 4px;
    height: 20px;
    background-color: #2073c0;
    transform: translateY(-50%);
    border-radius: .5vh
}

.HelpNotify-content {
    font-weight: 700;
    font-size: 16px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    padding-top: 8px
}

h1 {
    font-family: bedave, sans-serif;
    display: inline-block;
    border-radius: 2px;
    padding-left: 5px;
    padding-right: 5px;
    color: #000;
    background: #fff;
    font-size: 15px
}

.container-drink {
    position: absolute;
    left: 28.5vh;
    bottom: 3.0185vh;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .463vh
}

.box-drink {
    width: 11.3889vh;
    height: 2.5185vh;
    gap: .6481vh;
    background: #004c83ad
}

.box-drink,
.box-drink-icn {
    display: flex;
    align-items: center;
    border-radius: 5px
}

.box-drink-icn {
    margin-left: .8vh;
    width: 1.6519vh;
    height: 1.6519vh;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    border: .1852vh solid var(--box-icn-drink-clr)
}

.box-drink-icn img {
    width: 1.8vh
}

.progress-drink {
    width: 7.2222vh;
    background: var(--black2-50)
}

.progress-drink,
.progress-drink-progress {
    display: flex;
    height: .6481vh;
    align-items: center;
    flex-shrink: 0;
    border-radius: 5px
}

.progress-drink-progress {
    background: linear-gradient(180deg, var(--drink-clr1) 0, var(--drink-clr2) 100%);
    max-width: 100%
}

.container-eat {
    position: absolute;
    left: 28.5vh;
    bottom: 6.0185vh;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .463vh
}

.box-eat {
    width: 11.3889vh;
    height: 2.5185vh;
    gap: .6481vh;
    background: #975406b4
}

.box-eat,
.box-eat-icn {
    display: flex;
    align-items: center;
    border-radius: 5px
}

.box-eat-icn {
    margin-left: .8vh;
    width: 1.6519vh;
    height: 1.6519vh;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    border: .1852vh solid var(--box-icn-eat-clr)
}

.box-eat-icn img {
    width: 1.8vh
}

.progress-eat {
    width: 7.2222vh;
    background: var(--black2-50)
}

.progress-eat,
.progress-eat-progress {
    display: flex;
    height: .6481vh;
    align-items: center;
    flex-shrink: 0;
    border-radius: 5px
}

.progress-eat-progress {
    background: linear-gradient(180deg, var(--eat-clr1) 0, var(--eat-clr2) 100%);
    max-width: 100%
}

.container-health {
    position: absolute;
    left: 28.5vh;
    bottom: 9.0185vh;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .463vh
}

.box-health {
    width: 11.3889vh;
    height: 2.5185vh;
    gap: .6481vh;
    background: #cc1414ad
}

.box-health,
.box-health-icn {
    display: flex;
    align-items: center;
    border-radius: 5px
}

.box-health-icn {
    margin-left: .8vh;
    width: 1.6519vh;
    height: 1.6519vh;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    border: .1852vh solid var(--box-icn-eat-clr)
}

.box-health-icn img {
    width: 1.8vh
}

.progress-health {
    width: 7.2222vh;
    background: var(--black2-50)
}

.progress-health,
.progress-health-progress {
    display: flex;
    height: .6481vh;
    align-items: center;
    flex-shrink: 0;
    border-radius: 5px
}

.progress-health-progress {
    background: linear-gradient(180deg, var(--eat-clr1) 0, var(--eat-clr2) 100%);
    max-width: 100%
}

.container-armor {
    position: absolute;
    left: 28.5vh;
    bottom: 12.0185vh;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .463vh
}

.box-armor {
    width: 11.3889vh;
    height: 2.5185vh;
    gap: .6481vh;
    background: #066e97b4
}

.box-armor,
.box-armor-icn {
    display: flex;
    align-items: center;
    border-radius: 5px
}

.box-armor-icn {
    margin-left: .8vh;
    width: 1.6519vh;
    height: 1.6519vh;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    border: .1852vh solid var(--box-icn-eat-clr)
}

.box-armor-icn img {
    width: 1.8vh
}

.progress-armor {
    width: 7.2222vh;
    background: var(--black2-50)
}

.progress-armor,
.progress-armor-progress {
    display: flex;
    height: .6481vh;
    align-items: center;
    flex-shrink: 0;
    border-radius: 5px
}

.progress-armor-progress {
    background: linear-gradient(180deg, var(--eat-clr1) 0, var(--eat-clr2) 100%);
    max-width: 100%
}