/* Modern-Normalize CSS reset: */
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    :root {
    line-height: 1.5;
    }
    h1, h2, h3, h4, h5, figure, p, ol, ul {
    margin: 0;
    }
    h1, h2, h3, h4, h5 {
        font-size: inherit;
        font-weight: inherit;
    }
    img {
        display: block;
        max-inline-size: 100%;
    }
    ol[role="list"], ul[role="list"] {
    list-style: none;
    padding-inline: 0;
    }
/* Modern-Normalize CSS reset ends here */

html {
    scroll-behavior: smooth;
}

/* Auth page Styling starts from here */
    .container{
        display: flex;
        justify-content: center; 
        align-items: center;     
        width: 100vw;
        height: 100vh;
        background-color: whitesmoke;
    }
    .sign-in-container,.sign-up-container{
        display: flex;
        justify-content: center; 
        align-items: center;
        gap: 2%;
        width: 80%;
        height: 45vw;
        background-color: white;
        display: flex;
        border-radius: 25px;
        border: 1px solid gainsboro;
    }

    /* SignIn/SignUp page left section styling starts from here */
        .signInPageLeft,.signUpPageLeft{
            background-color: black;
            width: 45%;
            height: 90%;
            border-radius: 25px;
            color: white;
            position: relative;
        }
        .signIn-page-left-title,.signUp-page-left-title{
            font-family: 'Poppins', sans-serif;
            letter-spacing: 4px;
            font-size: 2vw;
            position: absolute;
            left: 4%;
            top: 4%;
        }
        .signIn-page-left-image-container,.signUp-page-left-image-container{
            display: flex;
            justify-content: center; 
            align-items: center;     
            height: 100%;
        }
        .signIn-page-img{
            width: 50%;
            height: auto;
        }
        .signUp-page-img{
            width: 70%;
            height: auto;
        }
        .hide{
            opacity: 0;
            visibility: hidden;
            transition: opacity 1s ease, visibility 1s ease;
        }
        .quick-hide{
            opacity: 0;
            visibility: hidden;
        }
        .show {
            opacity: 1;
            visibility: visible;
            transition: opacity 1s ease, visibility 1s ease;
        }
        .quick-show {
            opacity: 1!important;
            visibility: visible!important;
        }
    /* SignIn/SignUp page left section styling ends here */


    /* SignIn/SignUp page right section styling starts from here */
        .signInPageRight,.signUpPageRight{
            display: flex;
            justify-content: center; 
            align-items: center; 
            background-color: white;
            width: 45%;
            height: 90%;
            border-radius: 25px;
            border: 1px solid gainsboro;
        }
        .signIn-page-right-main{
            display: flex;
            flex-direction: column;
            width: 85%;
            height: 55%;
            gap: 2%;
        }
        .signUp-page-right-main{
            display: flex;
            flex-direction: column;
            width: 85%;
            height: 65%;
            gap: 2%;
        }
        .signIn-page-right-title,.signUp-page-right-title{
            font-family: "Nunito",sans-serif;
            font-size: clamp(1.5vw,3vw,3.5vw);
            font-weight: 900;
        }
        .signIn-page-right-main input, .signUp-page-right-main input{
            width: 100%;
            height: 13%;
            font-size: clamp(0.5vw,0.8vw,1vw);
            border-radius: 8px;
            border: 1px solid gainsboro;
            padding-left: 5%;
            outline: none;
        }
        .signIn-button,.signUp-button{
            background-color: rgb(255, 213, 0);
            width: 100%;
            height: 13%;
            display: flex;
            justify-content: center; 
            align-items: center; 
            font-family: "Heebo", sans-serif;
            font-weight: 500;
            border-radius: 8px;
            margin-bottom: 1%;
            margin-top: 4%;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        .signIn-button:hover,.signUp-button:hover{
            font-weight: 700;
            transform: scale(1.02); /* makes it bigger */
            transition: transform 0.3s ease;
        }
        .signIn-divider,.signUp-divider{
            display: flex;
            justify-content: center; 
            align-items: center; 
            font-family: "Heebo", sans-serif;
            color: rgb(169, 165, 165);
            width: 100%;
            gap: 2%;
        }
        .signIn-h-line,.signUp-h-line{
            width: 50%;
            height: 1px;
            background-color: gainsboro;
        }
        .google-signIn-button,.google-signUp-button{
            display: flex;
            justify-content: center; 
            align-items: center; 
            cursor: pointer;
            word-spacing: 5px;
            gap: 2%;
            height: 13%;
            font-size: clamp(0.5vw,1vw,1.2vw);
            font-family: "Heebo", sans-serif;
            border-radius: 8px;
            border: 1px solid gainsboro;
            margin-top: 1%;
            transition: transform 0.3s ease;
        }
        .google-signIn-button:hover,.google-signUp-button:hover{
            font-weight: 500;
            transform: scale(1.02); /* makes it bigger */
            transition: transform 0.3s ease;
        }
        .google-svg{
            height: 60%;
            width: 2vw;
        }
        .no-account{
            width: 100%;
            display: flex;
            justify-content: center; 
            font-size: clamp(0.5vw,0.7vw,1vw);
            font-family: "Heebo", sans-serif;
            margin-top: 1%;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        .no-account:hover{
            font-weight: 500;
            transform: scale(1.02); /* makes it bigger */
            transition: transform 0.3s ease;
        }
    /* SignIn/SignUp page right section styling ends here */

    /* Auth page media queries start from here */
    @media (max-width: 1500px) {
        .sign-in-container,.sign-up-container{
            height: 90%;
            width: 90%;
            padding-top: 2%;
            padding-bottom: 2%;
        }
        .signIn-page-right-main{
            height: 70%;
        }
        .signUp-page-right-main{
            height: 75%;
        }
        .signIn-page-left-title,.signUp-page-left-title{
            font-size: clamp(2vw,3vw,4vw);
        }
        .signIn-page-right-title,.signUp-page-right-title{
            font-size: clamp(2vw,3vw,4vw);
        }
        .signIn-page-right-main input, .signUp-page-right-main input{
            font-size: clamp(1vw,1.3vw,2vw);
        }
        .google-signIn-button,.google-signUp-button{
            font-size: clamp(1vw,1.5vw,2vw);
        }
        .no-account{
            font-size: clamp(0.5vw,1vw,1.3vw);
        }
    }

    @media (max-width: 1200px) {
        .sign-in-container,.sign-up-container{
            height: 75%;
        }
    }
    @media (max-width: 1024px) {
        .sign-in-container,.sign-up-container{
            height: 65%;
        }
        .signIn-page-right-main{
            height: 70%;
        }
        .signUp-page-right-main{
            height: 75%;
        }
        .signIn-page-img{
            width: 30%;
        }
        .signUp-page-img{
            width: 45%;
        }
    }
    @media (max-width: 900px){
        .sign-in-container,.sign-up-container{
            width: 97%;
            height: 65%;
        }
        .signIn-page-left-title,.signUp-page-left-title{
            font-size: clamp(3vw,4vw,5vw);
        }
        .signIn-page-right-main{
            height: 75%;
        }
        .signUp-page-right-main{
            height: 80%;
        }
        .signIn-page-right-title,.signUp-page-right-title{
            font-size: clamp(3vw,4vw,5vw);
        }
        .signIn-page-right-main input, .signUp-page-right-main input{
            font-size: clamp(1vw,2vw,3vw);
        }
        .google-signIn-button,.google-signUp-button{
            font-size: clamp(1vw,2vw,3vw);
        }
        .google-svg{
            width: 5vw;
        }
        .no-account{
            font-size: clamp(1vw,1.5vw,2vw);
        }
    } 
    @media (max-width: 700px) {
        .sign-in-container,.sign-up-container{
            flex-direction: column;
            width: 95%;
            height: 95%;
        }
        .signInPageLeft,.signUpPageLeft{
            width: 95%;
            height: 40%;
        }
        .signInPageRight,.signUpPageRight{
            width: 95%;
            height: 60%;
        }
        .signIn-page-right-main{
            height: 75%;
            gap: 2%;
        }
        .signUp-page-right-main{
            height: 80%;
        }
        .signIn-page-left-title,.signUp-page-left-title{
            font-size: clamp(2vw,3.2vw,3.5vw);
        }
        .signIn-page-img{
            width: 30%;
        }
        .signUp-page-img{
            width: 45%;
        }
    }
    @media (max-width: 550px) {
        .signIn-page-left-title,.signUp-page-left-title{
            font-size: clamp(3vw,4.5vw,5vw);
        }
        .signIn-page-right-title,.signUp-page-right-title{
            font-size: clamp(3vw,4.5vw,5vw);
        }
        .signIn-page-right-main input, .signUp-page-right-main input{
            font-size: clamp(1vw,3vw,3.5vw);
        }
        .google-signIn-button,.google-signUp-button{
            font-size: clamp(1vw,3vw,3.5vw);
        }
        .no-account{
            font-size: clamp(1vw,2.5vw,3vw);
        }
    }
    /* Auth page media queries ends here */

/* Auth page Styling ends here */

/* Sidebar styling starts from here */
    .container{
        background-color: white;
    }
    .container-dark-mode{
        background-color:#141111;
    }
    .sidebar{
        z-index: 1;
        position: fixed;
        top: 1;
        left: 10px;
        border-radius: 15px;
        width: 300px;
        height: 95vh;
        background-color: #f4f4f4;
        font-family: "Nunito",sans-serif;
        padding-left: 1%;
        padding-top: 1%;
        padding-right: 1%;
        margin-left: 1%;
        user-select: none;
        display: flex;           /* flexbox layout */
        flex-direction: column;  
    } 
    .sidebar-dark-mode{
        background-color: #272727!important;
    }
    .dark-mode-font-bright{
        color: whitesmoke!important;
    }
    .dark-mode-font-dark{
        color: #272727!important;
    }
    .dark-mode-svg-fill{
        fill: whitesmoke!important;
    }
    .dark-mode-texfield-color{
        background-color: #413f3f!important;
        color: whitesmoke!important;
    }

    /* Setting sidebar width for the Mobiles */
    @media(max-width:500px){
        .sidebar{
            width: 91%;
            padding: 5px;
        }
    }
    /* -------- */

    /* Responsive Font size for whole Sidebar */
    #sidebar-search-textfield,
    .sidebar-tasks-main,
    .sidebar-list-main,
    .sidebar-footer {
        font-size: clamp(0.9rem, 3vw, 1rem);
    }

    .sidebar-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        color: #444444;
        font-weight: 900;
        font-size: clamp(1.4rem, 3vw, 1.5rem);
    }
    .sidebar-hamburger-menu-svg{
        fill: #444444;
        width: 30px;
        height: 30px;
        cursor: pointer;
        border-radius: 5px;
    }
    .sidebar-hamburger-menu-svg:hover{
        border: 1px solid gainsboro;
    }
    .sidebar-search{
        display: flex;
        border: 1px solid gainsboro;
        border-radius: 10px;
        height: 3.5%;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
        margin-bottom: 35px;
    }
    .sidebar-search-svg{
        height: 70%;
        width: 10%;
        margin-left: 2%;
    }
    #sidebar-search-textfield{
        width: 100%;
        outline: none;
        border: none;
        background-color: #f4f4f4;
        border-radius: 10px;
    }
    .sidebar-tasks-main,.sidebar-list-main{
        display: flex;
        flex-direction: column;
        gap: 3%;
        margin-top: 15px;
        color: #444444;
        font-weight: 500;
    }
    .sidebar-list-main{
        height: 20%;
    }
    .sidebar-tasks-main{
        height: 20%;
    }
    .hover-effect {
        background-color: #e3e3e3;
        transform: translateY(-3px);
        transition: transform 0.5s;
      }   
      .hover-effect2 {
        background-color: #090909!important;
      }     
    .sidebar-upcoming-tasks, .sidebar-today-tasks,.sidebar-calendar,.sidebar-sticky-notes,.sidebar-past-tasks{
        display: flex;
        align-items: center;
        height: 30%;
        border-radius: 5px;
        padding: 5px;
        transition: transform 0.5s;
    }
    .upcoming-task-svg-title, .today-task-svg-title, .past-task-svg-title{
        display: flex;
        align-items: center;
    }
    .sidebar-tasks-main svg{
        height: 100%; 
        width: 7%;   
        margin-right: 3%;
    }
    .task-count{
        padding: 2%;
        height: 80%;
        width: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        background-color: #e3e3e3;
    }
    .sidebar-h-line{
        width: 100%;
        height: 1px;
        background-color: gainsboro;
        margin-bottom: 25px;
        margin-top: 25px;
    }

    .sidebar-high-tasks,.sidebar-normal-tasks,.sidebar-low-tasks{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 25%;
        padding: 5px;
        border-radius: 5px;
        transition: transform 0.5s;
    }
    /* .sidebar-high-tasks:hover, .sidebar-normal-tasks:hover,.sidebar-low-tasks:hover,.sidebar-new-list:hover{
        background-color: #e3e3e3;
        transform: translateY(-3px);
        transition: transform 0.5s;
    } */
    .high-task-logo-title,.normal-task-logo-title,.low-task-logo-title{
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .high-task-logo,.normal-task-logo,.low-task-logo{
        width: 20px;
        height: 20px;
        margin-right: 3%;
        border-radius: 5px;
    }
    .high-task-logo{
        background-color: red;
    }
    .normal-task-logo{
        background-color: #44aeff;
    }
    .low-task-logo{
        background-color: #ffd43b;
    }
    .sidebar-footer{
        display: flex;
        flex-direction: column;
        height: 10%;
        cursor: pointer;
        gap: 5px;
        margin-top: auto;
        margin-bottom: 25px;
    }
    .sidebar-footer svg{
        height: 100%; 
        width: 7%;   
        margin-right: 3%;
    }
    .sidebar-setting,.sidebar-logout{
        display: flex;
        align-items: center;
        height: 50%;
        border-radius: 5px;
        padding-left: 2%;
        transition: transform 0.5s;

    }
    /* .sidebar-setting:hover, .sidebar-logout:hover{
        background-color: #e3e3e3;
        transform: translateY(-3px);
        transition: transform 0.5s;
    } */
    .sidebar-logout{
        margin-bottom: 3%;
    }
    /* JS selector classes */
    .selected-task{
        background-color: #e3e3e3;
    }
    .selected-task2{
        background-color: #090909!important;
    }
    .selected-task-count{
        background-color: whitesmoke;
    }
/* Sidebar styling ends here */


/* Main Dashboard styling starts from here */
    .main{
        height: 98vh;
        flex: 1;
        position: relative; 
        padding: 15px;
    }
    .show-sidebar{
        visibility: visible;
        opacity: 1;
        width: 30px;
        height: 30px;
        cursor: pointer;
        margin-right: 1vw;
        border-radius: 5px;
    }
    .show-sidebar:hover{
        border: 1px solid gainsboro;
    }
    /* Hiding the hamburger menu button for width greater than 500px i.e. other then mobiles */
    @media(min-width:500px){ 
        .show-sidebar{
            visibility: hidden;
            opacity: 0;
        }
    }
    /* Dashboard header styling starts from here */
        .header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            top: 25px;
            width: 100%;
            gap: 5%;
            user-select: none ;
        }
        .header-title-count{
            display: flex;
            align-items: center;
            width: 50%;
            gap: 3%;
        }
        .header-title{
            font-weight: 900;
            font-family: 'nunito', sans-serif;
            font-size: clamp(2rem,5vw,2.5rem);
            height: 100%;
        }
        .header-count{
            border: 1px solid gainsboro;
            font-weight: 500;
            font-family: "Nunito",sans-serif;
            border-radius: 5px;
            width: 50px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: clamp(1rem,3vw,1.2rem);
        }    
    /* Dashboard header styling ends here */

    /* Creating new task div styling starts from here */
        .create-new-task{
            border: 1px solid gainsboro;
            width: 98%;
            height: 50px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            font-family: 'nunito','sans-serif';
            margin-top: 25px;
            padding: 5px;
            gap: 10px;
            cursor: pointer;
            transition: transform 0.5s ease;
        }
        .create-new-task:hover{
            transition: transform 0.5s ease;
            transform: scaleY(1.1);
            transform: translateY(-5px);
            font-weight: 900;
        }
        .new-task-svg{
            width: 20px;
            height: 20px;
            margin-left: 5px;
        }
        .adjust-sidebar{
            margin-left: 10px!important;
        }
        .all-user-tasks{
            margin-top: 20px;
            width: 100%;
            height: auto;
        }
    /* Creating new task div styling ends here */
    

    /* User-task div styling starts from here */
        .user-task{
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            font-family: "nunito","sans-serif";
            transition: letter-spacing 1s ease; 
            cursor: pointer;
            font-size: clamp(1rem, 3vw, 1.1rem);
            transition: transform 0.5s ease;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .user-task:hover{
            transition: transform 0.5s ease;
            font-weight: 900;
            transform: translateY(-3px);
        }
        .user-task:hover svg{
            width: 35px;
        }
        .box-and-title{
            display: flex;
            align-items: center;
            width: 100%;
            gap: 10px;
            /* border: 2px solid red; */
        }
        .check-box{
            width: 20px;
            height: 20px;
            border: 1px solid gainsboro;
            border-radius: 5px;
        }
        .user-task svg{
            width: 25px;
        }
        .user-task-h-line{
            width: 100%;
            height: 1px;
            background-color: gainsboro;
            margin-bottom: 15px;
        }
    /* User-task div styling ends here */

    /* Pushing the main content to the right side  */
    @media (min-width:500px) {
        .main{
            margin-left: 330px;
        }
    }
    @media (min-width:1500px) {
        .main{
            height: 95vh;
        }
    }
/* Main Dashboard styling ends here */


/* New-task-main and my-task-main div styling starts from here */
    .new-task-main,.clicked-task-main{
        position: fixed;
        right: 10px;
        width: 400px;
        height: 95vh;
        padding: 20px;
        border-radius: 15px;
        background-color: #f4f4f4;
        font-family: "Nunito",sans-serif;
        user-select: none;
        display: flex;    
        flex-direction: column;  
        align-items: center;
        visibility: hidden;
        opacity: 0;
    }
    .new-task-main select,.new-task-main input {
        border-radius: 5px;
    }
    .new-task-header,.my-task-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: clamp(1.5rem, 3vw, 1.7rem);
        font-weight: 900;
        width: 100%;
        height: 50px;
        user-select: none;
    }
    .new-task-close-svg,.my-task-close-svg{
        height: 25px;
        width: 25px;
        cursor: pointer;
    }
    #new-task-title, #new-task-descirption,#my-task-title, #my-task-descirption{
        outline: none;
        background-color: #f4f4f4;
        border: 1px solid gainsboro;
        margin-top: 15px;
        padding: 5px;
        font-family: "Heebo", sans-serif;
        font-size: clamp(1rem, 3vw, 1.2rem);
    }

    #new-task-title,#my-task-title{
        width: 100%;
        height: 5%;
        border-radius: 5px;
    }
    #new-task-descirption,#my-task-descirption{
        width: 100%;
        height: 50%;
        border-radius: 5px;
    }
    .new-task-priority,.new-task-due-date,.my-task-priority,.my-task-due-date{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 10%;
        border: 1px solid gainsboro;
        margin-top: 15px;
        padding: 5px;
        border-radius: 5px;
        color: #444444;
        font-size: clamp(1rem, 3vw, 1.2rem);
    }
    #priority,#date-time-input{
        text-align: center;
        width: 40%;
        height: 80%;
        font-size: clamp(1rem, 3vw, 1.2rem);
        background-color: #f4f4f4;
        border: none;
        color: #989696;
        border-radius: 5px;
    }
    #date-time-input{
        width: 60%;
    }
    #priority:focus,#date-time-input:focus{
        outline: none;
    }
    .save-task-div-main{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 100px;
    }
    .save-task-div{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 130px;
        height: 50px;
        gap: 10px;
        border-radius: 5px;
        background-color: #ffd43b;
        font-weight: 800;
    }
    .save-task-div:hover{
        transition: transform 0.5s ease;
        transform: translateY(-5px);
    }
    .adjust-main-right{
        margin-right: 400px;
    }
    .change-delete-task-main{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 8%;
        gap: 10px;
        margin-top: 100px;
    }
    .delete-task-div,.change-task-div{
        height: 70%;
        display: flex;
        align-items: center;
        padding: 10px;
        border-radius: 5px;
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.5s ease;
    }
    .delete-task-div{
        border: 1px solid gainsboro;
    }
    .change-task-div{
        background-color: #ffd43b;
    }
    .delete-task-div:hover{
        transition: transform 0.5s ease;
        background-color: #ff6b5a;
        color: whitesmoke;
        transform: translateY(-5px);
    }
    .change-task-div:hover{
        transition: transform 0.5s ease;
        transform: translateY(-5px);
    }

    /* Setting new task and clicked task width for the Mobiles */
    @media(max-width:500px){
        .new-task-main{
            width: 99%;
            padding: 5px;
            right: 0;
        }
        .clicked-task-main{            
            width: 100%;
            padding: 5px;
            right: 0;
        }
        .save-task-div-main{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin-top: 20px;
        }
    }

/* New-task-main and my-task-main div styling starts from here */


/*# sourceMappingURL=styles.d4e848f346c0f8db3458.css.map*/