* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  max-width: 2000px;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

input,
button,
select,
textarea {
  border: none;
  background: transparent;
  font-family: "Outfit", sans-serif;
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: "Outfit", sans-serif;
}

.input_cont {
  border-radius: 100px;
  border: 1px solid var(--Gray-300, #d0d5dd);
  background: var(--White, #fff);
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  display: flex;
  padding: 10px 14px 10px 20px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.input_cont input,
.input_cont input::placeholder {
  color: var(--Gray-400, #98a2b3);
  font-family: Outfit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  width: 100%;
}

.text_cont {
  border-radius: 12px;
  border: 1px solid var(--Gray-300, #d0d5dd);
  background: var(--White, #fff);
  padding: 12px 16px;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.text_cont textarea {
  color: var(--Gray-400, #98a2b3);
  font-family: Outfit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  resize: none;
  height: 100px;
  width: 100%;
}

.text_cont textarea::placeholder {
  color: var(--Gray-400, #98a2b3);
  font-family: Outfit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
}

.text_area_wc p {
  color: var(--Gray-500, #667085);
  font-family: Outfit;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
}

.btn_cont {
  display: flex;
  padding: 12px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  /* flex: 1 0 0; */
  border-radius: 100px;
  border: 1px solid var(--Brand-Azure-Blue-500, #1d72db);
  background: var(--Brand-Azure-Blue-500, #1d72db);
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  cursor: pointer;
}

.btn_cont_small {
  padding: 8px 14px;
}

.btn_otp_cont {
  display: flex;
  padding: 12px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  border-radius: 100px;
  border: 1px solid var(--Brand-Azure-Blue-500, #1d72db);
  background: var(--Brand-Azure-Blue-500, #1d72db);
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  cursor: pointer;
}

.btn {
  color: var(--White, #fff);
  font-family: Outfit;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
}

.btn_trans_cont {
  display: flex;
  padding: 12px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  /* flex: 1 0 0; */
  border-radius: 100px;
  border: 1px solid var(--Brand-Azure-Blue-50, #e8f1fb);
  background: var(--Brand-Azure-Blue-50, #e8f1fb);
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  cursor: pointer;
  align-items: center;
  gap: 8px;
}

.btn_trans {
  color: var(--Brand-Azure-Blue-500, #1d72db);
  font-family: Outfit;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  /* 150% */
  cursor: pointer;
}

.btn_cont_black {
  display: flex;
  padding: 12px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  /* flex: 1 0 0; */
  border-radius: 100px;
  border: 1px solid var(--Gray-300, #d0d5dd);
  background: var(--White, #fff);

  /* Shadow/xs */
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  cursor: pointer;
  align-items: center;
  gap: 8px;
}

.btn_black {
  color: var(--Gray-700, #344054);
  font-family: Outfit;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  /* 150% */
  cursor: pointer;
}

.overlay {
  background: var(--Gray-400, #98a2b3);
  width: 100%;
  height: 100vh;
  z-index: 3;
  position: fixed;
  top: 0;
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.btn_red {
  border: 1px solid var(--Error-600, #d92d20);
  background: var(--Error-600, #d92d20);
  color: white;
}

.text_white {
  color: white !important;
}

.opacity {
  opacity: 0.4;
}

.block {
  display: block !important;
}

.none {
  display: none !important;
}

.flex {
  display: flex !important;
}

.toast_cont {
  border-radius: 12px;
  display: flex;
  padding: 8px 12px;
  gap: 8px;
  align-self: stretch;
}

.toast_cont i {
  font-size: 16px;
}

.toast_text h4 {
  font-family: "Zilla Slab";
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  line-height: 18px;
  /* 150% */
}

.toast_text p {
  font-family: "Zilla Slab";
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 18px;
  /* 150% */
}

.warn_toast {
  border: 1px solid var(--Warning-400, #fdb022);
  background: var(--Warning-50, #fffaeb);
}

.warn_toast i,
.warn_toast_text h4,
.warn_toast_text p {
  color: #f79009;
}

.error_toast {
  border: 1px solid var(--Error-500, #f04438);
  background: var(--Error-50, #fef3f2);
}

.error_toast i,
.error_toast_text h4,
.error_toast_text p {
  color: #d92d20;
}

.black_toast {
  border: 1px solid var(--Brand-Prussian-Blue-400, #3d496a);
  background: var(--Brand-Prussian-Blue-50, #e7e8ec);
}

.black_toast i,
.black_toast_text h4,
.black_toast_text p {
  color: #0d1c45;
}

.blue_toast {
  border: 1px solid var(--Brand-Azure-Blue-400, #4a8ee2);
  background: var(--Brand-Azure-Blue-50, #e8f1fb);
}

.blue_toast i,
.blue_toast_text h4,
.blue_toast_text p {
  color: #1d72db;
}

.gray_toast {
  border-radius: 12px;
  border: 1px solid var(--Gray-400, #98a2b3);
  background: var(--Gray-50, #f9fafb);
}

.gray_toast i,
.gray_toast_text h4,
.gray_toast_text p {
  color: #667085;
}

.each_legend {
  display: flex;
  align-items: center !important;
  gap: 8px;
  /* border: 1px solid red; */
}

.each_legend p {
  color: var(--Gray-500, #667085);
  font-family: Outfit;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  /* padding-top: 8px; */
  /* line-height: 20px;  */
  /* border: 1px solid red; */
}

.legend_color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.empty_state {
  display: flex;
  flex-direction: column;
  /* border: 1px solid red; */
  width: 100%;
}

.empty_state .icon {
  /* border: 1px solid red; */
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 16px;
}

.empty_state .icon i {
  font-size: 52px;
  color: #667085;
}

.empty_state h3 {
  color: var(--Gray-600, #475467);
  text-align: center;
  font-family: Outfit;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  /* 155.556% */
}

.empty_state p {
  color: var(--Gray-500, #667085);
  text-align: center;
  font-family: Outfit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.small_btn_cont {
  padding: 8px 14px;
  /* border: 2px solid red; */
  width: fit-content;
}

.small_btn {
  font-size: 14px;
  /* border: 2px solid red; */
}

.btn_50 {
  width: 50%;
}
.btn_40 {
  width: 40%;
}
.btn_60 {
  width: 60%;
}
.btn_30 {
  width: 30%;
}
.btn_70 {
  width: 70%;
}

.btn_100 {
  width: 100%;
}
.w_100{
  width: 100% !important;
}

.green {
  color: var(--Success-500, #12b76a) !important;
  border-radius: 16px !important;
  background: var(--Success-50, #ecfdf3) !important;
  width: fit-content !important;
}

.gray {
  color: var(--Success-500, #667085) !important;
  border-radius: 16px !important;
  background: var(--Gray-50, #f9fafb) !important;
  width: fit-content !important;
}
.gray_black {
  color: var(--Success-500, #0D1C45) !important;
  border-radius: 16px !important;
  background: var(--Gray-50, #E7E8EC) !important;
  width: fit-content !important;
}

.red {
  color: var(--Error-600, #d92d20) !important;
  border-radius: 16px !important;
  background: var(--Error-50, #fef3f2) !important;
  width: fit-content !important;
}

.yellow {
  color: var(--Warning-500, #f79009) !important;
  border-radius: 16px !important;
  background: var(--Warning-50, #fffaeb) !important;
  width: fit-content !important;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.desk_hide {
  display: none;
}

/* table tbody tr td:nth-child(2) {
  color: var(--Gray-900, #101828);
  font-family: Outfit;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
} */
.light_text table tbody tr td:nth-child(2) {
  color: var(--Gray-900, #667085);
  font-family: Outfit;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.status_text_file {
  text-align: center;
  font-family: Outfit;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
  /* max-width: 120px !important; */
  /* border: 3px solid red; */
}
.red_dot_not{
    /* display: none; */
}

.overlay_card {
  width: 23%;
  /* border: 2px solid red; */
  display: flex;
  padding: 24px;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--White, #fff);
  box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08),
    0 8px 8px -4px rgba(16, 24, 40, 0.03);
  z-index: 3;
}
.overlay_card img {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
}
.overlay_card h3 {
  color: var(--Gray-900, #101828);
  font-family: Outfit;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}
.overlay_card p {
  color: var(--Gray-500, #667085);
  font-family: Outfit;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}
.overlay_btn {
  width: 100%;
}




@media (max-width: 900px) {
  .desk_hide {
    display: flex;
  }

  .dets_style {
    color: var(--Brand-Azure-Blue-500, #1d72db) !important;
    font-family: Outfit !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    /* 142.857% */
  }
  .mobile_side_menu{
    z-index: 10;
  }
  .overlay_card {
    width: 90%;
  }
}