html {
  height: 100%;
}

body {
  min-height: 100%;
  height: auto;
  overflow-y: auto;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
}



/* primary colors */
.bg-primary,
.badge-primary {
  background-color: #0D76FF !important
}

.text-primary {
  color: #0D76FF !important
}

.text-default {
  color: #FF0068 !important
}

.bg-primary-light {
  background-color: #CEE3FF !important
}

.bg-success,
.badge-success {
  background-color: #00BE7D !important
}

.text-success {
  color: #00BE7D !important
}

.bg-succss-light {
  background-color: #C0E9DB !important
}

.bg-warning,
.badge-warning {
  background-color: #FFC400 !important
}

.text-warning {
  color: #FFC400 !important
}

.bg-warning-light {
  background-color: #FFF0C1 !important
}

.bg-orange,
.badge-orange {
  background-color: #FF6F00 !important
}

.bg-orange-light {
  background-color: #FFE5D1 !important
}

.bg-grey,
.badge-grey {
  background-color: #999999 !important
}

.bg-grey-light {
  background-color: #BBBBBB !important
}

.text-white a {
  color: #ffffff !important
}

.row.proh {
  position: relative;
  overflow-x: hidden;
}

.text-mute {
  opacity: 0.8;
}

.wrapper {
  height: auto;
  width: 100%;
  position: relative;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
  margin-left: 0;
  z-index: 1;
  min-height: 100vh;
}

p.small {
  line-height: 1.45em;
}

p:last-child {
  margin-bottom: 0;
}

sup {
  top: -.2em;
}

.background {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  opacity: 0.4;
  z-index: 0;
}

.background + div {
  position: relative;
  z-index: 1
}

/* sideabr  */
body.menuactive {
  overflow: hidden;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
}

html.menuactive {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body.menuactive .wrapper {
  overflow: hidden;
  height: 100vh;
}

body.sidemenu-open .wrapper {
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  margin-left: 240px;
  border-radius: 10px;
}

body.sidemenu-open .wrapper:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  z-index: 10;
  cursor: pointer
}

.sidebar {
  position: absolute;
  padding-top: env(safe-area-inset-top);
  width: 250px;
  height: 100%;
  z-index: 0;
  left: -260px;
  top: 0;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
  overflow-y: auto;
}


.sidebar .main-menu .list-group-item {
  background-color: transparent;
  font-size: 16px;
  border: 0;
  border-radius: 10px;
}

.sidebar .main-menu .list-group-item:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.sidebar .main-menu .list-group-item.active {
  background-color: rgba(255, 255, 255, 0.25);
}

body.sidemenu-open .sidebar {
  left: 0;
}


.sidebar .figure-menu {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  padding: 5px;
  display: block;
  margin: 45px auto 20px auto;
  background-color: #ffffff;
}

.sidebar .figure-menu figure {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}

.sidebar .figure-menu figure img {
  width: 100%;
}

/* Loader css */
.breadcrumb-item.active {
  color: #b9b9b9;
}

/* Loader css */
.laoderhorizontal {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.laoderhorizontal div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.laoderhorizontal div:nth-child(1) {
  left: 6px;
  animation: laoderhorizontal1 0.6s infinite;
}

.laoderhorizontal div:nth-child(2) {
  left: 6px;
  animation: laoderhorizontal2 0.6s infinite;
}

.laoderhorizontal div:nth-child(3) {
  left: 26px;
  animation: laoderhorizontal2 0.6s infinite;
}

.laoderhorizontal div:nth-child(4) {
  left: 45px;
  animation: laoderhorizontal3 0.6s infinite;
}


@keyframes laoderhorizontal1 {
  0% {
      transform: scale(0);
  }

  100% {
      transform: scale(1);
  }
}

@keyframes laoderhorizontal3 {
  0% {
      transform: scale(1);
  }

  100% {
      transform: scale(0);
  }
}

@keyframes laoderhorizontal2 {
  0% {
      transform: translate(0, 0);
  }

  100% {
      transform: translate(19px, 0);
  }
}

.btn-loader {
  vertical-align: middle;
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
}

.btn-loader div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  margin: 3px;
  border: 4px solid #fff;
  border-radius: 50%;
  animation: btnloader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #ffffff transparent transparent transparent;
}

.btn-loader div:nth-child(1) {
  animation-delay: -0.45s;
}

.btn-loader div:nth-child(2) {
  animation-delay: -0.3s;
}

.btn-loader div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes btnloader {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
  }
}

.loader-screen {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 99;
  background-color: #FF0068;
}

/* introduction swiper slider css */
.demo-swiper,
.swiper-init {
  height: 450px;
  margin-top: 30px;
}

.demo-swiper .swiper-slide,
.swiper-init .swiper-slide {
  background-color: #ffffff
}

.demo-swiper .swiper-slide,
.swiper-init .swiper-slide {
  background-size: cover
}

.demo-swiper-gallery-top {
  height: 350px;
  margin-top: 30px;
}

.demo-swiper-gallery-top .swiper-slide {
  background-size: cover
}

.demo-swiper-gallery-thumbs {
  height: 80px;
}

.demo-swiper-gallery-thumbs .swiper-slide > div {
  height: 100%;
  width: 100%;
  background-size: cover;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #000000;
}

.introduction.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 35px;
  margin-bottom: env(safe-area-inset-bottom);
}

.introduction .swiper-slide {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-bottom);
}

.right-image {
  position: absolute;
  z-index: 0;
  right: 0;
  top: auto;
  bottom: auto;
  height: 600px;
}

