/*--------------------------------------------------------------
# Directorist Override Styles
# Target: [Directorits]
# Description: Estilos personalizados para sobrescribir el plugin Directorist.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Layout
# Description: Estilos personalizados para el diseño de Directorist.
--------------------------------------------------------------*/

.directorist-container, .directorist-container-fluid, .directorist-container-xxl, .directorist-container-xl, .directorist-container-lg, .directorist-container-md, .directorist-container-sm {
    padding-right: .75rem;
    padding-left: .75rem;
}

.directorist-row {
  margin-right: -.75rem;
  margin-left: -.75rem;
  margin-top: -.75rem;
}

.directorist-row > * {
  padding-right: .75rem;
  padding-left: .75rem;
  margin-top: .75rem;
}

/*--------------------------------------------------------------
# Buttons
# Description: Estilos personalizados para los botones de Directorist.
--------------------------------------------------------------*/
.directorist-btn {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 0 1rem;
  border-radius: 50rem;
  transition: all 0.2s ease-in-out;

  &:hover,
  &:focus,
  &.directorist-btn-primary:hover,
  &.directorist-btn-primary:focus {
    background-color: color-mix(
      in srgb,
      var(--directorist-color-primary),
      black 10%
    );
    border-color: color-mix(
      in srgb,
      var(--directorist-color-primary),
      black 10%
    );
    box-shadow: 0 0.25rem 0.25rem 0.125rem
        rgba(var(--directorist-color-primary-rgb), 0.1),
      0 0.375rem 0.75rem -0.125rem rgba(var(--directorist-color-primary-rgb), 0.4);
  }

  &.directorist-btn-secondary,
  &.directorist-btn-secondary:hover,
  &.directorist-btn-secondary:focus,
  &.directorist-btn-outline-secondary,
  &.directorist-btn-outline-secondary:hover,
  &.directorist-btn-outline-secondary:focus {
    color: #172441;
  }

  &.directorist-btn-secondary {
    &:hover {
      box-shadow: 0 0.25rem 0.25rem 0.125rem color-mix(in srgb, var(--bs-gray-500), transparent 90%), 
      0 0.375rem 0.75rem -0.125rem color-mix(in srgb, var(--bs-gray-500), transparent 90%);
    }
  }

  &.directorist-btn-dark {
    &:hover {
      background-color: color-mix(
        in srgb,
        var(--directorist-color-dark),
        black 10%
      );
      box-shadow: 0 0.25rem 0.25rem 0.125rem
          rgba(var(--directorist-color-dark-rgb), 0.1),
        0 0.375rem 0.75rem -0.125rem rgba(var(--directorist-color-dark-rgb), 0.4);
    }
  }

  &.directorist-btn-success {
    &:hover {
      background-color: color-mix(
        in srgb,
        var(--directorist-color-success),
        black 10%
      );
      box-shadow: 0 0.25rem 0.25rem 0.125rem
          rgba(var(--directorist-color-success-rgb), 0.1),
        0 0.375rem 0.75rem -0.125rem rgba(var(--directorist-color-success-rgb), 0.4);
    }
  }

  &.directorist-btn-info {
    &:hover {
      background-color: color-mix(
        in srgb,
        var(--directorist-color-info),
        black 10%
      );
      box-shadow: 0 0.25rem 0.25rem 0.125rem
          rgba(var(--directorist-color-info-rgb), 0.1),
        0 0.375rem 0.75rem -0.125rem rgba(var(--directorist-color-info-rgb), 0.4);
    }
  }

  &.directorist-btn-light {
    color: #454056;
    background-color: #f5f4f8;
    border-color: #e4dfeb;
    &:hover,
    &:focus {
      color: #1f1b2d;
      background-color: #f5f4f8;
      border-color: #e4dfeb;
      box-shadow: 0 0.25rem 0.25rem 0.125rem color-mix(in srgb, var(--bs-gray-500), transparent 90%), 
      0 0.375rem 0.75rem -0.125rem color-mix(in srgb, var(--bs-gray-500), transparent 90%);
    }
  }

  &.directorist-btn-warning {
    &:hover {
      background-color: color-mix(
        in srgb,
        var(--directorist-color-warning),
        black 10%
      );
      box-shadow: 0 0.25rem 0.25rem 0.125rem
          rgba(var(--directorist-color-warning-rgb), 0.1),
        0 0.375rem 0.75rem -0.125rem rgba(var(--directorist-color-warning-rgb), 0.4);
    }
  }

  &.directorist-btn-danger {
    &:hover {
      background-color: color-mix(
        in srgb,
        var(--directorist-color-danger),
        black 10%
      );
      box-shadow: 0 0.25rem 0.25rem 0.125rem
          rgba(var(--directorist-color-danger-rgb), 0.1),
        0 0.375rem 0.75rem -0.125rem rgba(var(--directorist-color-danger-rgb), 0.4);
    }
  }

  &[class*="btn-outline"] {
    &:hover,
    &:focus {
      box-shadow: none;
    }
  }

  &.directorist-become-author {
    display: flex;
  }
}

