* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

*::-webkit-scrollbar {
  width: 4px;
  background: transparent;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(122, 122, 122, 0.55);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(122, 122, 122, 0.8);
}

*::-webkit-scrollbar:horizontal {
  display: none;
}

.header {
  width: 100%;
  background-color: #1a2340;
  padding: 10px;
  background: transparent;
}

.info {
  color: white;
  font-family: vazirmatn;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: center;
  justify-content: center;
  align-items: center;

  border: 1.75px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);

  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.3);
  width: 60%;
}

.info p {
  color: #9c9b9b;
  gap: 0;
  text-align: center;
  margin-top: 0;
}

#golden {
  color: #c4983a;
  margin: 0;
  text-align: center;
  font-size: 36px;
}

.info h2 {
  text-align: center;
}

.extra p {
  color: #9d9999;
}

.link {
  transition: all 200ms;
  background-color: #22c55e;
  width: 240px;
  height: 40px;
  border: none;
  border-radius: 10px;
  color: white;
  font-family: vazirmatn;
  font-size: 16px;
  cursor: pointer;
  margin-top: 15px;
}
.link:hover {
  transform: translateY(-5px);
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: #68ec98;
}

.link2 {
  color: #1169db;
  text-decoration: none;
  font-size: 18.5px;
  transition: all 250ms;
}

.link2:hover {
  transform: translateY(40px);
  color: #0c68af;
}

.link2:active {
  color: #22c55e;
}

.submit {
  background-color: #c4983a;
  color: #0f1520;
  border: none;
  font-family: vazirmatn;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 240px;
  cursor: pointer;
  transition: all 200ms;
  margin-top: 25px;
}

.submit svg {
  margin-right: 10px;
}
.submit:hover {
  transform: translateY(-5px);
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: #22c55e;
}

.tools h1 {
  text-align: center;
  color: #948a8a;
}

.tools {
  padding: 10px;
  background: transparent;
  font-family: vazirmatn;
  opacity: 0;
  visibility: hidden;
  transition: all 600ms ease-in-out;
  transform: translateY(40px);
}

.tools.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.tools-info {
  color: white;
  font-family: vazirmatn;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: center;
  justify-content: center;
  align-items: center;

  border: 1.75px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);

  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.3);
  width: 60%;

  text-align: center;
}

.desc {
  display: flex;
  flex-direction: column;
  padding: 15px;
  color: #9d9999;
  width: 100%;
}

.desc h2 {
  color: #6c87de;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  color: #b8b0b0;
  width: 50%;
  transition: color 450ms ease-in-out;
}

.icon:hover {
  color: #1a2340;
}

.icon svg {
  transition: all 550ms;
}

.icon svg:hover {
  width: 256px;
  height: 256px;
  transform: rotate(10deg);
}

.work {
  background: transparent;
  color: white;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: vazirmatn;
  transform: translateY(40px);
  transition: all 600ms ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.work.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.slogan {
  color: #c4983a;
  font-size: 14px;
  text-align: center;
}

.process {
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.process svg {
  transform: rotate(90deg);
}

@media (max-width: 1000px) {
  .process {
    flex-direction: column;
  }
  .process svg {
    transform: rotate(0deg);
  }
  .icon svg:hover {
    width: 128px;
    height: 128px;
  }
  .tools-info {
    width: 90%;
  }
  .info {
    width: 90%;
  }
}

.process span:not(:has(svg)) {
  color: white;
  font-family: vazirmatn;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: center;

  justify-content: center;
  align-items: center;

  border: 1.75px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);

  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.3);
  width: 60%;

  text-align: center;
  height: 65px;

  transition: background 350ms;
}

.process span:not(:has(svg)):hover {
  background: rgba(255, 255, 255, 0.35);
}

.process span svg {
  color: #c4983a;
  align-self: center;
  justify-self: center;
  margin-top: 5px;
}

.auth {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  text-align: center;
  width: 70%;
  font-family: vazirmatn;
  border-radius: 10px;
  border: 1.75px solid rgba(255, 255, 255, 0.35);
  padding: 15px;
}
.auth h2 {
  color: #22c55e;
}

.authForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 1.5px solid #d2d2d2;
  width: 50%;
}

