/* --------------- dataTables  ---------------- */
div.dataTables_wrapper {
  justify-content: space-between;
}
.dataTables_wrapper {
  padding: 30px 15px 0;
}
.mms_heading .dataTables_wrapper {
  padding: 0px 15px 0;
}
.mms_heading_text {
  font-size: 1.8em;
  font-weight: 600;
  padding: 5px 10px;
}
.mms_reportSubHead {
  font-size: 0.5em;
  font-weight: normal;
}
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 10px;
}
.dataTables_wrapper .dataTables_filter label {
  font-weight: 600;
}
.dataTables_wrapper .dataTables_filter label .form-control {
  margin-left: 15px;
}
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid #937e57 !important;
}
.dataTables_wrapper .dataTables_length {
  line-height: 18px;
  margin-top: 4px;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
}
.dataTables_wrapper .dataTables_length select {
  background-color: #937e57;
  line-height: 24px;
  font-weight: 600;
  color: #fff;
  width: 55px;
}
.dataTables_wrapper .dataTables_length select option {
  background: #fff;
  color: #333333;
}
.dataTables_wrapper .dataTables_length label {
  font-weight: 400;
}
.dataTables_wrapper .dataTables_length label .form-select {
  height: 30px;
  margin: 0 15px;
}
.dataTables_wrapper .dataTables_info {
  display: inline-block;
  font-style: italic;
  font-size: 0.9em;
  float: unset;
  margin-left: 15px;
}
.dataTables_wrapper .dt-buttons button,
div.dtsb-searchBuilder button.dtsb-button {
  color: #fff;
  background-color: #937e57;
  border-color: #937e57;
}
.dataTables_wrapper .dt-buttons button:hover,
div.dtsb-searchBuilder button.dtsb-button:hover {
  background-color: #392705 !important;
}
.dataTables_wrapper .dt-buttons button.dt-button span.dt-down-arrow,
div.dt-button span.dt-down-arrow,
a.dt-button span.dt-down-arrow,
input.dt-button span.dt-down-arrow {
  color: #fff;
}
button.dt-button {
  line-height: 18px;
  margin-top: 4px;
}
.dataTables_wrapper .dtsb-searchBuilder {
  display: inline-flex;
  margin: 0px 10px;
}
.dataTables_wrapper .dtsb-searchBuilder .dtsb-titleRow {
  display: none;
}
.dataTables_wrapper .dtsb-searchBuilder .dtsb-group {
  margin-bottom: 0px !important;
}
.dataTables_wrapper .dtsb-searchBuilder .dtsb-button {
  margin-top: 4px;
  line-height: 17px;
}
/* --------------- pagination  ---------------- */
.dataTables_paginate {
  text-align: right;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: .25em .5em;
}
.mms_list .pagination li,
.pagination li {
  margin: 0;
  list-style: none;
}

.pagination li .page-link {
  color: #392705;
}
.pagination li .page-link:hover {
  color: #fff;
  background-color: #937e57;
}
.pagination li.disabled .page-link,
.pagination li .page-link.disabled {
  color: #6c757d;
}
.pagination li.active>.page-link,
.pagination li .page-link.active {
  background-color: #392705;
  border-color: #392705;
  color: #fff;
}

.mms-back-link {
  margin-left: 10%;
  color: var(--bs-warning);
  font-weight: bold;
}
/* --------------- mms_table  ---------------- */
.mms_table table {
  border: 1px solid #937e57;
  margin-bottom: 5px;
  background-color: #fff;
  width: 100%;
}
.mms_table .dataTables_paginate {
  text-align: right;
}
.mms_table .dataTables_paginate a.paginate_button {
  border: 1.5px solid #937e57 !important;
}
.mms_table .dataTables_paginate a.paginate_button.current {
  background: #937e57;
  color: #fff !important;
  font-weight: 600;
}
.mms_table .dataTables_paginate a.paginate_button.current:hover {
  background: #392705;
  color: #fff !important;
}

.mms_table table thead tr,
.mms_table table tfoot tr {
  background-color: #392705;
}
.mms_table table thead tr th,
.mms_table table tfoot tr th {
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: #ffffff;
  font-weight: 300;
  border: 0;
  border-right: 1px solid #fff;
  padding: 4px;
}
.mms_table table thead tr th:last-child {
  border: 0;
}
.mms_table table tfoot tr th:last-child {
  border: 0;
}
.no-r-border {
  border-right: 0px
}
.mms_table table tbody tr {
  background-color: #ffffff;
  transition: 0.5s;
}
.mms_table table tbody tr:nth-child(even) {
  background-color: #f1f1f1;
}
.mms_table table tbody tr td {
  text-align: center;
  font-size: 13px;
  color: #000000;
  font-weight: 400;
  border: 0;
  border-right: 1px solid #937e57;
  padding: 5px;
}
.mms_table table tbody tr td.no-r-border {
  border-right: 0px
}
.mms_table table tbody tr.selected td {
  box-shadow: inset 0 0 0 9999px #937e57 !important;
  background-color: #937e57;
}
.mms_table table tbody tr td a {
  color: #1c1b1b;
  font-weight: 500;
  text-decoration: underline;
}
.mms_table table tbody tr td img {
  width: 20px;
}
/*.mms_table table tbody tr td:first-child{text-align: right;}
.mms_table table tbody tr td:nth-child(2){text-align: right;}*/

.mms_table table tbody tr td:last-child {
  border-left: 0px solid #937e57;
}
.mms_table table tbody tr:hover {
  background-color: #937e57;
  transition: background-color 0s linear;
  -moz-transition: background-color 0s linear;
  -webkit-transition: background-color 0s linear;
  -ms-transition: background-color 0s linear;
}
.mms_table table tbody tr:hover td {
  color: #fff;
}
.total_record {
  text-align: center;
  font-weight: 300;
  color: #392705;
}

