:root {
  /* --main-color: #3498db; */
  /* --font-main-color: #14151a; */
  --font-main-color: #000000;
  --font-hyperlink-color: #0049a7;
  --font-size-base: 12px;
  --font-family-base: "Plus Jakarta Sans", sans-serif;
  --font-line-height-base: 1rem;
  --font-letter-spacing-base: 0.4px;

  --font-nav-link-color: #475569;

  --title-background-color: #dce9f9;
  --title-font-color: #800000;
  /* --title-background-gradient: linear-gradient(to bottom, #ebf3fc, #dce9f9); */
  --title-background-gradient: linear-gradient(
    to bottom,
    #e3ecf7 10%,
    #accdf5 90%
  );

  --edit-page-table-tbody-background: linear-gradient(
    to left,
    #101a4e,
    #4cb2fe
  );
  --edit-page-table-tbody-background-color: #f1f8ff;
  --edit-page-background-color: #f9fafb;

  --home-page-container-background-color: #f4f4f4;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--font-line-height-base);
  -webkit-font-smoothing: antialiased;
  letter-spacing: var(--font-letter-spacing-base);
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
  top: auto;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.group > td:first-child:before,
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr.group
  > th:first-child:before {
  content: "";
  width: 0;
  height: 0;
  box-shadow: 0;
  border: 0;
}

/* From Additional Style CSS */
h1 {
  /* font-size: 22px; */
  font-size: 18px;
  font-weight: bold;
}
h2 {
  font-size: 20px;
  /* font-weight: bold; */
}
h3 {
  font-size: 18px;
  font-weight: bold;
}
h4 {
  font-size: 16px;
  font-weight: bold;
}
h5 {
  font-size: 14px;
  font-weight: bold;
}
h6 {
  font-size: 12px;
  font-weight: bold;
}
h7 {
  font-size: 10px;
  font-weight: bold;
}

footer {
  position: absolute;
  z-index: 5;
}

#footer-bottom {
  background-color: #8e8e8e;
  color: #ffffff;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 25px;
}
#footer-bottom a {
  color: #ffffff;
}

.ui-widget-content {
  border: 1px solid #dddddd;
  color: var(--font-main-color);
}
.ui-widget-content a {
  text-decoration: none;
  color: var(--font-hyperlink-color);
}
.ui-widget-content a.disabled-link {
  pointer-events: none;
  color: #cccccc;
}
.ui-widget-content a:hover {
  text-decoration: none;
  color: #cc0000;
}

.ui-widget-content button {
  color: #025a73;
}

div#mcTooltip a {
  text-decoration: none;
  color: #999999;
}
div#mcTooltip a:hover {
  text-decoration: none;
  color: #cc0000;
}

/*.nn-icons {padding-left: 5px; padding-right: 5px; text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #999999, 0 0 2px 


#999999, 0 0 1px #999999, 0 0 1px #999999, 0 0 1px #999999;}*/

.nn-icons {
  padding-left: 5px;
  padding-right: 5px;
}

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  /*border-style: none;*/
  border-color: #f09336 transparent transparent;
}

.main-section {
  margin-bottom: 30px;
  min-height: 500px;
}

.dropdown .is-dropdown-submenu a {
  padding: 0.4rem 1rem;
}

.email-label {
  font-family: Verdana;
  font-size: 10px;
  color: #000000;
}
.email-value {
  font-family: Verdana;
  font-size: 10px;
  color: #000000;
}

.nn-print-selected {
  color: red;
}

/*Styles for Chart*/

path.slice {
  stroke-width: 2px;
}
polyline {
  opacity: 0.3;
  stroke: black;
  stroke-width: 2px;
  fill: none;
}
svg text.percent {
  fill: white;
  text-anchor: middle;
  font-size: 12px;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.bar {
  fill: orange;
}
.bar:hover {
  fill: orangered;
}
.x.axis path {
  display: none;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

.bordertd > textarea {
  width: 100%;
}

.bordertdred,
.bordertd {
  width: 250px;
}

.bordertd > span {
  display: block;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #cacaca;
  background-color: #fefefe;
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
  padding: 4px 6px;
}

.bordertdred > span,
.bordertdred > [type="text"],
.bordertdred > select,
.bordertdred > textarea,
.bordertdred > input[type="checkbox"]:after {
  display: block;
  width: 100%;
  border: 1px solid red;
  background-color: #fcfce8;
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.2),
    0 3px 4px 0 rgba(0, 0, 0, 0.19);
}
.bordertdred > span {
  padding: 4px 6px;
}

select,
[type="text"],
[type="password"] {
  padding-top: 0.3rem;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 12px;
  height: 30px;
}
.axis {
  font: 15px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #d4d8da;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}
.toolTip {
  position: absolute;
  display: none;
  min-width: 80px;
  height: auto;
  background: none repeat scroll 0 0 #ffffff;
  border: 1px solid #6f257f;
  padding: 14px;
  text-align: center;
}
.tooltip {
  background: #ffffff;
  box-shadow: 0 0 5px #999999;
  color: #333;
  display: none;
  font-size: 12px;
  /*        left: 180px;*/
  padding: 10px;
  position: absolute;
  text-align: center;
  /*        top: 95px;*/
  width: 80px;
  z-index: 10;
}
.legend {
  font-size: 12px;
}
rect {
  cursor: pointer; /* NEW */
  stroke-width: 2;
}
rect.disabled {
  /* NEW */
  fill: transparent !important; /* NEW */
}

/*path {  stroke: #fff; }*/
path:hover {
  opacity: 0.9;
}
rect:hover {
  fill: blue;
}
.axis {
  font: 10px sans-serif;
}
.legend tr {
  border-bottom: 1px solid grey;
}
.legend tr:first-child {
  border-top: 1px solid grey;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}
.legend {
  margin-bottom: 76px;
  display: inline-block;
  border-collapse: collapse;
  border-spacing: 0px;
}
.legend td {
  padding: 4px 5px;
  vertical-align: bottom;
}
.legendFreq,
.legendPerc {
  text-align: right;
  width: 50px;
}
.bar-text {
  font-family: var(--font-family-base);
  font-size: 9px;
}

/* Style for RowGroup Extenstion */
table.dataTable tr.group td {
  font-weight: bold;
  background-color: #e0e0e0;
}
/* --------------------- */

[type="checkbox"],
[type="radio"] {
  /* margin: 0 0 0rem; */
  margin: 0px 5px 0px 0px;
}
/*th { background: #14679E; color:#ffffff}*/

textarea {
  font-size: 12px;
}
h3 {
  margin-bottom: 0px;
}
select {
  margin-right: 5px;
}

.ui-autocomplete {
  position: relative;
  width: 1px;
  clear: both;
  z-index: 1000;
}

#placeholder-container-wrapper table,
#placeholder-container-wrapper-large table {
  margin-bottom: 0px;
}
#placeholder-container-wrapper table td,
#placeholder-container-wrapper-large table td {
  text-align: center;
}
#placeholder-container-wrapper-large > #mailForm table td {
  text-align: left;
}
#placeholder-container-wrapper-large > #mailForm table td.nnlabel {
  text-align: right;
}
.contextMenu {
  background: #f9f9f9;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  border: 1px solid #ccc;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 8px;
  min-width: 80px;
}

.nn-fcst-edit-cell {
  padding: 2px 0 0 2px;
}

.nn-fcst-edit-cell [type="text"] {
  min-width: 15px !important;
}
table tbody th,
table tbody td {
  padding: 0.25rem 0.625rem 0.25rem;
}
[type="search"] {
  font-size: 0.8rem;
  min-width: 200px;
}
.chart-title {
  font-size: 16px;
  font-weight: bold;
  text-decoration: underline;
}
.prmlogininput {
  width: 100%;
}
.center-align {
  text-align: center;
}

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 58%; /* aspect ratio */
  vertical-align: top;
  overflow: hidden;
}
.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}

.pf-table {
  margin-bottom: 0.1rem;
  border-collapse: inherit;
}
html {
  overflow-x: auto;
}
.off-canvas-wrapper {
  overflow: visible;
}

.customtable {
  border-collapse: unset;
  width: auto;
  margin-bottom: 2px;
  border-spacing: 0px;
}

.white {
  color: #ffffff;
}
a.white:link {
  color: #ffffff;
}
a.white:hover {
  color: #ffffff;
}

.button.radius {
  border-radius: 3px;
}

.fountableow {
  border-collapse: unset;
  margin-bottom: 2px;
  border-spacing: 0px;
}
.fountableow table:first-child > tbody > tr:nth-child(even) {
  background-color: #f6f7fb;
}
.fountableow table:first-child {
  margin-bottom: 2px;
  border-spacing: 0px;
}

.accordion-menu .is-accordion-submenu a {
  /*padding: 0.4rem 1rem;*/
  padding: 0.8rem 2rem;
  border-bottom: 1px solid #cacaca;
  box-shadow: 0px 1px 1px 1px #f3f3f3;
}

.navigationtitle a {
  border-bottom: 1px solid #cacaca;
  box-shadow: 0px 1px 1px 1px #f3f3f3;
}

input[type="checkbox"]:after {
  line-height: 1.5em;
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: #f6f7fb;
  border: 1px solid grey;
}
input[type="checkbox"]:checked:after {
  content: "\2713";
  text-align: center;
  color: blue;
  font-size: 10px;
  font-weight: bold;
}

.chart-fields > input[type="radio"] {
  margin: 0px 5px 0px 0px;
}

.medium-12 > .nn-heading-font {
  margin-bottom: 8px;
}

.chart-default-legends {
  color: var(--title-font-color);
  font-weight: bold;
}

.kanban-item {
  padding: 10px;
  margin-bottom: 8px;
}

.kanban-drag {
  padding: 10px;
}
.kanban-board header {
  background: #2a92bf;
  color: #ffffff;
}

svg[id^="d3-funnel"] {
  -webkit-filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.25));
  margin-left: 50px;
}

/*Styling for the lines connecting the labels to the slices*/
polyline {
  opacity: 0.3;
  stroke: black;
  stroke-width: 2px;
  fill: none;
}

/* Make the percentage on the text labels bold*/
.labelName tspan {
  font-style: normal;
  font-weight: 700;
}

/* In biology we generally italicise species names. */
.labelName {
  font-size: 0.7em;
  font-style: italic;
}

button.dt-button,
div.dt-button,
a.dt-button {
  padding: 0.2em 0.6em;
  font-size: 1.2em;
}
.floatafterprevdiv {
  float: left;
}
/*.th-printable{
		border: 1px solid #c7c7c7;
	}
.th-printable th{
	background-color: #CCCCCC;
	border-right: 1px solid #ffffff;
}
.th-printable td{
	border-right: 1px solid #c7c7c7;
	border-bottom: 1px solid #c7c7c7;
}*/
/*.emaillabelcssclass
{
	background-color: #f1f1f1;
	text-align:right;
	vertical-align:top;
	width:150px;
}
.emailvaluecssclass
{
	min-width:150px;
}*/
/*----------------------------------- Media Queries------------------------------------- */

/* Common for all */
/*
#nn_admin_billing_calc table tbody tr:nth-child(even) {
  border-bottom: 0;
  background-color: #fff;
}

#nn_admin_billing_calc table td {
  font-size: 12px;
}

#nn_admin_billing_calc table th {
  font-size: 15px;
}

#nn_admin_billing_calc table thead, #nn_admin_billing_calc table tbody, #nn_admin_billing_calc table tfoot {
  border: 0px solid #f1f1f1;
}*/
/* Clip cell data in DataTables */
/* .dataTables_wrapper table.dataTable td,
.dataTables_wrapper table.dataTable th {
  max-width: 75px;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
} */

/* .nn-table-border select,
.nn-table-border input {
  min-width: none !important;
  width: auto !important;
} */
/* .top-bar [type="search"] {
  min-width: 150px;
} */

/* -------------- Edit Page New Changes Starts here -------------- */

[id^="editpage"] div,
[id="VIEWREPORTEDITPAGE"] div,
[data-formname="email-edit-page"] div,
[id="CREATEEDITDASHBOARD"] div {
  /* margin: 0;
  padding: 0;
  box-sizing: border-box; */
  /* font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; */
  /* font-family: "Inter", sans-serif; */
  font-family: var(--font-family-base);
  font-optical-sizing: auto;
  color: var(--font-main-color);
  letter-spacing: 0.3px;
}

[data-formname="email-edit-page"] table {
  border-collapse: unset;
}

[data-formname="email-edit-page"] ul.select2-choices {
  border: none;
}

[data-formname="email-edit-page"] .select2-container-active .select2-choice,
[data-formname="email-edit-page"] .select2-container-active .select2-choices,
[data-formname="email-edit-page"]
  .select2-container-multi.select2-container-active
  .select2-choices {
  border: none;
  outline: none;

  -webkit-box-shadow: none;
  box-shadow: none;
}

[data-formname="email-edit-page"] .select2-container,
[data-formname="email-edit-page"] .select2-container input[type="text"],
[data-formname="email-edit-page"] textarea {
  min-width: 150px !important;
  width: 250px !important;
}

/* [id^="editpage"] .nn-heading-font {
  font-weight: 400 !important;
  letter-spacing: -0.5px !important;
} */

[id^="editpage"] .nnlabel,
[data-formname="email-edit-page"] .nnlabel {
  font-weight: 500;
}
[data-formname="email-edit-page"] .nnlabel {
  line-height: 2rem;
}
[id^="editpage"] .nnlabel div {
  line-height: 1.1rem !important;
}

[id^="editpage"],
/* [id="VIEWREPORTEDITPAGE"], */
[data-formname="email-edit-page"] {
  background-color: var(--edit-page-background-color);
  /* min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px; */
}
[id^="editpage"].ui-widget-content,
[data-formname="email-edit-page"].ui-widget-content {
  background-color: var(--edit-page-background-color) !important;
  background: var(--edit-page-background-color) !important;
}

[id^="editpage"] .sectionname {
  background-color: #ffffff !important;
  padding: 15px 10px 15px 10px !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  width: 100% !important;
  max-width: 85% !important;
  min-width: 80% !important;
  border-top: none;
}

[id^="editpage"][id*="NN30-FCT"] .sectionname {
  max-width: 95% !important;
}

[id^="editpage"] .sectionname table {
  border-collapse: unset !important;
}

[id^="editpage"] .sectionname table.pf-table {
  border-bottom: 1px solid #799db4;
  margin-bottom: 10px;
  /* background-color: #f1f8ff; */
}
[id^="editpage"] .sectionname table.pf-table {
  /* background-color: var(--edit-page-table-tbody-background-color); */
  background: var(--title-background-gradient);
}
[id^="editpage"] .sectionname table.pf-table tbody {
  background-color: transparent;
}

[id^="editpage"] .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

[id^="editpage"] .header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

[id^="editpage"] .header span {
  font-size: 14px;
  font-weight: 500;
  color: #10b981;
}

[id^="editpage"] form {
  /* display: grid; */
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

[id^="editpage"] .form-group {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  padding: 7px 0;
}

[id^="editpage"] label {
  width: 30%;
  font-size: 14px;
  color: #374151;
}

[id^="editpage"] .bordertd > span {
  box-shadow: none;
  /* height: 39px !important; */
  padding: 8px;
  border: 1px solid #d1d5db !important;
  /* border-bottom: 2px solid #10b981 !important; */
  border-bottom: 2px solid #757575 !important;
  border-radius: 6px !important;
  background-color: #f6f6f6 !important;
  min-height: 39px;
  overflow-wrap: anywhere;
}

[id^="editpage"] .bordertdred > span {
  box-shadow: none;
  /* height: 39px !important; */
  padding: 8px;
  border: 1px solid #d1d5db !important;
  /* border-bottom: 2px solid #10b981 !important; */
  border-bottom: 2px solid #ef4444 !important;
  border-radius: 6px !important;
  background-color: #f8efef !important;
  min-height: 39px;
  overflow-wrap: anywhere;
}

/* [id^="editpage"] .bordertd > span > div {
  color: #cacaca !important;
} */
[id^="editpage"] input[type="text"],
[id^="editpage"] select,
[id="VIEWREPORTEDITPAGE"] input[type="text"],
[id="global-main-search"] input[type="text"],
[id="CREATEEDITDASHBOARD"] input[type="text"],
[data-formname="email-edit-page"] input[type="text"],
[data-formname="email-edit-page"] select,
[id^="placeholder-container-wrapper"] select,
[id^="placeholder-container-wrapper"] input[type="text"],
.users-invite-bar select {
  height: 39px !important;
}
[id="VIEWREPORTEDITPAGE"] select,
[id="global-main-search"] select {
  height: auto !important;
}

[id^="editpage"] input[type="text"],
[id^="editpage"] select,
[id^="editpage"] textarea,
[id="VIEWREPORTEDITPAGE"] input[type="text"],
[id="global-main-search"] input[type="text"],
[id="VIEWREPORTEDITPAGE"] select,
[id="global-main-search"] select,
[id="VIEWREPORTEDITPAGE"] textarea,
[id="CREATEEDITDASHBOARD"] input[type="text"],
[data-formname="email-edit-page"] input[type="text"],
[data-formname="email-edit-page"] select,
[data-formname="email-edit-page"] textarea,
[id^="placeholder-container-wrapper"] select,
[id^="placeholder-container-wrapper"] input[type="text"],
.users-invite-bar select {
  /* width: 70% !important; */
  /* height: 39px !important; */
  padding: 8px;
  border: 1px solid #d1d5db !important;
  /* border-bottom: 2px solid #10b981 !important; */
  border-bottom: 2px solid #127abb !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  transition: all 0.4s ease-in-out !important;
  min-height: 39px;
}

[id^="editpage"] input[type="text"]:focus,
[id^="editpage"] select:focus,
[id^="editpage"] textarea:focus,
[id="VIEWREPORTEDITPAGE"] input[type="text"]:focus,
[id="global-main-search"] input[type="text"]:focus,
[id="VIEWREPORTEDITPAGE"] select:focus,
[id="global-main-search"] select:focus,
[id="VIEWREPORTEDITPAGE"] textarea:focus,
[id="CREATEEDITDASHBOARD"] input[type="text"]:focus,
[data-formname="email-edit-page"] input[type="text"]:focus,
[data-formname="email-edit-page"] select:focus,
[data-formname="email-edit-page"] textarea:focus,
[id^="placeholder-container-wrapper"] select:focus,
[id^="placeholder-container-wrapper"] input[type="text"]:focus,
.users-invite-bar select:focus {
  /* background-color: #ecfdf5 !important; */
  background-color: #f1f8ff !important;
  border-bottom-color: #127abb !important;
  outline: none !important;
}

[id^="editpage"] input[type="text"]::placeholder,
[id^="editpage"] select::placeholder,
[id^="editpage"] textarea::placeholder,
[id="VIEWREPORTEDITPAGE"] input[type="text"]::placeholder,
[id="global-main-search"] input[type="text"]::placeholder,
[id="VIEWREPORTEDITPAGE"] select::placeholder,
[id="global-main-search"] select::placeholder,
[id="VIEWREPORTEDITPAGE"] textarea::placeholder,
[id="CREATEEDITDASHBOARD"] input[type="text"]::placeholder,
[data-formname="email-edit-page"] input[type="text"]::placeholder,
[data-formname="email-edit-page"] select::placeholder,
[data-formname="email-edit-page"] textarea::placeholder,
[id^="placeholder-container-wrapper"] select::placeholder,
[id^="placeholder-container-wrapper"] input[type="text"]::placeholder,
.users-invite-bar select::placeholder {
  color: #9ca3af !important;
  transition: color 0.4s ease-in-out !important;
}

[id^="editpage"] input[type="text"]:focus::placeholder,
[id^="editpage"] select:focus::placeholder,
[id^="editpage"] textarea:focus::placeholder,
[id="VIEWREPORTEDITPAGE"] input[type="text"]:focus::placeholder,
[id="global-main-search"] input[type="text"]:focus::placeholder,
[id="VIEWREPORTEDITPAGE"] select:focus::placeholder,
[id="global-main-search"] select:focus::placeholder,
[id="VIEWREPORTEDITPAGE"] textarea:focus::placeholder,
[id="CREATEEDITDASHBOARD"] input[type="text"]:focus::placeholder,
[data-formname="email-edit-page"] input[type="text"]:focus::placeholder,
[data-formname="email-edit-page"] select:focus::placeholder,
[data-formname="email-edit-page"] textarea:focus::placeholder,
[id^="placeholder-container-wrapper"] select:focus::placeholder,
[id^="placeholder-container-wrapper"] input[type="text"]:focus::placeholder,
.users-invite-bar select:focus::placeholder {
  color: #6b7280 !important;
}

[id^="editpage"] textarea,
[data-formname="email-edit-page"] textarea {
  resize: vertical;
  min-height: 80px;
}

[id^="editpage"] .bordertdred input[type="text"],
[id^="editpage"] .bordertdred select,
[id^="editpage"] .bordertdred textarea {
  border-bottom-color: #ef4444 !important;
  background-color: #f8efef !important;
}

[id^="editpage"] select,
[data-formname="email-edit-page"] select,
[id^="placeholder-container-wrapper"] select,
[id="VIEWREPORTEDITPAGE"] select,
[id="global-main-search"] select,
.users-invite-bar select {
  padding-right: 1.5rem !important;
}

[id^="editpage"] input:disabled {
  width: 45px !important;
  border: 1px solid #ccc !important;
  min-width: 20px !important;
  height: 18px !important;
  border-radius: 1px !important;
  color: #777777 !important;
}

[id^="editpage"] .layer1 div,
[id^="editpage"] .layer1 td {
  background-color: #f8efef !important;
}

[id^="editpage"] table.sub-sectioname > tbody > tr {
  background-color: var(--edit-page-background-color) !important;
}

[id^="editpage"] table.sub-sectioname div.sectionname {
  max-width: 100% !important;
  padding: 15px 0px !important;
}

[id^="editpage"][id*="NN30-FCT"] table.sub-sectioname div.sectionname {
  margin-left: -10px;
}

/* [id^="editpage"] [id^="Notes_content"] a.common-btn,
[id^="editpage"] [id^="notes_content"] a.common-btn,
[id^="editpage"] [id^="notes_internal"] a.common-btn {
  margin-top: 15px;
} */
[id^="Notes_content"] a.common-btn,
[id^="notes_content"] a.common-btn,
[id^="notes_internal"] a.common-btn {
  margin-top: 15px;
}
/* [id^="editpage"] a.common-btn i {
  padding: 0 5px;
  border-right: 1px solid #ffffff;
  margin-right: 5px;
} */

[id^="editpage"] .loading-spinner {
  margin-top: 15px;
  position: absolute;
}
[id^="editpage"] .check-icon {
  margin-top: 15px;
  position: absolute;
  padding-left: 6px;
}
.check-icon {
  color: #008600;
}

.check-container {
  position: relative;
  background: linear-gradient(90deg, #2980b9, #2c3e50);
  line-height: 0;
  font-size: 25px;
}

.check-container input[type="checkbox"],
.check-container label,
.check-container label::before,
.check-container label::after {
  appearance: none;
  display: inline-block;
  font-size: inherit;
  border-radius: 1em;
  border: 0;
  transition: 0.35s ease-in-out;
  box-sizing: border-box;
  cursor: pointer;
}

.check-container {
  appearance: none;
  display: inline-block;
  border-radius: 1em;
  border: 0;
  transition: 0.35s ease-in-out;
  box-sizing: border-box;
  cursor: pointer;
}

.check-container label {
  width: 1.9em;
  height: 0.8em;
  background: #bababa;
  overflow: hidden;
}

.check-container input[type="checkbox"] {
  position: absolute;
  z-index: 1;
  width: 0.6em;
  height: 0.6em;
  top: 0.08em;
  left: 0.2em;
  background: linear-gradient(45deg, #dedede, #ffffff);
  box-shadow: 0 6px 7px rgba(0, 0, 0, 0.3);
  outline: none;
}

.check-container input[type="checkbox"]:checked {
  left: 1.1em;
}

.check-container input[type="checkbox"]:checked + label {
  background: transparent;
}

.check-container input[type="checkbox"]:checked + label::before,
.check-container input[type="checkbox"]:checked + label::after {
  left: 2.55em;
  top: 0.4em;
  line-height: 0.1em;
  transform: rotateY(360deg);
}

.check-container input[type="checkbox"]:checked + label::after {
  height: 0.16em;
  top: 0.55em;
  left: 2.6em;
  font-size: 0.6em;
  line-height: 0;
}

.check-container input[type="checkbox"]:after {
  display: none;
  width: 0;
  height: 0;
  background-color: transparent;
  border: none;
}

.check-container input[type="checkbox"] + label {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

.toggleSwitch-main-container {
  float: right;
  display: flex;
  align-items: center;
}

.check-label {
  font-weight: 500;
  /* font-style: italic; */
  font-size: 11px;
  padding: 0 5px 0 0;
  opacity: 0.7;
  color: var(--title-font-color) !important;
}

.notes-history {
  box-shadow:
    rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  /* display: block;
  margin: 0 0 15px 0; */
  background-color: #fafafa !important;
  border-collapse: collapse;
}

.notes-history > tbody > tr td {
  border-bottom: 1px solid #fbfbfb;
}
.notes-history > tbody > tr:last-of-type td:last-child {
  border-bottom: none;
}

.notes-history > tbody > tr td b {
  color: #005288;
  font-weight: 600;
}

div[id^="mandatoryfields"] table tr td:first-child::before {
  content: "\f071";
  margin-right: 6px;
  display: inline-block;
  font-family: "FontAwesome";
  color: #cc0133;
  font-size: 14px;
}

/*ForeCast Page */

[id^="editpage"] .EnableRightClick input[type="text"] {
  width: 90px !important;
}

[id^="editpage"] .EnableRightClick input:disabled {
  box-shadow: none;
  height: 39px !important;
  padding: 8px;
  border: 1px solid #d1d5db !important;
  border-bottom: 2px solid #757575 !important;
  border-radius: 6px !important;
  background-color: #f6f6f6 !important;
}

[id^="editpage"] .EnableRightClick tr td:first-child {
  position: sticky;
  left: 0;
  background: #127abb !important;
  z-index: 2;
  color: #ffffff;
}

[id^="editpage"] .EnableRightClick tr:first-child td {
  background: #127abb !important;
  color: #ffffff;
  text-align: center;
}
[id^="editpage"] .EnableRightClick input,
[id^="editpage"] .EnableRightClick td {
  text-align: right;
}
.small-input {
  width: 100px !important;
  min-width: 100px !important;
}

[id^="editpage"] div.sectionname table:last-of-type {
  margin-bottom: 0;
}

[id^="editpage"] h2 {
  margin-bottom: 0px;
}

[id^="editpage"] .EnableRightClick .loading-spinner {
  position: absolute;
  margin-left: -10px;
}

[id^="editpage"] .EnableRightClick .check-icon {
  margin-left: -12px;
}

[id^="editpage"] .chars-left input:disabled {
  border: none !important;
  width: 30px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 2px 0 0 0;
  box-shadow: none;
  padding: 0 0 0 5px;
}
[id^="editpage"] .chars-left {
  display: flex;
  align-items: center;
}

/* -------------- Edit Page New Changes Ends here -------------- */

/* -------------- View (Printable Format) Page New Changes Starts here -------------- */

.view-parent-container {
  width: 85%;
  border: 1px solid #1779ba;
  border-radius: 2px;
  margin: 0 0 0 10px;
}
.view-parent-container table {
  border-collapse: unset;
}
.view-parent-container .nn-table-border {
  margin-left: 10px;
}
.view-parent-container .printableQAR table {
  border-bottom: 1px solid #1779ba;
}
.view-parent-container .printableQAR table,
.view-parent-container .printableQAR table td {
  background-color: #e6effb;
}
.view-parent-container .printableQAR table img {
  mix-blend-mode: multiply;
}

.view-parent-container table {
  margin-bottom: 0.2rem;
}
.view-parent-container table .nnlabel {
  background-color: #e6effb;
}
.view-parent-container h3 {
  font-style: normal !important;
  font-weight: 500 !important;
  color: var(--title-font-color);
  text-align: left;
}
.view-parent-container table tbody tr:nth-child(even) {
  background-color: transparent;
}

.view-parent-container .notes-history {
  box-shadow: unset;
  background-color: transparent;
  border: 1px solid #d3ecfd;
}
.view-parent-container .nn-address {
  text-align: right;
  padding-right: 25px;
  font-style: italic;
}
/* .view-parent-container > table {
  border-bottom: 1px solid #e6effb;
} */
/* -------------- View (Printable Format) Page New Changes Ends here -------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-base);
}

.flex-center {
  display: flex;
  align-items: center;
}

.expandcollapseicon {
  font-size: 24px;
  position: relative;
  top: 3px;
}

span.mapping-link {
  cursor: pointer;
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 5px;
  vertical-align: middle;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.top-bar .size-24 {
  font-size: 18px !important;
}

.top-bar.top-bar-left.dropdown.menu a,
.top-bar.top-bar-right.dropdown.menu a {
  padding: 0.7rem 0.8rem;
}
.contextualMenuItemTip {
  padding: 0px 0px 0px 10px !important;
}
.contextualHoverMenuOuter:hover > .contextualHoverMenu {
  width: max-content;
}
ul.contextualHoverMenu {
  margin-left: 0.1rem !important;
}

.contextualHoverMenuOuter {
  border-bottom: 1px solid #f0f0f0;
}

.note-editable ul li,
.note-editable ol li {
  list-style-position: unset !important;
  margin: 0 0 0 20px !important;
}

div[id^="editpage"] p,
.sectionname p,
.notes-history p {
  margin: 0px;
  line-height: 1.2;
  padding: 0;
  display: block;
}

li > br:first-child {
  display: none;
}

.formErrorContent i {
  color: #cc0033;
  font-size: 15px;
}
.formError .formErrorContent {
  font-size: 12px !important;
  padding: 5px 5px 5px 8px !important;
}
.non-datatable-table {
  border: none;
  border-collapse: unset;
  width: auto;
}

.non-datatable-table-nonbg tbody tr:nth-child(even) {
  background-color: unset !important;
}
.non-datatable-table-nonbg {
  border-collapse: unset !important;
  width: auto;
  border: none;
}
/*.nn-table-border td:has(a i) {*/
/* .nn-table-border td:has(> a:only-child:has(> i:only-child)):not(:has(text)) { */
/*.nn-table-border td:has(> a:only-child i),
.nn-table-border td:has(> a i):not(:has(text)) {*/
.nn-table-border td:has(> a) {
  white-space: nowrap;
  /* text-align: center;
  padding-left: 5px;
  padding-right: 5px; */
}
.nn-table-border td:has(> a i):not(:has(> :not(a))) {
  text-align: center;
}
.admin-search-btn {
  width: auto;
  padding: 6px;
  font-size: 16px;
  /* background-color: #0078d4; */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-image: linear-gradient(
    to right,
    #5ab4ff 0%,
    #2277bd 51%,
    #5ab4ff 100%
  );
  transition: 0.5s;
  background-size: 200% auto;
  box-shadow: 0 0 20px #eee;
  margin: 5px 0 10px 1px;
}
.admin-search-btn:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}
.admin-search-btn i {
  color: #fff !important;
  font-size: 12px;
}

.general-icon-btn {
  width: auto;
  padding: 4px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-image: linear-gradient(
    to right,
    #5ab4ff 0%,
    #2277bd 51%,
    #5ab4ff 100%
  );
  transition: 0.5s;
  background-size: 200% auto;
  box-shadow: 0 0 20px #eee;
}
.general-icon-btn:hover {
  background-position: right center;
  color: #fff !important;
  text-decoration: none;
}

.general-icon-btn i {
  color: #fff !important;
}

.admin-general-btn {
  background-image: linear-gradient(
    to right,
    #5ab4ff 0%,
    #2277bd 51%,
    #5ab4ff 100%
  ); /* margin: 10px; */
  padding: 8px 15px;
  /* text-align: center; */
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-size: 200% auto;
  color: white !important;
  box-shadow: 0 0 20px #eee;
  border-radius: 4px;
  /* display: block;*/
}
.admin-general-btn:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

div:has(> span a.admin-general-btn) {
  margin: 5px 0 20px 0px;
}

.admin-arrow-btn {
  background-image: linear-gradient(
    to right,
    #5ab4ff 0%,
    #2277bd 51%,
    #5ab4ff 100%
  ); /* margin: 10px; */
  padding: 5px 2px;
  /* text-align: center; */
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-size: 200% auto;
  color: white !important;
  box-shadow: 0 0 20px #eee;
  border-radius: 4px;
  /* display: block;*/
}
.admin-arrow-btn:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}
td:has(a.admin-arrow-btn) {
  padding: 5px 5px 15px 10px;
}
.general-save-btn {
  background-image: linear-gradient(
    to right,
    #5ab4ff 0%,
    #2277bd 51%,
    #5ab4ff 100%
  ); /* margin: 10px; */
  padding: 8px 10px 8px 6px;
  /* text-align: center; */
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-size: 200% auto;
  color: white !important;
  box-shadow: 0 0 20px #eee;
  border-radius: 4px;
  /* display: block;*/
}
.general-save-btn:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.common-btn,
.forecast-copyright-grid,
.manual-save {
  background-image: linear-gradient(
    to right,
    #5ab4ff 0%,
    #2277bd 51%,
    #5ab4ff 100%
  ); /* margin: 10px; */
  padding: 7px 10px 7px 6px;
  /* text-align: center; */
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-size: 200% auto;
  color: white !important;
  box-shadow: 0 0 20px #eee;
  border-radius: 4px;
  /* display: block;*/
  line-height: normal;
  font-size: 12px;
  position: relative;
}

[id="global-main-search"] .common-btn {
  width: max-content;
  display: block;
}
.forecast-copyright-grid {
  padding: 7px 12px 7px 12px;
}
.common-btn:hover,
.forecast-copyright-grid:hover,
.manual-save:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}
.common-btn i {
  position: relative;
  padding: 0 10px 0 5px;
  margin-right: 5px;
}
.common-btn i::after {
  content: "";
  position: absolute;
  top: -10px; /* match td padding */
  bottom: -10px; /* match td padding */
  right: 0;
  width: 1px;
  background-color: #eee;
}
.common-btn .fa-file-excel {
  color: #ffffff !important;
}
button.common-btn {
  cursor: pointer;
}
.admin-search-container {
  display: flex;
}

table.nn-table-border {
  border-collapse: collapse !important;
  /* width: fit-content; */
  margin-top: 5px;
}

table.nn-table-border td,
table.nn-table-border th {
  border: 1px solid #ccc !important;
  padding-top: 6px;
  padding-bottom: 6px;
}
table.nn-table-border th {
  background-color: #dce9f9;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ebf3fc),
    to(#dce9f9)
  );
  position: sticky;
  top: 0;
  text-align: left;
}

table.SavedChartTable {
  border-collapse: collapse;
  width: auto !important;
  min-width: 350px;
}

table.SavedChartTable td,
table.SavedChartTable th {
  border: 1px solid #ccc !important;
  padding: 5px 0 5px 5px;
}

table.SavedChartTable tr td:not(:first-child) {
  text-align: center;
  vertical-align: middle;
}

.expandableTable-count {
  font-size: 12px;
}
/*  Code for Ai Button and Menus */

.ai-button-container {
  display: inline-block;
  position: relative;
  margin-left: 10px;
}

.ai-toggle-button {
  /* padding: 8px 16px;
  font-size: 12px; */
  cursor: pointer;
  /* background-color: #1779ba;
  color: white !important;
  border: none; */
  /* border-radius: 5px; */
  /* display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.3s ease; */
}

/* .ai-toggle-button:hover {
  background-color: #055c96;
} */

.ai-toggle-button i {
  transition: transform 0.3s ease;
}

.ai-links-container {
  position: absolute;
  left: 100%;
  display: flex;
  gap: 10px;
  top: 50%;
  transform: translateY(-50%);
  /* overflow: hidden; */
  width: 0px;
  transition: width 0.5s ease;
  white-space: nowrap;
  padding-left: 10px;
}

.ai-links-container a,
.ai-translate-dropdown {
  text-decoration: none;
  background-color: #2578b4;
  color: white;
  padding: 8px 15px;
  border-radius: 5px;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.5s ease;
  cursor: pointer;
  position: relative;
  font-size: 12px;
}

.ai-links-container a:hover,
.ai-translate-dropdown-content a:hover {
  color: #fff;
}

.ai-links-container.active {
  width: 350px;
}

.ai-links-container.active a,
.ai-links-container.active .ai-translate-dropdown {
  opacity: 1;
  transform: translateX(0);
}

.ai-translate-dropdown {
  position: relative;
  background-color: #ff9800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  cursor: pointer;
}

.ai-translate-dropdown i {
  margin-left: 5px;
}

.ai-translate-dropdown-content {
  display: none;
  position: absolute;
  top: 35px;
  left: 0;
  background-color: white;
  border-radius: 5px;
  min-width: 125px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
}

.ai-translate-dropdown-content a {
  display: block;
  padding: 8px;
  background-color: #1779ba;
  color: white;
  text-align: center;
  border-bottom: 2px solid #eee;
  transition: background 0.3s ease;
}

.ai-translate-dropdown-content a:last-child {
  border-bottom: none;
}

.ai-translate-dropdown-content a:hover {
  background-color: #0056b3;
}

/* Ends Here */
/* Child Window CSS */
.child-contentcontainer {
  padding: 15px;
}
.child-contentcontainer table {
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  font-size: 12px;
}
.child-contentcontainer table thead {
  background: #dce9f9;
}
.child-contentcontainer table thead th {
  padding: 15px 0 15px 15px;
}

.child-contentcontainer table td {
  padding: 15px 0 15px 15px;
}

/*--------*/
.decline-with-message-reply-btn {
  background-color: #1f74b0;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  margin: 7px 0 0 5px;
  text-align: center;
}
.decline-with-message-reply-btn i {
  font-size: 25px;
  color: #ffffff;
  margin: 0 0 16px 0;
}
.decline-with-message-reply-input input {
  padding-left: 5px;
}
.rm-expandable-table {
  width: 100%;
  border-collapse: collapse;
}
.rm-expandable-table thead {
  background-color: #dce9f9;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ebf3fc),
    to(#dce9f9)
  );
}

.rm-expandable-table th,
.rm-expandable-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.rm-expandable-table th {
  /* background-color: #f4f4f4; */
  text-align: center;
}

.rm-expandable-table tbody tr:nth-child(even) {
  background-color: transparent;
}

.group-row {
  /* background-color: #e9ecef; */
  background-color: #f1f1f1;
  cursor: pointer;
  font-weight: bold;
}

.group-row span {
  margin-right: 8px;
  font-size: 16px;
}

.hidden {
  display: none;
}

.captcharemembercontainer {
  clear: both;
  padding: 5px 0 0 0;
}
.captcharemembercontainer label {
  font-size: 12px;
}

.ai-loader-gif-container {
  display: inline-block;
  padding: 0 0 0 10px;
}
.ai-loader-gif-container img {
  margin-top: -10px !important;
}
.hintNotes {
  font-size: 10px;
  font-style: italic;
  color: #959595;
  padding: 3px 0 0 6px;
}

.sort-number {
  color: #cc0133;
}
#password_details table tr td:nth-child(2) {
  display: ruby-text;
}
#password_details table tr i {
  margin-left: 10px !important;
}
input#btn:disabled,
#password_details input[type="button"]:disabled {
  height: 24px !important;
  background-color: #d4d4d4;
}
.messagenotificationcontainer {
  padding-top: 5px;
}
.msg-content-container {
  text-align: left;
  padding: 0 10px 15px 15px;
  border-bottom: 1px solid #c3d8f4;
  margin: 0 0 5px -15px;
}
.from-info-container {
  /*text-align: right; */
  /* font-style: italic; */
  /* font-size: 10px; */
  /* color: #9d9d9d; */
  /* border-bottom: 1px solid #c3d8f4;
  margin: 0 0 5px -15px; */
  padding: 0 0 5px 0;
  font-weight: bold;
}
.replyContainer {
  display: ruby;
}
.replyContainer input {
  width: 210px;
}
.replyContainer a {
  margin-left: 5px;
}
.settingscpw input[type="button"],
#password_details input[type="button"],
#consent_notice input[type="button"] {
  background-color: #3498db;
  color: #fff !important;
  padding: 5px 8px;
  border: none;
  margin: 5px 2px 0 2px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  text-shadow: none;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 4px;
  /* min-height: 1em; */
  /* border-bottom: 0px !important; */
}

