*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  height: 100%;
  width: 100%;
}

body {
  position: relative;
  font-family: "Open Sans", Verdana;
  font-size: 1.4rem;
  line-height: 1.4;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow-x: hidden;
  overflow-y: hidden;
  height: 100%;
  width: 100%;
  color: #333;
}

strong {
  font-weight: bold;
}
@font-face {
  font-family: "OleoScript";
  src: url("ui/assets/fonts/OleoScript-Regular.ttf");
}
#join {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  background-color: #f27e5a;
  padding-top: 5%;
}
#join.error .join-page .page-container:before {
  flex: 1;
  border-radius: 0.4rem;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 1rem;
  border: 1px solid;
  left: 50%;
  white-space: nowrap;
  content: "There was a problem submitting this form.";
  background-color: #ffe7e7;
  color: #D8000C;
  border-color: #D8000C;
}
#join .join-page {
  height: auto;
  position: relative;
  padding: 0 10rem;
}
#join .join-page .page-container {
  max-width: 100rem;
  position: relative;
  background-color: white;
  border: 1px solid #777;
  box-shadow: 0 0 6rem 0 rgba(0, 0, 0, 0.3);
  border-radius: 0.8rem;
}
#join .join-page .page-title {
  color: #005235;
}
#join .join-page .page-body {
  box-shadow: none;
  position: initial;
  overflow: visible;
  display: flex;
  flex-direction: row-reverse;
}
#join .join-page .button.variant-solid {
  background-color: #013a6d;
  border-color: #02325d;
}
#join .join-page .button.variant-solid:hover {
  background-color: #02325d;
}
#join .join-page .form {
  white-space: nowrap;
  flex-shrink: 0;
}
#join .join-page .form .textbox[name=name]::placeholder {
  opacity: 0;
}
#join .join-page .form .button.variant-hyperlink {
  width: auto;
  height: auto;
}
#join .join-page .human {
  display: none !important;
}

@media only screen and (max-device-width: 600px) {
  #join {
    padding: 0;
    overflow-y: scroll;
  }
  #join .join-page {
    width: 100%;
    padding: 2.5rem;
  }
  #join .join-page .page-header {
    padding: 2rem 2rem 1rem;
    height: auto;
    white-space: normal;
  }
  #join .join-page .page-header .page-title {
    margin: 0;
  }
  #join .join-page .page-body {
    flex-direction: row;
    padding-top: 0;
    overflow-x: hidden;
  }
  #join .join-page .page-body .form {
    table-layout: fixed;
    margin: -1rem;
    width: calc(100% + 2rem);
  }
  #join .join-page .page-body .form .form-field {
    display: flex;
    flex-direction: column;
  }
  #join .join-page .page-body .form .form-field .form-label {
    text-align: unset;
  }
  #join .join-page .page-body .form .form-field.required .form-label .form-label-text:after {
    left: unset;
    right: -1rem;
  }
  #join .join-page .page-body .form .form-field .textbox {
    width: 100% !important;
    box-sizing: border-box;
  }
  #join .join-page .page-body .form .form-field .textbox[name=name]::placeholder {
    opacity: 1;
  }
  #join .join-page .page-body .form .form-field .multifield .textbox {
    width: 50% !important;
  }
  #join .join-page .page-body .form .form-field .form-clarifier {
    display: none;
  }
  #join .join-page .page-body .form .form-field .options-item-text {
    white-space: normal;
  }
  #join .join-page .page-body .form .form-field .options-item-icon::before {
    position: absolute;
    top: 1.2rem;
  }
}
.portal {
  background-color: #777;
  height: 100%;
  padding: 4rem;
}

.portal:empty:before {
  content: "Your session has expired. Please use the portal link you receieved to log in again.";
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 250%;
  color: #555;
  padding: 10%;
}

.portal .page,
.portal:empty:before {
  box-shadow: 0rem 0rem 1rem 0 #555;
  max-width: 100rem;
  margin: 0 auto;
  border: 1px solid #888;
  background-color: white;
  height: 100%;
}

.portal .goal-graph.large {
  position: fixed;
  left: 4rem;
  right: 4rem;
  top: 4rem;
  width: auto;
  bottom: 4rem;
  height: auto;
  padding: 3rem;
  background: white !important;
  z-index: 10;
  box-shadow: 0.4rem 0.4rem 1rem 0 #393939;
  border: 1px solid #393939;
  cursor: default;
}

.portal .goal-graph.large:before {
  padding: 0.8rem 1.2rem;
  content: "Close";
  border: 1px solid #888;
  border-radius: 0.4rem;
  background: #EEE;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-2rem, -50%);
  font-weight: bold;
  cursor: pointer;
}

.portal .goal button {
  font-size: 80%;
  margin-top: 2rem;
}

.portal .notes {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 13;
  background: white;
  margin: 3rem;
  border-radius: 0.4rem;
  box-shadow: 0.4rem 0.4rem 1rem #555;
  flex-direction: column;
}

.portal .notes.on {
  display: flex;
}

.portal .body {
  flex: 1;
  padding: 3rem;
}

.portal .table-cell:first-child {
  width: 12rem;
}

.portal .table-cell .button {
  padding: 0.3rem 0.6rem;
  border: none;
  margin-right: 1rem;
}

.portal .footer {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-2rem, -50%);
}

.portal .footer .button {
  background: #eee;
  font-weight: bold;
}

.portal #overlay {
  z-index: 13;
}

.portal #overlay .page {
  max-width: none;
}

@media only screen and (max-device-width: 600px) {
  .portal {
    padding: 0;
  }

  .portal .page {
    box-shadow: none !important;
    border: none !important;
  }

  .portal .notes {
    margin: 2rem;
    margin-top: 3rem;
  }

  .portal .table-cell:first-child {
    width: auto;
  }
}
#login {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  background-color: #f27e5a;
  padding-bottom: 20%;
}

#login.error .page-container:before,
#login.reset .page-container:before {
  border-radius: 0.4rem;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 1rem;
  border: 1px solid;
  left: 50%;
  white-space: nowrap;
}

#login.error .page-container:before {
  content: attr(data-error);
  background-color: #ffe7e7;
  color: #D8000C;
  border-color: #D8000C;
}

#login.reset .page-container:before {
  content: "An email has been sent to you.";
  background-color: #bff8b0;
  color: #235f00;
  border-color: #235f00;
}

#login .page {
  height: auto;
}

#login .page:before {
  content: "Sperro";
  font-family: OleoScript;
  font-size: 540%;
  color: white;
  text-align: center;
  display: block;
  padding-bottom: 3rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3e%3cpath style='fill:%23ffffff; stroke:none;' d='M614 45C571.775 64.7514 527.796 80.6897 493 113.089C465.693 138.516 450.007 173.646 434.691 207C419.128 240.896 402.332 274.577 388 309C384.769 298.043 390.093 283.908 392.197 273C396.131 252.604 402.101 232.698 408.667 213C412.97 200.091 418.244 187.355 421 174C410.523 176.802 400.667 181.919 391 186.753C364.641 199.934 341.102 217.327 319 236.715C264.628 284.41 223.939 348.214 201.519 417C192.596 444.374 186.698 472.644 181.919 501C178.496 521.308 173.884 542.408 173 563L171 563C171 526.075 173.005 490.408 179.614 454C184.166 428.923 192.602 404.231 196 379C185.012 386.74 175.813 398.412 167.651 409C146.503 436.436 127.016 471.358 121.438 506C118.589 523.697 117.255 542.081 118.039 560C118.319 566.384 119.947 572.584 120 579C112.301 577.171 105.871 572.18 98 571C99.2674 586.517 106.525 601.844 110 617C97.4388 614.668 83.7652 612.548 71 612C73.4357 619.631 79.5902 625.64 84.2654 632C91.6001 641.977 98.1124 652.519 104.681 663C107.92 668.17 114.24 675.838 114.91 682C115.482 687.253 110.436 694.355 108.309 699C102.556 711.564 97.4673 724.414 91.7701 737C74.8191 774.446 60.2921 814.236 50 854C57.7568 856.292 66.1959 853.425 74 852.272C77.021 851.825 80.9269 851.864 83.1566 849.436C86.7812 845.49 88.3443 836.117 89.8557 831C93.4328 818.891 97.6133 806.859 101.947 795C129.733 718.959 163.993 643.948 208.344 576C300.011 435.56 415.312 309.564 561 223.989C599.71 201.252 640.543 181.617 683 166.922C707.101 158.58 731.71 150.421 757 146.439C778.451 143.061 801.316 143 823 143C815.22 146.91 806.321 148.083 798 150.428C782.333 154.844 766.598 159.022 751 163.72C710.734 175.847 670.874 190.933 633 209.258C493.969 276.53 382.192 382.949 286.997 503C254.43 544.07 225.615 587.921 200.691 634C194.593 645.274 188.486 656.532 182.753 668C179.734 674.039 176.189 680.309 175 687C196.515 693.105 218.031 699.17 239 707C233.782 699.654 225.769 693.914 219 688C230.01 685.379 242.718 687 254 687L321 687C315.043 682.083 306.155 679.961 299 677.189C281.957 670.586 264.774 662.987 250 652.116C244.413 648.005 238.279 644.269 235 638C245.703 634.992 256.969 636 268 636C282.492 636 297.61 635.435 312 633.714C363.483 627.557 412.606 612.043 460 591.424C475.265 584.783 490.499 577.617 505 569.424C511.786 565.591 519.162 562.307 524 556C500.013 552.953 476.712 548.601 453 544L453 542C484.948 528.716 518.252 517.496 548 499.55C581.64 479.256 611.068 452.466 643 429.709C660.396 417.312 677.918 405.206 695 392.373C704.129 385.515 715.346 378.368 722 369C684.148 376.341 646.489 382.275 608 384.911C587.937 386.284 568.013 385.105 548 385.001C531.255 384.914 514.025 380.453 498 375.859C491.39 373.964 483.609 372.362 479 367C500.598 366.94 522.323 366 544 366C572.044 366 600.185 366.658 628 362.714C673.855 356.213 720.424 340.333 758 312.714C775.077 300.162 789.778 285.558 804.086 270C815.817 257.243 827.92 243.672 835.627 228C846.32 206.252 850.199 180.876 849.039 157C847.772 130.942 839.728 106.528 819 89.4637C800.629 74.3398 777.495 66.0567 755 59.2801C733.928 52.9321 713.093 49.5765 691 51.0895C661.5 53.1097 634.755 62.3372 614.039 84C603.543 94.9766 594.467 107.343 584.753 119C580.147 124.528 575.869 130.779 570 135C579.245 112.795 591.203 91.0305 602.861 70C605.789 64.7173 608.457 59.3224 611.308 54C612.924 50.9831 614.907 48.4158 614 45z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 22%;
  background-position: 5rem 1rem;
  padding-left: 10rem;
}

#login .page-container {
  width: 40rem;
  position: relative;
  background-color: #f4f4f4;
  border: 1px solid #777;
  box-shadow: 0 0 6rem 0 rgba(0, 0, 0, 0.3);
  border-radius: 0.8rem;
}

#login .page-body {
  box-shadow: none;
  position: initial;
}

#login .page-footer {
  border: none;
  flex-direction: column-reverse;
}

#login .reset.button,
#login.forgot .login.button,
#login.forgot .forgot.button {
  display: none;
}

#login.forgot .reset.button {
  display: block;
}

#login .form {
  border-spacing: 0 1rem;
}

#login .form,
#login .form-value > * {
  width: 100%;
}

#login .form-value > * {
  box-sizing: border-box;
}

#login .form-label {
  display: none;
}

#login .page-footer .button {
  width: 100%;
  margin-bottom: 1rem;
  margin-left: 0;
}

#login .button.variant-solid {
  background-color: #013a6d;
  border-color: #02325d;
}

#login .button.variant-solid:hover {
  background-color: #02325d;
}

#login .button.join {
  border: none;
  width: auto;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: calc(100% + 3rem);
  transform: translateX(-50%);
  padding: 0.5rem 0.8rem;
  color: #FFF;
  font-size: 150%;
  white-space: nowrap;
}
.app {
  height: 100%;
  width: 100%;
  min-width: 105rem;
  min-height: 40rem;
  white-space: pre-wrap;
  background-color: #888;
}

.app.impersonating:before,
.app.impersonating:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  height: 0.5rem;
  background: #F44;
}

.app.impersonating:before {
  top: 0;
}

.app.impersonating:after {
  bottom: 0;
}

.app.impersonating .app-user:before {
  content: attr(data-id);
  opacity: 0.6;
}

.app-header {
  position: relative;
  display: flex;
  padding-top: 10rem;
  z-index: 4;
  background-color: #484848;
  flex-direction: column;
}

.app-header:before {
  content: "";
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3e%3cpath style='fill:%23ffffff; stroke:none;' d='M614 45C571.775 64.7514 527.796 80.6897 493 113.089C465.693 138.516 450.007 173.646 434.691 207C419.128 240.896 402.332 274.577 388 309C384.769 298.043 390.093 283.908 392.197 273C396.131 252.604 402.101 232.698 408.667 213C412.97 200.091 418.244 187.355 421 174C410.523 176.802 400.667 181.919 391 186.753C364.641 199.934 341.102 217.327 319 236.715C264.628 284.41 223.939 348.214 201.519 417C192.596 444.374 186.698 472.644 181.919 501C178.496 521.308 173.884 542.408 173 563L171 563C171 526.075 173.005 490.408 179.614 454C184.166 428.923 192.602 404.231 196 379C185.012 386.74 175.813 398.412 167.651 409C146.503 436.436 127.016 471.358 121.438 506C118.589 523.697 117.255 542.081 118.039 560C118.319 566.384 119.947 572.584 120 579C112.301 577.171 105.871 572.18 98 571C99.2674 586.517 106.525 601.844 110 617C97.4388 614.668 83.7652 612.548 71 612C73.4357 619.631 79.5902 625.64 84.2654 632C91.6001 641.977 98.1124 652.519 104.681 663C107.92 668.17 114.24 675.838 114.91 682C115.482 687.253 110.436 694.355 108.309 699C102.556 711.564 97.4673 724.414 91.7701 737C74.8191 774.446 60.2921 814.236 50 854C57.7568 856.292 66.1959 853.425 74 852.272C77.021 851.825 80.9269 851.864 83.1566 849.436C86.7812 845.49 88.3443 836.117 89.8557 831C93.4328 818.891 97.6133 806.859 101.947 795C129.733 718.959 163.993 643.948 208.344 576C300.011 435.56 415.312 309.564 561 223.989C599.71 201.252 640.543 181.617 683 166.922C707.101 158.58 731.71 150.421 757 146.439C778.451 143.061 801.316 143 823 143C815.22 146.91 806.321 148.083 798 150.428C782.333 154.844 766.598 159.022 751 163.72C710.734 175.847 670.874 190.933 633 209.258C493.969 276.53 382.192 382.949 286.997 503C254.43 544.07 225.615 587.921 200.691 634C194.593 645.274 188.486 656.532 182.753 668C179.734 674.039 176.189 680.309 175 687C196.515 693.105 218.031 699.17 239 707C233.782 699.654 225.769 693.914 219 688C230.01 685.379 242.718 687 254 687L321 687C315.043 682.083 306.155 679.961 299 677.189C281.957 670.586 264.774 662.987 250 652.116C244.413 648.005 238.279 644.269 235 638C245.703 634.992 256.969 636 268 636C282.492 636 297.61 635.435 312 633.714C363.483 627.557 412.606 612.043 460 591.424C475.265 584.783 490.499 577.617 505 569.424C511.786 565.591 519.162 562.307 524 556C500.013 552.953 476.712 548.601 453 544L453 542C484.948 528.716 518.252 517.496 548 499.55C581.64 479.256 611.068 452.466 643 429.709C660.396 417.312 677.918 405.206 695 392.373C704.129 385.515 715.346 378.368 722 369C684.148 376.341 646.489 382.275 608 384.911C587.937 386.284 568.013 385.105 548 385.001C531.255 384.914 514.025 380.453 498 375.859C491.39 373.964 483.609 372.362 479 367C500.598 366.94 522.323 366 544 366C572.044 366 600.185 366.658 628 362.714C673.855 356.213 720.424 340.333 758 312.714C775.077 300.162 789.778 285.558 804.086 270C815.817 257.243 827.92 243.672 835.627 228C846.32 206.252 850.199 180.876 849.039 157C847.772 130.942 839.728 106.528 819 89.4637C800.629 74.3398 777.495 66.0567 755 59.2801C733.928 52.9321 713.093 49.5765 691 51.0895C661.5 53.1097 634.755 62.3372 614.039 84C603.543 94.9766 594.467 107.343 584.753 119C580.147 124.528 575.869 130.779 570 135C579.245 112.795 591.203 91.0305 602.861 70C605.789 64.7173 608.457 59.3224 611.308 54C612.924 50.9831 614.907 48.4158 614 45z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  height: 6rem;
  width: 6rem;
  margin: 1.5rem;
  background-size: 60%;
}