.mms_sendlog {

}
.mms_sendlog td {
  text-align: left;
}

.btn-action-top {
  margin-bottom: -40px;
  z-index: 99;
}

/* ------------dte datatables editor  ---------------- */
table.mms_dte {
  width: 100% !important;
}
div.DTE_Field input[disabled="disabled"] {
  background: #e8e9eb;
}
div#widgets-right .sidebar-name h2,
div#widgets-right .sidebar-name h3 {
  font-size: 20px;
}

.DTE .col-form-label {
  text-align: right;
  font-size: 0.875rem;
  font-style: italic;
}
.DTE fieldset {
  border: solid 1px black;
  border-radius: 8px;
  margin-top: 5px;
  background-color: beige;
}
.DTE legend {
  margin-top: -8px;
  margin-left: 5px;
  color: white;
  background-color: #937e57;
  width: auto;
  padding: 0px 5px;
  border-radius: 8px;
  font-size: 1.2rem;
  margin-bottom: .2rem;
}
.DTE fieldset.name {
  border: solid 0px black;
  margin-top: 0px;
  background-color: transparent;
}
.DTE input.form-control {
  font-weight: 500;
}

.dt-container {
  padding-right: 10px;
}
.mms_heading_text {
  xmargin-bottom: -20px;
} 
table.mms_dte {
  margin-top: 20px;
}
table.mms_log {
  margin-top: 10px;
}
.mms_log td {
  white-space: nowrap;
  padding-right: 10px;
  padding-left: 10px;
  border-right: 1px solid gray;
}
@media (max-width: 979px) {
 .modal-dialog {
    max-width: 90%;
  }
}
.dt-buttons .btn {
  background-color: #937e57;
}
.dt-container div.dtsb-searchBuilder {
  float: right;
  margin-left: 10px;
  border: solid 1px black;
  padding: 5px;
  border-radius: 8px;
}
.dt-container div.dtsb-searchBuilder {
  padding-top: 0px;
}
.dt-container div.dtsb-searchBuilder div.dtsb-titleRow {
  margin-bottom: .1em;
}
.dt-container div.dt-buttons {
  margin-left: 10px;
  margin-bottom: 3px;
}
.dt-buttons {
  color: white;
  background-color: #937e57;
}

.dt-container div.dt-search {
  margin-left: 10px;
  float: left;
}
.dt-container div.dt-length {
  margin-left: 10px;
  margin-right: 10px;
}
.dt-container div.dt-length label {
  font-size: 0.8em;
}
.dt-container div.dt-paging {
  float: right;
}
.dt-container div.dt-info {
  padding-top: .85em;
  float: left;
}
.mms_pop_edit {
  display: none;
}
.DTE_Body_Content .mms_pop_edit {
  display: flex;
}
div#wpfooter {
  margin-left: 0px;
  padding-left: 0px;
}
.DTE_Form_Content .col-form-label {
  width: 20%;
  /* Adjust width for col-lg-2 */
}
.DTE_Form_Content .DTE_Field_Input {
  width: 80%;
  /* Adjust width for col-lg-10 */
}
/*rowGroup end*/

/* Checkbox fields: DTE always renders fieldInfo as a block-level
   div.DTE_Field_Info sibling of div.DTE_Field_InputControl, so it wraps to
   its own line below the checkbox by default. For checkboxes specifically
   that reads as detached from the control it describes and lengthens the
   form for no reason - put it on the same line instead. Other field types
   are untouched; .DTE_Field_Input's width/layout above still applies to them. */
.DTE_Field_Type_checkbox .DTE_Field_Input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.6em;
}
/* msg-info/msg-message/msg-error all render with a shared .form-text class
   (DTE's Bootstrap styling) - override the 80px margin-left meant for
   Formr's own help text (see .form-text above) so the gap above is the only
   spacing. msg-error/msg-message are normally-empty placeholders (only
   populated when a validation error/API message is actually showing) -
   :empty removes them from the flex row entirely so they don't still eat a
   column-gap on either side while carrying no visible content. */
.DTE_Field_Type_checkbox .DTE_Field_Input > .form-text {
  margin-left: 0;
}
.DTE_Field_Type_checkbox .DTE_Field_Input > .form-text:empty {
  display: none;
}

table.dataTable tr.dtrg-end th {
  font-weight: normal;
  text-align: right;
  font-style: italic;
  font-size: 0.8em;
}
.col-center,
table.dataTable td.dt-type-numeric.col-center {
  text-align: center;
}



/* ------------ mms-menu ---------------- */

ul.mms-menu {
  background: transparent;
  border: 0;
}
.mms-menu a {
    padding: 7px 15px;
    text-decoration: none;
    color: #333;
}

.mms-menu a:hover {
    background-color: #e9ecef;
}

/* Ensure nested submenus align properly */
.mms-menu .dropdown-menu .dropdown-menu {
    margin-left: 0; /* Prevents unnecessary spacing */
    top: 0; /* Aligns at the top of the parent */
    left: 5%; /* Opens to the right by default */
}

/* Adjust nested submenu for small screens */
@media (max-width: 768px) {
    .mms-menu .dropdown-menu .dropdown-menu {
        left: auto;
        right: 0; /* Align nested submenu to the right */
    }
}
.mms-menu .dropdown-menu .dropdown-submenu {
    margin-left: 0; 
    top: 20px; 
    left: 100%; 
}
.login_menu .dropdown-menu {
    min-width: 220px;
    right: 0;
}

.mms_login_but {
  display: inline-flex;
  margin-left: 5px;
  margin-top: 5px;
  cursor: pointer;
  border-radius: 10px;
  background-color: var(--site-color);
  color: var(--white-color);
  font-size: 20px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
}

/* ------------  ---------------- */
#message_field {
  padding-left: 86px;
}
/* ------------ Custom Meta Box ---------------- */