.right-image + div {
  z-index: 1
}

.orange-slice {
  margin-right: -200px;
}

.pinapple {
  margin-right: -120px;
}

.banana {
  margin-right: -190px;
}

.apple {
  margin-right: -280px;
}


/* form elements */
select.form-control option,
select.form-control optgroup {
  color: #000000
}

.form-control:focus {
  box-shadow: none;
  -ms-box-shadow: none;
}

.form-control::placeholder {
  color: #555;
}

.float-label {
  padding-top: 15px;
  position: relative;
}

.form-group .form-control-label {
  font-size: 13px;
  line-height: 18px;
  color: #BBBBBB;
}

.float-label .form-control-label {
  position: absolute;
  left: 0;
  top: 24px;
  margin: 0;
  line-height: 20px;
  color: #BBBBBB;
  font-size: 15px;
  transition: ease all 0.5s;
  -webkit-transition: ease all 0.5s;
  -ms-transition: ease all 0.5s;
  -moz-transition: ease all 0.5s;
  z-index: 0;
}

.float-label .form-control,
.float-label .chosen-container .chosen-choices,
.float-label .chosen-container .chosen-single {
  background-color: transparent;
  border-width: 0 0 1px 0;
  border-radius: 0;
  z-index: 1;
  position: relative;
  padding-left: 0;
  padding-right: 0;
  background-image: none;
}

.float-label .form-control:focus {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  outline: none;
}

.float-label .form-control:focus + .form-control-label,
.float-label.active label {
  top: 0;
  font-size: 13px;
  line-height: 20px;
}

.form-control-lg {
  font-size: 18px;
}

.search {
  /*border-radius: 30px;*/
  border-color: #f8bbd0;
}

.chosen-container-active .chosen-choices,
.chosen-container .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
}

.chosen-container-multi .chosen-choices,
.chosen-container .chosen-single {
  padding: 5px;
  height: auto;
  border-color: #ced4da;
}

.chosen-container-multi .chosen-choices li.search-choice,
.chosen-container .chosen-single li.search-choice {
  position: relative;
  padding: 5px 25px 5px 15px;
  line-height: 18px;
  border: 0px none;
  border-radius: 30px;
  background-image: none;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  outline: none;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  top: 8px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 20px;
  padding: 5px;
}

.chosen-container.chosen-with-drop .chosen-drop {
  border: 0;
}

.chosen-container .chosen-results li.highlighted {
  background-image: none;
}

/* button */
.btn {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 500;
  border-width: 0;
}

[class*="outline"] {
  border-width: 1px;
}

body a.btn-primary,
body a.btn-warning,
body a.btn-danger,
body a.btn-success {
  color: #ffffff;
}

.btn-lg {
  padding: .815rem 1.5rem;
}

.btn-sm {
  font-size: 14px;
}

.btn i,
.btn span,
a i {
  vertical-align: middle
}

.btn img {
  max-width: 20px;
  vertical-align: middle;
}

.btn:focus {
  box-shadow: none;
  -ms-box-shadow: none;
}

.btn i:first-child {
  margin-right: 5px;
  margin-left: -4px;
}

.btn i:last-child {
  margin-left: 5px;
  margin-right: -4px;
}

.btn i:last-child:first-child {
  margin-left: 0px;
  margin-right: 0px;
}

.button-rounded-54 {
  height: 54px;
  width: 54px;
  line-height: 50px;
  vertical-align: middle;
  text-align: center;
  padding: 0;
  border-radius: 28px;
}

.button-rounded-36 {
  height: 36px;
  width: 36px;
  line-height: 32px;
  vertical-align: middle;
  text-align: center;
  padding: 0;
  border-radius: 28px;
}

.button-rounded-26 {
  height: 26px;
  width: 26px;
  line-height: 22px;
  vertical-align: middle;
  text-align: center;
  padding: 0;
  border-radius: 13px;
}

.float-bottom-right {
  position: absolute;
  right: 15px;
  bottom: 15px;
  z-index: 2;
  margin-bottom: env(safe-area-inset-bottom);
}

.btn-rounded {
  border-radius: 30px;
}

.btn-rounded-15 {
  border-radius: 15px;
}

.btn-default,
body .btn.btn-secondary {
  color: #ffffff
}

.btn-warning {
  background-color: #FFC400;
  color: #ffffff;
}

.btn-warning:focus,
.btn-warning:active,
.btn-warning:hover {
  background-color: #f0b000;
  color: #ffffff !important;
}

.btn.btn-link-default {
  color: #bbbbbb;
}

.btn.shadow-sm {
  box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .2) !important;
  -webkit-box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .2) !important;
  -moz-box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .2) !important;
  -ms-box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .2) !important;
}

.btn.shadow-xs {
  box-shadow: 0 .15rem .3rem rgba(0, 0, 0, .1) !important;
  -webkit-box-shadow: 0 .15rem .3rem rgba(0, 0, 0, .1) !important;
  -moz-box-shadow: 0 .15rem .3rem rgba(0, 0, 0, .1) !important;
  -ms-box-shadow: 0 .15rem .3rem rgba(0, 0, 0, .1) !important;
}

.btn-light,
body a.btn-light {
  background-color: #ffffff;
  color: #999999;
}

.btn-light-grey,
body a.btn-light-grey {
  background-color: #E3EAF1;
  color: #BBBBBB;
  border-color: #F3F6F8
}

