/* FORMAT CSS */
        /* http://www.lonniebest.com/FormatCSS/ */
        /* MINIFY CSS */
        /* https://www.minifier.org/ */
        /* ASCII GENERATOR */
        /* http://patorjk.com/software/taag/#p=display&f=Big */

        /* 
        Table of Contents
        =================
        1. Global
        2. Welcome Page
        3. language button
        4. Result Page
        5. reference list
        6. BMI Page
        7. Top Bar
        8. Question Page
        9. header
        10. footer
        11. Alert Box 
        12. Loading Page
        13. email page
        */
      /* BOOTSTRAP */
      /*!
 * Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/)
 *//*!
 * Bootstrap v3.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:hover,a:focus{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role="button"]{cursor:pointer}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.row-no-gutters{margin-right:0;margin-left:0}.row-no-gutters [class*="col-"]{padding-right:0;padding-left:0}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}.clearfix:before,.clearfix:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after{display:table;content:" "}.clearfix:after,.container:after,.container-fluid:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-xs,.visible-sm,.visible-md,.visible-lg{display:none !important}.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block{display:none !important}@media (max-width:767px){.visible-xs{display:block !important}table.visible-xs{display:table !important}tr.visible-xs{display:table-row !important}th.visible-xs,td.visible-xs{display:table-cell !important}}@media (max-width:767px){.visible-xs-block{display:block !important}}@media (max-width:767px){.visible-xs-inline{display:inline !important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block !important}table.visible-sm{display:table !important}tr.visible-sm{display:table-row !important}th.visible-sm,td.visible-sm{display:table-cell !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block !important}table.visible-md{display:table !important}tr.visible-md{display:table-row !important}th.visible-md,td.visible-md{display:table-cell !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block !important}}@media (min-width:1200px){.visible-lg{display:block !important}table.visible-lg{display:table !important}tr.visible-lg{display:table-row !important}th.visible-lg,td.visible-lg{display:table-cell !important}}@media (min-width:1200px){.visible-lg-block{display:block !important}}@media (min-width:1200px){.visible-lg-inline{display:inline !important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block !important}}@media (max-width:767px){.hidden-xs{display:none !important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none !important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none !important}}@media (min-width:1200px){.hidden-lg{display:none !important}}.visible-print{display:none !important}@media print{.visible-print{display:block !important}table.visible-print{display:table !important}tr.visible-print{display:table-row !important}th.visible-print,td.visible-print{display:table-cell !important}}.visible-print-block{display:none !important}@media print{.visible-print-block{display:block !important}}.visible-print-inline{display:none !important}@media print{.visible-print-inline{display:inline !important}}.visible-print-inline-block{display:none !important}@media print{.visible-print-inline-block{display:inline-block !important}}@media print{.hidden-print{display:none !important}}
    /* 
   _____ _       _           _ 
  / ____| |     | |         | |
 | |  __| | ___ | |__   __ _| |
 | | |_ | |/ _ \| '_ \ / _` | |
 | |__| | | (_) | |_) | (_| | |
  \_____|_|\___/|_.__/ \__,_|_|
                                                           
1. Global
 */
 *{
    margin:0;
    padding:0;
    scroll-behavior: smooth;
    }

    /* 1.1 color definition */
    :root{
     --darkblue:#4575CB;
     --lightblue:#5DC7F6;
     --backgroundblue:#FAFBFF;
     --textgrey:#666;
     --textblack:#3c3c3c;
     --shadow1:#00000029;
     --disablegrey:#989EAF;
     --warningred:#F66565;
    }
    body{
        background-color: var(--backgroundblue);       
    }
    .green{
    font-weight:700;
    color:#42A213;
    }
    .yellow{
    font-weight:700;
    color:#EBC507;
    }
    .red{
    font-weight:700;
    color:#F66565;
    }
    .blue{
        color:var(--darkblue)
    }  

    .mobile-only{
      display: none;
      }
      
      .desktop-only{
      display: block;
      }
      
      @media (max-width: 768px){
      .mobile-only{
        display: block;
      }
      .desktop-only{
        display: none;
      }
      }
