body {
  background-image: linear-gradient(0deg, #515266, #515266) !important;
}
#custom-install-popup {
  position: fixed;
  bottom: 65px;
  width: 100%;
  max-width: 295px;
  left: 50%;
  transform: translateX(-50%);
  background: #4a4a57;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
#custom-install-popup svg {
  fill: #fff;
}
.cancel-pop svg {
  position: absolute;
  top: 6px;
  font-weight: 700;
  right: 6px;
}
.cancel-pop:hover {
  color: #00fff0 !important;
}
.cancel-pop:focus {
  color: #00fff0 !important;
}
.spinner-border {
  position: absolute;
  top: 40%;
  left: 50%;
}
.custm-back-style a {
  text-decoration: underline !important;
}
.custm-back-style a {
  color: #00fff0 !important;
}
.custm-back-style a:hover {
  color: #fff !important;
}
.custm-back-style a:focus {
  color: #fff !important;
}

.row.mb-0.mt-2.race-type {
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
.col-6.race-type-styles {
  padding-left: 12px;
}
.styles-race {
  margin-bottom: 12px !important;
}
/* .custm-dash-board-styls .card {
  position: relative;
  padding-bottom: 56.25%; 
  height: 100%;
  overflow: hidden;
}
.custm-dash-board-styls .card video.img-fluid.video {
  position: absolute;
  top: 75px;
  left: 0;
  width: 100%;
  height: 70%;
  object-fit: cover; 
}
.comments-sec-style {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.custm-dash-board-styls  .img-fluid {
  position: absolute !important;
  top: 75px !important;
  left: 0 !important;
  width: 100% !important;
  height: 70% !important;
  object-fit: cover; 
} */

.logo {
  display: flex;
  justify-content: center;
  width: 313px;
  margin: auto;
}
.logo img {
  width: 100%;
  margin-bottom: 48px;
  margin-top: 80px;
}
.t-input {
  background: transparent !important;
}
.tb-c a {
  font-size: 16px;
  color: #bbbec3;
  background-color: transparent;
}
.tab-controls.tabs-medium.tabs-rounded.custm-bg-styles-follore {
  background: transparent !important;
}
.s-head {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
}
.duwpb {
  font-size: 16px !important;
  margin-bottom: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0.5px;
}
.h-ic {
  color: white;
  background-color: black !important;
  border-radius: 8px !important;
  text-align: center;
  line-height: 49px;
  font-size: 12px;
  border: none;
  padding: 13px 13px;
}
.card.card-style.custm-event-list-sec.custm-list-view-styles img {
  margin-top: 5px;
}
.color-grey {
  color: #bbbec3;
}
.custom-card {
  width: 313px;
  margin: auto;
}
.signup-head {
  background-color: transparent;
  border-bottom: none;
  box-shadow: none;
  padding-top: 13px;
  padding-left: 13px;
  position: unset !important;
  margin-bottom: 15px;
}
#footer-bar {
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}
.otp-form {
  display: flex;
  justify-content: center;
}
.otp-form input {
  width: 45px;
  background-color: transparent;
  border: 1px solid #75797f;
  border-radius: 8px;
  margin-right: 5px;
  margin-bottom: 48px;
  padding: 5px 5px;
  text-align: center;
}
.p-c {
  color: #bbbec3;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
  margin-bottom: 32px !important;
}
/* .theme-dark .tab-controls,
.theme-dark .header {
  background-color: unset !important;
} */
.custom-btn {
  margin: 0px 16px 30px 16px;
}
.custom-form-p {
  line-height: 18px;
}
.invalid-field + p {
  display: block;
  color: red;
  line-height: 14px;
  font-size: 12px;
  margin-bottom: 0;
  margin-top: 16px;
}
.first-msg {
  padding: 24px 8px;
}
.valid-field + p {
  display: none;
}
.image-preview,
.cropper-preview,
.image-preview-profile,
.image-preview-post {
  width: 100%;
  height: auto;
  /* min-height: 180px; */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3e3e3e;
  border-radius: 10px;
  position: relative;
}
/* .cropper-preview{
  display: none;
} */
.image-preview {
  height: auto;
  min-height: 200px;
}
.right-sec-head a {
  text-transform: capitalize;
}
.my-events-styless {
  height: 20px;
}
.vehicle-post-container .card-style img.img-fluid {
  height: auto !important;
}
.image-preview .img-pre,
.image-preview-profile .img-pre,
.image-preview-post img {
  /* display: none; */
  width: 100%;
  height: auto !important;
  object-fit: cover;
  /* min-height: 180px; */
  border-radius: 10px;
}
.image-preview .img_icon,
.image-preview-post .img_icon,
.profile-image .img_icon {
  font-size: 30px;
  color: #8d9299;
}
#profile-image {
  width: 100px;
  height: 100px;
  border-radius: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3e3e3e;
  margin: auto;
}
#profile-image .profile_pre {
  /* display: none; */
  width: 100%;
  height: 100px;
  border-radius: 54px;
}
.header-clear-medium {
  padding-top: 0px !important;
}
.header-logo-custom {
  width: 220px;
}
/* #reset-btn,
#save-btn,
#save-btn-profile,
#reset-btn-profile,
#reset-btn-profile-ep {
  display: none;
} */
/* custm css */
.mod_dot {
  background: #353636;
  border-radius: 8px;
  padding: 8px 10px 8px 10px;
  line-height: normal;
}
.user_sec {
  display: flex;
  gap: 8px;
  width: 100%;
}
.custm-profile-img-styles img {
  margin-right: 0;
}
.custm-share-profile-style h1 {
  padding-left: 0;
}
.custm-share-profile-style p {
  margin-left: 0;
}
.custm-share-profile-style input {
  padding-left: 0;
}
.user_name img {
  width: 12px;
  height: 14px;
}
a:hover {
  color: #fff !important;
}
._main_iiner {
  padding: 16px;
  border-bottom: 1px solid #464747;
  background: #505165;
  width: 90%;
  margin-bottom: 8px;
  transform: translate3d(19.5px, 0px, 0px);
  border-radius: 8px;
}
.user_name {
  font-size: 11px;
  line-height: 16px;
  color: #bbbec3 !important;
}
.check_out_btn button {
  background-color: #00fff0;
  width: 100%;
  color: #353636;
  display: block;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  z-index: 99999999999999999999 !important;
}
.event-style {
  line-height: 28px !important;
}
.menu_img {
  width: 16px;
  margin-right: 10px;
}
.bike_img {
  width: 24px;
  margin-right: 10px;
}
.list-custom-small a {
  border-bottom: none;
}

