/* Feedback Pinning Prototype */
:root {
  --fe-orange: #f1592a;
  --fe-orange-dark: #f04b19;
  --fe-grey: #58585a;
  --fe-grey-sh: #31323f;
  --fe-grey-light: #ccc;
  --fe-grey-dark: #333;
  --fe-black: #000;
  --fe-white: #fff;
  --fe-red: #b52929;
  --fe-green: #29b57f;
  --fe-text-color: #333;
  --fe-text-font: Arial, Helvetica, sans-serif;
  --fe-font-size-def: 15px;
  --fe-line-height-def: 15px;
  --fe-font-size-sm: 14px;
  --fe-line-height-sm: 14px;
  --fe-border-radius-def: 4px;
}

body.feedback-mode,
body.feedback-mode nav.navbar.navbar-fixed-top {
  margin-top: 50px;
}

body.feedback-mode nav.navbar.navbar-fixed-top {
  position: absolute !important;
}

.fe-btn {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
  transition: all 0.3s ease;
}
.fe-btn.active.focus,
.fe-btn.active:focus,
.fe-btn.focus,
.fe-btn:active.focus,
.fe-btn:active:focus,
.fe-btn:focus,
.fe-btn:hover {
  outline: none;
  text-decoration: none;
}
.fe-btn.active,
.fe-btn:hover {
  color: #f1592a;
  background-color: #fff;
  border-color: #f1592a;
}

.feedback-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  padding: 0 20px;
  display: flex;
  align-items: center;
  z-index: 1110;
  font-family: Arial, Helvetica, sans-serif;
}

.feedback-bar-title {
  display: inline-block;
  position: relative;
  top: 0;
  font-size: 20px;
  line-height: 20px;
  color: #333;
}

.feedback-sidebar {
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  width: 310px;
  background-color: #fff;
  color: #333;
  border-right: 1px solid #ccc;
  padding: 10px 5px 15px 10px;
  z-index: 1110;
  font-family: Arial, Helvetica, sans-serif;
  transition: left 0.3s ease;
}
.feedback-sidebar.collapsed {
  left: -290px;
}

.feedback-holder {
  height: 100%;
  padding-top: 45px;
  padding-right: 10px;
  overflow-y: auto;
}

.feedback-toggle-btn {
  position: absolute;
  top: 50%;
  right: -26px;
  transform: translateY(-50%);
  background-color: #fff;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 4px 4px 0;
  padding: 15px 9px;
  cursor: pointer;
  z-index: 1102;
}

.feedback-toggle-btn i {
  position: relative;
  top: 0;
  right: 1px;
  font-size: 22px;
}

.feedback-status {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-content: center;
  align-items: center;
  padding: 10px 10px 10px 20px;
  padding-bottom: 15px;
  padding-bottom: 10px;
  background-color: #fff;
  z-index: 1102;
}
.feedback-status .feedback-status-item {
  flex-basis: 40%;
  margin: 0 2%;
  padding: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  color: #9e9e9e;
  border-bottom: 1px solid #9e9e9e;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease-in-out, border-bottom-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.feedback-status .feedback-status-item.feedback-all {
  flex-basis: 15%;
}
.feedback-all.active,
.feedback-status-item:hover,
.feedback-status-item.inactive:hover {
  color: #333;
  border-bottom-color: #333;
}
.feedback-active.active,
.feedback-status-item.feedback-active:hover,
.feedback-status-item.feedback-active.highlight {
  color: #f1592a;
  border-bottom-color: #f1592a;
}
.feedback-resolved.active,
.feedback-status-item.feedback-resolved:hover,
.feedback-status-item.feedback-resolved.highlight {
  color: #2bb673;
  border-bottom-color: #2bb673;
}
.feedback-status-item.inactive {
  color: #ccc;
  border-bottom-color: #ccc;
}

.feedback-status-item.feedback-active.highlight,
.feedback-status-item.feedback-resolved.highlight {
  transform: scale(1.1);
}

.feedback-status span {
  display: inline-block;
  padding-right: 5px;
}