.mms_meta_box div:nth-child(1) {text-align: right;}
.mms_meta_box label {margin-bottom: 5px; font-weight:300;font-size:80%;}
.mms_meta_box input {margin-bottom: 10px;width: 100%; font-weight:500;}
.mms_meta_box input[type=checkbox] {width: auto; }
.mms_meta_box textarea {width: 100%;min-height: 150px;margin-bottom: 15px; font-weight:500;}


/* --------------- Forms  ---------------- */

.mms_form_fields .form-label,
.mms_display_fields .form-label {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 300;
  width: 20%;
  max-width: 70px;
  text-align: right;
  padding-top: 4px;
  margin-bottom: 0px;
  overflow: hidden;
}
.mms_form_fields .form-control,
.mms_display_fields .form-control {
  display: inline-block;
  width: 75%;
  font-size: 1.2rem;
/*  max-width: max-content;*/
}
.mms_address {
  font-size: 1.2rem;
}
.mms_form_fields .form-control-size,
.mms_display_fields .form-control-size,
.mms_display_fields input[type="date"],
.mms_display_fields select {
  max-width: max-content;
}

.mms_display_stack .form-control {
  display: inline-block;
  width: 70%;
}
.mms_display_stack .form-label {
  width: 100%;
  max-width: 100%;
  display: block;
  text-align: left;
}
.form-control-sm,
.mms_display_stack .form-control-sm,
.mms_display_fields .form-control-sm {
  font-size: 0.8rem !important;
}
.mms_display_fields .form-control-fw {
  width: 100%;
}
.mms_display_fields .form-control-6 {
  width: 80px;
}
.mms_display_fields .form-control-money {
  max-width: 120px;
  text-align: right;
}
.mms_display_fw .form-label {
  width: 9.5%;
}
@media (max-width: 768px) {
  .mms_display_fw .form-label {
    width: 20%;
  }
}
.mms_display_fw .form-control {
  max-width: none;
}
div.mms_display_editor {
  padding-left: 24px;
  padding-right: 7.5%;
}
.mms_form_fields textarea.form-control,
.mms_display_fields textarea.form-control {
  max-width: none;
}
.mms_form_fields .mb-3,
.mms_display_fields .mb-3 {
  margin-bottom: 0rem !important;
}
.mms_display_fields .form-control:disabled {
  background-color: transparent;
  border: 0px;
  font-weight: 500;
  line-height: 1;
  padding: .175rem .75rem;
}

.mms_display_title {}
fieldset.mms_display_title {
  border: solid 0px black;
  border-radius: 8px;
  margin-top: 10px;
  background-color: rgba(147, 126, 87, 0.1);
}

.activity_invoice fieldset.mms_display_title {
  padding-bottom: 10px;
  margin: 5px;
  margin-top: 0;
}

.mms_display_title .mb-3 {
  display: inline-block;
}

.form-text {
/*formr 6th param field info -help text*/
  margin-left: 80px;
  font-size: 0.75em;
  font-style: italic;
}

#ScorerLidNo.form-text {
  float: right;
}

div.aa_AttDoc {
  border: 1px solid #a2a2a2;
  border-radius: 8px;
}

.fldHelp {
  font-size: 0.875em;
}
.mms_display_fields .fldHelp {
  display: inline-block;
  margin-left: 5px;
}
.align-middle .form-check {
  margin-top: 15px;
}
.head-info {
  margin-top: -35px;
}
@media (max-width: 768px) {
  .head-info {
    margin-top: 0;
  }
}
/* --------------- list fields  ------------- */
.fldLabel {
  font-size: 9px;
  text-align: right;
  padding-left: 12px;
  vertical-align: top;
}
th.fldLabel {
}
.fldCenter {
  font-size: 12px;
  text-align: center;
  padding-bottom: 12px;
  padding-top: 12px;
}
.fldData {
  font-size: 12px;
  text-align: left;
  padding-left: 8px;
}
.fldDataMedium, 
.mms_display_fields .fldDataMedium.form-control {
  font-size: 0.9rem;
}

.fldDataRight {
  font-size: 12px;
  text-align: right;
  padding-right: 10px;
}

.fldDataRight.form-control {
  font-size: 12px;
  width: 100%;
}

.fldMoney {
  text-align: right;
  font-size: 12px;
  padding-left: 5px;
  padding-right: 8px;
  white-space: nowrap  !important ;
}
.fldInteger {
  text-align: right;
  padding-right: 8px;
  width: 90px;
}
.fldLong {
  width: 100%;
}
.fldDataSmall {
  font-size: 9px;
  text-align: left;
  padding-left: 8px;
  padding-right: 8px;
}
.fldDataSmallRight {
  font-size: 9px;
  text-align: right;
  padding-left: 8px;
  padding-right: 8px;
}
.fldDataSmallLabel {
  font-size: 8px;
  text-align: right;
  padding-left: 12px;
}
.fldDataLarge {
  font-size: 18px;
}
.fldDataHighLight {
  background-color: yellow;
}
.fldDataStrong {
  font-weight: bold;
}
.fldDataNoChange,
.fldDataVerified input {
  font-style: italic;
  background-color: darkgrey;
}
.fieldNotes {
}
.fldInfoItalic {
  font-size: 0.8rem !important;
  font-style: italic;
}
.mms_display_fields .form-control.fldLidNo,
.fldLidNo {
  width:120px;
  text-align: right;
}
.RequiredFlag {
  color: Red;
}
.mms_radio-inline div {
  display: inline-block;
}
.mms_radio-inline .form-check .form-check-input {
  margin-left: -0.5em;
  margin-top: 5px;
}
.mms_radio-inline.mms_gender .form-check .form-check-input {
  width:15px;
}
.mms_checkbox {
  padding-left: 15%;
}
.mms_checkbox label {
  font-size: 0.7em;
  line-height: 0.9;
}
.mms_insetform {
  margin-top: 20px;
  margin-bottom: 20px;
}
pre {
  margin-bottom: 3px;
}
section.workbenchPage {
  padding-left: 5px !important;
  padding-right: 15px !important;
}
/* --------------- mms_fieldset  ---------------- */
.mms_fieldset {
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 15px;
  padding: 25px 15px 15px;
  border: 1px solid #a2a2a2;
  border-radius: 2.4rem;
  box-shadow: rgba(187, 187, 187, 1) 10px 10px 5px -1px;
  background-color: #dbdbdb;
}
.mms_fieldset legend {
  position: absolute;
  top: 0;
  left: 4%;
  /* Position it % from the left border */
  transform: translateY(-50%);
  max-width: fit-content;
  /* Limit the width to content width */
  /*   width: max-content;*/
  background: #fff;
  /* Match the background color */
  padding: 0 10px;
  /* Add some padding around the text */
  border-radius: 7px;
  font-size: 0.9em;
  font-style: italic;
}
#pp_enter.mms_fieldset legend {
  top: 9px;
}
.mms_hide {
  display:none !important;
}

