@charset "UTF-8";

.p-a {
  position: absolute !important;
}

.m100-t {
  margin-top: 100px !important;
}

.m20-b {
  margin-bottom: 20px !important;
}

.m15-b {
  margin-bottom: 15px !important;
}

.m50-b {
  margin-bottom: 50px !important;
}

.m100-b {
  margin-bottom: 100px !important;
}

.m170-b {
  margin-bottom: 170px !important;
}

.m100-t {
  margin-top: 100px !important;
}

.min-width-160 {
  min-width: 140px !important;
}

.padding-10 {
  padding: 10px !important;
}

body {
  background-color: #000000;
  font-family: "Roboto", sans-serif;
}

button {
  outline: none;
  cursor: pointer;
}

h3 {
  color: #ffffff;
}

.title-white {
  padding: 50px 0;
  margin-bottom: 50px;
}

.title-white h2 {
  font-size: 36px;
  font-weight: 700;
  font-family: "Quicksand", sans-serif;
  color: #ffffff;
  text-align: center;
}

.title-white p {
  color: #c4c4c4;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}

.title-purple {
  padding: 70px 0 50px 0;
  margin-bottom: 50px;
}

.title-purple h2 {
  font-size: 36px;
  font-weight: 700;
  font-family: "Quicksand", sans-serif;
  color: #ffffff;
  text-align: center;
}

.title-purple p {
  color: #dfc683;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}

.common-title {
  background-color: #181818;
  padding: 30px 0;
}

.common-title .page-name {
  display: flex;
  align-items: center;
}

.common-title .page-name i,
.common-title .page-name p {
  color: #ffffff;
}

.common-title .page-name i {
  margin-right: 10px;
  font-size: 14px;
}

.common-title .page-name p {
  font-weight: 700;
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
}

.logo-section {
  padding-top: 100px;
  background-color: #000000;
}

.delete-msg {
  width: auto !important;
  height: auto !important;
}

.resp-icon {
  display: flex;
  justify-content: flex-end;
  color: #dfc683;
  font-size: 20px;
  transition: 0.3s ease !important;
}

.resp-icon:hover {
  color: #4e4e4e;
}

.ui.modal.resp-menu {
  background: none;
  box-shadow: none;
  height: 100%;
}

.ui.modal.resp-menu .menu {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  height: 100%;
  justify-content: center;
  flex-direction: column;
  display: flex !important;
}

.ui.modal.resp-menu .menu li {
  margin: 15px 0px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.ui.modal.resp-menu .menu li:last-child {
  margin-bottom: 0;
}

.ui.modal.resp-menu .menu a {
  color: #ffffff;
}

.ui.modal.resp-menu .menu .ui.accordion .title {
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.ui.modal.resp-menu .menu .ui.accordion .title svg {
  margin-left: 10px;
}

.ui.modal.resp-menu .menu .ui.accordion .content {
  flex-direction: column;
  display: flex;
}

.ui.modal.resp-menu .menu .ui.accordion .content a {
  font-weight: 400;
  margin: 10px 0;
  font-size: 16px;
}

.ui.modal.resp-menu .icon {
  color: #ffffff !important;
}

.ui.checkbox label:hover::before,
.ui.checkbox label:active::before,
.ui.checkbox label:focus::before {
  background: #3a3a3a !important;
}

.ui.checkbox label::before {
  background: #3a3a3a !important;
}

.ui.checkbox label::after {
  background: #3a3a3a !important;
  color: #dfc683 !important;
}

.page-number .pagination {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.page-number .pagination li {
  margin-right: 10px;
}

.page-number .pagination li.active .page-link {
  background-color: #dfc683;
  color: #ffffff;
}

.page-number .pagination li:last-child {
  margin-right: 0;
}

.page-number .pagination li .page-link {
  background-color: #181818;
  color: #c4c4c4;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-weight: 700;
  transition: 0.2s ease !important;
}

.page-number .pagination li .page-link:hover {
  color: #ffffff;
  background-color: #c4c4c4;
}

#loadMoreUsers {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 10px;
  display: flex;
}

.fb-btn {
  transition: 0.3s ease !important;
  background-color: #1877f2;
  margin-bottom: 20px;
  color: #ffffff !important;
  padding: 10px 35px;
  border-radius: 10px;
  width: 100%;
  display: flex;
  border: none;
  justify-content: center;
}

.fb-btn:hover {
  background-color: #000000;
}

.message-action-modal .content {
  background: #3a3a3a !important;
}

.message-action-modal .content .ui.form .field textarea {
  resize: none;
  background-color: #181818;
  outline: none;
  border: none;
  color: #ffffff;
}

.primary-btn {
  transition: 0.3s ease !important;
  background-color: #dfc683;
  margin-bottom: 20px;
  color: #ffffff !important;
  padding: 10px 35px;
  border-radius: 10px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  display: flex;
  border: none;
  justify-content: center;
}

.primary-btn:hover {
  background-color: #000000;
}

.terms-details p {
  color: #c4c4c4;
}

.terms-details h3 {
  color: #ffffff;
}

#confirm18Modal {
  background: #181818;
  border-radius: 5px;
  padding: 10px;
}

#confirm18Modal .header {
  background: none;
  color: #ffffff;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 16px;
}

#confirm18Modal .content {
  background: none;
  font-family: "Roboto", sans-serif;
  color: #ffffff;
}

#confirm18Modal .actions {
  background: none;
  border: none;
  display: flex;
  float: right;
}

#confirm18Modal .actions .deny.button {
  color: #ffffff !important;
  background: #4e4e4e !important;
  border: none;
  padding: 0 25px;
  align-items: center;
  border: 0;
  height: 40px;
  display: flex;
  margin-right: 10px;
}

#confirm18Modal .actions .deny.button:hover {
  border: none !important;
  background: #000000 !important;
}

#confirm18Modal .actions button.pink-btn {
  background: #dfc683 !important;
  color: #ffffff !important;
  border: none;
  padding: 0 25px;
  border: 0;
  height: 40px;
  border-radius: 5px;
}

#confirm18Modal .actions button.pink-btn:hover {
  background-color: #3a3a3a !important;
}

#notificationsList {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-height: 300px;
  overflow: auto;
}

#notificationsList .item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#credits-modal,
#messages-modal {
  background: #181818;
  border-radius: 5px;
  padding: 10px;
}

#credits-modal .content,
#messages-modal .content {
  background: none;
}

#credits-modal .content .title,
#messages-modal .content .title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

#credits-modal .content .title h4,
#messages-modal .content .title h4 {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 0;
}

#credits-modal .content .title i,
#messages-modal .content .title i {
  color: #ffffff;
  margin-left: 10px;
}

#credits-modal .content p,
#messages-modal .content p {
  font-family: "Roboto", sans-serif;
  color: #ffffff;
}

#credits-modal .content .btn,
#messages-modal .content .btn {
  transition: 0.3s ease !important;
  padding: 10px 25px;
  background-color: #dfc683;
  color: #ffffff;
  border-radius: 5px;
  display: inline-block;
}

#credits-modal .content .btn:hover,
#messages-modal .content .btn:hover {
  background-color: #000000;
}

#toogleAudio.active,
#toogleVideo.active {
  background-color: #dfc683;
  color: #ffffff;
}

#callModal {
  background: #181818;
}

#callModal .header,
#callModal .actions {
  color: #ffffff;
  background: none;
  border-top: none;
}

.user-search {
  background-color: #3a3a3a;
  border-radius: 10px;
  margin-bottom: 10px;
  display: flex;
}

.user-search .ui.input {
  border: none;
  width: 100%;
  color: #ffffff;
}

.user-search .ui.input input {
  background: none;
  outline: none;
  border: none;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
}

.user-search .ui.input input:active {
  border: none !important;
}

.user-search .search-user {
  background: none;
  border: none;
  padding: 0 15px;
}

.user-search .search-user i {
  color: #ffffff;
}

.people-on-my-date {
  margin-bottom: 50px;
}

