@use "../variables";

/* Start::body */
body {
  font-size: variables.$default-font-size;
  font-family: variables.$default-font-family;
  font-weight: variables.$default-font-weight;
  background-color: variables.$default-body-color;
  color: variables.$default-text-color;
  line-height: 1.5;
  text-align: start;
  overflow-x: clip;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  ::-webkit-scrollbar {
    width: 0;
    height: 0.25rem;
    transition: all ease 0.05s;
    background: variables.$light;
    border-radius: 10px;
  }

  :hover::-webkit-scrollbar-thumb {
    background: variables.$input-border;
  }
}

/* End::body */

a,
button {
  outline: 0 !important;
}

/* Start::basic */
.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

@media (min-width: 992px) {
  .app-content {
    min-height: calc(100vh - 8rem);
    margin-block-end: 0;
    margin-block-start: 5.25rem;
    margin-inline-start: 16rem;
    transition: all 0.05s ease;
  }
}

@media (min-width: 991.98px) {
  .main-content {
    padding: 0 1rem;
  }
}

@media (max-width: 991.98px) {
  .main-content {
    padding-block-start: 3.75rem;
  }
}

/* End::basic */

/* Start::App Content */

.bd-example>.dropdown-menu {
  position: static;
  display: block;
}

/* Start::width */
.min-w-fit-content {
  min-width: fit-content;
}

/* End::width */

/* Start::Scrollspy */
.scrollspy-example {
  height: 12.5rem;
  margin-block-start: 0.5rem;
  overflow: auto;
}

.scrollspy-example-2 {
  height: 21.875;
  overflow: auto;
}

.scrollspy-example-3 {
  height: 13.75rem;
  overflow: auto;
}

.simple-list-example-scrollspy .active {
  background-color: variables.$primary;
  color: variables.$white;
}

.scrollspy-example-4 {
  height: 12.5rem;
  margin-block-start: 0.5rem;
  overflow: auto;
}

/* End::Scrollspy */

/* Start::Carousel */
.carousel-inner {
  border-radius: 0.35rem;
}

.carousel-caption {
  color: variables.$white;
}

/* End::Carousel */

/* Start::navbar */
.fixed-top {
  position: static;
  margin: -1rem -1rem 0rem -1rem;
}

.fixed-bottom {
  position: static;
  margin: 1rem 0rem -1rem -1rem;
}

.sticky-top {
  position: static;
  margin: -1rem -1rem 0rem -1rem;
}

/*End::navbar*/

/* Start::Helpers */
.bd-example-ratios .ratio {
  display: inline-block;
  width: 10rem;
  color: variables.$text-muted;
  background-color: variables.$primary-01;
  border: variables.$default-border;
  border-radius: variables.$default-radius;
}

@media (min-width: 768px) {
  .bd-example-ratios-breakpoint .ratio-4x3 {
    --bs-aspect-ratio: 50%;
  }
}

.bd-example-ratios-breakpoint .ratio-4x3 {
  width: 15rem;
}

/* End::Helpers */

/* Start::Layouts */
.bd-example-row [class^="col"],
.bd-example-cssgrid .grid>* {
  padding-block-start: 0.75rem;
  padding-block-end: 0.75rem;
  background-color: rgba(var(--light-rgb), 0.75);
  border: 1px solid variables.$default-border;
}

.bd-example-cssgrid .grid>* {
  border-radius: 0.25rem;
}

.bd-example-row-flex-cols .row {
  min-height: 10rem;
  background-color: rgba(var(--light-rgb), 0.5);
}

.grid {
  display: grid;
  grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
  grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
  gap: var(--bs-gap, 1.5rem);

  .g-start-2 {
    grid-column-start: 2 !important;
  }

  .g-col-2 {
    grid-column: auto/span 2;
  }

  .g-start-3 {
    grid-column-start: 3;
  }

  .g-col-3 {
    grid-column: auto/span 3;
  }

  .g-col-4,
  .g-col-md-4 {
    grid-column: auto/span 4;
  }

  .g-col-6 {
    grid-column: auto/span 6;
  }

  .g-start-6 {
    grid-column-start: 6;
  }
}

/* End::Layouts */

.callout {
  padding: 1.25rem;
  margin-block-start: 1.25rem;
  margin-block-end: 1.25rem;
  background-color: variables.$light;
  border-inline-start: 0.25rem solid variables.$default-border;
}

.callout-info {
  background-color: rgba(var(--info-rgb), 0.075);
  border-color: rgba(var(--info-rgb), 0.5);
}

.callout-warning {
  background-color: rgba(var(--warning-rgb), 0.075);
  border-color: rgba(var(--warning-rgb), 0.5);
}

.callout-danger {
  background-color: rgba(var(--danger-rgb), 0.075);
  border-color: rgba(var(--danger-rgb), 0.5);
}

.flex-container div {
  background-color: transparent;
  border: 0;

  >div {
    background-color: variables.$light;
    border: 1px solid variables.$custom-white;
  }
}

.bd-example-position-utils {
  position: relative;
  padding: 2rem;

  .position-relative {
    height: 12.5rem;
    background-color: variables.$default-background;
  }

  .position-absolute {
    width: 2rem;
    height: 2rem;
    background-color: variables.$primary-01;
    border-radius: 0.375rem;
  }
}

/* End::Utilities Page */

/* Start:: Images & Figures */
.bd-placeholder-img-lg {
  font-size: 3.5rem;
}

.figure-caption {
  color: variables.$text-muted;
}

/* End:: Images & Figures */

/* End:App-Content */

/*  Start::Footer*/
@media (min-width: 992px) {
  [data-nav-layout="vertical"] {
    .footer {
      padding-inline-start: 16rem;
    }
  }
}

.footer {
  border-top: 0px solid variables.$default-border;
}

/*  End::Footer*/

/* Start::OffCanvas */
.offcanvas {
  background-color: variables.$custom-white;
  color: variables.$default-text-color;
  border-color: variables.$default-border !important;
}

.offcanvas-body {
  flex-grow: 1;
  padding: 1rem 1rem;
  overflow-y: auto;
}

/* End::OffCanvas */

/* Start::Switcher */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#switcher-main-tab {
  border-block-end: 0;
}

#switcher-canvas {
  width: 27.5rem;

  .offcanvas-body {
    padding: 0 0 7rem 0;
  }

  .canvas-footer {
    padding: 0.75rem 1.563rem;
    position: absolute;
    inset-block-end: 0;
    width: 100%;
    background-color: variables.$custom-white;
    border-block-start: 1px dashed variables.$default-border;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
  }

  #switcher-main-tab button.nav-link {
    border-radius: 0;
    color: variables.$default-text-color;
    font-weight: 400;

    &.active {
      color: variables.$danger;
      background-color: rgba(var(--danger-rgb), 0.2);
      border-color: transparent;
    }

    &:hover {
      border-color: transparent;
    }
  }
}

.switcher-style {
  padding: 0.875rem 1.563rem;

  h6 {
    margin-block-end: 0.625rem;
  }
}

.switcher-icon i {
  animation-name: spin;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.switch-select {
  .form-check-label {
    font-size: 0.813rem;
    font-weight: 400;
  }

  &.form-check {
    margin-block-end: 0;
    min-height: auto;
  }
}

.menu-image {
  .menu-img-select {
    width: 3.5rem;
    height: 5.625rem;
    border-radius: variables.$default-radius;
    position: relative;

    .form-check-input {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: variables.$default-radius;
      background-color: transparent;
      margin-top: 0;
      box-shadow: none;

      &:checked[type=radio] {
        --bs-form-check-bg-image: transparent;
      }

      &:focus {
        box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.2);
      }
    }

    .bg-img-container {
      position: absolute;
      width: 100%;
      height: 100%;
      inset-inline-start: 0;
      inset-block-start: 0;
      z-index: -1;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: variables.$default-radius
      }
    }

    &.form-check-input:focus {
      border-color: transparent;
      box-shadow: 0 0 0 0.25rem variables.$black-1;
    }
  }
}

.theme-colors {
  &.switcher-style {
    padding: 0.938rem 1.563rem;
  }

  .switch-select {
    &.color-transparent {
      position: relative;

      .color-input.form-check-input:checked {
        background-color: transparent;
        border: 0;
        box-shadow: none;
      }

      .color-transparent-background {
        position: absolute;
        width: 100%;
        height: 100%;
        inset-inline-start: 0;
        inset-block-start: 0;
        border-radius: 50%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%;
        }
      }
    }

    .color-input {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;

      &.form-check-input:checked {
        border: 1px solid variables.$input-border;
        position: relative;
        box-shadow: variables.$box-shadow;

        &:before {
          position: absolute;
          content: "\ea5e";
          font-family: tabler-icons !important;
          color: variables.$success;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.35rem;
          font-weight: 400;
        }
      }

      &.color-white {
        background-color: variables.$white;
      }

      &.color-dark {
        background-color: variables.$black;
      }

      &.color-primary {
        background-color: variables.$primary;
      }

      &.color-primary-1 {
        background-color: rgb(42, 16, 164);
      }

      &.color-primary-2 {
        background-color: rgb(125, 0, 189);
      }

      &.color-primary-3 {
        background-color: rgb(4, 118, 141);
      }

      &.color-primary-4 {
        background-color: rgb(138, 0, 32);
      }

      &.color-primary-5 {
        background-color: rgb(9, 124, 103);
      }

      &.color-gradient {
        background-image: variables.$primary-gradient;
      }

      &.color-bg-1 {
        background-color: rgb(0, 8, 52);
      }

      &.color-bg-2 {
        background-color: rgb(58, 0, 109);
      }

      &.color-bg-3 {
        background-color: rgb(0, 59, 70);
      }

      &.color-bg-4 {
        background-color: rgb(65, 0, 0);
      }

      &.color-bg-5 {
        background-color: rgb(1, 77, 46);
      }
    }

    .form-check-input:checked[type="radio"] {
      background-image: none;
    }

    .form-check-input:focus {
      box-shadow: none;
    }

    .form-check-input:active {
      filter: brightness(100%);
    }
  }
}

.switcher-style-head {
  font-size: 0.8rem;
  font-weight: 500;
  margin-block-end: 0;
  background: variables.$light;
  padding: 0.313rem 0.625rem;
  color: variables.$default-text-color;

  .switcher-style-description {
    float: right;
    font-size: 0.625rem;
    background-color: rgba(var(--secondary-rgb), 0.2);
    color: variables.$secondary;
    padding: 0.125rem 0.313rem;
    border-radius: variables.$default-radius;
  }
}

#switcher-home,
#switcher-profile {
  padding: 0;
}

.theme-container-primary,
.theme-container-background {
  button {
    display: none;
  }
}

.pickr-container-primary,
.pickr-container-background {
  .pickr .pcr-button {
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid variables.$input-border;

    &:focus {
      box-shadow: none;
    }

    &::after {
      content: "\EFC5";
      font-family: remixicon !important;
      color: rgba(variables.$white, 0.7);
      line-height: 1.5;
      font-size: 1.25rem;
    }
  }
}

/* End::Switcher */