.mms_fieldset.mms_roles p.submit {
  margin-top: 0px;
  padding-bottom: 0;
}

/* ---------------   ---------------- */
.mms_list li {
  list-style: square;
    margin-left: 2em;
}
.mms_code {
    font-size: 16px;
}
/* --------------- mms_duty  ---------------- */
.isexec {
    font-size: 0.6em;
    font-style: italic;
    display: block;
}
.mms_duty fieldset {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 15px ;
  /*border: 0.3em solid;
  border-radius: 5px;*/
}

.mms_duty legend {
  position: absolute;
  top: 0;
  /*left: 4%;*/
  /* Position it % from the left border */
  transform: translateY(-50%);
  max-width: fit-content;
  /* Limit the width to content width */
  /*   width: max-content;*/
  background: #fff;
  /* Match the background color */
  padding: 0 10px;
  /* Add some padding around the text */
  border-radius: 7px;
  font-size: 1.2em;
  font-style: italic;
}
/* --------------- messaging  ---------------- */
.mms_confirm {

}

.mms_confirm .form-control {
  display: inline;
  font-weight: 600;
  font-size: 1.2rem;
}
.mms_confirm .form-label {
  margin-right: 4px;
  font-size: 0.9rem;
}

.mms_msg {
  margin-top: 20px;
  margin-bottom: 20px;
  background: #fff;
}

.mms_msg .alignright {
  float: right;
}
.mms_msg .alignleft {
  float: left;
}
.msg_to_list {

}

/* --------------- mms_options  ---------------- */
.form-table th {
  width: 25%;
  line-height: 1;
}

 .mms_options p.submit {
  margin: 0;
  padding: 0;
}

.mms_fieldset.mms_options {
  margin-top: 0px;
  padding-top: 10px;
  border-radius: 0 ;
}

/* --------------- session_msg ---------------- */
.session_msg {
  margin-left: 2em;
  text-align: right;
}
.session_msg p {
  margin-bottom: 0;
  font-style: italic;
  color: #DC3545;
}

.feedback_msg {
  margin-left: 2em;
  text-align: right;
  font-style: italic;
  color: #DC3545;
}

/* --------------- dropdown_msg  ---------------- */
.dd_msg {
    display: block;
    /* display: none; /* Initially hidden ? */
    position: absolute; /* Absolute positioning to remove it from the document flow */
    color: white;
    background: #937e57;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    margin-left: 10px;
    z-index: 1000;
    width: max-content; 
    overflow-y: auto;
}
.dd_msg a {
   color: black;
}
.dd_msg .btn-outline-secondary {
  color: black;
  border-color: black;
}
@media (max-width: 768px) {
  .dd_msg {
    width: 100% !important; /* Override width on small screens */
  }
}
.dd_msg_head {
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding: 5px 10px;
}
.dd_msg_head i {
    margin-left: 5px;
}
.dd_msg_form {
  color: #323232;
  background: transparent;
}
.close_btn {
    position: absolute;
    bottom: 1px;
    right: 3px;
/*    background: transparent;*/
/*    border: none;*/
  z-index: 1001;
/*  border: solid 1px #ddd;*/
  border-radius: 5px;
  width: 24px;
  aspect-ratio: 1 / 1;
/*  background-color: #937e57;*/
/*  background-color: rgba(147, 126, 87, 0.5);*/
    font-size: 1rem;
    cursor: pointer;
    color: #000; 
    z-index: 1001;
  font-weight: 400;
  text-align: center;
}

.close_btn:hover {
    color: red; 
}

/* --------------- accordion  ---------------- */

.accordion {
  --bs-accordion-btn-padding-y: 0.5rem;
  --bs-accordion-active-color: #fff;
  --bs-accordion-active-bg: #937e57;
}
.accordion-button:not(.collapsed) {
  color: #fff;
}
/* mms_accordion() rendered inside wp-admin (first hit by mms_message_create()'s
   "Save as reusable Template" accordion - an admin-menu screen, unlike most
   mms_accordion() call sites which are front-end only) picks up conflicting
   rules for the exact class names `.accordion` / `.accordion-header` -
   confirmed in DevTools as a fixed height/line-height of 46px, its own
   border/box-shadow, and a left-aligned chevron via background-image +
   padding-left. Traced as far as "<inline stylesheet>" with ~900 rules and no
   source file DevTools can name - some script inserts a <style> tag at
   runtime rather than this coming from an enqueued CSS file, so there's no
   stylesheet to identify or reason about load order for. Rather than chase
   that further, mms_accordion() now adds its own "mms_accordian" class
   (includes/mms_accordion.php) purely so this reset can scope to markup we
   control instead of guessing at the interference's origin or reach. Any
   future mms_accordion() usage gets this automatically. !important because
   we have no way to know whether the injected stylesheet runs before or
   after this one. */
