*{
  padding: 0;
  margin: 0; 
}   
#full-text-Id{
 border:1px solid #34c57e; 
} 
.crs-reporter-main{
  width: 100%;
  padding-bottom: 2em;
  overflow: auto;
  height: auto;

}
.crs-reporter-engine{
width: 75%;
float:right;
min-height: 300px;
overflow: auto;
padding-bottom: 2em;

background: linear-gradient(to right, #eeeeee,#fafafa,#fafafa,#fbfbfb ,#eeeeee);
} 
.crs-reporter-content{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
 height: auto;

  margin-top: 2em;
  padding-bottom: 2em;
}
.btncls{
  font-size: 18px;
}
#waits{
  text-align: center;
  color: blue;
  font-size: 14px;
}
/*#mobile-menu{
display: none;
}*/
.navbar-inner{
  display: none;
}
.close-me{
  display: none;
}
#success{
  color: green;
  text-align: center;
  font-size: 14px;
}
#msg-div{
  width: 98%;
  height: 500px;
  overflow: auto;
  margin-right: auto;
  margin-left: auto;
  border:1px solid #ccc;
}
#form-chat{
  width: 94%;
  margin-top: 2em;
height: auto;
  margin-left: auto;
  margin-right: auto;
}
html,body{
    overflow-x: hidden;
    background-size: cover;
    background-color: #fafafa;
    background-repeat: no-repeat;
    margin: 0; 
    padding: 0;
}   
#accessory-search{
  margin-bottom: 2em;
  margin-top: 0.5em;
  background-color: #eeeeee;
}
.wrap-report-chat{
  width: 100%;
  height: 600px;
}

 #crsviewmodal{
     width: auto;
  min-height: 450px;
  border-radius: 8px;
  padding-bottom: 1.2em; 
 }
 #req_send{
    margin-top: 0.3em;
    width: auto;
       padding-right: 0.3em;
    padding-left: 0.3em;
    font-size: 14px;
    color:#000;
    background-color:#d4edda;
    border-radius: 5px;
}
#req_send:hover{
  background-color: #34c57e;
  color: #fafafa;
  cursor: pointer;
}
  #crsviewpolice{
     width: auto;
  min-height: 450px;

  border-radius: 8px;
  padding-bottom: 1.2em; 
 }
    #crsviewpolice h4
  {
text-align: center;
  font-size: 16px;
  color: green;
  }
  #redId{
    float: right;
    font-size: 16px;
  }
 

    #crsinv{ 
     width: auto;
  min-height: 400px;
  border-radius: 8px;
  padding-bottom: 1.2em; 
 }
  #crsviewrpt{
  border-radius: 8px;
 }
 .modalreq{
  width: auto;
  height: 300px;
 }

#crsviewrpt img{
  width: 98%;
}
   #crsreq{
     width: auto;
  min-height: 300px;
  border-radius: 8px;
  padding-bottom: 1.2em; 
 }
 .crs-submit-req{
  width: 90%;
  margin: 1em;
 }
 #crsreq h4
  {
text-align: center;
  font-size: 16px;
  color: green;
  }

 .rpt-data-container{ 
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  height: auto;
 }
 #report-typ{
  padding-left: 33%;
  background-color: #c0cdc6;

 }
  #report-typ p{
  font-weight: bold;
  font-size: 16px;
  }
   #report-typ span{
    font-weight: bold;
   }
 .rpt-data-container img{
  height: 240px;
  width: 300px;
 }
 .rpt-data-container p{
font-size: 13px;
color: #4d62a3;

font-family: "Times New Roman", Times, serif;
 }
 .rpt-data-container span{
margin-left: 0.6em;
color: #000;
 } 
 #crsviewmodal h4
  {
text-align: center;
  font-size: 16px;
  color: green;
  }
   #crsviewrpt h4
  {
text-align: center;
  font-size: 16px;
  color: green;
  }
     #crsinv h4
  {
text-align: center;
  font-size: 16px;
  color: green;
  }
  .ajax-data{
    width: 100%;
    height: auto;
  }
.crs-btn{
  margin-top: 3em;
}
.crs-btn-chat{
  margin-top: 1em;
}
/*reporter inner*/
.page-title{
width: 70%;
height: auto;
float: right;
} 
.case-link{
  width: 100%;
  height:auto;
  overflow: auto;
}
.case-link button{
  float: right;
  font-size: 13px;
border-radius: 8px;
padding-right: 0.3em;
padding-left: 0.3em;
  margin-right: 2em;
}
.case-link button:hover{
  background-color:#34c57e; 
  cursor: pointer;
} 
.crs-page-title{
  height: 30px;
  width: 100%;
  box-shadow: 0 4px 8px 0 #eeeeee, 0 6px 20px 0 #f3f3f3;
/*  background-color:#34c57e;*/
}
.crs-page-title p{
text-align: center;
font-size: 16px;
font-family: ubuntu; 
color: #00AF80;
}
.crs-categ-decr{
  width: 100%;
  height: auto;
  padding: 0.2em;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 0.4em;
}
.crs-categ-decr span{
  font-size: 12px;
  padding-right: 1em;
  padding-left: 1em;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}
.crs-filter{
width: 100%;
height: auto;
overflow: auto;
}
.crs-data-fetch{
  width: 94%;
  margin-left: auto;
  margin-right: auto;
  background-color:#fafafa;
  height: auto;
  overflow: auto;
}
.btn-close{
  display: none;
}
#search-form-ID input[type=search]{
  font-size: 14px;
}

.report-object{
 height: auto;
 margin-top: 2em;
border-bottom: 2px solid #ccc;
 overflow: auto;
}
.object-wrap{
   width: 96%;
  margin-left: auto;
  margin-right: auto;
  
  border-bottom: 2px solid #ccc;
  height: auto;
  overflow: auto;
  border-radius: 5px;
}
.report-icon img{
  width: 100%;
  height:150px;
}
.report-icon{
  float: left;
  width: 25%;
  height: 100%;
}
.report-txt{
  float: right;
  width: 75%;
  height: 100%;
}
.report-header{
  width: 100%;
  border-bottom: 1px solid #eee;
  height: auto;
  overflow: auto;
}
.obj{
  background-color: red;
}
.report-view-cpolice{
  width: 100%;
   border-bottom: 1px solid #eee;
  height: auto;
  overflow: auto;
}
.btn-invol-report{
    margin-top: 0.3em;
    width: auto;
    font-size: 14px;
    color:#000;
    padding-right: 0.3em;
    padding-left: 0.3em;
        background-color:#d4edda;
    border-radius: 5px;

}
.btn-invol-report:hover{
  background-color: #34c57e;
  color: #fafafa;
  cursor: pointer;
}
.btn-process-police{
    margin-top: 0.3em;
    width: auto;
       padding-right: 0.3em;
    padding-left: 0.3em;
    font-size: 14px;
    color:#000;
    background-color:#d4edda;
    border-radius: 5px;

}
.btn-process-police:hover{
  background-color: #34c57e;
  color: #fafafa;
  cursor: pointer;
}
.btn-full-report{
    margin-top: 0.3em;
    width: auto;
       padding-right: 0.3em;
    padding-left: 0.3em;
    font-size: 14px;
    color:#000;
    background-color:#d4edda;
    border-radius: 5px;

}
.btn-full-report:hover{
  background-color: #34c57e;
  color: #fafafa;
  cursor: pointer;
}
.btn-process-report{
   margin-top: 0.3em;
    width: auto;
       padding-right: 0.3em;
    padding-left: 0.3em;
    font-size: 14px;
    color:#000;
    background-color:#d4edda;
    border-radius: 5px;
}
.btn-process-report:hover{
   background-color: #34c57e;
  color: #fafafa;
  cursor: pointer;
}
.report-view{
  width: 33%;
  height: auto;
  float: left;
}
.report-call{
  width: 33%;
  float: left;
  height: auto;
}
.report-police{
  width: 33%;
  float: left;
  height: auto;
}
.report-police-call{
  width: 100%;
overflow: auto;
border-bottom: 1px solid #eee;
  height: auto;
}
.report-item-no{
  width: 100%;
border-bottom: 1px solid #eee;
  overflow: auto;
  height: auto;
}
.report-date-status{
   width: 100%;
  height: auto;
overflow: auto;
border-bottom: 1px solid #eee;
}
.report-date{
  width: 70%;
  float: left;
   height: auto; 
}
.report-status{
  float: right;
  height: auto;
  width: 30%;
}
.report-txt h6{
color: #4d62a3;
font-size: 15px;
 font-family: "Times New Roman", Times, serif;
margin-left: 0.4em;
}
.report-txt span{
color: #5e6061;
font-size: 14px;
 font-family: "Times New Roman", Times, serif;
margin-left: 0.3em;
}
.report-no{
  float: right;
  width: 50%;
  height: 100%;
}
.report-typ{
  float: left;
  width: 50%;
  height: auto;
}

.go-back{
width: 30%;
height: auto;
float: left;
}
.crs-goback{
  width: 100%;
  height: 2em;

   background-color: #00AF80;
}
.page-title h3{
 
  padding-top: 0.5em;
  font-size: 16px;
}

.crs-register{
float: right;
min-height: 500px;
width: 60%;
}
.crs-contents-ins{
height: auto;
padding-left: 2em;
width: 100%;
}
.page-title{
width: 90%;
height: auto;
float: right;
}
.page-title h3{
  color: #fafafa;
  padding-top: 0.5em;
  font-size: 16px;
}
.msg{
  width: 100%;
  height: auto; 
}
.msg h6{
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: red;
}

.crs-main-home{
width: 100%;
height: 100vh;
overflow: auto;
background-color: #fbfbfb;
}
.report-req{
  width: 60%;
  min-height: 500px;
  float: left;
  border-right: 2px solid #ccc;
}
.report-view-process{
  width: 45%;
  min-height: 500px;
  float: left;
  border-right: 2px solid #ccc;
}
.wrap-report-chat{
  width: 100%;
  height: auto;
  overflow: auto;
}
.report-chat{
 width: 55%;
 overflow-y: hidden;
  height: 500px;
  float: left;
  overflow: auto; 
}