/* Start::Bootstrap Styles */
.card {
  background-color: variables.$custom-white;
  border: 1px solid variables.$bootstrap-card-border;
}

.img-thumbnail {
  background-color: variables.$custom-white;
  border: 1px solid variables.$default-border;
}

/* End::Bootstrap Styles */

/* Start::Dashboard Apex Charts  */
#btcCoin,
#ethCoin,
#dshCoin,
#glmCoin {

  .apexcharts-grid,
  .apexcharts-xaxis {
    line {
      stroke: transparent;
    }
  }
}

.apexcharts-title-text {
  fill: variables.$text-muted;
}

/* Start::Dashboard Apex Charts  */

/* Start::Switcher */
@media (max-width: 991.98px) {
  .navigation-menu-styles {
    display: none;
  }
}

/* Start::Switcher */

/* Start:Responsive Dropdowns */
@media (max-width: 575.98px) {

  .cart-dropdown,
  .timelines-dropdown,
  .notifications-dropdown,
  .header-shortcuts-dropdown,
  .header-fullscreen {
    display: none !important;
  }
}

/* End:Responsive Dropdowns */

/* Start::Close Button */
.btn-close:focus {
  box-shadow: none !important;
}

/* End::Close Button */

/* Start::Icons Page */
.icons-list {
  list-style: none;
  margin: 0 -1px -1px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;

  .icons-list-item {
    text-align: center;
    height: 3rem;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid variables.$default-border;
    margin: 0.25rem;
    box-shadow: variables.$box-shadow;
    border-radius: 50%;

    i {
      font-size: 1.05rem;
      color: variables.$default-text-color;
    }
  }
}

.fe {
  font-size: inherit !important;
}

/* End::Icons Page */

.bd-placeholder-img {
  margin: 0.125rem;
}

/* Start::Shadows */
.shadow-primary {
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3) !important;
}

.shadow-secondary {
  box-shadow: 0 4px 12px rgba(var(--secondary-rgb), 0.3) !important;
}

.shadow-success {
  box-shadow: 0 4px 12px rgba(var(--success-rgb), 0.3) !important;
}

.shadow-info {
  box-shadow: 0 4px 12px rgba(var(--info-rgb), 0.3) !important;
}

.shadow-warning {
  box-shadow: 0 4px 12px rgba(var(--warning-rgb), 0.3) !important;
}

.shadow-danger {
  box-shadow: 0 4px 12px rgba(var(--danger-rgb), 0.3) !important;
}

.shadow-orange {
  box-shadow: 0 4px 12px rgba(var(--orange-rgb), 0.3) !important;
}

.shadow-purple {
  box-shadow: 0 4px 12px rgba(var(--purple-rgb), 0.3) !important;
}

/* End::Shadows */

/* Start::placeholders */
.placeholder-xl {
  min-height: 1.5em;
}

.placeholder {
  background-color: variables.$gray-7;
}

/* End:::placeholders */

/* Start::scrollspy */
.scrollspy-example-2 {
  height: 21.875rem;
  border: 1px solid variables.$default-border;
  padding: 0.75rem;
  border-radius: variables.$default-radius;
}

/* End::scrollspy */

/* Start::object-fit */
.object-fit-container {
  display: flex;
  align-items: center;
  justify-content: center;

  img,
  video {
    width: 15.625rem;
    height: 15.625rem;
  }
}

@media (max-width: 374px) {
  .object-fit-container {

    img,
    video {
      width: 10.625rem;
      height: 10.625rem;
    }
  }
}

/* End::object-fit */

/* Start::invoice */
.dropzone.company-logo-upload {
  min-height: 75px;

  .dz-message {
    margin: 0;
  }
}

.invoice-amount-input {
  width: 9.375rem;
}

.choices-control {
  .choices__inner {
    background-color: variables.$light !important;
    border: 0 !important;
  }
}

.svg-icon-background {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.625rem;
  border-radius: variables.$default-radius;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.invoice-quantity-container {
  width: 8.75rem;
}

.invoice-card {
  .desktop-logo {
    display: block;
  }

  .desktop-dark {
    display: none;
  }
}

[data-theme-mode="dark"] {
  .invoice-card {
    .desktop-logo {
      display: none;
    }

    .desktop-dark {
      display: block;
    }
  }
}

/* End::invoice */

/* Start::pricing */
ul.pricing-features-list {
  margin-block-end: 0;

  li {
    margin-block-end: 0.85rem;
    padding-inline-start: 1.5rem;
    position: relative;

    &:before {
      content: "\F270";
      font-family: bootstrap-icons !important;
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;
      color: variables.$success;
    }

    &:last-child {
      margin-block-end: 0;
    }
  }
}

.pricing-recommended-badge {
  position: absolute;
  top: -10px;
  font-size: 12px;
  width: 8rem;
  inset-inline-start: 35%;
}

.card.custom-card.dashboard-main-card.pricing-card {
  &:before {
    content: "";
    width: 100%;
    height: 30%;
    inset-inline-start: 0;
    inset-block-start: 0;
    border-end-start-radius: 50%;
  }

  &.pricing-primary:before {
    background-image: linear-gradient(to right top, transparent, transparent, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.1));
  }

  &.pricing-success:before {
    background-image: linear-gradient(to right top, transparent, transparent, rgba(var(--success-rgb), 0.1), rgba(var(--success-rgb), 0.1));
  }

  &.pricing-warning:before {
    background-image: linear-gradient(to right top, transparent, transparent, rgba(var(--warning-rgb), 0.1), rgba(var(--warning-rgb), 0.1));
  }
}

ul.pricing-features-list-1 {
  margin-block-end: 0;

  li {
    margin-block-end: 0.85rem;
    padding-inline-start: 1.5rem;
    position: relative;

    &:before {
      content: "\eb7a";
      font-family: remixicon !important;
      position: absolute;
      inset-inline-start: -3px;
      inset-block-start: 3px;
      color: variables.$success;
      font-size: 18px;
      line-height: 1;
      font-weight: 600;
    }

    &:last-child {
      margin-block-end: 0;
    }
  }
}

/* End::pricing */

/* Start::Team */
.team-member {
  z-index: 0;
  overflow: auto;

  .avatar.avatar-xxl {
    width: 7.5rem;
    height: 7.5rem;
  }

  .team-bg-shape {
    position: absolute;
    width: 100%;
    height: 115px;
    inset-inline-start: 0px;
    z-index: -1;
    opacity: 0.94;

    &.primary {
      background-color: variables.$primary-05;
    }

    &.secondary {
      background-color: rgba(var(--secondary-rgb), 0.5);
    }

    &.success {
      background-color: rgba(var(--success-rgb), 0.5);
    }

    &.orange {
      background-color: rgba(var(--orange-rgb), 0.5);
    }

    &.info {
      background-color: rgba(var(--info-rgb), 0.5);
    }

    &.warning {
      background-color: rgba(var(--warning-rgb), 0.5);
    }

    &.danger {
      background-color: rgba(var(--danger-rgb), 0.5);
    }

    &.teal {
      background-color: rgba(var(--teal-rgb), 0.5);
    }
  }
}

/* End::Team */

/* Start:: Contacts */
.contact-action {
  position: relative;
  padding: 1.25rem;
}

/* Start:: Contacts */

/* Start:: Notifications */
.notification-container {
  li.read {
    background-color: variables.$gray-3;
  }
}

/* End:: Notifications */

/* Start:: To Do Task */
.task-navigation ul.task-main-nav li {
  padding: 0.5rem;
  border-radius: var(--default-border);
  border-radius: 0.3rem;
  font-weight: 400;
  margin-block-end: 0.25rem;

  &:hover a {
    color: variables.$primary;
  }

  &.active {
    background-color: rgba(var(--primary-rgb), 0.1);

    div {
      color: variables.$primary;

      svg {
        fill: variables.$primary;
      }
    }
  }

  div {
    color: variables.$text-muted;

    svg {
      fill: variables.$text-muted;
    }
  }
}

.todo-menu-icon {
  svg {
    width: 20px;
    height: 20px;
  }
}

.task-pending-card {
  border: 1px solid rgba(var(--secondary-rgb), 0.4) !important;
}

.task-inprogress-card {
  border: 1px solid rgba(var(--primary-rgb), 0.4) !important;
}

.task-completed-card {
  border: 1px solid rgba(var(--success-rgb), 0.4) !important;
}

.task-pending-card,
.task-inprogress-card,
.task-completed-card {
  .card-body {
    position: relative;

    .badge {
      position: absolute;
      inset-block-end: 1.25rem;
      inset-inline-end: 1.25rem;
    }
  }

  &:hover {
    box-shadow: 0 0.25rem 1rem variables.$black-1;
  }
}

.task-tabs-container {
  .tab-pane {
    min-height: calc(100vh - 22rem);
    border: 0;
  }
}

th.todolist-progress {
  width: 150px;
}

.todolist-handle-drag {
  width: 50px;
}

.todo-box {
  touch-action: none;
}

button.btn.todo-handle {
  cursor: move;
}

/* End:: To Do Task */

/* Start:: Terms & Conditions */
.terms-list {
  >li {
    margin-block-end: 1.75rem;

    &:last-child {
      margin-block-end: 0;
    }

    li {
      margin-block-end: 0.5rem;

      &:last-child {
        margin-block-end: 0;
      }
    }
  }
}

.terms_conditions_welcome {
  background-image: linear-gradient(to right top, #efe6ff, #f3e6fe, #f8e6fc, #fce6fa, #ffe6f8);
}

/* End:: Terms & Conditions */

/* Start:: Faq's */
#accordionFAQ {
  max-height: 31.25rem;
}

.faq-accordion {
  &.accordion.accordion-primary .accordion-button.collapsed {
    color: variables.$default-text-color;
  }

  .accordion-body {
    background-color: variables.$custom-white;
    font-size: variables.$default-font-size;
    padding-inline-start: 3.25rem;
    padding-block-start: 0;
  }

  .accordion-button {
    font-weight: 600;

    &:after {
      font-weight: 500;
    }
  }

  .accordion-item {
    border: 0;
  }
}

.accordion.faq-accordion {
  .accordion-button {
    font-size: 16px;

    &:not(.collapsed) {
      background-color: variables.$custom-white;
      // padding-bottom: 0;
    }
  }
}

