/* Position and sizing of burger button */
.bm-burger-button {
    position: fixed;
    width: 36px;
    height: 30px;
    left: 36px;
    top: 25px;
  }
  
  /* Color/shape of burger icon bars */
  .bm-burger-bars {
    background: #9be;
  }
  
  /* Color/shape of burger icon bars on hover*/
  .bm-burger-bars-hover {
    background: #acf;
  }
  
  /* Position and sizing of clickable cross button */
  .bm-cross-button {
    height: 24px;
    width: 24px;
  }
  
  /* Color/shape of close button cross */
  .bm-cross {
    background: #9be;
  }
  
  /*
  Sidebar wrapper styles
  Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases
  */
  .bm-menu-wrap {
    position: fixed;
    height: 100%;
  }
  
  /* General sidebar styles */
  .bm-menu {
    background: #334;
    padding: 2.5em 1.5em 0;
    font-size: 1.15em;
  }
  
  /* Morph shape necessary with bubble or elastic */
  .bm-morph-shape {
    fill: #373a47;
  }
  
  /* Wrapper for item list */
  .bm-item-list {
    color: #b8b7ad;
  }

  
  /* Individual item */
  .bm-item {
    display: inline-block;
    color: #9be;
  }
  
  /* Styling of overlay */
  .bm-overlay {
    background: rgba(0, 0, 0, 0.3);
  }

  #page-wrap {
    height: 100vh;
    overflow: hidden;
  }

#outer-container {
    background-color: #0e1539;
}
/* Pre-login sample page */
.login_screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: #112;
    width: 100vw;
    height: 100vh;
    color: #9be;
}
.main-logo {
    margin-top: 2em;
    width: 70vw;
}
.sampleSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sampleSection, h5 {
    margin: 0;
}
.copy {
    color:#9be;
    text-decoration: none;
}
.loginButton {
    background-color: #112;
    border: none;
    cursor: pointer;
}
.sample-chat {
    width: 60%;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    color: rgba(100,150,255,0.7);
    background-color: rgba(0,0,0,0.5);
    padding: 1em;
    border-radius: 50px;
}
.sample-chat p {
    background-color: rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 0.2em 0.5em;
    margin: 0 5px;
}
.left-side {
    align-self: flex-start;
    display: flex;
    align-items: center;    
}
.right-side {
    align-self: flex-end;
    display: flex;
    align-items: center;
}
.right-side img {
    filter: contrast(5);
}
.sample-profile {
    width: 50px;
}
#headerBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 75px;
    background-color: #334;
    color: #9be;
}

#headerBar .header-logo {
    height: 75px;
}
#headerBar .homeButton img {
    height: 65px;
    border-radius: 0 20px 10px 20px;
    margin-top: 5px
}
#headerBar .side-section {
    width: 100px;
}
#headerBar .logoutButton {
    font-size: 150%;
    margin-right: 1em;
    background-color: #223;
    border: 1px solid #333;
    padding: 0.1em 0.3em;
    border-radius: 10px;
    cursor: pointer;
    color: #9be;
    text-decoration: none;
}
#headerBar .logoutButton:hover {
    background-color: #446;
}

#settings-page {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: calc(100vh - 75px);
    background-color: #112;
    color: #9be;
}
#settings-page .img-holder {
    position: relative;
    height: 100px;
    width: 100px;
}
#settings-page .img-center {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

#settings-page .img-holder .unlink .btn-unlink {
    background-color: #c61515;
    color: white;
    padding: 0.5em 1em;
    cursor: pointer;
    border: 1px solid black;
    border-radius: 5px;
    display: none;
}
#settings-page .img-holder:hover .unlink .btn-unlink {
    display: block;
}
#settings-page .img-holder:hover .logo-img {
    opacity: 0.3;
}
#settings-page .img-holder:hover .img-center {
    opacity: 1;
}
#settings-page .img-holder .logo-img {
    height: 100px;
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 body, #library {
    margin: 0;
    font-family: Ubuntu, "times new roman", times, roman, serif;
    background-color: #112;
}
.no-img {
   background-image: url(/assets/noimg-5a1d7df793b99b9cc6b5e58f25f0b6d5dae052eb2294c73acb3971f92f9fac01.jpg);
   height: 215px;
   width: 460px
}
.no-img-sml {
   background-image: url(/assets/noimg-s-ed26709af47ceba339bb694368995f11b4d2a659312898369cf1aada7fb8ab1b.jpg);
   height: 69px;
   width: 184px
}

/* MDI */
.mdi::before {
   font-size: 24px;
   line-height: 14px;
}
.btn .mdi::before {
   position: relative;
   top: 4px;
}
.btn-xs .mdi::before {
   font-size: 18px;
   top: 3px;
}
.btn-sm .mdi::before {
   font-size: 18px;
   top: 3px;
}
.dropdown-menu .mdi {
   width: 18px;
}
.dropdown-menu .mdi::before {
   position: relative;
   top: 4px;
   left: -8px;
}
.nav .mdi::before {
   position: relative;
   top: 4px;
}
.navbar .navbar-toggle .mdi::before {
   position: relative;
   top: 4px;
   color: #FFF;
}
.breadcrumb .mdi::before {
   position: relative;
   top: 4px;
}
.breadcrumb a:hover {
   text-decoration: none;
}
.breadcrumb a:hover span {
   text-decoration: underline;
}
.alert .mdi::before {
   position: relative;
   top: 4px;
   margin-right: 2px;
}
.input-group-addon .mdi::before {
   position: relative;
   top: 3px;
}
.navbar-brand .mdi::before {
   position: relative;
   top: 2px;
   margin-right: 2px;
}
.list-group-item .mdi::before {
   position: relative;
   top: 3px;
   left: -3px
}