@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@200&family=Nanum+Gothic&family=Quicksand:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mukta:wght@800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mukta:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap");

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

body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  background-color: #fff;
}

html {
  scroll-behavior: smooth;
}

.header {
  width: 100%;
  z-index: 999;
  /* min-height: 90px; */
  /* position: fixed; */
  /* top: 0; */
}

.logo {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.5rem;
  background-color: #fff;
}

.logo_home,
.hamburger_menu {
  font-size: 1.5em;
  color: rgb(23, 43, 77);
}

.tracker_logo_home {
  width: 1.75rem;
}

.name_home {
  font-size: 1.5em;
  color: black;
  font-weight: 600;
  padding-left: 0.5rem;
}

.logo_home,
.name_login {
  padding-right: 0.5rem;
}

.drop_down_menu {
  display: flex;
  margin-left: auto;
  margin-right: 0;
}

.nav {
  width: 100%;
}

.nav_linkss {
  position: fixed;
  z-index: 10;
  width: 100%;
  list-style: none;
  transform: translateX(100%);
  transition: transform 0s ease-in;
}

.home_nav {
  /* min-height: 90px; */
  align-items: center;
}

.menu_background {
  position: fixed;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90vh;
  overflow: auto;
  transform: translateX(100%);
  /* transition: transform 0.2s ease-in; */
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.6);
}

.nav_active {
  transform: translateX(0%);
}

.no_scroll {
  overflow: hidden;
}

nav ul li {
  width: 100%;
  padding: 1.25rem 1.5rem;
  background-color: #fff;
  /* border-top: 1.5px solid #cccccc; */
}

nav ul li a {
  color: #003eff;
  font-size: 1em;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  width: 100%;
  text-decoration: none;
}

.login_btn {
  display: none;
}

.btn_login {
  color: #031163;
  font-size: 1.05em;
  font-family: "Poppins", sans-serif;
  font-weight: 525;
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}

.update_container {
  width: 90%;
  display: flex;
  overflow: auto;
  margin: 1rem auto;
  border-radius: 5px;
  background-color: rgb(244, 245, 247);
}

