html {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  cursor: crosshair; }

.pull-left {
  float: left; }

.pull-right {
  float: right; }

#theme-1 {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: #212121;
  transition: background-color 0.3s ease;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 300;
  color: #ffffff;
  overflow-x: hidden;
  overflow-y: auto; }
  #theme-1 ::-webkit-scrollbar {
    display: none;
    width: 0 !important; }
  #theme-1 header {
    position: fixed;
    top: 0;
    height: 50px;
    width: 100vw;
    background-color: #EF6C00;
    transition: background-color 0.3s ease;
    box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.5);
    z-index: 100; }
    #theme-1 header .navbar-icon {
      height: 100%;
      width: 50px;
      color: #212121;
      display: inline-block;
      text-align: center;
      font-size: 26px;
      text-decoration: none;
      cursor: pointer;
      line-height: 50px;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; }
    #theme-1 header .branding {
      height: 100%;
      width: auto;
      color: #212121;
      display: inline-block;
      font-size: 26px;
      text-decoration: none;
      cursor: pointer;
      line-height: 50px;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
      transition: background-color 0.5s ease; }
      #theme-1 header .branding:hover {
        background-color: #EF6C00;
        transition: background-color 0s ease; }
  #theme-1.nav-open aside.nav {
    width: 200px; }
    #theme-1.nav-open aside.nav span {
      margin: 0 16px; }
    #theme-1.nav-open aside.nav .nav-detail {
      display: inline-block; }
    #theme-1.nav-open aside.nav a {
      padding: 4px 32px; }
  #theme-1.nav-open .content.content-full {
    margin-left: 232px; }
  #theme-1 aside.nav {
    position: fixed;
    top: 50px;
    display: block;
    left: 0;
    width: 50px;
    height: calc(100vh - 50px);
    outline: 2px;
    transition: all ease 0.3s;
    box-shadow: 8px 0 8px -4px rgba(0, 0, 0, 0.5);
    background-color: #424242;
    z-index: 101; }
    #theme-1 aside.nav ul {
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0; }
      #theme-1 aside.nav ul > li {
        color: #ffffff;
        width: auto;
        height: 32px;
        line-height: 24px;
        transition: all 0.3s ease;
        overflow: hidden; }
        #theme-1 aside.nav ul > li:first-child {
          border: none; }
        #theme-1 aside.nav ul > li:hover {
          color: #212121;
          background-color: #EF6C00;
          transition: background-color 0s ease; }
          #theme-1 aside.nav ul > li:hover > a {
            color: #212121; }
        #theme-1 aside.nav ul > li > a {
          box-sizing: border-box;
          padding: 4px 16px;
          width: 100%;
          display: block;
          color: #ffffff;
          text-decoration: none;
          cursor: pointer;
          text-align: left;
          transition: all 0.3s ease; }
          #theme-1 aside.nav ul > li > a .nav-detail {
            display: none; }
    #theme-1 aside.nav button.btn-theme-picker {
      margin: 0;
      padding: 0;
      border: none;
      width: 100%;
      height: 100%;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold; }
  #theme-1 div.content {
    max-width: 700px;
    margin-top: 82px;
    margin-left: auto;
    margin-right: auto;
    background-color: #303030;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    padding: 16px 32px; }
    #theme-1 div.content.content-full {
      max-width: none;
      margin-left: 82px;
      margin-right: 32px; }
  #theme-1 ul {
    list-style: none;
    padding: 0; }
  #theme-1 a {
    color: #EF6C00;
    transition: color 0.3s ease;
    text-decoration: none; }
  #theme-1 table {
    width: 100%;
    margin: 8px 0; }
    #theme-1 table tr:nth-child(even) {
      background-color: #424242; }
    #theme-1 table tr th {
      padding: 12px 8px;
      color: #757575;
      transition: color 0.3s ease;
      text-align: left; }
    #theme-1 table tr td {
      padding: 12px 8px; }
  #theme-1 input[type="text"] {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #bdbdbd;
    color: #ffffff;
    transition: all 0.3s ease;
    height: 15px; }
    #theme-1 input[type="text"]:focus {
      border-color: #EF6C00; }
  #theme-1 input[type="email"] {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #bdbdbd;
    transition: all 0.3s ease;
    color: #ffffff;
    height: 15px; }
    #theme-1 input[type="email"]:focus {
      border-color: #EF6C00; }
  #theme-1 select {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #bdbdbd;
    transition: all 0.3s ease;
    color: #ffffff;
    height: 18px; }
    #theme-1 select:focus {
      border-color: #EF6C00; }
    #theme-1 select option {
      background-color: #303030;
      color: #ffffff; }
  #theme-1 .checkbox-list {
    margin-top: 16px; }
    #theme-1 .checkbox-list label {
      color: #ffffff;
      width: 116px;
      position: relative;
      overflow: hidden;
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: auto;
      top: 0; }
  #theme-1 label {
    position: absolute;
    transition: all 0.3s ease;
    top: 12px;
    color: #757575;
    font-size: 14px; }
    #theme-1 label.focus {
      top: 0;
      font-size: 12px;
      color: #EF6C00; }
    #theme-1 label.active {
      top: 0;
      font-size: 12px; }
  #theme-1 input[type="submit"] {
    background-color: #EF6C00;
    transition: all 0.3s ease;
    border: none;
    border-radius: 2px;
    margin: 0;
    padding: 4px 8px;
    color: #212121;
    cursor: pointer;
    font-size: 16px; }
  #theme-1 .btn {
    background-color: #EF6C00;
    transition: all 0.3s ease;
    border: none;
    border-radius: 2px;
    margin: 0;
    padding: 4px 8px;
    color: #212121;
    cursor: pointer;
    font-size: 16px; }
    #theme-1 .btn.danger:hover {
      background-color: #D50000; }
  #theme-1 .btn-bar {
    height: 24px;
    margin: 8px 0; }
    #theme-1 .btn-bar .btn {
      height: 100%;
      float: left;
      box-sizing: border-box;
      border-radius: 0;
      background-color: #424242;
      color: #EF6C00; }
      #theme-1 .btn-bar .btn:not(:last-child) {
        margin-right: 2px;
        box-sizing: border-box; }
      #theme-1 .btn-bar .btn.btn-active {
        background-color: #EF6C00;
        color: #212121; }
      #theme-1 .btn-bar .btn.btn-disabled {
        background-color: #424242;
        color: #757575; }
    #theme-1 .btn-bar .btn:first-child {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px; }
    #theme-1 .btn-bar .btn:last-child {
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px; }
  #theme-1 .expandable .expandable-content {
    width: 200px;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    left: 100%;
    position: absolute;
    transform-origin: left;
    background-color: #424242; }
  #theme-1 .expandable:hover .expandable-content {
    transform: scaleX(1); }
  #theme-1 #person div:last-of-type {
    width: 100%; }

