:root {
  --gradient: linear-gradient(
    180deg,
    rgba(45, 112, 1253, 0.73) 0%,
    #163e92 100%
  );
  --dark: #001747;
  --grey: #b1bacb;
  --grey-border: rgba(210, 210, 210, 0.75);
  --grey-light: #eeeeee;
  --grey-dark: $405175;
  --blue: #2d70fd;
  --green: #00d8a7;
  --white: #ffffff;
}

.btn {
  color: var(--white);
  font-size: 1.1rem;
  padding: 0.7rem 1.5rem;
  border-radius: 0.3rem;
  background-color: var(--blue);
  border: none;
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* Todo Container */

.cl-td-ctn {
  display: flex;
  justify-content: space-between;
}

#calendar-container,
.todo {
  flex: 1;
}

.todo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 2rem;
  margin-top: 260px;
  background: var(--white);
  padding: 3rem;
  height: 610px;
  width: calc(50% - 250px); /* Adjust width as needed */
  max-width: 30rem;
  border: 1px solid #dbd8d8;
}

h2 {
  text-transform: uppercase;
  height: 3rem;
  color: var(--dark);
  text-align: center;
}

.input {
  position: relative;
  display: flex;
}

.input-field {
  width: 100%;
  border: 0.06rem solid #d2d2d2bf;
  border-radius: 0.5rem;
  padding: 1.25rem;
  font-size: 1rem;
}

input[type="text"]::placeholder {
  color: var(--grey);
}

.todo-container {
  display: flex;
  gap: 1rem;
}

ul {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
}

li {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.3rem;
}

#todoList p {
  display: flex;
  gap: 1rem;
  color: var(--dark);
  align-items: center;
}

#todoList .disabled {
  color: #8f98a8;
}

.disabled {
  display: flex;
  text-decoration: line-through;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

input[type="checkbox"]::before {
  content: "\2713";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  font-size: 1.7rem;
  text-align: center;
  border: 0.06rem solid var(--grey-border);
  border-radius: 50%;
  color: transparent;
}

input[type="checkbox"]:checked::before {
  color: var(--white);
  background-color: var(--green);
  border: 0.06rem solid var(--green);
  border-radius: 50%;
}

.counter {
  border: 0.06rem solid var(--grey-light);
}

.counter-container {
  height: 2rem;
  display: flex;
  justify-content: space-between;
  color: var(--grey);
}

.counter-container p {
  align-self: center;
}

.counter-container button {
  border: none;
  background-color: transparent;
  color: var(--grey);
  font-size: 1rem;
}

.scroll {
  height: 15rem;
  scrollbar-width: thin;
}

.scroll::-webkit-scrollbar {
  width: 0.6rem;
}

.scroll::-webkit-scrollbar-thumb {
  background-color: var(--blue);
  border-radius: 0.5rem;
}

.scroll::-webkit-scrollbar-track {
  display: none;
}
h4{
  opacity: 0;
}

@media (max-width: 1024px) {
  .sche-jewels h3{
    font-size: 50px !important;
  }
  #calendar-container{
    height: 700px;
  }
  .todo {
    position: absolute;
    top: 70%; /* Place it below the calendar */
    left: 0; /* Align it with the left edge of the container */
    width: 100%; /* Make it full width */
    max-width: none; /* Remove max-width restriction */
    height: 500px;
    margin-top: 290px;
    z-index: 999;
  }
  .fc th, .fc td, .fc input, .fc select, .fc button, .fc a {
    font-size: 12px;
  }
  h4{
    position: relative;
    display: flex;
    opacity: 100%;
    color: #b1bacb;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    top: 150px;
  }
  #calendar {
    height: 500px !important; /* Adjust height for smaller screens */
    overflow: hidden;
  }
  .fc-header-toolbar .fc-timeGridWeek-button,
  .fc-header-toolbar .fc-listWeek-button {
    display: none !important;
  }
  .fc-toolbar-title{
    font-size: 20px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  .cl-td-ctn{
    overflow-y: hidden;
  }
}