/**
 * CSS for layout in entire application
 *
 * This is loaded last after public/css/style.css and is meant for
 * additions/overrides by developers to the latter (which is provided by the
 * UI designer and should not be modified by developers).
 *
 * Prescribed format/ordering of CSS:
 *   - CSS custom properties (variables) placed first.
 *   - "Containers" section placed second. Remaining sections should be ordered
 *     alphabetically for easier searching.
 *   - Begin and close each section with comments containing the section name,
 *     e.g. Containers, Forms, Navigation, etc.
 *   - Within each section, the rules (selector + declaration group) should be
 *     ordered according to CSS specificity with type selectors (e.g. div)
 *     first, followed by class selectors (e.g. .example), and lastly ID
 *     selectors (e.g. #test).
 *   - Within each rule, order the properties alphabetically, e.g. font-family
 *     before font-size, height before width, etc.
 *   - Use rem instead of em for easier resolving of final sizes.
 *   - In view of accessiblity and zooming, try to use em or rem instead of px,
 *     especially for typography. See
 *     https://chiamakaikeanyi.dev/sizing-in-css-px-vs-em-vs-rem/ for more info.
 *
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
 */

/* BEGIN: Containers */
html,
body {
  /* when using rem units, note that Bootstrap default font-size is 16px */
  margin: 0;
  padding: 0;
}

.card {
  border-color: white;
}

.card.sub-card:last-child {
  margin-bottom: 0;
}

.card.sub-card {
  margin-bottom: 1rem;
}

.card-body {
  padding: 1.5rem;
}

.card-body .row {
  margin-bottom: 1.5rem;
  /* same as Bootstrap .mb-4 */
}

.card-body .row:last-child {
  margin-bottom: 0
}

.field-label {
  color: var(--smsreg-muted);
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.125rem;
}

.form-register .field-label {
  font-size: 0.875rem;
}

.card-header {
  background: white;
  padding: 1.5rem;
}

.card-footer {
  background: white;
  padding: 1.5rem;
  border-color: var(--smsreg-border-color);
}

.sub-card {
  background-color: var(--smsreg-background-body);
}

/* CLOSE: Containers */


/* BEGIN: Alerts (including modals, popovers and session messages) */
.alert {
  padding: 0.5rem 1rem;
}

.alert .btn-close {
  font-size: 0.8rem;
  padding: 0.8rem;
}

[data-session-messages] {
  display: none;
}

.popover .popover-arrow {
  display: none;
}

#shared-modal .modal-header {
  margin-bottom: 0.5rem;
}

#shared-modal .modal-description {
  color: var(--smsreg-muted);
  padding: 0 1rem;
}

#shared-modal .modal-error {
  color: var(--smsreg-danger);
  padding: 0 1rem;
}

#shared-modal .modal-error .alert {
  margin-bottom: 0;
  margin-top: 1rem;
}

#shared-modal hr.divider {
  /* this divider stretches to the left/right edges of the modal, no effect if not in modal */
  margin-left: -1rem;
  /* based on .modal-body padding */
  width: calc(100% + 2rem);
  /* based on .modal-body padding */
}

/* CLOSE: Alerts */


/* BEGIN: Forms */
.btn:disabled {
  font-weight: normal;
  opacity: 0.5;
}

.btn-white {
  background-color: white;
}

.btn-white:hover {
  background-color: var(--smsreg-primary);
  color: white;
}

.btn-normal {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  line-height: 18px;
}

.btn-reject {
  border: 1px solid var(--smsreg-danger);
  color: var(--smsreg-danger);
}

.btn-reject:hover {
  background-color: var(--smsreg-danger);
  color: white;
}

.btn-green {
  background-color: var(--smsreg-new);
  border-color: var(--smsreg-new);
  color: white;
}

.btn-green:hover {
  background-color: var(--smsreg-new);
  color: white;
}

.btn.btn-blue {
  border: 1px solid var(--smsreg-border-color);
  color: var(--smsreg-primary);
  line-height: 18px;
  font-size: 1rem;
  font-weight: bold;
}

.btn.btn-proforma {
  background-color: white;
  font-weight: normal;
}

.btn-proforma:hover {
  background-color: var(--smsreg-primary);
  color: white;
}

.dropdown-checkboxes .form-check-label {
  color: var(--smsreg-body);
}

.form-check-input {
  height: 1rem;
  width: 1rem;
}

.form-control {
  border: 1px solid var(--smsreg-border-color);
}

.form-control-plaintext[disabled],
.form-control-plaintext[readonly] {
  background: none;
  border: none;
}

.form-field {
  margin-bottom: var(--smsreg-margin-bottom);
}

.form-field .input-group input,
.table-functions .input-group input {
  border: none;
}

/* make Bootstrap switch larger */
.form-switch {
  margin-bottom: 0;
  padding-left: 0;
  transform: scale(1.5);
}

.form-switch .form-check-input {
  cursor: pointer;
  margin-left: 1rem;
}

.form-switch .form-check-input:checked {
  background-color: var(--smsreg-new);
  border-color: var(--smsreg-new);
}

.form-switch .form-check-input:focus {
  border-color: var(--smsreg-border-color);
  box-shadow: none;
}

/* Focus outline on input group instead of input in input group, adapted from https://stackoverflow.com/a/63236801 */
.input-group:focus-within {
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
  /* copied from Bootstrap .form-control:focus */
}

.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control:focus,
.input-group:focus-within .form-select:focus {
  border: none;
  box-shadow: none;
}

.modal-body .input-group:not(.has-border),
.modal-body .input-group.has-border input,
.table-wrapper .input-group select {
  border: none;
}

.table-wrapper .input-group .input-group-text {
  padding-right: 0.25rem;
}

.table-wrapper .table-functions .table-actions a {
  top: 1.5rem;
}

