@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
*{
    padding: 0;
    margin: 0;
    font-family: 'Inter', sans-serif;
}
:root{
    --bg-color-0: #100E12;
    --bg-color-0-0: rgba(16, 14, 18, 0);
    --bg-color-0-1: rgba(16, 14, 18, 1);
    --bg-color-1: #232224;
    --bg-color-2: #2A292B;
    --input-bg: #3B3B41;
    --input-text-color: #F9F9E7;
    --input-border-color: #4C4C4E;
    --main-color: #ffffff;
    --disabled-color: #A5A5A5;
    --action-color: #088F8F;
    --action-color-high: #0abcbc;
    --warning-color: #EE4B2B;
    --default-animation-duration: 0.3s;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
}
    
/* Track */
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: var(--bg-color-2);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(219, 215, 219, 0.8);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(219, 215, 219, 1);
}


.display-none{
    display: none !important;
}

.generic-input, .generic-action-btn{
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid var(--input-border-color);
    border-radius: 8px;
    font-size: inherit;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--input-bg);
    color: var(--input-text-color);
    height: min-content;
}
.generic-action-btn{
    color: var(--main-color);
    background-color: var(--action-color);
}
.generic-action-btn:hover{
    cursor: pointer;
    background-color: var(--action-color-high);
}
.generic-action-btn:disabled{
    cursor: default;
    background-color: var(--input-bg);
    color: var(--disabled-color);
}

ul{
    list-style-type: none;
}