@font-face {
  font-family: "IM Fell English SC";
  font-style: normal;
  font-weight: normal;
  src: local("IM FELL English SC"), local("IM_FELL_English_SC"),
    url("../fonts/IM_Fell_English_SC.eot?#iefix") format("embedded-opentype"),
    url("../fonts/IM_Fell_English_SC.woff") format("woff"),
    url("../fonts/IM_Fell_English_SC.svg#IMFellEnglishSC") format("svg"),
    url("../fonts/IM_Fell_English_SC.ttf") format("truetype");
}

.navbar-brand {
  font-family: "IM Fell English SC", serif;
}

input[type="checkbox"] {
  margin: 0;
  margin-top: 1px \9;
  line-height: normal;
}

#appearance-main-viewport {
  margin-top: 60px;
}

/* User menu */
.link-text-span {
  padding-left: 10px;
  padding-right: 20px;
}

/* Make facet list group horizontal on small or smaller */
@media (max-width: 767px) {
  ul.list-group:after {
    clear: both;
    content: "";
    display: block;
  }

  .list-group-item {
    float: left;
  }
}

/* Nullify the 5px padding to the right */
.appearance-list-column-sort-icon {
  margin-right: -5px;
}

/* Make column text behave the same way as column links. */
.appearance-list-column-label {
  padding: 0px;
}

.appearance-list-columns-help-text {
  margin-left: 3px;
}

.fashadow svg {
  color: rgba(0, 0, 0, 0.3);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 20;
  transform: translate(3px, 5px) !important;
}
.table-responsive .dropdown-menu {
  float: none;
  bottom: auto;
  top: auto;
  z-index: 9999;
  position: fixed;
  overflow: auto;
  max-height:40vh !important;
  left: unset;
  margin-right: -30px;
}
.table-responsive td:last-child .dropdown-menu {
    margin-right: -100px;
}

@media (min-width: 481px) and (max-width: 766px) {
  .table-responsive .dropdown-menu {
    float: none;
    bottom: auto;
    top: auto;
    z-index: 9999;
    left: 3%;
    right: auto;
    position: fixed;
    overflow: auto;
    max-height: 40vh!important;
  }
  .table-responsive td:nth-last-child(2) .dropdown-menu {
    margin-right: -250px;
  }
  .table-responsive td:last-child .dropdown-menu {
    left: 4%;
}
}
/* Avoid sidebar ul-li displaying disc decoration on small screens. */
@media (max-width: 767px) {
  .list-group {
    list-style-type: none;
  }
  .table-responsive .dropdown-menu {
    float: none;
    bottom: auto;
    top: auto;
    z-index: 9999;
    left: 90px;
    right: auto;
    position: fixed;
    overflow: auto;
    max-height: 40vh!important;
  }
}


hr {
  margin-top: 5px;
  margin-bottom: 11px;
}

.btn-block {
  border-top: 2px solid rgba(255, 255, 255, 0.7);
  border-left: 2px solid rgba(255, 255, 255, 0.7);
  border-right: 2px solid rgba(0, 0, 0, 0.7);
  border-bottom: 2px solid rgba(0, 0, 0, 0.7);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  margin-bottom: 15px;
  min-height: 120px;
  padding-bottom: 1px;
  padding-top: 20px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
  white-space: normal;
}

.radio ul li {
  list-style-type: none;
}

a i {
  padding-right: 3px;
}

/* Notifications */
#toast-container>div {
  opacity: 1;
}

#form {
  width: 100%;
  display: flex ;
  align-items: center;
  position: relative;
}


.form span{
  position: absolute;
  top: 6px;
  padding: 5px;
}


.form .fa-search{
  position: absolute;
  top: 10px;
  color: #9ca3af;
  cursor: pointer;
  background: none;
  outline: none;
  border-right: 2px solid #d1d5db !important;
  border-radius: 0 !important;
  /* padding: 5px; */
  /* line-height: 10px; */
}

.form-input{
  height: 55px;
}



