/* root */
@import url('/design/css/fonts.css');
:root {
  --MC: #66f;
  --MCL-1: #bbc;
  --MCL0: #dde;
  --MCL1: #eef;
  --MCL2: #f6f6ff;
  --MCL3: #f8f8ff;
  --MCD1: #44f;
  --MCD2: #22f;
  --WR:#fb0;
  --WRB:#f601;
  --BW: 2px;
  --BR1: 5px;
  --BR2: 10px;
  --BR3: 15px;
  --BL0: blur(2.5px);
  --BL1: blur(5px);
  --BL2: blur(10px);
  --WT1: #00000008;
  --WT2: #0001;
  --BSN: 0px 6px 18px 5px;
  --BSB: 0 10px 20px 4px;
}
/* all elements */
*,
::after,
::before {
  text-decoration: none;
  scrollbar-color: #0003 #0000;
  scrollbar-width: thin;
  font-family: "vazirmatn", sans-serif!important;
  direction: rtl;
  outline: 0;
  line-height: 2;
  scroll-behavior: smooth;
  font-weight: 400;
  transition: 0.3s;
  vertical-align: middle;
  border: none;
  font-size: 14px;
  padding: 0;
  margin: 0;
}
/* public classes */
.center-inside-elements {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-start-column {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.flex-center-space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.horizontal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.translate-transition-timing-function {
  transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
}
.can-scroll {
  overflow: hidden scroll;
}
svg:not(.chart svg) , .apexcharts-toolbar svg{
  vertical-align: middle;
  margin-left: 0.3rem;
  fill: none;
  width: 24px;
  min-width: 24px;
  aspect-ratio: 1/1;
  stroke-linejoin: round;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
}
a:active,button:active,.user:active {
  transform: scale(0.95);
}
a.square:active,button.just-svg:active,.user:active {
  transform: scale(0.9);
}
a:active > svg,button:active > svg,.user:active > svg {
  transform: scale(0.8);
}
a {
  display: inline-block;
  cursor: pointer;
  color:#000
}
button{
  cursor: pointer;
}
.loading-svg {
  animation: rotate360 2s linear infinite;
  display: none;
  margin:0;
}
*:not(.music-player).loading > svg{
  display: none;
}
*.loading .loading-svg{
  display: inline-block!important;
}