.authForm p {
  color: #9d9999;
}

.extra {
  width: 50%;
}

.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.auth-form label {
  text-align: right;
  color: #9d9999;
  font-size: 12px;
}

.passwordStatus,
.usernameStatus,
.emailStatus {
  color: #ec5858;
  border-radius: 10px;
  margin: 0;
}

.auth-form input {
  font-family:
    "jetbrains mono", "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Tahoma, Geneva, Verdana, sans-serif;
  border: none;
  border-bottom: 1px solid #d2d2d2;
  background-color: transparent;
  margin-top: 20px;
  width: 240px;
  height: 40px;
  border-bottom: 2px solid #1a2340;
  color: #fff;
}

.auth-form input:focus {
  outline: none;
  border-bottom: 2px solid #c4983a;
}

.auth-form input::placeholder {
  color: #9d9999;
}

.auth-form button:not(:has(svg)) {
  width: 240px;
  height: 40px;
  color: white;
  background-color: #1a2340;
  border: none;
  margin-top: 30px;
  font-family: vazirmatn;
  cursor: pointer;
  transition: all 200ms;
}
.auth-form button:not(:has(svg)):hover {
  transform: translateY(-5px);
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: #22c55e;
}

#viewPass {
  cursor: pointer;
}

#randomPass {
  cursor: pointer;
}

.marandiz {
  color: #22c55e;
  margin-top: auto;
  font-size: 56px;
}

@media (max-width: 1000px) {
  .auth {
    flex-direction: column;
    width: 95%;
  }
  .authForm {
    border-left: none;
  }
  .marandiz {
    display: none;
  }
  .extra {
    justify-self: center;
    align-items: center;
    width: 100%;
  }
  .link2 {
    color: #79acef;
  }
}

/* DASHBOARD */

.navigation {
  width: 20%;
  height: 100vh;
  background-color: #1a2340;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
}

.navigation button {
  width: 80%;
  height: 40px;
  border: none;
  background-color: transparent;
  color: gray;
  cursor: pointer;
  transition: all 200ms;
  font-family: vazirmatn;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-right: 20px;
}

.navigation button:hover {
  color: white;
}

.navigation button:active {
  background-color: #a88333;
}

.navigation button svg {
  margin-left: 10px;
}

.dashboard {
  width: 80%;
  min-height: 100vh;
  background-color: #f4efe4;
  display: flex;
  flex-direction: column;
  padding: 15px;
  font-family: vazirmatn;
  margin-right: 20%;
}

.dashboard h2 {
  color: #1a2340;
  font-size: 22px;
}

.status {
  border: 1px solid #d2d2d2;
  min-height: 150px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow-y: auto;
  max-height: 300px;
}

.reqSum {
  width: 100%;
  border-left: 1px solid #d2d2d2;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  padding: 5px;
}

.reqSum:nth-child(4n) {
  border-left: none;
}

.sendRequest {
  width: 220px;
  height: 40px;
  background-color: #1a2340;
  color: white;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: vazirmatn;
  margin-top: 20px;
  cursor: pointer;
  transition: all 200ms;
  margin-bottom: 20px;
}

.sendRequest:hover {
  background-color: #101525;
}

.sendRequest svg {
  margin-left: 10px;
}

