body {
    background-color: #000000;
    font-family: Arial;
    margin: 0;
    display: flex;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.top {
    /*box-shadow: -1px 5px 8px 1px rgba(162, 140, 173, 1);*/
    font-weight: bold;
    background-color: rgba(48, 15, 83, 0.4);
    width: 100%;
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    color: white;
    align-items: center;
}

.pfpImg {
    margin: 0 30px;
    width: 52px;
    height: 52px;
    cursor: pointer;
}

h1 {
    margin: 0 30px;
}

.addTaskList {
    background-color: rgba(255, 255, 255, 0);
    width: 64px;
    margin: 15px;
    margin-top: 45px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 0px 20px 20px rgba(82, 33, 142, 0.44);
    border-radius: 100px;
    background-color: #6a3afc;

}

.taskListSpace {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
}

/*--------------------Dots-------------------*/
.dot {
    height: 6px;
    background-color: #4b1d83;
    border-radius: 100px;
    margin-left: auto;
    width: 6px;
    margin-bottom: 3px;
}

.dots {
    cursor: pointer;
    /*margin: 10px 10px 10px 50%;*/
    padding: 6px 17px 6px 17px;
    margin: 10px 15px 10px 10px !important;
    border: 1px solid #541f93;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*background-color: rgba(90, 36, 156, 0.34);*/

}


/*-----------------TASKLISTS--------------*/

.popup {
    background-color: #2e1150;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    position: absolute;
    width: 200px;
    margin-left: -159px;
    margin-top: -10px;
    padding: 10px;
    color: white;
    font-weight: bold;
}

.deleteTaskList {
    color: white;
    margin: 15px;
    cursor: pointer;
    color: #a45054;
}

.taskListTop {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 65px;
}

.body2 {
    font-family: Arial;
    margin: 0;
    display: flex;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.taskList {
    margin: 25px;
    width: 500px;
    background-color: rgba(48, 15, 83, 0.4);
    border-radius: 10px;
    min-height: 350px;
    /*box-shadow: 0px 0px 9px 1px rgba(162, 140, 173, 1);*/
}

.taskListName {
    color: white;
    font-size: 25px;
    font-weight: bold;
    margin-left: 25px;
    border-radius: 5px;
    padding: 10px 0;
    margin-left: 2.5%;
    margin-right: auto;
    width: 50%;
    min-height: 20px;
}

.taskListNameInput {
    color: white;
    min-width: 50%;
    font-size: 25px;
    font-weight: bold;
    margin-left: 25px;
    margin-bottom: 5px;
    margin-top: 13px;
    border-radius: 5px;
    background-color: rgba(123, 88, 161, 0.21);
    border: 0;
    padding-bottom: 5px;
    margin-left: 2.5%;
    margin-right: auto;
    outline: none;
}

.empty {
    background-color: #541f93;
}


.fakeHr {
    color: #541f93;
    height: 1px;
    background-color: #541f93;
    border-radius: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
}

.form {
    width: 325px;
    padding: 50px;
    height: 400px;
    border-radius: 8px;
    /*border: 2px solid #6735ff;*/
    display: flex;
    background-color: rgba(48, 15, 83, 0.4);
    justify-content: start;
    align-items: center;
    font-size: 12px;
    /*box-shadow: 0px 0px 9px 1px rgba(162, 140, 173, 1);*/
    color: white;
    flex-direction: column;
}

.title2 {
    font-weight: bold;
    font-size: 25px;
    color: white;
    margin-bottom: 20px;
}


.login-popup {
    padding: 15px;
    position: fixed;
    top: 15px;
    right: 90px;
    width: 150px;
    height: 250px;
    background-color: #ffffff;
    border: #c2c2c2 2px solid;
    border-radius: 5px 0px 5px 5px;
    display: flex;
    flex-direction: column;
}

.hide {
    display: none;
}

.tasks {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    color: #e8e8e8;
    margin-top: 12px;

}

.task {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-height: 20px;
    margin-left: 10px;
}

.oneTask {
    min-width: 25%;
    max-width: 80%;
}

.taskButton {
    color: white;
    cursor: pointer;
    margin: 10px 10px 10px 3%;
    padding: 6px 9px;
    border: 1px solid #541f93;
    border-radius: 3px;
    background-color: rgba(95, 38, 165, 0.47);
}

.taskRemove {
    cursor: pointer;
    margin: 10px 10px 10px 3%;
    padding: 3px 9px;
    border: 1px solid #541f93;
    border-radius: 3px;
    background-color: rgba(95, 38, 165, 0.47);
}

.tasksField {
    padding-bottom: 8px;
}

.lineOver {
    text-decoration: line-through;
    color: #9c9c9c;
}

.taskNotInTime {
    color: #a45054;
}

.time {
    width: 20px;
    cursor: pointer;
    margin: 10px;
}

.timeBox {
    position: absolute;
    width: 200px;
    margin-left: -25px;
    margin-top: -5px;
    padding: 10px;
    color: white;
    background-color: #541f93;
    padding: 5px;
    width: 200px;
    border-radius: 5px;
}

.timeInputs {
    width: 68px;
}

.shortcuts {
    display: flex;
}

.shortcut {
    padding: 2px;
    border-radius: 5px;
    border: #6a3afc 2px solid;
    margin: 3px;
    cursor: pointer;
}

.deadline {
    font-size: 21px;
    color: #4b1d83;
    font-weight: bold;
}

.empty {
    color: #541f93;
    background-color: rgba(79, 11, 22, 0);
}

.background-page {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url("/img/background-sml.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Fixní pozadí */
    width: 100%;
    height: 100vh;
}

.formInputs {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.formInputs input {
    border: 0px;
    font-size: 15px;
    border-radius: 16px;
    color: white;
    margin: 5px;
}

input.formInput {
    width: 230px;
    box-shadow: 0px 0px 8px 0px rgb(26, 11, 51);
    padding: 14px;
    background-color: rgba(91, 80, 103, 0.21);
    outline: none;
    transition: box-shadow 0.2s ease, background-color 0.2s ease, border 0.2s ease;
}

input:focus.formInput {
    box-shadow: 0px 0px 8px 0px rgb(26, 11, 51);
    background-color: rgba(123, 88, 161, 0.21);
}

.formInputs div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.formButton {
    width: 150px;
    padding: 0 !important;
    height: 30px;
    margin-top: 30px !important;
    background: linear-gradient(90deg, rgb(94, 27, 152) 0%, rgba(85, 9, 121, 1) 35%, rgb(67, 5, 94) 100%);
    box-shadow: 0px 0px 10px -2px rgba(89, 33, 136, 0.5) !important;
    cursor: pointer;
}

.underLine {
    text-decoration: underline;
    margin-top: 12px;
    color: rgba(162, 138, 204, 0.7);
    font-size: 13px;
}

.title {
    font-size: 45px;
    background: linear-gradient(90deg, rgb(94, 27, 152) 0%, rgba(85, 9, 121, 1) 35%, rgb(67, 5, 94) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 48px;
    font-weight: bold;
    font-weight: bold;
    margin: 20px;
}

.top .title {
    font-size: 40px;
}

.inputLabel {
    font-size: 15px;
}

.signInForm .formInputs {
    width: 410px;
}

.signInForm {
    width: 410px;
}

.tasks input:nth-of-type(2) {
    width: 85%;
    background-color: rgba(125, 106, 145, 0.3);
    outline: none;
    border: 0;
    border-radius: 8px;
    color: white;
    padding: 4px;
    font-size: 15px;
    margin-left: 10px;
}

@media only screen and (max-width: 1100px) {
    .taskListNameInput {
        width: 35%;
    }
}

@media only screen and (max-width: 580px) {
    .taskList {
        width: auto;
    }
}

.friendsButton {
    position: absolute;
    top: 135px;
    left: auto;
    right: 35px;
}

.friendsBox {
    width: 400px;
    height: 400px;
    position: absolute;
    background-color: #2e1150;
    display: flex;
    justify-content: start;
    right: -20px;
    top: 32px;

    .yourFriends {
        width: 45%;
        margin: 5%;
        display: flex;
        align-items: start;
        flex-direction: column;

        .friends {
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: center;

            .menuFriends {
                position: fixed;
                width: 140px;
                background-color: #2e1150;
                border: solid 2px #541f93;
                border-radius: 5px;

                div.item {
                    font-size: 15px;
                    cursor: pointer;
                    margin: 5px;
                }

                .removeFriend {
                    color: #a45054;
                }
            }

            .dots {
                border: 0;
                margin: 0 !Important;
                padding: 6px 7px 6px 7px;

                .dot {
                    width: 4px;
                    height: 4px;
                }
            }
        }
    }

    .friendSearch {
        width: 45%;
        margin: 5%;

        .friendInput {
            width: 100%;
        }

        .request {
            height: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .choice {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 55px;

                .decline {
                    width: 25px;
                    cursor: pointer;
                }

                .accept {
                    width: 27px;
                    cursor: pointer;
                }
            }

            &#send {
                .choice {
                    display: flex;
                    justify-content: end;
                    align-items: center;
                }
            }
        }
    }
}

.imgLink {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 100px;
    background-color: #2e1150;
}

.friendsImage {
    width: 44px;
    cursor: pointer;
    z-index: 100;
}

.user {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.fakeHrFriends {
    margin-top: 10px;
    height: 3px;
    width: 100%;
    background-color: #250c45 !important;
}

.selectSharingTaskList {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.27);
    display: flex;
    justify-content: center;
    align-items: center;

    .sharingForm {
        left: calc(50% + 180px);
        top: calc(50% + 180px);
        width: 360px;
        height: 360px;
        z-index: 900;
        background-color: #2d134e;
        border-radius: 10px;
        padding: 20px;

        .sh-title {
            font-size: 18px;
            font-weight: bold;
        }
        .fakeHr {
            margin-top: 5px;
            width: 100%;
        }
    }
}

.share {
    text-align: center;
    width: 60px;
    color: white;
    cursor: pointer;
    margin: 10px 10px 10px 3%;
    padding: 6px 9px;
    border: 1px solid #541f93;
    border-radius: 3px;
    background-color: rgba(95, 38, 165, 0.47);
}
.taskNaSharenuti {
    margin: 8px;
    font-size: 17px;
}
.all {
   padding-top: 5px;
}