:root {
    --status-error: #ff4848;
    --status-success: #73ff67;
    --status-warn: #ffb84d;
    --primary: hsl(236, 0%, 84%);
    --shade: hsl(236, 2%, 72%);
    --gray: hsl(236, 0%, 50%);
    
    --white: hsl(236, 0%, 90%);
    --icon-size: 17px;
}
body {
    background: hsl(236, 6%, 11%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
p {
    margin: 0px;
}
.c-primary {
    color: var(--primary);
}
.c-gray {
    color: var(--gray);
}
.c-shade {
    color: var(--shade);
}
.c-white {
    color: var(--white);
}
.flex {
    display: flex;
}
.column {flex-direction: column;}
.x-center {justify-content: center;}
.y-center {align-items: center;}
.font-light {font-weight: 300;}
.font-normal {font-weight: 500;}
.font-bold {font-weight: 700;}
#system-feedback--item-container {
    position: absolute;
    right: 14px;
    top: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: 600px;
    overflow: hidden;
    z-index: 999999;
}
.popup-bg {background: hsl(236, 6%, 8%);}
.border {border-radius: 4px;}
.s-feedback--container {display: flex;width: 400px;height: 50px;align-items: center;gap: 10px;padding: 6px;transform: translateX(100%);opacity: 0;}
.s-feedback--container > .type {background: #ff4949;min-width: 5px;height: 100%;border-radius: 360px;}
.s-feedback--container[type="error"] > .type {background: var(--status-error);}
.s-feedback--container[type="success"] > .type {background: var(--status-success);}
.s-feedback--container[type="warn"] > .type {background: var(--status-warn);}
.s-feedback--container > .content.container {display: flex;flex-direction: column;align-items: flex-start;justify-content: center;gap: 2px;}
.s-feedback--container > .content.container > p {margin: 0px;}
.s-feedback--container > .content.container > * {font-size: 14px;text-align: left;}
.w-100 {width: 100%;}
.h-100 {height: 100%;}
.page-center {left: 50%; top: 50%; transform: translate(-50%, -50%);}
.absolute {position: absolute;}
.shadow--default {background: hsla(0, 0%, 0%, 0.46); left: 0%; top: 0%;}
.popup--container {
    opacity: 0;
    transition: opacity linear 0.12s;
}
.popup--main {
    background: hsl(236, 7%, 11%);
    border-radius: 4px;
    padding: 16px 14px;
    gap: 10px;
    width: calc(100% - 60px);
    max-width: 400px;
    transform: translate(-50%, -50%)
               scale(0.9);
    transition: transform linear 0.14s;
}
.no-background {background: none;}
.no-border {border: none;}
.close-interaction-svg--container {
    width: min-content;
    height: min-content;
    padding: 2px;
    border-radius: 2px;
}
.close-interaction-svg--container:hover {
    background: hsla(236, 4%, 14%, 0.87);
}
.close-interaction-svg--container > svg {min-height: var(--icon-size); fill: hsl(0, 0%, 90%);}
.popup--main-title {font-size: 20px;flex: 1;}
.popup--main > main > p {
    font-size: 16px;
}
a {
    text-decoration: none;
    color: var(--shade);
}
a:hover {text-decoration: underline;}