#form{
    background-color: #fff;
    width: 40%;
    margin: 120px auto;
    padding: 50px;
    box-shadow: 10px 10px 5px rgb(224, 224, 206);
    border-radius: 6px;    
    text-align: center;
}
/* #btn{
    color: beige;
    background-color: rgb(138, 138, 129);
     padding: 10px; 
    font-size: large;
    border-radius: 10px;
    padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 50%;
  margin-bottom:10px;
  margin-left: 50px;
  opacity: 0.8;
} */

#vesselTable {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 18px; /* Increase font-size */
}

#recordListing {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 18px; /* Increase font-size */
}

.form-container label{
  font-weight:bold;
}

@media screen and (max-width:700px){
    #form{
        width: 65px;
        padding: 40px;
    }
    
}
textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
  }

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* Add styles to the form container */
.form-container {
  max-width: auto;
  padding: 20px;
  background-color: white;
}

/* Full-width input fields */
/* .form-container input[type=text], .form-container input[type=password], .form-container input[type=date] {
  width: 100%;
  padding: 10px;
  margin: 5px 0 22px 0;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 3px;
  outline: 0;
} */

select{
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 3px;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus{
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  /* color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
  float: right; */
  padding: 16px 20px;
  border: none;
  width: 100%;
  margin-bottom:10px;
}

/* Add a red background color to the cancel button */
.form-defect .cancel .save {
  padding: 16px 20px;
  border: none;
  width: 100%;
  margin-bottom:10px;
}


/* Add a blue background color to the add defect button */
/* .form-container .btn-primary {
    background-color: blue;
} */

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

div.stars {
  width: 270px;
  display: inline-block;
}

input.star { display: none; }

label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}

input.star:checked ~ label.star:before {
  content: '\2605';
  color: #FD4;
  transition: all .25s;
}

input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}

input.star-1:checked ~ label.star:before { color: #F62; }

label.star:hover { transform: rotate(-15deg) scale(1.3); }

label.star:before {
  content: '\2605';
}
/* Accordion */
.accordion, .accordion * {
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}

.accordion {
  overflow:hidden;
  box-shadow:0px 1px 3px rgba(0,0,0,0.25);
  border-radius:3px;
  background:#f6f6f6;
}

/* Section Title */
.section-title {
  background:#2f2f2f;
  display:inline-block;
  border-bottom:1px solid #1a1a1a;
  width:100%;
  padding:15px;
  transition:all linear 0.15s;
  color:#fff;
  font-size:18px;
  text-shadow:0px 1px 0px #1b1b1b;
}

.section-title.active,
.section-title:hover {
  background:#505050;
}

.section:last-child .section-title {
  border-bottom:none;
}

/* Unicode character for "plus" sign (+) */	
/* .section-title:after {
  content: '\02795';
  font-size: 13px;
  color: #FFF;
  float: right;
  margin-left: 5px;
} */

/* Unicode character for "minus" sign (-) */
/* .section-title.active:after {
  content: "\2796";
} */

/* Section Content */
.section-content {
  display:none;
  padding:20px;
}
.control-label:after{
  content:"*";
  color:red;
}

/* added this block for Discussion board */
.comment-row {
	border-bottom: #e0dfdf 1px solid;
	margin-bottom: 15px;
	padding: 5px;
}

.outer-comment {
	background: #F0F0F0;
	border: #dedddd 1px solid;
	border-radius: 4px;
}

span.comment-row-label {
	color: #484848;
}

span.posted-by {
	font-weight: bold;
}

.comment-info {
	font-size: 0.9em;
}

.btn-reply {
	color: #2f20d1;
	cursor: pointer;
	text-decoration: none;
}

.btn-reply:hover {
	text-decoration: underline;
}

#comment-message {
	margin-left: 20px;
	color: #005e00;
	display: none;
  font-weight: bold;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* added to show calender popup while clicking anywhere in input date field */
input[type="date"] {
  position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
.dt-button {
  border-radius: var(--bs-border-radius) !important;
  color: white !important;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important; 
  font-size: 1rem;
  font-weight: 400;
  font-family: var(--bs-btn-font-family);
}