button[data-action="change-theme"][data-value="theme-1"] {
  background-color: #EF6C00;
  color: #303030; }

#theme-2 {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: #212121;
  transition: background-color 0.3s ease;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 300;
  color: #ffffff;
  overflow-x: hidden;
  overflow-y: auto; }
  #theme-2 ::-webkit-scrollbar {
    display: none;
    width: 0 !important; }
  #theme-2 header {
    position: fixed;
    top: 0;
    height: 50px;
    width: 100vw;
    background-color: #AA00FF;
    transition: background-color 0.3s ease;
    box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.5);
    z-index: 100; }
    #theme-2 header .navbar-icon {
      height: 100%;
      width: 50px;
      color: #ffffff;
      display: inline-block;
      text-align: center;
      font-size: 26px;
      text-decoration: none;
      cursor: pointer;
      line-height: 50px;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; }
    #theme-2 header .branding {
      height: 100%;
      width: auto;
      color: #ffffff;
      display: inline-block;
      font-size: 26px;
      text-decoration: none;
      cursor: pointer;
      line-height: 50px;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
      transition: background-color 0.5s ease; }
      #theme-2 header .branding:hover {
        background-color: #AA00FF;
        transition: background-color 0s ease; }
  #theme-2.nav-open aside.nav {
    width: 200px; }
    #theme-2.nav-open aside.nav span {
      margin: 0 16px; }
    #theme-2.nav-open aside.nav .nav-detail {
      display: inline-block; }
    #theme-2.nav-open aside.nav a {
      padding: 4px 32px; }
  #theme-2.nav-open .content.content-full {
    margin-left: 232px; }
  #theme-2 aside.nav {
    position: fixed;
    top: 50px;
    display: block;
    left: 0;
    width: 50px;
    height: calc(100vh - 50px);
    outline: 2px;
    transition: all ease 0.3s;
    box-shadow: 8px 0 8px -4px rgba(0, 0, 0, 0.5);
    background-color: #424242;
    z-index: 101; }
    #theme-2 aside.nav ul {
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0; }
      #theme-2 aside.nav ul > li {
        color: #ffffff;
        width: auto;
        height: 32px;
        line-height: 24px;
        transition: all 0.3s ease;
        overflow: hidden; }
        #theme-2 aside.nav ul > li:first-child {
          border: none; }
        #theme-2 aside.nav ul > li:hover {
          color: #ffffff;
          background-color: #AA00FF;
          transition: background-color 0s ease; }
          #theme-2 aside.nav ul > li:hover > a {
            color: #ffffff; }
        #theme-2 aside.nav ul > li > a {
          box-sizing: border-box;
          padding: 4px 16px;
          width: 100%;
          display: block;
          color: #ffffff;
          text-decoration: none;
          cursor: pointer;
          text-align: left;
          transition: all 0.3s ease; }
          #theme-2 aside.nav ul > li > a .nav-detail {
            display: none; }
    #theme-2 aside.nav button.btn-theme-picker {
      margin: 0;
      padding: 0;
      border: none;
      width: 100%;
      height: 100%;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold; }
  #theme-2 div.content {
    max-width: 700px;
    margin-top: 82px;
    margin-left: auto;
    margin-right: auto;
    background-color: #303030;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    padding: 16px 32px; }
    #theme-2 div.content.content-full {
      max-width: none;
      margin-left: 82px;
      margin-right: 32px; }
  #theme-2 ul {
    list-style: none;
    padding: 0; }
  #theme-2 a {
    color: #AA00FF;
    transition: color 0.3s ease;
    text-decoration: none; }
  #theme-2 table {
    width: 100%;
    margin: 8px 0; }
    #theme-2 table tr:nth-child(even) {
      background-color: #424242; }
    #theme-2 table tr th {
      padding: 12px 8px;
      color: #757575;
      transition: color 0.3s ease;
      text-align: left; }
    #theme-2 table tr td {
      padding: 12px 8px; }
  #theme-2 input[type="text"] {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #bdbdbd;
    color: #ffffff;
    transition: all 0.3s ease;
    height: 15px; }
    #theme-2 input[type="text"]:focus {
      border-color: #AA00FF; }
  #theme-2 input[type="email"] {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #bdbdbd;
    transition: all 0.3s ease;
    color: #ffffff;
    height: 15px; }
    #theme-2 input[type="email"]:focus {
      border-color: #AA00FF; }
  #theme-2 select {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #bdbdbd;
    transition: all 0.3s ease;
    color: #ffffff;
    height: 18px; }
    #theme-2 select:focus {
      border-color: #AA00FF; }
    #theme-2 select option {
      background-color: #303030;
      color: #ffffff; }
  #theme-2 .checkbox-list {
    margin-top: 16px; }
    #theme-2 .checkbox-list label {
      color: #ffffff;
      width: 116px;
      position: relative;
      overflow: hidden;
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: auto;
      top: 0; }
  #theme-2 label {
    position: absolute;
    transition: all 0.3s ease;
    top: 12px;
    color: #757575;
    font-size: 14px; }
    #theme-2 label.focus {
      top: 0;
      font-size: 12px;
      color: #AA00FF; }
    #theme-2 label.active {
      top: 0;
      font-size: 12px; }
  #theme-2 input[type="submit"] {
    background-color: #AA00FF;
    transition: all 0.3s ease;
    border: none;
    border-radius: 2px;
    margin: 0;
    padding: 4px 8px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px; }
  #theme-2 .btn {
    background-color: #AA00FF;
    transition: all 0.3s ease;
    border: none;
    border-radius: 2px;
    margin: 0;
    padding: 4px 8px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px; }
    #theme-2 .btn.danger:hover {
      background-color: #D50000; }
  #theme-2 .btn-bar {
    height: 24px;
    margin: 8px 0; }
    #theme-2 .btn-bar .btn {
      height: 100%;
      float: left;
      box-sizing: border-box;
      border-radius: 0;
      background-color: #424242;
      color: #AA00FF; }
      #theme-2 .btn-bar .btn:not(:last-child) {
        margin-right: 2px;
        box-sizing: border-box; }
      #theme-2 .btn-bar .btn.btn-active {
        background-color: #AA00FF;
        color: #ffffff; }
      #theme-2 .btn-bar .btn.btn-disabled {
        background-color: #424242;
        color: #757575; }
    #theme-2 .btn-bar .btn:first-child {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px; }
    #theme-2 .btn-bar .btn:last-child {
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px; }
  #theme-2 .expandable .expandable-content {
    width: 200px;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    left: 100%;
    position: absolute;
    transform-origin: left;
    background-color: #424242; }
  #theme-2 .expandable:hover .expandable-content {
    transform: scaleX(1); }
  #theme-2 #person div:last-of-type {
    width: 100%; }

