/* Master upload classes for profile pic or org must wrap with these classes */
.MainGroup.applications a{
  font-weight: var(--regular);
}



.MprofileUPL {
  text-align: center;
  display: inline-block;
  position: relative;

}
.MprofileUPL.mss-upload-file, .MprofileUPL.mss-upload-img {
  border:none;
  background: transparent;
  padding: 0;
  margin: 0 auto;
}

.MprofileUPL .mss-upload-filecard {
  position: absolute;
  background: var(--accentB);
  width: 27px;
  height: 27px;
  display: block;
  border-radius: 50%;
  top: 1px;
  padding: 0;
  left: -8px;
  border: none;
}
/* adjusts the size of image for Avatar upload  */
 .MprofileUPL .profile-image-mask {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--primary);
}
.CCinformation .MprofileUPL .profile-image-mask {
  width: 200px;
  height: 200px;
}
.MprofileUPL .mss-icon.mss-icon-required.mss-icon-required-gray {
  display: none;
}
.MprofileUPL .profile-image-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crops to fill */
  object-position: center;
  display: block;
}
  
.MprofileUPL .mss-icon-trash-red::before {
  color: white;
  right: 1px;
  bottom: unset;
  top: 4px;
}


.MprofileUPL .mss-filecard-filename, .MfileUPL .mss-icon.mss-icon-document {
  display: none;
}

.MprofileUPL.active .avatarBTNup{
  display:none
}
.MprofileUPL .mss-icon.mss-icon-document{
  display: none;
}
.MprofileUPL .avatarBTNup {
  position: absolute;
  left: -8px;
  top: 3px;
  font-size: .7rem;
  width: 25px;
  height: 25px;
  padding: 3.5px 0;
  cursor: pointer;
}
.CCinformation .MprofileUPL .mss-upload-filecard{
  left: 9px;
}
.CCinformation .MprofileUPL .avatarBTNup {
  left: 8px;
}
/* Master upload classes for profile pic or org */

.ap-form-checkbox {
  width: unset!important;
}
.app-wrapper {
  border: 1px solid var(--accentD);
}
/* unused icons dev express */

.dx-tag-remove-button::after, .dx-tag-remove-button::before {
  position: absolute;
  top: 8%;
  content: "";
  transform: rotate(45deg);
  inset-inline-end: 0px;
  margin-top: -5px;
  width: 3px;
  height: 11px;
  background: var(--accentD);
}
.dx-tag-remove-button::after {
  inset-inline-end: -4px;
  margin-top: -1px;
  width: 11px;
  height: 3px;
}
.dx-icon.dx-icon-expandall {
  display: none!important;
}
.dx-show-clear-button .dx-icon-clear {
  background: var(--accentD);
  position: absolute;
  top: 19px;
  margin-top: -17px;
  padding: 8px;
  width: 34px;
  height: 34px;
  background-position: 8px 8px;
  background-size: 18px 18px;
  font-size: 18px;
  text-align: center;
  line-height: 18px;
}
.mss-modal-step_content .dropdown.bootstrap-select.mss-form-select{
  width: 100%;
}
.mss-modal-step_content .row {
  margin-bottom: 1rem;
}
.mss-modal-box_deny .modal-selector .dropdown.bootstrap-select.mss-form-select {
width: 100%;
}
.mss-modal-step_content .btn, .mss-modal-box_deny .btn {
  padding: 1rem;
}
.mss-modal-btn-container input {
  width: 49.5%;
}
.admin-main .mss-form-checkbox {
width: unset;
}
.mss-modal-btn-container{
  margin-top: 1rem;
} 
/* adjusted for create page reports */

h2.mss-panel-title {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--accentD);
  font-weight: var(--Bold);
  padding-bottom: .5rem;
}

.mss-form-textarea{
  width: 100%;
}

.mss-modal-step, .mss-modal-box_deny{
  background: white;
  padding: 1rem;
}
/* control login box in admin portal */

.inUse #frmLoginBox .mss-panel-box {
  right: 0;
  left:unset;
}
/* images/media */
.admin-main img,
.admin-main svg,
.admin-main video,
.admin-main iframe { max-width: 100%; height: auto; }
.admin-main .dx-button, .admin-main .dx-texteditor.dx-editor-outlined, .admin-main .tox-tinymce{
  border-radius:0;
  border: 1px solid var(--accentD);
}
/* tables and code blocks */
.admin-main pre, .admin-main code { white-space: pre-wrap; word-wrap: break-word; }

/* long URLs / unbroken strings */
.admin-main { overflow-wrap: anywhere; word-break: break-word; }


/* avoid content wider than its container */
*, *::before, *::after { box-sizing: border-box; }

html, body { width: 100%; max-width: 100%; }

/* last-resort guard on pages while debugging */
body { overflow-x: hidden; }
/* CSS for Admin Portal */

.mss-mobile-navmenu-toggle.ui-helper-hidden, .mss-topmenu-home {
  display: none;
}
/* .mss-topmenu-dropdown.collapse { display: none; }
.mss-topmenu-dropdown.show { display: block; } */

/* ---Layout / Sidebar ---*/
.main-header.admin-header {
  position: fixed;
  top: 0; left: 0;
  width: 321px;
  max-width:100%;
  height: 100vh;
  box-sizing: border-box;  /* include padding/border in the 321px */
  overflow-y: auto;
  overflow-x: hidden;      /* no horizontal scroll on sidebar */
  background-color: var(--accentC);
}

/* Bulk unpublished modal */
.form-group.notes label {
  font-size: .7rem;
}

.dialog-message p {
  margin-bottom: 0;
}
.bulk-unpublish-dialog .check-box-wrapper label {
  display: inline-block;
}
.bulk-unpublish-dialog .form-group label {
  font-weight: var(--regular);
  margin-bottom: 1rem;
}
.bulk-unpublish-dialog .dx-texteditor-input-container {
  border: 1px solid var(--accentD);
}
.ui-dialog-titlebar-close, .ui-dialog-titlebar-close:hover {
  color: transparent!important;
}


/* Group admin edit modal */

.GroupInfo-Main .input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toggle-selection:first-child {
  border-top: 1px solid var(--accentD);
}
.toggle-selection {
  border-bottom: 1px solid var(--accentD);
}
.mss-toggle-button-list .mss-content-item-link:before{
  right: -11px;
  top: 15px;
  color: var(--accentC);
}
.mss-toggle-button-list {
  margin-right: 1rem;
}
.ui-helper-hidden {
  margin-left: 1rem;
}
.mss-form-textarea {
  min-height: 84px;
}

.mss-form-action-btn-container {
  justify-content: left;
  display: flex;
  margin: 1rem 0;
}
.mss-form-action-btn-container input {
  max-width: 31.7%;
}
.mss-toggle-content {
  width: 100%;
}