#crs-reporter-categories{
width: 25%;
float: left;
min-height: 500px;
border-left: 2px solid #e7e9ea;
border-right: 2px solid  #dadddf;
}
#crs-reporter-categories ul{
  margin-top: 2em;
}
#crs-reporter-categories li a{
  color: #00AF80;
  font-size: 14px;
  font-family: ubuntu;
} 
.crs-form-field-wrap p{
font-size: 12px;
color: grey;
}
.crs-filter-form input[type=text]{
  color: #34c57e;
  border:1px solid #34c57e;
  height: 2.5em; 
  font-size: 14px;
}
.report-notfy{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0.6em;
}
.notify-dv{
  width: 100%;
  height: auto;
  padding: 0.5em;
  margin-bottom: 1.2em;
}
.report-notfy span{
color:#000; 
font-size: 13px;
}
.report-notfy em{
margin-left: 0.3em;
margin-right: 0.3em;
color: grey;
}
.report-notfy button{
  background-color:#34c57e;
  color: #fafafa;
  margin-left: 0.8em;
  font-size: 14px;
  padding-left: 0.6em;
  padding-right: 0.6em;
  border-radius: 5px;
} 
.report-notfy button:hover{
  cursor: pointer;
  background-color:#00be49;
}
.pay-link{
  width: 30%;
  margin-bottom: 1em;
  padding-left: 1em;
  background-color: #ebf8a4;
 font-family: "Lucida Console", Courier, monospace;
  height: auto;
}
.pay-link a{
  text-align: center;
}
#username-msg{
  width: auto;
  text-align: center;
  font-size: 12px;
  margin-bottom: 0.8em;
  background-color:#e5d7a8;
  text-align: center;
}
#div-notify{
background-color: #e5d7a8;
height: auto;
padding: 0.6em;
width: 100%;
margin-left: auto;
margin-right: auto;
}
#div-notify span{
font-size: 12px;
}
.crs-filter-form textarea{
  color: #34c57e;
  border:1px solid #34c57e;
   font-size: 14px;
}
.crs-filter-form input[type=number]{
  color: #34c57e;
  border:1px solid #34c57e;
  height: 2.5em; 
    font-size: 14px;
}
.crs-filter-form select{
  color: #34c57e;
  height: 2.5em; 
  border:1px solid #34c57e;
  font-size: 14px;
}
.crs-filter-form{
  width: 65%;
  margin: 2em;

  margin-right: auto;
  margin-left: auto;
}
.crs-form-field-wrap{
  width: 100%;
  margin-top: 0.3em;
  height: 40px;
}
.fd-label{
width:30%;
float: left;
padding-top: 0.3em;
height:100%;
}
.fd-data{
width:70%;
float: right;
height:100%; 
}
.fd-data-edit{
width:70%;
margin-left: 2em;
height:100%; 
}
#crsedit-id{
  height: 30px;
  width: 98%;
  margin-right: auto;
  margin-left: auto;
}

.crs-submit-btn{
    margin-top: 0.5em;
    width: auto;
    padding-right: 1.3em;
    padding-left: 1.3em;
    font-size: 14px;
    color:#3b5997;
    background-color: #e8e0cb;
    border-radius: 5px;
  float: right;
}
.crs-submit-btn:hover{
  background-color: #34c57e;
  color: #fafafa;
  cursor: pointer;
}
#crs-reporter-categories li{
  margin-top: 0.3em;
  list-style-type: none;
  padding-top: 0.4em;
  border-bottom: 1px solid  #eaedee;
  padding-bottom: 0.4em;
    padding-left: 0.6em;
}
#crs-reporter-categories li:hover{
  background-color:#c0cdc6; 
} 
#crs-reporter-categories li a:hover{
  color: #000; 
}
.crs-top-menu{
  width: 60%;
  margin-top: 0.8em;
  margin-bottom: 2em;
float: right;
}

/*end reporter inner*/
  /*.loaders{*/
  /*  height: 40px;*/
  /*  overflow: auto;*/
  /*  width: auto;*/
  /*  position: fixed;*/
  /*  margin-right: auto;*/
  /*  margin-left: 40%;*/
  /*}*/
 .btn-close-dialog{
  color: #fafafa;
width: 30%;
float: right;
margin-right: 4em;
color: red;
  border-radius: 7px;
 }
  .btn-close-dialog:hover{
    background-color: red;
    cursor: pointer;
    color: #fafafa;
  }
 #deleteModal{
  width: 250px;
  height: 300px;
 }
 #editModal{
  border-radius: 8px;
    width: 370px;
  height: 450px;
 }
 #editModalSub{
    border-radius: 8px;
    width: 370px;
    padding-bottom: 1.2em;
  min-height: 450px;
 }
 #deleteModalSub{
  width: 250px;
  height: 300px;
 }
#deleteModalSub h4{
  text-align: center;
  font-size: 16px;
  color: green;
 }
  #deleteModal h4{
     text-align: center;
  font-size: 16px;
  color: green; 
  }
 #editModalSub h4{
  text-align: center;
  font-size: 16px;
  color: green;
 }
 #editModal h4{
  text-align: center;
  font-size: 16px;
  color: green;
 } 
#search-buttons{
  border-radius: 6px;
  margin-left: 0.3em;
   background-color:#34c57e;
}
#search-buttons:hover{
  background-color:#104d20;
}
#search-accessory{
  border-radius: 6px;
  margin-left: 0.3em;
   background-color:#34c57e;  
}
#search-accessory:hover{
  background-color:#104d20;
  cursor: pointer;
}
  .btn-primary{
    width: 60%;
    border-radius: 5px;
    color: #039be5;
    font-size: 12px;
    margin-top: 0.3em;
   background-color:#e7e7e7;
  }
  .delete-edit-link a{
    margin-left: 1em;
    font-size: 12px;
  }
#data-table b{
  font-size: 12px;
} 
.update-div{
  width: 70%;
  margin-top: 2em;
  height: 200px;
  background-color: #fafafa;
  margin-right: auto;
  margin-left:auto;
}
#side-menu li>a{
margin-left: 1em;
}
.panel-menu-left li>a{
  margin-left: 1em;
}
#reject-rson{
  height: 100px;
}
#form-Id{
  float: right;
}
#id-tdg-left i{
  color: red;
}
.form-btn-edit{
  width: 100%;
  height: auto;
}
.form-btn-edit input[type=submit]{
  width: 40%;
  color: #1c95bf;
  border-radius: 5px;
  margin-left: 0.5em;
  float: left;
   font-size: 13px;
}
.form-btn-edit input[type=submit]:hover{
  background-color: #0A7E40;
 font-size: 13px;
 color:#fafafa;
}
.start-date{
float: left;
width: 40%;
height: auto;
}
.start-date input[type=date]{
margin-right:0.5em;
}
.end-date input[type=date]{
margin-left:0.5em;
}
.start-dates h6{
font-size: 11px;
color: green;
padding-left: 1.5em;
}
.start-dates em{
color: #000;
margin-right: 0.3em;
}
.end-dates em{
  color: #000;
  margin-right: 0.3em;
}
.end-dates h6{
  font-size: 11px;
  color: red;
  padding-left: 1.5em;
}
.end-date{
float: right;
width: 40%;
height: auto;
}
.date-group{
  width: 100%;
  margin-top: 1em;
overflow: auto;
height: auto;
}
.header-datas p{
  font-weight: bold;
  font-size: 15px;
  font-family: ubuntu;
}
.header-datas span{
  color: green;
  font-size: 14px;
  margin-right: 0.5em;
  margin-left: 0.5em;
}
.header-datas{
  width: 40%;
  float: right;
  margin-left: auto;
  margin-right: auto;
 overflow: auto;

}
.time-dates{
  width: 100%;
  margin-top: 2em;
height: auto;

}
.start-date{
width: 45%;
height: auto;
float: left;
}
.start-date h6{
  font-size: 11px;
  color: green;
}
.end-date h6{
font-size: 11px;
color: red;
}
.to-end h5{
  font-size: 13px;
}
.to-end{
width: 10%;
height: auto;
float: left;
}
.end-date{
width: 45%;
float: left;
height: auto;
}
#deleteRoomId h5{
color: red;
font-size: 17px; 
}
#addRoomDivId h5{
  margin-left: 12%;
  font-size: 17px;
  color: green;
}
.tdg-image-house{
  height: 330px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.tdg-wrapper{
  width: 100%;
  height: 40px;
border-bottom: 1px solid #ccc;
}
.tdg-btn-photo{
width: 48%;
height: auto;
float: right;
padding: 0.2em;
}
.photo-changer{
  height: auto;
  float: left;
  width: 45%;
}
.tdg-btn-ops{
width: 48%;
height: auto;
padding: 0.2em;
float: left;
}
.tdg-btn-ops a{
  margin-left: 1em;
  float: left;
}

#deleteDivId{
  width: 30%;
  height: 350px;
}
#rejectDivId{
   width: 30%;
  height: 350px;
}
#deleteRoomId{
 width: 30%;
  height: 285px  
}
#ModalLab h5{
 margin-left: 1.3em;
  font-size: 16px;
  color: green; 
}
#ModalLabels h5{
margin-left: 1.3em;
  font-size: 16px;
  color: green;
}
#addLeaseDivId{
 width: 35%;
  min-height: 400px  
}
#addRoomDivId{
   width: 35%;
  min-height: 400px 
}
#approveDivId{
  width: 35%;
  min-height: 400px  
}
#deleteDivId h5{
  text-align: center;
  color: red;
  margin-left: 4em;
  font-size: 16px;
}
.tdg-image-house img{
  width: 100%;
  margin-right: auto;
  height: 95%;
}
.delete-link a{
  float: right;
  font-size: 15px;
  padding-right: 1em;
}
.delete-link{
  float: right;
  background-color:#e1e4e6;
  width: 100%;
}
.tdg-text-house{
  height: auto;
  width: 70%;
border:1px solid #ccc;
padding: 1em;
border-radius: 5px;
  margin-top: 2em;
  margin-left: auto;
  margin-right: auto; 
}
.tdg-text-house h4{
  font-size: 17px;
}
.tdg-det{
  width: auto;
  color: grey;
  font-family: ubuntu;
  margin-top: 0.7em;
  height: auto;
}
.tdg-det b{
  font-style: italic;
margin-right: 0.5em;
margin-left: 0.5em;
}
.tdg-det span{
margin-right: 0.3em;
margin-left: 0.2em;
font-family: sans-serif;
}


