/** Shopify CDN: Minification failed

Line 22:32 Unexpected "{"
Line 26:4 "max-widht" is not a known CSS property
Line 516:9 Expected ":"

**/
.article-template__content-wrapper,
.article-template__left-content,
.article-template__toc {
}

/* Flex container for the blog post */
.article-template__content-wrapper {
  display: flex;
  justify-content: space-between; /* Ensures TOC is pushed to the right */
  margin: auto;
  max-width: 1200px;
}

/* Main content styling */
.article-template__left-content,{
  flex-grow: 1; /* Allows content to fill the space */
    width: calc(100% - 350px);
    min-width: 750px;
    max-widht: 750px;
}
.article-template__date-container {
 font-size: 13px;
 padding-bottom: 20px;
}

/* TOC styling to match the reference */
.article-template__toc {
  max-width: 400px; /* Adjusted to a practical width for a TOC */
  width: 100%;
  position: sticky;
  top: 70px;
  max-height: 100px;

}
.metafield-rich_text_field p {
  margin-bottom: 20px !important;
}
/* For WebKit (Chrome, Safari, etc.) */
.article-template__toc::-webkit-scrollbar {
  width: 0.1px; /* Width of the scrollbar */
}

/* TOC title styling */
.toc-title {
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: black;
}

/* TOC list styling */
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: 500;

}

/* TOC link styling */
.toc-list li a {
  text-decoration: none;
  color: #053f71; /* Blue color for links */
  padding: 5px 0;
  display: block;
  transition: color 0.2s ease-in-out;
  font-size: 14px;
  font-weight: 500;

}
#table-of-contents > nav {
  max-height: 300px; /* Adjust the height as needed */
  overflow-y: auto; /* Allows vertical scrolling */
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: #ffff white;
}

.article-template__right-content {
  position: relative;
  margin-top: 0;
  flex: none;
  margin-left: 50px;
  width: 300px;
}

.article-template__toc::-webkit-scrollbar-track {
  background: transparent; /* Optional: Set the track to transparent */
}

.article-template__toc::-webkit-scrollbar-thumb {
  background-color: black; /* Set the color of the scrollbar thumb to black */
  border-radius: 1px; /* Optional: Set the border-radius of the thumb */
}
/* Responsive design adjustments */
@media (max-width: 1200px) {
  .article-template__content-wrapper {
    
    flex-direction: column;
  }

  .article-template__left-content {
    width: 100%;
  }

  .article-template__toc {
  display: none;
  }
}
.tab-bar {
  list-style: none;
  padding-left: 0; /* Ensure no padding on the left */
  margin: 20px 0 0; /* Adjust top margin as needed, remove left margin */
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  margin-bottom: 45px;
}

.tab-bar li {
  display: inline-flex; /* Display tabs in a row, using flex for alignment */
  margin-right: -1px; /* Overlap borders between tabs */
  position: relative;
}

/* Add vertical line before the first tab as well */
.tab-bar li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%; /* Adjust based on your design */
  border-left: 4px solid #dedede; /* Thicker and black vertical line for all tabs, including the first one */
}

.tab-bar li a {
  display: block;
  padding: 8px 16px;
  font-family: "Proxima Nova Condensed", sans-serif;
  font-style: normal;
  font-size: 20px;
  font-weight: bold; /* Keep text bold for all tab links */
  text-decoration: none; /* No underline on links */
  color: #02838d; /* Blue text color for tabs */
  background-color: #fff; /* White background for tabs */
  transition: color 0.3s ease; /* Smooth transition for hover effects */
}

.tab-bar li a:hover {
  color: #F29FDE; /* Gold text for hover state */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tab-bar li a {
    padding: 8px 12px; /* Adjust padding for smaller screens */
    font-size: 14px; /* Adjust font size for smaller screens */
  }

  .tab-bar li:before {
    height: 50%; /* Adjust the vertical line height for mobile */
  }
}
/* Default profile image styles */
.article-template__profile-image {
  border-radius: 50%;
  width: 50px; /* Adjust to your preference */
  height: 50px; /* Adjust to your preference */
  margin-right: 15px;
  object-fit: cover; /* Ensure the image covers the area without distortion */
}