.people-on-my-date .count-people {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.people-on-my-date .count-people h3 {
  color: #c4c4c4;
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
  margin-bottom: 20px;
}

.people-on-my-date .count-people .count-box {
  background-color: #181818;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 40px 100px;
}

.people-on-my-date .count-people .count-box .odometer {
  font-size: 36px;
  font-weight: 700;
  font-family: "Quicksand", sans-serif;
  margin-bottom: 20px;
  display: flex;
  color: #ffffff;
}

.people-on-my-date .count-people .count-box .odometer .odometer-inside {
  display: flex;
}

.people-on-my-date .count-people .count-box p {
  color: #c4c4c4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.people-on-my-date .count-people .count-box p img {
  margin-left: 5px;
}

.people-on-my-date .count-people p {
  color: #c4c4c4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.people-on-my-date .count-people p a {
  color: #dfc683;
  margin: 0 5px;
}

.people-on-my-date .count-people .hearts {
  left: 60px;
  top: -11px;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}

.serious-dating {
  background-color: #000000;
  background-image: url(/images/serious-bg.jpg?452a4908545ec5c766ce6c1189d509ea);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-bottom: 90px;
}

.serious-dating .title-purple p {
  color: #dfc683;
}

.serious-dating .phone-image {
  position: relative;
  margin-bottom: 70px;
}

.serious-dating .phone-image .text {
  right: 30px;
  left: 0;
  margin: 0 auto;
  bottom: 60px;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

.serious-dating p {
  color: #ffffff;
  text-align: center;
  padding-bottom: 50px;
}

.how-work {
  margin-bottom: 170px;
}

.how-work .step-box {
  transition: 0.2s ease !important;
  background-color: #181818;
  position: relative;
  padding: 30px;
  border-radius: 10px;
  cursor: default;
}

.how-work .step-box:hover {
  background-color: #4e4e4e;
}

.how-work .step-box:hover h4,
.how-work .step-box:hover p {
  color: #ffffff;
}

.how-work .step-box:hover i {
  top: -70px;
}

.how-work .step-box h4 {
  margin-top: 0;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  font-family: "Quicksand", sans-serif;
}

.how-work .step-box p {
  color: #c4c4c4;
  font-size: 16px;
  text-align: center;
}

.how-work .step-box i {
  transition: 1s ease !important;
  z-index: -9;
  right: 10px;
  top: -20px;
  font-size: 70px;
  color: #dfc683;
}

.browse {
  margin-bottom: 170px;
}

.browse .people {
  position: relative;
}

.browse .people .each-user {
  position: absolute;
  background-color: #181818;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.browse .people .each-user:before {
  content: "";
  position: absolute;
  bottom: -5px;
  right: 20px;
  background-color: #181818;
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  z-index: -1;
}

.browse .people .each-user .user-avatar {
  width: 50px;
  height: 50px;
  margin-right: 20px;
}

.browse .people .each-user .user-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 100%;
  overflow: hidden;
}

.browse .people .each-user .user-details h5 {
  margin-bottom: 5px;
  font-family: "Quicksand", sans-serif;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}

.browse .people .each-user .user-details p {
  font-family: "Roboto", sans-serif;
  color: #c4c4c4;
  font-size: 16px;
  font-weight: 400;
}

.browse .people .us1 {
  top: 0;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.browse .people .us2 {
  bottom: 50px;
  left: 100px;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.browse .people .us3 {
  top: 120px;
  left: 400px;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.browse .people .us4 {
  left: 400px;
  bottom: -110px;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.browse .people .us5 {
  right: 170px;
  bottom: 50px;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.browse .people .us6 {
  top: 50px;
  right: -60px;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.match {
  margin-bottom: 100px;
}

.match .match-content p {
  text-align: center;
  color: #c4c4c4;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 20px;
}

.match .match-content a {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  background-color: #dfc683;
  color: #ffffff;
  padding: 10px 35px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.match .match-content a:hover {
  transition: 0.2s ease !important;
  background-color: #3a3a3a;
}

.chat-with {
  background-color: #000000;
  background-image: url(/images/chat-bg-1.png?9d1677188f18a7b1dbc674ec433231d8);
  background-repeat: no-repeat;
  background-position: right;
  margin-bottom: 90px;
  background-size: 100%;
}

.chat-with img {
  margin-bottom: 80px;
}

.chat-with .chat-text {
  text-align: center;
  color: #c4c4c4;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 20px;
  margin-bottom: 50px;
}

.testimonials {
  margin-bottom: 40px;
  background-image: url(/images/testimonial-line.png?29210ef28b2b7ccfdad3c58a4b2819ff);
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: left -265px bottom 100px;
}

.testimonials:hover .comm1 {
  top: 50px;
  right: 50px;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}

.testimonials:hover .comm2 {
  top: 120px;
  left: 30px;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

.testimonials:hover .comm3 {
  bottom: 190px;
  right: 100px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

.testimonials .testimonial-phone {
  position: relative;
}

.testimonials .comm1 {
  top: 50px;
  right: 50px;
}

.testimonials .comm2 {
  top: 120px;
  left: 30px;
}

.testimonials .comm3 {
  bottom: 190px;
  right: 100px;
}

.testimonials .testimonial-box {
  background-color: #181818;
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 20px;
}

.testimonials .testimonial-box p {
  color: #ffffff;
  font-size: 16px;
  font-style: italic;
  margin-bottom: 30px;
}

.testimonials .testimonial-box i {
  float: right;
  margin-top: -40px;
  font-size: 40px;
  margin-right: 20px;
  color: rgba(196, 196, 196, 0.3);
}

.testimonials .testimonial-box .user-name {
  display: flex;
  align-items: center;
}

.testimonials .testimonial-box .user-name .avatar-user {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}

.testimonials .testimonial-box .user-name .avatar-user img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 100%;
}

.testimonials .testimonial-box .user-name p {
  font-family: "Quicksand", sans-serif;
  color: #ffffff;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 0;
}

.members {
  padding-top: 100px;
  margin-bottom: 150px;
}

.members h3 {
  color: #ffffff;
}

.members .search-box {
  background-color: #181818;
  border-radius: 10px;
  padding: 20px;
}

.members .search-box h3 {
  color: #ffffff;
  font-size: 16px;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  margin-top: 0;
}

.members .search-box .ui.input {
  margin-bottom: 15px;
  width: 100%;
}

.members .search-box .ui.input input {
  border: none;
  border-radius: 5px;
  color: #ffffff;
  background: #3a3a3a;
}

.members .search-box .ui.dropdown {
  color: #ffffff;
  background: #3a3a3a;
  width: 100%;
  min-width: 100%;
  border: none;
  border-radius: 5px !important;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 15px;
}

.members .search-box .ui.dropdown .text {
  width: 100%;
  height: 100%;
  color: #c4c4c4 !important;
}

.members .search-box .ui.dropdown i {
  margin-right: 0px !important;
}

.members .search-box .ui.dropdown .menu {
  margin-top: 5px;
  background: #ffffff;
  color: #ffffff;
  background: #3a3a3a;
  border: none;
  border-radius: 10px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

.members .search-box .ui.dropdown .menu .text {
  width: 100%;
  height: 100%;
  color: #c4c4c4 !important;
}

.members .search-box .ui.dropdown .menu .item {
  border: none;
  padding: 10px !important;
  color: #ffffff;
  background: #3a3a3a;
}

.members .search-box .ui.checkbox {
  margin-bottom: 15px;
}

.members .search-box .ui.checkbox label {
  color: #c4c4c4;
}

.members .search-box .ui.checkbox label:before {
  color: #dfc683;
  border: none;
}

.members .search-box .ui.checkbox label:after {
  color: #dfc683;
}

.members .search-box .search-btn button {
  border: none;
  background-color: #dfc683;
  color: #ffffff;
  padding: 10px 35px;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
}

.members .search-box .search-btn button:hover {
  transition: 0.2s ease !important;
  background-color: #3a3a3a;
}

.members .search-box .search-btn button:focus {
  outline: none;
}

.members .search-box .reset-form-btn {
  transition: 0.3s ease !important;
  margin-top: 15px;
  display: flex;
  color: #ffffff;
}

.members .search-box .reset-form-btn:hover {
  color: #dfc683;
}

.members .each-member {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}

.members .each-member:hover {
  cursor: default;
}

.members .each-member:hover .member-info {
  background-color: #dfc683;
}

.members .each-member:hover .member-info .name-member p,
.members .each-member:hover .member-info .name-member span {
  color: #ffffff;
}

.members .each-member .member-avatar {
  width: 150px;
  height: 100%;
  max-height: 100px;
  margin-right: 15px;
  cursor: pointer;
}

.members .each-member .member-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}

.members .each-member .member-info {
  transition: 0.4s ease !important;
  height: 100%;
  width: 100%;
  background-color: #181818;
  padding: 25px 40px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.members .each-member .member-info .name-member p {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 0;
}

.members .each-member .member-info .name-member p .user-active {
  font-size: 14px;
  margin-left: 10px;
  color: #8BC34A;
}

.members .each-member .member-info .name-member span {
  color: #c4c4c4;
  font-size: 14px;
}

.members .each-member .member-info .premium-icon {
  background: #ffffff;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pricing-plans {
  padding: 100px 0;
}

.pricing-plans .pricing-category h2 {
  color: #ffffff;
  text-align: center;
  margin-bottom: 30px;
}

.pricing-plans .each-plan {
  background-color: #181818;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  border: 2px solid;
  cursor: default;
  transition: 0.3s ease !important;
}

.pricing-plans .each-plan:hover {
  border-color: #dfc683 !important;
  border: 2px solid;
}

.pricing-plans .each-plan p {
  color: #ffffff;
}

.pricing-plans .each-plan .badge-circle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pricing-plans .each-plan h3 {
  font-size: 16px;
  font-family: "Quicksand", sans-serif;
  color: #ffffff;
  margin-bottom: 10px;
  font-weight: 700;
}

.pricing-plans .each-plan .plan-type {
  color: #ffffff;
  margin-bottom: 20px;
}

.pricing-plans .each-plan span {
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  color: #dfc683;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
}

.pricing-plans .each-plan .elements {
  margin-bottom: 20px;
}

.pricing-plans .each-plan .elements p {
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  color: #c4c4c4;
  font-weight: 400;
  margin-bottom: 5px;
  text-align: center;
}

.pricing-plans .each-plan form {
  width: 100%;
}

.pricing-plans .each-plan form button {
  background-color: #3a3a3a;
  color: #ffffff;
  padding: 15px;
  border-radius: 10px;
  margin: 0 auto;
  border: none;
  cursor: pointer;
  border: 2px solid;
  border-color: #3a3a3a;
  width: 100%;
}

.pricing-plans .each-plan form button:hover {
  transition: 0.2s ease !important;
  background-color: #dfc683;
  border: 2px solid;
  border-color: #dfc683;
}

.pricing-title {
  display: flex;
  justify-content: space-between;
}

.back-btn {
  text-align: right;
}

.back-btn a {
  transition: 0.3s ease !important;
  color: #ffffff;
}

.back-btn a:hover {
  color: #dfc683;
}

.profile-info {
  padding-top: 70px;
  margin-bottom: 170px;
}

.profile-info .profile-box {
  border-radius: 10px;
  background-color: #181818;
  padding: 20px 10px;
  margin-bottom: 30px;
}

.profile-info .profile-box .profile-avatar {
  width: 240px;
  max-height: 240px;
  height: 240px;
  margin: 0 auto;
}

.profile-info .profile-box .profile-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
  overflow: hidden;
}

.profile-info .profile-box .action {
  width: 100%;
}

.profile-info .profile-box .action .primary-btn {
  padding: 10px 60px;
  float: right;
}

.profile-info .profile-box .profile-name {
  margin-bottom: 30px;
}

.profile-info .profile-box .profile-name h4 {
  margin-bottom: 0;
  font-size: 16px;
  color: #ffffff;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
}

.profile-info .profile-box .profile-name span {
  font-size: 13px;
  color: #c4c4c4;
  font-weight: 400;
}

.profile-info .profile-box .each-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  background: #3a3a3a;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: default;
}

.profile-info .profile-box .each-info p,
.profile-info .profile-box .each-info i {
  margin: 0;
  color: #c4c4c4;
}

.profile-info .profile-box .each-info input {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #ffffff;
  background: none;
  border: none;
  font-size: 14px;
}

.profile-info .profile-box .actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 36px;
}

.profile-info .profile-box .actions a {
  background-color: #3a3a3a;
  border-radius: 100%;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.profile-info .profile-box .actions a.active {
  background-color: #dfc683;
}

.profile-info .profile-box .actions a.active i {
  color: #ffffff;
}

.profile-info .profile-box .actions a:hover i {
  color: #dfc683;
}

.profile-info .profile-box .actions a i {
  color: #c4c4c4;
  font-size: 15px;
  transition: 0.2s ease !important;
}

.profile-info .profile-box .actions .premium-icon {
  background: #ffffff;
  border-radius: 100%;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-info .profile-box .buttons {
  display: flex;
  flex-direction: column;
}

.profile-info .profile-box .buttons .video-btn {
  border-radius: 5px;
  background-color: #dfc683;
  color: #ffffff;
  font-weight: 700;
  padding: 10px;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  transition: 0.3s ease !important;
}

.profile-info .profile-box .buttons .video-btn:hover {
  background-color: #4e4e4e;
}

.profile-info .profile-box .buttons .messages-btn {
  border-radius: 5px;
  background-color: #4e4e4e;
  color: #ffffff;
  font-weight: 700;
  padding: 10px;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  cursor: pointer;
  transition: 0.3s ease !important;
}

.profile-info .profile-box .buttons .messages-btn:hover {
  background-color: #dfc683;
}

.profile-info .profile-box .about-me {
  margin-top: 20px;
  margin-bottom: 30px;
}

.profile-info .profile-box .about-me h4 {
  color: #ffffff;
}

.profile-info .profile-box .about-me p {
  color: #c4c4c4;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
}

.profile-info .profile-box .about-me p a {
  cursor: pointer;
  color: #dfc683;
}

.profile-info .gift-container {
  margin-bottom: 30px;
}

.profile-info .gift-container.real-gifts {
  background-image: url(/images/footer-bg.png?fcb66080f10f1a062c16fb6373cc9e91);
  background-position: right -30px center;
  margin-bottom: 30px;
  border: 3px solid #4e4e4e;
  border-radius: 10px;
  border-color: #dfc683;
  padding: 40px;
}

.profile-info .gift-container h3 {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  color: #ffffff;
}

.profile-info .gift-container .gifts-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.profile-info .gift-container .gifts-list .each-gift {
  margin-right: 10px;
  margin-bottom: 10px;
}

.profile-info .gift-container .gifts-list .each-gift .checkmark {
  background-color: #8BC34A;
  border-radius: 50px;
  display: inline;
  padding: 7px;
  margin-left: 4px;
  color: #ffffff !important;
}

.profile-info .gift-container .gifts-list .each-gift a {
  display: flex;
  height: 100%;
}

.profile-info .gift-container .gifts-list .each-gift a img {
  background-color: #181818;
  border-radius: 5px;
}

.profile-info .gift-container .gifts-list .each-gift button {
  border: none;
  border-radius: 5px;
  background-color: #181818;
}

.profile-info .gift-container .gifts-list .each-gift button:focus {
  outline: none;
}

.profile-info .gift-container .gifts-list.real {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.profile-info .gift-container .gifts-list.real .each-gift {
  position: relative;
}

.profile-info .gift-container .gifts-list.real .each-gift button,
.profile-info .gift-container .gifts-list.real .each-gift a {
  border-radius: 4px;
  width: 150px;
  height: 150px;
  margin-right: 20px;
  margin-bottom: 20px;
  display: flex;
  cursor: pointer;
  padding: 0 !important;
}

.profile-info .gift-container .gifts-list.real .each-gift button img,
.profile-info .gift-container .gifts-list.real .each-gift a img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0px;
  border-radius: 5px;
}

.profile-info .gift-container .gifts-list.real .each-gift .checkmark.icon {
  background-color: #8BC34A;
  height: 20px;
  min-width: 20px;
  border-radius: 50px;
  width: 10px;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 20px;
  right: 10px;
}

.profile-info .photo-gallery {
  margin-bottom: 30px;
}

.profile-info .photo-gallery h3 {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  color: #ffffff;
}

.profile-info .photo-gallery .photo-lock {
  height: 180px;
  display: flex;
  position: relative;
}

.profile-info .photo-gallery .photo-lock .image-lock {
  display: block;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  background-color: #4e4e4e;
}

.profile-info .photo-gallery .photo-lock .image-lock.unlocked img {
  -webkit-filter: blur(0);
}

.profile-info .photo-gallery .photo-lock .image-lock img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: blur(3px);
}

.profile-info .photo-gallery .photo-lock .image-lock .unlocked {
  filter: none;
}

.profile-info .photo-gallery .photo-lock .locked-photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  color: #ffffff;
  text-align: center;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.profile-info .photo-gallery .photo-lock .locked-photo i {
  font-size: 16px;
  margin-bottom: 10px;
}

.profile-info .photo-gallery .photo-lock .locked-photo a {
  color: #ffffff;
}

.profile-info .gift-received h3 {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  color: #ffffff;
}

.profile-info .gift-received .received-list {
  background-color: #181818;
  padding: 20px;
  border-radius: 5px;
}

.profile-info .gift-received .received-list .each-gift-received {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border-radius: 5px;
  padding: 10px;
  border: 2px solid #4e4e4e;
}

.profile-info .gift-received .received-list .each-gift-received p {
  color: #c4c4c4;
  margin-bottom: 0;
  font-weight: 400;
}

.profile-info .gift-received .received-list .each-gift-received .gift {
  width: 30px;
  height: 30px;
}

.profile-info .gift-received .received-list .each-gift-received .gift img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.edit-profile {
  padding-top: 70px;
  margin-bottom: 170px;
}

.edit-profile .profile-box {
  border-radius: 10px;
  background-color: #181818;
  padding: 20px 10px;
  margin-bottom: 30px;
}

.edit-profile .profile-box .profile-avatar {
  width: 240px;
  height: 100%;
  max-height: 240px;
  margin: 0 auto;
}

.edit-profile .profile-box .profile-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
  overflow: hidden;
}

.edit-profile .profile-box .top-info {
  display: flex;
  justify-content: space-between;
}

.edit-profile .profile-box .top-info .profile-name {
  margin-bottom: 30px;
}

.edit-profile .profile-box .top-info .profile-name h4 {
  font-size: 16px;
  color: #ffffff;
  font-family: "Quicksand", sans-serif;
  margin-bottom: 5px;
  font-weight: 700;
}

.edit-profile .profile-box .top-info .profile-name span {
  font-size: 13px;
  color: #c4c4c4;
  font-weight: 400;
}

.edit-profile .profile-box .top-info .premium-icon {
  background-color: #4e4e4e;
  border-radius: 100%;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit-profile .profile-box .about-me {
  margin-top: 20px;
  margin-bottom: 30px;
}

.edit-profile .profile-box .about-me h4 {
  color: #ffffff;
}

.edit-profile .profile-box .about-me textarea {
  background: #3a3a3a;
  resize: none;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 10px;
  padding: 10px;
  color: #ffffff;
}

.edit-profile .profile-box .action button {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 0 40px;
  float: right;
}

.edit-profile .profile-box .ui.dropdown {
  color: #ffffff;
  background: #3a3a3a;
  width: 100%;
  border: none;
  border-radius: 5px !important;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 15px;
}

.edit-profile .profile-box .ui.dropdown .text {
  width: 100%;
  height: 100%;
  color: #c4c4c4 !important;
}

.edit-profile .profile-box .ui.dropdown i {
  margin-right: 0px !important;
}

.edit-profile .profile-box .ui.dropdown .menu {
  margin-top: 5px;
  color: #ffffff;
  background: #3a3a3a;
  border: none;
  border-radius: 5px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

.edit-profile .profile-box .ui.dropdown .menu .text {
  width: 100%;
  height: 100%;
  color: #c4c4c4 !important;
}

.edit-profile .profile-box .ui.dropdown .menu .item {
  border: none;
  padding: 10px !important;
  color: #ffffff;
}

.edit-profile .profile-box .ui.input {
  margin-bottom: 15px;
  width: 100%;
  height: 38px;
}

.edit-profile .profile-box .ui.input input {
  border: none;
  border-radius: 5px;
  color: #ffffff;
  background: #3a3a3a;
}

.edit-profile .profile-box .each-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  background: #3a3a3a;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: default;
}

.edit-profile .profile-box .each-info p,
.edit-profile .profile-box .each-info i {
  margin: 0;
  color: #c4c4c4;
}

.edit-profile .profile-box .each-info input {
  background: none;
  border: none;
}

.edit-profile .profile-box button {
  width: 100%;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 5px;
  background-color: #dfc683;
  color: #ffffff;
  font-weight: 700;
  padding: 10px;
  transition: 0.3s ease !important;
  cursor: pointer;
}

.edit-profile .profile-box button:hover {
  background-color: #4e4e4e;
}

.edit-profile .profile-box button:focus {
  outline: none;
}

.edit-profile .upload-images {
  margin-bottom: 40px;
}

.edit-profile .upload-images .images-gallery {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.edit-profile .upload-images .images-gallery .each-image {
  width: 180px;
  height: 180px;
  margin-right: 20px;
  position: relative;
  margin-bottom: 10px;
}

.edit-profile .upload-images .images-gallery .each-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}

.edit-profile .upload-images .images-gallery .each-image a i {
  position: absolute;
  color: #dfc683;
  font-size: 20px;
  right: 5px;
  top: 10px;
}

.edit-profile .upload-images .images-gallery .each-image a i:hover {
  color: #4e4e4e;
}

.edit-profile .upload-images .images-gallery .load-image {
  width: 180px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dfc683;
  border-radius: 10px;
  margin-bottom: 10px;
}

.edit-profile .upload-images .images-gallery .load-image i {
  font-size: 20px;
  color: #ffffff;
}

.edit-profile .upload-images .images-gallery input,
.edit-profile .upload-images .images-gallery button {
  display: none;
}

.edit-profile .upload-images .images-gallery label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 40px;
  color: #ffffff;
  transition: 0.3s ease !important;
  margin-left: -100px;
  cursor: pointer;
}

.edit-profile .upload-images .images-gallery label:hover {
  font-size: 45px;
  margin-left: -102px;
}

.edit-profile .upload-images .images-gallery:hover {
  background-position: right center;
}

.error {
  padding: 50px 0 95px 0;
  background-image: url(/images/right-girl.png?811da58479a1b07034b07f234700caf5);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 50%;
}

.error .error-box {
  background-color: #181818;
  border-radius: 10px;
  padding: 30px;
}

.error .error-box h2 {
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  font-weight: 700;
  font-family: "Quicksand", sans-serif;
}

.error .error-box h1 {
  font-size: 140px;
  text-align: center;
  color: #ffffff;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
}

.error .error-box p {
  color: #c4c4c4;
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
}

.error .error-box a {
  background-color: #dfc683;
  color: #ffffff;
  padding: 10px 35px;
  border-radius: 10px;
  transition: 0.2s ease !important;
  width: 100%;
  display: flex;
  justify-content: center;
}

.error .error-box a:hover {
  background-color: #3a3a3a;
}

.message-chat {
  margin-top: 100px;
}

.message-chat .messages-list-user {
  background-color: #181818;
  border-radius: 10px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  overflow-y: scroll;
  max-height: 600px;
}

.message-chat .messages-list-user .each-message {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
}

.message-chat .messages-list-user .each-message .avatar-chat {
  width: 45px;
  height: 45px;
  margin-right: 10px;
}

.message-chat .messages-list-user .each-message .avatar-chat img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}

.message-chat .messages-list-user .each-message .user-chat-details {
  position: relative;
}

.message-chat .messages-list-user .each-message .user-chat-details p {
  color: #c4c4c4;
  font-weight: 400;
}

.message-chat .messages-list-user .each-message .user-chat-details span {
  color: #ffffff;
  font-weight: 700;
  font-family: "Quicksand", sans-serif;
}

.message-chat .messages-list-user .each-message .user-chat-details .unread-messages {
  position: absolute;
  right: -50px;
  top: 10px;
}

.message-chat .messages-list-user .each-message .user-chat-details .unread-messages span {
  background-color: #dfc683;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: #ffffff;
}

.message-chat .messages-list-user .each-message.active {
  background-color: #c4c4c4;
}

.message-chat .messages-list-user h4 {
  color: #ffffff;
  padding: 10px 20px;
}

.chat-box {
  border-radius: 5px;
  height: 600px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.chat-box .ui.error.message {
  display: none;
}

.chat-box .chat-content {
  height: 450px;
  overflow-y: scroll;
  padding: 30px;
  background-color: #181818;
  border-radius: 10px;
  margin: 10px 0;
}

.chat-box .chat-content #loadMoreMessages {
  background: none;
  text-align: center;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding-bottom: 20px;
}

.chat-box .chat-content #loadMoreMessages .load-more-spinner {
  margin-left: 4px;
}

.chat-box .chat-content #loadMoreMessages:focus {
  outline: none;
}

.chat-box .chat-header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #181818;
  border-radius: 10px;
  align-items: center;
}

.chat-box .chat-header a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-box .chat-header a .premium-icon {
  background: #ffffff;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-box .chat-header .chat-user {
  display: flex;
  margin-right: 40px;
}

.chat-box .chat-header .chat-user .user-av {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.chat-box .chat-header .chat-user .user-av img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}

.chat-box .chat-header .chat-user .user-name {
  display: flex;
  align-items: center;
}

.chat-box .chat-header .chat-user .user-name p {
  color: #ffffff;
  font-weight: 400;
}

.chat-box .chat-header .chat-user .user-name span {
  color: #ffffff;
  font-weight: 700;
  font-family: "Quicksand", sans-serif;
}

.chat-box .chat-header .video-call a {
  color: #ffffff;
  background-color: #dfc683;
  border-radius: 5px;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.2s ease !important;
}

.chat-box .chat-header .video-call a:hover {
  background-color: #4e4e4e;
}

.chat-box .chat-conversation {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  width: 60%;
}

.chat-box .chat-conversation .message {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  padding: 25px;
  color: #ffffff;
  width: 70%;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
}

.chat-box .chat-conversation .message p {
  flex: 1;
  margin: 0;
}

.chat-box .chat-conversation .message .delete-msg {
  display: flex;
  justify-content: flex-end;
}

.chat-box .chat-conversation .message .delete-msg i {
  color: #ffffff;
  transition: 0.3s ease !important;
}

.chat-box .chat-conversation .message .delete-msg i:hover {
  color: #dfc683;
}

.chat-box .chat-conversation .message.me {
  background-color: #3a3a3a;
  border-radius: 25px;
  border-bottom-right-radius: 0px;
}

.chat-box .chat-conversation .message.you {
  background-color: #98834c;
  border-radius: 25px;
  border-bottom-left-radius: 0px;
}

.chat-box .chat-conversation.me {
  border-radius: 5px;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  position: relative;
}

.chat-box .chat-conversation.me .seen:after {
  content: "\F00C";
  font-family: "Font Awesome 5 Pro", "sans-serif";
  position: absolute;
  top: 5px;
  right: 24px;
}

.chat-box .chat-conversation.you {
  border-radius: 5px;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.send-message-form {
  height: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 10px;
  background-color: #181818;
}

.send-message-form:last-child {
  margin-bottom: 0;
}

.send-message-form .send-message {
  width: 100%;
  display: flex;
  align-items: center;
}

.send-message-form .send-msg-chat {
  transition: 0.3s ease !important;
  background-color: #dfc683;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.send-message-form .send-msg-chat:focus {
  outline: none;
}

.send-message-form .send-msg-chat:hover {
  background-color: #4e4e4e;
}

.send-message-form .send-photo {
  display: block;
  margin-right: 15px;
  cursor: pointer;
}

.send-message-form .send-photo input,
.send-message-form .send-photo button {
  display: none;
}

.send-message-form .send-photo label {
  height: 100%;
  color: rgba(196, 196, 196, 0.5);
  align-items: center;
  display: flex;
  font-size: 20px;
  cursor: pointer;
}

.send-message-form .ui.input {
  color: #dfc683;
  margin-left: -13px;
  width: 100%;
  background-color: #181818 !important;
}

.send-message-form .ui.input input {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #c4c4c4 !important;
  border: none;
  background-color: #181818 !important;
  padding-left: 40px;
}

.send-message-form .ui.input input::-moz-placeholder {
  color: rgba(196, 196, 196, 0.5) !important;
}

.send-message-form .ui.input input:-ms-input-placeholder {
  color: rgba(196, 196, 196, 0.5) !important;
}

.send-message-form .ui.input input::placeholder {
  color: rgba(196, 196, 196, 0.5) !important;
}

.send-message-form .emoji-wysiwyg-editor {
  padding: 0;
  margin: 0;
  margin-left: 13px;
  width: 100%;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  border: none;
  outline: none;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  max-height: 36px;
}

.send-message-form .emoji-wysiwyg-editor:active {
  min-height: 100%;
  height: 100% !important;
}

.send-message-form .emoji-picker-icon {
  align-items: center;
  display: flex;
  font-size: 20px;
  color: #4e4e4e;
  top: 0;
  bottom: 0;
}

.message-chat .ui.segment {
  background: #000000;
}

.message-chat .ui.loading.segment:before {
  background-color: rgba(78, 78, 78, 0.5);
}

.messages-container {
  margin-top: 100px;
}

.messages-container .chat-box {
  border-radius: 5px;
  height: 600px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.messages-container .chat-box .chat-content {
  height: 450px;
  overflow-y: scroll;
  padding: 10px 30px;
  background-color: #181818;
}

.messages-container .chat-box .chat-content #loadMoreMessages {
  background: none;
  text-align: center;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding-bottom: 20px;
}

.messages-container .chat-box .chat-content #loadMoreMessages .load-more-spinner {
  margin-left: 4px;
}

.messages-container .chat-box .chat-content #loadMoreMessages:focus {
  outline: none;
}

.messages-container .chat-box .chat-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #181818;
  border-radius: 10px;
  align-items: center;
}

.messages-container .chat-box .chat-header .chat-user {
  display: flex;
}

.messages-container .chat-box .chat-header .chat-user .user-av {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.messages-container .chat-box .chat-header .chat-user .user-av img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}

.messages-container .chat-box .chat-header .chat-user .user-name {
  display: flex;
  align-items: center;
}

.messages-container .chat-box .chat-header .chat-user .user-name span {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  font-family: "Quicksand", sans-serif;
}

.messages-container .chat-box .chat-header .chat-user .user-name p {
  font-size: 14px;
  font-weight: 400;
  color: #c4c4c4;
}

.messages-container .chat-box .chat-header .video-call a {
  color: #ffffff;
  background-color: #dfc683;
  border-radius: 5px;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.2s ease !important;
}

.messages-container .chat-box .chat-header .video-call a:hover {
  background-color: #4e4e4e;
}

.messages-container .chat-box .conversation-messages p {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  width: 60%;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  padding: 25px;
  color: #ffffff;
  width: 70%;
  margin-right: 10px;
  border-radius: 5px;
}

.messages-container .chat-box .conversation-messages p.mine {
  background-color: #3a3a3a;
  border-radius: 25px;
  border-bottom-right-radius: 0px;
  margin-left: auto;
}

.messages-container .chat-box .conversation-messages p.theirs {
  background-color: #c4c4c4;
  justify-content: flex-start;
  border-radius: 25px;
  border-bottom-left-radius: 0px;
}

.messages-container .chat-box .chat-conversation.me {
  border-radius: 5px;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.messages-container .chat-box .chat-conversation.you {
  border-radius: 5px;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.messages-container .chat-section {
  overflow: auto;
  max-height: 470px;
  background-color: #181818;
  padding: 20px;
  border-radius: 10px;
  height: 100%;
}

.messages-container .chat-section .mine,
.messages-container .chat-section .theirs {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  padding: 25px;
  color: #ffffff;
  width: 90%;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

.messages-container .chat-section .mine {
  background-color: #3a3a3a;
  margin-left: 30px;
  border-radius: 25px;
  border-bottom-right-radius: 0px;
}

.messages-container .chat-section .theirs {
  background-color: #c4c4c4;
  border-radius: 25px;
  border-bottom-left-radius: 0px;
}

.messages-container .send-message-form,
.messages-container .send-message-form-chat {
  height: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 10px;
  background-color: #181818;
}

.messages-container .send-message-form:last-child,
.messages-container .send-message-form-chat:last-child {
  margin-bottom: 0;
}

.messages-container .send-message-form .send-message,
.messages-container .send-message-form-chat .send-message {
  width: 100%;
  min-height: 36px;
  height: 36px;
  max-height: 36px;
}

.messages-container .send-message-form .send-msg-chat,
.messages-container .send-message-form-chat .send-msg-chat {
  transition: 0.3s ease !important;
  background-color: #4e4e4e;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.messages-container .send-message-form .send-msg-chat:focus,
.messages-container .send-message-form-chat .send-msg-chat:focus {
  outline: none;
}

.messages-container .send-message-form .send-msg-chat:hover,
.messages-container .send-message-form-chat .send-msg-chat:hover {
  background-color: #dfc683;
}

.messages-container .send-message-form .send-photo,
.messages-container .send-message-form-chat .send-photo {
  display: block;
  margin-right: 15px;
  cursor: pointer;
}

.messages-container .send-message-form .send-photo input,
.messages-container .send-message-form .send-photo button,
.messages-container .send-message-form-chat .send-photo input,
.messages-container .send-message-form-chat .send-photo button {
  display: none;
}

.messages-container .send-message-form .send-photo label,
.messages-container .send-message-form-chat .send-photo label {
  height: 100%;
  color: rgba(255, 255, 255, 0.5);
  align-items: center;
  display: flex;
  font-size: 20px;
  cursor: pointer;
}

.messages-container .send-message-form .ui.input,
.messages-container .send-message-form-chat .ui.input {
  color: #dfc683;
  margin-left: -13px;
  width: 100%;
  background-color: #181818 !important;
}

.messages-container .send-message-form .ui.input input,
.messages-container .send-message-form-chat .ui.input input {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #c4c4c4 !important;
  border: none;
  background-color: #181818 !important;
  padding-left: 40px;
}

.messages-container .send-message-form .ui.input input::-moz-placeholder, .messages-container .send-message-form-chat .ui.input input::-moz-placeholder {
  color: rgba(196, 196, 196, 0.5) !important;
}

.messages-container .send-message-form .ui.input input:-ms-input-placeholder, .messages-container .send-message-form-chat .ui.input input:-ms-input-placeholder {
  color: rgba(196, 196, 196, 0.5) !important;
}

.messages-container .send-message-form .ui.input input::placeholder,
.messages-container .send-message-form-chat .ui.input input::placeholder {
  color: rgba(196, 196, 196, 0.5) !important;
}

.messages-container .send-message-form .emoji-wysiwyg-editor,
.messages-container .send-message-form-chat .emoji-wysiwyg-editor {
  padding: 0;
  margin: 0;
  margin-left: 13px;
  width: 100%;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  border: none;
  outline: none;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.messages-container .send-message-form .emoji-wysiwyg-editor:active,
.messages-container .send-message-form-chat .emoji-wysiwyg-editor:active {
  min-height: 100%;
  height: 100% !important;
}

.messages-container .send-message-form .emoji-picker-icon,
.messages-container .send-message-form-chat .emoji-picker-icon {
  align-items: center;
  display: flex;
  font-size: 20px;
  color: #4e4e4e;
  top: 0;
  bottom: 0;
}

.messages-container .video-box {
  background-color: #181818;
  width: 100%;
  height: 400px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}

.messages-container .video-box img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.messages-container .video-box .video-stop {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100%;
}

.messages-container button {
  background-color: #181818;
  color: #c4c4c4;
  border: none;
  padding: 10px 20px;
  margin-right: 5px;
  border-radius: 10px;
  transition: 0.3s ease !important;
  cursor: pointer;
  font-weight: 700;
}

.messages-container button i {
  margin-right: 10px;
}

.messages-container button:hover {
  color: #ffffff;
  background-color: #dfc683;
}

.messages-container #videoBox #videos #subscriber {
  min-height: 400px;
}

.messages-container #videoBox #videos #endCall {
  color: #ffffff;
  background-color: red;
  box-shadow: none;
  bottom: 30px;
  position: absolute;
}

.messages-container #videoBox #videos #host {
  position: absolute;
  bottom: 10px;
  right: 10px;
  float: right;
  border-radius: 5px;
}

.messages-container #videoBox #videos .calling-actions {
  z-index: 9;
  position: absolute;
  top: 40px;
  bottom: 0;
  right: 0;
  left: 0;
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.messages-container #videoBox #videos .calling-actions #noVideo {
  display: none;
}

.messages-container #videoBox #videos #loadingVideo {
  color: #c4c4c4;
}

.success {
  padding: 50px 0 95px 0;
  background-image: url(/images/right-girl.png?811da58479a1b07034b07f234700caf5);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 50%;
}

.success .success-box {
  background-color: #181818;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 50px;
}

.success .success-box h2 {
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  font-weight: 700;
  font-family: "Quicksand", sans-serif;
}

.success .success-box p {
  color: #c4c4c4;
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
}

.success .success-box a {
  background-color: #dfc683;
  color: #ffffff;
  padding: 10px 35px;
  border-radius: 10px;
  transition: 0.2s ease !important;
  width: 100%;
  display: flex;
  justify-content: center;
}

.success .success-box a:hover {
  background-color: #3a3a3a;
}

.success .home-btn {
  text-align: center;
}

.success .home-btn a {
  color: #ffffff;
  transition: 0.2s ease !important;
}

.success .home-btn a:hover {
  color: #dfc683;
}

.register {
  background-color: #000000;
  padding: 50px 0 95px 0;
  background-image: url(/images/right-girl.png?811da58479a1b07034b07f234700caf5);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 50%;
}

.register .register-box {
  background-color: #181818;
  border-radius: 10px;
  padding-right: 30px;
  margin-bottom: 50px;
  display: flex;
  align-items: center;
}

.register .register-box .each-row {
  display: flex;
  margin-bottom: 15px;
}

.register .register-box .each-row .ui:nth-child(2) {
  margin-left: 15px;
}

.register .register-box .auth-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-right: 30px;
  border-radius: 10px 0 0 10px;
  position: relative;
}

