* {
        box-sizing: border-box;
      }

      #container {
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
      }

      .clearfix {
        clear: both;
      }

      .hidden {
        display: none;
      }

      #user-info {
        border: 1px solid #00000012;
        border-radius: 4px;
        clear: both;
        margin: 0 auto 20px;
        max-width: 400px;
        padding: 10px;
        text-align: left;
        background-color: #fff !important;
      }

      #user-signed-in h4{ margin-bottom:10px; }
      #user-signed-out h4{ margin-bottom:10px; }

      #email{ font-weight: 600; }
      #sign-out, #continue {
        font-family: 'Inter';
        font-size: 14px;
      }
      #message{ padding-top:3px; padding-bottom:8px; }

      #photo-container {
        background-color: #EEE;
        border: 1px solid #00000012;
        height: 70px;
        width: 70px;
        margin-top: 5px;
        float: left;
        margin-right: 10px;
      }

      #photo {
        height: 100%;
        width: 100%;
        margin: 0;
      }

      #matched{ padding-top:10px; }

      .nav-join{ display:none; }

      @media (max-width: 300px) {
        #photo-container,
        #photo {
          height: 40px;
          width: 40px;
        }
      }
      button.firebaseui-idp-button.mdl-button.mdl-js-button.mdl-button--raised.firebaseui-idp-google.firebaseui-id-idp-button {
        border-radius: 5px;
        font-family: 'Inter';
        padding: 10px;
        text-align: center;    
        border: 1px solid transparent ;
      }
      
      p.firebaseui-tos.firebaseui-tospp-full-message {
        font-family: 'Inter';
        font-size: 13px;
        line-height: 1.5;
      }
      .container-fluid {
        background: #F1F1F2;
      }
      button.firebaseui-idp-button.mdl-button.mdl-js-button.mdl-button--raised.firebaseui-idp-google.firebaseui-id-idp-button:hover {
        border: 1px solid #5D33FB ;
      }

      .mdl-button--raised {
        background: #fff;
        box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
        border: 1px solid #00000012 !important;
        padding: 16px !important;
        box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px !important;
      }
      
      .mdl-button--raised:hover {
        background-color: #f6f6f7 !important;
      }

      span.firebaseui-idp-text.firebaseui-idp-text-long {
        padding-left: 10px !important;
      }