.climb-content-wrapper {
  display: flex; /* Aligns children (columns) in a row */
  justify-content: space-between; /* Distributes space between columns */
  padding: 20px;
}

.climb-content-column {
  flex: 1; /* Each column takes equal width */
  margin: 0 10px; /* Space between columns */
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column; /* Makes sure elements inside are aligned vertically */
}

/* This CSS ensures small buttons are indeed smaller than Bootstrap's default */
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.d-flex > button:not(:last-child) {
  margin-right: 3px; /* Adds a 3px margin between buttons except the last one */
}

.d-flex > button {
  flex-grow: 1; /* Ensures buttons fill the space */
}

.spinner {
  margin: 5px;
}

/* Style for the border and padding around the button group */
.border {
  border: 1px solid #ccc; /* Light grey border */
  padding: 8px; /* Padding inside the border */
  border-radius: 5px; /* Optional: rounded corners for the border */
}

.badge {
  padding: 0.3em 0.5em; /* Uniform padding for all badges */
  margin-right: 1px; /* Consistent spacing between badges */
  font-size: small; /* Larger font size for better visibility */
}

.btn-success {
  padding: 0%;
  margin-top: 2px;
}

.btn-extra-small {
  padding: 0.25rem 0.5rem; /* Smaller padding */
  font-size: 0.75rem; /* Smaller font size */
  line-height: 1; /* Adjust line height if necessary */
  border-radius: 0.2rem; /* Optional: Smaller border radius */
}

.heading {
  font-size: xx-large;
  text-align: center;
  align-items: center;
  align-self: center;
  color: darkgreen;
}
.climb-content-column h3 {
  margin: 0 0 10px 0; /* Small space below the header */
}

.widefat {
  width: 100%; /* Full width of the column */
  margin-top: 8px;
  box-sizing: border-box; /* Includes padding and border in the element's width */
}

.button {
  margin-top: auto; /* Pushes buttons to the bottom of the column */
}

.hidden {
  display: none;
}

.row {
  transition: opacity 0.5s ease, max-height 0.5s ease;
  opacity: 1;
  max-height: 3000px; /* Adjust based on the content */
}

.hidden-row {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.postbox {
  position: relative;
  min-width: 255px;
  border: 1px solid #c3c4c7;
  background: #fff;
  box-shadow: none !important;
}

.context-option {
  /* margin-bottom: 20px; */
  padding: 15px;
  background-color: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
}

.context-option h4 {
  /* margin-bottom: 10px; */
  color: #333;
}

.context-option label {
  display: block;
  /* margin-bottom: 10px; */
  font-weight: normal;
  color: #4a4a4a;
}

.context-option .uk-radio {
  margin-right: 5px;
}

.context-option .uk-icon {
  margin-left: 5px;
  color: #666;
}

.context-option .uk-badge {
  margin-left: 10px;
  padding: 2px 5px;
  font-size: 0.75rem;
}

input[type="radio"]:checked::before {
  content: "";
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0.1875rem;
  background-color: #8a2be2 !important; /* Updated color */
  line-height: 1.14285714;
}

#feedback-container {
  margin: 20px 0;
}

#feedback-container .notice {
  position: relative;
  padding-right: 38px;
}

#feedback-container .notice-dismiss {
  position: absolute;
  top: 0;
  right: 1px;
  border: none;
  margin: 0;
  padding: 9px;
  background: none;
  color: #72777c;
  cursor: pointer;
}

#feedback-container .notice-dismiss:before {
  background: none;
  color: #72777c;
  content: "\f153";
  display: block;
  font: normal 16px/20px dashicons;
  speak: never;
  height: 20px;
  text-align: center;
  width: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#feedback-container .notice-dismiss:hover:before,
#feedback-container .notice-dismiss:active:before,
#feedback-container .notice-dismiss:focus:before {
  color: #c00;
}

#word-cloud-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px; /* Reduced gap for tighter layout */
  padding: 20px;
  max-height: 300px;
  overflow-y: auto;
  border-radius: 12px;
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

.word-cloud-item {
  display: inline-block;
  padding: 4px 8px; /* Reduced padding for tighter layout */
  border-radius: 16px;
  line-height: 1; /* Reduced line height */
  font-weight: 500;
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.word-cloud-item:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Customized scrollbar */
#word-cloud-container::-webkit-scrollbar {
  width: 6px;
}

#word-cloud-container::-webkit-scrollbar-track {
  background: rgba(133, 50, 221, 0.1);
  border-radius: 10px;
}

#word-cloud-container::-webkit-scrollbar-thumb {
  background: rgba(133, 50, 221, 0.2);
  border-radius: 10px;
}

#word-cloud-container::-webkit-scrollbar-thumb:hover {
  background: rgba(133, 50, 221, 0.3);
}

/* Quick Toolbar */
.text-toolbar {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.text-toolbar img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}
.text-toolbar button {
  margin: 5px;
}

