ghatreh_user/src/assets/css/main.less

@import (less) './var.less';
@import (less) './fonts.less';

html {
  scroll-behavior: smooth;
}

body {
  font-family: @prefixCls-font-family !important;
  background-color: @prefixCls-background-color !important;
  //color:#555 !important;
}
body {
  color-scheme: only light;
  @apply flex justify-center relative;
  position: relative;
}
@media screen and (min-width: 426px) {
  .van-popup--bottom.van-popup--round {
    width: 426px;
    left: calc(50vw - 213px);
  }
}
.wrap-fix {
  position: fixed;
  right: 0;
  left: 0;
  @media screen and (min-width: 426px) {
    width: 426px;
    left: auto;
    right: auto;
  }
}

#goftino_w {
  right: 20px;
  @media screen and (min-width: 768px) {
    right: 30vw !important;
  }
  @media screen and (min-width: 1024px) {
    right: 34vw !important;
  }
  @media screen and (min-width: 1200px) {
    right: 36vw !important;
  }
  @media screen and (min-width: 1400px) {
    right: 40vw !important;
  }
}

:root {
  color-scheme: only light;
}

.ant-form-item {
  margin-bottom: 10px !important;

  &:last-child {
    margin-bottom: 24px !important;
  }

  .ant-form-item-label {
    text-align: right !important;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/*.van-action-sheet{
  z-index: 2001 !important;
}

.van-overlay{
  z-index: 2000 !important;
}*/

.color-transition {
  transition: color 0.3s ease;
}

.background-color-transition {
  transition: background-color 0.3s ease;
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition-duration: 0.7s;
  transition-property: height, opacity, transform;
  transition-timing-function: cubic-bezier(0.75, 0, 0.1, 1);
  overflow: hidden;
}

.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  transform: translate(100%, 0) !important;
}

.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  transform: translate(-100%, 0) !important;
}

::-webkit-scrollbar {
  width: 0px;
  display: none; /* Safari and Chrome */
}

.otp-input {
  width: 52px;
  height: 52px;
  padding: 3px;
  margin: 0 8px;
  font-size: 20px;
  text-align: center;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: white;
  //@apply bg-gray-50;

  &:focus-visible {
    background-color: #fff;
    //display: none;
    outline: none;
    border: 1px solid #521620 !important;
  }
}

.number-ltr {
  @apply flex flex-row-reverse gap-1;
  direction: ltr;
}

.ant-message {
  z-index: 1000000;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.home_appear_fade_in {
  -webkit-animation: fadein 0.7s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 0.7s; /* Firefox < 16 */
  -ms-animation: fadein 0.7s; /* Internet Explorer */
  -o-animation: fadein 0.7s; /* Opera < 12.1 */
  animation: fadein 0.7s;
}

.splash_appear_fade_in {
  -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 3s; /* Firefox < 16 */
  -ms-animation: fadein 3s; /* Internet Explorer */
  -o-animation: fadein 3s; /* Opera < 12.1 */
  animation: fadein 3s;
}

@keyframes fadeinUp {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Firefox < 16 */
@-moz-keyframes fadeinUp {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeinUp {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Internet Explorer */
@-ms-keyframes fadeinUp {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Opera < 12.1 */
@-o-keyframes fadeinUp {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}

.home_appear_fade_in_up {
  -webkit-animation: fadeinUp 0.7s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeinUp 0.7s; /* Firefox < 16 */
  -ms-animation: fadeinUp 0.7s; /* Internet Explorer */
  -o-animation: fadeinUp 0.7s; /* Opera < 12.1 */
  animation: fadeinUp 0.7s;
}

@keyframes fadeinDown {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Firefox < 16 */
@-moz-keyframes fadeinDown {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeinDown {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Internet Explorer */
@-ms-keyframes fadeinDown {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Opera < 12.1 */
@-o-keyframes fadeinDown {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}

.home_appear_fade_in_down {
  -webkit-animation: fadeinDown 0.7s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeinDown 0.7s; /* Firefox < 16 */
  -ms-animation: fadeinDown 0.7s; /* Internet Explorer */
  -o-animation: fadeinDown 0.7s; /* Opera < 12.1 */
  animation: fadeinDown 0.7s;
}
.ant-select-dropdown,
.ant-picker-dropdown {
  z-index: 99999 !important;
  position: fixed !important;
}
.ant-radio-group-solid
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{
  color: #521620 !important;
}
.ant-input-group-addon{
  background-color: #521620 !important;
  color: #e0be7f !important;
}
.ant-slider-track{
  background-color: #521620 !important;

}
.ant-slider-handle {
  background-color: #521620 !important;

}

.ant-drawer-body{
  padding: 0px !important;
}
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{
  color: white !important;
}