/** Add css rules here for your application. check if ant is working to transfer this*/
/** this is to make sizing of components take account of borders and padding*/
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

html {
  box-sizing: border-box;
  font-family: optima;
  linear-gradient(to bottom, #f7f7f7, #eaeaea)
}
*, *:before, *:after {
  box-sizing: inherit;
}

body{
  background: linear-gradient(to bottom, #f7f7f7, #eaeaea);
}

/** Example rules used by the template application (remove for your app) */
h1 {
  font-size: 2rem;
  font-weight: bold;font-family: Avenir;
  color: #333333;
  margin: 40px 0px 70px;
  text-align: center;
}
/** ChatGPT says I can override the inline blue of this table cell style (for selected rows) if I
   use the important attribute. Let's try
.GBG2FFLDBE{
    color: black !important;
    background: white !important;
    height: auto;
    overflow: auto;
}*/

.sendButton {
  display: block;font-family: American Typewriter;
  /* font-size: -webkit-xxx-large; */: American Typewriter;
}

/** Most GWT widgets already have a style name defined */
.gwt-DialogBox {
  width: 400px;
}

.dialogVPanel {
  margin: 5px;
}

.gwt-Button{
  
  font-family: 'Roboto', sans-serif;
  background-color: #C3B1E1; /* Green */
  margin: 5px;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 7px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
    font-size: clamp(5pt, .9vw, 12pt);
    transition-duration: 0.4s;
}
/* Style the dropdown popup */
.gwt-ListBox option {
    font-family: 'Roboto', sans-serif;
    background-color: #E6DAF5; /* Light pastel purple */
    color: black;
    padding: 7px 10px;
    font-size: 12px;
}

/* Highlight option when hovered */
.gwt-ListBox option:hover {
    background-color: #D4BFFF; /* Slightly darker shade */
}

/* Style the dropdown itself */
.gwt-ListBox {
    font-family: 'Roboto', sans-serif;
    background-color: #C3B1E1;
    margin: 5px;
    border: none;
    border-radius: 4px;
    padding: 7px 10px;
    text-align: center;
    font-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover effect */
.gwt-ListBox:hover {
    background-color: plum;
}

/* Add a border and shadow when the ListBox is clicked */
.gwt-ListBox:focus {
    outline: none;
    border: 2px solid #9F7AEA; /* Deeper purple for focus */
    box-shadow: 0px 0px 8px rgba(159, 122, 234, 0.8);
}


.gwt-Button:active {
  background-color: #1e7e34;
  box-shadow: 0 5px gray;
  transform: translate3d(4px, 7px, -8px);
}

.gwt-Button:hover {
    background-color: plum;
}
.gwt-MenuBar {
    cursor: default;
}
.gwt-MenuBar .gwt-MenuItem {
    cursor: default;
    font-family: Arial Unicode MS, Arial, sans-serif;
}
.gwt-MenuBar .gwt-MenuItem-selected {
    background: #E3E8F3;
}
.gwt-MenuBar-horizontal {
    background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2003px;
    border: 1px solid #e0e0e0;
}
.gwt-MenuBar-horizontal .gwt-MenuItem {
    padding: 5px 10px;
    vertical-align: bottom;
    color: #000;
    font-weight: bold;
}
.gwt-MenuBar-horizontal .gwt-MenuItemSeparator {
    width: 1px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-left: 1px solid #ccc;
    background: white;
}
.gwt-MenuBar-horizontal .gwt-MenuItemSeparator .menuSeparatorInner {
    width: 1px;
    height: 1px;
    background: white;
}
.gwt-MenuBar-vertical {
    margin-top: 0px;
    margin-left: 0px;
    background: white;
}
.gwt-MenuBar-vertical table {
    border-collapse: collapse;
}
.gwt-MenuBar-vertical .gwt-MenuItem {
    padding: 2px 40px 2px 1px;
}
.gwt-MenuBar-vertical .gwt-MenuItemSeparator {
    padding: 2px 0px;
}
.gwt-MenuBar-vertical .gwt-MenuItemSeparator .menuSeparatorInner {
    height: 1px;
    padding: 0px;
    border: 0px;
    border-top: 1px solid #ccc;
    overflow: hidden;
}
.gwt-MenuBar-vertical .subMenuIcon {
    padding-right: 4px;
}
.gwt-MenuBar-vertical .subMenuIcon-selected {
    background: #E3E8F3;
}
.gwt-MenuBarPopup .menuPopupTopCenter {
    background: url(images/hborder.png) 0px -12px repeat-x;
}
.gwt-MenuBarPopup .menuPopupBottomCenter {
    background: url(images/hborder.png) 0px -13px repeat-x;
}
.gwt-MenuBarPopup .menuPopupMiddleLeft {
    background: url(images/vborder.png) -12px 0px repeat-y;
}
.gwt-MenuBarPopup .menuPopupMiddleRight {
    background: url(images/vborder.png) -13px 0px repeat-y;
}
.gwt-MenuBarPopup .menuPopupTopLeftInner {
    width: 5px;
    height: 5px;
    zoom: 1;
}
.gwt-MenuBarPopup .menuPopupTopRightInner {
    width: 8px;
    height: 5px;
    zoom: 1;
}
.gwt-MenuBarPopup .menuPopupBottomLeftInner {
    width: 5px;
    height: 8px;
    zoom: 1;
}
.gwt-MenuBarPopup .menuPopupBottomRightInner {
    width: 8px;
    height: 8px;
    zoom: 1;
}
.gwt-MenuBarPopup .menuPopupTopLeft {
    background: url(images/corner.png) no-repeat 0px -36px;
}
.gwt-MenuBarPopup .menuPopupTopRight {
    background: url(images/corner.png) no-repeat -5px -36px;
}
.gwt-MenuBarPopup .menuPopupBottomLeft {
    background: url(images/corner.png) no-repeat 0px -41px;
}
.gwt-MenuBarPopup .menuPopupBottomRight {
    background: url(images/corner.png) no-repeat -5px -41px;
}



.button{
  
background-color: #28a745; /* Green */
  margin: 2px;
  padding: 1px 5px;
  border: none;
  border-radius: 3px;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;  
    transition-duration: 0.4s;
}

.button:hover {
  background-color: green;
}


.button:active {
            background-color: orange;
            box-shadow: 0 5px gray;
            transform: translateY(2px);
         }

.serverResponseLabelError {
  color: red;
}

/**Let's use CSS grid for layout NOTE: this whole thing is also affected by tge scaleApp
method in the onModuleLoad. It makes it so all the grid things fill the available space
when you change the size of the browser window. Its pretty cool. works even if you use
cmd + and - to zoom. Just know that this grid layout isn't the whole story...if you need
to change*/
.container {
    display: grid;
    grid-template-columns: 40px 2.5fr 1fr 1fr 2.5fr 40px;
    grid-template-rows: 1px 1em auto auto 1fr auto;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  height: 95vh; /* Ensure it fills the browser */  
  

}

/**
new suggestion from chatGPT to help scale for different screens
*/
#app-container {
    transform-origin: top left;
    transition: transform 0.3s ease-in-out;
}

#outsetaLinks {
 
    grid-row: 2;
    display: grid;
    grid-template-columns: 40px 1fr 1fr 1fr 1fr 1fr 40px;
    grid-template-rows: 1em;
  column-gap: 50px; 
}

#outsetaLogin {
  grid-column: 2;
  grid-row: 1;
}