.tdg-image-details{ 
  height: 300px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.tdg-text-details{
    height: 100px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
#student-regbtn-Id:hover{
 background-color:#49b436; 
}
#btnSearchId:hover{
  background-color:#104d20;
}
#Btnfilter:hover{
  background-color:#104d20;
}
#Btnfilter{
  padding-left:0.6em;
  padding-right:0.6em;
  padding-top: 0.2em;
  cursor: pointer;
  width: 8em;
  color: #fafafa;
  font-size: 16px;
  font-weight: bold;
  border-radius: 16px;
  background-color:#49b436;
  padding-bottom: 0.2em;
}
#filter-bystatus{
    padding-left:0.6em;
  padding-right:0.6em;
  padding-top: 0.2em;
  margin-top: 0.3em;
  cursor: pointer;
  width: 8em;
  color: #fafafa;
  font-size: 16px;
  font-weight: bold;
  border-radius: 16px;
  background-color:#49b436;
  padding-bottom: 0.2em;
}
#filter-bystatus:hover{
   background-color:#104d20;
}
#btnSearchId{
padding-left:0.6em;
  padding-right:0.6em;
  padding-top: 0.2em;
  cursor: pointer;
  width: 8em;
  color: #fafafa;
  font-size: 16px;
  font-weight: bold;
  border-radius: 16px;
  background-color:#49b436;
  padding-bottom: 0.2em;
}
#btn_unblocks:hover{
  background-color:#49b436;
  color: #fafafa;
}
#btn_blocks:hover{
 background-color:#49b436;
  color: #fafafa; 
}
#btn_unblocks{
border-radius: 5px;
width:45%;
color: #1c95bf;
font-size: 13px;
float: right;
}
#btn_view_activateId{
border-radius: 5px;
width:45%;
color: #1c95bf;
font-size: 13px;
float: right;
}
#btn_view_leaseId{
border-radius: 5px;
width:45%;
color: #1c95bf;
font-size: 13px;
float: left;
}
.id-tdg-left p{
  text-align: center;
  font-size: 12px;
  color: green;
}
.id-tdg-left button{
  margin-left: 1em;
}
#btn_blocks{
width:45%;
float: right;
color: #1c95bf;
font-size: 13px;
border-radius: 5px;
}

#btn_view_tenant{
width:45%;
color: #1c95bf;
font-size: 13px;
float: left;
border-radius: 5px;
}
#search-box{
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}
.search-box a{
  margin-left: 1em;
}
#detailsId{
  min-height: 120px;
}
#btn-unblock{
padding-left: 0.3em;
padding-right: 0.3em;
font-weight: bold;
width: 60px;
font-size: 13px;
margin-left: 30%;
border-radius: 5px;
}
#email-sender-Id{
  height: 260px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#btn-block{
padding-left: 0.3em;
font-weight: bold;
width: 60px;
margin-left: 30%;
font-size: 13px;
padding-right: 0.3em;
border-radius: 5px;
}
.panel-contents img{
  margin-right: 0.3em;
}
#left-reg .form-group input[type=text]{
  background-color:#abebc6;
  height: 2em;
}
#left-reg .form-group input[type=email]{
  background-color:#abebc6;
   height: 2em;
}
#left-reg .form-group input[type=password]{
   background-color:#abebc6;
    height: 2em;
}
#left-reg .form-group input[type=number]{
  background-color:#abebc6;
   height: 2em;
}
#right-reg .form-group input[type=text]{
   background-color:#abebc6;
    height: 2em;
}
#right-reg .form-group input[type=number]{
   background-color:#abebc6;
    height: 2em;
}

#btn-unblock:hover{
  background-color:#49b436;
  color: #fafafa;
}
#btn-block:hover{
  color: #fafafa;
  background-color:#49b436;
}
#edit-form{
  width: 50%;
   background-color: #deebe1;
   border-radius: 12px;
  margin-left: auto;
  margin-right: auto;
}
#editor-title{
  text-align: center;
  font-size: 16px;
}
.photo-data{
  margin-right: auto;
  margin-left: auto;
  width: 250px;
  height: 300px;
}
.photo-data img{
  margin-right: auto;
  width: 98%;

  height: 100%;
}
#camera_data{
  margin-right: auto;
  margin-left: auto;
  width: 50%;
  height: 300px;
}
.photo-holder{
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  background-color: #eee;
  border:10px solid #ddd;
  margin: 0 auto;
}
#btn-take-photo{
 display: block;
 margin: 10px 0;
 padding: 10px 20px;
 cursor: pointer;
 background-color: cornflowerblue;
 color: #fafafa;
 text-align: center;
 text-decoration: none; 
}
.tdg-details-container{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
height: auto; 
}
.details-container{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
height: auto;
}
.tdg-data-rooms{
 width: auto;
float: left;

margin-top: 1em;
}
#btn-rooms:hover{
  background-color:#49b436;
  color: #fafafa;
}
#btn-rooms{
  float: left;
  margin-left: 1em;
  border-radius:70px;
  font-size: 16px;
  height: 70px;
  width: 70px;
 
}
.tdg-data-icons{
width: 30%;
float: left;
margin-left: 1.3em;
height: 220px;
margin-top: 1.5em;
background-color:#eee;
}
.tdg-data-footer{
  width: 100%;
  height: auto;
}
#btnViewId{
  font-weight: bold;
  font-size: 15px;
}
#btnViewId:hover{
  background-color:#104d20;
}
.tdg-data-icons a{
  font-size: 15px;
  padding: 0.2em;
  text-align: center;
  margin-left: 30%;
  font-family: ubuntu;
}
.tdg-data-icons img{
  width: 100%;
  height: 90%;
}
.all_flow{
  width: 100%;
  height: 120px;
}
#take-btn{
  float: right;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
  width: 100%;
  background-color: #e295cb;
}
#take-btn:hover{
  background-color:#104d20;
  color: #fafafa;
}
#cameraId{
  width: 40%;
  margin-right: auto;
  margin-left: auto;
  height: 400px;
  margin-top: 40px;
}
.st_Id{
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.front-id{
width: 75%;
margin-right: auto;
margin-bottom: 12em;
margin-left: auto;
position: relative;
height: 350px;
}
#previewImage{
 width: 75%;
margin-right: auto;

margin-left: auto;

height: 350px; 
}
.data-image{
 width: 100%;
margin-right: auto;          
margin-bottom: 1.5em;
margin-left: auto;
height: 100%; 
 position: absolute;
  top: 0;
  left: 0;
}
.data-image img{
  width: 100%;
margin-right: auto;

margin-left: auto;
height: 100%;
}
.wrap-Id{
 z-index: 1000;
  width: 100%;
  padding-top: 28.5%;
 position: absolute;
  top: 0;
  left: 0;
}
.passp img{
 height: 130px;
   width: 100%;
}
.passp{
  height: 130px;
  width: 21%;
  padding-top: 0.3%;
  margin-left: 0.44%;

  float: left;
}
.data-space{
 height: 130px;
  width: 24%;
  float: left; 
}
.txt{
   height: 130px;
  width: 52%;
  margin-left: 1.5%;
  margin-top: 1.4%;
  float: right;
  float: left;
}

.front-id p{
  width: auto;
  padding-top: 9em;
  height: auto;
}

.pro{
margin-left: 1.5%;
  margin-top: 1.4%;
  word-spacing: 1em;
  font-style: italic;
}
.propdf{
  margin-left: 1.5%;
  margin-top: 1.4%;
  font-style: italic;
}
.regn{
    font-style: italic; 
margin-left: 1.5%;
  margin-top: 1.4%;

}
.names{
margin-left: 1.5%;
  margin-top: 1.4%;
  font-style: italic;

}
.datexp{
margin-left: 1.5%;
  margin-top: 1.7%;
  font-style: italic;
}
.back-id{
  width: 75%;
margin-right: auto;
margin-bottom: 1.5em;
margin-left: auto;
height: 350px;
}
.back-id img{
  width: 100%;
 height: 350px; 
}

   .letter-header{
   width: 100%;
   height: 200px;
  }
   .letter-header img{
    height: 130px;
    width: 100%;
   }
  .data-header{
    padding: 1em;
  }
  .data-header h3{
    font-size: 14px;
    margin-top: -0.4em;
    font-weight: bold;
  }
    .data-header span{
    font-size: 13px;
    color: green;
  }
  #btn-assignId{
    width: auto;
  }
  .btn-ed{
    font-weight: bold;
    color: blue;
  }
  #sem-md{
margin-top: 0.5em;
margin-bottom: 0.5em;
  }
  #sem-sh{
