/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
* {
    box-sizing: border-box;

}
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba(255,255,255,0.0)
    /*url('../img/wait.gif')*/
    url('../img/wait2.gif')
    1% 100%
    no-repeat;
    background-size: 10em;

}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;
    display: block;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
/*body.loading .modal {*/

/*}*/

body{
    margin: 0;
    padding: 0;
}


#wrapper{
    display: flex;
    flex-flow: column;
    /*justify-content: center;*/
    max-height: 100vh;
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    overflow: hidden;

}
header{
    display: flex;
    padding: 0.5em;
    background: oldlace;
    flex: 0 1 auto;
}

header table{
    /*width: 100%;*/

}
#page_container{
    /*position: relative;*/
    /*flex-flow: column;*/
    /*display: flex;*/
    flex: 1 1 auto;
    border: 5px solid #111;
    /*border-top: none;*/
    box-sizing: border-box;
    overflow: auto;

}
#footer{
    flex: 0 1 auto;


    bottom: 0;
    /*border: 5px solid #111;*/
    border-top: none;
    background-color: oldlace;
    box-sizing: border-box;
    /*min-height: 39px;*/

}
.logo{
    height: 40px;
    max-width: 200px;
    object-fit: contain;
}

.user_panel{
    margin-left: auto;
    display: flex;
    align-items: center;
}
.user_name{
    margin: 0 1em;
    cursor: pointer;
    color: #222222;
}
.user_name:hover{

    color: #0f7cc0;
    text-decoration: underline;



}
/*.content{*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

.container {

    width: 100%;
    /*min-width: 1000px;*/
    /*max-width: 1900px;*/
    padding: 5px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*background: gainsboro;*/
}

.page_tittle{
    text-align: center;
    color: dimgray;
}

.my_scroll{
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #f9f9fd;
}
.my_scroll::-webkit-scrollbar {

    width: 10px;
    height: 10px;
    background-color: #d4ceb6;
}
.my_scroll::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: #d4ceb6;
    -webkit-box-shadow: inset 0 0 6px rgba(118, 118, 118, 0.2);
}
.my_scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
    border-radius: 10px;
    background-color: #f9f9fd;
}

*{
    scrollbar-width: thin;
    scrollbar-color: #f9f9fd;
}
::-webkit-scrollbar {

    width: 10px;
    height: 10px;
    background-color: #d4ceb6;
}
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: #d4ceb6;
    -webkit-box-shadow: inset 0 0 6px rgba(118, 118, 118, 0.2);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
    border-radius: 10px;
    background-color: #f9f9fd;
}