{{#*inline "style"}}
  <style>
    {{#block "style"}}
      @font-face {
        font-family: 'Montserrat';
        src: url(https://s3.amazonaws.com/naiz.bundle/fonts/Montserrat-Light.eot),url(https://s3.amazonaws.com/naiz.bundle/fonts/Montserrat-Light.ttf),url(https://s3.amazonaws.com/naiz.bundle/fonts/Montserrat-Light.woff),url(https://s3.amazonaws.com/naiz.bundle/fonts/Montserrat-Light.woff2);
        font-weight: lighter;
        font-style: lighter;
      }
      @font-face {
        font-family: 'Montserrat';
        src: url(https://s3.amazonaws.com/naiz.bundle/fonts/Montserrat-Medium.eot),url(https://s3.amazonaws.com/naiz.bundle/fonts/Montserrat-Medium.ttf),url(https://s3.amazonaws.com/naiz.bundle/fonts/Montserrat-Medium.woff),url(https://s3.amazonaws.com/naiz.bundle/fonts/Montserrat.woff2);
        font-weight: normal;
        font-style: normal;
      }
      #price-product { order: 99; margin-bottom: 0;}
      #price-product { flex: 0 0 100%; margin-bottom: 14px;}
      .naiz-shim { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: rgba(0, 0, 0, .5); z-index: 9999;}
      .naiz-shim .naiz-modal { width: 1000px; background-color: {{colors.ModalBckgnd}}; display: flex; flex-direction: column; padding: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);}

      .naiz-shim .naiz-modal .naiz-body { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: lighter; text-align: center; font-size: 16px; flex: 1; display: flex; padding: 0; position: relative}
      .naiz-shim .naiz-modal .naiz-modal-close { position: absolute; right: 8px; top: 8px; width: 24px; cursor: pointer; z-index: 9999}
      .naiz-shim .naiz-modal .naiz-img-wrapper { flex: 2; padding: 0; display: flex; position: relative; }
      .naiz-shim .naiz-modal .naiz-form-wrapper { flex: 3; padding:0px; display: flex; flex-direction: column; align-items: stretch; }
      .naiz-shim .naiz-modal .naiz-img-wrapper img { width: 100%; flex: 1; object-fit: cover; transition-duration: .5s; height: 100%; }
      .naiz-shim .naiz-modal .naiz-img-wrapper .naiz-overlay-wrapper { transition-duration: .5s; position: absolute !important; opacity: 0; top: 0; left: 0; right: 0; bottom: 0; background-color: {{colors.OverlayBckgnd}}; padding: 0px; display: flex;}
      .naiz-shim .naiz-modal .naiz-img-wrapper .naiz-overlay-wrapper.active { opacity: 1; }
      .naiz-shim .naiz-modal .naiz-img-wrapper .naiz-overlay-wrapper .naiz-overlay { flex: 1; overflow: hidden; }
      .naiz-shim .naiz-modal .naiz-img-wrapper .naiz-overlay-wrapper .naiz-overlay.naiz-3D { padding: 16px; }
      .naiz-shim .naiz-modal .naiz-img-wrapper .naiz-overlay-wrapper .naiz-overlay svg { object-fit: contain !important; }

      .naiz-shim .naiz-modal .naiz-img-wrapper .naiz-overlay svg { height: 100%; }
      .naiz-shim .naiz-modal .naiz-img-wrapper .naiz-overlay svg g[inkscape\:label] { opacity: 0 }
      .naiz-shim .naiz-modal .naiz-img-wrapper svg marker path { fill: {{@root.colors.DefaultFill}} !important; stroke: {{@root.colors.DefaultFill}} !important; }
      .naiz-shim .naiz-modal .naiz-img-wrapper svg g[inkscape\:label] path { stroke: {{@root.colors.DefaultFill}} !important; }
      .naiz-shim .naiz-modal .naiz-img-wrapper svg g[inkscape\:label] circle { stroke: {{@root.colors.DefaultFill}} !important;opacity: 1; }
      .naiz-shim .naiz-modal .naiz-img-wrapper svg g[inkscape\:label] text {fill: {{@root.colors.DefaultFill}} !important; }
      {{#each sizechart.dimensions}}
      .naiz-shim .naiz-modal .naiz-img-wrapper.naiz-dimension-{{lowercase (removeFirst this '2D/')}}-dimmed g#{{uppercase (removeFirst this '2D/')}} { opacity: 1; }
      .naiz-shim .naiz-modal .naiz-img-wrapper.naiz-dimension-{{lowercase (removeFirst this '2D/')}} g#{{uppercase (removeFirst this '2D/')}} { opacity: 1; }
      .naiz-shim .naiz-modal .naiz-img-wrapper:not(.{{dimensionClass this}}) .naiz-overlay.naiz-2D g#{{uppercase (removeFirst this '2D/')}} path { stroke: {{@root.colors.DimensionFill}} !important;  fill: transparent !important; }
      .naiz-shim .naiz-modal .naiz-img-wrapper:not(.{{dimensionClass this}}) .naiz-overlay.naiz-2D g#{{uppercase (removeFirst this '2D/')}} circle { stroke: {{@root.colors.DimensionFill}} !important; }
      .naiz-shim .naiz-modal .naiz-img-wrapper:not(.{{dimensionClass this}}) .naiz-overlay.naiz-2D g#{{uppercase (removeFirst this '2D/')}} text { fill: {{@root.colors.DimensionFill}} !important; }
      .naiz-shim .naiz-modal .naiz-img-wrapper:not(.{{dimensionClass this}}) .naiz-overlay.naiz-3D g#{{uppercase (removeFirst this '2D/')}} path { stroke: {{@root.colors.DimensionFill}} !important;  fill: transparent !important; }
      .naiz-shim .naiz-modal .naiz-img-wrapper:not(.{{dimensionClass this}}) .naiz-overlay.naiz-3D g#{{uppercase (removeFirst this '2D/')}} text { text-anchor: middle; fill: {{@root.colors.DimensionFill}} !important; }
      {{/each}}
      .naiz-shim .naiz-modal .naiz-img-wrapper .naiz-overlay svg path.st3 { stroke: transparent !important }

      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-tab-pages { flex: 1; position: relative; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-tab-page { display: none; flex-flow: column wrap; opacity: 0; flex: 1; padding: 0; transition-duration: .5s;  z-index: 0; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-tab-page.active { opacity: 1; z-index: 1; display:flex; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form { flex: 1; display: flex; flex-direction: column; position: relative; height: 100%; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-body { flex: 1; align-items: stretch; justify-content: center; flex-flow: column wrap; display: flex; padding: 0 36px 36px 36px; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-title { padding: 64px 64px 0px 64px; font-size: 0.8em;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-footer { padding: 8px; font-size: 0.6em; text-align: right;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-unit-selector { font-size: 0.8em; height: 16px; padding: 8px;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-group { display: flex; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-group.naiz-horizontal { flex-direction: row; flex-wrap: nowrap; align-items: stretch;  }

      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form-input { position: relative; flex: 1; height: 130px; display: flex; flex-direction: column; flex-wrap: wrap; margin: auto; justify-content: center; margin: 8px auto; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-group .naiz-form-input { flex: 1; margin: 0 12px; width: auto;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input label { text-align: center; font-weight: normal; padding: 8px; font-size: 0.8em; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input select,
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input input[type='text'], 
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input input[type='number'] { margin: 0; width: 100%; font-family: 'Montserrat', Arial, Helvetica, sans-serif; -webkit-appearance: unset; appearance: unset; border: 1px solid {{colors.GradientStart}}; border-radius: 0; padding: 12px 0; background-color: {{colors.InputBckgnd}}; text-align: center; text-align-last:center; font-size: 1em; -moz-border-image: -moz-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); -webkit-border-image: -webkit-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image: linear-gradient(to bottom right, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image-slice: 1; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input .naiz-form-input-group { display: flex; height: 42px;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input .naiz-input-group-horizontal {width: 100%;padding: 0; border: 1px solid {{colors.GradientStart}}; display: flex; align-items: center; -moz-border-image: -moz-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); -webkit-border-image: -webkit-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image: linear-gradient(to bottom right, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image-slice: 1;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input .naiz-input-group-horizontal select,
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input .naiz-input-group-horizontal input[type='text'],
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input .naiz-input-group-horizontal input[type='number'] { margin: 0 0px; border: none; flex: 1; text-align: right; text-align-last: right; padding: 12px 0; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input .naiz-input-group-horizontal span { color: {{colors.InputLegend}}; margin: 0 8px; }

      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input #naiz-form-gender-male,
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input #naiz-form-gender-female,
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input #naiz-form-loosening-loose,
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input #naiz-form-loosening-normal,
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input #naiz-form-loosening-tight,
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input #naiz-sizechart-mode-2D,
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input #naiz-sizechart-mode-3D,
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input #naiz-recommendation-mode-recommendation,
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input #naiz-recommendation-mode-2D,
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input #naiz-recommendation-mode-3D { display: none; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button { text-transform: uppercase; cursor: pointer; -webkit-appearance: unset; background: {{colors.ButtonBckgnd}}; padding: 8px 32px; font-size: 1em; font-weight: normal; color: {{colors.ButtonText}}; border: 1px solid black;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button-clear { text-transform: uppercase; cursor: pointer; -webkit-appearance: unset; padding: 8px 32px; font-size: 1em; font-weight: normal;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button:hover { background: {{colors.ButtonHoverBckgnd}}; color: {{colors.ButtonHoverText}}; border: 1px solid black;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-form-loosening { z-index: 1; min-width: 150px; background-color: {{colors.SelectorBckgnd}}; color: {{colors.SelectorText}}; font-size: 0.8em; border: 1px solid {{colors.LightGrey}}; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-form-loosening.naiz-checked { z-index: 2; -moz-border-image: -moz-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); -webkit-border-image: -webkit-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image: linear-gradient(to bottom right, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image-slice: 1; }

      .naiz-shim .naiz-modal .naiz-form-wrapper input[type="radio"]:checked+.naiz-button.naiz-form-loosening{ background-color: {{colors.SelectorCheckedBckgnd}}; z-index: 2; -moz-border-image: -moz-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); -webkit-border-image: -webkit-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image: linear-gradient(to bottom right, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image-slice: 1; } 
      .naiz-shim .naiz-modal .naiz-form-wrapper input[type="radio"]:checked+.naiz-button.naiz-chart-mode{ background-color: {{colors.SelectorCheckedBckgnd}}; z-index: 2; -moz-border-image: -moz-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); -webkit-border-image: -webkit-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image: linear-gradient(to bottom right, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image-slice: 1; } 
      .naiz-shim .naiz-modal .naiz-form-wrapper input[type="radio"]:checked+.naiz-button.naiz-chart-mode svg{ fill: {{colors.GradientStart}} } 

      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-form-gender { z-index: 1; min-width: 150px; background-color: {{colors.SelectorBckgnd}}; color: {{colors.SelectorText}}; font-size: 0.8em; border: 1px solid {{colors.LightGrey}}; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-form-gender.naiz-checked { z-index: 2; -moz-border-image: -moz-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); -webkit-border-image: -webkit-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image: linear-gradient(to bottom right, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image-slice: 1; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-form-gender.naiz-male.naiz-checked { background-color: {{colors.SelectorCheckedBckgnd}}; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-form-gender.naiz-female.naiz-checked { background-color: {{colors.SelectorCheckedSecondaryBckgnd}}; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-form-gender svg { height: 16px; margin: 0 16px 0 0; vertical-align: bottom; fill: {{colors.LightGrey}}; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-form-gender.naiz-male.naiz-checked svg { fill: {{colors.SelectorCheckedIcon}}; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-form-gender.naiz-female.naiz-checked svg { fill: {{colors.SelectorCheckedIcon}}; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart { flex: 1; display: flex; flex-direction: column; position: relative; height: 100%; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-sizechart-table { margin-bottom: 32px; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-sizechart-body { padding: 32px; flex: 1; align-items: stretch; justify-content: center; flex-flow: column wrap; display: flex; height: 80%; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-sizechart-title { padding: 64px 64px 0px 64px; font-size: 0.8em;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-sizechart-footer { padding: 8px; font-size: 0.6em; text-align: right;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart table { border-collapse: collapse; display: table;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart table a.naiz-help-icon svg { height: 16px; margin: 0 16px 0 0; vertical-align: top; fill: {{colors.HelpIcon}}; position:relative; top: 1px; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart table a.naiz-help-icon svg path { fill: {{colors.HelpIcon}}; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart td, .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart th { padding: 8px; text-align: center; text-align: -webkit-center; font-weight: 100; border: 1px solid transparent; background-color: transparent; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart tr:first-child { border: none; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart tr:first-child th:first-child { border: none; background: white; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart td { background-color: {{colors.SizechartBckgnd}}; border: 1px solid {{colors.LightGrey}}; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart td:first-child { width: 80px; text-align: center; font-weight: normal; color: black; background-color: transparent; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart tr.naiz-recommended { border: 3px solid {{colors.GradientStart}};  font-size: 1.4em; font-weight: normal; -moz-border-image: -moz-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); -webkit-border-image: -webkit-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image: linear-gradient(to bottom right, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image-slice: 1;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-sizechart-percentage { font-weight: normal; color: black; background-color: {{colors.SizechartBckgnd}}; border: 1px solid {{colors.SizechartBckgnd}}; width: 80px; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart tr.naiz-recommended { border: 3px solid {{colors.GradientStart}};  font-size: 1.4em; font-weight: normal; -moz-border-image: -moz-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); -webkit-border-image: -webkit-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image: linear-gradient(to bottom right, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image-slice: 1;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart tr.naiz-recommended .naiz-sizechart-percentage { background-color: transparent; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart table { background: {{colors.SizechartGradientStart}}; background: linear-gradient(-45deg, {{colors.SizechartGradientStart}}, {{colors.SizechartGradientEnd}}, {{colors.SizechartGradientStart}}); background-size: 200% 100%;  -webkit-animation: HorizontalScroll 30s ease infinite; -moz-animation: HorizontalScroll 30s ease infinite; animation: HorizontalScroll 30s ease infinite; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-sizechart-container { padding: 16px; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-recommendation-container { padding: 0 32px 32px 32px; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-recommendation-value { position: relative; height: 150px;  margin: auto; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; border-radius: 1000px; padding: 8px; min-width: 150px; background: {{colors.LightGradientStart}}; background: linear-gradient(-45deg, {{colors.LightGradientStart}}, {{colors.LightGradientEnd}}, {{colors.LightGradientStart}}); background-size: 200% 100%;  -webkit-animation: HorizontalScroll 30s ease infinite; -moz-animation: HorizontalScroll 30s ease infinite; animation: HorizontalScroll 30s ease infinite; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-recommendation-value div { min-width: 150px; margin: auto; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-recommendation-value .naiz-subinline { font-size: 0.3em; margin: auto; position: absolute; bottom: 30px; }

      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-loading { flex: 1; display: flex; flex-direction: row; position: relative; height: 100%; min-height: 400px; align-items: center;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-loading .naiz-loading-title{ flex: 1; }

      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-recommendation-message { flex: 1; display: flex; flex-direction: row; position: relative; height: 100%; min-height: 200px; align-items: center;}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-recommendation-message .naiz-recommendation-message-title{ flex: 1; }


      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-chart-mode { z-index: 1; min-width: 150px; background-color: {{colors.SelectorBckgnd}}; color: {{colors.SelectorText}}; font-size: 0.8em; border: 1px solid {{colors.LightGrey}}; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-chart-mode.selected { z-index: 2; -moz-border-image: -moz-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); -webkit-border-image: -webkit-linear-gradient(top left, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image: linear-gradient(to bottom right, {{colors.GradientStart}} 20%, {{colors.GradientEnd}} 80%); border-image-slice: 1; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-chart-mode svg { height: 16px; margin: 0 16px 0 0; vertical-align: bottom; fill: {{colors.LightGrey}}; }
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-chart-mode:last-child svg { margin: 0 0 0 16px; }

      .naiz-shim .naiz-modal a { color: {{colors.Link}}; }
      .naiz-shim .naiz-modal a.naizfit-link { color: {{colors.GradientStart}}; text-decoration: none; }
      .naiz-shim .naiz-modal textarea, select, input, button { outline: none; }
      .naiz-recommendation-value { font-size: 4em; font-weight: normal; margin: 8px;}
      *[data-group][data-subgroup] { display: none; flex-flow: column wrap; opacity: 0; flex: 1; padding: 0; transition-duration: .5s;  z-index: 0; }
      *[data-group][data-subgroup].active { opacity: 1; z-index: 1; display:flex; }

      .naiz-shim .naiz-modal .naiz-divider { width: 1px; background: {{colors.GradientStart}}; background: linear-gradient(270deg, {{colors.GradientStart}}, {{colors.GradientEnd}}); background-size: 100% 100%;  -webkit-animation: HorizontalScroll 4s ease infinite; -moz-animation: HorizontalScroll 4s ease infinite; animation: HorizontalScroll 4s ease infinite; }
      @-webkit-keyframes HorizontalScroll { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
      @-moz-keyframes HorizontalScroll { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
      @keyframes HorizontalScroll { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
      @-webkit-keyframes VerticalScroll { 0%{object-position:50% 0%} 50%{object-position:50% 100%} 100%{object-position:50% 0%} }
      @-moz-keyframes VerticalScroll { 0%{object-position:50% 00%} 50%{object-position:50% 100%} 100%{object-position:50% 0%} }
      @keyframes VerticalScroll { 0%{object-position:50% 0%} 50%{object-position:50% 100%} 100%{object-position:50% 0%} }

      [data-naiz-unit-container][data-naiz-unit-value="metric"] [data-naiz-unit="cms"] { display: inherit }
      [data-naiz-unit-container][data-naiz-unit-value="metric"] [data-naiz-unit="kgs"] { display: inherit }
      [data-naiz-unit-container][data-naiz-unit-value="metric"] [data-naiz-unit="feet"] { display: none !important}
      [data-naiz-unit-container][data-naiz-unit-value="metric"] [data-naiz-unit="feet-inches"] { display: none !important}
      [data-naiz-unit-container][data-naiz-unit-value="metric"] [data-naiz-unit="inches"] { display: none !important}
      [data-naiz-unit-container][data-naiz-unit-value="metric"] [data-naiz-unit="lbs"] { display: none !important}
      [data-naiz-unit-container][data-naiz-unit-value="imperial"] [data-naiz-unit="feet"] { display: inherit }
      [data-naiz-unit-container][data-naiz-unit-value="imperial"] [data-naiz-unit="feet-inches"] { display: inherit }
      [data-naiz-unit-container][data-naiz-unit-value="imperial"] [data-naiz-unit="inches"] { display: inherit }
      [data-naiz-unit-container][data-naiz-unit-value="imperial"] [data-naiz-unit="lbs"] { display: inherit }
      [data-naiz-unit-container][data-naiz-unit-value="imperial"] [data-naiz-unit="cms"] { display: none !important}
      [data-naiz-unit-container][data-naiz-unit-value="imperial"] [data-naiz-unit="kgs"] { display: none !important}

      [data-naiz-unit-container][data-naiz-unit-value] .naiz-unit-selector span { color: {{colors.InputLegend}}; cursor: pointer; }
      [data-naiz-unit-container][data-naiz-unit-value="metric"] span[data-naiz-unit-selector][data-naiz-unit-value="metric"] { color: {{colors.GradientStart}} }
      [data-naiz-unit-container][data-naiz-unit-value="imperial"] span[data-naiz-unit-selector][data-naiz-unit-value="imperial"] { color: {{colors.GradientStart}} }

      @media screen and (max-width: 768px) {
        .naiz-shim .naiz-modal { width: 100%; height: 100%; }
        .naiz-shim .naiz-modal .naiz-body { flex-direction: column; height: 100%; }
        .naiz-shim .naiz-modal .naiz-divider { height: 1px; width: 100%;}
        .naiz-shim .naiz-modal .naiz-img-wrapper { flex: 1; padding: 0; display: flex; overflow: hidden; padding: 0px;}
        .naiz-shim .naiz-modal .naiz-img-wrapper img { width: 100%; flex: 1; object-fit: cover; -webkit-animation: VerticalScroll 8s ease infinite; -moz-animation: VerticalScroll 8s ease infinite; animation: VerticalScroll 8s ease infinite;}
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form { flex: 1; display: flex; flex-direction: column; position: relative; height: 100%; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-body { padding: 8px 36px 8px 36px; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-title { padding: 16px 16px 8px 16px; font-size: 0.8em;}
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-group.naiz-horizontal { flex-direction: column; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-group .naiz-form-input { margin: 0;}
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form-input { margin: 4px 0; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-form-loosening { min-width: unset; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button { padding: 8px 18px; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-unit-selector { height: unset; position: absolute; top: 0px; right: 0px; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-tab-page { height: 100% }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input select,
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input input[type='text'], 
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input input[type='number'] { width: auto; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-form-loosening { flex: 1; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-form-gender { flex: 1; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-chart-mode { flex: 1; }      

        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-sizechart-container { padding: 16px 0 0 0; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart { flex: 1; display: flex; flex-direction: column; position: relative; height: 100%; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-sizechart-body { padding: 8px 36px 8px 36px; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-sizechart-title { padding: 16px 16px 8px 16px; font-size: 0.8em;}
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-form-input-group.naiz-horizontal { flex-direction: column; height: unset; }
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-form-group .naiz-form-input { margin: 0;}
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-form-input select,
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-form-input input[type='text'], 
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-form-input input[type='number'] { width: auto; }

        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input .naiz-input-group-horizontal select,
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input .naiz-input-group-horizontal input[type='text'],
        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-form .naiz-form-input .naiz-input-group-horizontal input[type='number'] { width: 100%; text-align: center; text-align-last: center;}

        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-button.naiz-chart-mode svg { display: none; }

        .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-recommendation-container { padding: 32px 32px 32px 32px; }
      }
      {{#each sizechart.dimensions}}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-sizechart-table[data-naiz-over-target].{{dimensionClass this}} td[data-naiz-dimension='{{this}}'] { background-color: {{@root.colors.SizechartHighlightSoft}}; }
      {{/each}}
      {{#each sizechart.sizes}}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-sizechart-table[data-naiz-over-target].{{sizeClass name}} td[data-naiz-size='{{name}}'] { background-color: {{@root.colors.SizechartHighlightSoft}}; }
      {{/each}}

      {{#each sizechart.dimensions}}
        {{#each @root.sizechart.sizes}}
      .naiz-shim .naiz-modal .naiz-form-wrapper .naiz-sizechart .naiz-sizechart-table[data-naiz-over-target].{{sizeClass name}}.{{dimensionClass ../this}} td[data-naiz-dimension='{{../this}}'][data-naiz-size='{{name}}'] { background-color: {{@root.colors.SizechartHighlightHard}}; }
        {{/each}}
      {{/each}}
    {{/block}}
  </style>
{{/inline}}

{{#*inline "form"}}
  {{#block "form"}}
    <div class="naiz-modal">
      <img class="naiz-modal-close" src="https://s3.amazonaws.com/weblets/close.png">
      {{#block "form-body"}}
      <div class="naiz-body">
        {{#block "image-wrapper"}}
        <div class="naiz-img-wrapper {{#each sizechart.dimensions}}{{dimensionClass this}}-dimmed {{/each}}" data-naiz-over-target>
          <img class="naiz-product-image{{#unless sizing}} active{{/unless}}" data-group="panels" data-subgroup="form" src="{{product.img_src}}"/>
          <div class="naiz-overlay-wrapper" data-group="panels" data-subgroup="sizechart">
            <div class="naiz-overlay-wrapper active" data-group="instructions-sizechart" data-subgroup="2D">
              <div class="naiz-overlay naiz-2D">{{{sizechart.svg}}}</div>
            </div>
            <div class="naiz-overlay-wrapper {{#some2D sizechart.dimensions}}{{else}}active{{/some2D}}" data-group="instructions-sizechart" data-subgroup="3D">
              <div class="naiz-overlay naiz-3D">{{{assets.svg.body}}}</div>
            </div>
          </div>
          <div class="naiz-overlay-wrapper{{#if sizing}} active{{/if}}" data-group="panels" data-subgroup="recommendation">
            <div class="naiz-overlay-wrapper active" data-group="instructions" data-subgroup="2D">
              <div class="naiz-overlay naiz-2D">{{{sizechart.svg}}}</div>
            </div>
            <div class="naiz-overlay-wrapper" data-group="instructions" data-subgroup="3D">
              <div class="naiz-overlay naiz-3D">{{{assets.svg.body}}}</div>
            </div>
            <img class="naiz-product-image active" data-group="instructions" data-subgroup="recommendation" src="{{product.img_src}}"/>
          </div>
        </div>
        {{/block}}
        {{#block "divider"}}
        <div class="naiz-divider">
        </div>
        {{/block}}

<!-- ############### FORM ########################-->

        {{#block "form-wrapper"}}
        <div class="naiz-form-wrapper">
          {{#block "form-content"}}
          <div class="naiz-tabs">
            <div class="naiz-tab-pages">
              <div class="naiz-tab-page{{#unless sizing}} active{{/unless}}" id="naiz-data-page" data-group="panels" data-subgroup="form">
                {{#block "form-data"}}
                <form action="#" class="naiz-form">
                  {{#block "form-data-title"}}
                  <div class="naiz-form-title">{{{lang.create_profile}}}<a href="#" onclick="window.nfsfo.pushEvent('sizechart_show');return false;" data-group="panels" data-shows="sizechart,chart" class="sizechart-link">{{lang.sizechart}}</a></div>
                  {{/block}}
                  {{#block "form-data-body"}}
                  <div class="naiz-form-body">
                    <div class="naiz-form-input">
                      <label for="naiz-form-gender">{{lang.gender}}</label>
                      <div class="naiz-form-input-group naiz-horizontal" id="naiz-form-gender">
                        <button 
                          id="naiz-form-gender-male-button" 
                          class="naiz-button naiz-form-gender naiz-male {{#if consumerData.gender}}{{#eq consumerData.gender 'MALE'}}naiz-checked{{/eq}}{{else}}{{#eq product.gender 'MALE'}}naiz-checked{{/eq}}{{/if}}" 
                          onclick="document.querySelector('#naiz-form-gender-male').checked = true; document.querySelector('#naiz-form-gender-male-button').classList.add('naiz-checked'); document.querySelector('#naiz-form-gender-female-button').classList.remove('naiz-checked'); return false;"
                        >{{{assets.svg.male}}} {{lang.gender_male}}</button>
                        <button 
                          id="naiz-form-gender-female-button" 
                          class="naiz-button naiz-form-gender naiz-female {{#if consumerData.gender}}{{#eq consumerData.gender 'FEMALE'}}naiz-checked{{/eq}}{{else}}{{#eq product.gender 'FEMALE'}}naiz-checked{{/eq}}{{/if}}" 
                          onclick="document.querySelector('#naiz-form-gender-female').checked = true; document.querySelector('#naiz-form-gender-female-button').classList.add('naiz-checked'); document.querySelector('#naiz-form-gender-male-button').classList.remove('naiz-checked'); return false;"
                        >{{lang.gender_female}} {{{assets.svg.female}}}</button>
                        <input id="naiz-form-gender-male" type="radio" name="gender" value="MALE" {{#if consumerData.gender}}{{#eq consumerData.gender 'MALE'}}checked{{/eq}}{{else}}{{#eq product.gender 'MALE'}}checked{{/eq}}{{/if}} />
                        <input id="naiz-form-gender-female" type="radio" name="gender" value="FEMALE" {{#if consumerData.gender}}{{#eq consumerData.gender 'FEMALE'}}checked{{/eq}}{{else}}{{#eq product.gender 'FEMALE'}}checked{{/eq}}{{/if}}/>
                      </div>
                    </div>
                    <div class="naiz-form-group naiz-horizontal">
                      <div class="naiz-form-input">
                        <label for="naiz-form-height">{{lang.height}}</label>
                        <input type="number" value="{{#if consumerData.height}}{{consumerData.height}}{{else}}165{{/if}}" name="height" data-naiz-unit-param="height" data-naiz-unit="cms" />
                        <div class="naiz-input-group-horizontal" data-naiz-unit-param="height" data-naiz-unit="feet">
                          <input type="number" value="{{#if consumerData.height}}{{conversion 'cms' 'feet' consumerData.height}}{{else}}5{{/if}}" name="height_feet" data-naiz-unit-param="height" data-naiz-unit="feet" data-naiz-unit-extras="feet-inches"/><span>ft.</span>
                          <input type="number" value="{{#if consumerData.height}}{{conversion 'cms' 'feet-inches' consumerData.height}}{{else}}5{{/if}}" name="height_inches" data-naiz-unit-param="height" data-naiz-unit="feet-inches" data-naiz-unit-extras="feet" /><span>in.</span>
                        </div>
                        <div class="naiz-unit-selector">
                          <span id="naiz-height-in-inches" data-naiz-unit-selector="modal-body" data-naiz-unit-value="imperial">IN</span> |
                          <span id="naiz-height-in-cms" data-naiz-unit-selector="modal-body" data-naiz-unit-value="metric">CM</span>
                        </div>
                      </div>
                      <div class="naiz-form-input">
                        <label for="naiz-form-weight">{{lang.weight}}</label>
                        <input type="number" value="{{#if consumerData.weight}}{{consumerData.weight}}{{else}}60{{/if}}" name="weight" data-naiz-unit-param="weight" data-naiz-unit="kgs" />
                        <input type="number" value="{{#if consumerData.weight}}{{conversion 'kgs' 'lbs' consumerData.weight}}{{else}}132{{/if}}" name="weight_lbs" data-naiz-unit-param="weight" data-naiz-unit="lbs" />
                        <div class="naiz-unit-selector">
                          <span id="naiz-height-in-lbs" data-naiz-unit-selector="modal-body" data-naiz-unit-value="imperial">LBS</span> |
                          <span id="naiz-height-in-kgs" data-naiz-unit-selector="modal-body" data-naiz-unit-value="metric">KGS</span>
                        </div>
                      </div>
                      <div class="naiz-form-input">
                        <label for="naiz-form-birth-year">{{lang.birth_year}}</label>
                        <select id="naiz-form-birth-year" type="number" name="birthYear">
                          {{#each years}}
                          <option value="{{this}}" {{#if @root.consumerData.birthYear}}{{#is @root.consumerData.birthYear this}}selected{{/is}}{{else}}{{#eq 0 @index}}selected{{/eq}}{{/if}}>{{this}}</option>
                          {{/each}}
                        </select>
                        <div class="naiz-unit-selector"></div>
                      </div>
                    </div>

                    <div class="naiz-form-input">
                      <label for="naiz-form-loosening">{{lang.how_you_like_clothes}}</label>
                      <div class="naiz-form-input-group naiz-horizontal" id="naiz-form-loosening">
                        <input id="naiz-form-loosening-loose" type="radio" name="loosening" value="LOOSE" {{#if consumerData.loosening}}{{#eq consumerData.loosening 'LOOSE'}}checked{{/eq}}{{/if}}/>
                        <button id="naiz-form-loosening-loose-button" class="naiz-form-loosening naiz-button naiz-loose"
                          onclick="document.querySelector('#naiz-form-loosening-loose').checked = true; return false;">
                          {{lang.loose}}
                        </button>
                        <input id="naiz-form-loosening-normal" type="radio" name="loosening" value="NORMAL" {{#if consumerData.loosening}}{{#eq consumerData.loosening 'NORMAL'}}checked{{/eq}}{{else}}checked{{/if}} />
                        <button id="naiz-form-loosening-normal-button" class="naiz-form-loosening naiz-button naiz-normal"
                          onclick="document.querySelector('#naiz-form-loosening-normal').checked = true; return false;">
                          {{lang.normal}}
                        </button>
                        <input id="naiz-form-loosening-tight" type="radio" name="loosening" value="FIT" {{#if consumerData.loosening}}{{#eq consumerData.loosening 'FIT'}}checked{{/eq}}{{/if}}/>
                        <button id="naiz-form-loosening-tight-button" class="naiz-form-loosening naiz-button naiz-tight"
                          onclick="document.querySelector('#naiz-form-loosening-tight').checked = true; return false;">
                          {{lang.tight}}
                        </button>

                      </div>
                    </div>

                    <div class="naiz-form-input">
                      <button id="naiz-continue" onClick="return false;" class="naiz-button" data-group="panels" data-shows="recommendation,chart">{{lang.find_my_size}}</button>
                    </div>
                  </div>
                  {{/block}}
                  {{#block "form-data-footer"}}
                  <div class="naiz-form-footer">
                    Powered by <a class="naizfit-link">NAIZ FIT</a> | <a href="{{lang.privacy_policy_link}}">{{lang.privacy_policy}}</a>
                  </div>
                  {{/block}}
                </form>
                {{/block}}
              </div>

<!-- ############### SIZECHART ########################-->              

              <div class="naiz-tab-page" id="naiz-sizechart-page" data-group="panels" data-subgroup="sizechart" >
                {{#block "form-sizechart"}}
                <div class="naiz-sizechart">
                  {{#block "form-sizechart-title"}}
                  <div class="naiz-sizechart-title">
                    {{{lang.sizechart_title}}}
                  </div>
                  {{/block}}
                  {{#block "form-sizechart-body"}}
                  <div class="naiz-sizechart-body">

                  <form action="#" class="naiz-form">
                    {{#block "form-sizechart-selector"}}
                      <div class="naiz-form-input">
                        <div class="naiz-form-input-group naiz-horizontal">
                          {{#some2D sizechart.dimensions}}
                          <input id="naiz-sizechart-mode-2D" type="radio" name="gender" value="0" checked />
                          <button class="naiz-button naiz-chart-mode" data-group="instructions-sizechart" data-shows="2D"
                            onclick="document.querySelector('#naiz-sizechart-mode-2D').checked = true; return false;">{{{assets.svg.chart2D}}}
                            {{lang.chart2D}}</button>
                          {{/some2D}}
                          <input id="naiz-sizechart-mode-3D" type="radio" name="gender" value="1" {{#some2D sizechart.dimensions}}{{else}}checked{{/some2D}}/>
                          <button class="naiz-button naiz-chart-mode" data-group="instructions-sizechart" data-shows="3D"
                            onclick="document.querySelector('#naiz-sizechart-mode-3D').checked = true; return false;">{{lang.chart3D}}
                            {{{assets.svg.chart3D}}}</button>
                        </div>
                      </div>
                      {{/block}} {{! form-sizechart-selector}}
                      {{#block "form-sizechart-charts"}}
                      {{#with sizechart}}
                      {{#some2D dimensions}}
                      <div class="naiz-sizechart-container active" data-group="instructions-sizechart" data-subgroup="2D">
                        <table class="naiz-sizechart-table" data-naiz-over-target>
                          <tr>
                            <th class="naiz-sizechart-header"></th>
                            {{#each dimensions}}{{#if (is2D this)}}
                            <th class="naiz-sizechart-header" data-naiz-over="{{dimensionClass this}}">{{{dimension this}}} <a href="https://kb.naiz.fit/docs/measurements/{{{dimension this}}}/" target="_blank" class="naiz-help-icon">{{{@root.assets.svg.help}}}</a></th>
                            {{/if}}{{/each}}
                            </th>
                            {{#each sizes}}
                          </tr>
                          <tr>
                            <td>{{name}}</td>
                            {{#each dimensions}}{{#if (is2D name)}}
                            <td data-naiz-dimension="{{name}}" data-naiz-size="{{../name}}" data-naiz-over="{{dimensionClass name}},{{sizeClass ../name}}">{{#if value}}<span data-naiz-unit="cms">{{value}} cm.</span><span data-naiz-unit="inches">{{conversion 'cms' 'inches' value}} in.</span>{{/if}}</td>
                            {{/if}}{{/each}}
                          </tr>
                          {{/each}}
                        </table>
                      </div>
                      {{/some2D}}
                      <div class="naiz-sizechart-container {{#some2D dimensions}}{{else}}active{{/some2D}}" data-group="instructions-sizechart" data-subgroup="3D">
                        <table class="naiz-sizechart-table" data-naiz-over-target>
                          <tr>
                            <th class="naiz-sizechart-header"></th>
                            {{#each dimensions}}{{#unless (is2D this)}}
                            <th class="naiz-sizechart-header" data-naiz-over="{{dimensionClass this}}">{{{dimension this}}}</th>
                            {{/unless}}{{/each}}
                            </th>
                            {{#each sizes}}
                          </tr>
                          <tr>
                            <td>{{name}}</td>
                            {{#each dimensions}}{{#unless (is2D name)}}
                            <td data-naiz-dimension="{{name}}" data-naiz-size="{{../name}}" data-naiz-over="{{dimensionClass name}},{{sizeClass ../name}}">{{#if value}}<span data-naiz-unit="cms">{{value}} cm.</span><span data-naiz-unit="inches">{{conversion 'cms' 'inches' value}} in.</span>{{/if}}</td>
                            {{/unless}}{{/each}}
                          </tr>
                          {{/each}}
                        </table>
                      </div>
                      {{/with}}
                      {{/block}} {{! form-sizechart-charts }}
                      {{#block "form-sizechart-actions"}}
                      <div class="naiz-form-input">
                        <button onClick="return false;" class="naiz-button" data-group="panels" data-shows="form"
                          value="{{lang.find_your_size}}">{{lang.find_your_size}}</button>
                      </div>
                      {{/block}} {{! form-sizechart-actions}}
                    </div>
                  </form>
                  {{/block}}
                  {{#block "form-sizechart-footer"}}
                  <div class="naiz-sizechart-footer">
                    Powered by <a class="naizfit-link" href="{{lang.naizfit_link}}">NAIZ FIT</a> | <a
                      href="{{lang.privacy_policy_link}}">{{lang.privacy_policy}}</a>
                  </div>
                  {{/block}}

                </div>
                {{/block}} {{! form-sizechart}}
              </div>

<!-- ############### RECOMMENDATION ########################-->

              <div class="naiz-tab-page{{#if sizing}} active{{/if}}" id="naiz-recommendation-page" data-group="panels" data-subgroup="recommendation" >
                {{#unless sizing}}
                  {{#block "form-recommendation-loading"}}
                  <div class="naiz-loading">
                    <div class="naiz-loading-title">{{lang.loading}}</div>
                  </div>
                  {{/block}}
                {{else}}
                  {{#block "form-recommendation"}}
                  <div class="naiz-sizechart">

                    {{#block "form-recommendation-title"}}
                    <div class="naiz-sizechart-title">
                      {{{lang.recommendation_title}}}
                    </div>
                    {{/block}}
                    {{#block "form-recommendation-body"}}
                    <div class="naiz-sizechart-body">
                    <div action="#" class="naiz-form">
                        {{#block "naiz-recommendation-options"}}
                        <div class="naiz-form-input">
                          <label>&nbsp;</label>
                          <div class="naiz-form-input-group naiz-horizontal">
                            <input id="naiz-recommendation-mode-recommendation" type="radio" name="recommendation-mode" checked />
                            <button class="naiz-button naiz-chart-mode" data-group="instructions" data-shows="recommendation"
                              onclick="document.querySelector('#naiz-recommendation-mode-recommendation').checked = true; return false;">
                              {{lang.recommendation}}</button>
                            {{#some2D sizechart.dimensions}}
                            <input id="naiz-recommendation-mode-2D" type="radio" name="recommendation-mode" />
                            <button class="naiz-button naiz-chart-mode" data-group="instructions" data-shows="2D"
                              onclick="document.querySelector('#naiz-recommendation-mode-2D').checked = true; return false;">
                              {{lang.chart2D}}</button>
                            <input id="naiz-recommendation-mode-3D" type="radio" name="recommendation-mode" />
                            {{/some2D}}
                            <button class="naiz-button naiz-chart-mode" data-group="instructions" data-shows="3D"
                              onclick="document.querySelector('#naiz-recommendation-mode-3D').checked = true; return false;">{{lang.chart3D}}
                              </button>
                          </div>
                        </div>
                        {{/block}} {{! naiz-recommendation-options}}
                        <div data-group="instructions" data-subgroup="recommendation" class="naiz-recommendation-container active">

                          {{#eq 'C/G' sizing.primary.name}}
                          {{#block "form-recommendation-body-cross-gender"}}
                          <div class="naiz-recommendation-message">
                            <div class="naiz-recommendation-message-title">{{lang.sorry_no_size_gender}}</div>
                          </div>
                          {{/block}}
                          {{/eq}}

                          {{#eq 'N/A' sizing.primary.name}}
                          {{#block "form-recommendation-body-cross-gender"}}
                          <div class="naiz-recommendation-message">
                            <div class="naiz-recommendation-message-title">{{lang.sorry_no_size}}</div>
                          </div>
                          {{/block}}
                          {{/eq}}

                          {{#and (unlessEq 'N/A' sizing.primary.name) (unlessEq 'C/G' sizing.primary.name)}}
                          <div class="naiz-recommendation-value">
                            <div>{{sizing.primary.name}}</div>
                            <div class="naiz-subinline">{{sizing.primary.percent}}%</div>
                          </div>
                          {{/and}}
                        </div>
                        {{#with sizechart}}
                        {{#some2D dimensions}}
                        <div class="naiz-sizechart-container" data-group="instructions" data-subgroup="2D">
                          <table class="naiz-sizechart-table" data-naiz-over-target>
                            <tr>
                              <th class="naiz-sizechart-header"></th>
                              {{#each dimensions}}{{#if (is2D this)}}
                              <th class="naiz-sizechart-header" data-naiz-over="{{dimensionClass this}}">{{{dimension this}}} <a href="https://kb.naiz.fit/docs/measurements/{{{dimension this}}}/" target="_blank" class="naiz-help-icon">{{{@root.assets.svg.help}}}</a></th>
                              {{/if}}{{/each}}
                              {{#and (unlessEq 'N/A' @root.sizing.primary.name) (unlessEq 'C/G' @root.sizing.primary.name)}}
                              <th class="naiz-sizechart-percentage"></th>
                              {{/and}}
                            </tr>
                          {{#each sizes}}
                            {{#eq name @root.sizing.primary.name}}
                            <tr class="naiz-recommended">
                            {{else}}
                            <tr>
                            {{/eq}}
                              <td>{{name}}</td>
                              {{#each dimensions}}{{#if (is2D name)}}
                              <td data-naiz-dimension="{{name}}" data-naiz-size="{{../name}}" data-naiz-over="{{dimensionClass name}},{{sizeClass ../name}}">{{#if value}}<span data-naiz-unit="cms">{{value}} cm.</span><span data-naiz-unit="inches">{{conversion 'cms' 'inches' value}} in.</span>{{/if}}</td>
                              {{/if}}{{/each}}
                              {{#and (unlessEq 'N/A' @root.sizing.primary.name) (unlessEq 'C/G' @root.sizing.primary.name)}}
                              <td class="naiz-sizechart-percentage">
                              {{#eq name @root.sizing.primary.name}}{{@root.sizing.primary.percent}}%{{/eq}}
                              {{#eq name @root.sizing.secondary.name}}{{@root.sizing.secondary.percent}}%{{/eq}}
                              </td>
                              {{/and}}
                            </tr>
                            {{/each}}
                          </table>
                        </div>
                        {{/some2D}}
                        <div class="naiz-sizechart-container" data-group="instructions" data-subgroup="3D">
                          <table class="naiz-sizechart-table" data-naiz-over-target>
                            <tr>
                              <th class="naiz-sizechart-header"></th>
                              {{#each dimensions}}{{#unless (is2D this)}}
                              <th class="naiz-sizechart-header" data-naiz-over="{{dimensionClass this}}">{{{dimension this}}}</th>
                              {{/unless}}{{/each}}
                              {{#and (unlessEq 'N/A' @root.sizing.primary.name) (unlessEq 'C/G' @root.sizing.primary.name)}}<th class="naiz-sizechart-percentage"></th>{{/and}}
                              {{#each sizes}}
                            </tr>
                            {{#eq name @root.sizing.primary.name}}
                            <tr class="naiz-recommended">
                              {{else}}
                            <tr>
                            {{/eq}}
                              <td>{{name}}</td>
                              {{#each dimensions}}{{#unless (is2D name)}}
                              <td data-naiz-dimension="{{name}}" data-naiz-size="{{../name}}" data-naiz-over="{{dimensionClass name}},{{sizeClass ../name}}">{{#if value}}<span data-naiz-unit="cms">{{value}} cm.</span><span data-naiz-unit="inches">{{conversion 'cms' 'inches' value}} in.</span>{{/if}}</td>
                              {{/unless}}{{/each}}
                              {{#and (unlessEq 'N/A' @root.sizing.primary.name) (unlessEq 'C/G' @root.sizing.primary.name)}}
                              <td class="naiz-sizechart-percentage">
                                {{#eq name @root.sizing.primary.name}}{{@root.sizing.primary.percent}}%{{/eq}}
                                {{#eq name @root.sizing.secondary.name}}{{@root.sizing.secondary.percent}}%{{/eq}}
                              </td>
                              {{/and}}
                            </tr>
                            {{/each}}
                          </table>
                        </div>
                        {{/with}}
                        {{#block "recommendation-actions"}}  
                        <div class="naiz-form-input" id="naiz-no-purchase-actions">
                          <button onclick="return false;" class="naiz-button" data-group="panels" data-shows="form">{{lang.change_data}}</button>
                        </div>
                        <div class="naiz-form-input" id="naiz-purchase-actions">
                          <button class="naiz-button" onclick="return false;">{{lang.add_cart}}</button>
                          <a class="naiz-button-clear" href="#" onclick="return false;" data-group="panels" data-shows="form">{{lang.change_data}}</a>
                        </div>
                        {{/block}}
                      </div>
                    </div>
                    {{/block}}
                    {{#block "form-sizechart-footer"}}
                    <div class="naiz-sizechart-footer">
                      Powered by <a class="naizfit-link" href="{{lang.naizfit_link}}">NAIZ FIT</a> | <a
                        href="{{lang.privacy_policy_link}}">{{lang.privacy_policy}}</a>
                    </div>
                    {{/block}}
                  </div>
                  {{/block}}
                {{/unless}}
              </div>
            </div>
          </div>
          {{/block}} {{! form-content }}
        </div>
        {{/block}} {{! form-wrapper }}
      </div>
      {{/block}}
    </div>
    </div>
  {{/block}}
{{/inline}}

{{#if sizeformSection}}    
  {{#block cotainer}}
    <div class="naiz-shim" data-naiz-unit-container="modal-body" data-naiz-unit-value="metric">
      {{> style }}
      {{> form }}
    </div>
  {{/block}}
{{/if}}