@import url('fonts/Comfortaa/Comfortaa.css');
@import url('fonts/VK-Sans-Display/VK-Sans-Display.css');

:root {
    /*Const colors*/
    --dark-first: #010101;
    --dark-second: #242424;
    --dark-text-first: #A3A3A3;
    --dark-text-second: #515151;
    --dark-overlay: #4d4d4d80;
    --dark-alt: #00529E;

    --light-first: #fefefe;
    --light-second: #E6E6E6;
    --light-text-first: #232323;
    --light-text-second: #B4B4B4;
    --light-overlay: #d8d8d880;
    --light-alt: #0C84FF;

}

html, body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--first-color);
    color: var(--first-text-color);
    margin: 0;
    padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
    font-family: 'VK Sans Display';
    font-synthesis: style;
    user-select: none;
    transition: .3s;

	-webkit-tap-highlight-color: transparent;
}

body.light {
    --first-color:var(--light-first);
    --second-color:var(--light-second);
    --first-text-color:var(--light-text-first);
    --second-text-color:var(--light-text-second);
    --overlay-color:var(--light-overlay);
    --alt-color:var(--light-alt);
}
body.dark {
    --first-color:var(--dark-first);
    --second-color:var(--dark-second);
    --first-text-color:var(--dark-text-first);
    --second-text-color:var(--dark-text-second);
    --overlay-color:var(--dark-overlay);
    --alt-color:var(--dark-alt);
}

h1, h2, h3 {margin: 5px;}

@keyframes modal {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.modal {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-color);
    backdrop-filter: blur(2px);
    z-index: 1000;
    animation: modal .15s linear forwards;
}
@keyframes box {
    0%{
        top: calc(50% + 10px);
    }
    100%{
        top: 50%
    }
}
.modal .box {
    background-color: var(--first-color);
    border-radius: 10px;
    z-index: 1001;
    position: absolute;
    font-size: 18px;
    padding: 5px;
    max-width: 400px;

    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    animation: box .15s ease-in-out forwards;
}
.modal .box h1, .modal .box h2, .modal .box h3 {
    text-align: center; 
    font-size: x-large;
}

/* Popups */
/* ~~~Add dialog~~~ */
#add_dial .box .wrapper {
    display: flex; 
    text-align: center;
}
#add_dial .box .wrapper * {
    margin: 5px;
    border: none;
    border-radius: 5px;
    height: 25px;
    padding: 3px 5px;
}
#add_dial .box .wrapper input {
    border: var(--alt-color) solid 1px; 
    background-color: #00000000;
    color: var(--first-text-color);
}
#add_dial .box .wrapper input:focus {outline: none;}
#add_dial .box .wrapper a {
    background-color: var(--alt-color); 
    color: var(--first-color); 
    width: 25px;
}
#add_dial .box .wrapper a:hover {opacity: 0.5;}

/* ~~~Manage dialog~~~ */
#manage_dial .box {width: 80%;}
#manage_dial .box h3 {
    font-size: inherit;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#manage_dial .box h3:focus {
    border: var(--alt-color) solid 1px; 
    outline: none;
    overflow: auto;
    text-overflow: unset;
    border-radius: 2.5px;
}
#manage_dial .box .name a {
    width: 25px; height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#manage_dial .box .name a svg {
    fill: var(--second-text-color);
    transform: rotate(45deg);
}
#manage_dial .box .wrapper {
    text-align: center;
}
#manage_dial .box .wrapper * {
    margin: 3px;
    height: auto;
    border: none;
    border-radius: 5px;
    padding: 2px 3px;
}
#manage_dial .box .wrapper .info {
    font-size: initial;
    color: var(--second-text-color);
    font-family: sans-serif;
    text-align: center;
}
#manage_dial .box .flexbox {display: flex;}
#manage_dial .box .wrapper .flexbox a{
    width: 30px;
    height: 25px;
    margin-right: 5px;
    background: var(--second-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
#manage_dial .box .wrapper .flexbox a.checked {background: var(--alt-color);}
#manage_dial .box .wrapper .flexbox a.star svg .im0{fill: var(--second-color);}
#manage_dial .box .wrapper .flexbox a.star svg .im1{stroke: var(--alt-color);}
#manage_dial .box .wrapper .flexbox a.checked.star svg .im0{fill: var(--first-color);}
#manage_dial .box .wrapper .flexbox a.checked.star svg .im1{stroke: var(--first-color);}
#manage_dial .box .wrapper .flexbox a.complete svg {
    stroke: var(--alt-color);
    fill: var(--alt-color);
}
#manage_dial .box .wrapper .flexbox a.checked.complete svg {
    stroke: var(--first-color);
    fill: var(--first-color);
}
#manage_dial .box .wrapper .flexbox a.delete {
    background-color: #f00; 
    color: var(--first-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - (30px + 5px) *2);
    margin-right: 0;
}