.settingscpw table td {
  min-width: 175px;
}

[id$="user_region_mapping"] table {
  width: auto !important;
}

.date-from-to-label {
  color: rgb(128, 0, 0);
  font-weight: bold;
  /*font-size: 14px;*/
}
.date-from-to-container {
  padding-right: 40px;
  padding-left: 30px;
  font-size: 15px;
}
.date-from-section {
  padding-right: 35px;
}
.date-to-section {
  padding-left: 40px;
  min-width: 195px;
  display: inline-block;
}
.apply-inactive {
  background-color: #d4d4d4 !important;
  color: #fff;
}
.bordertdGE textarea {
  width: 80% !important;
  height: 250px !important;
}

textarea[data-htmleditor="yes"] {
  width: 100% !important;
  height: 500px !important;
}
.dataTables_wrapper table.dataTable th {
  text-align: center;
  white-space: nowrap;
}
.clipTds {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box !important;
}
.clipTd {
  max-width: 250px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*--------*/
tr.DTRowHighlight,
tr.DTRowHighlight td {
  background-color: #f1ffea !important;
}

#ai-question::placeholder {
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
}
.fieldsDivContainer {
  /* background-color: #a3a3a3;
  width: fit-content;
  padding: 8px 10px 8px 10px;
  border-radius: 8px;
  margin: 5px 3px; */
  /*padding: 0 0 8px 0;*/
  margin: 0 0 22px 0;
  color: #fff;
  float: left;
}
.fieldsDivContainer a {
  color: #fff !important;
  padding: 8px 10px 8px 10px;
  background-color: #a3a3a3;
  border-radius: 8px;
  margin: 5px 3px 10px 3px;
}
.fieldsDivContainer a:hover {
  background-color: #1779ba;
}
.ai-request-textarea-container {
  float: right;
  clear: both;
  /*width: 60%;*/
}
.width100 {
  width: 100%;
}
.width60 {
  width: 60%;
}
.ai-generate-template-note {
  font-size: 10px;
  color: #8b8b8b;
  font-style: italic;
  padding: 15px 5px 0px 5px;
}
.generate-btn-disabled {
  pointer-events: none;
  cursor: default;
  background: #c7c7c7 !important;
  box-shadow: none !important;
}
.ai-request-fields-container,
.ai-request-template-container {
  float: left;
  /*display: flex;*/
  width: 40%;
}
.ai-request-fields-container {
  padding: 10px;
}
.ai-request-fields-container-grid {
  /* padding: 10px 10px 10px 0; */
  display: ruby;
}
.ai-request-template-textarea {
  /*width: 300px;*/
  width: 95%;
  height: 100px;
}
.ai-request-template-buttons {
  padding-top: 15px;
}
#waiting-process {
  top: 0;
  display: block;
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.ai-question-text-container {
  border-radius: 15px;
  /* border: 1px solid #ccc; */
  background-color: #f1f1f1;
  padding: 5px 0 5px 15px;
}
.ai-question-text {
  clear: both;
  white-space: pre-line;
}
.ai-answer-text-container {
  padding: 5px 0 5px 15px;
  margin: 5px 0 5px 0;
  border-radius: 15px;
  background-color: #d9e9f7;
  width: 98%;
  float: right;
}
.ai-answer-text {
  clear: both;
}
.template-title {
  display: contents;
}
.response-title,
.template-title {
  font-weight: bold;
  line-height: 20px;
  color: var(--title-font-color);
  float: left;
}
.response-title-buttons {
  float: right;
  padding: 2px 15px 0 0;
}
.final-output-content {
  padding: 5px 0 5px 2px;
  /*border: 1px solid #ccc;
  background-color: #f2f2f2;*/
  margin: 5px 0 0 0;
  display: flow-root;
}
.final-output-content-notes {
  padding: 5px 0 5px 2px;
  /*border: 1px solid #ccc;
  background-color: #f2f2f2;*/
  margin: 5px 0 0 0;
  /*display: inline-block;*/
  clear: both;
}
.ai-request-textarea {
  width: 450px;
  height: 220px;
}
.ai-request-textarea-gridrow,
.ai-request-textarea-gridmain {
  /*width: 450px;*/
  width: 98%;
  height: 220px;
}
.ai-request-textarea-navimain {
  width: 100%;
  height: 220px;
}
.ai-request-submitbtn-container {
  padding: 10px 10px 15px 0;
  clear: both;
  /* text-align: right; */
}
.ai-copy-icon .fa-copy,
.ai-edit-icon .fa-edit,
.ai-info-icon .fa-question-circle,
.ai-progress-icon .fa-info-circle,
.ai-feedback-icon .fa-thumbs-up,
.ai-feedback-icon .fa-thumbs-down,
.ai-source-icon .fa-folder-plus {
  /* font-size: 12px; */
  transition: transform 0.3s;
}

.nn-ai-chat-buttons-container {
  display: flex;
  gap: 10px;
}

/* Question action icons (copy / edit) sit on their own row, right-aligned,
   below the right-floated question bubble — clear the float so they don't
   ride up into the empty space beside the bubble. */
.nn-ai-chat-question-buttons {
  clear: both;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.ai-copy-icon:hover .fa-copy,
.ai-edit-icon:hover .fa-edit,
.ai-info-icon:hover .fa-question-circle,
.ai-progress-icon:hover .fa-info-circle,
.ai-feedback-icon:hover .fa-thumbs-up,
.ai-feedback-icon:hover .fa-thumbs-down,
.ai-source-icon:hover .fa-folder-plus {
  transform: scale(1.2); /* Scale up the icon on hover */
}

.ai-request-submitbtn {
  padding: 6px 8px;
  border-radius: 3px;
  border: none;
  color: #fff !important;
  background: linear-gradient(180deg, #1779ba 0%, #1779ba 100%);
  box-shadow:
    0px 0.5px 1.5px #1779ba,
    inset 0px 0.8px 0px -0.25px #1779ba;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-weight: normal;
  font-size: 11px;
}
#waiting-process {
  width: 100%;
  padding-left: 50%;
  min-height: 100px;
  padding-top: 25px;
  display: none;
}
.ai-content-preview {
  margin: 10px 2px 5px 2px;
  border-radius: 15px;
  background-color: #d9e9f7;
  padding: 10px 5px 10px 15px;
}
.ai-content-preview-text {
  clear: both;
}
.template-content-info {
  clear: both;
  border-radius: 10px;
  border: 1px solid #c7c7c7;
  padding: 5px 0 5px 10px;
  font-style: italic;
  background-color: #f4f4f496;
  margin: 0 0 5px 0;
  color: #3d3d3d;
}
/*---- Chat Class ------ */
.ChatFrameDivContainer {
  position: fixed;
  right: 0px;
  bottom: 0px;
  width: 500px;
  height: 500px;
  background-color: white;
  padding: 15px 0 0 0;
  margin: 0 15px 25px 0;
  border: 1px solid #ccc;
}
.ChatWindowTitle {
  padding: 0 10px 10px 10px;
  font-size: 14px;
  font-weight: bold;
  color: #4a7483;
}
.ChatFrameDivContainerContentSection {
  /*height: 85vh;*/
  height: 500px;
  /* overflow-y: auto; */
  clear: both;
  position: relative;
}
.ChatHistorySection {
  min-height: 300px;
  border: 1px solid #ccc;
}
.ChatComposeSection {
  position: absolute;
  bottom: 50px;
}
.ChatComposeSection textarea {
  width: 420px !important;
}
.ChatTextareaSection {
  float: left;
}
.ChatEnterButtonSection {
  float: right;
  background-color: cadetblue;
  padding: 25px 5px 25px 5px;
  margin: 5px 0px;
}
/*----------- */

.calendar-table select,
.calendar-time select {
  min-width: 1px !important;
  padding-right: 20px !important;
}
.calendar-time select {
  appearance: auto;
  width: 65px !important;
}
.daterangepicker .drp-buttons .btn {
  background-color: #0088cc;
  color: #fff;
}
table.table-condensed thead th,
table.table-condensed tbody td {
  padding: 0px;
}

input[type="text"]#searchstr {
  float: left;
}
a img[src*="magnifierSearch"] {
  padding-top: 10px;
  padding-left: 5px;
  width: 20px;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  padding-right: 18px !important;
}
.chat-icon i {
  font-size: 20px;
}
.missedcall-icon {
  font-size: 15px;
  padding: 0 5px;
  color: #cc0133;
}
.meeting-icon {
  font-size: 13px !important;
  background-color: white !important;
  color: #1779ba !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
.meeting-icon :hover {
  background-color: #ffffff !important;
  color: #1779ba !important;
}
.notification-container {
  background-color: #2196f3;
  color: white;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notification-button {
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  margin-left: 10px;
}

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

.callwindow table tbody th,
.callwindow table tbody td {
  padding: 0;
}
.callwindow table tbody td:nth-child(2),
.callwindow table tbody td:nth-child(3) {
  text-align: center;
}
.callwindow table {
  display: inline-table;
}
.call-added-uses-close-btn {
  margin: -6px 0 0 6px;
  position: absolute;
}
.call-added-uses-close-btn i {
  color: #ffffff;
}
#minimize-btn,
#maximize-btn {
  padding-right: 5px;
}
.CallFrameDivContainer {
  /* position: fixed; */
  right: 0px;
  /* bottom: 55px; */
  /*width: 500px;*/
  /* height: 500px; */
  background-color: white;
  padding: 15px 0 0 0;
  /* margin: 0 15px 70px 0; */
  margin: 0 0 0 0;
  border: 1px solid #ccc;
}
.CallFrameDivContainer-minimize {
  height: 50px !important;
  width: 225px !important;
  margin: 0 100px -30px 0 !important;
  background-color: #e0e0e0 !important;
}
.CallFrameDivContainerContentSection {
  height: 92vh;
  /* height: 500px; */
  /* overflow-y: auto; */
  clear: both;
}
.CallWindowCloseIconContainer {
  margin: 0 5px 0 0;
  cursor: pointer;
}
.CallWindowTitle {
  padding: 0 10px 10px 10px;
  font-size: 14px;
  font-weight: bold;
  color: #4a7483;
}
.addtocallcontainer {
  cursor: pointer;
}
.concalltoadd {
  font-size: 22px !important;
}
.concalladded {
  font-size: 22px !important;
  color: #a7a7a7;
  pointer-events: none;
}
.directCall,
.MakeCall,
.socket-call-icon {
  display: inline-block;
  background-color: #009c00;
  color: #fff;
  border-radius: 50% !important;
  width: 20px;
  height: 20px;
  padding: 3px 0 0 0 !important;
  -webkit-box-shadow: 4px 4px 6px -5px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 4px 4px 6px -5px rgba(0, 0, 0, 0.75);
  box-shadow: 4px 4px 6px -5px rgba(0, 0, 0, 0.75);
}
.directCall:hover,
.MakeCall:hover,
.socket-call-icon:hover {
  background-color: #008600;
  color: #ffffff;
}
.callinitontainer {
  /*display: flex;*/
}
.makeCallButton {
  text-align: right;
  padding: 10px;
}
.calluserlist {
  display: flex;
  float: left;
}
.call-added-users {
  background-color: #3498db;
  width: fit-content;
  padding: 8px 20px 8px 10px;
  border-radius: 8px;
  margin: 5px 3px;
  color: #fff;
}
.notification-title {
  /*background-color: #dce9f9; */
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ebf3fc),
    to(#dce9f9)
  );
  font-family: var(--font-family-base);
  font-weight: bold;
  padding: 2px 0 5px 10px;
  font-size: 14px;
}
.contextualCustomEl:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}
.viewallcontainer {
  text-align: center;
  padding: 15px 0 5px 0;
}
.notifycount {
  /* top: 2px; */
  /*right: 5px;*/
  /* margin: 0 0 0 8px;
  position: absolute;
  border: 1px solid #ff0000;
  border-radius: 50%;
  background-color: #ff0000;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 2px;
  width: 20px;
  height: 20px;
  text-align: center; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* margin-left: 6px; */
  border: 1px solid #ff0000;
  border-radius: 50%;
  background-color: #ff0000;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  width: 20px;
  height: 20px;
  margin: -5px 0 0 -2px;
}
.nn-nonotifications {
  text-align: center;
  font-style: italic;
  color: #6f6f6f;
  border-bottom: 1px solid #ccc;
  padding: 0 0 10px 0;
}
.nn-notifications-content .customtooltip {
  cursor: help;
}
.close-jq-toast-single {
  z-index: 100;
}
.nn-notification-time {
  font-style: italic;
  color: #7c7c7c;
  padding: 5px 0 0 0;
}
.nn-notification-time-custom {
  font-style: italic;
  color: #7c7c7c;
  padding: 5px 0 5px 0;
  text-align: right;
  border-bottom: 1px solid #ccc;
}
.notificationscontainer {
  padding: 30px 5px 0px 10px;
}
.notificationscontainer-custom {
  padding: 15px 15px 0px 0px;
}
.notificationscontainer-custom div {
  padding-left: 10px;
}
.nn-notification-alert {
  color: #cc0033 !important;
}
.nn-notification-notify {
  color: #1777be !important;
}
.nn-notification-reminder {
  color: #ff6600 !important;
}
.nn-notification-success {
  color: #018622 !important;
}
.nn-notification-message {
  color: #23215f !important;
}

.nn-notification-title-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  border-bottom: 1px solid #ccc;
  width: 100%;
  background-color: #e0ebf9;
  padding: 8px 0 0px 10px;
}
.nn-notification-title-icon h2 {
  padding: 0 0 0 10px;
}
.nn-whowillbenotified {
  border-top: 1px solid #ccc;
  margin: 5px 0 0 0;
  padding: 5px 0 0 0;
}
.nn-whowillbenotified-custom {
  padding: 5px 0 0 0;
}
.nn-notification-gen-title {
  font-weight: bold;
}
.jq-toast-heading {
  border-bottom: 1px solid #ccc;
  margin: 0 0 10px 0;
  padding: 0 0 10px 0;
}
.notificationclosebtn {
  position: absolute;
  top: 2px;
  right: 10px;
}
.TreeviewTextareaContainer {
  float: left;
  width: 95%;
}
.TreeviewChangehistoryIconContainer {
  padding: 20px 15px 0 0;
  float: right;
}
.webinarListcontainer {
  clear: both;
  overflow-y: auto;
  height: 400px;
}
.WebinarSubContainer {
  padding: 0 10px;
}
.Webinar-Title {
  font-size: 12px;
  font-weight: normal;
  padding: 0 0 6px 0;
}
.Webinar-Date {
  padding: 0 0 10px 0;
  border-bottom: 1px solid #ccc;
  margin: 0 0 10px 0;
}
.Webinar-Date span {
  padding: 0 3px;
}
.Webinar-Date span i {
  color: #025a73;
}
.Webinar-Date span i:hover {
  color: #cc0133;
}

.dashboardWebinarCopy {
  cursor: pointer;
}
.serversearchtext {
  color: #b40000;
  font-weight: 900;
}
.userDueActive {
  font-weight: bold;
  color: #b40000;
}
.userlistcontainer {
  clear: both;
  white-space: nowrap;
  height: 400px;
  overflow: auto;
}
.iconBorder {
  border: 1px solid #025a73;
  /* aspect-ratio: 3/2; */
  border-radius: 5px;
  padding: 2px 5px;
  /* margin-left: 8px; */
}
/* Custom Tree CSS STarts here */
.tree {
  --spacing: 1.2rem;
  --radius: 5px;
  margin-left: 2px;
}

.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
  line-height: 22px;
}

.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
}

.tree ul li {
  border-left: 2px solid #ddd;
}

.tree ul li:last-child {
  border-color: transparent;
}

.tree ul li::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -2);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  border: solid #ddd;
  border-width: 0 0 2px 2px;
}

