/* Bootstrap 4: pe/ps not in BS4 – add so HTML using pe/ps works (same as pr/pl) */
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-15 { padding-right: 1.5rem !important; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-15 { padding-left: 1.5rem !important; }

/* Bootstrap 5–style padding (pe/ps) – project uses BS4 which has no pe/ps */
.pe-0 { padding-inline-end: 0 !important; }
.pe-1 { padding-inline-end: 0.25rem !important; }
.pe-2 { padding-inline-end: 0.5rem !important; }
.pe-3 { padding-inline-end: 1rem !important; }
.pe-15 { padding-inline-end: 1.5rem !important; }
.ps-0 { padding-inline-start: 0 !important; }
.ps-1 { padding-inline-start: 0.25rem !important; }
.ps-2 { padding-inline-start: 0.5rem !important; }
.ps-3 { padding-inline-start: 1rem !important; }
.ps-15 { padding-inline-start: 1.5rem !important; }

@font-face {
  font-family: "fontawesome";
  src: url(../fonts/fontawesome-free-5.15.2-web/webfonts/fa-regular-400.ttf);
}
@media (max-width: 768px) {
  .container-inner-resp > .row{
    width: max-content;
  }
  .container-inner-resp {
      flex-wrap: nowrap;
      overflow-x: hidden;
  }
}

/* Desktop: hide email sidebar toggle (only show at 1280px and below) */
@media (min-width: 1281px) {
  .sidebar-topnav .email-sidebar-toggle,
  .email-sidebar-toggle {
    display: none !important;
  }
}

/* Email sidebar menu icon: hidden by default, shown at 1280px and below (tablet view) */
.email-sidebar-toggle {
  display: none;
  margin-right: 0.5rem;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  color: #212529;
  align-items: center;
  justify-content: center;
}
/* Ensure the bars icon is visible (Font Awesome webfont or SVG) */
.email-sidebar-toggle .fas.fa-bars,
.email-sidebar-toggle i.fa-bars {
  color: #212529;
  font-size: 1.35rem;
  display: inline-block;
  line-height: 1;
  width: 1.35rem;
  height: 1em;
  flex-shrink: 0;
}
/* Font Awesome JS injects SVG – size and color the SVG so the icon shows */
.email-sidebar-toggle svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
  display: block;
}
.email-sidebar-toggle:hover,
.email-sidebar-toggle:hover .fas.fa-bars,
.email-sidebar-toggle:hover i.fa-bars {
  color: #000;
}
.email-sidebar-toggle:hover svg {
  fill: currentColor;
}

/* Remove padding around main email content area */
.container-inner {
  padding-left: 0;
  padding-right: 0;
}
/* Email Inbox Left Style */
.email-inbox-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 32px;
}
@media (min-width: 1024px) {
  .email-inbox-left {
    min-height: calc(100vh - 58px);
  }
}
/* Desktop: proper widths for three-column layout (folders | list | content) – from 1281px */
@media (min-width: 1281px) {
  .container-inner {
    max-width: 100%;
    min-width: 0;
  }
  .row.container-inner-resp {
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
  }
  /* Desktop: match reference – folders ~17%, list ~25%, content ~58% (2+3+7 cols) */
  .row.container-inner-resp > .email-inbox-left {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    min-width: 180px;
  }
  .row.container-inner-resp > .col-12.col-sm-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
    min-width: 0;
  }
  .row.flex-no-wrap {
    min-width: 0;
  }
  /* Middle column (email list): ~1/3 width, content pane ~2/3 – match reference layout */
  .email-inbox-middle {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    min-width: 340px;
    overflow: hidden;
    display: block !important;
  }
  .email-inbox-right {
    flex: 1 1 0%;
    min-width: 360px;
    max-width: none;
    overflow-x: hidden;
    overflow-y: auto;
    display: block !important;
  }
}