#outsetaSignup {
  grid-column: 3;
  grid-row: 1;
  
}

#outsetaProfile {
  grid-column: 4;
  grid-row: 1;
}

#outsetaKnowledgeBase {
  grid-column: 5;
  grid-row: 1;
  
}

#outsettaLogout {
  grid-column: 6;
  grid-row: 1;
 
}


.pasteValueSetTextArea{
  /*! width: 20em; */height: 20em;place-self: stretch;em;em;
}



.conceptIdsPanel{

    display: flex;
    flex-direction: column;

    margin-bottom: 1em;
}

.conceptIdFlowPanel {
    display: flex;
    flex-direction: row;
}

.systemLabel {
  
  margin-right: 5px;
  margin-left: 2em;
  font-size: 12px;
 
 
  
}
.conceptIdLabel {
  
   font-size: 12px;

  
}

.inValueSet{
  border: ridge;
  color: black;
  background: lightblue;
}

.inFilteredValueSet{
  border: ridge;
  color: black;
  background: aliceblue;
}


.selectAllDescendantsButton{

    background-color: lavender; /* Green */
    border: none;
    border-radius: 4px;
    color: black;
    padding: 3px 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    transition-duration: 0.4s;
    /*! position: absolute; */
}


.selectAllDescendantsButton:active {
     background-color: darkseagreen;
    box-shadow: 0 5px gray;
    transform: translate3d(4px, 7px, -8px);
}