.tree summary {
  display: block;
  cursor: pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker {
  display: none;
}

.tree summary:focus {
  outline: none;
}

.tree summary:focus-visible {
  outline: 1px dotted #000;
}

.tree li::after,
.tree summary::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius));
  left: calc(var(--spacing) - var(--radius) - 1px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  border-radius: 50%;
  background: #1779bac9;
}

.tree li.activenode::after {
  background: #ff0000;
}

.tree summary::before {
  z-index: 1;
  background: #696 url("expand-collapse.svg") 0 0;
}

.tree details[open] > summary::before {
  background-position: calc(-2 * var(--radius)) 0;
}
.TreeHelpTitle {
  font-size: 15px;
  font-weight: bold;
  color: #800000;
}
.treeviewtextarea {
  width: 100% !important;
  min-height: 100px !important;
  margin: 10px 0 5px 0px;
}
/*-------------------------*/
.listspan i {
  color: #025a73;
  padding: 0 3px;
}

.listspan i:hover {
  color: #cc0133;
}
.closeIcon {
  /*position: absolute;
  top: 5px;
  right: 8px;
  font-size: 18px;*/
  font-size: 12px;
  text-align: right;
  margin: 0 10px 10px 0;
}

.closeIcon .fa-times {
  color: #ffffff;
  cursor: pointer;
}

.dashboardTreeIconLink {
  cursor: pointer;
}

summary {
  padding: 1rem;
  display: block;
  padding-left: 1.5rem;
  position: relative;
  cursor: pointer;
}

summary:before {
  content: "";
  border-width: 0.4rem;
  border-style: solid;
  border-color: transparent transparent transparent #000;
  position: absolute;
  top: 1.1rem;
  left: 0.5rem;
  transform: rotate(0);
  transform-origin: 0.2rem 50%;
  transition: 0.25s transform ease;
}

details[open] > summary:before {
  transform: rotate(90deg);
}

.sr-title-bg {
  background-color: #dce9f9 !important;
}
.sr-sub-title {
  font-weight: bold;
}
.sr-history-section {
  background-color: #f6f6f6 !important;
  font-style: italic;
}
table.sr-main-tbl tbody tr:nth-child(even) {
  background-color: transparent;
}
.sr-main-tbl {
  border: 1px solid #d9d9d9;
  border-collapse: collapse;
  border-spacing: unset;
}
table.sr-main-tbl,
table.sr-main-tbl th,
table.sr-main-tbl td {
  border: 1px solid #d9d9d9;
}
.sr-main-container {
  border: 1px solid #ccc;
}
#frmt {
  padding: 15px 0 20px 15px;
  border-right: 1px solid #d9d9d9;
}
#moduleContentcanvas {
  padding: 10px;
}
.callbutton {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: inline-block;
  color: white;
  margin-right: 25px;
  margin-left: 10px;
}

.hangupbtn {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  color: white;
  margin-right: 2px;
  margin-left: 2px;
  background-color: #9e2313;
}
.hangup-icon-container {
  text-align: center;
  vertical-align: middle;
  padding-top: 1px;
}
.size-8 {
  font-size: 8px !important;
}

.answer,
.socket-answer {
  background-color: #2ec800;
}
.reject,
.socket-reeject {
  background-color: #9e2313;
}

.phone-icon-container {
  /* top:30%;
  left:30%;
  position: relative; */
  text-align: center;
  vertical-align: middle;
  padding-top: 14px;
}

.phone-icon-container i {
  font-size: 22px;
  color: white;
}

.jqte_editor {
  min-height: 200px;
  resize: auto;
}
.jqte * {
  font-family: var(--font-family-base);
  font-size: 12px;
}

table.channelconv td {
  word-break: break-word;
}
.customlengthdropdown {
  /*float: right;*/
}

.customlengthdropdown select {
  width: 60px !important;
  min-width: 60px !important;
  margin: 0 5px;
}

.button-10 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 8px;
  font-family: var(--font-family-base);
  border-radius: 3px;
  border: none;
  color: #fff !important;
  background: linear-gradient(180deg, #1779ba 0%, #1779ba 100%);
  background-origin: border-box;
  box-shadow:
    0px 0.5px 1.5px #1779ba,
    inset 0px 0.8px 0px -0.25px #1779ba;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin: -1px 0 0 10px;
  font-weight: normal;
  font-size: 11px;
}

.button-10:focus {
  box-shadow:
    inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2),
    0px 0.5px 1.5px rgba(54, 122, 246, 0.25),
    0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
  outline: 0;
}

[id^="editpage"] table tbody tr:nth-child(even),
[data-formname="email-edit-page"] table tbody tr:nth-child(even) {
  background-color: #f6f7fb;
}

#editpageplusbtn .fa-plus-square,
#editpageplusbtn .fa-minus-square {
  padding: 4px 0 0 10px;
}

.nonmandatoryhide {
  display: none;
}

table.dataTable tbody td {
  white-space: pre-line;
}

.managemyteamshelp {
  vertical-align: top;
}
/*------------------  Loading CSS Starts Here -------------------*/
@keyframes spinner {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}
.spin::before {
  animation: 1.5s linear infinite spinner;
  animation-play-state: inherit;
  border: solid 5px #cfd0d1;
  border-bottom-color: #1c87c9;
  border-radius: 50%;
  content: "";
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}

.pagecentered {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
}
/*---------------------- Ends Here -----------------------------*/
.mgteams {
  border: 1px solid #025a73;
  aspect-ratio: 3/2;
  border-radius: 5px;
  padding: 2px 5px;
  margin-left: 8px;
  /* background-color: #025a73; */
  /* color: #fff;*/
}
.runasdashboardtitle {
  padding: 0px 5px;
}
.nnrunasuserdashboardcontainer,
.nnrunasuserdashboardcontainer [id^="toggleTextnnrunasuserdashboard"] {
  display: flex !important;
  flex-wrap: wrap;
}

.runasdadboarddivcontainer {
  /* border: 2px solid rgb(204, 204, 204);
  border-radius: 10px; */
  width: 400px;
  height: 450px;
  margin: 5px 15px 15px 15px;
  min-height: 400px;
  /* overflow-y: auto;
  overflow-x: auto; */
  padding: 0px 0px 8px 0px;
  position: relative;
  background-color: #fff;
  box-shadow:
    rgba(0, 0, 0, 0.19) 0px 10px 20px,
    rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

/*
.runasdadboarddivcontainer {
  border: 2px solid rgb(204, 204, 204);
  border-radius: 10px;
  padding: 8px 5px 8px 8px;
  min-width: 200px;
  float: left;
  width: 24%;
  margin: 0px 10px 10px 0px;
  min-height: 200px;
  height: 350px;
  overflow-y: auto;
}
.runasdadboarddivcontainer:nth-of-type(4n+5) {
  clear: both;
}*/

#nnrunas label {
  font-size: 12px;
  font-style: italic;
  font-weight: bold;
  padding-bottom: 1px;
  margin-bottom: -5px;
  color: #545454;
  cursor: pointer;
}

.summarycontainerbts {
  background-color: #e1ecf4;
  border-radius: 3px;
  border: 1px solid #7aa7c7;
  box-shadow: rgba(255, 255, 255, 0.7) 0 1px 0 0 inset;
  box-sizing: border-box;
  color: #39739d;
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15385;
  margin: 0;
  outline: none;
  padding: 4px 0.4em;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  white-space: nowrap;
}

.summarycontainerbts:hover,
.summarycontainerbts:focus {
  background-color: #b3d3ea;
  color: #2c5777;
}

.summarycontainerbts:focus {
  box-shadow: 0 0 0 4px rgba(0, 149, 255, 0.15);
}

.summarycontainerbts:active {
  background-color: #a0c7e4;
  box-shadow: none;
  color: #2c5777;
}

.jq-toast-wrap table tbody,
.jq-toast-wrap table tbody tr:nth-child(even) {
  border: 0px;
  background-color: unset !important;
}

.jq-toast-wrap table ol {
  margin-left: 20px !important;
}

table#homepagesummaryupdatetable thead,
table#homepagesummarhistoryable thead {
  background-color: #dce9f9;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ebf3fc),
    to(#dce9f9)
  );
}
table#homepagesummaryupdatetable > tbody > tr > td,
table#homepagesummaryupdatetable > thead > tr > th,
table#homepagesummarhistoryable > tbody > tr > td,
table#homepagesummarhistoryable > thead > tr > th {
  border-left: 1px solid #ccc;
}
/*#legendparentcontainer
{
  float: left;
  width: 70%;
}

#dashboardsummaryparentcontainer
{
  float: right;
  width: 30%;
}*/
.dataTables_filter {
  float: left !important;
  text-align: left !important;
  padding: 0px 15px 0px 10px;
}
table.dataTable tbody th,
table.dataTable tbody td {
  padding: 8px 6px;
}
.ybge {
  position: relative;
}

.ybge:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 4px solid #f85f00;
  border-right: 4px solid #f85f00;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
}
.cellgridedit a {
  text-decoration: underline !important;
  color: #1e96b9 !important;
}

.cellgridedit a:hover {
  text-decoration: underline !important;
  color: #1e96b9 !important;
}
/* For Button background in the gridedit cell
.grideditbacakgroundimg
{
  position: relative;
}

.grideditbacakgroundimg::after{
  position: absolute;
  font-family: 'FontAwesome';
  content: "\f044";
  right: 4px;
  font-size: 13px;
  top: 4px;
  color: #bebebe;
}
*/
.rcbutton {
  cursor: not-allowed !important;
  background-color: #cacaca !important;
  pointer-events: none !important;
}

.helplink-support-container .input-group,
.helplink-support-container .input-group .button {
  margin-bottom: 0px !important;
}

.nnprofilelink {
  border-right: 0px;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 0px 12px 30px;
  color: #1779ba;
}

.nnprofilelink:hover {
  background-color: #fff !important;
}

.editpagebuttondisable {
  pointer-events: none;
  opacity: 0.5;
}
.editpagebuttondisable i {
  color: rgb(155, 155, 155) !important;
}

.tooltipster-content table {
  border-collapse: unset;
  margin-bottom: 0px;
}

.tooltipster-content tbody {
  background: #fefddf;
}

.tooltipster-content table ol {
  margin-bottom: 0px;
}

.contextualMenuItem.disabled {
  /*background-color: #dce9f9;*/
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ebf3fc),
    to(#dce9f9)
  );
  font-family: var(--font-family-base);
  font-weight: bold;
}
.contextualMenuItem.disabled {
  opacity: 1;
}

.contextualMenuItem.disabled:hover {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ebf3fc),
    to(#dce9f9)
  );
  font-family: var(--font-family-base);
  font-weight: bold;
  color: #000000;
}
.contextualMenuItem:hover {
  color: #000000;
}

[id^="editpage"] > [id^="hideimgbuttoneditpage"] i {
  padding-top: 5px;
}

/*---------------------------C3 CSS ---------------------- */
.c3 svg {
  font: 10px sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.c3 line,
.c3 path {
  fill: none;
  stroke: #000;
}

.c3 text {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.c3-bars path,
.c3-event-rect,
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid {
  shape-rendering: crispEdges;
}

.c3-chart-arc path {
  stroke: #fff;
}

.c3-chart-arc text {
  fill: #fff;
  font-size: 13px;
}

.c3-grid line {
  stroke: #aaa;
}

.c3-grid text {
  fill: #aaa;
}

.c3-xgrid,
.c3-ygrid {
  stroke-dasharray: 3 3;
}

.c3-text.c3-empty {
  fill: gray;
  font-size: 2em;
}

.c3-line {
  stroke-width: 1px;
}

.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: #fff;
}

.c3-selected-circle {
  fill: #fff;
  stroke-width: 2px;
}

.c3-bar {
  stroke-width: 0;
}

.c3-bar._expanded_ {
  fill-opacity: 0.75;
}

.c3-target.c3-focused {
  opacity: 1;
}

.c3-target.c3-focused path.c3-line,
.c3-target.c3-focused path.c3-step {
  stroke-width: 2px;
}

.c3-target.c3-defocused {
  opacity: 0.3 !important;
}

.c3-region {
  fill: #4682b4;
  fill-opacity: 0.1;
}

.c3-brush .extent {
  fill-opacity: 0.1;
}

.c3-legend-item {
  font-size: 12px;
}

.c3-legend-item-hidden {
  opacity: 0.15;
}

.c3-legend-background {
  opacity: 0.75;
  fill: #fff;
  stroke: #d3d3d3;
  stroke-width: 1;
}

.c3-title {
  font: 14px sans-serif;
}

.c3-tooltip-container {
  z-index: 10;
}

.c3-tooltip {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  empty-cells: show;
  -webkit-box-shadow: 7px 7px 12px -9px #777;
  -moz-box-shadow: 7px 7px 12px -9px #777;
  box-shadow: 7px 7px 12px -9px #777;
  opacity: 0.9;
}

.c3-tooltip tr {
  border: 1px solid #ccc;
}

.c3-tooltip th {
  background-color: #aaa;
  font-size: 14px;
  padding: 2px 5px;
  text-align: left;
  color: #fff;
}

.c3-tooltip td {
  font-size: 13px;
  padding: 3px 6px;
  background-color: #fff;
  border-left: 1px dotted #999;
}

.c3-tooltip td > span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
}

.c3-tooltip td.value {
  text-align: right;
}

.c3-area {
  stroke-width: 0;
  opacity: 0.2;
}

.c3-chart-arcs-title {
  /*dominant-baseline: middle;*/
  font-size: 1.3em;
}

.c3-chart-arcs .c3-chart-arcs-background {
  fill: #e0e0e0;
  stroke: none;
}

.c3-chart-arcs .c3-chart-arcs-gauge-unit {
  fill: #000;
  font-size: 16px;
}

.c3-chart-arcs .c3-chart-arcs-gauge-max,
.c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #777;
}

.c3-chart-arc .c3-gauge-value {
  fill: #000;
}
/*----------------------------------------------------*/
.pvtFilterBox h4 {
  margin: 10px;
}
.pvtFilterBox label {
  font-size: 12px;
}
.pvtFilterBox input {
  margin-left: 10px !important;
}

.pvtFilterBox p {
  padding: 1px 0;
}
.pvtFilterBox button {
  background-color: #1779ba;
  padding: 5px 10px;
  color: #ffffff !important;
  margin: 5px;
  border-radius: 5px !important;
  cursor: pointer;
}

.pvtUnused {
  background: #ffffff !important;
}

#pivottable-container table {
  width: auto;
}

#id_password {
  display: initial !important;
  margin-top: 5px;
  margin-bottom: 3px;
}

#togglePassword {
  margin-left: 2px;
  cursor: pointer;
}

.rowgrouptitlediv {
  background-color: #a1a1a1;
  width: 100%;
  margin: -6px -10px;
  padding: 5px;
  color: #fff;
  font-weight: bold;
}
.rowgrouptitletr td {
  background-color: #a1a1a1 !important;
}
.rowgrouptitletr {
  padding: 5px;
  color: #fff;
  font-weight: bold;
}

.clonedthedforfilter {
  padding: 0px;
  background-color: #fff;
}
.clonedthedforfilter td {
  border-left: 1px solid #ccc;
  padding: 5px !important;
}
.select2-drop {
  width: auto !important;
}

.select2-container {
  width: 100%;
}

/* Keep Select2 width stable when global text-input rules fire on focus */
.select2-container,
.select2-drop,
.select2-container .select2-choice,
.select2-container-multi .select2-choices {
  box-sizing: border-box;
  max-width: 100%;
}

.select2-container input[type="text"],
.select2-drop input[type="text"],
.select2-search input,
.select2-search__field {
  width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.captcha-chat {
  padding-top: 5px;
}
.captcha-chat p.security {
  font-size: 13px;
  font-weight: bold;
}
.captcha-chat p {
  margin-bottom: 5px;
}
.captcha-chat p.wrong {
  color: #ff0000;
  font-weight: bold;
  font-size: 12px;
}

.captcha-chat i.fa-sync-alt {
  font-size: 15px;
  margin: 12px 0px 0px 10px;
}
.captcha-chat .homeloginbtn {
  margin: 5px 0px;
  padding: 7px 10px;
  border-radius: 5px;
}

p.wrong {
  display: none;
}

p.wrong.shake {
  display: block;
}

p.wrong.shake {
  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(1px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-2px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(2px, 0, 0);
  }
}

.controls img {
  height: 20px;
}

/*--------------------------------- 2fa----------------------------*/
.nn2faicon {
  float: left;
  padding-top: 4px;
  padding-right: 8px;
  color: #004c7f;
}
.nn2faicon i {
  font-size: 18px;
}
#nn2facontent div,
#nn2facontent label {
  font-size: 12px;
}
#nn2fabuttoncontainer {
  padding-top: 15px;
}
#nn2fabuttoncontainer a {
  margin-right: 10px;
}
.v-center {
  height: 100vh;
  width: 100%;
  display: table;
  position: relative;
  text-align: center;
}

.v-center > div {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  top: -10%;
}

.btn {
  font-size: 3vmin;
  padding: 0.75em 1.5em;
  background-color: #fff;
  border: 1px solid #bbb;
  color: #333;
  text-decoration: none;
  display: inline;
  border-radius: 4px;
  -webkit-transition: background-color 1s ease;
  -moz-transition: background-color 1s ease;
  transition: background-color 1s ease;
}

.btn:hover {
  background-color: #ddd;
  -webkit-transition: background-color 1s ease;
  -moz-transition: background-color 1s ease;
  transition: background-color 1s ease;
}

.btn-small {
  padding: 0.75em 1em;
  font-size: 0.8em;
}

.modal-box {
  display: none;
  position: absolute;
  z-index: 1000;
  width: 30%;
  background: white;
  border-bottom: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
}

.modal-box header,
.modal-box .modal-header {
  padding: 1.25em 1.5em;
  border-bottom: 1px solid #ddd;
}

.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 {
  margin: 0;
}

.modal-box .modal-body {
  padding: 0.5em 1.5em 0.1em 1.5em;
}

.modal-box footer,
.modal-box .modal-footer {
  padding: 1em;
  border-top: 1px solid #ddd;
  background: rgba(0, 0, 0, 0.02);
  text-align: right;
}

.modal-overlay {
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3) !important;
}

a.close {
  line-height: 1;
  font-size: 1.5em;
  position: absolute;
  top: 5%;
  right: 2%;
  text-decoration: none;
  color: #bbb;
}

a.close:hover {
  color: #222;
  -webkit-transition: color 1s ease;
  -moz-transition: color 1s ease;
  transition: color 1s ease;
}

/*----------------------------------------------------------------*/
.jq-toast-wrap {
  width: 300px !important;
}
.confirmactionbtncontainer {
  padding-top: 15px;
}

.confirmactionbtn {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
  text-shadow: none;
  /*margin-right: 12px;
  padding: 6px 12px;
  line-height: 1.42857143;*/
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 4px;
  min-height: 1em;
  /*margin-bottom: 4px;
  margin-left: 4px;*/
  border-bottom: 0px !important;
}

.yesbtn {
  background-color: #3498db;
  color: #fff !important;
  padding: 5px 8px;
}
.cancelbtn {
  background-color: #c7c7c7;
  color: #000 !important;
  padding: 5px 8px;
}

button.DTbuttonenabled {
  background-color: #025a73;
  color: #fff !important;
}
.fa-youtube {
  color: #ff0000 !important;
}
.tooltipster-sidetip .tooltipster-box {
  background: #f6f7fb;
  border: 1px solid #d8dde6;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.tooltipster-sidetip .tooltipster-content {
  color: #3e3e3c;
  line-height: 18px;
  padding: 10px 14px;
}

.tooltipster-sidetip .tooltipster-arrow-background {
  border: 10px solid transparent;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
  border-bottom-color: #f6f7fb;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
  border-top-color: #f6f7fb;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
  border-left-color: #f6f7fb;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
  border-right-color: #f6f7fb;
}

.tooltipster-sidetip .tooltipster-arrow-border {
  border: 10px solid transparent;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
  border-bottom-color: #d8dde6;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
  border-top-color: #d8dde6;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
  border-left-color: #d8dde6;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
  border-right-color: #d8dde6;
}

.customtooltip:hover .fa-question-circle,
.customtooltip:focus .fa-question-circle,
.cstmToolTip:hover .fa-question-circle,
.cstmToolTip:focus .fa-question-circle {
  color: #ba0517;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(186, 5, 23, 0.25);
}

.tilesnotification {
  color: #ff0000;
  font-size: 10px !important;
  margin: -5px 0px 0px 2px !important;
  padding-top: 5px !important;
}
.tileshelpcontent {
  color: #000000;
  font-size: 10px !important;
  margin: -5px 0px 0px 2px !important;
}
.helpcontentlink {
  display: table-cell;
}
.notificationdiv {
  text-align: right;
}
.notificationdiv a {
  padding: 5px 5px 0px 0px;
}
.notificationdiv a i {
  color: #7b7b7b;
}
.showall-plus i,
.hideall-minus i {
  font-size: 24px;
  padding: 0px 0px 0px 0px;
  margin: -6px;
}
.legendparent {
  border: 1px solid #ccc;
  margin: 10px 15px;
  box-shadow:
    rgba(0, 0, 0, 0.19) 0px 10px 20px,
    rgba(0, 0, 0, 0.23) 0px 6px 6px;
  /* width: 430px;
  height: 435px; */
  width: 100%;
  height: 435px;
  aspect-ratio: 430 / 435;
  max-width: 430px;
  box-sizing: border-box;
}
.tilessectiontitle {
  padding: 5px;
  color: #fff;
  font-weight: 600;
}

.tilessectioncontainer {
  overflow-y: auto;
  max-height: 405px;
  padding: 0 0 0 10px;
  scrollbar-width: thin;
}

.legendlabel {
  padding: 2px 10px 0 5px;
}

.legendbox {
  width: 15px;
  height: 15px;
  float: left;
}

/* div#search-contextmenu {
  background-color: #1779ba;
  border-right: 1px solid white;
}

div#search-contextmenu i {
  color: white;
  font-size: 18px;
} */
.disabled-hyperlink {
  pointer-events: none;
  background-color: #e2e2e2;
}

.unbookmarkicon {
  color: #608a32;
}

.dataTables_paginate {
  float: left !important;
}

.home-div-width {
  width: 500px;
}

.dashboarditle {
  border: 1px solid #f1f1f1;
  padding: 3px 5px;
  font-weight: bold;
  width: 100%;
  background-color: #fefefe;
}

.icondisabled {
  display: none;
  /*cursor: not-allowed;
  color: #ccc;*/
}

.contextualMenuItem i.fa-table {
  color: #025a73;
}
.contextualMenuItem i.fa-file-alt {
  color: #4e0707;
}

.contextualMenu {
  min-width: 200px;
  z-index: 5;
}

#toggleTextnn_rest_integrations table {
  width: auto;
}
#toggleTextnn_rest_integrations table tbody tr:first-child {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ebf3fc),
    to(#dce9f9)
  );
  line-height: 25px;
  border-bottom: 1px solid #ccc;
}
#toggleTextnn_rest_integrations table tbody tr th,
#toggleTextnn_rest_integrations table tbody tr td {
  border-right: 1px solid #ccc;
}
#toggleTextnn_rest_integrations table tbody tr:nth-child(even) {
  background-color: #f6f7fb;
}

.snapshotcomparesame {
  color: #018001;
  font-weight: bold;
}
.snapshotcomparedifferent {
  color: #e20404;
  font-weight: bold;
}
table.dataTable tbody tr.snapshotdiffrowchild td,
table.dataTable tbody tr.snapshotdiffrowchildsame td,
table.dataTable tbody tr.snapshotdiffrowchilddifferent td {
  background-color: #f7fbff;
  border-bottom: 1px solid #000;
  border-top: 1px solid #eaeaea;
}

.sso-azure {
  background: #eee url("../images/ms-pictogram.svg") no-repeat 5% 50%;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  height: 35px;
  padding-left: 40px;
  vertical-align: middle;
  width: 230px;
  padding-top: 11px;
}

.sso-azure:hover {
  background-color: #dfdfdf;
}

.sso-azure a {
  color: #000;
}

.jconfirm .jconfirm-box .jconfirm-buttons > button {
  margin-right: 12px;
}

.editpg-notes-save {
  color: #ffffff !important;
  border-radius: 10px;
  padding: 6px 10px;
  margin-top: 14px;
}

/* a.manual-save {
  border-radius: 5px;
  font-size: 11px;
  padding: 4px 8px;
  margin: 0px 2px 6px 10px;
  color: #fff; 
}
a.manual-save:hover {
  text-decoration: none;
  color: #e4e4e4;
} */

.container {
  /*display:flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-content: flex-start;
   align-items: stretch;*/
}

.box {
  /*width: 100px;
 height: 100px;*/
  margin: 5px;
  float: left;
}

/* --------------YouTube Embed Overlay------------------- */
.videoPlayerOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background-color: rgba(0, 0, 0, 0.8);
  transition-property: all;
  -moz-transition-property: all;
  -webkit-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  transition-duration: 0.25s;
  -webkit-transition-duration: 0.25s;
  -ms-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -moz-transition-timing-function: linear;
}
.videoPlayerOverlay .closeIcon {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 3rem;
  z-index: 200;
  padding: 10px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  width: 30px;
  height: 30px;
  transition-property: transform;
  -moz-transition-property: transform;
  -webkit-transition-property: transform;
  -o-transition-property: transform;
  -ms-transition-property: transform;
  transition-duration: 0.25s;
  -webkit-transition-duration: 0.25s;
  -ms-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  display: flex;
}
.videoPlayerOverlay .closeIcon img {
  width: 100%;
  height: auto;
}
.videoPlayerOverlay iframe {
  /*max-width: 853px;
  max-height: 480px;*/
  max-width: 90%;
  max-height: 90%;

  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
}
.videoPlayerOverlay.hiddenTransform {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  -webkit-transform: translateY(50px);
}
@media only screen and (min-width: 1200px) {
  .videoPlayerOverlay .closeIcon:hover {
    cursor: pointer;
    background: rgba(255, 255, 255, 1);
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
/* ------------------------------------------- */

/* on-Boarding*/

.onboarding-parentdiv {
  width: 425px;
  border: 1px solid #d1d1d1;
  border-radius: 10px;
  padding: 25px;
  /*margin-top:15px*/
  margin: auto;
}
.onboarding-title {
  font-size: 25px;
  font-weight: bold;
  padding: 0px;
}
.numberCircle {
  border-radius: 50%;
  width: 52px;
  height: 36px;
  padding: 3px;

  background: #fff;
  border: 5px solid #5097d0;
  color: #5097d0;
  text-align: center;

  font-size: 30px;
}
.onboarding-checkicon {
  color: #a0ce4e;
  font-size: 50px;
}
.onboarding-progress-containers {
  /*padding:10px 0px;*/
}
.onboarding-process-title {
  padding-left: 10px;
  text-align: left;
}
.line {
  width: 18px;
  height: 175px;
  border-right: 1px solid #ccc;
}

.onboarding-parentdiv div table tbody tr:nth-child(even) {
  border-bottom: 0;
  background-color: #fff;
}

.completed-icon {
  padding-left: 0px;
  padding-right: 0px;
  width: 52px;
}

.youtube-preview-thumbnail {
  width: 250px;
  /* height: 150px; */

  position: relative;
  display: inline-block;
}
.youtube-preview-thumbnail img {
  border: 1px solid #ccc;
  border-radius: 15px;
}

.youtube-preview-thumbnail .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
.youtube-preview-thumbnail:hover .img-top {
  display: inline;
}

/*------------------*/
table.dataTable {
  width: auto;
  margin: 0 0;
  border: solid #ccc 1px;
  border-collapse: separate;
  border-spacing: 0;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}
table.dataTable > tbody > tr > td,
table.dataTable > thead > tr > th {
  border-left: 1px solid #ccc;
  /*border-top: 1px solid #ccc;*/
  /*padding: 10px;
  text-align: left;*/
}
table.datTable th {
  white-space: nowrap;
}
table.dataTable thead {
  /*background-color: #dce9f9;*/
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ebf3fc),
    to(#dce9f9)
  );
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
  background-color: #f6f7fb;
}
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
  background-color: #f6f6f6;
}
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
  background-color: #fafafa;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
  position: unset;
}
table.dataTable thead th.control,
table.dataTable tbody td.control {
  padding: 0px;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
  padding-left: 10px;
}