li.filter-body ul>li.clear-filter-body {
  margin-bottom: 0px;
}

/* small font size 12px */
.fs-8 {
  font-size: 0.8rem;
}

@media (max-width: 1050px) and (min-width:768px) {
  .table-actions-container .table-actions {
    padding-left: 0px;
    margin-top: 1rem;
  }
}

@media (max-width: 767px) {

  .table-wrapper .card-body .table-functions .table-actions-container .table-actions a.link-export-list,
  .table-wrapper .card-body .table-functions .table-actions-container .table-actions span a.link-revert-senderid {
    display: block;
    position: relative;
    left: 0px;
    top: 0;
  }

  .table-wrapper .card-body .table-functions .table-actions-container .table-actions span a.link-cancel-revert-senderid {
    position: relative;
    right: 0;
    top: 0;
    text-align: right;
    display: block;
  }

  .table-wrapper .card-body .table-functions .table-actions-container .table-actions {
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
  }
}

/* CLOSE: Forms */


/* BEGIN: Navigation (includes links, breadcrumbs and tabs) */
.breadcrumb-item {
  font-size: 0.75rem;
  text-transform: capitalize;
}

.nav-tabs {
  border: none;
}

.nav-tabs .nav-item .nav-link,
.nav-tabs .nav-link {
  /* override Bootstrap */
  color: var(--smsreg-muted);
  background: none;
  border: none;
  font-weight: bold;
  text-transform: uppercase;
}

nav-tabs .nav-item .nav-link:hover,
.nav-tabs .nav-link:hover {
  /* override Bootstrap */
  color: var(--smsreg-primary);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  /* override Bootstrap */
  color: var(--smsreg-primary);
  background: none;
  border-bottom: 0.25rem solid var(--smsreg-primary) !important;
  /* need important cos of button:focus in style.css */
}

.nav-tabs .nav-item.show .nav-link:hover,
.nav-tabs .nav-link.active:hover {
  /* override Bootstrap */
  color: var(--smsreg-customer);
}

li.nav-item button.nav-link.btn-disabled {
  opacity: .5;
}

li.nav-item button.nav-link.btn-disabled:hover {
  border: none !important;
  color: var(--smsreg-muted);
}

.navbar-left hr {
  margin: 1.5rem -1.5rem;
}

.navbar-left .legend-content {
  display: none;
}

.navbar-left .legend-content-inner {
  padding: 1rem;
  border-color: var(--smsreg-border-color) !important;
}

.navbar-left .legend-content-inner > div:nth-child(5) i.bi {
  font-size: 1rem;
  width: auto;
  height: auto;
  line-height: 1;
}

.navbar-left .legend-content-inner .red-color,
.navbar-left .legend-content-inner .blue-color {
  font-weight: bold;
}

.navbar-left .legend-content-inner ul {
  padding-left: 1.25rem;
}

.navbar-left .legend-content .legend-title {
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: var(--smsreg-muted);
  padding-bottom: 0.75rem;
}

.navbar-left .legend-content ul:last-child {
  margin-bottom: 0px;
}

.navbar-left.show-label .legend-content {
  display: block !important;
}

.navbar-left .legend-content-inner div:last-child {
  display: flex;
  align-items: center;
}

.navbar-left .legend-content-inner i.bi-flag-fill.title {
  margin-bottom: 0px;
}

/* CLOSE: Navigation */


/* BEGIN: Pagination */
.page-item.active .page-link {
  /* override Bootstrap */
  background-color: var(--smsreg-primary);
  border-color: var(--smsreg-primary);
}

.pagination {
  /* override Bootstrap .pagination */
  font-size: 0.8rem;
  margin-bottom: 0;
}

.pagination-refresh-link,
.pagination-refresh-link:hover {
  /* invisible link to refresh table linked to pagination w/o refreshing page */
  color: transparent;
  text-decoration: none;
}

/* CLOSE: Pagination */


/* BEGIN: Tables */
th {
  text-transform: uppercase;
}

.record-listing th {
  color: var(--smsreg-muted);
  font-size: 0.75rem;
}

.record-listing tbody {
  box-shadow: 0 0 0 1px var(--smsreg-border-color);
  /* border-radius does not with border for tbody hence box-shadow */
}

.record-listing tbody tr:last-child td {
  border-bottom-width: 0;
  /* remove bottom border for td in last row */
}

.record-listing tbody tr td:last-child {
  text-align: right;
}

.record-listing td {
  vertical-align: middle;
}

.record-listing td a {
  font-size: 1.5rem;
  /* this is needed so that icons will be bigger */
  margin: 0.625rem;
}

.record-listing td a i.bi {
  margin: 0;
}

.record-listing> :not(:first-child) {
  /* override Bootstrap ".table > :not(:first-child)", remove thick line btw thead and tbody */
  border-top: none;
}

/* CLOSE: Tables */


/* BEGIN: Text (including status badges and status dots) */
code {
  padding: 2px;
  color: #c7254e;
  background-color: #f9f2f4;
}

.badge {
  border: 1px solid black;
  text-transform: uppercase;
}

.badge i {
  font-size: 1rem;
  margin-right: 0.5rem;
  line-height: 1rem;
  position: relative;
  top: 2px;
}