.btn-group > .btn:first-child,
.btn-group > .btn:first-of-type,
.btn-group > .btn-group:first-child > .btn {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

.btn-group > .btn:last-child,
.btn-group > .btn:last-of-type,
.btn-group > .btn-group:last-child > .btn {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}


.btn h6,
.btn h5,
.btn h4,
.btn h3,
.btn h2,
.btn h1 {
  vertical-align: middle
}

.vm {
  vertical-align: middle
}

/*.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}*/

/*.input-group > .form-control:first-child {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

.input-group > .form-control:last-child {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}*/

.input-group > .input-group-prepend > .input-group-text + .input-group-text {
  border-radius: 0;
}

.w-45 {
  width: 45px !important;
  text-align: center
}

.w-35 {
  width: 35px !important;
  text-align: center
}

.input-group.input-group-sm > .form-control {
  height: calc(1.6em + .5rem + 2px);
  border-color: #E3EAF1;
}

.border-top-dashed {
  border-top: 2px dashed #e3ead7 !important;
}

.progress {
  background-color: rgba(0, 0, 0, 0.05)
}

/* heights  */
.h-2 {
  height: 2px;
}

.h-4 {
  height: 4px;
}

.h-6 {
  height: 6px;
}

.h-8 {
  height: 8px;
}

.h-10 {
  height: 10px;
}

/* popover  */
.popover {
  border: 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);
  -ms-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);
}

/* Notifications  */
.new-notification {
  height: 10px;
  width: 10px;
  border-radius: 6px;
  background-color: #FF0068;
  display: block;
  position: absolute;
  top: 23px;
  right: 5px;
  border: 2px solid #ffffff;
}

/* List items  */
.list-items {
  padding: 0;
  margin: 0;
  width: 100%;
  display: block;
}

.list-items li {
  margin-bottom: 5px;
  border-radius: 10px;
  background-color: #eef2f5;
  width: 100%;
  display: block;
  padding: 10px 15px;
  line-height: 20px;
}

.list-items li:last-child {
  margin-bottom: 0
}

.list-group .list-group-item {
  padding: 0.75rem 15px;
}

/*.list-group .list-group-item:hover {
  background-color: #FF0068;
}

.list-group .list-group-item:hover * {
  color: #FFFFFF !important
}
.list-group .list-group-item:hover .form-control{
  color: #000000 !important ;
}*/
.list-group-item.active {
  z-index: 2;
  color: #343a40;
  background-color: #e3eaf1;
  border-color: #ffffff;
}

.list-group-item.active:hover * {
  color: #343a40 !important;
}

/* Nav tabs  */
.nav-tabs {
  z-index: 0;
  border: 0;
  margin-bottom: -11px;
}

.card .card-header .nav-tabs {
  margin-bottom: -1px;
  text-align: center
}

.card-img:first-child {
  border-radius: 10px 10px 0 0;
}

.nav-tabs .nav-link {
  padding: 15px 15px 25px 15px;
  border: 0;
  border-radius: 15px 15px 0 0;
}

.card .card-header .nav-tabs .nav-link {
  padding: 15px;
}