#list-btn{
  position: absolute;
  left: 5px;
  cursor: pointer;
  font-size: 0px;
  border-right: 2px solid #d1d5db;
  top: 11px;
  background:none;
  height: 25px;
  padding: 2px 10px;
}
#list-btn::before {
  content: "جستجو پیشرفته"; 
  position: absolute;
  top: 50%;
  left: -235%; 
  transform: translateY(-50%);
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  z-index: 1;
  font-size: 10PX;
}

#list-btn:hover::before {
  opacity: 1;
  visibility: visible;
}
.clear-btn {
  position: absolute;
  margin-top:3px;
  cursor: pointer;
  display: none;
  left: 43px;
}

.clear-btn:hover{
  margin-top:4px;
  font-size: 13.2px;
}
#searchInput{
  width: 100%;
  padding-right: 44px;
  padding-left: 66px;
}

.inputs{
  width: 100%;
}

.search-div{
  margin-right: 3px ;
}

.form-control{
  border-radius: 8px;
  font-family: inherit;
}

@media (min-width: 768px) {
  .navbar-form {
      width: 650px;
      padding-top: 0;
      padding-bottom: 0;
      margin-right: 0;
      margin-left: 0;
      border: 0;
      box-shadow: none;
  }
}

@media (min-width: 768px) {
  .navbar-form .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
      width: 100%;
  }
}

/* Collapse navigation on medium or smaller */
@media (max-width: 1030px) {
  .navbar-header {
    float: none;
  }
  .table-responsive .dropdown-menu {
    float: none;
    bottom: auto;
    top: auto;
    z-index: 9999;
    left: auto ;
    right: auto;
    position: fixed;
    overflow: auto;
    max-height:40vh !important;
  }

  
  /* .navbar-left,
  .navbar-right {
    float: none !important;
  } */
  .navbar-toggle {
    display: block;
    background-color: #fff !important;
    border: #fff;
    margin-bottom: 0;
  }

  .navbar-toggle .icon-bar {
    background-color: #000000 !important;
  }

  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .navbar-fixed-top {
    border-width: 0 0 1px;
    top: 0;
  }

  .navbar-collapse.collapse {
    display: none !important;
  }

  .navbar-nav {
    /* float: none !important; */
  }

  /* .navbar-nav > li {
    float: none;
  } */
  .navbar-nav>li>a {
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .collapse.in {
    display: block !important;
  }

  .container-fluid {
    /* max-width: min-content; */
  }
/* 
  .navbar-header {
    display: flex;
  } */

  .navbar .navbar-collapse {
    display: block !important;
    height: 60px !important;
  }

  .navbar-collapse .navbar-left {
    display: none !important;
  }

  .navbar-collapse.in #search-navbar-form {
    display: block !important;
    float: right !important;
    grid-template-columns: 50% 50%;
    gap: 10px;
    position: absolute;
    top: 60px;
    right: 0;
    width: 100%;
    background: white;
    margin: 0;
    padding: 20px;
  }

  .nav.navbar-tools {
    display: flex !important;
    float: left !important;
    position: relative;
    width: 100px;
    margin-top: 10px;
    flex-direction: row-reverse;
  }
}

@media only screen and (max-width: 481px) {
  jdp-container {
    width: 10% !important;
    right: -130px !important;
  }
  .table-responsive .dropdown-menu {
  overflow-x: auto;
  /* float: none; */
  bottom: auto;
  top: auto;
  z-index:1000;
  left: 90px;
  right: auto;
  position: fixed;
  overflow: auto;
  max-height:37.999vh !important;
  }
  .table-responsive td:last-child .dropdown-menu {
    left: 30px;
}
}

/* List item view */

