/* Fonts */

@font-face {
  font-family: Poppins-Regular;
  src: url(/assets/fonts/Poppins-Regular.ttf);
}

@font-face {
  font-family: Poppins-Medium;
  src: url(/assets/fonts/Poppins-Medium.ttf);
}

@font-face {
  font-family: Poppins-SemiBold;
  src: url(/assets/fonts/Poppins-SemiBold.ttf);
}

/* Variable Values */

:root{
  --nav-width: 50px;
  --nav-full-width: 210px;
  --navbar-color: black;
  --second-color: #D5553D;
  --third-color:#eeeeee;
  --white-color: #F7F6FB;
  --body-font: 'Poppins-Regular', sans-serif;
  --normal-font-size: 25px;
  --z-fixed: 100;

  --tile-background-colour: white;
  --tile-text-color: inherit;
  --tile-border-radius: 0.5rem;
  --tile-border: 0px solid #d9dee3;

  --link-color: black;
}

.popbold{
  font-family: Poppins-SemiBold;
}
.popmed{
  font-family: Poppins-Medium;
}
.popreg{
  font-family: Poppins-Regular;
}


body{
	background-color: #eee;
  font-family: Poppins-Regular;
  color: var(--navbar-color);
  font-size: 18px;
}

.container{
  max-height: max-content !important;
  min-height: calc(100vh - 68px);;
  max-width: calc(100vw - 40px);
  position: absolute;
  padding: 2.5rem !important;
  margin:20px;
  margin-top: 65px;
  border-radius: 10px;
  overflow-x: scroll;
}

.login-container{
  background-color:white !important;
  margin:0px !important;
  max-width: 1920px !important;
  overflow-x: hidden;
  height: calc(100vh - 68px);
  width: 100vw;
}

.audit-list-container{
  background-color:#eee !important;
  padding: 0px !important;
  padding-bottom: 70px !important;
  overflow-x: unset;
}

.audit-list-container > .table-card {
  background-color:#eee !important

}

.breadcrumb {
 position:absolute;
 margin-left: 20px;
}

.nav-link {
    display: block;
    padding-top: 31px;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    color: var(--white-color);
    margin-right: 10px;
    text-transform: uppercase;
    font-weight: 200 !important;
    font-size: var(--normal-font-size);
}

.avatar-section{
  padding-bottom: 15px;
  padding-top: 16px;
  margin-right:10px;
  margin-left: auto;
  pointer-events: none;
}

.avatar-section:hover{
  color: var(--white-color) !important;
}

.avatar-links{
  pointer-events: all !important;
}

.avatar-links:hover{

  color: var(--second-color) !important;
}

.username{
  font-family: Poppins-Medium;
  font-size: 17px;

}

.rounded-circle{
  height:45px;
  width:45px
}

.avatar-container{
  display:flex;
}

.avatar-txt{
  display:grid;
  margin-right: 15px !important;
}

.avatar-subtxt{
  font-family: Poppins-Regular;
  font-size: 15px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");


}

.navbar-nav{
  width:100%;
}

.navbar-nav .active{
	border-bottom: 4px solid var(--second-color);
}

 .nav-link:hover {
  color:var(--second-color);
}

.nav-link:focus {
  color: var(--white-color);
}

.navbar-brand{
  padding-bottom: 0px;
}

.navbar > .container-fluid{
  padding-left: 0px !important;
  padding-top: 5px;
  padding-bottom: 5px;
}

.navbar .nav-container li {
  list-style: none;
}

.navbar .nav-container a {
  text-decoration: none;
  color: white;
  font-weight: 400;

}

.navbar .nav-container a:hover{
    font-weight: bolder;
}

.nav-container {
  display: block;
  position: relative;
  height: 60px;
}

