@media (max-width: 1500px) {

    .left-task {
        padding-left: 100px;
    }

    input {
        margin-right: -12px;
    }

    .right-task {
        margin-right: -14px;
    }

    .equals-icon {
        width: 16px;
        right: 12px;
    }

    .double-down {
        width: 16px;
    }

    .double-up-arrow {
        width: 16px;
    }
}

@media (max-width: 1400px) {

    .priority-input-container {
        display: flex;
        gap: 10px;
    }

    .left-task-container {
        padding-right: 100px;
    }

    .left-task::after {
        right: 42px;

    }

    .input {
       padding: 14px 12px 14px 12px;
    }

    .drop-down-arrow-svg {
        right: 20px;
    }

    .drop-down-arrow-svg-category {
        right: 20px;
    }

    .double-down {
        width: 16px;
        right: 20px;
    }

    .equals-icon {
        right: 8px;
        width: 14px;
    }

    .double-up-arrow {
        width: 16px;
        top: 20px;
        right: 12px;
    }

    .edit-overlay .left-task {
        margin-left: -0px;
    }

}


@media (max-width: 1300px) {

    .equals-icon {
        width: 14px;
        right: 12px;
    }

    .double-down {
        width: 14px;
    }

    .double-up-arrow {
        width: 14px;
    }
}

@media (max-width: 1230px) {
    body {
        font-size: 16px;
    }

    .contents {
        flex-direction: column;
    }

    #task-form-container {
        overflow-y: scroll;
        scrollbar-width: none;
    }

    .low-container input::placeholder {
        font-size: 16px;
    }

    .medium-container input::placeholder {
        font-size: 16px;
    }

    .urgent-container input::placeholder {
        font-size: 16px;
    }

    .left-task-container {
        top: 0px;
    }

    .task-title {
        padding-top: 100px;
        font-size: 45px;
    }

    .task-content-container {
        background: linear-gradient(0deg, rgba(245, 246, 247, 1) 99%, rgb(223, 224, 225) 100%);
        flex-direction: column;
        min-height: 93dvh;
        height: auto;
    }

    .left-task::after {
        display: none;
    }

    .right-task {
        width: 100%;
        padding-left: 20px;
    }

    #task-overlay .right-task {
        padding-left: 0px;
    }

    .left-task {
        width: 100%;
        padding-left: 20px;
        padding-right: 26px;
    }

    .left-task-container {
        padding-right: 0px;
    }

    .required-text {
        display: none;
    }

    .task-button-container {
        position: fixed;
        left: auto;
        right: 20px;
        gap: 30px;
        bottom: 100px;
        top: auto;
        margin-bottom: 20px;
        z-index: 9999;
    }

    .tbc-wrapper {
        background: linear-gradient(0deg, rgba(245, 246, 247, 1) 100%, rgb(223, 224, 225) 100%);
        display: none;
        position: fixed;
        height: 100px;
        left: 0;
        right: 0;
        bottom: 80px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        z-index: 9998;
    }

    #tbc-wrapper-inner {
        position: static;
        height: 100px;
    }

    .right-side-inner {
        transform: none !important;
    }

    .mobile-required-text {
        display: block;
        margin-top: 40px;
        margin-bottom: 200px;
    }

    #task-overlay .mobile-required-text {
        margin-bottom: 140px;
    }

    .edit-overlay .mobile-required-text {
        margin-bottom: 60px;
    }

    .drop-down-arrow-svg,
    .drop-down-arrow-svg-category {
        top: 50px;
        right: 18px;
    }

    .asterisk {
        font-size: 18px;
    }

    .required-text {
        display: none;
    }

    .left-side {
        position: fixed;
        bottom: 0;
        height: 100px;
        top: auto;
        width: 100%;
        z-index: 9999;
    }

    .left-side a {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
        text-decoration: none;
        color: #CDCDCD;
        height: 38px !important;
        border-radius: 20px;
        min-width: 60px;
        box-sizing: unset;
    }

    nav {
        display: flex;
        flex-direction: row;
        gap: 0px;
        justify-content: space-around;
    }

    nav a {
        padding-left: 0;
        padding: 31px 10px;
        font-size: 16px;
    }

    footer {
        display: none;
    }

    .join-logo {
        display: none;
    }

    .header-title {
        display: none;

    }

    header {
        display: flex;
        align-items: center;
        height: 80px;
        padding: 0px 20px 0 20px;
        background-color: #FFFFFF;
        flex: 0 0 80px !important;
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .responsive-logo {
        display: block;
        width: 40px;
    }

    .input {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
        margin-left: 0px;
        margin-right: 10px;
        font-size: clamp(14px, 1.2vw, 16px);
        border: 1px solid #ddd;
        border-radius: 10px;
        text-align: left;
    }

    #date-input {
        z-index: 0;
    }

    .priority-input-container {
        gap: 40px;
        justify-content: space-around;
        align-items: center;
    }

    .date-icon {
        left: auto;
        right: 10px;
        top: 70px;
    }

    .medium-container:hover {
        box-shadow: none;
    }

    .urgent-container:hover {
        box-shadow: none;
    }

    .low-container:hover {
        box-shadow: none;
    }

    .right-side {
        min-height: 100dvh;
    }

    .padding-top20 {
        padding-top: 30px;
    }

    .priority-container {
        padding-top: 30px;
    }

    .drop-down-arrow-svg {
        top: 79px;
        right: 18px;
    }

    .check-icon {
        position: absolute;
        top: 21px;
        left: 244px;
        color: white;
    }

    .task-added {
        visibility: hidden;
        opacity: 0;
        width: 300px;
        height: 66px;
        border-radius: 20px;
        top: 90%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: fixed;
        background-color: #2A3647;
        color: white;
        font-weight: 300;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 9999;
        transition: all 0.2s ease;
    }

    .task-added-end {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .equals-icon {
        right: 8px;
    }

    .double-up-arrow {
        right: 12px;
    }

    .footer-task {
        width: 71px !important;
    }
}

@media (max-width: 900px) {

    .left-side a {
        height: 37px !important;
    }
}

@media (max-width: 500px) {

    .left-side a {
        height: 17px !important;
    }

    .task-button-container {
        margin-bottom: 0px;

    }

    .task-content-container {
        display: grid !important;
    }

    .left-side {
        height: 80px;
    }

    .priority-input-container {
        gap: 5px;
    }
}