.panel-item {
  box-shadow: 2px 2px 18px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.panel-item>.panel-heading {
  padding: 1px 15px;
  border: 0;
}

.panel-item>.panel-body {
  padding: 10px;
  word-wrap: break-word;
}

.list-extra-column-label {
  font-weight: bold;
}

.source-column-label {
  font-weight: bold;
}

.panel-highlighted {
  box-shadow: 0px 0px 15px -2px #000000;
}

.panel-highlighted:hover {
  box-shadow: 0px 0px 20px #000000;
}

.panel-item:not(.panel-highlighted):hover {
  box-shadow: 0px 0px 8px #000000;
}

/* Content */
@media (min-width: 768px) {
  .container-fluid {
    width: 95%;
  }

  .content-login {
    width: 100%;
    left: 105.3%;
  }

  .notification {
    top: -58%;
    right: 9%;
  } 

  .login-image {
    display: block !important;
  }
}

@media (max-width: 767.5px) {
  .cabinet-row {
    /* padding: 15px; */
  }

  .image-center {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .login-content {
    background-color: #f5f5f5f0;
    border-radius: 10px;
    box-shadow: 1px 1px 10px #7c7c7cf0;
  }

  .notification-group-item {
    border-radius: 10px;
  }

  .login-image {
    display: grid !important;
    overflow: auto;
    grid-template-rows: 535px 70px;
    grid-gap: 60px;
    justify-content: normal !important;
    overflow-x: hidden;
  } 

  .content-login {
    width: 130%;
    left: 52px;
  }

  .login-content {
    width: 66.66666667%;
    left: 8%;
  }

  .panel-notification {
    background-color: #f5f5f5f0 !important;
    border-radius: 10px !important;
    box-shadow: 1px 1px 10px #7c7c7cf0 !important;
  }

  .notification {
    width: 89%;
    left: -7%;
  }

  .list-group-item-heading {
    margin-right: 0 !important;
  }
}

.spinner-container {
  border: 1px solid lightgray;
  margin: auto;
  width: 100%;
}

.spinner-container>.spinner-icon {
  margin-left: 4px;
  margin-top: 3px;
}

#ajax-spinner {
  -webkit-animation: 0.5s spin linear infinite;
  animation: 0.5s spin linear infinite;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #092540;
  border-top: 2px solid #87d77b;
  border-bottom: 2px solid #87d77b;
  height: 25px;
  left: 10px;
  position: fixed;
  top: 16px;
  width: 25px;
  z-index: 9999;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Imitate the default look of Django's debug template */
#django-server-error {
  background-color: rgb(255, 255, 204);
  color: black;
}

#django-server-error code {
  overflow-wrap: normal;
  white-space: normal;
  word-break: normal;
}

#django-server-error h1 {
  font-size: 2em;
}

#django-server-error h2 {
  font-size: 1.5em;
}

#django-server-error h3 {
  font-size: 1.17em;
  margin: 1em 0 0.5em 0;
}

#django-server-error pre {
  background-color: inherit;
  border: 0px;
  color: inherit;
}

#django-server-error pre.exception_value {
  color: #575757;
  font-family: sans-serif;
  font-size: 1.5em;
  margin: 10px 0 10px 0;
}

/*
   * Main content
   */

/* Remove scroll bar caused by bootstraps -15px on .row margins */
.zero-margin {
  margin-left: 0;
}

/* Remove scroll bar caused by bootstraps -15px on .row margins */
/*
   * Used by the generic_form template to avoid displaying a second scrollbar
   * for the viewport when it has a carousel.
   */
.zero-margin .row-avoid-second-scrollbar {
  margin-bottom: -15px;
}

@media (min-width: 768px) {
  #appearance-main-viewport {
    /* margin-left: 20px; */
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media (max-width: 767.5px) {
  #appearance-main-viewport {
    margin-left: 0px;
  }

  .cabinet-row {
    /* padding: 40px; */
  }

  .login-content {
    margin-right: 54px;
  }
}


/* Side bar */
#menu-actions {
  z-index: 1020;
}

#viewport {
  height: 90%;
  width: 100%;
}

.has-sidebar {
  /* padding-right: 0px; */
}

@media (min-width: 769px) {
  #sidebar {
    bottom: 0;
    display: block;
    overflow-x: visible;
    overflow-y: auto;
    padding-top: 10px;
    position: fixed;
    right: 0;
    top: 100px;
    width: 160px;
    z-index: 900;
  }
}

.btn-invisible {
  background-color: transparent;
  border: 2px solid transparent;
  color: inherit;
}

/* Bootstrap button outline override. */
.btn-outline {
  background-color: transparent;
  color: inherit;
}

.btn-primary.btn-outline {
  color: #428bca;
}