.selectAllDescendantsButton.ruleInValueSet {
  background-color: aliceblue;
  color: darkgreen;
  border: darkturquoise;
  border-style: solid;
}
   /* Tooltip container */
   .tooltip {
     position: static;
     display: inline-block;
   }

   /* Tooltip text */
     .tooltip .tooltiptext {
       visibility: hidden;
       width: 10em;
       background-color: white;
       color: black;
       text-align: left;
       padding: 5px;
       border-radius: 6px;

       /* Position the tooltip text - see examples below! */
       position: absolute;
       z-index: 1;
       top: -1em;
         left: 2em;
       border-style: solid;
     }

     /* Show the tooltip text when you mouse over the tooltip container */
     .tooltip:hover .tooltiptext {
       visibility: visible;
     }

   .tooltipSearchFilter .tooltiptext {
       visibility: hidden;
       width: 40em;
       background-color: white;
       color: black;
       text-align: left;
       padding: 5px;
       border-radius: 6px;

       /* Position the tooltip text - see examples below! */
       position: absolute;
       z-index: 1;
       top: 1px;
         left: 1px;
       border-style: solid;
     }

     /* Show the tooltip text when you mouse over the tooltip container */
     .tooltipSearchFilter:hover .tooltiptext {
       visibility: visible;
     }


/** Set ids using widget.getElement().setId("idOfElement") */
#closeButton {
  margin: 15px 6px 6px;
}



#standardTerminologyViewerPanelArea {
  grid-column: 2;
  grid-row: 3;
  overflow: auto;
}

#title {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row: 20;
  padding: 1em;

}

#searchBox {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row: 3;
  /*! padding: 1em; */

  display: inline-grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto;
  grid-template-rows: 3em;
}

.logoImage {
    justify-self: left;
    width: clamp(200px, 20vw, 300px);
    height: 4em;
    grid-column: 1;
    grid-row: 1;
}





#parentTreeTitle {
  grid-column: 2;
  grid-row: 4;
  font-size: large;
  text-align: center;
  margin: 1em;
  font-family: Helvetica Neue;

  border-bottom-style: groove;

  display: flex;
  justify-content: center;   /* Horizontal centering */
  align-items: flex-end;      /* Push child to the bottom */
    padding-bottom: 1em; /* adjust to taste */
}


#parentTree {
  grid-column: 2;
  grid-row: 5;    
  overflow: auto;
  /*! margin: 10px; */
  border: 10px solid #dcdcdc;

  border-radius: 3px;

  background-color: #f9f9f9;
  margin-right: 4px;
    min-height: 0;
}

#centerTreeNodeTitle {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row: 4;
  
    font-size: large;
    text-align: center;
    margin: 1em;
    font-family: Helvetica Neue;

    display: grid;
    grid-template-columns: 90% auto;
    grid-template-rows: auto auto 2em;
}

.centerTreeNodeLabel{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 1;
}
.searchConceptLabel{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 2;
    place-self: start;
    font-size: 14px;
}

.conceptSuggestBox{
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row: 3;
}

.showSearchHistoryButton{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row: 3;
    place-self: center
}

#selectedTermDetails {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row: 5;
  overflow: scroll;
  /*! padding: 5px; */
  padding: 1em;
  border: 10px solid #dcdcdc;
      border-radius: 3px;

  background-color: #f9f9f9;
}


#childTreeTitle{
  grid-column: 5;
  grid-row: 4;
  font-size: large;
  text-align: center;
  margin: 1em;
  font-family: Helvetica Neue;
  border-bottom-style: groove;
}

#childTree{
    grid-column: 5;
    grid-row-start: 5;
    grid-row-end: 7;
    overflow: auto;
    /*! margin: 10px; */
    border: 10px solid #dcdcdc;
    border-radius: 3px;

    scrollbar-width: initial;
    background-color: #f9f9f9;
    margin-left: 4px;
}