margin-top: 0.5em;
margin-bottom: 0.5em;
  }
  .panel-contents h2{
    font-size: 17px;
    text-align: center;
    color: green;
    text-transform: uppercase;
  }
  .staff-regforms{
    margin-top: 3em;
  }
  .data-contents-main a{
    margin-right:0.3em;
  }
  .details-div{
    width: 100%;
      background-color: #d7f4df;
    height: auto;
    overflow: auto;
  }
  .aris-titles{
   color: #000;
   padding: 0.8em;
   font-size: 13px;
  }
  .aris-content{
    font-size: 13px;
    font-style: italic;
  color: #4c4e4e;
   padding: 0.8em;
  }
  #divider{
    height: 480px;
    float: left;
    width: 2px;
    background-color: #fafafa;
  }
  .aris-content-pass img{
   height: 100px;
   width: 100px;
  }
  .aris-content-pass{
    width: 100%;
    padding: 0.5em;
       height: 120px;
  }

  .aris-titles-pass{
  height: 120px;
  width: 100%;
  }
  .data-contents-main{
   float: left;
   width: auto;
  }
  .data-titles-main{
    float: left;
    width: auto;
  }
  #data-table th{
   font-size: 14px;
  }
  .btn-view{
  width: 100%;
  }
    .btn-view:hover{
  background-color: #0c9cca;
  color: #fafafa;
  }
  #data-table
{
  margin-top: 1em;
}
    #data-table td{
     font-size: 11px;
     font-weight: normal;
  }
  .search-box{
    width: 100%;
    height: auto;
    overflow: auto;
    background-color: #d7f4df;
  }
  #by-reg{
    width: 47%;
    float: left;
  }
  #filter-Id{
    margin-top: 2em;
  }
    #by-status{
    width: 47%;
    float: right;
  }
  #student-regbtn-Id{
   font-weight: bold;
  }
  /*form styles*/
  #position-selctor{
   margin-bottom: 1.2em;
  }
  .panel-contents fieldset p{
    text-align: center;
    color: green;
    font-size: 14px;
  }
    .panel-contents-pr fieldset p{
    text-align: center;
    color: green;
    font-size: 14px;
  }
  #staff-regbtn-Id{
    color: #000;
    font-weight: bold;
  }
   #staff-regbtn-Id:hover{
    color: #fafafa;
   }
  #username-Id,#emp-Id,#amount_Id,#total_Id,#codesmod-Id,#codes-Id,#code-Id,#fname-Id,#fname-Idr,#lname-Id,#mname-Id,#password-Id,#phone-Id,#email-Id,#fname-Id-short,#code-Id-short{
  background-color: #d7f4df;
  height: 2em;
  }
  #staff-regform,#staff-regform_short,#staff-regform-related{
   width: 75%;
   margin-right: auto;
   margin-left: auto;
  }
  /*form styles ends*/
.side-navs{
  display: none;
}
.side-menu{
  display: none;
}
  .header-inner-right{
   float: right;
   width: 25%;
   height: 100%;
  }
  .header-inner-left{
   width: 75%;
   height: 100%;
   float: left;
  }
  .title-panel{
width: 80%;
height: auto;
float: left;
  }
  .title-panel p{
    font-size: 15px;
    color: #34c57e;
    font-family: ubuntu;
    text-align: center;
  }
  .inner-panel-control{
width: 20%;
height: auto;
  } 
  .crs-notify{
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    height:400px; 
  }
  .crs-updates-container{
    width: 100%;
    height: auto;
  }
  .crs-titles{
    height:auto;
    width: 100%;
    background-color: #eee;
  }
  .crs-from span{   
   color: #00d87c;
  }
   .update-content a{
    margin-left: 0.3em;
   }
    .update-content{
  height: auto;
  box-shadow: 0 1.4px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  padding: 0.4em;
  }
  .update-content span{
    font-size: 13px;
    color: grey;
    font-family: 'Open Sans', sans-serif;
  }
  .notify-container{
    background-color: #d4edda;
    width: 100%;
    height:auto;
    padding: 1em;
  }
  .crs-titles p{
    text-align: center;
     font-size: 16px;
    color: #63CCFA;
    font-family: ubuntu;
  }
   .panel-menu-left li a{
    font-family: sans-serif;
    color: #000;
    font-size: 13px;
   }
    .panel-menu-left li a:hover{
  color:#34c57e; 
}
    /*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.05);*/
     .panel-menu-left{
   width: 25%;
   float: left;
   height: 100vh;
   overflow: auto;
   border-right:2px solid #eeeeee;
/*  box-shadow: 0 0 15px -4px rgba(31, 73, 125, 0.8), 0 0 0 -4px rgba(31, 73, 125, 0.8);*/
   box-shadow: 0 1.4px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19);
   background-color: #fbfbfb;
  }
      .panel-contents{
   width: 75%;
   float: left;
   overflow: auto;
 min-height: 100vh;
 background-color: #fbfbfb;
  
  }
  .inpanel-div-first{
    width: 100%;

    min-height: 200px;  
    overflow: auto;
    margin-top: 1em;
  }
  .wrap-left{
   width: 65%;

   overflow: auto;
   float: left;
  height: 100vh;
  }
   .wrap-left-reporter{
   width: 80%;
margin-left: 10%;
   overflow: auto;
   float: left;
  height: 100vh;
  }
  .content-div-timetable{
    width: 35%;
    float: left;
    min-height: 100vh;
    border-left: 2px solid #e7e9ea;
    border-right: 2px solid  #dadddf;
    overflow: auto;
    background-color: #fafafa;
  }
  .timet-div{
    width:97%;
    height: 400px;
    margin-left: auto;
    overflow: auto;
    margin-right: auto;
  }
  .timet-div hr{
    background-color:#34c57e; 
    height: 2px;
  }
  .visitor-stats h3{
    font-size: 16px;
    color: grey;
    padding-left:6em;
  }
    .visitor-stats p{
    font-size: 14px;
    color: grey;
    padding-left: 7em;
    margin-top: -1em;
  }
  .visitor-stats{
    height: auto;
    margin-left: auto;
    margin-right: auto;
    width: 97%;
    margin-top: 3em; 
  }

  .content-timet{
    width: 97%;
    min-height: 400px;
    overflow: auto;
    border-bottom: 2px solid #e5e7e9;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto; 
  }
  .id-tdg-right{
   width: 70%;
   height: 100%;
   float: left;
  }
  .id-tdg-right-bottom{
    width: 100%;
    height: auto;
  }
  .teacher h6{
    font-size: 11px;
    color: #104d20;
  }
  .subject h6{
    font-size: 12px;
    color: grey;
  }

  .teacher{
width: 60%;
height: auto;
float: left;
  }
  .subject{
width: 40%;
float: left;

height: auto;
  }
  .title-notify{
   width: 100%;
 height: auto;
 padding-left: 2em;
 padding-right: 2em;
 padding-top: 0.2em;
 margin-bottom: -14px;
  }
  .title-notify span{
  color: #000;
  margin-right: 0.3em;
  margin-left: 0.3em;
  }
    .title-notify em{
  color: grey;
  margin-right: 0.3em;
  margin-left: 0.3em;
  }
  .title-notify h4{
    font-size: 12px;
  }
  .footer-notify{
    width:100%;
     padding-left: 2em;
 padding-right: 2em;
height: auto;
  }
  .case-no{
    float: left;
    width: 25%;
    height:auto;
  }
  .case-date{
    float: left;
    width: 25%;
    height: auto;
  }
  .case-status{
    float: left;
    width: 50%;
height: auto;
  }
  .crs-notify-content{
    width: 100%;
    height:auto;
  }
  .id-tdg-right span{
    font-size: 14px;
    padding-left: 1em;
  }
  .sess-number{
width: 100%;
height: 70%;
  }
    .sess-number span{
   display:table; 
    height:60px;  
    width:60px;   
     font-family: ubuntu;
    text-align:center;
     font-size: 25px;
    }
    .session span{
     text-align: center;
     color: grey;
font-family: 'Open Sans', sans-serif;
    }
  .session{
   width: 100%;
height: 30%;
  }
  .id-tdg-left{
  width: 20%;
  border-right: 2px solid #ccc;
   height: 100%;
   float: left;
  }

  .panel-contents .title{
    font-size: 13px;
  }
  .panel-contents fieldset{
    width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    padding: 2em;

      margin-top: 2em;
  }
  .profile-details{
    width: 70%;
    height: 600px;
    margin-top: 1.5em;
    overflow: auto;
       border-left: 12px solid #34c57e;
    background-color: #fafafa;
    margin-right: auto;
    margin-left: auto;
  }
    #btn-submit-datas{
    width: auto;
    font-size: 14px;
    
    border-radius: 5em;
    padding-right: 1em;
    padding-left: 1em;
    margin-left: 6em;
    text-transform: capitalize;
    background-color: #34c57e;
  }
  #btn-submit-datas:hover{
    background-color: #0A7E40;
    cursor: pointer;
    color: #fafafa;
  }
   #btn-submit-pay{
    width: auto;
    font-size: 14px;
    color: #fafafa;
    border-radius: 5em;
    padding-right: 1em;
    padding-left: 1em;
    float: right;
    text-transform: capitalize;
    background-color: #34c57e;
  }
  #btn-submit-pay:hover{
    background-color: #0A7E40;
    cursor: pointer;
    color: #fafafa;
  }
  #btn-submit-data{
    width: auto;
    font-size: 14px;
    float: right;
    border-radius: 5em;
    padding-right: 2em;
    padding-left: 2em;
    text-transform: capitalize;
    background-color: #34c57e;
  }
  #btn-submit-data:hover{
    background-color: #0A7E40;
    cursor: pointer;
    color: #fafafa;
  }
  .photo-names{
   width: 90%;
     border-bottom: 2px solid #e5e7e9;
   margin-right: auto;
   margin-left: auto;
   min-height: 180px;
   padding-bottom: 1.2em;
  }
   .upload-photo{
    width: 100%;
    height: 20px;

  }
   .photo-prf img{
        height: 100px;
    border-radius: 120px;
    margin-left: 26%;
    margin-top: 1.2em;
   align-content: center;
    width: 100px;
  }
    #cont-edit-dialog{
    width: 340px;
    border-radius: 8px;
    height: 320px;
  }
  #edit_dialog{
     width: 400px;
margin-left: auto;
margin-right: auto;
  height: 400px;
  }
  #change_photo{
    width: 28%;
    border-radius: 8px;
    height: 340px;
  }
  #profile-dialog{
     width: 320px;