.nav-tabs .nav-link.active {
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  -webkit-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  -moz-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  -ms-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.card .card-header .nav-tabs .nav-link.active {
  box-shadow: 0 -0.125rem .125rem rgba(0, 0, 0, .075);
  -webkit-box-shadow: 0 -0.125rem .125rem rgba(0, 0, 0, .075);
  -moz-box-shadow: 0 -0.125rem .125rem rgba(0, 0, 0, .075);
  -ms-box-shadow: 0 -0.125rem .125rem rgba(0, 0, 0, .075);
}

.card .card-header {
  border: 0;
  border-radius: 14px;
}

.card .card-footer {
  border: 0;
  border-radius: 0 0 12px 12px;
}

.card .card-header .card-title {
  margin-bottom: 0;
}

.tab-content {
  position: relative;
  z-index: 1;
}

.tab-content .tab-pane {
  padding: 5px;
  background-color: #ffffff;
  box-shadow: 0 .25rem .25rem rgba(0, 0, 0, .075);
  -webkit-box-shadow: 0 .25rem .25rem rgba(0, 0, 0, .075);
  -moz-box-shadow: 0 .25rem .25rem rgba(0, 0, 0, .075);
  -ms-box-shadow: 0 .25rem .25rem rgba(0, 0, 0, .075);
  border-radius: 15px;
}

.card .tab-content .tab-pane {
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
}

/* Notification */
.notification {
  padding: 15px;
  background-color: #ffffff;
  position: fixed;
  top: -30%;
  width: 84%;
  max-width: 400px;
  margin: 0 auto;
  left: 0;
  right: 0;
  border-left-width: 3px;
  border-left-style: solid;
  z-index: 10;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
  border-radius: 10px;
  overflow: hidden;
}

.notification.active {
  top: 30px;
  opacity: 1;

}

.notification.bottom {
  bottom: -30%;
  opacity: 0;
  top: auto;
}

.notification.bottom.active {
  bottom: 30px;
  opacity: 1;

}

/* header */

.header {
  width: 100%;
  height: auto;
  padding: env(safe-area-inset-top);
  top: 0;
  left: 0;
  z-index: 9;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
}

.header-logo {
  height: auto;
  max-height: 48px;
  display: inline-block;
  vertical-align: middle;
  margin: 6px auto 0px auto;
}

.header .btn {
  height: 54px;
  width: 54px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

.header + div {
  padding-top: 26px;
}


/* footer */
.footer {
  width: 100%;
  height: auto;
  position: fixed;
  padding: env(safe-area-inset-bottom);
  bottom: 0;
  left: 0;
  z-index: 9;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
  background: #ffffff;
  box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.1);
  visibility: hidden;
}

/* page specific */
.subtitle {
  font-size: 16px;
  line-height: 26px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.subtitle span {
  vertical-align: middle;
  display: inline-block;
  line-height: 26px;
  border-bottom: 2px solid #ffffff;
}

.logo-small {
  width: 122px;
}

.form-signin {
  border-radius: 20px;
  background-color: #ffffff;
  padding: 20px;
  margin: 30px auto;
  max-width: 320px;
}

/* product */

.small-slide {
  height: 150px;
}

.small-slide .swiper-slide {
  width: 165px;
  padding-bottom: 10px;
  padding-right: 15px;
}

.small-slide .swiper-slide .card {
  border-radius: 15px;
  margin-left: 15px;
  height: 100%;
  width: 92%;
}

.small-slide .swiper-slide .card-body {
  position: relative
}

.small-slide .swiper-slide .small-slide-right {
  max-height: 100%;
  margin-right: -45px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.badge {
  border-radius: 30px;
  font-weight: 400;
  padding-left: 10px;
  padding-right: 10px
}

.product-image {
  height: 80px;
  width: 100%;
  display: block;
  text-align: center;
  margin: 10px auto;
  max-width: 100px;
}

.product-image img {
  max-height: 100%;
  max-width: 100%;
}

.news-slide {
  height: 180px;
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.news-slide .swiper-slide {
  padding: 0 15px 10px 15px;
}

.news-slide .swiper-slide .card {
  overflow: hidden;
  height: 100%;
  margin: 0;
}

.news-slide.swiper-container-horizontal > .swiper-pagination-bullets {
  margin-bottom: -10px;
}


/* card */
.card {
  border-radius: 15px;
}

.card .card-body {
  padding: 15px;
}

/* Rules for sizing the icon. */
.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}

/*  filter */
.filter {
  height: 100%;
  width: 280px;
  position: fixed;
  right: -280px;
  top: 0;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
  z-index: 11;
  padding-bottom: env(safe-area-inset-bottom);
}

.filtermenu-open .filter {
  right: 0;
  box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.25);
  -ms-box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.25);
}

.filter > .filter-btn {
  border-radius: 30px 0 0 30px;
  width: 40px;
  text-align: left;
  position: absolute;
  left: -39px;
  top: 135px;
}

.text-normal {
  text-transform: none
}

@media screen and (max-width:610px) {
  .filter-group {
      margin-right: 50px;
  }

  .filter > .filter-btn {
      width: 50px;
      left: -49px;
  }
  .menu-nav{
      overflow-x: scroll;
      white-space: nowrap;
  }
}

.filters-container {
  height: 100%;
  overflow-y: auto;
  width: 100%;
  display: block;
}

/* range slider */
.noUi-target {
  background: #ffffffa1;
  border-radius: 4px;
  border: none;
  box-shadow: none;
}

.noUi-horizontal {
  height: 10px;
}

.noUi-connect {
  background: #000000;
}

.noUi-horizontal .noUi-handle {
  width: 20px;
  height: 20px;
  border-radius: 60px;
}

.noUi-horizontal .noUi-handle:after,
.noUi-horizontal .noUi-handle:before {
  display: none
}

/* progress bar */
.progress-bar {
  border-radius: 10px;
}

.progress-sm {
  height: 8px;
  padding: 2px;
}

/* product details  */
.product-details {
  height: 300px;
}

.product-details {}

.product-details .swiper-slide {
  padding: 20px 15px 40px 15px;
  line-height: 200px;
  text-align: center
}

.product-details .swiper-slide > img {
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;

}


/* avatar */

.avatar {
  border-radius: 200px;
  display: inline-block;
  margin: 0px auto;
  background-color: #ffffff;
  overflow: hidden;
  border: 3px solid #ffffff;
  vertical-align: top;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.avatar img {
  width: 100%;
  vertical-align: top
}

.avatar-20 {
  height: 20px;
  width: 20px;
}

.avatar-40 {
  height: 40px;
  width: 40px;
}

.avatar-60 {
  height: 60px;
  width: 60px;
}

.avatar-80 {
  height: 80px;
  width: 80px;
}

.avatar-100 {
  height: 100px;
  width: 100px;
}

.avatar-120 {
  height: 120px;
  width: 120px;
}

.avatar-50 {
  height: 50px;
  width: 50px;
}

.avatar-70 {
  height: 70px;
  width: 70px;
}

.avatar-90 {
  height: 90px;
  width: 90px;
}

.figure-profile {
  height: 178px;
  width: 178px;
  border-radius: 90px;
  border: 10px solid #FF0068;
  margin: 0 auto;
  position: relative;
}

.figure-profile figure {
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 50%;
}

.figure-profile figure img {
  width: 100%;
  min-height: 100%;
}

.figure-profile > .floating-btn {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  line-height: 38px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: 2;
  right: 0px;
  bottom: 0px;
}

.figure-profile .floating-btn i {
  font-size: 22px;
  margin: 0;
}

.float-file {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: block;
  z-index: 1;
  opacity: 0
}

.cart_counter {
  height: 20px;
  line-height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #000000;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 13px;
}

pre {
  background: #e8f4ff;
  padding: 15px;
}

.modal-content {
  border-radius: 15px;
  border: none;
}

.modal-dialog-end {
  display: -ms-flexbox;
  display: -moz-flexbox;
  display: -webkit-flexbox;
  display: flex;
  -ms-flex-align: flex-end;
  -moz-flex-align: flex-end;
  -webkit-flex-align: flex-end;
  align-items: flex-end;
  min-height: calc(100% - 3.5rem);
}
.btn-rounded-54 {
  height: 54px;
  line-height: 54px;
  vertical-align: middle;
  width: 54px;
  border-radius: 50%;
  padding: 0;
}
/* theme color pink  */

.pink-theme .bg-background,
.pink-theme .header.active,
.pink-theme .list-group-item.active {
  background-color: #E3EAF1
}

.pink-theme .wrapper {
  background-color: #fffefe;
}

.pink-theme-bg,
.pink-theme body.sidemenu-open,
.pink-theme .bg-template,
.pink-theme .btn-default,
.pink-theme .custom-control-input:checked ~ .custom-control-label::before,
.pink-theme .small-slide .swiper-slide .card:hover,
.pink-theme .small-slide .swiper-slide .card:focus,
.pink-theme .filter,
.pink-theme .chosen-container .chosen-results li.highlighted,
.pink-theme .page-item.active .page-link,
.pink-theme .nav-pills .nav-link.active,
.pink-theme .nav-pills .show > .nav-link,
.pink-theme .loader-screen {
  background-color: #FF0068;
}

.pink-theme .filter,
.pink-theme .filter .form-control,
.pink-theme .filter .form-group label,
.pink-theme .float-label .chosen-container-multi .chosen-choices,
.pink-theme .float-label .chosen-container-multi .chosen-choices li.search-field input[type=text],
.pink-theme .filter .chosen-container-multi .chosen-choices li.search-choice,
.pink-theme .btn-default,
.pink-theme .sidebar,
.pink-theme .sidebar .main-menu .list-group-item,
.pink-theme .small-slide .swiper-slide .card:hover *,
.pink-theme .small-slide .swiper-slide .card:focus * {
  color: #ffff !important;
}

.pink-theme .filter .form-group label {
  opacity: 0.85;
}

.pink-theme .btn-default:hover,
.pink-theme .btn-default:focus {
  color: #ffffff;
  background-color: #dd015b;
}

.pink-theme .figure-profile,
.pink-theme .form-control:focus,
.pink-theme .custom-control-input:focus ~ .custom-control-label::before,
.pink-theme .custom-control-input:checked ~ .custom-control-label::before,
.pink-theme .float-label .form-control:focus,
.pink-theme .page-item.active .page-link,
.pink-theme .btn-outline-default {
  border-color: #FF0068
}

.pink-theme .filter .form-control:focus,
.pink-theme .filter .custom-control-input:focus ~ .custom-control-label::before,
.pink-theme .filter .custom-control-input:checked ~ .custom-control-label::before,
.pink-theme .filter .float-label .form-control:focus {
  border-color: #ffffff
}

.pink-theme .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(255, 0, 104, 0.3);
}

.pink-theme .btn-light:hover,
.pink-theme .btn-light:focus,
.pink-theme .btn-light:not(:disabled):not(.disabled).active,
.pink-theme .bg-template-light {
  background-color: #FFE5F0
}

.pink-theme .text-template,
.pink-theme .btn-link,
.pink-theme a,
.pink-theme .float-label .form-control:focus + .form-control-label,
.pink-theme .btn-light:hover,
.pink-theme .btn-light:focus,
.pink-theme .btn-light:not(:disabled):not(.disabled).active,
.pink-theme .btn.btn-link-default:hover,
.pink-theme .btn.btn-link-default:focus,
.pink-theme .btn.btn-link-default.active {
  color: #FF0068;
}

/* media query */

@media screen and (min-width:993px) {
  .sidebar {
      width: 280px;
      left: -290px;
  }
}

@media screen and (min-width:1180px) {
  .sidebar {
      width: 290px;
      left: -300px;
  }
}

@media screen and (max-width:374px) {
  .footer .btn:not(.centerbutton) {
      width: 50px;
  }
}

.readmore_content_exists {
  text-align: center;
  position: relative;
}
.readmore_content_exists button {
  color: rgba(51,51,51,.5);
  text-align: center;
  margin: 0 5px 20px;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  display: inline-block;
  border: none;
  font-size: 19px;
  background: url() no-repeat top;
  background-color: transparent;
  background-size: 26px 17px;
  padding-bottom: 0;
  padding-top: 40px;
}
.readmore_content_exists button span, 
.readmore_content_exists button span span {
  display: block;
  right: 0;
  left: 0;
  margin: auto;
  position: absolute;
}
.readmore_content_exists button span.arrow {
  top: 22px;
}

.readmore_content_exists button span.arrow:before {
  content: "";
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAMCAYAAAAH4W+EAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDc3NEIyN0EyRDY0MTFFQjkzMDRBMjIxNzc0RTBDODQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDc3NEIyNzkyRDY0MTFFQjkzMDRBMjIxNzc0RTBDODQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNjdCMUQ3OTJDQUIxMUVCOENCRERGNDFFOTA1OTlERCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNjdCMUQ3QTJDQUIxMUVCOENCRERGNDFFOTA1OTlERCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph5ikagAAAGHSURBVHjaYmAAAg8Pj14vLy87Bjzg////JGFPT09GHx8fNnxmguwE2Q1iMwI1eAI1bgPZxcjIOJ+Dg6Ns/fr1b3E5hhjg7e3NuG3bNpyKAwMDhX/8+NEFNC8J7AhGRi8mHh6evUBGHRD/AkkAFVwHujQWmwFANWCMx4eMYWFheB0BMhtkB8guoFk/QXaD3QBTAAxG1b9//84AKnCCWrqPmZk5Y8uWLbfxRRdSKDADHfAXl1pC5jNiczFQcS8Qi4JcDBRqBbq4c/Xq1b+wWRAaGgoygxEo/w+HPNuXL1/KgcxqoJnsQDNfA3Ex0NGLUUIbh2YhoOZuoMZEqJobTExM6UDNhxhIAKDE+O/fv5lApgYsDQI9VQp09DuMaKeWQZR6hBmfgbdv335oaGg4+zcQAB1hDTTYFMhMUlNTewGUu4QrMf769WszUK0NKAMAcRMvL2/Mxo0b7+Gzi5HYYCaU2MhJ7GQ5BF9ihkrhTYxUdwhagZSIZAbRaYhqDsGSmBnIyVXIACDAAM34JXWPolNhAAAAAElFTkSuQmCC);
  display: block;
  width: 25px;
  right: 0;
  left: 0;
  top: -5px;
  margin: auto;
  position: absolute;
  opacity: 1;
  height: 15px;
  background-size: contain;
  background-repeat: no-repeat;
}
.readmore_content_exists button span.arrow:after {
  content: "";
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAMCAYAAAAH4W+EAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDc3NEIyN0EyRDY0MTFFQjkzMDRBMjIxNzc0RTBDODQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDc3NEIyNzkyRDY0MTFFQjkzMDRBMjIxNzc0RTBDODQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNjdCMUQ3OTJDQUIxMUVCOENCRERGNDFFOTA1OTlERCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNjdCMUQ3QTJDQUIxMUVCOENCRERGNDFFOTA1OTlERCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph5ikagAAAGHSURBVHjaYmAAAg8Pj14vLy87Bjzg////JGFPT09GHx8fNnxmguwE2Q1iMwI1eAI1bgPZxcjIOJ+Dg6Ns/fr1b3E5hhjg7e3NuG3bNpyKAwMDhX/8+NEFNC8J7AhGRi8mHh6evUBGHRD/AkkAFVwHujQWmwFANWCMx4eMYWFheB0BMhtkB8guoFk/QXaD3QBTAAxG1b9//84AKnCCWrqPmZk5Y8uWLbfxRRdSKDADHfAXl1pC5jNiczFQcS8Qi4JcDBRqBbq4c/Xq1b+wWRAaGgoygxEo/w+HPNuXL1/KgcxqoJnsQDNfA3Ex0NGLUUIbh2YhoOZuoMZEqJobTExM6UDNhxhIAKDE+O/fv5lApgYsDQI9VQp09DuMaKeWQZR6hBmfgbdv335oaGg4+zcQAB1hDTTYFMhMUlNTewGUu4QrMf769WszUK0NKAMAcRMvL2/Mxo0b7+Gzi5HYYCaU2MhJ7GQ5BF9ihkrhTYxUdwhagZSIZAbRaYhqDsGSmBnIyVXIACDAAM34JXWPolNhAAAAAElFTkSuQmCC);
  display: block;
  width: 25px;
  top: 2px;
  right: 0;
  left: 0;
  margin: auto;
  position: absolute;
  opacity: .5;
  height: 15px;
  background-size: contain;
  background-repeat: no-repeat;
}
.readmore_content_exists:before {
  content: "";
  position: absolute;
  bottom: 100%;
  height: 200px;
  left: 0;
  background-image: linear-gradient(180deg,transparent,#fff);
  width: 100%;
}
.readmore_content_exists button .arrow:before {
  animation: animate-arrow-3 1s ease-in-out infinite .2s;
}
.readmore_content_exists button .arrow:after {
  animation: animate-arrow-2 1s ease-in-out infinite .1s;
}

@keyframes animate-arrow-2 {
  0% {
      transform: translateY(-20px);
      opacity: 0
  }
  70%,
  to {
      transform: translateY(0);
      opacity: .5
  }
}

@keyframes animate-arrow-3 {
  0% {
      transform: translateY(-10px);
      opacity: 0
  }
  70%,
  to {
      transform: translateY(0);
      opacity: 1
  }
}
.content.scroll-content{
  height: 500px;
  overflow-y: scroll;
}
.cs,.csc {
  margin-left: 4px;
  margin-bottom: 5px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
  border-style: outset;
  border: 1px solid #d3d3d3;
  background-color: #fff;
  display: inline-block;
  min-width: 41px;
  height: 41px;
  font-size: 22px;
  line-height: 41px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  cursor: pointer;
  padding: 0 10px;
}
.cs:hover,.csc:hover {
  background-color: #ccf5ff;
}
.section_content {
  margin-bottom: 10px;

}

.modal-body{
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.one_variant {
  border: 1px solid #eee;
  background: white;
  min-width: 160px;
  overflow: hidden;
}

.one_variant .variant_votes i {
  font-size: 16px
}

.copy_variant {
  padding: 2px 0 6px 0;
  white-space: nowrap;
  cursor: pointer
}

@media(max-width:500px) {
  .one_variant {
      font-size: 16px;
      display: block;
      min-width: 0;
      max-width: none;
      margin: 0 3pt 3pt 0;
      width: 98% !important;
      padding: 6pt 2pt;
      text-align: center
  }
  .one_variant .variant_votes {
      font-size: 15px !important
  }
  .one_variant .variant_votes .vote_green {
      margin-right: 10px !important
  }
  .one_variant .variant_votes i {
      font-size: 19px !important
  }
  #variants_main .copy_variant {
      padding-bottom: 7px;
      font-size: 18px
  }
}

.variant_votes .vote_green {
  color: #28a745;
  margin-right: 3pt;
  font-size: 16px;
}

.variant_votes .vote_red {
  color: #dc3545;
  font-size: 16px;
}

.variant_votes .vote_del {
  color: #ff2311
}

.variant_votes i {
  cursor: pointer;
  opacity: .8;
  font-size: 16px
}

.variant_votes i:hover {
  opacity: 1
}

.variant_voted_icon {
  opacity: .4 !important;
  cursor: default !important
}
/*.home-page #some_random_variants{
  overflow-y: scroll;
  height: 333px;
}
.nickname-page #some_random_variants{
  overflow-y: scroll;
  height: 450px;
}*/
.bg-hottrend{
  background: #f41252;
  color: #fff;
  margin-top: -8px;
  display: inline-block;
}
.marquee-hottrend{
  border: 1px #f41252 solid;
  margin-top: -1px;
}
.suggest-text {
  margin-left: -15px;
}
.pointer{
  cursor: pointer;
}

.bdbox{
  border: 1px solid #dee2e6;
}
.box-0{
  background-color: #f4433615;
  border-right: 5px solid #f44336;
}
.box-1{
  background-color: #e91e6315;
  border-right: 5px solid #e91e63;
}
.box-2{
  background-color: #81d74215;
  border-right: 5px solid #9c27b0;
}
.box-3{
  background-color: #011f4b15;
  border-right: 5px solid #673ab7;
}
.box-4{
  background-color: #ffd80015;
  border-right: 5px solid #3f51b5;
}
.box-5{
  background-color: #ff7f5015;
  border-right: 5px solid #2196f3;
}
.box-6{
  background-color: #738a8d15;
  border-right: 5px solid #03a9f4;
}
.box-7{
  background-color: #03a87c15;
  border-right: 5px solid #00bcd4;
}
.box-8{
  background-color: #4b383215;
  border-right: 5px solid #009688;
}
.box-9{
  background-color: #ba619515;
  border-right: 5px solid #4caf50;
}
.box-10{
  background-color: #ba619515;
  border-right: 5px solid #8bc34a;
}
.box-11{
  background-color: #ba619515;
  border-right: 5px solid #cddc39;
}
.box-12{
  background-color: #ba619515;
  border-right: 5px solid #ffeb3b;
}
.box-13{
  background-color: #ba619515;
  border-right: 5px solid #ffc107;
}
.box-14{
  background-color: #ba619515;
  border-right: 5px solid #ff9800;
}
.box-15{
  background-color: #ba619515;
  border-right: 5px solid #ff5722;
}
.box-16{
  background-color: #ba619515;
  border-right: 5px solid #795548;
}
.box-17{
  background-color: #ba619515;
  border-right: 5px solid #9e9e9e;
}
.box-18{
  background-color: #ba619515;
  border-right: 5px solid #607d8b;
}

.hue_text_color {
  background-image: -webkit-linear-gradient(92deg, #ff0000, #ff0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 1s infinite linear;
}

@-webkit-keyframes hue {
from {
  -webkit-filter: hue-rotate(0deg);
}
to {
  -webkit-filter: hue-rotate(-360deg);
}
}
.cse_custom{
  min-height: 80px;
  background: #fff;
}

button.close{
  /*background: #c3c3c3;
  border-radius: 30px;
  width: 26px;
  height: 26px;*/
}
#symbolTextModal .one_generated_variant {
  border: #0012ba 1px solid;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
  font-size: 22px;
  background: #fff;
}
#symbolTextModal .one_generated_variant[data-value=""] {
  background: #e91e63;
  color: #fff;
  border: 0;
}
#symbolTextModal .one_generated_variant .material-icons{
  float:right;
  color: #e91e63;
}
.symbolBox{
  /*background: #ffffff !important;*/
}