.feedback-pin {
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: #f1592a;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 23px;
  text-align: center;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1100;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.feedback-pin.hovered,
.feedback-pin.active {
  transform: scale(1.3);
  /* transition: transform 0.2s ease; */
}

.feedback-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feedback-list-item {
  position: relative;
  background-color: #fff;
  border-radius: 0;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  line-height: 14px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}
.feedback-list-item.highlight,
.feedback-list-item.hovered,
.feedback-list-item.active {
  background-color: #eee;
}

.feedback-item-wrapper {
  padding: 15px 10px 10px 10px;
  transform-style: preserve-3d;
  perspective: 800px;
}
.feedback-item-wrapper > * {
  backface-visibility: hidden;
}

@keyframes slideRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(300px); }
}

@keyframes slideLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-300px); }
}

.slide-right {
  animation: slideLeft 0.3s ease-in-out;
}
.slide-left {
  animation: slideRight 0.3s ease-in-out;
}

@keyframes flip {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }
}

.flip {
  animation: flip 0.4s ease;
}

.feedback-item-pin {
  position: relative;
  top: -6px;
  width: 26px;
  height: 26px;
  background-color: #f1592a;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 23px;
  text-align: center;
  border: 2px solid #fff;
  border-radius: 50%;
}
.feedback-list-item.highlight .feedback-item-pin,
.feedback-list-item.hovered .feedback-item-pin,
.feedback-list-item.active .feedback-item-pin {
  transform: scale(1.2);
  transition: transform 0.2s ease;
}

.feedback-item-data {
  text-align: left;
}
.feedback-item-resolved {
  text-align: right;
}

.feedback-item-author {
  font-weight: bold;
  font-size: 12px;
}
.feedback-item-time {
  margin-top: 2px;
  margin-bottom: 5px;
  color: #a6a6a6;
  font-size: 10px;
}
.feedback-item-comment {
  padding: 5px 0;
}

.feedback-list-item:not(.resolved) .feedback-item-resolved {
  display: none;
}
.feedback-item-resolved-label {
  margin-top: 8px;
  color: #58585a;
  font-size: 10px;
  line-height: 12px;
}

.feedback-item-btn-holder {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px;
}
.feedback-item-btn-holder .fe-btn {
  width: 30px;
  height: 30px;
  padding: 4px;
  font-size: 16px;
  line-height: 15px;
}

.fe-btn.fe-delete:hover {
  color: #b52929;
  background-color: #fff;
  border-color: #b52929;
}
.fe-btn.fe-resolved:hover {
  color: #2bb673;
  background-color: #fff;
  border-color: #2bb673;
}

.feedback-list-item .fe-btn.fe-delete,
.feedback-list-itemd .fe-btn.fe-resolved {
  display: block;
}
.feedback-list-item .fe-btn.fe-active {
  display: none;
}
.feedback-list-item.resolved .fe-btn.fe-delete,
.feedback-list-item.resolved .fe-btn.fe-resolved {
  display: none;
}
.feedback-list-item.resolved .fe-btn.fe-active {
  display: block;
}

.feedback-item-btn-holder .fe-btn.fe-delete {
  margin-right: 10px;
}

.feedback-list-item.resolved .feedback-item-pin,
.feedback-pin.resolved {
  background-color: #2bb673;
}

/* Popover style changes */
.popover.popover-feedback {
  min-width: 320px;
  padding: 0;
  z-index: 1109;
  border-radius: 4px;
  color: #58585a;
  font-family: Arial, Helvetica, sans-serif !important;
}
.popover.popover-feedback.bottom>.arrow {
  top: -10px;
  margin-left: -11px;
}
.popover.popover-feedback.bottom>.arrow:after {
  margin-left: -10px;
}
.popover-feedback .popover-title,
.popover-feedback .popover-custom-title {
  position: relative;
  margin: 0 0 8px 0;
  padding: 0 0 6px 2px;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 16px;
  text-transform: none;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
}
.popover-feedback .popover-content {
  padding: 0;
  word-wrap: break-word;
  font-size: 13px;
  line-height: 16px;
}
.popover-feedback .popover-content textarea {
  display: inline-block;
  width: 99%;
  max-width: 99%;
  height: auto;
  min-height: 80px;
  margin: 0 auto;
  padding: 13px;
  border: none;
  border-radius: 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #58585a;
}
.popover-feedback .popover-content textarea:focus,
.popover-feedback .popover-content textarea:focus-visible {
  outline: none;
}
.popover-feedback .popover-btn-holder {
  padding: 8px;
  border-top: 1px solid #ccc;
  text-align: center;
}
.popover-feedback .popover-btn-holder .fe-btn {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 13px;
}
.cancel-feedback:hover {
  color: #fff;
  background-color: #58585a;
  border-color: #58585a;
}
.popover-feedback .popover-btn-holder .fe-btn .btn-text {
  display: inline-block;
}