.register .register-box .auth-image .text {
  position: absolute;
  color: #ffffff;
  text-align: center;
  bottom: 0;
  top: 0;
  display: flex;
  padding: 30px;
  font-size: 14px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  flex-direction: column;
  justify-content: center;
}

.register .register-box .auth-image .text p {
  line-height: 24px;
}

.register .register-box .auth-image .text p:first-child {
  margin-bottom: 0;
}

.register .register-box .auth-image .text a {
  transition: 0.3s ease !important;
  color: #dfc683;
  font-weight: 700;
}

.register .register-box .auth-image .text a:hover {
  color: #4e4e4e;
}

.register .register-box .auth-image img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.register .register-box .w100 {
  width: 100%;
}

.register .register-box h2 {
  text-align: center;
  font-size: 16px;
  text-align: center;
  color: #ffffff;
  font-weight: 700;
  font-family: "Quicksand", sans-serif;
}

.register .register-box form .ui.input {
  width: 100%;
}

.register .register-box form .ui.input input {
  border: none;
  border-radius: 5px;
  color: #ffffff;
  background: #3a3a3a;
}

.register .register-box form .ui.input i {
  color: #ffffff;
}

.register .register-box form .ui.dropdown {
  background: #ffffff;
  color: #c4c4c4;
  width: 100%;
  border: none;
  border-radius: 5px !important;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: #3a3a3a;
  color: #ffffff;
}

