/* base.html css*/
#floatingNotification {
  background-color: #62990d;
  top: 70px;
  right: 10px;
  position: fixed;
  padding: 8px;
  color: #ffffff;
}
/*.main-container {
    text-align: center;
    min-height: 80vh;
}*/
.bg_img {
  background: #183d4f;
}
.cl_company_name {
  color: #f5f5f5;
  font-size: 2rem;
  margin-bottom: 0;
}
.bg_img .container .nav .nav-item .nav-link {
  color: #f5f5f5;
  font-size: 21px;
}
.cl_advertise {
  width: 50%;
  margin: auto;
}
.main_ctx_container {
  text-align: center;
  padding: 20px 0 0;
  min-height: 60vh;
}
body .chart_container {
  width: 25%;
  height: auto;
}
body .chart_text_container {
  width: 25%;
  height: auto;
}
.pie_chart_container {
  margin: 20px;
  padding: 20px;
  border-bottom: 2px solid #c2c4d3;
}
.tool_tip {
  position: relative;
}
.tool_tip:hover .tool_tiptext {
  visibility: visible;
}

.tooltip{
  --bs-tooltip-bg: #005b7b;
}

.outer {
  position: relative;
  width: 600px;
  height: 400px;
}
.percent {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 80px;
  bottom: 0;
}
.pie_container {
  width: 40%;
  display: inline-block;
}
.line_chart_container {
  margin: 5px;
  padding: 5px;
  border-bottom: 2px solid #c2c4d3;
}
.ctx_engine_container {
  width: 50%;
  display: inline-block;
}
.cts_db_size {
  margin: 5px;
  padding: 5px;
  border-bottom: 2px solid #c2c4d3;
}
.cts_time_container,
.cts_batch_container {
  margin: 5px 0;
  padding: 5px 0;
  border-bottom: 2px solid #c2c4d3;
}
.users_container .user_count_container {
  width: 50%;
  margin-top: 20px;
}
.instance_container {
  width: 50%;
  margin-top: 20px;
}
.log-cls {
  width: 50%;
  margin: auto;
}
.welcome-msg {
  text-align: right;
  margin: 20px;
}

.main_ctl_container {
  width: 80%;
  margin: auto;
  align-items: center;
}
.cl_advertise,
.ctl-keywords-main,
.labelers-stats-cls {
  width: 60%;
  margin: auto;
}
.labelers-stats-main {
  width: 75%;
  margin: auto;
}
.tokenfield.form-control {
  text-align: left;
}
.ctl-keywords-list {
  height: auto;
  text-align: left;
}
.ctl-keywords-list ul {
  list-style: none;
}
.label-group {
  padding: 5px;
}
.form-label {
  font-size: x-large;
  font-weight: bold;
}
/* Tokenfield-specific Typeahead styling */
.tokenfield .token {
  height: 27px !important;
}
.tokenfield .token a {
  text-decoration: none;
  color: #827a7a;
}
.tokenfield .token-input {
  height: 23px !important;
}
.footer-padding {
  padding: 10px;
}
.cl_img {
  width: 65px;
  height: 40px;
}
.tool_tip .tool_tiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-size: 10px;

  /* Position the tool_tip */
  position: absolute;
  z-index: 1;
}

/* url editor css */
.form-group {
  padding: 0.5em 0;
}
.form-check-align {
  text-align: left;
}
.form-check-odd {
  background-color: #eee;
}
.back-preferred-sel {
  text-align: right;
}
.form-align-checkbox {
  width: 67%;
  margin: auto;
}
.cannot_label_notes {
  text-align: left;
  font-size: 0.8em;
  color: #404040;
  margin-top: 0.5em;
}
.cannot_label_notes p {
  margin-bottom: 0.4em;
}
#url_id {
  color: #404040;
  font-size: 0.8em;
  margin-right: 0;
}
.form-check-input[type="checkbox"]:visited {
  background-color: #00ff00; /* bright green */
}
.form-check-label {
  width: -webkit-fill-available;
  overflow: hidden;
  white-space: nowrap;
  width: -moz-available;
}

/* label urls css */
.labeler_main {
  border-right: none !important;
  border-radius: 8px 0 0 8px  !important;
}
.labeler_main .keyword-warning {
  color: #ff9900;
}

.labeler_main select.form-select {
  display: inline-block;
  width: auto;
}

