/* --------------------------------------------------------GENERAL-------------------------------------------------------- */
div.text-start.theme-entry {
    background-image: url(PMMV.background.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #E2E2E2;
    min-height: 100vh !important;
    align-content: flex-start;
}

.pmmvTypeAction {
  display: inline-block;
  padding: 5px 10px;
  background-color: rgb(10, 92, 139);
  color: white;
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.pmmvTypeActionRemove {
  display: inline-block;
  padding: 5px 10px;
  background-color: rgb(241, 16, 35);
  color: white;
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.pmmvTypeAdd {
  display: inline-block;
  padding: 5px 20px;
  background-color: rgb(6, 78, 48);
  color: white;
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}
.pmmv-scroll-container {
    height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
}

.edit-variationform-title {
    margin-bottom: 0;
    color: #064a9b;
}

.edit-variationform-titledescription {
    margin-bottom: 10px;
    color: #386dc9;
}

/* Hide row number column */
td[data-th*="Row"], th:has(a[aria-label*="Row"]) {
	display: none;
}

textarea::placeholder, input::placeholder {
  color: #727272 !important;
  font-style: italic;
  font-size: 14px;
}

/* --------------------------------------------------------NAV BAR-------------------------------------------------------- */
.navbar-dark .navbar-nav > li > a, .navbar-dark .navbar-nav > li.dropdown > a {
	color: white !important;
}

h1.siteTitle, .static-top.navbar-dark .navbar-brand a h1.siteTitle, .static-top.navbar-dark .navbar-brand a h1.siteTitle > span {
	color: white !important;
}

.navbar-expand-xl.navbar.navbar-dark.static-top {
    background-color: #03254c;
    color: white;
}

h1.pmmv-webpage-title {
    color: #064a9b;
	margin-top: 0px;
	font-size: 1.8em;
	font-family: "noto_sansregular", Helvetica, sans-serif;
	font-weight: 200;
}

/* --------------------------------------------------------FOOTER-------------------------------------------------------- */
footer .footer-bottom {
    background-color: #444444 !important;
}

/* --------------------------------------------------------PROGRESS BAR-------------------------------------------------------- */
ol.progress.list-group {
    background-color: transparent;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

/* size/margins */
ol.progress.list-group > li.list-group-item {
    flex: 1;
    margin-right: 3px;
}
ol.progress.list-group > li.list-group-item:last-child {
    margin-right: 0px;
}

/* success state */
ol.progress.list-group > li.list-group-item-success {
    background-color: #007D58;
    color: #BEFFCE !important;
}

/* active state */
ol.progress.list-group > li.list-group-item.active {
    background-color: #064a9b;
    border-color: #064a9b;
}

/* incomplete state */
ol.progress.list-group > li.list-group-item.incomplete {
    color: rgba(255, 255, 255, 0.5);
    background-color: #CCCCCC;
}



/* --------------------------------------------------------FORMS-------------------------------------------------------- */
/* need to check desired behavior for mobile / narrow views, currently hiding overflow w/ ellipsis */
/* form labels */
.theme-entry .field-label, .iframe-override .field-label {
    color: #474e56;
    font-weight: 400;
    font-size: 14px;
    /* float: right !important; */
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    max-width: 100%;
}

/* form fields */
.theme-entry .form-control, .iframe-override .form-control {
    color:#3E3E3E;
    background:#EFEFEF !important;
    border-radius: 0;
    border: solid 2px transparent !important;
    border-bottom: solid 2px #d3d3d3 !important;
    font-size: 14px;
}
.theme-entry .form-control:focus, .iframe-override .form-control:focus {
    border: solid 2px #00ABF0 !important;
    background-color: #DFF6FF !important;
    box-shadow: none !important;
}
.theme-entry .form-control:read-only:focus {
    border: solid 2px #00ABF0 !important;
    background-color: #DFF6FF !important;
    box-shadow: none !important;
    outline: none;
}
.theme-entry .form-control:hover, .iframe-override .form-contorl:hover{
    border-bottom: solid 2px #00ABF0 !important;
    background-color: #DFF6FF !important;
}

.iframe-override .form-control:read-only {
    border: none !important;
    background-color: white !important;
}

.iframe-override .form-control:read-only:focus {
    border: none !important;
}

/* form button */
div.input-group > button {
    border-radius: 4px !important;
    padding: 8px;
    margin-left: 10px !important;
    width: 30px;
    height: 30px;
}

span[role=checkbox] {
    width: 20px !important;
    height: 20px !important;
}

/* ingredient list - likely will also apply to other dropdowns? */
ol#ingredientList {
    margin-top: 50px;
}

ol#ingredientList li {
    margin-top: 10px
}

ol#ingredientList li span {
    font-size: 14px;
    color: #3E3E3E;
}

ol#ingredientList li button {
    color: white;
    margin-left: 10px;
    border: none;
    background-color: #444444;
    font-size: 14px
}

