:root {
    --calendar-bg: #f9fcff;
    --calendar-text: #333;
    --calendar-accent: white;
    /* --calendar-border: #ddd; */
    --calendar-border: rgb(235, 231, 231);
    --calendar-header-bg: #f9fcff;
    --calendar-day-bg: #f9fcff;
    --muted-text: #999;

}



/* Blue Tint	#f5faff */

/* * {
    border: 1px solid limegreen;
} */

/* Reset common spacing */
/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: monospace; */
/* border: 2px solid lime; */
/* } */

body {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100vh;
    /* background-color: white; */
    background-color: rgba(255, 255, 255, 0.9);
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

body.dragging {
    overflow: hidden;
    position: fixed;
    width: 100%;
}


#alert-for-desktop {
    display: none;
}

#main-container {

    background-color: #e5f5e0;
    background-color: white;
    /* background-color: black; */
    /* background-color: red; */
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
    /* height: 100vh; */
    height: 100vh;
    width: 100%;
    /* font-size: 15px; */
    /* margin: 2px; */
    border-radius: 2px;
    /* padding: 0 8px 0 8px; */
    /* padding: 10px 0px 10px 0px; */
}


/* 
.menu-container {
    display: flex;
    display: none;
    flex-direction: row;
    align-items: center;
    background-color: rgb(235, 160, 160);
    background-color: #41ab5d;
    margin: 0;
    font-size: 7px;
    padding: 10px 4px 10px 4px;
    padding: 10px;
} */


h1 {
    margin: 0;
}

/* #today-name {
    position: fixed;
    right: 8px;
    top: 8px;
    border-radius: 0px;
    display: flex;
    flex-direction: column;
    background-color: rgb(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    font-size: 30px;
    border-radius: 5px;
    user-select: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

} */


#today-name {
    position: fixed;
    right: 8px;
    top: 8px;
    color: white;
    /* darker aurora */
    background: linear-gradient(135deg,
            rgba(5, 40, 100, 0.9),
            rgba(20, 100, 200, 0.9),
            rgba(0, 200, 100, 0.9),
            rgba(200, 80, 150, 0.9),
            rgba(100, 30, 180, 0.9));
    background-size: 400% 400%;
    animation: aurora 15s ease infinite;

    /* lighter aurora */
    /* background: linear-gradient(135deg,
            rgba(11, 61, 145, 0.9),
            rgba(30, 144, 255, 0.9),
            rgba(0, 255, 127, 0.9),
            rgba(255, 105, 180, 0.9),
            rgba(138, 43, 226, 0.9));
    background-size: 400% 400%;
    animation: aurora 15s ease infinite; */

    /* darker blue */
    /* background: linear-gradient(to top, rgba(0, 51, 102, 0.7), rgba(0, 123, 255, 0.5));  */


    padding: 8px;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 170px;
    height: 100px;
    height: fit-content;
    width: fit-content;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s ease;


    z-index: 10;
    gap: 10px;
    -webkit-tap-highlight-color: transparent;

}


.hide-widget {
    position: fixed;
    top: 8px;
    right: 8px;
    cursor: pointer;
    /* Make it clickable */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: none;
    color: white;
    background-color: transparent;
    transition: all 0.3s ease;
    width: 3opx;
    height: 30px;
    z-index: 20;
}

.hide-widget span {
    font-size: 20px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.hide-widget.is-true {
    border-radius: 50%;
    background-color: rgb(0, 0, 0, 0.2);
    /* Dark background for visibility */
    color: white;
    /* Change text color */
}

.hide-widget.is-true span {
    transform: rotate(180deg);
    /* Rotate the arrow to point left */
}

.time-container {
    /* border: 2px solid green; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-left: 5px;
    height: fit-content;
    width: fit-content;
}

#today-location {
    font-size: 12px;
}

#today-date {
    font-size: 12px;
    margin-bottom: 25px;


}

#today-time {
    font-size: 20px;
    font-weight: bold;
}

#today-seconds {
    font-size: 10px;
    font-weight: bold;
    /* opacity: 0.7; */
}

#today-ampm {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    /* margin-left: 2px; */
    /* opacity: 0.7; */
}

#today-weather {
    font-size: 16px;
    font-style: italic;
}


.weather-container {
    /* border: 2px solid red; */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 5px;
    height: fit-content;
    width: fit-content;
}

#today-icon {
    font-size: small;
}

#today-icon img {
    /* border: .5px solid white; */
    width: 45px;
    height: auto;
}

#today-temp {
    font-size: 25px;
    font-weight: bold;
}

#today-weather {
    font-size: 8px;
    font-style: italic;
}

/* .today-name-text-container {
    box-sizing: border-box;
    display: flex;
    margin: 0;
    font-size: 15px;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px 8px 15px;
    background-color: #e1edf0;
    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

} */



.buttons {
    padding: 2px 8px 2px 8px;
    background-color: #3388cc;
    border: none;
    /* border-radius: 2px; */
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}


.button-container {
    display: flex;
    margin: 0;
    gap: 0px;
    border-radius: 3px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

.buttons {
    display: flex;
    background-color: #3388cc;
    border: none;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}


/* .fa-download {
    font-size: 13px !important;
} */

h2 {
    margin: 0;
    text-align: center;
}





.task-toolbar-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 20px;
    right: 10px;
    gap: 10px;
    /* border: 1px solid red; */
    transition: transform 1.5s ease, bottom 0.3s ease-in-out;
    z-index: 999;

}

.template-task-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(51, 136, 204, 0.7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 50px;
    height: 50px;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 30px;
    z-index: 1000;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;

}

.material-symbols-outlined.arrows {

    /* border: 1px solid red; */
    font-size: 25px;
    padding: 0;
}

.material-symbols-outlined.arrows:active {
    transform: scale(.8);
}

/* Floating Add Button */
.floating-add-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: fixed;
    bottom: 20px;
    right: 20px; */
    /* background-color: #4CAF50; */
    background-color: rgba(76, 175, 80, 0.7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 30px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 1000;
    transition: transform 1s ease, background-color 0.3s ease;

    -webkit-tap-highlight-color: transparent;
}

.clear-button {
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: fixed;
    bottom: 80px;
    right: 20px; */
    /* background-color: #e57373; */
    background-color: rgba(229, 115, 115, 0.7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 1000;
    transition: transform 1s ease, background-color 0.3s ease;

    -webkit-tap-highlight-color: transparent;
}

.clear-button:active {
    background-color: white;

    color: rgba(244, 67, 54, 0.9);
}


.extras-toolbar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 8px;
    left: 8px;
    gap: 5px;

    /* border: 2px solid red; */
}


.screen-size-change {
    /* display: none; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: fixed;
    top: 43px;
    left: 8px; */
    background-color: rgba(204, 204, 204, 0.8);
    background-color: rgb(0, 0, 0, 0.2);
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
    color: white;
    border: none;
    border-radius: 50%;
    /* font-size: 180px; */
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 1000;
    transition: transform 1s ease, background-color 0.3s ease;
}

