main {
  padding: 0 1% !important;
  width: 100%;
  box-sizing: border-box;
  max-width: 1800px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 1rem;
  height: 100%;
}

.navbar {
  padding: 12px 1% !important;
}

.alert-warning {
  margin: 0 0 1rem 0 !important;
}

#content-wrapper {
  height: 100%;
}

.demo-container {
  padding: 0;
  margin: auto 0;
}

.content-layout {
  display: flex;
  gap: 1rem;
}

#test-message-container {
  width: 100%;
}

.align-items-center .btn-group {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 0 0.5rem 0.1rem;
  position: relative;
  overflow: visible;
}

.btn:disabled,
.btn[disabled] {
  pointer-events: none;
}

.btn:disabled:hover,
.btn[disabled]:hover {
  background-color: transparent;
  border-color: transparent;
}

.side-bar {
  background: var(--card-background);
  border: 1px solid var(--border-color);
}

.main-content {
  width: 100%;
}

.table-labels {
  color: var(--text-color);
  font-weight: 300;
}

.sidebar-nav > :first-child {
  margin-top: 0 !important;
}

.category-settings.active {
  margin-top: 0 !important;
}

.sidebar-nav hr {
  background: var(--hr-bg);
  margin: 0.7rem 0;
}

.nav-pills .nav-link {
  color: var(--text-color) !important;
  font-weight: 400;
  transition: var(--transition);
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

.nav-pills .nav-link:hover {
  color: var(--text-color) !important;
  transform: translateX(1px);
}

.nav-pills .nav-link.active {
  opacity: 100%;
  color: var(--text-color) !important;
  background-color: var(--nav-link-active);
  font-weight: 600;
  transform: translateX(0px);
  border-radius: 0;
}

.nav-pills .nav-link.active:hover {
  background-color: var(--nav-link-bg-hover);
}

.page-section-header,
#category-settings-section h2 {
  font-size: 16px;
}
td {
  color: var(--text-color);
}

.page-section .form-control {
  box-shadow: inset 0 2px 5px rgba(133, 173, 215, 0.355);
  border-radius: 0;
}

.classic-list {
  padding-left: 0 !important;
}
.classic-list li {
  margin-bottom: 0.7rem;
  margin-left: 5px;
  list-style: none;
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.3em;
}

.classic-list li::before {
  content: "🎯";
  margin-right: 0.5em;
  margin-top: -0.1rem;
}

#moderation-settings-table-container h4 {
  color: var(--text-color);
  font-size: 15px;
}

#moderation-settings-table-container .mb-4 {
  margin-top: 0.5rem !important;
}

#moderation-settings-table td {
  padding: 0 0.75rem;
}

#moderation-settings-table .pt-4 {
  padding-top: 0 !important;
  padding-bottom: 0;
}

#moderation-settings-table tr #moderation-priority-tooltip .tooltip-icon::after {
  color: var(--white) !important;
}

.priority-input input[type="range"] {
  width: 400px;
  margin: 20px 10px 0px;
  appearance: none;
  background-color: rgba(48, 70, 91, 0.178);
  border-radius: 12px;
  border: 1px solid var(--slider-bg);
  height: 15px;
  overflow: hidden;
  box-shadow: var(--slider-bg-shadow);
}

.priority-input input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--white);
  border: none;
  cursor: pointer;
}

.priority-input input[type="range"]::-ms-thumb {
  width: 14px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--white);
  border: none;
  cursor: pointer;
}

.priority-input input[type="range"]::-moz-range-progress {
  background-color: var(--slider-bg);
}

.priority-input input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 15px;
  background-color: var(--white);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: -200px 0 0 195px var(--slider-bg);
}

.tickmark-text {
  color: var(--text-color);
}

.tickmark {
  width: 2px;
  background-color: var(--blue-30-darker);
  height: 6px;
}

.priority-change {
  background-color: transparent;
  padding: 5px;
  border-radius: 0;
  color: var(--text-color);
  width: fit-content;
  font-weight: 500;
}

.text-green {
  color: var(--text-green);
}

.text-red {
  color: var(--red);
}
#moderation-settings-table th {
  border-top: none;
}

#change-in-priority {
  min-width: 150px;
}
.line-up {
  padding-bottom: 1.4rem !important;
}

.btn-outline-dark:disabled {
  border-radius: 0;
  padding: 6px 16px;
  border: 1px solid var(--gray-10-lighter);
}

