.body {
     margin: 0;
     padding: 0;
     position: relative;
     width: 100%;
     font-family: Arial;
     font-weight: 400;
     font-size: 16px;
     line-height: 1.625;
     background-color: #fffff7;
 }

 .socialIcon {
     background: #555;
     width: 14px;
 }

 .main-title {
     text-align: center;
     font-size: 38px;
     line-height: 1;
     margin-top: 12px;
     margin-bottom: 18px;
     font-family: cursive;
 }

 .site-description {
     text-align: center;
     font-size: 20px;
     line-height: 1;
 }

 .topHeader {
     padding: 10px 1px;
     background: #555;
     color: #f1f1f1;
 }
 
 .homeIcon{
    margin-left:0px !important; 
 }

 .menuItem {
     font-size: 13px;
     line-height: 2.0;
     padding-right: 5px;
 }

 .top-bar {
     font-weight: 400;
     text-transform: none;
     font-size: 13px;
 }

 .top-bar {
     font-size: 15px;
 }

 .inside-top-bar {
     padding: 5px 10px 5px 10px;
 }

 .top-bar .inside-top-bar {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
 }

 .widget ol,
 .widget ul {
     margin: 0;
 }

 .top-bar .widget {
     margin: 0 10px;
 }

 .grid-container {
     margin-left: auto;
     margin-right: auto;
     max-width: 1200px;
 }

 .top-bar .widget_nav_menu>div>ul {
     display: flex;
     align-items: center;
 }

 .top-bar .widget_nav_menu li {
     margin: 5px 15px;
     cursor: pointer;
 }

 .top-bar-align-left .widget:nth-child(2) {
     margin-left: auto;
 }

 .top-bar .inside-top-bar .widget {
     padding: 0;
     display: inline-block;
     margin-bottom: 0;
 }

 .top-bar-align-left .widget:last-child {
     margin-right: 0;
 }

 .top-bar a {
     color: #ffffff;
 }

 .top-bar-align-left .widget:last-child {
     margin-right: 0;
 }

 .top-bar-align-left .widget:nth-child(2) {
     margin-left: auto;
 }

 .top-bar .inside-top-bar .widget {
     padding: 0;
     display: inline-block;
 }

 .lsi-social-icons {
     margin: 0 !important;
     padding: 0 !important;
     list-style-type: none !important;
     display: block !important;
 }

 .lsi-social-icons li {
     padding: 0 !important;
     display: inline-block !important;
     *display: inline;
     *zoom: 1;
     float: none !important;
     margin: 0 8px 8px 0 !important;
     list-style-type: none !important;
 }

 .lsi-social-icons li a {
     padding: 8px;
     width: 1.2em;
     line-height: 1.2em;
     text-align: center;
 /*    display: block; */
     text-decoration: none !important;
     font-style: normal !important;
     font-weight: normal !important;
     text-transform: none !important;
     speak: none;
     -moz-transition: background-color 0.2s ease-in-out 0s;
     -webkit-transition: background-color 0.2s ease-in-out 0s;
     transition: background-color 0.2s ease-in-out 0s;
     -moz-box-sizing: content-box;
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
 }

 .icon-set-lsi_widget-5 a,
 .icon-set-lsi_widget-5 a:visited,
 .icon-set-lsi_widget-5 a:focus {
     border-radius: 0px;
     color: #5c4742;
 }

 .lsi-social-icons li a,
 .lsi-social-icons li a:hover {
     padding: 0px !important;
     margin: 10px 6px 0px 6px !important;
     cursor: pointer;
 }

 .lsicon-linkedin:before {
     content: '\e81c';
 }

 .lsicon-rss:before {
     content: '\e803';
 }

 .lsicon-twitter:before {
     content: '\e82b';
 }

