[class*=Widget__WidgetHeader-sc-ed52ed6a-2]{
background-color: #180048 !important;
color: #60F0F8 !important;
border: #180048 !important
}


[data-folder-id="482719"] {
    display: none;
  }

/*Font change */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
font-family: "Montserrat", sans-serif !important; 
}



/* Progress Bar */
[class*="ProgressBar__Bar"]{
    background-color: #18F0B8 !important;
}

[class*="ProgressBar__Line"]{
   background-color: #18F0B8!important;
}


[class*="ProgressBar__Text"]{
   background-color: #18F0B8!important;
 }

 /* All buttons */
.button-wrap button {
  color: #F050F8;
  background: transparent;
  border: 1px solid #F050F8;
}

/* Apply blue fill to the SVG on hover */
.button-wrap button:hover svg {
  fill: #[class*=Widget__WidgetHeader-sc-ed52ed6a-2]{
background-color: #180048 !important;
};
}

/* Fallback for browsers that don't support fill on SVG */
.button-wrap button:hover svg path {
  fill: #60F0F8;
}

/* Content Background */
.guide-canvas {
  border: 1px #180048 solid;
  border-radius: 8px;
  position: relative;
  background: #180048 !important;
}
.ston-guide-content-canvas,
.widget-guide,
.kbWidget-guide,
.kbWidget-guideTop {
  background-color: #180048 !important;
}
/* 1. Set the width of the scrollbar */
.Steps-styles__ContentCanvas-sc-5782c04c-2::-webkit-scrollbar {
  /* Using your requested width */
  width: 15px !important; 
}

/* 2. Style the scrollbar track (the background) */
.Steps-styles__ContentCanvas-sc-5782c04c-2::-webkit-scrollbar-track {
  /* Using your requested dark background color */
  background: #100030 !important; 
}

/* 3. Style the scrollbar thumb (the draggable part) */
.Steps-styles__ContentCanvas-sc-5782c04c-2::-webkit-scrollbar-thumb {
  /* Using your requested thumb color */
  background-color: #593985 !important; 
  /* Using your requested rounded corners */
  border-radius: 6px !important; 
  /* Adds padding/margin around the thumb, matching the track color */
  border: 3px solid #100030 !important; 
}


/* Media Background */
[class*="Illustrations__Canvas"] {
  background: #100030 solid !important;
background-color: #100030 !important;
}

/* Media Background (Video)*/
[class*="Illustration__VideoPlayerWrap"] {
  background-color: #100030 !important;
}

/* Hyperlink */

.ston-content-text a {
  color: #60F0F8 !important;
}


/* step title */
h2.subtitle {
  color: #60F0F8;

}

/* Large heading */
h3 {
  color: #60F0F8;

}

/* Medium heading */
h4 {
  color: #60F0F8;
 
}

/* Small heading */
h5 {
  color: #60F0F8;
  
}

/* step content */
div.content-text {
  color: #F0ffff;
  
}


/* back button */
.button-wrap .back-button {
  background: #180048 !important;
  border: 1px solid #60F0F8;
  transition: border 0.2s ease-in-out;
}

/* general button hover state - apply to ALL buttons in a button-wrap */
.button-wrap button:hover {
  background: transparent;
  color: #F050F8;
   border: 2px solid #F050F8;
 
}
/* change the SVG color on hover by targeting it within the hovered button */
.button-wrap button:hover svg {
  fill: #F050F8;
}

/* For some SVGs, you may need to also target the path element inside */
.button-wrap button:hover svg path {
  fill: #F050F8;
}

/* A more specific hover state for the back button */
.button-wrap .back-button:hover {
  border: 2px solid #60F0F8;
}

/* color of the arrow icon in back button */
.button-wrap .back-button svg path {
  fill: #60F0F8;
  transition: fill 0.2s ease-in-out;
}

/* change the SVG color on hover */
.button-wrap .back-button:hover svg path {
  fill: #60F0F8;
}

/* footer colour */
.steps-footer {
  background-color: #100030 !important; 
}

