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

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

.footer {
  position:fixed;
  bottom:0px;
  left:0px;  
  text-align:center;
  z-index:500;
  font-size:12px;
  background:#fefefe;
  height:20px;
  line-height:20px;
  width:100%;
  border-top:1px solid rgba(0,0,0,0.2);     
}

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


ul.imagelist {
   margin:0px;
   padding:10px;
   list-style:none;           
}

ul.imagelist li {
   width:480px;
   height:320px;
   float:left;
   margin:10px;
   border:1px solid #444444;
   background:rgba(0,0,0,0.2);
   overflow:hidden;
   text-align:center;
}

ul.imagelist li>img {
   height:100%;
   border-left:1px solid #777777;   
   border-right:1px solid #777777;   
}

      
           

.menuicon {
   width:24px;
   margin-right:10px;       
}
                            

.controlpanelitem {
   border:1px solid #888888;
   background:#f5f5f5;
   border-radius:5px;
   margin-bottom:20px;
   margin-right:10px; 
   text-align:center;
   vertical-align:middle;               
}

.controlpanelitem table {
   margin:auto;
   max-width:400px;
   padding:0px;   
}
.controlpanelitem table tr td {
   text-align:left;
   padding-left:20px;

}
.controlpanelitem table tr td:first-child {
   width:32px;
}


.controlpanelitem img {
   width:60px;
}
                  
.controlpanelitem a {
   text-decoration:none;
   color:#333333;
   font-weight:bold;
}

.controlpanelitem>div {
   margin:20px;;
}
                  
textarea {
   width:100%;
   min-width:240px;
   min-height:5em;      
}
         



#menuicon {
   width:32px;
   height:48px;
   margin-right:20px;
   float:left;
   cursor:pointer;
   margin-left:5px;        
}

#menuicon>span {
   display:block;   
   border-top:4px solid #cccccc;
   border-bottom:1px solid #aaaaaa;
   margin-bottom:5px;
   margin-top:5px;           
}

#menuicon:active {
   margin-top:2px;
}

.menuinfo {
  font-size:12px;
  color:#666666;        
}


.leftmenutitle {
    text-align:center;
    padding:5px;    
    margin-bottom:10px;           
}

.topmenuright {
   float:right;
   margin-right:10px;           
}

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

.pic {
   width:90%;
   max-width:800px;   
   margin:auto;
   position:relative;
   top:0px;left:0px;
}

.pictitle {
   position:absolute;
   bottom:0px;
   width:100%;
   height:20px;
   background:rgba(0,0,0,0.4);
   margin:auto;
   border-radius: 0px 0px 20px 20px;
   color:#ffffff;
   font-weight:normal;
   font-size:14px;
   text-align:center;
   padding-top:5px;
   border-top:1px solid rgba(0,0,0,0.8);
   text-transform:uppercase;
   font-family:arial;
          
}

.pic>img {
   width:100%;
   margin:auto;
   display:block;
   border-radius:20px;
   overflow:hidden;
   margin-bottom:20px;  
   box-shadow: 7px 10px 19px -2px rgba(0,0,0,0.75),inset 0px 0px 22px -16px rgba(0,0,0,0.53);
}                

a.small {
   font-size:12px;
   text-decoration:none;
   color:#444444;     
}

span.input {
   display:inline-block;
   border:1px solid #888888;
   background:#cecece;
   padding:2px;
   min-width:160px;
   height:22px;        
}
                                 
               

#leftmenu {
  position:fixed;
  left:0px;
  top:51px;
  background:#f5f5f5;
  border-right:1px solid #cccccc;
  width:320px;
  height:calc(100% - 51px); 
  z-index:100000;
  overflow:auto;
  transition: left 0.5s;       
}
#leftmenu>div {
   padding-top:5px;           
}
          
#leftmenu a {
  display:block;
  /*background:#dddddd;*/
  color:#000000;
  text-align:left;
  margin-bottom:5px;
  /*border-top:1px solid #cccccc;
  border-bottom:1px solid #bbbbbb; */
  padding:5px;
  padding-left:10px;
  text-decoration:none;
  font-size:14px;
  line-height:28px;
  vertical-align:middle;
}

#leftmenu a:hover,#leftmenu a:active {
   background:#cccccc;
}

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:#fefefe;
   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,div.frame {
   border:1px solid rgba(0,0,0,0.3);
   border-radius:8px;
   padding:30px;
   padding-left:60px;
   padding-right:60px;
   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);
   max-width:1000px;
   margin:auto;
}

form.clear {
   border:none;
   border-radius:none;
   padding:0px;
   background:transparent;
   box-shadow: none;
   max-width:auto;
   margin:0px;   
}


form.noframe {
   margin:auto;
   padding:5px;
   box-shadow:none;
   border:none;
   max-width:auto;          
}

h2 {
   font-size:16px;
   font-weight:bold;
   padding:0px;
   margin:5px;
   text-align:center;
}
                

form.iframe h1 {
   font-size:18px;
}


form.iframe {
   border:1px solid rgba(0,0,0,0.3);
   border-radius:8px;
   padding:0;
   background:#fefefe;
   box-shadow: none;;
   width:auto;
   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;
}


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

          

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

.smallform { border-radius:0px!important;padding:2px!important; }
.smallform input,.smallform select { font-size:12px;padding:2px; }

.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%;
   border:1px solid #000000;
   background:#000000;
   border-radius:5px;
   color:#ffffff;
   display:block;
}

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

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

.smallbtn {
   font-size:12px!important;
   padding:3px!important;       
}

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

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

table.xls td input {
   margin:0px;
   border:none;
}


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

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

   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)  {
   h1 { font-size:18px; }
   .onmobilhide { display:none; } 
   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;  }
   form.clear { width: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:calc(100% - 10px); }
   .loginpwd input,.loginemail input { width:calc(100% - 58px); }
   #leftmenu { left:-340px; }   
   body {
       padding-top:60px;
       margin-left:0px!important;
       width:100%!important;
        
   }
   .controlpanelitem {
      width:90%;
      margin:4%;
      display:block;
   }

   ul.imagelist li {
      width:95%;
      height:auto;
      display:block;
      float:none;      
   }

   ul.imagelist li>img {
      width:100%;
      height:auto;
      border:none;
   }

   
}