/**

  This file is part of the Meeds project (https://meeds.io/).

  Copyright (C) 2020 - 2023 Meeds Association contact@meeds.io

  This program is free software; you can redistribute it and/or
  modify it under the terms of the GNU Lesser General Public
  License as published by the Free Software Foundation; either
  version 3 of the License, or (at your option) any later version.
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  Lesser General Public License for more details.
  You should have received a copy of the GNU Lesser General Public License
  along with this program; if not, write to the Free Software Foundation,
  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/
@import "../variables.less";
@import "../mixins.less";

@font-face {
  font-family: NoLineClamp;
  src: local('system-ui');
  unicode-range: U+2026;
  size-adjust: 0%;
}
@font-face {
  font-family: NoLineClampHelvetica;
  src: local('Helvetica');
  unicode-range: U+2026;
  size-adjust: 0%;
}
@font-face {
  font-family: NoLineClampArial;
  src: local('Arial');
  unicode-range: U+2026;
  size-adjust: 0%;
}
@font-face {
  font-family: NoLineClampSansSerif;
  src: local('sans-serif');
  unicode-range: U+2026;
  size-adjust: 0%;
}
@font-face {
  font-family: NoLineClampRoboto;
  src: local('Roboto');
  unicode-range: U+2026;
  size-adjust: 0%;
}

.overflow-auto {
  overflow: auto !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-scroll {
  overflow: scroll !important;
}
.overflow-overlay {
  overflow: overlay !important;
}
.overflow-x-auto {
  overflow-x: auto !important;
}
.overflow-x-hidden {
  overflow-x: hidden !important;
}
.overflow-x-scroll {
  overflow-x: scroll !important;
}
.overflow-x-overlay {
  overflow-x: overlay !important;
}
.overflow-y-auto {
  overflow-y: auto !important;
}
.overflow-y-hidden {
  overflow-y: hidden !important;
}
.overflow-y-scroll {
  overflow-y: scroll !important;
}
.overflow-y-overlay {
  overflow-y: overlay !important;
}
.overflow-initial {
  overflow: initial !important;
}
.overflow-x-initial {
  overflow-x: initial !important;
}
.overflow-y-initial {
  overflow-y: initial !important;
}
.position-relative {
  position: relative !important;
}
.position-absolute {
  position: absolute !important;
}
.position-sticky {
  position: sticky !important;
}
.position-static {
  position: static !important;
}
.text-title {
  font-size: @textTitleFontSize !important;
  font-weight: @textTitleFontWeight !important;
  font-style: @textTitleFontStyle !important;
  color: @textTitleColor !important;
}
.text-header {
  font-size: @textHeaderFontSize !important;
  font-weight: @textHeaderFontWeight !important;
  font-style: @textHeaderFontStyle !important;
  color: @textHeaderColor !important;
}
.text-body {
  font-size: @textFontSize !important;
  font-weight: @textFontWeight !important;
  font-style: @textFontStyle !important;
  color: @textColor !important;
}
.text-subtitle {
  font-size: @textSubtitleFontSize !important;
  font-weight: @textSubtitleFontWeight !important;
  font-style: @textSubtitleFontStyle !important;
  color: @textSubtitleColor !important;
}
.text-title-color {
  color: @textTitleColor !important;
}
.text-header-color {
  color: @textHeaderColor !important;
}
.text-color {
  color: @textColor !important;
}
.text-subtitle-color {
  color: @textSubtitleColor !important;
}
.text-disabled-color {
  color: @textDisabledColor !important;
}
.header-color {
  color: @headingColor !important;
}
.error-color {
  color: @errorColor !important;
}
.success-color {
  color: @successColor !important;
}
.dark-grey-color{
  color: @darkGrey!important;
}
.line-height-normal {
  line-height: normal !important;
}
.line-height-revert {
  line-height: revert !important;
}
.line-height-1 {
  line-height: 1 !important;
}
.dark-yellow--color {
  color: @darkYellow !important;
}
.text-header-title {
  font-size: @textTitleFontSize !important;
  font-weight: @textTitleFontWeight !important;
  font-style: @textTitleFontStyle !important;
  color: @textTitleColor !important;
}
.text-font-small-size {
  font-size: @textSubtitleFontSize !important;
}
.text-subtitle-font-size {
  font-size: @textSubtitleFontSize !important;
}
.text-font-size, .text-body-font-size {
  font-size: @textFontSize !important;
}
.widget-text-header{
  font-size: @textHeaderFontSize !important;
  font-weight: @textHeaderFontWeight !important;
  font-style: @textHeaderFontStyle !important;
  color: @textHeaderColor !important;
}
.text-sub-title {
  color: @greyColorLighten1 !important;
}
.text-light-color {
  color: @textLightColor !important;
}
.mask-color {
  background-color: @maskColor !important;
}
.error-color-background {
  background-color: @errorColor !important;
}
.success-color-background {
  background-color: @successColor !important;
}
.info-color-background {
  background-color: @infoColor !important;
}
.warning-color-background {
  background-color: @warningColor !important;
}
.light-grey-background {
  background-color: @greyColorOpacity1 !important;
}
.light-grey-background-color {
  background-color: @lightGrey !important;
}
.light-black-background {
  background-color: @baseColorLight !important;
}
.grey-background {
  background-color: @greyColor !important;
}
.grey-lighten1-background {
  background-color: @greyColorLighten1 !important;
}
.grey-text {
  color: @greyColor !important;
}
.border-color-transparent {
  border: 1px solid transparent !important;
}
.border-color-grey {
  border: 1px solid @greyColor !important;
}
.border-color-grey-lighten {
  border: 1px solid @greyColorLighten1 !important;
}
.border-color-thin-grey-opacity1 {
  border: thin solid @greyColorOpacity1 !important;
}
.border-color-thin-grey-opacity2 {
  border: thin solid @greyColorOpacity2 !important;
}
.border-color {
  border: 1px solid @btnBorder !important;
}
.border-white {
  border: 2px solid @white;
}
.secondary-border-color {
  border: 1px solid @secondaryColor !important;
}
.primary-border-color {
  border: 1px solid @primaryColor !important;
}
.border-primary-dashed {
  border: 2px dashed @primaryColor !important;
}
.border-grey-dashed {
  border: 1px dashed @greyColorLighten1 !important;
}
.border-error-dashed-1 {
  border: 1px dashed @errorColor !important;
}
.border-error-dashed-2 {
  border: 2px dashed @errorColor !important;
}
.border-top-color {
  border-top: 1px solid @btnBorder !important;
}
.border-bottom-color {
  border-bottom: 1px solid @btnBorder !important;
}
.border-right-color {
  border-right: 1px solid @btnBorder !important;
}
.border-left-color {
  border-left: 1px solid @btnBorder !important;
}
.no-border-recursive * {
  border: 0 !important;
}
.no-border {
  border: 0 !important;
}
.no-border-bottom {
  border-bottom: 0 !important;
}
.no-border-top {
  border-top: 0 !important;
}
.no-border-left {
  border-left: 0 !important;
}
.no-border-right {
  border-right: 0 !important;
}
.box-shadow {
  box-shadow: 0px 0px 0px -2px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 0px rgba(0, 0, 0, 0.1) !important;
}
.no-box-shadow {
  box-shadow: none !important;
}
.border-radius-circle {
  border-radius: 50% !important;
}
.border-radius {
  border-radius: @inputBorderRadius !important;
}
.card-border-radius {
  border-radius: @borderRadius !important;
}
.border-top-left-radius {
  border-top-left-radius: @baseBorderRadius !important;
}
.border-top-right-radius {
  border-top-right-radius: @baseBorderRadius !important;
}
.border-bottom-left-radius {
  border-bottom-left-radius: @baseBorderRadius !important;
}
.border-bottom-right-radius {
  border-bottom-right-radius: @baseBorderRadius !important;
}
.no-border-top-left-radius {
  border-top-left-radius: 0 !important;
}
.no-border-top-right-radius {
  border-top-right-radius: 0 !important;
}
.no-border-bottom-left-radius {
  border-bottom-left-radius: 0 !important;
}
.no-border-bottom-right-radius {
  border-bottom-right-radius: 0 !important;
}
.application-background {
  background: @baseBackground !important;
}
.application-min-height {
  min-height: ~"calc(var(--100vh, 100vh) - 120px)";
}
.brtr-0 {
  --appBorderRadiusTopRight: 0px;
}
.brtr-1 {
  --appBorderRadiusTopRight: 4px;
}
.brtr-2 {
  --appBorderRadiusTopRight: 8px;
}
.brtr-3 {
  --appBorderRadiusTopRight: 12px;
}
.brtr-4 {
  --appBorderRadiusTopRight: 16px;
}
.brtr-5 {
  --appBorderRadiusTopRight: 20px;
}
.brtl-0 {
  --appBorderRadiusTopLeft: 0px;
}
.brtl-1 {
  --appBorderRadiusTopLeft: 4px;
}
.brtl-2 {
  --appBorderRadiusTopLeft: 8px;
}
.brtl-3 {
  --appBorderRadiusTopLeft: 12px;
}
.brtl-4 {
  --appBorderRadiusTopLeft: 16px;
}
.brtl-5 {
  --appBorderRadiusTopLeft: 20px;
}
.brbr-0 {
  --appBorderRadiusBottomRight: 0px;
}
.brbr-1 {
  --appBorderRadiusBottomRight: 4px;
}
.brbr-2 {
  --appBorderRadiusBottomRight: 8px;
}
.brbr-3 {
  --appBorderRadiusBottomRight: 12px;
}
.brbr-4 {
  --appBorderRadiusBottomRight: 16px;
}
.brbr-5 {
  --appBorderRadiusBottomRight: 20px;
}
.brbl-0 {
  --appBorderRadiusBottomLeft: 0px;
}
.brbl-1 {
  --appBorderRadiusBottomLeft: 4px;
}
.brbl-2 {
  --appBorderRadiusBottomLeft: 8px;
}
.brbl-3 {
  --appBorderRadiusBottomLeft: 12px;
}
.brbl-4 {
  --appBorderRadiusBottomLeft: 16px;
}
.brbl-5 {
  --appBorderRadiusBottomLeft: 20px;
}
/* Added without !important to allow adding 'hidden-sm-and-down' without being overridden */
.display-flex {
  display: flex;
}
.no-border-radius {
  border-radius: 0 !important;
}
.icon-lighten-opacity {
  color: @greyColorLighten1Opacity1 !important;
}
.border-light-color {
  border-color: @greyColorLighten1Opacity1 !important;
}
.disabled-background {
  background-color: @disableBackground !important;
}
.disabled--text {
  color: @btnDisableColor !important;
}
.primary--text {
  color: @primaryColor !important;
}
.secondary--text {
  color: @secondaryColor !important;
}
.primary {
  background-color: @primaryColor !important;
}
.secondary {
  background-color: @secondaryColor !important;
}
.tertiary-color {
  color: @tertiaryColor!important;
}
.tertiary {
  background-color: @tertiaryColor!important;
  color: @lightWhite;
}
.border-box-sizing {
  box-sizing: border-box !important;
}
.content-box-sizing {
  box-sizing: content-box !important;
}
.full-height {
  height: 100% !important;
  min-height: 100% !important;
}
.full-width {
  width: 100% !important;
  min-width: 100% !important;
}
.height-auto {
  height: auto !important;
  min-height: 0 !important;
}
.width-auto {
  width: auto !important;
  min-width: 0 !important;
}
.width-max-content {
  width: max-content !important;
  max-width: 100% !important;
}
.width-fit-content {
  width: fit-content !important;
  max-width: 100% !important;
}
.width-min-content {
  width: min-content !important;
  max-width: 100% !important;
}
.max-width-fit {
  max-width: 100%;
}
.object-fit-cover {
  object-fit: cover !important;
}
.object-fit-contain {
  object-fit: contain !important;
}
.object-fit-fill {
  object-fit: fill !important;
}
.object-fit-revert {
  object-fit: revert !important;
}
.no-min-width {
  min-width: 0 !important;
}
.no-max-width {
  max-width: none !important;
}
.header-height {
  height: 36px !important;
  min-height: 36px !important;
}
.clickable {
  cursor: pointer;
}
.not-clickable {
  cursor: default !important;
}
.not-clickable-link {
  pointer-events: none;
  cursor: default !important;
}
.not-allowed {
  cursor: not-allowed !important;
}
.col-resize-cursor {
  cursor: col-resize !important;
}
.crosshair-cursor {
  cursor: crosshair !important;
}
.transparent {
  background: transparent;
}
.hover-underline:hover {
  text-decoration: underline !important;
}
.hover-blue-color:hover {
  color: @blueLinkColor !important;
}
.text-link {
  color: @blueLinkColor !important;
  text-decoration: underline !important;
}
.hover-elevation:hover {
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12) !important;
}
.text-capitalize-first-letter {
  text-transform: lowercase;

  &:first-letter {
    text-transform: uppercase;
  }
}
.baseline-vertical-align {
  vertical-align: baseline !important;
}
.valign-baseline {
  vertical-align: baseline !important;
}
.valign-top {
  vertical-align: top;
}
.valign-middle {
  vertical-align: middle;
}
.valign-bottom {
  vertical-align: bottom;
}
.align-top {
  text-align: top;
}
.align-center, .center {
  text-align: center;
}
.align-bottom {
  text-align: bottom;
}
.width-full {
  width: 100%;
}
.text-break-all {
  overflow-wrap: break-all !important;
  word-break: break-all !important;
}
.absolute-vertical-center {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.absolute-horizontal-center {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.absolute-all-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.absolute-full-size {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
.sticky-vertical-center {
  position: sticky !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.scrollbar-width-none {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}
.textarea-no-resize {
  resize: none;
}

.icon-default-size {
  font-size: @sizeIconDefault;
}

.icon-mini-size {
  font-size: @fontSizeMini !important;
}

.icon-small-size {
  font-size: @fontSizeSmall !important;
}

.icon-medium-size {
  font-size: 22px !important;
}

.icon-large-size {
  font-size: 26px !important;
}

.icon-default-color {
  color: @greyColorLighten1 !important;
}

.ma-1px {
  margin: 1px !important;
}

.ml-n2px {
  margin-left: -2px !important;
}
.ma-n2px {
  margin: -2px !important;
}
.ms-n2px {
  margin-left: -2px ~'!important; /** orientation=lt */ ';
  margin-right: -2px ~'!important; /** orientation=rt */ ';
}
.me-n2px {
  margin-right: -2px ~'!important; /** orientation=lt */ ';
  margin-left: -2px ~'!important; /** orientation=rt */ ';
}

.py-6px {
  padding-top: 6px!important;
  padding-bottom: 6px!important;
}
.px-1px {
  padding-left: 1px!important;
  padding-right: 1px!important;
}

.r-3 {
  right: 12px!important;
}

.r-0 {
  right: 0px!important;
}
.l-0 {
  left: 0px!important;
}

.t-0 {
  top: 0px!important;
}
.b-0 {
  bottom: 0px!important;
}

.pb-2px {
  padding-bottom: 2px!important;
}

.pt-2px {
  padding-top: 2px!important;
}
.pa-0 {
  padding: 0px !important;
}
.ma-0 {
  margin: 0px !important;
}
.d-contents {
  display: contents !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.ellipsis-reverse {
    display: flex;
    flex-direction: row !important;
    text-overflow: clip !important;
}
.ellipsis-reverse-content {
    flex: 0 31px;
    height: 46px;
    font-size: 25px;
    padding-right: 5px;
    margin: auto;
    color: @primaryColor;
    display: inline-flex;

    &.hidden {
      /* Used to force width = 0 on flex items for IE */
      position: absolute;
      flex: 0 0 0px;
      width: 0;
    }
}
.ellipsis-reverse-apply {
    overflow: hidden;
    position: relative;
    flex: 1 auto;
    height: 20px;
    text-align: left;
    white-space: nowrap;
    width: 500px;
    direction: rtl;
    max-width: 100%;
    margin: auto;
}
.text-truncate-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* 2 x line-height max.. To not use padding with this */
.max-height-2lh {
  max-height: 2lh;
}
.text-truncate-3 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 3 !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical;
}
/* 3 x line-height max. To not use padding with this */
.max-height-3lh {
  max-height: 3lh;
}
.text-truncate-4 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
/* 4 x line-height max. To not use padding with this */
.max-height-4lh {
  max-height: 4lh;
}
.text-truncate-5 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 5;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
/* 5 x line-height max. To not use padding with this */
.max-height-5lh {
  max-height: 5lh;
}
.medium-grey-color {
  color: @mediumGrey !important;
}
.medium-grey {
  background-color: @mediumGrey !important;
}
.linear-gradient-grey-background {
  background: linear-gradient(45deg, #707070 1%, #fff 1%, #fff 49%, #707070 49%, #707070 51%, #fff 51%, #fff 99%, #707070 99%) !important;
  background-size: 9px 9px !important;
  background-repeat: repeat !important;
}
.menu-text-color {
  color: @menuTextColor !important;
}
.linear-gradient-white-background {
  background: linear-gradient(to left, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
}

.hidden-space {
  color: @mediumGrey !important;
}
.transition-2s {
  transition: 0.2s;
}
.z-index-snackbar {
  z-index: @zindexSnackBar!important;
}
.z-index-modal-overlay {
  z-index: @zindexModalBackdrop!important;
}
.z-index-modal {
  z-index: @zindexModal!important;
}
.z-index-drawer {
  z-index: @zindexDrawer !important;
}
.z-index-floating-button {
  z-index: @zindexFloadingButton !important;
}
.z-index-zero {
  z-index: 0!important;
}
.z-index-one {
  z-index: 1!important;
}
.z-index-two {
  z-index: 2!important;
}
.mix-blend-mode-difference {
  mix-blend-mode: difference !important;
}
.top-bar-height {
  height: @topbarHeight;
  min-height: @topbarHeight;
  max-height: @topbarHeight;
}
.card-selection {
  border: 1px solid @borderColor !important;
  &.selected {
     border-color: @primaryColor !important;
  }
}
.snippet-mobile-menu {
  &::before {
    content: '';
    position: absolute;
    background-color: @greyColorLighten1;
    width: 60px;
    height: 5px;
    border-radius: 2px;
    margin: auto;
    left: 0;
    right: 0;
  }
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: @inputHeight;
  box-sizing: border-box;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.pull-right {
  float: right ~'; /** orientation=lt */ ';
  float: left ~'; /** orientation=rt */ ';
}
.pull-left {
  float: left ~'; /** orientation=lt */ ';
  float: right ~'; /** orientation=rt */ ';
}
.hide {
  display: none !important;
}
.show {
  display: block;
}
.invisible {
  visibility: hidden;
}
.opacity-9 {
  opacity: 0.9 !important;
}
.opacity-8 {
  opacity: 0.8 !important;
}
.opacity-7 {
  opacity: 0.7 !important;
}
.opacity-6 {
  opacity: 0.6 !important;
}
.opacity-5 {
  opacity: 0.5 !important;
}
.opacity-4 {
  opacity: 0.4 !important;
}
.opacity-3 {
  opacity: 0.3 !important;
}
.opacity-2 {
  opacity: 0.2 !important;
}
.opacity-1 {
  opacity: 0.1 !important;
}
.aspect-ratio-1 {
  aspect-ratio: 1 !important;
}
.filter-blur-1 {
  -webkit-filter: blur(1px) !important;
  filter: blur(1px) !important;
}
.filter-blur-2 {
  -webkit-filter: blur(2px) !important;
  filter: blur(2px) !important;
}
.filter-blur-3 {
  -webkit-filter: blur(3px) !important;
  filter: blur(3px) !important;
}
.avatarXSmall {
  max-height: 36px;
  max-width: 36px;
}
.input-placeholder {
  &[placeholder]:empty::before {
    color: @placeholderText;
    content: attr(placeholder);
  }
  &[placeholder]:empty:focus::before {
    content: "";
  }
}

.list-border-active {
  .v-list-item--active:before {
    content: '' !important;
    width: 8px !important;
    background:@secondaryColor !important;
    position: absolute !important;
    left: 0 ~' !important; /** orientation=lt */ ';
    right: 0 ~' !important; /** orientation=rt */ ';
    opacity: 1 !important;
  }
}

.table-layout-auto {
  &, table {
    table-layout: auto !important;
  }
}
.input-width-auto {
  input, textarea {
    width: auto;
  }
}
.input-width-full {
  input, textarea {
    width: 100%;
  }
}
.specific-scrollbar {
  .specific-scrollbar()
}
.VuetifyApp .v-application .reset-style-box {
  div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol,
    ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {

    margin: revert;
    padding: revert;
    border: revert;
    outline: revert;
    font-size: revert;
    vertical-align: revert;
    background: revert;
    color: revert;
  }

  li {
    list-style: revert;
  }
  * {
    line-height:revert;
  }

  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: revert;
  }

  nav ul {
    list-style: revert;
  }

  a {
    margin: revert;
    padding: revert;
    font-size: revert;
    vertical-align: revert;
    background: revert;
  }

  ins {
    text-decoration: revert;
  }

  mark {
    font-style: revert;
    font-weight: revert;
  }

  del {
    text-decoration: revert;
  }

  abbr[title], dfn[title] {
    border-bottom: revert;
    cursor: revert;
  }

  table {
    border-collapse: revert;
    border-spacing: revert;
  }

  hr {
    display: revert;
    height: revert;
    border: revert;
    margin: revert;
    padding: revert;
  }

  input, select {
    vertical-align: revert;
  }
}
.VuetifyApp .v-application .rich-editor-content {
  ul, ol {
    margin: 0 0 10px 25px ~'; /** orientation=lt */ ';
    margin: 0 25px 10px 0 ~'; /** orientation=rt */ ';
    padding: 0 !important;
  }
  p {
    margin: 0 0 @baseLineHeight / 2;
  }
  blockquote {
    margin: 20px 0 7px 20px ~'; /** orientation=lt */ ';
    margin: 20px 20px 7px 0 ~'; /** orientation=rt */ ';
    background: @baseBackground;
    border-left: 5px solid @primaryColor ~'!important; /** orientation=lt */ ';
    border-right: 5px solid @primaryColor ~'!important; /** orientation=rt */ ';
    padding: 10px 0 10px 10px ~'!important; /** orientation=lt */ ';
    padding: 10px 10px 10px 0 ~'!important; /** orientation=rt */ ';
    p, div, ul li, ol li {
      font-size: @textFontSize;
      font-weight: @textFontWeight;
      font-style: @textFontStyle;
      color: @textColor;
      line-height: 1.25;
      margin-bottom: 0;
    }
  }
  a {
    color: @blueLinkColor;
    &:visited {
      color: purple;
    }
  }
}