/* Ensure email list (middle column) is visible on tablet and desktop – only hidden at 768px and below */
@media (min-width: 769px) {
  .email-inbox-middle {
    display: block !important;
  }
}
/* 769px+: no fullscreen scroll – only content section scrolls; constrain right column */
@media (min-width: 769px) {
  .email-inbox-right {
    max-height: calc(100vh - 56px);
    overflow: hidden;
  }
  .email-inbox-right .conversationBoxHeight::-webkit-scrollbar,
  .email-inbox-right .p-4.overflow-y-auto.conversationBoxHeight::-webkit-scrollbar {
    width: 8px;
  }
  .email-inbox-right .conversationBoxHeight::-webkit-scrollbar-track,
  .email-inbox-right .p-4.overflow-y-auto.conversationBoxHeight::-webkit-scrollbar-track {
    background: #e8e8e8;
  }
  .email-inbox-right .conversationBoxHeight::-webkit-scrollbar-thumb,
  .email-inbox-right .p-4.overflow-y-auto.conversationBoxHeight::-webkit-scrollbar-thumb {
    background: #6a9f3a;
  }
  .email-inbox-right .conversationBoxHeight::-webkit-scrollbar-thumb:hover,
  .email-inbox-right .p-4.overflow-y-auto.conversationBoxHeight::-webkit-scrollbar-thumb:hover {
    background: #609b30;
  }
}
/* Desktop only (1281px+): fixed height – don’t change desktop view */
@media (min-width: 1281px) {
  .email-inbox-right .conversationBoxHeight,
  .email-inbox-right .p-4.overflow-y-auto.conversationBoxHeight {
    height: calc(100vh - 260px) !important;
    max-height: 270px;
    overflow-y: auto !important;
    overflow-x: hidden;
  }
}