.card.custom-card.faq-banner-card {
  position: relative;
  z-index: 1;
  border: 0;
  overflow: hidden;

  .card-body {
    padding: 5rem;
  }

  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgba(var(--primary-rgb), 0.1);
    inset-inline-start: 0;
    inset-block-start: 0;
  }

  .faq-banner-background {
    position: absolute;
    width: 100%;
    height: 100%;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: -1;
    opacity: 0.2;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.nav-tabs-header.faq-nav .nav-item .nav-link.active {
  background-color: variables.$primary;
  color: variables.$white;
}

/* End:: Faq's */

/* Start:: Timeline */
.timeline,
.timeline .timeline-container {
  position: relative;
  width: 100%;
}

.timeline {

  .timeline-end,
  .timeline-start,
  .timeline-year {
    width: 100%;
    position: relative;
    z-index: 1;
    text-align: center;

    .avatar {
      display: inline-block;
    }
  }

  .timeline-year {
    margin: 1.875rem 0;
  }

  .timeline-continue {
    position: relative;
    padding: 3.75rem 0;
    width: 100%;

    &::after {
      content: "";
      position: absolute;
      height: 100%;
      width: 1px;
      inset-inline-start: 50%;
      top: 0;
      background: variables.$default-border;
      margin-inline-start: -1px;
    }
  }

  .row {

    &.timeline-left,
    &.timeline-right .timeline-date {
      text-align: end;
    }

    &.timeline-right,
    &.timeline-left .timeline-date {
      text-align: start;
    }

    &.timeline-right .timeline-date::after {
      inset-inline-end: -34px;
    }

    &.timeline-left .timeline-date::after {
      inset-inline-start: -34px;
    }
  }

  .timeline-right {
    .timeline-time-container {
      margin-inline-end: 1rem;
    }
  }

  .timeline-left {
    .timeline-time-container {
      margin-inline-start: 1rem;
    }
  }

  .timeline-time-container.primary {
    .timeline-date::after {
      background-color: variables.$custom-white;
      border: 1px dashed variables.$primary;
    }
  }

  .timeline-time-container.success {
    .timeline-date::after {
      background-color: variables.$custom-white;
      border: 1px dashed variables.$success;
    }
  }

  .timeline-time-container.warning {
    .timeline-date::after {
      background-color: variables.$custom-white;
      border: 1px dashed variables.$warning;
    }
  }

  .timeline-time-container.info {
    .timeline-date::after {
      background-color: variables.$custom-white;
      border: 1px dashed variables.$info;
    }
  }

  .timeline-time-container.danger {
    .timeline-date::after {
      background-color: variables.$custom-white;
      border: 1px dashed variables.$danger;
    }
  }

  .timeline-time-container.teal {
    .timeline-date::after {
      background-color: variables.$custom-white;
      border: 1px dashed variables.$teal;
    }
  }

  .timeline-date {
    font-size: .875rem;
    position: relative;
    margin: 1.5rem 0 0 0;
    font-weight: 400;

    &::after {
      display: block;
      content: '';
      width: .875rem;
      position: absolute;
      top: .1875rem;
      height: .875rem;
      background-color: variables.$custom-white;
      border: 2px solid variables.$primary;
      z-index: 1;
      border-radius: 50%;
    }
  }

  .timeline-box {
    display: inline-block;
    position: relative;
    padding: 20px;
    margin: 15px;
    border-radius: 6px;
    max-width: 400px;
    box-shadow: none;

    &.primary {
      background: linear-gradient(to bottom, rgba(var(--primary-rgb), 0.05), transparent);
      border: 1px dashed rgba(var(--primary-rgb), 0.1);
    }

    &.secondary {
      background: linear-gradient(to bottom, rgba(var(--secondary-rgb), 0.05), transparent);
      border: 1px dashed rgba(var(--secondary-rgb), 0.1);
    }

    &.warning {
      background: linear-gradient(to bottom, rgba(var(--warning-rgb), 0.05), transparent);
      border: 1px dashed rgba(var(--warning-rgb), 0.1);
    }

    &.info {
      background: linear-gradient(to bottom, rgba(var(--info-rgb), 0.05), transparent);
      border: 1px dashed rgba(var(--info-rgb), 0.1);
    }

    &.success {
      background: linear-gradient(to bottom, rgba(var(--success-rgb), 0.05), transparent);
      border: 1px dashed rgba(var(--success-rgb), 0.1);
    }

    &.danger {
      background: linear-gradient(to bottom, rgba(var(--danger-rgb), 0.05), transparent);
      border: 1px dashed rgba(var(--danger-rgb), 0.1);
    }

    &.teal {
      background: linear-gradient(to bottom, rgba(var(--teal-rgb), 0.05), transparent);
      border: 1px dashed rgba(var(--primary-rgb), 0.1);
    }

    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
    }

    &::after {
      top: 1.625rem;
      border-color: transparent;
      border-width: 10px;
    }

    &::before {
      top: 1.5625rem;
      border-color: transparent;
      border-width: .6875rem;
    }
  }

  .row.timeline-left .timeline-box::after,
  .row.timeline-left .timeline-box::before {
    inset-inline-start: 100%;
  }

  .row.timeline-right .timeline-box::after,
  .row.timeline-right .timeline-box::before {
    inset-inline-end: 100%;
  }

  .row.timeline-right .timeline-box::after {
    border-color: transparent;
  }

  .row.timeline-right .timeline-box::before {
    border-color: transparent;
  }

  .timeline-box .timeline-text {
    position: relative;
  }

  .timeline-right .timeline-time {
    text-align: end;
  }
}

@media (max-width: 767.98px) {
  .timeline-left {
    position: relative;

    .timeline-time-container {
      position: absolute;
      inset-block-start: 2px;

      .timeline-date::after {
        inset-inline-start: -3.4rem !important;
      }
    }

    .timeline-box {
      margin-block-start: 3.5rem;
    }
  }
}

@media (max-width: 767.98px) {
  .timeline {
    .timeline-continue::after {
      inset-inline-start: 1.5rem;
    }

    .row.timeline-left .timeline-date::after,
    .row.timeline-right .timeline-date::after {
      inset-inline-start: -2.4rem;
    }

    .timeline-box,
    .row.timeline-right .timeline-date,
    .row.timeline-left .timeline-date,
    .row.timeline-right .timeline-time,
    .row.timeline-left .timeline-time {
      margin-inline-start: 3.4375rem;
    }

    .row.timeline-left .timeline-box::after {
      inset-inline-start: -20px;
      border-color: transparent variables.$custom-white transparent transparent;
    }

    .row.timeline-left .timeline-box::before {
      inset-inline-start: -22px;
      border-color: transparent variables.$default-border transparent transparent;
    }

    .row.timeline-left,
    .row.timeline-right .timeline-date,
    .row.timeline-right .timeline-time {
      text-align: start;
    }

    .timeline-end,
    .timeline-start,
    .timeline-year {
      text-align: start;
    }

    .timeline-date {
      margin-block-start: 0;
    }
  }
}

[dir="rtl"] {
  @media (max-width: 767.98px) {
    .row.timeline-left .timeline-box::after {
      border-color: transparent transparent transparent variables.$custom-white;
    }

    .row.timeline-left .timeline-box::before {
      border-color: transparent transparent transparent variables.$default-border;
    }
  }

  .timeline .row.timeline-right .timeline-box::after {
    border-color: transparent transparent transparent var(--custom-white);
  }

  .timeline .row.timeline-right .timeline-box::before {
    border-color: transparent transparent transparent var(--default-border);
  }

  .timeline .timeline-box::before {
    border-color: transparent var(--default-border) transparent transparent;
  }

  .timeline .timeline-box::after {
    border-color: transparent var(--custom-white) transparent transparent;
  }
}

.notification {
  list-style-type: none;
  padding: 0;
  position: relative
}

.notification:before {
  content: '';
  position: absolute;
  top: 55px;
  bottom: 64px;
  width: 1px;
  background-color: variables.$default-border;
  inset-inline-start: 20%;
}

.notification>li {
  position: relative;
  min-height: 50px;
  padding: 15px 0
}

.notification .notification-time {
  position: absolute;
  inset-inline-start: 0;
  width: 18%;
  text-align: end;
  top: 30px;
}

.notification .notification-time .date,
.notification .notification-time .time {
  display: block;
  font-weight: 500;
}

.notification .notification-time .date {
  line-height: 16px;
  font-size: 11px;
  margin-bottom: 4px;
  color: variables.$text-muted;
}

.notification .notification-time .time {
  line-height: 24px;
  font-size: 18px;
  color: variables.$text-muted;
}

.notification .notification-icon {
  inset-inline-start: 15%;
  position: absolute;
  width: 10%;
  text-align: center;
  top: 51px
}

.notification .notification-icon a {
  text-decoration: none;
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50%;
  background: variables.$custom-white;
  line-height: 10px;
  color: variables.$custom-white;
  font-size: 14px;
  border: 3px solid variables.$primary;
  transition: border-color .2s linear
}

.notification .notification-body {
  margin-inline-start: 23%;
  margin-inline-end: 18%;
  background: variables.$custom-white;
  border: 1px solid variables.$default-border;
  box-shadow: 0px 2px 0px rgba(118, 138, 254, 0.03);
  position: relative;
  padding: 20px;
  border-radius: 6px
}

.notification .notification-body>div+div {
  margin-top: 15px
}

.timeline {
  .profile-activity-media img {
    width: 4rem;
    height: 3rem;
    border-radius: 0.5rem;
    margin: 0.25rem;
  }
}

@media (max-width:576px) {
  .notification .notification-body:before {
    display: none;
  }

  .notification .notification-icon a {
    display: none;
  }

  .notification:before {
    display: none;
  }

  .notification-body {
    .media {
      flex-direction: column;

      .main-img-user {
        margin-bottom: 10px !important;
      }
    }
  }

  .notification .notification-time {
    z-index: 99;
    width: 100%;
    inset-inline-end: 15px !important;
    inset-inline-start: inherit;
    position: absolute;
    top: 15px !important;
  }

  .notification .notification-body {
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    position: relative;
  }

  .notification-badge {
    position: absolute;
    inset-inline-start: 10px;
    top: 8px;
  }

  .notification .notification-time .date,
  .notification .notification-time .time {
    display: inline;
  }

  .notification .notification-time .time {
    line-height: 16px;
    font-size: 11px;
    margin-inline-start: 5px;
    margin-inline-end: 10px;
    color: variables.$text-muted;
  }
}

.timeline-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 5px;
  row-gap: 1.5rem;
}

.timeline-steps .timeline-step {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 1rem
}

@media (min-width:576px) {
  .timeline-steps .timeline-step:not(:last-child):after {
    content: "";
    display: block;
    border-top: 1px dashed variables.$default-border;
    width: 6.46rem;
    position: absolute;
    inset-inline-start: 7.5rem;
    top: 0.25rem
  }

  .timeline-steps .timeline-step:not(:first-child):before {
    content: "";
    display: block;
    border-top: 1px dashed variables.$default-border;
    width: 6.8125rem;
    position: absolute;
    inset-inline-end: 7.5rem;
    top: 0.25rem
  }
}

.timeline-steps .timeline-content {
  width: 13rem;
  text-align: center
}

.timeline-steps .timeline-content .inner-circle {
  border-radius: 1.5rem;
  height: 0.5rem;
  width: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &:before {
    content: "";
    display: inline-block;
    height: 2rem;
    width: 2rem;
    min-width: 2rem;
    border-radius: 6.25rem;
  }

  &.primary {
    background-color: variables.$primary;

    &:before {
      border: 1px dashed rgba(var(--primary-rgb), 0.5);
    }
  }

  &.success {
    background-color: variables.$success;

    &:before {
      border: 1px dashed rgba(var(--success-rgb), 0.5);
    }
  }

  &.warning {
    background-color: variables.$warning;

    &:before {
      border: 1px dashed rgba(var(--warning-rgb), 0.5);
    }
  }

  &.info {
    background-color: variables.$info;

    &:before {
      border: 1px dashed rgba(var(--info-rgb), 0.5);
    }
  }

  &.danger {
    background-color: variables.$danger;

    &:before {
      border: 1px dashed rgba(var(--danger-rgb), 0.5);
    }
  }

  &.secondary {
    background-color: variables.$secondary;

    &:before {
      border: 1px dashed rgba(var(--secondary-rgb), 0.5);
    }
  }
}