.mss-toggle-button-list li {
  list-style-type: none;
  margin: 0;
}
.MainGroup .main-grid .mss-btn-osacblue {
  width: 100%;
  background-color: var(--primary);
  color: white;
}
.MainGroup .main-grid .mss-btn-osacblue .fa-solid{
  color: white;
}
.MainGroup .main-grid .mss-btn-osacblue:hover{
  background-color: var(--secondary);
}
.modal-selector button {
  background: var(--bgA);
}
.modal-selector {
  margin-bottom: 1rem;
}
.DelMemSec{
  position: relative;
 
}
/* adjust button size users area admin actions */
.admin-actions-section .btn{
  padding: .5rem 1rem;
}

.admin-actions-section {
  margin-bottom: 2rem;
}

.create .association-wrapper .mss-form-select {
  height: 150px;
}
.association-wrapper {
  max-width: 800px;
  margin: 2rem auto auto auto;
  background-color: var(--bgA);
  padding: 1rem;
}

/* Chrome, Edge, Safari */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
}

/* Hide native icon when using custom calendar icon */
input.Calendar-icon[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}
input.Calendar-icon[type="date"]::-moz-calendar-picker-indicator {
  opacity: 0;
}
.form-group-date {
  position: absolute;
  width: 393px;
  padding: 1rem;
  z-index: 1;
  box-shadow: 4px 5px 7px #00000057;
  background: var(--accentA);
  flex-wrap: nowrap;
  justify-content: space-between;
  top: 3.3rem;
  border: 1px solid #AC7225;
}
.form-date-field:first-child::before {
  border-right: 1px solid var(--primary);
  content: "";
  position: absolute;
  height: 75px;
  width: 1px;
  right: -29px;
  top: -6px;
}


.date-info .fa-chevron-down {
  font-size: 14px;
}
.date-info.btn {
  padding: 10px 14px;
}

.dateBTN-Wrapper {
  position: relative;
  margin-right: .5rem;

}
.form-date-field label {
  display: block;
  font-size: .7rem;
  color: var(--primary);
  margin-bottom: .2rem;
}
.form-date-field {
  position: relative;
}
.form-date-field .calendar-fa {
  right: 1px;
  top: 22px;
  background: var(--primary);
  padding: 11px 0px 1px 0px;
  height: 38px;
  width: 42px;
  position: absolute;
  cursor: pointer;
  pointer-events: auto;
  color: var(--White);
}
.form-date-field .calendar-fa:hover{
  background: var(--secondary);
}
input.Calendar-icon[type="date"] {
  padding-right: 1.3rem;
}
.form-group-input-search {
  position: relative;
}
.search-Icon {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  top: 12px;
}
.search-results-container .border-control{
  padding-bottom: 1rem;
}
/* .search-results-container .card-wrapper:hover {
  background: var(--bgC);
} */
 /* for all save cancel */
.button-modal {
  position: fixed;
  top: 20rem;
  right: 0;
  z-index: 4;
  
}
.profile-actions.btnActiveModal {
  margin-top: 3rem;
  background: #fffffff0;
  padding: 1rem;
  border: 1px solid var(--accentC);
  margin-right: 1rem;
}
.activateBtn {
  position: absolute;
  right: 1rem;
  top: 0;
  border: none;
  color: var(--accentA);
  font-size: 1.5rem;
  background: transparent;
}
.activateBtn i {
  transition: transform 180ms ease;
  display: inline-block;
}
.button-modal.is-open .activateBtn i {
  transform: rotate(180deg);
}
.activateBtn:hover{
  color: var(--secondary);
}

/* when input is a button and want to use arrow groups profile. */
.profile-actions {
  display: flex;
  justify-content: right;
  gap: 10px;
}

.arrow-link.BN {
  background: transparent;
  border: none;
}
.arrow-link{
   position: relative;
    display: inline-flex;
    align-items: center;
}
.mss-form-action-btn-container .arrow-link::before{
  top: 6px;
}
.mss-form-action-btn-container .arrow-link input {
  max-width: 100%;
}
.arrow-link input{
  width: 100%;
  background: transparent;
  border: transparent;
  text-align: left;
}
.mss-form-action-btn-container[data-action="save"] .arrow-link {
    display: none;            /* hide wrapper when edit mode is active */
}
.DelMemSec .dx-button-mode-outlined.dx-button-danger, .DelMemSec .dx-button-mode-outlined.dx-button-danger.dx-state-focused {
  border-color: transparent;
  margin-left: 1rem;
  background-color: var(--accentB);
  padding: .5rem 1rem;
  position: absolute;
  right: 11px;
  top: 3px;
  color: white;
}
.DelMemSec .dx-button-mode-outlined.dx-button-danger:hover {
  background-color: var(--error);
}

.MainGroup .dx-button-mode-outlined.dx-button-danger .dx-button-content{
  background-color: transparent;
  padding: 0;
}
.mss-modal-box .bootstrap-select .dropdown-menu li{
  list-style-type: none;
  margin-left: 0;
}
.Modal-title {
  font-weight: bold;
  font-size: 1.2rem;
  width: 100%;
  border-bottom: 1px solid var(--accentC);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
}
.mss-form-disable_editable{
  text-align: center;
  margin: 1rem  0;
}
.mss-form-disable_editable input {
  display: inline-block;
  width: 26%;

}
.mss-modal-box .dropdown-item.active, .mss-modal-box .dropdown-item:active , .dropdown-item.active span.text{
  color: white;
  text-decoration: none;
  background-color: var(--accentC);
}
.ui-widget-header {
  border: none;
  background: var(--accentC);
  position: relative;
  border-radius: 0 !important;
  overflow: hidden;
}
.ui-dialog-titlebar-close{
  position: relative;
  padding: .5rem;
  border: none;
  background: transparent;
}
.ui-widget-content {
  border: none;
  background: transparent;
  color: unset;
}
.mss-form-textarea{
  padding: 1rem;
}
.btn_green:hover, .mss-btn-osacgreen:hover{
background: #004A57;
color: white;
border: 1px solid #004A57;
}
.btn_green, .mss-btn-osacgreen {
background: #056979;
color: white;
border: 1px solid #056979;
}
.mss-btn-osacred-inverse {
border: 1px solid #056979;
background: transparent;
}
.ui-dialog-titlebar-close::before {
  position: absolute;
  content: "\f057";
  height: 25px;
  width: 25px;
  background-repeat: no-repeat;
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  left: 0;
  bottom: 1px;
  color: #004A57;
  top:4px;
}

.UserForm .ui-dialog-titlebar-close:hover, .UserForm .ui-dialog-titlebar-close{
  color: transparent;
  background: transparent;
}
.ui-dialog-titlebar-close:hover::before,.ui-dialog-titlebar-close:hover {
  color: white;
  background: transparent;
}
.admin-main {
  margin-left: 321px;
  width: calc(100% - 321px);  /* prevents 321px + 100% overflow */
  overflow-x: hidden;          /* belt-and-suspenders */
}