.labeler_progress_urls {
  border-radius: 0 8px 8px 0;
}

/* supervisor dashbaord styles */
.container-cls {
  width: 100%;
  min-height: 93%;
  padding: 10px;
}
.cat-stats-form {
  margin-bottom: 15px;
}

body {
  font-family: 'Archivo', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.supervisor-cls-sidebar .sidebar {
  height: 22em;
  width: 210px;
  position: relative;
  top: 0px;
  left: 10px;
  color: black;
  padding-top: 20px;
  float: left;
  border: 2px solid #183d4f;
  border-radius: 25px;
}

.supervisor-cls-sidebar .sidebar h2 {
  text-align: center;
  margin-bottom: 20px;
}

.supervisor-cls-sidebar .sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.supervisor-cls-sidebar .sidebar ul li {
  padding: 10px;
  text-align: center;
}

.supervisor-cls-sidebar .sidebar ul li a {
  color: black;
  text-decoration: none;
}

.supervisor-cls-sidebar .sidebar ul li a:hover {
  color: #4185eb;
}
.supervisor-cls-sidebar .sidebar ul li a.active {
  font-weight: bold;
  color: #4185eb;
}

.supervisor-cls-sidebar .content {
  margin-left: 200px; /* Adjust this value to match the width of the sidebar */
  padding: 20px;
}
/* Supervisor dashboard css */
.contaiftner-filter {
  padding-bottom: 20px;
}

#labelerTimelineForm input, #labelerTimelineForm select,
#supervisorFilterForm select {
  border-radius: var(--Corner-Small, 8px);
  border: 1px solid #BBB;
  background: #FFF;
  box-shadow: 0px 1px 1px 0px rgba(90, 90, 90, 0.25);
  margin: 10px;
}
.timeline-container p, .timeline-container form {
  display: inline;
}
.timeline-container p {
  display: inline;
  float: right;
  padding: 14px 27px;
  margin: 0;
}
#labelerTimelineForm input {
  padding: 4px 10px;
  margin: 0 10px 0 0;
}
#labelerTimelineForm select,
#supervisorFilterForm select {
  padding: 7px 10px;
}
#supervisorFilterForm a {
  text-decoration: none;
}

#supervisorFilterForm .filter-search {
  display: inline-block;
  width: 50%;
}

#supervisorFilterForm .filter-btn {
  display: inline-block;
}
.container-cls .btn-max-primary {
  color: #e6dfdf;
  background: #183d4f;
}

.container-cls .btn-max-primary:hover {
  color: #ffffff;
  background: #183d4f;
}

.container-cls .form-group.row,
.supervisor-modal-content .modal-body .form-group.row {
  margin: 10px;
}

.container-cls .form-group.row .col-form-label,
.supervisor-modal-content .modal-body .form-group.row .col-form-label {
  text-align: end;
}

.container-cls-table table {
  width: 100%;
  border-collapse: collapse;
}
.container-cls-table table th,
td {
  text-align: left;
}
.dashboard-container-cls {
    margin-top: 1em;
}

.domain-fltr-tbl-cls-container {
  max-height: 82vh;
  overflow-y: auto;
}

table.domain-fltr-tbl-cls {
  width: 100%;
  background-color: #fff;
}
table.domain-fltr-tbl-cls>:not(:first-child) {
  border-top: none;
}
table.domain-fltr-tbl-cls tbody, th, thead, tr {
  border-bottom:  1px solid #eee;
}