.popover-readonly {
  min-height: 65px;
  margin-top: 28px;
  padding: 13px;
  font-size: 13px;
  color: #58585a;
  border-top: 1px solid #ccc;
}
.popover-feedback .close-popover {
  position: absolute;
  top: 8px;
  right: 10px;
  color: #58585a;
  cursor: pointer;
  font-size: 27px;
}
.popover-feedback .close-popover:hover {
  color: #333;
}
/* Popover style changes END */

/* Tooltip style changes */
.feedback-sidebar .tooltip {
  width: 130px;
  font-family: var(--fe-text-font);
  font-size: 12px;
  line-height: 16px;
  word-wrap: break-word;
  border-radius: var(--fe-border-radius-def);
  color: var(--fe-grey-sh);
  z-index: 1102;
}
.feedback-sidebar .tooltip.in {
  opacity: 1;
}
.feedback-sidebar .tooltip.left .tooltip-arrow {
  border-left-color: var(--fe-grey);
}
.feedback-sidebar .tooltip.top .tooltip-arrow {
  border-top-color: var(--fe-grey);
}
.feedback-sidebar .tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--fe-grey);
}
.feedback-sidebar .tooltip-inner {
  padding: 6px;
  color: var(--fe-grey-sh);
  background-color: var(--fe-white);
  border: 1px solid var(--fe-grey);
  border-radius: var(--fe-border-radius-def);
}
@media (max-width: 600px) {
  .feedback-sidebar .tooltip {
    display: none !important;
  }
}
/* Tooltip style changes END */

/* Scrollbar custom */
.feedback-sidebar {
  left: -10px;
  width: 320px;
  padding: 10px 5px 30px 0;
  box-shadow: 8px -7px 10px -1px rgba(0, 0, 0, 0.4) inset;
  -webkit-box-shadow: 8px -7px 10px -1px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 8px -7px 10px -1px rgba(0, 0, 0, 0.4) inset;
}
.feedback-sidebar.collapsed {
  left: -300px;
}
.feedback-holder {
  direction: rtl;
  padding-left: 15px;
}
.feedback-status,
.feedback-list {
  direction: ltr;
}
.feedback-list {
  height: calc(100% + 1px);
}
.feedback-holder::-webkit-scrollbar {
  width: 5px;
  background-color: #fff;
}
.feedback-holder::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px #e5e5e5;
  background-color: #fff;
  border-radius: 4px;
}
.feedback-holder::-webkit-scrollbar-thumb {
  background-color: #e5e5e5;
  border-radius: 4px;
}

.scroll-down-arrow {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translatex(-50%);
  width: 30px;
  height: 25px;
  font-size: 25px;
  line-height: 28px;
  animation: jump-arrow 2.5s infinite;
  color: #58585a;
  text-align: center;
}
.scroll-down-arrow:hover,
.scroll-down-arrow:focus,
.scroll-down-arrow:active {
  color: #333;
}

@keyframes jump-arrow {
  0%,
  20%,
  55%,
  80%,
  100% {
    transform: translate3d(-50%, 0, 0);
  }
  40% {
    transform: translate3d(-50%, -9px, 0);
  }
  70% {
    transform: translate3d(-50%, -7px, 0);
  }
  90% {
    transform: translate3d(-50%, -4px, 0);
  }
}

.feedback-cursor-bubble {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
  margin-left: 5px;
  padding: 0;
  font-size: 30px;
  line-height: 30px;
  background-color: transparent;
  color: #f1592a;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 100ms ease;
  display: none;
  user-select: none;
}
.feedback-cursor-bubble i {
  -webkit-text-stroke: 1px #fff;
  color: #f1592a;
}

.feedback-cursor-bubble.pop {
  animation: cursorPop 300ms ease;
}
@keyframes cursorPop {
  0%   { transform: translate(-50%, -50%) scale(1); }
  20%  { transform: translate(-50%, -50%) scale(1.2); }
  60%  { transform: translate(-50%, -50%) scale(1.4); }
  100% { transform: translate(-50%, -50%) scale(1); }
}