@media (max-width: 768px) {
  .main-header.admin-header {
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .admin-main { margin-left: 0; }
}

.inUse #frmLoginBox { position: absolute; right: 1rem; top: 1rem; left: unset; }
.admin-portal { margin-top: 2rem; }
.TitleCon { margin-top: 3rem; }
.mss-topmenu-parent.active { background-color: #004A57; }
.mss-dropdown-row_create-item { display: flex; }

/* ---- Accordion ---- */
.accordion-nav {
  width: 100%;
  max-width: 100%; /* was 420px */
}

.accordion-section li { 
  border-bottom: 1px solid var(--accentD);
}
.panel-inner { 
  list-style: none; 
  margin: 0; padding: 0; 
  background: #056979; }
.accordion-panel li { 
  margin: 0; 
  position: relative; 
}
.accordion-panel li a {
  display: block;
  text-decoration: none;
  color: white;
  margin: 0;
  padding: 0.9rem 1rem;
}
.accordion-panel li a:hover,
.accordion-panel li a:focus { 
  background: #004a57ba; 
  color: white; 
}
.accordion-panel li a.active { 
  background: #3F94A1; 
  color: white; 
  font-weight: 600; }

  /* Mobile */

  @media (max-width: 768px) {
    .inUse #frmLoginBox {
      right: 4rem;
    }
    .mss-topmenu-navbar-admin{
      position: unset;
    }
    .mss-topmenu-navbar-admin .mss-mobile-navmenu-toggle.menu-btn-2 {
      position: absolute;
      top: .7rem;
      right: 0;
    }
    .accordion-nav{
      display: none;
    }
  }

/* Main controls Page Tabs Portal */

.Q-links {
  margin-top: 2rem;
}
.create .btnSelect {
  background: var(--primary);
  color: white;
  padding: .5rem 0;
  border: none;
  width: 100%;
}
.btnSelect:hover {
  background: var(--secondary);
}
.tab-panel {
    display: none;
}
.mss-quicklink-container {
  border-bottom: 1px solid var(--accentC);
}
.tab-panel.active {
   display: block;
}
.mss-quicklink-container, .tab-nav, .pagetab-container,.dx-tabs-wrapper {
  display: flex;
  justify-content: center;
}
.mss-quicklink-list {
  display: flex;
  align-items: center;
}
.mss-quicklink-item {
  display: inline-flex;
  padding: 0;
  margin: 0 .5rem;
  min-width: 150px;
  position: relative;
  border: none;
  background-color: transparent;
}
.mss-quicklink-item > a {
  display: block;
  padding: .5rem 1.5rem;
  position: relative;
  color: var(--primary);
  text-decoration: none;
  text-align: center;
  width: 100%;
  z-index: 1;
}
.btn.mss-btn-osacorange-inverse {
  background: var(--accentA);
}
.btn.mss-btn-osacorange-inverse:hover {
  background: var(--accentC);
  color: white;
}
.tab-selector:before, .dx-item.dx-tab:before, .tab-buttons:before, .mss-quicklink-item:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid var(--accentC);
  border-bottom: none;
  background-color:var(--bgC);
  transform: perspective(75px) rotateX(25deg);
  -webkit-transform: perspective(75px) rotateX(25deg);
  -moz-transform: perspective(75px) rotateX(25deg);
  -ms-transform: perspective(75px) rotateX(25deg);
  -o-transform: perspective(75px) rotateX(25deg);
  z-index: -1;
  transform: -1px;
  -webkit-transform: -1px;
  -moz-transform: -1px;
  -ms-transform: -1px;
  -o-transform: -1px;
}

.tab-selector,.dx-item.dx-tab,.tab-buttons {
  margin: 0 .5rem;
  padding: .5rem 1.5rem;
  position: relative;
  border:none;
  background-color:transparent;
  min-width: 150px;
}
.mss-quicklink-item.mss-quicklink-item-active:before, .tab-buttons.active:before, .tab-selector.active:before, .dx-tabpanel-tabs-position-top > .dx-tabpanel-tabs .dx-tab-selected:before{
  background-color: var(--accentC);
}
.mss-quicklink-item.mss-quicklink-item-active > a,.tab-buttons.active, .tab-selector.active, .dx-tabpanel-tabs-position-top > .dx-tabpanel-tabs .dx-tab-selected .dx-tab-text-span{
  color: white;
}
.dx-item.dx-tab:hover:before,
.dx-item.dx-tab.dx-state-focused:focus:before,
.tab-buttons:hover:before,
.tab-buttons:focus:before,
.tab-selector:hover:before,
.tab-selector:focus:before,
.mss-quicklink-item:hover:before,
.mss-quicklink-item:focus-within:before { 
  background: #3F94A1; 
  outline: none; 
  
}

.mss-quicklink-item:hover > a,.tab-buttons:hover, .tab-selector:hover,.dx-item.dx-tab:hover .dx-tab-text-span,
.tab-buttons:focus,.dx-tabpanel-tabs-position-top > .dx-tabpanel-tabs .dx-tab-selected:focus .dx-tab-text-span,.mss-quicklink-item:focus-within > a{
  color:white;
}
/* Main controls Toggle button */
.accordion-toggle,.uniTOG {
  width: 100%;
  text-align: left;
  border: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  position: relative;
  
}
.modal-selector select {
    width: 100%;
    background-color: var(--bgA);
    padding: .5rem;
    border: none;
    border-radius: 0;
}
.modal-selector select option:hover {
    background: var(--accentC);
    color: white
}

.panel-box_content {
  margin-top: 1rem;
}

.panel-box_content select {
  margin-bottom: 1rem;
}
.GroupSettings{
  margin: 1rem 0;
}
.create .bootstrap-select:not([class*="col-"]):not([class*="form-controlB"]):not(.input-group-btn) {
  width: 100%!important;
  margin-bottom: 1rem;
}
.create .form-horizontal, .BTline .form-horizontal {
  border-top: 3px solid var(--accentC);
  padding:1rem 0;
}
.create .mss-form-select {
  height: 43px;
}
.create .button-wrapper {
  width: 35%;
  text-align: center;
  margin: auto;
  margin-top: 1rem;
}

.create .mss-form-select {
  width: 100%;
}
.create .dropdown-toggle {
  border: 1px solid var(--accentD);
  background: transparent;
  padding: .3rem;
}
 .mss-btn-tooltip::before {
  content: "\f05a";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  color: var(--addbtn);
  font-size: 1rem;
}

.radial-btn input {
  width: 30px;
}
.mss-status-info span{
  font-weight: var(--Bold);
}
.status-useractions {
  border: 1px solid var(--accentC);
  padding: 1rem;
  text-align: center;
  margin: 1rem auto 0 auto;
}
.modal-item.arrow-link.BN:hover {
  color: var(--accentC);
}
.status-useractions .modal-item {
  padding-right: 1.5rem;
}
.status-useractions .arrow-link::before {
  width: unset;
  right: 12px;
}

.profile-actions .arrow-link::before{
  right:0;
}
.profile-actions .arrow-link.BN {
padding-right: 1.5rem;
}
.arrow-link::before
.mss-btn-dismiss-status {
  position: absolute;
  background-color: transparent !important;
  cursor: pointer;
  border: none;
  z-index: 1;
  font-size: 21px;
  right: 5px;
  padding: 0;
  top: 5px;
}
.mss-status-alerts {
  border: 1px solid #d25b5f;
}
 .x-icon-button {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #e74c3c;
   position: relative;
   margin: 20px auto;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
 }

 .x-icon-button:hover {
   background: #c0392b;
   transform: scale(1.1);
   box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
 }

 .x-icon-button::before,
 .x-icon-button::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 60%;
   height: 3px;
   background: white;
   border-radius: 2px;
 }

 .x-icon-button::before {
   transform: translate(-50%, -50%) rotate(45deg);
 }

 .x-icon-button::after {
   transform: translate(-50%, -50%) rotate(-45deg);
 }

 /* Group CC profile */


 
 .group_Description.input-wrapper {
  margin-top: 1rem;
}
.Groups.mss-toggle-list {
  flex-wrap: unset;
  margin-top: 2rem;
  padding: 2rem 1rem 1rem 1rem;
  background: var(--bgA);
}
.updte-textarea_Group_Description {
  height: 227px;
}
 .CCinformation #imgContentHeader {
  width: unset;
 }

  .CCinformation .form-tokenbox-container_APP .dx-button{
    margin-top: .5rem;
  }
 .app-box_content{
  border: 1px solid var(--accentC);
  padding: 1rem;
}
.input-wrapper.form-textarea_description textarea{
  height: 208px;
}
 .text-area-wrapper.form-confirmation textarea {
  height: 300px;
}
.settingCCprofile .input-field, .settingCCprofile .input-field .dx-texteditor-input {
  width: 100%;
}
.settingCCprofile {
  margin-top: 1rem;
}
.settingCCprofile .button-field {
  margin-top: 1rem;
}
.GroupSettings{
  background: var(--bgA);
  padding: 2rem 1rem;
}
.App-form .ui-helper-hidden{
  margin:0;
}
.App-form .mss-seperator-half span {
  font-size: 1.2rem;
  font-weight: bold;
}
.Question-wrapper {
  margin-top: 1rem;
}
.group-btn-container {
  max-width: 200px;
  margin-top: 1rem;
}
.Question-wrapper{
  position: relative;
}
.button-question-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.mss-question-item-btn-container {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mss-question-item-btn-container div {
  font-size: .7rem;
}
.button-question-number {
  justify-content: space-between;
  border-bottom: 1px solid var(--accentC);
}
.Question-form-label{
  display: block;
}
/* Move up - down -remove buttons */
.up-btn, .down-btn {
  color: var(--primary);
  background: transparent;
  border: none;
}
.btn-remove{
  background: transparent;
  border: none;
  color: var(--accentB);
}
.App-form-content .btn.dropdown-toggle.btn-light {
  padding: .5rem;
  border: 1px solid var(--accentC);
}
.App-form-content .dropdown.bootstrap-select.mss-form-select.dropup {
  width: 100%;
  padding: 0;
}
.App-form-content .dropdown.bootstrap-select.mss-form-select {
  width: 100% !important;
}
.App-form-content .dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: var(--accentC);
}
.question-selection{
  background: var(--bgA);
  padding: 1rem;
}
.App-form-content .mss-option-item input{
  margin: .5rem 0;
}
.mss-option-item {
  position: relative;
}
.btn-remove.positionBTNs {
  position: absolute;
  right: 3px;
  top: 13px;
  font-size: .7rem;
}