.material-icons.screen-size {
    font-size: 18px;
}

.exit-flscreen-button {
    display: none;
}

.fullscreen-btn {
    display: flex;
}



.clamp-toggle-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: fixed;
    top: 78px;
    left: 8px; */
    border-radius: 50%;
    cursor: pointer;

    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;

    color: white;
    border: none;
    background-color: rgba(0, 0, 0, 0.2);
}

#toggleIcon {
    font-size: 18px;
    font-weight: normal;
}



/* =================== */
/* ✨ MENU BUTTON ✨ */
.menu-button {
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: fixed;
    top: 8px;
    left: 8px; */
    border-radius: 50%;
    cursor: pointer;

    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;

    color: white;
    border: none;
    background-color: rgba(204, 204, 204, 0.8);
    background-color: rgb(0, 0, 0, 0.2);
}

.menu-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* =================== */
/* 🧊 SLIDER PANEL 🧊 */
.menu-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 60vw;
    max-width: 340px;
    height: 100vh;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.3);
    transform: translateX(-100%);
    transition: transform 0.4s ease, opacity 0.3s ease;
    z-index: 4001;
    color: white;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
}

/* *{
    border:1px solid lime;
} */
.menu-slider.open {
    transform: translateX(0);
}



.theme,
.about,
.other-webapps {
    display: inline-flex;
    align-items: center;
    /* vertical center */
    gap: 8px;
    /* space between icon and text */

}



/* =================== */
/* 🎯 HEADINGS & TEXT */
.side-menu-header-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    align-items: center;
    justify-content: center;
    /* height: calc(.33 * 100vh); */
    justify-content: space-around;
    /* gap: 20px; */

}

.slider-menu-header-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    font-family: 'Kaushan Script', cursive;
}

#slider-menu-header-logo {
    font-size: 150px;
}

.slider-menu-tagline {
    text-align: center;
    font-style: italic;
    font-family: 'Kaushan Script', cursive;
}

.menuslider-divider {
    /* height: 2px; */
    border: 1px solid white;
    margin-bottom: 10px;
}

.menu-slider ul {
    list-style: none;
    padding: 0px;
    margin: 0;
}

.menu-slider li {
    font-size: 1.1rem;
    padding: 0.6rem 0;
    color: #eee;
    transition: color 0.3s, transform 0.2s;
    cursor: pointer;
}

.menu-slider li:hover {
    color: #ffffff;
    transform: translateX(4px);
}

/* =================== */
/* 🔽 SUBMENU */
.theme-list,
.size-submenu {
    margin-top: 0.5rem;
    padding-left: 1rem;
    display: none;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #999 transparent;
}

.theme-list.show,
.size-submenu.show {
    display: block;
}

.theme-list::-webkit-scrollbar {
    width: 6px;
}

.theme-list::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
}

/* =================== */
/* 🌚 OVERLAY */
.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 4000;
}

.overlay-menu.show {
    opacity: 1;
    visibility: visible;
}

/* =================== */
/* ❌ CLOSE BUTTON */
.close-button-menu {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 2rem;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.close-button-menu:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

/* =================== */
/* 🧠 ICONS */
.material-icons.menu-icon {
    font-size: 22px;
}

/* =================== */
/* ✅ "KalKulator" BUTTON */
.menu-slider .btn {
    font-size: 1.1rem;
    display: inline-block;
    text-decoration: none;
    padding: 0.6rem 0;
    color: #eee;
    transition: color 0.3s, transform 0.2s;
    cursor: pointer;
}

.menu-slider .btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 25px rgba(0, 255, 200, 0.5);
}

/* =================== */

.floating-add-btn,
.clear-button {
    transition: transform 1s ease, bottom 0.3s ease;
    /* Same transition for the buttons */
}

.floating-add-btn:hover {
    transform: scale(1.1);
}

/* Sliding Input View */
.sliding-input-view {
    /* border: 2px solid red; */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    position: fixed;
    /* left: 0;
    right: 0; */
    /* bottom: -33%;
    width: 100%;
    height: 33%;
    max-height: 33%; */
    /* gap: 10px; */
    /* border-radius: 30px; */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    bottom: 0;
    width: 100%;
    height: 130px;
    /* max-height: 130px; */
    min-height: 130px;
    background-color: rgba(255, 255, 255, 0.9);
    /* background-color: rgb(249, 252, 255, 0.9); */
    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.2);
    /* overflow: hidden; */
    z-index: 999;
    transform: translateY(100%);
    /* Start hidden */
    transition: transform 0.3s ease-in-out;
    /* Smooth transition */
    z-index: 1998;


}

.show {
    transform: translateY(0);
    /* Slide up smoothly */
}

.taskinput-color-container {
    /* border: 2px solid blue; */
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 5px 10px;
    /* padding-bottom: 0px; */
    display: flex;
    flex-direction: column;
    background-color: transparent;
    justify-content: space-around;
    /* gap: 5px; */
    /* box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.2);  */
}

/* * {
    border: 1px solid lime;
} */

.jumping-text-box {
    display: flex;
    /* display: none; */
    justify-content: center;
    align-items: center;
    height: 20px;
}

.suggestion-wrapper {
    /* display: flex; */
    display: none;
    width: 100%;
    gap: 4px;
    background-color: transparent;

}

.suggestion-text {
    /* border: 1px solid red; */
    display: flex;
    flex-direction: row;
    gap: 6px;
    height: 20px;
    align-items: center;
    padding: 0 4px;
    padding-left: 0px;
    background-color: transparent;
    /* border: 1px solid #ccc; */
    border-radius: 4px;
    border-top-left-radius: 999px;
    ;
    border-bottom-left-radius: 999px;
    overflow-x: auto;
    /* Allow horizontal scrolling */
    overflow-y: hidden;
    /* Prevent vertical scroll */
    white-space: nowrap;
    /* Prevent line wrapping */
    scroll-behavior: smooth;
    /* Optional: smooth scrolling */
    scrollbar-width: none;

}

.paste-button.blank-suggestion {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    font-weight: bold;
    background-color: #0078FF;
    color: white;

    /* border: 2px solid #0078FF; */
}

.paste-button.blank-suggestion:hover {
    background-color: #0078FF;
}

.paste-button:active {
    transform: scale(0.95);
}

#eraser-icon {
    font-size: 15px;
    font-weight: bold;
}

.paste-button {
    font-size: 12px;
    padding: 2px 15px;
    /* Adjust padding here */
    padding-top: 4px;
    background-color: #f0f0f0;
    color: #333;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    height: 20px;
    width: 110px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    flex-shrink: 0;
    font-weight: bold;



    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

}

.paste-button:hover {
    background-color: #cce6ff;
}




/* //original task tempalte */


.jumping-text-container {

    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: monospace;
    width: max-content;
    font-weight: bold;
    height: .5px;
    border: .5px solid red;
    align-self: center;
    /* margin-top: 5px; */
    /* border:2px solid red; */
}


.jumping-text span {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    animation: jump 1.5s ease-in-out infinite;
}