.app-tabs {
  display: flex;
  flex-direction: column;
}

.app-tab {
  width: 9rem;
  height: 9rem;
  color: rgba(255, 255, 255, 0.5);
  border-right: 0.5rem solid transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 0.8rem;
}

.app-tab:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.app-tab.selected {
  cursor: default;
  background-color: rgba(0, 0, 0, 0.3);
  border-color: black;
  opacity: 1;
  color: rgba(255, 255, 255, 0.7);
}

.app-tab-icon {
  display: block;
  font-size: 170%;
  margin-bottom: 1rem;
}

.app-bar {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: auto;
  padding: 2rem 0;
}

.app-bar .button.variant-bubble {
  width: 5rem;
  height: 5rem;
}

.app-bar .button.variant-bubble .button-icon {
  font-size: 150%;
  vertical-align: middle;
}

.app-bar .help .opener-button .button-icon {
  font-size: 180%;
}

.app-user {
  margin-bottom: 1rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-content {
  flex: 1;
  display: flex;
  background-color: inherit;
  flex-basis: auto;
}

.app-modules {
  display: flex;
  flex: 1;
  background-color: inherit;
  width: 0;
}

.app-module {
  display: none;
  flex: 1;
  background-color: inherit;
  width: 0;
}

.app-module.selected {
  display: flex;
}

.app-navigation {
  padding-top: 10rem;
  width: 22rem;
  background-color: inherit;
  position: relative;
}

.app-navigation:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10rem;
  content: "Sperro";
  font-family: OleoScript;
  opacity: 0.8;
  color: white;
  display: flex;
  align-items: center;
  font-size: 330%;
  padding: 0 2rem 0.5rem;
}

.app-navigation .navigation-title {
  display: none;
}

.app-page {
  background-color: #FCFCFC;
  flex: 1;
  width: 0;
}

.app-aside {
  width: 50rem;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-left: 1px solid #444;
  transition: width 0.2s ease-in-out;
}

.app-aside:empty {
  width: 0;
  border: none;
}

.app-module .page-header {
  height: 10rem;
}

.app-module .page-title {
  margin-left: 4rem;
  font-size: 180%;
  font-weight: bold;
}

.app-module .page-aside {
  margin-right: 4rem;
}

.app-module .page-body {
  padding: 3rem 4rem;
  box-shadow: none;
  border-top: 1px solid #DDD;
}

.app-module .page-footer {
  padding: 2rem 4rem;
}

#layout {
  height: 100%;
  width: 100%;
  display: flex;
}

#overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 4;
}

#overlay:empty {
  display: none;
}

#overlay #offline-lock {
  background-color: #BBB;
}

/*Placeholder***************************/
.app.placeholder .app-page.loader:empty {
  opacity: 1;
  background-color: #EEE;
}

.app.placeholder .app-page.loader:before {
  border-color: #AAA;
}

.app.placeholder .app-page.loader:after {
  color: #AAA;
}

#upgrade-block-warning .dynamic-item {
  display: block;
  padding: 0;
  margin: 0 0 1rem;
}

#upgrade-block-warning .dynamic-item:first-child {
  font-weight: bold;
}

/* Mobile */
@media only screen and (max-device-width: 600px) {
  .app {
    min-width: 0;
  }

  .app-header {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
  }

  .app-tab + .app-tab {
    display: none;
  }

  .app-navigation {
    position: absolute;
    left: 9rem;
    top: 0;
    bottom: 0;
  }

  .app-page {
    z-index: 4;
    position: relative;
    left: 0;
    transition: left 0.2s;
  }

  .app-page .page-title:before {
    content: "\f0c9";
    position: absolute;
    font-family: "FontAwesome";
    left: 1rem;
    font-size: 70%;
    padding: 0.5rem;
  }

  .app.peeking .app-page {
    left: 31rem;
  }

  .page-body {
    padding: 2rem;
  }

  #overlay .page {
    padding: 2.5rem !important;
  }

  #overlay .page-container {
    min-width: 30rem !important;
    max-height: 100%;
  }

  #overlay .editor .page-body {
    overflow: auto !important;
  }

  .filter-picker .roster {
    width: 22rem !important;
  }

  .confirmation {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
.banner {
  width: 100%;
  background-color: #ECECEC;
  color: #999;
  border-radius: 0.4rem;
  display: flex;
  border: 1px solid;
  justify-content: space-between;
}

.banner + .banner {
  margin-top: 1rem;
}

.banner-body {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem;
}

.banner-aside {
  padding: 0.5rem 1rem;
  display: flex;
  align-content: center;
  justify-content: center;
}

.banner-title {
  font-size: 120%;
  font-weight: bold;
}

.banner-text {
  margin-top: 0.5rem;
}

.banner-text:empty {
  margin-top: 0;
}

.banner.variant-negative {
  color: #D8000C;
  background-color: #fff8f8;
}

.banner.variant-alert {
  color: #d89400;
  background-color: #fff2d3;
}
.bulk {
  display: flex;
  flex-direction: column;
}

.bulk-insert {
  margin-bottom: 1rem;
}

.bulk-options {
  z-index: 3;
}

.bulk-body {
  flex: 1;
}

.bulk-body .table-body {
  background-color: inherit;
}

.bulk-body .table-body .table-cell.variant-primary {
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
}

.bulk-body .table-body .table-cell.variant-sort {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.bulk-body .table-cell.variant-actions {
  width: 5rem;
}

.bulk .search + .button.bulk-new {
  margin-left: 1rem;
}

.bulk.variant-inline {
  height: auto;
}

.bulk.variant-inline .table {
  height: auto;
  overflow: visible;
}

.bulk.variant-inline .table .table-container {
  overflow: visible;
}

.bulk.variant-inline .table.no-data:empty:before {
  padding: 0;
  position: relative;
}
.card {
  background-color: #FFF;
  border-radius: 0.4rem;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.24);
  transition: all 0.2s ease-in-out;
  margin: 0 1% 2rem 1%;
  min-width: 30rem;
  display: flex;
  flex-basis: 48%;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.card[data-uri] {
  cursor: pointer;
}

.card[data-uri]:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.24);
}

.card-header {
  display: flex;
  padding: 1.5rem;
  border-bottom: 1px solid #DDD;
  background-color: #DDD;
  border-radius: 0.4rem 0.4rem 0 0;
  font-size: 130%;
}

.card-title {
  flex: 1;
}

.card-title-text + .card-title-text {
  font-size: 80%;
}

.card-aside {
  flex-shrink: 0;
}