ol#ingredientList li button:hover {
    background-color: #616161;
}

ol#ingredientList li ::marker {
    font-size: 14px;
    color: #3E3E3E;
}

ul.ui-widget-content {
    font-size: 14px;
    box-shadow: 5px 5px 5px #888;
    border: 1px solid lightgray;
    color: #343E41;
}

div.ui-menu-item-wrapper:hover {
    color: black;
    border: none;
}

input#pmmv_searchgoodby_1 {
    margin-left: 20px;
}

span.picklist.horizontal {
    font-size: 14px;
}

input#pmmv_sponsorresponsibleinvoices_1 {
    margin-left: 15px;
}

label#pmmv_sponsorresponsibleinvoices_label {
    text-align: right;
}

/* --------------------------------------------------------FORM LAYOUT-------------------------------------------------------- */
/* need to fix for mobile views */

/* for Applicant Information */
div[data-name="tab_ApplicantInformation"] td.cell.form-control-cell {
    display: flex;
}

div[data-name="tab_ApplicantInformation"] td.cell.picklist-cell {
    display: flex;
}

div[data-name="tab_ApplicantInformation"] td.cell > div.table-info {
    /* display: inline-block; */
    /* width: 35%; */
    display: flex;
    flex: 1;
    padding-right: 20px;
    justify-content: right;
}

div[data-name="tab_ApplicantInformation"] td.cell > div.control {
    /* display: inline-block; */
    /* width: 65%; */
    flex: 2;
}

/* align form button */
div.input-group {
    align-items: center;
}

div.crmEntityFormView {
    border: none;
    box-shadow: 0px 0px 20px 0px rgb(194, 194, 194);
}

.iframe-override div.crmEntityFormView {
    border: none;
    box-shadow: none;
}

div[data-name="tab_ApplicantInformation"] {
    width: 100%;
    margin: auto;
    padding-top: 30px;
}

div.crmEntityFormView > div.actions {
    padding: 0px;
    border: none;
    float: right;
}

div.actions > div.col-md-6.clearfix {
    width: 100%;
}


