@font-face
{
    font-family: 'Golos';
    src: local('Golos Text'),
        url('../fonts/GolosText-VariableFont_wght.ttf');
}

@font-face
{
    font-family: 'Neue';
    font-style: normal;
    font-weight: 300;
    src: local('PP Neue Machina'),
        url('../fonts/PPNeueMachina-Light.otf');
}

@font-face
{
    font-family: 'Neue';
    font-style: normal;
    font-weight: 400;
    src: local('PP Neue Machina'),
        url('../fonts/PPNeueMachina-Regular.otf');
}

@font-face
{
    font-family: 'Neue';
    font-style: normal;
    font-weight: 800;
    src: local('PP Neue Machina'),
        url('../fonts/PPNeueMachina-Ultrabold.otf');
}

:root {
    --background-color: #FFFFFF;
    --frame-color: #F4F4F4;
    --primary-text-color: #000000;
    /* --primary-color: #1784fd;
    --background-primary-color: rgb(0, 255, 154, 0.1); */
    --primary-color: #00a161;   
    --background-primary-color: rgba(0, 255, 154, 0.1);
    --text-color: rgba(0,0,0,0.75);
    --text-dark-color: rgba(0,0,0,0.4);
    --inframe-color: #ececec;
    --text-green-color: #11d311;
    --text-red-color: #ec1313;
    --yellow-primary: rgb(255, 193, 7);
    --yellow-background: rgba(255, 193, 7, 0.1);
}

.logotype img
{
    filter: invert(1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #000000;
        --frame-color: #0D0D0D;
        --primary-text-color: #FFF;
        /* --primary-color: #1784fd;   
        --background-primary-color: rgb(0, 255, 154, 0.1); */
        --primary-color: #00FF9A;   
        --background-primary-color: rgba(0, 255, 154, 0.1);
        --text-color: rgba(255,255,255,0.75);
        --text-dark-color: rgba(255,255,255,0.4);
        --inframe-color: #141516;
        --text-green-color: #13ec13;
        --text-red-color: #ec1313;
        --yellow-primary: rgb(255, 193, 7);
        --yellow-background: rgba(255, 193, 7, 0.1);
    }

    .logotype img
    {
        filter: invert(0);
    }
}

*
{
    box-sizing: border-box;
}

button:focus,
button:focus-visible
{
    outline: none;
}

button
{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

.input p, .select-desc
{
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    color: var(--text-color);
    margin: 0;
    margin-bottom: 5px;
}


.text-style h1
{
    margin: 20px 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-weight: 400;
    font-size: 24px;
}

.text-style h2
{
    margin: 20px 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-weight: 400;
    font-size: 20px;
}

.text-style p
{
    margin: 10px 0;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-weight: 400;
    font-size: 16px;
}

#header
{
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    padding: 10px 15px;
    background-color: var(--background-color);
    height: 57px;
}

#header > .flex
{
    height: 100%;
    align-items: center;
}

#header > .flex > .flex
{
    align-items: center;
}

.terminal-stats
{
    display: flex;
    gap: 10px;
    flex-direction: column;
}

#navbar
{
    position: sticky;
    z-index: 99;
    min-width: calc(300px);
    height: calc(100vh - 50px);
    top: 50px;
    gap: 5px;
    display: flex;
    flex-direction: column;
}

.body-loading
{
    opacity: 0;
    transform: translateX(5px);
}

#body
{
    transition: transform 0.2s, opacity 0.2s;
    max-width: 3000px;
    margin: auto;
}

#pre-body
{
    background-color: var(--frame-color);
    flex-grow: 2;
    min-height: calc(100vh - 57px);
    height: 100%;
    overflow-x: hidden;
    border-top-left-radius: 15px;
    padding: 20px;
    margin-top: 57px;
}

.navbar-button-loader
{
    width: 16px;
}

#navbar
{
    padding: 5px 10px;
    /* width: 300px; */
    display: flex;
    position: sticky;
    top: 58px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    height: calc(100vh - 58px);
}

.mobile-navbar-toggle
{
    display: none;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background-color: transparent;
    color: var(--primary-text-color);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-navbar-toggle i
{
    font-size: 26px;
    line-height: 1;
}

.mobile-navbar-backdrop
{
    position: fixed;
    inset: 0;
    z-index: 98;
    border: none;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, visibility 0.24s ease;
}

body.mobile-navbar-open
{
    overflow: hidden;
}

body.mobile-navbar-open .mobile-navbar-backdrop
{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-navbar-toggle:hover,
.mobile-navbar-toggle:active,
body.mobile-navbar-open .mobile-navbar-toggle
{
    background-color: var(--background-primary-color);
    color: var(--primary-color);
}

.navbar-full-group:has(.navbar-group:hover) .navbar-arrow
{
    color: var(--primary-color);
}

.navbar-arrow
{
    transition: 0.3s;
}

.navbar-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--primary-text-color);
    transition: background-color 0.3s;
    border-radius: 10px;
}

.navbar-button div i{
    font-size: 14px;
    width: 16px;
}

.navbar-button div p{
    font-size: 14px;
    font-family: 'Golos', sans-serif;
    margin: 0;
}

.navbar-button div{
    display: flex;
    gap: 10px;
    transition: 0.3s;
    align-items: center;
}

.navbar-button-active p{
    color: var(--primary-color);
}
.navbar-button-active i:not(.navbar-arrow){
    color: var(--primary-color);
}
.navbar-button-active .navbar-arrow{
    transform: rotate(180deg);
}
.navbar-button:active{
    background-color: var(--background-primary-color);
}
.navbar-button:hover{
    color: var(--primary-color);
}

.navbar-group
{
    max-height: 0;
    transition: max-height 0.3s;
    overflow-y: hidden;
}

.navbar-group-inner
{
    background-color: var(--frame-color);
    border-radius: 10px;
    padding: 5px 0;
    margin-top: 5px;
}

.navbar-button-selected
{
    background-color: var(--background-primary-color);
    color: var(--primary-color);

}

.navbar-frame
{
    width: 250px;
    padding: 5px 10px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body
{
    margin: 0;
    background-color: var(--background-color);
}

.logotype
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.logotype h1
{
    font-size: 22px;
    margin: 0;
    line-height: 1;
    font-weight: 600;
    font-family: 'Unbounded', sans-serif;
    color: var(--primary-text-color);
}

.logotype img
{
    height: 20px;
    width: auto;
}

.dropdown-button
{
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
    color: var(--primary-text-color);
    border-radius: 5px;
    padding: 8px 12px;
}

.header-button
{
    font-family: 'Neue', sans-serif;
    color: var(--primary-text-color);
    border-radius: 5px;
    padding: 8px 12px;
    background-color: var(--frame-color);
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.dropdown-button p
{
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Neue', sans-serif;
}

.dropdown-button .dropdown-arrow
{
    font-size: 12px;
}

.dropdown-button:hover
{
    background-color: var(--frame-color);
}


.dropdown-body
{
    position: absolute;
    z-index: 99;
    /* transform: scaleY(0.92) translateY(-4%); */
    opacity: 0;
    transition: 0.2s;
    background-color: white;
    border-radius: 5px;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    padding: 5px;
    /* border: 1px solid var(-); */
    background-color: var(--background-color);
    width: max-content;
    gap: 5px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
}

.dropdown-box
{
    position: relative;
}

.dropdown-box:hover .dropdown-body
{
    visibility: visible;
    transform: none;
    opacity: 1;
}

.dropdown-right
{
    right: 0;
}

.dropdown-left
{
    right: 0;
}

#header .dropdown-body
{
    left: auto;
    right: 0;
    top: calc(100% + 5px);
    transform: none;
}

#header .dropdown-box:hover .dropdown-body,
#header .dropdown-box:focus-within .dropdown-body
{
    transform: none;
}

.header-dropdown-button
{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: var(--frame-color);
    color: var(--primary-text-color);
    cursor: pointer;
    font-family: 'Neue', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    transition: background 0.3s;
}

.header-dropdown-button:hover
{
    background: var(--inframe-color);
    text-decoration: underline;
}

.header-dropdown-button i
{
    width: 16px;
    color: inherit;
    font-size: 16px;
    line-height: 1;
}

.console-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.console-header h1
{
    min-width: 0;
    margin: 0;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.console-grid
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    align-items: stretch;
    gap: 10px;
}

.console-grid-power-only
{
    display: block;
}

.stats-frame
{
    background-color: var(--inframe-color);
    border-radius: 10px;
    padding: 10px;
    min-width: 0;
}

.console-grid .terminal-stats
{
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 10px;
}

.stats-frame .stats-name
{
    font-family: 'Neue', sans-serif;
    font-size: 14px;
    width: 100%;
    transition: color 0.3s;
    color: var(--text-color);
    margin: 0;
}

.stats-usage
{
    font-family: 'Neue', sans-serif;
    font-size: 16px;
    width: 100%;
    color: var(--primary-text-color);
    margin: 0;
}

.stats-limit
{
    color: var(--text-color);
}

.stats-logo
{
    background-color: var(--background-primary-color);
    padding: 15px;
    font-size: 20px;
    color: var(--primary-color);
    margin: 0;
    margin-right: 10px;
    border-radius: 10px;
}

.stats-label
{
    min-width: 0;
}

.stats-label > div
{
    min-width: 0;
    align-items: flex-start;
}

.stats-chart
{
    max-height: 150px;
    margin-top: 10px;
    min-height: 90px;
}

.stats-frame:hover .stats-label .stats-name
{
    color: var(--primary-text-color);
}

.stats-usage i
{
    font-size: 14px;
    margin-right: 5px;
}

.terminal-preframe
{
    /* max-height: calc(100vh - 150px); */
    flex: 1;
    min-height: 520px;
    padding: 0 10px;
    padding-top: 10px;
    border-radius: 10px;
    background-color: #141516;
    overflow: hidden;
}

.terminal-preframe-message
{
    min-height: 0;
    padding: 0;
    background-color: transparent;
    overflow: visible;
}

#terminalFrame
{
    height: 100%;
    min-width: 0;
}

.terminal-container
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: min(720px, calc(100vh - 180px));
}

.terminal-input
{
    flex: 1;
    min-width: 0;
    font-family: 'Golos', sans-serif;
    font-size: 16px;
    font-weight: 400;
    background: none;
    border: none;
    color: var(--primary-text-color);
}

.terminal-input:focus
{
    outline: none;
    background-color: transparent;
}

.terminal-preinput
{
    background-color: var(--inframe-color);
    padding-right: 0;
    border-radius: 10px;
    padding: 10px 12px;
}

.terminal-preinput i
{
    color: var(--text-color);
    transition: color 0.3s;
    flex-shrink: 0;
}

.terminal-preinput:hover i
{
    color: var(--primary-text-color);
}

.stats-label .stats-arrow
{
    color: var(--text-color);
    margin-right: 10px;
    font-size: 16px;
}

.terminalActionButtons button
{
    padding: 10px 15px;
    font-family: 'Neue', sans-serif;
    font-size: 16px;
    transition: opacity 0.3s;
    border-radius: 5px;
    font-weight: 400;
    cursor: pointer;
    border: none;
    min-height: 40px;
    white-space: nowrap;
}

.terminalActionButtons
{
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 10px;
    justify-content: end;
}

.terminalActionButtons button:hover
{
    opacity: 0.8;
}

.terminalActionButtons button:disabled,
.terminalActionButtons button[disabled],
.frame-button:disabled,
.frame-button[disabled]
{
    cursor: not-allowed;
    opacity: 0.5;
}

.terminalActionButtons button.start
{
    background-color: var(--background-primary-color);
    color: var(--primary-color);
}

.terminalActionButtons button.restart
{
    background-color: var(--inframe-color);
    color: var(--primary-text-color)
}

.terminalActionButtons button.stop, .terminalActionButtons button.kill
{
    background-color: var(--text-red-color);
    color: var(--primary-text-color)
}

.mini-console
{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 120;
    width: 450px;
    height: 320px;
    min-width: 320px;
    min-height: 190px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgb(255, 255, 255, 0.08);
    border-radius: 10px;
    background-color: rgb(20, 21, 22, 0.9);
    box-shadow: 0 18px 45px rgb(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
}

.mini-console-smooth
{
    transition: left 0.22s ease, top 0.22s ease, width 0.22s ease, height 0.22s ease;
}

.mini-console-resize
{
    position: absolute;
    z-index: 2;
    padding: 0;
    border: none;
    background: transparent;
}

.mini-console-resize-n,
.mini-console-resize-s
{
    left: 12px;
    right: 12px;
    height: 8px;
    cursor: ns-resize;
}

.mini-console-resize-n
{
    top: -4px;
}

.mini-console-resize-s
{
    bottom: -4px;
}

.mini-console-resize-e,
.mini-console-resize-w
{
    top: 12px;
    bottom: 12px;
    width: 8px;
    cursor: ew-resize;
}

.mini-console-resize-e
{
    right: -4px;
}

.mini-console-resize-w
{
    left: -4px;
}

.mini-console-resize-ne,
.mini-console-resize-nw,
.mini-console-resize-se,
.mini-console-resize-sw
{
    width: 16px;
    height: 16px;
}

.mini-console-resize-ne
{
    top: -6px;
    right: -6px;
    cursor: nesw-resize;
}

.mini-console-resize-nw
{
    top: -6px;
    left: -6px;
    cursor: nwse-resize;
}

.mini-console-resize-se
{
    right: -6px;
    bottom: -6px;
    cursor: nwse-resize;
}

.mini-console-resize-sw
{
    left: -6px;
    bottom: -6px;
    cursor: nesw-resize;
}

.mini-console-resize-n::after
{
    content: '';
    position: absolute;
    top: 1px;
    left: calc(50% - 22px);
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgb(248, 248, 242, 0.28);
}

.mini-console-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid rgb(255, 255, 255, 0.06);
    cursor: move;
    user-select: none;
}

.mini-console-title
{
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    border: none;
    background: none;
    color: #F8F8F2;
    cursor: pointer;
    font-family: 'Neue', sans-serif;
    font-size: 15px;
    font-weight: 400;
}

.mini-console-title span
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-console-title i
{
    color: var(--primary-color);
}

.mini-console-actions
{
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.mini-console-action
{
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgb(255, 255, 255, 0.07);
    border-radius: 6px;
    background-color: rgb(255, 255, 255, 0.08);
    color: #F8F8F2;
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s;
}

.mini-console-action:hover
{
    background-color: rgb(255, 255, 255, 0.14);
}

.mini-console-action:disabled
{
    cursor: not-allowed;
    opacity: 0.45;
}

.mini-console-start
{
    color: var(--primary-color);
}

.mini-console-stop,
.mini-console-kill
{
    color: var(--text-red-color);
}

.mini-console-body
{
    min-height: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}

.mini-console-frame
{
    min-height: 0;
    flex: 1;
    padding: 6px;
    overflow: hidden;
    border-radius: 8px;
    background-color: rgb(0, 0, 0, 0.22);
}

.mini-console-input-row
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background-color: rgb(255, 255, 255, 0.07);
}

.mini-console-input-row i
{
    color: rgb(248, 248, 242, 0.55);
    font-size: 13px;
}

.mini-console-input-row input
{
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    background: none;
    color: #F8F8F2;
    font-family: 'Golos', sans-serif;
    font-size: 14px;
}

.mini-console-input-row input::placeholder
{
    color: rgb(248, 248, 242, 0.45);
}

.mini-console-error
{
    padding: 7px 9px;
    border-radius: 7px;
    background-color: rgb(236, 19, 19, 0.16);
    color: #ff8d8d;
    font-family: 'Golos', sans-serif;
    font-size: 12px;
}

.mini-console-error.info
{
    background-color: rgba(0, 255, 154, 0.12);
    color: #7ab8ff;
}

.mini-console-error.success
{
    background-color: rgba(25, 135, 84, 0.12);
    color: #68d391;
}

.mini-console-no-console .mini-console-frame,
.mini-console-no-console .mini-console-input-row
{
    display: none;
}

.mini-console-collapsed
{
    height: 48px !important;
    min-height: 48px;
}

.mini-console-collapsed .mini-console-body
{
    display: none;
}

.mini-console-collapsed [data-toggle] i
{
    transform: rotate(180deg);
}

.information-frame
{
    padding: 10px;
    border-radius: 10px;
    background-color: var(--background-color);
}

.settings-startup-row,
.settings-startup-command-frame,
.settings-startup-select-frame
{
    min-width: 0;
}

.settings-startup-row
{
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
    align-items: flex-start;
    gap: 10px;
}

.settings-startup-command
{
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    font-family: 'Roboto Mono', monospace;
    line-height: 1.45;
}

.startup-variable-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    gap: 10px;
}

.startup-variables-section
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.startup-variables-section > h2
{
    margin: 0;
}

.startup-variable-card
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    border: 1px solid rgba(0,0,0,0);
    transition: border-color 0.3s, background 0.3s;
}