.viewBtn_container {
  width: 9ch;
  min-height: 7vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view_link {
  text-decoration: none;
}

.view_btn {
  text-align: center;
  padding: 0.375rem 1.2rem;
  font-size: 0.8em;
  font-weight: 550;
  color: white;
  background-image: linear-gradient(120deg, #0acffe -50%, #495aff 100%);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.updateTxt_container {
  width: 25ch;
  min-height: 7vh;
  padding-left: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.update_txt {
  font-size: 0.8em;
  font-weight: 550;
  color: rgb(23, 43, 77);
}

.content_container {
  width: 90%;
  margin: 0 auto;
}

.info_box {
  width: 75%;
  margin: 0 auto;
  padding-top: 1.5rem;
  /* padding-left: 2rem; */
  /* animation: down 1.5s ease forwards; */
}

@keyframes down {
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}

.home_heading {
  font-family: "Inter", sans-serif;
  font-size: 2.7em;
  color: black;
  text-align: start;
}

.subheading_container {
  padding-top: 1.5rem;
}

.home_subheading {
  font-size: 1.3em;
}

/* .features_container {
  width: 47%;
  float: left;
  padding-top: 4.5rem;
  padding-left: 5rem;
  animation-duration: 2s;
  animation-name: bounce;
}

.features_heading {
  font-size: 2.25em;
  color: #645cff;
}

.fa-circle {
  position: absolute;
  margin-top: 0.755rem;
  margin-left: -1.25rem;
  color: #9e99ff;
  font-size: 0.45em;
}

.features_list {
  padding-top: 1.25rem;
  padding-left: 1.5rem;
  font-size: 1.5em;
  color: #9e99ff;
}

@keyframes bounce {
  from {
    margin-left: -3rem;
  }

  to {
    margin-left: 0rem;
  }
} */

.start_container {
  width: 100%;
  padding-top: 2.25rem;
}

.start_btn {
  text-align: center;
  padding: 0.9rem 4rem;
  font-size: 1.1em;
  color: white;
  background-color: #003eff;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.start_btn:hover {
  background-color: #0033cc;
}

.dashboard_container {
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 5rem;
  animation-duration: 2s;
  /* animation-name: slidein; */
}

@keyframes slidein {
  from {
    margin-right: -3rem;
  }

  to {
    margin-right: 0rem;
  }
}

.inventory_ui {
  width: 100%;
  padding-bottom: 0rem;
}

.content_box {
  width: 100%;
  min-height: 725px;
  overflow: auto;
  margin: 0 auto;
  margin-top: 4rem;
  background-image: linear-gradient(
    120deg,
    rgba(10, 207, 254, 0.25) -50%,
    rgba(73, 90, 255, 0.25) 100%
  );
}

/* [data-inviewport="scale-in"] {
  transition: 2s;
  transform: scale(0.9);
}

[data-inviewport="scale-in"].is-inViewport {
  transform: scale(1);
} */

.zoom_in {
  animation: zoom 2s;
}

@keyframes zoom {
  0% {
    transform: scale(0.925);
  }
  100% {
    transform: scale(1);
  }
}

.content_box_left {
  width: 100%;
}

.content_box_right {
  width: 80%;
  margin: 0 auto;
}

.box_header_container {
  padding: 2.5rem 2.5rem;
}

.box_heading {
  font-family: "Inter", sans-serif;
  font-size: 2.5em;
  font-weight: 600;
}

.box_subheader_container {
  padding-top: 1.75rem;
}

.box_subheading {
  font-family: "Inter", sans-serif;
  font-size: 1.1em;
  font-weight: 400;
}

.vid_container {
  padding: 0rem 2.5rem;
}

.animation_vid {
  width: 100%;
}

.tracking_feature_container {
  width: 90%;
  margin: 0 auto;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

.lower_box {
  padding-top: 2.5rem;
}

.lowest_box {
  padding-bottom: 0.75rem;
}

.tracking_heading {
  font-family: "Inter", sans-serif;
  font-size: 1em;
  font-weight: 500;
  color: rgb(23, 43, 77);
}

.tracking_feature_subheader {
  padding-top: 1.1rem;
}

.tracking_subheading {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgb(23, 43, 77);
}

.card_header_container {
  width: 80%;
  overflow: auto;
  margin: 0 auto;
  padding-top: 7.5em;
}

.btm_heading {
  font-family: "Inter", sans-serif;
  font-size: 2.5em;
  font-weight: 500;
}

.btm_subheading_container {
  width: 100%;
  padding-top: 2rem;
}

.btm_subheading {
  font-family: "Inter", sans-serif;
  font-size: 1.5em;
  font-weight: 300;
}

.card_container {
  width: 90%;
  overflow: auto;
  margin: 0 auto;
  display: block;
  padding-top: 3rem;
  padding-bottom: 9rem;
}

.card {
  width: 90%;
  margin: 0 auto;
  min-height: 31.5vh;
  margin-top: 1.5rem;
  background-image: linear-gradient(
    120deg,
    rgba(218, 212, 236, 0.35) 0%,
    rgba(243, 231, 233, 0.5) 100%
  );
}

.card_content {
  width: 80%;
  margin: 0 auto;
}

.card_icon {
  font-size: 2.9em;
  padding-top: 2rem;
}

.card_heading_container {
  padding-top: 2rem;
}

.card_heading {
  font-family: "Inter", sans-serif;
  font-size: 1.3em;
  font-weight: 600;
}

.card_txt_container {
  padding-top: 1.5rem;
}

.card_spacer {
  padding-bottom: 3rem;
}

.card_txt {
  font-family: "Inter", sans-serif;
  font-size: 1.1em;
  font-weight: 400;
}

.footer {
  width: 100%;
  min-height: 200px;
  background-color: rgb(23, 43, 77);
}

.footer_container {
  width: 77.5%;
  overflow: auto;
  margin: 0 auto;
}

.footer_box {
  width: 60%;
  min-height: 200px;
}

.ftr_left {
  /* float: left; */
  display: flex;
  align-items: center;
}

.footer_name {
  font-size: 1.75em;
  font-weight: 550;
  letter-spacing: 0.1em;
  color: #fff;
}

.footer_slogan {
  font-size: 0.9em;
  color: #fff;
  margin-top: -0.75rem;
}

.ftr_right {
  width: 100%;
  /* float: right; */
}

.footer_content_right {
  width: 100%;
  /* min-height: 200px; */
  /* float: right; */
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
}

.footer_card {
  width: 30%;
}

.ftr_card_spacer {
  margin-left: 2.5rem;
}

.ftr_card_heading {
  font-family: "Inter", sans-serif;
  font-size: 0.85em;
  font-weight: 600;
  color: rgb(248, 249, 250);
}

.ftr_card_subheader {
  padding-top: 0.75rem;
}

.footer_card a {
  text-decoration: none;
}

.ftr_card_subheading {
  font-family: "Inter", sans-serif;
  font-size: 0.75em;
  font-weight: 400;
  color: rgb(248, 249, 250);
}

.login_left {
  display: none;
}

.login_right {
  height: 100vh;
  width: 100%;
}

.logo_mobile_login_container {
  width: 77.5%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1.75rem;
}

.tracker_logo_login_mobile_container {
  padding-top: 0.35rem;
}

.logo_home_mobile {
  text-decoration: none;
}

.tracker_name_login_mobile_container {
  padding-left: 0.5rem;
}

.tracker_logo_login_mobile {
  width: 3ch;
}

.logo_login,
.name_login {
  padding-right: 0.5rem;
  color: #031163;
  font-size: 1.75em;
}

.tracker_logo_login {
  width: 2.5rem;
}

.login_form {
  width: 77.5%;
  margin: 4rem auto;
  /* position: absolute; */
  /* top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%); */
}

.login {
  color: #031163;
  font-weight: 550;
  font-size: 2em;
}

.welcome_container {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.welcome_text {
  color: #b8b8b8;
}

.login_subheading {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #020a3c;
  float: left;
  margin-left: 0;
  padding-bottom: 10px;
  padding-top: 15px;
}

.login_input {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  border-style: solid;
  border-color: #d3d3d3;
  margin-bottom: 10px;
  border-width: 1.75px;
  outline: none;
  padding-left: 13px;
}

.forgot_container {
  padding-top: 1rem;
  padding-bottom: 1.75rem;
}

.forgot_pw {
  text-decoration: none;
  color: #b8b8b8;
}

.forgot_pw:hover {
  color: #0033cc;
}

.login_submit {
  width: 100%;
  /* margin-left: 20px; */
  padding: 14px 25px;
  font-size: 1.1em;
  color: white;
  background-color: #003eff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.login_submit:hover {
  background-color: #0033cc;
}

.send_btn {
  padding-top: 1.5rem;
}

.return_login {
  font-size: 1.1em;
  text-decoration: none;
  color: #003eff;
  float: left;
}

.sign_up_container {
  padding-top: 1.5rem;
}

.create_container {
  width: 100%;
  padding-top: 2rem;
}

.login_text {
  color: #b8b8b8;
}

.create_acc {
  text-decoration: none;
  color: #003eff;
}

.create_acc:hover {
  color: #0033cc;
}

.signup_invalid_message {
  display: none;
  padding-top: 1.25rem;
  font-family: "Inter", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 86, 48);
  margin-bottom: -0.75rem;
}

.fields_blank,
.email_blank,
.email_invalid_password_blank,
.email_blank_password_blank_confirm_password_invalid_match,
.email_invalid,
.email_invalid_invalid_password_requirements,
.email_invalid_confirm_password_invalid_match,
.email_invalid_invalid_password_requirements_confirm_password_invalid_match,
.email_invalid_invalid_password_requirements_confirm_password_blank,
.email_invalid_password_blank_confirm_password_invalid_match,
.password_blank,
.invalid_password_requirements_confirm_password_blank,
.invalid_password_requirements,
.confirm_password_invalid_match {
  display: none;
}

.visible {
  display: block;
}

.inventory_left {
  display: none;
}

.inventory_tracker_logo {
  width: 9%;
}

.nav_menu_mobile {
  display: flex;
  margin-left: auto;
  margin-right: 0;
}

.user_nav_mobile_content {
  position: fixed;
  z-index: 10;
  width: 100%;
  list-style: none;
  transition: transform 0.2s ease-in;
  transform: translateX(100%);
}

.nav_icon_clr {
  filter: invert(42%) sepia(0%) saturate(0%) hue-rotate(91deg) brightness(93%)
    contrast(92%);
}

.icon_selected {
  filter: invert(35%) sepia(88%) saturate(784%) hue-rotate(190deg)
    brightness(98%) contrast(90%);
}

.selected {
  filter: invert(14%) sepia(100%) saturate(3816%) hue-rotate(228deg)
    brightness(104%) contrast(119%);
}

.nav_link_label {
  font-family: "Inter", sans-serif;
  font-size: 1em; /*c*/
  font-weight: 400;
  color: rgb(0, 0, 0); /*c*/
  padding-left: 1rem; /*c*/
  padding-top: 0.1rem;
}

.top_nav {
  display: none;
}

.user_info {
  display: none;
}

.menu_text {
  display: none;
}

.nav_content_mobile {
  width: 100%;
  background-color: #fff;
}

.user_nav_a_mobile {
  padding: 1.25rem 2rem;
}

.remove_underline {
  text-decoration: none;
}

.nav_link {
  display: flex;
  /* color: rgba(0, 0, 0, 0.75); */
  text-decoration: none;
}

.nav_icon_container {
  /* padding-right: 1.25rem; */
}

.logout_label {
  /* margin-left: -0.25rem; */
}

#logout_icon {
  font-weight: 600;
  /* font-size: 1.25em; */
}

.user_menu_background {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 10;
  width: 100%;
  height: 100%;
  overflow: auto;
  transform: translateX(100%);
  transition: transform 0.2s ease-in;
  /* background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.6); */
}

.user_nav_active {
  transform: translateX(0%);
}

.container {
  padding-bottom: 1.25rem;
}

nav:after {
  display: table;
}

.menu_icon {
  float: right;
  cursor: pointer;
  padding: 24px 17px;
}

.header .menu_btn {
  display: none;
}

.icon {
  color: #fff;
  padding-right: 3rem;
  font-size: 25px;
  cursor: pointer;
}

/* nav ul {
  width: 50%;
}

nav ul li {
  list-style: none;
  width: 13%;
} */

/* nav ul li a {
  display: block;
  padding: 0px 100px;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  font-family: "M PLUS Rounded 1c", sans-serif;
  color: #2b2d2f;
  border-right: 1px solid #aaa;
} */

nav ul li a:hover {
  color: #183efa;
}

.inventory_container {
  width: 100%;
}

.heading_container,
.inventory_subheader_container,
.mid_content,
.input_container,
.table_scroll,
.table_inventory,
.empty_table {
  width: 90%;
}

.heading_container {
  margin: 0 auto;
  padding-top: 1.5rem;
}

.inventory_heading {
  font-family: "Inter", sans-serif;
  font-size: 1.75em;
  font-weight: 500;
  color: rgb(23, 43, 77);
}

.inventory_subheader_container {
  margin: 0 auto;
  padding-top: 1.75rem;
}

.inventory_subheading {
  font-family: "Inter", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(23, 43, 77);
}

.mid_content {
  margin: 0 auto;
  padding-top: 1.5rem;
}

.inventory_info_box {
  width: 100%;
  display: block;
  margin: auto;
}

.stat_box {
  width: 100%;
  /* height: 75px; */
  margin-bottom: 1.2rem;
  /* margin-bottom: -1rem; */
  border-radius: 2.5px;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 5px, rgba(0, 0, 0, 0.09) 0px 2px 5px;
  /* -moz-box-shadow: 0 0 5px 3px #e0e0e0;
  -webkit-box-shadow: 0 0 3px #e0e0e0;
  box-shadow: 0 0 2.5px 1px #e0e0e0; */
}

.count_box {
  width: 100%;
}

.cost_box {
  width: 100%;
}

.profit_box {
  width: 100%;
}

.icon_container {
  float: right;
  padding-top: 0.75rem;
  padding-right: 1rem;
}

.stat_icon {
  filter: invert(67%) sepia(29%) saturate(150%) hue-rotate(179deg)
    brightness(91%) contrast(84%);
}

.stat_box_label {
  font-family: "Inter", sans-serif;
  font-size: 0.9em;
  font-weight: 400;
  color: rgb(23, 43, 77);
  padding-top: 0.75rem;
  padding-left: 1rem;
}

.total_number {
  font-family: "Inter", sans-serif;
  font-size: 1.5em;
  font-weight: 600;
  color: rgb(23, 43, 77);
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
}

.product_count,
.total_spendings,
.roi {
  /* padding-top: 1rem; */
  /* margin-left: 1rem; */
}

.percent {
  font-size: 12px;
  position: absolute;
  margin-top: -0.25rem;
  margin-left: 1.3rem;
}

p {
  font-size: 0.9em;
  color: #8d8681;
  margin-left: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.p_roi {
  font-size: 9px;
  color: #8d8681;
  text-align: center;
}

.input_container {
  display: block;
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom: 0rem;
}

.search_bar {
  width: 100%;
  /* float: left; */
}

.search_product {
  /* margin-bottom: 1rem; */
}

.drop_down_list {
  width: 10ch;
  float: left;
  padding-top: 1.75rem;
}

.status_filter {
  width: 15ch;
  padding: 0.4rem 0.5rem;
  font-family: "Inter", sans-serif;
  font-size: 0.88em;
  font-weight: 400;
  min-height: 3.4vh;
  color: rgb(33, 37, 41);
  background-color: rgb(244, 245, 247);
  border: none;
}

.ddl_opt {
  font-family: "Inter", sans-serif;
  font-size: 0.88em;
  font-weight: 500;
}

.buttons {
  width: 35%;
  float: right;
  display: flex;
  padding-top: 1.75rem;
}

.open_form {
  width: 46%;
  min-height: 3.4vh;
  border-radius: 2px;
  background-color: #003eff;
  border: none;
  outline: none;
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  font-size: 12px;
  font-weight: bolder;
  cursor: pointer;
  margin: 0 auto;
  padding-bottom: 4px;
}

.add_symbol {
  color: #fff;
  font-size: 19px;
}

.clear_table {
  width: 46%;
  min-height: 3.4vh;
  border-radius: 2px;
  color: #fff;
  background-color: #eef1f6;
  border: none;
  outline: none;
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding-top: 2px;
}

.trash_icon {
  width: 17px;
  height: auto;
}

.open_form:hover {
  background-color: #0033cc;
  opacity: 1;
}

.clear_table:hover {
  background-color: #e5e5e5;
  opacity: 1;
}

.form_popup_background {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.form_popup {
  display: none;
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  min-height: 71vh;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 3px;
  -moz-box-shadow: 0 0 5px 3px #9d9d9d;
  -webkit-box-shadow: 0 0 3px 5px #9d9d9d;
  box-shadow: 0 0 5px 3px #9d9d9d;
  background-color: #fff;
  z-index: 9;
}

.form_popup {
  top: -510px;
  animation: drop 0.6s ease forwards;
}

@keyframes drop {
  100% {
    transform: translateY(597.5px);
    opacity: 1;
  }
}

.inventory_form {
  width: 36.9ch;
  position: relative;
  min-height: 95%;
  font-family: sans-serif;
  overflow: hidden;
  margin-top: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

.form_header {
  padding-bottom: 0rem;
}

.form_heading,
.edit_heading {
  font-family: "Inter", sans-serif;
  font-size: 1.3em;
  font-weight: 500;
  color: rgb(23, 43, 77);
}

.edit_heading {
  display: none;
}

.inventory_form_row {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.input_section {
  width: 100%;
  height: 70px;
  padding-top: 3rem;
}

.inventory_form label {
  position: absolute;
  width: 100%;
}

input {
  width: 100%;
  height: 30px;
  color: #595f6e;
  border-radius: 3px;
  border-style: solid;
  border-color: #d3d3d3;
  border-width: 2px;
  padding-left: 0.5rem;
  font-weight: 550;
  margin: 0 auto;
}

input[type="date"]:required:invalid::-webkit-datetime-edit {
  color: transparent;
}
input[type="date"]:focus::-webkit-datetime-edit {
  color: black !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* .inventory_form label::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: -1px;
  height: 30px;
  width: 100%;
  border-bottom: 2px solid #006ee6;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
} */

.content_name {
  font-family: "Inter", sans-serif;
  font-size: 0.55em;
  font-weight: 600;
  color: rgb(107, 119, 140);
  position: absolute;
  bottom: 5px;
  left: 0px;
  transition: all 0.3s ease;
}

.required_asterisk {
  color: rgb(255, 86, 48);
}

.required_input {
  color: rgb(255, 86, 48);
  font-style: italic;
  font-weight: 400;
  opacity: 0;
}

.dollar_sign {
  position: absolute;
  margin-top: 0.15rem;
  margin-left: -11.05rem;
  color: rgba(0, 0, 0, 0.75);
  font-family: "Inter", sans-serif;
  font-size: 0.82em;
  font-weight: 400;
  background-color: #f5f5f5;
  width: 1.75rem;
  padding: 0.2rem;
  padding-left: 0.55rem;
  border-top-left-radius: 0.9px;
  border-bottom-left-radius: 0.9px;
  border-right: 2px solid #d3d3d3;
}

.input_style {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: rgb(9, 30, 66);
  border-color: (206, 212, 218);
  background-color: rgb(250, 251, 252);
}

.input_date_style {
  border-color: (206, 212, 218);
  background-color: rgb(250, 251, 252);
}

.name {
  width: 66.25%;
}

.style_id {
  width: 33.25%;
}

.brand {
  width: 33%;
}

.color {
  width: 33%;
}

.status {
  width: 33%;
}

.price {
  width: 33%;
}

.return {
  width: 33%;
}

.condition {
  width: 33%;
}

.place_of_purchase {
  width: 33%;
}

.platform {
  width: 33%;
}

.size {
  width: 33%;
}

.purchased {
  width: 49.771%;
}

.sold {
  width: 49.771%;
}

.size_content {
  width: 100%;
}

.size_header {
  width: 50%;
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding-top: 1.75rem;
}

.size_heading {
  width: 33.33%;
  font-family: "Inter", sans-serif;
  font-size: 0.75em;
  font-weight: 400;
  color: rgba(0, 0, 0);
}

.sizeShoes {
  border-bottom: 2.5px solid rgb(29, 52, 183);
  padding-bottom: 0.75rem;
}

.sizeClothes {
  border-bottom: 2.5px solid rgb(222, 220, 240);
  padding-bottom: 0.75rem;
}

.sizeOther {
  border-bottom: 2.5px solid rgb(222, 220, 240);
  padding-bottom: 0.75rem;
}

.size_container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 1.25rem;
}

.clothes_sizes,
.clothes_size_spacer,
.other_sizes,
.other_size_spacer {
  width: 100%;
  display: none;
  justify-content: unset;
}

.size_box {
  width: 7.5%;
  min-height: 3.25vh; /*c*/
  font-family: "Inter", sans-serif;
  font-size: 0.7em; /*c*/
  font-weight: 400;
  color: rgba(0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background-color: rgb(244, 245, 247);
}

.size_box:hover {
  background-color: #e5e5e5;
}

#first_size_box {
  margin-left: 0rem;
}

#clothes_size_box,
#other_size_box {
  margin-left: 0.35rem;
}

/* .shoe_size {
  display: block;
  justify-content: space-between;
} */

/* .inventory_form input:focus + .label_name .content_name,
.inventory_form input:valid + .label_name .content_name {
  transform: translateY(-90%);
  font-size: 14px;
  color: #006ee6;
}

.inventory_form input:focus + .label_name::after,
.inventory_form input:valid + .label_name::after {
  transform: translateX(0%);
} */

.form_buttons,
.edit_btns {
  width: 36.9%;
  min-height: 3vh;
  display: flex;
  float: right;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.edit_btns {
  display: none;
}

.close_form,
.cancel_btn {
  width: 48.5%;
  border-radius: 3px;
  background-color: rgb(248, 249, 250);
  border: none;
  outline: none;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  font-size: 0.8em;
  color: rgb(33, 37, 41);
  cursor: pointer;
}

.submit_form,
.edit_row {
  width: 48.5%;
  color: white;
  border-radius: 3px;
  background-color: #003eff;
  border: none;
  outline: none;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  font-size: 0.8em;
  cursor: pointer;
}

.close_form:hover {
  background-color: #e5e5e5;
}

.submit_form:hover {
  background-color: #0033cc;
  opacity: 1;
}

.form_popup {
  width: 90%;
  height: 66%;
}

.shoe_size {
  padding-top: 3rem;
  width: 10%;
  display: flex;
  float: left;
}

#price_input,
#roi_input {
  padding-left: 0.5rem;
}

.table_scroll {
  margin: 0 auto;
  overflow-y: hidden;
  margin-top: 5.5rem;
  padding-bottom: 1.25rem;
}

*::-webkit-scrollbar {
  height: 7.5px;
}

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

*::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 10px;
}

table {
  color: black;
  margin-right: auto;
  margin-left: auto;
  /* width: 85%; */
  border-collapse: collapse;
  background-color: white;
  text-align: left;
  /* border-radius: 5px 5px 0 0; */
  overflow: auto;
  box-shadow: 0 0px 5px #e1e5ee;
}

table thead tr {
  box-shadow: 0 1px 5px #e1e5ee;
  background-color: white;
  font-weight: 100;
  color: black;
  font-size: 20px;
  text-align: left;
  /* font-family: "Exo", sans-serif;
  font-family: "Nanum Gothic", sans-serif;
  font-family: "Quicksand", sans-serif; */
}

td {
  font-family: "Inter", sans-serif;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  text-align: left;
}

.table_inventory th {
  font-family: "Inter", sans-serif;
  color: rgb(94, 108, 132);
  font-weight: 700;
  font-size: 0.6em;
  padding: 0.75rem 0rem;
}

.product_name_th {
  min-width: 14.25rem;
}

.product_size_th {
  min-width: 5rem;
}

.product_style_id_th {
  min-width: 7.5rem;
}

.product_status_th {
  min-width: 5.5rem;
}

.product_roi_th {
  min-width: 5.5rem;
}

.product_price_th {
  min-width: 5.5rem;
}

.date_purchased_th {
  min-width: 8.5rem;
}

.product_place_of_purchase_th {
  min-width: 9.5rem;
}

.date_sold_th {
  min-width: 6.5rem;
}

.product_platform_th {
  min-width: 6rem;
}

.product_brand_th {
  min-width: 5rem;
}

.product_colorway_th {
  min-width: 5.75rem;
}

.product_condition_th {
  min-width: 5rem;
}

.table_inventory td {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.75em;
}

.product_size_td,
.product_style_id_td,
.product_price,
.date_purchased_td,
.place_of_purchase_td,
.date_sold_td,
.product_platform_td,
.product_brand_td,
.product_colorway_td,
.product_condition_td {
  color: rgba(0, 0, 0, 0.9);
}

.product_name_td {
  filter: invert(14%) sepia(100%) saturate(3816%) hue-rotate(228deg)
    brightness(104%) contrast(119%);
}

.status_cell_txt {
  display: flex;
}

.green {
  color: rgb(54, 179, 126);
}

#status_icon_sold {
  font-size: 1.2em;
}

.skyblue {
  color: #007bff;
}

#status_icon_listed {
  font-size: 1.3em;
  filter: invert(29%) sepia(58%) saturate(4129%) hue-rotate(202deg)
    brightness(107%) contrast(102%);
}

.grey {
  color: rgba(0, 0, 0, 0.33);
}

#status_icon_unlisted {
  font-size: 1.2em;
  color: rgba(0, 0, 0, 0.33);
}

.status_txt {
  padding-left: 0.4rem;
}

.clear_row_all {
  /* float: left; */
  /* cursor: pointer; */
  /* font-size: 20px; */
  /* font-weight: 600; */
  /* position: absolute;
  background-color: transparent;
  border: none;
  margin-top: 5rem; */
  /* margin-left: -1.75rem;
  margin-top: 0.5rem; */
  /* background-color: #1338be; */
  /* display: none; */
}

.clear_row {
  float: left;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  border: none;
  color: #27292a;
  margin-top: -2px;
  margin-left: -16px;
}

.sold {
  color: #64bd64fd;
  /* color: #45b6fe; */
}

.pending {
  color: rgba(0, 0, 0, 0.33);
}

.profit {
  color: rgb(54, 179, 126);
}

.neutral {
  color: rgb(23, 43, 77);
}

.lost {
  color: rgb(255, 86, 48);
}

.options_btn {
  position: absolute;
  float: left;
  cursor: pointer;
  background-color: transparent;
  border: none;
  margin-left: -1.75rem;
  margin-top: 0.3rem;
  padding-bottom: 0.75rem;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.option_container {
  display: flex;
  width: auto;
  padding-bottom: 1rem;
  padding-left: 0.3rem;
}

.edit_btn {
  background: transparent;
  border: none;
  filter: invert(35%) sepia(88%) saturate(784%) hue-rotate(190deg)
    brightness(98%) contrast(90%);
  width: 50%;
  font-size: 1.1em;
  text-align: left;
  margin-top: 0.95rem;
  padding-right: 1.5rem;
}

.clear_row_all {
  background: transparent;
  border: none;
  filter: invert(67%) sepia(29%) saturate(150%) hue-rotate(179deg)
    brightness(91%) contrast(84%);
  width: 50%;
  font-size: 1.1em;
  text-align: left;
  margin-top: 0.95rem;
}

.delete_row {
  display: none;
}

.clear_row {
  display: none;
}

.empty_table {
  margin: 0 auto;
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 5rem;
}

.empty_img {
  width: 55%;
}

.empty_txt {
  padding-top: 1.5rem;
}

.report_data {
  font-family: "Inter", sans-serif;
  font-size: 1.1em;
  font-weight: 400;
  color: rgb(23, 43, 77);
}

@media only screen and (max-width: 999px) {
  .dollar_sign {
    display: none;
  }

  /* .product_brand_th,
  .product_style_id_th,
  .product_status_th,
  .date_purchased_th,
  .date_sold_th,
  .product_condition_th,
  .actions_th {
    display: none;
  } */

  /* .product_brand_td,
  .product_style_id_td,
  .product_status_td,
  .date_purchased_td,
  .date_sold_td,
  .product_condition_td,
  .option_container {
    display: none;
  } */
}

@media only screen and (min-width: 768px) and (max-width: 999px) {
  .logo {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1.75rem 2.5rem;
    /* background-color: tomato; */
  }

  .logo_home,
  .hamburger_menu {
    font-size: 2em;
  }

  .tracker_logo_home {
    width: 2.4rem;
  }

  .name_home {
    font-size: 2em;
  }

  .logo_home,
  .name_login {
    padding-right: 0.75rem;
  }

  .drop_down_menu {
    display: flex;
    margin-left: auto;
    margin-right: 0;
    /* background-color: thistle; */
  }

  .menu_btn {
    position: absolute;
    left: 0%;
    display: none;
  }

  .check_btn {
    font-size: 1em;
    color: #27292a;
    float: right;
    line-height: 80px;
    /* margin-right: 40px; */
    cursor: pointer;
  }

  .nav_links {
    position: fixed;
    z-index: 10;
    width: 100%;
    list-style: none;
    transform: translateX(100%);
    /* transition: transform 0.5s ease-in; */
  }

  .menu_background {
    /* display: none; */
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80vh;
    overflow: auto;
    transform: translateX(100%);
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.6);
  }

  .nav_active {
    transform: translateX(0%);
  }

  nav ul li {
    padding: 2rem 3rem;
  }

  nav ul li a {
    font-size: 1.5em;
  }

  .btn_login {
    color: #031163;
    font-size: 1.05em;
    font-family: "Poppins", sans-serif;
    font-weight: 525;
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
  }

  .signup_invalid_message {
    font-size: 1.15em;
  }

  .update_container {
    width: 90%;
    display: flex;
    overflow: auto;
    margin: 1rem auto;
    border-radius: 5px;
    background-color: rgb(244, 245, 247);
  }

  .viewBtn_container {
    width: 11ch;
    min-height: 5vh;
  }

  .view_btn {
    font-size: 1em;
  }

  .updateTxt_container {
    width: 55ch;
    min-height: 7vh;
    padding-left: 0rem;
  }

  .update_txt {
    font-size: 1.1em;
  }

  .content_container {
    width: 90%;
    margin: 0 auto;
  }

  .info_box {
    width: 70%;
    padding-top: 2rem;
  }

  .home_heading {
    font-size: 3.5em;
  }

  .subheading_container {
    padding-top: 2rem;
  }

  .home_subheading {
    font-size: 1.6em;
  }

  .start_container {
    padding-top: 3rem;
  }

  .start_btn {
    font-size: 1.5em;
  }

  .dashboard_container {
    padding-top: 5.5rem;
    padding-bottom: 5rem;
  }

  .content_box {
    width: 90%;
  }

  .content_box_right {
    width: 80%;
  }

  .box_subheading {
    font-size: 1.25em;
  }

  .tracking_feature_container {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .feature_box {
    width: 30%;
  }

  .lower_box {
    padding-top: 0rem;
  }

  .tracking_heading {
    font-size: 1.1em;
  }

  .card {
    min-height: 22vh;
  }

  .card_icon {
    padding-top: 2.5rem;
  }

  .card_heading {
    font-size: 1.5em;
  }

  .card_text {
    font-size: 1.1em;
  }

  .login_form {
    margin: 9rem auto;
  }

  .logo_login,
  .name_login {
    font-size: 2.5em;
    padding-right: 0.5rem;
  }

  .tracker_logo_login_mobile_container {
    padding-top: 0.5rem;
  }

  .tracker_logo_login_mobile {
    width: 4.5ch;
  }

  .tracker_name_login_mobile_container {
    padding-left: 0.75rem;
  }

  .login {
    font-size: 2.25em;
  }

  .welcome_text,
  .login_subheading,
  .forgot_pw,
  .login_submit,
  .login_text,
  .send_btn,
  .return_login {
    font-size: 1.25em;
  }

  .sign_up_container {
    padding-top: 1.75rem;
  }

  .inventory_tracker_logo {
    width: 6%;
  }

  .hamburger_menu {
    font-size: 1.6em;
  }

  .user_nav_a_mobile {
    padding: 1.25rem 3rem;
  }

  .nav_link_label {
    font-size: 1.1em;
  }

  .heading_container,
  .inventory_subheader_container,
  .mid_content,
  .input_container,
  .table_scroll,
  .table_inventory,
  .empty_table {
    width: 90%;
  }

  .inventory_container {
    width: 100%;
  }

  .inventory_heading {
    font-size: 1.8em;
  }

  .inventory_info_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .stat_box {
    width: 31%;
  }

  .count_box {
    width: 32%;
  }

  .cost_box {
    width: 32%;
  }

  .profit_box {
    width: 32%;
  }

  .total_number {
    font-size: 1.6em;
    padding-top: 0rem;
  }

  p {
    font-size: 1.1em;
    margin-top: 0px;
  }

  .stat_box_label {
    padding-bottom: 1rem;
  }

  .input_container {
    display: flex;
    margin: 0 auto;
    padding-top: 1rem;
    padding-bottom: 0rem;
  }

  .search_bar {
    width: 21ch;
  }

  .search_product {
    width: 100%;
    padding: 0.5rem 0.5rem;
    border-style: solid;
    border-radius: 3px;
    border-color: (206, 212, 218);
    border-width: 2px;
    font-family: "Inter", sans-serif;
    color: rgb(9, 30, 66);
    font-size: 0.85em;
    font-weight: 500;
    background-color: rgb(250, 251, 252);
  }

  #search_icon {
    position: absolute;
    margin-top: 0.25rem;
    margin-left: -1.75rem;
    font-size: 1.4em;
  }

  .search_product:focus {
    border-color: rgba(0, 0, 0, 0.75);
  }

  ::placeholder {
    color: #d3d3d3;
  }

  .search_product:focus::placeholder {
    color: transparent;
  }

  .drop_down_list {
    float: unset;
    padding-top: 0rem;
    padding-left: 1rem;
  }

  .status_filter,
  .open_form,
  .clear_table {
    min-height: 3vh;
  }

  .buttons {
    float: unset;
    padding-top: 0rem;
    width: 15ch;
    display: flex;
    margin-left: auto;
  }

  .form_popup {
    min-height: 60vh;
  }

  .inventory_form {
    width: 90%;
  }

  .content_name {
    font-size: 0.66em;
  }

  .input_section {
    font-size: 20px;
  }

  .size_content {
    min-height: 18.5vh;
  }

  .table_scroll {
    margin-top: 2rem;
  }

  .table_inventory th {
    font-size: 0.7em;
  }

  .clear_row {
    margin-top: 1px;
  }

  .empty_img {
    width: 44%;
  }

  .report_data {
    font-size: 1.2em;
  }
}

@media only screen and (min-width: 1000px) {
  .header {
    width: 100%;
    min-height: 90px;
    overflow: auto;
    position: sticky;
    top: 0;
    backdrop-filter: blur(4px);
  }

  .header_container {
    width: 95ch;
    overflow: auto;
    margin: 0 auto;
  }

  .border {
    border-bottom: 1px solid rgba(218, 212, 236, 0.35);
  }

  /* header {
    width: 86.5%;
    display: flex;
    margin: 0 auto;
    background: transparent;
  } */

  .logo {
    width: 20%;
    float: left;
    min-height: 90px;
    padding: 0rem 0rem;
    background: transparent;
  }

  .logo_home,
  .name_home {
    font-size: 1.5em;
  }

  .tracker_logo_home {
    width: 2.5rem;
  }

  .name_home {
    padding-left: 0.6rem;
    letter-spacing: 0.1em;
  }

  .nav {
    width: 27.5%;
    float: right;
  }

  .header_nav {
    width: 33.5%;
    float: left;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: right;
  }

  .nav_linkss {
    width: 100%;
    min-height: 90px;
    position: unset;
    transform: translateX(0%);
    transition: none;
    display: flex;
    justify-content: space-between;
  }

  .nav_link {
    width: 23%;
  }

  nav ul li {
    width: 100%;
    padding: 0rem 0rem;
    background-color: transparent;
    border-top: none;
  }

  .nav_linkss li a {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1em;
    color: black;
    text-decoration: none;
  }

  .nav_linkss li a:hover {
    color: #003eff;
  }

  .login_mobile {
    display: none;
  }

  .login_btn {
    min-height: 90px;
    float: right;
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
  }

  .nav_links {
    /* float: right; */
    /* position: static; */
    display: flex;
    padding-top: 0rem;
    list-style: none;
    transform: translateX(0%);
  }

  .nav_links li {
    padding-left: 0rem;
    text-align: center;
    border-style: none;
    background: transparent;
  }

  .nav_links li a {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1em;
    color: black;
    text-decoration: none;
  }

  .nav_links li a:hover {
    color: #003eff;
  }

  .btn_login {
    font-family: "Montserrat", sans-serif;
    font-size: 1em;
    font-weight: 500;
    padding: 0.6rem 1.6rem;
    margin-top: -0.75rem;
    color: #003eff;
    background-color: #b3d4ff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .btn_login:hover {
    background-color: #99c5ff;
  }

  .drop_down_menu {
    display: none;
  }

  .menu_background {
    display: none;
  }

  .update_container {
    width: 95ch;
    overflow: auto;
    margin: 0.75rem auto;
    border-radius: 5px;
    background-color: rgb(244, 245, 247);
  }

  .viewBtn_container {
    width: 7%;
    min-height: 0vh;
    align-items: unset;
    justify-content: unset;
    padding: 0.6rem 0.5rem;
  }

  .view_btn {
    text-align: center;
    padding: 0.375rem 1.2rem;
    font-size: 0.8em;
    font-weight: 550;
    color: white;
    background-image: linear-gradient(120deg, #0acffe -50%, #495aff 100%);
    /* background-image: linear-gradient(to right, #b1adff, #7770ff); */
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  .updateTxt_container {
    width: 93%;
    min-height: 0vh;
    display: flex;
    align-items: unset;
    justify-content: unset;
    padding: 0.75rem 1.75rem;
  }

  .update_txt {
    font-size: 0.9em;
    font-weight: 550;
    padding-left: 0rem;
    color: rgb(23, 43, 77);
  }

  .content_container {
    width: 95ch;
    margin: 0 auto;
    padding-top: 0rem;
  }

  .info_box {
    width: 40%;
    float: left;
    padding-top: 6rem;
    /* padding-left: 2rem; */
    /* animation: down 1.5s ease forwards; */
  }

  @keyframes down {
    100% {
      transform: translateY(25px);
      opacity: 1;
    }
  }

  .home_heading {
    font-family: "Inter", sans-serif;
    font-size: 2.5em;
    color: black;
    text-align: start;
  }

  .subheading_container {
    padding-top: 1.5rem;
  }

  .home_subheading {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 1.3em;
  }

  /* .features_container {
    width: 47%;
    float: left;
    padding-top: 4.5rem;
    padding-left: 5rem;
    animation-duration: 2s;
    animation-name: bounce;
  }

  .features_heading {
    font-size: 2.25em;
    color: #645cff;
  }

  .fa-circle {
    position: absolute;
    margin-top: 0.755rem;
    margin-left: -1.25rem;
    color: #9e99ff;
    font-size: 0.45em;
  }

  .features_list {
    padding-top: 1.25rem;
    padding-left: 1.5rem;
    font-size: 1.5em;
    color: #9e99ff;
  }

  @keyframes bounce {
    from {
      margin-left: -3rem;
    }

    to {
      margin-left: 0rem;
    }
  } */

  .start_container {
    width: 92.5%;
    text-align: left;
    padding-top: 1.75rem;
  }

  .start_btn {
    text-align: center;
    padding: 0.9rem 4rem;
    font-size: 1em;
    color: white;
    background-color: #003eff;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
  }

  .start_btn:hover {
    background-color: #0033cc;
  }

  .dashboard_container {
    width: 55%;
    float: right;
    padding-top: 7rem;
    padding-bottom: 5rem;
    animation-duration: 2s;
    /* animation-name: slidein; */
  }

  @keyframes slidein {
    from {
      margin-right: -3rem;
    }

    to {
      margin-right: 0rem;
    }
  }

  .inventory_ui {
    float: right;
    width: 98%;
    padding-bottom: 0rem;
  }

  .content_box {
    width: 95ch;
    min-height: 600px;
    overflow: auto;
    margin: 0 auto;
    margin-top: 50rem;
    background-image: linear-gradient(
      120deg,
      rgba(10, 207, 254, 0.25) -50%,
      rgba(73, 90, 255, 0.25) 100%
    );
  }

  /* [data-inviewport="scale-in"] {
    transition: 2s;
    transform: scale(0.9);
  }

  [data-inviewport="scale-in"].is-inViewport {
    transform: scale(1);
  } */

  .zoom_in {
    animation: zoom 0.7s;
  }

  @keyframes zoom {
    0% {
      transform: scale(0.925);
    }
    100% {
      transform: scale(1);
    }
  }

  .content_box_left {
    width: 75%;
    float: left;
  }

  .content_box_right {
    width: 25%;
    float: right;
  }

  .box_header_container {
    padding: 2.5rem 2.5rem;
  }

  .box_heading {
    font-family: "Inter", sans-serif;
    font-size: 2.5em;
    font-weight: 600;
  }

  .box_subheader_container {
    padding-top: 1.75rem;
  }

  .box_subheading {
    font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 400;
  }

  .vid_container {
    padding: 1rem 2.5rem;
  }

  .animation_vid {
    width: 60ch;
    /* min-width: 100%; */
    min-height: 300px;
  }

  .tracking_feature_container {
    width: 75%;
    margin: unset;
    padding-top: 6rem;
    padding-bottom: 0rem;
    padding-left: 0rem;
  }

  .lower_box {
    padding-top: 2.5rem;
  }

  .lowest_box {
    padding-bottom: 0rem;
  }

  .tracking_heading {
    font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 500;
    color: rgb(23, 43, 77);
  }

  .tracking_feature_subheader {
    padding-top: 1.1rem;
  }

  .tracking_subheading {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgb(23, 43, 77);
  }

  .card_header_container {
    width: 95ch;
    overflow: auto;
    margin: 0 auto;
    padding-top: 10em;
  }

  .btm_heading {
    font-family: "Inter", sans-serif;
    font-size: 3.5em;
    font-weight: 500;
  }

  .btm_subheading_container {
    width: 50%;
    padding-top: 2rem;
  }

  .btm_subheading {
    font-family: "Inter", sans-serif;
    font-size: 1.5em;
    font-weight: 300;
  }

  .card_container {
    width: 95ch;
    overflow: auto;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 4rem;
    padding-bottom: 9rem;
  }

  .card {
    width: 31%;
    min-height: 31.5vh;
    margin: unset;
    margin-top: 0rem;
    padding-bottom: 1.75rem;
    background-image: linear-gradient(
      120deg,
      rgba(218, 212, 236, 0.35) 0%,
      rgba(243, 231, 233, 0.5) 100%
    );
  }

  .card_content {
    width: 80%;
    margin: 0 auto;
  }

  .card_icon {
    font-size: 2.9em;
    padding-top: 2rem;
  }

  .card_heading_container {
    padding-top: 2rem;
  }

  .card_heading {
    font-family: "Inter", sans-serif;
    font-size: 1.3em;
    font-weight: 600;
  }

  .card_txt_container {
    padding-top: 1.5rem;
  }

  .card_spacer {
    padding-bottom: 0rem;
  }

  .card_txt {
    font-family: "Inter", sans-serif;
    font-size: 1.1em;
    font-weight: 400;
  }

  .footer {
    width: 100%;
    min-height: 200px;
    background-color: rgb(23, 43, 77);
  }

  .footer_container {
    width: 95ch;
    overflow: auto;
    margin: 0 auto;
  }

  .footer_box {
    width: 50%;
    min-height: 200px;
  }

  .ftr_left {
    float: left;
    display: flex;
    align-items: center;
  }

  .footer_name {
    font-size: 1.75em;
    font-weight: 550;
    letter-spacing: 0.1em;
    color: #fff;
  }

  .footer_slogan {
    font-size: 0.9em;
    color: #fff;
    margin-top: -0.75rem;
  }

  .ftr_right {
    float: right;
  }

  .footer_content_right {
    width: 80%;
    min-height: 200px;
    float: right;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .footer_card {
    width: 30%;
  }

  .ftr_card_spacer {
    margin-left: 0rem;
  }

  .ftr_card_heading {
    font-family: "Inter", sans-serif;
    font-size: 0.85em;
    font-weight: 600;
    color: rgb(248, 249, 250);
  }

  .ftr_card_subheader {
    padding-top: 0.75rem;
  }

  .ftr_card_subheading {
    font-family: "Inter", sans-serif;
    font-size: 0.75em;
    font-weight: 400;
    color: rgb(248, 249, 250);
  }

  .login_container {
    position: absolute;
    width: 50%;
    height: 100%;
    z-index: 15;
    /* top: 40%; */
    /* left: 0%; */
    /* margin: -100px 0 0 -150px; */
    /* background: red; */
  }

  .login_content_container {
    width: 100%;
    display: flex;
  }

  .split {
    width: 50%;
    min-height: 100%;
    top: 0;
    padding-top: 20px;
  }

  .login_left {
    display: block;
    left: 0;
    background-color: #ebf3ff;
  }

  .login_right {
    right: 0;
    /* background-color: #6a6a6a; */
  }

  .logo_mobile_login_container {
    display: none;
  }

  .login_form {
    margin: 8rem auto;
    width: 60%;
    height: 60%;
    /* background: chartreuse; */
  }

  .login_form_content {
    width: 100%;
    height: 84%;
    /* background-color: yellow; */
  }

  .login {
    font-size: 3.25em;
  }

  .welcome_container {
    padding-top: 1rem;
    padding-bottom: 1.25rem;
  }

  .welcome_text {
    font-size: 1em;
    color: #b8b8b8;
  }

  .login_subheading {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 1.1em;
    color: #020a3c;
    float: left;
    padding-bottom: 1rem;
    padding-top: 15px;
  }

  .login_input {
    width: 100%;
    height: 2.25rem;
    font-family: "Montserrat", sans-serif;
    font-size: 0.9em;
    font-weight: 550;
    border-radius: 6px;
    border-style: solid;
    border-color: #d3d3d3;
    margin-bottom: 10px;
    border-width: 1.75px;
    outline: none;
    padding-left: 0.5rem;
  }

  .forgot_container {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
  }

  .forgot_pw {
    font-size: 1em;
    color: #b8b8b8;
  }

  .forgot_pw:hover {
    color: #0033cc;
  }

  .login_submit {
    width: 100%;
    font-size: 1.1em;
    padding: 0.75rem 0rem;
    color: white;
    background-color: #003eff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
  }

  .login_submit:hover {
    background-color: #0033cc;
  }

  .create_container {
    text-align: start;
    padding-top: 2rem;
  }

  .login_text {
    font-size: 1em;
    color: #b8b8b8;
  }

  .create_acc {
    color: #003eff;
  }

  .create_acc:hover {
    color: #0033cc;
  }

  .send_btn {
    font-size: 1.1em;
    padding-top: 1.75rem;
  }

  .return_login {
    font-size: 1.1em;
  }

  .return_login:hover {
    color: #0033cc;
  }

  .logo_home_link {
    text-decoration: none;
  }

  .logo_login_container {
    display: flex;
    margin-left: 2rem;
    align-items: center;
  }

  .name_login {
    padding-left: 0.75rem;
    letter-spacing: 0.1rem;
  }

  .logo_login,
  .name_login {
    color: #031163;
    font-size: 1.75em;
    padding-right: 1rem;
  }

  .img_text_container {
    padding-top: 10.25rem;
    width: 95%;
    margin: auto;
    text-align: center;
  }

  .img_text {
    color: #031163;
    font-weight: 550;
    font-size: 1.9em;
  }

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .login_img {
    width: 40ch;
    margin-top: 6rem;
  }

  .sign_up_container {
    padding-top: 1.75rem;
  }

  .slider_container {
    width: 50%;
    float: right;
    height: fit-content;
    background: #183af9;
  }

  .check_email_heading {
    font-size: 0.8em;
  }

  .check_email_text {
    font-size: 1.2em;
  }

  .back_login_btn {
    padding-top: 0.75rem;
  }

  .index_content_container {
    width: 100%;

    /* display: flex; */
  }

  .container {
    /* height: 100%; */
    /*position: fixed; */
    /* z-index: 1; */
    /* top: 0; */
    /* padding-top: 20px; */
  }

  .inventory_left {
    display: block;
  }

  .top_nav {
    display: block;
  }

  .user_info {
    display: block;
  }

  .menu_text {
    display: block;
  }

  .inventory_left {
    float: left;
    width: 16.5%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    background-color: rgb(248, 249, 250);
  }

  /* .nav_border {
    position: absolute;
    right: 0%;
    top: 0;
    width: 8px;
    height: 100%;
    background-color: #ebebeb;
    transition: background-color 0.2s;
    cursor: ew-resize;
  }

  .nav_border:hover {
    background-color: #cccccc;
  } */

  .user_nav {
    width: 82.5%;
    /* background-color: brown; */
    /* margin: 1rem 6%; */
  }

  .top_nav {
    padding: 1.5rem 0.75rem;
  }

  .user_info {
    padding: 0rem 0.75rem;
  }

  .welcome_user {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: rgb(23, 43, 77);
  }

  .username_container {
    padding-top: 0.25rem;
  }

  .user {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    /* color: rgba(0, 0, 0, 0.5); */
    color: rgb(23, 43, 77);
  }

  .nav_content {
    width: 84%;
    padding-top: 2.5rem;
    /* padding-left: 0.75rem; */
  }

  .menu_text {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgb(151, 160, 175);
    padding-left: 0.75rem;
  }

  .user_nav_a {
    width: 21ch;
  }

  .user_nav_a:hover {
    border-radius: 3px;
    background-color: #fff;
  }

  .nav_link {
    /* display: flex;
    align-items: center; */
    color: rgb(0, 0, 0);
    text-decoration: none;
    padding: 0.75rem 0.75rem;
    margin-top: 0.25rem;
  }

  /* .nav_icon_container {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-shrink: 0;
    background-color: #0033cc;
  } */

  .nav_icon {
    font-size: 1.4em;
  }

  .nav_icon_clr {
    filter: invert(42%) sepia(0%) saturate(0%) hue-rotate(91deg) brightness(93%)
      contrast(92%);
  }

  #logout_icon {
    font-weight: 600;
  }

  .nav_link_label {
    font-family: "Inter", sans-serif;
    font-size: 0.9em;
    font-weight: 400;
    padding-left: 1rem;
    padding-top: 0.1rem;
  }

  .nav_content_bottom {
    padding-top: 25rem;
  }

  .user_nav_mobile {
    display: none;
  }

  .inventory_right {
    float: right;
    width: 83.5%;
    min-height: 100vh;
    padding-top: 0rem;
    box-shadow: 9px 0px 14px 1px #aaaaaa;
  }

  .heading_container,
  .inventory_subheader_container,
  .mid_content,
  .input_container,
  .table_scroll,
  .table_inventory,
  .empty_table {
    width: 94%;
  }

  .heading_container {
    padding-top: 2rem;
    padding-left: 0rem;
    margin-bottom: 0rem;
  }

  .inventory_heading {
    font-size: 1.9em;
  }

  .inventory_subheader_container {
    padding-top: 1.25rem;
  }

  .inventory_subheading {
    font-size: 0.9em;
  }

  .mid_content {
    padding-top: 1.25rem;
  }

  .inventory_info_box {
    margin: unset;
    display: flex;
  }

  .stat_box {
    width: 21ch;
    /* min-height: 12vh; */
    margin-right: 1rem;
    margin-bottom: 0rem;
  }

  .profit_box {
    margin-top: 0rem;
  }

  .icon_background {
    width: 25%;
    min-height: 5.75vh;
    margin-right: 0.75rem;
  }

  .icon_container {
    padding-top: 0.75rem;
    padding-right: 1rem;
  }

  /* .total_number {
    font-family: "Inter", sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    color: rgb(23, 43, 77);
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
  } */

  p {
    /* font-size: 0.9em; */
  }

  /* .stat_box_label {
    font-size: 0.9em;
  } */

  .input_container {
    display: flex;
    margin: 0 auto;
    padding-top: 1.25rem;
    padding-bottom: 0rem;
  }

  .search_bar {
    width: 21ch;
  }

  .search_product {
    width: 100%;
    padding: 0.5rem 0.5rem;
    /* padding-right: 3rem; */
    border-style: solid;
    border-radius: 3px;
    border-color: (206, 212, 218);
    border-width: 2px;
    font-family: "Inter", sans-serif;
    color: rgb(9, 30, 66);
    font-size: 0.85em;
    font-weight: 500;
    background-color: rgb(250, 251, 252);
  }

  #search_icon {
    position: absolute;
    margin-top: 0.25rem;
    margin-left: -1.75rem;
    font-size: 1.4em;
  }

  .search_product:focus {
    border-color: rgba(0, 0, 0, 0.75);
  }

  ::placeholder {
    color: #d3d3d3;
  }

  .search_product:focus::placeholder {
    color: transparent;
  }

  .drop_down_list {
    float: unset;
    padding-top: 0rem;
    padding-left: 1rem;
  }

  .buttons {
    float: unset;
    padding-top: 0rem;
    width: 15ch;
    display: flex;
    margin-left: auto;
  }

  .form_popup {
    width: 60ch;
    min-height: 80vh;
    top: -412px;
  }

  @keyframes drop {
    100% {
      transform: translateY(440px);
      opacity: 1;
    }
  }

  .inventory_form {
    width: 90%;
    min-height: 95%;
    margin-top: 2rem;
  }

  .form_header {
    padding-bottom: 0.75rem;
  }

  .content_name {
    font-size: 0.66em;
  }

  .input_section {
    height: 10%;
    padding-top: 2.3rem;
    font-size: larger;
  }

  input {
    font-size: 0.7em;
  }

  .product_date,
  .product_date_sold {
    font-size: 0.9em;
  }

  #price_input,
  #roi_input {
    font-size: 0.7em;
    padding-left: 2.2rem;
  }

  .shoe_size {
    padding-top: 3rem;
    width: 10%;
    display: flex;
    float: left;
  }

  .size_content {
    min-height: 18.5vh;
  }

  .size_header {
    padding-top: 1.5rem;
  }

  .size_box {
    min-height: 3.75vh;
    font-size: 0.9em;
  }

  #clothes_size_box,
  #other_size_box {
    margin-left: 0.6rem;
  }

  .form_buttons {
    width: 33%;
    min-height: 3.5vh;
    margin-top: 3rem;
  }

  .close_form,
  .submit_form {
    font-size: 0.9em;
    padding: 0rem;
  }

  .edit_btns {
    width: 30%;
    height: 3.5vh;
    margin-top: 2rem;
  }

  .cancel_btn {
    width: 48.5%;
    border-radius: 3px;
    background-color: rgb(248, 249, 250);
    border: none;
    outline: none;
    overflow: hidden;
    font-family: "Inter", sans-serif;
    font-size: 0.9em;
    color: rgb(33, 37, 41);
    cursor: pointer;
  }

  .edit_row {
    width: 48.5%;
    border-radius: 3px;
    background-color: #003eff;
    color: white;
    border: none;
    outline: none;
    overflow: hidden;
    font-family: "Inter", sans-serif;
    font-size: 0.9em;
    cursor: pointer;
  }

  .cancel_btn:hover {
    background-color: #e5e5e5;
  }

  .edit_row:hover {
    background-color: #0033cc;
  }

  .inventory_table {
    /* padding-top: 1.25rem; */
  }

  .table_scroll {
    margin-top: 1.5rem;
  }

  *::-webkit-scrollbar {
    height: 7.5px;
  }

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

  *::-webkit-scrollbar-thumb {
    background-color: #dddddd;
    border-radius: 10px;
  }

  .table_inventory {
    margin: 0 auto;
    padding-top: 2.5rem;
  }

  td {
    padding: 0rem 0rem;
  }

  .table_inventory th {
    font-size: 14px;
  }

  .table_inventory td {
    font-size: 0.8em;
  }

  tr:not(:first-child):hover {
    background-color: #f5f5f5;
  }

  .options_btn {
    position: absolute;
    float: left;
    cursor: pointer;
    /* font-size: px; */
    /* font-weight: 600; */
    background-color: transparent;
    border: none;
    margin-left: -1.75rem;
    margin-top: 0.3rem;
    /* background-color: #1338be; */
    padding-bottom: 0.75rem;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }

  /* .option_container { */
  /* position: absolute;
    /* opacity: 0; */
  /* margin-top: 0.33rem; */
  /* margin-left: 0rem; */
  /*width: 6rem;
    border-radius: 5px;
    padding-top: 0.2rem;
    padding-bottom: 0.25rem; */
  /* background-color: #555555; */
  /* } */

  .option_container {
    display: flex;
    width: auto;
    padding-bottom: 1rem;
    padding-left: 0.3rem;
  }

  .hidden {
    /* visibility: hidden; */
  }

  /* .edit_btn {
    background: transparent;
    border: none;
    border-bottom: 1px solid #878787;
    color: whitesmoke;
    width: 93%;
    padding: 0.4rem;
    font-size: 14px;
    text-align: left;
    padding-left: 0.75rem;
  } */

  .edit_btn {
    background: transparent;
    border: none;
    filter: invert(35%) sepia(88%) saturate(784%) hue-rotate(190deg)
      brightness(98%) contrast(90%);
    width: 50%;
    font-size: 1.1em;
    text-align: left;
    margin-top: 0.95rem;
    padding-right: 1.5rem;
  }

  .clear_row_all {
    background: transparent;
    border: none;
    filter: invert(67%) sepia(29%) saturate(150%) hue-rotate(179deg)
      brightness(91%) contrast(84%);
    width: 50%;
    font-size: 1.1em;
    text-align: left;
    margin-top: 0.95rem;
  }

  .delete_row {
    display: none;
  }

  .clear_row {
    display: none;
  }

  .empty_table {
    padding-bottom: 0rem;
  }

  .empty_img {
    width: 22%;
  }

  .report_data {
    font-size: 1.3em;
  }
}