.mms_accordian .accordion-header {
  height: auto !important;
  line-height: normal !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  background-image: none !important;
  cursor: auto !important;
}
.mms_accordian .accordion-button {
  font-size: 1rem !important;
  line-height: 1.3 !important;
}
.AttendedRec0 {
  background-color: rgba(245, 245, 245, 0.5);
}
.TranRec0 {
  background-color: rgba(245, 245, 245, 0.5);
}
.section h2.accordion-header {
  margin-bottom: 2px;
}
/* --------------- Transactions  ---------------- */

.doc_head .mms_display_fields .form-control {
  padding: .1rem .75rem;
}

@media (max-width: 576px) { /* Small screens */
    .doc_head .table-responsive td {
        display: block;
        width: 100%;
    }
}

div.transaction_view {
  margin-top: 0px;
  margin-bottom: 20px;
  padding: 25px 15px 15px;
  border: 1px solid #a2a2a2;
  /*   border-radius: 25px;*/
  border-radius: 2.4rem;
  box-shadow: rgba(187, 187, 187, 1) 10px 10px 5px -1px;
  background-color: white;
}
#tran_title .form-control:disabled {
  font-size: 1.4em;
}
#tran_title .col-md-5 div {
  width:100%;
}

#tran_body .tran_DocName.form-control {
  font-size: 2em;
}
.tran_DocName {
  font-size: 2em;
  padding: 5px 20px;
  color: #576C93;
  /* blue complimentary */
}
.mms_display_fields .form-control.tran_DocName {
  width: auto;
}
#tran_body .tran_Tak {
  font-size: 1.6em;
  margin-top: 5px;
}
.mms_display_fields .form-control.tran_Tak {
  width: 100%;
}
#tran_title label.form-label[for="BranchID"] {
    width: auto;
}
/* DocNo's label carries the ColourTT background chip (transaction.php) -
   needs real padding and no text wrap, but its normal ~70px box is too
   narrow for that once a background is added, and simply widening it
   (width:auto, like BranchID above) pushes/wraps tran_DocNo's input since
   the two share one narrow col-md-3 column. Taking the label out of flow
   instead - anchored to the left edge of the input (which stays put at
   right:75%, matching .mms_display_fields .form-control's own width:75%
   above) - lets it grow purely to the left over the Tak column's usual
   slack space, so the input's position/width are never affected and it
   can never wrap. position:relative on every .mb-3 here is a no-op for
   the other fields (DocName/Tak) - it only matters as the anchor for this
   one absolutely-positioned label. */
#tran_title .mb-3 {
    position: relative;
}
#tran_title label.form-label[for="DocNo"] {
    position: absolute;
    top: 0;
    right: 75%;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    padding: 5px;
    text-align: right;
    z-index: 1;
}
#transaction_edit .mms_display_fields .form-control.tran_Tak {
    width: 85%;
 }
#tran_body #Description.form-control {
  font-size: 0.875em;
}
.mms_display_fields .form-control.tran_VatCode {
  width: 33px;
  padding-left: 5px;
}
#tran_body .form-control.tran_VatAmount:disabled,
.mms_display_fields .form-control.tran_VatAmount:disabled {
  width: 68px;
}
#tran_body .form-control.tran_Total:disabled,
#tran_body .form-control.tran_VatAmount:disabled,
.mms_display_fields .form-control.tran_VatAmount:disabled {
  font-size: 1em;
}

#tran_body .fs-7.form-control:disabled,
.mms_display_fields .fs-7.form-control, 
.fs-7 {
  font-size: 0.875rem; /* 14px */
}

.mms_column_fields input.form-control {
  max-width: 120px;
  text-align: right;
}
.mms_small_text,
.mms_small_text .form-control,
#tran_body .mms_small_text .form-control {
  font-size: 0.7em;
}
.subsHead,
.tran_balhead {
  margin-left: 30px;
  font-size: 0.8em;
  font-style: italic;
  white-space: nowrap  !important ;
}
.tran_balhead.negative {
  color: #DC3545;
}
.tran_balhead.positive {
  color: #0D6EFD;
}
.tran_bal {
  margin-left: 25px;
  color: #DC3545;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}

.activity_invoice .mms_display_fields .mms_display_title .form-label {
  display:block;
  width: auto;
  text-align: left;
}

.activity_invoice .mms_display_fields .mms_display_title .form-control {
  width: auto;
}

.acc2inv .form-check {
  display: flex;
  align-items: center; /* vertical center */
}

.acc2inv .form-check input[type="checkbox"] {
  margin-right: 8px; 
}
.acc2inv {
  font-size: 0.8em;
}
.acc2inv .form-control{
  font-size: 1em;
}
table.acc2inv  {
  width: 98%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
}
table.acc2inv tr {
  background-color: #ffffff;
  transition: 0.5s;
}
 table.acc2inv tr:nth-child(even) {
  background-color: #f1f1f1;
}
.form-check .form-check-input.select-all {
  margin-left: 1px;
}

.mms_display_fields .field-long-lable .form-label {
  width: 70%;
  max-width: 70%;
}
.mms_display_fields .field-long-lable .form-control {
  width: 15%;
}
@media (max-width: 768px) {
  .mms_display_fields .field-long-lable .form-control {
    width: 25%;
  }
}
table.tranlist {
  width: 100%;
}
/* --------------- Activity  ---------------- */
#ActivityDocs .fldLabel {
  padding-left: 0px;
}
#AttendedList .fldLabel {
  padding-left: 0px;
}
.attendedactivelist_dte section {
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.25); /* Black with 25% opacity */
}


