/* These styles are generated from project.scss. */

body {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  color: #000125;
  line-height: 24px;
}

p {
  font-size: 12px;
}

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.btn-primary {
  background-color: #E23D96;
  border-color: #E23D96;
}

.btn-primary:active,
.btn-primary:visited {
  font-weight: 600;
}

.btn-primary:disabled {
  background-color: rgba(255, 107, 185, 1);
  border-color: rgba(255, 107, 185, 1);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: rgba(255, 107, 185, 1);
  border-color: rgba(255, 107, 185, 1);
}


.btn-discard {
   border: 1px solid rgba(216, 216, 216, 1);
}

.btn-discard:hover {
  text-decoration: underline;
}

/* Main Menu Styling */
.navbar-nav .nav-item .nav-link {
  border-bottom-style: solid;
  border-bottom-width: thick;
  border-bottom-color: #ffffff;
  color: #000125;
  font-size: 16px;
  font-weight: 400;
}

.navbar-nav .nav-item .nav-link.active {
  border-bottom-color: #E23D96;
  font-size: 16px;
  font-weight: 500;
}

/* Navigation Tabs Styling */

.nav-tabs .nav-link menu,
.nav-tabs .nav-link menu:hover,
.nav-tabs .nav-link menu:focus {
  font-weight: 400;
  font-size: 16px;
  color: #000125;
  border-bottom-style: solid;
  border-bottom-width: thick;
  border-bottom-color: #ffffff;
}

.nav-tabs .nav-link menu:active {
  font-weight: 500;
  border-bottom-color: #ff8f76;
}

.nav-bar-link-image {
  width: 16px;
  height: 16px;
  margin-bottom: 2px;
}

#nav-bar-profile-picture-id {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-bottom: 3px;
}

#log-out-icon-id {
  position: relative;
  left: -1px;
  margin-bottom: 3px;
}

a {
  color: rgba(87, 88, 106, 1);
  text-decoration: none;
  font-size: 14px;
}

a:hover {
  color: #E23D96;
  text-decoration: none;
  font-size: 14px;
}

/* Table Lists Template Styling */
.table-primary {
  --bs-table-bg: rgba(250, 250, 250, 1);
}

.table > :not(caption) > * > * {
  --bs-body-font-weight: 400;
  font-size: 12px;
  color: #434343;
  border-style: none;
}

.table thead {
  --bs-body-font-weight: 500;
  font-size: 14px;
  color: #434343;
  vertical-align: middle;
}

.table th {
  color: rgba(164, 170, 176, 1);
}

.table tr {
  border-bottom: 1px solid rgba(237, 237, 237, 1);
}

table tr td:last-child {
    border: none;
}

tr.clickable-row {
  cursor: pointer;
  background: rgba(255, 255, 255, 1);
}

tr.clickable-row:hover {
  border-left: 3px solid rgba(226, 61, 150, 1);
  background: rgba(248, 248, 248, 1);
}

.activated-element {
  border-left: 3px solid rgba(226, 61, 150, 1);
}

/* The right chevron in the table lists */
i.bi.bi-chevron-right,
i.bi.bi-chevron-left {
  color: #a1a1a1;
}

/* The column sort icons in the table lists */
i.bi.bi-sort-down-alt,
i.bi.bi-sort-up,
i.bi.bi-arrow-down-up {
  color: #bf2b6e;
}

.page-link {
  color: rgba(67, 67, 67, 1);
  background-color: transparent;
  border: none;
}

.page-item:not(:first-child) .page-link {
  margin-left: 3px;
}

.page-link:active
.page-link:hover
{
  color: rgba(226, 61, 150, 1);
  background-color: transparent;
  border: none;
}

.page-link:hover {
  color: rgba(226, 61, 150, 1);
  background-color: transparent;
  border: none;
}

.page-item.active .page-link {
  color: rgba(226, 61, 150, 1);
  background-color: transparent;
  border: none;
}

.page-item.disabled .page-link {
    background-color: transparent;
}

/* Navbar CSS Extensions */

.navbar-brand {
  content: url("../images/logo/supplier_hub.3c8c4749fe02.png");
  width: 162px;
  height: 47px;
}

a.nav-link {
  color: #000125;
  font-size: 16px;
  font-weight: 400;
}

a.nav-link.active {
  color: rgba(226, 61, 150, 1);
  font-size: 16px;
  font-weight: 500;
}

a.nav-link:hover {
  color: rgba(226, 61, 150, 1);
  font-size: 16px;
  font-weight: 500;
}

/* Login/Account Footer Styling */

.non-app-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: black;
  text-align: center;
  font-size: small;
}

.non-app-footer .copyright {
  color: white;
  font-size: small;
  text-align: right;
}

.non-app-footer .legal-link a:link {
  color: grey;
  font-size: small;
  text-decoration: none;
}

.non-app-footer .legal-link a:visited {
  color: grey;
  font-size: small;
  text-decoration: none;
}

.non-app-footer .legal-link a:hover {
  color: grey;
  font-size: small;
  text-decoration: none;
}

.non-app-footer .legal-link a:active {
  color: grey;
  font-size: small;
  text-decoration: none;
}

.app-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: black;
  text-align: center;
  font-size: small;
}

.px12 {
  font-size: 12px;
}

.main-color {
  color: #5fdfa1;
}

.red-color {
  color: #ef1a45;
}

.crispy-login .m-0 {
  list-style: none;
  padding-left: 0px;
}

/* Table Header Styling */

th.supplier_name {
  text-align: left;
}

th.supplier_web {
  text-align: left;
}

th.supplier_email {
  text-align: left;
}

th.supplier_phone {
  text-align: left;
}

th.supplier_chevron {
  text-align: center;
}

/* Table Row Styling */

div.supplier_name {
  width: 18.75rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.supplier_web {
  width: 12.5rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.supplier_email {
  width: 12.5rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.supplier_phone {
  width: 6.25rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.supplier_chevron {
  width: 0.313rem;
  text-align: center;
}

.pull-right {
  float: right;
}

.inline {
  display: inline;
}

.not-wide {
    width: auto;
}

#username-login {
  margin-right: 30px;
}

.no-left-space {
  margin-left: 0;
  padding-left: 0;
}

.pointer {
  cursor: pointer;
}

.sub-align {
  vertical-align: sub;
}


.bold-text {
  color: #000;
  font-size: 16px;
  font-weight: 700;
}

.error-ul {
  list-style: none;
  padding-left: 0px;
}

.button-transparent {
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}


.banner-modal-content {
  width: 80vw !important;
  min-height: 70vh;
}


#logout-form {
  display: inline;
  font-size: 14px;
}


.ul-right {
  margin-left: auto;
    right: -55px;
    width: 5px;
}


.bottom-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.powered-by-logo {
  width: 129px;
  height: 51px;
}

.supplier-hub-logo {
  width: 162px;
  height: 31px;
}

/* Confirmation Modal Styling */
.confirmation-modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.confirmation-modal-content {
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
  max-height: 270px;
  height: 100%;
  padding: 20px;
}

/* Images Modal Styling */

.images-modal-content {
  display: flex;
  align-items: flex-start;
  border-radius: 8px;
  max-width: 502px;
  width: 100%;
  height: 275px;
  padding: 15px;
  position: relative;
  left: 600px;
  top:400px;
  border: whitesmoke;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.25);

}