/* Set the width of the sidebar */
main.container-fluid.sidebar-mode {
  padding-left: 364px;
  padding-right: 24px;
  margin-top: 0;
}
main.container-fluid.sidebar-mode .background-float-header {
  display: none;
}
main.sidebar-mode .tasks-container.accordion {
  width: 100%;
}
main.sidebar-mode .tasks-section .row {
  margin-left: 0;
  margin-right: 0;
}
main.sidebar-mode .generating-next-ticket-container {
  width: 100%;
  margin-bottom: 24px;
}
.sidebar {
  width: 340px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  /* overflow-x: hidden; */
  transition: 0.2s;
  background: #ffffff;
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  border-color: #eaecf0;
  border-radius: 0px;
  min-height: 1200px;
}

.sidebar.sidebar-collapse {
  width: 82px;
}
/* The navigation menu links */
.sidebar a {
  padding: 15px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style the sidebar links */
.sidebar .sidenav {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  padding: 16px;
  padding-bottom: 100px;
}
#playground-tickets-tab-content {
  height: 95%;
  width: 100%;
  overflow-x: hidden;
}
/* Style the content */
body.flowPage .main {
  transition: margin-left 0.5s;
  position: relative;
  padding-bottom: 100px;
  padding-top: 5px;
}

/* When the sidebar is closed, set the margin on the content to 0px */
.sidebar-closed .main {
  margin-left: 0px;
}

/* When the sidebar is closed, set the width of the sidebar to 0px with animation */
.sidebar-closed.sidebar {
  width: 0px;
  transition: 0.5s;
}

.sidebar .sb-section {
  margin-bottom: 24px;
}

.sidebar .text-content .title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
}
.sidebar .text-content .title small {
  color: #475467;
}
.sidebar .text-content .sub-title {
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  color: #475467;
}

.sidebar .text-content .sub-title-sm {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #475467;
}

.sidebar .sb-section textarea,
.sidebar .sb-section input {
  margin-top: 16px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
  color: #101828;
  font-size: 12px;
  line-height: 18px;
}
.sidebar .sb-section textarea::placeholder,
.sidebar .sb-section input::placeholder {
  color: #667085;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
}

.sidebar .sb-section textarea:hover{
  cursor: pointer;
  border: 1px solid #98A2B3;
}
.sidebar .sb-section textarea:focus{
  cursor: text;
}

.sidebar .sb-section input {
  height: 40px;
}

.sidebar #record-audio-btn {
  height: 40px;
  width: 100%;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: #344054;
}

.sidebar #record-audio-btn img {
  margin-right: 11px;
}

.sidebar #req-record-audio-btn {
  height: 40px;
  width: 100%;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: #344054;
}

.sidebar #req-record-audio-btn img {
  margin-right: 11px;
}

.sidebar #add-ticket-btn,
.sidebar #req-add-ticket-btn {
  height: 40px;
  width: 100%;
  margin-top: 8px;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: #344054;
}

.sidebar .sb-section #addTicketTitle {
  margin-top: 12px;
  width: 100%;
  height: 40px;
}
.sidebar .sb-section #additionalTicketTitleContainer .titleWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.sidebar .sb-section #additionalTicketTitleContainer input {
  width: 100%;
  margin-top: 0;
}
.sidebar .sb-section #additionalTicketTitleContainer button {
  width: 40px;
  height: 40px;
  padding: 6px;
}
#left-panel-dz-container,
#req-left-panel-dz-container {
  margin-top: 16px;
  z-index: 8;
}

#tickets-view.active #req-left-panel-dz-container,
#requirements-view #left-panel-dz-container {
  margin-top: 0;
}

#left-panel-dz-container #my-dropzone,
#req-left-panel-dz-container #my-dropzone,
#left-panel-dz-container-improve-existing-ticket
  #my-dropzone-improve-existing-ticket,
  .left-panel-dz-container #prd-dropzone {
  width: 100%;
  margin: 0;
}