/* Profile container styles */
.article-template__profile-container {
  display: flex;
  align-items: center;
  margin-bottom: 5px; /* Space between this container and any following content */
  border-bottom: 7px solid #000; /* Thicker line below the container */
  margin-top: 50px;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  .article-template__profile-container {
    border-bottom: none; /* Remove the border for mobile screens */
    padding-left: 20px;
  }
  
  .article-template__profile-image {
    width: 50px; /* Adjust the percentage based on your preference */
    height: 50px; /* Auto height to maintain aspect ratio */
  }
}

/* Rich text styles */
.article-template__rich-text {
  flex-grow: 1;
  font-family: Arial, sans-serif; /* Example font, adjust as needed */
  font-size: 12px;
  border: none;  
  color: #333; /* Text color */
  line-height: 1.6; /* Line height for better readability */
}

.article-template__author-info {
  margin-bottom: 10px;
  font-style: italic;
}

.hover-link img {
  border: none;
  display: inline-block;
  vertical-align: middle;
}

/* Hover Link Style */
.hover-link {
  position: relative;
  display: inline-block;
  text-decoration: none; /* Removes underline from links */
  color: #00909b; /* Default link color */
}

/* Icon Style */
.icon-hl-trusted-source::after {
  content: "";
  display: inline-block;
  width: 16px; /* Width of your icon */
  height: 16px; /* Height of your icon */
  background-image: url('https://cdn.shopify.com/s/files/1/0755/5124/4621/files/trusted_source_icon_854dd62c-406e-40f5-af3a-fde743740609.png?v=1711921827');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 5px; /* Adjust the spacing as needed */
}

/* Tooltip Style */
.icon-hl-trusted-source {
  position: relative;
  display: inline-block;
  text-decoration: none; /* Optional: if you want to remove underline from links */
}

.icon-hl-trusted-source::before {
  content: attr(data-tooltip);
  visibility: hidden;
  background-color: #00909B;
  color: #ffffff;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  width: 200px; /* Specific width for the tooltip */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
  pointer-events: none; /* Ensures that the tooltip doesn't interfere with other mouse events */
}

.icon-hl-trusted-source:hover::before {
  visibility: visible;
  opacity: 1;
}

@media screen and (max-width: 420px) {
  .icon-hl-trusted-source::before {
    width: auto; /* Let the tooltip be as wide as it needs to be, up to the container's width */
    white-space: normal; /* Allows text to wrap */
  }
}


.toc-list li a:hover, .tab-bar li a:hover {
  color: #F29FDE !important; /* Changes text color to gold on hover, use as a last resort */
}

   p a {
     text-decoration: none; /* Removes the underline from links */
    }

.reference-list-container {
    margin-top: 40px;
    padding: 20px;
    background-color: #f9f9f9; /* Light background to subtly distinguish the section */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Soft shadow for depth */
}

.reference-list-container h3 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    margin-bottom: 16px;
}

.reference-list {
    list-style: none;
    counter-reset: reference-counter;
    padding-left: 0;
}

.reference-list li {
    counter-increment: reference-counter;
    margin-bottom: 10px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #666;
}

.reference-list li::before {
    content: counter(reference-counter) ". ";
    font-weight: bold;
    color: #00909B; /* Adds a pop of color */
}

.reference-list li a {
    color: #007BFF; /* Link color */
    text-decoration: none; /* Removes underline */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

.reference-list li a:hover {
    color: #0056b3; /* Darker shade on hover for interaction feedback */
    text-decoration: underline; /* Adds underline on hover */
}

.source-reference-icon {
  display: inline-block;
  width: 10px; /* Width of your icon */
  height: 16px; /* Height of your icon */
  background-image: url('https://cdn.shopify.com/s/files/1/0755/5124/4621/files/trusted_source_icon_854dd62c-406e-40f5-af3a-fde743740609.png?v=1711921827');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 1px; /* Adjust the spacing as needed */
}
/* Custom tooltip styling */
.custom-tooltip {
  display: none;
  position: absolute;
  z-index: 1000;
  background-color: #fff; /* Background color changed to white */
  color: #02838d; /* Text color changed to #02838d */
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  font-size: 14px;
  /* Transition for the fade-in effect */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border: 1px solid #02838d; /* Optional: adds a border matching the text color */
}

/* Tooltip arrow - also needs color adjustment */
.custom-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent; /* Arrow color changed to white */
  /* If you want the arrow border to have the #02838d color, you'll need to
     create an additional element or pseudo-element for the border as this
     arrow is made entirely of borders */
}