.jumping-text span:nth-child(odd) {
    animation-delay: 0.2s;
}

.jumping-text span:nth-child(even) {
    animation-delay: 0.4s;
}

.jumping-text {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

@keyframes wiggle {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-6px);
    }

    100% {
        transform: translateX(0);
    }
}

.jumping-text.wiggle span {
    display: inline-block;
    animation: wiggle 0.6s ease-in-out;
}


.template-title-submit-container {
    display: flex;
    /* border:2px solid #00ff7f; */
    /* margin-bottom: 10px; */
    justify-content: center;
    align-items: center;
    /* margin-top: 5px; */
    gap: 5px;
}



/* task input field and submit button */
.title-submit-container {

    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    width: 100%;
    /* border-radius: 5px; */
    border-radius: 25px;
    overflow: hidden;
    padding: 5px 10px;
    /* gap: 10px; */

    /* border: 1px solid #ccc; */
    background-color: #f0f0f0;
    background-color: #e5e5e5;
    /* background-color: #f1f3f6; */
    /* border: 1px solid #2277b0; */
    /* border: 2px solid red; */
    /* border: none; */
    /* justify-content: center; */
    align-items: center;
    /* border: none; */
}

.template-task-btn1 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    height: 30px;
    border-radius: 17px;
    background-color: #0078FF;
    border: none;
    padding-left: 2px;
    padding-right: 2px;
    white-space: nowrap;
    color: white;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s, transform 0.1s;
    gap: 12px;
}

/* Hover effect */
.template-task-btn:hover {
    /* background-color: #005FCC; */
}

/* Focus effect */
.template-task-btn:focus {
    /* outline: 2px solid rgba(0, 120, 255, 0.5); */
    /* outline-offset: 2px; */
}

/* Active (when clicked) effect */
.template-task-btn:active {
    background-color: #0048A0;
    transform: scale(0.95);
}



.input-task-template {
    box-sizing: border-box;
    /* padding-top: 6px; */
    border: 1px solid #2277b0;
    /* border-radius:  4px; */
    flex-grow: 1;
    min-width: 0;
    /* Makes the input take more space than the button */
    font-size: 16px;
    /* height: 30px; */
    /* border-radius: 17px; */
    background-color: transparent;
    border: none;
    font-family: inherit;
    scrollbar-width: none;
    resize: none;
}

.input-task-template:focus {
    border: 2px solid #2277b0;
    border: none;
    outline: 0;
}

/* submitTask  button  */
#submitTask,
#addTask {
    box-sizing: border-box;
    background-color: #0078FF;
    color: white;
    border: 2px solid #0078FF;
    cursor: pointer;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    font-weight: normal;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.user-select-none {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Hover effect */
#submitTask:hover {
    background-color: #005FCC;
    /* Darker blue */
    border-color: #005FCC;
}

#submitTask:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 120, 255, 0.5);
    /* Soft glow effect */
}

/* Active (when clicked) effect */
#submitTask:active {
    background-color: #0048A0;
    /* Even darker blue */
    border-color: #0048A0;
    transform: scale(0.9);
    /* Slight press-down effect */
}


#submitTask.disabled-btn,
#addTask.disabled-btn {
    background-color: gray;
    /* Change background color */
    border: gray;
    color: white;
    /* Adjust text color */
    opacity: 0.5;
    /* Make it look inactive */
    cursor: not-allowed;
    /* Change cursor to indicate disabled state */
}

#copy-tasks-btn.disabled-btn,
#copy-tasks-btn:disabled {
    background-color: transparent;
    border: none;
    cursor: not-allowed;
}

/* Disable pointer events for children */
#copy-tasks-btn.disabled-btn *,
#copy-tasks-btn:disabled * {
    pointer-events: none;
    opacity: 0.5;
    color: rgb(37, 37, 37) !important;
}

#go-to-today.disabled-btn,
#go-to-today:disabled {
    background-color: transparent;
    /* if button has no visible bg */
    border: none;
    cursor: not-allowed;
}

/* Disable pointer events for children */
#go-to-today.disabled-btn *,
#go-to-today:disabled * {
    pointer-events: none;
    opacity: 0.5;
    color: rgb(37, 37, 37) !important;
    /* override material icon color */
}


.counter-icon-container {
    display: flex;
    /* display: none; */
    justify-content: center;
    align-items: content;
    height: 35px;
    width: 35px;
    background-color: blue;
    background-color: transparent;
    border-radius: 50%;
}

.icon-with-number-container {
    position: relative;
    display: inline-block;
    width: 40px;
    /* adjust based on icon size */
    height: 40px;
    font-size: 32px;
    /* icon size */
    text-align: center;
}


#gfont-counter-icon {
    font-size: 25px;
    font-weight: normal;
    line-height: 35px;
    color: blue;
}

.calendar-number {
    position: absolute;
    top: 49%;
    left: 55%;
    transform: translate(-50%, -55%);
    font-size: 12px;
    font-weight: bold;
    color: black;
    pointer-events: none;
    /* don't block clicks */
}


.selected-task {
    box-sizing: border-box;
    display: flex;
    /* display: none; */
    justify-content: center;
    align-items: center;
    height: 35px;
    width: 35px;
    font-size: 20px;
    border-radius: 50%;
    border: 2px solid red;
    background-color: white;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
    color: black;
    cursor: pointer;
    font-weight: bold;
    flex-wrap: wrap;
    flex-shrink: 0;
    flex-grow: 0;

    /* Circular gradient border */
    /* border: 4px solid transparent;
    background: 
        linear-gradient(#e5e5e5, #e5e5e5) padding-box,
        conic-gradient(
            #3b82f6,
            #2563eb,
            #4f46e5,
            #1e3a8a,
            #3b82f6
        ) border-box; */

    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
}

/* Hover: Slightly darkens background and scales up */
.selected-task:hover {
    background-color: rgba(255, 0, 0, 0.1);
    /* Light red tint */
    transform: scale(1.05);
}

/* Active: Press effect */
.selected-task:active {
    background-color: rgba(255, 0, 0, 0.2);
    /* Darker red tint */
    transform: scale(0.95);
}

/* Focus: Highlight border */
.selected-task:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
    /* Soft red glow */
}


/* Hover when selected */
.selected-task.selection-true:hover {
    background-color: rgba(0, 120, 255, 0.2);
    transform: scale(1.05);
}

/* Active when selected */
.selected-task.selection-true:active {
    background-color: rgba(0, 120, 255, 0.3);
    transform: scale(0.95);
}

/* Focus when selected */
.selected-task.selection-true:focus {
    box-shadow: 0 0 5px rgba(0, 120, 255, 0.5);
}



/* Apply the shake animation to the button when triggered */
.selected-task.shake-btn {
    animation: shake 0.5s ease;
    /* Duration and easing */
    animation-iteration-count: 1;
    /* Only shake once */
}

.clear-btn.shake-btn {
    animation: shake 0.5s ease;
    /* Duration and easing */
    animation-iteration-count: 1;
    /* Only shake once */
}



