body{
	min-width:300px;
	height:100%;
	background:white;
	color: #555555;
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight: normal;
	line-height:1.3em;
  margin:0;
  padding:0;
}

.footer{
  text-align: center;
  position:absolute;
  bottom:0;
  width: 100%;
  height:60px;
  background-color: #000;
  color: white;
  z-index:97;
}

#container {
  min-height:100%;
  position:relative;
}

#mainbody {
  padding-bottom:60px;   /* Height of the footer */
}

#topbtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 98; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #aaefff; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#topbtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

#register_form,#postform,#buyer_selection_form{
  margin-top: 20px;
}

#register_form h1,#postform h1,#buyer_selection_form h1{
  text-align:center;
  font-size: 32px;
}

#register_form h3,#postform h3,#buyer_selection_form h3{
  text-align:center;
  font-size: 20px;
}

.form_column{
  padding-left: 10px;
  padding-right: 10px;
}

.form_label{
  text-align:left;
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 3px;
}

/* Style the green button */
.green_btn{
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 10px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Style the green button */
.black_btn{
  width: 100%;
  background-color: black;
  color: white;
  padding: 14px 10px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Style the red button */
  .red_btn {
  width: 100%;
  background-color: Red;
  color: white;
  padding: 14px 10px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#register_form input[type=text],#login_form input[type=text],input[type=password],input[type="date"],#register_form select, #postform input[type=number],#post_type, #post_Title, #buyer_selection_postid, #buyer_selection{
  width: 100%;
  padding: 10.5px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 3px;
  font-size: 16px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  margin-top: 18px;
}

#postform textarea{
  width: 100%;
  height: 300px;
  padding: 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 3px;
  font-size: 16px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  resize : none;
}

#sendmsg_form textarea{
  width: 100%;
  height: 150px;
  padding: 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 3px;
  font-size: 16px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  resize : none;
}

#login_close, #addvalue_close{
  float: right;
  background-color: #000;
  color: white;
}

#register_form_submit, #login-submit, #login-msg-confirm{
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  border: 2px solid #777;
  background-color: #000;
  color: #fff;
}

.popupmsg-container{
  display: none;
  background-color: #fff;
  border: 3px solid #000;
  color: #000;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  left: 50%;
  text-align: center;
  z-index: 102;
}

#sendmsg_form input[type=text],#sendmsg_form input[type=email] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 3px;
  font-size: 16px;
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

#zoomed_img_container{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 102;
  margin: auto;   /* Automatic margin from left */
  display:block;
}

#zoomed_img{
  display:block;
}

#login-container, #login-msg-container{
  width: 600px;
  height: 300px; 
  margin-top: -150px;
  margin-left: -300px;
}

#addvalue-container{
  width: 100%;
  height: 600px; 
  margin-top: -300px;
  margin-left: -50%;
}

#sendmsg-container{
  width: 80%;
  height: 650px;
  margin-top: -300px;
  margin-left: -40%;
}

.prev_page, .next_page {
  width: auto;
  color: black;
  vertical-align:middle;
  cursor: pointer;
  font-size: 26px;
}

/* Position the "prev button" to the left */
.prev_page {
  Float: left;
  padding: 10px 10px 10px 10px;
}
/* Position the "next button" to the right */
.next_page {
  Float: right;
  padding: 10px 10px 10px 10px;
}

/* On hover, add a black background color with a little bit see-through */
.next_page:hover, .prev_page:hover {
  background-color: rgba(0,0,0,0.8);
}

.popupmsg-container p{
  font-size: 18px;
  margin-top: 50px;
}

.popupmsg-container a{
  text-transform: uppercase;
  text-decoration: none;
  /*font-size: 20px;*/
}

.popupmsg-option{
  position: absolute;
  width: 100%;
  bottom:0;
  left:0;
  line-height: 40px;
}

.popupmsg-option-single{
  position: absolute;
  width: 100%;
  bottom:0;
  left:0;
  background-color: #2ECC71;
  text-align: center;
  line-height: 40px;
}

.popupmsg-option a:first-child{
  float: left;
  width: 50%;
  background-color: #2ECC71;
}

.popupmsg-option a:last-child{
  float: right;
  width: 50%;
  background-color: #F44336;
}

#cover, #zoomed_img_cover{
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  top:0;
  left: 0;
  margin-bottom: -30px;
}

#msg-cover{
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  top:0;
  left: 0;
  margin-bottom: -30px;
  z-index: 101;
}

/* Refer To https://www.webdesigns.com.tw/jQuery_flip-panel.asp */
.flip{margin:0px;padding:5px;text-align:center;color:black;background:#9bcf7c;cursor:pointer;}
.panel{margin:10px 10px 5px 10px;padding:5px;border:solid 3px #36aeb3;display:none;}

.flip_black{margin:0px;padding:5px;text-align:left;color:black;background:#d8d8d8;cursor:pointer;}

.month {
  padding: 70px 25px;
  width: 100%;
  background: #1abc9c;
  text-align: center;
}

.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.month .prev {
  float: left;
  padding-top: 10px;
}

.month .next {
  float: right;
  padding-top: 10px;
}

.weekdays {
  margin: 0;
  padding: 10px 0;
  background-color: #ddd;
}

.weekdays li {
  display: inline-block;
  width: 13.6%;
  color: #666;
  text-align: center;
}

.days {
  padding: 10px 0;
  background: #eee;
  margin: 0;
}

.days li {
  list-style-type: none;
  display: inline-block;
  width: 13.6%;
  text-align: center;
  margin-bottom: 5px;
  font-size:12px;
  color: #777;
}

.days li .active {
  padding: 5px;
  background: #1abc9c;
  color: white !important
}

.overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.collapsible_btn {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible_btn:hover {
  background-color: #555;
}

.collapsible_content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
  .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
  .weekdays li, .days li {width: 12.5%;}
  .days li .active {padding: 2px;}
}

@media screen and (max-width: 290px) {
  .weekdays li, .days li {width: 12.2%;}
}