*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: sky;
  src: url(../fonts/sky.ttf);
  font-display: swap;
}
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
button{
  background: transparent;
  border: none;
}
:root{
  --background-body: #fff;
  --backgound-post :#f7fbfa;
  --background-tab: #6fcbdc;
  --background-input: #fff;
  --border-color: #cad0de;
  --scroll-thumb : #b9b9b9;
  --scroll-track: #fafafa;
  --background-footer: #3953a3;
  --background-icon :#fff;
  --color: #fff;
  --font-color: #000;
  --font-color-2: #777;
  --background-2: #f1f7fb;
  --backgroun-3:#fff;
  --background-4: #d9edf7;
  --background-5: #f2f4fa;
  --grey: lightgray;
  --border-white: #f1f1f1;
  --bs-modal-bg: #fff;
  --border-2: #e1e1e1;
}
.dark:root{
  --background-body: #141517;
  --backgound-post :#0A0C0B;
  --background-tab:#0A0C0B;
  --background-input: #0A0C0B;
  --border-color: #3b4969;
  --scroll-thumb: #373749;
  --scroll-track: #0A0C0B;
  --background-footer: #0A0C0B;
  --background-icon: #141517;
  --color: #3953a3;
  --font-color: #cccccc;
  --font-color-2: #cccccc;
  --background-2: #303042;
  --backgroun-3:#0A0C0B;
  --background-4: #232d43;
  --background-5: #202335;
  --grey: #0A0C0B;
  --border-white: #444;
  --bs-modal-bg: #141517;
  --border-2: #373749;
}

body{
  background-color: var(--background-body);
  direction: rtl;
  counter-reset: number;
  font-family: sky,-apple-system,system-ui,Segoe UI,Helvetica Neue,sans-serif;
}
body.dark{
  background-color: var(--background-body) !important;
}
a{
  text-decoration: none;
  color: #22205f;
}

input{
  outline: none;
}
input::placeholder,
select{
  color: var(--font-color-2);
}