/* --------------------------------------------------------BUTTONS-------------------------------------------------------- */
.theme-entry .btn-primary, .iframe-override .btn-primary {
  color: #FFFFFF;
  background-color: #0969d8;
  border-color: #0969d8;
  border-radius: 0px;
  font-family: Helvetica;
  font-weight: 400;
  font-size: 14px;
  padding: 6px 20px;
  width: fit-content;
  border-style: solid;}
  .theme-entry .btn-primary:hover, .iframe-override .btn-primary:hover {
    color: #FFFFFF;
    background-color: #277ad9;
    border-color: #277ad9; }
  .theme-entry .btn-primary:active, .iframe-override .btn-primary:active {
    color: #FFFFFF;
    background-color: #277ad9;
    border-color: #277ad9; }
    .theme-entry .btn-primary:active:hover, .theme-entry .btn-primary:active:focus, .iframe-override .btn-primary:active:hover, .iframe-override .btn-primary:active:focus {
      color: #FFFFFF;
      background-color: #277ad9;
      border-color: #277ad9; }
  .theme-entry .btn-primary:focus, .iframe-override .btn-primary:focus {
    color: #FFFFFF;
    background-color: #277ad9;
    border-color: #277ad9; }

.theme-entry .button2, .theme-entry .btn-secondary, .theme-entry .btn-default, .iframe-override .btn-default {
  color: #FFFFFF;
  border-radius: 0px;
  font-family: Helvetica;
  font-weight: 400;
  font-size: 14px;
  border-color: #444444;
  padding: 6px 20px;
  width: fit-content;
  border-style: solid;
  border-width: 1.6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #444444; }
  .theme-entry .button2:hover, .theme-entry .btn-secondary:hover, .theme-entry .btn-default:hover, .iframe-override .btn-default:hover {
    color: #FFFFFF;
    background-color: #616161;
    border-color: #616161; }
  .theme-entry .button2:active, .theme-entry .btn-secondary:active, .theme-entry .btn-default:active, .iframe-override .btn-default:active {
    color: #FFFFFF !important;
    background-color: #616161 !important;
    border-color: #616161 !important; }
  .theme-entry .button2:focus, .theme-entry .button2:focus-visible, .theme-entry .btn-secondary:focus, .theme-entry .btn-secondary:focus-visible, .theme-entry .btn-default:focus, .theme-entry .btn-default:focus-visible {
    color: #FFFFFF;
    background-color: #616161;
    border-color: #616161; }

button.btn.btn-default.clearlookupfield, button.btn.btn-default.launchentitylookup {
    width: 0px;
    height: auto;
}

/* --------------------------------------------------------HELP MODAL-------------------------------------------------------- */
.modal-body > p {
    margin: 0cm 0cm 6pt;
    font-family: Calibri;
    font-size: medium;
    color: black;
    line-height: 1.8;
}

.modal-body > p > a {
    color: rgb(0, 0, 255);
    font-family: Calibri;
    font-size: medium;
}

#helpButton, #helpButton1 {
    background-color: #3973d7;
    border: none;
    height: 40px;
}


.instruction-banner {
  background-color: #376bc6;
  color: white;
  height: 40px; 
  /* Match Help button height */
  /*padding: 0 16px;
  margin-bottom: 20px;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Helvetica;
  font-size: 18px;
}


.instruction-banner-1 {
  background-color: #376bc6;
  color: white;
  height: 40px; 
  /* Match Help button height */
  /*padding: 0 16px;
  margin-bottom: 20px;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Helvetica;
  font-size: 18px;
}
.instruction-text {
  flex-grow: 1;
  margin-right: 10px;
  margin-left: 20px;
  line-height: 1;
}

.help-button {
  height: 100%;
  padding: 6px 16px;
  font-weight: bold;
  flex-wrap: nowrap;
}

.instruction-heading {
  font-family: Helvetica;
  color: #f9fbfc;
  background-color: #064a9b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Helvetica;
  margin: 0;
  padding: 6px 16px;
  height: 50px;
}

.instruction-heading-1 {
  font-family: Helvetica;
  color: #f9fbfc;
  background-color: #064a9b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Helvetica;
  margin: 0;
  padding: 6px 16px;
  height: 50px;
}

.help-icon {
  background-color: white;
  color: #0d6efd; /* Bootstrap primary blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-left: 2px;
}
/* ------------------- Action button and lookup modals*/
#ValidateButton {
  margin-right: 15px;
}
#PreviousButton {
	margin-right: 15px;
	background-color: #3f3c3c;
	color: #FFFFFF;
}

#PreviousButton:hover {
    color: #FFFFFF;
    background-color: #616161;
    border-color: #616161; }

#closeButton {
  margin-right: 15px;
	background-color: #3f3c3c;
	 color: #FFFFFF;

}
#closeButton:hover {
    color: #FFFFFF;
    background-color: #616161;
    border-color: #616161; }

#exit-button {
  margin-right: 15px;
}


#divDeclarationText {
  margin-left: 15px;
}

.modal-body .table td,
.modal-body .table th {
  text-align: left !important;
}


/* --------------------------------------------------------xlarge MODAL-------------------------------------------------------- */
@media (min-width: 1024px) {
  .xlargeModal .modal-lg {
    width: 100%;
    --bs-modal-width: 90vw;
  }
}

.xlargeModal .modal-dialog.modal-lg .modal-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: stretch;
  height: auto;
}

.xlargeModal .modal-body {
  flex-grow: 1;
  height: 90%;
}

.xlargeModal .modal-body iframe {
  height: 80vh;
  display: flex;
  position: relative;
}

/* --------------------------------------------------------xlargeNarrow Modal-------------------------------------------------------- */
@media (min-width: 1024px) {
  .xlargeModalNarrow .modal-lg {
    width: 100%;
    --bs-modal-width: 60vw;
  }
}

.xlargeModalNarrow .modal-dialog.modal-lg .modal-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: stretch;
  height: auto;
}

.xlargeModalNarrow .modal-body {
  flex-grow: 1;
  height: 90%;
}

.xlargeModalNarrow .modal-body iframe {
  height: 80vh;
  display: flex;
  position: relative;
}

/* --------------------------------------------------------mediumModal-------------------------------------------------------- */
@media (min-width: 1024px) {
  .mediumModal .modal-lg {
    width: 100%
  }
}

.mediumModal .modal-dialog.modal-lg .modal-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: stretch;
  height: auto;
}

