.devider {
  position: relative;
  line-height: 0;
}

.devider svg {
  display: block;
  width: 100%;
  height: auto;
}

.devider svg path {
  fill: currentColor;
}

.devider-bluegreen {
  color: var(--primary-color);
}
.devider-bluegreen--top::before {
    content: "" !important;
    width: 100%;
    height: 4px;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    background: var(--primary-color)!important;
    z-index: 2;
    top: inherit !important;
}
.devider-bluegreen--bottom::before {
    content: "" !important;
    width: 100%;
    height: 4px;
    position: absolute !important;
    top: -2px !important;
    left: 0 !important;
    background: var(--primary-color)!important;
    z-index: 2;
    bottom: inherit !important;
}

.devider-bluegreenlight {
  color: var(--bluegreen-light-color);
}
.devider-white {
  color: var(--white-color);
}
.devider-bluegreenlight--top::before {
    content: "" !important;
    width: 100%;
    height: 4px;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    background: var(--bluegreen-light-color)!important;
    z-index: 2;
    top: inherit !important;
}
.devider-bluegreenlight--bottom::before {
    content: "" !important;
    width: 100%;
    height: 4px;
    position: absolute !important;
    top: -2px !important;
    left: 0 !important;
    background: var(--bluegreen-light-color)!important;
    z-index: 2;
    bottom: inherit !important;
}
.devider-bluegreenultralight {
  color: var(--bluegreen-ultralight-color);
}
.bluegreenlight--top-line::after {
    content: "" !important;
    width: 100%;
    height: 4px;
    position: absolute !important;
    top: -2px !important;
    left: 0 !important;
    background: var(--bluegreen-light-color)!important;
    z-index: 2;
    bottom: inherit !important;
}

.devider-bluegreenultralight--bottom::before {
    content: "" !important;
    width: 100%;
    height: 4px;
    position: absolute !important;
    top: -2px !important;
    left: 0 !important;
    background: var(--bluegreen-ultralight-color)!important;
    z-index: 2;
    bottom: inherit !important;
}

.bluegreenultralight--top-line::after {
    content: "" !important;
    width: 100%;
    height: 4px;
    position: absolute !important;
    top: -2px !important;
    left: 0 !important;
    background: var(--bluegreen-ultralight-color)!important;
    z-index: 2;
    bottom: inherit !important;
}

.bluegreen-light-bg svg {
  background: var(--bluegreen-light-color);
}
.bluegreen-ultralight-bg svg {
  background: var(--bluegreen-ultralight-color);
}
.mirror-horizontal {
    transform: scaleX(-1);
}
.mirror-vertical svg {
    transform: scaleY(-1);
}

.mirror {
    transform: scaleX(-1) scaleY(-1);
}
.bg-lightblue {
  background: #F5F9FA;
}