body {
  font-family: sans-serif;
  margin: 0%;
  padding: 0;
  width: 100dvw;
  height: 100vh;
  background-color: #ffffff;
}

.subscription_container {
  background-color: white;
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing_page_sub {
  background-color: white;

  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#warning_icon {
  font-size: 80px;
}

.payment_options_sub {
  background-color: white;

  height: 30%;
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.row_payment_option {
  padding-left: 10px;
  height: 49%;
  width: 97%;
  background-color: blue;
  color: white;
  font-size: 17px;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.mobile_payment_option_section {
  border: 1px solid black;
  background-color: #fcfcfc;
  border-radius: 10px;
  height: 50%;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.mobile_payment_option_section_billing {
  margin-top: 1%;

  background-color: #fcfcfc;
  border-radius: 10px;
  height: 50%;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.transfer_payment_option_section {
  border: 1px solid black;
  background-color: #fcfcfc;
  border-radius: 10px;
  height: 50%;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.transfer_payment_option_section_billing {
  margin-top: 1%;

  background-color: #fcfcfc;
  border-radius: 10px;
  height: 50%;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
#mobile_number_payment_input {
  height: 10%;
  width: 90%;
}
#mobile_number_payment_input_billing {
  height: 10%;
  width: 90%;
}
.mobile_number_transfer_payment_input {
  margin-bottom: 3px;
  height: 10%;
  width: 90%;
}
#mobile_number_payment_button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  color: #d1cfcf;
  background-color: green;
  margin-top: 5px;
  height: 13%;
  width: 92%;
}

#transfer_payment_button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  color: #d1cfcf;
  background-color: green;
  margin-top: 5px;
  height: 13%;
  width: 92%;
}
#transfer_payment_button_billing {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  color: #d1cfcf;
  background-color: green;
  margin-top: 5px;
  height: 13%;
  width: 92%;
}
.loading_transfer {
  margin-right: 2px;
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.loading_universal {
  margin-right: 2px;
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#loading_icon_mobile_payment {
  margin-right: 2px;
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#loading_icon_transfer_payment {
  margin-right: 2px;
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.payment_options {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 10%;
  width: 20%;
}

.back_button_container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  height: 20%;
  width: 90%;
  margin-bottom: 2%;
}
.back_button_container_billing {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  height: 20%;
  width: 90%;
  margin-bottom: 2%;
}
#Pay_subcription_button {
  border: 0;
  margin-top: 10px;
  background-color: blue;
  color: white;
  padding-top: 7px;
  padding-bottom: 7px;
  width: 30%;
}
.route_list_container {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 5px;

  height: 68%;
  width: 100%;
  background-color: rgb(250, 250, 250);
}
.route_row_ {
  margin-bottom: 5px;
  cursor: pointer;
  background-color: rgba(174, 182, 182, 0.131);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 25px;
  padding-right: 14px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.route_row_:hover {
  background-color: rgba(0, 0, 0, 0.118);
}
.route_price_ {
  color: rgba(0, 0, 0, 0.812);
  font-weight: bold;
}
.route_title_ {
  color: rgba(0, 0, 0, 0.485);
  font-weight: bold;
}
.direction_flow_content_holder {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.edit_content_holder {
  padding-right: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 70%;
}

.profile {
  margin-left: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  width: 25%;
  margin-top: 5%;
}

.profile_options {
  visibility: collapse;
  width: 0;
  height: 0;
}

.profile :hover + .profile_options {
  margin-left: 5px;

  visibility: visible;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: rgb(240, 240, 244);
  height: 120px;
  width: 160px;
}

.profile_options:hover {
  margin-left: 5px;

  visibility: visible;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: rgb(240, 240, 244);
  height: 120px;
  width: 160px;
}

._option {
  cursor: pointer;
  width: 90%;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgba(24, 7, 210, 0.219);
  margin-left: 5px;
  font-weight: bold;
  font-size: 14px;
  margin-top: 10px;

  color: rgba(0, 0, 0, 0.441);
}
._option:hover {
  background-color: rgba(24, 7, 210, 0.576);
}

.Suspend_Employee {
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  color: #f2f2f2e3;
  background-color: red;
  border-radius: 5px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.checkmark_create_company {
  display: block;
}
.error_message {
  animation-name: pulse;
  animation-duration: 500ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  margin-top: 5px;
  padding-top: 10px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 10px;
  border-radius: 10px;
  background-color: red;
}

.verified_client_ID {
  margin-top: 15px;
  width: 88%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-bottom: 6px;
}

.verified_client_ID span {
  font-weight: bold;
  color: #00000059;
  font-size: 12px;
}
.verified_status {
  margin-top: 15px;
  width: 88%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.verified_status span {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  background-color: #00800073;

  font-size: 13px;
  color: rgba(255, 255, 255, 0.579);
  font-weight: bold;
}
.error_message span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.579);
  font-weight: bold;
}
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  position: fixed;
  top: 5%;
  left: 40%;
  width: 30%;
  height: 10%;
  background-color: white;
  border-radius: 30px;
}
.loading_icon_APPROVE_LOAN {
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.loading_icon_REJECT_LOAN {
  margin-right: 5px;
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#loading_icon_verified_client {
  width: 20px;
  height: 20px;
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.spining_animation {
  width: 20px;
  height: 20px;
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
/* #loading_icon_route {

  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
} */

.loading_icon_route {
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.dismiss {
  display: none;
}
.checkmark_reset_code_final {
  display: block;
  margin-right: 5px;
}

.loading_icon_reset_code_final {
  margin-right: 5px;
  animation-name: pulse;
  animation-duration: 500ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.checkmark_reset_code {
  display: block;
}
.loading_icon_reset_code {
  margin-left: 5px;
  animation-name: pulse;
  animation-duration: 500ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.loading_icon_sign_up {
  margin-left: 5px;
  animation-name: pulse;
  animation-duration: 500ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.landing_container {
  background-image: url("../images/Picsart_23-07-30_21-26-54-881.png");
  background-color: #f7f7f7;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content_holder_sign_in {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 35%;
  border-radius: 15px;
}
.content_holder_sign_up {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 60%;
  border-radius: 15px;
}
#password_reset_title {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.409);
}
.content_holder_forgot_password {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 39%;
  border-radius: 15px;
}
.forgot_password_phone_number_reset {
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65%;
  border-radius: 15px;
}

.user_input_tile_holder {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 90%;
}
.sign_up_names_inputs {
  width: 45%;
  border: 0;
  background-color: rgb(207, 199, 199);
  border-radius: 20px;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
}
#user_register_title {
  color: #fdfdfddc;
}
#phone_number_input {
  background-color: rgba(243, 240, 240, 0.945);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  width: 89%;
  border-width: 0;
  border-radius: 20px;

  margin-bottom: 5px;
}
#password_sign_in {
  background-color: rgba(243, 240, 240, 0.945);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  width: 89%;
  border-width: 0;
  border-radius: 20px;

  margin-bottom: 5px;
}
.button_container_sign_up {
  margin-top: 12px;
  width: 87%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.button_container_sign_in {
  margin-top: 12px;
  width: 87%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.button_container_sign_in span {
  cursor: pointer;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.705);
}

.button_container_sign_in span:hover {
  font-weight: bold;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.705);
}
.button_container_sign_up span {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.705);
}
#sign_in_link {
  font-weight: bold;
  margin-left: 5px;
  cursor: pointer;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.705);
}
#sign_in_link:hover {
  font-size: larger;
  cursor: pointer;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.705);
}

.register_user_button {
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-top: 5px;
  background-color: rgba(0, 0, 255, 0.747);
  color: #fdfdfd;
  width: 91%;
  border-radius: 20px;
}
.register_user_button_successfull {
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-top: 5px;
  background-color: rgba(6, 149, 13, 0.747);
  color: #fdfdfd;
  width: 91%;
  border-radius: 20px;
}
.register_user_button_error {
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-top: 5px;
  background-color: rgba(255, 13, 0, 0.747);
  color: #fdfdfd;
  width: 91%;
  border-radius: 20px;
}
.register_user_button span {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.753);
  margin-left: 5px;
  /* font-weight: bold; */
}
#search_transaction_icon_id {
  margin-left: 10px;
  margin-bottom: 7px;
}
#search_transaction_icon_id:hover {
  width: 30px;
  margin-left: 10px;
  margin-bottom: 7px;
}