.startup-variable-invalid
{
    border-color: rgba(236, 19, 19, 0.55);
}

.startup-variable-title
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.startup-variable-title h3
{
    color: var(--primary-text-color);
    font-size: 18px;
    font-family: 'Neue', sans-serif;
    font-weight: 400;
    margin: 0;
    overflow-wrap: anywhere;
}

.startup-variable-description,
.startup-variable-error,
.startup-empty
{
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

.startup-variable-error
{
    color: #ff8d8d;
    display: none;
}

.startup-variable-invalid .startup-variable-error
{
    display: block;
}

.startup-variable-invalid input
{
    border: 1px solid rgba(236, 19, 19, 0.55);
}

.server-access-message
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

.server-access-message p
{
    margin: 0;
}

.server-access-message-title
{
    color: var(--primary-text-color);
    font-weight: 500;
    font-size: 16px;
}

.server-info-layout
{
    display: grid;
    gap: 10px;
}

.server-info-grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
}

.server-info-grid .information-frame
{
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    gap: 10px;
}

.server-info-grid .information-list
{
    flex: 1;
}

.profile-info-grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
}

.profile-info-grid .information-frame
{
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    gap: 10px;
}

.profile-info-grid .information-list
{
    flex: 1;
}

.referal-info-grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
}

.referal-info-grid .information-frame
{
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    gap: 10px;
}

.referal-info-grid .information-list
{
    flex: 1;
}

.information-frame h2
{
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-weight: 400;
    margin: 10px 20px;
    font-size: 16px;
}

.information-frame p
{
    margin: 0;
    font-size: 16px;
}

.information-frame .information-list-key
{
    font-size: 14px;
    font-family: 'Golos', sans-serif;
    color: var(--text-color);
}

.information-frame .information-list-value
{
    font-family: 'Neue', sans-serif;
    color: var(--primary-text-color);
}

.information-list div.flex-item
{
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* min-width: max(calc(50% - 10px), 200px); */
    max-height: max-content;
}

.information-list
{
    transition: background 0.3s;
    border-radius: 10px;
    padding: 20px;
    height: 100%;
    /* background-color: var(--background-color); */
    background-color: var(--frame-color);
    display: flex;
    flex-direction: column;
    justify-content:start   ;
    gap: 15px;
}

.information-frame:hover:not(.information-frame-nohover) .information-list
{
    background-color: var(--inframe-color);
}


#server-state .navbar-button-loader
{
    height: 21px;
    width: 21px;
}

.copy-button
{
    cursor: pointer;
}

.view-content
{
    visibility: hidden;
    display: none;
}

.sidebar
{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 200;
    background: rgba(0,0,0,0);
    visibility: hidden;
    transition: background 0.3s, visibility 0s linear 0.3s;
}

.sidebar-scroll
{
    overflow-y: scroll;
    height: 100%;
    pointer-events:none;
}

.sidebar-body
{
    pointer-events: all;
    width: 75%;
    min-width: 300px;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px;
    padding-bottom: 50px;
    transform: translateX(-100%);
    transition: all 0.3s;
    background-color: var(--frame-color);
    min-height: 100%;
    border-radius: 0 20px 20px 0;
}

.sidebar-right .sidebar-body
{
    border-radius: 20px 0 0 20px;
    float: right;
    transform: translate(100%);
}


.sidebar-body h1
{
    margin: 0;
    font-family: 'Neue', sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin: 10px 0;
    color: var(--primary-text-color);
}

