/* import Member */
.importMemberRow
{
    flex-direction: column;
}
.importDataColumn
{
     width:100%!important;
}
.importAssociateMembersColumn
{
    margin-top: 35px!important;
}

form 
{
    display: flex;
    flex-direction: column;
  }
  
  input[type="file"] 
{
    margin-bottom: 20px;
}
  .container 
{
    padding: 20px;
}
  
  .file-upload-form 
{
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    align-items: center;
}
  
  .drop-zone 
{
    border: 2px dashed #ccc;
    padding: 20px;
    cursor: pointer;
    background-color: #f9f9f9;
    width: 100%;
}
  
  .drop-zone p 
{
    margin: 0;
    color: #888;
}
  
  .file-name 
{
    display: block;
    margin-top: 10px;
    color: #333;
    word-break: break-all!important;
}
  
  .drop-zone:hover
 {
    border-color: #333;
}
  
  #importDropZone input[type="file"] 
{
    display: none;
}

/* Move navigation bar to top and display horizontally */

/* Style the navigation list */
.jpNavigation ul 
{
  display: flex;
  gap: 20px;
  list-style: none;
  justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
ul#jpAccountMenuBar li {
  padding: 0px;
  margin: 0px;
  height: 45px;
}
/* Remove default WooCommerce vertical behavior */
.woocommerce-MyAccount-navigation 
{
  float: none !important;
  width: 100% !important;
}

/* Navigation link style */
.jpNavigation ul li a {
  padding: 12px 25px;
  background: #fff;
  color: #917c74 !important;
  border-radius: 0px;
  font-weight: 500;
  transition: 0.3s ease;
  border: 1px solid #917c74;
  font-family: 'Cinzel';
}

/* Active tab style */
.jpNavigation ul li.is-active a,
.jpNavigation ul li a:hover 
{
  background-color: #000;
  color: #fff!important;
  border-color: #000;
}

/* Make the account content full width */
.woocommerce-MyAccount-content {
  width: 100% !important;
  float: none !important;
  padding: 20px;
  border-radius: 6px;
}

/*processing loader*/
#lesPopup
{
  display: none;
}
.popupBox {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.popupBox-content {
  position: fixed;
  /* background-color: #fefefe; */
  margin: auto;
  padding: 0;
  /* border: 1px solid #888; */
  /* width: 50%; */
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  /* margin-top: 2%; */
  left: 50%;
  /* right: 10%; */
  top: 50%;
}


.modal-content {
  height: 500px;
}
button#updateeditLeadModal,.closeButton {
  border-radius: 0px !important;
  background-color: transparent !important;
  color: #000 !important;
  border: 1px solid transparent !important;
  padding: 5px 20px !important;
  text-decoration: underline;
  font-family: 'Verdana';
}
button#updateeditLeadModal:hover{
  color: #146540 !important;
  background-color: transparent!important;
  border-color: transparent!important;
}
.closeButton:hover{
  background-color: transparent!important;
  color: red !important;
  border-color: transparent!important;
}
div#editLeadModalBody {
  padding: 16px 26px 26px;
}
.loader {
  width: 48px!important;
  height: 48px!important;
  border: 3px solid #fff;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  background: #917c74;
  width: 16px;
  height: 16px;
  border-radius: 50%;
} 
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
/* Page Title */
.woocommerce-account h1.alignwide.wp-block-post-title {
  margin: 0px !important;
  max-width: 100% !important;
  text-align: center;
}
.woocommerce h2 {
  text-align: center;
}
/* Tab */
.leadTabs {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.leadCta{
    padding: 8px 15px!important;
    background-color: #917c74!important;
    border-radius: 0px;
    color: #fff;
    border:1px solid #917c74!important;
}
.leadCta:hover,.woocommerce-button:hover,.leadCta:active{
    background-color: #000!important;
    border-color: #000!important;
    color: #fff!important;
    text-decoration: none!important;
}
.btn-close:focus{
  box-shadow: none!important;
}
/* filter */
/*.filter-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.filter-container select {
    padding: 8px;
    border-radius: 0px;
    border: 1px solid #e7e7e7;
}
.lead-dashboard select:focus,.lead-dashboard  input[type=date]:focus,.lead-dashboard input[type=email]{
    outline: 0!important;
    border-color: #bbb!important;
}
.filter-container  input[type=date]{
    border-radius: 0px;
    border: 1px solid #e7e7e7;
    padding: 0px 8px;
}
*/
.app-content-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:15px;
  }
  .show
  {
    display: block!important;
  }
  #addLead
  {
    display: none;
  }
  .search-bar {
    padding: 10px 20px;
    border: 1px solid #ccc;
    font-family: 'Verdana';
    border-radius: 0px;
  }
  .search-bar:focus-visible,.formGroup textarea{
    outline: none;
  }
  .leadSearchDiv {
    width: 100%;
    position: relative;
}
.leadSearchDiv i {
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: #917c74;
    height: 100%;
    width: 45px;
    color: #fff;
    line-height: 40px;
    text-align: center;
}
  .app-content-actions-wrapper {
    display: flex;
    align-items: center;
  }
  
  .filter-button-wrapper {
    position: relative;
  }
  
  .action-button,
  button.woocommerce-Button.button.wp-element-button,.woocommerce-button {
    background-color: #917c74!important;
    color: white!important;
    border: 1px solid #917c74!important;
    padding: 10px 20px!important;
    display: flex;
    align-items: center;
    text-decoration: none!important;
  }
  .action-button:hover,
  button.woocommerce-Button.button.wp-element-button:hover,.woocommerce-button:hover{
    background-color: #000!important;
    color: #fff;
    border: 1px solid #000!important;
    transition: 0.3s ease-in-out;
  }
  .action-button svg {
    margin-left: 5px;
  }
  .button-text-align
  {
    display: unset !important;
  }
  .filter-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
    width: 200px;
  }
  
  .filter-menu label {
    display: block;
    margin-bottom: 5px!important;
    font-size: 13px;
  }
  input[type="date"]::placeholder {
    color: #000 !important;
}
  .filter-menu select,.filter-menu input[type="date"] {
     height:30px!important;
    padding: 5px!important; 
    margin-bottom: 10px;
    font-size: 13px;
  }
  .leadFormRow select,
  .filter-menu select,
  .lesDropdown {
    appearance: none;
    background: #fff url(https://staging.jannpaul.com/wp-content/uploads/2025/05/select-arrow.png) 95% center no-repeat !important;
}
  
  .filter-menu-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
  
  .filter-button.reset,
  .filter-button.apply {
    background-color: #917c74;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
  }
  .filter-button.reset:hover,  .filter-button.apply:hover {
    background-color: #917c74;
  }
  