/*
 __          __    _                                _____                    
 \ \        / /   | |                              |  __ \                   
  \ \  /\  / /___ | |  ___  ___   _ __ ___    ___  | |__) |__ _   __ _   ___ 
   \ \/  \/ // _ \| | / __|/ _ \ | '_ ` _ \  / _ \ |  ___// _` | / _` | / _ \
    \  /\  /|  __/| || (__| (_) || | | | | ||  __/ | |   | (_| || (_| ||  __/
     \/  \/  \___||_| \___|\___/ |_| |_| |_| \___| |_|    \__,_| \__, | \___|
                                                                  __/ |      
                                                                 |___/       
2. Welcome Page
*/
.language-btn{
	background: #fff;
	border:none;
	border-radius: 4px;
	box-shadow: 0 3px 6px var(--shadow1);
	color:#fff;
  background-color: #0071EB;
	font-size: 16px;
	font-weight: 600;
	margin: 10px;
	padding: 15px 50px;
	transition: all 0.35s ease-in;
}

.language-btn:hover,.language-btn:active,.language-btn:focus{
	/* background: var(--lightblue); */
	color: #fff;
}
.language-desc{
	color:#000;
	/* font-size: 18px; */
	/* line-height: 27px; */
  margin: 20px auto;
}
.language-instr{
  margin-right: 20px;
}
.language-cta{
  color: #0071EB;
  font-weight: bold;
}
.language-cta-2{
  color: #0071EB;
  font-weight: bold;
  text-decoration: underline;
}
.language-cta-2:hover,.language-cta-2:active,.language-cta-2:focus{
  color: #0071EB;
  font-weight: bold;
  text-decoration: underline;
}
.language-disclaimer{
  font-size: 20px;
  margin-top: 5%;
}
.lg-cta-dr{
  box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 10%);
  padding: 5px;
  color: #000;
  display: inline-block;
}
.lg-cta-dr img{
  float: left;
  margin-right: 18px;
}
.lg-cta-dr p:nth-child(2){
  font-weight: bold;
  margin: 5px 0;
}
.lg-cta-dr:hover,.lg-cta-dr:visited,.lg-cta-dr:focus{
  color: #000;
  text-decoration: none;
}
.language-title{
	color: var(--textblack);
	font-size: 36px;
	margin: 20px 0;
}
.close-cta{
  height: 14px;
}
.close-cta-div{
  align-items: center;
  background-color: #eee;
  border-radius: 25px;
  color: #fff;
  cursor: pointer;
  display: inline-grid;
  height: 25px;
  justify-content: center;
  margin: -12px;
  position: absolute;
  width: 25px;
  z-index: 10000;
}
.welcome-page{
	margin: auto;
	text-align: left;
}
.lg-cta-dr-wrap{
  left: 43px;
  display: inline-block;
  position: fixed;
  bottom: 24px;
}
/* .welcome-page img{
	display: block;
  margin: 20px auto;  
  width: 40%;
} */

/* 3. language button */
.language-button{
  border: none;
  background-color: white;
  padding-top: 37px;
}

.header-logo-lang{
  display: inline-flex;
}

/* .lang-btn-container{
  margin-bottom: 100px;
} */

@media (max-width: 768px){
  .language-button{
    padding-top: 18px;
  }

  .hc-disclaimer{
    font-size: 14px;
  }

}

@media (max-width: 576px){
	.lang-btn-container{
		display: flex;
		justify-content: space-around;
	}
	.language-btn{
		padding: 10px 40px;
	}
	.language-desc{
    display: flex;
		font-size: 14px;
		line-height: 23px;
		margin: 20px auto;
		width: 80%;
	}
	.language-title{
		font-size: 24px;
    margin-top: 0;
	}
	.welcome-page{
		margin: 40px auto;
		width: 100%;
    margin-top: 20px;
	}
	/* .welcome-page img{
		overflow: hidden;
		width: 100%;
  } */
  
  .language-button{
    padding-top: 18px;
  }
}

.vaccine-floating {
  box-shadow: 0 2px 7px #000000c4;
  background: #d65858;
  border-radius: 15px;
  bottom: -1px;
  color: #fff;
  display: flex;
  justify-content: center;
  padding: 16px;
  text-decoration: none;
  width: 95%;
  z-index: 99;
  font-weight: bold;
  align-items: center;
  margin: 0 auto;
}

.vaccine-floating:focus,.vaccine-floating:visited,.vaccine-floating:hover{
  color: #fff;
  text-decoration: none;
}

@media(max-width:320px){
  .vaccine-floating {
    font-size: 12px;
  }
}