table.domain-fltr-tbl-cls tbody tr td,
table.domain-fltr-tbl-cls tbody tr th,
table.prev-audience-tbl-cls tbody tr td,
table.prev-audience-tbl-cls tbody tr th {
  padding: 6px;
  vertical-align: middle;

}
table.domain-fltr-tbl-cls tr td:last-child {
  width: 0;
  white-space: nowrap;
  padding: 4px;
}
table.domain-fltr-tbl-cls .domain-fltr-name-cls {
  font-weight: bold;
  color: #898787;
}
.domain-filter-modal-content {
  padding: 20px;
}
.modal-header {
  border-bottom: none;
}
.modal-header img {
  width: 35px;
  height: 65px;
}
.modal-header .modal-title {
  padding: 0 10px;
}
.modal-header .modal-title p:first-child {
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
}
.modal-header .modal-title p {
  margin: 2px;
}
.modal-footer {
  border-top: none;
  padding-top: 0;
}
.domain-filter-modal-content .domain-filter-form-content, .assign-labeler-form-content,
.edit-category-form-content {
  padding: 0 20px;
}
.domain-filter-modal-content .form-label , .supervisor-modal-content .form-label{
  font-size: unset;
  font-weight: normal;
  color: var(--color-color-font-light, #555);
}
.domain-modal-footer {
  padding: 15px 0;
}

.domain-modal-footer .btn-domain-filter:hover {
  background: #227998c2;  
}
.container-cls-table table th {
  background-color: #F2F4F7;
  color: #475467;
  font-style: normal;
  font-size: 14px;
  line-height: 18px; /* 150% */
  letter-spacing: 0.24px;
  text-transform: uppercase;
}
.container-cls-table table .progress {
  width: 250px;
  height: 15px;
  background-color: #adccd5;
  border-radius: 6px;
  margin: 5px 0;
  overflow: hidden;
}
.container-cls-table table .progress.active {
  background-color: #adccd5;
}
.container-cls-table table .progress.inactive {
  background-color: #D9C8C8;
}
.container-cls-table table .progress-bar {
  background-color: #227998;
  height: 100%;
  border-radius: 6px;
}

.container-cls-table table .progress-bar.active,
.container-cls-table table .progress-bar.inactive {
  background-color: #227998;
  height: 100%;
}

#modalViewDetails .modal-body table tr {
  border: 1px solid #E4E7EC;
}
#modalViewDetails .modal-body table.table>:not(caption)>*>* {
  background-color: #F2F4F7;
}
#modalViewDetails .modal-body table {
  
  border: 1px solid #DADADA;
  border-radius: 6px;
}

#modalViewDetails .modal-footer {
  display: block;
}

.task-status-container {
  padding: 20px;
}

.task-status-container .active {
  background-color: #5bbe5f !important;
  color: #ffffff !important;
}
.labeler-stats-table {
  margin-top: 20px;
  padding: 30px;
}
.labeler-stats-table .labelers-stats-h3-cls {
  display: inline-block;
}
.labeler-stats-table .labelers-report-form {
  float: right;
}

/* notifications and alerts */
.notification-cls {
  width: 80%;
  margin: auto 40px auto auto;
}
.notification-sd-cls {
  width: 80%;
  margin: auto 70px auto auto;
}
#url-error-msg {
  margin: 5px;
}
.tbl-caption-cls {
  text-align: left;
  margin: 2em 0;
}

/* category stats page styles  */
#guidewords-section {
  display: none;
}
.labelers-diff-graph-container,
.labelers-val-graph-container {
  display: flex;
  vertical-align: middle;
  width: max-content;
  align-items: flex-end;
}
.labelers-diff-graph-container {
  height: 60px;
  margin-bottom: 1px;
}
.labelers-diff-graph-container .labeler-bar-graph,
.labelers-val-graph-container .labeler-bar-graph {
  margin-right: 2px;
  width: 20px;
}
.labelers-diff-graph-container .labeler-bar-graph {
  background-color: #807bebf5;
}
.labelers-val-graph-container .labeler-bar-graph {
  height: 10px;
  background-color: #95b652;
}

.main_ctx_container .model-mcs-container {
  width: 90%;
  margin: auto;
  min-height: 80vh;
}

