.container {
    margin-top: 0.5em;
    padding: 0.5em 1em 0.5em 2em;
    border: 1px solid #eee;
    border-radius: 20px;
    height: 1010px;
    min-width: 1200px
  }

  .container.below {
    height: auto;
    z-index: 1;
    position: relative;
  }

  #daystitles  {
    text-align: center;
    font-size:1.3em;
  }

  .time div {
    height: 60px;
    width: 60px;
    text-align: center;
  }

  .event {
    border: 2px solid #aaa;
    border-radius: 3px;
    padding: 2px;
    margin: 1px;
    position: absolute;    
    /* min-height: 30px; */
    width: 100%;
    left: 0;
    line-height: 1;
    font-size: 13px;
    overflow: hidden;
    background-color: #b4d4e4;
  }

  #days {
    background-image: url(bk.png);
    background-repeat: repeat;
  }

  #days > .col {
    border: 1px solid #eee;
  }

  #details {
    position:relative;
    top:-100px;    
    height: 820px;
    overflow: scroll;  
    scroll-behavior: smooth;
  }
  #details .title {
    font-size:1.2em;
    font-weight: bold;
  }

  .description {
    border: 2px solid #aaa;
    font-size: 13px;
    padding: 7px;
    margin: 2px 0;
    border-radius: 10px;    
  }

.description.head {
    background-color: yellow;
    font-size: 1em;
    text-align: right;
}

  #grad1, #grad2 {
    height: 100px;
    position:relative
  }
  #grad1 {
    z-index: 1;
    background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
  }
  #grad2 {
    top:-200px;    
    background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  }

  .col > h5 {
    float: left;
  }

  .searchpanel {
    text-align: right;  
  }

  .searchpanel input {
    width: 11em;
  }

  #ui-id-1 {
    text-align: left;
  }

  .add_fav, .chat, .ical  {
    float: right ;
    margin: 0 2px;
  }
  
  #tophead {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin: 20px 0;
  }

  .logo img {
    width: 1.5em;
    position: relative;
    top: -16px;
    
}

  #orcidAuthSuccess {
    margin-top: revert;
  }

  .vicon {
    height: 16px;
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(183deg) brightness(58%) contrast(119%);
  }

  .plot {
    display: inline-flex;
    align-items: center;
  }

  .plot .name {
    text-align: right;
    padding: 1em;
  }

  .ui-dialog-titlebar {
    background: #d1e9fa;

  }

  .plots {
    display: flex;
    flex-direction: column;
    font-size: 14px;
  }

  .bubble {
    position: relative;
    background: #d1e9fa;
    border-radius: .4em;
    padding: 1em;    
    margin-left: 1em;
    margin-top: .5em;
    font-size: 14px;
  }
  
  .bubble:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 0.906em solid transparent;
    border-right-color: #d1e9fa;
    border-left: 0;
    border-top: 0;
    margin-top: -0.453em;
    margin-left: -0.906em;
  }

  .bubble .updated {
    text-align: right;
    font-size: .7em;
    font-style: italic;
  }

  .button-panel {
    text-align: right;
  }

  #dialog-chat {
    width: 700px;
    height: 700px;
    font-size: 15px;
  }

  #dialog-my-chat .name  {
    font-size: 0.8em;
    max-width: 30%;
  }

  #dialog-my-chat .delete {
    border: 10px solid white;
    position: relative;
    left: -10px;
    border-radius: 20px;
}


#add-chat img {
  width: 1em;
}

  #chat-submit fieldset {
        display: flex;
        flex-direction: row;
        align-items: center;    
  }

  #submit-button {
    margin-left: 1em;
  }


  #fcomment {

    height: 100px;
    width: 500px;
  }
    
  nav {
    display: none;
  }

  #mobile {
    display: none;
  }

  @media screen and (max-width:768px) {

    /* #calendar, .width-switch {display: none;} */
    .container, .width-switch {display: none;}

    #mobile {
      display: block;
      text-align: center;
      margin: 5em;
  }

    .container {
      max-width: revert;
    }

    nav {
      display: block;
    }

    .dialog-box {
      width: 98%;
    }

    #fcomment {

      width: 98%;
  
      }


  }


  .molle-regular-italic {
    font-family: "Molle", serif;
    font-weight: 400;
    font-style: italic;
  }

  .logo, .knewave-regular {
    font-family: "Knewave", serif;
    font-weight: 400;
    font-style: normal;
  }
  

  .time .zone {
    font-size: 11px;
    width: auto;
    margin-top: 21px;
    background: #fff;
    z-index: 1;
    position: absolute;
    height: auto;
  }


  .paper p {
    margin: 0;
  }