.sendButton {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.submitForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

label {
  display: flex;
  justify-content: center;
  align-items: center;
}

label svg {
  color: #373636;
  margin-left: 5px;
}

.form input {
  width: 45%;
  height: 30px;
  background-color: transparent;
  color: #373636;
  border: none;
  border-bottom: 2px solid #1a2340;
  font-family: vazirmatn;
  padding: 10px;
  margin-bottom: 10px;
}

.form input:focus {
  outline: none;
  border-bottom: 2px solid #c4983a;
}

.form span {
  display: flex;
  flex-direction: row;
}

.form span input {
  width: 30%;
  margin-left: 10px;
}

.form button {
  width: 220px;
  height: 40px;
  background-color: #1a2340;
  color: white;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: vazirmatn;
  margin-top: 20px;
  cursor: pointer;
  transition: all 200ms;
}

.editor {
  width: 45%;
  min-height: 80px;
  border: none;
  border-bottom: 1px solid #1a2340;
  padding: 10px;
  font-size: 14px;
  font-family: vazirmatn;
  background-color: transparent;
  resize: none;
}

.editor:focus {
  outline: none;
  border-bottom: 1px solid #c4983a;
}

.form button:hover {
  background-color: #101525;
}

.form label {
  text-align: right;
}

.hidden {
  display: none !important;
}

.active {
  background-color: #c4983a8d !important;
  color: #e8a71b !important;
  border-right: 3px solid #c4983a !important;
}

.request {
  border: 1px solid #1a2340;
  padding: 10px;
  margin-bottom: 10px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
}

.forms {
  width: 80%;
  min-height: 100vh;
  background-color: #f4efe4;

  padding: 15px;
  font-family: vazirmatn;
  margin-right: 20%;
}

.modal {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */

  display: flex;
  flex-direction: column;
  justify-content: center; /* Horizontal center */
  align-items: center; /* Vertical center */

  background: rgba(0, 0, 0, 0.5);

  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
}

.content {
  width: 300px;
  max-width: 90%;
  padding: 20px;
  background-color: #f4efe4;
  border: 2px solid #1a2340;
  border-radius: 10px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.modal.activated {
  visibility: visible;
  opacity: 1;
}

.fullInfo {
  width: 120px;
  height: 30px;
  background-color: #1a2340;
  color: white;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: vazirmatn;
  margin-top: 20px;
  cursor: pointer;
  transition: all 200ms;
  margin-bottom: 20px;
  font-size: 12px;
  border-radius: 10px;
}
.fullInfo:hover {
  background-color: #101525;
}

.passwordStatus {
  color: red;
}

.accept {
  width: 120px;
  height: 30px;
  background-color: green;
  color: white;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: vazirmatn;
  margin-top: 20px;
  cursor: pointer;
  transition: all 200ms;
  margin-bottom: 20px;
  font-size: 12px;
  border-radius: 10px;
  margin-right: 10px;
}
.accept:hover {
  background-color: #0ba00b;
}

.delete {
  width: 120px;
  height: 30px;
  background-color: #cd0606;
  color: white;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: vazirmatn;
  margin-top: 20px;
  cursor: pointer;
  transition: all 200ms;
  margin-bottom: 20px;
  font-size: 12px;
  border-radius: 10px;
  margin-right: 10px;
}
.delete:hover {
  background-color: #c91616;
}

.edit {
  width: 120px;
  height: 30px;
  background-color: #d99713;
  color: white;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: vazirmatn;
  margin-top: 20px;
  cursor: pointer;
  transition: all 200ms;
  margin-bottom: 20px;
  font-size: 12px;
  border-radius: 10px;
  margin-right: 10px;
}
.edit:hover {
  background-color: #b8841a;
}

/* EDIT PAGE */

.editSec {
  width: 50%;
  padding: 15px;
  border: 2px solid #1a2340;
}

.reqStatus {
  margin-right: 10px;
  border: 1px solid #d2d2d2;
  font-size: 12px;
  padding: 5px;
}

.disabled {
  pointer-events: none;
  cursor: not-allowed;
  background-color: gray;
}

@media (max-width: 1000px) {
  .navigation {
    position: relative;
    width: 100%;
    height: 80px;
    flex-direction: row;
    padding: 10px;
    margin: 0 !important;
  }
  .navigation button {
    margin: 0;
    padding: 0;
    margin-top: 10px;
    margin-right: 10px;
    font-size: 12px;
  }
  .dashboard {
    margin-right: 0px;
    width: 100%;
  }
  .forms {
    width: 100%;
    margin: 0;
    padding: 10px;
  }
  .delete {
    width: 60px;
  }
  .form input {
    width: 80%;
  }
  .form textarea {
    width: 80%;
  }
  .editSec {
    width: 90%;
  }
  .status {
    display: flex;
    flex-direction: column;
  }
  .status.hidden {
    display: none;
  }
  .reqSum {
    border-bottom: 1px solid #d2d2d2;
    border-left: none;
  }
}

#viewPass {
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
  color: #9d9999;
  width: 40px;
}

#randomPass {
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
  color: #9d9999;
  width: 40px;
}