.card-aside .button.variant-bubble {
  width: 3rem;
  height: 3rem;
  margin-left: 0.5rem;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

.card-body {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
}

.card-body:empty:after {
  content: "No additional details.";
  color: #888;
}

.card-footer {
  padding: 1.5rem 2rem;
  border-top: 1px solid #DDD;
  background-color: #FCFCFC;
  display: flex;
  justify-content: flex-end;
  border-radius: 0 0 0.4rem 0.4rem;
}

.card-footer * + * {
  margin-left: 1rem;
}

.card-footer .variant-primary:first-child,
.card-footer .variant-secondary + .variant-primary {
  margin-left: auto;
}

.card.variant-negative .card-header {
  background-color: #FF5D5D;
  color: #FFF;
}

.card.variant-negative .card-header,
.card.variant-positive .card-header {
  color: #FCFCFC;
}

.card.variant-positive .card-header {
  background-color: #56ad56;
  color: #FFF;
}

.card-body > .table.data:before {
  background-color: #F2F2F2;
}
.color {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.color .color-value {
  padding-right: 3.5rem;
}

.color .color-opener {
  position: absolute;
  right: 0.7rem;
  border: 1px dashed #444;
  border-radius: 0.4rem;
  background-color: rgba(200, 200, 200, 0.5);
}

.color .opener-button {
  padding: 1rem;
  border: none;
  display: block;
}

.color .color-opener.known {
  border-style: solid;
}

.color .opener-body {
  margin-left: 1rem;
}

.color .opener:after {
  right: -1rem !important;
}

.color .opener-body {
  display: block !important;
  visibility: hidden;
}

.color .opener.open .opener-body {
  visibility: visible;
}
.button {
  padding: 0.8rem 1.2rem;
  border: 1px solid #333;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  line-height: inherit;
  color: inherit;
  margin: 0;
  border-radius: 0.4rem;
  font-size: inherit;
  font-family: inherit;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  position: relative;
  background-color: transparent;
}
.button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.button:focus {
  outline: 0;
}
.button.variant-bubble {
  border-radius: 50%;
  border: 0;
  padding: 0;
  position: relative;
}
.button.variant-bubble:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.button.variant-bubble.variant-invert {
  color: rgba(255, 255, 255, 0.8);
}
.button.variant-bubble.variant-invert:hover {
  color: #FFF;
  background-color: rgba(255, 255, 255, 0.2);
}
.button.variant-bubble.variant-reverse > .button-text {
  top: 100%;
}
.button.variant-hyperlink {
  color: blue;
  padding: 0.4rem 0.8rem;
  border: none;
}
.button.variant-hyperlink > .button-text {
  text-decoration: underline;
}
.button.variant-solid, .button.variant-solid:hover {
  background-color: #666;
  border-color: #444;
  color: #FFF;
}
.button.variant-solid:hover {
  background-color: #444;
}
.button.variant-solid[disabled] {
  border-color: #555;
}
.button.variant-solid[disabled], .button.variant-solid[disabled]:hover {
  background-color: #999;
}
.button.variant-borderless {
  border: none;
}
.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  border-style: dashed;
}
.button[disabled]:hover {
  background-color: transparent;
}
.button.variant-bubble[disabled] .button-text {
  display: none;
}
.button.variant-hover-left:hover > .button-text:not(:hover), .button.variant-hover-right:hover > .button-text:not(:hover) {
  display: block !important;
}
.button.variant-bubble > .button-text, .button.variant-hover-left > .button-text, .button.variant-hover-right > .button-text {
  position: absolute;
  text-align: center;
  white-space: nowrap;
  background-color: #393939;
  color: #FCFCFC;
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  margin: 0;
  z-index: 1;
}
.button.variant-bubble > .button-text:after, .button.variant-hover-left > .button-text:after, .button.variant-hover-right > .button-text:after {
  content: "";
  width: 0;
  border: 0.7rem solid transparent;
  position: absolute;
}
.button.variant-hover-left > .button-text, .button.variant-hover-right > .button-text {
  display: none !important;
  top: calc(50% - 1.5rem) !important;
  height: 3rem;
}
.button.variant-hover-left > .button-text:after, .button.variant-hover-right > .button-text:after {
  height: 1.5rem;
  top: calc(50% - .75rem);
}
.button.variant-bubble > .button-text {
  display: none;
  left: 50%;
  top: calc(100%);
  transform: translateX(-50%);
}
.button.variant-bubble:not(.variant-hover-left):not(.variant-hover-right) > .button-text:after {
  height: 0;
  border-bottom-color: #393939;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.button.variant-bubble:hover > .button-text {
  display: block;
  white-space: pre;
}
.button.variant-hover-left > .button-text {
  left: -1.5rem;
  right: auto;
  transform: translateX(-100%);
}
.button.variant-hover-left > .button-text:after {
  border-left-color: #393939;
  left: calc(100% - 1px);
}
.button.variant-hover-right > .button-text {
  right: -1.5rem;
  left: auto;
  transform: translateX(100%);
}
.button.variant-hover-right > .button-text:after {
  border-right-color: #393939;
  right: calc(100% - 1px);
}

.button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.button-icon,
.button-text {
  display: inline-block;
}

.button-icon + .button-text {
  margin-left: 0.6rem;
}

.button-badge {
  border-radius: 1rem;
  position: absolute;
  top: 50%;
  transform: translateY(-100%);
  right: 0rem;
  background-color: #555;
  color: #FFF;
  padding: 0.2rem 0.6rem;
  font-size: 87%;
  transition: opacity 0.2s;
}

.table .button.variant-hover-left > .button-text,
.table .button.variant-hover-right > .button-text {
  font-size: 75%;
}
.collection {
  height: 100%;
  overflow: auto;
}

.collection-body {
  display: flex;
  flex-wrap: wrap;
}

.collection-body:empty:before {
  position: absolute;
  content: attr(data-placeholder);
  left: 0;
  padding: 3rem;
  right: 0;
  text-align: center;
  color: #555;
}

.collection-body > .movable .move-handle {
  cursor: move;
}

.collection-body .movable.moving:after {
  position: absolute;
  border: 2px dashed #0666b3;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.collection.variant-inline {
  height: auto;
}

.collection.variant-inline.loader:empty:before {
  display: none;
}

.collection.variant-inline.loader:empty:after {
  font-size: 100%;
  text-align: left;
  color: #888;
}

.collection.variant-inline .collection-body:empty:before {
  position: relative;
  padding: 0;
  text-align: left;
}

.collection.variant-single .collection-body {
  flex-direction: column;
  flex-wrap: nowrap;
}
.colorpicker {
  min-width: 40rem;
  height: 28rem;
  display: flex;
  background-color: white;
  border: 1px solid #555;
  border-radius: 0.4rem;
}

.colorpicker-preview {
  width: 30%;
  border-right: 1px solid black;
  cursor: pointer;
}

.colorpicker-controls {
  flex: 1;
}

.colorpicker-actions {
  display: flex;
  height: 5rem;
}

.colorpicker-palette {
  position: relative;
  height: 23rem;
  cursor: crosshair;
}

.colorpicker-canvas {
  width: 100%;
  height: 100%;
}

.colorpicker-handle {
  border: 0.2rem solid white;
  border-radius: 50%;
  padding: 0.5rem;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

.colorpicker-slider.slider {
  padding: 2rem;
  flex: 1;
}

.colorpicker-slider .slider-bar {
  height: 1rem;
  background: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia, red);
  border-radius: 0.4rem;
}

.colorpicker-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.colorpicker-buttons .button {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 0.5rem;
}
.date {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.date .date-value {
  padding-left: 3.5rem;
}

.date .date-opener {
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  left: 0.5rem;
}

.date .date-opener .opener-button {
  width: 100% !important;
  height: 100% !important;
}

.date-opener .opener-button .button-icon {
  font-size: 100% !important;
}

.date.invalid .date-opener {
  color: #D8000C;
}

.date input[readonly=readonly] {
  padding-left: 1.2rem;
}

.date input[readonly=readonly] + .opener {
  display: none;
}
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-handle {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.dropdown.readonly .dropdown-handle,
.dropdown.disabled .dropdown-handle {
  cursor: not-allowed;
}

.dropdown-handle:before {
  padding: 0 1rem;
  position: relative;
  top: -0.3rem;
}

.dropdown-text {
  padding-right: 2.5rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.textbox.dropdown-text[readonly] {
  user-select: none;
  background-color: #FFF;
}

.dropdown.disabled .dropdown-text,
.dropdown.readonly .dropdown-text {
  background-color: #EEE;
  cursor: not-allowed;
}

.dropdown.editable .dropdown-handle {
  left: auto;
  border-left: 1px solid #E5E5E5;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.dropdown.editable:hover .dropdown-handle {
  border-left-color: #999;
}

.dropdown.editable .dropdown-text:focus + .dropdown-handle {
  border-left-color: #444;
}

.dropdown.editable .dropdown-text {
  padding-right: 3.9rem !important;
}

.dropdown.editable .dropdown-proxy-item {
  padding-right: 2.4rem !important;
}

.dropdown-proxy {
  overflow: hidden;
  height: 0;
  white-space: nowrap;
  overflow-y: scroll;
}

.dropdown-proxy .dropdown-proxy-item {
  margin: 0 1px;
}

.dropdown-items {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 20rem;
  border: 1px solid #BBB;
  background-color: white;
  border-radius: 0 0 0.4rem 0.4rem;
  overflow-y: auto;
  z-index: 1;
  margin-top: -1px;
  height: 0;
}

.dropdown.open .dropdown-items {
  visibility: visible;
  height: auto;
}

.dropdown.open .dropdown-text {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-item,
.dropdown-proxy-item {
  padding: 0.5rem 1.2rem;
  cursor: pointer;
}

.dropdown-item.hidden {
  display: none;
}

.dropdown-item b {
  font-weight: bold;
  color: #ef6500;
}

.dropdown-item-content {
  display: flex;
  align-items: center;
}

.dropdown-item-text {
  margin-right: 1rem;
}

.dropdown-item-aside {
  margin-left: auto;
  display: flex;
}

.dropdown-item.highlight {
  background-color: #FFE5CC;
}

.dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.dropdown-item:empty:before {
  content: "-";
}

.dropdown ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 1.5rem;
  background: #F4EEF0;
}

.dropdown ::-webkit-scrollbar-thumb {
  background: #C5C0C4;
}

.dropdown ::-webkit-scrollbar-thumb:hover {
  background: #A9A9A9;
}
.datepicker {
  display: inline-flex;
  border: 1px solid #CCC;
  border-radius: 0.4rem;
  flex-direction: column;
  background-color: #FFF;
}

.datepicker-header {
  display: flex;
  padding: 1rem 0.5rem;
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #CCC;
  align-items: center;
}

.datepicker-title {
  font-weight: bold;
  text-align: center;
  flex: 1;
  margin: 0 2rem;
}

.datepicker-title:empty:after {
  content: "?";
  color: rgba(0, 0, 0, 0.5);
}

.datepicker-header .button {
  width: 3rem;
  height: 3rem;
  display: none;
}

.datepicker-body {
  display: flex;
  flex: 1;
  position: relative;
}

.datepicker-months {
  display: flex;
  flex-wrap: wrap;
  width: 15rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-right: 1px solid #CCC;
  padding: 0.5rem;
  justify-content: space-around;
}

.datepicker-month {
  cursor: pointer;
  align-self: center;
  width: 4rem;
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: center;
  margin: 0.25rem;
}

.datepicker-month:hover {
  background-color: rgba(4, 165, 75, 0.2);
}

.datepicker-month.selected {
  background-color: rgba(4, 165, 75, 0.5);
  cursor: default;
}

.datepicker-days {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.datepicker-weekdays {
  display: flex;
  border-bottom: 1px solid #DDD;
  padding: 0 0.5rem;
  background-color: rgba(0, 0, 0, 0.06);
  font-weight: bold;
  color: #777;
  justify-content: space-around;
}

.datepicker-calendar {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.5rem;
}

.datepicker-week {
  display: flex;
  flex: 1;
  justify-content: space-around;
  align-items: center;
}

.datepicker-day {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 4rem;
  height: 4rem;
}

.datepicker-day:empty:after {
  content: "?";
  color: rgba(0, 0, 0, 0.5);
}

.datepicker-weekdays .datepicker-day {
  padding: 1rem;
}

.datepicker-calendar .datepicker-day {
  cursor: pointer;
  border-radius: 50%;
  margin: 0.2rem;
  opacity: 0.3;
  position: relative;
}

.datepicker-calendar .datepicker-day.badge:before {
  content: "";
  background-color: #56AD56;
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
}

.datepicker-calendar .datepicker-day.badge.selected:before {
  background-color: #FFF;
}

.datepicker-calendar .datepicker-day.on {
  opacity: 1;
}

.datepicker-calendar .datepicker-day.today {
  border: 1px solid rgba(255, 0, 0, 0.4);
}

.datepicker-calendar .datepicker-day:hover {
  background-color: rgba(37, 128, 193, 0.2);
}

.datepicker-calendar .datepicker-day.selected {
  background-color: rgba(37, 128, 193, 0.5);
}

.datepicker-calendar .datepicker-day.disabled {
  cursor: default;
  opacity: 0.2;
  text-decoration: line-through;
}

.datepicker-calendar .datepicker-day.disabled:hover {
  background-color: transparent;
}

.datepicker-year {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 9rem;
  background-color: rgba(0, 0, 0, 0.04);
  border-left: 1px solid #CCC;
}

.datepicker-year-text {
  padding: 1rem;
  font-size: 140%;
}

.datepicker-year-text:empty:after {
  content: "?";
  color: rgba(0, 0, 0, 0.5);
}

.datepicker-year > .button {
  color: rgba(0, 0, 0, 0.6);
  margin: 0.5rem 0;
  width: 4rem;
  height: 4rem;
}

.datepicker-footer {
  border-top: 1px solid #DDD;
  background-color: #F8F8F8;
  padding: 1rem 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
}

.datepicker .datepicker-grow {
  position: absolute;
  left: 0.5rem;
  height: 2.5rem;
  width: 2.5rem;
}

/* Small Mode ----------------------------------------------------------------- */
.datepicker.small .datepicker-months,
.datepicker.small .datepicker-year {
  display: none;
}

.datepicker.small .datepicker-header .button {
  display: inline-block;
  margin: -1rem 0;
}
.dictionary {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.dictionary.no-data:empty:before {
  content: attr(data-placeholder);
  color: #555;
}

.dictionary-item {
  display: flex;
}

.dictionary-item[data-uri] {
  cursor: pointer;
}

.dictionary-item[data-uri]:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.dictionary-item + .dictionary-item {
  border-top: 1px solid #DDD;
}

.dictionary-key {
  font-weight: bold;
  padding: 1rem 0;
  vertical-align: top;
}

.dictionary-values-container {
  padding: 1rem 0;
  margin-left: auto;
}

.dictionary-values {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dictionary-value {
  margin-left: 0.5rem;
  text-align: right;
}

.dictionary-value:empty {
  margin-left: 0;
}

.dictionary-value:nth-child(1):last-child:empty:after {
  content: "-";
}

/* Variations ----------------------------------------------------------------- */
.dictionary-item.variant-block {
  flex-direction: column;
}

.dictionary-item.variant-block .dictionary-values-container {
  margin: 0;
  padding: 0;
  margin-bottom: 1.5rem;
}

.dictionary-item.variant-block .dictionary-values {
  justify-content: flex-start;
}

.dictionary-item.variant-block .dictionary-value {
  text-align: justify;
  margin: 0;
}

.dictionary-item.variant-negative {
  color: #D8000C;
}
.editor .tabs-pane.selected .tabs-pane-body {
  overflow: visible;
}

.editor-pane {
  position: relative;
}

.editor.locked .editor-pane:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
}

.editor-separator {
  margin: 2rem 0;
  border-top: 1px dashed #AAA;
}

.editor-prompt {
  margin-bottom: 1.5rem;
}

#overlay .editor.variant-delete .page-container,
#overlay .editor.variant-unlink .page-container,
#overlay .editor.variant-reactivate .page-container,
#overlay .editor.variant-deactivate .page-container {
  max-width: 60rem;
}

#overlay .editor .page-body {
  overflow: visible;
}
.expander {
  position: relative;
  min-height: 3.7rem;
}

.expander-text {
  color: transparent;
  overflow: hidden;
  padding: 0.8rem 1.2rem;
  border: 1px solid transparent;
  box-sizing: border-box !important;
}

.expander-input {
  position: absolute;
  box-sizing: border-box !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  overflow: hidden;
  height: 100%;
}
.flow {
  display: flex;
  height: 100%;
}

.flow-control {
  border-top: 1px solid #CCC;
  padding-bottom: 5rem;
  display: flex;
  flex-direction: column;
}

.flow-tab {
  position: relative;
  padding: 0 2rem;
  text-align: center;
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #CCC;
  font-weight: bold;
  font-size: 110%;
  background-color: #F0F0F0;
  color: #777;
  cursor: pointer;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 8rem;
  user-select: none;
}

.flow-tab:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #DDD;
  width: 0.3rem;
}

.flow-tab:hover {
  background-color: #F5F5F5;
  color: #555;
}

.flow-tab.selected {
  color: #333;
  background-color: #FCFCFC;
}

.flow-tab.selected:after {
  background-color: #0666B3;
}

.flow-body {
  position: relative;
  flex: 1;
  overflow-y: scroll;
  border: 1px solid #CCC;
  padding-bottom: 2rem;
  background-color: #D9D9D9;
}

.flow-footer,
.flow-step {
  padding: 2rem;
}

.flow-header {
  margin: 1.5rem;
}

.flow-footer {
  padding-top: 0;
}

.flow-step {
  padding-top: 1rem;
  margin: 1.5rem;
  border-radius: 0.75rem;
  background-color: white;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.24);
}

.flow-step + .flow-step {
  margin-top: 3rem;
}

.flow-step-header {
  margin-bottom: 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid #BBB;
  display: flex;
  align-items: center;
}

.flow-step-title {
  font-weight: bold;
  font-size: 130%;
  color: #0666B3;
  flex: 1;
  padding: 0.5rem;
  padding-left: 0;
}

.flow-step-aside .button {
  border: none;
}

.flow-step-content:empty {
  color: #AAA;
  border: 1px solid #CCC;
  padding: 1rem;
}

.flow-step-content[data-uri],
.flow-step-content[data-action]:empty {
  border-style: dashed;
  cursor: pointer;
}

.flow-step-content[data-uri]:hover,
.flow-step-content[data-action]:empty:hover {
  background-color: #F8F8F8;
}

.flow-step-content:empty:after {
  content: "No data was found for this section.";
}

.flow-step-content[data-placeholder]:empty:after {
  content: attr(data-placeholder);
}

.flow-section {
  margin-top: 2rem;
  border: 1px solid #E0E0E0;
  border-radius: 0.4rem;
}

.flow-section:first-child {
  margin-top: 0;
}

.flow-section-header {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.6rem 1rem;
  background-color: rgba(110, 166, 209, 0.2);
  border-radius: 0.4rem 0.4rem 0 0;
}

.flow-section-title {
  font-weight: bold;
  color: #666;
  flex: 1;
  padding: 0.8rem 0;
}

.flow-section-subtitle {
  color: #828282;
  background-color: #f5f5f5;
  padding: 1rem 1rem 1.5rem 1rem;
  border-bottom: 1px dashed #E0E0E0;
}

.flow-section.inert .flow-section-aside,
.flow-step.inert .flow-step-aside {
  display: none;
}

.flow-section-aside .button,
.flow-editor-actions .button {
  border: none;
}

.flow-section.editing .flow-section-aside .button + .button,
.flow-editor-actions .button + .button {
  margin-left: 0.5rem;
}

.flow-section-content {
  padding: 1rem;
  position: relative;
}

.flow-section-content.editable,
.flow-section-content.editing {
  min-height: 8rem;
}

.flow-section-content.editable,
.flow-section-content[data-uri],
.flow-section-content[data-action]:not(.bare),
.flow-section-content.inline-edit {
  cursor: pointer;
  border-style: dashed;
}

.flow-section-content.editable:hover,
.flow-section-content[data-uri]:hover,
.flow-section-content[data-action]:not(.bare):hover {
  background-color: #F8F8F8;
}

.flow-section-content.editable .flow-section-text:empty:after {
  content: "Click to edit this section.";
  color: #AAA;
}

.flow-section-content.editing .flow-section-text:empty:after {
  content: " ";
}

.form.flow-editor {
  display: none;
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: auto;
}

.flow-section-content.editing .form.flow-editor {
  display: block;
}

.flow-editor-fields {
  width: 100%;
  height: 100%;
}

.textbox.flow-editor-value {
  padding: 0;
  width: 100%;
  height: 100%;
  border: none;
  line-height: inherit;
}

.flow-editor-actions {
  position: absolute;
  top: -5.2rem;
  right: 0rem;
  cursor: default;
}

.flow-editor.locked .flow-editor-actions {
  display: none;
}

.flow-section > .flow-section-content:first-child .flow-editor-actions {
  top: -7.7rem;
}

.flow-editor.locked:after {
  position: absolute;
  content: "";
  background-color: rgba(0, 0, 0, 0.05);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: -1rem;
}

.flow-section.editing .flow-section-content,
.flow-section-content.editing {
  border-color: #0666B3;
  border-style: solid !important;
}

.flow-section.editing-bulk .flow-section-content {
  padding: 0;
}

.flow-section-content.editing:hover {
  background-color: inherit !important;
}

.flow-section-content.editing .flow-section-text {
  color: transparent;
}

.flow-section-content.bare {
  padding: 0;
  border: none;
}

.flow-section-content .table.data:before {
  background-color: white;
  border: 1px solid #DDD;
  border-bottom-width: 0;
}

.flow-section-content > .table.no-data:empty:before {
  color: #AAA;
  text-align: left;
}

.flow-section-content > .table.loader:empty {
  opacity: 1;
}

.flow-section-content > .table.loader:empty:before {
  display: none;
}

.flow-section-content > .table.loader:empty:after {
  text-align: left;
  color: #AAA;
  content: "Loading...";
  font-size: 100%;
}

/* Inline Editing ---------------------------------------------------------- */
.flow-section.editing .flow-section-content {
  cursor: default;
}

.flow-section.editing .flow-section-content {
  position: relative;
  cursor: default;
  border-style: solid;
}

.flow-section.editing .flow-section-content:hover {
  background-color: inherit;
}

.flow-section-content.inline-edit:hover {
  background-color: #F8F8F8;
}

.flow-section.locked .flow-section-aside .button {
  visibility: hidden;
}

.flow-section.locked .flow-section-content:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: -1rem;
}

.flow-section .dictionary-item {
  margin-left: 1rem;
}

.flow-section .form-label {
  margin-left: 1rem;
}
.form {
  display: table;
  border-spacing: 1rem;
  width: 100%;
  position: relative;
}

.form-field {
  display: table-row;
}

.form-field.hidden {
  display: none !important;
}

.form-label,
.form-value {
  display: table-cell;
  position: relative;
  vertical-align: top;
}

.form-label {
  text-align: right;
  font-weight: bold;
}

.form-label-text {
  margin: 0.8rem 0;
  display: inline-block;
  position: relative;
}

.form-value > * {
  position: relative;
}

.form-value > .dynamic-item:first-child:last-child {
  padding: 0.8rem 0;
}

.form-value:empty:after {
  content: "-";
  padding: 0.8rem 0;
  display: block;
}

.form-fieldset {
  position: relative;
  border: 1px solid #EEE;
  background-color: #FCFCFC;
  padding: 1rem;
  margin-top: 1rem;
  padding-top: 1.5rem;
}

.form-fieldset + .form-fieldset {
  margin-top: 3rem;
}

.form-fieldset-title {
  position: absolute;
  font-size: 140%;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.8);
  top: -1.5rem;
  left: 1.5rem;
  padding: 0 0.7rem;
  border-radius: 0.4rem;
}

