:root {
	--black-bg: #121212;
	--grey-bg: #363636;
	--grey-bg-light: #5f5e5e;
	--text-color: rgba(255, 255, 255, 0.87);
	--btn-color: #0A64BC;
	--btn-color2: #8785e7;
	--btn-color3: #2291FF;
}
button {background-color: transparent;border: none;padding: 0;display: inline-flex;align-items: center;justify-content: center;}
.container {width: 100%;max-width: 750px;margin: 0 auto;}
body {font-family: 'Open Sans', sans-serif;font-weight: 400;color: var(--text-color);font-size: 12px;line-height: 20px;width: 100%;background-color: var(--black-bg);padding-top: 87px;}
body.common-home {padding: 0;}
body>.container {display: flex;height: 100dvh;overflow: hidden;border: 1px dashed var(--text-color);width: 100%;padding: 0;border-radius: 4px;}
.common-home .home {display: flex;width: calc(200% + 30px);padding: 15px 0 35px;justify-content: space-between;position: relative;}
.common-home .home .first-center {width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;z-index: 1;padding-top: 40%;}
.common-home .home .first-center>div {display: flex;flex-direction: column;align-items: center;justify-content: center;margin: 0 0 50px;}
.common-home .home .first-center>div>p {font-size: 30px;margin: 20px 0;}
.common-home .home .first-center img {width: 26vh;}
.common-home .home .first-center>button, .common-home .home .second-center>div>button {width: 100%;border-radius: 4px;background-color: var(--btn-color2);max-width: 300px;height: 52px;font-size: 18px;}
.common-home .home .second-center {width: 100%;left: 100%;position: absolute;z-index: 2;height: 100%;background-color: var(--black-bg);display: flex;align-items: center;justify-content: center;}
.common-home .home.go .second-center {left: 0;}
header {padding: 15px 0;position: fixed;top: 0;left: 0;width: 100%;background-color: var(--black-bg);border-bottom: 0.5px solid var(--grey-bg);z-index: 5;}
.logo-row .logo, .logo-row .logo a {font-size: 24px;color: var(--text-color);font-weight: 500;}
.logo-row {display: flex;align-items: center;justify-content: space-between;}
.logo-row .user-logo img {border-radius: 100px;width: 42px;height: 42px;}

.todo-list {position: fixed;width: 100%;padding: 15px;height: calc(100dvh - 73px);overflow: auto;top: 73px;left: 0;}
.add-btn {background-color: var(--btn-color);width: 100%;height: 52px;border-radius: 4px;font-size: 16px;text-transform: uppercase;}
.add-btn svg {width: 24px;margin: 0 5px 0 0;}
.today {width: 100%;margin: 10px auto 0;max-width: 750px;}
.list {background-color: var(--grey-bg);border-radius: 4px;max-width: 750px;margin: 0 auto;}
.list+.list {margin-top: 10px}
.list>button {padding: 15px;font-size: 18px;display: flex;align-items: center;justify-content: space-between;width: 100%;transition: .2s}
.list.active>button>svg {transform: rotate(90deg);transition: .2s}
.todo-item {padding: 15px}
.todo-item .small-title {text-decoration: underline;font-size: 14px;margin: 0 0 10px}
.todo-item .tabel-list {background-color: var(--grey-bg-light);border-radius: 4px;padding: 15px}
.todo-tab {height: 0;overflow: hidden;opacity: 0;transition: .2s}
.todo-tab input, .todo-tab label {display: none;}
.list.active .todo-tab {height: fit-content;opacity: 1;transition: .2s}

@media screen and (max-width: 750px) {
	body>.container {border: none}
}