.modal-header .btn-close{
  margin: 0;
}
.btn-primary {
  background-color: #3953a3;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}
.btn-primary:hover {
  background-color: #6fcbdc;
}
.btn-report {
  color: #fff;
  background-color: #b8529e;
}
.btn-report:hover {
  color: #fff;
  background-color: #a9318b;
}
/* -- Style For Modal Dark -- */
.dark .modal-content {
  background: var(--background-body);
}
.dark .modal-title {
  color: var(--font-color);
}
.dark .add-ads-modal .profile-tabs img,
.dark .modal-header .btn-close {
  filter: brightness(0) invert(1);
}
.dark .modal-header {
  border-color: var(--scroll-thumb);
}
.dark .modal-body textarea {
  background: var(--background-body);
  color: var(--font-color);
}

/*Baisc Style*/
.overflow-x-auto{
  overflow-x: auto;
}
.gap-1{
  gap: 0.25rem;
}
.gap-2{
  gap: 0.625rem;
}
.gap-4{
  gap: 1rem;
}
.gap-px{
  gap: 1px;
}
.flex{
  display: flex;
}
.flex-row{
  flex-direction: row;
}
.flex-col{
  flex-direction: column;
}
.flex-between{
  justify-content: space-between;
}
.flex-wrap{
  flex-wrap: wrap;
}
.flex-center{
  justify-content: center;
}
.flex-end{
  justify-content: flex-end;
}
.flex-1{
  flex: 1 1 0%;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.items-stretch{
  align-items: stretch;
}
.grow1{
  flex-grow: 1;
}
.grow2{
  flex-grow: 2;
}
.grayscale{
  filter: grayscale(100%);
  opacity: 0.5;
}
.display-none{
  display: none;
}
/*Full Width and Height*/
.w-full{
  width: 100%;
}
.w-50{
  width: 50%;
}
.mx-w-600{
  max-width: 600px;
}
.min-w-0{
  min-width: 0;
}
.max-w-full {
  max-width: 100%;
}
.pt-125{
  padding-top: 1.25rem;
}
.pb-125{
  padding-bottom: 1.25rem;
}
.p-175{
  padding: 1.75rem;
}
.mb-08{
  margin-bottom: 0.8rem;
}
.mb-125{
  margin-bottom: 1.2rem;
}
.mb-15{
  margin-bottom: 1.5rem;
}
.mt-08{
  margin-top: 0.8rem;
}
.mt-25{
  margin-top: 2rem;
}
/*Background Color*/
.background-white{
  background-color: #fff;
}
.background-blue{
  background-color:#3953a3;
}
.background-light-blue{
  background-color: #ecf4fa;
}

.background-gray{
  background-color: var(--background-tab);
}
.border-1{
  border: 1px solid transparent;
  border-radius: 1.2rem;
}
.border-2{
  border: 1px solid transparent;
  padding: 0.825rem;
  border-radius: 0.938rem;
}
.border-bt{
  border-bottom: 1px solid #cccccc;
}

.container-fluid {
  padding: 0 35px;
}
@media (max-width: 1300px) {
  .container-fluid {
      padding: 0 15px;
  }
}
@media (min-width: 1350px) {
  .container-fluid {
      max-width: 1350px;
  }
}



/*Header Style*/
.header .top-header{
  display: flex;
  justify-content: space-between;
  padding-top: 9px;
  padding-bottom: 7px;
}
.header .top-header .nav-link{
  white-space: nowrap;
}
.header .top-header .nav-link a {
  display: inline-block;
  color: #919191;
  font-size: 14px;
}
.header .top-header .nav-link a i {
  font-size: 14px;
}
.header .top-header .nav-link a img{
  max-width: 14px;
  max-height: 14px;
  object-fit: contain;
}
.header .bottom-header{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  height: 48px;
}
.header .bottom-header .btn-style {
  padding: 5px 10px;
  margin-right: 5px;
}
.header .bottom-header .btn-style a {
  color: #fff;
  font-weight: normal;
  font-size: 17px;
}
.header .bottom-header .btn-style a i {
  font-weight: bold;
  font-size: 18px;
  position: relative;
  top: 3px;
}
.header .bottom-header .logo {
  flex: 0 0 calc(100% - 200px);
}
.header .bottom-header .logo.logo-user {
  flex: 0 0 120px;
}
.header .bottom-header .logo.logo-user ~ .user-profile,
.header .bottom-header .logo.logo-user ~ .btn-style {
  margin: 0 2px;
}
.header .bottom-header .user-name {
  display: inline-block;
  max-width: 125px;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media(max-width: 991px) {
  .header .bottom-header .user-name {
      max-width: 75px;
  }
}
@media(max-width: 767px) {
  .header .bottom-header .logo.logo-user {
      flex: 0 0 calc(100% - 235px);
  }
  .header .bottom-header {
      justify-content: space-between;
  }
}
.header .bottom-header .logo img{
  max-width: 150px;
  max-height: 85px;
  object-fit: cover;
}
.header .bottom-header .more-links{
  display: flex;
  align-items: center;
}
@media(max-width: 360px) {
  .header .bottom-header .logo img {
      max-height: 50px;
  }
  .header .user-profile {
      font-size: 14px;
  }
  .user-profile button {
      gap: 6px !important;
  }
}
.btn-style{
  background-color: #6fcbdc;
  border-radius: 0.438rem;
  padding: 0.5rem 0.625rem;
  color: #fff;
  font-weight: 600;
}
.btn-style .moon{
  display: block;
}
.btn-style .sun{
  display: none;
}

/* .header .bottom-header .more-links .sign-in{
white-space: nowrap;
} */
.header .bottom-header .more-links .sign-in a{
  color: #fff;
  font-weight: 600;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.header .bottom-header > .user-profile > button {
  padding: 5px 10px !important;
}
.header .bottom-header > .user-profile ul li span {
  margin-left: 10px;
}
.header .bottom-header > .user-profile ul li span i {
  font-weight: bold;
}
.header .bottom-header > .user-profile ul a,
.header .bottom-header > .user-profile ul button {
  font-size: 16px;
  display: block !important;
  color: #919191;
  width: 100%;
  text-align: right;
}
.header .bottom-header > .user-profile ul a:hover,
.header .bottom-header > .user-profile ul button:hover {
  color: #fff !important;
}
.header .bottom-header > .user-profile ul .lang-box {
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
}
.header .bottom-header > .user-profile ul .lang-box span {
  display: inline-block;
  padding: 5px 20px 2px 5px;
  position: relative;
  border-radius: 5px;
  border: 1px solid var(--border-2);
  float: left;
  margin-bottom: 5px;
  margin-left: 0;
  font-size: 13px;
}
.header .bottom-header > .user-profile ul .lang-box span i {
  position: absolute;
  top: 2px;
  right: 5px;
  font-weight: normal;
  font-size: 12px;
}
.header .bottom-header > .user-profile ul .lang-box span i:nth-child(2) {
  top: 13px;
}
.sign-in i{
  transform: rotate(180deg);
}

/*Main Content*/
.main-content{
  /* padding-left: 2rem;
  padding-right: 2rem; */
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
button.search-button{
  background-color: #3953a3;
  color: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.right-section .blok{
  border-bottom: 1px solid #b0b0b066;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.right-section .blok-card{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #3953a3;
  cursor: pointer;
  font-weight: 500;
}
.right-section .blok .new{
  background-color: var(--background-5);
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  border-radius: 18px;
  display: none;
}
.right-section .blok .new button{
  color: #3953a3;
}
.brands{
  visibility:visible;
  /* transition: all 3s ease-in-out; */
}
.brands .car-brands,
.brands .other-brands{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}
.brands .all-brands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
  padding-bottom: 20px;
  padding-top: 20px;
}
.brands .all-brands:not(:first-child){
  border-top: 1px solid #b0b0b0;
}
.brands .all-brands .brand{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border: 1px solid #b0b0b066;
  border-radius: 0.438rem;
  padding: 0.725rem;
  height: 78px;
}
.brands .equipment .brand{
  height: 100px;
}
.brands .equipment a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
  /* overflow: hidden; */
}
.brands .equipment span{
  /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; */
  max-width: 100%;
  font-size: 0.75rem;
  line-height: 1rem;
  padding-bottom: 0.25rem;
  padding-top: 0.5rem;
  text-align: center;
  color: #ADAEB0;
}
.brands .all-brands .brand div{
  width: 45px;
  height: 45px;
  margin: auto;
}
.brands .all-brands .brand div img{
  width: 100%;
  height: 100%;
}
.brands .homes a{
  text-align: center;
  color: #b0b0b0;
  font-size: 13.5px;
}
.brands .cars .brand{
  border: 1px solid #fed090;
}
.brands .all-brands .brand:hover{
  border-color: #3953a3;
}
.brands .all-brands .brand:hover img.grayscale,
.left-section .tabs-section .tab:hover img.grayscale{
  filter: grayscale(0);
}
@media (max-width: 767px) {
  .left-section .stop-flex {
      display: block !important;
  }
}

.brands .car-brands .car-brand div{
  width: 50px;
  height: 50px;
}
.brands .car-brands .car-brand img{
  width: 100%;
  height: 100%;
}

button.show-more-btn{
  border: 1px solid #3953a3;
  margin: 1rem auto;
  /* margin-top: 1rem;
  margin-bottom: 1rem; */
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3953a3;
  height: 40px;
  padding: 10px 50px;
  font-weight: 600;
  font-size: 18px;
}
button.show-more-btn:hover{
  background-color: var(--background-5);
}
button.show-more-btn span i{
  padding-left: 8px;
  font-size: 13px;
  font-weight: 600;
}
.all-links{
  margin-bottom: 1rem;
}
.all-links a,
.all-links button {
  display: block;
  color: #ADAEB0;
  padding: 5px;
  margin: 2px 0;
  font-size: 15px;
  text-align: center;
  width: 100%;
  font-weight: normal !important;
}
.all-links a:not(:last-child){
  border-bottom: 1px solid var(--border-2);
}
button.sideBar-btn {
  display: none;
  border: 2px solid  var(--border-color);
  background-color: var(--background-input);
  border-radius: 0.625rem;
  padding: 6px;
  color: #b0b0b0;
}
button.sideBar-btn.active{
  color: #3953a3;
  border-color: #3953a3;
  background-color: #d9edf7;
}
button.sideBar-btn span{
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;

}
.sidebar-section{
  position: fixed;
  height: 100%;
  top: 0;
  left: -320px;
  display: flex;
  width: 320px;
  flex-direction: column;
  background: #fff;
  z-index: 99999;
  transition: .4s;
  overflow: hidden;
  overflow-y: auto;
  border-top-right-radius: 0.938rem;
  border-bottom-right-radius: 0.938rem;
  padding: 1.25rem;
  transform: translate3d(0,0,0);
}
.sidebar-section.active {
  transform: translate3d(320px,0,0);
}
.sidebar-section .sidebar-header span{
  padding: 0.2rem 0.625rem;
  border-radius: 0.625rem;
  background: var(--background-5);
  color: #ADAEB0;
}
.overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.25);
  z-index: 998;
  opacity: 0;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}
.overlay.active {
  display: block;
  opacity: 1;
}
.left-section .search-box{
  margin-bottom: 10px;
  position: relative;
  max-width: 530px;
}
.left-section .search-box input{
  border: 2px solid  var(--border-color);
  background-color: var(--background-input);
  border-left-width:0;
  padding: 0.25rem 0.625rem;
  height: 40px;
  border-radius: 10px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: 0px 4px 10px -8px #0095da52;
  width: 535px;
  color: var(--font-color);
}
.left-section .search-box input:hover,
.left-section .search-box input:focus{
  border-color:#3953a3;
}
.left-section .search-box input::placeholder{
  color: #b0b0b0;
}
.left-section .search-box button{
  background-color: #3953a3;
  color: #fff;
  border-radius: 10px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0.25rem 1.5rem;
  height: 40px;
  line-height: 35px;
}
.left-section .search-box .search-list {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  background: var(--background-body);
  border: 1px solid var(--border-2);
  z-index: 5;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  padding: 10px 0;
  max-height: 200px;
  overflow-y: auto;
}
.left-section .search-box input:focus:not(:placeholder-shown) + .search-list,
.left-section .search-box .search-list.shown {
  display: block;
}
.left-section .search-box .search-list li a {
  display: block;
  padding: 5px 15px;
  font-size: 16px;
  cursor: pointer;
}
.left-section .search-box .search-list .delete-btn {
  display: inline-block;
  color: #d00;
  border-radius: 10px;
  border: 1px solid #d00;
  font-size: 14px;
  margin: 10px 10px 0;
  padding: 5px 10px;
  background: var(--background-5) !important;
}
.left-section .search-box .search-list .delete-btn i {
  color: #d00 !important;
  font-size: 14px !important;
}
.left-section .search-box .search-list li a i {
  color: #aaa !important;
  font-size: 15px;
  margin: 0 5px;
}
.left-section .search-box .search-list li a:hover {
  background: var(--background-5);
}
.advertise-btn {
  color: #fff;
  background-color: #b8529e;
  /* flex-shrink: 0; */
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 10px;
  font-weight: 500;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 18px;
}
.advertise-btn i{
  font-size: 14px;
  font-weight: 500;
}
.advertise-btn:hover {
  background-color: #cf38a9;
}
.left-section .tabs-section{
  display: flex;
}
.left-section .tabs-section ul{
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 0;
}
.left-section .tabs-section .tab{
  min-width: 100px;
  display: inline-block;
  text-align: center;
  margin: 0 1px;
  background: transparent !important;
}
.left-section .tabs-section .tab.active a,
.left-section .tabs-section .tab a:hover{
  background-color: var(--background-tab);
  color: #22205f !important;
}
.left-section .tabs-section ~ .tabs-section .tab:not(:last-child) {
  margin-left: 10px;
}
.left-section .tabs-section ~ .tabs-section .tab {
  min-width: auto;
}
.left-section .tabs-section ~ .tabs-section .tab a {
  border: 1px solid var(--border-2);
  padding: 5px;
  background: transparent !important;
  color: #8b8b8b;
}
.left-section .tabs-section ~ .tabs-section .tab a span {
  font-size: 17.5px;
}
.left-section .tabs-section .tab a{
  border-radius: 0.75rem;
  display: block;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap;
  align-items: center;
  padding: 10px;
  text-align: center;
  color: #b0b0b0;
}
.left-section .tabs-section a i,
.left-section .tabs-section a img {
  display: block;
  margin: 0 auto;
  font-size: 30px;
  max-height: 35px;
  max-width: calc(100% - 5px);
}
.left-section .tabs-section a span{
  font-size: 16px;
}
.left-section .filter-region button{
  min-width: 125px;
}
.left-section .location{
  background-color: #f2f4fa;
  color: #22205f;
  border: none;
  border-radius: 12px;
  padding: 10px 15px;
  text-align: center;
}
.dark .left-section .location{
  background-color: var(--background-tab);
}
.left-section .location.scope-add {
  border: 1px solid #6fcbdc;
  color: #6fcbdc;
  background: #fff;
  padding: 5px 15px;
}
.left-section .location:hover {
  background: #6fcbdc;
}
.left-section .location.scope-add:hover {
  background: #f7f7f7;
}
.left-section .location.active {
  background: #6fcbdc;
  color: #fff;
}
.left-section .location.near-btn {
  padding: 2px 15px;
}
.left-section .location.near-btn i {
  display: inline-block;
}
.left-section .location.near-btn span {
  margin-top: -7px;
}
.left-section .location span {
  display: block;
}
.posts-list > p {
  color: var(--font-color);
}
.posts-list .post:nth-child(odd){
  background-color: var(--backgound-post);
}
.posts-list .post{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dotted var(--scroll-thumb);
  /* height: 98px; */
}

.posts-list .post .post-text{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 90px;
  flex-grow: 2;
  padding-left: 12px;
  padding-right: 12px;
  color: #ADAEB0;
  font-size: 0.85rem;
  flex: 0 0 calc(100% - 197px);
  overflow: hidden;
  position: relative;
}
.posts-list .post .post-text a {
  color: #ADAEB0;
}
.posts-list .post .post-text h3{
  margin-bottom: 0;
}
.posts-list .post .post-text h3 a{
  color: #319978;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
  padding: 10px 0 0;
  font-size: 18px;
}
.posts-list .post .post-text .price{
  padding-right: 40px;
  margin-bottom: 2px;
}
@media (max-width: 767px) {
  .posts-list .post .post-text {
      flex: 0 0 calc(100% - 90px);
  }
}
.post-icon{
  width: 1rem;
  height: 1rem;
  margin-left: 5px;
}
.post-icon img{
  width: 100%;
  height: 100%;
}
/* .left-section .posts-list .post .post-info
.left-section .posts-list .post-text .city a,
.left-section .posts-list .post-text .person-infon a{
color: #ADAEB0;
font-size: 0.75rem;
} */
.posts-list .post-text span {
  padding-left: 5px;
  font-size: 12px;
}
.posts-list .post-text span img{
  width: 15px;
}
.posts-list .post-img{
  display: flex;
  flex-grow: 1;
}
@media(max-width: 991px) {
  .posts-list .post-img{
    display: flex;
    flex-grow: 0;
  }
}
@media(max-width: 767) {
  .posts-list .post-img{
    display: flex;
    flex-grow: 1;
  }
}
.posts-list .post-img div a{
  width: 90px;
  height: 90px;
  display: block;
  padding: 3px 0;
}
.posts-list .post-img video,
.posts-list .post-img div img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
  margin: 2px 0;
}
.posts-list .post-delete button {
  padding: 10px;
  color: #d00;
  cursor: pointer;
  position: absolute;
  border-left: 1px dashed var(--border-2);
  top: 0;
  right: 0;
  bottom: 0;
}
.posts-list .post-delete ~ .post-title,
.posts-list .post-delete ~ .flex-between{
  padding-right: 40px;
}
footer {
  background-color: var(--background-5);
  /*border-top: 1px solid var(--scroll-track);*/
}
footer .downloads{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  gap:0.25rem
}
footer .downloads .img-download{
  width: 120px;
  height: 40px;
  max-width: 100%;
}
footer .downloads .img-download img{
  height: 100%;
  max-width: 100%;
  vertical-align: middle;
  border-radius: 10px;
  /* object-fit: cover; */
}
footer .footer-links{
  /*border-bottom: 1px solid var(--scroll-track);*/
  /*border-top: 1px solid var(--scroll-track);*/
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
footer .footer-links ul{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
@media(max-width: 767px) {
  footer .footer-links ul{
      grid-template-columns: auto;
  }
}
footer .footer-links ul li{
  display: flex;
  gap: 0.625rem;
}
footer .footer-links ul li a{
  color: #22205f;
}
footer .footer-links ul li a:hover{
  text-decoration: underline;
}
footer .footer-links ul li span i {
  color: #919191;
}
footer .social-media-links{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
footer .social-media-links .icon a {
  background-color: var(--background-icon);
  color: #5973c4;
  padding: 20px;
  border-radius: 10px;
  font-size: 20px;
  display: inline-flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
}
footer .social-media-links .icon a span {
  display: inline-block;
}
footer .social-media-links .rate{
  display: flex;
}
footer .social-media-links .rate button{
  border-radius: 10px;
  border: 1px solid #22205f;
  color: #22205f;
  padding: 10px 15px;
  height: 40px;
  margin-left: 10px;
  display: flex;
  align-items: center;
}
footer .social-media-links .rate button i {
  font-size: 13px;
  margin-left: 5px;
}
footer .copyright{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
footer .copyright,
footer .copyright a{
  color: #d0d4d7;
  letter-spacing: -0.5px;
}
footer .copyright p{
  margin-bottom: 0;
  color: #919191;
}


.right-section .other-brands .brand.car-equipment{
  padding: 0 8px;
}
.right-section .other-brands .car-equipment a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
}
.right-section .other-brands .car-equipment a span img{
  width: 41px !important;
  height: 41px !important;
  max-width: 100%;
}
.right-section .other-brands .car-equipment a span.text{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 0.75rem;
  line-height: 1rem;
  padding-bottom: 0.25rem;
  text-align: center;
}
.scroll-inner ~ .scroll-inner {
  margin-top: 10px;
}

.scroll-inner::-webkit-scrollbar {
  width:15px;
  height: 15px
}

.scroll-inner::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 4px
}

.scroll-inner::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 99999px;
  border: 4px solid var(--scroll-track);
}

.scroll-inner::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb);
}

.custom-select {
  width: 100%;
  position: relative;
}

.custom-select select {
  display: none;
}

.selected-item {
  border-radius: 12px;
  padding: 8px 2px;
  border: 1px solid #999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #444;
  height: 55px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 14px;
  width: 115px;
}
.selected-item:hover{
  border-color: #3953a3;
  box-shadow:0px 4px 10px -8px #0095da52;
}
/* .filter-region .selected-item{
min-width: 350px;
} */

.selected-item:after {
  font-family: 'boxicons';
  content: "\ea29";
  font-size: 20px;
  color: #444;
  position: absolute;
  left: 0;
  transition: 0.5s;
}

.arrowanim.selected-item:after {
  transform: rotate(180deg);
}

.item {
  padding: 5px 10px;
  color: #999;
  cursor: pointer;
  font-size: 14px;
}

.item:hover, .item:focus {
  background: #e2e5ff;
  border-radius:12px;
}
.all-items {
  position: absolute;
  top: 117%;
  left: 0;
  width: 100%;
  z-index: 100;
  border-radius:12px;
  box-shadow:0px 4px 10px -8px #0095da52;
  border: 1px solid #b0b0b066;
  background-color: #fff;
  max-height: 12rem;
  overflow: hidden;
  overflow-y: auto;
  transition: all 0.5s;
}
.all-items-hide {
  display: none;
}
a.go-back {
  display: inline-block;
  font-size: 40px;
  cursor: pointer;
  color: #22205f;
  height: 35px;
  position: relative;
  top: -10px;
}