.selected-task.selection-true {
    border: 2px solid #0078FF;
}

.material-icons.flower {

    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
    font-size: 20px;
    border-radius: 50%;
    font-weight: bold;
    flex-wrap: wrap;
    flex-shrink: 0;
    flex-grow: 0;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

    background-color: transparent;
    border: none;
    color: #6a5044;
}

.material-icons.arrow-upward,
.material-icons.add-btn {
    font-size: 20px;
}





/* Color Picker */
.color-picker {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* flex-wrap: wrap; */
    overflow: auto;
    scrollbar-width: none;
    gap: 10px;
    padding: 5px;
    /* padding-bottom: 0px; */
    /* border: 2px solid red; */
    border-radius: 60px;
    /* margin-bottom: 5px; */
    /* margin-top: 5px;
    margin-bottom: 5px; */
}

/* .color-option {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ccc;
    cursor: pointer;
    transition: transform 0.3s ease;
} */





/* .color-option.selected {
    border: 2px solid black;
} */

/* Task Template */

#year-container {
    /* border: 2px solid green; */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* flex-wrap: no-wrap; */
    /* flex-direction: row; */
    max-height: 100vh;
    width: 100%;
    /* flex-shrink: 1; */
    /* flex-grow: 1; */
    font-size: 20px;
    gap: 0;
    flex-grow: 1;
    /* height: auto; */
    /* overflow: auto; */
    overflow: scroll;
    overflow-y: auto;
    height: 100vh;
    /* padding-left: 8px; */
    /* padding-right: 8px; */
    /* margin: 0 auto;  */
    /* overflow: hidden; */
    scrollbar-width: none;
    /* For Firefox */
    /* cursor: grab; */
}

#year-container::-webkit-scrollbar {
    display: none;
    /* For Chrome, Safari, and Edge */
}




.month-name-container {

    /* border: 1px solid red; */
    font-family: monospace;
    display: flex;
    flex-direction: column;

    /* justify-content: space-evenly; */
    font-weight: bold;
    padding: 0 7px 0px 7px;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 30px;
    flex-shrink: 0;
    user-select: none;
    overflow: auto;



    gap: 50px;

    /* Prevents text selection */
    -webkit-user-select: none;
    /* For Safari */
    -moz-user-select: none;
    /* For Firefox */
    -ms-user-select: none;
    /* For IE/Edge */
    /* flex: 1;         */
    /* background-color: red; */
}

.lock-button {
    /* border: 2px solid violet; */
}

.year-letter-container {
    /* border: 1px solid blue; */
    /* display: flex; */
    /* width: 20px;
    height: 20px; */
    font-size: 15px;
    flex-grow: 0;
    justify-content: center;
    /* align-content: center; */
}


.month-letter-container {
    /* border: 2px solid black; */
    /* background-color: red; */
}

.month-container {
    /* border: 1px solid blue; */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* flex: 8; */
}

.year-letter-container:active,
.month-letter-container:active,
.grid-cal-btn:active {
    /* color: snow; */
    transform: scale(0.9);
}



.day-container {
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    width: 100%;
    min-height: 28px;
    /* default size */
    height: auto;
    /* allows expansion when needed */
    align-items: stretch;
    border: none;
}




/* .day:has(:where(:text("Sun"))) {
    color: red;
}

.day:has(:where(:text("Sat"))) {
    color: blue;
}

.day {
    color: black; 
} */

.week-spacer {
    /* background-color: #e57373; */
    /* border: .5px solid green;
    background-color: green; */
    /* border: .5px solid #636363; */
    /* background-color: #636363; */

    border: .5px solid #8c7d9f;
    background-color: #8c7d9f;
    /* red */
    /* border: .5px solid #3388cc;
    background-color: #3388cc; */
    width: 100%;
    height: 1px;
}

/* container for day(month-container) and month name(month-name-container) */
.month-name-day-container {

    /* border: 1px solid #636363; */
    /* border: 1px solid green; */
    display: flex;
    flex-direction: row;
}

.date,
.day {
    /* flex: 1; */
    flex: 1 0 0%;
    display: flex;
    /* border: .5px solid #ccc; */
    border: .5px solid black;
    /* border: .5px solid rgba(0, 0, 0, 0.3); */
    /* background-color: aqua; */
    align-items: center;
    justify-content: center;
    /* font-size: 12px; */
    /* font-weight: bold; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    /* Prevents text selection */
    -webkit-user-select: none;
    /* For Safari */
    -moz-user-select: none;
    /* For Firefox */
    -ms-user-select: none;
    /* For IE/Edge */
    min-width: fit-content;

    transition: font-size 100ms ease, background-color 100ms ease;


}


.weekends {
    font-size: 12px;
    font-weight: bold;
}


.date:active,
.day:active,
.weekends:active {
    background-color: #ADD8E6;
    border: .5px solid #ADD8E6;
    font-size: 105%;
}

.date.is-active,
.day.is-active,
.weekends.is-active {
    background-color: #ADD8E6;
    border: 0.5px solid #ADD8E6;
    font-size: 105%;
    transition: all 0.2s ease;
}



.date {
    font-size: 18px;
    font-weight: bold;
}

.day {
    font-size: 12px;
    font-family: monospace;
    /* background-color: #52B2BF; */
    /* sapphire */

}




.morningTask,
.afternoonTask,
.eveningTask {
    display: flex;
    flex-direction: column;
    padding: 0;
    padding: 1px;
    /* border: .5px solid #ccc; */
    border: .5px solid black;
    /* border: .5px solid rgba(0, 0, 0, 0.3); */
    flex: 2;
    font-weight: bold;
    cursor: pointer;
    /* align-items: center; */
    /* justify-content: center; */
    /* was 8px */
    font-size: 10px;
    /* padding-bottom: 8px; */
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */

    overflow: auto;
    word-wrap: break-word;
    white-space: normal;




    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;


    /* align-content: center; */
}

.clamp-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;

    font-size: 10px;
    font-weight: bold;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    /* padding: 0; */
    padding: 0 3px;

    margin: 0;
    border: none;
    background: transparent;

    /* border: 1px solid red; */

}

.clamp-text.expanded {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    text-overflow: unset;
    padding: 2px;
}


.morningTaskSub,
.afternoonTaskSub,
.eveningTaskSub {
    display: flex;
    padding: 0px;
    /* border: .5px solid #ccc; */
    /* border: .5px solid gray; */
    font-weight: bold;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    /* was 8px */
    font-size: 10px;
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
    margin: 1px;
    border-radius: 3px;
    height: auto;
    min-height: 24px;
    /* max-height: 18px; */

    overflow: auto;
    word-wrap: break-word;
    white-space: normal;
    scrollbar-width: none;

    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    border-left: 4px solid transparent;
    background-color: transparent;



    /* align-content: center; */
}

#toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(50, 50, 50, 0.7);
    /* 85% opaque */
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    text-align: center;
    z-index: 9999;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.morningTaskSub:active,