.sidebar-active
{
    transition: background 0.3s, visibility 0s linear;
    visibility: visible;
    background: rgba(0,0,0,0.5);
}

.sidebar-active .sidebar-body
{
    transform: none;
}

.sidebar-scroll, .pre-select-box {
      overflow: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
}

.sidebar-scroll::-webkit-scrollbar,.pre-select-box::-webkit-scrollbar {
      width: 0;
      height: 0;
}
.input input, .input textarea
{
    border-radius: 10px;
    color: var(--primary-text-color);
    margin: 0;
    border: none;
    line-height: 26px;
    background-color: var(--inframe-color);
    width: 100%;
    padding: 10px 15px;
    font-size: 16px;
    font-family: 'Golos', sans-serif;
}

.input textarea
{
    min-height: 140px;
    resize: none;
    line-height: 22px;
}

.input input:focus, .input textarea:focus
{
    outline: none;
}

.input textarea:disabled
{
    color: var(--primary-text-color);
    opacity: 1;
}

.base-button, .grey-button, .frame-button, .danger-button
{
    border: none;
    background-color: var(--background-primary-color);
    width: 100%;
    padding: 10px 15px;
    line-height: 26px;
    font-size: 16px;
    font-family: 'Neue', sans-serif;
    margin: 0;
    border-radius: 10px;
    color: var(--primary-color);
    cursor: pointer;
    position: relative;
    transition: opacity 0.3s;
}

.frame-button
{
    color: var(--primary-text-color);
    background-color: var(--frame-color);
}
.grey-button
{
    color: var(--primary-text-color);
    background-color: var(--inframe-color);
}

.danger-button
{
    color: var(--text-red-color);
    background-color: rgba(236, 19, 19, 0.1);
}

.base-button:hover, .grey-button:hover, .frame-button:hover, .danger-button:hover
{
    opacity: 0.8;
}

.base-button:disabled, .grey-button:disabled, .frame-button:disabled, .danger-button:disabled
{
    cursor: not-allowed;
    opacity: 0.45;
}

.base-button .navbar-button-loader, .grey-button .navbar-button-loader, .frame-button .navbar-button-loader, .danger-button .navbar-button-loader, .dashboard-online-button .navbar-button-loader
{
    width: 20px;
    position: absolute;
    left: 15px;
    top: 13px;
}


.error-message
{
    opacity: 0;
    transition: 0.3s;
}

.error-message.active
{
    opacity: 1;
}

.select
{
    position: relative;
}

.select .select-button, .select .select-box .option
{
    vertical-align: middle;
    text-align: left;
    font-family: 'Golos', sans-serif;
    font-size: 16px;
    color: var(--primary-text-color);
    border: 1px solid var(--inframe-color);
    padding: 9px 14px;
    background-color: var(--inframe-color);
    border-radius: 10px;
    width: 100%;
    font-weight: 400;
    transition: border-radius 0s linear 0.3s, background 0.3s;
    box-sizing: border-box;
    margin: 0;
    position: relative;
    line-height: calc(100% + 10px);
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}

.select-box-opened .select-button
{
    transition: border-radius 0s linear 0s, background 0.3s;
    border-radius: 10px 10px 0 0;
    background-color: var(--frame-color);
}

.select .select-button
{
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
    background-position: calc(100% - 16px) center;
    padding-right: 46px;
}

.select-box-opened .pre-select-box
{
    border-radius: 0 0 10px 10px ;
    max-height: 200px;
    border-bottom: 1px solid var(--inframe-color);
}

.pre-select-box
{
    position: absolute;
    max-height: 0px;
    overflow-x: hidden;
    overflow-y: scroll;
    transition: max-height 0.3s, border-bottom 0s linear 0.15s, border-top 0s linear 0.15s;
    min-width: 100%;
    z-index: 9;
}

.select-box
{
    /* border-radius: 10px 10px 0 0 ; */
    border-radius: 0 0 10px 10px ;
    background-color: var(--inframe-color);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--inframe-color);
    border-bottom-width: 0;
    border-top-width: 0;
}

.select .select-button img, .select .select-box .option img
{
    vertical-align: middle;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.select .select-button .preimage, .select .select-box .option .preimage
{
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--frame-color);
    border-radius: 5px;
}

.select .select-box .option
{
    background-color: var(--inframe-color);
    transition: 0.3s background, 0.3s color;
    border-color: rgba(0,0,0,0);
    border-radius: 0px;
}
.select .select-box .option:hover
{
    color: var(--primary-color);
    background-color: var(--frame-color);
}

.select .option.selected
{
    background-color: var(--background-primary-color) !important;
    color: var(--primary-color);
}

.select .select-button:hover, .select-box-opened .select-button
{
    border: 1px solid var(--inframe-color);
}