.mediumModal .modal-body {
  flex-grow: 1;
  height: 90%;
}

.mediumModal .modal-body iframe {
  height: 65vh;
  display: flex;
  position: relative;
}

/* --------------------------------------------------------smallModal-------------------------------------------------------- */
@media (min-width: 1024px) {
  .smallModal .modal-lg {
    width: 100%
  }
}

.smallModal .modal-dialog.modal-lg .modal-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: stretch;
  height: auto;
}

.smallModal .modal-body {
  flex-grow: 1;
  height: 90%;
}

.smallModal .modal-body iframe {
  height: 50vh;
  display: flex;
  position: relative;
}

/* --------------------------------------------------------VALIDATION CONTENT-------------------------------------------------------- */
div#validation {
    margin-bottom: 20px;
    box-shadow: 0px 0px 20px 0px rgb(194, 194, 194);
}

div#validationHeader {
    background-color: #ca4125;
    color: white;
    padding: 6px 16px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div#validationHeader > a {
    color: white;
    text-decoration: none;
}

div#validationHeader > h1 {
    color: white;
    font-size: 24px;
    margin: 0;
}

a#errorsTab.active, a#warningsTab.active {
    background: #ca4125;
    color: #ffffff;
}

a#errorsTab, a#warningsTab {
    background: #444444;
    color: #FFFFFF;
    border-radius: 0;
    margin: 0px;
    padding: 10px 25px 10px 25px;
    text-decoration: none !important;
}

a#errorsTab:not(.active):hover, a#warningsTab:not(.active):hover {
    background: #616161;
}

ul#validationTabs {
    background-color: #E2E2E2;
}

div#validationBody > div.tab-content {
    background-color: white;
}

div.tab-pane > p {
    font-size: 14px;
}

div.validationEntryA, div.validationEntryB { 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-top: 3px;
    padding-bottom: 3px;
}

div.validationEntryA:hover, div.validationEntryB:hover {
    background-color: #DFF6FF;
} 

div.validationEntryA {
    background-color: white;
}

div.validationEntryB {
    background-color: #f5f5f5;
}

div.validationType, div.valdiationMessage, div.noResults {
    font-size: 14px;
    font-family: "noto_sansregular", Helvetica, sans-serif;
}

div.validationIcon {
    flex: 1;
}

div.validationType {
    color: rgb(247, 152, 21);
    flex: 1;
    text-align: right;
}

div#Error div.validationType {
    color: #ca4125;
}

div.validationMessage {
    flex: 7;
    margin-left: 15px;
    color: #313841;
    line-height: 1.3;
}

div.noResults {
    color: #aaa;
    background-color: #f5f5f5;
    font-style: italic;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 12px;
}

div.validationIcon > img {
    float: right;
    margin-right: 0px;
    height: auto;
}

img.rotate {
    transform: rotate(180deg);
}

