/* Color Theme Swatches in Hex */
@font-face {
  font-family: "Montserrat-Bold";
  src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat-Reg";
  src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.add-comment {
  text-decoration: none;
  color: var(--midnight-hover) !important;
}
.comment-box-cont {
  height: 0px;
  overflow: hidden;
  transition: height 0.35s ease;
}
.comment-box-cont-visible {
  height: 144px;
}
.like-num {
  padding: 0px;
  padding-left: 2px;
  padding-right: 4px;
  padding-bottom: -1px;
  margin-bottom: 3px;
  margin-top: 2px;
  border-radius: 4px;
}
.border-y {
  border-top: 1px solid var(--light-gray);
  border-bottom: 1px solid var(--light-gray);
  margin-top: 5px;
  padding-top: 5px;
  margin-bottom: 5px;
  padding-bottom: 5px;
}
.comment-box-top {
  color: rgb(135, 135, 135);
  background-color: rgb(242, 242, 242);
  border-radius: 4px 4px 0px 0px;
  border: 2px solid rgb(212, 212, 212);
  border-bottom: 0px;
  padding-left: 4px;
  padding-right: 4px;
  height: 108px;
}
.comment-box-bottom {
  background-color: rgb(242, 242, 242);
  border-radius: 0px 0px 4px 4px;
  border: 2px solid rgb(212, 212, 212);
  border-top: 0px;
  padding-left: 4px;
  padding-right: 4px;
  height: 36px;
}
.jcc {
  justify-content: center;
}
.aic {
  align-items: center;
}
.floating-box {
  box-shadow: 
      0px 2px 4px rgba(0, 0, 0, 0.2),   /* First shadow */
      0px 3px 10px rgba(0, 0, 0, 0.19); /* Second shadow */
}
.no-scroll {
  overflow: hidden;
}
.bbd {
  border: 1px solid red;
}
ul {
  padding-left: 0px;
}
/* <div id="groupImgCont" style="margin: 25px; height: 50px; width: 50px; border: 1px solid red;">
<img class="groupImg" style="height: 100%; width: auto;" src="assets/img/banners/pexels-ar15.jpg"> */
.group-results {
  display: flex;
  align-items: flex-start;
  /* border: 1px solid pink; */
}
.group-details {
  flex-grow: 1;
  width: 1%;
}
.changeDivVisBtn {
  /* style="top:50%; right:0%; margin-right: 2px; transform: translatey(-50%); border: 0px solid lime;"   */
  top: 50%;
  right: 0%;
  margin-right: 2px;
  transform: translatey(-50%);
  border: 0px solid lime;
}
.group-title, .group-description {
  margin-left: 5px;
  margin-right: 5px;
  flex-grow:1;
}
.groupImgCont {
  /* style="margin: 25px; height: 50px; width: 50px; border: 1px solid red;"   */
  margin: 5px;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  border: 0px solid red;
  overflow: hidden;
}
.groupImg {
  position: relative;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.groupNav li:last-child {
  border-bottom: 1px solid gray;
}
.group-list {
  text-align: center;
  list-style-type: none;
  padding-left: 0px;
  margin-left: 0px;
  border-top: 1px solid gray;
  padding-top: 3px;
  padding-bottom: 3px;
  /* border: 1px solid green; */
}
.box {
  position: absolute;
  background-color: white;
  height: calc(100vh - 110px);
  width: 93%;
  border: 1px solid var(--blue);
  /* border-radius: 3px; */
  left: -93%;
  /* left: 0px; */
  top: 0px;
  transition: left 0.3s ease, top 0.3s ease;
  z-index: 1000;
  margin-top: 0px;
}
.uploadBox {
  display:flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.move {
  left: 0;
  top: 0px;
}
.carrot-right {
  position: absolute;
  top: 50%;
  left: 50%;
  /* color: rgba(0, 0, 0, 0.35); */
  font-size: 16pt;
  transform: translate(-50%, -50%);
}
.menuBtn {
  /* border-radius: 0% 50% 50% 0%; */
  border-radius: 0px 7px 7px 0px;
  margin-top: 2px;
  left: 100%; /* borders on the bigger box add 2px, so to get them the borders to overlap, we must move the width of both sides' border */
  top: -1px;
  height: 35px;
  width: 30px;
  position: absolute;
  padding: 2px;
  border: 1px solid var(--default-gray);
}

.test-border {
  border: 0px solid red;
}
.bg-light-75 {
  background-color: rgba(248, 249, 250, 0.8);
}
.bg-light-gray {
  background-color: var(--light-gray);
}
.bg-default-gray {
  background-color: var(--default-gray);
}
.h-full {
  height: calc(100vh - 80px);
}
.nav-margins {
  display: flex !important;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  height: 50px;
}
.side-control-page-1 li {
  list-style: none;
  /* height: auto;
  display: inline-block;
  margin-left: 4px;
  margin-top: 6px;
  position: relative; */
}
.translate-x-neg-50 {
  transform: translateX(-50%);
}
.translate-x-pos-50 {
  transform: translateX(50%);
}
.translate-y-neg-50 {
  transform: translateY(-50%);
}
.translate-y-pos-50 {
  transform: translateY(50%);
}
.tool_bar {
  border-radius: 12px 12px 0px 0px;
  background-color: var(--dusk);
  text-align: center;
  font-weight: bold;
  color: var(--cream);
  min-height: 5vh;
  border: 1px solid var(--dusk);
  border-top: 1px solid rgb(112, 112, 112);
}
.v-center {
  display: flex;
  align-items: center;
}
.image-container {
  background-color: rgb(224, 238, 255);
  border-radius: 0px 0px 12px 12px;
  height: 30vh;
}
.no-bullet {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* This is where we do the styling of the `change_profile_pic.php` */

.round-profile-pic {
  border-radius: 50%;
}
.my-listing-card {
  min-height: 200px;
}
.nav-tab-midnight {
  background-color: var(--midnight);
  width: 100%;
  color: rgb(216, 216, 216);
  border-radius: 10px 10px;
}
.nav-tab-light {
  background-color: white;
  width: 100%;
  color: var(--midnight);
  border-radius: 10px 10px;
  border-color: var(--midnight);
}
.cursor-pointer {
  cursor: pointer;
}
#send_message:focus {
  border-color: var(--blue);
  outline: none;
  min-height: 42px;
}
#send_message {
  font-family: "Roboto", sans-serif;
  color: var(--midnight);
  border-color: var(--blue);
  font-size: 12pt;
  width: 100%;
  line-height: 15pt;
  height: 42px;
  padding-left: 5px;
  border-radius: 10px;
  overflow-y: hidden;
}
.bg-send-message {
  border: 1px solid var(--blue);
}
.border-dusk {
  border: 1px solid var(--dusk);
}
.border-quick-search {
  border: 1px solid var(--quick-search);
}
/* #quick_search:focus{
    border: 1px solid var(--quick-search);
} */
#quick_search:focus {
  border-color: var(--quick-search);
  outline: none;
}
[contenteditable] {
  outline: 0px solid transparent;
}
#quick_search {
  font-family: "Roboto", sans-serif;
  color: var(--quick-search);
  font-size: 14pt;
  width: 100%;
  line-height: 10pt;
  height: 40px;
  padding-left: 15px;
}
#quick_search::placeholder {
  text-indent: 15px;
  font-family: "Roboto", sans-serif;
  color: var(--quick-search);
  /* color: red; */
  font-size: 12pt;
}
.bg-robins-egg {
  background-color: var(--robins-egg);
}
.label-name {
  font-family: "roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.round_profile_pic {
  height: 41px;
  width: 41px;
  border-radius: 50%;
}
.snbi-logo {
  height: 40px;
}
.pt-10 {
  padding-top: 10px;
}
.dropshadow {
  /* background-color: #f0f0f0; */
  box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.5);
}