.register .register-box form .ui.dropdown .text {
  width: 100%;
  height: 100%;
  color: #ffffff !important;
  align-items: center;
  display: flex;
}

.register .register-box form .ui.dropdown i {
  margin-right: 0px !important;
}

.register .register-box form .ui.dropdown .menu {
  margin-top: 5px;
  background: #3a3a3a;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

.register .register-box form .ui.dropdown .menu .text {
  width: 100%;
  height: 100%;
  color: #c4c4c4 !important;
}

.register .register-box form .ui.dropdown .menu .item {
  border: none;
  padding: 10px !important;
  color: #c4c4c4;
}

.register .register-box form .register-btn button {
  margin-bottom: 20px;
  background-color: #dfc683;
  color: #ffffff;
  padding: 10px 35px;
  border-radius: 10px;
  transition: 0.2s ease !important;
  width: 100%;
  display: flex;
  border: none;
  justify-content: center;
}

.register .register-box form .register-btn button:hover {
  background-color: #3a3a3a;
}

.register .register-box form a {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #c4c4c4;
  transition: 0.2s ease !important;
}

.register .register-box form a:hover {
  color: #dfc683;
}

.register .home-btn {
  text-align: center;
}

.register .home-btn a {
  color: #ffffff;
  transition: 0.2s ease !important;
}

.register .home-btn a:hover {
  color: #dfc683;
}

.login {
  background-color: #000000;
  padding: 50px 0 110px 0;
  background-image: url(/images/right-girl.png?811da58479a1b07034b07f234700caf5);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 50%;
}

.login .login-box {
  background-color: #181818;
  border-radius: 10px;
  padding-right: 30px;
  margin-bottom: 50px;
  display: flex;
  align-items: center;
}

.login .login-box .auth-image {
  width: 450px;
  height: 300px;
  overflow: hidden;
  margin-right: 30px;
  border-radius: 10px 0 0 10px;
  position: relative;
}

.login .login-box .auth-image .text {
  position: absolute;
  color: #ffffff;
  text-align: center;
  bottom: 0;
  top: 0;
  display: flex;
  padding: 30px;
  font-size: 14px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  flex-direction: column;
  justify-content: center;
}

.login .login-box .auth-image .text p {
  line-height: 24px;
}

.login .login-box .auth-image .text p:first-child {
  margin-bottom: 0;
}

.login .login-box .auth-image .text a {
  transition: 0.3s ease !important;
  color: #dfc683;
  font-weight: 700;
}

.login .login-box .auth-image .text a:hover {
  color: #4e4e4e;
}

.login .login-box .auth-image img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.login .login-box h2 {
  font-size: 16px;
  text-align: center;
  color: #ffffff;
  font-weight: 700;
  font-family: "Quicksand", sans-serif;
}

.login .login-box form .ui.input {
  margin-bottom: 15px;
  width: 100%;
}

.login .login-box form .ui.input input {
  border: none;
  border-radius: 5px;
  color: #ffffff;
  background: #3a3a3a;
}

.login .login-box form .ui.input i {
  color: #ffffff;
}

.login .login-box form .login-btn button {
  margin-bottom: 15px;
  background-color: #dfc683;
  color: #ffffff;
  padding: 10px 35px;
  border-radius: 10px;
  transition: 0.2s ease !important;
  width: 100%;
  display: flex;
  border: none;
  justify-content: center;
}

.login .login-box form .login-btn button:hover {
  background-color: #3a3a3a;
}

.login .login-box form a {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #c4c4c4;
  transition: 0.2s ease !important;
}

.login .login-box form a:hover {
  color: #dfc683;
}

.login .home-btn {
  text-align: center;
}

.login .home-btn a {
  color: #ffffff;
  transition: 0.2s ease !important;
}

.login .home-btn a:hover {
  color: #dfc683;
}

.contact-section {
  padding-top: 100px;
  margin-bottom: 150px;
}

.contact-section .contact-form form {
  background-color: #181818;
  border-radius: 10px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact-section .contact-form form h3 {
  color: #ffffff;
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.contact-section .contact-form form .ui.input {
  margin-bottom: 15px;
}

.contact-section .contact-form form .ui.input i {
  color: #ffffff;
}

.contact-section .contact-form form .ui.input input {
  border: none;
  border-radius: 5px;
  color: #ffffff;
  background: #3a3a3a;
}

.contact-section .contact-form form textarea {
  margin-bottom: 15px !important;
  border: none;
  border-radius: 5px;
  width: 100%;
  padding: 10px;
  resize: none;
  color: #ffffff;
  background: #3a3a3a;
}

.contact-section .contact-form form textarea::-moz-placeholder {
  color: #ffffff;
}

.contact-section .contact-form form textarea:-ms-input-placeholder {
  color: #ffffff;
}

.contact-section .contact-form form textarea::placeholder {
  color: #ffffff;
}

.contact-section .contact-form form textarea:focus {
  border: none;
  outline: none;
}

.contact-section .contact-form form .ui.checkbox {
  margin-bottom: 15px;
}

.contact-section .contact-form form .ui.checkbox label {
  color: #c4c4c4;
}

.contact-section .contact-form form .ui.checkbox label:before {
  border: none;
}

.contact-section .contact-form form .ui.checkbox label:after {
  color: #dfc683;
}

.contact-section .contact-form form .submit-btn {
  display: flex;
  justify-content: flex-end;
}

.contact-section .contact-form form .submit-btn button {
  border: none;
  background-color: #dfc683;
  color: #ffffff;
  padding: 10px 35px;
  border-radius: 10px;
  cursor: pointer;
}

.contact-section .contact-form form .submit-btn button:hover {
  transition: 0.2s ease !important;
  background-color: #3a3a3a;
}

.contact-section .contact-form form .submit-btn button:focus {
  outline: none;
}

.contact-section .info-box {
  background-color: #181818;
  border-radius: 10px;
  padding: 25px;
  height: 100%;
}

.contact-section .info-box h3,
.contact-section .info-box h4 {
  color: #ffffff;
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.contact-section .info-box h4 {
  font-weight: 400;
}

.contact-section .info-box .company-info {
  margin-bottom: 40px;
}

.contact-section .info-box .company-info p {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 5px;
  display: flex;
}

.contact-section .info-box .company-info p span {
  width: 220px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
}

.contact-section .info-box p {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
}

header {
  padding-top: 50px;
  margin-bottom: 90px;
  background-image: url(/images/girl-bg-1.jpg?1297f84fada30532183a4bf377de8b60);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 110%;
  background-color: #000000;
}

header .logo {
  justify-content: center;
  display: flex;
}

header .main-menu .menu-user-on {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: flex-end;
}

header .main-menu .menu-user-on .resp-icon {
  display: none;
}

header .main-menu .menu-user-on li {
  margin-right: 10px;
}

header .main-menu .menu-user-on li:last-child {
  margin-right: 0px;
}

header .main-menu .menu-user-on li:first-child a {
  background: none;
}

header .main-menu .menu-user-on li .resp-icon {
  color: #dfc683;
  transition: 0.2s ease !important;
}

header .main-menu .menu-user-on li .resp-icon:hover {
  color: #4e4e4e;
}

header .main-menu .menu-user-on li .ui.dropdown {
  background: #3a3a3a;
  color: #ffffff;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
  border: none;
  border-radius: 10px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  width: 60px;
  height: 40px;
  min-width: 40px;
}

header .main-menu .menu-user-on li .ui.dropdown .text {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .main-menu .menu-user-on li .ui.dropdown i {
  margin-right: 0px !important;
  margin-left: -4px;
}

header .main-menu .menu-user-on li .ui.dropdown .menu {
  margin-top: 5px;
  background: #3a3a3a;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

header .main-menu .menu-user-on li .ui.dropdown .menu .item {
  transition: 0.3s ease !important;
  border: none;
  color: #ffffff;
  padding: 10px;
}

header .main-menu .menu-user-on li .ui.dropdown .menu .item:hover {
  background-color: #4e4e4e;
}

header .main-menu .menu-user-on li .ui.dropdown .menu .item a {
  padding: 10px;
  font-size: 14px;
  color: #ffffff;
}

header .main-menu .menu-user-on li .ui.dropdown.language-dropdown .menu a .item {
  padding: 10px 15px !important;
  justify-content: center;
  display: flex;
}

header .main-menu .menu-user-on li .ui.dropdown.user-on {
  background: none;
  padding-right: 30px;
  margin-left: 10px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

header .main-menu .menu-user-on li .ui.dropdown.user-on .text a {
  color: #ffffff;
  background: none;
}

header .main-menu .menu-user-on li .ui.dropdown.user-on i.dropdown {
  right: 0;
}

header .main-menu .menu-user-on li .ui.dropdown.user-on .avatar-on {
  min-width: 25px;
  height: 25px;
  width: 25px;
  margin-right: 10px;
}

header .main-menu .menu-user-on li .ui.dropdown.user-on .avatar-on img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 100%;
}

header .main-menu .menu-user-on li .ui.dropdown.notification-bell {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
}

header .main-menu .menu-user-on li .ui.dropdown.notification-bell .fa-circle {
  position: absolute;
  top: -5px;
  right: -5px;
  color: #dfc683;
}

header .main-menu .menu-user-on li .ui.dropdown.active {
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

header .main-menu .menu-user-on li.box {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: #3a3a3a;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

header .main-menu .menu-user-on li.box a {
  color: #ffffff;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

header .main-menu .menu-user-on li.box a.messages {
  display: flex;
}

header .main-menu .menu-user-on li.box span {
  position: absolute;
  background: #dfc683;
  color: #ffffff;
  border-radius: 100%;
  width: 15px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -5px;
  right: -5px;
  font-size: 10px;
}

header .resp-icon {
  display: none;
}

header .resp-icon.mobile {
  display: none;
}

header .menu-top {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

header .menu-top li {
  margin-right: 10px;
}

header .menu-top li a {
  color: #ffffff;
  padding: 10px;
  font-size: 14px;
  font-weight: 400;
}

header .menu-top li a:hover {
  transition: 0.2s ease !important;
  color: #dfc683;
}

header .menu-user-off {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

header .menu-user-off li {
  margin-right: 10px;
}

header .menu-user-off li:last-child {
  margin-right: 0px;
}

header .menu-user-off li .ui.dropdown {
  background: #3a3a3a;
  color: #ffffff;
  min-height: 37px;
  border: none;
  border-radius: 10px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  min-width: auto;
}

header .menu-user-off li .ui.dropdown .text {
  height: 11px;
}

header .menu-user-off li .ui.dropdown i {
  margin-right: 0px !important;
}

header .menu-user-off li .ui.dropdown .menu {
  margin-top: 5px;
  background: #3a3a3a;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

header .menu-user-off li .ui.dropdown .menu .item {
  border: none;
  color: #ffffff;
}

header .menu-user-off li .ui.dropdown .menu .item a {
  padding: 10px;
  font-size: 14px;
  color: #ffffff;
}

header .menu-user-off li .ui.dropdown.language-dropdown .menu a .item {
  padding: 10px 15px;
  justify-content: center;
  display: flex;
}

header .menu-user-off li .ui.dropdown.active {
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

header .menu-user-off li .login-btn {
  border-radius: 10px;
  padding: 10px 30px;
  background-color: #3a3a3a;
  color: #ffffff;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

header .menu-user-off li .login-btn:hover {
  transition: 0.2s ease !important;
  background-color: #dfc683;
}

header .menu-user-off li .register-btn {
  border-radius: 10px;
  padding: 10px 30px;
  background-color: #dfc683;
  color: #ffffff;
}

header .menu-user-off li .register-btn:hover {
  transition: 0.2s ease !important;
  background-color: #3a3a3a;
}

header .content {
  padding: 150px 0 400px;
}

header .content h1 {
  font-size: 36px;
  font-family: "Quicksand", sans-serif;
  color: #ffffff;
  font-weight: 700;
  text-align: left;
  margin-bottom: 5px;
}

header .content span {
  width: 100%;
  display: flex;
  justify-content: left;
  color: #dfc683;
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 40px;
}

header .content p {
  color: #ffffff;
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  margin-bottom: 20px;
}

header .content .join {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  background-color: #dfc683;
  color: #ffffff;
  padding: 10px 35px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .content .join:hover {
  transition: 0.2s ease !important;
  background-color: #3a3a3a;
}

.inner {
  padding-top: 30px;
  padding-bottom: 30px;
  background-image: none;
  background-color: #000000;
  margin-bottom: 0;
}

.top-right-toaster {
  transition: 1s ease;
  position: absolute;
  right: 20px;
  top: 150px;
  width: 350px;
  z-index: 99;
  margin-right: -500px;
  display: none;
}

.top-right-toaster.active {
  margin-right: 0;
  display: block;
}

.top-right-toaster .content {
  background: #4e4e4e;
  border-radius: 5px;
  padding: 10px;
}

.top-right-toaster .content h4 {
  margin-top: 10px;
  color: #ffffff;
}

.top-right-toaster .content #closeInfoToaster {
  float: right;
  color: #ffffff;
}

footer {
  background-color: #000000;
  background-image: url(/images/bottom-clouds.png?59fa8f40de95457baba44979675daa02), url(/images/footer-bg.png?fcb66080f10f1a062c16fb6373cc9e91);
  background-repeat: no-repeat, no-repeat;
  background-position: top -120px center, bottom -120px right -220px;
  padding: 270px 0 40px 0;
}

footer .bottom-menu {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .bottom-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

footer .bottom-menu ul li {
  margin-right: 10px;
}

footer .bottom-menu ul li a {
  color: #ffffff;
  padding: 10px;
  font-size: 14px;
  font-weight: 400;
}

footer .bottom-menu ul li a:hover {
  transition: 0.2s ease !important;
  color: #dfc683;
}

footer p {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

footer .row {
  display: flex;
  align-items: center;
}

footer .row .links {
  margin-left: 20px;
}

footer .row .links a {
  display: flex;
}

.inner {
  background-color: #000000;
}

.inner .bottom-menu {
  justify-content: flex-start;
}

@media only screen and (max-width: 1199px) {
  header .content {
    padding: 150px 0;
  }

  .people-on-my-date .count-people .hearts {
    left: 10px;
  }

  .browse .people .us2 {
    bottom: 20px;
    left: 60px;
  }

  .browse .people .us3 {
    top: 20px;
  }

  .browse .people .us5 {
    right: 80px;
    bottom: -30px;
  }

  .testimonials:hover .comm1 {
    right: 30px;
  }

  .testimonials:hover .comm2 {
    top: 100px;
  }

  .testimonials:hover .comm3 {
    bottom: 270px;
    right: 50px;
  }

  .testimonials .comm1 {
    right: 30px;
  }

  .testimonials .comm2 {
    top: 100px;
  }

  .testimonials .comm3 {
    bottom: 270px;
    right: 50px;
  }

  .profile-info .profile-box .profile-avatar,
  .edit-profile .profile-box .profile-avatar {
    width: 100%;
  }

  .register .ui.grid.container .eleven.wide.column {
    width: 100% !important;
  }
}

@media only screen and (max-width: 991px) {
  header {
    margin-bottom: 50px;
  }

  header .content {
    padding: 50px 0;
  }

  header .main-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  header .ui.grid .four.wide.column {
    display: none !important;
  }

  header .ui.grid .seven.wide.column {
    width: 30% !important;
  }

  header .ui.grid .five.wide.column {
    width: 70% !important;
  }

  header .ui.grid .resp-icon {
    display: flex;
  }

  header .ui.grid .resp-icon.mobile {
    display: none;
  }

  header .menu-user-on li .ui.dropdown {
    width: 40px;
  }

  header .menu-user-on li .ui.dropdown.user-on {
    width: 110px;
  }

  .chat-with {
    margin-bottom: 50px;
  }

  .people-on-my-date .count-people .hearts {
    top: -40px;
  }

  .people-on-my-date .count-people .count-box {
    padding: 40px 99px;
  }

  .browse .people .us2 {
    bottom: -100px;
  }

  .browse .people .us3 {
    left: 284px;
  }

  .browse .people .us5 {
    display: none;
  }

  .browse .people .us6 {
    top: 110px;
    right: -20px;
  }

  .testimonials:hover .comm1 {
    -webkit-animation: none;
            animation: none;
    right: 0px;
  }

  .testimonials:hover .comm2 {
    -webkit-animation: none;
            animation: none;
    top: 130px;
    left: 14px;
  }

  .testimonials:hover .comm3 {
    bottom: 410px;
    right: 0px;
    -webkit-animation: none;
            animation: none;
  }

  .testimonials .comm1 {
    -webkit-animation: none;
            animation: none;
    right: 0px;
  }

  .testimonials .comm2 {
    -webkit-animation: none;
            animation: none;
    top: 130px;
    left: 14px;
  }

  .testimonials .comm3 {
    bottom: 410px;
    right: 0px;
    -webkit-animation: none;
            animation: none;
  }

  .members {
    padding-top: 50px;
  }

  .members .four.wide.column {
    width: 100% !important;
  }

  .members .twelve.wide.column {
    width: 100% !important;
  }

  .profile-info .gift-received .received-list .ui.grid .column {
    width: 50% !important;
  }

  .edit-profile .profile-box .user-settings {
    margin-bottom: 15px;
  }

  .edit-profile .profile-box .user-settings .ui.three.column.grid .column {
    width: 50% !important;
    padding: 0 5px !important;
  }

  .error {
    padding: 50px 0 125px 0;
  }

  .error .error-box h1 {
    font-size: 110px;
  }

  .login {
    padding: 56px 0 110px 0;
  }

  .chat-box .chat-conversation .message.you a img,
  .chat-box .chat-conversation .message.me a img {
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
  }

  .chat-box .chat-header a .premium-icon {
    margin-right: 10px;
  }

  .messages-container {
    display: flex;
    justify-content: center;
  }

  .messages-container button {
    padding: 10px 15px;
  }

  .messages-container button:last-child {
    margin-right: 0;
  }

  .login .ui.grid.container .ten.wide.column {
    width: 100% !important;
  }

  .register .register-box {
    height: 100%;
  }

  footer {
    background-position: top 190px center, bottom 0px right -60px;
    padding: 120px 0 0px 0;
    background-size: 100%, 100%;
  }

  footer .ui.grid.container .six.wide.column,
  footer .ui.grid.container .seven.wide.column,
  footer .ui.grid.container .three.wide.column {
    width: 100% !important;
  }

  footer .row {
    justify-content: center;
  }

  footer .bottom-menu ul {
    flex-direction: column;
    text-align: center;
  }

  footer .bottom-menu ul li {
    margin-bottom: 10px;
  }

  footer a img {
    margin: 0 auto;
  }

  footer p {
    justify-content: center;
  }

  .message-chat,
  .messages-container {
    margin-top: 20px;
    margin-bottom: 50px !important;
  }

  .messages-container .ui.grid.container {
    width: 100% !important;
  }

  footer {
    padding-top: 50px;
  }
}

@media only screen and (max-width: 768px) {
  header {
    padding-top: 20px;
  }

  header .content {
    padding: 70px 20px 100px;
  }

  header .menu-user-on li .ui.dropdown.user-on {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .how-work {
    margin-bottom: 70px;
  }

  .browse .people .us4,
  .browse .people .us6 {
    display: none;
  }

  .browse .people .us2 {
    left: 155px;
  }

  .testimonials:hover .comm1 {
    right: 60px;
  }

  .testimonials:hover .comm3 {
    bottom: 150px;
    right: 90px;
  }

  .testimonials .comm1 {
    right: 60px;
  }

  .testimonials .comm3 {
    bottom: 150px;
    right: 90px;
  }

  .members .twelve.wide.column {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pricing-plans .ui.column.grid .column {
    width: 50% !important;
  }

  .profile-info .profile-box,
  .edit-profile .profile-box {
    display: flex;
    justify-content: center;
  }

  .profile-info .profile-box .profile-avatar,
  .edit-profile .profile-box .profile-avatar {
    width: 240px;
  }

  .profile-info .profile-box .ui.two.column .column,
  .edit-profile .profile-box .ui.two.column .column {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .profile-info .photo-gallery .ui.five.column .column,
  .edit-profile .photo-gallery .ui.five.column .column {
    width: 33% !important;
  }

  .edit-profile .upload-images .images-gallery .each-image {
    width: 160px;
    height: 180px;
    margin-right: 17px;
  }

  .edit-profile .upload-images .images-gallery .load-image {
    width: 160px;
  }

  .inner .bottom-menu {
    justify-content: center;
  }

  .message-chat .messages-list-user {
    display: flex;
    overflow-y: hidden;
  }

  .message-chat .messages-list-user .each-message .user-chat-details .unread-messages {
    right: -15px;
  }

  .logo-section {
    padding-top: 20px;
  }

  .login {
    padding: 30px 0 110px 0;
  }

  .login .ui.grid.container .ten.wide.column {
    width: 90% !important;
  }

  .login .login-box {
    flex-direction: column;
    padding: 0;
  }

  .login .login-box .auth-image {
    width: 100%;
    margin-right: 0;
    height: 210px;
    margin-bottom: 20px;
  }

  .login .login-box form a {
    margin: 20px 0;
  }

  .register .register-box {
    flex-direction: column;
    padding: 0;
  }

  .register .register-box form {
    padding: 0 20px;
  }

  .register .register-box .auth-image {
    width: 100%;
    margin-right: 0;
    height: 210px;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 575px) {
  h1,
  h2 {
    font-size: 24px !important;
  }

  .title-purple,
  .title-white {
    padding: 30px 0;
    margin-bottom: 0;
  }

  header {
    margin-bottom: 0;
  }

  header .content {
    padding: 40px 20px 40px;
  }

  header .main-menu {
    justify-content: center;
  }

  header .menu-user-off {
    justify-content: center;
  }

  header .menu-user-on {
    justify-content: center;
  }

  header .menu-user-on li .ui.dropdown.user-on {
    width: 120px;
  }

  header .ui.grid .resp-icon {
    display: none;
  }

  header .ui.grid .resp-icon.mobile {
    display: flex;
  }

  header .ui.grid .seven.wide.column {
    width: 100% !important;
  }

  header .ui.grid .five.wide.column {
    width: 100% !important;
  }

  header .logo {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
  }

  .people-on-my-date .count-people .count-box {
    padding: 40px 50px;
  }

  .people-on-my-date .count-people p {
    flex-wrap: wrap;
  }

  .serious-dating .phone-image .text {
    bottom: 45px;
  }

  .browse {
    margin-bottom: 0px;
  }

  .browse .title-white {
    margin-bottom: 0;
  }

  .browse .people {
    display: none;
  }

  .testimonials .comm1 {
    width: 50%;
    right: 30px;
  }

  .testimonials .comm2 {
    top: 130px;
    left: 10px;
    width: 40%;
  }

  .testimonials .comm3 {
    bottom: 100px;
    right: 20px;
    width: 40%;
  }

  .testimonials:hover .comm1 {
    width: 50%;
    right: 30px;
  }

  .testimonials:hover .comm2 {
    top: 130px;
    left: 10px;
    width: 40%;
  }

  .testimonials:hover .comm3 {
    bottom: 100px;
    right: 20px;
    width: 40%;
  }

  .members .each-member .member-avatar {
    width: 100%;
  }

  .members .each-member .member-info {
    padding: 25px 10px;
  }

  .members .each-member .member-info .premium-icon {
    min-width: 40px;
  }

  .pricing-plans {
    padding: 50px 0;
  }

  .pricing-plans .ui.column.grid .column {
    width: 100% !important;
  }

  .profile-info .photo-gallery .ui.five.column .column {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .profile-info .photo-gallery .photo-lock {
    width: 100%;
  }

  .profile-info .gift-received .received-list .ui.grid .column {
    width: 100% !important;
  }

  .edit-profile .profile-box .user-settings .ui.three.column.grid .column {
    width: 100% !important;
  }

  .edit-profile .upload-images .images-gallery .each-image {
    width: 100%;
    margin-right: 0;
    height: 250px;
  }

  .edit-profile .upload-images .images-gallery .load-image {
    width: 100%;
    margin-right: 0;
    height: 250px;
  }

  .edit-profile .upload-images .images-gallery label {
    margin-left: -150px;
  }

  .edit-profile .upload-images .images-gallery label:hover {
    margin-left: -151px;
  }

  .chat-box .chat-header {
    justify-content: space-around;
    padding: 20px 10px;
  }

  .chat-box .chat-header .chat-user {
    margin-right: 0;
  }

  .chat-box .chat-header .premium-icon {
    margin-right: 10px;
    min-width: 40px;
  }

  .chat-box .chat-conversation .message.you a,
  .chat-box .chat-conversation .message.me a {
    width: 100%;
  }

  .chat-box .chat-conversation .message.you a img,
  .chat-box .chat-conversation .message.me a img {
    width: 100%;
  }

  .send-message-form .ui.input input {
    padding: 0 0 0 5px;
  }

  .messages-container {
    margin-top: 50px;
  }

  .messages-container button {
    padding: 10px 14px;
  }

  .messages-container button:last-child {
    margin-right: 0;
  }

  .messages-container .chat-box .chat-header {
    justify-content: space-around;
    padding: 20px 10px;
  }

  .messages-container .chat-box .chat-header .chat-user {
    margin-right: 0;
  }

  .messages-container .chat-box .chat-header .premium-icon {
    margin-right: 10px;
    min-width: 40px;
  }

  .messages-container .chat-box .chat-conversation .message.you a,
  .messages-container .chat-box .chat-conversation .message.me a {
    width: 100%;
  }

  .messages-container .chat-box .chat-conversation .message.you a img,
  .messages-container .chat-box .chat-conversation .message.me a img {
    width: 100%;
  }

  .messages-container .send-message-form .ui.input input {
    padding-left: 15px;
  }

  .login .login-box form {
    padding: 0 20px;
  }

  .register .register-box form .each-row {
    flex-direction: column;
  }

  .register .register-box form .each-row .ui {
    margin-left: 0 !important;
  }

  .register .register-box form .each-row:nth-child(4) .ui:last-child,
  .register .register-box form .each-row:nth-child(5) .ui:last-child,
  .register .register-box form .each-row:nth-child(6) .ui:last-child,
  .register .register-box form .each-row:nth-child(7) .ui:last-child {
    margin-top: 15px;
  }

  .chat-with {
    margin-bottom: 10px;
  }

  .chat-with img {
    margin-bottom: 30px;
  }

  .chat-with .chat-text {
    margin-bottom: 20px;
  }

  footer {
    padding: 50px 0px 0px 0px;
  }
}