.nav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  right: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  right: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: var(--white-color);
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.navbar .menu-items {
  display: flex;
  padding-top: 120px;
  background-color: black;
  height: 100vh;
  width: 100%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

.navbar .menu-items li {
  margin-bottom: 60px;
  font-size: 1.5rem;
  font-weight: 500;
  color: white !important;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked ~ .logo{
  display: none;
}


.logo {
  position: absolute;
  top: 8px;
  left: 0px;
  font-size: 1.2rem;
  color: #0e2431;
  width: 200px;
	margin-bottom: 7px !important;	
}
.navbar {
  background-color: var(--navbar-color);
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  font-family: Poppins-SemiBold;
  
}

.login-form{
  background-color: var(--third-color);

  margin: auto;
  margin-top: 10px;
  border-radius: 10px;
}

.login-form-header{
  font-family: Poppins-SemiBold;
  background-color: var(--navbar-color);
  color: var(--white-color);
  font-size: 20px;
  padding:10px;
  padding-left: 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.login-form-content{
  font-family: Poppins-Medium;
  padding: 40px;
  display: inline-grid;
  width: 100%;
}

.form-control {
  font-size: 15px;
}


input {
  margin-bottom: 20px !important;
}

.login-form  input {
  width:100% ;
}

.login-btn {
  background-color: #737373 !important;
  border-color: #737373 !important;
  margin-top: 20px;
  margin-left: auto;
  padding: 10px;
  font-size: 15px;
  border-radius: 10px;
}


input:focus {
  border-color:var(--second-color) !important;
}

label {
  color: black;
}

.btn-primary{
  box-shadow: none !important;
}

.card{
  background-color: #f2f2f2;
}


.top-info-col{
  padding-right:0px !important;
  margin-bottom: 50px !important;
}

.top-info-card-header{
  padding-left: 90px;
  padding-bottom: 20px;
  height: 200px;
  padding-top: 60px;
  font-size: 150px !important;
  display: flex;
}

.top-info-card-header-small{
  font-size: 30px !important;
  margin-right:20px;
}

.top-info-card-sub-head{
  font-size: 30px;
  font-family:Poppins-SemiBold;
}

.top-info-card-sub-value{
  font-size: 150px !important;
  padding-top: 15px;
}

.blcktxt{
  color: black;
}

.orngtxt{
  color: var(--second-color) ;
}

.orngbtn, .orngbtn:hover, .orngbtn:active, .orngbtn:focus{
  background-color: var(--second-color);
  border-color: var(--second-color);
}

.greenbtn, .greenbtn:hover, .greenbtn:active, .greenbtn:focus{
  background-color: #19b119;
  border-color: #19b119;
}

.graybtn, .graybtn:hover, .graybtn:active, .graybtn:focus{
  background-color: #737373 !important;
  border-color: #737373 !important;
}


.dropdown-item{
  color: var(--navbar-color);
}

.top-info-card > .card-body{
  padding-bottom: 0px !important;
  font-size: 30px;
  margin-bottom: 10px;
}

/* .card-footer{
  background-color: black;
  color: white;
  text-align: center;
  padding: 1rem 1rem;
  font-size: 45px;
  font-family: Poppins-SemiBold;
  cursor: pointer;
} */

.table th{
  font-size: 20px !important;
}

.table-header{
  font-family: Poppins-SemiBold;
}

.table-sub-header{
  font-family: Poppins-Medium;
}

.table-card{
  background-color: white;
  box-shadow: none;
}

.table:not(.table-dark) th {
  color: black;
}

.table {
  color: black;
}

.check-action{
  font-size: 55px;
  color: #4aad50;
}

.x-action{
  font-size: 55px;
  color: #D5553D;
}

.action-col{
  padding: 0px !important;
  padding-left: 1.25rem !important;
  display: flex;
}

.action-dropdown{
  margin-left: -40px !important;
  margin-top: -42px !important;
}

.scrollable-row{
  display: flex;
  overflow-x: scroll;
  white-space: nowrap;
}

h2{
  font-size: 30px !important;
}

h3{
  font-size: 28px !important;
}

h4{
  font-size: 20px !important;
}

h5{
  font-size: 20px !important;
}

.table th {
  font-size: 22px;
  text-transform: capitalize  !important;
}

#buildingSelect{
  font-size: 20px;
  margin-left: 5px;
  margin-right: 20px;

}

.building-dropdown{
  font-size: 20px;
  margin-top: 0px  !important;
  margin-left: -0px !important;
}

.building-dropdown > a{
  margin: 15px;
}

.dropdown-arrow{
  margin-top:4px;
}

.text-muted {
  color: black !important;
}

.audit-table .table th{
  font-size: 20px !important;
  width: fit-content !important;
  text-align: left;
}

.audit-table .table tr{

  text-align: left;
}


.audit-btn{
  font-size: 20px !important;
  background-color: var(--second-color);
  border-color: var(--second-color) !important;
}

.audit-btn:focus, .audit-btn:hover,  .audit-btn:active{

  background-color: var(--second-color) !important;
  border-color: var(--second-color) !important;
}

.header-title{
  color:white;
  font-size: 25px;
}

.fcol{
  text-align: left !important;
}

.eye-icon {

    display: table;
    margin-right: -5px;
}

.custom-icon{
  height: 35px;
  width: 35px;
  border-radius: 5px;
  margin: 3px

}

.filter-text{
  display:flex;
  font-size:20px;
  
}

.filter-key{
  font-size: 20px !important;
  margin-top: -1px;
}

.filter-dropdown{
  margin-left: 50px !important;
}

#filerSelect{
  margin-left: 10px;
}

.show-by-text{
  display:flex;
  font-size:20px;
  
}

.show-by-key{
  font-size: 20px !important;
  margin-top: -1px;
}

.show-by-dropdown{
  margin-left: 20px !important;
}

#showBySelect{
  margin-left: 10px;
  font-size: 20px;
}