/* hide .dz-preview not .dz-image-preview */
#left-panel-dz-container .dz-preview:not(.dz-image-preview),
#req-left-panel-dz-container .dz-preview:not(.dz-image-preview) {
  opacity: 0;
}

#left-panel-dz-container .dz-image-preview,
#req-left-panel-dz-container .dz-image-preview,
#left-panel-dz-container .dz-file-preview,
#req-left-panel-dz-container .dz-file-preview,
#left-panel-dz-container .dz-preview,
#req-left-panel-dz-container .dz-preview,
#left-panel-dz-container-improve-existing-ticket .dz-image-preview,
#left-panel-dz-container-improve-existing-ticket .dz-file-preview,
#left-panel-dz-container-improve-existing-ticket .dz-preview,
.left-panel-dz-container .dz-image-preview,
.left-panel-dz-container .dz-file-preview,
.left-panel-dz-container .dz-preview
 {
  width: 100%;
  padding: 0;
  min-height: unset;
  z-index: 8;
}

#left-panel-dz-container .dz-image-preview .dz-container,
#req-left-panel-dz-container
  .dz-image-preview#req-dz-add-image-container
  .dz-container,
#req-left-panel-dz-container .dz-image-preview .dz-container,
#left-panel-dz-container .dz-file-preview .dz-container,
#req-left-panel-dz-container .dz-file-preview .dz-container,
#left-panel-dz-container .dz-preview .dz-container,
#req-left-panel-dz-container .dz-preview .dz-container,
#left-panel-dz-container-improve-existing-ticket
  .dz-image-preview
  .dz-container,
   .left-panel-dz-container .dz-image-preview .dz-container{
  padding: 0;
  background: none;
  height: unset;
  border: none;
  margin-top: 24px;
  margin-bottom: 0;
}

#left-panel-dz-container .dz-image-preview .dz-filename,
#req-left-panel-dz-container .dz-image-preview .dz-filename,
#left-panel-dz-container .dz-file-preview .dz-filename,
#req-left-panel-dz-container .dz-file-preview .dz-filename,
#left-panel-dz-container .dz-preview .dz-filename,
#req-left-panel-dz-container .dz-preview .dz-filename,
#left-panel-dz-container-improve-existing-ticket
  .dz-image-preview
  .dz-filename {
  display: none;
}

#left-panel-dz-container .dz-image-preview .drag-icon,
#req-left-panel-dz-container .dz-image-preview .drag-icon,
#left-panel-dz-container .dz-file-preview .drag-icon,
#req-left-panel-dz-container .dz-file-preview .drag-icon,
#left-panel-dz-container .dz-preview .drag-icon,
#req-left-panel-dz-container .dz-preview .drag-icon,
#left-panel-dz-container-improve-existing-ticket .dz-image-preview .drag-icon {
  position: absolute;
  right: 0;
  margin-right: 0;
}
#left-panel-dz-container .dz-image-preview .dz-container,
#req-left-panel-dz-container
  .dz-image-preview#req-dz-add-image-container
  .dz-container,
#req-left-panel-dz-container .dz-image-preview .dz-container,
#left-panel-dz-container .dz-file-preview .dz-container,
#req-left-panel-dz-container .dz-file-preview .dz-container,
#left-panel-dz-container .dz-preview .dz-container,
#req-left-panel-dz-container .dz-preview .dz-container,
#left-panel-dz-container-improve-existing-ticket
  .dz-image-preview
  .dz-container,
#left-panel-dz-container-improve-existing-ticket .dz-file-preview .dz-container,
#left-panel-dz-container-improve-existing-ticket .dz-preview .dz-container {
  display: block;
  padding-right: 24px;
}

