@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); } }