/* header colour */
[class*="ExplanationTop__Canvas-"] {
    background-color: #100030 !important;
    color: #F0ffff !important;
}

.guide-title {
    color: #F0ffff !important;
}

.Breadcrumbs-styles__Crumb-sc-3219ca90-1 {
  color: #F0ffff !important;
}

/* margin split #2E1E64 */

/* tile */
a.tile {
  background-color: #939eff;
  color: #100030;
  border-radius: 13px;
  padding: 16px 56px 16px 16px;
  font-size: 16px;
  min-height: 72px;
}

/* tile icon */
a.tile svg path {
  fill: #100030;
}


/* tip container */
.content-text aside.tip {
  border-radius: 4px;
  border-left: 4px solid #60f0f8 !important;
  background: #3c78a0 !important;
  padding: 15px 16px 20px 16px !important;
  color: #F0ffff !important;

}

.tip h1 {  color: #F0ffff !important; }
.tip h2 {  color: #F0ffff !important; }
.tip h3 {  color: #F0ffff !important; }
.tip h4 {  color: #F0ffff !important; }
.tip h5 {  color: #F0ffff !important; }

/* warning container */
.content-text aside.warning {
  border-radius: 4px;
  border-left: 4px solid #FF3F68 !important;
  background: #a3255b !important;
  padding: 15px 16px 20px 16px !important;
  color: #F0ffff !important;
}
.warning h1 {  color: #F0ffff !important; }
.warning h2 {  color: #F0ffff !important; }
.warning h3 {  color: #F0ffff !important; }
.warning h4 {  color: #F0ffff !important; }
.warning h5 {  color: #F0ffff !important; }


/* collasible section container */


details summary:hover::before {
  background-color: #593985 !important;
}

details summary::after {
    background-color: #F0FFFF !important;
  
}


/* Footer buttons */
.styles__ButtonElement-sc-57ba88d7-6 {
    color: #60f0f8 !important;
    background: #100030 !important;
    border-color: #60f0f8 !important;
}
.styles__ButtonElement-sc-57ba88d7-6 svg {
  fill: #60f0f8 !important;
}

.styles__ButtonElement-sc-57ba88d7-6 svg path {
  fill: #60f0f8 !important;
}

[class*=Tooltip-styles__TriggerWrap-sc-] {
    color: #60f0f8 !important;
    background: #100030 !important;
    border-color: #60f0f8 !important;
}

.guide-canvas {
  border: 0;
}

.ston-guide-media-canvas {
  border-right: 1px solid #2E1E64 !important;
}

.ston-steps-footer {
  border-top: 1px solid #2E1E64 !important;
}

[class*=TableOfContents-styles__OverflowWrap-sc-36e25135-7] {
    background-color: #100030 !important;
}

/* Table of Content Target the split pane resizer element */
.splitpane-resizer {
    background-color: #60F0F8 !important;
}

[class*=styles__BaseRowContainer] {
    color: #F0ffff !important;
}

[class*=Input__Field-] {
    color: #F0ffff !important;
}

/* Add 2px left and right padding to the specified button class */
.styles__ButtonElement-sc-57ba88d7-6 {
  padding-left: 8px !important;
  padding-right: 8px !important;
 /* Added for rounded corners */
  border-radius: 4px;
}

/* Target the table wrapper with high specificity to remove the glow */
div.content-text .table-container .table-wrapper {
    background: none !important;  
    /* You can also use a specific color if the background is not transparent, e.g., */
    /* background: #100030 !important; */ 
}
/* Targets the actual input element within the header menu canvas */
[class*=HeaderMenu__Canvas] input,
[class*=HeaderMenu__Canvas] [class*="__Field"] {
    /* This targets the input text color directly */
    color: #000000 !important;
}


[class*=HeaderMenu__Canvas] {
    color: initial !important; 
}

/* Scrollable step bottom overlay */
[class*="Steps-styles__ScrollIndicatorWrap"] {
  background: linear-gradient(rgba(24, 0, 72, 0) 0%, rgba(24, 0, 72, 0.8) 70%) !important;
}

[class*="Illustrations__Backgrounds"] {
  background-color: #0D022E !important;
}

/* Example how to place tentacles inside guide */

.step-4717939::before {
  content: '';
  width: 310px;
  height: 184px;
  display: block;
  position: absolute;
  left: -30px;
  top: 445px;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,<svg width="310" height="184" viewBox="0 0 310 184" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(%23filter0_d_2414_8280)"><path d="M34.0723 160.725C22.3126 157.307 16.8896 149.157 15.2552 139.548C11.7779 119.139 25.3864 92.1412 31.627 89.9811C40.806 86.8039 72.1091 98.6966 109.778 103.541C147.447 108.385 164.19 63.3736 189.905 40.0254C215.62 16.6771 258.019 3.36649 282.467 25.1934C306.914 47.0204 295.285 81.3203 287.718 74.308C280.151 67.2958 295.447 39.3322 264.908 38.157C234.37 36.9819 205.098 73.3216 172.659 119.655C140.22 165.989 34.0723 160.725 34.0723 160.725Z" fill="%23FF48D8"/><path d="M35.4832 149.39C23.6996 145.942 18.2579 137.747 16.6094 128.091C29.2336 129.344 86.5501 134.34 119.038 126.489C155.684 117.641 170.633 99.0525 189.408 73.8862C208.183 48.7199 233.295 27.0857 254.003 23.6809C274.71 20.2762 290.24 26.7948 289.839 44.8045L289.437 62.8142C281.849 55.7602 297.137 27.6835 266.546 26.4669C235.954 25.2503 206.676 61.7257 174.237 108.238C141.797 154.751 35.4832 149.39 35.4832 149.39Z" fill="%236018C8"/></g><defs><filter id="filter0_d_2414_8280" x="4.69531" y="8.10938" width="302.516" height="166.797" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2414_8280"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2414_8280" result="shape"/></filter></defs></svg>');
}

.step-4717939::after {
  content: '';
  width: 262px;
  height: 252px;
  display: block;
  position: absolute;
  right: -120px;
  top: 0;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,<svg width="262" height="252" viewBox="0 0 262 252" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_2414_8284)"><g filter="url(%23filter0_d_2414_8284)"><path d="M251.149 53.816C251.149 53.816 180.675 19.6861 120.49 31.5657C100.998 35.42 69.6311 42.096 42.9696 58.1855C29.1891 66.5042 17.9696 76.6499 10.1665 87.8487L9.32598 89.0547C-17.8129 128.909 21.3773 175.952 27.7848 190.428C31.9762 199.941 25.7303 215.759 21.4492 226.218C19.1935 231.855 17.4376 235.862 18.1738 236.61C19.8493 238.33 23.5196 238.574 31.9166 226.881C34.1074 223.779 36.6511 219.929 39.5649 215.035C43.8356 207.828 44.7266 198.41 44.1448 188.025C42.5944 163.868 32.5121 134.577 36.9574 116.242C39.6064 105.185 45.2288 95.6033 54.3831 88.2297C66.3701 78.6033 84.3411 72.6979 109.605 72.2687C110.703 72.241 111.792 72.2407 112.915 72.2312C156.888 72.2867 199.848 100.833 199.848 100.833C207.428 102.823 215.905 103.317 224.416 102.264C230.221 101.532 235.89 99.9716 241.046 97.6868C246.203 95.402 250.729 92.4452 254.324 89.0128C264.828 78.8745 266.391 64.9833 251.149 53.816Z" fill="%23FF48D8"/><path d="M254.287 87.3688L254.798 88.6569C251.199 92.0922 246.667 95.0516 241.504 97.3386C236.342 99.6256 230.667 101.187 224.856 101.921C221.763 99.6192 215.347 94.5348 204.069 84.2297C186.803 68.4238 146.51 59.2905 99.0554 64.9555C71.6524 68.2181 48.9478 77.2494 36.3143 95.5208C28.0581 107.29 23.9222 119.913 24.2729 132.273C24.7722 146.128 32.085 158.446 37.6801 171.209C42.4424 182.065 46.1063 193.527 44.0075 205.365C41.9087 217.202 33.1812 229.595 18.1518 236.658C19.6017 228.396 25.8403 220.535 30.6703 212.595C41.7621 194.344 32.1581 179.623 22.574 163.94L22.0342 163.012C15.9295 147.612 11.8089 132.15 13.9743 115.318C15.61 102.457 21.414 89.2045 33.2217 78.2604C57.9084 55.4066 102.894 50.462 138.661 51.0718C173.882 51.8111 206.671 59.7334 232.956 73.855C240.623 77.9382 247.754 82.4556 254.287 87.3688Z" fill="%236018C8"/></g></g><defs><filter id="filter0_d_2414_8284" x="-10.1406" y="23.0547" width="282.539" height="228.422" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2414_8284"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2414_8284" result="shape"/></filter><clipPath id="clip0_2414_8284"><rect width="262" height="252" fill="white"/></clipPath></defs></svg>');
}


/* Tentacles inside guide Learn the basics*/
/* Apply these styles ONLY on screens 900px and wider (Desktop/Tablet) */

@media screen and (min-width: 900px) {
.step-4512691::before {
  content: '';
  width: 310px;
  height: 184px;
  display: block;
  position: absolute;
  left: -30px;
  top: 600px;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,<svg width="310" height="184" viewBox="0 0 310 184" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(%23filter0_d_2414_8280)"><path d="M34.0723 160.725C22.3126 157.307 16.8896 149.157 15.2552 139.548C11.7779 119.139 25.3864 92.1412 31.627 89.9811C40.806 86.8039 72.1091 98.6966 109.778 103.541C147.447 108.385 164.19 63.3736 189.905 40.0254C215.62 16.6771 258.019 3.36649 282.467 25.1934C306.914 47.0204 295.285 81.3203 287.718 74.308C280.151 67.2958 295.447 39.3322 264.908 38.157C234.37 36.9819 205.098 73.3216 172.659 119.655C140.22 165.989 34.0723 160.725 34.0723 160.725Z" fill="%23FF48D8"/><path d="M35.4832 149.39C23.6996 145.942 18.2579 137.747 16.6094 128.091C29.2336 129.344 86.5501 134.34 119.038 126.489C155.684 117.641 170.633 99.0525 189.408 73.8862C208.183 48.7199 233.295 27.0857 254.003 23.6809C274.71 20.2762 290.24 26.7948 289.839 44.8045L289.437 62.8142C281.849 55.7602 297.137 27.6835 266.546 26.4669C235.954 25.2503 206.676 61.7257 174.237 108.238C141.797 154.751 35.4832 149.39 35.4832 149.39Z" fill="%236018C8"/></g><defs><filter id="filter0_d_2414_8280" x="4.69531" y="8.10938" width="302.516" height="166.797" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2414_8280"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2414_8280" result="shape"/></filter></defs></svg>');
}}
@media screen and (min-width: 900px) {
.step-4512691::after {
  content: '';
  width: 262px;
  height: 252px;
  display: block;
  position: absolute;
  right: -120px;
  top: 0;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,<svg width="262" height="252" viewBox="0 0 262 252" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_2414_8284)"><g filter="url(%23filter0_d_2414_8284)"><path d="M251.149 53.816C251.149 53.816 180.675 19.6861 120.49 31.5657C100.998 35.42 69.6311 42.096 42.9696 58.1855C29.1891 66.5042 17.9696 76.6499 10.1665 87.8487L9.32598 89.0547C-17.8129 128.909 21.3773 175.952 27.7848 190.428C31.9762 199.941 25.7303 215.759 21.4492 226.218C19.1935 231.855 17.4376 235.862 18.1738 236.61C19.8493 238.33 23.5196 238.574 31.9166 226.881C34.1074 223.779 36.6511 219.929 39.5649 215.035C43.8356 207.828 44.7266 198.41 44.1448 188.025C42.5944 163.868 32.5121 134.577 36.9574 116.242C39.6064 105.185 45.2288 95.6033 54.3831 88.2297C66.3701 78.6033 84.3411 72.6979 109.605 72.2687C110.703 72.241 111.792 72.2407 112.915 72.2312C156.888 72.2867 199.848 100.833 199.848 100.833C207.428 102.823 215.905 103.317 224.416 102.264C230.221 101.532 235.89 99.9716 241.046 97.6868C246.203 95.402 250.729 92.4452 254.324 89.0128C264.828 78.8745 266.391 64.9833 251.149 53.816Z" fill="%23FF48D8"/><path d="M254.287 87.3688L254.798 88.6569C251.199 92.0922 246.667 95.0516 241.504 97.3386C236.342 99.6256 230.667 101.187 224.856 101.921C221.763 99.6192 215.347 94.5348 204.069 84.2297C186.803 68.4238 146.51 59.2905 99.0554 64.9555C71.6524 68.2181 48.9478 77.2494 36.3143 95.5208C28.0581 107.29 23.9222 119.913 24.2729 132.273C24.7722 146.128 32.085 158.446 37.6801 171.209C42.4424 182.065 46.1063 193.527 44.0075 205.365C41.9087 217.202 33.1812 229.595 18.1518 236.658C19.6017 228.396 25.8403 220.535 30.6703 212.595C41.7621 194.344 32.1581 179.623 22.574 163.94L22.0342 163.012C15.9295 147.612 11.8089 132.15 13.9743 115.318C15.61 102.457 21.414 89.2045 33.2217 78.2604C57.9084 55.4066 102.894 50.462 138.661 51.0718C173.882 51.8111 206.671 59.7334 232.956 73.855C240.623 77.9382 247.754 82.4556 254.287 87.3688Z" fill="%236018C8"/></g></g><defs><filter id="filter0_d_2414_8284" x="-10.1406" y="23.0547" width="282.539" height="228.422" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2414_8284"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2414_8284" result="shape"/></filter><clipPath id="clip0_2414_8284"><rect width="262" height="252" fill="white"/></clipPath></defs></svg>');
}}


/* In guide - background of language picer window */
[class*=ExplanationLanguages__Wrap-sc-] {
    
    background: #100030 !important; 
}
[class*=LanguageListItem__Name-sc-] {
    
    color: #E7F6F7  !important; 
}
[class*=LanguageListItem__LanguageButton-sc-]:hover {
    background: #593985  !important;
}
[class*=Panel__Canvas-sc-] {
    
    background: #100030 !important; 
}


/* content width (ifrmae included) in Calculator guide*/
.step-4852004 {
.step-content-wrap {
  width: 65%;
  min-width: 65%;
  padding: 24px !important;
}
}
/* Footer buttons in guie*/
.ston-language-button, .ston-feedback-button, .ston-completed-steps-button, .ston-toc-toggle-menu-button {
    color: #60f0f8 !important;
    background: #100030 !important;
    border-color: #60f0f8 !important;
    
  svg {
    fill: #60f0f8 !important;
  }
  svg path {
    fill: #60f0f8 !important;
  }
}

.ston-tooltipTrigger {
    color: #60f0f8 !important;
    background: #100030 !important;
    border-color: #60f0f8 !important;
}


/* scrollbar in TOC */
#toc-tree-view-panel {
  [data-test-id="virtuoso-scroller"] {
    &::-webkit-scrollbar-thumb {
background: #100030 !important;
background-color: #593985 !important;
border: 2px solid #100030! important;
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: #593985 !important;
    }

    &::-webkit-scrollbar-corner {
      background-color: #100030 !important;
    }
  }
}
/* Grid layout for step 4900653 */
.step-4900653 {
  .ston-content-text {
    display: grid !important;
    gap: 16px;
    grid-template-columns: 1fr 1fr 1fr;
  }
    
  figure {
    width: auto !important;
    margin-right: 0 !important;
  }
  
  figure figcaption {
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin-top: 8px;
  }
}