.save-category-settings-button:enabled {
  padding: 6px 16px;
  border: 1px solid transparent;
  background: var(--secondary-bg-color);
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.save-category-settings-button:enabled:hover {
  border: 1px solid var(--underline-link) !important;
  background: var(--secondary-bg-color-hover);
  outline: 1px solid var(--secondary-bg-color-hover);
}

.test-category-settings-button:enabled {
  padding: 6px 16px;
  border: 1px solid transparent;
  background: var(--orange-10-darker);
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out;
  color: var(--white);
}

.test-category-settings-button:enabled:hover {
  color: var(--white);
  background: var(--orange-30-darker);
  border: 1px solid var(--underline-link) !important;
  outline: 1px solid var(--orange-30-darker);
}

/* tabs ul/li/button versions*/

.report-tab .nav-link {
  display: inline-block;
  background-color: var(--tab-color);
  border-left: 8px solid var(--tab-border-left) !important;
  transition: var(--transition);
  margin-right: 0;
  color: var(--text-color);
  border-radius: 0;
}

.report-tab .nav-link:hover {
  background-color: var(--tab-hover);
  color: var(--white);
  border-left: 8px solid var(--color-tab-border-left-active) !important;
}

.report-tab .nav-link.active {
  background-color: var(--tab-checked-color);
  cursor: default;
  border-left-color: var(--color-tab-border-left-active) !important;
  color: var(--white);
}
.report-tab button:focus {
  outline: 2px solid var(--blue-30-darker);
  outline-offset: -2px;
  border-radius: 0px;
}
/* End of tabs ul/li/button versions*/

#moderation-impact-views-container #category-impact .row .card {
  margin-right: 0 !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #a0d4f70f;
}

.truncated {
  min-width: 10em;
  font-weight: 600;
}

.scroll-button {
  width: fit-content;
  height: 34px;
  border-radius: 0;
  border: 1px solid transparent;
  font-size: 14px;
  padding: 0 1rem;
  box-shadow: 1px 2px 15px 1px rgba(102, 102, 102, 0.471);
  color: var(--white);
  background-color: var(--secondary-bg-color);
  transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out;
  box-shadow: none;
}

.scroll-button:hover {
  border: 1px solid var(--underline-link) !important;
  background: var(--secondary-bg-color-hover);
  outline: 1px solid var(--secondary-bg-color-hover);
}

.scroll-button:focus {
  outline: 2px solid var(--secondary-bg-color-hover);
  outline-offset: -2px;
  border-radius: 0px;
}

#category-impact,
#automation-impact,
#increased-automation,
#decreased-automation {
  margin-top: -1.5rem;
}

#automation-impact .card {
  margin-right: 0 !important;
  margin-top: 0.3rem !important;
}

#automation-impact .checkmark {
  color: var(--green);
}

#increased-automation .card {
  margin-right: 0 !important;
  margin-top: 0.3rem !important;
}

#decreased-automation .text-dark {
  margin-bottom: 0 !important;
}

.info-gray {
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-left: 5px var(--gray-10-lighter) solid;
  background: var(--info-gray-bg);
  margin: 0 0 1rem 0 !important;
  border-radius: 0;
  padding: 1rem;
  max-width: 100%;
  width: 100%;
}

.info {
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-left: 5px var(--info-banner-border-left) solid;
  background: var(--empty-state-bg);
  margin: 0 0 1rem 0 !important;
  border-radius: 0;
  padding: 1rem;
  max-width: 100%;
  width: 100%;
}

.nav-tabs .nav-link {
  border: 0px solid transparent;
}

.report-tab .nav-link.active,
.report-tab .nav-link:hover {
  border: 0;
}

/* main css styke for admin quota Usage */

.quota-usage .container {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
}

h3 {
  font-size: 15px;
}

.labels {
  color: var(--main-gray);
  font-weight: 300;
  display: inline;
}

.table-caption {
  background: var(--blue-50-darker);
  color: var(--white);
  padding: 0.5rem;
}

#monthly-quota-headers th {
  background: var(--card-background);
  color: var(--text-color);
}

.table-sm td {
  border-top: 1px solid rgba(72, 69, 243, 0.248);
  padding: 0.5rem 0.3rem;
}

.table-sm thead th {
  border-bottom: 0;
  color: var(--white);
  font-weight: 300;
}

/* main css styke for admin quota Usage */

.user-accounts .container {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  background: transparent;
}

.user-number {
  font-weight: 700;
}

.scrollable-table-container {
  max-height: 42em;
}

.scrollable-table-container .checkbox-cell:has(input[type="checkbox"]:disabled) {
  display: none;
}

.justify-content-between:has(#add-user-button:disabled) {
  display: none !important;
}

.checkbox-table thead {
  background: var(--table-thead);
}

.checkbox-table thead tr {
  border-bottom: 1px solid rgba(72, 69, 243, 0.248);
}

.checkbox-table thead th {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--white);
}

.btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 15em;
  max-width: 100% !important;
  overflow: hidden;
  border: 0px !important;
  gap: 1px !important;
}

/* modal css style */