.badge .badge-info {
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.badge-add {
  background-color: white;
  border-color: white;
  color: var(--smsreg-new);
}

.badge-accepted {
  border-color: #14B8A6;
  color: #14B8A6;
}

.badge-approved {
  background-color: var(--smsreg-new);
  border-color: var(--smsreg-new);
  color: white;
}

.badge-blacklist {
  background-color: #42444A;
  border-color: #42444A;
  color: white;
}

.badge-delete {
  background-color: white;
  border-color: white;
  color: var(--smsreg-danger);
}

.badge-pending {
  border-color: var(--smsreg-border-color);
  color: var(--smsreg-muted);
}

.badge-rejected {
  background-color: var(--smsreg-danger);
  border-color: var(--smsreg-danger);
  color: white;
}

.badge-request-info {
  background-color: var(--smsreg-border-color);
  border-color: var(--smsreg-border-color);
  color: var(--smsreg-body);
}

.badge-renewal {
  color: var(--smsreg-body);
}

.badge-transfer,
.badge-transfer-add,
.badge-transfer-delete {
  background-color: white;
  border-color: var(--smsreg-border-color);
  color: var(--smsreg-muted);
}

.badge-primary,
.badge-user-acceptance {
  background-color: var(--smsreg-primary);
  border-color: var(--smsreg-background-body);
}

.badge-whitelist {
  background-color: var(--smsreg-background-body);
  border-color: var(--smsreg-background-body);
  color: var(--smsreg-muted);
}

.badge-unpaid {
  border-color: var(--smsreg-danger);
  color: var(--smsreg-danger);
}

.badge-transition,
.badge-misuse {
  color: var(--smsreg-primary);
  border-color: var(--smsreg-primary);
}

.badge-non-payment {
  border-color: var(--smsreg-danger);
  color: var(--smsreg-danger);
}

/* Priorities */
.badge-urgent {
  background-color: white;
  border-color: white;
  color: var(--smsreg-danger);
  padding: 0;
}

.badge-normal {
  background-color: white;
  border-color: white;
  color: var(--smsreg-muted);
  padding: 0;
}

/* admin badge */
.badge-admin {
  background-color: var(--smsreg-color-orange);
  border-color: var(--smsreg-color-orange);
  color: white;
}

.dot {
  font-size: 1.75rem;
  line-height: 1.3125rem;
  margin-right: 0.4375rem;
  position: relative;
  top: 0.25rem;
}

td .dot {
  margin-right: 0.5rem;
}

.dot::before {
  content: '\2022';
}

.dot-accepted {
  color: #2964DB;
}

.dot-approved {
  color: #2964DB;
}

.dot-default {
  color: var(--smsreg-border-color)
}

.dot-deleted {
  color: #F82363;
}

.dot-black {
  color: #42444A;
}

.dot-success,
.dot-live {
  color: #00D9A0;
}

.dot-pending {
  color: #DFE0E5;
}

.dot-holding {
  color: #2C4B6C;
}

.dot-expired,
.dot-failure,
.dot-rejected {
  color: var(--smsreg-danger);
}

.dot-sent {
  color: #FFD100;
}

.dot-unpaid {
  color: var(--smsreg-muted);
}

.note {
  font-size: 0.75rem;
}

.text-no-whitespace {
  white-space: nowrap;
}
/* CLOSE: Text */


/* BEGIN: Utility Classes */
.border-transparent {
  border-color: transparent;
}

.clickable {
  cursor: pointer;
  /* adding role="button" to an element will change the cursor to pointer also but not guaranteed */
}

/** colors **/
.blue-color {
  color: var(--smsreg-primary) !important;
}

.red-color {
  color: var(--smsreg-danger);
}

/* CLOSE: Utility Classes */

/* BEGIN: customize merchant view information tab style*/
.tab-content .tab-pane[data-preset=information] .row .col {
  margin-top: 0;
  margin-bottom: 0;
}

/* CLOSE: customize merchant view information tab style*/


/* BEGIN: customize merchant view user tab style*/
.table-wrapper[data-render-id^=application-list] .table-actions-container,
.table-wrapper[data-render-id^=actor-list] .table-actions-container {
  flex: 1;
}

/* CLOSE: customize merchant view user tab style*/

/*BEGIN: greylist tab style*/
.tab-content .tab-pane[data-preset=greylist] .table-actions-container {
  flex: 1;
}

/* CLOSE: customize merchant view information tab style*/

/* BEGIN: password reset screen */
.sub-text {
  color: var(--smsreg-muted);
  font-size: 0.875rem;
  margin: 0.5rem 0;
}

.btn-link {
  color: var(--smsreg-primary);
  text-decoration: underline;
  background: none;
  border: none;
  font-weight: bold;
}

.btn-link:hover {
  color: var(--smsreg-customer);
}

/* CLOSE: password reset screen */

/* BEGIN: bulk sender ID add page */
.bulk-add-senderID .container-bulk-add-senderID {
  max-width: 764px;
}

.bulk-add-senderID .form-check {
  margin: 6px 0 0;
}

.bulk-add-senderID .container-senderId textarea {
  min-height: 180px;
  overflow-y: hidden;
}

.bulk-add-senderID .container-senderId {
  width: 30%;
}

.bulk-add-senderID .container-senderId .note {
  font-size: 0.875rem;
}

.bulk-add-senderID textarea.merchant-group-two-remarks {
  min-height: 103px !important;
}

.bulk-add-senderID .request-info {
  position: sticky;
  top: 0;
}

/* CLOSE: bulk sender ID add page */

.field-error {
  border-color: var(--smsreg-danger);
}

label.sub-label {
  font-size: 0.75rem;
  display: block;
}

.badge.badge-profile {
  font-size: 0.7rem;
  margin-right: 10px;
  top: -2px;
  position: relative;
}

/* BEGIN: Batch sending progress */
.progress-modal .status-container {
  text-align: center;
}

.progress-modal .progress-title {
  font-size: 2rem;
  margin-top: 20px;
  font-weight: bold;
}

.progress-modal .spinner-border {
  width: 100px;
  height: 100px;
  font-size: 40px;
  margin-top: 20px;
}

.progress-modal .check-icon {
  font-size: 100px;
  margin-top: 20px;
  color: var(--smsreg-new);
}

/* CLOSE: Batch sending progress */

.fix-column-table-container {
  overflow: auto;
  width: 100%;
}

@media (max-width: 1024px) {
  .table-with-pagination>div {
    width: calc(100vw - 84px);
    overflow-x: auto;
  }

  table.table.record-listing.js-record-listing {
    width: 1280px;
  }

}

.fix-column-table-container table {
  border-collapse: collapse;
  width: 100%;
}

.fix-column-table-container table td {
  border-collapse: collapse;
}

.fix-column-table-container .table td:first-child {
  border-left: 1px solid var(--smsreg-border-color);
  border-radius: 0.5px;
}

.fix-column-table-container .table td:last-child {
  border-right: 1px solid var(--smsreg-border-color);
  border-radius: 0.5px;
}

.fix-column-table-container .table th {
  border-bottom: 1px solid var(--smsreg-border-color);
}

.fix-column-table-container .table td:first-child,
.fix-column-table-container .table th:first-child,
.fix-column-table-container.fix-1-column .table td:nth-child(1),
.fix-column-table-container.fix-1-column .table th:nth-child(1),
.fix-column-table-container.fix-3-column .table td:nth-child(3),
.fix-column-table-container.fix-3-column .table th:nth-child(3),
.fix-column-table-container.fix-2-column .table td:nth-child(2),
.fix-column-table-container.fix-2-column .table th:nth-child(2) {
  position: sticky;
  left: 0px;
  z-index: 4;
  background: #fff;
}

.fix-column-table-container .table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.fix-column-table-container.fix-3-column table.table td:nth-child(3),
.fix-column-table-container.fix-3-column table.table th:nth-child(3) {
  left: 40px;
}

.content-password-rules {
  font-size: 0.85rem;
}

.content-password-rules .bi-check-circle-fill {
  font-size: 11px;
}

.content-password-rules .bi-check-circle-fill.checked {
  color: var(--smsreg-new);
}

/** tables has no actions **/
.no-action-listing tbody tr td:last-child {
  text-align: left;
}

/** BEGIN Pagination Responsiveness **/
.page-numbers {
  display: flex;
}

.mobile-page-numbers {
  display: none;
}

@media(max-width: 794px) {
  .mobile-page-numbers {
    display: flex;
  }

  .page-numbers {
    display: none;
  }
}

/** END Pagination Responsiveness **/

/** BEGIN Login/Register pages **/
.sub-title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  margin-top: 2.5rem;
}

