::-webkit-scrollbar {
      width: 5px;
  }
  ::-webkit-scrollbar-track {
      background-color: #ECECEC;
  }
  ::-webkit-scrollbar-thumb {
      background-color: #CBCBCB;
  }
  ::-webkit-scrollbar-thumb:hover {
      background-color: #C8C8C8;
  }
  ::-webkit-selection {
      color: #FFFFFF;
      background: #EF7171;
  }
  * {
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  html,
  body {
      position: relative;
      height: 100%;
  }
  body {
      margin: 30px auto;
      padding: 0;
      width: 600px;
      height: 465px;
      font-size: 13px;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      text-rendering: auto;
      background: #3C3331;
  }
  h3,
  p {
      text-align: center;
      font-family: Roboto;
      font-weight: 300;
  }
  h3 {
      font-weight: 700;
  }
  .window {
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      position: relative;
      width: 100%;
      margin: 0;
      overflow: hidden;
      background: #5D504D;
      border-width: 3px;
      border-color: #5D504D;
      border-style: solid;
      display: block;
      height: 100%;
      position: relative;
      border-radius: 4px;
      box-shadow: 0 1px 5px #100E0E;
  }
  .window .window-drag {
      height: 3em;
      width: 51em;
      -webkit-app-region: drag;
  }
  .window .window-buttons {
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
      height: 36px;
      z-index: 99999;
      -webkit-app-region: no-drag;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  .window .window-buttons #minimize,
  .window .window-buttons #maximize,
  .window .window-buttons #close {
      position: absolute;
      top: 1em;
      right: 1em;
      width: 1em;
      height: 1em;
      text-decoration: none;
      overflow: hidden;
      border-radius: 100%;
  }
  .window .window-buttons #minimize {
      right: 4em;
      background: #16A085;
      color: #16A085;
  }
  .window .window-buttons #maximize {
      right: 2.5em;
      background: #D35400;
      color: #D35400;
  }
  .window .window-buttons #close {
      right: 1em;
      background: #C0392B;
      color: #C0392B;
  }
  .window .widget {
      position: relative;
      width: 100%;
      height: 100%;
      overflow-y: auto;
  }
  @media (max-width: 480px) {
      .window .window-body {
          width: 100%;
      }
  }
  /* APP */

  a {
      color: #217dbb;
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  a:hover,
  a:focus {
      color: #196090;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      margin-top: 0;
      font-family: Roboto;
      color: #666666;
  }
  h1 {
      font-size: 3em;
      line-height: 1;
      padding-top: 0.53em;
      margin-bottom: 0.5em;
  }
  h2 {
      font-size: 2em;
      padding-top: 0.25em;
      margin-bottom: 0.5em;
  }
  h3 {
      font-size: 1.5em;
      line-height: 1;
      padding-top: 0.35em;
      margin-bottom: 0.65em;
  }
  p {
      margin: 0 0 1.5em 0;
  }
  /*  PRELOADER
--------------------*/

  .loaded {
      opacity: 0;
      visibility: hidden;
      filter: alpha(opacity=0);
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  .preloader {
      position: absolute;
      top: 0;
      left: 0;
      background: #EDEDED;
      width: 100%;
      height: 100%;
      z-index: 99999;
  }
  .preloader .preloader_inner {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 1em;
      height: 1em;
      background: #FFD2D2;
      border-radius: 100%;
      -webkit-animation: love 1s infinite linear;
      animation: love 1s infinite linear;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      box-shadow: 0em 0em 0 1em #E8E8E8, 0em 0em 0 2em #EDEDED, 0em 0em 0 3em #EAEAEA, 0em 0em 0 4em #E5E5E5, 0em 0em 0 5em #EAEAEA;
  }
  @-webkit-keyframes love {
      10% {
          box-shadow: 0em 0em 0 1em #E8E8E8, 0em 0em 0 0em #EDEDED, 0em 0em 0 0em #EAEAEA, 0em 0em 0 0em #E5E5E5, 0em 0em 0 0em #EAEAEA;
      }
  }
  @keyframes love {
      10% {
          box-shadow: 0em 0em 0 1em #E8E8E8, 0em 0em 0 0em #EDEDED, 0em 0em 0 0em #EAEAEA, 0em 0em 0 0em #E5E5E5, 0em 0em 0 0em #EAEAEA;
      }
  }
  @-webkit-keyframes preloader {
      50% {
          color: white;
      }
  }
  @keyframes preloader {
      50% {
          color: white;
      }
  }
  #page {
      width: 100%;
      margin: 0 auto;
      overflow-y: auto;
      padding: 0;
      display: block;
      height: 31em;
      background: #F5F5F5;
  }
  #page::-webkit-scrollbar {
      width: 5px;
  }
  #page::-webkit-scrollbar-track {
      background-color: #ECECEC;
  }
  #page::-webkit-scrollbar-thumb {
      background-color: #CBCBCB;
  }
  #page::-webkit-scrollbar-thumb:hover {
      background-color: #C8C8C8;
  }
  .menu {
      margin: 0;
      padding: 0;
  }
  .menu .btn {
      display: inline-block;
      float: left;
      padding: 0.7em;
      outline: none;
      cursor: pointer;
      background: rgba(0, 0, 0, 0);
      border: none;
      color: #B5B5B5;
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  .menu .btn:hover {
      color: #16A085;
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  /* Modal */

  .modal-overlay {
      background: #FFF;
      height: 100%;
      left: 0;
      display: block;
      overflow: auto;
      padding: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  #modal_close {
      position: absolute;
      top: 0;
      right: 0;
      padding: 0.2em;
      background: #F7F4F4;
      border: none;
      font-size: 3em;
      color: #888;
      outline: none;
      cursor: pointer;
      font-family: initial;
  }
  #modal_close:hover {
      color: #f55;
  }
  .modal-content {
      background: #F7F4F4;
      margin: 0 auto;
      overflow: auto;
      overflow-x: hidden;
      position: relative;
      padding: 1em;
      border-radius: 4px;
  }
  .modal-content .modal-body {
      padding: 0;
      margin-top: 2em;
  }
  .modal-body #dbForm label {
      display: block;
      margin: 5px auto;
      padding: 0;
      color: #A0A0A0;
  }
  .modal-body #dbForm input,
  .modal-body #dbForm textarea {
      display: block;
      width: 100%;
      margin: 0.5em auto;
      padding: 0.5em 1em;
      background: #FFFFFF;
      border: 1px solid #E4E4E4;
      color: #555;
  }
  .modal-footer {
      display: block;
      padding: 0.5em;
      margin-top: 1.5em;
  }
  .modal-footer input[type="submit"] {
      border: 1px solid #E4E4E4;
      background: #FFF;
      padding: 0.5em 1em;
      color: #717171;
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  .modal-footer input[type="submit"]:hover {
      border: 1px solid #E4E4E4;
      background: #F2F2F2;
      color: #FF9090;
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
      cursor: pointer;
  }
  .show {
      opacity: 1;
      visibility: visible;
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  #dbSection {
      display: block;
      padding: 0;
  }
  .grid {
      padding: 0;
      margin: 0;
      list-style: none;
      -webkit-column-count: 2;
      -webkit-column-gap: 0.2em;
  }
  .grid li {
      position: relative;
      background: #5D504D;
      border-radius: 4px;
      display: inline-block;
      list-style: none;
      padding: 0.2em;
      margin: 0.2em;
  }
  .grid li:nth-child(4n+1) {
      background: #D35400;
  }
  .grid li:nth-child(4n+2) {
      background: #16A085;
  }
  .grid li:nth-child(4n+3) {
      background: #C0392B;
  }
  .grid li > div {
      padding: 0.5em;
  }
  .grid li > .eventDel {
      position: absolute;
      top: 0;
      right: 0.5em;
      padding: 0;
      color: #fff;
      text-decoration: none;
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
      font-family: initial;
      font-size: 1.5em;
  }
  .grid li > .eventDel:hover {
      color: #EF7171;
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  .grid li > h3 {
      margin: 0;
      padding: 0.5em;
      text-align: left;
      color: #f5f5f5;
  }
  .grid li > .eventDate {
      display: block;
      background: #FFFFFF;
      border-top: 1px solid #ECECEC;
      border-bottom: 1px solid #ECECEC;
      padding: 0.5em;
      color: #C0C0C0;
      overflow: hidden;
  }
  .grid li > .eventDate .in-left {
      float: left;
  }
  .grid li > .eventDate .in-right {
      float: right;
  }
  .grid li .eventDesc {
      color: #777;
      word-break: break-all;
      word-wrap: break-word;
      min-width: 20em;
      min-height: 5em;
      background: white;
  }
  .info {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 21em;
      height: 7em;
      margin: auto;
      display: block;
      background: #FFF;
      padding: 1em;
      border-radius: 4px;
      border: 1px solid #E5E5E5;
      color: #B3ADAD;
  }
  pre {
      display: block;
      width: 100%;
      min-height: 27em;
      padding: 0;
      color: #808080;
      margin: 0;
      word-break: break-word;
  }
  #footer_info {
    color: #8B807D;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    line-height: 1.5em;
    margin-left: 1em;
 }
#footer_info p{
  text-align:left;
}
#footer_info i{
  margin-left:0.2em;
  margin-right:0.2em;
  color:white;
}
#footer_info .tip{
  color:#16A085;
}