/* import Member old CSS */
/* .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;
} */

/* Import New */
/* Box */
.upload-box {
  max-width: 800px;
  margin: 0px auto;
  text-align: center;
}

/* Header */
.upload-header h3 {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: bold;
}

.subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.upload-icon {
  font-size: 35px;
  color: #2ecc71;
  background: #f0f7ff;
  border-radius: 50%;
  padding: 12px;
  display: inline-block;
}

/* Drop Zone */
.drop-zone {
  border: 2px dashed #ccc;
  padding: 30px;
  border-radius: 6px;
  cursor: pointer;
}

.drop-zone:hover {
  border-color: #2ecc71;
}

.drop-icon {
  font-size: 35px;
  color: #2ecc71;
  margin-bottom: 10px;
}

.file-link {
  color: #2ecc71;
  cursor: pointer;
  font-weight: bold;
}

.file-name {
  display: block;
  margin-top: 10px;
  color: #666;
  font-size: 13px;
}

/* Buttons */
.upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.upload-btn {
  background-color: #2ecc71!important;
  padding: 14px 36px!important;
  border-radius: 50px!important;
  border-color: #2ecc71!important;
  box-shadow: (0, 0, 0, 0.1) 0px 5px 20px 0px;
}

.upload-btn:hover {
  background: #28a745;
}


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

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

/* Navigation link style */
/* .lesNavigation ul li a {
  padding: 12px 25px;
  border-radius: 0px;
  font-weight: 500;
  transition: 0.3s ease;
  border: 1px solid #917c74;
 
} */

/* Active tab style */
/* .lesNavigation ul li.is-active a,
.lesNavigation 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-dialog.modal-lg {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .modal-content {
  height: 500px;
} */
button#updateeditLeadModal,.closeButton {
  border-radius: 0px !important;
  background-color: transparent !important;
  color: #000 !important;
  border: 1px solid transparent !important;
  padding: 0px 5px !important;
  text-decoration: underline;
}
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: flex-end;
    gap:15px;
  }
  .show
  {
    display: block!important;
    padding: 0px;
  }
  #addLead
  {
    display: none;
  }
  .search-bar {
    margin-bottom: 0px;
  }
  .search-bar:focus-visible,.formGroup textarea{
    outline: none;
  }
  .leadSearchDiv {
    flex: 1;
    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{
    width: max-content;
    background-color: #242e45;
    color: #fff;
  }
  .action-button:hover {
    background-color: #242e45 !important;
    color: #fff !important;
}
  .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;
    line-height: 20px;
  }
  .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: #242e45;
    color: #fff;
  }
  .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-size: 16px;
}
.leadTableDiv th {
    min-width: 180px;
    position: relative;
    padding: 10px!important;
}
tbody#leadTableBody td {
  padding: 10px;
  /* border: 1px solid #917c74 !important; */
}
.leadUserName,.phoneNumber, .emailId {
  margin-bottom: 0px;
}
.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;
}
.leadStatus_valid,
.editButton,
.orderStatus_processing,
.orderStatus_pending,
.orderStatus_complete {
  padding: 4px 8px;
}

.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;
    text-decoration: none !important;
}
.leadStatus_invalid {
  background-color: #f8d7da;
  color: #58151c !important;
  padding: 4px 8px;
  cursor: inherit;
  text-decoration: none !important;
}
.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: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;
    /* 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 {
    width: 100%;
    margin-bottom: 0px!important;
}
.formGroup textarea{
  min-height: 70px;
  padding: 12px;
}
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;
  margin-bottom: 30px;
}

/* 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{

}
/*les 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;
}
/* Medical form */
form.wpcf7-form.init {
  max-width: 900px;
  margin: 2rem auto;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.form-title {
  color: #2c3e50;
  margin-bottom: 2rem;
  text-align: center;
  font-weight: 600;
}
.form-label {
  color: #495057;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.form-control, .form-select {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-control:focus, .form-select:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.contact__form-btn {
  background: linear-gradient(135deg, #dc3545, #c82333);
  border: none;
  padding: 12px 40px;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  width: 100%;
}
.contact__form-btn:hover {
  background: linear-gradient(135deg, #c82333, #a71e2a);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}
.contact__form-btn-box {
  text-align: center;
  margin-top: 2rem;
}
.dynamic-field {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1rem;
  animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
  from {
      opacity: 0;
      transform: translateY(-10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}
.dynamic-field-title {
  color: #dc3545;
  font-weight: 600;
  margin-bottom: 1rem;
  border-bottom: 2px solid #dc3545;
  padding-bottom: 0.5rem;
}
.required-asterisk {
  color: #dc3545;
}
select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required {
max-width: 100% !important;
}
.contact-form-container select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required, 
.contact-form-container input.wpcf7-form-control.wpcf7-text {
  border: 1px solid #eceae0 !important;
  /* line-height: 43px !important; */
  /* height: 48px; */
  margin-bottom: 16px;
}
.medicalProfessionalMainCol {
  background-color: #f5f5f5;
  padding: 20px;
  margin-bottom: 16px;
}
.contact-form-container label.form-label {
  margin-bottom: 8px !important;
}
div#webinar-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.radioBtnAndVideoWrapper {
  display: block !important;
}
div#webinar-container video {
  width: 100%;
  margin-top: 16px;
}
@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;
    gap: 0px;
  }
  .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%;
}

}


/* Updated CSS */
.leadTableDiv table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* keeps alignment consistent */
}