/* At 1280px and below (tablet view): email sidebar becomes slide-in menu, main content full width */
@media (max-width: 1280px) {
  .email-sidebar-toggle {
    display: inline-block;
  }
  /* Sidebar is fixed/out of flow – main content column takes full width */
  .container-inner {
    max-width: 100%;
    width: 100%;
  }
  .row.container-inner-resp {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  .row.container-inner-resp > .col-12.col-sm-10 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
  .row.flex-no-wrap {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  /* Tablet: ensure email list and content columns display (only hidden on mobile ≤768px) */
  @media (min-width: 769px) {
    .email-inbox-middle {
      display: block !important;
      flex: 0 0 28%;
      max-width: 28%;
      min-width: 400px;
    }
    .email-inbox-right {
      display: block !important;
      flex: 1 1 0%;
      min-width: 300px;
    }
    /* Tablet: p-4 overflow-y-auto conversationBoxHeight – fit content, scrollbar when content exceeds screen */
    .email-inbox-right .conversationBoxHeight,
    .email-inbox-right .p-4.overflow-y-auto.conversationBoxHeight,
    .email-inbox-right .overflow-y-auto.conversationBoxHeight {
      height: auto;
      min-height: 0;
      max-height: calc(100vh - 240px);
      overflow-y: auto !important;
      overflow-x: hidden;
    }
  }
  .email-inbox-left {
    position: fixed;
    left: 0;
    top: 56px;
    width: 280px;
    max-width: 85vw;
    height: calc(100vh - 56px);
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.4s ease-in-out;
    padding-top: 1rem;
    overflow-y: auto;
  }
  body.email-sidebar-open .email-inbox-left {
    transform: translateX(0);
    left: 12px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15), 2px 0 8px rgba(0, 0, 0, 0.1);
  }
  /* When both nav bars are visible (mobile), start sidebar below them */
  @media (max-width: 768px) {
    .email-inbox-left {
      top: 112px;
      height: calc(100vh - 112px);
    }
  }
  /* Mobile: hide email list, full height, no inner scroll */
  @media (max-width: 768px) {
    .email-inbox-middle {
      display: none !important;
    }
    .row.container-inner-resp {
      min-height: calc(100vh - 112px);
    }
    .row.container-inner-resp > .col-12.col-sm-10 {
      min-height: calc(100vh - 112px);
    }
    .row.flex-no-wrap {
      min-height: calc(100vh - 112px);
    }
    .email-inbox-right {
      flex: 0 0 100%;
      max-width: 100%;
      max-height: calc(100vh - 112px);
      overflow: hidden;
    }
    /* Mobile: only content section scrolls – little smaller height */
    .email-inbox-right .conversationBoxHeight,
    .email-inbox-right .p-4.overflow-y-auto.conversationBoxHeight,
    .email-inbox-right .overflow-y-auto.conversationBoxHeight {
      height: auto;
      min-height: 0;
      max-height: calc(100vh - 220px);
      overflow-y: auto !important;
      overflow-x: hidden;
    }
  }
  .email-sidebar-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    pointer-events: none;
  }
  body.email-sidebar-open .email-sidebar-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
/* Desktop: slider (hamburger) stays visible – don’t remove it; layout unchanged */
.email-inbox-left .nav-link {
  color: inherit;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.email-inbox-left .nav-item.active > a {
  font-weight: bold;
  color: #5E9331;
  position: relative;
}
.email-inbox-left ul.flex-nowrap{
  position: relative;
}
.email-inbox-left ul.flex-nowrap > li {
  padding-left: 12px;
}
.email-inbox-left ul.flex-nowrap li:first-child {
  padding-left: 0;
  text-align: center;
}
.email-inbox-left .collapseMenuIcon {
  position: absolute;
  left: 2px;
  color: #E7E7E7;
  font-size: 20px;
}
.input-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}
.form-check.form-check-mb-0 {
  margin-bottom: 0 !important;
}
.add-package-panel {
  position: absolute;
  right: 0;
  z-index: 100;
  min-height: calc(100vh - -40%);
  transform: translateX(100%);
  transition: transform 0.15s ease-in-out;
}
.sidepanel-toggled .add-package-panel {
  transform: translateX(0);
}
.panel-heading {
  display: flex;
  padding: 1rem;
  background: #343f54;
  text-align: left;
  color: #FFFFFF;
  justify-content: space-between;
  align-items: center;
}
.panel-heading a {
  cursor: pointer;
}

/* Email Inbox Left Style End */

/* Email Inbox Middle Style */
.email-inbox-middle .tab-content {
  display: inline-block;
  width: 100%;
}
.email-inbox-middle .nav-tabs {
  background-color: #F7F7F7;
  border-bottom: 0;
}
/* .email-inbox-middle .list-group {
  padding: 20px;
} */
.email-inbox-middle .nav-item .nav-link.active {
  background-color: #FFFFFF;
  color: #000000;
  border-bottom: 3px solid #5E9331;
}
.email-inbox-middle .nav-tabs .nav-link {
  color: #808A98;
  padding-top: 15px;
  padding-bottom: 15px;
  border-right: 1px solid #E5E5E5;
  border-left: 1px solid transparent;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom: 3px solid #E5E5E5;
}
/* Only email list cards inside .email-inbox-middle-inner get selected/hover styles */
.email-inbox-middle-inner .list-group-item:first-child {
  border-top: 0;
}
.email-inbox-middle-inner .list-group-item:hover,
.email-inbox-middle-inner .list-group-item.selected {
  background: #ECEEF3;
}
.email-inbox-middle-inner .list-group-item {
  padding: 20px 20px 20px 30px;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  cursor: pointer;
}
.email-inbox-middle-inner .list-group-item.selected {
  background: #ECEEF3;
}
.email-inbox-middle .tab-content .image-parent {
    margin-right: 5px;
    min-width: 62px;
    width: 62px;
}
.text-wrap {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-auto {
  overflow: auto;
}
.email-inbox-middle .tab-content .image-parent img {
    width: 100px;
    margin-right: 5px;
}
.zIndex-9999{
  z-index: 9999;
}
.overflow-y-auto {
  overflow-y:  auto !important;
}
/* Email Inbox Middle Style End */

/* Email Inbox Right Style */
.emailTopBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.w-35 {
  width: 35%;
}
.mw-75 {
  max-width: 75px;
  min-width: 65px
}
@media (max-width: 475px) {
  .emailTopBar {
    display: block;
    justify-content: inherit;
    align-items: center;
  }
  /* .email-inbox-right .profile-image img {
    width: 3.5rem;
  } */
}
.toolbar-icons a:hover{
  text-decoration: none;
}
.w-155 {
  min-width: 155px;
}
/* Email Inbox Right Style End */


/* Email menu bar style */
.flex-no-wrap {
  flex-wrap: nowrap;
}
.email-navbar-main {
  margin-left: -15px;
  margin-right: -15px;
  padding: 5px 0;
  background-color: #ffffff;
  display: none;
}
@media (max-width: 475px) {
  .email-navbar-main {
    width: 100%;
  }
}
.email-navbar {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.round {
  position: absolute;
  left: 5px;
  display: none;
}
.email-navbar a.nav-link {
  display: flex;
  align-items: center;
}
.cursor-pointer {
  cursor: pointer;
}
.email-navbar .nav-link img {
  width: 18px;
  height: 18px;
}
.round label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 18px;
  left: 0px;
  position: absolute;
  /* top: 45%; */
  width: 18px;
  
}
.list-group-item:hover .round,
.round.item-select {
  display: block;
}
/* Don't show round checkbox in email list section – keep list clean */
.email-inbox-middle .round,
.email-inbox-middle .list-group-item:hover .round,
.email-inbox-middle .round.item-select {
  display: none !important;
}
.msg-content.hide-date #time-list {
  display: none !important;
}
.msg-content.send-to-data #email-details {
  display: none !important;
}
.mail-id {
  color: black;
  padding: 0 3px;
}