.afternoonTaskSub:active,
.eveningTaskSub:active {
    transform: scale(0.95);
    /* Slightly shrink the element */
    background-color: rgba(0, 0, 0, 0.1);
    /* Add a temporary overlay */
    transition: transform 0.1s ease, background-color 0.1s ease;
}


/* .morningTask:active,
.afternoonTask:active,
.eveningTask:active {
    transform: scale(0.95);
    background-color: rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease, background-color 0.1s ease;
} */


.morningTask.dragging,
.afternoonTask.dragging,
.eveningTask.dragging {
    opacity: 0.5;
}


.task-highlight {
    border: 2px solid #4CAF50;
    /* Highlight border */
    background-color: rgba(76, 175, 80, 0.1);
    /* Subtle background highlight */
    transition: all 0.3s ease;
}

/* .selected {
    border: 2px solid #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
    transition: all 0.3s ease;
} */

/* .selected {

    border: 2px solid transparent;
    border-image-slice: 1;
    animation: rainbow-border 1.5s linear infinite;

} */

.selected {
    border: 2px solid transparent;
    background-color: #ADD8E6;
    transition: background-color 0.3s ease;
    border-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet) 1;
    border-image-slice: 1;
}

/* Other options for background colors */
/* background-color: rgba(76, 175, 80, 0.1); */
/* background-color: rgb(129, 231, 129); */

/* Alternative gradient border */
/* border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); */


.color-button-options {
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    gap: 5px
}

#showRecentColors {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
    background-color: #0078FF;
    height: 35px;
    width: 35px;
    border-radius: 50%;
}

#showRecentColors:active {
    transform: scale(0.90);
}

#recentcolors-icon {
    color: white;
    font-weight: 300;
    font-size: 20px;
}

.palette-wrapper {
    position: relative;
    display: inline-block;
}

.color-mode-dropdown {
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    /* small gap from the button */
    left: 100%;
    /* right side */
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    /* horizontal layout */
    background: white;
    background: rgba(204, 230, 255, 0.95)
        /* 70% opaque */
    ;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 4px;
    gap: 4px;
}

.color-mode-dropdown.hidden {
    display: none;
}

.dropdown-option {
    padding: 6px 10px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.dropdown-option:hover {
    background-color: #f0f0f0;
}

.color-mode-dropdown::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -11px;
    /* Position it on the left edge of the dropdown */
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent rgba(204, 230, 255, 0.95)
        /* 70% opaque */
        transparent transparent;
    /* background-color: #0078FF; */
}

.dropdown-option-wrapper {
    position: relative;
}

.shade-submenu {
    position: absolute;
    bottom: 100%;
    /* Appear above the "Shades" button */
    left: 0;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    padding: 4px;
    gap: 4px;
}

.shade-submenu.hidden {
    display: none;
}

.shade-color-btn {
    padding: 6px 10px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
}

.shade-color-btn:hover {
    background-color: #f0f0f0;
}




.color-option {
    /* border: 5px solid green; */
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* Ensures circular shape */
    border: 2px solid transparent;
    /* Default transparent border */
    cursor: pointer;
    transition: transform 0.3s ease, border 0.3s ease;
    background-color: transparent;
    /* Default background */

    -webkit-tap-highlight-color: transparent;
}

.color-option:hover {
    transform: scale(.95);
}

.color-option.selected-color {
    border: 5px solid transparent;
    width: 25px;
    height: 25px;
}

.color-option-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* align-content: center; */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    flex-grow: 0;
    /* background: linear-gradient(
        90deg, 
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        violet
    ); */
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}




/* .morning {

}

.afternoon {

}

.evening {

} */
.movable-template {
    position: fixed;
    box-sizing: border-box;
    display: none;
    /* display: none; */
    /* flex-direction: column; */
    /* flex-direction: row-reverse; */
    /* justify-content: flex-start; */
    /* bottom: 140px;
    left: 10px; */
    right: 70px;
    bottom: 20px;
    width: 160px;
    height: 160px;
    /* border-radius: 50%; */
    /* gap: 5px; */
    /* border: 2px solid black; */
    /* background-color: rgb(0, 0, 0, 0.5); */
    background-color: white;
    background-color: rgba(255, 255, 255, 0.9);
    background-color: rgb(0, 0, 0, 0.5);

    background: linear-gradient(135deg,
            rgba(3, 25, 70, 0.7),
            /* Darker Navy Blue */
            rgba(15, 70, 150, 0.7),
            /* Darker Dodger Blue */
            rgba(0, 150, 70, 0.7),
            /* Darker Spring Green */
            rgba(150, 50, 100, 0.7),
            /* Darker Hot Pink */
            rgba(70, 20, 130, 0.7)
            /* Darker Blue Violet */
        );
    background-size: 400% 400%;
    animation: aurora 15s ease infinite;

    /* background: linear-gradient(135deg,
            rgba(3, 25, 70, 0.7),

            rgba(15, 70, 150, 0.7),

            rgba(0, 150, 70, 0.7),

            rgba(150, 50, 100, 0.7),

            rgba(70, 20, 130, 0.7),

            rgba(200, 80, 50, 0.7),

            rgba(30, 100, 200, 0.7),

            rgba(10, 180, 180, 0.7),

            rgba(180, 30, 180, 0.7)

        );
    background-size: 400% 400%;
    animation: aurora 15s ease infinite; */

    cursor: move;
    border-radius: 4px;
    padding-right: 5px;
    padding-bottom: 5px;
    z-index: 2000;

    /* border: 2px solid red; */
}

/* Style for the drag handle */
.drag-handle {
    align-content: center;
    box-sizing: border-box;
    height: 100%;
    /* background-color: rgb(0, 0, 0, 0.5); */
    color: white;
    cursor: grab;
    margin-bottom: 0;
    padding: 0;
    /* border: 2px solid red; */
    /* rotate: 90deg; */
    /* border: 2px solid blue; */

}

.icon-container-template {
    /* border: 2px solid red; */
    display: flex;
    flex-direction: column;
    margin: 0;
    align-items: center;
    justify-content: space-around;
    flex-shrink: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;

}

.button-template {

    background-color: transparent;
    margin: 0;
    padding: 0;
    /* margin-left: 5px; */
    border: none;
    outline: none;
    /* Remove default focus outline */
    user-select: none;
    /* Prevent text selection */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* border: 2px solid green; */
}



.button-template:active {
    transform: scale(0.7);
}




.material-icons.template-btn {
    font-size: 27px;
    background-color: transparent;
    color: white;
    font-weight: bold;
}



.material-icons.drag-icon {
    /* border: 2px solid red; */
    margin: 0px;
    padding: 0px;
    font-size: 25px;
    /* rotate: 90deg; */
}

.clear-btn {
    align-content: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid white;
    /* border: 2px solid green; */
}