nav .input-group {
  margin-bottom: 0em !important;
}
nav .input-group-field {
  border-radius: 15px 0px 0px 15px !important;
}
nav .input-group-button button {
  border-radius: 0px 15px 15px 0px !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #cacaca !important;
  font-style: italic !important;
  opacity: 0.5 !important;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #cacaca !important;
  font-style: italic !important;
  opacity: 0.5 !important;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #cacaca !important;
  font-style: italic !important;
  opacity: 0.5 !important;
}
input::placeholder,
textarea::placeholder {
  color: #cacaca !important;
  font-style: italic !important;
  opacity: 0.5 !important;
}

nav {
  border-bottom: 1px solid #e2e2e2;
  box-shadow:
    0 1px 5px 0 rgb(210 210 210 / 20%),
    0 2px 5px 0 rgb(146 146 146 / 19%);
}

nav .top-bar-left ul li:hover {
  background-color: #f8f8ff;
}

.top-bar,
.top-bar ul {
  background-color: #fff;
}

.position-left.is-transition-push {
  box-shadow: 13px 0 20px -13px rgb(10 10 10 / 25%);
}
.position-right.is-transition-push {
  box-shadow: 10px 0px 20px 20px rgb(10 10 10 / 25%);
}
.off-canvas {
  background-color: white;
}
.js-off-canvas-overlay {
  background: rgb(136 136 136 / 25%);
}

.accordion-menu ul li {
  padding: 5px 0px;
  margin-right: 20px;
}
.accordion-menu ul.submenu li:before {
  color: #f09336;
  content: "\00BB";
  font-size: 1.4em;
  font-weight: bold;
  float: left;
  margin: 2px 5px 0px 20px;
}
.accordion-menu ul.submenu li.navigationview:before,
.accordion-menu ul.submenu li.navigationreport:before,
.accordion-menu ul.submenu li.navigationchart:before,
.accordion-menu ul.submenu li.navigationextralinks:before {
  font-family: "Font Awesome 5 Free";
  font-size: 13px;
  padding: 4px 0px 0px 0px;
}
.accordion-menu ul.submenu li.navigationview:before {
  content: "\f0ce";
  color: #025a73;
}
.accordion-menu ul.submenu li.navigationreport:before {
  content: "\f15c";
  color: #4e0707;
  font-weight: 400;
}
.accordion-menu ul.submenu li.navigationchart:before {
  content: "\f080";
  color: #000;
}
.accordion-menu ul.submenu li.navigationextralinks:before {
  content: "\f0c1";
  color: #000;
}
.accordion-menu ul.submenu li.navigationcustomlink:before {
  color: #f09336;
  content: "\00BB";
  font-size: 1.4em;
  font-weight: bold;
  float: left;
  margin: 2px 5px 0px 20px;
}
.off-canvas.position-left.is-transition-push.is-open
  ul.accordion-menu
  > ul
  > li,
.off-canvas.position-left.is-transition-push.is-open
  ul.accordion-menu
  > ul
  > li
  a {
  color: #04279b;
  font-size: 13px;
  font-weight: bold;
}

.off-canvas.position-left.is-transition-push.is-openul.accordion-menu
  > ul
  > li
  > ul
  > li,
.off-canvas.position-left.is-transition-push.is-open
  ul.accordion-menu
  > ul
  > li
  > ul
  > li
  a,
ul.accordion-menu > ul > li {
  color: #5f5f5f;
  font-size: 12px;
  font-weight: normal;
}

.off-canvas.position-left.is-transition-push.is-open
  ul.accordion-menu
  > ul
  > li[aria-expanded="true"]
  > a {
  background-color: #04279b;
  color: #fff;
}

.off-canvas.position-left.is-transition-push.is-open
  ul.accordion-menu
  > ul
  > li
  > ul
  > li[aria-expanded="true"]
  > a {
  background-color: #e9e9e9;
}

.off-canvas.position-right.is-transition-push.is-open ul.accordion-menu > li,
.off-canvas.position-right.is-transition-push.is-open ul.accordion-menu > li a,
.off-canvas.position-right.is-transition-push ul.accordion-menu > li a {
  color: #04279b;
  font-size: 13px;
  font-weight: bold;
}

.off-canvas.position-right.is-transition-push.is-open
  ul.accordion-menu
  > li[aria-expanded="true"]
  > a {
  background-color: #04279b;
  color: #fff;
}

.off-canvas.position-right.is-transition-push.is-open
  ul.accordion-menu
  > li
  > ul
  > li,
.off-canvas.position-right.is-transition-push.is-open
  ul.accordion-menu
  > li
  > ul
  > li
  a {
  color: #5f5f5f;
  font-size: 12px;
  font-weight: normal;
}

.off-canvas.position-right.is-transition-push.is-open .accordion-menu li,
.off-canvas.position-right.is-transition-push .accordion-menu li {
  padding: 5px 0px;
}
.accordion-menu ul li a:hover {
  background-color: #e9e9e9;
}
.accordion-menu .nested.is-accordion-submenu {
  /*margin-left:0em*/
}

.accordion-menu
  .is-accordion-submenu-parent:not(.has-submenu-toggle)
  > a::after {
  border-color: #f09336 transparent transparent;
}

.accordion-menu .is-accordion-submenu-parent[aria-expanded="true"] > a::after {
  border-color: #fff transparent transparent;
}

.accordion-menu .parentnavigation[aria-expanded="true"] > a::after {
  border-color: #f09336 transparent transparent;
}

.nn-top-logo-text {
  /*background:url(../images/logo.gif) 0 0 no-repeat;*/
  /*height:50px; 
  text-indent:-99999em;
  overflow:hidden;*/
  border-bottom: 1px solid #e2e2e2;
  box-shadow: 0 5px 6px -3px #e2e2e2;
  color: #23215f;
}

table.nn-reports,
table.nn-snapshot {
  border-radius: 0px;
}

/*table.dataTable.nn-reports thead tr {
  /*background-color: #f8f8f8;*/
/*background-color:#1779ba
}*/

#singlepagemaindiv {
  padding-top: 1px;
}

/*
#myreports div.sectionname,
#myviews div.sectionname,
#mydashboards div.sectionname
{ 
  margin-bottom: 1rem;
  background-color: #f6f7fb;
  -webkit-box-shadow: 0 1px 1px 0 rgb(0 28 36 / 30%), 1px 1px 1px 0 rgb(0 28 36 / 15%), -1px 1px 1px 0 rgb(0 28 36 / 15%);
  box-shadow: 0 1px 1px 0 rgb(0 28 36 / 30%), 1px 1px 1px 0 rgb(0 28 36 / 15%), -1px 1px 1px 0 rgb(0 28 36 / 15%);
  box-shadow: 0 1px 1px 0 var(--awsui-color-shadow-medium, rgba(0, 28, 36, 0.3)),1px 1px 1px 0 var(--awsui-color-shadow-side, rgba(0, 28, 36, 0.15)),-1px 1px 1px 0 var(--awsui-color-shadow-side, rgba(0, 28, 36, 0.15));
  border-top: 1px solid #eaeded;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  padding:0px;
  min-width: 40%;
  display: inline-flex;
}

#myreports div.sectionname table, 
#myviews div.sectionname table,
#mydashboards div.sectionname table { 
  border-collapse: separate;
  }

#myreports div.sectionname table tbody tr:nth-child(even), 
#myviews div.sectionname table tbody tr:nth-child(even),
#mydashboards div.sectionname table tbody tr:nth-child(even)
{
background-color:#fff;
}
#myreports div.sectionname table tbody tr:first-child, 
#myviews div.sectionname table tbody tr:first-child,
#mydashboards div.sectionname table tbody tr:first-child
{
background-color:#fafafa;
}

#myreports div.sectionname table tr:first-child td, 
#myviews div.sectionname table tr:first-child td,
#mydashboards div.sectionname table tr:first-child td
{
border-bottom:1px solid #dcdcdc;
font-weight: bolder;
line-height: 1.6em;
}*/
/* for search box */
/**{
  box-sizing: border-box;
}

.search-box{
  width: fit-content;
  height: fit-content;
  position: relative;
}
.input-search{
  height: 50px;
  width: 50px;
  border-style: none;
  padding: 10px;
  font-size: 18px;
  letter-spacing: 2px;
  outline: none;
  border-radius: 25px;
  transition: all .5s ease-in-out;
  background-color: #22a6b3;
  padding-right: 40px;
  color:#000;
}
.input-search::placeholder{
  color:rgba(255,255,255,.5);
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 100;
  color:#000;
}
.btn-search{
  width: 50px;
  height: 50px;
  border-style: none;
  font-size: 20px;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  right: 0px;
  color:#000 ;
  background-color:transparent;
  pointer-events: painted;  
}
.btn-search:focus ~ .input-search{
  width: 300px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom:1px solid rgba(255,255,255,.5);
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
  color:#000;
}
.input-search:focus{
  width: 300px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom:1px solid rgba(255,255,255,.5);
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
  color:#000;
}*/

/*
div[id^="editpage"] div.sectionname

{
  margin-bottom: 1rem;
  background-color: #f6f7fb;
  -webkit-box-shadow: 0 1px 1px 0 rgb(0 28 36 / 30%), 1px 1px 1px 0 rgb(0 28 36 / 15%), -1px 1px 1px 0 rgb(0 28 36 / 15%);
  box-shadow: 0 1px 1px 0 rgb(0 28 36 / 30%), 1px 1px 1px 0 rgb(0 28 36 / 15%), -1px 1px 1px 0 rgb(0 28 36 / 15%);
  box-shadow: 0 1px 1px 0 var(--awsui-color-shadow-medium, rgba(0, 28, 36, 0.3)),1px 1px 1px 0 var(--awsui-color-shadow-side, rgba(0, 28, 36, 0.15)),-1px 1px 1px 0 var(--awsui-color-shadow-side, rgba(0, 28, 36, 0.15));
  border-top: 1px solid #eaeded;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  padding:0px;
  min-width: 40%;
  display: block;
}

div[id^="editpage"] div.sectionname table
  { 
  border-collapse: separate;
  }

div[id^="editpage"] div.sectionname table tbody tr:nth-child(even)
{
background-color:#fff;
}
div[id^="editpage"] div.sectionname table:first-child tbody tr:first-child
{
background-color:#fafafa;
}

div[id^="editpage"] div.sectionname table:first-child tr:first-child th
{
border-bottom:1px solid #dcdcdc;
font-weight: bolder;
line-height: 1.6em;
}

div[id^="selectedreport"] div[id^="hideimgbutton"]
{
  
}
*/
/*------------------------*/
/* ---- For Help Popup Menu div */
.overlay {
  /*background-color: #000;
  bottom: 0;
  left: 0;*/
  opacity: 0.1;
  filter: alpha(opacity = 10); /* IE7 & 8 */
  /*position: fixed;
  right: 0;
  top: 0;*/
  z-index: 49;
}

.iconbox {
  margin: 5px 3px 15px 3px;
  /*border: 1px solid #000;*/
  width: 80px;
  height: 65px;
  padding: 5px 5px 5px 5px;
}

.iconbox a i,
.iconbox-2cl a i,
.iconbox i {
  /*color: #0b65a0;*/
  color: #0b649f;
  padding-bottom: 5px;
}

.iconbox a i:hover,
.iconbox-2cl a i:hover {
  font-size: 40px;
}

.iconbox #onboarding:hover {
  font-size: 40px;
}

.iconbox-2cl {
  margin: 5px 3px;
  width: 115px;
  height: 70px;
  padding: 5px 5px 5px 5px;
}
.helplink-container {
  border: 1px solid rgb(202, 202, 202);
  border-radius: 5px;
  box-shadow:
    rgba(0, 0, 0, 0.19) 0px 10px 20px,
    rgba(0, 0, 0, 0.23) 0px 6px 6px;
  width: auto; /*330px;*/
  font-size: 12px;
  font-family: var(--font-family-base);
}

.helplink-main1,
.helplink-main2 {
  background: rgb(10, 99, 158);
  background: linear-gradient(
    90deg,
    rgb(10, 99, 158) 0%,
    rgb(60, 166, 236) 100%
  );
  /*background: rgb(230, 230, 230);*/
  color: #000;
  padding-left: 15px;
}

.helplink-main1 a {
  color: #000;
}
.helplink-main1 {
  padding-bottom: 10px;
  color: #fff;
}
.helplink-main3 {
  background-color: #fff;
  padding-left: 15px;
}

.helplink-stillhelp-container a {
  color: #000;
  text-decoration: none;
}
.helplink-stillhelp-container:hover {
  background-color: #ecf3ff;
}

.helplink-title {
  font-size: 25px;
  font-weight: bold;
  /*padding-bottom: 10px;*/
}
.helplink-resource-top,
.helplink-resource-bottom {
  background-color: #fff;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  padding: 0px 10px 0px 15px;
  color: #000;
  margin-right: 15px;
}
.helplink-resource-top {
  border-top: 1px solid #ccc;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.helplink-resource-bottom {
  border-bottom: 1px solid #ccc;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  margin-bottom: 15px;
}

.helplink-resource-title {
  font-size: 18px;
  font-weight: bold;
  padding: 10px 0px 10px 0px;
  color: #800000;
}

.helplink-support-container,
.helplink-stillhelp-container {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 0px 10px 10px 15px;
  color: #000;
  margin-right: 15px;
  margin-bottom: 15px;
  border-radius: 6px;
}

.helplink-icons-container {
  padding: 5px;
}
.floatleft {
  float: left;
}
.floatright {
  float: right;
}
.clearall {
  clear: both;
}
.textcenter {
  text-align: center;
}
.padding10top {
  padding-top: 10px;
}
.padding10bottom {
  padding-bottom: 10px;
}
.icon-row i {
  font-size: 35px;
}
.help-menu {
  display: none;
  position: absolute;
  min-width: 160px;
  overflow: auto;
  z-index: 1;
}

#help-onboarding table tbody th,
#help-onboarding table tbody td {
  padding: 5px 0px 0px 0px;
}

#help-onboarding table tbody tr:nth-child(even) {
  border-bottom: 0;
  background-color: #fff;
}
#help-onboarding table {
  border-collapse: unset;
  margin-bottom: 5px;
}

#help-onboarding .onboarding-process-title {
  padding-left: 0px;
  font-size: 15px;
  text-align: left;
  font-weight: bold;
  color: #1779ba;
}

.pd-l15 {
  padding-left: 15px;
}
.pd-r15 {
  padding-right: 15px;
}

.pd-lr20 {
  padding-left: 20px;
  padding-right: 20px;
}
.pd-lr25 {
  padding-left: 25px;
  padding-right: 25px;
}

.pd-tb15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.pd-tb20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.pd-tb25 {
  padding-top: 25px;
  padding-bottom: 25px;
}

.pd-t20 {
  padding-top: 20px;
}
.pd-b10 {
  padding-bottom: 20px;
}

.top-highlight-border {
  border-top-color: #277cfb;
  border-top-width: 4px;
}

.show {
  display: block !important;
}
.inlineshow {
  display: inline-block !important;
}
.hide {
  display: none !important;
}
#tohelp-home,
#more-help,
#onboarding,
#tohelp-home-onboarding {
  cursor: pointer;
}

.helplink-main1 .fa-times {
  font-size: 15px;
  color: #fff;
}
.black-hyperlink-wul {
  color: #000000;
}
a.black-hyperlink-wul {
  color: #000000;
  text-decoration: underline;
}
a:hover.black-hyperlink-wul {
  color: #000000;
  text-decoration: none;
}
/*------------------------------*/

/*for Home page collapsible tree */

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

.node text {
  font: 12px sans-serif;
}

.link {
  fill: none;
  stroke: #f1f1f1;
  stroke-width: 2px;
}

.treelink {
  color: blue;
  text-decoration: underline;
}

a.treelink:link {
  color: red !important;
  text-decoration: underline;
}
/*Ends here*/

.homeicn_parentcontainer {
  clear: both;
}
.homeicn_maindiv {
  float: left;
  margin: 0px 75px 100px 0px;
}
.homeicn_iconcustomcontainerdiv,
.homeicn_iconsystemcontainerdiv {
  border: 1px solid #cccccc;
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 15px 0 rgba(0, 0, 0, 0.19);
  width: 150px;
  height: 150px;
  text-align: center;
  position: relative;
}
.homeicn_iconsystemcontainerdiv:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #608a32 transparent transparent;
  right: 0;
  top: 0;
  position: absolute;
}
a:hover .homeicn_iconsystemcontainerdiv:after {
  border-color: transparent #ffffff transparent transparent;
}
.homeicn_icondiv {
  padding: 20px 0 0 0;
}
.homeicn_linksdiv {
  width: 100%;
  padding: 10px;
  position: absolute;
  text-align: center;
  bottom: 0px;
}

a i.fa-project-diagram {
  color: #06a1b3;
}
a i.fa-layer-group {
  color: #f09336;
}
a i.fa-th {
  color: #d65c5a;
}
a i.fa-clone {
  color: #04279b;
}
a i.fa-sync-alt {
  color: #019946;
}
a i.fa-chart-bar {
  color: #8c049b;
}
a i.fa-caret-square-down {
  color: #007ed1;
}
/*color: #f98700;*/

a:hover .homeicn_iconcustomcontainerdiv,
a:hover .homeicn_iconsystemcontainerdiv,
.homeicn_parentcontainer a:hover i {
  background-color: rgb(99, 99, 99);
  color: white;
}
.homeicn_parentcontainer a:hover .homeicn_iconcustomcontainerdiv,
.homeicn_parentcontainer a:hover .homeicn_iconsystemcontainerdiv {
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 12px 30px 0 rgba(0, 0, 0, 0.19);
}

table tfoot {
  background: #f4f4f4;
}

table tfoot th {
  text-align: right;
  padding: 5px;
}

.breakword {
  word-break: break-word;
}
.imageEditor {
  /*width:500px;*/
  min-height: 150px;
  height: auto;
  border: 1px solid gray;
}
.mvr_reports_th,
.mvr_reports_td {
  min-width: 100px;
  word-break: normal;
  overflow-wrap: break-word;
}

.nn-top-logo-text {
  min-width: 200px;
  padding: 10px 15px;
}

.position-left {
  width: auto;
  -ms-transform: translateX(-500px);
  transform: translateX(-500px);
}

.off-canvas-content.is-open-left.has-transition-push {
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}

td[id^="AuthenticationStatus"] a {
  padding: 0.35em 0.8em;
  color: #ffffff;
  font-size: 12px;
}

td[id^="AuthenticationStatus"] a:hover {
  color: #ffffff;
}

td#ID1HUBSPOT,
td#ID1MAILCHIMP,
td#ID1OFFICE365,
td#ID1POWERBI,
td#ID1TEAMS {
  width: 180px;
  /*height: 85px;*/
}

td#ID1HUBSPOT {
  content: url("../images/hubspot.png");
}
td#ID1MAILCHIMP {
  content: url("../images/mailchimp.png");
}
td#ID1OFFICE365 {
  content: url("../images/office365.png");
}
td#ID1POWERBI {
  content: url("../images/powerbi.png");
}
td#ID1TEAMS {
  content: url("../images/teams.png"); /*text-indent: -9999px;*/
}

.authenticate-button {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 1rem 0;
  font-family: inherit;
  padding: 0.45em 1em;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition:
    background-color 0.25s ease-out,
    color 0.25s ease-out;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  background-color: #1779ba;
  color: #fefefe;
}

table.nn-reports,
table.nn-snapshot {
  width: auto;
  margin: 0;
}

.blankdivtillpageloadsclass {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(/images/Preloader.gif) center no-repeat #fff;
}
/*body{
     display: none;
}*/

.reveal {
  display: table;
}

table.nn-reports thead tr th,
table.nn-snapshot thead tr th {
  text-align: center;
}

/*table.nn-reports tr td:nth-child(even), table.nn-reports tr th:nth-child(even), table.dataTable tr td:nth-child(even), table.dataTable tr th:nth-child(even)
{
  /*background-color: #fdfdfd;*/
/*border-right: solid 1px #ddd;
  border-left: solid 1px #ddd;
  
}*/
table.nn-grids tr td:nth-child(even),
table.nn-grids tr th:nth-child(even) {
  border-right: none;
  /*border-left: none;*/
}
/*table.dataTable.display tr td:nth-child(even), table.dataTable.display tr th:nth-child(even)
{
  border-right: none;
  border-left: none;
}*/

input[type="text"],
textarea,
select {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  outline: none;
  /*padding: 3px 0px 3px 3px;*/
  margin: 5px 1px 3px 0px;
  border: 1px solid #dddddd;
}

input[type="text"]:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  /*padding: 3px 0px 3px 3px;*/
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

.dataTables_wrapper .dataTables_filter {
  white-space: nowrap;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_filter input {
  display: inline-block;
}
.dataTables_wrapper .dataTables_filter input {
  width: 200px;
  height: 30px;
}
table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 10px 5px 2px 5px;
}

table.dataTable tfoot th,
table.dataTable tfoot td,
table tfoot th,
tfoot th {
  font-weight: normal;
}
table.dataTable tbody tr.jsonreport td,
table.dataTable thead tr.jsonreport th {
  padding: 2px 5px 2px 5px;
  font-size: 11px;
}
table.dataTable tfoot tr.jsonreport th {
  padding: 10px 5px 2px 5px;
  font-size: 11px;
}
table.dataTable thead tr.jsonreport th {
  white-space: nowrap;
  line-height: 1.9em;
}
table.dataTable tbody tr.jsonreport td {
  /*white-space: pre;*/
  min-width: 50px;
  /* width: 100%;*/
}

#validationmsg {
  color: red;
  padding: 10px;
}

.nodatadiv {
  width: 100%;
  text-align: center;
  background-color: #f1f1f182;
  padding: 5px 0px 5px 0px;
  font-weight: bold;
}

.picklistcontainer {
  padding: 10px 5px 10px 15px;
  width: 100%;
  background-color: #f1f1f182;
  margin: 0px 0px 15px 5px;
  display: flex;
}
.picklistselectdiv,
.picklistdatefielddiv {
  float: left;
  padding-right: 10px;
}

.picklistselectdiv > label,
.picklistdatefielddiv > label {
  font-size: 12px;
}

.picklistselectdiv > select {
  max-width: 150px;
}

.picklistdatefielddiv > input {
  min-width: 120px;
  width: 120px;
  margin-bottom: 2px;
}

.picklistrenderchartbutton {
  padding: 27px 0px 0px 15px;
}

.picklistselected,
.dateselected,
.inputselected {
  border: 1px solid #1779ba;
  background-color: #e5f0f7;
}
.picklistselectdiv > input.drilldowninput100 {
  min-width: 100px;
  width: 100px;
  margin-bottom: 2px;
}

.highlighted input[type="text"] {
  border: 2px solid green;
  background-color: #f1ffea;
}
.highlighted select {
  border: 2px solid green;
  background-color: #f1ffea;
}
.highlighted textarea {
  border: 2px solid green;
  background-color: #f1ffea;
}
.highlighted input[type="checkbox"]:after {
  border: 2px solid green;
  background-color: #f1ffea;
}

.gridhighlight {
  background-color: #f1ffea;
}

input:disabled,
input[readonly] {
  min-width: 30px;
  float: left;
  height: 16px;
  padding: 6px 5px 5px 5px;
  margin-right: 5px;
  margin-top: -2px;
}
.smallfont {
  font-size: 11px;
}
.nn-heading-font {
  color: var(--title-font-color);
  /* font-weight: bold; */
  font-weight: 500;
  /*font-style:italic;*/
  vertical-align: middle;
  letter-spacing: -0.5px;
}
nav .nn-heading-font {
  /*background:url(../images/logo.gif) 0 0 no-repeat;
    display:block;
    height:50px; 
    text-indent:-99999em;
    width:180px; 
    overflow:hidden;*/
  margin-right: 2px;
  color: #23215f;
}

/*.fa-sign-out-alt {color:#d65c5a}*/
.fa-cog {
  color: #616161;
}
.fa-search {
  color: #5f0000;
}
/*.fa-edit, .fa-pencil-alt {color:#2f90b2 ;}*/
/*.fa-object-group {color:#009966 ;}*/
.fa-trash-alt,
.fa-sign-out-alt,
.fa-times,
.fa-times-circle {
  color: #cc0033;
}
.fa-window-minimize {
  color: rgb(109, 109, 109);
}
.fa-file-csv,
.fa-file-excel {
  color: #1c6c40;
}
.fa-file-pdf {
  color: #e43a00;
}
.fa-copy {
  color: #8a8a8a;
}

.fas.fa-cog:hover,
.fas.fa-sync-alt:hover {
  transform: rotate(180deg);
}
.fas.fa-cog,
.fas.fa-sync-alt {
  transition: transform 0.5s ease 0s;
}

input[type="search"] {
  border-radius: 12px;
}

button[type="submit"] i.fa-search {
  color: #fff;
}

/* nav li {
  border-right: 1px solid #e2e2e2;
} */
nav div.global-search li {
  border-right: none;
}
.menu.nested {
  margin-left: 0;
}
.100percent {
  width: 100%;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: black;
  opacity: 0.6;
}

/*.specific-table-borders>table tbody td, .specific-table-borders>table tbody th 
{
    border-right: 1px solid #ddd;
}*/
table.specific-table-borders tbody td,
table.specific-table-borders tbody th {
  border-right: 1px solid #ddd;
}

.nnlabel {
  font-weight: bold;
}

.sectionname-homepage {
  background: none repeat scroll 0 0;
  border-radius: 5px;
  border-top: 1px solid #c7c7c7;
  box-shadow: 0.5px 1px 2px 0.7px rgba(0, 0, 0, 0.6);
  display: inline-block;
  margin-bottom: 8px;
  margin-left: 10px;
  margin-right: 10px;
  outline: medium none;
  padding: 2px 10px;
  text-decoration: none;
  vertical-align: top;
}

.sectionname {
  background: none repeat scroll 0 0;
  border-radius: 5px;
  border-top: 1px solid #c7c7c7;
  box-shadow: 0.5px 1px 2px 0.7px rgba(0, 0, 0, 0.6);
  display: inline-block;
  margin-bottom: 8px;
  margin-left: 10px;
  margin-right: 10px;
  outline: medium none;
  padding: 2px 10px;
  text-decoration: none;
}

.layer1 table,
.layer1 ol {
  border-collapse: unset;
  margin-bottom: 0.1rem;
}

.layer1 div,
.layer1 td {
  background-color: aliceblue;
}

.nndashboard > div {
  overflow: auto;
  width: 350px;
  height: 300px;
  /* border: 1px solid #999999; */
  padding: 15px;
  margin: 10px;
  vertical-align: top;
}
.dashboardresize > div {
  resize: both;
}
.control {
  /*width: 20px;*/
}

/*----------------- Devices like tablets, smartphones etc.. 991px and down) -----------------*/
@media only screen and (max-width: 991px) {
  .captcharemembercontainer label {
    font-size: 10px;
  }
  .CallFrameDivContainer {
    width: auto;
  }
  #frmt,
  #moduleContentcanvas {
    width: 100%;
  }
  .runasdashboardtitle h2 {
    float: left;
  }

  .runasdadboarddivcontainer {
    width: 100%;
    margin: 0px 0px 10px 0px;
  }
  .editpagetitle {
    float: left;
    padding-right: 15px;
  }
  div[id^="editpage"] .editpagetitle {
    display: table;
    float: none !important;
  }
  .nndashboard > .resize {
    width: 100%;
    height: 100%;
  }

  .imageEditor {
    width: 100%;
  }
  select,
  [type="text"],
  [type="password"] {
    min-width: 10px;
    margin-right: 1px;
    width: 80%;
  }
  .sectionname,
  .sectionname-homepage {
    width: 100%;
  }
  .relateddropdown {
    width: 150px;
  }

  /*  table,tbody,td{
display:block;
}*/
  .homeicn_maindiv {
    float: left;
    margin: 10px 20px 20px 20px;
  }
  .newquickbanner {
    display: none;
  }

  .homeicn_iconcustomcontainerdiv,
  .homeicn_iconsystemcontainerdiv {
    border: 1px solid #cccccc;
    box-shadow:
      0 4px 8px 0 rgb(0 0 0 / 20%),
      0 6px 15px 0 rgb(0 0 0 / 19%);
    width: 130px;
    height: 130px;
    text-align: center;
    position: relative;
  }
  nav li {
    border-right: none;
  }
  .dropdown.menu a {
    padding: 0.5rem 0.6rem;
  }
  h1 {
    margin-bottom: 0rem;
  }

  .size-24 {
    font-size: 20px;
  }
}
.bordertdred,
.bordertd {
  width: 100%;
  min-width: 150px;
}