.user_notify img {
  width: 2px;
  height: 2px;
}
.right_custom_nav {
  padding: 16px 0;
}
.active-navs {
  background: #353636;
}
.table-bg-color td {
  background: transparent !important;
  padding: 0;
}
table.table.table-bg-color {
  background: transparent !important;
  border: transparent;
}
span.user_notify {
  margin: 0 8px;
}
.dropdown-menu.bg-theme.border-0.shadow-l.rounded-s.me-2.mt-2.right_custom_nav.show {
  transform: translate3d(62px, 0, 0px) !important;
}
.header-logo-custom-user {
  border: 2px solid #00fff0;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.calender-icon {
  width: 20px;
}
.vehicle_footer-sec {
  position: fixed !important;
  bottom: 0;
}
.custm-profile {
  display: grid;
  /* grid-template-columns: auto auto; */
  grid-template-columns: 1fr 1fr;
  padding: 0 16px;
  margin-right: 0;
  gap: 16px;
  margin-left: 0;
}
.custm-product {
  width: 100%;
}
.custm-product img.img-fluid.h-25 {
  object-fit: contain;
  height: 100% !important;
}
.post-img {
  width: 40px;
  height: 40px;
}
.activate-sec .page-content.header-clear-medium {
  height: 100vh;
  padding-bottom: 0;
}
.upload-clodse-icon a {
  top: 10px;
  right: 12px;
}
.list-group .box-img img {
  width: 40px !important;
  height: 40px;
  max-width: 40px;
  border-radius: 50px;
  border: 2px solid #37bc9b;
}
.list-group button {
  padding: 8px 24px !important;
}
.custm-search-sec {
  margin-top: 66px;
}
/* .custm-inpuit-text-colors-style
  .device-is-android
  .input-style
  input[type="date"] {
  color: #fff !important;
} */
.row.mb-0.custm-inpuit-text-colors-style {
  color: #fff !important;
}
.row.mb-0.custm-inpuit-text-colors-style small {
  color: #6c6c6c;
}
/* Change background color of select dropdown */
#lang-switch.form-control {
  background-color: transparent !important; /* Your desired background color */
  color: white; /* Text color */
  font-size: 13px;
  font-weight: 500;
}

/* Change background color of option elements */
#lang-switch.form-control option {
  background-color: #0f1117; /* Same or different background color */
  color: white; /* Text color */
}
/* Change background color and text color for the dropdown options */
#lang-switch.form-control option {
  background-color: #0f1117 !important; /* Custom background color */
  color: white; /* Text color */
}

#lang-switch .form-control option:hover {
  box-shadow: 0 0 10px 100px #535556 inset !important;
}

/* For hover effect, you can try the following, but it might not work in all browsers */
#lang-switch.form-control option:hover {
  background-color: #ff5a33 !important; /* Custom hover background */
  color: white; /* Hover text color */
}
/* Change the dropdown arrow color */
#lang-switch.form-control {
  -webkit-appearance: none; /* Remove default arrow in webkit browsers */
  -moz-appearance: none; /* Remove default arrow in firefox */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 5l6 6 6-6z'/%3E%3C/svg%3E"); /* White dropdown arrow */
  background-repeat: no-repeat;
  background-position: right 10px center; /* Positioning of arrow */
  background-size: 12px;
  padding-right: 30px; /* Ensure padding for the arrow */
}
.sticky-sec-top-style p {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}
.bg-color-events-members {
  background: #353636;
}
.custom-notification-sec {
  background: #353636 !important;
}
/* .card.card-style.custom-notification-sec.bg-read {
  background: #464747 !important;
} */
.custom-notification-sec .card card-style {
  position: relative;
}
.custom-notification-sec .no-chats-message {
  position: absolute;
  top: 10px;
  left: 10px;
}
#notification .menu-title {
  position: fixed;
  top: 0;
}
#notification .content {
  /* height: 88vh; */
  overflow: auto;
}
.mod_dot {
  position: relative;
}
.notification-icons svg {
  position: absolute;
  top: 7px;
  right: 9px;
}
.notification-icons {
  display: none;
}
/* #add-members .btn-positions {
  position: fixed;
  width: 100% !important;
  bottom: -14px;
} */
#add-members .btn-positions {
  position: -webkit-sticky; /* Use sticky positioning as a fallback for iOS */
  position: fixed;
  width: 100% !important;
  bottom: 0; /* Ensure it's at the bottom */
  left: 0; /* Ensure full width is used and aligned properly */
  z-index: 1000; /* Ensures it stays on top of other content */
  -webkit-transform: translateZ(0); /* Promote layering on iOS */
}
#add-members form#group-members {
  padding-bottom: 38px;
}

.main-cross-icons-sec .upload-clodse-icon {
  position: relative;
}
.main-cross-icons-sec .upload-clodse-icon .close-menu {
  top: 6px;
  right: 10px !important;
}
.custm-input-icons-styles .commentInput {
  padding-right: 34px;
}
#personal input {
  padding-right: 20px;
}
#personal #password {
  padding-right: 40px;
}
#personal #password-2 {
  padding-right: 40px;
}
#notification-card .notification-msg {
  font-size: 16px;
  color: #bbbec3;
  font-weight: 500;
}
.serach-user-box-img img {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  border: 2px solid #00fff0;
}
.pop-btn-share .h-ic {
  line-height: 12px;
}
.chat-link {
  position: relative; /* Ensure parent element is relatively positioned */
  display: inline-block;
}

.notify-icon {
  position: absolute;
  top: 0px;
  right: 0;
  width: 10px;
  height: 10px;
}

.notify-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.profile-block .cover {
  width: 100% !important;
  height: auto;
  object-fit: cover;
  /* min-height: 180px; */
}
.send-icon-profile-comments1 {
  top: 14px !important;
}
#profile-post-container button.comment-btn.position-absolute.profile-mt-style {
  top: 0;
  margin-top: 10px;
}
#vehicle-post-container button.comment-btn.position-absolute.profile-mt-style {
  top: 0;
  margin-top: 10px;
}
.dymnamic-img {
  margin-top: 24px;
}
.profile-comments-img {
  line-height: 40px !important;
}
.image-preview-post {
  height: auto;
  min-height: 180px;
}
input.form-control.commentInput {
  padding-right: 34px;
}
@media (max-width: 768px) {
  .right_custom_nav {
    width: 84%;
    margin: 0px;
    transform: translate3d(70px, 52px, 0px);
  }
  .profile-block .cover {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* min-height: 180px; */
  }
  .bg-img-sec {
    margin-top: 72px;
  }
}
.ptc {
  font-size: 11px;
  letter-spacing: 0.6px;
}
.media-btn {
  text-align: center;
  border: solid 1px;
  border-radius: 6px;
  padding: 5px 0px;
}
.close-img-btn {
  position: absolute;
  right: 23px;
  top: 10px;
  background-color: grey;
  color: white;
  border-radius: 13px;
  padding: 3px 5px;
  border: white 1px solid;
}

.post-popup .p-box .box-img {
  width: 40px;
}
.comment-btn {
  right: 16px;
  top: 8px;
}
.custm-comments {
  justify-content: space-between;
  padding: 0 16px;
  width: 100%;
  gap: 8px;
}
.img-sec img {
  width: 32px;
  height: 32px;
  border-radius: 50px;
}
.main-cart-sec1 {
  width: 100%;
}
.card-comments {
  border-radius: 16px;
  padding: 8px 12px;
  background: #464747 !important;
}
.card-comments h6 {
  font-size: 14px;
  margin: 0;
}
.commentInput::placeholder {
  font-size: 14px !important;
}
/* h6.comments-head-txt {
  font-size: 14px !important;
} */
#search::placeholder {
  font-size: 14px !important;
}