/* --------------- attachments  ---------------- */

.attachment_container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* Allows images to wrap to the next line if there's not enough space */
  gap: 10px;
  /* Space between images */
/*  padding: 16px;*/
  /* Space on the outer edge of the container */
  padding-bottom: 10px;
}
.attachment_container_edit {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
}
.att_block {
  display: block !important; 
}

.attachment_container_edit img,
.attachment_container img {
  max-width: 100%;
  /* Ensure images do not overflow the container */
  height: auto;
  margin: 0 auto;
  /* Center images horizontally */
  display: block;
}

.attachment_container_edit legend,
.attachment_container legend {
  /*width: 80%;
  max-width: 80%;*/
  font-size: 1em;
}
img.mms_idphoto {
  max-width: 120px;
}

.attachments_displayHead div {
  display:inline-flex;
  margin-right: 10px;
}

.dd_msg_head.msg_stable,
.dd_msg_head.att_head {
  font-size: 0.8em;
  margin-left: 5px;
  margin-top: 5px; 
  color: black;
  background-color: #FCE5BA !important;
  border: 1px solid #937e57;
  border-radius: 5px;
}

.dd_msg_head.msg_stable {
  font-size: 1em;
  margin-bottom: -10px;
}

.dd_msg.att_head {
/*  max-width: 90vw;*/
  position: relative;
  color: #444242;
  background: transparent;
  box-shadow: none;
  margin-top: 5px;
  margin-left: 10px;
  padding-top: 0;
}

.dd_msg.msg_stable {
/*  max-width: 90vw;*/
  position: relative;
  color: #444242;
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-top: 0;
  padding-top: 0;
}

.message-box {
  font-style: italic;
  color: #DC3545;
}

.mi_IdAddress .att_label {
  font-size: 0.7em;
  font-weight: 300;
}
.ae_ActDoc div.att_label {
  display: block;
  width: 100%;
  text-align: right !important;
  font-style: italic;
  margin-bottom: 0px !important;
}
/*div.te_TranDoc*/
.raiseBox {
  border: solid 1px black;
  box-shadow: rgba(187, 187, 187, 1) 10px 10px 5px -1px;
  padding: 10px;
  margin-top: 10px;
  border-radius: var(--bs-border-radius);
}

.dd_msg.raiseBox {
color: var(--bs-body-color);
background: var(--bs-body-bg);
}

.box_abs {
  position: absolute;
  right: 20px;
  max-width: 500px;
  z-index: 100;
}

@media (max-width: 768px) {
  .box_abs {
    max-width: 95%;
  }
}
.file-upload-form .but {
  margin-right: 20px;
}
.close_btn.att_head {
}
.close_btn.att_det {
  bottom: 8px;
  right: 8px;
  top: auto;
}

/* --------------- BranchMap  ---------------- */
.BranchMap {
  width: 600px;
  height: 450px;
}
@media (max-width: 1060px) {
  .BranchMap {
    width: 100%;
  }
}
/* --------------- OfficeBearer  ---------------- */
fieldset.OfficeBearer {
  /* margin-left:15px; */
  margin-bottom: 10px;
  border: 1px solid;
  padding: 8px;
  border-radius: 5px;
}
fieldset.OfficeBearer>legend:nth-child(1)>span {
  display: block;
}
.OfficeBearer legend {
  width: auto;
  font-weight: 500;
}
.OfficeBearer span {
  font-weight: 600;
  font-size: 1.2em;
}
.OfficeBearer.Child0 {
  /* float: Left; */
}
.OfficeBearer.Child1 {
  /* float: right; */
}
.OfficeBearer .ImageControl {
  float: right;
}
/* --------------- mtypes  ---------------- */

.mtype-slick {
  padding-left: 30px;
  padding-right: 30px;
  margin-left: 30px;
  margin-right: 30px;
}
/* Slick's own CSS doesn't equalize slide heights (float-based layout, not
   flex) - make the track a flex row and cascade height:100% down through
   every wrapper so all cards in view match the tallest one, regardless of
   how long each MTypeDescription excerpt is. */
.mtype-slick .slick-track {
  display: flex;
}
.mtype-slick .slick-slide {
  height: auto;
}
.mtype-slick .carousel-slider,
.mtype-slick-captions,
.mtype-slick-captions .card-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.mtype-slick .slick-active .card-box {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 3px;
  margin-right: 6px;
  padding: 25px 15px 15px;
  border: 1px solid #a2a2a2;
  border-radius: 2.4rem;
  box-shadow: rgba(187, 187, 187, 1) 10px 10px 5px -1px;
  background-color: white;
}
.mtype-slick .card-box:hover {
  color: var(--white-color);
  background-color: var(--link-hover-color);
}
/* Push the price/CTA to the bottom of every card, regardless of how much
   room the (now flexible-height) description above it takes up. */
.mtype-slick .card-box .b-button {
  margin-top: auto;
}
.b-button {
  align-items: center;
  border: none;
  display: flex;
  justify-content: center;
  margin-top: 5px;
  xpadding: 0 4rem;
  fill: var(--link-hover-color);
  background: var(--gray-color);
  color: var(--site-color);
  border-radius: 2.4rem;
  height: 3.5rem;
}
/* .dd_msg is position:absolute with no positioned ancestor of its own, so it
   was anchoring to Slick's own .slick-track (position:relative in slick.css)
   - which spans every slide combined, not just the one card that opened it.
   Giving .mtype-slick-captions position:relative anchors it to that single
   card instead.
   NOTE: position:fixed was tried for a small-screen variant of this, but
   .slick-track also carries transform:translate3d(...) (for the slide
   animation), and a transformed ancestor becomes the containing block for
   fixed-positioned descendants too - so a "fixed" popup here computed its
   position against the whole (very wide, all-slides) track instead of the
   viewport. Confirmed live: it rendered thousands of pixels wide. Staying
   with position:absolute (relative to this one card) avoids that trap - on
   a real narrow phone the card itself is nearly full viewport width
   (slidesToShow:1), so anchoring to the card is effectively anchoring to
   the screen. Widened below 576px since the card itself is wider there. */
