@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

@font-face {
  font-family: noto_bold;
  src: url('../font/NotoSansJP-Bold.otf');
}

@font-face {
  font-family: noto_med;
  src: url('../font/NotoSansJP-Medium.otf');
}

@font-face {
  font-family: noto_reg;
  src: url('../font/NotoSansJP-Regular.otf');
}

@font-face {
  font-family: open_reg;
  src: url('../font/OpenSans-Regular.ttf');
}

@font-face {
  font-family: sarabun_reg;
  src: url('../font/Sarabun-Regular.ttf');
}

* {
  outline: none !important;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* Remove inner shadow from inputs on mobile iOS */
textarea, input {
  -webkit-appearance: none;
  border-radius: 0;
}

body {
  /* transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease; */
  overflow-x: hidden;
  background: var(--body-color);
}

.container-fluid, .container {
  padding-left: 23px;
  padding-right: 23px;
}

.row {
  margin-left: -12px;
  margin-right: -12px;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
  padding-left: 12px;
  padding-right: 12px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: noto_bold;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}


h1 {
  color: var(--color-1);
  font-size: 94px;
  font-weight: bold;
  letter-spacing: -1.5px;
  line-height: 136px;
}

h2 {
  color: var(--color-1);
  font-size: 59px;
  font-weight: bold;
  letter-spacing: -0.5px;
  line-height: 85px;
}

h3 {
  color: var(--color-1);
  font-size: 47px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 68px;
}

h4 {
  color: var(--color-1);
  font-size: 33px;
  font-weight: bold;
  letter-spacing: 0.25px;
  line-height: 48px;
}

h5 {
  color: var(--color-1);
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 35px;
}

h6 {
  color: var(--color-1);
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.25px;
  line-height: 29px;
}






.h1 {
  color: var(--color-1);
  font-size: 94px;
  font-weight: bold;
  letter-spacing: -1.5px;
  line-height: 136px;
}

.h2 {
  color: var(--color-1);
  font-size: 59px;
  font-weight: bold;
  letter-spacing: -0.5px;
  line-height: 85px;
}

.h3 {
  color: var(--color-1);
  font-size: 47px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 68px;
}

.h4 {
  color: var(--color-1);
  font-size: 33px;
  font-weight: bold;
  letter-spacing: 0.25px;
  line-height: 48px;
}

.h5 {
  color: var(--color-1);
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 35px;
}

.h6 {
  color: var(--color-1);
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.25px;
  line-height: 29px;
}












.s1 {
  font-family: noto_bold;
  color: var(--color-1);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15px;
  line-height: 24px;
}

.s2 {
  font-family: noto_bold;
  color: var(--color-1);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.0953967px;
  line-height: 24px;
}

p {
  font-family: noto_reg;
  color: var(--color-1);
  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 28px;
}

span {
  font-family: noto_reg;
  color: var(--color-1);
  font-size: 14px;
  letter-spacing: 0.25px;
  line-height: 20px;
}

img {
  width: 100%;
  height: auto;
}

.caption {
  font-family: noto_reg;
  color: var(--color-1);
  font-size: 12px;
  letter-spacing: 0.4px;
  line-height: 16px;
}

.overline {
  font-family: noto_reg;
  color: var(--color-1);
  font-size: 12px;
  letter-spacing: 2px;
  line-height: 16px;
}


.blur-color {
  color: var(--color-2);
}

.fill-btn {
  height: 40px;
  border-radius: 24px;
  background-size: 200% auto;
  background: transparent;
  position: relative;
  outline: none;
  border: 0;
  font-family: noto_bold;
  color: var(--pure-white-1);
  font-size: 14px;
  padding: 0 18px;
  letter-spacing: 0.0953967px;
  line-height: 24px;
  text-align: center;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
  align-items: center;
  -webkit-align-items: center;
  transition: all 400ms ease-in;
  overflow: hidden;
  background-size: 200% auto;
  background-image: linear-gradient(277.27deg, #FA6400 0%, #E0208C 50.45%, #FA6400 100%)
}

.fill-btn:hover {
  background-size: -100% auto;
  background-position: right center;
  text-decoration: none;
  transition: all 400ms ease-in;
  color: var(--pure-white-1);
  cursor: pointer;
}

.fill-btn[disabled]{
  cursor: not-allowed;
  opacity: 0.5;
}

.border-btn {
  height: 40px;
  border-radius: 24px;
  background: transparent;
  outline: none;
  border: 1px solid var(--border-2);
  font-family: noto_bold;
  color: var(--color-2);
  font-size: 14px;
  padding: 0 18px;
  letter-spacing: 0.0953967px;
  line-height: 24px;
  text-align: center;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
  align-items: center;
  -webkit-align-items: center;
  transition: all 300ms ease-in;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.border-btn::after {
  height: 200%;
  width: 200%;
  border-radius: 30px;
  transform: scale(0);
  position: absolute;
  content: '';
  background-size: cover;
  background: linear-gradient(261.82deg, #FA6400 12.57%, #E0208C 87.43%);
  z-index: 0;
  opacity: 0.08;
  transition: all 300ms ease-in;
}

.border-btn:hover {
  text-decoration: none;
  color: var(--color-2);
  cursor: pointer;
}

.border-btn:hover::after {
  text-decoration: none;
  transform: scale(1);
  transition: all 300ms ease-in;
}

.border-btn[disabled]{
  cursor: not-allowed;
  opacity: 0.5;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  animation: ripple-animation 2s;
}

@keyframes ripple-animation {
  from {
    transform: scale(1);
    opacity: 0.3;
  }

  to {
    transform: scale(50);
    opacity: 0;
  }
}


.blue-border-btn {
  height: 40px;
  border-radius: 20px;
  background-color: transparent;
  outline: none;
  border: 1px solid #F7F8FB;
  font-family: M_Sbold;
  color: #F7F8FB;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
  align-items: center;
  -webkit-align-items: center;
  transition: all .3s;
}

.blue-border-btn:hover {
  color: #062D7A;
  text-decoration: none;
  background-color: #F7F8FB;
}

.label-select span {
  margin-top: 4px;
  letter-spacing: 0.4px;
  color: var(--color-2);
  font-size: 12px;
  line-height: 16px;
  font-family: sarabun_reg;
  display: block;
  margin-bottom: 0;
}

.label-select label {
  letter-spacing: 0.4px;
  color: var(--color-2);
  font-size: 12px;
  line-height: 16px;
  font-family: sarabun_reg;
  display: block;
  margin-bottom: 0;
}

.label-select select {
  box-sizing: border-box;
  height: 35px;
  width: 100%;
  outline: none;
  padding: 0px;
  padding-right: 22px;
  color: var(--color-1);
  font-family: sarabun_reg;
  font-size: 14px;
  letter-spacing: 0.25px;
  border: 0;
  border-bottom: 1px solid var(--border-4);
  border-radius: 0px;
  background-color: var(--white-bg);
}

.label-select select {
  background-image: url(../img/chevron-down.svg);
  background-position: calc(100% - 9px), calc(100% - 9px);
  background-size: 20px;
  background-repeat: no-repeat;
}

.label-select select.error {
  border-color: #F94C43;
}




.select {
  box-sizing: border-box;
  height: 35px;
  width: 100%;
  outline: none;
  padding: 0px;
  padding-right: 22px;
  color: var(--color-1);
  font-family: sarabun_reg;
  font-size: 14px;
  letter-spacing: 0.25px;
  border: 0;
  border-bottom: 1px solid var(--border-4);
  border-radius: 0px;
  background-color: var(--white-bg);
}

.select {
  background-image: url(../img/chevron-down.svg);
  background-position: calc(100% - 9px), calc(100% - 9px);
  background-size: 24px;
  background-repeat: no-repeat;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}





.inputs-group {
  position: relative;
  padding-top: 20px;
}

.inputs-group span {
  position: absolute;
  top: 26px;
  left: 0px;
  color: var(--color-2);
  font-family: sarabun_reg;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  pointer-events: none;
  transition: all 0.15s ease-out 0s;
}

.inputs-group input,
.inputs-group textarea {
  display: block;
  font-family: sarabun_reg;
  padding: 8px 0;
  height: 35px;
  color: var(--color-1);
  width: 100%;
  font-size: 14px;
  letter-spacing: 0.25px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-4);
  color: var(--color-5);
  box-shadow: none;
  outline: none;
  box-shadow: none !important;
}

.inputs-group input:focus~span,
.inputs-group input.has-value~span,
.inputs-group textarea:focus~span,
.inputs-group textarea.has-value~span {
  top: 3px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: var(--color-2);
}

/* .inputs-group textarea:focus ~ span,
.inputs-group textarea.has-value ~ span {
    top: 30px;
} */
.inputs-group input:focus::-webkit-input-placeholder {
  color: transparent;
}

/* .inputs-group .error,
.label-select .error {
  font-size: 12px;
  line-height: 16px;
  font-family: sarabun_reg;
  display: block;
  margin-top: 4px;
  letter-spacing: 0.4px;
  margin-bottom: 0;
  color: #F94C43
} */

.inputs-group input.error,
.inputs-group textarea.error {
  border-color: #F94C43;
}


label.error {
  font-size: 12px;
  line-height: 16px;
  font-family: sarabun_reg;
  display: block;
  margin-top: 4px;
  letter-spacing: 0.4px;
  margin-bottom: 0;
  color: #F94C43;
  width: 100%;
}

.number-group span {
  position: absolute;
  top: 26px;
  left: 101px;
  color: var(--color-2);
  font-family: sarabun_reg;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  pointer-events: none;
  transition: all 0.15s ease-out 0s;
}

.number-group input {
  display: block;
  font-family: sarabun_reg;
  padding: 8px 0;
  height: 35px;
  color: var(--color-1);
  width: 100%;
  font-size: 14px;
  letter-spacing: 0.25px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-4);
  color: var(--color-5);
  box-shadow: none;
  outline: none;
  box-shadow: none !important;
  padding-left: 16px;
}

.number-group input:focus~span,
.number-group input.has-value~span,
.number-group textarea:focus~span,
.number-group textarea.has-value~span {
  top: 3px;
  left: 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: var(--color-2);
}

.number-group textarea:focus~span,
.number-group textarea.has-value~span {
  top: 30px;
}

.number-group input:focus::-webkit-input-placeholder {
  color: transparent;
}

.number-group .error {
  font-size: 12px;
  line-height: 16px;
  font-family: sarabun_reg;
  display: block;
  margin-top: 4px;
  letter-spacing: 0.4px;
  margin-bottom: 0;
  color: #F94C43
}

.number-group input.error {
  border-color: #F94C43;
}


.tags-input {
  position: relative;
  padding-top: 20px;
  overflow: hidden;
  margin-bottom: 16px;
}

.tags-input .bootstrap-tagsinput {
  box-shadow: none;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  font-family: sarabun_reg;
  padding: 4px 0;
  min-height: 35px;
  margin-left: -2px;
  margin-right: -2px;
  border-radius: 0;
  border-bottom: 1px solid var(--border-4);
  background: transparent;
}

.tags-input .bootstrap-tagsinput .label {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--color-2);
  font-size: 12px;
  padding: 0px 6px;
  font-family: sarabun_reg;
  display: block;
  margin: 2px;
  border-radius: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.tags-input .bootstrap-tagsinput input {
  font-size: 14px;
  letter-spacing: 0.25px;
  color: var(--color-5);
  font-family: sarabun_reg;
  padding: 0;
  margin-left: 2px;
  min-width: 100px;
}

.tags-input .bootstrap-tagsinput .tag [data-role="remove"] {
  display: block;
  padding: 0;
  height: 12px;
  width: 12px;
  background: url(../img/close-small.svg);
  background-position: center;
  background-size: cover;
  box-shadow: none !important;
}

.tags-input .bootstrap-tagsinput .tag [data-role="remove"]::after {
  display: none;
}

.tags-input p {
  position: absolute;
  top: 26px;
  left: 0px;
  color: var(--color-2);
  font-family: sarabun_reg;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  pointer-events: none;
  transition: all 0.15s ease-out 0s;
}

.tags-input .bootstrap-tagsinput.focus~p,
.tags-input.focus p {
  top: 3px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: var(--color-2);
}









.multi-label-select {
  margin-bottom: 16px;
}

.multi-label-select p {
  margin-top: 4px;
  letter-spacing: 0.4px;
  color: var(--color-2);
  font-size: 12px;
  line-height: 16px;
  font-family: sarabun_reg;
  display: block;
  margin-bottom: 0;
}

.multi-label-select span {
  letter-spacing: 0.4px;
  color: var(--color-2);
  font-size: 12px;
  line-height: 16px;
  font-family: sarabun_reg;
  display: block;
  margin-bottom: 0;
}

.multi-label-select label {
  letter-spacing: 0.4px;
  color: var(--color-2);
  font-size: 12px;
  line-height: 16px;
  font-family: sarabun_reg;
  display: block;
  margin-bottom: 0;
}

.multi-label-select .chosen-container {
  width: 100% !important;
}

.multi-label-select .chosen-choices {
  box-sizing: border-box;
  height: 35px;
  width: 100%;
  outline: none;
  padding: 0px;
  color: var(--color-1);
  font-family: sarabun_reg;
  font-size: 14px;
  letter-spacing: 0.25px;
  border: 0;
  border-bottom: 1px solid var(--border-4);
  border-radius: 0px;
  background-color: var(--white-bg);
  min-height: 35px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  flex-wrap: wrap;
}

.multi-label-select .chosen-choices {
  background-image: url(../img/chevron-down.svg);
  background-position: calc(100% - 9px), calc(100% - 9px);
  background-size: 20px;
  background-repeat: no-repeat;
  padding: 4px 0;
  padding-right: 30px;
  box-shadow: none !important;
}

.multi-label-select .chosen-container-multi .chosen-choices li.search-choice {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--color-2);
  font-size: 12px;
  padding: 0px 6px;
  font-family: sarabun_reg;
  display: block;
  margin: 2px 2px 2px 0;
  border-radius: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  height: 22px;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  display: block;
  font-size: unset;
  padding: 0;
  height: 12px;
  width: 12px;
  background: url(../img/close-small.svg) !important;
  background-position: center;
  background-size: cover !important;
  position: static;
  margin-left: 8px;
  cursor: pointer;
}

.chosen-container .chosen-drop {
  box-shadow: 0px 2px 16px rgb(0 0 0 / 10%);
  background: var(--dropdown-bg);
  border: 0;
}

.chosen-container .chosen-results li {
  padding: 6px 8px;
  color: var(--color-2) !important;
  font-family: noto_reg;
  font-size: 12px;
}

.chosen-container-multi .chosen-drop .result-selected {
  color: var(--color-3) !important;
  cursor: not-allowed;
}

.chosen-container .chosen-results {
  scrollbar-color: var(--bg-2) var(--scroll-track-bg);
  scrollbar-width: thin;
  max-height: 200px;
}

.chosen-container .chosen-results::-webkit-scrollbar {
  width: 4px;
}

.chosen-container .chosen-results::-webkit-scrollbar-track {
  background: transparent;
}

.chosen-container .chosen-results::-webkit-scrollbar-thumb {
  background: var(--bg-2);
  border-radius: 2px
}

.chosen-container .chosen-results::-webkit-scrollbar-thumb:hover {
  background: var(--bg-2);
}

.chosen-container-multi .active-result.highlighted {
  background: var(--hover-bg) !important;
}

.multi-label-select .error {
  border-color: #F94C43;
}

.chosen-container-multi .chosen-choices li.search-choice {
  white-space: nowrap;
}










.date-group {
  position: relative;
  padding-top: 20px;
}

.date-group>span {
  position: absolute;
  top: 26px;
  left: 0px;
  color: var(--color-2);
  font-family: sarabun_reg;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  pointer-events: none;
  transition: all 0.15s ease-out 0s;
}

.date-group input {
  display: block;
  font-family: sarabun_reg;
  padding: 8px 0;
  height: 35px;
  color: var(--color-1);
  width: 100%;
  font-size: 14px;
  letter-spacing: 0.25px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-4);
  color: var(--color-5);
  box-shadow: none;
  outline: none;
  box-shadow: none !important;
}

.date-group input:focus~span,
.date-group input.has-value~span {
  top: 3px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: var(--color-2);
}

.date-group input:focus::-webkit-input-placeholder {
  color: transparent;
}

.date-group .error {
  font-size: 12px;
  line-height: 16px;
  font-family: sarabun_reg;
  display: block;
  margin-top: 4px;
  letter-spacing: 0.4px;
  margin-bottom: 0;
  color: #F94C43
}

.date-group input.error {
  border-color: #F94C43;
}







.textarea {
  outline: none;
  box-sizing: border-box;
  height: 120px;
  border: 1px solid #C7CAD1;
  border-radius: 20px;
  background-color: var(--white-bg);
  padding-left: 24px;
  padding-right: 24px;
  color: var(--color-1);
  font-family: O_Regular;
  font-size: 14px;
  padding-top: 11PX;
  letter-spacing: 0.25px;
  resize: none;
}

.textarea::placeholder {
  color: #A1A1A1;
  font-family: O_Regular;
  font-size: 14px;
  letter-spacing: 0.25px;
}


.ck {
  display: inline-block;
  position: relative;
  padding-left: 45px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  color: var(--color-1);
  font-family: sarabun_reg;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.25px;
  user-select: none;
}

.ck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  transition: all .3s;
}

.ck-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  border: 2px solid #757575;
  box-sizing: border-box;
  border-radius: 2px;
  background-color: transparent;
  transition: all .3s;
}

.ck:hover input~.ck-checkmark {
  border-color: #ED4247;
}

.ck input:checked~.ck-checkmark {
  background-color: #ED4247;
  border-color: #ED4247;
}

.ck-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.ck input:checked~.ck-checkmark:after {
  display: block;
}

.ck .ck-checkmark:after {
  left: 4px;
  top: 0px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}






.rd {
  display: inline-block;
  position: relative;
  padding-left: 45px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  color: var(--color-1);
  font-family: sarabun_reg;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.25px;
  user-select: none;
}

.rd input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.rd-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  border: 2px solid #757575;
  box-sizing: border-box;
  background-color: transparent;
  transition: all .3s;
  border-radius: 50%;
}

.rd:hover input~.rd-checkmark {
  border-color: #ED4247;
}

.rd input:checked~.rd-checkmark {
  border-color: #ED4247;
  background-color: var(--white-bg);
}

.rd-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.rd input:checked~.rd-checkmark:after {
  display: block;
}

.rd .rd-checkmark:after {
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ED4247;
}



.heart {
  display: inline-block;
  position: relative;
  margin-bottom: 0px;
  cursor: pointer;
  height: 24px;
  width: 24px;
  user-select: none;
}

.heart input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  transition: all .3s;
}

.heart-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background: url(../img/blank-heart.svg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  transition: all .3s;
}

.heart:hover input~.heart-checkmark {
  background: url(../img/hover-heart.svg);
  background-position: center;
  background-size: cover;
}

.heart input:checked~.heart-checkmark {
  background: url(../img/fill-heart.svg);
  background-position: center;
  background-size: cover;
}







.a {
  font-family: sarabun_reg;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  color: #ED4247;
  border-bottom: 1px solid transparent;
  transition: all .3s;
}

.a:hover {
  color: #ED4247;
  text-decoration: none;
  border-color: #ED4247;
}




.date-icon {
  position: absolute;
  bottom: 8px;
  height: 24px;
  width: 24px;
  right: 8px;
  margin-bottom: 0;
  cursor: pointer;
}

.date-icon img {
  height: 24px;
  width: 24px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}




/*navbar css start*/
.top-navbar {
  background-color: var(--white-bg2);
  border-bottom: 1px solid rgba(158, 158, 158, 0.2);
  position: sticky;
  z-index: 888;
  top: 0;
}

.top-navbar .navbar-brand {
  padding: 0;
}

.top-navbar .navbar {
  height: 63px;
  padding-left: 0;
  padding-right: 0;
}

.top-navbar .menu-icon {
  height: 24px;
  width: 24px;
  margin-right: 16px;
  cursor: pointer;
}

.top-navbar .navbar-brand img {
  height: 32px;
  width: auto;
}

.top-navbar .navbar-brand {
  margin-right: 40px;
}

.top-navbar .navbar-nav {
  align-items: center;
  -webkit-align-items: center;
}

.header-search {
  height: 40px;
  width: 448px;
  position: relative;
}

.header-search button {
  outline: 0;
  border: 0;
  box-shadow: none;
  width: 48px;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: transparent;
  padding-left: 20px;
}

.header-search button img {
  height: 24px;
  width: 24px;
}

.header-search input {
  height: 100%;
  width: 100%;
  border: 1px solid var(--border-3);
  box-sizing: border-box;
  border-radius: 80px;
  box-shadow: none;
  padding-left: 48px;
  background-color: transparent;
  font-size: 14px;
  color: var(--color-1);
  font-family: noto_reg;
  letter-spacing: 0.25px;
  padding-right: 20px;
}

.header-search input::placeholder {
  color: var(--color-3)
}

.top-navbar .for-artist,
.top-navbar .register-artist {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  margin-right: 24px;
  display: none;
}

.top-navbar .for-artist span {
  display: block;
  margin-right: 16px;
}

.icon-dropdown {
  cursor: pointer;
}

.icon-dropdown .dropdown-toggle img {
  height: 24px;
  width: 24px;
  display: block;
}

.icon-dropdown.show .dropdown-toggle {
  border-radius: 50%;
  background: rgba(237, 66, 71, 0.2);
}

.icon-dropdown .nav-link {
  padding: 4px !important;
  margin: 4px;
  height: 32px;
  border-radius: 100%;
}

.icon-dropdown .dropdown-toggle::after {
  display: none;
}

.v-line-wrapper .v-line {
  height: 24px;
  width: 1px;
  background: #C4C4C4;
  margin-left: 16px;
  margin-right: 16px;
}

.top-navbar .for-fan {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  padding-left: 8px;
}

.top-navbar .for-fan span {
  display: block;
  margin-right: 16px;
}

.top-navbar .for-fan .fill-btn,
.top-navbar .for-fan .border-btn {
  width: 112px;
}

.top-navbar .for-fan .fill-btn {
  margin-left: 16px;
}

.top-navbar .dropdown-menu {
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 0;
  margin-top: 8px;
  padding: 0;
}

.music-language .dropdown-menu {
  min-width: 312px;
  padding-top: 17px;
  background: var(--dropdown-bg);
}

.music-language .music-header-data {
  padding-left: 24px;
  padding-right: 24px;
}

.music-language .music-header-data h6,
.music-language .music-header-data .h6 {
  margin-bottom: 10px;
}

.music-language .dropdown-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.music-language .dropdown-menu ul li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  padding: 15px 0;
  position: relative;
  border-bottom: 1px solid rgba(158, 158, 158, 0.2);
}

.music-language .dropdown-menu ul li:last-child {
  border: 0;
}

.music-language .dropdown-menu ul li img {
  height: 24px;
  width: 24px;
  margin-right: 16px;
  display: block;
  border-radius: 100%;
}

.m-ck {
  display: inline-block;
  position: absolute;
  padding-left: 0px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 14px;
  line-height: 16px;
  user-select: none;
  right: 16px;
  top: 20px;
}

.m-ck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  transition: all .3s;
}

.m-ck-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  border: 0;
  box-sizing: border-box;
  border-radius: 100%;
  background: var(--bg-3);
  transition: all .3s;
}

.m-ck input:checked~.m-ck-checkmark {
  background: linear-gradient(261.82deg, #FA6400 12.57%, #E0208C 87.43%);
}

.m-ck-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.m-ck input:checked~.m-ck-checkmark:after {
  display: block;
}

.m-ck .m-ck-checkmark::after {
  left: 5px;
  display: block;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.music-btns {
  border-top: 1px solid rgba(158, 158, 158, 0.2);
  ;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.music-btns .fill-btn,
.music-btns .border-btn {
  width: 50%;
  margin: 0 8px;
}

.notification .dropdown-menu {
  min-width: 344px;
  padding-top: 17px;
  left: -100px;
  background: var(--dropdown-bg);
  padding-left: 24px;
  padding-right: 24px;
}

.notification .dropdown-menu h6,
.notification .dropdown-menu .h6 {
  margin-bottom: 2px;
}

.notification .dropdown-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.notification .dropdown-menu ul li {
  border-bottom: 1px solid rgba(158, 158, 158, 0.2);
  padding-top: 24px;
  padding-bottom: 20px;
}

.notification .dropdown-menu ul li:last-child {
  border-bottom: 0;
}

.notification .dropdown-menu ul li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.notification .dropdown-menu ul li img {
  height: 40px;
  width: 40px;
}

.notification .n-data {
  padding-left: 16px;
  width: calc(100% - 40px);
}

.notification .n-data .s1 {
  margin-bottom: 3px;
}

.notification .n-data span {
  margin-bottom: 7px;
  display: block;
  color: var(--color-2);
}

.notification .n-data .caption {
  color: var(--color-2);
}


.my-profile .dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.my-profile .user-icon {
  display: block;
  height: 32px;
  width: 32px;
  object-fit: cover;
  border-radius: 100%;
  margin-right: 8px;
}

.my-profile .down-arrow {
  height: 16px !important;
  width: 16px !important;
  margin-left: 8px;
  display: block;
}

.my-profile .dropdown-toggle::after {
  display: none;
}

.my-profile .nav-link {
  padding-right: 0 !important;
  cursor: pointer;
}

.my-profile .dropdown-menu {
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: var(--dropdown-bg);
  border: 0;
  margin-top: 3px;
  padding: 0;
}

.my-profile .dropdown-menu {
  min-width: 232px;
  padding-top: 10px;
  left: unset;
  right: 0;
  padding-bottom: 14px;
}

.my-profile .dropdown-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.my-profile .dropdown-menu ul li {
  cursor: pointer;
}

.my-profile .dropdown-menu ul li a{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 21px;
  padding-right: 21px;
}

.my-profile .dropdown-menu ul li:hover {
  background: var(--hover-bg);
}

.my-profile .dropdown-menu ul li img {
  display: block;
  height: 24px;
  width: 24px;
  margin-right: 16px;
}

.music-language .dropdown-menu,
.notification .dropdown-menu {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  scrollbar-color: var(--bg-2) var(--scroll-track-bg);
  scrollbar-width: thin;
}

.music-language .dropdown-menu::-webkit-scrollbar,
.notification .dropdown-menu::-webkit-scrollbar {
  width: 4px;
}

.music-language .dropdown-menu::-webkit-scrollbar-track,
.notification .dropdown-menu::-webkit-scrollbar-track {
  background: var(--scroll-track-bg);
}

.music-language .dropdown-menu::-webkit-scrollbar-thumb,
.notification .dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--bg-2);
  border-radius: 2px
}

.music-language .dropdown-menu::-webkit-scrollbar-thumb:hover,
.notification .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: var(--bg-2);
}