.form-clarifier {
  display: inline-block;
  padding: 0 1rem;
  color: #888;
}

.form-button {
  width: 3rem;
  height: 3rem;
  margin: 0.3rem 0;
  margin-left: 0.5rem;
  vertical-align: top;
}

.form-text {
  display: table-caption;
  margin-bottom: 1rem;
}

/* Validation ----------------------------------------------------------------- */
.form-field.required .form-label .form-label-text:after {
  color: #D44;
  content: "*";
  position: absolute;
  left: -1rem;
  top: 0;
}

.form-value[data-message] > * {
  position: relative;
}

.form-value[data-message]:after {
  content: attr(data-message);
  display: block;
  position: absolute;
  padding: 0 0.4rem;
  margin: 0.3rem 0.5rem;
  border-radius: 0.4rem;
  white-space: nowrap;
  font-weight: bold;
  background-color: #ffe7e7;
  color: #D8000C;
  box-shadow: none;
  border: none;
  top: -1rem;
  left: 0;
  font-size: 90%;
}

/* Variant ----------------------------------------------------------------- */
.form.variant-inline {
  display: block;
}

.form.variant-inline .form-text {
  display: block;
}

.form.variant-inline .form-fieldset {
  flex: 1;
  background-color: #FFF;
  border: none;
  padding: 0;
  margin: 0;
}

.form.variant-inline .form-fieldset + .form-fieldset {
  margin-left: 4rem;
}

.form.variant-inline .form-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4.5rem;
}

.form.variant-inline .form-field + .form-field {
  border-top: 1px solid transparent;
}

.form.variant-inline .form-label {
  display: flex;
  align-items: center;
  text-align: left;
}

.form.variant-inline .form-label-text {
  margin: 0;
}