.job-template-container {
    display: flex;
    margin-top: 5px;
    /* margin-bottom: 5px; */
    /* margin-right: 5px; */
    margin-left: 5px;
    margin-right: 2px;
    flex-direction: column;
    align-items: center;
    /* padding-right: 5px; */
    background-color: transparent;
    gap: 5px;
    overflow: auto;
    color: white;
    font-size: 12px;
    flex-grow: 1;
    scrollbar-width: none;
    /* border: 2px solid black; */
}

.line {
    width: 1.5px;
    background-color: white;
    height: 160px;
}


.items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-sizing: border-box;
    min-height: 30px;
    width: 95px;
    font-size: 10px;
    /* overflow: auto; */
    color: black;
    border: 1px solid white;
    border-radius: 3px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    text-align: center;
    padding: 5px;


    overflow: auto;
    word-wrap: break-word;
    white-space: normal;
    word-break: break-word;
}

.items:active {
    transform: scale(0.9);
}

.aurora {
    background: linear-gradient(135deg, #0b3d91, #1e90ff, #00ff7f, #ff69b4, #8a2be2);
    background-size: 400% 400%;
    animation: aurora 15s ease infinite;
}

.hide-all-buttons {
    box-sizing: border-box;
    display: flex;
    /* was 8px */
    font-size: 9px;
    background-color: transparent;
    height: 25px;
    /* was 90px */
    width: 120px;
    rotate: -90deg;
    position: fixed;
    left: 30px;
    bottom: 10px;
    font-weight: bold;
    transform-origin: bottom left;
    border: none;
    /* border: 2px solid red; */


}



/* cloned elements */

.cloned-sliding-view {
    box-sizing: content-box;
    gap: 5px;
    /* border:2px solid red; */
    display: none;
    /* display: flex; */
    padding: 10px;
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    width: 80%;
    /* height: auto; */
    z-index: 3001;
}

.overlay {
    display: none;
    /* Hide the overlay by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background */
    z-index: 3000;
    /* Ensure it is above other elements */
    pointer-events: all;
    /* Enable interaction with overlay */
}

.submit-btn-cloned {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 35px;
    font-weight: normal;
    padding: 0px;
    padding-top: 0;
    background-color: #0078FF;
    /* border: 2px solid red; */
    height: 30px;
    width: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;

    border: none;
}


.submit-btn-cloned:active {
    transform: scale(0.9);
}

.submit-btn-cloned:hover {
    background-color: #005FCC;
}

.submit-btn-cloned.disabled-btn {
    background-color: gray;
    border: gray;
    color: white;
    opacity: 0.5;
    cursor: not-allowed;
}

.material-icons.add-template-btn-icon {
    font-size: 25px;
}

.close-btn-cloned {
    /* border: 2px solid red; */
    border: none;
    background-color: transparent;
    display: flex;
    position: absolute;
    top: 3px;
    /* Adjust to your needs */
    right: 3px;
    /* Adjust to your needs */
    /* background-color: #ff0000;   */
    padding: 5px;
    cursor: pointer;
    border-radius: 50%;
}

.material-icons.close-btn-cloned-icon {
    font-size: 20px;
    color: #ccc;
}


.color-option-template {
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* Ensures circular shape */
    border: 2px solid transparent;
    /* Default transparent border */
    cursor: pointer;
    transition: transform 0.3s ease, border 0.3s ease;
    background-color: transparent;
    /* Default background */

    -webkit-tap-highlight-color: transparent;
}

/* .color-option-template:hover {
    transform: scale(.95);
} */

.color-option-template.selected-color {
    border: 5px solid transparent;
    width: 25px;
    height: 25px;
}


/* ===========DAYTASK SINGLE DIV */


/* Calendar Container */
.calendar-container-vert-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* height: 100vh; */
    background-color: var(--calendar-bg);
    display: none;
    flex-direction: column;
    z-index: 1000;
    box-sizing: border-box;
    /* overflow: hidden;  */
    overflow-y: auto;
    scrollbar-width: none;
    transition: opacity 0.3s ease;

}

/* Header */
.calendar-header-vert-view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--calendar-day-bg);
    /* background-color: rgb(223, 223, 223); */
    padding: 1rem 1rem;
    /* border-radius: 10px; */
    /* margin-bottom: 0.5rem; */

}

.material-symbols-outlined.header-icon-vert-view {
    font-size: 1.2rem;
}

.month-label-vert-view {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

.month-label-vert-view:active,
#icon-month-label-vert-view:active {
    transform: scale(0.9);
}

.navigation-vertview-container {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-button-vert-view {
    background-color: #f4f4f4;
    color: #333;
    border: none;
    /* padding: 0.5rem 0.75rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    outline: none;
}

.material-symbols-outlined.navi-span-vertview {
    font-size: 1.5rem;
    color: #333;
    font-weight: lighter;

}

.nav-button-vert-view:first-child {
    border-right: 1px solid #ccc;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.nav-button-vert-view:last-child {
    border-left: 1px solid #ccc;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.nav-button-vert-view:hover {
    background-color: #e6e6e6;
}

.nav-button-vert-view:active {
    background-color: #dcdcdc;
}

/* Day Names */
.calendar-vert-view {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    /* padding: 0.25rem 0; */
    color: var(--calendar-text);
}

.day-name-vert-view {
    background-color: var(--calendar-day-bg);
    /* background-color: var(--calendar-accent); */
    /* background-color: #f0fff0; */
    color: #333;
    padding: 0.5rem 0;
    border: 0.5px solid var(--calendar-border);
    /* background-color: red; */
    border-top: none;
    border-bottom: none;
    font-weight: normal;
    font-size: 0.8rem;
    /* border: none; */
}

.day-name-vert-view.sunday {
    color: red;
}

/* Days Grid */
.days-grid-vert-view {
    /* background: red; */
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    height: 100%;
    border-top: 0.5px solid var(--calendar-border);
    border-bottom: 0.5px solid var(--calendar-border);
    border-collapse: collapse;
    /* Makes the grid scrollable */
    /* overflow-y: auto;  */
    flex-grow: 1;
    /* Allow it to grow and fill available space */
    overflow: hidden;


}

/* Cell Style */
.days-grid-vert-view>div {
    background-color: var(--calendar-bg);
    /* border: 1px solid var(--calendar-border); */
    border: 0.5px solid rgb(235, 231, 231);
    /* padding: 0.5rem; */
    text-align: center;
    /* font-size: 1rem; */
    box-sizing: border-box;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;

    user-select: none;
    /* Prevents text selection */
    -webkit-user-select: none;
    /* For Safari */
    -moz-user-select: none;
    /* For Firefox */
    -ms-user-select: none;
    /* For older IE */
}

.days-grid-vert-view>div:active {
    background-color: #e6f3ff;
    border: 2px solid #3399ff;
    font-size: 110%;
}

.grid-cell.is-active {
    background-color: #e6f3ff;
    border: 2px solid #3399ff;
    font-size: 110%;
    transition: all 0.2s ease;
}

/* Single Line Divider for Date Grid */
.days-grid-vert-view>div {
    border-top: 1px solid var(--calendar-border);
    border-left: 1px solid var(--calendar-border);
    padding-top: 0.5rem;

}

/* Previous/next month day style */
.adjacent-month-vert-view {
    color: var(--muted-text);
    opacity: 0.5;
}

/* Day box container (holds date + task container) */
.day-vert-view {
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1px;
    text-align: center;
    font-size: 0.87rem;
    /* font-weight: bold; */
    height: 100%;
    position: relative;
    overflow: hidden;
    flex-grow: 1;
    /* Ensure the cells grow to fill available space */

}

/* Task container scrollable area */
.task-container-vert-view {
    /* background: red; */
    margin-top: 0.4rem;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: calc(100% - 1.2rem);
    /* Leaves space for the date number */
    scrollbar-width: none;
}

/* Task styling */
.task-morning,
.task-afternoon,
.task-evening {

    font-family: monospace;
    font-size: 10px;
    font-weight: bold;
    min-height: 13px;
    height: 13px;
    /* Fix height */
    line-height: 13px;
    /* Vertically center text */
    width: 100%;
    /* border: 1px solid var(--calendar-border); */
    border-radius: 3px;
    box-sizing: border-box;
    padding: 0 2px;
    /* Optional small padding */

    /* background-color: #f9f9f9; */
    color: #333;

    display: block;
    /* Simplify ellipsis behavior */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-left: 3px solid transparent;
    background-color: transparent;
    text-align: left;
}

/*  .day-number  is the class of day number only */

.days-grid-vert-view>div.today-vert-view {
    /* background-color: #2196F3; */
    /* color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-weight: bold; */
    border: 2px solid;
    /* background-color: #ADD8E6; */
    border-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet) 1;
    border-image-slice: 1;
}

.event-title[contenteditable="true"] {
    outline: none;
    border: none;
    text-decoration: none;
    -webkit-text-decoration-skip: ink;
    caret-color: auto;
}





#calendar-pop-up {
    /* box-sizing: border-box; */
    display: none;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: calc(70% + 40px); */
    width: 82%;
    /* overflow-y: auto; */
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: white;
    color: black;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    /* padding: 20px; */
    padding: 0px;
    /* padding-bottom: 7rem; */
    z-index: 2000;
}