.gallery_img_btn {
  position: absolute;
  bottom: 104px;
  left: 8px;
  background: #0f1117;
  padding: 8px;
  border-radius: 8px;
  z-index: 999999999999;
}
em {
  color: #fff;
}
.business-icon {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 18px;
  left: 11px;
}

/* CSS */
.select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.select-wrapper select {
  appearance: none; /* Removes default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff; /* Adjust background color as needed */
  border: 1px solid #464747; /* Example border */
  padding: 8px 30px 8px 10px; /* Adjust padding to make room for the icon */
  font-size: 14px; /* Adjust font size */
  cursor: pointer;
}

.select-wrapper .dropdown-icon {
  position: absolute;
  right: 10px; /* Adjust positioning as needed */
  top: 75%;
  transform: translateY(-50%);
  pointer-events: none; /* Ensures the icon doesn't interfere with select box click */
}
.vehicle-img-circle-sec .vehicleprofile-img {
  display: block;
  width: 68px;
  height: 68px;
}
.custm-vehicle-sec-input {
  position: relative;
}
img.input-vehicleprofile-img {
  position: absolute;
  top: 13px;
  left: 10px;
}
.custm-vehicle-sec-input #vehicle-nickname {
  padding-left: 40px !important;
}
.replies {
  width: 87%;
  gap: 8px !important;
  justify-content: flex-end;
  margin-left: auto;
}
.close-menu {
  right: 13px !important;
}
.custm-deader-top-icon {
  right: 94px !important;
}
.chat-icon {
  width: 22px;
}
.theme-dark .desabled-color {
  color: #9e9e9e !important;
}
.cstm-border-radust-style {
  width: 32px;
  height: 32px;
}

/* header style */
.mainhead-footer-sec {
  display: flex;
  justify-content: space-between;
  padding: 12px 8px;
  width: 100%;
  background: #494a5c;
}
.socialicons-sec {
  display: flex;
  gap: 8px;
}
.user-icons-deader {
  width: 20px;
}
.img-product {
  background: #384152;
  height: 172px !important;
}
.uploadcheck-icon .color-green-dark {
  border: 1px solid green;
  padding: 6px 8px;
  border-radius: 50px;
}
.uploadcheck-icon .color-red-dark {
  border: 1px solid red;
  padding: 6px 8px;
  border-radius: 50px;
}
.custm-color-green-dark {
  border: 1px solid green;
  padding: 6px 8px;
  border-radius: 50px;
}
.cust_icon_style {
  border: 1px solid red;
  padding: 6px 8px;
  border-radius: 50px;
}
.custm-txtx-sec {
  padding: 8px 12px;
  border-radius: 0px 0px 8px 8px;
  border-top: none !important;
  border: 1px solid #464747;
}
.crop-done {
  bottom: 0;
  right: 0;
  margin-right: 3px;
  margin-bottom: 3px;
  padding: 2px 7px;
  font-size: 13px;
}
.switchSmall2 {
  display: inline-block;
}

.switchSmall2 input {
  display: none;
}

.switchSmall2 small {
  display: inline-block;
  width: 38px;
  height: 15px;
  background: #455a64;
  border-radius: 30px;
  position: relative;
  cursor: pointer;
}

.switchSmall2 small:before {
  content: "";
  position: absolute;
  width: 19px;
  height: 19px;
  background: #fff;
  border-radius: 50%;
  top: -2px;
  left: -1px;
  transition: 0.3s;
  box-shadow: -3px 0 3px rgba(0, 0, 0, 0.25);
}

.switchSmall2 input:checked ~ small {
  background: #4fc5c5;
  transition: 0.3s;
}

.switchSmall2 input:checked ~ small:before {
  transform: translate(20px, 0px);
  transition: 0.3s;
  box-shadow: 3px 0 3px rgba(0, 0, 0, 0.25);
}
/* input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}
#event .input-style input[type="date"] {
  width: 100%;
  margin-bottom: 0 !important;
} */
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Each column will take equal space */
  grid-gap: 10px;
  width: 100%; /* Ensure the grid takes up the full width */
}

.image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3e3e3e;
  border-radius: 10px;
  position: relative;
}
.search-box.search-header.bg-theme.card-style.me-3.ms-3.custm-search-sec {
  border-radius: 0 0 15px 15px;
}
.search-box.search-header.bg-theme.card-style.me-3.ms-3 {
  border-radius: 0 0 15px 15px;
}
.image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.remove-btn {
  position: absolute;
  top: 0px;
  right: -4px;
  /* background-color: rgba(0, 0, 0, 0.5); */
  color: white;
  border: none;
  padding: 2px 5px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 12px;
}
#photo-count {
  display: block;
}
.image-placeholder .img_icon {
  font-size: 30px;
}
.custm-event-list-sec {
  position: relative;
  margin-top: 8px;
}
.txtevent-list {
  position: absolute;
  bottom: 106px;
  left: 16px;
  background: #ffffff;
  border-radius: 4px;
  padding: 2px 6px;
  box-shadow: 0px 0px 200px 0px #aeaeae;
}
.joinn-custm-btn {
  display: flex;
  width: 100px;
  padding: 8px 16px !important;
  justify-content: center;
  align-items: center;
  border: 1px solid #8d9299;
  gap: 6px;
  font-family: Roboto, sans-serif;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 133.333% */
}
a.btn.btn-m.rounded-xs.btn-center-l.text-uppercase.font-900.text-dark.cutm-create-btn {
  color: #353636 !important;
  border-radius: 8px !important;
  background: #00fff0 !important;
}
.events_main-sec {
  height: 100vh; /* Set height to the full viewport height */
  background-image: linear-gradient(0deg, #343341, #535468) !important;
  background-color: #1b1d21 !important;
  position: relative;
}
.events_main-sec .page-content.header-clear-medium {
  height: 100vh;
}
.events_main-sec .page-content.header-clear-medium {
  padding: 0 !important;
}
.events_main-sec div#page {
  padding: 0 !important;
}

.events_main-sec .card-center {
  text-align: center;
  padding: 20px;
}

.events_main-sec .card-overlays {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, #343341, #535468) !important;
  background-color: #1b1d21 !important;
}

