/* Variables */
:root {
  --blue: #6ac5ca;
  --blue-black: #008d95;
  --red: #ea1a25;
  --red-white: #fda8ac;
  --border: #dee2e6;
  --text-one: #a4a5a7;
  --bg-01: #f8f9fa;
}

/* Global Styles */
body {
  font-family: "Tajawal", Arial, Helvetica, sans-serif;
}

/* Sidebar Styles */
.side-bar {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  background-color: var(--blue);
}

.side-bar ul {
  padding: 0;
}

.side-bar .nav-link {
  color: var(--blue-black);
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}

.side-bar .nav-link:hover {
  color: white;
}

.side-bar .nav-link.active {
  background-color: var(--blue-black);
  color: white;
}

.side-bar .nav-item svg {
  font-size: 18px;
}

/* Main Content Styles */
.main-content {
  padding-right: 50px;
  text-align: right;
}

/* Header Styles */
.custom-header {
  height: 43px;
  align-items: center;
  padding-right: 1px;
}

header .form-control {
  padding: 0.1rem 0.75rem;
  font-size: 0.85rem;
}

header .header-search {
  margin-right: auto;
  margin-left: 20px;
  width: 100px;
}

header .form-control:focus {
  box-shadow: none;
}

header .form-control::placeholder {
  text-align: center;
  color: var(--text-one);
}

header .tabs-container {
  height: 100%;
  align-items: center;
  max-width: calc(100% - 150px);
  flex-wrap: nowrap;
  position: relative;
}

header .tabs-container .tab {
  height: 100%;
  width: 200px;
  display: flex;
  align-items: center;
  padding: 5px 15px;
  position: relative;
  border-left: 1px solid var(--border);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

header .tabs-container .tab .tab-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

header .tabs-container .tab .tab-title > span {
  margin: -3px 0px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

header .tabs-container .tab.active {
  height: calc(100% + 1px);
  background-color: var(--bg-01);
}

header .tabs-container .add,
header .tabs-container .more-button {
  width: 75px;
  height: 100%;
  border: none;
  transform: translateX(1px);
  background-color: white;
  cursor: pointer;
  font-size: 13px;
  justify-content: center;
  display: flex;
  align-items: center;
  padding: 5px 15px;
  font-size: 13px;
}

header .tabs-container .tab.more-button {
  position: relative;
}

header .tabs-container .more-dropdown {
  position: absolute;
  background-color: white;
  top: 43px;
  left: 0;
  border: 1px solid var(--border);
  padding: 15px;
  z-index: 1000;
  border-radius: 10px;
  box-shadow: 0 0 2px 2px #00000008;
  display: none;
}

header .tabs-container .more-dropdown.visible {
  display: block;
}

header .tabs-container .more-dropdown > div {
  border: none;
  padding: 10px;
  cursor: pointer;
}

header .tabs-container .more-dropdown > div:hover {
  background-color: var(--bg-01);
}

header .tabs-container .tab span.exsit {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

header .tabs-container .tab span.exsit:hover {
  background-color: var(--border);
}

.content-container {
  height: calc(100vh - 104px);
  background-color: var(--bg-01);
  padding: 0;
  position: relative;
}
.content {
  display: none;
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.content.active {
  display: flex;
}

/* Home Content Styles */
#home-content .cards-list {
  height: 100%;
  border-right: 1px solid var(--border);
}

#home-content .cards-list .filter {
  gap: 20px;
}

/* Label Styles */
p.lable {
  font-weight: bold;
  margin: 0;
}

/* Filter Styles */
#home-content .cards-list .filter > div {
  width: fit-content;
}

#home-content .cards-list .filter div.lable {
  width: fit-content;
  border: 1px solid var(--border);
  overflow: hidden;
  margin: 5px 0 0 auto;
  cursor: pointer;
  border-radius: 5px;
}

#home-content .cards-list .filter div.lable span.num {
  font-weight: bold;
}

#home-content .cards-list .filter div.lable span:not(.num) {
  color: var(--text-one);
}

#home-content .cards-list .filter div.lable > div {
  width: 90px;
  background-color: white;
  text-align: center;
  padding: 3px 0;
}

#home-content .cards-list .filter div.filter-card.active {
  background-color: #ffffcc;
}

#home-content .cards-list .filter div.lable > div:not(:nth-child(1)) {
  border-right: 1px solid var(--border);
}

#home-content .cards-list .filter div.lable > div > span {
  display: block;
}