margin-left: auto;
margin-right: auto;
  height: auto;
  }
  #btn_default{
    border-radius: 5px;
    padding: 0.3em;
    font-size: 18px;
  }
  .modal-header h5{
    font-size: 16px;
    margin-left: 30%;
    color: #34c57e;
    text-align: center;
    font-family:ubuntu;
  }
  .upload-photo img{
    width: 24px;
    height: 24px;
  }
  .upload-photo p{
    text-align: center;
  }
  .profile-datas{
       width: 90%;
   margin-right: auto;
   margin-left: auto;
    height: 300px;
  }
 .action-header p{
  text-align: center;
  font-family: ubuntu;
  font-size: 14px;
  color: green;
 }
 .action-header span{
  font-size: 13px;
  margin-left: 1em;
  font-style: italic;
 }
  .action-header a{
    float: right;
    margin-right: 1.3em;
  }
  .photo-profile{
  width: 25%;
    float: left;
  height: 100%
  }
  .user-names{
  width: 70%;
  float: left;
  height: 100%
  }
  .form-pay{
    width: 70%;
    height: auto;
    overflow: auto;
  
    margin-right: auto;
    margin-left: auto;
  }
  #formId-pass{
    width: 50%;
    padding: 1.5em;
    min-height: 300px;
    margin-bottom: 6em;
    margin-right: auto;
    margin-left: auto;
  }
  #formId-pass label{
    color:#646668;
    font-size: 14px;
    margin-bottom: -1em;
  }
  #formId-pass input[type=password]{
    height: 1.5em;
    color: #34c57e;
  }
  #formId-pass input[type=text]{
    height: 2em;
    color: #34c57e;
  }
  #formId-pass input[type=number]{
    height: 2em;
    color: #34c57e;
  }
  #formId-pass input[type=email]{
    height: 2em;
    color: #34c57e;
  }
  .user-names p{
    padding-left: 5em; 
    color: #15AFF2;
    margin-top: 4em;
  }
  .data-title{
float: left;
width: 30%;
height: 300px;
  }
  .tdg-title-profile{
   margin: 0.7em;
   background-color:#e8e0cb;
   padding-left: 1em;
   border-top-right-radius: 12px;
   border-bottom-right-radius: 12px;
  }
    .tdg-title-profile span{
    color:#5e6061;
      font-size: 14px;
    font-family: 'Open Sans', sans-serif;
  }
  .tdg-title-data{
   margin: 0.7em;
  }
  .tdg-title-data span{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
        color: grey;
  }

  .data-data{ 
float: left;
width: 70%;
height: 300px;
  }
  .data-data a{
    font-size: 12px;
    margin-right:0.4em;
  }
  .aris-profile em{
  margin-left: 0.3em;
  color:#6db780;
}
  .aris-profile{
    height: 120px;
    width: 100%;
    overflow: auto;
    padding-bottom: 0.3em;
  background-color: #fbfbfb;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  /*border-bottom: 2px solid #ccd0dc;*/
  }
   .profile-picture{
  width: 100%;
  height: 50%;
 }
   .profile-picture img{
    height: 100px;
    border-radius: 120px;
    margin-left: 29%;
   align-content: center;
    width: 100px;
   }
    .aris-profile p{
      text-align: center;
      color: #fafafa;
      margin-top: 2.5em;
      font-size: 13px;
      background-color: #564961;
      border-radius:3em;
    }
      .aris-profile a{
        float: right;
        margin-right: 0.5em;
 
      }
      .wrap-title{
        background: linear-gradient(to left, #fbfbfb,rgba(0,0,0,0.1));

        height: 100%;
        width: 100%;
      }
  #header-left-small{
float: left;
width: 25%;
background-image: url("../banner.png");
background-color:#34c57e;
height: 50px;
 color: #fafafa;
    font-style: bold;
    text-align: center;
    line-height: 2.5em;
    font-size: 20px;
  }
  #myScrollspy{
    width: 100%;
 
  }
  #link-drop{
    width: auto;
  }
  #ul-drop{
    width: 100px;
  }
      #header-right-big{
float: right;
width: 75%;


    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
    height: 48px;
  }
      .panel-header{
  height: 50px;
  width: 100%;
  margin-bottom: 1.2em;
  }
  .title-panel{
width: 80%;
float: left;
height: 100%;
  }
  .inner-panel-control{
width: 20%;
float: left;
height: 100%;
  }
  #logout-div{
    width: 50%;
    height: 60px;
    background-color:#eee; 
    border-radius: 5px;
    z-index: 999;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.10);
    position: absolute;
   margin-top: 50px;
  }
  #logout-div li{
    margin-left: 4.4em;

    margin-top: 1em;
    list-style-type: none;
  }
    .inner-panel-control p:hover{
      background-color: #e9f3ec; 
      cursor: pointer;
    }
  .inner-panel-control p{
    float: right;
    border-radius: 5px;
    margin-right: 1em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 0.34em;
  }
    #panel-main-div{
   width: 100%;
   min-height: 600px;
   overflow: auto;
  }
    #header-left-small p{
      font-size: 20px;
      color:#0d104c;
      font-family: ubuntu;
    }
  .panel-menu-left li{
    padding-left: 2.5em;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
  }
    .panel-menu-left li:hover{
    background-color:#e8e0cb;
      overflow: auto;
      width: auto;
    }

  .panel-header-pr{
  height: 50px;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  }
  .navbar{
    display: none;
  }
  #btn-dismiss a{
   color: red;
   font-size: 20px;
   float: right;
   margin-right: 2em;
  }

#btn_register{
    padding-left:0.6em;
  padding-right:0.6em;
  padding-top: 0.2em;
  cursor: pointer;
  width: 8em;
  color: #fafafa;
  font-size: 16px;
  font-weight: bold;
  border-radius: 16px;
  background-color:#49b436;
  padding-bottom: 0.2em;
}
#btn_register:hover{
  background-color:#104d20;
}
#fields input[type=password]{
 color: #253c2a;
  background-color:  #e9f3ec;
  border-radius: 12px;
  border:1px #aef solid;
  font-size: 13px;
}
#fields input[type=text]{
  color: #253c2a;
  border-radius: 12px;
  background-color: #e9f3ec;
  border:1px #aef solid;
  font-size: 13px; 
}
#right-reg{
float: right;
overflow: auto;
width: 44%;
margin-right:1em;
margin-left: 1em;
padding: 1em;
border-radius: 12px;
background-color: #deebe1;
height:auto;
}
#left-reg{
float: left;
width: 44%;
padding: 1em;
border-radius: 12px;
background-color: #deebe1;
margin-left:1em;
margin-right: 1em;
height: auto;
}
  .security{
 width: 100%;
 overflow: auto;
 overflow-x: hidden;
 height: 100px; 
}
#fields{
  width: 80%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.secs{
  float: left;
  width:20%;
  margin-left: 0.5em;
} 
.secs input{ 
  text-align: center;
}
.sec{
float: left;  
}
.sec h3{
  font-size: 16px;
}
#fields label{
  font-size: 16px;
}
  @media only screen and (max-width : 1024px) {
  #header-left-small{
float: left;
width: 50%;
height: 50px;
  }
  .report-icon img{
  width: 95%;
  align-content: center;
  margin-left: auto;
  margin-left: 5%;
  margin-right: auto;
  height:200px;
}
.report-icon{
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
.report-txt{
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
  #accessory-search{
  margin-bottom: 2em;
  width: 100%;
  margin-top: 0.5em;
  background-color: #eeeeee;
}
  .crs-data-fetch{
 width: 100%;
  background-color:#fafafa;
  height: auto;
  overflow: auto;
}
  .btn-close{
    font-size: 20px;
    color: red;
    display: block;
    font-weight: bold;
  }
  .navbar-inner{
    margin-left: 1em;
   margin-top: 1px;
  display: block;
  width: 100%;
}
.report-chat{
 width: 100%;
  height: 500px;

  overflow: auto; 
}
  #crs-reporter-categories{
  display: block; 
  margin-top: 160px;
  min-height: 500px;
 
  padding-top: 1em;
  transition: 0.6s;
  width: 0;
   background-color:rgba(0, 0, 0, 0.9);
  padding-bottom: 4em;
  overflow-x: hidden;
  position: absolute;
  z-index: 9999;
  top: 0;
  opacity: 0.9;
  left: 0;
} 
#rpt-view-mob{
display: block; 
 overflow: auto;
   background-color:#ebf8a4;
 margin-top: 250px;
  padding-top: 1em;
  padding-left: 0.2em;
  transition: 0.6s;
  width: 0;
  padding-bottom: 4em;
  overflow-x: hidden;
  position: absolute;
  z-index: 9999;
  top: 0;
  opacity: 0.9;
  left: 0;
}
  .btn-close-dialog{
  color: #fafafa;
width: 30%;
float: right;
margin-right: 4em;
margin-bottom: 2em;
color: red;
  border-radius: 7px;
 }
  /*reporter*/
.crs-submit-btn{
    margin-top: 0.5em;
    width: auto;
    padding-right: 1.3em;
    margin-right: 23%;
    padding-left: 1.3em;
    font-size: 14px;
    color:#3b5997;
    margin-bottom: 1em;
    background-color: #e8e0cb;
    border-radius: 5px;
  float: right;
}
.page-title{
width: 100%;
height: auto;
padding-left: 0.3em;
}
.go-back{
padding-left: 0.3em;
width: 100%;
height: auto;
}
.crs-goback{
  width: 100%;
  height: auto;
overflow: auto;
   background-color: #00AF80;
}
.page-title h3{
  color: #fafafa;
  padding-top: 0.5em;
  font-size: 13px;
}
#crs-reporter-categories li a{
  color: #00AF80;
  font-size: 13px;
  font-family: ubuntu;
} 
.crs-filter-form{
  width: 98%;
  margin-right: auto;
  margin-left: auto;
}
.crs-categ-decr span{
  font-size: 11px;
  padding-right: 1em;
  padding-left: 1em;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}
