/*
  * Base structure
  */

 .error-explaination {
   border: 5px solid red;
   color: red;
   padding: 10px;
   margin-bottom: 30px;
 }

 .error-explaination h2 {
   color: red;
 }

 /*
  * Global add-ons
  */

 .sub-header {
   padding-bottom: 10px;
   border-bottom: 1px solid #eee;
 }

 /*
  * Forms
  */
.form-actions {
  text-align: center;
}

 /*
  * Sidebar
  */

 /* Hide for mobile, show later */
 .sidebar {
   display: none;
 }
 @media (min-width: 768px) {
   .sidebar {
     position: fixed;
     top: 51px;
     bottom: 0;
     left: 0;
     z-index: 1000;
     display: block;
     padding: 20px;
     overflow-x: hidden;
     overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
     background-color: #f5f5f5;
     border-right: 1px solid #eee;
   }
 }

.sidebar-div {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  background-color: #f5f5f5;
  border-right: 1px solid #eee;;
}

@media (max-width: 767px) {
  .sidebar-div {
    top: -10px;
    margin-bottom: 15px;
    position: relative;
  }
}

 /* Sidebar navigation */
 .nav-sidebar {
   margin-right: -21px; /* 20px padding + 1px border */
   margin-bottom: 20px;
   margin-left: -20px;
 }
 .nav-sidebar > li > a {
   padding-right: 20px;
   padding-left: 20px;
 }
 .nav-sidebar > .active > a,
 .nav-sidebar > .active > a:hover,
 .nav-sidebar > .active > a:focus {
   color: #fff;
   background-color: #428bca;
 }

 .rooming-list {
   margin-right: 0;
   margin-left: 0;
   position: relative;
   padding: 5px 15px 15px;
   background-color: #fff;
   border-color: #ddd;
   border-style: solid;
   border-width: 1px;
   border-radius: 4px 4px 4px 4px;
   -webkit-box-shadow: none;
   box-shadow: none
 }

 .rooming-list h2 {
   margin-top: 5px;
   font-size: 1.25em;
 }

 .remove-room-link {
   font-size: 0.75em
 }

 div.room-item {
   min-height: 20px;
  padding: 0 19px 19px 19px;
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05)
 }

 div.room-item p {
   font-size: 1em;
 }



 .rooming-list div.actions {
   border-top: 1px solid #ddd;
   margin: 0 -15px 0 -15px;
   padding: 10px 10px 0 10px;
 }


 footer {
   margin-top: 20px;
 }

 [data-template] {
   display: none;
 }