.navbar {
  background-color: #1a2340;
  padding: 10px;
  display: flex;
  align-items: center;
}

.logout-form {
  width: 100%;
}

.logout {
  border: none;
  background-color: transparent;
  font-family: vazirmatn;
  font-size: inherit;
  cursor: pointer;
  transition: all 250ms;
  width: 100%;
  text-align: center;
  height: 100%;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #d2d2d2;
}
.logout:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.logout svg {
  margin-left: 5px;
}

.to-chats {
  border: 1px solid #c4983a;
  background-color: transparent;
  color: white;
  padding: 10px;
  font-family: vazirmatn;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 200ms;
  margin-right: 10px;
  color: #e2a90f;
}
.to-chats:hover {
  background-color: #b8841a;
  color: white;
}
.to-chats svg {
  margin-left: 5px;
}

.moderationBtn {
  display: flex;
  flex-direction: column;
}

.moderationBtn form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.moderationBtn form button {
  margin: 0;
  margin-top: 5px;
  width: 90%;
}

.delete.edit {
  background-color: #cf7901;
}
.delete.edit:hover {
  background-color: #e88d0e;
}

.contact {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px;
  background-color: #1a2340;
  font-family: vazirmatn;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 600ms ease-in-out;
  position: relative;
}

.contact.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.contact h2 {
  color: #c4983a;
  font-size: 36px;
  margin: 0;
}

.contact p {
  color: white;
  font-size: 18px;
}

.contact a {
  text-decoration: none;
  color: #9c9c9c;
  font-size: 17px;
  transition: all 200ms;
}
.contact a:hover {
  color: #1169db;
}

.contact-info {
  border: 1px solid #d2d2d2;
  padding: 20px;
  color: #f00;
}

.contact h3 {
  color: #d2d2d2;
}

.email-span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-span {
  border: 1px solid #d2d2d2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-right: 10px;
  color: #c4983a;
}

.radio-inputs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  accent-color: #0c68af;
  margin-top: 15px;
  margin-bottom: 15px;
}

.type-company {
  display: flex;
  flex-direction: column !important;
}

.type-company.hidden {
  display: none;
}

.radio-value {
  width: 150px;
}

/* .checkboxes {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
}

.checkboxes label {
  display: inline-flex;
  flex-direction: row;
  font-size: 14px;
}
.checkboxes input {
  width: 25px;
  height: 25px;
  cursor: pointer;
  border-radius: 50%;
} */

.checkboxes {
  display: flex !important;
  flex-direction: column !important;
}

.checkboxes label {
  border: 2px solid #ddd;
  border-radius: 999px; /* شکل کپسولی/pill */
  padding: 8px 14px;
  margin-bottom: 10px;
  transition: all 200ms;
  cursor: pointer;
}

/* مخفی کردن چک‌باکس اصلی و ساختن باکس دلخواه */
.checkboxes input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  transition: all 200ms;
}

.checkboxes label .box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #999;
}

/* استایل حالت انتخاب‌شده با :has() */
.checkboxes label:has(input:checked) {
  background: #1a2340;
  border-color: #326bd4;
  color: #c4983a;
}
.checkboxes label:has(input:checked) .box {
  background: #6366f1;
}

.checkboxes.hidden {
  display: none !important;
}

.sort-options {
  text-align: center;
  margin-bottom: 10px !important;
  color: #333333;
}

.sort-options select {
  width: 160px !important;
  font-family: vazirmatn !important;
}

.QandA {
  color: white;
  font-family: vazirmatn;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: center;

  justify-content: center;
  align-items: center;

  border: 1.75px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);

  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.3);
  width: 60%;

  text-align: center;

  transition: all 600ms ease-in-out;

  margin-bottom: 10px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
}

.QandA.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

@media (max-width: 1000px) {
  .QandA {
    width: 90%;
  }
}

.QandA h2 {
  color: #6c87de;
}
.QandA h3 {
  font-size: 16px;
  color: #c4983a;
  font-weight: 490;
}

.QandA form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.QandA input {
  width: 220px;
  height: 30px;
  background-color: transparent;
  color: #fff;
  border: none;
  border-bottom: 2px solid #1a2340;
  font-family: vazirmatn;
  padding: 10px;
  margin-bottom: 10px;
  transition: all 200ms;
}