.advertis-info{
  border: 1px solid #b0b0b066;
  border-radius: 20px;
}
.advertis-info .advertise-title{
  border-radius: 20px;
  margin: 0.25rem;
  padding: 1.25rem;
  background-color: var(--background-5);
}
.advertis-info .advertise-title h1{
  color: #319978;
  font-size: 28px;
  margin-bottom: 10px;
  font-weight: bold;
}
.advertis-info .advertise-title > div{
  flex-wrap: wrap;
}
.advertis-info .advertise-title span{
  font-size: 0.875rem;
  color: #22205f;
  margin-left: 5px;
}
.advertis-info .advertise-title span img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.advertis-info .advertise-title .created-block span {
  color: #525762;
}
.advertis-info .advertise-title .star-block i {
  color: gold;
}
.advertis-info .advertise-title .star-block span {
  color: var(--font-color);
}
.advertise-title .blue-circle{
  background-color: #3953a3;
  color: #fff;
  border-radius: 40px;
  padding: 0 8px;
  font-size: 0.75rem;
  line-height: 25px;
  font-weight: 500;
  margin-right: 5px;
}

.advertise-title .blue-circle:hover {
  background-color: #6fcbdc;
}
.advertise-title .blue-circle img{
  width: 18px;
}
.advertis-info .advertise-details p{
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  white-space:pre-line;
  overflow: hidden;
  overflow-wrap: break-word;
  font-size: 1.25rem;
  color: var(--font-color);
}
.advertis-info .advertise-details video,
.advertis-info .advertise-details img{
  display: block;
  margin: 0 auto 20px;
  max-width: 100%;
}
.ad-details-page {
  background: var(--background-5);
}
.ad-details-page .advertise-banner,
.ad-details-page .advertis-info,
.ad-details-page .related-links,
.ad-details-page .comment-box,
.ad-details-page .icon-list a,
.ad-details-page .icon-list .white {
  background: var(--background-body);
}

.ad-details-page .icon-list .white:hover{
  color: #22205f;
}