.events_main-sec .card-styles {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  position: relative;
  height: 100% !important; /* Ensure the card takes the full height */
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.events_main-sec .card-center {
  text-align: center;
  z-index: 1; /* Ensure it appears above overlays */
}

.events_main-sec .card-overlays {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.text_sec_events_details {
  border-top: 1px solid #6b6b6b;
  padding: 8px 0;
}
.text_sec_events_details-style {
  border-top: 1px solid #6b6b6b;
  border-bottom: 1px solid #6b6b6b;
  padding: 16px 0;
}

.organiser-card {
  display: flex;
  align-items: center;
  margin: auto;
}

.organiser-info {
  display: flex;
  align-items: center;
  width: 50%;
  margin-bottom: 20px;
}

.organiser-details {
  position: relative;
  margin-right: 15px;
}

.organiser-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid white;
  object-fit: cover;
}

.overlay-image {
  position: absolute;
  left: 35px;
  top: 0;
}

.organiser-name p {
  color: white;
  font-weight: bold;
}

.role {
  color: #b3b3b3;
  font-size: 14px;
}

.interested-info {
  flex: 1;
}

.interested-text {
  color: white;
  font-weight: bold;
  margin: 0;
}

.interested-names {
  color: #b3b3b3;
  font-size: 14px;
  margin: 5px 0 0;
}

.interested-list {
  display: flex;
  align-items: center;
}

.avatars {
  display: flex;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid white;
  object-fit: cover;
  margin-left: -10px;
}

.show-all {
  color: #00bcd4;
  margin-left: 10px;
  font-size: 14px;
  text-decoration: none;
}

.edit-button button {
  padding: 10px 20px;
  background-color: #353636;
  color: white;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

.edit-button button:hover {
  background-color: #444;
}

a.font-800.text-white.edit-custm-btn.w-100 {
  text-align: center;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #8d9299;
}
.gallery-organiser img {
  border-radius: 8px;
}
a.rounded-xl.shadow-xl.text-capitalize.font-800.text-white.dot-custm-btn {
  border: 1px solid #8d9299;
  padding: 8px;
}
.events_details_main-sec .page-content.header-clear-medium {
  padding: 0;
}
.events_details_main-sec div#page {
  padding-bottom: 16px !important;
}

.custm-product img.img-fluid.h-25 {
  object-fit: cover;
  height: fit-content !important;
  min-height: 172px;
}
.img-product {
  background: #384152;
  /* height: 172px !important; */
  min-height: 172px;
}
.custm-product img.img-fluid.h-25 {
  object-fit: cover;
  height: 100% !important;
  /* height: fit-content !important; */
  min-height: 172px;
}

.img-product {
  height: 200px; /* Set the height of the image container */
  overflow: hidden; /* Hide any overflow */
  position: relative;
  background-color: #f8f8f8; /* Optional: Background color if the image doesn't fill the container */
}

.img-product-fit {
  width: 100%; /* Make the image take up the full width of its container */
  height: 100%; /* Make the image take up the full height of its container */
  object-fit: cover; /* Ensure the image covers the container without distorting */
  position: absolute; /* Position the image absolutely within its container */
  top: 0;
  left: 0;
}

.custm-product {
  border: none;
}
h5,
h4.user_name {
  color: #333;
}
.follow-followers {
  height: auto;
}

/* header sec start */
/* .heade-main_sec {
  position: sticky;
  top: 0;
  z-index: 1000; 
  background-color: #505164; 
} */
.heade-main_sec {
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0 auto;
  max-width: 1100px;
  z-index: 1000;
  background-color: #505164;
}
.dropdown-menu {
  overflow: auto;
  height: 100vh;
}
#chat-container p {
  color: #bbbec3 !important; /* Assuming 'text-white' applies white color */
}
.bg-primary.text-white.rounded-3 {
  background: #464747 !important;
}
.bg-secondary.text-white.p-3.ms-2.rounded-3 {
  background: #595e65 !important;
}
.small.text-end.mb-0.text-white.ms-2 {
  color: #bbbec3 !important;
}
.small.text-start.mb-0.text-white.ms-2 {
  color: #bbbec3 !important;
}
.custm_chat_width {
  width: fit-content;
  word-break: break-all;
}
#chat-container a {
  word-break: break-all;
  text-decoration: underline !important;
  color: #bbbec3;
}
.maintophead-sec .page-content.header-clear-medium {
  padding: 0;
  background: #353636;
}
.maintophead-sec div#page {
  padding-bottom: 16px !important;
}
.count-messagess {
  width: 16px;
  height: 16px;
  background: #00fff0;
  border-radius: 50px;
  color: #353636;
  padding: 2px;
}
.count-messagess p {
  color: #353636;
  font-family: Roboto, sans-serif;
  font-size: 10px;
  text-align: center;
  font-style: normal;
  font-weight: 700;
  line-height: 12px; /* 120% */
}
.hrs-sec {
  display: flex;
  flex-flow: column;
  align-self: flex-end;
  align-items: flex-end;
  flex-wrap: wrap;
  white-space: nowrap;
}

.main-head-sec {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #515266 !important;
  z-index: 1000;
  padding: 10px 15px; /* Adjust padding as needed */
}
.main-head-sec .right-sec-head a {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.custm-vehicle-sec {
  margin-top: 72px;
}
.check_out_btn.pb-5._main_iiner {
  background: transparent !important;
  padding: 0;
}
.custm-write-comments-sec .speach-icon {
  width: 40px;
  height: 40px;
}
.upload-txt-hover-style a {
  margin-bottom: 16px;
  cursor: pointer;
}
.upload-txt-hover-style a:hover {
  color: #fff !important;
  cursor: pointer;
}
.upload-txt-hover-style a:focus {
  color: #fff !important;
  cursor: pointer;
}
.custm-add-vehicle-style p:hover {
  color: #fff !important;
  cursor: pointer;
}
.custm-add-vehicle-style p:focus {
  color: #fff !important;
  cursor: pointer;
}
p#uploadButton:hover {
  color: #fff !important;
  cursor: pointer;
}
p#uploadButton:focus {
  color: #fff !important;
  cursor: pointer;
}
#uploadButton-profile:hover {
  color: #fff !important;
  cursor: pointer;
}
#uploadButton-profile:focus {
  color: #fff !important;
  cursor: pointer;
}
#profileUploadButton-ep:hover {
  color: #fff !important;
  cursor: pointer;
}
#profileUploadButton-ep:focus {
  color: #fff !important;
  cursor: pointer;
}
#profileUploadButton:hover {
  color: #fff !important;
  cursor: pointer;
}
#profileUploadButton:focus {
  color: #fff !important;
  cursor: pointer;
}
div#vehicles-list {
  padding-bottom: 16px !important;
}
.race-type p {
  word-break: break-all;
}
.custm-list-event-styles {
  word-break: break-all;
}
.input-profile-comments2 {
  padding-right: 34px;
}
.avtar-img-style img {
  margin-top: 24px;
}
.send-icon-profile-comments2 {
  top: 24px;
}
.custm-write-comments-sec .speach-icon a {
  width: 40px;
  height: 40px;
  margin-top: -8px !important;
  line-height: 55px;
}
.vehicle-img-sec-top {
  height: 500px;
  width: 100%;
  object-fit: cover;
}
.gallery-organiser .row.text-center.row-cols-3.mb-0 {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 0px 0px;
  margin-right: 0;
  gap: 8px;
  margin-left: 0;
}
.gallery-organiser a.col.mb-0 {
  padding: 0;
  width: 100%;
}

.gallery-organiser img.img-fluid.rounded-m.preload-img.entered.loaded {
  width: 100%;
  height: 100%;
  max-width: fit-content;
  object-fit: cover;
}
.maintophead-sec .page-content.header-clear-medium {
  height: 100vh;
}
.maintophead-sec div#page {
  width: 100%;
  height: 100vh;
  max-width: 1100px;
  margin: 0 auto;
}

