/*
Be careful with css selectors. Each component must have prefix of the container, e.g. "mp-news"
Global style overriding is not permitted as it will change global style of website, e.g. input[type="text"]
is not allowed.
*/

section#main {
  min-height: 330px;
}

/*BOOTSTRAP OVERRIDES*/

.mp-widget-content a {
  cursor: pointer;
}

.mp-widget-content .input-group-append .btn,
.mp-widget-content .input-group-prepend .btn {
  z-index: auto !important;
}

.mp-widget-content .mpg-img {
  width: 100%;
}

.mp-widget-content .event-location-dates-div {
  display: flex;
  align-items: baseline;
  color: #535353;
}

.mp-widget-content .event-location-dates-paragraph {
  margin-left: 10px;
}

.mp-widget-content .details-div {
  border-top: 1px solid #1a5b98;
}

.mp-widget-content .event-filters-nav {
  padding: 0;
}

.mp-widget-content .mp-single {
  margin-bottom: 15px;
  min-height: 177px;
}

.mp-widget-content .mp-filter {
  margin-bottom: 25px;
}

.mp-widget-content .circle-icon {
  height: 50px;
  width: 50px;
}

.mp-widget-content .post-description {
  color: #535353;
}

.mp-widget-content .btn-border {
  border: 1px solid #ced4da;
}

.mp-widget-content .mp-document {
  width: 100%;
  max-height: 200px;
}

.mp-widget-content .mp-img-height {
  height: 250px;
}

.mp-widget-content .avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.mp-widget-content .nav-tabs {
  display: none;
}

.mp-widget-content.mp-my-account .nav-tabs {
  display: flex;
}

.mp-widget-content .card {
  border: none;
}

.mp-widget-content .card-header .fas {
  transition: 0.3s transform ease-in-out;
  color: #1b71aa;
}

.mp-widget-content .card-header .collapsed .fas {
  transform: rotate(180deg);
}

.mp-widget-content .mp-marketplace-img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 300px;
}

.mp-widget-content .mp-dropdown-login {
  width: 400px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  border-bottom: 5px solid #005c9b !important;
}

.mp-widget-content .mp-dropdown-loggedIn {
  min-width: 100%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.mp-widget-content .mp-description-height {
  height: 144px;
  overflow: hidden;
}

mp-events-filter input#typeahead-basic {
  border-radius: 0.25rem !important;
}

mp-input {
  margin-bottom: 0 !important;
  width: 100%;
}

/* .mp-widget-content .mp-post-management-list mp-posts-single > div,
.mp-widget-content .mp-post-management-list mp-posts-single > div {
  min-width: 900px;
  padding: 10px 0;
}

.mp-widget-content .mp-post-management-list mp-posts-single:nth-child(2n) > div,
.mp-widget-content
  .mp-post-management-list
  mp-posts-single:nth-child(2n)
  > div {
  background: #fafafa;
} */

.mp-widget-content .mp-post-details .rounded {
  border-radius: 5px !important;
}

.mp-widget-content .mp-post-details .post-div-width {
  width: 75%;
}

.mp-widget-content .mp-link-hover:hover {
  background-color: #dde9f2;
}

.mp-widget-content .mp-filter-input-invisible {
  z-index: 0 !important;
}

.mp-widget-content .mp-pre-font-family {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: medium;
}

.mp-widget-content .mp-light-border {
  border: 1px solid lightgrey;
}

.mp-widget-content .mp-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

form.mp-preview select,
form.mp-preview input {
  border: 0;
  background-color: transparent !important;
  box-shadow: none;
  font-weight: bold;
  padding-left: 0;
  padding-top: 0;
  margin-left: 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 0;
}

.mp-my-account input.ng-invalid.ng-touched,
.mp-my-account select.ng-invalid.ng-touched,
.mp-my-account .submitted input.ng-invalid,
.mp-my-account .submitted select.ng-invalid {
  border-color: red;
  box-shadow: none;
}

/* TOOLTIP */

span.mp-tooltip {
  position: relative;
  box-sizing: content-box;
  margin-left: 2px;
}