.mss-btn-osacblue-inverse {
  background: transparent;
  border: 1px solid var(--accentC);
  color: var(--primary);
}
.mss-btn-osacblue-inverse:hover {
  background: var(--accentC);
  border: 1px solid var(--accentC);
  color: white;
}
/* Toggle button */
.accordion-toggle{
  background: var(--accentC);
  font-size: 1rem;
  color: white;
  padding: 0.9rem 1rem;
}
.accordion-toggle:hover,
.accordion-toggle:focus { 
  background: #004A57; 
  outline: none; 
  
}
.uniTOG {
  border-bottom: 2px solid var(--accentC);
  padding: .5rem .5rem .1rem .5rem;
  background-color: var(--bgB);
}
/* styling for arrows in toggles */
.accordion-toggle::after,.uniTOG::after { 
  content: "▲"; 
  margin-left: auto; 
  font-size: .9rem; 
  line-height: 1; 
}
/* styling for arrows in toggles */
.accordion-toggle[aria-expanded="true"]::after,.uniTOG[aria-expanded="true"]::after { content: "▼"; }

.accordion-toggle.active { 
  background: #004A57; 
  color: white; 
  font-weight: 600; 
}

/* ---- Visibility & Animation Logic ---- */
/* Panels are hidden by the HTML attribute until opened by JS */
.accordion-panel[hidden] { display: none !important; }

/* Use grid 0fr→1fr so height auto is effectively animated */
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;          /* collapsed */
  transition: grid-template-rows 180ms ease;
  /* optional: border-top: 1px solid #eee; */
}

/* The inner wrapper must clip overflow for the 0fr→1fr trick */
.accordion-panel .panel-inner {
  overflow: hidden;
  min-height: 0; /* important for grid children */
}

/* When the button is expanded, open the adjacent panel (works even without JS classes) */
.accordion-toggle[aria-expanded="true"] + .accordion-panel {
  grid-template-rows: 1fr;          /* expanded */
}
/* Users Profile */

.memberShips{
  background-color: var(--bgA);
  padding: 1rem;
}
.GroupInfo .input-wrapper {
  width: 49.5%;
}
.GroupInfo{
  flex-wrap:unset;
}

.work.form-input.valid {
  width: 70%;
}
.workEx.form-input.valid {
  width: 27%;
  margin-left:.5rem;
}