.position-absolute.custmchat-style {
  width: 100%;
}
.custmchat-style {
  position: fixed;
  bottom: 1px !important;
  width: 100%;
  max-width: 1100px;
}
.emoji-menu {
  top: -230px !important;
}
.maintophead-sec .emoji-wysiwyg-editor:focus {
  background: #fff !important;
}
/* div#chat-container {
  padding-bottom: 40px;
      height: auto !important;
      overflow-y: scroll;
      display: flex;
      flex-direction: column !important;
      position: absolute;
      width: 100%;
      left: 0;
      padding: 0 16px;
      bottom: 35px;
} */
#chat-container p {
  /* word-break: keep-all !important; */
  margin: 0;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  letter-spacing: 0.5px;
}
#chat-container .small {
  font-family: Roboto, sans-serif;
  font-size: 10px;
  font-style: normal;
  color: #bbbec3 !important;
  font-weight: 400;
  line-height: 12px; /* 120% */
}
.maintophead-sec .emoji-wysiwyg-editor {
  background: #fff !important;
  height: 48px !important;
  width: 100%;
  max-width: 1024px;
  border-radius: 8px;
  padding: 16px 50px 12px 12px !important;
}
.emoji-picker-icon {
  top: 16px !important;
  right: 16px !important;
}
.custm-chat-sec {
  width: 92.5%;
}
.main-cross-icons-sec {
  position: fixed;
  top: 8px;
  width: 100%;
  left: 0;
}
.main-cross-icons-sec p {
  font-size: 12px;
  line-height: 16px;
  padding-top: 8px;
}
.custm-pop-sticky {
  overflow: inherit;
}
.custm-pop-sticky .content {
  height: 350px;
  overflow: auto;
  margin-top: 98px !important;
}
.custm_chat_width .bg-primary p img {
  margin-right: 8px;
  margin-bottom: 8px;
}
.custm-search-bg-color #page {
  padding: 0 !important;
  background-color: #323342;
  /* height: 100vh; */
}
.custm-search-bg-color #post-container {
  padding: 0;
  background: #505164;
  padding-bottom: 62px !important;
}
.search-box.search-header {
  position: fixed;
  top: 63px;
  margin-top: 0 !important;
  width: 100%;
  z-index: 2;
  max-width: 1069px;
}
div#event-container {
  margin-top: 132px;
  background: #515266;
}
.custm-dash-board-styls {
  padding-top: 127px;
}
.custm-single-post-styls {
  padding-top: 68px;
}
.custm-single-post-styls .card-style {
  margin-bottom: 24px !important;
}
#post-container {
  padding-top: 127px !important;
}
.menu-hider {
  overflow: inherit !important;
}
button.btn.btn-m.btn-full.rounded-xl.text-capitalize.font-900.border-dark-light.color-white.send-attachment.bg-mint-dark.custm-sent-msg {
  padding: 0 16px !important;
}
.card-style .content .align-self-center {
  position: relative;
}
.custm-comman-styls {
  height: auto !important;
  background: #313242 !important;
  transform: translate3d(-175px, 6px, 0px) !important;
}
.delete-post-sec i {
  color: #fff;
  padding-right: 4px;
}
.delete-post-sec span {
  vertical-align: bottom;
}
.custm-bg-color-create-event {
  background: #515266;
}
.create-event-main-sec-styles #page {
  padding: 0 !important;
  background: #515266;
}
.create-event-main-sec-styles .page-content.header-clear-medium {
  padding: 0;
  background: #515266;
  height: 100vh;
}
#post-container h4 {
  padding-top: 135px;
  /* height: 100vh; */
}
.custm-event-list-container-styles #page {
  height: 100vh !important;
}
.custm-chat-list-main-styles-sec {
  position: fixed !important;
  top: 0;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.chat-list-main a {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.maintophead-sec .custm-search-sec {
  margin-bottom: 80px;
}
.header.header-fixed.header-logo-center.signup-head.d-flex.justify-content-between.align-items-center.px-3.custm-chat-list-main-styles-sec {
  padding: 10px 0;
}
.chat-list-left-sec {
  z-index: 999999999999;
  background: #353636;
}
.event_details-img-sec {
  margin-top: 68px;
}
#toggle-password,
#toggle-password-2 {
  position: absolute;
  right: 22px;
  top: 18px;
}
.custom-checkbox {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.custm-event-members-sec .list-group .box-img img {
  width: 40px !important;
  height: 40px;
  border-radius: 50px;
  border: 2px solid #464747;
}
.page-content.header-clear-medium {
  padding: 0;
}
#notification.menu-box-bottom.menu-box-detached {
  bottom: 20px;
  left: 0px !important;
  right: 0px;
}
.notify-head-txt {
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}
.notify-third-sec
  button.no-reload.close-menu.color-white.position-absolute.cross-icon-share {
  /* background: #000; */
  padding: 6px;
  border-radius: 6px;
  top: -16px;
  right: 0px !important;
}
.custm-copy-txt-style {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  color: #353636 !important;
}
.notification-sticy {
  position: sticky; /* Fix the position */
  top: -2px; /* Position at the top of the screen */
  right: 0; /* Align to the right side */
  width: 100%; /* Full width */
  z-index: 1000; /* Ensure it stays above other elements */
  background-color: #333; /* Add background color for visibility */
}
.dropdown-menu.border-0.bg-theme.rounded-m.shadow-xl.px-2.mt-n4.delete-post-sec.custm-comman-styls.show {
  background: #515266 !important;
}
.dropdown-menu.border-0.bg-theme.rounded-m.shadow-xl.px-2.mt-n4.delete-post-sec.custm-comman-styls.custm-group-members.show {
  transform: inherit !important;
  width: fit-content !important;
  max-width: fit-content !important;
  height: 500px !important;
  left: -80px !important;
  overflow: auto;
  top: 42px !important;
}
.custm-group-members .header-logo-custom-user {
  height: 24px;
  width: 24px;
  max-width: 24px !important;
}
.custm-group-members p {
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  word-break: break-all;
}
.header.header-demoss.header-fixed.header-logo-left.mb-3.p-2.custm-main-head-bg-color {
  background: #4f5064 !important;
  box-shadow: unset !important;
  height: 65px !important;
}
.header.header-demoss.header-fixed.header-logo-left.mb-3.p-2.custm-main-head-bg-color
  a.no-reload.header-icon {
  width: unset;
}
.header-logo-left .header-icon-2 {
  right: 50px !important;
  width: unset !important;
}
.header .header-icon {
  height: unset !important;
}
.header.header-fixed.header-logo-center.second-head-styles.bg-third-header
  .header-icon {
  width: 40px !important;
  cursor: pointer;
}

button#header-2 {
  width: unset;
}
.header.header-fixed.header-logo-center.second-head-styles {
  background: #515266 !important;
  box-shadow: unset !important;
  height: 64px !important;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
a.header-icon.header-icon-1.bg-styles-icons {
  color: white;
  background-color: black !important;
  border-radius: 8px !important;
  text-align: center;
  font-size: 12px;
  border: none;
  line-height: 40px !important;
  margin-left: 18px !important;
}

.header-logo .header-logo-custom {
  margin-left: 12px;
}
.notification-sticky {
  position: sticky;
  top: 0px;
  right: 0;
  width: 100%;
  z-index: 1000;
  background-color: #333;
}
.main-setupprofile-sec .right-sec-head {
  text-align: center !important;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
}
.main-setupprofile-sec .no-back-head-styles {
  display: none;
}
.main-setupprofile-sec .main-head-sec {
  padding-top: 20px;
}
.menu-box-bottom.menu-box-detached {
  bottom: 0px !important;
  left: 10px;
  right: 10px;
}
@media (max-width: 768px) {
  .container.custm-chat-sec2 {
    max-width: 100%;
  }
  .dropdown-menu {
    overflow: auto;
    height: 83vh;
  }
  /* upload post start */
  #imagePreviewContainer video {
    /* max-width: 600px; */
    height: auto !important;
    /* min-height: 600px !important; */
    margin: 0 auto;
    object-fit: cover !important;
  }

  /* close */

  #profile-post-container .card video.img-fluid.video {
    /* max-width: 600px; */
    /* height: auto !important;
  min-height: 600px !important;
  margin: 0 auto; */
    height: auto !important;
    object-fit: cover !important;
  }
  #profile-post-container .img-fluid {
    /* max-width: 600px; */
    /* height: auto !important;
  margin: 0 auto; */
    height: auto !important;
    object-fit: cover !important;
    /* min-height: 600px !important; */
  }
  .custm-dash-board-styls .card video.img-fluid.video {
    /* max-width: 600px; */
    /* height: auto !important;
  min-height: 600px !important;
  margin: 0 auto; */
    height: auto !important;
    object-fit: cover !important;
  }
  .custm-dash-board-styls .img-fluid {
    /* max-width: 600px; */
    object-fit: cover !important;
    /* min-height: 600px !important; */
    height: auto !important;
  }
  .remove-btn {
    position: absolute;
    top: -4px;
    right: -7px;
    /* background-color: rgba(0, 0, 0, 0.5); */
    color: white;
    border: none;
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 12px;
  }
  /* #notification {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: 98vh !important;
    z-index: 999999999999999999999;
  } */
  #notification {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: -webkit-fill-available;
    z-index: 999999999999999999999;
    max-height: 100vh;
  }
  .create-event-main-sec-styles {
    background: #515266;
    height: 100vh;
  }
  .search-box.search-header {
    position: fixed;
    top: 63px;
    margin-top: 0 !important;
    width: 100%;
    /* z-index: 9999999999999999999999999; */
    max-width: -webkit-fill-available;
  }
  .maintophead-sec .emoji-wysiwyg-editor {
    background: #fff !important;
    height: 48px !important;
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    padding: 16px 12px !important;
  }
  .custmchat-style {
    position: fixed;
    bottom: 4px;
    background: #353636;
    left: 0;
    padding: 0 16px;
    width: 100%;
    max-width: 100%;
  }
  .custm-chat-sec {
    width: 92.5%;
    word-break: break-all;
  }
  .emoji-menu {
    display: none !important;
  }
  .emoji-picker-icon {
    display: none !important;
  }
  div#header-icon-2-group {
    position: relative;
  }
  /* .dropdown-menu.bg-theme.border-0.shadow-l.rounded-s.me-0.mt-3.right_custom_nav.show {
      margin: 0px;
      position: absolute;
      inset: 0px auto auto 0px;
      top: -5px !important;
      bottom: 0 !important;
      right: 0!important;
      width: 300px;
  } */
  .header-logo-custom {
    width: 100%;
    max-width: 240px;
  }
}
@media (min-width: 769px) {
  .custmchat-style {
    padding-right: 24px;
  }
  /* upload post start */
  #imagePreviewContainer video {
    /* max-width: 600px; */
    height: auto !important;
    /* min-height: 600px !important; */
    margin: 0 auto;
    object-fit: contain !important;
  }

  /* close */

  #profile-post-container .card video.img-fluid.video {
    /* max-width: 600px; */
    /* height: auto !important;
  min-height: 600px !important;
  margin: 0 auto; */
    object-fit: contain !important;
  }
  #profile-post-container .img-fluid {
    /* max-width: 600px; */
    /* height: auto !important;
  margin: 0 auto; */
    object-fit: contain !important;
    /* min-height: 600px !important; */
  }
  .custm-dash-board-styls .card video.img-fluid.video {
    /* max-width: 600px; */
    /* height: auto !important;
  min-height: 600px !important;
  margin: 0 auto; */
    object-fit: contain !important;
  }
  .custm-dash-board-styls .img-fluid {
    /* max-width: 600px; */
    /* height: auto !important;
  margin: 0 auto; */
    object-fit: contain !important;
    /* min-height: 600px !important; */
  }
  /* #notification {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: 98vh !important;
    z-index: 999999999999999999999;
  } */
  #notification {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: -webkit-fill-available;
    z-index: 999999999999999999999;
    max-height: 100vh;
  }

  #add-members {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }
  #add-title {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }
  div#menu-join-event-5 {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }
  div#menu-join-event-1 {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }
  .heade-main_sec .check_out_btn.pb-5._main_iiner {
    padding: 0 !important;
    margin: 0;
  }
  /* button.btn.mb-0:hover {
    background-color: #00fff0;
    width: 100%;
    color: #353636;
    display: block;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
  } */
  .main-head-sec {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }
  #share-in-chat {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }
  div#menu-join-event-2 {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }
  div#page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }
  .custm-profile {
    display: grid;
    /* grid-template-columns: auto auto auto; */
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0 16px;
    margin-right: 0;
    gap: 16px;
    margin-left: 0;
    padding-bottom: 75px !important;
  }
  /* test bg color */
  .theme-dark,
  .theme-dark .page-bg,
  .theme-dark #page {
    /* background-color: #323342; */
    /* height: 100vh; */
  }
  /* kn */
  div#post-container {
    background: #505164;
    padding-bottom: 60px;
  }
  div#header-icon-2-group {
    position: relative;
  }
  /* .dropdown-menu.bg-theme.border-0.shadow-l.rounded-s.me-0.mt-3.right_custom_nav.show {
  margin: 0px !important;
  position: absolute !important;
  inset: 0px auto auto 0px;
  left: 684px !important;
  top: 0px !important;
  bottom: 0 !important;
  right: 0!important;
  width: 400px;
  transform: inherit !important;
} */
  img.border-m.border-blue-dark.rounded-circle.mt-n5.ms-3 {
    width: 150px;
    height: 150px;
  }
  img.border-m.border-mint-dark.rounded-circle.mt-n5.ms-2 {
    width: 150px;
    height: 150px;
  }
  .profile-block .mt-n5 {
    margin-top: -5rem !important;
  }
  .main-head-sec a:hover {
    color: #fff;
  }
  div#menu-join-event-3,
  div#menu-join-event-4 {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }
  .main-footer-sec div#footer-bar {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
  }
  .back-icons-btn-share {
    line-height: 12px !important;
  }
  .cross-icon-share svg {
    top: 4px;
  }
  .share-chat svg {
    margin-right: 8px;
  }
  .share-post-btn-cstm svg {
    margin-right: 6px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .create-event-main-sec-styles {
    background: #515266;
    height: 100vh;
  }
  .create-event-main-sec-styles .page-content.header-clear-medium {
    padding: 0;
    background: #515266;
    height: 100vh;
  }
  .search-box.search-header {
    position: fixed;
    top: 63px;
    margin-top: 0 !important;
    width: 100%;
    max-width: -webkit-fill-available;
  }
  .maintophead-sec .emoji-wysiwyg-editor {
    background: #fff !important;
    height: 48px !important;
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    padding: 16px 12px 12px 12px !important;
  }
  .emoji-menu {
    display: none !important;
  }
  .emoji-picker-icon {
    display: none !important;
  }
}
/* chat start */
/* General styles for all devices */
#chat-container {
  height: calc(
    (var(--vh, 1vh) * 100) - 118px
  ); /* Enclose multiplication before subtraction */
  overflow-y: auto;
}