.btn-success.btn-outline {
  color: #5cb85c;
}

.btn-info.btn-outline {
  color: #5bc0de;
}

.btn-warning.btn-outline {
  color: #f0ad4e;
}

.btn-danger.btn-outline {
  color: #d9534f;
}

.btn-default.btn-outline:hover,
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
  /* color: #fff; */
}

.btn-list>.btn {
  margin-bottom: 2px;
}

/* .btn-list > .btn:not(:last-child) {
      margin-right: 4px;
  } */

/* change it for signatures/documents/files/<file_id>/signatures/  */
.btn-list>.btn {
  margin-right: 4px;
}

.btn-xs {
  padding: 1px 5px 0px;
}

/*
   * Top navigation
   * Hide default border to remove 1px line.
   */
.navbar-fixed-top {
  border: 0;
}

/* menu_main */
/* Hide for mobile, show later */

.js-custom-main-menu.w-menu-210 {
  width: 235px !important;
}

#menu-main {
  display: block;
  background-color: var(--primary-color);
  right: -210px;
  position: fixed;
  top: 60px;
  width: 235px;
  z-index: 1000;
  transition: all 0.5s;
  padding: 0;
  height: calc(100% - 60px);
  /* text-align: right; */
  direction: rtl;
  box-shadow: 0 0 15px -10px rgba(0, 0, 0, 0.4);
}


#main-button-close {
  border-radius: 0;
  border-top: 2px solid #1c2733;
  border-bottom: 2px solid #1c2733;
  bottom: 0;
  display: block;
  height: 40px;
  position: relative;
  text-align: center;
  width: 209px;
}

#main-menu-button-open {
  background-color: transparent;
  border: 0;
  display: block;
  margin: 0 10px 0 -15px;
  padding: 6px 20px 0px 10px;
}

.menu-user-name {
  color: white;
}

.overlay-gray {
  background-color: rgba(0, 0, 0, 0.25);
  display: block;
  height: 100%;
  position: fixed;
  transition: background-color 0.3s;
  width: 100%;
  z-index: 99;
}

@media (min-width: 768px) {
  #menu-main {
    display: block;
    right: 0;
  }

  .menu-user-name {
    color: inherit;
  }

  #main-menu-button-open {
    display: none;
  }

  #menu-main-button-close {
    display: none;
  }

  .navbar-brand {
    text-align: center;
    width: 210px;
  }
} 

.menu-main-opened {
  display: block !important;
  right: 0 !important;
}

#appearance-main-viewport .page-header {
  margin-top: 0;
}

.navbar-brand {
  outline: none;
}

.container-fluid {
  margin-left: 0px;
  margin-right: 0px;
  width: 100%;
}

#accordion-sidebar a {
  padding: 10px;
}

#accordion-sidebar a[aria-expanded="true"] {
  background: #1a242f;
}

#accordion-sidebar .panel {
  border: 0px;
}

#accordion-sidebar a {
  outline: none;
}

#accordion-sidebar>.panel>div>div>ul>li>a,
#accordion-sidebar>.panel>div>h4>a {
  display: block;
  outline: none;
  position: relative;
  text-decoration: none;
  direction: rtl;
}

#accordion-sidebar .panel-heading {
  background-color: var(--primary-color);
  color: var(--primary-text-color);
  padding: 0px;
  min-width: max-content;
}

#accordion-sidebar .panel-heading a[aria-expanded="true"] {
  color: white;
}

#accordion-sidebar .panel-heading:hover {
  transition: 0.1s ease;
}

#accordion-sidebar>.panel>div>.panel-body>ul>li.active {
  background: #1a242f;
}

#accordion-sidebar>.panel>div>.panel-body>ul>li:hover {
  background-color: #517394;
  /* transition: .1s ease; */
}

#accordion-sidebar .panel-title {
  font-size: 15px;
}

#accordion-sidebar .panel-body {
  font-size: 13px;
  border: 0;
  background-color: var(--primary-color);
  padding: 5px 10px 5px 0;
  border-radius: 10px;
  overflow: auto;
}