#left-panel-dz-container .dz-image-preview .dz-remove,
#req-left-panel-dz-container .dz-image-preview .dz-remove,
#left-panel-dz-container .dz-file-preview .dz-remove,
#req-left-panel-dz-container .dz-file-preview .dz-remove,
#left-panel-dz-container .dz-preview .dz-remove,
#req-left-panel-dz-container .dz-preview .dz-remove,
#left-panel-dz-container-improve-existing-ticket .dz-image-preview .dz-remove,
#left-panel-dz-container-improve-existing-ticket .dz-file-preview .dz-remove,
#left-panel-dz-container-improve-existing-ticket .dz-preview .dz-remove {
  display: none;
  position: absolute;
}

#left-panel-dz-container .dz-image-preview .dz-image,
#req-left-panel-dz-container .dz-image-preview .dz-image,
#left-panel-dz-container .dz-file-preview .dz-image,
#req-left-panel-dz-container .dz-file-preview .dz-image,
#left-panel-dz-container .dz-preview .dz-image,
#req-left-panel-dz-container .dz-preview .dz-image,
#left-panel-dz-container-improve-existing-ticket .dz-image-preview .dz-image,
#left-panel-dz-container-improve-existing-ticket .dz-file-preview .dz-image,
#left-panel-dz-container-improve-existing-ticket .dz-preview .dz-image {
  width: 100% !important;
  height: 272px !important;
}

#left-panel-dz-container
  .dz-image-preview
  .dz-text-input-container
  div.dz-input,
#req-left-panel-dz-container
  .dz-image-preview
  .dz-text-input-container
  div.dz-input,
#left-panel-dz-container .dz-file-preview .dz-text-input-container div.dz-input,
#req-left-panel-dz-container
  .dz-file-preview
  .dz-text-input-container
  div.dz-input,
#left-panel-dz-container .dz-preview .dz-text-input-container div.dz-input,
#req-left-panel-dz-container .dz-preview .dz-text-input-container div.dz-input,
#left-panel-dz-container-improve-existing-ticket
  .dz-image-preview
  .dz-text-input-container
  div.dz-input,
#left-panel-dz-container-improve-existing-ticket
  .dz-file-preview
  .dz-text-input-container
  div.dz-input,
#left-panel-dz-container-improve-existing-ticket
  .dz-preview
  .dz-text-input-container
  div.dz-input {
  margin-top: 4px;
}

#left-panel-dz-container .dz-image-preview#dz-add-image-container .title,
#left-panel-dz-container
  .dz-image-preview#dz-add-image-container
  .sub-title.main-cont,
#req-left-panel-dz-container .dz-image-preview#dz-add-image-container .title,
#req-left-panel-dz-container
  .dz-image-preview#dz-add-image-container
  .sub-title.main-cont,
#left-panel-dz-container .dz-preview#dz-add-image-container .title,
#left-panel-dz-container
  .dz-preview#dz-add-image-container
  .sub-title.main-cont,
#req-left-panel-dz-container .dz-preview#dz-add-image-container .title,
#req-left-panel-dz-container
  .dz-preview#dz-add-image-container
  .sub-title.main-cont,
#left-panel-dz-container-improve-existing-ticket
  .dz-image-preview#dz-add-image-container-improve-existing-ticket
  .title,
#left-panel-dz-container-improve-existing-ticket
  .dz-image-preview#dz-add-image-container-improve-existing-ticket
  .sub-title.main-cont,
.left-panel-dz-container .dz-image-preview#dz-add-file-container .title,
.left-panel-dz-container .dz-image-preview#dz-add-file-container .sub-title
{
  display: none;
}
#left-panel-dz-container .dz-image-preview#req-dz-add-image-container .title,
#left-panel-dz-container
  .dz-image-preview#req-dz-add-image-container
  .sub-title.main-cont,
#req-left-panel-dz-container
  .dz-image-preview#req-dz-add-image-container
  .title,
#req-left-panel-dz-container
  .dz-image-preview#req-dz-add-image-container
  .sub-title.main-cont,