/* iPhone 12, 13, 14 Pro */
@media only screen and (min-device-width: 390px) and (max-device-width: 844px) and (-webkit-device-pixel-ratio: 3) {
  #chat-container {
    height: calc(
      (var(--vh, 1vh) * 100) - 133px
    ); /* Enclose multiplication before subtraction */
    overflow-y: auto;
  }
}

/* iPhone 12, 13, 14 Pro Max */
@media only screen and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3.5) {
  #chat-container {
    height: calc(
      (var(--vh, 1vh) * 100) - 133px
    ); /* Enclose multiplication before subtraction */
    overflow-y: auto;
  }
}
/* Android phones */
@media only screen and (min-device-width: 360px) and (max-device-width: 800px) {
  #chat-container {
    height: calc(
      (var(--vh, 1vh) * 100) - 133px
    ); /* Enclose multiplication before subtraction */
    overflow-y: auto;
  }
}

/* Larger Android phones */
@media only screen and (min-device-width: 412px) and (max-device-height: 915px) {
  #chat-container {
    height: calc(
      (var(--vh, 1vh) * 100) - 133px
    ); /* Enclose multiplication before subtraction */
    overflow-y: auto;
  }
}

/* chat close */

/* Default for large screens (desktops) */
#chat-container {
  height: calc(
    100vh - 133px
  ); /* Adjust the '150px' based on your header/footer size */
  overflow-y: auto;
}