@media only screen and (min-width: 1300px) {
  .header {
    width: 100%;
    min-height: 90px;
  }

  .header_container {
    width: 119ch;
  }

  .logo {
    width: 20%;
    min-height: 90px;
  }

  .nav {
    width: 23%;
  }

  .header_nav {
    width: 33.5%;
    min-height: 90px;
  }

  .nav_linkss {
    width: 100%;
    min-height: 90px;
  }

  .login_btn {
    min-height: 94px;
  }

  .update_container {
    width: 119ch;
  }

  .updateTxt_container {
    padding: 0.75rem 0.75rem;
  }

  .content_container {
    width: 119ch;
  }

  .home_heading {
    font-size: 3.3em;
  }

  .subheading_container {
    padding-top: 2.5rem;
  }

  .home_subheading {
    font-size: 1.4em;
  }

  .start_container {
    padding-top: 3.25rem;
  }

  .start_btn {
    font-size: 1.1em;
  }

  .content_box {
    width: 119ch;
    min-height: 725px;
  }

  .box_subheading {
    font-size: 1.1em;
  }

  .animation_vid {
    width: 82ch;
    min-height: 500px;
  }

  .tracking_feature_container {
    width: 87.5%;
    padding-top: 16.5rem;
    padding-left: 1rem;
  }

  .card_header_container {
    width: 119ch;
  }

  .btm_subheading_container {
    width: 45%;
  }

  .card_container {
    width: 119ch;
  }

  .footer_container {
    width: 119ch;
  }
}