#loading_icon_sign_in {
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.dashboard_container {
  width: 100%;
  height: 100%;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
}

.sidebar_container {
  background-color: rgb(255, 255, 255);
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;

  align-items: center;
}

#logo {
  margin-top: 20%;
  margin-left: 10px;
  margin-bottom: 40px;
}

.user_container_ {
  height: 100%;

  width: 95%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  margin-bottom: 5px;
  padding-top: 10px;
  padding-left: 5px;
  padding-bottom: 5px;
}
#user_names {
  color: rgba(0, 0, 0, 0.527);
  margin-left: 3px;
  font-weight: bold;
}

.notification_received {
  color: red;
  border-radius: 5px;
  background-color: rgb(224, 224, 224);
  padding: 5px;
  margin-top: 20px;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.notification {
  cursor: pointer;
  border-radius: 5px;

  padding: 5px;
  margin-top: 20px;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.user_names_container {
  border-radius: 5px;

  padding: 5px;
  margin-top: 20px;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.options {
  cursor: pointer;

  background-color: #00000011;
  width: 95%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: start;
  margin-bottom: 5px;
  padding-top: 10px;
  padding-left: 5px;
  padding-bottom: 5px;
}

.options_ {
  cursor: pointer;
  margin-top: 5px;
  background-color: #00000011;
  width: 95%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: start;
  margin-bottom: 5px;
  padding-top: 10px;
  padding-left: 5px;
  padding-bottom: 5px;
}

.options:hover {
  background-color: #0400f8b0;
}

.options_:hover {
  background-color: #080808b0;
}
.options span {
  margin-left: 10px;
  font-size: 17px;
  font-weight: bold;
  color: #0000006e;
}

.options_ span {
  margin-left: 10px;
  font-size: 17px;
  font-weight: bold;
  color: #0000006e;
}
.main_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #f1f1f1;
  width: 75%;
  height: 100%;
}

.row_1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #f1f1f1;
  width: 100%;
  height: 20%;
}
.search_container {
  align-items: center;
  border-left: 0;
  border-top: 0;
  border-right: 0;

  margin-left: 20px;
  width: 100%;
  display: flex;

  justify-content: flex-start;
}
.search_container span {
  margin-left: 5px;
}

.HOME_HEADER_container {
  height: 10%;
  width: 98%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.transaction_HEADER_container {
  height: 10%;
  width: 98%;
  margin-bottom: 1%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
}
.employee_HEADER_container {
  height: 10%;
  width: 98%;
  margin-bottom: 1%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
}
.refresh_employee_list_container {
  height: 10%;
  width: 98%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.refresh_verified_client_list_container {
  height: 10%;
  width: 98%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.ACCOUNTING_HEADER_container {
  background-color: #ffffff;

  height: 10%;
  width: 99.9%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.DOWANLOADS_container {
  background-color: #ffffff;
  height: 5%;
  width: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.download_options {
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.transaction_type_content_holder_active {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(0, 0, 255, 0.555);
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 10px;
  cursor: pointer;
}

.add_transaction_pop_up {
  color: rgba(255, 255, 255, 0.733);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(13, 13, 14, 0.555);
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 10px;
  cursor: pointer;
}
.add_transaction_pop_up span {
  margin-right: 3px;
}

.refresh-verified_client_list {
  color: #131212a1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(0, 0, 0, 0.082);
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  cursor: pointer;
}

/* .refresh-verified_client_list span{
  font-size: 13px;
font-weight: bold;
  color: #131212a1;
 
} */

.add_verified_client_pop_up {
  color: #ffffffc9;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: rgb(27, 163, 0);
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 10px;
  cursor: pointer;
}
.verified_client_title {
  color: rgba(0, 0, 0, 0.637);
  font-weight: bold;
  font-size: 13px;

  margin-left: 3px;
}

.verified_client_title_ {
  color: rgba(0, 0, 0, 0.753);
  font-weight: bold;
  font-size: 14px;

  margin-left: 3px;
}
#account_balance_title {
  color: rgba(0, 0, 0, 0.562);
}
#account_balance {
  font-size: 30px;
  color: rgba(0, 0, 0, 0.562);
}
.accounting_header_defaults {
  font-weight: bold;
  width: 13%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: rgb(255, 0, 0);

  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 1px;
  cursor: pointer;
}
.accounting_header_successful {
  font-weight: bold;
  width: 13%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(0, 128, 0, 0.459);

  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 1px;
  cursor: pointer;
}
.accounting_header_successful span {
  /* font-weight: bold; */
  margin-right: 5px;
}
.accounting_header_pending {
  font-weight: bold;
  width: 20%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(0, 0, 0, 0.514);

  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 1px;
  cursor: pointer;
}

.accounting_header_pending span {
  /* font-weight: bold; */
  margin-right: 3px;
}
.accounting_header_failed {
  font-weight: bold;
  width: 13%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: rgb(0, 132, 255);

  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 1px;
  cursor: pointer;
}
.accounting_header_failed span {
  /* font-weight: bold; */
  margin-right: 3px;
}

.accounting_header_successful:hover {
  background-color: rgba(0, 128, 0, 0.726);
}
.accounting_header_pending:hover {
  background-color: rgba(0, 0, 0, 0.712);
}
.accounting_header_failed:hover {
  background-color: rgb(0, 102, 197);
}
.transaction_type_content_holder_active:hover {
  background-color: rgba(0, 0, 255, 0.349);
}

.transaction_type_content_holder_active span {
  font-weight: bold;
  color: #000000b2;
  margin-right: 10px;
}
.transaction_container {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}
.transaction_row {
  padding-top: 5px;
  padding-bottom: 5px;
}
.title_create_company {
  margin-top: 5%;
  color: rgba(0, 0, 0, 0.475);
  font-size: 12px;
}
.home_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
  overflow-y: auto;
  height: 80%;
  width: 100%;
  background-color: rgb(250, 250, 250);
}
.loan_settings_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
  overflow-y: auto;
  height: 80%;
  width: 100%;
  background-color: rgb(250, 250, 250);
}

.loan_settings_container_display {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 5px;
  overflow-y: auto;
  height: 80%;
  width: 100%;
  background-color: rgb(250, 250, 250);
}
.loan_settings_container_loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 5px;

  height: 80%;
  width: 100%;
  background-color: rgb(250, 250, 250);
}

#edit_settings_icon {
  cursor: pointer;
  margin-top: 10px;
  margin-right: 40px;
}
.loading_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 5px;

  height: 68%;
  width: 100%;
  background-color: rgb(250, 250, 250);
}

