body,div{font-family: -apple-system,BlinkMacSystemFont,segoe ui,roboto,oxygen,cantarell,helvetica neue,ubuntu,sans-serif;}
        .title{font-size:32px;}
        .label{font-weight: bold; padding-right:10px; display: inline;}
        html {
          scroll-behavior: smooth;
        }
        h1{ padding:0px; margin:0px}
        .optional{font-weight:normal;color:#999; padding-left:5px;}
        .attendee{border-top:1px solid #ccc;}
        .attendeesTitle{font-size:1.8em; margin-top:20px; margin-bottom:20px; color:#666;text-align: left !important;}
        .attendeesTitleNoResponses{text-align: center !important; margin-top:40px; margin-bottom:40px; color:#666;font-weight:300;padding-bottom:15px;}
        .canYouMakeIt{ margin-top:30px; margin-bottom:40px; color:#333;}
        .totalGuests{border-top:1px solid #ccc; padding:20px}

        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s;
            }
            .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0;
            }
          .s_grid-container {
            display: grid;
            grid-template-columns: 50px auto;
            grid-gap: 0px;
            padding: 0px;
          }
          .s_grid-container > div {
            background-color: rgba(255, 255, 255, 0.8);
            border-bottom: 1px solid #ebebeb;; 
            padding:10px 0 30px 0;
          }
           
          .s_buddy{ color: #fff;
            border-radius:50px; 
            height:30px; width:30px; 
            text-align: center; 
            padding:5px 5px 5px 5px; 
            line-height: 20px; float: left; margin-right:10px;
              font-size: 14px;
            font-weight: bold;
            text-shadow: 0px 1px 2px rgba(0,0,0,0.15);
          }
        .s_ball0{background-color:#666;}
        .s_ball1{background-color:#5DB500;}
        .s_ball2{background-color:#E95D00;}
      .s_yes{color:#5DB500}
      .s_no{color:#666}
      .s_maybe{color:#E95D00;}
      .s_name{ display:inline;  font-size:1.2em}
      .s_time{color:#7b7d7f; display:inline;  line-height: 14px; font-size:13px}
      .s_guests{font-weight:bold;}
      .b_width{width:100px; margin-top:10px}
      .s_response{color:#7A7A7A;}
      #canyoumakeit{padding-top:50px;}
      .highlight{ background-color: red !important; border:4px;}
      
      
      
/*      NEW      */
      a.maplink {text-decoration:underline; color:#fff;}
a.maplink:hover{text-decoration:none; }
      .locationTitle{font-weight:bold;}
      
    .topNav{background-color:rgba(0,0,0,.2);  font-size:20px;}
    .center{text-align: center;}

    .heroTop{
      text-align: center; 
      padding:65px 10px 60px 10px; 
      text-shadow: 0px 1px 2px rgba(0,0,0,0.15)}
    .heroInput{outline: none;}
    .heroDates{text-transform:uppercase;font-size:24px; text-shadow: 0px 1px 4px rgba(0,0,0,0.95);}

    .container{max-width:600px;}
    .button{font-weight:bold;text-shadow: 0px 1px 2px rgba(0,0,0,0.15); box-shadow:0px 1px 2px rgba(0,0,0,0.15) }
      .timeDisplay{font-size: 30px;}
      .buttonTime{width:36px; height:36px}
      .nowrap{white-space:nowrap;}
      
      .is-wide{width:125px; background-color:#f3f3f3;} 

    @media screen and (max-width: 400px) {
      .container{ padding: 0 10px 0 10px;}
    }


      #container{
         display: grid;
         grid-template-columns: 50px 60px 60px 
        }
        .item{
            text-align: center;       
        }
      
    .top{transition: background-color .75s ease; color:#fff}
    .topNav{background-color:rgba(0,0,0,.25);  font-size:20px;}
    .center{text-align: center;}
    .hero{text-align: center; margin:50px 10px 50px 10px; }
    .heroInput{padding:15px; border-radius: 100px; font-size: 20px; 
      border:none; padding-left:30px; width:100%; max-width:600px;margin:auto; background-color: rgba(255,255,255,.97);}
    .heroInput{outline: none;}
    .tabs{margin:auto; width:100%; max-width:600px;  }
    
    .tabs li a{color:#ffffff; font-weight:bold; text-shadow: 0px 1px 2px rgba(0,0,0,0.15)}
      .tabs li.is-active a{color:#363636;}
    .is-active li a:visited{color:#363636;}

    .container{max-width:600px;}
    .button{font-weight:bold;text-shadow: 0px 1px 2px rgba(0,0,0,0.15); box-shadow:0px 1px 2px rgba(0,0,0,0.15) }
    .timeDisplay{font-size: 30px;}
    .buttonTime{width:30px; height:32px}
    .nowrap{white-space:nowrap;}
    .foot{margin-top:50px; padding-top:100px;; font-size: 0.8em; color:rgba(255,255,255,0.95)}
    input[type="color"]{
      width:30px;
      border:1px solid #fff;
      margin:5px;
      padding:0px !important;
      height:30px;
      border-radius:2px;      
}
      .whiteShadow{color:white; text-shadow: 0 2px 2px rgba(0,0,0,0.5)}
      .circles{width:100px; height:auto;}
      .wrapper{white-space: normal;}
      .level-item{flex-shrink: 1}
      .orangeTitle{color:#333333;font-size:50px; font-weight:700; font-family: Montserrat; text-shadow:0px 2px 0 rgba(0,3px,9px,0.15)}
      .subtext{margin-top:10px}
      h2{margin-top:20px}

 #signoutBox{width:110px; background-color:#fff; border-radius:3px; position:absolute; padding:10px; box-shadow:0 2px 4px rgba(0,0,0,0.4); margin:-25px 0 0 125px; text-align:center}
/*   -----   */