#left-panel-dz-container .dz-preview#req-dz-add-image-container .title,
#left-panel-dz-container
  .dz-preview#req-dz-add-image-container
  .sub-title.main-cont,
#req-left-panel-dz-container .dz-preview#req-dz-add-image-container .title,
#req-left-panel-dz-container
  .dz-preview#req-dz-add-image-container
  .sub-title.main-cont {
  display: none;
}

#left-panel-dz-container
  .dz-image-preview#dz-add-image-container
  .sub-title.left-cont,
#req-left-panel-dz-container
  .dz-image-preview#dz-add-image-container
  .sub-title.left-cont,
#left-panel-dz-container
  .dz-preview#dz-add-image-container
  .sub-title.left-cont,
#req-left-panel-dz-container
  .dz-preview#dz-add-image-container
  .sub-title.left-cont,
#left-panel-dz-container-improve-existing-ticket
  .dz-image-preview#dz-add-image-container-improve-existing-ticket
  .sub-title.left-cont,
#left-panel-dz-container
  .dz-image-preview#dz-add-file-container
  .sub-title.left-cont,
  .left-panel-dz-container
  .dz-image-preview#dz-add-file-container
  .sub-title.left-cont {
  display: block !important;
  margin-top: 16px;
}
#left-panel-dz-container
  .dz-image-preview#req-dz-add-image-container
  .sub-title.left-cont,
#req-left-panel-dz-container
  .dz-image-preview#req-dz-add-image-container
  .sub-title.left-cont,
#left-panel-dz-container
  .dz-preview#req-dz-add-image-container
  .sub-title.left-cont,
#req-left-panel-dz-container
  .dz-preview#req-dz-add-image-container
  .sub-title.left-cont,
   .left-panel-dz-container
   .dz-image-preview#req-dz-add-image-container
   .sub-title.left-cont{
  display: block !important;
  margin-top: 16px;
}

#left-panel-dz-container .dz-image-preview#dz-add-image-container,
#req-left-panel-dz-container .dz-image-preview#req-dz-add-image-container,
#req-left-panel-dz-container .dz-image-preview#dz-add-image-container,
#left-panel-dz-container-improve-existing-ticket
  .dz-image-preview#dz-add-image-container-improve-existing-ticket,
.left-panel-dz-container .dz-image-preview#dz-add-file-container
 {
  background: #f2f4f7 !important;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 32px;
}
#left-panel-dz-container .dz-image-preview#req-dz-add-image-container,
#req-left-panel-dz-container .dz-image-preview#req-dz-add-image-container {
  background: #f2f4f7 !important;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 32px;
}

#left-panel-dz-container .dz-image-preview#dz-add-image-container .dz-container,
#req-left-panel-dz-container
  .dz-image-preview#req-dz-add-image-container
  .dz-container,
#left-panel-dz-container-improve-existing-ticket
  .dz-image-preview#dz-add-image-container-improve-existing-ticket
  .dz-container,
#left-panel-dz-container .dz-image-preview#dz-add-file-container .dz-container {
  margin-bottom: 0;
}

#left-panel-dz-container
  .dz-image-preview#req-dz-add-image-container
  .dz-container,
#req-left-panel-dz-container
  .dz-image-preview#req-dz-add-image-container
  .dz-container {
  margin-bottom: 0;
}
.dz-image-preview.dz-figma-generated .dz-container {
  margin-top: 0 !important;
}
#dz-add-image-container,
#dz-add-image-container-improve-existing-ticket {
  margin-bottom: 0 !important;
}
.side-nav-footer {
  position: fixed;
  bottom: 0;
  border-top: 1px solid #eaecf0;
  padding: 16px;
  width: 338px;
  background: #ffffff;
  z-index: 998;
}

.side-nav-footer #update-improve-tickets,
.side-nav-footer #req-update-improve-tickets {
  height: 52px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  color: #ffffff;
  padding: 12px 16px;
  width: 100%;
}

