@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);
/* Layouts */
.authentication-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 0 1.0875rem 1.45rem;
}

#authentication-container {
  max-width: 100vw;
}

#main-container {
  max-width: 100vw;
  display: flex;
  justify-content: start;
  align-items: center;
}

/* Components */
.router-link {
  color: #2a67f4;
}

.pulsing-overlay {
  transform: scale(1);
  animation: pulse 2s infinite;
}

.habitify-logo {
  margin: 0 auto;
}

.journal-content {
  min-height: 100vh;
  padding-top: 56px;
  margin-left: 270px;
  min-width: 375px;
  max-width: 600px;
  z-index: 1;
}

.single-progress-content {
  position: relative;
  top: 0;
  right: 0;
  min-height: 100vh;
  min-width: 375px;
  z-index: 2;
  width: 100%;
}

.journal-top-bar {
  min-width: inherit;
  max-width: inherit;
  padding: 14.5px 8px 14.5px 8px;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: inherit;
  min-height: 56px;
  z-index: 2;
  top: 0;
  overflow-x: hidden;
}

.active-nav-link {
  color: white;
  background-color: #2a67f4;
}

.date-input {
  border-bottom: 1px solid #e2e8f0;
}

.custom-start-date {
  width: 100%;
}

/* Time keeper css light mode */
.chakra-ui-light .react-timekeeper__top-bar {
  background-color: #2a67f4 !important;
}

.chakra-ui-light .react-timekeeper__tb-minute-wrapper span,
.chakra-ui-light .react-timekeeper__tb-hour-wrapper span,
.chakra-ui-light .react-timekeeper__tb-colon,
.chakra-ui-light .react-timekeeper__tb-meridiem {
  color: #fff;
}

.chakra-ui-light .react-timekeeper__clock {
  background-color: #e0e0e0;
}

.chakra-ui-light .react-timekeeper__clock-hand,
.chakra-ui-light .react-timekeeper__hand-circle-outer,
.chakra-ui-light .react-timekeeper__hand-circle-center {
  fill: #2a67f4;
  stroke: #2a67f4;
}

.chakra-ui-light .react-timekeeper__clock-hours span {
  color: #000000de;
}

.chakra-ui-light .react-timekeeper__meridiem-toggle,
.chakra-ui-light .react-timekeeper__clock-wrapper {
  background: unset;
}

.chakra-ui-light .react-timekeeper__meridiem--active {
  color: #2a67f4;
}

/* Time keeper css dark mode */
.chakra-ui-dark .react-timekeeper__top-bar {
  background-color: #2a67f4 !important;
}

.chakra-ui-dark .react-timekeeper__tb-minute-wrapper span,
.chakra-ui-dark .react-timekeeper__tb-hour-wrapper span,
.chakra-ui-dark .react-timekeeper__tb-colon,
.chakra-ui-dark .react-timekeeper__tb-meridiem {
  color: #fff;
}

.chakra-ui-dark .react-timekeeper__clock {
  background-color: #616161;
}

.chakra-ui-dark .react-timekeeper__clock-hand,
.chakra-ui-dark .react-timekeeper__hand-circle-outer,
.chakra-ui-dark .react-timekeeper__hand-circle-center {
  fill: #2a67f4;
  stroke: #2a67f4;
}

.chakra-ui-dark .react-timekeeper__clock-hours span {
  color: #fff;
}

.chakra-ui-dark .react-timekeeper__meridiem-toggle {
  background: unset;
}

.chakra-ui-dark .react-timekeeper__clock-wrapper {
  background: #424242;
}

.chakra-ui-dark .react-timekeeper__meridiem--active {
  color: #2a67f4;
}

/* Date picker */
.DayPicker-Day {
  width: 40px !important;
  height: 40px !important;
}

.DayPicker-Day--today {
  color: #477eff !important;
}

.DayPicker-Day:hover {
  background-color: #477eff14 !important;
}

.DayPicker-Day:focus {
  outline: none;
}