.round label:after {
  border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 5px;
    left: 3px;
    opacity: 0;
    position: absolute;
    top: 4px;
    transform: rotate(-45deg);
    width: 9px;
}

.round input[type="checkbox"] {
  visibility: hidden;
}

.round input[type="checkbox"]:checked + label {
  background-color: #66bb6a;
  border-color: #66bb6a;
}

.round input[type="checkbox"]:checked + label:after {
  opacity: 1;
}
/* Email menu bar style end */

/* Email Threading */

.email-threading .image-parent img {
  width: 55px;
  margin-right: 23px;
  height: auto;
}
.email-threading .card {
  /* border-top: 0; */
  border-radius: 0;
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.125); */
  margin: 6px 0;
}
.email-threading .card-header {
  background-color: #fff;
  border: none;
}
.email-type {
  font-size: 12px;
}
.name-initials {
  width: 48px;
  height: 48px;
  text-align: center;
  padding: 11px 6px 9px 9px;
  letter-spacing: 2px;
  font-size: 1.3em;
  border-radius: 100%;
  color: #fff;
  margin-right: 12px;
}
.open-thread {
  color: #212529;
  background-color: #f8f9fa;
  padding: 2px 3px;
  font-size: 18px;
  height: 12px;
  letter-spacing: 2px;
  position: relative;
  border-radius: 4px;
  display: inline-block;
  width: 28px;
  margin-top: 15px;
}
.open-thread span {
  position: absolute;
  top:-12px;
  left: 4px;
}
.verti-devider {
  width: 1px;
  height: 15px;
  position: relative;
  display: inline-block;
  bottom: -3px;
  margin-top: 15px;
  background-color: rgba(0, 0, 0, 0.125);
}
.email-pagination {
    position: absolute;
    bottom: 15px;
    right: 15px;
}
.prevNext {
  display: block;
  margin-left: 10px;
}
.prevPage {
  /* color: #fff; */
  display: inline-block;
  padding: 2px 5px;
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
  width: 27px;
  min-width: 27px;
  text-align: center;
}
.nextPage {
  /* color: #fff; */
  display: inline-block;
  padding: 2px 5px;
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
  width: 27px;
  min-width: 27px;
  text-align: center;
}
.badge {
  font-size: 115%
}
.overflow-y {
  overflow-y: scroll;
}
.w-75 {
  width: 75%;
}
.w-200 {
  min-width: 200px;
}
.h-20 {
  height: 20px;
}
.h-65 {
  height: 65px;
}
.pt-26 {
  padding-top: 26px;
}
.buttons {
  justify-content:flex-end;
 display: flex;
}
@media (max-width: 767px) {
  .modal-footer {
    display: block;
    justify-content: center;
    text-align: center;
  }
  .buttons {
    padding-top: 10px;
    justify-content: center;
  }
}
.screenHeight {
  height: calc(100vh - 109px) !important;
}
.firstPanelHeight
{
  height: calc(100vh - 180px) !important;
}
.mailboxHeight {
  height: calc(100vh - 116px) !important
}
.conversationBoxHeight {
  min-height: 120px;
  max-height: calc(100vh - 260px);
  height: auto;
}
/* Little gap below subject heading, then white card */
.email-inbox-right h4.mt-3 {
  margin-bottom: 0.5rem;
}
.email-inbox-right .bg-light.mt-3.mb-3 {
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
}