.side-nav-footer #add-sample-tickets {
  height: 52px;
  padding: 14px;
  margin-left: 16px;
}

/* scroll bar */
/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #eaecf0;
  border-radius: 8px;
  height: 116px;
}
/* Handle */
textarea::-webkit-scrollbar-thumb {
  height: 58px;
}

.ticket-row,
.req-ticket-row {
  position: relative;
}
.ticket-row .remove-sample-ticket,
.req-ticket-row .req-remove-sample-ticket {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: #f9fafb;
  border: 1px solid #eaecf0;
  border-radius: 4px;
  padding-left: 4px;
  display: none;
}
.ticket-row:hover > .remove-sample-ticket,
.req-ticket-row:hover > .req-remove-sample-ticket {
  display: block;
}
.ticket-row .remove-sample-ticket svg,
.req-ticket-row .req-remove-sample-ticket svg {
  vertical-align: text-top;
}
.ticket-row .remove-sample-ticket,
.req-ticket-row .req-remove-sample-ticket {
  cursor: pointer;
}
.ticket-row .remove-sample-ticket:hover svg path,
.req-ticket-row .req-remove-sample-ticket:hover svg path {
  fill: #d92d20;
}

.expand-collapse-container button {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 8px 6px;
}
.expand-collapse-container button:hover {
  background: #f9fafb;
}
.expand-collapse-container button::after {
  content: url("/assets/images/left-chevron-icon.svg");
}
.expand-collapse-container.sidebar-toggle-collapse button::after {
  content: url("/assets/images/right-chevron-icon.svg");
}
.expand-collapse-container.sidebar-toggle-collapse {
  right: 24px;
  top: 20px;
}

.expand-collapse-container {
  width: fit-content;
  position: absolute;
  right: -16px;
  top: 72px;
}

.sidebar.sidebar-collapse .sidenav .text-content:not(#ticket-image-description-section):not(.tab-content),
.sidebar.sidebar-collapse .sidenav .text-content#ticket-image-description-section .title,
.sidebar.sidebar-collapse .sidenav .text-content#ticket-image-description-section .sub-title-sm,
.sidebar.sidebar-collapse .sidenav .text-content#ticket-image-description-section .nav-tabs,
.sidebar.sidebar-collapse #dz-add-image-container,
.sidebar.sidebar-collapse #req-dz-add-image-container,
.sidebar.sidebar-collapse .dz-image .zoom-in,
.sidebar.sidebar-collapse .dz-text-input-container,
.sidebar.sidebar-collapse #list-tab-container {
  display: none;
}
.sidebar.sidebar-collapse #left-panel-dz-container .dz-image-preview .dz-image,
.sidebar.sidebar-collapse
  #req-left-panel-dz-container
  .dz-image-preview
  .dz-image,
.sidebar.sidebar-collapse #left-panel-dz-container .dz-file-preview .dz-image,
.sidebar.sidebar-collapse
  #req-left-panel-dz-container
  .dz-file-preview
  .dz-image {
  height: 33px !important;
  width: 50px !important;
  min-width: 50px !important;
}

.sidebar.sidebar-collapse #left-panel-dz-container,
.sidebar.sidebar-collapse #req-left-panel-dz-container {
  margin-top: 50px;
}

.sidebar.sidebar-collapse
  #left-panel-dz-container
  .dz-image-preview
  .dz-container,
.sidebar.sidebar-collapse
  #req-left-panel-dz-container
  .dz-image-preview
  .dz-container,
.sidebar.sidebar-collapse
  #left-panel-dz-container
  .dz-file-preview
  .dz-container,
.sidebar.sidebar-collapse
  #req-left-panel-dz-container
  .dz-file-preview
  .dz-container {
  margin-bottom: 16px;
}

.sidebar.sidebar-collapse .side-nav-footer {
  display: none;
}