.mtype-slick-captions {
  position: relative;
}
.mtype-slick-captions div.dd_msg {
  left: auto;
  right: 0;
  width: 320px;
  max-width: 90vw;
  top: 50px;
  max-height: 60vh;
  overflow: auto;
  padding: 15px;
  text-align: left;
}
@media (max-width: 576px) {
  .mtype-slick-captions div.dd_msg {
    width: 88vw;
    max-width: 88vw;
  }
}

.mtype-slick-captions div.dd_msg .close_btn {
  top: 5px;
  bottom: auto;
}
.subs-list H3 {
padding-left: 40px;
}
.mtype-nav-but {
  display: block;
  width: 300px;
  float: left;
  margin-left: 20px;
}

/* --------------- spinner  ---------------- */

.spinner {
    display: none; /* Initially hidden */
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 10px auto; /* Center the spinner */
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/* ---------------   ---------------- */
#pp_enter {
    width: 97%px;
}
/* ---------------MCards & Certs   ---------------- */

.mms_card p {
  margin-bottom: 0;
}
.card-info {
  font-size: 1rem;
  font-weight: 400;
}
.mms_card .mms_org_logo {
  max-width: 100px;
}
img.mms_logo_mcard {
  max-width: 26mm;
  max-height: 26mm;
}

img.mms_cert_logo {
  max-width: 32mm;
  max-height: 32mm;
}

@media print {
    body {
        margin: 0;
        padding: 0;
    }
    .text-center.mt-3, 
    .btn, 
    .d-print-none {
        display: none !important; 
    }
}
.mms_card {
  width: 85mm;
  height: 108mm; /* Double height for front & back */
  /*width: 3.375in;
  height: 4.25in; */
  padding: 5px;
  padding-top: 0px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 10pt;
  overflow: hidden;
  position: relative;
}
.mms_card .card-header {
  width: 100%;
  padding: 2px;

}
.mms_card h5 {
  font-size: 10pt;
  margin: 0;
  margin-bottom: 3px; 
}
.mms_card .card-body ,
.mms_cert .card-body {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
.mms_card .card-section {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; 
  align-items: flex-start;
  padding: 5px ; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}
.mms_card h4 {
  font-size: 12pt;
  margin-bottom: 3px; 
}
.mms_card p {
  margin: 1px 0; 
  font-size: 10pt;
  line-height: 0.9; 
}
.mms_cert p {
  margin: 1px 0; 
  font-size: 10pt;
  line-height: 1.1; 
}
.card-logos {
  display: flex;
  justify-content: center; 
  padding-top: 3px ; 
}
.mms_card .card-section2 {
  height: 52%;
  padding-top: 21px ; 
  padding-bottom: 4px ; 
  line-height: 0.9; 
}
.fold-line {
  position: absolute;
  top: 50%;
  width: 100%;
  border-top: 2px dashed black; 
}

.cert-name {
  width: 100%;
  font-weight: bold;
  font-size: 18pt;
  text-transform: uppercase;
  text-align: center;
  border-top: solid 3px black;
  border-bottom: solid 3px black;
  font-style: normal;
}
.cert-text-bold {
  font-weight: bold;
  font-size: 16pt;
  text-align: center;
}


/* Main certificate wrapper */
.certificate-wrapper {
  @media print {
    width: 210mm;
    padding: 5mm;
    box-sizing: border-box;
  }
}
.certificate-wrapper {
    width: 210mm;
    padding: 5mm;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

/* ===== PRINT STYLES ===== */
@media print {

    @page {
      size: landscape;
    }
    body {
      width: 100%;
    }
    .force-page-break {
          break-before: page; /* Modern browsers */
          page-break-before: always; /* Older browsers */
    }
   
    /* Remove Bootstrap container constraints */
    .container,
    .container-fluid {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Prevent responsive columns from stacking */
    .row {
        flex-wrap: nowrap !important;
    }

    /* Hide non-print elements */
    .no-print {
        display: none !important;
    }
    body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    }
}

@media print {

    /* Hide WP admin UI */
    #adminmenumain,
    #adminmenuwrap,
    #adminmenuback,
    #wpadminbar,
    #screen-meta-links,
    #screen-meta {
        display: none !important;
    }
    /*#wpfooter { display: none !important; }*/
    
    /* Remove default admin layout offsets */
    #wpcontent,
    #wpbody-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html.wp-toolbar {
        padding-top: 0 !important;
    }

    /* Make report full width and centered */
    .wrap,
    .report-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 20px !important;
    }

    /* A4 Landscape setup */
    @page {
        size: A4 landscape;
        margin: 15mm;
    }

    body {
        background: #fff !important;
    }
}

/* --------------- statement  ---------------- */
.mms_doc_name {
  font-size: 1.5em;
  border: solid 0px black;
  border-radius: 8px;
  margin-top: 10px;
  background-color: rgba(147, 126, 87, 0.1);
  text-align: right;
}
.mms_doc_name span{
  font-size: 0.85em;
}

.statement_view {
  @media print {
    @page {
      size: landscape;
    }
    body {
      width: 100%;
    }
  }
}

@media print {
  .bankDetails {
    margin-top: 30px;
  }
  .bankDetails legend {
    border: solid 1px black;
  }
  img.header_logo {
    width: auto;
    max-width: auto;
    max-height: 85px;
  }
}