.model-metrics-title {
  margin-bottom: 10px;
}
.donut-chart {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 233px; /* Adjust size */
}
.donut {
  --size: 180px; /* Size of the donut */
  --thickness: 75px; /* Thickness of the donut ring */
  --percentage: 75; /* Default percentage (will be overwritten by inline style) */

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.donut.high-score {
  background: conic-gradient(#4b8f4de8 calc(var(--percentage) * 1%), /* Change color here */ #ddd 0);
}
.donut.low-score {
  background: conic-gradient(#dcc153 calc(var(--percentage) * 1%), #ddd 0);
}
.donut::before {
  content: "";
  width: calc(var(--size) - var(--thickness));
  height: calc(var(--size) - var(--thickness));
  background-color: white; /* Inner circle color */
  border-radius: 50%;
  position: absolute;
}
.donut-text {
  font-size: 1em; /* Adjust font size */
  position: relative;
}

.editors-inner-container .ncm-btn-bar,
.label-inner-container .ncm-btn-bar {
  float: right;
  margin: 5px 0;
}

/* ======================================================================================================== */
/* ========================================== New design styles =========================================== */
/* ======================================================================================================== */
* {
  color: #333;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: #36849e4A;
  height: 5px;
  border-radius: 5px;
}

/* Thumb */
input[type="range"]::-webkit-slider-thumb {
  background: #36849e;
  border: none;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* For Firefox */
input[type="range"]::-moz-range-thumb {
  background: #36849e;
  border: none;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  cursor: pointer;
}


/* Checkbox Styles */
input[type="checkbox"] {
  accent-color: #36849e;
}

.accordion-item .accordion-button, .accordion-button .accordion-button::after {
  background-color: #c1d9e2;
  color: #333;
}

#guidewordsCollapse input[type="checkbox"] {
  transform: scale(1.25);
  margin-right: 5px;
}

.sub-menu {
  width: 210px;
  min-width: 215px;
  margin-left: 9px;
  min-height: 86vh;
}

#toggle-submenu-btn {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50%;
  position: relative;
  top: 40px;
  left: 280px;
  z-index: 99;
  transform: rotate(180deg);
}

.content-container {
  margin-left: 9px;
  width: 99%;
}

.nav-pills .nav-item {
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-pills .nav-item .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: var(--Corner-Small, 8px);
}

.nav-pills .nav-item img {
  margin: 0 auto;
}
.btn-logout {
  margin: 15px 9px;
  padding: 14px !important;
  border-radius: var(--Corner-Small, 8px);
}
.nav-pills .nav-item .nav-link:hover,
.btn-logout:hover {
  background: #c1d9e24d;
}
.bg-ns-light {
  border-radius: var(--Corner-Small, 8px);
  background: var(--color-color-light-gray, #edf1f5);
}
.border-ns-light{
    border: 1px solid #dadada;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.sub-menu ul li a.active {
  background-color: #c1d9e2;
}
.footer_container {
  color: #111010ea;
}
.footer_container p {
  margin: 0;
}
.main-container {
  padding: 15px;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

.main {
  display: flex;
  flex-wrap: nowrap;
}

.bi {
  vertical-align: -0.125em;
  pointer-events: none;
  fill: currentColor;
}

.dropdown-toggle {
  outline: 0;
}

.nav-flush .nav-link {
  border-radius: 0;
}

.btn-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
  background-color: transparent;
  border: 0;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(0, 0, 0, 0.85);
  box-shadow: none;
}

.btn-toggle::after {
  width: 1.25em;
  line-height: 0;
  content: url("/static/images/icons/chevron-right.svg");
  width: 16px;
  height: 16px;
  transition: transform 0.35s ease;
  transform-origin: 0.5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(0, 0, 0, 0.85);
}
.btn-toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  width: 150px;
  display: inline-flex;
  padding: 11px;
  margin-top: 0.125rem;
  margin-left: 1.25rem;
  text-decoration: none;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: #c1d9e2;
}

.scrollarea {
  overflow-y: auto;
}

.fw-semibold {
  font-weight: 600;
}
.lh-tight {
  line-height: 1.25;
}

.category-and-similar-container {
  display: flex;
}

.left-selected-category {
  flex: 1;
  padding-right: 10px
}

.right-similar-category {
  flex: 1;
  padding-left: 10px;
}

.similar-category-button {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 15px;
  border-radius: 100px;
  margin: 1px;
}

.similar-category-button .plus {
  padding-right: 3px;
  color: #227998;
}

.form-group {
  margin: 10px 0;
}
/* Full viewport height container */
.banner-container {
  display: flex;
  align-items: center;
  height: 100vh; /* Full viewport height */
  gap: 80px;
  box-sizing: border-box;
}

/* Banner image container */
.banner-image {
  flex-shrink: 0;
}

/* Full-height image */
.banner-image {
  height: 98vh; /* Full viewport height */
  width: 50%; /* Keeps the aspect ratio */
  max-width: 50%; /* Prevents overflow horizontally */
  object-fit: contain; /* Ensures the full image is displayed */
  margin: 6px;
  border-radius: 48px;
  background-image: url("/static/images/signin-banner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.banner-text {
  flex: 1; /* Takes up remaining space */
  overflow: auto;
}
.banner-text .box {
  width: 50%;
  margin: auto;
}
.logo-header {
  width: 64px;
  height: 37px;
}
.logo-container {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
}
.logo-header-txt {
  color: var(--color-color-font-light, #555);
  font-family: "Abel", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 2px;
  margin: 7px 7px 7px 14px;
}
.banner-text .title {
  color: #333333a6;
  font-size: 19px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  letter-spacing: 0.5px;
}
.form-group label {
  color: #333333a6;
  margin-left: 16px;
  font-size: 0.9rem;
}
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea,
.form-check {
  background-color: #fff;
  border: 1px solid #dadada;
  padding: 8px;
}


.btn-ncm {
  display: inline-flex;
  font-weight: 500;
  border-radius: var(--radius-md, 8px);
  height: 35px;
  border: 0;
  flex-shrink: 0;
  width: max-content;
  justify-content: center;
  align-items:stretch;
  white-space: nowrap;
}

.btn-ncm-tall {
  height: 40px;
}

.btn-ncm-primary {
  color: #fff;
  background: var(--Component-colors-Components-Buttons-Primary-button-primary-bg, #227998);
}

.btn-ncm-primary:hover {
  background-color: #005b7b;
  color: #fff;
}

.ncm-btn-primary:focus {
  background-color: #227998;
  outline: 2px solid #4996b1;
  outline-offset: 2px;
  box-shadow: none;
}

.btn-ncm-primary:disabled {
  color: #333;
  border-radius: var(--radius-md, 8px);
  height: 40px;
  border: #d0d5dd 1px solid;
  background-color: #e4e7ec;
}


.btn-ncm-outline {
  color: #555;
  background-color: #fff;
  border: #d0d5dd 1px solid;
}

.btn-ncm-outline:hover {
  border: 1px solid #9DCADA;
  background-color: #e7f2f7 !important;
}

.btn-ncm-outline:focus {
  outline: 2px solid #4996b1;
  outline-offset: 2px;
  box-shadow: none;
}


.btn-ncm-text {
  color: #227998;
  border-radius: var(--radius-md, 8px);
}

.btn-ncm-text:hover {
  background-color: #e7f2f7;
  color: #154d60;
}

.btn-ncm-outline-danger {
  color: #912018;
  background-color: #fff;
  border: #FDA29B 1px solid;
}

.btn-ncm-outline-danger:hover {
  background-color: #fef3f2;
  color: #912018;
  border: #FDA29B 1px solid;
}

.btn-ncm-danger {
  color: #fff;
  background-color: #912018;
  border: #FDA29B 1px solid;
}

.btn-ncm-danger:hover {
  background-color: #912018;
  color: #fef3f2;
  border: #FDA29B 1px solid;
}

/* supervisor dashbaord styles */
.notification-cls .alert,
.alert {
  font-size: 14px;
  background-color: #fff;
}
.alert {
  display: flex;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  border: #e9e9e967 2px solid;
  border-left: none;
  position: fixed;
  width: min(90vw, 450px);
  right: min(-90vw, -450px);
  top: 20px;
  z-index: 99;
  opacity: 0;
  transition: opacity 1s ease;
  padding: 0.75em;
}
.alert .icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  margin-right: 20px;
}
.alert .message-content .message-heading {
  text-align: left;
  margin-bottom: none;
}
.alert .message-content .message-body {
  color: #555;
}
.alert .btn-close {
  font-size: 14px;
  padding: 0.8em;
}
.alert.show {
  animation: slideInFromRight 0.75s ease 0.3s forwards;
  opacity: 1;
}

/* alert error */
#alert-container.alert-error #message-heading {
  color: #ac0303;
}
/* alert info */
#alert-container.alert-info #message-heading {
  color: #005b7b;
}
/* alert warning */
#alert-container.alert-warning #message-heading {
  color: #DFB301;
}

.caretIcon.rotated {
  display: inline-block;
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.url-list-section-main {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 90vh;
  width: 100%;
}

.url-list-section-main .form-check {
  max-width: 800px;
  padding: 8px 14px;
  cursor: pointer;
}

.url-list-section-main .form-check-label {
  cursor: pointer;
  white-space: wrap;
}

.models-inner-container .form-check {
  border: 0;
  padding: 4px 0;
  padding-left: 1.5em;
}

.models-main {
  border-radius: 0;
}

.label-urls-section .label-inner-container .labeler_main, 
.editors-inner-container .editors-form-container,
.models-inner-container .models-form-container,
.labeler-stats-container {
  border: 1px solid #dadada;
  border-radius: 8px;
  overflow: hidden;
  padding: 0.5rem 1.5rem;
}
.labeler-stats-container {
  background-color: #edf1f5;
  min-height: 96vh;
}

.labeler-stats-section {
  margin-left: 10px;
}

.label-urls-section .input-fields,
.label-urls-section .token-input,
.label-urls-section p,
.iab-category-copntainer,
.models-inner-container .input-fields{
  max-width: 500px;
}

.circular-progress {
  position: relative;
}

.circular-progress-subtext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  margin-top: 3rem;
}

#label-urls-circular-progress {
  margin: 20px;
  width: 300px;
  height: 300px;
}

