.border-top-darkmode {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  background-color: #212327;
  color: #ffffff;
}
.border-darkmode {
  overflow: auto;
  padding: 1rem;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  background-color: #212327;
  color: #ffffff;
}
.fs-16px {
  font-size: 16px;
}
.border-darkmode::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.border-darkmode::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px gray;
  border-radius: 10px;
}

/* Handle */
.border-darkmode::-webkit-scrollbar-thumb {
  background: var(--n360-main-color);
  border-radius: 10px;
}
.bg-70{
  background-color: #707070;
}
.bg-37 {
  background-color: #373737;
}
.bg-21 {
  background-color: #212327;
}
.bg-dc {
  background-color: #dcdcdc;
}
.bg-33 {
  background-color: #333333;
}
.bg-52 {
  background-color: #525252;
}
.bg-68 {
  background-color: #682243;
}
.bg-1C {
  background-color: #1c1c1c;
}
.bg-2C {
  background-color: #212327;
}
.fs-25px {
  font-size: 25px;
}
.text-B9 {
  color: #b9b9b9;
}
.text-73 {
  color: #737373;
}
.border-16px {
  border-radius: 16px;
}
.border-8px {
  border-radius: 8px;
}
.text-cd {
  color: #cdcdcd;
}
.text-dc {
  color: #dcdcdc;
}
.btn-mobile {
  border-radius: 8px;
  text-align: center;
  padding: 10px;
  color: white;
  border: 0;
}
.bg-darkmode {
  background-color: #0c0a0b;
}
.bg-btnMobile {
  background-color: #682243;
}

/* btn-label-color */
.z-index-1 {
  z-index: 1;
}
.z-index-2 {
  z-index: 2;
}
.z-index-3 {
  z-index: 3;
}
.z-index-4 {
  z-index: 4;
}
.z-index-5 {
  z-index: 5;
}
.display-block {
  display: block !important;
}
.image-banner .banner1 {
  position: absolute;
  z-index: 1;
  top: -67px;
  right: 15px;
  padding-top: 0px;
  padding-right: 0px;
  height: 134px;
  width: 100px;
}

.image-banner .banner2 {
  position: absolute;
  top: -52px;
  right: 61px;
  z-index: 2;
  height: 104px;
  width: 120px;
}

.image-banner .banner3 {
  position: absolute;
  top: -62px;
  right: 125px;
  z-index: 2;
  height: 124px;
  width: 64px;
}

.image-banner .banner4 {
  position: absolute;
  top: -48px;
  right: 65px;
  z-index: 2;
  height: 96px;
  width: 112px;
}
.image-banner .banner5 {
  position: absolute;
  top: 0px;
  right: 115px;
  z-index: 2;
  height: 67px;
  width: 67px;
}

.image-banner .banner6 {
  position: absolute;
  top: -70px;
  right: 10px;
  z-index: 2;
  height: 112px;
  width: 112px;
}
.image-banner .banner7 {
  position: absolute;
  top: -65px;
  right: 154px;
  z-index: 2;
  height: 20px;
  width: 20px;
}
.swiper-bottom {
  position: absolute;
  bottom: 0;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
  background-color: #212327;
  height: 30px;
  width: 100%;
  z-index: 5;
}
.btn-video {
  border: 0;
  background: none;
  cursor: pointer;
  position: absolute;
  z-index: 3;
  top: 20;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.text-steps {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.circle-avatar-mobile {
  width: 100%;
  max-width: 87px;
  z-index: 1;
  height: 87px;
  border: 7px solid #212327;
  border-radius: 50%;
  align-self: center;
}
.input-custom {
  background-color: #373737;
  color: #cdcdcd;
  width: 100%;
  height: 50px;
  border-radius: 8px;
  padding: 0.375rem 0.75rem;
  border: var(1px) solid var(#dee2e6);
}
.textarea-custom {
  background-color: #373737;
  color: #cdcdcd;
  width: 100%;
  border-radius: 8px;
  padding: 0.375rem 0.75rem;
  border: none;
}
.textarea-custom:focus {
  outline: none !important;
}
.textarea-custom:hover {
  outline: none !important;
}
.focus-custom:focus {
  background-color: #373737;
  color: #cdcdcd;
  outline: none !important;
}
input:focus {
  outline: none !important;
}
.phone-input-container .special-label {
  display: none;
}
.phone-input-container .form-control:focus {
  outline: none !important;
}
.phone-input-container :focus {
  outline: none !important;
}
.phone-input-container .phone-input:focus {
  border-color: red !important; 
  box-shadow: 0 0 5px red !important; 
}
.phone-input-container :hover {
  outline: none !important;
}

.form-check-input:checked[type="checkbox"] {
  background-color: var(--n360-main-color);
  border-color: #d3427a;
}
.form-check-input:focus[type="checkbox"] {
  box-shadow: 0 0 0 0.25rem rgba(211, 66, 122, 0.25);
}
.page {
  position: absolute;
  left: 0;
  transition: transform 0.5s ease-in-out;
  transform: translateX(100%);
}

.page.show {
  transform: translateX(0);
}
.selectedText {
  color: #d3427a;
  text-decoration: underline;
  text-decoration-color: #d3427a;
}
.text-D3 {
  color: #d3427a;
}
.fs-20{
  font-size: 20px;
}

.bg-D3{
  background-color:#D3427A;
}
.bg-D4{
  background-color:#682243;
}
.bg-21{
  background-color: #212327;
}

.saleButton{
  border: solid 1.5px;
  border-radius: 8px;
  border-color: #D3427A;
  color: #D3427A;
  width: 160px;
  height: 40px;
  font-size: 14px;
  background-color: #212327;
}

.full_modal-content{
  background-color: #212327;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.modal-sale-report .modal-content{
  background-color: #121212 !important;
}

hr.solid {
  border-top: 1.5px solid #bbb;
}