:root {
  --dark-blue: #011c26;
  --navy: #1a3540;
  --light-tan: #ffffff;
  --med-tan: #ffe4cc;
  --dark-tan: #8c6c5a;
  --platinum: #e1e3e2ff;
  --nickel: #eeeeee;
  --dark-light: #d1d1d1;
  --wine: #581d2cff;
}

.btn-dark-blue {
  background-color: var(--dark-blue);
}
.btn-dark-light {
  background-color: var(--dark-light);
}
.btn-navy {
  background-color: var(--navy);
}
.btn-light-brown {
  background-color: var(--light-tan);
}
.btn-med-brown {
  background-color: var(--med-tan);
}
.btn-dark-brown {
  background-color: var(--dark-tan);
}
.btn-platinum {
  background-color: var(--platinum);
}
.btn-nickel {
  background-color: var(--nickel);
}
.btn-wine {
  background-color: var(--wine);
}

.btn-dark-blue:hover {
  background-color: var(--dark-light);
  opacity: 50%;
}
.btn-dark-blue:hover {
  background-color: var(--dark-blue);
  opacity: 50%;
}
.btn-navy:hover {
  background-color: var(--navy);
}
.btn-light-brown:hover {
  background-color: var(--light-tan);
}
.btn-med-brown:hover {
  background-color: var(--med-tan);
}
.btn-dark-brown:hover {
  background-color: var(--dark-tan);
}
.btn-platinum:hover {
  background-color: var(--platinum);
}
.btn-nickel:hover {
  background-color: var(--nickel);
}
.btn-wine:hover {
  background-color: var(--wine);
  opacity: 50%;
}