.installer-version-header
{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.installer-version-header h1
{
    margin-bottom: 0;
}

.installer-page-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.recover-password-button
{
    background-color: var(--frame-color);
    padding: 5px 10px;
    margin-bottom: 5px;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    border-radius: 10px;
    cursor: pointer;
    border: none;
}

.auth-button-row .grey-button
{
    background-color: var(--frame-color);
}

.installer-page-header h1
{
    margin-bottom: 0;
}

.installer-extra-eggs-button
{
    width: auto;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.installer-back-button
{
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 10px;
    color: var(--primary-text-color);
    background-color: var(--inframe-color);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, color 0.3s, opacity 0.3s;
}

.installer-back-button:hover
{
    color: var(--primary-color);
    background-color: var(--background-primary-color);
}

.fork
{
    padding: 10px;
    background-color: var(--frame-color);
    border-radius: 10px;
    flex: 1;
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
    cursor:pointer;
    transition: background 0.3s;
}

.fork img
{
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
    object-fit: contain;
    background-color: var(--inframe-color);
    border-radius: 10px;
    /* padding: 5px; */
}

.fork-list
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fork-label
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fork-categories
{
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.fork-category
{
    background-color: var(--background-primary-color);
    border-radius: 5px;
    padding: 5px 10px;
}

.fork-category p
{
    font-family: 'Golos', sans-serif;
    color: var(--primary-color);
    margin: 0;
    font-size: 14px;
}


.fork-category.yellow
{
    background-color: var(--yellow-background);
}



.fork-category.yellow p
{
    color: var(--yellow-primary);
}

.fork-name
{
    color: var(--primary-text-color);
    font-size: 20px;
    font-family: 'Neue', sans-serif;
    font-weight: 400;
    margin: 0;
    line-height: 100%;
}

.fork-list .bi-arrow-right, .fork-list .navbar-button-loader
{
    color: var(--primary-text-color);
    position: absolute;
    right: 38px;
    font-size: 16px;
    transition: right 0.3s;
}

/* .fork:hover .bi-arrow-right
{
    right: 35px;
} */

.fork:hover
{
    background: var(--inframe-color);
}

.fork-name span
{
    color: var(--text-color);
    font-size: 14px;
    font-style:italic;
    font-family: 'Golos', sans-serif;
}

.fork
{
    min-width: max(calc(50% - 30px), 300px);
}

.fork.version
{
    transition: opacity 0.3s, background 0.3s;
    background-color: var(--inframe-color);
    min-width: max(calc(25% - 30px), 350px);
}
.fork.version:hover
{
    opacity: 0.75;
}

.version-hidden
{
    visibility: hidden;
    display: none;
}

.fork-desc
{
    color: var(--text-color);
    font-size: 16px;
    font-family: 'Golos', sans-serif;
    margin: 0;
}

.version .fork-label
{
    flex-direction:row;
    align-items:center;
}

.version img
{
    width: 48px;
    height: 48px;
    background-color: var(--frame-color);
}

.checkbox
{
    display: flex;
    gap: 10px;
    align-items: center;
}

.checkbox .checkbox-input
{
    cursor: pointer;
    box-sizing: border-box;
    background-color: var(--inframe-color);
    font-size: 16px;
    border: none;
    padding: 5px;
    /* transition: border 0.15s; */
    border-radius: 5px;
    margin: 0;
    line-height: 100%;
    border: 1px solid rgba(0,0,0,0);
}

/* .checkbox .checkbox-input:hover
{
    border: 1px solid var(--inframe-color);
} */

.checkbox .checkbox-input i
{
    color: var(--primary-color);
    visibility: hidden;
}

.checkbox p
{
    margin: 0;
    font-family: 'Golos', sans-serif;
    font-size: 16px;
    color: var(--primary-text-color);
    font-weight: 400;
}

.checkbox.active .checkbox-input i
{
    visibility: visible;
}

.checkbox.active .checkbox-input
{
    background-color: var(--background-primary-color);
    color: white;
}

.checkbox.checkbox-danger.active .checkbox-input
{
    background-color: rgba(236, 19, 19, 0.12);
}

.checkbox.checkbox-danger.active .checkbox-input i,
.checkbox.checkbox-danger.active p
{
    color: var(--text-red-color);
}

#install-notification
{
    background-color: var(--yellow-background);
    padding: 15px;
    border-radius: 10px;
    border-left: 5px solid var(--yellow-primary);
}

#install-notification p
{
    color: var(--yellow-primary);
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    font-family: 'Neue', sans-serif;
}

#install-notification p i
{
    margin-right: 10px;
}

#error-notification
{
    background-color: rgba(236, 19, 19, 0.1);
    padding: 15px;
    border-radius: 10px;
    border-left: 5px solid var(--text-red-color);
}

#error-notification.notification-success
{
    background-color: rgba(25, 135, 84, 0.12);
    border-left-color: #29cc6a;
}

#error-notification p
{
    color: var(--text-red-color);
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    font-family: 'Neue', sans-serif;
}

#error-notification.notification-success p
{
    color: #29cc6a;
}

#error-notification p i
{
    margin-right: 10px;
}

.allocation, .database
{
    background-color: var(--inframe-color);
    border-radius: 10px;
    padding: 10px;
    display: grid;
    gap: 10px;
    align-items: stretch;
}

.allocation-row
{
    grid-template-columns: 68px minmax(240px, 0.8fr) minmax(260px, 1fr) 220px;
}

.database-row
{
    grid-template-columns: 68px minmax(0, 1fr) 120px;
}

.session-row
{
    grid-template-columns: 68px minmax(0, 1fr) 120px;
}

.resource-fields
{
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 10px;
}

.allocation-fields
{
    grid-template-columns: minmax(0, 1fr) 120px;
}

.database-fields
{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
}

.session-fields
{
    grid-template-columns: minmax(140px, 0.7fr) minmax(170px, 0.9fr) minmax(260px, 1.8fr);
}

.database-main
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    padding: 10px;
}

.allocation-notes
{
    min-width: 0;
    padding: 0;
}

.allocation-item, .database-item
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}

.allocation-item p, .database-item p
{
    margin: 0;
}

.allocation-button, .database-button
{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.resource-actions
{
    justify-content: flex-end;
    padding: 10px;
}

.resource-counter-row
{
    align-items: center;
}

.resource-counter-row > p
{
    line-height: 1.3;
}

.allocation-button .allocation-delete, .database-button .database-delete, .database-button .database-show
{
    color: var(--text-color);
    border: none;
    background-color: rgba(0,0,0,0);
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    transition: 0.3s;
    cursor: pointer;
}

.allocation-button .allocation-delete:hover, .database-button .database-delete:hover
{
    background-color: var(--text-red-color);
}

.database-button .database-show:hover
{
    background-color: var(--primary-color);
}

.database-button .backup-row-delete
{
    color: var(--text-red-color);
    background-color: rgba(236, 19, 19, 0.08);
}

.database-button .backup-row-delete:hover
{
    color: var(--primary-text-color);
    background-color: var(--text-red-color);
}

.server-user-permission-sections
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.server-user-permission-section
{
    padding: 15px;
    overflow: visible;
}

.server-user-permission-section-head
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0px;
    padding-bottom: 15px;
}

.server-user-permission-section-head h2,
.server-user-permission-section-head p
{
    margin: 0;
}

.server-user-permission-section-head > div:first-child
{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.server-user-permission-section-head > div:first-child p
{
    color: var(--text-color);
    font-size: 14px;
    font-family: 'Golos', sans-serif;
}

.server-user-permission-table
{
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.server-user-permission-row:first-child
{
    border-radius: 10px 10px 0 0;
}

.server-user-permission-row:last-child
{
    border-radius: 0 0 10px 10px;
}

.server-user-permission-row
{
    display: grid;
    grid-template-columns: 44px minmax(95px, 150px) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    height: auto;
    min-height: 58px;
    padding: 5px;
    background-color: var(--inframe-color);
}

.server-user-permission-checkbox
{
    justify-content: center;
}

.server-user-permission-checkbox .checkbox-input
{
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    background-color: var(--frame-color);
}

.server-user-permission-name
{
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 14px;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.server-user-permission-desc
{
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    line-height: 1.35;
    display: block;
    min-width: 0;
    max-height: none;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
}

.server-user-permissions-line
{
    margin: 8px 0 0 0;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Golos', sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

.server-user-invite-status
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: transparent;
}

.server-user-invite-status h2,
.server-user-invite-status p
{
    margin: 0;
}

.server-user-invite-status h2
{
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.25;
}

.server-user-invite-status p
{
    line-height: 1.45;
}

@media (max-width: 760px)
{
    .server-user-permission-section-head
    {
        align-items: flex-start;
        flex-direction: column;
    }

    .server-user-permission-row
    {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .server-user-permission-desc
    {
        grid-column: 2;
    }
}

.schedule-row
{
    cursor: pointer;
    transition: opacity 0.25s;
}

.schedule-row:hover
{
    opacity: 0.88;
}

.schedule-view
{
    transition: opacity 0.3s;
}

.schedule-row-main
{
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 8px;
}

.schedule-row-title, .schedule-title-row
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.schedule-row-title p
{
    margin: 0;
    font-family: 'Neue', sans-serif;
    font-size: 18px;
    color: var(--primary-text-color);
    overflow-wrap: anywhere;
}

.schedule-row-fields
{
    grid-template-columns: repeat(5, minmax(90px, 1fr));
    padding: 0;
}

.schedule-row-meta
{
    margin: 0;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    line-height: 1.35;
}

.schedule-detail-card
{
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
}

.schedule-detail-head
{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    background-color: transparent;
    border-bottom: none;
}

.schedule-title-row h1
{
    margin: 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 24px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.schedule-run-row
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 12px;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 16px;
}

.schedule-run-row b
{
    color: var(--primary-text-color);
    font-weight: 500;
}

.schedule-head-actions
{
    display: flex;
    gap: 10px;
    width: min(320px, 100%);
}

.schedule-cron-grid
{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    margin-bottom: 10px;
}

.schedule-cron-item
{
    border-radius: 10px;
    padding: 18px;
    background-color: var(--inframe-color);
    min-width: 0;
}

.schedule-cron-item p
{
    margin: 0 0 6px 0;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
}

.schedule-cron-item b
{
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 22px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.schedule-task-list
{
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--inframe-color);
}

.schedule-task-row
{
    grid-template-columns: 68px minmax(0, 1fr) 110px;
    border-radius: 0;
}

.schedule-task-row + .schedule-task-row
{
    border-top: 1px solid var(--background-color);
}

.schedule-task-row:first-child
{
    border-radius: 10px 10px 0 0;
}

.schedule-task-row:last-child
{
    border-radius: 0 0 10px 10px;
}

.schedule-task-row:only-child
{
    border-radius: 10px;
}

.schedule-task-payload
{
    font-family: 'Roboto Mono', monospace;
    white-space: pre-line;
    margin: 0;
}

.schedule-bottom-actions
{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.schedule-bottom-actions button
{
    width: max-content;
    min-width: 140px;
}

.schedule-form-grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.schedule-help-text
{
    margin: 10px 0 0 0;
    line-height: 1.4;
}

.schedule-cheatsheet
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--inframe-color);
    background-color: var(--inframe-color);
}

.schedule-cheatsheet-item
{
    min-height: 60px;
    padding: 12px;
    background-color: var(--frame-color);
    color: var(--primary-text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.schedule-cheatsheet-item:nth-child(4n + 1),
.schedule-cheatsheet-item:nth-child(4n + 2)
{
    background-color: var(--inframe-color);
}

.schedule-cheatsheet-item b
{
    color: var(--primary-text-color);
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.schedule-cheatsheet-item span
{
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
}

.backup-status-badge
{
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.schedule-task-form-row
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 12px;
}

.allocation-button button, .database-button button
{
    width: max-content;
    white-space: nowrap;
}

.allocation-value, .database-value
{
    font-size: 16px;
    font-family: 'Neue', sans-serif;
    padding: 5px;
    border-radius: 5px;
    background-color: var(--frame-color);
    color: var(--primary-text-color);
    min-width: 0;
    width: -moz-fit-content;
    width: fit-content;
    overflow-wrap: anywhere;
    line-height: 130%;
}

.allocation-key, .database-key
{
    font-family: 'Golos', sans-serif;
    color: var(--text-color);
    font-size: 14px;
    padding: 0 5px;
}

.backup-status-badge
{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    padding: 6px 10px;
    line-height: 18px;
}

.backup-status-success
{
    color: #38e66f;
    background-color: rgba(56, 230, 111, 0.12);
}

.backup-status-progress
{
    color: var(--yellow-primary);
    background-color: var(--yellow-background);
}

.backup-status-danger
{
    color: var(--text-red-color);
    background-color: rgba(236, 19, 19, 0.1);
}

.backup-status-progress i
{
    animation: backup-status-spin 1.2s linear infinite;
}

@keyframes backup-status-spin
{
    to { transform: rotate(360deg); }
}

.backup-action-note
{
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 4px 0 14px 0;
    padding: 15px;
    border-radius: 10px;
    background-color: var(--inframe-color);
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    line-height: 140%;
}

.backup-action-note-title
{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 16px;
}

.backup-action-note p
{
    margin: 0;
}

.backup-note-status
{
    border-radius: 999px;
    padding: 2px 7px;
    font-family: 'Neue', sans-serif;
}

.backup-action-stack
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.allocation textarea
{
    width: 100%;
    min-height: 72px;
    height: 100%;
    resize: none;
    background-color: var(--frame-color);
    color: var(--primary-text-color);
    border: none;
    border-radius: 10px;
    font-family: 'Golos', sans-serif;
    padding: 10px;
    font-size: 16px;

    scrollbar-width: thin;
    scrollbar-color: var(--inframe-color) rgba(0,0,0,0);
}

*::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}
*::-webkit-scrollbar-track {
    background: rgba(0,0,0,0);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--inframe-color);
    border-radius: 5px;
    border: none;
}

.allocation textarea:focus
{
    outline: none;
}

.allocation-icon, .database-icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.allocation-icon i, .database-icon i
{
    font-size: 20px;
    color: var(--primary-color);
    background-color: var(--background-primary-color);
    border-radius: 10px;
    padding: 15px;
}

.frame-button:has(.navbar-button-loader)
{
    padding-left: 46px;
}

#loading
{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    left: 0;
    /* backdrop-filter: blur(5px); */
    background-color: rgba(0,0,0,0.2);
    z-index: 9999;
}

.loading-flex
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#loading svg
{
    max-width: 150px;
    max-height: 150px;
}

.files-frame
{
    border: none;
    width: 100%;
    height: calc(100vh - 57px - 40px);
    border-radius: 10px;
}

.file-manager-page
{
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: calc(100vh - 97px);
    position: relative;
}

.file-manager-header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.file-manager-header > div:first-child
{
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.file-manager-header h1
{
    margin: 0 0 10px 0;
    font-weight: 400;
}

.file-status
{
    min-height: 18px;
    margin: 6px 0 0 0;
    color: var(--text-dark-color);
    font-family: 'Golos', sans-serif;
    font-size: 13px;
}

.file-status:empty
{
    display: none;
}

.file-action-button
{
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-family: 'Neue', sans-serif;
    font-size: 15px;
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}

.file-action-button:hover
{
    opacity: 0.86;
}

.file-primary-action
{
    background-color: var(--background-primary-color);
    color: var(--primary-color);
}

.file-secondary-action
{
    background-color: var(--inframe-color);
    color: var(--primary-text-color);
}

.file-save-button
{
    width: max-content;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 20px;
}

.file-danger-action,
.file-dialog-danger
{
    background-color: rgb(236, 19, 19, 0.12) !important;
    color: var(--text-red-color) !important;
}

.file-breadcrumbs
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.file-breadcrumbs button
{
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 8px;
    padding: 6px 9px;
    background-color: var(--background-color);
    color: var(--primary-text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.file-breadcrumbs button.muted
{
    cursor: default;
    color: var(--text-dark-color);
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.file-breadcrumbs button.muted:hover
{
    color: var(--text-dark-color);
}

.file-breadcrumbs button:hover
{
    color: var(--primary-color);
}

.file-breadcrumbs button.active
{
    color: var(--primary-color);
    background-color: var(--background-primary-color);
}

.file-breadcrumbs span
{
    color: var(--text-dark-color);
}

.file-toolbar
{
    position: relative;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.file-drop-active::after
{
    content: 'Отпустите файлы для загрузки';
    position: absolute;
    inset: 54px 0 0 0;
    z-index: 120;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background-color: rgba(0, 255, 154, 0.12);
    color: var(--primary-color);
    font-family: 'Neue', sans-serif;
    font-size: 22px;
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.file-icon-button
{
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background-color: var(--background-color);
    color: var(--primary-color);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, opacity 0.2s;
}

.file-icon-button:hover
{
    color: var(--primary-color);
    background-color: var(--background-primary-color);
}

.file-danger-button:hover
{
    color: var(--text-red-color);
    background-color: rgb(236, 19, 19, 0.1);
}

.file-manager-grid
{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    align-items: flex-start;
    flex: 1;
}

.file-list-panel,
.file-editor-panel
{
    min-width: 0;
    overflow: hidden;
    border-radius: 10px;
    background-color: var(--background-color);
    padding: 10px;
}

.file-table-head,
.file-row
{
    display: grid;
    grid-template-columns: 44px minmax(220px, 1fr) 120px 190px 44px;
    align-items: center;
    gap: 8px;
}

.file-table-head
{
    padding: 12px 14px;
    border-bottom: none;
    background-color: var(--background-color);
}

.file-table-head p
{
    margin: 0;
    color: var(--text-dark-color);
    font-family: 'Golos', sans-serif;
    font-size: 13px;
}

.file-list
{
    min-height: calc(100vh - 220px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.file-list-leave
{
    opacity: 0;
    transform: translateY(8px);
}

.file-list-enter
{
    animation: file-list-enter 0.26s ease both;
}

@keyframes file-list-enter
{
    from
    {
        opacity: 0;
        transform: translateY(14px);
    }
    to
    {
        opacity: 1;
        transform: translateY(0);
    }
}

.file-list-enter .file-row
{
    animation: file-row-enter 0.24s ease both;
}

@keyframes file-row-enter
{
    from
    {
        opacity: 0;
        transform: translateY(10px);
    }
    to
    {
        opacity: 1;
        transform: translateY(0);
    }
}

.file-row
{
    min-height: 56px;
    padding: 0 14px;
    color: var(--primary-text-color);
    cursor: pointer;
    transition: background-color 0.15s;
    border: none;
    border-radius: 8px;
    background-color: var(--inframe-color);
}

.file-row:hover,
.file-row-active
{
    background-color: var(--frame-color);
}

.file-row-selected
{
    background-color: var(--background-primary-color);
}

.file-row p
{
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
}

.file-check-cell
{
    display: grid;
    place-items: center;
}

.file-checkbox
{
    justify-content: center;
}

.file-checkbox .checkbox-input
{
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    background-color: var(--background-color);
    border: none;
    box-shadow: none;
}

.file-table-head .file-checkbox .checkbox-input
{
    background-color: var(--frame-color);
    background-color: color-mix(in srgb, var(--primary-text-color) 14%, var(--background-color));
}

.file-checkbox.active .checkbox-input
{
    background-color: var(--background-primary-color);
    box-shadow: none;
}

.file-checkbox .checkbox-input i
{
    font-size: 16px;
}

.file-name-cell
{
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-name-cell i
{
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--primary-color);
    font-size: 17px;
    text-align: center;
    line-height: 1;
}

.file-name-cell span
{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 17px;
}

.file-mobile-menu-button
{
    width: 36px;
    height: 36px;
    display: none;
    place-items: center;
    border: none;
    border-radius: 8px;
    background-color: var(--background-color);
    color: var(--primary-color);
    cursor: pointer;
    font-size: 18px;
}

.file-mobile-menu-button:active
{
    background-color: var(--background-primary-color);
}

.file-empty
{
    min-height: calc(100vh - 300px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 15px;
}

.file-empty .navbar-button-loader
{
    position: static;
    width: 22px;
}

.file-editor-panel
{
    padding: 14px;
}

#file-editor-content
{
    width: 100%;
    min-height: calc(100vh - 250px);
    resize: vertical;
    border: none;
    border-radius: 8px;
    padding: 12px;
    outline: none;
    background-color: var(--inframe-color);
    color: var(--primary-text-color);
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
    tab-size: 4;
}

.CodeMirror
{
    min-height: calc(100vh - 250px);
    height: calc(100vh - 250px);
    border-radius: 8px;
    font-family: 'Roboto Mono', monospace;
    font-size: 15px;
    background-color: #212121 !important;
    color: #f8f8f2 !important;
    transition: opacity 0.12s ease;
}

.CodeMirror-lines,
.CodeMirror-code,
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like
{
    color: #f8f8f2 !important;
}

.CodeMirror-gutters
{
    background-color: #212121 !important;
    border-right-color: rgba(255, 255, 255, 0.12) !important;
}

.CodeMirror-linenumber
{
    color: rgba(248, 248, 242, 0.65) !important;
}

.CodeMirror .cm-comment
{
    color: #b0bec5 !important;
}

.CodeMirror .cm-keyword,
.CodeMirror .cm-atom
{
    color: #c792ea !important;
}

.CodeMirror .cm-string
{
    color: #c3e88d !important;
}

.CodeMirror .cm-number
{
    color: #f78c6c !important;
}

.file-editor-select
{
    width: 170px;
}

.file-context-menu
{
    position: fixed;
    z-index: 250;
    min-width: 220px;
    padding: 6px;
    border-radius: 10px;
    background-color: var(--inframe-color);
    box-shadow: 0 18px 40px rgb(0, 0, 0, 0.24);
}

.file-context-menu button
{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--primary-text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.file-context-menu button:hover
{
    background-color: var(--frame-color);
}

.file-context-menu button.danger
{
    color: var(--text-red-color);
}

.file-selection-bar
{
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 180;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--background-color);
    box-shadow: 0 18px 40px rgb(0, 0, 0, 0.26);
    transform: translateX(-50%);
    transition: opacity 0.2s, transform 0.2s;
}

.file-selection-bar p
{
    margin: 0 10px 0 0;
    color: var(--primary-text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.file-dialog
{
    position: fixed;
    inset: 0;
    z-index: 260;
    display: grid;
    place-items: center;
    padding: 20px;
    background-color: rgba(0,0,0,0.5);
    animation: file-dialog-fade 0.18s ease both;
}

.file-dialog-body
{
    width: min(460px, 100%);
    padding: 20px;
    border-radius: 14px;
    background-color: var(--frame-color);
    box-shadow: 0 24px 60px rgb(0, 0, 0, 0.32);
    animation: file-dialog-pop 0.22s ease both;
}

@keyframes file-dialog-fade
{
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes file-dialog-pop
{
    from
    {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to
    {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.file-dialog-body h2
{
    margin: 0 0 10px 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 22px;
    font-weight: 400;
}

.file-dialog-body > p
{
    margin: 0 0 16px 0;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

.file-dialog-actions
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.file-dialog-actions button.hidden
{
    display: none;
}

.file-dialog-actions:has(button.hidden)
{
    grid-template-columns: 1fr;
}

.file-upload-widget
{
    position: static;
    z-index: 20;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    background-color: transparent;
    color: var(--primary-color);
    box-shadow: none;
    cursor: pointer;
    font-family: 'Neue', sans-serif;
    font-size: 12px;
    animation: file-upload-pop 0.24s ease both;
    transition: opacity 0.2s, transform 0.2s, background-color 0.2s;
}

.file-upload-widget:hover
{
    background-color: var(--background-primary-color);
}

@keyframes file-upload-pop
{
    from
    {
        opacity: 0;
        transform: translateY(12px);
    }
    to
    {
        opacity: 1;
        transform: translateY(0);
    }
}

.file-upload-widget-done
{
    border-color: rgb(53, 220, 108);
    color: rgb(53, 220, 108);
}

.file-upload-widget-error
{
    border-color: var(--text-red-color);
    color: var(--text-red-color);
}

.file-upload-panel
{
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 182;
    width: min(420px, calc(100vw - 40px));
    max-height: 420px;
    overflow: hidden;
    padding: 14px;
    border-radius: 12px;
    background-color: var(--frame-color);
    box-shadow: 0 18px 40px rgb(0, 0, 0, 0.28);
    animation: file-upload-panel-in 0.22s ease both;
}

@keyframes file-upload-panel-in
{
    from
    {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to
    {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.file-upload-panel-head
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.file-upload-panel-head h2
{
    margin: 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 18px;
    font-weight: 400;
}

.file-upload-list
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 340px;
    overflow-y: auto;
}

.file-upload-item
{
    padding: 10px;
    border-radius: 8px;
    background-color: var(--background-color);
}

.file-upload-item-top
{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.file-upload-item-top p,
.file-upload-item-top span
{
    margin: 0;
    font-family: 'Golos', sans-serif;
    font-size: 13px;
}

.file-upload-item-top p
{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--primary-text-color);
}

.file-upload-item-top span
{
    color: var(--text-color);
    flex-shrink: 0;
}

.file-upload-done .file-upload-item-top span
{
    color: rgb(53, 220, 108);
}

.file-upload-error .file-upload-item-top span,
.file-upload-message
{
    color: var(--text-red-color);
}

.file-upload-message
{
    margin: -2px 0 7px 0;
    font-family: 'Golos', sans-serif;
    font-size: 12px;
}

.file-upload-progress
{
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--frame-color);
}

.file-upload-progress div
{
    height: 100%;
    border-radius: inherit;
    background-color: var(--primary-color);
    transition: width 0.18s ease;
}

.database-name
{
    font-family: 'Neue', sans-serif;
    font-size: 16px;
    color: var(--primary-text-color);
    margin: 0;
    padding: 0 5px;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media screen and (max-width: 900px)
{
    #header
    {
        height: 58px;
        padding: 9px 12px;
    }

    #header > .flex
    {
        gap: 10px;
    }

    .mobile-navbar-toggle
    {
        display: grid;
        flex-shrink: 0;
    }

    .logotype
    {
        min-width: 0;
    }

    .logotype h1
    {
        font-size: 18px;
        line-height: 1;
    }

    .logotype img
    {
        height: 18px;
    }

    #header > .flex > .flex.g10
    {
        min-width: 0;
        gap: 6px;
    }

    #header-user-balance
    {
        max-width: 116px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 8px 10px;
        font-size: 14px;
    }

    #header .dropdown-box:not(#header-profile-dropdown)
    {
        display: none;
    }

    .dropdown-button
    {
        padding: 8px 10px;
    }

    .dropdown-button p
    {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
    }

    #navbar
    {
        position: fixed;
        z-index: 99;
        top: 58px;
        left: 0;
        width: min(320px, calc(100vw - 42px));
        min-width: 0;
        height: calc(100dvh - 58px);
        max-height: calc(100dvh - 58px);
        padding: 12px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--background-color);
        box-shadow: 24px 0 50px rgba(0, 0, 0, 0.18);
        transform: translateX(calc(-100% - 24px));
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    .mobile-navbar-backdrop
    {
        top: 58px;
    }

    #navbar.mobile-navbar-active
    {
        transform: translateX(0);
    }

    #navbar .navbar-button
    {
        width: 100%;
    }

    .mini-console
    {
        z-index: 90;
    }

    #pre-body
    {
        margin-top: 58px;
        min-height: calc(100vh - 58px);
        border-top-left-radius: 0;
        padding: 14px;
    }
}

@media screen and (max-width: 520px)
{
    #header
    {
        padding: 8px 10px;
    }

    .mobile-navbar-toggle
    {
        width: 36px;
        height: 36px;
    }

    .logotype h1
    {
        display: none;
    }

    #header-user-balance
    {
        max-width: 96px;
    }

    #header-profile-dropdown .dropdown-button
    {
        max-width: 132px;
    }

    .dropdown-button p
    {
        max-width: 96px;
    }

    #pre-body
    {
        padding: 10px;
    }
}

@media screen and (max-width: 1280px)
{
    .console-grid
    {
        grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
    }

    .terminal-container
    {
        min-height: min(650px, calc(100vh - 170px));
    }

    .terminal-preframe
    {
        min-height: 460px;
    }
}

@media screen and (max-width: 1180px)
{
    .server-info-grid
    {
        grid-template-columns: 1fr;
    }

    .profile-info-grid
    {
        grid-template-columns: 1fr;
    }

    .referal-info-grid
    {
        grid-template-columns: 1fr;
    }

    .console-grid
    {
        grid-template-columns: 1fr;
    }

    .console-grid .terminal-stats
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .terminal-container
    {
        min-height: 560px;
    }

    .terminal-preframe
    {
        min-height: 430px;
    }

    .file-manager-grid
    {
        grid-template-columns: 1fr;
    }

    .file-editor-panel
    {
        position: static;
    }

    .allocation-row
    {
        grid-template-columns: 68px minmax(220px, 1fr) minmax(260px, 1fr);
    }

    .allocation-row .resource-actions
    {
        grid-column: 2 / -1;
        justify-content: flex-start;
        padding-top: 0;
    }

    .database-fields,
    .session-fields
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 760px)
{
    #body-content > .flex.flex-columns.g10 > .flex.flex-wrap.g10:has(.finance-frame) > .flex-item
    {
        flex: none;
    }

    #body-content > .flex.flex-columns.g10 > .flex.flex-wrap.g10:has(.finance-frame)
    {
        flex-direction: column;
    }

    .finance-frame
    {
        flex-basis: 100%;
        width: 100%;
    }

    .finance-frame p
    {
        margin: 8px 14px;
    }

    .finance-frame h2
    {
        font-size: 32px;
        padding: 20px 14px;
        word-break: normal;
        overflow-wrap: normal;
    }

    .console-header
    {
        align-items: stretch;
        flex-direction: column;
    }

    .console-header h1
    {
        font-size: 22px;
    }

    .terminalActionButtons
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    .terminalActionButtons button
    {
        width: 100%;
        padding: 10px 12px;
        font-size: 15px;
    }

    .console-grid .terminal-stats
    {
        grid-template-columns: 1fr;
    }

    .terminal-container
    {
        min-height: 500px;
    }

    .terminal-preframe
    {
        min-height: 370px;
        padding: 8px;
    }

    .terminal-preinput
    {
        gap: 10px;
        padding: 9px 10px;
    }

    .terminal-input
    {
        font-size: 15px;
    }

    .stats-frame
    {
        padding: 9px;
    }

    .stats-logo
    {
        padding: 12px;
        font-size: 18px;
    }

    .stats-chart
    {
        max-height: 120px;
        min-height: 82px;
    }

    .file-manager-header
    {
        flex-direction: column;
    }

    .file-toolbar
    {
        justify-content: flex-start;
    }

    .file-table-head
    {
        display: none;
    }

    .file-row
    {
        grid-template-columns: 34px minmax(0, 1fr) 72px 40px;
        grid-template-areas:
            "check name size menu"
            "check date date menu";
        gap: 4px 8px;
        padding: 10px;
    }

    .file-row .file-check-cell
    {
        grid-area: check;
    }

    .file-row .file-name-cell
    {
        grid-area: name;
    }

    .file-row p:nth-child(3)
    {
        grid-area: size;
        text-align: right;
    }

    .file-row p:nth-child(4)
    {
        grid-area: date;
    }

    .file-mobile-menu-button
    {
        grid-area: menu;
        display: grid;
        align-self: center;
        justify-self: end;
    }

    #file-editor-content
    {
        min-height: 360px;
    }

    .CodeMirror
    {
        min-height: 460px;
        height: 460px;
    }

    .file-selection-bar
    {
        left: 10px;
        right: 10px;
        bottom: 10px;
        justify-content: flex-start;
        flex-wrap: wrap;
        transform: none;
    }

    .allocation,
    .database
    {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .allocation-icon,
    .database-icon
    {
        justify-content: flex-start;
        padding-bottom: 0;
    }

    .allocation-fields,
    .database-fields,
    .session-fields
    {
        grid-template-columns: 1fr;
    }

    .database-main,
    .resource-fields,
    .resource-actions
    {
        padding: 8px 10px;
    }

    .database-main .resource-fields
    {
        padding: 0;
    }

    .allocation-notes
    {
        padding: 0 10px;
    }

    .resource-actions,
    .allocation-row .resource-actions
    {
        grid-column: auto;
        justify-content: flex-start;
    }

    .settings-startup-select-frame
    {
        min-width: 0 !important;
    }

    .settings-startup-row
    {
        grid-template-columns: 1fr;
    }

    .startup-variable-grid
    {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.auth-container
{
    margin:auto;
    max-width: 800px;
}

.auth-inputs
{
    padding: 20px;
    background-color: var(--inframe-color);
    border-radius: 10px;
}

.auth-button-row
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 10px;
}

.auth-oauth-row
{
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.auth-button-row button
{
    min-width: 0;
    white-space: normal;
}

.auth-inputs input, .auth-inputs .checkbox-input
{
    background-color: var(--frame-color);
}

.auth-inputs .checkbox p a
{
    color: var(--primary-color);
    text-decoration: none;
}

.list-value-button
{
    padding: 0;
    margin: 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 14px;
    line-height: 16px;
    padding: 2px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
}

.list-value-button.primary
{
    color: var(--primary-color);
    background-color: var(--background-primary-color);
}

.list-value-button.red
{
    color: var(--text-red-color);
    background-color: var(--background-color);
}

.referal-use
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
    padding: 5px;
    border-radius: 10px;
    background-color: var(--inframe-color);
}

.referal-use p
{
    margin: 0;
}

.referal-use > .flex
{
    min-width: 0;
}

@media screen and (max-width: 560px)
{
    .finance-frame h2
    {
        font-size: 30px;
    }

    #finance-history-list .referal-use
    {
        align-items: flex-start;
        grid-template-columns: 1fr;
        padding: 8px;
    }

    #finance-history-list .finance-history-date,
    #finance-history-list .finance-history-type,
    #finance-history-list .finance-history-amount
    {
        grid-column: 1;
    }

    #finance-history-list .finance-history-amount
    {
        justify-self: start;
    }

    #finance-history-list .allocation-value
    {
        max-width: 100%;
    }

    .server-info-grid .information-list
    {
        padding: 14px;
        gap: 12px;
    }

    .server-info-grid .information-frame h2
    {
        margin: 8px 14px;
    }

    .profile-info-grid .information-list
    {
        padding: 14px;
        gap: 12px;
    }

    .profile-info-grid .information-frame h2
    {
        margin: 8px 14px;
    }

    .referal-info-grid .information-list
    {
        padding: 14px;
        gap: 12px;
    }

    .referal-info-grid .information-frame h2
    {
        margin: 8px 14px;
    }

    .console-header h1
    {
        font-size: 20px;
    }

    .terminalActionButtons
    {
        gap: 8px;
    }

    .terminalActionButtons button
    {
        min-height: 38px;
        padding: 9px 8px;
        font-size: 14px;
    }

    .terminal-container
    {
        min-height: 440px;
    }

    .terminal-preframe
    {
        min-height: 320px;
        border-radius: 8px;
    }

    .terminal-preinput
    {
        border-radius: 8px;
    }

    .terminal-preinput i
    {
        display: none;
    }

    .stats-label
    {
        align-items: flex-start;
    }

    .stats-logo
    {
        padding: 10px;
        margin-right: 8px;
    }

    .stats-usage
    {
        font-size: 15px;
    }

    .stats-name
    {
        font-size: 13px;
    }

    .referal-use
    {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 380px)
{
    .finance-frame h2
    {
        font-size: 26px;
    }

    .terminalActionButtons
    {
        grid-template-columns: 1fr;
    }

    .terminal-container
    {
        min-height: 400px;
    }

    .terminal-preframe
    {
        min-height: 285px;
    }
}

.referal-earn
{
    background-color: var(--background-primary-color);
    color: var(--primary-color);
}

.finance-frame
{
    padding: 10px;
    border-radius: 10px;
    background-color: var(--background-color);
    justify-content: space-between;
    min-width: 0;
}

.finance-frame p
{
    padding-bottom: 0;
    font-family: 'Neue', sans-serif;
    color: var(--primary-text-color);
    margin: 10px 20px;
    line-height: 100%;
    font-size: 16px;
}

.finance-frame h2
{
    font-size: 48px;
    color: var(--primary-text-color);
    margin: 0;
    line-height: 100%;
    font-weight: 400;
    background-color: var(--frame-color);
    border-radius: 10px;
    padding: 30px 20px;
    font-family: 'Neue', sans-serif;
    transition: background 0.3s;
    overflow-wrap: anywhere;
}


.finance-frame:hover h2
{
    background-color: var(--inframe-color);
}

#finance-history-list .referal-use
{
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    min-width: 0;
}

#finance-history-list
{
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
}

#finance-history-list .finance-history-date
{
    grid-column: 1;
}

#finance-history-list .finance-history-type
{
    grid-column: 2;
}

#finance-history-list .finance-history-amount
{
    grid-column: 4;
    justify-self: end;
}

@media screen and (max-width: 560px)
{
    #finance-history-list
    {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-direction: column;
    }

    #finance-history-list .referal-use
    {
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        align-items: flex-start;
        padding: 8px;
    }

    #finance-history-list .finance-history-date,
    #finance-history-list .finance-history-type,
    #finance-history-list .finance-history-amount
    {
        grid-column: auto;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #finance-history-list .finance-history-amount
    {
        justify-self: start;
    }
}

.dashboard-online-frame
{
    padding: 10px;
    border-radius: 10px;
    background-color: var(--inframe-color);
}

.dashboard-online-buttons
{
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}
.dashboard-online-button
{
    font-family: 'Golos', sans-serif;
    border-radius: 0;
    border: none;
    padding: 15px;
    flex: 1;
    font-size: 14px;
    color: var(--primary-text-color);
    background-color: var(--frame-color);
    cursor: pointer;
    transition: opacity 0.3s;
    position: relative;
}

.dashboard-online-button:hover
{
    opacity: 0.6;
}

.dashboard-online-button.selected
{
    opacity: 1;
    background-color: var(--background-primary-color);
    color: var(--primary-color)
}

.dashboard-online-precanvas
{
    position: relative;
}

.dashboard-online-precanvas p
{
    font-family: 'Golos', sans-serif;
    color: var(--primary-text-color);
    font-size: 16px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: calc(50% - 8px);
    text-align: center;
}

.dashboard-online-desc
{
    color: var(--text-dark-color);
    font-family: 'Golos', sans-serif;
    margin: 0 10px;
    text-align: center;
    font-style: italic;
    font-size: 12px;
}

.dashboard-button
{
    border: none;
    background-color: var(--inframe-color);
    border-radius: 10px;
    color: var(--primary-text-color);
    display: flex;
    align-items: center;
    padding: 25px 30px;
    cursor: pointer;
    gap: 20px;
    transition: background 0.3s;
    font-size: 16px;
}

.dashboard-button i
{
    margin: 0;
    vertical-align: middle;
    transition: color 0.3s;
}

.dashboard-button p
{
    margin: 0;
    font-family: 'Neue', sans-serif;
    font-size: 16px;
    font-weight: 400;
    transition: color 0.3s;
}

.dashboard-button:hover
{
    background-color: var(--background-primary-color);
}

.dashboard-button:hover p,.dashboard-button:hover i
{
    color: var(--primary-color);
}

.order-page
{
    width: 100%;
}

.order-hero
{
    padding: 0 0 20px;
}

.order-kicker, .order-step
{
    margin: 0 0 8px;
    color: var(--primary-color);
    font-family: 'Golos', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

.order-step
{
    margin-bottom: 6px;
}

.order-panel-head .order-step,
.order-section-title .order-step,
.order-summary .order-step
{
    margin: 0 0 6px;
    color: var(--primary-color);
}

.order-hero h1
{
    margin: 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 120%;
}

.order-hero p:not(.order-kicker)
{
    max-width: 780px;
    margin: 12px 0 0;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 16px;
    line-height: 150%;
}

.order-grid
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 10px;
    align-items: flex-start;
}

.order-panel
{
    padding-bottom: 10px;
}

.order-panel-head
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 20px;
}

.order-panel-head h2
{
    margin: 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.order-panel-head p
{
    margin: 6px 0 0;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 13px;
    line-height: 145%;
}

.order-counter
{
    color: var(--primary-color);
    background-color: var(--background-primary-color);
    border-radius: 5px;
    padding: 5px 10px;
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.order-filter-grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 5px;
    padding: 0 0 0;
}

.order-filter-grid .select-desc
{
    margin: 0 0 5px;
}

.order-filter-buttons
{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.order-filter-button
{
    border: none;
    border-radius: 10px;
    background-color: var(--inframe-color);
    color: var(--primary-text-color);
    cursor: pointer;
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}

.order-filter-section p
{
    padding-bottom: 0;
    font-family: 'Neue', sans-serif;
    color: var(--primary-text-color);
    margin: 10px 15px;
    margin-bottom: 20px;
    line-height: 100%;
    font-size: 16px;
}

.order-filter-button:disabled
{
    cursor: default;
    opacity: 0.55;
}

.order-filter-button.country
{
    padding: 10px 14px;
}

.order-filter-button img
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.order-filter-button:hover
{
    opacity: 0.75;
}

.order-filter-button:disabled:hover
{
    opacity: 0.55;
}

.order-filter-button.selected
{
    background-color: var(--background-primary-color);
    color: var(--primary-color);
}

.order-filter-placeholder
{
    margin: 0;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    background-color: var(--frame-color);
    border-radius: 10px;
    padding: 10px 12px;
}

.order-tarifs-section
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 10px;
}

.order-section-title
{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 20px;
}

.order-section-title h2
{
    margin: 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.order-section-title > p
{
    margin: 0;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    text-align: right;
}

.order-tarif-list
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(700px, 1fr));
    gap: 10px;
}

.order-tarif-list > p,
.order-empty-state
{
    grid-column: 1 / -1;
}

.order-tarif
{
    appearance: none;
    position: relative;
    background-color: var(--frame-color);
    border: none;
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-width: 0;
    text-align: left;
    font: inherit;
    transition: background 0.3s, opacity 0.3s;
}

.order-tarif:hover
{
    opacity: 0.8;
}

.order-tarif.selected
{
    outline: 1px solid var(--primary-color);
}

.order-tarif-head
{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.order-tarif-title
{
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.order-tarif-icon
{
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    background-color: var(--background-primary-color);
    font-size: 21px;
}

.order-tarif-name
{
    min-width: 0;
}

.order-tarif-name h2
{
    margin: 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 120%;
    overflow-wrap: anywhere;
}

.order-tarif-name p
{
    margin: 5px 0 0;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
}

.order-tarif-meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.order-tarif-chip
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 8px;
    color: var(--text-color);
    background-color: var(--inframe-color);
    border-radius: 5px;
    font-family: 'Golos', sans-serif;
    font-size: 12px;
}

.order-tarif-chip img
{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.order-tarif-personal
{
    color: var(--yellow-primary);
    background-color: var(--yellow-background);
    border-radius: 5px;
    padding: 7px 10px;
    font-family: 'Golos', sans-serif;
    font-size: 13px;
    width: max-content;
}

.order-tarif-price
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 2px 0 2px 16px;
    min-width: 138px;
    text-align: right;
}

.order-tarif-price span, .order-tarif-price small
{
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 13px;
    line-height: 130%;
}

.order-tarif-price p
{
    margin: 4px 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 110%;
    white-space: nowrap;
}

.order-tarif-sale
{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 3px;
    font-family: 'Golos', sans-serif;
}

.order-tarif-sale s
{
    color: var(--text-color);
    font-size: 13px;
}

.order-tarif-sale b
{
    color: var(--text-green-color);
    background-color: rgba(41, 204, 106, 0.12);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 600;
}

.order-tarif-check
{
    display: inline-flex;
    flex: 0 0 28px;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-color);
    background-color: var(--frame-color);
    border-radius: 10px;
    font-size: 14px;
}

.order-tarif-check i
{
    opacity: 0;
}

.order-tarif.selected .order-tarif-check
{
    color: var(--primary-color);
    background-color: var(--background-primary-color);
}

.order-tarif.selected .order-tarif-check i
{
    opacity: 1;
}

.order-tarif-metrics
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.order-tarif-metric
{
    background-color: var(--inframe-color);
    border-radius: 10px;
    padding: 11px;
    min-width: 0;
}

.order-tarif-metric span
{
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 13px;
}

.order-tarif-metric p
{
    margin: 5px 0 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 120%;
    white-space: nowrap;
}

.order-tarif-metric.compact p
{
    color: var(--primary-color);
}

.order-tarif-limits
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.order-resource-list
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 5px;
}

.order-resource
{
    background-color: var(--frame-color);
    border-radius: 10px;
    padding: 12px;
}

.order-resource div:first-child
{
    display: flex;
    justify-content: space-between;
    gap: 5px;
    align-items: center;
}

.order-resource span
{
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 13px;
}

.order-resource b
{
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: right;
}

.order-resource-bar
{
    height: 4px;
    background-color: var(--inframe-color);
    border-radius: 100px;
    overflow: hidden;
    margin-top: 10px;
}

.order-resource-bar span
{
    display: block;
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 100px;
}


.order-summary-header
{
    font-family: 'Neue', sans-serif;
    font-size: 16px;
    color: var(--primary-text-color);
    margin-bottom: 10px !important;
}

.order-summary-specs
{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.order-summary-spec
{
    background-color: var(--frame-color);
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.order-summary-spec span
{
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 13px;
}

.order-summary-spec p
{
    margin: 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 15px;
    text-align: right;
    overflow-wrap: anywhere;
}

.order-tarif-specs
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.order-tarif-spec
{
    background-color: var(--frame-color);
    border-radius: 10px;
    padding: 12px;
}

.order-tarif-spec p
{
    margin: 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 16px;
}

.order-tarif-spec span
{
    display: block;
    margin-top: 3px;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 13px;
}

.order-summary-flag
{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: -4px;
    margin-right: 5px;
}

.order-empty-state
{
    background-color: var(--frame-color);
    border: none;
    border-radius: 10px;
    padding: 38px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 160px;
}

.order-empty-state i
{
    color: var(--primary-color);
    background-color: var(--background-primary-color);
    border-radius: 10px;
    line-height: 100%;
    padding: 14px;
    font-size: 22px;
}

.order-empty-state p
{
    margin: 0;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 16px;
    text-align: center;
}

.order-summary
{
    position: sticky;
    top: 78px;
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 10px;
}

.order-summary-block
{
    background-color: var(--frame-color);
    border-bottom: none;
    border-radius: 10px;
    padding: 15px;
}

.order-summary-block:last-of-type
{
    padding-bottom: 15px;
}

.order-summary-block .input p
{
    margin: 0 0 5px;
}

.order-summary-block h2
{
    margin: 0;
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-weight: 400;
    font-size: 20px;
}


.order-summary-hint
{
    margin: 8px 0 0;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 13px;
    line-height: 145%;
}

.order-summary-line
{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    line-height: 145%;
}

.order-summary-line span:last-child
{
    color: var(--primary-text-color);
    text-align: right;
}

.order-duration-buttons
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border-radius: 10px;
    overflow: hidden;
}

.order-duration-button
{
    border: none;
    border-radius: 0;
    width: 100%;
    min-width: 0;
    min-height: 45px;
    padding: 0 12px;
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    cursor: pointer;
    background-color: var(--inframe-color);
    color: var(--primary-text-color);
    transition: background 0.3s, color 0.3s;
}

.order-duration-button[duration="day"]
{
    grid-column: 1 / -1;
}

.order-duration-button span
{
    color: var(--primary-color);
    margin-left: 4px;
}

.order-duration-button.selected
{
    background-color: var(--background-primary-color);
    color: var(--primary-color);
}

.order-promocode-state
{
    min-height: 20px;
    margin: 5px 0 0;
    color: var(--text-color);
    font-family: 'Golos', sans-serif;
    font-size: 14px;
}

.order-summary-block .input .order-promocode-state
{
    margin: 5px 0 0;
}

.order-promocode-state.success
{
    color: var(--text-green-color);
}

.order-promocode-state.error
{
    color: var(--text-red-color);
}

.order-promocode-state.info
{
    color: var(--yellow-primary);
}

.order-summary-discount-line,
.order-summary-sale-line
{
    display: none;
}

.order-summary-discount-line.active,
.order-summary-sale-line.active
{
    display: flex;
}

.order-summary-discount-line span:last-child
{
    color: var(--text-green-color);
}

.order-summary-sale-line span:last-child
{
    color: var(--text-green-color);
}

.order-create-button
{
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--primary-color);
    color: #fff;
    font-family: 'Golos', sans-serif;
    font-weight: 600;
}

.order-create-button .navbar-button-loader
{
    width: 18px;
    height: 18px;
}


.order-summary-price
{
    color: var(--primary-text-color);
    font-family: 'Neue', sans-serif;
    font-size: 24px !important;
    line-height: 100%;
}


.order-summary-tarif-name
{
    font-family: 'Golos', sans-serif;
    color: var(--text-color);
    margin-bottom: 5px !important;
    font-size: 14px;
}


@media screen and (max-width: 900px)
{
    .order-hero
    {
        display: block;
        padding-bottom: 16px;
    }

    .order-grid
    {
        grid-template-columns: 1fr;
    }

    .order-summary
    {
        position: static;
    }

    .order-filter-grid, .order-resource-list
    {
        grid-template-columns: 1fr;
    }

    .order-panel-head,
    .order-section-title,
    .order-tarif-head
    {
        flex-direction: column;
        align-items: stretch;
    }

    .order-tarif-price
    {
        align-items: flex-start;
        border-left: none;
        padding: 12px 0 0;
        text-align: left;
    }
}

@media screen and (max-width: 1400px)
{
    .order-grid
    {
        grid-template-columns: minmax(0, 1fr) 350px;
    }

    .order-tarif-metrics,
    .order-tarif-limits
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1120px)
{
    .order-grid
    {
        grid-template-columns: 1fr;
    }

    .order-summary
    {
        position: static;
    }
}

@media screen and (max-width: 560px)
{
    .mini-console
    {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 42vh;
        min-width: 100%;
        min-height: 170px;
        max-width: 100%;
        max-height: 80vh;
        border-right: none;
        border-bottom: none;
        border-left: none;
        border-radius: 12px 12px 0 0;
    }

    .mini-console-resize
    {
        display: none;
    }

    .mini-console-resize-n
    {
        display: block;
        top: -9px;
        left: calc(50% - 22px);
        right: auto;
        width: 44px;
        height: 8px;
        border-radius: 999px;
        background: rgb(248, 248, 242, 0.45);
        cursor: ns-resize;
    }

    .mini-console-resize-n::after
    {
        display: none;
    }

    .mini-console-header
    {
        padding: 7px 8px;
        cursor: default;
    }

    .mini-console-title
    {
        font-size: 14px;
    }

    .mini-console-action
    {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .mini-console-collapsed
    {
        height: 44px !important;
        min-height: 44px;
    }

    .order-panel,
    .order-summary,
    .order-tarif
    {
        padding: 12px;
    }

    .order-filter-grid,
    .order-tarif-list,
    .order-tarif-metrics,
    .order-tarif-limits,
    .order-duration-buttons
    {
        grid-template-columns: 1fr;
    }

    .order-tarif-title
    {
        align-items: flex-start;
    }

    .order-tarif-icon
    {
        width: 40px;
        height: 40px;
    }

    .order-summary-spec
    {
        display: block;
    }

    .order-summary-spec p
    {
        margin-top: 4px;
        text-align: left;
    }

    .order-duration-button[duration="day"]
    {
        grid-column: auto;
    }
}
.dashboard-news
{
    border-radius: 10px;
    background-color: var(--inframe-color);
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dashboard-news h2
{
    margin: 0;
    font-family: 'Neue', sans-serif;
    color: var(--primary-text-color);
    font-weight: 400;
    font-size: 24px;
}

.dashboard-news p
{
    margin: 0;
    font-family: 'Golos', sans-serif;
    color: var(--text-color);
    font-size: 16px;
}

.server-list
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
    align-items: stretch;
    gap: 10px;
}

.server-list-item
{
    min-width: 0;
    padding: 10px;
    background-color: var(--inframe-color);
    border-radius: 10px;
    transition: 0.3s;
    cursor: pointer;
}

.server-list-item .title
{
    color: var(--primary-text-color);
    font-size: 20px;
    font-family: 'Neue', sans-serif;
    margin: 0;
}

.server-list-item .description
{
    margin: 0;
    color: var(--text-color);
    font-size: 14px;
    font-family: 'Golos', sans-serif;
}

.server-list-item .preicon
{
    padding: 12px;
    width: max-content;
    background-color: var(--background-primary-color);
    border-radius: 5px;
}

.server-list-item .preicon i
{
    font-size: 20px;
    color:var(--primary-color);
}

.server-list-item .preimage
{
    width: 48px;
    height: 48px;
    background-color: var(--frame-color);
    border-radius: 5px;
}

.server-list-item .preimage img
{
    max-width: 48px;
    max-height: 48px;
}

.server-item-stats
{
    background-color: var(--frame-color);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    position: relative;
    justify-content: space-between;
    padding: 15px;
}

.server-item-title
{
    padding: 15px;
    background-color: var(--frame-color);
    border-radius: 10px;
    margin-bottom: 5px;
}

.server-stats-item
{
    display: flex;
    gap: 10px;
    visibility: hidden;
    align-items: center;
}

.server-stats-item i
{
    color: var(--primary-color);
    background-color: var(--background-primary-color);
    padding: 8px;
    border-radius: 5px;
    font-size: 20px;
}

.server-stats-usage p
{
    margin: 0;
    font-family: 'Golos', sans-serif;
    font-size: 16px;
}

.server-stats-usage .usage
{
    color: var(--primary-text-color);
}

.server-stats-usage .limit
{
    color: var(--text-color);
    font-size: 14px;
}

.server-list-item:hover
{
    opacity: 0.8;
}

.server-stats-text
{
    position: absolute;
    color: var(--primary-text-color);
    font-size: 16px;
    margin: 0;
    font-family: 'Golos', sans-serif;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: calc(50% - 8px);
    text-align: center;
}

.server-stats-text svg
{
    transform: scale(1.5);
}

.state-starting .server-item-stats
{
    background-color: var(--yellow-background);
}


.state-starting .server-item-stats i
{
    background-color: var(--yellow-background);
    color: var(--yellow-primary);
}

.state-running .server-item-stats
{
    background-color: rgba(25, 135, 84, 0.1);
}

.state-running .server-item-stats i
{
    color: rgb(25, 135, 84);
    background-color: rgba(25, 135, 84, 0.1);
}

.state-offline .server-item-stats, .state-suspended .server-item-stats, .state-freeze .server-item-stats
{
    background-color: rgb(220, 53, 69, 0.1);
}

.state-offline .server-stats-text, .state-suspended .server-stats-text, .state-freeze .server-stats-text
{
    color: rgb(220, 53, 69);
}

@media (max-width: 900px)
{
    .schedule-row,
    .schedule-task-row
    {
        grid-template-columns: 1fr;
    }

    .schedule-row-fields,
    .schedule-cron-grid
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .schedule-detail-head,
    .schedule-head-actions,
    .schedule-bottom-actions
    {
        flex-direction: column;
    }

    .schedule-head-actions,
    .schedule-bottom-actions,
    .schedule-bottom-actions button
    {
        width: 100%;
    }

    .schedule-form-grid,
    .schedule-cheatsheet,
    .schedule-task-form-row
    {
        grid-template-columns: 1fr;
    }
}