@tailwind base;
@tailwind components;
@tailwind utilities;

/* Font Vazir */

@font-face {
  font-family: vazir;
  src: url(../public/fonts/vazir/Vazirmatn-RD-FD-Thin.ttf);
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: vazir;
  src: url(../public/fonts/vazir/Vazirmatn-RD-FD-ExtraLight.ttf);
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: vazir;
  src: url(../public/fonts/vazir/Vazirmatn-RD-FD-Light.ttf);
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: vazir;
  src: url(../public/fonts/vazir/Vazirmatn-RD-FD-Regular.ttf);
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: vazir;
  src: url(../public/fonts/vazir/Vazirmatn-RD-FD-Medium.ttf);
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: vazir;
  src: url(../public/fonts/vazir/Vazirmatn-RD-FD-SemiBold.ttf);
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: vazir;
  src: url(../public/fonts/vazir/Vazirmatn-RD-FD-Bold.ttf);
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: vazir;
  src: url(../public/fonts/vazir/Vazirmatn-RD-FD-ExtraBold.ttf);
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: vazir;
  src: url(../public/fonts/vazir/Vazirmatn-RD-FD-Black.ttf);
  font-weight: 900;
  font-display: swap;
}

body {
  font-family: vazir;
  padding: 0;
  margin: 0;
  background: #fafafa;
}

/* transition-colors only on theme-sensitive elements, not every DOM node */
.dark,
[data-theme] {
  @apply transition-colors duration-500;
}

/* Scroll */

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  height: 50px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  height: 50px;
  border-radius: 20px;
}


.auto-complete-selector .MuiInputBase-root svg path {
  stroke: #525252 !important;
}

.dark .auto-complete-selector .MuiInputBase-root svg path {
  stroke: #a1a1a1 !important;
}

.bg-border-t-gradient-sign {
  background: linear-gradient(90deg, #e5e5e5 0%, #bababa 48.5%, #e5e5e5 100%);
}

.bg-banner-home {
  position: relative;
}

.bg-banner-footer {
  background: url(../public/assets/images/banner-footer.png);
}

.bg-banner-about {
  background: url(../public/assets/images/banner-about.png);
}

.bg-head-dashboard {
  background: url(../public/assets/images/bg-head-dashboard.png);
}

.bg-banner-home::after,
.bg-banner-stroke::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 40%;
  background: url(../public/assets/images/banner-register.png);
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  z-index: -10;
}

.bg-banner-register {
  background: url(../public/assets/images/banner-register.png);
}

.animate-open {
  animation: openx;
  animation-duration: 2s;
}

.hover-mode-item-speciality:hover p:first-child {
  color: #fafafa;
}

.hover-mode-item-speciality:hover p:last-child {
  color: #efefef;
}

.cover-head-blogs {
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.07) 31.47%,
      rgba(0, 0, 0, 0.31) 59.72%,
      rgba(0, 0, 0, 0.7) 89.39%);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.cover-head-blogs img {
  width: 100%;
}

.cover-head-blogs p {
  position: absolute;
  bottom: 32px;
  color: #fafafa;
  font-weight: 700;
}

.MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
  font-size: 16px !important;
}

@keyframes openx {
  0% {
    width: 0;
  }

  100% {
    width: 85%;
  }
}

