You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

1042 lines
21 KiB

@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: IRANSansX-Regular;
src: url(./assets/font/IRANSansX/Webfonts/fonts/woff/IRANSansX-Regular.woff);
}
@font-face {
font-family: IRANSansXFaNum-Regular;
src: url(./assets/font/IRANSansX/Farsi-numerals/Webfonts/Woff/IRANSansXFaNum-Regular.woff);
}
@font-face {
font-family: IRANSansXFaNum-Medium;
src: url(./assets/font/IRANSansX/Farsi-numerals/Webfonts/Woff/IRANSansXFaNum-Medium.woff);
}
.BuyInfo-footer-text-box {
@apply w-full flex items-center justify-between flex-row-reverse mb-4;
}
.CashOffice-item {
@apply w-full flex items-center justify-between py-1 flex-row-reverse;
}
.Register-box-container-col1-item{
@apply w-[48%] h-full rounded border border-color7 relative flex items-center flex-row-reverse bg-color2_5
}
.Register-box-container-col1-item-label{
@apply text-sm text-color19 absolute right-6 transition-all duration-300 pointer-events-none
}
body {
margin: 0;
/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: IRANSansXFaNum-Regular;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
* {
box-sizing: border-box;
font-family: IRANSansXFaNum-Regular;
}
/* ---------people--------------------------- */
.People-content::-webkit-scrollbar {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 5px !important;
}
.People-content::-webkit-scrollbar-button {
display: none;
appearance: none;
}
.People-content::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #97bae6;
}
.People-content::-webkit-scrollbar-track {
background-color: transparent !important;
display: none;
appearance: none;
}
.People-content{
direction: rtl;
}
.People-item{
direction: ltr;
}
/* ----------payment--------------------------- */
#Payment-box-container-main-pos-item-amount::-webkit-outer-spin-button{
-webkit-appearance: none;
margin: 0;
}
#Payment-box-container-main-pos-item-amount::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
#Payment-box-container-main-cash-item-amount::-webkit-outer-spin-button{
-webkit-appearance: none;
margin: 0;
}
#Payment-box-container-main-cash-item-amount::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
/* ----------Accounting--------------------------- */
.Accounting-main-data::-webkit-scrollbar {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 5px !important;
}
.Accounting-main-data::-webkit-scrollbar-button {
display: none;
appearance: none;
}
.Accounting-main-data::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #97bae6;
}
.Accounting-main-data::-webkit-scrollbar-track {
background-color: transparent !important;
display: none;
appearance: none;
}
.Accounting-main-data{
direction: rtl;
}
.Accounting-main-data-item{
direction: ltr;
}
/* -----------Messages-contacts----------- */
.Messages-contacts::-webkit-scrollbar {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 5px !important;
}
.Messages-contacts::-webkit-scrollbar-button {
display: none;
appearance: none;
}
.Messages-contacts::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #97bae6;
}
.Messages-contacts::-webkit-scrollbar-track {
background-color: transparent !important;
display: none;
appearance: none;
}
.Messages-contacts{
direction: rtl;
}
.Messages-contacts-item{
direction: ltr;
}
/* --------------Messages-main-box-footer-textarea--------- */
.Messages-main-box-footer-textarea::-webkit-scrollbar {
width: 0px;
}
/* ------------------UserFullInfo-refund-btn--- */
.UserFullInfo-refund-btn-text-box-input::-webkit-outer-spin-button{
-webkit-appearance: none;
margin: 0;
}
.UserFullInfo-refund-btn-text-box-input::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
/* --------------------------------- */
.Calendar * {
font-family: "iranSans";
}
.DatePicker {
position: relative;
display: inline-block;
z-index: 100;
width: 100%;
}
.DatePicker__input {
background: #FBFBFB;
width: 100%;
height: 56px ;
border: 1px solid #F0F0F0;
/* padding: 0.6em 1.2em; */
font-family: "iranSans";
text-align: center;
font-size: 24px;
color: #046AE8;
border-radius: 7px;
}
.DatePicker__input:focus {
outline: 1px solid #046AE8;
color: #046AE8;
}
.DatePicker__input.-rtl {
direction: rtl;
}
.DatePicker__input::placeholder {
color: #979797;
}
.DatePicker__input:focus::placeholder {
color: #06bace;
}
.DatePicker_calendarContainer.-top + .DatePicker_calendarArrow {
top: auto;
bottom: calc(100% + 10px);
transform: translateY(-2.5rem) rotate(180deg);
animation: fadeArrowFlipped 0.3s forwards;
}
.DatePicker__calendarContainer {
position: absolute;
width: 80%;
top: calc(100% + 20px);
left: 50%;
transform: translateX(-50%);
/* background-color: #fff; */
}
.DatePicker__calendarContainer.-top {
top: auto;
bottom: calc(100% + 20px);
}
.Calendar,
.Calendar * {
margin: 0;
padding: 0;
box-sizing: border-box;
direction: ltr;
background-color: #fff;
}
.Calendar,
.Calendar.-rtl * {
direction: rtl;
}
.DatePicker__calendarArrow {
position: absolute;
width: 0;
height: 0;
top: calc(100% + 10px);
left: 0;
right: 0;
margin: 0 auto;
border-style: solid;
z-index: 10;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
}
.Calendar {
--cl-color-black: #444444;
--cl-color-disabled: #d4d4d4;
--cl-color-error: #ff2929;
font-family: "iranSans";
font-size: 10px;
background: rgba(245, 245, 245, 0.53);
border: 1px solid #dbdbdb;
box-shadow: 0 1em em rgba(0, 0, 0, 0.07);
border-radius: 1em;
position: relative;
user-select: none;
/* padding-top: 1.2em; */
display: flex;
flex-direction: column;
width: 40em;
z-index: 10;
max-width: 90vw;
min-height: 38.7em;
}
.Calendar.dashboard {
--cl-color-black: #444444;
--cl-color-disabled: #d4d4d4;
--cl-color-error: #ff2929;
font-family: "iranSans";
font-size: 10px;
background: rgb(255, 255, 255);
border: 1px solid #edf2fb;
box-shadow: 0 1em em rgba(0, 0, 0, 0.07);
border-radius: 1em;
position: relative;
user-select: none;
padding-top: 1.2em;
display: flex;
flex-direction: column;
width: 50em;
z-index: 10;
max-width: 90vw;
min-height: 38.7em;
}
.DatePicker .Calendar,
.DatePicker__calendarArrow {
transform: translateY(2.5em);
opacity: 0;
animation: fadeCalendar 0.3s forwards;
}
.DatePicker__calendarContainer.-top .Calendar {
transform: translateY(-2.5em);
}
.Calendar.-noFocusOutline *:focus {
outline: none !important;
}
.Calendar > :not(.Calendar__footer) button {
font-family: inherit;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.Calendar__header {
display: flex;
color: var(--cl-color-black);
padding: 2em 2.9em;
align-items: center;
overflow: hidden;
}
.Calendar__monthArrowWrapper {
line-height: 0;
font-size: 3em;
padding: 3px;
position: relative;
border: none;
z-index: 1;
opacity: 1;
transition: 0.2s;
background-color: #06bace;
}
.Calendar__monthArrowWrapper:focus {
outline: 1px dashed rgba(0, 0, 0, 0.4);
outline-offset: 2px;
}
.Calendar__monthArrowWrapper:disabled,
.Calendar__monthArrowWrapper.-hidden {
opacity: 0;
pointer-events: none;
}
.Calendar__monthArrowWrapper.-left {
transform: rotate(180deg);
}
.Calendar.-rtl .Calendar__monthArrowWrapper.-left {
transform: rotate(-180deg);
}
.Calendar__monthArrowWrapper.-right {
transform: rotate(-0deg);
}
.Calendar.-rtl .Calendar__monthArrowWrapper.-right {
transform: rotate(0deg);
}
.Calendar_monthArrowWrapper:active .Calendar_monthArrow {
transform: scale(0.7);
}
.Calendar__monthArrow {
border-radius: 7px;
padding: 12px;
transition: var(--animation-duration) transform;
pointer-events: none;
background-repeat: no-repeat;
display: block;
width: 0.7em;
height: 0.7em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='15' height='15' viewBox='0 0 50 80' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23FFFFFF' stroke-width='15' stroke-linecap='round' stroke-linejoin='round' points=' 0.375,0.375 45.63,38.087 0.375,75.8 '/%3E%3C/svg%3E");
background-size: 100% 100%;
background-color: #06bace;
background-size: 10px;
background-position: center;
}
.Calendar__monthYearContainer {
flex: 1;
position: relative;
}
.Calendar__monthYear {
font-size: 2em;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
will-change: transform, opacity;
backface-visibility: hidden;
transform: translateZ(0);
transition: var(--animation-duration);
line-height: 1;
color: #246e8a;
}
.Calendar__monthYear.dashboard {
font-size: 2em;
font-weight: 500;
display: flex;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
will-change: transform, opacity;
backface-visibility: hidden;
transform: translateZ(0);
transition: var(--animation-duration);
line-height: 1;
color: #65a9ff;
}
.Calendar__monthYear.-hiddenNext {
opacity: 0;
transform: translateX(50%);
}
.Calendar.-rtl .Calendar__monthYear.-hiddenNext {
transform: translateX(-150%);
}
.Calendar__monthYear.-hiddenPrevious {
opacity: 0;
transform: translateX(-150%);
}
.Calendar.-rtl .Calendar__monthYear.-hiddenPrevious {
transform: translateX(50%);
}
.Calendar__monthYear.-shown {
opacity: 1;
margin-top: auto;
margin-bottom: auto;
transform: translateX(-50%);
}
.Calendar__monthYear.-shownAnimated {
animation: var(--animation-duration) fadeTextToCenter forwards;
}
.Calendar__monthYear > * {
padding: 0.2em 0.5em;
border: 1px solid transparent;
transition: var(--animation-duration);
font-size: 1.05em;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(0) scale(0.95);
will-change: transform;
border-radius: 5px;
}
.Calendar__monthYear:not(.-shown) > *,
.Calendar__monthYear > *.-hidden {
cursor: default;
pointer-events: none;
}
.Calendar__monthText {
margin-left: -0.3em;
}
.Calendar__yearText:last-child {
margin-right: -0.3em;
}
.Calendar__monthYear.-shown > *:hover,
.Calendar:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus,
.Calendar__monthYear > *.-activeBackground {
background: #f5f5f5;
}
.Calendar__monthText:hover {
transform: translateX(-0.2em) scale(0.95);
}
.Calendar.-rtl .Calendar__monthText:hover {
transform: translateX(0.2em) scale(0.95);
}
.Calendar__yearText:hover {
transform: translateX(0.2em) scale(0.95);
}
.Calendar.-rtl .Calendar__yearText:hover {
transform: translateX(-0.2em) scale(0.95);
}
.Calendar_monthYear .Calendar_yearText.-hidden {
transform: translateX(50%);
opacity: 0;
}
.Calendar.-rtl .Calendar_monthYear .Calendar_yearText.-hidden {
transform: translateX(-50%);
}
.Calendar_monthYear .Calendar_monthText.-hidden {
transform: translateX(-50%);
opacity: 0;
}
.Calendar.-rtl .Calendar_monthYear .Calendar_monthText.-hidden {
transform: translateX(50%);
}
.Calendar__monthYear:not(.-shown) > * {
pointer-events: none;
}
.Calendar__monthSelectorAnimationWrapper,
.Calendar__yearSelectorAnimationWrapper {
position: absolute;
width: 100%;
height: 80%;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.Calendar__monthSelectorWrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.Calendar__monthSelector {
padding: 0 2.5em;
align-content: center;
padding-bottom: 2em;
}
.Calendar__monthSelector,
.Calendar__yearSelector {
display: flex;
flex-wrap: wrap;
position: relative;
z-index: 2;
background-color: #fff;
transform: translateY(-150%);
will-change: transform;
transition: 0.6s;
height: 100%;
}
.Calendar__yearSelectorWrapper {
width: 100%;
height: 100%;
}
.Calendar__yearSelectorWrapper::after,
.Calendar__yearSelectorWrapper::before {
content: "";
width: 100%;
height: 5em;
position: absolute;
left: 0;
opacity: 0;
transition: 0.4s;
transition-delay: 0.2s;
}
.Calendar__yearSelectorWrapper::after {
background-image: linear-gradient(
to bottom,
#fff,
#fff 10%,
rgba(245, 245, 245, 0)
);
top: -0.1em;
}
.Calendar__yearSelectorWrapper::before {
background-image: linear-gradient(
to top,
#fff,
#fff 10%,
rgba(245, 245, 245, 0)
);
bottom: 0;
}
.Calendar__yearSelectorWrapper.-faded::after,
.Calendar__yearSelectorWrapper.-faded::before {
opacity: 1;
z-index: 3;
}
.Calendar__yearSelector {
align-content: flex-start;
scrollbar-width: 0;
overflow: scroll;
position: relative;
width: 100%;
padding: 5em 2em;
-ms-overflow-style: none;
}
.Calendar__yearSelector::-webkit-scrollbar {
display: none;
}
.Calendar__yearSelectorItem {
width: 25%;
display: flex;
justify-content: center;
}
.Calendar__yearSelectorItem:not(:nth-child(-n + 4)) {
margin-top: 1.5em;
}
.Calendar__yearSelectorText {
border: none;
font-size: 1.4em;
min-width: 85%;
padding: 0.2em 0.5em;
border-radius: 5px;
}
.Calendar__monthSelector.-open,
.Calendar__yearSelector.-open {
transform: translateY(0);
}
.Calendar__yearSelectorText:focus,
.Calendar__monthSelectorItemText:focus {
outline: 1px dashed rgba(0, 0, 0, 0.4);
outline-offset: 2px;
}
.Calendar__monthSelectorItem {
width: calc(100% / 3);
display: flex;
justify-content: center;
}
.Calendar__monthSelectorItem:not(:nth-child(-n + 3)) {
margin-top: 2em;
}
.Calendar__monthSelectorItemText {
border: none;
padding: 0.4em 0.4em;
border-radius: 8.5px;
font-size: 1.3em;
min-width: 70%;
transition: 0.3s;
}
.Calendar__monthSelectorItem:not(.-active)
.Calendar__monthSelectorItemText:not(:disabled):hover,
.Calendar__yearSelectorItem:not(.-active)
.Calendar__yearSelectorText:not(:disabled):hover {
background: #f5f5f5;
}
.Calendar__monthSelectorItemText:disabled,
.Calendar__yearSelectorText:disabled {
opacity: 0.5;
cursor: default;
}
.Calendar_monthSelectorItem.-active .Calendar_monthSelectorItemText,
.Calendar_yearSelectorItem.-active .Calendar_yearSelectorText {
background-color: #006c94;
color: #fff;
}
.Calendar__weekDays {
display: flex;
justify-content: space-between;
color: var(--cl-color-disabled);
font-size: 1.2em;
margin-bottom: 0.7em;
padding: 0 2.6em;
position: relative;
}
.Calendar__weekDays.dashboard {
display: flex;
justify-content: space-between;
color: var(--cl-color-disabled);
font-size: 1.2em;
margin-bottom: 0.7em;
padding: 0.75em 2.6em;
position: relative;
background-color: transparent;
/* background-color: #444444 !important; */
}
.Calendar__weekDay {
display: block;
width: calc(100% / 7);
background-color: transparent !important;
text-align: center;
text-decoration: none;
border: 0px;
color: #06bace;
margin: 0.2em;
white-space: nowrap;
}
.Calendar__weekDay.dashboard {
color: #a2b4cb;
}
.Calendar__weekDay[title] {
text-decoration: none;
}
.Calendar__sectionWrapper {
position: relative;
min-height: 25.8em;
overflow: hidden;
}
.Calendar__section {
display: flex;
flex-direction: column;
padding: 0 3.2em;
position: absolute;
color: var(--cl-color-black);
top: 0;
padding-top: 0.5em;
left: 0;
width: 100%;
will-change: transform, opacity;
transform: translateZ(0);
backface-visibility: hidden;
transition: var(--animation-duration);
}
.Calendar__section.-hiddenPrevious {
opacity: 0.5;
transform: translateX(-90%);
}
.Calendar.-rtl .Calendar__section.-hiddenPrevious {
transform: translateX(90%);
}
.Calendar__section.-hiddenNext {
opacity: 0.5;
transform: translateX(90%);
}
.Calendar.-rtl .Calendar__section.-hiddenNext {
transform: translateX(-90%);
}
.Calendar__section.-shown {
opacity: 1;
transform: translateX(0);
}
.Calendar__section.-shownAnimated {
animation: var(--animation-duration) FadeContentToCenter forwards;
}
.Calendar__weekRow {
display: flex;
width: 100%;
}
.Calendar__day {
width: calc(100% / 7 - 6px);
text-align: center;
padding: calc(0.25em - 1px);
font-size: 1.6em;
border-radius: 7px;
transition: 0.2s;
border: 1px solid transparent;
margin: 3px;
color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
cursor: pointer;
vertical-align: middle;
background-color: #f3f3f3;
color: #06bace;
}
.Calendar__day.dashboard {
width: calc(100% / 7 - 6px);
text-align: center;
padding: calc(0.25em - 1px);
font-size: 1.6em;
border-radius: 7px;
transition: 0.2s;
border: 1px solid transparent;
margin: 3px;
color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
cursor: pointer;
vertical-align: middle;
background-color: transparent;
color: #00253a;
}
.Calendar__day span {
padding: -10px;
margin-top: -30px;
font-size: 28px;
}
.Calendar__day:focus {
outline: 1px dashed rgba(0, 0, 0, 0.4);
outline-offset: 2px;
}
.Calendar__day.-ltr {
min-height: 2.6em;
font-size: 1.45em;
}
.Calendar__day.-rtl {
font-size: 1.55em;
height: 2.45em;
}
.Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover {
background-color: #dafbff;
color: #06bace;
border: 1px solid #06bace;
}
.Calendar__day.-selected,
.Calendar__day.-selectedStart,
.Calendar__day.-selectedEnd {
background: #006c94;
color: #fff;
}
.Calendar__day.-ltr.-selectedStart {
border-radius: 0;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
.Calendar__day.-rtl.-selectedStart {
border-radius: 0;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
.Calendar__day.-selectedBetween {
background: rgba(0, 108, 148, 0.07);
border-radius: 0;
}
.Calendar__day.-ltr.-selectedEnd {
border-radius: 0;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
.Calendar__day.-rtl.-selectedEnd {
border-radius: 0;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
.Calendar__day.-weekend:not(.-selected):not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) {
color: var(--cl-color-error);
}
.Calendar__day.-weekend.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after {
background: var(--cl-color-error);
}
.Calendar__day.-disabled {
color: var(--cl-color-disabled) !important;
background: transparent !important;
cursor: default !important;
}
.Calendar__day.-selected {
}
.Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) {
font-weight: 600;
color: var(--cl-color-black);
color: #000;
position: relative;
}
.Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after {
content: "";
position: absolute;
bottom: 0.2em;
display: block;
width: 0.6em;
height: 1px;
background: #000;
left: 50%;
opacity: 0.5;
transform: translateX(-50%);
transition: 0.2s;
}
.Calendar__day.-today:hover:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after {
opacity: 0;
}
.Calendar__day.-blank {
color: transparent;
cursor: default;
pointer-events: none;
}
.Calendar__footer {
position: relative;
z-index: 1;
}
.Calendar_footer .footer_Events {
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
font-family: "IranSans";
padding: 3px;
}
.Calendar_footer .footer_Events.dashboard {
display: flex;
justify-content: start;
width: 100%;
align-items: flex-start;
font-size: 12px;
font-family: "IranSans";
margin-top: 10px;
padding: 1em 2em;
border-top: 1px solid #edf2fb;
}
.Calendar_footer .footer_Events.dashboard p {
font-size: 15px;
margin: 2.5px 0px;
}
.Calendar .holiday span {
color: #ff2929;
}
.Calendar .DayNumDiv {
display: flex;
flex-direction: column;
}
.Calendar .DayNumDiv span {
margin: 0;
padding: 0;
margin-bottom: -5px;
}
.Calendar .DayNumDiv .eventDots {
margin-top: -10px;
font-size: 20px;
}
.GoToTodayButton {
background-color: #006c94;
padding: 7.5px;
font-size: 12px;
color: white;
font-family: "iranSans";
border-radius: 50%;
float: left;
margin: 15px;
}
@keyframes fadeCalendar {
from {
opacity: 0;
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeArrowFlipped {
from {
opacity: 0;
}
to {
opacity: 1;
transform: translateY(0) rotate(180deg);
}
}
@keyframes fadeTextToCenter {
to {
opacity: 1;
transform: translateX(-50%);
}
}
@keyframes FadeContentToCenter {
to {
opacity: 1;
transform: translateX(0);
}
}