button[data-action="change-theme"][data-value="theme-2"] {
  background-color: #AA00FF;
  color: #303030; }

#theme-3 {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: #212121;
  transition: background-color 0.3s ease;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 300;
  color: #ffffff;
  overflow-x: hidden;
  overflow-y: auto; }
  #theme-3 ::-webkit-scrollbar {
    display: none;
    width: 0 !important; }
  #theme-3 header {
    position: fixed;
    top: 0;
    height: 50px;
    width: 100vw;
    background-color: #388E3C;
    transition: background-color 0.3s ease;
    box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.5);
    z-index: 100; }
    #theme-3 header .navbar-icon {
      height: 100%;
      width: 50px;
      color: #ffffff;
      display: inline-block;
      text-align: center;
      font-size: 26px;
      text-decoration: none;
      cursor: pointer;
      line-height: 50px;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; }
    #theme-3 header .branding {
      height: 100%;
      width: auto;
      color: #ffffff;
      display: inline-block;
      font-size: 26px;
      text-decoration: none;
      cursor: pointer;
      line-height: 50px;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
      transition: background-color 0.5s ease; }
      #theme-3 header .branding:hover {
        background-color: #388E3C;
        transition: background-color 0s ease; }
  #theme-3.nav-open aside.nav {
    width: 200px; }
    #theme-3.nav-open aside.nav span {
      margin: 0 16px; }
    #theme-3.nav-open aside.nav .nav-detail {
      display: inline-block; }
    #theme-3.nav-open aside.nav a {
      padding: 4px 32px; }
  #theme-3.nav-open .content.content-full {
    margin-left: 232px; }
  #theme-3 aside.nav {
    position: fixed;
    top: 50px;
    display: block;
    left: 0;
    width: 50px;
    height: calc(100vh - 50px);
    outline: 2px;
    transition: all ease 0.3s;
    box-shadow: 8px 0 8px -4px rgba(0, 0, 0, 0.5);
    background-color: #424242;
    z-index: 101; }
    #theme-3 aside.nav ul {
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0; }
      #theme-3 aside.nav ul > li {
        color: #ffffff;
        width: auto;
        height: 32px;
        line-height: 24px;
        transition: all 0.3s ease;
        overflow: hidden; }
        #theme-3 aside.nav ul > li:first-child {
          border: none; }
        #theme-3 aside.nav ul > li:hover {
          color: #ffffff;
          background-color: #388E3C;
          transition: background-color 0s ease; }
          #theme-3 aside.nav ul > li:hover > a {
            color: #ffffff; }
        #theme-3 aside.nav ul > li > a {
          box-sizing: border-box;
          padding: 4px 16px;
          width: 100%;
          display: block;
          color: #ffffff;
          text-decoration: none;
          cursor: pointer;
          text-align: left;
          transition: all 0.3s ease; }
          #theme-3 aside.nav ul > li > a .nav-detail {
            display: none; }
    #theme-3 aside.nav button.btn-theme-picker {
      margin: 0;
      padding: 0;
      border: none;
      width: 100%;
      height: 100%;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold; }
  #theme-3 div.content {
    max-width: 700px;
    margin-top: 82px;
    margin-left: auto;
    margin-right: auto;
    background-color: #303030;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    padding: 16px 32px; }
    #theme-3 div.content.content-full {
      max-width: none;
      margin-left: 82px;
      margin-right: 32px; }
  #theme-3 ul {
    list-style: none;
    padding: 0; }
  #theme-3 a {
    color: #388E3C;
    transition: color 0.3s ease;
    text-decoration: none; }
  #theme-3 table {
    width: 100%;
    margin: 8px 0; }
    #theme-3 table tr:nth-child(even) {
      background-color: #424242; }
    #theme-3 table tr th {
      padding: 12px 8px;
      color: #757575;
      transition: color 0.3s ease;
      text-align: left; }
    #theme-3 table tr td {
      padding: 12px 8px; }
  #theme-3 input[type="text"] {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #bdbdbd;
    color: #ffffff;
    transition: all 0.3s ease;
    height: 15px; }
    #theme-3 input[type="text"]:focus {
      border-color: #388E3C; }
  #theme-3 input[type="email"] {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #bdbdbd;
    transition: all 0.3s ease;
    color: #ffffff;
    height: 15px; }
    #theme-3 input[type="email"]:focus {
      border-color: #388E3C; }
  #theme-3 select {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #bdbdbd;
    transition: all 0.3s ease;
    color: #ffffff;
    height: 18px; }
    #theme-3 select:focus {
      border-color: #388E3C; }
    #theme-3 select option {
      background-color: #303030;
      color: #ffffff; }
  #theme-3 .checkbox-list {
    margin-top: 16px; }
    #theme-3 .checkbox-list label {
      color: #ffffff;
      width: 116px;
      position: relative;
      overflow: hidden;
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: auto;
      top: 0; }
  #theme-3 label {
    position: absolute;
    transition: all 0.3s ease;
    top: 12px;
    color: #757575;
    font-size: 14px; }
    #theme-3 label.focus {
      top: 0;
      font-size: 12px;
      color: #388E3C; }
    #theme-3 label.active {
      top: 0;
      font-size: 12px; }
  #theme-3 input[type="submit"] {
    background-color: #388E3C;
    transition: all 0.3s ease;
    border: none;
    border-radius: 2px;
    margin: 0;
    padding: 4px 8px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px; }
  #theme-3 .btn {
    background-color: #388E3C;
    transition: all 0.3s ease;
    border: none;
    border-radius: 2px;
    margin: 0;
    padding: 4px 8px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px; }
    #theme-3 .btn.danger:hover {
      background-color: #D50000; }
  #theme-3 .btn-bar {
    height: 24px;
    margin: 8px 0; }
    #theme-3 .btn-bar .btn {
      height: 100%;
      float: left;
      box-sizing: border-box;
      border-radius: 0;
      background-color: #424242;
      color: #388E3C; }
      #theme-3 .btn-bar .btn:not(:last-child) {
        margin-right: 2px;
        box-sizing: border-box; }
      #theme-3 .btn-bar .btn.btn-active {
        background-color: #388E3C;
        color: #ffffff; }
      #theme-3 .btn-bar .btn.btn-disabled {
        background-color: #424242;
        color: #757575; }
    #theme-3 .btn-bar .btn:first-child {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px; }
    #theme-3 .btn-bar .btn:last-child {
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px; }
  #theme-3 .expandable .expandable-content {
    width: 200px;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    left: 100%;
    position: absolute;
    transform-origin: left;
    background-color: #424242; }
  #theme-3 .expandable:hover .expandable-content {
    transform: scaleX(1); }
  #theme-3 #person div:last-of-type {
    width: 100%; }