.timeline-date_time-container {
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-start: 2.75rem;
}

ul.timeline-list-1 {
  margin-block-end: 0;
  position: relative;

  &:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 90%;
    inset-block-start: 0;
    inset-inline-start: 20px;
    border-inline-start: 1px dashed variables.$default-border;
  }

  li {
    margin-block-end: 1.5rem;
    padding-inline-start: 3.5rem;
    position: relative;

    &:last-child {
      margin-block-end: 0;
    }

    &:before {
      content: "";
      position: absolute;
      width: 2.5rem;
      height: 2.5rem;
      inset-inline-start: 0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: variables.$white;
    }

    &:nth-child(1):before {
      content: "\eed4";
      font-family: remixicon !important;
      background-color: variables.$primary;
    }

    &:nth-child(2):before {
      content: "\efe0";
      font-family: remixicon !important;
      background-color: variables.$success;
    }

    &:nth-child(3):before {
      content: "\ed54";
      font-family: remixicon !important;
      background-color: variables.$warning;
    }

    &:nth-child(4):before {
      content: "\ef44";
      font-family: remixicon !important;
      background-color: variables.$info;
    }

    &:nth-child(5):before {
      content: "\ea92";
      font-family: remixicon !important;
      background-color: variables.$danger;
    }

    &:nth-child(6):before {
      content: "\f439";
      font-family: remixicon !important;
      background-color: variables.$teal;
    }
  }
}

ul.timeline-list-2 {
  margin-block-end: 0;
  position: relative;

  &:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    inset-inline-start: 4px;
    inset-block-start: 0;
    border-inline-start: 1px dashed variables.$default-border;
  }

  li {
    margin-block-end: 1.39rem;
    padding-inline-start: 2rem;
    position: relative;

    &:last-child {
      margin-block-end: 0;
    }

    &:before {
      content: "";
      position: absolute;
      width: 12px;
      height: 12px;
      background-color: variables.$custom-white;
      border: 2px solid variables.$default-border;
      border-radius: 50%;
      inset-inline-start: -1px;
    }
  }
}

ul.timeline-list-3 {
  margin-block-end: 0;

  li {
    margin-block-end: 1.6rem;
    padding-inline-start: 1.75rem;
    position: relative;

    &:last-child {
      margin-block-end: 0;
    }

    &::before {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      inset-inline-start: 0;
      inset-block-start: .5rem;
      border-radius: 50%;
    }

    &::after {
      content: "";
      position: absolute;
      height: 100%;
      width: 1px;
      inset-inline-start: 4px;
      inset-block-start: 22px;
    }

    &:last-child {
      &::after {
        display: none;
      }
    }

    &:nth-child(1) {
      &::before {
        background-color: variables.$primary;
        box-shadow: 0px 0px 0px 3px rgba(var(--primary-rgb), 0.2);
      }

      &::after {
        border-inline-start: 1px dashed rgba(var(--primary-rgb), 0.2);
      }
    }

    &:nth-child(2) {
      &::before {
        background-color: variables.$success;
        box-shadow: 0px 0px 0px 3px rgba(var(--success-rgb), 0.2);
      }

      &::after {
        border-inline-start: 1px dashed rgba(var(--success-rgb), 0.2);
      }
    }

    &:nth-child(3) {
      &::before {
        background-color: variables.$warning;
        box-shadow: 0px 0px 0px 3px rgba(var(--warning-rgb), 0.2);
      }

      &::after {
        border-inline-start: 1px dashed rgba(var(--warning-rgb), 0.2);
      }
    }

    &:nth-child(4) {
      &::before {
        background-color: variables.$secondary;
        box-shadow: 0px 0px 0px 3px rgba(var(--secondary-rgb), 0.2);
      }

      &::after {
        border-inline-start: 1px dashed rgba(var(--secondary-rgb), 0.2);
      }
    }

    &:nth-child(5) {
      &::before {
        background-color: variables.$info;
        box-shadow: 0px 0px 0px 3px rgba(var(--info-rgb), 0.2);
      }

      &::after {
        border-inline-start: 1px dashed rgba(var(--info-rgb), 0.2);
      }
    }

    &:nth-child(6) {
      &::before {
        background-color: variables.$danger;
        box-shadow: 0px 0px 0px 3px rgba(var(--danger-rgb), 0.2);
      }

      &::after {
        border-inline-start: 1px dashed rgba(var(--danger-rgb), 0.2);
      }
    }

    &:nth-child(7) {
      &::before {
        background-color: variables.$teal;
        box-shadow: 0px 0px 0px 3px rgba(var(--teal-rgb), 0.2);
      }

      &::after {
        border-inline-start: 1px dashed rgba(var(--teal-rgb), 0.2);
      }
    }

    &:nth-child(8) {
      &::before {
        background-color: variables.$orange;
        box-shadow: 0px 0px 0px 3px rgba(var(--orange-rgb), 0.2);
      }

      &::after {
        border-inline-start: 1px dashed rgba(var(--orange-rgb), 0.2);
      }
    }

    &:nth-child(9) {
      &::before {
        background-color: variables.$purple;
        box-shadow: 0px 0px 0px 3px rgba(var(--purple-rgb), 0.2);
      }

      &::after {
        border-inline-start: 1px dashed rgba(var(--purple-rgb), 0.2);
      }
    }
  }
}

/* End:: Timeline */

