:root {
    --themcolor: #F7941D;
    --secondary: #24a5e0;
    --error: #ff8484;
    --fakewhite: #fff9f2;
    --darker:rgb(24, 23, 23);
    --glass:rgba(24, 23, 23, 0.76);
}

body {
    background-color: rgb(37, 36, 36);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: rgb(247, 247, 247);
    font-family: "Stack Sans Text", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* .stack-sans-text {
    font-family: "Stack Sans Text", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
} */

#app_menu{
    background-color: rgb(24, 23, 23);;
}

.app_name{
    color: var(--themcolor);
    font-size: small;
}

.app_link{
    color: var(--themcolor);
    text-decoration: none;
    font-size: x-small;
}
.app_link.link_secondary{
    color: var(--secondary) !important;
}

.uppercase{
    text-transform: uppercase;
}

.bento-box{
    background-color: var(--darker);
}

.box-title{
    display: flex;
    justify-content: space-between;
}

.input-group{
    display: flex;
    flex-direction: column;
}

.input-group .input-group-label{
    font-size: x-small;
}
.input-group .input-group-input{
    font-size: small;
}

#user_greeting{
    height: 80px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: 15px;
}

#user_context{
    font-size: smaller;
    color: burlywood;
}

.btn{
    font-size: small;
    border-radius: none;
}

.input-box-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.input-box-label{
    width: 30%;
    font-size: x-small;
}
.input-box{
    font-size: smaller;
    width: 70%;
    background-color: var(--fakewhite);
}
.input-box::placeholder{
    font-size: xx-small;
}

#guest_app_content{
    height: 100vh;
    display: flex;
    align-items: center;
}
.app_btn{
    background-color: var(--themcolor);
    color: var(--darker);
    padding-left: 25px !important;
    padding-right
    : 25px !important;
}
.form-error{
    font-size: x-small;
    color:var(--error) ;
    display: flex;
    flex-direction: column;
}
.glass{
    background-color: var(--glass);
}
.theme-color{
    color: var(--themcolor);
}
.modal-header, .modal-footer{
    border-color: var(--themcolor) !important;
}

.btn-large{
    width: 100%;
}