.QandA input::placeholder {
  color: #acb8dd;
}

.QandA input:focus {
  outline: none;
  border-bottom: 2px solid #c4983a;
}

.QandA textarea {
  width: 220px;
  min-height: 120px;
  background-color: transparent;
  color: #fff;
  border: none;
  border-bottom: 2px solid #1a2340;
  font-family: vazirmatn;
  padding: 10px;
  margin-bottom: 10px;
  resize: none;
  transition: all 200ms;
}

.QandA textarea::placeholder {
  color: #acb8dd;
}

.QandA textarea:focus {
  outline: none;
  border-bottom: 2px solid #c4983a;
}

.QandA button {
  border: none;
  background-color: #1a2340;
  font-family: vazirmatn;
  cursor: pointer;
  padding: 10px;
  width: 120px;
  transition: all 200ms;
  color: white;
}
.QandA button:hover {
  background-color: #a88333;
  transform: translateY(-5px);
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: #22c55e;
}

.no-email {
  background-color: transparent !important;
  border: none !important;
  color: #acb8dd !important;
  padding: 0 !important;
  text-align: right;
  width: 70px !important;
  border-radius: 10px;
  padding: 5px !important;
}
.no-email:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  color: white !important;
}

.QandA svg {
  margin-left: 4px;
  color: crimson;
}

.option {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  border: 1px solid #1a2340;
  height: 40px;
  margin-bottom: 10px;
  padding: none;
}

.option div {
  width: 33.33%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid black;
  cursor: pointer;
  transition: all 200ms;
  height: 100%;
}
.option div:nth-child(3) {
  border-left: none;
}
.option div:hover {
  color: white;
  background-color: #1a2340;
}

.itemActive {
  color: black;
  background-color: #c4983a;
}

.question {
  border: 1px solid #1a2340;
  padding: 10px;
  margin-bottom: 10px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  width: 90%;
}

.container {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dateSort {
  color: #373636;
  margin-bottom: 10px;
}

.dateSort select {
  width: 150px;
  font-family: vazirmatn;
}

.container-form {
  width: 100%;
}

.nextPageBtn {
  width: 220px;
  height: 40px;
  background-color: #1a2340;
  color: white;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: vazirmatn;
  margin-top: 20px;
  cursor: pointer;
  transition: all 200ms;
}
.nextPageBtn:hover {
  background-color: #0f1520;
}

.container-formDesc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container-formDesc h2 {
  color: #1a2340;
}

.processSpan {
  display: flex;
  flex-direction: column;
}

.container-formDesc.hidden {
  display: none;
}

.processSpan.hidden {
  display: none;
}

.question-container {
  border: 1px solid #d2d2d2;
  border-radius: 10px;
  width: 90%;
  margin-bottom: 5px;
  padding: 10px;
}

.toggle-chat {
  position: fixed;
  border-radius: 50px;
  width: 70px;
  height: 70px;
  background-color: #1a2340;
  border: none;
  color: white;
  cursor: pointer;
  transition:
    background-color 200ms,
    transform 600ms;
  bottom: 15px;
  left: 15px;
}
.toggle-chat:hover {
  background-color: #c4983a;
}

.chat-container {
  border: 1px solid #d2d2d2;
  background-color: #e2dbd0;
  width: 100vw;
  height: 100vh;
}

.chat-info {
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #363636;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  font-family: vazirmatn;
  background-color: #f0ebe2;
}
#de-toggle-button {
  justify-self: left;
  color: #6b6257;
}
#de-toggle-button:hover {
  background-color: transparent;
  color: #1a1714;
}

.chat-messages {
  width: 100%;
  height: calc(100% - 140px);
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.chat-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 70px;
  border-top: 1px solid #363636;
  background-color: #f0ebe2;
  width: 100%;
}

.chat-container button {
  border: none;
  background-color: transparent;
  color: #6b6257;
  cursor: pointer;
  transition: all 200ms;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
}
.chat-container button:hover {
  color: #1a1714;
  background-color: #cbc4b899;
  border-radius: 999px;
}