/* Filter Reset Button */
i#filter-reset {
  width: fit-content;
  display: block;
  height: fit-content;
  align-self: end;
  color: #d4d4d4;
  cursor: default;
}

i#filter-reset.active {
  cursor: pointer;
  color: #6b6b6b;
}

/* Cards Update Styles */
.cards-update {
  padding: 10px;
  font-size: 14px;
}

/* Table Container Styles */
.table-container {
  height: calc(100vh - 260px);
  max-height: calc(100vh - 260px);
  overflow: auto;
  position: relative;
  background-color: white;
  margin-bottom: 10px;
}

.table-container .table-header {
  background-color: white;
  padding: 10px;
  height: 50px;
  position: sticky;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.table-container .table-header #filter-title {
  width: fit-content;
}

.table-container .table-header button.del {
  background-color: var(--blue);
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  display: none;
}

.table-container .table-header button.del:focus {
  border: none;
  outline: none;
}

/* Table Styles */
.table-container table thead {
  position: sticky;
  top: 49px;
  left: 0;
  z-index: 1;
  background-color: white;
}

.table-container table th {
  cursor: pointer;
  position: relative;
}

.table-container table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50px;
}

/* Sort Arrow Styles */
th[data-sort="asc"]:not(.select-all):before,
th[data-sort="desc"]:not(.select-all)::before {
  position: absolute;
  right: -10px;
  color: var(--blue-black);
}

th[data-sort="asc"]:not(.select-all):before {
  content: "▲";
}

th[data-sort="desc"]:not(.select-all)::before {
  content: "▼";
}

/* Table Row Styles */

tbody.tickets-table tr.unread td.select-cell {
  position: relative;
}

tbody.tickets-table tr.unread td {
  font-weight: bold;
  background-color: #fbfeff;
}

tbody.tickets-table tr.unread td.select-cell::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  height: 8px;
  width: 8px;
  background-color: var(--blue);
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

tbody tr.selected td,
tbody tr.selected.unread td {
  background-color: #b7dfff;
  border-color: white;
}

tbody tr:hover td,
tbody tr.unread:hover td {
  background-color: #edf7ff;
  cursor: pointer;
}

tbody td.ticket-id {
  position: relative;
  overflow: unset;
}

tbody td.ticket-id > p {
  margin: 0;
}

tbody td.ticket-id span.row-status {
  height: 15px;
  width: 15px;
  display: block;
  position: absolute;
  right: -10px;
  transform: translateY(-50%);
  top: 50%;
  border-radius: 3px;
  color: white;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  line-height: 15px;
}