/* Heading section: tight spacing between "Your account is active", sender, "To:" lines */
.email-inbox-right .email-header-sender .d-inline-block {
  line-height: 1.35;
}
.email-inbox-right .email-header-sender .d-inline-block span.d-inline-block {
  display: block;
  margin-bottom: 0.15rem;
  line-height: 1.35;
}
.email-inbox-right .email-header-sender .d-inline-block span.d-inline-block:last-child {
  margin-bottom: 0;
}

/* Tablet and mobile only: heading section full width, then date row, then icons row. Desktop unchanged. */
@media (max-width: 1280px) {
  .email-inbox-right h4.mt-3 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .email-inbox-right .email-header-row {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .email-inbox-right .email-header-row .email-header-sender,
  .email-inbox-right .email-header-row .email-header-meta {
    max-width: 100%;
    flex: 0 0 auto;
    width: 100%;
  }
  .email-inbox-right .email-header-row .email-header-meta {
    display: block !important;
    flex-direction: column;
    align-items: stretch;
  }
  .email-inbox-right .email-header-row .email-header-meta .d-block {
    width: 100%;
  }
  .email-inbox-right .email-header-row .email-header-date {
    margin-bottom: 0;
  }
}


@media (max-width: 768px) {
  .email-inbox-right .email-header-row .email-header-meta {
    justify-content: flex-start;
    align-items: flex-start;
    max-width: calc(100% - (75px + 1rem));
    margin-left: calc(75px + 1rem);
    padding: 0 !important;
  }
  .email-inbox-right .email-header-row .email-header-meta .d-block {
    text-align: left !important;
  }
  .email-inbox-right .email-header-row .email-header-date {
    justify-content: flex-start !important;
    padding-top: 0.5rem;
  }
  .email-inbox-right .email-header-row .email-header-meta .toolbar-icons {
    justify-content: flex-start !important;
    padding-top: 2px !important;
  }
}
/* Email Threading end */
@media (max-width: 440px) {
  .email-inbox-right .email-header-row .email-header-meta {
    justify-content: flex-start;
    align-items: flex-start;
    max-width: calc(100% - (65px + 1rem));
    margin-left: calc(65px + 1rem);
    padding: 0 !important;
  }
  .email-inbox-right .email-header-row .email-header-meta .d-block {
    text-align: left !important;
  }
  .email-inbox-right .email-header-row .email-header-date {
    justify-content: flex-start !important;
    padding-top: 0.5rem;
  }
  .email-inbox-right .email-header-row .email-header-meta .toolbar-icons {
    justify-content: flex-start !important;
    padding-top: 2px !important;
  }
}
.variable-list-modal{
  margin: 0 auto !important;
  padding: 0  !important;
}
.variable-list-modal .modal-body {
  padding: 0 !important;
}
.variable-list-modal .modal-body .list-group-item {
  border: 0 !important;
  cursor: pointer;
  background-color: #fff!important;
}
.variable-list-modal .modal-body .list-group-item:hover {
color: black;
font-weight: bolder;
font-size: 15px;
}
.variable-list-modal .modal-header {
background: 	#edeff3 !important;
color: black !important;
padding: 0.3rem 1rem;
}
.variable-list-modal .modal-dialog 
{
  margin: 0 auto !important;
 
}