.bg-dark-blue {
  background-color: var(--dark-blue);
}
.bg-dark-light {
  background-color: var(--dark-light);
}
.bg-navy {
  background-color: var(--navy);
}
.bg-light-brown {
  background-color: var(--light-tan);
}
.bg-med-brown {
  background-color: var(--med-tan);
}
.bg-dark-brown {
  background-color: var(--dark-tan);
}
.bg-platinum {
  background-color: var(--platinum);
}
.bg-nickel {
  background-color: var(--nickel);
}
.bg-wine {
  background-color: var(--wine);
}
.text-dark-blue {
  color: var(--dark-blue);
}
.text-dark-light {
  color: var(--dark-light);
}
.text-navy {
  color: var(--navy);
}
.text-light-brown {
  color: var(--light-tan);
}
.text-midnight-hover {
  color: var(--midnight-hover);
}
.text-med-brown {
  color: var(--med-tan);
}
.text-dark-brown {
  color: var(--dark-tan);
}
.text-platinum {
  color: var(--platinum);
}
.text-nickel {
  color: var(--nickel);
}
.text-wine {
  color: var(--wine);
}
.pw-input:not(:placeholder-shown) {
  background-color: var(--dark-blue);
  color: var(--nickel);
}
.h1 {
  font-family: "Montserrat-Bold", sans-serif; /* Fallback font in case the custom font doesn't load */
  font-weight: normal; /* This should match the font-weight in your @font-face rule */
  font-style: normal; /* This should match the font-style in your @font-face rule */
}