body.menu-closed #menu-main:not(.menu-main-opened) #accordion-sidebar .panel-body {
  max-height: 330px !important;
}

#accordion-sidebar .collapsed .accordion-indicator {
  transform: rotate(0deg);
  transition: 0.5s all;
}

.accordion-indicator {
  transform: rotate(-90deg);
  transition: 0.5s all;
}

#accordion-sidebar ul.list-unstyled {
  margin-bottom: 0px;
  padding-right: 10px;
}

body.menu-closed #accordion-sidebar ul.list-unstyled {
  padding-right: 0;
  max-height: 300px;
  overflow: auto;
  padding-left: 5px;
}

#accordion-sidebar .panel-body a {
  color: var(--primary-text-color);
  padding: 5px 15px;
  text-decoration: none;
  margin: 5px 0 0 0;
}

.navbar-fixed-top {
  box-shadow: 0 0 15px -10px rgba(0, 0, 0, 0.4);
}

.toolbar {
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 15px;
  padding-top: 8px;
  background: #fafafa !important;
}

#body-plain {
  padding-top: 0px;
}

/* appearance - JavaScript server error */
#banner-server-error {
  margin-top: 10px;
}

/* List toolbar affix */
#list-toolbar.affix {
  top: 60px;
  /* OuterHeight of navbar */
  z-index: 90;
}

.dropdown-menu>li>a {
  color: #585e5e;
}

.dropdown-header {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  text-align: center;
  white-space: break-spaces;
}

/* Fieldsets */
.appearance-fieldset-detail-user{
  border: 1px solid rgb(44 62 80 / 38%);
  border-radius: 4px;
  margin-bottom: 15px;
  padding-bottom: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0px;
}
.appearance-fieldset {
  border: 1px solid rgb(44 62 80 / 38%);
  border-radius: 4px;
  margin-bottom: 5px;
  padding-bottom: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;  
}

.appearance-legend {
  background-color: #00ad8b;
  border-radius: 4px;
  border-style: none;
  border-width: 0;
  color: white;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 0;
  padding: 0 10px 3px;
  width: auto;
}

/*
  Input search clearable
  */

.appearance-input-search-clearable {
  position: relative;
}

.appearance-input-search-clear {
  cursor: pointer;
  font-size: 16px;
  position: absolute;
  right: 5px;
  top: -1px !important;
}

/*
   Table appearance header fine tuning
   */

.appearance-table-condensed thead tr th {
  padding-bottom: 0px;
  padding-top: 7px;
}

.appearance-table-condensed thead .appearance-table-thead-tr-spacer th {
  padding-bottom: 10px;
}

/*
   Table header end ruler
   */

.appearance-table-condensed thead .appearance-table-thead-tr-ruler {
  border-bottom: 1px solid white;
  border-top: 1px solid lightgrey;
}

.appearance-table-condensed thead .appearance-table-thead-tr-ruler th {
  padding-bottom: 0px;
  padding-top: 0px;
}

/*
   Table body end ruler
   */

.appearance-table-condensed tbody .appearance-table-tbody-tr-ruler {
  /* border-bottom: 1px solid #f9f9f9; */
  /* border-top: 1px solid lightgrey; */
}

.appearance-table-condensed tbody .appearance-table-tbody-tr-ruler td {
  padding-bottom: 0px;
  padding-top: 0px;
}

/*
   * Icons
   */

.appearance-icon {
  padding-right: 5px;
  width: auto;
}

.appearance-icon-padding-none {
  padding-right: 0px;
}

/*
   * Collapse object menu
   */

.appearance-dropdown-menu-slim {
  min-width: 0px;
}

.caret {
  pointer-events: none;
}

.panel-item>.panel-body {
  padding: 0 15px 25px 15px;
}

.panel-footer hr {
  border-top: 1px solid rgb(121, 141, 143);
  margin-bottom: 8px;
  margin-top: 8px;
}


.w-menu-45 {
  width: 45px !important;
}

.w-menu-210 {
  width: 210px !important;
}

.jstree-node.jstree-open .jstree-themeicon-custom {
  background-image: url(/static/appearance/images/folder.svg) !important;
}

