:root {
    --bg-graph-svg: rgba(112, 128, 140, 0.27);
    --bg-main: #0e0f12;
    --bg-dark: #08090a;

    --block-main: #1b1d21;
    --block-light: #272930;
    --block-light-hover: #202128;
    --block-darker: #14161a;
    --headline-color: #e8e8f1;
    --headline-color-hover: #c7c7d0;
    --text-color: #9cb0c2;
    --text-color-darker: #8394a2;
    --text-color2: #70808c;
    --text-color2-darker: #5e6c77;

    --accent-color: #33a9ff;
    --accent-color-darker: #2d93de;

    --blue: #0094ff;
    --blue-hover: #0080dc;
    --yellow: #f3b02d;
    --green: #21bf76;
    --green-hover: #1ca465;
    --red: #f15130;
    --red-hover: #c74327;
    --main-header-height: 45px;
    --main-header-full-size: calc(var(--main-header-height) + 24px);
    --border-radius: 8px;
    --border-size-solid: 1px solid;
    --border-size-dashed: 1px dashed;
}

html {
    font-family: "Roboto", sans-serif;
    color: var(--text-color);
    scroll-behavior:smooth
}
body {
    background: var(--bg-main);
    min-height: 100vh;
    overflow-x: hidden;
}
main {
    height: 100%;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
input::placeholder {
    color: var(--text-color);
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--block-light);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: var(--block-darker);
    border-radius: 4px;
}

.btn-or-input {
    background: none;
    outline: none;
    box-shadow: none;
    border: none;
    color: var(--text-color);
}
.def-btn {
    padding: 8px 12px;
    border-radius: var(--border-radius);
    transition-duration: 0.2s;
}
.btn-grey {
    background: var(--block-light);
}
.btn-grey:hover {
    background: var(--block-light-hover);
}
.btn-red {
    background: var(--red);
}
.btn-red:hover {
    background: var(--red-hover);
}
.btn-blue {
    background: var(--blue);
}
.btn-blue:hover {
    background: var(--blue-hover);
}
.btn-darkgrey {
    background: var(--block-main);
}
.btn-darkgrey:hover {
    background: var(--block-darker);
}
.btn-green {
    background: var(--green);
}
.btn-green:hover {
    background: var(--green-hover);
}
button {
    cursor: pointer;
}