* {
    font-family: Arial, Helvetica, sans-serif;
    color: white
}

body {
    background-color: #1d232b;
    background-color: #161b21;
}

input {
    background-color: #181a1f;
    /* background-color: #0d0e11; */
    border: 1px solid black;
    border-radius: 4px;
}


textarea {
    background-color: #181a1f;
    border: 1px solid black;

}

button {
    /* Just test colors here, last one overrides all the others, delete all but the last one if you find this in main */
    background-color: #181a1f;
    background-color: #8594a7;
    background-color: #697584;
    background-color: #7a9fa6;
    background-color: #3d5053;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
}

.large-logo {
    width: 500px;
}

/*  COLORS
    light green
        #b6d1c0
        #91a699
    logo green
        #98a699
        #98cec1
    main blue
        #9ccad4
        #7a9fa6
    gray blue
        #c1d6f5
        #8594a7
    dark mode
        #1e242c
*/

footer {
    position: fixed;
    text-align: center;
    bottom: 0px;
    width: 100%;
}

.label-over-button {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dialogContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    height: 100%;
    width: 100%;
}

.categoryColumn::-webkit-scrollbar {
    scrollbar-width: none;
}

.categoryColumn {
    scrollbar-width: none;
}

.modal-content {
    background-color: #1e242c;
}

.modal-footer {
    border-color: #474f59;
}

.modal-header {
    border-color: #474f59;
}


/* Mobile changes */
@media (max-width:768px) {
    .large-logo {
        width: 300px;
    }

    /* 
    More can be modified here with in this media query
    These styles are applied to the page when the screen width is less than 768px, which is basically tablet or mobile
    */
}