.grey{
  background-color: #eeeeee00 !important;
}

.scan-card{

  background-color: #eee !important;
}

.back-btn, .back-btn:focus, .back-btn:hover{
  font-size: 20px !important;
  background-color: var(--second-color);
  border-color: var(--second-color)
}

.scan-btn, .scan-btn:focus, .scan-btn:hover{
  font-size: 20px !important;
  background-color: var(--navbar-color);
  border-color: var(--navbar-color)
}

.parcel-table{
  overflow-x: visible;
  overflow-y: visible;
}

.parcel-image-container{
  display:none;
  position:fixed;
  height:100%;
  width:100%;
  background-color: rgba(100, 100, 100, 0.9);
  top:0px;
  z-index: 9;
  touch-action: none;
}

.parcel-image{
  max-width:80%;
  max-height:80%;
  margin: auto;
  
}

.parcel-scan-container{
  display:none;
  position:fixed;
  height:100%;
  width:100%;
  background-color: rgba(100, 100, 100, 0.9);
  top:0px;
  z-index: 9;
}

.parcel-scan{
  position:fixed;
  height:100%;
  width:100%;
}

.scan-finish-btn, .scan-finish-btn:focus, .scan-finish-btn:hover{
  z-index: 99;
  height: 60px;
  font-size: 20px;

  margin-bottom: 10px;
  width: 160px;
  background-color: var(--second-color);
  border-color: var(--second-color);

}

.audit-modal-title{
  margin: auto;
}

#wmDetailsModal{
  
  text-align: center;
}

.wmDetailsModalBox{
  min-width: 60% !important;
}

.wmDetailsModalRow{
    width: 80%;
    font-size: 20px;
    margin: auto;
    border-radius: 10px;
    border: 1px solid rgba(67, 89, 113, 0.8);
    text-align: left;
    /* color: rgba(67, 89, 113, 0.9); */
    
}

.wmDetailsModalIcon{
  font-size: 50px;
  text-align: center;
  margin-top: 10px;
}

.wmDetailsModalRow:hover{
  border-color: black;
}

#wmModalCenterTitle, #wmModalCenterTitle2{
  font-size: 30px !important;
}

#parcelSize{
  font-size:20px !important;
  border-color: #D5553D !important;
}

.parcelSizeOption:checked, .parcelSizeOption:active, .parcelSizeOption:focus, .parcelSizeOption:hover{
  background-color: #D5553D !important;
  color:white;

}

.img-container{
  width:100%;
}

#take-photo-btn, #retake-photo-btn, #save-photo-btn, .save-btn, .cancel-btn {
  width: 200px !important;
  font-size: 20px;
  margin: auto;
  margin-top: 10px !important;
  background-color: #D5553D !important;
  border-color: #D5553D !important;
}

#retake-photo-btn, .cancel-btn{
  background-color: #737373ee !important;
  border-color: #737373 !important;
}



table.dataTable tbody th, table.dataTable tbody td {
  padding: 5px 10px;
}