.floating-edit-btn {
    position: absolute;
    bottom: 70px;
    right: 16px;
    width: 48px;
    height: 48px;
    background-color: #2196f3;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.floating-edit-btn:hover {
    background-color: #1976d2;
}

.floating-edit-btn .material-icons {
    font-size: 24px;
}


/* * {
      border: 1px solid limegreen;
    } */

/* .hidden {
  opacity: 0;
  transform: scale(0.3); 
  pointer-events: none;
  transition: transform 500ms ease, opacity 500ms ease;
}

.show {
  opacity: 1;
  transform: scale(1); 
  pointer-events: auto;
} */


/* MAPLE FALLING BG */
.leaf-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.falling-leaf {
    position: absolute;
    top: -40px;
    animation: fall linear forwards;
    opacity: 0.5;
    /* filter: blur(1.5px);  */

    pointer-events: none;
}

@keyframes fall {
    to {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0;
    }
}




/* MAPLE FALLING BG END */

/* * {
    border: 2px solid lime;
} */
.popup-header {
    box-sizing: border-box;
    /* position: sticky; */
    /* top: 0; */
    z-index: 1;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* border-bottom: 2px solid #ccc; */
    padding-bottom: 5px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;


}

.popup-header.in-edit-mode {
        padding-bottom: 0px;
}




#popup-date {
    /* background-color: red; */
    font-size: 15px;
    /* 1.3rem */
    font-weight: bold;
    display: inline-block;
    color: black;
    /* border: 2px solid green; */
}


.select-all-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 10px;
    font-weight: normal;
    /* border: 2px solid red; */
    /* margin-right: auto; */
    padding: 0;
    margin: 0;
    margin-top: 5px;
}

#icon-checkbox {
    font-size: 16px;
    color: grey;

}



#popup-date .weekday {
    font-size: 1.2rem;
    font-weight: 600;
}

#popup-date .month-year {
    font-size: 0.8rem;
    color: black;
}

.edit-close-container {
    display: flex;
    justify-content: center;
    align-items: center;

}

.edit-dailytask-popup {
    display: none;
    height: fit-content;
    width: fit-content;
    background-color: transparent;
    border: none;
}

.close-popup {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 2px solid white;
    border-radius: 50%;
    overflow: hidden;
}

.coffee-video {

    width: 90px;
    /* Larger than button to simulate zoom-in crop */
    height: 90px;
    object-fit: cover;
    flex-shrink: 0;
}


.material-icons.close-button-menu-icon {
    /* color: transparent; */
}


.popup-content-scroll {
    box-sizing: border-box;
    overflow-y: auto;
    width: 100%;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    flex-grow: 1;
    padding-left: 20px;
    padding-right: 20px;
    /* border: 2px solid lime; */

}

/* POP OUT ANIMATION */


/* POP OUT ANIMATION END*/

.popup-tasks {
    display: flex;
    flex-direction: column;
    margin: 2px;
    flex-grow: 1;
    /* background-color: black; */

}

.period-section {
    /* background-color: red; */
    /* margin-bottom: 20px; */
    font-size: 14px;
    /* 1.2rem */
    color: #333;

    user-select: none;
    /* Prevents text selection */
    -webkit-user-select: none;
    /* For Safari */
    -moz-user-select: none;
    /* For Firefox */
    -ms-user-select: none;
    /* For older IE */
}

.dashed-line {
    border: none;
    border-top: 1px dashed #aaa;
    margin: 5px 0 10px 0;
}

.section-divider {
    /* background-color: red; */
    display: flex;
    align-items: center;
    text-align: center;
    color: #aaa;
    font-weight: bold;
    /* margin: 10px  0; */
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 8px;
}

.morning-divider-in-editmode {
    margin-top: 0;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid #aaa;
    margin: 0 0px;
}




#arrows-popup {
    font-size: 20px;
    font-variation-settings: 'wght' 200;
    font-weight: 200;
    color: grey;
}


#check_box, ic {
    font-size: 18px;
    color: grey;
}


.arrow-up-dayTask {

    transform: rotate(90deg);
    /* left → up */
}

.arrow-down-dayTask {

    transform: rotate(-90deg);
    /* left → down */
}


.arrow-up-dayTask,
.arrow-down-dayTask,
.select-dayTask {
    background: none;
    border: none;
    padding: 4px;
    font-size: 20px;
    cursor: pointer;
    color: black;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.selected-task-popup {
    /* outline: 2px solid #00aaff; */
    background-color: rgba(0, 170, 255, 0.1);
}

/* Extras container */
#edit-extras-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-top: 2px solid #ccc;
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
}

/* Color options container adjustments when inside popup */
.color-button-options.in-popup {
    transform: scale(0.87);
    width: 100%;
}

/* The inner color picker */
.color-button-options.in-popup .color-picker {
    border-radius: 10px;
}