.DayPicker-Day--selected {
  color: #ffffff !important;
  background-color: #477eff !important;
  color: #fff !important;
}

.DayPicker-Day--selected:hover {
  background-color: rgb(70, 123, 248) !important;
}

.DayPicker-Day--disabled:hover {
  background-color: transparent !important;
}

/* scroll bar */
::-webkit-scrollbar {
  width: 10px;
}

.chakra-ui-dark ::-webkit-scrollbar-track {
  background: #262626;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Keyframes */
@keyframes pulse {
  0% {
    transform: scale(0.95);
  }

  70% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.95);
  }
}

.habit-active {
  border: 2px solid #2a67f4 !important;
  background-color: #2a67f41a !important;
}
.habit-active .item-habit-info {
  border-bottom: 1px solid transparent !important;
}
.habit-active .chakra-progress__track {
  stroke: #2a67f480;
}

/* apex-chart */
.apexcharts-tooltip {
  top: -24px !important;
  border: unset !important;
  overflow: hidden !important;
  background-color: transparent !important;
  box-shadow: unset !important;
}

.apexcharts-tooltip_arrow-box {
  padding: 8px 10px;
  background-color: #2a67f4;
  border-radius: 3px;
  color: white;
}

.apexcharts-tooltip_sub-arrow-box {
  width: 2px;
  background-color: #2a67f4;
  height: 500px;
  position: absolute;
  top: 38px;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
}

.apexcharts-xaxistooltip {
  opacity: 0 !important;
  background-color: transparent;
}

.apexcharts-xaxistooltip:after {
  color: red !important;
}

.apexcharts-series path {
  filter: unset !important;
}

.apexcharts-bar-area {
  filter: unset !important;
}

.apexcharts-marker {
  display: none;
}

.chakra-link {
  text-decoration: none;
}
/* screen authenticate */
.btn-authenticate--height{
  height: 47px!important;
}


.chakra-ui-dark input:-webkit-autofill
{
 -webkit-box-shadow: 0 0 0 30px black inset !important;
 -webkit-background-clip: text;
 -webkit-text-fill-color: #fff !important;
 border: none !important;
}

.chakra-ui-light input:-webkit-autofill
{
 -webkit-box-shadow: 0 0 0 30px #f5f5f5 inset !important;
 -webkit-background-clip: text;
 -webkit-text-fill-color: #000 !important;
 border: none !important;
}

body {
  overflow: hidden;
}

.menu-magic-overlay{
  width: 350px;
  height: 270px;
  background-color: transparent;
  opacity: .2;
  position: absolute;
  top: -221px;
  left: -302px;
}

/* custom apple sign in  */
#appleid-signin{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}
#appleid-signin img {
  opacity: 0;
}

.empty-state--scroll::-webkit-scrollbar-track
{
	border-radius: 10px;
	background-color: transparent;
}

.empty-state--scroll::-webkit-scrollbar
{
	/* width: 12px;
	background-color: #F5F5F5; */
}

.empty-state--scroll::-webkit-scrollbar-thumb
{
	border-radius: 10px;
}

.progress-journal .chakra-progress .chakra-progress__indicator {
  fill: unset;
}

.progress-journal .chakra-progress .chakra-progress__track {
  fill: unset;
  stroke: unset;
}

.completed-habit-icon .chakra-progress .chakra-progress__indicator {
  fill: unset;
}

.completed-habit-icon .chakra-progress .chakra-progress__track {
  fill: unset;
  stroke: unset;
}

.habit-action path{
  fill: unset;
  stroke: unset;
}

.habit-skip-new-journal .habit-action path {
  fill: unset;
  stroke: unset;
  opacity: unset;
}

.alphabetical-nav:hover .sub-alphabetical-nav * {
  color: white !important;
  fill: white !important;
}

.habit-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
}

.sort-action-button:hover svg * {
  fill: white !important;
}

.sort-action-button .icon-right {
  transform: rotate(180deg);
}

.sketch-picker-dark input {
  color: white;
  background-color: #262626;
}
.sketch-picker-dark label {
  color: white !important;
}