#loader:before {
  content: "";
  display: block;
  position: absolute;
  left: 2px;
  top: 1px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f41252;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
  z-index: 1;
}
#loader:after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  background: url(https://kituhay.io/assets/images/matcuoi-kituhay2.png) no-repeat center;
  background-size: 68%;
  border-radius: 50%;
  background-color: #f412528c;
}
#loader {
  display: block;
  position: relative;
  left: 0px;
  right: 0;
  margin: 0px auto;
  width: 68px;
  height: 68px;
}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.gsc-cursor-page.gsc-cursor-current-page {
  background: #f41252;
  color: #FFF !important;
  padding: 6px 10px;
  border-radius: 5px;
}

.gsc-cursor-page {
  background: #9b9b9b;
  color: #FFF !important;
  padding: 6px 10px;
  border-radius: 5px;
}
div#symboltext > div[level]{
  padding: 10px;
  margin-bottom: 15px;
}

div#symboltext > div[level]>span {
  margin: -11px -11px 15px;
  border-radius: 0;
  padding: 10px;
}
span.topkey {
  border-radius: 99px;
  background: #f41252;
  padding: 8px 12px;
  font-size: 16px;
  color: #fff;
}

.svg-inline--fa {
  display: var(--fa-display,inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}
span.ideasbox  {
  width: auto;
  position: absolute;
  top: -15px;
  color: #fff;
  font-size: 10px;
  border-radius: 3px;
  padding: 0px 5px;
  background: #000;
  text-align: center !important;
  z-index: 9;
  height: 18px;
  float: left;
  font-weight: 600;
  letter-spacing: 1px;
  font-variant-caps: all-small-caps;
  display:none;
}

div#SymbolTextGenerator .input-group> input:focus + span.ideasbox {
  background:#5c5c5c;
  display:block;
}
#text_letters{
  height:68px;
}
.jscroll-loading{
  text-align: center;
  margin: 20px;
}

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */
  
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