#loading_container_image {
  border-radius: 40px;
  background-color: blue;
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#loading_container_title {
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.43);
}
.acccounting_list_container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  height: 80%;
  width: 100%;
  background-color: #f1f1f1;
}

.total_loans_container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 25%;
  width: 98%;
}
.total_loans_container span {
  color: rgba(0, 0, 0, 0.664);
  font-size: 14px;
}

.Total_Disbursements {
  border-radius: 10px;
  padding-left: 10px;
  margin-top: 19px;
  margin-bottom: 10px;
  background-color: rgba(206, 206, 206, 0.192);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 95%;
  width: 45%;
}

.total_disbursement_title {
  color: rgba(0, 0, 0, 0.253);
  font-size: 10px;

  font-weight: bold;
}
#total_disbursement_amount_ {
  color: rgb(0, 0, 0);
  font-size: 18px;
  margin-top: 5px;
  font-weight: bold;
}
#total_disbursement_amount {
  color: rgb(0, 0, 0);
  font-size: 18px;
  margin-top: 5px;
  font-weight: bold;
}
.employee_list_container {
  overflow-y: auto;
  height: 90%;
  width: 100%;
  background-color: #f2f2f2;
}
.search_container_employee {
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.582);

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin-right: 1%;
}
.search_container_transaction {
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.582);

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:100%;
  margin-right: 1%;
}

.employee_filter {
  border: 0;
  background-color: transparent;
}
.search_employee_input {
  width: 100%;
  background-color: transparent;
  border: 0;
}

.search_transaction_input {
  width: 100%;
  background-color: transparent;
  border: 0;
}
.employee_container {
  height: 70%;
  width: 100%;
  background-color: #f2f2f2;
}

.verified_client_list_container {
  overflow-y: auto;
  height: 80%;
  width: 100%;
  background-color: #f2f2f2;
}

.empty_verified_client_list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 79%;
  width: 100%;
  border-top: 1px solid white;
  background-color: #ffffff00;
}
.empty_transaction_history_list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 79%;
  width: 100%;
  border-top: 1px solid white;
  background-color: #ffffff00;
}