.Image-Profile{
  background: var(--bgA);
  padding: 1rem;
  margin-bottom: 2rem;
}
.summary-grid {
  align-items: center;
  justify-content: center;
}
.profile-section .input-wrapper, .OrgProfile .input-wrappers {
  margin-bottom: 1rem;
}
.summary-left {
  padding: 1rem;
}
.profile-image {
 justify-content: center;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 1rem;
}
.ap-avatar-container img {
  padding: 1rem;
}
.summary-center {
  border-left: 1px solid var(--accentD);
  padding: 1rem;
}
.MainGroup.CCinformation .inside-wrapper{
  margin-top: 1rem;
}

 .agencysection .mss-input-row input {
  width: 100%;
  margin-right: unset;
}
#subCommitteePanel{
  margin-top: 1rem;
}
.CatGroups.form-tokenbox-container .inside-wrapper {
  width: 100%;
}
/* Pending alerts */
.mss-content-status_mode {
  margin-bottom: 1rem;
}
.mss-font-orange {
  color: var(--accentA);
}
.mss-status-block.mss-status-alerts.mss-status-pending, .mss-status-block.mss-status-alerts.mss-status-needsreview {
  border: 1px solid var(--accentC);
  background: var(--bgB);
}
.Admin_Alerts .validation-summary-errors ul li {
  color: var(--body);
}
.Admin_Alerts .mss-font-orange {
  color: var(--accentA);
  font-size: 1.3rem;
  font-weight: var(--medium);
}
.mss-content-status_actions button {
  margin: 1rem .5rem;
}
/* .summary-right.dFlex {
  align-content: space-around;
  width: 100%;
  flex-grow: initial;
} */
.summary-right div:first-child {
  padding-right: 1rem;
}
.summary-right label, .stats-wrapper label, .status-info label {
  font-weight: var(--Bold);
}
.summary-left.dFlex {
  align-items: center;
}
.avatarBTNup {
  position: absolute;
  left: -6px;
  top: -15px;
  font-size: .7rem;
  width: 25px;
  height: 25px;
  padding: 3.5px 0;
  cursor: pointer;
}