/* Blockquote Style */
/* Targeting only normal blockquotes */
blockquote:not(.twitter-tweet) {
  position: relative; /* Allows absolute positioning inside */
  background-color: #F9F9F8; /* Light grey background */
  border-left: 5px solid #F29FDE; /* Yellowish left border */
  margin: 1.5em 0px;
  padding: 0.5em 10px;
  padding-top: 45px; /* Increased padding to accommodate the title and provide spacing */
  quotes: none;
  font-style: italic;
  color: #333; /* Darker text color for contrast */
}

blockquote:not(.twitter-tweet):before {
  color: #F29FDE; /* Yellowish color for the quote icon */
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote:not(.twitter-tweet) p {
  display: inline;
  font-style: normal; /* Normal font style for the quote's text */
  margin-top: 20px; /* Adds space between the title and the text */
}

/* Adding title "Summary" with specific adjustments */
blockquote:not(.twitter-tweet)::after {
  content: "Обобщение";
  position: absolute;
  top: 10px; /* Positioning from the top of the blockquote */
  left: 15px; /* Positioning from the left side */
  font-weight: bold; /* Makes the title bold */
  font-size: 1.2em; /* Slightly larger font size */
  color: #F29FDE; /* Yellowish color */
  padding-left: 10px;
}

/* HOVER effect on images with link */
    a img {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: block; 
        width: 100%; 
        height: auto;
    }

    a:hover img {
        transform: scale(1.05);
        box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    }


[style*="text-decoration: underline"], em[style*="text-decoration: underline"] {
    background-color: #FFF6DA;
    font-weight: normal;          /* Keeps the text not bold */
    text-decoration: none !important;      /* Forces removal of the underline */
    padding: 0;                   /* No extra space around the text */
    box-decoration-break: clone;  /* Ensures consistent background across line breaks */
}


article h2 {
    font-weight: bold;
    font-size: 30px;
    color: #4f4f4f;
}
article h3 {
    font-weight: bold;
    font-size: 24px;
    color: #4f4f4f;
}
article h1 {
    font-weight: 900;
    font-size: 45px;
    color: #3d3d3d;
}
.product-container-getfitup {
  border: 1px solid #e0e0e0;
  margin-bottom: 40px;
  margin-top: 40px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transition: transform 0.3s, box-shadow 0.3s;
  overflow: hidden;
  padding-bottom: 10px;
}

.product-container-getfitup:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.product-div-getfitup {
  display: grid;
  grid-template-columns: 1fr;
  padding-left: 40px;
}

@media (min-width: 768px) {
  .product-div-getfitup {
    grid-template-columns: 250px 1fr;
    gap: 20px;
  }
}

.highlight-section-getfitup {
  background-color: #66b2a3;
  padding: 5px 0px 5px 40px;
  text-align: left;
  width: 100%;
  margin-bottom: 40px;
}

.highlight-section-getfitup div {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}

.product-image-getfitup {
  width: 100%;
}

.product-image-getfitup img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.3s;
  border: none;
  padding
}

.product-image-getfitup img:hover {
  transform: scale(1.05);
}