.crs-reporter-engine{
width: 100%;
min-height: 300px;
overflow: auto;
  background: linear-gradient(to right, #eeeeee,#fafafa,#fafafa,#fbfbfb ,#eeeeee);
}
.crs-reporter-content{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
height: auto;
  margin-top: 2em;
  padding-bottom: 2em;
}
/*reporter end*/
   #header-right-big{
float: right;
width: 50%;
background-color:#fbfbfb; 

height: 50px;
  }
    .content-div-timetable{
    width: 100%;
    float: left;
    min-height: 100vh;
    overflow: auto;
    background-color: #fafafa;
  }
    .timet-div{
    width:100%;
    height: 430px;
    margin-left: auto;
    
    overflow-y: auto;
    margin-right: auto;
  }
    .wrap-left{
   width: 100%;
   overflow: auto;
height: auto;
  }
  .wrap-left-reporter{
    width: 100%;
    margin-left: 0.1em;
   overflow: auto;
height: auto; 
  }
   .id-tdg-right{
   width: 70%;
   height: 100%;
   float: left;
  }
    .id-tdg-left{
  width: 20%;
  border-right: 2px solid #ccc;
   height: 100%;
   float: left;
  }
    .content-timet{
    width: 100%;
    height: auto;
  overflow: auto;
    border-bottom: 2px solid #e5e7e9;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto; 
  }
  #formId-pass{
    width: 90%;
    padding: 1.5em;
    height: 300px;
    margin-right: auto;
    margin-left: auto;
  }
  .profile-details{
    width: 100%;
    min-height: 600px;
    margin-top: 1.5em;
    overflow: auto;
       border-left: 12px solid #34c57e;
    background-color: #fafafa;
    margin-right: auto;
    margin-left: auto;
  }
  .tdg-title-data a{
    margin-right: 0.3em;
    font-size: 11px;
  }
  .photo-names{
   width: 100%;
     border-bottom: 2px solid #e5e7e9;
   margin-right: auto;
   margin-left: auto;
   min-height: 180px;
   padding-bottom: 1em;
  }
   .upload-photo{
    width: 100%;
    height: 40px;
  }
   .photo-prf img{
        height: 90px;
    border-radius: 120px;
    margin-left: 18%;
    margin-top: 1.2em;
   align-content: center;
    width:90px;
  }
  #change_photo{
    width: 80%;
    height: 290px;
 
  }
  #profile-dialog{
     width: 250px;
margin-left: auto;
margin-right: auto;
  height: auto;
  }
  #btn_default{
    border-radius: 5px;
    padding: 0.3em;
    font-size: 18px;
  }
    #crsviewpolice{
     width: 400px;
  min-height: 340px;

  border-radius: 8px;
  padding-bottom: 1.2em; 
 }
 .crs-form-field-wrap{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.3em;
  height: 40px;
}
.fd-label{
width:18%;
float: left;
padding-top: 0.3em;
height:100%;
}
.fd-data{
width:82%;
padding-right: 4em;
float: right;
height:100%; 
}
  .modal-header h5{
    font-size: 16px;
    margin-left: 30%;
    color: #34c57e;
    text-align: center;
    font-family:ubuntu;
  }
  .upload-photo img{
    width: 24px;
    height: 24px;
  }
  .upload-photo a{
   font-size: 12px;

  }
    .upload-photo p{
    width: 100%;
  }
  .profile-datas{
       width: 100%;
    height: 300px;
  }
 
 
  .photo-profile{
  width: 25%;
    float: left;
  height: 100%;

  }
  .user-names{
  width: 75%;

  float: left;
  height: 100%
  }

  .user-names p{
    color: #15AFF2;
    margin-top: 4em;
    padding-left: 6em;
  }
  .data-title{
float: left;
width: 33%;
min-height: 300px;
  }
    .data-data{
float: left;
width: 67%;
min-height: 300px;
  }
  .tdg-title-profile{
     margin: 0.5em;
   background-color:#e8e0cb;
  padding-left: 0.2em;
   border-top-right-radius: 12px;
   border-bottom-right-radius: 12px;
  }
    .tdg-title-profile span{
    color:#5e6061;
      font-size: 11px;
    font-family: 'Open Sans', sans-serif;
  }
  .tdg-title-data{
   margin: 0.5em;
  }
  .tdg-title-data span{
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
        color: grey;
  }


  .aris-profile em{
  margin-left: 0.3em;
  color:#6db780;
}
  .aris-profile{
  height: 120px;
    width: 100%;
    overflow: auto;
    padding-bottom: 0.3em;
  background-color: #fbfbfb;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  }
   .profile-picture{
  width: 100%;
  height: 50%;
 }
   .profile-picture img{
    height: 100px;
    border-radius: 120px;
    margin-left: 27%;
   align-content: center;
    width: 100px;
   }
    .aris-profile p{
      text-align: center;
      color: #fafafa;
      margin-top: 2.5em;
      font-size: 13px;
      background-color: #564961;
      border-radius:3em;
    }
   #header-left-small p{
      font-size: 14px;
      text-align: left;
      margin-left: 0.2em;
      font-family: ubuntu;
    }

  #logout-div{
    width: 100%;
    
    float: right;
    height: 60px;
    background-color:#eee; 
    border-radius: 5px;
    z-index: 999;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.10);
    position: absolute;
   margin-top: 50px;
  }
  #rejectDivId{
   width: 95%;

  height: 350px;
}
  #deleteRoomId{
 width: 90%;
  min-height: 330px  
}
  #deleteDivId{
  width: 90%;
  height: 350px;
}
#addRoomDivId{
   width: 90%;
  min-height: 400px 
}
#addLeaseDivId{
  width: 90%;
  min-height: 400px 
}
#deleteDivId h5{
  text-align: center;
  color: red;
  margin-left: 4em;
  font-size: 12px;
}
  .tdg-image-house{
  height: 330px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.tdg-image-house img{
  width: 100%;

  margin-right: auto;
  height: 70%;
}
.tdg-text-house{
  height: auto;
  width: 98%;

  margin-left: auto;
  margin-right: auto; 
}
.tdg-text-house h4{
  font-size: 17px;
}
.tdg-det{
  width: auto;
  color: grey;
  font-family: ubuntu;
  margin-top: 0.7em;
  height: auto;
}
.tdg-det b{
  font-style: italic;
margin-right: 0.5em;
margin-left: 0.5em;
}
.tdg-det span{
margin-right: 0.3em;
margin-left: 0.2em;
font-family: sans-serif;
}
.photo-changer{
  float: right;
  padding: 0.5em;
  height: auto;
  width: 100%;
}
.photo-changer a{
  float: right;
}
.tdg-image-details{ 
  height: 300px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
.tdg-text-details{
    height: 100px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
  .details-container{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
height: auto;
}
.tdg-data-icons{
width: 90%;
margin-left: 1em;
margin-right: auto;
height: 220px;
margin-top: 1.5em;
background-color:#eee;
}
.tdg-data-footer{
  width: 100%;
  height: auto;
 
}
.tdg-data-icons img{
  width: 100%;
  height: 90%;
}
  #search-box{
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}
  #edit-form{
  width: 80%;
   background-color: #deebe1;
   border-radius: 12px;
  margin-left: auto;
  margin-right: auto;
}
#editor-title{
  text-align: center;
  font-size: 16px;
}
#fields{
  width: 80%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.photo-data{
  margin-right: auto;
  margin-left: auto;
  width: 250px;
  height: 300px;
}
.photo-data img{
  margin-right: auto;
  width: 100%;
  margin-left: 2em;
  height: 100%;
}
#camera_data{
  margin-right: auto;
  margin-left: auto;
  width: 80%;
  height: 300px;
}
.photo-holder{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: #eee;
  border:10px solid #ddd;
  margin: 0 auto;
}
#btn-take-photo{
 display: block;
 margin: 10px 0;
 cursor: pointer;
 padding: 10px 20px;
 background-color: cornflowerblue;
 color: #fafafa;
 text-align: center;
 text-decoration: none; 
}
.all_flow{
  width: 100%;
  height: 120px;
}
#take-btn{
  float: right;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
  width: 100%;
  cursor: pointer;
  background-color: #e295cb;
}
#take-btn:hover{
  background-color:#104d20;
  color: #fafafa;
}
#cameraId{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  height: 400px;
  margin-top: 40px;
}
.dv-wrapper{
  min-height: 400px;
  overflow: auto;
  width: 100%;
  background-color: #fafafa;
}
#right-reg{
width: 92%;
margin-left: 1.3em;
border-radius: 12px;
padding-bottom: 2em;
background-color:#fbfbfb;
height:auto;
}
#left-reg{
width: 100%;
padding: 1em;
border-radius: 12px;
background-color: #fbfbfb;
height: auto;
}
#data-container-reg{
   width: 100%;

height: 800px;
  background-color: #fafafa;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
border-radius: 20px;
  margin-top: 50px; 
}
#data-container{
   width: 100%;
min-height: 400px;
  background-color: #fafafa;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
border-radius: 20px;
  margin-top: 50px; 
}
#message p{
color:#b0d7ba;
font-weight: bold;
text-align: center;
font-size: 14px;
}
#message span{
color: #b0d7ba;
font-weight: bold;
margin-left: 1em;
font-size: 13px;
}
  .photo-data{
  margin-right: auto;
  margin-left: auto;
  width: 250px;
  height: 300px;
}
.photo-data img{
  margin-right: auto;

  width: 100%;
  margin-left: auto;
  height: 100%;
}
#camera_data{
  margin-right: auto;
  margin-left: auto;
  width: 50%;
  height: 300px;
}
.photo-holder{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: #eee;
  border:10px solid #ddd;
  /*margin: 0 auto;*/
}
    .panel-contents h2{
    font-size: 14px;
    text-align: center;
    color: green;
    text-transform: uppercase;
  }
  .staff-regforms{
    margin-top: 2em;
  }

  .data-contents-main{
   float: right;
   width: 50%;

  }
    #divider{
    height: 400px;
    float: left;
    display: none;
    width: 2px;
    background-color: #fafafa;
  }
  .data-titles-main{
    float: left;

    width: 50%;
  }
    .aris-titles{
   color: #000;
   padding: 0.4em;
   font-size: 12px;
  }
  .aris-content{
    font-size: 12px;
  color:  #849094;
   padding: 0.4em;
  }
    .panel-contents fieldset{
    width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
      margin-top: 2em;
  }
  #staff-regform{
   width: 92%;
   margin-right: auto;
   margin-left: auto;
  }
    .panel-contents{
   width: 100%;
   float: none;
   margin-top: 1.5em;
overflow: auto;
  height: 100vh;
 /*  background-color: #fafafa;*/
 background-color: #fbfbfb;
  }
    .aris-profile{
    min-height: 45px;
    width: 100%;
    overflow: auto;
    padding-bottom: 0.3em;
  
  }
  .aris-profile p{
      text-align: center;
      color: #fafafa;
      font-size: 13px;
      background-color: #232e33;
      border-radius:3em;
    }
      .aris-profile a{
        float: right;
        margin-right: 1.5em;

      }
  .panel-menu-left-mob{
 width: 100%;
   float: left;
   height: 100vh;
   overflow: auto;
   border-right:2px solid #eeeeee;
/*  box-shadow: 0 0 15px -4px rgba(31, 73, 125, 0.8), 0 0 0 -4px rgba(31, 73, 125, 0.8);*/
   box-shadow: 0 1.4px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19);
   background-color: #fbfbfb;
  }
   .panel-menu-left-mob img{
    margin-right: 0.5em;
   }
  .panel-menu-left-mob li{
    padding-left: 2em;
  
    padding-top: 0.7em;
    padding-bottom: 0.7em;
  }
    .panel-menu-left-mob li:hover{
      background-color:#e8e0cb;
      overflow: auto;
      width: auto;

    }
  #side-menu{
  display: block;
  margin-top: 6em;
} 
.side-navs li a{
  color: #000;
  font-family: sans-serif;
  font-size: 12px;
}