.modal-content {
  border-radius: 0;
  outline: 1px solid rgba(255, 255, 255, 0.188);
}

.modal-header {
  background: var(--background);
  border-radius: 0;
  color: var(--white);
}

.modal-header span {
  color: var(--white);
  text-shadow: none;
}

.modal-body .nested-list p {
  margin-bottom: 0.7rem;
  margin-top: 1.5rem;
}
.modal-body .nested-list .navigation {
  margin-top: 0;
}

.modal-body .nested-list ul li {
  margin-bottom: 0.7rem;
}

.modal-body .nested-list .letter {
  border: 0.5px solid var(--blue-30-darker);
  color: var(--blue-30-darker);
  padding: 0.1rem 0.2rem;
  display: inline-block; /* Allows setting width and alignment */
  min-width: 20px; /* Set a minimum width */
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
}

.modal-content .btn-secondary {
  margin-top: 8px;
}

.modal-content .modal-footer .btn-outline-dark {
  border: 1px solid transparent;
  background: var(--orange-10-darker);
}

.modal-content .modal-footer .btn-outline-dark:hover {
  background: var(--orange-30-darker);
  border: 1px solid var(--underline-link) !important;
  outline: 1px solid var(--orange-10-darker);
}

.modal-content .moderator-email {
  font-weight: 300;
  color: var(--gray-40-darker);
}

.modal-content .comment-timestamp {
  font-weight: 300;
  color: var(--gray-40-darker);
}

.modal-content .delete-comment-button {
  color: var(--red);
  transition: var(--transition);
  font-weight: 300;
}

.modal-content .delete-comment-button:hover {
  color: var(--cyan-30-darker);
}

.modal-content .add-comment-textarea,
.modal-content .custom-select,
.modal-content .email-input {
  border-radius: 0;
  box-shadow: inset 0 2px 5px rgba(133, 173, 215, 0.126);
}

.modal-content .add-comment-form .btn-secondary {
  margin-right: 0;
  padding: 6px 18px 6px 10px;
}

.user-inputs-list .custom-select {
  width: 100%;
}
#offense-category-loading-state .card-body {
  display: flex;
  gap: 0.5rem;
  flex-direction: row;
  justify-content: flex-start;
}

#moderation-impact-views-container .nav-item {
  margin-right: 0;
}

.labels {
  color: var(--main-gray);
  font-weight: 300;
  display: inline;
}

.table-caption {
  background: var(--tab-hover);
  color: var(--white);
  padding: 0.5rem;
}
.table-caption h3 {
  color: var(--white);
  margin-bottom: 0;
}

.table-sm td {
  border-top: 1px solid rgba(72, 69, 243, 0.248);
  padding: 0.5rem 0.3rem;
}

#quota-usage-settings-form {
  margin-bottom: 0.5rem;
}

#quota-usage-settings-form .form-group {
  margin-bottom: 0.5rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5rem 1.25rem;
  color: inherit;
}

.integration-settings {
  height: 100%;
}

.integration-settings .container {
  padding: 0;
  margin: 0;
  max-width: 100%;
  background: transparent;
}

.integration-settings .form-control-plaintext {
  width: 300px;
  font-size: 14px;
  color: var(--link);
  outline: none;
}

.input-group {
  display: flex;
  align-items: center;
  padding: 5px;
  max-width: 340px;
  flex-wrap: nowrap;
}

.input-group img {
  width: 80%;
}

.integration-settings .form-group {
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(200, 200, 200, 0.51);
}

.integration-settings .form-group .col-form-label {
  padding: 0;
  max-width: 110px;
}
.form-actions {
  display: flex;
  justify-content: space-between;
  width: 90%;
  padding-left: 1rem;
}

@media (max-width: 1358px) {
  .last-row {
    align-items: flex-start !important;
  }

  .last-row .labels {
    margin-top: 0.5rem;
  }

  .form-actions {
    flex-direction: column;
    gap: 1rem;
  }

  .last-row .btn-secondary {
    white-space: nowrap;
  }
}

.input-container {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding-right: 1rem;
}

.form-actions .btn-buttons {
  display: flex;
  width: 100%;
}