.ap-avatar-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* .ap-avatar-container {
  margin-right: 2rem;
  border: 1px solid var(--accentD);
  padding: 1rem;
} */
.Avatar-upload{
  position: relative;
}
.dFlex.panel-body  {
  justify-content: space-between;
  width: 67%;
  align-items: center;
  margin-left: 3rem;
}
.profile-section .Group::before {
  border-right: 1px solid var(--accentD);
  position: absolute;
  width: 1px;
  content: "";
  top: 0;
  height: 100px;
  left: -13px;
}
.profile-section .Group {
  position: relative;
  height: 100px;
}
.Phone-box_content .wrapper-number.dFlex {
  gap: 10px;
  margin-bottom: .5rem;
  
}
.Pub-Notification {
  border: 1px solid var(--accentD);
  margin-top: 1rem;
  padding: 1rem;
}
.button-wrapper-create {
  max-width: 300px;
  margin-top: 1rem;
}
.rso-grid-footer.mt-3, .address-info {
  margin-bottom: 1rem;
}
.image-inputRW {
  background-color: var(--bgA);
  padding: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.memberShips .button-wrapper, .Pub-Notification .button-wrapper, .button-wrapper-create {
  max-width: 200px;
}
.memberShips .button-wrapper{
  margin: 1rem 0;
}
.Pub-Notification .input-box {
  margin: 0 .5rem;
}
.Phone-box_content .contact-group.phone-item-actions {
  margin-top: .5rem;
}
.wrapper-number .form-label,.phone-row .form-label  {
  font-size: .7rem;
}
.wrapper-number.dFlex .contact-group {
  flex: 1 1 130px;
  min-width: 200px;
}
.image-inputRW .col-wrap {
  width:100%;
}
.phone-actions {
  display: flex;
  justify-content: right;
  font-size: .7rem;
  margin-top: .5rem;
}
.Phone-box_content .wrapper.xtra-gap.dFlex {
  justify-content: space-between;
  align-items: center;
}
.Phone-box_content .form-input-number {
  padding: .4rem .3rem;
}
.Phone-box_content {
  background: var(--bgB);
  padding:.5rem;
}
.Phone-box_content .contact-groups input {
  width: unset;
}
.UserInformation{
  margin-bottom: 1rem;
}
.dx-master-detail-cell{
  background-color: var(--bgA);
}


    /* .form-input:focus,
    .mss-form-select:focus {
        border-color: var(--);
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    } */

    .input-validation-error {
        border-color: var(--error) !important;
        
    }

    /* Validation message styles */
    .validation-message {
        min-height: 20px;
        font-size: 13px;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .validation-message.text-danger {
        color: var(--error) !important;
    }

    /* Adjust input-wrapper for phone layout */
    .phone-row {
        gap: 10px;
    }

    .phone-row .input-wrapper {
        flex: 1 1 auto;
        min-width: 150px;
    }

    .phone-row .input-wrapper.sm {
        flex: 0 0 auto;
        min-width: 140px;
        max-width: 180px;
    }

    .phone-row .input-wrapper.med {
        flex: 1 1 auto;
        min-width: 180px;
    }

   

   

    /* Responsive adjustments */
    /* @media (max-width: 768px) {
        .phone-row {
            flex-direction: column;
        }

        .phone-row .input-wrapper,
        .phone-row .input-wrapper.sm,
        .phone-row .input-wrapper.med {
            min-width: 100%;
            max-width: 100%;
        }
    } */

.OrgProfile .user-info-wrapper .input-wrappers {
  width: 49%;
}

.Address-wrapper.dFlex, .dFlex.user-info-wrapper, .GroupInfo  {
  gap: 10px;
}
.profile-section {
  margin-bottom: 1rem;
}
.user-info-wrapper .input-wrapper {
  width: 49%;
}
.UserProfile .user-info-wrapper .input-wrapper {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
.UserProfile .user-info-wrapper .input-wrapper.email {
  min-width: 100%;
}
.profile-activity {
  border-top: 2px solid var(--accentC);
  padding-top: 2rem;
}
.log-box {
  margin: auto;
  max-width: 800px;
}
.box-submit {
  display: flex;
  justify-content: right;
  margin: 1rem 0;
}
.log-box input {
  height:175px;
}
/* Checkbox and radial button controls */

.feature-controls span {
  display: inline-block;
}
.feature-controls {
  border: 1px solid var(--accentC);
  padding: .5rem;
  margin-top: 1rem;
}
.feature-controls .mss-form-checkbox_label {
  padding: 0 .5rem;
}
.checkBox input {
  width: unset;
}
.dFlex.inputUsers {
  width: 70%;
  justify-content: space-between;
  padding-right: 1rem;
}
.checkBox-wrapper.dFlex {
  flex-wrap: unset;
  justify-content: space-around;
}
.filter-box{
  padding: 1rem 0;
}
.search-filter_actions {
  margin-top:1rem;
  flex-wrap: nowrap;
  align-items: flex-end;
}


.search-filter_actions input {
   padding: .4rem;
  
}
.search-filter_actions input:first-child {
  margin-right: .5rem;
}

.inputUsers .input-wrapper {
  width: 49%;
}
/* Right side checkbox filters */
.chckB-form-control {
  width: 40%;
  display: inline-grid;
  justify-items: stretch;
}
.chckB-control,.chckB-form-control {
  background: var(--bgA);
  padding: 1rem;
 
}
.last-input{
  margin-bottom: 1rem;
}
/* Org Profile */

.iput-btn-wrapper {
  flex-wrap: unset;
}
.ap-container-tokenbox {
  width: 75%;
  border: 1px solid var(--accentD);
  padding: 1rem;
  margin-right: .5rem;
}
.Status-info{
  background: var(--bgA);
  padding: 2rem 0;
  margin-bottom: 2rem;
}
.Status .status-info .mss-status-block {
  padding: 1rem;
  border: none;
}
.Status .row {
  max-width: 80%;
  margin: auto;
}
/* media screens for status banner */


@media only screen and (max-width: 1300px){
  .Status .row {
    max-width: unset;
    margin: unset;
  }
  .Status-info .status-info .mss-status-block {
    width: 100%;
    padding: 1rem 0;
  }

  .Status-info .status-useractions {
    max-width: 100%;
  }
}
@media only screen and (max-width: 768px){
  .mss-quicklink-container select {
    background: var(--bgC);
    border: 1px solid var(--accentC);
  }
}
@media only screen and (max-width: 768px){
  .Status-info .mem-status {
    border-right: none;
  }
  .Status-info {
    padding: 1rem;
  }
  
}
@media only screen and (max-width: 480px){
  .Status .mem-status {
    display: block;
   
  }
  .mem-status .profile-image-mask{
    text-align: center;
  }
}

.Status .status-info{
  justify-content: space-between;
}
/* alert colors */

.Status .mss-status-block.mss-status-green{
  border-top:3px solid var(--addbtn);

}
.Status .mss-status-block.mss-status-red{
  border-top:3px solid var(--error);
 
}
.mem-status {
  border-right: 1px solid var(--accentD);
  align-items: center;
  padding-right: 1rem;
}

.mss-status-orgactions {
  justify-content: center;
}
.PrimaryRSO, .org-select, .ad-border {
  border: 1px solid var(--accentC);
  padding: .5rem;
}





/* Email create */

/* screen Reader only text */

.EmailUsers .button-wrapper .btn.sm {
  width: 200px;
}
.EmailUsers .button-wrapper{
  margin: 1rem 0;
}
.dx-fileuploader-input-container input{
  display: none;
}
.Email-Body {
  margin-top: 1rem;
}
.details-sec {
  padding: 1rem;
  background-color: var(--bgA);
  margin-bottom: 1rem;
}
.mss-input-row.dFlex {
  flex-wrap: nowrap;
  margin-bottom: 1rem;
}
.mss-input-row input {
  width: 76%;
  margin-right: .5rem;
}
/* Email domains ORG Profile DEV EXTREME */
.DEovrd.ap-container-tokenbox .dx-tag {
  background: transparent;
  border: 1px solid var(--bgA);
}
.ap-panel-content .Phone-box_content h4 {
  border-bottom: 1px solid var(--primary);
}
.DEovrd.ap-container-tokenbox {
  width: 100%;
  border: transparent;
  margin: 0;
  padding:0;
}
.DEovrd.ap-container-tokenbox {
  display: none;
}
.OrgProfile .DEovrd .dx-texteditor.dx-editor-outlined {
  height: 100%;
  width: 100%;
  margin-bottom: .7rem;
}
.DEovrd .dx-texteditor.dx-editor-outlined {
    background: transparent;
    border: 1px solid var(--accentD);
    border-radius: 0px;
}
.DEovrd .dx-texteditor-input{
  border:none
}
.phone-row .input-wrapper.med {
  width: 36%;
  margin-right: .5rem;
  margin-bottom: 0;
}
.phone-row .input-wrapper.sm {
  width: 25%;
  margin-right: .5rem;
  margin-bottom: 0;
}
.ap-panel-content .Phone-box_content h4 {
  font-size: 1rem;
}
.ap-panel-content .Phone-box_content {
  margin-bottom: 1rem;
}
.DEovrd .dx-tag-remove-button::before,
.DEovrd .dx-tag-remove-button::after {
    position: absolute;
    top: 21%;
    content: "";
    transform: rotate(45deg);
    inset-inline-end: 9px;
    margin-top: -5px;
    width: 2px;
    height: 9px;
    background: var(--primary);
    margin-right: 0;
}
.DEovrd .dx-tag-remove-button::after {
    inset-inline-end: 5.5px;
    margin-top: -1.5px;
    width: 9px;
    height: 2px;
}
.Email-wrapper .dx-selectbox {
  width: 70%;
}

.Email-wrapper {
align-items: center;
justify-content: space-between;
}
.Email-wrapper .dx-button {
padding: 0;
}
.DEovrd .dx-tag {
  background: var(--bgA);
  color: unset;
  border-radius: 0px;
  padding: 0;
  display: inline-block;
  margin: 5px;
}

.DEovrd .dx-tag .dx-tag-content {
  background: transparent;
  padding: .5rem 1rem;
  border-radius: 0px;
  display: inline-block;
}
/* .OrgIMG-info .input-wrappers {
  width: 76%;
} */
/* Adjusted check box with master class */


.panel-box {
  margin-top: 1rem;
}
.FeaturedDate {
  margin-bottom: 1rem;
}
.FeaturedDate .input-wrapper.Half{
  padding: 0 .2rem;
} 
.input-wrapper.Half {
  width: 50%;
}
.CCReport .button-wrapper {
  max-width: 200px;
  margin-top: 1rem;
}
.CCReport .dFlex.column-control{
  align-items: flex-start;
  height: 100%;
}
.create .dFlex.column-control {
  align-items: stretch;
  height: 100%;
}
.dFlex.column-control{
  height: 100%;
}
.column-control .btn-marg {
  margin-top: 1rem;
}
.selectSub .dx-texteditor-input {
  width: 100%!important;
}
.selectSub.selSubBTN {
  width: 150px;
  margin-left: .5rem;
}

.selectSub{
  width: 100%;
}
.selectSub .dx-button{
  display: block;
}
.dFlex.SubCat {
  flex-wrap: nowrap;
}

.checkBox {
  margin-bottom: 1rem;
}
.CCReports .chckB-form-control {
  width: 40%;
}
.inputControls {
  width: 60%;
  padding-right: 1rem;
}
.checkBox-wrapper select{
  margin-bottom: 0;
  margin-left: 1rem;
}

.UserForm .dx-toolbar-after,.MainGroup .dx-toolbar-before,.MainGroup .dx-toolbar-after{
  top: 0;
}

.UserForm .ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable{
  max-width: 1100px!important;
}



.dx-toolbar .dx-toolbar-after {
  -webkit-padding-start: 15px;

  padding-inline-start: 15px;

}
.dx-toolbar-after, .dx-toolbar-before {
  position: absolute;
  top: 0;
}
.dx-toolbar-after {
  right: 0;

}


/* icon color calendar & controls */
.MainGroup .dx-dropdowneditor-icon::before,
.dx-datebox-wrapper-date .dx-daterangebox .dx-dropdowneditor-icon::before, 
.dx-datebox-wrapper-date .dx-button-text,
.dx-datebox-wrapper-date .dx-calendar-navigator .dx-button .dx-icon {
  color: white;
}
/* 0 padding added because of white space on feature inut */
.featured.mss-form-checkbox_label{
  padding-left:0;
}
.mss-form-checkbox_label {
  padding: 0 .5rem 0 .2rem;
}
.MainGroup .input-wrapper {
  margin-top: 1rem;
}
.mss-btn-osacwhite {
  border: none;
  padding: .5rem;
}
.mss-btn-osacwhite:hover, .mss-btn-osacwhite:hover span{
  background: transparent;
  color:var(--secondary);
} 
.MainGroup .dx-dropdowneditor .dx-state-hover .dx-dropdowneditor-icon, .MainGroup .dx-dropdowneditor-active .dx-dropdowneditor-icon{
  background-color: var(--secondary)!important;
}

[type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) {
  cursor: pointer;

}
.slidetoggle-row {
  display: flex;
  justify-content: right;
  background-color: #E8E8E8;
}

/* Main Grids Groups */


.dx-tabpanel-tabs-position-top > .dx-tabpanel-tabs .dx-tabs-wrapper{border:none; background: transparent;}
/* exp-btn-wrapper used in group applications */
.exp-btn-wrapper{
  margin-top:1rem;
}
.MainGroup {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
/* if title does not exist */
.MainGroup.CCReports {
  margin-top: 5rem;
}
.MainGroup .dx-datagrid{
  background-color:var(--accentC);
}
.MainGroup .dx-datagrid-header-panel .dx-toolbar {
  margin-bottom: 0;
  padding: 1rem; 
}

.mss-font-bold {
font-weight: var(--Bold);
padding-right: .5rem;
}

.border-btm {
  padding: 1rem 0;
  border-bottom: 1px solid #00859B3D;
}
.DelMemSec .news-detail-link {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: break-spaces;
}
.mss-icon-external-blue{
  position: relative;
}
.mss-icon-external-blue::before {
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  position: absolute;
  width: 25px;
  height: 25px;
  font-size: 18px;
  content: "\f08e";
  color: var(--accentC);
  left: 6px;
}
/* Turns off primary color for dev express buttons in grid */
 .GroupApps.MainGroup .dx-tabpanel .dx-button-mode-contained{
   width: 100%;
   margin:0 .2rem;
 } 
.MainGroup .dx-button-mode-contained {
  background-color: white;
  border-radius: 0;
}
.MainGroup .dx-bordered-bottom-view .dx-button-content{
  background-color: unset;
}
.MainGroup .dx-button-content {
  background-color: var(--primary);
}
.MainGroup .dx-button-content span {
  color: white;
}
/* unused icon*/
.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs-wrapper {
  border-block-end: none !important;
  border-block-start: none !important;
}
/* input search*/
.MainGroup .dx-texteditor.dx-editor-outlined {
  background: white;
  border: 1px solid var(--accentD);
  border-radius: 0;
}
.MainGroup .dx-toolbar-button a {
  border: 1px solid white;
  padding: .2rem .5rem;
  color: white;
}
.mss-search-clear {
  position: absolute;
  right: 5px;
  top: 59%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 22px;
  color: var(--accentC);
  z-index: 10;
}
.MainGroup .dropdown-menu li, .mss-search-results-list li {
  list-style-type: none;
  margin-left: 0;
}
.MainGroup .dx-toolbar-button a:hover {
	background: var(--primary);
}
.dx-button-content span {
  color: white;
}

/* Upload */
.mss-upload-filecard {
  position: relative;
  width: 100%;
  background: #fff;
  padding: 1rem;
  border: 1px solid var(--accentD);
}


.mss-upload-filecard .mss-filecard-filename {
  position: relative;
  z-index: 10;
  transform: 10px;
  -webkit-transform: 10px;
  -moz-transform: 10px;
  -ms-transform: 10px;
  -o-transform: 10px;
  font-size: .8rem;
  padding-left: 1rem;
}

.mss-icon-trash-red {
  cursor: pointer;
}
.mss-icon::before{
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  position: absolute;
   width: 25px;
  height: 25px;
} 
.mss-icon-document::before {
  font-size: 24px;
  content: "\f03e";
  color: var(--accentC);
  left: 9px;
  bottom: 21px;
}
.mss-icon-trash-red::before {
  content: "\f1f8";
  font-size: 13px;
  color: var(--accentB);
  right: -4px;
  bottom: 32px;
}
.mss-upload-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--accentB);
  background: transparent;
}
.mss-upload-delete:focus { outline: 2px solid var(--Primary); outline-offset: 2px; }
.mss-upload-label {
  position: absolute;
  right: 14px;
  top: 15px;
}

/* hides browse button in upload */
input[type=file]::file-selector-button {
    display: none;
}

input[type=file]::-webkit-file-upload-button {
    display: block;
    width: 0;
    height: 0;
    margin-left: -100%;
}

input[type=file]::-ms-browse {
    display: none;
}
.MainGroup .dx-datagrid-headers.dx-bordered-top-view {
  background-color: var(--bgA);
}
.MainGroup .dx-datagrid-search-panel {
  margin: 0 1rem;
}
/* pagination buttons*/

.dx-pager .dx-page-sizes, .dx-pagination .dx-page-sizes {
  float: left;
  margin-left: .5rem;
}
.MainGroup .dx-datagrid-rowsview .dx-master-detail-row:not(.dx-datagrid-edit-form) .dx-master-detail-cell{
  background-color: var(--bgA);

}
.MainGroup .dx-pager .dx-page-sizes .dx-selection, 
.MainGroup .dx-pager .dx-pages .dx-selection, 
.MainGroup .dx-pagination .dx-page-sizes .dx-selection, 
.MainGroup .dx-pagination .dx-pages .dx-selection {
  color: white;
  background-color: var(--accentC);
}
.MainGroup .dx-widget.dx-datagrid-pager.dx-pager {
  background-color: var(--bgA);
}
.MainGroup .dx-datagrid-headers {
  color: var(--primary);
  font-weight: var(--Bold);
  touch-action: pinch-zoom;
}

/* Card look */
#dataGridAdminGroups .group-card{
  border: 1px solid var(--accentD);
  border-radius: 12px;
  padding: 12px;
  margin: 8px;
}

#dataGridAdminGroups .gc-header{
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .5rem;
}