.leadTableDiv th, 
.leadTableDiv td {
  text-align: left;
  vertical-align: top;
  padding: 12px;
  border-bottom: 1px solid #eee;
  word-wrap: break-word;
}

.userStatusDiv {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.userStatusDiv p {
  margin: 2px 0;
  font-size: 14px;
  line-height: 1.4;
}

.leadUserName {
  font-weight: 600;
  font-size: 15px;
}

.editStatusDiv span {
  display: flex;
  flex-direction: row; /* side by side instead of stacked */
  align-items: center;
  gap: 8px;
}

.editButton {
  color: #007bff;
  text-decoration: underline;
  font-size: 13px;
  cursor: pointer;
}

.leadStatus_valid {
  background-color: #d1f7e2;
  color: #146540;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.leadStatus_invalid {
  background-color: #f8d7da;
  color: #b02a37;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.leadTableDiv table thead {
  background-color: #f4f6f9; /* subtle light gray background */
}

.leadTableDiv table thead th {
  font-weight: 600;
  font-size: 14px;
  color: #333; /* dark text */
  padding: 12px;
  border-bottom: 2px solid #ddd;
  text-align: left;
}

.leadTableDiv table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.leadTableDiv table tbody tr:hover {
  background-color: #f1f7ff; /* highlight on hover */
}

/* Apply fixed width & wrapping to first column */
.leadTableDiv table td:first-child,
.leadTableDiv table th:first-child {
  width: 220px;             /* adjust as needed */
  max-width: 220px;
  word-wrap: break-word;
  white-space: normal;      /* ensures wrapping */
  vertical-align: top;
}

/* User details text formatting */
.leadTableDiv .leadUserName {
  font-weight: 600;
  font-size: 15px;
  display: block;
  margin-bottom: 4px;
}

.leadTableDiv .userStatusDiv p {
  margin: 2px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #555;
}

.leadTableDiv table td:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leadTableDiv table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;  /* keeps columns aligned */
}

/* Apply only to first column */
.leadTableDiv table td:first-child,
.leadTableDiv table th:first-child {
  width: 260px;         /* adjust until it looks good */
  max-width: 260px;
  word-wrap: break-word;
  white-space: normal;  /* wrap text instead of overflowing */
  vertical-align: top;
}


/* Make sure Edit + Status buttons don’t push into other columns */
.userStatusDiv,
.editStatusDiv {
  display: block;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}


.leadTableDiv table td:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