/*
 ul {
     list-style: disc;
 }

 ul {
     display: block;
     list-style-type: disc;
     margin-block-start: 1em;
     margin-block-end: 1em;
     margin-inline-start: 0px;
     margin-inline-end: 0px;
     padding-inline-start: 40px;
 }
 */

 a {
     text-decoration: none;
 }

 a,
 button,
 input {
     transition: color .1s ease-in-out, background-color .1s ease-in-out;
 }

 .no-link {
     color: inherit;
     text-decoration: none;
 }

 a:-webkit-any-link {
     cursor: pointer;
 }

 .link-style,
 a {
     color: #10a37f;
     cursor: pointer;
     text-decoration: none
 }

 li {
     text-align: -webkit-match-parent;
 }

 .widget ul li {
     list-style-type: none;
     position: relative;
     margin-bottom: 0.5em;
 }

 .content {
     padding: 16px;
 }

 .sticky {
     position: fixed;
     top: 0;
     width: 100%;
 }

 .sticky+.content {
     padding-top: 102px;
 }

 

 .footer {
     width: inherit;
     padding-left: 30px;
     padding-right: 30px;
          padding-bottom: 20px;
             padding-top: 10px;
     color: white;
     background-color: #4a4f57;
 }

 .footerRow {
 /*    display: flex;
     flex-wrap: wrap; */
 }

 .footerColumn {
     flex: 1 0 20%;
     /* Adjust the width as per your requirements */
 }

 .menuItem {
     /* Add your styles for menu items here */
 }

 .footerMenuIntro {
     text-align: center;
     font-weight: bold;
 }

 .footerColumnHeader {
     font-size: 14px;
     text-align: left;
     font-weight: bold;
     margin-bottom: 7px;
     /* font-family: cursive; */
     /*   padding-left: 7px; */
     margin-top: 7px;
     cursor: default;
         padding-right: 5px;  
 }

 #columnHeaderStep4ID {
     padding-right: 5px;
 }

 .footer a {
     color: #ffffff;
 }

 .ContainerShell a {
     color: #10a37f;
     cursor: pointer;
     text-decoration: none;
     font-weight: 600;
      
 }

 a: .no-link {
     color: inherit;
     text-decoration: none;
     pointer-events: none;
 }

 .introHeader {
     margin-top: 30px;
     margin-left: 50px;
     margin-right: 50px;
 }
 
 @media (max-width: 1199px) {
  .introHeader {
     margin-left: .75rem !important;
     margin-right: .75rem !important;
  }
  
}



 #nextButtonDivID {
     text-align: center;
     padding: 20px;
     margin: 20px;
 }

 .nextButton {
     text-align: center;
     border: 1px solid black;
     margin-left: auto;
     margin-right: auto;
     margin-top: 20px;
     text-align: center;
     width: 310px;
     padding-top: 10px;
     padding-left: 30px;
     padding-right: 30px;
     padding-bottom: 10px;
     border: 1px solid black;
     border-radius: 14px;
     background-color: #2E765E;
     color: white;
     font-weight: 600;
     text-decoration: none !important;
     cursor: pointer;
 }

 /* these are for the Home page */
 #stepContentID {
     width: 70%;
     margin-left: auto;
     margin-right: auto;
     padding-top: 25px;
 }
 
 


 .stepName {
     font-weight: 800;
     font-size: 24px;
     color: white;
     padding-bottom: 15px;
   white-space: normal;
  word-wrap: break-word; /* or overflow-wrap: break-word; */
         /*   white-space: nowrap;  */
 }

 .stepDef {
     display: inline-block;
          color: white;
 }

 #stepContentID .wp-block-columns.detail-with-icon-container .wp-block-column:first-of-type .wp-block-image img {
     width: 90%;
     height: auto;
 }

 img[Attributes Style] {
     width: 200px;
     aspect-ratio: auto 200 / 200;
     height: 200px;
 }

 img {
     overflow-clip-margin: content-box;
     overflow: clip;
 }

 .wp-block-image img,
 .wp-block-image.has-custom-border img {
     box-sizing: border-box;
 }

 .wp-block-column {
     flex-grow: 1;
     min-width: 0;
     overflow-wrap: break-word;
     word-break: break-word;
 }

 :where(.wp-block-columns.is-layout-flex) {
     /*  gap: 2em;  */
 }

 @media (min-width: 782px) .wp-block-columns {
     flex-wrap: nowrap !important;
 }

 @media screen and (max-width: 1199px) #stepContentID .wp-block-columns {
     padding-left: 2rem;
     padding-right: 2rem;
 }

 .ContainerShell {
   /*  max-width: 767px;  */
       max-width: 1280px;
     
     margin-left: auto;
     margin-right: auto;
  /*   padding: 30px 30px; */
         padding-right: .99rem;
    padding-left: .99rem;
     padding-top: 0px;
 }

 #stepContentID .wp-block-columns.detail-with-icon-container {
     display: flex;
     -moz-flex-direction: row !important;
     flex-direction: row !important;
     -moz-justify-content: space-between !important;
     -ms-justify-content: space-between !important;
     justify-content: space-between !important;
     -ms-flex-pack: space-between !important;
     -moz-align-items: stretch !important;
     -ms-align-items: stretch !important;
     align-items: stretch !important;
     border: 1px solid rgba(49, 49, 50, .33);
     border-radius: 0.66rem;
     box-shadow: 0 0 0.75rem rgba(49, 49, 50, .15);
     margin: 0 auto 2rem;
     padding-left: 0;
     padding-right: 0;
     min-height: 200px;
  /*   background-color: #0f0f54;
     color: white; */
     background-color: #b89345;
    color: black;
    
     font-weight: 600;
 }

 #stepContentID .wp-block-columns.detail-with-icon-container .wp-block-column:first-of-type {
     -moz-flex-direction: row;
     flex-direction: row;
     -moz-align-items: center;
     -ms-align-items: center;
     align-items: center;
     flex: 1 0 auto;
     -ms-flex-basis: 25%;
     flex-basis: 25%;
     border-radius: 0.66rem 0 0 0.66rem;
     background-color: #e7f4f7;
     text-align: center;
     padding: 0;
     width: 25%;
     max-width: 25%;
 }

 #stepContentID .wp-block-columns.detail-with-icon-container .wp-block-column {
     display: flex;
     -moz-flex-direction: column;
     flex-direction: column;
     -moz-justify-content: center;
     -ms-justify-content: center;
     justify-content: center;
     -ms-flex-pack: center;
     -moz-align-items: flex-start;
     -ms-align-items: flex-start;
     align-items: flex-start;
     flex: 1;
     -ms-flex-basis: 75%;
     flex-basis: 75%;
     margin: 0;
     padding: 2rem 2rem 1.5rem;
     min-height: 150px;
     width: 75%;
     max-width: 75%;
 }

 @media screen and (min-width: 600px) .wp-block-column {
     position: relative;
 }



 .wp-block-column {
     flex-grow: 1;
     min-width: 0;
     overflow-wrap: break-word;
     word-break: break-word;
 }

 * {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     box-sizing: border-box;
 }

 @media (max-width: 767px) #stepContentID .wp-block-columns.detail-with-icon-container .wp-block-column:first-of-type {
     -ms-flex-basis: 33.33%;
     flex-basis: 33.33%;
     width: 33.33%;
     max-width: 33.33%;
 }

 .wp-block-table table {
     border: 1px solid rgba(49, 49, 50, .33);
     border-collapse: separate !important;
     border-spacing: 0;
     border-radius: 0.66rem;
     width: 100%;
     margin: 0;
     padding: 0;
 }

 .wp-block-table .has-fixed-layout {
     table-layout: fixed;
     width: 100%;
 }

 .wp-block-table table td,
 .wp-block-table table th {
     border-left: 1px solid rgba(49, 49, 50, .33);
     border-left-width: 1px;
     border-left-style: solid;
     border-left-color: rgba(49, 49, 50, 0.33);
     border-top: 1px solid rgba(49, 49, 50, .33);
     border-top-width: 1px;
     border-top-style: solid;
     border-top-color: rgba(49, 49, 50, 0.33);
     padding: 10px;
     word-break: normal;
 }

 table {
     display: table;
     border-collapse: collapse;
     box-sizing: border-box;
     text-indent: initial;
     border-spacing: 2px;
     border-color: gray;
         background-color: white;
 }

 .wp-block-table table th {
     border-top: none;
     background-color: #e7f4f7;
 }

 .stepTableHeaderCol1Class {
     white-space: nowrap;
     width: 24px;
 }

 .stepTableHeaderCol2Class {
     white-space: nowrap;
     width: 200px;
 }

 #stepTable td {
     width: 1%;
     padding: 5px;
 }

 #stepTable th {
     padding: 5px;
 }

 #stepTable .wp-block-columns.detail-with-number-container .wp-block-column:first-of-type::after {
     content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNC43IDE4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNC43IDE4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzAwMkE0RTt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02LjcsMTcuN2MwLjQsMC40LDEsMC40LDEuNCwwbDYuNC02LjRjMC40LTAuNCwwLjQtMSwwLTEuNGMtMC40LTAuNC0xLTAuNC0xLjQsMGwtNS43LDUuN0wxLjcsOS45CgljLTAuNC0wLjQtMS0wLjQtMS40LDBjLTAuNCwwLjQtMC40LDEsMCwxLjRMNi43LDE3Ljd6IE02LjQsMHYxN2gyVjBINi40eiIvPgo8L3N2Zz4K);
     height: auto;
     width: 1.6rem;
     display: block;
     position: absolute;
     bottom: -2.35rem;
     top: auto;
     left: calc(50% - 1rem);
     right: auto;
 }

 .selectionLegend {
     text-align: left;
     margin-left: auto;
     margin-right: auto;
     border: 1px solid black;
     padding-top: 30p;
     margin-top: 30px;
     border-radius: 10px;
     background-color: #e7f4f7;
     color: black;
     font-weight: 600;
     max-width: 572px;
     padding-right: 20px;
     padding-top: 10px;
 }

 .selectionLegend li {
     padding-bottom: 10px;
 }

 /* these are for the Needs - Identify Select page */
 .needContainer {
     margin-left: auto;
     margin-right: auto;
     box-sizing: unset;
     border-radius: 15px;
 }

 #needCard {