.spinner {
display: inline-block;
width: 50px;
height: 50px;
border: 5px solid rgba(0, 0, 0, 0.1);
border-left-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}

@media only screen and (max-width: 970px){
  /*.boxnames span {
      width: auto;
      text-align: left;
      display: none;
      position: absolute;
      top: -5px;
      color: #fff;
      font-size: 10px;
      left: 0;
      border-radius: 5px;
      padding: 1px 5px;
      background: #000;
      text-align: center !important;
      width: 30% !important;
  }
  .boxnames p {
      width: 100% !important;
  }*/
}
@media only screen and (max-width: 600px){
  .boxnames p {
      width: 100%;
      font-size: 17px;
  }
  .boxnames {
      width: 100%;
      margin: .5% 0;
  }
}
i.icopytext{
  float: right;
  background: #15c;
  padding: 0 10px;
  color: #fff;
  border-radius: 5px;
  font-size: 13px;
  box-shadow: 0px 1px 2px 0px #212529;
}
i.icopytext:before {
  content: "Copy";
}
.boxnames {
  position: relative;
  margin: 0;
  display: block;
  float: left;
  cursor: pointer;
  width: 100%;
  background: #fff;
  border-radius: 3px;
  padding: 5px;
  text-align: left;
}

.boxnames p {
  width: 85%;
  float: left;
  background: #f5f8fc;
  margin: 0;
  border-radius: 5px;
  padding: 10px;
  font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif;
  border: 1px solid transparent;
}
.boxnames:hover span {
  display: block;
}

