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;


    align-items: center;
    align-content: center;
    justify-content: center;
    display: flex;

    font-family: "Inter", serif;

    --primary0: #FFFFFF;
    --primary1: #F7F9F9;
    --primary2: #E9EEF1;
    --primary3: #DDE3E6;
    --primary4: #728A96;
    --primary5: #39393E;
    --primary6: #04060B;

    --accent0: #C6E0FA;
    --accent1: #007DFF;
    --accent2: #0069EB;

    --complimentary0: #D8D8F1;
    --complimentary1: #5853D3;
    --complimentary2: #443FBF;

    --accept0: #D0EFD9;
    --accept1: #34C858;
    --accept2: #20B444;

    --destructive0: #F9D2D1;
    --destructive1: #FF3730;
    --destructive2: #EB231C;
}

.center_items {
    align-items: center;
    align-content: center;
    justify-content: center;
}

.input_field {
    outline: var(--primary4);
    color: var(--primary4);
}

.current_date {
    text-align: center;
    color: #232328;
}

.current_date_today {
    text-align: center;
    color: var(--primary5);
}

.blue_box {
    background: var(--accent1);
    color: var(--primary0);
}

.light_blue_box {
    background: var(--accent0);
    color: var(--accent1);
}

.new_task_note {
    min-height: 55px;
    max-height: 55px;
    min-width: 128px;
    max-width: 128px;
    border-radius: 12px;
    gap: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;

    text-align: center;
}

.common_date_box {
    --date_box_color: var(--primary4);
    --date_box_border_color: var(--primary2);
    --date_box_background_color: var(--primary0);
}

.today_date_box {
    --date_box_color: var(--accent1);
    --date_box_border_color: var(--accent1);
    --date_box_background_color: var(--primary0);
}

.active_date_box {
    --date_box_color: var(--primary0);
    --date_box_border_color: var(--accent1);
    --date_box_background_color: var(--accent1);
}

.disabled_date_box {
    --date_box_color: var(--primary4);
    --date_box_border_color: var(--primary2);
    --date_box_background_color: var(--primary0);
    opacity: 0.32;
}

.date_box {
    min-width: 46px;
    max-width: 46px;
    min-height: 46px;
    max-height: 46px;
    border-radius: 6px;
    border: 1px solid var(--date_box_border_color);
    background-color: var(--date_box_background_color);

    display: flex;
    flex-direction: column;

    align-items: center;
    align-content: center;
    justify-content: center;

    color: var(--date_box_color);
    text-align: center;
}

.settings_button {
    height: 50px;
    border-radius: 12px;
    border-color: transparent;
    background-color: var(--primary1);

    display: flex;
    gap: 6px;

    align-items: center;
    align-content: center;
    justify-content: center;

    text-align: center;
    color: rgba(35, 35, 40, 0.8);
}

.task_box {
    padding: 12px;
    border-radius: 8px;
    width: 100%;
    background: var(--primary1);
}

.task {
}

.task_label {
    text-align: left;
}

.task_text {
    text-align: left;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected_day_text {
    text-align: left;
    color: var(--primary5);
}

.time {
    min-width: 52px;
    max-width: 52px;
    min-height: 25px;
    max-height: 25px;

    display: flex;

    align-items: center;
    align-content: center;
    justify-content: center;

    border-radius: 12px;
    gap: 12px;
    background-color: var(--primary1);

    color: var(--primary4);
    text-align: center;
}

.active_time {
    background-color: #34C858;
    color: #FFFFFF;
}


.notes_text {
    text-align: left;
    color: var(--primary5);
}

.red_box {
    --colored_box_color: var(--destructive2);
    --colored_box_background_color: var(--destructive0);;
}

.blue_box {
    --colored_box_color: var(--accent2);
    --colored_box_background_color: var(--accent0);
}

.green_box {
    --colored_box_color: var(--accept2);
    --colored_box_background_color: var(--accept0);
}

.purple_box {
    --colored_box_color: var(--complimentary2);
    --colored_box_background_color: var(--complimentary0);
}

.quare_box {
    min-width: 120px;
    max-width: 120px;
}

.colored_box {
    min-height: 120px;
    max-height: 120px;
    width: 100%;  
    padding: 12px; 
    box-sizing: border-box;
    border-radius: 8px;
    gap: 2px;

    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    text-align: left;

    color: var(--colored_box_color);
    background-color: var(--colored_box_background_color);
    text-overflow: ellipsis;
    overflow: clip;
}


::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: var(--primary3);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    var(--primary3);
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #909;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:   var(--primary3);
}
::-ms-input-placeholder { /* Microsoft Edge */
    color:    var(--primary3);
}

::placeholder { /* Most modern browsers support this now. */
    color:    var(--primary3);
}

input[type="datetime-local"]:before,
input[type="datetime-local"]:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
input[type="datetime-local"]{
    margin: 0;
    box-sizing: border-box;

    background-color: #0080ff;
    padding: 15px;
    font-family: "Roboto Mono",monospace;
    color: #ffffff;
    font-size: 18px;
    border: none;
    outline: none;
    border-radius: 5px;
}
::-webkit-calendar-picker-indicator{
    background-color: #ffffff;
    padding: 5px;
    cursor: pointer;
    border-radius: 3px;
}
a {
    text-decoration: none;
}
a:link           { color: var(--accent2) }  /* unvisited links       */
a:visited        { color: var(--accent2) }  /* visited links         */
a:hover, a:focus { color: var(--accent2) }  /* user hovers, or focus */
a:active         { color: var(--accent2) }  /* active links          */

/* HTML: <div class="loader"></div> */
.loader {
    margin: auto;
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--accent2);
    animation:
      l20-1 0.8s infinite linear alternate,
      l20-2 1.6s infinite linear;
  }
  @keyframes l20-1{
     0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
     12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
     25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
     50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
     62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
     75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
     100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
  }
  @keyframes l20-2{ 
    0%    {transform:scaleY(1)  rotate(0deg)}
    49.99%{transform:scaleY(1)  rotate(135deg)}
    50%   {transform:scaleY(-1) rotate(0deg)}
    100%  {transform:scaleY(-1) rotate(-135deg)}
  }