@charset "utf-8";

/* Import base styles */
@import url('base.css');

body {	 
	font-size: 24px; /* __2023_03_29__2026_04_22 */  						
	background:url(img/bg_fff.png) top left repeat-x, url(img/sidebar_bg_right.png) bottom right no-repeat, url(img/sidebar_bg_left.png) bottom left no-repeat;		
	background-color: #FCF5F2; /*   f9f9f9__2026_04_22 */  
	background-attachment:scroll;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /*__2023_05_16*/
    overflow-y: auto;
    overflow-x: hidden;@
    height: 100%;
    -webkit-overflow-scrolling: touch;
} 
.dark {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

.dark body {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

.dark input,
.dark textarea,
.dark .textarea {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

.dark input:focus,
.dark textarea:focus,
.dark .textarea:focus {
    outline-color: #404040;
}

.dark fieldset,
.dark .fieldset {
    background-color: #2d2d2d;
    border-color: #404040;
}

.dark legend,
.dark .legend {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

.dark .wncloud a {
    color: #4a9eff;
}

.dark .wncloud a:hover {
    color: #6ab0ff;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark .h1,
.dark .h2,
.dark .h3,
.dark .h4,
.dark .h5 {
    color: #ffffff;
}

/* Fix contrast: titles on light backgrounds should be dark even in dark mode */
.dark .lightbg h1,
.dark .lightbg h2,
.dark .lightbg h3,
.dark .lightbg h4,
.dark .lightbg h5,
.dark .lightbg .h1,
.dark .lightbg .h2,
.dark .lightbg .h3,
.dark .lightbg .h4,
.dark .lightbg .h5,
.dark .lighterbg h1,
.dark .lighterbg h2,
.dark .lighterbg h3,
.dark .lighterbg h4,
.dark .lighterbg h5,
.dark .lighterbg .h1,
.dark .lighterbg .h2,
.dark .lighterbg .h3,
.dark .lighterbg .h4,
.dark .lighterbg .h5,
.dark .lightbg_title h1,
.dark .lightbg_title h2,
.dark .lightbg_title h3,
.dark .lightbg_title h4,
.dark .lightbg_title h5,
.dark .lightbg_title .h1,
.dark .lightbg_title .h2,
.dark .lightbg_title .h3,
.dark .lightbg_title .h4,
.dark .lightbg_title .h5 {
    color: #222222;
}

/* Fix contrast for common container classes in inc files */
.dark [style*="background: #fff"],
.dark [style*="background:#fff"],
.dark [style*="background: #ffffff"],
.dark [style*="background:#ffffff"],
.dark [style*="background-color: #fff"],
.dark [style*="background-color:#fff"],
.dark [style*="background-color: #ffffff"],
.dark [style*="background-color:#ffffff"],
.dark .example-card h1,
.dark .example-card h2,
.dark .example-card h3,
.dark .example-card h4,
.dark .example-card h5,
.dark .examples-container h1,
.dark .examples-container h2,
.dark .examples-container h3,
.dark .examples-container h4,
.dark .examples-container h5,
.dark .wnc-container h1,
.dark .wnc-container h2,
.dark .wnc-container h3,
.dark .wnc-container h4,
.dark .wnc-container h5,
.dark .wnc-container .h1,
.dark .wnc-container .h2,
.dark .wnc-container .h3,
.dark .wnc-container .h4,
.dark .wnc-container .h5 {
    color: #222222;
}

.dark p {
    color: #e0e0e0;
}

.dark blockquote {
    background-color: #2d2d2d;
    border-left: 4px solid #404040;
    color: #e0e0e0;
}

.dark pre {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

.dark table {
    color: #e0e0e0;
}

.dark td,
.dark th {
    border-color: #404040;
}

.dark .btn {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

.dark .btn:hover {
    background-color: #404040;
}

.dark .btn-primary {
    background-color: #1a73e8;
    color: #ffffff;
}

.dark .btn-primary:hover {
    background-color: #2b7de9;
}

.dark .btn-warning {
    background-color: #f29900;
    color: #ffffff;
}

.dark .btn-danger {
    background-color: #d93025;
    color: #ffffff;
}

.dark .btn-success {
    background-color: #188038;
    color: #ffffff;
}

.dark .btn-info {
    background-color: #1a73e8;
    color: #ffffff;
}

.dark select,
.dark .select {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

.dark select:focus,
.dark .select:focus {
    border-color: #404040;
}

.dark .lightbg {
    background-color: #2d2d2d;
}

.dark .lighterbg {
    background-color: #333333;
}

.dark .lightbg_title {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

.dark .notice {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

.dark .option {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

.dark a,
.dark .regular {
    color: #4a9eff;
}

.dark a:hover,
.dark .regular:hover {
    color: #6ab0ff;
}

.dark .bing {
    color: #ff9e80;
}

.dark .bing2 {
    color: #ff9e80;
}

.dark .region-tag {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

.dark .blue-dot {
    background-color: #4a9eff;
}

.dark .wn-page-loading {
    background: rgba(0, 0, 0, 0.55);
}
.dark .wn-page-loading .blue-dot {
    box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.3);
}

.dark ::-webkit-scrollbar-track {
    background: #2d2d2d;
}

.dark ::-webkit-scrollbar-thumb {
    background: #404040;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #505050;
}

/* showhide div */
.showHideDivs { display: none; }
	.showHideDivs {
		opacity: 1;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
	}
	.showHideDivs:hover { opacity: 0.9; }
	.eac-sugg { color:#ccc; }
/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); 
    -webkit-border-radius: 6px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
    border-radius: 6px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: var(--color-light-gray); 
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3); 
    box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: var(--color-light-gray); 
}

@media (max-width: 767px) {
    ::-webkit-scrollbar {
        width: 8px;
    }
    
    ::-webkit-scrollbar-track {
        -webkit-border-radius: 4px;
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 4px;
        border-radius: 4px;
    }
}

#navbar { background-color: #303134; }
input, select, textarea { 
	font-family: 'Open Sans', sans-serif !important;
}
input, textarea, .textarea	
{	
	font-size: large !important; /*__2023_03_29*/
    background-color:#fbfbfb;	
	border-radius: 3px; /* future proofing */
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	-moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
	box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
	border-style: initial;
	padding: 10px; /* __2023_07_25 */
 	margin: 2px 6px 10px 2px;
	}
input:focus, textarea:focus, .textarea:focus { outline-color: rgba(0,0,0,0.3) !important; /* #2b8ac9 __2023_07_25 old: #719ECE */}
/* radio and checkboxes __2022_ 04_26 */
/*Custom Radio Buttons and Checkboxes using Font Awesome*/
input[type=radio],
input[type='checkbox'] {
  display: none;
}
input[type=radio] + label,
input[type='checkbox'] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: var(--spacing-sm);
  cursor: pointer;
  font-size: 18px;
}
input[type='radio'] + label:before,
input[type='checkbox'] + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray);
  border-radius: 50%;
  background: var(--color-white);
}
input[type='checkbox'] + label:before {
  border-radius: 3px;
}
input[type=radio]:checked + label:before,
input[type='checkbox']:checked + label:before {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}
input[type=checkbox][disabled] + label:before, 
input[type=radio][disabled] + label:before  {
  color: #7F7E7E !important; 
}
input[type=checkbox]:checked + label:before, 
input[type=radio]:checked + label:before {
  color: var(--color-secondary); 
  opacity:1;
}
.radio label,
.checkbox label {
  padding-left: 0;
}
/* end radio and checkboxes __2022_ 04_26 */
fieldset, .fieldset {	
  	border-radius:10px 10px 10px 10px;
  	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  	-moz-box-shadow:    0px 0px 5px rgba(0,0,0,0.3);
  	box-shadow:         0px 0px 5px rgba(0,0,0,0.3);
  	border-style:none;
	background-color: #ffffff;
	margin-bottom: 30px;
}	
.fieldset {
	width:80%;
	max-width: 650px;
	max-height:auto;
	border-radius:10px 10px 10px 10px;	
}
legend, .legend {	
	font-size: 105%; /* __2023_08_26 */
  	font-weight: 500; /* __2023_05_22 instead of bold */
  	/* font-stretch: expanded; __2023_06_10 */
  	padding: 5px;
	background: #fff; /* Old browsers */
}
.wncloud a { color: var(--color-primary);  }
.wncloud a:hover   { opacity:0.8; }
strong, .strong { font-weight: 600; /* __2023_05_23 */  }
.shadow {
	width: 350px;
	position: absolute; bottom: -10px; 
	background: #000;
	z-index: -1;
	box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
	border-radius: 50%;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5
{ 	
    font-weight: normal; 
    font-style: normal; 
    margin-top:auto;
    margin-bottom:0;
}
h1, .h1 {
    font-size: 42px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: normal;
}
h2, .h2 {
    font-size: 30px; /* __2023_03_29 */
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: normal;
}
h3, .h3 {
    font-size: 26px; /* __2023_02_16 */
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: normal;
    margin-top:0px; /* checked if to be deprecated */
    margin-bottom:0px; /* checked if to be deprecated */
}
h4, .h4 {
    font-size: 24px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: normal;
}
p {
    font-size: 22px; /* __2023_03_30 */
    font-style: normal;
    font-variant: normal;
    font-weight: 400; /* __2023_05_22 */
}
blockquote {
    font-size: 18px !important; /* __2023_05_26 */
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: normal;
}
blockquote li:before { width: 50% !important; }
pre {
    /* checked if to be deprecated */
	font-size: 13px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: normal;
}
#intro_box {
    /* 2be deprecated */ 
	margin-right: 20% !important;
    margin-left: 20% !important;
	margin-bottom: 200px !important;
    width: auto !important;
}
/* Modern responsive content container */
#sheader.content-container { /* __2024_12_17 */
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

#sheader .content-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* Responsive breakpoints */
@media screen and (max-width: 768px) {
    #sheader.content-container {
        padding: 0 15px;
    }
    
    #sheader .content-wrapper {
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    #sheader.content-container {
        padding: 0 10px;
    }
}
/* BUTTONS */
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}
	.switch {
	  position: relative;
	  height: 26px;
	  width: 120px;
	  margin: 20px auto;
	  background: rgba(0, 0, 0, 0.25);
	  border-radius: 3px;
	  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	}
	
	.switch-label {
	  position: relative;
	  z-index: 2;
	  float: left;
	  width: 58px;
	  line-height: 26px;
	  font-size: 11px;
	  color: rgba(255, 255, 255, 0.35);
	  text-align: center;
	  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
	  cursor: pointer;
	}
	.switch-label:active {
	  font-weight: bold;
	}
	
	.switch-label-off {
	  padding-left: 2px;
	}
	
	.switch-label-on {
	  padding-right: 2px;
	}
	
	.switch-input {
	  display: none;
	}
	.switch-input:checked + .switch-label {
	  font-weight: bold;
	  color: rgba(0, 0, 0, 0.65);
	  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
	  -webkit-transition: 0.15s ease-out;
	  -moz-transition: 0.15s ease-out;
	  -ms-transition: 0.15s ease-out;
	  -o-transition: 0.15s ease-out;
	  transition: 0.15s ease-out;
	  -webkit-transition-property: color, text-shadow;
	  -moz-transition-property: color, text-shadow;
	  -ms-transition-property: color, text-shadow;
	  -o-transition-property: color, text-shadow;
	  transition-property: color, text-shadow;
	}
	.switch-input:checked + .switch-label-on ~ .switch-selection {
	  left: 60px;
	  /* Note: left: 50%; doesn't transition in WebKit */
	}
	
	.switch-selection {
	  position: absolute;
	  z-index: 1;
	  top: 2px;
	  left: 2px;
	  display: block;
	  width: 58px;
	  height: 22px;
	  border-radius: 3px;
	  background-color: #65bd63;
	  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9dd993), color-stop(100%, #65bd63));
	  background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
	  background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
	  background-image: -ms-linear-gradient(top, #9dd993, #65bd63);
	  background-image: -o-linear-gradient(top, #9dd993, #65bd63);
	  background-image: linear-gradient(top, #9dd993, #65bd63);
	  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
	  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
	  -webkit-transition: left 0.15s ease-out;
	  -moz-transition: left 0.15s ease-out;
	  -ms-transition: left 0.15s ease-out;
	  -o-transition: left 0.15s ease-out;
	  transition: left 0.15s ease-out;
	}

.btn {
  display: inline-block;
  *display: inline;
  /* added on 22102012 */
  text-decoration: none;
  /* IE7 inline-block hack */
  *zoom: 1;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  font-size: 22px;
  line-height: 22px;	
  *line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;    /* #e6e6e6 */
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(top, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  /* filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); */
  border: 1px solid #cccccc;
  *border: 0;
  border-bottom-color: #b3b3b3;
  border-radius: 20px; /* __2023_03_18 */
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
}
.btn:active,
.btn.active {
  background-color: #cccccc \9;
}
.btn:first-child {
  *margin-left: 0;
}
.btn:hover {
  color: #333333;
  text-decoration: none;
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
  /* Buttons in IE7 don't get borders, so darken on hover */

  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -ms-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}
.btn:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn.active,
.btn:active {
  background-color: #e6e6e6;
  background-color: #d9d9d9 \9;
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
}
.btn.disabled,
.btn[disabled] {
  cursor: not-allowed;			
  background-color: #e6e6e6;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn-large {
  padding: 9px 24px;
  font-size: 16px;
  line-height: normal;
  border-radius: 25px; /* __2023_02_15 */
}
.btn-large [class^="icon-"] {
  margin-top: 1px;
}

/* Button variants for better visual hierarchy */
.btn-primary {
  background-color: #222222 !important;
  color: #ffffff !important;
  border-color: #222222 !important;
  text-shadow: none !important;
  background-image: none !important;
}

.btn-primary:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
}

.btn-secondary {
  background-color: #BD5723 !important;
  color: #ffffff !important;
  border-color: #BD5723 !important;
  text-shadow: none !important;
  background-image: none !important;
}

.btn-secondary:hover {
  background-color: #a04a1e !important;
  border-color: #a04a1e !important;
}
.btn-small {
  padding: 5px 9px;
  font-size: 12px;
  line-height: 19px;
}
.btn-small [class^="icon-"] {
  margin-top: -1px;
}
.btn-mini {
  padding: 2px 6px;
  font-size: 12px;
  line-height: 17px;
}
.btn-warning {
  color: #000;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #faa732; /* #f89406 */
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: -ms-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(top, #fbb450, #f89406);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
  border-color: #f89406 #f89406 #ad6704;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  /* filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); */
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
  background-color: #f89406;
  *background-color: #df8505;
}
.btn-warning:active,
.btn-warning.active {
  background-color: #c67605 \9;
}
.btn-danger {
  background-color: #da4f49; /* #bd362f */
  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: linear-gradient(top, #ee5f5b, #bd362f);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
  border-color: #bd362f #bd362f #802420;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  /* filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); */
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
  background-color: #bd362f;
  *background-color: #a9302a;
}
.btn-danger:active,
.btn-danger.active {
  background-color: #942a25 \9;
}
.btn-success {
	color: #ffffff;
	outline-color: #1d6f97;
	background-color: #2A9ED6; /* #19B4FF */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#2A9ED6), to(#19B4FF)); 
	background-image: -webkit-linear-gradient(top, #2A9ED6, #19B4FF); 
	background-image:    -moz-linear-gradient(top, #2A9ED6, #19B4FF); 
	background-image:     -ms-linear-gradient(top, #2A9ED6, #19B4FF); 
	background-image:      -o-linear-gradient(top, #2A9ED6, #19B4FF);
	background-image: linear-gradient(top, #2A9ED6, #19B4FF); 
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2A9ED6', endColorstr='#19B4FF', GradientType=0);
	border-color: #19B4FF #19B4FF #387038;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	/* filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); */
}
.btn-success:before {
/*content: "\f024";	*/
}
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
  color: #000;
  background-color: #19B4FF;
}
.btn-success:active,
.btn-success.active {
  background-color: #408140 \9;
}
.btn-info {
  background-color: #49afcd; /* #2f96b4 */
  background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
  background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: linear-gradient(top, #5bc0de, #2f96b4);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
  border-color: #2f96b4 #2f96b4 #1f6377;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
    /* filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); */
}
.btn-info:hover,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
  background-color: #2f96b4;
  *background-color: #2a85a0;
}
.btn-info:active,
.btn-info.active {
  background-color: #24748c \9;
}
.btn-inverse {
  background-color: #414141;
  background-image: -moz-linear-gradient(top, #555555, #222222);
  background-image: -ms-linear-gradient(top, #555555, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222));
  background-image: -webkit-linear-gradient(top, #555555, #222222);
  background-image: -o-linear-gradient(top, #555555, #222222);
  background-image: linear-gradient(top, #555555, #222222);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0);
  border-color: #222222 #222222 #000000;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  /* *background-color: #222222; */
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  /* filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); */
}
.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
  background-color: #222222;
  *background-color: #151515;
}
.btn-inverse:active,
.btn-inverse.active {
  background-color: #080808 \9;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;	
    margin: 0;
	padding: 0;
    font-size: 100%;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
input[type="file"] {	
	border: 5px #2A9ED6 dashed;
	padding: 20px;
}
button.btn,
input[type="submit"].btn {	
  *padding-top: 2px;
  *padding-bottom: 2px;
}
button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}
button.btn.btn-large,
input[type="submit"].btn.btn-large {
  *padding-top: 7px;
  *padding-bottom: 7px;
}
button.btn.btn-small,
input[type="submit"].btn.btn-small {
  *padding-top: 3px;
  *padding-bottom: 3px;
}
button.btn.btn-mini,
input[type="submit"].btn.btn-mini {
  *padding-top: 1px;
  *padding-bottom: 1px;
}
.btn-group {
  position: relative;
  *zoom: 1;
  *margin-left: .3em;
}
.btn-group:before,
.btn-group:after {
  display: table;
  content: "";
}
.btn-group:after {
  clear: both;
}
.btn-group:first-child {
  *margin-left: 0;
}
.btn-group + .btn-group {
  margin-left: 5px;
}
.btn-toolbar {
  margin-top: 10.5px;
  margin-bottom: 10.5px;
}
.btn-toolbar .btn-group {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
}
.btn-group > .btn {
  position: relative;
  float: left;
  margin-left: -1px;
  border-radius: 0;
}
.btn-group > .btn:first-child {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.btn-group > .btn.large:first-child {
  margin-left: 0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
  z-index: 2;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}
.btn-group > .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
  -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  *padding-top: 4px;
  *padding-bottom: 4px;
}
.btn-group > .btn-mini.dropdown-toggle {
  padding-left: 5px;
  padding-right: 5px;
}
.btn-group > .btn-small.dropdown-toggle {
  *padding-top: 4px;
  *padding-bottom: 4px;
}
.btn-group > .btn-large.dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
}
.btn-group.open .dropdown-toggle {
  background-image: none;
  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
}
.btn-group.open .btn.dropdown-toggle {
  background-color: #e6e6e6;
}
.btn-group.open .btn-primary.dropdown-toggle {
  background-color: #9d461d;
}
.btn-group.open .btn-warning.dropdown-toggle {
  background-color: #f89406;
}
.btn-group.open .btn-danger.dropdown-toggle {
  background-color: #bd362f;
}
.btn-group.open .btn-success.dropdown-toggle {
  background-color: #51a351;
}
.btn-group.open .btn-info.dropdown-toggle {
  background-color: #2f96b4;
}
.btn-group.open .btn-inverse.dropdown-toggle {
  background-color: #222222;
}
.btn .caret {
  margin-top: 7px;
  margin-left: 0;
}
.btn:hover .caret,
.open.btn-group .caret {
  opacity: 1;
  filter: alpha(opacity=100);
}
.btn-mini .caret {
  margin-top: 5px;
}
.btn-small .caret {
  margin-top: 6px;
}
.btn-large .caret {
  margin-top: 6px;
  border-left-width: 5px;
  border-right-width: 5px;
  border-top-width: 5px;
}
.dropup .btn-large .caret {
  border-bottom: 5px solid #000000;
  border-top: 0;
}
.btn-primary .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret,
.btn-inverse .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
  opacity: 0.75;
  filter: alpha(opacity=75);
}
input[type="submit"]:enabled { color: #000; }
/* end of BUTTONS */
.lightbg { background-color: #F6F6F5; }
.lighterbg { background-color: #FBFBFB; }
.lightbg_title {
	background-color: #F6F6F5;
	font-weight:bold;
}
#linearBg {
  /* fallback */
  background-color: #FBFBFB;
  /* background: url(images/linear_bg_2.png); */
  background-repeat: repeat-x;
  
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FBFBFB), to(#F6F6F5));
  
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #F6F6F5, #FBFBFB);
  
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #F6F6F5, #FBFBFB);
  
  /* IE 10 */
  background: -ms-linear-gradient(top, #F6F6F5, #FBFBFB);
  
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #F6F6F5, #FBFBFB);
}
i {	opacity:0.9; }
.faded { opacity: 0.5; }
.fa-spin-s {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}
.fa-spin-no {
  -webkit-animation: none !important;
  animation: none !important;
}
next { background-color: #96C; }
.L1 {	color:#222222; }
/* Optional field instructions - show only when input has focus */
.wn-field-instruction {
    display: none;
    margin-top: 6px;
    font-size: 0.9em;
}
.wn-field-instruction.wn-field-instruction--tooltip {
    display: none !important;
}
.wn-label-with-tooltip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wn-field-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2a9ed6;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: help;
    user-select: none;
}
.wn-field-tooltip::after {
    content: "?";
    font-weight: 700;
    font-family: Arial, sans-serif;
}
.wn-field-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    min-width: 180px;
    max-width: 280px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #222;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 20;
}
.wn-field-tooltip:hover::before,
.wn-field-tooltip:focus::before,
.wn-field-tooltip:focus-visible::before {
    opacity: 1;
    visibility: visible;
}
.wn-field-tooltip:focus,
.wn-field-tooltip:focus-visible {
    outline: 2px solid #2a9ed6;
    outline-offset: 2px;
}
fieldset:focus-within .wn-field-instruction,
.wn-social-field:focus-within .wn-field-instruction,
.wn-input-group:focus-within .wn-field-instruction {
    display: block;
}
blockquote {
		line-height:1.6;
		font-size:100%;
}
s { color: #BD5723; /* strike orange */ }
output { display: inline; }
ul { 
    list-style-type: none;
    padding-left: 0;
}
ul li {
    padding-left: 0;
    margin-bottom: 10px;
}
.notice {
	border-left: yellowgreen 4px solid; 
	margin: 5px; 
	padding: 15px;
}
.option {
	border-left: grey 4px solid; 
	margin: 5px; 
	padding: 15px;
}
tr { text-align: left; }
td {
	border-radius: 5px; /* future proofing */
	vertical-align: top;	
}
a, .regular {	color: #222222;	display:inline; }
.bold { font-weight:bold; }
.subtitle,
.subtitleS { color: #1a1a1a; display: inline-table; }
.subtitleS { font-size: smaller !important; /* __2025_09_13 */ }
.info {	
/*	color: #666;*/
	/*cursor: pointer;	*/	
	color: #525252;
	display:inline;
	font-size:80%;
	vertical-align:super;
	/*border-bottom: 1px dotted #369; */
}
a.regular:hover,
a.subtitle:hover,
a.subtitleS:hover {
	color: #222222;
	text-decoration:none;	
}
.bing {	color: #BD5723;	font-style:bold italic; }
.bing2 { color: #BD5723; }	
#steps {  
    float: right !important;
    font-size: small;
    color: #ccc;
}
.hide { display: none !important ; /* __2023_08_26 */ }	
.block { display: block !important; /* __2023_08_27 */ }
#paypal {
	background-color:transparent; 
    box-shadow: none !important;
	padding: 0; 
	margin-right: 0; 
	opacity: 0.9;
	border: 0;
	width: auto;
}
#paypal:hover { opacity: 1; }
#mc_embed_signup { background:transparent; clear:left; font-size:14px; width:50%; /*Mailchimp */ }
#mc-embedded-subscribe { width: 50px !important; float: right !important; padding: 2px !important;}
#mc-embedded-subscribe:hover { background-color: darkgreen !important; }
.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
	}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	}	
.right { float: right; }
.left { float: left; }
.center { text-align: center !important; }
.text-center { text-align: center !important; }
.justify { text-align: justify!important; /*__2023_06_09 */ }
.smaller { font-size: smaller !important; }
.larger { font-size: larger !important; }
/* #wn-site-notice: when enabled, full styles are inlined in header.php (after wndesk/wnmob so fixed + flex always apply). */
#livechat-notice {
	position: fixed;
	top: 0px;
	left: 0px;
	min-height: 52px;
	padding: 0;
	width: 100%;
	background: #222;
	z-index: 1999;
	opacity: 0.6;
	color: #2A9ED6;
	text-align: center;
	font-weight: 700;
}
#livechat-notice span { vertical-align: -10px; }
/* Stack below site notice when both are visible (remove .hide on both) */
#wn-site-notice:not(.hide) ~ #livechat-notice:not(.hide) {
	top: 52px;
	z-index: 1998;
}
select, .select {
	text-decoration: none;	
	width: auto;
	padding: 5px 20px 5px;	
	margin-bottom: 0;	
	font-size: inherit;
	color: #333333;
	text-align: center;
	cursor: pointer;
	background-color: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	transition: all 0.2s ease-in-out;
}

select:focus, .select:focus {
	outline: none;
	border-color: #2a9ed6;
	box-shadow: 0 0 0 2px rgba(42, 158, 214, 0.2);
}

div.conv.wnp:first-of-type {
    margin-top: 20px;
}

@media (max-width: 767px) {
    div.conv.wnp:first-of-type {
        margin-top: 15px;
    }
}

.region-tag {
    position: relative;
    top: -72px;
    right: 0;
    float: right;
    font-size: 12px;
    color: #666;
    margin: 0;
    padding: 0;
}

#logo {
    position: relative;
    display: inline-block;
}

/* Hide region tag on mobile */
@media (max-width: 768px) {
    .region-tag {
        display: none;
    }
}

.blue-dot {
    display: inline-block;
    width: 10px !important;
    height: 10px !important;
    background-color: #2A9ED6;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

/* Multi-step form (next / suivant / siguiente): full-viewport shell until DOM ready */
.wn-page-loading {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    background: rgba(18, 18, 20, 0.42);
    opacity: 1;
    transition: opacity 0.35s ease;
}
.wn-page-loading--done {
    opacity: 0;
    pointer-events: none;
}
.wn-page-loading .blue-dot {
    width: 18px !important;
    height: 18px !important;
    margin-right: 0;
    box-shadow: 0 0 0 4px rgba(42, 158, 214, 0.25);
}
@keyframes wn-blue-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.88; }
}
.blue-dot--pulse {
    animation: wn-blue-dot-pulse 1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .blue-dot--pulse {
        animation: none;
    }
    .wn-page-loading {
        transition-duration: 0.15s;
    }
}
.wn-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Invoice: remove default blockquote padding/margin-inline so Notes align with line items */
table#invoice blockquote {
    padding: 0;
    border-left: none;
    box-sizing: border-box;
}

.header-text {
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Start funnel (inc_start_*): headline + business-type select; wrap instead of overlap */
#inc1a.desktop_only .desktop-header > h2 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.65rem;
    box-sizing: border-box;
    max-width: 100%;
}

#inc1a.desktop_only .desktop-header > h2 .header-text {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin-right: 0;
    white-space: normal;
}

#inc1a.desktop_only .desktop-header > h2 > span:not(.header-text),
#inc1a.desktop_only .desktop-header > h2 .header-text > span {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
}

#inc1a.desktop_only .desktop-header > h2 .select-business-type {
    flex: 0 0 auto;
    width: auto;
    min-width: 11.25rem;
    max-width: min(18rem, 40vw);
    margin: 0;
}

/* Start / index hero promo tagline (inc_start_*.php) */
.wn-promo-tagline {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0.75rem auto 0.5rem;
    padding: 0.55rem 1rem;
    background: #121214;
    color: #fff;
    font-size: clamp(0.65rem, 2.1vw, 0.85rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .wn-promo-tagline {
        font-size: clamp(0.6rem, 3.2vw, 0.75rem);
        padding: 0.5rem 0.65rem;
        letter-spacing: 0.04em;
    }
}

/* Multi-step progress: center % in the fill (absolute + translate centers a tall line box → text sits low on mobile) */
.wn-progress-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.wn-progress-text {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    line-height: 1 !important;
}

/* Confirmation pages (#ok): % label is a sibling centered on the full track — overrides flex/static rules above */
#ok .wn-progress-bar-wrapper {
    position: relative;
}
#ok .wn-progress-bar {
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
}
#ok .wn-progress-text {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
    pointer-events: none;
}

/* ok_join CTA: same blinkdiv + #slider-right pattern as inc_tsf_issue / FAQ; overrides wndesk fixed vertical slider + PNG tile on .slider-right-green */
#ok .blinkdiv {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 0;
    padding: 0;
    text-align: center;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
}
#ok .blinkdiv input#slider-right.btn.slider-right-green {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 28px !important;
    margin: 0 auto !important;
    display: inline-block !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: bold !important;
    color: #fff !important;
    text-align: center !important;
    cursor: pointer !important;
    border: none !important;
    border-radius: 25px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 12px rgba(42, 158, 214, 0.35) !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #2a9ed6 0%, #1e7bb8 100%) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: auto !important;
    text-shadow: none !important;
    z-index: auto !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    white-space: normal !important;
}
#ok .blinkdiv input#slider-right.btn.slider-right-green:hover,
#ok .blinkdiv input#slider-right.btn.slider-right-green:focus-visible {
    background-image: linear-gradient(135deg, #1e7bb8 0%, #2a9ed6 100%) !important;
    box-shadow: 0 6px 16px rgba(42, 158, 214, 0.4) !important;
    color: #fff !important;
}
#ok .blinkdiv input#slider-right.btn.slider-right-green:active {
    box-shadow: 0 2px 8px rgba(42, 158, 214, 0.3) !important;
}

/* --- Shared language switcher (inc_wn_lang_switch.php + js/wn_lang_switch.js) --- */
.wn-lang-pill {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    background: #2a9ed6;
    color: #fff;
    padding: 0;
    border-radius: 10px;
    font-size: 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    box-shadow: 0 4px 14px rgba(42, 158, 214, 0.35);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    overflow: visible;
}
.wn-lang-pill:hover,
.wn-lang-pill:focus-within {
    background: #2389bd;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(42, 158, 214, 0.4);
}
.wn-lang-pill i {
    font-size: 15px;
    flex-shrink: 0;
    opacity: 0.95;
}
.wn-lang-control {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
}
.wn-lang-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.45;
    cursor: pointer;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.wn-lang-label {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    overflow: hidden;
    white-space: nowrap;
    transform: translateX(-2px);
    transition: max-width 0.18s ease, opacity 0.15s ease, transform 0.18s ease, margin-left 0.18s ease;
}
.wn-lang-trigger:focus {
    outline: none;
}
.wn-lang-trigger:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
    border-radius: 4px;
}
.wn-lang-chevron {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, 0.95);
    flex-shrink: 0;
    margin-top: 1px;
    margin-left: 0;
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 0.15s ease, transform 0.18s ease, margin-left 0.18s ease;
}
.wn-lang-pill:hover .wn-lang-label,
.wn-lang-pill:focus-within .wn-lang-label,
.wn-lang-widget.is-open .wn-lang-label {
    max-width: 11.5ch;
    opacity: 1;
    margin-left: 6px;
    transform: translateX(0);
}
.wn-lang-pill:hover .wn-lang-chevron,
.wn-lang-pill:focus-within .wn-lang-chevron,
.wn-lang-widget.is-open .wn-lang-chevron {
    opacity: 0.9;
    transform: scaleX(1);
    margin-left: 6px;
}
.wn-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    min-width: max(100%, 11rem);
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    color: #333;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06);
    z-index: 10050;
}
.wn-lang-option {
    margin: 0;
    padding: 11px 16px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.wn-lang-option:hover {
    background: rgba(42, 158, 214, 0.1);
    color: #15628a;
}
.wn-lang-option.is-active {
    background: rgba(42, 158, 214, 0.18);
    color: #0d4a66;
    font-weight: 600;
}
select.wn-lang-select-native {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    max-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
/* Desktop: same offset as FAQ — immediately left of #how (burger), top: 15px; right ≈ 65px */
/* z-index above .gradient (9999), .notification-container (9999), and .wn-page-loading (10060) */
@media (min-width: 768px) {
    .wn-lang-wrap-fixed {
        position: fixed;
        top: 15px;
        right: calc(30px + 23px + 12px);
        transform: none;
        z-index: 12000;
        margin: 0;
        padding: 0;
        line-height: normal;
        pointer-events: auto;
    }

    /* Only the bell / open panel capture clicks — avoids a wide invisible dropdown layer competing with the lang pill */
    .notification-container {
        pointer-events: none;
    }
    .notification-container .notification-bell,
    .notification-container .notification-dropdown.active {
        pointer-events: auto;
    }
    .notification-container .notification-dropdown:not(.active) {
        pointer-events: none !important;
    }
}

.wn-lang-widget {
    pointer-events: auto;
    cursor: pointer;
}
/* Start funnel: lang is a body sibling after #navbar (not inside it). Decorative .gradient is z-index 9999 — pass clicks through so they cannot steal hits from the pill */
body.wn-start-funnel .gradient {
    pointer-events: none !important;
}
body.wn-start-funnel .wn-lang-wrap-fixed {
    z-index: 100050 !important;
    isolation: isolate;
}
@media (max-width: 767px) {
    body.wn-start-funnel .wn-start-lang-slot .mob_only .mobile-nav.mobile-nav-lang {
        z-index: 100050 !important;
        isolation: isolate;
    }
}
.language-selector .wn-lang-pill {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: none;
}
.language-selector .wn-lang-pill:hover,
.language-selector .wn-lang-pill:focus-within {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}
.language-selector .wn-lang-menu {
    z-index: 12000;
}

/* Desktop vs mobile toolbars (underscore classes — inc_privacy, inc_nyma, inc_wnc, inc_faq): never show both */
@media (max-width: 767px) {
    .desktop_only {
        display: none !important;
    }
    .mob_only {
        display: block !important;
    }

    /* Mobile toolbar lang pill: floating control on right edge with compact width */
    body .mob_only .mobile-nav.mobile-nav-lang {
        position: fixed;
        top: calc(70px + env(safe-area-inset-top, 0px) + 22px);
        right: 0;
        left: auto;
        z-index: 10055;
        width: auto;
        max-width: min(58vw, 190px);
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-sizing: border-box;
        pointer-events: auto;
        overflow: visible;
    }
    /* Mobile toolbar lang pill: match #message-badge (footer) */
    .mob_only .wn-lang-pill {
        width: auto;
        max-width: min(58vw, 190px);
        margin-left: 0;
        box-sizing: border-box;
        background: #2a9ed6;
        color: #fff;
        border: none;
        box-shadow: 0 4px 14px rgba(42, 158, 214, 0.35);
        padding: 0;
        font-size: 13px;
        border-radius: 10px;
        gap: 6px;
        align-items: center;
        justify-content: flex-start;
    }
    .mob_only .wn-lang-trigger {
        padding: 11px 12px;
    }
    /* Docked-right state: keep only the globe tab visible until tapped. */
    .mob_only .wn-lang-widget {
        transform: translateX(calc(100% - 44px));
        transition: transform 0.25s ease;
        will-change: transform;
    }
    .mob_only .wn-lang-widget.is-open {
        transform: translateX(0);
    }
    @media (prefers-reduced-motion: reduce) {
        .mob_only .wn-lang-widget {
            transition: none;
        }
    }
    .mob_only .wn-lang-pill:hover,
    .mob_only .wn-lang-pill:focus-within {
        background: #2389bd;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(42, 158, 214, 0.4);
    }
    .mob_only .wn-lang-pill i {
        font-size: 15px;
        color: #fff;
        opacity: 0.95;
    }
    .mob_only .wn-lang-control {
        flex: 1 1 auto;
        min-width: 0;
    }
    .mob_only .wn-lang-trigger {
        color: #fff;
        width: 100%;
        font-weight: 600;
        letter-spacing: 0.04em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        justify-content: space-between;
    }
    .mob_only .wn-lang-trigger:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.85);
        outline-offset: 3px;
        border-radius: 4px;
    }
    .mob_only .wn-lang-chevron {
        border-top-color: rgba(255, 255, 255, 0.95);
    }
    .mob_only .wn-lang-menu {
        right: 0;
        left: auto;
        min-width: max(100%, 9.5rem);
    }
    /* .content-narrow-wrap, #wnform, etc.: when fixed loses the cascade, flex-end only hits the narrow ancestor — pin to viewport (map only). */
    .wn-map-lang-slot .mob_only .mobile-nav.mobile-nav-lang {
        position: fixed !important;
        top: env(safe-area-inset-top, 0px) !important;
        right: 0 !important;
        left: auto !important;
        z-index: 10055 !important;
        width: auto !important;
        max-width: min(58vw, 190px) !important;
        margin: 0 !important;
        padding: 0 calc(10px + env(safe-area-inset-right, 0px)) 0 0 !important;
        height: 70px !important;
        min-height: 70px !important;
        background: transparent !important;
        border: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }
    .wn-map-lang-slot .mob_only .wn-lang-widget {
        transform: none !important;
    }
    .wn-map-lang-slot .mob_only .wn-lang-pill:hover,
    .wn-map-lang-slot .mob_only .wn-lang-pill:focus-within {
        transform: none !important;
    }
    /* Homepage start (inc_start_*): wnmob.css forces every <div> to width:100% !important,
       which collapses the docked lang pill into a full-viewport-wide bar with the language
       label hidden inside it. Re-pin the wrapper + pill to the compact 190px right-edge
       widget (matches FAQ behavior) so the EN/FR/ES label is visible when expanded. */
    /* Slot is full-width in the tree; pass clicks through except the real lang control (avoids blocking #navbar logo). */
    .wn-start-lang-slot {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        pointer-events: none !important;
    }
    .wn-start-lang-slot .mob_only {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        pointer-events: none !important;
    }
    .wn-start-lang-slot .mob_only .mobile-nav.mobile-nav-lang {
        width: auto !important;
        max-width: min(58vw, 190px) !important;
        margin: 0 !important;
        pointer-events: auto !important;
    }
    .wn-start-lang-slot .mob_only .wn-lang-widget {
        pointer-events: auto !important;
    }
    .wn-start-lang-slot .mob_only > input.btn,
    .wn-start-lang-slot .mob_only > .btn {
        pointer-events: auto !important;
    }
    .wn-start-lang-slot .mob_only .wn-lang-pill {
        width: auto !important;
        max-width: min(58vw, 190px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Yogavan (/yogavan): mobile lang on the same 70px band as #navbar logo, top-right */
    .wn-yogavan-lang-slot .mob_only .mobile-nav.mobile-nav-lang {
        position: fixed !important;
        top: env(safe-area-inset-top, 0px) !important;
        right: 0 !important;
        left: auto !important;
        z-index: 10055 !important;
        width: auto !important;
        max-width: min(58vw, 190px) !important;
        margin: 0 !important;
        padding: 0 calc(10px + env(safe-area-inset-right, 0px)) 0 0 !important;
        height: 70px !important;
        min-height: 70px !important;
        background: transparent !important;
        border: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }
    .wn-yogavan-lang-slot .mob_only .wn-lang-widget {
        transform: none !important;
    }
    .wn-yogavan-lang-slot .mob_only .wn-lang-pill:hover,
    .wn-yogavan-lang-slot .mob_only .wn-lang-pill:focus-within {
        transform: none !important;
    }
}
@media (min-width: 768px) {
    .desktop_only {
        display: block !important;
    }
    .mob_only {
        display: none !important;
    }
}