/* --------------- join   ---------------- */
.joinhead {
  padding-left: 80px;
  padding-bottom: 20px;
  font-size: 1.2em;
}
.joinfoot {
  padding-left: 80px;
  padding-top: 20px;
  font-size: 1.2em;
}
.joinhead ul, 
.joinfoot ul {
  list-style-type: disc; /* Solid circle bullet */
  list-style-position: outside;
  padding-left: 20px; /* Space for bullets */
}
.joinhead li, 
.joinfoot li {
  list-style-type: disc; /* Solid circle bullet */
  padding-bottom: 10px;
  padding-left: 20px; /* Adjust spacing between bullet and text */
  text-indent: -20px; /* Hanging indent effect */
  font-size: 1em;
}

.join_add .dd_msg.msg_stable {
    background: #FCE5BA;
    padding: 15px;
}
#account_info .checkbox,
.account_edit .checkbox,
.member_add .checkbox {
  font-size: 0.8em;
  margin-left: 50px;
}
#account_info .form-check-label,
.account_edit .form-check-label,
.member_add .form-check-label {
  font-size: 0.8em;
/*  font-weight: 300;*/
} 

.child-inline > div {
    display: inline-block;
}
/* ---------------   ---------------- */
[action~="tools.php?page=wp-crontrol"] .table-responsive {
  overflow-x: unset !important;
}
/* ---------------   ---------------- */
/* mms_branches_grid() / mms_events_grid() "more" button */
.moreBtn {
  text-align: right;
  padding-right: 20px;
}
/* ---------------   ---------------- */

/* ============================================================
   Card style shared by mms_branches_grid(), mms_events_grid() and
   mms_events_archive() - <div class="hbs-inner"><a><h3>...</h3></a><p>...</p></div>.
   Plugin-owned default: any active theme loads its own stylesheet after this
   one (standard WP enqueue order - plugins before themes), so overriding any
   of this, or just the --site-color/--white-color/--heading-font-family
   custom properties a theme defines, is a normal theme-side stylesheet edit,
   nothing plugin-specific needed.
   ============================================================ */
.hbs-inner h3,
h3.hbs-inner {
  position: relative;
  width: 100%;
  background-color: var(--site-color, #937e57);
  min-height: 40px;
  text-align: center;
  font-size: 20px;
  color: var(--white-color, #fff);
  font-weight: 500;
  font-family: var(--heading-font-family, inherit);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 3px;
  padding: 5px;
  padding-right: 28px; /* clears the chevron (h3:after) so a long title doesn't slide under it */
}
.hbs-inner h3:after,
h3.hbs-inner:after {
  content: '';
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='rightarrow' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 514.6 474.7' enable-background='new 0 0 514.6 474.7' xml:space='preserve'%3E%3Cpath fill='%23FFFFFF' d='M0,0l148.3,238L0,474.7h130.8L275.4,238L129.6,0H0z M238,0l149.5,238L239.2,474.7h129.6L514.6,238L368.8,0 H238z'/%3E%3C/svg%3E");
  position: absolute;
  right: 9px;
  width: 17px;
  height: 15px;
  background-size: cover;
}
.hbs-inner p {
  font-size: 14px;
  line-height: 24px;
  color: var(--body-content-color, #3c3c3c);
}
.hbs-inner p a {
  color: var(--site-color, #937e57);
}
.hbs-inner p a:hover {
  text-decoration: underline;
}

/* ============================================================
   mms_events_archive() - results + filter sidebar. Not scoped under any
   theme-supplied ancestor class, so a theme only has to echo the return
   value (see mms_events_archive()'s own docblock) - no required wrapper markup.
   ============================================================ */
.event-archive-toggle {
  margin-bottom: 12px;
}
.event-archive-toggle a {
  color: var(--link-hover-color, #937e57);
}
.event-category-group + .event-category-group {
  margin-top: 36px;
}
.event-category-heading {
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}
.event-category-filter ul li {
  margin-bottom: 6px;
}
.event-category-filter ul li a {
  color: var(--link-color, #1c1b1b);
}
.event-category-filter ul li a.active {
  color: var(--link-hover-color, #937e57);
  font-weight: 700;
}
.event-branch-filter {
  margin-top: 20px;
}
.event-branch-filter select {
  width: 100%;
}
.event-card {
  margin-bottom: 28px;
}
.event-date {
  font-weight: 700;
  color: var(--heading-font-color, #282828);
  margin: 4px 0 8px;
}
.event-branch,
.event-category {
  font-weight: 400;
  color: var(--link-hover-color, #937e57);
}
.event-date time + span:before,
.event-date span + span:before {
  content: ' \2013 '; /* en dash separator between date / branch / category - only between whichever of the three are actually present */
}
.event-past-badge {
  display: inline-block;
  background: #767676;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 6px;
}
.mms-events-sidebar-inner {
  background-color: #eee;
  padding: 15px;
}

/* ============================================================
   [MemberTypes] shortcode - mms_membertypes_table_shortcode()
   (includes/mms_shortcode_membertypes.php)
   ============================================================ */
.mms-membertypes-table-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
}
.mms-membertypes-table {
  width: 100%;
  border-collapse: collapse;
}
.mms-membertypes-table th,
.mms-membertypes-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
  vertical-align: top;
}
.mms-membertypes-table thead th {
  background-color: #eee;
  color: var(--heading-font-color, #282828);
  font-weight: 700;
}
.mms-membertypes-table tbody tr:hover {
  background-color: #f7f7f7;
}
.mms-membertypes-table .mms-mt-code {
  white-space: nowrap;
  color: var(--link-hover-color, #937e57);
  font-weight: 700;
}
.mms-membertypes-table .mms-mt-rate,
.mms-membertypes-table .mms-mt-people {
  white-space: nowrap;
  text-align: right;
}
.mms-membertypes-table .mms-mt-desc {
  min-width: 220px;
}

/* ---------------   ---------------- */
/* ---------------   ---------------- */

/* ------------  ---------------- */
/* ------------  ---------------- */