/*Create a fixed bar at the top of the page.*/
.footer, .header {
  font-size: 18px;
  display: inline-block;
  position: fixed;
  top: 0;
  height: 52px;
  z-index: 9;
}
/*Create a fixed bar at the bottom of the page.*/
.footer {
  top: initial;
  bottom: 0;
}
/*If used with <code>header</code> create a fixed sub-bar at the top of the page, if using with <code>footer</code> creates a fixed sub-bar at the bottom.*/
.header.sub {
  top:52px;
}
.footer.sub {
  top: initial;
  bottom: 52px;
}
/*Used in the parent element of the <code>header</code>, or body element, to define that the page uses <code>header</code>.*/
.has-header {
  padding-top: 52px !important;
}
/*Used in the parent element of the <code>header</code> and <code>sub</code>, or body element, to define that the page uses <code>sub</code>.*/
.has-header.has-sub-header {
  padding-top: 104px !important;
}
/*Used in the parent element of the <code>header</code> and <code>footer</code>, or body element, to define that the page uses <code>header</code> in bottom.*/
.has-footer {
  padding-bottom: 52px !important
}
/*Used in the parent element of the <code>header</code> with <code>sub</code> and <code>bottom</code>, or body element, to define that the page uses <code>sub</code> in bottom.*/
.has-footer.has-sub-footer {
  padding-bottom: 104px !important
}
.header .left, .header .right, .header .title, .header h1, .footer .left, .footer .right, .footer .title, .footer h1 {
  margin-top: 15px;
  margin-bottom: 5px;
}
/*Set a fixed size for an image.*/
.header .avatar {
  height: 40px;
  margin-top: -8px;
  margin-left: 4px;
}
/*Add big border in element.*/
.header .border-big {
  border-width: 2px;
  border-style: solid;
}
.header h2, .footer h2 {
  padding-top: 8px;
  padding-left: 10px;
}
.header p, .footer p {
  padding-left: 10px;
  margin: 0;
  margin-top: -4px;
}
.header .left, .footer .left {
  padding-left: 5px
}
.header .right, .footer .right {
  padding-right: 5px
}
/*Create a title in the header, you can just use h1 element.*/
.header h1, .header .title, .footer h1, .footer .title {
  margin-bottom: 15px;
  padding-left: 10px;
  padding-right: 15px;
  display: inline-block;
}
.header button, .footer button {
  margin-top: -10px;
}
.header button.icon, .footer button.icon {
  font-size: 30px;
  margin-top: -10px;
  z-index: 99;
  background: none;
  border: none;
  padding: 0 6px;
}
.header button.icon:not([class*=red]):not([class*=pink]):not([class*=white]):not([class*=purple]):not([class*=indigo]):not([class*=blue]):not([class*=cyan]):not([class*=teal]):not([class*=green]):not([class*=lime]):not([class*=yellow]):not([class*=amber]):not([class*=orange]):not([class*=brown]):not([class*=grey]):not([class*=black]):not([class*=white]),
.footer button.icon:not([class*=red]):not([class*=pink]):not([class*=white]):not([class*=purple]):not([class*=indigo]):not([class*=blue]):not([class*=cyan]):not([class*=teal]):not([class*=green]):not([class*=lime]):not([class*=yellow]):not([class*=amber]):not([class*=orange]):not([class*=brown]):not([class*=grey]):not([class*=black]):not([class*=white]) {
  color: #fff;
}
.header button.icon.left, .footer button.icon.left,
.header button.icon.right, .footer button.icon.right {
  margin-top: 5px;
  margin-bottom: 5px;
}
.header button.icon.left, .footer button.icon.left {
  margin-left: 5px;
}
.header button.icon.right, .footer button.icon.right {
  margin-right: 5px;
}
.header .title.align-center, .footer .title.align-center,
.header h1.align-center, .footer h1.align-center,
.header p.align-center, .footer p.align-center {
  width: 100%;
  position: inherit;
  padding-right: 15px;
  left: 0;
  z-index: 9;
}
/*Create a floating badge next to an icon.*/
.header .icon-badge, .footer .icon-badge {
  position: absolute;
  margin-left: -6px;
  margin-top: -8px;
  border-radius: 8px;
  z-index: 999;
}
.header .buttons-group, .footer .buttons-group {
  margin-top: 15px;
  margin-left: 5px;
  margin-right: 5px;
}
.header .buttons-group.small, .footer .buttons-group.small {
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
}
.header input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.8);
}
/*Defines a light color for the placeholder.*/
.header input.placeholder-white::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.8);
}
.header input {
  padding: 15px;
  position: absolute;
}
.header .left+input {
  padding-right: 50px;
}