.padding-responsive {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.hover-rotate-icon:hover svg {
  transform: rotateY(360deg);
  transition: 0.5s all;
}

.bg-head-menu {
  background: url(../public/assets/images/bg-head-menu.png);
}

.w-full-icon svg {
  width: 100%;
  height: 100%;
}

.hover-sidebar:hover .text-sidebar {
  opacity: 100;
}

.hover-sidebar:hover .logo-sidebar {
  max-width: 100%;
}

.hover-sidebar .logout-btn {
  max-width: 100% !important;
}

@media (max-width: 768px) {
  .res-field-account .MuiInputBase-input.MuiOutlinedInput-input {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .MuiModal-root .sm-modal:nth-child(3) {
    border-radius: 8px !important;
  }

}

/* Hidden Scroll */

.MuiPaper-root,
.MuiTableContainer-root {
  box-shadow: 0px 0px 18px 0px rgba(187, 187, 187, 0.25) !important;
  border-radius: 4px !important;
  border: 1px solid var(--colors-gray-50, #efefef) !important;
  background: var(--colors-white, #fff) !important;
}

.hidden-scroll::-webkit-scrollbar-thumb,
.MuiTabs-scroller::-webkit-scrollbar-thumb,
.MuiTableContainer-root::-webkit-scrollbar-thumb {
  background: transparent;
}

.hidden-scroll::-webkit-scrollbar,
.MuiTabs-scroller::-webkit-scrollbar,
.MuiTableContainer-root::-webkit-scrollbar {
  height: 0;
}

.comment-list::-webkit-scrollbar {
  height: 10px;
}

.opacity-page {
  animation: loadPageOpacity;
  animation-duration: 1s;
}

.retry-icon svg {
  animation: rotate 1s;
}

.table-shadow-none {
  box-shadow: none !important;
  border-radius: 12px !important;
}

.table-rounded-8 .table-shadow-none {
  border-radius: 8px !important;
}

.w-full-content .content-text-panel {
  width: 100%;
}

@keyframes rotate {
  from {
    rotate: 90;
  }

  to {
    rotate: -360deg;
  }
}

@keyframes loadPageOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.padding-responsive {
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 640px) {
  .padding-responsive {
    padding-left: 52px;
    padding-right: 52px;
  }
}

@media (min-width: 768px) {
  .padding-responsive {
    padding-left: 80px;
    padding-right: 80px;
  }

  .MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
    font-size: 16px !important;
  }

  .MuiModal-root .MuiBox-root {
    max-height: calc(100vh - 48px) !important;
    overflow: auto !important;
  }
}

@media (min-width: 1024px) {
  .padding-responsive {
    padding-left: 108px;
    padding-right: 108px;
  }

  .MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
    font-size: 16px !important;
  }
}

/* Date Picker Style */

.custom-datepicker .panel-jalaali,
.custom-datepicker .panel-jalaali .panel-header-inner,
.custom-datepicker .panel-jalaali .day-label-bar,
.custom-datepicker .panel-jalaali .days-body {
  width: 100%;
  max-width: 100%;
}

.custom-datepicker .panel-jalaali .day-label-bar-inner-rtl {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(14.28%, 38px));
  margin: 0;
  padding: 0;
}

.custom-datepicker .panel-jalaali .day-label-bar-inner-rtl .day-label-item {
  width: 100%;
}

.custom-datepicker .panel-jalaali .days-body {
  grid-template-columns: repeat(7, minmax(14.28%, 38px));
}

.panel-elevation {
  box-shadow: none !important;
  border: none;
  outline: none;
}

.icon-keyboard_double_arrow_right,
.icon-keyboard_double_arrow_left {
  color: transparent !important;
}

.icon-keyboard_double_arrow_right::before,
.icon-keyboard_double_arrow_left::before {
  background: url(../public/assets/icons/double-right.svg);
  width: 24px;
  height: 24px;
}

.icon-chevron-right::before,
.icon-chevron-left::before {
  content: "" !important;
  background: url(../public/assets/icons/arrow-right.svg);
  width: 24px;
  height: 24px;
}

.icon-chevron-left::before,
.icon-keyboard_double_arrow_left::before {
  rotate: 180deg;
}

.icon-left-datepicker {
  rotate: 180deg;
}

.panel-jalaali * {
  transition: 0.1s ease !important;
}

.panel-date-holder-item span {
  font-size: 18px !important;
  font-weight: 500 !important;
}

.panel-date-holder-item span:hover {
  color: #ff8848 !important;
}

.year-item-selected,
.month-item-selected {
  background: #ff8848 !important;
  border-radius: 3px !important;
}

.panel-header-rtl {
  border-bottom: none !important;
}

.day-label-bar-inner-rtl div {
  color: #6c757d !important;
}

.panel-jalaali .days-body .not-current {
  display: none !important;
}

.active-today .day-item-outer .today {
  background: #5559ce !important;
}

.active-today .panel-jalaali .day-item-outer .today .day-span-text {
  color: #ffffff !important;
}

.panel-jalaali .days-body .day.hovered span {
  color: #343a40 !important;
}

.panel-jalaali .days-body .day.weekend-day span {
  color: #b71232 !important;
}

.panel-jalaali .today,
.panel-jalaali .highlight {
  border-radius: 50% !important;
}

.panel-jalaali .today {
  border: 1px solid #ff8848 !important;
}

.panel-jalaali .highlight {
  background: #ff975d !important;
}

.panel-jalaali .highlight {
  background: #5559ce !important;
}

.panel-jalaali .panel-footer-wrapper,
.panel-jalaali .panel-footer-rtl {
  display: none !important;
}

.day.hovered.today {
  border: 1px solid #f79463;
  border-radius: 50%;
}

.day-label-bar-inner-rtl {
  background: #fff !important;
}

.day-item-outer .day-item-chain .day {
  border-radius: 50%;
}

.panel-jalaali .today {
  border-color: transparent !important;
}

.radio-mui * {
  transition: 0.1s ease !important;
}

.dark .MuiTableContainer-root {
  border-radius: 8px !important;
}

.dark .MuiPagination-root .MuiPagination-ul .MuiButtonBase-root,
.dark .MuiPagination-root .MuiPagination-ul .MuiPaginationItem-root {
  color: #a1a1a1 !important;
}

.dark .MuiTableContainer-root {
  background: transparent !important;
}

.dark .MuiSvgIcon-root {
  color: #a1a1a1 !important;
}

.dark .Mui-checked .MuiSvgIcon-root {
  fill: #5559ce !important;
}

.dark .table-profile-page .MuiTableContainer-root {
  border-bottom: 1px solid #343645 !important;
}

.table-profile-page .MuiTableContainer-root {
  border-bottom: 1px solid #dbdbdb !important;
}

.dark .table-profile-page .MuiTableContainer-root {
  border-bottom: 1px solid #343645 !important;
}

.dark .table-profile-page .MuiTableRow-root th {
  border: 1px solid #343645 !important;
}

@media (max-width: 1024px) {

  .day-label-bar-inner-rtl,
  .panel-jalaali,
  .panel-header-rtl,
  .days-body {
    background: #fff !important;
  }
}

/* Dark Style */

.dark tbody .MuiTableCell-root {
  background: #222433;
  border-color: #343645 !important;
}

.dark .MuiInputBase-root .MuiOutlinedInput-notchedOutline:hover,
.dark .MuiInputBase-root .MuiOutlinedInput-notchedOutline {
  border-color: #35343d !important;
}

.dark .Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #5559ce !important;
}