.row-selector label{
  float: left;
}
.row-selector label button{
  margin-right: -5px;
  width: 50px;
  background-color: white;
  color: var(--blue-black);
  border: 1px solid var(--blue-black);
  outline: none;
  transition: background-color .3s;
  -webkit-transition: background-color .3s;
  -moz-transition: background-color .3s;
  -ms-transition: background-color .3s;
  -o-transition: background-color .3s;
}
.row-selector label button.active{
  background-color: var(--blue);
  color: white;
}
.row-selector .page-arrow {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.row-selector .page-arrow:disabled {
  opacity: 0.5;
  cursor: default;
}
.row-selector .page-info {
  margin-right: 15px;
  font-size: 14px;
}

.row-selector .current-page, .total-pages {
  font-weight: bold;
}

/* Start Tickets */
.status-bar {
  background: var(--bg-01);
  min-height: 50px;
  display: flex;
  align-items: center;
  padding: 10px;
}

.status-bar > div {
  display: flex;
  text-align: center;
  align-items: center;
  background-color: #e9ebed;
  padding: 3px 10px;
  /* border-radius: 4px; */
  border: 1px solid #d8dcde;
  color: black;
}

.status-bar > div > p {
  margin: 0;
}

span.status {
  color: white;
  font-weight: bold;
  font-size: 9px;
  margin-left: 10px;
  padding: 2px 4px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.ticket {
  position: absolute;
  background-color: white;
  top: 0;
  left: 0;
  height: calc(100vh - 103px);
  display: none;
  flex-direction: column;
  padding-right: 0;
  font-size: 13px;
  z-index: 50;
}

.ticket.active {
  display: flex;
}

.ticket > .row {
  margin-right: 0;
  height: calc(100vh - 199px);
}

.ticket .row > div {
  border: 1px solid var(--border);
  border-right: none;
  max-height: 100%;
}

.ticket .form-info {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.ticket .form-info .here-also {
  height: 100px;
  padding: 10px;
}

.ticket .form-info .main-info,
.ticket .form-info .more-info {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.ticket .form-info .form-entry {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: auto;
}

.ticket .form-info .form-entry .holder {
  align-items: center;
  justify-content: space-between;
}

.ticket .form-info .form-entry .inputs-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  position: relative;
}

.ticket .form-info .form-entry .holder > .inputs-container {
  max-width: 45%;
}

.ticket .form-info .form-entry .inputs-container .assign-to-me-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket
  .form-info
  .form-entry
  .inputs-container
  .assign-to-me-container
  p.assign-to-me {
  cursor: pointer;
  margin: 0;
}

.ticket
  .form-info
  .form-entry
  .inputs-container
  .assign-to-me-container
  p.assign-to-me:hover {
  color: var(--blue);
}

.ticket .form-info .form-entry .inputs-container select,
.ticket textarea,
.ticket .form-info .form-entry .inputs-container input {
  padding: 3px 10px;
  margin-top: -3px;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

.ticket .form-info .form-entry .inputs-container select:focus,
.ticket .form-info .form-entry .inputs-container input:focus,
.ticket textarea:focus {
  outline: none;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 2px 1px #0000000f;
}

.ticket .chat-container {
  padding: 0;
  position: relative;
}

.ticket .chat-container .chat-title {
  padding: 5px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ticket .updates {
  padding-left: 0;
}

.ticket .updates .updates-cont {
  border: none;
  width: 100%;
}

.ticket .updates .updates-cont > div{
  padding: 5px;
}

.ticket .updates .updates-header {
  border-bottom: 1px solid var(--border);
}

.ticket .updates .contact-logo {
  padding: 2px 0;
}

.ticket .updates .contact-logo span {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: bold;
  color: white;
  margin-left: 15px;
  min-width: 35px;
  min-height: 35px;
  font-size: 20px;
  background-color: #6ac5ca;
}

.ticket .updates .updates-header h5 {
  margin: 0;
  color: #4c5d6c;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}

.ticket .updates .updates-header p {
  margin: 5px 0;
}

.ticket .updates .updates-notes p {
  margin: 5px 0;
}

.ticket .updates .updates-notes textarea {
  width: 100%;
}

.update-msgs {
  padding: 10px;
  cursor: pointer;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.update-msgs > svg {
  fill: #4c5a67;
  transition: 0.1s;
  -webkit-transition: 0.1s;
  -moz-transition: 0.1s;
  -ms-transition: 0.1s;
  -o-transition: 0.1s;
}

.update-msgs:hover > svg {
  fill: #6ac5ca;
}

.ticket .chat-container .chat-title p {
  font-size: 12px;
}

.ticket .chat-container .chat-title p,
.ticket .chat-container .chat-title h6 {
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.ticket .chat-container .chat-content {
  /* max-height: 308px; */
  overflow: auto;
  border-bottom: 1px solid var(--border);
  padding: 10px;
  height: calc((100% - 55px) / 2);
  display: flex;
  flex-direction: column;
}

.ticket .chat-container .chat-content .msg-container {
  margin-bottom: 10px;
  display: flex;
}

.ticket .chat-container .chat-content .msg-container.income {
  flex-direction: row-reverse;
}

.ticket .chat-container .chat-content .msg-container .sender-logo {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: bold;
  color: white;
  margin-left: 15px;
  min-width: 35px;
  min-height: 35px;
  font-size: 20px;
}

.ticket .chat-container .chat-content .msg-container.outcome .sender-logo {
  margin-left: 15px;
}

.ticket .chat-container .chat-content .msg-container.income .sender-logo {
  margin-right: 15px;
}

.ticket .chat-container .chat-content .msg-container .msg-details {
  display: flex;
  flex-direction: column;
}

.ticket .chat-container .chat-content .msg-container.income .msg-details {
  text-align: left;
}

.ticket .chat-container .chat-content .msg-container .msg-details p.name {
  margin-bottom: 5px;
  font-weight: bold;
}

.ticket .chat-container .chat-content .msg-container .msg-details .msg-data {
  display: flex;
}

.ticket
  .chat-container
  .chat-content
  .msg-container.income
  .msg-details
  .msg-data {
  flex-direction: row-reverse;
}

.ticket
  .chat-container
  .chat-content
  .msg-container
  .msg-details
  .msg-data
  > .msg {
  padding: 5px 10px;
  width: fit-content;
  background-color: var(--bg-01);
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.ticket
  .chat-container
  .chat-content
  .msg-container
  .msg-details
  .msg-data
  > .msg
  > p {
  padding: 0;
  margin: 0;
}

.ticket
  .chat-container
  .chat-content
  .msg-container
  .msg-details
  .msg-data
  > .msg
  > img,
.ticket
  .chat-container
  .chat-content
  .msg-container
  .msg-details
  .msg-data
  > .msg
  > video {
  max-width: 100%;
}

.ticket
  .chat-container
  .chat-content
  .msg-container
  .msg-details
  .msg-data
  > p.date {
  font-size: 11px;
  color: var(--text-one);
  min-width: 110px;
}

.ticket
  .chat-container
  .chat-content
  .msg-container.outcome
  .msg-details
  .msg-data
  > p.date,
.ticket
  .chat-container
  .chat-content
  .msg-container.comment
  .msg-details
  .msg-data
  > p.date {
  margin-right: 10px;
}

.ticket
  .chat-container
  .chat-content
  .msg-container.income
  .msg-details
  .msg-data
  > p.date {
  margin-left: 10px;
}

.ticket .chat-container .chat-content .msg-container.income .sender-logo {
  background-color: #e34f32;
}

.ticket .chat-container .chat-content .msg-container.outcome .sender-logo {
  background-color: #01579b;
}

.ticket .chat-container .chat-content .msg-container.comment .sender-logo {
  background-color: #cddc39;
}

.ticket
  .chat-container
  .chat-content
  .msg-container.comment
  .msg-details
  .msg-data
  > .msg {
  background-color: #fff7ed;
}

/* scroll to top */
#scroll-to-top {
  display: none;
  background-color: #fff7ed;
  padding: 3px 10px;
  border: none;
  position: absolute;
  opacity: 0.8;
  top: 60px;
  left: 50%;
  z-index: 1000;
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

#scroll-to-top:focus {
  outline: none;
}

.arrow {
  display: inline-block;
  animation: move-up 0.5s infinite;
  -webkit-animation: move-up 0.5s infinite;
}

/* Animation keyframes */
@keyframes move-up {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    -o-transform: translateY(-1px);
  }
  50% {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
  }
  75% {
    transform: translateY(1px);
    -webkit-transform: translateY(1px);
    -moz-transform: translateY(1px);
    -ms-transform: translateY(1px);
    -o-transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

#scroll-to-top:hover {
  opacity: 1;
}

.ticket .chat-container .resizer {
  padding: 5px 0;
  cursor: row-resize;
  width: 100%;
}

.chat-input .ql-editor.ql-blank {
  height: 64px;
}

.chat-input .ql-container.ql-snow {
  height: auto;
}

.ticket .chat-container .resizer:hover {
  border-top: 3px solid #1f73b7;
}

.ticket .chat-container #show-input {
  width: 100%;
  padding: 10px;
  display: none;
  text-align: center;
  background-color: #47a3a8;
  color: white;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  bottom: 0;
}

.ticket .chat-container #show-input:hover {
  background-color: #00a0a8;
}

.ticket .chat-container .chat-input {
  display: flex;
  height: calc((100% - 55px) / 2);
  min-height: 110px;
  padding: 10px;
  flex-direction: column;
  padding-top: 0;
}

.ticket .chat-container select {
  width: fit-content;
  border: none;
  padding: 5px 0;
  border-radius: 5px;
  font-weight: bold;
  margin-bottom: 5px;
  border: 1px solid #cccccc;
  text-align: center;
  cursor: pointer;
}

.ticket .chat-container select:focus {
  outline: none;
}

.ticket .chat-container .chat-input {
  display: flex;
  height: calc((100% - 90px) / 2);
  min-height: 60px;
  padding: 10px;
  padding-top: 0;
  position: relative;
}

.ticket .chat-container .chat-input span.send-msg {
  position: absolute;
  bottom: 10px;
  right: 20px;
  cursor: pointer;
  background-color: #47a3a8;
  color: white;
  padding: 3px 10px;
  border-radius: 5px;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}

.ticket .chat-container .chat-input span.send-msg:hover {
  background-color: #00a0a8;
  box-shadow: 0px 0px 2px 1px #0000000f;
}

.ticket .chat-container .chat-input input {
  width: 100%;
  border: none;
}

.ticket .chat-container .chat-input input:focus {
  outline: none;
}

/* footer */
.ticket-footer {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.ticket-footer .send-container {
  margin-right: auto;
  display: flex;
  align-items: center;
  position: relative;
}

.ticket-footer .send-container .send-new,
.ticket-footer .send-container .send-pending,
.ticket-footer .send-container .send-solved {
  display: none;
}

.ticket-footer .send-container .send,
.ticket-footer .send-container .send-type {
  background-color: #32393c;
  color: white;
  padding: 8px 15px;
  cursor: pointer;
  z-index: 1;
}

.ticket-footer .send-container .send:hover,
.ticket-footer .send-container .send-type:hover {
  background-color: #515d62;
}

.ticket-footer .send-container .send {
  margin-left: 2px;
  border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  -ms-border-radius: 0 4px 4px 0;
  -o-border-radius: 0 4px 4px 0;
}

.ticket-footer .send-container .send span {
  font-weight: bold;
}

.ticket-footer .send-container .send-type {
  border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  -ms-border-radius: 4px 0 0 4px;
  -o-border-radius: 4px 0 0 4px;
}

.ticket-footer .send-container .send-type i {
  display: block;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}

.ticket-footer .send-container .send-type i.active {
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}

.ticket-footer .send-container .sent-type-list {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--border);
  width: 100%;
  transition: 0.3s;
  display: flex;
  border-radius: 3px;
  flex-direction: column;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  transform: translateY(-80%);
  -webkit-transform: translateY(-80%);
  -moz-transform: translateY(-80%);
  -ms-transform: translateY(-80%);
  -o-transform: translateY(-80%);
  background-color: white;
  display: none;
  opacity: 0;
}

.ticket-footer .send-container .sent-type-list.active {
  transform: translateY(-105%);
  -webkit-transform: translateY(-105%);
  -moz-transform: translateY(-105%);
  -ms-transform: translateY(-105%);
  -o-transform: translateY(-105%);
  opacity: 1;
}

.ticket-footer .send-container .sent-type-list > div {
  padding: 10px 35px 10px 10px;
  cursor: pointer;
  position: relative;
}

.ticket-footer .send-container .sent-type-list > div.new {
  display: none;
}

.ticket-footer .send-container .sent-type-list > div:hover {
  background-color: #deeeff;
}

.ticket-footer .send-container .sent-type-list > div::before {
  content: "";
  position: absolute;
  right: 15px;
  height: 12px;
  width: 12px;
  border-radius: 3px;
  transform: translateX(-50%);
  -webkit-transform: translateY(50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.ticket-footer .send-container .sent-type-list > div.new::before {
  background-color: #ffb057;
}
.ticket-footer .send-container .sent-type-list > div.open::before {
  background-color: #c72a1c;
}
.ticket-footer .send-container .sent-type-list > div.pending::before {
  background-color: #3091ec;
}
.ticket-footer .send-container .sent-type-list > div.solved::before {
  background-color: #87929d;
}

.ticket-footer .send-container .sent-type-list > div span {
  font-weight: bold;
}
/* End Tickets */

/* start index conten */
#index-content {
  background-color: white;
}

#index-content .views {
  background-color: white;
  padding: 0;
  border-left: 1px solid var(--border);
}

#index-content .views .views-header {
  height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

#index-content .table-heading {
  height: 112px;
  padding: 10px;
}

#index-content .filter-card {
  cursor: pointer;
  padding: 10px;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}

#index-content .filter-card:hover {
  background-color: #edf7ff;
  padding-right: 17px;
  color: black;
}

#index-content .filter-card.active {
  background-color: #b7dfff;
  color: black;
}

#index-content .filter-card.active:hover {
  background-color: #b7dfff;
  padding-right: 10px;
}

#index-content .filter-card > span {
  font-weight: bold;
}

/* end index conten */

.ticket .inputs-container .dropdown {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  z-index: 100;
  list-style-type: none;
  padding: 0;
  margin: 0;
  top: 53px;
  left: 0;
  border-radius: 3px;
  box-shadow: 0px 0px 2px 1px #0000000f;
}

.ticket .inputs-container .dropdown li {
  padding: 5px 8px;
  cursor: pointer;
  border-bottom: 1px solid #ebebeb;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}

.ticket .inputs-container .dropdown li:hover {
  background-color: #dcf4ff;
  color: black;
  padding-left: 13px;
}

/* start loading */
.lds-roller,
.lds-roller div,
.lds-roller div:after {
  box-sizing: border-box;
}
.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7.2px;
  height: 7.2px;
  border-radius: 50%;
  background: var(--blue);
  margin: -3.6px 0 0 -3.6px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 62.62742px;
  left: 62.62742px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 67.71281px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 70.90963px;
  left: 48.28221px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 70.90963px;
  left: 31.71779px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 67.71281px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 62.62742px;
  left: 17.37258px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12.28719px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* end loading */