@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: rgba(36, 95, 203, .843);
    --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
}