#left-panel-dz-container .dz-remove.dz-remove-container,
#req-left-panel-dz-container .dz-remove.dz-remove-container,
#left-panel-dz-container-improve-existing-ticket
  .dz-remove.dz-remove-container {
  width: 34px;
  height: 36px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 5px;
  right: -16px;
  top: 16px;
}
#left-panel-dz-container .dz-remove.dz-remove-container svg path,
#req-left-panel-dz-container .dz-remove.dz-remove-container svg path,
#left-panel-dz-container-improve-existing-ticket
  .dz-remove.dz-remove-container
  svg
  path {
  fill: #ffffff;
}

#left-panel-dz-container .dz-preview.dz-image-preview a.dz-remove,
#req-left-panel-dz-container .dz-preview.dz-image-preview a.dz-remove,
#left-panel-dz-container-improve-existing-ticket
  .dz-preview.dz-image-preview
  a.dz-remove {
  z-index: 93;
}
#left-panel-dz-container .dz-default.dz-message,
#req-left-panel-dz-container .dz-default.dz-message {
  margin-top: 0;
  margin-bottom: 0;
  height: 0;
}

.dz-remove svg {
  cursor: pointer !important;
}

/* audio clip */
#record-audio-btn,
#req-record-audio-btn {
  padding: 8px;
  display: inline-block;
}
.btn-recording-container {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.btn-recording-container .timer {
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  color: #ffffff;
  -ms-flex: 0 0 25%;
  flex: 0 0 12%;
  max-width: 12%;
}
.btn-recording-container .sound-wave {
  flex: 0 0 78%;
  max-width: 78%;
  padding-left: 9px;
  padding-right: 9px;
}

.btn-recording-container .sound-wave img {
  width: 100%;
  margin-top: -3px;
}
.btn-recording-container .play-stop {
  flex: 0 0 10%;
  max-width: 10%;
}

.btn-recording-container img {
  margin-right: 0 !important;
}

#delete-recording-btn {
  background: none;
  border: none;
  display: none;
  height: 40px;
}
#delete-recording-btn.show {
  display: inline-block;
}
#delete-recording-btn:focus,
#delete-recording-btn:active,
#delete-recording-btn:hover {
  background: none;
  border: none;
  outline: none;
}
#delete-recording-btn:hover > svg path {
  fill: #d92d20;
}

#req-delete-recording-btn {
  background: none;
  border: none;
  display: none;
  height: 40px;
}
#req-delete-recording-btn.show {
  display: inline-block;
}
#req-delete-recording-btn:focus,
#req-delete-recording-btn:active,
#req-delete-recording-btn:hover {
  background: none;
  border: none;
  outline: none;
}
#req-delete-recording-btn:hover > svg path {
  fill: #d92d20;
}
.record-audio-container {
  margin-top: 16px;
}

#record-audio-btn.play-mode {
  width: 85%;
}
#req-record-audio-btn.play-mode {
  width: 85%;
}

.position-absolute {
  position: absolute !important;
}

#list-tab-container {
  padding-left: 6px;
  padding-right: 6px;
  margin-top: 16px;
}

