@charset "UTF-8";
/* For Sharp Solid */
:root {
  --fa-style-family: Wert für fa-style-family-sharp;
  --fa-style: 900;
}


.small_font {
  font-size: 8px;
}

.bd-placeholder-img {
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.nav-hide {
  display: none;
}

.theme-selection {
  height: 40px;
  line-height: 40px;
  background-color: hsl(var(--b2));
  padding: 0 15px;
}

[data-open-nav] {
  color: #6c757d !important;
  text-decoration: none;
}

#store_details {
    border: 1px solid black;
    background: hsl(var(--b1));
    width: 90vw;       /* maximal 90% der Viewport-Breite */
    max-width: 600px;  /* aber nie größer als 600px */
    height: auto;      /* Höhe flexibel */
    max-height: 80vh;  /* höchstens 80% der Höhe */
    position: absolute;
    z-index: 1000;
    top: 70px;
    left: 238px;
    overflow: scroll;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
button.loading:before {
  content: "⚙️";
  animation: rotating 2.5s linear infinite;
  display: inline-block;
}

button.loading {
  content: "loading";
  opacity: 0.6;
}

.fixed-top {
  z-index: 1000000000;
}

#la-wrapper {
  display: none;
}

ul.menu.menu-sm {
  width: 300px;
}

body.times #la-wrapper {
  display: block;
}

#sidebar-wrapper h6.sidebar-heading {
  font-size: 11px;
  margin: 0 !important;
  background-color: hsl(var(--b2));
  padding: 5px;
}

tr.past.pastView {
  opacity: 1;
  background-color: hsl(var(--n));
}
tr.past.pastView a {
  color: white;
}
tr.future.pastView {
  opacity: 0.6;
  background-color: hsl(var(--b2));
}
tr.future.today {
  background-color: hsl(var(--wa) / 0.3);
  color: black;
}

ul.jjson-container .close {
  float: none;
  font-size: inherit;
  background-color: transparent;
}

.cal_button {
  margin-bottom: 5px;
  border-radius: 10px;
  padding: 5px;
  background-color: hsl(var(--wa));
  font-size: 16px;
  border-color: hsl(var(--in));
  color: black;
}

.icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: contain;
  margin-right: 5px;
}
.icon.saturday {
  content: url(../images/saturday.svg);
}
.icon.bell {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='bell' class='svg-inline--fa fa-bell fa-w-14' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M439.39 362.29c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71zM67.53 368c21.22-27.97 44.42-74.33 44.53-159.42 0-.2-.06-.38-.06-.58 0-61.86 50.14-112 112-112s112 50.14 112 112c0 .2-.06.38-.06.58.11 85.1 23.31 131.46 44.53 159.42H67.53zM224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64z'%3E%3C/path%3E%3C/svg%3E");
}
.icon.workplan {
  content: url(../images/workplan.svg);
}
.icon.kiwi {
  content: url(../images/kiwi.svg);
}
.icon.pwa {
  content: url(../images/pwa.svg);
}
.icon.swagger {
  content: url(../images/swagger.svg);
}
.icon.pencil {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='pencil-alt' class='svg-inline--fa fa-pencil-alt fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='currentColor' d='M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z'%3e%3c/path%3e%3c/svg%3e");
}
.icon.langify {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 156 156' width='156.0pt' height='156.0pt'%3E%3Cdef%3E%3CclipPath id='cut-off-inner'%3E%3Cpath d='M 87.70 31.27 C 91.70 32.01 95.70 32.14 99.61 33.38 C 109.47 36.46 118.96 42.57 124.74 51.26 C 129.61 58.38 133.27 67.19 133.18 75.92 C 134.71 94.72 123.42 113.58 106.12 121.09 C 99.40 124.52 92.39 125.13 85.03 125.98 C 70.71 126.03 56.36 125.99 42.04 126.00 C 39.91 126.14 38.86 125.09 39.00 122.96 C 38.98 107.97 39.03 92.96 38.98 77.96 C 38.91 74.92 39.67 72.10 40.15 69.13 C 43.94 49.33 61.71 33.24 81.86 31.78 C 83.95 31.55 85.71 30.86 87.70 31.27 Z' fill='%23ffffff' fill-opacity='1' /%3E%3C/clipPath%3E%3C/def%3E%3Cpath d='M 0.00 0.00 L 156.00 0.00 L 156.00 156.00 L 0.00 156.00 L 0.00 0.00 Z' fill='%23ffffff' fill-opacity='0' /%3E%3Cpath d='M 93.49 12.47 C 103.33 13.71 113.38 16.77 121.70 22.29 C 127.60 25.68 132.05 30.44 136.75 35.25 C 145.59 45.11 150.71 57.57 152.41 70.63 C 153.38 76.02 153.30 81.84 152.27 87.21 C 150.28 101.63 143.98 115.27 133.27 125.27 C 121.52 137.80 105.00 144.15 88.04 145.02 C 60.27 144.96 32.50 145.05 4.73 144.97 C 9.50 139.63 14.93 134.89 19.77 129.63 C 20.26 126.48 19.94 123.18 20.00 120.00 C 20.03 104.01 19.94 87.99 20.03 72.01 C 21.76 58.78 26.65 45.68 35.63 35.64 C 37.64 32.92 39.71 30.43 42.55 28.54 C 49.70 22.42 57.96 17.72 66.98 14.99 C 75.46 12.74 84.74 10.96 93.49 12.47 Z' fill='%23000000' clip-path='url(%23cut-off-inner)' /%3E%3Cpath d='M 87.70 31.27 C 91.70 32.01 95.70 32.14 99.61 33.38 C 109.47 36.46 118.96 42.57 124.74 51.26 C 129.61 58.38 133.27 67.19 133.18 75.92 C 134.71 94.72 123.42 113.58 106.12 121.09 C 99.40 124.52 92.39 125.13 85.03 125.98 C 70.71 126.03 56.36 125.99 42.04 126.00 C 39.91 126.14 38.86 125.09 39.00 122.96 C 38.98 107.97 39.03 92.96 38.98 77.96 C 38.91 74.92 39.67 72.10 40.15 69.13 C 43.94 49.33 61.71 33.24 81.86 31.78 C 83.95 31.55 85.71 30.86 87.70 31.27 Z' fill='%23ffffff' fill-opacity='1' /%3E%3C/svg%3E");
}