.similar-categories-list {
  list-style-type: none;
  padding: 8px;
}
.similar-categories-list li {
  display: inline-block;
  margin-right: 5px;
  position: relative;
  background-color: #fef3f2;
  padding: 4px 12px;
  border-radius: 4px;
}
.similar-category-header {
  font-weight: 400;
}
.similar-categories-list li::before {
  content: ""; /* Default bullet point */
  position: absolute;
  left: -10px; /* Position the bullet point */
}
.small-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.guideword-list {
  list-style-type: none;
  padding: 0;
}

.guideword-list li {
  display: inline-block;
  margin-right: 10px;
  position: relative;
}

.guideword-button {
  border: 1px #d0d5dd solid;
  border-radius: 8px;
  padding: 4px 8px;
  background-color: #fff;
}

.ncm-btn-bar .btn {
  background-color: #fff;
  border: #9dcada 1px solid;
  font-weight: 600;
  color: #36849e;
}

.ncm-btn-bar .btn:hover {
  background-color: #36849e1a;
}

.ncm-btn-bar .btn-left {
  border-radius: 8px 0 0 8px;
}

.ncm-btn-bar .btn-middle {
  border-radius: 0;
}

.ncm-btn-bar .btn-right {
  border-radius: 0 8px 8px 0;
}

