/***** SULINK ***/

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

a {
	color:var(--primary-color);
}

form.centerform {
   border:1px solid rgba(0,0,0,0.3);
   border-color:var(--primary-color);
  
   position:absolute;
   padding:30px;
   padding-left:60px;
   padding-right:60px;
   top:50%;
   left:50%;
   transform: translate(-50%, -50%);   
   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;      
}

form.normal {   
   border-radius:1px;
   padding:10px;
   max-width:800px;
   margin:auto;
   background:var(--background-color);
}

form.hiddenform {
	background:transparent;
	padding:0px;
	margin:0px;
	color:auto;
}

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

form.smallform {
   border:1px solid rgba(0,0,0,0.3);
   border-color:var(--primary-color);   
   border-radius:5px;
   padding:10px;
   max-width:800px;
   margin:auto;
}


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


form.smallform input {
   padding:5px;
} 

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

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

.loginemail,.loginpwd  { background:var(--background-color); }

.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.smallform input[type=submit] { 
  margin-top:0px;
  background:var(--background-color);
  border:1px solid var(--primary-color);
  border-color:var(--primary-color);
  color:var(--primary-color);
}            

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

}

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

table.formdown { margin:auto; }
table.formdown tr td:first-child { font-weight:bold;font-size:13px;display:block; }
table.formdown tr td.small:first-child { font-weight:bold;font-size:12px;display:block; }
table.formdown tr td { padding-bottom:10px;display:block; }

table.formdown tr td input.inline { width:auto; }
table.formdown tr td input { width:100%; }

table.form td span.info,table.formdown td span.info {
   color:#444499;
   font-size:12px;
   padding-left:20px;
}


.alertbox {
   display:block;
   padding:0px;
   padding-top:10px;       
   padding-bottom:10px;
   text-align:center;
   margin:auto;       
   margin-bottom:10px;       
   margin-top:10px;
   border-radius:10px;
   max-width:800px;
   color: #31708f;
   background-color: #d9edf7;
   border:1px solid #bce8f1;
}

.alertbox.success {
   border-color:#d6e9c6;
   background:#dff0d8;
   color:#3c763d;
}

.alertbox.error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}          
                               


.btncenter {
   position:absolute;
   left:50%;
   transform: translate(-50%, 0);	
}

.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 {
   background:#73A839 linear-gradient(180deg, #88b557, #73A839) repeat-x;
   color:#ffffff;    
}
       
        
     
        

.btn.center {
   margin:auto;         
}
            





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

.menuitem {
   display:block;
   padding:10px;
   background:var(--background-color);
   color:var(--primary-color);
   margin:10px;
   border:1px solid var(--primary-color);
   text-decoration:none;       
}

.menuitem:hover { background:var(--primary-color); }

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;
   font-family:tahoma;
   border-collapse:collapse;
   background:#ffffff;
   border:1px solid #999999;   
   font-size:11px;
   margin-top:10px;
}

table.xls thead {
   background:#d9d9d9;
   color:#222222;
   font-size:13px;
   font-weight:normal;
}
table.xls thead th {
   border:1px solid #eeeeee;
   padding:5px;
}

table.xls td {
   padding:5px;
   border:1px solid #eeeeee;
   color:#000000;   
}

table.xls td a {
	color:#00009f;

}


table.xls tr.green {background:rgb(153,204,51);}
table.xls tr.yellow {background:rgb(255,255,204);}

table.xls tr td.green {background:rgb(153,204,51);}
table.xls tr td.yellow {background:rgb(255,255,204);}


.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; }
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;
}

ul.secselect {
   margin:auto;
   padding:1px;
   background:#ffffff;
   display:block;
   max-width:800px;
   list-style:none;
   border:1px solid #444444;
}

ul.secselect div.title {
   background:#dddddd;
   color:#222222;
   text-align:center;
   border-bottom:1px solid #999999;
   padding:5px;
   font-weight:bold;
}


ul.secselect a {
   text-decoration:none;
   color:#333333;
}

ul.secselect li {
   margin:0px;
   padding:4px;
   background:#f4f4f4;
   border-top:1px solid #dedede;
   border-bottom:1px solid #cccccc;
   display:block;
}

ul.secselect li:hover {
   background:#444444;
   color:#f4f4f4;
}


.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; } 
   form { width:80%;padding:5%;box-shadow: none;margin:auto;  } 
   table.form { display:block;width:100%; }
   table.form tr { display:block;width:100%; }
   table.form tr td,table.form tr td input,table.form tr td textarea,table.form tr td select  { display:block;width:100%; }
   .loginpwd input,.loginemail input { width:calc(100% - 58px); }   
   table.formdown tr td input { width:calc(100% - 10px); }
   div.info { font-size:12px;padding:5px; }

}