body {
  overflow-x: hidden; }

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box; }

.toggle-button {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 38px;
  height: 17px;
  padding: 0px;
  background-image: linear-gradient(180deg, #FFF 3px, transparent 3px, transparent 7px, #FFF 7px, #FFF 10px, transparent 10px, transparent 14px, #FFF 14px);
  background-size: 20px 17px;
  background-position: center center;
  background-repeat: no-repeat; }
  .toggle-button.hidden {
    display: none; }
  .toggle-button.dark {
    background-image: linear-gradient(180deg, #242424 3px, transparent 3px, transparent 7px, #242424 7px, #242424 10px, transparent 10px, transparent 14px, #242424 14px); }
    .toggle-button.dark:after, .toggle-button.dark:before {
      background: #242424; }
  .toggle-button.narrow {
    background-size: 3px 17px;
    width: 20px; }

.content {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  white-space: normal;
  	/* 12.03.2018
      * This was introduced to prevent browsers (namely Safari) from not redrawing
      * the children properly when resizing the UI. For some reason, when the parent
      * is changed in size, not all children behave as expected.
  	 */
  overflow-x: hidden; }

/*# sourceMappingURL=ui-layout.css.map */