*{
    margin: 0;
    padding: 0;
}a{
    color: black;
    text-decoration: none;
}
a:hover{
    color: black;
}
header {background: white;position: relative;display: flex;align-items: center;justify-content: end;padding: 10px;height: 10vh;box-shadow: 0px 1px 9px 0px #0000001f;}

header .logo {width: 15%;}

img {max-width: 100%;}

header nav {display: block;width: -webkit-fill-available;}

header nav ul {align-items: center;display: flex;justify-content: space-between;margin: 0;}

header nav ul li {display: flex;align-items: center;justify-content: center;margin: 0px 10px;position: relative;}

header nav ul li li.profile {}

header nav ul li li.profile span.profileholder {display: flex;}

header nav ul li span.profileholder {display: flex;align-items: center;justify-content: center;margin: 5px;font-weight: 500;}

.sidenav {position: relative;width: 15%;height: 100vh;float: left;box-shadow: 0px 1px 9px 0px #0000001F;background: white; overflow-y: scroll;}

.mainSection {background: #FCFCFC;padding: 15px;width: 85%;overflow: hidden; overflow-y: scroll;height:90vh; }

.sidenav ul {display: block;list-style: none;padding: 10px 0px;margin: 0;}

.sidenav ul li {display: flex;align-items: center;margin: 10px 0px;padding: 10px;width: 90%;border-bottom-left-radius: 0;border-top-left-radius: 0;border-bottom-right-radius: 13px;border-top-right-radius: 13px;transition: 0.5s;}

.sidenav ul li a {color: #AAAAAA;opacity: 1;text-decoration: none;display: flex;align-items: center;justify-content: start;}

.sidenav ul li a span {margin-left: 10px;font-weight: 500;}

header nav ul li span.profileholder .icon {margin: 5px;}


.dashboard .cards {display: flex;grid-column-gap: 20px;}

.dashboard .cards .card {padding: 15px;border-radius: 7px;box-shadow: 0px 0px 14px 0px #00000012;border: none;}


.dashboard .cards .card .hd {display: flex;}

.dashboard .cards .card .hd .icon {float: left;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;padding: 10px;margin: 0px 10px;background: #ebf4fa;border-radius: 5px;}

.dashboard .cards .card .hd .name {width: auto;display: flex;align-items: center;justify-content: start;font-weight: 500;padding: 0;color: #000000;font-size: 20px;}

.dashboard .cards .card .nv {width: 100%;display: flex;align-items: center;margin-top: 20px;justify-content: space-between;}

.dashboard .cards .card .nv .dis {width: 80%;color: #666666;line-height: 18px;}

.dashboard .cards .card .nv .number {width: 10%;display: flex;align-items: center;justify-content: center;font-size: 30px;font-weight: 500;color: #0079C2;}

.sidenav .logo {padding: 20px;display: flex;align-items: center;justify-content: center;}

/*header::before {width: 30px;height: 100%;background: white;content: '';left: 0;top: 0;position: absolute;}*/

/*.sidenav::before {width: 10px;*/
/*    height: 15vh;*/
/*    background: #ffffff;*/
/*    content: '';*/
/*    right: 0;*/
/*    top: 0;*/
/*    position: absolute;z-index: 2;}*/

    .sidenav ul li:hover a img {filter: invert(76%) sepia(30%) saturate(3461%) hue-rotate(560deg) brightness(95%) contrast(283%);}

.sidenav ul li:hover {background: #f2f8fc;transition: 0.5s;}

.sidenav ul li:hover a {color: #0079C2;}
    .sidenav ul li.active a img {filter: invert(76%) sepia(30%) saturate(3461%) hue-rotate(560deg) brightness(95%) contrast(283%);}

.sidenav ul li.active {background: #f2f8fc;transition: 0.5s;}

.sidenav ul li.active a {color: #0079C2;}
body {background: #FCFCFC;}
header nav ul li.profile {
    /* display: flex; */
}

header nav ul li.profile img.profileImage {width: 30px;height: 30px;object-fit: cover;border-radius: 50%;border: 2px solid #0079C2;}
.titleanddetail {padding: 10px 0px;font-size: 18px;font-weight: 500;display: flex;align-items: center;justify-content: space-between;padding-left: 20px;padding-top: 50px;}

.titleanddetail a.detail {font-size: 16px;font-weight: 400;}

.addpropertyForm {background: white;box-shadow: 0px 0px 14px 0px #00000014;}

.addpropertyForm .formTitle {padding: 20px;border-bottom: 1px solid #f3f3f3;color: #666666;font-size: 18px;}

.addpropertyForm form {padding: 20px;}

.addpropertyForm label {}
.addpropertyForm select {color: #AAAAAA;padding: 10px;}

.addpropertyForm input {padding: 10px;}
.addpropertyForm select {color: #AAAAAA;padding: 10px;}

.addpropertyForm input::placeholder {
    counter-reset: #AAAAAA;
}.addpropertyForm button.btn2 {padding: 10px 30px;background: none;color: #0079C2;border: 2.5px solid #0079C2;font-weight: 500;margin-right: 20px;border-radius: 5px;}
.addpropertyForm button.btn {padding: 10px 40px;width: -webkit-fill-available;}
.addpropertyForm .imageupload {}

li {}

.addpropertyForm .imageupload ul {list-style: none;display: flex;margin: 0;padding: 0;grid-column-gap: 30px;grid-row-gap: 30px;}

.addpropertyForm .imageupload ul li {margin: 0;position: relative;border: 1px solid #ced4da;width: 100px;height: 100px;margin: 0px;display: flex;align-items: center;justify-content: center;}

.loginpage {width: 100%;height: 100vh;display: flex;justify-content: space-between;}

.loginpage .leftsection {width: 50%;float: left;background: url("../images/loginleft.png");background-size: cover;background-repeat: no-repeat;padding: 40px;}

.loginpage .rightsection {width: 50%;float: left;
    background: url(../images/loginright.png);
    background-position: 55% 100%;background-size: cover;
    background-repeat: no-repeat;display: flex;align-items: center;justify-content: center;}

.loginpage .rightsection .formcontainer {width: 80%;margin: auto;height: 70vh;box-shadow: 0px 4px 70px 0px #00000017;padding: 30px;background: white;}

.pagetitle {width: 100%;text-align: center;font-weight: 600;font-size: 28px;}

.loginpage .rightsection .formcontainer label {}

.loginpage .rightsection .formcontainer input {border: 1px solid #EBEBEB;border-radius: 6px;}

.loginpage .rightsection .formcontainer  button[type=submit] {width: 90%;margin: 20px;}

.loginpage .rightsection .formcontainer label[for=checkbox] {color: #989898;}

.loginpage .rightsection .formcontainer input[type=checkbox] {border: 2px solid #EBEBEB;border-radius: 3px;}

.forgetpass {width: 88%;margin: auto;margin-top: -15px;}

.forgetpass a {color: #989898;text-decoration: none;}

.needaccount {margin-top: 30px;color: #989898;}

.needaccount a {color: black;font-weight: 600;text-decoration: none}
.loginpage .logo {width: 280px;margin-bottom: 15%;}

.loginpage .page-sub-heading {font-weight: 800;color: white;font-size: 27px;width: 60%;}
.loginpage .rightsection .formcontainer .subtitle {color: #989898;text-align: center;font-size: 17px;width: 65%;margin: auto;}
.loginpage .rightsection .formcontainer form {padding-top: 30px;}
.titleanddetail .pageslug {font-size: 16px;display: flex;align-items: center;justify-content: center;list-style: none;grid-column-gap: 20px;}

.titleanddetail .pageslug a {text-decoration: none;color: black;}

.titleanddetail .pageslug li {position: relative;}

.titleanddetail .pageslug li::after {content: '\f054';margin-left: 10px;font-weight: 800;font-family: 'Font Awesome 6 Free';font-size: 12px;}
.titleanddetail .pageslug li:last-child::after {display: none;}
.titleanddetail .pageslug li:last-child a {color: #989898;}


.titleanddis.contactDetailsbyposition li {display: grid !important;width: 14% !important;float: left !important;}

.titleanddis.contactDetailsbyposition li .detail {font-weight: 400 !important;}

.titleanddis.contactDetailsbyposition ul {width: 100%;overflow: hidden;}

table.table.teantsTableinpropertydetails {
}

table.table.teantsTableinpropertydetails th {font-weight: 400;border-bottom: none;box-shadow: none;border-bottom-width: 0;}

table.table.teantsTableinpropertydetails thead {border: 2px solid #e5e5e5;}

table.table.teantsTableinpropertydetails thead tr {border: none;}

table.table.teantsTableinpropertydetails tbody {border-top: none;}

table.table.teantsTableinpropertydetails tbody td {border:none;}

table.table.teantsTableinpropertydetails tbody th img {width: 30px;height: 30px;border-radius: 50%;margin-right: 10px;}
table.table.teantsTableinpropertydetails tbody td:last-child  {text-align: start;color: black;}
table.table.teantsTableinpropertydetails thead tr th:last-child  {text-align: start;font-weight: 700;}
table.table.teantsTableinpropertydetails.propertydetails2 tbody td:nth-child(2) {text-align: start;}
table.table.teantsTableinpropertydetails.propertydetails2 tbody th {width: 40%;}
table.table.teantsTableinpropertydetails.propertydetails2 thead tr th:nth-child(2) {text-align: start;}
.tenantsTable{
    padding: 20px;
padding-top: 10px;}
button.status-btn {border-radius: 15px;padding: 5px 15px;font-size: 12px;border: none;width: 40%;}
button.status-btn.in-progress {background: #FFF2C2;color: #FF9D0A;}

button.status-btn.in-open {background: #D9FFC2;color: #33C70E;}

button.status-btn.in-close {background: #EEEEEE;color: #777777;}

header nav ul li ul {background: white;top: 50%;position: absolute;width: -webkit-fill-available;margin: 0;padding: 0;display: grid;padding: 20px;border-radius: 10px;z-index: 22;box-shadow: 0px 2px 5px 0px #0000000D;transform: rotateX(90deg);}

header nav ul li ul li a {}

header nav ul li ul li {width: max-content;margin: 10px;}

header nav ul li ul li a {color: black;text-decoration: none;}

header nav ul li:hover ul {transform: rotateX(0deg);transition: 0.5s;top: 100%;}


















.col-12.imageupload.pay {}

.col-12.imageupload.pay li.active {}

.col-12.imageupload.pay li {
    padding: 0 !important;
    width: 100px !important;
    height: 100px !important;
    position: relative;
    margin: 0 !important;
}

.col-12.imageupload.pay li input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 222222222;
    display: block;
}
.addpropertyForm .imageupload ul li ul.usermenu {
    position: absolute;
    top: 0;
    left: 0;
    width: -webkit-fill-available;
    display: none;
    height: -webkit-fill-available;
    background: #00000061;
    justify-content: center;
    align-items: center;
}
.addpropertyForm .imageupload ul li ul.usermenu.active {
 
    display: grid;
  
}

.addpropertyForm .imageupload ul li ul.usermenu li {
    height: 45px !important;
    background: white;
    color: black;
    width: 100% !important;
    padding: 30px;
    border-radius: 5px;
    font-weight: bold;
}


table.table.teantsTableinpropertydetails tbody tr {
    border: 2px solid #e5e5e5;
    cursor: pointer;
}

header nav ul li span.profileholder .username {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 600px) {

    .loginpage .leftsection {
        display: none;
    }
    
    .loginpage .rightsection {
        width: 100%;
    }
    .main-container{
        width: 100% !important;
    }
    .containerofcamera.active video#webCam {


    width: 350px !important;
    height: 350px !important;
    margin: auto;

    }

    .addpropertyForm .imageupload ul {
        display: grid;
    }
    
    .dashboard {
        padding: 10px !important;
    }
    
    .addpropertyForm .imageupload ul li {
        width: 90% !important;
        height: 270px !important;
        overflow: hidden;
        position: relative;
    }
    
    .containerofcamera.active video#webCam {
        width: 100%;
    }



    table {
        border: 0;
      }
      thead {
        display: none;
      }
      tr {
        display: block;
        margin: 0 0 20px 0;
      }
      td {
        display: block;
        /* text-align: right; */
      }
      td:before {
        content: attr(aria-label);
        float: left;
        font-weight: bold;
      }
      td:last-child {
        border-bottom: 0;
      }
      tr:nth-child(odd) {
        background-color: #F2F2F2;
      }
      tr:nth-child(even) {
        background-color: #FFFFFF;
        border-width: 3px 0 3px 0;
        border-style: solid;
        border-color: #E5E5E5;
      }

      table.table.teantsTableinpropertydetails.propertydetails2 tbody td:nth-child(2) {
        /* text-align: end; */
    }

    table.table.teantsTableinpropertydetails tbody td:last-child {
        text-align: end;
        color: black;
    }

    button.status-btn.in-close {
        width: max-content;
        margin-bottom: 20px;
        background: #007aff;
    }
    
    button.status-btn.in-close a {
        color: white;
        text-decoration: none;
    }


    /*.sidenav ul li a span {*/
    /*    display: none;*/
    /*}*/
    
    .sidenav ul li {
        padding: 13px;
        margin: 17px 0px;
    }
    
    .sidenav ul li img {
        width: 100%;
    }
    
    .sidenav ul li a {
        width: 100%;
    }
    
    .sidenav ul {
        margin-top: 40px;
    }

    .col-12.imageupload.pay ul {
        grid-template-columns: repeat(2, 130px);
    }










  }