.nav-link {
  padding: 5px;
  padding-left: 32px;
}

.dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: transparent;
  border-radius: 15px;
  position: relative;
  top: 2px;
}
.dot.red {
  background-color: hsl(var(--er));
  border: 1px solid darkred;
}
.dot.green {
  background-color: hsl(var(--su));
  border: 1px solid darkgreen;
}

.nav-link-inline {
  display: inline-block;
  color: #333;
}

.sidebar .nav-link.active {
  background-color: hsl(var(--b2));
}
.sidebar .nav-link.active .nav-link-inline {
  color: #007bff;
}

.middle-error {
    width: 90vw;
    max-width: 600px;
    height: auto;
    min-height: 150px;
    max-height: 250px;
    margin: auto;
    border: 1px solid red;
    border-radius: 50px;
    padding: 50px;
    font-size: 25px;
    background-color: hsl(var(--wa));
    color: darkred;
    text-align: center;
}

#toast-container > .toast-info {
  background-color: hsl(var(--in));
}

.prevent-break {
  white-space: nowrap;
}

.keep-all {
  word-break: keep-all;
  white-space: nowrap;
}

.toast-top-center {
  top: 60px !important;
}

.nav-item svg {
  width: auto;
  height: 16px;
}

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

:root {
    --past-view: none;
}

.past {
  display: var(--past-view);
}
.past.show {
  display: table-row;
}

.nextcloud {
  padding: 0;
  margin: 0;
  position: fixed;
  top: 48px;
  left: 265px;
  width: calc(100% - 265px);
  height: calc(100% - 48px);
  border: 0;
}

#flashMessages {
  display: none;
}

.worker.vacation {
  opacity: 0.2;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.roles.checkbox {
  width: 150px;
  display: inline-block;
  margin-bottom: 5px;
}

.roles.checkbox label {
  white-space: nowrap;
}

/* * Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* Behind the navbar */
  padding: 48px 0 0;
  /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 52px);
  padding-top: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Scrollable contents if viewport is shorter than content. */
.burger-menu {
  display: none;
}

#sidebar-wrapper .close {
  display: none;
  margin-right: 13px;
  border-radius: 30px;
  padding: 10px;
  line-height: 10px;
  font-size: 12px;
  background: var(--color-base-200);
  color: white;
}

.navigation-open {
  overflow: hidden;
}

.form-control:disabled, .form-control[readonly] {
  opacity: 1;
  border: none;
  background: transparent;
  margin-left: -10px;
  margin-top: -10px;
}

.overlay {
    position: absolute;
    top: 150px;
    width: 90vw;
    max-width: 900px;
    height: auto;
    max-height: 80vh;
    left: 50%;
    transform: translateX(-50%); /* statt fixem calc() */
}