/* table */
.leadTableDiv tbody tr:nth-child(even) {
    background-color:#f8f9fa !important;
}
.leadTableDiv thead tr {
  color: #fff;
  background-color: #917c74;
}
.leadTableDiv thead th {
  font-family: 'Cinzel';
  font-size: 16px;
}
.leadTableDiv th {
    min-width: 180px;
    position: relative;
    padding: 10px;
    font-weight: 400;
    /* border: 1px solid #917c74; */
}
tbody#leadTableBody td {
  padding: 10px;
  /* border: 1px solid #917c74 !important; */
}
td a:hover {
  color: #000 !important;
}
.leadTableDiv th i.fas.fa-sort-asc.col-asc{
  position: absolute;
  right: 15px;
  top: 12px;
}
.leadTableDiv th i.fas.fa-sort-desc.col-desc{
  position: absolute;
  right: 15px;
  bottom: 12px;
}
.leadTableDiv th i:hover{
  color: #917c74;
  cursor: pointer;
}
.leadUserName {
  color: rgb(0, 0, 0) !important;
}
.leadStatus_valid,
.editButton,
.orderStatus_processing,
.orderStatus_pending,
.orderStatus_complete {
  padding: 4px 8px;
}
a.editButton.editLead:hover {
  color: #000 !important;
}
.editButton {
  text-decoration: underline !important;
  padding: 0px;
}
.editStatusDiv span {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: 500;
  gap: 10px;
}
.leadStatus_valid,
.leadStatus_valid:hover,
.orderStatus_complete{
    color:#146540!important;
    background-color: #c0f9df;
    cursor: inherit;
}
.leadStatus_invalid {
  background-color: #f8d7da;
  color: #58151c !important;
  padding: 4px 8px;
  cursor: inherit;
}
.orderStatus_processing{
  background-color: #917c7414;
  color: #917c74;
}

.orderStatus_pending{
  background-color: #FCF4E5;
  color: #DB8401;
}

.userStatusDiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
input, select {
  font-family: 'Verdana'!important;
}
input:focus-visible,select:focus-visible{
  outline: none!important;
}
  