.form.variant-inline .form-value {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.form.variant-columns {
  display: flex;
}

.form.variant-columns .form-value[data-message]:after {
  left: auto;
  right: 0;
}
.filters {
  display: flex;
  white-space: nowrap;
  width: 100%;
}

.filters-picker {
  flex: 0;
  margin-left: 1rem;
}

.filter-picker-header {
  padding: 1rem 1rem 0;
}

.filter-picker-header .button {
  width: 100%;
}

.filters-items {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  width: 0;
  align-items: center;
}

.filters-item {
  display: none;
  flex-shrink: 1;
  position: relative;
  margin-left: 0.8rem;
}

.filters-item.on {
  display: block;
}

.filters-item-handle > .opener-button {
  border: none;
  padding: 0.5rem 0.8rem;
}

.filters-item.active .filters-item-handle > .opener-button {
  color: white;
  background-color: #666;
}

/* Filter-Picker Styling */
.filter-picker {
  display: inline-flex;
  border: 1px solid #CCC;
  border-radius: 0.4rem;
  flex-direction: column;
  background-color: #FFF;
}

/* Custom Form Field Styles */
.filter-picker .options {
  min-width: 17rem;
}

.filter-picker .roster {
  width: 25rem;
}

/* Footer Styles */
.filter-picker .filter-picker-footer {
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid #DDD;
  background-color: #FCFCFC;
}

.filter-picker .filter-picker-footer .button:not(:last-child) {
  margin-right: 1rem;
}

/* Validation Styles */
.filters .form-value[data-message]:after {
  left: auto;
  right: 100%;
}

.filters .form-value[data-message]:before {
  right: 100%;
  width: 1rem;
}
.growl {
  position: relative;
  pointer-events: auto;
  z-index: 10;
  transition: left 0.2s ease-out;
  left: 100%;
}
.growl.active {
  left: 0;
}
.growl:first-child {
  margin-top: auto;
}
.growl:nth-last-child(n+2) {
  margin-bottom: -7.5rem;
}
.growl-container {
  box-shadow: 0 0 2rem -0.5rem rgba(0, 0, 0, 0.75);
  background-color: #FFF;
  width: 35rem;
  height: 15rem;
}
.growl-header {
  background-color: #DDD;
  height: 5rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  position: relative;
  z-index: 3;
}
.growl-icon {
  position: relative;
  height: 100%;
  color: #FFF;
  font-size: 200%;
  width: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.growl-title {
  color: #FFF;
  font-size: 160%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.growl-aside {
  margin-left: auto;
  align-items: center;
  margin-right: 1.5rem;
  margin-left: auto;
}
.growl-close {
  color: rgba(255, 255, 255, 0.8);
  width: 3.5rem;
  height: 3.5rem;
}
.growl-close .button-icon {
  font-size: 130%;
}
.growl-body {
  padding: 2rem;
  position: relative;
  box-shadow: 0 2rem 1rem -2rem rgba(0, 0, 0, 0.2) inset;
  flex: 1;
  overflow: auto;
}

.growls {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  bottom: 0;
  padding-bottom: 5rem;
  padding-right: 5rem;
  pointer-events: none;
}
.growls.hidden {
  display: none;
}
.image[data-uri] {
  cursor: pointer;
}

.image.variant-bordered {
  border: 1px solid #DDD;
}
.icons[data-uri] {
  cursor: pointer;
}
.lookup {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.lookup .lookup-icon {
  color: #f15858;
  display: none;
  width: 2.5rem !important;
  height: 2.5rem !important;
  position: absolute;
  left: 0.5rem;
}

.lookup .lookup-icon .button-icon {
  font-size: 130% !important;
}

.lookup-value[readonly] ~ .lookup-text .search-icon {
  display: none;
}

.lookup-value[readonly] ~ .lookup-icon {
  display: inline;
}

.lookup .textbox.search-text[readonly] {
  background-color: #FFF;
}

.lookup.readonly .lookup-icon {
  opacity: 0.5;
  cursor: default;
  color: #888;
  background-color: white;
}

.lookup.readonly .textbox.search-text {
  background-color: #EEE;
  cursor: not-allowed;
}
.menu-items {
  background-color: #FCFCFC;
  border: 1px solid #393939;
  border-radius: 0.4rem;
  padding: 1rem;
  font-size: 90%;
  color: #666;
  display: flex;
  flex-direction: column;
}

.menu-item {
  border-color: transparent;
  border-radius: 0;
  padding: 1rem;
  white-space: nowrap;
  text-align: left;
  display: flex;
  align-items: center;
}

.menu-item:hover {
  border-color: #AAA;
}

.menu-item .button-icon {
  font-size: 150%;
  width: 3rem;
  text-align: center;
}
.multifield {
  display: inline-block;
}

.multifield > :not(:first-child) .textbox,
.multifield > .textbox:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.multifield > :not(:last-child) .textbox,
.multifield > .textbox:not(:last-child) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.multifield > :not(:first-child) {
  margin-left: -1px;
}

.multifield .options {
  border-radius: 0;
}

.multifield .options:last-child {
  border-radius: 0 0.4rem 0.4rem 0;
}

.multifield .options:first-child {
  border-radius: 0.4rem 0 0 0.4rem;
}
.navigation {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: inherit;
}

.navigation-title {
  height: 6rem;
  color: #FFF;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
}

.navigation-title-text,
.navigation-title .button-icon {
  font-size: 150%;
}

.navigation-title .button {
  margin-left: auto !important;
  margin-right: -0.5rem;
  width: 4rem;
  height: 4rem;
}

.navigation.editing .navigation-title .button,
.navigation.editing .navigation-title .button:hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: #555;
}

.navigation .navigation-title .button.history-back {
  position: relative;
  left: 2.5rem;
  z-index: 4;
  opacity: 1;
  width: 3rem;
  height: 3rem;
  background-color: #fff;
}

.navigation .navigation-title .button.history-back:disabled {
  color: #ccc;
}

.navigation .button.history-back {
  color: #0666B3;
}

.navigation .navigation-title .button.history-back:hover:enabled {
  background-color: #eee;
}

.navigation .navigation-title .button.history-back .button-icon {
  font-size: 125%;
}

.navigation-search {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.navigation-search .search-text {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.4rem 0 0 0.4rem;
  color: #FFF;
  border: none;
}

.navigation-search .search-text ~ .search-icon {
  color: #FEFEFE;
}

.navigation-search .search-text::placeholder {
  color: #FEFEFE;
}

.navigation-search .search-text::-ms-input-placeholder {
  color: #FEFEFE;
}

.navigation-search .search-text:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
}

.navigation-search .search-text:focus {
  background-color: #FEFEFE;
  color: #444;
}

.navigation-search .search-text:focus::placeholder {
  color: #AAA;
}

.navigation-search .search-text:focus::-ms-input-placeholder {
  color: #AAA;
}

.navigation-search .button {
  border-radius: 0 0.4rem 0.4rem 0;
  background-color: rgba(255, 255, 255, 0.2);
  border-left: 1px dashed rgba(255, 255, 255, 0.2);
  width: 4rem;
  color: #FEFEFE;
}

.navigation-search .search-results {
  width: calc(100% + 4rem);
  max-height: 35rem;
}

.navigation-list {
  color: rgba(255, 255, 255, 0.8);
  overflow-y: auto;
  padding-bottom: 3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.navigation-footer {
  flex: 1;
}

.navigation-link.hidden ~ .navigation-footer:before,
.navigation-group.hidden ~ .navigation-footer:before,
.navigation-group.child-hidden ~ .navigation-footer:before {
  content: "(some items are hidden)";
  padding: 3rem 0;
  text-align: center;
  display: block;
  opacity: 0;
  transition: all 0.4s;
}

.navigation:hover .navigation-link.hidden ~ .navigation-footer:before,
.navigation:hover .navigation-group.hidden ~ .navigation-footer:before,
.navigation:hover .navigation-group.child-hidden ~ .navigation-footer:before {
  opacity: 0.6;
}

.navigation-link-aside {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.navigation-arrow {
  padding: 0 1.5rem;
}

.navigation-badge {
  border-radius: 2.5rem;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0.2rem 0.75rem;
  margin-top: -0.2rem;
  margin-bottom: -0.2rem;
  margin-right: 0.5rem;
  left: 1rem;
  position: relative;
  font-weight: bold;
  opacity: 1;
}

.navigation-badge:empty {
  opacity: 0.5;
}

.navigation-badge:empty:after {
  content: "?";
}

.navigation.editing .navigation-badge,
.navigation.editing .navigation-arrow {
  display: none !important;
}

.navigation-switch {
  display: none;
  width: 3rem;
  height: 3rem;
  margin-top: -1rem;
  margin-bottom: -1rem;
  margin-right: 1rem;
  background-color: rgba(255, 255, 255, 0.2);
}

.navigation-switch:hover {
  color: #555 !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
}

.navigation-link.hidden .navigation-switch,
.navigation-group.hidden .navigation-link.toggle .navigation-switch {
  color: transparent !important;
}

.navigation.editing .navigation-switch {
  display: block;
}

.navigation-group-items .navigation-arrow {
  color: rgba(255, 255, 255, 0.3);
}

.navigation-group.recent .navigation-group-items:empty:after {
  content: "As you navigate, pages that might be hard to get back to will show up here.";
  text-align: center;
  padding: 1rem;
  opacity: 0.6;
  display: block;
}

.navigation-arrow.fa-angle-up,
.navigation-group.expanded .fa-angle-down {
  display: none;
}

.navigation-arrow.fa-angle-down,
.navigation-group.expanded .fa-angle-up {
  display: block;
}

.navigation-link {
  padding: 1rem 0 1rem 1.5rem;
  cursor: pointer;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.navigation-link.hidden,
.navigation-group.hidden {
  display: none;
  opacity: 0.4;
}

.navigation-link,
.navigation.editing .navigation-link.hidden {
  display: flex;
}

.navigation.editing .navigation-group.hidden {
  display: block;
}

.navigation-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #FFF;
}

.navigation-group.expanded .navigation-link.toggle {
  background-color: rgba(0, 0, 0, 0.05);
}

.navigation-link.selecting {
  background-color: rgba(0, 0, 0, 0.05);
}

.navigation-link.selected {
  background-color: rgba(0, 0, 0, 0.15);
  cursor: default;
  color: #FFF;
}

.navigation.editing .navigation-link {
  background-color: inherit;
  color: inherit;
  cursor: default;
}

.navigation-group-items {
  height: 0;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.navigation-group.expanded .navigation-group-items,
.navigation.editing .navigation-group-items {
  height: auto;
  padding: 1.5rem 0;
  box-shadow: inset 0 1.5rem 0.4rem -1rem rgba(0, 0, 0, 0.05);
}

.navigation.editing .navigation-group.hidden + .navigation-group-items {
  display: none;
}
.opener {
  position: relative;
  display: inline-block;
}

.opener > .opener-body {
  position: absolute;
  display: none;
  z-index: 3;
}

.opener.open > .opener-body {
  display: block;
}

.opener.open .opener-button.variant-bubble .button-text {
  display: none;
}

.opener.open:after {
  content: "";
  height: 0;
  width: 0;
  border: 0.7rem solid transparent;
  position: absolute;
}

/* POSITIONING ---------------------------------------------------------------- */
.opener.open-down .opener-body {
  top: 100%;
}

.opener.open-down:after {
  border-bottom-color: #393939;
  bottom: 0;
}

.opener.flow-down .opener-body {
  top: 0;
}

.opener.open-up .opener-body {
  bottom: 100%;
}

.opener.open-up:after {
  border-top-color: #393939;
  top: 0;
}

.opener.open-down:after,
.opener.open-up:after {
  left: 50%;
  transform: translateX(-50%);
}

.opener.flow-up .opener-body {
  bottom: 0;
}

.opener.flow-left .opener-body {
  right: 0;
}

.opener.open-left .opener-body {
  right: 100%;
}

.opener.open-left:after {
  border-left-color: #393939;
  left: 0;
}

.opener.open-right .opener-body {
  left: 100%;
}

.opener.open-right:after {
  border-right-color: #393939;
  right: 0;
}

.opener.flow-right .opener-body {
  left: 0;
}

.opener.open-right:after,
.opener.open-left:after {
  top: 50%;
  transform: translateY(-50%);
}

.opener.flow-center .opener-body {
  transform: translateX(-50%);
}
.options {
  background-color: #FFFFFF;
  display: inline-block;
  border: 1px solid #BBB;
  border-radius: 0.4rem;
  position: relative;
}

.options:hover {
  border-color: #999;
}

.options.readonly,
.options.disabled {
  background-color: #EEE;
  cursor: not-allowed;
}

.options.disabled:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.options-items:empty {
  padding: 0.8rem 1.2rem;
}

.options-items:empty:after {
  content: "...";
}

.options-item {
  cursor: pointer;
  padding: 0.8rem 1.2rem;
  border-style: solid;
  border-color: #CCC;
  border-top-width: 1px;
  white-space: nowrap;
}

.options.readonly .options-item {
  cursor: not-allowed;
}

.options-item:first-child {
  border-top-width: 0;
  border-radius: 0.4rem 0.4rem 0 0;
}

.options-item:last-child {
  border-radius: 0 0 0.4rem 0.4rem;
}

.options-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.options.readonly .options-item:hover {
  background-color: transparent;
}

.options-item-text {
  display: inline-block;
  margin-left: 1rem;
}

.options-item-icon {
  width: 1.2rem;
}

.options-item-icon.unchecked {
  color: #CCC;
}

.options-item-icon.checked {
  color: #0666b3;
}

.options-item-value {
  display: none;
}

.options-item-value:checked ~ .options-item-icon.unchecked,
.options-item-icon.checked {
  display: none;
}

.options-item-value:checked ~ .options-item-icon.checked,
.options-item-icon.unchecked {
  display: inline-block;
}

.options.invalid {
  border: 1px solid #D8000C;
  color: #D8000C;
  background-color: #ffe7e7;
}

.options.invalid .options-item-icon {
  color: #D8000C;
}

/* Inline-Specific Styles ----------------------------------------------------- */
.options.variant-inline .options-item {
  display: inline-block;
  border-left-width: 1px;
  border-top-width: 0;
}

.options.variant-inline .options-item:first-child {
  border-left-width: 0;
  border-radius: 0.4rem 0 0 0.4rem;
}

.options.variant-inline .options-item:last-child {
  border-radius: 0 0.4rem 0.4rem 0;
}

.options.variant-stacked .options-item {
  text-align: center;
}

.options.variant-stacked .options-item-text {
  display: block;
  margin: 0;
}
.pane {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pane-header {
  font-weight: bold;
  margin-bottom: 1rem;
  display: flex;
}

.pane-title {
  flex: 1;
}

.pane-aside {
  flex-shrink: 0;
}

.pane-header .button.variant-bubble {
  width: 3rem;
  height: 3rem;
}

.pane-body {
  flex: 1;
  height: 0;
  overflow: hidden;
}

.pane.variant-inline,
.pane.variant-inline .pane-body {
  height: auto;
}

.pane-footer {
  padding: 1.5rem 2rem;
  display: flex;
  flex-shrink: 0;
}

.pane-footer > * + * {
  margin-left: 1rem;
}

.pane-footer .variant-primary:first-child,
.pane-footer .variant-secondary + .variant-primary {
  margin-left: auto;
}

/* NESTED DEVIATIONS ---------------------------------------------------------- */
.page-body > .pane .pane-footer {
  margin: -2rem;
  margin-top: 2rem;
  background-color: white;
  border-right-width: 0;
  border-left-width: 0;
  border-bottom-width: 0;
  border-top: 1px solid #999;
}
iframe.pdf-preview {
  width: 100%;
  height: 100%;
}
.page {
  height: 100%;
}

.page-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.page-header {
  display: flex;
  align-items: center;
  height: 6rem;
  flex-shrink: 0;
  white-space: nowrap;
  position: relative;
  z-index: 3;
}

.page-title {
  color: #0666B3;
  margin-left: 2rem;
  font-size: 160%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-aside {
  display: flex;
  align-items: center;
  margin-right: 1.5rem;
  margin-left: auto;
}

.page-aside > * {
  margin-left: 1rem;
}

.page-header .button.variant-bubble {
  width: 4rem;
  height: 4rem;
}

.page-header .button.variant-bubble .button-icon {
  font-size: 130%;
}

.page-aside .button.variant-bubble.selected,
.page-aside .button.variant-bubble.selected:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.page-sizes .button + .button {
  margin-left: 0.5rem;
}

.page-body {
  padding: 2rem;
  position: relative;
  box-shadow: 0 2rem 1rem -2rem rgba(0, 0, 0, 0.2) inset;
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.page-footer {
  padding: 1.5rem 2rem;
  border-top: 1px solid #999;
  display: flex;
  flex-shrink: 0;
}

.page-footer > * + * {
  margin-left: 1rem;
}

.page-footer .variant-primary:first-child,
.page-footer .variant-secondary + .variant-primary {
  margin-left: auto;
}

#overlay .page {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem;
  z-index: 2;
}

#overlay .page-header {
  background-color: #666;
}

#overlay .page-title {
  color: #FFF;
}

#overlay .page-container {
  box-shadow: 0 0 2rem -0.5rem rgba(0, 0, 0, 0.75);
  background-color: #FFF;
  width: auto;
  height: auto;
  min-width: 40rem;
  min-height: 20rem;
}

#overlay .page:last-child {
  background-color: rgba(170, 170, 170, 0.8);
}

#overlay .page-close {
  color: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}

#overlay .page-close:hover {
  color: #FFF;
  background-color: rgba(255, 255, 255, 0.2);
}

#layout .page-close {
  display: none;
}
.peek {
  position: relative;
}

.peek.open .peek-aside {
  background-color: #f0f0f0;
  border-radius: 0 50% 50% 0;
  transition: background-color 0.4s;
}

.peek-body {
  top: 0;
  bottom: 0;
  right: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex: 1;
  background-color: #f0f0f0;
  border-left: 1px solid #999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s;
  padding: 0 0.5rem;
  padding-left: 0.75rem;
}

.peek.open .peek-body {
  opacity: 1;
  visibility: visible;
}

.peek-body[data-title]:before {
  content: attr(data-title);
  opacity: 0.5;
  margin: 0.5rem;
  margin-right: 1.5rem;
}

.peek-close,
.peek.open .peek-open {
  display: none;
}

.peek.open .peek-close {
  display: block;
}
.progress {
  width: 100%;
  display: flex;
}
.progress-outer {
  border-radius: 1rem;
  flex: 1;
  border: 1px solid #1555cc;
  margin-right: 1rem;
  display: flex;
}
.progress-inner {
  background-color: #b7d6ff;
  margin: 0.3rem;
  border-radius: 0.5rem;
}
.progress-text {
  width: 3rem;
}
.queue {
  display: flex;
  flex-direction: column;
}

.queue-body {
  border: 1px solid #DDD;
  overflow-y: scroll;
  border-radius: 0.4rem;
  margin-top: 1rem;
  flex: 1;
}

.queue.readonly .queue-body,
.queue.disabled .queue-body {
  background-color: #EEE;
}

.queue-body:empty:after {
  content: attr(data-placeholder);
  color: #999;
  padding: 0.8rem 1.2rem;
  display: block;
}

.queue-item {
  display: flex;
  align-items: center;
  position: relative;
}

.queue-text {
  flex: 1;
  padding: 0.8rem 1.2rem;
}

.queue-remove {
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
}

.queue-item .move-handle {
  padding: 0 1.2rem;
  cursor: move;
}

.queue.readonly .queue-item .move-handle,
.queue.disabled .queue-item .move-handle {
  cursor: not-allowed;
}

.queue-item .move-handle ~ .queue-text {
  padding-left: 0.3rem;
}

.queue-item.moving:after {
  content: "";
  border: 1px dashed #0666B3;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.3);
}

.queue-item.variant-readonly,
.queue-item.variant-disabled {
  background-color: #EEE;
  color: #888;
}
.roster-search {
  width: 100%;
}

.roster-search .symbol-value {
  width: 100%;
  padding-left: 3.2rem !important;
}

.roster-values {
  display: none;
}

.roster-items {
  height: 30rem;
  display: flex;
  flex-direction: column;
  border: 1px solid #DDD;
  border-radius: 0.4rem;
  margin-top: 1rem;
}

.roster.invalid .roster-items {
  background-color: #ffe7e7;
  color: #D8000C;
}

.roster-group {
  overflow: auto;
}

.roster-group.selected {
  background-color: #F2F2F2;
  border-bottom: 1px solid #DDD;
  max-height: 15rem;
  flex-shrink: 0;
}

.roster-group.available:empty:after {
  color: #888;
  content: "No results were found.";
  padding: 0.8rem 1.2rem;
  font-style: italic;
  display: block;
  flex: 1;
}

.roster-item {
  padding: 0.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  white-space: normal;
}

.roster-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.roster-item-icon {
  width: 1.8rem;
  margin: 0 0.5rem;
  flex-shrink: 0;
}

.roster-item-text {
  flex: 1;
}

.roster-more-available {
  color: #B2B2B2;
  width: 100%;
  padding: 0.5rem;
  font-style: italic;
  word-wrap: break-word;
  white-space: normal;
}
span.survey-segment {
  padding: 0 0.3rem;
  color: #888;
  position: relative;
}

span.survey-segment:first-child {
  padding-left: 0;
}

/* TODO: Centralize Validation with other custom validation components */
.survey-segment[data-message]:after {
  content: attr(data-message);
  display: block;
  position: absolute;
  padding: 0.4rem 0.8rem;
  background-color: #FFF3F3;
  border: 1px solid #D8000C;
  margin: 0.3rem 1rem;
  border-radius: 0.4rem;
  white-space: nowrap;
  font-weight: bold;
  box-shadow: 0.2rem 0.2rem 0.4rem #AAA;
  color: #777;
  top: -160%;
  left: 5%;
  z-index: 1;
}
.slider {
  padding: 1rem;
}

.slider-bar {
  height: 0.3rem;
  background-color: #888;
  position: relative;
  cursor: pointer;
}

.slider-handle {
  padding: 1rem;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  border: 2px solid #fff;
  background-color: #555;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.symbol {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.symbol .symbol-value {
  padding-left: 2.8rem;
}

.symbol .symbol-icon {
  left: 1.2rem;
  position: absolute;
  text-align: center;
  color: #AAA;
}

.symbol .symbol-value:focus + .symbol-icon {
  color: #000;
}

.symbol.invalid .symbol-icon {
  color: #D8000C !important;
}
.search {
  position: relative;
  display: inline-block;
}

.search-icon {
  position: absolute;
  top: 0;
  left: 0;
  color: #AAA;
  bottom: 0;
  font-size: 110%;
  width: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.5rem;
}

.search.open .search-text {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.search .search-text {
  padding-left: 3.5rem;
}

.search-text:focus ~ .search-icon {
  color: #444;
}

.search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 20rem;
  overflow: auto;
  background-color: white;
  border: 1px solid #CCC;
  border-radius: 0.4rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  z-index: 3;
  visibility: hidden;
  border-top-width: 0;
}

.search-results:empty:after {
  content: "No Results Found";
  padding: 1rem;
  display: block;
  text-align: center;
  color: #AAA;
  font-style: italic;
}

.search.open .search-results {
  visibility: visible;
}

.search-result {
  padding: 1rem;
  cursor: pointer;
}

.search-result:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.search-result b {
  font-weight: bold;
  color: #ef6500;
}

.search .search-result.highlighted {
  background-color: #fff7ce;
}

/* Search Result Groups ------------------------------------------------------- */
.search .search-result-group {
  padding-bottom: 1rem;
}

.search .search-result-group:before {
  content: attr(data-name);
  color: #0666B3;
  display: block;
  font-weight: bold;
  padding: 1.5rem 0.5rem;
}

.search .search-result-group + .search-result-group {
  border-top: 1px solid #DDD;
}

/* Variants ------------------------------------------------------------------- */
.search.variant-rounded .search-text {
  border-radius: 1.85rem;
}
.table {
  position: relative;
  height: 100%;
  border-spacing: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.table.text-copied:after {
  content: "Text Copied";
  display: block;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background-color: #333;
  color: #FFF;
  border-radius: 0.4rem;
  padding: 0.2rem 1rem 0.4rem 1rem;
  font-weight: bold;
}

.table.data {
  padding-top: 4rem;
}

.table.data.no-header {
  padding-top: 0;
}

.table.data:before {
  position: absolute;
  content: "";
  background-color: #e4e4e4;
  top: 0;
  height: 4rem;
  width: 100%;
}

.table.data.no-header:before {
  display: none;
}

.table.no-data:empty:before {
  position: absolute;
  content: attr(data-placeholder);
  left: 0;
  padding: 3rem;
  right: 0;
  text-align: center;
  color: #555;
}

.table-container {
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.table-root {
  display: table;
  border: 1px solid #e4e4e4;
  background-color: #FFF;
  min-height: 0;
  width: 100%;
}

.table-header {
  display: table-header-group;
}

.table-body {
  display: table-row-group;
}

.table-body:empty {
  display: table-caption;
}

.table-body:empty:before {
  padding: 1rem;
  content: attr(data-placeholder);
  display: block;
  color: #888;
  border: 1px solid #DDD;
  border-bottom-width: 0;
  background-color: inherit;
}

.table-row {
  display: table-row;
}

.table-row[data-uri],
.table-row[data-fire] {
  cursor: pointer;
}

.table-body .table-row[data-uri]:hover .table-cell,
.table-body .table-row[data-fire]:hover .table-cell {
  background-color: rgba(0, 0, 0, 0.03);
}

.table-row:hover .table-cell.variant-actions .button {
  opacity: 0.7;
}

.table-row .table-cell.variant-actions .button:hover {
  opacity: 1;
}

.table-body .table-row:nth-child(n+2) .table-cell {
  border-top: 1px solid #EEE;
}

.table-cell {
  display: table-cell;
  padding: 1rem;
  vertical-align: top;
}

.table-header .table-cell {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 0;
  white-space: nowrap;
  vertical-align: middle;
}

.table-header .table-header-content {
  position: absolute;
  top: 0;
  padding: 1rem 0;
  line-height: normal;
  font-weight: bold;
  color: #5f5f5f;
  z-index: 2;
  display: inline-block;
}

.table-header .table-cell[data-order] {
  cursor: pointer;
  padding-right: 3rem;
}

.table-header .table-cell[data-order] .table-header-content {
  display: flex;
  user-select: none;
  transition: transform 0.1s linear;
}

.table-header .table-cell[data-order] .fa-caret-up,
.table-header .table-cell[data-order] .fa-caret-down {
  position: absolute;
  color: #BBB;
}

.table-header .table-cell[data-order] .fa-caret-up {
  top: 0.6rem;
}

.table-header .table-cell[data-order] .fa-caret-down {
  bottom: 0.6rem;
}

.table-header .table-cell[data-order].desc .fa-caret-down {
  color: #5f5f5f;
}

.table-header .table-cell[data-order].asc .fa-caret-up {
  color: #5f5f5f;
}

.table-header .table-cell[data-order] .table-header-content[data-sequence]:before {
  content: attr(data-sequence);
  display: block;
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  font-size: 70%;
  border-radius: 50%;
  background-color: #5F5F5F;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.3rem;
  height: 1.3rem;
}

.table-header .table-header-order {
  margin-left: 1rem;
}

.table-header .table-cell.no-header:after {
  display: none;
}

.table-header .table-cell:after {
  visibility: hidden;
  font-weight: bold;
}

.table-header .table-cell:after {
  content: attr(data-header);
}

.table-body .table-cell {
  position: relative;
}

.table-cell .dynamic-item {
  margin-bottom: 0.5rem;
}

.table-cell .dynamic-item:first-child {
  font-weight: bold;
}

.table-cell .dynamic-item:first-child:last-child {
  margin: 0;
}

.table-cell .icons {
  font-size: 120%;
}

.table-footer {
  padding: 1rem;
  border: 1px solid #DDD;
  border-top-width: 0;
  color: #888;
  background-color: #F6F6F6;
}

.table-container:empty .table-footer {
  display: none;
}

.table-footer-text + .table-footer-text {
  margin-top: 1rem;
}

/* Variations ----------------------------------------------------------------- */
.table.variant-inline {
  height: auto;
  width: 100%;
}

.table.variant-flexible {
  padding-top: 0;
}

.table.variant-flexible.data:before {
  display: none;
}

.table.variant-flexible .table-header .table-cell {
  padding: 1rem;
  line-height: normal;
  white-space: normal;
  vertical-align: top;
}

.table.variant-flexible .table-header .table-cell:after {
  display: none;
}

.table.variant-flexible .table-header .table-header-content {
  position: static;
  padding: 0;
}

.table.variant-flexible .table-body .table-cell {
  border-top: 1px solid #EEE;
}

.table.variant-wide .table-container {
  display: block;
  min-height: 100%;
}

.table.variant-nowrap {
  white-space: nowrap;
}

.table.variant-inline.no-data:empty:before {
  padding: 0;
  position: relative;
}

.table.variant-middle .table-body .table-cell {
  vertical-align: middle;
}

.table-row.variant-negative {
  color: #D8000C;
  background-color: #fff8f8;
}

.table-row.variant-caution {
  color: #919100;
  background-color: #fdfee5;
}

.table-row.variant-positive {
  color: #318431;
  background-color: #f0fdf0;
}

.table-row.variant-disabled {
  background-color: #F5F5F5;
  color: #888;
}

.table-cell.variant-primary {
  font-weight: bold;
}

.table-cell.variant-nowrap {
  white-space: nowrap;
}

.table-cell.variant-actions {
  padding: 0;
  white-space: nowrap;
  text-align: right;
  height: 0;
}

.table-cell.variant-actions:first-child {
  text-align: left;
}

.table-cell.variant-actions .button {
  border: 0;
  padding: 0 1.2rem;
  height: 100%;
  margin: 0;
  border-radius: 0;
  opacity: 0.2;
  font-size: 145%;
}

.table-cell.variant-actions .button[disabled] {
  color: #888;
}

.table-cell.variant-actions .button-badge {
  font-size: 50%;
}

.table-cell.variant-sort {
  width: 2.5rem;
  color: #AAA;
  text-align: center;
  cursor: move;
}

.table-cell.variant-sort.disabled {
  cursor: not-allowed;
}

.table-row:hover .table-cell.variant-sort {
  color: inherit;
}

.table-cell.variant-select {
  width: 3.6rem;
}

.table-cell.variant-select .options {
  border: none;
  background-color: transparent;
}

.table-cell.variant-select .options-item {
  padding: 0;
  background-color: transparent;
}

.table-cell.variant-select .options .fa {
  font-size: 120%;
  padding: 0.2rem 0;
}

.table-cell.variant-value {
  display: none;
}

.table-row.variant-selectable {
  cursor: pointer;
}

.table-body .table-row.dropping.drop-before .table-cell:after,
.table-body .table-row.dropping.drop-after + .table-row .table-cell:after,
.table-body .table-row.dropping.drop-after:last-child .table-cell:after {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  background-color: #0666b3;
  height: 2px;
  content: "";
}

.table-body .table-row.dropping.drop-before:first-child .table-cell:after {
  top: 0;
}

.table-body .table-row.dropping.drop-after:last-child .table-cell:after {
  top: auto;
  bottom: -1px;
}

.table-row.highlight {
  background-color: rgba(110, 166, 209, 0.2);
}

.table.invalid .table-header .table-header-content {
  color: #D8000C;
}

/* Tiny Styles ---------------------------------------------------------------- */
.display-tiny .table {
  padding-top: 0;
}

.display-tiny .table:before {
  display: none;
}

.display-tiny .table-root,
.display-tiny .table-body,
.display-tiny .table-row {
  display: block;
}

.display-tiny .table-header {
  display: none;
}

.display-tiny .table-row {
  margin: 1rem;
  border: 1px solid #DDD;
}

.display-tiny .table-cell {
  display: flex;
  justify-content: space-between;
  text-align: right;
}

.display-tiny .table-body:empty {
  height: auto;
  padding: 2rem;
}

.display-tiny .table-body:empty:before {
  position: static;
  padding: 0;
}

.display-tiny .table-body .table-cell:before {
  content: attr(data-header);
  font-weight: bold;
  margin-right: 2rem;
}

.display-tiny .table-body .table-cell.variant-actions:before {
  display: none;
}

.display-tiny .table-body .table-cell.variant-actions {
  justify-content: flex-end;
  padding: 1rem;
}

/************* Custom Button Hover *************/
.table .table-cell.variant-actions .button:hover > .button-text:not(:hover) {
  display: block !important;
}

.table .table-cell.variant-actions .button-text {
  position: absolute;
  text-align: center;
  white-space: nowrap;
  background-color: #393939;
  color: #FCFCFC;
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  margin: 0;
  z-index: 1;
  display: none !important;
  top: calc(50% - 1.5rem) !important;
  height: 3rem;
  font-size: 75%;
  left: -1.5rem;
  right: auto;
  transform: translateX(-100%);
}

.table .table-cell.variant-actions .button-text:after {
  content: "";
  width: 0;
  border: 0.7rem solid transparent;
  position: absolute;
  height: 1.5rem;
  top: calc(50% - .75rem);
  border-left-color: #393939;
  left: calc(100% - 1px);
}
.tabs {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.tabs-header {
  display: flex;
  width: 0;
  min-width: 100%;
  flex-shrink: 0;
}

.tabs-header:after {
  content: "";
  border: 0 solid #E6E6E6;
  border-bottom-width: 1px;
  width: 100%;
  flex: 1;
}

.tabs-header:empty:after {
  border: none;
}

.tabs-handle {
  position: relative;
  padding: 1.5rem 2rem;
  overflow: hidden;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  flex-shrink: 1;
  letter-spacing: 0.1rem;
  font-size: 110%;
  border: 1px solid transparent;
  border-bottom-color: #E6E6E6;
}

.tabs-handle:hover {
  background-color: #F4F4F4;
}

.tabs-handle.warning {
  color: red;
}

.tabs-handle.hidden {
  display: none;
}

.tabs-handle.selected {
  flex-shrink: 0;
  border-color: #E6E6E6;
  border-bottom-color: transparent;
  cursor: default;
}

.tabs-handle.selected,
.tabs-handle.selected:hover {
  background-color: #FFF;
}

.tabs-handle > * {
  opacity: 0.5;
}

.tabs-handle.selected > * {
  opacity: 1;
}

.tabs-badge {
  position: absolute;
  top: 0.1rem;
  right: 0.2rem;
  color: #FFF;
  background-color: #888;
  border-radius: 1rem;
  padding: 0.2rem 0.6rem;
  font-size: 70%;
  font-weight: normal;
}

.tabs-badge:empty {
  display: none;
}

.tabs-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabs-content {
  position: relative;
  flex: 1;
  height: 0;
  min-height: 0;
}

.tabs-content:empty:after {
  content: attr(data-placeholder);
  color: #888;
}

.tabs-pane {
  display: none;
  background-color: #FFF;
}

.tabs-pane.selected {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.tabs-pane-body {
  padding: 2rem;
  overflow: auto;
  flex: 1;
  height: 0;
  border: 1px solid #E6E6E6;
  border-bottom-width: 0;
  border-top-width: 0;
}

.tabs-pane-body:last-child {
  border-bottom-width: 1px;
}

.tabs-pane-footer {
  padding: 1.5rem 2rem;
  border: 1px solid #E6E6E6;
  border-top-color: #999;
  display: flex;
  flex-shrink: 0;
  background-color: #f7f7f7;
}

.tabs-pane-footer > * + * {
  margin-left: 1rem;
}

.tabs-pane-footer .variant-primary:first-child,
.tabs-pane-footer .variant-secondary + .variant-primary {
  margin-left: auto;
}

.tabs-pane-body .collection {
  overflow: visible;
}

/* POSITIVE / NEGATIVE VARIANT ------------------------------------------------ */
.tabs-handle.variant-positive:after,
.tabs-handle.variant-negative:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.5rem;
  opacity: 0.5;
  content: "";
}

.tabs-handle.selected.variant-positive:after,
.tabs-handle.selected.variant-negative:after {
  opacity: 1;
}

.tabs-handle.variant-negative:after {
  background-color: #D8000C;
}

.tabs-handle.variant-positive:after {
  background-color: #56AD56;
}

/* SIDE VARIANT --------------------------------------------------------------- */
.tabs.variant-side {
  flex-direction: row;
}

.tabs.variant-side .tabs-header {
  min-width: auto;
  width: auto;
  flex-direction: column;
}

.tabs.variant-side .tabs-header:after {
  border-bottom-width: 0;
  border-right-width: 1px;
}

.tabs.variant-side .tabs-handle {
  border-bottom-color: transparent;
  border-right-color: #E6E6E6;
  display: flex;
  align-items: center;
  padding: 1rem;
}

.tabs.variant-side .tabs-handle.variant-positive:after,
.tabs.variant-side .tabs-handle.variant-negative:after {
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0.5rem;
  height: auto;
}

.tabs.variant-side .tabs-handle > * + * {
  margin-left: 0.5rem;
}

.tabs.variant-side .tabs-handle.selected {
  border-color: #E6E6E6;
  border-right-color: transparent;
}

.tabs.variant-side .tabs-content {
  border-top-width: 1px;
  border-left-width: 0;
  height: auto;
}

/* SIDE REVERSED VARIANT ------------------------------------------------------ */
.tabs.variant-side.variant-reversed {
  flex-direction: row-reverse;
}

.tabs.variant-side .tabs-header:after {
  border-right-width: 0;
  border-left-width: 1px;
}

.tabs.variant-side.variant-reversed .tabs-handle {
  border-right-color: transparent;
  border-left-color: #E6E6E6;
}

.tabs.variant-side.variant-reversed .tabs-handle.selected {
  border-color: #E6E6E6;
  border-left-color: transparent;
}

.tabs.variant-side.variant-reversed .tabs-content {
  border-left-width: 1px;
  border-right-width: 0;
}

/* NESTED DEVIATIONS ---------------------------------------------------------- */
.page-body > .tabs .tabs-pane-body {
  border-bottom-width: 1px;
}

.page-body > .tabs .tabs-pane-footer {
  margin: -2rem;
  margin-top: 2rem;
  background-color: white;
  border-right-width: 0;
  border-left-width: 0;
  border-bottom-width: 0;
}
.transformer {
  display: inline-flex;
}

.transformer-switch .textbox {
  background-color: #EEE;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
}

.transformer-switch .dropdown-items {
  margin-left: -1px;
}

.transformer-items .textbox {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.transformer-item.off {
  display: none;
}
.textbox {
  margin: 0;
  border-radius: 0.4rem;
  font-size: inherit;
  font-family: inherit;
  padding: 0.8rem 1.2rem;
  box-shadow: none;
  border: 1px solid #BBB;
  background-color: white;
  outline: none;
  box-sizing: content-box;
  resize: none;
  line-height: inherit;
}

.textbox:hover {
  background-color: #FEFEFE;
  border-color: #999;
}

.textbox:focus {
  border-color: #444;
}

.textbox[readonly],
.textbox[disabled] {
  background-color: #EEE;
  cursor: not-allowed;
}

.textbox.invalid {
  border: 1px solid #D8000C;
  color: #D8000C;
  background-color: #ffe7e7 !important;
}
@media only screen and (max-device-width: 600px) {
  .page-app-help-message .form-field {
    display: flex;
    flex-direction: column;
  }
  .page-app-help-message .form-label {
    text-align: left !important;
  }
  .page-app-help-message .form-field.required .form-label .form-label-text:after {
    left: auto !important;
    right: -1rem !important;
  }
  .page-app-help-message .textbox {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
.page-goals-data-date .page-container {
  min-width: auto !important;
}
.page-goals-edit-tip .page-container {
  max-width: 50rem;
}
.page-goals-edit-tip .page-footer {
  align-items: center;
}
.page-goals-edit-tip .page-footer .hyperlink {
  margin: 0;
}
.page-goals-edit-tip .page-footer .button {
  margin-left: auto;
}
.page-goals-data-entry .goal-description {
  margin-bottom: 1.5rem;
}

.page-goals-data-entry .form {
  border: 1px solid #CCC;
  border-radius: 0.4rem;
  width: 47rem;
  margin-left: 35rem;
  position: static;
  height: 50rem;
  overflow-y: scroll;
  display: block;
  padding: 1.4rem;
}

.page-goals-data-entry .datepicker {
  position: absolute;
  left: 0;
  margin-top: -1.5rem;
}

.page-goals-data-entry .form-fieldset {
  margin: 0 0 1rem;
  display: table;
  width: 100%;
  padding: 1rem;
  padding-top: 4rem;
  border-radius: 0.4rem;
  background: white;
}

.page-goals-data-entry .form-fieldset.disabled {
  padding-bottom: 0;
}

.page-goals-data-entry .form-fieldset.disabled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #ff926e, #ff926e 10px, white 10px, white 20px);
  opacity: 0.1;
  z-index: 2;
}

.page-goals-data-entry .form-fieldset.disabled::after {
  content: "\f1f8";
  font-family: FontAwesome;
  font-size: 3rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  opacity: 0.2;
}

.page-goals-data-entry .form-fieldset-title {
  position: absolute;
  padding: 1rem;
  background: #F5F5F5;
  top: 0;
  left: 0;
  right: 0;
  font-weight: bold;
  font-size: 100%;
  border-radius: 0;
  color: #888;
}

.page-goals-data-entry .form-fieldset.highlight:not(.disabled) .form-fieldset-title {
  color: #333;
  background: #EEE;
}

.page-goals-data-entry .form-fieldset-aside {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0.5rem;
  z-index: 3;
}

.page-goals-data-entry .form-fieldset-aside .button {
  width: 3rem;
  height: 3rem;
  margin-left: 0.5rem;
}

.page-goals-data-entry .form-fieldset.disabled > * > :not(.button.delete) {
  opacity: 0.2;
  pointer-events: none;
}

.page-goals-data-entry .form-label {
  width: 9rem;
}

.page-goals-data-entry .textbox.notes {
  width: 100%;
  box-sizing: border-box;
}

.page-goals-data-entry .form-field .button.remove {
  display: none;
}

.page-goals-data-entry .form-field + .form-field .button.remove {
  display: inline-block;
}

@media only screen and (max-device-width: 600px) {
  .page-goals-data-entry .page-container {
    height: 100% !important;
    width: 100% !important;
  }

  .page-goals-data-entry .datepicker {
    top: 1rem;
    height: 4rem;
    right: 0;
    overflow: hidden;
    z-index: 1;
    justify-content: flex-end;
    transition: height 0.2s;
  }

  .page-goals-data-entry .datepicker.open {
    height: 40rem;
  }

  .page-goals-data-entry .editor-pane {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .page-goals-data-entry .form {
    width: 100%;
    margin-left: 0;
  }

  .page-goals-data-entry .editor-pane[data-summary]:before {
    margin-top: 5rem;
    width: 100%;
  }

  .page-goals-data-entry .form-label {
    display: none;
  }
}
.page-goals-data-bulk .page-container {
  height: 90% !important;
  width: 90% !important;
  max-width: 120rem;
}
.page-goals-data-bulk .page-body {
  height: 0;
  display: flex;
}
.page-goals-data-bulk .editor-pane {
  flex: 1;
}
.page-goals-data-bulk .form {
  height: 100%;
  display: block;
  overflow-y: scroll;
}
.page-goals-data-bulk .goal {
  margin-right: 2rem;
  margin-bottom: 2rem;
}
.page-goals-data-bulk .goal.selected .goal-header {
  background-color: #ffecb2;
}
.page-goals-data-bulk .goal-header {
  border: 1px solid #DDD;
  background-color: #EEE;
  padding: 1rem;
  border-radius: 1rem 1rem 0 0;
  display: flex;
  align-items: center;
}
.page-goals-data-bulk .goal-header .options {
  margin-left: 2rem;
}
.page-goals-data-bulk .goal-header .button.variant-bubble {
  width: 3rem;
  height: 3rem;
}
.page-goals-data-bulk .goal-title {
  margin-right: auto;
  font-weight: bold;
}
.page-goals-data-bulk .goal-title:before {
  content: "#";
  font-weight: normal;
  opacity: 0.6;
  margin-right: 0.5rem;
}
.page-goals-data-bulk .goal-title[data-reference]:after {
  content: attr(data-reference);
  opacity: 0.6;
  margin-left: 0.5rem;
}
.page-goals-data-bulk .goal-body {
  border: 1px solid #DDD;
  border-top-width: 0;
  padding: 1rem;
  border-radius: 0 0 1rem 1rem;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto 1fr;
}
.page-goals-data-bulk .goal-mastery {
  margin-top: 1rem;
  color: #888;
  grid-column: 1;
}
.page-goals-data-bulk .goal-data {
  grid-column: 2;
  grid-row: 1/span 2;
  display: table;
}
.page-goals-data-bulk .form-label {
  width: 9rem;
}
.page-goals-data-bulk .form-field:first-child .button.remove {
  display: none;
}
.page-goals-data-bulk .textbox.notes {
  width: 100%;
  box-sizing: border-box;
}
@media only screen and (max-device-width: 600px) {
  .page-goals-data-bulk .page-container {
    height: 100% !important;
    width: 100% !important;
  }
  .page-goals-data-bulk .goal-body {
    display: block;
  }
  .page-goals-data-bulk .goal-data {
    width: 100%;
    margin-top: 1rem;
  }
  .page-goals-data-bulk .form-label {
    width: 4.5rem;
  }
  .page-goals-data-bulk .goal-header .options {
    margin-left: 1rem;
  }
}
#overlay .page-insights-reports-configure .page-container {
  width: 95%;
  height: 100%;
  min-width: 90rem;
  max-width: 140rem;
  max-height: 100rem;
}

#overlay .page-insights-reports-configure .page-body {
  overflow: auto;
}

#overlay .page-insights-reports-configure .editor-pane {
  height: 100%;
}
#overlay .page-insights-reports-run .page-container {
  width: 100%;
  height: 100%;
}

.page-insights-reports-run .chart-tab .tabs-pane-body {
  overflow: hidden;
}
#overlay .page-insights-queries-configure .page-container {
  width: 95%;
  height: 100%;
  min-width: 90rem;
  max-width: 140rem;
  max-height: 100rem;
}

#overlay .page-insights-queries-configure .page-body {
  overflow: auto;
}

#overlay .page-insights-queries-configure .editor-pane {
  height: 100%;
}
.report-configuration {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.report-configuration .report-header {
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-configuration .report-title {
  font-size: 130%;
  font-weight: bold;
}

.report-configuration .report-columns {
  flex: 1;
  display: flex;
  height: 0;
}

.report-configuration .column {
  flex: 1;
  display: flex;
  margin-left: 1rem;
  flex-direction: column;
}

.report-configuration .column:first-child {
  margin: 0;
}

.report-configuration .column-header {
  flex-shrink: 0;
  position: relative;
}

.report-configuration .column-title {
  font-weight: bold;
  padding: 1rem 0;
  text-align: center;
  white-space: nowrap;
  background-color: #CCC;
}

.report-configuration .column-aside {
  position: absolute;
  top: 0;
  right: 0;
}

.report-configuration .column-aside .button {
  font-size: 80%;
  padding: 0.5rem 0.8rem;
  margin: 0.5rem;
  margin-left: 0;
}

.report-configuration .column-body {
  border: 1px solid #EEE;
  height: 100%;
}

.report-configuration .column.available .column-body,
.report-configuration .column.selected .column-body {
  overflow: auto;
}

.report-configuration .column.selected .column-body:empty:after {
  content: "Select columns on the left to run this report.";
  margin: 3rem;
  text-align: center;
  display: block;
  color: #AAA;
}

.report-configuration .column-item {
  user-select: none;
  cursor: pointer;
  background-color: #EEE;
  border: 1px solid #DDD;
  border-radius: 0.4rem;
  padding: 0 1rem;
  margin: 1rem;
  display: flex;
  align-items: center;
}

.report-configuration .column-item:hover {
  background-color: #DDD;
}

.report-configuration .column-item.selected {
  background-color: #FFF6CB;
  border-color: #9A8963;
}

.report-configuration .column-item.moving {
  border-style: dashed;
  opacity: 0.6;
}

.report-configuration .column-item.moving,
.report-configuration .column-item.movable {
  background-color: #EEE;
}

.report-configuration .column.selected .column-item {
  border-color: #555;
}

.report-configuration .column.available .column-item-order,
.report-configuration .column.selected .column-item-supplement,
.report-configuration .column.selected .column-item-text,
.report-configuration .column.available .column-item-sort {
  display: none;
}

.report-configuration .column.available .column-item[data-triggers] .column-item-name:after {
  content: "*";
  margin-left: 0.5rem;
}

.report-configuration .column-item-name {
  margin: 1rem 0;
}

.report-configuration .column-item-supplement {
  color: #777;
  margin-left: 0.5rem;
}

.report-configuration .column-item-text {
  margin-left: auto;
  width: 3rem;
  height: 3rem;
}

.report-configuration .column-item-order {
  display: flex;
  margin-left: auto;
  color: #BBB;
}

.report-configuration .column-item-sort {
  margin-left: -1rem;
  cursor: move;
  padding: 0 1rem;
}

.report-configuration .column-item-order-indicator {
  position: relative;
}

.report-configuration .column-item-order-indicator .icons + .icons {
  position: absolute;
  display: none;
  color: #333;
  top: 0;
}

.report-configuration .column-item-order-label {
  margin: 0 0.5rem;
}

.report-configuration .column-item-order-label:after {
  content: "order";
}

.report-configuration .column-item-order-remove {
  margin-right: 0.5rem;
  display: none;
}

.report-configuration .column-item-order-remove:hover {
  color: #E46A6A;
}

.report-configuration .column-item[data-direction] .column-item-order-remove {
  display: block;
}

.report-configuration .column-item[data-direction] .column-item-order-label {
  color: #333;
}

.report-configuration .column-item[data-direction="+"] .column-item-order-asc,
.report-configuration .column-item[data-direction="-"] .column-item-order-desc {
  display: block;
}

.report-configuration .column-item-order-label[data-sequence]:before {
  content: attr(data-sequence);
  margin-right: 0.5rem;
  color: #E46A6A;
  font-weight: bold;
}

.report-configuration .filter {
  margin: 2rem;
  justify-content: space-between;
  align-items: center;
}

.report-configuration .filter[data-triggers] {
  display: none;
}

.report-configuration .filter,
.report-configuration .filter[data-triggers].active {
  display: flex;
}

.report-configuration .filter-name {
  font-weight: bold;
  align-self: flex-start;
  padding: 0.8rem 0;
}
#overlay .page-insights-queries-run .page-container {
  width: 100%;
  height: 100%;
}
.page-insights-reports-run-filters .filter {
  display: flex;
  margin: 2rem;
  justify-content: space-between;
  align-items: center;
}
.page-insights-reports-run-filters .filter-name {
  font-weight: bold;
  align-self: flex-start;
  padding: 0.8rem 0;
}
.page-accounts .table-cell .dynamic-item:first-child {
  font-weight: normal;
}

.page-accounts .icons {
  display: inline-block;
  margin: 0 0.5rem;
  color: #5874a3;
}

.page-accounts .icons .flag-off {
  color: #CCC;
}
.page-attachments .page-container {
  width: 70rem !important;
  height: 50rem !important;
}
.page-comments .page-container {
  width: 78rem !important;
}

.page-comments .table {
  height: 45rem;
  margin-bottom: 1rem;
}

.page-comments .table-header {
  display: none;
}

.page-comments .table-container {
  border: 1px solid #AAA;
  padding: 2rem;
  border-radius: 0.5rem;
}

.page-comments .table-root {
  border: none;
}

.page-comments .table-body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.page-comments .table-row {
  display: grid;
  grid-template-columns: 1fr auto;
  max-width: 90%;
  padding: 1rem;
  border-radius: 1rem;
  background-color: #EEE;
  border: 1px solid #888;
}

.page-comments .table-row.self {
  margin-left: auto;
  background-color: #def4ff;
  border-color: #9dd3ee;
}

.page-comments .table-body .table-cell {
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0.5rem;
}

.page-comments .table-body .table-cell:nth-child(3) {
  grid-column: 1/span 2;
}

.page-comments .table-body .table-cell:nth-child(1) {
  font-weight: bold;
}

.page-comments .table-body .table-cell:nth-child(4) {
  font-size: 80%;
  font-style: italic;
  opacity: 0.8;
}

.page-comments .table-body .table-cell .button {
  border: none;
  padding: 0.3rem 0.8rem;
  margin-left: 1rem;
}
.page-goals .collection {
  height: auto;
  overflow: visible;
}

.page-goals .collection-body {
  flex-direction: column;
}

.page-goals .goal {
  margin-bottom: 2rem;
  display: flex;
  padding: 2rem;
  border: 1px solid #DDD;
  border-radius: 0.4rem;
  background: white;
  position: relative;
}

.page-goals .goal.archived {
  background-color: #EEE;
}

.page-goals .goal.nested {
  border-style: dashed;
}

.page-goals .goal.nested:before {
  content: "";
  position: absolute;
  left: 2.5rem;
  top: 2.7rem;
  border: 0.7rem solid transparent;
  border-left-color: rgba(0, 0, 0, 0.2);
}

.page-goals .goal-body,
.page-goals .goal-chart {
  flex: 1;
}

.page-goals .goal.nested .goal-body > * {
  margin-left: 3rem;
}

.page-goals .goal-chart {
  min-width: 30rem;
  max-width: 60rem;
  padding-left: 2rem;
  height: 15rem;
}

.page-goals .goal-header {
  display: flex;
  align-items: center;
}

.page-goals .goal-title {
  font-size: 120%;
  font-weight: bold;
  color: #555;
}

.page-goals .goal-title:before {
  content: "#";
  opacity: 0.5;
  display: inline-block;
  margin: 0 0.5rem;
}

.page-goals .goal-title:first-child:before {
  margin-left: 0;
}

.page-goals .goal-title[data-reference]:after {
  content: attr(data-reference);
  opacity: 0.5;
  display: inline-block;
  margin-left: 0.5rem;
}

.page-goals .goal-tags {
  flex: 1;
  text-align: right;
}

.page-goals .goal-tags span {
  padding: 0.3rem 0.6rem;
  font-size: 80%;
  background-color: #DDD;
  color: #666;
  display: inline-block;
  margin-left: 1rem;
  border-radius: 0.4rem;
}

.page-goals .goal-tags span.strike {
  text-decoration: line-through;
  opacity: 0.7;
}

.page-goals .goal-tags span.mastered {
  color: #274827;
  background-color: #ddf3dd;
}

.page-goals .goal-tags span.pending {
  color: #273348;
  background-color: #d6e4fc;
}

.page-goals .goal-description {
  margin: 1rem 0;
}

.page-goals .goal-criteria {
  color: #888;
}

.page-goals .goal-menu {
  margin-left: -0.8rem;
}

.page-goals .goal-menu .opener-button {
  width: 3rem;
  height: 3rem;
}

.page-goals .goal-graph {
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 0.4rem;
}

.page-goals .goal-graph:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.page-goals .goal-graph:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120%;
  font-weight: bold;
}

