/* html reset */
        *, *::before, *::after {
        box-sizing: border-box;
        }
        * {
        margin: 0;
        }
        body {
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        }
        img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
        }
        input, button, textarea, select {
        font: inherit;
        }
        p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
        }
        p {
        text-wrap: pretty;
        }
        h1, h2, h3, h4, h5, h6 {
        text-wrap: balance;
        }
        #root, #__next {
        isolation: isolate;
        }

        body {
            background: #549953 url('/images/calcBg.png');
            background-position: center top;
            background-size: cover;
            font-family: "Poppins", sans-serif;
            font-size:18px;
            font-weight:400;
            color:#000;
        }

        .main-container{
            display:flex;
            flex-direction:column;
            width:100%;            
            margin:0 auto;
            padding:20px 40px;
        }

        .container{
            display:flex;
            width:100%;
        }
        .header{           
            flex-direction: column;
            justify-content:center;
            align-items: center;
        }
        .btnReturn{
            margin-top:20px;
            background:rgba(84,153,83,0);
            border:1px solid #FFF;
            border-radius:102px;
            padding:8px 30px;
            color:#FFF;
            font-size:20px;
            text-decoration: none;
            text-align:center;
            transition: box-shadow 0.3s ease-in-out;            
        }
        .btnReturn:hover, button:hover{
            -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4); 
            box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);
        }
        .footer{
            justify-content:center;
            align-items: center;   
            font-size:20px;
            color:#FFF;         
        }
        .content{
            max-width: 800px;
            margin:80px auto 150px;
            background: #FFF;
            border-radius:13px;
            padding:30px 30px;
            text-align:center;
        }
        h1{
            font-family: "Staatliches", sans-serif;
            font-size:36px;
            text-transform: uppercase;
            font-weight:400;
            line-height: 1.2;
        }
        h2{
            font-size:30px;
            font-weight:400;
        }
        h3{
            font-size:24px;
            font-weight:400;
        }
        .contentForm{
            width:100%;
            flex-direction:row;
            padding:0;
            flex-wrap: wrap;
            font-size: 20px;
        }
        .formLeft{
            width:100%;
            margin-top:15px;
            display:flex;
            align-items: center;
            justify-content: center;
        }
        .formRight{
            width:100%;
            text-align:center;
        }
        .formRight>input, .formRight>select, .formRight>button{
            width:100%;
        }
        input, select{
            border-radius:8px;
            border:1px solid #CFCFCF;
            padding:5px 10px;
        }
        button{
            border-radius:8px;
            padding:5px 10px;
            background-color: #549953;
            border:none;
            color:#FFF;
        }
        .poweredBy{
            display:flex;flex-direction:column;align-items: center;margin:50px 0 -115px 0;
        }
        .mt-20{
            margin-top:20px;
        }
        .mt-30{
            margin-top:20px;
        }
        .mt-40{
            margin-top:40px;
        }
        .mt-50{
            margin-top:50px;
        }
        #result{
            border:solid 1px #549953;
            border-radius:102px;
            padding:15px 40px;
            display: inline-block;
        }
        #ingredientBreakdown{
            max-width:600px;
            margin:20px auto 0 auto;
            text-align: left;
        }
        .breakdownRow{
            display:flex;
            justify-content: space-between;
        }
        .hideOnMobile{
            display:none;
        }
        
        /* Tooltip container */
        .tooltip {
          position: relative;
          display: inline-block;
          text-decoration:underline;
          text-decoration-thickness:1px;
          text-underline-offset: 3px;
          margin-top:10px;
        }
        
        /* Tooltip text */
        .tooltip .tooltiptext {
          visibility: hidden;
          width: 90vw;
          background-color: #999;
          color: #fff;
          font-size:16px;
          /*text-align: center;*/
          padding: 10px;
          border-radius: 6px;
          top: calc(100% + 5px);
          left: 50%;
          margin-left: -45vw;
                     
          /* Position the tooltip text - see examples below! */
          position: absolute;
          z-index: 1;
        }
                            
        .tooltip:hover{
            cursor:pointer;
        }
        /* Show the tooltip text when you mouse over the tooltip container */
        .tooltip:hover .tooltiptext {
          visibility: visible;
        }
        
        .tooltip .tooltiptext::after {
          content: " ";
          position: absolute;
          bottom: 100%;  /* At the top of the tooltip */
          left: 50%;
          margin-left: -5px;
          border-width: 5px;
          border-style: solid;
          border-color: transparent transparent #999 transparent;
        }
        
        /* mid n up breakpoint */
        @media only screen and (min-width: 768px) {
            .header{
                flex-direction: row;
                justify-content:space-between;
                align-items: center;
            }
            .content{
            padding:30px 60px;
        }
            .contentForm{
                padding:0 15%;
            }
            .formLeft{
            width:120px;
            justify-content: flex-end;
            }
            .formRight{
                width:calc(100% - 120px);
                text-align:left;
                padding-left:20px;
                margin-top:15px;
            }
            #requestForm .formLeft{
                width:120px;
            }
            #requestForm .formRight{
                width:calc(100% - 120px);
            }
            .hideOnMobile{
                display:flex;
            }
            .tooltip{
                margin-top:0;
            }
            .tooltip .tooltiptext {
                  width: 400px;
                  margin-left: -100px;
                             
                  /* Position the tooltip text - see examples below! */
                  position: absolute;
                  z-index: 1;
            }
            .tooltip .tooltiptext::after {
              left: 10%;
            }
        }
        .errorMsg{
            width:100%;
            font-size:16px;
            text-align:center;
        }
        /* large n up breakpoint */
        @media only screen and (min-width: 1351px) {
            .main-container{
                width:1350px;
                padding:30px 40px;
            }
        }