.mp-tooltip::before,
.mp-tooltip::after {
  --scale: 0;

  position: absolute;
  top: -0.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(-100%) scale(var(--scale));
  transition: 150ms transform;
  transform-origin: bottom center;
}

.mp-tooltip::before {
  content: attr(data-tooltip);
  color: white;
  padding: 0.5rem;
  border-radius: 0.3rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 300px;
  font-size: 0.8em;
  background: #333;
  text-align: center;
  white-space: pre-line;
}

.mp-tooltip:hover::before {
  --scale: 1;
}

.mp-widget-content a.btn.btn-primary,
.mp-widget-content a.btn.btn-danger {
  color: #fff;
}

.mp-my-account .mp-red-bordered-input {
  border-color: red;
}

/* SWEETALERT OVERRIDES */

.swal2-styled.swal2-confirm {
  background-color: #007bff !important;
}

.swal2-styled.swal2-cancel {
  background-color: #dc3545 !important;
}

.mp-password-hint ul {
  list-style: disc;
  padding-left: 40px;
}

.mp-password-hint li {
  list-style: disc;
}

#topHeader .mp-password-hint ul {
  list-style: disc;
  padding-left: 40px;
}

#topHeader .mp-password-hint li {
  list-style: disc;
}

.mp-widget-content .mp-long-text-list ol {
  display: block;
  list-style-type: decimal;
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
  -webkit-margin-after: 1em;
          margin-block-end: 1em;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
  -webkit-padding-start: 40px;
          padding-inline-start: 40px;
}

.mp-widget-content .mp-long-text-list li {
  display: list-item;
  text-align: -webkit-match-parent;
  list-style-type: decimal;
}

.mp-my-account .mp-actions {
  min-width: 120px;
  text-align: right;
}

.modal-dialog.modal-xl {
  min-height: 80vh;
}

.modal-dialog.modal-xl > div {
  height: auto;
}

.modal-content {
  position: relative;
  /* display: -ms-flexbox; */
  display: flex;
  /* -ms-flex-direction: column; */
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
  top: 90px;
}

@media (max-width: 991px) {
  .mp-widget-content .mp-post-details .post-div-width {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .mp-widget-content .mp-filter-lbl-display {
    display: none;
  }

  .mp-widget-content .mp-post-filter-bottom {
    margin-bottom: 0px;
  }
}

@media (max-width: 575px) {
  .mp-widget-content .tab-content > .tab-pane {
    display: block;
    opacity: 1;
  }
  .mp-widget-content .card-header {
    background-color: transparent;
    border-bottom: 2px solid #e2f2fc;
  }

  .mp-widget-content .mp-shadow-div {
    box-shadow: 4px 6px 10px #f4f4f4;
    margin-bottom: 30px;
  }

  .mp-widget-content .mp-single {
    display: grid;
  }

  .mp-widget-content .mp-description-position {
    grid-row-start: 1;
    grid-column-start: 1;
    opacity: 0.9;
    background-color: #1d426c;
    min-height: 100%;
  }

  .mp-widget-content .mp-img-position {
    /* grid-row-start: 1;
    grid-column-start: 1; */
    display: none;
  }

  .mp-widget-content .mp-chevron-position {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
  }

  .mp-widget-content .mp-white-text {
    color: white;
  }

  .mp-widget-content .mp-filter-section {
    margin-bottom: 0 !important;
  }

  .mp-widget-content .mp-post-management-list {
    margin: 0 !important;
  }

  .mp-widget-content .mp-management-list div {
    padding-left: 15px;
  }

  .mp-widget-content .mp-management-list > .mp-management-list-content {
    margin-bottom: 10px;
  }

  .mp-widget-content .mp-management-actions {
    min-width: 120px;
  }

  .mp-widget-content .mp-management-list .mp-management-actions {
    padding-left: 0 !important;
  }

  .mp-widget-content .mp-post-details .post-div-width {
    width: 100%;
  }
  .mp-widget-content .mp-filter-margins {
    margin-left: 0px;
    margin-right: 0px;
  }
}

mp-posts-single {
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

@media (min-width: 576px) {
  mp-posts-single {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  mp-posts-single {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

@media (min-width: 992px) {
  mp-posts-single {
    flex: 0 0 25%;
    max-width: 25%;
  }
}