@font-face {
  font-family: "Noto";
  src: url("../fonts/NotoSans/NotoSans-Regular.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/NotoSans/NotoSans-Regular.woff2") format("woff2"),
    url("../fonts/NotoSans/NotoSans-Regular.woff") format("woff"),
    url("../fonts/NotoSans/NotoSans-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* برای نمایش سریع‌تر فونت قبل از لود کامل */
}

@font-face {
  font-family: "Vazir";
  src: url("../fonts/Vazirmatn/Vazirmatn-Regular.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/Vazirmatn/Vazirmatn-Regular.woff2") format("woff2"),
    url("../fonts/Vazirmatn/Vazirmatn-Regular.woff") format("woff"),
    url("../fonts/Vazirmatn/Vazirmatn-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* برای نمایش سریع‌تر فونت قبل از لود کامل */
}


:root {
  --bodyColor: "#30414c";
}

html {
  scroll-behavior: smooth;
  margin: 0px;
  padding: 0px;
  scrollbar-width: none !important;
}

body {
  background-color: var(--bodyColor);
  margin: 0px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Roboto", "Arial", sans-serif;
}

code {
  font-family: "Roboto", "Arial", sans-serif;
}

* {
  box-sizing: border-box;
  text-decoration: none !important;
  outline: none;
}

a {
  text-decoration: none !important;
}

i {
  font-style: normal !important;
}

/*---------------------- Neutral Text Colors --------------------------*/

.text-N0 {
  color: #ffffff !important;
}
.text-N10 {
  color: #fbfbfb;
}
.text-N20 {
  color: #f7f7f8;
}
.text-N30-bg-light-mode {
  color: #eef0f1;
}
.text-N40 {
  color: #e4e6e8;
}
.text-N50 {
  color: #cbd0d2;
}
.text-N60 {
  color: #bfc4c8;
}
.text-N70 {
  color: #b4bbbf;
}
.text-N80 {
  color: #a8afb4;
}
.text-N90 {
  color: #9ca4a9;
}
.text-N100 {
  color: #8f989e;
}
.text-N200 {
  color: #838d94;
}
.text-N300 {
  color: #768289;
}
.text-N400 {
  color: #6c7880;
}
.text-N500 {
  color: #606d75;
}
.text-N600 {
  color: #55636c;
}
.text-N700 {
  color: #475660;
}
.text-N800 {
  color: #3a4b55 !important;
}
.text-N900-main {
  color: #30414c;
}

/*---------------------- Neutral Background Colors --------------------------*/

.bg-N0 {
  background-color: #ffffff !important;
}
.bg-N10 {
  background-color: #fbfbfb;
}
.bg-N20 {
  background-color: #f7f7f8;
}
.bg-N30 {
  background-color: #eef0f1;
}
.bg-N40 {
  background-color: #e4e6e8;
}
.bg-N50 {
  background-color: #cbd0d2;
}
.bg-N60 {
  background-color: #bfc4c8;
}
.bg-N70 {
  background-color: #b4bbbf;
}
.bg-N80 {
  background-color: #a8afb4;
}
.bg-N90 {
  background-color: #9ca4a9;
}
.bg-N100 {
  background-color: #8f989e;
}
.bg-N200 {
  background-color: #838d94;
}
.bg-N300 {
  background-color: #768289;
}
.bg-N400 {
  background-color: #6c7880;
}
.bg-N500 {
  background-color: #606d75;
}
.bg-N600 {
  background-color: #55636c !important;
}
.bg-N700 {
  background-color: #475660;
}
.bg-N800 {
  background-color: #3a4b55;
}
.bg-N900 {
  background-color: #30414c !important;
}

/*---------------------- Brand Text Colors --------------------------*/

.text-B50 {
  color: #e7ffe4;
}
.text-B100 {
  color: #c9ffc4;
}
.text-B200 {
  color: #98ff90;
}
.text-B300 {
  color: #56ff50;
}
.text-B400 {
  color: #00ff00;
}
.text-B500-main {
  color: #00e606;
}
.text-B600-bg {
  color: #00b809 !important;
}
.text-B700 {
  color: #008b07;
}
.text-B800 {
  color: #076d0d;
}
.text-B900 {
  color: #0b5c11;
}
.text-B950 {
  color: #003406;
}

/*---------------------- Brand Background Colors --------------------------*/

.bg-B50 {
  background-color: #e7ffe4;
}
.bg-B100 {
  background-color: #c9ffc4;
}
.bg-B200 {
  background-color: #98ff90 !important;
}
.bg-B300 {
  background-color: #56ff50 !important;
}
.bg-B400 {
  background-color: #00ff00 !important;
}
.bg-B500-main {
  background-color: #00e606 !important;
}
.bg-B600-bg {
  background-color: #00b809 !important;
}
.bg-B700 {
  background-color: #008b07;
}
.bg-B800 {
  background-color: #076d0d;
}
.bg-B900 {
  background-color: #0b5c11;
}
.bg-B950 {
  background-color: #003406;
}

/*---------------------- Danger Text Colors --------------------------*/

.text-D50 {
  color: #ffe6e6;
}
.text-D75 {
  color: #fd9696;
}
.text-D100 {
  color: #fd6b6b;
}
.text-D200 {
  color: #fc2b2b;
}
.text-D300-main {
  color: #fb0000;
}
.text-D400 {
  color: #b00000;
}
.text-D500 {
  color: #990000;
}

/*---------------------- Danger Background Colors --------------------------*/

.bg-D50 {
  background-color: #ffe6e6;
}
.bg-D75 {
  background-color: #fd9696;
}
.bg-D100 {
  background-color: #fd6b6b;
}
.bg-D200 {
  background-color: #fc2b2b;
}
.bg-D300-main {
  background-color: #fb0000;
}
.bg-D400 {
  background-color: #b00000;
}
.bg-D500 {
  background-color: #990000;
}

.bg-transparent {
  background-color: transparent;
}

/*---------------------- Glass Background Colors --------------------------*/

.bg-glass-dark-mode {
  background-color: #0000005c !important;
}

.bg-glass-light-mode {
  background-color: #ffffff5c !important;
}

.bg-glass-dark-mode-B {
  background-color: #000000d1 !important;
}

.bg-glass-light-mode-B {
  background-color: #ffffffd1 !important;
}

/* -------------------- App Styles---------------------------- */

/* ----------------------- Styles--------------------- */

.App {
  text-align: center;
}

.App-logo {
  height: 30vmin;
  pointer-events: none;
}

.splash-screen-content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fs-body {
  font-size: 16px !important;
}

.fw-light {
  font-weight: 300 !important;
}

.fw-regular {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semiBold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.mb-4px {
  margin-bottom: 4px;
}

.mt-4px {
  margin-top: 4px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mt-8 {
  margin-top: 8px;
}

.ml-8 {
  margin-left: 8px;
}

.mr-8 {
  margin-right: 8px;
}

.mx-8 {
  margin-right: 8px;
  margin-left: 8px;
}

.my-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mt-16 {
  margin-top: 16px;
}

.my-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.mx-16 {
  margin-right: 16px;
  margin-left: 16px;
}

.mb-56 {
  margin-bottom: 56px;
}

.mt-56 {
  margin-top: 16px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mt-24 {
  margin-top: 24px;
}

.mb-40 {
  margin-bottom: 40px;
}

.my-24 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.px-responsive {
  /* This class is for components that have a padding width of 16 pixels by default. Such as cards */
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.px-24 {
  padding-left: 24px;
  padding-right: 24px;
}

.px-32 {
  padding-left: 32px;
  padding-right: 32px;
}

.pb-8 {
  padding-bottom: 8px;
}

.pt-8 {
  padding-top: 8px;
}

.py-16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.pb-16 {
  padding-bottom: 16px;
}

.pt-16 {
  padding-top: 16px;
}

.py-24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.w-100 {
  width: 100%;
}

.h-100vh {
  height: 100vh;
}

.h-72px {
  height: 72px;
}

.h-23vmin {
  height: 23vmin;
}

.round-100 {
  border-color: "#b4bbbf" !important;
  border-radius: 100px !important;
}

.round-10 {
  border-color: "#b4bbbf" !important;
  border-radius: 10px !important;
}

.round-5 {
  border-radius: 5px !important;
  border-color: "#b4bbbf" !important;
}

.border-none {
  border: none;
}

.border-B600 {
  border: 1px solid #00b809;
}

.border-N70 {
  border: 1px solid #b4bbbf !important;
}

.border-right-N70 {
  border-right: 1px solid #b4bbbf;
}

.border-left-N70 {
  border-left: 1px solid #b4bbbf;
}

.bottom-navigation-shadow {
  box-shadow: 0 -4px 8px 0 rgb(0 0 0 / 0.05);
}

.sidebar-shadow {
  box-shadow: 10px 0px 8px -5px rgb(0 0 0 / 0.05),
    -10px 0px 8px -5px rgb(0 0 0 / 0.05);
}

.sticky-shadow {
  box-shadow: 0 4px 6px #b0b0b0;
}

.cursor-default {
  cursor: default !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.fab-position {
  bottom: 120px;
}

/* <--------------------------------------------- Media Queries-----------------------------------------------------> */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .fab-position {
    bottom: 135px;
  }

  .avatar-position-in-header {
    position: absolute;
    left: calc(50% - 44px);
    bottom: -40px;
  }

  .avatar-large {
    width: 88px !important;
    height: 88px !important;
    border: 2px solid #b4bbbf;
  }

  .avatar-large-border-none {
    width: 88px !important;
    height: 88px !important;
    border: none;
  }

  .avatar-medium {
    width: 56px !important;
    height: 56px !important;
    border: 2px solid #b4bbbf;
  }

  .avatar-medium-border-none {
    width: 56px !important;
    height: 56px !important;
    border: none;
  }

  .avatar-small {
    width: 48px !important;
    height: 48px !important;
    border: 2px solid #b4bbbf;
  }

  .avatar-small-border-none {
    width: 48px !important;
    height: 48px !important;
    border: none;
  }

  .avatar-small {
    width: 48px !important;
    height: 48px !important;
    border: 2px solid #b4bbbf;
  }

  .fs-body {
    font-size: 14px !important;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .fab-position {
    bottom: 120px;
  }

  .avatar-position-in-header {
    position: absolute;
    left: calc(50% - 44px);
    bottom: -40px;
  }

  .avatar-large {
    width: 88px !important;
    height: 88px !important;
    border: 2px solid #b4bbbf;
  }

  .avatar-large-border-none {
    width: 88px !important;
    height: 88px !important;
    border: none;
  }

  .avatar-medium {
    width: 56px !important;
    height: 56px !important;
    border: 2px solid #b4bbbf;
  }

  .avatar-medium-border-none {
    width: 56px !important;
    height: 56px !important;
    border: none;
  }

  .avatar-small {
    width: 48px !important;
    height: 48px !important;
    border: 2px solid #b4bbbf;
  }

  .avatar-small-border-none {
    width: 48px !important;
    height: 48px !important;
    border: none;
  }

  .fs-body {
    font-size: 14px !important;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .fab-position {
    bottom: 90px;
  }

  .linear-gradient-light-mode {
    background-image: linear-gradient(to right, #56ff50, #ffffff);
  }

  .linear-gradient-dark-mode {
    background-image: linear-gradient(to right, #076d0d, #30414c);
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .fab-position {
    bottom: 60px;
  }
  .avatar-position-in-header {
    position: absolute;
    left: calc(50% - 48px);
    bottom: -44px;
  }

  .avatar-large {
    width: 96px !important;
    height: 96px !important;
    border: 2px solid #b4bbbf;
  }

  .avatar-large-border-none {
    width: 96px !important;
    height: 96px !important;
    border: none;
  }

  .avatar-medium {
    width: 64px !important;
    height: 64px !important;
    border: 2px solid #b4bbbf;
  }

  .avatar-medium-border-none {
    width: 64px !important;
    height: 64px !important;
    border: none;
  }

  .avatar-small {
    width: 56px !important;
    height: 56px !important;
    border: 2px solid #b4bbbf;
  }

  .avatar-small-border-none {
    width: 56px !important;
    height: 56px !important;
    border: none;
  }
}