#dataGridAdminGroups .gc-title{ font-weight: 600; text-decoration: none; }
#dataGridAdminGroups .gc-manage{ font-size: .875rem; text-decoration: underline; }

#dataGridAdminGroups .gc-meta{
  display: grid; grid-template-columns: repeat(2,1fr); gap: .5rem; margin-top: .5rem;
}
#dataGridAdminGroups .gc-field .k{ display:block; font-weight:600; font-size:.8rem; opacity:.8; }
#dataGridAdminGroups .gc-field .v{ display:block; }

/* upload box */

.mss-upload-file, .mss-upload-img {
  border: 2px dashed #ccc;
  background: #fff;
  padding: 10px;
  margin: 10px 0;
}

.mss-upload-container{
  position: relative;
}
#fileContentHeaderImage, #ucAttachments{ 
  width: 100%!important;
  position: unset !important;
  opacity: unset !important;
  padding: .5rem !important;
  height: unset !important;
  margin: unset !important;
  overflow: unset !important;
  clip: unset;
  clip-path: unset !important;
  white-space: nowrap !important;
  border: 1px solid var(--accentD)!important;
}
/* Create */
/* .mss-btn-osacgreen {
  border: 1px solid var(--accentD);
  border-radius: 10px;
  padding: 5px;
} */
#uploadDiv {
  display: flex;
  justify-content: right;
  text-align: center;
  padding: 1rem;
}
.infoBox{
  margin: 1rem 0;
}
.infoBox h2 {
  margin-bottom: 1rem;
}
.panel-access-instructions {
  border: 1px solid var(--accentC);
  padding: 1rem;
}
.groupset {
  background-color: var(--bgA);
  padding: 1rem;
}
#imgContentHeader {
  width: 100px;
  height: auto;
}
.form-tokenbox-container_APP {
  border: 1px solid var(--accentC);
  padding: 1rem;
}
#GISLocations .dx-texteditor-input {
  border: transparent;
}
.form-tokenbox-container .inside-wrapper input{
  width: 100%;
}
.form-tokenbox-container .inside-wrapper {
  width: 49%;
}
.form-tokenbox-container.dFlex {
  justify-content: space-between;
}
/* media screen 991 */
@media only screen and (max-width: 991px){
  .dFlex.column-control {
    display: block;
  } 
  .inputControls {
    width: 100%;
    padding-right: 0;
    margin-bottom: 1rem;
  }
  .chckB-form-control {
    width: 100%;
  }
}