/* Start:: Blog */
.card.custom-card.blog-card {
  overflow: hidden;

  .card-img {
    transition: 0.5s;
  }

  &:hover {
    .card-img {
      transform: scale(1.1);
    }
  }

  .blog-category {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
  }

  .blog-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.blog-image {
  overflow: hidden;
  border-radius: 0.3rem;
}

.popular-blogs-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.top-stories-title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

ul.blog-top-stories-list {
  margin-block-end: 0;

  li {
    position: relative;
    margin-block-end: 1.54rem;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

ul.popular-blogs-list {
  margin-block-end: 0;

  li {
    position: relative;
    margin-block-end: 1.5rem;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

/* End:: Blog */

/* Start:: Blog Details */
.blog-details-area {
  p {
    margin-bottom: 1.5rem;
  }

  h5 {
    margin-bottom: 0.5rem;
  }
}

#blog-details-comment-list {
  height: 22rem;
}

.avatar.blogger-details-avatar {
  width: 8rem;
  height: 8rem;
}

ul.top-blog-categories-list {
  margin-block-end: 0;

  li {
    margin-block-end: 1rem;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

ul.blog-archive {
  margin-block-end: 0;

  li {
    position: relative;
    margin-block-end: 1rem;
    padding-inline-start: 1rem;

    &:last-child {
      margin-block-end: 0;
    }

    &::before {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: variables.$text-muted;
      inset-block-start: 0.5rem;
      inset-inline-start: 0;
    }
  }
}

/* End:: Blog Details */

/* Start:: Create Blog */
.blog-images-container {
  .filepond--root {
    width: 100%;
  }

  .filepond--panel-root {
    border-color: variables.$input-border !important;
    border-radius: variables.$default-radius;
  }

  .filepond--root .filepond--drop-label {
    label {
      color: variables.$text-muted;
    }
  }
}

#blog-content {
  height: auto;
}

@media screen and (max-width: 400px) {
  .choices__inner .choices__list--multiple .choices__item {
    margin-block-end: 0.25rem !important;
  }
}

@media screen and (max-width: 991px) {
  .ql-toolbar.ql-snow .ql-formats {
    margin-block-end: 0.25rem !important;
  }
}

/* End:: Create Blog */

/* Start:: Profile */
ul.post-comments-list {
  margin-block-end: 0;

  li {
    margin-block-end: 1rem;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

.profile-card {
  .avatar.avatar-xxl {
    position: absolute;
    inset-block-start: -2.5rem;

    img {
      border: 4px solid variables.$custom-white;
    }
  }
}

.dropdown.profile-friends-actions {
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: 1rem;
}

/* End:: Profile */

/* Start:: Full Calendar */
[dir="rtl"] {
  .fullcalendar-events-activity {
    li {
      padding: 0.25rem 2rem 0.25rem 1rem;
    }
  }
}

.fullcalendar-events-activity {
  li {
    margin-block-end: 0.75rem;
    margin-inline-start: 0rem;
    margin-inline-end: 1.5rem;
    font-size: 0.8125rem;
    inset-inline-start: 1.5rem;
    inset-inline-end: 1rem;
    border-radius: 0.35rem;
    padding: 1rem;
    position: relative;

    &:nth-child(1) {
      background-color: rgba(var(--primary-rgb), 0.05);
      border: 1px solid rgba(var(--primary-rgb), 0.1);

      &:before {
        background-color: variables.$primary;
      }

      &:after {
        border-inline-end: 1px solid rgba(var(--primary-rgb), 0.1);
      }
    }

    &:nth-child(2) {
      background-color: rgba(var(--secondary-rgb), 0.05);
      border: 1px solid rgba(var(--secondary-rgb), 0.1);

      &:before {
        background-color: variables.$secondary;
      }

      &:after {
        border-inline-end: 1px solid rgba(var(--secondary-rgb), 0.1);
      }
    }

    &:nth-child(3) {
      background-color: rgba(var(--warning-rgb), 0.05);
      border: 1px solid rgba(var(--warning-rgb), 0.1);

      &:before {
        background-color: variables.$warning;
      }

      &:after {
        border-inline-end: 1px solid rgba(var(--warning-rgb), 0.1);
      }
    }

    &:nth-child(4) {
      background-color: rgba(var(--info-rgb), 0.05);
      border: 1px solid rgba(var(--info-rgb), 0.1);

      &:before {
        background-color: variables.$info;
      }

      &:after {
        border-inline-end: 1px solid rgba(var(--info-rgb), 0.1);
      }
    }

    &:nth-child(5) {
      background-color: rgba(var(--success-rgb), 0.05);
      border: 1px solid rgba(var(--success-rgb), 0.1);

      &:before {
        background-color: variables.$success;
      }

      &:after {
        border-inline-end: 1px solid rgba(var(--success-rgb), 0.1);
      }
    }

    &:nth-child(6) {
      background-color: rgba(var(--danger-rgb), 0.05);
      border: 1px solid rgba(var(--danger-rgb), 0.1);

      &:before {
        background-color: variables.$danger;
      }

      &:after {
        border-inline-end: 1px solid rgba(var(--danger-rgb), 0.1);
      }
    }

    &:nth-child(7) {
      background-color: rgba(var(--teal-rgb), 0.05);
      border: 1px solid rgba(var(--teal-rgb), 0.1);

      &:before {
        background-color: variables.$teal;
      }

      &:after {
        border-inline-end: 1px solid rgba(var(--teal-rgb), 0.1);
      }
    }

    &::before {
      position: absolute;
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 3.125rem;
      background-color: variables.$custom-white;
      inset-inline-start: -1.625rem;
      inset-block-start: 0.563rem;
    }

    &::after {
      position: absolute;
      content: "";
      height: 100%;
      background-color: transparent;
      inset-inline-start: -1.4375rem;
      inset-block-start: 1.25rem;
    }

    &:last-child {
      margin-block-end: 0;

      &::after {
        border-inline-end: 0px dashed variables.$default-border;
      }
    }
  }
}

#full-calendar-activity {
  max-height: 30rem;
}

/* End:: Full Calendar */

/* Start:: Draggable Cards */
#draggable-left,
#draggable-right {
  .card {
    cursor: move;
  }
}

/* End:: Draggable Cards */

/* Start:: Progress Top Bar */
.progress-top-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 9999;
  height: 3px;
  background-color: variables.$primary;
  transition: all linear 0.1s;
  min-width: 0%;
}

/* End:: Progress Top Bar */

/* Start:: Back to Top */
.scrollToTop {
  background-color: variables.$primary;
  color: variables.$white;
  border: 1px solid variables.$primary;
  backdrop-filter: blur(30px);
  ;
  position: fixed;
  bottom: 20px;
  inset-inline-end: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: none;
  z-index: 10000;
  height: 2.5rem;
  width: 2.5rem;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.1s linear;
  border-radius: 0.25rem;
  box-shadow: none;
}

/* End:: Back to Top */

[dir="rtl"] {
  .recruiter {
    .btn-icon.btn-sm {
      transform: rotate(180deg);
    }
  }

  .rtl-rotate {
    transform: rotate(180deg);
  }
}

#address-add {
  min-height: calc(1.5em + 2.75rem + calc(var(--bs-border-width) * 2));
}

/* Start:: Projects List */
.project-list-title {
  max-width: 13.375rem;
}

#project-descriptioin-editor {
  height: 200px;
  overflow: auto;
}

.project-list-main {
  .choices__inner {
    width: 150px !important;
  }
}

.project-list-description {
  max-width: 350px;
  min-width: 350px;
  white-space: wrap !important;
}

/* End:: Projects List */

/* Start:: Projects Overview */
.project-timeline {
  margin-block-end: 0;
}

.project-timeline li {
  padding-inline-start: 3rem;
  position: relative;
  margin-block-end: 1.85rem;
}

.project-timeline li .project-timeline-avatar {
  position: absolute;
  inset-inline-start: 0.125rem;
  inset-block-start: 0;
}

.project-timeline li:last-child {
  margin-block-end: 0;
}

.project-timeline li:last-child::before {
  display: none;
}

.project-timeline li::before {
  content: "";
  background-color: transparent;
  border: 1px dashed rgba(var(--dark-rgb), 0.1);
  height: 100%;
  position: absolute;
  inset-inline-start: 0.813rem;
  inset-block-start: 1.813rem;
}

.project-timeline .project-activity-media img {
  height: 4rem;
}

.todo-task-title {
  max-width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* End:: Projects Overview */

/* Start:: Job Details */
.swiper-related-jobs {

  .swiper-button-next,
  .swiper-button-prev {
    background-color: variables.$light;
    color: variables.$default-text-color !important;
  }
}

ul.job-highlights-list {
  margin-block-end: 0;

  li {
    margin-block-end: 1rem;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

@media (max-width: 768px) {
  .swiper-related-jobs {

    .swiper-button-prev,
    .swiper-button-next {
      display: none;
    }
  }
}

/* End:: Job Details */

/* Start:: Companies Search */
@media screen and (min-width: 623px) {
  .input-group.companies-search-input {
    .choices {
      margin-block-end: 0;
      border: 1px solid variables.$input-border;
    }

    .choices__inner {
      border: 0 !important;
      border-radius: 0 !important;
      min-height: 100% !important;
    }

    .choices__list--dropdown .choices__item--selectable {
      padding-inline-end: 1rem;
    }
  }

  [dir="rtl"] {
    .input-group.companies-search-input {
      .choices__inner {
        border-radius: 0 !important;
      }
    }
  }
}

@media screen and (max-width: 700px) {
  .input-group.companies-search-input {
    display: block;

    .form-control {
      width: 100% !important;
      border-radius: variables.$default-radius !important;
      margin-bottom: 0.5rem;
    }

    .choices {
      border-radius: variables.$default-radius !important;
      margin-bottom: 0.5rem;

      .choices__inner {
        border-radius: variables.$default-radius !important;
      }
    }

    .btn {
      width: 100% !important;
      border-radius: variables.$default-radius !important;
    }
  }
}

/* End:: Companies Search */

/* Start:: Jobs Candidate Search */
.companies-search-input {
  .choices__list.choices__list--single {
    line-height: 2.25;
  }
}

.skills-container {
  max-width: 200px;
}

/* End:: Jobs Candidate Search */

/* Start:: Jobs Candidate Details */
.list-bullets li {
  position: relative;
  margin-block-end: -1px;
  border: 1px solid variables.$default-border;
  list-style-type: circle;
  list-style-position: inside;
  padding: 0.75rem 1.25rem;
}

ul.job-candidate-skills-list {
  margin-block-end: 0;

  li {
    margin-block-end: 1.25rem;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

ul.candidate-personal-info-list {
  margin-block-end: 0;

  li {
    margin-block-end: 1.25rem;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

ul.job-preferences-list {
  margin-block-end: 0;

  li {
    margin-block-end: 1.25rem;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

/* End:: Jobs Candidate Details */

/* Start:: CRM Contacts */
.crm-contact-close-btn.btn-close {
  position: absolute;
  inset-inline-end: -0.625rem;
  inset-block-start: -0.625rem;
}

/* End:: CRM Contacts */

/* Start:: CRM Companies */
#offcanvasExample {
  border-color: transparent !important;
}

/* End:: CRM Companies */

/* Start:: CRM Deals */
.lead-discovered,
.lead-qualified,
.contact-initiated,
.need-identified,
.negotiation,
.deal-finalized {
  position: relative;
  margin-inline-start: 1rem;

  &:before {
    position: absolute;
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    inset-inline-start: -0.875rem;
    inset-block-start: 0.4375rem;
  }
}

.lead-discovered:before {
  background-color: variables.$primary;
}

.lead-qualified:before {
  background-color: variables.$warning;
}

.contact-initiated:before {
  background-color: variables.$success;
}

.need-identified:before {
  background-color: variables.$info;
}

.negotiation:before {
  background-color: variables.$danger;
}

.deal-finalized:before {
  background-color: variables.$secondary;
}

#leads-discovered .card.custom-card {
  border: 1px dashed rgba(var(--primary-rgb), 0.2) !important;
  background-color: rgba(var(--primary-rgb), 0.05);

  .company-name {
    color: variables.$primary;
  }

  .avatar {
    background-color: variables.$primary;
  }
}

#leads-qualified .card.custom-card {
  border: 1px dashed rgba(var(--warning-rgb), 0.2) !important;
  background-color: rgba(var(--warning-rgb), 0.05);

  .company-name {
    color: variables.$warning;
  }

  .avatar {
    background-color: variables.$warning;
  }
}

#contact-initiated .card.custom-card {
  border: 1px dashed rgba(var(--success-rgb), 0.2) !important;
  background-color: rgba(var(--success-rgb), 0.05);

  .company-name {
    color: variables.$success;
  }

  .avatar {
    background-color: variables.$success;
  }
}

#needs-identified .card.custom-card {
  border: 1px dashed rgba(var(--info-rgb), 0.2) !important;
  background-color: rgba(var(--info-rgb), 0.05);

  .company-name {
    color: variables.$info;
  }

  .avatar {
    background-color: variables.$info;
  }
}

#negotiation .card.custom-card {
  border: 1px dashed rgba(var(--danger-rgb), 0.2) !important;
  background-color: rgba(var(--danger-rgb), 0.05);

  .company-name {
    color: variables.$danger;
  }

  .avatar {
    background-color: variables.$danger;
  }
}

#deal-finalized .card.custom-card {
  border: 1px dashed rgba(var(--secondary-rgb), 0.2) !important;
  background-color: rgba(var(--secondary-rgb), 0.05);

  .company-name {
    color: variables.$secondary;
  }

  .avatar {
    background-color: variables.$secondary;
  }
}

#leads-discovered,
#leads-qualified,
#contact-initiated,
#needs-identified,
#negotiation,
#deal-finalized {
  .card.custom-card {
    margin-block-end: 0.5rem;
    touch-action: none;

    &:last-child {
      margin-block-end: 1.5rem;
    }

    .card-body {
      padding: 1rem;

      .deal-description {
        margin-inline-start: 2.25rem;
      }
    }
  }
}

/* End:: CRM Deals */

/* Start:: Create NFT*/
.create-nft-item {
  .filepond--root[data-style-panel-layout~="circle"] {
    border-radius: variables.$default-radius;
    width: 100%;
  }

  .filepond--drop-label.filepond--drop-label label {
    padding: 2em;
  }

  .filepond--drop-label {
    color: variables.$text-muted !important;
  }

  .filepond--panel-root {
    border: 0.125rem dashed variables.$input-border !important;
  }

  .filepond--root[data-style-panel-layout~="circle"] .filepond--image-preview-wrapper {
    border-radius: 0.3rem;
  }
}

.create-nft-item {
  .filepond--root[data-style-panel-layout~="circle"] {
    height: 15.75rem !important;
    width: 15.25rem !important;
  }

  .filepond--drop-label label {
    font-size: 0.75rem;
  }

  .filepond--root[data-style-panel-layout~="circle"] .filepond--image-preview-wrapper,
  .filepond--file {
    height: 15.75rem;
    width: 15.25rem !important;
  }
}

@media (max-width: 364px) {
  .create-nft-item {
    .filepond--root[data-style-panel-layout~="circle"] {
      height: 10.75rem !important;
      width: 10.25rem !important;
    }

    .filepond--root[data-style-panel-layout~="circle"] .filepond--image-preview-wrapper,
    .filepond--file {
      height: 10.75rem;
      width: 10.25rem !important;
    }
  }
}

/* End:: Create NFT*/

/* Start:: NFT Details */
.nft-assurance {
  border: 1px dashed rgba(var(--primary-rgb), 0.3);
  border-radius: variables.$default-radius;
  text-align: center;
  padding: 1rem 1.5rem;

  svg {
    width: 3rem;
    height: 3rem;
  }
}

.nft-details-auction-time {
  position: absolute;
  width: 400px;
  height: 1.875rem;
  background-color: rgb(var(--primary-rgb));
  display: flex;
  align-items: center;
  justify-content: center;
  color: variables.$white;
  top: 3.125rem;
  font-weight: 500;
  inset-inline-end: -8.4375rem;
  transform: rotate(45deg);
  z-index: 10;
}

[dir="rtl"] {
  .nft-details-auction-time {
    transform: rotate(315deg);
  }
}

.swiper.product-details-page {
  &.swiper-preview-details {

    .swiper-button-prev,
    .swiper-button-next {
      color: variables.$white !important;
    }
  }
}

/* End:: NFT Details */

/* Start:: NFT Wallet */
.nft-wallet {
  position: relative;
  text-align: center;
  box-shadow: none !important;
  border: 1px solid variables.$default-border !important;
  border-radius: 0.5rem;

  &:hover {
    background-color: variables.$light;
  }

  &.active {
    border-color: variables.$primary !important;
  }
}

.nft-list {
  li {
    &:hover {
      background-color: variables.$default-background;
      color: variables.$primary;
    }
  }
}

/* End:: NFT Wallet */

/* Start:: NFT Live Auction */
.nft-tag.nft-tag-primary {

  &:hover,
  &.active {
    color: variables.$primary;

    .nft-tag-icon {
      background-color: variables.$primary-01;
    }
  }

  .nft-tag-icon {
    color: variables.$primary;
  }
}

.nft-tag.nft-tag-secondary {

  &:hover,
  &.active {
    color: variables.$secondary;

    .nft-tag-icon {
      background-color: rgba(var(--secondary-rgb), 0.1);
    }
  }

  .nft-tag-icon {
    color: variables.$secondary;
  }
}

.nft-tag.nft-tag-warning {

  &:hover,
  &.active {
    color: variables.$warning;

    .nft-tag-icon {
      background-color: rgba(var(--warning-rgb), 0.1);
    }
  }

  .nft-tag-icon {
    color: variables.$warning;
  }
}

.nft-tag.nft-tag-info {

  &:hover,
  &.active {
    color: variables.$info;

    .nft-tag-icon {
      background-color: rgba(var(--info-rgb), 0.1);
    }
  }

  .nft-tag-icon {
    color: variables.$info;
  }
}

.nft-tag.nft-tag-success {

  &:hover,
  &.active {
    color: variables.$success;

    .nft-tag-icon {
      background-color: rgba(var(--success-rgb), 0.1);
    }
  }

  .nft-tag-icon {
    color: variables.$success;
  }
}

.nft-tag.nft-tag-danger {

  &:hover,
  &.active {
    color: variables.$danger;

    .nft-tag-icon {
      background-color: rgba(var(--danger-rgb), 0.1);
    }
  }

  .nft-tag-icon {
    color: variables.$danger;
  }
}
.nft-tag.nft-tag-purple {

  &:hover,
  &.active {
    color: variables.$purple;

    .nft-tag-icon {
      background-color: rgba(var(--purple-rgb), 0.1);
    }
  }

  .nft-tag-icon {
    color: variables.$purple;
  }
}

.nft-tag.nft-tag-dark {

  &:hover,
  &.active {
    color: variables.$dark;

    .nft-tag-icon {
      background-color: rgba(var(--dark-rgb), 0.1);
    }
  }

  .nft-tag-icon {
    color: variables.$dark;
  }
}

.nft-tag .nft-tag-text {
  font-weight: 400;
  display: inline-block;
  padding: 0px 1.25rem 0px 1.25rem;
}

.nft-tag .nft-tag-icon {
  display: inline-block;
  padding: 0.4rem;
  line-height: 1;
  border-radius: 50px;
  background-color: variables.$light;
}

.nft-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px;
  border: 1px solid variables.$default-border;
  border-radius: 50rem;
  background-color: variables.$custom-white;
  color: variables.$default-text-color;
}

.nft-timer-container {
  position: absolute;
  inset-inline-start: 0;
  top: 5%;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  border-start-start-radius: 0px;
  border-start-end-radius: 50rem;
  border-end-end-radius: 50rem;
  border-end-start-radius: 0px;
  color: variables.$white;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
}

.nft-btn {
  position: absolute;
  inset-inline-end: 5%;
  bottom: 5%;
  height: 2rem;
  width: 2rem;
  padding: 5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: variables.$white;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all ease 0.3s;
  z-index: 1;

  &:hover {
    background-color: variables.$custom-white;
    color: variables.$primary;
  }
}

.nft-img {
  border-radius: 0.5rem;
  max-height: 10rem;
  width: 100%;
}

/* End:: NFT Live Auction */

/* Start:: Crypto Wallet */
[data-theme-mode="dark"] {
  .qr-image {
    filter: invert(1);
  }
}

/* End:: Crypto Wallet */

/* Start:: Crypto Currency Exchange */
#btc-currency-chart,
#eth-currency-chart,
#ltc-currency-chart,
#dash-currency-chart,
#xrs-currency-chart,
#glm-currency-chart,
#monero-currency-chart,
#eos-currency-chart {
  position: absolute;
  inset-block-end: 0;
}

.currency-exchange-card {
  position: relative;
  background-color: variables.$primary-01 !important;
  box-shadow: none;
  min-height: 21.875rem;
  z-index: 10;

  .currency-exchange-area {
    background-color: variables.$primary;
    z-index: 1;
    position: relative;
  }

  .crypto-currency-exchange-background {
    position: absolute;
    width: 100%;
    height: 100%;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: -1;
    opacity: 0.2;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

/* End:: Crypto Currency Exchange */

/* Start:: Crypto Buy & Sell */
#buy_sell-statistics {
  .apexcharts-bar-series.apexcharts-plot-series .apexcharts-series .apexcharts-bar-area {
    stroke: transparent;
  }
}

/* End:: Crypto Buy & Sell */

/* Start:: Crypto Marketcap */
#bitcoin-chart,
#etherium-chart,
#dashcoin-chart,
#btc-chart,
#eth-chart,
#glm-chart,
#dash-chart,
#lite-chart,
#ripple-chart,
#eos-chart,
#bytecoin-chart,
#iota-chart,
#monero-chart {
  .apexcharts-grid line {
    stroke: transparent;
  }
}

/* End:: Crypto Marketcap */

/* Start:: Loader */
#loader {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: variables.$custom-white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* End:: Loader */

/* Start:: Offcanvas body padding*/
@media (min-width: 992px) {
  body {
    padding-right: 0 !important;
    overflow: auto !important;
  }
}

/* end:: Offcanvas body padding*/

/* start:: kanban*/
.kanban-board {
  width: 370px;
}

[class^="ri-"],
[class*=" ri-"] {
  display: inline-flex;
}

/* end:: kanban*/

/* Start:: Bootstrap Updated Styles */

[data-theme-mode="dark"] .bg-dark .h1,
[data-theme-mode="dark"] .bg-dark .h2,
[data-theme-mode="dark"] .bg-dark .h3,
[data-theme-mode="dark"] .bg-dark .h4,
[data-theme-mode="dark"] .bg-dark .h5,
[data-theme-mode="dark"] .bg-dark .h6,
[data-theme-mode="dark"] .bg-dark h1,
[data-theme-mode="dark"] .bg-dark h2,
[data-theme-mode="dark"] .bg-dark h3,
[data-theme-mode="dark"] .bg-dark h4,
[data-theme-mode="dark"] .bg-dark h5,
[data-theme-mode="dark"] .bg-dark h6,
[data-theme-mode="dark"] .card-bg-dark .h1,
[data-theme-mode="dark"] .card-bg-dark .h2,
[data-theme-mode="dark"] .card-bg-dark .h3,
[data-theme-mode="dark"] .card-bg-dark .h4,
[data-theme-mode="dark"] .card-bg-dark .h5,
[data-theme-mode="dark"] .card-bg-dark .h6,
[data-theme-mode="dark"] .card-bg-dark h1,
[data-theme-mode="dark"] .card-bg-dark h2,
[data-theme-mode="dark"] .card-bg-dark h3,
[data-theme-mode="dark"] .card-bg-dark h4,
[data-theme-mode="dark"] .card-bg-dark h5,
[data-theme-mode="dark"] .card-bg-dark h6 {
  color: variables.$custom-white !important;
}

[data-theme-mode="dark"] .bg-dark .text-fixed-white {
  color: variables.$white !important;
}

[data-theme-mode="dark"] .bg-dark.card.custom-card,
[data-theme-mode="dark"] .card-bg-dark.card.custom-card {
  color: variables.$custom-white !important;
}

[data-theme-mode="dark"] .bg-dark.card.custom-card .card-body,
[data-theme-mode="dark"] .bg-dark.card.custom-card .card-footer,
[data-theme-mode="dark"] .card-bg-dark.card.custom-card .card-body,
[data-theme-mode="dark"] .card-bg-dark.card.custom-card .card-footer {
  color: variables.$custom-white !important;
}

[data-theme-mode="dark"] .choices[data-type*="select-one"] .choices__button {
  filter: invert(1);
}

[data-theme-mode="dark"] {
  .apexcharts-tooltip * {
    color: variables.$default-text-color;
  }
}

[data-theme-mode="dark"] #circle-custom .apexcharts-legend.apx-legend-position-left {
  background-color: variables.$custom-white;
}