#selectedTermsTitle{
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row: 6;
  text-align: center;
  font-size: large;
  font-family: Helvetica Neue;
  justify-self:center;
  align-self: end;

}

#selectedTermsTable {
    display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: auto; /* Ensures scrolling works */
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 6;
  grid-row-end: 6;
  border: 10px solid #dcdcdc;
    border-radius: 3px;
  /*! margin: 10px; */
 /* justify-self:stretch;
  min-height: 20em;*/
}
/* Make sure the table takes the available space
from chatGPT*/
.selectedTermsTable table {
    flex-grow: 1; /* This makes only the table expand */
    width: 100%;
}

/* Keep the pager and buttons at the bottom */
.table-controls {
    display: flex;
    justify-content: space-between; /* Align buttons and pager */
    gap: 10px; /* Adds spacing */
    padding: 10px;
    flex-shrink: 0; /* Prevents them from stretching */
}

#selectedTermsTablePager{
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row: 9;
  text-align: center;
  font-size: large;
  font-family: Helvetica Neue;
    justify-self:stretch;

  align-self: end;
    padding-bottom: 10px;
}

#selectedTermsTablePager a {
    display: inline-block !important;
    font-size:small;
}



#snomedSetTextArea{
    grid-column: line3 / span 1;
    grid-row: 2;
    place-self: center;
    border: none;
    
}

#showLcas{

    grid-column-start: 2;
    grid-column-end: 5;
    grid-row: 6;
    justify-self: end;
    align-self: center;
}

#downloadSpreadSheet{

    grid-column-start: 3;
    grid-column-end: 5;
    grid-row: 6;
    justify-self: center;


}

#clearAllSelections {
  grid-column: 0;
  grid-row: 0; 
  align-content: center;
}

#sendButtonContainer{
    grid-column: 3;
    grid-row: 4;place-self: center;
    font-family: Avenir;
}

#resultsTable{
    grid-column: 2 / span 3;
    grid-row: 5;place-self: stretch;
    font-family: Avenir;padding: 50px;e0; */}

#inactivationsTable{
    grid-column: 2/span 3;
    grid-row: 6;
    place-self: stretch;font-family: Avenir;padding: 50px;
}

#emailSupport{
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 3px;
}

.activeAfterDatePanel {
 font-family: Avenir;
 /*! margin: 1em; */

 place-self: center;
 border-style: groove;
}

.preferredTextColumn{
  cursor: pointer;
  font-size: clamp(5pt, .9vw, 12pt);
  max-width: 36vw;
  min-width: 25vw;
    width: 30vw;
  display: inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  
}
.sourceTextColumn{
  font-size: clamp(4pt, .7vw, 12pt);
}
.conceptIdTextColumn{
    font-size: clamp(5pt, .9vw, 12pt);

    min-width: 9vw;
    max-width: 9vw;
    width: 9vw; /* Fix width to prevent shrinking */
}
.activeTextColumn{
    font-size: clamp(5pt, .9vw, 12pt);
    /*! min-width: 1vw; */
    max-width: 1em;
    width: 1em; /* Fix width */


}
.attributePanel {
    /*! border: 1px solid #f0f0ff; */

    margin-bottom: 1em;
}

.attributeTitleLabel{
 font-size:  medium;
 margin-left: 1em;
 /*! font-style: unset; */
 border-bottom: solid;
 margin-right: 2em;
}

.attributeValueLabel{
    font-size: small;
    margin-left: 2em;
    margin-top: 5px;
}

.conceptEditorTitle{
  grid-row: 1;
  grid-column: 1;
  font-size: x-large;
  text-align: center;
  margin: 1em;
}

.downloadButton {

}

.termCompositeCell{

}

.newTermCompositeCell{

border: 5px solid burlywood;
  border-radius: 15px;
  padding: 2px;
  
}

.RxNormDoseFormSearchFilterPanel{
 overflow: scroll;
}

.gwt-SuggestBox {
  padding: 5px 4px;
  border: 1px solid #ccc;
  border-top: 1px solid #999;
  font-size: 100%;
  font-family: Arial Unicode MS, Arial, sans-serif;
  justify-self: stretch;
}

.gwt-SuggestBoxPopup {
}

