@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Cairo";
}
a{
  color: #333;
  text-decoration: none;
}
p, label ,span{
  font-size: 16px !important;
   white-space: nowrap;
}
.show{
  visibility: hidden;
}
:root {
  --main-goldish: #c4a174;
  --light-gold: #c9ae81;
  --main-grey: #868a8e;
  --light-grey: #edebeb;
  --main-text: #333333;
  --main-indicators: #eb5757;
}

body {
  font-family: "Cairo", sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-x: hidden !important;
  background-color: #e0e0e0
}
main {
  flex: 1;
}
.container {
  width: 90%;
  margin: auto;
}
header {
  background-color: white;
  width: 100%;
  border-bottom: 1px solid #edebeb;
}
header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.secondary-title {
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid #edebeb;
}
.logo-cont {
  width: fit-content;
}
.logo-cont img {
  max-width: 65%;
}
img.name {
  display: none;
}
.logo-cont a {
  display: flex;
  gap: 10px;
  align-items: center;
}
.time-wrapper {
  display: flex;
  gap: 20px;
}
.date,
.time {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--main-text);
  font-size: 16px;
}
header .header-stats {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  padding: 20px 0;
}
header .header-info {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: nowrap;
  width: fit-content;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.help {
  display: flex;
  margin-top: 10px;
  gap: 10px;
  align-items: center;
}
.user-name {
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.user-name p {
  font-size: 16px;
}
header .user-info img {
  width: 40px;
  height: 40px;
}
.main-background {
  background-image: url("../assets/background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  background-color: #ededed;
  justify-self: center;
  display: flex;
  height: 100%;
  width: 100%;
}
.support-card,
.login-card {
  background-color: white;
  width: 360px;
  margin: auto;
  padding: 20px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
}
.support-card {
  width: fit-content;
}
.support-card h1,
.login-card h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 25px;
  font-weight: 700;
}
.login-card .inputs-row .input-cont,
.login-card .input-cont {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.support-card .inputs-row {
  display: flex;
  gap: 20px;
}
.support-card .inputs-row .input-cont {
  flex: 1;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.support-card .input-cont input,
.support-card .input-cont select,
.login-card .input-cont input {
  width: 100%;
  background-color: var(--light-grey);
  color: var(--main-grey);
  padding: 8px 20px;
  border-radius: 8px;
  outline: none;
  border: 1px solid #e4e4e4;
}
.login-card .other-links a {
  color: var(--main-goldish);
  display: flex;
  flex-direction: column;
}
.email {
  position: relative;
}
.email::before {
  background-image: url("../assets/user.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 18px;
  content: "";
  height: 100%;
  position: absolute;
  right: 5px;
  top: 20%;
}

.password {
  position: relative;
}
.password::before {
  background-image: url("../assets/type.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 18px;
  content: "";
  height: 100%;
  position: absolute;
  right: 5px;
}
.check-input input[type="checkbox"] {
  accent-color: var(--main-goldish); /* Changes to red */
}
.support-card button,
.login-card button {
  width: 100%;
  cursor: pointer;
  background-color: var(--main-goldish);
  padding: 8px 0;
  border-radius: 20px;
  color: white;
  border: none;
}
.login-card .input-cont .email input {
  padding-right: 30px;
}
.login-card .input-cont .password input {
  padding-right: 30px;
}
/* Main page css */
main {
  flex-grow: 1;
}
.sections {
  max-width: 1400px;
  margin: auto;
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.section-card {
  cursor: pointer;
  width: 330px;
  padding: 8px;
  width: 330px;
  padding: 8px;
  text-align: center;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  background-color: white;
}
.section-card h2 {
  font-size: 14px;
  font-weight: 500;
}
.section-card {
  text-decoration: none;
  color: #000;
}
/* End main page */
/* Start homepage */
.dashboard {
  display: flex;
  position: relative;
}

.iframe-modal,
.notification-bg,
.modal-bg-edit,
.modal-bg {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: #5f5f5f50;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  overflow: hidden;
}

.iframe-modal,
.modal-bg-edit,
.modal-bg {
  display: none;
}
.modal-bg-edit .answer-modal {
  width: 600px;
}
.modal-bg-edit .answer {
  display: flex;
  width: 300px;
  flex-direction: column;
  gap: 16px;
}
.modal-bg-edit .answer .first {
  color: rgba(135, 138, 144, 1);
}
.modal-bg-edit .date-edit {
  display: flex;
  margin-top: 2%;
  flex-direction: column;
}
.modal-bg-edit .date-edit .input-wrap {
  display: flex;
  flex-direction: column;
}
.modal-bg-edit .date-edit .input-wrap input {
  background-color: #eee;
  border: none;
  outline: none;
  border-radius: 8px;
}
.modal-bg-edit .answer .single-row {
  display: flex;
  gap: 60px;
}
.notify {
  cursor: pointer;
}
.notification-bg {
  visibility: hidden;
  display: flex;
  align-items: start;
  justify-content: flex-end;
}
.notification-bg.active {
  visibility: visible;
}
.notification-bg .notification {
  width: fit-content;
  background-color: white;
  height: 100%;
  position: relative;
  left: -500px;
  transition: all 0.3s;
}
.notification-bg .notification.active {
  left: 0px;
}
.notification-bg .notification-header {
  padding: 12px;
  color: white;
  font-weight: 500;
  background-color: var(--light-gold);
}
.notification-bg .notification-type {
  display: flex;
  padding: 8px;
}
.notification-bg .notification-type p {
  padding: 10px 12px;
  cursor: pointer;
}
.notification-bg .notification-type p.active {
  border-bottom: 2px solid var(--light-gold);
}
.notification-bg .single-notification {
  display: flex;
  padding: 12px 12px 12px 28px;
  align-items: center;
  gap: 40px;
  cursor: pointer;
}
.notification-bg .notification-content {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.notification-bg .notification-description {
  font-size: 14px;
  color: #6c757d;
}

.dashboard .modal-bg.active {
  overflow: hidden;
}

.iframe-modal.active,
.modal-bg-edit.active,
.modal-bg.active {
  display: flex;
}
.answer-modal {
  border-radius: 12px;
  overflow: hidden;
}
.modal-title {
  background-color: var(--main-text);
  color: white;
  padding: 12px 12px;
}
.modal-content {
  background-color: white;
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.modal-content .answer-form {
  width: 100%;
  position: relative;
}
.modal-content .answer-form::before {
  content: url("../assets/search.png");
  position: absolute;
  left: 20px;
  top: 50px;
}
.modal-content .result {
  display: flex;
  flex-direction: column;
}
.modal-content .result-header {
  display: flex;
  background-color: #f4ebd0;
  gap: 40px;
  text-align: center;
  font-weight: 500;
  padding: 8px;
}
.modal-content .single-result {
  padding: 8px;
  display: flex;
  gap: 40px;
}
.modal-content .answer-form {
  padding: 8px 0;
}
.modal-content .answer-form input {
  width: 100%;
  background-color: #eee;
  padding: 8px;
  border: none;
  outline: none;
  font-size: 14px;
}
.get-result {
  background-color: #333333;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  padding: 14px;
  gap: 12px;
}
.get-result a {
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  text-decoration: none;
  background-color: var(--light-gold);
}
.get-result a.decline {
  background-color: rgba(108, 117, 125, 1);
}
.dashboard .top-options {
  display: flex;
  gap: 10px;
  align-items: center;
}

.dashboard .stats {
  flex: 1;
}
.dashboard .nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background-color: white;
}
.dashboard .user-info {
  border-top: 2px solid #e4e4e4;
  border-bottom: 2px solid #e4e4e4;
  height: 60px;
  overflow: hidden;
}
.dashboard .user-info p {
  visibility: hidden;
  transition: all 0.5s;
  transition-delay: 1s;
}
.dashboard aside {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 20px;
  width: 70px;
  padding: 8px;
  background-color: white;
  transition: width 0.5s ease;
  min-height: 100vh;
}
/* While hovering */
@media (min-width: 920px) {
  .dashboard aside:hover {
  width: 250px;
}

}

.dashboard aside:hover img.name {
  display: block;
}
.dashboard aside:hover .user-info {
  padding: 8px;
  height: auto;
}
.dashboard aside:hover .user-info p {
  visibility: visible;
  transition-delay: 0s;
}
aside .logo-cont {
  width: 100%;
}

.dashboard .inbox-stats {
  display: flex;
  gap: 20px;
  align-items: center;
  width: fit-content;
  padding: 16px;
  flex-wrap: wrap;
  width: 100%;
}
.inbox-card {
  flex: 1;
  padding: 15px;
  border-radius: 16px;
  background-color: white;
}
.inbox-card p {
  font-weight: 300;
}
.inbox-stats .card-count {
  display: flex;
  gap: 20px;
  align-items: center;
}
.manipulate-draft {
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}
.manipulate-draft,
.choose-ministry {
  background-color: white;
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding: 8px;
}
.choose-ministry.full  {
  gap:20px;
}
.choose-ministry.full  .choice {
  display: flex;
  flex: 1;
}
.manipulate-draft .save,
.choose-ministry .save {
  display: flex;
  align-items: center;
  gap: 10px;
}
.manipulate-draft .save div,
.choose-ministry .save div {
  padding: 4px 8px;
  font-size: 16px;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
}

.manipulate-draft .save div {
  background-color: var(--main-goldish);
}
.choose-ministry .save div:first-of-type {
  background-color: rgba(241, 154, 75, 1);
}
.choose-ministry .save div:last-of-type {
  background-color: var(--main-goldish);
}
.manipulate-draft .save a,
.choose-ministry .save a {
  width: fit-content;
  height: fit-content;
  color: white;
  text-decoration: none;
  font-size: 16px;
}
.choice {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 20px;
}
.choice select {
  max-width: 500px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #f6f6f6;
}
.choice label {
   white-space: nowrap;
}
.choose-ministry a {
  width: 30px;
  height: 30px;
}
/* Start Statistics */
.statistics {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.statistics .stat-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: stretch;
}
.statistics .stat-row .big-chart {
  flex: 2 1 400px;
}
.statistics .stat-row .small-chart {
  flex: 1 1 200px;
}
.stat-row .single-statistic {
  background-color: white;
  border-radius: 16px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chart {
  width: 90%;
  height: 78%;
  position: relative;
  min-height: 200px; /* or adjust as needed */
}
canvas {
  width: 100% !important;
  height: 100% !important;
}
.statistic-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #eee;
}

/* End Statistics */
/* Start Search Transactions */
.full select,
.full input {
  width: 100% !important;
}
.full .input-quarter {
  width: 24% !important;
}
.search-transactions-section {
  background-color: white;
  padding: 24px;
}
.search-transactions-section .search-transaction {
  display: flex;
  flex-direction: column;

  gap: 8px;
}
.search-transactions-section .four-input-row {
  display: flex;
  gap: 16px;
  align-items: center;
}
.search-transactions-section .input-quarter {
  display: flex;
  flex-direction: column;
  width: 20%;
}
.search-transactions-section .input-quarter-row {
  display: flex;
  gap: 12px;
  align-self: self-end;
  flex: 1;
  height: fit-content;
}
.search-transactions-section .input-quarter select,
.search-transactions-section .input-quarter input {
  background-color: #f6f6f6;
  border-radius: 12px;
  border: none;
  outline: none;
  flex: 1;
  font-size: 16px;
  padding: 8px;
}
.search-transaction .form-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 12px;
}
.search-transaction .form-actions button {
  padding: 12px 36px;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  color: white;
  background-color: var(--main-goldish);
}
/* End Search Transactions */
/* Start Activity */
.activity-section {
  padding: 20px;
}
.activity {
  border-radius: 20px;
  background-color: white;
  font-size: 16px;
}
.activity .single-activity {
  padding: 12px;
}
.activity .single-activity {
  display: flex;
  align-items: center;
  gap: 12px;
}
.activity .single-activity img {
  width: 40px;
  height: 40px;
}
.activity .user-activity,
.activity .activity-date {
  color: var(--light-gold);
}
.export-section {
  padding: 0 0 16px 0;
  border-bottom: 2px solid #eee;
  position: relative;
}
.export-card.active {
  display: block;
}

.export-card {
  display: none;
  position: absolute;
  top: 0;
  z-index: 100;
  background-color: white;
  width: 200px;
  left: -200px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-radius: 12px;
}
.export-card div:first-of-type {
  border-bottom: 1px solid #eee;
}
.export-card div {
  padding: 8px;
}
.export-card div a {
  color: black;
  text-decoration: none;
}
 body::-webkit-scrollbar {
  display: none;
  width: 0;
}
.export-btn {
  cursor: pointer;
  color: white;
  width: 100%;
  padding: 8px 0;
  background-color: var(--light-gold);
  border-radius: 8px;
  text-align: center;
}
.whole-editor {
  display: flex;
}
.book-details {
  width: 50%;
  flex:1;
  background-color: white;
  padding: 20px;
  min-height: 100vh;
}
.book-title {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.receive-title {
  font-size: 18px;
}
.receivers-2,
.receivers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.receivers-2 {
  flex-direction: row;
  flex-wrap: wrap;
}
.receivers-2 .row {
  width: 100%;
  display: flex;
  gap: 10px;
}

.receivers-2 .receiver-details,
.receivers .receiver-details {
  display: flex;
  gap: 8px;
}
.receivers-2 .receiver-details img,
.receivers .receiver-details img {
  width: 24px;
  height: 24px;
}
.single-receiver {
  width: 45%;
  display: flex;
  justify-content: space-between;
}
 .single-receiver{
  background-color: #eee;
  align-items: center;
  padding: 4px;
  border-radius: 12px;
}

.single-receiver img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.editing {
  background-color: transparent;
  display: flex;
  padding: 4px;
  flex-direction: column;
}
.editing .tools {
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  font-size: 12px;
  border-radius: 12px;
  background-color: #e8e8e8;
  gap: 0;
}
.editing .tools .tools-group {
  display: flex;
  gap: 8px;
  border-left: 1px solid #ddd;
  align-items: center;
  justify-content: center;
  width: fit-content;
}
.editing .tools .tool {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 12px;
  justify-content: center;
  align-items: center;
  text-wrap-mode: nowrap;
}
.editing .tools .tool img {
  max-height: 16px;
  max-width: 16px;
}
.file-preview {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  background-color: white;
}
.file-preview div img {
  width: 16px;
  height: 16px;
}
.file-preview div {
  align-items: center;
  color: white;
  cursor: pointer;
  padding: 8px 12px;
  background-color: var(--main-goldish);
  width: fit-content;
  align-self: flex-end;
  border-radius: 8px;
  display: flex;
  gap: 12px;
}
.file-preview img.note {
  width: 100%;
}
.recevier-info {
  flex: 1;
  background-color: white;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-header {
  background-color: var(--main-text);
  padding: 8px;
  color: white;
}
.receiver-details {
  align-items: center;
  padding: 8px;
}
.recevier-info .data {
  display: flex;
  gap: 12px;
  align-items: center;
}
.recevier-info .data .title {
  color: var(--main-goldish);
}
.buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.buttons-row {
  display: flex;
  gap: 8px;
}
.buttons-row button {
  padding: 8px 0;
  flex: 1;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.buttons .singature {
  background-color: #f19a4b;
}
.buttons .research,
.buttons .edit {
  background-color: var(--main-goldish);
}
.buttons .delete {
  background-color: #e85757;
}
.export-form {
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  padding: 8px;
}
.export-form .inputs-row {
  display: flex;
  gap: 12px;
}
.export-form .inputs-row .input-cont {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

input[type="date"] {
  /* Move text to left */
  position: relative;
  /* Move icon to left (WebKit browsers) */
  &::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    padding: 10px; /* Clickable area */
    margin: 0;
  }
  text-align: right;
  /* Add padding so text doesn't overlap icon */
  padding-left: 30px;
}

.export-form .inputs-row .input-cont select,
.export-form .inputs-row .input-cont input {
  background-color: var(--light-grey);
  color: var(--main-grey);
  padding: 8px 20px;
  border-radius: 8px;
  outline: none;
  border: 1px solid #e4e4e4;
}
/* End Activity */
/* Start Editor */
.editor {
  padding: 12px;
  flex: 1;
}
.editor .uploaded-attachments h3,
.editor .attachments h3 {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 12px;
}
.editor .uploaded-attachments,
.editor .attachments {
  margin-bottom: 12px;
  background-color: white;
  flex: 1;
  padding: 12px 8px;
  border-radius: 8px;
}
.editor .attachments input {
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
}
.styled-file-input {
  padding: 10px;
  border: 2px dashed #ccc;
  border-radius: 5px;
  background: #f9f9f9;
  color: #333;
}
.img-details {
  display: flex;
  align-items: center;
  gap: 16px;
}
.editor .uploaded-attachments .files {
  display: flex;
  width: 100%;
  gap: 40px;
}
.editor .uploaded-attachments .files .file {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0 12px;
  justify-content: space-between;
  gap: 16px;
}
.editor .uploaded-attachments .files .file img {
  width: 20px;
  height: 20px;
}
.styled-file-input::file-selector-button {
  padding: 8px 12px;
  background: var(--main-goldish);

  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.data-header {
  background-color: wheat;
}
.data-header p{
  font-weight: 600;
}
.data-header,
.data-row {
  padding: 8px;
  max-width: 100%;
  display: flex;
  font-size: 16px;
}
.col-index {
  min-width: 40px;
}
.col-input {
  margin: 8px 20px;
}
.transaction-head{
  color: rgba(0, 122, 255, 1);
}
.col-head {
  flex: 1;
  display: flex;
  gap: 8px;
  padding: 12px;
}
.col-head img {
  width: 17px;
  height: 17px;
}
.col-head .expand {
  cursor: pointer;
  width: 15px;
  height: 10px;
}
.details-data.active {
  display: block;
}
.details-data {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  display: none;
}
.details-data .details-tabs {
  width: 100%;
  gap: 10px;
  display: flex;
  gap: 8px;
}
.details-data .details-tabs a.active {
  color: white;
  background-color: var(--light-gold);
}
.details-data .details-tabs a {
  text-decoration: none;
  border-radius: 12px;
  background-color: #eee;
  padding: 8px 12px;
  flex:1;
  text-align: center;
}
.details {
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 12px;
}
.details-header {
  display: flex;
  background-color: var(--main-goldish);
  gap: 52px;
  padding: 8px;
}
.details-header p {
  min-width: 330px;
  color: white;
}
.single-detail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  position: relative;
  padding: 0 40px;
  font-size: 14px;
}
.single-detail img{
  width: 70px;
}

.single-detail::after {
  content: "";
  right: 20px;
  top: 30px;
  width: 2px;
  height: 100%;
  border-radius: 100%;
  background-color: var(--main-goldish);
  position: absolute;
}
.single-detail:last-of-type::after {
  display: none;
  width: 0;
  width: 0;
}
.single-detail::before {
  content: "";
  right: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: var(--main-goldish);
  position: absolute;
}
.single-detail .detail-col {
  display: flex;
  max-width: 220px;
  align-self: start;
  flex-direction: column;
}
.single-detail .detail-col .title {
  color: var(--main-goldish);
}
.single-detail .detail-col p {
  display: inline;
}
.single-detail .detail-col .edit {
  padding: 4px 8px;
  cursor: pointer;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-size: 16px;
  background-color: var(--main-text);
}
.detail-col .status {
  padding: 4px 8px;
  background-color: rgba(151, 96, 63, 0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* End Editor */
/* Start Tabs */
.tabs {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  align-items: center;
}
.tabs ul {
  overflow: hidden;
  font-size: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.tabs ul a {
  text-decoration: none;
  color: black;
  display: none;
  width: 100%;
}
.tabs ul li span {
  display: none;
}
aside:hover ul li span {
  display: block;
}
.tabs ul li {
  display: flex;
  justify-content: space-between;
}
.tabs ul li img {
  max-width: 18px;
  max-height: 18px;
  margin: auto;
}
.dashboard aside:hover .tabs ul {
  /* align-items: stretch; */
  display: block;
}
.dashboard aside:hover .tabs ul li {
  width: 100%;
}
.dashboard aside:hover .tabs ul li a {
  display: block;
}
.dashboard aside:hover .tabs ul li img {
  display: none;
  /* padding: 10px 30px 10px 0; */
}
.tabs ul li {
  display: flex;
  justify-content: space-between;
  border-radius: 12px;
  width: fit-content;
  padding: 10px;
  margin: 10px 0;
  list-style: none;
  cursor: pointer;
}
.tabs ul li.active,
.tabs ul li.active a {
  background-color: var(--light-gold);
  color: white;
}
.tabs {
  height: 100%;
    overflow: hidden;
}
.tabs .signout img {
  cursor: pointer;
}
.tabs .signout {
  padding: 0 20px;
  justify-self: flex-end;
  display: flex;
  gap: 20px;
  align-items: center;
  align-self: baseline;

}

aside:hover .tabs .signout a {
  display: block;
}
.tabs .signout a {
  display: none;
  color: black;
  text-align: right;
  text-decoration: none;
}
/* End Tabs */
/* Start forwarding form */
.search-recievers {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 12px;
  background-color: white;
}
.forward-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.forward-form input {
  width: 100%;
  background-color: #eee;
  border: none;
  outline: none;
  border-radius: 12px;
  padding: 8px;
}
/* end forwarding form */
/* Start Arbitarty */
.arbitary {
  margin-top: 20px;
  background-color: #fafafa;
  padding: 8px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
.arbitary .main-section {
  padding: 12px;
}

.arbitary .main-section .section.active {
  display: block;
}
.arbitary .section.expanded::after {
  content: "";
  position: absolute;
  width: 2px;
  background-color: #ddd;
  height: calc(100% - 40px);
  right: 5px;
  top: 34px;
}
.arbitary .section.expanded::before {
  content: url("../assets/arrow-up.png");
}
.arbitary .section::before {
  content: url("../assets/arrow-down2.png");
  position: absolute;
  width: 20px;
  height: 20px;
  right: 0;
  top: 4px;
}

/* .arbitary .section:last-of-type::before{ */
.main-section .section {
  display: none;
}
.arbitary .section {
  position: relative;
  padding: 8px 20px;
  cursor: pointer;
}
.arbitary .section .section-details img {
  width: 30px;
  height: 30px;
}
.arbitary .section .section-details {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* End Arbitarty */
/* Start Actions */
.actions {
  display: flex;
  width: 100%;
  justify-content: space-between;
  background-color: white;
  padding: 8px;
}
.docs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex:1
}
.docs div img {
  width: 20px;
  height: 20px;
}
.docs div {
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(238, 238, 238, 1);
}
.actions .search {
  position: relative;
}
.actions .search::before {
  content: url("../assets/search.png");
  position: absolute;
  padding: 4px;
  right: 0px;
  top: 0px;
}
.actions .search input {
  background-color: rgba(238, 238, 238, 1);
  border: 0;
  outline: 0;
  padding: 4px 28px 4px;
  max-width: 300px;
  border-radius: 8px;
}
.draft-data {
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.draft-header {
  display: flex;
}
.column {
  width: 100%;
}
.column > div {
  height: 60px;
  display: flex;
  align-items: center;
}
.first-item input {
  padding-right: 12px;
}
.first-item {
  padding: 12px;
  width: 100%;
  font-size: 18px;
  background-color: rgba(244, 235, 208, 1);
}
.column:first-of-type div {
  padding: 20px;
}

.action-items {
  display: flex;
  gap: 12px;
}
.action-items img {
  cursor: pointer;
}
.status {
  display: flex;
  gap: 10px;
  position: relative;
  transition: all 0.3s ease;
}
.status img {
  width: 10px;
  height: 10px;
  cursor: pointer;
}

.status-tooltip::before {
  content: "";
  height: 1px;
  width: 1px;
  border: 40px solid transparent;
  border-color: transparent transparent #eee transparent;
  position: absolute;
  left: 0;
  top: -61%;
}
.status-tooltip {
  display: flex;
  z-index: 34;
  visibility: hidden;
  position: absolute;
  align-items: center;
  padding: 12px;
  left: 70%;
  top: 100%;
  background-color: #eee;
  color: black;
  border: 1px solid #eee;
  border-radius: 12px;
  gap: 80px;
  text-wrap-mode: nowrap;
}
.status:hover .status-tooltip {
  visibility: visible;
}
.status-tooltip .status-title {
  display: flex;
  flex-direction: column;
}
.pagination {
  background-color: white;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.pagination select {
  padding: 4px 8px;
}
.pagination .pages {
  display: flex;
  gap: 30px;
}
.pagination .pages a {
  padding: 0px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--main-goldish);
}
.pagination .pages a.active {
  background-color: var(--main-goldish);
  color: white;
}
/* End actions */
/* End homepage */
footer {
  background-color: white;
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}
footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-items .title {
  color: var(--main-grey);
  font-size: 18px;
}
.footer-items .info {
  columns: var(--main-text);
  font-weight: 600;
  font-size: 20px;
}
.footer-items .social-media {
  display: flex;
  gap: 10px;
}
.mobile-app {
  display: flex;
  width: 100%;
}
.mobile-app img {
  width: 100%;
  cursor: pointer;
}
@media (max-width: 920px) {
  .main-background {
    padding: 30px;
  }
  
  .dashboard aside .tabs ul {
    width: max-content;
  }
  /* While hovering */
.dashboard aside:hover {
  width: 70px;
}
.export-section .export-btn {
  padding: 0px 0!important;
}
.dashboard aside:hover .tabs ul {
  /* align-items: stretch; */
  
  display: flex;
}
.dashboard aside:hover .tabs ul li {
  width: 100%;
}
.dashboard aside:hover .tabs ul li a {
  display: none;
}
.dashboard aside:hover .tabs ul li img {
  display: block;
}
.dashboard aside:hover img.name {
  display: none;
}
.dashboard aside:hover .user-info {
  padding: 0px;
  height: 60px
}
aside:hover .tabs ul li span {
  display: none;
}
aside:hover .tabs .signout a {
  display: none;
}

  .header-info {
    flex-direction: column;
  }
  .logo-cont {
    width: 100px;
  }
  .support-card,
  .login-card {
    /* width: 96%; */
    padding: 20px;
    font-size: 14px;
  }
  footer {
    margin-top: 40px;
  }
  footer .container {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .mobile-app {
    justify-content: center;
  }
  .logo-cont a {
    flex-direction: column;
  }
  .time-wrapper {
    flex-direction: column;
  }
  .whole-editor{
  flex-direction: column;
}
.book-details{
  width: 100%;
}
.editor{
  max-width: 100%;
}
.editing .tools .tools-group {
  padding:4px !important;
  gap:0px;
}
.editing .tools .tool {
  padding: 4px;
}
}
@media (max-width: 520px) {
  .time-wrapper {
    display: none;
  }
  .dashboard .nav {
    justify-content: flex-end;
  }
  
.search-transactions-section .four-input-row {
    flex-direction: column;
        align-items: flex-start;

  }
  .pages{
    align-items: center;
  }
  .page-numbers {
    display: flex;
    justify-content: space-between;  
  }
  .first-item {
  padding: 4px;
}
.full .input-quarter {
  width: 55% !important
}
}