nav .navbar-brand
{
    /* size for brand */
    font-size: xx-large;
}

/* colors for brand */
nav .navbar-brand .blue
{
    color: #156de9;
}
nav .navbar-brand .red
{
    color: #e42c22;
}
nav .navbar-brand .yellow
{
    color: #f3b420;
}
nav .navbar-brand .green
{
    color: #09a034;
}

main .form-control
{
    /* center form controls */
    display: inline-block;

    /* override Bootstrap's 100% width for form controls */
    width: auto;
}
main
{
    /* scroll horizontally as needed */
    overflow-x: auto;

    /* center contents */
    text-align: center;
}

main img
{
    /* constrain images on small screens */
    max-width: 100%;
}

button.btn
{
    box-shadow: 5px 5px 8px rgba(0,0,0,0.8);
    padding: 10px;
    white-space: normal;
}

button.navbar-toggler
{
    box-shadow: 5px 5px 8px rgba(0,0,0,0.2);

}
.btn-success
{
    border-radius: 25px;
}
button
{
    white-space: normal;
    word-break: break-word;
    max-width: 80%;
}
div
{
    margin-top:20px;
}
.translatable
{
    unicode-bidi: embed;
}

.boxed
{
    border-radius: 25px;
    box-shadow: 7px 7px 7px #706f6f;
    margin: auto;
    margin-top: 30px;
    padding: 20px;
    background-color: #e0dedc;

}
.boxed.dark_mode
{

    background-color: #525050;
    color: #dedede;
    box-shadow: 5px 5px 12px #aba9a9;
}

table.dark_mode
{
    background-color: #525050;
    color: #dedede;
    box-shadow: 5px 5px 12px grey
}

/* arabic font */
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/almarai/v5/tsstApxBaigK_hnnQ1iFow.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }