html
{
height:         100%    
}

body
{
margin-top:     0px; 
margin-bottom:  0px; 
margin-left:    0px; 
margin-right:   0px;
padding:        0;
font-family:    arial;
color:          var(--body-color);
height:         100%
}

.dt-label
{
font-size:          14px;

}

.dt-data
{
font-size:          14px;

}

.dt-title
{
font-size:          25px;
font-weight:        500;
}

input[type='text'],
input[type='password'],
select,
textarea
{
border:             1px solid var(--input-border-color);
border-radius:      4px;
padding:            4px 10px;
color:              var(--input-color);
font-size:          14px;
width:              calc(100% - (10px * 2) - (1px * 2));
font-family:        Arial;
}

input[type='text']:hover,
input[type='password']:hover
{
/*border-color:       var(--input-border-color);*/
}

input[type='text']:focus,
input[type='password']:focus,
select:focus,
textarea:focus
{
border:             1px solid var(--input-border-color-focus);
box-shadow:         0 0 0 .2rem rgba(230, 45, 54,0.25);
outline:            0;
}

div.main-header
{
height:             var(--main-height-header); 
width:              100%; 
position:           relative; 
background-color:   var(--header-color);  
border-bottom:      1px solid var(--account-bt-color)
}

div.main-footer
{
height:             var(--main-height-footer); 
width:              100%; 
display:            flex; 
background-color:   var(--footer-color)
}

div.main-footer > div
{
font-size:          10px; 
color:              white; 
text-align:         center; 
position:           relative; 
margin:             auto;
font-weight:        400
}

div.main-footer > div > label
{
font-weight:        600; 
font-size:          12px;
}

div.main-footer > div > a
{
color:             rgba(255,255,255,0.7);
}

div.main-footer > div > a:hover
{
color:              black;
}


/*
div.main-header div.menu a:hover
{
color:              white; 
text-decoration:    none;
background-color:   blue;
}
*/

.main-header-logo
{
padding:            10px 10px 10px 30px; 
display:            inline-block;
height:             calc( var(--main-height-header) + var(--main-height-title) - 20px);
position:           relative;
background-color:   white;
}

.main-header-logo > img
{

height:             100%;    
}

.main-header-menu
{
display:            inline-block;
right:              80px; 
top:                50%;
translate:          0 -50%;
position:           absolute;
font-size:          18px;
font-weight:        500;
color:              var(--menu-color-selected);
}

.main-header-menu > a
{
padding:            4px 10px; 
/*border-right:       1px solid #c8ced3;*/ 
color:              var(--menu-color)
}

.main-header-menu > span
{
padding:            4px 10px; 
}

.main-header-menu > a:hover
{
text-decoration:    underline;
}

.main-header-user-button
{
position:           absolute;
right:              10px;
top:                calc( (var(--main-height-header) + var(--main-height-title) - 55px) / 2);
border-radius:      30px; 
height:             55px;
width:              55px; 
background-color:   white;
text-align:         center;
justify-content:    center;
align-items:        center; 
display:            flex;
}

.main-header-user-button > div
{ 
border-radius:      23px; 
height:             45px; 
width:              45px; 
background-color:   var(--account-bt-color);
color:              white;
cursor:             pointer;
font-size:          12px
}

.main-header-user-button > div:hover
{ 
background-color:   var(--account-bt-color-hover);
}

.main-header-user-button > div > div:first-child
{
margin:             0 auto;
}

.main-header-user-button > div > div
{
position:           relative;
top:                5px;
}

div.main-title
{
height:             var(--main-height-title); 
width:              100%;
display:            flex;
background-color:   var(--header-color);  
/*border-bottom:      1px solid #c8ced3;*/
font-size:          14px;
}

div.main-title div
{	
margin:             auto 0;
}

#main-div-history
{
width:              calc(100% - 200px - 280px);
padding-left:       200px; 
font-size:          18px;
/*font-weight:        700;*/
}


.main-container
{
min-height:         calc( 100% - var(--main-height-header) - var(--main-height-title) - var(--main-height-footer) - 60px - 2px); 
width:              calc( 100% - 60px); 
position:           relative; 
display:            flex; 
padding:            30px;
background-color:   /*rgba(190,190,190,0.7);*/white;
background-image:   /*linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,.75))*/linear-gradient(to bottom, rgba(255, 255, 255,1), rgba(230, 45, 54,.45)), 
                    url(/image/background/main.jpg);
background-size:    cover;
background-repeat:  no-repeat
}

div.login-footer
{
border-top:         1px solid #ccc; 
margin:             100px 10px 0px 10px;
font-size:          10px;
text-align:         center; 
position:           absolute; 
bottom:             15px;
width:              calc(100% - 20px)
}

#main_div_user_menu > div:first-child
{
position:           absolute; 
right:              20px; 
top:                -11px;
height:             11px;
width:              11px;
background:transparent url('/image/account_arrow.png') center/contain no-repeat
}

#main_div_user_menu
{
position:           absolute;
display:            none;
font-size:          14px;
border:             1px solid var(--account-menu-border-color); 
border-radius:      3px;
top:                calc( var(--main-height-header) + var(--main-height-title));
right:              15px;
background-color:   var(--account-bt-color-hover);
z-index:            3
}

#main_div_user_menu > p
{
margin:             5px 0 5px 0;
text-align:         center;
color:              white;
}

#main_div_user_menu > a
{
color:              var(--account-menu-color);
background-color:   white;
padding:            7px 20px 7px 5px;
display:            block;
border-top:         1px solid var(--account-menu-border-color)
}

#main_div_user_menu > a > div.icon-16-button
{
display:            inline-block; 
margin-right:       5px
}

#main_div_user_menu > a:hover
{
background-color:   rgba(255, 255, 255,.85);
color:              var(--account-menu-color);
text-decoration:    none;
}

#main_div_datetime
{
padding-right:      80px; 
margin:             auto 0;
text-align:         right;
width:              200px;
}


.dt-form
{
font-size:          14px;
}

div.dt-table.dt-form > div.dt-table-row > div.dt-table-cell:nth-child(1n)
{
text-align:         right;
}

div.dt-table.dt-form > div.dt-table-row > div.dt-table-cell
{
padding:            2px;
}

.dt-error
{
background-color:   var(--msg-error-1);
color:              white;
text-align:         center;
font-size:          16px;
border-radius:      8px;
}

.container-lock-background
{
width:              100%;
height:             100%; 
top:                0; 
left:               0; 
position:           fixed; 
background-color:rgba(0,0,0,.5); 
display:            none
}