.boxnames span {
  float: left;
  font-weight: 600;
  letter-spacing: 1px;
  font-variant-caps: all-small-caps;
  position: absolute;
  top: -5px;
  color: #fff;
  font-size: 10px;
  left: 0;
  border-radius: 25px;
  padding: 0px 8px;
  background: #515151;
  background-image: -o-linear-gradient(135deg,#B10DC9,#0a6ccb);
  background-image: linear-gradient(-45deg, #B10DC9, #0a6ccb);
}
.boxnames:hover p {
  border-color: #000;
  background: #fff;
}
.icotopideas{
  width: 28px;
  padding: 3px;
  position: relative;
  top: -15px;
  left: -10px;
  background: #0e0e0e;
  border-radius: 99px;
  height: 28px;
}

@keyframes slide {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

.sticky {
position: fixed;
bottom: 0;
z-index: 9999;
width: 100%;
left: 0;
animation: slide 0.3s ease-out;
}


#SymbolTextGenerator.sticky p.box-guide,
#SymbolTextGenerator.sticky .row,
#SymbolTextGenerator.sticky p.small,
#SymbolTextGenerator.sticky p.hue_text_color,
#SymbolTextGenerator.sticky #toggle-advanced {
display:none;
}
#SymbolTextGenerator.sticky>.container{
  background: #fff7fa;
  border: 0;
  border-radius: 0;
  border-top: 2px dashed #f41252;
}
#SymbolTextGenerator.sticky #text_letters {
  height: 45px;
}
#SymbolTextGenerator.sticky .btn-lg{
    padding: 0.3rem 1rem;
    margin:0 !important;
}
#SymbolTextGenerator>.container{border: 3px dashed #f41252;padding: 15px;border-radius: 15px;background: #fff7fa;}