.container-cls-table {
  border-radius: 8px;
  border: 1px solid #DADADA;
  padding: 2px;
  background-color: #edf1f5;
}
.container-cls-table table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}
.container-cls-table table th,
td {
  padding: 6px !important;
  border: none;
  text-align: left;
}
.container-cls-table table tr {
  border-bottom: 1px solid #ddd;
}

.container-cls-table table tbody td,
.container-cls-table table tbody th {
  background-color: #fff;
}

.container-cls-table table td.fit,
.container-cls-table table th.fit {
  white-space: nowrap;
  width: 1%;
}

.form-sb-container{
  display: flex;
  justify-content: end;
}

table.domain-fltr-tbl-cls tr td.progress-container {
  width: 25%;
} 

table.domain-fltr-tbl-cls .domain-fltr-name-cls {
  font-weight: bold;
  color: #898787;
}

.line-progress-container svg {
  border-radius: 10px;
}


.audience-page-container, .keywords-editor-container, .guidewords-editor-container {
  max-width: 800px;
}

.audience-page-container  .date-picker{
  border: 1px solid #dadada;
  border-radius: 8px;
  padding: 8px 14px;
  color: #333;
}

tr:hover .aud-row {
  /*Add a slight dimming to the highlighted row.*/
  background-color: #f5f5f5;
}

.aud-action-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