/*--------------------------------------------------------------
# Dashboard
# Description: Estilos personalizados para el panel de control de Directorist.
--------------------------------------------------------------*/

/* Navigation Tab
------------------------------*/

.directorist-tab__nav__header {
  /* Profile Image (New area) */
  .directorist-user-dashboard__profile-pic-wrapper {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      background-color:#d5cddf;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: normal;
      color: #172441;
      /* border: 3px solid #ddd; */

    & .directorist-user-dashboard__profile-pic {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    & .directorist-user-dashboard__profile-pic--initials {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
    }
  }

  .user-status > span{
    display: flex;
    align-items: center;
    gap: 0.25rem;

    & .directorist-icon-mask {

      &::after {
        background-color: var(--bs-success);
      }
    }
  }
}

/* Nav */
.directorist-user-dashboard__nav {
  min-width: initial;
  padding: initial;
  margin-right: initial;
  transition: initial;
  -webkit-transition: initial;
  position: initial;
  left: initial;
  border-radius: initial;
  overflow: initial;
  overflow-y: initial;
  background-color: initial;
  box-shadow: initial;
  -webkit-box-shadow: initial;
  border: initial;

  &.directorist-dashboard-nav-collapsed {
    min-width: initial;
    width: 100% !important;
    height: initial;
    margin-right: initial;
    left: initial;
    visibility: initial;
    opacity: initial;
    padding: 0 calc(var(--bs-gutter-x) * 0.5);
    pointer-events: initial;
    transition: initial;
  }

  & .directorist-tab__nav__items:not(.show) {
    display: none;
  }

  @media (min-width: 768px) {
    &,
    &.directorist-dashboard-nav-collapsed {
      width: 41.66666667% !important;
    }

    & .directorist-tab__nav__items {
      display: block !important;
    }
  }

  @media (min-width: 992px) {
    &,
    &.directorist-dashboard-nav-collapsed {
      width: 33.33333333% !important;
    }
  }

  .directorist-btn.directorist-btn--add-listing {
    min-height: 50px;
    line-height: 48px;
  }

  .directorist-tab__nav__link {
    font-size: 16px;
    border-radius: none;
    padding: 1rem 0;
    position: relative;
    border-top: 1px solid #efecf3;
    transition: color 0.3s ease-in-out;

    &:before {
      position: absolute;
      opacity: 0;
      top: 0;
      left: -1.25rem;
      width: 0.125rem;
      height: 100%;
      background-color: var(--directorist-color-primary);
      content: "";
      transition: opacity 0.3s ease-in-out;
    }

    &.directorist-tab__nav__active::before {
      opacity: 1;
    }

    & .directorist-icon-mask:after {
      transition: background-color 0.3s ease-in-out;
    }

    &.directorist-tab__nav__active,
    &:hover,
    &:focus {
      font-weight: normal;
      background-color: transparent;
      color: var(--directorist-color-primary);

      & .directorist-icon-mask:after {
        background-color: var(--directorist-color-primary);
      }
    }

    & .directorist_menuItem-text {
      gap: 0.5rem;

      & i {
        margin-right: 0;
      }

      & i.fontawesome {
        transform: scale(0.8);
      }
    }
  }
}

/* Content Tab
------------------------------*/

/* Profile */
.directorist-user-info-wrap {
  & .directorist-btn-profile-save {
    width: auto;
    min-height: 45px;
  }
}

.directorist-image-profile-wrap .ezmu__thumbnail-list-item.ezmu__thumbnail_avater {
  flex-basis: auto;
}

/* Become Author Modal
------------------------------*/
.directorist-become-author-modal__content {
  padding: 1rem;
  border-radius: .75rem;
}

.directorist-become-author-modal__content h3 {
    font-size: calc(1.275rem + .3vw);
}

.directorist-become-author-modal__content .directorist-become-author-modal__approve,
.directorist-become-author-modal__content .directorist-become-author-modal__cancel {
  border: var(--bs-border-width) solid var(--bs-transparent);
  border-radius: 50rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: var(--bs-body-line-height);
  padding: 0.425rem 1rem!important;
  transition: all .2s ease-in-out;
}

.directorist-become-author-modal__content .directorist-become-author-modal__approve {
  color: var(--bs-white);
  background-color: var(--bs-primary);
}

.directorist-become-author-modal__content .directorist-become-author-modal__approve:hover,
.directorist-become-author-modal__content .directorist-become-author-modal__approve:focus {
  background-color: color-mix(in srgb, var(--directorist-color-primary), black 10%);
  border-color: color-mix(in srgb, var(--directorist-color-primary), black 10%);
  box-shadow: 0 0.25rem 0.25rem 0.125rem rgba(var(--directorist-color-primary-rgb), 0.1), 0 0.375rem 0.75rem -0.125rem rgba(var(--directorist-color-primary-rgb), 0.4);
}

.directorist-become-author-modal__content .directorist-become-author-modal__cancel {
  color: var(--bs-dark);
  background-color: var(--bs-secondary);
  border-color: var(--bs-border-color);
}

.directorist-become-author-modal__content .directorist-become-author-modal__cancel:hover,
.directorist-become-author-modal__content .directorist-become-author-modal__cancel:focus {
  box-shadow: 0 0.25rem 0.25rem 0.125rem color-mix(in srgb, var(--bs-gray-500), transparent 90%), 0 0.375rem 0.75rem -0.125rem color-mix(in srgb, var(--bs-gray-500), transparent 90%);
}


/*--------------------------------------------------------------
# Forms
# Description: Form styles
--------------------------------------------------------------*/

.directorist-form-group {
  label {
    font-size: 1rem;
    color: #172441;
    margin-bottom: 0.375rem;
  }

  .directorist-form-element {
    padding: 0.575rem 1.125rem;
    height: initial;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #172441;
    border: 1px solid #d5d2dc;
    border-radius: 0.5rem;
    background: #fff;

    &:focus {
      border: 1px solid #d5d2dc;
    }
  }
}

/* Select2 */
.directorist-content-active {
  .select2 {
    &.select2-container {
      &.select2-container--default .select2-selection {
        min-height: initial;
        border: 1px solid #d5d2dc;
        padding: 0 2.53125rem 0 1.125rem;
        border-radius: 0.5rem;
        background: #fff;
        &:focus {
          border-color: #d5d2dc; 
        }
        & .select2-selection__rendered {
          font-size: 1rem;
          line-height: 1.5rem;
          padding: 0.575rem 0!important;
          & input {
            font-size: 1rem;
            line-height: 1.5rem;
            min-height: 1.5rem;
          }
          & .select2-selection__choice {
            height: 1.5rem;
            line-height: 1.5rem;
          }
        }
        &.select2-selection--single {
          height: auto;
        }
      }

      &.select2-container--focus .select2-selection {
        border: 1px solid #d5d2dc;
        border-bottom: 1px solid #d5d2dc !important;
      }

      & .directorist-select2-addons-area {
        bottom: 22px;
        & .directorist-select2-dropdown-toggle {
          right: 1.125rem;
        }
      }
    }
  }
}

/*--------------------------------------------------------------
# Alerts
# Description: Estilos personalizados para las alertas de Directorist.
--------------------------------------------------------------*/

.directorist-alert {
  &-warning {
    .directorist-icon-mask {
      &:after {
        background-color: #F56E00;
      }
    }
  }
}

/*--------------------------------------------------------------
# Modal
--------------------------------------------------------------*/
.directorist-search-modal__contents__footer {
  background: #f5f4f8;
}

.directorist-advanced-filter__action .directorist-btn {
  border-radius: 50rem;
}

/*--------------------------------------------------------------
# Directory Types
# Description: Estilos personalizados para los tipos de directorio de Directorist.
--------------------------------------------------------------*/

/* Navigation
------------------------------*/
.directorist-content-active .directorist-type-nav__list {
  gap: .75rem;
  overflow: visible;
}

.directorist-content-active .directorist-type-nav .directorist-type-nav__link {
  color: #172441;
  background-color: #f5f4f8;
  flex-direction: row;
  padding: .5rem 1rem;
  border: solid 1px #e4dfeb;
  border-radius: 50rem;
  transition: color .2s ease-in-out, border-color .2s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.directorist-content-active .directorist-type-nav .directorist-type-nav__link:hover {
  box-shadow: 0 .125rem .125rem -.125rem rgba(31,27,45,.08),0 .25rem .75rem rgba(31,27,45,.08);
}

.directorist-content-active .directorist-type-nav__list .directorist-type-nav__link:hover .directorist-icon-mask::after {
  background-color: #172441;
}

.directorist-content-active .directorist-type-nav__list .current .directorist-type-nav__link, 
.directorist-content-active .directorist-type-nav__list .directorist-type-nav__list__current .directorist-type-nav__link {
  color: var(--directorist-color-primary);
  background-color: #fff;
  border-color: transparent;
  box-shadow: 0 .125rem .125rem -.125rem rgba(31,27,45,.08),0 .25rem .75rem rgba(31,27,45,.08);
}

.directorist-content-active .directorist-type-nav__list .current .directorist-icon-mask::after, 
.directorist-content-active .directorist-type-nav__list .directorist-type-nav__list__current .directorist-icon-mask::after,
.directorist-content-active .directorist-type-nav__list .current .directorist-type-nav__link:hover .directorist-icon-mask::after, 
.directorist-content-active .directorist-type-nav__list .directorist-type-nav__list__current .directorist-type-nav__link:hover .directorist-icon-mask::after {
  background-color: var(--directorist-color-primary);
}

.directorist-content-active .directorist-type-nav__link .directorist-icon-mask {
  margin: 0 0.5rem 0 0;
}

@media screen and (max-width: 767px) {
  .directorist-content-active .directorist-type-nav__list {
    overflow-x: unset;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 575px) {
  .directorist-content-active .directorist-type-nav__list li {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Directory Archive
# Description: Estilos personalizados para la lista de directorios de Directorist.
--------------------------------------------------------------*/

.atbdp-form-fade:after {
  background: rgba(255, 255, 255, .7);
}

/* Listing Header
------------------------------*/

/* Filter button */
.directorist-content-active .directorist-listings-header__left .directorist-filter-btn,
.directorist-dropdown__toggle {
  color: var(--directorist-color-dark);
  background-color: #f5f4f8!important;
  border: solid 1px #e4dfeb;
  border-radius: 50rem;
  transition: all 0.2s ease-in-out;

  &:hover,
  &:focus {
    color: var(--directorist-color-dark);
    background-color: #f5f4f8!important;
    border-color: #e4dfeb!important;
    box-shadow: 0 0.25rem 0.25rem 0.125rem color-mix(in srgb, var(--bs-gray-500), transparent 90%), 
    0 0.375rem 0.75rem -0.125rem color-mix(in srgb, var(--bs-gray-500), transparent 90%);
  }
}

/* Right content */
@media screen and (max-width: 425px) {
  .directorist-content-active .directorist-listings-header__right {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 100%;
    flex: 0 0 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

/* Sort by dropdown */
.directorist-dropdown.directorist-sortby-dropdown {
  border: none;
  border-radius: 0;
}

/* View as */
.directorist-viewas__item {
  border-radius: 50rem;
}

/*--------------------------------------------------------------
# Add Listing Types
# Description: Estilos personalizados para los tipos de listado de Directorist.
--------------------------------------------------------------*/
.directorist-add-listing-types__single__link {
  color: #172441;
  font-weight: bold;
  padding: 1.25rem;
  box-shadow: 0 .125rem .125rem -.125rem rgba(31, 27, 45, .08), 0 .25rem .75rem rgba(31, 27, 45, .08);
  transition: all .25s ease-in-out;
}

.directorist-add-listing-types__single__link:hover {
    color: #172441;
    background-color: var(--directorist-color-white);
    box-shadow: 0 .125rem .5rem -.25rem rgba(31,27,45,.12),0 .25rem 1rem rgba(31,27,45,.12)
}

.directorist-add-listing-types__single__link .directorist-icon-mask {
  background-color: rgba(var(--directorist-color-primary-rgb), 0.1);
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
}

.directorist-add-listing-types__single__link:hover .directorist-icon-mask {
  background-color: var(--directorist-color-primary);
}

.directorist-add-listing-types__single__link .directorist-icon-mask:after {
  background-color: var(--directorist-color-primary);
}

.directorist-add-listing-types__single__link:hover .directorist-icon-mask:after {
  background-color: var(--directorist-color-white);
}

/*--------------------------------------------------------------
# Single Listing
# Description: Estilos personalizados para los detalles de listado de Directorist.
--------------------------------------------------------------*/

.directorist-single-contents-area {
  margin-top: 4.5rem;
}

.directorist-single-contents-area .directorist-card .directorist-btn.directorist-btn-light {
	color: var(--directorist-color-primary);
	background-color:  var(--directorist-color-white);
	border-color: var(--directorist-color-primary);
}
.directorist-single-contents-area .directorist-card .directorist-btn.directorist-btn-light:hover {
	color: var(--directorist-color-white);
	background-color:  var(--directorist-color-primary);
}

/* Listing action buttons */
.directorist-single-listing-action {
	color: var(--bs-body-color)!important;
	background-color:  var(--directorist-color-white)!important;
	font-size: .875rem;
	padding: .425rem 1rem;
	box-shadow: 0 .125rem .125rem -.125rem rgba(31, 27, 45, .08), 0 .25rem .75rem rgba(31, 27, 45, .08) !important;
}
.directorist-single-listing-action:hover {
	color: var(--directorist-color-white)!important;
	background-color:  var(--directorist-color-primary)!important;
	box-shadow: 0 0.25rem 0.25rem 0.125rem
        rgba(var(--directorist-color-primary-rgb), 0.1),
      0 0.375rem 0.75rem -0.125rem rgba(var(--directorist-color-primary-rgb), 0.4)!important;
}

.directorist-single-listing-action.directorist-action-bookmark {
	width: 40px;
	height: 40px;
	padding: 0;
}
.directorist-single-listing-action.directorist-action-bookmark .directorist-icon-mask:after {
	background-color: var(--bs-body-color);
}
.directorist-single-listing-action.directorist-action-bookmark:hover .directorist-icon-mask:after {
	background-color: var(--directorist-color-white);
}

.directorist-contact-owner-form-inner .directorist-btn-submit {
	color: var(--directorist-color-white);
	background-color:  var(--directorist-color-primary);
}
.directorist-contact-owner-form-inner .directorist-btn-submit:hover,
.directorist-contact-owner-form-inner .directorist-btn-submit:focus {
	color: var(--directorist-color-white);
	background-color:  var(--directorist-color-primary);
	box-shadow: 0 0.25rem 0.25rem 0.125rem
        rgba(var(--directorist-color-primary-rgb), 0.1),
      0 0.375rem 0.75rem -0.125rem rgba(var(--directorist-color-primary-rgb), 0.4);
}


@media screen and (max-width: 991px) {
  .directorist-single-listing-slider-thumb {
    display: none!important;
  }
}


/*--------------------------------------------------------------
# Pricing Plans
# Description: Estilos personalizados para los planes de precios de Directorist.
--------------------------------------------------------------*/

#directorist-pricing-plan-container .directorist-type-nav {
  margin-bottom: 3rem;
}

#directorist-pricing-plan-container > .directorist-container-fluid > .directorist-row.directorist-justify-content-center {
  justify-content: start;
}

.directorist-pricing.directorist-pricing--1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  border-radius: .75rem;
}

.directorist-pricing.directorist-pricing--1 .directorist-pricing__title h4 {
  font-size: 1.25rem;
  font-weight: 400;
}

.directorist-pricing.directorist-pricing--1 .directorist-pricing__price {
  flex-grow: 1;
}

.directorist-pricing .directorist-pricing__price p.directorist-pricing__value {
  color: #172441;
  font-weight: bold;
}

.directorist-pricing .directorist-pricing__price p sup {
  color: #172441;
  top: unset;
  font-size: 2.5rem;
  margin-right: -0.5rem;
}

.directorist-pricing
.directorist-pricing__price
p.directorist-pricing__description {
  color: inherit;
  font-size: 1rem;
}

.directorist-pricing.directorist-pricing--1 .directorist-pricing__features ul li {
  color: inherit;
  font-size: 1rem;
  margin-bottom: .25rem;
}

.directorist-pricing.directorist-pricing--1 .directorist-pricing__features ul li small {
  font-size: .875rem;
  margin-left: .25rem;
}

.directorist-pricing .directorist-pricing__action .directorist-pricing__action--btn {
  color: var(--directorist-color-primary);
  background-color: transparent;
  font-size: 1rem;
  font-weight: bold;
  padding: .575rem 1.5rem;
  border-color: var(--directorist-color-primary);
  border-radius: 50rem;
}

.directorist-pricing.directorist-pricing--1.directorist-pricing-special .directorist-pricing__action .directorist-pricing__action--btn:hover {
  background-color: #da3655!important;
}