margin-left: auto;
    margin-right: auto;
    width: 380px;
    font-size: 20px;
    cursor: initial;
    /* padding-bottom: 15px; */
    vertical-align: middle;
    /* padding-right: 20px; */
    /* padding-left: 20px; */
    /* display: inline;    Cannot do this nor can we do inline-block because it stops the spin from spinning */
 }

 .spinClass {
     transition: all 0.5s ease;
     animation: spin 0.5s linear;
     transform: scale(0.0);
     /* Initial scale value (super small size) */
 }

 @keyframes spin {
     0% {
         transform: scale(0.2) rotate(0deg);
         /* Initial scale and rotation */
     }

     50% {
         transform: scale(0.01) rotate(180deg);
         /* Intermediate scale and rotation */
     }

     100% {
         transform: scale(1) rotate(360deg);
         /* Final scale and rotation (back to initial size) */
     }
 }

 .buttonBox {
     margin-top: 10px;
     padding: 10, 10, 10, 10;
     padding-top: 10px;
     padding-bottom: 10px;
     padding-left: 20px;
     padding-right: 20px;
     background-color: #AABB88;
     width: 300px;
     text-align: center;
     cursor: pointer;
     margin-left: auto;
    margin-right: auto;
 
 }


/*
 .buttonBox:active {
     background-color: #AABB88;
     color: white;
 }

 .buttonBox:hover {
     background-color: green;
     color: white;
 }
 */
 /* Style for the div when hovered over on non-mobile devices */