/* form button create  */

.dx-button-content{
 background-color: var(--primary);
}
.dx-button-content:hover{
 background-color: var(--secondary);
}
.dx-button-mode-contained span{
  color: white;
}
/* 🔑 Stack fields only below 580px */
@media only screen and (max-width: 580px){
  #dataGridAdminGroups .gc-meta{ grid-template-columns: 1fr; }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .accordion-panel { transition: none; }
}



/* adjusts nav for mobile */
@media only screen and (max-width: 768px) {
  .admin-main {
    margin-left: 0;
    width: 100%;
  }
  .main-header.admin-header {
    position: unset;
    width: 100%;
    overflow-x: unset;
  }
  .mss-mobile-navmenu-toggle.ui-helper-hidden {
    display: inline-flex;
  }
  .accordion-nav {
    max-width: unset;
  }
}

@media (max-width: 580px){
  /* Keep the row cell from adding extra padding around our custom card */
#dataGridAdminGroups .no-cell-padding > td { padding: 0; }

/* Card look (k/v stacking handled by grid on mobile) */
#dataGridAdminGroups .group-card{
  border: 1px solid var(--accentD);
  border-radius: 12px;
  padding: 12px;
  margin: 8px;
}

/* Header: title + manage button */
#dataGridAdminGroups .gc-header{
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
}
#dataGridAdminGroups .gc-title{ font-weight: 600; text-decoration: none; }
#dataGridAdminGroups .gc-manage{ font-size: .875rem; text-decoration: underline; }

/* Meta fields grid */
#dataGridAdminGroups .gc-meta{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; margin-top: .5rem;
}
#dataGridAdminGroups .gc-field .k{ display: block; font-weight: 600; font-size: .8rem; opacity: .8; }
#dataGridAdminGroups .gc-field .v{ display: block; }

/* Only go full “cards” on small screens; desktop still looks fine with rowTemplate */
@media (max-width: 768px){
  /* tighten card spacing if needed */
  #dataGridAdminGroups .group-card{ margin: 6px 8px; }
  #dataGridAdminGroups .gc-meta{ grid-template-columns: 1fr; } /* stack fields vertically */
}
}



/* Country Pages */
      
.C-Chapters .intro-wrapper{
  margin: 4rem 0;
}

.dFlex.RegionRows {
  gap: .5em 1em;
}

.regions-title {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.country-btn {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}

.C-Chapters .region-wrapper .btn {
  padding: .5rem 1rem;
}

.C-Chapters .region-wrapper {
  display: inline-flex;
  flex-grow: 1;
}

.regions-accordion {
  border-radius: 6px;
}

.regions-accordion-item h3 {
  margin-bottom: 0;
}

.regions-accordion-item {
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #dae0e5;
}

.regions-accordion-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  font-size: 1.1rem;
  padding: 12px 16px;
  background: #f5f5f5;
  border: none;
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: var(--paraFont);
  font-weight: var(--semiBold);
}

.regions-accordion-button::after {
  content: "+";
  display: inline-block;
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 700;
}

.regions-accordion-button[aria-expanded="true"],
.regions-accordion-button.active {
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}

.regions-accordion-button[aria-expanded="true"]::after,
.regions-accordion-button.active::after {
  content: "\2212";
}

.regions-accordion-button:focus-visible {
  outline: 3px solid rgba(0, 123, 255, 0.4);
  outline-offset: 2px;
}

.region-countries-container {
  padding: 15px;
}

.regions-accordion-panel {
  background: #fff;
  display: block;
}

/* .regions-accordion-panel[hidden] {
  display: none !important;
} */

.regions-accordion-button.active {
  background-color: var(--accentA);
  color: var(--primary);
}

.regions-accordion-button,
.regions-accordion-button,
.regions-accordion-button,
.regions-accordion-button {
  background-color: var(--secondary);
  color: #fff;
}


    
.form-input-hidden{
  display: none;
}
      
/* alert buttons */
     
.mss-status-alerts_text .btn.sm{
  max-width: 200px;
  margin: 1rem 0;
}
   
/* Display block for dFlex columns */

@media only screen and (max-width: 480px){
  .Address-wrapper.dFlex, .dFlex.user-info-wrapper, .GroupInfo, .Address-wrapper {
    display: block;
  }
}