[data-theme-mode="dark"] .navbar-nav .nav-link.active,
[data-theme-mode="dark"] .navbar-nav .nav-link.show {
  color: variables.$white;
}

.d-inline-table {
  display: inline-table;
}

.h1 .h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: variables.$default-text-color;
}

.card.custom-card {
  color: variables.$default-text-color !important;
}

[data-theme-mode="light"][data-header-styles="transparent"] .page-header-breadcrumb h4,
[data-theme-mode="light"][data-default-header-styles="transparent"] .page-header-breadcrumb h4 {
  color: variables.$default-text-color !important;
}

[data-theme-mode="light"][data-header-styles="transparent"] .app-header .main-header-container .form-control,
[data-theme-mode="light"][data-default-header-styles="transparent"] .app-header .main-header-container .form-control {
  color: variables.$default-text-color;
  border-radius: 0.5rem;
}

[data-theme-mode="light"] .page-header-breadcrumb h4 {
  color: variables.$white !important;
}

[data-header-styles="dark"] .header-link.dropdown-toggle .user-name,
[data-header-styles="color"] .header-link.dropdown-toggle .user-name,
[data-header-styles="gradient"] .header-link.dropdown-toggle .user-name {
  color: variables.$white !important;
}

[data-default-header-styles="transparent"] .page-header-breadcrumb,
[data-default-header-styles="light"] .page-header-breadcrumb,
[data-default-header-styles="dark"] .page-header-breadcrumb,
[data-default-header-styles="color"] .page-header-breadcrumb,
[data-default-header-styles="gradient"] .page-header-breadcrumb {
  margin: 0px 0px -32px 0px;
}

.form-floating>.form-control:not(:-moz-placeholder-shown)~label::after {
  background-color: transparent !important;
}

.form-floating>.form-control-plaintext~label::after,
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
  background-color: transparent !important;
}

.form-floating>.form-control:not(:-moz-placeholder-shown)~label {
  color: variables.$text-muted !important;
  font-weight: 400;
}

.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
  color: variables.$text-muted !important;
  font-weight: 400;
}

.dropdown-item-text {
  color: variables.$default-text-color !important;
}

.blockquote-footer {
  color: variables.$default-text-color !important;
}

hr {
  border-color: variables.$default-border;
  opacity: 1;
}