@media (hover: hover) {
  .buttonBox:hover {
     background-color: green;
     color: white;
  }
}

/* Style for the div when actively pressed or clicked */
.my-div:active {
     background-color: green;
     color: white;
}



 .questionContainer {
/*     height: 300px;  */
     text-align: center;
     font-weight: 600;
  /*   position: relative; */
     margin-left: auto;
     top: 50px;
     margin-top: 25px;
 }

 .q-innerContainer {
   /*  position: absolute; 
     top: 30%;
     left: 50%;
     transform: translate(-50%, -50%); */
 }

 #thisNeedCountID {
     font-weight: 400;
     font-size: 12px;
 }

 #WordOfID {
     font-weight: 400;
     font-size: 12px;
 }

 #maxNeedCountID {
     font-weight: 400;
     font-size: 12px;
 }

 #importanceStartID {
     cursor: pointer;
     color: white;
 }

 .needs-table {
     border: 2px solid grey;
     width: 80%;
     margin-left: auto;
     margin-right: auto;
     border-radius: 5px;
     background-color: #e7f4f7;
     width: 90%;
     box-shadow: 8px 8px 8px #CCCCCC;
     border-collapse: collapse;
     color: black;
 }

 .needs-table td {
     border: 0.5px solid grey;
     border-collapse: collapse;
     padding-left: 5px;
     padding-right: 5px;
     vertical-align: middle;
 }

 .needs-headerRow {
     font-weight: 600;
     text-align: center;
     background-color: white;
     color: black;
 }

 .needs-needNameCol {
     width: 75%;
 }

 #tableOfImportanceDivID {
     max-width: 572px;
     margin-left: auto;
     margin-right: auto;
 }

 .needs-needImportanceTD {
     text-align: center;

 }

 #tableOfImportanceDivID select {
     font-size: 16px;
     border-color: #e7f4f7 transparent transparent transparent;
     background-color: #e7f4f7;
     cursor: pointer;
 }

 .needs-needDescTD {
     text-align: center;
     cursor: pointer;

     
 }

 .importanceNeedCategoryClass {
     margin-bottom: 10px;
     padding-bottom: 31px;
     padding-left: 10px;
     padding-right: 10px;
     padding-top: 10px;
     border: 1px solid black;
     border-radius: 10px;
/*     margin-left: 50px;     // removed as does not look good in iphone
    margin-right: 50px;   */
 }

 .balloon-needDesc {
     padding-bottom: 10px;
     padding-left: 10px;
     padding-right: 10px;
     padding-top: 10px;
     border: 4px solid black;
     border-radius: 10px;
     overflow-y: scroll
     width: 470px;
     height: 200px;
     background-color: white;
     font-size: 12px;
     height: auto;
     color: black;
 }

 #ReviewShowByImportanceID {
     border: 1px solid;
     background-color: #2E765E;
     color: white;
     padding: 10px;


     margin-bottom: 15px;
 
     margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: fit-content;
    border-radius: 20px;
    border: 1px solid black;
    font-weight: bold;

 }

 #ReviewShowByCategoryID {
     border: 1px solid;
  
     color: white;
     padding: 10px;

     margin-left: auto;
     margin-bottom: 15px;