@media (max-width: 991px) {
  .leadTableDiv {
    overflow-x: auto;
  }
  .editStatusDiv span {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

#webinar-gallery-container { font-family: Arial, sans-serif; }
.webinar-tabs { display: flex; list-style: none; padding: 0; margin: 0 0 15px; border-bottom: 2px solid #ddd; }
.webinar-tab { margin-right: 15px; padding: 8px 15px; cursor: pointer; border-radius: 5px 5px 0 0; }
.webinar-tab.active { background: #0073aa; color: #fff; }
.video-list { display: none; margin-bottom: 20px; }
.video-item { padding: 10px; border: 1px solid #eee; margin-bottom: 8px; cursor: pointer; }
.video-item:hover { background: #f7f7f7; }
#video-details { display: flex; gap: 20px; border-top: 2px solid #ddd; padding-top: 20px; }
.video-left { flex: 2; }
.video-right { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.ctaText {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  margin: 30px auto;
  max-width: 800px;
  line-height: 1.6;
  background-color: #204094;
    color: #fff;
    padding: 15px;
}
.video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* space between items */
  margin-bottom: 30px;
}

.video-item {
  flex: 1 1 calc(33.333% - 20px); /* 3 columns */
  box-sizing: border-box;
  border: 1px solid #eee;
  padding: 10px;
  text-align: center;
  background: #fafafa;
  border-radius: 6px;
}

.video-item span {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.video-item video {
  max-width: 100%;
  border-radius: 4px;
}

#video-details {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.video-left {
    flex: 0 0 75%;
}

.video-right {
    flex: 0 0 25%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.video-segments {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.video-segments h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #0073aa;
    font-size: 16px;
}

.video-segments p {
    margin: 6px 0;
    font-size: 14px;
}

.video-segments strong {
    color: #333;
}

.video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
  justify-content: flex-start;
}

.video-item {
  flex: 1 1 calc(33.333% - 20px); /* 3 columns */
  box-sizing: border-box;
  border: 1px solid #eee;
  padding: 10px;
  text-align: center;
  background: #fafafa;
  border-radius: 6px;
  max-width: calc(33.333% - 20px);
  min-width: 220px;
}

@media (max-width: 900px) {
  .video-item {
    flex: 1 1 calc(50% - 20px); /* 2 columns on tablet */
    max-width: calc(50% - 20px);
  }
}
@media (max-width: 600px) {
  .video-item {
    flex: 1 1 100%; /* 1 column on mobile */
    max-width: 100%;
  }
}



/* Keep details section below the grid */
#video-details {
  display: flex;
  gap: 20px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.video-left {
  flex: 0 0 75%;
}
.video-right {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.webinarIntroText {
  font-size: 1.18rem;
  color: #222;
  background: #f7f7f7;
  border-radius: 7px;
  padding: 16px 22px;
  margin: 0 auto 24px auto;
  max-width: 800px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  font-family: Arial, sans-serif;
}
.webinarIntroText strong {
  color: #0073aa;
}

/* Modal adjustments */
#videoModal .modal-dialog {
    max-width: 1200px;
    margin: 1.75rem auto; /* vertical spacing */
}

#videoModal .modal-content {
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
}

#videoModal .modal-header {
    border-bottom: 1px solid #ddd;
    padding: 15px 20px;
    background-color: #204094;
    color: #fff !important;
}
.modal-header .btn-close {
  background-color: #fff;
  opacity: 1;
}

#videoModal .modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

#videoModal .modal-body {
    display: flex !important;
    flex-wrap: wrap ;
    gap: 20px !important;
    padding: 20px;
    background-color: #fff;
}

/* Left video */
#videoModal .video-left {
    flex: 1 1 65%;
    min-width: 300px;
}

#videoModal .video-left video {
    width: 100%;
    height: auto;
    border-radius: 6px;
    background: #000;
}

/* Right segment info */
#videoModal .video-right {
    flex: 1 1 30% !important;
    min-width: 250px;
}

#videoModal .video-segments {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    background: #f9f9f9;
}

#videoModal .video-segments p {
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.4;
    color: #333;
}

#videoModal .video-segments strong {
    color: #000;
}

.formHeading {
    text-align: center;
    margin-bottom: 40px;
}

.formHeading h4{
  width: 100%;
}

label#webinar-container-label {
    color: black;
}

input#searchInput
{
    border: 1px solid #eceae0;
    width: 60%;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    #videoModal .modal-body {
        flex-direction: column;
    }
    #videoModal .video-left,
    #videoModal .video-right {
        flex: 1 1 100%;
        min-width: auto;
    }
    #videoModal .video-right {
        margin-top: 20px;
    }
}
/* sub category tabs */
div#webinar-subcategory-menu {
    width: 100%;
}

ul.sub-category-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    list-style: none;
}

li.sub-category-tab {
    padding: 8px 15px;
    cursor: pointer;
    font-weight: 500;
    border-radius: 5px 5px 0 0;
}
li.sub-category-tab.active, li.sub-category-tab:hover {
    background: #204094;
    color: #fff;
    border-radius: 50px;
    transition: 0.1s ease-in-out;
}