#btnToTop {
  display: none;
  position: fixed;
  bottom: 145px;
  right: 15px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #f41252;
  color: white;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 20px;
}
.bgfooter{
  background: #ddd;
}

.glowbutton:after,.glowbutton:before {
  z-index: -1;
  content: "";
  position: absolute;
  border-radius: 99px;
}

.glowbutton {
  outline: 0;
  cursor: pointer;
  position: relative;
  z-index: 5
}

.glowbutton:before {
  background: linear-gradient(45deg,red,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,red);
  top: -2px;
  left: -2px;
  background-size: 400%;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: 20s linear infinite glowing;
  opacity: 1;
  transition: opacity .3s ease-in-out
}

.glowbutton:hover {
  color: #fff
}

.glowbutton:active {
  color: #000
}

.glowbutton:active:after {
  background: rgba(0,0,0,0)
}

.glowbutton:after {
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0
}

@keyframes glowing {
  0%,100% {
      background-position: 0 0
  }

  50% {
      background-position: 400% 0
  }
}
.iconFixTopTop {
  position: fixed;
  z-index: 99;
  outline: none;
  color: white;
  cursor: pointer;
  font-size: 20px;
}
.iconFixTopTop.gotofavorites {
  display: block;
  bottom: 190px;
  right: 15px;
  background-color: #ffe2ec;
  background-image: url(/assets/images/love-icon.svg);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 99px;
  padding: 15px 15px;
  border: 1px solid #f41252;
}