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;
    word-break: break-word;
    border-radius: 12px;
}

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

}

div
{
    margin-top:25px;
}

table , td , th
{
    border: 1px solid black;
    border-collapse: collapse;

}
table
{
    box-shadow: 5px 5px 10px;
    width:95%;
}
td
{
    padding-left:10px;
    padding-right:10px;
}

pre
{
    text-align: left;
    border-style: solid;
    padding-right:10px;
    padding-left:10px;
    background-color: #525252;
    color:#dedcdc;

}

body.dark_mode
{
    background-color: #1c1c1c;
    color: white;
}
table.dark_mode
{
    background-color: #474747;
    color:#d4cdcd;
}
.dark_mode th , .dark_mode td
{
     border: 1px solid #ffffff;
}
div.dark_mode
{
    background-color: #1c1c1c;
    color: white;
}
nav.dark_mode
{
    background-color: #1c1c1c;
}

.boxed
{
    width: 100%;
    background-color: rgba(112, 112, 112 , 0.4);
    border-radius: 20px;
    margin:auto;
    padding: 10px;
    padding-bottom: 20px;
    padding-top: 20px;
    border: 5px solid rgba(112, 112, 112 , 0.7);
    box-shadow: 3px 5px 5px rgba(112, 112, 112 , 0.5);
    color: #ebe1e1;
}

.boxed.day_view
{
    background-color: rgba(184, 182, 182, 0.4);
    border-radius: 20px;
    margin:auto;
    padding: 10px;
    padding-bottom: 20px;
    padding-top: 20px;
    border: 2px solid black;
    box-shadow: 3px 5px 5px rgba(143, 143, 143, 1);
    color: black;

}


/* 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;
  }