html,body { margin:0px;padding:0px;width:100%;height:100%; }
body {
   color:#333333;
   padding:0px;
   padding-top:60px;
   background:url(/images/bggreen.jpg) #ffffff fixed;
   background-size:cover;
   font-family:'Bookman', 'Roboto', sans-serif;
   width:100%;
   height:100%;
}

#topmenu {
      position:fixed;top:0px;left:0px;height:45px;width:100%;
      background:url(/images/topbg.png) #c17d11 fixed;
      border-bottom:1px solid rgba(0,0,0,0.5);         
      box-shadow: 0px 5px 10px -2px rgba(0,0,0,0.75),inset 0px 0px 22px -16px rgba(0,0,0,0.53);
}
         

@keyframes formcentershow {
  from { opacity:0;transform:scale(0.5, 0.5) translate(-75%, -75%); }
  to { opacity:1;transform:scale(1, 1) translate(-50%, -50%); }
}

form.centerform {
   border:1px solid rgba(0,0,0,0.3);
   border-radius:8px;
   position:absolute;
   padding:30px;
   padding-left:60px;
   padding-right:60px;
   top:50%;
   left:50%;
   transform: translate(-50%, -50%);
   background:rgba(255,255,255,0.8);
   box-shadow: 7px 10px 19px -2px rgba(0,0,0,0.75),inset 0px 0px 22px -16px rgba(0,0,0,0.53);
   animation-name:formcentershow;
   animation-duration: 0.5s;
   color:#000000;   
}

form {
   border:1px solid rgba(0,0,0,0.3);
   background:url(/images/paper.jpg);
   color:#000000;
   border-radius:1px;
   padding:30px;
   padding-left:60px;
   padding-right:60px;
   box-shadow: 3px 3px 3px -2px rgba(0,0,0,0.75),inset 0px 0px 22px -16px rgba(0,0,0,0.53);
   max-width:800px;
   margin:auto;
}

form.filterform {
   border:1px solid rgba(0,0,0,0.3);
   border-radius:0px;
   padding:10px;
   padding-left:60px;
   padding-right:60px;
   background:#fefefe;
   box-shadow:none;
   max-width:auto;
   margin:auto;
}

div.info {
   font-size:13px;
   color:#888888;
   padding-top:5px;      
}
         

form.centerform label,form label {
   text-align:left;
   font-weight:bold;
   padding:10px;
   padding-left:0px;
   width:130px;  
}

form.centerform input,form input,form select {
   padding:8px;
   font-size:14px;
   border:1px solid #cccccc;;
}

.loginemail,.loginpwd  { background:#dfdfdf; }

.loginemail:before {
   font-family: 'Font Awesome 5 Free';
   content: "\f007";   
   width:30px;
   text-align:center;
   display:inline-block;            
}
            
.loginpwd:before {
   font-family: 'Font Awesome 5 Free';
   content: "\f023";   
   width:30px;
   text-align:center;
   display:inline-block;            
}
            

form.centerform input[type=submit],form input[type=submit] {
   margin-top:10px;
   width:100%;
   max-width:400px;
   border:1px solid #000000;
   background:#000000;
   border-radius:5px;
   color:#ffffff;
   display:block;
}

table.form tr td:first-child { font-weight:bold; }
table.form tr td {
    padding-bottom:10px;             
}


#topmenu .btn {
   background:#0881bf;
   border:1px solid #0861af;
   color:#ffffff;           
}

#topmenu .btn:hover {
   background:#0861af;
   color:#ffffff;           
}
                               

.btn {
   border:1px solid #888888;
   background:#ececec;
   border-radius:2px;
   color:#000000;
   display:inline-block;
   padding:5px;
   text-decoration:none;
   cursor:pointer;
}

.clear {
   clear:both;    
}
       

.cancel {
   background:#ff0000;
   border:1px solid #cc00000;     
}

.center {
   text-align:center;     
}

.btn.red {
   background:#C71C22 linear-gradient(180deg, #cf3e43, #C71C22) repeat-x;
   color:#ffffff;  
}
     