border-radius: 14px;
    background-color: #2E765E;

    margin-right: auto;
    text-align: center;
    width: fit-content;
    border-radius: 20px;
    border: 1px solid black;
    font-weight: bold;
     /* display: none; */
 }

 .tableRowCentered {
     text-align: center;
 }

 .needsMetHeader {
     background-color: lightgreen;
     color: black
 }

 .needsPartiallyMetHeader {
     background-color: #dceb3f;
     color: black;
 }

 .needsNotMetHeader {
     background-color: #e8928796;
     color: black;
 }

 /* The following is to experiement with adding 5 steps in the header bar */
 .step-container {
     display: flex;
     align-items: center;
 }

 .step {
     position: relative;
 }

 .circle {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     border: 2px solid black;
     font-weight: bold;
 }

 .line {
     flex-grow: 1;
     border-top: 2px solid black;
     margin: 0 5px;
 }

 .notNeeded {
     background-color: lightslategray !important;
 }

 .strategyIcon {
     width: 32px;
 }

 .notImportantButton {
     background-color: lightslategray !important;
     color: white;
 }

 #needsList {
    /* padding-left: 50px; */
    /* padding-right: 50px; */
 }

 .collapsible-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin: 3px;
     padding: 10px;
     border: 1px solid grey;
     cursor: pointer;
 }

 .header-row {
     display: flex;
     align-items: center;

     
 
      
 }

 .checkmark-icon {
   /*  margin-left: auto;
        padding: 3px;*/
     background-color: white;

     border: 1px solid black;
     

  width: 50px; /* Adjust the size according to your needs */
  height: 50px; /* Adjust the size according to your needs */
  border-radius: 50%; /* This property creates the circular shape */


  /* Optional: Center the icon within the circle */
  display: flex;
  justify-content: center;
  align-items: center;

 }

 .collapsible-item {
     border: 1px solid grey;
/*     padding: 10px; */
     margin-bottom: 10px;
     background-color: #0f0f54;
 }

 .editableField {
     resize: vertical;
     width: 100%;
     font-size: 20px;
     font-family: unset;
     padding: 10px;
     background-color: beige;
     
 
  height: auto;
  min-height: 50px;
  max-height: 200px;
  overflow-y: auto;
 

 }