/* End:: Bootstrap Updated Styles */

/* Start:: rtl  */
[dir="rtl"] {
  .dropdown-menu {
    --bs-position: start;
  }

  .dropdown-menu-end {
    --bs-position: end;
  }

  .transform-arrow {
    transform: rotate(180deg);
  }

  .bi-skip-backward::before {
    content: "\f55e";
  }

  .bi-skip-forward::before {
    content: "\f552";
  }
}

/* End:: rtl  */

/* Start:: reviews */
.swiper.testimonial-style1 {
  .swiper-wrapper .swiper-slide {
    .card.custom-card {
      &:before {
        content: "\ec52";
        position: absolute;
        font-family: remixicon !important;
        inset-inline-start: 1rem;
        inset-block-start: 1rem;
        font-size: 2.25rem;
        line-height: 1;
        color: var(--text-muted);
        opacity: 0.25;
      }
    }
  }
}

.card.custom-card.testimonial-style-2-card {
  position: relative;
  overflow: hidden;
  z-index: 1;

  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: -1;
  }

  &.primary:before {
    background-color: rgba(var(--primary-rgb), 0.1);
  }

  &.success:before {
    background-color: rgba(var(--success-rgb), 0.1);
  }

  &.warning:before {
    background-color: rgba(var(--warning-rgb), 0.1);
  }

  &.info:before {
    background-color: rgba(var(--info-rgb), 0.1);
  }

  &.danger:before {
    background-color: rgba(var(--danger-rgb), 0.1);
  }

  &.teal:before {
    background-color: rgba(var(--teal-rgb), 0.1);
  }
}

.swiper.testimonials-swiper-2 {
  .swiper-pagination-bullet {
    background: variables.$default-text-color !important;
  }

  .swiper-pagination-bullet-active-main {
    background: variables.$primary !important;
  }
}

.testimonaial-3-quote {
  position: absolute;
  inset-inline-end: 0.8rem;
  inset-block-start: 1rem;
  font-size: 1.5rem;
  line-height: 0;
  color: variables.$primary;
  background-color: rgba(var(--primary-rgb), 0.1);
  border-radius: 50%;
  padding: 0.625rem;
}

.testimonial-style4 {
  .card.custom-card {
    position: relative;

    &:before {
      content: "";
      position: absolute;
      width: 6.5rem;
      height: 100%;
      inset-inline-start: 0;
      inset-block-start: 0;
    }

    .avatar {
      position: absolute;
      inset-inline-start: 4rem;
      inset-block-start: 34%;
    }

    .main-content {
      padding-inline-start: 7rem;
    }

    &.primary {
      border: 1px dashed rgba(var(--primary-rgb), 0.2);

      &:before {
        background-color: rgba(var(--primary-rgb), 0.1);
      }
    }

    &.success {
      border: 1px dashed rgba(var(--success-rgb), 0.2);

      &:before {
        background-color: rgba(var(--success-rgb), 0.1);
      }
    }

    &.warning {
      border: 1px dashed rgba(var(--warning-rgb), 0.2);

      &:before {
        background-color: rgba(var(--warning-rgb), 0.1);
      }
    }

    &.info {
      border: 1px dashed rgba(var(--info-rgb), 0.2);

      &:before {
        background-color: rgba(var(--info-rgb), 0.1);
      }
    }

    &.danger {
      border: 1px dashed rgba(var(--danger-rgb), 0.2);

      &:before {
        background-color: rgba(var(--danger-rgb), 0.1);
      }
    }

    &.teal {
      border: 1px dashed rgba(var(--teal-rgb), 0.2);

      &:before {
        background-color: rgba(var(--teal-rgb), 0.1);
      }
    }
  }
}

@media (max-width: 400px) {
  .testimonial-style4 {
    .card.custom-card {
      &:before {
        display: none !important;
      }

      .avatar {
        display: none;
      }

      .main-content {
        padding-inline-start: 0rem;
        padding-block-start: 0rem;
      }
    }
  }
}

/* End:: reviews */

/* Start:: sortable js */
ul,
ol {
  &.sortable-list {
    li {
      background-color: variables.$primary-005;
      margin: 3px 0;
      border: 1px solid variables.$primary-005;
      border-radius: 0.3rem;
      font-weight: 500;

      &.filtered {
        background-color: variables.$danger;
        color: variables.$white;
      }

      &.selected {
        background-color: variables.$primary;
        border: 1px solid variables.$primary;
        color: variables.$white;
      }
    }

    .list-group-item+.list-group-item {
      border-top-width: 1px;
    }
  }

  &#shared-right,
  &#cloning-right,
  &#disabling-sorting-right {
    li {
      background-color: rgba(var(--secondary-rgb), 0.05);
      border: 1px solid rgba(var(--secondary-rgb), 0.05);
    }
  }

  .handle {
    cursor: grab;
  }
}

.grid-square {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: variables.$custom-white;
  border: 1px solid variables.$default-border;
  border-radius: 0.5rem;
  margin-block-end: 1.5rem;
  margin-inline-end: 1.5rem;
  padding: 20px;
}

.nested-sortable,
.nested-1,
.nested-2,
.nested-3 {
  margin-top: 5px;

  .list-group-item+.list-group-item {
    border-top-width: 1px;
  }
}

.nested-1,
.nested-2,
.nested-3 {
  background-color: rgba(var(--primary-rgb), 0.05);
  border: 1px solid rgba(var(--primary-rgb), 0.05);
  font-weight: 500;
}

/* End:: sortable js */

/* Start:: search results */
.form-control.search-results-input {
  padding-inline-end: 5rem;
}

.other-search-types {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: absolute;
  inset-inline-end: 2rem;
  inset-block-start: 25px;
  font-size: 1.25rem;
  color: variables.$text-muted;
  z-index: 10;

  i {
    color: variables.$text-muted;
  }
}

ul.search-results-list {
  margin-block-end: 0;

  li {
    margin-block-end: 2rem;

    &:last-child {
      margin-block-end: 0;
    }
  }

  .dropdown li {
    margin-block-end: 0;
  }
}

.searched-item-main-link {
  color: variables.$primary;

  &:hover {
    color: variables.$primary;
    text-decoration: underline;
  }
}

.related-search-container {
  padding: 0.75rem 1rem;
  border: 1px dashed variables.$default-border;
  position: relative;
  padding-inline-start: 3rem;

  &:hover {
    background-color: rgba(var(--primary-rgb), 0.05);
    text-decoration: underline;
    border: 1px dashed rgba(var(--primary-rgb), 0.1);

    a {
      color: variables.$primary;
    }
  }

  &:before {
    content: "\f0d1";
    position: absolute;
    font-family: remixicon !important;
    inset-inline-start: 1rem;
    inset-block-start: 13px;
    color: var(--text-muted);
    line-height: 1;
    font-size: 1.25rem;
  }
}

.avatar.avatar-search {
  height: 120px;
  width: inherit;
}

.search-images-card {
  transition: all .4s;

  &:hover {
    box-shadow: 0px 4px 16px variables.$black-1;
    transition: all .4s;
  }
}

/* End:: search results */

/* Start:: Full Canendar */
.full-calendar-image {
  width: 300px;
}

/* End:: Full Canendar */

/* Start:: Crypto Charts */
#bitcoin-price-graph .apexcharts-canvas,
#bitcoin-price-graph .apexcharts-svg,
#btc-chart .apexcharts-canvas,
#btc-chart .apexcharts-svg,
#bytecoin-chart .apexcharts-canvas,
#bytecoin-chart .apexcharts-svg,
#dash-chart .apexcharts-canvas,
#dash-chart .apexcharts-svg,
#dash-price-graph .apexcharts-canvas,
#dash-price-graph .apexcharts-svg,
#eos-chart .apexcharts-canvas,
#eos-chart .apexcharts-svg,
#eth-chart .apexcharts-canvas,
#eth-chart .apexcharts-svg,
#etherium-price-graph .apexcharts-canvas,
#etherium-price-graph .apexcharts-svg,
#glm-chart .apexcharts-canvas,
#glm-chart .apexcharts-svg,
#iota-chart .apexcharts-canvas,
#iota-chart .apexcharts-svg,
#iota-price-graph .apexcharts-canvas,
#iota-price-graph .apexcharts-svg,
#lite-chart .apexcharts-canvas,
#lite-chart .apexcharts-svg,
#monero-chart .apexcharts-canvas,
#monero-chart .apexcharts-svg,
#neo-price-graph .apexcharts-canvas,
#neo-price-graph .apexcharts-svg,
#ripple-chart .apexcharts-canvas,
#ripple-chart .apexcharts-svg,
#ripple-price-graph .apexcharts-canvas,
#ripple-price-graph .apexcharts-svg {
  width: 100px !important;
}

/* End:: Crypto Charts */

/* Start:: Print */
@media print {
  * {
    text-shadow: none !important;
    box-shadow: none !important;
  }

  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }

  a:not(.btn) {
    text-decoration: underline;
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  pre {
    white-space: pre-wrap !important;
    border: 1px solid variables.$default-border;
    page-break-inside: avoid;
  }

  blockquote {
    border: 1px solid variables.$default-border;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  @page {
    size: a4;
  }

  body,
  .container {
    min-width: 992px !important;
  }

  .table,
  .text-wrap table {
    border-collapse: collapse !important;
  }

  .table td,
  .text-wrap table td,
  .table th,
  .text-wrap table th {
    background-color: variables.$custom-white !important;
  }

  .table-bordered th,
  .text-wrap table th,
  .table-bordered td,
  .text-wrap table td {
    border: 1px solid variables.$default-border !important;
  }

  .app-sidebar,
  .app-content .page-header-breadcrumb,
  .app-header,
  .footer {
    display: none !important;
  }

  .main-content.app-content {
    padding-top: 10px !important;
  }
}

/* End:: Print */

/* Start:: Profile Settings */
.authentication-btn-group {
  .btn-group>.btn-check:checked+.btn {
    z-index: 0;
  }
}

/* End:: Profile Settings */

/* Start:: Main Content */
.app-content .main-body-container {
  background-color: var(--custom-white);
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--default-border);
  padding-block-end: 0;
}

/* End:: Main Content */

@media (max-width: 576px) {
  .nesting-grid-reponsive .grid {
    --bs-columns: 1 !important;
  }
}

@media (max-width: 350px) {
  .list-group-horizontal {
    .list-group-item {
      padding-inline: 0.75rem;
    }
  }
}

.pagination-fraction {
  .swiper-pagination-fraction {
    color: #fff !important;
  }
}

@media (max-width: 576px) {
  .apexcharts-toolbar {
    display: none !important;
  }
}

.disable-user-input {
  .tagify__input {
    height: 2.2rem;
  }
}

[dir="rtl"] {
  @media (max-width: 450px) {
    .product-details-table {
      margin-inline-end: 1px;
    }
  }
}

#balanceAnalysis {
  .apexcharts-datalabels-group {
    text {
      fill: variables.$default-text-color;
    }
  }
}

#leads-source {
  .apexcharts-text {
    color: variables.$default-text-color !important;
    fill: variables.$default-text-color !important;
  }
}

