html {
        width:100% !important
    }

    #chartjs-tooltip {
        opacity: 1;
        position: absolute;
        background: rgba(0, 0, 0, .7);
        color: white;
        border-radius: 3px;
        -webkit-transition: all .1s ease;
        transition: all .1s ease;
        pointer-events: none;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
	}
	
	.chartjs-tooltip-key {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 10px;
	}
    
    #updateStats, #updateHeight, #updateGraphStats {
        position: absolute;
        top: 1em;
        width: calc(100% - 4em);
        height: auto;
        margin: 0.5em;
        padding: 2em;
        border: 1px solid #ccc;
        background-color: #f3f3f3;
        box-shadow: 20px 20px 10px 10px #00000050;
        border-radius: 0.2em;
        text-align: center;
    }

    #updateHeight {
        top: 0;
        left: 0;
        margin: 0;
        width: 100%;
        font-size: 0.9em;
        margin-top: 0;
        height: auto;
        padding:1em;
        position: absolute;
    }

    #updateGraphStats {
        font-family: 'Roboto', sans-serif;
        padding: 1em;
    }

    

    .userAttributeSection, .graphAttributeSection {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1em;
        margin-bottom: 1em;
        width:100%
    }

    #userAttributes, #graphAttributes {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 2em;
    }

    #updateGraphStats .sectionLabel {
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 0.5em;
    }


    .attributeLabel, .attributeValue {
        /*display: inline-block;
        width: 13em;
        padding: 0.5em;*/
        border: 1px solid #DDDDDD;
        
        width: auto;
        flex: 1 1 12em;
        text-align: center;
    }

    .attributeLabel {
        display: inline-block;
        font-weight: bold;
    }

    .attributeValue {
        display: inline-block;
    }

    #updateStats input, #updateHeight input {
        font-size: 3em;
        width:90%;
        text-align: center;
        margin-bottom: 0.5em;
        border-radius: 0.2em;
    }

    #updateStats input[type="submit"],#updateHeight input[type="submit"] {
        background-color: #3B5BB3;
        color: #FFFFFF;
        font-size: 2em;
        padding: 0.5em;
    }

    #updateStats input[type="reset"],#updateHeight input[type="reset"] {
        background-color: #841b2a;
        color: #FFFFFF;
        font-size: 2em;
        padding: 0.5em;
    }

    #updateStats input[type="submit"]:hover,#updateHeight input[type="submit"]:hover {
        background-color: #0B5BB3;
        border-color: #3BFBB3;
    }

    #updateStats h1,#updateHeight h1 {
        margin-bottom: 0.2em;
        font-family: Arial, Helvetica, sans-serif;
    }
        
     
    #loginStatus {
    	font-family: 'Roboto', sans-serif;
    }

    #loginEmail {
        display: inline-block;
        font-family: monospace;
        font-size: 0.8em;
    }

    #graphSelector {
        display: inline-block;
        font-family: monospace;
        margin-left: 1em;
    }

    #graphSelect {
        width: auto;
        height: auto;
        font-size: 0.8em;
    }

    #defaultGraph {
        display: inline-block;
        margin-left: 1em;
        font-family: monospace;
        font-size: 0.8em;
    }
    
    #customBtn {
      display: inline-block;
      background: white;
      color: #444;
      width: 190px;
      border-radius: 5px;
      border: thin solid #888;
      box-shadow: 1px 1px 1px grey;
      white-space: nowrap;
    }
    #customBtn:hover {
      cursor: pointer;
    }
    span.label {
      font-family: 'Roboto', sans-serif;
      font-weight: normal;
    }
    span.icon {
      background: url('https://www.nzyou.com/googleAuth/images/g-normal.png') transparent 5px 50% no-repeat;
      display: inline-block;
      vertical-align: middle;
      width: 42px;
      height: 42px;
    }
    span.buttonText {
      display: inline-block;
      vertical-align: middle;
      padding-left: 42px;
      padding-right: 42px;
      font-size: 14px;
      font-weight: bold;
      /* Use the Roboto font that is loaded in the <head> */
      font-family: 'Roboto', sans-serif;    
    }

    /* Make the chart and button block fluid­-width */
    .chart-wrap{
        width:100%;
        max-width:100%;
        position:relative;
    }
    .chart-wrap canvas{
        width:100% !important;   /* grow-shrink with screen */
        height:auto !important;  /* keep aspect ratio */
    }

    #rangeButtons{
        display:flex;
        flex-wrap:wrap;
        gap:0.5em;
        justify-content:center;
    }
    #rangeButtons button{
        flex:1 1 45%;           /* two buttons per row on phones */
        min-width:110px;
        font-size:1em;
        padding:0.4em 0.6em;
    }

    .dataAttributeSection fieldset legend {
        font-size: 1em;
        font-weight: normal;
        text-align: center;
        color: #336699;
        font-family: monospace;
    }


    /* Buttons */
    button,
    input[type="submit"],
    input[type="reset"] {
    border: none;
    border-radius: 3px;
    padding: 0.3em 0.6em;
    font-size: 0.7em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: background-color 0.2s ease;
    }

    input[type="submit"] {
    background-color: #007BFF;
    color: white;
    }

    input[type="submit"]:hover {
    background-color: #0056b3;
    }

    input[type="reset"] {
    background-color: #dc3545;
    color: white;
    }

    input[type="reset"]:hover {
    background-color: #a71d2a;
    }

    .attributeLabel input {
        width: 100%;
    }

    .attributeValue input {
        width: 72%;
    }

    .attributeValue input[disabled], .attributeLabel input[disabled] {
        color:#000;
    }

    .attributeValue select {
        width: 22%;
        font-size: 0.7em;
        padding: 0.2em;
        border-radius: 0.2em;
        border: 1px solid #ccc;
    }
    /* End Buttons */

    #toast {
      visibility: hidden;
      min-width: 200px;
      background-color: #4CAF50;
      color: white;
      text-align: center;
      border-radius: 5px;
      padding: 1em;
      position: fixed;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%) translateY(100%);
      z-index: 1000;
      opacity: 0;
      transition: transform 0.5s ease, opacity 0.5s ease, visibility 0.5s;
    }

    #toast.show {
      visibility: visible;
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    /*Re-style the pop-up forms so they fit*/
    @media (max-width:600px){
        #updateStats,
        #updateHeight,
        #updateGraphStats {
            position: absolute;
            top: 1em;
            width: calc(100% - 2em);
            height: auto;
            margin: 0.5em;
            padding: 0.5em;
            border: 1px solid #ccc;
            background-color: #f3f3f3;
            box-shadow: 20px 20px 10px 10px #00000050;
            border-radius: 0.2em;
            text-align: center;
        }

        #addUserAttributeButtonPanel, #addGraphAttributeButtonPanel {
            width:100%;
            text-align: center;
        }

        .dataAttributeSection {
            border: 1px solid #CCCCCC;
            padding: 0;
        }
        
        #updateStats input,
        #updateHeight input{
            font-size:1.5em;
        }

        .attributeLabel, .attributeValue {
            display: inline-block;
            /*width: calc(100% - 1em);*/
            width: auto;
            flex: 1 1 12em;
            text-align: center;
            border: 1px solid #DDDDDD;
            padding: 0.5em;
        }

        .userAttributeSection, .graphAttributeSection {
            display: flex;
            width:100%;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1em;
            margin-bottom: 1em;
        }
    }

    /*Shrink the top status bar*/
    @media (max-width:600px){
        #loginStatus{
            font-size:0.9em;
            padding:0.4em 0.6em;
        }

        body {
            margin:0;
            margin-right: 5px;
        }
    }

    #canvas{
        width:100% !important;
        height:60vh !important;   /* half of the viewport height */
    }

    #updateButtons {
        text-align: center;
        margin-top: 1em;
    }

    #updateButtons button {
       /*font-size:1.6em; 
        width:10em*/
    }

    #logoutButtonContainer {
        display: inline-block;
        right: 10px;
        position: absolute;
    }

    #downloadCSVLink {
        width: 100%;
        text-align: center;
        margin-top: 2em;
        font-size: 1em;
    }