/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
:root {
  --bs-font-sans-serif:"Manrope","Fira Sans" ;
}

.main-menu .navbar-header .navbar-brand .brand-logo img {
  max-width: 100px;
}

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

body::-webkit-scrollbar {
  width: 7px;
  background-color: #F5F5F5;
}

body::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #008463;
}

body::-webkit-scrollbar-thumb:hover {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #008463;
}

.account-tokens {
  font-weight: bold;
  font-size: 16px;
  padding: 8px 32px;
  border-radius: 4px;
  color: #FFF;
  background-color: #008463;
}

.green-background-class {
  background: #CEF9EE;
}

.order-number {
  position: absolute;
  top: 4px;
  left: 8px;
  color: #3BD4AE;
  font-weight: bold;
}

#add-task-button {
  margin-top: 8px;
}

#add-task-button svg {
  margin-right: 8px;
}

.task-div {
  padding: 2px 2px 2px 32px;
}

.task-div input {
  border: 1px solid #ECECEC;
  padding: 8px;
  resize: both;
  /* This property makes the element resizable */
  overflow: auto;
}

.modal-header {
  flex-direction: column;
}

.task-div input:focus {
  outline: none;
}

.task-div .timer-span {
  background: #DFDFDF;
  border: 2px solid #FFF;
}

#tasksListModal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0px;
}

.task-modal {
  display: flex;
  list-style-type: none;
  border: 1px solid #F5F5F5;
  border-radius: 4px;
  padding: 8px 8px 8px 24px;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.task-modal .ticket-num {
  color: #008463;
  position: absolute;
  left: 4px;
  top: 4px;
  font-weight: bold;
}

.task-modal.completed {
  background: #ECECEC;
}

.comment-content p {
  margin-bottom: 0 !important;
}

.task-modal input {
  border-radius: 4px;
  accent-color: #008463;
  border: 2px solid #000;
  width: 16px;
  height: 16px;
}

#addCommentModal {
  font-size: 14px;
  width: 240px;
  margin-top: 8px;
}

#modalEditor {
  height: 200px;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.header-inner #ticket-client {
  background: #DBDBDB;
  color: #333;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: bold;
}

.header-inner #ticket-client:hover {
  background: #C2C2C2;
}

#ticket-status {
  font-weight: bold;
  width: 100%;
  padding: 8px 24px;
  margin-bottom: 16px;
  border-radius: 4px;
  color: #333;
}

#ticket-status.open {
  background: #6ED79F;
}

#ticket-status.closed {
  background: #C2C2C2;
}

#ticket-status.urgent {
  background: #FFD6D6;
}

#commentsListModal {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.comment-modal {
  display: flex;
  padding: 0px 8px;
  border-radius: 4px;
}

.comment-modal .comment-user {
  width: 25%;
  display: flex;
  flex-direction: column;
}

.comment-modal .comment-user .user-name {
  font-weight: bold;
  font-size: 15px;
}

.comment-modal .comment-user .comment-time {
  font-size: 12px;
}

.comment-content {
  width: 75%;
  padding: 8px;
  border: 1px solid #ECECEC;
  border-radius: 4px;
}

#view-ticket h5 {
  background: #D9D9D9;
  padding: 8px;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 16px;
}

.new-comment-div {
  width: 75%;
  padding: 8px;
}

#view-ticket .modal-body {
  align-items: flex-end;
}

#modalEditor * {
  border-color: #F5F5F5;
}

.order-number {
  position: absolute;
  top: 4px;
  left: 8px;
  color: #3BD4AE;
  font-weight: bold;
}

.comments .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.comments .top h2 {
  margin-bottom: 0;
}

#add-comment {
  width: 80px;
}

.ticket-title {
  padding: 16px 24px;
}

.list-group-item {
  padding-left: 24px;
}

.list-group-item.completed {
  background-image: linear-gradient(45deg, #ededed 25%, #e8e8e8 25%, #e8e8e8 50%, #ededed 50%, #ededed 75%, #e8e8e8 75%, #e8e8e8 100%);
  background-size: 11.31px 11.31px;
}

#confirm-ticket, #packages-button {
  margin-bottom: 8px;
}

.comments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.single-comment {
  display: flex;
  align-items: center;
}

.single-comment .user-info .name {
  font-size: 18px;
}

.single-comment .user-info .image {
  padding: 24px;
  border-radius: 50%;
  background: rgba(34, 41, 47, 0.125);
  margin-right: 16px;
}

.single-comment .user-info .user-details {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ticket-container {
  display: flex;
  padding-bottom: 16px;
}

.ticket-container .left-col {
  width: 60%;
  padding: 8px 0px;
  display: flex;
  flex-direction: column;
}

.ticket-container .right-col {
  width: 40%;
}

.ticket-information p {
  color: #333;
}

.new-ticket-div {
  max-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: 0.3s ease-in-out;
}

.new-ticket-div form {
  padding: 12px;
}

.new-ticket-div.active {
  max-height: 1000px;
}

.new-ticket-div #editor {
  height: 160px;
}

#close-comment {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 4px 8px !important;
}

.submit-form-div {
  display: flex;
  justify-content: flex-end;
}

#submit-comment {
  margin-top: 8px;
  width: 128px;
}

