:root{
    --makeon-color: #7723CB;
    --makeon-color-30: #D1B4ED;
    --makeon-color-ligther: #EAD4FF;
    --makeon-color-super-ligther: #F3EAFB;
    --color-contrast: #F9A502;
    --color-contrast-01: #F9A5021A;
    --color-contrast-02: #F9A50232;
    --color-contrast-03: #F9A50280;
    --color-orange-light: #ffedbd;
    --background-color: #fafafa;
    --color-gray-light: #d9d9d9;
    --color-gray-disable: #b5b5b5;
    --color-gray-e9: #e9e9e9;
    --color-gray: #606060;
    --color-dark-gray: #2f2f2f;
    --color-white: #fff;
    --color-black: #000;
    --color-gray-superlight: #ebeae9;
    --color-settings-background: #ffffff;

    --color-star-disabled: #d9d9d9;
    --color-star-enabled: #F9A50280;
    
    --color-black-transparent: #00000080;
    --color-transparent: transparent;
    --shadow-color: rgb(148,148,148);
    --shadow-color-transparent: rgba(148,148,148, 0.5);
    --shadow-color-transparent-07: rgba(148,148,148, 0.7);
}

body{
    transition: .35s;
}

@font-face {
    font-family: Inter;
    src: url("https://storage.makeon.ru/uploads/fonts/Inter/Inter-Regular.otf") format("opentype");
}

@font-face {
    font-family: Inter;
    src: url("https://storage.makeon.ru/uploads/fonts/Inter/Inter-Black.otf") format("opentype");
    font-weight: 1000;
}

@font-face {
    font-family: Inter;
    src: url("https://storage.makeon.ru/uploads/fonts/Inter/Inter-Bold.otf") format("opentype");
    font-weight: bold;
}

@font-face {
    font-family: Inter;
    src: url("https://storage.makeon.ru/uploads/fonts/Inter/Inter-Light.otf") format("opentype");
    font-weight: 100;
}



*{
    padding: 0;
    margin: 0;
    font-family: Inter;
    scroll-behavior: smooth;
}

input{
    accent-color: var(--makeon-color);
}

.noOverflow{
    overflow: hidden;
}

div.container-fluid{
    overflow-y: scroll;
}

body{
    background-color: var(--background-color) !important;
}

.settings{
    background-color: var(--shadow-color-transparent);
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    overflow-y: auto;
    padding: 1rem 0;
}

.settings>div{
    margin: auto 0;
    background: var(--color-settings-background);
    height: fit-content;
    width: 100%;
    max-width: 1000px;
    border-radius: 10px;
    padding: 20px;
    position: relative;
}

.settings>div>.closeSettings{
    position: absolute;
    right: 4px;
    top: -6px;
    color: var(--color-gray);
    padding: 20px;
    cursor: pointer;
}

.settings>div>div{
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.settings .windowHeader>img{
    width: 40px;
}

.pointer{
    cursor: pointer;
}

.wrongInput{
    box-shadow: 0px 0px 2px 1px var(--color-contrast);
    border: 1px solid var(--color-contrast);
}

.storageData{
    color: var(--color-gray-disable);
    font-size: 14px;
    width: fit-content !important;
}

.comment{
    color: var(--color-gray-disable);
    font-size: 14px;
}

.textHint{
    cursor: help;
    color: var(--color-gray-disable);
    font-size: 14px;
}

.textHint[data-tip] {
    position:relative;
}

.textHint[data-tip]:before {
    content:'';
    display:none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #1a1a1a;	
    position:absolute;
    top:18px;
    left:-1px;
    z-index:8;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
}

.textHint.textToRight[data-tip]:after{
    display:none;
    content:attr(data-tip);
    position:absolute;
    top:22px;
    left:-40px;
    padding:5px 8px;
    background:#1a1a1a;
    color:#fff;
    z-index:9;
    font-size: 12px;
    width: 500px;
    line-height:18px;
    border-radius: 3px;
    word-wrap:normal;
}

.textHint.textToCenter[data-tip]:after{
    display:none;
    content:attr(data-tip);
    position:absolute;
    top:22px;
    left:-250px;
    padding:5px 8px;
    background:#1a1a1a;
    color:#fff;
    z-index:9;
    font-size: 12px;
    width: 500px;
    line-height:18px;
    border-radius: 3px;
    word-wrap:normal;
}

.textHint.textToLeft[data-tip]:after{
    display:none;
    content:attr(data-tip);
    position:absolute;
    top:22px;
    left:-460px;
    padding:5px 8px;
    background:#1a1a1a;
    color:#fff;
    z-index:9;
    font-size: 12px;
    width: 500px;
    line-height:18px;
    border-radius: 3px;
    word-wrap:normal;
}

.textHint[data-tip]:after {
    display:none;
    content:attr(data-tip);
    position:absolute;
    top:22px;
    left:-250px;
    padding:5px 8px;
    background:#1a1a1a;
    color:#fff;
    z-index:9;
    font-size: 12px;
    width: 500px;
    line-height:18px;
    border-radius: 3px;
    word-wrap:normal;
}

.textHint[data-tip]:hover:before,
.textHint[data-tip]:hover:after {
    display:block;
}

.coin{
    width: 40px;
    height: 40px;
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Chrome, Safari, Edge */
    margin: 0;
}