html{
	height 100% ;
	margin:0 ;
}

body{
	height 100% ;
/*	overflow-y: hidden;*/
}

#header{
	border-bottom:1px solid #000;
}

.login_container h1{
	font-weight:bold ;
	font-size:large ;
	
	margin-bottom:12px ;
	
	background-color:#cee ;
}

.login_container {
	max-width: 400px;
	margin: 10em auto;
	padding: 20px;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.form_group {
	text-align:center ;
	margin-bottom: 15px;
}

label{
	cursor:default ;
	margin-bottom: 5px;
	margin-left:-2px ;
	margin-right: -4px;
}

label[for="todo_dialog_body"]{
	vertical-align:18px ;
	margin-bottom:5px ;
	margin-left:2px ;
	margin-right:2px ;
	
	padding:3px ;
}

input[type="text"],
input[type="password"] {
	padding: 0.24em;
	border: 1px solid #555;
	border-radius: 8px;
}

#user_id
#password{
	width:280px ;
}

.login_button{
	width: 100%;
	padding: 10px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}

.login_button:active{
	background-color: #20abff;
}

#error_message{
	font-weight: bold;
	color:red ;
}

.title_icon{
	width:24px ;
	height:24px ;
	margin: 6px ;
	vertical-align:-8px ;
}

.logout_box{
	display:inline-block ;
	float:right ;
	
	margin:6px 12px 6px 0 ;
	
	cursor:pointer ;
}

.title_text{
	display: inline-block ;
	font-weight:bold ;
}

.todo_page_outer{
	position: fixed;
	text-align:center ;

	width: 100%;
	height:100vh ;
	margin: 0;
	margin-top: 4px ;
	padding: 0;
	padding-top: 2px;
}

.page_wrapper{
	max-width: 640px;
	margin: 2em auto;
	padding: 0.8em;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.todo_page_wrapper{
	display: flex ;
	flex-direction: column ;

	max-width: 100%;

	margin: 0 2em ;
    margin-top: 4px;
	padding: 0 ;
	background-color: #fff;
}

.todo_wrapper{
	display:flex ;
	flex-direction:row ;

	max-width: 1800px;

	margin: 8px auto;
	padding: 8px;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}


.todo_perfective{
	flex:1 ;

	box-sizing:content-box;
	outline-offset:12px ;

	overflow-wrap:anywhere ;
	overflow-x:hidden ;
	
	margin:6px ;
	padding:12px ;
	padding-top:0 ;
}

.todo_perfective:first-child{
	border-right:1px solid #444 ;
	padding-right: 24px ;
}

.todo_perfective_title{
	background-color: #ddd ;
}

.todo_item_wrap{
	max-height:95% ;
	overflow-y:hidden ;
}

.todo_item{
	flex: 1 ;
	max-height:24px ;
	overflow-x:hidden ;
	overflow-y:hidden ;
	
	cursor:pointer ;

	border-bottom:1px solid #000 ;
	
	text-align:left ;
}

input{
	margin:4px 8px 4px 8px ;
	padding:2px 4px 2px 4px ;
}

button{
	margin:2px 8px 2px 8px ;
	padding:1px 6px 1px 6px ;
}

.create_div{
	height:32px;
	padding-bottom:8px;
	height: 32px;
	padding-bottom: 8px;
	margin-top: -30px;
}
    
.create_button{
	display:inline-block;
	float:left;
	margin-bottom:6px;
}

dialog{
	padding: 0;
	border-top: 2px lightslategray solid;
	border-left: 2px lightslategray solid;
	border-right: 2px black solid;
	border-bottom: 2px black solid;
}

.dialog-bar{
	display:block;
	background-color: #cee;
	border-top: #cee 3px solid;
	border-left: #cee 4px solid;
	border-right: #cee 4px solid;
	border-bottom: #cee 1px solid;
	height:29px;
}

.dialog .switch {
	position: relative;
}

.dialog{
	overflow-x:hidden ;
}

.dialog .switch:before, .dialog .switch:after {
	content: "";
	vertical-align: middle;
	display: inline-block;
}

.dialog .switch:before {
	width: 32px;
	height: 15px;
	border: 2px solid #ccc;
	border-radius: 32px;
	background: #99bbee;
}

.dialog .switch:after {
	position: relative;
	width: 14px;
	height: 14px;
	background: #eee;
	border-radius: 50%;
	left: -33px;
}

.dialog input[type=checkbox]{
	display: none;
}

.perfective_indicate{
	display:inline-block ;
	margin-left: -11px;
}

.dialog .item-frame {
	margin: 1rem auto;
}

.dialog .text {
	vertical-align: middle;
}

.dialog label {

}

.dialog input:checked ~ .switch:before {
	background: #99bbee;
	border-color: #ccc;
}

.dialog input:checked ~ .switch:after {
	background: #eee;
	left: -16px;
}

.dialog p {
	display: inline;
}

.close-button{
	float:right ;
	margin-top:1px ;
	padding-right:3px ;
}

.todo_body_text{
	border-radius: 8px;
	height: 118px;
	width: 314px;
}

.no_clock{
	vertical-align: -4px;
	width: 21px;
	height: 21px;
}

#create_todo{
	width:480px ;
	height:350px ;
}

#in_progress{
}

#finished{
}

#name{
	margin-left: 3em;
}



.close-button{
	margin-top: 1px;
	padding-right: 3px;
}

.copyright{
	text-align:center;
	font-size:0.4em;
}