/* Laptop screens */
@media (max-width: 1024px) {
  #chat-container {
    height: calc(100vh - 120px); /* Adjust for laptop-specific heights */
  }
}

/* Tablet screens */
@media (max-width: 768px) {
  #chat-container {
    height: calc(100vh - 100px); /* Adjust for tablets */
  }
}

/* Mobile screens */
@media (max-width: 576px) {
  #chat-container {
    height: calc(100vh - 72px); /* Adjust for mobile */
  }
}

/* General Styles for loading card */
.loading-card {
  position: relative;
  background-color: #10171e; /* Ensure bright background */
  overflow: hidden;
  border-radius: 8px;
  padding: 20px; /* Add more padding for a balanced look */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Softer shadow */
  width: 100%; /* Ensure it stretches properly */
  max-width: 600px; /* Prevent card from becoming too wide */
  margin: 20px auto; /* Center the card */
}

/* Image Placeholder */
.image-placeholder-skeleton {
  width: 40px;
  height: 40px;
  background-color: #15202b;
  border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
  margin-right: 15px; /* Add margin to separate it from the text */
}

/* Text Placeholder */
.text-placeholder {
  height: 15px;
  background-color: #15202b;
  animation: pulse 1.6s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 10px; /* Adjust spacing between placeholders */
}

/* Specific Text Placeholder Sizes */
.name-placeholder {
  width: 120px;
}

.message-placeholder {
  width: 180px;
  height: 12px;
}

.time-placeholder {
  width: 100px;
  height: 10px;
  margin-top: 5px;
}

/* Button Placeholder */
.button-placeholder {
  width: 70px;
  height: 30px;
  background-color: #15202b;
  border-radius: 20px;
  animation: pulse 1.6s ease-in-out infinite;
  margin-left: auto; /* Push button to the right */
}

/* Pulse Effect */
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
/* Ensure smoother shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
#raceTrack option {
  background-color: #000 !important;
}
.active-color path {
  stroke: #48cfad;
}
.custum-event-bottom {
  margin-bottom: 85px;
}

.chat-header-sec-main .inner_menu_sec .user_sec .user_name h2 {
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}
.chat-header-sec-main .inner_menu_sec .user_sec .user_name h4 {
  margin: 0;
}
/* div#loader {
  margin-bottom: 30px !important;
} */
#users-container a h4 {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}
.custm-text-styles-chats {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}
.in-racing-detals {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
}