.legendparent,
.legendchild {
  /*display:-webkit-inline-box;*/
  display: inline-table;
  /*padding:3px;*/
}

/* ----------------- Devices like laptops/desktops etc.. 992px and up) -----------------*/
@media (max-width: 768px) {
  .legendparent {
    width: 82%;
    height: auto;
    aspect-ratio: 1/1;
    display: inline-block;
  }
  #singlepagehomediv {
    flex-direction: column;
  }
  #homepagerightsmallcontainer,
  #homepageleftbigcontainer {
    width: 95% !important;
  }
  #homepagerightsmallcontainer {
    margin: 0 10px;
  }
}

/* ----------------- Devices like laptops/desktops etc.. 992px and up) -----------------*/
@media only screen and (min-width: 992px) {
  .CallFrameDivContainer {
    width: auto;
  }
  .sr-main-container {
    display: flex;
  }
  #frmt {
    width: 20%;
  }
  #moduleContentcanvas {
    width: 80%;
  }
  .editpagetitle {
    float: left;
    padding-right: 15px;
  }
  .nndashboard > .resize {
    width: 513px;
    height: 282px;
  }
  .imageEditor {
    width: 500px;
  }
  .iconscontainer {
    padding: 20px 0 0 150px;
  }

  #global-main-search textarea,
  input,
  select {
    width: auto;
  }
  table.dataTable .relateddropdown {
    width: auto;
    min-width: 65px;
    background-position: right -0.1rem center;
    padding-right: 0.5rem;
  }

  table.dataTable .column_filter_class {
    padding: 0px;
    margin: 0px;
    min-width: 50px;
    width: auto;
  }
  /* select,
  [type="text"],
  [type="password"] {
    min-width: 150px;
    width: 250px;
  } */
  select:not(.nn-table-border select),
  [type="text"]:not(.nn-table-border [type="text"]),
  [type="password"]:not(.nn-table-border [type="password"]) {
    min-width: 150px;
    width: 250px;
  }

  #pivottable-container table select {
    width: auto;
  }
  textarea {
    width: 220px;
  }
  .noteswidth {
    width: auto;
  }
  .nn-heading-font {
    float: left;
  }
  .nnlabel {
    text-align: right;
    /* width: 200px;
    min-width: 200px; */
    width: 200px;
    min-width: 175px;
  }
  /*.nnlabel + td
  { 
    min-width:150px;
  } */
  .nnvalue {
    /* width: 340px;
    min-width: 340px; */
    width: 250px;
    min-width: 250px;
  }
  .sectionname {
    min-width: 98%;
  }
  .layer1 > .sectionname {
    min-width: 98%;
  }

  .sectionname-homepage {
    min-width: 400px;
  }
  .nndashboard > div {
    width: 400px;
    height: 350px;
    overflow: auto;
    display: inline-block;
    scrollbar-width: thin;
  }
  .greditinputfield,
  .greditselectfield {
    width: 150px;
  }
  .greditdatefield {
    width: 100px;
  }
  .bordertdred,
  .bordertd {
    width: 250px;
  }
  .legendparent,
  .legendchild {
    /*display: flex;*/
    display: inline-table;
  }
  .legendparent {
    /*padding:10px 0 10px 15px*/
  }
}

/* ----------------- For Printing Graphics and Background colors -----------------*/

@media print {
  body,
  table {
    -webkit-print-color-adjust: exact; /* For Chrome and Safari */
    print-color-adjust: exact; /* For firefox */
    margin: 0;
  }
  div {
    page-break-inside: avoid;
  }
  @page {
    margin: 1cm; /* Adjust margins as needed */
  }
  header,
  footer {
    display: none;
  }
  /*h3{
		color:#800000 !important;
	}
	.th-printable{
		border: 1px solid #c7c7c7 !important;
	}
	.th-printable th{
		background-color: #CCCCCC !important;
		border-right: 1px solid #ffffff !important;
	}
	.th-printable td{
		border-right: 1px solid #c7c7c7 !important;
		border-bottom: 1px solid #c7c7c7 !important;
	}*/
  /*.labelcssclass
	{
		background-color: #f1f1f1 !important;
	}*/
  .avoidpagebreak {
    page-break-after: avoid; /* For older browsers */
    break-after: avoid; /* Modern browsers */
  }
}

/* Start of Code added by Sangeetha K for 'Top Navigation' on 8-Aug-2019 */
#contentArea {
  border: 2px solid #cccccc;
  width: 100%;
  min-height: 30px;
  min-width: 300px;
  border-radius: 10px;
  padding: 8px;
  margin-top: 5px;
  display: inline-table;
}

.sectionDiv {
  border: 2px solid #cccccc;
  min-height: 30px;
  min-width: 300px;
  border-radius: 10px;
  padding: 8px 25px 8px 8px;
  margin-top: 5px;
}

.sectionContent {
  display: table;
  width: 100%;
}

.figureTopNav {
  width: 100%;
  margin: 5px 5px 5px 0;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.figureTopNav img {
  border: 1px solid #cccccc;
  padding: 2px;
  width: 75%;
  border-radius: 10px;
}

.figureTopNav figcaption {
  flex: 0 0 100%;
  text-align: center;
  padding: 3px;
  color: #cccccc;
}

.displayTable {
  border: 1px solid #cccccc;
  border-radius: 10px;
  box-shadow: 1px 1px 1px #cccccc;
  list-style-position: inside;
  padding: 5px;
  margin: 0 0 5px 0;
}

.displayTable li {
  padding: 3px;
  width: 100%;
}

.displayTable li:nth-child(even) {
  background-color: #f1f1f1;
}

.displayTable li:nth-child(even) li:nth-child(odd) {
  background-color: #f6f7fb;
}

.displayTable a {
  color: #000000;
  cursor: default;
}

.displayTable p {
  margin: 3px 5px 3px 15px;
}

.level2list {
  margin: 5px 10px;
  width: 98%;
  list-style-type: circle;
}

.gotopbtn {
  display: block;
  position: fixed;
  width: 50px;
  height: 50px;
  background: rgba(204, 204, 204, 0.3);
  bottom: 40px;
  right: 50px;
  border-radius: 50%;
  opacity: 50%;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color: white;
  font-size: 22px;
}
/* End of Code added by Sangeetha K for 'Top Navigation' on 8-Aug-2019 */

/*============================================

Tile Button CSS Plugin by SONHLAB.com - version 1.0
Website: http://sonhlab.com
Documentation: http://docs.sonhlab.com/tile-button-metro-ui/
License: Personal & Commercial Uses.

============================================*/

/* START GLOBAL */

.button-holder {
  padding: 5px;
  margin-bottom: 50px;
  position: relative;
}
/* END GLOBAL */

/* TILE BUTTONS */

/* Button 100 x 100 */
.tile-bt {
  text-align: center;
  cursor: pointer;
  width: 114px;
  height: 114px;
}
.tile-bt a {
  display: block;
  /*padding-top:10px;*/
  text-decoration: none !important;
}

.tile-bt span {
  font-size: 12px;
  display: block;
  padding: 15px 5px 2px 5px;
}
.tile-bt:active {
  opacity: 0.5;
}
/* Button 100 x 100 */

/* Button 205 x 100 */
.tile-bt-2 {
  width: 205px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
}
.tile-bt-2 a {
  display: block;
  text-decoration: none !important;
}
.tile-bt-2 span {
  vertical-align: middle;
  display: inline;
}
.tile-bt-2:active {
  opacity: 0.5;
}

/* End Button 205 x 100 */

/* END TILE BUTTONS */

/* BACKGROUND LIST */

/* Solid Colors */
.solid-blue {
  background: #00bbe2;
}
.solid-blue-2 {
  background: #2c84ee;
}
.solid-darkblue {
  background: #044e94;
}
.solid-violetred {
  background: #781766;
}
.solid-red {
  background: #e51400;
}
.solid-red-2 {
  background: #e81750;
}
.solid-pink {
  background: #ff539b;
}
.solid-purple {
  background: #d02090;
}
.solid-orange {
  background: #fb8f02;
}
.solid-orange-2 {
  background: #ff6600;
}
.solid-orange-3 {
  background: #dd5f37;
}
.solid-coral {
  background: #cd5b45;
}
.solid-green {
  background: #67b239;
}
.solid-green-2 {
  background: #96bf01;
}
.solid-darkgreen {
  background: #016c38;
}
.solid-olive {
  background: #999900;
}
.solid-grass {
  background: #cdcd00;
}
.solid-darkred {
  background: #5f0000;
}
.solid-gold {
  background: #fee9ae;
}
.solid-yellow {
  background: #f7d100;
}
.solid-black {
  background: #000;
}
.solid-smoke {
  background: #f5f5f5;
}
.solid-white {
  background: #ffffff;
}
.solid-disabled {
  background: #e1e1e1;
}
/* End Solid Colors */

/* END BACKGROUND LIST */

/* MISC */
.light-text {
  color: #fff;
}
.dark-text {
  color: #1e1e1e;
}
.gradient {
  background: -moz-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  ); /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0%, rgba(255, 255, 255, 0)),
    color-stop(100%, rgba(255, 255, 255, 0.3))
  ); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0) 00%,
    rgba(255, 255, 255, 0.3) 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  ); /* Opera 11.10+ */
  background: -ms-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  ); /* IE10+ */
  background: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  ); /* W3C */
}
.shadow-white,
.shadow-black,
.shadow-blue,
.shadow-green,
.shadow-red {
  display: inline-table;
  text-decoration: none;
}

.shadow-white {
  border: 1px solid #cccccc;
  /*box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 15px 0 rgb(0 0 0 / 19%);*/
  box-shadow:
    2px 5px 5px 0 rgb(0 0 0 / 20%),
    2px 2px 5px 0 rgb(0 0 0 / 19%);
}

/*.shadow-white:hover {
  /*background: linear-gradient(#7d7d7d 0 0) bottom/100% 100% no-repeat !important;*/
/*background-color: #7d7d7d !important;
  transition: 0.3s;
	box-shadow:0px 0px 6px 3px #fff;
	-webkit-box-shadow:0px 0px 6px 3px #fff;
	-moz-box-shadow:0px 0px 6px 3px #fff;
	-o-box-shadow:0px 0px 6px 3px #fff;
	-ms-box-shadow:0px 0px 6px 3px #fff;
}*/

/*.dy4484e9 > a > i, .dy4484e9 > a > span {color: #4484e9}
.dyef7a22 > a > i, .dyef7a22 > a > span {color: #ef7a22}
.dy044E94 > a > i, .dyef7a22 > a > span {color: #044E94}
.dy781766 > a > i, .dyef7a22 > a > span {color: #781766}
.dyE51400 > a > i, .dyef7a22 > a > span {color: #781766}
.dy999900 > a > i, .dyef7a22 > a > span {color: #781766}
.dy5F0000 > a > i, .dyef7a22 > a > span {color: #781766}
.dyd65c5a > a > i, .dyef7a22 > a > span {color: #781766}
.dyD02090 > a > i, .dyef7a22 > a > span {color: #781766}
.dyFB8F02 > a > i, .dyef7a22 > a > span {color: #781766}
.dyCD5B45 > a > i, .dyef7a22 > a > span {color: #781766}
.dyF7D100 > a > i, .dyef7a22 > a > span {color: #781766}
.dy96BF01 > a > i, .dyef7a22 > a > span {color: #781766}
.dy000000 > a > i, .dyef7a22 > a > span {color: #781766}
.dyE81750 > a > i, .dyef7a22 > a > span {color: #781766}
.dy00BBE2 > a > i, .dyef7a22 > a > span {color: #781766}
.dy016C38 > a > i, .dyef7a22 > a > span {color: #781766}
.dyFF539B > a > i, .dyef7a22 > a > span {color: #781766}
.dyFF6600 > a > i, .dyef7a22 > a > span {color: #781766}
.dy8c049b > a > i, .dyef7a22 > a > span {color: #ef7a22}
.dy00954c > a > i, .dyef7a22 > a > span {color: #ef7a22} */

.dy4484e9:hover {
  background-color: #4484e9 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dyef7a22:hover {
  background-color: #ef7a22 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dy044E94:hover {
  background-color: #044e94 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dy781766:hover {
  background-color: #781766 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dyE51400:hover {
  background-color: #e51400 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dy999900:hover {
  background-color: #999900 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dy5F0000:hover {
  background-color: #5f0000 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dyd65c5a:hover {
  background-color: #d65c5a !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dyD02090:hover {
  background-color: #d02090 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dyFB8F02:hover {
  background-color: #fb8f02 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dyCD5B45:hover {
  background-color: #cd5b45 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dyF7D100:hover {
  background-color: #f7d100 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dy96BF01:hover {
  background-color: #96bf01 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dy000000:hover {
  background-color: #000000 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dyE81750:hover {
  background-color: #e81750 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dy00BBE2:hover {
  background-color: #00bbe2 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dy016C38:hover {
  background-color: #016c38 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dyFF539B:hover {
  background-color: #ff539b !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dyFF6600:hover {
  background-color: #ff6600 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dy8c049b:hover {
  background-color: #8c049b !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dy00954c:hover {
  background-color: #00954c !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
.dyCC0000:hover {
  background-color: #cc0000 !important;
  box-shadow: 0px 0px 6px 3px #fff;
  -webkit-box-shadow: 0px 0px 6px 3px #fff;
  -moz-box-shadow: 0px 0px 6px 3px #fff;
  -o-box-shadow: 0px 0px 6px 3px #fff;
  -ms-box-shadow: 0px 0px 6px 3px #fff;
}
/*
.dy7c7c7c:hover {
  pointer-events: none;
}*/

.dy4484e9:hover > a > i,
.dy4484e9:hover > a > span,
.dyef7a22:hover > a > i,
.dyef7a22:hover > a > span,
.dy044E94:hover > a > i,
.dy044E94:hover > a > span,
.dy781766:hover > a > i,
.dy781766:hover > a > span,
.dyE51400:hover > a > i,
.dyE51400:hover > a > span,
.dy999900:hover > a > i,
.dy999900:hover > a > span,
.dy5F0000:hover > a > i,
.dy5F0000:hover > a > span,
.dyd65c5a:hover > a > i,
.dyd65c5a:hover > a > span,
.dyD02090:hover > a > i,
.dyD02090:hover > a > span,
.dyFB8F02:hover > a > i,
.dyFB8F02:hover > a > span,
.dyCD5B45:hover > a > i,
.dyCD5B45:hover > a > span,
.dyF7D100:hover > a > i,
.dyF7D100:hover > a > span,
.dy96BF01:hover > a > i,
.dy96BF01:hover > a > span,
.dy000000:hover > a > i,
.dy000000:hover > a > span,
.dyE81750:hover > a > i,
.dyE81750:hover > a > span,
.dy00BBE2:hover > a > i,
.dy00BBE2:hover > a > span,
.dy016C38:hover > a > i,
.dy016C38:hover > a > span,
.dyFF539B:hover > a > i,
.dyFF539B:hover > a > span,
.dyFF6600:hover > a > i,
.dyFF6600:hover > a > span,
.dy8c049b:hover > a > i,
.dy8c049b:hover > a > span,
.dy00954c:hover > a > i,
.dy00954c:hover > a > span,
.dyCC0000:hover > a > i,
.dyCC0000:hover > a > span {
  color: white !important;
}
.dy7c7c7c:hover > a > i,
.dy7c7c7c:hover > a > span {
  color: #7c7c7c !important;
  pointer-events: none;
}

/*.dy016C38:hover > .notificationdiv > a > i, .dy016C38:hover > .notificationdiv> a > i,*/

.dy4484e9:hover > .notificationdiv > a > i,
.dyef7a22:hover > .notificationdiv > a > i,
.dy044E94:hover > .notificationdiv > a > i,
.dy781766:hover > .notificationdiv > a > i,
.dyE51400:hover > .notificationdiv > a > i,
.dy999900:hover > .notificationdiv > a > i,
.dy5F0000:hover > .notificationdiv > a > i,
.dyd65c5a:hover > .notificationdiv > a > i,
.dyD02090:hover > .notificationdiv > a > i,
.dyFB8F02:hover > .notificationdiv > a > i,
.dyCD5B45:hover > .notificationdiv > a > i,
.dyF7D100:hover > .notificationdiv > a > i,
.dy96BF01:hover > .notificationdiv > a > i,
.dy000000:hover > .notificationdiv > a > i,
.dyE81750:hover > .notificationdiv > a > i,
.dy00BBE2:hover > .notificationdiv > a > i,
.dy016C38:hover > .notificationdiv > a > i,
.dyFF539B:hover > .notificationdiv > a > i,
.dyFF6600:hover > .notificationdiv > a > i,
.dy8c049b:hover > .notificationdiv > a > i,
.dy00954c:hover > .notificationdiv > a > i,
.dyCC0000:hover > .notificationdiv > a > i {
  color: white !important;
}

/*:root {
  --itemcolour: '----';
}
.shadow-white > a > i, .shadow-white > a > span {
  color:var(--itemcolour);;
}*/
/*.shadow-white:hover > a > i, .shadow-white:hover > a > span {
  color:white !important;
}*/

.shadow-blue:hover {
  box-shadow: 0px 0px 6px 3px #38d1f7;
  -webkit-box-shadow: 0px 0px 6px 3px #38d1f7;
  -moz-box-shadow: 0px 0px 6px 3px #38d1f7;
  -o-box-shadow: 0px 0px 6px 3px #38d1f7;
  -ms-box-shadow: 0px 0px 6px 3px #38d1f7;
}
.shadow-green:hover {
  box-shadow: 0px 0px 6px 3px #aaca37;
  -webkit-box-shadow: 0px 0px 6px 3px #aaca37;
  -moz-box-shadow: 0px 0px 6px 3px #aaca37;
  -o-box-shadow: 0px 0px 6px 3px #aaca37;
  -ms-box-shadow: 0px 0px 6px 3px #aaca37;
}
.shadow-red:hover {
  box-shadow: 0px 0px 6px 3px #e81750;
  -webkit-box-shadow: 0px 0px 6px 3px #e81750;
  -moz-box-shadow: 0px 0px 6px 3px #e81750;
  -o-box-shadow: 0px 0px 6px 3px #e81750;
  -ms-box-shadow: 0px 0px 6px 3px #e81750;
}
.shadow-black:hover {
  box-shadow: 0px 0px 6px 3px #444;
  -webkit-box-shadow: 0px 0px 6px 3px #444;
  -moz-box-shadow: 0px 0px 6px 3px #444;
  -o-box-shadow: 0px 0px 6px 3px #444;
  -ms-box-shadow: 0px 0px 6px 3px #444;
}

.tile-bt i {
  font-size: 27px;
  /*color: white;*/
  vertical-align: middle;
  margin: auto;
  padding: 0px;
  position: relative;
}
.tile-bt {
  margin: 10px;
}

/*.shadow-white i, .shadow-white span{
  color: #025a73;
}*/

.final-generated-result {
  display: inline-block;
}

/* ---------------------------- Ai Chat Window ---------------------------- */

#AIModeContainer {
  display: flex;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  min-height: calc(100vh - 180px);
  padding: 10px;
  box-sizing: border-box;
}

.nn-ai-mode-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  border: 1px solid #d4e1f1;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(20, 56, 95, 0.08);
  overflow: hidden;
}

/* #projectchathistorycontainer {
  width: 25%;
  min-width: 220px;
}

#fullchatcontainer {
  width: 75%;
} */

.nn-new-ai-main .nn-ai-chat-header {
  display: none !important;
}

.nn-new-ai-main .nn-ai-chat-body {
  border-top: none !important;
}

.nn-ai-mode-panel-title {
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 700;
  color: #16324f;
  border-bottom: 1px solid #d4e1f1;
  background: linear-gradient(90deg, #ffffff 0%, #eef5fd 100%);
}

.nn-ai-mode-panel-content {
  flex: 1;
  min-height: 0;
  padding: 12px;
}

.nn-ai-mode-chat-content {
  display: flex;
}

.nn-ai-chat-container {
  position: fixed;
  bottom: 0;
  right: 5px;
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  align-items: flex-end;
  z-index: 9999999;
}

.nn-ai-chat-window {
  width: 650px;
  height: 90vh;
  background: white;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  opacity: 0;
  animation: slideUp 0.4s forwards;
  transition: height 0.3s ease;
  position: relative;
}

.nn-ai-chat-window-embedded {
  width: 100%;
  height: 100%;
  min-height: 620px;
  border-radius: 14px;
  transform: none;
  opacity: 1;
  animation: none;
  box-shadow: none;
  border: 1px solid #dce7f4;
}

.nn-ai-chat-window-embedded .nn-ai-chat-header {
  border-radius: 14px 14px 0 0;
}

@keyframes slideUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.nn-ai-chat-header {
  /* background: #007bff; */
  background: linear-gradient(90deg, #2980b9, #2c3e50);
  color: white;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

.nn-ai-chat-header .title {
  font-size: 14px;
  font-weight: 600;
  flex-grow: 1;
  text-transform: capitalize;
}

.nn-ai-chat-header button {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  margin-left: 5px;
  transition: transform 0.2s;
}

.nn-ai-chat-header button:hover {
  transform: scale(1.2);
}

.nn-ai-chat-body {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  border-top: 1px solid #eee;
  font-size: 14px;
}

.nn-ai-chat-footer {
  display: flex;
  border-top: 1px solid #eee;
  padding: 8px;
  gap: 6px;
  position: relative;
  align-items: flex-end;
}

.nn-ai-chat-input-wrap {
  flex: 1;
  min-width: 0;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (max-width: 992px) {
  #AIModeContainer {
    flex-direction: column;
    min-height: auto;
  }

  #projectchathistorycontainer,
  #fullchatcontainer {
    width: 100%;
    min-width: 0;
  }

  .nn-ai-chat-window-embedded {
    min-height: 70vh;
  }
}

.nn-ai-chat-recording-indicator {
  height: 0;
  opacity: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #b83535;
  transition:
    height 0.2s ease,
    opacity 0.2s ease;
}

.nn-ai-chat-footer.nn-ai-recording-active .nn-ai-chat-recording-indicator {
  height: 16px;
  opacity: 1;
}

.nn-ai-recording-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #db3e3e;
  animation: nn-ai-recording-pulse 1s infinite;
}

.nn-ai-recording-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.nn-ai-recording-wave span {
  width: 3px;
  border-radius: 2px;
  background: #db3e3e;
  animation: nn-ai-recording-wave 0.9s ease-in-out infinite;
}

.nn-ai-recording-wave span:nth-child(1) {
  animation-delay: 0s;
}

.nn-ai-recording-wave span:nth-child(2) {
  animation-delay: 0.12s;
}

.nn-ai-recording-wave span:nth-child(3) {
  animation-delay: 0.24s;
}

.nn-ai-chat-footer textarea {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  display: block;
  resize: none;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  height: 30px;
}

.nn-ai-chat-input-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 6px 8px;
  background: #ffffff;
  box-sizing: border-box;
}

.nn-ai-chat-input-shell textarea {
  background: transparent;
  padding: 6px 4px;
  border: none;
  outline: none;
  box-shadow: none;
}

.nn-ai-chat-input-shell textarea:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

.nn-ai-chat-input-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
}

/* Two-row layout divider: a full-width, zero-height flex line-break that
   forces the menus onto the second row and draws a thin separator between
   the first row (listening indicator + mic/send) and the menu row. */
.nn-ai-chat-input-actions::after {
  content: "";
  order: -1;
  flex-basis: 100%;
  width: 100%;
  height: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.3);
  margin: 2px 0;
}

.nn-ai-chat-input-status {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  min-height: 0;
  /* Lives inside .nn-ai-chat-action-buttons on the left; the auto margin
     pushes the mic/send buttons to the right of the same row. */
  margin-right: auto;
}

.nn-ai-chat-input-shell .nn-ai-chat-input-status {
  min-height: 0;
}

.nn-ai-chat-footer.nn-ai-recording-active
  .nn-ai-chat-input-shell
  .nn-ai-chat-input-status {
  min-height: 16px;
}

.nn-ai-chat-input-shell .nn-ai-chat-recording-indicator {
  margin-right: 0;
  max-width: 100%;
}

.nn-ai-chat-action-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
  /* Full-width first row: listening indicator on the left, mic/send on the
     right. The menus (module/attach/tools/thinking/source) wrap to the
     second row via the .nn-ai-chat-input-actions::after divider. */
  order: -2;
  width: 100%;
}

.nn-ai-chat-select-menu {
  position: relative;
  flex-shrink: 0;
}
/* ----- Chat "+" (attach) menu ----- */
.nn-ai-chat-attach-menu {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}
.nn-ai-chat-attach-trigger {
  width: 32px !important;
  min-width: 32px;
  height: 32px !important;
  margin-top: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: transparent !important;
  color: #1d3557 !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 15px !important;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.nn-ai-chat-attach-trigger:hover {
  background: #f3f6fb !important;
  color: #112947 !important;
}

.nn-ai-chat-attach-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

/* Plus -> X animation (rotating a "+" 45deg gives an "x") */
.nn-ai-chat-attach-trigger i {
  transition: transform 0.25s ease;
}

.nn-ai-chat-attach-menu.is-open .nn-ai-chat-attach-trigger i {
  transform: rotate(45deg);
}
.nn-ai-chat-attach-dropdown {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  min-width: 200px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(30, 58, 95, 0.1);
  box-shadow: 0 12px 28px rgba(11, 37, 69, 0.16);
  backdrop-filter: blur(8px);
  display: none;
  z-index: 180;
}

.nn-ai-chat-attach-menu.is-open .nn-ai-chat-attach-dropdown {
  display: block;
}

.nn-ai-chat-attach-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nn-ai-chat-attach-option {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #143054 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 10px;
  font-size: 12px !important;
  cursor: pointer;
}

.nn-ai-chat-attach-option:hover {
  background: linear-gradient(135deg, #eef5ff, #dbeafe) !important;
  border-color: rgba(61, 107, 179, 0.18) !important;
  color: #0f2a4a !important;
}

.nn-ai-chat-attach-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
}