/*side menu*/
.sideMenu {
  position: fixed;
  left: -335px;
  top: 0;
  overflow-y: auto;
  background: var(--white-bg);
  width: 335px;
  height: 100vh;
  padding-top: 24px;
  transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  z-index: 999;
  scrollbar-color: var(--bg-2) var(--scroll-track-bg);
  scrollbar-width: thin;
}

.sideMenu.active {
  left: 0;
  transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
}

.scroll-stop {
  z-index: 889;
  position: relative;
  overflow: hidden;
  transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
}

.backBg {
  background-color: var(--back-bg);
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100%;
  z-index: 889;
  transition: all 300ms ease;
}

.backBg.show {
  display: block;
}


.sideMenu::-webkit-scrollbar {
  width: 4px;
}

.sideMenu::-webkit-scrollbar-track {
  background: var(--scroll-track-bg);
}

.sideMenu::-webkit-scrollbar-thumb {
  background: var(--bg-2);
  border-radius: 2px
}

.sideMenu::-webkit-scrollbar-thumb:hover {
  background: var(--bg-2);
}

.side-menu-profile {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  width: 100%;
  padding-left: 23px;
  padding-right: 16px;
  margin-bottom: 18px;
}

.side-menu-profile .user {
  height: 32px;
  width: 32px;
  display: block;
  object-fit: cover;
  border-radius: 100%;
  margin-right: 8px;
}

.side-menu-profile .closeIcons {
  height: 24px;
  width: 24px;
  margin-left: auto;
  cursor: pointer;
}

.first-menu ul,
.second-menu ul,
.profile-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  padding-left: 10px;
  padding-right: 10px;
}

.second-menu h6,
.profile-menu h6,
.second-menu .h6,
.profile-menu .h6 {
  margin-bottom: 10px;
  padding-left: 23px;
  padding-right: 23px;
}

.first-menu ul li a,
.second-menu ul li a,
.profile-menu ul li a {
  text-decoration: none;
  padding: 12px 13px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  transition: all .3s;
  border-radius: 2px;
}

.first-menu ul li a:hover,
.second-menu ul li a:hover,
.profile-menu ul li a:hover {
  cursor: pointer;
  background: var(--bg-5);
}

.first-menu ul li a img,
.second-menu ul li a img,
.profile-menu ul li a img {
  height: 24px;
  width: 24px;
  display: block;
  margin-right: 8px;
}

.msg-count {
  height: 20px;
  width: 20px;
  background: #ED4247;
  border-radius: 100%;
  margin-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  font-size: 14px;
  color: #FFF;
}

.change-mode a:hover {
  background: transparent !important;
  cursor: default !important;
}

.button-cover {
  height: 24px;
  width: 40px;
}

.button-cover:before {
  counter-increment: button-counter;
  content: counter(button-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #d7e3e3;
  font-size: 12px;
  line-height: 1;
  padding: 5px;
}

.knobs, .layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;
  top: 50%;
  width: 40px;
  height: 24px;
  overflow: hidden;
}

.button.r, .button.r .layer {
  border-radius: 100px;
}

.button.b2 {
  border-radius: 2px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background: linear-gradient(11.05deg, #E0208C 2.97%, #FA6400 101.52%);
  opacity: 0.5;
  transition: 0.3s ease all;
  z-index: 1;
}

#button-1 .knobs:before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background-color: var(--white-bg);
  border-radius: 50%;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-1 .checkbox:checked+.knobs:before {
  content: '';
  left: 19px;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
  background-color: var(--white-bg);
}

#button-1 .checkbox:checked~.layer {
  /* background-color: rgba(237, 66, 71, 0.5); */
  opacity: 1;
  background: linear-gradient(11.05deg, #E0208C 2.97%, #FA6400 101.52%);
}

#button-1 .knobs,
#button-1 .knobs:before,
#button-1 .layer {
  transition: 0.3s ease all;
}

.change-mode a .button {
  margin-left: auto;
}

.first-hr {
  width: calc(100% - 46px);
  height: 1px;
  background: rgba(158, 158, 158, 0.2);
  margin-left: auto;
  margin-right: auto;
  margin-top: 13px;
  margin-bottom: 25px;
}


.how-can-block {
  padding-left: 23px;
  padding-right: 23px;
  margin-top: 14px;
  margin-bottom: 24px;
}

.how-can-hr {
  border-top: 1px solid rgba(158, 158, 158, 0.2);
  border-bottom: 1px solid rgba(158, 158, 158, 0.2);
  padding-top: 23px;
  padding-bottom: 23px;
}

.how-can-block a {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: transparent;
  padding: 22px 16px;
  text-decoration: none !important;
}

.how-can-block a img {
  height: 24px;
  width: 24px;
  display: block;
}

.how-can-block a p {
  font-size: 15px;
  line-height: 20px;
  color: var(--color-1);
  font-family: noto_bold;
}

.how-can-block a::after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(261.82deg, #FA6400 12.57%, #E0208C 87.43%);
  opacity: 0.1;
  z-index: -1;
}

.third-menu h6,
.third-menu .h6 {
  margin-bottom: 16px;
  padding-left: 23px;
  padding-right: 23px;
}

.third-menu ul {
  padding: 0;
  margin: 0;
  padding-left: 23px;
  padding-right: 23px;
  list-style: none;
}

.third-menu ul li {
  padding-top: 10px;
  padding-bottom: 10px;
}

.third-menu ul li a {
  text-decoration: none !important;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  font-family: noto_reg;
  color: var(--color-1);
}

.terms-wrapper {
  margin-top: 17px;
  padding-left: 23px;
  padding-right: 23px;
}