.empty_transaction_history_list span {
  font-weight: bold;
  color: #00000070;
}
.empty_verified_client_list span {
  font-weight: bold;
  color: #00000070;
}
.verified_client_container {
  height: 80%;
  width: 100%;
  background-color: #f2f2f2;
}

.billing_container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 80%;
  width: 100%;
  background-color: #f2f2f2;
}

.user_profile_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 80%;
  width: 100%;
  background-color: #ffffff;
}
.user_company_credentials {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 80%;
  width: 100%;
  background-color: #ffffff;
}
.company_credentials_row {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.approved_loan_detail_container_ {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.approved_loan_detail_container__ {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.date_pending {
  margin-right: 10px;
}

.pending_pop_pending {
  color: rgb(0, 0, 0);
}

.pending_pop_pending:hover {
  cursor: pointer;
  font-size: 30px;
}
.approved_loan_detail_container_left {
  border-left: 1px solid black;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.approved_loan_detail_container {
  border-right: 1px solid black;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.row_user_credentials {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.user_credentials {
  background-color: #ffffff;
  height: 30%;
  width: 100%;
}

.title_user_credentials {
  margin-left: 10px;
  color: #000000b2;
  font-weight: bold;
  font-size: 13px;
}
.title_user_credentials_ {
  margin-left: 5px;

  color: #000000c4;
  font-weight: bold;
  font-size: 13px;
}
.user_company_credentials {
  border-top: 1px solid rgba(0, 0, 0, 0.192);
  background-color: #ffffff;
  height: 69%;
  width: 100%;
}
.empty_user_company_credentials {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.192);
  background-color: #ffffff;
  height: 69%;
  width: 100%;
}

#empty_company_title {
  margin-top: 5px;
  font-weight: bold;
  font-size: 13px;
  color: #00000075;
}

#create_company_pop {
  border: 0;
  border-radius: 15px;
  margin-top: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: blue;
  color: rgba(255, 255, 255, 0.801);
}
.cashpayments_content_holder {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}

.cash_payments_title {
  color: rgba(0, 0, 0, 0.197);
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 10px;

  color: rgba(0, 0, 0, 0.465);
}
.transaction_row_pending_loans {
  padding-left: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgba(255, 217, 0, 0.377);
}

.transaction_row_approved_loans {
  padding-left: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgba(0, 128, 0, 0.459);
}

.approved_loans_list_row {
  border-bottom: 1px solid black;
  height: 5%;
  width: 98%;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.approved_loans_list_row_content_holder {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 90%;
  width: 100%;
}
.approved_loans_header {
  height: 10%;
  width: 99.9%;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgba(0, 128, 0, 0.459);
}

.rejected_loans_header {
  height: 10%;
  width: 99.9%;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgb(0, 132, 255);
}
.default_loans_header {
  height: 10%;
  width: 99.9%;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgb(255, 0, 0);
}
.pending_loans_header {
  height: 10%;
  width: 99.9%;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.514);
}

.rejected_loans_list_container {
  width: 100%;
  height: 60%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.default_loans_list_container {
  width: 100%;
  height: 60%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.approved_loans_list_container {
  width: 100%;
  height: 60%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pending_loans_list_container {
  width: 100%;
  height: 60%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

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

.icon_loading_default_loan {
  animation-name: spin;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#loan_setting_loading {
  animation-name: spin;
  animation-duration: 300ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.icon_loading_rejected_loan {
  animation-name: spin;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.icon_loading_pending_loan {
  animation-name: spin;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.icon_loading_approved_loan {
  animation-name: spin;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.transaction_row_rejected_loans {
  padding-left: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgba(255, 0, 0, 0.507);
}

.transaction_row_default_loans {
  padding-left: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgb(0, 241, 229);
}

.transaction_container_ {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 70%;
}
.time_container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-content: center;
  width: 30%;
  padding-right: 10px;
}
.time_container span {
  color: rgba(0, 0, 0, 0.318);
  font-size: 13px;
  font-weight: bold;
}
.name_transaction {
  font-size: 14px;
  margin-right: 15px;
}
.approved_loans_header_title {
  font-size: 14px;
  margin-right: 15px;

  font-weight: bold;
}

.amount_transaction {
  font-size: 14px;
  font-weight: bold;
}
.mobile_payment_content_holder_ {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 95%;
  width: 49%;
}
.mobile_payment_content_holder {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}

.row_user_detains_content_holder {
  margin-bottom: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgba(149, 145, 145, 0.271);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.row_user_detains_content_holder:hover {
  background-color: rgba(149, 145, 145, 0.6);
}
.row_user {
  padding: 7px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.row_user {
  color: rgba(0, 0, 0, 0.76);
}
.full_names_user {
  font-weight: bold;
  color: black;
  margin-left: 5px;
}
.user_phone_number {
  color: black;
  margin-left: 5px;
}

.employee_sub_titles {
  font-weight: bold;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.692);
  margin-left: 3px;
}
.employee_titles {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.726);
  margin-left: 5px;
}

.Employee_Status {
  border-radius: 2px;
  color: #ffffff;
  margin-left: 5px;
  background-color: green;
  font-size: 12px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  padding-right: 3px;
}

.icon_user_section {
  cursor: pointer;
  background-color: #f2f2f2;
  padding: 10px;
  margin-right: 10px;
}

.icon_user_section_flagged {
  /* background-color: #f2f2f2; */
  padding: 10px;
  margin-right: 10px;
}
.user_dialog {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);

  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.add_company_dialog {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);

  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.divices_dialog {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);

  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.add_loan_dialog {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);

  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.stepper_indicator {
  font-size: 13px;
  margin-top: 1%;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 10%;
  width: 100%;
}

.divider {
  border-bottom: 1px solid black;
  width: 20%;
}
.stepper_stage {
  margin-left: 1%;
  margin-right: 1%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.client_inputs {
  margin-top: 10%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 70%;
  width: 100%;
}

.client_inputs_text_input {
  border: 1px solid black;
   display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 10%;
  width: 95%;
  margin-bottom: 5px;
}
.client_inputs_text_input select{
  border: 0;

width: 99%;

}
.button_container_ {
margin-bottom: 1%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 96%;
  height: 10%;
}
.previous_button_loan_add{
border: 1px solid rgba(0, 0, 0, 0.582);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
 
  width: 45%;
  height: 100%;
}
.next_button_loan_add {
  color: rgba(255, 255, 255, 0.678);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: blue;
  width: 45%;
  height: 100%;
}
.add_loan_dialog_content_holder {
  padding-bottom: 2%;
  padding-top:  2%;
  border-radius: 5px;
  background-color: white;
  height: 65%;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.previous_button_loan_add:hover{
cursor: pointer;
}
.next_button_loan_add:hover{
cursor: pointer;
}
.divices_dialog_content_holder {
  border-radius: 5px;
  background-color: white;
  height: 50%;
  width: 40%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.downloadable_window {
  font-size: 12px;
  border-radius: 10px;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.699);
  background-color: rgba(0, 0, 255, 0.26);
  height: 40%;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.downloadable_window span {
  margin-bottom: 9px;
}

.verified_client_dialog {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);

  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add_transaction_dialog {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);

  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.edit_verified_client_dialog {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);

  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pending_loan_dialog {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);

  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.money_transfer_dialog {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);

  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pending_loan_dialog_dialog_content_holder {
  width: 35%;
  height: 74%;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.section_active_pending_loan {
  margin-top: 7%;
  width: 90%;
  height: 10%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.client_section:hover {
  cursor: pointer;
}
.next_of_kin_section:hover {
  cursor: pointer;
}
.client_section {
  height: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 40%;
  border-bottom: 2px solid #0000006e;
}

.next_of_kin_section {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 40%;
}
.next_of_kin_section span {
  font-weight: bold;
  color: #00000096;
}

.client_section span {
  font-weight: bold;
  color: #00000096;
}

.client_details_container {
  width: 90%;
}
.next_of_kin_details_container {
  width: 90%;
}
#hide_pending_loan_dialog_button {
  height: 40%;
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
#hide_pending_loan_dialog_button span {
  font-size: 14px;
}
.money_transfer_dialog_content_holder {
  width: 35%;
  height: 40%;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading_icon_name_fetching {
  border-radius: 30px;
  width: 30px;
  height: 30px;
  color: #000000;

  animation-name: spin;
  animation-duration: 700ms;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.current_account_title {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: 20%;
  width: 90%;
}
.pending_loan_id_container {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: 10%;
  width: 90%;
}
.pending_loan_id_container span {
  margin-top: 5px;
  font-size: 12px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.396);
}
.pending_loan_accounting {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #00000017;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 50%;
  width: 90%;
}
.current_account_title_ {
  margin-left: 2px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: 15%;
  width: 90%;
}

.pending_loan_title {
  font-size: 13px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.575);
}

.pending_loan_sub_title {
  margin-left: 5px;
  font-size: 13px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.829);
}
.current_account_title span {
  margin-top: 5px;
  font-size: 12px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.396);
}
.current_account_content_holder {
  padding-left: 4%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: 15%;
  width: 90%;
}
.current_account_amount {
  margin-left: 5px;
  font-size: 25px;
  font-weight: bold;
}

.current_account_inputs {
  display: flex;
  border: 1px solid black;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-radius: 20px;
  margin-right: 5px;
  margin-bottom: 5px;
  width: 85%;
}
.transfer_phone_number_input {
  border: 0;

  width: 90%;
}

.transfer_phone_number_input:focus {
  outline: none;

  width: 90%;
}

.caution_dialog {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);

  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.edit_employee_dialog {
  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.course_dialog {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);

  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.invoice_dialog {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);

  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.create_company_dialog {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);

  /* background-image: url("../images/Picsart_23-07-30_21-26-54-881.png"); */
  background-color: #00000079;
  background-size: 45%;
  background-position-x: left;
  background-repeat: no-repeat;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.name_content_holder {
  margin-top: 15px;
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 6px;
}
.sign_up_names_container {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 7px;
}
.sign_up_details_input {
  margin-bottom: 5px;
  width: 87%;
  border: 0;
  background-color: rgb(207, 199, 199);
  border-radius: 20px;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.name_inputs {
  width: 45%;
  border: 0;
  background-color: rgb(207, 199, 199);
  border-radius: 20px;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.invoice_inputs {
  width: 45%;
  border: 0;
  background-color: rgb(207, 199, 199);
  border-radius: 20px;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.invoice_phone_number_container {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 6px;
}
.invoice_inputs_phone_number {
  width: 96%;
  border: 0;
  background-color: rgb(207, 199, 199);
  border-radius: 20px;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
  margin-bottom: 5px;
}

.invoice_details_container {
  border-radius: 5px;
  padding-top: 10px;
  padding-right: 5px;
  padding-left: 5px;
  background-color: rgb(207, 199, 199);
  width: 90%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: 6px;
}

.add_to_invoice_container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.add_to_invoice_container span {
  font-size: 14px;
  font-weight: bold;
  margin-right: 5px;
}
.employee_dialog_content_holder {
  width: 500px;
  height: 80%;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.add_transaction_dialog_content_holder {
  padding-top: 20px;
  width: 500px;
  height: 480px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.verified_client_dialog_content_holder {
  width: 500px;
  height: 420px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.edit_verified_client_dialog_content_holder {
  width: 500px;
  height: 480px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.edit_employee_dialog_content_holder {
  width: 40%;
  height: 50%;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.suspension_active_container {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  height: 10%;
}
.active_or_suspended span {
  color: grey;
  font-weight: bold;
  font-size: 15px;
}
.active_or_suspended {
  border-radius: 2px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: rgba(0, 0, 31, 0.11);
  width: 38%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.edit_employee_inout_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90%;
}
.edit_employee_names {
  width: 90%;
  height: 10%;
  margin-bottom: 3px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.edit_employee_ {
  height: 90%;
  width: 48%;
}
.edit_employee__ {
  margin-bottom: 5px;
  height: 10%;
  width: 88.5%;
}
#delete_employee:hover {
  cursor: pointer;
}
.update_button_edit_employee {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: #000000;

  margin-top: 15px;
  height: 13%;
  width: 90%;
}
.caution_dialog_content_holder span {
  color: rgba(0, 0, 0, 0.568);
  margin-bottom: 5px;
  font-weight: bold;
}
.invoice_dialog_content_holder {
  width: 500px;
  height: 450px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.create_company_inputs_ {
  margin-top: 6%;
  width: 85%;
  border: 0;
  background-color: rgb(207, 199, 199);
  border-radius: 20px;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
  margin-bottom: 5px;
}
.create_company_inputs {
  width: 86%;
  border: 0;
  background-color: rgb(207, 199, 199);
  border-radius: 20px;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
  margin-bottom: 5px;
}
.create_company_dialog_content_holder {
  width: 400px;
  height: 250px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.credential_content_holder {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 6px;
}
.course_content_holder {
  margin-top: 40px;

  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
}

.course_inputs {
  color: black;
  width: 95%;
  border: 0;
  background-color: rgb(207, 199, 199);
  border-radius: 20px;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
  margin-bottom: 6px;
}
.arrow_up_down {
  margin-top: 15px;
  margin-bottom: 15px;
}
.course_inputs_ {
  margin-top: 5px;
  width: 95%;
  border: 1px solid white;
  background-color: rgb(207, 199, 199);
  border-radius: 20px;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
  margin-bottom: 6px;
}

.course_inputs::placeholder {
  color: black;
}
.course_inputs_description {
  border: 0;
  background-color: rgb(207, 199, 199);
  border-radius: 2px;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
  margin-bottom: 6px;
}

.invoice_content_holder {
  margin-top: 50px;
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 6px;
}
.invoice_details_content_holder {
  width: 98%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}
.invoice_results {
  margin-right: 5px;
  margin-top: 5px;
  width: 100%;
  height: 90%;
  background-color: white;
}
.credential_inputs {
  border: 0;
  background-color: rgb(207, 199, 199);
  border-radius: 20px;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
  margin-bottom: 6px;
}

.add_transaction_id_input {
  border: 0;
  background-color: rgb(207, 199, 199);
  border-radius: 10x;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
  margin-bottom: 6px;
}
.add_transaction_Amount_input {
  border: 0;
  background-color: rgb(207, 199, 199);
  border-radius: 20px;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
  margin-bottom: 6px;
  margin-top: 10px;
}
.transaction_type_container {
  margin-top: 10px;
  background-color: rgba(207, 199, 199, 0.429);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 5px;
  width: 95%;
  padding: 10px;
  margin-bottom: 5px;
}
.transaction_type_container select {
  margin-top: 5px;
  background-color: rgb(196, 192, 192);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 5px;
  width: 100%;
  padding: 10px;
  margin-bottom: 5px;
  color: rgba(0, 0, 0, 0.705);
}

.reset_password_back_container {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.loading_icon_add_transaction {
  display: block;
}
.checkmark_add_transaction {
  display: block;
}
.genre {
  margin-top: 20px;
  background-color: rgba(207, 199, 199, 0.429);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 5px;
  width: 95%;
  padding: 10px;
  margin-bottom: 5px;
}
.genre select {
  margin-top: 5px;
  background-color: rgb(196, 192, 192);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 5px;
  width: 100%;
  padding: 10px;
  margin-bottom: 5px;
  color: rgba(0, 0, 0, 0.705);
}
.gender {
  color: gray;
}

.edit_employee_gender_container {
  margin-bottom: 5px;
  margin-top: 5px;
  background-color: rgba(0, 0, 0, 0.137);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 15%;
  width: 90%;
}

.edit_employee_gender_container select {
  padding: 0;
  border: 0;
  background-color: transparent;
  width: 99%;
}
.edit_employee_gender_container span {
  margin-left: 3px;
  font-size: 13px;
  margin-bottom: 3px;
}

.status_row {
  border-bottom: 2 solid black;
  margin-top: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 98%;

  height: 20%;

  background-color: #f2f2f2;
}
.status_row span {
  color: #f2f2f2;
  font-size: 12px;
}
.status_columns {
  background-color: blue;
  margin-right: 5px;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.status_columns_suspended {
  background-color: red;
  color: black;

  margin-right: 5px;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.user_names_client {
  width: 95%;
}
.details_row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 5px;
}
.details_row span {
  font-size: 12px;
  color: black;
  padding-left: 5px;
}
.user_financial_account_client {
  width: 92%;
}

.details_column_finance {
  width: 100%;
  padding-left: 5px;
}
#current_account {
  font-size: 42px;
}
.alternative_financial_accounts {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 5px;
}
.alternative_financial_accounts span {
  font-size: 12px;
  padding-bottom: 5px;
}

.transaction_button_holder {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
  margin-bottom: 20px;

  margin-top: 10px;
}
.button_holder {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
  margin-bottom: 20px;
}

.money_transfer_button_holder {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
  margin-bottom: 20px;
}
.button_container {
  width: 90%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}
.button_content_holder {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  padding-top: 7px;
  margin-bottom: 7px;
  border: 0;
  padding-bottom: 7px;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 20px;
  background-color: rgba(6, 126, 52, 0.521);
  color: rgba(255, 255, 255, 0.39);
}
.button_content_holder_create_company {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  padding-top: 7px;
  margin-bottom: 7px;
  border: 0;
  padding-bottom: 7px;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 20px;
  background-color: rgba(6, 126, 52, 0.521);
  color: rgba(255, 255, 255, 0.39);
}

.button_content_holder_cancel_create_company {
  width: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  padding-top: 7px;
  margin-bottom: 7px;
  border: 0;
  padding-bottom: 7px;
  padding-left: 3px;
  padding-right: 3px;
  cursor: pointer;
  border-radius: 20px;
  background-color: rgb(126, 6, 6);
  color: rgba(255, 255, 255, 0.39);
}
.button_content_holder_cancel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  padding-top: 7px;
  margin-bottom: 7px;
  border: 0;
  padding-bottom: 7px;
  padding-left: 3px;
  padding-right: 3px;
  cursor: pointer;
  border-radius: 20px;
  background-color: rgb(126, 6, 6);
  color: rgba(255, 255, 255, 0.39);
}
.loading_icon_send_invoice {
  margin-left: 5px;
  animation: spin 1s linear infinite;
}
#cancel_invoice {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.568);
  border: 0;
  background-color: transparent;
}
#send_invoice {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.568);
  border: 0;
  background-color: transparent;
}
#create_company {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.568);
  border: 0;
  background-color: transparent;
}
#create_company_button {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.568);
  border: 0;
  background-color: transparent;
}
.add_transaction_button {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  padding-top: 7px;
  margin-bottom: 7px;
  border: 0;
  padding-bottom: 7px;
  width: 100%;
  border-radius: 20px;
  background-color: #00000085;
  color: #ffffff63;
}
.submit_button_container {
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  padding-top: 7px;
  margin-bottom: 7px;
  border: 0;
  padding-bottom: 7px;
  width: 90%;
  border-radius: 20px;
  background-color: #00000085;
  color: #ffffff63;
}
.cancel_REJECT_LOAN_BUTTON {
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  padding-top: 7px;
  margin-bottom: 7px;
  border: 0;
  padding-bottom: 7px;
  width: 90%;
  border-radius: 20px;
  background-color: #000000fd;
  color: #ffffff9c;
}

.money_transfer_button_final {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  padding-top: 5px;
  margin-bottom: 7px;
  border: 0;
  padding-bottom: 5px;
  width: 90%;
  border-radius: 20px;
  background-color: #00000085;
  color: #ffffff63;
}
.submit_button_container span {
  margin-left: 5px;
}

.add_transaction_cancel_button {
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  padding-top: 10px;
  border: 0;
  padding-bottom: 10px;
  width: 100%;
  border-radius: 20px;
  background-color: black;
  color: rgba(255, 255, 255, 0.767);
}

.cancel_button {
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  padding-top: 10px;
  border: 0;
  padding-bottom: 10px;
  width: 90%;
  border-radius: 20px;
  background-color: black;
  color: rgba(255, 255, 255, 0.767);
}
.edit_Suspend_button_verified_client {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  padding-top: 10px;
  border: 0;
  padding-bottom: 10px;
  width: 90%;
  border-radius: 20px;
  background-color: #a10000;
  color: rgba(255, 255, 255, 0.767);
  margin-top: 5px;
  margin-bottom: 5px;
}

.transaction_text_title {
  color: rgba(0, 0, 0, 0.863);
}
.subtitle {
  color: black;

  font-weight: bold;
}
.transaction_text_title_date {
  color: rgba(0, 0, 0, 0.589);
  font-size: 13px;
}

.row_3 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  height: 70%;
  width: 100%;
}

.row_3 span {
  font-size: 24px;
  color: grey;
}
@keyframes pulse {
  from {
    transform: scale(0.2);
  }

  to {
    transaform: scale(1);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.interest_container {
  margin-top: 20px;
  background-color: rgba(207, 199, 199, 0.137);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 5px;
  width: 99%;
  padding-left: 1%;

  margin-bottom: 5px;
}

.interest_charge {
  margin-top: 5px;
  background-color: rgb(196, 192, 192);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 5px;
  width: 98%;
  padding: 10px;
  margin-bottom: 5px;
  color: rgba(0, 0, 0, 0.705);
}

.interest_container_ {
  margin-top: 5px;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  border-radius: 5px;
  width: 98%;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.705);
}

.save_changes_button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 9px;
  font-size: 18px;
  border-radius: 5px;
  width: 17%;
  background-color: blue;
  color: rgba(255, 255, 255, 0.774);

  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
}

.cancel_loan_settings {
  border: 1px solid black;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 9px;
  font-size: 18px;
  border-radius: 5px;
  width: 17%;
  background-color: transparent;
  color: rgba(0, 0, 0, 0.774);

  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
}
.loan_setting_titles_ {
  font-size: 16px;
  margin-bottom: 2px;
  color: rgba(0, 0, 0, 0.514);
}
.loan_setting_titles {
  font-weight: bold;
  margin-bottom: 2px;
  color: rgba(0, 0, 0, 0.671);
}

.withdraws_and_deposits {
  background-color: #f1f1f1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-bottom: 10px;
}
.withdraws_and_deposits_ {
  margin-top: 2%;

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.withdraws_and_deposits_ span {
  font-size: 20px;
  font-weight: bold;
  color: #00000067;
}

.deposit_withdraws_and_deposits {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-left: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 30%;
  color: #ffffffb4;
  background-color: green;
}

.transfer_withdraws_and_deposits {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-left: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 30%;
  color: #ffffffb4;
  background-color: red;
}

.transaction_history_list_container {
  overflow-x: auto;
  width: 100%;
  background-color: white;

  margin-top: 4px;
  height: 78%;
}
.transaction_details_container {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
  width: 100%;
  background-color: rgba(177, 177, 177, 0.349);
  height: 38%;
}

.transaction_contents {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.transaction_contents_row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.transaction_contents_row span {
  margin-bottom: 10px;
  margin-left: 5px;
}
.account_type {
  margin-right: 5px;
}

.account_type_in span {
  font-size: 10px;
  border-radius: 3px;
  font-weight: bold;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 11px;
  padding-left: 11px;
  color: #ffffffb6;
  background-color: green;
  margin-right: 5px;
}

.account_type_out span {
  font-weight: bold;
  font-size: 10px;
  border-radius: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 5px;
  padding-left: 5px;
  color: #ffffffb6;
  background-color: red;
  margin-right: 5px;
}

.transaction_title {
  font-size: 14px;
  font-weight: bold;
  color: #0000006b;
}

.transaction_title_ {
  margin-left: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #000000a6;
}
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #000000; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 3px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 17; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  top: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: 30px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    top: 30px;
    opacity: 1;
  }
  to {
    top: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    top: 30px;
    opacity: 1;
  }
  to {
    top: 0;
    opacity: 0;
  }
}

.yeah_subscription_container {
  background-color: #00000007;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 40%;
  width: 100%;
}
.yeah_subscription_container span {
  color: #0000005e;
  font-weight: bold;
  margin-left: 10px;
}
.months_paid_container {
  padding-bottom: 3px;
  background-color: #00000007;
  height: 60%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-end;
}

.month_sub_status_paid {
  font-weight: bold;

  font-size: 12px;
  margin-left: 5px;
  border-radius: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 5px;
  color: #ffffffd5;
  background-color: green;
}
.month_sub_status_unpaid {
  font-weight: bold;

  font-size: 12px;
  margin-left: 5px;
  border-radius: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 5px;
  color: #ffffffd5;
  background-color: red;
}

.month_sub_status_title {
  margin-right: 2px;
  font-size: 12px;
  color: #0000008a;
  font-weight: bold;
}

.subscription_content_holder {
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  background-color: #00000007;
  height: 20%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.subscription_month {
  margin-bottom: 3px;
  border-radius: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  width: 7.8%;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.load_loan_settings_save_button {
  animation-name: spin;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.spinning_animation {
  animation-name: spin;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.slidecontainer {
  margin-top: 20px;

  margin-bottom: 10px;
  background-color: #00000011;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%; /* Width of the outside container */
}
.credit_score_title_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.credit_score_title_container span {
  margin-left: 2%;
  color: #00000096;
  font-size: 13px;
  font-weight: bold;
}
/* The slider itself */
.slider {
  -webkit-appearance: none; /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
  transition: opacity 0.2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04aa6d; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04aa6d; /* Green background */
  cursor: pointer; /* Cursor on hover */
}
.billing_options_container {
  margin-top: 10%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  height: 30%;
}

.billing_options_payment {
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  background-color: blue;
  color: #ffffffb4;
  width: 45%;
  height: 50%;
}

#December_sub_status {
  color: green;
}

.employee_permission_container {
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.788);
  background-color: blue;
  width: 100%;
}
.employee_permission_container label {
  font-size: 14px;
}

#employee_permission_title {
  margin-left: 5px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.61);
  font-size: 13px;
}

.TRANSACTION_SECTION {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.548);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.transaction_section_content_holder {
  border-radius: 5px;

  width: 35%;
  height: 50%;
  background-color: rgb(247, 247, 247);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.Transfer_Medium_Container {
  margin-bottom: 5px;
  width: 93%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.text_inputs_ {
  margin-bottom: 5px;
  width: 90%;
  height: 16%;
}
.text_inputs__ {
  border: 0;
  background-color: white;

  width: 95%;
  height: 90%;
}

.phone_number_and_loading_icon_container {
  border: 1px solid black;

  padding-top: 3px;
  padding-bottom: 3px;
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 91%;
  height: 15%;
}
.LOAN_SUBMIT_BUTTON {
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: blue;
  margin-top: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 92%;
}

.CANCEL_TRANSACTION_BUTTON {
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: black;
  margin-top: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 92%;
}

.Transfer_Medium_Container {
  margin-bottom: 5px;
  width: 93%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.fetched_name {
  margin-bottom: 10px;
  color: #000000ad;
  font-weight: bold;
}

#TRANSACTION_Phone_number:focus {
  outline: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.transaction_message_pop {
  margin-top: 20px;
  font-size: 13px;
  color: #00000059;
}
.signup_input_country {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 5px;
  width: 87%;
  border: 0;
  background-color: rgb(207, 199, 199);
  border-radius: 20px;
  padding-left: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.signup_input_country select {
  border: 0;
  width: 87%;
  background-color: transparent;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 1px;

  bottom: 3px;
  background-color: rgb(0, 0, 0);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #00570c;
}

input:focus + .slider {
  box-shadow: 0 0 1px #01d412;
}

.slider + .slider {
  background-color: rgb(0, 0, 0);
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#Add_Loan {
  border-radius: 3px;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 13px;
  color: white;
  background-color: #000000;
}

#Add_Loan:hover {
  border: 1px solid white;
  background-color: #000000af;
}