/* ~~~Settings Dialog~~~ */
#settings_dial .box {width: 70%;}
#settings_dial .box .wrapper {padding: 5px;}
#settings_dial .box .wrapper table {width: 100%;}
#settings_dial td {padding: 5px;}
#settings_dial td:first-child{vertical-align: top;}
#settings_dial td:last-child{width: 100px;}
#settings_dial td:nth-child(2) *{float: right;}
#settings_dial #s_theme td a:last-child{display: flex;}
#settings_dial #s_theme td a:last-child div:nth-child(1){color: var(--second-color);}
#settings_dial #s_theme td a:last-child div:nth-child(2){color: var(--alt-color);}
#settings_dial #s_theme td a:last-child div:nth-child(3){color: var(--first-text-color);}
#settings_dial #s_theme td a:last-child div:nth-child(4){color: var(--second-text-color);}
#settings_dial #s_header td {padding-bottom: 2px;}
#settings_dial #s_data td a {
    padding: 3px 6px;
    background-color: var(--second-color);
    border-radius: 5px;
	margin-bottom: 3px;
}
#settings_dial #s_data td a:last-child{margin-bottom: 0}
#settings_dial #s_data td a.completed{
    color: var(--first-color);
    background-color: var(--alt-color);
}
#settings_dial #s_data td a.failed{
    color: var(--first-color);
    background-color: red;
}
#settings_dial #s_about td {
	font-size: 14px;
	padding: 0;
}
#settings_dial #s_about td a {color: var(--alt-color)}
/*-------------------------*/

.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}
.switch input { 
      display:none
}
  
.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--second-color);
    border-radius: 40px;
    transition: .3s;
}
.switch .slider:before {
    position: absolute;
    content: " ";
    height: 14px;
    width: 14px;
    left: 6px;
    bottom: 7px;
    background-color: var(--first-color);
    border-radius: 50%;
    transition: .3s;
}
.switch input:checked + .slider {
    background-color: var(--alt-color);
}
.switch input:checked + .slider:before {
    transform: translateX(26px);
}
.dark .switch .slider:before{
    background-color: var(--second-text-color);
}
.dark .switch input:checked + .slider:before {
    background-color: var(--first-text-color);
}

header {
    display: flex;
	align-items: center;
	background-color: var(--first-color);
    color: var(--second-text-color);
    padding: 5px;
	width: calc(100% - 10px);
	height: 40px;
    text-align: center;
    font-family: 'Comfortaa';
    font-size: 10px;
	z-index: 100;
}
body.newScroll header {position: fixed}
header svg {
    height: 30px;
    stroke: var(--second-text-color);
    fill: var(--second-text-color);
}
/*header nav {margin: auto;}
header nav a {
    margin-right: 30px;
}
header nav a:last-child {
    margin-right: 0;
}
header nav a.active svg{
    fill: var(--alt-color);
    stroke: var(--alt-color);
}*/
header h1 {margin: 0 auto;}
header .settings {
    position: absolute;
    right: 5px;
}
header .settings svg {fill: var(--first-text-color) !important;}

main {
    position: absolute;
    margin: 0;
    padding: 0;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}
main .item {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    min-height: 30px;
    margin: 5px 10px;
    padding: 10px 5px;
    font-size: 18px;
    border-top: 1px solid var(--second-color);
}
body.newScroll main .item:first-child {margin-top: 55px;}

main .item.completed {
    color: var(--second-color);
    text-decoration: line-through;
}

main .item span.complete{
    float: right;
    width: 20px;
    height: 20px;
    margin-right: 15px;
    border-radius: 50%;
    background: var(--first-color);
    border: solid 1px var(--second-text-color);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}
main .item span.complete svg {
    height: 15px;
    stroke:none; 
    fill: none;
}
main .item.completed span.complete{
    border-color: var(--alt-color);
    background: var(--alt-color);
}
main .item.completed span.complete svg {
    stroke: var(--first-color);
    fill: var(--first-color);
}
main .item.completed span.task * {opacity:0.5}
main .item span.star{
    width: 20px;
    height: 20px;
    margin-left: 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}
main .item.completed span.star {opacity: 0.5;}
main .item span.star svg .im0{fill: var(--first-color);} 
main .item span.star svg .im1{
    stroke: var(--second-text-color);
} 
main .item.important span.star svg .im0{
    fill: var(--alt-color);
} 
main .item.important span.star svg .im1{
    stroke: var(--alt-color);
}
main .item span.task {width: calc(100% - 15px*2 - 22px - 20px);}

/* ~~~Old style~~~*/
main.oldstyle .item span.task {width: calc(100% - 15px - 20px);} 
main.oldstyle .item span.manage {
    width: 20px;
    height: 20px;
    margin-left: 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}
main.oldstyle .item span.manage svg {
    transform: rotate(90deg);
    fill: var(--first-text-color);
}
main.oldstyle .item.important span.manage svg {fill: var(--alt-color);}
/*----------------*/

footer{ 
    position: absolute;
    left: 50%; transform: translateX(-50%);
    bottom: 5%;
    z-index: 999;
}
footer a {
  display: flex;
  align-items: center;
  padding: 10px;
}
footer svg {
    fill: var(--alt-color);
    margin: 0 auto;
    display: block;
    height: 40px;
}
footer a.add{
    background: var(--first-color);
    color: var(--alt-color);
    text-decoration: none;
    font-style: normal;
    font-size: 30px;
    border-radius: 50%;
}
.light footer a.add {
    box-shadow: 0 0 35px -15px #000;
}
.dark footer a.add {
    box-shadow: none;
    background-color: var(--second-color);
}
footer a:active{background-color: var(--second-color);}