@media only screen and (min-width: 1700px) {
  .user_nav {
    /* margin: 1rem 6%; */
  }

  .logo_nav {
    font-size: 2em;
    color: #010314;
  }

  .welcome_user {
    /* font-size: 1.1em; */
  }

  .username_text {
    /* font-size: 0.9em; */
  }

  .menu_text {
    font-size: 0.85em;
  }

  .fa-chart-pie,
  .fa-box,
  .fa-sliders-h {
    /* font-size: 1.25em; */
  }

  #logout_icon {
    font-size: 1.5em;
  }

  .nav_link_label {
    /* font-size: 1.25em; */
  }

  .nav_content_bottom {
    padding-top: 18rem;
  }

  .inventory_right {
    /* margin-right: 2rem; */
    padding-left: 0rem;
  }

  .inventory_container {
    /* width: 90%; */
  }

  .heading_container {
    /* width: 90%; */
  }

  .inventory_heading {
    font-size: 2.25em;
    /* padding-bottom: 1.5rem;
    margin-left: -0.5rem; */
  }

  .mid_content {
    /* width: 100%; */
    /* background: royalblue; */
  }

  .inventory_info_box {
    /* width: 70%; */
    /* margin-left: 1.4rem; */
    /* padding: 0.5rem 0rem; */
    /* justify-content: space-evenly; */
    /* background-color: green; */
  }

  .icon_background {
    width: 17.5%;
    height: 27.5%;
    margin-top: 0.5rem;
    margin-right: 0.5rem;
  }

  .fa-box-open,
  .fa-tag,
  .fa-chart-line {
    font-size: 1.2em;
  }

  .total_number {
    /* font-size: 1.25em; */
    /* text-align: left; */
    /* margin-top: 1.75rem; */
    /* padding-left: 0.5rem; */
  }

  p {
    font-size: 1.1em;
  }

  .stat_box_label {
    /* padding-left: 0.25rem;
    padding-bottom: 0.25rem; */
  }

  .input_container {
    /* width: 100%;
    margin: 0rem auto;
    padding-bottom: 0.25rem; */
  }

  .search_bar {
    /* width: 100%; */
  }

  .search_product {
    /* width: 28.5%; */
    /* margin-left: 2rem; */
    padding: 0.5rem 0.5rem;
    padding-right: 3rem;
    border-style: solid;
    border-radius: 3px;
    border-color: #d3d3d3;
    border-width: 2px;
    color: #27292a;
    font-size: 0.85em;
  }

  #search_icon {
    position: absolute;
    margin-top: 0.25rem;
    margin-left: -1.75rem;
    font-size: 1.4em;
  }

  .search_product:focus {
    border-color: rgba(0, 0, 0, 0.75);
  }

  ::placeholder {
    color: #d3d3d3;
  }

  .search_product:focus::placeholder {
    color: transparent;
  }

  .buttons {
    /* margin-right: 1.9rem;
    display: flex;
    width: 15%; */
  }

  .form_popup {
    width: 40%;
    height: 54%;
  }

  @keyframes drop {
    100% {
      transform: translateY(592.5px);
      opacity: 1;
    }
  }

  .inventory_form {
    /* height: 90%;
    margin-top: 2.25rem; */
  }

  .form_header {
    padding-bottom: 1.25rem;
  }

  /* .edit_heading {
    display: none;
    font-size: 1.5em;
    font-weight: 600;
  } */

  .content_name {
    font-size: 0.75em;
    font-weight: 550;
  }

  .input_section {
    height: 10%;
    padding-top: 2.25rem;
    font-size: larger;
  }

  input {
    font-size: 0.7em;
    padding: 0.25rem 0.5rem;
  }

  .product_date,
  .product_date_sold {
    font-size: 0.9em;
  }

  #price_input,
  #roi_input {
    font-size: 0.7em;
    padding-left: 2.2rem;
  }

  .shoe_size {
    padding-top: 3rem;
    width: 10%;
    display: flex;
    float: left;
  }

  .form_buttons {
    width: 33%;
    height: 3.5vh;
  }

  .close_form,
  .submit_form {
    font-size: 1em;
    padding: 0rem;
  }

  .edit_btns {
    display: none;
    width: 30%;
    height: 3.5vh;
    float: right;
    justify-content: space-between;
    margin-top: 2rem;
  }

  .cancel_btn {
    width: 48.5%;
    /* height: 2rem; */
    border-radius: 3px;
    color: black;
    background-color: #eef1f6;
    border: none;
    outline: none;
    overflow: hidden;
    font-family: sans-serif;
    font-size: 1em;
    cursor: pointer;
  }

  .edit_row {
    width: 48.5%;
    /* height: 30px; */
    border-radius: 3px;
    background-color: #006ee6;
    color: white;
    border: none;
    outline: none;
    overflow: hidden;
    font-family: sans-serif;
    font-size: 1em;
    cursor: pointer;
  }

  .cancel_btn:hover {
    background-color: #d7deea;
  }

  .edit_row:hover {
    background-color: #0059b8;
  }

  .table_scroll {
    /* width: 110ch; */
    overflow-y: hidden;
    /* margin-left: 1.95rem; */
    padding-bottom: 0rem;
  }

  *::-webkit-scrollbar {
    height: 10px;
  }

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

  *::-webkit-scrollbar-thumb {
    background-color: #dddddd;
    border-radius: 10px;
  }

  table {
    /* height: 32rem; */
    /* min-width: 100rem; */
    width: 110ch;
  }

  th,
  td {
    /* padding: 0.75rem 0.75rem; */
  }

  .table_inventory th {
    font-family: sans-serif;
    color: rgba(0, 0, 0, 0.9);
    font-weight: 550;
    font-size: 0.65em;
  }

  .table_inventory td {
    font-family: sans-serif;
    color: rgba(0, 0, 0, 0.9);
    font-size: 0.8em;
  }

  .product_name_th {
    min-width: 30rem;
  }

  .product_brand_th {
    min-width: 9rem;
  }

  .product_size_th {
    min-width: 9rem;
  }

  .product_style_id_th {
    min-width: 12rem;
  }

  .product_status_th {
    min-width: 9rem;
  }

  .date_purchased_th {
    min-width: 12rem;
  }
  .date_sold_th {
    min-width: 12rem;
  }
  .product_price_th {
    min-width: 9rem;
  }
  .product_roi_th {
    min-width: 9rem;
  }

  .product_condition_th {
    min-width: 7rem;
  }

  tr:not(:first-child):hover {
    background-color: #f5f5f5;
  }

  .options_btn {
    position: absolute;
    float: left;
    cursor: pointer;
    /* font-size: px; */
    /* font-weight: 600; */
    background-color: transparent;
    border: none;
    margin-left: -1.75rem;
    margin-top: 0.3rem;
    /* background-color: #1338be; */
    padding-bottom: 0.75rem;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }

  /* .option_container { */
  /* position: absolute;
    /* opacity: 0; */
  /* margin-top: 0.33rem; */
  /* margin-left: 0rem; */
  /*width: 6rem;
    border-radius: 5px;
    padding-top: 0.2rem;
    padding-bottom: 0.25rem; */
  /* background-color: #555555; */
  /* } */

  .option_container {
    display: flex;
    width: auto;
    padding-bottom: 1rem;
    padding-left: 0.3rem;
  }

  .hidden {
    /* visibility: hidden; */
  }

  /* .edit_btn {
    background: transparent;
    border: none;
    border-bottom: 1px solid #878787;
    color: whitesmoke;
    width: 93%;
    padding: 0.4rem;
    font-size: 14px;
    text-align: left;
    padding-left: 0.75rem;
  } */

  .edit_btn {
    background: transparent;
    border: none;
    color: #ffcc00;
    width: 50%;
    font-size: 1.1em;
    text-align: left;
    margin-top: 0.95rem;
    padding-right: 2.5rem;
  }

  .clear_row_all {
    /* background: transparent;
    border: none;
    color: #ff5349;
    width: 50%;
    font-size: 1.1em;
    text-align: left;
    margin-top: 0.95rem; */
  }

  .delete_row {
    display: none;
  }

  .clear_row {
    display: none;
  }

  .empty_table {
    /* top: 56%;
    left: 50%; */
  }

  .fa-chart-bar {
    color: #dddddd;
    font-size: 2.5em;
    padding-bottom: 0.5rem;
  }

  .no_data {
    color: rgba(0, 0, 0, 0.75);
    font-size: 1.5em;
    /* margin-left: -1.75rem; */
  }

  .report_data {
    color: #8d8681;
    font-size: 1.1em;
    /* margin-left: -6.55rem; */
  }
}

@media only screen and (min-width: 1800px) {
  .start_container {
    width: 75%;
  }

  .dashboard_container {
    padding-top: 7rem;
  }

  .inventory_ui {
    width: 90%;
  }

  .inventory_left {
    /* width: 13%; */
  }

  .nav_content_bottom {
    padding-top: 23rem;
  }

  .inventory_right {
    /* width: 87%; */
  }

  .inventory_heading {
    font-size: 2.25em;
  }

  .inventory_info_box {
    /* margin-left: 1.1rem; */
  }

  .icon_background {
    width: 14%;
  }

  .search_product {
    width: 27.75%;
  }

  .buttons {
    /* margin-right: 3.25rem; */
  }

  .dollar_sign {
    margin-left: -13.3rem;
    padding: 0.15rem 0.5rem;
  }

  .table_scroll {
    padding-bottom: 33.5rem;
  }
}