@media only screen and (max-width: 768px) {
  .overlay {
    position: fixed !important;
    top: 100px !important;
    left: 5% !important;
    opacity: 1 !important;
    width: 90%;
    margin: auto;
    transition: all 0.5s ease-out;
  }
  .navigation-open .overlay {
    opacity: 0.6;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease-out;
  }

  .container-fluid {
    padding-left: 5px;
    padding-right: 5px;
    /* Styling the hamburger lines */
  }
  .btn-line {
    width: 28px;
    height: 3px;
    margin: 0 0 5px 0;
    background: var(--color-base-200);
    transition: all 0.5s ease-out;
  }
  .menu-btn.close {
    transform: rotate(180deg);
  }
  .navigation-open .menu-btn .btn-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .navigation-open .menu-btn .btn-line:nth-child(2) {
    opacity: 0;
  }
  .navigation-open .menu-btn .btn-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
  #sidebar-wrapper {
    z-index: 999999999;
    position: fixed;
    left: -310px;
    width: 310px;
    height: 100%;
    background: var(--color-base-200);
    top: 70px;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
    transition: 0.5s;
    padding: 0;
  }
  #sidebar-wrapper .close {
    display: block;
  }
  #sidebar-wrapper.open {
    transition: 0.5s;
    left: 0;
  }
  .burger-menu {
    display: inline-block;
    margin-right: 10px;
    cursor: hand;
    top: 8px;
    position: relative;
  }
  .d-none.open {
    display: block !important;
  }
}
.sidebar-sticky {
  position: sticky;
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}
.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}
.sidebar .nav-link.active {
  color: #007bff;
}
.sidebar .nav-link:hover .feather, .sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
}

/* * Content */
[role=main] {
  padding-top: 133px;
}

/* Space for fixed navbar */
@media (min-width: 768px) {
  [role=main] {
    padding-top: 48px;
  }
}
/* Space for fixed navbar */
@media print {
  #sidebar-wrapper {
    display: none !important;
  }
  main#content-wrapper {
    margin: 5px 15px !important;
  }
  .container.main {
    width: 100% !important;
    margin: 0 !important;
  }
}
/* * Navbar */
.percent1 {
  background-color: #ff0000;
}

.percent100 {
  background-color: #00ff00;
}

.navbar-brand {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  background: var(--color-base-200);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}

.navbar .form-control {
  padding: 0.75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
}
.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

thead td {
  font-weight: bold;
}

.container.main {
  padding-top: 15px;
}

.jira-attachment-img {
  height: 125px;
  width: 156px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.jira-attachments, .tag {
  list-style: none;
  padding-left: 0;
  display: flex;
}

.tag li {
  margin-left: 5px;
}

.info-user-wrapper {
  display: flex;
}

.info-user-img {
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  height: 28px;
  width: 28px;
}

@media only screen and (max-width: 768px) {
  .crawler_image {
    width: 100%;
    height: auto;
    position: static;
  }
}
@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
  .bd-placeholder-img-lg .table.values td {
    border-top: none !important;
    padding: 0.3rem !important;
  }
  .bd-placeholder-img-lg .table.values td.key {
    width: 100px;
    overflow: hidden;
    font-weight: bold;
    text-overflow: ellipsis;
  }
  .bd-placeholder-img-lg .table.values td.value {
    min-width: 100px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
label.control-label {
  font-size: 18px;
  font-weight: 600;
}

#user-vacationType, #admin-vacationType {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 140px;
  background: var(--color-base-200);
  border-radius: 0.25rem;
  padding: 5px;

  .form-check-inline {
    white-space: nowrap;
  }

  .form-check.form-check-inline {
    margin: 5px;
  }
}

i.fa-solid {
  width: 16px;
}

a.close {
  position: absolute;
  right: 5px;
  font-size: 20px;
  top: 5px;
}

.arrow-right {
  position: absolute;
  top: 30px;
  left: 15px;
  font-size: 9px;
  color: rgb(128, 128, 128);
}

.loader-wrapper {
  display: none;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.loader {
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #3498db;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.operations {
  list-style: none;
  padding-left: 0;
}

.operations li {
  margin-bottom: 15px;
  width: 150px;
  height: 70px;
  padding: 10px;
  float: left;
  display: inline-block;
  text-align: center;
  text-wrap: none;
}

.operations li.break {
  clear: both;
}

fieldset {
  background: var(--color-base-200);
  z-index: 1;
  position: relative;
  top: -10px;
  left: -10px;
  width: 148px;
  height: 68px;
  border: 1px solid black;
  vertical-align: middle;
  line-height: 60px;
}

fieldset a {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-weight: bold;
}

fieldset a:hover {
  text-decoration: none;
}

legend {
  background: var(--color-base-200);
  color: white;
  font-size: 10px;
  padding: 5px 10px;
  width: 80px;
  line-height: 16px;
  left: 6px;
  position: absolute;
  top: -12px;
}

input {
  margin: 5px;
}

div#detail-log-view {
    display: none;
    position: absolute;
    max-width: calc(100vw - 240px);
    background: var(--color-base-200);
    padding: 15px;
    flex-direction: column;
    border: 1px solid black;
    border-radius: 15px;
    margin-top: 0;
    z-index: 100;
    top: 70px;
}

@media only screen and (max-width: 768px) {
    div#detail-log-view {
        max-width: 100vw !important;
        width: 100vw;
    }
}