.page-goals .goal-graph:empty:after {
  content: "Loading...";
  opacity: 0.5;
}

.page-goals .goal-graph.response:empty:after {
  content: "Click or tap to enter data";
}

.page-goals .goal-graph.response:empty:hover:after {
  opacity: 0.7;
}

.page-goals .goal-graph canvas {
  width: 100%;
  height: 100%;
}

.page-goals .goal-graph-hint {
  color: #888;
  position: absolute;
  right: 2rem;
  font-size: 80%;
}

/* Mobile */
@media only screen and (max-device-width: 600px) {
  .page-goals .button.print {
    display: none;
  }

  .page-goals .button.print + .button {
    margin-left: 0;
  }

  .page-goals .goal {
    flex-direction: column;
    width: 100%;
  }

  .page-goals .goal-chart {
    padding-left: 0;
    min-width: 0;
    margin-top: 2rem;
  }
}
#overlay .page-plans .page-container {
  width: 90rem !important;
  height: 70rem !important;
}
.page-plans .banner {
  max-width: 70%;
  text-align: center;
}
.page-plans .tabs {
  width: 100%;
  gap: 2rem;
}
.page-plans .tabs-pane {
  background-color: transparent;
}
.page-plans .tabs-pane:last-child .card:before,
.page-plans .tabs-pane:last-child .card:after {
  display: none;
}
.page-plans .tabs-pane-body {
  border: none;
}
.page-plans .tabs-handle,
.page-plans .tabs-header:after {
  border: none;
}
.page-plans .tabs-header {
  align-self: center;
  min-width: fit-content;
  border-radius: 9999px;
  background-color: #555;
  color: white;
  padding: 0.5rem;
}
.page-plans .tabs-handle {
  border-radius: 9999px;
  padding: 0.8rem 1.2rem;
}
.page-plans .tabs-label {
  opacity: 1;
}
.page-plans .tabs-handle:hover {
  background-color: transparent;
}
.page-plans .tabs-handle.selected {
  color: #333;
}
.page-plans .tabs-handle.selected:hover {
  background-color: white;
}
.page-plans .pricing {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.page-plans .collection {
  flex: 1;
  width: 100%;
}
.page-plans .collection + * {
  margin-top: 3rem;
}
.page-plans .collection-body {
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: center;
}
.page-plans .card {
  flex: 1;
  margin-top: 2rem;
  margin-bottom: 2rem;
  min-width: auto;
  border-radius: 1rem;
  max-width: 30rem;
}
.page-plans .card + .card {
  margin-left: 2rem;
}
.page-plans .card:before {
  content: "Monthly";
  background-color: #EEE;
  border-radius: 1.8rem;
  padding: 0.8rem 1.2rem;
  position: absolute;
  right: 8rem;
  top: 2.9rem;
  font-size: 90%;
  z-index: 1;
}
.page-plans .card:nth-child(1) .icons {
  color: #dab800;
}
.page-plans .card:nth-child(2) {
  margin-top: 0;
  margin-bottom: 0;
  border-color: #333;
}
.page-plans .card:nth-child(2):after {
  content: "Most Popular";
  background-color: #e00000;
  border-radius: 1.8rem;
  padding: 0.8rem 1.2rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 9rem;
  color: white;
  font-weight: bold;
  font-size: 90%;
}
.page-plans .card:nth-child(2) .icons {
  color: #e00000;
}
.page-plans .card:nth-child(2) .button {
  opacity: 1;
}
.page-plans .card:nth-child(2) .card-body {
  padding-bottom: 8rem;
}
.page-plans .card:nth-child(3) .icons {
  color: #7f00ff;
}
.page-plans .card.per-profile .card-aside .dynamic-item:after {
  content: "(per profile)";
  position: absolute;
  top: 85%;
  font-size: 70%;
  left: 2rem;
  font-weight: normal;
}
.page-plans .card.description .card-body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.page-plans .card.description .card-body .dynamic-item:nth-child(n+3) {
  align-self: center;
  font-weight: bold;
}
.page-plans .card.description .card-body .progress {
  width: 80%;
  align-self: center;
}
.page-plans .card.plan .card-body .dynamic-item:first-child {
  margin-bottom: 2rem;
  font-style: italic;
}
.page-plans .card.plan .card-body .dynamic-item:first-child:before {
  content: "for ";
}
.page-plans .card.plan .card-body .dynamic-item:nth-child(2) {
  margin-bottom: 2rem;
}
.page-plans .card.plan .card-body .dynamic-item:nth-child(n+3) {
  display: list-item;
  margin-top: 1rem;
  margin-left: 2rem;
}
.page-plans .card-header {
  flex-direction: column;
  align-items: flex-start;
  background-color: white;
  border: 1px solid #777;
  border-bottom: 0;
  border-radius: 1rem 1rem 0 0;
  padding: 2rem;
  padding-bottom: 0;
  position: relative;
}
.page-plans .card-header .icons {
  position: absolute;
  top: 2rem;
  right: 3rem;
  font-size: 200%;
}
.page-plans .card-header .dynamic-item {
  font-size: 80%;
}
.page-plans .card-header .card-aside .dynamic-item {
  color: green;
}
.page-plans .card-header .card-aside .dynamic-item:nth-child(1) {
  font-size: 110%;
  font-weight: bold;
}
.page-plans .card-header .card-aside .dynamic-item:nth-child(2) {
  margin: 0.5rem 0;
}
.page-plans .card-aside {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.page-plans .card-title {
  font-size: 180%;
  font-weight: bold;
  margin-bottom: 3rem;
}
.page-plans .card-body {
  border-left: 1px solid #777;
  border-right: 1px solid #777;
}
.page-plans .card-footer {
  padding: 0;
}
.page-plans .card-footer .button {
  width: 100%;
  padding: 2rem;
  border-radius: 0 0 1rem 1rem;
  font-size: 120%;
  font-weight: bold;
  opacity: 0.8;
}
.page-plans .card-footer .button.inert {
  pointer-events: none;
}
.page-plans .card-footer .button.upgrade {
  opacity: 1;
}
.page-plans .card-footer .button.downgrade {
  opacity: 0.8;
}
.page-plans .card-footer .button.cancel {
  opacity: 0.8;
  background-color: #f81a1a;
}
.page-plans .card-footer .button.cancel:hover {
  background-color: #ee0d0d;
}
.page-plans .card-footer .button[disabled] {
  border: none;
  background-color: #CCC !important;
  color: #333;
  opacity: 0.5;
}
.page-plans .buttons {
  display: flex;
  gap: 2rem;
  margin: 3rem;
  justify-content: center;
}
.page-plans .buttons .button.delete {
  background-color: #e00000;
  border-color: #800000;
}
.page-plans .buttons .button.delete:hover {
  background-color: #f00000;
}
@media only screen and (max-device-width: 600px) {
  .page-plans .collection-body {
    flex-direction: column;
  }
  .page-plans .card {
    margin: 0 0 2rem;
  }
}
.page-resources .table-cell .dynamic-item:first-child {
  font-weight: normal;
}
.page-templates-archive .page-container,
.page-templates-delete .page-container,
.page-templates-restore .page-container {
  max-width: 50rem;
}

.page-templates .table-cell .dynamic-item:first-child {
  font-weight: normal;
}

.page-templates .table-row.sub-row {
  background-color: #F8F8FF;
}

.page-templates .table-row.sub-row .table-cell:first-child {
  padding-left: 2.3rem;
}

.page-templates .table-row.sub-row .table-cell:first-child::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.3rem;
  border: 0.7rem solid transparent;
  border-left-color: rgba(0, 0, 0, 0.2);
}
#overlay .page-app-alert .page-container {
  max-width: 50rem;
  max-height: 50rem;
}
.page-app-error .page-container {
  max-width: 45rem;
}