.gwt-SuggestBoxPopup .item {
  padding: 2px 6px;
  color: #000;
  cursor: default;
  font-size: 110%;
}
.gwt-SuggestBoxPopup .item-selected {
  background: #D5E2FF;
}
.gwt-SuggestBoxPopup .suggestPopupContent {
  background: white;
}
.gwt-SuggestBoxPopup .suggestPopupTopCenter {
  border-top: 1px solid #bbb;
}
.gwt-SuggestBoxPopup .suggestPopupBottomCenter {
  border-bottom: 1px solid #bbb;
}
.gwt-SuggestBoxPopup .suggestPopupTopCenterInner,
.gwt-SuggestBoxPopup .suggestPopupBottomCenterInner {
  height: 1px;
  line-height: 1px;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleLeft {
  border-left: 1px solid #bbb;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleRight {
  border-right: 1px solid #bbb;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleLeftInner,
.gwt-SuggestBoxPopup .suggestPopupMiddleRightInner {
  width: 1px;
  line-height: 1px;
}
.gwt-SuggestBoxPopup .suggestPopupTopLeftInner {
  width: 0px;
  height: 0px;
  zoom: 1;
}
.gwt-SuggestBoxPopup .suggestPopupTopRightInner {
  width: 0px;
  height: 0px;
  zoom: 1;
}
.gwt-SuggestBoxPopup .suggestPopupBottomLeftInner {
  width: 0px;
  height: 0px;
  zoom: 1;
}
.gwt-SuggestBoxPopup .suggestPopupBottomRightInner {
  width: 0px;
  height: 0px;
  zoom: 1;
}
.gwt-SuggestBoxPopup .suggestPopupTopLeft {
  background: url(images/circles.png) no-repeat 0px -6px;
  width:5px;
  height:5px;
}
.gwt-SuggestBoxPopup .suggestPopupTopRight {
  background: url(images/circles.png) no-repeat -5px -6px;
  width:5px;
  height:5px;
}
.gwt-SuggestBoxPopup .suggestPopupBottomLeft {
  background: url(images/circles.png) no-repeat 0px -11px;
  width:5px;
  height:5px;
}
.gwt-SuggestBoxPopup .suggestPopupBottomRight {
  background: url(images/circles.png) no-repeat -5px -11px;
  width:5px;
  height:5px;
}


.gwt-DecoratedPopupPanel .popupContent {
  
  margin: 2em;
  
  background-color: lightcyan;
}
.gwt-DecoratedPopupPanel .popupMiddleCenter {
  padding: 3px;
  background: #f1f1f1;
   height: 100%;
   /*! width: 100%; */
  
  background-color: lightcyan;
}
.gwt-DecoratedPopupPanel .popupTopCenter {
  background: url(images/hborder.png) 0px -2937px repeat-x;
}
.gwt-DecoratedPopupPanel .popupBottomCenter {
  background:  url(images/hborder.png) repeat-x 0px -2938px;
}
.gwt-DecoratedPopupPanel .popupMiddleLeft {
  background: url(images/vborder.png) -21px 0px repeat-y;
}
.gwt-DecoratedPopupPanel .popupMiddleRight {
  background: url(images/vborder.png) repeat-y -24px 0px;
}
.gwt-DecoratedPopupPanel .popupTopLeftInner {
  width: 6px;
  height: 5px;
  zoom: 1;
}
.gwt-DecoratedPopupPanel .popupTopRightInner {
  width: 6px;
  height: 5px;
  zoom: 1;
}
.gwt-DecoratedPopupPanel .popupBottomLeftInner {
  width: 6px;
  height: 6px;
  zoom: 1;
}
.gwt-DecoratedPopupPanel .popupBottomRightInner {
  width: 6px;
  height: 6px;
  zoom: 1;
}
.gwt-DecoratedPopupPanel .popupTopLeft {
  background: url(images/circles.png) no-repeat 0px -16px;
}
.gwt-DecoratedPopupPanel .popupTopRight {
  background: url(images/circles.png) no-repeat -6px -16px;
}
.gwt-DecoratedPopupPanel .popupBottomLeft {
  background: url(images/circles.png) no-repeat 0px -21px;
}
.gwt-DecoratedPopupPanel .popupBottomRight {
  background: url(images/circles.png) no-repeat -6px -21px;
}


.gwt-DialogBox .Caption {
  background: #F1F1F1;
  padding: 4px 8px 4px 4px;
  cursor: default;
  font-family: Arial Unicode MS, Arial, sans-serif;
  font-weight: bold;
  border-bottom: 1px solid #bbbbbb;
  border-top: 1px solid #D2D2D2;
}
.gwt-DialogBox .dialogContent {
}
.gwt-DialogBox .dialogMiddleCenter {
  padding: 3px;
  background: white;
}
.gwt-DialogBox .dialogBottomCenter {
  background: url(images/hborder.png) repeat-x 0px -2945px;
}
.gwt-DialogBox .dialogMiddleLeft {
  background: url(images/vborder.png) repeat-y -31px 0px;
}
.gwt-DialogBox .dialogMiddleRight {
  background: url(images/vborder.png) repeat-y -32px 0px;
}
.gwt-DialogBox .dialogTopLeftInner {
  width: 10px;
  height: 8px;
  zoom: 1;
}
.gwt-DialogBox .dialogTopRightInner {
  width: 12px;
  zoom: 1;
}
.gwt-DialogBox .dialogBottomLeftInner {
  width: 10px;
  height: 12px;
  zoom: 1;
}
.gwt-DialogBox .dialogBottomRightInner {
  width: 12px;
  height: 12px;
  zoom: 1;
}
.gwt-DialogBox .dialogTopLeft {
  background: url(images/circles.png) no-repeat -20px 0px;
}
.gwt-DialogBox .dialogTopRight {
  background: url(images/circles.png) no-repeat -28px 0px;
}
.gwt-DialogBox .dialogBottomLeft {
  background: url(images/circles.png) no-repeat 0px -36px;
}
.gwt-DialogBox .dialogBottomRight {
  background: url(images/circles.png) no-repeat -8px -36px;
}


.gwt-ToggleButton-up,
.gwt-ToggleButton-up-hovering,
.gwt-ToggleButton-up-disabled,
.gwt-ToggleButton-down,
.gwt-ToggleButton-down-hovering,
.gwt-ToggleButton-down-disabled {
background-color: #28a745; /* Green */
  margin: 1em;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 1em 2em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}
.gwt-ToggleButton-up,
.gwt-ToggleButton-up-hovering,
.gwt-ToggleButton-up-disabled {
  padding: 3px 5px 3px 5px;
}
.gwt-ToggleButton-up {
  border:1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
  cursor: pointer;
  cursor: hand;
}
.gwt-ToggleButton-up-hovering {
  border: 1px solid;
  border-color: #939393;
  cursor: pointer;
  cursor: hand;
}
.gwt-ToggleButton-up-disabled {
  border: 1px solid #bbb;
  cursor: default;
  opacity: .5;
  zoom: 1;
  filter: alpha(opacity=45);
}
.gwt-ToggleButton-down,
.gwt-ToggleButton-down-hovering,
.gwt-ToggleButton-down-disabled {
  padding: 4px 4px 2px 6px;
}
.gwt-ToggleButton-down {
  background-position: 0 -513px;
  border: 1px inset #666;
  cursor: pointer;
  cursor: hand;
}
.gwt-ToggleButton-down-hovering {
  background-position: 0 -513px;
  border: 1px inset;
  border-color: #9cf #69e #69e #7af;
  cursor: pointer;
  cursor: hand;
}
.gwt-ToggleButton-down-disabled {
  background-position: 0 -513px;
  border: 1px inset #ccc;
  cursor: default;
  opacity: .5;
  zoom: 1;
  filter: alpha(opacity=45);
}

.gwt-StackLayoutPanel {
  border-bottom: 1px solid #bbbbbb;
}
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
  cursor: pointer;
  cursor: hand;
  font-weight: bold;
  font-size: 1.3em;
  padding: 3px;
  border: 1px solid #bbbbbb;
  border-bottom: 0px;
  background: #d3def6 url(images/hborder.png) repeat-x 0px -989px;
}
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader-hovering {
  background: #d3def6;
}
.gwt-StackLayoutPanel .gwt-StackLayoutPanelContent {
  border: 1px solid #bbbbbb;
  border-bottom: 0px;
  background: white;
  padding: 2px 2px 10px 5px;
}

.gwt-TabLayoutPanel {
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
  background: #ccc;
  padding-top: 6px;
  padding-left: 5px;
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContentContainer {
  border-color: #ccc;
  border-style: solid;
  border-width: 0px 1px 1px;
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
  overflow: hidden;
  padding: 6px;
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
  margin-left: 4px;
  padding: 4px 8px 4px 8px;
  cursor: pointer;
  cursor: hand;
  color: white;
  font-weight: normal;
  text-align: center;
  background: #8E8E8E;
  -moz-border-radius: 3px 3px 0px 0px;
  border-radius: 3px 3px 0px 0px;
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
  cursor: default;
  background: white;
  color: #333;
  font-weight: bold;
}

.gwt-SplitLayoutPanel-HDragger {
  background: #e7e7e7 url(images/thumb_vertical.png) center center no-repeat;
  cursor: col-resize;
}

.gwt-SplitLayoutPanel-VDragger {
  background: #e7e7e7 url(images/thumb_horz.png) center center no-repeat;
  cursor: row-resize;
}

.attributeValuePanel {
  display: flex;
}
.commentColumn {
  max-width: 7vw;
}



.gwt-Button.addToSyntheticConceptButton {
  margin: ;
  padding: 4px 7px;
}

.saveValueSetTitleLabel{
  align-self: center;
  font-size: larger;
  border-bottom: 5px solid darkblue;
  font-weight: bold;
}

.paidFunctionExplanationLabel{
  width: 30em;
  font-style: italic;
}
.SyntheticConceptsPanel {
  width: 40em;
  height: 30em;
}

.NameSyntheticConceptNodePopup{
  border-color: #ccc;
  border-style: ridge;
  border-width: 2px 2px 2px 2px;
}
  
  .filterToAddPanel{
    width: 40em;
    height: 10em;
  }
.doseFormsTreePanel {
  background-color: aliceblue;
}

#staticPages{
  margin-bottom:9px;
  margin-left: 2em;
}
#emailSupport{
  margin-left: 2em;
}
.highlightStuffButton{
    justify-self: center;
}


