.new-contact-btn {
  width: 250px;
}

@media only screen and (min-width: 320px) and (max-width: 479.99px) {
  .new-contact-btn,
  .new-email-btn,
  .new-group-btn {
    width: 100% !important;
    margin-bottom: 12px;
    margin-right: 0;
  }

  .new-contact-search-btn,
  .new-email-search-btn,
  .new-group-search-btn {
    width: 100% !important;
    margin-left: 0;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767.99px) {
  .new-contact-btn,
  .new-email-btn,
  .new-group-btn {
    width: 300px !important;
    margin: 0;
  }

  .new-contact-search-btn,
  .new-email-search-btn,
  .new-group-search-btn {
    width: auto !important;
  }

  .new-contact,
  .new-email,
  .new-group {
    flex-wrap: nowrap;
  }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  .new-contact-btn,
  .new-email-btn,
  .new-group-btn {
    width: 100% !important;
    margin: 0;
    margin-right: 6px;
  }

  .new-contact-search-btn,
  .new-email-search-btn,
  .new-group-search-btn {
    width: 100% !important;
  }

  .new-contact,
  .new-email,
  .new-group {
    display: block;
  }
}

.form-control {
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  height: calc(1.3125rem + 1.2rem + 2px);
  border: 1px solid #e2e5ec;
  color: #898b92;
}
.form-control-sm {
  height: calc(1.5rem + 0.8rem + 2px);
  padding: 0.4rem 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  border-radius: 0.25rem;
}
.form-control-lg {
  height: calc(1.5rem + 1.5rem + 2px);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: none;
}
.form-control::-webkit-input-placeholder {
  color: #898b92;
}
.form-control:-ms-input-placeholder {
  color: #898b92;
}
.form-control::placeholder {
  color: #898b92;
}
.form-control:disabled,
.form-control[readonly] {
  background-color: #f7f8fa;
  opacity: 1;
  border-color: #e2e5ec;
}

.form-group {
  color: #fff;
  width: 100%;
}

.form-group .form-control {
  width: 100%;
}

/* add by me  */

select {
  width: auto;
  padding: 10px !important;
  font-size: 16px;
  border: 2px solid #34495e;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

select:focus {
  outline: none;
  border-color: #2980b9;
}

select option {
  padding: 10px;
  font-size: 16px;
}

/* Custom arrow */
.custom-arrow {
  position: absolute;
  right: 20px;
  top: calc(50% - 7px);
  pointer-events: none;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
}

/* Wrapping the select to position the custom arrow */
.custom-select-wrapper {
  position: relative;
  width: 250px;
}

.d-flex {
  display: flex;
}

.w-40per{
   width: 40%;
}

.w-30per{
  width: 30%;
}

.w-20per{
  width: 20%;
}

.w-15per{
  width: 15%;
}

.w-50per{
  width: 50%;
}

.w-10per{
  width: 10%;
}

.p-right{
  position: absolute;
    top: 5px;
    right: 11px;
}

.lh-sm {
  line-height: 25px;
}






/* Container for tabs */
.c-tab-container {
  max-width: 600px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

/* Styling for tab buttons */
.c-tab-container .tab-buttons {
  display: flex;
  border-bottom: 2px solid #ddd;
  margin-bottom: 20px;
}

.c-tab-container .tab-button {
  flex: 1;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #f5f5f5;
  border: none;
  outline: none;
  text-align: center;
  transition: background-color 0.3s ease;
}

.c-tab-container  .tab-button:hover {
  background-color: #eaeaea;
}

.c-tab-container  .tab-button.active {
  background-color: #fff;
  border-bottom: 2px solid #007bff;
  color: #007bff;
}

/* Styling for tab content */
.c-tab-container .tab-content {
  display: flex;
  flex-direction: column;
}

.c-tab-container .tab-pane {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
}

.c-tab-container .tab-pane.active {
  display: block;
}



/* Styling for the email list */
.email-list {
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  max-width: 600px; /* Set a maximum width */
  margin: 20px auto; /* Center the list */
  font-family: Arial, sans-serif; /* Set font */
}

/* Styling for each email item */
.email-list .email-item {
  background-color: #f9f9f9; /* Light grey background */
  margin-bottom: 10px; /* Space between items */
  padding: 15px; /* Internal spacing */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: transform 0.3s ease; /* Smooth transform transition */
}

.email-list  .email-item:hover {
  transform: translateY(-2px); /* Lift effect on hover */
}

/* Styling for each email info line */
.email-list  .email-info {
  display: flex; /* Use flexbox for alignment */
  justify-content: space-between; /* Space out the label and value */
  padding: 5px 0; /* Vertical padding between info lines */
}

/* Styling for labels */
.email-list  .label {
  font-weight: bold; /* Bold font */
  color: #333; /* Darker text color */
}

/* Styling for values */
.email-list  .value {
  color: #555; /* Medium text color */
}

div#email-history {
  max-height: 296px;
  overflow: auto;
}