/* ------------------------------------------- DUAL PANEL------------------------*/

.dual-panel-heading {
    background-color: #2F2663; /* Purple */
    color: white;
    padding: 4px 4px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.dual-panel-section {
    background: #ECECF1;
    border: none;
}

.dual-panel-buttons button {
    background: white;
    border: none;
}

/*--- make the text box look like DropDown */
.pmmv_custom_dropdown, #pmmv_pmmvcategorygroupid{
  appearance: auto; /* Ensures native dropdown rendering */
  -webkit-appearance: auto;
  -moz-appearance: auto;
  padding: 6px 12px;
  width: 100%;
  cursor: pointer;
  color:#3E3E3E;
  background:#EFEFEF !important;
  border-radius: 0;
  border: solid 2px transparent !important;
  border-bottom: solid 2px #d3d3d3 !important;
  font-size: 14px;
}

.pmmv_custom_dropdown:focus, #pmmv_pmmvcategorygroupid:focus {
    border: solid 2px #00ABF0 !important;
    background-color: #DFF6FF !important;
    box-shadow: none !important;
}

.pmmv_custom_dropdown:hover, #pmmv_pmmvcategorygroupid:hover {
    border-bottom: solid 2px #00ABF0 !important;
    background-color: #DFF6FF !important;
}

div[data-name="tab_SelectGoods"] div#dual-pane-wrapper-ARTGPanel {
    margin: 0 1em 0 1em;
}

/* ------------------------------------------- Search manufacturer dropdown ------------------------*/
.pmmv-datalist {
  position: relative;
  width: 100%;
}

.pmmv-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  max-height: 150px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 1000;
}

.pmmv-dropdown li {
  padding: 8px;
  cursor: pointer;
}

.pmmv-dropdown li:hover {
  background-color: #eee;
}

.pmmv-hidden {
  display: none;
}

/* ------------------------------------------- Tables ------------------------*/
.pmmv-large-table {
	width: 95%;
	table-layout: fixed;
}

.pmmv-large-table td {
	overflow-wrap: break-word;
}

.pmmv-large-table th[aria-label="Actions"] {
	width: auto !important;
}

.pmmv-large-table td>div.action {
	float: right;
}

/* fix for ROA data overflow */
td[data-attribute="pmmv_routeofadministrationdesciption"] {
  word-break: break-word;
}

#subgridVariations>div.subgrid table td[data-attribute="pmmv_artgnumbers"] {
	overflow-wrap: break-word;
	max-width: 150px;
}

#Subgrid_PMMVVariationSterilityInformationProd table td[data-attribute="pmmv_productsartgid"], 
#Subgrid_PMMVVariationSterilityInformationComp table td[data-attribute="pmmv_componentsartgid"],
#Subgrid_PMMVVariationSterilityInformation table td[data-attribute="pmmv_artgid"] {
  overflow-wrap: anywhere;
}

#Subgrid_PMMVVariationContainerProduct table td[data-attribute="pmmv_productartgid"],
#Subgrid_PMMVVariationContainerComponent table td[data-attribute="pmmv_componentartgid"],
#Subgrid_PMMVVariationContainer table td[data-attribute="pmmv_artgid"] {
  overflow-wrap: anywhere;
}

.table-striped > tbody > tr.selected {
  background-color: #7fd5f7 !important;
}

/*--------------------------- Container/sterility variation layout ------------------------*/
table[data-name="Container and shelf life"] td.subgrid-cell, table[data-name="Sterility Information"] td.subgrid-cell{
    padding: 0px;
}

table[data-name="Container and shelf life"] tr > td.subgrid-cell:nth-child(1), table[data-name="Sterility Information"] tr > td.subgrid-cell:nth-child(1) {
    padding-right: 20px;
}

table[data-name="Container and shelf life"] tr > td.subgrid-cell:nth-child(2), table[data-name="Sterility Information"] tr > td.subgrid-cell:nth-child(2) {
    padding-left: 20px;
}

table[data-name="Container and shelf life"] colgroup > col:nth-child(1), table[data-name="Sterility Information"] colgroup > col:nth-child(1) {
    width: 30% !important;
}