.product-details-getfitup {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-info-getfitup {
  flex-grow: 1;
}

.product-title-getfitup {
  font-size: 30px;
  font-weight: bold;
  margin: 0 0 10px;
}

.product-highlights-getfitup {
  margin-bottom: 10px;
}

.product-highlights-getfitup ul {
  list-style-type: disc;
  padding-left: 0px;
  margin-top: 0;
}

.product-bottom-getfitup {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-link-getfitup {
  font-size: 18px;
  font-weight: bold !important;
  color: #fff !important;
  text-decoration: none;
  background-color: #66b2a3;
  padding: 8px 12px;
  border: 1px solid #66b2a3;
  border-radius: 5px;
  text-align: center;
  transition: background-color 0.3s, border-color 0.3s;
  display: inline-block;
  width: 100%;
  max-width: 200px;
}

.product-link-getfitup:hover {
  background-color: #519d8d;
  border-color: #519d8d;
}

.purchase-info-getfitup {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  text-align: center;
}

.separator-getfitup {
  border: 1px solid #e0e0e0;
  margin: 20px 0;
  width: calc(100% + 40px);
  margin-left: -20px;
}

.collapsible-getfitup {
  margin-top: 10px;
}

.collapsible-button-getfitup {
  background-color: transparent;
  color: #66b2a3;
  cursor: pointer;
  padding: 0px 35px 10px 60px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.3s;
      border-bottom: 1px solid #e0e0e0;
  margin-top:10px;
}

.collapsible-button-getfitup:hover {
  color: #519d8d;
}

.collapsible-button-getfitup .arrow-getfitup {
  font-size: 20px;
  transition: transform 0.3s;
}

.collapsible-getfitup.active .collapsible-button-getfitup .arrow-getfitup {
  transform: rotate(45deg);
}

.collapsible-getfitup.active .separator-getfitup {
  display: none;
}

.collapsible-content-getfitup {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  padding: 0 35px;

}

.pros-cons-container-getfitup {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pros-cons-getfitup {
  display: flex;
  justify-content: space-between;
}

.pros-getfitup,
.cons-getfitup {
  flex: 1;
  margin-right: 20px;
}

.pros-getfitup ul,
.cons-getfitup ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pros-getfitup li:before {
  content: '✔️';
  margin-right: 5px;
  color: green;
}

.cons-getfitup li:before {
  content: '✖️';
  margin-right: 5px;
  color: red;
}

.description-getfitup {
  padding-top: 10px;
}

.collapsible-getfitup.active .collapsible-content-getfitup {
  max-height: 500px; /* Arbitrary large value to ensure the content expands */
}
.highlight-container-custom {
    margin-top: 40px;
    margin-bottom: 40px;
    border: 1px solid #66b2a3;
    border-radius: 10px;
    overflow: hidden;
}

.highlight-header-custom {
    background-color: #66b2a3;
    color: #fff;
    padding: 10px 30px;
    text-align: left; /* Change from center to left */
    font-weight: bold;
}

.highlight-content-custom ul {
    list-style: none;
    padding: 10px;
    margin: 0;
}

.highlight-content-custom ul li {
    padding: 10px;
    margin: 5px 0;
    cursor: pointer;
}

.highlight-content-custom ul li:hover .product-name {
    color: #F29FDE;
}

.descriptor {
    color: #66b2a3; /* Change this to the color you want */
    font-weight: bold;
}

.product-name {
    transition: color 0.3s;
    font-weight: bold; /* Make the font of the protein name bolder */

}
/* Mobile Styles */
@media (max-width: 767px) {
  .product-container-getfitup {
    margin-bottom: 20px;
    margin-top: 20px;
    padding-bottom: 5px;
  }

  .product-div-getfitup {
    padding-left: 10px;
  }

  .product-image-getfitup {
    width: 60%; /* Adjust width to make image smaller */
    margin: 0 auto; /* Center the image */
  }

  .product-image-getfitup img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.3s;
    border: none;
  }

  .highlight-section-getfitup {
    padding: 5px 0;
    margin-bottom: 20px;
  }

  .highlight-section-getfitup div {
    font-size: 16px;
    padding-left: 15px;
  }

  .product-title-getfitup {
    font-size: 24px;
    margin: 0 0 5px;
  }

  .product-highlights-getfitup {
    margin-bottom: 5px;
  }

  .product-highlights-getfitup ul {
    padding-left: 15px;
  }

  .product-bottom-getfitup {
    padding: 10px 0;
  }

  .product-link-getfitup {
    font-size: 16px;
    padding: 6px 10px;
    max-width: 150px;
  }

  .purchase-info-getfitup {
    font-size: 10px;
  }

  .separator-getfitup {
    margin: 10px 0;
    width: calc(100% + 10px);
    margin-left: -5px;
  }

  .collapsible-button-getfitup {
    padding: 0px 10px 5px 15px;
    font-size: 14px;
  }

  .collapsible-content-getfitup {
    padding: 0 10px;
  }

  .pros-cons-container-getfitup {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .pros-getfitup,
  .cons-getfitup {
    margin-right: 10px;
  }

  .highlight-container-custom {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .highlight-header-custom {
    padding: 5px 10px;
  }

  .highlight-content-custom ul {
    padding: 5px;
  }

  .highlight-content-custom ul li {
    padding: 5px;
    margin: 3px 0;
  }

  .description-getfitup {
    padding-top: 5px;
  }
}
.rte a {
  text-decoration: none !important;
}

.breadcrumb-section {
  display: flex;
  justify-content: space-between;
  margin: auto;
  padding-top: 15px;
}

.breadcrumb ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: 0;
}

.breadcrumb li {
  margin-right: 10px;
  font-size: 14px;
  text-decoration: none;
}

.breadcrumb li a {
  color: #00909b;
  text-decoration: none;
}

.breadcrumb li a:hover {
  color: #F29FDE !important; /* Use !important to ensure it takes precedence */
}

.breadcrumb li:after {
  content: ">";
  margin-left: 10px;
}

.breadcrumb li:last-child:after {
  content: "";
  margin-left: 0;
}

@media (max-width: 767px) {
  .breadcrumb-section {
    display: none; /* Hide breadcrumb on mobile devices */
  }
}

/* Styling for tables */
article table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    color: #333;
    table-layout: auto !important; /* Force table to respect content width */
    border: none; /* Remove outer border of the table */
}

/* Styling for table cells and headers with thin inner borders */
article table th, 
article table td {
    padding: 12px 15px; /* Add padding for better spacing */
    text-align: left;
    border: 1px solid #ddd; /* Thin border for table cells */
    white-space: normal; /* Allow wrapping, but respects content width */
}

/* Header styling */
article table th {
    background-color: #f1f1f1; /* Light grey background for headers */
    font-weight: bold;
    border: 1px solid #ddd; /* Ensure header cells have borders */
}

/* Alternating row backgrounds */
article table tr:nth-child(even) {
    background-color: #f9f9f9; /* Very light grey background for even rows */
}

article table tr:nth-child(odd) {
    background-color: #ffffff; /* White background for odd rows */
}

/* Ensure that specific column widths are respected */
article table th, 
article table td {
    width: auto; /* Prevent equal distribution of column width */
}

/* Bold Paragraph Text Style (Remove Bold, Keep Color) */
p b, p strong {
    color: #007a84; /* Keeps the blue color */
}


a:hover {
  color: #F29FDE !important; /* Gold color on hover with high priority */
}
ol li::marker,
ul li::marker {
  color: #F29FDE; /* Gold color for both bullets and numbers */
}

.articles-container {
    transition: opacity 0.5s ease-in-out;
}

.article-class {
    margin-bottom: 20px; /* Space between articles */
}
.article-template--loaded .breadcrumb-section,
.article-template--loaded .article-template__toc,
.article-template--loaded .article-template__right-content {
  display: none;
}


#scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 5px;
    background-color: #4CAF50;
    z-index: 9999;
    transition: width 0.25s;
}
  .article-content {
    border-bottom: 5px solid #000; /* Thick border/underline */
    margin-bottom: 20px; /* Space below each article */
    padding-bottom: 20px; /* Optional: Adds space inside the border */
  }
/* Override the specific link color for H1 anchors */
h1 a {
    color: #3d3d3d !important; /* Force the color to be black */
    text-decoration: none !important; /* Force the underline to be removed */
}

/* Style for the inline loading spinner */
.loading-spinner-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px; /* Add some margin to separate it from the article */
    font-size: 20px; /* Increase font size for the loading text */
    color: black; /* Set font color */
}

/* Style for the loading spinner */
.loading-illustration {
    font-size: 50px; /* Increase spinner size */
    color: black; /* Spinner color */
    margin-bottom: 10px; /* Space between spinner and text */
}

/* Centered loading text */
.loading-spinner-inline p {
    font-size: 18px; /* Adjust font size for larger text */
    text-align: center;
    color: black;
}

article h2,
article h3 {
  margin-bottom: 30px !important; /* Ensure spacing below headings */
}

article p {
  margin-top: 0 !important;        /* Remove any top margin on paragraphs */
  margin-bottom: 40px !important;  /* Add space below paragraphs */
}