[dir="rtl"] {
  .ql-editor li>.ql-ui:before {
    margin-right: -1.5em;
    margin-left: .3em;
  }
}

@media (max-width: 330px) {
  #candidate-statistics {
    .apexcharts-legend {
      transform: translateY(-15px);
    }
  }
}

.gslide-inline {
  background-color: var(--custom-white) !important;
}

.swal2-confirm {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

[dir="rtl"] {
  .ti-chevron-right {
    rotate: 180deg;
    display: inline-flex;
  }
}

.dropzone .dz-preview.dz-image-preview {
  background-color: var(--custom-white) !important;
}

[dir="rtl"] {
  .dropstart .dropdown-toggle {
    &::before {
      rotate: 180deg;
    }
  }

  .dropend .dropdown-toggle {
    &::after {
      rotate: 180deg;
    }
  }
}

@media (max-width: 345px) {
  .tab-style-4 {
    .nav-link {
      font-size: 11px !important;
    }
  }
}

[dir="rtl"] {
  .breakpoint-table {
    margin-inline-end: 1px;
  }

  .ri-arrow-right-s-line {
    rotate: 180deg;
  }
}

#chart-5 {
  .apexcharts-tooltip.apexcharts-theme-dark {
    color: #000 !important;
  }
}
[data-theme-mode="dark"] {
  #chart-5 {
    .apexcharts-tooltip * {
      color: #000 !important;
    }
  }
}

[dir="rtl"] {
  #sales-locations {
    #jvm-markers-labels-group {
      text {
        transform: translateX(-24px);
      }
    }
  }
}

#marker-image-map {
  #jvm-markers-labels-group {
    text {
      transform: translateX(5px);
    }
  }
}

[dir="rtl"] {
  #responsivemodal-DataTable {
    margin-inline-end: 1px;
  }

  #marker-image-map #jvm-markers-labels-group text {
    transform: translateX(-21px);
  }
}

#chart-year {
  .apexcharts-datalabels {
    transform: translateX(7px);
  }
}

@media (max-width: 400px) {
  #marker-image-map, #lines-map {
    #jvm-markers-labels-group {
      text {
        font-size: 11px;
      }
    }
  }

  #polararea-monochrome {
    .apexcharts-legend {
      transform: translateY(-32px);
    }
  }
}

.landing-footer {
  .brand-image {
    img {
      width: 8rem;
      height: auto;
    }
  }
}

#customers-list {
  [data-column-id="joiningDate"] {
    width: 20% !important;
  }
}

[data-width="boxed"] {
  .card.custom-card.available-treatments-card .btn.btn-icon {
    width: 5rem;
    height: 5rem;
    padding: 2rem;
  }
}

.form-control::-webkit-file-upload-button {
  padding-block: 0.7rem !important;
}

#top-categories1 {

  .apexcharts-svg,
  .apexcharts-canvas {
    width: auto !important;
  }
}

#product-table {

  [data-column-id="price"],
  [data-column-id="dateAdded"] {
    width: 150px !important;
  }
}

#customers-list {
  [data-column-id="joiningDate"] {
    width: 150px !important;
  }
}

#orders-table {
  table {
    white-space: nowrap;
  }

  [data-column-id="price"],
  [data-column-id="orderedDate"] {
    width: 150px !important;
  }
}

@media (max-width: 767px) {
  .recent-activity-list {
    margin-bottom: 1rem !important;
  }
}

#balanceAnalysis {
  .apexcharts-tooltip-text {
    color: #fff !important;
  }

  .apexcharts-tooltip {
    border: 0px !important;
  }
}

[dir="rtl"] {
  .company-search-table {
    .ti-arrow-narrow-right {
      rotate: 180deg;
    }
  }
}

@media (min-width: 1400px) and (max-width: 1650px) {
  .card.custom-card.podcast-banner-card .podcast-banner-img {
    position: absolute;
    inset-inline-end: -2rem !important;
    inset-block-end: 0;
  }
}

#top-departments {
  .apexcharts-yaxis {
    line {
      stroke: var(--default-border) !important;
    }
  }
}

.fc .fc-toolbar {
  flex-wrap: wrap;
}

.task-profile-timeline {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset-inline-start: 18px;
    top: 22px;
    height: 80%;
    width: 1px;
    border-inline-start: 1px dashed var(--default-border);
  }

  li {
    margin-block-end: 1rem;
  }

  .profile-timeline-avatar {
    position: absolute;
    inset-inline-start: 5px;
  }
}

[dir="rtl"] {
  .slide.has-sub.open>.side-menu__item .side-menu__angle {
    transform: rotate(-90deg);
  }
}

.social-media-list {
  a {
    word-break: break-all;
  }
}

@media (max-width: 576px) {
  .grid-autocol-responsive {
    gap: 1rem !important;
  }
}

@media (max-width: 576px) {
  .grid-col-mixed-responsive {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 10px !important;
  }
}

// .plyr .plyr__controls {
//   flex-wrap: wrap !important;
// }

.tagify__dropdown {

  strong,
  span {
    color: var(--default-text-color) !important;
  }

  .tagify__dropdown__itemsGroup {
    color: #fff !important;
  }
}

:focus-visible {
  outline: none;
}

@media (max-width: 479px) {
  .shepherd-title {
    font-size: .87rem !important;
  }
}

#product-table,
#customers-list,
#orders-table {
  #no-matches-row td {
    border-bottom: 1px solid variables.$default-border !important;
  }
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  inset-inline-end: 0;
}

.plyr.plyr--audio {
  .plyr__controls {
    flex-wrap: wrap !important;
  }
}

#orders-table .gridjs-pages button:last-child {
  border-inline-start: 0px !important;
}

[dir="rtl"] {
  .bi-arrow-right.custom-arrow {
    transform: rotate(180deg) !important;
    display: inline-block;
  }
}

@media (max-width: 320px) {

  #switcher-canvas {
    border-inline-start: 0px !important;
  }
}

.desc-bottom {
  .gslide-image img {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }
}

.desc-right .gslide-image img {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.desc-left .gslide-image img {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.desc-top .gslide-image img {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

@media (min-width: 1432px) {
  .custom-medical {
    margin-inline-end: 0.25rem !important;
  }
}

[data-theme-mode=dark][data-page-style=modern] .slide-menu.child1::-webkit-scrollbar {
  background: #cccccc1f !important;
}
@media (max-width: 366px) {
  .height-custom-class{
    font-size: 11px;
  }
}

.flatpickr-time input {
  padding: 7px !important;
}

@media (min-width: 422px) {
  .popular-cards{
    .blog-card{
      height: 170px;
      width: 170px;
    }
  }
}
[dir="rtl"] {
  #marker-map, #lines-map {
    #jvm-markers-labels-group text{
      direction: ltr;
    }
  }
  // #jvm-markers-labels-group text {
  //   fill: variables.$text-muted;
  //   direction: ltr !important;
  // }
}

@media (max-width: 992px) {
  [data-nav-layout="horizontal"] {
    .main-content.app-content{
      margin-block-start: 1rem;
    }
  }
}
#candidate-statistics{
  .apexcharts-legend {
    padding: 0 !important;
  }
}

@media (min-width: 769px) {
  .gslide-description.description-left{
    border-start-start-radius: 0.3rem;
    border-end-start-radius: 0.3rem;
  }
    
  .glightbox-clean .description-left .gdesc-inner{
    border-start-start-radius: 0.3rem;
    border-end-start-radius: 0.3rem;
  }

  .gslide-description.description-bottom{
    border-end-end-radius: 0.3rem;
    border-end-start-radius: 0.3rem;
  }
    
  .glightbox-clean .description-bottom .gdesc-inner{
    border-end-end-radius: 0.3rem;
    border-end-start-radius: 0.3rem;
  }

  .gslide-description.description-right{
    border-start-end-radius: 0.3rem;
    border-end-end-radius: 0.3rem;
  }
    
  .glightbox-clean .description-right .gdesc-inner{
    border-start-end-radius: 0.3rem;
    border-end-end-radius: 0.3rem;
  }

  .gslide-description.description-top{
    border-start-end-radius: 0.3rem;
    border-start-start-radius: 0.3rem;
  }
    
  .glightbox-clean .description-top .gdesc-inner{
    border-start-end-radius: 0.3rem;
    border-start-start-radius: 0.3rem;
  }

}
.todo-content-custom{
  .table {
    tbody tr:last-child  td {
      border-bottom: 0;
    }
  }
}

.dropzone .dz-preview:hover {
  z-index: 99 !important;
}
.gridjs-pagination .gridjs-pages button:not(:first-child) {
  border-inline-start: 1px solid transparent !important;
}

.tagify__dropdown .tagify__dropdown__item:hover  {
  strong, span {
    color: #fff !important;
  }
}

[data-menu-styles=color][data-theme-mode="light"][data-nav-layout=vertical][data-vertical-style=overlay][data-toggled=icon-overlay-close] {
  .animated-arrow span:before, .animated-arrow span:after {
    background: #ffffff;
  }
}
@media (min-width: 992px) {
  [data-bg-img=bgimg1], [data-bg-img=bgimg2], [data-bg-img=bgimg3], [data-bg-img=bgimg4], [data-bg-img=bgimg5] {
    &[data-vertical-style=doublemenu][data-menu-styles="light"][data-theme-mode="dark"]  {
      .app-sidebar .doublemenu_slide-menu {
        background: white !important;
        .btn-light {
          color: #011a42 !important;
        }
      }
    }
  } 
}
.fc .fc-daygrid-body {
  width: 100% !important;
}
.fc .fc-scrollgrid-section, .fc .fc-scrollgrid-section table, .fc .fc-scrollgrid-section > td {
  width: 100% !important;
}
.plyr--video .plyr__controls {
  flex-wrap: wrap !important;
}
[data-header-position=scrollable][data-nav-layout=horizontal][data-width="boxed"] .app-sidebar.sticky {
  position: relative;
  &.sticky-pin {
    position: fixed;
  }
}
[dir="rtl"] {
  @media (max-width: 320px) {
    .ql-snow .ql-tooltip {
      transform: translatex(0) !important;
    }
  }
  .autoComplete_wrapper > ul > li {
    text-align: right;
  }
}
[data-theme-mode="dark"]{
  .wizard-step {
    .form-check-input.form-checked-dark:checked {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.1);
    }
  }
}

@media (max-width: 400px) {
  .gridjs-pagination .gridjs-pages button {
    padding: 5px 12px !important;
  }
}
.fc .fc-listWeek-view .fc-list-event:hover td {
  background-color: transparent !important;
}
.fc .fc-listWeek-view .fc-list-event:hover td {
  a:not([href]):not([class]), a:not([href]):not([class]):hover {
    color: #fff;
  }
}
.fc .fc-listWeek-view .fc-list-event:hover  {
  &.fc-daygrid-block-event:hover {
    color: #fff !important;
  }
  &.fc-daygrid-block-event:hover .fc-list-event-dot {
    border-color: #fff !important;
  }
}
.tagify--select .tagify__tag{
  margin-inline-end: 7px !important;
}