@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400,600,700,800&subset=latin,latin-ext);

html, body{height: 100%; margin: 0; padding: 0;}
body{margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; position: relative; background: #222222; padding: 10px}

*{box-sizing: border-box;}
a{color: #113955; text-decoration: none;}
h1{color: #333333;}
h1 a{text-decoration: underline}
h2{color: #333333; margin: 0; padding: 0px 0 10px 0;}
h2 a{text-decoration: underline}
h3{color: #333333;}
p{color: #333333;}
p a{text-decoration: underline} 
strong, b{font-weight: 600}

.cleaner{clear: both}
.center{text-align: center;}
.inline{display: inline}
.container{padding: 10px;}
.hidden{display: none;}

#wrapper{position: relative; min-height: 100%; margin: 0 auto; background: #ffffff; padding: 0; max-width: 600px;}

#filter{}
#filter input{float: left; width: 49.5%; margin: 0 1% 0 0; font-size: 16px; padding: 5px;  line-height: 16px;border: 1px solid #c5c5c5; height: 30px; border-radius: 3px;}
#filter input[name="search"]{width: 100%; margin: 0 0 1% 0}
#filter input[name="from"]{background: #D5C9CF;}
#filter input[name="to"]{background: #E1D4C0; margin: 0;}
#filter select{float: left; width: 83%;  margin: 0 2% 4px 0;  font-size: 16px; padding: 5px; line-height: 16px; border: 1px solid #c5c5c5;height: 30px;  border-radius: 3px; background: #F6F6F6; -webkit-appearance:none; appearance:none;  -moz-appearance:none; }
#filter a{width: 15%; margin: 0 0 8px 0; float: left; font-size: 16px; padding: 5px; line-height: 16px; border: 0; height: 30px;  border-radius: 3px;  background: #337ab7; color: #ffffff; text-align: center; border: 1px solid #2e6da4 }

#new label{float: left; width: 30%; margin: 3px 0; font-size: 16px; padding: 5px 0;  border: 0; height: 30px;}
#new label.full{width: 100%;}
#new .after-label{float: right; width: 68%;}
#new input{border: 1px solid #c5c5c5; font-size: 16px; padding: 5px;  line-height: 16px;  height: 30px; border-radius: 3px; background: #F6F6F6; margin: 0;}
#new input[name="to"]{ margin: 0 0 0 1%;}
#new select{border: 1px solid #c5c5c5; font-size: 16px; padding: 5px; line-height: 16px;  height: 30px;  border-radius: 3px; background: #F6F6F6; margin:  0; -webkit-appearance:none; appearance:none;  -moz-appearance:none; }
#new textarea{border: 1px solid #c5c5c5; width: 100%; font-size: 16px; padding: 5px;  line-height: 20px; border-radius: 3px; background: #F6F6F6; margin: 3px 0; font-family: 'Open Sans', sans-serif; resize: none; height: 118px;}
#new textarea[name="text"]{height: 55px}
#new textarea[name="text2"]{height: 200px}

#detail label{float: left; width: 30%; margin: 3px 0; font-size: 16px; padding: 5px 0;  border: 0; height: 30px;}
#detail label.full{width: 100%;}
#detail p.value{margin: 3px 0; /*height: 30px; */padding: 5px 0;}

#user{width: 80%; margin: 0px auto;}
#user input{border: 1px solid #c5c5c5; font-size: 16px; padding: 5px;  line-height: 16px;  height: 40px; border-radius: 3px; background: #F6F6F6;  width: 100%; margin: 0px 0 5px 0; text-align: center;}
#user img{width: 250px; margin: 50px auto 50px auto; display: block;}
#user .button{width: 100%; display: block; margin: 5px 0; border-radius: 3px;  font-size: 16px; padding: 10px;  line-height: 16px;  background: #337ab7; color: #ffffff; text-align: center; border: 1px solid #2e6da4 }


#user-login{float: right; margin: 0 0 7px 0; font-size: 14px; line-height: 26px;}
#user-login .button{display: block; margin: 0px 0 0 10px; border-radius: 3px; font-size: 12px; line-height: 22px; padding: 1px 8px;  background: #efefef; color: #333333; text-align: center; border: 1px solid #cccccc; float: right; }


.ui-datepicker{ width: 100%; margin: 3px 0 6px 0;} 
.ui-datepicker th{font-weight: 400; padding: 4px;}
.ui-datepicker .ui-state-default{font-size: 16px; padding: 5px; border-radius: 3px;}
.ui-datepicker .ui-datepicker-header{background: #E1D4C0; padding: 2px 0; border: 0; font-size: 16px; line-height: 16px; height: 30px; font-weight: 400;}
.ui-widget.ui-widget-content{border: 0; padding: 0;}
#datepicker .ui-datepicker .ui-datepicker-header{background: #D5C9CF;}
#datepicker2{display: none;}
#datepicker2 .ui-datepicker .ui-datepicker-header{background: #E1D4C0;}

#new-button{width: 100%; display: block; margin: 5px 0; border-radius: 3px;  font-size: 16px; padding: 10px;  line-height: 16px;  background: #337ab7; color: #ffffff; text-align: center; border: 1px solid #2e6da4 }
#save-button{width: 100%; display: block; margin: 5px 0; border-radius: 3px;  font-size: 16px; padding: 10px;  line-height: 16px;  background: #337ab7; color: #ffffff; text-align: center; border: 1px solid #2e6da4 }
#cancel-button{width: 100%; display: block; margin: 10px 0; border-radius: 3px;  font-size: 16px; padding: 10px;  line-height: 16px;  background: #FFFFFF; color: #333333; text-align: center; border: 1px solid #cccccc }
#print-button{width: 100%; display: block; margin: 10px 0; border-radius: 3px;  font-size: 16px; padding: 10px;  line-height: 16px;  background: #337ab7; color: #ffffff; text-align: center; border: 1px solid #2e6da4 }
#print-list-button{width: 100%; display: block; margin: 10px 0; border-radius: 3px;  font-size: 16px; padding: 10px;  line-height: 16px;  background: #337ab7; color: #ffffff; text-align: center; border: 1px solid #2e6da4 }
#back-button{width: 100%; display: block; margin: 10px 0; border-radius: 3px;  font-size: 16px; padding: 10px;  line-height: 16px;  background: #FFFFFF; color: #333333; text-align: center; border: 1px solid #cccccc }
#edit-button{width: 100%; display: block; margin: 10px 0; border-radius: 3px;  font-size: 16px; padding: 10px;  line-height: 16px;  background: #337ab7; color: #ffffff; text-align: center; border: 1px solid #2e6da4 }
#delete-button{width: 100%; display: block; margin: 25px 0; border-radius: 3px;  font-size: 16px; padding: 10px;  line-height: 16px;  background: #D9534F; color: #ffffff; text-align: center; border: 1px solid #D43F3A }


.actions{}
.actions .action{background: #e6e6e6; margin: 6px 0; width: 100%; padding: 6px 10px; border-radius: 3px; position: relative; display: block;}
.actions .action .delete{position: absolute; top: 5px; right: 5px; float: right;}
.actions .action:nth-child(even){background: #f6f6f6}
.actions .action p{margin: 0; padding: 0; font-size: 14px; line-height: 26px; }
.actions .action p.name{font-size: 16px; font-weight: 600; line-height: 26px;}

/* Responsive design */
@media (max-width: 1500px){ 

}
@media (max-width: 1366px){ 

}

@media (max-width: 1280px){}

@media (max-width: 1279px){ 

}

@media (max-width: 1152px){ 
	
}

@media (max-width: 1024px){ /* iPads landscape */}

@media (max-width: 1023px){

}

@media (max-width: 768px){ /* iPads portrait */ }

@media (max-width: 767px){ 
	
}

@media (max-width: 480px){ /* iPhones landscape */}

@media (max-width: 479px){ 
}