:root{
    --fc-primary: rgb(255, 255, 255);
    --fc-secondary: rgb(0,0,0);
    --bg-primary: rgb(40, 40, 40);
    --bg-secondary: rgb(65, 65, 65);
    --bg-tertiary: rgb(0, 126, 158);
    --timeline-primary: rgb(255, 61, 61);
    --timeline-secondary: rgb(151, 0, 0);
}

@font-face {
    font-family: 'Cabin';
    src: url(../fonts/cabin/Cabin-VariableFont_wdth\,wght.ttf);
}

html, body{
    background-color: var(--bg-primary);
    color: var(--font-color);
    user-select: none;
}

/*=> Custom Scrollbar*/
::-webkit-scrollbar {
    background-color: rgba(33, 37, 41, 1);
    width: 0.7rem;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(63, 67, 71, 1);
    border-radius: 3px;
}

::-webkit-scrollbar-track{
    background: transparent;
}

.fc-primary{
    color: var(--fc-primary);
}

.fc-secondary{
    color: var(--fc-secondary);
}

.input-group-prepend *{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-append *{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.text-right{
    text-align: right;
}

.text-left{
    text-align: left;
}

.popup {
    display: none;
    color: var(--fc-primary);
    background-color: var(--bg-secondary);
    border: 2px solid black;
    border-radius: 20px;
    padding: 20px;
}

.mt-30 {
    margin-top: 30rem;
}

.pt-30 {
    padding-top: 30rem;
}

.mt-20 {
    margin-top: 20rem;
}

.pt-20 {
    padding-top: 20rem;
}

.mt-15 {
    margin-top: 15rem;
}

.pt-15 {
    padding-top: 15rem;
}

.mt-10 {
    margin-top: 10rem;
}

.pt-10 {
    padding-top: 10rem;
}

.mx-10 {
    margin-left: 10rem;
    margin-right: 10rem;
}

.list-wrapper {
    width: 100%;
    margin: 0.5rem 0;
    justify-content: center;
    display: flex;
}

.small-list-group {
    width: 13rem;
    font-size: small;
    padding: 0.5rem 1rem;
    margin: 0;
}

.small-list-group-item {
    display: block;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.icon-pw {
    width: 15px;
    height: 15px;
}

.button{
    font-family: "Cabin", sans-serif;
    font-weight: 500;
    background-image:linear-gradient(to right, rgb(0, 242, 255), rgb(255, 42, 248));
    border-radius: 25px;
    height: 50px;
    width: 200px;
    font-size: 22px;
    cursor: pointer;
}

.button[disabled] {
    background-image:linear-gradient(to right, rgb(185, 185, 185), rgb(49, 49, 49));
    cursor: not-allowed;
    background-color: unset;
    color: unset;
    border-color: unset;
}

.button[disabled]:hover {
    cursor: not-allowed;
}