table[data-name="Container and shelf life"] colgroup > col:nth-child(2), table[data-name="Sterility Information"] colgroup > col:nth-child(2) {
    width: 70% !important;
}

table[data-name="Container and shelf life"] td.subgrid-cell h3.form-subgrid-heading, table[data-name="Sterility Information"] td.subgrid-cell h3.form-subgrid-heading {
    margin: 0px;
}

table[data-name="Container and shelf life"] td.subgrid-cell div.entity-grid.subgrid, table[data-name="Sterility Information"] td.subgrid-cell div.entity-grid.subgrid {
    background: white;
    /* box-shadow: 0px 0px 20px 0px rgb(194, 194, 194); */
}

#Subgrid_PMMVVariationContainer div.view-grid.table-responsive, #Subgrid_PMMVVariationContainerProduct div.view-grid.table-responsive, 
    #Subgrid_PMMVVariationContainerComponent div.view-grid.table-responsive, #Subgrid_PMMVVariationSterilityInformation div.view-grid.table-responsive,
    #Subgrid_PMMVVariationSterilityInformationProd div.view-grid.table-responsive, #Subgrid_PMMVVariationSterilityInformationComp div.view-grid.table-responsive  {
    min-height: 0px !important;
    max-height: none !important; /* remove fixed height */
    height: auto !important;      /* let the grid grow naturally */
    overflow: visible !important; /* prevent clipping of dropdowns */
}

/* Hide container type code */
td[data-th*="Container Type Code"], th:has(a[aria-label*="Container Type Code"]) {
	display: none;
}

/* Hide action column in component subgrid for Container/Sterility */
#Subgrid_PMMVVariationContainerComponent td[data-th*="Action"], #Subgrid_PMMVVariationSterilityInformationComp td[data-th*="Action"],  
    #Subgrid_PMMVVariationContainerComponent th:has(a[aria-label*="Action"]), #Subgrid_PMMVVariationSterilityInformationComp th:has(a[aria-label*="Action"]) {
  display: none;
}

td.subgrid-cell:has(div.control > div#Subgrid_PMMVVariationContainer), td.subgrid-cell:has(div.control > div#Subgrid_PMMVVariationSterilityInformation) {
    padding-top: 20px;
    padding-right: 0px;
}

#Subgrid_PMMVVariationContainer td[data-attribute="pmmv_shelflifeconditiondescription"], #Subgrid_PMMVVariationContainerComponent td[data-attribute="pmmv_excipients"] {
    white-space: pre-line;
}

/*--------------------------- Product/component selector ------------------------*/
.product-component-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.product-component-selector > div {
    width: 100%;
    color: #e2e2e2;
    background-color: #575774;
    text-align: center;
    padding: 4px;
}

.product-component-selector > span {
    border-bottom: 20px solid #575774;
    border-left: 40px solid rgba(0, 0, 0, 0);
    border-right: 40px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    vertical-align: top;
    transform: rotate(180deg);
}
/* Component Selector*/
.component-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4px;
}

.component-selector > div {
    width: 100%;
    color: #e2e2e2;
    background-color: #575774;
    text-align: center;
    padding: 4px;
}

.component-selector > span {
    border-bottom: 20px solid #575774;
    border-left: 40px solid rgba(0, 0, 0, 0);
    border-right: 40px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    vertical-align: top;
    transform: rotate(180deg);
}

/* Ingredient Search Page*/
.even-row {
    background-color: #ece7e7; /* Light gray */
}
.odd-row {
    background-color: #ffffff; /* White */
}

#pagination button {
    margin: 5px;
    padding: 5px 10px;
    cursor: pointer;
}
#pagination button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}





/* === Base striping (unchanged) === */
#tblSearchResults.table tbody tr.odd-row { background-color: #f9f9f9; }
#tblSearchResults.table tbody tr.even-row { background-color: #ffffff; }

/* === Selected state: bright azure blue with white text === */
/* Applies when your code sets .row-selected OR aria-selected="true" */
#tblSearchResults.table tbody tr.row-selected,
#tblSearchResults.table tbody tr[aria-selected="true"] {
  background-color: #73c2f0  !important;      /* azure/teal-blue like screenshot */
  color: #ffffff !important;
}