.nn-ai-chat-tools-trigger {
  width: auto !important;
  min-width: 0;
  height: 32px !important;
  margin-top: 0 !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  background: #f3f6fb !important;
  color: #1d3557 !important;
  border: 1px solid rgba(89, 117, 152, 0.18) !important;
  box-shadow: none;
  gap: 8px;
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nn-ai-chat-tools-trigger:hover {
  background: #e8eef8 !important;
  color: #112947 !important;
}

.nn-ai-chat-module-menu {
  display: none;
}

.nn-ai-chat-tools-trigger:disabled,
.nn-ai-chat-select-menu.is-menu-disabled .nn-ai-chat-tools-trigger {
  opacity: 0.6;
  cursor: not-allowed !important;
  background: #f5f7fb !important;
  color: #6f8197 !important;
}

.nn-ai-chat-tools-trigger:disabled:hover,
.nn-ai-chat-select-menu.is-menu-disabled .nn-ai-chat-tools-trigger:hover {
  background: #f5f7fb !important;
  color: #6f8197 !important;
}

.nn-ai-chat-tools-trigger-icon,
.nn-ai-chat-tools-trigger-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nn-ai-chat-tools-trigger-caret {
  font-size: 10px;
  color: #667c9a;
  transition: transform 0.2s ease;
}

.nn-ai-chat-select-menu.is-open .nn-ai-chat-tools-trigger-caret {
  transform: rotate(180deg);
}

.nn-ai-chat-tools-dropdown {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  min-width: 200px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(30, 58, 95, 0.1);
  box-shadow: 0 12px 28px rgba(11, 37, 69, 0.16);
  backdrop-filter: blur(8px);
  display: none;
  z-index: 180;
}

.nn-ai-chat-select-menu.is-open .nn-ai-chat-tools-dropdown {
  display: block;
}

.nn-ai-chat-tools-dropdown-list {
  display: flex;
  flex-direction: column;
}

.nn-ai-chat-module-menu .nn-ai-chat-tools-dropdown {
  min-width: 240px;
}

.nn-ai-chat-module-menu .nn-ai-chat-tools-dropdown-list {
  max-height: 63vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 0;
  scrollbar-width: thin;
}

.nn-ai-mode-panel-right .nn-ai-mode-chat-content .nn-ai-chat-header {
  display: none;
}

.nn-ai-mode-panel-right .nn-ai-mode-chat-content .nn-ai-chat-default-text {
  padding: 15px;
}

.nn-ai-chat-dropdown-scroll-btn {
  width: 100% !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: none !important;
  background: linear-gradient(180deg, #f5f8fc, #e7eef8) !important;
  color: #4c6788 !important;
  box-shadow: none !important;
  cursor: pointer;
}

.nn-ai-chat-dropdown-scroll-btn:hover {
  background: linear-gradient(180deg, #e9f1fb, #dbe8f7) !important;
  color: #23446d !important;
}

.nn-ai-chat-module-menu .nn-ai-chat-dropdown-scroll-btn.scroll-up {
  margin-bottom: 4px !important;
}

.nn-ai-chat-module-menu .nn-ai-chat-dropdown-scroll-btn.scroll-down {
  margin-top: 4px !important;
}

.nn-ai-chat-tool-option {
  width: 100% !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 2px;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #143054 !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
  gap: 10px;
  font-size: 12px !important;
}

.nn-ai-chat-tools-dropdown .nn-ai-chat-tool-option:last-child {
  margin-bottom: 0;
}

.nn-ai-chat-tool-option:hover,
.nn-ai-chat-tool-option.is-selected {
  background: linear-gradient(135deg, #eef5ff, #dbeafe) !important;
  border-color: rgba(61, 107, 179, 0.18) !important;
  color: #0f2a4a !important;
}

.nn-ai-chat-tool-option.is-disabled,
.nn-ai-chat-tool-option:disabled {
  opacity: 0.45;
  cursor: not-allowed !important;
  background: rgba(20, 48, 84, 0.03) !important;
  border-color: transparent !important;
  color: #344355 !important;
}

.nn-ai-chat-tool-option.is-disabled:hover,
.nn-ai-chat-tool-option:disabled:hover {
  background: rgba(20, 48, 84, 0.03) !important;
  border-color: transparent !important;
  color: #344355 !important;
}

.nn-ai-chat-tool-option.is-disabled .nn-ai-chat-tool-option-icon,
.nn-ai-chat-tool-option:disabled .nn-ai-chat-tool-option-icon {
  background: rgba(57, 108, 177, 0.05);
  color: #8ca0b9;
}

.nn-ai-chat-tool-option.is-disabled .nn-ai-chat-tool-option-check,
.nn-ai-chat-tool-option:disabled .nn-ai-chat-tool-option-check {
  opacity: 0;
}

.nn-ai-chat-tool-option-icon,
.nn-ai-chat-tool-option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nn-ai-chat-tool-option-icon {
  /* width: 26px;
  height: 26px; */
  width: 22px;
  height: 18px;
  border-radius: 8px;
  background: rgba(57, 108, 177, 0.09);
  color: #295b99;
  font-size: 12px;
}

.nn-ai-chat-tool-option-label {
  flex: 1;
  text-align: left;
  font-weight: 600;
}

.nn-ai-chat-tool-option-check {
  opacity: 0;
  color: #24579a;
  font-size: 12px;
}

.nn-ai-chat-tool-option.is-selected .nn-ai-chat-tool-option-check {
  opacity: 1;
}

.nn-ai-chat-input-actions .nn-ai-chat-mic-btn,
.nn-ai-chat-input-actions .nn-ai-chat-send-btn {
  margin-top: 0;
  width: 32px;
  height: 32px;
  font-size: 16px;
}

.nn-ai-chat-footer button {
  /* background: #007bff; */
  background: linear-gradient(90deg, #2980b9, #2c3e50);
  color: white;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  /* transition: background 0.3s; */
  margin-top: 10px;
  padding-top: 2px;
}

.nn-ai-chat-footer button:hover {
  /* background: #0056b3; */
  background: linear-gradient(90deg, #2c3e50, #2980b9);
}

.minimized {
  height: 40px !important;
}

.minimized .nn-ai-chat-body,
.minimized .nn-ai-chat-footer {
  display: none;
}
.nn-ai-chat-question-container {
  text-align: right;
  background-color: #e5effb;
  padding: 20px 15px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  margin-bottom: 10px;
  width: 95%;
  float: right;
}
.nn-ai-chat-answer-container {
  clear: both;
  text-align: left;
  background-color: #ededed;
  padding: 20px 15px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 95%;
  overflow-wrap: break-word;
}
/* .nn-ai-chat-answer-copybutton {
  float: right; 
  margin-top: -16px;
} */
/* .nn-ai-chat-answer-infobutton {
  text-align: right;
  margin-left: 18px;
} */
.nn-ai-chat-answer-infobutton .ai-info-icon,
.nn-ai-chat-answer-copybutton .ai-copy-icon,
.nn-ai-chat-progress-infobutton .ai-progress-icon,
.nn-ai-chat-question-copybutton .ai-copy-icon,
.nn-ai-chat-question-editbutton .ai-edit-icon,
.nn-ai-chat-answer-goodbutton .ai-feedback-icon,
.nn-ai-chat-answer-badbutton .ai-feedback-icon,
.nn-ai-chat-answer-sourcebutton .ai-source-icon {
  cursor: pointer;
  font-size: 18px;
}

/* Answer action icons sit on their own row BELOW the answer bubble
   (outside it), left-aligned to mirror the question bubble's icon row. */
.nn-ai-chat-answer-buttons {
  clear: both;
  margin-top: 6px;
  margin-bottom: 6px;
  padding-left: 2px;
}

/* .ai-info-icon,
.ai-copy-icon {
  cursor: pointer;
} */

.nn-ai-chat-answer-content {
  max-width: 95%;
}
.nn-ai-chat-question-time {
  font-style: italic;
  padding-right: 10px;
  margin-top: -5px;
  color: #a9a9aa;
  /* text-align: right; */
  float: right;
  margin-bottom: 5px;
  font-size: 10px;
}
.nn-ai-chat-answer-time {
  font-style: italic;
  padding-left: 10px;
  margin-top: -6px;
  color: #a9a9aa;
  font-size: 10px;
}
.nn-ai-chat-loading-text {
  padding: 0 0 0 5px;
  font-style: italic;
  color: #737373;
  margin-bottom: 10px;
}
.loading-content {
  display: flex;
  margin-top: 15px;
}

.nn-ai-chat-send-btn {
  z-index: 100;
}

.nn-ai-chat-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none !important;
}

.nn-ai-chat-mic-btn {
  z-index: 100;
}

.nn-ai-chat-mic-btn.is-recording {
  background: linear-gradient(90deg, #d35454, #992525) !important;
}

/* Send button switched to the Stop state while a request is in flight. */
.nn-ai-chat-send-btn.nn-ai-chat-stop-active {
  background: linear-gradient(90deg, #d35454, #992525) !important;
  color: #fff !important;
}

.nn-ai-chat-send-btn.nn-ai-chat-stop-active:hover {
  background: linear-gradient(90deg, #c14747, #821f1f) !important;
}

.nn-ai-chat-input-actions .nn-ai-chat-mic-btn,
.nn-ai-chat-input-actions .nn-ai-chat-send-btn {
  box-shadow: 0 10px 18px rgba(23, 53, 89, 0.2);
}

.nn-ai-chat-toggle-buttons {
  position: absolute;
  top: 8px;
  right: 2px;
  display: flex;
  gap: 4px;
  z-index: 120;
}

.nn-ai-chat-footer.nn-ai-recording-active .nn-ai-chat-toggle-buttons {
  top: 26px;
}

.nn-ai-chat-toggle-buttons button {
  background: rgba(255, 255, 255, 0.2);
  width: 28px;
  height: 28px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  margin-right: 0;
  color: #999999;
  margin-top: 0;
  padding-top: 0;
}

.nn-ai-chat-toggle-buttons button:hover {
  color: #484848;
  background: rgba(255, 255, 255, 0.2);
}

.nn-ai-chat-footer textarea::placeholder {
  color: rgba(0, 0, 0, 0.8) !important;
}

@media (max-width: 640px) {
  .nn-ai-chat-input-actions {
    flex-wrap: wrap;
  }

  .nn-ai-chat-input-status {
    justify-content: flex-start;
  }

  .nn-ai-chat-select-menu {
    max-width: 100%;
  }

  .nn-ai-chat-action-buttons {
    order: 3;
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }

  .nn-ai-chat-tools-trigger {
    min-width: 0;
  }

  .nn-ai-chat-tools-dropdown {
    left: 0;
    right: auto;
    min-width: 200px;
  }
}

.nn-ai-chat-footer textarea::placeholder,
.nn-ai-chat-footer textarea::-webkit-input-placeholder,
.nn-ai-chat-footer textarea:-moz-placeholder,
.nn-ai-chat-footer textarea::-moz-placeholder,
.nn-ai-chat-footer textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.8) !important;
  opacity: 1; /* important for Firefox */
}

.nn-ai-chat-default-text {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding-top: 15px;
}
.nn-ai-chat-logo {
  margin-right: 10px;
}

/* Classic (floating) chat window: render the welcome message with the same
   stacked kicker + hero treatment as the embedded "new AI mode" panel.
   Scoped with :not(.nn-ai-chat-window-embedded) so the panel is untouched. */
.nn-ai-chat-window:not(.nn-ai-chat-window-embedded) .nn-ai-chat-default-text {
  flex-direction: column;
  align-items: flex-start;
}

.nn-ai-chat-window:not(.nn-ai-chat-window-embedded)
  .nn-ai-chat-default-text
  .nn-ai-chat-logo {
  display: none;
}

.nn-ai-chat-window:not(.nn-ai-chat-window-embedded)
  .nn-ai-chat-default-text
  .nn-new-ai-welcome-kicker {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}

.nn-ai-chat-window:not(.nn-ai-chat-window-embedded)
  .nn-ai-chat-default-text
  .nn-new-ai-welcome-hero {
  display: block;
  margin-top: 8px;
  font-size: clamp(25px, 1vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.nn-ai-chat-window:not(.nn-ai-chat-window-embedded)
  .nn-ai-chat-default-text
  .nn-new-ai-welcome-sub {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #6b7c93;
}

/* Context bar: dynamic Source / Tool / Web Search summary above the welcome
   text. Sections are separated by a thin vertical divider. */
.nn-ai-chat-context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 0 2px 0;
  font-size: 12px;
  line-height: 1.3;
}

/* Light-grey background by default; turns light blue when the value changes
   (see .is-changed, toggled by updateNnAiChatContextBar). */
.nn-ai-chat-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #eef1f5;
  white-space: nowrap;
}

.nn-ai-chat-context-chip.is-changed {
  background: #e1ecfb;
}

/* Source and Tool keep a fixed background regardless of the selected value. */
.nn-ai-chat-context-chip--source {
  background: #e7f7ec;
}

.nn-ai-chat-context-chip--tool {
  background: #e8eefc;
}

.nn-ai-chat-context-chip-label {
  color: #334155;
}

.nn-ai-chat-context-chip-value {
  color: #475569;
}

/* Files attached to a chat (populated after upload, see nnAiRenderChatAttachments). */
.nn-ai-chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 8px 0;
}
.nn-ai-chat-attachments[hidden] {
  display: none;
}
/* Chat attachment chip: big coloured file icon + name (no close button). */
.nn-ai-chat-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 6px 12px 6px 6px;
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.08);
  border: 1px solid rgba(127, 127, 127, 0.18);
  line-height: 1.2;
}
.nn-ai-chat-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

/* Project Sources list — the current user's uploaded files for a project. */
.nn-new-ai-source-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 36px 10px 4px; /* right room for the hover three-dot menu */
  border-bottom: 1px solid rgba(127, 127, 127, 0.12);
  font-size: 14px;
  color: inherit;
}
.nn-new-ai-source-item:hover {
  background: rgba(127, 127, 127, 0.06);
}
.nn-new-ai-source-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Reveal the three-dot menu button on row hover (mirrors recent-chat rows). */
.nn-new-ai-source-item:hover .nn-new-ai-recent-chat-menu-btn,
.nn-new-ai-source-item .nn-new-ai-recent-chat-menu-btn.nn-menu-open {
  opacity: 1;
  pointer-events: auto;
}
.nn-new-ai-sources-loading,
.nn-new-ai-sources-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  color: #64748b;
  font-size: 13px;
}

/* Big rounded file-type icon (chat chips + Sources rows). Doubles as the
   indexing indicator: a white ring spinner -> the type glyph when indexed. */
.nn-ai-file-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  background: #64748b;
}
.nn-ai-file-icon.is-pdf {
  background: #e2483d;
}
.nn-ai-file-icon.is-word {
  background: #2b579a;
}
.nn-ai-file-icon.is-text {
  background: #3b82f6;
}
.nn-ai-file-icon.is-generic {
  background: #64748b;
}
.nn-ai-file-icon.is-failed {
  background: #dc2626;
}
/* File-type text label inside the badge (PDF / TXT / DOCX ...). */
.nn-ai-file-ext {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
  color: #fff;
}
.nn-ai-icon-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: nn-ai-spin 0.7s linear infinite;
  box-sizing: border-box;
}
@keyframes nn-ai-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Themed confirmation dialog (nnAiConfirm). Reuses nn-create-project-* layout. */
.nn-ai-confirm-overlay {
  z-index: 100000;
}
.nn-ai-confirm-modal {
  max-width: 440px;
}
.nn-ai-confirm-body p {
  margin: 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.5;
}
.nn-ai-confirm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid #e2e8f0;
}
.nn-ai-confirm-btn {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.nn-ai-confirm-cancel {
  background: #f1f5f9;
  color: #334155;
}
.nn-ai-confirm-cancel:hover {
  background: #e2e8f0;
}
.nn-ai-confirm-primary {
  background: #2563eb;
  color: #fff;
}
.nn-ai-confirm-primary:hover {
  background: #1d4ed8;
}
.nn-ai-confirm-danger {
  background: #dc2626;
  color: #fff;
}
.nn-ai-confirm-danger:hover {
  background: #b91c1c;
}

.nn-ai-chat-answer-content code {
  padding: 0;
}

.nn-ai-chat-header button.min-max-btn i,
.nn-ai-chat-header button.close-btn i {
  color: #ffffff !important;
  font-size: 12px;
  padding: 0 5px;
}
.nn-ai-chat-info-msg {
  color: #909090;
  font-style: italic;
  text-align: center;
}

.nn-ai-chart-button-text {
  padding: 0 0 10px 0;
}
/* ------ Loading Dots -------- */
.nn-ai-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}

.nn-ai-loading-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #555;
  animation: nn-ai-loading-dot-animation 1.4s infinite ease-in-out both;
}

.nn-ai-loading-dots span:nth-child(1) {
  animation-delay: 0s;
}

.nn-ai-loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.nn-ai-loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes nn-ai-loading-dot-animation {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: scale(0.7);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }
}
/* --------------------- */

.nn-ai-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #ccc;
  border-top-color: #555;
  border-radius: 50%;
  animation: nn-ai-spin 0.8s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}

@keyframes nn-ai-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------- */
/* Live SQL-progress checklist (append-only steps shown while an AI       */
/* request is in flight).                                                  */
/* --------------------------------------------------------------------- */
.nn-ai-progress-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 0;
}

.nn-ai-progress-step {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  line-height: 1.35;
  animation: nn-ai-progress-step-in 0.25s ease-out both;
}

@keyframes nn-ai-progress-step-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nn-ai-progress-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* The shared .nn-ai-spinner has a right margin meant for inline use; reset
   it inside a step row so the icon stays centered in its 18px slot. */
.nn-ai-progress-step-icon .nn-ai-spinner {
  margin-right: 0;
}

.nn-ai-progress-step-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Completed step: green check, muted text. */
.nn-ai-progress-step-done .nn-ai-progress-step-icon {
  color: #2e9e5b;
}
.nn-ai-progress-step-done .nn-ai-progress-step-text {
  color: #5a6b7b;
}

/* Pop the check in when a step completes (the icon node is freshly created at
   that moment, so this runs once per completion — not on every poll). */
.nn-ai-progress-step-done .nn-ai-progress-step-icon svg {
  animation: nn-ai-progress-check-pop 0.22s ease-out both;
}
@keyframes nn-ai-progress-check-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Active step: currently processing while the next poll is awaited. */
.nn-ai-progress-step-active .nn-ai-progress-step-text {
  color: #2b3a47;
  font-style: italic;
}

/* Error step: red warning, red text (final row when a request fails). */
.nn-ai-progress-step-error .nn-ai-progress-step-icon {
  color: #d6455d;
}
.nn-ai-progress-step-error .nn-ai-progress-step-text {
  color: #d6455d;
  font-weight: 500;
}

/* Action row (Retry / Copy details) shown under the error checklist. */
.nn-ai-progress-error-actions {
  margin-top: 12px;
}

/* "View all" arrow link under the in-chat progress steps — opens the full log
   in the right preview pane. */
.nn-ai-progress-expand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #4a73e8;
  text-decoration: none;
  cursor: pointer;
}
.nn-ai-progress-expand:hover {
  color: #2f56c4;
  text-decoration: underline;
}
.nn-ai-progress-expand svg {
  transition: transform 0.15s ease;
}
.nn-ai-progress-expand:hover svg {
  transform: translateX(2px);
}

/* "View Data" link appended to a progress step that carried a details payload. */
.nn-ai-progress-viewdata {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #4a73e8;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.nn-ai-progress-viewdata:hover {
  color: #2f56c4;
  text-decoration: underline;
}

/* Command-data popup (opened by the "View Data" link). */
.nn-ai-cmddata-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}
.nn-ai-cmddata-modal {
  background: #fff;
  width: min(760px, 92vw);
  max-height: 82vh;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nn-ai-cmddata-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e6e8ec;
}
.nn-ai-cmddata-title {
  font-size: 14px;
  font-weight: 600;
  color: #2b3a47;
}
.nn-ai-cmddata-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #8a94a6;
  cursor: pointer;
  padding: 0 4px;
}
.nn-ai-cmddata-close:hover {
  color: #d33;
}
.nn-ai-cmddata-body {
  padding: 14px 16px;
  overflow: auto;
}
.nn-ai-cmddata-pre,
.nn-json-plain {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: #1f2937;
}
.nn-ai-cmddata-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nn-ai-cmddata-btn {
  border: 1px solid #d5d9e0;
  background: #f6f8fa;
  color: #3a4a5b;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
.nn-ai-cmddata-btn:hover {
  background: #eceff3;
  border-color: #c4cad3;
}

/* =====================================================================
   Common JSON viewer (nnRenderJsonViewer) -- reusable anywhere in the UI.
   ===================================================================== */
.nn-json-tree {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: #1f2937;
}
.nn-json-children {
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid #e6e8ec;
}
.nn-json-row {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
}
.nn-json-toggle {
  cursor: pointer;
  border-radius: 4px;
}
.nn-json-toggle:hover {
  background: #f2f5f9;
}
.nn-json-caret {
  flex: 0 0 auto;
  width: 14px;
  text-align: center;
  color: #8a94a6;
  user-select: none;
}
.nn-json-key {
  flex: 0 0 auto;
  color: #8250df;
}
/* A node whose value was a stringified-JSON field (parsed for display). The key
   gets a subtle marker so it's clear the original value was a JSON string. */
.nn-json-fromstring > .nn-json-toggle > .nn-json-key::after {
  content: " (json)";
  color: #8a94a6;
  font-style: italic;
}
.nn-json-value {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.nn-json-punct {
  color: #6e7781;
}
.nn-json-summary {
  display: none;
  margin: 0 6px;
  color: #8a94a6;
  font-style: italic;
}
.nn-json-close-inline {
  display: none;
}
.nn-json-close-row {
  padding-left: 14px;
}

/* Value type colours. */
.nn-json-string {
  color: #1a7f37;
}
.nn-json-number {
  color: #0550ae;
}
.nn-json-boolean {
  color: #cf222e;
}
.nn-json-null {
  color: #6e7781;
  font-style: italic;
}

/* Collapsed object/array: hide children + trailing brace, show inline summary. */
.nn-json-collapsed > .nn-json-children,
.nn-json-collapsed > .nn-json-close-row {
  display: none;
}
.nn-json-collapsed > .nn-json-toggle .nn-json-summary,
.nn-json-collapsed > .nn-json-toggle .nn-json-close-inline {
  display: inline;
}

/* Full progress log rendered inside the right preview pane. */
.nn-ai-progress-preview {
  padding: 4px 2px;
}
.nn-ai-progress-preview-title {
  font-size: 13px;
  font-weight: 600;
  color: #2b3a47;
  margin-bottom: 10px;
}

/* =====================================================================
   AI request error card — classic mode.
   The AI-only-mode styles live in nn_new_AI_Mode.css scoped to
   .nn-new-ai-chat-panel (not present in classic mode). These mirror them
   scoped to .nn-ai-chat-window, which both modes share, so the error card
   renders correctly in classic floating chat windows too.
   ===================================================================== */
.nn-ai-chat-window .nn-ai-chat-answer-container.nn-ai-error-card {
  background: #fdf8ec;
  border: 1px solid #f3e2a8;
  text-align: left;
}
.nn-ai-chat-window .nn-ai-chat-error-response {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
}
.nn-ai-chat-window .nn-ai-error-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fbe6bd;
  color: #ea580c;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nn-ai-chat-window .nn-ai-error-body {
  flex: 1 1 auto;
  min-width: 0;
}
.nn-ai-chat-window .nn-ai-error-title {
  font-size: 17px;
  font-weight: 700;
  color: #1f2d3d;
  line-height: 1.3;
}
.nn-ai-chat-window .nn-ai-error-subtext {
  margin-top: 5px;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.45;
}
.nn-ai-chat-window .nn-ai-error-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.nn-ai-chat-window .nn-ai-error-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease;
}
.nn-ai-chat-window .nn-ai-error-btn-primary {
  background: #1d3a5f;
  color: #fff;
  border: 1px solid #1d3a5f;
}
.nn-ai-chat-window .nn-ai-error-btn-primary:hover {
  background: #162c47;
}
.nn-ai-chat-window .nn-ai-error-btn-secondary {
  background: #fff;
  color: #1f2d3d;
  border: 1px solid #d8dee6;
}
.nn-ai-chat-window .nn-ai-error-btn-secondary:hover {
  background: #f4f6f8;
}
.nn-ai-chat-window .nn-ai-error-details {
  margin-top: 14px;
}
.nn-ai-chat-window .nn-ai-error-details > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  position: static;
  cursor: pointer;
  color: #1d3a5f;
  font-weight: 600;
  font-size: 14px;
}
.nn-ai-chat-window .nn-ai-error-details > summary::-webkit-details-marker {
  display: none;
}
.nn-ai-chat-window .nn-ai-error-details > summary::marker {
  content: "";
  font-size: 0;
}
.nn-ai-chat-window .nn-ai-error-details > summary::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
.nn-ai-chat-window .nn-ai-error-chevron {
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s ease;
}
.nn-ai-chat-window .nn-ai-error-details[open] > summary .nn-ai-error-chevron {
  transform: rotate(90deg);
}
.nn-ai-chat-window .nn-ai-error-detail-text {
  margin-top: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #555;
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
}

@keyframes nn-ai-recording-wave {
  0%,
  100% {
    height: 3px;
    opacity: 0.6;
  }
  50% {
    height: 12px;
    opacity: 1;
  }
}

@keyframes nn-ai-recording-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

/* ---------------------------------------------------------------------------- */
.modal-help {
  clear: both;
  padding: 10px 0 0 0;
  font-style: italic;
  color: #3a3a3a;
  border-top: 1px solid #3289d0;
}

.modal-search-btn {
  width: auto;
  padding: 9px 6px;
  font-size: 16px;
  /* background-color: #0078d4; */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-image: linear-gradient(
    to right,
    #5ab4ff 0%,
    #2277bd 51%,
    #5ab4ff 100%
  );
  transition: 0.5s;
  background-size: 200% auto;
  box-shadow: 0 0 20px #eee;
  margin: 8px 0 10px 10px;
}
.modal-search-btn i {
  color: #ffffff;
}

/* Overriding CSS */

#placeholder-container-wrapper .view-parent-container table td,
#placeholder-container-wrapper-large .view-parent-container table td {
  text-align: left;
}
.note-tooltip-content {
  color: #ffffff !important;
}
.note-btn {
  font-size: 10px;
}

.iti--allow-dropdown input {
  padding-right: 6px !important;
  padding-left: 52px !important;
  margin-left: 0 !important;
}

#homepagerightsmallcontainer.ui-widget-content,
#homepagerightsmallcontainer,
#homepageleftbigcontainer.ui-widget-content,
#homepageleftbigcontainer {
  border-top: 3px solid #fd8d02 !important;
  background: var(--home-page-container-background-color) !important;
}
.dashboard-section-title {
  height: 28px;
  padding: 5px 0 5px 10px;
  margin: 0 0 5px 0;
  background: linear-gradient(90deg, #2980b9, #2c3e50);
}
.duenow-table-container,
.userlistcontainer,
.webinarListcontainer {
  height: 400px;
  overflow: auto;
  scrollbar-width: thin;
}
.duenow-table-container {
  margin: 0 2px;
}
.duenow-table-container .nn-table-border {
  margin-top: 0;
}

.dashboard-section-title .tileshelpcontent {
  color: #ffffff;
}
.dashboard-section-title [id^="closebtnNN30"] {
  margin-top: -15px;
}

#summarytablecontainer .dashboard-section-title h2 {
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 600;
  padding-right: 5px;
  letter-spacing: 1px;
}

div#summarytablecontainer[data-status="normaluser"] {
  display: flex;
  flex-wrap: wrap;
}

#hideimgbuttonhomepageleftbigcontainer {
  padding-left: 14px;
}
#hideimgbuttonhomepagerightsmallcontainer {
  padding-left: 14px;
  padding-top: 10px;
  padding-bottom: 2px;
}

#legendparentcontainer {
  /* padding: 10px; */
  margin: 0 10px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 10px;
  align-content: start;
}
#singlepagehomediv {
  display: flex;
}
#homepageleftbigcontainer {
  flex: 1;
  margin: 5px 15px 40px 10px;
}
#homepagerightsmallcontainer {
  margin-right: 10px;
}

/* ----- */
.modal2-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  background: white;
  border-radius: 12px;
  padding: 24px 32px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  width: 90%;
}

.modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.modal-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

#acceptCallBtn {
  background-color: #4caf50;
  color: white;
}

#rejectCallBtn {
  background-color: #f44336;
  color: white;
}

.hidden {
  display: none;
}

/* Socket Call Popup Window CSS */

.socketcall-popup {
  position: fixed;
  top: 20px;
  right: -400px;
  width: 320px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
  border-radius: 16px;
  padding: 20px;
  z-index: 9999;
  animation: socketcall-slideInRight 0.7s cubic-bezier(0.23, 1, 0.32, 1)
    forwards;
}

@keyframes socketcall-slideInRight {
  0% {
    right: -400px;
    opacity: 0;
    transform: scale(0.95);
  }

  60% {
    right: 30px;
    opacity: 1;
    transform: scale(1.05);
  }

  100% {
    right: 20px;
    transform: scale(1);
  }
}

.socketcall-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

.socketcall-header .fa-phone-volume {
  color: #10b981;
  animation: socketcall-pulseIcon 1.5s infinite;
}

@keyframes socketcall-pulseIcon {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

.socketcall-subtext {
  margin-top: 12px;
  margin-bottom: 16px;
  color: #666;
  font-size: 0.95rem;
}

.socketcall-buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}

