* {
    transition: all 0.3s ease-in-out;
    user-select: none;
}

body {
    background-color: #D9ADA9;
    color: white;
    font-family: Arial, sans-serif;
    margin: 0;
    zoom: 90%;
}

#logo {
    position: fixed;
    top: 0px;
    left: 0px;
}

#logo>img {
    width: 200px;
}

#progress {
    width: 100%;
    text-align: center;
    cursor: default;

}

#progress>div {
    margin-top: 50px;
    display: inline-block;
}

#progress>div>div {
    margin: 10px;
}

#progress>div>div:first-child {
    font-size: 21px;
}

#total-progress {
    font-size: 70px;
}

#config {
    position: absolute;
    right: 0;
    margin: 20px;
    top: 0;
    cursor: default;
}

#login,
#login span {
    vertical-align: middle;
}

#login .material-symbols-outlined {
    cursor: pointer;

}

#login .material-symbols-outlined:hover {
    color: #540303;
}

#pomodoro-timering {
    margin-top: 100px;
    text-align: center;
}

#pomodoro-timering>div {
    display: inline-block;
}

#pomodoro-timering>div>div:not(:last-child) {
    display: inline-block;
    margin: 0 30px;
    width: 100px;
    text-align: center;
}

#timer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 200px;
    margin-top: -30px;
    font-size: 50px;
}

.turn-pomodoro {
    background-color: #C03939 !important;
    margin-left: 0;
}

.turn-short-pause {
    background-color: #8993FF !important;
    margin-left: 170px;
}

.turn-long-pause {
    background-color: #609950 !important;
    margin-left: 340px;
}

#tasking {
    width: 60%;
    position: absolute;
    bottom: 50px;
    box-sizing: border-box;
    height: 250px;
    left: 50%;
    margin-left: -25%;
}

#tasking>div {
    display: block;
    float: left;
    background-color: #320202;
    height: 100%;
    box-sizing: border-box;
    margin: 15px;
    border-radius: 15px;
    width: 30%;
}

#tasking h3 {
    text-align: center;
}

#new-task-description {
    border: none;
    outline: none;
    box-sizing: border-box;
    width: 100%;
    height: 140px;
    vertical-align: top;
    font-family: inherit;
    font-size: 21px;
    padding: 3px;
    text-align: center;
}


#tasking>div:nth-child(2) {
    background-color: #CD3434;
}

#tasking button {
    width: 30%;
    bottom: -15px;
    margin: 0 15px;
    position: absolute;
    border: none;
    height: 50px;
    background-color: #540303;
    font-size: 21px;
    color: white;
    left: 0;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

#tasking button:active {
    background-color: #9E0606;

}

#task-list,
#completed-tasks {
    overflow-y: auto;
    max-height: 180px;
}

#tasking ::-webkit-scrollbar-track {
    background: #ff4545;
    /* Cor de fundo da barra */
}

#tasking ::-webkit-scrollbar {
    width: 10px;
    /* Largura da barra de rolagem */
}

#tasking ::-webkit-scrollbar-thumb {
    background: #920000;
    /* Cor do 'cursor' da barra de rolagem */
}

#tasking ::-webkit-scrollbar-thumb:hover {
    background: #4b0000;
    /* Cor do 'cursor' da barra de rolagem ao passar o mouse */
}

#task-list>div>div {
    display: inline-block;
    cursor: default;
}

#task-list>div:nth-child(odd) {
    background-color: #9E0606;
}

#task-list>div:nth-child(even) {
    background-color: #f42929
}

#task-list>div:not(:first-child) {
    opacity: 0.5;
}

#task-list>div>div:first-child {
    width: 85%;
}

#task-list>div>div:last-child {
    font-size: 20px;
    width: 30px;
    padding: 5px;
    vertical-align: middle;
}

#task-list>div>div:last-child>div:last-child {
    color: #FFF;
    float: right;
}

#task-list>div:nth-child(odd)>div:last-child>div:last-child {
    color: #9E0606;
}

#task-list>div:nth-child(even)>div:last-child>div:last-child {
    color: #f42929
}

#task-list>div>div:last-child>div:last-child:hover {
    color: #FFF;
}

#start-msg {
    position: absolute;
    margin-bottom: -140px;
    font-size: 20px;
    opacity: 0;
}

#timer:hover .starting {
    opacity: 1;
}

#task-list>div {
    box-sizing: border-box;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;

}

#completed-tasks>div {
    border-top: white 1px dotted;
    cursor: copy

}

#completed-tasks>div>div {
    display: inline-block;
    box-sizing: border-box;
    padding: 5px;
}

#user-progress {
    cursor: pointer;
    vertical-align: middle;
}

#user-progress:hover {
    color: #540303;
}

#dialog {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #00000038;
    z-index: 10;
    color: #FFF;
    top: 0;
    display: none;
    opacity: 0;
}

#dialog>div {
    width: 400px;
    position: fixed;
    left: 50%;
    margin-left: -200px;
    top: 200px;
    padding: 20px;
    box-sizing: border-box;
    background: rgb(255, 35, 35);
    box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75);
    border-radius: 30px;
}

#dialog>div>div:first-child {
    padding: 10px;
    font-size: 21px;
}

#dialog>div>div:last-child {
    text-align: right;
    margin-top: 50px;
}

#dialog>div>div:last-child>div {
    display: inline-block;
    margin-left: 20px;
    color: #320202;
    cursor: pointer;
}

#dialog>div>div:last-child>div:hover {
    color: #FFF;
}