#playground-tab,
#images-and-descriptions-tab,
#images-and-descriptions-tab-improve-existing-ticket,
#prd-upload-tab {
  height: 44px;
  background: #f9fafb;
  border: 1px solid #f2f4f7;
  border-radius: 8px;
  padding: 3px 4px;
}
#playground-tab li,
#images-and-descriptions-tab li,
#images-and-descriptions-tab-improve-existing-ticket li,
#prd-upload-tab li {
  width: 50%;
}
#playground-tab li:first-child,
#images-and-descriptions-tab li:first-child,
#images-and-descriptions-tab-improve-existing-ticket li:first-child,
#prd-upload-tab li:first-child {
  padding-right: 4px;
}
#playground-tab li:last-child,
#images-and-descriptions-tab li:last-child,
#images-and-descriptions-tab-improve-existing-ticket li:last-child,
#prd-upload-tab li:last-child {
  padding-left: 4px;
}
#playground-tab li a,
#images-and-descriptions-tab li a,
#images-and-descriptions-tab-improve-existing-ticket li a,
#prd-upload-tab li a {
  height: 36px;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  padding: 8px 12px;
  text-align: center;
  color: #667085;
}
#playground-tab li a.active,
#playground-tab li a:hover {
  background: #0f53fa;
  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1),
    0px 1px 2px rgba(16, 24, 40, 0.06);
  border-radius: 6px;
  color: #ffffff;
}
#images-and-descriptions-tab li a.active,
#images-and-descriptions-tab li a:hover,
#images-and-descriptions-tab-improve-existing-ticket li a.active,
#images-and-descriptions-tab-improve-existing-ticket li a:hover,
#prd-upload-tab li a.active,
#prd-upload-tab li a:hover {
  background: #ffffff;
  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1),
    0px 1px 2px rgba(16, 24, 40, 0.06);
  border-radius: 6px;
  color: #344054;
}

#add-figma-url-tab .frame-891,
#add-figma-url-tab div.label,
#add-figma-url-tab-improve-existing-ticket .frame-891,
#add-figma-url-tab-improve-existing-ticket div.label {
  display: inline-block;
}
#add-figma-url-tab .frame-891 img {
  margin-right: 8px;
}
#images-and-descriptions-tab,
#prd-upload-tab {
  margin-top: 4px;
}

.toggle-switch {
  display: flex;
  align-items: center;
  height: 24px; /* Set the desired height */
}

.toggle-input {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 46px; /* Updated width */
  height: 100%;
  background-color: #f2f4f7;
  border-radius: 12px; /* Half of the height for a rounded appearance */
  cursor: pointer;
  transition: background-color 0.4s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px; /* Adjusted to fit within the slider */
  width: 20px; /* Adjusted to fit within the slider */
  left: 2px;
  top: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.4s;
  fill: var(--base-white, #fff);
  filter: drop-shadow(0px 1px 2px rgba(16, 24, 40, 0.06))
    drop-shadow(0px 1px 3px rgba(16, 24, 40, 0.1));
}

.toggle-input:checked + .toggle-slider {
  background-color: #0f53fa;
}

.toggle-input:checked + .toggle-slider:before {
  transform: translateX(22px); /* Adjusted to fit within the slider */
}

.front-end-section-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Ticket Format */
#ticketFormatOptionContainer button {
  display: inline-block;
  align-items: center;
  height: 32px !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
  padding: 4px 8px;
}
#ticketFormatOptionContainer button div {
  display: inline-block;
}
#ticketFormatOptionContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  align-items: center;
  width: 100%; /* Adjust the width as needed */
  margin-top: 16px;
}

#ticketFormatOptionContainer button .icon-container {
  margin-right: 4px;
  display: inline;
}

#ticketFormatOptionContainer button:hover svg > path {
  stroke: #0f53fa;
}
#ticketFormatOptionContainer button.btn-cancel-outline.checked,
#ticketFormatOptionContainer button.btn-cancel-outline:hover {
  color: #0f53fa;
  border: 1px solid #0f53fa;
  background: none;
}

#ticketFormatOptionContainer .add-section-container {
  width: 100%;
}
#ticketFormatOptionContainer .add-section-container .form-control {
  display: flex;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--gray-300, #d0d5dd);
  background: var(--base-white, #fff);
  /* Shadow/xs */
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
#ticketFormatOptionContainer .add-section-container .form-control::placeholder {
  color: var(--gray-500, #667085);
}
#ticketFormatOptionContainer .add-section-container .button-container ul {
  padding-left: 0;
  list-style: none;
  margin-top: 10px;
}
#ticketFormatOptionContainer .add-section-container .button-container ul li {
  display: inline-block;
  margin-right: 10px; /* Add some spacing between list items */
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
}
#ticketFormatOptionContainer
  .add-section-container
  .button-container
  ul
  li:hover {
  cursor: pointer;
  text-decoration: underline;
}
#ticketFormatOptionContainer
  .add-section-container
  .button-container
  ul
  li.add {
  color: #0f53fa;
}
#ticketFormatOptionContainer
  .add-section-container
  .button-container
  ul
  li.cancel {
  color: #101828;
}