.btn.blue {
   background:#033C73 linear-gradient(180deg, #295988, #033C73) repeat-x;
   color:#ffffff;  
}

.btn.yellow {
   background:#f7b924;
   color:#212529;     
}

.btn.green {
   backgrund:#73A839 linear-gradient(180deg, #88b557, #73A839) repeat-x;
   color:#ffffff;    
}
       
        
     
        

.btn.center {
   margin:auto;         
}
            

.btn.selected {
   background:#999999;
}


.btn:hover {
   background:#ffffff;
   color:#000000;
}


.mainmenu {
   width:50%;
   max-width:300px;
   margin:auto;
              
}

.menuitem {
   display:block;
   padding:10px;
   background:#000000;
   color:#ffffff;
   margin:10px;
   border:1px solid #cccccc;
   text-decoration:none;       
}

.menuitem:hover { color:#000000;background:#ffffff; }

table.layout,table.layout td {
  border-collapse:collapse;
  padding:0px;
  margin:0px;
  border:none;           
}
             
table.layout-padding td { padding:5px; }
table.layout-width-padding td { padding-left:5px;padding-right:5px; }

table.xls {
margin:auto;
   border-collapse:collapse;
   background:#ffffff;
   border:1px solid #cccccc;
   font-family:courier;
   font-size:12px;
}

table.xls thead {
   background:#d4d4d4;
   color:#333333;
   font-size:14px;
   font-weight:normal;
}
table.xls thead th {
   border:1px solid #aaaaaa;

}

table.xls td {
   padding:3px;
   border:1px solid #cccccc;
}

.num {
  text-align:right;
}

tr.record { } 
tr.selectable:hover { background:#bbbbbb; }
tr.selectable { cursor:pointer; }

tr.sum td { font-weight:bold;border-top:2px solid #999999;padding-bottom:3em; }

table.list { margin:auto;padding:0px; }
table.list tbody tr { display:block;border:1px solid #cccccc;margin-bottom:5px;width:100%;border-radius:5px;background:rgba(255,255,255,0.8); }
table.list tr td { padding:5px;color:#000000; }
table.list tr td.item { width:100%; }
table.list tr td .btn { width:140px;margin:5px;padding:0px;text-align:center;padding:5px; }
           

#overlay {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.9);
  z-index:1000;       
}

#dialog {
   position:fixed;
   top:0px;
   left:0px;
   width:90%;
   height:90%;
   z-index:1100;

   border:1px solid rgba(0,0,0,0.3);
   border-radius:8px;
   top:4%;
   left:4%;
   background:#fefefe;
   box-shadow: 7px 10px 19px -2px rgba(0,0,0,0.75),inset 0px 0px 22px -16px rgba(0,0,0,0.53);
   display:none;
}

.dialog-title {    
position:relative;top:0px;left:0px;background:#cccccc;padding:3px;height:24px;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom:1px solid #aaaaaa;font-weight:bold; }
.closebutton:before {    
   content: "X";
   font-size:12px;
   text-align:center;
   padding:4px;   
   color:#ffffff;
   text-align:center;
   display:inline-block;            
   background:#ff0000;border-radius:3px;border:1px solid #990000;cursor:pointer;
   position:absolute;right:5px; }
#dialog .dialog-content { width:100%;height:calc(100% - 30px); }         
#dialog .dialog-content iframe { width:100%;height:100%;border:none;margin:0px;padding:0x; }         

@media (max-width:970px)  {
   form.centerform { width:80%;padding:5%;box-shadow: none;background:rgba(255,255,255,0.9) } 
   form { width:80%;padding:5%;box-shadow: none;background:rgba(255,255,255,0.9);margin:auto;  } 
   table.form { display:block;width:100%; }
   table.form tr { display:block;width:100%; }
   table.form tr td,table.form tr td input { display:block;width:100%; }
   .loginpwd input,.loginemail input { width:calc(100% - 58px); }
}