.searchByConceptIdBox{
    width: 15em;
    justify-self: right;
    height: 2em;
    align-self: center;
}

.SyntheticConceptsPanel{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  align-items: flex-start;
}

.syntheticConceptsCellListPanel{
 height: 10em;
  border: 5px;
  
 border-color: blueviolet;
 width: 20em;
}



.searchFilterPopup{
    width 40vw;
}

.SearchFilterTextCell{
  font-family: Gill Sans;
font-size: 1.2vw;
}

.CreateEditFilterPopup{
    display: grid;
    grid-template-columns:  auto auto auto auto auto auto auto ;
    grid-template-rows: auto auto auto auto auto auto auto;
}

.createEditFilterPopupTitle{
  grid-column-start: 2;
  grid-row: 1;
  font-size: 1.5vw;
  grid-column-end: 6;
  justify-self: center;
  padding-bottom: 1vw;
  font-family: american typewriter;
}

.filterNamePanel{
  grid-column-start: 4;
  grid-row: 5;
  border: cadetblue;
  /*! border-style: solid; */
  padding: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  grid-column-end: 6;
}

.filterNamePanelTitle{
  
}

.filterTypeListBox{
  grid-column: 3;
  grid-row: 3;
}
.relationshipAttributesListBox{
  grid-column-start: 2;
  grid-row: 3;
  grid-column-end: 3;
}