.socketcall-buttons button {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.socketcall-answer {
  background: #22c55e;
  color: white;
}

.socketcall-reject {
  background: #ef4444;
  color: white;
}

.socketcall-buttons button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.socketcall-reject-message {
  display: flex;
  gap: 8px;
}

.socketcall-reject-message input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.socketcall-reject-message input:focus {
  border-color: #3b82f6;
}

.socketcall-reject-message button {
  background: #6366f1;
  color: white;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition:
    background 0.2s,
    transform 0.2s;
}

.socketcall-reject-message button:hover {
  background: #4f46e5;
  transform: scale(1.05);
}
/* ---------- Ends Here ---------- */

/* ------------ Socket Call Icon ------------ */

.socketcall-call-rect-small,
.socketcall-call-rect-small-concall {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.72rem;
  /* 80% of original 0.4rem 0.9rem */

  font-size: 0.7rem;
  /* 80% of 0.88rem */
  font-weight: 600;
  font-family: system-ui, sans-serif;

  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #298a4d, #22c55e);
  border-radius: 7px;

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.socketcall-call-rect-small i,
.socketcall-call-rect-small-concall i {
  font-size: 0.72rem;
  /* 80% of original 0.9rem */
}

.socketcall-call-rect-small:hover,
.socketcall-call-rect-small-concall:hover {
  transform: scale(1.05);
  filter: brightness(1.07);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
  color: #fff !important;
}

.socketcall-call-rect-small:active,
.socketcall-call-rect-small-concall:active {
  transform: scale(0.94);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

/* ------------ Ends Here ------------ */

#winpagemaincontainer {
  height: 90vh;
}
.users-invite-bar {
  background-color: #f4f4f4;
  padding: 10px 0 5px 20px;
}
.socket-adduserbtn {
  cursor: pointer;
  margin: 0 0 0 5px;
}
.users-invite-bar select {
  min-width: 150px;
  width: 250px !important;
}

/* -- To Retain the spaces between the texts -- */

table.dataTable.display tbody td,
div.view-parent-container table.nn-table-border td {
  white-space: pre-wrap;
}
/* -------------------------------------------- */

/* -------- Dashboard Cosmetic Changes -------- */
.resizeboth,
.resize {
  box-shadow:
    rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.resizeboth > table:first-of-type,
.resize > table:first-of-type {
  margin: -15px -15px 10px -15px;
  border-collapse: unset;
  width: -webkit-fill-available;
  background: linear-gradient(90deg, #2980b9, #2c3e50);
  color: white;
}
.resizeboth > table:first-of-type td,
.resize > table:first-of-type td {
  background: linear-gradient(90deg, #2980b9, #2c3e50);
}
.resizeboth > table:first-of-type td .fa-filter,
.resize > table:first-of-type td .fa-filter {
  color: #ffffff;
}
/* -------------------------------------------- */

/* ---------- Fullscreen logout mode ---------- */
.logout-mode {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background: #fff;
  /* White background */
}

.logout-text {
  font-size: var(--font-size-base);
  /* letter-spacing: 1px; */
  animation: logout-fadeInOut 1.5s infinite;
  text-align: center;
}

@keyframes logout-fadeInOut {
  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

.logout-spinner {
  margin-top: 20px;
  border: 4px solid rgba(0, 0, 0, 0.2);
  border-top: 4px solid #1c87c9;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: logout-spin 1s linear infinite;
}

@keyframes logout-spin {
  100% {
    transform: rotate(360deg);
  }
}

.logout-btn {
  margin: 50px;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
}
/* -------------------------------------------- */

/* ------------ Count Down Related ------------ */

.countdown-container {
  border: 1px solid #ccc;
  min-width: 90px;
  text-align: center;
  margin: 0 10px;
  /* padding: 5px; */
  font-size: 12px;
  font-weight: 600;
  color: #2b4c66;
}
.global-search {
  display: flex;
}
.countdown-title {
  font-size: 11px;
  border-bottom: 1px solid;
  padding: 1px;
  /* background-color: #33475b; */
  color: #fff;
  background: linear-gradient(90deg, #2980b9, #2c3e50);
}
.countdown-time {
  padding: 2px;
}

/* -------------------------------------------- */

.chartnotavailable-container {
  color: #832323;
}

.forecast-copytoright-container {
  text-align: center;
}

/* ------ Dante Chat Custom Css ------ */
/* .dante-image-wrapper div.message-badge {
  display: none !important;
} */
.dante-embed-tooltips {
  display: none !important;
}

/* ------------------------------------ */
/* -------- Tiles Full Context Menu ------- */
a[data-tilescontextmenulink="homepagetiles"] {
  width: 100%;
  height: 82%;
}
/* ------------------------------------ */

.nn_fullwidth {
  width: 100%;
}

.nn_fullwidth > .bordertdGE {
  padding: 25px 0 0 25px;
}
.nn_fullwidth > a.button {
  margin: 15px 0 0 25px;
}

.jsonreport .dt-body-right {
  text-align: right !important;
}

/* ----- Map and Import ------- */
input::file-selector-button {
  background-image: linear-gradient(
    to right,
    #5ab4ff 0%,
    #2277bd 51%,
    #5ab4ff 100%
  ); /* margin: 10px; */
  padding: 8px 15px;
  /* text-align: center; */
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-size: 200% auto;
  color: white !important;
  box-shadow: 0 0 20px #eee;
  border-radius: 4px;
  /* display: block;*/
  border: none;
  outline: none;
  cursor: pointer;
}
input::file-selector-button:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.choose-a-file-btn {
  padding: 10px 5px 5px 0px;
}

.mapping-module-links {
  display: inline-block;
  white-space: normal;
  max-width: 100%;
}
.mapping-module-links a {
  background-color: #3498db;
  color: #fff;
  padding: 7px 7px;
  border-radius: 7px;
  white-space: nowrap;
}
.mapping-module-links a:hover {
  background-color: #1779ba;
  color: #fff;
}
.map-import-input-label {
  padding: 12px 5px 0px 0px;
  font-weight: bold;
}
.map-import-comment-title,
.map-import-mapping-title {
  font-weight: bold;
  color: var(--title-font-color);
}
.map-import-comment-title {
  padding: 0px 0px 5px 2px;
}
.map-import-mapping-title {
  padding: 0px 0px 20px 2px;
}
.map-import-textarea {
  width: 100%;
}

/* ----------------------------- */

.global-search .input-group-field {
  width: 100px !important;
  min-width: 100px !important;
  transition: width 0.3s ease;
  /* padding: 4px; */
  box-sizing: border-box;
}

/* Expand on hover and focus */
.global-search .input-group-field:hover,
.global-search .input-group-field:focus {
  width: 200px !important;
}

nav h1 {
  font-size: 16px !important;
}

nav .nnprofilelink {
  font-size: 14px !important;
}

nav .nn-heading-font {
  font-weight: 600 !important;
}
nav .dropdown.menu a {
  padding: 0.7rem 0.8rem;
}

nav .dropdown.menu > li.is-dropdown-submenu-parent > a {
  padding-right: 1.5rem !important;
}

/* nav .dropdown.menu a {
  padding: 0.4rem 0.5rem !important;
} */

input.input-group-field::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
}

input.input-group-field::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
}

input.input-group-field:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
}

input.input-group-field::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
}

.fa-magic-icon::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0d0"; /* magic wand icon */
  font-size: 14px;
}

.contextualMenuItemIcon {
  width: auto !important;
  padding: 0 5px !important;
}
.contextualHoverMenuItem {
  padding: 2px 0px 3px 10px !important;
}

/* ------- Resource Centre ---------- */

/* Top-left trigger button */

/* Parent resourceCenter Div */
#resourceCenterParent {
  position: fixed;
  bottom: 0px;
  right: 5px;
  width: 450px;
  height: 90vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  display: none;
  overflow: hidden;
  z-index: 9999999;
}

/* Header */
.resourceCenter-header {
  height: 46px;
  background: #2563eb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 14px;
  background: linear-gradient(90deg, #2980b9, #2c3e50);
  font-weight: 700;
}

.header-left {
  display: flex;
  align-items: center;
}
.resourceCenter-header i {
  margin: 0 10px 0 0;
}
.back-btn {
  /* background: transparent; */
  background: #2b3f52;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  margin-right: 10px;
  display: none;
  padding: 3px 4px;
  font-weight: 600;
}

.close-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

/* Main content */
#resourceCenterMain {
  padding: 0px 16px;
  /* display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px; */
}

/* .resourceCenter-btn {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
}

.resourceCenter-btn:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  background: linear-gradient(90deg, #2980b9, #2c3e50);
  color: #fff;
} */
.resourceCenter-btn {
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  cursor: pointer;

  font-size: 13px;
  /* color: #111; */
  color: #2c3f51;

  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

/* icon */
.resourceCenter-btn .rc-icon {
  font-size: 14px;
  z-index: 1;
  position: relative;
}

/* vertical divider */
.resourceCenter-btn .rc-divider {
  width: 1px;
  height: 18px;
  background-color: #b1b1b1;
  z-index: 1;
}

/* label */
.resourceCenter-btn .rc-label {
  position: relative;
  z-index: 1;
}

/* gradient overlay */
.resourceCenter-btn::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(90deg, #2980b9, #2c3e50);
  /* background: #eef2ff; */
  background-size: 200% 100%;
  background-position: 0% 50%;

  opacity: 0;
  transition:
    opacity 0.2s ease,
    background-position 0.4s ease;

  z-index: 0;
}

.resourceCenter-btn:hover::before {
  opacity: 1;
  background-position: 100% 50%;
}

.resourceCenter-btn:hover {
  border-color: #c7d2fe;
  color: #ffffff;
}

/* make icon + divider turn white on hover */

.resourceCenter-btn:hover .rc-divider {
  background-color: #f6f7fb;
}
.resourceCenter-btn:hover .rc-icon {
  color: #ffffff;
}
/* Iframe container */
#resourceCenterChatBotIframe {
  position: absolute;
  top: 46px;
  left: 0;
  width: 100%;
  height: calc(100% - 46px);
  display: none;
  background: #fff;
}
.resourceCenterSection-btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.resourceCenterSection-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 0 8px 5px;
  border-bottom: 1px solid #c8c8c8;
  margin: 0 0 20px 0;
  box-shadow: 0 2px 20px -2px rgb(0 0 0 / 18%);
  /* background: #cee5ff; */
  /* background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ebf3fc),
    to(#d5e5f9)
  ); */
  background-image: linear-gradient(
    90deg,
    rgb(10, 99, 158) 0%,
    rgb(60, 166, 236) 100%
  );
}
.resourceCenter-Sections {
  padding: 20px 0px 5px 0px;
}
.resourceCenterSection-mainContent {
  padding: 10px 0px 0px 0px;
}
.onboarding-process-title {
  background-image: linear-gradient(
    90deg,
    rgb(10, 99, 158) 0%,
    rgb(60, 166, 236) 100%
  );
  color: #fff;
  font-weight: 600;
}
#step1videopreview td,
#step2videopreview td {
  text-align: center !important;
  padding: 15px 0px;
}
.onboarding-progress-containers {
  padding: 20px 0px;
}
.youtube-preview-thumbnail {
  width: 90% !important;
  text-align: center;
}
.resourceCenterSection-mainContent-name {
  font-size: 20px;
  padding: 10px 0px;
  font-weight: 600;
  color: #0a639e;
}
.resourceCenterSection-mainContent-title {
  padding: 5px 0px;
  font-weight: 600;
  font-size: 14px;
  color: #0a639e;
}

.manual-save {
  margin: 10px 5px 12px 0;
  padding: 2px 10px 2px 6px;
}

/* ---------- Attachment Plugin -------------*/

.dropZone {
  border: 2px dashed #c7cdd9;
  border-radius: 14px;
  padding: 45px 20px;
  text-align: center;
  background: #fff;
  transition: 0.25s;
  cursor: pointer;
}

.dropZone:hover {
  border-color: #4f73ff;
  background: #f8faff;
}

.dropZone.drag {
  border-color: #2f54eb;
  background: #eef3ff;
}

.upload-item {
  display: flex;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  margin-bottom: 12px;
  transition: 0.45s ease;
  border: 0.2px solid #f0f0f0;
}

.fade-out {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.upload-icon {
  width: 48px;
  margin-right: 12px;
}

.upload-header {
  display: flex;
  justify-content: space-between;
}

.file-name {
  font-weight: 600;
  outline: none;
  cursor: text;
}

.rename-input {
  font-weight: 600;
  font-family: inherit;
  padding: 2px 4px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  width: 260px;
}

.file-size {
  color: #6b7280;
  font-size: 13px;
}

.progress {
  background: #e5e7eb;
  border-radius: 20px;
  height: 10px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-bar {
  height: 10px;
  background: linear-gradient(90deg, #4f73ff, #8aa4ff);
  width: 0%;
}

.upload-footer {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #383838 !important;
  font-style: italic;
}

.status.success {
  color: #10b981;
}

.status.error {
  color: #ef4444;
}

.upload-footer button {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 4px 8px;
  background: #fff;
  cursor: pointer;
  margin-left: 6px;
}

.upload-footer button:hover {
  background: #f3f4f6;
}

.uploadAllBtn {
  margin: 10px 0px;
}

.uploadAllBtn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-image: linear-gradient(
    to right,
    #dddddd 0%,
    #dddddd 51%,
    #dddddd 100%
  );
  color: #000000 !important;
}

/* .uploadAllBtn {
  margin-top: 15px;
  margin-bottom: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #4f73ff;
  background: #4f73ff;
  color: #fff;
}

.uploadAllBtn:hover {
  background: #3758ff;
} */

.attachment-container {
  width: 100%;
  margin-bottom: 40px;
  margin-top: 10px;
}

.upload-notes {
  background: #f0f4ff;
  border-left: 4px solid #accdf5;
  padding: 16px 20px;
  margin-top: 10px;
  border-radius: 8px;
  color: #1f2937 !important;
  margin-bottom: 10px;
}

.upload-notes strong {
  /* display: block; */
  margin-bottom: 2px;
  /* font-size: 16px; */
}

.upload-notes ul {
  margin: 0;
  padding-left: 20px;
}

.upload-notes li {
  /* margin-bottom: 6px; */
  line-height: 1.3;
  /* font-size: 14px; */
}

.dropZone h3 {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  unicode-bidi: isolate;
}
/* -------------------------------- */
.ai-toggle-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-image: linear-gradient(
    to right,
    #dddddd 0%,
    #dddddd 51%,
    #dddddd 100%
  );
  color: #000000 !important;
}

/*--------------- New System Reports Page ------------------*/
/* ================================
       Search Bar (Pill Style)
    ================================= */
.new-system-reports-search-wrapper {
  display: flex;
  margin-bottom: 18px;
}

.new-system-reports-search-pill {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.new-system-reports-search-label {
  padding: 8px 14px;
  background: linear-gradient(90deg, #2980b9, #2c3e50);
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
  border-right: 1px solid #d1d5db;
}

.new-system-reports-search-pill input {
  border: none;
  outline: none;
  padding: 8px 14px;
  font-size: 12px;
  min-width: 200px;
  background: transparent;
  margin: 0;
  line-height: 15px;
  height: auto;
  box-shadow: none;
}

.new-system-reports-search-pill input:focus {
  box-shadow: none;
  margin: 0;
  border: none;
}

.new-system-reports-search-pill input::placeholder {
  color: #9ca3af;
}

.new-system-reports-search-box input {
  width: 100%;
  max-width: 420px;
  padding: 8px 10px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
}

.new-system-reports-search-box input:focus {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

/* =====================================================
       GRID FULLY DYNAMIC (JS CONTROLS COLUMNS)
       ===================================================== */

.new-system-reports-report-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  justify-items: start;
}

/* =====================================================
       BUTTON STYLES (FULLY RESTORED)
       ===================================================== */

.new-system-reports-report-list a {
  display: grid;
  grid-template-columns: 34px auto;
  align-items: center;

  width: fit-content;
  white-space: nowrap;

  border: 1px solid #cbcbcb;
  border-radius: 5px;
  background: #e9f3ff;
  text-decoration: none;
  color: #1f2937;
  font-size: 12px;
  font-weight: 500;
  min-height: 34px;
  overflow: hidden;

  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.06);

  transition:
    box-shadow 0.2s ease,
    transform 0.15s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.new-system-reports-icon-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 6px 0;
  background: linear-gradient(90deg, #f1a458, #f17b05);
  color: #ffffff;
  transition: background 0.25s ease;
}

.new-system-reports-icon-strip i {
  font-size: 12px;
}

.new-system-reports-label {
  padding: 4px 8px;
  line-height: 1.25;
}

.new-system-reports-mark {
  background: #fde68a;
  padding: 0 2px;
}

.new-system-reports-report-list a:hover {
  background: #f9fafb;
  border-color: #c7d2fe;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.08);
  transform: translateY(-0.5px);
}

.new-system-reports-report-list a:hover .new-system-reports-icon-strip {
  background: linear-gradient(90deg, #f17b05, #f1a458);
}

.new-system-reports-report-list a:active {
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.new-system-reports-report-list a:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.new-system-reports-count {
  margin-top: 15px;
  font-size: 12px;
  color: #4b5563;
  font-weight: 500;
  margin-left: 2px;
  font-style: italic;
}

/* =====================================================
       PRINT STYLES (RESTORED)
       ===================================================== */

@media print {
  .new-system-reports-search-box {
    display: none;
  }

  .new-system-reports-report-list a {
    border: 1px solid #000;
    color: #000;
    background: none;
    box-shadow: none;
    transform: none;
  }

  .new-system-reports-icon-strip {
    background: #000;
    color: #fff;
  }

  li {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

.system-reports-table-border {
  border-collapse: unset;
}
/*-----------------------*/

.top-navitation-search-text {
  color: #fff;
  font-size: 13px;
  margin-left: 5px;
  font-weight: 600;
}

.nn-profile-name-nav-extension {
  position: relative;
  width: fit-content;
  margin-left: 20px;
  margin-top: -1px;
  padding: 4px 10px;
  text-align: center;
  background: #e6effb;
  /* background: linear-gradient(90deg, #2980b9, #2c3e50); */
  /* border: 1px solid #b7d4ff; */
  border: 1px solid #d0d0d0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 5px rgb(146 146 146 / 19%);
  z-index: 11;
  color: #800000;
  font-weight: 600;
  font-size: 11px;
}

.input-group-button i {
  font-size: 14px !important;
}
.input-group-button a,
.input-group-button button {
  padding: 0.6rem 0.7rem;
}

/* ------------ Report View Creation/Edit Page ----------- */

[id="VIEWREPORTEDITPAGE"] .nnlabel {
  width: 125px;
  min-width: 100px;
}

.viewreport-checkboxes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: #eaf2fc;
  padding: 10px 20px;
  margin-left: 138px;
  margin-top: 5px;
}
td.viewreport-checkboxes > div {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  gap: 2px;
}
[id="VIEWREPORTEDITPAGE"] a i.fa-caret-square-down {
  color: inherit;
}

[id="VIEWREPORTEDITPAGE"] .select2-container-multi .select2-choices,
[id="CREATEEDITDASHBOARD"] .select2-container-multi .select2-choices {
  border: none;
  background-image: none;
}
[id="CREATEEDITDASHBOARD"] .select2-container-multi .select2-choices {
  max-width: 450px;
}
[id="CREATEEDITDASHBOARD"]
  .select2-container-multi
  .select2-choices
  .select2-search-field {
  display: contents;
}
[id="CREATEEDITDASHBOARD"]
  .select2-container-multi
  .select2-choices
  .select2-search-field
  input[type="text"] {
  min-width: 450px !important;
}
[id="VIEWREPORTEDITPAGE"] #widget-0-4-5-10-char {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 125px;
}
[id="VIEWREPORTEDITPAGE"] #widget-0-4-5-10-num {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 0 0 100px;
}

[id="VIEWREPORTEDITPAGE"] .viewreport-newsortarea,
[id="VIEWREPORTEDITPAGE"] .viewreport-selectedcriteria {
  margin: 0 0 0 80px;
}

/* -------------------------------------------------------- */

.datatable-sticky-header th {
  position: sticky;
  top: 0;
  text-align: left;
  background-color: #eaf2fc;
}

/* ---------------------------- New Main Navigation Bar ----------------------- */

/* --- LAYOUT CONTAINERS --- */
.nn-newnav-app-header {
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.nn-newnav-nav-row {
  display: flex;
  align-items: center;
  padding: 8px 16px;
}

.nn-newnav-border-bottom {
  border-bottom: 1px solid #d1d5db;
}

.nn-newnav-desktop-right-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: flex-end;
}

/* --- UNIFIED LOGO --- */
.nn-newnav-logo {
  font-size: 16px;
  font-weight: 800;
  color: #007ed1;
  flex-shrink: 0;
  margin-right: 15px;
  text-transform: none;
  letter-spacing: -0.5px;
}

/* --- MENU LIST DEFAULTS --- */
.nn-newnav-menu-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nn-newnav-menu-list li {
  position: relative;
  display: flex;
  align-items: center;
}

/* --- PROFILE BOX --- */
.nn-newnav-profile-link {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 12px !important;
  background: #ffffff;
  border: 1px solid #b0bec5;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  color: #334155;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

/* --- SESSION BADGE --- */
.nn-newnav-session-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(to bottom, #fff8e1, #ffecb3);
  border: 1px solid #ffd54f;
  border-radius: 6px;
  font-size: 11px;
  color: #92400e;
  white-space: nowrap;
  min-width: 132px;
}

.nn-newnav-session-bold {
  font-weight: 700;
}
.nn-newnav-session-badge span:first-of-type {
  font-weight: bold;
}

/* --- SEARCH --- */
.nn-newnav-search-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.nn-newnav-search-pill {
  display: flex;
  align-items: center;
  border: 1px solid #b0bec5;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}

.nn-newnav-search-pill input {
  border: none;
  padding: 5px 12px;
  outline: none;
  width: 140px;
  font-size: 12px;
  font-family: inherit;
  margin: unset;
  min-width: 100px;
  height: unset;
  line-height: initial;
  border-radius: unset;
  box-shadow: none;
}

.nn-newnav-search-pill input::placeholder {
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
}

.nn-newnav-search-pill input:focus {
  border: none;
  box-shadow: none;
  transition: none;
  background-color: none;
}

.nn-newnav-search-btn,
.nn-newnav-adv-search-btn {
  background: linear-gradient(to bottom, #1979ba, #007ed1);
  color: #fff;
  border: none;
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

/* --- ICON COLORS --- */
.nn-newnav-app-header [data-newnav-item="main-nav"] .fa-bars {
  color: #007ed1;
}

.nn-newnav-app-header .fa-exclamation-triangle {
  color: #ff8f00;
}

.nn-newnav-app-header .fa-plus-circle {
  color: #2e7d32;
}

.nn-newnav-app-header .fa-history {
  color: #5d4037;
}

.nn-newnav-app-header .fa-bookmark {
  color: #0049a7;
}

.nn-newnav-app-header .fa-cog {
  color: #455a64;
}

.nn-newnav-app-header .fa-question-circle {
  color: #7b1fa2;
}

.nn-newnav-app-header .fa-bell {
  color: #d32f2f;
}

.nn-newnav-app-header .fa-phone {
  color: #388e3c;
}

.nn-newnav-app-header .fa-search {
  color: #ffffff;
}

.nn-newnav-app-header .nn-newnav-profile-link i {
  color: #5c6bc0;
  font-size: 18px;
}
.nn-newnav-app-header .fa-chart-bar {
  background: linear-gradient(
    90deg,
    #d35400 0%,
    #27ae60 35%,
    #2980b9 70%,
    #8e44ad 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.nn-newnav-app-header .fa-table {
  background: linear-gradient(180deg, #2980b9, #2c3e50);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.nn-newnav-app-header .fa-file-alt {
  background: linear-gradient(180deg, #f7285b, #cc0033);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.nn-newnav-app-header ul.nn-newnav-menu-list li ul.is-dropdown-submenu li {
  /* box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); */
  border-bottom: 1px solid #dfdfdf;
  /* box-shadow: 0px 1px 1px 1px #f3f3f3; */
  box-shadow: 0px 1px 10px 2px #f6f6f6;
}

.off-canvas-wrapper .position-right ul.accordion-menu li a {
  border-bottom: 1px solid #cacaca;
  box-shadow: 0px 1px 1px 1px #f3f3f3;
}
/* --- DESKTOP SPECIFIC --- */
@media (min-width: 1025px) {
  .nn-newnav-mobile-only {
    display: none !important;
  }

  .nn-newnav-menu-list
    li:not(:last-child):not(.nn-newnav-no-sep):not(.nn-newnav-profile-li):not(
      ul.is-dropdown-submenu li
    )::after {
    content: "";
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: #cbd5e1;
  }

  .nn-newnav-menu-list
    li:not(.nn-newnav-no-sep):not(.nn-newnav-profile-li):hover {
    background-color: #ecf5ff;
    border-radius: 4px;
  }

  .nn-newnav-menu-list
    li
    a:not(
      .nn-newnav-profile-link,
      #nnrunas a,
      .nn-newnav-menu-list li ul li a
    ) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    text-decoration: none;
    color: var(--font-nav-link-color);
    font-size: 13px;
    font-weight: 600;
  }
}

/* --- LOGOUT BUTTON --- */
.nn-newnav-logout-btn {
  background: linear-gradient(to bottom, #fff5f5, #fed7d7) !important;
  border: 1px solid #f56565 !important;
  color: #c53030 !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 4px;
  padding: 0.4rem 0.5rem !important;
}

/* --- MOBILE UI FIXES --- */
@media (max-width: 1024px) {
  .nn-newnav-desktop-only {
    display: none !important;
  }

  .nn-newnav-row-1 {
    justify-content: space-between;
    height: 60px;
  }

  .nn-newnav-mobile-right-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .nn-newnav-profile-link {
    padding: 4px;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .nn-newnav-profile-link span {
    display: none;
  }

  .nn-newnav-app-header .nn-newnav-profile-link i {
    font-size: 24px;
  }

  .nn-newnav-links-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #007ed1;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
  }

  .nn-newnav-mobile-menu {
    position: absolute;
    right: 16px;
    top: 100%;
    width: 280px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    display: none;
    z-index: 1000;
    border: 1px solid #e2e8f0;
    flex-direction: column;
    padding: 15px 0;
  }

  .nn-newnav-mobile-menu .nn-newnav-menu-list {
    flex-direction: column;
    width: 100%;
  }

  .nn-newnav-mobile-menu li {
    width: 100%;
  }

  .nn-newnav-mobile-menu li a:not(.nn-newnav-logout-btn) {
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    display: block;
    text-decoration: none;
    color: #334155;
    font-weight: 600;
  }

  .nn-newnav-mobile-menu .nn-newnav-logout-btn {
    margin: 10px 20px !important;
    padding: 12px !important;
    justify-content: center !important;
    border-radius: 8px !important;
    width: calc(100% - 40px) !important;
    box-sizing: border-box !important;
  }
}

#pageOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4); /* grey overlay */
  z-index: 8000;
  display: none;
}

#no-shared-reports {
  width: auto;
  height: auto;
  overflow: unset;
  display: block;
  padding: 10px 0 10px 15px;
  margin: 0;
  font-size: 12px;
  color: #ff0040;
  font-family: inherit;
  font-weight: 600;
}

#no-shared-reports::before {
  content: "\f071"; /* exclamation-triangle */
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* required for solid icons */
  color: red;
  margin-right: 8px;
}

#nn-Custom-groupby-wrapper {
  margin-top: 10px;
  /* margin-left: 125px; */
  /* margin-bottom: 10px; */
}

#nn-Custom-groupby-input {
  width: 350px;
  padding: 6px;
}

/* .nn-Custom-groupby-dropdown {
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  display: none;
  position: absolute;
  width: 300px;
  z-index: 999;
} */

.nn-Custom-groupby-dropdown-item {
  padding: 6px;
  cursor: pointer;
}

.nn-Custom-groupby-dropdown-item:hover {
  background: #f2f2f2;
}

.nn-Custom-groupby-selected {
  margin-top: 15px;
  margin-left: 125px;
}

.nn-Custom-groupby-item {
  background: #edf4fe;
  padding: 6px 10px;
  margin-bottom: 5px;
  border-radius: 4px;
  cursor: grab;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 350px;
  /* background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%); */
  border: 1px solid #d6d9de;
  /* border-radius: 8px; */
  user-select: none;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.06);

  transition:
    box-shadow 0.2s ease,
    transform 0.15s ease,
    background 0.2s ease;
  gap: 10px;
}
.nn-Custom-groupby-item:hover {
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.08);

  background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
}
.nn-Custom-groupby-item:active {
  cursor: grabbing;
  transform: scale(0.98);

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) inset;
}
.nn-Custom-groupby-item span.nn-Custom-groupby-text {
  color: var(--font-hyperlink-color);
  font-weight: 500;
}
.nn-Custom-groupby-drag-icon {
  color: #8a94a6;
  cursor: grab;
  font-size: 14px;
  opacity: 0.5;
}

.nn-Custom-groupby-item:active .nn-Custom-groupby-drag-icon {
  cursor: grabbing;
}

.nn-Custom-groupby-text {
  flex: 1;
}
.nn-Custom-groupby-close {
  cursor: pointer;
  margin-left: 10px;
  font-weight: bold;
  color: #8a94a6;
  font-size: 14px;
  margin-top: -5px;
  transition: color 0.2s ease;
}
.nn-Custom-groupby-close:hover {
  color: #e74c3c;
}

.nn-Custom-groupby-note {
  padding: 5px 5px 0 5px;
  font-size: 10px;
  color: #808080 !important;
  font-style: italic;
  margin-left: 125px;
}

/* Search Area Layout */
.nn-Custom-groupby-search-area {
  display: flex;
  /* align-items: flex-start; */
  flex-direction: column;
  /* gap: 8px; */
}

/* Wrapper to control dropdown position */
.nn-Custom-groupby-input-wrapper {
  position: relative;
  flex: 1;
}

/* Input */
#nn-Custom-groupby-input {
  /* width: 100%; */
  padding: 6px 10px;
  border: 1px solid #d6d9de;
  border-radius: 6px;
  font-size: 14px;
}

/* Dropdown */
.nn-Custom-groupby-dropdown {
  position: absolute;
  top: 100%; /* Exactly below input */
  left: 0;
  width: 100%;
  background: #ffffff;
  border: 1px solid #d6d9de;
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: none;
}

/* Bulk Button */
.nn-Custom-groupby-bulk-btn {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 6px 12px;
  border: 1px solid #d6d9de;
  background: #ffffff;
  border-radius: 6px;

  font-size: 13px;
  font-weight: 500;
  color: #2f3b52;

  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.nn-Custom-groupby-bulk-btn:hover {
  background: #f3f6fb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.nn-Custom-groupby-bulk-btn i {
  font-size: 13px;
  color: #4a90e2;
}

/* Modal Overlay */
.nn-Custom-groupby-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 15px;
}

/* Modal Box */
.nn-Custom-groupby-modal-content {
  background: #ffffff;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.nn-Custom-groupby-modal-header {
  padding: 12px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e5e8ee;
}

/* Close */
.nn-Custom-groupby-modal-close {
  cursor: pointer;
}

/* Body */
.nn-Custom-groupby-modal-body {
  overflow-y: auto;
  padding: 10px;
}

/* Rows */
.nn-Custom-groupby-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
}

.nn-Custom-groupby-modal-row:hover {
  background: #f5f7fa;
}

.nn-Custom-groupby-modal-row.selected {
  background: #e8f1ff;
  border: 1px solid #4a90e2;
}

/* Footer */
.nn-Custom-groupby-modal-footer {
  padding: 10px;
  border-top: 1px solid #e5e8ee;
  text-align: right;
}

.nn-Custom-groupby-modal-add {
  padding: 6px 14px;
  background: #4a90e2;
  border: none;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.nn-Custom-groupby-modal-add:hover {
  background: #357bd8;
}

/* Mobile Friendly */
@media (max-width: 480px) {
  .nn-Custom-groupby-modal-content {
    max-width: 100%;
    max-height: 90vh;
  }
}

.nn-Custom-groupby-group-header {
  cursor: pointer;
  font-weight: 600;
  padding: 6px 8px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nn-Custom-groupby-group-content {
  padding-left: 18px;
}

.nn-Custom-groupby-group-toggle i {
  transition: transform 0.2s ease;
}

.nn-Custom-groupby-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nn-Custom-groupby-modal-count {
  font-size: 13px;
  font-weight: 500;
  color: #444;
}

.nn-Custom-groupby-search-block {
  display: flex;
  flex-direction: column;
}

.nn-Custom-groupby-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nn-Custom-groupby-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--font-main-color);
  line-height: 1.2;
}

.nn-Custom-groupby-modal .common-btn {
  cursor: pointer;
}

table#newsortareatable #newsortarea {
  margin-left: 60px;
}