.dark .MuiList-root {
  background: #1f1d2b !important;
  color: #a1a1a1 !important;
}

.dark .MuiOutlinedInput-notchedOutline {
  border-color: #343645 !important;
}

.dark .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-track {
  background: #1f1d2b;
  height: 50px;
  border-radius: 10px;
}

.dark .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-thumb {
  background: #222433;
  height: 50px;
  border-radius: 20px;
}

.dark .custom-switch .MuiSwitch-track {
  border: 1px solid #343645 !important;
}

.dark .custom-switch .MuiSwitch-thumb::before {
  background: #d7d8ed;
}

/* End Of Dark Style */

/* Dark Date Picker */

.dark .panel-elevation,
.dark .panel-header-rtl,
.dark .day-label-bar-inner-rtl,
.dark .days-body {
  background: #222433 !important;
  transition: 0.5s ease-in !important;
}

.dark .icon-chevron-right::before,
.dark .icon-chevron-left::before {
  background: url(../public/assets/icons/arrow-right-light.svg) !important;
}

.dark .panel-jalaali .days-body .day.hovered:not(.weekend-day) span {
  color: #a1a1a1 !important;
}

.dark .panel-jalaali .days-body .day.hovered.today:not(.weekend-day) span {
  color: #d7d8ed !important;
}

.dark .MuiPaper-root {
  box-shadow: 0px 4px 25px 10px #1f1d2b !important;
  background: #222433 !important;
  border: none !important;
}

.dark .panel-header-item-text,
.dark .panel-header-year-picker span {
  color: #a1a1a1 !important;
}

.dark .panel-date-holder-item span:hover {
  color: #c7cef4 !important;
}

.dark .panel-jalaali .hovered:not(.disabled):hover {
  background: transparent !important;
}

.dark .panel-jalaali .days-body .day.hovered:not(.weekend-day) span:hover {
  color: #c7cef4 !important;
}

.dark .panel-jalaali .year-item,
.dark .panel-jalaali .month-item {
  color: #a1a1a1;
}

.dark .panel-jalaali .year-item:hover,
.dark .panel-jalaali .month-item:hover {
  background: rgba(199, 206, 244, 0.1) !important;
}

.dark .panel-jalaali .year-item-selected,
.dark .panel-jalaali .month-item-selected {
  background: #5559ce !important;
  color: #fafafa;
}

.MuiPaper-root .MuiList-root .MuiListSubheader-root {
  background: #5559ce;
}

.panel-jalaali {
  width: 464px !important;
}

.sm-datepicker .panel-jalaali {
  width: 300px !important;
}

@media (max-width: 768px) {
  .panel-jalaali {
    width: 300px !important;
  }
}

.day-label-bar,
.panel-header-inner,
.days-body {
  max-width: 100% !important;
  padding: 0 !important;
}

.years-body-rtl,
.months-body-rtl {
  min-width: 100%;
  grid-template-columns: repeat(3, minmax(33.33%, 100px)) !important;
}

.days-body {
  width: 100%;
  grid-template-columns: repeat(7, minmax(14.28%, 38px)) !important;
}

/* End Of Dark Date Picker */

/* End Date Picker Style */

.dark-active-icon svg path {
  stroke: #5559ce !important;
  fill: #5559ce !important;
}

