* {
	box-sizing: border-box;
}
body {
	font-family:lato;
	
}
.wrapper {
    width: 100%; 
    margin: 10px auto; 
    display: inline-block; 
}
/*
* COMMENT FORM
**/
.form_sec {
	vertical-align: top;
	display: inline-block;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	top: 0;
	text-align: center;
	background: rgba(0,0,0,.6);
	opacity: 0;
    visibility: hidden;
	transition: .3s all ease-in-out;
}
.form_sec.active { 
    opacity: 1;
	visibility: visible;
}
.form_sec .comment_form {
	width: 100%;
	border: 1px solid green;
	background: #fafcfc;
	padding: 20px;
	display: inline-block;
	max-width: 500px;
	text-align: left;
	margin-top: 10px;
	position: relative;
}

.comment_form.stick {
    position: fixed;
    width: 48%;  
}

.comment_form label {
  display: block;
  margin: 5px 0px 5px 0px;
}
.comment_form input, 
.comment_form textarea,
.comment_form select {
  padding: 5px;
  width: 95%;
}
#submit_btn, #update_btn {
  padding: 8px 15px;
  color: white;
  background: #339;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
}
#update_btn {
  background: #1c7600;
}
/*
* COMMENT DISPLAY AREA
**/
#display_area {
	width: 100%; 
	vertical-align: top;
	max-width: 770px; 
	display: block;
}
.comment_box {
  cursor: default; 
  margin: 5px 0;
  border: 1px solid #cbcbcb;
  padding: 5px 10px;
  position: relative;
  display: inline-block;
  width: 100%;
}
.delete {
  position: absolute;
  top: 0px;
  right: 3px;
  color: red; 
  cursor: pointer;
}
.edit {
  position: absolute;
  top: 0px;
  right: 45px;
  color: green; 
  cursor: pointer;
  margin: 0 10px;
}
.insert {
  position: absolute;
  top: 60px;
  right: 45px;
  color: green; 
  cursor: pointer;
  margin: 0 10px;
  display: none;
}
.insert.active { 
  display: block;
}
.comment_box .meta_data :hover .edit, .comment_box .meta_data:hover .delete,
 {
  display: block;
}
 
.meta_toggle {
    position: absolute;
    right: 30px;
    top: 10px;
    font-size: 21px;
    cursor: pointer;
}

.meta_toggle .fa-times { 
    display: none;
}

.meta_toggle.active .fa-bars { 
    display: none;
}
.meta_toggle.active .fa-times { 
    display: block;
}

.meta_data {
    display: inline-block;
    width: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    position: relative;
    opacity: 0;
    height: 0;
    visibility: hidden;
}

.meta_data.active {
	opacity: 1;
	height: auto;
	visibility: visible;
	padding: 10px;
	margin: 10px 0;
}

#display_area .display_img {
    display: inline-block;
    width: 80px; 
	float: left;
	
}

#display_area .display_name,
#display_area .display_id {
  color: #1c2260;
  padding: 0px;
  margin: 0px 0px 5px 0px;
  float: left;
  width: calc(100% - 80px);
  padding-left: 10px;
} 

#display_area .meta_data .display_name, 
#display_area .meta_data .display_id, 
#display_area .meta_data .metaid {
    display: none;
}

#display_area .meta_data .display_namespace, #display_area .meta_data .display_key, #display_area .meta_data .display_value {
	position: relative;
	width: calc(33% - 1px);
	display: inline-block;
	margin-top: 30px;
	border: 1px solid #ccc;
	padding: 5px 10px;
	border-radius: 5px;
}
#display_area .meta_data .display_namespace::before, #display_area .meta_data .display_key::before, #display_area .meta_data .display_value::before,
#display_area .meta_data .comment_text:before {
	content: "";
	position: absolute;
	top: -26px;
	left: 3px;
}
#display_area .meta_data .display_namespace:before {
    content: "Namespace"; 
}
#display_area .meta_data .display_key:before {
    content: "Key"; 
}
#display_area .meta_data .display_value:before {
    content: "Value Type"; 
}
#display_area .meta_data .comment_text {
	text-align: justify;
	padding: 5px 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 100%;
	margin-top: 30px;
	position: relative;
}
#display_area .meta_data .comment_text:before {
	content: "Value"; 
}



/*tabber*/
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  margin: auto; 
  margin-top: 30px;
  max-width: 750px;
  width: 100%;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  max-width: 750px;
  width: 100%;
  margin: auto;
  background: #fff;
}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    background: url(loading.gif); 
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,.8);
    background-size: 370px;
    background-position: center;
}

.close {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 19px;
    color: #1c2260;
    background: #fff;
    height: 30px;
    width: 30px;
    text-align: center;
    padding-top: 5px;
    border-radius: 50%;
    box-shadow: 0px 1px 1px 0px #ccc;
    cursor: pointer;
}

footer .copyright {
    padding: 20px 0;
    max-width: 750px;
    width: 100%;
    margin: auto;
}