.nn-Custom-viewreport-note {
  margin-left: 140px;
  font-style: italic;
}
.nn-Custom-groupby-search-container {
  display: flex;
  align-items: center;
  /* gap: 10px; */
}

.nn-Custom-groupby-label-container {
  width: 125px;
  min-width: 100px;
  font-weight: bold;
  padding: 0.25rem 0.625rem 0.25rem;
}

#selectedwherearea {
  margin-left: 45px;
}

.datatables-AI-btn {
  /* background: linear-gradient(
    180deg,
    #6a11cb,
    #2575fc
  ) !important; linear-gradient(180deg, #2980b9, #2c3e50) !important; */
  /* Applying your chosen Electric Indigo gradient */
  background: linear-gradient(135deg, #6a11cb, #2575fc) !important;

  /* Text Styling */
  color: #ffffff !important;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none !important;
  border-radius: 8px !important;

  /* Animation */
  animation: pulse-glow 2s infinite;
  transition: all 0.3s ease;
}
/* The Animation: Using a soft indigo glow (#6a11cb) */
@keyframes pulse-glow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(106, 17, 203, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 12px rgba(106, 17, 203, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(106, 17, 203, 0);
  }
}

/* ----------- AI Upgrade PopUp Window ------------- */

/* OPEN BUTTON */

.nn-AI-Upgrade-openBtn {
  padding: 12px 22px;
  background: #3d8bfd;
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
}

/* OVERLAY */

.nn-AI-Upgrade-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(200, 210, 225, 0.6);
  z-index: 9999;
}

/* POPUP */

.nn-AI-Upgrade-popup {
  width: 60%;
  height: 75%;
  background: white;
  border-radius: 12px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transform: scale(0.85);
  opacity: 0;
  transition: all 0.35s ease;
}

.nn-AI-Upgrade-overlay.nn-AI-Upgrade-show .nn-AI-Upgrade-popup {
  transform: scale(1);
  opacity: 1;
}

/* HEADER */

.nn-AI-Upgrade-header {
  padding: 14px 20px;
  background: linear-gradient(90deg, #2980b9, #2c3e50);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-weight: 600;
}

.nn-AI-Upgrade-newBadge {
  background: linear-gradient(45deg, #ff5f6d, #ffc371);
  color: white;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.nn-AI-Upgrade-close {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

/* INTRO */

.nn-AI-Upgrade-intro {
  padding: 16px 22px;
  background: #f7fbff;
  border-bottom: 1px solid #e4eefc;
}

.nn-AI-Upgrade-introTitle {
  color: #0049a7;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.nn-AI-Upgrade-introText {
  font-size: 13px;
  color: #444;
  line-height: 1.5;
}

/* FEATURES */

.nn-AI-Upgrade-featureArea {
  flex: 1;
  padding: 15px 20px;
  overflow: auto;
}

.nn-AI-Upgrade-featureBox {
  display: flex;
  background: #f7fbff;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transition: 0.3s;
  opacity: 0;
  transform: translateY(20px);
}

.nn-AI-Upgrade-featureBox.nn-AI-Upgrade-visible {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.5s ease;
}

.nn-AI-Upgrade-featureBox:hover {
  transform: translateY(-3px);
  background: linear-gradient(90deg, #f0f7ff, #ffffff);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.nn-AI-Upgrade-featureBox:hover .nn-AI-Upgrade-icon i {
  transform: translateY(-3px) rotate(-6deg) scale(1.1);
  transition: all 0.25s ease;
}

.nn-AI-Upgrade-icon {
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 3px 0 8px rgba(0, 0, 0, 0.06);
}

.nn-AI-Upgrade-featureText {
  padding: 14px 16px;
}

.nn-AI-Upgrade-featureTitle {
  color: #0049a7;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.nn-AI-Upgrade-featureDesc {
  font-size: 13px;
  color: #444;
  line-height: 1.4;
}

/* ICON COLORS */

.nn-AI-Upgrade-icon1 i {
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nn-AI-Upgrade-icon2 i {
  background: linear-gradient(45deg, #43cea2, #185a9d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nn-AI-Upgrade-icon3 i {
  background: linear-gradient(45deg, #f7971e, #ffd200);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nn-AI-Upgrade-icon4 i {
  background: linear-gradient(45deg, #ff6a88, #ff99ac);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nn-AI-Upgrade-icon5 i {
  background: linear-gradient(45deg, #00c6ff, #0072ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nn-AI-Upgrade-icon6 i {
  background: linear-gradient(45deg, #11998e, #38ef7d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* LEAD SECTION */

.nn-AI-Upgrade-leadSection {
  background: #f3f8ff;
  padding: 20px;
  border-top: 1px solid #dbe8ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nn-AI-Upgrade-leadTextBlock {
  max-width: 70%;
}

.nn-AI-Upgrade-leadTitle {
  color: #0049a7;
  font-size: 20px;
  font-weight: 600;
}

.nn-AI-Upgrade-leadText {
  font-size: 13px;
  color: #444;
  margin-top: 4px;
}

.nn-AI-Upgrade-leadAction {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 180px;
}

/* BUTTON */

.nn-AI-Upgrade-interestBtn {
  padding: 11px 24px;
  background: linear-gradient(to bottom, #1979ba, #007ed1);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nn-AI-Upgrade-interestBtn:hover {
  background: linear-gradient(to bottom, #1b85d0, #0091ea);
}

.nn-AI-Upgrade-interestBtn:disabled {
  background: #c9c9c9;
  color: #666;
  box-shadow: none;
  cursor: default;
}

.nn-AI-Upgrade-btnSpinner {
  width: 14px;
  height: 14px;
  border: 2px solid #d1d5db;
  border-top-color: #9ca3af;
  border-right-color: #6b7280;
  border-radius: 50%;
  display: none;
  animation: nnAIUpgradeSpin 0.8s linear infinite;
}

.nn-AI-Upgrade-loading .nn-AI-Upgrade-btnSpinner {
  display: inline-block;
}

@keyframes nnAIUpgradeSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* SUCCESS */

.nn-AI-Upgrade-success {
  font-size: 13px;
  color: #2c7a2c;
  margin-top: 6px;
  min-height: 18px;
  height: auto;
  visibility: hidden;
  max-width: 500px;
  text-align: right;
}

.nn-AI-Upgrade-success.nn-AI-Upgrade-error {
  color: #b00020;
}

/* PARTICLES */

.nn-AI-Upgrade-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #a8d4ff;
  border-radius: 50%;
  opacity: 0.4;
  animation: nnfloat 10s linear infinite;
}

@keyframes nnfloat {
  from {
    transform: translateY(300px);
  }

  to {
    transform: translateY(-300px);
  }
}

/* CONFETTI */

.nn-AI-Upgrade-confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0.9;
  pointer-events: none;
  animation: nnconfetti 1.4s ease-out forwards;
}

@keyframes nnconfetti {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(-120px) rotate(720deg);
    opacity: 0;
  }
}
/* ------------------------------------------------- */

[id="global-main-search"] div.select2-container {
  min-width: 150px;
}

[id="global-main-search"] ul.select2-choices {
  border: none;
}
[id="global-main-search"] [id="widget-0-4-5-10-char"] {
  display: flex;
  align-items: center;
  gap: 10px;
}

[id="global-main-search"] .input-group {
  margin-bottom: 0;
}

[id="global-main-search"] .non-datatable-table-nonbg {
  width: 100%;
}
[id="global-main-search"] .select2-input {
  width: 200px !important;
}
[id="global-main-search"] input.input-field {
  border: 1px solid #d1d5db !important;
  border-bottom: 2px solid #127abb !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  transition: all 0.4s ease-in-out !important;
  min-height: 39px;
  margin-right: 10px;
}

[id="global-main-search"] .nnlabel {
  width: 150px !important;
}

[id="global-main-search"] .input-group-button button {
  width: auto;
  padding: 12px !important;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-image: linear-gradient(
    to right,
    #5ab4ff 0%,
    #2277bd 51%,
    #5ab4ff 100%
  );
  transition: 0.5s;
  background-size: 200% auto;
  box-shadow: 0 0 20px #eee;
  margin: 0;
}
[id="global-main-search"] select#globalnegation {
  width: auto !important;
  min-width: none !important;
}

[id="global-main-search"] div.select2-container .select2-input {
  width: 200px !important;
}
[id="global-main-search"] #widget-0-4-5-10-char {
  padding-left: 50px;
}

[id="global-main-search"] input#globalCurrentWhereTextValue {
  width: 200px !important;
}
[id="global-main-search"] #widget-0-4-5-10-num {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 50px;
}
[id="global-main-search"] button.close-button {
  top: -5px;
  right: 7px;
}
[id="global-main-search"] table.title-header {
  background: var(--title-background-gradient);
  border-bottom: 1px solid #799db4;
  margin-bottom: 10px;
  border-collapse: unset !important;
}
[id="global-main-search"] table.title-header tbody {
  background-color: unset !important;
}
/* -------------- Release Notes ------------------ */

#nn-new-RN-mounted-panel {
  padding: 10px;
}
.nn-new-RN-launcher-wrap {
  max-width: 900px;
  margin: 0 auto 24px;
}

.nn-new-RN-launcher-btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
}

.nn-new-RN-launcher-btn:hover {
  filter: brightness(1.05);
}

.nn-new-RN-container {
  width: 100%;
  max-width: none;
  margin: 0;
}

.nn-new-RN-panel {
  position: relative;
  background: white;
  border: 1px solid #dbe4f0;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  padding: 32px;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

.nn-new-RN-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 25px;
  height: 25px;
  border: 1px solid #d6e1f0;
  border-radius: 6px;
  background: #eef2ff;
  color: #334155;
  cursor: pointer;
  /* font-size: 16px; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.nn-new-RN-close-btn:hover {
  background: #dbeafe;
}

.nn-new-RN-close-btn i {
  line-height: 1;
}

.nn-new-RN-header {
  margin-bottom: 30px;
}

.nn-new-RN-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.nn-new-RN-title-icon {
  font-size: 30px;
  background: linear-gradient(135deg, #2563eb 0%, #14b8a6 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nn-new-RN-title-text {
  font-size: 20px;
  font-weight: 500;
  color: var(--title-font-color);
  line-height: 1.1;
}

.nn-new-RN-subtitle-text {
  margin-top: 8px;
  color: #475569;
  font-size: var(--font-size-base);
}

.nn-new-RN-search {
  margin-top: 15px;
}

.nn-new-RN-search input {
  width: 100%;
  padding: 10px;
  font-size: var(--font-size-base);
  border-radius: 6px;
  border: 1px solid #ddd;
}

.nn-new-RN-timeline {
  border-left: 3px solid #d9e2ef;
  padding-left: 30px;
}

.nn-new-RN-loading-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding: 32px 24px;
  border: 1px solid #dbe7f5;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
  color: #475569;
  text-align: center;
}

.nn-new-RN-loading-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #dbeafe;
  border-top-color: #2563eb;
  border-radius: 999px;
  animation: nn-new-RN-spin 0.85s linear infinite;
}

.nn-new-RN-loading-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}

.nn-new-RN-loading-text {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.nn-new-RN-empty-state {
  display: none;
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fbff 0%, #f1f7ff 100%);
  color: #475569;
}

.nn-new-RN-empty-state-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
}

.nn-new-RN-empty-state-text {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.nn-new-RN-data-empty-state {
  display: none;
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid #dbe7f5;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
  color: #475569;
}

.nn-new-RN-data-empty-state-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.nn-new-RN-data-empty-state-text {
  font-size: var(--font-size-base);
  line-height: 1.7;
}

@keyframes nn-new-RN-spin {
  to {
    transform: rotate(360deg);
  }
}

.nn-new-RN-month-group {
  margin-top: 20px;
  margin-bottom: 20px;
}

.nn-new-RN-month-title {
  font-size: 18px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;

  background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
  border: 1px solid #e5e7eb;
  border-radius: 8px;

  padding: 12px 16px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  margin-bottom: 15px;
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.nn-new-RN-month-title:hover {
  background: linear-gradient(135deg, #eef6ff 0%, #f8fbff 100%);
  border-color: #d9e9fb;
  box-shadow: 0 6px 18px rgba(148, 184, 224, 0.18);
}

.nn-new-RN-month-title::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: var(--font-size-base);
  line-height: 1;
  transition: transform 0.2s ease;
}

.nn-new-RN-month-group.open .nn-new-RN-month-title::after {
  transform: rotate(-180deg);
}

.nn-new-RN-month-releases {
  display: none;
}

.nn-new-RN-month-group.open .nn-new-RN-month-releases {
  display: block;
}

.nn-new-RN-release {
  position: relative;
  margin-bottom: 30px;
  padding-left: 30px;
}

.nn-new-RN-dot {
  width: 12px;
  height: 12px;
  background: #3b82f6;
  border-radius: 50%;
  position: absolute;
  left: -38px;
  top: 6px;
}

.nn-new-RN-release-date {
  color: #6b7280;
  /* font-size: 13px; */
  margin-bottom: 4px;
}

.nn-new-RN-release-title {
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.nn-new-RN-release-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nn-new-RN-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.nn-new-RN-tag {
  display: inline-block;
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 4px;
  color: white;
  margin-right: 5px;
}

.nn-new-RN-new {
  background: #10b981;
}

.nn-new-RN-improve {
  background: #7ab4f1;
}

.nn-new-RN-fix {
  background: #ef4444;
}

.nn-new-RN-content {
  margin-top: 10px;
  display: none;
}

.nn-new-RN-release.open .nn-new-RN-content {
  display: block;
}

.nn-new-RN-release-title:hover {
  color: #0a639e;
}

.nn-new-RN-release.open .nn-new-RN-release-title {
  color: #0a639e;
}

.nn-new-RN-month-group {
  transition: all 0.2s ease;
}

.nn-new-RN-search-wrapper {
  position: relative;
}

.nn-new-RN-search-wrapper input {
  width: 100% !important;
  padding: 10px 35px 10px 10px;
  font-size: var(--font-size-base);
  border-radius: 6px;
  border: 1px solid #ddd;
}

.nn-new-RN-clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #9ca3af;
  cursor: pointer;
  display: none;
}

.nn-new-RN-clear-btn:hover {
  color: #111827;
}

@media (max-width: 768px) {
  body {
    padding: 16px;
  }

  .nn-new-RN-launcher-wrap {
    margin-bottom: 16px;
  }

  .nn-new-RN-launcher-btn {
    width: 100%;
    justify-content: center;
  }

  .nn-new-RN-panel {
    padding: 20px 16px 18px;
    border-radius: 16px;
  }

  .nn-new-RN-close-btn {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 14px;
  }

  .nn-new-RN-header {
    margin-bottom: 20px;
  }

  .nn-new-RN-title-row {
    align-items: flex-start;
    gap: 10px;
    padding-right: 36px;
  }

  .nn-new-RN-title-icon {
    font-size: 24px;
  }

  .nn-new-RN-title-text {
    font-size: 20px;
    line-height: 1.2;
  }

  .nn-new-RN-subtitle-text {
    margin-top: 6px;
    line-height: 1.5;
  }

  .nn-new-RN-search-wrapper input {
    padding: 10px 34px 10px 10px;
  }

  .nn-new-RN-timeline {
    padding-left: 18px;
    border-left-width: 2px;
  }

  .nn-new-RN-month-group {
    margin-top: 24px;
    margin-bottom: 16px;
  }

  .nn-new-RN-month-title {
    font-size: 18px;
    padding: 10px 12px;
  }

  .nn-new-RN-release {
    padding-left: 20px;
    margin-bottom: 22px;
  }

  .nn-new-RN-dot {
    left: -25px;
    width: 10px;
    height: 10px;
  }

  .nn-new-RN-release-date {
    font-size: 11px;
  }

  .nn-new-RN-release-title {
    font-size: 16px;
    line-height: 1.4;
  }

  .nn-new-RN-release-header {
    gap: 8px;
  }

  .nn-new-RN-tag {
    font-size: 10px;
    padding: 4px 6px;
    margin-right: 0;
  }

  .nn-new-RN-content {
    line-height: 1.6;
    word-break: break-word;
  }

  .nn-new-RN-empty-state {
    margin-top: 18px;
    padding: 14px 16px;
  }

  .nn-new-RN-loading-state {
    margin-top: 18px;
    padding: 20px 16px;
  }

  .nn-new-RN-loading-spinner {
    width: 36px;
    height: 36px;
  }

  .nn-new-RN-loading-title {
    font-size: 14px;
  }

  .nn-new-RN-empty-state-title {
    font-size: 14px;
  }

  .nn-new-RN-data-empty-state {
    margin-top: 18px;
    padding: 16px;
  }

  .nn-new-RN-data-empty-state-title {
    font-size: 14px;
  }
}
/* ------------------------------------------------- */

/* ===== Rich AI mode dropdown (thinking modes) ===== */
.nn-ai-thinking-rich .nn-ai-chat-tools-dropdown {
  min-width: 360px !important;
  max-width: 380px;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.nn-ai-thinking-rich .nn-ai-thinking-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(30, 58, 95, 0.08);
}

.nn-ai-thinking-rich .nn-ai-thinking-head-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f2a4a;
  margin-bottom: 2px;
}

.nn-ai-thinking-rich .nn-ai-thinking-head-sub {
  font-size: 11.5px;
  line-height: 1.4;
  color: #6b7c93;
}

.nn-ai-thinking-rich .nn-ai-chat-tools-dropdown-list {
  padding: 8px;
  max-height: min(62vh, 520px);
  overflow-y: auto;
}

.nn-ai-thinking-rich .nn-ai-thinking-option {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 4px 0 !important;
  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  text-align: left !important;
}

.nn-ai-thinking-rich
  .nn-ai-chat-tools-dropdown-list
  .nn-ai-thinking-option:last-child {
  margin-bottom: 0 !important;
}

.nn-ai-thinking-rich .nn-ai-thinking-option:hover {
  background: #f6f9fe !important;
  border-color: rgba(61, 107, 179, 0.12) !important;
}

.nn-ai-thinking-rich .nn-ai-thinking-option.is-selected {
  background: #f3f8ff !important;
  border-color: rgba(61, 107, 179, 0.45) !important;
}

.nn-ai-thinking-rich .nn-ai-thinking-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nn-ai-thinking-rich .nn-ai-thinking-titlerow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nn-ai-thinking-rich .nn-ai-thinking-option-title {
  font-size: 13px;
  font-weight: 700;
  color: #142e52;
}

.nn-ai-thinking-rich .nn-ai-thinking-option .nn-ai-chat-tool-option-check {
  opacity: 0;
  color: #1f5fc0;
  font-size: 12px;
}

.nn-ai-thinking-rich
  .nn-ai-thinking-option.is-selected
  .nn-ai-chat-tool-option-check {
  opacity: 1;
}

.nn-ai-thinking-rich .nn-ai-thinking-option-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: #46597a;
}

.nn-ai-thinking-rich .nn-ai-thinking-option-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: #7587a0;
}

/* Leading icon badge for rich menu options (used by the tools menu). */
.nn-ai-thinking-rich .nn-ai-thinking-option-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 10px;
  background: #eef4fd;
  color: #1f5fc0;
  font-size: 14px;
}

.nn-ai-thinking-rich .nn-ai-thinking-option.is-selected .nn-ai-thinking-option-icon {
  background: #1f5fc0;
  color: #ffffff;
}

/* Tags / badges */
.nn-ai-thinking-rich .nn-ai-thinking-tag {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}

.nn-ai-thinking-rich .nn-ai-thinking-tag--green {
  background: #e7f7ec;
  color: #1f8a4c;
  border-color: #b9e7c8;
}

.nn-ai-thinking-rich .nn-ai-thinking-tag--slate {
  background: #eef2f8;
  color: #4a5f7d;
  border-color: #d4dded;
}

.nn-ai-thinking-rich .nn-ai-thinking-tag--blue {
  background: #e8eefc;
  color: #3257c4;
  border-color: #c4d2f6;
}

.nn-ai-thinking-rich .nn-ai-thinking-tag--amber {
  background: #fdf2dd;
  color: #9a6b16;
  border-color: #f3e0b0;
}

/* Footer toggle */
.nn-ai-thinking-rich .nn-ai-thinking-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(30, 58, 95, 0.08);
}

.nn-ai-thinking-rich .nn-ai-thinking-foot-label {
  flex: 1;
  font-size: 11.5px;
  line-height: 1.4;
  color: #5a6c86;
}

.nn-ai-thinking-rich .nn-ai-thinking-switch {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  cursor: pointer;
}

.nn-ai-thinking-rich .nn-ai-thinking-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.nn-ai-thinking-rich .nn-ai-thinking-switch-track {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.2s ease;
  display: inline-flex;
  align-items: center;
  padding: 2px;
}

.nn-ai-thinking-rich .nn-ai-thinking-switch-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.nn-ai-thinking-rich
  .nn-ai-thinking-switch
  input:checked
  + .nn-ai-thinking-switch-track {
  background: #2f6fe4;
}

.nn-ai-thinking-rich
  .nn-ai-thinking-switch
  input:checked
  + .nn-ai-thinking-switch-track
  .nn-ai-thinking-switch-thumb {
  transform: translateX(18px);
}
/*- ----------------------------- */

/* ---------------------------------------------------------------------------
   Source mode dropdown (Company Data Only / Web Only / Company Data + Web)
   Built on the .nn-ai-thinking-rich shell; adds radio markers, a green
   selected state, and a "Learn more" footer link to match the design.
--------------------------------------------------------------------------- */
.nn-ai-source-rich .nn-ai-chat-tools-dropdown {
  min-width: 290px !important;
  max-width: 320px;
}

.nn-ai-source-rich .nn-ai-chat-tools-dropdown-list {
  padding: 8px 8px 4px;
}

/* Radio indicator on the left of each option */
.nn-ai-source-rich .nn-ai-source-radio {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  border: 2px solid #b9c4d4;
  background: #fff;
  position: relative;
  transition: border-color 0.15s ease;
}

.nn-ai-source-rich .nn-ai-source-option.is-selected .nn-ai-source-radio {
  border-color: #1f9d57;
}

.nn-ai-source-rich .nn-ai-source-option.is-selected .nn-ai-source-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1f9d57;
  transform: translate(-50%, -50%);
}

/* Green selected state (instead of the thinking menu's blue) */
.nn-ai-source-rich .nn-ai-thinking-option.is-selected {
  background: #ecf9f1 !important;
  border-color: #bfe6cf !important;
}

.nn-ai-source-rich .nn-ai-thinking-option-icon {
  background: #eef4fd;
  color: #1f5fc0;
}

.nn-ai-source-rich
  .nn-ai-thinking-option.is-selected
  .nn-ai-thinking-option-icon {
  background: #1f9d57;
  color: #ffffff;
}

/* Composite globe + building icon for "Company Data + Web" */
.nn-ai-source-rich .nn-ai-source-combo-icon {
  position: relative;
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.nn-ai-source-rich .nn-ai-source-combo-icon i:first-child {
  font-size: 14px;
}

.nn-ai-source-rich .nn-ai-source-combo-icon i:last-child {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 8px;
}

/* Footer "Learn more about source modes" link */
.nn-ai-source-rich .nn-ai-source-foot {
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(30, 58, 95, 0.08);
}

.nn-ai-source-rich .nn-ai-source-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1f5fc0;
  text-decoration: none;
  cursor: pointer;
}

.nn-ai-source-rich .nn-ai-source-learn-more:hover {
  color: #16438c;
  text-decoration: underline;
}

.nn-ai-source-rich .nn-ai-source-learn-more i {
  font-size: 10px;
}