.last-audited{
  width:100%;
  margin-bottom: 10px;
}

.bg-label-success {
  background-color: #E0E2E5 !important;
  color: #364B6C !important;
}

.card-unprocessed{
  border: solid #cfcfcf 3px;
  border-radius: 10px;
  border-color: #cdcdcd;
}

.card-audited{
  border: solid #01a71d 3px;
  border-radius: 10px;
  border-color: #01a71d;
}

.card-missing{
  border: solid #D5553D 3px;
  border-radius: 10px;
  border-color: #D5553D;
}

.card-deleted{
  display:none;
}

.card-audit > .card-header{
  padding: 10px;
  font-size: 22px;
  font-family: Poppins-Medium;
}

.card-audit > .card-body, .audit-card-body{
  padding: 10px;
  border-bottom: solid !important;
  border-top: solid !important;
  border-color:inherit !important;
  padding-bottom: 10px !important;
  border-bottom-width: thin !important;
  border-top-width: thin !important;
  
}

.audit-card-collapse{
  border-color:inherit !important;
}


.audit-card-img{
  width: 100%;
  height: 100%;
}

.card-audit > .card-footer{
  padding: 10px;
  padding-bottom: 5px;
  
}

.collapse-btn{
  color: var(--second-color)
}

.audit-card-arrow, .audit-card-arrow:hover, .audit-card-arrow:active, .audit-card-arrow:focus{
  font-size: larger;
  font-weight:900;
  color: var(--second-color)
}

.action-btn{
  min-width:150px;
  font-size: 16px;
}

.found-btn{
  font-size: 20px;
}

.img-save-modal-title, .retake-im-modal-title, .parcel-size-modal-title, .missing-details-modal-title, .issue-modal-title, .assigned-incorrectly-modal-title, .missing-parcel-modal-title, .remove-parcel-modal-title, .assign-unallocated-modal-title, .close-parcel-modal-title, .add-parcel-modal-title, .issue-modal-new-title, .collected-or-not-collected-modal-title{
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 100px;
  font-size: 30px;
}

.action-modal-title{
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 100px;
  font-size: 30px;
}

.img-save-modal-title .retake-im-modal-title{
  margin-bottom: 30px !important; 
}

.text20{
  font-size: 20px;
}

.select-option{
  display:grid;
}

.select-sub-heading{
  display:grid;
  font-size: 15px;
  color: #D5553D;
}

.bottom-nav{
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  width: 100vw;
  background-color: black;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-align: center;
  color:white;
}

.parcel-badge{
    position: absolute;
    right: 30px;
    top: 5px;
    background-color: #E0E2E5 !important;
    color: #364B6C !important;
    padding: 5px;
    border-radius: 10px;
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.filter-row{
  display:flex;
}

.audit-form{
  width: calc(100vw - 100px);
  font-size: 20px;
  border-radius: 10px;
  border-color: #D5553D !important;

}

.audit-form-label{
  font-size: 15px;
}

.p-icon {
  font-family: 'Poppins-Medium';
  color: white;
  font-weight: 900;
  background-color: var(--second-color);
  font-size: 25px;
  padding: 13px 13px;
  height: 40px;
  border-radius: 50%;
  width: 40px;
  display: block;
  line-height: 0.7;
  text-align: center;
  margin-right: 5px;
}

.btn-icon{
  margin-right: 5px;
  position: absolute;
  margin-top: 5px;
}

.parcel-card-key{
  height:29px !important;
}

.parcel-card-val{
  position: relative;
  height:29px !important;
}

.hidden{
  visibility: hidden;
}

.cam-icon{
  font-size: 30px;
  position: absolute;

}

.cam-count{
  background-color: var(--second-color);
  color: white;
  width: 18px;
  display: inline-block;
  font-size: 12px;
  border-radius: 20px;
  line-height: 18px;
  padding-left: 6px;
  position: absolute;

}

/* unvisited link */
a:link {
  color: var(--link-color);
}

/* visited link */
a:visited {
  color: var(--link-color);
}

/* mouse over link */
a:hover {
  color: var(--link-color);
}

/* selected link */
a:active {
  color: var(--link-color);
}

select.camselector{
  height: 35px;
}