/* Pagination */
div#paginationStructure {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:10px;
    font-weight: 500 !important;
    margin-top: 30px;
}
.pageArrow,
.pageLink,
.dots {
    cursor: pointer;
    font-size: 16px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #8c8b88!important;
    /* border: 1px solid #e7e7e7; */
}
.pageArrow.disabled {
    pointer-events: none;
    opacity: 0.5;
    color: grey !important;
}
.pageArrow.disabled i {
    color: #82828a !important;
}
span#prevPage,span#nextPage {
  width: auto;
  border: none;
}
span#nextPage:hover,span#prevPage:hover{
  color: #917c74!important;
}
.pageLink:hover {
    color: #917c74 !important;
    /* border-color: #917c74; */
}
.pageLink.active {
  color: #917c74 !important;
  font-weight: 600;
  border-bottom: 2px solid;
}
.pageArrow i {
    font-size: 16px !important;
}
.pageArrow i:hover {
    color: #917c74;
}
/* leadeForm */
.leadFormRow {
    display: flex;
    align-items: center;
    gap: 10px;
}
.formGroup {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    width: 100%;
    margin-top: 10px;
}
.formGroup input[type=date],
.formGroup select,
.formGroup input[type=text],
.formGroup input[type=email],
.formGroup input[type=password],
.filter-menu select, 
.filter-menu input[type="date"],
.lesDropdown,
.formGroup textarea{
    border-radius: 0px!important;
    border: 1px solid #ccc;
    width: 100%!important;
    height: 40px;
    padding: 0px 12px;
    box-sizing: border-box;
    color: #000 !important;
    background-color: transparent !important;
    text-align: left!important;
}
.formGroup textarea{
  min-height: 70px;
  padding: 12px;
  font-family: 'Verdana';
}
input#submitNewLeadForm {
  margin-top: 20px;
}
/* Success message styles */
.successMessage 
{
  color: #146540 ;
  border: 1px solid #ccc;
  border-left: 4px solid #146540 ;
  border-radius: 0px !important;
  margin-top: 0px !important;
  padding: 10px;
}

/* Error message styles */
.errorMessage 
{
  color: red;
  border: 1px solid #ccc;
  border-radius: 0px !important;
  border-left: 4px solid red;
  margin-top: 0px !important;
  padding: 10px;
  list-style: none;
}
.errorMessage ul {
  font-weight: 400;
  position: relative;
  margin-bottom: 0px;
}
.errorMessage ul li::marker{

}
/*JP login page*/
.pp-form-container #pp-login-1.ppBuildScratch .pp-form-field-wrap input,
 .pp-form-container #pp-login-1.ppBuildScratch .pp-form-field-wrap select,
  .pp-form-container #pp-login-1.ppBuildScratch .pp-form-field-wrap textarea,
  .pp-form-container #pp-password-reset-1.ppBuildScratch .pp-form-field-wrap input 
{
  font-size: 14px;
  border-color: #dbdbdb;
  background: #ffffff;
  color: #69717a;
  border-radius: 4px !important;
  font-family: 'Verdana';
}

.pp-form-container #pp-login-1.ppBuildScratch
{
border-radius:0px!important;
}

.ppbs-headline 
{
  font-family: 'Optima' !important;
  text-transform: uppercase;
}
.pp-form-field-wrap.user-login.fw-full.field-has-icon.fda-standard.fld-above {
  padding-bottom: 30px;
}
.pp-form-container #pp-login-1.ppBuildScratch .pp-form-submit-button-wrap input[type="submit"],
.pp-form-container #pp-password-reset-1.ppBuildScratch .pp-form-submit-button-wrap input[type="submit"] 
{
  font-size: 16px;
  font-weight: bold;
  background: #917c74 !important;
  color: #ffffff;
  border-radius: 0px !important;
}
.pp-form-container #pp-login-1.ppBuildScratch .pp-form-submit-button-wrap input[type="submit"]:hover,
.pp-form-container #pp-password-reset-1.ppBuildScratch .pp-form-submit-button-wrap input[type="submit"]:hover {
  background-color: #000!important;
  color: #fff!important;
}
.pp-form-container .ppress-form-bottom-links a 
{
  line-height: 22px !important;
  font-size: 14px !important;
  color: #8c8b88 !important;
  display: inline-block !important;
  text-decoration: underline !important;
  font-weight: 400 !important;
  text-align: center !important;
  border-bottom: none !important;
}
.pp-form-field-wrap.login-password.fw-full.has-password-visibility-icon.fda-standard.fld-above 
{
  padding-bottom: 30px;
}
@media (max-width:991.98px) {
  .leadTableDiv{
    overflow-x: auto;
  }
  .editStatusDiv span{
    flex-direction: row;
    align-items: center;
  }
  .userStatusDiv{
    flex-wrap: wrap;
  }
}
@media (max-width:767.98px) 
{
  .leadFormRow{
    flex-wrap: wrap;
  }
  .modal-dialog.modal-lg {
    margin:0px auto;
    margin-top: 20vh;
    width: 100%;
    height: 100%;
  }
  
}
@media (max-width:576.98px){
  .app-content-actions{
    flex-wrap: wrap;
  }
  input#searchInput{
    width: 100%;
  }
  .modal-dialog.modal-lg{
    margin: 0px!important;
  }
  .modal-content {
    height: 100%;
}

}