/* Ensure cells inherit white text and remove default zebra borders if any */
#tblSearchResults.table tbody tr.row-selected td,
#tblSearchResults.table tbody tr[aria-selected="true"] td {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.35);
}

/* Optional: subtle inner glow and keep hover consistent */
#tblSearchResults.table tbody tr.row-selected:hover,
#tblSearchResults.table tbody tr[aria-selected="true"]:hover {
  background-color: #4a9ad0 !important;
}

/* Keyboard focus ring for accessibility */
#tblSearchResults.table tbody tr:focus {
  outline: 1px solid #2a69ac;   /* blue focus ring */
  outline-offset: -1px;
}

                                                                /* Radio Button Alignment */


/* OPTIONAL: tighten even more*/
#pmmv_availability.picklist.horizontal,
#pmmv_ingredientsearchtype.picklist.horizontal,
#pmmv_ingredientsearchsearchby.picklist.horizontal { gap: 12px; }
#pmmv_availability input[type="radio"] + label,
#pmmv_ingredientsearchtype input[type="radio"] + label,
#pmmv_ingredientsearchsearchby input[type="radio"] + label { margin-left: 3px !important; }

.field-label {
  font-weight: 550 !important;
}
/*Grid*/



/* Expand subgrid container height and avoid clipping dropdowns in both grids */
#Subgrid_PMMVVariationFormulationEquivalent_Edit .view-grid.table-responsive,
#Subgrid_PMMVVariationFormulationAnimalOrigin_Edit .view-grid.table-responsive {
  max-height: none !important; /* remove fixed height */
  height: auto !important;      /* let the grid grow naturally */
  overflow: visible !important; /* prevent clipping of dropdowns */
}
/* Hide Pharmaceutical Product Ids column in component subgrid for Formulation */
    #Subgrid_PMMVVariationFormulationComponent td[data-th*="Pharmaceutical Product Ids"], #Subgrid_PMMVVariationFormulationComponent th:has(a[aria-label*="Pharmaceutical Product Ids"]) {
  display: none;
}

/* Start Ingredeitn Search Valication*/
/* Wrap the input and message to keep them together */
.pmmv-input-wrapper {
  display: block;
}

/* Make sure the input is full-width in this wrapper if needed */
.pmmv-input-wrapper input {
  display: block;
  width: 100%;
}

/* Inline validation message under the textbox */
.pmmv-error-message {
  color: #d93025;          /* red */
  font-size: 13px;
  margin-top: 6px;         /* space under the textbox */
  text-align: center;      /* centered like the screenshot */
}

/* Red border for invalid input */
.pmmv-input-error {
  border: 1px solid #d93025 !important;
}



/* Scope: the table that lists pmmv_pmmvvariationformulationingredient rows */
table:has(tbody tr[data-entity="pmmv_pmmvvariationformulationingredient"]) tbody tr td:nth-child(2) {
  white-space: pre-line;   /* renders \n as actual line breaks */
}


/* Scope: the table that lists pmmv_pmmvvariationformulationingredient rows */
table:has(tbody tr[data-entity="pmmv_pmmvvariationformulationingredient"]) tbody tr td:nth-child(3) {
  white-space: pre-line;   /* renders \n as actual line breaks */
}



/* Make the subgrid container full width */
#Subgrid_PMMVVariationFormulationComponent {
    width: 100% !important;
       max-width: 100% !important;
    display: block;
}

/* Ensure the table inside the subgrid also spans full width */
#Subgrid_PMMVVariationFormulationComponent table {
    width: 100% !important;
}



/* Make the subgrid container full width */
#Subgrid_PMMVVariationFormulationIngredient {
    width: 100% !important;
       max-width: 100% !important;
    display: block;
}

/* Ensure the table inside the subgrid also spans full width */
#Subgrid_PMMVVariationFormulationIngredient table {
    width: 100% !important;
}
/* End Ingredeitn Search Valication*/