.newCommentInput {
     resize: vertical;
     width: 100%;
     font-size: 20px;
     font-family: unset;
     padding: 10px;
 }

 .collapsible-content td {
     border-bottom: 1px dashed;
 }

 .collapsible-content {
     background-color: #f8f8f8;
     margin: 5px;
     padding: 9px;
     border: 1px solid black;
 }

 .strategyButton {
     text-align: center;
     border: 1px solid black;
     background-color: green;
     color: white;
     font-size: 21px;
     border-radius: 30px;
     cursor: pointer;
     margin-left: 45px;
     margin-right: 45px;
     margin-top: 10px;     
 }

 .strategiesHeader {
     margin-top: 20px;
     text-align: center;
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 10px;
 /*    text-decoration: underline; */
 }

 .strategiesInst {
     padding-left: 40px;
     padding-right: 40px;
     padding-bottom: 20px;
     padding-top: 5px;
 }

 .strategiesCitations {
     padding-left: 40px;
     padding-right: 40px;
     padding-bottom: 20px;
     padding-top: 5px;
 }
 .strategyNeedDesc {
     padding: 22px;
 }

 .personalDefHeader {
     text-align: center;
     padding: 10px;
     font-weight: bold;
     text-decoration: underline;
     font-size: 20px;
 }

 .progressBar {
     text-align: center;
     margin-top: 5px;
     margin-left: auto;
     margin-right: auto;
 }

 .checkbox-image {
     width: 40px;
     cursor: pointer;
 }

 .strategiesTable{
    width: 100%
 }
 
 .commentsTable{
    width: 100%
 }
 
 .commentsTable,
 th,
 td {
     border: 1px solid black;
     border-collapse: collapse;
     padding: 10px;
     
 
 }
.commentsNeedName {
   padding-left:20px;
}


.AIResponseTable
{
  width: 100%;
}


table.strategiesTable th,
table.strategiesTable td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 10px;
  vertical-align: top;
  width: 100%;
}
 .strategyNeedName {
     border: 1px solid black;
     padding-left: 20px;
 }


.strategyNeedContainer {
      margin-bottom: 10px;
      border: 1px solid grey;
    padding: 10px;
    margin-bottom: 10px;
}

 .userStrategy {
     width: 100%;
}
     
.strategyInputTd{
     width: 100%;
}
     
 .userStrategyInput {
     width: 100%;
    font-family: arial;
    font-size: 16px;
    line-height: 1.625;
    background-color: beige;
 }

 .userCommentInput {
     width: 100%;
    font-family: arial;
    font-size: 16px;
    line-height: 1.625;
    background-color: beige;
 }

.newCommentInput {
     width: 100%;
    font-family: arial;
    font-size: 16px;
    line-height: 1.625;
    background-color: beige;
 }

.save-buttonEdit{
     height: 40px;
     width: 70px;
 }


 .save-button {
     height: 40px;
     width: 70px;
 }

.saveNewCommentButton {
     height: 40px;
     width: 70px;
 }
 
  .delete-button {
     height: 40px;
     width: 70px;
 }
 
 .deleteCommentButton{
     height: 40px;
     width: 70px;
 }
 
 saveNewCommentButton {
     height: 40px;
 }
 
 .hidden {
  display: none;
}

 .collapse-expand-text {
    border: 1px solid black;
    width: fit-content;
    margin-bottom: 3px;
    background-color: green;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    font-size: 14px;
       margin-top:20px;
}

.question-mark {
 width: 25px;
    padding-left: 10px;
 
 }
 
  .commentHeader {
   width: 70%; 
 }
 
 .dateHeader {
   width: 120px !important; 
 }
 
 .logo {
font-family: cursive; 
font-size: 20px;
 }
  .actionHeader {
   width: 1%; 
 }
 .actionToStrategiesLink{
 font-size: 16px;
 }

.pricingShell{
  max-width: 100%;
}

.priceTable {

table-layout: auto !important;

}
.priceTableColumnHeaderRow {

}

.priceTableHeaderCol1Class {
  width:25% !important;
}

.priceTableHeaderCol5Class {
  width:25% !important;
}

 
.priceTableHeader {
  width:10%;
}

.priceFeature {
font-size: 13px;
vertical-align: middle;
}

.priceNotes {
font-size: 13px;
text-align: left;
}

.priceImgtd {
vertical-align: middle;
}

.priceImg {
width: 40px;
vertical-align: middle;
} 
 
 #tier1LinkID  {
 vertical-align: middle;

 }
 
 #tier1PriceID  {
  vertical-align: middle;
   font-size: 18px;
 font-weight: bolder;
 }
 
 .price  {
  vertical-align: middle;

 }
 
 .buttontd {
   width: 100%; 
 }
 
 .priceTierButton {
   
    display: inline-block;
    width: inherit;
    padding-left: 5px;
    padding-right: 5px;
    word-wrap: break-word
    word-wrap: break-word;
    white-space: normal;
    margin: 0px;
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity to your preference */
  z-index: 9999; /* Make sure the backdrop appears on top of other elements */
}

