/* Base styles */
body {
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f4f4;
}
h1, h2, h3 {
  color: #333;
}
h1 {
  margin-bottom: 10px;
  margin-left:20px;
}
h2 {
  font-size: 18px;
  margin: 0px 0px;
}
h3 {
  font-size: 16px;
  margin: 5px 0px;
  color: #007BFF;
}
p {
  margin: 3px 0px;
  font-size: 14px;
}

.client-container p {
    margin: 3px 0px;
    font-size: 14px;
    color: rgb(120, 119, 119);
}
ul {
  margin: 0;
  padding-left: 20px;
}
li {
  line-height: 1.6;
  font-size: 14px;
}

/* Layout */
.task-sections {
  display: flex;
  justify-content: flex-start; /* Aligns children to the left */
  flex-wrap: wrap;
}

.task-section {
  margin: 0px 0px;
  flex: 0 1 auto; /* No flex-grow, allow flex-shrink, and base width auto */
  padding-right: 40px; /* Adds padding on the right */
  min-width: 200px; /* Ensures it doesn't shrink below 200px */
}



.filter-container {
  display: flex;
  margin: 10px 10px 10px 20px;
  position: relative;
  width:850px;
  
}



select {
  width: 200px;
  padding: 6px 6px;
  border: 1px;
  border-style: solid;
  border-color: rgb(119, 119, 119);
  border-radius: 4px;
  background-color: #f1f1f1;
}

#clientSelector, #statusSelector {
  margin-right: 20px;
  background-color: white;
  
}


.client-container {
  margin: 10px 20px;
  padding: 20px;
  border: 2px solid #ccc;
  background: #fff;
  position: relative;
  width:800px;
}
.client-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}



/* Form and interaction elements */
.file-link,
.file-link a {
  color: white;
  background-color: #007BFF;
  padding: 5px 10px;
  text-decoration: none;
  border-radius: 5px;
  margin-top: -5px;
}
.button-container {
  display: flex;
  flex-direction: row; /* Aligns children (buttons) in a column */
  
  
}

.button {
  position: relative;
  border: none;
  font-size: 14px;
  padding: 5px 10px;
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  margin-right:5px;
  border-radius: 6px;
}

.button.addnote {
  background-color: #ffd752;
}

.button.viewnotes {
  background-color: #015b8b;
  color: #FFFFFF;
}

.button.sendemail {
  background-color: #4bc300;
  color: #FFFFFF;
}

.note-form {
  margin-top: 10px;
  padding: 10px;
  background-color: #f8f8f8; /* Light grey background for the form */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Soft shadow for depth */
}

.note-form textarea {
  width: 100%; /* Ensures the textarea fills the form */
  /* padding: 8px; */

  border: 1px solid #ccc; /* Light grey border */
  border-radius: 4px; /* Rounded corners for the textarea */
  height: 70px; /* Sets a fixed height for the textarea */
  font-family: 'Arial', sans-serif; /* Sets the font family to Arial */
  font-size: 14px; /* Sets a readable font size */
  line-height: 1.5; /* Enhances line spacing for better readability */
}


.note-form button {
  display: block; /* Ensures the button appears on its own line */
  width: auto; /* Default width to encompass text and padding */
  margin: 5px 0 5px 0;
  background-color: #4CAF50; /* Green background for the button */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.note-form button:hover {
  background-color: #367c3f; /* Darker green for hover effect */
}

/* Notes Modal */

.notes-modal {
  display: none;
  position: fixed;
  z-index: 1000; /* Set a high z-index value */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.notes-content {
  background-color: #fffF99; /* Light yellow background */
  margin: 5% auto; /* Centered in the viewport with vertical margin */
  padding: 20px;
  border: 1px solid #888; /* Solid border for the container */
  width: 80%; /* Responsive width */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  overflow-y: auto; /* Enable scrolling within the container */
  max-height: 80%; /* Limit the maximum height */
  border-radius: 10px; /* Rounded corners */
}


.note {

  padding: 10px; /* Padding inside each note */
  border-bottom: 1px solid #ccc; /* Light gray border at the bottom */
}

.note:last-child {
  border-bottom: none; /* Remove border from the last note */
}


.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}



.flash-yellow {
  animation: flashBackground 1s linear 4;
  -webkit-animation-duration: 1s;
            animation-duration: 1s;
  animation-iteration-count: 4; /* Ensures the animation runs exactly four times */
}

@keyframes flashBackground {
  0%, 100% { background-color: inherit; } /* Ensures it starts and ends with the original background color */
  50% { background-color: #ffff99; } /* Changes to yellow at the halfway point of each cycle */
}


.email-form-container input,
.email-form-container textarea {
    
    padding: 8px;
    box-sizing: border-box; /* Ensures padding does not affect width */
    
}

.email-form-container {
  width: 600px; /* Set width to 80% */
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 20px;
  
}


.email-subject,
.email-body {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;

}

.email-subject {
  font-size: 15px;
}


.email-address {
  font-size: 15px;
  width: 60% !important;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;

}

.ck-editor__editable {
  min-height: 200px;
  margin-bottom: 10px;
}

.send-email-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.send-email-button:hover {
  background-color: #45a049;
}

.custom-padding {
  margin-top: 20px;
}



.extract-btn {
  margin-left: auto;
  padding: 6px 10px;
  background-color: transparent;
  color: #007BFF;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.extract-btn:hover {
  background-color: #f0f0f0;  /* Subtle hover effect */
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  min-height: 300px; 
  text-align: center;
  font-size:22px;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}