.last-row {
  padding-top: 1rem;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.integration-settings .btn {
  padding: 6px 16px;
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  margin-right: 1rem;
  color: var(--white);
  border: 1px solid transparent;
  transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.integration-settings .btn-save,
.integration-settings .btn-test {
  margin-top: 0;
}

.integration-settings .btn-save:hover {
  background: var(--blue-50-darker);
  border-color: var(--white) !important;
  outline: 1px solid var(--blue-50-darker);
}

.integration-settings .btn-test:hover {
  background: var(--orange-50-darker);
  border-color: var(--underline-link) !important;
  outline: 1px solid var(--orange-50-darker);
}

.integration-settings .btn-outline-dark:hover {
  border-color: var(--underline-link) !important;
}

.form-actions .btn-buttons .loading {
  background: var(--orange-30-darker);
}

.automation {
  height: 100%;
}

.automation .container {
  padding: 0;
  margin: 0;
  max-width: 100%;
  background: transparent;
}

.automation .input-field input {
  width: 90px;
}

.custom-select {
  box-shadow: inset 0 2px 5px rgba(133, 173, 215, 0.355);
  border-radius: 0;
}

.automation .custom-select {
  margin-top: 0.2rem;
}

#scoring-statistics {
  margin-top: 0 !important;
}

p {
  color: var(--text-color);
}

#scoring-statistics .card {
  margin-top: 0.5rem;
  box-shadow: none;
  border: 1px dashed var(--gray-10-lighter);
}

.action-types {
  height: 100%;
}

.action-types .container {
  padding: 0;
  margin: 0;
  max-width: 100%;
  background: transparent;
}

.add-entry-box {
  display: flex;
  align-items: center;
  width: 100%;
}

.text-danger {
  color: var(--text-color) !important;
  border-top: transparent;
  border-right: transparent;
  border-bottom: transparent;
  border-left: 5px var(--red-30-darker) solid;
  background: var(--alert-text-danger-bg);
  margin: 1rem 0 !important;
  border-radius: 0;
  padding: 0.5rem;
  width: 39%;
}

.add-entry-box .btn-outline-dark {
  margin-top: 0;
}

.action-types .btn-outline-dark:disabled {
  border: 1px solid var(--main-gray);
  cursor: none;
}

.action-types .btn-outline-dark:disabled:hover {
  background: var(--white);
  outline: none;
  border: 1px solid var(--main-gray);
}

.nav-pills .nav-link.active:before {
  background-color: var(--tab-hover);
}

.flex-container {
  display: flex;
  gap: 4px;
}

.tooltip-inner {
  width: 20em;
}

.tooltip-icon:after {
  bottom: 0 !important;
}

.division {
  margin-top: 1rem;
  border-top: 1px solid var(--link);
}

.sort-button {
  background: var(--table-thead);
  color: var(--white);
  border: var(--white);
}

.sort-button:focus {
  outline: 1px solid var(--underline-link);
  border-radius: 0;
}

.scrollable-table-container {
  max-height: 68vh;
  overflow-y: auto;
}

#precision-chart svg {
  width: 100%;
}

#explore-accuracy-button {
  margin-bottom: 0 !important;
}

.sidebar-nav .category-settings {
  padding-top: 1rem;
}

#integration-settings-section .last-row {
  display: flex !important;
  flex-wrap: nowrap;
}

#integration-settings-section .btn-buttons {
  width: 40%;
}

.api-key-info {
  max-width: fit-content;
}

#no-access-warning-regular {
  color: var(--text-color);
  background: rgba(243, 69, 75, 0.05);
  border-top: transparent;
  border-right: transparent;
  border-bottom: transparent;
  border-left: 5px var(--red-30-darker) solid;
  border-radius: 0;
  margin-top: 0.5rem;
  font-size: 16px;
  padding: 1rem;
}

#score-threshold-form button[disabled],
#integration-settings-section button[disabled]:not(.loading),
#automation-settings-form button[disabled],
#moderation-action-types-section button[disabled],
#web-console-settings-form button[disabled] {
  display: none;
}

.add-users-form p {
  margin-bottom: 0.5rem;
}

.add-users-form p {
  margin-bottom: 0.5rem;
}

@media (min-width: 765px) {
  .add-user-modal {
    width: 750px;
  }
}

small,
.add-users-form .small {
  font-size: 14px;
}

.text-dark,
.text-muted,
.add-users-form .text-muted {
  color: var(--text-dark) !important;
}

.bold-label {
  font-weight: 500;
}

/* Force spin buttons to always show */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

#current_month_div {
  color: var(--link);
}

.edit-role-form {
  background-color: var(--card-background);
}

#automation-impact {
  color: var(--text-color);
}

/* Chrome, Edge, Safari (WebKit-based browsers) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  background: var(--gray-40-darker);
  border-radius: 2px;
  opacity: 1;
  color: var(--white);
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-moz-number-spin-box {
  background: var(--gray-40-darker);
}

input[type="number"]::-moz-number-spin-up,
input[type="number"]::-moz-number-spin-down {
  background: var(--gray-40-darker);
  color: var(--white);
}
.categories-btn {
  display: flex;
  width: 100%;
}

.btn-flex {
  display: inline;
}

.bold-label {
  font-weight: 600;
}

#age-automation-settings,
#report-rejection-settings {
  padding-top: 1rem;
}

a,
a:hover {
  color: var(--link);
}