/*
  _____                         _   _                                    
 |  __ \                       | | | |                                   
 | |__) |   ___   ___   _   _  | | | |_     _ __     __ _    __ _    ___ 
 |  _  /   / _ \ / __| | | | | | | | __|   | '_ \   / _` |  / _` |  / _ \
 | | \ \  |  __/ \__ \ | |_| | | | | |_    | |_) | | (_| | | (_| | |  __/
 |_|  \_\  \___| |___/  \__,_| |_|  \__|   | .__/   \__,_|  \__, |  \___|
                                           | |               __/ |       
                                           |_|              |___/        
4. Result Page
*/
    /*hero result*/
    h1{
      font-size: unset;
      font-weight: unset;
      text-transform: unset;
    }
    .hero-result{
    background-color: #E9EFFD;
    color: #fff;
    margin-top: 50px;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    background-image: url('https://doc-cdn.s3.ap-southeast-1.amazonaws.com/health-center/nc-quiz-low-border-ds.png');
    background-size: cover;
    background-repeat: no-repeat;
    }
    .result-opt{
      background-color: #F4F8FC;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      margin-bottom: 50px;
      text-align: center;
    }
    .res-redo{
      margin: 16px 14px;
      display: inline-block;
    }
    .hero-result h1{
        font-weight: bold;
        font-size: 34px;
        /* text-transform: uppercase; */
    }
    .hero-result h1, .hero-result p{
      display: block;
      color: #0071EB;
      margin: 20px;
      margin-left: 12%;
      text-align: left;
    }
    .hero-title-res{
      color: #000;
      display: block;
      font-size: 18px;
      text-align: left;
      margin: 20px;
      margin-top: 11%;
      margin-left: 12%;
    }
    .result-under-cta{
      box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 10%);
      padding: 5px;
      color: #000;
      display: inline-block;
      background-color: #E9EFFD;
      border-radius: 8px;
      margin-bottom: 5%;
      width: 64%;
      text-align: left;
    }
    .result-under-cta img{
      float: left;
      margin-right: 18px;
    }
    .result-under-cta p:nth-child(1){
      font-weight: bold;
      margin-bottom: 5px;
    }
    .result-under-cta span:nth-child(1){
      font-size: 10px;
    }
    .result-under-cta span:nth-child(2){
      font-weight: bold;
    }
    .result-under-cta p:nth-child(4){
      color: #0071EB;
      font-weight: bold;
      margin: 5px 0;
    }
    .result-under-cta:hover,.result-under-cta:visited,.result-under-cta:focus{
      color: #000;
      text-decoration: none;
    }
    .result-under-cta-2{
      box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 10%);
      padding: 5px;
      color: #000;
      display: inline-block;
      background-color:#FFDBA1;
      border-radius: 8px;
      margin-bottom: 5%;
      width: 64%;
      text-align: left;
    }
    .result-under-cta-2:hover,.result-under-cta-2:visited,.result-under-cta-2:focus{
      color: #000;
      text-decoration: none;
    }
    .result-under-cta-2 img{
      float: left;
      margin: 0 28px;
    }
    .result-under-cta-2 p:nth-child(2){
      font-weight: bold;
      margin: 5px 0;
    }
    .result-under-cta-2 p:nth-child(3){
      color: #0071EB;
      font-weight: bold;
      margin: 5px 0;
    }
    .nicotine-res-cta-1{
      display: inline-block;
      vertical-align: top;
    }
    .nicotine-res-cta-2{
      display: inline-block;
      width: 60%;
      text-align: left;
    }
    .nic-share-mb{
      height: 15px;
      margin-right: 7px;
    }
    .nic-land-tick{
      width: 4%;
    }
    .quiz-result-main-text h2,
    .quiz-result-main-text p{
      text-align: justify;
      margin-bottom:20px;
      line-height: 27px;
    }

    .quiz-result-main-text p{
      font-size: 18px;
    }
    /* .quiz-result-text {
      margin-top: 20px;
    } */
    .quiz-result-main-text a:hover{
      text-decoration: none;
      color:#fff;
    }
    /* Sidebar */
    
    .quiz-sidebar h2, .quiz-sidebar p{
    margin-bottom:10px
    }

    .quiz-primary-btn{
      background-color: var(--darkblue);
      color: #fff;
      margin-top: 20px;
      display: block;
      padding: 10px;
      border-radius: 4px;
      text-align: center;
    }
    
    .quiz-primary-btn a{
      color:#fff;
    }
    .quiz-secondary-btn{
      background-color: var(--backgroundblue);
      border: 1px solid #898989;
    }
    .quiz-share{
      margin: 40px 0;
    }
    .quiz-share-icon{
      background-image: url('../img/Facebook.png');
      background-size: cover;
      height: 40px;
      margin: 10px;
      width: 146px;
      cursor: pointer;
    }
    
    .quiz-share-icon:first-child{
      background-image: url('../img/WhatsApp.png');
      margin-left: 0;
    }
    .quiz-share-icon:last-child{
      background-image: url('../img/Twitter.png');
    }
    .quiz-share-icon-wrapper{
      display: flex;
    }
    .quiz-vit-container{
      background-color: #D6F0E9;
      border-radius: 10px;
      margin: 10px 0;
      padding: 20px 10px 10px 10px;
    }
    
    .quiz-vit-text{
      display: inline-block;
      width: 59%;
    }
    .result-detail{
      margin-top: 30px;
    }
    .result-detail p{
      margin-bottom: 20px;
    }
    .result-definition{
    border-bottom:1px dotted var(--disablegrey)
    }
    .definitions-holder {
      margin-top: 40px;
      font-size: 12px;
      color: var(--textgrey);
    }
    .prevention-desc{
      font-size: 14px;
      line-height: 23px;
    }
    div#prevention {
      margin-bottom: 40px;
    }
    
    /* result table */
    .quiz-result-table{
      color: #898989;
      width: 100%;
    }
    .quiz-result-table tr{
      align-items: center;
      border-bottom: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      padding-bottom: 10px;
    }
    .quiz-result-table td{
      max-width: 80%;
    }
    .red-circle:before{
        flex: 0 0 30px;
        height: 14px;
        width: 14px;
        border-radius: 50%;
        content: '!';
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        color: #fff;
        background: #F66565;
        margin-bottom: 2px;
    }
    .grey-circle:before{
      flex: 0 0 30px;
        height: 14px;
        width: 14px;
        border-radius: 50%;
        content: '';
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        background:#969696;
    }
    .result-desktop-only{
      color: #000;
      display: flex;
      font-size: 16px;
      font-weight: 600;
      margin-top: 20px;
      width: 100%;
      justify-content: center;
    }
    /* button.forum{
      align-items: center;
      background-color: var(--lightblue);
      border-bottom-left-radius: 4px;
      border-top-left-radius: 4px;
      display: flex;
      justify-content: center;
    } */
    button.consult-doc, button.forum{
      background: #fff;
      border: none;
      border-radius: 4px;
      box-shadow: 0px 2px 12px #d4d2d2;
      font-size: 14px;
      font-weight: bold;
      height: 85px;
      margin: 15px;
      outline: none;
      padding: 10px;
      width: 198px;
      display: flex;
    }
    
    .result-desktop-only button{
      border: none;
      padding: 15px 17px;
      width: 35%;
    }

    button.consult-doc p, button.forum p{
      font-size: 14px;
      text-align: center;
      margin-bottom: 0px;
    }

    @media (max-width:768px){
      button.consult-doc p, button.forum p{
        font-size: 12px;
      }
    }
    .consult-img{
      padding-right: 5px;
    }
    