.jstree-node.jstree-closed .jstree-themeicon-custom {
  background-image: url(/static/appearance/images/folder-close.svg) !important;
}

.jstree-node.jstree-leaf .jstree-themeicon-custom {
  background-image: url(/static/appearance/images/folder-close.svg) !important;
}

.jstree-node.jstree-leaf .jstree-clicked .jstree-themeicon-custom {
  background-image: url(/static/appearance/images/folder.svg) !important;
}

body:not(.menu-closed) #menu-main .panel:not(.menu-with-sub) .collapse,
body:not(.menu-closed) .sub-menu-heading,
body.menu-closed .js-custom-menu-text .collapse {
  display: none !important;
}

.menu-title {
  margin-right: 7px;
}

.jdp-container-input {
  border: none;
  width: 0;
  margin-top: 41px;
  height: 0;
  margin-left: -20px;
}

.jdp-container-input:focus{
border: none;
box-shadow:none;
}




.icon-multi_tab:before {
  font-size: 17px;
}



.spinner {
  border-radius: 50%;
  width: 60px; 
  height: 60px; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  z-index: 999;
  position: sticky; 
}



.container-header-preview {
  position: sticky;
  top: 0; 
  background-color: #d0cece;; 
  z-index: 10; 
  height: 30px;
}
.image-container{
padding: 100px;
}
#hide_page{
  background: none;
  position:relative;
  font-size: 2.5rem;
  padding: 6px 8px 0px;
}
#hide_page:hover{
  background-color: #c6c6c68f;
  border-radius: 31px;
}
:root {
  --container-width: 40%; 
}

.container {
  opacity: 0; 
  background-color: var(--primary-color);
  position: fixed;
  top: 60px;
  transform: translateX(-100%);
  left: 0; 
  width: var(--container-width);
  z-index: 1000;
  transition: all 0.5s;
  padding: 0;
  height: calc(100% - 60px);
  direction: ltr; 
  box-shadow: 0 0 15px -10px rgba(0, 0, 0, 0.4);
}

.base-body.menu-visible {
  width: calc(100% - var(--container-width) - 280px) !important;
}
.iframe-mode .base-body.menu-visible {
  width: calc(100% - var(--container-width) - 10px) !important;
}

#cancel-bt{
display: none;
}

body.menu-closed .base-body.menu-visible {
  width: calc(100% - var(--container-width) - 90px) !important;
}
.container.visible {
  opacity: 1;
  transform: translateX(0);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 16px 0px 0 10px;
  border-radius: 5px;
  box-sizing: border-box;
}

.left-panel {
  width: 300px; 
  background-color: white; 
  border-right: 1px solid #ccc; 
  padding: 20px; 
}
.main-content {
  flex: 1; 
  background-color: #f8f8f8; 
  padding: 20px; 
}

.comment-edit-box {
  border-radius:10px;
  position: fixed;
  /* background-color: #fff; */
  padding: 10px;
  z-index: 10;
  width: 300px;
  margin-right:-100px;
  height: 0;
  margin-top: -20px;
}

.comment-text {
  cursor: pointer;
  display: inline-block; 
  max-width: 200px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  cursor: pointer; 
}

.comment-edit-box textarea{
  box-shadow: var(--ds-shadow-overflow, 0 3px 6px rgba(111, 111, 111, 0.2));  
}
.save-options{
  /* box-shadow: var(--ds-shadow-overflow, 0 3px 6px rgba(111, 111, 111, 0.2)); */
  border:none;
  margin: 4px;
  line-height: 0;
  border-radius: 5px;
  padding: 5px;
}
.save-options.save-comment{
  background: #02b793;
}
.save-options.save-comment:hover{
  background: #00ad8b;
} 
.b-save-cancel{
  float: inline-end;
  background-color: var(--ds-surface, #fff);
  border: 1px solid var(--ds-border, #dfe1e5);
  box-shadow: var(--ds-shadow-overflow, 0 3px 6px rgba(111, 111, 111, 0.2));
  border-radius: 6px;
  padding: 2px;
  display: flex;
  flex-direction: row-reverse;
}

.comment-text:focus {
  outline: none;
}