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

:root {

  --color-primary-00 : #ffffff;
  --color-primary-05 : #ffffff;
  --color-primary-45 : #f6f7ff;
  --color-primary-50 : #e6f7f3;
  --color-primary-100 : #b0e7da;
  --color-primary-200 : #a9b0ff;
  --color-primary-300 : #828cff; 
  --color-primary-400 : #6976ff; 
  --color-primary-500 : #00b189;
  --color-primary-600 : #3e4ce8; 
  --color-primary-700 : #007e61;
  --color-primary-800 : #000000;
  --color-primary-900 : #000000;

  --color-secondary-00 : #101010;
  --color-secondary-05 : #ffffff;
  --color-secondary-50 : #fefbe9;
  --color-secondary-100 : #fdf2ba;
  --color-secondary-200 : #a3eecf; 
  --color-secondary-300 : #7ae6b9; 
  --color-secondary-400 : #60e1ab; 
  --color-secondary-500 : #ffd41e;
  --color-secondary-600 : #33c589; 
  --color-secondary-700 : #e3c11d;
  --color-secondary-800 : #b19717;
  --color-secondary-900 : #897512;

  --color-tertiary-00 : #ffffff; 
  --color-tertiary-05 : #fffef7; 
  --color-tertiary-50 : #fffbe9; 
  --color-tertiary-100 : #fff2b9; 
  --color-tertiary-200 : #ffeb98;  
  --color-tertiary-300 : #ffe268; 
  --color-tertiary-400 : #ffdd4b; 
  --color-tertiary-500 : #ffd41e;
  --color-tertiary-600 : #e8c11b; 
  --color-tertiary-700 : #b59715;
  --color-tertiary-800 : #8c7511;
  --color-tertiary-900 : #6b590d; 

  --color-additional-00 : #ffffff; 
  --color-additional-05 : #fefbfe; 
  --color-additional-50 : #fdf1fc;
  --color-additional-100 : #f8d5f6;
  --color-additional-200 : #f5c0f2; 
  --color-additional-300 : #f0a3ec; 
  --color-additional-400 : #ed91e9; 
  --color-additional-500 : #c6563a;
  --color-additional-600 : #d46bcf; 
  --color-additional-700 : #a554a1; 
  --color-additional-800 : #80417d; 
  --color-additional-900 : #62325f; 

  --primary-element-background : var(--color-primary-00);
  --primary-element-subtle : var(--color-primary-50);
  --primary-element-pale : var(--color-primary-05); 
  --primary-element-light : var(--color-primary-100);
  --primary-element-mid-light : var(--color-primary-300);
  --primary-element-mid : var(--color-primary-500);
  --primary-element-mid-dark : var(--color-primary-700);
  --primary-element-dark : var(--color-primary-900);

  --primary-button-foreground-ondark : var(--color-primary-00); 
  --primary-button-foreground-onlight : var(--color-primary-500);
  --primary-button-label-inverted : var(--color-primary-900);
  --primary-button-resting : var(--color-primary-500);
  --primary-button-hover : var(--color-primary-700);
  --primary-button-pressed : var(--color-primary-800);

  --primary-nav-label-selected : var(--color-primary-00);
  --primary-nav-label-resting : var(--color-primary-500);
  --primary-nav-label-hover : var(--color-primary-700);
  --primary-nav-label-pressed : var(--color-primary-800);
  --primary-nav-container-selected : var(--color-primary-500);
  --primary-nav-container-selected-hover : var(--color-primary-700);

  --primary-chip-label-selected : var(--color-primary-500);
  --primary-chip-border-selected : var(--color-primary-500);
  --primary-chip-container-selected : var(--color-primary-50);
  --primary-chip-container-selected-hover : var(--color-primary-100);

  --primary-tab-label-resting : var(--color-primary-00);
  --primary-tab-container-active : var(--color-primary-00);
  --primary-tab-container-resting : var(--color-primary-500);
  --primary-tab-container-resting-hover : var(--color-primary-700);

  --primary-title-inverted : var(--color-primary-00); 
  --primary-title-page-title : var(--color-primary-900);
  --primary-title-page-subtitle : var(--color-primary-700);
  --primary-title-card-title : var(--color-primary-900);
  --primary-title-card-subtitle : var(--color-primary-700);
  --primary-title-highlight : var(--color-primary-600);
  
  --primary-body-text-inverted : var(--color-primary-00); 
  --primary-body-text-highlight : var(--color-primary-600); 

  --primary-overlay-overlaylight: rgba(0, 0, 0, 0.4);

  --primary-shadow-branded : var(--color-primary-800);

  --secondary-element-background : var(--color-secondary-00);
  --secondary-element-pale : #F7FDFB;
  --secondary-element-subtle : var(--color-secondary-50);
  --secondary-element-light : var(--color-secondary-100);
  --secondary-element-mid-light : var(--color-secondary-300);
  --secondary-element-mid : var(--color-secondary-500);
  --secondary-element-mid-dark : var(--color-secondary-700);
  --secondary-element-dark : var(--color-secondary-900);

  --secondary-button-foreground-ondark : var(--color-secondary-00); 
  --secondary-button-foreground-onlight : var(--color-secondary-500);
  --secondary-button-label-inverted : var(--color-secondary-900);
  --secondary-button-resting : var(--color-secondary-500);
  --secondary-button-hover : var(--color-secondary-700);
  --secondary-button-pressed : var(--color-secondary-800);

  --secondary-title-inverted : var(--color-secondary-00); 
  --secondary-title-page-title : var(--color-secondary-900);
  --secondary-title-page-subtitle : var(--color-secondary-700);
  --secondary-title-card-title : var(--color-secondary-900);
  --secondary-title-card-subtitle : var(--color-secondary-700);
  --secondary-title-highlight : var(--color-secondary-600);

  --secondary-body-text-inverted : var(--color-secondary-00); 
  --secondary-body-text-highlight : var(--color-secondary-600); 

  --tertiary-button-foreground-ondark : var(--color-tertiary-00); 
  --tertiary-button-foreground-onlight : var(--color-tertiary-500); 
  --tertiary-button-label-inverted : var(--color-tertiary-900);
  --tertiary-button-resting : var(--color-tertiary-500);
  --tertiary-button-hover : var(--color-tertiary-700);
  --tertiary-button-pressed : var(--color-tertiary-800);

  --gradient-element-flashing : linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-50) 50.52%, var(--color-secondary-100) 100%);
  --gradient-element-fade : linear-gradient(90deg, #f9faff00 0%, #f9faff 100%); 
  --gradient-element-pattern : linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-50) 50.52%, var(--color-secondary-100) 100%); 

  --gradient-navigation-separator : linear-gradient(90deg, #ffd41e00 0%, #ffd41e80 50%, #ffd41e00 100%);
  --gradient-navigation-fade : linear-gradient(90deg, #b0e7da00 0%, #b0e7da 100%);
  --font-title: "Rokkitt";

  --color-topnav-background: #E6F7F3 !important;

  --color-footer-background: #F7FDFB;
  --footer-font-color: #2D2D3E;
}

.cmp-primary-nav .primary-nav-wrapper .primary-nav ul.menu>li a {
    color: #000000 !important;
    }
.cmp-indication-bar-nav, .cmp-indication-bar-nav .primary-nav {background-color: #FEFBE9 !important;
    }
.cmp-indication-bar-nav .primary-nav .above-brand-nav__rightnav ul li a, .global-link.cmp-global-secondary-inverted.cmp-global-secondary-primary-secondary ul li:first-child a, .ul-navitem li a {color: #000000 !important;}
.cmp-primary-nav, footer .cmp-experiencefragment .cmp-footer-nav .primary-nav, .cmp-primary-nav .sibling-item {-o-border-image: linear-gradient(270deg, rgba(232, 231, 239, 0), rgba(255, 212, 30, 1), rgba(232, 231, 239, 0)) 1 0 !important;
    border-image: -webkit-gradient(linear, right top, left top, from(rgba(232, 231, 239, 0)), color-stop( rgba(255, 212, 30, 1)), to(rgba(232, 231, 239, 0))) 1 0 !important;
    border-image: linear-gradient(270deg, rgba(232, 231, 239, 0), rgba(255, 212, 30, 1) , rgba(232, 231, 239, 0)) 1 0 !important;}
.cmp-isi--contianer-medium .cmp-isi--container {background-color: #ffffff !important;}
.cmp-primary-nav .primary-nav-wrapper .primary-nav ul.menu>li.active>div a {
    background-color: #FFD41E !important;
}
.ul-navitem li a.ul-navitem__active {
    background-color: #FFD41E !important;
    color: #000000 !important;
}

.cmp-isi--contianer-medium .cmp-isi--container .cmp-isi--row__col-content p {
    color: #515170 !important;
}
.global-link.cmp-global-link-tertiary ul li a span.material-symbols-rounded {
    color: #000000 !important;
}
#remove-isi .global-link.cmp-global-link-tertiary ul li a span.material-symbols-rounded {
    color: #fff !important;
}
#add-isi .global-link.cmp-global-link-tertiary ul li a span.material-symbols-rounded {
    color: #fff !important;
}
.cmp-indication-bar-nav .primary-nav .above-brand-nav__rightnav ul li a:hover:after, .cmp-indication-bar-nav .primary-nav .above-brand-nav__rightnav ul li a:after, .ul-navitem li a:after, .ul-navitem li a:hover:after, .cmp-primary-nav .primary-nav-wrapper .primary-nav.two_line--navigation ul.menu li .cmp-nav__menu--icon a:after
 {
    background-color: #FFD41E !important;
 }

.cmp-container-gradient, .cmp-bgcolor--primary-dark, .panelcontainer.cmp-panelcontainer-callout-container {
    background: linear-gradient(135deg, #FEFBE9 0%, #FEFBE9 0.01%, #FDF2BA 56%, #FDF2BA 100%) !important;
}
.accordion .cmp-accordion__header .cmp-accordion__Itemicon {
color: #000 !important;
}
.living-with-oab-title { font-size: var(--step-2) !important;}
.living-with-oab-text { font-size: var(--step--1) !important;}
.modal.previewModel .modal-close-top .btn-close { background-color: #FFD41E !important;
}
.modal.previewModel .modal-close-top .btn-close span { color: #000000 !important;
}

.ul-navitem li a.ul-navitem__active, .ul-navitem li a:active, .ul-navitem li a:focus{
 background-color: #ffffff00 !important;
    color: #000000 !important;
} 
.ul-navitem li a.ul-navitem__active{
 background-color: #FFD41E !important;
    color: #000000 !important;
}
 
.cmp-primary-nav .primary-nav-wrapper .primary-nav .image a:after{
 background-color: #FFD41E !important;
    color: #000000 !important;
}
 
.list{
font-size: var(--step-0);
}

.cmp-anchorlink .cmp-primary-nav.primary-nav__more .primary-nav-wrapper .primary-nav ul.menu>li a:after {
    background-color: #FFD41E !important;
}
.cmp-anchorlink .cmp-primary-nav.primary-nav__more .primary-nav-wrapper .primary-nav ul.menu>li a:hover:after{

color:#FFD41E !important;
background-color:#FFD41E !important;

}

.cmp-experiencefragment .cmp-footer-nav .primary-nav .image a:after {
background-color:#FFD41E !important;

}
.bold-styling.step-5 p{ font-size: var(--step-5) !important;}

footer.footer-font-color .cmp-experiencefragment,
footer.footer-main-background .cmp-experiencefragment {

  background-color: #F7FDFB !important;
}

.cmp-isi.enabled-inpage-isi .cmp-isi--container .cmp-isi--container__holder
{
margin-bottom:0px !important;
}

.cmp-isi--container .global-link.cmp-icon-size-s ul li a span.material-symbols-rounded {color: #fff;}
 
.cmp-quiz-component .global-link.cmp-icon-size-s ul li a span.material-symbols-rounded {

background-color: #FFD41E !important;
color: #000; 
}