.createFilterChildTree{

    border: 10px solid cadetblue;
    border-radius: 3px;

    scrollbar-width: initial;
    background-color: floralwhite;
    margin-left: 4px;
    width: auto;
    height: 30em;
    overflow: auto;

    grid-column-start: 2;
    grid-column-end: 6;
    grid-row: 4;
}

.createFilterButton{
  grid-column: 2;
  grid-row: 5;
}

.filterListFlowPanel {
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row: 6;
    padding: 10px;
    border: blue;
    border-style: double;
}

.makeSyntheticConceptButton{
  grid-column-start: 3;
    grid-column-end: 5;
    grid-row: 7;
}

.valueSetsColumn{
  font-size: 0.7vw;
  font-family: American Typewriter;

  }

/* Ensure narrow columns don’t wrap and auto-size */
/* Narrow columns: Wrap content but take minimal space */
.conceptMapColumn-narrow {
    font-size: 0.7vw;
    font-family: American Typewriter;
    white-space: normal;  /* Allow wrapping */
    width: 1%;            /* Let content dictate width */
    word-break: keep-all; /* Ensure long words (like codes) don't wrap */
}

/* Wider columns: Take remaining space */
.conceptMapColumn {
    font-size: 0.7vw;
    font-family: American Typewriter;
    width: auto;          /* Expand to fill available space */
    word-break: keep-all; /* don't Wrap long words */
}



  .pasteValueSetTextArea{
    margin: 0.5vw;
  }

  .conceptDiffTitle {
        grid-column-start: 1;
    
        grid-column-end: 2;
        grid-row: 1;

  }
    #downloadDiffReport{
      grid-column: 2;
      grid-row: 3;
    }
    #pasteValueSetTextArea1{
      grid-column: 1;
      grid-row: 2;
    }

    #pasteValueSetTextArea2{
      grid-column: 2;
      grid-row: 2;
    }

    .conceptDiffFormFlowPanel{
        display: grid;
        grid-template-columns:  auto auto;
        grid-template-rows: auto auto auto;
    }

    .textAreaFlowPanel{
        display: flex;
        flex-direction: row;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row: 2;
    }