.page-app-error .page-body {
  padding: 4rem;
  max-height: 40rem;
}

.page-app-error .page-body .message + .details {
  margin-top: 1rem;
}

.page-app-error .details {
  padding-left: 3rem;
}

.page-app-error .detail {
  margin: 0.5rem;
  list-style: disc;
}
#overlay .page-app-lock .page-container {
  width: 52rem;
}

#overlay .page-app-lock {
  background-color: #BBB !important;
}

@media only screen and (max-device-width: 600px) {
  .page-app-lock .form-field {
    display: flex;
    flex-direction: column;
  }
  .page-app-lock .form-label {
    text-align: left !important;
  }
  .page-app-lock .form-field.required .form-label .form-label-text:after {
    left: auto !important;
    right: -1rem !important;
  }
  .page-app-lock .textbox {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
#overlay .page-app-print .page-container {
  width: 100%;
  height: 100%;
}

.page-app-print.full-page .page-body,
.page-app-print .tabs-pane-body {
  padding: 0;
  overflow: hidden;
}

.page-app-print iframe {
  height: 100%;
  width: 100%;
}
.page-app-preview .page-container {
  max-height: 100%;
}
.page-app-preview img {
  max-width: 100%;
}
#overlay .page-app-prompt .page-container {
  max-width: 50rem;
  max-height: 50rem;
}