.confirmation-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 10000; /* Make sure the popup appears on top of the backdrop */
  border-radius: 10px;
}

.confirmation-popup div {
  margin-bottom: 10px;
}

.confirmation-popup label {
  display: block;
}

.confirm-button {
  padding: 10px 20px;
      background-color: green;
    border-radius: 10px;
    color: white;
    font-size: 17px;
    font-weight: bold;
}

.confirmButtonContainer {
 
    text-align: center;
    padding-top: 20px;

}

.toggleViewButton {

}

   
.introHeader10 {
  margin-top: 1px;
    max-width: 475px;
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;  
    font-size: 10px;
    }
    


.getStarted {
margin-bottom: 0px !important;
}

.assessSummary, .clientsSummary {
margin-left: 50px;
    margin-right: 50px;
    }
    
.main-menu__btn-box {
    padding: 0 37.5px 0;
}    
    
.main-menu .main-menu__list>li>ul, .main-menu .main-menu__list>li>ul>li>ul, .stricky-header .main-menu__list>li>ul, .stricky-header .main-menu__list>li>ul>li>ul {    
  min-width: 100px;
  white-space: nowrap;
  }
  
  .headersteps {
  	line-height: 1.3 !important;
  }
    

.balloon-citation {
  position: absolute;
  left: 10%;
  width: 80vw;
  max-height: 25em;
  overflow: auto;
  padding: 10px;
  background-color: #fff;
  border: 5px solid black;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  line-height: 1.5;
  z-index: 9999;
  white-space: pre-line;
}    

.infoImage{
   width:20px;
}

.introHeader11{
  margin-bottom:30px;
}

     .footerOption {
          display:none;     
     }
     
      .footerSteps-container {
     display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-gap: 20px; Adjust the gap between divs as needed */
      /* Optional: Add any other styles for the outer container */
    }
 
    
   .footerStep-div {
      height: 200px;      Set the desired height   
            width: 200px;  Set the desired widt  
   background-color: #f0f0f0;
  /*    border: 1px solid #ccc;   */
      padding: 10px;
    }
    
    /* Style for the outer circle */
     #outer-circle,
     #outerCircleProgress,
     #importanceProgress-circle,
     #priorityProgress-circle,
      #satisfactionProgress-circle,
          #planningProgress-circle,   
  #strategyProgress-circle            
    {
      position: relative;
      width: 175px;
      height: 175px;
   /*   border: 0px solid #4a4f57; */
      border: 5px solid #aaa;
      border-radius: 50%;
      overflow: hidden;
      background: conic-gradient(
        #007bff 0% calc(100% - 10%),
        #f0f0f0 calc(100% - 10%) 100%
      );
    }

    /* Style for the inner circle */
    #inner-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 150px;
      height: 150px;
      background-color: #4a4f57;
      border-radius: 50%;
      border: 5px solid white;
    }
    /* Style for the text within the inner circle */
    #inner-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: white;
      text-decoration: none;
    }
    
#resultsTable > th,
#resultsTable > td {
  text-align: center;
}
 
  #clientsTable {
    margin-top: 10px;
  }
  
#clientsTable > th,
#clientsTable > td {
  text-align: center;
}
 
 

.disabledButton{
  cursor: not-allowed !important;
  opacity: 0.5;
}
.disabledButton > a {
  color: currentColor;
 
  pointer-events: none;
  text-decoration: none;
}


    /* Define the throbbing animation */
    @keyframes throbbing {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); } /* Text grows to 120% of its original size */
      100% { transform: scale(1); } /* Text returns to its original size */
    }

    .throbbing-container {
      display: inline-block;
      color: white;
      animation: throbbing 2s infinite; /* 2s duration, infinite repetitions */
    }
    
    
    
     @media (max-width:700px) {
     .planLegend {
         font-size: 8px;
     }

 .stepName {

     font-size: 22px;

 }
 
     .planTableColumnHeaderRow {
         font-size: 8px;
     }

       .clientsTableColumnHeaderRow, .clientsTableColumnBodyRow {
         font-size: 8px;
     }
     
     .assessSummary, .clientsSummary {
margin-left: 0px;
    margin-right: 0px;
    }
    
     
     .priorityLabel {
         font-weight: normal;
         font-size: 12px;
     }
 }