button[data-action="change-theme"][data-value="theme-3"] {
  background-color: #388E3C;
  color: #303030; }

#theme-4 {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: #bdbdbd;
  transition: background-color 0.3s ease;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 300;
  color: #424242;
  overflow-x: hidden;
  overflow-y: auto; }
  #theme-4 ::-webkit-scrollbar {
    display: none;
    width: 0 !important; }
  #theme-4 header {
    position: fixed;
    top: 0;
    height: 50px;
    width: 100vw;
    background-color: #304FFE;
    transition: background-color 0.3s ease;
    box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.5);
    z-index: 100; }
    #theme-4 header .navbar-icon {
      height: 100%;
      width: 50px;
      color: #ffffff;
      display: inline-block;
      text-align: center;
      font-size: 26px;
      text-decoration: none;
      cursor: pointer;
      line-height: 50px;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; }
    #theme-4 header .branding {
      height: 100%;
      width: auto;
      color: #ffffff;
      display: inline-block;
      font-size: 26px;
      text-decoration: none;
      cursor: pointer;
      line-height: 50px;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
      transition: background-color 0.5s ease; }
      #theme-4 header .branding:hover {
        background-color: #304FFE;
        transition: background-color 0s ease; }
  #theme-4.nav-open aside.nav {
    width: 200px; }
    #theme-4.nav-open aside.nav span {
      margin: 0 16px; }
    #theme-4.nav-open aside.nav .nav-detail {
      display: inline-block; }
    #theme-4.nav-open aside.nav a {
      padding: 4px 32px; }
  #theme-4.nav-open .content.content-full {
    margin-left: 232px; }
  #theme-4 aside.nav {
    position: fixed;
    top: 50px;
    display: block;
    left: 0;
    width: 50px;
    height: calc(100vh - 50px);
    outline: 2px;
    transition: all ease 0.3s;
    box-shadow: 8px 0 8px -4px rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
    z-index: 101; }
    #theme-4 aside.nav ul {
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0; }
      #theme-4 aside.nav ul > li {
        color: #424242;
        width: auto;
        height: 32px;
        line-height: 24px;
        transition: all 0.3s ease;
        overflow: hidden; }
        #theme-4 aside.nav ul > li:first-child {
          border: none; }
        #theme-4 aside.nav ul > li:hover {
          color: #ffffff;
          background-color: #304FFE;
          transition: background-color 0s ease; }
          #theme-4 aside.nav ul > li:hover > a {
            color: #ffffff; }
        #theme-4 aside.nav ul > li > a {
          box-sizing: border-box;
          padding: 4px 16px;
          width: 100%;
          display: block;
          color: #424242;
          text-decoration: none;
          cursor: pointer;
          text-align: left;
          transition: all 0.3s ease; }
          #theme-4 aside.nav ul > li > a .nav-detail {
            display: none; }
    #theme-4 aside.nav button.btn-theme-picker {
      margin: 0;
      padding: 0;
      border: none;
      width: 100%;
      height: 100%;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold; }
  #theme-4 div.content {
    max-width: 700px;
    margin-top: 82px;
    margin-left: auto;
    margin-right: auto;
    background-color: #eeeeee;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    padding: 16px 32px; }
    #theme-4 div.content.content-full {
      max-width: none;
      margin-left: 82px;
      margin-right: 32px; }
  #theme-4 ul {
    list-style: none;
    padding: 0; }
  #theme-4 a {
    color: #304FFE;
    transition: color 0.3s ease;
    text-decoration: none; }
  #theme-4 table {
    width: 100%;
    margin: 8px 0; }
    #theme-4 table tr:nth-child(even) {
      background-color: #ffffff; }
    #theme-4 table tr th {
      padding: 12px 8px;
      color: #757575;
      transition: color 0.3s ease;
      text-align: left; }
    #theme-4 table tr td {
      padding: 12px 8px; }
  #theme-4 input[type="text"] {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #9e9e9e;
    color: #424242;
    transition: all 0.3s ease;
    height: 15px; }
    #theme-4 input[type="text"]:focus {
      border-color: #304FFE; }
  #theme-4 input[type="email"] {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #9e9e9e;
    transition: all 0.3s ease;
    color: #424242;
    height: 15px; }
    #theme-4 input[type="email"]:focus {
      border-color: #304FFE; }
  #theme-4 select {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #9e9e9e;
    transition: all 0.3s ease;
    color: #424242;
    height: 18px; }
    #theme-4 select:focus {
      border-color: #304FFE; }
    #theme-4 select option {
      background-color: #eeeeee;
      color: #424242; }
  #theme-4 .checkbox-list {
    margin-top: 16px; }
    #theme-4 .checkbox-list label {
      color: #424242;
      width: 116px;
      position: relative;
      overflow: hidden;
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: auto;
      top: 0; }
  #theme-4 label {
    position: absolute;
    transition: all 0.3s ease;
    top: 12px;
    color: #757575;
    font-size: 14px; }
    #theme-4 label.focus {
      top: 0;
      font-size: 12px;
      color: #304FFE; }
    #theme-4 label.active {
      top: 0;
      font-size: 12px; }
  #theme-4 input[type="submit"] {
    background-color: #304FFE;
    transition: all 0.3s ease;
    border: none;
    border-radius: 2px;
    margin: 0;
    padding: 4px 8px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px; }
  #theme-4 .btn {
    background-color: #304FFE;
    transition: all 0.3s ease;
    border: none;
    border-radius: 2px;
    margin: 0;
    padding: 4px 8px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px; }
    #theme-4 .btn.danger:hover {
      background-color: #D50000; }
  #theme-4 .btn-bar {
    height: 24px;
    margin: 8px 0; }
    #theme-4 .btn-bar .btn {
      height: 100%;
      float: left;
      box-sizing: border-box;
      border-radius: 0;
      background-color: #ffffff;
      color: #304FFE; }
      #theme-4 .btn-bar .btn:not(:last-child) {
        margin-right: 2px;
        box-sizing: border-box; }
      #theme-4 .btn-bar .btn.btn-active {
        background-color: #304FFE;
        color: #ffffff; }
      #theme-4 .btn-bar .btn.btn-disabled {
        background-color: #ffffff;
        color: #757575; }
    #theme-4 .btn-bar .btn:first-child {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px; }
    #theme-4 .btn-bar .btn:last-child {
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px; }
  #theme-4 .expandable .expandable-content {
    width: 200px;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    left: 100%;
    position: absolute;
    transform-origin: left;
    background-color: #ffffff; }
  #theme-4 .expandable:hover .expandable-content {
    transform: scaleX(1); }
  #theme-4 #person div:last-of-type {
    width: 100%; }