/* @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 500px) {
    .custm-stylerace-events {
      margin-top: 32px !important;
    }
} */
.custm-loader-style {
  position: absolute;
  top: 46%;
  left: 48%;
}
.custom-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  right: 0;
  width: 100%;
  left: 0;
  background-color: #464747;
}
.profile-block p {
  word-break: break-all;
}
.text_sec_events h4 {
  word-break: break-all;
}
.text_sec_events p {
  word-break: break-all;
}
.text_sec_events strong {
  word-break: break-all;
}
.header.header-demoss.header-fixed.header-logo-left.mb-3.p-2.custm-main-head-bg-color {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
@supports (-webkit-touch-callout: none) {
  @media all and (display-mode: standalone) {
    .track-list {
      margin-top: 130px !important;
    }
    .h-ic {
      padding: 0px 13px !important;
    }
    .btn-positions {
      padding-bottom: 22px !important;
    }
    .toast-center-center {
      top: 80% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }
    .custm-vehicle-sec {
      margin-top: 60px !important;
    }
    .search-box.search-header {
      top: 57px !important;
    }
    #post-container {
      padding-top: 133px !important;
    }
    .header.header-demoss.header-fixed.header-logo-left.mb-3.p-2.custm-main-head-bg-color.pt-3.pb-3 {
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      height: 50px;
      height: calc(50px + constant(safe-area-inset-top) * 0.8) !important;
      height: calc(60px + env(safe-area-inset-top) * 0.8) !important;
      z-index: 99;
      transition: all 350ms ease;
      background-color: #fff;
      border-bottom: solid 1px rgba(0, 0, 0, 0.03);
      box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.08);
    }
    .header.header-fixed.header-logo-center.second-head-styles.p-3 {
      padding-bottom: 38px !important;
      background: #515266 !important;
      background-color: #515266 !important;
      z-index: 99999 !important;
    }
    .card.card-style.custm-vehicle-sec {
      margin-top: 100px !important;
    }
    div#event-container {
      margin-top: 160px;
      background: #515266;
    }
    .event_details-img-sec {
      margin-top: 100px;
    }
    .text_sec_events_details {
      border-top: 1px solid #6b6b6b;
      margin-bottom: 70px;
    }
    .events_details_secs .p-3 {
      margin-bottom: 42px;
    }
    .custm-search-sec {
      margin-top: 100px;
    }
    .custm-chat-styles-space-app {
      margin-top: 115px !important;
    }
    .header.header-fixed.header-logo-center.signup-head.custm-chat-header-styles {
      background: #353636 !important;
    }
    .header.header-fixed.header-logo-center.signup-head.custm-chat-header-styles
      a {
      position: absolute;
      top: 10px;
      left: 12px;
    }
    /* .inner_menu_sec {
    position: absolute;
    top: 28px;
    left: 58px;
  } */
    .inner_menu_sec.iphone-styls {
      position: absolute;
      top: 13px !important;
      left: 58px;
    }
    .header.header-fixed.header-logo-center.second-head-styles {
      background: #515266 !important;
      box-shadow: unset !important;
      height: 57px !important;
      z-index: 9999 !important;
    }
    .logo {
      padding-top: 41px;
    }
    .jq-toast-wrap {
      top: 100px !important;
    }
    body {
      background-color: #515266 !important;
    }
    .custm-pop-sticky .content {
      height: 350px;
      overflow: auto;
      margin-top: 108px !important;
    }
    .pace .pace-progress {
      background: #22ddb7;
      position: fixed;
      z-index: 2000;
      bottom: 100px !important;
      right: 100%;
      width: 100%;
      height: 2px;
    }
    .custm-profile-img-styles {
      padding: 0 !important;
    }
    .custm-profile-img-styles a {
      color: #1f1f1f;
      /* padding-top: 29px; */
      padding: 8px 7px 5px 0px !important;
      position: relative;
      flex: 1 1 auto;
    }
    .custm-profile-img-styles {
      position: fixed;
      bottom: 0px;
      left: 0px;
      right: 0px;
      z-index: 98;
      background-color: rgba(249, 249, 249, 0.98);
      box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.06);
      min-height: 60px;
      height: calc(62px + constant(safe-area-inset-bottom) * 1.1);
      height: calc(12px + env(safe-area-inset-bottom) * 1.1) !important;
      display: flex;
      text-align: center;
    }
    #users-container {
      margin-top: 13px !important;
    }
    div#like-container {
      margin-top: 110px !important;
      min-height: 78vh !important;
    }
    .custm-foller-app-styles {
      min-height: 78vh !important;
    }
    .custm-single-post-styls {
      min-height: 85vh !important;
      padding-top: 52px !important;
    }
    .custm-min-height-events {
      min-height: 72vh !important;
    }
    .events_details_secs {
      min-height: 78vh !important;
    }
    /* .glightbox-container .gcontainer {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 9999999999999 !important;
    overflow: hidden;
  } */
    /* .glightbox-container .gslide.current {
    opacity: 1;
    z-index: 99999999999999 !important;
    position: relative;
  }
  .glightbox-container .gslider {
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease;
    height: 100%;
    left: 0;
    top: -50px !important;
    width: 100%;
  
    z-index: 99999999999999999 !important;
    overflow: hidden;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .glightbox-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 20px !important;
    left: 0;
    z-index: 999999 !important;
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-text-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
    outline: none;
    overflow: hidden;
  }
  .glightbox-clean .gclose, .glightbox-modern .gclose {
    width: 35px;
    height: 35px;
    top: 40px !important;
    right: 0px !important;
    position: absolute;
    margin-top: 20px !important; 
    opacity: .7;
    background-position: -59px 2px;
    background-color: unset !important;
  } */
    .custm-vehicle-sec {
      margin-top: 70px !important;
    }
    .custm-single-post-sec {
      margin-top: 80px !important;
      padding-bottom: 76px !important;
    }
    .custm-foller-app-styles {
      margin-top: 115px !important;
    }
    .custm-event-list-sec {
      position: relative;
      margin-top: 70px !important;
    }
    .events_details_secs {
      margin-top: -42px !important;
    }
    /* 13/nav/24 */
    /* #post-container {
    padding-top: 125px !important;
  } */

    /* 14/nav/24 */
    .main-setupprofile-sec .main-head-sec {
      padding-top: 62px !important;
    }
    .custm-profile-post-minhight {
      min-height: 100vh !important;
    }
    .main-footer-sec #footer-bar {
      min-height: 75px;
      padding-bottom: 30px;
      padding-top: 30px;
    }
    .custm-all-events-angular-styling {
      margin-top: 25px !important;
    }
  }
}
#loader {
  margin-bottom: calc(var(--footer-height) + 10px) !important;
}
.custm-profile-img-styles a {
  color: #1f1f1f;
  /* padding-top: 29px; */
  padding: 8px 7px 5px 0px;
  position: relative;
  flex: 1 1 auto;
}
#singup .tab-controls {
  background-color: transparent !important;
}
.header.header-fixed.header-logo-center.third-head-bg-color {
  background: #353636 !important;
  box-shadow: unset;
  height: 64px;
}
.header.header-fixed.header-logo-center.second-head-styles .header-icon {
  top: 14px;
}
.header.header-fixed.header-logo-center.second-head-styles
  a.header-title.no-reload {
  top: 8px;
}
.header.header-fixed.header-logo-center.second-head-styles i {
  padding: 12px 0;
}
a.header-icon.header-icon-4.bg-styles-icons {
  color: white;
  background-color: black !important;
  border-radius: 8px !important;
  text-align: center;
  font-size: 12px;
  border: none;
  line-height: 40px !important;
  margin-right: 18px !important;
}
.header.header-fixed.header-logo-center.second-head-styles.bg-third-header {
  background: #353636 !important;
}
.header.header-fixed.header-logo-center.signup-head.custm-chat-header-styles {
  background: #464747 !important;
}
.header.header-demoss.header-fixed.header-logo-left.mb-3.p-2.custm-main-head-bg-color
  a.header-logo.w-50 {
  height: fit-content !important;
}
.loader-bar {
  width: 100%;
  height: 4.8px;
  display: inline-block;
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  top: -13px;
  z-index: 9999;
}
.loader-bar::after {
  content: "";
  box-sizing: border-box;
  width: 0;
  height: 4.8px;
  background: #00fff0;
  position: absolute;
  top: 0;
  left: 0;
  animation: animFw 4s linear;
}
.loader-bar-no-animation {
  width: 100%;
  height: 4.8px;
  display: inline-block;
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  top: -13px;
  z-index: 9999;
  /* Adjust the duration and timing function */
}

.loader-bar-no-animation::after {
  content: "";
  box-sizing: border-box;
  width: 100%;
  height: 4.8px;
  background: #00fff0;
  position: absolute;
  top: 0;
  left: 0;
  animation: animFw2 1s linear;
}

@keyframes animFw {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/* Second animation */
@keyframes animFw2 {
  0% {
    width: 85%;
  }
  100% {
    width: 100%;
  }
}
/* span#loader-bar {
    position: fixed;
    bottom: 200px !important;
    width: 100% !important;
} */

.custom-progress-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0px 16px 12px 16px;
}

.custom-progress {
  position: relative;
  width: 100%;
  height: 30px;
  background: rgba(53, 54, 54, 0.2);
  border-radius: 50px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.custom-progress::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 30%;
  background-color: #353636cc;
  border-radius: 16px;
  border: 2px solid #00fff0;
  box-sizing: border-box;
}

.custom-progress-text {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 14px;
  z-index: 1;
  font-family: Arial, sans-serif;
}