tr:hover .aud-action-button {
  /*Only visible if the user is on the row.*/
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.aud-action-menu-wrapper {
  /*Allows each action menu to be associated with the correct button.*/
  position: relative;
  /*The row needs to stay the same height with or without the action
  menu; since the div associated with this class will always appear,
  it is used to keep the height consistent.*/
  min-height: 38px;
}

.aud-action-menu {
  position: absolute;
  right: 100%;
  /*Slight gap between button and options.*/
  margin-right: 0.5rem;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 6px;
  z-index: 100;
  min-width: 140px;
  white-space: nowrap;
}

.top-action-menu {
  top: 0;
}

.bottom-action-menu {
  bottom: 0;
}

.aud-action-menu-hidden {
  /*This is toggled on and off for each kebab menu,
  depending on where the mouse is.*/
  display: none;
}

.aud-menu-item {
  display: flex;
  align-items: left;
  padding: 8px 12px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.aud-menu-item:hover {
  background-color: #f5f5f5;
}

.aud-menu-item:disabled {
  color: grey;
}

.interest-slider-container {
  background-color: #fff;
  border-radius: 8px;
}

.interest-slider-container input[type="checkbox"]  {
  transform: scale(1.5);
}

.interest-slider-container input[type="number"]  {
  border: 1px solid #dadada;
  /* background-color: #edf1f5; */
  border-radius: 8px;
  padding: 4px 0;
  text-align: end;
}

.interest-slider-container input[type="number"]:disabled  {
  background-color: #edf1f5;
}

.content {
  margin-left: 200px; /* Adjust this value to match the width of the sidebar */
  padding: 20px;
}
.ctx_container {
    display: inline-block;
  }
  .ctx_content {
    padding: 10px;
    background: #fff;
    border-radius: var(--Corner-Small, 8px);
}
#timelineForm input, #timelineForm select {
    border-radius: var(--Corner-Small, 8px);
    border: 1px solid #BBB;
    background: #FFF;
    box-shadow: 0px 1px 1px 0px rgba(90, 90, 90, 0.25);
    margin: 10px;
    color: #555;
}
.timeline-container {
    color: #555;
}
.timeline-container p {
    padding: 14px 27px;
    margin: 0;
}
#timelineForm input {
    padding: 4px 10px;
}
#timelineForm select {
    padding: 7px 10px;
}

.model-metrics-container {
  background-color: #fff;
  border-radius: 8px;
}
.metrics-container,
.lbled-urls-container {
  min-width: 450px;
}

.model-characteristics-container {
  max-width: 300px;
}

.model-category-tabs-container {
  border-radius: 8px;
  border: solid 1px #DADADA;
  overflow: hidden;
}

.model-category-tabs-container nav {
  background-color: #EDF1F5;
  border:0;  
}

.model-category-tabs-container .nav-tabs,
.model-category-tabs-container .nav-tabs .nav-link{
  border-radius: 0;
  border: 0;
  color: #999;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  padding: 16px;
  color: #333;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active img{
  filter: brightness(0) saturate(100%) invert(12%) sepia(0%) saturate(4339%) hue-rotate(101deg) brightness(94%) contrast(79%);
}

#surfer_table_info{
  background-color: #EDF1F5;
}

/* auto-complete css */
.ui-autocomplete {
  max-height: 300px;
  overflow-y: auto;
  /* prevents horizontal scrollbar */
  overflow-x: hidden;
  z-index: 10051 !important; /* Bootstrap modal z-index is 1050 */
}
.carret-icon-toggle {
  font-size: 35px;
  line-height: 8px;
  vertical-align: middle;
  padding: 0px;
}
.carret-icon-toggle.btn-outline-secondary:focus {
  box-shadow: 0 0 0 0.1rem rgba(108, 117, 125, .5);
}
.search-input-group .keywords-categories {
  color: #6b6b6bfd;
}
#searchInputGroup.d-none {
  display: none;
}
#searchInputGroup.d-block {
  display: block;
}
.search-group-category {
  margin-top: 5px;
}
.tokenfield input#searchByKeyword-tokenfield.token-input {
  min-width: 70% !important;
}

.tokenfield input#modalSearchByKeyword-tokenfield.token-input {
  min-width: 70% !important;
}

.keywords-editor-container .selected-keyword-category {
  width: 50%;
  border-radius: var(--Corner-Small, 8px);
  border: 1px solid #BBB;
  background: #FFF;
  box-shadow: 0px 1px 1px 0px rgba(90, 90, 90, 0.25);
  color: #555;
}

.assign-labeler-modal .terminate-block-form {
  display: inline-block;
  position: absolute;
  right: 25px;
  bottom: 15px;
}

.assign-labeler-modal .terminate-block-form button,
.assign-labeler-modal .terminate-block-form form {
  display: inline-block;
}

/* category search list styles */
.category-search-label-bold {
  color: black;
  font-weight: bold;
}

/* Media query for screens less than 768px */
@media (max-width: 768px) {
  .banner-container .banner-image {
    display: none !important; /* Hide the banner on small screens */
  }
  .banner-text .box {
    width: 85%;
  }
}

@keyframes slideInFromRight {
  0% {
    right: -300px;
    opacity: 0;
  }
  100% {
    right: 20px;
    opacity: 1;
  }
}