.disabled-form-input {
  background-color: #e9ecef;
  border-radius: 5px;
  border: 1px solid #dee2e6;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding-left: 12px;
}
.w-md-50 {
  width: 100px !important;
}
.file-upload {
  font-size: 92pt;
}
.heightAdjust {
  height: 135px;
}
/* Extra small devices (phones, less than 576px) */
/* No media query for 'xs' since this is the default in Bootstrap */
/* Small devices (landscape phones, 576px and up) */
.result-style {
  width: 50% !important;
  min-height: 10rem;
}
@media only screen and (min-width: 576px) {
  /* Styles */
  .navbar-brand img {
    left: 1.5rem;
  }
  .navbar-nav {
    margin-left: 5rem;
  }
  .heightAdjust {
    height: 165px;
  }
}
/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  /* Styles */
  .file-upload {
    font-size: 148pt;
  }
  .navbar-brand img {
    left: 3.5rem;
  }
  .mx-sm-2 {
    margin: 3rem !important;
  }
  .snbi-card {
    border-radius: 70px;
  }
  .heightAdjust {
    height: 425px;
  }
  .result-style {
    width: 100% !important;
    min-height: 15rem;
  }
  .nav-margins {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
  }
}
/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /* Styles */
  .mt-125 {
    margin-top: 125px;
  }
  .navbar-brand img {
    left: 5rem;
  }
  .snbi-card {
    border-radius: 70px;
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  /* Styles */
  .snbi-card {
    border-radius: 70px;
  }
}
/* Extra extra large devices (extra large desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {
  /* Styles */
  .snbi-card {
    border-radius: 70px;
  }
}
.actionBtns {
  position: relative;
  width: 100%; /* Responsive width */
  overflow: hidden; /* Hide parts of the image outside the square */
}
.modal-title,
.modal-header {
  background-color: var(--midnight);
  color: var(--cream);
}
.message-list-title {
  font-weight: bold;
}
.message-list-text {
  font-size: 10pt;
  line-height: 12pt;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-listing-title {
  font-family: "Montserrat-Bold";
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit text to two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.35rem;
}
.font-montserrat {
  font-family: "Montserrat-Reg";
}
.font-montserrat-bold {
  font-family: "Montserrat-Bold";
}
.seller-name {
  font-family: "Montserrat-Bold";
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Limit text to two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* min-height:2.35rem; */
}
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.message-timestamp {
  font-size: 9pt;
}
.message-list-item {
  margin-top: 3px;
  margin-bottom: 3px;
  box-shadow: 1px 3px 5px 1px rgba(0, 0, 0, 0.4);
}
.fs-8 {
  font-size: 8pt;
}
.fs-9 {
  font-size: 9pt;
}
.fs-10 {
  font-size: 10pt;
}
.fs-12 {
  font-size: 12pt;
}
.h6-mont-title {
  font-weight: bold;
  font-family: "Montserrat-Bold";
  color: var(--midnight);
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Limit text to two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  color: var(--cream);
  /* background-color: #f9f9f9; */
  background-color: var(--dusk);
  min-width: 9rem;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0px;
}

.dropdown-menu a {
  /* color: black; */
  color: var(--cream);
  padding: 2px;
  text-decoration: none;
  display: block;
  text-align: center;
  font-size: 10pt;
}
.dropdown-menu a:hover {
  /* background-color: var(--menu-); */
  background-color: var(--dusk-hover);
}

.dropdown-container {
  position: relative;
  display: inline-block;
}

.h6-mont {
  font-weight: bold;
  font-family: "Montserrat-Bold";
  color: var(--midnight);
}
.action-buttons {
  margin-left: auto;
  margin-right: auto;
  min-height: 2.5rem;
}
.btn.disabled {
  pointer-events: none; /* Prevnts click events */
  opacity: 0.65; /* Makes it look disabled */
}
.btn-listing-active,
.btn-listing-active:active {
  color: var(--true-white) !important;
  background-color: var(--midnight) !important;
}
.btn-listing-inactive,
.btn-listing-inactive:active {
  color: var(--midnight);
  background-color: var(--true-white) !important;
  border: 1px solid var(--midnight) !important;
}

.description-holder {
  line-height: 12pt;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* Limit text to two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.view-listing-description {
  font-size: 12pt;
}
.my-listing-description {
  display: -webkit-box;
  -webkit-line-clamp: 4; /* Limit text to two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.35rem;
}
.prev-btn,
.next-btn {
  color: lime;
  background-color: transparent; /* Remove background color */
  border: none; /* Remove border */
  box-shadow: none; /* Remove any shadow */
  z-index: 10;
  opacity: 0.5;
}
.prev-btn {
  position: absolute;
  top: 50%;
  left: 5px;
}
.next-btn {
  position: absolute;
  top: 50%;
  right: 5px;
}
.container-size-md {
  width: 50% !important;
}
.listing-title {
  font-family: "Montserrat-Bold";
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit text to two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 3.25rem;
}
.listing-title-sm {
  font-family: "Montserrat-Bold";
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit text to two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.25rem;
}
.listing-description {
  line-height: 15pt;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: scroll;
  text-overflow: ellipsis;
  min-height: 2.35rem;
}
.fs-20 {
  font-size: 20pt;
}
.fs-18 {
  font-size: 18pt;
}
.fs-16 {
  font-size: 16pt;
}
.fs-14 {
  font-size: 14pt;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.listing-img {
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.55);
  /* background-color: rgba(189, 48, 48, 0.363); */
}
.listing-img-wrapper {
  position: relative;
  /* margin-left: auto; */
  /* margin-right: auto; */
}
.view-sq-img-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.view-square-img {
  position: absolute;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.mobile-square-img-wrapper {
  position: relative;
  width: 50%;
  height: 100% !important;
  overflow: hidden;
}
.mobile-square-img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* width: 100%; */
  /* height: auto; */
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.square-img-wrapper {
  position: relative;
  width: 100%;
  height: 50% !important;
  overflow: hidden;
}
.square-img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* width: 100%; */
  /* height: auto; */
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.listing-loc-price {
  margin-top: auto;
  margin-left: 2px;
  margin-right: 4px;
}
.imgHolder {
  background-color: rgb(209, 209, 209);
  height: 100%;
  animation: skeleton-loading 1.5s infinite ease-in-out;
}
@keyframes skeleton-loading {
  0% {
    background-color: rgb(209, 209, 209);
  }
  50% {
    background-color: rgb(173, 173, 173);
  }
  100% {
    background-color: rgb(209, 209, 209);
  }
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.image-lib-container {
  position: relative;
  overflow: hidden;
}
.image-lib {
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
nav {
  /* background-color: var(--nickel) !important; */
}
body {
  /* background-color: var(--dark-blue); */
  background-color: var(--cream);
}
body.body-top-margin {
  /* height: 100%; */
  height: calc(100vh - 110px);
}
.pt110 {
  padding-top: 110px;
}
.send-img-message {
  background-color: var(--cream);
}
.dropdown-toggle {
  color: var(--dusk);
}
.dropdown-toggle::after {
  border-top-color: var(
    --cream
  ); /* Change the top border to your custom color */
  border-bottom-color: var(
    --cream
  ); /* Change the bottom border to your custom color */
  /* Optionally, adjust other border properties if needed */
}
.glow-green,
.glow-green:focus {
  box-shadow: 0 0 10px 2px rgba(0, 255, 0, 0.7); /* Adjust the color and intensity here */
  border-color: rgba(
    0,
    255,
    0,
    0.7
  ); /* Optional: change the border color to match the glow */
}
.glow-red,
.glow-red:focus {
  box-shadow: 0 0 10px 2px rgba(255, 63, 137, 0.7); /* Adjust the color and intensity here */
  border-color: rgba(255, 63, 137, 0.7);
}

.fade-out-250 {
  animation: fadeOut 250ms forwards;
}

.fade-out-500 {
  animation: fadeOut 500ms forwards;
}

.fade-out {
  animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

.fade-out-red-glow {
  animation: fadeOutRedGlow 1s forwards;
}

@keyframes fadeOutRedGlow {
  from {
    box-shadow: 0 0 10px 2px rgba(255, 63, 137, 0.7); /* Adjust the color and intensity here */
    border-color: rgba(255, 63, 137, 0.7);
  }
  to {
    box-shadow: 0 0 10px 2px rgba(255, 63, 137, 0); /* Adjust the color and intensity here */
    border-color: rgba(255, 63, 137, 0);
  }
}
.fade-out-green-glow {
  animation: fadeOutGreenGlow 1s forwards;
}

@keyframes fadeOutGreenGlow {
  from {
    box-shadow: 0 0 10px 2px rgba(0, 255, 0, 0.7); /* Adjust the color and intensity here */
    border-color: rgba(0, 255, 0, 0.7);
  }
  to {
    box-shadow: 0 0 10px 2px rgba(0, 255, 0, 0); /* Adjust the color and intensity here */
    border-color: rgba(0, 255, 0, 0);
  }
}
.papaRow {
  height: calc(100vh - 110px);
  border: 1px solid lime;
}
#modalCloseBtn {
  transform: translate(-100%, 0%);
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.5);
  /* z-index: 1060; */
}
.row1 {
  background-color: rgb(224, 238, 255);
}
.row2 {
  background-color: rgb(239, 253, 255);
  margin-top: 3px;
  margin-bottom: 3px;
}