/* 5. reference list */
    .reference-text-link {
      align-items: center;
      color: #3c3c3c;
      display: flex;
      margin-bottom: 5px;
      text-decoration: none;
      font-size: 14px;
    }    

    .external-link-svg svg {
      align-items: center;
      display: flex;
      margin-left: 5px;
      width: 15px;
    }

    .soalan-link-svg-fill {
      fill: #41c0f1;
    }

    .quiz-reference{
      margin:15px;
    }
    @media(min-width:576px){
      .res-share{
        margin: 16px 14px;
        display: inline-block;
      }
      .nic-res-sidebar{
        text-align: right;
      }
    }
    @media (max-width: 576px){
      .nic-land-banner-mb{
        width: 76%;
        margin: 0 auto;
        margin-top: 9%;
        margin-bottom: 17%;
      }
      .language-desc{
        margin: 0;
        width: auto;
      }
      .language-instr{
        display: block;
        margin: 0;
        width: 32%;
      }
      .nic-share-icon {
        display: inline-block !important;
      }
      .result-opt{
        margin-bottom: 0;
      }
      .nic-share-nospace{
        padding: 0;
        padding-top: 18px;
      }
      .redo-quiz-img{
        height: 15px;
      }
      .nicotine-res-cta-2{
        width: 94%;
      }
      .sc-quiz-result-banner{
        width: 78%;
        margin: 0 auto;
        display: flex;
      }
      .result-under-cta{
        width: 100%;
      }
      .result-under-cta-2{
        width: 100%;
      }
      .hero-result{
        background-image: url('https://doc-cdn.s3.ap-southeast-1.amazonaws.com/health-center/nc-quiz-low-border-mb.png');
        margin-top: 20px;
        padding: 45px 0;
        text-align: center;
      }
      .hero-title-res{
        display: inline-block;
        margin: 0;
      }
      .hero-result h1, .hero-result p{
        margin: 0;
        margin-bottom: 26px;
        text-align: center;
      }
      .lg-cta-dr-wrap{
        left: 50%;
        transform: translate(-50%, 0);
        position: fixed;
        bottom: 0;
        width: 311px;
        margin: 0 auto;
        display: block;
      }
      .nic-land-tick{
        width: 30%;
        display: block;
        margin: 0 auto;
        margin-bottom: 11%;
      }
      .nic_info{
        text-align: center;
        display: block;
      }
      .hero-result h1{
        font-size: 30px;
      }
  
      .result-desktop-only{
        display: none;
      }
      .quiz-sidebar .mobile-only{
        display: block;
        font-size: 16px;
      }

      button.forum-mobile{
        align-items: center;
        background-color: var(--backgroundblue);
        border: 1px solid var(--textgrey);
        border-radius: 4px;
        color: var(--textgrey);
        display: flex;
        font-weight: 600;
        justify-content: center;
        margin-top: 20px;
        padding: 10px 0;
        width: 100%;
      }
      .floating-mobile{
        bottom: 0;
        box-shadow: 0 -2px 9px hsla(0, 0%, 0%, 0.16);
        display: flex;
        left: 0px;
        min-height: 53px;
        position: fixed;
        width: 100vw;
        z-index: 100;
      }
      button.forum-mobile-float{
        background-color: var(--lightblue);
        border: none;
        color: #fff;
        display: flex;
        font-weight: 600;
        justify-content: center;
        padding: 15px 0;
        width: 50%;
      }
      button.consult-doc-float{
        background-color: var(--darkblue);
        border: none;
        color: #fff;
        font-weight: 600;
        padding: 10px 0;
        width: 50%;
      }
      .quiz-result h2{
        margin: 40px 0 20px 0;
      }
      .share-float svg{
        height: 22px;
        margin-right: 10px;
      }
      .col-sm-4.quiz-sidebar{
        margin-top: 40px;
      }
      .quiz-result-main-text h2,
       .quiz-result-main-text p{
        margin-bottom: 20px;
      }

      .quiz-result-main-text p{
        font-size: 14px;
      }

      .quiz-result-text{
        margin-top: 20px;
      }
      .quiz-primary-btn{
        bottom: 0;
        left: 0;
        padding: 15px 0;
        position: fixed;
        width: 100vw;
        z-index: 100;
      }
    }

    .hc-disclaimer{
      /* text-align: left; */
      padding-bottom: 20px;
    }

    /*
      ____  __  __ _____   _____                 
     |  _ \|  \/  |_   _| |  __ \                
     | |_) | \  / | | |   | |__) |_ _  __ _  ___ 
     |  _ <| |\/| | | |   |  ___/ _` |/ _` |/ _ \
     | |_) | |  | |_| |_  | |  | (_| | (_| |  __/
     |____/|_|  |_|_____| |_|   \__,_|\__, |\___|
                                       __/ |     
                                      |___/      
    6. BMI Page
    */
    .bmi-btn{
      background: var(--lightblue);
      border: 1px solid var(--lightblue);
      border-radius: 4px;
      box-shadow: 0 3px 6px var(--shadow1);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      margin-top: 60px;
      padding: 9px 50px;
      transition: all 0.35s ease-in;
    }
    .bmi-btn:disabled{
      background: #ccc;
      border: 1px solid #ccc;
      box-shadow: 0 3px 6px var(--shadow1);
      color: #aaa;
    }
    .bmi-holder{
      margin: 20px auto;
      text-align: center;
    }
    .bmi-holder .value{
      color: var(--textgrey);
      font-size: 40px;
      line-height: 40px;
      margin: 20px auto 0 auto;
      text-align: center;
    }
    .slider-label{
      margin:0;
      font-size:16px;
      color:var(--disablegrey)
    }
    .bmi-text{
      font-size: 40px;
      line-height: 59px;
      margin-bottom: 60px;
    } 
    
    /* BMI Range Slider */
    
    .bmi-holder input[type="range"] {
      display: block;
      -webkit-appearance: none;
      background-color: #E8EAF4;
      width: 80%;
      height: 15px;
      border-radius: 5px;
      margin: 50px auto;
      outline: 0;
    }
    .bmi-holder input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      background-color: #fff;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 10px solid var(--darkblue);
      cursor: pointer;
      transition: 0.3s ease-in-out;
    }
    .bmi-holder input[type="range"]::-webkit-slider-thumb:hover {
      background-color: white;
      border: 5px solid var(--darkblue);
      transform: scale(1.3);
    }
    @media (max-width: 576px){
      .bmi-btn{
        margin-top: 24px;
        width: 60%;
      }
      .bmi-holder{
        padding: 0 10px;
        width: 100%;
      }
      .bmi-holder .value{
        font-size: 24px;
        line-height: 24px;
      }
      .bmi-holder input[type="range"]{
        width: 80%;
      }
      .bmi-text{
        font-size: 24px;
        line-height: 35px;
        margin-bottom: 35px;
      }
    }
    /* 
      _______            ____             
     |__   __|          |  _ \            
        | | ___  _ __   | |_) | __ _ _ __ 
        | |/ _ \| '_ \  |  _ < / _` | '__|
        | | (_) | |_) | | |_) | (_| | |   
        |_|\___/| .__/  |____/ \__,_|_|   
                | |                       
                |_|                       
    7. Top Bar
     */
     #parentBar{
      align-content: center;
      color: var(--textgrey);
      display: flex;
      justify-content: space-around;
      margin: 20px auto;
      width: 90%;
    }
    .back-btn{
      background-color: var(--backgroundblue);
      border: none;
    }
    .back-btn svg{
      fill: var(--textgrey);
      height: 15px;
    }
    .progressBar{
      background: #8CACED;
      border-radius: 25px;
      height: 10px;
      position: relative;
      transition: all 0.7s ease-in;
      width: 0;
      z-index: 3;
    }
    .progress-container{
      margin: auto;
      width: 80%;
    }
    .progressTrack{
      background: #E8EAF4;
      border-radius: 25px;
    }
    @media (max-width: 576px){
      #parentBar{
        width: 100%;
      }
      .back-btn svg{
        height: 10px;
      }
      .progress-container{
        width: 60%;
      }
    }
    /* 
       ____                  _   _               _____                 
      / __ \                | | (_)             |  __ \                
     | |  | |_   _  ___  ___| |_ _  ___  _ __   | |__) |_ _  __ _  ___ 
     | |  | | | | |/ _ \/ __| __| |/ _ \| '_ \  |  ___/ _` |/ _` |/ _ \
     | |__| | |_| |  __/\__ \ |_| | (_) | | | | | |  | (_| | (_| |  __/
      \___\_\\__,_|\___||___/\__|_|\___/|_| |_| |_|   \__,_|\__, |\___|
                                                             __/ |     
                                                            |___/                                                
    8. Question Page */
    .answer-btn{
      background: #fff;
      border: none;
      border-radius: 4px;
      box-shadow: 0 2px 14px var(--shadow1);
      color: var(--textblack);
      display: block;
      font-size :18px;
      margin: 20px auto;
      outline: none;
      padding: 20px;
      text-align: center;
      transition: all .35s ease-in;
      width: 40%;
    }
    .answer-btn:hover,.answer-btn:active,.answer-btn:focus{
      background: var(--lightblue);
      color: #fff;
    }
    .answer-btn span{
        text-shadow: 0 3px 6px #00000029;
    }
    .answer-DOM{
      padding-top: 40px;
    }
    .question-text{
      color: var(--textblack);
      font-family: 'Open Sans', sans-serif;
      font-size: 40px;
        line-height: 49px;
      padding-top: 40px;
      text-align: center;
    }
    p.question-description{
      color: var(--textgrey);
      font-size: 24px;
      font-weight: normal;
      margin-top: 24px;
    }
    
    @media (max-width: 576px) { /*small mobile phone*/
        .answer-btn{
            width: 100%;
            font-size: 14px;
            line-height: 23px;
            padding:10px 20px;
            margin:15px 0;
        }
        .question-text{
            font-size: 24px;
            line-height: 35px;
        }
        p.question-description{
            font-size:14px;
            line-height:23px;
        }
    }
    
    /* 
               _           _     ____            
         /\   | |         | |   |  _ \           
        /  \  | | ___ _ __| |_  | |_) | _____  __
       / /\ \ | |/ _ \ '__| __| |  _ < / _ \ \/ /
      / ____ \| |  __/ |  | |_  | |_) | (_) >  < 
     /_/    \_\_|\___|_|   \__| |____/ \___/_/\_\
                                                 
     11. Alert Box                                            
     */
    
     .alert-container {
      padding: 20px;
      background-color: white;
      color: var(--textblack);
      display:none;
      min-height:1%;
      min-width:1%;
      position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
            justify-content: center;
            align-items: center;
            transition: all 0.5s ease-in;
            box-shadow: var(--shadow1) 0 3px 6px;
            padding: 20px;
            z-index:1000;
    }
    .alert-text{
        visibility: hidden;
        position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
            justify-content: center;
            align-items: center;
            text-align: center;
    }
    .alert-text p{
        margin-bottom: 10px;
        font-size:24px;
    }
    
    .alert-btn-primary{
        color:#fff;
        background-color: var(--lightblue);
        border: var(--lightblue) 1px solid;
    }
    .alert-btn-secondary{
        color:var(--disablegrey);
        background-color:#fff;
        border: var(--disablegrey) 2px solid;
    }
    .alertlogo{
        background-image: url('../img/Alert.png');
        background-repeat: no-repeat;
        background-size: cover;
        height: 50px;
        width: 120px;
        margin: 20px auto;
        
    }
    .alert-btn-holder{
        margin: 40px;
    }
    .alert-btn-holder button{
        margin:0 40px;
        padding: 15px 0;    
        border-radius: 4px;
        font-weight: 600;
        font-size:16px;
        width: 181px;
    }
    .alert-overlay{
        display: none;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        background-color:#000000aa;
        z-index:100;   
    }
    @media (max-width: 576px) {
        .alertlogo{
            height: 62px;
            width: 72px;
        }
        .alert-text p{
            font-size: 14px;
        }
        .alert-btn-holder{
            margin:20px;
        }
        .alert-btn-holder button{
            margin: 0;
            padding: 10px 0;
            font-size:12px;
            width: 136px;
        }
    
    }
    
     /* 
      _                     _ _               _____                 
     | |                   | (_)             |  __ \                
     | |     ___   __ _  __| |_ _ __   __ _  | |__) |_ _  __ _  ___ 
     | |    / _ \ / _` |/ _` | | '_ \ / _` | |  ___/ _` |/ _` |/ _ \
     | |___| (_) | (_| | (_| | | | | | (_| | | |  | (_| | (_| |  __/
     |______\___/ \__,_|\__,_|_|_| |_|\__, | |_|   \__,_|\__, |\___|
                                       __/ |              __/ |     
                                      |___/              |___/         
    12. Loading Page
     */
     .loading-container{
      text-align: center;
      position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
            justify-content: center;
            align-items: center;
            transition: all 0.5s ease-in;
            padding: 20px;
            z-index:1000;
    }
    .loading-title{
      font-size:40px;
    }
    .loading-subtitle{
      font-size:24px;
    }
    .loading-background{
      width:400px;
      margin:20px auto
    }
    /* loading animation */
    .loading-animation svg{
      height:200px;  
    }
    
    @media (max-width:576px) {
      .loading-title{
        font-size:24px;
      }
      .loading-subtitle{      
        color: var(--textgrey);
        font-size: 12px;
        line-height: 24px;    
        margin-top: 10px;
      }
      .loading-background{
        width: 60%;
      }
      .loading-animation svg{
      height:100px;
      margin-bottom:0;
      }
    }
    /* 
      ______                 _ _   _____                  
     |  ____|               (_) | |  __ \                 
     | |__   _ __ ___   __ _ _| | | |__) |_ _  __ _  ___  
     |  __| | '_ ` _ \ / _` | | | |  ___/ _` |/ _` |/ _ \ 
     | |____| | | | | | (_| | | | | |  | (_| | (_| |  __/ 
     |______|_| |_| |_|\__,_|_|_| |_|   \__,_|\__, |\___| 
                                               __/ |      
                                              |___/       
     */
    /* 13. email page */
    .email-title-desc{
      color: var(--textblack);
    }
    .email-container{
      display: flex;
      flex-direction: column;
      height: 100vh;
      justify-content: space-evenly;
      list-style: none;
      margin: 0;
      margin-top: 10px;
      padding: 0;
      text-align: center;
    }
    .email-title{
      font-size: 40px;
    }
    .email-desc{
      font-size: 16px;
    }
    .email-form-container input{
      background: none;
      border: none;
      caret-color: var(--disablegrey);
      color: var(--darkblue);
      font-size: 40px;
      outline: none;
      text-align: center;
      width: 30%;
    }
    .email-form-container input::placeholder{
      color: var(--disablegrey);
    }
    .email-form-container input:focus-visible{
      border: unset;
    }
    .invalid-msg{
      color: var(--warningred);
    }
    .invalid-msg a{
      color: var(--warningred);
      font-weight: 600;
      text-decoration: none;
    }
    .submit-email-btn{
      background-color: var(--disablegrey);
      border: 1px solid var(--disablegrey);
      border-radius: 4px;
      color: var(--textgrey);
      font-size: 16px;
      font-weight: 600;
      height: 50px;
      margin-bottom: 10px;
      text-transform: uppercase;
      width: 250px;
    }
    .email-agree{
      color: var(--textblack);
      font-size: 12px;
      line-height: 23px;
      margin: 0 auto;
      width: 250px;
    }
    .email-seperator{
      border: 1px solid #ddd;
      fill: var(--disablegrey);
      margin: 0 auto;
      margin: 10px auto;
      width: 60%;
    }
    @media (max-width: 576px){
      .email-title{
        font-size: 24px;
      }
      .email-desc{
        font-size: 14px;
      }
      .email-form-container input{
        font-size: 24px;
      }
      .invalid-msg{
        font-size: 14px;
      }
    }
    /* 
      ______                 _ _   _____                  
     |  ____|               (_) | |  __ \                 
     | |__   _ __ ___   __ _ _| | | |__) |_ _  __ _  ___  
     |  __| | '_ ` _ \ / _` | | | |  ___/ _` |/ _` |/ _ \ 
     | |____| | | | | | (_| | | | | |  | (_| | (_| |  __/ 
     |______|_| |_| |_|\__,_|_|_| |_|   \__,_|\__, |\___| 
                                               __/ |      
                                              |___/       
     */
    
    /* email page */
    .email-title-desc{
      color: var(--textblack);
    }
    .email-container{
      display: flex;
      flex-direction: column;
      height: 100vh;
      justify-content: space-evenly;
      list-style: none;
      margin: 0;
      margin-top: 10px;
      padding: 0;
      text-align: center;
    }
    .email-title{
      font-size: 40px;
    }
    .email-desc{
      font-size: 16px;
    }
    .email-form-container input{
      background: none;
      border: none;
      caret-color: var(--disablegrey);
      color: var(--darkblue);
      font-size: 40px;
      outline: none;
      text-align: center;
      width: max-content;
    }
    .email-form-container input::placeholder{
      color: var(--disablegrey);
    }
    .email-form-container input:focus-visible{
      border: unset;
    }
    .invalid-msg{
      color: var(--warningred);
    }
    .invalid-msg a{
      color: var(--warningred);
      font-weight: 600;
      text-decoration: none;
    }
    .submit-email-btn{
      background-color: var(--disablegrey);
      border: 1px solid var(--disablegrey);
      border-radius: 4px;
      color: var(--textgrey);
      font-size: 16px;
      font-weight: 600;
      height: 50px;
      margin-bottom: 10px;
      text-transform: uppercase;
      width: 250px;
    }
    .email-agree{
      color: var(--textblack);
      font-size: 12px;
      line-height: 23px;
      margin: 0 auto;
      width: 250px;
    }
    .email-seperator{
      border: 1px solid #ddd;
      fill: var(--disablegrey);
      margin: 0 auto;
      margin: 10px auto;
      width: 60%;
    }
    @media (max-width: 576px){
      .email-title{
        font-size: 24px;
      }
      .email-desc{
        font-size: 14px;
      }
      .email-form-container input{
        font-size: 24px;
        width: 100%;
      }
      .invalid-msg{
        font-size: 14px;
      }
    }
    
    /* email page end */