.dark-deactive-icon svg path {
  stroke: #a1a1a1 !important;
  fill: #a1a1a1 !important;
}

.dark .MuiOutlinedInput-notchedOutline {
  border-color: #343645 !important;
}

.dark .Mui-disabled,
.dark .MuiInputBase-input {
  transition: 0.3s all;
  -webkit-text-fill-color: #a1a1a1 !important;
}

.dark .Mui-disabled {
  -webkit-text-fill-color: rgba(161, 161, 161, 0.6) !important;
}

.dark .MuiTabs-scroller,
.dark .MuiTabs-flexContainer {
  border-bottom-color: #343645 !important;
}

.dark .MuiTabs-root .MuiButtonBase-root {
  font-weight: 400 !important;
  color: #a1a1a1 !important;
}

.dark .field-date-picker svg path {
  fill: #a1a1a1;
}

.jalali-dashboard .panel-elevation,
.jalali-dashboard .panel-header-rtl,
.jalali-dashboard .day-label-bar-inner-rtl,
.jalali-dashboard .days-body {
  background: transparent !important;
  transition: 0.5s ease-in !important;
}

.dark .jalali-dashboard .panel-elevation,
.dark .jalali-dashboard .panel-header-rtl,
.dark .jalali-dashboard .day-label-bar-inner-rtl,
.dark .jalali-dashboard .days-body {
  background: transparent !important;
}

.dark .jalali-dashboard .day-label-item {
  color: #A1A1A1 !important;
}

.dark .jalali-dashboard .days-body .day:not(.weekend-day) span {
  color: #A1A1A1 !important;
}

.dark .jalali-dashboard .days-body .day.today:not(.weekend-day) {
  background: #5559CE !important;
}

.dark .jalali-dashboard .days-body .day.today:not(.weekend-day) span {
  color: #fafafa !important;
}

.dark .jalali-dashboard .days-body .day.weekend-day span {
  color: #FF5450 !important;
}

/* Toastify */

.Toastify__toast {
  padding: 12px 40px 12px 12px !important;
  font-family: vazir !important;
}

.Toastify__toast .Toastify__toast-body {
  padding: 0 !important;
}

.Toastify__toast--success {
  background: #d1e7dd !important;
  border: 1px solid #badbcc !important;
  color: #0f5132 !important;
}

.Toastify__toast--success .Toastify__toast-icon svg path {
  fill: #0f5132 !important;
}

.Toastify__toast--warning {
  background: #fff5d4 !important;
  border: 1px solid #ffecb5 !important;
  color: #664d03 !important;
}

.Toastify__toast--warning .Toastify__toast-icon svg path {
  fill: #664d03 !important;
}

.Toastify__toast--error {
  background: #f9dcdf !important;
  border: 1px solid #f5c2c7 !important;
  color: #842029 !important;
}

.Toastify__toast--error .Toastify__toast-icon svg path {
  fill: #842029 !important;
}

.Toastify__toast--info {
  background: #d5f5fc !important;
  border: 1px solid #b6effb !important;
  color: #055160 !important;
}

.Toastify__toast--info .Toastify__toast-icon svg path {
  fill: #055160 !important;
}

.Toastify__toast-container .Toastify__toast-icon {
  position: absolute;
  right: 12px;
  top: 16px;
}

/* End Of Toastify */

.text-item-head-white:hover .item-head {
  color: #d7d8ed;
}

.bg-poster {
  background-image: url(../public/assets/images/poster.png);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-stroke-circle {
  background-image: url(../public/assets/images/stroke-circle.png);
  background-size: cover;
}

.MuiButton-loading .MuiButton-loadingIndicator {
  color: #ffffff !important;
}

@keyframes spin {
  to {
    transform: rotate(90deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

/* date picker appointment */

.datePickerApt .first .panel-header-wrapper .center:first-child .iconItem:first-child,
.datePickerApt .first .panel-header-wrapper .center:last-child .iconItem:last-child,
.datePickerApt .second .panel-header-wrapper .center:first-child .iconItem:first-child,
.datePickerApt .second .panel-header-wrapper .center:last-child .iconItem:last-child {
  display: none;
}

.datePickerApt #nextIconF,
.datePickerApt #prevIconS {
  display: flex;
}

@media (min-width: 768px) {

  .datePickerApt #nextIconF,
  .datePickerApt #prevIconS {
    display: none;
  }
}

@media (min-width: 1024px) {

  .datePickerApt #nextIconF,
  .datePickerApt #prevIconS {
    display: flex;
  }
}

@media (min-width: 1280px) {

  .datePickerApt #nextIconF,
  .datePickerApt #prevIconS {
    display: none;
  }
}

/* end of date picker appointment */

.hover-item-clinic:hover h3 {
  color: #f17732;
}