.side-navs{
  display: block; 
  margin-top: 50px;
  min-height: 500px;
  margin-left: 1.4em;
  padding-top: 1em;
  transition: 0.6s;
      box-shadow: 0 1.4px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19);
   background-color: #fbfbfb;
  width: 0;
  padding-bottom: 4em;
  overflow-x: hidden;
  position: absolute;
  z-index: 9999;
  top: 0;
  opacity: 0.9;
  left: 0;
} 
   
  .panel-menu-left{
    display: none;
  }
  .navbar{
  margin-top: 1px;
  display: block;
  width: 100%;
  background: linear-gradient(to right,#34c57e,#fbfbfb);
}
  #panel-main-div{
   width: 100%;
   min-height: 400px;
   overflow: auto;
     background-color: #ecf0f5;

  }
  #btn_unblocks{
border-radius: 5px;
width:98%;
color: #1c95bf;
font-size: 13px;
}
#btn_view_activateId{
border-radius: 5px;
width:98%;
color: #1c95bf;
font-size: 13px;

}
#btn_view_leaseId{
border-radius: 5px;
width:98%;
color: #1c95bf;
font-size: 13px;

}
#btn_blocks{
width:98%;

color: #1c95bf;
font-size: 13px;
border-radius: 5px;
}
.tdg-wrapper{
  height: 70px;

}
#approveDivId{
  width: 90%;
  min-height: 400px  
}
.update-div{
  width: 90%;
  margin-top: 2em;
  height: 200px;
  background-color: #fafafa;
  margin-right: auto;
  margin-left:auto;
}
 .title-panel{
width: 50%;
height: auto;
float: left;
  }
   .title-panel p{
    font-size: 12px;
    color: #34c57e;
    font-family: ubuntu;
    text-align: center;
  }
  .inner-panel-control{
width: 50%;
height: auto;
  }
    #logout-div li{
    margin-left: 0.3em;

    margin-top: 1em;
    list-style-type: none;
  }
   .inner-panel-control p{
    float: right;
    border-radius: 5px;
    margin-right: 0.3em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 0.34em;
  }
  .upload-photo{
    width: 100%;

    min-height: 20px;
   
  }
 .side-navs li a:hover{
 color: #34c57e;
}
  } 
    
  @media only screen and (max-width : 321px) {
    #header-left-small{
float: left;
width: 50%;
height: 50px;
  }
  .report-icon img{
  width: 95%;
  align-content: center;
  margin-left: auto;
  margin-left: 5%;
  margin-right: auto;
  height:200px;
}
.report-icon{
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
.report-txt{
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
  #accessory-search{
  margin-bottom: 2em;
  width: 100%;
  margin-top: 0.5em;
  background-color: #eeeeee;
}
  .crs-data-fetch{
 width: 100%;
  background-color:#fafafa;
  height: auto;
  overflow: auto;
}
  .btn-close{
    font-size: 20px;
    color: red;
    display: block;
    font-weight: bold;
  }
  .navbar-inner{
    margin-left: 1em;
   margin-top: 1px;
  display: block;
  width: 100%;
}
.report-chat{
 width: 100%;
  height: 500px;

  overflow: auto; 
}
  #crs-reporter-categories{
  display: block; 
  margin-top: 160px;
  min-height: 500px;
 
  padding-top: 1em;
  transition: 0.6s;
  width: 0;
   background-color:rgba(0, 0, 0, 0.9);
  padding-bottom: 4em;
  overflow-x: hidden;
  position: absolute;
  z-index: 9999;
  top: 0;
  opacity: 0.9;
  left: 0;
} 
#rpt-view-mob{
display: block; 
 overflow: auto;
   background-color:#ebf8a4;
 margin-top: 250px;
  padding-top: 1em;
  padding-left: 0.2em;
  transition: 0.6s;
  width: 0;
  padding-bottom: 4em;
  overflow-x: hidden;
  position: absolute;
  z-index: 9999;
  top: 0;
  opacity: 0.9;
  left: 0;
}
  .btn-close-dialog{
  color: #fafafa;
width: 30%;
float: right;
margin-right: 4em;
margin-bottom: 2em;
color: red;
  border-radius: 7px;
 }
  /*reporter*/
.crs-submit-btn{
    margin-top: 0.5em;
    width: auto;
    padding-right: 1.3em;
    margin-right: 23%;
    padding-left: 1.3em;
    font-size: 14px;
    color:#3b5997;
    margin-bottom: 1em;
    background-color: #e8e0cb;
    border-radius: 5px;
  float: right;
}
.page-title{
width: 100%;
height: auto;
padding-left: 0.3em;
}
.go-back{
padding-left: 0.3em;
width: 100%;
height: auto;
}
.crs-goback{
  width: 100%;
  height: auto;
overflow: auto;
   background-color: #00AF80;
}
.page-title h3{
  color: #fafafa;
  padding-top: 0.5em;
  font-size: 13px;
}
#crs-reporter-categories li a{
  color: #00AF80;
  font-size: 13px;
  font-family: ubuntu;
} 
.crs-filter-form{
  width: 98%;
  margin-right: auto;
  margin-left: auto;
}
.crs-categ-decr span{
  font-size: 11px;
  padding-right: 1em;
  padding-left: 1em;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}
.crs-reporter-engine{
width: 100%;
min-height: 400px;
overflow: auto;
  background: linear-gradient(to right, #eeeeee,#fafafa,#fafafa,#fbfbfb ,#eeeeee);
}
.crs-reporter-content{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  margin-top: 2em;
  padding-bottom: 2em;
}
/*reporter end*/
   #header-right-big{
float: right;
width: 50%;
background-color:#fbfbfb; 

height: 50px;
  }
    .content-div-timetable{
    width: 100%;
    float: left;
    min-height: 100vh;
    overflow: auto;
    background-color: #fafafa;
  }
    .timet-div{
    width:100%;
    height: 430px;
    margin-left: auto;
    
    overflow-y: auto;
    margin-right: auto;
  }
    .wrap-left{
   width: 100%;
   overflow: auto;
height: auto;
  }
  .wrap-left-reporter{
    width: 100%;
    margin-left: 0.1em;
   overflow: auto;
height: auto; 
  }
   .id-tdg-right{
   width: 70%;
   height: 100%;
   float: left;
  }
    .id-tdg-left{
  width: 20%;
  border-right: 2px solid #ccc;
   height: 100%;
   float: left;
  }
    .content-timet{
    width: 100%;
    height: auto;
  overflow: auto;
    border-bottom: 2px solid #e5e7e9;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto; 
  }
  #formId-pass{
    width: 90%;
    padding: 1.5em;
    height: 300px;
    margin-right: auto;
    margin-left: auto;
  }
  .profile-details{
    width: 100%;
    min-height: 600px;
    margin-top: 1.5em;
    overflow: auto;
       border-left: 12px solid #34c57e;
    background-color: #fafafa;
    margin-right: auto;
    margin-left: auto;
  }
  .tdg-title-data a{
    margin-right: 0.3em;
    font-size: 11px;
  }
  .photo-names{
   width: 100%;
     border-bottom: 2px solid #e5e7e9;
   margin-right: auto;
   margin-left: auto;
   min-height: 180px;
   padding-bottom: 1em;
  }
   .upload-photo{
    width: 100%;
    height: 40px;
  }
   .photo-prf img{
        height: 90px;
    border-radius: 120px;
    margin-left: 18%;
    margin-top: 1.2em;
   align-content: center;
    width:90px;
  }
  #change_photo{
    width: 80%;
    height: 290px;
 
  }
  #profile-dialog{
     width: 250px;