#submit-comment-form {
  display: flex;
  flex-wrap: wrap;
  background: #FFF;
  border-radius: 8px;
  border: 1px solid rgba(34, 41, 47, 0.125);
}

#submit-comment-form .cactus-form-div {
  padding: 8px;
}

#submit-comment-form label {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

#submit-comment-form #editor {
  height: 240px;
}

.status {
  text-align: right;
  border-radius: 16px;
  padding: 4px 32px;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.status.open {
  background: #C9EEC6;
}

.status.in-progress {
  background: #A6D1E3;
}

.status.urgent {
  background: #EDB898;
}

#comments-editor {
  height: 128px;
}

#update-task-button {
  display: none;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
}

#update-task-button.show {
  display: block;
}

#undo-button, #undo-delete-button {
  display: none;
}

#undo-button.show, #undo-delete-button.show {
  display: block;
}

.cactus-checkbox-div {
  display: flex;
  gap: 8px;
  padding: 8px;
}

.extended-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.extended-content .left-col {
  width: 63%;
}

.extended-content .right-col {
  width: 35%;
}

#new-ticket-form {
  display: flex;
  flex-wrap: wrap;
}

#new-ticket-form .cactus-form-div {
  padding: 8px;
}

.green-background-class {
  background: #CEF9EE;
}

.order-number {
  position: absolute;
  top: 4px;
  left: 8px;
  color: #3BD4AE;
  font-weight: bold;
}

#new-ticket-form .list-group-item {
  padding-left: 24px;
}

#new-ticket-form p {
  margin-bottom: 0px;
}

.list-group-item .item-action-buttons {
  position: absolute;
  display: flex;
  gap: 4px;
  right: 8px;
  top: 8px;
}

#add-task-button, #update-task-button, #undo-button, #undo-delete-button {
  margin-top: 8px;
}

#add-task-button svg, #update-task-button svg, #undo-button svg, #undo-delete-button svg {
  margin-right: 8px;
}

.list-group-item .item-action-buttons span {
  background: #F5F5F5;
  padding: 4px;
  border-radius: 8px;
}

.list-group-item .item-action-buttons span svG {
  font-size: 14px;
}

.list-group-item .item-action-buttons span:hover {
  background: #EA4646;
  cursor: pointer;
}

.list-group-item .item-action-buttons span:hover svg {
  color: #FFF;
}

#add-task-button, #update-task-button, #undo-button, #undo-delete-button {
  margin-bottom: 4px;
}

.task-div {
  padding: 2px 2px 2px 32px;
}

.task-div input {
  border: 1px solid #ECECEC;
  padding: 8px;
  resize: both;
  /* This property makes the element resizable */
  overflow: auto;
}

#tasksList {
  margin-top: 8px;
}

.task-div input:focus {
  outline: none;
}

.task-div .timer-span {
  background: #DFDFDF;
  border: 2px solid #FFF;
}

.cactus-checkbox-div label {
  font-weight: 400 !important;
  font-size: 14px;
}

.card {
  margin: 4px;
}

.ticket-container {
  display: flex;
  flex-wrap: wrap;
}

.ticket-container .single-ticket .info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ticket-container .single-ticket a {
  font-weight: bold;
  color: #333;
}

.ticket-container .single-ticket a:hover {
  text-decoration: underline;
}

.ticket-container .single-ticket .info span {
  text-align: right;
  border-radius: 16px;
  padding: 2px 16px;
}

.ticket-container .single-ticket .info span.open {
  background: #E5F8ED;
}

.ticket-container .single-ticket .info span.in-progress {
  background: #A6D1E3;
}

.ticket-container .single-ticket .info span.urgent {
  background: #EDB898;
}

.ticket-container .single-ticket .info p {
  margin-bottom: 0;
}

.ticket-container .single-ticket {
  border-radius: 8px;
  padding: 8px 16px;
  border: 1px solid #F5F5F5;
  width: 100%;
}

.ticket-container .single-ticket .additional-info {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}

.ticket-container .single-ticket .additional-info .progress-bar {
  width: 100%;
}

.progress-bar {
  background: #F5F5F5;
  border-radius: 4px;
  border: 1px solid #E2E2E2;
}

.progress-bar .counter {
  background: #34CB78;
  border-radius: 4px;
  color: #333;
  text-align: left;
  padding-left: 16px;
}

#ticket_alert {
  padding: 8px 16px;
}

input[readonly] {
  background-color: #f5f5f5;
  color: #888;
  border: none;
}

.single-comment .user-info {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.single-comment .user-info .name {
  font-size: 18px;
}

.single-comment {
  background: #FFF;
  border-radius: 4px;
}

.single-comment .user-info .image {
  padding: 16px;
  border-radius: 50%;
  background: rgba(34, 41, 47, 0.125);
  margin-right: 16px;
}

.single-comment .user-info .image svg {
  font-size: 20px;
}

.single-comment textarea {
  padding: 8px;
  border: 1px solid #D5D5D5;
}

.cactus-card .tokens {
  font-weight: bold;
}

.cactus-card .price {
  font-size: 24px;
  font-weight: bold;
}

.cactus-row .cactus-card {
  width: 24%;
}

.cactus-card > * {
  text-align: center;
}

.cactus-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tag {
  border-radius: 4px;
  padding: 4px 16px;
  color: #FFF;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
}

.tag:hover {
  cursor: pointer;
}