button[data-action="change-theme"][data-value="theme-4"] {
  background-color: #304FFE;
  color: #eeeeee; }

#theme-5 {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: #81D4FA;
  transition: background-color 0.3s ease;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 300;
  color: #424242;
  overflow-x: hidden;
  overflow-y: auto; }
  #theme-5 ::-webkit-scrollbar {
    display: none;
    width: 0 !important; }
  #theme-5 header {
    position: fixed;
    top: 0;
    height: 50px;
    width: 100vw;
    background-color: #01579B;
    transition: background-color 0.3s ease;
    box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.5);
    z-index: 100; }
    #theme-5 header .navbar-icon {
      height: 100%;
      width: 50px;
      color: #ffffff;
      display: inline-block;
      text-align: center;
      font-size: 26px;
      text-decoration: none;
      cursor: pointer;
      line-height: 50px;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; }
    #theme-5 header .branding {
      height: 100%;
      width: auto;
      color: #ffffff;
      display: inline-block;
      font-size: 26px;
      text-decoration: none;
      cursor: pointer;
      line-height: 50px;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
      transition: background-color 0.5s ease; }
      #theme-5 header .branding:hover {
        background-color: #01579B;
        transition: background-color 0s ease; }
  #theme-5.nav-open aside.nav {
    width: 200px; }
    #theme-5.nav-open aside.nav span {
      margin: 0 16px; }
    #theme-5.nav-open aside.nav .nav-detail {
      display: inline-block; }
    #theme-5.nav-open aside.nav a {
      padding: 4px 32px; }
  #theme-5.nav-open .content.content-full {
    margin-left: 232px; }
  #theme-5 aside.nav {
    position: fixed;
    top: 50px;
    display: block;
    left: 0;
    width: 50px;
    height: calc(100vh - 50px);
    outline: 2px;
    transition: all ease 0.3s;
    box-shadow: 8px 0 8px -4px rgba(0, 0, 0, 0.5);
    background-color: #E1F5FE;
    z-index: 101; }
    #theme-5 aside.nav ul {
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0; }
      #theme-5 aside.nav ul > li {
        color: #424242;
        width: auto;
        height: 32px;
        line-height: 24px;
        transition: all 0.3s ease;
        overflow: hidden; }
        #theme-5 aside.nav ul > li:first-child {
          border: none; }
        #theme-5 aside.nav ul > li:hover {
          color: #ffffff;
          background-color: #01579B;
          transition: background-color 0s ease; }
          #theme-5 aside.nav ul > li:hover > a {
            color: #ffffff; }
        #theme-5 aside.nav ul > li > a {
          box-sizing: border-box;
          padding: 4px 16px;
          width: 100%;
          display: block;
          color: #424242;
          text-decoration: none;
          cursor: pointer;
          text-align: left;
          transition: all 0.3s ease; }
          #theme-5 aside.nav ul > li > a .nav-detail {
            display: none; }
    #theme-5 aside.nav button.btn-theme-picker {
      margin: 0;
      padding: 0;
      border: none;
      width: 100%;
      height: 100%;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold; }
  #theme-5 div.content {
    max-width: 700px;
    margin-top: 82px;
    margin-left: auto;
    margin-right: auto;
    background-color: #B3E5FC;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    padding: 16px 32px; }
    #theme-5 div.content.content-full {
      max-width: none;
      margin-left: 82px;
      margin-right: 32px; }
  #theme-5 ul {
    list-style: none;
    padding: 0; }
  #theme-5 a {
    color: #01579B;
    transition: color 0.3s ease;
    text-decoration: none; }
  #theme-5 table {
    width: 100%;
    margin: 8px 0; }
    #theme-5 table tr:nth-child(even) {
      background-color: #E1F5FE; }
    #theme-5 table tr th {
      padding: 12px 8px;
      color: #757575;
      transition: color 0.3s ease;
      text-align: left; }
    #theme-5 table tr td {
      padding: 12px 8px; }
  #theme-5 input[type="text"] {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #9e9e9e;
    color: #424242;
    transition: all 0.3s ease;
    height: 15px; }
    #theme-5 input[type="text"]:focus {
      border-color: #01579B; }
  #theme-5 input[type="email"] {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #9e9e9e;
    transition: all 0.3s ease;
    color: #424242;
    height: 15px; }
    #theme-5 input[type="email"]:focus {
      border-color: #01579B; }
  #theme-5 select {
    margin: 16px 0;
    position: relative;
    border: none;
    outline: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 2px;
    transition: border-color 0.3s ease;
    border-bottom: 1px solid #9e9e9e;
    transition: all 0.3s ease;
    color: #424242;
    height: 18px; }
    #theme-5 select:focus {
      border-color: #01579B; }
    #theme-5 select option {
      background-color: #B3E5FC;
      color: #424242; }
  #theme-5 .checkbox-list {
    margin-top: 16px; }
    #theme-5 .checkbox-list label {
      color: #424242;
      width: 116px;
      position: relative;
      overflow: hidden;
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: auto;
      top: 0; }
  #theme-5 label {
    position: absolute;
    transition: all 0.3s ease;
    top: 12px;
    color: #757575;
    font-size: 14px; }
    #theme-5 label.focus {
      top: 0;
      font-size: 12px;
      color: #01579B; }
    #theme-5 label.active {
      top: 0;
      font-size: 12px; }
  #theme-5 input[type="submit"] {
    background-color: #01579B;
    transition: all 0.3s ease;
    border: none;
    border-radius: 2px;
    margin: 0;
    padding: 4px 8px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px; }
  #theme-5 .btn {
    background-color: #01579B;
    transition: all 0.3s ease;
    border: none;
    border-radius: 2px;
    margin: 0;
    padding: 4px 8px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px; }
    #theme-5 .btn.danger:hover {
      background-color: #D50000; }
  #theme-5 .btn-bar {
    height: 24px;
    margin: 8px 0; }
    #theme-5 .btn-bar .btn {
      height: 100%;
      float: left;
      box-sizing: border-box;
      border-radius: 0;
      background-color: #E1F5FE;
      color: #01579B; }
      #theme-5 .btn-bar .btn:not(:last-child) {
        margin-right: 2px;
        box-sizing: border-box; }
      #theme-5 .btn-bar .btn.btn-active {
        background-color: #01579B;
        color: #ffffff; }
      #theme-5 .btn-bar .btn.btn-disabled {
        background-color: #E1F5FE;
        color: #757575; }
    #theme-5 .btn-bar .btn:first-child {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px; }
    #theme-5 .btn-bar .btn:last-child {
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px; }
  #theme-5 .expandable .expandable-content {
    width: 200px;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    left: 100%;
    position: absolute;
    transform-origin: left;
    background-color: #E1F5FE; }
  #theme-5 .expandable:hover .expandable-content {
    transform: scaleX(1); }
  #theme-5 #person div:last-of-type {
    width: 100%; }

button[data-action="change-theme"][data-value="theme-5"] {
  background-color: #01579B;
  color: #B3E5FC; }

/*# sourceMappingURL=main.css.map */