.message-input {
  height: 35px;
  border: none;
  background-color: transparent;
  font-family: vazirmatn;
  color: black;
  padding: 10px;
  margin-right: 10px;
  background-color: #e8e2d9;
  border-radius: 10px;
  flex: 1;
  resize: none;
  overflow-y: auto;
}
.message-input:focus {
  outline: none;
}

.msg-text {
  padding: 15px;
  border-radius: 10px;
  background-color: #2e526a;
  color: white;
  font-family: vazirmatn;
  width: fit-content;
  max-width: 350px;
  margin-top: 5px;
  align-self: flex-start;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.msg-text-user {
  padding: 15px;
  border-radius: 10px;
  font-family: vazirmatn;
  width: fit-content;
  max-width: 350px;
  margin-top: 5px;
  background-color: #fff;
  align-self: flex-end;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.msg {
  padding: 10px;
  border: 2px solid #d2d2d2;
  font-family: vazirmatn;
  cursor: pointer;
  transition: all 200ms;
  margin-bottom: 10px;
  border-radius: 10px;
}

.msg:hover {
  background-color: #d2d2d2;
}

.msg p {
  color: #191b45;
}

/* .chat-icons {
} */

.attachment-form {
  position: absolute;
  display: flex;
  flex-direction: row;
  border-top: 1px solid #333;
  background-color: #f0ebe2;
  font-family: vazirmatn;
  color: #6b6257;
  margin-bottom: 136px;
  padding: 10px;
  transition: all 200ms ease-in-out;
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  width: 100%;
  padding: 10px;
  overflow: hidden;
}

.attachment-form div {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}

.attachment-form div svg {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 10px;
}

.attachment-form div:nth-child(1) svg {
  color: #7a5ea8;
  background: #7a5ea818;
}
.attachment-form div:nth-child(2) svg {
  color: #b85c3a;
  background: #b85c3a18;
}

.attachment-form div:nth-child(3) svg {
  color: #2e526a;
  background-color: #2e526a18;
}

.attachment-form.show {
  opacity: 1;
  visibility: visible;
  max-height: 150px;
}

.attachment-form label {
  margin-top: 5px;
  cursor: pointer;
  transition: all 200ms;
}
.attachment-form label:hover {
  color: #1a1714;
}

.file-preview {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #959595;
  padding: 10px;
  width: 350px;
  border-radius: 10px;
  font-family: vazirmatn;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 250ms;
}

#button-send-file {
  border: none;
  background-color: #1a2340;
  font-family: vazirmatn;
  cursor: pointer;
  transition: all 200ms;
  color: white;
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}
#button-send-file:hover {
  background-color: #0f1520;
}

img,
video {
  width: 300px;
  height: 200px;
  object-fit: contain; /* keeps ratio, fits whole image inside the box */
}

.file-preview.hidden {
  opacity: 0;
}

.pdf-link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: yellowgreen;
  transition: all 200ms;
}

.pdf-link span {
  flex-direction: column;
  margin-left: 15px;
}

.pdf-link p {
  margin: 0;
}

.pdf-link svg {
  color: red;
}

.pdf-link:hover {
  color: yellow;
}

.date-divider {
  width: 100%;
  font-family: vazirmatn;
  text-align: center;
  font-size: 12px;
  color: #1a1714;
  cursor: default;
}

.msg-date {
  font-family: vazirmatn;
  color: #1a1714 !important;
  font-size: 12px;
}

.msg-date.msg-text {
  text-align: right;
  background-color: transparent;
  padding: 0;
  margin: 0;
  margin-right: 3px;
}
.msg-date.msg-text-user {
  text-align: left;
  background-color: transparent;
  padding: 0;
  margin: 0;
  margin-left: 3px;
}

.msg-options {
  width: 30px;
  flex-shrink: 0;
  margin: 0;
}

.msg-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  width: fit-content;
}

.msg-actions {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 200ms;
  justify-content: center;
  align-items: center;
}

.msg-actions.perform {
  visibility: visible;
  opacity: 1;
}