/* eigene CSS-Datei, NACH jsoneditor.css laden */
.jsoneditor .jsoneditor-tree button.jsoneditor-button{
    background-image: url("/images/jsoneditor-icons.svg") !important;
}

textarea#log-view {
  height: 100vh;
}

.bg-click-close {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100vh;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
}

.jjson-container {
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  .floating-info,
  #detail-log-view {
    right: 0 !important;
    left: 5vw;
    top: 85px;
    width: 90vw !important;
    height: 80vh;
    position: fixed;
  }
}
.table.values td {
  border-top: none !important;
  padding: 0.3rem !important;
}

.table.values td.key {
  /* width: 100px; */
  overflow: hidden;
  font-weight: bold;
  text-overflow: ellipsis;
}

.table.values td.value {
  /* min-width: 100px; */
  /* max-width: 260px; */
  overflow: hidden;
  text-overflow: ellipsis;
}

.close-float {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 10000;
}

andypf-json-viewer {
  height: 75vh;
  overflow-y: scroll;
}

/*# sourceMappingURL=dashboard.css.map */

/* === MOBILE DARSTELLUNG: Alles untereinander als Karten === */
@media (max-width: 768px) {

    /* Das Grid aufbrechen */
    #worksheet {
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* Stundenraster ausblenden */
    #worksheet .cell {
        display: none !important;
    }

    /* Tagesüberschriften */
    #worksheet .title-even,
    #worksheet .title-odd {
        display: block !important;
        grid-column: auto !important;
        grid-row: auto !important;

        margin: 12px 0 4px !important;
        padding: 8px 10px !important;
        border-radius: 6px !important;

        background: #333 !important;   /* gerne an dein Theme anpassen */
        color: #fff !important;
        font-weight: 600 !important;
        font-size: 14px !important;
    }

    /* Worker-Balken werden zu Karten unter dem jeweiligen Tag */
    #worksheet .worker {
        position: static !important;          /* weg von absolute/grid */
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        grid-column: auto !important;
        grid-row: auto !important;

        width: 100% !important;
        box-sizing: border-box !important;

        margin: 4px 0 !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;

        color: #fff !important;
        font-size: 13px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        height: auto;
    }

    #worksheet .worker span.user {
        font-weight: 700 !important;
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }

    #worksheet .worker span.timerange {
        font-size: 12px !important;
        opacity: 0.9 !important;
    }

    /* Kleiner Abstand zwischen Karten */
    #worksheet .worker:not(:last-child) {
        margin-bottom: 6px !important;
    }

    /* Optional: Dev-Meeting-Buttons im Titel etwas einrücken */
    #worksheet .title-even .cal_button,
    #worksheet .title-odd .cal_button {
        margin-top: 4px !important;
        display: inline-block !important;
    }
}
.info-pannel {
	margin-bottom: 15px;
}

.info-user-wrapper {
	display: flex;
}

.info-user-img {
	background-color: transparent; 
	background-position: center center; 
	background-repeat: no-repeat; 
	background-size: cover; 
	border-radius: 50%; 
	height: 28px;
	width: 28px;
}

.info-user-img.user_48_48 {
	height: 48px;
	width: 48px;
}

.comment-wrapper .info-user-wrapper {
    width: auto;
}

.info-user-name {
    white-space: nowrap;
    vertical-align: middle;
    line-height: 28px;
    padding-left: 10px;
}

.jira-attachments,
.tag {
	list-style: none;
	padding-left: 0px;
	display: flex;
}

li {
	margin-left: 5px;
}

.input-group-append {
    height: 35px;
}

.jira-attachment-img {
	height: 125px;
	width: 156px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.alert-dark {
	background-color: #e9ecef;
}
	
.speech-bubble {
	position: relative;
	background: #d1ecf1;
	border-radius: .4em;
    min-height: 63px;
    padding: 15px;
    width: 100%;
}

.speech-bubble.left {
	margin-left: 30px;
}

.speech-bubble.right {
	margin-right: 30px;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top: 0;
	margin-top: -10px;
}

.speech-bubble.left:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right-color: #d1ecf1;
	border-left: 0;
	border-top: 0;
	margin-top: -10px;
	margin-left: -20px;
}

.speech-bubble.right:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-left-color: #d1ecf1;
	border-right: 0;
	border-top: 0;
	margin-top: -10px;
	margin-right: -20px;
}

.comment-wrapper {
    display: flex;
	align-items: stretch;
	justify-content: space-between;
    margin-bottom: 10px;
}

.comment-wrapper.right {
	flex-direction: row-reverse;
}