.page-app-prompt .page-body .dynamic-item + .dynamic-item {
  display: list-item;
  margin-top: 1rem;
  margin-left: 2rem;
  padding-left: 0.5rem;
}
@media only screen and (max-device-width: 600px) {
  .page-attachments-edit .textbox {
    width: 100% !important;
    box-sizing: border-box;
  }
  .page-attachments-edit .form-field {
    display: flex;
    flex-direction: column;
  }
  .page-attachments-edit .form-label {
    text-align: left !important;
  }
  .page-attachments-edit .form-field.required .form-label .form-label-text:after {
    left: auto !important;
    right: -1rem !important;
  }
}
.page-groups-edit .page-container {
  width: 52rem !important;
}

.page-groups-edit .roster-items {
  height: 40rem;
}

@media only screen and (max-device-width: 600px) {
  .page-groups-edit .form-field {
    display: flex;
    flex-direction: column;
  }

  .page-groups-edit .form-label {
    text-align: left !important;
  }

  .page-groups-edit .form-field.required .form-label .form-label-text:after {
    left: auto !important;
    right: -1rem !important;
  }

  .page-groups-edit .textbox.name {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
#overlay .page-goals-archive .page-container {
  max-width: 50rem;
}
.page-goals-duplicate .page-container {
  width: 60rem !important;
}
.page-goals-edit .page-body {
  padding: 0;
}
.page-goals-edit .form {
  display: flex;
  border-spacing: 0;
}
.page-goals-edit .form-fieldset {
  margin: 0;
  border-spacing: 1rem;
  padding: 2rem;
}
.page-goals-edit .form-fieldset:last-child {
  min-width: 41rem;
  padding: 2rem 1rem;
}
#overlay .page-goals-edit .form-fieldset {
  min-height: 53rem;
}
.page-goals-edit .goal-preview {
  position: absolute;
  top: 100%;
  display: flex;
  padding: 0 2rem;
  align-items: center;
  height: 7rem;
  width: 77rem;
  font-weight: bold;
  color: #666;
}
.page-goals-edit .goal-preview + .form-fieldset {
  background: transparent;
}
.page-goals-edit .roster-items {
  height: 18rem;
}
.page-goals-edit .search {
  width: calc(100% - 4rem);
}
.page-goals-edit .search-text {
  width: 100% !important;
  box-sizing: border-box;
}
.page-goals-edit .description-field .textbox {
  display: block;
  margin-bottom: 0.3rem;
}
.page-goals-edit .add-name-button {
  width: auto;
  padding: 0.5rem 1rem 0.4rem;
}
.page-goals-edit .description-field .form-value {
  text-align: right;
}
@media only screen and (max-device-width: 600px) {
  .page-goals-edit .form {
    flex-direction: column;
    overflow: hidden;
  }
  .page-goals-edit .form-field {
    display: flex;
    flex-direction: column;
  }
  .page-goals-edit .form-label {
    text-align: left !important;
  }
  .page-goals-edit .form-field.required .form-label .form-label-text:after {
    left: auto !important;
    right: -1rem !important;
  }
  #overlay .page-goals-edit .form-fieldset {
    height: auto !important;
    width: auto !important;
    padding: 2rem !important;
  }
  .page-goals-edit .description-field .textbox {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 10rem !important;
  }
  .page-goals-edit .goal-preview {
    display: none;
  }
}
.page-goals-import .sub-row {
  background-color: #F8F8FF;
}

.page-goals-import .sub-row .table-cell:first-child {
  padding-left: 3rem;
}

#overlay .page-goals-import .page-container {
  width: 90rem;
  height: 80rem;
}

#overlay .page-goals-import .editor-pane {
  height: 100%;
}

#overlay .page-goals-import .form {
  height: 100%;
  display: block;
}
.page-goals-print .options {
  max-height: 15rem;
  overflow: auto;
}

.page-goals-print .form-clarifier {
  vertical-align: top;
}
#overlay .page-goals-restore .page-container {
  max-width: 50rem;
}
.page-individuals-users .page-container {
  width: 52rem !important;
}

.page-individuals-users .roster-items {
  height: 40rem;
}
.page-insights .reports-tab .table-cell:nth-child(2),
.page-insights .reports-tab .table-cell:nth-child(3) {
  text-align: center;
}
.page-plans-cancel .page-container {
  width: 55rem !important;
}
.page-plans-method .dynamic-item:first-child:not(:last-child) {
  font-weight: bold;
  margin: 0.8rem 0;
}
@media only screen and (max-device-width: 600px) {
  .page-profile-password .form-field {
    display: flex;
    flex-direction: column;
  }
  .page-profile-password .form-label {
    text-align: left !important;
  }
  .page-profile-password .form-field.required .form-label .form-label-text:after {
    left: auto !important;
    right: -1rem !important;
  }
  .page-profile-password .textbox {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
.page-profile-edit .form-scale .form-value {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-profile-edit .form-scale .scale {
  flex: 1;
}
.page-profile-edit .icons {
  font-size: 120%;
  margin-left: 0.5rem;
}

@media only screen and (max-device-width: 600px) {
  .page-profile-edit .form-field {
    display: flex;
    flex-direction: column;
  }
  .page-profile-edit .form-label {
    text-align: left !important;
  }
  .page-profile-edit .form-field.required .form-label .form-label-text:after {
    left: auto !important;
    right: -1rem !important;
  }
  .page-profile-edit .form-field.form-scale {
    display: none;
  }
  .page-profile-edit .button.variant-secondary {
    display: none;
  }
  .page-profile-edit .form-value > .dropdown,
.page-profile-edit .form-value > .textbox {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .page-profile-edit .multifield .textbox {
    width: 50% !important;
    box-sizing: border-box !important;
  }
}
.page-resources-edit .roster-items {
  height: 18rem;
}

.page-resources-edit .roster-group.selected {
  max-height: 9rem;
}
.page-resources-search .page-container {
  width: 90rem !important;
  height: 60rem !important;
}

.page-resources-search .table-cell .dynamic-item:first-child {
  font-weight: normal;
}

@media only screen and (max-device-width: 600px) {
  .page-resources-search .page-search {
    display: none;
  }
  .page-resources-search .table-cell + .table-cell {
    display: none;
  }
}
.page-resources-view .page-container {
  max-height: 100%;
}

.page-resources-view p {
  text-align: center;
  padding: 5rem;
}

.page-resources-view object,
.page-resources-view iframe {
  width: 90rem;
  height: 60rem;
}

@media only screen and (max-device-width: 600px) {
  .page-resources-view object,
.page-resources-view iframe,
.page-resources-view .page-container {
    width: 100% !important;
    height: 100% !important;
  }
}
#overlay .page-users-delete .page-container {
  max-width: 44rem !important;
}
.page-users-individuals .page-container {
  width: 52rem !important;
}

.page-users-individuals .roster-items {
  height: 40rem;
}

@media only screen and (max-device-width: 600px) {
  .page-users-individuals .form-field {
    display: flex;
    flex-direction: column;
  }

  .page-users-individuals .form-label {
    text-align: left !important;
  }

  .page-users-individuals .form-field.required .form-label .form-label-text:after {
    left: auto !important;
    right: -1rem !important;
  }

  .page-users-individuals .textbox.name {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
#overlay .page-users-impersonate .page-container {
  height: 80rem !important;
  width: 90rem !important;
}

.page-users-impersonate .icons {
  display: inline-block;
  margin: 0 0.5rem;
  color: #5874a3;
}

.page-users-impersonate .icons .flag-off {
  color: #CCC;
}

.page-users-impersonate .email-copy {
  padding: 0.3rem 0.5rem;
  margin: -0.2rem;
}
.page-users-locations .page-container {
  width: 52rem !important;
}

.page-users-locations .roster-items {
  height: 40rem;
}

@media only screen and (max-device-width: 600px) {
  .page-users-locations .form-field {
    display: flex;
    flex-direction: column;
  }

  .page-users-locations .form-label {
    text-align: left !important;
  }

  .page-users-locations .form-field.required .form-label .form-label-text:after {
    left: auto !important;
    right: -1rem !important;
  }

  .page-users-locations .textbox.name {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
#overlay .page-users-password .page-container {
  width: 50rem !important;
}
.page-templates-edit .page-body {
  padding: 0;
}
.page-templates-edit .form {
  display: flex;
  border-spacing: 0;
}
.page-templates-edit .form-fieldset {
  margin: 0;
  border-spacing: 1rem;
  padding: 2rem;
}
.page-templates-edit .form-fieldset:first-child {
  background: transparent;
}
.page-templates-edit .form-fieldset:last-child {
  min-width: 41rem;
  padding: 2rem 1rem;
}
.page-templates-edit .roster-items {
  height: 18rem;
}
.page-templates-edit .description-field .textbox {
  display: block;
  margin-bottom: 0.3rem;
}
.page-templates-edit .add-name-button {
  width: auto;
  padding: 0.5rem 1rem 0.4rem;
}
.page-templates-edit .description-field .form-value {
  text-align: right;
}
@media only screen and (max-device-width: 600px) {
  .page-templates-copy .textbox {
    width: 19rem !important;
  }
}
.page-templates-search .page-container {
  width: 90rem !important;
  height: 70rem !important;
}

.page-templates-search .table-cell .dynamic-item:first-child {
  font-weight: normal;
}
.app-module[data-module=goals] .navigation-list {
  padding-bottom: 0;
}
.app-module[data-module=goals] .navigation-group .toggle .button {
  opacity: 0;
  transition: opacity 0.4s;
  width: 2.5rem;
  height: 2.5rem;
}
.app-module[data-module=goals] .navigation-group .toggle:hover .button {
  opacity: 1;
}
.app-module[data-module=goals] .navigation-footer {
  padding: 2.4rem 0;
  opacity: 0.8;
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.app-module[data-module=goals] .navigation-footer .button {
  padding: 0.5rem 0.8rem;
  border: none;
}
.app-module[data-module=goals] .app-page:empty {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #888;
  font-size: 160%;
  padding: 20% 20% 50%;
  text-align: center;
  line-height: 200%;
}
.app-module[data-module=goals] .app-page:empty:after {
  cursor: pointer;
  content: "You currently have no assigned " attr(data-plural-lower) '.\a\aGo to "Settings" > "' attr(data-plural-upper) '" to add or assign your first ' attr(data-singular-lower) ".\a\a Click here to watch videos on how to set up your account.";
}
.scrollbar::-webkit-scrollbar {
  background-color: #e5e5e5;
  width: 0.75rem;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #BFBFBF;
  border-radius: 1rem;
}

.scrollbar::-webkit-scrollbar-button,
.scrollbar::-webkit-scrollbar-track,
.scrollbar::-webkit-scrollbar-track-piece,
.scrollbar::-webkit-scrollbar-corner,
.scrollbar::-webkit-resizer {
  display: none;
}

.loader:empty {
  opacity: 0.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.loader:empty:before {
  content: "";
  border: 1rem solid black;
  border-radius: 50%;
  height: 5rem;
  opacity: 0;
  width: 5rem;
  animation: loading 1s ease-out;
  animation-iteration-count: infinite;
  display: block;
  margin: 0 auto;
  margin-bottom: 3rem;
}

.loader:empty:after {
  content: "Loading";
  color: black;
  font-size: 150%;
  display: block;
  text-align: center;
  position: relative;
}

@keyframes loading {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}