.fa-google {
  background: conic-gradient(
      from -45deg,
      #ea4335 110deg,
      #4285f4 90deg 180deg,
      #34a853 180deg 270deg,
      #fbbc05 270deg
    )
    73% 55%/150% 150% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.fa-reddit {
  color: #ff4500;
}
.fa-quora {
  color: #b92b27;
}
.fa-robot {
  color: #00b2ff;
}

/* Icon styles */
.fa-google,
.fa-reddit,
.fa-quora,
.fa-robot,
.fa-question {
  font-size: 1.2em; /* Make icons slightly bigger */
  margin-right: 0px; /* Add space between icon and text */
  margin-left: 10px;
  vertical-align: middle; /* Align icon vertically */
}

.fa-google {
  background: conic-gradient(
      from -45deg,
      #ea4335 110deg,
      #4285f4 90deg 180deg,
      #34a853 180deg 270deg,
      #fbbc05 270deg
    )
    73% 55%/150% 150% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.fa-reddit {
  color: #ff4500;
}
.fa-quora {
  color: #b92b27;
}
.fa-robot {
  color: #00b2ff;
}

#related-questions-table td:first-child {
  padding-left: 5px; /* Adds space to the left of the first cell in each row */
}

#related-questions-table td:last-child {
  padding-right: 10px; /* Increased space on the right */
  text-align: right; /* Align the button to the right */
}

/* Table styles */
#related-questions-table td {
  vertical-align: middle; /* Center align content vertically */
  font-size: 1.1em; /* Make text slightly bigger */
  padding: 10px 0; /* Add some vertical padding */
}

#related-questions-table a {
  color: #00008b; /* Dark blue for hyperlinks */
  text-decoration: none; /* Remove underline */
}

#related-questions-table a:hover {
  text-decoration: underline; /* Add underline on hover */
}

#related-questions-table .copy-question-btn {
  padding: 0;
  color: #666;
  transition: color 0.2s;
  margin-left: 0px;
  vertical-align: middle;
}

#related-questions-table .copy-question-btn:hover {
  color: #333;
}

#related-questions-table .copy-question-btn i {
  font-size: 1.2em;
}

#related-questions-table td {
  vertical-align: middle;
}

#related-questions-table td {
  vertical-align: middle;
}

/* Top-ranked titles table styles */
#top-ranked-titles-table td {
  vertical-align: middle;
  font-size: 1.1em;
  padding: 10px 15px;
}

#top-ranked-titles-table .fa-google {
  font-size: 1.2em;
  margin-right: 10px;
  vertical-align: middle;
  background: conic-gradient(
      from -45deg,
      #ea4335 110deg,
      #4285f4 90deg 180deg,
      #34a853 180deg 270deg,
      #fbbc05 270deg
    )
    73% 55%/150% 150% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#top-ranked-titles-table .top-ranked-title {
  color: #00008b;
  text-decoration: none;
}

#top-ranked-titles-table .top-ranked-title:hover {
  text-decoration: underline;
}

#top-ranked-titles-table .root-domain {
  color: #666;
  font-size: 0.9em;
  margin-left: 5px;
}

/* Suggested titles table styles */
#suggested-titles-table td {
  vertical-align: middle;
  font-size: 1.1em;
  padding: 10px 15px;
}

#suggested-titles-table .fa-robot {
  font-size: 1.2em;
  margin-right: 10px;
  vertical-align: middle;
  color: #00b2ff;
}

#suggested-titles-table .suggested-title {
  color: #333; /* Or any color you prefer for non-linked text */
}

#suggested-titles-table .use-title-btn {
  padding: 5px 10px;
  font-size: 0.9em;
}

.edit-question-input {
  width: 100%;
  padding: 5px;
  margin: -5px 0;
}
.question-content {
  cursor: text;
}

.own-content-checkbox {
  background-color: #e5e5e5 !important;
  border-color: #b8b8b8 !important;
}

/* Magic Write Progress Bar */
.progress-bar-container {
  width: 400px;
  margin: auto;
}

.progress-bar {
  height: 8px;
  background-color: #d4cbe6;
  width: 100%;
  overflow: hidden;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: #8a2be2;
  animation: indeterminateAnimation 1s infinite linear;
  transform-origin: 0% 50%;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(0) scaleX(0);
  }
  40% {
    transform: translateX(0) scaleX(0.4);
  }
  100% {
    transform: translateX(100%) scaleX(0.5);
  }
}
.upgrade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.upgrade-container button {
  width: 100%;
  max-width: 300px; /* Adjust this value as needed */
  margin-bottom: 10px;
}

.upgrade-container p {
  margin: 5px 0 0 0;
  color: #666; /* Muted text color */
  max-width: 300px; /* Adjust this value to match the button width */
}

.upgrade-link {
  color: #8532dd !important;
  font-weight: bold;
  text-decoration: none;
}

.upgrade-link:hover {
  text-decoration: underline;
}

/* Base font size for small devices */
body {
  font-size: 0.75rem; /* 12px */
}

p {
  font-size: 0.75rem; /* 12px */
}

/* Medium devices */
@media (min-width: 768px) {
  body {
    font-size: 0.8125rem; /* 13px */
  }

  p {
    font-size: 0.8125rem; /* 13px */
  }
}

/* Large devices */
@media (min-width: 1024px) {
  body {
    font-size: 0.8625rem;
  }

  p {
    font-size: 0.8625rem;
  }
}

/* Extra large devices */
@media (min-width: 1280px) {
  body {
    font-size: 0.875rem; /* 14px */
  }

  p {
    font-size: 0.875rem; /* 14px */
  }
}

/* Extra extra large devices (1500px and above) */
@media (min-width: 1500px) {
  body {
    font-size: 0.875rem; /* 14px */
  }

  p {
    font-size: 0.875rem; /* 14px */
  }
}