.contact-us{
  padding: 5px 15px;
  border-radius: 10px;
  margin-top: 0.8rem;
  margin-bottom:0.8rem;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.contact-us:hover{
  background-color: #6fcbdc;
}

.contact-us img{
  width: 17px;
  height:auto;
}
.advertis-info .contact-us img{
  width: 20px;
}
.contact-us span{
  color: #fff;
  margin-right: 5px;
  font-size: 15px;
}
.advertis-info .contact-us span{
  font-size: 20px;
}
.code-advertise{
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;

}
.code-advertise a,
.code-advertise span{
  font-size: 0.875rem;
  color: #fff;
  background-color: #b8529e;
}
.icon-list{
  border-radius: 0.5rem;
  box-shadow: 0px 0px 8px var(--grey);
}
.icon-list a{
  padding: 0.75rem 1rem;
  color: #b0b0b0;
}
.icon-list a:hover {
  color: #b0b0b0;
  background: var(--bakcground-5);
}
.icon-list .user-profile li a:hover{
  background-color: #e2e5ff;
}
.icon-list a:last-child{
  border-left: none;
}
.icon-list .user-profile input {
  display: none;
}
.icon-list .user-profile li a {
  cursor: pointer;
}
@media(max-width: 500px) {
  .icon-list.user-options {
      flex-wrap: wrap;
      border-radius: 15px;
      /* overflow: hidden; */
  }
  .icon-list.user-options > a,
  .icon-list.user-options > button {
      flex: 0 0 50%;
      border-radius: 0;
      padding: 10px;
  }
  .icon-list.user-options > button.white:first-child {
      border-bottom: 1px solid var(--border-2);
      border-left: 1px solid var(--border-2);
  }
  .icon-list.user-options > a:nth-child(2) {
      border-bottom: 1px solid var(--border-2);
  }
  .icon-list.user-options > button.white:nth-child(3) {
      border-left: 1px solid var(--border-2);
  }
}
.related-links{
  padding: 1.25rem 1.75rem;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 3px var(--grey);
  margin-top: 2rem;
  background-color: var(--background-body);
}
.related-links a{
  padding: 10px;
  background-color:var(--background-2);
  margin: 5px;
  border-radius: 15px;
  color: #8f95a3;
  font-size: 14px;
}
.related-links a:hover{
  color: #22205f;
}
.note {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid #4d97d0;
  border-radius: 1.2rem;
  padding: 1rem 0.625rem;
  color: #3953a3;
  margin-bottom: 5rem;
  font-size: 17.5px;
  background-color: var(--background-4);
}
.note p{
  margin-bottom: 0;
}
.note span{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 3em;
  height: 3em;
  line-height: 3em;
  background-color: var(--background-5);
  text-align: center;
  border-radius: 50%;
  margin-left: 10px;
}
.replies{
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: end;
}
.replies button{
  background-color: #3953a3;
  padding: 10px 15px;
  color: #fff;
  border-radius: 12px;
  font-size: 14px;
}

.replies button:hover{
  background-color: #6fcbdc;
}

.replies button span i{
  transform: rotate(45deg);
  font-size: 12.5px;
}
.textarea{
  position: relative;
  margin-bottom: 1.5rem;
}
.textarea .alert {
  display: block;
}
.textarea i{
  position: absolute;
  right: 20px;
  top: 22px;
  color: #ADAEB0;
  font-size: 17px;
}
.textarea textarea{
  background-color: var(--backgroun-3);
  outline: none;
  border: 1px solid var(--scroll-thumb);
  color: var(--font-color);
  border-radius: 12px;
  width: 100%;
  padding: 1rem 3rem 1rem 1rem;
}
.textarea textarea::placeholder{
  color: #ADAEB0;
  font-size: 15px;
}
.textarea textarea:focus{
  border-color:#3953a3;
}
.banner{
  margin-top: 5px;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: #22205f;
  display: flex;
  font-weight: 500;
}
.ad-details-page .banner {
  margin-bottom: 15px;
}
.banner div{
  width: 20px;
  height: auto;
}
.banner div img{
  width: 100%;
  height: 100%;
}
.banner span{
  margin-right: 5px;
}
.advertise-banner{
  padding: 1.125rem;
  margin-bottom: 1.25rem;
  box-shadow: 0px 0px 8px var(--grey);
  border-radius: 20px;
}
.advertise-banner .advertis-link span{
  background-color: var(--background-2);
  font-size: 0.875rem;
  padding: 0.625rem 1.5rem;
  border-radius: 21px;
  color: #8f95a3;
  display: inline-block;
}
.advertise-banner .advertis-link span:hover{
  color: #22205f;
}
.advertise-banner ul{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 1.25rem;

}
.advertise-banner ul li{
  margin: 3px;
  height: 90px;
}
.advertise-banner ul li a,
.advertise-banner ul li a div {
  display: block;
  width: 100%;
  height: 100%;
}
.advertise-banner ul li a img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.register{
  padding: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  max-width: 70vw;
  min-height: 250px;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 0px 10px var(--grey);
}
@media (max-width:767px) {
  .register{
      max-width: 90vh;
  }
}
.add-post{
  box-shadow: 0px 0px 10px var(--grey);
}
.add-post button{
  background-color: #3953a3;
  padding: 10px 15px;
  color: #fff;
  border-radius: 0.438rem;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.add-post button:hover{
  background-color: #6fcbdc;
}

h2{
  color: #22205f;
  margin-bottom: 2.5rem;
  text-align: center;
}
.register h2 span i {
  transform: rotate(180deg);
}
.register .form-register{
  max-width: 28rem;
  width: 100%;
}
.register .form-register .alert {
  margin: 10px 0 0;
  font-size: 15px;
}
.register .form-register form > .alert {
  margin-bottom: 10px;
}
.add-post .form-add-post span{
  border-bottom: 1px solid #3953a3;
  font-weight: bold;
}
.add-post .form-add-post p{
  margin-top: 0.5rem;
  font-size: 14px;
  color: #b8529e;
  font-weight: bold;
}

.add-post .form-add-post form{
  margin-top: 1rem;
}
.add-post{
  background-color: var(--background-body);
}
.add-post div label{
  margin-bottom: 0.625rem;
  color: var(--font-color);
}

.register div input,
.register div select,
.add-post div input,
.add-post div select,
.add-post textarea {
  border-radius: 0.438rem;
  border: 1px solid #b0b0b066;
  min-height: 45px;
  max-width: 500px;
  padding: 10px 30px 10px;
  outline: none;
  text-align: right;
  background-color: var(--backgroun-3);
  color: var(--font-color);
}
.add-post div input,
.add-post div select,
.register div select,
.add-post textarea {
  padding: 10px;
}
.add-post div input,
.add-post div select,
.add-post textarea {
  max-width: 100% !important;
}
.add-post div i {
  color: var(--font-color);
}
.register form div{
  position: relative;
}
.register .form-register div a{
  color: var(--font-color-2);
}
.register form div i {
  position: absolute;
  padding-right: 0.625rem;
  line-height: 48px;
  color: var(--font-color-2);
}
.register form div i.fa-eye,
.register form div i.fa-eye-slash{
  left: 10px;
  right: auto;
}

.register div input:focus,
.register div select:focus,
.add-post div input:focus,
.add-post div select:focus{
  border-color: #3953a3;
}
.register div button[type="submit"],
.add-post div button[type="submit"]{
  background-color: #3953a3;
  padding: 10px 15px;
  color: #fff;
  border-radius: 0.438rem;
  font-weight: bold;
}

.add-post div button[type="submit"]:hover{
  background-color: #6fcbdc;
}

.register div button[type="submit"] span i{
  position: relative;
  line-height: normal;
  transform: rotate(180deg);
  color: #fff;

}
.add-post{
  padding: 20px;
  margin-bottom: 50px;
}
.add-post h2{
  margin-bottom: 25px;
}
.add-post h3{
  color: #22205f;
}
.add-post p{
  margin-bottom: 0;
  color: var(--font-color);
}
.add-post span{
  color: #22205f;
  font-weight: bold;
}
.confirm{
  max-width: 50vw;
  padding: 35px;
}

.subscription-section .go-back i{
  color: #777;
}
.subscript{
  box-shadow: 0px 0px 8px var(--grey);
  border-radius: 20px;
  padding: 25px;
  min-height: 350px;
  margin-bottom: 1.5rem;
}
.subscript div{
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-radius: 1.2rem;
  padding: 1rem 0.625rem;
  font-size: 17.5px;
  justify-content: center;
}

.subscript div span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 3em;
  height: 3em;
  background-color: #3953a3;
  text-align: center;
  border-radius: 50%;
  color: #fff;
}
.subscript div span i{
  font-size: 24px;
}
.subscript h3{
  color: #3953a3;
  text-align: center;
  margin-bottom: 2rem;
}
.subscript ul{
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}
.subscript ul li {
  list-style:disc;
  color: #ADAEB0;
}
.subscript a{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 300px;
  margin: auto;
  margin-bottom: 1rem;
  border-radius: 7px;
  padding: 10px;
  color: #3953a3;
  font-weight: 500;
}
.subscript a:last-of-type{
  color: #fff;
}
.subscript a img{
  width: 20px;
  margin-left: 0.5rem;
}
.condition div{
  justify-content: flex-start;
  align-items: flex-start;
}

.condition img{
  width: 25px;
  object-fit: contain;
}
.condition h3{
  margin-bottom: 0.5rem;
}
.accordion-item{
  background-color: var(--background-body);
  box-shadow: 0px 0px 8px var(--grey);
  border-radius: 20px !important;
  padding: 18px;
  margin-bottom: 1.5rem;

}
.accordion-button{
  color: var(--font-color);
  font-weight: 600;
  padding-left: 0;
  background:none;
}
.accordion-button span{
  color: #3953a3;
  font-size: 25px;
  margin-left: 10px;
}
.accordion-button:focus{
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
}
.accordion-button::after{
  font-family: "Font Awesome 5 Pro";
  content: "\f107" !important;
  background-image: none;
  background-color: #b0b0b0;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  font-size: 18px;
}
.accordion-button:not(.collapsed)::after{
  background-image: none;
}
.accordion-button:not(.collapsed){
  background: none;
  box-shadow: none;
  color: var(--font-color);
}
.accordion strong{
  color: var(--font-color-2);
}
.subscription-section a p{
  color: #919191;
  text-align: center;
  font-size: 18px;
}
.subscription-section p{
  text-align: center;
  color: #919191;
  margin-bottom: 0.2rem;
}
.subscription-section p span{
  color: #3953a3;
}
.condition{
  min-height: fit-content;
}
.condition h5{
  color:#3953a3;
  text-align: right;
}
.condition button{
  padding: 11px 25px;
  color: #fff;
  border-radius: 12px;
  font-weight: 500;
  margin-top: 1.5rem;
}
.discount{
  box-shadow: 0px 0px 8px var(--grey);
  border-radius: 20px;
  padding: 25px;
}
.discount h2{
  text-align: right;
  margin-bottom: 1.5rem;
}
.discount h2 span{
  font-size: 20px;
  color: #fff;
  background-color: #3953a3;
  padding: 7px 12px;
  border-radius: 50%;
  border: 1px solid #3953a3;
}
.discount h2 span i{
  font-size: 20px;
}
.discount h5{
  color: #3953a3;
  font-weight: bold;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  line-height: 35px;
}
.discount div{
  border-bottom: 1px solid #adadad;
  padding-bottom: 1.2rem;
  padding-top: 1.2rem;
}
.discount div:last-of-type{
  border-bottom: none;
}
.discount h5::before {
  counter-increment: number;
  content: counter(number);
  border: 2px solid #3953a3;
  padding: 0px 15px;
  border-radius: 50%;
  margin-left: 10px;
}
.discount p{
  text-align: right;
  color: #adadad;
  font-size: 18.5px;
}
.discount ul{
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1.5rem;
}
.discount ul li {
  color: #adadad;
  list-style: disc;
  margin-bottom: 0.625rem;
}
.discount .discount-note{
  display: flex;
  align-items: center;
  max-width: 600px;
  padding: 0.8rem;
  background-color: #f8ecad;
  border-radius: 12px;
  gap: 1rem;
}
.discount .discount-note span{
  color: #7e7859;
}
.discount .discount-note a{
  white-space: nowrap;
  background-color: #3953a3;
  border-radius: 12px;
  color: #fff;
  padding: 0.625rem;
}
.discount .discount-note a span{
  color: #fff;
  margin-left: 3px;
}
.discount .discount-note a span i{
  transform: rotate(180deg);
}
.discount p:last-of-type span{
  border-bottom: 1px solid #3953a3;
  font-weight: bold;
}
/*User Pages*/
.user-pages{
  display: flex;
  justify-content: space-between;
}
.user-pages ul{
  display: flex;
  gap: 0.25rem;
  width: 100%;
  justify-content: space-between;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
.user-pages ul li{
  font-size: 15px;
  height: 100%;
  width: 100%;
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
}

.user-options-list {
  display: none;
}

@media(max-width: 767px) {
  .background-blue .user-options-list {
      width: 100%;
      display: flex;
  }
  .background-blue .user-options-list li {
      flex: 0 0 25%;
      background: var(--background-body);
      display: block;
  }
  .background-blue .user-options-list li a {
      color: #aaa;
      display: block;
      padding: 5px 0;
      font-size: 20px;
      text-align: center;
      line-height: 38px;
      height: 40px;
      border-bottom: 1px solid var(--scroll-thumb);
  }
  .background-blue .user-options-list li.active a {
      color: #3953a3;
      background: var(--background-5);
      border-bottom: 1px solid #3953a3;
  }
}

i.follow{
  transform: rotate(50deg);
  margin-left: -3px;
}
.user-profile{
  position: relative;
}
.user-profile button{
  height: 100%;
  padding: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.438rem;
  white-space: nowrap;
}
.user-profile ul{
  position: absolute;
  left: -10px;
  top: 50px;
  display: flex;
  flex-direction: column;
  background: var(--background-body);
  box-shadow: 1px 2px 7px rgba(0,0,0, 0.5);;
  height: auto;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  border-radius: 0.438rem;
  margin-top: -7px;
  margin-left: 7px;
  min-width: 200px;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  gap: 0;
  z-index: -1;
  transition: all 0.5s ease-in-out;
  opacity: 0;
}
@media (max-width:575px) {
  .user-profile ul{
      min-width: 160px;
  }
}
.user-profile ul div{
  position: absolute;
  background-color: var(--background-body);
  width: 14px;
  height: 14px;
  z-index: -10;
  transform: rotate(45deg);
  top: -0.25rem;
  left: 0.625rem;

}
.user-profile ul.active{
  opacity: 1;
  z-index: 99;
}

.user-profile ul li{
  display: block;
}

.user-pages ul li a,
.user-profile button{
  color: #b9daf1;
  font-size: 18px;
}
.user-profile ul li button,
.user-profile ul li a{
  padding: 0.4rem 1.125rem;
  font-weight: 200;
  color: var(--font-color-2) !important;
  display: block;
  align-items: center;
}
.user-pages ul li:hover,
.user-pages button:hover,
.user-pages ul li.active{
  background-color: #6fcbdc;
}
.user-pages ul li:hover a,
.user-pages ul li.active a,
.user-profile button:hover {
  color: #fff;
}
.link-small-screen{
  display: flex;
  align-items: center;
}
.link-small-screen a,
.link-small-screen button.sideBar-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 0%;
  font-size: 1.5rem;
  padding: 0.75rem 0 !important;
  border: none;
  color: #aaaaaa;
}
.message{
  box-shadow: 0px 0px 8px var(--grey);
  border-radius: 16px;
  padding: 1.125rem;
  height: 700px;
  position: relative;
  margin-bottom: 2rem;
}
.message .conversition{
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #b9b9b978;
}
.message ul .conversition {
  padding: 10px 0 5px;
}
.message ul li:last-child .conversition {
  border: 0;
}
.message h3{
  color: #919191;
  display: flex;
  align-items: center;
  font-size: 20px;
  margin: 0;
}
.message .conversition div{
  display: flex;
  gap: 0.5rem;
}
.message .conversition div > span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 3em;
  height: 3em;
  background-color: #3953a3;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  overflow:hidden;
}
.message .conversition span{
  color: #999;
}
.message .conversition p{
  display: flex;
  flex-direction: column;
  margin: 0;
}
.message form {
  padding: 10px 0;
  position: relative;
}
.message form.search-form {
  display: none;
}
.message form input {
  border: 1px solid var(--border-2);
  padding: 5px 10px;
  border-radius: 10px;
}
.message form input:focus {
  border-color: #6fcbdc;
}
.message form .search-list {
  position: absolute;
  top: 100%;
  max-height: 250px;
  left: 0;
  right: 0;
  border-radius: 15px;
  background: #fff;
  z-index: 5;
  background: #fff;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}
.message form input:focus + .search-list {
  visibility: visible;
  opacity: 1;
}
.message form .search-list li {
  padding: 10px;
}
.message form .search-list li:not(:last-child) {
  border-bottom: 1px dotted var(--border-2);
}
.message form .search-list li a {
  color: #777;
  cursor: pointer;
  display: block;
}
.message form .search-list li a i {
  margin-right: 10px;
  color: #6fcbdc;
}
.message .blank-conv {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.message .blank-conv span {
  flex: 0 0 100%;
  text-align: center;
  font-size: 20px;
  color: #999;
}
.message .blank-conv span i {
  font-size: 60px;
}
.message .blank-conv img {
  margin: 0 10px;
}
.message .conv-header {
  align-items: center;
}
.message .conv-header .go-back i {
  font-size: 20px;
  margin-right: 10px;
}
.message .user-info {
  border-bottom: 1px solid var(--border-2);
  padding-bottom: 5px;
  position: relative;
  text-align: center;
}
.message .user-info .name {
  font-size: 18px;
  color: #777;
}
.message .user-info > .arrow,
.message .user-info > button {
  position: absolute;
  left: 5px;
  top: -5px;
  padding: 2px 10px;
  z-index: 5;
  color: var(--font-color);
}
.message .user-info > .arrow {
  left: auto;
  right: 5px;
  color: #999;
  cursor: pointer;
  display: none;
}
@media (max-width: 767px) {
  .message .user-info > .arrow {
      display: block;
  }
}
.message .user-info ul {
  position: absolute;
  left: 0;
  top: 35px;
  z-index: 99;
  background: var(--background-input);
  border: 1px solid var(--border-2);
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  padding: 5px 0;
  border-radius: 10px;
  display: none;
}
.message .user-info ul li a {
  padding: 10px 20px;
  display: block;
  font-size: 15px;
  color: var(-font-color-2);
}
.message .user-info ul li a:hover {
  background: var(--border-white);
  color: var(-font-color-2);
  cursor: pointer;
}
.message .user-info ul li a i {
  font-size: 15px;
  padding-left: 5px;
}
.message .user-info ul li a.ban i {
  color: #d00;
}
.message .messages-box {
  padding: 15px;
  overflow-y: auto;
  height: calc(100% - 90px);
  display: flex;
  flex-direction: column-reverse;
}
.message .messages-box li {
  display: block;
}
.message .messages-box .msg-box {
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  border-radius: 15px;
  padding: 10px;
  max-width: 75%;
  display: inline-block;
  margin-bottom: 15px;
  text-align: right !important;
}
.message .messages-box .msg-box p {
  font-size: 15px;
  margin-bottom: 0;
}
.message .messages-box .msg-box p a {
  color: #000;
  text-decoration: underline;
  overflow-wrap: break-word;
  text-align: left;
}
.message .messages-box .msg-box p.ads-info span {
  display: block;
  margin-bottom: 5px;
}
.message .messages-box .msg-box .date {
  text-align: left !important;
  font-size: 12px;
  color: #999;
  display: block;
}
.message .messages-box .sender {
  background:  none !important;
  text-align: left;
}
.message .messages-box .sender .msg-box {
  background: #6fcbdc;
  color: #fff !important;
}
.message .messages-box h4.date {
  color: #22205f;
  text-align: center;
  margin-bottom: 20px;
  font-size: 15px;
  text-transform: uppercase;
}
.message .messages-box .sender .msg-box .del-btn {
  color: #d00;
}
.message .messages-box .sender a {
  color: #fff !important;
}
.message .messages-box .sender .msg-box .date {
  color: #eee;
}
.message .messages-box {
&::-webkit-scrollbar{
   width: 8px;
}

&::-webkit-scrollbar-track {
   background-color:#999;
   border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
   height: 2px;
   border-radius: 10px;
   background: #bbb;
}
}
.message .messages-box + form {
  padding: 5px 0;
  position: relative;
}
.message .messages-box + form input[type="text"] {
  display: block;
  border-radius: 10px;
  background: var(--background-5);
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  font-size: 15px;
  border: 0 !important;
}
.message .messages-box + form button {
  position: absolute;
  left: 0px;
  top: 15px;
  padding: 10px;
  cursor: pointer;
  color: #6fcbdc;
  right: auto;
}
.message .messages-box + form .img-input {
  position: absolute;
  top: 15px;
  left: 38px;
  padding: 5px 10px;
  border-left: 1px solid #aaa;
  overflow: hidden;
  display: block;
  padding-top: 11px;
  border-right: none;
  right: auto;
}
.message .messages-box + form .img-input input {
  position: absolute;
  top: 0;
  left: 0;
  right: -100px;
  bottom: 0;
  cursor: pointer;
  opacity: 0;
}
.message.name-list {
  padding: 5px;
  overflow: auto;
}
.message.name-list .name-box {
  padding: 10px 0;
}
.message.name-list .name-box > span {
  font-size: 13px;
  color: #555;
}
.message .search-button {
  margin: 0;
  font-size: 18px;
  padding: 5px 10px;
  background: var(--background-5);
  color: #22205f;
}
.message .search-button:hover {
  background: #d0d6ea;
}
@media (max-width: 767px) {
  .message.name-list {
      height: auto;
      max-height: 500px;
  }
  .message.no-message {
      display: none;
  }
  .message.messages-box {
      position: fixed;
      top: 0;
      left: -100%;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 99999;
      background: #fff;
      transition: all .5s ease-in-out;
  }
  .message.messages-box.open {
      left: 0;
  }
}
.buttons{
  display: flex;
  gap: 0.8rem;
}
.buttons button{
  border-radius: 8px;
  padding: 8px 15px;
  background-color: #3953a3;
  color: #fff;
}
.buttons button:first-of-type{
  background-color: #929aaa;
}
.buttons button:first-of-type:hover {
  background-color: #2a4c71;
}
.titile{
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
}
.titile h3{
  color: #3953a3;
  font-weight: 600;
}
.titile span{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  background-color: #3953a3;
  text-align: center;
  border-radius: 50%;
  color: #fff;
}
.notification{
  box-shadow: 0px 0px 8px var(--grey);
  padding: 20px;
  display: flex;
  gap: 1rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
  background: #fff;
}
.notification > span{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 3em;
  height: 3em;
  background-color: var(--backgound-post);
  text-align: center;
  border-radius: 50%;
  color: #3953a3;
}
.notification div{
  color: #919191;
}
.notification div p:first-of-type{
  color: #3953a3;
  font-weight: 500;
  font-size: 18px;
}
.favorite{
  box-shadow: 0px 0px 8px var(--grey);
  height: 600px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.favorite .posts-list{
  background-color: var(--backgound-post);
}
.favorite .posts-list .border-dotted{
  border-bottom: 1px dotted #b0b0b0;
}
.favorite p {
  text-align: center;
  margin-top: 0.5rem;
}

.favorite .post{
  border-left: 1px solid #b0b0b0;
  border-bottom: 0;
  flex-grow: 1;
}
.clear{
  display: flex;
  justify-content: center;
  flex-grow: 0.2;
}
.clear img{
  width: 47px !important;
  object-fit: contain !important;
}
.favorite .posts-list .post-img{
  gap: 0.5rem;
  flex-grow: inherit;
  justify-content: center;
}
.favorite .posts-list .post .post-text{
  padding-bottom: 0;
}


.profile{
  background-image: url(../img/background.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 425px;
}
.profile .delete-banner,
.profile .add-banner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #3953a3;
  color: #fff;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.profile .delete-banner {
  background: #d00;
}
.profile .add-banner input {
  position: absolute;
  top: 0;
  left: 0;
  right: -300px;
  bottom: 0;
  cursor: pointer;
  opacity: 0;
  z-index: 999;
  width: 1000%;
}
.profile .user-profile ul a {
  cursor: pointer;
}
.profile .user-profile ul a:hover{
  background-color: #6fcbdc;
}
.profile a.go-back {
  margin-right: 10px;
  top : 0;
}
.profile .user-profile ul a + input {
  display: none;
}
.profile a.go-back span{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background-color: rgba(0,0,0,.7);
  text-align: center;
  border-radius: 50%;
  color: #fff;
}
.profile a.go-back span i {
  color: #fff;
  font-size: 30px;
}
.profile a.go-back span:hover i{
  color: #22205f;
}
.profile .btn-div {
  float: left;
}
.profile .share-btn {
  margin-left: 15px;
  margin-top: 10px;
  margin-bottom: 15px;
  width: 38px;
  height: 38px;
  background-color: rgba(0,0,0,.7);
  text-align: center;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.profile .share-btn:hover{
  color: #22205f;
}
.bio-box {
  border-top: 1px solid var(--border-white);
  position: relative;
  color: var(--font-color);
}
.bio-box .btn-contant {
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid #3953a3;
}
.bio-box .contact-list {
  visibility: hidden;
  opacity: 0;
  right: calc(50% - 50px);
  top: 60px;
  min-width: 200px;
  border-radius: 15px;
  padding: 15px;
  background: #fff;
  position: absolute;
  z-index: 99;
  box-shadow: 0 0 5px lightgrey;
  text-align: center;
  transition: all .3s ease-in-out;
}
.bio-box .contact-list.open {
  visibility: visible;
  opacity: 1;
}
.bio-box .contact-list:before {
  position: absolute;
  z-index: -1;
  top: -15px;
  right: calc(50% - 24px);
  content: '';
  border-style: solid;
  border-width: 0 24px 24px 24px;
  border-color: transparent transparent #fff transparent;
}
.bio-box .contact-list a,
.bio-box .contact-list span {
  display: block;
  color: #3953a3;
  text-align: center;
}
.bio-box .contact-list span {
  font-weight: bold;
}
.bio-box .contact-list li:last-child {
  border: 0;
}
.profile-details{
  display: flex;
  padding-top: 1.3rem;
  padding-bottom: 1.3rem;
}
.profile-details .left-side,
.profile-details .right-side,
.profile-details .middle-side {
  flex: 0 0 33.33%;
}
.profile-details .right-side {
  padding-right: 15px;
}
@media (max-width:575px) {
  .profile-details .right-side{
      padding-right: 12px;
  }
}
.profile-details .left-side {
  padding-left: 15px;
  text-align: left;
}
@media (max-width:575px) {
  .profile-details .left-side{
      padding-left: 12px;
  }
}
.profile-details .right-side .edit-store-btn {
  font-size: 14px;
  border: 1px solid var(--scroll-thumb);
  color: #3953a3;
  border-radius: 15px;
  padding: 2px 10px;
}
.profile-details .right-side .edit-store-btn:hover{
  background-color: #6fcbdc;
}
.profile-details .right-side .edit-store-btn + p {
  margin-top: 5px;
  font-size: 14px;
}
.profile-details .left-side .star-p,
.profile-details .left-side .star-list {
  display: inline-block;
  font-size: 13px;
}
.profile-details .left-side .star-p span:not(.num) {
  color: #777;
}
.profile-details .left-side .star-list li {
  display: inline-block;
  font-size: 12px;
  color: #ebedef;
}
.profile-details .person{
  text-align: center;
  color: #999;
}
.profile-details .person .user-name-box span {
  font-size: 20px;
  color: var(--font-color);
  display: block;
}
.profile-details .person .user-name-box span .qr {
  cursor: pointer;
  color: #3953a3;
  font-size: 16px;
  display: inline-block;
  margin: 0 5px;
}
.profile-details .person .user-name-box span.at {
  font-size: 14px;
  color: #999;
  direction: ltr;
  word-break: break-word;
}
.profile-details .person .img-person{
  width: 137px;
  height: 137px;
  border: 3px solid #fff;
  border-radius: 50%;
  margin: -100px auto 0;
  position: relative;
}
.profile-details .person .img-person img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profile-details .person .img-person button,
.profile-details .person .img-person .add-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #3953a3;
  color: #fff;
  position: absolute;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 15px;
  z-index: 5;
}
.profile-details .person .img-person button {
  right: 0;
  background: #d00;
}
.profile-details .person .img-person .add-img {
  left: 0;
}
.profile-details .person .img-person .add-img input {
  position: absolute;
  top: 0;
  left: 0;
  right: -300px;
  bottom: 0;
  cursor: pointer;
  opacity: 0;
  z-index: 999;
  width: 1000%;
}
.edit-profile {
  margin-bottom: 50px;
}
.shop-desc:not(:last-child) {
  border-bottom: 1px solid #b0b0b066;
}
.shop-desc .add-num {
  float: left;
}
.shop-desc .contact-block {
  margin-top: 15px;
}
.shop-desc .contact-block input {
  margin-left: 10px;
  width: 200px;
}
.shop-desc .contact-block button {
  padding: 10px;
  border-radius: 0.438rem;
  color: #fff;
  background: #d00;
  cursor: pointer;
}
.shop-desc label {
  display: block;
}
.shop-desc label small {
  font-weight: bold;
  color: #080;
}
.shop-desc textarea {
  margin-top: 15px;
  border-radius: 0.438rem;
  border: 1px solid #b0b0b066;
  min-height: 125px;
  width: 100%;
  padding: 10px;
  outline: none;
  text-align: right;
  background: var(--background-body);
  color: var(--font-color);
}
.shop-desc input {
  border-radius: 0.438rem;
  border: 1px solid #b0b0b066;
  padding: 10px;
  outline: none;
  text-align: right;
  background: var(--background-body);
  color: var(--font-color);
}
.profile .user-profile ul {
  left: 10px;
  top: 0;
}
.profile .user-profile.first-list ul {
  background: rgba(0, 0, 0, 0.7);
  min-width: 100px;
  top: -30px;
  left: 50px;
  padding: 5px 10px;
}
.profile .user-profile.first-list ul li:not(:last-child) {
  border-bottom: 1px solid #777;
}
.profile .user-profile.first-list ul a {
  color: #fff !important;
  font-size: 12px;
  padding: 10px;
  display: flex;
  gap: 5px;
}
.profile-details .person .created_at {
  text-align: center;
}
.profile-details .person .created_at span {
  display: block;
  margin-top: 5px;
  font-weight: normal;
}
.profile-details .person .created_at i{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background-color: #eaeaea;
  text-align: center;
  border-radius: 50%;
  color: #bbbbbb;
}
.profile-details .person h5{
  color: #3953a3;
  font-weight: bold;
}
.add-page-btn {
  order: 10;
  border-radius: 0;
  padding-right: 20px;
  padding-left: 20px;
  background: #e2e5ff;
  border: 0;
  color: #22205f !important;
}
.dark .add-page-btn {
  background: var(--background-5) !important;
}
.add-page-btn:hover {
  background: #6fcbdc;
}
.profile-tabs {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-white);
}
.no-block {
  text-align: center;
}
.no-block i {
  width: 60px;
  height: 60px;
  background: #e2e5ff;
  color: #3953a3;
  border-radius: 50%;
  font-size: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.no-block p {
  margin-top: 10px;
  margin-bottom: 0;
  padding-bottom: 15px;
}
.profile-tabs label {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  display: block;
  padding: 10px 30px;
  cursor: pointer;
  color: #3953a3;
  font-size: 16px;
  color: #aaa;
}
@media (max-width:575px) {
  .profile-tabs label{
      padding: 10px 16px;
  }
}
.profile-tabs .tab {
  -webkit-box-ordinal-group: 100;
  -webkit-order: 99;
  -ms-flex-order: 99;
  order: 99;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  border-top: 1px solid #3953a3;
}
.profile-tabs .tab > span{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6em;
  height: 6em;
  background-color:var(--backgound-post);
  text-align: center;
  border-radius: 50%;
  color: #3953a3;
  margin-bottom: 1rem;
}
.profile-tabs .tab > span i{
  font-size: 60px;
}
.profile-tabs .tab p{
  color: var(--font-color);
}
.profile-tabs .tab a.advertise-btn {
  width: 40%;
  justify-content: center;
  padding: 25px;
}
.profile-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.profile-tabs input[type="radio"]:checked + label {
  color: #22205f;
  border-bottom: 3px solid #3953a3;
}
.profile-tabs input[type="radio"]:checked + label + .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.p{
  color: var(--font-color);
}

/* Modal */
.modal-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s visibility ease-in, opacity 0.3s ease-out;
  visibility: hidden;
  opacity: 0;
}
.modal-container.show {
  visibility: visible;
  opacity: 1;
}
.modal-container .model{
  width: 95%;
  min-height: 275px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 15px rgba(34, 34, 53, 0.1);

}
.modal-container h3{
  color: #3953a3;
  font-size: 20px;
  padding: 10px;
}
.modal-container h3 span{
  display: inline-flex;
  background-color: #3953a3;
  color: #fff;
  width: 2em;
  height: 2em;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.modal-container h3 span img{
  width: 27px;
}
.modal-container .profile-tabs{
  background-color: #d9d9d9;
}
.modal-container .profile-tabs .tab{
  background-color: #fff;
  border-top: none;
  justify-content: start !important;
  align-items: flex-start !important;
}
.modal-container .profile-tabs .tab button{
  background-color: #3953a3;
  color: #fff;
  border-radius: 10px;
  margin-top: 20px;
  padding: 10px;
}
.modal-container .profile-tabs .tab button img{
  width: 27px;
}
.modal-container .profile-tabs input[type="radio"]:checked + label{
  background-color: #3953a3;
  color: #fff;
}
.modal-container .profile-tabs label:last-of-type{
  background: none;
  color: #000;
}
/* .modal-container .profile-tabs input[type="radio"]:checked + label + .tab{
justify-content: start;
align-items: flex-start;
} */
.modal-container form div{
  position: relative;
  margin-bottom: 10px;
}
.modal-container form div input{
  border: 1px solid #b0b0b066;
  text-align: right;
  border-radius: 5px;
  padding: 10px;
  padding-right: 30px;
}
.modal-container form div i{
  position: absolute;
  right: 5px;
  top: 15px;
  color: #919191;
}
.modal-container form div img{
  width: 20px;
  position: absolute;
  right: 5px;
  top: 15px;
}
.modal-container form div span{
  position: absolute;
  right: 42%;
  background-color: #b0b0b0;
  color: #000;
  height: 100%;
  width: 44px;
  text-align: center;
  padding-top: 10px;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}
.modal-container form div span.tab2{
  left: 0;
  right: auto;
}
.modal-container form label{
  display: inline;
  padding-right: 5px;
  font-weight: 500;
  color: #b0b0b0 !important;
  font-size: 14px !important;
}
.modal-container .profile-tabs input[type="radio"]:checked + label{
  border-bottom: none;
}

.modal {
  justify-content: center;
  align-items: center;
  visibility: hidden;
  display: flex !important;
}
.modal.show {
  visibility: visible;
}


.region-select {
  flex-wrap: wrap;
}
.region-select select {
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 10px 15px;
}
.region-select .city-list {
  position: relative;
}
.region-select .city-list .selected {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 15px;
  color: #22205f;
  border: 1px solid var(--border-2);
  min-width: 120px;
  height: 50px;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.region-select .city-list .selected:hover {
  border-color: #22205f;
}
.region-select .city-list .selected  span {
  flex: 0 0 calc(100% - 8px);
}
.region-select .city-list.open .selected i {
  transform: rotate(180deg);
}
.region-select .city-list ul {
  display: none;
  position: absolute;
  z-index: 99;
  background: var(--background-input);
  padding: 10px;
  max-height: 240px;
  overflow-y: auto;
  top: calc(100% + 5px);
  border-radius: 10px;
  border: 1px solid var(--border-2);
}
.region-select .city-list.open ul {
  display: block;
}
.region-select .city-list ul li {
  position: relative;
  margin-bottom: 5px;
}
.region-select .city-list ul li span {
  padding: 7px 14px;
  font-size: 14px;
  border-radius: 10px;
  color: #22205f;
  transition: all .3s ease-in-out;
  display: block;
}
.region-select .city-list ul li input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}
.region-select .city-list ul li input:hover + span,
.region-select .city-list ul li input:checked + span {
  color: #3953a3;
  background: #6fcbdc;
}
.comment-box {
  padding: 15px;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 6px var(--grey);
  margin-bottom: 20px;
}
.comment-box .comment-info {
  display: flex;
  border-bottom: 1px dashed var(--scroll-thumb);
}
.comment-box .comment-info .right-section {
  flex: 0 0 calc(100% - 165px);
}
.comment-box .comment-info .left-section {
  flex: 0 0 165px;
  text-align: end;
}
@media (max-width:767px) {
  .comment-box .comment-info .right-section {
      flex: 0 0 calc(100% - 135px);
  }
  .comment-box .comment-info .left-section {
      flex: 0 0 135px;
  }

}
.comment-box .comment-info .img-box {
  display: inline-block;
  padding: 0 10px;
}
.comment-box .comment-info img {
  width: 40px;
  height: 40px;
  position: relative;
  top: -10px;
  border-radius: 50%;
}
.comment-box .comment-info .user-time {
  display: inline-block;
}
.comment-box .comment-info .user-time span.time {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--font-color);
}
.comment-box .comment-txt {
  padding: 15px;
  color: var(--font-color);
}
.comment-box .comment-info .left-section button {
  font-size: 14px;
}
.scope-modal .modal-title {
  color: var(--background-footer);
}
.scope-modal label {
  color: #888;
  font-weight: normal;
  font-size: 14px;
  display: block;
}
.scope-modal label span {
  color: #000;
}
.scope-modal .note-txt {
  margin: 2px 0;
  font-size: 12px;
  font-weight: bold;
  color: #aaa;
  display: block;
}
.scope-modal .edit-btn {
  padding: 5px;
  background-color: var(--background-tab);
  color: #3953a3;
  border-radius: 10px;
}
.scope-modal .select-box {
  display: flex;
  gap: 5px;
}
.scope-modal .select-box .edit-btn {
  flex: 0 0 50px;
}
.scope-modal .select-box select {
  border: 1px solid var(--border-2);
  border-radius: 5px;
}

/* -- Rating -- */
.rating {
  border: none;
  float: right;
}

.rating > input { display: none; }
.rating > label:before {
  margin: 5px;
  font-size: 20px;
  display: inline-block;
  content: "\f005";
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
}

.rating > .half:before {
  content: "\f5c0";
  transform: rotateY(180deg);
  position: absolute;
}

.rating > label {
  color: #ddd;
  float: left;
}

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label { color: #FFD700;  }
/* -- ./Rating -- */

.folowup-block {
  margin: 15px;
  border-radius: 15px;
  padding: 25px 0;
  text-align: center;
  background: #f2f4fa9b;
}

/* The switch - the box around the slider */
label.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 25px;
}
label.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
label.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
label.switch .slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
label.switch input:checked + .slider {
  background-color: #6fcbdc;
}
label.switch input:focus + .slider {
  box-shadow: 0 0 1px #6fcbdc;
}
label.switch input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
label.switch .slider.round {
  border-radius: 34px;
}
label.switch .slider.round:before {
  border-radius: 50%;
}
.user-pages ul li a {
  position: relative;
}
.user-pages ul .notifi-count {
  position: absolute;
  right: -10px;
  top: -8px;
  background: #22205f;
  width: 15px;
  height: 15px;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  line-height: 15px;
  padding-top: 1px;
  padding-left: 1px;
}
/* @media (max-width: 1200px) {
.sitemap .sections {
    flex: 0 0 33.33%;
}

}
@media (max-width: 991px) {
.sitemap .sections {
    flex: 0 0 50%;
}
} */
@media (max-width: 767px) {
  .sitemap .sections {
      flex: 0 0 100%;
  }
}
.add-ads-modal .profile-tabs {
  border:0;
}
.add-ads-modal .profile-tabs label {
  background: var(--background-body);
  color: var(--font-color-2);
}
.add-ads-modal .profile-tabs img {
  width: 20px;
}
.add-ads-modal .add-post {
  box-shadow: none;
  min-height: auto;
  max-width: none;
  width: 100%;
}
.add-ads-modal .add-post input[type="text"],
.add-ads-modal .add-post input[type="email"] {
  max-width: none;
  width: calc(100% - 25px);
  color: var(--font-color);
}
.add-ads-modal .add-post input[type="text"].amount-input {
  width: calc(100% - 60px);
}
.add-ads-modal .add-post .amount-select {
  width: 36%;
}
.add-ads-modal .add-post .amount-select-2 {
  width: 80%;
}
.add-ads-modal .add-post input[type="checkbox"] {
  min-height: auto;
}
@media (max-width: 991px) {
  .add-ads-modal .profile-tabs label {
      flex: 33.33%;
      margin: 0;
      padding: 10px 0 5px;
      text-align: center;
      font-size: 13.5px;
  }
  .add-ads-modal .profile-tabs label i {
      display: block;
  }
  .profile {
      height: 35vh;
  }
}
@media (max-width: 600px) {
  .profile {
      height: 30vh;
  }
  .profile-details .person .img-person {
      height: 75px;
      width: 75px;
      margin-top: -60px;
  }
  .profile-details .person .user-name-box span {
      font-size: 16px;
  }
  .profile-details .person .user-name-box span.at {
      font-size: 12px;
  }
  .small-container {
      padding: 0;
  }
}
.sitemap-bg{
  background-color: var(--background-5);
}
.sitemap{
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.sitemap .sections{
  background-color: #fff;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  padding-bottom: 10px;
}
.sitemap .sections h3{
  text-align: center;
}
.sitemap .sections h3 a{
  color: #6fcbdc;
  font-size: 18px;
  text-align: center;
  padding: 0.75rem 1.25rem;
  font-weight: bold;
}
.sitemap .sections ul{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  position: relative;
}

.sitemap .sections ul li a{
  color: #6fcbdc;
  font-size: 15px;
}

.branch-list{
  position: relative;
}
.branch-list::after{
  content: " ";
  position: absolute;
  top: -11px;
  right: -5px;
  height: 100%;
  width: 1px;
  border: 1px dashed #bbbbbb73;
}
.branch-list li{
  position: relative;
}
.branch-list li::after{
  content: " ";
  position: absolute;
  top: 12px;
  right: -22px;
  width: 20px;
  border: 1px dashed #bbbbbb73;
}

.modal-title {
  font-size: 18px;
}
.contact-list li {
  padding: 10px;
  border-bottom: 1px solid var(--border-2);
  color: #3953a3;
}
.contact-list li button,
.contact-list li a {
  display: block;
  cursor: pointer;
  width: 100%;
  text-align: right;
  color: #3953a3;
}
.contact-list li span {
  color: #999;
}
.contact-list li span i {
  color: #3953a3;
}
.contact-list li i {
  margin-left: 10px;
}
.contact-list li:last-child {
  border: 0;
}
.grey-bg {
  background: var(--background-5);
}
.white-bg {
  background: var(--background-body);
}
.profile-page .profile-tabs > .tab {
  padding: 0 !important;
}
.active-star {
  color: gold !important;
}
.half-star-box {
  display: inline-block;
  position: relative;
}
.half-star-box .fa-star {
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.half-star-box .fa-star-half {
  position: relative;
  z-index: 1;
  transform: rotateY(180deg);
}
.profile-tabs .tab .page-content {
  padding: 15px;
  overflow-wrap: break-word;
  width: 100%;
  color: var(--font-color);
}
.edit-block .inner-block {
  width: 500px;
  max-width: 100%;
  margin: 15px auto 30px;
  background: var(--background-5);
  padding: 20px;
}
.edit-block .inner-block h3 {
  font-size: 24px;
  color: #919191;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.edit-block .inner-block .old-info {
  text-align: center;
  color: #999;
  margin-bottom: 5px;
}
.edit-block .inner-block input {
  direction: rtl;
  padding: 5px 10px;
  border-radius: 10px;
  width: 75%;
  margin: 0 auto 15px;
  display: block;
  border: 1px solid var(--border-2);
  background: #fff;
  color: var(--font-color);
  background: var(--background-body);
}
.edit-block .inner-block input:foucs {
  border-color: #3953a3;
}
.edit-block .inner-block .pass-block {
  position: relative;
}
.edit-block .inner-block .pass-block input {
  padding-right: 30px;
  padding-left: 30px;
  color: var(--font-color);
  background: var(--background-body);
}
.edit-block .inner-block .pass-block .icon1,
.edit-block .inner-block .pass-block .icon2 {
  position: absolute;
  top: 7px;
  right: calc(12.5% + 10px);
  color: var(--font-color);
}
.edit-block .inner-block .pass-block .icon2 {
  top: 10px;
  cursor: pointer;
  right: auto;
  left: calc(12.5% + 10px);
  z-index: 5;
}
.edit-block .inner-block button[type="submit"]{
  background: #3953a3;
  color: #fff;
  padding: 5px 20px;
  opacity: .8;
  width: fit-content;
  margin: 15px auto 0;
  border-radius: 15px;
  display: block;
}
.edit-block .inner-block button[type="submit"]:hover {
  opacity: 1;
  background: #6fcbdc;
}
@media(max-width:767px) {
  .edit-block .inner-block input {
      width: 90%;
  }
  .edit-block .inner-block .pass-block .icon2 {
      left: calc(5% + 10px);
  }
  .edit-block .inner-block .pass-block .icon1 {
      right: calc(5% + 10px);
  }
}
.setting-page {
  padding: 25px 0 200px;
}
.setting-page .left-menu ul li {
  margin-bottom: 5px;
}
.setting-page .left-menu ul li a {
  display: block;
  background: var(--background-body);
  padding: 10px 20px;
  border-radius: 10px;
  color: #919191;
  font-size: 16px;
  position: relative;
}
.setting-page .left-menu ul li a:hover {
  color: #3953a3;
}
.setting-page .left-menu ul li a > i {
  margin-left: 10px;
}
.setting-page .left-menu ul li a span {
  float: left;
  margin-left: 5px;
}
.setting-page .left-menu ul li:first-child a {
  background: #e6f1f9;
  color: #3953a3;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
.dark .setting-page .left-menu ul li:first-child a {
  background: var(--background-input);
}
.setting-page .left-menu ul li:first-child a:before {
  position: absolute;
  width: 4px;
  height: 20px;
  background: #3953a3;
  content: '';
  top: calc(50% - 13px);
  right: 2px;
  border-radius: 5px;
}
.setting-page .setting-box {
  background: var(--background-body);
  border-radius: 40px;
  padding: 25px 25px 75px;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
.setting-page .setting-box h4 {
  font-size: 24px;
  color: #919191;
  font-weight: bold;
  margin-right: 15px;
  text-align: right;
  margin-bottom: 25px;
}
.setting-page .setting-box ul > li a {
  color: #919191;
  display: block;
  border-radius: 10px;
  padding: 10px;
}
.setting-page .setting-box ul > li a:hover {
  background: var(--background-5);
}
.setting-page .setting-box ul > li {
  padding: 5px;
  border-bottom: 1px solid var(--scroll-thumb);
}
.setting-page .setting-box ul > li:last-child {
  border: 0;
}
.setting-page .setting-box ol {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}
.setting-page .setting-box ol li {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #919191;
}
.setting-page .setting-box .name {
  width: 250px;
  display: inline-block;
  font-weight: bold;
}
.setting-page .setting-box .name i {
  margin-left: 15px;
  font-weight: normal;
}
.setting-page .setting-box .edit {
  float: left;
  color: #3953a3;
}
.setting-page .setting-box .edit i {
  opacity: 0;
  margin-left: 5px;
  font-size: 12px;
}
.setting-page .setting-box a:hover .edit i {
  opacity: 1;
}
.setting-page .setting-box a:hover .edit span {
  text-decoration: underline;
}
@media  (max-width: 991px) {
  .setting-page {
      padding-bottom: 25px;
  }
  .setting-page .setting-box {
      padding: 15px 6px;
      margin-top: 15px;
  }
  .setting-page .setting-box .name {
      width: auto;
      position: relative;
      top: -7px;
  }
  .setting-page .setting-box .name i {
      position: relative;
      top: 10px;
  }
  .setting-page .setting-box .val {
      font-size: 13px;
      position: absolute;
      right: 50px;
      top: 27px;
  }
  .setting-page .setting-box ul > li a {
      position: relative;
  }
  .setting-page .setting-box ol li {
      height: 4px;
      width: 4px;
  }
  .setting-page .setting-box .edit {
      position :absolute;
      left: 5px;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
  }
}

.notifi-settings {
  display: block;
  margin: 0 0 25px;
  padding: 25px;
  background: var(--background-body);
  border-radius: 40px;
  box-shadow: 0 0 2px rgba(0,0,0,0.2)
}
.notifi-settings li:not(:last-child) {
  margin-bottom: 5px;
}
.notifi-settings li label {
  display: block;
  width: 100%;
  padding: 10px;
  cursor: pointer;
  border-radius: 15px;
  color: var(--font-color);
}
.notifi-settings li label:hover {
  background: var(--background-5);
}
.notifi-settings li label input {
  float: left;
  width: 14px;
  height: 14px;
  cursor: pointer;
  position: relative;
  top: 5px;
  left: 5px;
}
.notification-page .page-top .go-back,
.notification-page .page-top h3,
.notification-page .page-top .buttons {
  display: inline-block;
}
.notification-page .page-top {
  margin-top: 15px;
  margin-bottom: 20px;
}
.notification-page .page-top .buttons {
  float: left;
}
.notification-page .page-top h3 {
  margin: 0;
  font-size: 22px;
  color: #919191;
  font-weight: bold;
}
.notification-page .page-top h3 .go-back {
  font-size: 24px;
  color: #919191;
  margin-left: 10px;
}
.notification-page .notifi-box a {
  border-radius: 25px;
  background: var(--background-input);
  display: flex;
  cursor: pointer;
  padding: 15px;
  margin-bottom: 15px;
}
.notification-page .notifi-box .icon-box {
  flex: 0 0 70px;
  display: flex;
  justify-content: center;
  align-items: center;

}
.notification-page .notifi-box .icon-box i {
  width: 50px;
  height: 50px;
  background: #fff9db;
  color: #ffd60a;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 30px;
}
.notification-page .notifi-box .notifi-info {
  flex: 1;
}
.notification-page .notifi-box .notifi-info h3 {
  color: #3953a3;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}
.notification-page .notifi-box .notifi-info p {
  font-size: 16px;
  color: var(--font-color);
  margin: 10px 0;
}
.notification-page .notifi-box .notifi-info .date {
  color: #919191;
  font-size: 14px;
}
.notification-page .notifi-box .notifi-info .date span {
  float: left;
}
.notification-page .notifi-box .notifi-img {
  flex: 0 0 95px;
  padding-right: 5px;
}
.notification-page .notifi-box .notifi-img img {
  height: 90px;
  width: 90px;
  object-fit: cover;
  border-radius: 15px;
}
.rating-box,
.good-ratings {
  border-top: 1px solid var(--border-white);
}
.good-ratings {
  text-align: center;
}
.rating-box {
  padding: 15px;
}
.rating-box .rate-box {
  padding: 15px 10px;
  border: 1px solid var(--scroll-thumb);
  margin-bottom: 10px;
  border-radius: 15px;
}
.rating-box .rate-box .top-rate .user-info {
  color: #3953a3;
  cursor: pointer;
}
.rating-box .rate-box .top-rate > span {
  float: left;
  color: #919191;
  font-size: 14px;
}
.rating-box .rate-box .top-rate > span span {
  background: #ebfff0;
  color: #22c55e;
  display: inline-block;
  padding: 2px 15px;
  border-radius: 10px;
  margin-right: 10px;
  font-size: 13px;
}
.rating-box .rate-box .top-rate > span i {
  font-weight: bold;
}
.rating-box .rate-box p {
  margin-top: 10px;
  margin-bottom: 0;
  color: #919191;
}
@media (max-width: 767px) {
  .rating-box .rate-box .top-rate .user-info  {
      font-size: 14px;
  }
}
.alert-box-content {
  position: fixed;
  z-index: 9999;
  background: #fff;
  padding: 10px 30px;
  border-radius: 5px;
  border-left: 4px solid #6ebe68;
  top: 20px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  font-size: 14px;
}
.alert-box-content p {
  margin: 0;
  display: inline-block;
}
.contact-modal .close-btn {
  color: #919191;
}
.contact-modal .modal-title {
  margin: 25px 10px 15px;
  color: #919191;
  font-size: 20px;
}
.msg-modal h5 {
  text-align: center;
  font-size: 17px;
}
.msg-modal h5 span {
  display: block;
  color: #919191;
  font-size: 12px;
  margin-top: -15px;
}
.msg-modal textarea {
  min-width: 450px;
  max-width: calc(100vw - 20px);
  min-height: 165px;
  background: #f1f5f9 !important;
  color: #999 !important;
  margin: 15px 0;
  border: 0;
}
@media (max-width:767px) {
  .msg-modal textarea{
      min-width: 250px;
  }
}
.msg-modal textarea::placeholder {
  color: #999 !important;
}
.msg-modal .close-btn {
  color: #aaa;
  font-size: 18px;
}
.msg-modal button[type="submit"] {
  display: block;
  width: 100%;
}
.report-modal .modal-content {
  padding: 15px;
  position: relative;
}
.report-modal .close-btn {
  position: absolute;
  z-index: 10;
  top: 15px;
  right: 15px;
  font-size: 18px;
  color: #919191;
}
.report-modal h5 {
  text-align: center;
  color: #919191;
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 15px;
}
.report-modal textarea {
  min-width: 450px;
  max-width: 100%;
  min-height: 100px;
  margin-bottom: 25px;
}
@media (max-width:767px) {
  .report-modal textarea{
      min-width: 250px;
  }
}
.report-modal .modal-body {
  position: static;
}
.report-modal .modal-dialog {
  max-width: 100%;
}
.report-modal button[type="submit"] {
  display: block;
  margin: 0 auto;
  width: fit-content;
}
#btn-decrease,
#btn-increase {
  display: none;
}

/* -- Add Rating Form -- */
.rating-form {
  max-width: 500px;
  margin: 0 auto;
}
.rating-form label,
.rating-form textarea {
  font-size: 18px;
  color: var(--font-color);
}
.rating-form textarea {
  border: 2px solid #aabdd599;
  padding: 10px;
  font-size: 18px;
  height: 150px;
  resize: none;
  border-radius: 15px;
  outline: none;
  box-shadow: none !important;
}
.dark .rating-form textarea {
  color: var(--font-color);
  border-color: var(--scroll-thumb);
  background: var(--backgound-post);
}
.rating-form textarea::placeholder {
  color: #aaa;
}
.rating-form textarea:focus {
  border-color: #6fcbdc;
}
.rating-form .rate-choice {
  margin: 15px 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  gap: 5px;
  flex-wrap: wrap;
}
.rating-form .rate-choice li {
  flex: 0 0 calc(50% - 5px);
  position: relative;
}
.rating-form .rate-choice li span {
  display: block;
  width: 100%;
  height: 100px;
  color: #aabdd5d6;
  font-size: 18px;
  text-align: center;
  padding-top: 30px;
  border-radius: 15px;
  border: 1px solid transparent;
}
.rating-form .rate-choice li span i {
  display: block;
}
.rating-form .rate-choice li input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
}
.rating-form .rate-choice li input:checked + span {
  background: #e7f1f9;
  border-color: #6fcbdc;
  color: #6fcbdc;
}
.dark .rating-form .rate-choice li input:checked + span {
  background: var(--backgound-post);
}
.rating-form .rate-choice.one-line {
  gap: 0;
}
.rating-form .rate-choice.one-line li {
  flex: 0 0 100%;
}
.rating-form .rate-choice.one-line li span {
  height: auto;
  padding: 15px 45px;
  border-color: #aabdd5d6;
  text-align: unset;
}
.rating-form .rate-choice.one-line li span b {
  width: 20px;
  height: 20px;
  border: 2px solid #aabdd5d6;
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 10px);
  right: 15px;
  z-index: 1;
}
.rating-form .rate-choice.one-line li span b:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  border-radius: 50%;
  border: 3px solid transparent;
}
.rating-form .rate-choice.one-line li input:hover + span b:after {
  border-color: #6fcbdc;
}
.rating-form .rate-choice.one-line li input:checked + span b:after {
  border: 5px solid #6fcbdc;
}
.rating-form .send-btn button {
  display: block;
  width: 100%;
  margin: 20px 0 30px;
}
/* -- ./Add Rating Form -- */

/* -- Folowing Page -- */
.folow-content {
  width: 700px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}
.folow-content .page-title {
  padding: 25px 0;
}
.folow-content .page-title .go-back {
  top: 5px;
  color: #999;
  font-weight: normal;
  font-size: 30px;
}
.folow-content .page-title .go-back + span {
  margin-right: 10px;
  font-size: 24px;
  color: #22205f;
}
.folow-content .user-content {
  border-radius: 25px;
  border: 1px solid var(--border-2);
  margin-bottom: 25px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 15px;
}
.folow-content .user-content img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  flex: 0 0 120px;
}
.folow-content .user-content h3 {
  color: #22205f;
  font-size: 24px;
  text-align: right;
  padding-right: 50px;
  flex: 0 0 calc(100% - 250px);
  margin-bottom: 0;
}
.folow-content .user-content h3 p {
  color: #aaa;
  direction: ltr;
  font-size: 18px;
  margin-bottom: 0;
  margin-top: 5px;
}
.folow-content .user-content > span {
  flex: 0 0 130px;
  text-align: left;
  padding-left: 25px;
  font-size: 20px;
  color: #aaa;
  border-right: 1px solid var(--border-2);
}
.folow-content .user-content > span span {
  color: var(--font-color);
  text-decoration: underline;
  margin-left: 10px;
}
.folow-content .tab {
  padding: 10px 0;
}
.folow-content .posts-list .post {
  border: 1px solid var(--scroll-thumb);
  margin-bottom: 5px;
  padding: 15px;
  border-radius: 15px;
  background: var(--background-body) !important;
}
.folow-content .posts-list .post .post-text {
  min-height: auto;
}
.folow-content .posts-list .post h3 {
  font-size: 20px;
}
.folow-content .blue-circle {
  background: var(--background-5);
  border-radius: 10px;
  padding: 5px 15px;
  color: #22205f;
}
.folow-content .blue-circle:hover {
  background: #d0d6ea;
}
.folow-content .profile-tabs {
  border: 0;
}
.folow-content .posts-list .post-img div a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #eee;
  overflow: hidden;
}
.folow-content .posts-list p {
  margin-bottom: 0;
}
.folow-content .posts-list h4 a {
  color: #22205f !important;
  font-size: 20px;
}
.folow-content .posts-list h4 p {
  color: #aaa !important;
  font-size: 16px;
  direction: ltr;
  text-align: right;
}
.folow-content .posts-list .post .post-text {
  flex: 0 0 calc(100% - 160px);
}
@media (max-width: 767px) {
  .folow-content .user-content img {
      flex: 0 0 75px;
      width: 75px;
      height: 75px;
  }
  .folow-content .user-content h3 {
      flex: 0 0 calc(100% - 155px);
      font-size: 20px;
      padding-right: 15px;
  }
  .folow-content .user-content h3 p {
      font-size: 16px;
  }
  .folow-content .user-content > span {
      flex: 0 0 80px;
      padding-left: 5px;
      font-size: 16px;
  }
  .folow-content .profile-tabs > label {
      padding-left: 8px;
      padding-right: 8px;
  }
}
/* -- ./Folowing Page -- */

.message .option-user {
  display: inline-flex;
}
.qr-modal:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: '';
  z-index: 1;
  background: #3488c9;
}
.qr-modal .modal-dialog {
  z-index: 10;
}
.qr-modal .modal-content {
  padding: 15px;
  min-width: 500px;
}
@media(max-width: 600px) {
  .qr-modal .modal-content {
      min-width: auto;
  }
}
.qr-modal .qr-header {
  display: flex;
  justify-content: space-between;
}
.qr-modal .qr-header i,
.qr-modal .qr-header h5 {
  color: #3953a3;
  font-size: 14px;
}
.qr-modal .qr-header h5 {
  font-size: 16px;
  font-weight: bold;
}
.qr-modal .qr-header button {
  font-size: 12px;
  color: #777;
}
.qr-modal .qr-content {
  margin-top: 25px;
  text-align: center;
}
.qr-modal .qr-content img {
  width: 50px;
  height: 50px;
  border: 1px solid #3953a3;
  padding: 2px;
  border-radius: 50%;
}
.qr-modal .qr-content span {
  display: block;
}
.qr-modal .qr-content span:first-child {
  font-size: 18px;
  font-weight: bold;
  color: var(--font-color);
  margin-top: 15px;
}
.qr-modal .qr-content span.at {
  font-size: 14px;
  color: #aaa;
  direction: ltr;
}
.qr-modal .qr-content span.link {
  margin: 20px 0 10px;
  color: #3953a3;
  font-size: 14px;
  direction: ltr;
}
.qr-modal .qr-content span.link i {
  font-weight: bold;
  margin: 0 5px;
}
.qr-modal .qr-content span.link input {
  display: none;
}
.qr-modal .qr-content span.qr-img span {
  display: inline-block;
  background: rgb(16,115,192);
  padding: 10px;
  border-radius: 15px;
}
.show-qr-modal .modal-content {
  min-width: 500px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.show-qr-modal .nav-tabs {
  display: block;
  text-align: center;
  border: 0;
  margin-bottom: 15px;
}
.show-qr-modal .nav-tabs li {
  display: inline-block;
  margin: 0 10px;
}
.show-qr-modal .nav-tabs li button {
  border: 1px solid #3953a3 !important;
  border-radius: 15px;
  color: #3953a3;
  background: #fff;
}
.show-qr-modal .nav-tabs li button.active {
  color: #fff;
  background: #3953a3;
}
.show-qr-modal .tab-pane {
  text-align: center;
}
.show-qr-modal .long-block {
  display: inline-block;
  border: 1px solid #3953a3;
}
.show-qr-modal .long-block .qr-img {
  padding: 10px;
  border-bottom: 1px solid #3953a3;
}
.show-qr-modal .long-block .name-block {
  padding: 15px 10px;
}
.show-qr-modal .long-block .name-block span {
  display: block;
}
.show-qr-modal .long-block .name-block .name {
  font-size: 18px;
  color: #000;
  font-weight: bold;
}
.show-qr-modal .long-block .name-block .at {
  direction: ltr;
}
.show-qr-modal .long-block .contact-list {
  text-align: right;
}
.show-qr-modal .long-block .contact-list li {
  display: inline-block;
  width: calc(50% - 5px);
  padding: 5px;
  border: 0;
}
.show-qr-modal .long-block .contact-list li:last-child:not(:nth-child(2)) {
  width: calc(100% - 5px);
}
.show-qr-modal .long-block .contact-list li a {
  display: block;
  border-radius: 5px;
  border: 1px solid #3953a3;
  padding: 8px 38px 5px 5px;
  overflow: hidden;
  position: relative;
}
.show-qr-modal .long-block .contact-list li a i {
  background: #3953a3;
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.show-qr-modal .btn-list {
  margin-top: 15px;
}
.show-qr-modal .btn-list li {
  display: inline-block;
  margin: 0 5px;
}
.show-qr-modal .wide-block {
  text-align: right;
}
.show-qr-modal .wide-block .name-block {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  background: #3953a3;
  padding: 20px 10px;
  color: #fff;
  font-size: 18px;
}
.show-qr-modal .wide-block .qr-img {
  min-height: 230px;
}
.show-qr-modal .wide-block .qr-img ul {
  display: inline-block;
  width: calc(100% - 220px);
  color: #000;
  font-size: 16px;
  padding: 15px 0;
}
.show-qr-modal .wide-block .qr-img span {
  float: left;
  margin-top: 20px;
  margin-left: 20px;
  padding: 5px;
  border: 1px solid #3953a3;
}
.show-qr-modal .wide-block .at {
  direction: ltr;
  text-align: left;
  padding: 20px 10px;
  background: #e2e2e2;
  color: #000;
  border-top: 3px solid #3953a3;
}
@media (max-width: 600px) {
  .show-qr-modal .modal-content {
      min-width: auto;
  }
  .show-qr-modal .long-block svg {
      width: 250px;
      height: 250px;
  }
  .show-qr-modal .wide-block .qr-img ul {
      width: 100%;
  }
  .show-qr-modal .wide-block .qr-img > span {
      float: none;
      display: inline-block;
      margin: 10px 0 20px;
  }
}
.alosbiya-card {
  display: inline-block;
  width: calc(100% - 25px);
  direction: ltr;
}
.alosbiya-card li {
  display: inline-block;
}
.alosbiya-card li:not(.dash) {
  width:calc(33.33% - 10px);
}
.alosbiya-card li.dash {
  width: 5px;
}
.alosbiya-card li input {
  text-align: center;
  width: 100% !important;
  padding: 10px 3px;
}
.wallet-p * {
  color: var(--font-color);
}

footer .payment-section{
  text-align: center;
  margin-bottom: 15px;
}
footer .payment-section .payment-img:not(:last-child){
  margin-left: 10px;
  margin-bottom: 10px;
  display: inline-block;
}
footer .payment-section .payment-img img{
  width: 70px;
  object-fit: cover;
}
@media (max-width:767px) {
  footer .payment-section .payment-img img{
      width: 60px;
  }
}
.register div textarea{
  border-radius: 0.438rem;
  border: 1px solid #b0b0b066;
  min-height: 45px;
  max-width: 500px;
  padding: 10px 30px 10px;
  outline: none;
  text-align: right;
  background-color: var(--backgroun-3);
  color: var(--font-color);
}
.contact-form  div textarea{
  min-height: 100px;
}
.faq-accordion{
  padding-top: 50px;
  padding-bottom: 50px;
}
.faq-accordion .accordion-item{
  border-radius:5px !important;
  box-shadow: none;
  margin-bottom: 0;
}
.faq-accordion .accordion-button{
  width: auto;
  padding-bottom: 0;
}
.faq-accordion .accordion-button::after{
  background-color: #3953a3;
  margin-right: 10px;
  font-size: 14px;
}
.faq-accordion .accordion-body ul li{
  color: #919191;
  font-weight: bold;
}
.faq-accordion .accordion-body ul li a{
  color: #3953a3;
}


.modal .modal-dialog{
  width: 100%;
}
.modal.report-modal .modal-dialog{
  width: auto;
}
#pageModal .modal-dialog{
  height: 100%;
}

.edit-video{
  width: 100%;
}
.edit-img{
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.delete-btn{
  width: 150px;
}

.edit-post-btn a{
  background-color: #3953a3;
  color: #fff;
  padding: 10px 7px;
  border-radius: 5px;
  font-size: 12px;
}
.edit-post-btn a:hover{
  background-color: #6fcbdc;
}
.posts-list .profile-post .post-text{
  flex: 0 0 calc(100% - 300px);
}
@media (max-width:767px) {
  .profile-post{
    flex-wrap: wrap;
  }
  .posts-list .profile-post .post-text{
    flex: 0 0 calc(100%);
  }
}
.posts-list .profile-post .post-img{
  flex-grow: unset;
  margin-right: 5px;
}
.update-post-btn{
  padding-left: 7px;
}
.update-post-btn button{
  background-color: #3953a3;
  color: #fff;
  padding: 5px;
  border-radius: 5px;

}
.update-post-btn button:hover{
  background-color: #6fcbdc;
}
.fav{
  color: red
}
.white{
  background: var(--background-body);
  color: #b0b0b0;
  border: none;
  border-radius: 0;
}
.white:hover{
  color: #b0b0b0;
  background: var(--background-5);
}
.arrow-unactive{
  color: gray;
}.arrow-active{
  color: var(--background-footer);
}

.terms-text h6,
.terms-text h5,
.terms-text h4,
.terms-text h3,
.terms-text h2,
.terms-text h1{
  color: var(--font-color) !important;
}
.terms-text p,
.terms-text span,
.terms-text div *{
  color: var(--font-color-2) !important;
}