.event {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 3px;
    margin-bottom: 3px;
    position: relative;

    /* cuts at top-left and bottom-right */
    clip-path: polygon(8px 0,
            /* a bit right from top-left */
            100% 0,
            /* top-right */
            100% calc(100% - 8px),
            /* a bit above bottom-right */
            calc(100% - 8px) 100%,
            /* a bit left from bottom-right */
            0 100%,
            /* bottom-left */
            0 8px
            /* a bit down from top-left */
        );
}



.arrow-up-dayTask,
.arrow-down-dayTask {
    display: none;
}


.event-content {
    display: flex;
    /* font-size: 12px; */
    width: 100%;
    /* 1rem */
    padding: 5px 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 5px;
    margin-top: 5px;

    user-select: none;
    /* Prevents text selection */
    -webkit-user-select: none;
    /* For Safari */
    -moz-user-select: none;
    /* For Firefox */
    -ms-user-select: none;
    /* For older IE */

    /* border: 2px solid red; */


}

.event-title {
    color: black;

    user-select: none;
    /* Prevents text selection */
    -webkit-user-select: none;
    /* For Safari */
    -moz-user-select: none;
    /* For Firefox */
    -ms-user-select: none;
    /* For older IE */

    width: 100%;
    word-break: break-word;
}

.event-content.no-tasks-for-this-period {
    padding-left: 0px;
}

.no-tasks-text {
    color: #777;
    font-size: 12px;
    padding: 5px 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
    padding-left: 0px;


    /* pointer-events: none;
    user-select: none; */

    /* border: 2px solid black; */

}


.edit-mode.hidden,
.normal-mode.hidden {
    display: none;
}





.pop-up-calview-navi {
    box-sizing: border-box;
    /* position: absolute;
    bottom: 0;
    left: 0; */
    width: 100%;
    /* height: 8%; */
    /* padding: 12px 16px; */
    /* background: #f9f9f9; */
    border-top: 1px solid #ccc;
    display: flex;
    z-index: 10;
    padding: 0;
    /* background-color: red; */

}


.calendar-icon-button {
    flex: 1;
    background: none;
    border: none;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.calendar-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* space between icon and label */
}

.calendar-icon-label {
    font-size: 0.5rem;
    color: #444;
    pointer-events: none;
    /* makes sure only the button itself handles clicks */
}



.calendar-icon-button:active {
    background-color: #dcdcdc;
}


.event.dragging {
    visibility: hidden;
}

.ghost {
    opacity: 0.8;
    background-color: #fff;
    pointer-events: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
    transition: none !important;
    position: absolute;
    z-index: 10000;
}

.backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    /* Dark overlay */
    z-index: 1999;
    /* Just below the popup */
}

/* ===========DAYTASK SINGLE DIV */



@keyframes aurora {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* Define the shake animation */
/* @keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
} */
@keyframes shake {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-1px, 1px);
    }

    20% {
        transform: translate(1px, -1px);
    }

    30% {
        transform: translate(-1px, -1px);
    }

    40% {
        transform: translate(1px, 1px);
    }

    50% {
        transform: translate(-0.5px, 0.5px);
    }

    60% {
        transform: translate(0.5px, -0.5px);
    }

    70% {
        transform: translate(-0.5px, -0.5px);
    }

    80% {
        transform: translate(0.5px, 0.5px);
    }

    90% {
        transform: translate(-0.3px, 0.3px);
    }

    100% {
        transform: translate(0, 0);
    }
}


/* Keyframes for the jumping effect */
@keyframes jump {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
        /* Jump upwards by 10px */
    }
}

@media screen and (min-width: 768px) {

    #main-container {
        display: none;
    }

    #alert-for-desktop {
        display: block;
        text-align: center;
    }


    body {
        align-items: center;
    }

    /* .cloned-sliding-view {
        width: 48% !important;
        height: auto !important;
    }

    .overlay {
        top: 0;
        left: 20vw;
        width: 60%;
    }

    .hide-all-buttons {
        left: calc(30px + 20vw);
    }

    .morningTask,
    .afternoonTask,
    .eveningTask {
        scrollbar-width: none;
    }

    #main-container {
        width: 60%;
    }

    #year-container::-webkit-scrollbar {
        display: auto;

    }

    #year-container {
        scrollbar-width: auto;
    }

    .sliding-input-view {
        width: 60%;
    }


    .floating-add-btn {
        position: fixed;
        bottom: 20px;
        right: calc(20px + 20vw);

    }

    .clear-button {
        bottom: 80px;
        right: calc(20px + 20vw);

    }


    .screen-size-change {


        top: 20px;
        left: calc(20px + 20vw);

    }

    #today-name {
        right: calc(20px + 20vw);
    }


    .movable-template {
        bottom: calc(140px +20vw);
        left: calc(10px + 20vw);
    } */

}





.drag-button {
    display: none;
    position: fixed;
    position: fixed;
    top: 43px;
    left: 8px;
}


@keyframes rainbow-border {
    0% {
        border-image-source: linear-gradient(0deg, red, orange, yellow, green, blue, indigo, violet);
    }

    25% {
        border-image-source: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
    }

    50% {
        border-image-source: linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet);
    }

    75% {
        border-image-source: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet);
    }

    100% {
        border-image-source: linear-gradient(360deg, red, orange, yellow, green, blue, indigo, violet);
    }
}

.animated-border {
    border: 3px solid transparent;
    border-image-slice: 1;
    animation: rainbow-border 1.5s linear infinite;
}




@keyframes glowing-border {
    0% {
        box-shadow: 0 0 5px red;
    }

    25% {
        box-shadow: 0 0 10px orange;
    }

    50% {
        box-shadow: 0 0 15px yellow;
    }

    75% {
        box-shadow: 0 0 10px green;
    }

    100% {
        box-shadow: 0 0 5px blue;
    }
}

.glowing-border {
    border: 3px solid transparent;
    animation: glowing-border 1.5s ease-in-out infinite;
}



@keyframes dashed-border {
    0% {
        border-image-source: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
    }

    50% {
        border-image-source: linear-gradient(135deg, violet, indigo, blue, green, yellow, orange, red);
    }

    100% {
        border-image-source: linear-gradient(225deg, red, orange, yellow, green, blue, indigo, violet);
    }
}

.moving-dashed-border {
    border: 3px dashed transparent;
    border-image-slice: 1;
    animation: dashed-border 2s linear infinite;
}


/* When .hide-days class is added to the parent container, hide the .day elements */
#year-container.hide-days .day {
    display: none;
}

/* When .hide-days class is active, reduce the flex of .date */
#year-container.hide-days .date {
    flex: 0.85;
}

/* When .hide-dates class is added to the parent container, hide the .date elements */
#year-container.hide-dates .date {
    display: none;
}

/* When .hide-dates class is active, reduce the flex of .day */
#year-container.hide-dates .day {
    flex: 0.85;
}

/* When both .hide-days and .hide-dates are not active, set flex to 1 */
#year-container:not(.hide-days) .date,
#year-container:not(.hide-dates) .day {
    flex: 1;
}