// >>-- 70 Misc css start --<<

.app-line-breadcrumbs{
  li {
    display: inline-block;
    &+li{
      &::before {
        content: "/";
        color: var(--font-light-color);
        padding-left: 0.5rem;
        padding-right: 0.5rem;
      }
      &.active {
        a{
          color: rgba(var(--primary), 1);
        }
      }
      &:hover {
        a {
          text-decoration: underline;
        }
      }
    }
  }
}

@mixin circle_breadcrumbs_mixin($name, $color) {
    .breadcrumbs-#{$name} {
      li {
        &.active {
          a {
            background: rgba(#{$color}, 1);
          }
        }
      }
    }
}
@each $name, $color in $colors {
  @include circle_breadcrumbs_mixin(#{$name}, map-get($colors , $name));
}

.app-breadcrumb {
  .breadcrumb {
    border: 1px solid var(--border_color);
    border-radius: var(--app-border-radius);
  }
}

.simple-breadcrumbs {
  li {
    display: inline-block;
    padding: 5px 15px;
    background: rgba(var(--secondary), 0.1);
    transform: skew(-20deg);
    cursor: pointer;
    a {
      display: block;
      transform: skew(20deg);
    }
    &.active {
      background: rgba(var(--primary), 1);
      a{
        color: rgba(var(--white),1);
      }
    }
  }
}

.breadcrumb {
  flex-wrap: nowrap;
  border-radius: 5px;
  li {
    display: inline-block;
    color: rgba(var(--dark), 0.75);
    font-weight: 500;
    & + li {
      &::before {
        font-family: "tabler-icons";
        content: "\ea61" !important;
        padding: 0 !important;
      }
      &.active {
        color: rgba(var(--primary), 1);
      }
    }
    i {
      margin-right: 5px;
      line-height: 1.2;
    }
  }
}

.line-breadcrumbs {
  li {
    display: inline-block;
    color: rgba(var(--dark), 0.75);
    font-weight: 600;
    & + li {
      &::before {
        content: "/";
        color: rgba(var(--secondary), 1);
        padding-left: 10px;
        padding-right: 10px;
      }
      &.active {
        a{
          color: rgba(var(--primary), 1);
        }
      }
      &:hover {
        a {
          text-decoration: underline;
        }
      }
    }
  }
}

.breadcrumbs {
  li {
    display: inline-block;
    color: rgba(var(--dark), 0.75);
    font-weight: 600;
    & + li {
      &::before {
        font-family: "tabler-icons";
        content: "\f60d";
        color: var(--font-light-color);
        padding-left: 8px;
      }
      &.active {
        a{
          color: rgba(var(--primary), 1);
        }
      }
    }
  }
}

.simple-shape-breadcrumbs {
  li {
    position: relative;
    background: rgba(var(--secondary), 0.1);
    padding: 5px 25px;
    text-align: center;
    display: inline-block;
    margin-left: 0;
    &:last-child {
      :before,
      :after {
        display: none;
      }
    }
    &.active {
      background-color: rgba(var(--primary), 1);
      a{
        color: rgba(var(--white),1) ;
      }
    }
  }
}

.circle-breadcrumbs {
  li {
    display: inline-block;
    position: relative;
    margin-right: 20px;
    & + {
      li {
        margin-left: 20px;
      }
    }
    &.active{
      a{
        color: rgba(var(--white),1);
      }
    }
    a {
      display: block;
      width: 35px;
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      text-align: center;
      border-radius: 50%;
      background-color: rgba(var(--secondary), 0.1);
      color: rgba(var(--dark), 0.75);
      &::after {
        content: ">";
        position: absolute;
        left: -25px;
        font-size: 20px;
      }
    }
    &:first-child {
      a {
        &::after {
          content: "";
        }
      }
    }
  }
}

.shape-breadcrumbs {
    background-color: rgba(var(--info));
    padding: 6px 15px;
    width: 100%;
    border-radius: 10px;
    li {
        position: relative;
        padding: 10px 25px;
        text-align: center;
        color: rgba(var(--white),1);
        display: inline-block;
        margin-left: -10px;
        border-radius: 6px;

        :before,
        :after {
            content: "";
            position: absolute;
            width: 21px;
            height: 21px;
            z-index: 1;
            right: -8px;
        }
        :before {
            bottom: 0;
            transform: skewX(-45deg);
        }
        :after {
            top: 0;
            transform: skewX(45deg);
        }
        &:last-child {
            :before,
            :after {
                display: none;
            }
        }
        &.active {
            background-color: white;
            :before,
            :after {
                background-color: white;
                
            }
            a{
                color: black;
                margin-left: 2px;
            }
        }
    a{
        color: white;
        margin-left: 18px;
    }
    }
}

.rounded-breadcrumbs {
	display: inline-block;
	padding: 0;
	margin: 0;
	border-radius: 5px 25px 25px 5px;
	overflow: hidden;
	li {
		float: left;
		margin-right: 3px;
		position: relative;
		z-index: 1;
		&:before {
			display: none;
		}
		&:after {
			content: "";
			width: 40px;
			height: 100%;
			background: rgba(var(--success));
			position: absolute;
			top: 0;
			right: -20px;
			z-index: -1;
		}
		&:nth-last-child(2) {
			&:after {
				display: none;
			}
		}
		&:last-child {
			&:after {
				display: none;
			}
			display: block;
			padding: 10px 22px;
			font-size: 14px;
			font-weight: bold;
			border-radius: 0 25px 25px 0;
			// box-shadow: 5px 0 5px -5px #333;
			margin-right: 0;
            color: rgba(var(--success));
            background-color: rgba(var(--success), 0.1);
            
		}
		a {
			display: block;
			padding: 10px 22px;
			font-size: 14px;
			border-radius: 0 25px 25px 0;
			// box-shadow: 5px 0 5px -5px #333;
			background: rgba(var(--success));
            color:white;
           
            
		}
	}
}

.shape-step {
    li {
        position: relative;
        background: rgba(var(--light), 1);
        padding: 15px 40px;
        text-align: center;
        color: var(--white);
        display: inline-block;
        margin-left: -10px;
        a:before,
        a:after {
            content: "";
            position: absolute;
            width: 34px;
            height: 27px;
            z-index: 1;
            border-right: 12px solid rgba(var(--white),1);
            right: -6px;
        }
        a:before {
            bottom: 0;
            transform: skewX(-45deg);
        }
        a:after {
            top: 0;
            transform: skewX(45deg);
        }
        &:last-child {
            a:before,
            a:after {
                display: none;
            }
        }
        &.active {
            background-color: rgba(var(--primary), 1);
            a:before,
            a:after {
                background-color: rgba(var(--primary), 1);
            }

            a{
                color: white;
            }
        }

        a{
            color: rgba(var(--dark));
            font-size: 16px;
        }
    }
}

.app-pagination {
  gap: 10px;
  .page-item {
    .page-link {
      font-weight: 600;
      color: rgba(var(--primary)) ;
      border-radius: 5px !important;
      &:focus{
        background-color:var(--white);
        box-shadow: 0 0 0 0.25rem rgba(var(--primary), 0.3);
      }
    }
    &.active {
      .page-link {
        color: rgba(var(--white)) ;
        background-color: rgba(var(--primary), 1);
        border-color: rgba(var(--primary), 1);
      }
    }
  }
}

// >>-- 70 Misc css end --<<