.btn-create-account {
  border: 1px solid var(--smsreg-border-color);
  color: var(--smsreg-primary);
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  line-height: 18px;
}

.btn-create-account:hover {
  background-color: var(--smsreg-primary);
  border-color: var(--smsreg-primary);
  color: white;
}

.form-register .input-group {
  margin-bottom: 0.5rem;
}

.form-register .input-group:nth-child(3) {
  margin-bottom: 0.5rem;
}

.form-register .captcha-section {
  margin: 0 -0.25rem;
}

.form-register .captcha-section  > .col {
  padding: 0 0.25rem;
}

.form-register .captcha-section > .col img {
  height: 38px;
  width: 100%;
}

.form-register .captcha-section > .col:first-child {
  max-width: fit-content;
}

.wild>.row {
  margin: 0;
}

.wild .wild-right form > .input-group:first-child {
  margin-bottom: 0.5rem;
}

.wild .wild-right form.js-form-otp .input-group {
  margin-bottom: 1rem;
}

.wild-left.aggregator-login {
  background: url(/public/images/aggregator-backgroud-login.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.wild-left.aggregator-login h1 {
  color: var(--smsreg-body);
}

.btn.btn-primary.btn-aggregator {
  margin-top: 0.75rem;
  margin-top: 1.25rem;
  font-weight: bold;
  padding: 0.375rem 1rem;
  text-decoration: none;
}

.public-links {
    margin-top: 1.5rem !important;
}

.public-links a i {
    font-size: 32px;
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
}

.public-links a {
  margin: 0px 12px;
  width: 50%;
  line-height: 18px;
  font-weight: normal;
  font-size: 14px;
  text-align: left;
}

.public-links a:first-child {
  text-align: right;
}

@media(max-width: 767px) {
  .btn.btn-primary.btn-aggregator {
    margin-top: 0.5rem;
  }

  .wild-left.aggregator-login+.wild-right {
    padding-bottom: 1.5rem;
  }

  .row.code-verification .col:first-child {
    margin-bottom: 1rem;
  }
}

.access-link {
  margin-top: 2.5rem;
}

.access-link i.bi {
    margin-left: 0.5rem !important;
    font-size: 1rem;
}

.access-link a {
  color: var(--smsreg-primary);
    font-size: 14px;
}
.access-link a:hover {
  color: var(--smsreg-customer);
}

.access-link hr {
  width: 100%;
  color: var(--smsreg-border-color);
}

.footer {
  margin: 2.5rem 0 0;
  font-size: 0.75rem;
  padding: 0;
  color: var(--smsreg-muted);
}

div.multiple-selection {
  max-width: 100%;
}

.multiple-selection .vscomp-wrapper.has-error .vscomp-toggle-button {
  border-color: var(--smsreg-border-color);
}

.multiple-selection .vscomp-wrapper.show-value-as-tags .vscomp-value-tag-content {
  width: 100%;
  overflow: hidden;
  white-space: normal;
  text-overflow: unset;
  font-size: 1rem;
}

.multiple-selection .vscomp-wrapper.show-value-as-tags .vscomp-value-tag span.vscomp-value-tag-clear-button {
  display: none;
}

.multiple-selection .vscomp-wrapper.show-value-as-tags .vscomp-value-tag {
  border: none;
  padding: 0;
  margin: 0;
  overflow: auto;
  text-overflow: unset;
  white-space: normal;
  line-height: 24px !important;
  display: inline;
  border-radius: 0 !important;
}

.multiple-selection .vscomp-wrapper .vscomp-toggle-button {
  border: 1px solid black;
  border-color: var(--smsreg-border-color);
  border-radius: var(--smsreg-border-radius);
  margin-bottom: var(--smsreg-margin-bottom);
  padding: 0.375rem 1rem !important;
  margin-bottom: 0;
}

.multiple-selection .vscomp-wrapper.show-value-as-tags:not(.has-value) .vscomp-value {
  padding-bottom: 0px;
  min-height: 24px;
}

.multiple-selection .vscomp-wrapper.show-value-as-tags .vscomp-arrow {
  height: 36px;
}

.multiple-selection .vscomp-wrapper.focused .vscomp-toggle-button, .multiple-selection .vscomp-wrapper:focus .vscomp-toggle-button {
  box-shadow: none;
}

.multiple-selection .vscomp-wrapper .pop-comp-wrapper {
  box-shadow: none;
  border: 1px solid black;
  border-color: var(--smsreg-border-color);
  border-radius: var(--smsreg-border-radius);
  color: inherit;
}

.multiple-selection .vscomp-option.focused, .multiple-selection .vscomp-option.selected {
  background: var(--smsreg-background-body);
}

.multiple-selection .vscomp-option {
  padding: 0.5rem 1rem;
  align-items: flex-start;
  font-size: 1rem;
  color: var(--smsreg-body);
  height: auto !important;
  min-height: 40px;
}

.multiple-selection .vscomp-options-container {
  max-height: 230px !important;
}

.multiple-selection .vscomp-dropbox {
  border-radius: 5px;
}

.multiple-selection .vscomp-search-container {
  border-color: var(--smsreg-border-color);
}

.multiple-selection .vscomp-wrapper .checkbox-icon {
  width: 16px;
  height: 16px;
  margin-right: 0.75rem;
  top: 3px;
}

.multiple-selection .vscomp-wrapper .checkbox-icon::after {
  border: 1px solid var(--smsreg-border-color);
  border-radius: 3.2px;
  background: #fff;
}

.multiple-selection .vscomp-wrapper.multiple .vscomp-option .vscomp-option-text {
  width: calc(100% - 28px);
  overflow: unset;
  white-space: normal;
}

.multiple-selection .vscomp-option.selected .checkbox-icon {
  background-color: var(--smsreg-primary);
  border-radius: 3.2px;
  padding: 2px;
}

.multiple-selection .vscomp-wrapper.show-value-as-tags .vscomp-value-tag:last-child span.vscomp-value-tag-content:after {
  display: none;
}

.multiple-selection .vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon::after {
  transform: rotate(45deg) translate(1px, -3px);
  background: none;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.multiple-selection .vscomp-wrapper.show-value-as-tags .vscomp-value-tag-content:after {
  content: ",";
  font-size: 1rem;
  display: inline;
  padding-right: 0.5rem;
}

.multiple-selection .vscomp-wrapper {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: #2C4B6C;
}

.multiple-selection .vscomp-wrapper .vscomp-value {
  padding-bottom: 0px;
  min-height: 24px !important;
  line-height: 24px;
}

.multiple-selection .vscomp-clear-button.toggle-button-child {
  display: none !important;
}

textarea[name="billing_address"] {
  resize: none;
}

.content-info {
  width: 384px;
  margin-left: -32px;
}

.content-info button.btn.btn-primary {
  margin-top: 0.5rem;
}

.public-link-separator {
  border-right: 1px var(--smsreg-border-color) solid;
}

.optional {
  margin: 0 10px;
  background: var(--smsreg-background-body);
  color: var(--smsreg-muted);
  line-height: 1.5;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 5px;
  font-size:0.75rem;
}

.login-price-content {
  max-width: 18.75rem;
  padding: 1rem;
  background-color: #000000A6;
}

@media (max-width: 991px) and (min-width: 768px) {
  .content-info {
    padding: 0;
    width: 100%;
    margin-left: 0px;
  }

  .multiple-selection .vscomp-dropbox {
    background: none;
    border-radius: 5px;
  }
}

@media (max-width: 767px) {
  .content-info {
    padding: 0;
    margin-bottom: -4.5rem;
  }

  .wild .footer {
    position: absolute;
    width: 100%;
    flex-wrap: wrap;
    text-align: center;
  }

  .wild .footer .flex-grow-1 {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 3rem;
    order: 2;
  }

  .wild .footer .flex-grow-1+div {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .login-price-content {
    max-width: 100%;
  }
}

/** END Login/Register Pages **/

/** BEGIN left menu **/
.menu-seperator-text {
  font-size: 0.8rem;
  color: var(--smsreg-muted);
}

/** END left menu **/

/** BEGIN Aggregator pages **/

/** verification page **/

.code-verification .card-footer {
  border-color: var(--smsreg-border-color);
}

/** listing page **/
.trail-listing .dot-failure {
  color: #DFE0E5;
}

.trail-listing .bi-chat-left-text {
  margin-top: 0.25rem;
}

.trail-listing .aggregator-hide-0 {
  display: block !important;
}

.trail-list-wrapper .dot-expired {
  color: #2C4B6C;
}

.trail-list-wrapper .select-status {
  border: none;
}

.trail-list-wrapper .card-body {
  padding: 1rem 1.5rem;
}

.trail-list-wrapper .table-actions-container {
  flex-grow: 1;
}

.trail-list-wrapper .row.code-verification {
  margin-bottom: 0;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.trail-list-wrapper .row.code-verification label {
  font-weight: bold;
  font-size: 0.875rem;
}

.trail-listing .sub-text {
  margin-bottom: 0;
  margin-top: 0.25rem;
  line-height: 1.25;
}

.trail-listing td.code {
  width: 198px;
}

.customer .trail-listing td.code,
.aggregator .trail-listing td.code {
  width: auto;
}

.trail-listing td.text-muted + td.code {
  width: 140px;
}
.trail-list-wrapper .row.code-verification .input-group input {
  font-size: 1rem;
  padding: 0.5rem 0 0.5rem 1rem;
}

.trail-list-wrapper .row.code-verification .multiple-selection-element {
  margin-bottom: var(--smsreg-margin-bottom);
}

.trail-list-wrapper .row.code-verification .inner-col {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.trail-list-wrapper .row.code-verification .inner-col .row.form-field .col {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.trail-list-wrapper .row.code-verification .inner-col .row.form-field {
  margin-bottom: 0;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.trail-list-wrapper .code-verification .multiple-selection .vscomp-wrapper.has-error .vscomp-toggle-button {
  padding: 0.5rem 1.75rem 0.5rem 1rem !important;
}

.trail-list-wrapper .code-verification .row.form-field [class*="col-"] {
  padding: 0 0.5rem;
}

.trail-list-wrapper .code-verification .select-status {
  padding: 0.5rem 1rem;
}

.trail-list-wrapper .code-verification + .bottom-part {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.trail-list-wrapper .code-verification + .bottom-part h4 {
  margin-bottom: 0rem;
}

.trail-list-wrapper .code-verification .input-group input[type=date] {
  padding: 0.5rem 1rem;
}

.code-verification .multiple-selection .vscomp-wrapper .pop-comp-wrapper {
  z-index: 9 !important;
}

@media (max-width: 1050px) and (min-width:768px) {
  .trail-list-wrapper .table-actions-container .table-actions {
    margin-top: 0;
  }
}

@media(max-width: 1280px) and (min-width: 768px) {
  .code-verification .row.form-field [class*="col-"] {
    width: 50%;
  }
}

@media (max-width: 910px) {
  .trail-list-wrapper .table-wrapper .card-body .table-functions > div:first-child {
      width: 100%;
      margin-right: 0px !important;
    }
  
    .trail-list-wrapper .table-wrapper .card-body .table-functions > div:nth-child(2) {
      width: 100%;
      margin: 0.75rem 0;  
    }
  
    .trail-list-wrapper .filter.btn-group {
      width: 100%;
      margin-right: 0;
    }
  
    .trail-list-wrapper .table-functions input,
    .trail-list-wrapper .filter.btn-group button {
      font-size: 14px;
    }  
  
    .trail-list-wrapper .table-wrapper .card-body .table-functions .table-actions-container .table-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      align-items: center;
    }
  
    .trail-list-wrapper .btn-set-expire {
      grid-column: 1 / span 2;
      font-size: 14px;
    }
  }

/** responsiveness **/
@media (max-width: 1279px) {
  .code-description {
    display: block !important;
  }

  .code-description .col.px-0.d-flex.flex-grow-1.me-4 {
    margin-right: 0px !important;
  }
}

/** END Aggregator pages **/

/** BEGIN public organisations listing page */
.header-background {
  padding: 1.5rem 1rem 9rem;
  background-color: #243F76;
  color: white;
  position: relative;
}

.header-background::before {
  content: "";
  background-image: url(../images/public-listing-background.png);
  background-size: cover;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 15%;
}

.header-background-inner {
  max-width: 1140px;
  margin: auto;
  position: relative;
}

.header-background-inner h2 {
  margin-bottom: 0.75rem;
}

.header-background-inner>.pb-4 {
  padding-bottom: 0px !important;
}

.top-content {
  margin: -105px auto 0;
  background: white;
  padding: 1.5rem;
  max-width: 1140px;
  box-shadow: 0px 8px 60px 0px rgb(16 40 88 / 15%);
  -webkit-box-shadow: 0px 8px 60px 0px rgb(16 40 88 / 15%);
  -moz-box-shadow: 0px 8px 60px 0px rgba(16, 40, 88, 0.15);
  border-radius: 0.5rem !important;
  position: relative;
}

.top-content.sender-id-query {
  font-size: 1.125rem;
  line-height: 2rem;
}

.top-content ol {
  padding-left: 1rem;
  margin-bottom: 0;
}

.top-content-title {
  padding-left: 0;
}

.top-content ol {
  padding-left: 1rem;
}

.top-content ol li {
  padding-left: 0.5rem;
}

.top-content ol.sub-ol.mt-2 {
  margin-bottom: 0px;
  font-size: 0.75rem;
}

.top-content .special-note {
  background-color: var(--smsreg-customer);
  border-radius: 0.5rem;
  padding: 15px;
  color: white;
}

.top-content .special-note a {
  color: inherit;
  text-decoration: underline;
}

.bottom-content {
  margin: 2rem auto 0;
  background: white;
  padding: 0.5rem 1.5rem 1.5rem;
  max-width: 1140px;
  box-shadow: 0px 8px 60px 0px rgb(16 40 88 / 15%);
  -webkit-box-shadow: 0px 8px 60px 0px rgb(16 40 88 / 15%);
  -moz-box-shadow: 0px 8px 60px 0px rgba(16, 40, 88, 0.15);
  border-radius: 0.5rem !important;
}

.bottom-content .table-wrapper .card-body {
  padding: 1rem 0rem 1.5rem;
}

.bottom-content table tr th {
  padding-top: 0px;
  border-bottom: none !important;
}

.bottom-content tbody {
  border-radius: 0.5rem;
}

.bottom-content tbody tr td {
  border: none !important;
}

.bottom-content .record-listing tbody {
  box-shadow: inset 0 0 0 1px var(--smsreg-border-color);
}

.bottom-content .record-listing tbody tr:nth-child(even) {
  background: #F0F3FB80;
}

.bottom-content .record-listing td {
  height: auto;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.bottom-content .pagination-wrapper {
  margin-bottom: 0px;
}

.bottom-content+.footer {
  margin: 1.5rem 0 2.5rem !important;
}

.bottom-content .record-listing tbody tr td {
  text-align: left;
  background-color: transparent !important;
}

.bottom-content .record-listing tbody tr:nth-child(even) td:first-child {
  border-left: 1px solid var(--smsreg-border-color) !important;
}

.bottom-content .record-listing tbody tr:nth-child(even) td:last-child {
   border-right: 1px solid var(--smsreg-border-color) !important;
}

.bottom-content .record-listing tbody tr:nth-child(even) {
  background-color: var(--smsreg-background-body);
}

.sub-ol {
  font-size: 0.8rem;
  color: var(--smsreg-background-black);
}

.org-check-content {
  padding: 1.5rem;
  background-color: var(--smsreg-background-body);
  border-radius: 0.25rem;
  align-items: center;
}

.org-check-content .checkbox-content {
  width: 115px;
  align-items: center;
}

.org-check-content .form-switch .form-check-input {
  margin-right: 0.5rem;
}

.org-check-content .span-opt-out {
  width: 53px;
}

.public-list-table-functions {
  margin-bottom: 2rem;
}

@media (max-width: 1171px) {
  .top-content, .bottom-content {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

@media (max-width: 768px) {
  .bottom-content .pagination-wrapper {
    margin: 0px;
  }

  .bottom-content ul.pagination.mobile-page-numbers {
    justify-content: center !important;
    margin-top: 1rem;
  }
}

@media (min-width: 280px) {
  .bottom-content .table-with-pagination>div {
    width: 100% !important;
  }

  .bottom-content table.table.record-listing.js-record-listing {
    width: 100% !important;
  }
}

@media (max-width: 1024px) and (min-width: 280px) {
  .bottom-content .table-with-pagination>div {
    width: 100% !important;
  }
}

@media only screen and (min-width: 1024px) {
  .org-check-content .form-switch {
    transform: none;
  }

  .org-check-content .form-switch .form-check-input {
    width: 60px;
    height: 30px;
    margin: 0;
  }
}

/** END public organisations listing page */

/** BEGIN public senderID listing page */
.public-page-content {
  min-height: 88vh;
}

.request-status {
  Width: 12px;
  Height: 12px;
  border-radius: 8px;
  margin-right: 10px;
}

.request-status.registered {
  background-color: #14B8A6;
}

.request-status.not-registered {
  background-color: #2C4B6C;
}

.request-status.not-for-register {
  background-color: var(--smsreg-border-color);
}

.request-status.review {
  background-color: #F2994A;
}

.status-content {
  display: flex;
  align-items: center;
}

.search-result {
    margin: 2rem auto 0;
    max-width: 1140px;
    font-size: 1.5rem;
    font-weight: bold;
}

.filter.btn-group .btn-filter .bi.filter-icon {
  font-size: 1rem;
  color: var(--smsreg-muted);
  padding-left: 0;
}

@media (max-width: 1171px) {
  .top-content,
  .bottom-content {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
}
@media(max-width: 767px) {
  .fix-column-table-container tr.record td:first-child {
    min-width: 90px;
  }

  .request-status {
    padding: 0 4px;
    margin-bottom: 4px;
  }

  .status-content {
    display: block;
  }
}
/** END public senderID listing page */

/** BEGIN Holding tab in sender Ids list*/
.td-application-name .flagged-application {
  margin: 0px !important;
}

@media(max-width: 767px) {
  .table-functions-confirm div {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 8px;
  }

  .table-functions-confirm div button {
    margin: 0px !important;
  }

  .fix-column-table-container table[class*=" record-listing-holding"] td:nth-child(3) {
    width: 150px;
  }
}

/** END Holding tab in sender Ids list */

/** BEGIN information banner */
.card-widget.banner .banner-title {
  font-size: 1.5rem;
  margin: 0 0 0 1rem;
  line-height: 1.25;
}

.card-widget.banner {
  background-color: var(--smsreg-primary);
  color: white;
  padding: 1.5rem;
}

.card-widget.banner.banner-danger {
  background-color: var(--smsreg-danger);
  border-color: var(--smsreg-danger);
}

.card-widget.banner li {
  margin-bottom: 0.25rem;
}

.card-widget.banner .banner-highlight-text {
  font-size: 4rem;
  color:#45A5FF;
  font-weight: bold;
  line-height: 80%;
  letter-spacing: -0.5px;
  margin-right: 1rem;
  opacity: .5;
  z-index: 0;
  position: absolute;
  right: 0;
}

.tab-content > .card-widget.banner.text-white {
  margin-top: 1rem;
}

.card-widget i.bi.bi-info-circle-fill {
  font-size: 1.75rem;;
  color: var(--smsreg-color-orange);
  width: auto;
  height: auto;
  line-height: 1;
}

.tab-content .card-widget.banner {
  margin-top: 1rem;
}

/** END information banner */

/** BEGIN organization view page */
.card.sub-card .card-body.contact-detail {
  padding: 0.75rem;
}

.card.sub-card .card-body.contact-detail > div,
.card.sub-card .card-body.contact-detail {
  display: grid;
  gap: 0.25rem;
}
.email-text {
  font-size: 0.875rem;
}

.email-text .bi {
  font-size: 1rem;
}

.row.billing-contact-section > .col,
.row.maxbilled-content > .col {
  padding: 0 0.5rem;
}

.row.billing-contact-section,
.row.maxbilled-content {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

@media (max-width: 767px) {
  .row.billing-contact-section > .col {
    flex: 0 0 100%;
  }
}

/* Edit Organization form */
label[for="billing_name"] + .input-group,
label[for="billing_name_secondary"] + .input-group {
  margin-bottom: 0.5rem;
}

/* Slideshow container */
.remarks-slider.carousel {
  margin-bottom: 15px;
  margin-top: 0.5rem;
}

.remarks-slider .carousel-inner {
  display: flex;
}

.remarks-slider .carousel-item .remarks-text {
  background-color: var(--smsreg-background-body);
  padding: 0.75rem;
  margin: 0 1.5rem;
  border-radius: 5px;
}

.remarks-slider .carousel-item .sub-text {
  margin-top: 0.25rem;
  margin-bottom: 0;
  line-height: 1.25;
}
.remarks-slider .carousel-indicators {
  bottom: -32px;
}

.remarks-slider .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 0.5rem;
  border: none;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  background-color: var(--smsreg-background-grey);
}

.remarks-slider .carousel-indicators .active {
  background-color: var(--smsreg-primary);
  border-color: var(--smsreg-primary);
}

.remarks-slider .carousel-control-next,
.remarks-slider .carousel-control-prev {
  width: 20px;
}

.remarks-slider .carousel-control-next .bi,
.remarks-slider .carousel-control-prev .bi {
  font-size: 20px;
  color: var(--smsreg-background-grey);
}
  
.remarks-slider .carousel-control-next.active .bi,
.remarks-slider .carousel-control-prev.active .bi {
    color: var(--smsreg-body);
}
  
.remarks-slider .carousel-control-next.active .bi:hover,
.remarks-slider .carousel-control-prev.active .bi:hover {
    color: var(--smsreg-primary);
}
 
.content-separator {
 border-right: 1px var(--smsreg-border-color) solid;
}

.remarks-separator {
  margin: 15px -24px;
  border-bottom: 1px var(--smsreg-border-color) solid;
}

.card-content .remarks-separator + .row {
   margin-bottom: 0 !important;
}

.carousel-control-next,
.carousel-control-prev {
   opacity: 1;
}

@media(max-width: 767px) {
  .card.sub-card .card-body .contact-detail-mobile {
    display: block !important;
    gap: 1rem;
  }
    
  .card.sub-card .card-body .contact-detail-mobile > .d-flex {
    display: block !important;
  }

  .card.sub-card .card-body .contact-detail-mobile div:first-of-type {
    margin-bottom: 0.5rem;
  }

  .row.billing-contact-section > .col:first-child {
    margin-bottom: 1rem !important;
  }

  .row.maxbilled-content > .col:first-child {
    margin-bottom: 0.5rem !important;
  }
}
/** END organization view page */

/** BEGIN Dashboard page */
.dashboard .dashboard-icon {
  width: 28px;
  height: 28px;
  border-radius: 100%;
  background-color: var(--smsreg-background-body);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.75rem;
}

.dashboard .dashboard-icon.bg-dark {
  --bs-bg-opacity: 0.25;
  background: #000;
}

.customer .dashboard .dashboard-icon.bg-dark {
  --bs-bg-opacity: 0.25;
  background: #000;
}

.customer .dashboard .row.row-main {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.customer .dashboard .row-main [class*="col-"] {
padding: 0 0.75rem;
}

.dashboard .bi {
  top: 0;
  width: auto;
  height: auto;
}

.dashboard .bi.bi-clock {
  color: var(--smsreg-body);
}

.dashboard h3 {
  color: var(--smsreg-body);
  font-size: 2rem;
  font-weight: bold;
}

.dashboard .row-main {
  margin-top: 1.5rem;
}

.dashboard .dashboard-icon.white {
 background-color: var(--smsreg-background-body);
}

.dashboard .text-pending {
  font-weight: bold;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.text-pending + div a.widget-link {
  display: flex;
  align-items: center;
}

.text-pending + div a.widget-link i.bi-arrow-right-short {
  font-size: 1.25rem;
  margin-left: 0.5rem !important;
  line-height: 1.25rem;
}

.black-image {
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7497%) hue-rotate(76deg) brightness(100%) contrast(103%);
}

.card-widget .bi.bi-arrow-right-short {
  top: 0;
  font-size: 24px;
}

.dashboard .card-widget {
  padding: 1.5rem;
}

.dashboard .card-widget.bg-transparent {
  outline: 1px solid var(--smsreg-body);
  outline-offset: -1px;
}

.dashboard .card-widget.bottom-widget {
  padding: 0.75rem;
}

.dashboard .card-widget.bottom-widget--first {
  margin-bottom: 0.75rem;
}

.dashboard .row-main [class*="col-"] {
  padding: 0 1.25rem;
}

.dashboard .sub-row,
.dashboard .sub-row + .row {
  margin: 0 -0.5rem;
}

.dashboard .sub-row [class*="col-"],
.dashboard .sub-row + .row [class*="col-"] {
  padding: 0 0.5rem;
}

.dashboard .row-main {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.dashboard .row .row {
  align-items: start;
}

@media (min-width: 1200px) {
  .dashboard .row .row.row-main {
    min-width: 916px;
  }
}

@media (max-width: 1199px) {
  .dashboard .row.row-main .row.sub-row {
      margin-bottom: 1rem;
  }
  
  .dashboard .sub-row + .row [class*="col-"] {
    margin: 0 0 1rem !important;
  }

  .dashboard .sub-row + .row [class*="col-"]:last-child {
    margin-bottom: 0 !important;
  }

  .dashboard .card-widget.last-widget.bg-transparent {
    margin-bottom: 2.5rem !important;
  }
}

@media(max-width: 767px) {
  .dashboard .no-sender-id-count {
    margin-top: 0 !important;
  }

  .card-widget.banner .banner-highlight-text {
    font-size: 1.375rem;
    top: 1.5rem;
  }
}

/** END Dashboard page */

/** BEGIN Identification code page */

.sid-identification-code-wrapper .row.selection-section {
   margin-bottom: 2.5rem;
 }

@media (min-width: 768px) {
  .sid-identification-code-wrapper .selection-section .input-group {
    margin-bottom: 0;
  }
}
@media(max-width: 767px) {
  .sid-identification-code-wrapper .selection-section .col:last-child .input-group {
    margin-bottom: 0;
  }
}

/** END Identification code page */