.terms-block {
  border-top: 1px solid rgba(158, 158, 158, 0.2);
  border-bottom: 1px solid rgba(158, 158, 158, 0.2);
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.terms-block .dot {
  height: 6px;
  width: 6px;
  background: #C4C4C4;
  border-radius: 100%;
  margin: 0 12px;
}

.terms-block a {
  text-decoration: none;
}

.install-app {
  padding: 22px 23px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.install-app img {
  height: 24px;
  width: 24px;
  display: block;
  margin-right: 8px;
}

.install-app span {
  margin-right: 16px;
  display: block;
}




/*tab css start*/
.tab-wrapper{
  position: sticky;
  top: 64px;
  z-index: 88;
  background: var(--body-color);
}
.tab-section {
  padding: 19px 0;
  scrollbar-width: none;
  overflow-x: scroll;
  /* clip-path: inset(0 0 17px 0); */ 
}
.tab-wrapper .container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.tab-wrapper .container-fluid .tab-section{
  padding-left: 23px;
  padding-right: 23px;
}
.tab-section::-webkit-scrollbar-track {
  border: 0;
  height: 0px;
  width: 0px;
}
.tab-section::-webkit-scrollbar, 
.tab-section::-webkit-scrollbar-thumb {
  width: 0px;
  height: 0px;
  border: 0px solid transparent;
}
.tab-section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0 0px #919eab;
}

.tab-section ul {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  scrollbar-width: none;
  margin-right: 20px;
  padding-right: 20px;
}

.tab-section ul li {
  padding-left: 16px;
  padding-right: 16px;
  display: inline-block;
  white-space: nowrap;
}

.tab-section ul li:first-child {
  padding-left: 0;
}

/* .tab-section ul li:last-child{
  padding-right: 0;
} */
.tab-section ul li .tab-link {
  font-size: 16px;
  line-height: 28px;
  font-family: noto_reg;
  letter-spacing: 0.5px;
  color: var(--color-2);
  text-decoration: none !important;
  position: relative;
  display: block;
  transition: all .3s;
}

.tab-section ul li .tab-link.active,
.tab-section ul li .tab-link:hover {
  font-family: noto_bold;
  color: var(--color-1);
  cursor: pointer;
}

.tab-section ul li .tab-link.active::after,
.tab-section ul li .tab-link:hover::after {
  position: absolute;
  content: '';
  background: linear-gradient(261.82deg, #FA6400 12.57%, #E0208C 87.43%);
  height: 2px;
  width: 100%;
  left: 0;
  bottom: -1px;
}






/*header carousel css start*/
.slider {
  width: 100%;
  margin: 0;
  text-align: center;
  padding: 0;
  color: white;
}

.slider .slide {
  padding: 0;
}

.slider .slide .child-element {
  transition: all 0.2s;
  width: 100%;
  /*height: 320px;*/
  /*margin: 24px 0;*/
  transition: all 0.3s;
}

.slick-track {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.slider .slide .child-element img {
  margin-left: auto;
  height: 320px;
  width: auto;
  display: block;
}

.slider .slide.slick-center .child-element img {
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: 100%;
}

.slider .slide.slick-center+.slick-slide .child-element img {
  margin-left: unset;
  margin-right: auto;
  border-radius: 8px;
}

.slider .slide.slick-center .child-element {
  margin: 0;
  border-radius: 8px;
  /*height: 368px;*/
  max-width: initial;
}

.header-carousel {
  padding-top: 56px;
  overflow: hidden;
}

.header-carousel .owl-carousel .owl-stage-outer {
  overflow: visible;
}

/* proper design start */
/* 
.header-carousel .owl-item.active{
  transform: scale(1.2);
  transform-origin: 0;
}
.header-carousel .owl-item.active.center {
    transform: scale(1.4) !important;
    position: relative;
    transform-origin: center !important;
    z-index: 1;
    transition: all .8s ease;
}
.header-carousel .owl-item.active.center + .owl-item.active{
  transform: scale(1.2);
  transform-origin: center;
} */
/* proper design end */

/* normal design start */
.header-carousel .owl-item.active.center {
  transform: scale(1.4);
  position: relative;
  z-index: 1;
  transition: all .8s ease;
}

.header-carousel .owl-item.active.center img {
  border-radius: 8px;
}

/* normal design end */

.header-carousel .owl-prev {
  position: absolute;
  left: 23px;
  height: 40px;
  width: 40px;
  margin: 0 !important;
  top: calc(50% - 25px);
  transform: translateY(-50%);
  background: url('../img/left-arrow-header.png') !important;
  background-size: cover !important;
  background-position: center !important;
}

.header-carousel .owl-next {
  position: absolute;
  right: 23px;
  height: 40px;
  width: 40px;
  margin: 0 !important;
  top: calc(50% - 25px);
  transform: translateY(-50%);
  background: url('../img/right-arrow-header.png') !important;
  background-size: cover !important;
  background-position: center !important;
}

.header-carousel .owl-prev span,
.header-carousel .owl-next span {
  display: none;
}

.header-carousel .owl-prev.disabled,
.header-carousel .owl-next.disabled {
  display: none;
}

.header-carousel .owl-nav {
  margin-top: 0;
}

.header-carousel .owl-dots {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  height: 48px;
}

.header-carousel .owl-dot span {
  height: 8px !important;
  width: 8px !important;
  background: transparent !important;
  margin: 0 4px !important;
  opacity: 0.5 !important;
  border: 1px solid var(--white-bg);
}

.header-carousel .owl-dot.active span {
  background: var(--white-bg) !important;
  opacity: 1 !important;
}

/* .slick-prev{
  left: 23px;
}
.slick-next{
  right: 23px;
} */




.how-it-work {
  padding-top: 74px;
  padding-bottom: 81px;
}

.how-it-work h4, .how-it-work .h4 {
  margin-bottom: 6px;
}

.how-it-work h4+span, .how-it-work .h4+span {
  max-width: 870px;
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
}

.how-it-work .mb-21 {
  display: block;
  margin-bottom: 21px;
}

.how-it-work .mb-40 {
  display: block;
  margin-bottom: 40px;
}

.hiw-fan-box,
.hiw-artist-box{
  border-radius: 8px;
  padding: 36px 40px 40px;
}
.hiw-fan-box{
  background-color: rgba(250, 100, 0, 0.08);
}
.hiw-artist-box{
  background-color: rgba(224, 32, 140, 0.08);
}

.hiw-wrapper {
  overflow: hidden;
}

.hiw-wrapper>.row {
  margin-left: -20px;
  margin-right: -20px;
}

.hiw-wrapper .custome-column {
  padding-left: 20px;
  padding-right: 20px;
}

.hiw-wrapper h5,
.hiw-wrapper .h5 {
  margin-bottom: 9px;
}

.hiw-wrapper h5+span,
.hiw-wrapper .h5+span {
  margin-bottom: 28px;
  display: block;
}
.hiw-box img{
  border-radius: 8px;
}

/* .hiw-wrapper .custome-column:first-child::after {
  position: absolute;
  content: '';
  top: 0;
  right: -0.5px;
  height: 100%;
  width: 1px;
  background: var(--scroll-track-bg);
} */

.hiw-box {
  position: relative;
}

.hiw-box::after {
  position: absolute;
  content: '';
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  height: 70%;
  width: 2px;
  background: url(../img/Line.svg);
  background-position: center;
  background-size: cover;
}

.hiw-box {
  overflow: hidden;
}

.hiw-box .mb-54 {
  margin-bottom: 40px;
}

.hiw-box .mb-54:last-child {
  margin-bottom: 0;
}

.hiw-box .row {
  margin-left: -40px;
  margin-right: -40px;
}

.hiw-box .col-12 {
  padding-left: 40px;
  padding-right: 40px;
}

.hiw-content {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  z-index: 2;
}

.hiw-content .s1 {
  margin-bottom: 11px;
}

.hiw-content span {
  display: block;
}

.hiw-number-left {
  background: linear-gradient(261.82deg, #E0208C 12.57%, #FA6400 87.43%);
  color: #FFF;
  letter-spacing: 0.15px;
  height: 32px;
  width: 32px;
  font-size: 16px;
  font-family: noto_bold;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  border-radius: 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -56px;
}

.hiw-number-right {
  background: linear-gradient(261.82deg, #E0208C 12.57%, #FA6400 87.43%);
  color: #FFF;
  letter-spacing: 0.15px;
  height: 32px;
  width: 32px;
  font-size: 16px;
  font-family: noto_bold;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  border-radius: 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -56px;
}

.why-choose-fanclub {
  padding-top: 74px;
  padding-bottom: 48px;
  overflow: hidden;
  background: var(--light-bg);
}

.why-choose-fanclub .heading {
  margin-bottom: 52px;
}

.why-choose-fanclub .heading h4,
.why-choose-fanclub .heading .h4 {
  margin-bottom: 6px;
}

.why-choose-fanclub .heading span {
  color: var(--color-2);
}

.choose-column-section {
  padding-left: 44px;
  padding-top: 114px;
}

.choose-music-box {
  margin-bottom: 35px;
  text-align: center;
}

.choose-music-box img {
  display: inline-block;
  margin-bottom: 21px;
  height: 48px;
  width: 48px;
}

.music-data-row {
  margin-left: -28px;
  margin-right: -28px;
}

.music-data-row .col-xs-12 {
  padding-left: 28px;
  padding-right: 28px;
}

.music-icon-data {
  margin-bottom: 60px;
}

.music-icon-data img {
  height: 48px;
  width: 48px;
  display: block;
  margin-bottom: 21px;
}

.music-icon-data .s1 {
  margin-bottom: 11px;
}

.music-icon-data span {
  color: var(--color-2);
  display: block;
}

.pl-32 {
  padding-left: 32px;
}

.column-img {
  column-count: 2;
  column-gap: 24px;
}

.column-img .for-pad:first-child {
  padding-top: 24px;
}

.column-img img {
  margin-bottom: 24px;
  border-radius: 8px;
}







.subscribe {
  padding-top: 80px;
  padding-bottom: 76px;
}

.subscribe-block {
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 1096px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.sub-overlay {
  position: absolute;
  padding: 16px;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-direction: column;
}

.sub-overlay h4,
.sub-overlay .h4 {
  color: var(--pure-white-1);
}

.sub-overlay p {
  color: var(--pure-white-1);
  margin-bottom: 26px;
}

.sub-overlay .fill-btn {
  width: 200px;
}



.fanclub-artist {
  padding-bottom: 70px;
  overflow: hidden;
}

.slider-header {
  margin-bottom: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.rounded-img-carousel {
  position: relative;
}

.rounded-img-carousel .owl-carousel {
  width: calc(100% - 94px);
  position: static;
}

.rounded-img-carousel .item img {
  border-radius: 100%;
  display: block;
  margin-bottom: 13px;
}

.rounded-img-carousel .item {
  display: block;
  text-align: center;
  transition: all .3s ease;
}

.rounded-img-carousel .item:hover {
  transform: scale(1.1);
}

.rounded-img-carousel .owl-carousel .owl-stage-outer {
  padding-left: 23px;
  overflow: visible;
}

.rounded-img-carousel .owl-theme .owl-nav {
  margin-top: 0;
}

.rounded-img-carousel .owl-prev {
  position: absolute;
  left: 23px;
  height: 40px;
  width: 40px;
  margin: 0 !important;
  top: calc(50% - 15px);
  transform: translateY(-50%) rotate(-180deg);
  background: url('../img/slider-arrow.svg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.rounded-img-carousel .owl-next {
  position: absolute;
  right: 23px;
  height: 40px;
  width: 40px;
  margin: 0 !important;
  top: calc(50% - 15px);
  transform: translateY(-50%);
  background: url('../img/slider-arrow.svg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.rounded-img-carousel .owl-prev span,
.rounded-img-carousel .owl-next span {
  display: none;
}

.rounded-img-carousel .owl-prev.disabled,
.rounded-img-carousel .owl-next.disabled {
  display: none;
}



.trending-now {
  padding-bottom: 65px;
  overflow: hidden;
}

.square-img-carousel {
  position: relative;
}

.square-img-carousel .owl-carousel {
  width: calc(100% - 94px);
  position: static;
}

.square-img-carousel .item img {
  display: block;
  margin-bottom: 13px;
}

.square-img-carousel .item .caption {
  margin-top: 6px;
}

.square-img-carousel .item .caption p {
  white-space: nowrap;
  display: block;
  font-family: system-ui;
  width: 100%;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: var(--color-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.square-img-carousel .s1,
.rounded-img-carousel .s1 {
  font-weight: 600;
  display: block;
  display: -webkit-box;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.square-img-carousel .item {
  display: block;
  transition: all .3s ease;
}

.square-img-carousel .item:hover {
  transform: scale(1.1);
}

.square-img-carousel .owl-carousel .owl-stage-outer {
  padding-left: 23px;
  overflow: visible;
}

.square-img-carousel .owl-theme .owl-nav {
  margin-top: 0;
}

.square-img-carousel .owl-prev {
  position: absolute;
  left: 23px;
  height: 40px;
  width: 40px;
  margin: 0 !important;
  top: calc(50% - 15px);
  transform: translateY(-50%) rotate(-180deg);
  background: url('../img/slider-arrow.svg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.square-img-carousel .owl-next {
  position: absolute;
  right: 23px;
  height: 40px;
  width: 40px;
  margin: 0 !important;
  top: calc(50% - 15px);
  transform: translateY(-50%);
  background: url('../img/slider-arrow.svg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.square-img-carousel .owl-prev span,
.square-img-carousel .owl-next span {
  display: none;
}

.square-img-carousel .owl-prev.disabled,
.square-img-carousel .owl-next.disabled {
  display: none;
}



.double-img-carousel {
  position: relative;
}

.double-img-carousel .owl-carousel {
  width: calc(100% - 94px);
  position: static;
}

.double-img-carousel .item .img-content {
  overflow: hidden;
  border-radius: 4px;
  display: block;
  position: relative;
  margin-bottom: 24px;
}

.double-img-carousel .item .img-content:last-child {
  margin-bottom: 0;
}

.double-img-carousel .img-content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding-left: 16px;
  padding-bottom: 11px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.58%, #000000 100%);
}

.double-img-carousel .img-content-overlay p {
  color: var(--pure-white-1);
}

.double-img-carousel .item .img-content img {
  display: block;
}

.double-img-carousel .owl-carousel .owl-stage-outer {
  padding-left: 23px;
  overflow: visible;
}

.double-img-carousel .owl-theme .owl-nav {
  margin-top: 0;
}

.double-img-carousel .owl-prev {
  position: absolute;
  left: 23px;
  height: 40px;
  width: 40px;
  margin: 0 !important;
  top: 50%;
  transform: translateY(-50%) rotate(-180deg);
  background: url('../img/slider-arrow.svg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.double-img-carousel .owl-next {
  position: absolute;
  right: 23px;
  height: 40px;
  width: 40px;
  margin: 0 !important;
  top: 50%;
  transform: translateY(-50%);
  background: url('../img/slider-arrow.svg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.double-img-carousel .owl-prev span,
.double-img-carousel .owl-next span {
  display: none;
}

.double-img-carousel .owl-prev.disabled,
.double-img-carousel .owl-next.disabled {
  display: none;
}



.new-on-fanclub {
  padding-bottom: 71px;
  overflow: hidden;
}

.new-on-fanclub .square-img-carousel .item img {
  border-radius: 8px;
}

.my-playlist {
  padding-bottom: 71px;
  overflow: hidden;
}

.my-artist {
  padding-bottom: 71px;
  overflow: hidden;
}

.new-artist2 {
  padding-bottom: 71px;
  overflow: hidden;
}

.best-of-fanclub {
  padding-bottom: 71px;
  overflow: hidden;
}

.top-artist {
  padding-bottom: 71px;
  overflow: hidden;
}

.featur-artist {
  padding-bottom: 71px;
  overflow: hidden;
}

.seasonal-playlist {
  padding-bottom: 71px;
  overflow: hidden;
}

.fanclub-playlist {
  padding-bottom: 71px;
  overflow: hidden;
}

.fanclub-playlist {
  padding-bottom: 71px;
  overflow: hidden;
}

.fanclub-playlist .square-img-carousel .item img {
  border-radius: 8px;
}

.genres {
  padding-bottom: 76px;
  overflow: hidden;
}

.new-artist {
  padding-bottom: 83px;
  overflow: hidden;
}

.collection-wrapper .owl-stage-outer {
  overflow: visible;
}

.my-collection {
  padding-bottom: 76px;
  overflow: hidden;
  padding-left: 23px;
  padding-right: 23px;
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
}

.pt-76 {
  padding-top: 76px;
}

.collection-box {
  background: var(--bg-5);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  margin-bottom: 24px;
}

.collection-box:last-child {
  margin-bottom: 0 !important;
}

.collection-box .c-img {
  height: 48px !important;
  width: 48px !important;
  display: block !important;
  border-radius: 4px;
}

.collection-data {
  width: calc(100% - 72px);
  padding-left: 16px;
}

.collection-data span {
  display: block;
  margin-bottom: 4px;
  display: -webkit-box;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collection-data .caption {
  color: var(--color-2);
  display: -webkit-box;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collection-box .c-icon {
  height: 24px;
  width: 24px;
  display: block;
  cursor: pointer;
}

.remove-top-padding {
  padding-top: 0 !important;
}



.my-collection .owl-carousel .owl-stage-outer {
  overflow: visible;
}

.my-collection .owl-theme .owl-nav {
  margin-top: 0;
}

.my-collection .owl-carousel.owl-drag .owl-item {
  transform: unset;
  /* display: none; */
}

.my-collection .owl-carousel.owl-drag .owl-item.active {
  display: block;
}

.my-collection .owl-prev {
  position: absolute;
  left: 0px;
  height: 40px;
  width: 40px;
  margin: 0 !important;
  top: 50%;
  transform: translateY(-50%) rotate(-180deg);
  background: url('../img/slider-arrow.svg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.my-collection .owl-next {
  position: absolute;
  right: 0;
  height: 40px;
  width: 40px;
  margin: 0 !important;
  top: 50%;
  transform: translateY(-50%);
  background: url('../img/slider-arrow.svg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.my-collection .owl-prev span,
.my-collection .owl-next span {
  display: none;
}

.my-collection .owl-prev.disabled,
.my-collection .owl-next.disabled {
  display: none;
}





/*footer css start*/
footer {
  padding-top: 53px;
  background: var(--light-bg);
}

.footer-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.footer-block {
  margin-right: 24px;
}

.footer-block:last-child {
  margin-right: 0;
  padding-right: 62px;
}

.footer-block .s2 {
  margin-bottom: 13px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.15px;
  position: relative;
}

.footer-block ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-block ul li {
  padding: 6px 0;
}

.footer-block ul li a {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  color: var(--color-2);
  font-family: noto_reg;
  transition: all .3s;
  display: block;
}

.footer-block ul li a:hover {
  text-decoration: none;
  color: var(--color-1);
  transform: translateX(10px);
}

.footer-block .a {
  margin-top: 6px;
  display: inline-block;
}



.copy-right {
  margin-top: 36px;
  border-top: 1px solid var(--scroll-track-bg);
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.copy-right .caption {
  color: var(--color-3);
  margin: 3px 0;
  text-decoration: none !important;
  transition: all .3s;
}

.copy-right a.caption:hover {
  color: var(--color-1);
}

.follow-block .s2 {
  margin-bottom: 19px;
}

.social-icon {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  margin-bottom: 38px;
}

.social-icon a {
  display: block;
  margin-right: 16px;
}

.social-icon a:last-child {
  margin-right: 0;
}

.social-icon a img {
  height: 32px;
  width: 32px;
  display: block;
}

.social-icon a img:hover,
.app-store a img:hover {
  opacity: 0.6;
  transition: all .3s;
}

.app-store {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.app-store a {
  display: block;
  margin-right: 16px;
}

.app-store a:last-child {
  margin-right: 0;
}

.app-store a img {
  height: 24px;
  width: 24px;
  display: block;
}






/* new design changes 10/11/2021 */

.theme-icon {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
}

.theme-icon .ck-checkmark {
  height: 24px;
  width: 24px;
  background-color: transparent !important;
  border: 0 !important;
  background: url(../img/moon.svg);
  background-position: center;
  background-size: cover;
}

.theme-icon input:checked~.ck-checkmark::after {
  display: none !important;
}

.theme-icon input:checked~.ck-checkmark {
  background: url(../img/Sun.svg);
  background-position: center;
  background-size: cover;
}


.pt-16 {
  padding-top: 16px;
}

.artist-introduce {
  margin-bottom: 11px;
}

.artist-introduce .rd {
  margin-bottom: 0;
  padding-left: 30px;
  margin-right: 29px;
}

.artist-introduce .rd:last-child {
  margin-right: 0;
}

.artist-introduce>span {
  display: block;
  margin-bottom: 15px;
}

.social-handler {
  margin-top: 33px;
}

.social-handler h6,
.social-handler .h6 {
  margin-bottom: 3px;
}

.social-user-box {
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.social-user-box .social-name-img {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.social-user-box .social-name-img img {
  display: block;
  height: 32px;
  width: 32px;
  margin-right: 8px;
}

.social-user-box .social-name-img span {
  display: block;
  font-family: sarabun_reg;
}

.social-user-box input {
  border: 0;
  outline: none;
  box-shadow: none;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  color: var(--color-2);
  text-align: right;
  background: transparent;
}

.register-artist.create-account .fill-btn {
  margin-top: 32px;
}





/* .my-playlist .container-fluid,
.my-artist .container-fluid,
.trending-now .container-fluid,
.new-artist2 .container-fluid,
.best-of-fanclub .container-fluid,
.top-artist .container-fluid,
.genres .container-fluid,
.seasonal-playlist .container-fluid,
.fanclub-playlist .container-fluid,
.featur-artist .container-fluid{
  max-width: 100%;
  padding-left: 23px;
  padding-right: 23px;
} */

.no-data-found {
  padding: 45px 0;
}

.loader-bg {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
}

.loader-bg.d-none {
  display: none;
}

.loader-bg img {
  width: 50px;
  height: auto;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
  transition: all .3s ease-in-out;
  border-radius: 100%;
}

.owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:hover {
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 0px 5px rgba(73, 35, 35, 0.1);
  -moz-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1);
  transition: all .3s ease-in-out;
}

.dark-theme .notification a img {
  filter: unset !important;
  opacity: 1 !important;
}

.artist-profile-slider{
  padding-bottom: 70px;
}
.artist-profile-slider .artist-profile-banner{

}
.artist-profile-slider .add-banner-btn{
  width: 200px;
  margin-top: 32px;
}
.artist-profile-slider .this-img-wrapper{
  position: relative;
}
.artist-profile-slider .this-img-wrapper .deleteBanner{
  position: absolute;
  top: 16px;
  right: 16px;
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--white-bg);
  border-radius: 100%;
}
.artist-profile-slider .this-img-wrapper .deleteBanner img{
  height: 18px;
  width: 18px;
}
.artist-profile-slider .this-img-wrapper img{
  border-radius: 8px;
}

.artist-profile-slider .item{
  position: relative;
}

.artist-profile-slider .active.center .item .deleteBanner{
  position: absolute;
  top: 10px;
  right: 10px;
  height: 18px;
  width: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--white-bg);
  border-radius: 100%;
}

.artist-profile-slider .active.center .item .deleteBanner img{
  height: 14px;
  width: 14px;
}



.miniplayer-video{
  width: 400px;
  height: 225px;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  background: black;
}
.miniplayer-video video{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.play-pause-conterols img{
  height: 24px;
  width: 24px;
}
.play-pause-conterols{
  position: absolute;
  top: 50%;
  left: 50%;
  background: #222428;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  box-shadow: 0 0px 1px 5px rgba(0,0,0,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
  display: none;
}


.play-pause-conterols .video-pause{
  display: none !important;
}
.play-pause-conterols.playing .video-pause{
  display: block !important;
}
.play-pause-conterols.playing .video-play{
  display: none !important;
}

.miniplayer-video .close-video{
  height: 24px;
  width: 24px;
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
}

.miniplayer-video .expand-video{
  height: 24px;
  width: 24px;
  position: absolute;
  top: 10px;
  left: 10px;
  display: none;
}

.miniplayer-video:hover .play-pause-conterols{
  display: flex;
}
.miniplayer-video:hover .close-video,
.miniplayer-video:hover .expand-video{
  display: block;
}


.view-btn-links{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.view-btn-links .view-profile{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 24px;
}
.view-btn-links .view-profile p{
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.0953967px;
  color: var(--color-1);
  font-weight: 700;
  font-family: 'Noto Sans JP', sans-serif;
  margin-right: 8px;
}
.view-btn-links .view-profile a{
  display: block;
  height: 40px;
  width: 40px;
}


.cookie-page p{
  font-family: noto_bold;
  color: var(--color-1);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.0953967px;
  line-height: 24px;
}
.cookie-page ul{
  padding-left: 26px;
  margin-bottom: 26px;
}
.cookie-page ul li{
  font-family: noto_reg;
  color: var(--color-2);
  font-size: 14px;
  letter-spacing: 0.25px;
  line-height: 24px;
  position: relative;
}
.cookie-page ul li a{
  word-break: break-all;
}
.cookie-page ul li a:hover{
  color: var(--color-1) !important;
  cursor: pointer;
}
.cookie-page ul li::before{
  position: absolute;
  content: '';
  height: 4px;
  width: 4px;
  background-color: var(--color-1);
  border-radius: 100%;
  top: 11px;
  left: -15px;
}

.cookie-table{
  margin-bottom: 26px;
}
.cookie-table table {
  width: 100%;
  border-collapse: collapse;
}
.cookie-table table tr:first-child td {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.0953967px;
  color: var(--color-1);
  font-family: noto_bold;
  background-color: transparent !important;
}
.cookie-table table td:first-child{
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.0953967px;
  color: var(--color-1);
  font-family: noto_bold;
}
.cookie-table table tr td {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 15px;
  padding-bottom: 15px;
  font-family: noto_reg;
  color: var(--color-2);
  font-size: 14px;
  letter-spacing: 0.25px;
  line-height: 24px;
  vertical-align: top;
  position: relative;
  border-bottom: 1px solid var(--border-6);
}

.cookie-table table tr td a{
  word-break: break-all;
}
.cookie-table table tr td a:hover{
  color: var(--color-1) !important;
}


.cookie-alert{
  padding: 24px;
  background-color: var(--cookie-color);
  width: 100%;
  border: 1px solid #ED4247;
  position: fixed;
  bottom: -200px;
  left: 0;
  right: 0;
  animation: cookieAlert 1s ease-in;
  animation-fill-mode: forwards;
}
.cookie-alert.hide{
  animation: cookieClose 1s ease-in;
  animation-fill-mode: forwards;
}
.cookie-alert img{
  position: absolute;
  height: 20px;
  width: 20px;
  top: 5px;
  right: 5px;
  cursor: pointer;
  opacity: 0.8;
  transition: all 300ms ease-in;
}
.cookie-alert img:hover{
  opacity: 1;
}
.cookie-alert p{
  font-size: 14px;
  letter-spacing: 0.25px;
  line-height: 24px;
}
.cookie-alert p a{
  color: var(--color-1);
  font-family: noto_bold;
  font-weight: bold;
}
.cookie-alert p a:hover{
  text-decoration: underline;
}
@keyframes cookieAlert{
  0% {bottom: -200px;}
  100% {bottom: 0px;}
}

@keyframes cookieClose{
  0% {bottom: 0px;}
  100% {bottom: -200px;}
}





/* style 2 css start */

.signin-page {
  padding-top: 74px;
  max-width: 352px;
  margin-inline: auto;
  padding-bottom: 84px;
  margin-left: auto;
  margin-right: auto;
}

.signin-page h4, 
.signin-page .h4 {
  margin-bottom: 9px;
}

.signin-page>p {
  margin-bottom: 9px;
}

.signin-page .inputs-group {
  margin-bottom: 16px;
}

.signin-page .inputs-group:last-of-type {
  margin-bottom: 0;
}

.signin-page .forgot-psw {
  margin-top: 8px;
  text-align: right;
}

.signin-page .forgot-psw a {
  display: inline-block;
}

.signin-page .forgot-psw a span {
  color: #ed4247;
  border-bottom: 0;
  transition: all 0.3s;
  cursor: pointer;
}

.signin-page .forgot-psw a span:hover {
  border-bottom: 1px solid #ed4247;
}

.signin-page .otp,
.signin-page .create-link,
.signin-page .login-with-psw {
  text-align: center;
  margin-top: 28px;
}

.signin-page .otp span,
.signin-page .create-link span,
.signin-page .login-with-psw span {
  display: inline-block;
}

.signin-page .otp span a,
.signin-page .create-link span a,
.signin-page .login-with-psw span a {
  color: #ed4247;
  border-bottom: 0;
  display: inline-block;
  margin-left: 4px;
  transition: all 0.3s;
  cursor: pointer;
}

.signin-page .otp span a:hover,
.signin-page .create-link span a:hover,
.signin-page .login-with-psw span a:hover {
  border-bottom: 1px solid #ed4247;
}

.signin-page .login-with-psw {
  margin-top: 40px;
}

.signin-page .fill-btn {
  width: 100%;
  margin-top: 20px;
}

.signin-page .create-link {
  margin-top: 28px;
}

.forgot-password,
.reset-password {
  padding-top: 74px;
  max-width: 352px;
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 84px;
}

.forgot-password h4,
.reset-password h4,
.forgot-password .h4,
.reset-password .h4 {
  margin-bottom: 9px;
}

.forgot-password>p,
.reset-password>p {
  margin-bottom: 9px;
}

.forgot-password .inputs-group,
.reset-password .inputs-group {
  margin-bottom: 16px;
}

.forgot-password .inputs-group:last-of-type,
.reset-password .inputs-group:last-of-type {
  margin-bottom: 0;
}

.forgot-password .still-need-help,
.reset-password .still-need-help {
  margin-top: 8px;
  text-align: right;
}

.forgot-password .still-need-help a,
.reset-password .still-need-help a {
  display: inline-block;
}

.forgot-password .still-need-help a span,
.reset-password .still-need-help a span {
  color: #ed4247;
  border-bottom: 0;
  transition: all 0.3s;
  cursor: pointer;
}

.forgot-password .still-need-help a span:hover,
.reset-password .still-need-help a span:hover {
  border-bottom: 1px solid #ed4247;
}

.forgot-password .fill-btn,
.reset-password .fill-btn {
  width: 100%;
  margin-top: 40px;
}

.otp-page {
  padding-top: 74px;
  max-width: 352px;
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 84px;
}

.otp-page h4,
.otp-page .h4 {
  margin-bottom: 9px;
}

.otp-page>p {
  margin-bottom: 2px;
}

.otp-page .email-edit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  margin-bottom: 12px;
}

.otp-page .email-edit a {
  display: inline-block;
  margin-left: 8px;
}

.otp-page .otp-input {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 56px;
}

.otp-page .otp-input input {
  width: calc(25% - 12px);
  height: 50px;
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border-4);
  display: block;
  text-align: center;
  background: transparent;
  color: var(--color-1);
  font-size: 24px;
  font-family: noto_bold;
  letter-spacing: 0;
}

.otp-page .otp-input input:focus {
  border-bottom-color: var(--border-1);
}

.otp-page .resend-otp {
  text-align: center;
  margin-top: 40px;
}

.otp-page .resend-otp span {
  display: inline-block;
}

.otp-page .resend-otp span a {
  color: #ed4247;
  border-bottom: 0;
  display: inline-block;
  margin-left: 4px;
  transition: all 0.3s;
  cursor: pointer;
}

.otp-page .resend-otp span a:hover {
  border-bottom: 1px solid #ed4247;
}

.otp-page .fill-btn {
  width: 100%;
  margin-top: 20px;
}

.create-account {
  padding-top: 74px;
  max-width: 352px;
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 84px;
}

.create-account h4,
.create-account .h4 {
  margin-bottom: 9px;
}

.create-account>p {
  margin-bottom: 5px;
}

.create-account .inputs-group {
  margin-bottom: 16px;
}

.create-account .inputs-group:last-of-type {
  margin-bottom: 0;
}

.create-account .label-select {
  margin-bottom: 16px;
}

.create-account .agree-to {
  text-align: left;
  margin-top: 16px;
}

.create-account .agree-to span {
  display: inline-block;
}

.create-account .agree-to span a {
  color: #ed4247;
  border-bottom: 0;
  display: inline-block;
  transition: all 0.3s;
  cursor: pointer;
}

.create-account .agree-to span a:hover {
  border-bottom: 1px solid #ed4247;
}

.create-account .fill-btn {
  width: 100%;
  margin-top: 24px;
}

.create-account .login-link {
  text-align: center;
  margin-top: 24px;
}

.create-account .login-link span {
  display: inline-block;
}

.create-account .login-link span a {
  color: #ed4247;
  border-bottom: 0;
  display: inline-block;
  margin-left: 4px;
  transition: all 0.3s;
  cursor: pointer;
}

.create-account .login-link span a:hover {
  border-bottom: 1px solid #ed4247;
}

.breadCrums {
  padding: 16px 0;
}

.breadCrums ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  flex-wrap: wrap;
}

.breadCrums ul li {
  font-weight: 500;
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-2);
  font-family: noto_reg;
}

.breadCrums ul li a {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: var(--color-1);
  font-family: noto_reg;
  display: inline-block;
  margin-right: 12px;
  padding-right: 16px;
  position: relative;
}

.breadCrums ul li a::after {
  position: absolute;
  content: "";
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 8px;
  background: url(../img/Vector.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.terms-condition,
.privacy-policy {
  padding-bottom: 50px;
}

.terms-condition .breadCrums,
.privacy-policy .breadCrums {
  margin-bottom: 9px;
}

.terms-condition h5,
.privacy-policy h5,
.terms-condition .h5,
.privacy-policy .h5 {
  margin-bottom: 17px;
}

.terms-condition p,
.privacy-policy p {
  margin-bottom: 10px;
}

.terms-condition span,
.privacy-policy span {
  margin-bottom: 26px;
  display: block;
  color: var(--color-2);
}

.textarea-group span {
  margin-top: 4px;
  letter-spacing: 0.4px;
  color: var(--color-2);
  font-size: 12px;
  line-height: 16px;
  font-family: sarabun_reg;
  display: block;
  margin-bottom: 0;
}

.textarea-group textarea {
  width: 100%;
  outline: none;
  padding: 0px;
  padding-top: 6px;
  height: 35px;
  color: var(--color-1);
  font-family: sarabun_reg;
  font-size: 14px;
  letter-spacing: 0.25px;
  border: 0;
  border-bottom: 1px solid var(--border-4);
  border-radius: 0px;
  background-color: var(--white-bg);
}

.textarea-group textarea::placeholder {
  color: var(--color-2);
}

.contact-us {
  padding-top: 74px;
  max-width: 352px;
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 84px;
}

.contact-us h4,
.contact-us .h4 {
  margin-bottom: 9px;
}

.contact-us>p {
  margin-bottom: 19px;
}

.contact-us .inputs-group {
  margin-bottom: 16px;
}

.contact-us .fill-btn {
  width: 100%;
  margin-top: 24px;
}

.contact-us .follow-us {
  margin-top: 44px;
}

.contact-us .follow-us h5,
.contact-us .follow-us .h5 {
  margin-bottom: 17px;
}

.contact-us .follow-us .contact-social {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.contact-us .follow-us .contact-social a {
  display: block;
  height: 32px;
  width: 32px;
  margin-right: 12px;
}

.contact-us .follow-us .contact-social a:last-child {
  margin-right: 0;
}

.about-us {
  padding-bottom: 64px;
}

.about-us .breadCrums {
  padding: 19px 0;
  margin-bottom: 2px;
}

.about-us .breadCrums li {
  line-height: 16px;
  font-size: 12px;
}

.about-us .breadCrums li a {
  line-height: 16px;
  letter-spacing: 0.4px;
}

.about-us .about-banner {
  border-radius: 8px;
  margin-bottom: 28px;
}

.about-us .about-banner img {
  display: block;
}

.about-us .about-fanclub {
  margin-bottom: 35px;
}

.about-us .about-fanclub h5,
.about-us .about-fanclub .h5 {
  margin-bottom: 9px;
}

.about-us .about-fanclub span {
  color: var(--color-2);
}

.about-us .our-value h5,
.about-us .our-value .h5 {
  margin-bottom: 14px;
}

.about-us .our-value .row-5 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 -12px;
}

.about-us .our-value .row-5 .column {
  width: 20%;
  padding: 0 12px;
}

.about-us .our-value .our-value-box {
  background: var(--bg-5);
  border-radius: 8px;
  padding: 24px 14px 21px;
  text-align: center;
  margin-bottom: 24px;
  min-height: 136px;
}

.about-us .our-value .our-value-box img {
  width: 40px;
  height: 40px;
  display: inline-block;
  margin-bottom: 19px;
}

.about-us .our-value .our-value-box p {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-1);
  font-family: noto_bold;
  /* margin-bottom: 10px; */
}

.about-us .our-value .our-value-box span {
  font-size: 11px;
  font-family: noto_reg;
  line-height: 13px;
  display: inline-block;
  color: var(--color-2);
}

.subscription-yer-no {
  padding-top: 74px;
  max-width: 352px;
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 88px;
}

.subscription-yer-no h4,
.subscription-yer-no .h4 {
  margin-bottom: 9px;
  white-space: nowrap;
}

.subscription-yer-no>p {
  margin-bottom: 33px;
}

.subscription-yer-no .introduce span {
  display: block;
  margin-bottom: 15px;
}

.subscription-yer-no .introduce .radio-group .rd {
  padding-left: 30px;
  margin-right: 26px;
  margin-bottom: 11px;
}

.subscription-yer-no .introduce .radio-group .rd:last-child {
  margin-right: 0;
}

.subscription-yer-no .yes-select,
.subscription-yer-no .no-select {
  display: none;
}

.subscription-yer-no .yes-select.show,
.subscription-yer-no .no-select.show {
  display: block;
}

.subscription-yer-no .choose-plan-wrapper h6,
.subscription-yer-no .choose-plan-wrapper .h6 {
  margin-top: 33px;
  margin-bottom: 10px;
}

.subscription-yer-no .choose-plan-wrapper .rd-plan {
  display: block;
  position: relative;
  margin-bottom: 16px;
  cursor: pointer;
  height: 96px;
  user-select: none;
  z-index: 1;
}

.subscription-yer-no .choose-plan-wrapper .rd-plan input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.subscription-yer-no .choose-plan-wrapper .rd-plan-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
  z-index: -1;
  transition: all 0.3s;
  border-radius: 8px;
}

.subscription-yer-no .choose-plan-wrapper .rd-plan-checkmark::after {
  position: absolute;
  content: "";
  top: 1px;
  left: 1px;
  z-index: 2;
  border-radius: 6px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: var(--white-bg);
}

.subscription-yer-no .choose-plan-wrapper .rd-plan-checkmark::before {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  z-index: 1;
  border-radius: 7px;
  width: 100%;
  height: 100%;
  background: var(--bg-6);
}

.subscription-yer-no .choose-plan-wrapper .paln-data {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  position: relative;
  z-index: 5;
}

.subscription-yer-no .choose-plan-wrapper .paln-data .ck-value {
  height: 24px;
  width: 24px;
  border-radius: 100%;
  border: 1.5px solid var(--border-5);
}

.subscription-yer-no .choose-plan-wrapper .paln-data .plan-inner-data {
  width: calc(100% - 24px);
  padding-left: 16px;
}

.subscription-yer-no .choose-plan-wrapper .paln-data .plan-inner-data p {
  margin-bottom: 3px;
}

.subscription-yer-no .choose-plan-wrapper .paln-data .plan-inner-data span {
  color: var(--color-2);
}

.subscription-yer-no .choose-plan-wrapper .rd-plan:hover input~.rd-plan-checkmark::before {
  background: linear-gradient(261.82deg, #fa6400 12.57%, #e0208c 87.43%);
}

.subscription-yer-no .choose-plan-wrapper .rd-plan:hover input~.rd-plan-checkmark .ck-value {
  background: url(../img/rd-fill.png);
  background-position: center;
  background-size: cover;
  border: 0;
}

.subscription-yer-no .choose-plan-wrapper .rd-plan input:checked~.rd-plan-checkmark::before {
  background: linear-gradient(261.82deg, #fa6400 12.57%, #e0208c 87.43%);
}

.subscription-yer-no .choose-plan-wrapper .rd-plan input:checked~.rd-plan-checkmark .ck-value {
  background: url(../img/rd-fill.png);
  background-position: center;
  background-size: cover;
  border: 0;
}

.subscription-yer-no .fill-btn {
  width: 100%;
  margin-top: 8px;
}

.payment-page {
  padding-top: 74px;
  max-width: 352px;
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 84px;
}

.payment-page h4,
.payment-page .h4 {
  margin-bottom: 9px;
}

.payment-page>p {
  margin-bottom: 50px;
}

.payment-page .card-detail h6,
.payment-page .card-detail .h6 {
  margin-bottom: 10px;
}

.payment-page .card-detail .note {
  margin-top: 19px;
  color: var(--color-3);
  color: #ed4247;
}

.payment-page .card-detail .note span {
  color: #ed4247;
}

.payment-page .billing-address {
  margin-top: 46px;
}

.payment-page .billing-address h6,
.payment-page .billing-address .h6 {
  margin-bottom: 10px;
}

.payment-page .inputs-group {
  margin-bottom: 16px;
}

.payment-page .inputs-group:last-of-type {
  margin-bottom: 0;
}

.payment-page .fill-btn {
  width: 100%;
  margin-top: 40px;
}

.upcoming-event {
  padding-bottom: 64px;
}

.upcoming-event .breadCrums {
  padding: 19px 0;
  margin-bottom: 0px;
}

.upcoming-event .breadCrums li {
  line-height: 16px;
  font-size: 12px;
}

.upcoming-event .breadCrums li a {
  line-height: 16px;
  letter-spacing: 0.4px;
}

.upcoming-event .header-gradient {
  position: relative;
  padding-bottom: 76px;
}

.add-gradient-only {
  position: relative;
}

.add-gradient-only.upcoming-event .event-data h5,
.add-gradient-only.upcoming-event .event-data .h5 {
  margin-bottom: 22px;
}

.add-gradient-only::after {
  display: none;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 488px;
  z-index: -1;
  width: 100%;
  background: linear-gradient(0deg, rgba(224, 32, 140, 0) 0%, #fa6400 100%);
  opacity: 0.15;
}

.add-gradient-only .header-gradient::after {
  display: none;
}

.upcoming-event.add-gradient-only .header-gradient {
  padding-bottom: 20px;
}

.upcoming-event .header-gradient::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: -1;
  width: 100%;
  background: linear-gradient(0deg, rgba(224, 32, 140, 0) 0%, #fa6400 100%);
  opacity: 0.15;
}

.upcoming-event .header-img-data {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: 26px;
}

.header-img-data-2 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: 26px;
}

.header-img-data-2 .data-wrapper {
  width: 40.88%;
  padding-right: 80px;
}

.header-img-data-2 .header-video-thumbnail {
  width: 59.12%;
  position: relative;
}

.header-img-data-2 .header-video-thumbnail .video-thumbnail {
  margin-bottom: 0;
}

.header-img-data-2 .data-wrapper>span {
  display: block;
  margin-bottom: 14px;
}

.header-img-data-2 .data-wrapper h3,
.header-img-data-2 .data-wrapper .h3 {
  margin-bottom: 2px;
}

.header-img-data-2 .data-wrapper .btn-block {
  margin-top: 26px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.header-img-data-2 .data-wrapper .btn-block .fill-btn {
  width: 256px;
}

.header-img-data-2 .data-wrapper .btn-block .heart {
  height: 40px;
  width: 40px;
  margin-left: 16px;
  background: url(../img/Ellipse.svg);
  background-size: cover;
}

.header-img-data-2 .data-wrapper .btn-block .heart .heart-checkmark {
  height: 22px;
  width: 22px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header-img-data-2 .data-wrapper .btn-block .rounded-dot-menu {
  height: 40px;
  width: 40px;
  display: block;
  margin-left: 16px;
}

.upcoming-event .header-img-data .big-img {
  height: 312px;
  width: 312px;
  display: block;
  border-radius: 100%;
}

.upcoming-event .header-img-data .data-wrapper {
  padding-left: 32px;
  width: calc(100% - 312px);
}

.upcoming-event .header-img-data .data-wrapper h3,
.upcoming-event .header-img-data .data-wrapper .h3 {
  margin-bottom: 26px;
}

.upcoming-event .header-img-data .data-wrapper .btn-block {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.upcoming-event .header-img-data .data-wrapper .btn-block .fill-btn {
  width: 152px;
}

.upcoming-event .header-img-data .data-wrapper .btn-block .heart {
  height: 40px;
  width: 40px;
  margin-left: 16px;
  background: url(../img/Ellipse.svg);
  background-size: cover;
}

.upcoming-event .header-img-data .data-wrapper .btn-block .heart .heart-checkmark {
  height: 22px;
  width: 22px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.upcoming-event .header-img-data .data-wrapper .btn-block .more-btn {
  height: 40px;
  width: 40px;
  display: block;
  margin-left: 16px;
}

.upcoming-event .event-data h5,
.upcoming-event .event-data .h5 {
  margin-bottom: 14px;
}

.upcoming-event .event-data .flex-beetwen h5,
.upcoming-event .event-data .flex-beetwen .h5 {
  margin-bottom: 0px;
}

.upcoming-event .event-data .flex-beetwen {
  margin-bottom: 14px;
}

.upcoming-event .event-data .event-box {
  border-radius: 8px !important;
  overflow: hidden;
  position: relative;
  margin-bottom: 24px;
}

.upcoming-event .event-data .event-box>img {
  display: block;
  object-fit: cover;
}

.upcoming-event .event-data .event-box::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  opacity: 0.50;
}

.upcoming-event .event-data .event-box .date-box {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  height: 48px;
  width: 48px;
  border-radius: 8px;
  background: var(--white-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-direction: column;
}

.upcoming-event .event-data .event-box .date-box.left-date-box {
  right: unset !important;
  left: 16px;
}

.upcoming-event .event-data .event-box .date-box p {
  line-height: 18px;
}

.upcoming-event .event-data .event-box .date-box span {
  display: block;
  color: var(--color-2);
}

.upcoming-event .event-data .event-box .title-content {
  height: auto;
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  padding-top: 0;
}

.upcoming-event .event-data .event-box .title-content .s2 {
  margin-bottom: 11px;
  color: #fff;
}

.upcoming-event .event-data .event-box .title-content .t-content {
  color: #fff;
  opacity: 0.87;
  display: block;
  margin-bottom: 8px;
}

.upcoming-event .event-data .event-box .title-content .time-location {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.upcoming-event .event-data .event-box .title-content .time-location .location {
  margin-right: 16px;
}

.upcoming-event .event-data .event-box .title-content .time-location .location,
.upcoming-event .event-data .event-box .title-content .time-location .time {
  font-size: 13px;
  line-height: 18px;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.upcoming-event .event-data .event-box .title-content .time-location .location img,
.upcoming-event .event-data .event-box .title-content .time-location .time img {
  height: 24px;
  width: 24px;
  display: block;
}

.time-location-popup {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  margin: 0;
}

.time-location-popup .location {
  margin-right: 16px;
}

.time-location-popup .location,
.time-location-popup .time {

  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.time-location-popup .location span,
.time-location-popup .time span {
  font-size: 14px;
  line-height: 18px;
  color: var(--color-2);
  display: block;
}

.time-location-popup .location img,
.time-location-popup .time img {
  height: 30px;
  width: 30px;
  display: block;
}

.recent-search {
  padding-top: 28px;
  padding-bottom: 12px;
  overflow: hidden;
}

.recent-search h5,
.recent-search .h5 {
  margin-bottom: 25px;
}

.recent-search .search-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.recent-search .search-wrapper .searching-data {
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 16px;
  border: 1px solid var(--border-2);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  border-radius: 24px;
  padding: 9px 12px 9px 16px;
}

.recent-search .search-wrapper .searching-data span {
  color: var(--color-2);
  display: block;
  white-space: nowrap;
}

.recent-search .search-wrapper .searching-data img {
  height: 16px;
  width: 16px;
  display: block;
  margin-left: 8px;
  cursor: pointer;
}

.subscription {
  padding-top: 50px;
  position: relative;
  padding-bottom: 88px;
}

.subscription .sub-banner {
  position: absolute;
  width: 100%;
  top: 0;
}

.subscription .sub-banner img {
  height: 200px;
  object-fit: cover;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.subscription .subscripation-content {
  position: relative;
  z-index: 1;
  max-width: 424px;
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
}

.subscription .subscripation-content h4,
.subscription .subscripation-content .h4 {
  color: #fff;
  margin-bottom: 22px;
}

.subscription .subscripation-content .sub-table {
  background: var(--white-bg);
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-7);
  margin-bottom: 24px;
}

.subscription .subscripation-content .sub-table table {
  width: 100%;
}

.subscription .subscripation-content .sub-table table tr {
  border: 0;
}

.subscription .subscripation-content .sub-table table tr:first-child td {
  padding-top: 19px;
  padding-bottom: 4px;
  font-size: 12px;
  font-family: sarabun_reg;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: var(--color-2);
}

.subscription .subscripation-content .sub-table table tr:last-child td {
  padding-bottom: 16px;
}

.subscription .subscripation-content .sub-table table tr td {
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 12px;
  padding-right: 6px;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.0953967px;
  color: var(--color-1);
  font-family: noto_bold;
  text-align: center;
}

.subscription .subscripation-content .sub-table table tr td img {
  height: 24px;
  width: 24px;
}

.subscription .subscripation-content .sub-table table tr td:first-child {
  padding-left: 24px;
  text-align: left;
}

.subscription .subscripation-content .sub-table table tr td:last-child {
  padding-right: 20px;
}

.subscription .subscripation-content .subscripation-detail {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding-left: 24px;
  padding-right: 24px;
  margin-bottom: 21px;
}

.subscription .subscripation-content .subscripation-detail::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(261.82deg, #fa6400 12.57%, #e0208c 87.43%);
  opacity: 0.1;
}

.subscription .subscripation-content .subscripation-detail .sub-items {
  padding-top: 21px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border-7);
}

.subscription .subscripation-content .subscripation-detail .sub-items:last-child {
  border-bottom: 0;
  padding-bottom: 17px;
}

.subscription .subscripation-content .subscripation-detail .sub-items .sub-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.subscription .subscripation-content .subscripation-detail .sub-items span {
  color: var(--color-2);
}

.subscription .subscripation-content .subscripation-detail .sub-items .red-color {
  color: #ed4247;
}

.subscription .subscripation-content .like-plan>.s1 {
  margin-bottom: 11px;
}

.subscription .subscripation-content .like-plan .like-plan-box {
  border: 2px solid #ed4247;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 13px 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.subscription .subscripation-content .like-plan .like-plan-box .left-column {
  padding-right: 12px;
}

.subscription .subscripation-content .like-plan .like-plan-box .left-column .s1 {
  margin-bottom: 3px;
}

.subscription .subscripation-content .like-plan .like-plan-box .left-column span {
  display: block;
  color: var(--color-2);
}

.subscription .subscripation-content .like-plan .like-plan-box .right-column {
  padding-left: 12px;
  text-align: right;
}

.subscription .subscripation-content .like-plan .like-plan-box .right-column p {
  font-size: 20px;
  line-height: 25px;
  color: var(--color-1);
  margin-bottom: 5px;
  white-space: nowrap;
  font-family: noto_bold;
}

.subscription .subscripation-content .like-plan .like-plan-box .right-column span {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-1);
  display: block;
  white-space: nowrap;
  font-family: noto_bold;
}

.subscription .subscripation-content .fill-btn {
  width: 100%;
  margin-top: 32px;
}

.edit-profile {
  padding-top: 100px;
  position: relative;
  padding-bottom: 88px;
}

.edit-profile .sub-banner {
  position: absolute;
  width: 100%;
  top: 0;
}

.edit-profile .sub-banner img {
  height: 200px;
  object-fit: cover;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.edit-profile .profile-content {
  max-width: 352px;
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
}

.edit-profile .profile-content .avatar-upload {
  position: relative;
  max-width: 208px;
  margin: 0 auto;
  margin-bottom: 24px;
}

.edit-profile .profile-content .avatar-upload .avatar-edit {
  position: absolute;
  right: 12px;
  z-index: 1;
  bottom: 0px;
}

.edit-profile .profile-content .avatar-upload .avatar-edit input {
  display: none;
}

.edit-profile .profile-content .avatar-upload .avatar-edit input+label {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin-bottom: 0;
  border-radius: 100%;
  position: relative;
  cursor: pointer;
  background: url(../img/Cam.png);
  background-position: center;
  background-size: cover;
  transition: all 400ms ease-in;
  overflow: hidden;
}

.edit-profile .profile-content .avatar-upload .avatar-preview {
  width: 208px;
  height: 208px;
  position: relative;
  border-radius: 100%;
  border: 8px solid #f8f8f8;
}

.edit-profile .profile-content .avatar-upload .avatar-preview>div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.edit-profile .profile-content>h4,
.edit-profile .profile-content>.h4 {
  margin-bottom: 7px;
  text-align: center;
}

.edit-profile .profile-content>p {
  text-align: center;
  margin-bottom: 25px;
}

.edit-profile .profile-content .inputs-group,
.number-wrapper {
  margin-bottom: 16px;
}

.edit-profile .profile-content .label-select {
  margin-bottom: 16px;
}

.edit-profile .profile-content .gender {
  margin-bottom: 16px;
}

.edit-profile .still-need-help {
  margin-bottom: 28px;
}

.edit-profile .still-need-help a {
  display: inline-block;
}

.edit-profile .still-need-help a span {
  color: #ed4247;
  border-bottom: 0;
  transition: all 0.3s;
  cursor: pointer;
}

.edit-profile .still-need-help a span:hover {
  border-bottom: 1px solid #ed4247;
}

.edit-profile .profile-content .gender p {
  color: var(--color-2);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  font-family: sarabun_reg;
  margin-bottom: 10px;
}

.edit-profile .profile-content .gender .rd {
  padding-left: 30px;
  margin-right: 26px;
  margin-bottom: 11px;
}

.edit-profile .profile-content .gender .rd:last-child {
  margin-right: 0;
}

.edit-profile .profile-content .fill-btn {
  width: 100%;
}

.edit-profile-artist .profile-content .avatar-upload {
  margin-bottom: 34px;
}

.artist-details .artist-c {
  padding-top: 45px;
}

.artist-details .artist-c img {
  border-radius: 8px;
}

.artist-details .about {
  padding-top: 76px;
}

.artist-details .about h5,
.artist-details .about .h5 {
  margin-bottom: 9px;
}

.artist-details .about span {
  color: var(--color-2);
  display: block;
}

.about .a {
  margin-top: 4px;
  display: inline-block;
  font-size: 16px;
  line-height: 28px;
}

.news {
  padding-top: 66px;
}

.news h5,
.news .h5 {
  margin-bottom: 14px;
}

.news .flex-beetwen {
  margin-bottom: 14px;
}

.news .flex-beetwen h5,
.news .flex-beetwen .h5 {
  margin-bottom: 0;
}

.news .news-box-border {
  padding: 2px;
  border-radius: 8px;
  background: linear-gradient(261.82deg, #FA6400 12.57%, #E0208C 87.43%);
  margin-bottom: 24px;
  position: relative;
}

.news .news-box {
  padding: 17px 24px 20px;
  border-radius: 6px;
  background: var(--bg-11);
}

.news .news-box h6,
.news .news-box .h6 {
  margin-bottom: 7px;
}

.news .news-box p {
  display: block;
  line-height: 24px;
  margin-bottom: 6px;
  color: var(--color-2);

  height: 96px;
  display: -webkit-box;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news .news-box .a {
  margin-bottom: 17px;
  display: inline-block;
  font-size: 16px;
  line-height: 28px;
}

.news .news-box span {
  color: var(--color-1);
  display: block;
}

.artist-details .event-data {
  padding-top: 42px;
}

.artist-details .search-section {
  padding-top: 50px;
}

.artist-details .search-section .search-box {
  height: 40px;
  border: 1px solid var(--border-3);
  box-sizing: border-box;
  border-radius: 80px;
  max-width: 424px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  overflow: hidden;
  width: 100%;
}

.artist-details .search-section .search-box button {
  width: 48px;
  padding-left: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  height: 100%;
}

.artist-details .search-section .search-box button img {
  height: 24px;
  width: 24px;
  display: block;
}

.artist-details .search-section .search-box input {
  height: 100%;
  width: calc(100% - 48px);
  outline: none;
  box-shadow: none;
  border: 0;
  padding-right: 16px;
  color: var(--color-1);
  background: transparent;
  font-size: 14px;
  letter-spacing: 0.25px;
}

.artist-details .search-section .search-box input::placeholder {
  color: var(--color-3);
}

.songs-data {
  padding-top: 30px;
}

.songs-data .row-5 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 -12px;
}

.songs-data .row-5 .column {
  width: 20%;
  padding: 0 12px;
}

.songs-data .songs-box {
  display: block;
  margin-bottom: 29px;
  transition: all 0.3s ease;
}

.songs-data .songs-box>img,
.songs-data .songs-box .img img {
  display: block;
  margin-bottom: 13px;
}

.songs-data .songs-box .caption {
  margin-top: 6px;
}

.songs-data .songs-box p.s1 {
  display: -webkit-box !important;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 1;
  font-weight: 600;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.songs-data .songs-box .caption p {
  /* white-space: nowrap; */
  display: block;
  width: 100%;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: var(--color-2);
  display: -webkit-box !important;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.songs-data .songs-box .caption a {
  display: block;
}

.songs-data .songs-box:hover {
  transform: scale(1.1);
}

.c-dropdown.round-drop .dropdown-menu {
  min-width: 140px;
}

.my-song-box {
  position: relative;
  transform: unset !important;
}

.round-drop {
  position: absolute;
  height: 24px;
  width: 24px !important;
  top: 8px;
  right: 8px;
  z-index: 5;
}

.round-drop.c-dropdown>button {
  background: var(--white-bg);
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  border-radius: 100%;
}

.round-drop.c-dropdown>button img {
  height: 18px;
  width: 18px;
  display: block;
}

.views-and-likes {
  margin-top: 12px;
  padding-top: 8px;
  padding-bottom: 11px;
  border-top: 1px solid var(--border-6);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.views-and-likes .viewer-box,
.views-and-likes .liker-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.views-and-likes .liker-box {
  margin-left: 24px;
}

.views-and-likes .viewer-box img,
.views-and-likes .liker-box img {
  display: block;
  height: 24px;
  width: 24px;
  margin-right: 8px;
}

.views-and-likes .viewer-box .caption,
.views-and-likes .liker-box .caption {
  margin-top: 0;
}


.my-playlist-video,
.my-collection-page {
  padding-bottom: 71px;
}

.my-playlist-video .breadCrums,
.my-collection-page .breadCrums {
  padding: 19px 0;
  margin-bottom: 0px;
}

.my-playlist-video .breadCrums li,
.my-collection-page .breadCrums li {
  line-height: 16px;
  font-size: 12px;
}

.my-playlist-video .breadCrums li a,
.my-collection-page .breadCrums li a {
  line-height: 16px;
  letter-spacing: 0.4px;
}

.my-playlist-video .header-gradient,
.my-collection-page .header-gradient {
  position: relative;
  padding-bottom: 52px;
}

.my-playlist-video .header-gradient::after,
.my-collection-page .header-gradient::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: -1;
  width: 100%;
  background: linear-gradient(0deg, rgba(224, 32, 140, 0) 0%, #fa6400 100%);
  opacity: 0.15;
}

.my-playlist-video .header-img-data,
.my-collection-page .header-img-data {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: 26px;
}

.my-playlist-video .header-img-data .big-img,
.my-collection-page .header-img-data .big-img {
  height: 312px;
  width: 312px;
  display: block;
  border-radius: 8px;
}

.my-playlist-video .header-img-data .data-wrapper,
.my-collection-page .header-img-data .data-wrapper {
  padding-left: 32px;
  width: calc(100% - 312px);
}

.my-playlist-video .header-img-data .data-wrapper h3,
.my-collection-page .header-img-data .data-wrapper h3,
.my-playlist-video .header-img-data .data-wrapper .h3,
.my-collection-page .header-img-data .data-wrapper .h3 {
  margin-bottom: 2px;
}

.my-playlist-video .header-img-data .data-wrapper>span,
.my-collection-page .header-img-data .data-wrapper>span {
  display: block;
  margin-bottom: 14px;
}

.my-playlist-video .header-img-data .data-wrapper .btn-block,
.my-collection-page .header-img-data .data-wrapper .btn-block {
  margin-top: 26px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.my-playlist-video .header-img-data .data-wrapper .btn-block .fill-btn,
.my-collection-page .header-img-data .data-wrapper .btn-block .fill-btn {
  width: 256px;
}

.my-playlist-video .header-img-data .data-wrapper .btn-block .heart,
.my-collection-page .header-img-data .data-wrapper .btn-block .heart {
  height: 40px;
  width: 40px;
  margin-left: 16px;
  background: url(../img/Ellipse.svg);
  background-size: cover;
}

.my-playlist-video .header-img-data .data-wrapper .btn-block .heart .heart-checkmark,
.my-collection-page .header-img-data .data-wrapper .btn-block .heart .heart-checkmark {
  height: 22px;
  width: 22px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.my-playlist-video .header-img-data .data-wrapper .btn-block .rounded-dot-menu,
.my-collection-page .header-img-data .data-wrapper .btn-block .rounded-dot-menu {
  height: 40px;
  width: 40px;
  display: block;
  margin-left: 16px;
}

/* .my-playlist-table {
  overflow-x: auto;
} */

.my-playlist-table table {
  width: 100%;
  border-collapse: collapse;
}

.my-playlist-table table tr:first-child td {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.0953967px;
  color: var(--color-1);
  font-family: noto_bold;
  background-color: transparent !important;
}

.my-playlist-table table tr td {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0.5px;
  color: var(--color-1);
  font-family: noto_reg;
  border-bottom: 1px solid var(--border-6);
  ;
}

.my-playlist-table table tr td:first-child {
  padding-left: 16px;
  width: 48px;
}

.my-playlist-table table tr td:last-child {
  padding-right: 16px;
  text-align: right;
}

.my-playlist-table table tr td .track {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.my-playlist-table table tr td .track img {
  width: 48px;
  height: 48px;
  display: block;
}

.my-playlist-table table tr td .track .track-data {
  padding-left: 24px;
  width: calc(100% - 48px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.my-playlist-table table tr td .track .track-data span {
  display: block;
}

.my-playlist-table table tr td .artist {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.my-playlist-table table tr td .artist>span {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-playlist-table table tr td .artist .like-menu {
  visibility: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  -webkit-align-items: center;
}

.my-playlist-table table tr td .artist .like-menu .heart-checkmark {
  background: url(../img/table-like.svg);
  background-position: center;
  background-size: cover;
  transition: all 0s;
}

.my-playlist-table table tr td .artist .like-menu .heart:hover input~.heart-checkmark {
  background: url(../img/table-like-hover.svg);
  background-position: center;
  background-size: cover;
}

.my-playlist-table table tr td .artist .like-menu .heart input:checked~.heart-checkmark {
  background: url(../img/fill-like.svg);
  background-position: center;
  background-size: cover;
}

.my-playlist-table table tr td .artist .like-menu a,
.my-playlist-table table tr td .artist .like-menu .c-dropdown {
  display: block;
  margin-left: 16px;
}

.my-playlist-table table tr td .artist .like-menu .c-dropdown>button img {
  display: block;
}

.my-playlist-table .c-dropdown.my-playlist-dropdown .dropdown-menu {
  min-width: 224px;
}

.my-playlist-table .c-dropdown.my-playlist-dropdown .dropdown-menu a {
  margin-left: 0;
}

.my-playlist-table table tr td .artist .like-menu a img {
  display: block;
  height: 24px;
  width: 24px;
}

.my-playlist-table table tr:hover td .artist .like-menu {
  visibility: visible;
}

.my-playlist-table table tr:first-child td {
  background: transparent;
}

.my-playlist-table table tr:hover td {
  background: rgba(237, 66, 71, 0.03);
}

.my-collection-page .header-gradient {
  padding-bottom: 48px;
}

.my-collection-page .nav-tabs {
  border-bottom: 1px solid var(--border-6);
  ;
}

.my-collection-page .nav-tabs .nav-item {
  position: relative;
  margin-right: 48px;
}

.my-collection-page .nav-tabs .nav-item:last-child {
  margin-right: 0;
}

.my-collection-page .nav-tabs .nav-item .nav-link {
  padding: 9px 24px;
  font-size: 16px;
  line-height: 21px;
  color: var(--color-2);
  background-color: transparent;
  font-family: noto_reg;
  border: 0;
  transition: all 0.3s ease;
}

.my-collection-page .nav-tabs .nav-item .nav-link::after {
  position: absolute;
  content: "";
  width: 0;
  height: 4px;
  background: linear-gradient(261.82deg, #fa6400 12.57%, #e0208c 87.43%);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  left: 0px;
  bottom: 0px;
  transition: all 0.3s ease;
}

.my-collection-page .nav-tabs .nav-item .nav-link.active,
.my-collection-page .nav-tabs .nav-item .nav-link:hover {
  border: 0;
  color: var(--color-1);
  transition: all 0.3s ease;
}

.my-collection-page .nav-tabs .nav-item .nav-link.active::after,
.my-collection-page .nav-tabs .nav-item .nav-link:hover::after {
  width: 100%;
  visibility: visible;
  transition: all 0.3s ease;
}

.my-collection-page .tab-content {
  padding-top: 28px;
}

.dashboard-page {
  padding-top: 40px;
  padding-bottom: 56px;
}

.dashboard-page .dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.dashboard-page .dashboard-header .d-img-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.dashboard-page .dashboard-header .d-img-content img {
  height: 96px;
  width: 96px;
  border-radius: 100%;
  object-fit: cover;
  display: block;
}

.dashboard-page .dashboard-header .d-img-content .d-content {
  padding-left: 24px;
}

/* .dashboard-page .dashboard-header .d-img-content .d-content h4,
.dashboard-page .dashboard-header .d-img-content .d-content .h4 {
  margin-bottom: 6px;
} */
.dashboard-page .dashboard-header .d-img-content .d-content span {
  color: var(--color-2);
}

.dashboard-page .dashboard-header .fill-btn {
  width: 200px;
}

.dashboard-page .analytics-wrapper {
  padding-top: 44px;
}

.dashboard-page .analytics-wrapper>h5,
.dashboard-page .analytics-wrapper>.h5 {
  margin-bottom: 25px;
}

.dashboard-page .analytics-wrapper .analytics {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.dashboard-page .analytics-wrapper .analytics .round-progress {
  width: 29.379%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.dashboard-page .analytics-wrapper .analytics .round-progress .progress-svg {
  position: relative;
  height: 100px;
  width: 100px;
}

.dashboard-page .analytics-wrapper .analytics .round-progress .progress-svg h5,
.dashboard-page .analytics-wrapper .analytics .round-progress .progress-svg .h5 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.dashboard-page .analytics-wrapper .analytics .round-progress .progress-svg::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 12px solid var(--border-7);
  border-radius: 100%;
  z-index: -1;
}

.dashboard-page .analytics-wrapper .analytics .round-progress .progress-svg .circular-chart {
  display: block;
  height: 100px;
  width: 100px;
}

.dashboard-page .analytics-wrapper .analytics .round-progress .progress-svg .circle {
  stroke: url(#linear);
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.dashboard-page .analytics-wrapper .analytics .round-progress .progress-content {
  padding-left: 20px;
}

.dashboard-page .analytics-wrapper .analytics .progress-status-wrapper {
  width: 33.76%;
  padding: 2px;
  background: linear-gradient(11.05deg, #e0208c 2.97%, #fa6400 101.52%);
  border-radius: 8px;
}

.dashboard-page .analytics-wrapper .analytics .progress-status-wrapper .progress-status {
  height: 100%;
  width: 100%;
  background: var(--white-bg);
  border-radius: 7px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.dashboard-page .analytics-wrapper .analytics .progress-status-wrapper .progress-status .cal-box {
  width: 33.33%;
  text-align: center;
  position: relative;
}

.dashboard-page .analytics-wrapper .analytics .progress-status-wrapper .progress-status .cal-box:not(:last-child)::after {
  top: 0;
  right: -1px;
  position: absolute;
  content: "";
  height: 100%;
  background: linear-gradient(11.05deg, #e0208c 2.97%, #fa6400 101.52%);
  opacity: 0.3;
  border-radius: 3px;
  width: 2px;
}

.dashboard-page .analytics-wrapper .analytics .progress-status-wrapper .progress-status .monthly {
  padding-right: 24px;
  text-align: center;
}

.dashboard-page .analytics-wrapper .analytics .progress-status-wrapper .progress-status .annual {
  padding-left: 24px;
  text-align: center;
  position: relative;
}

.dashboard-page .analytics-wrapper .analytics .progress-status-wrapper .progress-status .annual::after {
  position: absolute;
  content: "";
  background: linear-gradient(11.05deg, #e0208c 2.97%, #fa6400 101.52%);
  opacity: 0.3;
  border-radius: 3px;
  height: 100%;
  width: 2px;
  left: -1px;
  top: 0;
}

.dashboard-page .analytics-wrapper .analytics .like-song-wrapper {
  width: 32.483%;
  padding: 2px;
  background: linear-gradient(11.05deg, #e0208c 2.97%, #fa6400 101.52%);
  border-radius: 8px;
}

.dashboard-page .analytics-wrapper .analytics .like-song-wrapper .like-song {
  height: 100%;
  width: 100%;
  background: var(--white-bg);
  border-radius: 7px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.dashboard-page .analytics-wrapper .analytics .like-song-wrapper .like-song .likes {
  padding-right: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  width: 50%;
}

.dashboard-page .analytics-wrapper .analytics .like-song-wrapper .like-song .likes img {
  height: 56px;
  width: 56px;
}

.dashboard-page .analytics-wrapper .analytics .like-song-wrapper .like-song .songs {
  padding-left: 24px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  width: 50%;
}

.dashboard-page .analytics-wrapper .analytics .like-song-wrapper .like-song .songs img {
  height: 56px;
  width: 56px;
}

.dashboard-page .analytics-wrapper .analytics .like-song-wrapper .like-song .songs::after {
  position: absolute;
  content: "";
  background: linear-gradient(11.05deg, #e0208c 2.97%, #fa6400 101.52%);
  opacity: 0.3;
  border-radius: 3px;
  height: 100%;
  width: 2px;
  left: -1px;
  top: 0;
}

.dashboard-page .analytics-wrapper .analytics .like-song-wrapper .like-song .like-content,
.dashboard-page .analytics-wrapper .analytics .like-song-wrapper .like-song .song-content {
  padding-left: 16px;
}

.upload-song-check {
  margin-top: 48px;
}

.upload-song-check .row-5 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 -12px;
}

.upload-song-check .row-5 .column {
  width: 20%;
  padding: 0 12px;
}

.usc-box {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.usc-box img {
  width: 24px;
  height: 24px;
  display: block;
  margin-right: 12px;
}

.usc-box span {
  display: block;
}

.dashboard-page .recent-upload {
  padding-top: 28px;
}

.dashboard-page .recent-upload .row-5 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 -12px;
}

.dashboard-page .recent-upload .row-5 .column {
  width: 20%;
  padding: 0 12px;
}

.dashboard-page .recent-upload .recent-box {
  display: block;
  margin-bottom: 29px;
  transition: all 0.3s ease;
}

.dashboard-page .recent-upload .recent-box img {
  display: block;
  margin-bottom: 13px;
}

.dashboard-page .recent-upload .recent-box .s1 {
  display: -webkit-box;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .recent-upload .recent-box .caption {
  margin-top: 6px;
}

.dashboard-page .recent-upload .recent-box .caption p {
  /* white-space: nowrap; */
  display: block;
  /* font-family: system-ui; */
  width: 100%;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: var(--color-2);
  /* overflow: hidden;
  text-overflow: ellipsis; */
  display: -webkit-box;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .recent-upload .recent-box:hover {
  transform: scale(1.1);
}


.check-and-map {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 24px;
}

.song-check-status {
  width: 29.379%;
}

.map-wrapper {
  width: 68.43%;
  border-radius: 8px;
  background-color: var(--bg-12);
  padding: 25px 32px 31px;
}

.map-wrapper h6,
.map-wrapper .h6 {
  margin-bottom: 23px;
}

.map-and-progress {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.map-wrapper-box {
  width: 64.142%;
  padding-top: 20px;
  padding-right: 40px;
}

/* #regions_div path{
  stroke: !important;
} */
[stroke="#d53b40"] {
  fill: #ED4247 !important;
  stroke: #ED4247 !important;
}

[stroke="#a1a1a1"] {
  stroke: #b3b3b3 !important;
}

.progress-wrapper-box {
  width: calc(100% - 64.142%);
}

.map-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border-6);
}

.map-progressbar-wrapper {
  margin-top: 13px;
}

.mpw-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.mpw-header .s2 {
  font-family: noto_med;
  font-weight: normal;
}

.map-progressbar {
  width: 100%;
  border-radius: 19px;
  background: var(--bg-13);
  height: 2px;
  position: relative;
}

.map-progress-length {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 19px;
  background: linear-gradient(11.05deg, #E0208C 2.97%, #FA6400 101.52%);
}

.progress-scroll {
  max-height: 210px;
  overflow-y: auto;
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 10px;
  scrollbar-color: var(--bg-2) var(--scroll-track-bg);
  scrollbar-width: thin;
}

.progress-scroll::-webkit-scrollbar {
  width: 4px;
}

.progress-scroll::-webkit-scrollbar-track {
  background: var(--scroll-track-bg);
}

.progress-scroll::-webkit-scrollbar-thumb {
  background: var(--bg-2);
  border-radius: 2px
}

.chat-page {
  height: calc(100vh - 63px);
  width: 100%;
}

.chat-page .chat-wrapper {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.chat-page .chat-sidebar {
  width: 32.724%;
  height: 100%;
  flex-shrink: 0;
  border-right: 1px solid var(--border-8);
  background-color: var(--white-bg);
}

.chat-page .chat-sidebar .search-bar {
  width: 100%;
  padding: 23px 23px;
  background: var(--white-bg);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-6);
  ;
}

.chat-page .chat-sidebar .search-bar .search-box {
  height: 40px;
  border: 1px solid var(--border-3);
  box-sizing: border-box;
  border-radius: 80px;
  width: calc(100% - 48px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  overflow: hidden;
}

.chat-page .chat-sidebar .search-bar .search-box button {
  width: 48px;
  padding-left: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  height: 100%;
}

.chat-page .chat-sidebar .search-bar .search-box button img {
  height: 24px;
  width: 24px;
  display: block;
}

.chat-page .chat-sidebar .search-bar .search-box input {
  height: 100%;
  width: calc(100% - 48px);
  outline: none;
  box-shadow: none;
  border: 0;
  padding-right: 16px;
  color: var(--color-1);
  font-size: 14px;
  background: transparent;
  letter-spacing: 0.25px;
}

.chat-page .chat-sidebar .search-bar .search-box input::placeholder {
  color: var(--color-3);
}

.chat-page .chat-sidebar .search-bar>button {
  display: inline-block;
  margin-bottom: 0px;
  margin-left: 8px;
  text-align: center;
  cursor: pointer;
  border: 0;
  white-space: nowrap;
  padding: 0;
  border-radius: 2px;
  height: 40px;
  width: 40px;
  user-select: none;
  position: relative;
  background: transparent;
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.chat-page .chat-sidebar .search-bar>button img {
  width: 24px;
  height: 16px;
}

.chat-page .chat-sidebar .chat-person-list {
  height: calc(100% - 87px);
  overflow-y: auto;
  scrollbar-color: var(--bg-2) var(--scroll-track-bg);
  scrollbar-width: thin;
}

.chat-page .chat-sidebar .chat-person-list::-webkit-scrollbar {
  width: 4px;
}

.chat-page .chat-sidebar .chat-person-list::-webkit-scrollbar-track {
  background: var(--scroll-track-bg);
}

.chat-page .chat-sidebar .chat-person-list::-webkit-scrollbar-thumb {
  background: var(--bg-2);
  border-radius: 2px;
}

.chat-page .chat-sidebar .chat-person-list::-webkit-scrollbar-thumb:hover {
  background: var(--bg-2);
}

.chat-page .chat-sidebar .chat-person-list .chat-person {
  width: 100%;
  padding: 24px 23px;
  display: flex;
  justify-content: flex-start;
  flex-shrink: 0;
  text-align: left;
  position: relative;
  align-items: center;
  -webkit-align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  transition: all 0.25s ease 0s;
  background-color: transparent;
}

.chat-page .chat-sidebar .chat-person-list .chat-person::after {
  position: absolute;
  content: "";
  height: 1px;
  width: calc(100% - 46px);
  left: 23px;
  bottom: 0.5px;
  background: var(--border-6);
  ;
  transition: all 0.25s ease 0s;
}

.chat-page .chat-sidebar .chat-person-list .chat-person::before {
  position: absolute;
  width: 4px;
  height: 100%;
  content: "";
  background: linear-gradient(11.05deg, #e0208c 2.97%, #fa6400 101.52%);
  left: -4px;
  transition: all 0.25s ease 0s;
}

.chat-page .chat-sidebar .chat-person-list .chat-person.active,
.chat-page .chat-sidebar .chat-person-list .chat-person:hover {
  background: rgba(237, 66, 71, 0.05);
}

.chat-page .chat-sidebar .chat-person-list .chat-person.active::after,
.chat-page .chat-sidebar .chat-person-list .chat-person:hover::after {
  display: none;
}

.chat-page .chat-sidebar .chat-person-list .chat-person.active::before,
.chat-page .chat-sidebar .chat-person-list .chat-person:hover::before {
  left: 0;
}

.chat-page .chat-sidebar .chat-person-list .chat-person img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: block;
  margin-right: 15px;
}

.chat-page .chat-sidebar .chat-person-list .chat-person .chat-person-detail {
  width: calc(100% - 63px);
}

.chat-page .chat-sidebar .chat-person-list .chat-person .chat-person-detail .s2 {
  font-size: 14px;
  margin: 0px;
  font-weight: bold;
  color: var(--color-1);
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
}

.chat-page .chat-sidebar .chat-person-list .chat-person .chat-person-detail .caption {
  white-space: nowrap;
  margin-left: 8px;
}

.chat-page .chat-sidebar .chat-person-list .chat-person .chat-person-detail>span {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
}

.chat-page .chat-sidebar .chat-person-list .chat-person .chat-person-detail .name-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  margin-bottom: 4px;
}

.msg-status-icon {
  height: 10px;
  width: 10px;
  border-radius: 100%;
  background: #ed4247;
  position: absolute;
  left: 63px;
  top: 32px;
}

.hover-delete-wrapper {
  background: linear-gradient(261.82deg, #FA6400 12.57%, #E0208C 87.43%);
  ;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  position: absolute;
  height: 25px;
  width: 25px;
  right: -100%;
  top: 0;
  border-bottom-left-radius: 8px;
  transition: all 0.25s ease 0s;
}

.hover-delete-wrapper a {
  height: 20px;
  width: 20px;
  display: block;
}

.hover-delete-wrapper a img {
  height: 100% !important;
  width: 100% !important;
  display: block;
}

.chat-page .chat-person-list .chat-person:hover .hover-delete-wrapper {
  right: 0;
  transition: all 0.25s ease 0s;
}

.chat-page .chat-sidebar .chat-person-list .chat-person:last-child::after {
  display: none;
}

.chat-page .chat-board {
  width: calc(100% - 32.724%);
  height: 100%;
  background-color: var(--white-bg);
  border-image: initial;
}

.chat-page .chat-board .chat-board-header {
  height: 87px;
  background: var(--white-bg);
  flex-shrink: 0;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-6);
  ;
}

.chat-page .chat-board .chat-board-header img {
  height: 48px;
  width: 48px;
  display: block;
  margin-right: 16px;
  border-radius: 100%;
}

.chat-page .chat-board .chat-board-header h6,
.chat-page .chat-board .chat-board-header .h6 {
  font-size: 17px;
  font-weight: bold;
  color: var(--color-1);
  margin: 0;
}

.chat-page .chat-board .chat-board-header .refresh-icon {
  height: 24px;
  width: 24px;
  display: block;
  margin-left: auto;
}

.chat-page .chat-board .chat-board-header .refresh-icon img {
  height: 100%;
  width: 100%;
  margin: 0;
}

.rotate-icon {
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }

  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }

  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.chat-page .chat-board .chat-board-data {
  display: flex;
  width: 100%;
  height: calc(100% - 159px);
  flex-direction: column;
  overflow: hidden auto;
  scrollbar-color: var(--bg-2) var(--scroll-track-bg);
  scrollbar-width: none;
  background: var(--white-bg);
  padding-left: 23px;
  padding-right: 23px;
}

.chat-page .chat-board .chat-board-data::-webkit-scrollbar {
  width: 1px;
}

.chat-page .chat-board .chat-board-data::-webkit-scrollbar-track {
  background: transparent;
}

.chat-page .chat-board .chat-board-data::-webkit-scrollbar-thumb {
  background: transparent;
}

.chat-page .chat-board .chat-board-data::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

.chat-page .chat-board .chat-board-data .day-status {
  position: sticky;
  display: flex;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  top: 24px;
  width: 200px;
  z-index: 2;
}

.chat-page .chat-board .chat-board-data .day-status p {
  padding: 4px 14px;
  background: var(--bg-9);
  border-radius: 24px;
  display: inline-block;
  text-align: center;
}

.chat-page .chat-board .chat-board-data .receive-msg-box {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0px;
  align-items: flex-end;
  flex-shrink: 0;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.chat-page .chat-board .chat-board-data .receive-msg-box .receive-msg {
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 110px);
  flex-shrink: 0;
}

.chat-page .chat-board .chat-board-data .receive-msg-box .receive-msg .receive-msg-content {
  margin-bottom: 4px;
}

.chat-page .chat-board .chat-board-data .receive-msg-box .receive-msg .receive-msg-content span {
  background: var(--bg-10);
  border-radius: 30px;
  position: relative;
  font-size: 14px;
  display: inline-block;
  padding: 10px 16px;
  word-break: break-word;
}

.chat-page .chat-board .chat-board-data .receive-msg-box .receive-msg .receive-msg-content:last-of-type span {
  border-bottom-left-radius: 0;
}

.chat-page .chat-board .chat-board-data .receive-msg-box .receive-msg .caption {
  color: var(--color-3);
}

.chat-page .chat-board .chat-board-data .receive-msg-box .receiver-img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  margin-right: 16px;
  margin-bottom: 20px;
}

.chat-page .chat-board .chat-board-data .receive-msg-box .receiver-img img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-page .chat-board .chat-board-data .send-msg-box {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0px;
  align-items: flex-start;
  flex-shrink: 0;
  justify-content: flex-end;
}

.chat-page .chat-board .chat-board-data .send-msg-box .send-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: calc(100% - 110px);
  flex-shrink: 0;
}

.chat-page .chat-board .chat-board-data .send-msg-box .send-msg .send-msg-content {
  margin-bottom: 4px;
}

.chat-page .chat-board .chat-board-data .send-msg-box .send-msg .send-msg-content span {
  color: #fff;
  background: #ed4247;
  border-radius: 30px;
  position: relative;
  font-size: 14px;
  vertical-align: top;
  display: inline-block;
  padding: 10px 16px;
  word-break: break-word;
}

.chat-page .chat-board .chat-board-data .send-msg-box .send-msg .send-msg-content:last-of-type span {
  border-bottom-right-radius: 0;
}

.chat-page .chat-board .chat-board-data .send-msg-box .send-msg .caption {
  color: var(--color-3);
  text-align: right;
}

.chat-page .chat-board .chat-board-input {
  background: var(--white-bg);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.03);
  padding: 16px 23px;
}

.chat-page .chat-board .chat-board-input .emoji-input {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  width: calc(100% - 56px);
  transition: all .3s;
}

.chat-page .chat-board .chat-board-input .emoji-input button {
  border-radius: 0;
  border-top-left-radius: 66px;
  border-bottom-left-radius: 66px;
  outline: none;
  border: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  box-shadow: none;
  width: 40px;
  /* background: var(--bg-7); */
  background: var(--bg-14);
  height: 40px;
  padding-left: 12px;
}

.chat-page .chat-board .chat-board-input.send-hide-btn .emoji-input {
  width: 100%;
  transition: all .3s;
}

.chat-page .chat-board .chat-board-input.send-hide-btn .send-btn {
  display: none;
}

.chat-page .chat-board .chat-board-input .emoji-input button img {
  height: 20px;
  width: 20px;
  display: block;
}

.chat-page .chat-board .chat-board-input .emoji-input input {
  border-radius: 0;
  border-top-right-radius: 66px;
  border-bottom-right-radius: 66px;
  outline: none;
  border: 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  box-shadow: none;
  width: calc(100% - 40px);
  /* background: var(--bg-7); */
  background: var(--bg-14);
  height: 40px;
  color: var(--color-1);
}

.chat-page .chat-board .chat-board-input .emoji-input input::placeholder {
  color: var(--color-5);
}

.chat-page .chat-board .chat-board-input .send-btn {
  border: 0;
  height: 40px;
  width: 40px;
  outline: none;
  box-shadow: none;
  border-radius: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 16px;
}

.chat-page .chat-board .chat-board-input .send-btn img {
  height: 16px;
  width: auto;
}


.chat-board .chat-default-screen {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-direction: column;
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;
}

.chat-board .chat-default-screen img {
  width: 300px;
  display: block;
  margin-bottom: 42px;
}

.chat-board .chat-default-screen h5,
.chat-board .chat-default-screen .h5 {
  margin-bottom: 4px;
}

.my-playlist-album {
  height: calc(100vh - 64px);
  background: url(../img/video-bg.png);
  background-position: center;
  background-size: cover;
  overflow-y: auto;
}

.my-playlist-album>.container-fluid {
  height: 100%;
}

.my-playlist-album .playlist-wrapper {
  height: 100%;
}

.my-playlist-album .song-album {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 50px;
  padding-right: 24px;
}

.my-playlist-album .song-album-wrapper {
  width: 100%;
}

.video-thumbnail {
  width: 100%;
  padding-top: 55.435%;
  padding-top: 55.8%;
  /* padding-top: 56.4%; */
  margin-bottom: 20px;
  position: relative;
  background: black;
  /* border-radius: 8px; */
  overflow: hidden;
}

.video-thumbnail video {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  display: block;
  /* border-radius: 8px; */
}

.video-thumbnail video.hidden,
.video-thumbnail audio.hidden {
  display: none;
}

.video-thumbnail [class="hidden"]+.video-placeholder {
  display: none;
}

.video-thumbnail .video-placeholder {
  /* border-radius: 8px; */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* .video-thumbnail:fullscreen {
	padding-bottom: 100vh;
}
.video-thumbnail:-webkit-full-screen {
	padding-bottom: 100vh;
}
.video-thumbnail:-moz-full-screen {
	padding-bottom: 100vh;
}
.video-thumbnail:-ms-fullscreen  {
	padding-bottom: 100vh;
} */
.name-download-like {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  margin-bottom: 6px;
}

.name-download-like .download-like {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  -webkit-align-items: center;
}

.name-download-like .download-like .download {
  height: 24px;
  width: 24px;
  display: block;
  margin-right: 16px;
}

.name-download-like .download-like .heart-checkmark {
  background: url(../img/table-like.svg);
  background-position: center;
  background-size: cover;
  transition: all 0s;
}

.name-download-like .download-like .heart:hover input~.heart-checkmark,
.name-download-like .download-like .heart input:checked~.heart-checkmark {
  background: url(../img/fill-like.svg);
  background-position: center;
  background-size: cover;
}

.my-playlist-album .song-album-wrapper .song-details {
  margin-bottom: 16px;
}

.my-playlist-album .song-album-wrapper .ratting-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  margin-bottom: 23px;
}

.my-playlist-album .song-album-wrapper .ratting-box .defaul-star-box {
  margin-right: 6px;
}

.my-playlist-album .song-album-wrapper .ratting-box .defaul-star-box img {
  height: 16px;
  width: 16px;
  display: inline-block;
  margin-right: 2px;
}

.mymusic-page {
  padding-bottom: 22px;
}

.mymusic-page .mymusic-topicbar {
  margin-bottom: 36px;
}

.mysongs-reviewpage {
  padding-bottom: 56px;
}

.mysongs-reviewpage .breadCrums {
  padding: 19px 0;
  margin-bottom: 0px;
  margin-bottom: 6px;
}

.mysongs-reviewpage .breadCrums li {
  line-height: 16px;
  font-size: 12px;
}

.mysongs-reviewpage .breadCrums li a {
  line-height: 16px;
  letter-spacing: 0.4px;
}

.mysongs-reviewpage .addnew-topicbar {
  margin-bottom: 0;
}

.mysongs-reviewpage .headof-sortbys {
  margin-bottom: 36px;
}

.mysongs-reviewpage .headof-sortbys span {
  display: block;
  color: var(--color-2);
}

.mysongs-reviewpage .songs-data {
  padding-top: 32px;
}

.bottom-padding {
  padding-bottom: 58px !important;
}

.my-profile-artists {
  padding-bottom: 64px;
}

.my-profile-artists .my-collection-section {
  padding-bottom: 55px;
}

.my-profile-artists .my-collection-section h5,
.my-profile-artists .my-collection-section .h5 {
  margin-bottom: 2px;
}

.my-profile-artists .my-collection-section .collection-imgs {
  margin-left: -12px;
  margin-right: -12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  flex-wrap: wrap;
}

.my-profile-artists .my-collection-section .collection-imgs .c-img-block {
  height: 88px;
  width: 88px;
  margin: 12px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.my-profile-artists .my-collection-section .collection-imgs .c-img-block .collection-store-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.my-profile-artists .my-collection-section .collection-imgs .c-img-block .play-icons {
  height: 24px;
  width: 24px;
  display: block;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.my-profile-artists .about .about-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  margin-bottom: 17px;
}

.my-profile-artists .about span {
  color: var(--color-2);
  display: block;
  display: block;
  margin-bottom: 12px;
}

.my-profile-artists .about .a {
  border-color: transparent;
}

.my-profile-artists .about .a:hover {
  border-bottom: 1px solid #ed4247;
}

.toggle-content {
  display: block;
}

.toggle-content.toggle-apply {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toggle-content.toggle-apply-2 {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}



.toggle-btns {
  display: inline-block;
  margin-top: 12px;
}

.my-profile-artists .news {
  padding-top: 72px;
}

.my-profile-artists .event-data {
  padding-top: 52px;
}

.my-profile-artists .event-data h5,
.my-profile-artists .event-data .h5 {
  margin-bottom: 17px;
}

.my-profile-artists .event-data .flex-beetwen {
  margin-bottom: 17px;
}

.my-profile-artists .event-data .flex-beetwen h5,
.my-profile-artists .event-data .flex-beetwen .h5 {
  margin-bottom: 0px;
}

.my-profile-artists .event-data .event-box {
  border-radius: 8px !important;
  overflow: hidden;
  position: relative;
  margin-bottom: 24px;
}

.event-data .event-box .a {
  display: inline-block;
  color: #FFF;
  margin-bottom: 3px;
  margin-left: auto;
}

.event-data .event-box .a:hover {
  border-color: #FFF;
}

.my-profile-artists .event-data .event-box>img {
  display: block;
  object-fit: cover;
}

.my-profile-artists .event-data .event-box::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  opacity: 0.5;
}

.my-profile-artists .event-data .event-box .date-box {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  height: 48px;
  width: 48px;
  border-radius: 8px;
  background: var(--white-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-direction: column;
}

.my-profile-artists .event-data .event-box .date-box.left-date-box {
  right: unset !important;
  left: 16px;
}

.round-drop-news {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
}

.round-drop-news.c-dropdown>button {
  background: var(--white-bg);
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  border-radius: 100%;
}

.round-drop-news.c-dropdown>button img {
  height: 18px;
  width: 18px;
  display: block;
}

.round-drop-news.c-dropdown .dropdown-menu {
  min-width: 150px
}

.my-profile-artists .event-data .event-box .date-box p {
  line-height: 18px;
}

.my-profile-artists .event-data .event-box .date-box span {
  display: block;
  color: var(--color-2);
}

.my-profile-artists .event-data .event-box .title-content {
  height: auto;
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  padding-top: 0;
}

.my-profile-artists .event-data .event-box .title-content .s2 {
  margin-bottom: 11px;
  color: #fff;
}

.my-profile-artists .event-data .event-box .title-content .t-content {
  color: #fff;
  opacity: 0.87;
  display: block;
  margin-bottom: 8px;

  display: block;
  display: -webkit-box;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-box .title-content .t-content {
  color: #fff;
  opacity: 0.87;
  display: block;
  margin-bottom: 8px;

  display: block;
  display: -webkit-box !important;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-profile-artists .event-data .event-box .title-content .time-location {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.my-profile-artists .event-data .event-box .title-content .time-location .location {
  margin-right: 16px;
}

.my-profile-artists .event-data .event-box .title-content .time-location .location,
.my-profile-artists .event-data .event-box .title-content .time-location .time {
  font-size: 13px;
  line-height: 18px;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.my-profile-artists .event-data .event-box .title-content .time-location .location img,
.my-profile-artists .event-data .event-box .title-content .time-location .time img {
  height: 24px;
  width: 24px;
  display: block;
}

.my-profile-artists .thumbnail-dropzone {
  position: relative;
  margin-right: 24px;
}

.my-profile-artists .thumbnail-dropzone img {
  height: auto;
  width: auto;
}

.my-profile-artists .c-img-thumb {
  height: 88px;
  width: 88px;
  margin: 12px;
}

.my-profile-artists .c-img-thumb .drop-zone {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  border: 0;
  background: url(../img/collection-img.png);
  background-position: center;
  background-size: cover;
}

.signUpModal {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.signUpModal .modal-content {
  border-radius: 0;
  background: transparent;
  border: 0;
}

.signUpModal .modal-body {
  padding: 0;
}

.signUpModal .sign-in-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.signUpModal .sign-in-wrapper .sign-in-side {
  position: relative;
  width: 51.38%;
  padding: 42px 48px 44px 48px;
  background: var(--white-bg);
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.signUpModal .sign-in-wrapper .sign-in-side .close-black {
  height: 24px;
  width: 24px;
  top: 24px;
  right: 24px;
  position: absolute;
}

.signUpModal .sign-in-wrapper .sign-in-side h4,
.signUpModal .sign-in-wrapper .sign-in-side .h4 {
  margin-bottom: 9px;
}

.signUpModal .sign-in-wrapper .sign-in-side>p {
  margin-bottom: 9px;
}

.signUpModal .sign-in-wrapper .sign-in-side .inputs-group {
  margin-bottom: 16px;
}

.signUpModal .sign-in-wrapper .sign-in-side .inputs-group:last-of-type {
  margin-bottom: 0;
}

.signUpModal .sign-in-wrapper .sign-in-side .forgot-psw {
  margin-top: 8px;
  text-align: right;
}

.signUpModal .sign-in-wrapper .sign-in-side .forgot-psw a {
  display: inline-block;
}

.signUpModal .sign-in-wrapper .sign-in-side .forgot-psw a span {
  color: #ed4247;
  border-bottom: 0;
  transition: all 0.3s;
  cursor: pointer;
}

.signUpModal .sign-in-wrapper .sign-in-side .forgot-psw a span:hover {
  border-bottom: 1px solid #ed4247;
}

.signUpModal .sign-in-wrapper .sign-in-side .otp,
.signUpModal .sign-in-wrapper .sign-in-side .create-link,
.signUpModal .sign-in-wrapper .sign-in-side .login-with-psw {
  text-align: center;
  margin-top: 28px;
}

.signUpModal .sign-in-wrapper .sign-in-side .otp span,
.signUpModal .sign-in-wrapper .sign-in-side .create-link span,
.signUpModal .sign-in-wrapper .sign-in-side .login-with-psw span {
  display: inline-block;
}

.signUpModal .sign-in-wrapper .sign-in-side .otp span a,
.signUpModal .sign-in-wrapper .sign-in-side .create-link span a,
.signUpModal .sign-in-wrapper .sign-in-side .login-with-psw span a {
  color: #ed4247;
  border-bottom: 0;
  display: inline-block;
  margin-left: 4px;
  transition: all 0.3s;
  cursor: pointer;
}

.signUpModal .sign-in-wrapper .sign-in-side .otp span a:hover,
.signUpModal .sign-in-wrapper .sign-in-side .create-link span a:hover,
.signUpModal .sign-in-wrapper .sign-in-side .login-with-psw span a:hover {
  border-bottom: 1px solid #ed4247;
}

.signUpModal .sign-in-wrapper .sign-in-side .login-with-psw {
  margin-top: 40px;
}

.signUpModal .sign-in-wrapper .sign-in-side .fill-btn {
  width: 100%;
  margin-top: 20px;
}

.signUpModal .sign-in-wrapper .sign-in-side .create-link {
  margin-top: 24px;
}

.signUpModal .sign-in-wrapper .signin-img-side {
  width: 48.62%;
  background: linear-gradient(11.05deg, #e0208c 2.97%, #fa6400 101.52%);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  padding-top: 36px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 48px;
  position: relative;
}

.signUpModal .sign-in-wrapper .signin-img-side .white-close {
  position: absolute;
  top: 16px;
  right: 16px;
  height: 24px;
  width: 24px;
  cursor: pointer;
}

.signUpModal .sign-in-wrapper .signin-img-side h6,
.signUpModal .sign-in-wrapper .signin-img-side .h6 {
  color: #fff;
  text-align: center;
  margin-bottom: 24px;
}

.signUpModal .sign-in-wrapper .signin-img-side .img-wrapper {
  padding-left: 25px;
  padding-right: 25px;
}


.signUpModal .sign-in-wrapper .signin-img-side>h5,
.signUpModal .sign-in-wrapper .signin-img-side>.h5 {
  color: #fff;
  text-align: center;
  margin-bottom: 9px;
}

.signUpModal .sign-in-wrapper .signin-img-side>span {
  color: #fff;
  display: block;
  text-align: center;
  margin-bottom: 48px;
}

.signUpModal .side-content-wrapper .sub-box {
  background: var(--white-bg);
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 29px 20px 20px;
  position: relative;
}

.signUpModal .side-content-wrapper .sub-box .this-title {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white-bg);
  border: 1px solid var(--border-4);
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 3px 10px;
  font-family: noto_reg;
  color: #ED4247;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}


.signUpModal .side-content-wrapper .sub-box p.s1 {
  margin-bottom: 23px;
}

.signUpModal .side-content-wrapper .sub-box h5,
.signUpModal .side-content-wrapper .sub-box .h5 {
  color: #ED4247;
  margin-bottom: 1px;
}

.signUpModal .side-content-wrapper .sub-box span {}


.c-dropdown {
  height: 24px;
}

.c-dropdown>button {
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  height: 24px;
}

.c-dropdown>button img {
  display: block;
}

.c-dropdown .dropdown-toggle::after {
  display: none;
}

.c-dropdown .dropdown-menu {
  background: #fff;
  border: 0;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding-top: 8px;
  background: var(--dropdown-bg);
  padding-bottom: 8px;
  min-width: 224px;
}

.edit-review-dropdown.c-dropdown .dropdown-menu {
  min-width: 150px
}

.edit-news-dropdown {
  margin-right: -15px;
  margin-left: 12px;
}

.edit-news-dropdown.c-dropdown .dropdown-menu {
  min-width: 150px
}

.news-edit-sec {
  margin-bottom: 7px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.news-edit-sec h6,
.news-edit-sec .h6 {
  margin-bottom: 0 !important;
}

.c-dropdown .dropdown-item {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  padding: 12px 16px;
  cursor: pointer;
}

.c-dropdown .dropdown-item img {
  height: 20px;
  width: 20px;
  margin-right: 8px;
  display: block;
}

.c-dropdown .dropdown-item.active,
.c-dropdown .dropdown-item:hover {
  background-color: var(--hover-bg);
}

.rounded-dot-menu {
  height: 40px;
  width: 40px;
}

.aboutchangepopup .modal-content {
  background: var(--dropdown-bg);
  border: 0;
}

.aboutchangepopup .modal-header {
  border-color: var(--border-9);
}

.aboutchangepopup .modal-footer {
  border: 0;
}

.aboutchangepopup textarea {
  outline: none;
  display: block;
  letter-spacing: 0.5px;
  color: var(--color-1);
  width: 100%;
  font-size: 16px;
  background-color: transparent;
  font-family: sarabun_reg;
  resize: none;
  min-height: 190px;
  border: 1px solid var(--border-4);
  padding: 12px;
}

textarea {
  scrollbar-color: var(--bg-2) var(--scroll-track-bg);
  scrollbar-width: thin;
}

textarea::-webkit-scrollbar {
  width: 4px !important;
}

textarea::-webkit-scrollbar-track {
  background: var(--scroll-track-bg) !important;
}

textarea::-webkit-scrollbar-thumb {
  background: var(--bg-2) !important;
  border-radius: 2px !important;
}

textarea::-webkit-scrollbar-thumb:hover {
  background: var(--bg-2) !important;
}

/*# sourceMappingURL=style2.css.map */






#ui-datepicker-div {
  display: none;
  background-color: var(--dropdown-bg);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
  margin-top: 0.25rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.ui-datepicker table {
  border-collapse: collapse;
  border-spacing: 0;
  font-family: 'Noto Sans JP', sans-serif;
}

.ui-datepicker-calendar thead th {
  padding: 0.25rem 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 400;
}

.ui-datepicker-calendar tbody td {
  width: 2.5rem;
  text-align: center;
  padding: 0;
}

.ui-datepicker-calendar tbody td a {
  display: block;
  border-radius: 0.25rem;
  line-height: 2rem;
  transition: 0.3s all;
  color: var(--color-2);
  font-size: 0.875rem;
  text-decoration: none;
}

.ui-datepicker-calendar tbody td a:hover {
  background-color: rgba(237, 66, 71, 0.1);
}

.ui-datepicker-calendar tbody td a.ui-state-active {
  background-color: #ED4247;
  color: var(--pure-white-1);
}

.ui-datepicker-header a.ui-corner-all {
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 2rem;
  height: 2rem;
  margin: 0.5rem;
  border-radius: 0.25rem;
  transition: 0.3s all;
}

.ui-datepicker-header a.ui-corner-all:hover {
  background-color: rgba(237, 66, 71, 0.1);
}

.ui-datepicker-header a.ui-datepicker-prev {
  left: 0;
  background: url('../img/down-dark-arrow.svg');
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
  transform: rotate(90deg);
}

.ui-datepicker-header a.ui-datepicker-next {
  right: 0;
  background: url('../img/down-dark-arrow.svg');
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
  transform: rotate(-90deg);
}

.ui-datepicker-header a>span {
  display: none;
}

.ui-datepicker-title {
  text-align: center;
  line-height: 2rem;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding-bottom: 0.25rem;
}

.ui-datepicker-week-col {
  font-weight: 400;
  font-size: 0.75rem;
}





.number-wrapper {
  position: relative;
  padding-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
}

.number-wrapper .input {
  position: relative;
}

.number-wrapper .input::after {
  position: absolute;
  content: '';
  height: 20px;
  width: 1px;
  background: var(--border-4);
  top: 50%;
  transform: translateY(-50%);
  right: -1px
}

.number-wrapper .cc-picker {
  width: 90px;
  padding-bottom: 8px;
  padding-top: 8px;
  border-bottom: 1px solid var(--border-4);
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: flex-start;
}

.number-wrapper .cc-picker-flag {
  position: static;
  margin-right: 8px;
}

.number-wrapper .cc-picker-code-select-enabled::after {
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  height: 16px;
  width: 16px;
  background: url(../img/mobile-down.svg);
  background-position: center;
  background-size: cover;
  right: 8px;
}

.number-wrapper .dropdown-toggle {
  width: 100%;
  padding-left: 0;
  border-radius: 0;
}

.number-wrapper .phone-field {
  display: none;
}

.number-wrapper .number-group {
  width: calc(100% - 90px);
}

.cc-picker-code-filter {
  border: 1px solid var(--border-3);
  box-sizing: border-box;
  box-shadow: none;
  background-color: var(--body-color);
  font-size: 12px;
  color: var(--color-1);
  font-family: noto_reg;
  font-style: normal;
  letter-spacing: 0.25px;
  padding-right: 20px;
  height: 40px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.cc-picker-code-filter::placeholder {
  font-size: 12px;
  color: var(--color-2) !important;
  font-family: noto_reg !important;
  font-weight: normal;
  font-style: normal !important;
  letter-spacing: 0.25px;
}

.cc-picker-code-filter,
.cc-picker-code-list {
  width: 352px;
  margin: 0;
}

.cc-picker-code-list .cc-picker-code {
  color: var(--color-1);
}

.cc-picker-code-list>li {
  padding: 6px 8px;
  color: var(--color-2);
  font-family: noto_reg;
}

.cc-picker-code-list>li:hover {
  background: var(--hover-bg);
}

.cc-picker-code-list {
  box-shadow: 0px 2px 16px rgb(0 0 0 / 10%);
  background: var(--dropdown-bg);
  border: 0;
  scrollbar-color: var(--bg-2) var(--scroll-track-bg);
  scrollbar-width: thin;
}

.cc-picker-code-list::-webkit-scrollbar {
  width: 4px;
}

.cc-picker-code-list::-webkit-scrollbar-track {
  background: var(--scroll-track-bg);
}

.cc-picker-code-list::-webkit-scrollbar-thumb {
  background: var(--bg-2);
  border-radius: 2px
}

.cc-picker-code-list::-webkit-scrollbar-thumb:hover {
  background: var(--bg-2);
}


.artist-detail-header {
  position: relative;
  padding-top: 72px;
}

.artist-sub-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.artist-sub-banner img {
  height: 240px;
  object-fit: cover;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.artist-detail-header .ab-img {
  height: 312px;
  width: 312px;
  border-radius: 100%;
  object-fit: cover;
  border: 8px solid var(--round-border);
}

.z-2 {
  z-index: 2;
  position: relative;
}

.artist-banner-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: 80px;
}

.artist-banner-content .data-wrapper {
  padding-left: 32px;
  width: calc(100% - 312px);
}

.artist-banner-content .data-wrapper h3,
.artist-banner-content .data-wrapper .h3 {
  margin-bottom: 26px;
}

.artist-banner-content .data-wrapper .btn-block {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.artist-banner-content .data-wrapper .btn-block .fill-btn {
  width: 152px;
}

.artist-banner-content .data-wrapper .btn-block .heart {
  height: 40px;
  width: 40px;
  margin-left: 16px;
  background: url(../img/Ellipse.svg);
  background-size: cover;
}

.artist-banner-content .data-wrapper .btn-block .heart .heart-checkmark {
  height: 22px;
  width: 22px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.artist-banner-content .data-wrapper .btn-block .more-btn {
  height: 40px;
  width: 40px;
  display: block;
  /* margin-left: 16px; */
}

.artist-banner-content .data-wrapper .btn-block .rounded-dot-menu {
  margin-left: 16px;
}

.top-artist-page {
  padding-bottom: 40px;
}

.top-artist-page .breadCrums {
  padding: 19px 0;
  margin-bottom: 20px;
}

.top-artist-page .breadCrums li {
  line-height: 16px;
  font-size: 12px;
}

.top-artist-page .breadCrums li a {
  line-height: 16px;
  letter-spacing: 0.4px;
}

.top-artist-page h4,
.top-artist-page .h4 {
  margin-bottom: 30px;
}

.top-artist-box, .fanclub-playlist-box {
  display: block;
  text-align: center;
  margin-bottom: 43px;
  transition: all .3s ease;
}

.top-artist-box:hover, .fanclub-playlist-box:hover {
  transform: scale(1.1);
}

.top-artist-box img {
  border-radius: 100%;
  display: block;
  margin-bottom: 13px;
}

.fanclub-playlist-box img {
  border-radius: 8px;
  display: block;
  margin-bottom: 13px;
}

.flex-beetwen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}


/*404 error page*/
.error-404 .width-539 {
  max-width: 539px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.error-404 img {
  max-width: 400px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 45px;
}

.error-404 h6,
.error-404 .h6 {
  margin-bottom: 27px;
}

.error-404 .fill-btn {
  width: 256px;
}

.error-404 {
  padding-bottom: 96px;
}






.newsPopup {
  overflow: hidden;
}

.newsPopup .modal-content {
  padding-left: 24px;
  padding-right: 24px;
  background: var(--dropdown-bg);
  border: 0;
}

.newsPopup .modal-content button.close {
  font-size: 14px;
  padding: 0;
}

.newsPopup .modal-content button.close span {
  font-size: 24px;
}

.newsPopup .modal-content .modal-header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  padding-top: 20px;
  padding-bottom: 17px;
  margin-bottom: 20px;
  padding-left: 0;
  border-color: var(--border-9);
}

.newsPopup .modal-content .modal-body {
  padding: 0;
}

.newsPopup .modal-content .modal-body p {
  line-height: 24px;
}

.newsPopup .modal-dialog {
  max-width: 752px;
}

.newsPopup .modal-dialog .modal-footer {
  padding-bottom: 27px;
  padding-top: 28px;
  padding-left: 0;
  padding-right: 0;
  border: 0;
}

.newsPopup .modal-dialog .modal-footer.text-left {
  justify-content: flex-start;
}







.edit-review-popup {
  overflow: hidden;
}

.edit-review-popup .modal-content {
  background: var(--dropdown-bg);
  border: 0;
}

.edit-review-popup .modal-content button.close {
  font-size: 14px;
  padding: 0;
  margin: 0;
}

.edit-review-popup .modal-content button.close span {
  font-size: 24px;
}

.edit-review-popup .modal-content .modal-header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  padding-top: 20px;
  padding-bottom: 17px;
  padding-left: 24px;
  padding-right: 24px;
  border-color: var(--border-9);
}

.edit-review-popup .modal-content .modal-body {
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
}

.edit-review-popup .modal-dialog {
  max-width: 500px;
}


.edit-review-popup label {
  font-family: noto_reg;
  color: var(--color-2);
  display: block;
  margin-bottom: 8px;
}

.edit-review-popup textarea {
  min-height: 192px;
  width: 100%;
  border: 0;
  outline: none !important;
  padding: 0;
  display: block;
  resize: vertical;
  letter-spacing: 0.5px;
  color: var(--color-1);
  font-size: 16px;
  font-family: sarabun_reg;
  background: transparent;
  /* clip-path: inset(0 4px 0 0); */
}

.edit-review-popup textarea:foucs {
  -webkit-box-shadow: unset;
  box-shadow: unset;
}

.edit-review-popup textarea::-webkit-scrollbar-button {
  display: none;
}

.edit-review-popup .m-footer {
  padding-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.edit-review-popup .m-footer .fill-btn {
  width: 192px;
}



.add-ratting-star {
  margin-top: 18px;
}

#stars {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  margin-bottom: 24px;
}

#stars li {
  display: block;
  margin-right: 8px;
  cursor: pointer;
  height: 24px;
  width: 24px;
  background: url(../img/Default-star.svg);
  background-size: cover;
  background-position: center;
  transition: all .3s;
}

#stars li.hover {
  background: url(../img/Hover-star.svg);
  background-size: cover;
  background-position: center;
}

#stars li.selected {
  background: url(../img/Selected-star.svg);
  background-size: cover;
  background-position: center;
}

.hidden-input {
  display: none;
}








.toast-top-right {
  position: fixed;
  bottom: 10px;
  right: 10px;
  box-shadow: 0px 0px 40px rgb(0 0 0 / 10%);
  border-radius: 8px;
  /* background: var(--dropdown-bg); */
  background: #323232;
  z-index: 99999;
}

.toast-top-right .toast {
  background-color: transparent;
  opacity: 1;
  border: 0;
  box-shadow: none;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 15px 16px;
}


button.toast-close-button {
  border: 0;
  color: transparent;
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  outline: none;
  height: 18px;
  width: 18px;
  background: url(../img/white-close.svg);
  background-position: center;
  background-size: cover;
  order: 2;
  margin-left: 12px;
  opacity: 0.8;
}

button.toast-close-button:disabled {
  opacity: 0.6 !important;
}

button.toast-close-button:hover {
  opacity: 1;
}

.toast-top-right .toast-message {
  color: #FFF !important;
  font-size: 12px;
  letter-spacing: 0.25px;
  font-family: noto_reg;
}

.add-news-btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  border: 0;
  cursor: pointer;
}

.add-news-btn img {
  height: 24px;
  width: 24px;
  margin-right: 8px;
  display: block;
}

.create-news-btn {
  width: 200px;
  margin-top: 8px;
}

.full-data-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  margin-bottom: 22px;
}

.full-data-header h5,
.full-data-header .h5 {
  margin-bottom: 0 !important;
}



.addNewsPopup .modal-content {
  background: var(--dropdown-bg);
  border: 0;
}

.addNewsPopup .modal-content button.close {
  font-size: 14px;
  padding: 0;
  margin: 0;
}

.addNewsPopup .modal-content button.close span {
  font-size: 24px;
}

.addNewsPopup .modal-content .modal-header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  padding-top: 20px;
  padding-bottom: 17px;
  padding-left: 24px;
  padding-right: 24px;
  border-color: var(--border-9);
}

.addNewsPopup .modal-content .modal-body {
  padding-top: 19px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
}

.addNewsPopup .modal-content .modal-body .inputs-group {
  margin-bottom: 16px;
}

.addNewsPopup .modal-dialog {
  /* max-width: 400px; */
  max-width: 752px;
}

.addNewsPopup textarea {
  outline: none;
  display: block;
  letter-spacing: 0.5px;
  color: var(--color-1);
  width: 100%;
  font-size: 16px;
  background-color: transparent;
  font-family: sarabun_reg;
  resize: none;
  min-height: 190px;
  border: 1px solid var(--border-4);
  padding: 12px;
}

.addNewsPopup label {
  font-family: noto_reg;
  color: var(--color-2);
  font-size: 14px;
  letter-spacing: 0.25px;
  line-height: 20px;
  margin-bottom: 8px;
}

.addNewsPopup .form-group {
  margin-bottom: 0;
}

/* .addNewsPopup textarea {
  resize: vertical;
  padding-bottom: 0;
  min-height: 35px;
  background: transparent;
}
.addNewsPopup textarea:foucs {
  -webkit-box-shadow: unset;
  box-shadow: unset;
} */
.addNewsPopup .m-footer {
  padding-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.addNewsPopup .m-footer .fill-btn {
  width: 352px;
  margin-left: auto;
  margin-right: auto;
}






.reviewRattingModal .modal-content {
  background: var(--dropdown-bg);
  border: 0;
}

.reviewRattingModal .modal-content button.close {
  font-size: 14px;
  padding: 0;
  margin: 0;
}

.reviewRattingModal .modal-content button.close span {
  font-size: 24px;
}

.reviewRattingModal .modal-content .modal-header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  padding-top: 20px;
  padding-bottom: 17px;
  padding-left: 24px;
  padding-right: 24px;
  border-color: var(--border-9);
}

.reviewRattingModal .modal-content .modal-body {
  padding-top: 25px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
}

.reviewRattingModal h6,
.reviewRattingModal .h6 {
  margin-bottom: 18px;
}

.reviewRattingModal .modal-content .modal-body .inputs-group {
  margin-bottom: 16px;
}

.reviewRattingModal .modal-dialog {
  max-width: 400px;
}

.reviewRattingModal textarea {
  resize: vertical;
  padding-bottom: 0;
  min-height: 35px;
  background: transparent;
}

.reviewRattingModal textarea:foucs {
  -webkit-box-shadow: unset;
  box-shadow: unset;
}

.reviewRattingModal .m-footer {
  padding-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.reviewRattingModal .m-footer .fill-btn {
  width: 100%;
}





.newPlaylistModal .modal-content {
  background: var(--dropdown-bg);
  border: 0;
}

.newPlaylistModal .modal-content button.close {
  font-size: 14px;
  padding: 0;
  margin: 0;
}

.newPlaylistModal .modal-content button.close span {
  font-size: 24px;
}

.newPlaylistModal .modal-content .modal-header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  padding-top: 20px;
  padding-bottom: 17px;
  padding-left: 24px;
  padding-right: 24px;
  border-color: var(--border-9);
}

.newPlaylistModal .modal-content .modal-body {
  padding: 24px;
}

.newPlaylistModal .modal-content .modal-body .inputs-group {
  margin-bottom: 16px;
}

.newPlaylistModal .modal-dialog {
  max-width: 400px;
}

.newPlaylistModal textarea {
  resize: vertical;
  padding-bottom: 0;
  min-height: 35px;
  background: transparent;
}

.newPlaylistModal textarea:foucs {
  -webkit-box-shadow: unset;
  box-shadow: unset;
}

.newPlaylistModal .m-footer {
  padding-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.newPlaylistModal .m-footer .fill-btn {
  width: 100%;
}





.newTopicModal .modal-content {
  background: var(--dropdown-bg);
  border: 0;
}

.newTopicModal .modal-content button.close {
  font-size: 14px;
  padding: 0;
  margin: 0;
}

.newTopicModal .modal-content button.close span {
  font-size: 24px;
}

.newTopicModal .modal-content .modal-header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  padding-top: 20px;
  padding-bottom: 17px;
  padding-left: 24px;
  padding-right: 24px;
  border-color: var(--border-9);
}

.newTopicModal .modal-content .modal-body {
  padding: 24px;
}

.newTopicModal .modal-content .modal-body .inputs-group {
  margin-bottom: 16px;
}

.newTopicModal .modal-dialog {
  max-width: 400px;
}

.newTopicModal textarea {
  resize: vertical;
  padding-bottom: 0;
  min-height: 35px;
  background: transparent;
}

.newTopicModal textarea:foucs {
  -webkit-box-shadow: unset;
  box-shadow: unset;
}

.newTopicModal .m-footer {
  padding-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.newTopicModal .m-footer .fill-btn {
  width: 100%;
}







.newTopicModal .modal-content {
  background: var(--dropdown-bg);
  border: 0;
}

.newTopicModal .modal-content button.close {
  font-size: 14px;
  padding: 0;
  margin: 0;
}

.newTopicModal .modal-content button.close span {
  font-size: 24px;
}

.newTopicModal .modal-content .modal-header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  padding-top: 20px;
  padding-bottom: 17px;
  padding-left: 24px;
  padding-right: 24px;
  border-color: var(--border-9);
}

.newTopicModal .modal-content .modal-body {
  padding: 24px;
}

.newTopicModal .modal-content .modal-body .inputs-group {
  margin-bottom: 16px;
}

.newTopicModal .modal-dialog {
  max-width: 400px;
}

.newTopicModal textarea {
  resize: vertical;
  padding-bottom: 0;
  min-height: 35px;
  background: transparent;
}

.newTopicModal textarea:foucs {
  -webkit-box-shadow: unset;
  box-shadow: unset;
}

.newTopicModal .m-footer {
  padding-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.newTopicModal .m-footer .fill-btn {
  width: 100%;
}





.addToPlaylistModal .modal-content {
  background: var(--dropdown-bg);
  border: 0;
}

.addToPlaylistModal .modal-content button.close {
  font-size: 14px;
  padding: 0;
  margin: 0;
}

.addToPlaylistModal .modal-content button.close span {
  font-size: 24px;
}

.addToPlaylistModal .modal-content .modal-header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  padding-top: 20px;
  padding-bottom: 17px;
  padding-left: 24px;
  padding-right: 24px;
  border-color: var(--border-9);
}

.addToPlaylistModal .modal-content .modal-body {
  padding: 24px;
}

.addToPlaylistModal .modal-content .modal-body .inputs-group {
  margin-bottom: 4px;
}

.addToPlaylistModal .modal-dialog {
  max-width: 400px;
}

.addToPlaylistModal .m-footer {
  padding-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.addToPlaylistModal .m-footer .fill-btn {
  width: 100%;
}

.existing-playlist {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-6);
}

.exist-play-scroll {
  overflow-y: auto;
  height: 176px;
  scrollbar-color: var(--bg-2) var(--scroll-track-bg);
  scrollbar-width: thin;
}

.exist-play-scroll::-webkit-scrollbar {
  width: 4px;
}

.exist-play-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.exist-play-scroll::-webkit-scrollbar-thumb {
  background: var(--bg-2);
  border-radius: 2px
}

.exist-play-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--bg-2);
}

.existing-playlist h6,
.existing-playlist .h6 {
  margin-bottom: 18px;
}

.existing-box {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  cursor: pointer;
}

.existing-box>img {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 8px;
}

.existing-box .existing-content {
  padding-left: 16px;
}

.existing-box .existing-content span {
  display: block;
  margin-bottom: 4px;
}

.create-new-playlist {
  padding-top: 24px;
}

.create-new-playlist h6,
.create-new-playlist .h6 {
  margin-bottom: 10px;
}







.deletePopup .modal-content {
  background: var(--dropdown-bg);
  border: 0;
}

.deletePopup .modal-content .modal-body .close {
  width: 24px;
  height: 24px;
  display: block;
  opacity: 0.8;
  position: absolute;
  top: 24px;
  right: 24px;
  cursor: pointer;
}

.deletePopup .modal-content .modal-body .close:hover {
  opacity: 1 !important;
}

.deletePopup .modal-content .modal-body {
  padding: 36px 0 25px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.deletePopup .delete-photo {
  width: 200px;
  padding-top: 4px;
}

.deletePopup .delete-content {
  width: calc(100% - 200px);
  padding-left: 32px;
}

.deletePopup .modal-content .modal-body img {
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.deletePopup .modal-content .modal-body h5,
.deletePopup .modal-content .modal-body .h5 {
  margin-bottom: 12px;
}

.deletePopup .modal-dialog {
  max-width: 648px;
}

.deletePopup .delete-footer {
  margin: 0 -8px;
  padding-top: 21px;
}

.deletePopup .delete-footer .fill-btn,
.deletePopup .delete-footer .border-btn {
  margin: 0 8px;
  width: 144px;
}


.mb-24 {
  margin-bottom: 24px;
}


.password-successfull {
  padding-top: 74px;
  padding-bottom: 96px;
  text-align: center;
}

.password-successfull img {
  display: block;
  height: 96px;
  width: 96px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
}

.password-successfull h4,
.password-successfull .h4 {
  margin-bottom: 17px;
}

.password-successfull p {
  margin-bottom: 41px;
}

.password-successfull .fill-btn {
  max-width: 352px;
  display: flex;
  margin-left: auto;
  margin-right: auto;
}





.create-new-events-page {
  padding-top: 28px;
  padding-bottom: 88px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.create-new-events-page h5,
.create-new-events-page .h5 {
  text-align: center;
  margin-bottom: 9px;
}

.create-new-events-page>span {
  display: block;
  text-align: center;
}

.create-new-events-page .banner-error {
  max-width: 352px;
  margin-left: auto;
  margin-right: auto;
}

.PGP-wrapper {
  margin-top: 33px;
}

.file-upload .image-box {
  max-width: 352px;
  height: auto;
  background: url(../img/cne-img.svg);
  background-position: center;
  background-size: cover;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.file-upload .image-box.upload-s_banner {
  background: url(../img/cne-img_654_368.svg);
  background-position: center;
  background-size: cover;
}

.input-img-sec {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* .file-upload .image-box img {
  height: auto;
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  
} */
.file-upload .image-box .height-img {
  height: auto;
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  visibility: hidden;
}

.CNE-fields {
  max-width: 352px;
  margin-left: auto;
}

.CNE-fields .s1 {
  margin-bottom: 11px;
}

.CNE-fields>span {
  display: block;
  margin-bottom: 20px;
}

.CNE-fields .inputs-group,
.CNE-fields .date-group {
  margin-bottom: 16px;
}

.CNE-fields .inputs-group textarea {
  height: 38px;
  min-height: 38px;
}

.CNE-fields .location-field a {
  position: absolute;
  height: 24px;
  width: 24px;
  display: block;
  right: 8px;
  top: 25px;
}

.CNE-fields .location-field a img {
  display: block;
}

.CNE-fields .fill-btn {
  margin-top: 24px;
  width: 100%;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
  width: 170px;
  padding: 6px;
  margin: 2px 0;
  background-color: var(--dropdown-bg);
  box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 10%);
  border: 0;
  font-family: noto_reg;
}

.bootstrap-datetimepicker-widget table td {
  height: auto;
  line-height: unset;
  width: unset;
  padding: 0;
  font-size: 14px;
  padding: 4px;
  color: var(--color-2);
  font-family: noto_reg;
}

.bootstrap-datetimepicker-widget a[data-action] {
  padding: 0;
}

.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after,
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before,
.bootstrap-datetimepicker-widget.dropdown-menu.top:after,
.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
  display: none;
}

.bootstrap-datetimepicker-widget table td span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 0;
  cursor: pointer;
  border-radius: 4px;
}

.bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second {
  font-size: 14px;
  width: 100%;
  font-family: noto_bold;
}

.bootstrap-datetimepicker-widget .separator {
  width: 20px;
}

.bootstrap-datetimepicker-widget .fa-chevron-up {
  height: 24px;
  width: 24px;
  display: block;
  background: url(../img/down-dark-arrow.svg) !important;
  background-position: center;
  transform: rotate(-180deg);
  background-size: cover;
}

.bootstrap-datetimepicker-widget .fa-chevron-down {
  height: 24px;
  width: 24px;
  display: block;
  background: url(../img/down-dark-arrow.svg) !important;
  background-position: center;
  background-size: cover;
}

.bootstrap-datetimepicker-widget .btn-primary {
  font-size: 14px;
  background-color: #ED4247 !important;
  color: var(--pure-white-1);
  font-family: noto_reg;
  height: 30px;
  border: 0;
  width: 36px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover,
.bootstrap-datetimepicker-widget table td span:hover {
  background: rgba(237, 66, 71, 0.1);
}

.with-password.add-padding-otp-email {
  padding: 50px 0;
}

.with-password.add-padding-forgot {
  padding: 50px 0;
}

.with-password.otp-page.add-padding-otp {
  padding: 50px 0;
}






















/* Music Player css start */
.video-header {
  position: absolute;
  top: -40px;
  right: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  -webkit-align-items: center;
  z-index: 2;
  transition: all 300ms ease-in;
}

.video-header.show {
  top: 16px;
  opacity: 1;
}

.video-header.click-show {
  top: 16px;
  opacity: 1;
}

.audio-toggle-sec {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  padding-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.audio-toggle-sec .s1 {
  color: var(--pure-white-1);
  margin-right: 8px;
}

.audio-toggle-sec #button-1 .knobs:before {
  background-color: var(--pure-white-1);
}

.download-video {
  height: 32px;
  width: 32px;
  display: block;
  margin-left: 16px;
  background-color: #FFF;
  border-radius: 100%;
  padding: 4px;
}

.download-video img {
  height: 100%;
  width: 100%;
  display: block;
}


.heart.video-likes {
  height: 32px;
  width: 32px;
  margin-left: 16px;
  background-color: #FFF;
  border-radius: 100%;
}

.heart.video-likes .heart-checkmark {
  height: 24px;
  width: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../img/video-heart.svg);
  background-position: center;
  background-size: cover;
}

.heart.video-likes:hover input~.heart-checkmark {
  background: url(../img/video-hover-heart.svg);
  background-position: center;
  background-size: cover;
}

.heart.video-likes input:checked~.heart-checkmark {
  background: url(../img/video-fill-heart.svg);
  background-position: center;
  background-size: cover;
}


.video-controller {
  position: absolute;
  bottom: -56px;
  left: 16px;
  width: calc(100% - 32px);
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  padding: 8px 0;
  border-radius: 8px;
  display: flex;
  opacity: 0;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  transition: all 300ms ease-in;
}

.video-controller.show {
  bottom: 16px;
  opacity: 1;
}

.video-controller.click-show {
  bottom: 16px;
  opacity: 1;
}

.video-controller:hover {
  bottom: 16px;
  opacity: 1;
}

.video-header:hover {
  top: 16px;
  opacity: 1;
}

.settingDropdown {
  margin: 0 8px;
}

.c-dropdown.settingDropdown .dropdown-menu {
  margin: 6px 0 !important;
  transform: translate(10px, -26px) !important;
  inset: auto -78px 8px auto !important;
  background: rgba(0, 0, 0, 0.65);
  min-width: 250px;
}

.settingDropdown .dropdown-item img {
  opacity: 1 !important;
  filter: unset !important;
}

.settingDropdown .dropdown-item span {
  color: var(--pure-white-1);
  font-size: 12px;
}

.settingDropdown .dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  padding: 10px 12px;
}

.settingDropdown .video-menu-img,
.settingDropdown .video-menu-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  -webkit-align-items: center;
}

.settingDropdown .video-menu-content img {
  margin-right: 0;
  margin-left: 4px;
}

.settingDropdown .dropdown-item.active,
.settingDropdown .dropdown-item:hover {
  background-color: #34373e;
}

.video-main-menu.hide {
  display: none;
}

.play-speed-content,
.quality-content {
  display: none;
}

.play-speed-content span,
.quality-content span {
  font-size: 12px;
  color: #FFF;
}

.play-speed-content.show,
.quality-content.show {
  display: block;
}

.back-to-menu {
  cursor: pointer;
}

.video-content-scroll {
  max-height: 136px;
  overflow-y: auto;
  scrollbar-color: var(--bg-2) var(--scroll-track-bg);
  scrollbar-width: thin;
}

.video-content-scroll::-webkit-scrollbar {
  width: 4px;
}

.video-content-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.video-content-scroll::-webkit-scrollbar-thumb {
  background: var(--bg-2);
  border-radius: 2px
}

.video-content-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--bg-2);
}

.inner-content-header {
  padding: 10px 12px;
  padding-top: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.inner-content-header img {
  height: 20px;
  width: 20px;
  display: block;
  margin-right: 8px;
}

.inner-content-header span {
  color: #FFF;
}


.rightCk {
  display: inline-block;
  position: relative;
  margin-bottom: 0px;
  cursor: pointer;
  width: 100%;
  padding: 5px 12px;
  padding-left: 38px;
  user-select: none;
}

.rightCk input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  transition: all .3s;
}

.right-checkmark {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  background: transparent;
  box-sizing: border-box;
  transition: all .3s;
}

/* .rightCk:hover input ~ .right-checkmark {
  background: url(../img/hover-heart.svg);
	background-position: center;
	background-size: cover;
} */
.rightCk input:checked~.right-checkmark {
  background: url(../img/right-check.svg);
  background-position: center;
  background-size: cover;
}














.video-controller .control-btn {
  display: block;
  height: 24px;
  width: 24px;
  margin: 0 8px;
}

.video-controller .control-btn img {
  display: block;
}

.disabled-btn {
  opacity: 0.6;
  cursor: not-allowed;
}

/* .video-controller {
	position: absolute;
  bottom: 16px;
  left: 16px;
  width: calc(100% - 32px);
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  padding: 8px 0;
  border-radius: 8px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
-webkit-align-items: center;
	transition: all 0.2s ease-in 5s;
} */


/* .video-thumbnail:hover .video-controller {
	bottom: 16px;
	transition: all 0.2s ease-out;
} */

.play-btn .video-pause {
  display: none !important;
}

.play-btn.playing .video-pause {
  display: block !important;
}

.play-btn.playing .video-play {
  display: none !important;
}

.sound-btn-click .half-volume,
.sound-btn-click .mute-volume {
  display: none !important;
}

.sound-btn-click.mute-btn .mute-volume {
  display: block !important;
}

.sound-btn-click.mute-btn .full-volume,
.sound-btn-click.mute-btn .half-volume {
  display: none !important;
}

.sound-btn-click.half-btn .half-volume {
  display: block !important;
}

.sound-btn-click.half-btn .mute-volume,
.sound-btn-click.half-btn .full-volume {
  display: none !important;
}

.fullscreen .exit-screen-icon {
  display: none !important;
}

.fullscreen.fullscreen-apply .exit-screen-icon {
  display: block !important;
}

.fullscreen.fullscreen-apply .full-screen-icon {
  display: none !important;
}







.video-progress-wrapper {
  width: calc(100% - 216px);
  /* height: 50px; */
  position: relative;
  margin: 0 auto;
}

.video-progress-wrapper i {
  position: absolute;
  margin-top: -6px;
  color: #666;
}

.video-progress {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  margin: 0 auto;
  height: 4px;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  cursor: pointer;
}

.video-progress .ui-slider-range-min {
  height: 4px;
  position: absolute;
  background: #FFF;
  border: none;
  border-radius: 4px;
  outline: none;
}

.video-progress .ui-slider-handle {
  width: 12px;
  height: 12px;
  border-radius: 20px;
  background: linear-gradient(11.05deg, #E0208C 2.97%, #FA6400 101.52%);
  ;
  position: absolute;
  margin-left: -4px;
  margin-top: -4px;
  cursor: pointer;
  outline: none;
}

.video-progress .ui-slider-handle.ui-state-focus {
  box-shadow: 0 0 0 .3em rgba(237, 66, 71, 0.1)
}

.video-progress .ui-slider-handle.ui-state-active {
  transform: scale(1.4);
  box-shadow: none;
}


.sound-btn {
  position: relative;
}

.sound-btn .sound-box-wrapper {
  position: absolute;
  height: 0px;
  left: -4px;
  bottom: 24px;
  overflow: hidden;
  transition: all .3s;
}

.sound-btn:hover .sound-box-wrapper {
  height: 108px;
}

.sound-btn .sound-box {
  height: calc(100% - 8px);
  width: 32px;
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0px 2px 16px rgb(0 0 0 / 10%);
  border-radius: 8px;
  border: 0;
  padding: 18px 0;
  position: relative;
}


.volume-progress {
  margin: 0 auto;
  height: 100%;
  width: 4px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.volume-progress .ui-slider-range-min {
  height: 100%;
  width: 4px;
  bottom: 0;
  position: absolute;
  background: #FFF;
  border: none;
  border-radius: 4px;
  outline: none;
}

.volume-progress .ui-slider-handle {
  width: 12px;
  height: 12px;
  border-radius: 20px;
  background: linear-gradient(11.05deg, #E0208C 2.97%, #FA6400 101.52%);
  ;
  position: absolute;
  margin-left: -4px;
  margin-bottom: -6px;
  cursor: pointer;
  outline: none;
}

.volume-progress .ui-slider-handle.ui-state-focus {
  box-shadow: 0 0 0 .3em rgba(237, 66, 71, 0.1)
}

.volume-progress .ui-slider-handle.ui-state-active {
  transform: scale(1.2);
  box-shadow: none;
}





.video-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  margin-bottom: 16px;
}

.video-bottom-content h5,
.video-bottom-content .h5 {
  display: -webkit-box;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 2;
  font-weight: 600;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 12px;
}

.default-star-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  -webkit-align-items: center;
  cursor: pointer;
  padding-top: 6px;
}

.default-star-box img {
  display: block;
  height: 24px;
  width: 24px;
  margin-right: 4px;
}

.default-star-box span {
  display: block;
  margin-left: 4px;
  white-space: nowrap;
}

.video-artist-blog {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  margin-bottom: 23px;
}

.video-artist-blog img {
  height: 32px;
  width: 32px;
  display: block;
  border-radius: 100%;
  object-fit: cover;
  margin-right: 8px;
}


.song-list {
  height: 100%;
  padding-top: 33px;
}

.song-list .song-list-header {
  padding-left: 40px;
  padding-bottom: 17px;
  position: relative;
}

.song-list .song-list-header::after {
  position: absolute;
  content: '';
  width: calc(100% - 40px);
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border-6);
}

.song-list-wrapper {
  overflow-y: auto;
  height: calc(100% - 46px);
  padding-right: 6px;
  scrollbar-color: var(--bg-2) var(--scroll-track-bg);
  scrollbar-width: thin;
}

.song-list-wrapper ul {
  padding-bottom: 50px;
}

.song-list-wrapper::-webkit-scrollbar {
  width: 4px;
}

.song-list-wrapper::-webkit-scrollbar-track {
  background: var(--scroll-track-bg);
}

.song-list-wrapper::-webkit-scrollbar-thumb {
  background: var(--bg-2);
  border-radius: 2px
}

.song-list-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--bg-2);
}

.song-list-wrapper ul li {
  border-bottom: 1px solid transparent;
  padding: 14px 9px 14px 0;
  position: relative;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  list-style: none;
}

.song-list-wrapper ul li::after {
  height: 1px;
  background: var(--border-6);
  position: absolute;
  content: '';
  width: calc(100% - 40px);
  right: 0;
  bottom: -1px;
}

.song-list-wrapper button {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
}

.song-list-wrapper ul li .drag-handle {
  opacity: 0;
  transition: all .2s;
  display: block;
  margin-right: 7px;
  height: 24px;
  width: 24px;
  cursor: grab;
}

.song-list-wrapper ul li .drag-handle img {
  height: 100%;
  width: 100%;
  display: block;
}

.song-list-wrapper ul li:hover .drag-handle {
  opacity: 1;
  cursor: grabbing
}

.song-list-wrapper .song-list-img {
  width: 48px;
  height: 48px;
  display: block;
  margin-left: 9px;
  margin-right: 10px;
  overflow: hidden;
  position: relative;
}

.activePlaying .song-list-img::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.activePlaying .song-list-img::after {
  position: absolute;
  content: '';
  background: url(../img/video-dancer.svg);
  background-position: center;
  background-size: cover;
  height: 30px;
  width: 40px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.song-list-wrapper .song-list-img img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.song-list-wrapper .queue-name-detail {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-size: 14px;
  flex: 1;
  margin-right: 16px;
}

.song-list-wrapper .queue-name-detail .s1 {
  margin-bottom: 3px;
  display: -webkit-box;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 20px;
}

.song-list-wrapper .queue-name-detail span {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 16px;
}

.song-btn-block {
  margin-right: 54px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.song-list-wrapper .heart {
  margin-right: 8px;
  opacity: 0;
  transition: all .2s;
}

.song-list-wrapper .heart input:checked~.heart-checkmark {
  background: url(../img/fill-heart-big.svg);
  background-position: center;
  background-size: cover;
}

.song-list-wrapper .song-close,
.song-list-wrapper .song-menu,
.song-list-wrapper .player-list-dropdown .c-icon {
  height: 24px;
  width: 24px;
  display: block;
  opacity: 0;
  transition: all .2s;
}

.song-list-wrapper .song-close img,
.song-list-wrapper .song-menu img {
  display: block;
}

.song-list-wrapper .song-close {
  margin-right: 8px;
}

.song-list-wrapper ul li:hover .song-close,
.song-list-wrapper ul li:hover .song-menu,
.song-list-wrapper ul li:hover .player-list-dropdown .c-icon,
.song-list-wrapper ul li:hover .heart {
  opacity: 1;
}


.song-list-wrapper .last-duration {
  display: block;
}

.ui-sortable-helper {
  background: var(--white-bg);
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
  left: 0 !important;
}

li.ui-sortable-helper::after {
  display: none;
}

li.ui-sortable-helper .drag-handle {
  opacity: 1 !important;
}












.video-loader-wrapper {
  position: absolute;
  margin: 0px auto;
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.video-loader-wrapper:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.circular-loader {
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
}

.loader-path {
  stroke-dasharray: 150, 200;
  stroke-dashoffset: -10;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

@-webkit-keyframes color {
  0% {
    stroke: #ED4247;
  }

  40% {
    stroke: #E0208C;
  }

  66% {
    stroke: #ED4247;
  }

  80%, 90% {
    stroke: #E0208C;
  }
}

@keyframes color {
  0% {
    stroke: #ED4247;
  }

  40% {
    stroke: #E0208C;
  }

  66% {
    stroke: #ED4247;
  }

  80%, 90% {
    stroke: #E0208C;
  }
}
















.comment-list-wrapper {
  overflow: hidden;
}

.lr-carousel {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 200%;
}

.only-list-wrapper {
  transform: translate(0%);
  transition: all .3s;
  flex: 1;
  width: 100%;
}

.only-review-wrapper {
  transform: translate(0%);
  transition: all .3s;
  flex: 1;
  width: 100%;
}

.only-list-wrapper.leftList {
  transform: translateX(-100.1%);
}

.only-review-wrapper.upReview {
  transform: translateX(-100.1%);
}


.review-list {
  height: 100%;
  padding-top: 33px;
  padding-left: 40px;
}

.review-list .review-list-header {
  padding-bottom: 17px;
  position: relative;
  border-bottom: 1px solid var(--border-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.review-list-wrapper {
  height: calc(100% - 47px);
}

.review-list .review-list-header img {
  height: 24px;
  width: 24px;
  display: block;
}

.close-review-btn {
  cursor: pointer;
}

.review-and-addreview {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  border-bottom: 1px solid var(--border-6);
}

.review-and-addreview .border-btn {
  width: 160px;
}

.big-review-box,
.small-review-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.big-review-box img {
  height: 24px;
  width: 24px;
  display: block;
  margin-right: 4px;
}

.small-review-box img {
  height: 16px;
  width: 16px;
  display: block;
  margin-right: 3px;
}

.video-reviews {
  border-bottom: 1px solid var(--border-6);
  padding-top: 16px;
  padding-bottom: 20px;
}

.video-reviews .small-review-box {
  margin-bottom: 8px;
}

.video-reviews>span {
  margin-bottom: 11px;
  display: block;
  text-overflow: unset;
  cursor: pointer;
}

.video-reviews .toggle-current-ellips.ellips-add {
  display: -webkit-box;
  max-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.video-review-scroll {
  overflow-y: auto;
  height: calc(100% - 81px);
  padding-bottom: 50px;
  padding-right: 10px;
  scrollbar-color: var(--bg-2) var(--scroll-track-bg);
  scrollbar-width: thin;
}

.video-review-scroll::-webkit-scrollbar {
  width: 4px;
}

.video-review-scroll::-webkit-scrollbar-track {
  background: var(--scroll-track-bg);
}

.video-review-scroll::-webkit-scrollbar-thumb {
  background: var(--bg-2);
  border-radius: 2px
}

.video-review-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--bg-2);
}

/* range-slider {
  --element-height: 24px;
  --track-height: 4px;
  --thumb-size: 12px;
  position: relative;
  display: flex;
  align-items: center;
-webkit-align-items: center;
  height: var(--element-height);
  width: calc(100% - 216px);
  margin: 0 8px;
  min-width: 130px;
  overflow: visible;
  cursor: pointer;
  touch-action: none
}
range-slider:focus {
  outline: 0
}
range-slider[disabled] {
  filter: grayscale(1);
  opacity: .8
}
range-slider:before {
  content: "";
  display: block;
  width: 100%;
  border-radius: 4px;
  height: var(--track-height);
  border-radius: calc(var(--track-height)/2);
  background: linear-gradient(#fff, #fff) 0/var(--value-percent, 0) 100% no-repeat rgba(255,255,255,0.5)
}
range-slider:focus .thumb {
  box-shadow: 0 0 0 .3em rgba(237, 66, 71, 0.1)
}
range-slider.touch-active .thumb-wrapper .thumb {
  box-shadow: none;
  transform: scale(1.5)
}
.thumb {
  background: linear-gradient(11.05deg, #E0208C 2.97%, #FA6400 101.52%);
  border-radius: 50%;
  width: var(--thumb-size);
  height: var(--thumb-size);
  position: absolute;
  bottom: calc(var(--element-height)/2 - var(--thumb-size)/2);
  left: var(--value-percent, 0);
  margin-left: calc(var(--thumb-size)/2*-1);
  transition: transform .2s ease;
  will-change: transform;
  pointer-events: none
}
.thumb-wrapper {
  position: absolute;
  left: calc(var(--thumb-size)/2);
  right: calc(var(--thumb-size)/2);
  bottom: 0;
  height: 0;
  overflow: visible
}
output {
  font-weight: 600;
  text-align: center;
  display: none;
} */

/* Music Player css end */










.list-group .dropdown-menu {
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: var(--dropdown-bg);
  border: 0;
  margin-top: 3px;
  padding: 0;
}

.list-group .dropdown-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

.list-group .dropdown-menu li {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 21px;
  padding-right: 21px;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  background: transparent;
  border: 0;
}

.list-group .dropdown-menu li a {
  font-family: noto_reg;
  color: var(--color-1);
  font-size: 14px;
  letter-spacing: 0.0953967px;
  line-height: 24px;
}

.list-group .dropdown-menu li:hover {
  background: var(--hover-bg);
}




.video-header #button-1 .checkbox:checked+.knobs:before {
  background-color: #FFF;
}

.dark-theme .heart-checkmark {
  background: url(../img/blank-heart-white.svg);
  background-position: center;
  background-size: cover;
}

.dark-theme .song-btn-block .heart-checkmark {
  background: url(../img/player-heart-white.svg);
  background-position: center;
  background-size: cover;
}

.dark-theme .my-playlist-table table tr td .artist .like-menu .heart-checkmark {
  background: url(../img/table-like-white.svg);
  background-position: center;
  background-size: cover;
}

.dark-theme .bootstrap-datetimepicker-widget .fa-chevron-up {
  background: url(../img/down-dark-arrow-white.svg) !important;
  background-position: center;
  background-size: cover;
}

.dark-theme .bootstrap-datetimepicker-widget .fa-chevron-down {
  background: url(../img/down-dark-arrow-white.svg) !important;
  background-position: center;
  background-size: cover;
}


.hide-chat {
  display: none !important;
}

.hideScrolls {
  overflow-y: hidden;
}

.sendMsgPopup .fill-btn {
  width: 125px !important;
  margin-left: 16px;
}

.sendMsgPopup .border-btn {
  width: 125px;
}










.multi-select-group {
  margin-bottom: 16px;
}

.multi-select-group p {
  margin-top: 4px;
  letter-spacing: 0.4px;
  color: var(--color-2);
  font-size: 12px;
  line-height: 16px;
  font-family: sarabun_reg;
  display: block;
  margin-bottom: 0;
}

.multi-select-group .choices__inner {
  padding: 0;
  padding-top: 4px;
  border: 0;
  border-radius: 0;
  min-height: 35px;
  border-bottom: 1px solid var(--border-4);
  background: transparent;
}

.multi-select-group .choices__input {
  background: transparent;
  width: 50px !important;
  padding: 0;
  color: var(--color-1);
  margin-bottom: 0;
}

.multi-select-group .choices__list--dropdown .choices__item {
  padding: 6px 8px;
  color: var(--color-2) !important;
  font-family: noto_reg;
  font-size: 12px;
}

.multi-select-group .choices__list--multiple .choices__item {
  margin-bottom: 4px;
  margin-right: 4px;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--color-2);
  font-size: 12px;
  padding: 0px 6px;
  font-family: sarabun_reg;
  border-radius: 12px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  height: 22px;
}

.multi-select-group .choices[data-type*=select-multiple] .choices__button,
.multi-select-group .choices[data-type*=text] .choices__button {
  border-left: 0;
  position: relative;
  display: inline-block;
  margin: 0;
  padding-left: 0;
  background: url(../img/close-small.svg);
  background-position: center;
  background-size: cover;
  height: 12px;
  width: 12px;
  line-height: unset;
  opacity: 1;
  border-radius: 0;
  margin-left: 8px;
}

.multi-select-group .choices__list--dropdown {
  box-shadow: 0px 2px 16px rgb(0 0 0 / 10%);
  background: var(--dropdown-bg);
  border: 0;
}

.choices__list--dropdown .choices__item--selectable:after {
  display: none !important;
}

.multi-select-group .choices__list--dropdown .choices__item--selectable {
  padding: 6px 8px;
  color: var(--color-2) !important;
  font-family: noto_reg;
  font-size: 12px;
}

.multi-select-group .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--hover-bg) !important;
  ;
}

.multi-select-group .choices__list--dropdown .choices__list {
  scrollbar-color: var(--bg-2) var(--scroll-track-bg);
  scrollbar-width: thin;
  max-height: 200px;
}

.multi-select-group .choices__list--dropdown .choices__list::-webkit-scrollbar {
  width: 4px;
}

.multi-select-group .choices__list--dropdown .choices__list::-webkit-scrollbar-track {
  background: transparent;
}

.multi-select-group .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
  background: var(--bg-2);
  border-radius: 2px
}

.multi-select-group .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb:hover {
  background: var(--bg-2);
}

.not-found-text {
  text-align: center;
  padding: 16px;
}


.edit-photo-popup .modal-dialog {
  max-width: 400px
}

.edit-photo-popup .crop-img-wrapper {
  position: relative;
}

.edit-photo-popup .cropper-hidden {
  width: 100%;
  height: auto;
  visibility: hidden;
  display: block !important;
}

.edit-photo-popup .cropper-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.edit-photo-popup .modal-content {
  background: var(--dropdown-bg);
  border: 0;
}

.edit-photo-popup .modal-header {
  border-color: var(--border-9);
  padding-top: 20px;
  padding-bottom: 17px;
  padding-left: 24px;
  padding-right: 24px;
}

.edit-photo-popup .modal-body {
  padding: 24px;
}

.edit-photo-popup .cropper-line,
.edit-photo-popup .cropper-point {
  background-color: #ED4247;
}

.edit-photo-popup .modal-footer {
  border-color: var(--border-9);
  padding: 24px;
  justify-content: center;
}

.edit-photo-popup .modal-footer .fill-btn,
.edit-photo-popup .modal-footer .border-btn {
  width: 120px;
  margin: 0;
}

.edit-photo-popup .modal-footer .fill-btn {
  margin-right: 8px;
}

.edit-photo-popup .modal-footer .border-btn {
  margin-left: 8px;
}

/* style 2 css end */






/* style 3 css start */
.my-reviews-page .reviews-pagein {
  margin-bottom: 38px;
}

/* .breadcrumb-section {
  margin-top: 19px;
  margin-bottom: 25px;
  position: unset;
} */

.breadcrumb-section ul li {
  line-height: 16px;
  font-size: 12px;
}

.breadcrumb-section nav .breadcrumb {
  padding: 0;
  background-color: unset;
}

.breadcrumb-section nav .breadcrumb .breadcrumb-item {
  padding: 0;
}

.breadcrumb-section nav .breadcrumb .breadcrumb-item a {
  font-family: noto_reg;
  color: var(--color-1);
  font-size: 12px;
  letter-spacing: 0.4px;
  line-height: 16px;
  padding-right: 12px;
  padding-left: 12px;
}

.breadcrumb-section nav .breadcrumb .breadcrumb-item:first-child a {
  padding-left: 0;
}

.breadcrumb-section nav .breadcrumb .breadcrumb-item.active a {
  color: var(--color-2);
  padding-right: 0;
}

.breadcrumb-section .breadcrumb-item+.breadcrumb-item::before {
  display: inline-block;
  width: 4px;
  height: 11px;
  background: url(../img/Vector.svg);
  background-position: center;
  background-size: cover;
  content: "";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.valuable-reviews-section .reviews-iteams-main {
  border-bottom: 1px solid var(--border-6);
  padding-bottom: 27px;
  margin-bottom: 30px;
}

.valuable-reviews-section .reviews-iteams-main .reviews-iteam {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.valuable-reviews-section .reviews-iteams-main .reviews-iteam .review-featured-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
}

.valuable-reviews-section .reviews-iteams-main .reviews-iteam .review-featured-head img {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 4px;
  -o-object-fit: contain;
  object-fit: contain;
}

.valuable-reviews-section .reviews-iteams-main .reviews-iteam .review-featured-head .review-featured-title {
  margin-left: 16px;
}

.valuable-reviews-section .reviews-iteams-main .reviews-iteam .review-dottedmenu:after {
  content: "\2807";
  font-size: 24px;
  color: #1b1b1b;
}

.mysongs-review-item .songreviews-ratingbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.mysongs-review-item .songreviews-ratingbar .review-dottedmenu:after {
  content: "\2807";
  font-size: 24px;
  color: #1b1b1b;
}

.reviews-data .rating-stars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 17px;
  margin-bottom: 14px;
}

.reviews-data .rating-stars .show-star {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.reviews-data .rating-stars .fill-star,
.reviews-data .rating-stars .blank-star {
  height: 16px;
  width: 16px;
  margin-right: 3px;
}

.reviews-data .rating-stars .blank-star {
  background: url(../img/star-blank.svg);
  background-size: cover;
  background-position: center;
}

.reviews-data .rating-stars .fill-star {
  background: url(../img/star-orange.svg);
  background-size: cover;
  background-position: center;
}

.headof-sortbys {
  margin-bottom: 29px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  /* -ms-flex-wrap: wrap;
  flex-wrap: wrap; */
}

.headof-sortbys .sortbys-heading h5,
.headof-sortbys .sortbys-heading .h5 {
  margin-bottom: 9px;
}

.headof-sortbys .sortbys-heading span {
  color: var(--color-2);
}

.headof-sortbys .sortby-update {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
}

.headof-sortbys .sortby-update p {
  font-family: noto_reg;
  color: var(--color-1);
  font-size: 16px;
  line-height: 21px;
  margin-right: 16px;
  width: auto;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.headof-sortbys .sortby-update select {
  background-image: url(../img/chevron-down.svg);
  background-position: calc(100% - 9px), calc(100% - 9px);
  background-size: 24px;
  background-repeat: no-repeat;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 40px;
  width: 100%;
  outline: none;
  padding-right: 40px;
  padding-left: 16px;
  color: var(--color-1);
  font-family: noto_reg;
  font-size: 14px;
  letter-spacing: 0.25px;
  background-color: var(--white-bg);
  border: 1px solid var(--border-1);
  border-radius: 24px;
}

.forumlisting-page .forumlisting-pagein {
  margin-bottom: 83px;
}

.forumlisting-page .songsearchbar-withbtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}

.forumlisting-page .songsearchbar-withbtn .starts-newtopic {
  width: calc(100% - 224px);
}

.forumlisting-page .uploadssong-btn.addtopic-btn {
  width: 200px;
}

.forumlisting-page .header-search {
  width: calc(100% - 24px);
}

/* .forumlisting-page .breadCrums {
  padding: 0;
} */

.forumlisting-page .headof-sortbys {
  margin-bottom: 36px;
  margin-top: 14px;
}

.addnew-topicbar {
  margin-bottom: 37px;
}

.addnew-topicbar .starts-newtopic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.addnew-topicbar .starts-newtopic .header-search {
  width: 100%;
}

.addnew-topicbar .starts-newtopic .header-search input {
  width: 100%;
}

.addnew-topicbar .fill-btn {
  width: 200px;
}

.addnew-topicbar .addtopic-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.forum-listing-content .forum-iteams-main .forum-list-iteam {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  border-bottom: 1px solid var(--border-6);
  margin-bottom: 29px;
}

.forum-listing-content .forum-iteams-main .forum-list-iteam .forum-likeshits {
  margin-right: 29px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
}

.forum-listing-content .forum-iteams-main .forum-list-iteam .forum-likeshits img {
  width: auto;
  height: auto;
  margin-bottom: 6px;
}

.forum-listing-content .forum-iteams-main .forum-list-iteam .forum-list-content {
  margin-bottom: 29px;
  width: 100%;
}

.forum-listing-content .forum-iteams-main .forum-list-iteam .forum-list-content p {
  margin-bottom: 6px;
  /* line-height: 14px; */
}

.forum-listing-content .forum-iteams-main .forum-list-iteam .forum-list-content>.a {
  font-size: 16px;
  line-height: 28px;
  display: inline-block;
  margin-top: 2px;
}

.forum-listing-content .forum-iteams-main .forumlist-loadmore {
  text-align: center;
}

.forum-listing-content .forum-iteams-main .forumlist-loadmore button {
  width: 200px;
}

.plusbtn img {
  width: 16px;
  height: 16px;
  display: block;
  margin-right: 8px;
}

.forums-authorsmain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  padding-top: 18px;
  margin-top: 23px;
  border-top: 1px solid var(--border-6);
}

.forums-authorsmain .forumauthor-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
}

.forums-authorsmain .forumauthor-details img {
  height: 32px;
  width: 32px;
  border-radius: 100%;
  display: block;
  object-fit: cover;
  margin-right: 8px;
}

.forums-authorsmain .forumauthor-details .forumauth-titles {
  color: var(--color-1);
  margin-right: 12px;
}

.forums-authorsmain .forumauthor-details .forumauth-dot {
  width: 4px;
  height: 4px;
  background: var(--bg-2);
  border-radius: 100%;
}

.forums-authorsmain .forumauthor-details .forumauth-time {
  color: var(--color-2);
  margin-left: 12px;
}

.forums-authorsmain .forums-detail-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
}

.forums-authorsmain .forums-detail-btn img {
  height: 24px;
  width: 24px;
  -o-object-fit: contain;
  object-fit: contain;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.forums-authorsmain .forums-detail-btn span {
  display: inline-block;
  margin-left: 8px;
  line-height: 10px;
}

.forum-iteams-main.forum-detail-main .forum-list-iteam {
  border-bottom: 0 !important;
}

.forum-iteams-main.forum-detail-main .forums-authorsmain {
  padding-top: 13px !important;
  margin-top: 0 !important;
  padding-bottom: 21px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-6);
  border-top: 0 !important;
}

.forum-anscomments {
  border-top: 1px solid var(--border-6);
  margin-top: 29px;
}

.forum-anscomments .s2 {
  margin-top: 22px !important;
  margin-bottom: 18px !important;
}

.forum-anscomments .forum-coments-initem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: var(--bg-8);
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 24px;
  align-items: flex-start;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-radius: 8px;
}

.forum-anscomments .forum-coments-initem .forum-coment-desc span {
  color: var(--color-2);
}

.forum-anscomments .forumauthor-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  border-top: 1px solid var(--border-6);
  padding-top: 24px;
  margin-top: 20px;
}

.forum-anscomments .forumauthor-details img {
  height: 32px;
  width: 32px;
  border-radius: 100%;
  display: block;
  object-fit: cover;
  margin-right: 8px;
}

.forum-anscomments .forumauthor-details span.forumauth-titles {
  color: var(--color-1);
  margin-right: 12px;
}

.forum-anscomments .forumauthor-details .forumauth-dot {
  width: 4px;
  height: 4px;
  background: var(--bg-2);
  border-radius: 100%;
}

.forum-anscomments .forumauthor-details span.forumauth-time {
  color: var(--color-2);
  margin-left: 12px;
}

.myreview-songspage {
  margin-bottom: 63px;
}

.myreview-songspage .reviewmysong-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.myreview-songspage .reviewmysong-row .thumb-col {
  width: 200px;
}

.myreview-songspage .reviewmysong-row .review-col {
  width: calc(100% - 240px);
}

.myreview-songspage .reviewmysong-row .review-col .rating-stars {
  margin-bottom: 0;
}

.myreview-songspage .breadcrumb-section .breadCrums {
  margin-bottom: 6px;
}

.myreview-songspage h5,
.myreview-songspage .h5 {
  margin-bottom: 33px;
}

.myreview-songspage .myreview-songcard img {
  height: auto;
  width: auto;
  margin-bottom: 13px;
}

.myreview-songspage .myreview-songcard span {
  margin-top: 6px;
  display: inline-block;
}

.myreview-songspage .mysongs-review-content .mysongs-review-item .mysong-reviwtxt span {
  color: var(--color-2);
}

.myreview-songspage .mysongs-review-content .mysongs-review-item .songreviews-ratingbar .reviews-data .rating-stars {
  margin-top: 0;
}

.myreview-songspage .mysongs-review-content .mysongs-review-item .forums-authorsmain {
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-6);
  border-top: 0;
  margin-top: 0;
}

.uploadsongs-page {
  margin-bottom: 88px;
  margin-top: 28px;
}

.uploadsongs-page .uploadsong-heading {
  text-align: center;
  margin-bottom: 36px;
}

.uploadsongs-page .uploadsong-heading h5,
.uploadsongs-page .uploadsong-heading .h5 {
  margin-bottom: 9px;
}

.uploadsongs-page .uploadsong-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 872px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: auto;
  background: var(--bg-7);
  padding-top: 34px;
  padding-bottom: 34px;
  border: 1.5px dashed #ed4247;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 8px;
}

.uploadsongs-page .uploadsong-options .dragsongs {
  width: 50%;
  padding-left: 85px;
  text-align: center;
}

.uploadsongs-page .uploadsong-options .dragsongs input {
  display: none;
}

.uploadsongs-page .uploadsong-options .dragsongs span {
  display: block;
  padding-bottom: 14px;
}

.uploadsongs-page .uploadsong-options .dragsongs img {
  height: auto;
  width: auto;
  cursor: pointer;
}

.uploadsongs-page .uploadsong-options .dragsongs button {
  border: 0;
  background: unset;
  margin-bottom: 14px;
}

.middle-orline {
  height: calc(100% - 64px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.middle-orline .orcircle-mid {
  height: 100%;
  background: var(--border-3);
  position: relative;
  width: 0.5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.middle-orline .orcircle-mid span {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-3);
  border-radius: 100%;
  color: var(--color-3);
  background: var(--bg-7);
  z-index: 1;
}

.uploadsongs-page .uploadsong-options .songupload-btn {
  width: 50%;
  padding-left: 76px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.uploadsongs-page .uploadsong-options .songupload-btn button#custom-button {
  width: 200px;
  margin-bottom: 14px;
}

.uploadsongs-page .uploadsong-options .songupload-btn button#custom-button:hover {
  background-size: 200% auto;
}

.uploadsongs-page .uploadsong-options .songupload-btn span#custom-text {
  display: block;
}

.uploadsongs-page .info-performanceform {
  max-width: 727px;
  margin: auto;
  margin-top: 48px;
}

.uploadsongs-page .info-performanceform .perfo-titles {
  margin-bottom: 32px;
}

.uploadsongs-page .info-performanceform .perfo-titles h6,
.uploadsongs-page .info-performanceform .perfo-titles .h6 {
  margin-bottom: 10px;
}

.uploadsongs-page .info-performanceform .performace-forminner .reviewthumbnail-upload {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
}

.uploadsongs-page .info-performanceform .performace-forminner .reviewthumbnail-upload img {
  height: 96px;
  width: 96px;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}

.thumbnail-drop-heads {
  padding-left: 24px;
}

.uploadsongs-page .info-performanceform .performace-forminner .reviewthumbnail-upload .thumbnail-dropzone {
  position: relative;
  margin-right: 24px;
}

.uploadsongs-page .info-performanceform .performace-forminner .reviewthumbnail-upload .thumbnail-dropzone img {
  height: auto;
  width: auto;
}

.uploadsongs-page .info-performanceform .performace-forminner .perform-fields .inputs-group {
  margin-bottom: 16px;
}

.uploadsongs-page .info-performanceform .performace-forminner .perform-fields .label-select {
  padding-top: 20px;
  margin-bottom: 16px;
}

.uploadsongs-page .info-performanceform .performace-forminner .perform-fields .label-select select {
  color: var(--color-2);
}

.uploadsongs-page .info-performanceform .performace-forminner .perform-fields .fill-btn {
  width: 100%;
  margin-top: 24px;
}

.drop-zone {
  border: 1.5px dashed #ed4247;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 8px;
  height: 96px;
  width: 96px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: var(--color-4);
}

.drop-zone--over {
  border-style: solid;
}

.drop-zone__input {
  display: none;
}

.drop-zone__thumb {
  height: 96px;
  width: 96px;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--bg-4);
  background-size: cover;
  position: relative;
}

.drop-zone__thumb::after {
  visibility: hidden;
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  text-align: center;
}

.custome-drop label {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  margin-bottom: 0;
}

.custome-drop label img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.custome-drop .drop-zone__thumb {
  background-position: center !important;
  background-size: cover !important;
  position: absolute;
  border-radius: 6px;
  top: -2px;
  left: -2px;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
}

.thumb-placeholder {
  position: absolute;
}

.faqs-page {
  margin-bottom: 80px;
}

.faqs-page h5,
.faqs-page .h5 {
  margin-top: 4px;
  margin-bottom: 27px;
  text-align: center;
}

/* .faqs-page .breadCrums {
  padding: 0;
} */

.faqs-page .faq-main-pills {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-6);
  padding-bottom: 31px;
}

.faqs-page .faq-main-pills .faq-main-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid #fa6400;
  border-radius: 30px;
}

.faqs-page .faq-main-pills .faq-main-btns .faqmain-link {
  font-family: noto_reg;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--color-1);
  width: 110px;
  padding-top: 9px;
  padding-bottom: 11px;
  text-align: center;
}

.faqs-page .faq-main-pills .faq-main-btns .faqmain-link.active {
  background: linear-gradient(261.82deg, #fa6400 12.57%, #e0208c 87.43%);
  color: #ffffff;
}

.faqs-page .faq-main-pills .faq-main-btns .faqmain-link:first-child {
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

.faqs-page .faq-main-pills .faq-main-btns .faqmain-link:last-child {
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

.faqs-page .faq-sec-pill {
  border: 0;
  padding-top: 24px;
  padding-bottom: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: scroll;
  clip-path: inset(0 0 15px 0);
  background: var(--body-color);
}

.faqs-page .faq-sec-pill .faqsec-btn {
  margin-right: 8px;
}

.faqs-page .faq-sec-pill .faqsec-btn a {
  font-family: noto_reg;
  color: var(--color-1);
  font-size: 12px;
  letter-spacing: 0.4px;
  line-height: 16px;
  padding: 8px 16px 9px;
  border: 1px solid var(--border-3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 32px;
  white-space: nowrap;
}

.faqs-page .faq-sec-pill .faqsec-btn a.active {
  border: 1px solid #ed4247;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 32px;
}

.faqs-page .faq-sec-pill .faqsec-btn a:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.faqs-page .faqs-accordians .accordian-item h6,
.faqs-page .faqs-accordians .accordian-item .h6 {
  font-family: noto_bold;
  color: var(--color-1);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15px;
  line-height: 24px;
}

.faqs-page .faqs-accordians .accordian-item .accordian-head {
  padding-left: 0;
  width: 100%;
  padding-top: 13px;
  padding-bottom: 18px;
  background: unset;
  font-family: noto_bold;
  color: var(--color-1);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15px;
  line-height: 24px;
  text-align: left;
  text-transform: unset;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  position: relative;
  border-left: 0;
  border-right: 0;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.faqs-page .faqs-accordians .accordian-item .accordian-head:after {
  position: absolute;
  content: "";
  right: 0;
  background-image: url(../img/down-color-arrow.svg);
  height: 24px;
  width: 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.faqs-page .accordian-item {
  border-bottom: 1px solid var(--border-6) !important;
}

.faqs-page .faqs-accordians .accordian-item .accordian-head.collapsed:after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.faqs-page .faqs-accordians .accordian-item .card-body {
  padding: 0;
  margin-bottom: 23px;
}

.faqs-page .faqs-accordians .accordian-item .card-body p {
  font-family: noto_reg;
  color: var(--color-2);
  /* font-size: 14px;
  letter-spacing: 0.25px;
  line-height: 20px; */
}

.banner-headeroverlay {
  padding-top: 100px;
  position: relative;
  padding-bottom: 88px;
}

.banner-headeroverlay .sub-banneroverlay {
  position: absolute;
  width: 100%;
  top: 0;
}

.banner-headeroverlay .sub-banneroverlay img {
  height: 200px;
  object-fit: cover;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.banner-headeroverlay .baneroverlay-content {
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
}

.banner-headeroverlay .baneroverlay-content .avatar-overlay {
  position: relative;
  max-width: 208px;
  margin: 0 auto;
  margin-bottom: 24px;
}

.banner-headeroverlay .baneroverlay-content .avatar-overlay .avatarover-preview {
  width: 208px;
  height: 208px;
  position: relative;
  border-radius: 100%;
  border: 8px solid #f8f8f8;
}

.banner-headeroverlay .baneroverlay-content .avatar-overlay .avatarover-preview>div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.banner-headeroverlay .baneroverlay-content .avtars-content {
  text-align: center;
}

.banner-headeroverlay .baneroverlay-content .avtars-content .border-btn {
  height: 40px;
  width: 144px;
}

.banner-headeroverlay .baneroverlay-content .avtars-content h4,
.banner-headeroverlay .baneroverlay-content .avtars-content .h4 {
  margin-bottom: 22px;
}

.banner-headeroverlay .baneroverlay-content .avtars-content .avtars-likesong {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  background: rgba(237, 66, 71, 0.03);
  border: 1px solid #ed4247;
  border-radius: 8px;
  padding-top: 18px;
  padding-bottom: 18px;
  margin-top: 32px !important;
  max-width: 424px;
  margin: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.banner-headeroverlay .baneroverlay-content .avtars-content .avtars-likesong span {
  color: var(--color-2);
}

.banner-headeroverlay .baneroverlay-content .avtars-content .avtars-likesong .avtars-likehead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  text-align: left;
}

.banner-headeroverlay .baneroverlay-content .avtars-content .avtars-likesong .avtars-likehead img {
  height: 40px;
  width: 40px;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
  margin-right: 12px;
}

.banner-headeroverlay .baneroverlay-content .avtars-content .avtars-likesong .horiavtarline {
  width: 2px;
  height: 40px;
  border-left: 1px solid #fa6400;
}

.banner-headeroverlay .baneroverlay-content .avtars-content .avtars-likesong .avtars-sonhead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  text-align: left;
}

.banner-headeroverlay .baneroverlay-content .avtars-content .avtars-likesong .avtars-sonhead img {
  height: 40px;
  width: 40px;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
  margin-right: 12px;
}

.aboutchangepopup {
  overflow: hidden;
}

.aboutchangepopup .modal-content {
  padding-left: 24px;
  padding-right: 24px;
}

.aboutchangepopup .modal-content button.close {
  font-size: 14px;
  padding: 0;
}

.aboutchangepopup .modal-content button.close span {
  font-size: 24px;
}

.aboutchangepopup .modal-content .modal-header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  padding-top: 20px;
  padding-bottom: 17px;
  margin-bottom: 24px;
  padding-left: 0;
}

.aboutchangepopup .modal-content .modal-body {
  padding: 0;
}

.aboutchangepopup .modal-content .modal-body .form-group {
  margin-bottom: 0px;
}

.aboutchangepopup .modal-dialog {
  max-width: 752px;
  /* background of the scrollbar except button or resizer */
}

.aboutchangepopup .modal-dialog .modal-footer {
  padding-bottom: 24px;
  padding-top: 24px;
}

.aboutchangepopup .modal-dialog button.fill-btn {
  width: 352px;
  margin: auto;
  padding: 0;
}

.aboutchangepopup .modal-dialog label {
  font-family: noto_reg;
  color: var(--color-2);
  font-size: 14px;
  letter-spacing: 0.25px;
  line-height: 20px;
  margin-bottom: 8px;
}

/* .aboutchangepopup .modal-dialog textarea.form-control {
  height: 192px;
  border: 0;
  outline: none !important;
  padding: 0;
} */

/* .aboutchangepopup .modal-dialog textarea.form-control:foucs {
  -webkit-box-shadow: unset;
  box-shadow: unset;
}

.aboutchangepopup .modal-dialog textarea::-webkit-scrollbar-button {
  display: none;
} */

/* .aboutchangepopup .modal-dialog textarea::-webkit-scrollbar-thumb:hover {
  background-color: #a0a0a5;
  border: 4px solid #f4f4f4;
}

.aboutchangepopup .modal-dialog textarea::-webkit-scrollbar-thumb {
  background-color: #babac0;
  border-radius: 16px;
  border: 5px solid #fff;
}

.aboutchangepopup .modal-dialog textarea::-webkit-scrollbar {
  background-color: var(--white-bg);
  width: 12px;
}

.aboutchangepopup .modal-dialog textarea::-webkit-scrollbar-track {
  background-color: var(--white-bg);
}

.aboutchangepopup .modal-dialog textarea::-webkit-scrollbar-track:hover {
  background-color: #f4f4f4;
} */

/*sort bar start*/
.filter-header img {
  height: 20px;
  width: 20px;
  -o-object-fit: contain;
  object-fit: contain;
  margin-right: 8px;
}

.sortMenu {
  position: fixed;
  left: -100%;
  top: 0;
  overflow-y: auto;
  background: var(--white-bg);
  width: 100%;
  height: 100vh;
  padding-top: 16px;
  padding-left: 12px;
  padding-right: 16px;
  padding-bottom: 50px;
  transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  z-index: 999;
}

.sortMenu.active {
  left: 0;
  transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
}

.sortMenu .s1 {
  margin-bottom: 18px;
}

/*sidebar-menu*/
.closeIcons2 {
  width: 24px;
  height: 24px;
}

.fixed-right {
  position: absolute;
  right: 12px;
  top: 16px;
}

.sortbar-navigation ul {
  margin: 0;
  padding: 0;
}

.sortbar-navigation ul li {
  display: block;
}

.sortbar-navigation ul li a {
  display: block;
  text-decoration: none;
  font-family: noto_bold;
  color: var(--color-1);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.0953967px;
  line-height: 24px;
  padding: 18.5px 0;
  border-bottom: 1px solid var(--border-5);
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.sortbar-navigation ul li:first-child a {
  display: block;
  text-decoration: none;
  font-family: noto_bold;
  color: var(--color-1);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.0953967px;
  line-height: 24px;
  padding: 18.5px 0;
  border-bottom: 1px solid var(--border-5);
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

/*sort bar end*/
.mysongs-page {
  margin-top: 28px;
}

.mysongs-page .headof-sortbys {
  margin-bottom: 36px;
}

.mysongs-page .addnew-topicbar {
  margin-bottom: 0px;
  padding-bottom: 2px;
}

.mysongs-page .addnew-topicbar .addtopic-btn {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.mysongs-reviewpage .mysongsreview-pagein .breadcrumb-section .breadCrums {
  margin-bottom: 6px;
}

.mysongs-reviewpage .mysongsreview-pagein .songsearchbar-withbtn {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.mysongs-reviewpage .mysongsreview-pagein .addnew-topicbar .starts-newtopic {
  width: calc(100% - 240px);
}

.mysongs-reviewpage .mysongsreview-pagein .sortby-update {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  width: 216px;
}

.mysongs-reviewpage .mysongsreview-pagein .sortby-update p {
  font-family: noto_reg;
  color: var(--color-1);
  font-size: 16px;
  line-height: 21px;
  margin-right: 16px;
  width: auto;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.mysongs-reviewpage .mysongsreview-pagein .sortby-update select {
  background-image: url(../img/chevron-down.svg);
  background-position: calc(100% - 9px), calc(100% - 9px);
  background-size: 24px;
  background-repeat: no-repeat;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 40px;
  width: 100%;
  outline: none;
  padding-right: 40px;
  padding-left: 16px;
  color: var(--color-1);
  font-family: noto_reg;
  font-size: 14px;
  letter-spacing: 0.25px;
  background-color: var(--white-bg);
  border: 1px solid var(--border-1);
  border-radius: 24px;
}

.mymusic-page .mymusic-pagein .mymusic-topicbar {
  padding-top: 22px;
}

.mymusic-page .mymusic-pagein .mymusic-topicbar .sortby-update {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.mymusic-page .mymusic-pagein .mymusic-topicbar .sortby-update p {
  font-family: noto_reg;
  color: var(--color-1);
  font-size: 16px;
  line-height: 21px;
  margin-right: 16px;
  width: auto;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.mymusic-page .mymusic-pagein .mymusic-topicbar .sortby-update select {
  background-image: url(../img/chevron-down.svg);
  background-position: calc(100% - 9px), calc(100% - 9px);
  background-size: 24px;
  background-repeat: no-repeat;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 40px;
  width: 168px;
  outline: none;
  padding-right: 40px;
  padding-left: 16px;
  color: var(--color-1);
  font-family: noto_reg;
  font-size: 14px;
  letter-spacing: 0.25px;
  background-color: var(--white-bg);
  border: 1px solid var(--border-1);
  border-radius: 24px;
}

.mysongs-pagein .songsearchbar-withbtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}

.mysongs-pagein .songsearchbar-withbtn .starts-newtopic {
  width: calc(100% - 224px);
}

.mysongs-pagein .uploadssong-btn.addtopic-btn {
  width: 200px;
}

.mysongs-pagein .header-search {
  width: calc(100% - 24px);
}

/*# sourceMappingURL=style3.css.map */


.thumbnail-drop-heads .s1 {
  margin-bottom: 11px;
}

.thumbnail-drop-heads span {
  display: block;
}







.drop-area-zone {
  max-width: 872px;
  min-height: 192px;
  margin-left: auto;
  margin-right: auto;
  padding: 32px;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  position: relative;
  justify-content: center;
  background-color: var(--bg-7);
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='rgb(237, 66, 71)' stroke-width='3' stroke-dasharray='6%2c 14' stroke-dashoffset='3' stroke-linecap='round'/%3e%3c/svg%3e");
  border-radius: 10px;
}

.drop-error {
  max-width: 872px;
  margin-left: auto;
  margin-right: auto;
}

.drop-area-zone--over {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='red' stroke-width='3' stroke-dasharray='0' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
}

.drop-area-zone__input {
  display: none;
}

.drop-area-zone__thumb {
  width: 65px;
  height: 65px;
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
  background-image: url(../img/uploadbtn.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* .drop-area-zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  text-align: center;
} */



.drop-error .upload-progress {
  width: 100%;
  border-radius: 36px;
  background: var(--bg-13);
  height: 18px;
  margin-top: 8px;
  position: relative;
}

.drop-error .upload-progress .up-width {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  transition: width 1s;
  border-radius: 36px;
  background: linear-gradient(11.05deg, #E0208C 2.97%, #FA6400 101.52%);
}

.drop-error .upload-progress .up-width::after {
  height: 18px;
  width: 60px;
  background: linear-gradient(277.27deg, transparent 0%, #FFF 50.45%, transparent 100%);
  opacity: 0.4;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60px;
  content: '';
  animation: simmer-effect 1.5s infinite;
  -o-animation: simmer-effect 1.5s infinite;
  -webkit-animation: simmer-effect 1.5s infinite;
  -moz-animation: simmer-effect 1.5s infinite;
}
.upper-progress-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: var(--color-1);
}

@keyframes simmer-effect {
  from {
    left: -32px;
  }

  to {
    left: 100%;
  }
}

@-o-keyframes simmer-effect {
  from {
    left: -32px;
  }

  to {
    left: 100%;
  }
}

@-webkit-keyframes simmer-effect {
  from {
    left: -32px;
  }

  to {
    left: 100%;
  }
}

@-moz-keyframes simmer-effect {
  from {
    left: -32px;
  }

  to {
    left: 100%;
  }
}


.left-drop-section,
.right-btn-section {
  width: 202px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-direction: column;
}

.left-drop-section {
  margin-right: 75px;
  text-align: center;
}

.left-drop-section img {
  width: 50px;
  display: block;
  margin-bottom: 14px;
}

.left-drop-section .s1 {
  margin-bottom: 2px;
}

.left-drop-section span {
  display: block;
}

.right-btn-section {
  margin-left: 75px;
}

.right-btn-section .fill-btn {
  width: 100%;
}







.heart-big {
  height: 30px;
  width: 30px;
  margin-bottom: 2px;
}

.heart-big .heart-checkmark {
  height: 30px;
  width: 30px;
}

.heart-big .heart-checkmark {
  background: url(../img/table-like-blur.svg);
  background-position: center;
  background-size: cover;
}

.heart-big.heart:hover input~.heart-checkmark {
  background: url(../img/table-like-hover.svg);
  background-position: center;
  background-size: cover;
}

.heart-big.heart input:checked~.heart-checkmark {
  background: url(../img/fill-like.svg);
  background-position: center;
  background-size: cover;
}




.dark-theme .heart-big .heart-checkmark {
  background: url(../img/table-like-white.svg);
  background-position: center;
  background-size: cover;
}


.apply-coupon-wrapper{
  margin-top: 16px;
  position: relative;
}

.apply-coupon-wrapper .inputs-group input {
  padding-right: 100px !important;
}
.apply-coupon-wrapper .inputs-group .success{
  font-size: 12px;
  line-height: 16px;
  font-family: sarabun_reg;
  display: block;
  margin-top: 4px;
  letter-spacing: 0.4px;
  margin-bottom: 0;
  color: green;
  width: 100%;
}

.apply-coupon-wrapper .border-btn {
  width: auto;
  height: 35px;
  border: 0 !important;
  background-color: transparent !important;
  background: transparent !important;
  position: absolute;
  right: 0;
  top: 19px;
  padding-left: 12px;
  padding-right: 12px;
}

.apply-coupon-wrapper .border-btn::after{
  display: none !important;
}

.apply-coupon-wrapper .hide {
  display: none;
}



/* style 3 css end */