.downloadDiffReport {
        grid-column: 1;
      grid-row: 3;
        align-self: auto;
}

.licenseTermsPanel{
  overflow: scroll;
border-style: solid;
  height: 30vw;
  padding: 1vw;
  border-color: cadetblue;
}

.extractCodesFromTextPanel{
   display: grid;
        grid-template-columns:  auto auto;
        grid-template-rows: auto auto auto auto;
}
.extractCodesTitleLabel{
grid-column: 1;
  grid-row: 1;
}

.extractCodesButton{
  grid-column: 1;
  grid-row: 2;
}

.highlightButton{
  grid-column: 2;
  grid-row: 2;
}
.showLcasForExtractedCodesButton{
  grid-column: 3;
  grid-row: 2;
}

.extractedCodesPanel{
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 4;
}

.pasteValueSetTextArea{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 3;
  align-self: stretch
}

.displayRulesPanel{
    display: grid;
    grid-template-columns:  auto auto;
    grid-template-rows: auto auto auto auto;
}

.allDescendantsSelectedPanel{
  grid-column: 1;
  grid-row: 1;
}
.allDescendantsDeselectedPanel{
  grid-column: 1;
  grid-row: 2;
}
.individuallySelectedPanel{
  grid-column: 1;
  grid-row: 3;
}
.individuallyDeselectedPanel{
  grid-column: 1;
  grid-row: 4;
}

.addedSyntheticConceptsPanel{
  grid-column: 1;
  grid-row: 5;
}

.wholeValueSetFilterPanel{
  grid-column: 1;
  grid-row: 6;
}

.runRulesButton{
  grid-column: 1;
  grid-row: 7;
}

.runResultsPanel{
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 7;

  display: flex;
  flex-direction:row;

}
.commentAbsent{
    background-color: lavender; /* Green */
    border: none;
    border-radius: 4px;
    color: black;
    padding: 1px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    transition-duration: 0.4s;
    /*! position: absolute; */
}

.commentPresent{
 background-color: gray; /* Green */
    border: none;
    border-radius: 4px;
    color: black;
    padding: 1px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    transition-duration: 0.4s;
    /*! position: absolute; */
}

/*chatGPT generated these. I am trying to implement a checked toggle menuitem for the new Mapping Mode*/
.menuItemWithCheckbox {
    position: relative;
    padding-right: 25px; /* Space for the checkbox on the right */
    font-family: Arial Unicode MS, Arial, sans-serif;

}

.menuItemWithCheckbox::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 5px; /* Align to the right of the menu item */
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
/*    border: 2px solid black;*/
/*    border-radius: 3px; *//* Optional, for rounded checkboxes */
    background-color: white;
}

.menuItemWithCheckbox.checked::after {
    background-color: white;
    content: "✔"; /* Checkmark */
    color: black;
    font-size: 12px;
    text-align: center;
    line-height: 15px;
}

.no-select {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+ */
    user-select: none;         /* Standard */
}