#ticketFormatOptionContainer button .new-added-format {
  margin-right: 8px;
}

.popover.custom-popover {
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03),
    0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  display: flex;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 8px;
  background: var(--base-white, #fff);
  max-width: none;
}
.popover.custom-popover .popover-header {
  color: var(--gray-900, #101828);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 171.429% */
  background: none;
  border-bottom: 0;
  padding: 0;
}

.popover.custom-popover .popover-body {
  border-radius: 6px;
  background: #f2f4f7;
  display: flex;
  padding: 16px 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.popover.custom-popover .popover-body .sample-title {
  color: var(--sub-text, #475467);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  margin-bottom: 0;
}
.popover.custom-popover .popover-body .sec-container {
  margin-top: 12px;
}
.popover.custom-popover .popover-body .sec-container .format {
  color: var(--sub-text, #475467);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 200% */
}
.popover.custom-popover .popover-body .sec-container .placeholder img {
  margin-left: -10px;
}
#custom-popover {
  border: none;
  background: none;
  padding: 0;
}
#custom-popover:hover {
  cursor: pointers;
  text-decoration: underline;
}
#custom-popover:focus,
#custom-popover:active {
  border: none;
  background: none;
  outline: none;
}

.tab-pane-title {
  color: var(--border-hover, #98a2b3);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 171.429% */
  margin-bottom: 12px;
}

.first-image-popover {
  max-width: 450px;
  border-radius: 8px;
  border: 1px solid var(--border, #eaecf0);
  background: var(--base-white, #fff);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  z-index: 1019;
}
.first-image-popover .popover-body {
  padding: 16px;
}
.first-image-popover .popover-body .gif-container {
  border-radius: 8px;
  background: #f2f4f7;
  display: flex;
  padding: 16px;
  align-items: center;
  gap: 10px;
  height: 268.59px;
}
.first-image-popover .popover-body .gif-container img {
  width: 100%;
}
.first-image-popover .popover-body .text-container {
  margin-top: 16px;
}
.first-image-popover .popover-body .text-container h5 {
  color: var(--gray-700, #344054);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 171.429% */
}
.first-image-popover .popover-body .text-container p {
  color: var(--gray-500, #667085);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 171.429% */
}
.first-image-popover .popover-body .close-button {
  display: flex;
  padding: 8px 14px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 67px;
  height: 36px;
}

.user-flow-how-it-works {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #0f53fa;
  text-decoration: underline;
  display: inline;
  cursor: pointer;
}
.user-flow-how-it-works img {
  margin-bottom: 4px;
  margin-right: 4px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-width: 620px) {
  .sidebar {
    padding-top: 15px;
  }
  .sidebar a {
    font-size: 18px;
  }

  .sidebar {
    width: 95%;
  }

  .side-nav-footer {
    width: 100%;
  }

  #playground-tab {
    height: 60px;
    background: #f9fafb;
    border: 1px solid #f2f4f7;
    border-radius: 8px;
    padding: 3px 4px;
  }

  #playground-tab li a {
    height: 50px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    padding: 4px 12px;
    text-align: center;
    color: #667085;
  }
  #playground-tickets-tab {
    line-height: 40px !important;
  }

  #requirements-tab li.nav-item .nav-link {
    padding-left: 8px;
    padding-right: 8px;
  }
  .first-image-popover {
    max-width: 100%;
    margin-left: 12px;
    margin-right: 12px;
  }

  .first-image-popover .arrow {
    display: none;
  }

  .sidebar .sidenav {
    padding: 12px;
  }
}