.actions-container {
  display: flex;
  flex-direction: column;
  width: 250px;
  background-color: #f0ebe2;
  border: 2px solid #b85c3a;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}

.actions-container button {
  font-family: vazirmatn;
  width: 100%;
  border-radius: 10px 10px 0px 0px !important;
}

.actions-container button svg {
  margin-left: 5px;
  color: #cd0606;
}

.actions-container button:nth-child(1) {
  border-bottom: 1px solid #d2d2d2;
}
.actions-container button:nth-child(2) {
  border-radius: 0px 0px 10px 10px !important;
}

.msg-chat {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.msg-chat.user {
  align-items: flex-start;
}

.msg-chat.admin {
  align-items: flex-end;
}

.media-attachments-prompt {
  display: flex;
  flex-direction: row !important;
}

.edit-message-prompt {
  flex-direction: row !important;
  align-items: center;
}

.media-attachments-prompt.hidden {
  display: none;
}
.edit-message-prompt.hidden {
  display: none;
}

.edited-label {
  font-family: vazirmatn;
  font-size: 12px;
  margin: 0;
  padding: 0;
}

.edited-label.msg-text {
  color: #62a9d8;
}
.edited-label.msg-text-user {
  color: #929292;
}

.prePageBtn {
  width: 220px;
  height: 40px;
  background-color: #1a2340;
  color: white;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: vazirmatn;
  margin-top: 20px;
  cursor: pointer;
  transition: all 200ms;
}
.prePageBtn:hover {
  background-color: #0f1520;
}

.form-foundation.hidden {
  display: none;
}

.form-foundation {
  flex-direction: column !important;
  justify-content: center;
  align-items: center;
}

.form-change {
  flex-direction: column !important;
  justify-content: center;
  align-items: center;
}

.form-foundation input {
  width: 90% !important;
  margin-top: 10px;
}

.form-change textarea {
  width: 90% !important;
  margin-top: 10px;
  margin-bottom: 10px;
}

.company-names {
  flex-direction: column !important;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.names-info {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #dd2f2f;
}

.preview-name-files {
  display: flex;
  flex-direction: column;
  width: 240px;
  height: 150px;
  border: 1.5px solid #1a2340;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 100ms;
}

.preview-name-files:hover {
  background-color: #2e3755c0;
}

.preview-name-files h2 {
  padding: 0;
  margin: 0;
}
.preview-name-files h3 {
  padding: 0;
  margin: 0;
}

.msg-row.admin {
  justify-self: left;
}

.submit-request-form svg {
  margin-left: 5px;
}

.submit-request-form.hidden {
  display: none;
}

.submit-request-form.disabled {
  pointer-events: none;
  cursor: not-allowed;
  background-color: #1e1f21;
  color: white;
}

.chat-user-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  transition: all 500ms ease-in-out;
}

.chat-user-icon:active {
  transform: scale(2);
}

.new-msg-icon {
  position: fixed;
  bottom: 60px;
  left: 60px;
  stroke-width: 4px;
  transition: all 850ms;
  z-index: 100;
}

.new-msg-icon.glow {
  stroke-width: 0px;
  transition: all 850ms;
  z-index: 100;
}

.scrollBottom {
  position: fixed;
  bottom: 85px;
  left: 20px;
  color: white !important;
  background: rgba(26, 35, 64, 0.85) !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  display: flex;
  justify-content: center;
}

.scrollBottom:hover {
  background: rgba(63, 65, 73, 0.85) !important;
  color: white !important;
}

.scrollBottom:active {
  transform: scale(0.95);
}

.caution-text {
  color: red;
  font-weight: 400;
  background-color: #e99c9cd9;
  padding: 20px;
  border-radius: 5px;
  border: 1.5px solid #eb4141;
  font-size: 15px;
  text-align: center;
}

.there-is-a-chat-over-here {
  border: 1.67px solid #d2d2d2;
  width: 180px;
  position: fixed;
  bottom: 100px;
  left: 20px;
  border-radius: 10px;
  transition: all 500ms ease-in-out;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  background-color: rgba(221, 221, 221, 0.75);
}

.there-is-a-chat-over-here h2 {
  font-size: 16px;
}

.there-is-a-chat-over-here p {
  font-size: 14px;
}

@media (max-width: 768px) {
  .there-is-a-chat-over-here h2 {
    font-size: 14px;
  }
  .there-is-a-chat-over-here p {
    font-size: 12px;
  }
}

.there-is-a-chat-over-here.faal {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.close-blob {
  background-color: transparent;
  border: none;
  color: #333;
  margin-top: 5px;
  cursor: pointer;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 200ms;
}
.close-blob:hover {
  color: #1b1b1b;
  background-color: rgba(0, 0, 0, 0.2);
}

.there-is-a-chat-over-here h2 {
  margin: 0;
}

.error-message {
  position: fixed;
  top: 30px;
  left: 40%;
  color: red;
  background-color: rgba(220, 53, 69, 0.18);
  border: 1.5px solid rgba(220, 53, 69, 0.35);
  border-radius: 10px;
  padding: 15px;
  backdrop-filter: blur(12px);
  transform: translateY(-30px);
  transition: all 400ms ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
}
.error-message.display {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.close-error {
  background-color: transparent;
  border: none;
  color: #333;
  margin-top: 5px;
  cursor: pointer;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 200ms;
}
.close-error:hover {
  color: #1b1b1b;
  background-color: rgba(0, 0, 0, 0.2);
}

.error-content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.error-content svg {
  margin-left: 5px;
}

@media (max-width: 1000px) {
  .error-message {
    right: 25px;
    width: 360px;
  }
}

.accountInfo {
  position: fixed;
  right: 25px;
  top: 60px;
  background-color: #f4efe4;
  width: 240px;
  border-radius: 10px;
  border: 1.5px solid #d2d2d2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 450ms ease-in-out;
  font-family: vazirmatn;
}
.accountInfo.expand {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.accountInfo p {
  margin: 0;
  width: 100%;
  border-bottom: 1px solid #d2d2d2;
  text-align: center;
  padding: 15px;
}

.editAccount {
  border: none;
  background-color: transparent;
  font-family: vazirmatn;
  font-size: inherit;
  cursor: pointer;
  transition: all 250ms;
  width: 100%;
  text-align: center;
  height: 100%;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.editAccount svg {
  margin-left: 5px;
}

.editAccount:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.reset-pass {
  background-color: transparent !important;
  border: none !important;
  margin-top: 0px !important;
}

.reset-pass:hover {
  background-color: #22c55e;
}

.error-dialog {
  color: red;
  background-color: rgba(220, 53, 69, 0.18);
  border: 1.5px solid rgba(220, 53, 69, 0.35);
  border-radius: 10px;
  padding: 10px;
  position: fixed;
  top: 30px;
  left: 38%;
  transform: translateY(-30px);
  transition: all 450ms ease-in-out;
  opacity: 0;
  visibility: hidden;
  max-width: 360px;
}

.error-dialog p {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.error-dialog p svg {
  margin-left: 5px;
}

.error-dialog.ring {
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1000px) {
  .error-dialog {
    left: 18%;
    max-width: 300px;
  }
}

.description {
  color: #ddd;
  font-weight: 450;
  font-size: 16px;
}

.no-email-content.content {
  width: 70%;
  overflow-wrap: normal;
  word-break: keep-all;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.no-email-content svg {
  color: #f00;
}

.go-to-account-btn {
  color: white;
  background-color: #1a2340;
  border: none;
  margin-top: 30px;
  font-family: vazirmatn;
  cursor: pointer;
  transition: all 200ms;
  height: 40px;
  font-size: 17px;
  border-radius: 10px;
  padding: 10px;
  transition: all 250ms;
  margin: 0;
}
.go-to-account-btn:hover {
  background-color: #22c55e;
  transform: translateY(-5px);
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.2);
}

.go-to-account-btn:active {
  transform: scale(0.95);
}

.logoutAdmin {
  background-color: transparent;
  color: white;
  font-family: vazirmatn;
  border: 1.5px solid #d2d2d2;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 200ms;
  cursor: pointer;
}

.logoutAdmin:hover {
  background-color: #fff;
  color: #000;
}
.logoutAdmin svg {
  margin-left: 5px;
}

.go-to-top {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  color: #f3e7e7;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 250ms;
}

.go-to-top:hover {
  background-color: rgba(0, 0, 0, 0.75);
}

.social-icons img {
  width: 38px;
  height: 38px;
  margin-right: 10px;
}

.userInformation svg:nth-child(2) {
  margin-left: 0px;
}