margin-left: auto;
margin-right: auto;
  height: auto;
  }
  #btn_default{
    border-radius: 5px;
    padding: 0.3em;
    font-size: 18px;
  }
    #crsviewpolice{
     width: 400px;
  min-height: 340px;

  border-radius: 8px;
  padding-bottom: 1.2em; 
 }
 .crs-form-field-wrap{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.3em;
  height: 40px;
}
.fd-label{
width:18%;
float: left;
padding-top: 0.3em;
height:100%;
}
.fd-data{
width:82%;
padding-right: 4em;
float: right;
height:100%; 
}
  .modal-header h5{
    font-size: 16px;
    margin-left: 30%;
    color: #34c57e;
    text-align: center;
    font-family:ubuntu;
  }
  .upload-photo img{
    width: 24px;
    height: 24px;
  }
  .upload-photo a{
   font-size: 12px;

  }
    .upload-photo p{
    width: 100%;
  }
  .profile-datas{
       width: 100%;
    height: 300px;
  }
 
 
  .photo-profile{
  width: 25%;
    float: left;
  height: 100%;

  }
  .user-names{
  width: 75%;

  float: left;
  height: 100%
  }

  .user-names p{
    color: #15AFF2;
    margin-top: 4em;
    padding-left: 6em;
  }
  .data-title{
float: left;
width: 33%;
min-height: 300px;
  }
    .data-data{
float: left;
width: 67%;
min-height: 300px;
  }
  .tdg-title-profile{
     margin: 0.5em;
   background-color:#e8e0cb;
  padding-left: 0.2em;
   border-top-right-radius: 12px;
   border-bottom-right-radius: 12px;
  }
    .tdg-title-profile span{
    color:#5e6061;
      font-size: 11px;
    font-family: 'Open Sans', sans-serif;
  }
  .tdg-title-data{
   margin: 0.5em;
  }
  .tdg-title-data span{
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
        color: grey;
  }


  .aris-profile em{
  margin-left: 0.3em;
  color:#6db780;
}
  .aris-profile{
  height: 120px;
    width: 100%;
    overflow: auto;
    padding-bottom: 0.3em;
  background-color: #fbfbfb;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  }
   .profile-picture{
  width: 100%;
  height: 50%;
 }
   .profile-picture img{
    height: 100px;
    border-radius: 120px;
    margin-left: 27%;
   align-content: center;
    width: 100px;
   }
    .aris-profile p{
      text-align: center;
      color: #fafafa;
      margin-top: 2.5em;
      font-size: 13px;
      background-color: #564961;
      border-radius:3em;
    }
   #header-left-small p{
      font-size: 14px;
      text-align: left;
      margin-left: 0.2em;
      font-family: ubuntu;
    }

  #logout-div{
    width: 100%;
    
    float: right;
    height: 60px;
    background-color:#eee; 
    border-radius: 5px;
    z-index: 999;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.10);
    position: absolute;
   margin-top: 50px;
  }
  #rejectDivId{
   width: 95%;

  height: 350px;
}
  #deleteRoomId{
 width: 90%;
  min-height: 330px  
}
  #deleteDivId{
  width: 90%;
  height: 350px;
}
#addRoomDivId{
   width: 90%;
  min-height: 400px 
}
#addLeaseDivId{
  width: 90%;
  min-height: 400px 
}
#deleteDivId h5{
  text-align: center;
  color: red;
  margin-left: 4em;
  font-size: 12px;
}
  .tdg-image-house{
  height: 330px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.tdg-image-house img{
  width: 100%;

  margin-right: auto;
  height: 70%;
}
.tdg-text-house{
  height: auto;
  width: 98%;

  margin-left: auto;
  margin-right: auto; 
}
.tdg-text-house h4{
  font-size: 17px;
}
.tdg-det{
  width: auto;
  color: grey;
  font-family: ubuntu;
  margin-top: 0.7em;
  height: auto;
}
.tdg-det b{
  font-style: italic;
margin-right: 0.5em;
margin-left: 0.5em;
}
.tdg-det span{
margin-right: 0.3em;
margin-left: 0.2em;
font-family: sans-serif;
}
.photo-changer{
  float: right;
  padding: 0.5em;
  height: auto;
  width: 100%;
}
.photo-changer a{
  float: right;
}
.tdg-image-details{ 
  height: 300px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
.tdg-text-details{
    height: 100px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
  .details-container{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
height: auto;
}
.tdg-data-icons{
width: 90%;
margin-left: 1em;
margin-right: auto;
height: 220px;
margin-top: 1.5em;
background-color:#eee;
}
.tdg-data-footer{
  width: 100%;
  height: auto;
 
}
.tdg-data-icons img{
  width: 100%;
  height: 90%;
}
  #search-box{
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}
  #edit-form{
  width: 80%;
   background-color: #deebe1;
   border-radius: 12px;
  margin-left: auto;
  margin-right: auto;
}
#editor-title{
  text-align: center;
  font-size: 16px;
}
#fields{
  width: 80%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.photo-data{
  margin-right: auto;
  margin-left: auto;
  width: 250px;
  height: 300px;
}
.photo-data img{
  margin-right: auto;
  width: 100%;
  margin-left: 2em;
  height: 100%;
}
#camera_data{
  margin-right: auto;
  margin-left: auto;
  width: 80%;
  height: 300px;
}
.photo-holder{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: #eee;
  border:10px solid #ddd;
  margin: 0 auto;
}
#btn-take-photo{
 display: block;
 margin: 10px 0;
 cursor: pointer;
 padding: 10px 20px;
 background-color: cornflowerblue;
 color: #fafafa;
 text-align: center;
 text-decoration: none; 
}
.all_flow{
  width: 100%;
  height: 120px;
}
#take-btn{
  float: right;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
  width: 100%;
  cursor: pointer;
  background-color: #e295cb;
}
#take-btn:hover{
  background-color:#104d20;
  color: #fafafa;
}
#cameraId{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  height: 400px;
  margin-top: 40px;
}
.dv-wrapper{
  min-height: 400px;
  overflow: auto;
  width: 100%;
  background-color: #fafafa;
}
#right-reg{
width: 92%;
margin-left: 1.3em;
border-radius: 12px;
padding-bottom: 2em;
background-color:#fbfbfb;
height:auto;
}
#left-reg{
width: 100%;
padding: 1em;
border-radius: 12px;
background-color: #fbfbfb;
height: auto;
}
#data-container-reg{
   width: 100%;

height: 800px;
  background-color: #fafafa;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
border-radius: 20px;
  margin-top: 50px; 
}
#data-container{
   width: 100%;
min-height: 400px;
  background-color: #fafafa;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
border-radius: 20px;
  margin-top: 50px; 
}
#message p{
color:#b0d7ba;
font-weight: bold;
text-align: center;
font-size: 14px;
}
#message span{
color: #b0d7ba;
font-weight: bold;
margin-left: 1em;
font-size: 13px;
}
  .photo-data{
  margin-right: auto;
  margin-left: auto;
  width: 250px;
  height: 300px;
}
.photo-data img{
  margin-right: auto;

  width: 100%;
  margin-left: auto;
  height: 100%;
}
#camera_data{
  margin-right: auto;
  margin-left: auto;
  width: 50%;
  height: 300px;
}
.photo-holder{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: #eee;
  border:10px solid #ddd;
  /*margin: 0 auto;*/
}
    .panel-contents h2{
    font-size: 14px;
    text-align: center;
    color: green;
    text-transform: uppercase;
  }
  .staff-regforms{
    margin-top: 2em;
  }

  .data-contents-main{
   float: right;
   width: 50%;

  }
    #divider{
    height: 400px;
    float: left;
    display: none;
    width: 2px;
    background-color: #fafafa;
  }
  .data-titles-main{
    float: left;

    width: 50%;
  }
    .aris-titles{
   color: #000;
   padding: 0.4em;
   font-size: 12px;
  }
  .aris-content{
    font-size: 12px;
  color:  #849094;
   padding: 0.4em;
  }
    .panel-contents fieldset{
    width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
      margin-top: 2em;
  }
  #staff-regform{
   width: 92%;
   margin-right: auto;
   margin-left: auto;
  }
    .panel-contents{
   width: 100%;
   float: none;
   margin-top: 1.5em;
overflow: auto;
  height: 100vh;
 /*  background-color: #fafafa;*/
 background-color: #fbfbfb;
  }
    .aris-profile{
    min-height: 45px;
    width: 100%;
    overflow: auto;
    padding-bottom: 0.3em;
  
  }
  .aris-profile p{
      text-align: center;
      color: #fafafa;
      font-size: 13px;
      background-color: #232e33;
      border-radius:3em;
    }
      .aris-profile a{
        float: right;
        margin-right: 1.5em;

      }
  .panel-menu-left-mob{
 width: 100%;
   float: left;
   height: 100vh;
   overflow: auto;
   border-right:2px solid #eeeeee;
/*  box-shadow: 0 0 15px -4px rgba(31, 73, 125, 0.8), 0 0 0 -4px rgba(31, 73, 125, 0.8);*/
   box-shadow: 0 1.4px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19);
   background-color: #fbfbfb;
  }
   .panel-menu-left-mob img{
    margin-right: 0.5em;
   }
  .panel-menu-left-mob li{
    padding-left: 2em;
  
    padding-top: 0.7em;
    padding-bottom: 0.7em;
  }
    .panel-menu-left-mob li:hover{
      background-color:#e8e0cb;
      overflow: auto;
      width: auto;

    }
  #side-menu{
  display: block;
  margin-top: 6em;
} 
.side-navs li a{
  color: #000;
  font-family: sans-serif;
  font-size: 12px;
}

.side-navs{
  display: block; 
  margin-top: 50px;
  min-height: 500px;
  margin-left: 1.4em;
  padding-top: 1em;
  transition: 0.6s;
      box-shadow: 0 1.4px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19);
   background-color: #fbfbfb;
  width: 0;
  padding-bottom: 4em;
  overflow-x: hidden;
  position: absolute;
  z-index: 9999;
  top: 0;
  opacity: 0.9;
  left: 0;
} 
   
  .panel-menu-left{
    display: none;
  }
  .navbar{
  margin-top: 1px;
  display: block;
  width: 100%;
  background: linear-gradient(to right,#34c57e,#fbfbfb);
}
  #panel-main-div{
   width: 100%;
   min-height: 400px;
   overflow: auto;
     background-color: #ecf0f5;

  }
  #btn_unblocks{
border-radius: 5px;
width:98%;
color: #1c95bf;
font-size: 13px;
}
#btn_view_activateId{
border-radius: 5px;
width:98%;
color: #1c95bf;
font-size: 13px;

}
#btn_view_leaseId{
border-radius: 5px;
width:98%;
color: #1c95bf;
font-size: 13px;

}
#btn_blocks{
width:98%;

color: #1c95bf;
font-size: 13px;
border-radius: 5px;
}
.tdg-wrapper{
  height: 70px;

}
#approveDivId{
  width: 90%;
  min-height: 400px  
}
.update-div{
  width: 90%;
  margin-top: 2em;
  height: 200px;
  background-color: #fafafa;
  margin-right: auto;
  margin-left:auto;
}
 .title-panel{
width: 50%;
height: auto;
float: left;
  }
   .title-panel p{
    font-size: 12px;
    color: #34c57e;
    font-family: ubuntu;
    text-align: center;
  }
  .inner-panel-control{
width: 50%;
height: auto;
  }
    #logout-div li{
    margin-left: 0.3em;

    margin-top: 1em;
    list-style-type: none;
  }
   .inner-panel-control p{
    float: right;
    border-radius: 5px;
    margin-right: 0.3em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 0.34em;
  }
  .upload-photo{
    width: 100%;

    min-height: 20px;
   
  }
 .side-navs li a:hover{
 color: #34c57e;
}
  }